diff --git a/.cloudbuild/deploy.yaml b/.cloudbuild/deploy.yaml
new file mode 100644
index 00000000000..38cbb791f24
--- /dev/null
+++ b/.cloudbuild/deploy.yaml
@@ -0,0 +1,35 @@
+# This deploys the site.
+
+timeout: 2700s # set build timeout to 45 mins
+steps:
+  - name: node:16.14.2
+    id: 'Install dependencies'
+    entrypoint: npm
+    args: ['ci', '--production']
+
+  - name: node:16.14.2
+    id: 'Generate .env file'
+    entrypoint: npm
+    args: ['run', 'cloud-secrets']
+    env:
+      - 'PROJECT_ID=$PROJECT_ID'
+
+  - name: node:16.14.2
+    id: 'Build site'
+    entrypoint: npm
+    args: ['run', 'build']
+    env:
+      - 'ELEVENTY_ENV=prod'
+      - 'NODE_OPTIONS="--max_old_space_size=8192"'
+
+  - name: 'gcr.io/$PROJECT_ID/firebase'
+    id: 'Deploy site to Firebase'
+    args: ['deploy']
+
+  - name: node:16.14.2
+    id: 'Algolia index site'
+    entrypoint: npm
+    args: ['run', 'algolia']
+
+options:
+  machineType: 'E2_HIGHCPU_32'
diff --git a/.cloudbuild/version-check.yaml b/.cloudbuild/version-check.yaml
new file mode 100644
index 00000000000..15fb83a48bf
--- /dev/null
+++ b/.cloudbuild/version-check.yaml
@@ -0,0 +1,15 @@
+# This Cloud Build task can kick off our actual deploy if the hash has changed.
+
+steps:
+  - name: node:16.14.2
+    id: 'Install dependencies'
+    entrypoint: npm
+    args: ['ci', '--production']
+
+  - name: node:16.14.2
+    id: 'Verify and maybe kick off build for new version'
+    entrypoint: npm
+    args: ['run', 'version-check']
+    env:
+      - 'PROJECT_ID=$PROJECT_ID'
+      - 'NODE_ENV=production'
diff --git a/.editorconfig b/.editorconfig
index c6c8b362193..bad1460690e 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +1,19 @@
+# https://EditorConfig.org
+
+# top-most EditorConfig file
 root = true
 
+# Make sure every file:
+# - Uses utf-8
+# - Indents with spaces instead of tabs
+# - Uses two space indents
+# - Uses Unix-style newlines
+# - Has a newline at the end of every file
+# - Trims trailing whitespace
 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eleventy.js b/.eleventy.js
index 88ff0418a3a..62a9cddce67 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -14,86 +14,107 @@
  * limitations under the License.
  */
 
-const path = require('path');
 const chalk = require('chalk');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const yaml = require('js-yaml');
+const fs = require('fs');
+const path = require('path');
+const fse = require('fs-extra');
+const fetch = require('node-fetch');
+const patterns = require('./src/lib/patterns').patterns();
 
-const resourcePath = require('./src/build/resource-path');
-const markdownIt = require('markdown-it');
-const markdownItAnchor = require('markdown-it-anchor');
-const markdownItAttrs = require('markdown-it-attrs');
-const slugify = require('slugify');
+const markdown = require('./src/site/_plugins/markdown');
 
-const componentsDir = 'src/site/_includes/components';
-const ArticleNavigation = require(`./${componentsDir}/ArticleNavigation`);
-const Aside = require(`./${componentsDir}/Aside`);
-const Assessment = require(`./${componentsDir}/Assessment`);
-const Author = require(`./${componentsDir}/Author`);
-const AuthorCard = require(`./${componentsDir}/AuthorCard`);
-const AuthorInfo = require(`./${componentsDir}/AuthorInfo`);
-const Banner = require(`./${componentsDir}/Banner`);
-const Blockquote = require(`./${componentsDir}/Blockquote`);
-const Breadcrumbs = require(`./${componentsDir}/Breadcrumbs`);
-const CodelabsCallout = require(`./${componentsDir}/CodelabsCallout`);
-const Compare = require(`./${componentsDir}/Compare`);
-const CompareCaption = require(`./${componentsDir}/CompareCaption`);
-const Details = require(`./${componentsDir}/Details`);
-const DetailsSummary = require(`./${componentsDir}/DetailsSummary`);
-const EventTable = require(`./${componentsDir}/EventTable`);
-const Glitch = require(`./${componentsDir}/Glitch`);
-const Hero = require(`./${componentsDir}/Hero`);
-const IFrame = require(`./${componentsDir}/IFrame`);
-const Instruction = require(`./${componentsDir}/Instruction`);
-const Label = require(`./${componentsDir}/Label`);
-const Meta = require(`./${componentsDir}/Meta`);
-const PathCard = require(`./${componentsDir}/PathCard`);
-const PostCard = require(`./${componentsDir}/PostCard`);
-const SignPosts = require(`./${componentsDir}/SignPosts`);
-const Tooltip = require(`./${componentsDir}/Tooltip`);
-const YouTube = require(`./${componentsDir}/YouTube`);
+// Shortcodes used in prose
+const Aside = require('./src/site/_includes/components/Aside');
+const {Blockquote} = require('webdev-infra/shortcodes/Blockquote');
+const {BrowserCompat} = require('webdev-infra/shortcodes/BrowserCompat');
+const {Codepen} = require('webdev-infra/shortcodes/Codepen');
+const Compare = require('./src/site/_includes/components/Compare');
+const CompareCaption = require('./src/site/_includes/components/CompareCaption');
+const {Details} = require('webdev-infra/shortcodes/Details');
+const {DetailsSummary} = require('webdev-infra/shortcodes/DetailsSummary');
+const Glitch = require('./src/site/_includes/components/Glitch');
+const IFrame = require('./src/site/_includes/components/IFrame');
+const {Img, generateImgixSrc} = require('./src/site/_includes/components/Img');
+const Instruction = require('./src/site/_includes/components/Instruction');
+const Label = require('./src/site/_includes/components/Label');
+const {Video} = require('./src/site/_includes/components/Video');
+const {YouTube} = require('webdev-infra/shortcodes/YouTube');
+const CodePattern = require('./src/site/_includes/components/CodePattern');
+const Widget = require('./src/site/_includes/components/Widget');
 
-const collectionsDir = 'src/site/_collections';
-const authors = require(`./${collectionsDir}/authors`);
-const blogPostsDescending = require(`./${collectionsDir}/blog-posts-descending`);
-const newsletters = require(`./${collectionsDir}/newsletters`);
-const {
-  postsWithLighthouse,
-} = require(`./${collectionsDir}/posts-with-lighthouse`);
-const recentBlogPosts = require(`./${collectionsDir}/recent-blog-posts`);
-const tags = require(`./${collectionsDir}/tags`);
-// nb. algoliaPosts is only require'd if needed, below
+// Other shortcodes
+const Assessment = require('./src/site/_includes/components/Assessment');
+const Author = require('./src/site/_includes/components/Author');
+const AuthorsDate = require('./src/site/_includes/components/AuthorsDate');
+const Banner = require('./src/site/_includes/components/Banner');
+const CodelabsCallout = require('./src/site/_includes/components/CodelabsCallout');
+const includeRaw = require('./src/site/_includes/components/includeRaw');
+const Meta = require('./src/site/_includes/components/Meta');
+const StackOverflow = require('./src/site/_includes/components/StackOverflow');
+const YouTubePlaylist = require('./src/site/_includes/components/YouTubePlaylist');
 
-const filtersDir = 'src/site/_filters';
-const consoleDump = require(`./${filtersDir}/console-dump`);
-const {memoize, findByUrl} = require(`./${filtersDir}/find-by-url`);
-const pathSlug = require(`./${filtersDir}/path-slug`);
-const containsTag = require(`./${filtersDir}/contains-tag`);
-const expandAuthors = require(`./${filtersDir}/expand-authors`);
-const findTags = require(`./${filtersDir}/find-tags`);
-const githubLink = require(`./${filtersDir}/github-link`);
-const gitlocalizeLink = require(`./${filtersDir}/gitlocalize-link`);
-const htmlDateString = require(`./${filtersDir}/html-date-string`);
-const md = require(`./${filtersDir}/md`);
-const pagedNavigation = require(`./${filtersDir}/paged-navigation`);
-const postsLighthouseJson = require(`./${filtersDir}/posts-lighthouse-json`);
-const prettyDate = require(`./${filtersDir}/pretty-date`);
-const removeDrafts = require(`./${filtersDir}/remove-drafts`);
-const strip = require(`./${filtersDir}/strip`);
-const stripBlog = require(`./${filtersDir}/strip-blog`);
-const stripQueryParamsDev = require(`./${filtersDir}/strip-query-params-dev`);
-const getPaths = require(`./${filtersDir}/get-paths`);
+// Collections
+const authors = require('./src/site/_collections/authors');
+const blogPostsDescending = require('./src/site/_collections/blog-posts-descending');
+const newsletters = require('./src/site/_collections/newsletters');
+const shows = require('./src/site/_collections/shows');
+const tags = require('./src/site/_collections/tags');
 
-const transformsDir = 'src/site/_transforms';
-const disableLazyLoad = require(`./${transformsDir}/disable-lazy-load`);
-const {responsiveImages} = require(`./${transformsDir}/responsive-images`);
+// Filters
+const {i18n} = require('./src/site/_filters/i18n');
+const {getDefaultUrl, getRelativePath} = require('./src/site/_filters/urls');
+const {memoize, findByUrl} = require('./src/site/_filters/find-by-url');
+const {supportedLanguages} = require('./src/site/_filters/language-list');
+const pathSlug = require('./src/site/_filters/path-slug');
+const algoliaIndexable = require('./src/site/_filters/algolia-indexable');
+const {algoliaItem} = require('./src/site/_filters/algolia-item');
+const containsTag = require('./src/site/_filters/contains-tag');
+const expandAuthors = require('./src/site/_filters/expand-authors');
+const githubLink = require('./src/site/_filters/github-link');
+const gitlocalizeLink = require('./src/site/_filters/gitlocalize-link');
+const htmlDateString = require('./src/site/_filters/html-date-string');
+const isNewContent = require('./src/site/_filters/is-new-content');
+const livePosts = require('./src/site/_filters/live-posts');
+const md = require('./src/site/_filters/md');
+const pagedNavigation = require('./src/site/_filters/paged-navigation');
+const postsLighthouseJson = require('./src/site/_filters/posts-lighthouse-json');
+const prettyDate = require('./src/site/_filters/pretty-date');
+const removeDrafts = require('./src/site/_filters/remove-drafts');
+const slugify = require('./src/site/_filters/slugify');
+const strip = require('./src/site/_filters/strip');
+const stripBlog = require('./src/site/_filters/strip-blog');
+const getPaths = require('./src/site/_filters/get-paths');
+const navigation = require('./src/site/_filters/navigation');
+const {minifyJs} = require('./src/site/_filters/minify-js');
+const {minifyJSON} = require('./src/site/_filters/minify-json');
+const {cspHash, getHashList} = require('./src/site/_filters/csp-hash');
+const {siteRender} = require('./src/site/_filters/site-render');
 const {
-  serviceWorkerPartials,
-} = require(`./${transformsDir}/service-worker-partials`);
+  isUpcoming,
+  filterInUpcoming,
+  filterOutUpcoming,
+} = require('./src/site/_filters/is-upcoming');
+const {latestPostByTags} = require('./src/site/_filters/latest-post-by-tags');
+const {calendarLink} = require('./src/site/_filters/calendar-link');
+
+const disableLazyLoad = require('./src/site/_transforms/disable-lazy-load');
+const {minifyHtml} = require('./src/site/_transforms/minify-html');
+
+// Shared dependencies between web.dev and developer.chrome.com
+const {updateSvgForInclude} = require('webdev-infra/filters/svg');
+const {toc} = require('webdev-infra/filters/toc');
+
+// Creates a global variable for the current __dirname to make including and
+// working with files in the component library a little easier
+global.__basedir = __dirname;
 
 module.exports = function (config) {
   console.log(chalk.black.bgGreen('Eleventy is building, please wait…'));
   const isProd = process.env.ELEVENTY_ENV === 'prod';
+  const isStaging = process.env.ELEVENTY_ENV === 'staging';
 
   // ----------------------------------------------------------------------------
   // PLUGINS
@@ -106,47 +127,7 @@ module.exports = function (config) {
   // ----------------------------------------------------------------------------
   // MARKDOWN
   // ----------------------------------------------------------------------------
-  const markdownItOptions = {
-    html: true,
-  };
-  const markdownItAnchorOptions = {
-    level: 2,
-    permalink: true,
-    permalinkClass: 'w-headline-link',
-    permalinkSymbol: '#',
-    slugify: function (str) {
-      return slugify(str, {
-        replacement: '-',
-        lower: true,
-      });
-    },
-  };
-  const markdownItAttrsOpts = {
-    leftDelimiter: '{:',
-    rightDelimiter: '}',
-    allowedAttributes: ['id', 'class', /^data-.*$/],
-  };
-
-  const mdLib = markdownIt(markdownItOptions)
-    .use(markdownItAnchor, markdownItAnchorOptions)
-    .use(markdownItAttrs, markdownItAttrsOpts)
-    .disable('code');
-
-  // custom renderer rules
-  const fence = mdLib.renderer.rules.fence;
-
-  const rules = {
-    fence: (tokens, idx, options, env, slf) => {
-      const fenced = fence(tokens, idx, options, env, slf);
-      return `<web-copy-code>${fenced}</web-copy-code>`;
-    },
-    table_close: () => '</table>\n</div>',
-    table_open: () => '<div class="w-table-wrapper">\n<table>\n',
-  };
-
-  mdLib.renderer.rules = {...mdLib.renderer.rules, ...rules};
-
-  config.setLibrary('md', mdLib);
+  config.setLibrary('md', markdown);
 
   // ----------------------------------------------------------------------------
   // NON-11TY FILES TO WATCH
@@ -159,76 +140,84 @@ module.exports = function (config) {
   config.addCollection('authors', authors);
   config.addCollection('blogPosts', blogPostsDescending);
   config.addCollection('newsletters', newsletters);
-  config.addCollection('postsWithLighthouse', postsWithLighthouse);
-  config.addCollection('recentBlogPosts', recentBlogPosts);
+  config.addCollection('shows', shows);
   config.addCollection('tags', tags);
   // Turn collection.all into a lookup table so we can use findBySlug
   // to quickly find collection items without looping.
   config.addCollection('memoized', (collection) => {
     return memoize(collection.getAll());
   });
-  config.addCollection('algolia', (collection) => {
-    if (isProd) {
-      const algoliaPosts = require(`./${collectionsDir}/algolia-posts`);
-      return algoliaPosts(collection);
-    }
-    return [];
-  });
 
   // ----------------------------------------------------------------------------
   // FILTERS
   // ----------------------------------------------------------------------------
-  config.addFilter('consoleDump', consoleDump);
+  config.addFilter('i18n', i18n);
   config.addFilter('findByUrl', findByUrl);
-  config.addFilter('findTags', findTags);
+  config.addFilter('supportedLanguages', supportedLanguages);
+  config.addFilter('getDefaultUrl', getDefaultUrl);
+  config.addFilter('getRelativePath', getRelativePath);
   config.addFilter('pathSlug', pathSlug);
+  config.addFilter('algoliaIndexable', algoliaIndexable);
+  config.addFilter('algoliaItem', algoliaItem);
   config.addFilter('containsTag', containsTag);
   config.addFilter('expandAuthors', expandAuthors);
   config.addFilter('githubLink', githubLink);
   config.addFilter('gitlocalizeLink', gitlocalizeLink);
   config.addFilter('htmlDateString', htmlDateString);
+  config.addFilter('imgix', generateImgixSrc);
+  config.addFilter('isNewContent', isNewContent);
+  config.addFilter('livePosts', livePosts);
   config.addFilter('md', md);
+  config.addFilter('navigation', navigation);
+  config.addNunjucksAsyncFilter('siteRender', siteRender);
   config.addFilter('pagedNavigation', pagedNavigation);
   config.addFilter('postsLighthouseJson', postsLighthouseJson);
   config.addFilter('prettyDate', prettyDate);
   config.addFilter('removeDrafts', removeDrafts);
+  config.addFilter('slugify', slugify);
   config.addFilter('stripBlog', stripBlog);
-  config.addFilter('stripQueryParamsDev', stripQueryParamsDev);
   config.addFilter('getPaths', getPaths);
   config.addFilter('strip', strip);
+  config.addFilter('toc', toc);
+  config.addFilter('updateSvgForInclude', updateSvgForInclude);
+  config.addNunjucksAsyncFilter('minifyJs', minifyJs);
+  config.addFilter('minifyJSON', minifyJSON);
+  config.addFilter('cspHash', cspHash);
+  config.addFilter('isUpcoming', isUpcoming);
+  config.addFilter('filterInUpcoming', filterInUpcoming);
+  config.addFilter('filterOutUpcoming', filterOutUpcoming);
+  config.addFilter('latestPostByTags', latestPostByTags);
+  config.addFilter('calendarLink', calendarLink);
 
   // ----------------------------------------------------------------------------
   // SHORTCODES
   // ----------------------------------------------------------------------------
-  config.addShortcode('ArticleNavigation', ArticleNavigation);
   config.addPairedShortcode('Aside', Aside);
   config.addShortcode('Assessment', Assessment);
   config.addShortcode('Author', Author);
-  config.addShortcode('AuthorCard', AuthorCard);
-  config.addShortcode('AuthorInfo', AuthorInfo);
+  config.addShortcode('AuthorsDate', AuthorsDate);
   config.addPairedShortcode('Banner', Banner);
   config.addPairedShortcode('Blockquote', Blockquote);
-  config.addShortcode('Breadcrumbs', Breadcrumbs);
+  config.addShortcode('BrowserCompat', BrowserCompat);
   config.addShortcode('CodelabsCallout', CodelabsCallout);
+  config.addShortcode('Codepen', Codepen);
+  config.addShortcode('CodePattern', CodePattern);
   config.addPairedShortcode('Compare', Compare);
   config.addPairedShortcode('CompareCaption', CompareCaption);
   config.addPairedShortcode('Details', Details);
   config.addPairedShortcode('DetailsSummary', DetailsSummary);
   config.addShortcode('Glitch', Glitch);
-  config.addShortcode('Hero', Hero);
   config.addShortcode('IFrame', IFrame);
+  config.addShortcode('Img', Img);
   config.addShortcode('Instruction', Instruction);
   config.addPairedShortcode('Label', Label);
   config.addShortcode('Meta', Meta);
-  config.addShortcode('PathCard', PathCard);
-  config.addShortcode('PostCard', PostCard);
-  config.addShortcode('SignPosts', SignPosts);
-  config.addShortcode('Tooltip', Tooltip);
+  config.addShortcode('StackOverflow', StackOverflow);
+  config.addShortcode('Widget', Widget);
+  config.addShortcode('Video', Video);
   config.addShortcode('YouTube', YouTube);
-
-  // This table is used for the web.dev/LIVE event, and should be taken down
-  // when the event is over or we no longer use it.
-  config.addShortcode('EventTable', EventTable);
+  config.addShortcode('YouTubePlaylist', YouTubePlaylist);
+  config.addShortcode('includeRaw', includeRaw);
 
   // ----------------------------------------------------------------------------
   // TRANSFORMS
@@ -237,54 +226,98 @@ module.exports = function (config) {
     config.addTransform('disable-lazy-load', disableLazyLoad);
   }
 
-  if (isProd) {
-    config.addTransform('responsive-images', responsiveImages);
+  if (isProd || isStaging) {
+    config.addTransform('minifyHtml', minifyHtml);
   }
 
-  // !!! Important !!!
-  // This transform should always go last.
-  // It takes the final html and turns it into partials that the
-  // service worker can load.
-  config.addTransform('service-worker-partials', serviceWorkerPartials);
-
   // ----------------------------------------------------------------------------
-  // CHECKS
+  // ELEVENTY OPTIONS
   // ----------------------------------------------------------------------------
+  // https://www.11ty.io/docs/config/#data-deep-merge
+  config.setDataDeepMerge(true);
+  config.setUseGitIgnore(false);
+
+  // Make .yml files work in the _data directory.
+  config.addDataExtension('yml', (contents) => yaml.safeLoad(contents));
+
+  // Make CSP hashes accessible to firebase config.
   if (isProd) {
-    // We generate the paths to our JS and CSS entrypoints as a side-effect
-    // of their build scripts, so make sure they exist in prod builds.
-    ['css', 'js'].forEach((name) => {
-      try {
-        resourcePath(name);
-      } catch (e) {
-        throw new Error(
-          `could not find valid JSON path inside src/site/_data/: ${name} (${e})`,
-        );
-      }
+    config.on('afterBuild', () => {
+      fs.writeFileSync(
+        'dist/script-hash-list.json',
+        JSON.stringify(getHashList()),
+      );
     });
   }
 
+  // Because eleventy's passthroughFileCopy does not work with permalinks
+  // we need to manually copy general assets ourselves using gulp.
+  // https://github.com/11ty/eleventy/issues/379
+  // We make exception for CodePattern files used as standalone scripts in demos.
+  for (const patternId in patterns) {
+    const pattern = patterns[patternId];
+    if (pattern.static?.length) {
+      const src = path.join(
+        'src',
+        'site',
+        'content',
+        'en',
+        'patterns',
+        pattern.id,
+      );
+      const rewrite = {};
+      pattern.static.forEach((staticFile) => {
+        rewrite[path.join(src, staticFile)] = path.join(
+          'patterns',
+          pattern.id,
+          staticFile,
+        );
+      });
+      config.addPassthroughCopy(rewrite);
+    }
+  }
+
+  // Third party scripts and assets
+  config.addPassthroughCopy({
+    'src/site/content/en/third_party/': 'third_party',
+  });
+
   // ----------------------------------------------------------------------------
-  // ELEVENTY OPTIONS
+  // ALTERNATIVE BUILD FOR EXPORT
   // ----------------------------------------------------------------------------
-  // https://www.11ty.io/docs/config/#data-deep-merge
-  config.setDataDeepMerge(true);
+  // Temporary
+  if (process.env.ALT_BUILD) {
+    const downloadImage = async (src, outputPath) => {
+      let image = await fetch(generateImgixSrc(src));
+      image = await image.buffer();
+      await fse.outputFile(outputPath, image);
+      console.log('Downloaded ', outputPath);
+    };
+
+    config.addCollection('hero', (collection) => {
+      collection.getAll().forEach((el) => {
+        if (el.data.hero) {
+          const ext = el.data.hero.split('.').pop();
+          const outputPath = el.data.page.outputPath.replace(
+            'index.html',
+            'hero.' + ext,
+          );
+          downloadImage(el.data.hero, outputPath);
+        }
+      });
+      return [];
+    });
+  }
 
-  // https://www.11ty.io/docs/config/#configuration-options
-  const targetLang = process.env.ELEVENTY_LANG || '';
   return {
     dir: {
-      input: path.join('src/site/content/', targetLang),
+      input: 'src/site/content/', // we use a string path with the forward slash since windows doesn't like the paths generated from path.join
       output: 'dist',
-      data: targetLang ? '../../_data' : '../_data',
-      includes: targetLang ? '../../_includes' : '../_includes',
+      data: '../_data',
+      includes: '../_includes',
     },
-    templateFormats: ['njk', 'md'],
+    templateFormats: ['njk', 'md', 'html'],
     htmlTemplateEngine: 'njk',
     markdownTemplateEngine: 'njk',
-    // Because eleventy's passthroughFileCopy does not work with permalinks
-    // we need to manually copy assets ourselves using gulp.
-    // https://github.com/11ty/eleventy/issues/379
-    passthroughFileCopy: false,
   };
 };
diff --git a/.eleventyignore b/.eleventyignore
deleted file mode 100644
index 606186d1798..00000000000
--- a/.eleventyignore
+++ /dev/null
@@ -1 +0,0 @@
-_drafts
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
index c817fc34335..c2752038e5e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,6 @@
 !/.*
-dist/*
\ No newline at end of file
+.tmp/*
+dist/*
+types/*
+/src/site/content/en/patterns/**
+/src/site/content/en/third_party/**
diff --git a/.eslintrc.js b/.eslintrc.js
index 69614883e34..21eb2fc17eb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,9 @@
 module.exports = {
-  extends: ['./node_modules/gts/.eslintrc.json'],
+  extends: ['./node_modules/gts/.eslintrc.json', 'plugin:lit-a11y/recommended'],
   env: {
     es6: true,
     node: true,
-    mocha: true,
+    mocha: false,
     browser: true,
   },
   parser: 'babel-eslint',
@@ -14,7 +14,9 @@ module.exports = {
   globals: {
     customElements: true,
     firebase: true,
-    ga: true,
+    gtag: true,
+    loadScript: true,
+    dataLayer: true,
   },
   rules: {
     indent: [
@@ -24,8 +26,10 @@ module.exports = {
         SwitchCase: 1,
       },
     ],
+    'lit-a11y/no-invalid-change-handler': 0,
     'new-cap': 0,
     'no-case-declarations': 0,
+    'node/no-extraneous-require': 0,
     'node/no-unpublished-import': 0,
     'node/no-unpublished-require': 0,
     'node/no-unsupported-features/es-syntax': 0,
@@ -37,7 +41,6 @@ module.exports = {
           'layout-template',
           'webdev_analytics',
           'webdev_config',
-          'webdev_entrypoint',
         ],
       },
     ],
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 00000000000..fbb38f77349
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "web-dev-production-1"
+  }
+}
diff --git a/.gcloudignore b/.gcloudignore
deleted file mode 100644
index e9e7ca7b72e..00000000000
--- a/.gcloudignore
+++ /dev/null
@@ -1,35 +0,0 @@
-# This file specifies files that are *not* uploaded to Google Cloud Platform
-# using gcloud. It follows the same syntax as .gitignore, with the addition of
-# "#!include" directives (which insert the entries of the given .gitignore-style
-# file at that point).
-#
-# For more information, run:
-#   $ gcloud topic gcloudignore
-#
-.gcloudignore
-# If you would like to upload your .git directory, .gitignore file or files
-# from your .gitignore file, remove the corresponding line
-# below:
-.git
-.gitignore
-
-# Ignore all dotfiles:
-.*
-
-# Node.js dependencies:
-node_modules/
-
-# Source (only from root)
-/glitches/
-/lib/
-/src/
-/test/
-/tools/
-build.js
-CODE_OF_CONDUCT.md
-compile-css.js
-CONTRIBUTING.md
-gulpfile.js
-index-algolia.js
-karma.conf.js
-netlify.toml
\ No newline at end of file
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
deleted file mode 100644
index 037e749a66b..00000000000
--- a/.github/CODEOWNERS
+++ /dev/null
@@ -1,38 +0,0 @@
-# Auto-assign owners for different areas of the site.
-# These folks will automatically get tagged to review PRs in their area.
-# Read more @ https://help.github.com/articles/about-code-owners/
-
-# Default owners for everything
-* @GoogleChrome/web-dev-eng
-
-# Docs
-src/site/content/ @GoogleChrome/web-dev-content
-src/images/authors/ @GoogleChrome/web-dev-content
-src/site/content/en/angular/ @mgechev @GoogleChrome/web-dev-content
-src/site/content/en/authors/ @GoogleChrome/web-dev-eng
-src/site/content/en/metrics/ @philipwalton @GoogleChrome/web-dev-content
-src/site/content/en/newsletter/ @GoogleChrome/web-dev-eng
-src/site/content/en/progressive-web-apps/ @petele @GoogleChrome/web-dev-content
-src/site/content/en/react/ @housseindjirdeh @GoogleChrome/web-dev-content
-src/site/content/en/tags/ @GoogleChrome/web-dev-eng
-src/site/content/en/vitals/ @philipwalton @GoogleChrome/web-dev-content
-
-# File types
-# These should override docs directory owners.
-*.js @GoogleChrome/web-dev-eng
-*.json @GoogleChrome/web-dev-eng
-*.css @GoogleChrome/web-dev-eng
-*.scss @GoogleChrome/web-dev-eng
-*.html @GoogleChrome/web-dev-eng
-*.htm @GoogleChrome/web-dev-eng
-*.njk @GoogleChrome/web-dev-eng
-*.yml @GoogleChrome/web-dev-eng
-*.yaml @GoogleChrome/web-dev-eng
-*.toml @GoogleChrome/web-dev-eng
-*.sh @GoogleChrome/web-dev-eng
-
-# Exceptions
-src/site/_data/authorsData.json @GoogleChrome/web-dev-content
-src/site/_data/tagsData.json @GoogleChrome/web-dev-content
-src/site/_data/paths/*.json @GoogleChrome/web-dev-content
-src/site/_data/paths/progressive-web-apps.json @petele @GoogleChrome/web-dev-content
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index c150d9362d2..40e96bc3104 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,9 @@
 name: Bug report
 about: Found a bug? Let us know!
 title: ''
-labels: bug
+labels:
+- bug
+- P2
 assignees: ''
 
 ---
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index 62b126c0d70..6c707cffb92 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -2,7 +2,9 @@
 name: Feature request
 about: Suggest an idea for this project.
 title: ''
-labels: feature request
+labels:
+- feature request
+- P2
 assignees: ''
 
 ---
diff --git a/.github/ISSUE_TEMPLATE/propose-new-content.md b/.github/ISSUE_TEMPLATE/propose-new-content.md
index 32582f8f570..5949909a4ee 100644
--- a/.github/ISSUE_TEMPLATE/propose-new-content.md
+++ b/.github/ISSUE_TEMPLATE/propose-new-content.md
@@ -12,7 +12,7 @@ assignees: 'kaycebasques'
 
 ### Workflow for Googlers
 
-Fill out the web.dev content proposal form: https://docs.google.com/forms/d/e/1FAIpQLSdYePZbDZ9Idi4MKL0cbqTuUHfPU7ZZJNnV9hDzjc0e1c2UXw/viewform
+Fill out the web.dev content proposal form: https://docs.google.com/forms/d/e/1FAIpQLSc65CDClpUu7R2ECacLz3B1a6hOCWdFAk2vkWXIbZjzNSXq_Q/viewform?resourcekey=0-t3rJNkt5V2-iE2N42KhrhQ
 
 Don't create an issue here on GitHub! Your GitHub issue will be closed
 immediately and you'll be asked to fill out the form instead.
diff --git a/.github/actions/lint-tags/action.yml b/.github/actions/lint-tags/action.yml
new file mode 100644
index 00000000000..c4ac696046b
--- /dev/null
+++ b/.github/actions/lint-tags/action.yml
@@ -0,0 +1,5 @@
+name: Lint Tags
+description: 'Lint tags in posts'
+runs:
+  using: 'node16'
+  main: 'index.js'
diff --git a/.github/actions/lint-tags/index.js b/.github/actions/lint-tags/index.js
new file mode 100644
index 00000000000..238e55752fd
--- /dev/null
+++ b/.github/actions/lint-tags/index.js
@@ -0,0 +1,64 @@
+/**
+ * @file This action checks if the tags used in posts exist in the
+ * yaml file that defines all supported tags.
+ */
+const core = require('@actions/core');
+const fs = require('fs');
+const glob = require('fast-glob');
+const matter = require('gray-matter');
+const yaml = require('js-yaml');
+const path = require('path');
+
+function run() {
+  const tagsYmlInput = 'src/site/_data/i18n/tags.yml';
+  const tagsYmlPath = path.join(process.cwd(), tagsYmlInput);
+  /** @type {{[tag: string]: any}} */
+  const tags = yaml.load(fs.readFileSync(tagsYmlPath, 'utf-8')) || {};
+  if (Object.keys(tags).length === 0) {
+    core.setFailed(`No tags found, check file "${tagsYmlInput}"`);
+  }
+
+  const postsPathInput = 'src/site/content';
+  const postsGlob = path.join(process.cwd(), postsPathInput, '{**/*,*}.md');
+  const postsPaths = glob.sync(postsGlob, {});
+
+  const ignoreTags = ['blog', 'test-post'];
+  // Add tags to ignore to our tags master list
+  for (const ignoreTag of ignoreTags) {
+    tags[ignoreTag] = true;
+  }
+
+  let tagErrorCount = 0;
+
+  // Validate all posts to see if there are any invalid tags
+  for (const postPath of postsPaths) {
+    const fileData = fs.readFileSync(postPath, 'utf8');
+    const data = matter(fileData).data;
+
+    // If `data.tags` is a string rather than an array, turn it into an array
+    if (typeof data.tags === 'string') {
+      data.tags = [data.tags];
+      // If `data.tags` isn't a string or an array set it to an empty array
+    } else if (!Array.isArray(data.tags)) {
+      data.tags = [];
+    }
+
+    for (const tag of data.tags) {
+      if (!(tag in tags) && !tag.startsWith('chrome-')) {
+        tagErrorCount++;
+        core.warning(
+          `ERROR IN FILE: ${postPath.replace(
+            process.cwd(),
+            '',
+          )}, "${tag}" is not a valid tag`,
+        );
+      }
+    }
+  }
+
+  if (tagErrorCount !== 0) {
+    core.setFailed(`Found ${tagErrorCount} instance(s) of invalid tags used`);
+  }
+}
+
+run();
diff --git a/.github/chrome-devrel-bot.json b/.github/chrome-devrel-bot.json
new file mode 100644
index 00000000000..f423e8be831
--- /dev/null
+++ b/.github/chrome-devrel-bot.json
@@ -0,0 +1,67 @@
+{
+  "pr_checks": {
+    "approvals": [
+      {
+        "check_name" : "Content team approval",
+        "teams" : [],
+        "users" : [
+          "malchata",
+          "rachelandrew",
+          "heyawhite",
+          "jpmedley",
+          "mihajlija",
+          "sofiayem",
+          "AaronForinton",
+          "anusmitaray"
+        ],
+        "paths" : [
+          "src/site/content/**/*.md"
+        ]
+      },
+      {
+        "check_name" : "Eng team approval",
+        "teams" : [],
+        "users" : [
+          "PaulKinlan",
+          "matthiasrohmer",
+          "devnook",
+          "tunetheweb"
+        ],
+        "paths" : [
+          "**/*.js",
+          "**/*.json",
+          "**/*.css",
+          "**/*.scss",
+          "**/*.html",
+          "**/*.htm",
+          "**/*.njk",
+          "**/*.toml",
+          "**/*.sh"
+        ]
+      },
+      {
+        "check_name" : "Eng or Content team approval",
+        "teams" : [],
+        "users" : [
+          "PaulKinlan",
+          "matthiasrohmer",
+          "devnook",
+          "malchata",
+          "rachelandrew",
+          "heyawhite",
+          "jpmedley",
+          "mihajlija",
+          "sofiayem",
+          "AaronForinton",
+          "anusmitaray"
+        ],
+        "paths" : [
+          "src/site/_data/**.yml",
+          "src/site/_data/**.yaml",
+          "src/site/_data/**.json",
+          "redirects.yaml"
+        ]
+      }
+    ]
+  }
+}
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000000..bf9b91c6185
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    pull-request-branch-name:
+      separator: "/"
+    labels:
+      - "eng"
+    schedule:
+      interval: "daily"
+    allow:
+      - dependency-name: "@11ty/eleventy"
+      - dependency-name: "webdev-infra"
+      - dependency-name: "@mdn/browser-compat-data"
\ No newline at end of file
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 0e3017b6faf..567855de93b 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,10 +1,16 @@
-<!-- Add the `DO NOT MERGE` label if you don't want the web.dev team 
-     to merge this PR immediately after approving it. -->
+<!-- Googlers: Please complete go/web.dev-content-proposal before
+     submitting PRs that create new pages of content. -->
+
+<!-- If your PR isn't ready for review yet, please set it to draft mode:
+     https://github.blog/2019-02-14-introducing-draft-pull-requests/ -->
+
+<!-- Due to an upcoming migration of this site we are no longer merging pull requests for changes to existing content. Please raise content issues at https://issuetracker.google.com/issues/new?component=1400680&pli=1&template=1857359  -->
 
 Fixes #SOME_ISSUE_NUMBER
 
 Changes proposed in this pull request:
 
-- 
-- 
-- 
+-
+-
+-
+
diff --git a/.github/stale.yml b/.github/stale.yml
index d20324059ef..2f062a74042 100644
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -1,18 +1,22 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 30
+daysUntilStale: 90
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
+daysUntilClose: 365
 # Issues with these labels will never be considered stale
 exemptLabels:
   - pinned
   - accepted
   - Epic
+  - bug
+  - content
+  - content update
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable
 markComment: >
   This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed in 7 days if no further activity occurs.
+  recent activity. It will be closed if no further activity occurs.
   To prevent this from happening, leave a comment.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false
+# Comment to post when closing a stale Issue or Pull Request.
+closeComment: >
+  Closing this issue because it has been marked as stale for more than 365 days.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
new file mode 100644
index 00000000000..40a77732675
--- /dev/null
+++ b/.github/workflows/check.yml
@@ -0,0 +1,230 @@
+---
+name: 'Check'
+
+on: pull_request
+
+jobs:
+  queue:
+    runs-on: ubuntu-latest
+    steps:
+      - id: skip
+        uses: fkirc/skip-duplicate-actions@master
+        with:
+          concurrent_skipping: 'outdated_runs'
+          cancel_others: true
+          skip_after_successful_duplicate: true
+          do_not_skip: '["workflow_dispatch", "schedule"]'
+
+  lint:
+    needs: queue
+    runs-on: ubuntu-latest
+    steps:
+      - name: Getting changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            js:
+              - '**/*.js'
+              - '**/*.json'
+            md:
+              - '**/*.md'
+            scss:
+              - '**/*.scss'
+            tags:
+              - 'src/site/_data/i18n/tags.yml'
+
+      - name: Cloning repository
+        uses: actions/checkout@v3
+
+      - name: Setting up Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version: 16
+
+      - name: Installing Node.js packages
+        run: npm ci
+
+      - name: Lint Tags
+        if: ${{ steps.filter.outputs.tags == 'true' || steps.filter.outputs.md == 'true' }}
+        uses: ./.github/actions/lint-tags
+
+      - name: Linting JavaScript
+        if: ${{ steps.changes.outputs.js == 'true' }}
+        run: |
+          npm run lint:js
+
+      - name: Linting Markdown
+        if: ${{ steps.changes.outputs.md == 'true' }}
+        run: npm run lint:md
+
+      - name: Linting SCSS
+        if: ${{ steps.changes.outputs.scss == 'true' }}
+        run: npm run lint:scss
+
+  test:
+    needs: queue
+    runs-on: ubuntu-latest
+    steps:
+      - name: Getting changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            js:
+              - 'package.json'
+              - 'site/**/*.js'
+              - 'server/**.js'
+              - 'tests/**.js'
+
+      - name: Cloning repository
+        uses: actions/checkout@v3
+
+      - name: Setting up Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version: 16
+
+      - name: Installing Node.js packages
+        run: npm ci
+
+      - name: Running tests
+        if: ${{ steps.changes.outputs.js == 'true' }}
+        run: |
+          npm run test
+
+  build:
+    needs: queue
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cloning repository
+        uses: actions/checkout@v3
+
+      - name: Setting up Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version: 16
+
+      - name: Installing Node.js packages
+        run: npm ci
+
+      - name: Building site
+        env:
+          # Increase memory limit as a full build requires around 8GB
+          NODE_OPTIONS: --max_old_space_size=8192
+          ELEVENTY_ENV: staging
+        run: npm run build
+
+      - name: Packing up built files
+        run: |
+          cp firebase.json dist && tar cfj dist.tar.gz ./dist
+
+      - name: Storing build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist-${{ github.run_id }}
+          path: dist.tar.gz
+          if-no-files-found: error
+
+  lighthouse:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Getting changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            frontend:
+              - 'package.json'
+              - 'site/_js/**/*.js'
+              - 'site/_includes/**/*.njk'
+              - 'site/_scss/**/*.scss'
+
+      - name: Cloning repository
+        uses: actions/checkout@v3
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+
+      - name: Setting up Node.js
+        uses: actions/setup-node@v3
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        with:
+          cache: npm
+          node-version: 16
+
+      - name: Installing Node.js packages
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        run: npm ci
+
+      - name: Downloading build artifacts
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        uses: actions/download-artifact@v3
+        with:
+          name: dist-${{ github.run_id }}
+
+      - name: Unpacking built files
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        run: |
+          tar xf dist.tar.gz && mv ./dist/firebase.json .
+
+      - name: Lighthouse
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        run: |
+          npx @lhci/cli@0.8.x autorun --config=./tools/lhci/lighthouserc.js
+
+  percy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Getting changes
+        id: changes
+        uses: dorny/paths-filter@v2
+        with:
+          filters: |
+            frontend:
+              - 'package.json'
+              - 'site/_filters/**.js'
+              - 'site/_includes/**'
+              - 'site/_js/**.js'
+              - 'site/_plugins/**.js'
+              - 'site/_scss/**.scss'
+              - 'site/_shortcodes/**.js'
+              - 'site/_transforms/**.js'
+              - 'site/_utils/**.js'
+              - 'site/en/content-types/**'
+
+      - name: Cloning repository
+        uses: actions/checkout@v3
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+
+      - name: Setting up Node.js
+        uses: actions/setup-node@v3
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        with:
+          cache: npm
+          node-version: 16
+
+      - name: Installing Node.js packages
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        run: npm ci
+
+      - name: Downloading build artifacts
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        uses: actions/download-artifact@v3
+        with:
+          name: dist-${{ github.run_id }}
+
+      - name: Unpacking built files
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        run: |
+          tar xf dist.tar.gz
+
+      - name: Percy
+        if: ${{ steps.changes.outputs.frontend == 'true' }}
+        env:
+          NODE_OPTIONS: "--max-old-space-size=8192"
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npm run percy
diff --git a/.github/workflows/cleanup-versions-workflow.yml b/.github/workflows/cleanup-versions-workflow.yml
deleted file mode 100644
index 038349e106b..00000000000
--- a/.github/workflows/cleanup-versions-workflow.yml
+++ /dev/null
@@ -1,43 +0,0 @@
-name: Cleanup old versions
-on:
-  schedule:
-    # At 18:00 UTC / 7:00 PST every day.
-    - cron: '0 18 * * *'
-
-jobs:
-  cleanup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Setup gcloud
-        uses: GoogleCloudPlatform/github-actions/setup-gcloud@0.1.1
-        with:
-          version: '270.0.0'
-          service_account_email: ${{ secrets.GCLOUD_EMAIL }}
-          service_account_key: ${{ secrets.GCLOUD_KEY }}
-
-      - name: Checkout
-        uses: actions/checkout@v1.0.0
-
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-
-      - name: Cache node_modules
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-
-      - name: Install
-        run: npm ci
-
-      # Cleanup web-dev-staging
-      - name: Cleanup staging
-        run: npm run stage:cleanup
-
-      # Cleanup web-dev-production-1
-      - name: Cleanup prod
-        run: npm run deploy:cleanup
diff --git a/.github/workflows/continuous-integration-workflow.yml b/.github/workflows/continuous-integration-workflow.yml
deleted file mode 100644
index 16c2f50da07..00000000000
--- a/.github/workflows/continuous-integration-workflow.yml
+++ /dev/null
@@ -1,67 +0,0 @@
-name: Deploy
-on:
-  # Adds a 'Run Workflow' button to the GitHub Actions UI so the team can
-  # manually deploy the site.
-  workflow_dispatch:
-  
-  # Automatically build and deploy the site hourly, Mon-Fri
-  schedule:
-    - cron: '0 * * * 1-5'
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1
-
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-
-      - name: Cache node_modules
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-
-      - name: Install
-        run: npm ci
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Test
-        run: npm run test
-
-      - name: Build
-        env:
-          ELEVENTY_ENV: prod
-        run: npm run build
-      
-      - name: Index algolia
-        env:
-          ALGOLIA_APP: ${{ secrets.ALGOLIA_APP }}
-          ALGOLIA_KEY: ${{ secrets.ALGOLIA_KEY }}
-        run: node index-algolia.js
-
-      - name: Setup gcloud
-        uses: GoogleCloudPlatform/github-actions/setup-gcloud@0.1.1
-        with:
-          version: '270.0.0'
-          service_account_email: ${{ secrets.GCLOUD_EMAIL }}
-          service_account_key: ${{ secrets.GCLOUD_KEY }}
-
-      - name: Stage
-        run: gcloud app deploy --project web-dev-staging --version ${{ github.sha }} --no-promote --quiet
-      
-      - name: Verify staging is live
-        uses: srt32/uptime@v0.1
-        with:
-          url-to-hit: https://${{ github.sha }}-dot-web-dev-staging.appspot.com
-      
-      - name: Deploy to production
-        run: gcloud app deploy --project web-dev-production-1
diff --git a/.github/workflows/lighthouse-ci-workflow.yml b/.github/workflows/lighthouse-ci-workflow.yml
deleted file mode 100644
index 57f1de764d8..00000000000
--- a/.github/workflows/lighthouse-ci-workflow.yml
+++ /dev/null
@@ -1,46 +0,0 @@
-name: Lighthouse CI
-
-# By default, runs when a pull_request's activity type is opened, synchronize,
-# or reopened and on master so comparisons to ancestors can be made.
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    paths:
-      - '**.js'
-      - '!src/site/_data/contributors.js'
-      - '!src/site/_data/countries.js'
-      - 'package.json'
-      - '**.njk'
-      - '**.scss'
-
-jobs:
-  lhci:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1.0.0
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-      - name: Cache node_modules
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - name: Build
-        env:
-          ELEVENTY_ENV: prod
-        run: npm ci && npm run build
-      - name: Install Canary Lighthouse CI
-        run: npm install @lhci/cli@next
-      - name: Lighthouse CI
-        run: |
-          npx lhci autorun \
-          --config=./tools/lhci/lighthouserc.json \
-          --upload.serverBaseUrl=${{ secrets.LHCI_SERVER }} \
-          --upload.token=${{ secrets.LHCI_TOKEN }}
diff --git a/.github/workflows/lint-and-test-workflow.yml b/.github/workflows/lint-and-test-workflow.yml
deleted file mode 100644
index 76019c9c61d..00000000000
--- a/.github/workflows/lint-and-test-workflow.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: Lint and test
-
-# By default, runs when a pull_request's activity type is opened, synchronize,
-# or reopened
-on: pull_request
-
-jobs:
-  lint_and_test:
-    name: Lint and test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1.0.0
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-      - name: Cache node_modules
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - name: Install
-        run: npm ci
-      - name: Lint
-        run: npm run lint
-      - name: Test
-        run: npm run test
\ No newline at end of file
diff --git a/.github/workflows/percy-workflow.yml b/.github/workflows/percy-workflow.yml
deleted file mode 100644
index 54f3dcc31c4..00000000000
--- a/.github/workflows/percy-workflow.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-name: Percy
-
-# By default, runs when a pull_request's activity type is opened, synchronize,
-# or reopened
-on:
-  push:
-    branches:
-      - master
-    paths:
-      - '**.js'
-      - '!src/site/_data/contributors.js'
-      - '!src/site/_data/countries.js'
-      - 'package.json'
-      - '**.njk'
-      - '**.scss'
-  pull_request:
-    paths:
-      - '**.js'
-      - '!src/site/_data/contributors.js'
-      - '!src/site/_data/countries.js'
-      - 'package.json'
-      - '**.njk'
-      - '**.scss'
-
-jobs:
-  percy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1.0.0
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-      - name: Cache node_modules
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - name: Install
-        run: npm ci
-      - name: Percy
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-        run: npm run percy
diff --git a/.github/workflows/snapshot-firestore-workflow.yml b/.github/workflows/snapshot-firestore-workflow.yml
deleted file mode 100644
index 9d0cf295778..00000000000
--- a/.github/workflows/snapshot-firestore-workflow.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Snapshot firestore
-on:
-  schedule:
-    # At 19:00 UTC / 7:00 PST on every Monday.
-    - cron: '0 19 * * 1'
-
-jobs:
-  ci:
-    name: Run gcloud to snapshot
-    runs-on: ubuntu-latest
-    steps:
-      - name: Setup gcloud
-        uses: GoogleCloudPlatform/github-actions/setup-gcloud@0.1.1
-        with:
-          version: '270.0.0'
-          service_account_email: ${{ secrets.GCLOUD_EMAIL }}
-          service_account_key: ${{ secrets.GCLOUD_KEY }}
-
-      # nb. gcloud uses a new timestamp'ed dir only when pointing at a top-level bucket. Thus, we
-      # can't naïvely target a subfolder (it will fail with "Path already exists").
-      # This is a secondary bucket, not the default Firebase project. Its lifecycle config is set
-      # to delete objects that are >=90 days old.
-      - name: Export Firestore
-        run: gcloud --project web-dev-production-1 firestore export gs://web-dev-production-firestore-archive
diff --git a/.github/workflows/translation-status.yml b/.github/workflows/translation-status.yml
new file mode 100644
index 00000000000..ce885638bcf
--- /dev/null
+++ b/.github/workflows/translation-status.yml
@@ -0,0 +1,44 @@
+name: Update translated date
+on:
+  pull_request:
+    branches:
+      - i18n-gitlocalize
+
+jobs:
+  translation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Install
+        run: npm ci
+
+      - name: Get changed files
+        id: files
+        uses: jitterbit/get-changed-files@v1
+        with:
+          format: 'json'
+
+      - name: Update translated field
+        run: npm run translated -- ${{ steps.files.outputs.all }}
+
+      - name: Commit files
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action: Update translated date"
+          git add --all
+          git commit -am "Update translated date"
+
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.head_ref }}
diff --git a/.gitignore b/.gitignore
index 788e0bf87cb..3f3229a5371 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-# Temporary files generated by builds
+# Temporary files generated by builds that point to our CSS/JS entrypoints.
 src/site/_data/resource*.json
 
 # Logs
@@ -69,16 +69,23 @@ typings/
 # build artifacts
 dist
 
-# deploy scripts
-devsite.js
-local-devsite.js
-
 # DS_Store
 .DS_Store
 
 # IDEs
 .idea
 entrypoint.hashmanifest.json
+.vscode
 
 # Temporary files
+.cache
 .tmp
+.cache
+.firebase
+firebase.json
+src/scss/_tokens.scss
+src/scss/_themes.scss
+
+# Eleventy
+# We generate our own .eleventyignore file dynamically during builds
+.eleventyignore
diff --git a/.gitlocalize.yml b/.gitlocalize.yml
new file mode 100644
index 00000000000..37c084a6d25
--- /dev/null
+++ b/.gitlocalize.yml
@@ -0,0 +1,20 @@
+pretranslate:
+  segments:
+    ignore_frontmatter_keys:
+    - "layout"
+    - "permalink"
+    - "noindex"
+    - "date"
+    - "updated"
+    - "override"
+    - "codelabs"
+    - "tags"
+    - "authors"
+    - "offline"
+    - "hero"
+    - "thumbnail"
+
+    ignore_patterns:
+     - !ruby/regexp /{%\s?([a-zA-Z0-9\.\-\?\'\"\,\!\s\/]*)\s?%}/
+     - !ruby/regexp /{%\s?end([a-zA-Z0-9\.\-\?\'\"\,\!\s]*)\s?%}/
+     - !ruby/regexp /{%\s?AssessmentCallout([a-zA-Z0-9\.\-\?\'\"\,\!\s]*)\s?%}/
diff --git a/.huskyrc b/.huskyrc
index 74c9294e66c..3664a833827 100644
--- a/.huskyrc
+++ b/.huskyrc
@@ -2,6 +2,6 @@
   "//1": "Use git commit --no-verify to bypass the pre-commit hook",
   "//2": "Use git push --no-verify to bypass the pre-push hook",
   "hooks": {
-    "pre-push": "npm run lint"
+    "pre-commit": "npx lint-staged"
   }
 }
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
new file mode 100644
index 00000000000..71e88f9c657
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,5 @@
+{
+  "*.scss": "npm run lint:scss",
+  "*.md": "npm run lint:md",
+  "*.js": "npm run lint:js"
+}
diff --git a/.nvmrc b/.nvmrc
index ca49ae3c9e5..6276cf12fb1 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v10.16.1
+v16.14.2
diff --git a/.pullapprove.yml b/.pullapprove.yml
new file mode 100644
index 00000000000..8e1a30a45e4
--- /dev/null
+++ b/.pullapprove.yml
@@ -0,0 +1,165 @@
+# pullapprove lets you configure which individuals or teams should be able
+# to review and approve pull requests.
+#
+# If a user or team's name is prefixed with a ~ then they won't be assigned
+# as a reviewer, but they still have the power to approve. This helps cut
+# down on notification spam.
+
+version: 3
+
+# Global conditions that apply to all pull requests.
+# https://docs.pullapprove.com/config/pullapprove-conditions/
+pullapprove_conditions:
+# Don't tag in any reviewers if the PR is work in progress.
+- condition: '"WIP" not in title'
+  unmet_status: pending
+  explanation: 'Work in progress'
+- condition: 'not draft'
+  unmet_status: pending
+  explanation: 'Draft PR'
+
+groups:
+  # Learn CSS
+  # Handles any changes related to the Learn CSS course
+  learncss:
+    reviewers:
+      users:
+      - una
+      - argyleink
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    reviews:
+      # Assign all reviewers.
+      request: 99
+    conditions:
+      - >
+        glob('src/site/content/en/learn/css/**/*.md') in files or
+        glob('src/site/content/en/learn/css/**/*.yml') in files or
+        glob('src/site/_data/courses/css/**/*.yml') in files
+
+  # Capabilities/Fugu
+  capabilities:
+    reviewers:
+      users:
+      - jpmedley
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[Fugu]" in title or "[Capabilities]" in title or "fugu" in labels or "capabilities" in labels'
+
+  # PWA
+  pwa:
+    reviewers:
+      users:
+      - jpmedley
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[PWA]" in title or "pwa" in labels'
+
+  # Media
+  media:
+    reviewers:
+      users:
+      - jpmedley
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[Media]" in title or "media" in labels'
+
+  # Vitals
+  vitals:
+    reviewers:
+      users:
+      - mihajlija
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[CWV]" in title or "[Vitals]" in title or "vitals" in labels'
+
+  # Privacy/Security
+  privacy_security:
+    reviewers:
+      users:
+      - mihajlija
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[Privacy]" in title or "[Security]" in title or "privacy/security" in labels'
+      # dependabot prefixes its PRs with [Security] but we want the eng team to handle these.
+      - "'dependabot' not in author.username"
+
+  # Identity
+  identity:
+    reviewers:
+      users:
+      - mihajlija
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      - '"[Identity]" in title or "identity" in labels'
+
+  # Content
+  # Handles any changes related to site content.
+  content:
+    reviewers:
+      teams:
+      - ~web-dev-content
+      - ~web-dev-eng
+      - ~web-dev-approvers
+    conditions:
+      # Only fall through to this group if the review has not been handled by
+      # one of the prior teams.
+      - 'len(groups.active) == 0'
+      - >
+        files.include('src/site/content/*') or
+        files.include('src/images/authors/*') or
+        files.include('src/site/_data/i18n/*') or
+        files.include('src/site/_data/authorsData.json') or
+        files.include('src/site/_data/tagsData.json') or
+        files.include('src/site/_data/paths/*.json') or
+        files.include('redirects.yaml')
+
+  # Code
+  # Handles any changes to programmatic files.
+  code:
+    reviewers:
+      teams:
+      - web-dev-eng
+    reviews:
+      # The number of people who should be requested for review at any given
+      # time. Default is 1.
+      request: 2
+    conditions:
+      # Only tag the eng team if the review has not been handled by
+      # one of the prior teams.
+      - 'len(groups.active) == 0'
+      # The engineering team is the default owner for any code related files.
+      - >
+        contains_any_globs(files, [
+          '**/*.js',
+          '**/*.css',
+          '**/*.scss',
+          '**/*.html',
+          '**/*.htm',
+          '**/*.njk',
+          '**/*.toml',
+          '**/*.sh'
+        ]) or
+        files.include('*.yaml').exclude('redirects.yaml') or
+        files.include('*.yml').exclude('src/site/_data/i18n/*') or
+        files.include('*.json').exclude('src/site/_data/authorsData.json').exclude('src/site/_data/tagsData.json').exclude('src/site/_data/paths/*.json')
diff --git a/.remarkrc.js b/.remarkrc.js
index fb9178bc492..6a07dc7d641 100644
--- a/.remarkrc.js
+++ b/.remarkrc.js
@@ -7,6 +7,7 @@ exports.plugins = [
   // Remark Lint Style Guide preset and overrides.
   require('remark-preset-lint-markdown-style-guide'),
   ['lint-blockquote-indentation', false],
+  ['lint-definition-case', false],
   ['lint-emphasis-marker', false],
   ['lint-fenced-code-flag', false],
   ['lint-hard-break-spaces', false],
@@ -42,8 +43,8 @@ exports.plugins = [
   // Custom plugins.
   require('./tools/linting/bad-urls.js'),
   require('./tools/linting/fenced-code-flag.js'),
-  require('./tools/linting/no-dash-spaces.js'),
   require('./tools/linting/no-repeat-punctuation.js'),
   require('./tools/linting/no-smart-quotes.js'),
   require('./tools/linting/no-unescaped-template-tags.js'),
+  require('./tools/linting/no-chrome-scheme.js'),
 ];
diff --git a/.sasslintrc b/.sasslintrc
index cab1f82e0d0..a4dfc95b05e 100644
--- a/.sasslintrc
+++ b/.sasslintrc
@@ -20,19 +20,11 @@
     "attribute-quotes": 2,
     "brace-style": 2,
     "border-zero": 2,
-    "class-name-format": [
-      2,
-      {
-        "convention": "^(w|web)-.+",
-        "convention-explanation": "Classes must be namedspaced with w-* or web-* prefix."
-      }
-    ],
     "declarations-before-nesting": 2,
     "empty-line-between-blocks": 2,
     "final-newline": 2,
     "hex-notation": 2,
     "indentation": 2,
-    "leading-zero": 2,
     "no-css-comments": 2,
     "no-debug": 2,
     "no-mergeable-selectors": 2,
@@ -45,13 +37,6 @@
     "shorthand-values": 2,
     "single-line-per-selector": 2,
     "space-after-comma": 2,
-    "space-around-operator": 2,
-    "variable-name-format": [
-      2,
-      {
-        "convention": "^[_A-Z0-9]+$",
-        "convention-explanation": "Variable names should be in $SCREAMING_SNAKE_CASE"
-      }
-    ]
+    "space-around-operator": 2
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index f0d0a038cec..00000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "prettier.eslintIntegration": true,
-}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d9cadcdd83c..abc0c8e1982 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,18 +12,18 @@ proposal.
 
 ### Contributor License Agreements
 
-We'd love to accept your code patches! However, before we can take them, we 
+We'd love to accept your code patches! However, before we can take them, we
 have to jump a couple of legal hurdles.
 
-Please fill out either the individual or corporate Contributor License 
+Please fill out either the individual or corporate Contributor License
 Agreement.
 
-* If you are an individual writing original source code and you're sure you 
+* If you are an individual writing original source code and you're sure you
 own the intellectual property, then sign an [individual CLA](https://developers.google.com/open-source/cla/individual).
-* If you work for a company that wants to allow you to contribute your work, 
+* If you work for a company that wants to allow you to contribute your work,
 then sign a [corporate CLA](https://developers.google.com/open-source/cla/corporate).
 
-Follow either of the two links above to access the appropriate CLA and 
+Follow either of the two links above to access the appropriate CLA and
 instructions for how to sign and return it.
 
 1. Sign the contributors license agreement above.
@@ -39,7 +39,7 @@ the CLA.
 
 ## Writing Code
 
-If your contribution contains code, please make sure that it follows 
+If your contribution contains code, please make sure that it follows
 [the style guide](https://google.github.io/styleguide/jsguide.html).
 Otherwise, we will have to ask you to make changes, and that's no fun for anyone.
 
diff --git a/README.md b/README.md
index 0467d6b4165..7db51adebe1 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,22 @@
-# web.dev
+# web.dev [Archived]
 
-![Continuous integration](https://github.com/GoogleChrome/web.dev/workflows/Continuous%20integration/badge.svg)
+**Note:** This site is migrated to a new platform and this repository is available in a read-only mode. **We will not be merging new pull requests**. Please raise content issues in the new [issue tracker](https://issuetracker.google.com/issues/new?component=1400680&pli=1&template=1857359).
 
 web.dev is the ultimate resource for developers of all backgrounds to learn,
 create, and solve on the web. It's meant to not only educate developers, but
 help them apply what they've learned to any site they work on, be it personal or
 business.
 
-## Found a bug? 👷‍♀️
-
-Thanks for letting us know! Please [file an issue](https://github.com/GoogleChrome/web.dev/issues/new?assignees=&labels=bug&template=bug_report.md&title=) and a team member should reply shortly.
-
-## Authoring content ✍️
-
-Before you start writing take a moment to look over the [web.dev
-handbook](https://web.dev/handbook) and familiarize yourself with the process.
-When you're ready, follow the steps in the
-[Quickstart](https://web.dev/handbook/quick-start/) to create your content
-proposal.
+-----
+# [Archived README]
 
 ## Building the site 🏗
 
-You'll need a recent version of Node: v12.10 or higher.
+You'll need a recent version of [Node](https://nodejs.org/): v14 (LTS) or higher.
+To check your node version run `node -v` in your terminal.
+
+If you don't have node, or if you need to upgrade, we recommend using the [Node
+Version Manager (nvm)](https://github.com/nvm-sh/nvm).
 
 ### Clone the repo
 
@@ -29,6 +24,12 @@ You'll need a recent version of Node: v12.10 or higher.
 git clone https://github.com/GoogleChrome/web.dev.git
 ```
 
+### Change directory into the folder created
+
+```bash
+cd web.dev
+```
+
 ### Install dependencies
 
 ```bash
@@ -44,12 +45,50 @@ npm run dev
 Open `http://localhost:8080/` to see the site locally. Changes to assets will
 rebuild the site. Refresh to see your changes.
 
+### Set up build flags
+
+Building the entire site can take a while because it's around one thousand pages.
+If you want to _massively_ speed up your build times, we suggest setting some
+build flags to ignore certain sections.
+
+- Create a `.env` file at the root of your project
+- Add the following:
+
+```text
+# Ignore ALL site content
+ELEVENTY_IGNORE=true
+
+# Only build the directories you're working on.
+# Note, this is a JSON string so you must use double quotes.
+ELEVENTY_INCLUDE=["blog", "vitals"]
+```
+
 ## Environments 🌳
 
 Set `ELEVENTY_ENV=prod` to force production builds. This is the default when
 running "stage" or "deploy". No other options for `ELEVENTY_ENV` are supported,
 although our Eleventy site config will default to 'dev' if unspecified.
 
+The production build currently requires a _lot_ of memory, to the point where
+`node` might exit with errors along the line of
+
+```sh
+FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
+
+v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
+```
+
+The exact amount of heap space required varies from computer to computer and version
+of `node`. If you need a local production build, but run out of memory, you can
+increase the heap size by adding `--node-options '--max_old_space_size=8192'` (to
+[assign 8gb of heap space](https://stackoverflow.com/questions/48387040/how-do-i-determine-the-correct-max-old-space-size-for-node-js/48392705#48392705))
+to the [`npm` command](https://docs.npmjs.com/cli/v8/using-npm/config#node-options),
+prior to `run`. For instance:
+
+```sh
+ELEVENTY_ENV=prod npm --node-options '--max_old_space_size=8192' run build
+```
+
 ## Staging 🕺
 
 When you send in a pull request it will be automatically staged for you. Keep an
@@ -59,33 +98,30 @@ eye out for the netlify bot to comment on the pull request with your unique URL.
 
 ### Automatic deploys
 
-The site will build and deploy the master branch automatically every hour,
+The site will build and deploy the main branch automatically every hour,
 Mon-Fri. If you've just merged an article then it should go live at the top
 of the next hour.
 
 ### Manual deploys
 
-To manually deploy the site you'll need to be a member of one of these GitHub
-teams:
+To manually deploy the site you'll need to be a member of one of these Google teams:
 
-- @GoogleChrome/web-dev-admins
-- @GoogleChrome/web-dev-content
-- @GoogleChrome/web-dev-contributors
-- @GoogleChrome/web-dev-eng
-- @GoogleChrome/web-devrel
+- web.dev-eng
+- web.dev-owners
 
-1. Navigate to [the Deploy workflow in the Actions panel](https://github.com/GoogleChrome/web.dev/actions?query=workflow%3ADeploy).
-2. Click the **Run workflow** button. Make sure the branch says `master`, then click the green **Run workflow** button.
+1. Navigate to [the Cloud Build Triggers page](https://console.cloud.google.com/cloud-build/triggers?project=web-dev-production-1).
+2. Click the **RUN** button for the trigger named **Deploy**.
+3. In the side drawer that opens up, click the **RUN TRIGGER** button for the trigger for the **main** branch.
 
-![An expanded workflow popup with a green run workflow button inside of it.](https://user-images.githubusercontent.com/1066253/89584965-da6eb500-d7f1-11ea-8a43-d8b1abe2cd3b.png)
+*NOTE: web.dev auto deploys every hour if there is a new commit in the `main` branch. Manual deploys should only occur when a build fails or if auto deploys are disabled.*
 
 ## Debugging 🐛
 
 If you need to debug the site's build process:
 
 1. Add a `debugger` statement to `.eleventy.js`
-1. Run `npm run debug`
-1. Go to `chrome://inspect` to attach to the running process.
+1. Run `npm run debug:eleventy`
+1. Go to `about://inspect` to attach to the running process.
 
 <img
   width="295"
diff --git a/algolia.js b/algolia.js
new file mode 100644
index 00000000000..30828265b99
--- /dev/null
+++ b/algolia.js
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require('dotenv').config();
+
+const algoliasearch = require('algoliasearch');
+const fs = require('fs');
+const path = require('path');
+const truncateUTF8Bytes = require('truncate-utf8-bytes');
+
+const {sizeOfJSONInBytes} = require('./shared/sizeOfJSONInBytes');
+const {defaultLocale, supportedLocales} = require('./shared/locale');
+
+const maxChunkSizeInBytes = 10000000; // 10,000,000
+const maxChunkSizeInMB = maxChunkSizeInBytes / 1000000;
+// This limit is set by our current Algolia plan (with some headroom).
+// The restriction applies to the size of the JSON serialization of each item.
+// See https://support.algolia.com/hc/en-us/articles/4406981897617-Is-there-a-size-limit-for-my-index-records-#:~:text=The%20record%20size%20limit%20is%20based%20on%20the%20size%20of%20this%20final%20JSON%20file.
+const maxItemSizeInBytes = 9000;
+
+/**
+ * If needed, trims size of an AlgoliaItem so that its JSON serialization is
+ * under the byte limit.
+ *
+ * @param {AlgoliaItem} item
+ * @return {AlgoliaItem}
+ */
+const trimBytes = (item) => {
+  const currentSizeInBytes = sizeOfJSONInBytes(item);
+
+  // If the item is too big, trim the content before returning it.
+  if (currentSizeInBytes > maxItemSizeInBytes) {
+    const bytesToRemove = currentSizeInBytes - maxItemSizeInBytes;
+    const contentSizeInBytes = sizeOfJSONInBytes(item.content);
+
+    item.content = truncateUTF8Bytes(
+      item.content,
+      contentSizeInBytes - bytesToRemove,
+    );
+  }
+
+  return item;
+};
+
+/**
+ * Chunks array of AlgoliaItem into array of array of AlgoliaItems smaller than 10 MB.
+ *
+ * @param {AlgoliaItem[]} arr
+ * @return {AlgoliaItem[][]}
+ */
+const chunkAlgolia = (arr) => {
+  const chunked = [];
+  let tempSizeInBytes = 0;
+  let temp = [];
+  for (const arrItem of arr) {
+    const currentSizeInBytes = sizeOfJSONInBytes(arrItem);
+
+    if (currentSizeInBytes >= maxChunkSizeInBytes) {
+      throw new Error(
+        `${path.join(
+          arrItem.locale || '',
+          arrItem.url || '',
+        )} is >= than ${maxChunkSizeInMB} MB`,
+      );
+    } else if (tempSizeInBytes + currentSizeInBytes < maxChunkSizeInBytes) {
+      temp.push(arrItem);
+      tempSizeInBytes += currentSizeInBytes;
+    } else {
+      chunked.push(temp);
+      temp = [arrItem];
+      tempSizeInBytes = currentSizeInBytes;
+    }
+  }
+  chunked.push(temp);
+  return chunked;
+};
+
+async function index() {
+  const indexedOn = new Date();
+
+  const raw = fs.readFileSync('dist/pages.json', 'utf-8');
+  /** @type {AlgoliaItem[]} */
+  const pagesData = JSON.parse(raw);
+
+  /** @type {{ [url: string]: string[]}} */
+  const urlToLocale = pagesData.reduce((urlLocalesDict, {url, locale}) => {
+    if (urlLocalesDict[url]) {
+      urlLocalesDict[url].push(locale);
+    } else {
+      urlLocalesDict[url] = [locale];
+    }
+
+    return urlLocalesDict;
+  }, {});
+
+  const algoliaData = pagesData.map((/** @type {AlgoliaItem} */ item) => {
+    if (item.locale === defaultLocale) {
+      const locales = urlToLocale[item.url];
+      item.locales = [
+        item.locale,
+        ...supportedLocales.filter((i) => locales.indexOf(i) === -1),
+      ];
+    } else {
+      item.locales = [item.locale];
+    }
+    item.indexedOn = indexedOn.getTime();
+    return trimBytes(item);
+  });
+
+  // Skip indexing unless the environment is configured.
+  if (!process.env.ALGOLIA_APP_ID || !process.env.ALGOLIA_API_KEY) {
+    throw new Error(
+      'Missing Algolia environment variables, skipping indexing.',
+    );
+  } else {
+    const chunkedAlgoliaData = chunkAlgolia(algoliaData);
+    const postsCount = algoliaData.length;
+
+    // @ts-ignore
+    const client = algoliasearch(
+      process.env.ALGOLIA_APP_ID,
+      process.env.ALGOLIA_API_KEY,
+    );
+    const index = client.initIndex('prod_web_dev');
+
+    console.log(
+      `Indexing ${postsCount} articles amongst ${chunkedAlgoliaData.length} chunk(s).`,
+    );
+
+    // When indexing data we mark these two fields as fields that can be filtered by.
+    await index.setSettings({
+      searchableAttributes: ['title', 'content', 'description'],
+      attributesForFaceting: ['locales', 'tags'],
+      customRanking: ['desc(priority)'],
+    });
+
+    // Update the Algolia index with new data
+    for (let i = 0; i < chunkedAlgoliaData.length; i++) {
+      await index.saveObjects(chunkedAlgoliaData[i], {
+        autoGenerateObjectIDIfNotExist: true,
+      });
+    }
+
+    console.log('Updated algolia data.');
+
+    console.log('Deleting old data no longer in pages.json.');
+    await index.deleteBy({
+      filters: `indexedOn < ${indexedOn.getTime()}`,
+    });
+    console.log('Deleted old data.');
+    console.log('Done!');
+  }
+}
+
+module.exports = {
+  chunkAlgolia,
+  index,
+  maxChunkSizeInBytes,
+  maxItemSizeInBytes,
+  trimBytes,
+};
diff --git a/app.yaml b/app.yaml
deleted file mode 100644
index 65dceb3f014..00000000000
--- a/app.yaml
+++ /dev/null
@@ -1,20 +0,0 @@
-# Copyright 2019, Google, Inc.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#    http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-runtime: nodejs12
-
-handlers:
-- url: /.*
-  script: auto
-  secure: always
-  redirect_http_response_code: 301
diff --git a/build-sw.js b/build-sw.js
deleted file mode 100644
index fd568a66310..00000000000
--- a/build-sw.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-require('dotenv').config();
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-
-const log = require('fancy-log');
-const rollupPluginVirtual = require('rollup-plugin-virtual');
-const rollupPluginReplace = require('rollup-plugin-replace');
-const OMT = require('@surma/rollup-plugin-off-main-thread');
-const rollup = require('rollup');
-const {getManifest} = require('workbox-build');
-const resourcePath = require('./src/build/resource-path');
-const buildVirtualJSON = require('./src/build/virtual-json');
-const minifySource = require('./src/build/minify-js');
-
-process.on('unhandledRejection', (reason, p) => {
-  log.error('Build had unhandled rejection', reason, p);
-  throw new Error(`Build had unhandled rejection ${reason}`);
-});
-
-const {buildDefaultPlugins, disallowExternal} = require('./src/build/common');
-
-/**
- * Builds the cache manifest for inclusion into the Service Worker.
- *
- * TODO(samthor): This relies on both the gulp and CSS tasks occuring
- * before the Rollup build script.
- */
-async function buildCacheManifest() {
-  const config = {
-    // JS or CSS files that include hashes don't need their own revision fields.
-    dontCacheBustURLsMatching: /-[0-9a-f]{8}\.(css|js)/,
-    globDirectory: 'dist',
-    globPatterns: [
-      // We don't include jpg files, as they're used for authors and hero
-      // images, which are part of articles, and not the top-level site.
-      'images/**/*.{png,svg}',
-      '*-*.js',
-      'sw-partial-layout.partial',
-    ],
-    globIgnores: [
-      // This removes large shared PNG files that are used only for articles.
-      'images/{shared}/**',
-    ],
-  };
-  if (isProd) {
-    config.additionalManifestEntries = [
-      {url: resourcePath('js'), revision: null},
-      {url: resourcePath('css'), revision: null},
-    ];
-  } else {
-    // Don't use hash revisions in dev, or even check that the files exist.
-    config.globPatterns.push('bootstrap.js', 'app.css');
-  }
-
-  const toplevelManifest = await getManifest(config);
-  if (toplevelManifest.warnings.length) {
-    throw new Error(`toplevel manifest: ${toplevelManifest.warnings}`);
-  }
-
-  // We need this manifest to be separate as we pretend it's rooted at the
-  // top-level, even though it comes from "dist/en".
-  const contentManifest = await getManifest({
-    globDirectory: 'dist/en',
-    globPatterns: ['offline/index.json'],
-  });
-  if (contentManifest.warnings.length) {
-    throw new Error(`content manifest: ${contentManifest.warnings}`);
-  }
-
-  const all = [];
-  all.push(...toplevelManifest.manifestEntries);
-  all.push(...contentManifest.manifestEntries);
-  return all;
-}
-
-/**
- * Performs main site compilation via Rollup: first on site code, and second
- * to build the Service Worker.
- */
-async function build() {
-  // We don't generate a manifest in dev, so Workbox doesn't do a default cache step.
-  const manifest = isProd ? await buildCacheManifest() : [];
-
-  const swBundle = await rollup.rollup({
-    input: 'src/lib/sw.js',
-    external: disallowExternal,
-    manualChunks: (id) => {
-      if (id.includes('/node_modules/idb-keyval')) {
-        return 'sw-idb-keyval';
-      }
-      if (/\/node_modules\/workbox-.*\//.exec(id)) {
-        return 'sw-workbox';
-      }
-    },
-    plugins: [
-      // This variable is defined by Webpack (and some other tooling), but not by Rollup. Set it to
-      // "production" if we're in prod, which will hide all of Workbox's log messages.
-      // Note that Terser below will actually remove the conditionals (this replace will generate
-      // lots of `if ("production" !== "production")` statements).
-      rollupPluginReplace({
-        'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : ''),
-      }),
-      rollupPluginVirtual(
-        buildVirtualJSON({
-          'cache-manifest': manifest,
-        }),
-      ),
-      ...buildDefaultPlugins(),
-      OMT(),
-    ],
-  });
-
-  const swGenerated = await swBundle.write({
-    sourcemap: true,
-    dir: 'dist',
-    format: 'amd',
-  });
-
-  const swOutputFiles = swGenerated.output.map(({fileName}) => fileName);
-  if (isProd) {
-    const ratio = await minifySource(swOutputFiles);
-    log(`Minified service worker is ${(ratio * 100).toFixed(2)}% of source`);
-  }
-}
-
-(async function () {
-  await build();
-  log(`Build the Service Worker`);
-})();
diff --git a/build.js b/build.js
deleted file mode 100644
index 8f49d6f5bd0..00000000000
--- a/build.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-require('dotenv').config();
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-
-const fs = require('fs').promises;
-const path = require('path');
-const log = require('fancy-log');
-const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
-const rollupPluginCJS = require('rollup-plugin-commonjs');
-const rollupPluginPostCSS = require('rollup-plugin-postcss');
-const rollupPluginVirtual = require('rollup-plugin-virtual');
-const rollupPluginIstanbul = require('rollup-plugin-istanbul');
-const rollup = require('rollup');
-const buildVirtualJSON = require('./src/build/virtual-json');
-const minifySource = require('./src/build/minify-js');
-const {hashForFiles} = require('./src/build/hash');
-
-process.on('unhandledRejection', (reason, p) => {
-  log.error('Build had unhandled rejection', reason, p);
-  throw new Error(`Build had unhandled rejection ${reason}`);
-});
-
-const {
-  virtualImports,
-  buildDefaultPlugins,
-  disallowExternal,
-} = require('./src/build/common');
-
-/**
- * Performs main site compilation via Rollup: first on site code, and second
- * to build the Service Worker.
- */
-async function build() {
-  const postcssConfig = {};
-  if (isProd) {
-    // nb. Only require() autoprefixer when used.
-    const autoprefixer = require('autoprefixer');
-    postcssConfig.plugins = [autoprefixer];
-
-    // uses cssnano vs. our regular CSS usees sass' builtin compression
-    postcssConfig.minimize = true;
-  }
-
-  // Rollup "app.js" to generate graph of source needs. This eventually uses
-  // dynamic import to bring in code required for each page (see router). In
-  // Rollup's nonmenclature, this is the site entrypoint. We generated it with
-  // a dynamic hash, and is imported via "bootstrap.js" (which is run in all
-  // browsers via regular script tag).
-  const appBundle = await rollup.rollup({
-    input: 'src/lib/app.js',
-    external: disallowExternal,
-    plugins: [rollupPluginPostCSS(postcssConfig), ...buildDefaultPlugins()],
-    manualChunks: (id) => {
-      // lit-html/lit-element is our biggest dependency, and is always used
-      // together. Return it in its own chunk (~30kb after Terser).
-      if (/\/node_modules\/lit-.*\//.exec(id)) {
-        return 'lit';
-      }
-      // Algolia is smaller (~17kb after Terser).
-      if (id.includes('/node_modules/algoliasearch/')) {
-        return 'algolia';
-      }
-    },
-  });
-  const appGenerated = await appBundle.write({
-    dynamicImportFunction: 'window._import',
-    entryFileNames: '[name]-[hash].js',
-    sourcemap: true,
-    dir: 'dist',
-    format: 'esm',
-  });
-  const outputFiles = appGenerated.output.map(({fileName}) => fileName);
-
-  // Save the "app.js" entrypoint (which has a hashed name) for the all-browser
-  // loader code.
-  const entrypoints = appGenerated.output.filter(({isEntry}) => isEntry);
-  if (entrypoints.length !== 1) {
-    throw new Error(
-      `expected single Rollup entrypoint, was: ${entrypoints.length}`,
-    );
-  }
-  virtualImports.webdev_entrypoint = entrypoints[0].fileName;
-
-  // Rollup basic to generate the top-level script run by all browsers (even
-  // ancient ones). This runs Analytics and imports the entrypoint generated
-  // above (in supported module browsers).
-  const libPrefix = path.join(__dirname, '/src/lib/');
-  const utilsPrefix = path.join(libPrefix, 'utils');
-  const bootstrapBundle = await rollup.rollup({
-    input: 'src/lib/bootstrap.js',
-    plugins: buildDefaultPlugins(),
-    external: disallowExternal,
-    manualChunks: (id) => {
-      // This overloads Rollup's manualChunks feature to catch disallowed code.
-      // Bootstrap should only import:
-      //   * virtual imports (config only)
-      //   * itself (Rollup calls us for 'ourself')
-      //   * code inside `src/lib/utils`.
-      // Otherwise, we risk leaking core site code into this ES5-only, fast
-      // bootstrap chunk.
-      if (id in virtualImports || !path.isAbsolute(id)) {
-        return; // ok
-      }
-      if (id === path.join(libPrefix, 'bootstrap.js')) {
-        return undefined; // self, allowed
-      }
-      if (path.relative(utilsPrefix, id).startsWith('../')) {
-        // This looks for code outside the utils folder, which is disallowed.
-        throw new TypeError(
-          `can't import non-utils JS code in bootstrap: ${id}`,
-        );
-      }
-    },
-  });
-  const bootstrapGenerated = await bootstrapBundle.write({
-    entryFileNames: '[name].js',
-    sourcemap: true,
-    dir: 'dist',
-    format: 'iife',
-  });
-  if (bootstrapGenerated.output.length !== 1) {
-    throw new Error(
-      `bootstrap generated more than one file: ${bootstrapGenerated.output.length}`,
-    );
-  }
-  const bootstrapPath = bootstrapGenerated.output[0].fileName;
-  outputFiles.push(bootstrapPath);
-
-  const hash = hashForFiles(path.join('dist', bootstrapPath));
-  const resourceName = `${bootstrapPath}?v=${hash}`;
-
-  // Write the bundle entrypoint to a known file for Eleventy to read.
-  await fs.writeFile(
-    'src/site/_data/resourceJS.json',
-    JSON.stringify({path: `/${resourceName}`}),
-  );
-
-  // Compress the generated source here, as we need the final files and hashes for the Service
-  // Worker manifest.
-  if (isProd) {
-    const ratio = await minifySource(outputFiles);
-    log(`Minified site code is ${(ratio * 100).toFixed(2)}% of source`);
-  }
-  log(`Finished JS! (${resourceName})`);
-
-  return outputFiles.length;
-}
-
-/**
- * Builds the test entrypoint.
- */
-async function buildTest() {
-  const testBundle = await rollup.rollup({
-    input: 'test/unit/src/lib/index.js',
-    plugins: [
-      rollupPluginNodeResolve(),
-      rollupPluginCJS(),
-      rollupPluginVirtual(buildVirtualJSON(virtualImports)),
-      rollupPluginPostCSS(),
-      rollupPluginIstanbul(),
-    ],
-  });
-  await testBundle.write({
-    dir: 'dist/test',
-    format: 'iife',
-    name: 'test',
-  });
-}
-
-(async function () {
-  const generatedCount = await build();
-  log(`Generated ${generatedCount} files`);
-  if (!isProd) {
-    await buildTest();
-  }
-})();
diff --git a/cloud-secrets.js b/cloud-secrets.js
new file mode 100644
index 00000000000..0f40e803eb2
--- /dev/null
+++ b/cloud-secrets.js
@@ -0,0 +1,52 @@
+/**
+ * @fileoverview This file generates a `.env` file from the lastest active secrets stored
+ * in the Google Cloud Secret Manager. This is ran from the Cloud Build Deploy script.
+ */
+
+const {SecretManagerServiceClient} = require('@google-cloud/secret-manager');
+
+const client = new SecretManagerServiceClient();
+
+const cloudSecrets = async () => {
+  if (!process.env.PROJECT_ID) {
+    return console.warn(
+      'No Google Cloud Project ID found, no .env file is being generated.',
+    );
+  }
+
+  console.log('Generating .env file.');
+
+  const project = `projects/${process.env.PROJECT_ID}`;
+  let dotenv = '';
+  const fetchedSecrets = [];
+  const [secretsList] = await client.listSecrets({parent: project});
+
+  for (const secretItem of secretsList) {
+    const key = secretItem.name.split('/').pop();
+    const [versions] = await client.listSecretVersions({
+      parent: secretItem.name,
+    });
+    const version = versions.find((v) => v.state === 'ENABLED');
+
+    if (version) {
+      const [accessedSecret] = await client.accessSecretVersion({
+        name: version.name,
+      });
+      const value = accessedSecret.payload.data.toString();
+      dotenv += `${key}=${value}\n`;
+      fetchedSecrets.push(key);
+    }
+  }
+
+  require('fs').writeFileSync('.env', dotenv);
+
+  console.log(
+    `The following environment variables have been added to the generated .env file: ${fetchedSecrets.join(
+      ', ',
+    )}`,
+  );
+};
+
+cloudSecrets().catch((e) => {
+  console.warn('Ooops, there was an error in generating the .env file.', e);
+});
diff --git a/compile-css.js b/compile-css.js
deleted file mode 100644
index dbf9f962479..00000000000
--- a/compile-css.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-require('dotenv').config();
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-
-const fs = require('fs');
-const path = require('path');
-const log = require('fancy-log');
-const {hashForContent} = require('./src/build/hash');
-
-const sassEngine = (function () {
-  /* eslint-disable node/no-missing-require */
-  try {
-    // node-sass is faster, but regularly fails to install correctly (native bindings)
-    return require('node-sass');
-  } catch (e) {
-    // fallback to the official transpiled version
-    return require('sass');
-  }
-  /* eslint-enable node/no-missing-require */
-})();
-
-/**
- * @param {string} input filename to read for input
- * @return {{css: !Buffer, map: !SourceMap}}
- */
-function compileCSS(input) {
-  // #1: Compile CSS with either engine.
-  const compiledOptions = {
-    file: input,
-    outFile: 'app.css',
-    sourceMap: true,
-    omitSourceMapUrl: true, // since we just read it from the result object
-  };
-  if (isProd) {
-    compiledOptions.outputStyle = 'compressed';
-  }
-  log('Compiling', input);
-  const compiledResult = sassEngine.renderSync(compiledOptions);
-  const compiledMap = JSON.parse(compiledResult.map.toString('utf-8'));
-
-  // nb. We get back absolute source paths here that look like
-  // "file:///Users/blah/Desktop/web.dev/src/...", so make them relative to here.
-  compiledMap['sources'] = compiledMap['sources'].map((source) => {
-    if (source.startsWith('file://')) {
-      source = source.substr('file://'.length);
-    }
-    if (path.isAbsolute(source)) {
-      source = path.relative(__dirname, source);
-    }
-    return source;
-  });
-
-  if (!isProd) {
-    return {map: compiledMap, css: compiledResult.css};
-  }
-
-  // nb. Only require() dependencies for autoprefixer when used.
-  const autoprefixer = require('autoprefixer');
-  const postcss = require('postcss');
-
-  // #2: Run postcss for autoprefixer.
-  const postcssOptions = {
-    from: 'app.css',
-    to: 'app.css',
-    map: {
-      prev: compiledMap,
-      annotation: true,
-    },
-  };
-  log('Running postcss (autoprefixer)...');
-  const postcssResult = postcss([autoprefixer]).process(
-    compiledResult.css.toString(),
-    postcssOptions,
-  );
-  postcssResult.warnings().forEach((warn) => {
-    console.warn(warn.toString());
-  });
-
-  const {css, map: candidateMap} = postcssResult;
-
-  // nb. With the transpiled "sass", this is returned as a SourceMapGenerator, so convert it to
-  // a real string and then back to JSON.
-  const map = JSON.parse(candidateMap.toString('utf-8'));
-  return {map, css};
-}
-
-/**
- * @param {{css: !Buffer, map: !SourceMap}} result to render
- * @param {string} fileName to render to, with optional map in dev
- */
-function renderTo(result, fileName) {
-  fs.mkdirSync(path.dirname(fileName), {recursive: true});
-  const base = path.basename(fileName);
-
-  let out = result.css.toString('utf-8');
-  if (!isProd) {
-    result.map['file'] = base;
-
-    out += `\n/*# sourceMappingURL=${base}.map */`;
-    fs.writeFileSync(fileName + '.map', JSON.stringify(result.map));
-  }
-
-  fs.writeFileSync(fileName, out);
-}
-
-const out = compileCSS('src/styles/all.scss');
-const hash = hashForContent(out.css);
-
-// We write an unhashed CSS file due to unfortunate real-world caching problems with a hash inside
-// the CSS name (we see our old HTML cached longer than the assets are available).
-renderTo(out, `dist/app.css`);
-
-// Write the CSS entrypoint to a known file, with a query hash, for Eleventy to read.
-const resourceName = `app.css?v=${hash}`;
-fs.writeFileSync(
-  'src/site/_data/resourceCSS.json',
-  JSON.stringify({path: `/${resourceName}`}),
-);
-
-log(`Finished CSS! (${resourceName})`);
diff --git a/firebase-config.js b/firebase-config.js
new file mode 100644
index 00000000000..e5d2394820c
--- /dev/null
+++ b/firebase-config.js
@@ -0,0 +1,39 @@
+const yaml = require('js-yaml');
+const fs = require('fs');
+
+const redirectsYaml = fs.readFileSync('./redirects.yaml', 'utf8');
+const {redirects: parsedRedirects} = yaml.safeLoad(redirectsYaml);
+
+const firebaseJson = require('./firebase.incl.json');
+firebaseJson.hosting.redirects = parsedRedirects.reduce(
+  (redirects, redirect) => {
+    const type = [301, 302].includes(redirect.type) ? redirect.type : 301;
+    if (redirect.source && redirect.destination) {
+      redirects.push({
+        source: redirect.source,
+        destination: redirect.destination,
+        type,
+      });
+    }
+    return redirects;
+  },
+  [],
+);
+if (process.env.ELEVENTY_ENV === 'prod') {
+  const hashListJson = fs.readFileSync('dist/script-hash-list.json', 'utf-8');
+  const hashList = JSON.parse(hashListJson);
+  firebaseJson.hosting.headers[0].headers.push({
+    key: 'Content-Security-Policy',
+    value:
+      `script-src 'strict-dynamic' ${hashList.join(' ')} ` +
+      `'unsafe-inline' http: https:; object-src 'none'; base-uri 'self'; ` +
+      `frame-ancestors 'self'; ` +
+      `report-uri https://csp.withgoogle.com/csp/webdev`,
+  });
+  firebaseJson.hosting.headers[0].headers.push({
+    key: 'X-Frame-Options',
+    value: 'SAMEORIGIN',
+  });
+}
+
+fs.writeFileSync('./firebase.json', JSON.stringify(firebaseJson, null, 2));
diff --git a/firebase.incl.json b/firebase.incl.json
new file mode 100644
index 00000000000..32bbe4927e3
--- /dev/null
+++ b/firebase.incl.json
@@ -0,0 +1,37 @@
+{
+  "functions": {
+    "predeploy": "npm --prefix \"$RESOURCE_DIR\" ci"
+  },
+  "hosting": {
+    "public": "dist",
+    "headers": [
+      {
+        "source": "**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "**/!(*.*)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=0"
+          }
+        ]
+      }
+    ],
+    "i18n": {
+      "root": "/i18n"
+    },
+    "redirects": []
+  },
+  "emulators": {
+    "hosting": {
+      "port": 8080
+    }
+  }
+}
diff --git a/functions/.gitignore b/functions/.gitignore
new file mode 100644
index 00000000000..40b878db5b1
--- /dev/null
+++ b/functions/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/functions/cloud-secrets.js b/functions/cloud-secrets.js
new file mode 100644
index 00000000000..33af9982ca4
--- /dev/null
+++ b/functions/cloud-secrets.js
@@ -0,0 +1,48 @@
+import {SecretManagerServiceClient} from '@google-cloud/secret-manager';
+
+const client = new SecretManagerServiceClient();
+
+/** @type {{ [key: string]: string }} */
+const secrets = {};
+
+/**
+ * @returns {Promise<{ [key: string]: string }>}
+ */
+const cloudSecrets = async () => {
+  if (!process.env.FIREBASE_CONFIG) {
+    console.warn('No Firebase Config found, no secrets are being returned.');
+    return secrets;
+  }
+
+  if (Object.keys(secrets).length !== 0) {
+    return secrets;
+  }
+
+  const PROJECT_ID = JSON.parse(process.env.FIREBASE_CONFIG).projectId;
+
+  const project = `projects/${PROJECT_ID}`;
+  const [secretsList] = await client.listSecrets({parent: project});
+
+  for (const secretItem of secretsList) {
+    const key = (secretItem.name || '').split('/').pop() || '';
+    const [versions] = await client.listSecretVersions({
+      parent: secretItem.name,
+    });
+    const version = versions.find((v) => v.state === 'ENABLED');
+
+    if (version) {
+      const [accessedSecret] = await client.accessSecretVersion({
+        name: version.name,
+      });
+      let data = '';
+      if (accessedSecret.payload && accessedSecret.payload.data) {
+        data = accessedSecret.payload.data.toString();
+      }
+      secrets[key] = data;
+    }
+  }
+
+  return secrets;
+};
+
+export default cloudSecrets;
diff --git a/functions/index.js b/functions/index.js
new file mode 100644
index 00000000000..470c854ca5a
--- /dev/null
+++ b/functions/index.js
@@ -0,0 +1,6 @@
+import admin from 'firebase-admin';
+
+admin.initializeApp();
+
+export * from './pubsub/scheduled-firestore-export.js';
+export * from './pubsub/youtube.js';
diff --git a/functions/package-lock.json b/functions/package-lock.json
new file mode 100644
index 00000000000..598312887fc
--- /dev/null
+++ b/functions/package-lock.json
@@ -0,0 +1,4160 @@
+{
+  "name": "functions",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@google-cloud/firestore": "^5.0.1",
+        "@google-cloud/secret-manager": "^3.10.1",
+        "firebase-admin": "^9.8.0",
+        "firebase-functions": "^3.14.1",
+        "node-fetch": "^3.1.1"
+      },
+      "devDependencies": {
+        "firebase-functions-test": "^0.2.0"
+      },
+      "engines": {
+        "node": "16"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.7.0.tgz",
+      "integrity": "sha512-6fbHQwDv2jp/v6bXhBw2eSRbNBpxHcd1NBF864UksSMVIqIyri9qpJB1Mn6sGZE+bnDsSQBC5j2TbMxYsJQkQg==",
+      "peer": true
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz",
+      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.5.tgz",
+      "integrity": "sha512-L41SdS/4a164jx2iGfakJgaBUPPBI3DI+RrUlmh3oHSUljTeCwfj/Nhcv3S7e2lyXsGFJtAyepfPUx4IQ05crw==",
+      "dependencies": {
+        "@firebase/util": "1.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "0.10.9",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.10.9.tgz",
+      "integrity": "sha512-Jxi9SiE4cNOftO9YKlG71ccyWFw4kSM9AG/xYu6vWXUGBr39Uw1TvYougANOcU21Q0TP4J08VPGnOnpXk/FGbQ==",
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.5",
+        "@firebase/database-types": "0.7.3",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.2.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.7.3.tgz",
+      "integrity": "sha512-dSOJmhKQ0nL8O4EQMRNGpSExWCXeHtH57gGg0BfNAdWcKhC8/4Y+qfKLfWXzyHvrSecpLmO0SmAi/iK2D5fp5A==",
+      "dependencies": {
+        "@firebase/app-types": "0.6.3"
+      }
+    },
+    "node_modules/@firebase/database-types/node_modules/@firebase/app-types": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.3.tgz",
+      "integrity": "sha512-/M13DPPati7FQHEQ9Minjk1HGLm/4K4gs9bR4rzLCWJg64yGtVC0zNg9gDpkw9yc2cvol/mNFxqTtd4geGrwdw=="
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz",
+      "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw=="
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.2.0.tgz",
+      "integrity": "sha512-8W9TTGImXr9cu+oyjBJ7yjoEd/IVAv0pBZA4c1uIuKrpGZi2ee38m+8xlZOBRmsAaOU/tR9DXz1WF/oeM6Fb7Q==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@google-cloud/common": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-3.7.2.tgz",
+      "integrity": "sha512-5Q9f74IbZaY6xAwJSNFy5SrGwbm1j7mpv+6A/r+K2dymjsXBH5UauB0tziaMwWoVVaMq1IQnZF9lgtfqqvxcUg==",
+      "optional": true,
+      "dependencies": {
+        "@google-cloud/projectify": "^2.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.1",
+        "duplexify": "^4.1.1",
+        "ent": "^2.2.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^7.0.2",
+        "retry-request": "^4.2.2",
+        "teeny-request": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/firestore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-5.0.1.tgz",
+      "integrity": "sha512-HYj/9ZxgtMO7rwEyoiaYA78ivi4q4PaPoY0IZJQaPmKj9Z3l3ZWJCZKbl4kEiBZ+HtcvIMOVNjBm0lQXkGj37g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "functional-red-black-tree": "^1.0.1",
+        "google-gax": "^2.24.1",
+        "protobufjs": "^6.8.6"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@google-cloud/paginator": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-3.0.6.tgz",
+      "integrity": "sha512-XCTm/GfQIlc1ZxpNtTSs/mnZxC2cePNhxU3X8EzHXKIJ2JFncmJj2Fcd2IP+gbmZaSZnY0juFxbUCkIeuu/2eQ==",
+      "optional": true,
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/projectify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-2.1.1.tgz",
+      "integrity": "sha512-+rssMZHnlh0twl122gXY4/aCrk0G1acBqkHFfYddtsqpYXGxA29nj9V5V9SfC+GyOG00l650f6lG9KL+EpFEWQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/promisify": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-2.0.4.tgz",
+      "integrity": "sha512-j8yRSSqswWi1QqUGKVEKOG03Q7qOoZP6/h2zN2YO+F5h2+DHU0bSrHCK9Y7lo2DI9fBd8qGAw795sf+3Jva4yA==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/secret-manager": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/secret-manager/-/secret-manager-3.10.1.tgz",
+      "integrity": "sha512-aYnEolmrfUVRSJuKMce772YOyGZIetq4eDfN3yaMJ5BFJ/RO/SJOM1ruD/drKKTM+G39mnsHUK9GzAaoT/43ow==",
+      "dependencies": {
+        "google-gax": "^2.24.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/storage": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.14.1.tgz",
+      "integrity": "sha512-rDwL5QKFs4p20lXep/ELYscCpCiaiPK9H9QTnPTqRQgswsDO0p+SEupq0Uw00+r4SfbHnjtvYTzBFlTu7Gn34g==",
+      "optional": true,
+      "dependencies": {
+        "@google-cloud/common": "^3.7.0",
+        "@google-cloud/paginator": "^3.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.0",
+        "async-retry": "^1.3.1",
+        "compressible": "^2.0.12",
+        "date-and-time": "^2.0.0",
+        "duplexify": "^4.0.0",
+        "extend": "^3.0.2",
+        "gcs-resumable-upload": "^3.3.0",
+        "get-stream": "^6.0.0",
+        "hash-stream-validation": "^0.2.2",
+        "mime": "^2.2.0",
+        "mime-types": "^2.0.8",
+        "p-limit": "^3.0.1",
+        "pumpify": "^2.0.0",
+        "snakeize": "^0.1.0",
+        "stream-events": "^1.0.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.3.7.tgz",
+      "integrity": "sha512-CKQVuwuSPh40tgOkR7c0ZisxYRiN05PcKPW72mQL5y++qd7CwBRoaJZvU5xfXnCJDFBmS3qZGQ71Frx6Ofo2XA==",
+      "dependencies": {
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.6.5.tgz",
+      "integrity": "sha512-GZdzyVQI1Bln/kCzIYgTKu+rQJ5dno0gVrfmLe4jqQu7T2e7svSwJzpCBqVU5hhBSJP3peuPjOMWsj5GR61YmQ==",
+      "dependencies": {
+        "@types/long": "^4.0.1",
+        "lodash.camelcase": "^4.3.0",
+        "long": "^4.0.0",
+        "protobufjs": "^6.10.0",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@panva/asn1.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@panva/asn1.js/-/asn1.js-1.0.0.tgz",
+      "integrity": "sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-a6bTJ21vFOGIkwM0kzh9Yr89ziVxq4vYH2fQ6N8AeipEzai/cFK6aGMArIkUeIdRIgpwQa+2bXiLuUJCpSf2Cg==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.3.tgz",
+      "integrity": "sha512-I8cGRJj3pyOLs/HndoP+25vOqhqWkAZsWMEmq1qXy/b/M3ppufecUwaK2/TVDVxcV61/iSdhykUjQQ2DLSrTdg==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-jwt": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/express-jwt/-/express-jwt-0.0.42.tgz",
+      "integrity": "sha512-WszgUddvM1t5dPpJ3LhWNH8kfNN8GPIBrAGxgIYXVCEGx6Bx4A036aAuf/r5WH9DIEdlmp7gHOYvSM6U87B0ag==",
+      "dependencies": {
+        "@types/express": "*",
+        "@types/express-unless": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.24.tgz",
+      "integrity": "sha512-3UJuW+Qxhzwjq3xhwXm2onQcFHn76frIYVbTu+kn24LFxI+dEhdfISDFovPB8VpEgW8oQCTpRuCe+0zJxB7NEA==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "node_modules/@types/express-unless": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@types/express-unless/-/express-unless-0.5.2.tgz",
+      "integrity": "sha512-Q74UyYRX/zIgl1HSp9tUX2PlG8glkVm+59r7aK4KGKzC5jqKIOX6rrVLRQrzpZUQ84VukHtRoeAuon2nIssHPQ==",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.172",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+      "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+      "dev": true
+    },
+    "node_modules/@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "node_modules/@types/node": {
+      "version": "16.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz",
+      "integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "dependencies": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/agent-base/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/agent-base/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async-retry": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
+      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
+      "optional": true,
+      "dependencies": {
+        "retry": "0.13.1"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.1.tgz",
+      "integrity": "sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "dependencies": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "node_modules/bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "optional": true,
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "optional": true,
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
+      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/date-and-time": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-2.0.0.tgz",
+      "integrity": "sha512-HJSzj25iPm8E01nt+rSmCIlwjsmjvKfUivG/kXBglpymcHF1FolWAqWwTEV4FvN1Lx5UjPf0J1W4H8yQsVBfFg==",
+      "optional": true
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "node_modules/dicer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.3.0.tgz",
+      "integrity": "sha512-MdceRRWqltEG2dZqO769g27N/3PXfcKl04VhYnBlo2YhH7zPi88VebsjTKclaOyiuMaGU72hTfw3VkUitGcVCA==",
+      "dependencies": {
+        "streamsearch": "0.1.2"
+      },
+      "engines": {
+        "node": ">=4.5.0"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "optional": true,
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/duplexify": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz",
+      "integrity": "sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
+      "optional": true
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "dependencies": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-text-encoding": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
+      "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig=="
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+      "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.3.tgz",
+      "integrity": "sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/firebase-admin": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.11.1.tgz",
+      "integrity": "sha512-Y9fjelljy6MKqwsSbM/UN1k8gBQh5zfm5fCTe0Z6Gch2T3nDUIPsTcf+jfe4o40/MPYuybili9XJjTMmM2e5MQ==",
+      "dependencies": {
+        "@firebase/database": "^0.10.0",
+        "@firebase/database-types": "^0.7.2",
+        "@types/node": ">=12.12.47",
+        "dicer": "^0.3.0",
+        "jsonwebtoken": "^8.5.1",
+        "jwks-rsa": "^2.0.2",
+        "node-forge": "^0.10.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "optionalDependencies": {
+        "@google-cloud/firestore": "^4.5.0",
+        "@google-cloud/storage": "^5.3.0"
+      }
+    },
+    "node_modules/firebase-admin/node_modules/@google-cloud/firestore": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-4.15.1.tgz",
+      "integrity": "sha512-2PWsCkEF1W02QbghSeRsNdYKN1qavrHBP3m72gPDMHQSYrGULOaTi7fSJquQmAtc4iPVB2/x6h80rdLHTATQtA==",
+      "optional": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "functional-red-black-tree": "^1.0.1",
+        "google-gax": "^2.24.1",
+        "protobufjs": "^6.8.6"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/firebase-functions": {
+      "version": "3.15.5",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-3.15.5.tgz",
+      "integrity": "sha512-w5Twk7txwfPFasx+i25f0U4fLiSa06XvwOIoEwazGYLPOLe18b2jCDQ9X8aeJm8S7FZE40ODWGVTLtF6dX6xHg==",
+      "dependencies": {
+        "@types/cors": "^2.8.5",
+        "@types/express": "4.17.3",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "lodash": "^4.17.14"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      },
+      "peerDependencies": {
+        "firebase-admin": "^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/firebase-functions-test": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/firebase-functions-test/-/firebase-functions-test-0.2.3.tgz",
+      "integrity": "sha512-zYX0QTm53wCazuej7O0xqbHl90r/v1PTXt/hwa0jo1YF8nDM+iBKnLDlkIoW66MDd0R6aGg4BvKzTTdJpvigUA==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "^4.14.104",
+        "lodash": "^4.17.5"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "firebase-admin": ">=6.0.0",
+        "firebase-functions": ">=2.0.0"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
+    },
+    "node_modules/gaxios": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.3.1.tgz",
+      "integrity": "sha512-9qXV7yrMCGzTrphl9/YGMVH41oSg0rhn1j3wJWed4Oqk45/hXDD2wBT5J1NjQcqTCcv4g3nFnyQ7reSRHNgBgw==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gaxios/node_modules/node-fetch": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-4.3.1.tgz",
+      "integrity": "sha512-x850LS5N7V1F3UcV7PoupzGsyD6iVwTVvsh3tbXfkctZnBnjW5yu5z1/3k3SehF7TyoTIe78rJs02GMMy+LF+A==",
+      "dependencies": {
+        "gaxios": "^4.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gcs-resumable-upload": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/gcs-resumable-upload/-/gcs-resumable-upload-3.3.1.tgz",
+      "integrity": "sha512-WyC0i4VkslIdrdmeM5PNuGzANALLXTG5RoHb08OE30gYT+FEvCDPiA8KOjV2s1wOu9ngEW4+IuzBjtP/ni7UdQ==",
+      "optional": true,
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "configstore": "^5.0.0",
+        "extend": "^3.0.2",
+        "gaxios": "^4.0.0",
+        "google-auth-library": "^7.0.0",
+        "pumpify": "^2.0.0",
+        "stream-events": "^1.0.4"
+      },
+      "bin": {
+        "gcs-upload": "build/src/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/google-auth-library": {
+      "version": "7.9.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.9.1.tgz",
+      "integrity": "sha512-cWGykH2WBR+UuYPGRnGVZ6Cjq2ftQiEIFjQWNIRIauZH7hUWoYTr/lkKUqLTYt5dex77nlWWVQ8aPV80mhfp5w==",
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^4.0.0",
+        "gcp-metadata": "^4.2.0",
+        "gtoken": "^5.0.4",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/google-gax": {
+      "version": "2.25.2",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-2.25.2.tgz",
+      "integrity": "sha512-2BLLndZgaFRlaqbtCy1HkikKQIng8h81hJ3C7HPrTaVF1g+r/2CZ/9tuFOwHtmVCDJ+WqGuhshM87vV/xMvKhA==",
+      "dependencies": {
+        "@grpc/grpc-js": "~1.3.0",
+        "@grpc/proto-loader": "^0.6.1",
+        "@types/long": "^4.0.0",
+        "abort-controller": "^3.0.0",
+        "duplexify": "^4.0.0",
+        "fast-text-encoding": "^1.0.3",
+        "google-auth-library": "^7.6.1",
+        "is-stream-ended": "^0.1.4",
+        "node-fetch": "^2.6.1",
+        "object-hash": "^2.1.1",
+        "proto3-json-serializer": "^0.1.1",
+        "protobufjs": "6.11.2",
+        "retry-request": "^4.0.0"
+      },
+      "bin": {
+        "compileProtos": "build/tools/compileProtos.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/google-gax/node_modules/node-fetch": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/google-p12-pem": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-3.1.2.tgz",
+      "integrity": "sha512-tjf3IQIt7tWCDsa0ofDQ1qqSCNzahXDxdAGJDbruWqu3eCg5CKLYKN+hi0s6lfvzYZ1GDVr+oDF9OOWlDSdf0A==",
+      "dependencies": {
+        "node-forge": "^0.10.0"
+      },
+      "bin": {
+        "gp12-pem": "build/src/bin/gp12-pem.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
+      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "optional": true
+    },
+    "node_modules/gtoken": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-5.3.1.tgz",
+      "integrity": "sha512-yqOREjzLHcbzz1UrQoxhBtpk8KjrVhuqPE7od1K2uhyxG2BHjKZetlbLw/SPZak/QqTIQW+addS+EcjqQsZbwQ==",
+      "dependencies": {
+        "gaxios": "^4.0.0",
+        "google-p12-pem": "^3.0.3",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hash-stream-validation": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/hash-stream-validation/-/hash-stream-validation-0.2.4.tgz",
+      "integrity": "sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==",
+      "optional": true
+    },
+    "node_modules/http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-errors/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "optional": true,
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "optional": true
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/https-proxy-agent/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/https-proxy-agent/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "optional": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-stream-ended": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-stream-ended/-/is-stream-ended-0.1.4.tgz",
+      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw=="
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "optional": true
+    },
+    "node_modules/jose": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.6.tgz",
+      "integrity": "sha512-FVoPY7SflDodE4lknJmbAHSUjLCzE2H1F6MS0RYKMQ8SR+lNccpMf8R4eqkNYyyUjR5qZReOzZo5C5YiHOCjjg==",
+      "dependencies": {
+        "@panva/asn1.js": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0 < 13 || >=13.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=4",
+        "npm": ">=1.4.28"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/jwa": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+      "integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jwks-rsa": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/jwks-rsa/-/jwks-rsa-2.0.4.tgz",
+      "integrity": "sha512-iJqVCECYZZ+3oPmY1qXv3Fq+3ywDtuNEVBvG41pPlaR0zyGxa12nC0beAOBBUhETJmc05puS50mRQN4NkCGhmg==",
+      "dependencies": {
+        "@types/express-jwt": "0.0.42",
+        "debug": "^4.3.2",
+        "jose": "^2.0.5",
+        "limiter": "^1.1.5",
+        "lru-memoizer": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=10 < 13 || >=14"
+      }
+    },
+    "node_modules/jwks-rsa/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jwks-rsa/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "dependencies": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
+    "node_modules/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lru-memoizer": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/lru-memoizer/-/lru-memoizer-2.1.4.tgz",
+      "integrity": "sha512-IXAq50s4qwrOBrXJklY+KhgZF+5y98PDaNo0gi/v2KQBFLyWr+JyFvijZXkGKjQj/h9c0OwoE+JZbwUXce76hQ==",
+      "dependencies": {
+        "lodash.clonedeep": "^4.5.0",
+        "lru-cache": "~4.0.0"
+      }
+    },
+    "node_modules/lru-memoizer/node_modules/lru-cache": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.0.2.tgz",
+      "integrity": "sha1-HRdnnAac2l0ECZGgnbwsDbN35V4=",
+      "dependencies": {
+        "pseudomap": "^1.0.1",
+        "yallist": "^2.0.0"
+      }
+    },
+    "node_modules/lru-memoizer/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "optional": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
+      "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.32",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
+      "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
+      "dependencies": {
+        "mime-db": "1.49.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.1.1.tgz",
+      "integrity": "sha512-SMk+vKgU77PYotRdWzqZGTZeuFKlsJ0hu4KPviQKkfY+N3vn2MIzr0rvpnYpR8MtB3IEuhlEcuOLbGvLRlA+yg==",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.3",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "optional": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "node_modules/proto3-json-serializer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-0.1.3.tgz",
+      "integrity": "sha512-X0DAtxCBsy1NDn84huVFGOFgBslT2gBmM+85nY6/5SOAaCon1jzVNdvi74foIyFvs5CjtSbQsepsM5TsyNhqQw=="
+    },
+    "node_modules/protobufjs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.2.tgz",
+      "integrity": "sha512-4BQJoPooKJl2G9j3XftkIXjoC9C0Av2NOrWmbLWT1vH32GcSUHjM0Arra6UfTsVyfMAuFzaLucXn1sadxJydAw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.1",
+        "@types/node": ">=13.7.0",
+        "long": "^4.0.0"
+      },
+      "bin": {
+        "pbjs": "bin/pbjs",
+        "pbts": "bin/pbts"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-2.0.1.tgz",
+      "integrity": "sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw==",
+      "optional": true,
+      "dependencies": {
+        "duplexify": "^4.1.1",
+        "inherits": "^2.0.3",
+        "pump": "^3.0.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "dependencies": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/retry-request": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-4.2.2.tgz",
+      "integrity": "sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/retry-request/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/retry-request/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+    },
+    "node_modules/serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "optional": true
+    },
+    "node_modules/snakeize": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/snakeize/-/snakeize-0.1.0.tgz",
+      "integrity": "sha1-EMCI2LWOsHazIpu1oE4jLOEmQi0=",
+      "optional": true
+    },
+    "node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "optional": true,
+      "dependencies": {
+        "stubs": "^3.0.0"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "node_modules/streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
+      "optional": true
+    },
+    "node_modules/teeny-request": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.2.tgz",
+      "integrity": "sha512-Mr4NYZuniKDpgcLxdBkDE1CcWy98Aw1ennn6oNofen+XWUvDs+ZZzBAujy6XOAVwwLLZMwEQSfdljUI+ebs4Ww==",
+      "optional": true,
+      "dependencies": {
+        "http-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "stream-events": "^1.0.5",
+        "uuid": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/teeny-request/node_modules/node-fetch": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "optional": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
+    "node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "optional": true,
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
+      "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "optional": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  },
+  "dependencies": {
+    "@firebase/app-types": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.7.0.tgz",
+      "integrity": "sha512-6fbHQwDv2jp/v6bXhBw2eSRbNBpxHcd1NBF864UksSMVIqIyri9qpJB1Mn6sGZE+bnDsSQBC5j2TbMxYsJQkQg==",
+      "peer": true
+    },
+    "@firebase/auth-interop-types": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz",
+      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==",
+      "requires": {}
+    },
+    "@firebase/component": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.5.tgz",
+      "integrity": "sha512-L41SdS/4a164jx2iGfakJgaBUPPBI3DI+RrUlmh3oHSUljTeCwfj/Nhcv3S7e2lyXsGFJtAyepfPUx4IQ05crw==",
+      "requires": {
+        "@firebase/util": "1.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/database": {
+      "version": "0.10.9",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.10.9.tgz",
+      "integrity": "sha512-Jxi9SiE4cNOftO9YKlG71ccyWFw4kSM9AG/xYu6vWXUGBr39Uw1TvYougANOcU21Q0TP4J08VPGnOnpXk/FGbQ==",
+      "requires": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.5",
+        "@firebase/database-types": "0.7.3",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.2.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/database-types": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.7.3.tgz",
+      "integrity": "sha512-dSOJmhKQ0nL8O4EQMRNGpSExWCXeHtH57gGg0BfNAdWcKhC8/4Y+qfKLfWXzyHvrSecpLmO0SmAi/iK2D5fp5A==",
+      "requires": {
+        "@firebase/app-types": "0.6.3"
+      },
+      "dependencies": {
+        "@firebase/app-types": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.3.tgz",
+          "integrity": "sha512-/M13DPPati7FQHEQ9Minjk1HGLm/4K4gs9bR4rzLCWJg64yGtVC0zNg9gDpkw9yc2cvol/mNFxqTtd4geGrwdw=="
+        }
+      }
+    },
+    "@firebase/logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz",
+      "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw=="
+    },
+    "@firebase/util": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.2.0.tgz",
+      "integrity": "sha512-8W9TTGImXr9cu+oyjBJ7yjoEd/IVAv0pBZA4c1uIuKrpGZi2ee38m+8xlZOBRmsAaOU/tR9DXz1WF/oeM6Fb7Q==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@google-cloud/common": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-3.7.2.tgz",
+      "integrity": "sha512-5Q9f74IbZaY6xAwJSNFy5SrGwbm1j7mpv+6A/r+K2dymjsXBH5UauB0tziaMwWoVVaMq1IQnZF9lgtfqqvxcUg==",
+      "optional": true,
+      "requires": {
+        "@google-cloud/projectify": "^2.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.1",
+        "duplexify": "^4.1.1",
+        "ent": "^2.2.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^7.0.2",
+        "retry-request": "^4.2.2",
+        "teeny-request": "^7.0.0"
+      }
+    },
+    "@google-cloud/firestore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-5.0.1.tgz",
+      "integrity": "sha512-HYj/9ZxgtMO7rwEyoiaYA78ivi4q4PaPoY0IZJQaPmKj9Z3l3ZWJCZKbl4kEiBZ+HtcvIMOVNjBm0lQXkGj37g==",
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "functional-red-black-tree": "^1.0.1",
+        "google-gax": "^2.24.1",
+        "protobufjs": "^6.8.6"
+      }
+    },
+    "@google-cloud/paginator": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-3.0.6.tgz",
+      "integrity": "sha512-XCTm/GfQIlc1ZxpNtTSs/mnZxC2cePNhxU3X8EzHXKIJ2JFncmJj2Fcd2IP+gbmZaSZnY0juFxbUCkIeuu/2eQ==",
+      "optional": true,
+      "requires": {
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2"
+      }
+    },
+    "@google-cloud/projectify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-2.1.1.tgz",
+      "integrity": "sha512-+rssMZHnlh0twl122gXY4/aCrk0G1acBqkHFfYddtsqpYXGxA29nj9V5V9SfC+GyOG00l650f6lG9KL+EpFEWQ==",
+      "optional": true
+    },
+    "@google-cloud/promisify": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-2.0.4.tgz",
+      "integrity": "sha512-j8yRSSqswWi1QqUGKVEKOG03Q7qOoZP6/h2zN2YO+F5h2+DHU0bSrHCK9Y7lo2DI9fBd8qGAw795sf+3Jva4yA==",
+      "optional": true
+    },
+    "@google-cloud/secret-manager": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/secret-manager/-/secret-manager-3.10.1.tgz",
+      "integrity": "sha512-aYnEolmrfUVRSJuKMce772YOyGZIetq4eDfN3yaMJ5BFJ/RO/SJOM1ruD/drKKTM+G39mnsHUK9GzAaoT/43ow==",
+      "requires": {
+        "google-gax": "^2.24.1"
+      }
+    },
+    "@google-cloud/storage": {
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.14.1.tgz",
+      "integrity": "sha512-rDwL5QKFs4p20lXep/ELYscCpCiaiPK9H9QTnPTqRQgswsDO0p+SEupq0Uw00+r4SfbHnjtvYTzBFlTu7Gn34g==",
+      "optional": true,
+      "requires": {
+        "@google-cloud/common": "^3.7.0",
+        "@google-cloud/paginator": "^3.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.0",
+        "async-retry": "^1.3.1",
+        "compressible": "^2.0.12",
+        "date-and-time": "^2.0.0",
+        "duplexify": "^4.0.0",
+        "extend": "^3.0.2",
+        "gcs-resumable-upload": "^3.3.0",
+        "get-stream": "^6.0.0",
+        "hash-stream-validation": "^0.2.2",
+        "mime": "^2.2.0",
+        "mime-types": "^2.0.8",
+        "p-limit": "^3.0.1",
+        "pumpify": "^2.0.0",
+        "snakeize": "^0.1.0",
+        "stream-events": "^1.0.1",
+        "xdg-basedir": "^4.0.0"
+      }
+    },
+    "@grpc/grpc-js": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.3.7.tgz",
+      "integrity": "sha512-CKQVuwuSPh40tgOkR7c0ZisxYRiN05PcKPW72mQL5y++qd7CwBRoaJZvU5xfXnCJDFBmS3qZGQ71Frx6Ofo2XA==",
+      "requires": {
+        "@types/node": ">=12.12.47"
+      }
+    },
+    "@grpc/proto-loader": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.6.5.tgz",
+      "integrity": "sha512-GZdzyVQI1Bln/kCzIYgTKu+rQJ5dno0gVrfmLe4jqQu7T2e7svSwJzpCBqVU5hhBSJP3peuPjOMWsj5GR61YmQ==",
+      "requires": {
+        "@types/long": "^4.0.1",
+        "lodash.camelcase": "^4.3.0",
+        "long": "^4.0.0",
+        "protobufjs": "^6.10.0",
+        "yargs": "^16.1.1"
+      }
+    },
+    "@panva/asn1.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@panva/asn1.js/-/asn1.js-1.0.0.tgz",
+      "integrity": "sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw=="
+    },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
+    "@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "optional": true
+    },
+    "@types/body-parser": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-a6bTJ21vFOGIkwM0kzh9Yr89ziVxq4vYH2fQ6N8AeipEzai/cFK6aGMArIkUeIdRIgpwQa+2bXiLuUJCpSf2Cg==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
+    },
+    "@types/express": {
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.3.tgz",
+      "integrity": "sha512-I8cGRJj3pyOLs/HndoP+25vOqhqWkAZsWMEmq1qXy/b/M3ppufecUwaK2/TVDVxcV61/iSdhykUjQQ2DLSrTdg==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-jwt": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/express-jwt/-/express-jwt-0.0.42.tgz",
+      "integrity": "sha512-WszgUddvM1t5dPpJ3LhWNH8kfNN8GPIBrAGxgIYXVCEGx6Bx4A036aAuf/r5WH9DIEdlmp7gHOYvSM6U87B0ag==",
+      "requires": {
+        "@types/express": "*",
+        "@types/express-unless": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.24.tgz",
+      "integrity": "sha512-3UJuW+Qxhzwjq3xhwXm2onQcFHn76frIYVbTu+kn24LFxI+dEhdfISDFovPB8VpEgW8oQCTpRuCe+0zJxB7NEA==",
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "@types/express-unless": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@types/express-unless/-/express-unless-0.5.2.tgz",
+      "integrity": "sha512-Q74UyYRX/zIgl1HSp9tUX2PlG8glkVm+59r7aK4KGKzC5jqKIOX6rrVLRQrzpZUQ84VukHtRoeAuon2nIssHPQ==",
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/lodash": {
+      "version": "4.14.172",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+      "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+      "dev": true
+    },
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
+    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "@types/node": {
+      "version": "16.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.9.1.tgz",
+      "integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g=="
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug=="
+    },
+    "async-retry": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
+      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
+      "optional": true,
+      "requires": {
+        "retry": "0.13.1"
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "bignumber.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.1.tgz",
+      "integrity": "sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA=="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "optional": true,
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "optional": true,
+      "requires": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      }
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "optional": true
+    },
+    "data-uri-to-buffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
+      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA=="
+    },
+    "date-and-time": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-2.0.0.tgz",
+      "integrity": "sha512-HJSzj25iPm8E01nt+rSmCIlwjsmjvKfUivG/kXBglpymcHF1FolWAqWwTEV4FvN1Lx5UjPf0J1W4H8yQsVBfFg==",
+      "optional": true
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "dicer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.3.0.tgz",
+      "integrity": "sha512-MdceRRWqltEG2dZqO769g27N/3PXfcKl04VhYnBlo2YhH7zPi88VebsjTKclaOyiuMaGU72hTfw3VkUitGcVCA==",
+      "requires": {
+        "streamsearch": "0.1.2"
+      }
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "optional": true,
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "duplexify": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz",
+      "integrity": "sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==",
+      "requires": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
+      "optional": true
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "fast-text-encoding": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
+      "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig=="
+    },
+    "faye-websocket": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+      "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "fetch-blob": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.3.tgz",
+      "integrity": "sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==",
+      "requires": {
+        "web-streams-polyfill": "^3.0.3"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "firebase-admin": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.11.1.tgz",
+      "integrity": "sha512-Y9fjelljy6MKqwsSbM/UN1k8gBQh5zfm5fCTe0Z6Gch2T3nDUIPsTcf+jfe4o40/MPYuybili9XJjTMmM2e5MQ==",
+      "requires": {
+        "@firebase/database": "^0.10.0",
+        "@firebase/database-types": "^0.7.2",
+        "@google-cloud/firestore": "^4.5.0",
+        "@google-cloud/storage": "^5.3.0",
+        "@types/node": ">=12.12.47",
+        "dicer": "^0.3.0",
+        "jsonwebtoken": "^8.5.1",
+        "jwks-rsa": "^2.0.2",
+        "node-forge": "^0.10.0"
+      },
+      "dependencies": {
+        "@google-cloud/firestore": {
+          "version": "4.15.1",
+          "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-4.15.1.tgz",
+          "integrity": "sha512-2PWsCkEF1W02QbghSeRsNdYKN1qavrHBP3m72gPDMHQSYrGULOaTi7fSJquQmAtc4iPVB2/x6h80rdLHTATQtA==",
+          "optional": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "functional-red-black-tree": "^1.0.1",
+            "google-gax": "^2.24.1",
+            "protobufjs": "^6.8.6"
+          }
+        }
+      }
+    },
+    "firebase-functions": {
+      "version": "3.15.5",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-3.15.5.tgz",
+      "integrity": "sha512-w5Twk7txwfPFasx+i25f0U4fLiSa06XvwOIoEwazGYLPOLe18b2jCDQ9X8aeJm8S7FZE40ODWGVTLtF6dX6xHg==",
+      "requires": {
+        "@types/cors": "^2.8.5",
+        "@types/express": "4.17.3",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "lodash": "^4.17.14"
+      }
+    },
+    "firebase-functions-test": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/firebase-functions-test/-/firebase-functions-test-0.2.3.tgz",
+      "integrity": "sha512-zYX0QTm53wCazuej7O0xqbHl90r/v1PTXt/hwa0jo1YF8nDM+iBKnLDlkIoW66MDd0R6aGg4BvKzTTdJpvigUA==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "^4.14.104",
+        "lodash": "^4.17.5"
+      }
+    },
+    "formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "requires": {
+        "fetch-blob": "^3.1.2"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
+    },
+    "gaxios": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.3.1.tgz",
+      "integrity": "sha512-9qXV7yrMCGzTrphl9/YGMVH41oSg0rhn1j3wJWed4Oqk45/hXDD2wBT5J1NjQcqTCcv4g3nFnyQ7reSRHNgBgw==",
+      "requires": {
+        "abort-controller": "^3.0.0",
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.6.1"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+          "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
+    "gcp-metadata": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-4.3.1.tgz",
+      "integrity": "sha512-x850LS5N7V1F3UcV7PoupzGsyD6iVwTVvsh3tbXfkctZnBnjW5yu5z1/3k3SehF7TyoTIe78rJs02GMMy+LF+A==",
+      "requires": {
+        "gaxios": "^4.0.0",
+        "json-bigint": "^1.0.0"
+      }
+    },
+    "gcs-resumable-upload": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/gcs-resumable-upload/-/gcs-resumable-upload-3.3.1.tgz",
+      "integrity": "sha512-WyC0i4VkslIdrdmeM5PNuGzANALLXTG5RoHb08OE30gYT+FEvCDPiA8KOjV2s1wOu9ngEW4+IuzBjtP/ni7UdQ==",
+      "optional": true,
+      "requires": {
+        "abort-controller": "^3.0.0",
+        "configstore": "^5.0.0",
+        "extend": "^3.0.2",
+        "gaxios": "^4.0.0",
+        "google-auth-library": "^7.0.0",
+        "pumpify": "^2.0.0",
+        "stream-events": "^1.0.4"
+      }
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "optional": true
+    },
+    "google-auth-library": {
+      "version": "7.9.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.9.1.tgz",
+      "integrity": "sha512-cWGykH2WBR+UuYPGRnGVZ6Cjq2ftQiEIFjQWNIRIauZH7hUWoYTr/lkKUqLTYt5dex77nlWWVQ8aPV80mhfp5w==",
+      "requires": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^4.0.0",
+        "gcp-metadata": "^4.2.0",
+        "gtoken": "^5.0.4",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      }
+    },
+    "google-gax": {
+      "version": "2.25.2",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-2.25.2.tgz",
+      "integrity": "sha512-2BLLndZgaFRlaqbtCy1HkikKQIng8h81hJ3C7HPrTaVF1g+r/2CZ/9tuFOwHtmVCDJ+WqGuhshM87vV/xMvKhA==",
+      "requires": {
+        "@grpc/grpc-js": "~1.3.0",
+        "@grpc/proto-loader": "^0.6.1",
+        "@types/long": "^4.0.0",
+        "abort-controller": "^3.0.0",
+        "duplexify": "^4.0.0",
+        "fast-text-encoding": "^1.0.3",
+        "google-auth-library": "^7.6.1",
+        "is-stream-ended": "^0.1.4",
+        "node-fetch": "^2.6.1",
+        "object-hash": "^2.1.1",
+        "proto3-json-serializer": "^0.1.1",
+        "protobufjs": "6.11.2",
+        "retry-request": "^4.0.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+          "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
+    "google-p12-pem": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-3.1.2.tgz",
+      "integrity": "sha512-tjf3IQIt7tWCDsa0ofDQ1qqSCNzahXDxdAGJDbruWqu3eCg5CKLYKN+hi0s6lfvzYZ1GDVr+oDF9OOWlDSdf0A==",
+      "requires": {
+        "node-forge": "^0.10.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
+      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "optional": true
+    },
+    "gtoken": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-5.3.1.tgz",
+      "integrity": "sha512-yqOREjzLHcbzz1UrQoxhBtpk8KjrVhuqPE7od1K2uhyxG2BHjKZetlbLw/SPZak/QqTIQW+addS+EcjqQsZbwQ==",
+      "requires": {
+        "gaxios": "^4.0.0",
+        "google-p12-pem": "^3.0.3",
+        "jws": "^4.0.0"
+      }
+    },
+    "hash-stream-validation": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/hash-stream-validation/-/hash-stream-validation-0.2.4.tgz",
+      "integrity": "sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==",
+      "optional": true
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+    },
+    "http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "optional": true,
+      "requires": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "optional": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "optional": true
+        }
+      }
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "optional": true
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
+    "is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "optional": true
+    },
+    "is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
+    },
+    "is-stream-ended": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-stream-ended/-/is-stream-ended-0.1.4.tgz",
+      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw=="
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "optional": true
+    },
+    "jose": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.6.tgz",
+      "integrity": "sha512-FVoPY7SflDodE4lknJmbAHSUjLCzE2H1F6MS0RYKMQ8SR+lNccpMf8R4eqkNYyyUjR5qZReOzZo5C5YiHOCjjg==",
+      "requires": {
+        "@panva/asn1.js": "^1.0.0"
+      }
+    },
+    "json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "requires": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "requires": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "jwa": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+          "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+          "requires": {
+            "buffer-equal-constant-time": "1.0.1",
+            "ecdsa-sig-formatter": "1.0.11",
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "jws": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+          "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+          "requires": {
+            "jwa": "^1.4.1",
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "jwa": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+      "integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jwks-rsa": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/jwks-rsa/-/jwks-rsa-2.0.4.tgz",
+      "integrity": "sha512-iJqVCECYZZ+3oPmY1qXv3Fq+3ywDtuNEVBvG41pPlaR0zyGxa12nC0beAOBBUhETJmc05puS50mRQN4NkCGhmg==",
+      "requires": {
+        "@types/express-jwt": "0.0.42",
+        "debug": "^4.3.2",
+        "jose": "^2.0.5",
+        "limiter": "^1.1.5",
+        "lru-memoizer": "^2.1.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "requires": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "lru-memoizer": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/lru-memoizer/-/lru-memoizer-2.1.4.tgz",
+      "integrity": "sha512-IXAq50s4qwrOBrXJklY+KhgZF+5y98PDaNo0gi/v2KQBFLyWr+JyFvijZXkGKjQj/h9c0OwoE+JZbwUXce76hQ==",
+      "requires": {
+        "lodash.clonedeep": "^4.5.0",
+        "lru-cache": "~4.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.0.2.tgz",
+          "integrity": "sha1-HRdnnAac2l0ECZGgnbwsDbN35V4=",
+          "requires": {
+            "pseudomap": "^1.0.1",
+            "yallist": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "optional": true,
+      "requires": {
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "optional": true
+        }
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "optional": true
+    },
+    "mime-db": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
+      "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA=="
+    },
+    "mime-types": {
+      "version": "2.1.32",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
+      "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
+      "requires": {
+        "mime-db": "1.49.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "node-fetch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.1.1.tgz",
+      "integrity": "sha512-SMk+vKgU77PYotRdWzqZGTZeuFKlsJ0hu4KPviQKkfY+N3vn2MIzr0rvpnYpR8MtB3IEuhlEcuOLbGvLRlA+yg==",
+      "requires": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.3",
+        "formdata-polyfill": "^4.0.10"
+      }
+    },
+    "node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "optional": true,
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proto3-json-serializer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-0.1.3.tgz",
+      "integrity": "sha512-X0DAtxCBsy1NDn84huVFGOFgBslT2gBmM+85nY6/5SOAaCon1jzVNdvi74foIyFvs5CjtSbQsepsM5TsyNhqQw=="
+    },
+    "protobufjs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.2.tgz",
+      "integrity": "sha512-4BQJoPooKJl2G9j3XftkIXjoC9C0Av2NOrWmbLWT1vH32GcSUHjM0Arra6UfTsVyfMAuFzaLucXn1sadxJydAw==",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.1",
+        "@types/node": ">=13.7.0",
+        "long": "^4.0.0"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "optional": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-2.0.1.tgz",
+      "integrity": "sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw==",
+      "optional": true,
+      "requires": {
+        "duplexify": "^4.1.1",
+        "inherits": "^2.0.3",
+        "pump": "^3.0.0"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "optional": true
+    },
+    "retry-request": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-4.2.2.tgz",
+      "integrity": "sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg==",
+      "requires": {
+        "debug": "^4.1.1",
+        "extend": "^3.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "optional": true
+    },
+    "snakeize": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/snakeize/-/snakeize-0.1.0.tgz",
+      "integrity": "sha1-EMCI2LWOsHazIpu1oE4jLOEmQi0=",
+      "optional": true
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "optional": true,
+      "requires": {
+        "stubs": "^3.0.0"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
+      "optional": true
+    },
+    "teeny-request": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.2.tgz",
+      "integrity": "sha512-Mr4NYZuniKDpgcLxdBkDE1CcWy98Aw1ennn6oNofen+XWUvDs+ZZzBAujy6XOAVwwLLZMwEQSfdljUI+ebs4Ww==",
+      "optional": true,
+      "requires": {
+        "http-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "stream-events": "^1.0.5",
+        "uuid": "^8.0.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
+          "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+          "optional": true,
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
+    "tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "optional": true,
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "optional": true
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "web-streams-polyfill": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
+      "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA=="
+    },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "optional": true,
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "optional": true
+    },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "requires": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "optional": true
+    }
+  }
+}
diff --git a/functions/package.json b/functions/package.json
new file mode 100644
index 00000000000..223d447b3cb
--- /dev/null
+++ b/functions/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "scripts": {
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "16"
+  },
+  "type": "module",
+  "main": "index.js",
+  "dependencies": {
+    "@google-cloud/firestore": "^5.0.1",
+    "@google-cloud/secret-manager": "^3.10.1",
+    "firebase-admin": "^9.8.0",
+    "firebase-functions": "^3.14.1",
+    "node-fetch": "^3.1.1"
+  },
+  "devDependencies": {
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
+}
diff --git a/functions/pubsub/scheduled-firestore-export.js b/functions/pubsub/scheduled-firestore-export.js
new file mode 100644
index 00000000000..98499c7e190
--- /dev/null
+++ b/functions/pubsub/scheduled-firestore-export.js
@@ -0,0 +1,37 @@
+import * as functions from 'firebase-functions';
+import firestore from '@google-cloud/firestore';
+
+const client = new firestore.v1.FirestoreAdminClient();
+const bucket = 'gs://web-dev-production-firestore-archive';
+
+/**
+ * Copies over all collections from Firestore to GCP Bucket
+ * at 19:00 UTC / 7:00 PST on every Monday.
+ */
+export const scheduledFirestoreExport = functions.pubsub
+  .schedule('0 19 * * 1')
+  .onRun(() => {
+    const projectId = process.env.GCP_PROJECT || process.env.GCLOUD_PROJECT;
+    const databaseName = client.databasePath(projectId, '(default)');
+    const collectionIds = [];
+
+    return client
+      .exportDocuments({
+        name: databaseName,
+        outputUriPrefix: bucket,
+        collectionIds,
+      })
+      .then((responses) => {
+        const response = responses[0];
+        console.log(`Operation Name: ${response['name']}`);
+        console.log(
+          `Successfully backed up ${
+            collectionIds.length === 0 ? 'all' : collectionIds.join(', ')
+          } Firestore Collections for ${projectId}`,
+        );
+      })
+      .catch((err) => {
+        console.error(err);
+        throw new Error('Export operation failed');
+      });
+  });
diff --git a/functions/pubsub/youtube.js b/functions/pubsub/youtube.js
new file mode 100644
index 00000000000..bb904267e76
--- /dev/null
+++ b/functions/pubsub/youtube.js
@@ -0,0 +1,155 @@
+/**
+ * @fileOverview Every hour we fetch all the videos in certain YouTube Playlists
+ * in order to display them in web.dev
+ */
+
+import admin from 'firebase-admin';
+import * as functions from 'firebase-functions';
+import * as fs from 'fs';
+import fetch from 'node-fetch';
+import * as path from 'path';
+import {tmpdir} from 'os';
+import * as https from 'https';
+
+import cloudSecrets from '../cloud-secrets.js';
+
+/**
+ * @param {string} url
+ * @param {string} filename
+ * @returns {Promise<string | void>}
+ */
+const downloadImage = (url, filename) => {
+  const dest = path.join(tmpdir(), filename);
+  return new Promise((resolve) => {
+    https
+      .get(url, (res) => {
+        if (res.statusCode !== 200) {
+          return resolve();
+        }
+
+        res.pipe(fs.createWriteStream(dest)).once('close', () => resolve(dest));
+      })
+      .on('timeout', () => resolve())
+      .on('error', () => resolve());
+  });
+};
+
+/**
+ *
+ * @param {string} playlistId
+ * @param {string} key
+ * @param {string} [pageToken]
+ * @returns {string}
+ */
+const generateUrl = (playlistId, key, pageToken) => {
+  const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=50&playlistId=${playlistId}&key=${key}`;
+  return url + (pageToken ? `&pageToken=${pageToken}` : '');
+};
+
+export const youtube = functions.pubsub
+  .schedule('every 60 minutes')
+  .onRun(async () => {
+    const secrets = await cloudSecrets();
+    const bucket = admin.storage().bucket('web-dev-uploads');
+    const youtubeplaylistsPath = './youtubeplaylists';
+    if (!fs.existsSync(youtubeplaylistsPath)) {
+      console.warn('YouTube Playlists file not found, stopping execution.');
+      return;
+    }
+    const youtubeplaylists = fs
+      .readFileSync(youtubeplaylistsPath, 'utf-8')
+      .split('\n')
+      .map((s) => s.trim())
+      .filter((s) => s);
+
+    for (const playlistId of youtubeplaylists) {
+      let videos = [];
+      let nextPageToken = '';
+
+      do {
+        const url = generateUrl(playlistId, secrets.YOUTUBE_KEY, nextPageToken);
+        const fetchResults = await fetch(url);
+        const jsonResults = await fetchResults.json();
+        nextPageToken = jsonResults.nextPageToken;
+        if (!jsonResults.items) {
+          continue;
+        }
+        videos = [...videos, ...jsonResults.items];
+      } while (nextPageToken);
+
+      const processedVideos = [];
+
+      videos.sort(
+        (a, b) =>
+          new Date(b.snippet.publishedAt).getTime() -
+          new Date(a.snippet.publishedAt).getTime(),
+      );
+
+      for (const v of videos) {
+        const {snippet: s, contentDetails: c} = v;
+        const video = {
+          date: s.publishedAt,
+          data: {
+            title: s.title,
+            description: s.description,
+            subhead:
+              s.description.length > 140
+                ? s.description.slice(0, 137) + '...'
+                : s.description,
+            date: s.publishedAt,
+            videoId: c.videoId,
+          },
+        };
+
+        let thumbnailUrl = `https://i.ytimg.com/vi/${c.videoId}/maxresdefault.jpg`;
+
+        const extension = thumbnailUrl.split('.').pop();
+        const thumbnailFilename = `${c.videoId}.${extension}`;
+        const thumbnail = `image/youtube/${thumbnailFilename}`;
+        const thumbnailExists = (await bucket.file(thumbnail).exists())[0];
+
+        if (thumbnailExists) {
+          video.data.thumbnail = thumbnail;
+          video.data.alt = s.title;
+        } else {
+          let tempImage = await downloadImage(thumbnailUrl, thumbnailFilename);
+
+          // Try image from YouTube API.
+          if (!tempImage) {
+            thumbnailUrl = Object.values(s.thumbnails)
+              .sort((a, b) => a.width - b.width)
+              .pop()?.url;
+
+            tempImage = await downloadImage(thumbnailUrl, thumbnailFilename);
+          }
+
+          if (tempImage) {
+            try {
+              await bucket.upload(tempImage, {
+                destination: thumbnail,
+                gzip: true,
+              });
+
+              video.data.thumbnail = thumbnail;
+              video.data.alt = s.title;
+            } catch {
+              console.warn(`Skipping ${tempImage}`);
+            }
+          }
+        }
+
+        processedVideos.push(video);
+      }
+
+      const youtubeJson = `${playlistId}.json`;
+      const youtubeJsonFilePath = path.join(tmpdir(), youtubeJson);
+      fs.writeFileSync(youtubeJsonFilePath, JSON.stringify(processedVideos));
+      await bucket.upload(youtubeJsonFilePath, {
+        destination: `youtube/${youtubeJson}`,
+        gzip: true,
+      });
+      console.log(`Updated ${youtubeJson}`);
+    }
+
+    return;
+  });
diff --git a/functions/youtubeplaylists b/functions/youtubeplaylists
new file mode 100644
index 00000000000..a431982e329
--- /dev/null
+++ b/functions/youtubeplaylists
@@ -0,0 +1,7 @@
+PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9
+PLNYkxOF6rcICpDJelUzmahpycz3ID6MZY
+PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
+PLNYkxOF6rcIDI0QtJvW6vKonTxn6azCsD
+PLNYkxOF6rcIDC0-BiwSL52yQ0n9rNozaF
+PLNYkxOF6rcIBhuGsbO6t8-OBE5-fVPe7K
+PLNYkxOF6rcIDJHOcBzho38p6WTn3vESvQ
diff --git a/gulp-tasks/convert-design-themes.js b/gulp-tasks/convert-design-themes.js
new file mode 100644
index 00000000000..ac364f4e880
--- /dev/null
+++ b/gulp-tasks/convert-design-themes.js
@@ -0,0 +1,71 @@
+const fs = require('fs');
+const prettier = require('prettier');
+const themes = require('../src/site/_data/design/themes.js');
+
+/*
+  Converts the theme config into Sass variables that can be used
+  by Gorko to generate both Custom Property groups and also utility
+  classes that have a direct relationship to in-context design tokens
+*/
+const convertDesignThemes = (cb) => {
+  let result = '';
+
+  // Add a note that this is auto generated
+  result += `
+    /// Sass THEMES GENERATED WITH CONFIG ON ${new Date().toLocaleDateString()}.
+    /// Config location: ../src/site/_data/design/themes.js
+  `;
+
+  result += `
+  
+    /// THEME KEYS 
+    /// These are used to generate utility classes for themeable properties like color and background
+  `;
+  result += '$gorko-theme-keys: (';
+
+  Object.keys(themes.colorKeys).forEach((colorKey) => {
+    result += `'${themes.colorKeys[colorKey]}': var(--color-${themes.colorKeys[colorKey]}),`;
+  });
+
+  result += ');';
+
+  result += `
+  
+    /// THEMES
+    /// The gorko config for the actual themes starts https://github.com/andy-piccalilli/gorko#using-themes
+  `;
+  result += '$gorko-themes: (';
+
+  themes.generate().forEach(({name, key, value, tokens}) => {
+    result += `'${name}': (`;
+
+    if (key) {
+      result += `'${key}': '${value}',`;
+    }
+
+    result += `'tokens': (`;
+
+    result += `'color': (`;
+
+    Object.keys(tokens).forEach((tokenKey) => {
+      result += `'${themes.colorKeys[tokenKey]}': var(--color-${tokens[tokenKey]}),`;
+    });
+
+    result += '),'; // end color
+
+    result += '),'; // end tokens
+
+    result += '),'; // end theme
+  });
+
+  result += ');'; // end $gorko-themes
+
+  // Make the Sass readable to help people with auto-complete in their editors
+  result = prettier.format(result, {parser: 'scss'});
+
+  // Push this file into the Sass dir, ready to go
+  fs.writeFileSync('./src/scss/_themes.scss', result);
+  cb();
+};
+
+module.exports = convertDesignThemes;
diff --git a/gulp-tasks/convert-design-tokens.js b/gulp-tasks/convert-design-tokens.js
new file mode 100644
index 00000000000..28c532c4f5f
--- /dev/null
+++ b/gulp-tasks/convert-design-tokens.js
@@ -0,0 +1,143 @@
+const fs = require('fs');
+const slugify = require('slugify');
+const prettier = require('prettier');
+const tokens = require('../src/site/_data/design/tokens.json');
+
+/*
+  Converts the design tokens into Sass variables so Gorko can use
+  them as the core of the CSS system.
+*/
+const convertDesignTokens = (cb) => {
+  let result = '';
+  const rootSize = 16;
+  const nameSlug = (text) => slugify(text, {lower: true});
+
+  // Generates a CSS clamp size with min and max values passed
+  const clampGenerator = (min, max) => {
+    if (min === max) {
+      return `${min / 16}rem`;
+    }
+
+    const minSize = min / rootSize;
+    const maxSize = max / rootSize;
+    const minViewport = 20; // rems
+    const maxViewport = 90; // rems
+
+    // Slope and intersection allow us to have a fluid value but also keep that sensible
+    const slope = (maxSize - minSize) / (maxViewport - minViewport);
+    const intersection = -1 * minViewport * slope + minSize;
+
+    return `clamp(${minSize}rem, ${intersection.toFixed(2)}rem + ${(
+      slope * 100
+    ).toFixed(2)}vw, ${maxSize}rem)`;
+  };
+
+  // Removes trailing commas and closes Sass map group
+  const cleanResult = () => {
+    result = result.replace(/,\s*$/, '');
+    result += ');';
+  };
+
+  // Add a note that this is auto generated
+  result += `
+    /// Sass VARIABLES GENERATED WITH DESIGN TOKENS ON ${new Date().toLocaleDateString()}.
+    /// Tokens location: ../src/site/_data/design/tokens.json
+  `;
+
+  // Start with colors
+  result += `
+
+    ///  COLORS
+  `;
+  result += '$gorko-colors: (';
+
+  tokens.colors.forEach((group) => {
+    group.items.forEach((color) => {
+      result += `'${nameSlug(group.group + '-' + color.name)}': ${
+        color.value.includes('data') ? `url("${color.value}")` : color.value
+      },`;
+    });
+  });
+
+  cleanResult();
+
+  // Move on to text sizes
+  result += `
+
+    ///  TEXT SIZES
+  `;
+  result += '$gorko-size-scale: (';
+
+  tokens.textSizes.forEach((size) => {
+    result += `'${nameSlug(size.name)}': ${clampGenerator(
+      size.min,
+      size.max,
+    )},`;
+  });
+
+  cleanResult();
+
+  // Move on to spacing
+  result += `
+  
+    ///  SPACING SIZES
+  `;
+  result += '$gorko-space-scale: (';
+
+  tokens.spacing.forEach((size) => {
+    result += `'${nameSlug(size.name)}': ${clampGenerator(
+      size.min,
+      size.max,
+    )},`;
+  });
+
+  cleanResult();
+
+  // Move on to fonts
+  result += `
+  
+    ///  FONTS 
+  `;
+  result += '$gorko-fonts: (';
+
+  tokens.fonts.forEach((font) => {
+    result += `'${nameSlug(font.name)}': '${font.values.join(',')}',`;
+  });
+
+  cleanResult();
+
+  // Move on to font weights
+  result += `
+  
+    ///  FONT WEIGHTS
+  `;
+  result += '$gorko-font-weights: (';
+
+  tokens.fontWeights.forEach((weight) => {
+    result += `'${nameSlug(weight.name)}': ${weight.value},`;
+  });
+
+  cleanResult();
+
+  // Lastly, misc values like radius and transitions
+  result += `
+  
+    ///  MISC 
+  `;
+  tokens.radius.forEach((item) => {
+    result += `$global-radius-${nameSlug(item.name)}: ${item.value};`;
+  });
+
+  tokens.transitions.forEach((item) => {
+    result += `$global-transition-${nameSlug(item.name)}: ${item.value};`;
+  });
+
+  // Make the Sass readable to help people with auto-complete in their editors
+  result = prettier.format(result, {parser: 'scss'});
+
+  // Push this file into the Sass dir, ready to go
+  fs.writeFileSync('./src/scss/_tokens.scss', result);
+  cb();
+};
+
+module.exports = convertDesignTokens;
diff --git a/gulp-tasks/copy-default-locale.js b/gulp-tasks/copy-default-locale.js
new file mode 100644
index 00000000000..c1aee1aee22
--- /dev/null
+++ b/gulp-tasks/copy-default-locale.js
@@ -0,0 +1,26 @@
+const gulp = require('gulp');
+const {defaultLocale} = require('../src/site/_data/site');
+
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const isStaging = process.env.ELEVENTY_ENV === 'staging';
+
+/**
+ * Copies content of the default locale (en) into its own folder
+ * on prod builds.
+ *
+ * This is done for when we deploy to Firebase we need an `i18n/en`
+ * folder for users who have English as their primary language,
+ * and a second language that is supported by us. Firebase hosting
+ * will serve the secondary language as it tries to host i81n content first.
+ *
+ * @returns {Promise<NodeJS.ReadWriteStream|null>}
+ */
+const copyDefaultLocale = async () => {
+  if (isProd || isStaging) {
+    return gulp
+      .src(['./dist/**/*.html', '!./dist/i18n/**/*.html'])
+      .pipe(gulp.dest(`./dist/i18n/${defaultLocale}`));
+  }
+};
+
+module.exports = copyDefaultLocale;
diff --git a/gulp-tasks/copy-fonts.js b/gulp-tasks/copy-fonts.js
new file mode 100644
index 00000000000..0606e18c416
--- /dev/null
+++ b/gulp-tasks/copy-fonts.js
@@ -0,0 +1,10 @@
+const gulp = require('gulp');
+
+/**
+ * @returns {NodeJS.ReadWriteStream}
+ */
+const copyFonts = () => {
+  return gulp.src('src/fonts/**/*').pipe(gulp.dest('dist/fonts/'));
+};
+
+module.exports = copyFonts;
diff --git a/gulp-tasks/copy-global-images.js b/gulp-tasks/copy-global-images.js
new file mode 100644
index 00000000000..b894d5cae34
--- /dev/null
+++ b/gulp-tasks/copy-global-images.js
@@ -0,0 +1,12 @@
+const gulp = require('gulp');
+
+/**
+ * These are global images used in CSS and base HTML, such as author profiles.
+ * We don't compress the PNGs here as they are trivially small (site icons).
+ *
+ * @returns {NodeJS.ReadWriteStream}
+ */
+const copyGlobalImages = () =>
+  gulp.src(['./src/images/**/*']).pipe(gulp.dest('./dist/images'));
+
+module.exports = copyGlobalImages;
diff --git a/gulp-tasks/copy-misc.js b/gulp-tasks/copy-misc.js
new file mode 100644
index 00000000000..e0f968ca3a3
--- /dev/null
+++ b/gulp-tasks/copy-misc.js
@@ -0,0 +1,12 @@
+const gulp = require('gulp');
+
+/**
+ * These are misc top-level assets.
+ *
+ * @returns {NodeJS.ReadWriteStream}
+ */
+const copyMisc = () => {
+  return gulp.src(['./src/misc/**/*']).pipe(gulp.dest('./dist'));
+};
+
+module.exports = copyMisc;
diff --git a/gulp-tasks/sass.js b/gulp-tasks/sass.js
new file mode 100644
index 00000000000..8eadcf0a3cd
--- /dev/null
+++ b/gulp-tasks/sass.js
@@ -0,0 +1,21 @@
+const {dest, src} = require('gulp');
+const sassProcessor = require('gulp-sass')(require('sass'));
+
+const sourceFiles = ['./src/scss/next.scss'];
+
+// Flags wether we compress the output etc
+const isProduction = process.env.ELEVENTY_ENV === 'prod';
+
+const sass = (cb) => {
+  return src(sourceFiles, {sourcemaps: !isProduction})
+    .pipe(
+      sassProcessor({outputStyle: 'compressed'}).on(
+        'error',
+        sassProcessor.logError,
+      ),
+    )
+    .pipe(dest('./dist/css', {sourcemaps: !isProduction}))
+    .on('done', cb);
+};
+
+module.exports = sass;
diff --git a/gulp-tasks/write-version.js b/gulp-tasks/write-version.js
new file mode 100644
index 00000000000..241b2c8c3f2
--- /dev/null
+++ b/gulp-tasks/write-version.js
@@ -0,0 +1,19 @@
+/**
+ * Write the HEAD SHA to the `dist` on prod builds.
+ * This is used for cloud build to compare the currently
+ * deployed version of the site against the latest commit.
+ *
+ * @returns {Promise<void>}
+ */
+const fs = require('fs');
+const {execSync} = require('child_process');
+const writeVersion = async () => {
+  if (process.env.ELEVENTY_ENV === 'prod') {
+    // Verify dist directory exists
+    const version = execSync('git rev-parse HEAD').toString().trim();
+    fs.mkdirSync('./dist', {recursive: true});
+    fs.writeFileSync('./dist/version', version);
+  }
+};
+
+module.exports = writeVersion;
diff --git a/gulpfile.js b/gulpfile.js
index 2a31b203e8d..fa82e65af93 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -15,106 +15,38 @@
  */
 
 const gulp = require('gulp');
-const mozjpeg = require('imagemin-mozjpeg');
-const pngquant = require('imagemin-pngquant');
-const imagemin = require('gulp-imagemin');
-const rename = require('gulp-rename');
-const through2 = require('through2');
-
-/* eslint-disable max-len */
-const assetTypes =
-  'jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml';
-/* eslint-enable max-len */
-
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-
-const compressImagesTransform = (pngQuality, jpegQuality) => {
-  if (!isProd) {
-    // This is the identity transform, which does nothing and just passes
-    // the images through directly.
-    return through2.obj();
-  }
-  return imagemin([
-    pngquant({quality: [pngQuality, pngQuality]}),
-    mozjpeg({quality: jpegQuality * 100}),
-  ]);
-};
-
-// These are global images used in CSS and base HTML, such as author profiles.
-// We don't compress the PNGs here as they are trivially small (site icons).
-gulp.task('copy-global-images', () => {
-  return gulp
-    .src(['./src/images/**/*'])
-    .pipe(compressImagesTransform(1.0, 0.8))
-    .pipe(gulp.dest('./dist/images'));
-});
-
-// These are misc top-level assets.
-gulp.task('copy-misc', () => {
-  return gulp.src(['./src/misc/**/*']).pipe(gulp.dest('./dist'));
-});
-
-// Images and any other assets in the content directory that should be copied
-// over along with the posts themselves.
-// Because we use permalinks to strip the parent directories from our posts
-// we need to also strip them from the content paths.
-gulp.task('copy-content-assets', () => {
-  return (
-    gulp
-      .src([`./src/site/content/**/*.{${assetTypes}}`])
-      .pipe(compressImagesTransform(0.8, 0.8))
-      // This makes the images show up in the same spot as the permalinked posts
-      // they belong to.
-      .pipe(
-        rename((assetPath) => {
-          const parts = assetPath.dirname.split('/');
-          // Landing pages should keep their assets.
-          // e.g. en/vitals, en/about
-          if (parts.length <= 2) {
-            return;
-          }
-
-          // Let images pass through if they're special, i.e. part of the
-          // handbook or newsletter. We don't treat these URLs like the
-          // rest of the site and they're allowed to nest.
-          const subdir = parts[1];
-          const imagePassThroughs = ['handbook', 'newsletter'];
-          if (imagePassThroughs.includes(subdir)) {
-            return;
-          }
-
-          // Some assets are nested under directories which aren't part of
-          // their url. For example, we have /en/blog/some-post/foo.jpg.
-          // For these assets we need to remove the /blog/ directory so they
-          // can live at /en/some-post/foo.jpg since that's what we'll actually
-          // serve in production.
-          // e.g. en/blog/foo/bar.jpg -> en/foo/bar.jpg
-          parts.splice(1, 1);
-          assetPath.dirname = parts.join('/');
-        }),
-      )
-      .pipe(gulp.dest('./dist/'))
-  );
-});
-
-gulp.task('copy-node_modules-assets', () => {
-  return gulp
-    .src(['./node_modules/@webcomponents/webcomponentsjs/bundles/*.js'])
-    .pipe(gulp.dest('./dist/lib/webcomponents/bundles/'));
-});
+const convertDesignThemes = require('./gulp-tasks/convert-design-themes.js');
+const convertDesignTokens = require('./gulp-tasks/convert-design-tokens.js');
+const copyDefaultLocale = require('./gulp-tasks/copy-default-locale.js');
+const copyFonts = require('./gulp-tasks/copy-fonts.js');
+const copyGlobalImages = require('./gulp-tasks/copy-global-images.js');
+const copyMisc = require('./gulp-tasks/copy-misc.js');
+const sassTask = require('./gulp-tasks/sass.js');
+const writeVersion = require('./gulp-tasks/write-version.js');
+
+gulp.task('convert-design-themes', convertDesignThemes);
+gulp.task('convert-design-tokens', convertDesignTokens);
+gulp.task('copy-misc', copyMisc);
+gulp.task('default-locale', copyDefaultLocale);
+gulp.task('sass', sassTask);
 
 gulp.task(
   'build',
-  gulp.parallel(
-    'copy-global-images',
-    'copy-misc',
-    'copy-content-assets',
-    'copy-node_modules-assets',
+  gulp.series(
+    convertDesignThemes,
+    convertDesignTokens,
+    gulp.parallel(
+      copyGlobalImages,
+      copyMisc,
+      copyFonts,
+      sassTask,
+      writeVersion,
+    ),
   ),
 );
 
 gulp.task('watch', () => {
-  gulp.watch('./src/images/**/*', gulp.series('copy-global-images'));
-  gulp.watch('./src/misc/**/*', gulp.series('copy-misc'));
-  gulp.watch('./src/site/content/**/*', gulp.series('copy-content-assets'));
+  gulp.watch('./src/images/**/*', {ignoreInitial: true}, copyGlobalImages);
+  gulp.watch('./src/misc/**/*', {ignoreInitial: true}, copyMisc);
+  gulp.watch('./src/scss/**/*.scss', {ignoreInitial: true}, sassTask);
 });
diff --git a/index-algolia.js b/index-algolia.js
deleted file mode 100644
index 7d7e7f4d90d..00000000000
--- a/index-algolia.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-require('dotenv').config();
-
-const algoliasearch = require('algoliasearch');
-const fs = require('fs');
-const log = require('fancy-log');
-
-// TODO(samthor): For now, we only index 'en' content.
-const raw = fs.readFileSync('dist/en/algolia.json', 'utf-8');
-const indexed = JSON.parse(raw);
-
-// Revision will look like "YYYYMMDDHHMM".
-const revision = new Date().toISOString().substring(0, 16).replace(/\D/g, '');
-const primaryIndexName = 'webdev';
-const deployIndexName = `webdev_deploy_${revision}`;
-
-async function index() {
-  const client = algoliasearch(
-    process.env.ALGOLIA_APP,
-    process.env.ALGOLIA_KEY,
-  );
-
-  const primaryIndex = client.initIndex(primaryIndexName); // nb. not actually used, just forces init
-  const deployIndex = client.initIndex(deployIndexName);
-
-  log(
-    `Indexing ${indexed.length} articles with temporary index ${deployIndex.indexName}...`,
-  );
-
-  // TODO(samthor): This is from https://www.algolia.com/doc/api-reference/api-methods/replace-all-objects/#examples,
-  // are there more things that should be copied?
-  const scope = ['settings', 'synonyms', 'rules'];
-  await client.copyIndex(primaryIndex.indexName, deployIndex.indexName, {
-    scope,
-  });
-
-  // TODO(samthor): Batch uploads so that we don't send more than 10mb.
-  // As of September 2019, the JSON itself is only ~70k. \shrug/
-  await deployIndex.saveObjects(indexed);
-  log(`Indexed, replacing existing index ${primaryIndex.indexName}`);
-
-  // Move our temporary deploy index on-top of the primary index, atomically.
-  await client.moveIndex(deployIndex.indexName, primaryIndex.indexName);
-  log('Done!');
-}
-
-index().catch((err) => {
-  log.error(err);
-  throw err;
-});
diff --git a/karma.conf.js b/karma.conf.js
index 30766048df2..4057ecbf0b0 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -24,7 +24,7 @@ module.exports = function (config) {
   // Default options are for quick mode.
   const opts = {
     browsers: ['ChromeHeadless'],
-    files: ['dist/test/index.js'],
+    files: ['.tmp/test/index.js', 'dist/css/next.css'],
     frameworks: ['mocha'], // use the mocha test frameworkl
     reporters: ['spec'], // report results in these formats.
     singleRun: true, // set this to false to leave the browser open.
diff --git a/locale-handler.js b/locale-handler.js
deleted file mode 100644
index 8e0351c0ec1..00000000000
--- a/locale-handler.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const fs = require('fs');
-const path = require('path');
-const locale = require('./shared/locale');
-
-const indexJsonRegExp = /\/index\.json$/;
-
-/**
- * A handler that redirects the request based on requested locale,
- * according to priority:
- * 1. Locale directly expressed in the url, e.g. /en/some-post
- * 2. Locale in accept-language HTTP header.
- * 3. Locale in "preferred_locale" cookie.
- * If requested locale's content does not exist, falls back to default.
- * @param {Object} req Request object.
- * @param {Object} res Response object.
- * @param {Function} next Middleware next handler.
- * @return {!Function}
- */
-module.exports = (req, res, next) => {
-  const isNav = req.url.endsWith('/');
-  const isJson = req.url.endsWith('/index.json');
-  // Exit early if the url is not navigational.
-  if (!isNav && !isJson) {
-    return next();
-  }
-
-  const fileType = isJson ? 'index.json' : 'index.html';
-  const normalizedPath = req.path.replace(indexJsonRegExp, '');
-  const pathParts = normalizedPath.split('/');
-  const isLangInPath = locale.isSupportedLocale(pathParts[1]);
-  let lang;
-  let filePath;
-
-  // Check if language is specified in the url.
-  if (isLangInPath) {
-    lang = pathParts[1];
-    pathParts.splice(1, 1);
-    pathParts.push(fileType);
-    filePath = pathParts.join('/');
-  } else {
-    const langInCookie = locale.isSupportedLocale(req.cookies.preferred_lang);
-    // If language not in url, use accept-language header.
-    lang = langInCookie
-      ? req.cookies.preferred_lang
-      : req.acceptsLanguages(locale.supportedLocales) || locale.defaultLocale;
-    filePath = path.join(normalizedPath, fileType);
-  }
-
-  if (lang === locale.defaultLocale) {
-    // If this is alread default language, continue.
-    return isLangInPath ? res.redirect(path.join('/', filePath)) : next();
-  }
-
-  const localizedFilePath = path.join(
-    __dirname,
-    'dist', // Must serve from dist directory even in dev mode.
-    lang,
-    filePath,
-  );
-
-  if (fs.existsSync(localizedFilePath)) {
-    return isLangInPath ? next() : res.redirect(path.join('/', lang, filePath));
-  } else {
-    return isLangInPath ? res.redirect(path.join('/', filePath)) : next();
-  }
-};
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index 387787150e4..00000000000
--- a/netlify.toml
+++ /dev/null
@@ -1,5 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/en/:splat"
-  status = 200
-  force = false
diff --git a/package-lock.json b/package-lock.json
index f720d43b756..70b928bac9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11458 +1,39223 @@
 {
   "name": "web.dev",
-  "version": "2.0.0",
-  "lockfileVersion": 1,
+  "version": "3.0.0",
+  "lockfileVersion": 2,
   "requires": true,
-  "dependencies": {
-    "@11ty/dependency-tree": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-1.0.0.tgz",
-      "integrity": "sha512-2FWYlkphQ/83MG7b9qqBJfJJ0K9zupNz/6n4EdDuNLw6hQHGp4Sp4UMDRyBvA/xCTYDBaPSuSjHuu45tSujegg==",
-      "dev": true
+  "packages": {
+    "": {
+      "name": "web.dev",
+      "version": "3.0.0",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@11ty/eleventy": "^1.0.1",
+        "@11ty/eleventy-cache-assets": "^2.3.0",
+        "@11ty/eleventy-plugin-rss": "^1.1.2",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+        "@google-cloud/cloudbuild": "^2.6.0",
+        "@google-cloud/error-reporting": "^2.0.3",
+        "@google-cloud/secret-manager": "^3.10.0",
+        "@mdn/browser-compat-data": "5.3.9",
+        "@minify-html/node": "^0.9.2",
+        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-node-resolve": "^13.1.3",
+        "@rollup/plugin-virtual": "^2.0.3",
+        "algoliasearch": "^4.8.6",
+        "autoprefixer": "^9.6.1",
+        "chalk": "^2.4.2",
+        "cheerio": "^1.0.0-rc.3",
+        "common-tags": "^1.8.0",
+        "csso": "^4.2.0",
+        "dotenv": "^8.2.0",
+        "fast-glob": "^3.2.7",
+        "firebase": "^9.0.0-beta.7",
+        "firebase-tools": "^12.6.1",
+        "gorko": "^0.8.0",
+        "gray-matter": "^4.0.3",
+        "gulp": "^4.0.0",
+        "gulp-sass": "^5.0.0",
+        "iso-639-1": "^2.1.0",
+        "js-cookie": "^2.2.1",
+        "js-yaml": "^3.14.1",
+        "lighthouse": "9.3.1",
+        "lit": "^2.2.2",
+        "lodash.get": "^4.4.2",
+        "luxon": "^1.12.1",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^5.0.2",
+        "markdown-it-attrs": "^4.1.4",
+        "markdown-it-deflist": "^2.1.0",
+        "moment": "^2.24.0",
+        "node-fetch": "^2.6.7",
+        "npm-run-all": "^4.1.5",
+        "nunjucks": "^3.2.3",
+        "postcss": "^8.2.10",
+        "prettier": "^2.3.2",
+        "prismjs": "^1.28.0",
+        "purgecss": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.64.0",
+        "rollup-plugin-istanbul": "^3.0.0",
+        "rollup-plugin-postcss": "^2.9.0",
+        "rollup-plugin-terser": "^7.0.2",
+        "sass": "^1.32.11",
+        "slugify": "^1.4.5",
+        "striptags": "^3.2.0",
+        "terser": "^5.9.0",
+        "truncate-utf8-bytes": "^1.0.2",
+        "unistore": "^3.4.1",
+        "web-vitals": "^3.5.0",
+        "webdev-infra": "1.0.54",
+        "yaml-front-matter": "^4.0.0"
+      },
+      "devDependencies": {
+        "@actions/core": "^1.9.1",
+        "@actions/github": "^5.0.0",
+        "@percy/cli": "^1.0.0-beta.71",
+        "@percy/puppeteer": "^2.0.0",
+        "@types/chai": "^4.3.0",
+        "@types/grecaptcha": "^3.0.3",
+        "@types/gtag.js": "^0.0.12",
+        "@types/gulp": "^4.0.8",
+        "@types/markdown-it": "^12.0.3",
+        "@types/mocha": "^9.0.0",
+        "@types/node": "^14.11.2",
+        "@types/nunjucks": "^3.2.0",
+        "@types/resize-observer-browser": "^0.1.3",
+        "babel-eslint": "^10.0.3",
+        "c8": "^7.3.0",
+        "chai": "^4.3.4",
+        "chokidar-cli": "^1.2.3",
+        "eslint-plugin-lit-a11y": "^1.0.1",
+        "gts": "^3.1.0",
+        "husky": "^4.2.3",
+        "karma": "6.4.0",
+        "karma-chrome-launcher": "3.1.1",
+        "karma-coverage": "2.2.0",
+        "karma-mocha": "2.0.1",
+        "karma-sourcemap-loader": "0.3.8",
+        "karma-spec-reporter": "0.0.34",
+        "lint-staged": "13.2.2",
+        "mocha": "^6.2.0",
+        "proxyquire": "^2.1.3",
+        "puppeteer": "^12.0.1",
+        "remark-cli": "^7.0.0",
+        "remark-frontmatter": "^1.3.2",
+        "remark-lint": "^6.0.5",
+        "remark-lint-are-links-valid": "^1.0.3",
+        "remark-lint-no-duplicate-headings-in-section": "^1.0.4",
+        "remark-preset-lint-markdown-style-guide": "^2.1.3",
+        "sass-lint": "^1.12.1",
+        "scroll-to-bottomjs": "^1.1.0",
+        "typescript": "^4.0.3",
+        "unified-lint-rule": "^1.0.5",
+        "unist-util-generated": "^1.1.5",
+        "unist-util-map": "^1.0.5",
+        "unist-util-position": "^3.1.0",
+        "unist-util-to-list-of-char": "^0.1.2",
+        "unist-util-visit": "^1.4.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@11ty/dependency-tree": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
+      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
     },
-    "@11ty/eleventy": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-0.11.0.tgz",
-      "integrity": "sha512-ozkfpmSlhodVoGCNFhBFsNbFxJbaiPYiVGKCeVdsFBTfDLhGyWS8cieNWjsvKyEHWT8OLNSIBvJYv4JxuxTivg==",
-      "dev": true,
-      "requires": {
-        "@11ty/dependency-tree": "^1.0.0",
-        "browser-sync": "^2.26.7",
-        "chalk": "^3.0.0",
-        "chokidar": "^3.4.0",
-        "debug": "^4.1.1",
-        "dependency-graph": "^0.9.0",
-        "ejs": "^2.7.4",
-        "fast-glob": "^3.2.2",
-        "fs-extra": "^8.1.0",
-        "gray-matter": "^4.0.2",
+    "node_modules/@11ty/eleventy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-1.0.2.tgz",
+      "integrity": "sha512-03ER4zukR6BgwppI5DHRE11lc+8B0fWsBrqacVWo3o49QkdEFXnEWjhyI9qd9LrPlgQHK2/MYyxuOvNwecyCLQ==",
+      "dependencies": {
+        "@11ty/dependency-tree": "^2.0.1",
+        "@11ty/eleventy-utils": "^1.0.1",
+        "@iarna/toml": "^2.2.5",
+        "@sindresorhus/slugify": "^1.1.2",
+        "browser-sync": "^2.27.10",
+        "chokidar": "^3.5.3",
+        "cross-spawn": "^7.0.3",
+        "debug": "^4.3.4",
+        "dependency-graph": "^0.11.0",
+        "ejs": "^3.1.8",
+        "fast-glob": "^3.2.11",
+        "graceful-fs": "^4.2.10",
+        "gray-matter": "^4.0.3",
         "hamljs": "^0.6.2",
-        "handlebars": "^4.7.6",
-        "javascript-stringify": "^2.0.1",
-        "liquidjs": "^6.4.3",
-        "lodash": "^4.17.15",
-        "luxon": "^1.24.1",
-        "markdown-it": "^10.0.0",
-        "minimist": "^1.2.5",
+        "handlebars": "^4.7.7",
+        "is-glob": "^4.0.3",
+        "kleur": "^4.1.5",
+        "liquidjs": "^9.40.0",
+        "lodash": "^4.17.21",
+        "luxon": "^2.5.0",
+        "markdown-it": "^12.3.2",
+        "minimist": "^1.2.6",
         "moo": "^0.5.1",
-        "multimatch": "^4.0.0",
-        "mustache": "^2.3.2",
+        "multimatch": "^5.0.0",
+        "mustache": "^4.2.0",
         "normalize-path": "^3.0.0",
-        "nunjucks": "^3.2.1",
-        "parse-filepath": "^1.0.2",
+        "nunjucks": "^3.2.3",
+        "path-to-regexp": "^6.2.1",
         "please-upgrade-node": "^3.2.0",
         "pretty": "^2.0.0",
-        "pug": "^2.0.4",
-        "recursive-copy": "^2.0.10",
-        "semver": "^7.3.2",
-        "slugify": "^1.4.0",
-        "time-require": "^0.1.2",
-        "valid-url": "^1.0.9"
+        "pug": "^3.0.2",
+        "recursive-copy": "^2.0.14",
+        "semver": "^7.3.7",
+        "slugify": "^1.6.5"
+      },
+      "bin": {
+        "eleventy": "cmd.js"
       },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-cache-assets": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-cache-assets/-/eleventy-cache-assets-2.3.0.tgz",
+      "integrity": "sha512-W8tvO00GlWaKt3ccpEStaUBoj9BE3EgzuD8uYChCfYbN2Q4HkEItkiapvIJT0zJwAwoMfnSq6VHPLScYlX2XCg==",
       "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "anymatch": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "binary-extensions": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "chokidar": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
-          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
-          "dev": true,
-          "requires": {
-            "anymatch": "~3.1.1",
-            "braces": "~3.0.2",
-            "fsevents": "~2.1.2",
-            "glob-parent": "~5.1.0",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.4.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "entities": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.2.tgz",
-          "integrity": "sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==",
-          "dev": true
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "fs-extra": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.2.4",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-          "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "luxon": {
-          "version": "1.24.1",
-          "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.24.1.tgz",
-          "integrity": "sha512-CgnIMKAWT0ghcuWFfCWBnWGOddM0zu6c4wZAWmD0NN7MZTnro0+833DF6tJep+xlxRPg4KtsYEHYLfTMBQKwYg==",
-          "dev": true
-        },
-        "markdown-it": {
-          "version": "10.0.0",
-          "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
-          "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "entities": "~2.0.0",
-            "linkify-it": "^2.0.0",
-            "mdurl": "^1.0.1",
-            "uc.micro": "^1.0.5"
-          }
-        },
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
-          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
-          "dev": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          },
-          "dependencies": {
-            "picomatch": {
-              "version": "2.2.2",
-              "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-              "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-              "dev": true
-            }
-          }
-        },
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true
-        },
-        "slugify": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz",
-          "integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "debug": "^4.3.1",
+        "flat-cache": "^3.0.4",
+        "node-fetch": "^2.6.1",
+        "p-queue": "^6.6.2",
+        "short-hash": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
       }
     },
-    "@11ty/eleventy-plugin-rss": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-1.0.7.tgz",
-      "integrity": "sha512-fP06UhcOn45XfXBpAkDL0VlsOQ9poCK+BbdSwhmsYaqJzYVf9whIdRwqX0FUaSy1659bQC8auaXNyGsJQUq87w==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "luxon": "^1.0.0",
-        "posthtml": "^0.11.2",
+    "node_modules/@11ty/eleventy-plugin-rss": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-1.1.2.tgz",
+      "integrity": "sha512-QdXMl29MzMtyMj9Y1lYijPX4vGMnBDo4Peyi4GCJznCO4+eryAZiyVYciLBCek893EXL3RLOuVSshYo+jvjZ0w==",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "posthtml": "^0.15.1",
         "posthtml-urls": "1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
       }
     },
-    "@11ty/eleventy-plugin-syntaxhighlight": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-3.0.1.tgz",
-      "integrity": "sha512-+cXc5oyFagCat+JgIh+4cI1otQMVYSsXjxj2/8J78I+p6ICvCfObzvi7PTXvDPbwXOQP8RkcB4DYOP+MKkcPAw==",
-      "dev": true,
-      "requires": {
-        "prismjs": "^1.17.1"
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.0.0.tgz",
+      "integrity": "sha512-t95DIZQ7MnaspgpmXyKIgz2TpyN7EshMt9+SFfqVUYKTISU3+T3FTXFscoLownyNWb/5EC0od69BnCZwEcMzCg==",
+      "dependencies": {
+        "linkedom": "^0.13.2",
+        "prismjs": "^1.26.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
       }
     },
-    "@algolia/cache-browser-local-storage": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.1.0.tgz",
-      "integrity": "sha512-r8BOgqZXVt+JPgP19PQNzZ+lYP+MP6eZKNQqfRYofFEx+K9oyfdtGCqmoWJsBUi3nNOzhbOcg2jfP2GJzJBZ5g==",
-      "requires": {
-        "@algolia/cache-common": "4.1.0"
+    "node_modules/@11ty/eleventy-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
+      "integrity": "sha512-HPpCTz4PzudcQU+i+x6GSNHVqgnvRhnVYg5dLKaAoRWLN966odAGsBxKSyhF8i1MdlOPtsytYb2AGWP7jISC5w==",
+      "dependencies": {
+        "normalize-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
       }
     },
-    "@algolia/cache-common": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.1.0.tgz",
-      "integrity": "sha512-ZvvK40bs1BWLErchleZL4ctHT2uH56uLMnpZPCuIk+H2PKddeiIQc/z2JDu2BHr68u513XIAAoQ+C+LgKNugmw=="
-    },
-    "@algolia/cache-in-memory": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.1.0.tgz",
-      "integrity": "sha512-2382OXYFDeoPLA5vP9KP58ad15ows24ML5/io/T1N0xsZ0eVXDkT52qgaJw/esUfEkWScZ2R8kpesUa+qEP+kw==",
-      "requires": {
-        "@algolia/cache-common": "4.1.0"
+    "node_modules/@11ty/eleventy/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "@algolia/client-account": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.1.0.tgz",
-      "integrity": "sha512-GFINlsxAHM/GEeDBjoTx8+J1ra9SINQCuXi2C9QSLFClPKug2lzApm8niJJGXckhyZ2aDLb7drJ1qJ8bTspApw==",
-      "requires": {
-        "@algolia/client-common": "4.1.0",
-        "@algolia/client-search": "4.1.0",
-        "@algolia/transporter": "4.1.0"
+    "node_modules/@11ty/eleventy/node_modules/luxon": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.2.tgz",
+      "integrity": "sha512-Yg7/RDp4nedqmLgyH0LwgGRvMEKVzKbUdkBYyCosbHgJ+kaOUx0qzSiSatVc3DFygnirTPYnMM2P5dg2uH1WvA==",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@algolia/client-analytics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.1.0.tgz",
-      "integrity": "sha512-JMyZ9vXGbTJWiO66fWEu9uJ7GSYfouUyaq8W/6esADPtBbelf+Nc0NRlicOwHHJGwiJvWdvELafxrhkR1+KR8A==",
-      "requires": {
-        "@algolia/client-common": "4.1.0",
-        "@algolia/client-search": "4.1.0",
-        "@algolia/requester-common": "4.1.0",
-        "@algolia/transporter": "4.1.0"
-      }
+    "node_modules/@11ty/eleventy/node_modules/path-to-regexp": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
+      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
     },
-    "@algolia/client-common": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.1.0.tgz",
-      "integrity": "sha512-fjSMKeG54vAyQAhf+uz039/birTiLun8nDuCNx4CUbzGl97M0g96Q8jpsiZa0cjSNgh0VakMzn2GnHbS55W9/Q==",
-      "requires": {
-        "@algolia/requester-common": "4.1.0",
-        "@algolia/transporter": "4.1.0"
+    "node_modules/@actions/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-5ad+U2YGrmmiw6du20AQW5XuWo7UKN2052FjSV7MX+Wfjf8sCqcsZe62NfgHys4QI4/Y+vQvLKYL8jWtA1ZBTA==",
+      "dev": true,
+      "dependencies": {
+        "@actions/http-client": "^2.0.1",
+        "uuid": "^8.3.2"
       }
     },
-    "@algolia/client-recommendation": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-recommendation/-/client-recommendation-4.1.0.tgz",
-      "integrity": "sha512-UEN/QgQwVtVH++yAs2uTuyZZQQ1p5Xs/7/FKT4Kh9/8NAyqDD49zuyq/giw8PRNhWc3C/9jiO7X4RKE8QrVWGw==",
-      "requires": {
-        "@algolia/client-common": "4.1.0",
-        "@algolia/requester-common": "4.1.0",
-        "@algolia/transporter": "4.1.0"
+    "node_modules/@actions/core/node_modules/@actions/http-client": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.0.1.tgz",
+      "integrity": "sha512-PIXiMVtz6VvyaRsGY268qvj57hXQEpsYogYOu2nrQhlf+XCGmZstmuZBbAybUl1nQGnvS1k1eEsQ69ZoD7xlSw==",
+      "dev": true,
+      "dependencies": {
+        "tunnel": "^0.0.6"
       }
     },
-    "@algolia/client-search": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.1.0.tgz",
-      "integrity": "sha512-bpCYMEXUdyiopEBSHHwnrRhNEwOLstIeb0Djz+/pVuTXEr3Xg3JUoAZ8xFsCVldcXaZQpbi1/T0y3ky6xUVzfw==",
-      "requires": {
-        "@algolia/client-common": "4.1.0",
-        "@algolia/requester-common": "4.1.0",
-        "@algolia/transporter": "4.1.0"
+    "node_modules/@actions/core/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
-    "@algolia/logger-common": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.1.0.tgz",
-      "integrity": "sha512-QrE4Srf1LB7ekLzl68bFqlTrv7Wk7+GpsaGfB4xFZ9Pfv89My9p7qTVqdLlA44hEFY3fZ9csJp1/PFVucgNB4w=="
+    "node_modules/@actions/github": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@actions/github/-/github-5.0.0.tgz",
+      "integrity": "sha512-QvE9eAAfEsS+yOOk0cylLBIO/d6WyWIOvsxxzdrPFaud39G6BOkUwScXZn1iBzQzHyu9SBkkLSWlohDWdsasAQ==",
+      "dev": true,
+      "dependencies": {
+        "@actions/http-client": "^1.0.11",
+        "@octokit/core": "^3.4.0",
+        "@octokit/plugin-paginate-rest": "^2.13.3",
+        "@octokit/plugin-rest-endpoint-methods": "^5.1.1"
+      }
     },
-    "@algolia/logger-console": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.1.0.tgz",
-      "integrity": "sha512-sKELkiKIrj/tPRAdhOPNI0UxhK2uiIUXnGs/3ztAif6QX7vyE3lY19sj5pIVJctRvl8LW2UlzpBFGlcCDkho9Q==",
-      "requires": {
-        "@algolia/logger-common": "4.1.0"
+    "node_modules/@actions/http-client": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-1.0.11.tgz",
+      "integrity": "sha512-VRYHGQV1rqnROJqdMvGUbY/Kn8vriQe/F9HR2AlYHzmKuM/p3kjNuXhmdBfcVgsvRWTz5C5XW5xvndZrVBuAYg==",
+      "dev": true,
+      "dependencies": {
+        "tunnel": "0.0.6"
       }
     },
-    "@algolia/requester-browser-xhr": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.1.0.tgz",
-      "integrity": "sha512-bLMfIAkOLs1/vGA09yxU0N5+bE0fSSvEH2ySqVssfWLMP+KRAvby2Goxm8BgI9xLkOvLbhazfQ4Ov2448VvA1g==",
-      "requires": {
-        "@algolia/requester-common": "4.1.0"
+    "node_modules/@algolia/cache-browser-local-storage": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.10.3.tgz",
+      "integrity": "sha512-TD1N7zg5lb56/PLjjD4bBl2eccEvVHhC7yfgFu2r9k5tf+gvbGxEZ3NhRZVKu2MObUIcEy2VR4LVLxOQu45Hlg==",
+      "dependencies": {
+        "@algolia/cache-common": "4.10.3"
       }
     },
-    "@algolia/requester-common": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.1.0.tgz",
-      "integrity": "sha512-Cy0ciOv5uIm6wF+uLc9DHhxgPJtYQuy1f//hwJcW5mlPX/prPgxWwLXzWyyA+Ca7uU3q+0Y3cIFvEWM5pDxMEg=="
+    "node_modules/@algolia/cache-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.10.3.tgz",
+      "integrity": "sha512-q13cPPUmtf8a2suBC4kySSr97EyulSXuxUkn7l1tZUCX/k1y5KNheMp8npBy8Kc8gPPmHpacxddRSfOncjiKFw=="
     },
-    "@algolia/requester-node-http": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.1.0.tgz",
-      "integrity": "sha512-tXp6Pjx9dFgM5ccW6YfEN6v2Zqq8uGwhS1pyq03/aRYRBK60LptjG5jo++vrOytrQDOnIjcZtQzBQch2GjCVmw==",
-      "requires": {
-        "@algolia/requester-common": "4.1.0"
+    "node_modules/@algolia/cache-in-memory": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.10.3.tgz",
+      "integrity": "sha512-JhPajhOXAjUP+TZrZTh6KJpF5VKTKyWK2aR1cD8NtrcVHwfGS7fTyfXfVm5BqBqkD9U0gVvufUt/mVyI80aZww==",
+      "dependencies": {
+        "@algolia/cache-common": "4.10.3"
       }
     },
-    "@algolia/transporter": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.1.0.tgz",
-      "integrity": "sha512-Z7PjHazSC+KFLDuCFOjvRNgLfh7XOE4tXi0a9O3gBRup4Sk3VQCfTw4ygCF3rRx6uYbq192efLu0nL1E9azxLA==",
-      "requires": {
-        "@algolia/cache-common": "4.1.0",
-        "@algolia/logger-common": "4.1.0",
-        "@algolia/requester-common": "4.1.0"
+    "node_modules/@algolia/client-account": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.10.3.tgz",
+      "integrity": "sha512-S/IsJB4s+e1xYctdpW3nAbwrR2y3pjSo9X21fJGoiGeIpTRdvQG7nydgsLkhnhcgAdLnmqBapYyAqMGmlcyOkg==",
+      "dependencies": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/transporter": "4.10.3"
       }
     },
-    "@babel/code-frame": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
-      "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
-      "requires": {
-        "@babel/highlight": "^7.0.0"
+    "node_modules/@algolia/client-analytics": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.10.3.tgz",
+      "integrity": "sha512-vlHTbBqJktRgclh3v7bPQLfZvFIqY4erNFIZA5C7nisCj9oLeTgzefoUrr+R90+I+XjfoLxnmoeigS1Z1yg1vw==",
+      "dependencies": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
       }
     },
-    "@babel/compat-data": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.1.tgz",
-      "integrity": "sha512-CHvCj7So7iCkGKPRFUfryXIkU2gSBw7VSZFYLsqVhrS47269VK2Hfi9S/YcublPMW8k1u2bQBlbDruoQEm4fgw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
+    "node_modules/@algolia/client-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.10.3.tgz",
+      "integrity": "sha512-uFyP2Z14jG2hsFRbAoavna6oJf4NTXaSDAZgouZUZlHlBp5elM38sjNeA5HR9/D9J/GjwaB1SgB7iUiIWYBB4w==",
+      "dependencies": {
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.10.3.tgz",
+      "integrity": "sha512-NS7Nx8EJ/nduGXT8CFo5z7kLF0jnFehTP3eC+z+GOEESH3rrs7uR12IZHxv5QhQswZa9vl925zCOZDcDVoENCg==",
+      "dependencies": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.10.3.tgz",
+      "integrity": "sha512-Zwnp2G94IrNFKWCG/k7epI5UswRkPvL9FCt7/slXe2bkjP2y/HA37gzRn+9tXoLVRwd7gBzrtOA4jFKIyjrtVw==",
+      "dependencies": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/logger-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.10.3.tgz",
+      "integrity": "sha512-M6xi+qov2bkgg1H9e1Qtvq/E/eKsGcgz8RBbXNzqPIYoDGZNkv+b3b8YMo3dxd4Wd6M24HU1iqF3kmr1LaXndg=="
+    },
+    "node_modules/@algolia/logger-console": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.10.3.tgz",
+      "integrity": "sha512-vVgRI7b4PHjgBdRkv/cRz490twvkLoGdpC4VYzIouSrKj8SIVLRhey3qgXk7oQXi3xoxVAv6NrklHfpO8Bpx0w==",
+      "dependencies": {
+        "@algolia/logger-common": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.10.3.tgz",
+      "integrity": "sha512-4WIk1zreFbc1EF6+gsfBTQvwSNjWc20zJAAExRWql/Jq5yfVHmwOqi/CajA53/cXKFBqo80DAMRvOiwP+hOLYw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/requester-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.10.3.tgz",
+      "integrity": "sha512-PNfLHmg0Hujugs3rx55uz/ifv7b9HVdSFQDb2hj0O5xZaBEuQCNOXC6COrXR8+9VEfqp2swpg7zwgtqFxh+BtQ=="
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.10.3.tgz",
+      "integrity": "sha512-A9ZcGfEvgqf0luJApdNcIhsRh6MShn2zn2tbjwjGG1joF81w+HUY+BWuLZn56vGwAA9ZB9n00IoJJpxibbfofg==",
+      "dependencies": {
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "node_modules/@algolia/transporter": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.10.3.tgz",
+      "integrity": "sha512-n1lRyKDbrckbMEgm7QXtj3nEWUuzA3aKLzVQ43/F/RCFib15j4IwtmYhXR6OIBRSc7+T0Hm48S0J6F+HeYCQkw==",
+      "dependencies": {
+        "@algolia/cache-common": "4.10.3",
+        "@algolia/logger-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "node_modules/@apidevtools/json-schema-ref-parser": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.2.tgz",
+      "integrity": "sha512-r1w81DpR+KyRWd3f+rk6TNqMgedmAxZP5v5KWlXQWlgMUUtyEJch0DKEci1SorPMiSeM8XPl7MZ3miJ60JIpQg==",
+      "dependencies": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.6",
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^4.1.0"
+      }
+    },
+    "node_modules/@apidevtools/json-schema-ref-parser/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/@apidevtools/json-schema-ref-parser/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
       },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@assemblyscript/loader": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",
+      "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg=="
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001079",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz",
-          "integrity": "sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.465",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
-          "integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.58",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
-          "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
-          "dev": true
-        }
+        "@babel/highlight": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/core": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
-      "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.9.0",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helpers": "^7.9.0",
-        "@babel/parser": "^7.9.0",
-        "@babel/template": "^7.8.6",
-        "@babel/traverse": "^7.9.0",
-        "@babel/types": "^7.9.0",
+    "node_modules/@babel/compat-data": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz",
+      "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
+      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-compilation-targets": "^7.14.5",
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helpers": "^7.14.6",
+        "@babel/parser": "^7.14.6",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.1",
+        "gensync": "^1.0.0-beta.2",
         "json5": "^2.1.2",
-        "lodash": "^4.17.13",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
+        "semver": "^6.3.0",
         "source-map": "^0.5.0"
       },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
-          "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.9.5",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
-          "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.8.3",
-            "@babel/template": "^7.8.3",
-            "@babel/types": "^7.9.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
-          "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
-          "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.9.5",
-            "@babel/helper-function-name": "^7.9.5",
-            "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.9.0",
-            "@babel/types": "^7.9.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "convert-source-map": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-          "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.1"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
-    "@babel/generator": {
-      "version": "7.6.4",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.4.tgz",
-      "integrity": "sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==",
-      "requires": {
-        "@babel/types": "^7.6.3",
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5",
         "jsesc": "^2.5.1",
-        "lodash": "^4.17.13",
         "source-map": "^0.5.0"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
+      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
       "dependencies": {
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
-        }
+        "@babel/compat-data": "^7.14.5",
+        "@babel/helper-validator-option": "^7.14.5",
+        "browserslist": "^4.16.6",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "@babel/helper-annotate-as-pure": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz",
-      "integrity": "sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.1"
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+      "dependencies": {
+        "@babel/helper-get-function-arity": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-get-function-arity": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz",
-      "integrity": "sha512-cQpVq48EkYxUU0xozpGCLla3wlkdRRqLWu1ksFMXA9CM5KQmyyRpSEsYXbao7JUkOw/tAaYKCaYyZq6HOFYtyw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.10.1",
-        "@babel/types": "^7.10.1"
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
+      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
       "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-compilation-targets": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz",
-      "integrity": "sha512-hYgOhF4To2UTB4LTaZepN/4Pl9LD4gfbJx8A34mqoluT8TLbof1mhUlYuNWTEebONa8+UlCC4X0TEXu7AOUyGA==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.10.1",
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "levenary": "^1.1.1",
-        "semver": "^5.5.0"
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
+      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001079",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz",
-          "integrity": "sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.465",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
-          "integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.58",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
-          "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
-          "dev": true
-        }
+        "@babel/helper-module-imports": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.2.tgz",
-      "integrity": "sha512-5C/QhkGFh1vqcziq1vAL6SI9ymzUp8BCYjFpvYVhWP4DlATIb3u5q3iUd35mvlyGs8fO7hckkW7i0tmH+5+bvQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.10.1",
-        "@babel/helper-member-expression-to-functions": "^7.10.1",
-        "@babel/helper-optimise-call-expression": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-replace-supers": "^7.10.1",
-        "@babel/helper-split-export-declaration": "^7.10.1"
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
+      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
+      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/helper-member-expression-to-functions": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.1.tgz",
-      "integrity": "sha512-Rx4rHS0pVuJn5pJOqaqcZR4XSgeF9G/pO/79t+4r7380tXFJdzImFnxMU19f83wjSrmKHq6myrM10pFHTGzkUA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/helper-regex": "^7.10.1",
-        "regexpu-core": "^4.7.0"
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
+      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-define-map": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.1.tgz",
-      "integrity": "sha512-+5odWpX+OnvkD0Zmq7panrMuAGQBu6aPUgvMzuMGo4R+jUOvealEj2hiqI6WhxgKrTpFoFj0+VdsuA8KDxHBDg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.10.1",
-        "@babel/types": "^7.10.1",
-        "lodash": "^4.17.13"
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-explode-assignable-expression": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.1.tgz",
-      "integrity": "sha512-vcUJ3cDjLjvkKzt6rHrl767FeE7pMEYfPanq5L16GRtrXIoznc0HykNW2aEYkcnP76P0isoqJ34dDMFZwzEpJg==",
-      "dev": true,
-      "requires": {
-        "@babel/traverse": "^7.10.1",
-        "@babel/types": "^7.10.1"
-      },
+    "node_modules/@babel/highlight": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-function-name": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
-      "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.0.0",
-        "@babel/template": "^7.1.0",
-        "@babel/types": "^7.0.0"
+    "node_modules/@babel/parser": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "@babel/helper-get-function-arity": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz",
-      "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==",
-      "requires": {
-        "@babel/types": "^7.0.0"
+    "node_modules/@babel/runtime": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-hoist-variables": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.1.tgz",
-      "integrity": "sha512-vLm5srkU8rI6X3+aQ1rQJyfjvCBLXP8cAGeuw04zeAM2ItKb1e7pmVmLyHb4sDaAYnLL13RHOZPLEtcGZ5xvjg==",
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
+      "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
       "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.1"
-      },
       "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "core-js-pure": "^3.15.0",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-member-expression-to-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
-      "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.8.3"
+    "node_modules/@babel/template": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
+      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
       "dependencies": {
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/parser": "^7.14.7",
+        "@babel/types": "^7.14.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "@babel/helper-module-imports": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
-      "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.8.3"
+    "node_modules/@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@dabh/diagnostics": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
+      "integrity": "sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==",
       "dependencies": {
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "colorspace": "1.1.x",
+        "enabled": "2.0.x",
+        "kuler": "^2.0.0"
       }
     },
-    "@babel/helper-module-transforms": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
-      "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
+    "node_modules/@eslint/eslintrc": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
       "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-simple-access": "^7.8.3",
-        "@babel/helper-split-export-declaration": "^7.8.3",
-        "@babel/template": "^7.8.6",
-        "@babel/types": "^7.9.0",
-        "lodash": "^4.17.13"
-      },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^13.9.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "@babel/helper-optimise-call-expression": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
-      "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
       "dev": true,
-      "requires": {
-        "@babel/types": "^7.8.3"
-      },
       "dependencies": {
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "@babel/helper-plugin-utils": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz",
-      "integrity": "sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==",
-      "dev": true
-    },
-    "@babel/helper-regex": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.1.tgz",
-      "integrity": "sha512-7isHr19RsIJWWLLFn21ubFt223PjQyg1HY7CZEMRr820HttHPpVvrsIN3bUOo44DEfFV4kBXO7Abbn9KTUZV7g==",
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true,
-      "requires": {
-        "lodash": "^4.17.13"
+      "engines": {
+        "node": ">= 4"
       }
     },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.1.tgz",
-      "integrity": "sha512-RfX1P8HqsfgmJ6CwaXGKMAqbYdlleqglvVtht0HGPMSsy2V6MqLlOJVF/0Qyb/m2ZCi2z3q3+s6Pv7R/dQuZ6A==",
+    "node_modules/@eslint/eslintrc/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/helper-wrap-function": "^7.10.1",
-        "@babel/template": "^7.10.1",
-        "@babel/traverse": "^7.10.1",
-        "@babel/types": "^7.10.1"
-      },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "@babel/helper-replace-supers": {
-      "version": "7.8.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz",
-      "integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==",
+    "node_modules/@eslint/eslintrc/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
-      "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/traverse": "^7.8.6",
-        "@babel/types": "^7.8.6"
-      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-31wJq3nyftteE3lOjBi8MLGCialm/laUUoCJTPPKuLk1rfiDfYQTFkeRyyY8DJpOaECKpe6b9nLi92H/GP3m5A==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
-          "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.9.5",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
-          "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.8.3",
-            "@babel/template": "^7.8.3",
-            "@babel/types": "^7.9.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
-          "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
-          "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.9.5",
-            "@babel/helper-function-name": "^7.9.5",
-            "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.9.0",
-            "@babel/types": "^7.9.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-simple-access": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
-      "integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
       },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/helper-split-export-declaration": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
-      "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
-      "requires": {
-        "@babel/types": "^7.4.4"
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-zGWMbtAn1J1pOMOVTl4Metalq9sw15TX/GaU3PdD33PsJnbdtdjcot1Jg+3PKr7OOZWYqXhZ+jd5GRP4BleGUQ==",
+      "dependencies": {
+        "@firebase/analytics": "0.0.900-exp.6ef484a04",
+        "@firebase/analytics-types": "0.4.0",
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/helper-validator-identifier": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
-      "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
-      "dev": true
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.4.0.tgz",
+      "integrity": "sha512-Jj2xW+8+8XPfWGkv9HPv/uR+Qrmq37NPYT352wf7MvE9LrstpLVmFg3LqG6MCRr5miLAom5sen2gZ+iOhVDeRA=="
     },
-    "@babel/helper-wrap-function": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.1.tgz",
-      "integrity": "sha512-C0MzRGteVDn+H32/ZgbAv5r56f2o1fZSA/rj/TYo8JEJNHg+9BdSmKBUND0shxWRztWhjlT2cvHYuynpPsVJwQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.10.1",
-        "@babel/template": "^7.10.1",
-        "@babel/traverse": "^7.10.1",
-        "@babel/types": "^7.10.1"
-      },
+    "node_modules/@firebase/app": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-URENthv5xzUcLPXZll1iEkuXCQDV2OLNRO9l2qtldZhxy5VnIEHcRV3fbNtr93JTSnc/bt+r89yhAfQlvJrvtA==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/helpers": {
-      "version": "7.9.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz",
-      "integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.9.0",
-        "@babel/types": "^7.9.0"
-      },
+    "node_modules/@firebase/app-check": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-+8y78kRm57VgluuygH9txO95T1B0rAzcrJle7Bzc+IRidxAokAleVMRGTvnQCr8wCmsvwpMU0JCiw6slXXQVEA==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
-          "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.9.5",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
-          "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.8.3",
-            "@babel/template": "^7.8.3",
-            "@babel/types": "^7.9.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
-          "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
-          "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.9.5",
-            "@babel/helper-function-name": "^7.9.5",
-            "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.9.0",
-            "@babel/types": "^7.9.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/highlight": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz",
-      "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==",
-      "requires": {
-        "chalk": "^2.0.0",
-        "esutils": "^2.0.2",
-        "js-tokens": "^4.0.0"
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-9xC1GU46K9fJDXRQxm3xtmKtH2v3ukGpSUkYQtxSTCn4r5/Nm+9ohdSLMyz535Elp0frFrNxf3gMdFk0cramxg==",
+      "dependencies": {
+        "@firebase/app-check": "0.0.900-exp.6ef484a04",
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/parser": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz",
-      "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew=="
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.1.0.tgz",
+      "integrity": "sha512-uZfn9s4uuRsaX5Lwx+gFP3B6YsyOKUE+Rqa6z9ojT4VSRAsZFko9FRn6OxQUA1z5t5d08fY4pf+/+Dkd5wbdbA=="
     },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.1.tgz",
-      "integrity": "sha512-vzZE12ZTdB336POZjmpblWfNNRpMSua45EYnRigE2XsZxcXcIyly2ixnTJasJE4Zq3U7t2d8rRF7XRUuzHxbOw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-remap-async-to-generator": "^7.10.1",
-        "@babel/plugin-syntax-async-generators": "^7.8.0"
+    "node_modules/@firebase/app-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-uoXUkK91apbs1wq7Q++TqSW666tGTAnr+5dquJ53HRbtrHNLXP3x6uGVGUpgltRPkWGS+mGLKJKDMywXuC0B0A==",
+      "dependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04",
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "dom-storage": "2.1.0",
+        "tslib": "^2.1.0",
+        "xmlhttprequest": "1.8.0"
       }
     },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.1.tgz",
-      "integrity": "sha512-sqdGWgoXlnOdgMXU+9MbhzwFRgxVLeiGBqTrnuS7LC2IBU31wSsESbTUreT2O418obpfPdGUR2GbEufZF1bpqw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
-      }
+    "node_modules/@firebase/app-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.2.tgz",
+      "integrity": "sha512-2VXvq/K+n8XMdM4L2xy5bYp2ZXMawJXluUIDzUBvMthVR+lhxK4pfFiqr1mmDbv9ydXvEAuFsD+6DpcZuJcSSw=="
     },
-    "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.1.tgz",
-      "integrity": "sha512-Cpc2yUVHTEGPlmiQzXj026kqwjEQAD9I4ZC16uzdbgWgitg/UHKHLffKNCQZ5+y8jpIZPJcKcwsr2HwPh+w3XA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.0"
+    "node_modules/@firebase/auth": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-FHzyz8SCjHk3OLQEUg5CLXPAJA8KDDOlb1z0XWJ0q5U7zUF+yUJSlJ49k6jXM8VgZq58c3aQYGm+EId4FM31zA==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "selenium-webdriver": "4.0.0-beta.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.1.tgz",
-      "integrity": "sha512-m8r5BmV+ZLpWPtMY2mOKN7wre6HIO4gfIiV+eOmsnZABNenrt/kzYBwrh+KOfgumSWpnlGs5F70J8afYMSJMBg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-json-strings": "^7.8.0"
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-4MXcrQO+Z5rduM/qrTjqTHooFgFnGiXxsSp0qw4BJo22OkVXIZGYLr1CvX7Y6fuUkYUyAqMbV5skcmvlOTTKjA==",
+      "dependencies": {
+        "@firebase/auth": "0.0.900-exp.6ef484a04",
+        "@firebase/auth-types": "0.10.3",
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "selenium-webdriver": "^4.0.0-beta.2",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz",
-      "integrity": "sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+    "node_modules/@firebase/auth-compat/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.1.tgz",
-      "integrity": "sha512-jjfym4N9HtCiNfyyLAVD8WqPYeHUrw4ihxuAynWj6zzp2gf9Ey2f7ImhFm6ikB3CLf5Z/zmcJDri6B4+9j9RsA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.1"
+    "node_modules/@firebase/auth-compat/node_modules/selenium-webdriver": {
+      "version": "4.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.4.tgz",
+      "integrity": "sha512-+s/CIYkWzmnC9WASBxxVj7Lm0dcyl6OaFxwIJaFCT5WCuACiimEEr4lUnOOFP/QlKfkDQ56m+aRczaq2EvJEJg==",
+      "dependencies": {
+        "jszip": "^3.6.0",
+        "rimraf": "^3.0.2",
+        "tmp": "^0.2.1",
+        "ws": ">=7.4.6"
+      },
+      "engines": {
+        "node": ">= 10.15.0"
       }
     },
-    "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.1.tgz",
-      "integrity": "sha512-Z+Qri55KiQkHh7Fc4BW6o+QBuTagbOp9txE+4U1i79u9oWlf2npkiDx+Rf3iK3lbcHBuNy9UOkwuR5wOMH3LIQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.1"
+    "node_modules/@firebase/auth-compat/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
       }
     },
-    "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.1.tgz",
-      "integrity": "sha512-VqExgeE62YBqI3ogkGoOJp1R6u12DFZjqwJhqtKc2o5m1YTUuUWnos7bZQFBhwkxIFpWYJ7uB75U7VAPPiKETA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz",
+      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
       }
     },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz",
-      "integrity": "sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+    "node_modules/@firebase/auth-types": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.3.tgz",
+      "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
       }
     },
-    "@babel/plugin-proposal-private-methods": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.1.tgz",
-      "integrity": "sha512-RZecFFJjDiQ2z6maFprLgrdnm0OzoC23Mx89xf1CcEsxmHuzuXOdniEuI+S3v7vjQG4F5sa6YtUp+19sZuSxHg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/auth/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.1.tgz",
-      "integrity": "sha512-JjfngYRvwmPwmnbRZyNiPFI8zxCZb8euzbCG/LxyKdeTb59tVciKo9GK9bi6JYKInk1H11Dq9j/zRqIH4KigfQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/component": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.4.tgz",
+      "integrity": "sha512-KoLDPTsvxWr6FT9kn/snffJItaWXZLHLJlZVKiiw+flKE6MVA8Eec+ctvM2zcsMZzC2Z47gFnVqywfBlOevmpQ==",
+      "dependencies": {
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/database": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-rRClIC+44CT4R+haFz43yxQ7tCSJLoe0rYymoj04m5m1jJW1IOYNsH31AQqShdI2k27HkYDCC/C6TauMQEjN0w==",
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/database-types": "0.7.2",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-syntax-class-properties": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.1.tgz",
-      "integrity": "sha512-Gf2Yx/iRs1JREDtVZ56OrjjgFHCaldpTnuy9BHla10qyVT3YkIIGEtoDWhyop0ksu1GvNjHIoYRBqm3zoR1jyQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/database-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-ZUipzvjB8rAmbsfCFLNOruDW6CPzkomjgCAAA2HTqXuyapv4om0paA6SGeQtPCVxbTURR5Q4TuYcIyfObyaOng==",
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/database": "0.0.900-exp.6ef484a04",
+        "@firebase/database-types": "0.7.2",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/database-types": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.7.2.tgz",
+      "integrity": "sha512-cdAd/dgwvC0r3oLEDUR+ULs1vBsEvy0b27nlzKhU6LQgm9fCDzgaH9nFGv8x+S9dly4B0egAXkONkVoWcOAisg==",
+      "dependencies": {
+        "@firebase/app-types": "0.6.2"
       }
     },
-    "@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/firestore": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-KZHcWgB1PWtH/fU5Cqm4ygrSSDkFQk3PNG0qW+ILAeBnFcqn2uYv4Xu9D+yb5vP+qWTAygQjxTHR/SHN68HcJQ==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/firestore-types": "2.3.0",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "@firebase/webchannel-wrapper": "0.5.1",
+        "@grpc/grpc-js": "^1.3.2",
+        "@grpc/proto-loader": "^0.6.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-4Zvmc6SLV/V+WZIRfqkiob7nR5qTlwTJEYEjViiGD42bRxOPsJS9aSwrTaRN4/z9iuU/g+m1og9A94ZQGM5jxQ==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/firestore": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore-types": "2.3.0",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "@firebase/webchannel-wrapper": "0.5.1",
+        "@grpc/grpc-js": "^1.3.2",
+        "@grpc/proto-loader": "^0.6.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.1.tgz",
-      "integrity": "sha512-uTd0OsHrpe3tH5gRPTxG8Voh99/WCU78vIm5NMRYPAqC8lR4vajt6KkCAknCHrx24vkPdd/05yfdGSB4EIY2mg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/firestore-compat/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/firestore-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.3.0.tgz",
+      "integrity": "sha512-QTW7NP7nDL0pgT/X53lyj+mIMh4nRQBBTBlRNQBt7eSyeqBf3ag3bxdQhCg358+5KbjYTC2/O6QtX9DlJZmh1A==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
       }
     },
-    "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/firestore/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+    "node_modules/@firebase/functions": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-9hynd3oC7nvkRlxeiDOewXJupNsFtwv4dxktYgIrouUMwDjkEzARI8QJW2w01UBjiuGXkKMZzJG9yqcQMMUM/w==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.1.0",
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/messaging-types": "0.5.0",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-syntax-top-level-await": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.1.tgz",
-      "integrity": "sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-eEfFv+IOL3zk0NYPmemE2bsyVNYscNLdVYbjzaJ2Ic+IgB7PhTrnA8YJRfHHzhHpENYDWKq2vhHJLroTtj6PyA==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/functions": "0.0.900-exp.6ef484a04",
+        "@firebase/functions-types": "0.4.0",
+        "@firebase/messaging-types": "0.5.0",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.1.tgz",
-      "integrity": "sha512-6AZHgFJKP3DJX0eCNJj01RpytUa3SOGawIxweHkNX2L6PYikOZmoh5B0d7hIHaIgveMjX990IAa/xK7jRTN8OA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/functions-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.4.0.tgz",
+      "integrity": "sha512-3KElyO3887HNxtxNF1ytGFrNmqD+hheqjwmT3sI09FaDCuaxGbOnsXAXH2eQ049XRXw9YQpHMgYws/aUNgXVyQ=="
+    },
+    "node_modules/@firebase/functions/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.1.tgz",
-      "integrity": "sha512-XCgYjJ8TY2slj6SReBUyamJn3k2JLUIiiR5b6t1mNCMSvv7yx+jJpaewakikp0uWFQSF7ChPPoe3dHmXLpISkg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-remap-async-to-generator": "^7.10.1"
+    "node_modules/@firebase/installations": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-y35ti81PKh5HJmS7GXMWiXopWCXiExwBbaeyY+zyVG3os8VrnzzpiukMvF7vrS9Kehbp32CKkJVG/lUQmpBlsw==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "idb": "3.0.2",
+        "tslib": "^2.1.0"
       },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz",
+      "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw=="
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-6VYysXX1t8U2axgvfD1kpy6LU0PR+M0CY8uaG52IZdxKW2OE6ErNM5rCLAcHdC+heVu3D7z9V0t2hbJzPd8lDg==",
       "dependencies": {
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/util": "1.1.0",
+        "idb": "3.0.2",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.1.tgz",
-      "integrity": "sha512-B7K15Xp8lv0sOJrdVAoukKlxP9N59HS48V1J3U/JGj+Ad+MHq+am6xJVs85AgXrQn4LV8vaYFOB+pr/yIuzW8Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-oF69T5Xf7XRA6GMRfihqz18V5PNwCQughNUIKhGrVBbkIC5G7U2qDcbaCzttFQcsuy4su9cclbJCl+QQ7hKpzA==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging": "0.0.900-exp.6ef484a04",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.1.tgz",
-      "integrity": "sha512-8bpWG6TtF5akdhIm/uWTyjHqENpy13Fx8chg7pFH875aNLwX8JxIxqm08gmAT+Whe6AOmaTeLPe7dpLbXt+xUw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "lodash": "^4.17.13"
+    "node_modules/@firebase/messaging-types": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz",
+      "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
       }
     },
-    "@babel/plugin-transform-classes": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.1.tgz",
-      "integrity": "sha512-P9V0YIh+ln/B3RStPoXpEQ/CoAxQIhRSUn7aXqQ+FZJ2u8+oCtjIXR3+X0vsSD8zv+mb56K7wZW1XiDTDGiDRQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/helper-define-map": "^7.10.1",
-        "@babel/helper-function-name": "^7.10.1",
-        "@babel/helper-optimise-call-expression": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-replace-supers": "^7.10.1",
-        "@babel/helper-split-export-declaration": "^7.10.1",
-        "globals": "^11.1.0"
-      },
+    "node_modules/@firebase/performance": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-SWZUX8rnPTw1jpWkAOIFQ3heeO5hWl+WKvZkRHdb1pB78nRfQZdH0ogxWIJd09daD74zWVa54gif8+FbI1tm6w==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.1.tgz",
-      "integrity": "sha512-mqSrGjp3IefMsXIenBfGcPXxJxweQe2hEIwMQvjtiDQ9b1IBvDUjkAtV/HMXX47/vXf14qDNedXsIiNd1FmkaQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-92+vPhyQ36e735O/S6gt164CU4L7cJXZ2RhZZsNAQMcjf1kGUKixMpliW5KJ38GfGL2kLVrkQRr96fLIHBZx2A==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/performance": "0.0.900-exp.6ef484a04",
+        "@firebase/performance-types": "0.0.13",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.1.tgz",
-      "integrity": "sha512-V/nUc4yGWG71OhaTH705pU8ZSdM6c1KmmLP8ys59oOYbT7RpMYAR3MsVOt6OHL0WzG7BlTU076va9fjJyYzJMA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/performance-types": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.0.13.tgz",
+      "integrity": "sha512-6fZfIGjQpwo9S5OzMpPyqgYAUZcFzZxHFqOyNtorDIgNXq33nlldTL/vtaUZA8iT9TT5cJlCrF/jthKU7X21EA=="
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-P8CrS2t0vx7KIJ8ioeeqBtNc3SZybO3ebw343tzj3qrcfrcGaKiPto6e6dTEUOx0vOxAq1KGASDJiYxH9xXm1g==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-dotall-regex": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.1.tgz",
-      "integrity": "sha512-19VIMsD1dp02RvduFUmfzj8uknaO3uiHHF0s3E1OHnVsNj8oge8EQ5RzHRbJjGSetRnkEuBYO7TG1M5kKjGLOA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-dovfWzcZj05KXEhLMnTYIJATUEB/Oe7OfRUG626apn4VvIyqv/1CqPcTuVqL2lqs7qF3wXLiyrEKE4GBUKx2vw==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/remote-config": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config-types": "0.1.9",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.1.tgz",
-      "integrity": "sha512-wIEpkX4QvX8Mo9W6XF3EdGttrIPZWozHfEaDTU0WJD/TDnXMvdDh30mzUl/9qWhnf7naicYartcEfUghTCSNpA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.1.9.tgz",
+      "integrity": "sha512-G96qnF3RYGbZsTRut7NBX0sxyczxt1uyCgXQuH/eAfUCngxjEGcZQnBdy6mvSdqdJh5mC31rWPO4v9/s7HwtzA=="
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-wmFW58h7coihe4axKKHvKrP+V0X3s3aNc1jW1WPtVocTGUZCtG+tGQWVUE+rYuKVDVY56Uu5lLUeo3DPXah5Qg==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/storage-types": "0.4.1",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.0.900-exp.6ef484a04"
       }
     },
-    "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.1.tgz",
-      "integrity": "sha512-lr/przdAbpEA2BUzRvjXdEDLrArGRRPwbaF9rvayuHRvdQ7lUTTkZnhZrJ4LE2jvgMRFF4f0YuPQ20vhiPYxtA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-2+qtW1/EhNFlWs0EwhrvKkhtWALIWOtYWLwKvhc9PO2eO0IxCrEMWRA+tlUjcRbpXqt2Yt9WrXHSu3WrcClMJw==",
+      "dependencies": {
+        "@firebase/component": "0.5.4",
+        "@firebase/storage": "0.0.900-exp.6ef484a04",
+        "@firebase/storage-types": "0.4.1",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/plugin-transform-for-of": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.1.tgz",
-      "integrity": "sha512-US8KCuxfQcn0LwSCMWMma8M2R5mAjJGsmoCBVwlMygvmDUMkTCykc84IqN1M7t+agSfOmLYTInLCHJM+RUoz+w==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/storage-compat/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-transform-function-name": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.1.tgz",
-      "integrity": "sha512-//bsKsKFBJfGd65qSNNh1exBy5Y9gD9ZN+DvrJ8f7HXr4avE5POW6zB7Rj6VnqHV33+0vXWUwJT0wSHubiAQkw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+    "node_modules/@firebase/storage-types": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.4.1.tgz",
+      "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
       }
     },
-    "@babel/plugin-transform-literals": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.1.tgz",
-      "integrity": "sha512-qi0+5qgevz1NHLZroObRm5A+8JJtibb7vdcPQF1KQE12+Y/xxl8coJ+TpPW9iRq+Mhw/NKLjm+5SHtAHCC7lAw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/storage/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
       }
     },
-    "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.1.tgz",
-      "integrity": "sha512-UmaWhDokOFT2GcgU6MkHC11i0NQcL63iqeufXWfRy6pUOGYeCGEKhvfFO6Vz70UfYJYHwveg62GS83Rvpxn+NA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@firebase/util": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.1.0.tgz",
+      "integrity": "sha512-lfuSASuPKNdfebuFR8rjFamMQUPH9iiZHcKS755Rkm/5gRT0qC7BMhCh3ZkHf7NVbplzIc/GhmX2jM+igDRCag==",
+      "dependencies": {
+        "tslib": "^2.1.0"
       }
     },
-    "@babel/plugin-transform-modules-amd": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.1.tgz",
-      "integrity": "sha512-31+hnWSFRI4/ACFr1qkboBbrTxoBIzj7qA69qlq8HY8p7+YCzkCT6/TvQ1a4B0z27VeWtAeJd6pr5G04dc1iHw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.5.1.tgz",
+      "integrity": "sha512-dZMzN0uAjwJXWYYAcnxIwXqRTZw3o14hGe7O6uhwjD1ZQWPVYA5lASgnNskEBra0knVBsOXB4KXg+HnlKewN/A=="
+    },
+    "node_modules/@google-cloud/cloudbuild": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/cloudbuild/-/cloudbuild-2.6.0.tgz",
+      "integrity": "sha512-+MKgIJ6MEomk5KF14PYUXQzkW3BDY+eMzsoxExkwnAQEFdrgrfnDTuLEpBWdP37ywAmTi8DSrtCy4pNtwZBiqA==",
+      "dependencies": {
+        "google-gax": "^2.24.1"
       },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/common": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-3.7.1.tgz",
+      "integrity": "sha512-BJfcV5BShbunYcn5HniebXLVp2Y6fpuesNegyar5CG8H2AKYHlKxnVID+FSwy92WAW4N2lpGdvxRsmiAn8Fc3w==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
-          "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.10.1",
-            "@babel/helper-replace-supers": "^7.10.1",
-            "@babel/helper-simple-access": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
-          "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "@google-cloud/projectify": "^2.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.1",
+        "duplexify": "^4.1.1",
+        "ent": "^2.2.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^7.0.2",
+        "retry-request": "^4.2.2",
+        "teeny-request": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.1.tgz",
-      "integrity": "sha512-AQG4fc3KOah0vdITwt7Gi6hD9BtQP/8bhem7OjbaMoRNCH5Djx42O2vYMfau7QnAzQCa+RJnhJBmFFMGpQEzrg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-simple-access": "^7.10.1",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+    "node_modules/@google-cloud/error-reporting": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/error-reporting/-/error-reporting-2.0.3.tgz",
+      "integrity": "sha512-ZjcHW7R/Rhu93R2YpyB4IQ0R2QzxsuI2ehiS09AMwFk9ifvhCzlEGKvXcodoSuSRpv0y2lO5/cm/F3XgBS2dWw==",
+      "dependencies": {
+        "@google-cloud/common": "^3.0.0",
+        "console-log-level": "^1.4.1"
       },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/paginator": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-4.0.1.tgz",
+      "integrity": "sha512-6G1ui6bWhNyHjmbYwavdN7mpVPRBtyDg/bfqBTAlwr413On2TnFNfDxc9UhTJctkgoCDgQXEKiRPLPR9USlkbQ==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
-          "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.10.1",
-            "@babel/helper-replace-supers": "^7.10.1",
-            "@babel/helper-simple-access": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
-          "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.1.tgz",
-      "integrity": "sha512-ewNKcj1TQZDL3YnO85qh9zo1YF1CHgmSTlRQgHqe63oTrMI85cthKtZjAiZSsSNjPQ5NCaYo5QkbYqEw1ZBgZA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.10.1",
-        "@babel/helper-module-transforms": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
+    "node_modules/@google-cloud/precise-date": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/precise-date/-/precise-date-3.0.1.tgz",
+      "integrity": "sha512-crK2rgNFfvLoSgcKJY7ZBOLW91IimVNmPfi1CL+kMTf78pTJYd29XqEVedAeBu4DwCJc0EDIp1MpctLgoPq+Uw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@google-cloud/projectify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-2.1.0.tgz",
+      "integrity": "sha512-qbpidP/fOvQNz3nyabaVnZqcED1NNzf7qfeOlgtAZd9knTwY+KtsGRkYpiQzcATABy4gnGP2lousM3S0nuWVzA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/promisify": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-2.0.3.tgz",
+      "integrity": "sha512-d4VSA86eL/AFTe5xtyZX+ePUjE8dIFu2T8zmdeNBSa5/kNgXPCx/o/wbFNHAGLJdGnk1vddRuMESD9HbOC8irw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/pubsub": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@google-cloud/pubsub/-/pubsub-3.7.5.tgz",
+      "integrity": "sha512-4Qrry4vIToth5mqduVslltWVsyb7DR8OhnkBA3F7XiE0jgQsiuUfwp/RB2F559aXnRbwcfmjvP4jSuEaGcjrCQ==",
+      "dependencies": {
+        "@google-cloud/paginator": "^4.0.0",
+        "@google-cloud/precise-date": "^3.0.0",
+        "@google-cloud/projectify": "^3.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "@opentelemetry/api": "^1.6.0",
+        "@opentelemetry/semantic-conventions": "~1.3.0",
+        "@types/duplexify": "^3.6.0",
+        "@types/long": "^4.0.0",
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^8.0.2",
+        "google-gax": "^3.6.1",
+        "heap-js": "^2.2.0",
+        "is-stream-ended": "^0.1.4",
+        "lodash.snakecase": "^4.1.1",
+        "p-defer": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/@google-cloud/projectify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-3.0.0.tgz",
+      "integrity": "sha512-HRkZsNmjScY6Li8/kb70wjGlDDyLkVk3KvoEo9uIoxSjYLJasGiCch9+PqRVDOCGUFvEIqyogl+BeqILL4OJHA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/@grpc/grpc-js": {
+      "version": "1.8.21",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.21.tgz",
+      "integrity": "sha512-KeyQeZpxeEBSqFVTi3q2K7PiPXmgBfECc4updA1ejCLjYmoAlvvM3ZMp5ztTDUCUQmoY3CpDxvchjO1+rFkoHg==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.0",
+        "@types/node": ">=12.12.47"
       },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/@grpc/proto-loader": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.10.tgz",
+      "integrity": "sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
-          "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.10.1",
-            "@babel/helper-replace-supers": "^7.10.1",
-            "@babel/helper-simple-access": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
-          "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.4",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "@babel/plugin-transform-modules-umd": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.1.tgz",
-      "integrity": "sha512-EIuiRNMd6GB6ulcYlETnYYfgv4AxqrswghmBRQbWLHZxN4s7mupxzglnHqk9ZiUpDI4eRWewedJJNj67PWOXKA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "bin": {
+        "acorn": "bin/acorn"
       },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
-          "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.10.1",
-            "@babel/helper-replace-supers": "^7.10.1",
-            "@babel/helper-simple-access": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
-          "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz",
-      "integrity": "sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.3"
+    "node_modules/@google-cloud/pubsub/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
-    "@babel/plugin-transform-new-target": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.1.tgz",
-      "integrity": "sha512-MBlzPc1nJvbmO9rPr1fQwXOM2iGut+JC92ku6PbiJMMK7SnQc1rytgpopveE3Evn47gzvGYeCdgfCDbZo0ecUw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "@babel/plugin-transform-object-super": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.1.tgz",
-      "integrity": "sha512-WnnStUDN5GL+wGQrJylrnnVlFhFmeArINIR9gjhSeYyvroGhBrSAXYg/RHsnfzmsa+onJrTJrEClPzgNmmQ4Gw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-replace-supers": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
       },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
-          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.2",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
-          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.10.1",
-            "@babel/template": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
-          "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
-          "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
-          "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.10.1",
-            "@babel/helper-optimise-call-expression": "^7.10.1",
-            "@babel/traverse": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
-          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
-          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
-          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
-          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.1",
-            "@babel/generator": "^7.10.1",
-            "@babel/helper-function-name": "^7.10.1",
-            "@babel/helper-split-export-declaration": "^7.10.1",
-            "@babel/parser": "^7.10.1",
-            "@babel/types": "^7.10.1",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
       }
     },
-    "@babel/plugin-transform-parameters": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.1.tgz",
-      "integrity": "sha512-tJ1T0n6g4dXMsL45YsSzzSDZCxiHXAQp/qHrucOq5gEHncTA3xDxnd5+sZcoQp+N1ZbieAaB8r/VUCG0gqseOg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
-      "dependencies": {
-        "@babel/helper-get-function-arity": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
-          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "@babel/plugin-transform-property-literals": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.1.tgz",
-      "integrity": "sha512-Kr6+mgag8auNrgEpbfIWzdXYOvqDHZOF0+Bx2xh4H2EDNwcbRb9lY6nkZg8oSjsX+DH9Ebxm9hOqtKW+gRDeNA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "@babel/plugin-transform-regenerator": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.1.tgz",
-      "integrity": "sha512-B3+Y2prScgJ2Bh/2l9LJxKbb8C8kRfsG4AdPT+n7ixBHIxJaIG8bi8tgjxUMege1+WqSJ+7gu1YeoMVO3gPWzw==",
-      "dev": true,
-      "requires": {
-        "regenerator-transform": "^0.14.2"
+    "node_modules/@google-cloud/pubsub/node_modules/gaxios": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
+      "integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.6.9"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@babel/plugin-transform-reserved-words": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.1.tgz",
-      "integrity": "sha512-qN1OMoE2nuqSPmpTqEM7OvJ1FkMEV+BjVeZZm9V9mq/x1JLKQ4pcv8riZJMNN3u2AUGl0ouOMjRr2siecvHqUQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/gcp-metadata": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
+      "integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
+      "dependencies": {
+        "gaxios": "^5.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.1.tgz",
-      "integrity": "sha512-AR0E/lZMfLstScFwztApGeyTHJ5u3JUKMjneqRItWeEqDdHWZwAOKycvQNCasCK/3r5YXsuNG25funcJDu7Y2g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "@babel/plugin-transform-spread": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.1.tgz",
-      "integrity": "sha512-8wTPym6edIrClW8FI2IoaePB91ETOtg36dOkj3bYcNe7aDMN2FXEoUa+WrmPc4xa1u2PQK46fUX2aCb+zo9rfw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/google-auth-library": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-8.9.0.tgz",
+      "integrity": "sha512-f7aQCJODJFmYWN6PeNKzgvy9LI2tYmXnzpNDHEjG5sDNPgGb2FXQyTBnXeSH+PAtpKESFD+LmHw3Ox3mN7e1Fg==",
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^5.0.0",
+        "gcp-metadata": "^5.3.0",
+        "gtoken": "^6.1.0",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@babel/plugin-transform-sticky-regex": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.1.tgz",
-      "integrity": "sha512-j17ojftKjrL7ufX8ajKvwRilwqTok4q+BjkknmQw9VNHnItTyMP5anPFzxFJdCQs7clLcWpCV3ma+6qZWLnGMA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/helper-regex": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/google-gax": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-3.6.1.tgz",
+      "integrity": "sha512-g/lcUjGcB6DSw2HxgEmCDOrI/CByOwqRvsuUvNalHUK2iPPPlmAIpbMbl62u0YufGMr8zgE3JL7th6dCb1Ry+w==",
+      "dependencies": {
+        "@grpc/grpc-js": "~1.8.0",
+        "@grpc/proto-loader": "^0.7.0",
+        "@types/long": "^4.0.0",
+        "@types/rimraf": "^3.0.2",
+        "abort-controller": "^3.0.0",
+        "duplexify": "^4.0.0",
+        "fast-text-encoding": "^1.0.3",
+        "google-auth-library": "^8.0.2",
+        "is-stream-ended": "^0.1.4",
+        "node-fetch": "^2.6.1",
+        "object-hash": "^3.0.0",
+        "proto3-json-serializer": "^1.0.0",
+        "protobufjs": "7.2.4",
+        "protobufjs-cli": "1.1.1",
+        "retry-request": "^5.0.0"
+      },
+      "bin": {
+        "compileProtos": "build/tools/compileProtos.js",
+        "minifyProtoJson": "build/tools/minify.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/google-p12-pem": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-4.0.1.tgz",
+      "integrity": "sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==",
+      "dependencies": {
+        "node-forge": "^1.3.1"
+      },
+      "bin": {
+        "gp12-pem": "build/src/bin/gp12-pem.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "@babel/plugin-transform-template-literals": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.1.tgz",
-      "integrity": "sha512-t7B/3MQf5M1T9hPCRG28DNGZUuxAuDqLYS03rJrIk2prj/UV7Z6FOneijhQhnv/Xa039vidXeVbvjK2SK5f7Gg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/gtoken": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-6.1.2.tgz",
+      "integrity": "sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==",
+      "dependencies": {
+        "gaxios": "^5.0.1",
+        "google-p12-pem": "^4.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.1.tgz",
-      "integrity": "sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.1.tgz",
-      "integrity": "sha512-zZ0Poh/yy1d4jeDWpx/mNwbKJVwUYJX73q+gyh4bwtG0/iUlzdEu0sLMda8yuDFS6LBQlT/ST1SJAR6zYwXWgw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
+    "node_modules/@google-cloud/pubsub/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
       }
     },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.1.tgz",
-      "integrity": "sha512-Y/2a2W299k0VIUdbqYm9X2qS6fE0CUBhhiPpimK6byy7OJ/kORLlIX+J6UrjgNu5awvs62k+6RSslxhcvVw2Tw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
-      }
+    "node_modules/@google-cloud/pubsub/node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
     },
-    "@babel/preset-env": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.2.tgz",
-      "integrity": "sha512-MjqhX0RZaEgK/KueRzh+3yPSk30oqDKJ5HP5tqTSB1e2gzGS3PLy7K0BIpnp78+0anFuSwOeuCf1zZO7RzRvEA==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.10.1",
-        "@babel/helper-compilation-targets": "^7.10.2",
-        "@babel/helper-module-imports": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1",
-        "@babel/plugin-proposal-async-generator-functions": "^7.10.1",
-        "@babel/plugin-proposal-class-properties": "^7.10.1",
-        "@babel/plugin-proposal-dynamic-import": "^7.10.1",
-        "@babel/plugin-proposal-json-strings": "^7.10.1",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.1",
-        "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.10.1",
-        "@babel/plugin-proposal-optional-chaining": "^7.10.1",
-        "@babel/plugin-proposal-private-methods": "^7.10.1",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.10.1",
-        "@babel/plugin-syntax-async-generators": "^7.8.0",
-        "@babel/plugin-syntax-class-properties": "^7.10.1",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-        "@babel/plugin-syntax-json-strings": "^7.8.0",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.1",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.10.1",
-        "@babel/plugin-transform-arrow-functions": "^7.10.1",
-        "@babel/plugin-transform-async-to-generator": "^7.10.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.10.1",
-        "@babel/plugin-transform-block-scoping": "^7.10.1",
-        "@babel/plugin-transform-classes": "^7.10.1",
-        "@babel/plugin-transform-computed-properties": "^7.10.1",
-        "@babel/plugin-transform-destructuring": "^7.10.1",
-        "@babel/plugin-transform-dotall-regex": "^7.10.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.10.1",
-        "@babel/plugin-transform-exponentiation-operator": "^7.10.1",
-        "@babel/plugin-transform-for-of": "^7.10.1",
-        "@babel/plugin-transform-function-name": "^7.10.1",
-        "@babel/plugin-transform-literals": "^7.10.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.10.1",
-        "@babel/plugin-transform-modules-amd": "^7.10.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.10.1",
-        "@babel/plugin-transform-modules-umd": "^7.10.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
-        "@babel/plugin-transform-new-target": "^7.10.1",
-        "@babel/plugin-transform-object-super": "^7.10.1",
-        "@babel/plugin-transform-parameters": "^7.10.1",
-        "@babel/plugin-transform-property-literals": "^7.10.1",
-        "@babel/plugin-transform-regenerator": "^7.10.1",
-        "@babel/plugin-transform-reserved-words": "^7.10.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.10.1",
-        "@babel/plugin-transform-spread": "^7.10.1",
-        "@babel/plugin-transform-sticky-regex": "^7.10.1",
-        "@babel/plugin-transform-template-literals": "^7.10.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.10.1",
-        "@babel/plugin-transform-unicode-escapes": "^7.10.1",
-        "@babel/plugin-transform-unicode-regex": "^7.10.1",
-        "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.10.2",
-        "browserslist": "^4.12.0",
-        "core-js-compat": "^3.6.2",
-        "invariant": "^2.2.2",
-        "levenary": "^1.1.1",
-        "semver": "^5.5.0"
+    "node_modules/@google-cloud/pubsub/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
       },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "dependencies": {
-        "@babel/helper-module-imports": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
-          "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.10.2",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
-          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001079",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz",
-          "integrity": "sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.465",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
-          "integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.58",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
-          "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
-          "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "@babel/preset-modules": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
-      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
+    "node_modules/@google-cloud/pubsub/node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "engines": {
+        "node": ">= 6.13.0"
       }
     },
-    "@babel/runtime": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
-      "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
-      "dev": true,
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-          "dev": true
-        }
+    "node_modules/@google-cloud/pubsub/node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "@babel/template": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz",
-      "integrity": "sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.6.0",
-        "@babel/types": "^7.6.0"
-      },
+    "node_modules/@google-cloud/pubsub/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
       "dependencies": {
-        "@babel/parser": {
-          "version": "7.6.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
-          "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
-        }
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
       }
     },
-    "@babel/traverse": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.3.tgz",
-      "integrity": "sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==",
-      "requires": {
-        "@babel/code-frame": "^7.5.5",
-        "@babel/generator": "^7.6.3",
-        "@babel/helper-function-name": "^7.1.0",
-        "@babel/helper-split-export-declaration": "^7.4.4",
-        "@babel/parser": "^7.6.3",
-        "@babel/types": "^7.6.3",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.13"
-      },
+    "node_modules/@google-cloud/pubsub/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/proto3-json-serializer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-1.1.1.tgz",
+      "integrity": "sha512-AwAuY4g9nxx0u52DnSMkqqgyLHaW/XaPLtaAo3y/ZCfeaQB/g4YDH4kb8Wc/mWzWvu0YjOznVnfn373MVZZrgw==",
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.5.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
-          "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
-          "requires": {
-            "@babel/highlight": "^7.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.6.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
-          "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
-        }
+        "protobufjs": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "@babel/types": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.3.tgz",
-      "integrity": "sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==",
-      "requires": {
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.13",
-        "to-fast-properties": "^2.0.0"
+    "node_modules/@google-cloud/pubsub/node_modules/protobufjs": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz",
+      "integrity": "sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
       },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@google-cloud/pubsub/node_modules/protobufjs-cli": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/protobufjs-cli/-/protobufjs-cli-1.1.1.tgz",
+      "integrity": "sha512-VPWMgIcRNyQwWUv8OLPyGQ/0lQY/QTQAVN5fh+XzfDwsVw1FZ2L3DM/bcBf8WPiRz2tNpaov9lPZfNcmNo6LXA==",
       "dependencies": {
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-        }
+        "chalk": "^4.0.0",
+        "escodegen": "^1.13.0",
+        "espree": "^9.0.0",
+        "estraverse": "^5.1.0",
+        "glob": "^8.0.0",
+        "jsdoc": "^4.0.0",
+        "minimist": "^1.2.0",
+        "semver": "^7.1.2",
+        "tmp": "^0.2.1",
+        "uglify-js": "^3.7.7"
+      },
+      "bin": {
+        "pbjs": "bin/pbjs",
+        "pbts": "bin/pbts"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "protobufjs": "^7.0.0"
       }
     },
-    "@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true
+    "node_modules/@google-cloud/pubsub/node_modules/protobufjs-cli/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "engines": {
+        "node": ">=4.0"
+      }
     },
-    "@hapi/address": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
-      "integrity": "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==",
-      "dev": true
+    "node_modules/@google-cloud/pubsub/node_modules/retry-request": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-5.0.2.tgz",
+      "integrity": "sha512-wfI3pk7EE80lCIXprqh7ym48IHYdwmAAzESdbU8Q9l7pnRCk9LEhpbOTNKjz6FARLm/Bl5m+4F0ABxOkYUujSQ==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "@hapi/bourne": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-1.3.2.tgz",
-      "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==",
-      "dev": true
+    "node_modules/@google-cloud/pubsub/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "@hapi/hoek": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
-      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
-      "dev": true
+    "node_modules/@google-cloud/pubsub/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "@hapi/joi": {
-      "version": "15.1.1",
-      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.1.1.tgz",
-      "integrity": "sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==",
-      "dev": true,
-      "requires": {
-        "@hapi/address": "2.x.x",
-        "@hapi/bourne": "1.x.x",
-        "@hapi/hoek": "8.x.x",
-        "@hapi/topo": "3.x.x"
+    "node_modules/@google-cloud/pubsub/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
       }
     },
-    "@hapi/topo": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.6.tgz",
-      "integrity": "sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==",
-      "dev": true,
-      "requires": {
-        "@hapi/hoek": "^8.3.0"
+    "node_modules/@google-cloud/pubsub/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
       }
     },
-    "@istanbuljs/schema": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
-      "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
-      "dev": true
+    "node_modules/@google-cloud/pubsub/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
-      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "2.0.3",
-        "run-parallel": "^1.1.9"
+    "node_modules/@google-cloud/secret-manager": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/secret-manager/-/secret-manager-3.10.0.tgz",
+      "integrity": "sha512-zpZzq5zBU49s8wIvgdVpOLhQ1pDDa84VWK57NPesN56q1OeBMU3g+ykW5pwARJx4svTOzPxsbv8x4kHqe8+GUQ==",
+      "dependencies": {
+        "google-gax": "^2.24.1"
       },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.3.4.tgz",
+      "integrity": "sha512-AxtZcm0mArQhY9z8T3TynCYVEaSKxNCa9mVhVwBCUnsuUEe8Zn94bPYYKVQSLt+hJJ1y0ukr3mUvtWfcATL/IQ==",
       "dependencies": {
-        "@nodelib/fs.stat": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
-          "dev": true
-        }
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
       }
     },
-    "@nodelib/fs.stat": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-      "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
-      "dev": true
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.6.4.tgz",
+      "integrity": "sha512-7xvDvW/vJEcmLUltCUGOgWRPM8Oofv0eCFSVMuKqaqWJaXSzmB+m9hiyqe34QofAl4WAzIKUZZlinIF9FOHyTQ==",
+      "dependencies": {
+        "@types/long": "^4.0.1",
+        "lodash.camelcase": "^4.3.0",
+        "long": "^4.0.0",
+        "protobufjs": "^6.10.0",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "@nodelib/fs.walk": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
-      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.3",
-        "fastq": "^1.6.0"
+    "node_modules/@grpc/proto-loader/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "@oclif/color": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@oclif/color/-/color-0.0.0.tgz",
-      "integrity": "sha512-KKd3W7eNwfNF061tr663oUNdt8EMnfuyf5Xv55SGWA1a0rjhWqS/32P7OeB7CbXcJUBdfVrPyR//1afaW12AWw==",
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
       "dev": true,
-      "requires": {
-        "ansi-styles": "^3.2.1",
-        "supports-color": "^5.4.0",
-        "tslib": "^1"
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
       },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+      "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+      "dev": true
+    },
+    "node_modules/@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
+    },
+    "node_modules/@imgix/js-core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@imgix/js-core/-/js-core-3.5.1.tgz",
+      "integrity": "sha512-5gfOuyC0drq9TdEVR0+fR/PRZx4MqymsiTY38ZJoTXHz5D5IpnQhreroj7F4+VBKLdv96aCU9UyPGVjzSlzYIw==",
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "js-base64": "~3.7.0",
+        "md5": "^2.2.1"
       }
     },
-    "@oclif/command": {
-      "version": "1.5.19",
-      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.5.19.tgz",
-      "integrity": "sha512-6+iaCMh/JXJaB2QWikqvGE9//wLEVYYwZd5sud8aLoLKog1Q75naZh2vlGVtg5Mq/NqpqGQvdIjJb3Bm+64AUQ==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "optional": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "optional": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
+    },
+    "node_modules/@jsdoc/salty": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.5.tgz",
+      "integrity": "sha512-TfRP53RqunNe2HBobVBJ0VLhK1HbfvBYeTC1ahnN64PWvyYyGebmMiPkuwvD9fpw2ZbkoPb8Q7mwy0aR8Z9rvw==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=v12.0.0"
+      }
+    },
+    "node_modules/@justinribeiro/lite-youtube": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@justinribeiro/lite-youtube/-/lite-youtube-0.9.2.tgz",
+      "integrity": "sha512-ni+E5jbVVrN7D7xfB7qzXjMq5rhSh20dILHfQl02GrySpdT+9KZp1acs8bZtBgmIqhOBkjk8+fTX30nq1UraGg=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz",
+      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw=="
+    },
+    "node_modules/@mdn/browser-compat-data": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.9.tgz",
+      "integrity": "sha512-J7lLtHMEizYbI5T0Xlqpg1JXCz9JegZBeb7y3v/Nm8ScRw8TL9v3n+I3g1TFm+bLrRtwA33FKwX5znDwz+WzAQ=="
+    },
+    "node_modules/@minify-html/node": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@minify-html/node/-/node-0.9.2.tgz",
+      "integrity": "sha512-qXu2s34R9UgdBaofrF1OwEQXhVNsR9gK8knpQF2zSl00XFgiUKinfk6zyQu29Cwy2X4wPtOhzbg5K+vjyZnvQw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "cargo-cp-artifact": "^0.1"
+      },
+      "bin": {
+        "minify-html": "cli.js"
+      },
+      "engines": {
+        "node": ">= 8.6.0"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@npmcli/fs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
+      "integrity": "sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@oclif/command": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.8.7.tgz",
+      "integrity": "sha512-5DRLd2WHppuKsudHe8rCZnjgEpA2/6P4zxrLwWBXrGz+/kzA/RWcPJgkcdfm1uBCEgHMSWZP4MX21d4lAB1vYA==",
       "dev": true,
-      "requires": {
-        "@oclif/config": "^1",
-        "@oclif/errors": "^1.2.2",
-        "@oclif/parser": "^3.8.3",
-        "@oclif/plugin-help": "^2",
+      "dependencies": {
+        "@oclif/config": "^1.18.1",
+        "@oclif/errors": "^1.3.5",
+        "@oclif/parser": "^3.8.6",
+        "@oclif/plugin-help": "^3.2.10",
         "debug": "^4.1.1",
-        "semver": "^5.6.0"
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@oclif/config": "^1"
       }
     },
-    "@oclif/config": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/@oclif/config/-/config-1.14.0.tgz",
-      "integrity": "sha512-KsOP/mx9lzTah+EtGqLUXN3PDL0J3zb9/dTneFyiUK2K6T7vFEGhV6OasmqTh4uMZHGYTGrNPV8x/Yw6qZNL6A==",
+    "node_modules/@oclif/config": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/@oclif/config/-/config-1.18.1.tgz",
+      "integrity": "sha512-twRJO5RRl3CCDaAASb6LiynfFQl/SbkWWOQy1l0kJZSMPysEhz+fk3BKfmlCCm451Btkp4UezHUwI1JtH+/zYg==",
       "dev": true,
-      "requires": {
-        "@oclif/errors": "^1.0.0",
+      "dependencies": {
+        "@oclif/errors": "^1.3.3",
         "@oclif/parser": "^3.8.0",
         "debug": "^4.1.1",
-        "tslib": "^1.9.3"
+        "globby": "^11.0.1",
+        "is-wsl": "^2.1.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
-    "@oclif/errors": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@oclif/errors/-/errors-1.2.2.tgz",
-      "integrity": "sha512-Eq8BFuJUQcbAPVofDxwdE0bL14inIiwt5EaKRVY9ZDIG11jwdXZqiQEECJx0VfnLyUZdYfRd/znDI/MytdJoKg==",
+    "node_modules/@oclif/config/node_modules/globby": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
       "dev": true,
-      "requires": {
-        "clean-stack": "^1.3.0",
-        "fs-extra": "^7.0.0",
-        "indent-string": "^3.2.0",
-        "strip-ansi": "^5.0.0",
-        "wrap-ansi": "^4.0.0"
-      },
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-4.0.0.tgz",
-          "integrity": "sha512-uMTsj9rDb0/7kk1PbcbCcwvHUxp60fGDB/NNXpVa0Q+ic/e7y5+BwTxKfQ33VYgDppSwi/FBzpetYzo8s6tfbg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        }
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "@oclif/linewrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@oclif/linewrap/-/linewrap-1.0.0.tgz",
-      "integrity": "sha512-Ups2dShK52xXa8w6iBWLgcjPJWjais6KPJQq3gQ/88AY6BXoTX+MIGFPrWQO1KLMiQfoTpcLnUwloN4brrVUHw==",
-      "dev": true
+    "node_modules/@oclif/config/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "@oclif/parser": {
-      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/@oclif/parser/-/parser-3.8.4.tgz",
-      "integrity": "sha512-cyP1at3l42kQHZtqDS3KfTeyMvxITGwXwH1qk9ktBYvqgMp5h4vHT+cOD74ld3RqJUOZY/+Zi9lb4Tbza3BtuA==",
+    "node_modules/@oclif/config/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
-      "requires": {
-        "@oclif/linewrap": "^1.0.0",
-        "chalk": "^2.4.2",
-        "tslib": "^1.9.3"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@oclif/plugin-help": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-2.2.3.tgz",
-      "integrity": "sha512-bGHUdo5e7DjPJ0vTeRBMIrfqTRDBfyR5w0MP41u0n3r7YG5p14lvMmiCXxi6WDaP2Hw5nqx3PnkAIntCKZZN7g==",
+    "node_modules/@oclif/errors": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@oclif/errors/-/errors-1.3.5.tgz",
+      "integrity": "sha512-OivucXPH/eLLlOT7FkCMoZXiaVYf8I/w1eTAM1+gKzfhALwWTusxEx7wBmW0uzvkSg/9ovWLycPaBgJbM3LOCQ==",
       "dev": true,
-      "requires": {
-        "@oclif/command": "^1.5.13",
-        "chalk": "^2.4.1",
+      "dependencies": {
+        "clean-stack": "^3.0.0",
+        "fs-extra": "^8.1",
         "indent-string": "^4.0.0",
-        "lodash.template": "^4.4.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0",
-        "widest-line": "^2.0.1",
-        "wrap-ansi": "^4.0.0"
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
       },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@oclif/errors/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@oclif/errors/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "indent-string": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-4.0.0.tgz",
-          "integrity": "sha512-uMTsj9rDb0/7kk1PbcbCcwvHUxp60fGDB/NNXpVa0Q+ic/e7y5+BwTxKfQ33VYgDppSwi/FBzpetYzo8s6tfbg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-              "dev": true
-            },
-            "string-width": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-              "dev": true,
-              "requires": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        }
-      }
-    },
-    "@oclif/plugin-not-found": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@oclif/plugin-not-found/-/plugin-not-found-1.2.3.tgz",
-      "integrity": "sha512-Igbw2T4gLrb/f28Llr730FeMXBSI2PXdky2YvQfsZeQGDsyBZmC4gprJJtmrMWQcjz0B51IInRBnZYERvwfIpw==",
-      "dev": true,
-      "requires": {
-        "@oclif/color": "^0.0.0",
-        "@oclif/command": "^1.5.3",
-        "cli-ux": "^4.9.0",
-        "fast-levenshtein": "^2.0.6",
-        "lodash": "^4.17.13"
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@oclif/screen": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@oclif/screen/-/screen-1.0.4.tgz",
-      "integrity": "sha512-60CHpq+eqnTxLZQ4PGHYNwUX572hgpMHGPtTWMjdTMsAvlm69lZV/4ly6O3sAYkomo4NggGcomrDpBe34rxUqw==",
+    "node_modules/@oclif/linewrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@oclif/linewrap/-/linewrap-1.0.0.tgz",
+      "integrity": "sha512-Ups2dShK52xXa8w6iBWLgcjPJWjais6KPJQq3gQ/88AY6BXoTX+MIGFPrWQO1KLMiQfoTpcLnUwloN4brrVUHw==",
       "dev": true
     },
-    "@percy/agent": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@percy/agent/-/agent-0.21.0.tgz",
-      "integrity": "sha512-gcWqIJCF+1HKN3jSY0zqf9EOc2Vwxb0VUL6ratwbMce7msGPSge60sOaWs43/gfpT5JSAec9FUKRx0wO/rEY2g==",
+    "node_modules/@oclif/parser": {
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/@oclif/parser/-/parser-3.8.6.tgz",
+      "integrity": "sha512-tXb0NKgSgNxmf6baN6naK+CCwOueaFk93FG9u202U7mTBHUKsioOUlw1SG/iPi9aJM3WE4pHLXmty59pci0OEw==",
       "dev": true,
-      "requires": {
-        "@oclif/command": "1.5.19",
-        "@oclif/config": "^1",
-        "@oclif/plugin-help": "^2",
-        "@oclif/plugin-not-found": "^1.2",
-        "axios": "^0.19.0",
-        "body-parser": "^1.18.3",
-        "colors": "^1.3.2",
-        "cors": "^2.8.4",
-        "cosmiconfig": "^5.2.1",
-        "cross-spawn": "^6.0.5",
-        "deepmerge": "^4.0.0",
-        "express": "^4.16.3",
-        "follow-redirects": "1.9.0",
-        "generic-pool": "^3.7.1",
-        "globby": "^10.0.1",
-        "image-size": "^0.8.2",
-        "js-yaml": "^3.13.1",
-        "percy-client": "^3.2.0",
-        "puppeteer": "^2.0.0",
-        "retry-axios": "^1.0.1",
-        "which": "^2.0.1",
-        "winston": "^3.0.0"
-      },
       "dependencies": {
-        "@nodelib/fs.stat": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
-          "dev": true
-        },
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "caller-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-          "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-          "dev": true,
-          "requires": {
-            "caller-callsite": "^2.0.0"
-          }
-        },
-        "cosmiconfig": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-          "dev": true,
-          "requires": {
-            "import-fresh": "^2.0.0",
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.13.1",
-            "parse-json": "^4.0.0"
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "dir-glob": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-          "dev": true,
-          "requires": {
-            "path-type": "^4.0.0"
-          }
-        },
-        "fast-glob": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
-          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
-          "dev": true,
-          "requires": {
-            "@nodelib/fs.stat": "^2.0.2",
-            "@nodelib/fs.walk": "^1.2.3",
-            "glob-parent": "^5.1.0",
-            "merge2": "^1.3.0",
-            "micromatch": "^4.0.2"
-          },
-          "dependencies": {
-            "merge2": {
-              "version": "1.3.0",
-              "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-              "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
-              "dev": true
-            }
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz",
-          "integrity": "sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==",
-          "dev": true,
-          "requires": {
-            "debug": "^3.0.0"
-          }
-        },
-        "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "globby": {
-          "version": "10.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
-          "dev": true,
-          "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.0.3",
-            "glob": "^7.1.3",
-            "ignore": "^5.1.1",
-            "merge2": "^1.2.3",
-            "slash": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
-        },
-        "import-fresh": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-          "dev": true,
-          "requires": {
-            "caller-path": "^2.0.0",
-            "resolve-from": "^3.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.0.5"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
+        "@oclif/errors": "^1.2.2",
+        "@oclif/linewrap": "^1.0.0",
+        "chalk": "^4.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
-    "@percy/script": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@percy/script/-/script-1.0.3.tgz",
-      "integrity": "sha512-FNbHLudxpXPEY8qBUqBLjCGYV6rgtd/js0/4vx4YeG+bbzKLC/nyTKK9U1nQ366G1jzDYh29kMCSiNTHsQ+qHQ==",
+    "node_modules/@oclif/parser/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
-      "requires": {
-        "@percy/agent": "~0"
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "@rollup/plugin-node-resolve": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
-      "integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
+    "node_modules/@oclif/parser/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
-      "requires": {
-        "@rollup/pluginutils": "^3.0.8",
-        "@types/resolve": "0.0.8",
-        "builtin-modules": "^3.1.0",
-        "is-module": "^1.0.0",
-        "resolve": "^1.14.2"
-      },
       "dependencies": {
-        "resolve": {
-          "version": "1.17.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        }
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "@rollup/plugin-replace": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz",
-      "integrity": "sha512-XPmVXZ7IlaoWaJLkSCDaa0Y6uVo5XQYHhiMFzOd5qSv5rE+t/UJToPIOE56flKIxBFQI27ONsxb7dqHnwSsjKQ==",
+    "node_modules/@oclif/parser/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
-      "requires": {
-        "@rollup/pluginutils": "^3.0.8",
-        "magic-string": "^0.25.5"
-      },
       "dependencies": {
-        "magic-string": {
-          "version": "0.25.7",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
-          "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-          "dev": true,
-          "requires": {
-            "sourcemap-codec": "^1.4.4"
-          }
-        }
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
       }
     },
-    "@rollup/pluginutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
-      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+    "node_modules/@oclif/parser/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@oclif/parser/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@oclif/parser/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
-      "requires": {
-        "@types/estree": "0.0.39",
-        "estree-walker": "^1.0.1",
-        "picomatch": "^2.2.2"
-      },
       "dependencies": {
-        "estree-walker": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
-          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
-          "dev": true
-        },
-        "picomatch": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-          "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-          "dev": true
-        }
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@sindresorhus/is": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
-      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
-      "dev": true
+    "node_modules/@oclif/plugin-help": {
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.2.10.tgz",
+      "integrity": "sha512-U3Jk01MTnqnd9druulNSn6nTjPEE1Rr6PWhD4rJ6Z+NjLFTKhp3S1kutWDXJQd7CQ6m8tHd1AYgsIjiR+36bSw==",
+      "dev": true,
+      "dependencies": {
+        "@oclif/command": "^1.8.6",
+        "@oclif/config": "^1.18.1",
+        "@oclif/errors": "^1.3.5",
+        "chalk": "^4.1.2",
+        "indent-string": "^4.0.0",
+        "lodash": "^4.17.21",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
     },
-    "@surma/rollup-plugin-off-main-thread": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.1.tgz",
-      "integrity": "sha512-ZPBWYQDdO4JZiTmTP3DABsHhIPA7bEJk9Znk7tZsrbPGanoGo8YxMv//WLx5Cvb+lRgS42+6yiOIYYHCKDmkpQ==",
+    "node_modules/@oclif/plugin-help/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
-      "requires": {
-        "ejs": "^2.6.1",
-        "magic-string": "^0.25.0"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@szmarczak/http-timer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
-      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+    "node_modules/@oclif/plugin-help/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
-      "requires": {
-        "defer-to-connect": "^1.0.1"
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "@types/babel-types": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.7.tgz",
-      "integrity": "sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==",
-      "dev": true
+    "node_modules/@oclif/plugin-help/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
     },
-    "@types/babylon": {
-      "version": "6.16.5",
-      "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.5.tgz",
-      "integrity": "sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==",
+    "node_modules/@oclif/plugin-help/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
-      "requires": {
-        "@types/babel-types": "*"
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
       }
     },
-    "@types/color-name": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+    "node_modules/@oclif/plugin-help/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "@types/eslint-visitor-keys": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
-      "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==",
-      "dev": true
+    "node_modules/@oclif/plugin-help/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "@types/estree": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
-      "dev": true
+    "node_modules/@oclif/plugin-help/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
-      "dev": true
+    "node_modules/@oclif/plugin-help/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "@types/glob": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+    "node_modules/@oclif/plugin-help/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
       "dev": true,
-      "requires": {
-        "@types/events": "*",
-        "@types/minimatch": "*",
-        "@types/node": "*"
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "@types/is-windows": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/is-windows/-/is-windows-1.0.0.tgz",
-      "integrity": "sha512-tJ1rq04tGKuIJoWIH0Gyuwv4RQ3+tIu7wQrC0MV47raQ44kIzXSSFKfrxFUOWVRvesoF7mrTqigXmqoZJsXwTg==",
-      "dev": true
+    "node_modules/@octokit/auth-token": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.5.0.tgz",
+      "integrity": "sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.0.3"
+      }
     },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==",
-      "dev": true
+    "node_modules/@octokit/core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.5.1.tgz",
+      "integrity": "sha512-omncwpLVxMP+GLpLPgeGJBF6IWJFjXDS5flY5VbppePYX9XehevbDykRH9PdCdvqt9TS5AOTiDide7h0qrkHjw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^2.4.4",
+        "@octokit/graphql": "^4.5.8",
+        "@octokit/request": "^5.6.0",
+        "@octokit/request-error": "^2.0.5",
+        "@octokit/types": "^6.0.3",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      }
     },
-    "@types/json-schema": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
-      "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
-      "dev": true
+    "node_modules/@octokit/endpoint": {
+      "version": "6.0.12",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
+      "integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.0.3",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      }
     },
-    "@types/mime-types": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
-      "dev": true
+    "node_modules/@octokit/endpoint/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "@types/minimatch": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-      "dev": true
+    "node_modules/@octokit/graphql": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.8.0.tgz",
+      "integrity": "sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^5.6.0",
+        "@octokit/types": "^6.0.3",
+        "universal-user-agent": "^6.0.0"
+      }
     },
-    "@types/minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=",
+    "node_modules/@octokit/openapi-types": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
+      "integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
       "dev": true
     },
-    "@types/node": {
-      "version": "13.13.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.9.tgz",
-      "integrity": "sha512-EPZBIGed5gNnfWCiwEIwTE2Jdg4813odnG8iNPMQGrqVxrI+wL68SPtPeCX+ZxGBaA6pKAVc6jaKgP/Q0QzfdQ==",
-      "dev": true
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz",
+      "integrity": "sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.34.0"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=2"
+      }
     },
-    "@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz",
+      "integrity": "sha512-uJjMTkN1KaOIgNtUPMtIXDOjx6dGYysdIFhgA52x4xSadQCz3b/zJexvITDVpANnfKPW/+E0xkOvLntqMYpviA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.34.0",
+        "deprecation": "^2.3.1"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
     },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+    "node_modules/@octokit/request": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz",
+      "integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^6.0.1",
+        "@octokit/request-error": "^2.1.0",
+        "@octokit/types": "^6.16.1",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      }
     },
-    "@types/q": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
-      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
-      "dev": true
+    "node_modules/@octokit/request-error": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.1.0.tgz",
+      "integrity": "sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.0.3",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      }
     },
-    "@types/resolve": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
-      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+    "node_modules/@octokit/request/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
       "dev": true,
-      "requires": {
-        "@types/node": "*"
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "@types/unist": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
-      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
-      "dev": true
+    "node_modules/@octokit/types": {
+      "version": "6.34.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
+      "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^11.2.0"
+      }
     },
-    "@typescript-eslint/eslint-plugin": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz",
-      "integrity": "sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==",
+    "node_modules/@opentelemetry/api": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.6.0.tgz",
+      "integrity": "sha512-OWlrQAnWn9577PhVgqjUvMr1pg57Bc4jv0iL4w0PRuOSRvq67rvHW9Ie/dZVMvCzhSCB+UxhcY/PmCmFj33Q+g==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.3.1.tgz",
+      "integrity": "sha512-wU5J8rUoo32oSef/rFpOT1HIjLjAv3qIDHkw1QIhODV3OpAVHi5oVzlouozg9obUmZKtbZ0qUe/m7FP0y0yBzA==",
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/@percy/cli": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.0.0-beta.71.tgz",
+      "integrity": "sha512-G2ySjDZ29Bl0RwfqSJUPyRHjsJ+DEjLZDcdFaUjZ99/OwhplbuIMI0hR0UcxpV1lOtvYTpCSRX5z4y51kzJV7w==",
+      "deprecated": "Beta versions of @percy/cli are deprecated. Please update to the latest stable version to ensure compatibility",
       "dev": true,
-      "requires": {
-        "@typescript-eslint/experimental-utils": "2.31.0",
-        "functional-red-black-tree": "^1.0.1",
-        "regexpp": "^3.0.0",
-        "tsutils": "^3.17.1"
+      "dependencies": {
+        "@oclif/plugin-help": "^3.2.0",
+        "@percy/cli-build": "1.0.0-beta.71",
+        "@percy/cli-config": "1.0.0-beta.71",
+        "@percy/cli-exec": "1.0.0-beta.71",
+        "@percy/cli-snapshot": "1.0.0-beta.71",
+        "@percy/cli-upload": "1.0.0-beta.71"
+      },
+      "bin": {
+        "percy": "bin/run"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@typescript-eslint/experimental-utils": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz",
-      "integrity": "sha512-MI6IWkutLYQYTQgZ48IVnRXmLR/0Q6oAyJgiOror74arUMh7EWjJkADfirZhRsUMHeLJ85U2iySDwHTSnNi9vA==",
+    "node_modules/@percy/cli-build": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.0.0-beta.71.tgz",
+      "integrity": "sha512-8hnDIvpqGtKzMqTKBRkcSh19dfkxRkMcwEq+HR+LQ1wfEO9EYBWhviVNECrVGRNS0DV3UmUIEtpYtkN+FHLkUA==",
       "dev": true,
-      "requires": {
-        "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.31.0",
-        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^2.0.0"
+      "dependencies": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/env": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@typescript-eslint/parser": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.31.0.tgz",
-      "integrity": "sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==",
+    "node_modules/@percy/cli-command": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.0.0-beta.71.tgz",
+      "integrity": "sha512-ihxOoujChj2sc2T7CXc6QShPLxLfYr4LvCjJFIhve/oeZZGX+hfWhThxZVGb/KzWpt6BE4q2dXsruLP48oxF1A==",
       "dev": true,
-      "requires": {
-        "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.31.0",
-        "@typescript-eslint/typescript-estree": "2.31.0",
-        "eslint-visitor-keys": "^1.1.0"
+      "dependencies": {
+        "@oclif/command": "^1.8.0",
+        "@oclif/config": "^1.17.0",
+        "@oclif/plugin-help": "^3.2.0",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
       },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@percy/cli-config": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.0.0-beta.71.tgz",
+      "integrity": "sha512-r2VNzlfMj4qinNlFbh4NDddVmJq4jI9WNngwGmYf1JAc9b6YipuGjtznyvGV3L3ZlCmS9vLJlXjcNIB39OWzpw==",
+      "dev": true,
       "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
-          "dev": true
-        }
+        "@oclif/command": "^1.8.0",
+        "@oclif/config": "^1.17.0",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@typescript-eslint/typescript-estree": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz",
-      "integrity": "sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==",
+    "node_modules/@percy/cli-exec": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.0.0-beta.71.tgz",
+      "integrity": "sha512-4kvHsDzkY5FejpINXwHf7QsjZM8UaJ62oW+5nccvraJWAwxC5D4BmKmraGXaYI+2nnua+/PlNCfY/y3FTvYceg==",
       "dev": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "eslint-visitor-keys": "^1.1.0",
-        "glob": "^7.1.6",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.15",
-        "semver": "^6.3.0",
-        "tsutils": "^3.17.1"
+      "dependencies": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/core": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "cross-spawn": "^7.0.3",
+        "which": "^2.0.2"
       },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@percy/cli-snapshot": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.0.0-beta.71.tgz",
+      "integrity": "sha512-5uu70EJqOzv3ekdJ4WJL758cXBwJqzKACSz194PKU3FVJ+OvaWfXJkJouVUoSR9r557pgynh6UzBOJOYMePFnQ==",
+      "dev": true,
       "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
-          "dev": true
-        },
-        "glob": {
-          "version": "7.1.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/core": "1.0.0-beta.71",
+        "@percy/dom": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "globby": "^11.0.4",
+        "path-to-regexp": "^6.2.0",
+        "picomatch": "^2.3.0",
+        "serve-handler": "^6.1.3",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "@webcomponents/webcomponentsjs": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.3.0.tgz",
-      "integrity": "sha512-sR6FOrNnnncRuoJDqq9QxtRsJMbIvASw4vnJwIYKVlKO3AMc+NAr/bIQNnUiTTE9pBDTJkFpVaUdjJaRdsjmyA=="
+    "node_modules/@percy/cli-snapshot/node_modules/globby": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "a-sync-waterfall": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
+    "node_modules/@percy/cli-snapshot/node_modules/path-to-regexp": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
+      "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==",
       "dev": true
     },
-    "abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
-    "accepts": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
-      "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
-      "requires": {
-        "mime-types": "~2.1.18",
-        "negotiator": "0.6.1"
+    "node_modules/@percy/cli-snapshot/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
       }
     },
-    "acorn": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-      "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
-      "dev": true
-    },
-    "acorn-globals": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
-      "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
+    "node_modules/@percy/cli-upload": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.0.0-beta.71.tgz",
+      "integrity": "sha512-R283y1iFBFonCOBi4Q3YQlqIkUKs5flJJb3XlrbHlDLVoWVMQxeg9NjHtyNcIneY6zCIj61QS4sYJQr00CFyig==",
       "dev": true,
-      "requires": {
-        "acorn": "^4.0.4"
-      },
       "dependencies": {
-        "acorn": {
-          "version": "4.0.13",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-          "dev": true
-        }
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "globby": "^11.0.4",
+        "image-size": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "acorn-jsx": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
-      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
-      "dev": true
-    },
-    "after": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
-      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=",
-      "dev": true
-    },
-    "agent-base": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
-      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
-      "dev": true
+    "node_modules/@percy/cli-upload/node_modules/globby": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "ajv": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-      "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-      "requires": {
-        "fast-deep-equal": "^2.0.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+    "node_modules/@percy/cli-upload/node_modules/image-size": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz",
+      "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==",
+      "dev": true,
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "ajv-keywords": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
-      "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=",
-      "dev": true
+    "node_modules/@percy/cli-upload/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "algoliasearch": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.1.0.tgz",
-      "integrity": "sha512-0lzjvqQZkJYPuv7LyQauMIMCFFzJWfUf3m9KuHjmFubwbnTDa87KCMXKouMJ0kWXXt6nTLNt0+2YRREOWx2PHw==",
-      "requires": {
-        "@algolia/cache-browser-local-storage": "4.1.0",
-        "@algolia/cache-common": "4.1.0",
-        "@algolia/cache-in-memory": "4.1.0",
-        "@algolia/client-account": "4.1.0",
-        "@algolia/client-analytics": "4.1.0",
-        "@algolia/client-common": "4.1.0",
-        "@algolia/client-recommendation": "4.1.0",
-        "@algolia/client-search": "4.1.0",
-        "@algolia/logger-common": "4.1.0",
-        "@algolia/logger-console": "4.1.0",
-        "@algolia/requester-browser-xhr": "4.1.0",
-        "@algolia/requester-common": "4.1.0",
-        "@algolia/requester-node-http": "4.1.0",
-        "@algolia/transporter": "4.1.0"
-      }
-    },
-    "align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+    "node_modules/@percy/client": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.0.0-beta.71.tgz",
+      "integrity": "sha512-aOymDoLqLSd3Cwa5s3BucFvskoumcORxEszXFYrBEitotc9EyWdmbViupTOodHj+SGJmW9cdBopCo4CzG3JjGg==",
       "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2",
-        "longest": "^1.0.1",
-        "repeat-string": "^1.5.2"
-      },
       "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
+        "@percy/env": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-      "dev": true
-    },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "optional": true
+    "node_modules/@percy/config": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.0.0-beta.71.tgz",
+      "integrity": "sha512-LA7lokLPGnqdhF2VMJrntXbN+s1amjjAHbvgPH7wAoTczcHoTu4ulmDSkwcY90pj1KdD++ahN1O3SEHtrmdy0Q==",
+      "dev": true,
+      "dependencies": {
+        "@percy/logger": "1.0.0-beta.71",
+        "ajv": "^8.6.2",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "ansi-align": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
-      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+    "node_modules/@percy/config/node_modules/ajv": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+      "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
       "dev": true,
-      "requires": {
-        "string-width": "^3.0.0"
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
       },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@percy/config/node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        }
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "ansi-colors": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
-      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
-      "dev": true
+    "node_modules/@percy/config/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "ansi-escapes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+    "node_modules/@percy/config/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
-    "ansi-gray": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
-      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
+    "node_modules/@percy/config/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "dev": true,
-      "requires": {
-        "ansi-wrap": "0.1.0"
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
-    },
-    "ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-    },
-    "ansi-wrap": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
-      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
-      "dev": true
-    },
-    "ansicolors": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
-      "integrity": "sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=",
-      "dev": true
+    "node_modules/@percy/config/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
     },
-    "any-promise": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-      "integrity": "sha1-gwtoCqflbzNFHUsEnzvYBESY7ic=",
-      "dev": true
+    "node_modules/@percy/core": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.0.0-beta.71.tgz",
+      "integrity": "sha512-mYx4t3+9p+mZDb5aSoTJHDlky/0lATPp7Da1Hc07mN1iHHvrKBkQKJRqqEkQmq24hhWDUl9tOKR7PWQkgKzSlw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/dom": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "rimraf": "^3.0.2",
+        "ws": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "anymatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+    "node_modules/@percy/core/node_modules/ws": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
+      "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
       "dev": true,
-      "requires": {
-        "micromatch": "^3.1.4",
-        "normalize-path": "^2.1.1"
+      "engines": {
+        "node": ">=10.0.0"
       },
-      "dependencies": {
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
-          }
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
         },
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-          "dev": true,
-          "requires": {
-            "remove-trailing-separator": "^1.0.1"
-          }
+        "utf-8-validate": {
+          "optional": true
         }
       }
     },
-    "append-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
-      "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=",
+    "node_modules/@percy/dom": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.0.0-beta.71.tgz",
+      "integrity": "sha512-ZIpQ5ExjGpliOny0w5vgEd1eG0noCtIP+nspjTPxJr3dmNGt/nR19RBE3pATc9RpLbtWOP6+Qyo8hFjZb+elrA==",
+      "dev": true
+    },
+    "node_modules/@percy/env": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.0.0-beta.71.tgz",
+      "integrity": "sha512-DPiCL2xuAdaTghziP2XtmaSMp1t3Mb0oo3yEg2HOpTjaPqu/tX9LjI+cJOs2jKf/jIwC3ris3agcafceXiGWZw==",
       "dev": true,
-      "requires": {
-        "buffer-equal": "^1.0.0"
+      "engines": {
+        "node": ">=12"
       }
     },
-    "aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-      "optional": true
-    },
-    "arch": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz",
-      "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
-      "dev": true
+    "node_modules/@percy/logger": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.0.0-beta.71.tgz",
+      "integrity": "sha512-09MgfGbvSFgvmQ1g0AkPnRwfkJvXluj7TLVlcgBsKEdo0cKfmctvXUtRBgiueqJFSb7jF+JwzE5i17bHnLy0ng==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "archive-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
-      "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
+    "node_modules/@percy/puppeteer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@percy/puppeteer/-/puppeteer-2.0.0.tgz",
+      "integrity": "sha512-AAErUA1NEELBmOIscHBJB064+6x7N2ZIA9EisBfB6ff1HJK58t2x7VGRNQjGsXvq/RP0wrLzmUY3uSSb2gQhVQ==",
       "dev": true,
-      "requires": {
-        "file-type": "^4.2.0"
-      },
       "dependencies": {
-        "file-type": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
-          "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
-          "dev": true
-        }
+        "@percy/sdk-utils": "^1.0.0-beta.32"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "puppeteer": ">=1"
       }
     },
-    "archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
-      "dev": true
+    "node_modules/@percy/sdk-utils": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.0.0-beta.71.tgz",
+      "integrity": "sha512-PV576xwd7mBeCQjEOHT6ij1EpInEmXhz/JN3Vi2gGhDpdcjGVKkfYXXDDDz4CMsYcDrl4EtPvNtWCaGxsivzCA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/logger": "1.0.0-beta.71"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "optional": true,
-      "requires": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
+      "engines": {
+        "node": ">=14"
       }
     },
-    "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "requires": {
-        "sprintf-js": "~1.0.2"
+    "node_modules/@pnpm/config.env-replace": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
+      "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==",
+      "engines": {
+        "node": ">=12.22.0"
       }
     },
-    "arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-      "dev": true
+    "node_modules/@pnpm/network.ca-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz",
+      "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==",
+      "dependencies": {
+        "graceful-fs": "4.2.10"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      }
     },
-    "arr-filter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/arr-filter/-/arr-filter-1.1.2.tgz",
-      "integrity": "sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=",
-      "dev": true,
-      "requires": {
-        "make-iterator": "^1.0.0"
+    "node_modules/@pnpm/npm-conf": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz",
+      "integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==",
+      "dependencies": {
+        "@pnpm/config.env-replace": "^1.1.0",
+        "@pnpm/network.ca-file": "^1.0.1",
+        "config-chain": "^1.1.11"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "arr-flatten": {
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
     },
-    "arr-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/arr-map/-/arr-map-2.0.2.tgz",
-      "integrity": "sha1-Onc0X/wc814qkYJWAfnljy4kysQ=",
-      "dev": true,
-      "requires": {
-        "make-iterator": "^1.0.0"
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
       }
     },
-    "arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
-      "dev": true
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
     },
-    "array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
     },
-    "array-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
-      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
-      "dev": true
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
     },
-    "array-filter": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=",
-      "dev": true
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
     },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
     },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.0.1.tgz",
+      "integrity": "sha512-EA+g22lbNJ8p5kuZJUYyhhDK7WgJckW5g4pNN7n4mAFUM96VuwUnNT3xr2Db2iCZPI1pJPbGyfT5mS9T1dHfMg==",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.1",
+        "glob": "^7.1.6",
+        "is-reference": "^1.2.1",
+        "magic-string": "^0.25.7",
+        "resolve": "^1.17.0"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.38.3"
+      }
     },
-    "array-initial": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/array-initial/-/array-initial-1.1.0.tgz",
-      "integrity": "sha1-L6dLJnOTccOUe9enrcc74zSz15U=",
-      "dev": true,
-      "requires": {
-        "array-slice": "^1.0.0",
-        "is-number": "^4.0.0"
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz",
+      "integrity": "sha512-BdxNk+LtmElRo5d06MGY4zoepyrXX1tkzX2hrnPEZ53k78GuOMWLqmJDGIIOPwVRIFZrLQOo+Yr6KtCuLIA0AQ==",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
       },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.42.0"
+      }
+    },
+    "node_modules/@rollup/plugin-virtual": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.3.tgz",
+      "integrity": "sha512-pw6ziJcyjZtntQ//bkad9qXaBx665SgEL8C8KI5wO8G5iU5MPxvdWrQyVaAvjojGm9tJoS8M9Z/EEepbqieYmw==",
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
       "dependencies": {
-        "is-number": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
-          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
-          "dev": true
-        }
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
       }
     },
-    "array-last": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz",
-      "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==",
+    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
       "dev": true,
-      "requires": {
-        "is-number": "^4.0.0"
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sindresorhus/slugify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
+      "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^0.1.1",
+        "escape-string-regexp": "^4.0.0"
       },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/slugify/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
+      "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
       "dependencies": {
-        "is-number": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
-          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
-          "dev": true
-        }
+        "escape-string-regexp": "^2.0.0",
+        "lodash.deburr": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "array-map": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
-      "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=",
-      "dev": true
+    "node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "array-reduce": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=",
-      "dev": true
+    "node_modules/@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
     },
-    "array-slice": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
-      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
-      "dev": true
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
+    "node_modules/@swc/html": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html/-/html-0.0.18.tgz",
+      "integrity": "sha512-EiA134Oa5sneQqMfsWcEcDaEVX1Grtb82S6nUqPUI/t7LQzg4lO7Wcp3Fqy2UwpVsL4otWM03gD65qEr5ZPf2A==",
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "@swc/html-android-arm-eabi": "0.0.18",
+        "@swc/html-android-arm64": "0.0.18",
+        "@swc/html-darwin-arm64": "0.0.18",
+        "@swc/html-darwin-x64": "0.0.18",
+        "@swc/html-freebsd-x64": "0.0.18",
+        "@swc/html-linux-arm-gnueabihf": "0.0.18",
+        "@swc/html-linux-arm64-gnu": "0.0.18",
+        "@swc/html-linux-arm64-musl": "0.0.18",
+        "@swc/html-linux-x64-gnu": "0.0.18",
+        "@swc/html-linux-x64-musl": "0.0.18",
+        "@swc/html-win32-arm64-msvc": "0.0.18",
+        "@swc/html-win32-ia32-msvc": "0.0.18",
+        "@swc/html-win32-x64-msvc": "0.0.18"
+      }
+    },
+    "node_modules/@swc/html-android-arm-eabi": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-android-arm-eabi/-/html-android-arm-eabi-0.0.18.tgz",
+      "integrity": "sha512-2/76+aJnzgoE2U+gaKfj/2Qbkx7OHTJyfP7qFdfvMb6zQsc6gQMqp3KDPXK3wmt4aPTifryl/QzIBAYFVyGXvQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-android-arm64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-android-arm64/-/html-android-arm64-0.0.18.tgz",
+      "integrity": "sha512-7bVCnuJvqPUghLaBgWuZUG4fayR8UZCcnBb9PAktL2a/r97KlKgHOwN7Z9T5d7PdXu3af3x3jN7c2gSKe1Zpmw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-darwin-arm64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-0.0.18.tgz",
+      "integrity": "sha512-fBHsO5+qfxvKulFuEIpoo32UOPN1N3478lRfcimENp9Cu0wWe4coLZVGKMaDdRJpMR0U8DEzeybrocpns89R2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-darwin-x64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-x64/-/html-darwin-x64-0.0.18.tgz",
+      "integrity": "sha512-5hFbhf1ghUW1uZq2yHMp9GewmSf/1IAH5x7MlC+LhuBjEFDlTyY9ax2fK5YVwZwbMJh4LfgtN7ydFVUfNvHB1g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-freebsd-x64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-freebsd-x64/-/html-freebsd-x64-0.0.18.tgz",
+      "integrity": "sha512-AHBEiIqyy4FD2yUxtfPG5yopXh7tDCKV1OSXavdaAqikx8EwG3ok85WsgbPPBAfZMttHkp/mvYmxE2MZE1dhDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm-gnueabihf": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm-gnueabihf/-/html-linux-arm-gnueabihf-0.0.18.tgz",
+      "integrity": "sha512-en0EokMYRY6kB/BqGDwGY56xe7bPbN+I6VhHho1FTy0UPuh8FhYDpev/J7qgmwVlh6Ch27SDzGF8ly0tXbjQWA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm64-gnu": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-0.0.18.tgz",
+      "integrity": "sha512-gXsdpv6RVEhZYWj4CV4t9D+DWQ4iPx1fFt2ICxtvbo6dkuwNOszr/CoF+K+YwoE2DGUInmD8o4VT915n92NABQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-arm64-musl": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-musl/-/html-linux-arm64-musl-0.0.18.tgz",
+      "integrity": "sha512-im/vFj2OOG+yqNfn4AMxOolo3b9L3QfJY0sJ9BOFqXDGzQjj6DYfNV03HpRHtP8+LKlDAcbmaH9K84PN1U3xZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-x64-gnu": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-0.0.18.tgz",
+      "integrity": "sha512-OCpMpFmeJTWFaFo6BkcTfHU5kx1AIU/Ad9g3LpzFyr5a/oBb1UCUVuV2Y6kUOkj93JmepsZnRkb9cr43cR6Hrg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-linux-x64-musl": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-musl/-/html-linux-x64-musl-0.0.18.tgz",
+      "integrity": "sha512-D0aiWk6yXQSk05ZH2gKrclT5VA5iAQfKaujmzQr+MZ+iSdMpCp+BHNi4xPuOCEnAbQ38qv6PfSY+zuszjC/utA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-arm64-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-arm64-msvc/-/html-win32-arm64-msvc-0.0.18.tgz",
+      "integrity": "sha512-8dE0Q8g5pIP+u8aFZmKZzud7/JH1evcRLLEktdICDj5cO67eC8yTfxpQ8NwyAmf6VFVaOaCELSjX2RaYYsEViw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-ia32-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-ia32-msvc/-/html-win32-ia32-msvc-0.0.18.tgz",
+      "integrity": "sha512-HxuBUmDc7xuTn7JD+VU7LfxP5X1XzgBbskomb8/9yoZglqpPNT200DIf8/JbP9Kv692VP5ACNIpJ6jpCfbF1kA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/html-win32-x64-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-x64-msvc/-/html-win32-x64-msvc-0.0.18.tgz",
+      "integrity": "sha512-pZ93lqOtFdalit3EGinbbmFdT+sACo+QG6uiVsAU6tynjkJjeJxKq3TC6D3m8QQDRnEe8BViTwoEAyZ00ouuhA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
     },
-    "array-sort": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-1.0.0.tgz",
-      "integrity": "sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==",
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
       "dev": true,
-      "requires": {
-        "default-compare": "^1.0.0",
-        "get-value": "^2.0.6",
-        "kind-of": "^5.0.2"
-      },
       "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
-        }
+        "defer-to-connect": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
-      "dev": true,
-      "requires": {
-        "array-uniq": "^1.0.1"
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
     },
-    "array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+    "node_modules/@types/chai": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
+      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==",
       "dev": true
     },
-    "arraybuffer.slice": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
-      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==",
-      "dev": true
+    "node_modules/@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
     },
-    "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-      "dev": true
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+    "node_modules/@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
     },
-    "asn1": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "requires": {
-        "safer-buffer": "~2.1.0"
+    "node_modules/@types/duplexify": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@types/duplexify/-/duplexify-3.6.2.tgz",
+      "integrity": "sha512-2/0R4riyD/OS6GNJLIhwRaj+8ZbxHUZl3I0a3PHwH7zhZEEAACUWjzaBrY1qVWckueZ5pouDRP0UxX6P8Hzfww==",
+      "dependencies": {
+        "@types/node": "*"
       }
     },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+    "node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
-    "assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+    "node_modules/@types/expect": {
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/@types/expect/-/expect-1.20.4.tgz",
+      "integrity": "sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==",
       "dev": true
     },
-    "astral-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+    "node_modules/@types/glob": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
+      "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==",
+      "dependencies": {
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/glob-stream": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@types/glob-stream/-/glob-stream-6.1.1.tgz",
+      "integrity": "sha512-AGOUTsTdbPkRS0qDeyeS+6KypmfVpbT5j23SN8UPG63qjKXNKjXn6V9wZUr8Fin0m9l8oGYaPK8b2WUMF8xI1A==",
+      "dev": true,
+      "dependencies": {
+        "@types/glob": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/grecaptcha": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/grecaptcha/-/grecaptcha-3.0.3.tgz",
+      "integrity": "sha512-osLqWRzsRsDtCfiCl1lbtUY8ANGCQsG/hhht3E7g1pVT7fD5SXgAg53S2grKjjSkXcm0fvMDbhUeL9NyAJvzGQ==",
       "dev": true
     },
-    "async": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+    "node_modules/@types/gtag.js": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz",
+      "integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==",
       "dev": true
     },
-    "async-done": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.3.1.tgz",
-      "integrity": "sha512-R1BaUeJ4PMoLNJuk+0tLJgjmEqVsdN118+Z8O+alhnQDQgy0kmD5Mqi0DNEmMx2LM0Ed5yekKu+ZXYvIHceicg==",
+    "node_modules/@types/gulp": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/gulp/-/gulp-4.0.9.tgz",
+      "integrity": "sha512-zzT+wfQ8uwoXjDhRK9Zkmmk09/fbLLmN/yDHFizJiEKIve85qutOnXcP/TM2sKPBTU+Jc16vfPbOMkORMUBN7Q==",
       "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.2",
-        "process-nextick-args": "^1.0.7",
-        "stream-exhaust": "^1.0.1"
-      },
       "dependencies": {
-        "process-nextick-args": {
-          "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
-          "dev": true
-        }
+        "@types/undertaker": "*",
+        "@types/vinyl-fs": "*",
+        "chokidar": "^3.3.1"
       }
     },
-    "async-each": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.2.tgz",
-      "integrity": "sha512-6xrbvN0MOBKSJDdonmSSz2OwFSgxRaVtBDes26mj9KIGtDo+g9xosFRSC+i1gQh2oAN/tQ62AI/pGZGQjVOiRg==",
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
       "dev": true
     },
-    "async-each-series": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
-      "integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI=",
-      "dev": true
+    "node_modules/@types/json-schema": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
+      "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg=="
     },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "optional": true
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA=="
     },
-    "async-limiter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
-      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
-      "dev": true
+    "node_modules/@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
-    "async-settle": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz",
-      "integrity": "sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=",
-      "dev": true,
-      "requires": {
-        "async-done": "^1.2.2"
+    "node_modules/@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
       }
     },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    "node_modules/@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA=="
     },
-    "atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+    "node_modules/@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
+    },
+    "node_modules/@types/minimist": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
       "dev": true
     },
-    "attach-ware": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/attach-ware/-/attach-ware-2.0.4.tgz",
-      "integrity": "sha512-uerK4MkmtEYV6X3mSSHM2QSWXGBPdPReYWa+AtELkIBilOSnPiudKFWOi0PWDyapsQqBv9Q4cyCCXXvIWclMpw==",
+    "node_modules/@types/mocha": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-9.0.0.tgz",
+      "integrity": "sha512-scN0hAWyLVAvLR9AyW7HoFF5sJZglyBsbPuHO4fv7JRvfmPBMfp1ozWqOf/e4wwPNxezBZXRfWzMb6iFLgEVRA==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "14.17.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.5.tgz",
+      "integrity": "sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA=="
+    },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "node_modules/@types/nunjucks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nunjucks/-/nunjucks-3.2.0.tgz",
+      "integrity": "sha512-1FM36Hm3EdidJmWlZZafkg/kZME0UZ/0vQ46JE8R7R0JqQafah0r+d4i6d/MJg5DnKxEeAOAeifEVkzo7fEvGg==",
+      "dev": true
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "node_modules/@types/parse5": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-2.2.34.tgz",
+      "integrity": "sha1-44cKEOgnNacg9i1x3NGDunjvOp0=",
       "dev": true,
-      "requires": {
-        "unherit": "^1.0.0"
+      "dependencies": {
+        "@types/node": "*"
       }
     },
-    "autoprefixer": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
-      "integrity": "sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.6.3",
-        "caniuse-lite": "^1.0.30000980",
-        "chalk": "^2.4.2",
-        "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "postcss": "^7.0.17",
-        "postcss-value-parser": "^4.0.0"
-      },
+    "node_modules/@types/q": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
+      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
+    },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
+      "integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==",
+      "dev": true
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
       "dependencies": {
-        "caniuse-lite": {
-          "version": "1.0.30000989",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz",
-          "integrity": "sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.18",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
-          "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-          "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "@types/node": "*"
       }
     },
-    "aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+    "node_modules/@types/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-F3OznnSLAUxFrCEu/L5PY8+ny8DtcFRjx7fZZ9bycvXRi3KPTRS9HOitGZwvPg0juRhXFWIeKX58cnX5YqLohQ==",
+      "dependencies": {
+        "@types/glob": "*",
+        "@types/node": "*"
+      }
     },
-    "aws4": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
+    "node_modules/@types/triple-beam": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.3.tgz",
+      "integrity": "sha512-6tOUG+nVHn0cJbVp25JFayS5UE6+xlbcNF9Lo9mU7U0zk3zeUShZied4YEQZjy1JBF043FSkdXw8YkUJuVtB5g=="
     },
-    "axios": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
-      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "node_modules/@types/undertaker": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/undertaker/-/undertaker-1.2.7.tgz",
+      "integrity": "sha512-xuY7nBwo1zSRoY2aitp/HArHfTulFAKql2Fr4b4mWbBBP+F50n7Jm6nwISTTMaDk2xvl92O10TTejVF0Q9mInw==",
       "dev": true,
-      "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
-      },
       "dependencies": {
-        "is-buffer": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
-          "dev": true
-        }
+        "@types/node": "*",
+        "@types/undertaker-registry": "*",
+        "async-done": "~1.3.2"
       }
     },
-    "babel-code-frame": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
-      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+    "node_modules/@types/undertaker-registry": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
+      "integrity": "sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==",
+      "dev": true
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.5.tgz",
+      "integrity": "sha512-wnra4Vw9dopnuybR6HBywJ/URYpYrKLoepBTEtgfJup8Ahoi2zJECPP2cwiXp7btTvOT2CULv87aQRA4eZSP6g==",
+      "dev": true
+    },
+    "node_modules/@types/vinyl": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.5.tgz",
+      "integrity": "sha512-1m6uReH8R/RuLVQGvTT/4LlWq67jZEUxp+FBHt0hYv2BT7TUwFbKI0wa7JZVEU/XtlcnX1QcTuZ36es4rGj7jg==",
       "dev": true,
-      "requires": {
-        "chalk": "^1.1.3",
-        "esutils": "^2.0.2",
-        "js-tokens": "^3.0.2"
-      },
       "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "js-tokens": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-          "dev": true
-        }
+        "@types/expect": "^1.20.4",
+        "@types/node": "*"
       }
     },
-    "babel-eslint": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz",
-      "integrity": "sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
+    "node_modules/@types/vinyl-fs": {
+      "version": "2.4.12",
+      "resolved": "https://registry.npmjs.org/@types/vinyl-fs/-/vinyl-fs-2.4.12.tgz",
+      "integrity": "sha512-LgBpYIWuuGsihnlF+OOWWz4ovwCYlT03gd3DuLwex50cYZLmX3yrW+sFF9ndtmh7zcZpS6Ri47PrIu+fV+sbXw==",
+      "dev": true,
       "dependencies": {
-        "resolve": {
-          "version": "1.12.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
-          "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        }
+        "@types/glob-stream": "*",
+        "@types/node": "*",
+        "@types/vinyl": "*"
       }
     },
-    "babel-extract-comments": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
-      "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==",
+    "node_modules/@types/yauzl": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
+      "integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
       "dev": true,
-      "requires": {
-        "babylon": "^6.18.0"
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
       }
     },
-    "babel-generator": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
-      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.4.tgz",
+      "integrity": "sha512-s1oY4RmYDlWMlcV0kKPBaADn46JirZzvvH7c2CtAqxCY96S538JRBAzt83RrfkDheV/+G/vWNK0zek+8TB3Gmw==",
       "dev": true,
-      "requires": {
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "detect-indent": "^4.0.0",
-        "jsesc": "^1.3.0",
-        "lodash": "^4.17.4",
-        "source-map": "^0.5.7",
-        "trim-right": "^1.0.1"
-      },
       "dependencies": {
-        "jsesc": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
-          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
-          "dev": true
+        "@typescript-eslint/experimental-utils": "4.28.4",
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^4.0.0",
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
         }
       }
     },
-    "babel-messages": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
-      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+    "node_modules/@typescript-eslint/experimental-utils": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.4.tgz",
+      "integrity": "sha512-OglKWOQRWTCoqMSy6pm/kpinEIgdcXYceIcH3EKWUl4S8xhFtN34GQRaAvTIZB9DD94rW7d/U7tUg3SYeDFNHA==",
       "dev": true,
-      "requires": {
-        "babel-runtime": "^6.22.0"
+      "dependencies": {
+        "@types/json-schema": "^7.0.7",
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/typescript-estree": "4.28.4",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
       }
     },
-    "babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+    "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
       "dev": true,
-      "requires": {
-        "object.assign": "^4.1.0"
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
       }
     },
-    "babel-plugin-syntax-object-rest-spread": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
-      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
-      "dev": true
-    },
-    "babel-plugin-transform-object-rest-spread": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
-      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+    "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true,
-      "requires": {
-        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
-        "babel-runtime": "^6.26.0"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+    "node_modules/@typescript-eslint/parser": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.4.tgz",
+      "integrity": "sha512-4i0jq3C6n+og7/uCHiE6q5ssw87zVdpUj1k6VlVYMonE3ILdFApEzTWgppSRG4kVNB/5jxnH+gTeKLMNfUelQA==",
       "dev": true,
-      "requires": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/typescript-estree": "4.28.4",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "babel-template": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
-      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.4.tgz",
+      "integrity": "sha512-ZJBNs4usViOmlyFMt9X9l+X0WAFcDH7EdSArGqpldXu7aeZxDAuAzHiMAeI+JpSefY2INHrXeqnha39FVqXb8w==",
       "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "lodash": "^4.17.4"
+      "dependencies": {
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/visitor-keys": "4.28.4"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "babel-traverse": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
-      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+    "node_modules/@typescript-eslint/types": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.4.tgz",
+      "integrity": "sha512-3eap4QWxGqkYuEmVebUGULMskR6Cuoc/Wii0oSOddleP4EGx1tjLnZQ0ZP33YRoMDCs5O3j56RBV4g14T4jvww==",
       "dev": true,
-      "requires": {
-        "babel-code-frame": "^6.26.0",
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "debug": "^2.6.8",
-        "globals": "^9.18.0",
-        "invariant": "^2.2.2",
-        "lodash": "^4.17.4"
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.4.tgz",
+      "integrity": "sha512-z7d8HK8XvCRyN2SNp+OXC2iZaF+O2BTquGhEYLKLx5k6p0r05ureUtgEfo5f6anLkhCxdHtCf6rPM1p4efHYDQ==",
+      "dev": true,
       "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "globals": {
-          "version": "9.18.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
-          "dev": true
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/visitor-keys": "4.28.4",
+        "debug": "^4.3.1",
+        "globby": "^11.0.3",
+        "is-glob": "^4.0.1",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
         }
       }
     },
-    "babel-types": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
       "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.4",
-        "to-fast-properties": "^1.0.3"
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "bach": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz",
-      "integrity": "sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=",
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.4.tgz",
+      "integrity": "sha512-NIAXAdbz1XdOuzqkJHjNKXKj8QQ4cv5cxR/g0uQhCYf/6//XrmfpaYsM7PnBcNbfvTDLUkqQ5TPNm1sozDdTWg==",
       "dev": true,
-      "requires": {
-        "arr-filter": "^1.1.1",
-        "arr-flatten": "^1.0.1",
-        "arr-map": "^2.0.0",
-        "array-each": "^1.0.0",
-        "array-initial": "^1.0.0",
-        "array-last": "^1.1.1",
-        "async-done": "^1.2.2",
-        "async-settle": "^1.0.0",
-        "now-and-later": "^2.0.0"
+      "dependencies": {
+        "@typescript-eslint/types": "4.28.4",
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "backo2": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=",
-      "dev": true
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
     },
-    "bail": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.4.tgz",
-      "integrity": "sha512-S8vuDB4w6YpRhICUDET3guPlQpaJl7od94tpZ0Fvnyp+MKW/HyDTcRDck+29C9g+d/qQHnddRH3+94kZdrW0Ww==",
-      "dev": true
+    "node_modules/a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
     },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
-    "base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
-      "requires": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
-      },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
       }
     },
-    "base64-arraybuffer": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
-      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=",
-      "dev": true
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
     },
-    "base64-js": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
-      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
-      "dev": true
+    "node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
     },
-    "base64id": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/base64id/-/base64id-1.0.0.tgz",
-      "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=",
-      "dev": true
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
     },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-      "dev": true
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
     },
-    "bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "requires": {
-        "tweetnacl": "^0.14.3"
+    "node_modules/agentkeepalive": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
+      "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
+      "optional": true,
+      "dependencies": {
+        "humanize-ms": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
       }
     },
-    "better-assert": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
-      "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=",
-      "dev": true,
-      "requires": {
-        "callsite": "1.0.0"
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "devOptional": true,
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+    "node_modules/aggregate-error/node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "bin-build": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz",
-      "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==",
-      "dev": true,
-      "requires": {
-        "decompress": "^4.0.0",
-        "download": "^6.2.2",
-        "execa": "^0.7.0",
-        "p-map-series": "^1.0.0",
-        "tempfile": "^2.0.0"
-      },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
-        }
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "bin-check": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
-      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
-      "dev": true,
-      "requires": {
-        "execa": "^0.7.0",
-        "executable": "^4.1.0"
-      },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
         }
       }
     },
-    "bin-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
-      "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "find-versions": "^3.0.0"
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "bin-version-check": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
-      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/ajv-keywords": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
+      "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=",
       "dev": true,
-      "requires": {
-        "bin-version": "^3.0.0",
-        "semver": "^5.6.0",
-        "semver-truncate": "^1.1.2"
+      "peerDependencies": {
+        "ajv": ">=4.10.0"
       }
     },
-    "bin-wrapper": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz",
-      "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==",
-      "dev": true,
-      "requires": {
-        "bin-check": "^4.1.0",
-        "bin-version-check": "^4.0.0",
-        "download": "^7.1.0",
-        "import-lazy": "^3.1.0",
-        "os-filter-obj": "^2.0.0",
-        "pify": "^4.0.1"
-      },
+    "node_modules/algoliasearch": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.3.tgz",
+      "integrity": "sha512-OLY0AWlPKGLbSaw14ivMB7BT5fPdp8VdzY4L8FtzZnqmLKsyes24cltGlf7/X96ACkYEcT390SReCDt/9SUIRg==",
       "dependencies": {
-        "download": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
-          "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
-          "dev": true,
-          "requires": {
-            "archive-type": "^4.0.0",
-            "caw": "^2.0.1",
-            "content-disposition": "^0.5.2",
-            "decompress": "^4.2.0",
-            "ext-name": "^5.0.0",
-            "file-type": "^8.1.0",
-            "filenamify": "^2.0.0",
-            "get-stream": "^3.0.0",
-            "got": "^8.3.1",
-            "make-dir": "^1.2.0",
-            "p-event": "^2.1.0",
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true
-            }
-          }
-        },
-        "file-type": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
-          "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
-          "dev": true
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
-        },
-        "got": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
-          "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
-          "dev": true,
-          "requires": {
-            "@sindresorhus/is": "^0.7.0",
-            "cacheable-request": "^2.1.1",
-            "decompress-response": "^3.3.0",
-            "duplexer3": "^0.1.4",
-            "get-stream": "^3.0.0",
-            "into-stream": "^3.1.0",
-            "is-retry-allowed": "^1.1.0",
-            "isurl": "^1.0.0-alpha5",
-            "lowercase-keys": "^1.0.0",
-            "mimic-response": "^1.0.0",
-            "p-cancelable": "^0.4.0",
-            "p-timeout": "^2.0.1",
-            "pify": "^3.0.0",
-            "safe-buffer": "^5.1.1",
-            "timed-out": "^4.0.1",
-            "url-parse-lax": "^3.0.0",
-            "url-to-options": "^1.0.1"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true
-            }
-          }
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true
-            }
-          }
-        },
-        "p-cancelable": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
-          "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
-          "dev": true
-        },
-        "p-event": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
-          "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
-          "dev": true,
-          "requires": {
-            "p-timeout": "^2.0.1"
-          }
-        },
-        "p-timeout": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
-          "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-          "dev": true,
-          "requires": {
-            "p-finally": "^1.0.0"
-          }
-        },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        },
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
-        },
-        "url-parse-lax": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-          "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-          "dev": true,
-          "requires": {
-            "prepend-http": "^2.0.0"
-          }
-        }
+        "@algolia/cache-browser-local-storage": "4.10.3",
+        "@algolia/cache-common": "4.10.3",
+        "@algolia/cache-in-memory": "4.10.3",
+        "@algolia/client-account": "4.10.3",
+        "@algolia/client-analytics": "4.10.3",
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-personalization": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/logger-common": "4.10.3",
+        "@algolia/logger-console": "4.10.3",
+        "@algolia/requester-browser-xhr": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/requester-node-http": "4.10.3",
+        "@algolia/transporter": "4.10.3"
       }
     },
-    "binary-extensions": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-      "dev": true
+    "node_modules/alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
-    "bl": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
-      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
-      "dev": true,
-      "requires": {
-        "readable-stream": "^2.3.5",
-        "safe-buffer": "^5.1.1"
+    "node_modules/ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "dependencies": {
+        "string-width": "^3.0.0"
       }
     },
-    "blob": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
-      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
-      "dev": true
-    },
-    "block-stream": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-      "optional": true,
-      "requires": {
-        "inherits": "~2.0.0"
+    "node_modules/ansi-align/node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "bluebird": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
-      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
-      "dev": true
+    "node_modules/ansi-align/node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
     },
-    "bluebird-retry": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/bluebird-retry/-/bluebird-retry-0.11.0.tgz",
-      "integrity": "sha1-EomrIsu8OgJYe6rTVZU1HdDBwEc=",
-      "dev": true
+    "node_modules/ansi-align/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "engines": {
+        "node": ">=4"
+      }
     },
-    "body-parser": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
-      "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
-      "dev": true,
-      "requires": {
-        "bytes": "3.0.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "~1.6.3",
-        "iconv-lite": "0.4.23",
-        "on-finished": "~2.3.0",
-        "qs": "6.5.2",
-        "raw-body": "2.3.3",
-        "type-is": "~1.6.16"
-      },
+    "node_modules/ansi-align/node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
       "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "qs": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-          "dev": true
-        }
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
-    },
-    "boxen": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
-      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
-      "dev": true,
-      "requires": {
-        "ansi-align": "^3.0.0",
-        "camelcase": "^5.3.1",
-        "chalk": "^3.0.0",
-        "cli-boxes": "^2.2.0",
-        "string-width": "^4.1.0",
-        "term-size": "^2.1.0",
-        "type-fest": "^0.8.1",
-        "widest-line": "^3.1.0"
-      },
+    "node_modules/ansi-align/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
       "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "widest-line": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-          "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
-          "dev": true,
-          "requires": {
-            "string-width": "^4.0.0"
-          }
-        }
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "dev": true,
-      "requires": {
-        "arr-flatten": "^1.1.0",
-        "array-unique": "^0.3.2",
-        "extend-shallow": "^2.0.1",
-        "fill-range": "^4.0.0",
-        "isobject": "^3.0.1",
-        "repeat-element": "^1.1.2",
-        "snapdragon": "^0.8.1",
-        "snapdragon-node": "^2.0.1",
-        "split-string": "^3.0.2",
-        "to-regex": "^3.0.1"
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
       },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "browser-stdout": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
-      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
-      "dev": true
-    },
-    "browser-sync": {
-      "version": "2.26.7",
-      "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.26.7.tgz",
-      "integrity": "sha512-lY3emme0OyvA2ujEMpRmyRy9LY6gHLuTr2/ABxhIm3lADOiRXzP4dgekvnDrQqZ/Ec2Fz19lEjm6kglSG5766w==",
-      "dev": true,
-      "requires": {
-        "browser-sync-client": "^2.26.6",
-        "browser-sync-ui": "^2.26.4",
-        "bs-recipes": "1.3.4",
-        "bs-snippet-injector": "^2.0.1",
-        "chokidar": "^2.0.4",
-        "connect": "3.6.6",
-        "connect-history-api-fallback": "^1",
-        "dev-ip": "^1.0.1",
-        "easy-extender": "^2.3.4",
-        "eazy-logger": "^3",
-        "etag": "^1.8.1",
-        "fresh": "^0.5.2",
-        "fs-extra": "3.0.1",
-        "http-proxy": "1.15.2",
-        "immutable": "^3",
-        "localtunnel": "1.9.2",
-        "micromatch": "^3.1.10",
-        "opn": "5.3.0",
-        "portscanner": "2.1.1",
-        "qs": "6.2.3",
-        "raw-body": "^2.3.2",
-        "resp-modifier": "6.0.2",
-        "rx": "4.1.0",
-        "send": "0.16.2",
-        "serve-index": "1.9.1",
-        "serve-static": "1.13.2",
-        "server-destroy": "1.0.1",
-        "socket.io": "2.1.1",
-        "ua-parser-js": "0.7.17",
-        "yargs": "6.4.0"
-      },
+    "node_modules/ansi-gray": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
+      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
       "dependencies": {
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
-        "fs-extra": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
-          "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^3.0.0",
-            "universalify": "^0.1.0"
-          }
-        }
+        "ansi-wrap": "0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "browser-sync-client": {
-      "version": "2.26.6",
-      "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.26.6.tgz",
-      "integrity": "sha512-mGrkZdNzttKdf/16I+y+2dTQxoMCIpKbVIMJ/uP8ZpnKu9f9qa/2CYVtLtbjZG8nsM14EwiCrjuFTGBEnT3Gjw==",
-      "dev": true,
-      "requires": {
-        "etag": "1.8.1",
-        "fresh": "0.5.2",
-        "mitt": "^1.1.3",
-        "rxjs": "^5.5.6"
+    "node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "browser-sync-ui": {
-      "version": "2.26.4",
-      "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.26.4.tgz",
-      "integrity": "sha512-u20P3EsZoM8Pt+puoi3BU3KlbQAH1lAcV+/O4saF26qokrBqIDotmGonfWwoRbUmdxZkM9MBmA0K39ZTG1h4sA==",
-      "dev": true,
-      "requires": {
-        "async-each-series": "0.1.1",
-        "connect-history-api-fallback": "^1",
-        "immutable": "^3",
-        "server-destroy": "1.0.1",
-        "socket.io-client": "^2.0.4",
-        "stream-throttle": "^0.1.3"
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
-    "browserslist": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.3.tgz",
-      "integrity": "sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "^1.0.30000975",
-        "electron-to-chromium": "^1.3.164",
-        "node-releases": "^1.1.23"
+    "node_modules/ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "bs-recipes": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz",
-      "integrity": "sha1-DS1NSKcYyMBEdp/cT4lZLci2lYU=",
-      "dev": true
-    },
-    "bs-snippet-injector": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/bs-snippet-injector/-/bs-snippet-injector-2.0.1.tgz",
-      "integrity": "sha1-YbU5PxH1JVntEgaTEANDtu2wTdU=",
-      "dev": true
+    "node_modules/ansicolors": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
+      "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
     },
-    "buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
-      "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
-      "dev": true,
-      "requires": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4"
+    "node_modules/any-promise": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
+      "integrity": "sha1-gwtoCqflbzNFHUsEnzvYBESY7ic="
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "dev": true,
-      "requires": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
+    "node_modules/append-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
+      "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=",
+      "dependencies": {
+        "buffer-equal": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
-      "dev": true
+    "node_modules/aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "optional": true
     },
-    "buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-      "dev": true
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
     },
-    "buffer-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz",
-      "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=",
-      "dev": true
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     },
-    "buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
-      "dev": true
+    "node_modules/archiver-utils/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
     },
-    "buffer-from": {
+    "node_modules/archiver-utils/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
     },
-    "builtin-modules": {
+    "node_modules/archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA="
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+      "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-filter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/arr-filter/-/arr-filter-1.1.2.tgz",
+      "integrity": "sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=",
+      "dependencies": {
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/arr-map/-/arr-map-2.0.2.tgz",
+      "integrity": "sha1-Onc0X/wc814qkYJWAfnljy4kysQ=",
+      "dependencies": {
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-union": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
-      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "bytes": {
+    "node_modules/array-differ": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "c8": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-7.1.0.tgz",
-      "integrity": "sha512-r4ba14DehwROz7Sm/JpwqL+s2FGGMiVmgnhAtYJ/jQcPpR7L+yEO3MUoQXHOFBetqd+mpTY5XiNY79QY6bYpnw==",
+    "node_modules/array-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "node_modules/array-initial": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-initial/-/array-initial-1.1.0.tgz",
+      "integrity": "sha1-L6dLJnOTccOUe9enrcc74zSz15U=",
+      "dependencies": {
+        "array-slice": "^1.0.0",
+        "is-number": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-initial/node_modules/is-number": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+      "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-last": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz",
+      "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==",
+      "dependencies": {
+        "is-number": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-last/node_modules/is-number": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+      "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-slice": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-sort": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-1.0.0.tgz",
+      "integrity": "sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==",
+      "dependencies": {
+        "default-compare": "^1.0.0",
+        "get-value": "^2.0.6",
+        "kind-of": "^5.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-sort/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/as-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/as-array/-/as-array-2.0.0.tgz",
+      "integrity": "sha512-1Sd1LrodN0XYxYeZcN1J4xYZvmvTwD5tDWaPUGPIzH1mFsmzsPnVtd2exWhecMjtZk/wYWjNZJiD3b1SLCeJqg=="
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "node_modules/asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-never": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
       "dev": true,
-      "requires": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@istanbuljs/schema": "^0.1.2",
-        "find-up": "^4.0.0",
-        "foreground-child": "^2.0.0",
-        "furi": "^2.0.0",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-reports": "^3.0.0",
-        "rimraf": "^3.0.0",
-        "test-exclude": "^6.0.0",
-        "v8-to-istanbul": "^4.1.2",
-        "yargs": "^15.0.0",
-        "yargs-parser": "^16.0.0"
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "dependencies": {
+        "tslib": "^2.0.1"
       },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
+    "node_modules/async-done": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.3.2.tgz",
+      "integrity": "sha512-uYkTP8dw2og1tu1nmza1n1CMW0qb8gWWlwqMmLb7MhBVs4BXrFziT6HXUd+/RlRA/i4H9AkofYloUbs1fwMqlw==",
       "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "cliui": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-          "dev": true,
-          "requires": {
-            "string-width": "^4.2.0",
-            "strip-ansi": "^6.0.0",
-            "wrap-ansi": "^6.2.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        },
-        "require-main-filename": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "string-width": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "which-module": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-          "dev": true
-        },
-        "wrap-ansi": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-          "dev": true
-        },
-        "yargs": {
-          "version": "15.3.1",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
-          "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
-          "dev": true,
-          "requires": {
-            "cliui": "^6.0.0",
-            "decamelize": "^1.2.0",
-            "find-up": "^4.1.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^4.2.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^18.1.1"
-          },
-          "dependencies": {
-            "yargs-parser": {
-              "version": "18.1.3",
-              "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-              "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-              "dev": true,
-              "requires": {
-                "camelcase": "^5.0.0",
-                "decamelize": "^1.2.0"
-              }
-            }
-          }
-        },
-        "yargs-parser": {
-          "version": "16.1.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-16.1.0.tgz",
-          "integrity": "sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.2",
+        "process-nextick-args": "^2.0.0",
+        "stream-exhaust": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
       }
     },
-    "cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
-      "requires": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
+    "node_modules/async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
+    },
+    "node_modules/async-each-series": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
+      "integrity": "sha512-p4jj6Fws4Iy2m0iCmI2am2ZNZCgbdgE+P8F/8csmn2vx7ixXrO2zGcuNsD46X5uZSVecmkEy/M06X2vG8KD6dQ==",
+      "engines": {
+        "node": ">=0.8.0"
       }
     },
-    "cacheable-request": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
-      "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
-      "dev": true,
-      "requires": {
-        "clone-response": "1.0.2",
-        "get-stream": "3.0.0",
-        "http-cache-semantics": "3.8.1",
-        "keyv": "3.0.0",
-        "lowercase-keys": "1.0.0",
-        "normalize-url": "2.0.1",
-        "responselike": "1.0.2"
-      },
+    "node_modules/async-lock": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.3.2.tgz",
+      "integrity": "sha512-phnXdS3RP7PPcmP6NWWzWMU0sLTeyvtZCxBPpZdkYE3seGLKSQZs9FrmVO/qwypq98FUtWWUEYxziLkdGk5nnA=="
+    },
+    "node_modules/async-settle": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz",
+      "integrity": "sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=",
       "dependencies": {
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
-        },
-        "lowercase-keys": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
-          "dev": true
-        }
+        "async-done": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
       }
     },
-    "caller-callsite": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+    "node_modules/async-transforms": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/async-transforms/-/async-transforms-1.0.9.tgz",
+      "integrity": "sha512-PCZEV8XLKoJTYovmfbXN5bZU2b8jf2d22hM7gl3xYmNRsVBt0khvHsgOdbd8UZj0xM9Tv1eWt5qrzeThgR2Alw=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/attach-ware": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/attach-ware/-/attach-ware-2.0.5.tgz",
+      "integrity": "sha512-FO/ZHTA67/AT6V1Vwrg7wUbACjsAjwjdARM2lRK7SXG65b8axWAwi3gR9zKfFqkcnCLtDXVRW9sxsJLR+12JYQ==",
       "dev": true,
-      "requires": {
-        "callsites": "^2.0.0"
+      "dependencies": {
+        "unherit": "^1.0.0"
       },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
       "dependencies": {
-        "callsites": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-          "dev": true
-        }
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
       }
     },
-    "caller-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
-      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
-      "dev": true,
-      "requires": {
-        "callsites": "^0.2.0"
+    "node_modules/autoprefixer/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/autoprefixer/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/autoprefixer/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
       "dependencies": {
-        "callsites": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
-          "dev": true
-        }
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "callsite": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
-      "dev": true
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "engines": {
+        "node": "*"
+      }
     },
-    "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+    "node_modules/aws4": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
-    "camelcase": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-      "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+    "node_modules/axe-core": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
+      "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==",
+      "engines": {
+        "node": ">=4"
+      }
     },
-    "camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "requires": {
-        "camelcase": "^2.0.0",
-        "map-obj": "^1.0.0"
-      },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "dependencies": {
-        "camelcase": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
-        }
+        "follow-redirects": "^1.14.0"
       }
     },
-    "caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+    "node_modules/axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
+    "node_modules/babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
       "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "eslint": ">= 4.12.1"
       }
     },
-    "caniuse-lite": {
-      "version": "1.0.30000979",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000979.tgz",
-      "integrity": "sha512-gcu45yfq3B7Y+WB05fOMfr0EiSlq+1u+m6rPHyJli/Wy3PVQNGaU7VA4bZE5qw+AU2UVOBR/N5g1bzADUqdvFw==",
-      "dev": true
+    "node_modules/babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "dependencies": {
+        "@babel/types": "^7.9.6"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
     },
-    "cardinal": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
-      "integrity": "sha1-fMEFXYItISlU0HsIXeolHMe8VQU=",
+    "node_modules/bach": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz",
+      "integrity": "sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=",
+      "dependencies": {
+        "arr-filter": "^1.1.1",
+        "arr-flatten": "^1.0.1",
+        "arr-map": "^2.0.0",
+        "array-each": "^1.0.0",
+        "array-initial": "^1.0.0",
+        "array-last": "^1.1.1",
+        "async-done": "^1.2.2",
+        "async-settle": "^1.0.0",
+        "now-and-later": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
       "dev": true,
-      "requires": {
-        "ansicolors": "~0.3.2",
-        "redeyed": "~2.1.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
-    "caw": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz",
-      "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
-      "dev": true,
-      "requires": {
-        "get-proxy": "^2.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "tunnel-agent": "^0.6.0",
-        "url-to-options": "^1.0.1"
+    "node_modules/base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "dependencies": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "ccount": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.4.tgz",
-      "integrity": "sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==",
-      "dev": true
+    "node_modules/base/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-      "dev": true,
-      "requires": {
-        "align-text": "^0.1.3",
-        "lazy-cache": "^1.0.3"
+    "node_modules/base/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "requires": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+    "node_modules/base/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
       },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
         },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
         },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
         }
+      ]
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
       }
     },
-    "character-entities": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.3.tgz",
-      "integrity": "sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==",
-      "dev": true
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
-    "character-entities-html4": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.3.tgz",
-      "integrity": "sha512-SwnyZ7jQBCRHELk9zf2CN5AnGEc2nA+uKMZLHvcqhpPprjkYhiLn0DywMHgN5ttFZuITMATbh68M6VIVKwJbcg==",
-      "dev": true
+    "node_modules/basic-auth-connect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
+      "integrity": "sha512-kiV+/DTgVro4aZifY/hwRwALBISViL5NP4aReaR2EVJEObpbUBHIkdJh/YpcoEiYt7nBodZ6U2ajZeZvSxUCCg=="
     },
-    "character-entities-legacy": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz",
-      "integrity": "sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww==",
-      "dev": true
+    "node_modules/basic-auth/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
-    "character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
-      "dev": true,
-      "requires": {
-        "is-regex": "^1.0.3"
+    "node_modules/basic-ftp": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.3.tgz",
+      "integrity": "sha512-QHX8HLlncOLpy54mh+k/sWIFd0ThmRqwe9ZjELybGZK+tZ8rUb9VO0saKJUROTbE+KhzDUT7xziGpGrW8Kmd+g==",
+      "engines": {
+        "node": ">=10.0.0"
       }
     },
-    "character-reference-invalid": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz",
-      "integrity": "sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==",
-      "dev": true
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
     },
-    "chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/before-after-hook": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
+      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
       "dev": true
     },
-    "cheerio": {
-      "version": "1.0.0-rc.3",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
-      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
-      "dev": true,
-      "requires": {
-        "css-select": "~1.2.0",
-        "dom-serializer": "~0.1.1",
-        "entities": "~1.1.1",
-        "htmlparser2": "^3.9.1",
-        "lodash": "^4.15.0",
-        "parse5": "^3.0.1"
-      },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.1.tgz",
+      "integrity": "sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
       "dependencies": {
-        "css-select": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
-          "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
-          "dev": true,
-          "requires": {
-            "boolbase": "~1.0.0",
-            "css-what": "2.1",
-            "domutils": "1.5.1",
-            "nth-check": "~1.0.1"
-          }
-        },
-        "domutils": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "0",
-            "domelementtype": "1"
-          }
-        }
+        "file-uri-to-path": "1.0.0"
       }
     },
-    "chokidar": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz",
-      "integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==",
-      "dev": true,
-      "requires": {
-        "anymatch": "^3.0.1",
-        "braces": "^3.0.2",
-        "fsevents": "^2.0.6",
-        "glob-parent": "^5.0.0",
-        "is-binary-path": "^2.1.0",
-        "is-glob": "^4.0.1",
-        "normalize-path": "^3.0.0",
-        "readdirp": "^3.1.1"
-      },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
       "dependencies": {
-        "anymatch": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz",
-          "integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "binary-extensions": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "fsevents": {
-          "version": "2.0.7",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz",
-          "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
-          "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.2.tgz",
-          "integrity": "sha512-8rhl0xs2cxfVsqzreYCvs8EwBfn/DhVdqtoLmw19uI3SC5avYX9teCurlErfpPXGmYtMHReGaP2RsLnFvz/lnw==",
-          "dev": true,
-          "requires": {
-            "picomatch": "^2.0.4"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
       }
     },
-    "chokidar-cli": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.2.tgz",
-      "integrity": "sha512-Yx0OYKcAkS7YMPP3/co6aN+1AOx2L6WmscqWvnqs7z+9AhDsn4zpezaErNoPACri1iUVjtxk8E77sMGntkBh3Q==",
-      "dev": true,
-      "requires": {
-        "bluebird": "3.5.3",
-        "chokidar": "2.1.1",
-        "lodash": "4.17.11",
-        "yargs": "12.0.5"
-      },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "bluebird": {
-          "version": "3.5.3",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
-          "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
-          "dev": true
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "chokidar": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.1.tgz",
-          "integrity": "sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ==",
-          "dev": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.0"
-          }
-        },
-        "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-          "dev": true,
-          "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
-          }
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "invert-kv": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "lcid": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-          "dev": true,
-          "requires": {
-            "invert-kv": "^2.0.0"
-          }
-        },
-        "lodash": {
-          "version": "4.17.11",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
-          "dev": true
-        },
-        "os-locale": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-          "dev": true,
-          "requires": {
-            "execa": "^1.0.0",
-            "lcid": "^2.0.0",
-            "mem": "^4.0.0"
-          }
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        },
-        "which-module": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "12.0.5",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^4.0.0",
-            "decamelize": "^1.2.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^3.0.0",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^3.2.1 || ^4.0.0",
-            "yargs-parser": "^11.1.1"
-          }
-        },
-        "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "ci-info": {
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/depd": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
-    "circular-json": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
-      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
-      "dev": true
+    "node_modules/body-parser/node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
     },
-    "class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "dev": true,
-      "requires": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/body-parser/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "clean-css": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
-      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
-      "dev": true,
-      "requires": {
-        "source-map": "~0.6.0"
-      },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
+    "node_modules/boxen": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
       "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "clean-stack": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-1.3.0.tgz",
-      "integrity": "sha1-noIVAa6XmYbEax1m0tQy2y/UrjE=",
-      "dev": true
-    },
-    "cli-boxes": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.0.tgz",
-      "integrity": "sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==",
-      "dev": true
+    "node_modules/boxen/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
     },
-    "cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
-      "requires": {
-        "restore-cursor": "^3.1.0"
+    "node_modules/boxen/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "cli-ux": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
-      "integrity": "sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==",
-      "dev": true,
-      "requires": {
-        "@oclif/errors": "^1.2.2",
-        "@oclif/linewrap": "^1.0.0",
-        "@oclif/screen": "^1.0.3",
-        "ansi-escapes": "^3.1.0",
-        "ansi-styles": "^3.2.1",
-        "cardinal": "^2.1.1",
-        "chalk": "^2.4.1",
-        "clean-stack": "^2.0.0",
-        "extract-stack": "^1.0.0",
-        "fs-extra": "^7.0.0",
-        "hyperlinker": "^1.0.0",
-        "indent-string": "^3.2.0",
-        "is-wsl": "^1.1.0",
-        "lodash": "^4.17.11",
-        "password-prompt": "^1.0.7",
-        "semver": "^5.6.0",
-        "strip-ansi": "^5.0.0",
-        "supports-color": "^5.5.0",
-        "supports-hyperlinks": "^1.0.1",
-        "treeify": "^1.1.0",
-        "tslib": "^1.9.3"
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
       },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "clean-stack": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-          "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-          "dev": true
-        },
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
       }
     },
-    "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
-      "dev": true
+    "node_modules/boxen/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "clipboard": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
+    "node_modules/boxen/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "cliui": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-      "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wrap-ansi": "^2.0.0"
+    "node_modules/boxen/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "clone": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
-      "dev": true
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
     },
-    "clone-buffer": {
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-media-mime-type": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
-      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
+      "resolved": "https://registry.npmjs.org/browser-media-mime-type/-/browser-media-mime-type-1.0.0.tgz",
+      "integrity": "sha1-oVNKitk48Lz0tkL1QPo1YFZT0Ok="
+    },
+    "node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
       "dev": true
     },
-    "clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-      "dev": true,
-      "requires": {
-        "mimic-response": "^1.0.0"
+    "node_modules/browser-sync": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.11.tgz",
+      "integrity": "sha512-U5f9u97OYJH66T0MGWWzG9rOQTW6ZmDMj97vsmtqwNS03JAwdLVES8eel2lD3rvAqQCNAFqaJ74NMacBI57vJg==",
+      "dependencies": {
+        "browser-sync-client": "^2.27.11",
+        "browser-sync-ui": "^2.27.11",
+        "bs-recipes": "1.3.4",
+        "bs-snippet-injector": "^2.0.1",
+        "chokidar": "^3.5.1",
+        "connect": "3.6.6",
+        "connect-history-api-fallback": "^1",
+        "dev-ip": "^1.0.1",
+        "easy-extender": "^2.3.4",
+        "eazy-logger": "3.1.0",
+        "etag": "^1.8.1",
+        "fresh": "^0.5.2",
+        "fs-extra": "3.0.1",
+        "http-proxy": "^1.18.1",
+        "immutable": "^3",
+        "localtunnel": "^2.0.1",
+        "micromatch": "^4.0.2",
+        "opn": "5.3.0",
+        "portscanner": "2.2.0",
+        "qs": "^6.11.0",
+        "raw-body": "^2.3.2",
+        "resp-modifier": "6.0.2",
+        "rx": "4.1.0",
+        "send": "0.16.2",
+        "serve-index": "1.9.1",
+        "serve-static": "1.13.2",
+        "server-destroy": "1.0.1",
+        "socket.io": "^4.4.1",
+        "ua-parser-js": "1.0.2",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "browser-sync": "dist/bin.js"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
       }
     },
-    "clone-stats": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
-      "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
-      "dev": true
+    "node_modules/browser-sync-client": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.11.tgz",
+      "integrity": "sha512-okMNfD2NasL/XD1/BclP3onXjhahisk3e/kTQ5HPDT/lLqdBqNDd6QFcjI5I1ak7na2hxKQSLjryql+7fp5gKQ==",
+      "dependencies": {
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "mitt": "^1.1.3",
+        "rxjs": "^5.5.6",
+        "typescript": "^4.6.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
     },
-    "cloneable-readable": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.2.tgz",
-      "integrity": "sha512-Bq6+4t+lbM8vhTs/Bef5c5AdEMtapp/iFb6+s4/Hh9MVTt8OLKH7ZOOZSCT+Ys7hsHvqv0GuMPJ1lnQJVHvxpg==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "process-nextick-args": "^2.0.0",
-        "readable-stream": "^2.3.5"
+    "node_modules/browser-sync-ui": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.11.tgz",
+      "integrity": "sha512-1T/Y8Pp1R68aUL7zVSFq0nxtr258xWd/nTasCAHX2M6EsGaswVOFtXsw3bKqsr35z+J+LfVfOdz1HFLYKxdgrA==",
+      "dependencies": {
+        "async-each-series": "0.1.1",
+        "connect-history-api-fallback": "^1",
+        "immutable": "^3",
+        "server-destroy": "1.0.1",
+        "socket.io-client": "^4.4.1",
+        "stream-throttle": "^0.1.3"
       }
     },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+    "node_modules/browser-sync/node_modules/fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^3.0.0",
+        "universalify": "^0.1.0"
+      }
     },
-    "coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "dev": true,
-      "requires": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
+    "node_modules/browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
       }
     },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    "node_modules/bs-recipes": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz",
+      "integrity": "sha512-BXvDkqhDNxXEjeGM8LFkSbR+jzmP/CYpCiVKYn+soB1dDldeU15EBNDkwVXndKuX35wnNUaPd0qSoQEAkmQtMw=="
     },
-    "collapse-white-space": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.5.tgz",
-      "integrity": "sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==",
-      "dev": true
+    "node_modules/bs-snippet-injector": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bs-snippet-injector/-/bs-snippet-injector-2.0.1.tgz",
+      "integrity": "sha512-4u8IgB+L9L+S5hknOj3ddNSb42436gsnGm1AuM15B7CdbkpQTyVWgIM5/JUBiKiRwGOR86uo0Lu/OsX+SAlJmw=="
     },
-    "collection-map": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz",
-      "integrity": "sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=",
-      "dev": true,
-      "requires": {
-        "arr-map": "^2.0.2",
-        "for-own": "^1.0.0",
-        "make-iterator": "^1.0.0"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "^1.0.1"
-          }
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
         }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
       }
     },
-    "collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-      "dev": true,
-      "requires": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "engines": {
+        "node": "*"
       }
     },
-    "color": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
-      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.2"
+    "node_modules/buffer-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz",
+      "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=",
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
-    "color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "requires": {
-        "color-name": "1.1.3"
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
-    "color-string": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
-      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+    "node_modules/c8": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/c8/-/c8-7.7.3.tgz",
+      "integrity": "sha512-ZyA7n3w8i4ETV25tVYMHwJxCSnaOf/LfA8vOcuZOPbonuQfD7tBT/gMWZy7eczRpCDuHcvMXwoqAemg6R0p3+A==",
       "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@istanbuljs/schema": "^0.1.2",
+        "find-up": "^5.0.0",
+        "foreground-child": "^2.0.0",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-reports": "^3.0.2",
+        "rimraf": "^3.0.0",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^8.0.0",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.7"
+      },
+      "bin": {
+        "c8": "bin/c8.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
       }
     },
-    "color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "dev": true
+    "node_modules/c8/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "colornames": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz",
-      "integrity": "sha1-+IiQMGhcfE/54qVZ9Qd+t2qBb5Y=",
-      "dev": true
+    "node_modules/c8/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "colors": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.3.tgz",
-      "integrity": "sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==",
-      "dev": true
+    "node_modules/c8/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "colorspace": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.2.tgz",
-      "integrity": "sha512-vt+OoIP2d76xLhjwbBaucYlNSpPsrJWPlBTtwCpQKIu6/CSMutyzX93O/Do0qzpH3YoHEes8YEFXyZ797rEhzQ==",
+    "node_modules/c8/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
-      "requires": {
-        "color": "3.0.x",
-        "text-hex": "1.0.x"
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c8/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
       "dependencies": {
-        "color": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
-          "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.1",
-            "color-string": "^1.5.2"
-          }
-        }
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "requires": {
-        "delayed-stream": "~1.0.0"
+    "node_modules/cacache": {
+      "version": "17.1.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
+      "integrity": "sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==",
+      "optional": true,
+      "dependencies": {
+        "@npmcli/fs": "^3.1.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^7.7.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^1.0.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^4.0.0",
+        "ssri": "^10.0.0",
+        "tar": "^6.1.11",
+        "unique-filename": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "commander": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
+    "node_modules/cacache/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
     },
-    "common-tags": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
-      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==",
-      "dev": true
+    "node_modules/cacache/node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "optional": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
-    "compare-versions": {
+    "node_modules/cacache/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "optional": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cacache/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/cacache/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "dependencies": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "dev": true,
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ=="
+    },
+    "node_modules/caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dependencies": {
+        "callsites": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dependencies": {
+        "caller-callsite": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-keys": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "map-obj": "^4.0.0",
+        "quick-lru": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001243",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
+      "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
+    },
+    "node_modules/cardinal": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
+      "integrity": "sha512-JSr5eOgoEymtYHBjNWyjrMqet9Am2miJhlfKNdqLp6zoeAh0KN5dRAcxlecj5mAJrmQomgiOBj35xHLrFjqBpw==",
+      "dependencies": {
+        "ansicolors": "~0.3.2",
+        "redeyed": "~2.1.0"
+      },
+      "bin": {
+        "cdl": "bin/cdl.js"
+      }
+    },
+    "node_modules/cargo-cp-artifact": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/cargo-cp-artifact/-/cargo-cp-artifact-0.1.6.tgz",
+      "integrity": "sha512-CQw0doK/aaF7j041666XzuilHxqMxaKkn+I5vmBsd8SAwS0cO5CqVEVp0xJwOKstyqWZ6WK4Ww3O6p26x/Goyg==",
+      "bin": {
+        "cargo-cp-artifact": "bin/cargo-cp-artifact.js"
+      }
+    },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "node_modules/catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ccount": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
+      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chai": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.4.tgz",
+      "integrity": "sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^3.0.1",
+        "get-func-name": "^2.0.0",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
+      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+      "dependencies": {
+        "is-regex": "^1.0.3"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+    },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dependencies": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar-cli": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.3.tgz",
+      "integrity": "sha512-HcHjqeQaT/u0Swy4eaqqg0NhPjsXq6ZN9YzP48EYc81FXBLQuvMXBsrEMDkgH+Puup1mBc0gD0qqECDy/WiMOA==",
+      "dev": true,
+      "dependencies": {
+        "bluebird": "3.5.5",
+        "chokidar": "2.1.5",
+        "lodash": "4.17.15",
+        "yargs": "13.3.0"
+      },
+      "bin": {
+        "chokidar": "index.js"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/anymatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^3.1.4",
+        "normalize-path": "^2.1.1"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/anymatch/node_modules/normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dev": true,
+      "dependencies": {
+        "remove-trailing-separator": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/bluebird": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+      "dev": true
+    },
+    "node_modules/chokidar-cli/node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dev": true,
+      "dependencies": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/chokidar": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
+      "deprecated": "Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "^2.0.0",
+        "async-each": "^1.0.1",
+        "braces": "^2.3.2",
+        "glob-parent": "^3.1.0",
+        "inherits": "^2.0.3",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "normalize-path": "^3.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.2.1",
+        "upath": "^1.1.1"
+      },
+      "optionalDependencies": {
+        "fsevents": "^1.2.7"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "node_modules/chokidar-cli/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dev": true,
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dev": true,
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/glob-parent": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^3.1.0",
+        "path-dirname": "^1.0.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/glob-parent/node_modules/is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
+    },
+    "node_modules/chokidar-cli/node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dev": true,
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/chokidar-cli/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
+    "node_modules/chokidar-cli/node_modules/yargs": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.1"
+      }
+    },
+    "node_modules/chokidar-cli/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "node_modules/chrome-launcher": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.15.0.tgz",
+      "integrity": "sha512-ZQqX5kb9H0+jy1OqLnWampfocrtSZaGl7Ny3F9GRha85o4odbL8x55paUzh51UC7cEmZ5obp3H2Mm70uC2PpRA==",
+      "dependencies": {
+        "@types/node": "*",
+        "escape-string-regexp": "^4.0.0",
+        "is-wsl": "^2.2.0",
+        "lighthouse-logger": "^1.0.0"
+      },
+      "bin": {
+        "print-chrome-path": "bin/print-chrome-path.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      }
+    },
+    "node_modules/chrome-launcher/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/chrome-launcher/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "node_modules/circular-json": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
+      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
+      "deprecated": "CircularJSON is in maintenance only, flatted is its successor.",
+      "dev": true
+    },
+    "node_modules/cjson": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/cjson/-/cjson-0.3.3.tgz",
+      "integrity": "sha512-yKNcXi/Mvi5kb1uK0sahubYiyfUO2EUgOp4NcY9+8NX5Xmc+4yeNogZuLFkpLBBj7/QI9MjRUIuXrV9XOw5kVg==",
+      "dependencies": {
+        "json-parse-helpfulerror": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.3.0"
+      }
+    },
+    "node_modules/class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/class-utils/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-3.0.1.tgz",
+      "integrity": "sha512-lR9wNiMRcVQjSB3a7xXGLuz4cr4wJuuXlaAEbRutGowQTmlp7R72/DOgN21e8jdwblMWl9UOJMJXarX94pzKdg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clean-stack/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.1.tgz",
+      "integrity": "sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-table": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.11.tgz",
+      "integrity": "sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==",
+      "dependencies": {
+        "colors": "1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
+    "node_modules/cli-table/node_modules/colors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+      "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz",
+      "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/cli-truncate/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cli-width": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
+      "dev": true
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
+      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "dev": true,
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "node_modules/clone-stats": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
+      "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA="
+    },
+    "node_modules/cloneable-readable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz",
+      "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "process-nextick-args": "^2.0.0",
+        "readable-stream": "^2.3.5"
+      }
+    },
+    "node_modules/cloneable-readable/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/cloneable-readable/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/cloneable-readable/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/co": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
+      "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g=",
+      "dev": true
+    },
+    "node_modules/coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dependencies": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/collapse-white-space": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
+      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/collection-map": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz",
+      "integrity": "sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=",
+      "dependencies": {
+        "arr-map": "^2.0.2",
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "dependencies": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
+    "node_modules/colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+    },
+    "node_modules/colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/colorspace": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
+      "dependencies": {
+        "color": "^3.1.3",
+        "text-hex": "1.0.x"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "node_modules/compare-versions": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
+      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
+      "dev": true
+    },
+    "node_modules/component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/concat-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "dependencies": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/concat-with-sourcemaps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/condense-newlines": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
+      "integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-whitespace": "^0.3.0",
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/condense-newlines/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/connect": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
+      "integrity": "sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=",
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.0",
+        "parseurl": "~1.3.2",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/connect/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/connect/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "optional": true
+    },
+    "node_modules/console-log-level": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/console-log-level/-/console-log-level-1.4.1.tgz",
+      "integrity": "sha512-VZzbIORbP+PPcN/gg3DXClTLPLg5Slwd5fL2MIc+o1qZ4BXBvWyc6QxPk6T/Mkr6IVjRpoAGf32XxP3ZWMVRcQ=="
+    },
+    "node_modules/constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "dependencies": {
+        "@babel/parser": "^7.6.0",
+        "@babel/types": "^7.6.1"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/convert-source-map/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "node_modules/copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/copy-props": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz",
+      "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==",
+      "dependencies": {
+        "each-props": "^1.3.2",
+        "is-plain-object": "^5.0.0"
+      }
+    },
+    "node_modules/copy-props/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/core-js-pure": {
+      "version": "3.15.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
+      "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==",
+      "deprecated": "core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "dependencies": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
+      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
+      "dependencies": {
+        "cross-spawn": "^6.0.5"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/cross-env/node_modules/cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/cross-env/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/cross-env/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/csp_evaluator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/csp_evaluator/-/csp_evaluator-1.1.0.tgz",
+      "integrity": "sha512-TcB+ZH9wZBG314jAUpKHPl1oYbRJV+nAT2YwZ9y4fmUN0FkEJa8e/hKZoOgzLYp1Z/CJdFhbhhGIGh0XG8W54Q=="
+    },
+    "node_modules/css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
+      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
+      "dependencies": {
+        "postcss": "^7.0.1",
+        "timsort": "^0.3.0"
+      },
+      "engines": {
+        "node": ">4"
+      }
+    },
+    "node_modules/css-declaration-sorter/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/css-declaration-sorter/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-declaration-sorter/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/css-modules-loader-core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
+      "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
+      "dependencies": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.1",
+        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/chalk/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/has-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/postcss": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
+      "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "source-map": "^0.5.6",
+        "supports-color": "^3.2.3"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/css-modules-loader-core/node_modules/supports-color": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+      "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+      "dependencies": {
+        "has-flag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+    },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz",
+      "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
+      "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
+      "dependencies": {
+        "cosmiconfig": "^5.0.0",
+        "cssnano-preset-default": "^4.0.8",
+        "is-resolvable": "^1.0.0",
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
+      "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
+      "dependencies": {
+        "css-declaration-sorter": "^4.0.1",
+        "cssnano-util-raw-cache": "^4.0.1",
+        "postcss": "^7.0.0",
+        "postcss-calc": "^7.0.1",
+        "postcss-colormin": "^4.0.3",
+        "postcss-convert-values": "^4.0.1",
+        "postcss-discard-comments": "^4.0.2",
+        "postcss-discard-duplicates": "^4.0.2",
+        "postcss-discard-empty": "^4.0.1",
+        "postcss-discard-overridden": "^4.0.1",
+        "postcss-merge-longhand": "^4.0.11",
+        "postcss-merge-rules": "^4.0.3",
+        "postcss-minify-font-values": "^4.0.2",
+        "postcss-minify-gradients": "^4.0.2",
+        "postcss-minify-params": "^4.0.2",
+        "postcss-minify-selectors": "^4.0.2",
+        "postcss-normalize-charset": "^4.0.1",
+        "postcss-normalize-display-values": "^4.0.2",
+        "postcss-normalize-positions": "^4.0.2",
+        "postcss-normalize-repeat-style": "^4.0.2",
+        "postcss-normalize-string": "^4.0.2",
+        "postcss-normalize-timing-functions": "^4.0.2",
+        "postcss-normalize-unicode": "^4.0.1",
+        "postcss-normalize-url": "^4.0.1",
+        "postcss-normalize-whitespace": "^4.0.2",
+        "postcss-ordered-values": "^4.1.2",
+        "postcss-reduce-initial": "^4.0.3",
+        "postcss-reduce-transforms": "^4.0.2",
+        "postcss-svgo": "^4.0.3",
+        "postcss-unique-selectors": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano-preset-default/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/cssnano-preset-default/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssnano-preset-default/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cssnano-util-get-arguments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
+      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano-util-get-match": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
+      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano-util-raw-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
+      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano-util-raw-cache/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/cssnano-util-raw-cache/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssnano-util-raw-cache/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cssnano-util-same-parent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
+      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/cssnano/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/cssnano/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssnano/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+    },
+    "node_modules/cssstyle": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.2.1.tgz",
+      "integrity": "sha512-7DYm8qe+gPx/h77QlCyFmX80+fGaE/6A/Ekl0zaszYOubvySO2saYFdQ78P29D0UsULxFKCetDGNaNRUdSF+2A==",
+      "dependencies": {
+        "cssom": "0.3.x"
+      }
+    },
+    "node_modules/csv-parse": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.0.tgz",
+      "integrity": "sha512-RxruSK3M4XgzcD7Trm2wEN+SJ26ChIb903+IWxNOcB5q4jT2Cs+hFr6QP39J05EohshRFEvyzEBoZ/466S2sbw=="
+    },
+    "node_modules/custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
+      "dev": true
+    },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.1.tgz",
+      "integrity": "sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/date-format": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
+      "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+      "dev": true,
+      "dependencies": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decamelize-keys/node_modules/map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "dev": true,
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
+      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg=="
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
+    },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
+      "integrity": "sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==",
+      "dependencies": {
+        "kind-of": "^5.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-compare/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-resolution": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/default-resolution/-/default-resolution-2.0.0.tgz",
+      "integrity": "sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defaults/node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
+      "dev": true
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dependencies": {
+        "object-keys": "^1.0.12"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dependencies": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "optional": true
+    },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true
+    },
+    "node_modules/destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "node_modules/detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dev-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
+      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
+      "bin": {
+        "dev-ip": "lib/dev-ip.js"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.937139",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.937139.tgz",
+      "integrity": "sha512-daj+rzR3QSxsPRy5vjjthn58axO8c11j58uY0lG5vvlJk/EiOdCWOptGdkXDjtuRHr78emKq0udHCXM4trhoDQ==",
+      "dev": true
+    },
+    "node_modules/di": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
+      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
+      "dev": true
+    },
+    "node_modules/diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
+    },
+    "node_modules/dom-serialize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
+      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
+      "dev": true,
+      "dependencies": {
+        "custom-event": "~1.0.0",
+        "ent": "~2.2.0",
+        "extend": "^3.0.0",
+        "void-elements": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serialize/node_modules/void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-storage": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+      "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/dom5": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dom5/-/dom5-3.0.1.tgz",
+      "integrity": "sha512-JPFiouQIr16VQ4dX6i0+Hpbg3H2bMKPmZ+WZgBOSSvOPx9QHwwY8sPzeM2baUtViESYto6wC2nuZOMC/6gulcA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse5": "^2.2.34",
+        "clone": "^2.1.0",
+        "parse5": "^4.0.0"
+      }
+    },
+    "node_modules/dom5/node_modules/parse5": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
+      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
+      "dev": true
+    },
+    "node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
+      "dev": true
+    },
+    "node_modules/duplexify": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz",
+      "integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/each-props": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/each-props/-/each-props-1.3.2.tgz",
+      "integrity": "sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.1",
+        "object.defaults": "^1.1.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "devOptional": true
+    },
+    "node_modules/easy-extender": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
+      "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==",
+      "dependencies": {
+        "lodash": "^4.17.10"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/eazy-logger": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.1.0.tgz",
+      "integrity": "sha512-/snsn2JqBtUSSstEl4R0RKjkisGHAhvYj89i7r3ytNUKW12y178KDZwXLXIgwDqLW6E/VRMT9qfld7wvFae8bQ==",
+      "dependencies": {
+        "tfunk": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+      "dependencies": {
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "node_modules/ejs": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.3.772",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.772.tgz",
+      "integrity": "sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA=="
+    },
+    "node_modules/elegant-spinner": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/enabled": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+      "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.1.3.tgz",
+      "integrity": "sha512-rqs60YwkvWTLLnfazqgZqLa/aKo+9cueVfEi/dZ8PyGyaf8TLOxj++4QMIgeG3Gn0AhrWiFXvghsoY9L9h25GA==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "dependencies": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/enquirer/node_modules/ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0="
+    },
+    "node_modules/entities": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "optional": true
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
+      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.2",
+        "is-callable": "^1.2.3",
+        "is-negative-zero": "^2.0.1",
+        "is-regex": "^1.1.3",
+        "is-string": "^1.0.6",
+        "object-inspect": "^1.10.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "dependencies": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "dev": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-set": "~0.1.5",
+        "es6-symbol": "~3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "node_modules/es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "dev": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "node_modules/es6-set/node_modules/es6-symbol": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+      "dev": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "node_modules/es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/escope": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
+      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
+      "dev": true,
+      "dependencies": {
+        "es6-map": "^0.1.3",
+        "es6-weak-map": "^2.0.1",
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.30.0.tgz",
+      "integrity": "sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.2",
+        "@humanwhocodes/config-array": "^0.5.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.1.2",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz",
+      "integrity": "sha512-rV4Qu0C3nfJKPOAhFujFxB7RMP+URFyQqqOZW9DMRD7ZDTFyjaIlETU3xzHELt++4ugC0+Jm084HQYkkJe+Ivg==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-es": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz",
+      "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-utils": "^2.0.0",
+        "regexpp": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=4.19.1"
+      }
+    },
+    "node_modules/eslint-plugin-lit-a11y": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-1.0.1.tgz",
+      "integrity": "sha512-c+GgGSXb9HMgbzJGp0yl+msHk2rBXcA7KwbobbLonSXdHm6ln7zRwAEj4i7527FOaCKkhxiN6RXfOJcZT1/Bow==",
+      "dev": true,
+      "dependencies": {
+        "aria-query": "^4.2.2",
+        "axe-core": "^4.0.2",
+        "axobject-query": "^2.2.0",
+        "dom5": "^3.0.1",
+        "emoji-regex": "^9.0.0",
+        "eslint": "^7.6.0",
+        "eslint-rule-extender": "0.0.1",
+        "intl-list-format": "^1.0.3",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "requireindex": "~1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 5"
+      }
+    },
+    "node_modules/eslint-plugin-lit-a11y/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-lit-a11y/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-node": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
+      "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
+      "dev": true,
+      "dependencies": {
+        "eslint-plugin-es": "^3.0.0",
+        "eslint-utils": "^2.0.0",
+        "ignore": "^5.1.1",
+        "minimatch": "^3.0.4",
+        "resolve": "^1.10.1",
+        "semver": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.16.0"
+      }
+    },
+    "node_modules/eslint-plugin-node/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0",
+        "prettier": ">=1.13.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-rule-extender": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz",
+      "integrity": "sha512-F0j1Twve3lamL3J0rRSVAynlp58sDPG39JFcQrM+u9Na7PmCgiPHNODh6YE9mduaGcsn3NBqbf6LZRj0cLr8Ng==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kaicataldo"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint/node_modules/@babel/code-frame": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+      "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.10.4"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/espree": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.4.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^1.3.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "dev": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter-asyncresource": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eventemitter-asyncresource/-/eventemitter-asyncresource-1.0.0.tgz",
+      "integrity": "sha512-39F7TBIV0G7gTelxwbEqnwhp90eqCPON1k0NwNfwhgKn4Co4ybUbj2pECcXT0B3ztRKZ7Pw1JujUUgmQJHcVAQ=="
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/events-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/events-listener/-/events-listener-1.1.0.tgz",
+      "integrity": "sha512-Kd3EgYfODHueq6GzVfs/VUolh2EgJsS8hkO3KpnDrxVjU3eq63eXM2ujXkhPP+OkeUOhL8CxdfZbQXzryb5C4g=="
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/execa/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/exegesis": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/exegesis/-/exegesis-4.1.1.tgz",
+      "integrity": "sha512-PvSqaMOw2absLBgsthtJyVOeCHN4lxQ1dM7ibXb6TfZZJaoXtGELoEAGJRFvdN16+u9kg8oy1okZXRk8VpimWA==",
+      "dependencies": {
+        "@apidevtools/json-schema-ref-parser": "^9.0.3",
+        "ajv": "^8.3.0",
+        "ajv-formats": "^2.1.0",
+        "body-parser": "^1.18.3",
+        "content-type": "^1.0.4",
+        "deep-freeze": "0.0.1",
+        "events-listener": "^1.1.0",
+        "glob": "^7.1.3",
+        "json-ptr": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "lodash": "^4.17.11",
+        "openapi3-ts": "^3.1.1",
+        "promise-breaker": "^6.0.0",
+        "pump": "^3.0.0",
+        "qs": "^6.6.0",
+        "raw-body": "^2.3.3",
+        "semver": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">5.0.0"
+      }
+    },
+    "node_modules/exegesis-express": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/exegesis-express/-/exegesis-express-4.0.0.tgz",
+      "integrity": "sha512-V2hqwTtYRj0bj43K4MCtm0caD97YWkqOUHFMRCBW5L1x9IjyqOEc7Xa4oQjjiFbeFOSQzzwPV+BzXsQjSz08fw==",
+      "dependencies": {
+        "exegesis": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">5.0.0"
+      }
+    },
+    "node_modules/exegesis/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/exegesis/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/exit-hook": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
+      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "dependencies": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/fill-range": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
+      "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^2.1.0",
+        "isobject": "^2.0.0",
+        "randomatic": "^3.0.0",
+        "repeat-element": "^1.1.2",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "dev": true,
+      "dependencies": {
+        "isarray": "1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
+      "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
+      "optional": true
+    },
+    "node_modules/express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/express/node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/express/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/express/node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/express/node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/express/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
+      "dependencies": {
+        "type": "^2.0.0"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
+      "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dependencies": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dependencies": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "engines": [
+        "node >=0.6.0"
+      ]
+    },
+    "node_modules/fancy-log": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
+      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
+      "dependencies": {
+        "ansi-gray": "^0.1.1",
+        "color-support": "^1.1.3",
+        "parse-node-version": "^1.0.0",
+        "time-stamp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+    },
+    "node_modules/fast-text-encoding": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
+      "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig=="
+    },
+    "node_modules/fast-url-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
+      "dependencies": {
+        "punycode": "^1.3.2"
+      }
+    },
+    "node_modules/fast-url-parser/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
+    },
+    "node_modules/fastq": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
+      "integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+      "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.4.tgz",
+      "integrity": "sha512-U0iNYXt9wALljzfnGkhFSy5sAC6/SCR3JrHrlsdJz4kF8MvhTRQNiC59iUi1iqsitV7abrNAJWElVL9pdnoUgw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/filesize": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
+      "integrity": "sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/fill-keys": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fill-keys/-/fill-keys-1.0.2.tgz",
+      "integrity": "sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=",
+      "dev": true,
+      "dependencies": {
+        "is-object": "~1.0.1",
+        "merge-descriptors": "~1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
+      "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.1",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.3.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-versions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-4.0.0.tgz",
+      "integrity": "sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==",
+      "dev": true,
+      "dependencies": {
+        "semver-regex": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/findup-sync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
+      "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==",
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/findup-sync/node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dependencies": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fined": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
+      "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "is-plain-object": "^2.0.3",
+        "object.defaults": "^1.1.0",
+        "object.pick": "^1.2.0",
+        "parse-filepath": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/firebase": {
+      "version": "9.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.0.0-beta.7.tgz",
+      "integrity": "sha512-DBjYWPE48C3Yfb2BvUejLNDPwkykaBgK3gYluDt8Czfd4j8mlzy2DO+L/3md4uP09aFDaepmHKveEjR6lMwPUA==",
+      "dependencies": {
+        "@firebase/analytics": "0.0.900-exp.6ef484a04",
+        "@firebase/analytics-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/app": "0.0.900-exp.6ef484a04",
+        "@firebase/app-check": "0.0.900-exp.6ef484a04",
+        "@firebase/app-check-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/auth": "0.0.900-exp.6ef484a04",
+        "@firebase/auth-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/database": "0.0.900-exp.6ef484a04",
+        "@firebase/database-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/functions": "0.0.900-exp.6ef484a04",
+        "@firebase/functions-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/performance": "0.0.900-exp.6ef484a04",
+        "@firebase/performance-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/storage": "0.0.900-exp.6ef484a04",
+        "@firebase/storage-compat": "0.0.900-exp.6ef484a04"
+      }
+    },
+    "node_modules/firebase-tools": {
+      "version": "12.6.1",
+      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-12.6.1.tgz",
+      "integrity": "sha512-/b6Ix9gSmltmDXJvHDTAe6y8yh7C6f5rjYwlHULAzNDQGZv5S4reIUgc06D7XuAdNK+4gNjy7vZoVVpqJ32J4A==",
+      "dependencies": {
+        "@google-cloud/pubsub": "^3.0.1",
+        "abort-controller": "^3.0.0",
+        "ajv": "^6.12.6",
+        "archiver": "^5.0.0",
+        "async-lock": "1.3.2",
+        "body-parser": "^1.19.0",
+        "chokidar": "^3.0.2",
+        "cjson": "^0.3.1",
+        "cli-table": "0.3.11",
+        "colorette": "^2.0.19",
+        "commander": "^4.0.1",
+        "configstore": "^5.0.1",
+        "cors": "^2.8.5",
+        "cross-env": "^5.1.3",
+        "cross-spawn": "^7.0.3",
+        "csv-parse": "^5.0.4",
+        "exegesis": "^4.1.0",
+        "exegesis-express": "^4.0.0",
+        "express": "^4.16.4",
+        "filesize": "^6.1.0",
+        "form-data": "^4.0.0",
+        "fs-extra": "^10.1.0",
+        "glob": "^7.1.2",
+        "google-auth-library": "^7.11.0",
+        "inquirer": "^8.2.0",
+        "js-yaml": "^3.13.1",
+        "jsonwebtoken": "^9.0.0",
+        "leven": "^3.1.0",
+        "libsodium-wrappers": "^0.7.10",
+        "lodash": "^4.17.21",
+        "marked": "^4.0.14",
+        "marked-terminal": "^5.1.1",
+        "mime": "^2.5.2",
+        "minimatch": "^3.0.4",
+        "morgan": "^1.10.0",
+        "node-fetch": "^2.6.7",
+        "open": "^6.3.0",
+        "ora": "^5.4.1",
+        "p-limit": "^3.0.1",
+        "portfinder": "^1.0.32",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.3.0",
+        "request": "^2.87.0",
+        "retry": "^0.13.1",
+        "rimraf": "^3.0.0",
+        "semver": "^7.5.2",
+        "stream-chain": "^2.2.4",
+        "stream-json": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "superstatic": "^9.0.3",
+        "tar": "^6.1.11",
+        "tcp-port-used": "^1.0.2",
+        "tmp": "^0.2.1",
+        "triple-beam": "^1.3.0",
+        "universal-analytics": "^0.5.3",
+        "update-notifier-cjs": "^5.1.6",
+        "uuid": "^8.3.2",
+        "winston": "^3.0.0",
+        "winston-transport": "^4.4.0",
+        "ws": "^7.2.3"
+      },
+      "bin": {
+        "firebase": "lib/bin/firebase.js"
+      },
+      "engines": {
+        "node": ">=16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
+    },
+    "node_modules/firebase-tools/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/google-auth-library": {
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.14.1.tgz",
+      "integrity": "sha512-5Rk7iLNDFhFeBYc3s8l1CqzbEBcdhwR193RlD4vSNFajIcINKI8W8P0JLmBpwymHqqWbX34pJDQu39cSy/6RsA==",
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^4.0.0",
+        "gcp-metadata": "^4.2.0",
+        "gtoken": "^5.0.4",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/firebase-tools/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/flagged-respawn": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
+      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "~2.0.3"
+      },
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat/node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
+    },
+    "node_modules/flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "node_modules/flush-write-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/flush-write-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/flush-write-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/fn-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
+      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fn.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+      "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/for-own": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+      "dependencies": {
+        "for-in": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "dependencies": {
+        "map-cache": "^0.2.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/front-matter": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz",
+      "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.4.6"
+      }
+    },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/fs-extra/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/fs-mkdirp-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
+      "integrity": "sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=",
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "through2": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/fs-mkdirp-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/fs-mkdirp-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/fs-mkdirp-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/fs-mkdirp-stream/node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "node_modules/gauge": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.3",
+        "console-control-strings": "^1.1.0",
+        "has-unicode": "^2.0.1",
+        "signal-exit": "^3.0.7",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.5"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/gauge/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gauge/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gauge/node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
+    "node_modules/gaxios": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.3.0.tgz",
+      "integrity": "sha512-pHplNbslpwCLMyII/lHPWFQbJWOX0B3R1hwBEOvzYi1GmdKZruuEHK4N9V6f7tf1EaPYyF80mui1+344p6SmLg==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-4.3.0.tgz",
+      "integrity": "sha512-L9XQUpvKJCM76YRSmcxrR4mFPzPGsgZUH+GgHMxAET8qc6+BhRJq63RLhWakgEO2KKVgeSDVfyiNjkGSADwNTA==",
+      "dependencies": {
+        "gaxios": "^4.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "dev": true,
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "node_modules/generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "dev": true,
+      "dependencies": {
+        "is-property": "^1.0.0"
+      }
+    },
+    "node_modules/generic-names": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
+      "integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==",
+      "dependencies": {
+        "loader-utils": "^1.1.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-uri": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.2.tgz",
+      "integrity": "sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.0",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/get-uri/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "dependencies": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-base/node_modules/glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^2.0.0"
+      }
+    },
+    "node_modules/glob-base/node_modules/is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-base/node_modules/is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob-slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/glob-slash/-/glob-slash-1.0.0.tgz",
+      "integrity": "sha512-ZwFh34WZhZX28ntCMAP1mwyAJkn8+Omagvt/GvA+JQM/qgT0+MR2NPF3vhvgdshfdvDyGZXs8fPXW84K32Wjuw=="
+    },
+    "node_modules/glob-slasher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/glob-slasher/-/glob-slasher-1.0.1.tgz",
+      "integrity": "sha512-5MUzqFiycIKLMD1B0dYOE4hGgLLUZUNGGYO4BExdwT32wUwW3DBOE7lMQars7vB1q43Fb3Tyt+HmgLKsJhDYdg==",
+      "dependencies": {
+        "glob-slash": "^1.0.0",
+        "lodash.isobject": "^2.4.1",
+        "toxic": "^1.0.0"
+      }
+    },
+    "node_modules/glob-stream": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-6.1.0.tgz",
+      "integrity": "sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=",
+      "dependencies": {
+        "extend": "^3.0.0",
+        "glob": "^7.1.1",
+        "glob-parent": "^3.1.0",
+        "is-negated-glob": "^1.0.0",
+        "ordered-read-streams": "^1.0.0",
+        "pumpify": "^1.3.5",
+        "readable-stream": "^2.1.5",
+        "remove-trailing-separator": "^1.0.1",
+        "to-absolute-glob": "^2.0.0",
+        "unique-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/glob-stream/node_modules/glob-parent": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "dependencies": {
+        "is-glob": "^3.1.0",
+        "path-dirname": "^1.0.0"
+      }
+    },
+    "node_modules/glob-stream/node_modules/is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "dependencies": {
+        "is-extglob": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/glob-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/glob-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/glob-watcher": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.5.tgz",
+      "integrity": "sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==",
+      "dependencies": {
+        "anymatch": "^2.0.0",
+        "async-done": "^1.2.0",
+        "chokidar": "^2.0.0",
+        "is-negated-glob": "^1.0.0",
+        "just-debounce": "^1.0.0",
+        "normalize-path": "^3.0.0",
+        "object.defaults": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/anymatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+      "dependencies": {
+        "micromatch": "^3.1.4",
+        "normalize-path": "^2.1.1"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/anymatch/node_modules/normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dependencies": {
+        "remove-trailing-separator": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dependencies": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/chokidar": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+      "deprecated": "Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies",
+      "dependencies": {
+        "anymatch": "^2.0.0",
+        "async-each": "^1.0.1",
+        "braces": "^2.3.2",
+        "glob-parent": "^3.1.0",
+        "inherits": "^2.0.3",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "normalize-path": "^3.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.2.1",
+        "upath": "^1.1.1"
+      },
+      "optionalDependencies": {
+        "fsevents": "^1.2.7"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/glob-parent": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "dependencies": {
+        "is-glob": "^3.1.0",
+        "path-dirname": "^1.0.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/glob-parent/node_modules/is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "dependencies": {
+        "is-extglob": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "dependencies": {
+        "binary-extensions": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/glob-watcher/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/glob-watcher/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/global-dirs/node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dependencies": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globule": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/glogg": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz",
+      "integrity": "sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==",
+      "dependencies": {
+        "sparkles": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/gonzales-pe-sl": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz",
+      "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=",
+      "dev": true,
+      "dependencies": {
+        "minimist": "1.1.x"
+      },
+      "bin": {
+        "gonzales": "bin/gonzales.js"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/gonzales-pe-sl/node_modules/minimist": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+      "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
+      "dev": true
+    },
+    "node_modules/google-auth-library": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.8.0.tgz",
+      "integrity": "sha512-I2DPwbBbQicoLqPbUOcq7oxtWewbLO6Za2jZ5QM9Lz1hXxPJVXYXBUrb8lP9626SRTQQWIzNSWJuEDtu0pI4ag==",
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^4.0.0",
+        "gcp-metadata": "^4.2.0",
+        "gtoken": "^5.0.4",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/google-auth-library/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/google-auth-library/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/google-gax": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-2.24.3.tgz",
+      "integrity": "sha512-0Rb2i2GWCEEYi1/EjQt1QsFW2Jwzm1ob21kYc7UpOmkfsmTXuyhzK7Aeyxxpo7QT/Qh+50vqER1b2ruq6WGDXg==",
+      "dependencies": {
+        "@grpc/grpc-js": "~1.3.0",
+        "@grpc/proto-loader": "^0.6.1",
+        "@types/long": "^4.0.0",
+        "abort-controller": "^3.0.0",
+        "duplexify": "^4.0.0",
+        "fast-text-encoding": "^1.0.3",
+        "google-auth-library": "^7.6.1",
+        "is-stream-ended": "^0.1.4",
+        "node-fetch": "^2.6.1",
+        "object-hash": "^2.1.1",
+        "proto3-json-serializer": "^0.1.1",
+        "protobufjs": "6.11.2",
+        "retry-request": "^4.0.0"
+      },
+      "bin": {
+        "compileProtos": "build/tools/compileProtos.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/google-p12-pem": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-3.1.0.tgz",
+      "integrity": "sha512-JUtEHXL4DY/N+xhlm7TC3qL797RPAtk0ZGXNs3/gWyiDHYoA/8Rjes0pztkda+sZv4ej1EoO2KhWgW5V9KTrSQ==",
+      "dependencies": {
+        "node-forge": "^0.10.0"
+      },
+      "bin": {
+        "gp12-pem": "build/src/bin/gp12-pem.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gorko": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/gorko/-/gorko-0.8.0.tgz",
+      "integrity": "sha512-b0ZynKheIrCa4SsqKlNzOUuzbrpcgg9/vl4FmAWcZyXBw4RNDZz2We/wy4qZ60rHpd2u7GjVN76rLoRZIiRVPA==",
+      "dependencies": {
+        "sass": "^1.26.5"
+      }
+    },
+    "node_modules/got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "dev": true,
+      "dependencies": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/got/node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.x"
+      }
+    },
+    "node_modules/gtoken": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-5.3.0.tgz",
+      "integrity": "sha512-mCcISYiaRZrJpfqOs0QWa6lfEM/C1V9ASkzFmuz43XBb5s1Vynh+CZy1ECeeJXVGx2PRByjYzb4Y4/zr1byr0w==",
+      "dependencies": {
+        "gaxios": "^4.0.0",
+        "google-p12-pem": "^3.0.3",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gts/-/gts-3.1.0.tgz",
+      "integrity": "sha512-Pbj3ob1VR1IRlEVEBNtKoQ1wHOa8cZz62KEojK8Fn/qeS2ClWI4gLNfhek3lD68aZSmUEg8TFb6AHXIwUMgyqQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.2.0",
+        "@typescript-eslint/parser": "^4.2.0",
+        "chalk": "^4.1.0",
+        "eslint": "^7.10.0",
+        "eslint-config-prettier": "^7.0.0",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "execa": "^5.0.0",
+        "inquirer": "^7.3.3",
+        "json5": "^2.1.3",
+        "meow": "^9.0.0",
+        "ncp": "^2.0.0",
+        "prettier": "^2.1.2",
+        "rimraf": "^3.0.2",
+        "update-notifier": "^5.0.0",
+        "write-file-atomic": "^3.0.3"
+      },
+      "bin": {
+        "gts": "build/src/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "typescript": ">=3"
+      }
+    },
+    "node_modules/gts/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gts/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/gts/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/gts/node_modules/cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/gts/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/gts/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/gts/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gts/node_modules/inquirer": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.19",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.6.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/gts/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/gts/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gts/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gts/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/gulp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/gulp/-/gulp-4.0.2.tgz",
+      "integrity": "sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==",
+      "dependencies": {
+        "glob-watcher": "^5.0.3",
+        "gulp-cli": "^2.2.0",
+        "undertaker": "^1.2.1",
+        "vinyl-fs": "^3.0.0"
+      },
+      "bin": {
+        "gulp": "bin/gulp.js"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/gulp-sass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.0.0.tgz",
+      "integrity": "sha512-J0aH0/2N4+2szGCeut0ktGHK0Wg8L9uWivuigrl7xv+nhxozBQRAKLrhnDDaTa3FeUWYtgT8w4RlgdhRy5v16w==",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "lodash": "^4.17.20",
+        "plugin-error": "^1.0.1",
+        "replace-ext": "^2.0.0",
+        "strip-ansi": "^6.0.0",
+        "transfob": "^1.0.0",
+        "vinyl-sourcemaps-apply": "^0.2.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/gulp-sass/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/replace-ext": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+      "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gulp-sass/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/gulp/node_modules/ansi-colors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+      "dependencies": {
+        "ansi-wrap": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/camelcase": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+      "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/cliui": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "dependencies": {
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wrap-ansi": "^2.0.0"
+      }
+    },
+    "node_modules/gulp/node_modules/find-up": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+      "dependencies": {
+        "path-exists": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/get-caller-file": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+    },
+    "node_modules/gulp/node_modules/gulp-cli": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.3.0.tgz",
+      "integrity": "sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==",
+      "dependencies": {
+        "ansi-colors": "^1.0.1",
+        "archy": "^1.0.0",
+        "array-sort": "^1.0.0",
+        "color-support": "^1.1.3",
+        "concat-stream": "^1.6.0",
+        "copy-props": "^2.0.1",
+        "fancy-log": "^1.3.2",
+        "gulplog": "^1.0.0",
+        "interpret": "^1.4.0",
+        "isobject": "^3.0.1",
+        "liftoff": "^3.1.0",
+        "matchdep": "^2.0.0",
+        "mute-stdout": "^1.0.0",
+        "pretty-hrtime": "^1.0.0",
+        "replace-homedir": "^1.0.0",
+        "semver-greatest-satisfied-range": "^1.1.0",
+        "v8flags": "^3.2.0",
+        "yargs": "^7.1.0"
+      },
+      "bin": {
+        "gulp": "bin/gulp.js"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/gulp/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/path-exists": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+      "dependencies": {
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/path-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "dependencies": {
+        "load-json-file": "^1.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "dependencies": {
+        "find-up": "^1.0.0",
+        "read-pkg": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/require-main-filename": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+    },
+    "node_modules/gulp/node_modules/string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/which-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+    },
+    "node_modules/gulp/node_modules/wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "dependencies": {
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp/node_modules/y18n": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
+    },
+    "node_modules/gulp/node_modules/yargs": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.2.tgz",
+      "integrity": "sha512-ZEjj/dQYQy0Zx0lgLMLR8QuaqTihnxirir7EwUHp1Axq4e3+k8jXU5K0VLbNvedv1f4EWtBonDIZm0NUr+jCcA==",
+      "dependencies": {
+        "camelcase": "^3.0.0",
+        "cliui": "^3.2.0",
+        "decamelize": "^1.1.1",
+        "get-caller-file": "^1.0.1",
+        "os-locale": "^1.4.0",
+        "read-pkg-up": "^1.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^1.0.1",
+        "set-blocking": "^2.0.0",
+        "string-width": "^1.0.2",
+        "which-module": "^1.0.0",
+        "y18n": "^3.2.1",
+        "yargs-parser": "^5.0.1"
+      }
+    },
+    "node_modules/gulp/node_modules/yargs-parser": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.1.tgz",
+      "integrity": "sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==",
+      "dependencies": {
+        "camelcase": "^3.0.0",
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/gulplog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
+      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
+      "dependencies": {
+        "glogg": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/hamljs": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
+      "integrity": "sha1-e3EWz22+cnjkKz9u+HJaM+F3yOM="
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/handlebars/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/hard-rejection": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "optional": true
+    },
+    "node_modules/has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "dependencies": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/kind-of": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+      "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hash-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hash-string/-/hash-string-1.0.0.tgz",
+      "integrity": "sha1-w/oV8Hjd0WvBULQXb95wkWIPLH8="
+    },
+    "node_modules/hdr-histogram-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hdr-histogram-js/-/hdr-histogram-js-2.0.3.tgz",
+      "integrity": "sha512-Hkn78wwzWHNCp2uarhzQ2SGFLU3JY8SBDDd3TAABK4fc30wm+MuPOrg5QVFVfkKOQd6Bfz3ukJEI+q9sXEkK1g==",
+      "dependencies": {
+        "@assemblyscript/loader": "^0.10.1",
+        "base64-js": "^1.2.0",
+        "pako": "^1.0.3"
+      }
+    },
+    "node_modules/hdr-histogram-percentiles-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz",
+      "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw=="
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/heap-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/heap-js/-/heap-js-2.3.0.tgz",
+      "integrity": "sha512-E5303mzwQ+4j/n2J0rDvEPBN7GKjhis10oHiYOgjxsmxYgqG++hz9NyLLOXttzH8as/DyiBHYpUrJTZWYaMo8Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/hex-color-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
+    },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+    },
+    "node_modules/hsl-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
+      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4="
+    },
+    "node_modules/hsla-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
+      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
+    },
+    "node_modules/html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="
+    },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
+      "devOptional": true
+    },
+    "node_modules/http-equiv-refresh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
+      "integrity": "sha1-jsU4hmBCvl8/evpzfRmNlL6xsHs=",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-errors/node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-errors/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-link-header": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-0.8.0.tgz",
+      "integrity": "sha1-oitBoMmx4tj6wb8baXxr1TLV9eQ="
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.0.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz",
+      "integrity": "sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "ci-info": "^2.0.0",
+        "compare-versions": "^3.6.0",
+        "cosmiconfig": "^7.0.0",
+        "find-versions": "^4.0.0",
+        "opencollective-postinstall": "^2.0.2",
+        "pkg-dir": "^5.0.0",
+        "please-upgrade-node": "^3.2.0",
+        "slash": "^3.0.0",
+        "which-pm-runs": "^1.0.0"
+      },
+      "bin": {
+        "husky-run": "bin/run.js",
+        "husky-upgrade": "lib/upgrader/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/husky"
+      }
+    },
+    "node_modules/husky/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/husky/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/husky/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/husky/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/husky/node_modules/cosmiconfig": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/husky/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/husky/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/husky/node_modules/pkg-dir": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+      "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/husky/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/husky/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/husky/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+    },
+    "node_modules/idb": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
+      "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-ssim": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz",
+      "integrity": "sha1-g7Qsei5uS4VQVHf+aRf128VkIOU="
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
+    "node_modules/immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dependencies": {
+        "import-from": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dependencies": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-from/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "node_modules/inquirer": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
+      "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==",
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/inquirer/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/inquirer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/inquirer/node_modules/cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/inquirer/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/inquirer/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/inquirer/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/inquirer/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/install-artifact-from-github": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/install-artifact-from-github/-/install-artifact-from-github-1.3.3.tgz",
+      "integrity": "sha512-x79SL0d8WOi1ZjXSTUqqs0GPQZ92YArJAN9O46wgU9wdH2U9ecyyhB9YGDbPe2OLV4ptmt6AZYRQZ2GydQZosQ==",
+      "optional": true,
+      "bin": {
+        "install-from-cache": "bin/install-from-cache.js",
+        "save-to-github-cache": "bin/save-to-github-cache.js"
+      }
+    },
+    "node_modules/interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/intl-list-format": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/intl-list-format/-/intl-list-format-1.0.3.tgz",
+      "integrity": "sha512-VNF1Mh0K1xALXkz/5QsK1gfKRvEQO/jWaniTGAzQvbzGr5uyGDskQrRjnf6Qnbc9/JRbNE8BQtTg6iWuFrZorw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/intl-messageformat": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-4.4.0.tgz",
+      "integrity": "sha512-z+Bj2rS3LZSYU4+sNitdHrwnBhr0wO80ZJSW8EzKDBowwUe3Q/UsvgCGjrwa+HPzoGCLEb9HAjfJgo4j2Sac8w==",
+      "dependencies": {
+        "intl-messageformat-parser": "^1.8.1"
+      }
+    },
+    "node_modules/intl-messageformat-parser": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.8.1.tgz",
+      "integrity": "sha512-IMSCKVf0USrM/959vj3xac7s8f87sc+80Y/ipBzdKy4ifBv5Gsj2tZ41EAaURVg01QU71fYr77uA8Meh6kELbg==",
+      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser"
+    },
+    "node_modules/invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
+      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg=="
+    },
+    "node_modules/ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/irregular-plurals": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.4.0.tgz",
+      "integrity": "sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-absolute": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+      "dependencies": {
+        "is-relative": "^1.0.0",
+        "is-windows": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-absolute-url": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
+      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-accessor-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumeric": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz",
+      "integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dev": true,
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.2.tgz",
+      "integrity": "sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.1.tgz",
+      "integrity": "sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dependencies": {
+        "ci-info": "^2.0.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-color-stop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
+      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
+      "dependencies": {
+        "css-color-names": "^0.0.4",
+        "hex-color-regex": "^1.1.0",
+        "hsl-regex": "^1.0.0",
+        "hsla-regex": "^1.0.0",
+        "rgb-regex": "^1.0.1",
+        "rgba-regex": "^1.0.0"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
+      "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dependencies": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-descriptor/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-empty": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz",
+      "integrity": "sha1-3pu1snhzigWgsJpX4ftNSjQan2s=",
+      "dev": true
+    },
+    "node_modules/is-equal-shallow": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
+      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
+      "dev": true,
+      "dependencies": {
+        "is-primitive": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-expression": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-hidden": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-hidden/-/is-hidden-1.1.3.tgz",
+      "integrity": "sha512-FFzhGKA9h59OFxeaJl0W5ILTYetI8WsdqdofKr69uLKZdV6hbDKxj8vkpG3L9uS/6Q/XYh1tkXm6xwRGFweETA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-lambda": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+      "optional": true
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
+    },
+    "node_modules/is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
+      "dev": true
+    },
+    "node_modules/is-my-json-valid": {
+      "version": "2.20.5",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.5.tgz",
+      "integrity": "sha512-VTPuvvGQtxvCeghwspQu1rBgjYUT6FGxPlvFKbYuFtgc4ADsX3U5ihZOYN0qyU6u+d4X9xXb0IT5O6QpXKt87A==",
+      "dev": true,
+      "dependencies": {
+        "generate-function": "^2.0.0",
+        "generate-object-property": "^1.1.0",
+        "is-my-ip-valid": "^1.0.0",
+        "jsonpointer": "^4.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "node_modules/is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-npm": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
+      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-like": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/is-number-like/-/is-number-like-1.0.8.tgz",
+      "integrity": "sha512-6rZi3ezCyFcn5L71ywzz2bS5b2Igl1En3eTlZlvKjpz1n3IZLAYMbKYAIQgFmEu0GENg92ziU/faEOA/aixjbA==",
+      "dependencies": {
+        "lodash.isfinite": "^3.3.2"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.5.tgz",
+      "integrity": "sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
+      "integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-posix-bracket": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
+      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
+      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
+      "dev": true
+    },
+    "node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
+      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+      "dependencies": {
+        "is-unc-path": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-resolvable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-stream-ended": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-stream-ended/-/is-stream-ended-0.1.4.tgz",
+      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw=="
+    },
+    "node_modules/is-string": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
+      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "node_modules/is-unc-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+      "dependencies": {
+        "unc-path-regex": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
+    },
+    "node_modules/is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+    },
+    "node_modules/is-valid-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
+      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-whitespace": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
+      "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-whitespace-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-word-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+    },
+    "node_modules/is2": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/is2/-/is2-2.0.9.tgz",
+      "integrity": "sha512-rZkHeBn9Zzq52sd9IUIV3a5mfwBY+o2HePMh0wkGBM4z4qjvy2GwVxQ6nNXSfw6MmVP6gf1QIlWjiOavhM3x5g==",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "ip-regex": "^4.1.0",
+        "is-url": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=v0.10.0"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+    },
+    "node_modules/iso-639-1": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.9.tgz",
+      "integrity": "sha512-owRu9up+Cpx/hwSzm83j6G8PtC7U99UCtPVItsafefNfEgMl+pi8KBwhXwJkJfp6IouyYWFxj8n24SvCWpKZEQ==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isomorphic-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz",
+      "integrity": "sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==",
+      "dependencies": {
+        "node-fetch": "^2.6.1",
+        "whatwg-fetch": "^3.4.1"
+      }
+    },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dependencies": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "dev": true,
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-reports/node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "optional": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jake/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jake/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/jake/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
+    },
+    "node_modules/join-path": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/join-path/-/join-path-1.1.1.tgz",
+      "integrity": "sha512-jnt9OC34sLXMLJ6YfPQ2ZEKrR9mB5ZbSnQb4LPaOx1c5rTzxpR33L18jjp0r75mGGTJmsil3qwN1B5IBeTnSSA==",
+      "dependencies": {
+        "as-array": "^2.0.0",
+        "url-join": "0.0.1",
+        "valid-url": "^1"
+      }
+    },
+    "node_modules/jpeg-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
+      "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
+    },
+    "node_modules/js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
+    "node_modules/js-beautify": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.0.tgz",
+      "integrity": "sha512-yuck9KirNSCAwyNJbqW+BxJqJ0NLJ4PwBUzQQACl5O3qHMBXVkXb/rD0ilh/Lat/tn88zSZ+CAHOlk0DsY7GuQ==",
+      "dependencies": {
+        "config-chain": "^1.1.12",
+        "editorconfig": "^0.15.3",
+        "glob": "^7.1.3",
+        "nopt": "^5.0.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
+    "node_modules/js-library-detector": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.4.0.tgz",
+      "integrity": "sha512-NB2sYpmgqiTd7PNNhgp6bnEZmjvTUdAbzxABvYXWLpTL/t158T6mPnD8uYNd0FDP73YWyMrTYDvPxqdvCTbv2g=="
+    },
+    "node_modules/js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "dependencies": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "node_modules/jsdoc": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.2.tgz",
+      "integrity": "sha512-e8cIg2z62InH7azBBi3EsSEqrKx+nUtAS5bBcYTSpZFA+vhNPyhv8PTFZ0WsjOPDj04/dOLlm08EDcQJDqaGQg==",
+      "dependencies": {
+        "@babel/parser": "^7.20.15",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "bin": {
+        "jsdoc": "jsdoc.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/jsdoc/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jsdoc/node_modules/markdown-it-anchor": {
+      "version": "8.6.7",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz",
+      "integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/jsdoc/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
+      "dev": true
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "node_modules/json-parse-helpfulerror": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz",
+      "integrity": "sha512-XgP0FGR77+QhUxjXkwOMkC94k3WtqEBfcnjWqhRd82qTat4SWKRE+9kUnynz/shm3I4ea2+qISvTIeGTNU7kJg==",
+      "dependencies": {
+        "jju": "^1.1.0"
+      }
+    },
+    "node_modules/json-ptr": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-ptr/-/json-ptr-3.1.1.tgz",
+      "integrity": "sha512-SiSJQ805W1sDUCD1+/t1/1BIrveq2Fe9HJqENxZmMCILmrPI7WhS/pePpIOx85v6/H2z1Vy7AI08GV2TzfXocg=="
+    },
+    "node_modules/json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "dev": true,
+      "dependencies": {
+        "jsonify": "~0.0.0"
+      }
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
+    "node_modules/json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
+      "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/jsonpointer": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.1.0.tgz",
+      "integrity": "sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "node_modules/jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+      "dependencies": {
+        "is-promise": "^2.0.0",
+        "promise": "^7.0.1"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.0.tgz",
+      "integrity": "sha512-Y2OlFIzrDOPWUnpU0LORIcDn2xN7rC9yKffFM/7pGhQuhO+SUhfm2trkJ/S5amjFvem0Y+1EALz/MEPkvHXVNw==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/junk": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
+      "integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/just-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.1.0.tgz",
+      "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ=="
+    },
+    "node_modules/jwa": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+      "integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "dependencies": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/karma": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.0.tgz",
+      "integrity": "sha512-s8m7z0IF5g/bS5ONT7wsOavhW4i4aFkzD4u4wgzAQWT4HGUeWI3i21cK2Yz6jndMAeHETp5XuNsRoyGJZXVd4w==",
+      "dev": true,
+      "dependencies": {
+        "@colors/colors": "1.5.0",
+        "body-parser": "^1.19.0",
+        "braces": "^3.0.2",
+        "chokidar": "^3.5.1",
+        "connect": "^3.7.0",
+        "di": "^0.0.1",
+        "dom-serialize": "^2.2.1",
+        "glob": "^7.1.7",
+        "graceful-fs": "^4.2.6",
+        "http-proxy": "^1.18.1",
+        "isbinaryfile": "^4.0.8",
+        "lodash": "^4.17.21",
+        "log4js": "^6.4.1",
+        "mime": "^2.5.2",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.5",
+        "qjobs": "^1.2.0",
+        "range-parser": "^1.2.1",
+        "rimraf": "^3.0.2",
+        "socket.io": "^4.4.1",
+        "source-map": "^0.6.1",
+        "tmp": "^0.2.1",
+        "ua-parser-js": "^0.7.30",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "karma": "bin/karma"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/karma-chrome-launcher": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
+      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
+      "dev": true,
+      "dependencies": {
+        "which": "^1.2.1"
+      }
+    },
+    "node_modules/karma-chrome-launcher/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/karma-coverage": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.2.0.tgz",
+      "integrity": "sha512-gPVdoZBNDZ08UCzdMHHhEImKrw1+PAOQOIiffv1YsvxFhBjqvo/SVXNk4tqn1SYqX0BJZT6S/59zgxiBe+9OuA==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.1",
+        "istanbul-reports": "^3.0.5",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/karma-coverage/node_modules/istanbul-lib-instrument": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/karma-coverage/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/karma-mocha": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz",
+      "integrity": "sha512-Tzd5HBjm8his2OA4bouAsATYEpZrp9vC7z5E5j4C5Of5Rrs1jY67RAwXNcVmd/Bnk1wgvQRou0zGVLey44G4tQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.3"
+      }
+    },
+    "node_modules/karma-sourcemap-loader": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.8.tgz",
+      "integrity": "sha512-zorxyAakYZuBcHRJE+vbrK2o2JXLFWK8VVjiT/6P+ltLBUGUvqTEkUiQ119MGdOrK7mrmxXHZF1/pfT6GgIZ6g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "node_modules/karma-spec-reporter": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.34.tgz",
+      "integrity": "sha512-l5H/Nh9q4g2Ysx2CDU2m+NIPyLQpCVbk9c4V02BTZHw3NM6RO1dq3eRpKXCSSdPt4RGfhHk8jDt3XYkGp+5PWg==",
+      "dev": true,
+      "dependencies": {
+        "colors": "1.4.0"
+      },
+      "peerDependencies": {
+        "karma": ">=0.9"
+      }
+    },
+    "node_modules/karma/node_modules/connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/karma/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/karma/node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/karma/node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/karma/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/karma/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/karma/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/karma/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
+    "node_modules/karma/node_modules/ua-parser-js": {
+      "version": "0.7.32",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz",
+      "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/karma/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dependencies": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.3.0.tgz",
+      "integrity": "sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==",
+      "dev": true
+    },
+    "node_modules/kuler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+      "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="
+    },
+    "node_modules/last-run": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz",
+      "integrity": "sha1-RblpQsF7HHnHchmCWbqUO+v4yls=",
+      "dependencies": {
+        "default-resolution": "^2.0.0",
+        "es6-weak-map": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "dev": true,
+      "dependencies": {
+        "package-json": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
+      "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "dependencies": {
+        "invert-kv": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lead": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lead/-/lead-1.0.0.tgz",
+      "integrity": "sha1-bxT5mje+Op3XhPVJVpDlkDRm7kI=",
+      "dependencies": {
+        "flush-write-stream": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/libsodium": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/libsodium/-/libsodium-0.7.13.tgz",
+      "integrity": "sha512-mK8ju0fnrKXXfleL53vtp9xiPq5hKM0zbDQtcxQIsSmxNgSxqCj6R7Hl9PkrNe2j29T4yoDaF7DJLK9/i5iWUw=="
+    },
+    "node_modules/libsodium-wrappers": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/libsodium-wrappers/-/libsodium-wrappers-0.7.13.tgz",
+      "integrity": "sha512-kasvDsEi/r1fMzKouIDv7B8I6vNmknXwGiYodErGuESoFTohGSKZplFtVxZqHaoQ217AynyIFgnOVRitpHs0Qw==",
+      "dependencies": {
+        "libsodium": "^0.7.13"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/liftoff": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-3.1.0.tgz",
+      "integrity": "sha512-DlIPlJUkCV0Ips2zf2pJP0unEoT1kwYhiiPUGF3s/jtxTCjziNLoiVVh+jqWOWeFi6mmwQ5fNxvAUyPad4Dfog==",
+      "dependencies": {
+        "extend": "^3.0.0",
+        "findup-sync": "^3.0.0",
+        "fined": "^1.0.1",
+        "flagged-respawn": "^1.0.0",
+        "is-plain-object": "^2.0.4",
+        "object.map": "^1.0.0",
+        "rechoir": "^0.6.2",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/lighthouse": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-9.3.1.tgz",
+      "integrity": "sha512-OYYnx7kH2qhmgJDHSKzLuSSqO1/4psgtyDM/Y8Kouv0sAOITpSDZShjBe0vjTMjLl/ng7bqN+yD9yJBCu+rt1w==",
+      "dependencies": {
+        "axe-core": "4.3.5",
+        "chrome-launcher": "^0.15.0",
+        "configstore": "^5.0.1",
+        "csp_evaluator": "1.1.0",
+        "cssstyle": "1.2.1",
+        "enquirer": "^2.3.6",
+        "http-link-header": "^0.8.0",
+        "intl-messageformat": "^4.4.0",
+        "jpeg-js": "^0.4.3",
+        "js-library-detector": "^6.4.0",
+        "lighthouse-logger": "^1.3.0",
+        "lighthouse-stack-packs": "^1.7.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "lodash.set": "^4.3.2",
+        "lookup-closest-locale": "6.2.0",
+        "metaviewport-parser": "0.2.0",
+        "open": "^8.4.0",
+        "parse-cache-control": "1.0.1",
+        "ps-list": "^8.0.0",
+        "raven": "^2.2.1",
+        "robots-parser": "^3.0.0",
+        "semver": "^5.3.0",
+        "speedline-core": "^1.4.3",
+        "third-party-web": "^0.12.7",
+        "ws": "^7.0.0",
+        "yargs": "^17.3.1",
+        "yargs-parser": "^21.0.0"
+      },
+      "bin": {
+        "chrome-debug": "lighthouse-core/scripts/manual-chrome-launcher.js",
+        "lighthouse": "lighthouse-cli/index.js",
+        "smokehouse": "lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js"
+      },
+      "engines": {
+        "node": ">=14.15"
+      }
+    },
+    "node_modules/lighthouse-logger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.3.0.tgz",
+      "integrity": "sha512-BbqAKApLb9ywUli+0a+PcV04SyJ/N1q/8qgCNe6U97KbPCS1BTksEuHFLYdvc8DltuhfxIUBqDZsC0bBGtl3lA==",
+      "dependencies": {
+        "debug": "^2.6.9",
+        "marky": "^1.2.2"
+      }
+    },
+    "node_modules/lighthouse-logger/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/lighthouse-logger/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/lighthouse-stack-packs": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lighthouse-stack-packs/-/lighthouse-stack-packs-1.7.0.tgz",
+      "integrity": "sha512-ggLg9V6Hs31Qcn29L2fwKsaQq8L5t+mIv3lNqwd85bc7zFxpMVybK71b4w2OeBLpa0H8gATIi9fxPlP+9moMDA=="
+    },
+    "node_modules/lighthouse/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lighthouse/node_modules/open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lighthouse/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/lighthouse/node_modules/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "node_modules/linkedom": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.13.7.tgz",
+      "integrity": "sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==",
+      "dependencies": {
+        "css-select": "^4.2.1",
+        "cssom": "^0.5.0",
+        "html-escaper": "^3.0.3",
+        "htmlparser2": "^7.2.0",
+        "uhyphen": "^0.1.0"
+      }
+    },
+    "node_modules/linkedom/node_modules/cssom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+    },
+    "node_modules/linkedom/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/linkedom/node_modules/htmlparser2": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
+    "node_modules/lint-staged": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.2.tgz",
+      "integrity": "sha512-71gSwXKy649VrSU09s10uAT0rWCcY3aewhMaHyl2N84oBk4Xs9HgxvUp3AYu+bNsK4NrOYYxvSgg7FyGJ+jGcA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "5.2.0",
+        "cli-truncate": "^3.1.0",
+        "commander": "^10.0.0",
+        "debug": "^4.3.4",
+        "execa": "^7.0.0",
+        "lilconfig": "2.1.0",
+        "listr2": "^5.0.7",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-inspect": "^1.12.3",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.1",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/lint-staged/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lint-staged/node_modules/execa": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.1.1.tgz",
+      "integrity": "sha512-wH0eMf/UXckdUYnO21+HDztteVv05rq2GXksxT4fCGeHkBhw1DROXh40wcjMcRqDOWE7iPJ4n3M7e2+YFP+76Q==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/human-signals": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
+    "node_modules/lint-staged/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/liquidjs": {
+      "version": "9.43.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-9.43.0.tgz",
+      "integrity": "sha512-qZZuL5Emja2UgCqiLewiw9bvwZQwm19TTGFxDkonVzB4YSTOZ8tuTVo/7Uu/AeW1cL2Qb/at3DSoV8wwyFXQCw==",
+      "bin": {
+        "liquid": "bin/liquid.js",
+        "liquidjs": "bin/liquid.js"
+      },
+      "engines": {
+        "node": ">=4.8.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/liquidjs"
+      }
+    },
+    "node_modules/list-to-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
+      "integrity": "sha1-yn3/ZAYGQzysdcvoRGrNhksVv28="
+    },
+    "node_modules/listr2": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.8.tgz",
+      "integrity": "sha512-mC73LitKHj9w6v30nLNGPetZIlfpUniNSsxxrbaPcWOjDb92SHPzJPi/t+v1YC/lxKz/AJ9egOjww0qUuFxBpA==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.19",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.8.0",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "enquirer": ">= 2.3.0 < 3"
+      },
+      "peerDependenciesMeta": {
+        "enquirer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/cli-truncate/node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/listr2/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/listr2/node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lit": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.2.tgz",
+      "integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz",
+      "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==",
+      "dependencies": {
+        "lit-html": "^1.1.1"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz",
+      "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA=="
+    },
+    "node_modules/lit/node_modules/lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit/node_modules/lit-html": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.2.tgz",
+      "integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
+    "node_modules/load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^2.2.0",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/load-json-file/node_modules/parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "dependencies": {
+        "error-ex": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/load-plugin": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-2.3.1.tgz",
+      "integrity": "sha512-dYB1lbwqHgPTrruy9glukCu8Ya9vzj6TMfouCtj2H/GuJ+8syioisgKTBPxnCi6m8K8jINKfTOxOHngFkUYqHw==",
+      "dev": true,
+      "dependencies": {
+        "npm-prefix": "^1.2.0",
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "node_modules/load-plugin/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/loader-utils/node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/localtunnel": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.2.tgz",
+      "integrity": "sha512-n418Cn5ynvJd7m/N1d9WVJISLJF/ellZnfsLnx8WBWGzxv/ntNcFkJ1o6se5quUhCplfLGBNL5tYHiq5WF3Nug==",
+      "dependencies": {
+        "axios": "0.21.4",
+        "debug": "4.3.2",
+        "openurl": "1.1.1",
+        "yargs": "17.1.1"
+      },
+      "bin": {
+        "lt": "bin/lt.js"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/localtunnel/node_modules/yargs": {
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.1.1.tgz",
+      "integrity": "sha512-c2k48R0PwKIqKhPMWjeiF6y2xY/gPMUlro0sgxqXpbOIohWiLNXWslsootttv7E1e73QPAMQSg5FeySbVcpsPQ==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash._objecttypes": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
+      "integrity": "sha512-XpqGh1e7hhkOzftBfWE7zt+Yn9mVHFkDhicVttvKLsoCMLVVL+xTQjfjB4X4vtznauxv0QZ5ZAeqjvat0dh62Q=="
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
+    "node_modules/lodash.capitalize": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
+      "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk=",
+      "dev": true
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "node_modules/lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
+    "node_modules/lodash.isfinite": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
+      "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA=="
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
+    },
+    "node_modules/lodash.isobject": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
+      "integrity": "sha512-sTebg2a1PoicYEZXD5PBdQcTlIJ6hUslrlWr7iV0O7n+i4596s2NQ9I5CaZ5FbXSfya/9WQsrYLANUJv9paYVA==",
+      "dependencies": {
+        "lodash._objecttypes": "~2.4.1"
+      }
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
+    },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
+      "dev": true
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
+    },
+    "node_modules/lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM="
+    },
+    "node_modules/lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw=="
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw=="
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
+    },
+    "node_modules/log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-1.0.2.tgz",
+      "integrity": "sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^1.0.0",
+        "cli-cursor": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-escapes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+      "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/log-update/node_modules/cli-cursor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
+      "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/log-update/node_modules/onetime": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/log-update/node_modules/restore-cursor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
+      "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
+      "dev": true,
+      "dependencies": {
+        "exit-hook": "^1.0.0",
+        "onetime": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/log4js": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.7.0.tgz",
+      "integrity": "sha512-KA0W9ffgNBLDj6fZCq/lRbgR6ABAodRIDHrZnS48vOtfKa4PzWImb0Md1lmGCdO3n3sbCm/n1/WmrNlZ8kCI3Q==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.14",
+        "debug": "^4.3.4",
+        "flatted": "^3.2.7",
+        "rfdc": "^1.3.0",
+        "streamroller": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/log4js/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/logform": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.5.1.tgz",
+      "integrity": "sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==",
+      "dependencies": {
+        "@colors/colors": "1.5.0",
+        "@types/triple-beam": "^1.3.2",
+        "fecha": "^4.2.0",
+        "ms": "^2.1.1",
+        "safe-stable-stringify": "^2.3.1",
+        "triple-beam": "^1.3.0"
+      }
+    },
+    "node_modules/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "node_modules/longest-streak": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
+      "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lookup-closest-locale": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz",
+      "integrity": "sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ=="
+    },
+    "node_modules/lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/luxon": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/make-fetch-happen": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-11.1.1.tgz",
+      "integrity": "sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==",
+      "optional": true,
+      "dependencies": {
+        "agentkeepalive": "^4.2.1",
+        "cacache": "^17.0.0",
+        "http-cache-semantics": "^4.1.1",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "is-lambda": "^1.0.1",
+        "lru-cache": "^7.7.1",
+        "minipass": "^5.0.0",
+        "minipass-fetch": "^3.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^0.6.3",
+        "promise-retry": "^2.0.1",
+        "socks-proxy-agent": "^7.0.0",
+        "ssri": "^10.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "optional": true,
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/make-fetch-happen/node_modules/socks-proxy-agent": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^6.0.2",
+        "debug": "^4.3.3",
+        "socks": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/make-iterator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+      "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/map-obj": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.2.1.tgz",
+      "integrity": "sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "dependencies": {
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/markdown-escapes": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
+      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/markdown-extensions": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
+      "integrity": "sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-anchor": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz",
+      "integrity": "sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==",
+      "peerDependencies": {
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it-attrs": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.1.4.tgz",
+      "integrity": "sha512-53Zfv8PTb6rlVFDlD106xcZHKBSsRZKJ2IW/rTxEJBEVbVaoxaNsmRkG0HXfbHl2SK8kaxZ2QKqdthWy/QBwmA==",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
+    "node_modules/markdown-it-deflist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz",
+      "integrity": "sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg=="
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/markdown-it/node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz",
+      "integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==",
+      "dev": true
+    },
+    "node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/marked-terminal": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-5.2.0.tgz",
+      "integrity": "sha512-Piv6yNwAQXGFjZSaiNljyNFw7jKDdGrw70FSbtxEyldLsyeuV5ZHm/1wW++kWbrOF1VPnUgYOhB2oLL0ZpnekA==",
+      "dependencies": {
+        "ansi-escapes": "^6.2.0",
+        "cardinal": "^2.1.1",
+        "chalk": "^5.2.0",
+        "cli-table3": "^0.6.3",
+        "node-emoji": "^1.11.0",
+        "supports-hyperlinks": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "marked": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/marked-terminal/node_modules/ansi-escapes": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+      "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+      "dependencies": {
+        "type-fest": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/marked-terminal/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/marked-terminal/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/marky": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.2.tgz",
+      "integrity": "sha512-k1dB2HNeaNyORco8ulVEhctyEGkKHb2YWAhDsxeFlW2nROIirsctBYzKwwS3Vza+sKTS1zO4Z+n9/+9WbGLIxQ=="
+    },
+    "node_modules/matchdep": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
+      "integrity": "sha1-xvNINKDY28OzfCfui7yyfHd1WC4=",
+      "dependencies": {
+        "findup-sync": "^2.0.0",
+        "micromatch": "^3.0.4",
+        "resolve": "^1.4.0",
+        "stack-trace": "0.0.10"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dependencies": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/findup-sync": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
+      "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^3.1.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/matchdep/node_modules/is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "dependencies": {
+        "is-extglob": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/matchdep/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-random": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
+      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
+      "dev": true
+    },
+    "node_modules/maximatch": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
+      "integrity": "sha1-hs2NawTJ8wfAWmuUGZBtA2D7E6I=",
+      "dependencies": {
+        "array-differ": "^1.0.0",
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "minimatch": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/maximatch/node_modules/array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/maximatch/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/maximatch/node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
+    "node_modules/mdast-comment-marker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-comment-marker/-/mdast-comment-marker-1.1.2.tgz",
+      "integrity": "sha512-vTFXtmbbF3rgnTh3Zl3irso4LtvwUq/jaDvT2D1JqTGAwaipcS7RpTxzi6KjoRqI9n2yuAhzLDAC8xVTF3XYVQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-compact": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.4.tgz",
+      "integrity": "sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit": "^1.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-heading-style": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/mdast-util-heading-style/-/mdast-util-heading-style-1.0.6.tgz",
+      "integrity": "sha512-8ZuuegRqS0KESgjAGW8zTx4tJ3VNIiIaGFNEzFpRSAQBavVc7AvOo9I4g3crcZBfYisHs4seYh0rAVimO6HyOw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-position": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-position/-/mdast-util-position-1.0.2.tgz",
+      "integrity": "sha1-O32v8JrIq3IZrWknEdRHwalq7RM=",
+      "dev": true
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=",
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/meow": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize": "^1.2.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/meow/node_modules/hosted-git-info": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
+      "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/meow/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/meow/node_modules/normalize-package-data": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.2.tgz",
+      "integrity": "sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "resolve": "^1.20.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/meow/node_modules/type-fest": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/meow/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/merge": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==",
+      "dev": true
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/metaviewport-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.2.0.tgz",
+      "integrity": "sha1-U1w84cz2IjpQJf3cahw2UF9+fbE="
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+      "bin": {
+        "mime": "cli.js"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+    },
+    "node_modules/minimist-options": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+      "dev": true,
+      "dependencies": {
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/minimist-options/node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-collect/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-collect/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
+    "node_modules/minipass-fetch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.4.tgz",
+      "integrity": "sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^2.1.2"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/minipass-fetch/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
+    "node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/mitt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
+      "integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw=="
+    },
+    "node_modules/mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "dependencies": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mixin-deep/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
+    "node_modules/mocha": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.3.tgz",
+      "integrity": "sha512-0R/3FvjIGH3eEuG17ccFPk117XL2rWxatr81a57D+r/x2uTYZRbdZ4oVidEUMh2W2TJDa7MdAb12Lm2/qrKajg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "3.2.3",
+        "browser-stdout": "1.3.1",
+        "debug": "3.2.6",
+        "diff": "3.5.0",
+        "escape-string-regexp": "1.0.5",
+        "find-up": "3.0.0",
+        "glob": "7.1.3",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "3.13.1",
+        "log-symbols": "2.2.0",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.4",
+        "ms": "2.1.1",
+        "node-environment-flags": "1.0.5",
+        "object.assign": "4.1.0",
+        "strip-json-comments": "2.0.1",
+        "supports-color": "6.0.0",
+        "which": "1.3.1",
+        "wide-align": "1.1.3",
+        "yargs": "13.3.2",
+        "yargs-parser": "13.1.2",
+        "yargs-unparser": "1.6.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/ansi-colors": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
+      "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/mocha/node_modules/debug": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+      "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+      "deprecated": "Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/mocha/node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/glob": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mocha/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mocha/node_modules/js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/mocha/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/mkdirp": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+      "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
+      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mocha/node_modules/ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mocha/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mocha/node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mocha/node_modules/supports-color": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
+      "integrity": "sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/mocha/node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "node_modules/module-not-found-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/module-not-found-error/-/module-not-found-error-1.0.1.tgz",
+      "integrity": "sha1-z4tP9PKWQGdNbN0CsOO8UjwrvcA=",
+      "dev": true
+    },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moo": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
+      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w=="
+    },
+    "node_modules/morgan": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
+      "dependencies": {
+        "basic-auth": "~2.0.1",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/morgan/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/morgan/node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/morgan/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "dependencies": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
+    "node_modules/mute-stdout": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-1.0.1.tgz",
+      "integrity": "sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
+    },
+    "node_modules/nan": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
+      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
+      "optional": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanomatch/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanomatch/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "node_modules/ncp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
+      "dev": true,
+      "bin": {
+        "ncp": "bin/ncp"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
+    "node_modules/nice-napi": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
+      "integrity": "sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "!win32"
+      ],
+      "dependencies": {
+        "node-addon-api": "^3.0.0",
+        "node-gyp-build": "^4.2.2"
+      }
+    },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+    },
+    "node_modules/node-addon-api": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
+      "optional": true
+    },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/node-environment-flags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.5.tgz",
+      "integrity": "sha512-VNYPRfGfmZLx0Ye20jWzHUjyTW/c+6Wq+iLhDzUI4XmhrDd9l/FozXV3F2xOaXjvp0co0+v1YSR3CMP6g+VvLQ==",
+      "dev": true,
+      "dependencies": {
+        "object.getownpropertydescriptors": "^2.0.3",
+        "semver": "^5.7.0"
+      }
+    },
+    "node_modules/node-environment-flags/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.4.0.tgz",
+      "integrity": "sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==",
+      "optional": true,
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^11.0.3",
+        "nopt": "^6.0.0",
+        "npmlog": "^6.0.0",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.2",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^12.13 || ^14.13 || >=16"
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/node-gyp/node_modules/nopt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "^1.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/node-mocks-http": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/node-mocks-http/-/node-mocks-http-1.12.1.tgz",
+      "integrity": "sha512-jrA7Sn3qI6GsHgWtUW3gMj0vO6Yz0nJjzg3jRZYjcfj4tzi8oWPauDK1qHVJoAxTbwuDHF1JiM9GISZ/ocI/ig==",
+      "dependencies": {
+        "accepts": "^1.3.7",
+        "content-disposition": "^0.5.3",
+        "depd": "^1.1.0",
+        "fresh": "^0.5.2",
+        "merge-descriptors": "^1.0.1",
+        "methods": "^1.1.2",
+        "mime": "^1.3.4",
+        "parseurl": "^1.3.3",
+        "range-parser": "^1.2.0",
+        "type-is": "^1.6.18"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+    },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/now-and-later": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
+      "integrity": "sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==",
+      "dependencies": {
+        "once": "^1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/npm-prefix": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/npm-prefix/-/npm-prefix-1.2.0.tgz",
+      "integrity": "sha1-5hlFX3B0ulTMZtbQ033Z8b5ry8A=",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.1.0",
+        "shellsubstitute": "^1.1.0",
+        "untildify": "^2.1.0"
+      }
+    },
+    "node_modules/npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "bin": {
+        "npm-run-all": "bin/npm-run-all/index.js",
+        "run-p": "bin/run-p/index.js",
+        "run-s": "bin/run-s/index.js"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dependencies": {
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+      "dependencies": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npmlog": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^3.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^4.0.3",
+        "set-blocking": "^2.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+    },
+    "node_modules/number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nunjucks": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.3.tgz",
+      "integrity": "sha512-psb6xjLj47+fE76JdZwskvwG4MYsQKXUtMsPh6U0YMvmyjRtKRFcxnlXGWglNybtNTNVmGdp94K62/+NjF5FDQ==",
+      "dependencies": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "commander": "^5.1.0"
+      },
+      "bin": {
+        "nunjucks-precompile": "bin/precompile"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "dependencies": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "dependencies": {
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.defaults": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+      "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
+      "dependencies": {
+        "array-each": "^1.0.1",
+        "array-slice": "^1.0.0",
+        "for-own": "^1.0.0",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.getownpropertydescriptors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+      "integrity": "sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=",
+      "dependencies": {
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.omit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
+      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
+      "dev": true,
+      "dependencies": {
+        "for-own": "^0.1.4",
+        "is-extendable": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.omit/node_modules/for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "dependencies": {
+        "for-in": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.reduce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.reduce/-/object.reduce-1.0.1.tgz",
+      "integrity": "sha1-b+NI8qx/oPlcpiEiZZkJaCW7A60=",
+      "dependencies": {
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
+      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/one-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+      "integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
+      "dependencies": {
+        "fn.name": "1.x.x"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+      "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "dependencies": {
+        "is-wsl": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/openapi3-ts": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/openapi3-ts/-/openapi3-ts-3.2.0.tgz",
+      "integrity": "sha512-/ykNWRV5Qs0Nwq7Pc0nJ78fgILvOT/60OxEmB3v7yQ8a8Bwcm43D4diaYazG/KBn6czA+52XYy931WFLMCUeSg==",
+      "dependencies": {
+        "yaml": "^2.2.1"
+      }
+    },
+    "node_modules/openapi3-ts/node_modules/yaml": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
+      "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "dev": true,
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
+    "node_modules/openurl": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/openurl/-/openurl-1.1.1.tgz",
+      "integrity": "sha512-d/gTkTb1i1GKz5k3XE3XFV/PxQ1k45zDqGP2OA7YhgsaLoqm6qRvARAZOFer1fcXritWlGBRCu/UgeS4HAnXAA=="
+    },
+    "node_modules/opn": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
+      "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
+      "dependencies": {
+        "is-wsl": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/ora/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/ora/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ordered-read-streams": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz",
+      "integrity": "sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=",
+      "dependencies": {
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "node_modules/ordered-read-streams/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/ordered-read-streams/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/ordered-read-streams/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/os-locale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+      "dependencies": {
+        "lcid": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-defer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-3.0.0.tgz",
+      "integrity": "sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "devOptional": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
+      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
+        "pac-resolver": "^7.0.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/http-proxy-agent": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-proxy-agent/node_modules/https-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.0.tgz",
+      "integrity": "sha512-Fd9lT9vJbHYRACT8OhCbZBbxr6KRSawSovFpy8nDGshaK99S/EBhVIHp9+crhxrsZOuvLpgL1n23iyPg6Rl2hg==",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "ip": "^1.1.8",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "dev": true,
+      "dependencies": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/package-json/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parent-module/node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-cache-control": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+      "integrity": "sha1-juqz5U+laSD+Fro493+iGqzC104="
+    },
+    "node_modules/parse-entities": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "dev": true,
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
+    "node_modules/parse-filepath": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+      "integrity": "sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=",
+      "dependencies": {
+        "is-absolute": "^1.0.0",
+        "map-cache": "^0.2.0",
+        "path-root": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "dependencies": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parse-glob/node_modules/is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parse-glob/node_modules/is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE="
+    },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
+      "dev": true
+    },
+    "node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-root": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+      "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
+      "dependencies": {
+        "path-root-regex": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-root-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
+      "integrity": "sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==",
+      "optional": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/piscina": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/piscina/-/piscina-3.2.0.tgz",
+      "integrity": "sha512-yn/jMdHRw+q2ZJhFhyqsmANcbF6V2QwmD84c6xRau+QpQOmtrBCoRGdvTfeuFDYXB5W2m6MfLkjkvQa9lUSmIA==",
+      "dependencies": {
+        "eventemitter-asyncresource": "^1.0.0",
+        "hdr-histogram-js": "^2.0.1",
+        "hdr-histogram-percentiles-obj": "^3.0.0"
+      },
+      "optionalDependencies": {
+        "nice-napi": "^1.0.2"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dependencies": {
+        "semver-compare": "^1.0.0"
+      }
+    },
+    "node_modules/plugin-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+      "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+      "dependencies": {
+        "ansi-colors": "^1.0.1",
+        "arr-diff": "^4.0.0",
+        "arr-union": "^3.1.0",
+        "extend-shallow": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/plugin-error/node_modules/ansi-colors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+      "dependencies": {
+        "ansi-wrap": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/plugin-error/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/plugin-error/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/plur": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz",
+      "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=",
+      "dev": true,
+      "dependencies": {
+        "irregular-plurals": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pluralize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-1.2.1.tgz",
+      "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=",
+      "dev": true
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+      "dependencies": {
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
+      },
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/portfinder/node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/portfinder/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/portfinder/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/portscanner": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
+      "integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
+      "dependencies": {
+        "async": "^2.6.0",
+        "is-number-like": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.4",
+        "npm": ">=1.0.0"
+      }
+    },
+    "node_modules/portscanner/node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
+      "dependencies": {
+        "postcss": "^7.0.27",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
+      "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "color": "^3.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-colormin/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-colormin/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-colormin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-colormin/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
+      "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
+      "dependencies": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-convert-values/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-convert-values/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-convert-values/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-convert-values/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
+      "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-discard-comments/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-discard-comments/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-discard-comments/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
+      "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-discard-duplicates/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-discard-duplicates/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-discard-duplicates/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
+      "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-discard-empty/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-discard-empty/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-discard-empty/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
+      "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-discard-overridden/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-discard-overridden/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-discard-overridden/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
+      "dependencies": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dependencies": {
+        "import-from": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dependencies": {
+        "resolve-from": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
+      "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
+      "dependencies": {
+        "css-color-names": "0.0.4",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "stylehacks": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-merge-longhand/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-merge-longhand/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-merge-longhand/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-merge-longhand/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
+      "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-api": "^3.0.0",
+        "cssnano-util-same-parent": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0",
+        "vendors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+      "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
+      "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
+      "dependencies": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-minify-font-values/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-minify-font-values/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-minify-font-values/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-minify-font-values/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
+      "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
+      "dependencies": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "is-color-stop": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-minify-gradients/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-minify-gradients/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-minify-gradients/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-minify-gradients/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
+      "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
+      "dependencies": {
+        "alphanum-sort": "^1.0.0",
+        "browserslist": "^4.0.0",
+        "cssnano-util-get-arguments": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "uniqs": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-minify-params/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-minify-params/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-minify-params/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-minify-params/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
+      "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
+      "dependencies": {
+        "alphanum-sort": "^1.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+      "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-2.0.0.tgz",
+      "integrity": "sha512-eqp+Bva+U2cwQO7dECJ8/V+X+uH1HduNeITB0CPPFAu6d/8LKQ32/j+p9rQ2YL1QytVcrNU0X+fBqgGmQIA1Rw==",
+      "dependencies": {
+        "css-modules-loader-core": "^1.1.0",
+        "generic-names": "^2.0.1",
+        "lodash.camelcase": "^4.3.0",
+        "postcss": "^7.0.1",
+        "string-hash": "^1.1.1"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+      "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+      "dependencies": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "dependencies": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "dependencies": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "node_modules/postcss-modules-scope/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-modules-scope/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "dependencies": {
+        "icss-replace-symbols": "^1.1.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "node_modules/postcss-modules-values/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-modules-values/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
+      "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
+      "dependencies": {
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-charset/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
+      "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
+      "dependencies": {
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-display-values/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-display-values/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-display-values/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-display-values/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
+      "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
+      "dependencies": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-positions/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-positions/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-positions/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-positions/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
+      "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
+      "dependencies": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-repeat-style/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
+      "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
+      "dependencies": {
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-string/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-string/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-string/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-string/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
+      "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
+      "dependencies": {
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-timing-functions/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
+      "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-unicode/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-unicode/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-unicode/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-unicode/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
+      "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
+      "dependencies": {
+        "is-absolute-url": "^2.0.0",
+        "normalize-url": "^3.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-url/node_modules/normalize-url": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-url/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-url/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-url/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-url/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
+      "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
+      "dependencies": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-normalize-whitespace/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
+      "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
+      "dependencies": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-ordered-values/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-ordered-values/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-ordered-values/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-ordered-values/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
+      "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-api": "^3.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-reduce-initial/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-reduce-initial/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-reduce-initial/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
+      "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
+      "dependencies": {
+        "cssnano-util-get-match": "^4.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-reduce-transforms/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-reduce-transforms/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-reduce-transforms/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-reduce-transforms/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
+      "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
+      "dependencies": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "svgo": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "node_modules/postcss-svgo/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
+      "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
+      "dependencies": {
+        "alphanum-sort": "^1.0.0",
+        "postcss": "^7.0.0",
+        "uniqs": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+    },
+    "node_modules/posthtml": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.15.2.tgz",
+      "integrity": "sha512-YugEJ5ze/0DLRIVBjCpDwANWL4pPj1kHJ/2llY8xuInr0nbkon3qTiMPe5LQa+cCwNjxS7nAZZTp+1M+6mT4Zg==",
+      "dependencies": {
+        "posthtml-parser": "^0.7.2",
+        "posthtml-render": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/posthtml-parser": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.7.2.tgz",
+      "integrity": "sha512-LjEEG/3fNcWZtBfsOE3Gbyg1Li4CmsZRkH1UmbMR7nKdMXVMYI3B4/ZMiCpaq8aI1Aym4FRMMW9SAOLSwOnNsQ==",
+      "dependencies": {
+        "htmlparser2": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/posthtml-render": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-1.4.0.tgz",
+      "integrity": "sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/posthtml-urls": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
+      "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
+      "dependencies": {
+        "http-equiv-refresh": "^1.0.0",
+        "list-to-array": "^1.1.0",
+        "parse-srcset": "^1.0.2",
+        "promise-each": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/preserve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
+      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/pretty": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
+      "integrity": "sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=",
+      "dependencies": {
+        "condense-newlines": "^0.2.1",
+        "extend-shallow": "^2.0.1",
+        "js-beautify": "^1.6.12"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
+      "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/promise-breaker": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/promise-breaker/-/promise-breaker-6.0.0.tgz",
+      "integrity": "sha512-BthzO9yTPswGf7etOBiHCVuugs2N01/Q/94dIPls48z2zCmrnDptUUZzfIb+41xq0MnYZ/BzmOd6ikDR4ibNZA=="
+    },
+    "node_modules/promise-each": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
+      "integrity": "sha1-M1MXTv8mlEgQN+BOAfd6oPttG2A=",
+      "dependencies": {
+        "any-promise": "^0.1.0"
+      }
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "optional": true,
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/promise-retry/node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/promise.series": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
+      "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+    },
+    "node_modules/proto3-json-serializer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-0.1.3.tgz",
+      "integrity": "sha512-X0DAtxCBsy1NDn84huVFGOFgBslT2gBmM+85nY6/5SOAaCon1jzVNdvi74foIyFvs5CjtSbQsepsM5TsyNhqQw=="
+    },
+    "node_modules/protobufjs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.2.tgz",
+      "integrity": "sha512-4BQJoPooKJl2G9j3XftkIXjoC9C0Av2NOrWmbLWT1vH32GcSUHjM0Arra6UfTsVyfMAuFzaLucXn1sadxJydAw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.1",
+        "@types/node": ">=13.7.0",
+        "long": "^4.0.0"
+      },
+      "bin": {
+        "pbjs": "bin/pbjs",
+        "pbts": "bin/pbts"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-agent": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.3.1.tgz",
+      "integrity": "sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.0.1",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/agent-base": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/proxy-agent/node_modules/http-proxy-agent": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/https-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/proxyquire": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/proxyquire/-/proxyquire-2.1.3.tgz",
+      "integrity": "sha512-BQWfCqYM+QINd+yawJz23tbBM40VIGXOdDw3X344KcclI/gtBbdWF6SlQ4nK/bYhF9d27KYug9WzljHC6B9Ysg==",
+      "dev": true,
+      "dependencies": {
+        "fill-keys": "^1.0.2",
+        "module-not-found-error": "^1.0.1",
+        "resolve": "^1.11.1"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "node_modules/ps-list": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ps-list/-/ps-list-8.1.0.tgz",
+      "integrity": "sha512-NoGBqJe7Ou3kfQxEvDzDyKGAyEgwIuD3YrfXinjcCmBRv0hTld0Xb71hrXvtsNPj7HSFATfemvzB8PPJtq6Yag==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "node_modules/psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
+    },
+    "node_modules/pug": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
+      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
+      "dependencies": {
+        "pug-code-gen": "^3.0.2",
+        "pug-filters": "^4.0.0",
+        "pug-lexer": "^5.0.1",
+        "pug-linker": "^4.0.0",
+        "pug-load": "^3.0.0",
+        "pug-parser": "^6.0.0",
+        "pug-runtime": "^3.0.1",
+        "pug-strip-comments": "^2.0.0"
+      }
+    },
+    "node_modules/pug-attrs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "js-stringify": "^1.0.2",
+        "pug-runtime": "^3.0.0"
+      }
+    },
+    "node_modules/pug-code-gen": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
+      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "doctypes": "^1.1.0",
+        "js-stringify": "^1.0.2",
+        "pug-attrs": "^3.0.0",
+        "pug-error": "^2.0.0",
+        "pug-runtime": "^3.0.0",
+        "void-elements": "^3.1.0",
+        "with": "^7.0.0"
+      }
+    },
+    "node_modules/pug-error": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
+    },
+    "node_modules/pug-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0",
+        "resolve": "^1.15.1"
+      }
+    },
+    "node_modules/pug-lexer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+      "dependencies": {
+        "character-parser": "^2.2.0",
+        "is-expression": "^4.0.0",
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-linker": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-load": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "token-stream": "1.0.0"
+      }
+    },
+    "node_modules/pug-runtime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
+    },
+    "node_modules/pug-strip-comments": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "dependencies": {
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dependencies": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      }
+    },
+    "node_modules/pumpify/node_modules/duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dependencies": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/pumpify/node_modules/pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/pumpify/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/pumpify/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "dependencies": {
+        "escape-goat": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/puppeteer": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-12.0.1.tgz",
+      "integrity": "sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "debug": "4.3.2",
+        "devtools-protocol": "0.0.937139",
+        "extract-zip": "2.0.1",
+        "https-proxy-agent": "5.0.0",
+        "node-fetch": "2.6.5",
+        "pkg-dir": "4.2.0",
+        "progress": "2.0.3",
+        "proxy-from-env": "1.1.0",
+        "rimraf": "3.0.2",
+        "tar-fs": "2.1.1",
+        "unbzip2-stream": "1.4.3",
+        "ws": "8.2.3"
+      },
+      "engines": {
+        "node": ">=10.18.1"
+      }
+    },
+    "node_modules/puppeteer/node_modules/node-fetch": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.5.tgz",
+      "integrity": "sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/puppeteer/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/purgecss": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+      "dependencies": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "bin": {
+        "purgecss": "bin/purgecss.js"
+      }
+    },
+    "node_modules/purgecss/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "engines": {
+        "node": ">=0.6.0",
+        "teleport": ">=0.2.0"
+      }
+    },
+    "node_modules/qjobs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
+      "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.9"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/querystring": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/quick-lru": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/randomatic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
+      "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^4.0.0",
+        "kind-of": "^6.0.0",
+        "math-random": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/randomatic/node_modules/is-number": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+      "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raven": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/raven/-/raven-2.6.4.tgz",
+      "integrity": "sha512-6PQdfC4+DQSFncowthLf+B6Hr0JpPsFBgTVYTAOq7tCmx/kR4SXbeawtPch20+3QfUcQDoJBLjWW1ybvZ4kXTw==",
+      "deprecated": "Please upgrade to @sentry/node. See the migration guide https://bit.ly/3ybOlo7",
+      "dependencies": {
+        "cookie": "0.3.1",
+        "md5": "^2.2.1",
+        "stack-trace": "0.0.10",
+        "timed-out": "4.0.1",
+        "uuid": "3.3.2"
+      },
+      "bin": {
+        "raven": "bin/raven"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/raven/node_modules/cookie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raven/node_modules/uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/re2": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/re2/-/re2-1.20.3.tgz",
+      "integrity": "sha512-g5j4YjygwGEccP9SCuDI90uPlgALLEYLotfL0K+kqL3XKB4ht7Nm1JuXfOTG96c7JozpvCUxTz1T7oTNwwMI6w==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "install-artifact-from-github": "^1.3.3",
+        "nan": "^2.17.0",
+        "node-gyp": "^9.4.0"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg/node_modules/type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/readdirp": {
       "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readline2": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
+      "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=",
+      "dev": true,
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "mute-stream": "0.0.5"
+      }
+    },
+    "node_modules/readline2/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/readline2/node_modules/mute-stream": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
+      "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA=",
+      "dev": true
+    },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/recursive-copy": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
+      "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
+      "dependencies": {
+        "errno": "^0.1.2",
+        "graceful-fs": "^4.1.4",
+        "junk": "^1.0.1",
+        "maximatch": "^0.1.0",
+        "mkdirp": "^0.5.1",
+        "pify": "^2.3.0",
+        "promise": "^7.0.1",
+        "rimraf": "^2.7.1",
+        "slash": "^1.0.0"
+      }
+    },
+    "node_modules/recursive-copy/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/redeyed": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
+      "integrity": "sha512-FNpGGo1DycYAdnrKFxCMmKYgo/mILAqtRYbkdQD8Ep/Hk2PQ5+aEAEx+IU713RTDmuBaH0c8P5ZozurNu5ObRQ==",
+      "dependencies": {
+        "esprima": "~4.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+      "dev": true
+    },
+    "node_modules/regex-cache": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
+      "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==",
+      "dev": true,
+      "dependencies": {
+        "is-equal-shallow": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dependencies": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex-not/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex-not/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/remark": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-11.0.2.tgz",
+      "integrity": "sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==",
+      "dev": true,
+      "dependencies": {
+        "remark-parse": "^7.0.0",
+        "remark-stringify": "^7.0.0",
+        "unified": "^8.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-cli": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/remark-cli/-/remark-cli-7.0.1.tgz",
+      "integrity": "sha512-CUjBLLSbEay0mNwOO+pptnLIoS8UB6cHlhZVpTRKbtbIcw6YEzEfD7jGjW1HCA8lZK87IfY3/DuWE6DlXu+hfg==",
+      "dev": true,
+      "dependencies": {
+        "markdown-extensions": "^1.1.0",
+        "remark": "^11.0.0",
+        "unified-args": "^7.0.0"
+      },
+      "bin": {
+        "remark": "cli.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-frontmatter": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-1.3.3.tgz",
+      "integrity": "sha512-fM5eZPBvu2pVNoq3ZPW22q+5Ativ1oLozq2qYt9I2oNyxiUd/tDl0iLLntEVAegpZIslPWg1brhcP1VsaSVUag==",
+      "dev": true,
+      "dependencies": {
+        "fault": "^1.0.1",
+        "xtend": "^4.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/remark-lint/-/remark-lint-6.0.6.tgz",
+      "integrity": "sha512-JBY6zz5fYQFN724Vq6VeiHwhyjVIlrww/dE1+hWGcDyUuz7YNCqwZKwBdQGDvslICkzHw/wEExNEb8D4PNiLlA==",
+      "dev": true,
+      "dependencies": {
+        "remark-message-control": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/remark-lint-are-links-valid/-/remark-lint-are-links-valid-1.0.3.tgz",
+      "integrity": "sha1-G2+ZsMSnOn0hFJc0kSeJmyKxLGU=",
+      "dev": true,
+      "dependencies": {
+        "bluebird": "^3.4.0",
+        "mdast-util-to-string": "^1.0.0",
+        "object.defaults": "^0.3.0",
+        "remark": "^4.2.2",
+        "remark-lint": "^3.2.1",
+        "request-promise": "^3.0.0",
+        "unist-util-position": "^2.0.1",
+        "unist-util-visit": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/anymatch": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
+      "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^2.1.5",
+        "normalize-path": "^2.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/arr-diff": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+      "dev": true,
+      "dependencies": {
+        "arr-flatten": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/array-each": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-0.1.1.tgz",
+      "integrity": "sha1-xdUrqCJfNtcoF4unrsQTrPrd0Pk=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/array-slice": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
+      "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/array-unique": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/braces": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+      "dev": true,
+      "dependencies": {
+        "expand-range": "^1.8.1",
+        "preserve": "^0.2.0",
+        "repeat-element": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/camelcase": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/chokidar": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
+      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+      "deprecated": "Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "^1.3.0",
+        "async-each": "^1.0.0",
+        "glob-parent": "^2.0.0",
+        "inherits": "^2.0.1",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^2.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/expand-brackets": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+      "dev": true,
+      "dependencies": {
+        "is-posix-bracket": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dev": true,
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/extglob": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dev": true,
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "dependencies": {
+        "for-in": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^2.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/globby": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-4.1.0.tgz",
+      "integrity": "sha1-CA9UVJ7BuCpsYOYx/ILhIR2+lfg=",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "glob": "^6.0.1",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/globby/node_modules/glob": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+      "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+      "dev": true,
+      "dependencies": {
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "2 || 3",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-accessor-descriptor/node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "dev": true,
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-descriptor/node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/isobject": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-1.0.2.tgz",
+      "integrity": "sha1-8Pm4zpLdVA+gdAiC44NaLgIux4o=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/log-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+      "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/longest-streak": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-1.0.0.tgz",
+      "integrity": "sha1-0GWXxNTDG1LMsfXY+P5xSOr9aWU=",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/markdown-table": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-0.4.0.tgz",
+      "integrity": "sha1-iQwsGzv+g/sA5BKbjkz+ZFJw+dE=",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/micromatch": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+      "dev": true,
+      "dependencies": {
+        "arr-diff": "^2.0.0",
+        "array-unique": "^0.2.1",
+        "braces": "^1.8.2",
+        "expand-brackets": "^0.1.4",
+        "extglob": "^0.3.1",
+        "filename-regex": "^2.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.1",
+        "kind-of": "^3.0.2",
+        "normalize-path": "^2.0.1",
+        "object.omit": "^2.0.0",
+        "parse-glob": "^3.0.4",
+        "regex-cache": "^0.4.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dev": true,
+      "dependencies": {
+        "remove-trailing-separator": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/object.defaults": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-0.3.0.tgz",
+      "integrity": "sha1-seucvHjEx71WysbK496tWnETiCo=",
+      "dev": true,
+      "dependencies": {
+        "array-each": "^0.1.0",
+        "array-slice": "^0.2.3",
+        "for-own": "^0.1.3",
+        "isobject": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dev": true,
+      "dependencies": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "dev": true,
+      "dependencies": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/expand-brackets/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dev": true,
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/expand-brackets/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/expand-brackets/node_modules/is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dev": true,
+      "dependencies": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/expand-brackets/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dev": true,
+      "dependencies": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/extglob/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dev": true,
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/extglob/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/is-accessor-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/readdirp/node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dev": true,
+      "dependencies": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/remark": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-4.2.2.tgz",
+      "integrity": "sha1-QtxdCzpqLVRD58vbsqMgKFS+aY8=",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^2.0.0",
+        "ccount": "^1.0.0",
+        "chalk": "^1.0.0",
+        "chokidar": "^1.0.5",
+        "collapse-white-space": "^1.0.0",
+        "commander": "^2.0.0",
+        "concat-stream": "^1.0.0",
+        "debug": "^2.0.0",
+        "elegant-spinner": "^1.0.0",
+        "extend": "^3.0.0",
+        "glob": "^7.0.0",
+        "globby": "^4.0.0",
+        "log-update": "^1.0.1",
+        "longest-streak": "^1.0.0",
+        "markdown-table": "^0.4.0",
+        "minimatch": "^3.0.0",
+        "npm-prefix": "^1.0.1",
+        "parse-entities": "^1.0.0",
+        "repeat-string": "^1.5.0",
+        "stringify-entities": "^1.0.0",
+        "to-vfile": "^1.0.0",
+        "trim": "^0.0.1",
+        "trim-trailing-lines": "^1.0.0",
+        "unified": "^3.0.0",
+        "unist-util-remove-position": "^1.0.0",
+        "user-home": "^2.0.0",
+        "vfile": "^1.1.0",
+        "vfile-find-down": "^1.0.0",
+        "vfile-find-up": "^1.0.0",
+        "vfile-location": "^2.0.0",
+        "vfile-reporter": "^1.5.0",
+        "ware": "^1.3.0"
+      },
+      "bin": {
+        "remark": "bin/remark"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/remark-lint": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/remark-lint/-/remark-lint-3.2.1.tgz",
+      "integrity": "sha1-Dzu10cOlxxc9l+lY+GcYYknVb+w=",
+      "dev": true,
+      "dependencies": {
+        "decamelize": "^1.0.0",
+        "mdast-util-heading-style": "^1.0.0",
+        "mdast-util-position": "^1.0.0",
+        "mdast-util-to-string": "^1.0.0",
+        "npm-prefix": "^1.1.1",
+        "plur": "^2.0.0",
+        "remark-message-control": "^2.0.0",
+        "unist-util-visit": "^1.0.0",
+        "vfile-location": "^2.0.0",
+        "vfile-sort": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/remark-message-control": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/remark-message-control/-/remark-message-control-2.0.3.tgz",
+      "integrity": "sha1-uSePrgsRjuJGeYIcfALqm6KmgsQ=",
+      "dev": true,
+      "dependencies": {
+        "mdast-comment-marker": "^1.0.0",
+        "trim": "0.0.1",
+        "unist-util-visit": "^1.0.0",
+        "vfile-location": "^2.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/request-promise": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-3.0.0.tgz",
+      "integrity": "sha1-vh7bJvQcSc0dVlbGdT1oQqEkn0Y=",
+      "deprecated": "request-promise has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142",
+      "dev": true,
+      "dependencies": {
+        "bluebird": "^3.3",
+        "lodash": "^4.6.1",
+        "request": "^2.34"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/stringify-entities": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz",
+      "integrity": "sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==",
+      "dev": true,
+      "dependencies": {
+        "character-entities-html4": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/to-vfile": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-1.0.0.tgz",
+      "integrity": "sha1-iN7+zUOtsu9ZhiXw49WffzQpQbo=",
+      "dev": true,
+      "dependencies": {
+        "vfile": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/unified": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-3.0.0.tgz",
+      "integrity": "sha1-hc5BabCe6fCE0H9NCh++OTlRhxI=",
+      "dev": true,
+      "dependencies": {
+        "attach-ware": "^2.0.0",
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "unherit": "^1.0.4",
+        "vfile": "^1.0.0",
+        "ware": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/unist-util-position": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-2.0.1.tgz",
+      "integrity": "sha1-GmOd8KCUBGCi2LIF6b5wT+B1GOw=",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/vfile": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-1.4.0.tgz",
+      "integrity": "sha1-wP1vpIT43r23cfaMMe112I2pf+c=",
+      "dev": true
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/vfile-reporter": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-1.5.0.tgz",
+      "integrity": "sha1-IacAm/5V4k34/0Mqpb9vbvp05Bg=",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.0",
+        "log-symbols": "^1.0.2",
+        "plur": "^2.0.0",
+        "repeat-string": "^1.5.0",
+        "string-width": "^1.0.0",
+        "text-table": "^0.2.0",
+        "vfile-sort": "^1.0.0"
+      }
+    },
+    "node_modules/remark-lint-are-links-valid/node_modules/vfile-sort": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-1.0.0.tgz",
+      "integrity": "sha1-F+5JG6Q+iVG7IpE/z/MqfcTSNNQ=",
+      "dev": true
+    },
+    "node_modules/remark-lint-blockquote-indentation": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-blockquote-indentation/-/remark-lint-blockquote-indentation-1.0.4.tgz",
+      "integrity": "sha512-ExcDP7lufshEBNkVddSHa+Bz/97PtFstIniQ8ZF2TahHPmpx92z3mkI/nXL2Qt5d3B09eTVvh4Pvhgp6x2470g==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "plur": "^3.0.0",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-blockquote-indentation/node_modules/irregular-plurals": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+      "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-blockquote-indentation/node_modules/plur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+      "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+      "dev": true,
+      "dependencies": {
+        "irregular-plurals": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-code-block-style": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-code-block-style/-/remark-lint-code-block-style-1.0.4.tgz",
+      "integrity": "sha512-Wq5F94nkaWTx8W/9C/ydG+DhVWLirBrWb0xnoMQ0cHnizAd3BWw8g0x5L7yglMYSUSVLWY0jfMHgOe9UW3JfTw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-definition-case": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-definition-case/-/remark-lint-definition-case-1.0.5.tgz",
+      "integrity": "sha512-iirq74fKhJZsFw7x4FJuLVRkXclntutG1YKajfLaE3Gm14YlJWBEoabNTk+ENR4QXoB9rTdEqn3Cc3ImO8qciQ==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-definition-spacing": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-definition-spacing/-/remark-lint-definition-spacing-1.0.5.tgz",
+      "integrity": "sha512-ss8OQmK4c/1amEAJpDjkFiByLyXpsYFNzmk6rEZQkxZZd+DVHI0oF+CzSeMVHu48rF2qHOkKhVghqrCM0vleAA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-emphasis-marker": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-emphasis-marker/-/remark-lint-emphasis-marker-1.0.4.tgz",
+      "integrity": "sha512-TdYISSw7Ib6EJDApDj9zcZNDCJEaEoQIrYS3+QH2TQxoDx96B0t1bbErRM5L/hx1UWPBpeFLKpgIWL163eMmYA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-fenced-code-flag": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-flag/-/remark-lint-fenced-code-flag-1.0.4.tgz",
+      "integrity": "sha512-bkQvlEYco6ZzdzvGPrY7DBsqSq/2mZEmdhpn0KdMEZ9kcKJP4unQdVQys04SKnf9QISqQ446VnQj5Q4E3HMSkQ==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-fenced-code-marker": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-marker/-/remark-lint-fenced-code-marker-1.0.4.tgz",
+      "integrity": "sha512-aJF4ISIEvK3NX+C2rN93QoS/32SSiytQKRSeGa+HwsAn3sTwqmy2IoAwbFeZIZA2vqKcVB4h1b9yKamSlfX30Q==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-file-extension": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-file-extension/-/remark-lint-file-extension-1.0.5.tgz",
+      "integrity": "sha512-oVQdf5vEomwHkfQ7R/mgmsWW2H/t9kSvnrxtVoNOHr+qnOEafKKDn+AFhioN2kqtjCZBAjSSrePs6xGKmXKDTw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-final-definition": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-final-definition/-/remark-lint-final-definition-1.0.4.tgz",
+      "integrity": "sha512-y9aDZPhqWcI7AtrJtL69HE6MoWMqDqLQUyWMadzAYUYb9/m4ciLdygJ4cWVpEN3n4mkBepHIsWzASaKHHBDJOQ==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-hard-break-spaces": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-hard-break-spaces/-/remark-lint-hard-break-spaces-1.0.5.tgz",
+      "integrity": "sha512-Rss7ujNtxipO/hasWYc0QdiO8D5VyliSwj3zAZ8GeDn0ix2KH+pY4/AJC7i9IGcVVbUGvvXLpJB3Pp1VeY7oKw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-heading-increment": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-heading-increment/-/remark-lint-heading-increment-1.0.4.tgz",
+      "integrity": "sha512-3PJj32G7W1OUyRVSZiZbSOxyFAsw/mNssIosS9G8+6Lq2yeTSMDoCJy0+LC+s00nORFcbzeMedMK5U/eLbDe4w==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-heading-style": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-heading-style/-/remark-lint-heading-style-1.0.4.tgz",
+      "integrity": "sha512-ASssbw0vj9urTMxDJGpOn4K7d9MgPQPJGaCD+7v7je42krofvqC4CxpYvO/fOAkRZcttE91VfFHxkaPjiBtQLw==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-heading-style": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-link-title-style": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-link-title-style/-/remark-lint-link-title-style-1.0.5.tgz",
+      "integrity": "sha512-Nu0cKj220q/PmUzELhYRUR2uxXabWuFJq9sApkgsc59uh+NKDtCEdpxkx7Zwvn6kUEwpuQVimeRfdesiKxX52g==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1",
+        "vfile-location": "^2.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-list-item-content-indent": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-content-indent/-/remark-lint-list-item-content-indent-1.0.4.tgz",
+      "integrity": "sha512-zfEeAayZjEKkPr07fnhkGLENxOhnm0WZJTj6UBIXhtGu7rX23WNKSZaiou8iUoHxcO6ySCvIUJAEmq/XN1FxkQ==",
+      "dev": true,
+      "dependencies": {
+        "plur": "^3.0.0",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-list-item-content-indent/node_modules/irregular-plurals": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+      "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-list-item-content-indent/node_modules/plur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+      "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+      "dev": true,
+      "dependencies": {
+        "irregular-plurals": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-list-item-indent": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-indent/-/remark-lint-list-item-indent-1.0.5.tgz",
+      "integrity": "sha512-DjRgxjqaVMrnlQFJypizTPtLa9gSM5ad0LVIFDSstV2UVXSgpBi2+bSsFJEXb4Fkjo/d2JAgt27UhzhcoF2lnw==",
+      "dev": true,
+      "dependencies": {
+        "plur": "^3.0.0",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-list-item-indent/node_modules/irregular-plurals": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+      "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-list-item-indent/node_modules/plur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+      "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+      "dev": true,
+      "dependencies": {
+        "irregular-plurals": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-list-item-spacing": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-spacing/-/remark-lint-list-item-spacing-1.1.4.tgz",
+      "integrity": "sha512-zZELzTPYCoOCnOWh/nYTfQWnGXWg4/I5KpwrjBqe7WYwoMtvLVU9mqjRj2jHEbmirEXas54NZnYnkCoIBMS4bw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-maximum-heading-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-maximum-heading-length/-/remark-lint-maximum-heading-length-1.0.4.tgz",
+      "integrity": "sha512-dhDBnUFXMuHoW8LSV/VICJAJO+wWumnvuu3ND7MJquCYrsjX2vcRmJXL5cusJSY4yqPosKlOowIkzdV5B6/SDQ==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-maximum-line-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/remark-lint-maximum-line-length/-/remark-lint-maximum-line-length-1.2.2.tgz",
+      "integrity": "sha512-ItAdjK+tUhqggqFvtAJ8iJ0MbBgShLl0HDgpG3In0QSYp/dmofO77DjvRjCJQo1pQYS8/LwlBii9cqg/3MwFfA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-auto-link-without-protocol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-auto-link-without-protocol/-/remark-lint-no-auto-link-without-protocol-1.0.4.tgz",
+      "integrity": "sha512-dhDHQLeaI79p7SRoKfxJ9c8J5otQsGua7ILeNbs2Onzn46/tp9ir6zjq3Lfh4VJJr4OVign2e8u+MzXsS7Uu/A==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-blockquote-without-marker": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-blockquote-without-marker/-/remark-lint-no-blockquote-without-marker-2.0.4.tgz",
+      "integrity": "sha512-a5LFGj7It2z7aBRGaAcztk4D2pax2b7dK9iOarIWv/JBus/PSjZJxzZCma2aAAOQhv3wbNTwqQwuQC0UJHMbPg==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1",
+        "vfile-location": "^2.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-consecutive-blank-lines": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-consecutive-blank-lines/-/remark-lint-no-consecutive-blank-lines-1.0.4.tgz",
+      "integrity": "sha512-33rYrp+3OQ2UjG2/xhctruCvkP2iKLuHJhoUOAUV3BGwqJjAB+xNOl+0DdvDo0fxh5dyZuNesBuos3xr2yVR+w==",
+      "dev": true,
+      "dependencies": {
+        "plur": "^3.0.0",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-consecutive-blank-lines/node_modules/irregular-plurals": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+      "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-no-consecutive-blank-lines/node_modules/plur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+      "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+      "dev": true,
+      "dependencies": {
+        "irregular-plurals": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/remark-lint-no-duplicate-headings": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings/-/remark-lint-no-duplicate-headings-1.0.5.tgz",
+      "integrity": "sha512-4GKPxhKpN797V/6Jg1K4Zwqq+PhsjC633+wQMrZcTvOJfY+Rq1i7sNJ9lJVZnsDAlZJI56VqZCKnPJmS2br87g==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-duplicate-headings-in-section": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings-in-section/-/remark-lint-no-duplicate-headings-in-section-1.0.5.tgz",
+      "integrity": "sha512-4BmQMSY2M9EWzK2jgUj/MIYalbTSoJkl7YgqbEF/mroS/+f9XtN09Bpfay+M4dXHXNxcjPkg653uclL1/iZATA==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-emphasis-as-heading": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-emphasis-as-heading/-/remark-lint-no-emphasis-as-heading-1.0.4.tgz",
+      "integrity": "sha512-gnsInLxTkc59eVD3/qelFagD/NcrMPKXT1sy7i4e8D2jqQyrIHHl0p3TfiyNNt8qIjKMKhlIii4k4kVk/3Mczg==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-file-name-articles": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-articles/-/remark-lint-no-file-name-articles-1.0.5.tgz",
+      "integrity": "sha512-AQk5eTb3s3TAPPjiglZgqlQj4ycao+gPs8/XkdN1VCPUtewW0GgwoQe7YEuBKayJ6ioN8dGP37Kg/P/PlKaRQA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-file-name-consecutive-dashes": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-consecutive-dashes/-/remark-lint-no-file-name-consecutive-dashes-1.0.5.tgz",
+      "integrity": "sha512-Mg2IDsi790/dSdAzwnBnsMYdZm3qC2QgGwqOWcr0TPABJhhjC3p8r5fX4MNMTXI5It7B7bW9+ImmCeLOZiXkLg==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-file-name-irregular-characters": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-irregular-characters/-/remark-lint-no-file-name-irregular-characters-1.0.5.tgz",
+      "integrity": "sha512-Oe5i99qNUKc2bxmiH421o5B/kqlf1dfjAxpHNLhi2X2dXE91zRGavrlRM/4f4oR0N9Bqb3qB9JZPyMPWrzu9XA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-file-name-mixed-case": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-mixed-case/-/remark-lint-no-file-name-mixed-case-1.0.5.tgz",
+      "integrity": "sha512-ilrUCbHZin/ENwr8c3SC2chgkFsizXjBQIB/oZ7gnm1IkCkZPiMyXZAHdpwC/DjbrpGxfMYh9JmIHao4giS5+A==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-file-name-outer-dashes": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-outer-dashes/-/remark-lint-no-file-name-outer-dashes-1.0.6.tgz",
+      "integrity": "sha512-rT8CmcIlenegS0Yst4maYXdZfqIjBOiRUY8j/KJkORF5tKH+3O1/S07025qPGmcRihzK3w4yO0K8rgkKQw0b9w==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-heading-punctuation": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-heading-punctuation/-/remark-lint-no-heading-punctuation-1.0.4.tgz",
+      "integrity": "sha512-++/HXg/qtVssJjzq2ZgEreoxaazw9KkYrAbTDImKV7Fypo+7bZFELUvFicq0/i9qwAwt1tvhkKtLYt1W/sr1JQ==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-inline-padding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-inline-padding/-/remark-lint-no-inline-padding-1.0.5.tgz",
+      "integrity": "sha512-AjS34hBRasYiIAKZJ7/9U42LouRHok2WVTRdQPcVtRBswStNOuot59S+FRsatqlk1wvMmjytqxUKQfVTSeu9ag==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-literal-urls": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-literal-urls/-/remark-lint-no-literal-urls-1.0.4.tgz",
+      "integrity": "sha512-sHjbzaSG4z6jMu1L0Qx1b7VvIQHy0bR4xZ6t9auJ5AoB5ua8hb/970s77irH1+46TF1ezhE7i+QDjmhcQi09xg==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-to-string": "^1.0.2",
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-multiple-toplevel-headings": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-multiple-toplevel-headings/-/remark-lint-no-multiple-toplevel-headings-1.0.5.tgz",
+      "integrity": "sha512-RZ1YPxRO7Bo8mT+A36cZ7nx2QHFAKk+oE6j87YrZYpAKr2oF6snKS8nIGhVku4PSI/9cW1G12MZz1cAA5rcjFw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-shell-dollars": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shell-dollars/-/remark-lint-no-shell-dollars-1.0.4.tgz",
+      "integrity": "sha512-YXFj8FUVTKkVvoAbFY3zv1Ol7Kj1i+qdze3pXSgRG61y1LpfL8/HpnvFrseMbBmNw6o4WpjTo7GoArngJ1sCeg==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-shortcut-reference-image": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-image/-/remark-lint-no-shortcut-reference-image-1.0.4.tgz",
+      "integrity": "sha512-5/9QoesnOHIDwMHU9x+AGPBiFoMe9ZBKIR8nC17C6ZdksgwUIpjBJ3VX5POFlt5E6OhAZaeXqUCq9G2USccEdA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-shortcut-reference-link": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-link/-/remark-lint-no-shortcut-reference-link-1.0.5.tgz",
+      "integrity": "sha512-qDVL7/0ptOTd/nyd9u/4MYFWQtYQU8povdUB45UgTXy5Rrf1WsC+4DfzAEZkX3tOSTExdAIf1WOKqdC5xRcfvA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-no-table-indentation": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-table-indentation/-/remark-lint-no-table-indentation-1.0.5.tgz",
+      "integrity": "sha512-eE1GL+IzU3vtHdYCKHCZEIhCwiwCM7UH+pMDIMpGfH2LB3cB/Nrfbiz9xadGkARKqxxDMsJSBZDw4A/01IU+kA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-ordered-list-marker-style": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-style/-/remark-lint-ordered-list-marker-style-1.0.4.tgz",
+      "integrity": "sha512-c6AIqeePzm3nfkPCbTdwBS3/AQICgwE76+ryOc7tsSq4ulyK/Nt8Syvi/oiHYuonBddZoGtFTNCn0jqen9qscA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-ordered-list-marker-value": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-value/-/remark-lint-ordered-list-marker-value-1.0.5.tgz",
+      "integrity": "sha512-eKepbNNfu9rEuG8WvV0sc7B+KiPMgq5Nc9baAxL9Hi6mhpj347YFWXxJUNttSINS13YTpnHxPvXmF9SzhjFKNQ==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-rule-style": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-rule-style/-/remark-lint-rule-style-1.0.4.tgz",
+      "integrity": "sha512-omr5P6CCvo2zixCzK9uiGZpwzOE+4rc+95kWH95k2iA6Rp8Qohp8RK4unSRKLtFYGUhSbiQPgWaQXHDxMkWczg==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-strong-marker": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-strong-marker/-/remark-lint-strong-marker-1.0.4.tgz",
+      "integrity": "sha512-X9f6yhZ85cdP0cmCgkqlbxllpeQ60pS9Qqk9Jb9SZo6f95esaHptQ5bExb1ZVXzhSHz2Xz86tUhXtzG3zGFD4g==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-table-cell-padding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-cell-padding/-/remark-lint-table-cell-padding-1.0.5.tgz",
+      "integrity": "sha512-N/WpcymrGBSPbLiv2OQTvdzNn6H9ctdyEA+P/odn4G9FqyrLmeTMkGJuGtinU569hLG/RtHqZIDeFVDiYi8Wzw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-table-pipe-alignment": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-pipe-alignment/-/remark-lint-table-pipe-alignment-1.0.4.tgz",
+      "integrity": "sha512-pmELEOXeUjMQedyVvOtZcTCnTu6FxZ4gfBskMx6iJhOFEEKTFOmviqlKLpndPBxFNZB86AiE0C00/NvAaut8dw==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-table-pipes": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-pipes/-/remark-lint-table-pipes-1.0.4.tgz",
+      "integrity": "sha512-0fdnoiiSLIPd/76gNvQY4pg27d8HkMmmv5gCGfD+Z/Si9DdpbJdq93U0kX+Botb3+/4VEDIlcU7Cp5HXppMTWA==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-lint-unordered-list-marker-style": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-unordered-list-marker-style/-/remark-lint-unordered-list-marker-style-1.0.4.tgz",
+      "integrity": "sha512-lcuG1J74VGTT4gl8oH33HpkHrqorxjxMlJnBupLFrVowqvJ2hAq8yPJdGZ7P46uZOYw+Xz+Qv08bF8A73PNWxQ==",
+      "dev": true,
+      "dependencies": {
+        "unified-lint-rule": "^1.0.0",
+        "unist-util-generated": "^1.1.0",
+        "unist-util-position": "^3.0.0",
+        "unist-util-visit": "^1.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-message-control": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/remark-message-control/-/remark-message-control-4.2.0.tgz",
+      "integrity": "sha512-WXH2t5ljTyhsXlK1zPBLF3iPHbXl58R94phPMreS1xcHWBZJt6Oiu8RtNjy1poZFb3PqKnbYLJeR/CWcZ1bTFw==",
+      "dev": true,
+      "dependencies": {
+        "mdast-comment-marker": "^1.0.0",
+        "unified-message-control": "^1.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-7.0.2.tgz",
+      "integrity": "sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==",
+      "dev": true,
+      "dependencies": {
+        "collapse-white-space": "^1.0.2",
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "is-word-character": "^1.0.0",
+        "markdown-escapes": "^1.0.0",
+        "parse-entities": "^1.1.0",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "trim": "0.0.1",
+        "trim-trailing-lines": "^1.0.0",
+        "unherit": "^1.0.4",
+        "unist-util-remove-position": "^1.0.0",
+        "vfile-location": "^2.0.0",
+        "xtend": "^4.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-preset-lint-markdown-style-guide": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/remark-preset-lint-markdown-style-guide/-/remark-preset-lint-markdown-style-guide-2.1.4.tgz",
+      "integrity": "sha512-CGEN3DRtJEp+BvfgZ+VKxuq0Ij8Uw2DXfrbhK2xn4/XxatcHRPN8tnagXbMe1LHaQJGN8Gl1+UyLjsfIk6hyGQ==",
+      "dev": true,
+      "dependencies": {
+        "remark-lint": "^6.0.0",
+        "remark-lint-blockquote-indentation": "^1.0.0",
+        "remark-lint-code-block-style": "^1.0.0",
+        "remark-lint-definition-case": "^1.0.0",
+        "remark-lint-definition-spacing": "^1.0.0",
+        "remark-lint-emphasis-marker": "^1.0.0",
+        "remark-lint-fenced-code-flag": "^1.0.0",
+        "remark-lint-fenced-code-marker": "^1.0.0",
+        "remark-lint-file-extension": "^1.0.0",
+        "remark-lint-final-definition": "^1.0.0",
+        "remark-lint-hard-break-spaces": "^1.0.0",
+        "remark-lint-heading-increment": "^1.0.0",
+        "remark-lint-heading-style": "^1.0.0",
+        "remark-lint-link-title-style": "^1.0.0",
+        "remark-lint-list-item-content-indent": "^1.0.0",
+        "remark-lint-list-item-indent": "^1.0.0",
+        "remark-lint-list-item-spacing": "^1.0.0",
+        "remark-lint-maximum-heading-length": "^1.0.0",
+        "remark-lint-maximum-line-length": "^1.0.0",
+        "remark-lint-no-auto-link-without-protocol": "^1.0.0",
+        "remark-lint-no-blockquote-without-marker": "^2.0.0",
+        "remark-lint-no-consecutive-blank-lines": "^1.0.0",
+        "remark-lint-no-duplicate-headings": "^1.0.0",
+        "remark-lint-no-emphasis-as-heading": "^1.0.0",
+        "remark-lint-no-file-name-articles": "^1.0.0",
+        "remark-lint-no-file-name-consecutive-dashes": "^1.0.0",
+        "remark-lint-no-file-name-irregular-characters": "^1.0.0",
+        "remark-lint-no-file-name-mixed-case": "^1.0.0",
+        "remark-lint-no-file-name-outer-dashes": "^1.0.0",
+        "remark-lint-no-heading-punctuation": "^1.0.0",
+        "remark-lint-no-inline-padding": "^1.0.0",
+        "remark-lint-no-literal-urls": "^1.0.0",
+        "remark-lint-no-multiple-toplevel-headings": "^1.0.0",
+        "remark-lint-no-shell-dollars": "^1.0.0",
+        "remark-lint-no-shortcut-reference-image": "^1.0.0",
+        "remark-lint-no-shortcut-reference-link": "^1.0.0",
+        "remark-lint-no-table-indentation": "^1.0.0",
+        "remark-lint-ordered-list-marker-style": "^1.0.0",
+        "remark-lint-ordered-list-marker-value": "^1.0.0",
+        "remark-lint-rule-style": "^1.0.0",
+        "remark-lint-strong-marker": "^1.0.0",
+        "remark-lint-table-cell-padding": "^1.0.0",
+        "remark-lint-table-pipe-alignment": "^1.0.0",
+        "remark-lint-table-pipes": "^1.0.0",
+        "remark-lint-unordered-list-marker-style": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-7.0.4.tgz",
+      "integrity": "sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==",
+      "dev": true,
+      "dependencies": {
+        "ccount": "^1.0.0",
+        "is-alphanumeric": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "longest-streak": "^2.0.1",
+        "markdown-escapes": "^1.0.0",
+        "markdown-table": "^1.1.0",
+        "mdast-util-compact": "^1.0.0",
+        "parse-entities": "^1.0.2",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "stringify-entities": "^2.0.0",
+        "unherit": "^1.0.4",
+        "xtend": "^4.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remove-bom-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
+      "integrity": "sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5",
+        "is-utf8": "^0.2.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remove-bom-stream": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz",
+      "integrity": "sha1-BfGlk/FuQuH7kOv1nejlaVJflSM=",
+      "dependencies": {
+        "remove-bom-buffer": "^3.0.0",
+        "safe-buffer": "^5.1.0",
+        "through2": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/remove-bom-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/remove-bom-stream/node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/remove-bom-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/remove-bom-stream/node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/remove-bom-stream/node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
+    },
+    "node_modules/repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/replace-ext": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/replace-homedir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/replace-homedir/-/replace-homedir-1.0.0.tgz",
+      "integrity": "sha1-6H9tUTuSjd6AgmDBK+f+xv9ueYw=",
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1",
+        "is-absolute": "^1.0.0",
+        "remove-trailing-separator": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/request/node_modules/qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "node_modules/require-uncached": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
+      "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
+      "dev": true,
+      "dependencies": {
+        "caller-path": "^0.1.0",
+        "resolve-from": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-uncached/node_modules/caller-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
+      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-uncached/node_modules/callsites": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
+      "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-uncached/node_modules/resolve-from": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
+      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requireindex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
+      "integrity": "sha1-5UBLgVV+91225JxacgBIk/4D4WI=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "node_modules/requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "dependencies": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-options": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-1.1.0.tgz",
+      "integrity": "sha1-MrueOcBtZzONyTeMDW1gdFZq0TE=",
+      "dependencies": {
+        "value-or-function": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
+      "deprecated": "https://github.com/lydell/resolve-url#deprecated"
+    },
+    "node_modules/resp-modifier": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/resp-modifier/-/resp-modifier-6.0.2.tgz",
+      "integrity": "sha512-U1+0kWC/+4ncRFYqQWTx/3qkfE6a4B/h3XXgmXypfa0SPZ3t7cbbaFk297PjQS/yov24R18h6OZe6iZwj3NSLw==",
+      "dependencies": {
+        "debug": "^2.2.0",
+        "minimatch": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/resp-modifier/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/resp-modifier/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "dev": true,
+      "dependencies": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/retry-request": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-4.2.2.tgz",
+      "integrity": "sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
+      "dev": true
+    },
+    "node_modules/rgb-regex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
+      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE="
+    },
+    "node_modules/rgba-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/robots-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/robots-parser/-/robots-parser-3.0.0.tgz",
+      "integrity": "sha512-6xkze3WRdneibICBAzMKcXyTKQw5shA3GbwoEJy7RSvxpZNGF0GMuYKE1T0VMP4fwx/fQs0n0mtriOqRtk5L1w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.64.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz",
+      "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-istanbul": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-istanbul/-/rollup-plugin-istanbul-3.0.0.tgz",
+      "integrity": "sha512-z8kD2A57qTcxgqjbJ8cZBBE/IGYk+iJtE42sCaZjrSe/uBEUq5jJYvQwquJ+Acfko1LMYww4EJfeMJmc0GttpQ==",
+      "dependencies": {
+        "@rollup/pluginutils": "^4.1.0",
+        "istanbul-lib-instrument": "^4.0.3"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-istanbul/node_modules/@rollup/pluginutils": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz",
+      "integrity": "sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==",
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-postcss": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-2.9.0.tgz",
+      "integrity": "sha512-Y7qDwlqjZMBexbB1kRJf+jKIQL8HR6C+ay53YzN+nNJ64hn1PNZfBE3c61hFUhD//zrMwmm7uBW30RuTi+CD0w==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "concat-with-sourcemaps": "^1.1.0",
+        "cssnano": "^4.1.10",
+        "import-cwd": "^3.0.0",
+        "p-queue": "^6.3.0",
+        "pify": "^5.0.0",
+        "postcss": "^7.0.27",
+        "postcss-load-config": "^2.1.0",
+        "postcss-modules": "^2.0.0",
+        "promise.series": "^0.2.0",
+        "resolve": "^1.16.0",
+        "rollup-pluginutils": "^2.8.2",
+        "safe-identifier": "^0.4.1",
+        "style-inject": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/pify": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+      "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/postcss/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+    },
+    "node_modules/router": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/router/-/router-1.3.8.tgz",
+      "integrity": "sha512-461UFH44NtSfIlS83PUg2N7OZo86BC/kB3dY77gJdsODsBhhw7+2uE0tzTINxrY9CahCUVk1VhpWCA5i1yoIEg==",
+      "dependencies": {
+        "array-flatten": "3.0.0",
+        "debug": "2.6.9",
+        "methods": "~1.1.2",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "setprototypeof": "1.2.0",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/router/node_modules/array-flatten": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
+      "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
+    },
+    "node_modules/router/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/router/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rx": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
+      "integrity": "sha512-CiaiuN6gapkdl+cZUr67W6I8jquN4lkak3vtIsIWCl4XIPP8ffsoyN6/+PuGXnQy8Cu8W2y9Xxh31Rq4M6wUug=="
+    },
+    "node_modules/rx-lite": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
+      "integrity": "sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI=",
+      "dev": true
+    },
+    "node_modules/rxjs": {
+      "version": "5.5.12",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
+      "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
+      "dependencies": {
+        "symbol-observable": "1.0.1"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safe-identifier": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w=="
+    },
+    "node_modules/safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dependencies": {
+        "ret": "~0.1.10"
+      }
+    },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
+      "integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sass": {
+      "version": "1.35.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
+      "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-lint": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sass-lint/-/sass-lint-1.13.1.tgz",
+      "integrity": "sha512-DSyah8/MyjzW2BWYmQWekYEKir44BpLqrCFsgs9iaWiVTcwZfwXHF586hh3D1n+/9ihUNMfd8iHAyb9KkGgs7Q==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^2.8.1",
+        "eslint": "^2.7.0",
+        "front-matter": "2.1.2",
+        "fs-extra": "^3.0.1",
+        "glob": "^7.0.0",
+        "globule": "^1.0.0",
+        "gonzales-pe-sl": "^4.2.3",
+        "js-yaml": "^3.5.4",
+        "known-css-properties": "^0.3.0",
+        "lodash.capitalize": "^4.1.0",
+        "lodash.kebabcase": "^4.0.0",
+        "merge": "^1.2.0",
+        "path-is-absolute": "^1.0.0",
+        "util": "^0.10.3"
+      },
+      "bin": {
+        "sass-lint": "bin/sass-lint.js"
+      }
+    },
+    "node_modules/sass-lint/node_modules/acorn": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/acorn-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
+      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^3.0.4"
+      }
+    },
+    "node_modules/sass-lint/node_modules/acorn-jsx/node_modules/acorn": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+      "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/ajv": {
+      "version": "4.11.8",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+      "dev": true,
+      "dependencies": {
+        "co": "^4.6.0",
+        "json-stable-stringify": "^1.0.1"
+      }
+    },
+    "node_modules/sass-lint/node_modules/ansi-escapes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+      "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/cli-cursor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
+      "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true,
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/sass-lint/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/doctrine": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+      "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2",
+        "isarray": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/eslint": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-2.13.1.tgz",
+      "integrity": "sha1-5MyPoPAJ+4KaquI4VaKTYL4fbBE=",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "concat-stream": "^1.4.6",
+        "debug": "^2.1.1",
+        "doctrine": "^1.2.2",
+        "es6-map": "^0.1.3",
+        "escope": "^3.6.0",
+        "espree": "^3.1.6",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "file-entry-cache": "^1.1.1",
+        "glob": "^7.0.3",
+        "globals": "^9.2.0",
+        "ignore": "^3.1.2",
+        "imurmurhash": "^0.1.4",
+        "inquirer": "^0.12.0",
+        "is-my-json-valid": "^2.10.0",
+        "is-resolvable": "^1.0.0",
+        "js-yaml": "^3.5.1",
+        "json-stable-stringify": "^1.0.0",
+        "levn": "^0.3.0",
+        "lodash": "^4.0.0",
+        "mkdirp": "^0.5.0",
+        "optionator": "^0.8.1",
+        "path-is-absolute": "^1.0.0",
+        "path-is-inside": "^1.0.1",
+        "pluralize": "^1.2.1",
+        "progress": "^1.1.8",
+        "require-uncached": "^1.0.2",
+        "shelljs": "^0.6.0",
+        "strip-json-comments": "~1.0.1",
+        "table": "^3.7.8",
+        "text-table": "~0.2.0",
+        "user-home": "^2.0.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/sass-lint/node_modules/espree": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
+      "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^5.5.0",
+        "acorn-jsx": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/figures": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+      "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5",
+        "object-assign": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/file-entry-cache": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-1.3.1.tgz",
+      "integrity": "sha1-RMYepgeuS+nBQC9B9EJwy/4zT/g=",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^1.2.1",
+        "object-assign": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/flat-cache": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
+      "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
+      "dev": true,
+      "dependencies": {
+        "circular-json": "^0.3.1",
+        "graceful-fs": "^4.1.2",
+        "rimraf": "~2.6.2",
+        "write": "^0.2.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^3.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/globals": {
+      "version": "9.18.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/ignore": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
+      "dev": true
+    },
+    "node_modules/sass-lint/node_modules/inquirer": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
+      "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^1.1.0",
+        "ansi-regex": "^2.0.0",
+        "chalk": "^1.0.0",
+        "cli-cursor": "^1.0.1",
+        "cli-width": "^2.0.0",
+        "figures": "^1.3.5",
+        "lodash": "^4.3.0",
+        "readline2": "^1.0.1",
+        "run-async": "^0.1.0",
+        "rx-lite": "^3.1.2",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.0",
+        "through": "^2.3.6"
+      }
+    },
+    "node_modules/sass-lint/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "node_modules/sass-lint/node_modules/onetime": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
+      "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/restore-cursor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
+      "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
+      "dev": true,
+      "dependencies": {
+        "exit-hook": "^1.0.0",
+        "onetime": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/sass-lint/node_modules/run-async": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
+      "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/slice-ansi": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+      "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/strip-json-comments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
+      "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
+      "dev": true,
+      "bin": {
+        "strip-json-comments": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/table": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
+      "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^4.7.0",
+        "ajv-keywords": "^1.0.0",
+        "chalk": "^1.1.1",
+        "lodash": "^4.0.0",
+        "slice-ansi": "0.0.4",
+        "string-width": "^2.0.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/table/node_modules/ansi-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sass-lint/node_modules/table/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sass-lint/node_modules/table/node_modules/string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "dependencies": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sass-lint/node_modules/table/node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sass-lint/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/sass-lint/node_modules/write": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
+      "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
+      "dev": true,
+      "dependencies": {
+        "mkdirp": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "node_modules/scroll-to-bottomjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-to-bottomjs/-/scroll-to-bottomjs-1.1.0.tgz",
+      "integrity": "sha512-+e7MRrUwY7M1V93ebqxIyPwIC8rPkvcmmmdSrOnNnCpbDP2Fpva3B6RadoRQ+ubZoYdYxye3Cculgbzb/CZiGw==",
+      "dev": true
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/selenium-webdriver": {
+      "version": "4.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.1.tgz",
+      "integrity": "sha512-DJ10z6Yk+ZBaLrt1CLElytQ/FOayx29ANKDtmtyW1A6kCJx3+dsc5fFMOZxwzukDniyYsC3OObT5pUAsgkjpxQ==",
+      "dependencies": {
+        "jszip": "^3.5.0",
+        "rimraf": "^2.7.1",
+        "tmp": "^0.2.1",
+        "ws": "^7.3.1"
+      },
+      "engines": {
+        "node": ">= 10.15.0"
+      }
+    },
+    "node_modules/selenium-webdriver/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/selenium-webdriver/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
+    "node_modules/selenium-webdriver/node_modules/tmp/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
+    },
+    "node_modules/semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "dependencies": {
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver-diff/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/semver-greatest-satisfied-range": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz",
+      "integrity": "sha1-E+jCZYq5aRywzXEJMkAoDTb3els=",
+      "dependencies": {
+        "sver-compat": "^1.5.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/semver-regex": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.3.tgz",
+      "integrity": "sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/send": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.6.2",
+        "mime": "1.4.1",
+        "ms": "2.0.0",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/send/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/send/node_modules/statuses": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-handler": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
+      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "fast-url-parser": "1.1.3",
+        "mime-types": "2.1.18",
+        "minimatch": "3.0.4",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "2.2.1",
+        "range-parser": "1.2.0"
+      }
+    },
+    "node_modules/serve-handler/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/serve-handler/node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-db": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-types": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "~1.33.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/path-to-regexp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+      "dev": true
+    },
+    "node_modules/serve-handler/node_modules/range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.2",
+        "send": "0.16.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/server-destroy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
+      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "node_modules/set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg=="
+    },
+    "node_modules/shelljs": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.6.1.tgz",
+      "integrity": "sha1-7GIRvtGSBEIIj+D3Cyg3Iy7SyKg=",
+      "dev": true,
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shellsubstitute": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shellsubstitute/-/shellsubstitute-1.2.0.tgz",
+      "integrity": "sha1-5PcCpQxRiw9v6YRRiQ1wWvKba3A=",
+      "dev": true
+    },
+    "node_modules/short-hash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/short-hash/-/short-hash-1.0.0.tgz",
+      "integrity": "sha1-P0kdco/Md37GBbuvf4PyNxL0IFA=",
+      "dependencies": {
+        "hash-string": "^1.0.0"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
+    "node_modules/slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/sliced": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
+      "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E=",
+      "dev": true
+    },
+    "node_modules/slugify": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.5.tgz",
+      "integrity": "sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "dependencies": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "dependencies": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dependencies": {
+        "kind-of": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/socket.io": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.4.1.tgz",
+      "integrity": "sha512-s04vrBswdQBUmuWJuuNTmXUVJhP0cVky8bBDhdkf8y0Ptsu7fKU2LuLbts9g+pdmAdyMMn8F/9Mf1/wbtUN0fg==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.1.0",
+        "socket.io-adapter": "~2.3.3",
+        "socket.io-parser": "~4.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io/node_modules/socket.io-adapter": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.3.tgz",
+      "integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ=="
+    },
+    "node_modules/socks": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+      "dependencies": {
+        "ip": "^2.0.0",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz",
+      "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "socks": "^2.7.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socks/node_modules/ip": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ=="
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
+      "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "deprecated": "See https://github.com/lydell/source-map-url#deprecated"
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "node_modules/sparkles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
+      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
+      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+    },
+    "node_modules/speedline-core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/speedline-core/-/speedline-core-1.4.3.tgz",
+      "integrity": "sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==",
+      "dependencies": {
+        "@types/node": "*",
+        "image-ssim": "^0.2.0",
+        "jpeg-js": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "node_modules/sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ssri": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
+      "integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/ssri/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+    },
+    "node_modules/stack-trace": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/state-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
+      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "dependencies": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/static-extend/node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+      "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/stream-chain": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/stream-chain/-/stream-chain-2.2.5.tgz",
+      "integrity": "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA=="
+    },
+    "node_modules/stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "dependencies": {
+        "stubs": "^3.0.0"
+      }
+    },
+    "node_modules/stream-exhaust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz",
+      "integrity": "sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw=="
+    },
+    "node_modules/stream-json": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/stream-json/-/stream-json-1.8.0.tgz",
+      "integrity": "sha512-HZfXngYHUAr1exT4fxlbc1IOce1RYxp2ldeaf97LYCOPSoOqY/1Psp7iGvpb+6JIOgkra9zDYnPX01hGAHzEPw==",
+      "dependencies": {
+        "stream-chain": "^2.2.5"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "node_modules/stream-throttle": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/stream-throttle/-/stream-throttle-0.1.3.tgz",
+      "integrity": "sha512-889+B9vN9dq7/vLbGyuHeZ6/ctf5sNuGWsDy89uNxkFTAgzy0eK7+w5fL3KLNRTkLle7EgZGvHUphZW0Q26MnQ==",
+      "dependencies": {
+        "commander": "^2.2.0",
+        "limiter": "^1.0.5"
+      },
+      "bin": {
+        "throttleproxy": "bin/throttleproxy.js"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/stream-throttle/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/streamroller": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.3.tgz",
+      "integrity": "sha512-CphIJyFx2SALGHeINanjFRKQ4l7x2c+rXYJ4BMq0gd+ZK0gi4VT8b+eHe2wi58x4UayBAKx4xtHpXT/ea1cz8w==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.14",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/streamroller/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.padend": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz",
+      "integrity": "sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-2.0.0.tgz",
+      "integrity": "sha512-fqqhZzXyAM6pGD9lky/GOPq6V4X0SeTAFBl0iXb/BzOegl40gpf/bV3QQP7zULNYvjr6+Dx8SCaDULjVoOru0A==",
+      "dev": true,
+      "dependencies": {
+        "character-entities-html4": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.2",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+      "dependencies": {
+        "is-utf8": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw=="
+    },
+    "node_modules/stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls="
+    },
+    "node_modules/style-inject": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
+      "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw=="
+    },
+    "node_modules/stylehacks": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
+      "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/stylehacks/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/stylehacks/node_modules/postcss-selector-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+      "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylehacks/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stylehacks/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/superstatic": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/superstatic/-/superstatic-9.0.3.tgz",
+      "integrity": "sha512-e/tmW0bsnQ/33ivK6y3CapJT0Ovy4pk/ohNPGhIAGU2oasoNLRQ1cv6enua09NU9w6Y0H/fBu07cjzuiWvLXxw==",
+      "dependencies": {
+        "basic-auth-connect": "^1.0.0",
+        "commander": "^10.0.0",
+        "compression": "^1.7.0",
+        "connect": "^3.7.0",
+        "destroy": "^1.0.4",
+        "fast-url-parser": "^1.1.3",
+        "glob-slasher": "^1.0.1",
+        "is-url": "^1.2.2",
+        "join-path": "^1.1.1",
+        "lodash": "^4.17.19",
+        "mime-types": "^2.1.35",
+        "minimatch": "^6.1.6",
+        "morgan": "^1.8.2",
+        "on-finished": "^2.2.0",
+        "on-headers": "^1.0.0",
+        "path-to-regexp": "^1.8.0",
+        "router": "^1.3.1",
+        "update-notifier-cjs": "^5.1.6"
+      },
+      "bin": {
+        "superstatic": "lib/bin/server.js"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.4.0"
+      },
+      "optionalDependencies": {
+        "re2": "^1.17.7"
+      }
+    },
+    "node_modules/superstatic/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/superstatic/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/superstatic/node_modules/connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/superstatic/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/superstatic/node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/superstatic/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/superstatic/node_modules/minimatch": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
+      "integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/superstatic/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/superstatic/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/superstatic/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sver-compat": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sver-compat/-/sver-compat-1.5.0.tgz",
+      "integrity": "sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=",
+      "dependencies": {
+        "es6-iterator": "^2.0.1",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "deprecated": "This SVGO version is no longer supported. Upgrade to v2.x.x.",
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "node_modules/svgo/node_modules/css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "dependencies": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/svgo/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/svgo/node_modules/mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+    },
+    "node_modules/svgo/node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/symbol-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
+      "integrity": "sha512-Kb3PrPYz4HanVF1LVGuAdW6LoVgIwjUYJGzFe7NDrBLCN4lsV/5J0MFurV+ygS4bRVwrCEt2c7MQ1R2a72oJDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/table": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.6.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.1.tgz",
+      "integrity": "sha512-42VLtQUOLefAvKFAQIxIZDaThq6om/PrfP0CYk3/vn+y4BMNkKnbli8ON2QCiHov4KkzOSJ/xSoBJdayiiYvVQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/table/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/table/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
+      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar/node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/tcp-port-used": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tcp-port-used/-/tcp-port-used-1.0.2.tgz",
+      "integrity": "sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==",
+      "dependencies": {
+        "debug": "4.3.1",
+        "is2": "^2.0.6"
+      }
+    },
+    "node_modules/tcp-port-used/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/teeny-request": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
+      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
+      "dependencies": {
+        "http-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "stream-events": "^1.0.5",
+        "uuid": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/teeny-request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz",
+      "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==",
+      "dependencies": {
+        "commander": "^2.20.0",
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
+      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "node_modules/tfunk": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tfunk/-/tfunk-4.0.0.tgz",
+      "integrity": "sha512-eJQ0dGfDIzWNiFNYFVjJ+Ezl/GmwHaFTBTjrtqNPW0S7cuVDBrZrmzUz6VkMeCR4DZFqhd4YtLwsw3i2wYHswQ==",
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "dlv": "^1.1.3"
+      }
+    },
+    "node_modules/tfunk/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tfunk/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tfunk/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/third-party-web": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.12.7.tgz",
+      "integrity": "sha512-9d/OfjEOjyeOpnm4F9o0KSK6BI6ytvi9DINSB5h1+jdlCvQlhKpViMSxWpBN9WstdfDQ61BS6NxWqcPCuQCAJg=="
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
+    "node_modules/through2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
+      "integrity": "sha1-OE51MU1J8y3hLuu4E2uOtrXVnak=",
+      "dependencies": {
+        "readable-stream": "~2.0.0",
+        "xtend": "~4.0.0"
+      }
+    },
+    "node_modules/through2-filter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
+      "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
+      "dependencies": {
+        "through2": "~2.0.0",
+        "xtend": "~4.0.0"
+      }
+    },
+    "node_modules/through2/node_modules/process-nextick-args": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+      "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~1.0.6",
+        "string_decoder": "~0.10.x",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
+    "node_modules/time-stamp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/timsort": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
+      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
+    },
+    "node_modules/tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dependencies": {
+        "os-tmpdir": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
+      "dependencies": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-object-path/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "dependencies": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/to-regex/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-through": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz",
+      "integrity": "sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=",
+      "dependencies": {
+        "through2": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/to-through/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/to-through/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/to-through/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/to-through/node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/to-vfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-6.1.0.tgz",
+      "integrity": "sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^2.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/to-vfile/node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/token-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ="
+    },
+    "node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/toxic": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toxic/-/toxic-1.0.1.tgz",
+      "integrity": "sha512-WI3rIGdcaKULYg7KVoB0zcjikqvcYYvcuT6D89bFPz2rVR0Rl0PK6x8/X62rtdLtBKIE985NzVf/auTtGegIIg==",
+      "dependencies": {
+        "lodash": "^4.17.10"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
+    "node_modules/transfob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/transfob/-/transfob-1.0.0.tgz",
+      "integrity": "sha1-x/wnpbVDCtSGJnrmZtkj90oKsyA="
+    },
+    "node_modules/trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
+      "dev": true
+    },
+    "node_modules/trim-newlines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/trim-trailing-lines": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
+      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/triple-beam": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
+      "integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/truncate-utf8-bytes": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+      "integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=",
+      "dependencies": {
+        "utf8-byte-length": "^1.0.1"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/tunnel": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.11 <=0.7.0 || >=0.7.3"
+      }
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
+    },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
+    "node_modules/uglify-js": {
+      "version": "3.13.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.10.tgz",
+      "integrity": "sha512-57H3ACYFXeo1IaZ1w02sfA71wI60MGco/IQFjOqK+WtKoprh7Go2/yvd2HPtoJILO2Or84ncLccI4xoHMTSbGg==",
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/uhyphen": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz",
+      "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw=="
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "dependencies": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
+    "node_modules/unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
+    },
+    "node_modules/undertaker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz",
+      "integrity": "sha512-/RXwi5m/Mu3H6IHQGww3GNt1PNXlbeCuclF2QYR14L/2CHPz3DFZkvB5hZ0N/QUkiXWCACML2jXViIQEQc2MLg==",
+      "dependencies": {
+        "arr-flatten": "^1.0.1",
+        "arr-map": "^2.0.0",
+        "bach": "^1.0.0",
+        "collection-map": "^1.0.0",
+        "es6-weak-map": "^2.0.1",
+        "fast-levenshtein": "^1.0.0",
+        "last-run": "^1.1.0",
+        "object.defaults": "^1.0.0",
+        "object.reduce": "^1.0.0",
+        "undertaker-registry": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/undertaker-registry": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
+      "integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/undertaker/node_modules/fast-levenshtein": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz",
+      "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk="
+    },
+    "node_modules/unherit": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
+      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/unified": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-8.4.2.tgz",
+      "integrity": "sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==",
+      "dev": true,
+      "dependencies": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unified-args": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/unified-args/-/unified-args-7.1.0.tgz",
+      "integrity": "sha512-soi9Rn7l5c1g0RfElSCHMwaxeiclSI0EsS3uZmMPUOfwMeeeZjLpNmHAowV9iSlQh59iiZhSMyQu9lB8WnIz5g==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "chalk": "^2.0.0",
+        "chokidar": "^3.0.0",
+        "fault": "^1.0.2",
+        "json5": "^2.0.0",
+        "minimist": "^1.2.0",
+        "text-table": "^0.2.0",
+        "unified-engine": "^7.0.0"
+      }
+    },
+    "node_modules/unified-engine": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/unified-engine/-/unified-engine-7.0.0.tgz",
+      "integrity": "sha512-zH/MvcISpWg3JZtCoY/GYBw1WnVHkhnPoMBWpmuvAifCPSS9mzT9EbtimesJp6t2nnr/ojI0mg3TmkO1CjIwVA==",
+      "dev": true,
+      "dependencies": {
+        "concat-stream": "^2.0.0",
+        "debug": "^4.0.0",
+        "fault": "^1.0.0",
+        "figures": "^3.0.0",
+        "fn-name": "^2.0.1",
+        "glob": "^7.0.3",
+        "ignore": "^5.0.0",
+        "is-empty": "^1.0.0",
+        "is-hidden": "^1.0.1",
+        "is-object": "^1.0.1",
+        "js-yaml": "^3.6.1",
+        "load-plugin": "^2.0.0",
+        "parse-json": "^4.0.0",
+        "to-vfile": "^6.0.0",
+        "trough": "^1.0.0",
+        "unist-util-inspect": "^4.1.2",
+        "vfile-reporter": "^6.0.0",
+        "vfile-statistics": "^1.1.0",
+        "x-is-string": "^0.1.0",
+        "xtend": "^4.0.1"
+      }
+    },
+    "node_modules/unified-engine/node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "dev": true,
+      "engines": [
+        "node >= 6.0"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/unified-lint-rule": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/unified-lint-rule/-/unified-lint-rule-1.0.6.tgz",
+      "integrity": "sha512-YPK15YBFwnsVorDFG/u0cVVQN5G2a3V8zv5/N6KN3TCG+ajKtaALcy7u14DCSrJI+gZeyYquFL9cioJXOGXSvg==",
+      "dev": true,
+      "dependencies": {
+        "wrapped": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unified-message-control": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unified-message-control/-/unified-message-control-1.0.4.tgz",
+      "integrity": "sha512-e1dEtN4Z/TvLn/qHm+xeZpzqhJTtfZusFErk336kkZVpqrJYiV9ptxq+SbRPFMlN0OkjDYHmVJ929KYjsMTo3g==",
+      "dev": true,
+      "dependencies": {
+        "trim": "0.0.1",
+        "unist-util-visit": "^1.0.0",
+        "vfile-location": "^2.0.0"
+      }
+    },
+    "node_modules/unified/node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+    },
+    "node_modules/uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
+    },
+    "node_modules/unique-filename": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
+      "integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
+      "optional": true,
+      "dependencies": {
+        "unique-slug": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
+      "integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
+      "optional": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/unique-stream": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.3.1.tgz",
+      "integrity": "sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==",
+      "dependencies": {
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "through2-filter": "^3.0.0"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unist-util-generated": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
+      "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-inspect": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/unist-util-inspect/-/unist-util-inspect-4.1.4.tgz",
+      "integrity": "sha512-7xxyvKiZ1SC9vL5qrMqKub1T31gRHfau4242F69CcaOrXt//5PmRVOmDZ36UAEgiT+tZWzmQmbNZn+mVtnR9HQ==",
+      "dev": true,
+      "dependencies": {
+        "is-empty": "^1.0.0"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
+      "dev": true
+    },
+    "node_modules/unist-util-map": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/unist-util-map/-/unist-util-map-1.0.5.tgz",
+      "integrity": "sha512-dFil/AN6vqhnQWNCZk0GF/G3+Q5YwsB+PqjnzvpO2wzdRtUJ1E8PN+XRE/PRr/G3FzKjRTJU0haqE0Ekl+O3Ag==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": "^4.0.1"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz",
+      "integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
+      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit": "^1.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-to-list-of-char": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-to-list-of-char/-/unist-util-to-list-of-char-0.1.3.tgz",
+      "integrity": "sha512-f8GrLHdhBKfaW6mzJc25BKeUOqhsuiRXlGrXBtb3pmRT3QCuYS+jH4g7Uf52hjV7TLQN4PGnjzrTFMFXAQaprA==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-generated": "^1.1.6",
+        "unist-util-visit": "^1.4.0"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit-parents": "^2.0.0"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-is": "^3.0.0"
+      }
+    },
+    "node_modules/unistore": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/unistore/-/unistore-3.5.2.tgz",
+      "integrity": "sha512-2Aa4eX0Ua1umyiI3Eai6Li+wXYOHgaDBGOPB3Hvw7PAVuD30TAyh5kS4yNKb2fLDbQgizvPhKQRcYnOdfsm4VQ==",
+      "peerDependenciesMeta": {
+        "preact": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/universal-analytics": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.5.3.tgz",
+      "integrity": "sha512-HXSMyIcf2XTvwZ6ZZQLfxfViRm/yTGoRgDeTbojtq6rezeyKB0sTBcKH2fhddnteAHRcHiKgr/ACpbgjGOC6RQ==",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "uuid": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=12.18.2"
+      }
+    },
+    "node_modules/universal-analytics/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
+      "dev": true
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+    },
+    "node_modules/unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "dependencies": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-value": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+      "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+      "dependencies": {
+        "get-value": "^2.0.3",
+        "has-values": "^0.1.4",
+        "isobject": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "dependencies": {
+        "isarray": "1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-values": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+      "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/untildify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
+      "integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
+      "dev": true,
+      "dependencies": {
+        "os-homedir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
+      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
+      "dev": true,
+      "dependencies": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.1.0",
+        "pupa": "^2.1.1",
+        "semver": "^7.3.4",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier-cjs": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/update-notifier-cjs/-/update-notifier-cjs-5.1.6.tgz",
+      "integrity": "sha512-wgxdSBWv3x/YpMzsWz5G4p4ec7JWD0HCl8W6bmNB6E5Gwo+1ym5oN4hiXpLf0mPySVEJEIsYlkshnplkg2OP9A==",
+      "dependencies": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "isomorphic-fetch": "^3.0.0",
+        "pupa": "^2.1.1",
+        "registry-auth-token": "^5.0.1",
+        "registry-url": "^5.1.0",
+        "semver": "^7.3.7",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/update-notifier-cjs/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/registry-auth-token": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz",
+      "integrity": "sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==",
+      "dependencies": {
+        "@pnpm/npm-conf": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/update-notifier-cjs/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/update-notifier/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/update-notifier/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
+      "deprecated": "Please see https://github.com/lydell/urix#deprecated"
+    },
+    "node_modules/url-join": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-0.0.1.tgz",
+      "integrity": "sha512-H6dnQ/yPAAVzMQRvEvyz01hhfQL5qRWSEt7BX8t9DqnPw9BjMb64fjIRq76Uvf1hkHp+mTZvEVJ5guXOT0Xqaw=="
+    },
+    "node_modules/url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "dev": true,
+      "dependencies": {
+        "prepend-http": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/user-home": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
+      "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=",
+      "dev": true,
+      "dependencies": {
+        "os-homedir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/utf8-byte-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
+      "integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E="
+    },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "node_modules/util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/util/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.0.0.tgz",
+      "integrity": "sha512-LkmXi8UUNxnCC+JlH7/fsfsKr5AU110l+SYGJimWNkWhxbN5EyeOtm1MJ0hhvqMMOhGwBj1Fp70Yv9i+hX0QAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/v8-to-istanbul/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/v8flags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+      "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/valid-url": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
+      "integrity": "sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA=="
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/value-or-function": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
+      "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vendors": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-find-down": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vfile-find-down/-/vfile-find-down-1.0.0.tgz",
+      "integrity": "sha1-hKTWbQNRP2FAqE4Hdu8ISNTwrZU=",
+      "dev": true,
+      "dependencies": {
+        "to-vfile": "^1.0.0"
+      }
+    },
+    "node_modules/vfile-find-down/node_modules/to-vfile": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-1.0.0.tgz",
+      "integrity": "sha1-iN7+zUOtsu9ZhiXw49WffzQpQbo=",
+      "dev": true,
+      "dependencies": {
+        "vfile": "^1.0.0"
+      }
+    },
+    "node_modules/vfile-find-down/node_modules/vfile": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-1.4.0.tgz",
+      "integrity": "sha1-wP1vpIT43r23cfaMMe112I2pf+c=",
+      "dev": true
+    },
+    "node_modules/vfile-find-up": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vfile-find-up/-/vfile-find-up-1.0.0.tgz",
+      "integrity": "sha1-VgTab+RTs0NQY3mE61/kkJ4oA5A=",
+      "dev": true,
+      "dependencies": {
+        "to-vfile": "^1.0.0"
+      }
+    },
+    "node_modules/vfile-find-up/node_modules/to-vfile": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-1.0.0.tgz",
+      "integrity": "sha1-iN7+zUOtsu9ZhiXw49WffzQpQbo=",
+      "dev": true,
+      "dependencies": {
+        "vfile": "^1.0.0"
+      }
+    },
+    "node_modules/vfile-find-up/node_modules/vfile": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-1.4.0.tgz",
+      "integrity": "sha1-wP1vpIT43r23cfaMMe112I2pf+c=",
+      "dev": true
+    },
+    "node_modules/vfile-location": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-reporter": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-6.0.2.tgz",
+      "integrity": "sha512-GN2bH2gs4eLnw/4jPSgfBjo+XCuvnX9elHICJZjVD4+NM0nsUrMTvdjGY5Sc/XG69XVTgLwj7hknQVc6M9FukA==",
+      "dev": true,
+      "dependencies": {
+        "repeat-string": "^1.5.0",
+        "string-width": "^4.0.0",
+        "supports-color": "^6.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-sort": "^2.1.2",
+        "vfile-statistics": "^1.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-reporter/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/vfile-sort": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-2.2.2.tgz",
+      "integrity": "sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-statistics": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-1.1.4.tgz",
+      "integrity": "sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile/node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/vinyl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+      "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "clone-buffer": "^1.0.0",
+        "clone-stats": "^1.0.0",
+        "cloneable-readable": "^1.0.0",
+        "remove-trailing-separator": "^1.0.1",
+        "replace-ext": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vinyl-fs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz",
+      "integrity": "sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==",
+      "dependencies": {
+        "fs-mkdirp-stream": "^1.0.0",
+        "glob-stream": "^6.1.0",
+        "graceful-fs": "^4.0.0",
+        "is-valid-glob": "^1.0.0",
+        "lazystream": "^1.0.0",
+        "lead": "^1.0.0",
+        "object.assign": "^4.0.4",
+        "pumpify": "^1.3.5",
+        "readable-stream": "^2.3.3",
+        "remove-bom-buffer": "^3.0.0",
+        "remove-bom-stream": "^1.2.0",
+        "resolve-options": "^1.1.0",
+        "through2": "^2.0.0",
+        "to-through": "^2.0.0",
+        "value-or-function": "^3.0.0",
+        "vinyl": "^2.0.0",
+        "vinyl-sourcemap": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vinyl-fs/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/vinyl-fs/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/vinyl-fs/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/vinyl-sourcemap": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
+      "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
+      "dependencies": {
+        "append-buffer": "^1.0.2",
+        "convert-source-map": "^1.5.0",
+        "graceful-fs": "^4.1.6",
+        "normalize-path": "^2.1.1",
+        "now-and-later": "^2.0.0",
+        "remove-bom-buffer": "^3.0.0",
+        "vinyl": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vinyl-sourcemap/node_modules/normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dependencies": {
+        "remove-trailing-separator": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "dependencies": {
+        "source-map": "^0.5.1"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ware": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
+      "integrity": "sha1-0bFPOdLiy0q4xAmPdW/ksWTkc9Q=",
+      "dev": true,
+      "dependencies": {
+        "wrap-fn": "^0.1.0"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-vitals": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.0.tgz",
+      "integrity": "sha512-f5YnCHVG9Y6uLCePD4tY8bO/Ge15NPEQWtvm3tPzDKygloiqtb4SVqRHBcrIAqo2ztqX5XueqDn97zHF0LdT6w=="
+    },
+    "node_modules/webdev-infra": {
+      "version": "1.0.54",
+      "resolved": "https://registry.npmjs.org/webdev-infra/-/webdev-infra-1.0.54.tgz",
+      "integrity": "sha512-RDNUe5ttd8L2Kxd9bfGOa8NukevvTQub6LGtdaljiUx69ignK2uQnkOGdwK8TFM03RisXFgpWG54puuOdZbkrg==",
+      "dependencies": {
+        "@11ty/eleventy": "1.0.2",
+        "@11ty/eleventy-cache-assets": "^2.3.0",
+        "@imgix/js-core": "^3.1.3",
+        "@justinribeiro/lite-youtube": "^0.9.1",
+        "@mdn/browser-compat-data": "5.2.x",
+        "@swc/html": "0.0.18",
+        "async-transforms": "^1.0.9",
+        "browser-media-mime-type": "^1.0.0",
+        "chalk": "4.1.2",
+        "common-tags": "^1.8.0",
+        "csso": "5.0.5",
+        "express": "4.18.2",
+        "fast-glob": "3.2.12",
+        "js-yaml": "4.1.0",
+        "lit-element": "^2.5.1",
+        "lodash.get": "4.4.2",
+        "lodash.set": "4.3.2",
+        "markdown-it": "^12.3.2",
+        "node-mocks-http": "1.12.1",
+        "nunjucks": "3.2.3",
+        "piscina": "^3.2.0",
+        "purgecss": "5.0.0",
+        "querystring": "^0.2.1",
+        "striptags": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@mdn/browser-compat-data": "5.2.x"
+      },
+      "peerDependenciesMeta": {
+        "@mdn/browser-compat-data": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/webdev-infra/node_modules/@mdn/browser-compat-data": {
+      "version": "5.2.67",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.2.67.tgz",
+      "integrity": "sha512-AoLSQvglknsEyYoDHbDMGvMVt78PopMz4Kzzp+cQNlge0zGXn+QtwmIizAU+n0htMXSjNFfQOk2GgpQIrOZu0w=="
+    },
+    "node_modules/webdev-infra/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/webdev-infra/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/webdev-infra/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+    },
+    "node_modules/webdev-infra/node_modules/minimatch": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.4.tgz",
+      "integrity": "sha512-U0iNYXt9wALljzfnGkhFSy5sAC6/SCR3JrHrlsdJz4kF8MvhTRQNiC59iUi1iqsitV7abrNAJWElVL9pdnoUgw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/purgecss": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz",
+      "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==",
+      "dependencies": {
+        "commander": "^9.0.0",
+        "glob": "^8.0.3",
+        "postcss": "^8.4.4",
+        "postcss-selector-parser": "^6.0.7"
+      },
+      "bin": {
+        "purgecss": "bin/purgecss.js"
+      }
+    },
+    "node_modules/webdev-infra/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.19",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz",
+      "integrity": "sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "node_modules/which-pm-runs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
+      "dev": true
+    },
+    "node_modules/wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "node_modules/wide-align/node_modules/ansi-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wide-align/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wide-align/node_modules/string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "dependencies": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wide-align/node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "dependencies": {
+        "string-width": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/winston": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-3.10.0.tgz",
+      "integrity": "sha512-nT6SIDaE9B7ZRO0u3UvdrimG0HkB7dSTAgInQnNR2SOPJ4bvq5q79+pXLftKmP52lJGW15+H5MCK0nM9D3KB/g==",
+      "dependencies": {
+        "@colors/colors": "1.5.0",
+        "@dabh/diagnostics": "^2.0.2",
+        "async": "^3.2.3",
+        "is-stream": "^2.0.0",
+        "logform": "^2.4.0",
+        "one-time": "^1.0.0",
+        "readable-stream": "^3.4.0",
+        "safe-stable-stringify": "^2.3.1",
+        "stack-trace": "0.0.x",
+        "triple-beam": "^1.3.0",
+        "winston-transport": "^4.5.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/winston-transport": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.5.0.tgz",
+      "integrity": "sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==",
+      "dependencies": {
+        "logform": "^2.3.2",
+        "readable-stream": "^3.6.0",
+        "triple-beam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 6.4.0"
+      }
+    },
+    "node_modules/with": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "dependencies": {
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
+        "assert-never": "^1.2.1",
+        "babel-walk": "3.0.0-canary-5"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "optional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "optional": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-fn": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/wrap-fn/-/wrap-fn-0.1.5.tgz",
+      "integrity": "sha1-8htuQQFv9KfjFyDbxjoJAWvfmEU=",
+      "dev": true,
+      "dependencies": {
+        "co": "3.1.0"
+      }
+    },
+    "node_modules/wrapped": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wrapped/-/wrapped-1.0.1.tgz",
+      "integrity": "sha1-x4PZ2Aeyc+mwHoUWgKk4yHyQckI=",
+      "dev": true,
+      "dependencies": {
+        "co": "3.1.0",
+        "sliced": "^1.0.1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/x-is-string": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
+      "dev": true
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg=="
+    },
+    "node_modules/xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yaml-front-matter": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.1.1.tgz",
+      "integrity": "sha512-ULGbghCLsN8Hs8vfExlqrJIe8Hl2TUjD7/zsIGMP8U+dgRXEsDXk4yydxeZJgdGiimP1XB7zhmhOB4/HyfqOyQ==",
+      "dependencies": {
+        "commander": "^6.2.0",
+        "js-yaml": "^3.14.1"
+      },
+      "bin": {
+        "yaml-front-matter": "bin/js-yaml-front.js"
+      }
+    },
+    "node_modules/yaml-front-matter/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-unparser": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
+      "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==",
+      "dev": true,
+      "dependencies": {
+        "flat": "^4.1.0",
+        "lodash": "^4.17.15",
+        "yargs": "^13.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "node_modules/yargs-unparser/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
+    "node_modules/yargs-unparser/node_modules/yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      }
+    },
+    "node_modules/yargs-unparser/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/zip-stream/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    }
+  },
+  "dependencies": {
+    "@11ty/dependency-tree": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
+      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
+    },
+    "@11ty/eleventy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-1.0.2.tgz",
+      "integrity": "sha512-03ER4zukR6BgwppI5DHRE11lc+8B0fWsBrqacVWo3o49QkdEFXnEWjhyI9qd9LrPlgQHK2/MYyxuOvNwecyCLQ==",
+      "requires": {
+        "@11ty/dependency-tree": "^2.0.1",
+        "@11ty/eleventy-utils": "^1.0.1",
+        "@iarna/toml": "^2.2.5",
+        "@sindresorhus/slugify": "^1.1.2",
+        "browser-sync": "^2.27.10",
+        "chokidar": "^3.5.3",
+        "cross-spawn": "^7.0.3",
+        "debug": "^4.3.4",
+        "dependency-graph": "^0.11.0",
+        "ejs": "^3.1.8",
+        "fast-glob": "^3.2.11",
+        "graceful-fs": "^4.2.10",
+        "gray-matter": "^4.0.3",
+        "hamljs": "^0.6.2",
+        "handlebars": "^4.7.7",
+        "is-glob": "^4.0.3",
+        "kleur": "^4.1.5",
+        "liquidjs": "^9.40.0",
+        "lodash": "^4.17.21",
+        "luxon": "^2.5.0",
+        "markdown-it": "^12.3.2",
+        "minimist": "^1.2.6",
+        "moo": "^0.5.1",
+        "multimatch": "^5.0.0",
+        "mustache": "^4.2.0",
+        "normalize-path": "^3.0.0",
+        "nunjucks": "^3.2.3",
+        "path-to-regexp": "^6.2.1",
+        "please-upgrade-node": "^3.2.0",
+        "pretty": "^2.0.0",
+        "pug": "^3.0.2",
+        "recursive-copy": "^2.0.14",
+        "semver": "^7.3.7",
+        "slugify": "^1.6.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "luxon": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.2.tgz",
+          "integrity": "sha512-Yg7/RDp4nedqmLgyH0LwgGRvMEKVzKbUdkBYyCosbHgJ+kaOUx0qzSiSatVc3DFygnirTPYnMM2P5dg2uH1WvA=="
+        },
+        "path-to-regexp": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
+          "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+        }
+      }
+    },
+    "@11ty/eleventy-cache-assets": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-cache-assets/-/eleventy-cache-assets-2.3.0.tgz",
+      "integrity": "sha512-W8tvO00GlWaKt3ccpEStaUBoj9BE3EgzuD8uYChCfYbN2Q4HkEItkiapvIJT0zJwAwoMfnSq6VHPLScYlX2XCg==",
+      "requires": {
+        "debug": "^4.3.1",
+        "flat-cache": "^3.0.4",
+        "node-fetch": "^2.6.1",
+        "p-queue": "^6.6.2",
+        "short-hash": "^1.0.0"
+      }
+    },
+    "@11ty/eleventy-plugin-rss": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-1.1.2.tgz",
+      "integrity": "sha512-QdXMl29MzMtyMj9Y1lYijPX4vGMnBDo4Peyi4GCJznCO4+eryAZiyVYciLBCek893EXL3RLOuVSshYo+jvjZ0w==",
+      "requires": {
+        "debug": "^4.3.1",
+        "posthtml": "^0.15.1",
+        "posthtml-urls": "1.0.0"
+      }
+    },
+    "@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.0.0.tgz",
+      "integrity": "sha512-t95DIZQ7MnaspgpmXyKIgz2TpyN7EshMt9+SFfqVUYKTISU3+T3FTXFscoLownyNWb/5EC0od69BnCZwEcMzCg==",
+      "requires": {
+        "linkedom": "^0.13.2",
+        "prismjs": "^1.26.0"
+      }
+    },
+    "@11ty/eleventy-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
+      "integrity": "sha512-HPpCTz4PzudcQU+i+x6GSNHVqgnvRhnVYg5dLKaAoRWLN966odAGsBxKSyhF8i1MdlOPtsytYb2AGWP7jISC5w==",
+      "requires": {
+        "normalize-path": "^3.0.0"
+      }
+    },
+    "@actions/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-5ad+U2YGrmmiw6du20AQW5XuWo7UKN2052FjSV7MX+Wfjf8sCqcsZe62NfgHys4QI4/Y+vQvLKYL8jWtA1ZBTA==",
+      "dev": true,
+      "requires": {
+        "@actions/http-client": "^2.0.1",
+        "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "@actions/http-client": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.0.1.tgz",
+          "integrity": "sha512-PIXiMVtz6VvyaRsGY268qvj57hXQEpsYogYOu2nrQhlf+XCGmZstmuZBbAybUl1nQGnvS1k1eEsQ69ZoD7xlSw==",
+          "dev": true,
+          "requires": {
+            "tunnel": "^0.0.6"
+          }
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
+        }
+      }
+    },
+    "@actions/github": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@actions/github/-/github-5.0.0.tgz",
+      "integrity": "sha512-QvE9eAAfEsS+yOOk0cylLBIO/d6WyWIOvsxxzdrPFaud39G6BOkUwScXZn1iBzQzHyu9SBkkLSWlohDWdsasAQ==",
+      "dev": true,
+      "requires": {
+        "@actions/http-client": "^1.0.11",
+        "@octokit/core": "^3.4.0",
+        "@octokit/plugin-paginate-rest": "^2.13.3",
+        "@octokit/plugin-rest-endpoint-methods": "^5.1.1"
+      }
+    },
+    "@actions/http-client": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-1.0.11.tgz",
+      "integrity": "sha512-VRYHGQV1rqnROJqdMvGUbY/Kn8vriQe/F9HR2AlYHzmKuM/p3kjNuXhmdBfcVgsvRWTz5C5XW5xvndZrVBuAYg==",
+      "dev": true,
+      "requires": {
+        "tunnel": "0.0.6"
+      }
+    },
+    "@algolia/cache-browser-local-storage": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.10.3.tgz",
+      "integrity": "sha512-TD1N7zg5lb56/PLjjD4bBl2eccEvVHhC7yfgFu2r9k5tf+gvbGxEZ3NhRZVKu2MObUIcEy2VR4LVLxOQu45Hlg==",
+      "requires": {
+        "@algolia/cache-common": "4.10.3"
+      }
+    },
+    "@algolia/cache-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.10.3.tgz",
+      "integrity": "sha512-q13cPPUmtf8a2suBC4kySSr97EyulSXuxUkn7l1tZUCX/k1y5KNheMp8npBy8Kc8gPPmHpacxddRSfOncjiKFw=="
+    },
+    "@algolia/cache-in-memory": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.10.3.tgz",
+      "integrity": "sha512-JhPajhOXAjUP+TZrZTh6KJpF5VKTKyWK2aR1cD8NtrcVHwfGS7fTyfXfVm5BqBqkD9U0gVvufUt/mVyI80aZww==",
+      "requires": {
+        "@algolia/cache-common": "4.10.3"
+      }
+    },
+    "@algolia/client-account": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.10.3.tgz",
+      "integrity": "sha512-S/IsJB4s+e1xYctdpW3nAbwrR2y3pjSo9X21fJGoiGeIpTRdvQG7nydgsLkhnhcgAdLnmqBapYyAqMGmlcyOkg==",
+      "requires": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "@algolia/client-analytics": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.10.3.tgz",
+      "integrity": "sha512-vlHTbBqJktRgclh3v7bPQLfZvFIqY4erNFIZA5C7nisCj9oLeTgzefoUrr+R90+I+XjfoLxnmoeigS1Z1yg1vw==",
+      "requires": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "@algolia/client-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.10.3.tgz",
+      "integrity": "sha512-uFyP2Z14jG2hsFRbAoavna6oJf4NTXaSDAZgouZUZlHlBp5elM38sjNeA5HR9/D9J/GjwaB1SgB7iUiIWYBB4w==",
+      "requires": {
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "@algolia/client-personalization": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.10.3.tgz",
+      "integrity": "sha512-NS7Nx8EJ/nduGXT8CFo5z7kLF0jnFehTP3eC+z+GOEESH3rrs7uR12IZHxv5QhQswZa9vl925zCOZDcDVoENCg==",
+      "requires": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "@algolia/client-search": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.10.3.tgz",
+      "integrity": "sha512-Zwnp2G94IrNFKWCG/k7epI5UswRkPvL9FCt7/slXe2bkjP2y/HA37gzRn+9tXoLVRwd7gBzrtOA4jFKIyjrtVw==",
+      "requires": {
+        "@algolia/client-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "@algolia/logger-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.10.3.tgz",
+      "integrity": "sha512-M6xi+qov2bkgg1H9e1Qtvq/E/eKsGcgz8RBbXNzqPIYoDGZNkv+b3b8YMo3dxd4Wd6M24HU1iqF3kmr1LaXndg=="
+    },
+    "@algolia/logger-console": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.10.3.tgz",
+      "integrity": "sha512-vVgRI7b4PHjgBdRkv/cRz490twvkLoGdpC4VYzIouSrKj8SIVLRhey3qgXk7oQXi3xoxVAv6NrklHfpO8Bpx0w==",
+      "requires": {
+        "@algolia/logger-common": "4.10.3"
+      }
+    },
+    "@algolia/requester-browser-xhr": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.10.3.tgz",
+      "integrity": "sha512-4WIk1zreFbc1EF6+gsfBTQvwSNjWc20zJAAExRWql/Jq5yfVHmwOqi/CajA53/cXKFBqo80DAMRvOiwP+hOLYw==",
+      "requires": {
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "@algolia/requester-common": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.10.3.tgz",
+      "integrity": "sha512-PNfLHmg0Hujugs3rx55uz/ifv7b9HVdSFQDb2hj0O5xZaBEuQCNOXC6COrXR8+9VEfqp2swpg7zwgtqFxh+BtQ=="
+    },
+    "@algolia/requester-node-http": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.10.3.tgz",
+      "integrity": "sha512-A9ZcGfEvgqf0luJApdNcIhsRh6MShn2zn2tbjwjGG1joF81w+HUY+BWuLZn56vGwAA9ZB9n00IoJJpxibbfofg==",
+      "requires": {
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "@algolia/transporter": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.10.3.tgz",
+      "integrity": "sha512-n1lRyKDbrckbMEgm7QXtj3nEWUuzA3aKLzVQ43/F/RCFib15j4IwtmYhXR6OIBRSc7+T0Hm48S0J6F+HeYCQkw==",
+      "requires": {
+        "@algolia/cache-common": "4.10.3",
+        "@algolia/logger-common": "4.10.3",
+        "@algolia/requester-common": "4.10.3"
+      }
+    },
+    "@apidevtools/json-schema-ref-parser": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.2.tgz",
+      "integrity": "sha512-r1w81DpR+KyRWd3f+rk6TNqMgedmAxZP5v5KWlXQWlgMUUtyEJch0DKEci1SorPMiSeM8XPl7MZ3miJ60JIpQg==",
+      "requires": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.6",
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^4.1.0"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        }
+      }
+    },
+    "@assemblyscript/loader": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",
+      "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg=="
+    },
+    "@babel/code-frame": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "requires": {
+        "@babel/highlight": "^7.14.5"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz",
+      "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw=="
+    },
+    "@babel/core": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
+      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-compilation-targets": "^7.14.5",
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helpers": "^7.14.6",
+        "@babel/parser": "^7.14.6",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "requires": {
+        "@babel/types": "^7.14.5",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
+      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+      "requires": {
+        "@babel/compat-data": "^7.14.5",
+        "@babel/helper-validator-option": "^7.14.5",
+        "browserslist": "^4.16.6",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
+      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
+      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
+      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
+      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
+      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow=="
+    },
+    "@babel/helpers": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "requires": {
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+    },
+    "@babel/runtime": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
+      "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
+      "dev": true,
+      "requires": {
+        "core-js-pure": "^3.15.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.14.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
+      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/parser": "^7.14.7",
+        "@babel/types": "^7.14.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ=="
+    },
+    "@dabh/diagnostics": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
+      "integrity": "sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==",
+      "requires": {
+        "colorspace": "1.1.x",
+        "enabled": "2.0.x",
+        "kuler": "^2.0.0"
+      }
+    },
+    "@eslint/eslintrc": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^13.9.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "@firebase/analytics": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-31wJq3nyftteE3lOjBi8MLGCialm/laUUoCJTPPKuLk1rfiDfYQTFkeRyyY8DJpOaECKpe6b9nLi92H/GP3m5A==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/analytics-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-zGWMbtAn1J1pOMOVTl4Metalq9sw15TX/GaU3PdD33PsJnbdtdjcot1Jg+3PKr7OOZWYqXhZ+jd5GRP4BleGUQ==",
+      "requires": {
+        "@firebase/analytics": "0.0.900-exp.6ef484a04",
+        "@firebase/analytics-types": "0.4.0",
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/analytics-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.4.0.tgz",
+      "integrity": "sha512-Jj2xW+8+8XPfWGkv9HPv/uR+Qrmq37NPYT352wf7MvE9LrstpLVmFg3LqG6MCRr5miLAom5sen2gZ+iOhVDeRA=="
+    },
+    "@firebase/app": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-URENthv5xzUcLPXZll1iEkuXCQDV2OLNRO9l2qtldZhxy5VnIEHcRV3fbNtr93JTSnc/bt+r89yhAfQlvJrvtA==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/app-check": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-+8y78kRm57VgluuygH9txO95T1B0rAzcrJle7Bzc+IRidxAokAleVMRGTvnQCr8wCmsvwpMU0JCiw6slXXQVEA==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/app-check-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-9xC1GU46K9fJDXRQxm3xtmKtH2v3ukGpSUkYQtxSTCn4r5/Nm+9ohdSLMyz535Elp0frFrNxf3gMdFk0cramxg==",
+      "requires": {
+        "@firebase/app-check": "0.0.900-exp.6ef484a04",
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/app-check-interop-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.1.0.tgz",
+      "integrity": "sha512-uZfn9s4uuRsaX5Lwx+gFP3B6YsyOKUE+Rqa6z9ojT4VSRAsZFko9FRn6OxQUA1z5t5d08fY4pf+/+Dkd5wbdbA=="
+    },
+    "@firebase/app-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-uoXUkK91apbs1wq7Q++TqSW666tGTAnr+5dquJ53HRbtrHNLXP3x6uGVGUpgltRPkWGS+mGLKJKDMywXuC0B0A==",
+      "requires": {
+        "@firebase/app": "0.0.900-exp.6ef484a04",
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "dom-storage": "2.1.0",
+        "tslib": "^2.1.0",
+        "xmlhttprequest": "1.8.0"
+      }
+    },
+    "@firebase/app-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.2.tgz",
+      "integrity": "sha512-2VXvq/K+n8XMdM4L2xy5bYp2ZXMawJXluUIDzUBvMthVR+lhxK4pfFiqr1mmDbv9ydXvEAuFsD+6DpcZuJcSSw=="
+    },
+    "@firebase/auth": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-FHzyz8SCjHk3OLQEUg5CLXPAJA8KDDOlb1z0XWJ0q5U7zUF+yUJSlJ49k6jXM8VgZq58c3aQYGm+EId4FM31zA==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "selenium-webdriver": "4.0.0-beta.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/auth-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-4MXcrQO+Z5rduM/qrTjqTHooFgFnGiXxsSp0qw4BJo22OkVXIZGYLr1CvX7Y6fuUkYUyAqMbV5skcmvlOTTKjA==",
+      "requires": {
+        "@firebase/auth": "0.0.900-exp.6ef484a04",
+        "@firebase/auth-types": "0.10.3",
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "selenium-webdriver": "^4.0.0-beta.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        },
+        "selenium-webdriver": {
+          "version": "4.0.0-beta.4",
+          "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.4.tgz",
+          "integrity": "sha512-+s/CIYkWzmnC9WASBxxVj7Lm0dcyl6OaFxwIJaFCT5WCuACiimEEr4lUnOOFP/QlKfkDQ56m+aRczaq2EvJEJg==",
+          "requires": {
+            "jszip": "^3.6.0",
+            "rimraf": "^3.0.2",
+            "tmp": "^0.2.1",
+            "ws": ">=7.4.6"
+          }
+        },
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+          "requires": {
+            "rimraf": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@firebase/auth-interop-types": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz",
+      "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==",
+      "requires": {}
+    },
+    "@firebase/auth-types": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.3.tgz",
+      "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA==",
+      "requires": {}
+    },
+    "@firebase/component": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.4.tgz",
+      "integrity": "sha512-KoLDPTsvxWr6FT9kn/snffJItaWXZLHLJlZVKiiw+flKE6MVA8Eec+ctvM2zcsMZzC2Z47gFnVqywfBlOevmpQ==",
+      "requires": {
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/database": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-rRClIC+44CT4R+haFz43yxQ7tCSJLoe0rYymoj04m5m1jJW1IOYNsH31AQqShdI2k27HkYDCC/C6TauMQEjN0w==",
+      "requires": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/database-types": "0.7.2",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/database-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-ZUipzvjB8rAmbsfCFLNOruDW6CPzkomjgCAAA2HTqXuyapv4om0paA6SGeQtPCVxbTURR5Q4TuYcIyfObyaOng==",
+      "requires": {
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/database": "0.0.900-exp.6ef484a04",
+        "@firebase/database-types": "0.7.2",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "faye-websocket": "0.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/database-types": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.7.2.tgz",
+      "integrity": "sha512-cdAd/dgwvC0r3oLEDUR+ULs1vBsEvy0b27nlzKhU6LQgm9fCDzgaH9nFGv8x+S9dly4B0egAXkONkVoWcOAisg==",
+      "requires": {
+        "@firebase/app-types": "0.6.2"
+      }
+    },
+    "@firebase/firestore": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-KZHcWgB1PWtH/fU5Cqm4ygrSSDkFQk3PNG0qW+ILAeBnFcqn2uYv4Xu9D+yb5vP+qWTAygQjxTHR/SHN68HcJQ==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/firestore-types": "2.3.0",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "@firebase/webchannel-wrapper": "0.5.1",
+        "@grpc/grpc-js": "^1.3.2",
+        "@grpc/proto-loader": "^0.6.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/firestore-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-4Zvmc6SLV/V+WZIRfqkiob7nR5qTlwTJEYEjViiGD42bRxOPsJS9aSwrTaRN4/z9iuU/g+m1og9A94ZQGM5jxQ==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/firestore": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore-types": "2.3.0",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "@firebase/webchannel-wrapper": "0.5.1",
+        "@grpc/grpc-js": "^1.3.2",
+        "@grpc/proto-loader": "^0.6.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/firestore-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.3.0.tgz",
+      "integrity": "sha512-QTW7NP7nDL0pgT/X53lyj+mIMh4nRQBBTBlRNQBt7eSyeqBf3ag3bxdQhCg358+5KbjYTC2/O6QtX9DlJZmh1A==",
+      "requires": {}
+    },
+    "@firebase/functions": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-9hynd3oC7nvkRlxeiDOewXJupNsFtwv4dxktYgIrouUMwDjkEzARI8QJW2w01UBjiuGXkKMZzJG9yqcQMMUM/w==",
+      "requires": {
+        "@firebase/app-check-interop-types": "0.1.0",
+        "@firebase/auth-interop-types": "0.1.6",
+        "@firebase/component": "0.5.4",
+        "@firebase/messaging-types": "0.5.0",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/functions-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-eEfFv+IOL3zk0NYPmemE2bsyVNYscNLdVYbjzaJ2Ic+IgB7PhTrnA8YJRfHHzhHpENYDWKq2vhHJLroTtj6PyA==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/functions": "0.0.900-exp.6ef484a04",
+        "@firebase/functions-types": "0.4.0",
+        "@firebase/messaging-types": "0.5.0",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/functions-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.4.0.tgz",
+      "integrity": "sha512-3KElyO3887HNxtxNF1ytGFrNmqD+hheqjwmT3sI09FaDCuaxGbOnsXAXH2eQ049XRXw9YQpHMgYws/aUNgXVyQ=="
+    },
+    "@firebase/installations": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-y35ti81PKh5HJmS7GXMWiXopWCXiExwBbaeyY+zyVG3os8VrnzzpiukMvF7vrS9Kehbp32CKkJVG/lUQmpBlsw==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/util": "1.1.0",
+        "idb": "3.0.2",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz",
+      "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw=="
+    },
+    "@firebase/messaging": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-6VYysXX1t8U2axgvfD1kpy6LU0PR+M0CY8uaG52IZdxKW2OE6ErNM5rCLAcHdC+heVu3D7z9V0t2hbJzPd8lDg==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/util": "1.1.0",
+        "idb": "3.0.2",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/messaging-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-oF69T5Xf7XRA6GMRfihqz18V5PNwCQughNUIKhGrVBbkIC5G7U2qDcbaCzttFQcsuy4su9cclbJCl+QQ7hKpzA==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging": "0.0.900-exp.6ef484a04",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/messaging-types": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz",
+      "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==",
+      "requires": {}
+    },
+    "@firebase/performance": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-SWZUX8rnPTw1jpWkAOIFQ3heeO5hWl+WKvZkRHdb1pB78nRfQZdH0ogxWIJd09daD74zWVa54gif8+FbI1tm6w==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/performance-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-92+vPhyQ36e735O/S6gt164CU4L7cJXZ2RhZZsNAQMcjf1kGUKixMpliW5KJ38GfGL2kLVrkQRr96fLIHBZx2A==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/performance": "0.0.900-exp.6ef484a04",
+        "@firebase/performance-types": "0.0.13",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/performance-types": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.0.13.tgz",
+      "integrity": "sha512-6fZfIGjQpwo9S5OzMpPyqgYAUZcFzZxHFqOyNtorDIgNXq33nlldTL/vtaUZA8iT9TT5cJlCrF/jthKU7X21EA=="
+    },
+    "@firebase/remote-config": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-P8CrS2t0vx7KIJ8ioeeqBtNc3SZybO3ebw343tzj3qrcfrcGaKiPto6e6dTEUOx0vOxAq1KGASDJiYxH9xXm1g==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/installations": "0.0.900-exp.6ef484a04",
+        "@firebase/logger": "0.2.6",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/remote-config-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-dovfWzcZj05KXEhLMnTYIJATUEB/Oe7OfRUG626apn4VvIyqv/1CqPcTuVqL2lqs7qF3wXLiyrEKE4GBUKx2vw==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/logger": "0.2.6",
+        "@firebase/remote-config": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config-types": "0.1.9",
+        "@firebase/util": "1.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/remote-config-types": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.1.9.tgz",
+      "integrity": "sha512-G96qnF3RYGbZsTRut7NBX0sxyczxt1uyCgXQuH/eAfUCngxjEGcZQnBdy6mvSdqdJh5mC31rWPO4v9/s7HwtzA=="
+    },
+    "@firebase/storage": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-wmFW58h7coihe4axKKHvKrP+V0X3s3aNc1jW1WPtVocTGUZCtG+tGQWVUE+rYuKVDVY56Uu5lLUeo3DPXah5Qg==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/storage-types": "0.4.1",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/storage-compat": {
+      "version": "0.0.900-exp.6ef484a04",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.0.900-exp.6ef484a04.tgz",
+      "integrity": "sha512-2+qtW1/EhNFlWs0EwhrvKkhtWALIWOtYWLwKvhc9PO2eO0IxCrEMWRA+tlUjcRbpXqt2Yt9WrXHSu3WrcClMJw==",
+      "requires": {
+        "@firebase/component": "0.5.4",
+        "@firebase/storage": "0.0.900-exp.6ef484a04",
+        "@firebase/storage-types": "0.4.1",
+        "@firebase/util": "1.1.0",
+        "node-fetch": "2.6.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "@firebase/storage-types": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.4.1.tgz",
+      "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ==",
+      "requires": {}
+    },
+    "@firebase/util": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.1.0.tgz",
+      "integrity": "sha512-lfuSASuPKNdfebuFR8rjFamMQUPH9iiZHcKS755Rkm/5gRT0qC7BMhCh3ZkHf7NVbplzIc/GhmX2jM+igDRCag==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/webchannel-wrapper": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.5.1.tgz",
+      "integrity": "sha512-dZMzN0uAjwJXWYYAcnxIwXqRTZw3o14hGe7O6uhwjD1ZQWPVYA5lASgnNskEBra0knVBsOXB4KXg+HnlKewN/A=="
+    },
+    "@google-cloud/cloudbuild": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/cloudbuild/-/cloudbuild-2.6.0.tgz",
+      "integrity": "sha512-+MKgIJ6MEomk5KF14PYUXQzkW3BDY+eMzsoxExkwnAQEFdrgrfnDTuLEpBWdP37ywAmTi8DSrtCy4pNtwZBiqA==",
+      "requires": {
+        "google-gax": "^2.24.1"
+      }
+    },
+    "@google-cloud/common": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-3.7.1.tgz",
+      "integrity": "sha512-BJfcV5BShbunYcn5HniebXLVp2Y6fpuesNegyar5CG8H2AKYHlKxnVID+FSwy92WAW4N2lpGdvxRsmiAn8Fc3w==",
+      "requires": {
+        "@google-cloud/projectify": "^2.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "arrify": "^2.0.1",
+        "duplexify": "^4.1.1",
+        "ent": "^2.2.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^7.0.2",
+        "retry-request": "^4.2.2",
+        "teeny-request": "^7.0.0"
+      }
+    },
+    "@google-cloud/error-reporting": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/error-reporting/-/error-reporting-2.0.3.tgz",
+      "integrity": "sha512-ZjcHW7R/Rhu93R2YpyB4IQ0R2QzxsuI2ehiS09AMwFk9ifvhCzlEGKvXcodoSuSRpv0y2lO5/cm/F3XgBS2dWw==",
+      "requires": {
+        "@google-cloud/common": "^3.0.0",
+        "console-log-level": "^1.4.1"
+      }
+    },
+    "@google-cloud/paginator": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-4.0.1.tgz",
+      "integrity": "sha512-6G1ui6bWhNyHjmbYwavdN7mpVPRBtyDg/bfqBTAlwr413On2TnFNfDxc9UhTJctkgoCDgQXEKiRPLPR9USlkbQ==",
+      "requires": {
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2"
+      }
+    },
+    "@google-cloud/precise-date": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/precise-date/-/precise-date-3.0.1.tgz",
+      "integrity": "sha512-crK2rgNFfvLoSgcKJY7ZBOLW91IimVNmPfi1CL+kMTf78pTJYd29XqEVedAeBu4DwCJc0EDIp1MpctLgoPq+Uw=="
+    },
+    "@google-cloud/projectify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-2.1.0.tgz",
+      "integrity": "sha512-qbpidP/fOvQNz3nyabaVnZqcED1NNzf7qfeOlgtAZd9knTwY+KtsGRkYpiQzcATABy4gnGP2lousM3S0nuWVzA=="
+    },
+    "@google-cloud/promisify": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-2.0.3.tgz",
+      "integrity": "sha512-d4VSA86eL/AFTe5xtyZX+ePUjE8dIFu2T8zmdeNBSa5/kNgXPCx/o/wbFNHAGLJdGnk1vddRuMESD9HbOC8irw=="
+    },
+    "@google-cloud/pubsub": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@google-cloud/pubsub/-/pubsub-3.7.5.tgz",
+      "integrity": "sha512-4Qrry4vIToth5mqduVslltWVsyb7DR8OhnkBA3F7XiE0jgQsiuUfwp/RB2F559aXnRbwcfmjvP4jSuEaGcjrCQ==",
+      "requires": {
+        "@google-cloud/paginator": "^4.0.0",
+        "@google-cloud/precise-date": "^3.0.0",
+        "@google-cloud/projectify": "^3.0.0",
+        "@google-cloud/promisify": "^2.0.0",
+        "@opentelemetry/api": "^1.6.0",
+        "@opentelemetry/semantic-conventions": "~1.3.0",
+        "@types/duplexify": "^3.6.0",
+        "@types/long": "^4.0.0",
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2",
+        "google-auth-library": "^8.0.2",
+        "google-gax": "^3.6.1",
+        "heap-js": "^2.2.0",
+        "is-stream-ended": "^0.1.4",
+        "lodash.snakecase": "^4.1.1",
+        "p-defer": "^3.0.0"
+      },
+      "dependencies": {
+        "@google-cloud/projectify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-3.0.0.tgz",
+          "integrity": "sha512-HRkZsNmjScY6Li8/kb70wjGlDDyLkVk3KvoEo9uIoxSjYLJasGiCch9+PqRVDOCGUFvEIqyogl+BeqILL4OJHA=="
+        },
+        "@grpc/grpc-js": {
+          "version": "1.8.21",
+          "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.21.tgz",
+          "integrity": "sha512-KeyQeZpxeEBSqFVTi3q2K7PiPXmgBfECc4updA1ejCLjYmoAlvvM3ZMp5ztTDUCUQmoY3CpDxvchjO1+rFkoHg==",
+          "requires": {
+            "@grpc/proto-loader": "^0.7.0",
+            "@types/node": ">=12.12.47"
+          }
+        },
+        "@grpc/proto-loader": {
+          "version": "0.7.10",
+          "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.10.tgz",
+          "integrity": "sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==",
+          "requires": {
+            "lodash.camelcase": "^4.3.0",
+            "long": "^5.0.0",
+            "protobufjs": "^7.2.4",
+            "yargs": "^17.7.2"
+          }
+        },
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "escodegen": {
+          "version": "1.14.3",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+          "requires": {
+            "esprima": "^4.0.1",
+            "estraverse": "^4.2.0",
+            "esutils": "^2.0.2",
+            "optionator": "^0.8.1",
+            "source-map": "~0.6.1"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="
+        },
+        "espree": {
+          "version": "9.6.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+          "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+          "requires": {
+            "acorn": "^8.9.0",
+            "acorn-jsx": "^5.3.2",
+            "eslint-visitor-keys": "^3.4.1"
+          }
+        },
+        "gaxios": {
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
+          "integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
+          "requires": {
+            "extend": "^3.0.2",
+            "https-proxy-agent": "^5.0.0",
+            "is-stream": "^2.0.0",
+            "node-fetch": "^2.6.9"
+          }
+        },
+        "gcp-metadata": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
+          "integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
+          "requires": {
+            "gaxios": "^5.0.0",
+            "json-bigint": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "google-auth-library": {
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-8.9.0.tgz",
+          "integrity": "sha512-f7aQCJODJFmYWN6PeNKzgvy9LI2tYmXnzpNDHEjG5sDNPgGb2FXQyTBnXeSH+PAtpKESFD+LmHw3Ox3mN7e1Fg==",
+          "requires": {
+            "arrify": "^2.0.0",
+            "base64-js": "^1.3.0",
+            "ecdsa-sig-formatter": "^1.0.11",
+            "fast-text-encoding": "^1.0.0",
+            "gaxios": "^5.0.0",
+            "gcp-metadata": "^5.3.0",
+            "gtoken": "^6.1.0",
+            "jws": "^4.0.0",
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "google-gax": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-3.6.1.tgz",
+          "integrity": "sha512-g/lcUjGcB6DSw2HxgEmCDOrI/CByOwqRvsuUvNalHUK2iPPPlmAIpbMbl62u0YufGMr8zgE3JL7th6dCb1Ry+w==",
+          "requires": {
+            "@grpc/grpc-js": "~1.8.0",
+            "@grpc/proto-loader": "^0.7.0",
+            "@types/long": "^4.0.0",
+            "@types/rimraf": "^3.0.2",
+            "abort-controller": "^3.0.0",
+            "duplexify": "^4.0.0",
+            "fast-text-encoding": "^1.0.3",
+            "google-auth-library": "^8.0.2",
+            "is-stream-ended": "^0.1.4",
+            "node-fetch": "^2.6.1",
+            "object-hash": "^3.0.0",
+            "proto3-json-serializer": "^1.0.0",
+            "protobufjs": "7.2.4",
+            "protobufjs-cli": "1.1.1",
+            "retry-request": "^5.0.0"
+          }
+        },
+        "google-p12-pem": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-4.0.1.tgz",
+          "integrity": "sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==",
+          "requires": {
+            "node-forge": "^1.3.1"
+          }
+        },
+        "gtoken": {
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-6.1.2.tgz",
+          "integrity": "sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==",
+          "requires": {
+            "gaxios": "^5.0.1",
+            "google-p12-pem": "^4.0.0",
+            "jws": "^4.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "levn": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+          "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+          "requires": {
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2"
+          }
+        },
+        "long": {
+          "version": "5.2.3",
+          "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+          "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "node-forge": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+          "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
+        },
+        "object-hash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+          "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+        },
+        "optionator": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+          "requires": {
+            "deep-is": "~0.1.3",
+            "fast-levenshtein": "~2.0.6",
+            "levn": "~0.3.0",
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2",
+            "word-wrap": "~1.2.3"
+          }
+        },
+        "prelude-ls": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+          "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
+        },
+        "proto3-json-serializer": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-1.1.1.tgz",
+          "integrity": "sha512-AwAuY4g9nxx0u52DnSMkqqgyLHaW/XaPLtaAo3y/ZCfeaQB/g4YDH4kb8Wc/mWzWvu0YjOznVnfn373MVZZrgw==",
+          "requires": {
+            "protobufjs": "^7.0.0"
+          }
+        },
+        "protobufjs": {
+          "version": "7.2.4",
+          "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz",
+          "integrity": "sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==",
+          "requires": {
+            "@protobufjs/aspromise": "^1.1.2",
+            "@protobufjs/base64": "^1.1.2",
+            "@protobufjs/codegen": "^2.0.4",
+            "@protobufjs/eventemitter": "^1.1.0",
+            "@protobufjs/fetch": "^1.1.0",
+            "@protobufjs/float": "^1.0.2",
+            "@protobufjs/inquire": "^1.1.0",
+            "@protobufjs/path": "^1.1.2",
+            "@protobufjs/pool": "^1.1.0",
+            "@protobufjs/utf8": "^1.1.0",
+            "@types/node": ">=13.7.0",
+            "long": "^5.0.0"
+          }
+        },
+        "protobufjs-cli": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/protobufjs-cli/-/protobufjs-cli-1.1.1.tgz",
+          "integrity": "sha512-VPWMgIcRNyQwWUv8OLPyGQ/0lQY/QTQAVN5fh+XzfDwsVw1FZ2L3DM/bcBf8WPiRz2tNpaov9lPZfNcmNo6LXA==",
+          "requires": {
+            "chalk": "^4.0.0",
+            "escodegen": "^1.13.0",
+            "espree": "^9.0.0",
+            "estraverse": "^5.1.0",
+            "glob": "^8.0.0",
+            "jsdoc": "^4.0.0",
+            "minimist": "^1.2.0",
+            "semver": "^7.1.2",
+            "tmp": "^0.2.1",
+            "uglify-js": "^3.7.7"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.3.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+              "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+            }
+          }
+        },
+        "retry-request": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-5.0.2.tgz",
+          "integrity": "sha512-wfI3pk7EE80lCIXprqh7ym48IHYdwmAAzESdbU8Q9l7pnRCk9LEhpbOTNKjz6FARLm/Bl5m+4F0ABxOkYUujSQ==",
+          "requires": {
+            "debug": "^4.1.1",
+            "extend": "^3.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+          "requires": {
+            "rimraf": "^3.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+          "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+          "requires": {
+            "prelude-ls": "~1.1.2"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "@google-cloud/secret-manager": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/secret-manager/-/secret-manager-3.10.0.tgz",
+      "integrity": "sha512-zpZzq5zBU49s8wIvgdVpOLhQ1pDDa84VWK57NPesN56q1OeBMU3g+ykW5pwARJx4svTOzPxsbv8x4kHqe8+GUQ==",
+      "requires": {
+        "google-gax": "^2.24.1"
+      }
+    },
+    "@grpc/grpc-js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.3.4.tgz",
+      "integrity": "sha512-AxtZcm0mArQhY9z8T3TynCYVEaSKxNCa9mVhVwBCUnsuUEe8Zn94bPYYKVQSLt+hJJ1y0ukr3mUvtWfcATL/IQ==",
+      "requires": {
+        "@types/node": ">=12.12.47"
+      }
+    },
+    "@grpc/proto-loader": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.6.4.tgz",
+      "integrity": "sha512-7xvDvW/vJEcmLUltCUGOgWRPM8Oofv0eCFSVMuKqaqWJaXSzmB+m9hiyqe34QofAl4WAzIKUZZlinIF9FOHyTQ==",
+      "requires": {
+        "@types/long": "^4.0.1",
+        "lodash.camelcase": "^4.3.0",
+        "long": "^4.0.0",
+        "protobufjs": "^6.10.0",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        }
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+      "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+      "dev": true
+    },
+    "@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
+    },
+    "@imgix/js-core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@imgix/js-core/-/js-core-3.5.1.tgz",
+      "integrity": "sha512-5gfOuyC0drq9TdEVR0+fR/PRZx4MqymsiTY38ZJoTXHz5D5IpnQhreroj7F4+VBKLdv96aCU9UyPGVjzSlzYIw==",
+      "requires": {
+        "js-base64": "~3.7.0",
+        "md5": "^2.2.1"
+      }
+    },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "optional": true,
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "optional": true
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+          "optional": true
+        },
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "optional": true
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "optional": true,
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^6.1.0",
+            "string-width": "^5.0.1",
+            "strip-ansi": "^7.0.1"
+          }
+        }
+      }
+    },
+    "@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="
+    },
+    "@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg=="
+    },
+    "@jsdoc/salty": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.5.tgz",
+      "integrity": "sha512-TfRP53RqunNe2HBobVBJ0VLhK1HbfvBYeTC1ahnN64PWvyYyGebmMiPkuwvD9fpw2ZbkoPb8Q7mwy0aR8Z9rvw==",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "@justinribeiro/lite-youtube": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@justinribeiro/lite-youtube/-/lite-youtube-0.9.2.tgz",
+      "integrity": "sha512-ni+E5jbVVrN7D7xfB7qzXjMq5rhSh20dILHfQl02GrySpdT+9KZp1acs8bZtBgmIqhOBkjk8+fTX30nq1UraGg=="
+    },
+    "@lit/reactive-element": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz",
+      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw=="
+    },
+    "@mdn/browser-compat-data": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.9.tgz",
+      "integrity": "sha512-J7lLtHMEizYbI5T0Xlqpg1JXCz9JegZBeb7y3v/Nm8ScRw8TL9v3n+I3g1TFm+bLrRtwA33FKwX5znDwz+WzAQ=="
+    },
+    "@minify-html/node": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@minify-html/node/-/node-0.9.2.tgz",
+      "integrity": "sha512-qXu2s34R9UgdBaofrF1OwEQXhVNsR9gK8knpQF2zSl00XFgiUKinfk6zyQu29Cwy2X4wPtOhzbg5K+vjyZnvQw==",
+      "requires": {
+        "cargo-cp-artifact": "^0.1"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@npmcli/fs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
+      "integrity": "sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==",
+      "optional": true,
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
+    "@oclif/command": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.8.7.tgz",
+      "integrity": "sha512-5DRLd2WHppuKsudHe8rCZnjgEpA2/6P4zxrLwWBXrGz+/kzA/RWcPJgkcdfm1uBCEgHMSWZP4MX21d4lAB1vYA==",
+      "dev": true,
+      "requires": {
+        "@oclif/config": "^1.18.1",
+        "@oclif/errors": "^1.3.5",
+        "@oclif/parser": "^3.8.6",
+        "@oclif/plugin-help": "^3.2.10",
+        "debug": "^4.1.1",
+        "semver": "^7.3.2"
+      }
+    },
+    "@oclif/config": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/@oclif/config/-/config-1.18.1.tgz",
+      "integrity": "sha512-twRJO5RRl3CCDaAASb6LiynfFQl/SbkWWOQy1l0kJZSMPysEhz+fk3BKfmlCCm451Btkp4UezHUwI1JtH+/zYg==",
+      "dev": true,
+      "requires": {
+        "@oclif/errors": "^1.3.3",
+        "@oclif/parser": "^3.8.0",
+        "debug": "^4.1.1",
+        "globby": "^11.0.1",
+        "is-wsl": "^2.1.1",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
+    "@oclif/errors": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@oclif/errors/-/errors-1.3.5.tgz",
+      "integrity": "sha512-OivucXPH/eLLlOT7FkCMoZXiaVYf8I/w1eTAM1+gKzfhALwWTusxEx7wBmW0uzvkSg/9ovWLycPaBgJbM3LOCQ==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^3.0.0",
+        "fs-extra": "^8.1",
+        "indent-string": "^4.0.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
+    "@oclif/linewrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@oclif/linewrap/-/linewrap-1.0.0.tgz",
+      "integrity": "sha512-Ups2dShK52xXa8w6iBWLgcjPJWjais6KPJQq3gQ/88AY6BXoTX+MIGFPrWQO1KLMiQfoTpcLnUwloN4brrVUHw==",
+      "dev": true
+    },
+    "@oclif/parser": {
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/@oclif/parser/-/parser-3.8.6.tgz",
+      "integrity": "sha512-tXb0NKgSgNxmf6baN6naK+CCwOueaFk93FG9u202U7mTBHUKsioOUlw1SG/iPi9aJM3WE4pHLXmty59pci0OEw==",
+      "dev": true,
+      "requires": {
+        "@oclif/errors": "^1.2.2",
+        "@oclif/linewrap": "^1.0.0",
+        "chalk": "^4.1.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@oclif/plugin-help": {
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.2.10.tgz",
+      "integrity": "sha512-U3Jk01MTnqnd9druulNSn6nTjPEE1Rr6PWhD4rJ6Z+NjLFTKhp3S1kutWDXJQd7CQ6m8tHd1AYgsIjiR+36bSw==",
+      "dev": true,
+      "requires": {
+        "@oclif/command": "^1.8.6",
+        "@oclif/config": "^1.18.1",
+        "@oclif/errors": "^1.3.5",
+        "chalk": "^4.1.2",
+        "indent-string": "^4.0.0",
+        "lodash": "^4.17.21",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@octokit/auth-token": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.5.0.tgz",
+      "integrity": "sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==",
+      "dev": true,
+      "requires": {
+        "@octokit/types": "^6.0.3"
+      }
+    },
+    "@octokit/core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.5.1.tgz",
+      "integrity": "sha512-omncwpLVxMP+GLpLPgeGJBF6IWJFjXDS5flY5VbppePYX9XehevbDykRH9PdCdvqt9TS5AOTiDide7h0qrkHjw==",
+      "dev": true,
+      "requires": {
+        "@octokit/auth-token": "^2.4.4",
+        "@octokit/graphql": "^4.5.8",
+        "@octokit/request": "^5.6.0",
+        "@octokit/request-error": "^2.0.5",
+        "@octokit/types": "^6.0.3",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/endpoint": {
+      "version": "6.0.12",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
+      "integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
+      "dev": true,
+      "requires": {
+        "@octokit/types": "^6.0.3",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        }
+      }
+    },
+    "@octokit/graphql": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.8.0.tgz",
+      "integrity": "sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==",
+      "dev": true,
+      "requires": {
+        "@octokit/request": "^5.6.0",
+        "@octokit/types": "^6.0.3",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/openapi-types": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
+      "integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
+      "dev": true
+    },
+    "@octokit/plugin-paginate-rest": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz",
+      "integrity": "sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==",
+      "dev": true,
+      "requires": {
+        "@octokit/types": "^6.34.0"
+      }
+    },
+    "@octokit/plugin-rest-endpoint-methods": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz",
+      "integrity": "sha512-uJjMTkN1KaOIgNtUPMtIXDOjx6dGYysdIFhgA52x4xSadQCz3b/zJexvITDVpANnfKPW/+E0xkOvLntqMYpviA==",
+      "dev": true,
+      "requires": {
+        "@octokit/types": "^6.34.0",
+        "deprecation": "^2.3.1"
+      }
+    },
+    "@octokit/request": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz",
+      "integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==",
+      "dev": true,
+      "requires": {
+        "@octokit/endpoint": "^6.0.1",
+        "@octokit/request-error": "^2.1.0",
+        "@octokit/types": "^6.16.1",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        }
+      }
+    },
+    "@octokit/request-error": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.1.0.tgz",
+      "integrity": "sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==",
+      "dev": true,
+      "requires": {
+        "@octokit/types": "^6.0.3",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      }
+    },
+    "@octokit/types": {
+      "version": "6.34.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
+      "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
+      "dev": true,
+      "requires": {
+        "@octokit/openapi-types": "^11.2.0"
+      }
+    },
+    "@opentelemetry/api": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.6.0.tgz",
+      "integrity": "sha512-OWlrQAnWn9577PhVgqjUvMr1pg57Bc4jv0iL4w0PRuOSRvq67rvHW9Ie/dZVMvCzhSCB+UxhcY/PmCmFj33Q+g=="
+    },
+    "@opentelemetry/semantic-conventions": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.3.1.tgz",
+      "integrity": "sha512-wU5J8rUoo32oSef/rFpOT1HIjLjAv3qIDHkw1QIhODV3OpAVHi5oVzlouozg9obUmZKtbZ0qUe/m7FP0y0yBzA=="
+    },
+    "@percy/cli": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.0.0-beta.71.tgz",
+      "integrity": "sha512-G2ySjDZ29Bl0RwfqSJUPyRHjsJ+DEjLZDcdFaUjZ99/OwhplbuIMI0hR0UcxpV1lOtvYTpCSRX5z4y51kzJV7w==",
+      "dev": true,
+      "requires": {
+        "@oclif/plugin-help": "^3.2.0",
+        "@percy/cli-build": "1.0.0-beta.71",
+        "@percy/cli-config": "1.0.0-beta.71",
+        "@percy/cli-exec": "1.0.0-beta.71",
+        "@percy/cli-snapshot": "1.0.0-beta.71",
+        "@percy/cli-upload": "1.0.0-beta.71"
+      }
+    },
+    "@percy/cli-build": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.0.0-beta.71.tgz",
+      "integrity": "sha512-8hnDIvpqGtKzMqTKBRkcSh19dfkxRkMcwEq+HR+LQ1wfEO9EYBWhviVNECrVGRNS0DV3UmUIEtpYtkN+FHLkUA==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/env": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      }
+    },
+    "@percy/cli-command": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.0.0-beta.71.tgz",
+      "integrity": "sha512-ihxOoujChj2sc2T7CXc6QShPLxLfYr4LvCjJFIhve/oeZZGX+hfWhThxZVGb/KzWpt6BE4q2dXsruLP48oxF1A==",
+      "dev": true,
+      "requires": {
+        "@oclif/command": "^1.8.0",
+        "@oclif/config": "^1.17.0",
+        "@oclif/plugin-help": "^3.2.0",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      }
+    },
+    "@percy/cli-config": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.0.0-beta.71.tgz",
+      "integrity": "sha512-r2VNzlfMj4qinNlFbh4NDddVmJq4jI9WNngwGmYf1JAc9b6YipuGjtznyvGV3L3ZlCmS9vLJlXjcNIB39OWzpw==",
+      "dev": true,
+      "requires": {
+        "@oclif/command": "^1.8.0",
+        "@oclif/config": "^1.17.0",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      }
+    },
+    "@percy/cli-exec": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.0.0-beta.71.tgz",
+      "integrity": "sha512-4kvHsDzkY5FejpINXwHf7QsjZM8UaJ62oW+5nccvraJWAwxC5D4BmKmraGXaYI+2nnua+/PlNCfY/y3FTvYceg==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/core": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "cross-spawn": "^7.0.3",
+        "which": "^2.0.2"
+      }
+    },
+    "@percy/cli-snapshot": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.0.0-beta.71.tgz",
+      "integrity": "sha512-5uu70EJqOzv3ekdJ4WJL758cXBwJqzKACSz194PKU3FVJ+OvaWfXJkJouVUoSR9r557pgynh6UzBOJOYMePFnQ==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/core": "1.0.0-beta.71",
+        "@percy/dom": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "globby": "^11.0.4",
+        "path-to-regexp": "^6.2.0",
+        "picomatch": "^2.3.0",
+        "serve-handler": "^6.1.3",
+        "yaml": "^1.10.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "path-to-regexp": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
+          "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/cli-upload": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.0.0-beta.71.tgz",
+      "integrity": "sha512-R283y1iFBFonCOBi4Q3YQlqIkUKs5flJJb3XlrbHlDLVoWVMQxeg9NjHtyNcIneY6zCIj61QS4sYJQr00CFyig==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.0.0-beta.71",
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "globby": "^11.0.4",
+        "image-size": "^1.0.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "image-size": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz",
+          "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==",
+          "dev": true,
+          "requires": {
+            "queue": "6.0.2"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/client": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.0.0-beta.71.tgz",
+      "integrity": "sha512-aOymDoLqLSd3Cwa5s3BucFvskoumcORxEszXFYrBEitotc9EyWdmbViupTOodHj+SGJmW9cdBopCo4CzG3JjGg==",
+      "dev": true,
+      "requires": {
+        "@percy/env": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71"
+      }
+    },
+    "@percy/config": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.0.0-beta.71.tgz",
+      "integrity": "sha512-LA7lokLPGnqdhF2VMJrntXbN+s1amjjAHbvgPH7wAoTczcHoTu4ulmDSkwcY90pj1KdD++ahN1O3SEHtrmdy0Q==",
+      "dev": true,
+      "requires": {
+        "@percy/logger": "1.0.0-beta.71",
+        "ajv": "^8.6.2",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^1.10.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+          "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "cosmiconfig": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+          "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/core": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.0.0-beta.71.tgz",
+      "integrity": "sha512-mYx4t3+9p+mZDb5aSoTJHDlky/0lATPp7Da1Hc07mN1iHHvrKBkQKJRqqEkQmq24hhWDUl9tOKR7PWQkgKzSlw==",
+      "dev": true,
+      "requires": {
+        "@percy/client": "1.0.0-beta.71",
+        "@percy/config": "1.0.0-beta.71",
+        "@percy/dom": "1.0.0-beta.71",
+        "@percy/logger": "1.0.0-beta.71",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "rimraf": "^3.0.2",
+        "ws": "^8.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
+          "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
+    "@percy/dom": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.0.0-beta.71.tgz",
+      "integrity": "sha512-ZIpQ5ExjGpliOny0w5vgEd1eG0noCtIP+nspjTPxJr3dmNGt/nR19RBE3pATc9RpLbtWOP6+Qyo8hFjZb+elrA==",
+      "dev": true
+    },
+    "@percy/env": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.0.0-beta.71.tgz",
+      "integrity": "sha512-DPiCL2xuAdaTghziP2XtmaSMp1t3Mb0oo3yEg2HOpTjaPqu/tX9LjI+cJOs2jKf/jIwC3ris3agcafceXiGWZw==",
+      "dev": true
+    },
+    "@percy/logger": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.0.0-beta.71.tgz",
+      "integrity": "sha512-09MgfGbvSFgvmQ1g0AkPnRwfkJvXluj7TLVlcgBsKEdo0cKfmctvXUtRBgiueqJFSb7jF+JwzE5i17bHnLy0ng==",
+      "dev": true
+    },
+    "@percy/puppeteer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@percy/puppeteer/-/puppeteer-2.0.0.tgz",
+      "integrity": "sha512-AAErUA1NEELBmOIscHBJB064+6x7N2ZIA9EisBfB6ff1HJK58t2x7VGRNQjGsXvq/RP0wrLzmUY3uSSb2gQhVQ==",
+      "dev": true,
+      "requires": {
+        "@percy/sdk-utils": "^1.0.0-beta.32"
+      }
+    },
+    "@percy/sdk-utils": {
+      "version": "1.0.0-beta.71",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.0.0-beta.71.tgz",
+      "integrity": "sha512-PV576xwd7mBeCQjEOHT6ij1EpInEmXhz/JN3Vi2gGhDpdcjGVKkfYXXDDDz4CMsYcDrl4EtPvNtWCaGxsivzCA==",
+      "dev": true,
+      "requires": {
+        "@percy/logger": "1.0.0-beta.71"
+      }
+    },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true
+    },
+    "@pnpm/config.env-replace": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
+      "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w=="
+    },
+    "@pnpm/network.ca-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz",
+      "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==",
+      "requires": {
+        "graceful-fs": "4.2.10"
+      }
+    },
+    "@pnpm/npm-conf": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz",
+      "integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==",
+      "requires": {
+        "@pnpm/config.env-replace": "^1.1.0",
+        "@pnpm/network.ca-file": "^1.0.1",
+        "config-chain": "^1.1.11"
+      }
+    },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.0.1.tgz",
+      "integrity": "sha512-EA+g22lbNJ8p5kuZJUYyhhDK7WgJckW5g4pNN7n4mAFUM96VuwUnNT3xr2Db2iCZPI1pJPbGyfT5mS9T1dHfMg==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.1",
+        "glob": "^7.1.6",
+        "is-reference": "^1.2.1",
+        "magic-string": "^0.25.7",
+        "resolve": "^1.17.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz",
+      "integrity": "sha512-BdxNk+LtmElRo5d06MGY4zoepyrXX1tkzX2hrnPEZ53k78GuOMWLqmJDGIIOPwVRIFZrLQOo+Yr6KtCuLIA0AQ==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/plugin-virtual": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.3.tgz",
+      "integrity": "sha512-pw6ziJcyjZtntQ//bkad9qXaBx665SgEL8C8KI5wO8G5iU5MPxvdWrQyVaAvjojGm9tJoS8M9Z/EEepbqieYmw==",
+      "requires": {}
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+        }
+      }
+    },
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "dev": true
+    },
+    "@sindresorhus/slugify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
+      "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
+      "requires": {
+        "@sindresorhus/transliterate": "^0.1.1",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@sindresorhus/transliterate": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
+      "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
+      "requires": {
+        "escape-string-regexp": "^2.0.0",
+        "lodash.deburr": "^4.1.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+        }
+      }
+    },
+    "@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ=="
+    },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
+    "@swc/html": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html/-/html-0.0.18.tgz",
+      "integrity": "sha512-EiA134Oa5sneQqMfsWcEcDaEVX1Grtb82S6nUqPUI/t7LQzg4lO7Wcp3Fqy2UwpVsL4otWM03gD65qEr5ZPf2A==",
+      "requires": {
+        "@swc/html-android-arm-eabi": "0.0.18",
+        "@swc/html-android-arm64": "0.0.18",
+        "@swc/html-darwin-arm64": "0.0.18",
+        "@swc/html-darwin-x64": "0.0.18",
+        "@swc/html-freebsd-x64": "0.0.18",
+        "@swc/html-linux-arm-gnueabihf": "0.0.18",
+        "@swc/html-linux-arm64-gnu": "0.0.18",
+        "@swc/html-linux-arm64-musl": "0.0.18",
+        "@swc/html-linux-x64-gnu": "0.0.18",
+        "@swc/html-linux-x64-musl": "0.0.18",
+        "@swc/html-win32-arm64-msvc": "0.0.18",
+        "@swc/html-win32-ia32-msvc": "0.0.18",
+        "@swc/html-win32-x64-msvc": "0.0.18"
+      }
+    },
+    "@swc/html-android-arm-eabi": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-android-arm-eabi/-/html-android-arm-eabi-0.0.18.tgz",
+      "integrity": "sha512-2/76+aJnzgoE2U+gaKfj/2Qbkx7OHTJyfP7qFdfvMb6zQsc6gQMqp3KDPXK3wmt4aPTifryl/QzIBAYFVyGXvQ==",
+      "optional": true
+    },
+    "@swc/html-android-arm64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-android-arm64/-/html-android-arm64-0.0.18.tgz",
+      "integrity": "sha512-7bVCnuJvqPUghLaBgWuZUG4fayR8UZCcnBb9PAktL2a/r97KlKgHOwN7Z9T5d7PdXu3af3x3jN7c2gSKe1Zpmw==",
+      "optional": true
+    },
+    "@swc/html-darwin-arm64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-0.0.18.tgz",
+      "integrity": "sha512-fBHsO5+qfxvKulFuEIpoo32UOPN1N3478lRfcimENp9Cu0wWe4coLZVGKMaDdRJpMR0U8DEzeybrocpns89R2Q==",
+      "optional": true
+    },
+    "@swc/html-darwin-x64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-darwin-x64/-/html-darwin-x64-0.0.18.tgz",
+      "integrity": "sha512-5hFbhf1ghUW1uZq2yHMp9GewmSf/1IAH5x7MlC+LhuBjEFDlTyY9ax2fK5YVwZwbMJh4LfgtN7ydFVUfNvHB1g==",
+      "optional": true
+    },
+    "@swc/html-freebsd-x64": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-freebsd-x64/-/html-freebsd-x64-0.0.18.tgz",
+      "integrity": "sha512-AHBEiIqyy4FD2yUxtfPG5yopXh7tDCKV1OSXavdaAqikx8EwG3ok85WsgbPPBAfZMttHkp/mvYmxE2MZE1dhDQ==",
+      "optional": true
+    },
+    "@swc/html-linux-arm-gnueabihf": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm-gnueabihf/-/html-linux-arm-gnueabihf-0.0.18.tgz",
+      "integrity": "sha512-en0EokMYRY6kB/BqGDwGY56xe7bPbN+I6VhHho1FTy0UPuh8FhYDpev/J7qgmwVlh6Ch27SDzGF8ly0tXbjQWA==",
+      "optional": true
+    },
+    "@swc/html-linux-arm64-gnu": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-0.0.18.tgz",
+      "integrity": "sha512-gXsdpv6RVEhZYWj4CV4t9D+DWQ4iPx1fFt2ICxtvbo6dkuwNOszr/CoF+K+YwoE2DGUInmD8o4VT915n92NABQ==",
+      "optional": true
+    },
+    "@swc/html-linux-arm64-musl": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-musl/-/html-linux-arm64-musl-0.0.18.tgz",
+      "integrity": "sha512-im/vFj2OOG+yqNfn4AMxOolo3b9L3QfJY0sJ9BOFqXDGzQjj6DYfNV03HpRHtP8+LKlDAcbmaH9K84PN1U3xZg==",
+      "optional": true
+    },
+    "@swc/html-linux-x64-gnu": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-0.0.18.tgz",
+      "integrity": "sha512-OCpMpFmeJTWFaFo6BkcTfHU5kx1AIU/Ad9g3LpzFyr5a/oBb1UCUVuV2Y6kUOkj93JmepsZnRkb9cr43cR6Hrg==",
+      "optional": true
+    },
+    "@swc/html-linux-x64-musl": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-musl/-/html-linux-x64-musl-0.0.18.tgz",
+      "integrity": "sha512-D0aiWk6yXQSk05ZH2gKrclT5VA5iAQfKaujmzQr+MZ+iSdMpCp+BHNi4xPuOCEnAbQ38qv6PfSY+zuszjC/utA==",
+      "optional": true
+    },
+    "@swc/html-win32-arm64-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-arm64-msvc/-/html-win32-arm64-msvc-0.0.18.tgz",
+      "integrity": "sha512-8dE0Q8g5pIP+u8aFZmKZzud7/JH1evcRLLEktdICDj5cO67eC8yTfxpQ8NwyAmf6VFVaOaCELSjX2RaYYsEViw==",
+      "optional": true
+    },
+    "@swc/html-win32-ia32-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-ia32-msvc/-/html-win32-ia32-msvc-0.0.18.tgz",
+      "integrity": "sha512-HxuBUmDc7xuTn7JD+VU7LfxP5X1XzgBbskomb8/9yoZglqpPNT200DIf8/JbP9Kv692VP5ACNIpJ6jpCfbF1kA==",
+      "optional": true
+    },
+    "@swc/html-win32-x64-msvc": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@swc/html-win32-x64-msvc/-/html-win32-x64-msvc-0.0.18.tgz",
+      "integrity": "sha512-pZ93lqOtFdalit3EGinbbmFdT+sACo+QG6uiVsAU6tynjkJjeJxKq3TC6D3m8QQDRnEe8BViTwoEAyZ00ouuhA==",
+      "optional": true
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "dev": true,
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="
+    },
+    "@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
+    },
+    "@types/chai": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
+      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==",
+      "dev": true
+    },
+    "@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
+    },
+    "@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
+    },
+    "@types/duplexify": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@types/duplexify/-/duplexify-3.6.2.tgz",
+      "integrity": "sha512-2/0R4riyD/OS6GNJLIhwRaj+8ZbxHUZl3I0a3PHwH7zhZEEAACUWjzaBrY1qVWckueZ5pouDRP0UxX6P8Hzfww==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
+    "@types/expect": {
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/@types/expect/-/expect-1.20.4.tgz",
+      "integrity": "sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==",
+      "dev": true
+    },
+    "@types/glob": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
+      "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==",
+      "requires": {
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/glob-stream": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@types/glob-stream/-/glob-stream-6.1.1.tgz",
+      "integrity": "sha512-AGOUTsTdbPkRS0qDeyeS+6KypmfVpbT5j23SN8UPG63qjKXNKjXn6V9wZUr8Fin0m9l8oGYaPK8b2WUMF8xI1A==",
+      "dev": true,
+      "requires": {
+        "@types/glob": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/grecaptcha": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/grecaptcha/-/grecaptcha-3.0.3.tgz",
+      "integrity": "sha512-osLqWRzsRsDtCfiCl1lbtUY8ANGCQsG/hhht3E7g1pVT7fD5SXgAg53S2grKjjSkXcm0fvMDbhUeL9NyAJvzGQ==",
+      "dev": true
+    },
+    "@types/gtag.js": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz",
+      "integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==",
+      "dev": true
+    },
+    "@types/gulp": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/gulp/-/gulp-4.0.9.tgz",
+      "integrity": "sha512-zzT+wfQ8uwoXjDhRK9Zkmmk09/fbLLmN/yDHFizJiEKIve85qutOnXcP/TM2sKPBTU+Jc16vfPbOMkORMUBN7Q==",
+      "dev": true,
+      "requires": {
+        "@types/undertaker": "*",
+        "@types/vinyl-fs": "*",
+        "chokidar": "^3.3.1"
+      }
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
+      "dev": true
+    },
+    "@types/json-schema": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
+      "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg=="
+    },
+    "@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA=="
+    },
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
+    },
+    "@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "requires": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA=="
+    },
+    "@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
+    },
+    "@types/minimist": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
+      "dev": true
+    },
+    "@types/mocha": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-9.0.0.tgz",
+      "integrity": "sha512-scN0hAWyLVAvLR9AyW7HoFF5sJZglyBsbPuHO4fv7JRvfmPBMfp1ozWqOf/e4wwPNxezBZXRfWzMb6iFLgEVRA==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "14.17.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.5.tgz",
+      "integrity": "sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA=="
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "@types/nunjucks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nunjucks/-/nunjucks-3.2.0.tgz",
+      "integrity": "sha512-1FM36Hm3EdidJmWlZZafkg/kZME0UZ/0vQ46JE8R7R0JqQafah0r+d4i6d/MJg5DnKxEeAOAeifEVkzo7fEvGg==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/parse5": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-2.2.34.tgz",
+      "integrity": "sha1-44cKEOgnNacg9i1x3NGDunjvOp0=",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/q": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
+      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
+    },
+    "@types/resize-observer-browser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
+      "integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-F3OznnSLAUxFrCEu/L5PY8+ny8DtcFRjx7fZZ9bycvXRi3KPTRS9HOitGZwvPg0juRhXFWIeKX58cnX5YqLohQ==",
+      "requires": {
+        "@types/glob": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/triple-beam": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.3.tgz",
+      "integrity": "sha512-6tOUG+nVHn0cJbVp25JFayS5UE6+xlbcNF9Lo9mU7U0zk3zeUShZied4YEQZjy1JBF043FSkdXw8YkUJuVtB5g=="
+    },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "@types/undertaker": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/undertaker/-/undertaker-1.2.7.tgz",
+      "integrity": "sha512-xuY7nBwo1zSRoY2aitp/HArHfTulFAKql2Fr4b4mWbBBP+F50n7Jm6nwISTTMaDk2xvl92O10TTejVF0Q9mInw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/undertaker-registry": "*",
+        "async-done": "~1.3.2"
+      }
+    },
+    "@types/undertaker-registry": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
+      "integrity": "sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==",
+      "dev": true
+    },
+    "@types/unist": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.5.tgz",
+      "integrity": "sha512-wnra4Vw9dopnuybR6HBywJ/URYpYrKLoepBTEtgfJup8Ahoi2zJECPP2cwiXp7btTvOT2CULv87aQRA4eZSP6g==",
+      "dev": true
+    },
+    "@types/vinyl": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.5.tgz",
+      "integrity": "sha512-1m6uReH8R/RuLVQGvTT/4LlWq67jZEUxp+FBHt0hYv2BT7TUwFbKI0wa7JZVEU/XtlcnX1QcTuZ36es4rGj7jg==",
+      "dev": true,
+      "requires": {
+        "@types/expect": "^1.20.4",
+        "@types/node": "*"
+      }
+    },
+    "@types/vinyl-fs": {
+      "version": "2.4.12",
+      "resolved": "https://registry.npmjs.org/@types/vinyl-fs/-/vinyl-fs-2.4.12.tgz",
+      "integrity": "sha512-LgBpYIWuuGsihnlF+OOWWz4ovwCYlT03gd3DuLwex50cYZLmX3yrW+sFF9ndtmh7zcZpS6Ri47PrIu+fV+sbXw==",
+      "dev": true,
+      "requires": {
+        "@types/glob-stream": "*",
+        "@types/node": "*",
+        "@types/vinyl": "*"
+      }
+    },
+    "@types/yauzl": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
+      "integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.4.tgz",
+      "integrity": "sha512-s1oY4RmYDlWMlcV0kKPBaADn46JirZzvvH7c2CtAqxCY96S538JRBAzt83RrfkDheV/+G/vWNK0zek+8TB3Gmw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "4.28.4",
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/experimental-utils": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.4.tgz",
+      "integrity": "sha512-OglKWOQRWTCoqMSy6pm/kpinEIgdcXYceIcH3EKWUl4S8xhFtN34GQRaAvTIZB9DD94rW7d/U7tUg3SYeDFNHA==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.7",
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/typescript-estree": "4.28.4",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "eslint-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^2.0.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.4.tgz",
+      "integrity": "sha512-4i0jq3C6n+og7/uCHiE6q5ssw87zVdpUj1k6VlVYMonE3ILdFApEzTWgppSRG4kVNB/5jxnH+gTeKLMNfUelQA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "4.28.4",
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/typescript-estree": "4.28.4",
+        "debug": "^4.3.1"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.4.tgz",
+      "integrity": "sha512-ZJBNs4usViOmlyFMt9X9l+X0WAFcDH7EdSArGqpldXu7aeZxDAuAzHiMAeI+JpSefY2INHrXeqnha39FVqXb8w==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/visitor-keys": "4.28.4"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.4.tgz",
+      "integrity": "sha512-3eap4QWxGqkYuEmVebUGULMskR6Cuoc/Wii0oSOddleP4EGx1tjLnZQ0ZP33YRoMDCs5O3j56RBV4g14T4jvww==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.4.tgz",
+      "integrity": "sha512-z7d8HK8XvCRyN2SNp+OXC2iZaF+O2BTquGhEYLKLx5k6p0r05ureUtgEfo5f6anLkhCxdHtCf6rPM1p4efHYDQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.28.4",
+        "@typescript-eslint/visitor-keys": "4.28.4",
+        "debug": "^4.3.1",
+        "globby": "^11.0.3",
+        "is-glob": "^4.0.1",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.4.tgz",
+      "integrity": "sha512-NIAXAdbz1XdOuzqkJHjNKXKj8QQ4cv5cxR/g0uQhCYf/6//XrmfpaYsM7PnBcNbfvTDLUkqQ5TPNm1sozDdTWg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.28.4",
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
+    "acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "agentkeepalive": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
+      "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
+      "optional": true,
+      "requires": {
+        "humanize-ms": "^1.2.1"
+      }
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "devOptional": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "dependencies": {
+        "clean-stack": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+          "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+          "devOptional": true
+        }
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "requires": {
+        "ajv": "^8.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        }
+      }
+    },
+    "ajv-keywords": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
+      "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw=",
+      "dev": true,
+      "requires": {}
+    },
+    "algoliasearch": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.3.tgz",
+      "integrity": "sha512-OLY0AWlPKGLbSaw14ivMB7BT5fPdp8VdzY4L8FtzZnqmLKsyes24cltGlf7/X96ACkYEcT390SReCDt/9SUIRg==",
+      "requires": {
+        "@algolia/cache-browser-local-storage": "4.10.3",
+        "@algolia/cache-common": "4.10.3",
+        "@algolia/cache-in-memory": "4.10.3",
+        "@algolia/client-account": "4.10.3",
+        "@algolia/client-analytics": "4.10.3",
+        "@algolia/client-common": "4.10.3",
+        "@algolia/client-personalization": "4.10.3",
+        "@algolia/client-search": "4.10.3",
+        "@algolia/logger-common": "4.10.3",
+        "@algolia/logger-console": "4.10.3",
+        "@algolia/requester-browser-xhr": "4.10.3",
+        "@algolia/requester-common": "4.10.3",
+        "@algolia/requester-node-http": "4.10.3",
+        "@algolia/transporter": "4.10.3"
+      }
+    },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "requires": {
+        "string-width": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "requires": {
+        "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+        }
+      }
+    },
+    "ansi-gray": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
+      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768="
+    },
+    "ansicolors": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
+      "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
+    },
+    "any-promise": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
+      "integrity": "sha1-gwtoCqflbzNFHUsEnzvYBESY7ic="
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "append-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
+      "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=",
+      "requires": {
+        "buffer-equal": "^1.0.0"
+      }
+    },
+    "aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "optional": true
+    },
+    "archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "requires": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      }
+    },
+    "archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "requires": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.8",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA="
+    },
+    "are-we-there-yet": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+      "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+      "optional": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      }
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+    },
+    "arr-filter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/arr-filter/-/arr-filter-1.1.2.tgz",
+      "integrity": "sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=",
+      "requires": {
+        "make-iterator": "^1.0.0"
+      }
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+    },
+    "arr-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/arr-map/-/arr-map-2.0.2.tgz",
+      "integrity": "sha1-Onc0X/wc814qkYJWAfnljy4kysQ=",
+      "requires": {
+        "make-iterator": "^1.0.0"
+      }
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+    },
+    "array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg=="
+    },
+    "array-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8="
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "array-initial": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-initial/-/array-initial-1.1.0.tgz",
+      "integrity": "sha1-L6dLJnOTccOUe9enrcc74zSz15U=",
+      "requires": {
+        "array-slice": "^1.0.0",
+        "is-number": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ=="
+        }
+      }
+    },
+    "array-last": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz",
+      "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==",
+      "requires": {
+        "is-number": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ=="
+        }
+      }
+    },
+    "array-slice": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w=="
+    },
+    "array-sort": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-1.0.0.tgz",
+      "integrity": "sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==",
+      "requires": {
+        "default-compare": "^1.0.0",
+        "get-value": "^2.0.6",
+        "kind-of": "^5.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+    },
+    "arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug=="
+    },
+    "as-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/as-array/-/as-array-2.0.0.tgz",
+      "integrity": "sha512-1Sd1LrodN0XYxYeZcN1J4xYZvmvTwD5tDWaPUGPIzH1mFsmzsPnVtd2exWhecMjtZk/wYWjNZJiD3b1SLCeJqg=="
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-never": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+    },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    },
+    "ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "requires": {
+        "tslib": "^2.0.1"
+      }
+    },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
+    "async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
+    "async-done": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.3.2.tgz",
+      "integrity": "sha512-uYkTP8dw2og1tu1nmza1n1CMW0qb8gWWlwqMmLb7MhBVs4BXrFziT6HXUd+/RlRA/i4H9AkofYloUbs1fwMqlw==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.2",
+        "process-nextick-args": "^2.0.0",
+        "stream-exhaust": "^1.0.1"
+      }
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
+    },
+    "async-each-series": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
+      "integrity": "sha512-p4jj6Fws4Iy2m0iCmI2am2ZNZCgbdgE+P8F/8csmn2vx7ixXrO2zGcuNsD46X5uZSVecmkEy/M06X2vG8KD6dQ=="
+    },
+    "async-lock": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.3.2.tgz",
+      "integrity": "sha512-phnXdS3RP7PPcmP6NWWzWMU0sLTeyvtZCxBPpZdkYE3seGLKSQZs9FrmVO/qwypq98FUtWWUEYxziLkdGk5nnA=="
+    },
+    "async-settle": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz",
+      "integrity": "sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=",
+      "requires": {
+        "async-done": "^1.2.2"
+      }
+    },
+    "async-transforms": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/async-transforms/-/async-transforms-1.0.9.tgz",
+      "integrity": "sha512-PCZEV8XLKoJTYovmfbXN5bZU2b8jf2d22hM7gl3xYmNRsVBt0khvHsgOdbd8UZj0xM9Tv1eWt5qrzeThgR2Alw=="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
+    "attach-ware": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/attach-ware/-/attach-ware-2.0.5.tgz",
+      "integrity": "sha512-FO/ZHTA67/AT6V1Vwrg7wUbACjsAjwjdARM2lRK7SXG65b8axWAwi3gR9zKfFqkcnCLtDXVRW9sxsJLR+12JYQ==",
+      "dev": true,
+      "requires": {
+        "unherit": "^1.0.0"
+      }
+    },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+    },
+    "aws4": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+    },
+    "axe-core": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
+      "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
+    },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
+    "babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "requires": {
+        "@babel/types": "^7.9.6"
+      }
+    },
+    "bach": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz",
+      "integrity": "sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=",
+      "requires": {
+        "arr-filter": "^1.1.1",
+        "arr-flatten": "^1.0.1",
+        "arr-map": "^2.0.0",
+        "array-each": "^1.0.0",
+        "array-initial": "^1.0.0",
+        "array-last": "^1.1.1",
+        "async-done": "^1.2.2",
+        "async-settle": "^1.0.0",
+        "now-and-later": "^2.0.0"
+      }
+    },
+    "bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="
+    },
+    "basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
+    "basic-auth-connect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
+      "integrity": "sha512-kiV+/DTgVro4aZifY/hwRwALBISViL5NP4aReaR2EVJEObpbUBHIkdJh/YpcoEiYt7nBodZ6U2ajZeZvSxUCCg=="
+    },
+    "basic-ftp": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.3.tgz",
+      "integrity": "sha512-QHX8HLlncOLpy54mh+k/sWIFd0ThmRqwe9ZjELybGZK+tZ8rUb9VO0saKJUROTbE+KhzDUT7xziGpGrW8Kmd+g=="
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "before-after-hook": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
+      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
+      "dev": true
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+    },
+    "bignumber.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.1.tgz",
+      "integrity": "sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA=="
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "requires": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "destroy": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+          "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "on-finished": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+          "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+          "requires": {
+            "ee-first": "1.1.1"
+          }
+        }
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
+    "boxen": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
+      "requires": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browser-media-mime-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-media-mime-type/-/browser-media-mime-type-1.0.0.tgz",
+      "integrity": "sha1-oVNKitk48Lz0tkL1QPo1YFZT0Ok="
+    },
+    "browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "browser-sync": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.27.11.tgz",
+      "integrity": "sha512-U5f9u97OYJH66T0MGWWzG9rOQTW6ZmDMj97vsmtqwNS03JAwdLVES8eel2lD3rvAqQCNAFqaJ74NMacBI57vJg==",
+      "requires": {
+        "browser-sync-client": "^2.27.11",
+        "browser-sync-ui": "^2.27.11",
+        "bs-recipes": "1.3.4",
+        "bs-snippet-injector": "^2.0.1",
+        "chokidar": "^3.5.1",
+        "connect": "3.6.6",
+        "connect-history-api-fallback": "^1",
+        "dev-ip": "^1.0.1",
+        "easy-extender": "^2.3.4",
+        "eazy-logger": "3.1.0",
+        "etag": "^1.8.1",
+        "fresh": "^0.5.2",
+        "fs-extra": "3.0.1",
+        "http-proxy": "^1.18.1",
+        "immutable": "^3",
+        "localtunnel": "^2.0.1",
+        "micromatch": "^4.0.2",
+        "opn": "5.3.0",
+        "portscanner": "2.2.0",
+        "qs": "^6.11.0",
+        "raw-body": "^2.3.2",
+        "resp-modifier": "6.0.2",
+        "rx": "4.1.0",
+        "send": "0.16.2",
+        "serve-index": "1.9.1",
+        "serve-static": "1.13.2",
+        "server-destroy": "1.0.1",
+        "socket.io": "^4.4.1",
+        "ua-parser-js": "1.0.2",
+        "yargs": "^17.3.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+          "integrity": "sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^3.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
+    "browser-sync-client": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-2.27.11.tgz",
+      "integrity": "sha512-okMNfD2NasL/XD1/BclP3onXjhahisk3e/kTQ5HPDT/lLqdBqNDd6QFcjI5I1ak7na2hxKQSLjryql+7fp5gKQ==",
+      "requires": {
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "mitt": "^1.1.3",
+        "rxjs": "^5.5.6",
+        "typescript": "^4.6.2"
+      }
+    },
+    "browser-sync-ui": {
+      "version": "2.27.11",
+      "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.11.tgz",
+      "integrity": "sha512-1T/Y8Pp1R68aUL7zVSFq0nxtr258xWd/nTasCAHX2M6EsGaswVOFtXsw3bKqsr35z+J+LfVfOdz1HFLYKxdgrA==",
+      "requires": {
+        "async-each-series": "0.1.1",
+        "connect-history-api-fallback": "^1",
+        "immutable": "^3",
+        "server-destroy": "1.0.1",
+        "socket.io-client": "^4.4.1",
+        "stream-throttle": "^0.1.3"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      }
+    },
+    "bs-recipes": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz",
+      "integrity": "sha512-BXvDkqhDNxXEjeGM8LFkSbR+jzmP/CYpCiVKYn+soB1dDldeU15EBNDkwVXndKuX35wnNUaPd0qSoQEAkmQtMw=="
+    },
+    "bs-snippet-injector": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bs-snippet-injector/-/bs-snippet-injector-2.0.1.tgz",
+      "integrity": "sha512-4u8IgB+L9L+S5hknOj3ddNSb42436gsnGm1AuM15B7CdbkpQTyVWgIM5/JUBiKiRwGOR86uo0Lu/OsX+SAlJmw=="
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
+    },
+    "buffer-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz",
+      "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74="
+    },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA=="
+    },
+    "bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
+    },
+    "c8": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/c8/-/c8-7.7.3.tgz",
+      "integrity": "sha512-ZyA7n3w8i4ETV25tVYMHwJxCSnaOf/LfA8vOcuZOPbonuQfD7tBT/gMWZy7eczRpCDuHcvMXwoqAemg6R0p3+A==",
+      "dev": true,
+      "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@istanbuljs/schema": "^0.1.2",
+        "find-up": "^5.0.0",
+        "foreground-child": "^2.0.0",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-reports": "^3.0.2",
+        "rimraf": "^3.0.0",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^8.0.0",
+        "yargs": "^16.2.0",
+        "yargs-parser": "^20.2.7"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        }
+      }
+    },
+    "cacache": {
+      "version": "17.1.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
+      "integrity": "sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==",
+      "optional": true,
+      "requires": {
+        "@npmcli/fs": "^3.1.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^7.7.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^1.0.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^4.0.0",
+        "ssri": "^10.0.0",
+        "tar": "^6.1.11",
+        "unique-filename": "^3.0.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "foreground-child": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+          "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+          "optional": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "signal-exit": "^4.0.1"
+          }
+        },
+        "glob": {
+          "version": "10.3.10",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+          "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+          "optional": true,
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^2.3.5",
+            "minimatch": "^9.0.1",
+            "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+            "path-scurry": "^1.10.1"
+          }
+        },
+        "lru-cache": {
+          "version": "7.18.3",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+          "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+          "optional": true
+        },
+        "minimatch": {
+          "version": "9.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "minipass": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+          "optional": true
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      }
+    },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "dev": true,
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "dependencies": {
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+          "dev": true
+        }
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ=="
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "camelcase-keys": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "map-obj": "^4.0.0",
+        "quick-lru": "^4.0.1"
+      }
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001243",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
+      "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA=="
+    },
+    "cardinal": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
+      "integrity": "sha512-JSr5eOgoEymtYHBjNWyjrMqet9Am2miJhlfKNdqLp6zoeAh0KN5dRAcxlecj5mAJrmQomgiOBj35xHLrFjqBpw==",
+      "requires": {
+        "ansicolors": "~0.3.2",
+        "redeyed": "~2.1.0"
+      }
+    },
+    "cargo-cp-artifact": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/cargo-cp-artifact/-/cargo-cp-artifact-0.1.6.tgz",
+      "integrity": "sha512-CQw0doK/aaF7j041666XzuilHxqMxaKkn+I5vmBsd8SAwS0cO5CqVEVp0xJwOKstyqWZ6WK4Ww3O6p26x/Goyg=="
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "ccount": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
+      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
+      "dev": true
+    },
+    "chai": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.4.tgz",
+      "integrity": "sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^3.0.1",
+        "get-func-name": "^2.0.0",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      }
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true
+    },
+    "character-entities-html4": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
+      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==",
       "dev": true
     },
-    "component-bind": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
-      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=",
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true
+    },
+    "character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+      "requires": {
+        "is-regex": "^1.0.3"
+      }
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
       "dev": true
     },
-    "component-emitter": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-      "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-      "dev": true
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
-    "component-inherit": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
-      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=",
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
+    "check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
       "dev": true
     },
-    "compressible": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
-      "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==",
+    "cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
       "requires": {
-        "mime-db": ">= 1.40.0 < 2"
-      },
-      "dependencies": {
-        "mime-db": {
-          "version": "1.42.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz",
-          "integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ=="
-        }
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
       }
     },
-    "compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+    "cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
       "requires": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "chokidar-cli": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.3.tgz",
+      "integrity": "sha512-HcHjqeQaT/u0Swy4eaqqg0NhPjsXq6ZN9YzP48EYc81FXBLQuvMXBsrEMDkgH+Puup1mBc0gD0qqECDy/WiMOA==",
+      "dev": true,
+      "requires": {
+        "bluebird": "3.5.5",
+        "chokidar": "2.1.5",
+        "lodash": "4.17.15",
+        "yargs": "13.3.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "dev": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true
+        },
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "chokidar": {
+          "version": "2.1.5",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+          "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
+          "dev": true,
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.3",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^4.0.0",
+            "normalize-path": "^3.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.1"
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "dev": true,
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "dev": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "safe-buffer": "~5.1.0"
           }
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-    },
-    "concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "concat-with-sourcemaps": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
-      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
-      "dev": true,
-      "requires": {
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "condense-newlines": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
-      "integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-whitespace": "^0.3.0",
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
-            "is-extendable": "^0.1.0"
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
           }
         },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "is-buffer": "^1.1.5"
+            "ansi-regex": "^4.1.0"
           }
-        }
-      }
-    },
-    "config-chain": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
-      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
-      "dev": true,
-      "requires": {
-        "ini": "^1.3.4",
-        "proto-list": "~1.2.1"
-      }
-    },
-    "configstore": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
-      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
-      "dev": true,
-      "requires": {
-        "dot-prop": "^5.2.0",
-        "graceful-fs": "^4.1.2",
-        "make-dir": "^3.0.0",
-        "unique-string": "^2.0.0",
-        "write-file-atomic": "^3.0.0",
-        "xdg-basedir": "^4.0.0"
-      },
-      "dependencies": {
-        "crypto-random-string": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-          "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
           "dev": true
         },
-        "unique-string": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-          "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+        "yargs": {
+          "version": "13.3.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+          "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
           "dev": true,
           "requires": {
-            "crypto-random-string": "^2.0.0"
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.1"
           }
-        }
-      }
-    },
-    "connect": {
-      "version": "3.6.6",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
-      "integrity": "sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.9",
-        "finalhandler": "1.1.0",
-        "parseurl": "~1.3.2",
-        "utils-merge": "1.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
           }
         }
       }
     },
-    "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-      "dev": true
-    },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "optional": true
-    },
-    "console-stream": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
-      "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
-      "dev": true
-    },
-    "constantinople": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
-      "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
-      "dev": true,
-      "requires": {
-        "@types/babel-types": "^7.0.0",
-        "@types/babylon": "^6.16.2",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0"
-      }
-    },
-    "content-disposition": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
-      "dev": true
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "convert-source-map": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
-      "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
-    "cookie": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-      "dev": true
-    },
-    "cookie-parser": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.5.tgz",
-      "integrity": "sha512-f13bPUj/gG/5mDr+xLmSxxDsB9DQiTIfhJS/sqjrmfAWiAN+x2O4i/XguTL9yDZ+/IFDanJ+5x7hC4CXT9Tdzw==",
-      "requires": {
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-        }
-      }
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-    },
-    "copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
-      "dev": true
-    },
-    "copy-props": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.4.tgz",
-      "integrity": "sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==",
-      "dev": true,
-      "requires": {
-        "each-props": "^1.3.0",
-        "is-plain-object": "^2.0.1"
-      }
-    },
-    "core-js": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "dev": true
     },
-    "core-js-compat": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
-      "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==",
-      "dev": true,
+    "chrome-launcher": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.15.0.tgz",
+      "integrity": "sha512-ZQqX5kb9H0+jy1OqLnWampfocrtSZaGl7Ny3F9GRha85o4odbL8x55paUzh51UC7cEmZ5obp3H2Mm70uC2PpRA==",
       "requires": {
-        "browserslist": "^4.8.5",
-        "semver": "7.0.0"
+        "@types/node": "*",
+        "escape-string-regexp": "^4.0.0",
+        "is-wsl": "^2.2.0",
+        "lighthouse-logger": "^1.0.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
           "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
+            "is-docker": "^2.0.0"
           }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001079",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz",
-          "integrity": "sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.465",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
-          "integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.58",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
-          "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
-          "dev": true
-        },
-        "semver": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
         }
       }
     },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "circular-json": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
+      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
+      "dev": true
     },
-    "cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "dev": true,
+    "cjson": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/cjson/-/cjson-0.3.3.tgz",
+      "integrity": "sha512-yKNcXi/Mvi5kb1uK0sahubYiyfUO2EUgOp4NcY9+8NX5Xmc+4yeNogZuLFkpLBBj7/QI9MjRUIuXrV9XOw5kVg==",
       "requires": {
-        "object-assign": "^4",
-        "vary": "^1"
+        "json-parse-helpfulerror": "^1.0.3"
       }
     },
-    "cosmiconfig": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-      "dev": true,
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
       "requires": {
-        "import-fresh": "^2.0.0",
-        "is-directory": "^0.3.1",
-        "js-yaml": "^3.13.1",
-        "parse-json": "^4.0.0"
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
       },
       "dependencies": {
-        "caller-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-          "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-          "dev": true,
-          "requires": {
-            "caller-callsite": "^2.0.0"
-          }
-        },
-        "import-fresh": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-          "dev": true,
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
           "requires": {
-            "caller-path": "^2.0.0",
-            "resolve-from": "^3.0.0"
+            "is-descriptor": "^0.1.0"
           }
-        },
-        "parse-json": {
+        }
+      }
+    },
+    "clean-stack": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-3.0.1.tgz",
+      "integrity": "sha512-lR9wNiMRcVQjSB3a7xXGLuz4cr4wJuuXlaAEbRutGowQTmlp7R72/DOgN21e8jdwblMWl9UOJMJXarX94pzKdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         }
       }
     },
-    "cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "dev": true,
+    "cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
       "requires": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "restore-cursor": "^3.1.0"
       }
     },
-    "crypto-random-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
-      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
-      "dev": true
+    "cli-spinners": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.1.tgz",
+      "integrity": "sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ=="
     },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true
+    "cli-table": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.11.tgz",
+      "integrity": "sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==",
+      "requires": {
+        "colors": "1.0.3"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+          "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw=="
+        }
+      }
     },
-    "css-declaration-sorter": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
-      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
-      "dev": true,
+    "cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
       "requires": {
-        "postcss": "^7.0.1",
-        "timsort": "^0.3.0"
+        "@colors/colors": "1.5.0",
+        "string-width": "^4.2.0"
       }
     },
-    "css-modules-loader-core": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
-      "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
+    "cli-truncate": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz",
+      "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==",
       "dev": true,
       "requires": {
-        "icss-replace-symbols": "1.1.0",
-        "postcss": "6.0.1",
-        "postcss-modules-extract-imports": "1.1.0",
-        "postcss-modules-local-by-default": "1.2.0",
-        "postcss-modules-scope": "1.1.0",
-        "postcss-modules-values": "1.3.0"
+        "slice-ansi": "^5.0.0",
+        "string-width": "^5.0.0"
       },
       "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-              "dev": true
-            }
-          }
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
         },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
           "dev": true
         },
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
           "dev": true
         },
-        "postcss": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
-          "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
+        "is-fullwidth-code-point": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+          "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+          "dev": true
+        },
+        "slice-ansi": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+          "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
           "dev": true,
           "requires": {
-            "chalk": "^1.1.3",
-            "source-map": "^0.5.6",
-            "supports-color": "^3.2.3"
+            "ansi-styles": "^6.0.0",
+            "is-fullwidth-code-point": "^4.0.0"
           }
         },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
           "dev": true,
           "requires": {
-            "has-flag": "^1.0.0"
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
           }
         }
       }
     },
-    "css-select": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
-      "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^2.1.2",
-        "domutils": "^1.7.0",
-        "nth-check": "^1.0.2"
-      }
-    },
-    "css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
-      "dev": true
-    },
-    "css-selector-tokenizer": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz",
-      "integrity": "sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==",
-      "dev": true,
-      "requires": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2",
-        "regexpu-core": "^4.6.0"
-      }
-    },
-    "css-tree": {
-      "version": "1.0.0-alpha.28",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
-      "integrity": "sha512-joNNW1gCp3qFFzj4St6zk+Wh/NBv0vM5YbEreZk0SD4S23S+1xBKb6cLDg2uj4P4k/GUMlIm6cKIDqIG+vdt0w==",
-      "dev": true,
-      "requires": {
-        "mdn-data": "~1.1.0",
-        "source-map": "^0.5.3"
-      }
-    },
-    "css-url-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz",
-      "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
-      "dev": true
-    },
-    "css-what": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
-      "dev": true
-    },
-    "cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+    "cli-width": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
-    "cssnano": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
-      "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^5.0.0",
-        "cssnano-preset-default": "^4.0.7",
-        "is-resolvable": "^1.0.0",
-        "postcss": "^7.0.0"
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz",
-      "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==",
-      "dev": true,
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "requires": {
-        "css-declaration-sorter": "^4.0.1",
-        "cssnano-util-raw-cache": "^4.0.1",
-        "postcss": "^7.0.0",
-        "postcss-calc": "^7.0.1",
-        "postcss-colormin": "^4.0.3",
-        "postcss-convert-values": "^4.0.1",
-        "postcss-discard-comments": "^4.0.2",
-        "postcss-discard-duplicates": "^4.0.2",
-        "postcss-discard-empty": "^4.0.1",
-        "postcss-discard-overridden": "^4.0.1",
-        "postcss-merge-longhand": "^4.0.11",
-        "postcss-merge-rules": "^4.0.3",
-        "postcss-minify-font-values": "^4.0.2",
-        "postcss-minify-gradients": "^4.0.2",
-        "postcss-minify-params": "^4.0.2",
-        "postcss-minify-selectors": "^4.0.2",
-        "postcss-normalize-charset": "^4.0.1",
-        "postcss-normalize-display-values": "^4.0.2",
-        "postcss-normalize-positions": "^4.0.2",
-        "postcss-normalize-repeat-style": "^4.0.2",
-        "postcss-normalize-string": "^4.0.2",
-        "postcss-normalize-timing-functions": "^4.0.2",
-        "postcss-normalize-unicode": "^4.0.1",
-        "postcss-normalize-url": "^4.0.1",
-        "postcss-normalize-whitespace": "^4.0.2",
-        "postcss-ordered-values": "^4.1.2",
-        "postcss-reduce-initial": "^4.0.3",
-        "postcss-reduce-transforms": "^4.0.2",
-        "postcss-svgo": "^4.0.2",
-        "postcss-unique-selectors": "^4.0.1"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
       }
     },
-    "cssnano-util-get-arguments": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
-      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=",
-      "dev": true
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
     },
-    "cssnano-util-get-match": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
-      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=",
-      "dev": true
+    "clone-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
+      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg="
     },
-    "cssnano-util-raw-cache": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
-      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.0"
+        "mimic-response": "^1.0.0"
       }
     },
-    "cssnano-util-same-parent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
-      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
-      "dev": true
+    "clone-stats": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
+      "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA="
     },
-    "csso": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
-      "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
-      "dev": true,
+    "cloneable-readable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz",
+      "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==",
       "requires": {
-        "css-tree": "1.0.0-alpha.29"
+        "inherits": "^2.0.1",
+        "process-nextick-args": "^2.0.0",
+        "readable-stream": "^2.3.5"
       },
       "dependencies": {
-        "css-tree": {
-          "version": "1.0.0-alpha.29",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
-          "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
-          "dev": true,
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "requires": {
-            "mdn-data": "~1.1.0",
-            "source-map": "^0.5.3"
+            "safe-buffer": "~5.1.0"
           }
         }
       }
     },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+    "co": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
+      "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g=",
+      "dev": true
+    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
       "requires": {
-        "array-find-index": "^1.0.1"
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
       }
     },
-    "custom-event": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    },
+    "collapse-white-space": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
+      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
       "dev": true
     },
-    "d": {
+    "collection-map": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-      "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz",
+      "integrity": "sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=",
       "requires": {
-        "es5-ext": "^0.10.9"
+        "arr-map": "^2.0.2",
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
       }
     },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
       "requires": {
-        "assert-plus": "^1.0.0"
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
       }
     },
-    "date-format": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
-      "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
-      "dev": true
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
     },
-    "date-time": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/date-time/-/date-time-0.1.1.tgz",
-      "integrity": "sha1-7S9tk9l5DOL9ZtW1/z7dW7y/Owc=",
-      "dev": true
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
     },
-    "debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
       "requires": {
-        "ms": "^2.1.1"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-        }
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
       }
     },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
     },
-    "decamelize-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
-      "dev": true,
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true
+    },
+    "colorspace": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
       "requires": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
+        "color": "^3.1.3",
+        "text-hex": "1.0.x"
       }
     },
-    "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg=="
+    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "compare-versions": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
+      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
       "dev": true
     },
-    "decompress": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.0.tgz",
-      "integrity": "sha1-eu3YVCflqS2s/lVnSnxQXpbQH50=",
-      "dev": true,
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
       "requires": {
-        "decompress-tar": "^4.0.0",
-        "decompress-tarbz2": "^4.0.0",
-        "decompress-targz": "^4.0.0",
-        "decompress-unzip": "^4.0.1",
-        "graceful-fs": "^4.1.10",
-        "make-dir": "^1.0.0",
-        "pify": "^2.3.0",
-        "strip-dirs": "^2.0.0"
-      },
-      "dependencies": {
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true
-            }
-          }
-        }
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
       }
     },
-    "decompress-response": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
-      "dev": true,
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
       "requires": {
-        "mimic-response": "^1.0.0"
+        "mime-db": ">= 1.43.0 < 2"
       }
     },
-    "decompress-tar": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
-      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
-      "dev": true,
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
       "requires": {
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0",
-        "tar-stream": "^1.5.2"
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
       },
       "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true
+        "bytes": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+          "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         }
       }
     },
-    "decompress-tarbz2": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
-      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
-      "dev": true,
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
       "requires": {
-        "decompress-tar": "^4.1.0",
-        "file-type": "^6.1.0",
-        "is-stream": "^1.1.0",
-        "seek-bzip": "^1.0.5",
-        "unbzip2-stream": "^1.0.9"
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
       },
       "dependencies": {
-        "file-type": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
-          "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
-          "dev": true
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
         }
       }
     },
-    "decompress-targz": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
-      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
-      "dev": true,
+    "concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
       "requires": {
-        "decompress-tar": "^4.1.1",
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0"
+        "source-map": "^0.6.1"
       },
       "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
-    "decompress-unzip": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
-      "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
-      "dev": true,
+    "condense-newlines": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
+      "integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=",
       "requires": {
-        "file-type": "^3.8.0",
-        "get-stream": "^2.2.0",
-        "pify": "^2.3.0",
-        "yauzl": "^2.4.2"
+        "extend-shallow": "^2.0.1",
+        "is-whitespace": "^0.3.0",
+        "kind-of": "^3.0.2"
       },
       "dependencies": {
-        "file-type": {
-          "version": "3.9.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
-          "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
-          "dev": true
-        },
-        "get-stream": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
-          "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
-          "dev": true,
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "requires": {
-            "object-assign": "^4.0.1",
-            "pinkie-promise": "^2.0.0"
+            "is-buffer": "^1.1.5"
           }
         }
       }
     },
-    "deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true
-    },
-    "deep-is": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
-    },
-    "deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "dev": true
-    },
-    "default-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
-      "integrity": "sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==",
-      "dev": true,
+    "config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
       "requires": {
-        "kind-of": "^5.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
-        }
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
       }
     },
-    "default-resolution": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/default-resolution/-/default-resolution-2.0.0.tgz",
-      "integrity": "sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=",
-      "dev": true
-    },
-    "defer-to-connect": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
-      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
-      "dev": true
-    },
-    "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
+    "configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
       "requires": {
-        "object-keys": "^1.0.12"
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
       }
     },
-    "define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
+    "connect": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
+      "integrity": "sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=",
       "requires": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
+        "debug": "2.6.9",
+        "finalhandler": "1.1.0",
+        "parseurl": "~1.3.2",
+        "utils-merge": "1.0.1"
       },
       "dependencies": {
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "requires": {
-            "kind-of": "^6.0.0"
+            "ms": "2.0.0"
           }
         },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
-    "del": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
-      "integrity": "sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=",
-      "dev": true,
-      "requires": {
-        "globby": "^5.0.0",
-        "is-path-cwd": "^1.0.0",
-        "is-path-in-cwd": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "rimraf": "^2.2.8"
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
-    },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
-      "dev": true,
-      "optional": true
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
     },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "optional": true
     },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-    },
-    "dependency-graph": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
-      "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
-      "dev": true
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-    },
-    "detect-file": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
-      "dev": true
+    "console-log-level": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/console-log-level/-/console-log-level-1.4.1.tgz",
+      "integrity": "sha512-VZzbIORbP+PPcN/gg3DXClTLPLg5Slwd5fL2MIc+o1qZ4BXBvWyc6QxPk6T/Mkr6IVjRpoAGf32XxP3ZWMVRcQ=="
     },
-    "detect-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
-      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
-      "dev": true,
+    "constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
       "requires": {
-        "repeating": "^2.0.0"
+        "@babel/parser": "^7.6.0",
+        "@babel/types": "^7.6.1"
       }
     },
-    "dev-ip": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
-      "integrity": "sha1-p2o+0YVb56ASu4rBbLgPPADcKPA=",
-      "dev": true
-    },
-    "di": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
-      "dev": true
-    },
-    "diagnostics": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/diagnostics/-/diagnostics-1.1.1.tgz",
-      "integrity": "sha512-8wn1PmdunLJ9Tqbx+Fx/ZEuHfJf4NKSN2ZBj7SJC/OWRWha843+WsTjqMe1B5E3p28jqBlp+mJ2fPVxPyNgYKQ==",
-      "dev": true,
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "requires": {
-        "colorspace": "1.1.x",
-        "enabled": "1.0.x",
-        "kuler": "1.0.x"
+        "safe-buffer": "5.2.1"
       }
     },
-    "diff": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
-      "dev": true
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
     },
-    "dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
+    "convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
       "requires": {
-        "path-type": "^4.0.0"
+        "safe-buffer": "~5.1.1"
       },
       "dependencies": {
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         }
       }
     },
-    "doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
+    "cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+    },
+    "copy-props": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz",
+      "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==",
       "requires": {
-        "esutils": "^2.0.2"
+        "each-props": "^1.3.2",
+        "is-plain-object": "^5.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
       }
     },
-    "doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
+    "core-js-pure": {
+      "version": "3.15.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
+      "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==",
       "dev": true
     },
-    "dom-serialize": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
-      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
-      "dev": true,
-      "requires": {
-        "custom-event": "~1.0.0",
-        "ent": "~2.2.0",
-        "extend": "^3.0.0",
-        "void-elements": "^2.0.0"
-      }
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
-    "dom-serializer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
-      "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
-      "dev": true,
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
       "requires": {
-        "domelementtype": "^1.3.0",
-        "entities": "^1.1.1"
+        "object-assign": "^4",
+        "vary": "^1"
       }
     },
-    "domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
-    },
-    "domhandler": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-      "dev": true,
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "requires": {
-        "domelementtype": "1"
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
       }
     },
-    "domutils": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-      "dev": true,
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
+    "crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
       "requires": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
       }
     },
-    "dot-prop": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
-      "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
-      "dev": true,
+    "cross-env": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
+      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
       "requires": {
-        "is-obj": "^2.0.0"
+        "cross-spawn": "^6.0.5"
       },
       "dependencies": {
-        "is-obj": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-          "dev": true
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
         }
       }
     },
-    "dotenv": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
-      "dev": true
-    },
-    "download": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
-      "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
-      "dev": true,
-      "requires": {
-        "caw": "^2.0.0",
-        "content-disposition": "^0.5.2",
-        "decompress": "^4.0.0",
-        "ext-name": "^5.0.0",
-        "file-type": "5.2.0",
-        "filenamify": "^2.0.0",
-        "get-stream": "^3.0.0",
-        "got": "^7.0.0",
-        "make-dir": "^1.0.0",
-        "p-event": "^1.0.0",
-        "pify": "^3.0.0"
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
       "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
         },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
           "requires": {
-            "pify": "^3.0.0"
+            "shebang-regex": "^3.0.0"
           }
         },
-        "pify": {
+        "shebang-regex": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
         }
       }
     },
-    "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
-      "dev": true
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
     },
-    "duplexify": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0",
-        "stream-shift": "^1.0.0"
-      }
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
     },
-    "each-props": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/each-props/-/each-props-1.3.2.tgz",
-      "integrity": "sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==",
-      "dev": true,
-      "requires": {
-        "is-plain-object": "^2.0.1",
-        "object.defaults": "^1.1.0"
-      }
+    "csp_evaluator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/csp_evaluator/-/csp_evaluator-1.1.0.tgz",
+      "integrity": "sha512-TcB+ZH9wZBG314jAUpKHPl1oYbRJV+nAT2YwZ9y4fmUN0FkEJa8e/hKZoOgzLYp1Z/CJdFhbhhGIGh0XG8W54Q=="
     },
-    "easy-extender": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
-      "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==",
-      "dev": true,
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
+    },
+    "css-declaration-sorter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
+      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
       "requires": {
-        "lodash": "^4.17.10"
+        "postcss": "^7.0.1",
+        "timsort": "^0.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
-    "eazy-logger": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.0.2.tgz",
-      "integrity": "sha1-oyWqXlPROiIliJsqxBE7K5Y29Pw=",
-      "dev": true,
+    "css-modules-loader-core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
+      "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
       "requires": {
-        "tfunk": "^3.0.1"
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.1",
+        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
+        },
+        "postcss": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
+          "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
+          "requires": {
+            "chalk": "^1.1.3",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
       }
     },
-    "ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+    "css-select": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
       "requires": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       }
     },
-    "editorconfig": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
-      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
-      "dev": true,
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+    },
+    "css-selector-tokenizer": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz",
+      "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==",
       "requires": {
-        "commander": "^2.19.0",
-        "lru-cache": "^4.1.5",
-        "semver": "^5.6.0",
-        "sigmund": "^1.0.1"
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
       }
     },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-    },
-    "ejs": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
-      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
-      "dev": true
-    },
-    "electron-to-chromium": {
-      "version": "1.3.184",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.184.tgz",
-      "integrity": "sha512-jctpw2OkTBfpKg6PI3ndZZ+LlH6y0Pc+o9wvOkm9iqqgQ/FcOxpiADeB4kGddAEtZ+PBR4+TStEcoj1ApS3lUA==",
-      "dev": true
-    },
-    "elegant-spinner": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
-      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
-      "dev": true
-    },
-    "emitter-mixin": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/emitter-mixin/-/emitter-mixin-0.0.3.tgz",
-      "integrity": "sha1-WUjLKG8uSO3DslGnz8H3iDOW1lw=",
-      "dev": true
-    },
-    "emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
-    },
-    "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
-    },
-    "enabled": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/enabled/-/enabled-1.0.2.tgz",
-      "integrity": "sha1-ll9lE9LC0cX0ZStkouM5ZGf8L5M=",
-      "dev": true,
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "requires": {
-        "env-variable": "0.0.x"
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    "css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
     },
-    "end-of-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
-      "dev": true,
-      "requires": {
-        "once": "^1.4.0"
-      }
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
-    "engine.io": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.2.1.tgz",
-      "integrity": "sha512-+VlKzHzMhaU+GsCIg4AoXF1UdDFjHHwMmMKqMJNDNLlUlejz58FCy4LBqB2YVJskHGYl06BatYWKP2TVdVXE5w==",
-      "dev": true,
+    "cssnano": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
+      "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
       "requires": {
-        "accepts": "~1.3.4",
-        "base64id": "1.0.0",
-        "cookie": "0.3.1",
-        "debug": "~3.1.0",
-        "engine.io-parser": "~2.1.0",
-        "ws": "~3.3.1"
+        "cosmiconfig": "^5.0.0",
+        "cssnano-preset-default": "^4.0.8",
+        "is-resolvable": "^1.0.0",
+        "postcss": "^7.0.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
           "requires": {
-            "ms": "2.0.0"
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
           }
         },
-        "ws": {
-          "version": "3.3.3",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
-          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
-          "dev": true,
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
           "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0",
-            "ultron": "~1.1.0"
+            "has-flag": "^3.0.0"
           }
         }
       }
     },
-    "engine.io-client": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.2.tgz",
-      "integrity": "sha512-AWjc1Xg06a6UPFOBAzJf48W1UR/qKYmv/ubgSCumo9GXgvL/xGIvo05dXoBL+2NTLMipDI7in8xK61C17L25xg==",
-      "dev": true,
+    "cssnano-preset-default": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
+      "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
       "requires": {
-        "component-emitter": "~1.3.0",
-        "component-inherit": "0.0.3",
-        "debug": "~4.1.0",
-        "engine.io-parser": "~2.2.0",
-        "has-cors": "1.1.0",
-        "indexof": "0.0.1",
-        "parseqs": "0.0.5",
-        "parseuri": "0.0.5",
-        "ws": "~6.1.0",
-        "xmlhttprequest-ssl": "~1.5.4",
-        "yeast": "0.1.2"
-      },
-      "dependencies": {
-        "component-emitter": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-          "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-          "dev": true
+        "css-declaration-sorter": "^4.0.1",
+        "cssnano-util-raw-cache": "^4.0.1",
+        "postcss": "^7.0.0",
+        "postcss-calc": "^7.0.1",
+        "postcss-colormin": "^4.0.3",
+        "postcss-convert-values": "^4.0.1",
+        "postcss-discard-comments": "^4.0.2",
+        "postcss-discard-duplicates": "^4.0.2",
+        "postcss-discard-empty": "^4.0.1",
+        "postcss-discard-overridden": "^4.0.1",
+        "postcss-merge-longhand": "^4.0.11",
+        "postcss-merge-rules": "^4.0.3",
+        "postcss-minify-font-values": "^4.0.2",
+        "postcss-minify-gradients": "^4.0.2",
+        "postcss-minify-params": "^4.0.2",
+        "postcss-minify-selectors": "^4.0.2",
+        "postcss-normalize-charset": "^4.0.1",
+        "postcss-normalize-display-values": "^4.0.2",
+        "postcss-normalize-positions": "^4.0.2",
+        "postcss-normalize-repeat-style": "^4.0.2",
+        "postcss-normalize-string": "^4.0.2",
+        "postcss-normalize-timing-functions": "^4.0.2",
+        "postcss-normalize-unicode": "^4.0.1",
+        "postcss-normalize-url": "^4.0.1",
+        "postcss-normalize-whitespace": "^4.0.2",
+        "postcss-ordered-values": "^4.1.2",
+        "postcss-reduce-initial": "^4.0.3",
+        "postcss-reduce-transforms": "^4.0.2",
+        "postcss-svgo": "^4.0.3",
+        "postcss-unique-selectors": "^4.0.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
         },
-        "engine.io-parser": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.0.tgz",
-          "integrity": "sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==",
-          "dev": true,
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
           "requires": {
-            "after": "0.8.2",
-            "arraybuffer.slice": "~0.0.7",
-            "base64-arraybuffer": "0.1.5",
-            "blob": "0.0.5",
-            "has-binary2": "~1.0.2"
+            "has-flag": "^3.0.0"
           }
         }
       }
     },
-    "engine.io-parser": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.1.3.tgz",
-      "integrity": "sha512-6HXPre2O4Houl7c4g7Ic/XzPnHBvaEmN90vtRO9uLmwtRqQmTOw0QMevL1TOfL2Cpu1VzsaTmMotQgMdkzGkVA==",
-      "dev": true,
-      "requires": {
-        "after": "0.8.2",
-        "arraybuffer.slice": "~0.0.7",
-        "base64-arraybuffer": "0.1.5",
-        "blob": "0.0.5",
-        "has-binary2": "~1.0.2"
-      }
-    },
-    "ent": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
-      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
-      "dev": true
-    },
-    "entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-      "dev": true
+    "cssnano-util-get-arguments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
+      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8="
     },
-    "env-variable": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/env-variable/-/env-variable-0.0.6.tgz",
-      "integrity": "sha512-bHz59NlBbtS0NhftmR8+ExBEekE7br0e01jw+kk0NDro7TtZzBYZ5ScGPs3OmwnpyfHTHOtr1Y6uedCdrIldtg==",
-      "dev": true
+    "cssnano-util-get-match": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
+      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0="
     },
-    "errno": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
-      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
-      "dev": true,
+    "cssnano-util-raw-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
+      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
       "requires": {
-        "prr": "~1.0.1"
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
-    "error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "requires": {
-        "is-arrayish": "^0.2.1"
-      }
+    "cssnano-util-same-parent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
+      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q=="
     },
-    "es-abstract": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz",
-      "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==",
-      "dev": true,
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
       "requires": {
-        "es-to-primitive": "^1.2.0",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "is-callable": "^1.1.4",
-        "is-regex": "^1.0.4",
-        "object-keys": "^1.0.12"
+        "css-tree": "^1.1.2"
       }
     },
-    "es-to-primitive": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
-      "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
-      "dev": true,
+    "cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+    },
+    "cssstyle": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.2.1.tgz",
+      "integrity": "sha512-7DYm8qe+gPx/h77QlCyFmX80+fGaE/6A/Ekl0zaszYOubvySO2saYFdQ78P29D0UsULxFKCetDGNaNRUdSF+2A==",
       "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "cssom": "0.3.x"
       }
     },
-    "es5-ext": {
-      "version": "0.10.49",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.49.tgz",
-      "integrity": "sha512-3NMEhi57E31qdzmYp2jwRArIUsj1HI/RxbQ4bgnSB+AIKIxsAmTiK83bYMifIcpWvEc3P1X30DhUKOqEtF/kvg==",
-      "dev": true,
+    "csv-parse": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.0.tgz",
+      "integrity": "sha512-RxruSK3M4XgzcD7Trm2wEN+SJ26ChIb903+IWxNOcB5q4jT2Cs+hFr6QP39J05EohshRFEvyzEBoZ/466S2sbw=="
+    },
+    "custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
+      "dev": true
+    },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
       "requires": {
-        "es6-iterator": "~2.0.3",
-        "es6-symbol": "~3.1.1",
-        "next-tick": "^1.0.0"
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
       }
     },
-    "es6-iterator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
-      "dev": true,
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
       "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.35",
-        "es6-symbol": "^3.1.1"
+        "assert-plus": "^1.0.0"
       }
     },
-    "es6-map": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
-      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
-      "dev": true,
+    "data-uri-to-buffer": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.1.tgz",
+      "integrity": "sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg=="
+    },
+    "date-format": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
+      "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
       "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14",
-        "es6-iterator": "~2.0.1",
-        "es6-set": "~0.1.5",
-        "es6-symbol": "~3.1.1",
-        "event-emitter": "~0.3.5"
+        "ms": "2.1.2"
       }
     },
-    "es6-promise-pool": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/es6-promise-pool/-/es6-promise-pool-2.5.0.tgz",
-      "integrity": "sha1-FHxhKza0fxBQJ/nSv1SlmKmdnMs=",
-      "dev": true
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
-    "es6-set": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
-      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+    "decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
       "dev": true,
       "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14",
-        "es6-iterator": "~2.0.1",
-        "es6-symbol": "3.1.1",
-        "event-emitter": "~0.3.5"
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+          "dev": true
+        }
       }
     },
-    "es6-symbol": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
       "dev": true,
       "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
+        "mimic-response": "^1.0.0"
       }
     },
-    "es6-weak-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
-      "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
+    "deep-eql": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
+      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
       "dev": true,
       "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.14",
-        "es6-iterator": "^2.0.1",
-        "es6-symbol": "^3.1.1"
+        "type-detect": "^4.0.0"
       }
     },
-    "escape-goat": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
-      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
-      "dev": true
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
     },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    "deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg=="
     },
-    "escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
-    "escope": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
-      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
-      "dev": true,
-      "requires": {
-        "es6-map": "^0.1.3",
-        "es6-weak-map": "^2.0.1",
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
-      }
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
     },
-    "eslint": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
-      "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
-      "dev": true,
+    "default-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
+      "integrity": "sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==",
       "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "ajv": "^6.10.0",
-        "chalk": "^2.1.0",
-        "cross-spawn": "^6.0.5",
-        "debug": "^4.0.1",
-        "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.3",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
-        "esquery": "^1.0.1",
-        "esutils": "^2.0.2",
-        "file-entry-cache": "^5.0.1",
-        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
-        "ignore": "^4.0.6",
-        "import-fresh": "^3.0.0",
-        "imurmurhash": "^0.1.4",
-        "inquirer": "^7.0.0",
-        "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.14",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.3",
-        "progress": "^2.0.0",
-        "regexpp": "^2.0.1",
-        "semver": "^6.1.2",
-        "strip-ansi": "^5.2.0",
-        "strip-json-comments": "^3.0.1",
-        "table": "^5.2.3",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
+        "kind-of": "^5.0.2"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "eslint-utils": {
-          "version": "1.4.3",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
-          "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
-          "dev": true,
-          "requires": {
-            "eslint-visitor-keys": "^1.1.0"
-          }
-        },
-        "eslint-visitor-keys": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
-          "dev": true
-        },
-        "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.8.1"
-          }
-        },
-        "optionator": {
-          "version": "0.8.3",
-          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-          "dev": true,
-          "requires": {
-            "deep-is": "~0.1.3",
-            "fast-levenshtein": "~2.0.6",
-            "levn": "~0.3.0",
-            "prelude-ls": "~1.1.2",
-            "type-check": "~0.3.2",
-            "word-wrap": "~1.2.3"
-          }
-        },
-        "regexpp": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
-          "dev": true
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
-          "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==",
-          "dev": true
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
         }
       }
     },
-    "eslint-config-prettier": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
-      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
-      "dev": true,
+    "default-resolution": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/default-resolution/-/default-resolution-2.0.0.tgz",
+      "integrity": "sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ="
+    },
+    "defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
       "requires": {
-        "get-stdin": "^6.0.0"
+        "clone": "^1.0.2"
       },
       "dependencies": {
-        "get-stdin": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
-          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
-          "dev": true
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg=="
         }
       }
     },
-    "eslint-plugin-es": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz",
-      "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==",
-      "dev": true,
+    "defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
+      "dev": true
+    },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og=="
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
       "requires": {
-        "eslint-utils": "^2.0.0",
-        "regexpp": "^3.0.0"
+        "object-keys": "^1.0.12"
       }
     },
-    "eslint-plugin-node": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
-      "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
-      "dev": true,
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
       "requires": {
-        "eslint-plugin-es": "^3.0.0",
-        "eslint-utils": "^2.0.0",
-        "ignore": "^5.1.1",
-        "minimatch": "^3.0.4",
-        "resolve": "^1.10.1",
-        "semver": "^6.1.0"
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
       },
       "dependencies": {
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
         },
-        "resolve": {
-          "version": "1.17.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-          "dev": true,
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
           "requires": {
-            "path-parse": "^1.0.6"
+            "kind-of": "^6.0.0"
           }
         },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
         }
       }
     },
-    "eslint-plugin-prettier": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz",
-      "integrity": "sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==",
-      "dev": true,
+    "degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
       "requires": {
-        "prettier-linter-helpers": "^1.0.0"
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
       }
     },
-    "eslint-scope": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-      "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "optional": true
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
+    },
+    "deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc="
+    },
+    "dev-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
+      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A=="
+    },
+    "devtools-protocol": {
+      "version": "0.0.937139",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.937139.tgz",
+      "integrity": "sha512-daj+rzR3QSxsPRy5vjjthn58axO8c11j58uY0lG5vvlJk/EiOdCWOptGdkXDjtuRHr78emKq0udHCXM4trhoDQ==",
+      "dev": true
+    },
+    "di": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
+      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
+      "dev": true
+    },
+    "diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "dev": true,
       "requires": {
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
+        "path-type": "^4.0.0"
       }
     },
-    "eslint-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
-      "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
       "requires": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
-          "dev": true
-        }
+        "esutils": "^2.0.2"
       }
     },
-    "eslint-visitor-keys": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
-      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
+    "doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
     },
-    "espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+    "dom-serialize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
+      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
       "dev": true,
       "requires": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
+        "custom-event": "~1.0.0",
+        "ent": "~2.2.0",
+        "extend": "^3.0.0",
+        "void-elements": "^2.0.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
-          "dev": true
-        },
-        "eslint-visitor-keys": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
+        "void-elements": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+          "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
           "dev": true
         }
       }
     },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
     },
-    "esquery": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
-      "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
+    "dom-storage": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+      "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
+    },
+    "dom5": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dom5/-/dom5-3.0.1.tgz",
+      "integrity": "sha512-JPFiouQIr16VQ4dX6i0+Hpbg3H2bMKPmZ+WZgBOSSvOPx9QHwwY8sPzeM2baUtViESYto6wC2nuZOMC/6gulcA==",
       "dev": true,
       "requires": {
-        "estraverse": "^5.1.0"
+        "@types/parse5": "^2.2.34",
+        "clone": "^2.1.0",
+        "parse5": "^4.0.0"
       },
       "dependencies": {
-        "estraverse": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
-          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+        "parse5": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
+          "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
           "dev": true
         }
       }
     },
-    "esrecurse": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
-      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
-      "dev": true,
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+    },
+    "domhandler": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
       "requires": {
-        "estraverse": "^4.1.0"
+        "domelementtype": "^2.2.0"
       }
     },
-    "estraverse": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
-      "dev": true
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
     },
-    "estree-walker": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
     },
-    "esutils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g=="
     },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
+      "dev": true
     },
-    "event-emitter": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
-      "dev": true,
+    "duplexify": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz",
+      "integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==",
       "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.0"
       }
     },
-    "eventemitter3": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
-      "integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg=",
-      "dev": true
+    "each-props": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/each-props/-/each-props-1.3.2.tgz",
+      "integrity": "sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==",
+      "requires": {
+        "is-plain-object": "^2.0.1",
+        "object.defaults": "^1.1.0"
+      }
     },
-    "exec-buffer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/exec-buffer/-/exec-buffer-3.2.0.tgz",
-      "integrity": "sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==",
-      "dev": true,
-      "optional": true,
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "devOptional": true
+    },
+    "easy-extender": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
+      "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==",
       "requires": {
-        "execa": "^0.7.0",
-        "p-finally": "^1.0.0",
-        "pify": "^3.0.0",
-        "rimraf": "^2.5.4",
-        "tempfile": "^2.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true,
-          "optional": true
-        }
+        "lodash": "^4.17.10"
       }
     },
-    "execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "dev": true,
+    "eazy-logger": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-3.1.0.tgz",
+      "integrity": "sha512-/snsn2JqBtUSSstEl4R0RKjkisGHAhvYj89i7r3ytNUKW12y178KDZwXLXIgwDqLW6E/VRMT9qfld7wvFae8bQ==",
       "requires": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
+        "tfunk": "^4.0.0"
       }
     },
-    "executable": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
-      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
-      "dev": true,
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "requires": {
-        "pify": "^2.2.0"
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
       }
     },
-    "exit-hook": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-      "dev": true,
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
       "requires": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
+        "safe-buffer": "^5.0.1"
       }
     },
-    "expand-range": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
+    "editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
       "requires": {
-        "fill-range": "^2.1.0"
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
       },
       "dependencies": {
-        "fill-range": {
-          "version": "2.2.4",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
-          "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
-          "dev": true,
-          "requires": {
-            "is-number": "^2.1.0",
-            "isobject": "^2.0.0",
-            "randomatic": "^3.0.0",
-            "repeat-element": "^1.1.2",
-            "repeat-string": "^1.5.2"
-          }
-        },
-        "is-number": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-          "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-          "dev": true,
-          "requires": {
-            "kind-of": "^3.0.2"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "isobject": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-          "dev": true,
-          "requires": {
-            "isarray": "1.0.0"
-          }
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
         },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
         }
       }
     },
-    "expand-tilde": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
-      "dev": true,
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "ejs": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz",
+      "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==",
       "requires": {
-        "homedir-polyfill": "^1.0.1"
+        "jake": "^10.8.5"
       }
     },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "accepts": {
-          "version": "1.3.7",
-          "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-          "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-          "requires": {
-            "mime-types": "~2.1.24",
-            "negotiator": "0.6.2"
-          }
-        },
-        "body-parser": {
-          "version": "1.19.0",
-          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-          "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-          "requires": {
-            "bytes": "3.1.0",
-            "content-type": "~1.0.4",
-            "debug": "2.6.9",
-            "depd": "~1.1.2",
-            "http-errors": "1.7.2",
-            "iconv-lite": "0.4.24",
-            "on-finished": "~2.3.0",
-            "qs": "6.7.0",
-            "raw-body": "2.4.0",
-            "type-is": "~1.6.17"
-          }
-        },
-        "bytes": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
-        },
-        "content-disposition": {
-          "version": "0.5.3",
-          "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-          "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-          "requires": {
-            "safe-buffer": "5.1.2"
-          }
-        },
-        "cookie": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "finalhandler": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-          "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-          "requires": {
-            "debug": "2.6.9",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "on-finished": "~2.3.0",
-            "parseurl": "~1.3.3",
-            "statuses": "~1.5.0",
-            "unpipe": "~1.0.0"
-          }
-        },
-        "http-errors": {
-          "version": "1.7.2",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-          "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.1",
-            "statuses": ">= 1.5.0 < 2",
-            "toidentifier": "1.0.0"
-          }
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "mime": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-        },
-        "mime-db": {
-          "version": "1.43.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-          "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
-        },
-        "mime-types": {
-          "version": "2.1.26",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-          "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
-          "requires": {
-            "mime-db": "1.43.0"
-          }
-        },
-        "negotiator": {
-          "version": "0.6.2",
-          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-          "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
-        },
-        "parseurl": {
-          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-          "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-        },
-        "qs": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
-        },
-        "range-parser": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-          "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-        },
-        "raw-body": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-          "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-          "requires": {
-            "bytes": "3.1.0",
-            "http-errors": "1.7.2",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-          }
-        },
-        "send": {
-          "version": "0.17.1",
-          "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-          "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-          "requires": {
-            "debug": "2.6.9",
-            "depd": "~1.1.2",
-            "destroy": "~1.0.4",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "fresh": "0.5.2",
-            "http-errors": "~1.7.2",
-            "mime": "1.6.0",
-            "ms": "2.1.1",
-            "on-finished": "~2.3.0",
-            "range-parser": "~1.2.1",
-            "statuses": "~1.5.0"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-              "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-            }
-          }
-        },
-        "serve-static": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-          "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-          "requires": {
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "parseurl": "~1.3.3",
-            "send": "0.17.1"
-          }
-        },
-        "setprototypeof": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-          "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
-        },
-        "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
-        },
-        "type-is": {
-          "version": "1.6.18",
-          "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-          "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+    "electron-to-chromium": {
+      "version": "1.3.772",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.772.tgz",
+      "integrity": "sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA=="
+    },
+    "elegant-spinner": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
+    },
+    "enabled": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+      "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "optional": true,
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "optional": true,
           "requires": {
-            "media-typer": "0.3.0",
-            "mime-types": "~2.1.24"
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
           }
         }
       }
     },
-    "ext-list": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
-      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
-      "dev": true,
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
       "requires": {
-        "mime-db": "^1.28.0"
+        "once": "^1.4.0"
       }
     },
-    "ext-name": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
-      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
-      "dev": true,
+    "engine.io": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.1.3.tgz",
+      "integrity": "sha512-rqs60YwkvWTLLnfazqgZqLa/aKo+9cueVfEi/dZ8PyGyaf8TLOxj++4QMIgeG3Gn0AhrWiFXvghsoY9L9h25GA==",
+      "requires": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
       "requires": {
-        "ext-list": "^2.0.0",
-        "sort-keys-length": "^1.0.0"
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
       }
     },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    "engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "requires": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      }
     },
-    "extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dev": true,
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
       "requires": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "ansi-colors": "^4.1.1"
       },
       "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
+        "ansi-colors": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+          "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA=="
         }
       }
     },
-    "external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+    "ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0="
+    },
+    "entities": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+    },
+    "env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "optional": true
+    },
+    "err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "optional": true
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
+      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.2",
+        "is-callable": "^1.2.3",
+        "is-negative-zero": "^2.0.1",
+        "is-regex": "^1.1.3",
+        "is-string": "^1.0.6",
+        "object-inspect": "^1.10.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.1"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
       "dev": true,
       "requires": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-set": "~0.1.5",
+        "es6-symbol": "~3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "dev": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "~0.3.5"
       },
       "dependencies": {
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
           "dev": true,
           "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
+            "d": "1",
+            "es5-ext": "~0.10.14"
           }
         }
       }
     },
-    "extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "escope": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
+      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
       "dev": true,
       "requires": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
+        "es6-map": "^0.1.3",
+        "es6-weak-map": "^2.0.1",
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.30.0.tgz",
+      "integrity": "sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.2",
+        "@humanwhocodes/config-array": "^0.5.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.1.2",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
-            "is-descriptor": "^1.0.0"
+            "@babel/highlight": "^7.10.4"
           }
         },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
         },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "kind-of": "^6.0.0"
+            "color-convert": "^2.0.1"
           }
         },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
           "requires": {
-            "kind-of": "^6.0.0"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
           }
         },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
+            "color-name": "~1.1.4"
           }
-        }
-      }
-    },
-    "extract-stack": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/extract-stack/-/extract-stack-1.0.0.tgz",
-      "integrity": "sha1-uXrK+UQe6iMyUpYktzL8WhyBZfo=",
-      "dev": true
-    },
-    "extract-zip": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
-      "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
-      "dev": true,
-      "requires": {
-        "concat-stream": "1.6.2",
-        "debug": "2.6.9",
-        "mkdirp": "0.5.1",
-        "yauzl": "2.4.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        },
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
           "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "type-fest": "^0.20.2"
           }
         },
-        "fd-slicer": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
-          "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "requires": {
-            "pend": "~1.2.0"
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
           }
         },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
           "dev": true
         },
-        "mkdirp": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "dev": true,
           "requires": {
-            "minimist": "0.0.8"
+            "ansi-regex": "^5.0.0"
           }
         },
-        "yauzl": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
-          "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
-            "fd-slicer": "~1.0.1"
+            "has-flag": "^4.0.0"
           }
         }
       }
     },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    "eslint-config-prettier": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz",
+      "integrity": "sha512-rV4Qu0C3nfJKPOAhFujFxB7RMP+URFyQqqOZW9DMRD7ZDTFyjaIlETU3xzHELt++4ugC0+Jm084HQYkkJe+Ivg==",
+      "dev": true,
+      "requires": {}
     },
-    "fancy-log": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
-      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
+    "eslint-plugin-es": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz",
+      "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==",
       "dev": true,
       "requires": {
-        "ansi-gray": "^0.1.1",
-        "color-support": "^1.1.3",
-        "parse-node-version": "^1.0.0",
-        "time-stamp": "^1.0.0"
+        "eslint-utils": "^2.0.0",
+        "regexpp": "^3.0.0"
       }
     },
-    "fast-deep-equal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-    },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
-    "fast-glob": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.2.tgz",
-      "integrity": "sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==",
+    "eslint-plugin-lit-a11y": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-1.0.1.tgz",
+      "integrity": "sha512-c+GgGSXb9HMgbzJGp0yl+msHk2rBXcA7KwbobbLonSXdHm6ln7zRwAEj4i7527FOaCKkhxiN6RXfOJcZT1/Bow==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "aria-query": "^4.2.2",
+        "axe-core": "^4.0.2",
+        "axobject-query": "^2.2.0",
+        "dom5": "^3.0.1",
+        "emoji-regex": "^9.0.0",
+        "eslint": "^7.6.0",
+        "eslint-rule-extender": "0.0.1",
+        "intl-list-format": "^1.0.3",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "requireindex": "~1.1.0"
       },
       "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
           "dev": true
         },
-        "merge2": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-          "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
           "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.0.5"
-          }
-        },
-        "picomatch": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-          "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+        }
+      }
+    },
+    "eslint-plugin-node": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
+      "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
+      "dev": true,
+      "requires": {
+        "eslint-plugin-es": "^3.0.0",
+        "eslint-utils": "^2.0.0",
+        "ignore": "^5.1.1",
+        "minimatch": "^3.0.4",
+        "resolve": "^1.10.1",
+        "semver": "^6.1.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
         }
       }
     },
-    "fast-json-stable-stringify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
     },
-    "fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+    "eslint-rule-extender": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz",
+      "integrity": "sha512-F0j1Twve3lamL3J0rRSVAynlp58sDPG39JFcQrM+u9Na7PmCgiPHNODh6YE9mduaGcsn3NBqbf6LZRj0cLr8Ng==",
       "dev": true
     },
-    "fast-safe-stringify": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz",
-      "integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==",
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
       "dev": true
     },
-    "fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true
+    "espree": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.4.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^1.3.0"
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
-    "fastq": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
-      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
       "dev": true,
       "requires": {
-        "reusify": "^1.0.0"
+        "d": "1",
+        "es5-ext": "~0.10.14"
       }
     },
-    "fault": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz",
-      "integrity": "sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==",
-      "dev": true,
-      "requires": {
-        "format": "^0.2.2"
-      }
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
     },
-    "fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "dev": true,
-      "requires": {
-        "pend": "~1.2.0"
-      }
+    "eventemitter-asyncresource": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eventemitter-asyncresource/-/eventemitter-asyncresource-1.0.0.tgz",
+      "integrity": "sha512-39F7TBIV0G7gTelxwbEqnwhp90eqCPON1k0NwNfwhgKn4Co4ybUbj2pECcXT0B3ztRKZ7Pw1JujUUgmQJHcVAQ=="
     },
-    "fecha": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-2.3.3.tgz",
-      "integrity": "sha512-lUGBnIamTAwk4znq5BcqsDaxSmZ9nDVJaij6NvRt/Tg4R69gERA+otPKbS86ROw9nxVMw2/mp1fnaiWqbs6Sdg==",
-      "dev": true
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
-    "figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+    "events-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/events-listener/-/events-listener-1.1.0.tgz",
+      "integrity": "sha512-Kd3EgYfODHueq6GzVfs/VUolh2EgJsS8hkO3KpnDrxVjU3eq63eXM2ujXkhPP+OkeUOhL8CxdfZbQXzryb5C4g=="
+    },
+    "execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "dev": true,
       "requires": {
-        "escape-string-regexp": "^1.0.5"
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
       },
       "dependencies": {
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
           "dev": true
         }
       }
     },
-    "file-entry-cache": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
-      "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
-      "dev": true,
+    "exegesis": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/exegesis/-/exegesis-4.1.1.tgz",
+      "integrity": "sha512-PvSqaMOw2absLBgsthtJyVOeCHN4lxQ1dM7ibXb6TfZZJaoXtGELoEAGJRFvdN16+u9kg8oy1okZXRk8VpimWA==",
       "requires": {
-        "flat-cache": "^2.0.1"
+        "@apidevtools/json-schema-ref-parser": "^9.0.3",
+        "ajv": "^8.3.0",
+        "ajv-formats": "^2.1.0",
+        "body-parser": "^1.18.3",
+        "content-type": "^1.0.4",
+        "deep-freeze": "0.0.1",
+        "events-listener": "^1.1.0",
+        "glob": "^7.1.3",
+        "json-ptr": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "lodash": "^4.17.11",
+        "openapi3-ts": "^3.1.1",
+        "promise-breaker": "^6.0.0",
+        "pump": "^3.0.0",
+        "qs": "^6.6.0",
+        "raw-body": "^2.3.3",
+        "semver": "^7.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        }
       }
     },
-    "file-type": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
-      "integrity": "sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg==",
-      "dev": true
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
-    "filename-reserved-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
-      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
-      "dev": true
-    },
-    "filenamify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-2.1.0.tgz",
-      "integrity": "sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==",
-      "dev": true,
+    "exegesis-express": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/exegesis-express/-/exegesis-express-4.0.0.tgz",
+      "integrity": "sha512-V2hqwTtYRj0bj43K4MCtm0caD97YWkqOUHFMRCBW5L1x9IjyqOEc7Xa4oQjjiFbeFOSQzzwPV+BzXsQjSz08fw==",
       "requires": {
-        "filename-reserved-regex": "^2.0.0",
-        "strip-outer": "^1.0.0",
-        "trim-repeated": "^1.0.0"
+        "exegesis": "^4.1.0"
       }
     },
-    "fill-keys": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/fill-keys/-/fill-keys-1.0.2.tgz",
-      "integrity": "sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=",
-      "dev": true,
+    "exit-hook": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
+      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
       "requires": {
-        "is-object": "~1.0.1",
-        "merge-descriptors": "~1.0.0"
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
       }
     },
-    "fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+    "expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
+        "fill-range": "^2.1.0"
       },
       "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+        "fill-range": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
+          "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+          "dev": true,
+          "requires": {
+            "is-number": "^2.1.0",
+            "isobject": "^2.0.0",
+            "randomatic": "^3.0.0",
+            "repeat-element": "^1.1.2",
+            "repeat-string": "^1.5.2"
+          }
+        },
+        "is-number": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+          "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+          "dev": true,
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
           "requires": {
-            "is-extendable": "^0.1.0"
+            "is-buffer": "^1.1.5"
           }
         }
       }
     },
-    "finalhandler": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
-      "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=",
-      "dev": true,
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
+    "exponential-backoff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
+      "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
+      "optional": true
+    },
+    "express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "requires": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "encodeurl": "~1.0.1",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.2",
-        "statuses": "~1.3.1",
-        "unpipe": "~1.0.0"
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
       },
       "dependencies": {
+        "cookie": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "destroy": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+          "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
+        },
+        "finalhandler": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+          "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+          "requires": {
+            "debug": "2.6.9",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "on-finished": "2.4.1",
+            "parseurl": "~1.3.3",
+            "statuses": "2.0.1",
+            "unpipe": "~1.0.0"
+          }
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "on-finished": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+          "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+          "requires": {
+            "ee-first": "1.1.1"
+          }
+        },
+        "send": {
+          "version": "0.18.0",
+          "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+          "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+          "requires": {
+            "debug": "2.6.9",
+            "depd": "2.0.0",
+            "destroy": "1.2.0",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "etag": "~1.8.1",
+            "fresh": "0.5.2",
+            "http-errors": "2.0.0",
+            "mime": "1.6.0",
+            "ms": "2.1.3",
+            "on-finished": "2.4.1",
+            "range-parser": "~1.2.1",
+            "statuses": "2.0.1"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.1.3",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+            }
+          }
+        },
+        "serve-static": {
+          "version": "1.15.0",
+          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+          "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+          "requires": {
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "parseurl": "~1.3.3",
+            "send": "0.18.0"
           }
+        },
+        "statuses": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
         }
       }
     },
-    "find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-      "requires": {
-        "path-exists": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      }
-    },
-    "find-versions": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.1.0.tgz",
-      "integrity": "sha512-NCTfNiVzeE/xL+roNDffGuRbrWI6atI18lTJ22vKp7rs2OhYzMK3W1dIdO2TUndH/QMcacM4d1uWwgcZcHK69Q==",
-      "dev": true,
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
       "requires": {
-        "array-uniq": "^2.1.0",
-        "semver-regex": "^2.0.0"
+        "type": "^2.0.0"
       },
       "dependencies": {
-        "array-uniq": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-2.1.0.tgz",
-          "integrity": "sha512-bdHxtev7FN6+MXI1YFW0Q8mQ8dTJc2S8AMfju+ZR77pbg2yAdVyDlwkaUI7Har0LyOMRFPHrJ9lYdyjZZswdlQ==",
-          "dev": true
+        "type": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
+          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
         }
       }
     },
-    "findup-sync": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
-      "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==",
-      "dev": true,
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
       "requires": {
-        "detect-file": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "micromatch": "^3.0.4",
-        "resolve-dir": "^1.0.1"
-      },
-      "dependencies": {
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
-          }
-        }
+        "is-extendable": "^0.1.0"
       }
     },
-    "fined": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.1.tgz",
-      "integrity": "sha512-jQp949ZmEbiYHk3gkbdtpJ0G1+kgtLQBNdP5edFP7Fh+WAYceLQz6yO1SBj72Xkg8GVyTB3bBzAYrHJVh5Xd5g==",
-      "dev": true,
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
       "requires": {
-        "expand-tilde": "^2.0.2",
-        "is-plain-object": "^2.0.3",
-        "object.defaults": "^1.1.0",
-        "object.pick": "^1.2.0",
-        "parse-filepath": "^1.0.1"
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
       }
     },
-    "flagged-respawn": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
-      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
-      "dev": true
-    },
-    "flat": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz",
-      "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==",
-      "dev": true,
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
       "requires": {
-        "is-buffer": "~2.0.3"
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
       },
       "dependencies": {
-        "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
-          "dev": true
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
         }
       }
     },
-    "flat-cache": {
+    "extract-zip": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
-      "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
       "dev": true,
       "requires": {
-        "flatted": "^2.0.0",
-        "rimraf": "2.6.3",
-        "write": "1.0.3"
+        "@types/yauzl": "^2.9.1",
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
       }
     },
-    "flatted": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
-      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
-      "dev": true
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
-    "flush-write-stream": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
-      "dev": true,
+    "fancy-log": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
+      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
       "requires": {
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.3.6"
+        "ansi-gray": "^0.1.1",
+        "color-support": "^1.1.3",
+        "parse-node-version": "^1.0.0",
+        "time-stamp": "^1.0.0"
       }
     },
-    "fn-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
-      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=",
-      "dev": true
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "focus-visible": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.0.2.tgz",
-      "integrity": "sha512-zT2fj/bmOgEBjqGbURGlowTmCwsIs3bRDMr/sFZz8Ly7VkEiwuCn9swNTL3pPuf8Oua2de7CLuKdnuNajWdDsQ=="
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
     },
-    "follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "dev": true,
+    "fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "requires": {
-        "debug": "=3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
       }
     },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "^1.0.1"
-      }
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
-    "foreachasync": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/foreachasync/-/foreachasync-3.0.0.tgz",
-      "integrity": "sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY=",
-      "dev": true
+    "fast-text-encoding": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
+      "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig=="
     },
-    "foreground-child": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-      "dev": true,
+    "fast-url-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
       "requires": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^3.0.2"
+        "punycode": "^1.3.2"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
         }
       }
     },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
     },
-    "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+    "fastq": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
+      "integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
       "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
+        "reusify": "^1.0.4"
       }
     },
-    "format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
-      "dev": true
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "requires": {
+        "format": "^0.2.0"
+      }
     },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    "faye-websocket": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+      "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
     },
-    "fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
       "dev": true,
       "requires": {
-        "map-cache": "^0.2.2"
+        "pend": "~1.2.0"
       }
     },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    "fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
     },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
       "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
+        "escape-string-regexp": "^1.0.5"
       }
     },
-    "front-matter": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz",
-      "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=",
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "dev": true,
       "requires": {
-        "js-yaml": "^3.4.6"
+        "flat-cache": "^3.0.4"
       }
     },
-    "fs-constants": {
+    "file-uri-to-path": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
     },
-    "fs-extra": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
+    "filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "requires": {
-        "graceful-fs": "^4.1.2",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
+        "minimatch": "^5.0.1"
       },
       "dependencies": {
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
           "requires": {
-            "graceful-fs": "^4.1.6"
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.4.tgz",
+          "integrity": "sha512-U0iNYXt9wALljzfnGkhFSy5sAC6/SCR3JrHrlsdJz4kF8MvhTRQNiC59iUi1iqsitV7abrNAJWElVL9pdnoUgw==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
           }
         }
       }
     },
-    "fs-mkdirp-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
-      "integrity": "sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=",
+    "filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
+      "dev": true
+    },
+    "filesize": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
+      "integrity": "sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ=="
+    },
+    "fill-keys": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fill-keys/-/fill-keys-1.0.2.tgz",
+      "integrity": "sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=",
       "dev": true,
       "requires": {
-        "graceful-fs": "^4.1.11",
-        "through2": "^2.0.3"
-      },
-      "dependencies": {
-        "through2": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
-          "requires": {
-            "readable-stream": "~2.3.6",
-            "xtend": "~4.0.1"
-          }
-        }
+        "is-object": "~1.0.1",
+        "merge-descriptors": "~1.0.0"
       }
     },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
     },
-    "fsevents": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
-      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
-      "dev": true,
-      "optional": true,
+    "finalhandler": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
+      "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=",
       "requires": {
-        "nan": "^2.12.1",
-        "node-pre-gyp": "^0.12.0"
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.1",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.3.1",
+        "unpipe": "~1.0.0"
       },
       "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
-          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
-          "optional": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
-          "optional": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-          "dev": true,
-          "optional": true
-        },
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-          "dev": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-          "dev": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
-          "dev": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
-          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-          "dev": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-          "dev": true,
-          "optional": true,
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
+            "ms": "2.0.0"
           }
         },
-        "glob": {
-          "version": "7.1.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-          "dev": true,
-          "optional": true,
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "find-versions": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-4.0.0.tgz",
+      "integrity": "sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==",
+      "dev": true,
+      "requires": {
+        "semver-regex": "^3.1.2"
+      }
+    },
+    "findup-sync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
+      "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==",
+      "requires": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
           "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
           }
         },
-        "has-unicode": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-          "dev": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "dev": true,
-          "optional": true,
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
           "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
           }
         },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
-          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
-          "dev": true,
-          "optional": true,
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
           "requires": {
-            "minimatch": "^3.0.4"
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
           }
         },
-        "inflight": {
-          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-          "dev": true,
-          "optional": true,
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
           }
         },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
-          "optional": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "optional": true,
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
           "requires": {
-            "number-is-nan": "^1.0.0"
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
           }
         },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "optional": true,
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
           "requires": {
-            "brace-expansion": "^1.1.7"
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
           }
+        }
+      }
+    },
+    "fined": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
+      "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "is-plain-object": "^2.0.3",
+        "object.defaults": "^1.1.0",
+        "object.pick": "^1.2.0",
+        "parse-filepath": "^1.0.1"
+      }
+    },
+    "firebase": {
+      "version": "9.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.0.0-beta.7.tgz",
+      "integrity": "sha512-DBjYWPE48C3Yfb2BvUejLNDPwkykaBgK3gYluDt8Czfd4j8mlzy2DO+L/3md4uP09aFDaepmHKveEjR6lMwPUA==",
+      "requires": {
+        "@firebase/analytics": "0.0.900-exp.6ef484a04",
+        "@firebase/analytics-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/app": "0.0.900-exp.6ef484a04",
+        "@firebase/app-check": "0.0.900-exp.6ef484a04",
+        "@firebase/app-check-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/app-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/auth": "0.0.900-exp.6ef484a04",
+        "@firebase/auth-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/database": "0.0.900-exp.6ef484a04",
+        "@firebase/database-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore": "0.0.900-exp.6ef484a04",
+        "@firebase/firestore-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/functions": "0.0.900-exp.6ef484a04",
+        "@firebase/functions-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging": "0.0.900-exp.6ef484a04",
+        "@firebase/messaging-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/performance": "0.0.900-exp.6ef484a04",
+        "@firebase/performance-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config": "0.0.900-exp.6ef484a04",
+        "@firebase/remote-config-compat": "0.0.900-exp.6ef484a04",
+        "@firebase/storage": "0.0.900-exp.6ef484a04",
+        "@firebase/storage-compat": "0.0.900-exp.6ef484a04"
+      }
+    },
+    "firebase-tools": {
+      "version": "12.6.1",
+      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-12.6.1.tgz",
+      "integrity": "sha512-/b6Ix9gSmltmDXJvHDTAe6y8yh7C6f5rjYwlHULAzNDQGZv5S4reIUgc06D7XuAdNK+4gNjy7vZoVVpqJ32J4A==",
+      "requires": {
+        "@google-cloud/pubsub": "^3.0.1",
+        "abort-controller": "^3.0.0",
+        "ajv": "^6.12.6",
+        "archiver": "^5.0.0",
+        "async-lock": "1.3.2",
+        "body-parser": "^1.19.0",
+        "chokidar": "^3.0.2",
+        "cjson": "^0.3.1",
+        "cli-table": "0.3.11",
+        "colorette": "^2.0.19",
+        "commander": "^4.0.1",
+        "configstore": "^5.0.1",
+        "cors": "^2.8.5",
+        "cross-env": "^5.1.3",
+        "cross-spawn": "^7.0.3",
+        "csv-parse": "^5.0.4",
+        "exegesis": "^4.1.0",
+        "exegesis-express": "^4.0.0",
+        "express": "^4.16.4",
+        "filesize": "^6.1.0",
+        "form-data": "^4.0.0",
+        "fs-extra": "^10.1.0",
+        "glob": "^7.1.2",
+        "google-auth-library": "^7.11.0",
+        "inquirer": "^8.2.0",
+        "js-yaml": "^3.13.1",
+        "jsonwebtoken": "^9.0.0",
+        "leven": "^3.1.0",
+        "libsodium-wrappers": "^0.7.10",
+        "lodash": "^4.17.21",
+        "marked": "^4.0.14",
+        "marked-terminal": "^5.1.1",
+        "mime": "^2.5.2",
+        "minimatch": "^3.0.4",
+        "morgan": "^1.10.0",
+        "node-fetch": "^2.6.7",
+        "open": "^6.3.0",
+        "ora": "^5.4.1",
+        "p-limit": "^3.0.1",
+        "portfinder": "^1.0.32",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.3.0",
+        "request": "^2.87.0",
+        "retry": "^0.13.1",
+        "rimraf": "^3.0.0",
+        "semver": "^7.5.2",
+        "stream-chain": "^2.2.4",
+        "stream-json": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "superstatic": "^9.0.3",
+        "tar": "^6.1.11",
+        "tcp-port-used": "^1.0.2",
+        "tmp": "^0.2.1",
+        "triple-beam": "^1.3.0",
+        "universal-analytics": "^0.5.3",
+        "update-notifier-cjs": "^5.1.6",
+        "uuid": "^8.3.2",
+        "winston": "^3.0.0",
+        "winston-transport": "^4.4.0",
+        "ws": "^7.2.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
         },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
-          "optional": true
+        "colorette": {
+          "version": "2.0.20",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+          "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
         },
-        "minipass": {
-          "version": "2.3.5",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
-          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
         },
-        "minizlib": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
-          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
-          "dev": true,
-          "optional": true,
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
           "requires": {
-            "minipass": "^2.2.1"
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
           }
         },
-        "mkdirp": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "dev": true,
-          "optional": true,
+        "fs-extra": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+          "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
           "requires": {
-            "minimist": "0.0.8"
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
           }
         },
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-          "dev": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
-          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
-          "dev": true,
-          "optional": true,
+        "google-auth-library": {
+          "version": "7.14.1",
+          "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.14.1.tgz",
+          "integrity": "sha512-5Rk7iLNDFhFeBYc3s8l1CqzbEBcdhwR193RlD4vSNFajIcINKI8W8P0JLmBpwymHqqWbX34pJDQu39cSy/6RsA==",
           "requires": {
-            "debug": "^4.1.0",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
+            "arrify": "^2.0.0",
+            "base64-js": "^1.3.0",
+            "ecdsa-sig-formatter": "^1.0.11",
+            "fast-text-encoding": "^1.0.0",
+            "gaxios": "^4.0.0",
+            "gcp-metadata": "^4.2.0",
+            "gtoken": "^5.0.4",
+            "jws": "^4.0.0",
+            "lru-cache": "^6.0.0"
           }
         },
-        "node-pre-gyp": {
-          "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
-          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
-          "dev": true,
-          "optional": true,
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
           "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.1",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
           }
         },
-        "nopt": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
-          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
-          "dev": true,
-          "optional": true,
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
+            "yallist": "^4.0.0"
           }
         },
-        "npm-bundled": {
-          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
-          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
-          "dev": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
-          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
-          }
+        "mime": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg=="
         },
-        "npmlog": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-          "dev": true,
-          "optional": true,
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
           "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
+            "yocto-queue": "^0.1.0"
           }
         },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "dev": true,
-          "optional": true,
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
           "requires": {
-            "wrappy": "1"
+            "ansi-regex": "^5.0.1"
           }
         },
-        "os-homedir": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-          "dev": true,
-          "optional": true,
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
           "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
+            "rimraf": "^3.0.0"
           }
         },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
+        "universalify": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
         },
-        "rc": {
-          "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-              "dev": true,
-              "optional": true
-            }
-          }
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
         },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "flagged-respawn": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
+      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q=="
+    },
+    "flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "~2.0.3"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+          "dev": true
+        }
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      },
+      "dependencies": {
         "readable-stream": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-          "dev": true,
-          "optional": true,
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -11463,180 +39228,212 @@
             "util-deprecate": "~1.0.1"
           }
         },
-        "rimraf": {
-          "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-          "dev": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-          "dev": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.7.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-          "dev": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.8",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
-          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.4",
-            "minizlib": "^1.1.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-          "dev": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-          "dev": true,
-          "optional": true,
+        }
+      }
+    },
+    "fn-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
+      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=",
+      "dev": true
+    },
+    "fn.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+      "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
+    },
+    "follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+    },
+    "for-own": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
+    "foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
+      "dev": true
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "front-matter": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz",
+      "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.4.6"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
           "requires": {
-            "string-width": "^1.0.2 || 2"
+            "graceful-fs": "^4.1.6"
           }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true,
-          "optional": true
         }
       }
     },
-    "fstream": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+    "fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
       "optional": true,
       "requires": {
-        "graceful-fs": "^4.1.2",
-        "inherits": "~2.0.0",
-        "mkdirp": ">=0.5 0",
-        "rimraf": "2"
+        "minipass": "^7.0.3"
       },
       "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+        "minipass": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
           "optional": true
+        }
+      }
+    },
+    "fs-mkdirp-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
+      "integrity": "sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
         },
-        "mkdirp": {
-          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-          "optional": true,
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "requires": {
-            "minimist": "^1.2.5"
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
           }
         }
       }
     },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -11644,39 +39441,67 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "furi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/furi/-/furi-2.0.0.tgz",
-      "integrity": "sha512-uKuNsaU0WVaK/vmvj23wW1bicOFfyqSsAIH71bRZx8kA4Xj+YCHin7CJKJJjkIsmxYaPFLk9ljmjEyB7xF7WvQ==",
-      "dev": true,
+    "gauge": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+      "optional": true,
       "requires": {
-        "@types/is-windows": "^1.0.0",
-        "is-windows": "^1.0.2"
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.3",
+        "console-control-strings": "^1.1.0",
+        "has-unicode": "^2.0.1",
+        "signal-exit": "^3.0.7",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.5"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+          "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+          "optional": true,
+          "requires": {
+            "string-width": "^1.0.2 || 2 || 3 || 4"
+          }
+        }
       }
     },
-    "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "optional": true,
+    "gaxios": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.3.0.tgz",
+      "integrity": "sha512-pHplNbslpwCLMyII/lHPWFQbJWOX0B3R1hwBEOvzYi1GmdKZruuEHK4N9V6f7tf1EaPYyF80mui1+344p6SmLg==",
       "requires": {
-        "aproba": "^1.0.3",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
-        "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
+        "abort-controller": "^3.0.0",
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.3.0"
       }
     },
-    "gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "optional": true,
+    "gcp-metadata": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-4.3.0.tgz",
+      "integrity": "sha512-L9XQUpvKJCM76YRSmcxrR4mFPzPGsgZUH+GgHMxAET8qc6+BhRJq63RLhWakgEO2KKVgeSDVfyiNjkGSADwNTA==",
       "requires": {
-        "globule": "^1.0.0"
+        "gaxios": "^4.0.0",
+        "json-bigint": "^1.0.0"
       }
     },
     "generate-function": {
@@ -11701,65 +39526,62 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
       "integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==",
-      "dev": true,
       "requires": {
         "loader-utils": "^1.1.0"
       }
     },
-    "generic-pool": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.7.1.tgz",
-      "integrity": "sha512-ug6DAZoNgWm6q5KhPFA+hzXfBLFQu5sTXxPpv44DmE0A2g+CiHoq9LTVdkXpZMkYVMoGw83F6W+WT0h0MFMK/w==",
-      "dev": true
-    },
     "gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
-      "dev": true
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
-    "get-own-enumerable-property-symbols": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+    "get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
       "dev": true
     },
-    "get-proxy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz",
-      "integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
-      "dev": true,
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
       "requires": {
-        "npm-conf": "^1.1.0"
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
       }
     },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
-    },
     "get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
       "dev": true,
       "requires": {
         "pump": "^3.0.0"
+      }
+    },
+    "get-uri": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.2.tgz",
+      "integrity": "sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==",
+      "requires": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.0",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
       },
       "dependencies": {
-        "pump": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-          "dev": true,
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
+            "ms": "2.1.2"
           }
         }
       }
@@ -11767,8 +39589,7 @@
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
-      "dev": true
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
     "getpass": {
       "version": "0.1.7",
@@ -11778,23 +39599,10 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "gifsicle": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/gifsicle/-/gifsicle-5.0.0.tgz",
-      "integrity": "sha512-GZ1ym4uY12FHXsf26Kk1G06Edwago9zctqUqin69pm8ObA13jb3urgHU9PgKmtH6kHaCjEcjoRzNjxUyYvb1Bg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "execa": "^1.0.0",
-        "logalot": "^2.0.0"
-      }
-    },
     "glob": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -11841,31 +39649,32 @@
       }
     },
     "glob-parent": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-      "dev": true,
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "requires": {
-        "is-glob": "^3.1.0",
-        "path-dirname": "^1.0.0"
-      },
-      "dependencies": {
-        "is-glob": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^2.1.0"
-          }
-        }
+        "is-glob": "^4.0.1"
+      }
+    },
+    "glob-slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/glob-slash/-/glob-slash-1.0.0.tgz",
+      "integrity": "sha512-ZwFh34WZhZX28ntCMAP1mwyAJkn8+Omagvt/GvA+JQM/qgT0+MR2NPF3vhvgdshfdvDyGZXs8fPXW84K32Wjuw=="
+    },
+    "glob-slasher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/glob-slasher/-/glob-slasher-1.0.1.tgz",
+      "integrity": "sha512-5MUzqFiycIKLMD1B0dYOE4hGgLLUZUNGGYO4BExdwT32wUwW3DBOE7lMQars7vB1q43Fb3Tyt+HmgLKsJhDYdg==",
+      "requires": {
+        "glob-slash": "^1.0.0",
+        "lodash.isobject": "^2.4.1",
+        "toxic": "^1.0.0"
       }
     },
     "glob-stream": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-6.1.0.tgz",
       "integrity": "sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=",
-      "dev": true,
       "requires": {
         "extend": "^3.0.0",
         "glob": "^7.1.1",
@@ -11877,27 +39686,123 @@
         "remove-trailing-separator": "^1.0.1",
         "to-absolute-glob": "^2.0.0",
         "unique-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          }
+        },
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "requires": {
+            "is-extglob": "^2.1.0"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "glob-watcher": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.3.tgz",
-      "integrity": "sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==",
-      "dev": true,
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.5.tgz",
+      "integrity": "sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==",
       "requires": {
         "anymatch": "^2.0.0",
         "async-done": "^1.2.0",
         "chokidar": "^2.0.0",
         "is-negated-glob": "^1.0.0",
         "just-debounce": "^1.0.0",
+        "normalize-path": "^3.0.0",
         "object.defaults": "^1.1.0"
       },
       "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
         "chokidar": {
           "version": "2.1.8",
           "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
           "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
           "requires": {
             "anymatch": "^2.0.0",
             "async-each": "^1.0.1",
@@ -11912,23 +39817,189 @@
             "readdirp": "^2.2.1",
             "upath": "^1.1.1"
           }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
         }
       }
     },
     "global-dirs": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.0.1.tgz",
-      "integrity": "sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==",
-      "dev": true,
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
       "requires": {
-        "ini": "^1.3.5"
+        "ini": "2.0.0"
+      },
+      "dependencies": {
+        "ini": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+          "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA=="
+        }
       }
     },
     "global-modules": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
       "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-      "dev": true,
       "requires": {
         "global-prefix": "^1.0.1",
         "is-windows": "^1.0.1",
@@ -11939,13 +40010,22 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
       "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
-      "dev": true,
       "requires": {
         "expand-tilde": "^2.0.2",
         "homedir-polyfill": "^1.0.1",
         "ini": "^1.3.4",
         "is-windows": "^1.0.1",
         "which": "^1.2.14"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
       }
     },
     "globals": {
@@ -11953,24 +40033,11 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
-    "globby": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
-      "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
-      "dev": true,
-      "requires": {
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      }
-    },
     "globule": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "dev": true,
       "requires": {
         "glob": "~7.1.1",
         "lodash": "~4.17.10",
@@ -11981,69 +40048,135 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz",
       "integrity": "sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==",
-      "dev": true,
       "requires": {
         "sparkles": "^1.0.0"
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+    "gonzales-pe-sl": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz",
+      "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=",
       "dev": true,
-      "optional": true,
       "requires": {
-        "delegate": "^3.1.2"
+        "minimist": "1.1.x"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+          "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
+          "dev": true
+        }
+      }
+    },
+    "google-auth-library": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.8.0.tgz",
+      "integrity": "sha512-I2DPwbBbQicoLqPbUOcq7oxtWewbLO6Za2jZ5QM9Lz1hXxPJVXYXBUrb8lP9626SRTQQWIzNSWJuEDtu0pI4ag==",
+      "requires": {
+        "arrify": "^2.0.0",
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "fast-text-encoding": "^1.0.0",
+        "gaxios": "^4.0.0",
+        "gcp-metadata": "^4.2.0",
+        "gtoken": "^5.0.4",
+        "jws": "^4.0.0",
+        "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "google-gax": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-2.24.3.tgz",
+      "integrity": "sha512-0Rb2i2GWCEEYi1/EjQt1QsFW2Jwzm1ob21kYc7UpOmkfsmTXuyhzK7Aeyxxpo7QT/Qh+50vqER1b2ruq6WGDXg==",
+      "requires": {
+        "@grpc/grpc-js": "~1.3.0",
+        "@grpc/proto-loader": "^0.6.1",
+        "@types/long": "^4.0.0",
+        "abort-controller": "^3.0.0",
+        "duplexify": "^4.0.0",
+        "fast-text-encoding": "^1.0.3",
+        "google-auth-library": "^7.6.1",
+        "is-stream-ended": "^0.1.4",
+        "node-fetch": "^2.6.1",
+        "object-hash": "^2.1.1",
+        "proto3-json-serializer": "^0.1.1",
+        "protobufjs": "6.11.2",
+        "retry-request": "^4.0.0"
+      }
+    },
+    "google-p12-pem": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-3.1.0.tgz",
+      "integrity": "sha512-JUtEHXL4DY/N+xhlm7TC3qL797RPAtk0ZGXNs3/gWyiDHYoA/8Rjes0pztkda+sZv4ej1EoO2KhWgW5V9KTrSQ==",
+      "requires": {
+        "node-forge": "^0.10.0"
+      }
+    },
+    "gorko": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/gorko/-/gorko-0.8.0.tgz",
+      "integrity": "sha512-b0ZynKheIrCa4SsqKlNzOUuzbrpcgg9/vl4FmAWcZyXBw4RNDZz2We/wy4qZ60rHpd2u7GjVN76rLoRZIiRVPA==",
+      "requires": {
+        "sass": "^1.26.5"
       }
     },
     "got": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
-      "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
       "dev": true,
       "requires": {
-        "decompress-response": "^3.2.0",
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
         "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "lowercase-keys": "^1.0.0",
-        "p-cancelable": "^0.3.0",
-        "p-timeout": "^1.1.1",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "url-parse-lax": "^1.0.0",
-        "url-to-options": "^1.0.1"
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
       },
       "dependencies": {
         "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
         }
       }
     },
     "graceful-fs": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
-    },
-    "graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
-      "dev": true
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "gray-matter": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.2.tgz",
-      "integrity": "sha512-7hB/+LxrOjq/dd8APlK0r24uL/67w7SkYnfwhNFwg/VDIGWGmduTDYf3WNstLW2fbbmRwrDGCVSJ2isuf2+4Hw==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
       "requires": {
-        "js-yaml": "^3.11.0",
+        "js-yaml": "^3.13.1",
         "kind-of": "^6.0.2",
         "section-matter": "^1.0.0",
         "strip-bom-string": "^1.0.0"
@@ -12055,397 +40188,200 @@
       "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
       "dev": true
     },
+    "gtoken": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-5.3.0.tgz",
+      "integrity": "sha512-mCcISYiaRZrJpfqOs0QWa6lfEM/C1V9ASkzFmuz43XBb5s1Vynh+CZy1ECeeJXVGx2PRByjYzb4Y4/zr1byr0w==",
+      "requires": {
+        "gaxios": "^4.0.0",
+        "google-p12-pem": "^3.0.3",
+        "jws": "^4.0.0"
+      }
+    },
     "gts": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/gts/-/gts-2.0.2.tgz",
-      "integrity": "sha512-SLytzl2IqKXf6kGULwr07XQ9lVsvjrzFD3OAA7DEfIQYuD+lKBPt/cZ/RYGxaWerY4PTfmnXT7KdxEr9Ec8uHQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gts/-/gts-3.1.0.tgz",
+      "integrity": "sha512-Pbj3ob1VR1IRlEVEBNtKoQ1wHOa8cZz62KEojK8Fn/qeS2ClWI4gLNfhek3lD68aZSmUEg8TFb6AHXIwUMgyqQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/eslint-plugin": "2.31.0",
-        "@typescript-eslint/parser": "2.31.0",
-        "chalk": "^4.0.0",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.10.1",
+        "@typescript-eslint/eslint-plugin": "^4.2.0",
+        "@typescript-eslint/parser": "^4.2.0",
+        "chalk": "^4.1.0",
+        "eslint": "^7.10.0",
+        "eslint-config-prettier": "^7.0.0",
         "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-prettier": "^3.1.2",
-        "execa": "^4.0.0",
-        "inquirer": "^7.1.0",
-        "meow": "^7.0.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "execa": "^5.0.0",
+        "inquirer": "^7.3.3",
+        "json5": "^2.1.3",
+        "meow": "^9.0.0",
         "ncp": "^2.0.0",
-        "prettier": "^2.0.4",
+        "prettier": "^2.1.2",
         "rimraf": "^3.0.2",
-        "update-notifier": "^4.1.0",
+        "update-notifier": "^5.0.0",
         "write-file-atomic": "^3.0.3"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "arrify": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-          "dev": true
-        },
-        "camelcase": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
-          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
-          "dev": true
-        },
-        "camelcase-keys": {
-          "version": "6.2.2",
-          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-          "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.3.1",
-            "map-obj": "^4.0.0",
-            "quick-lru": "^4.0.1"
-          },
-          "dependencies": {
-            "camelcase": {
-              "version": "5.3.1",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-              "dev": true
-            }
-          }
-        },
-        "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.2.tgz",
-          "integrity": "sha512-QI2zLa6CjGWdiQsmSkZoGtDx2N+cQIGb3yNolGTdjSQzydzLgYYf8LRuagp7S7fPimjcrzUDSUFd/MgzELMi4Q==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
-          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "indent-string": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "map-obj": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.1.0.tgz",
-          "integrity": "sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==",
-          "dev": true
-        },
-        "meow": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-7.0.1.tgz",
-          "integrity": "sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==",
-          "dev": true,
-          "requires": {
-            "@types/minimist": "^1.2.0",
-            "arrify": "^2.0.1",
-            "camelcase": "^6.0.0",
-            "camelcase-keys": "^6.2.2",
-            "decamelize-keys": "^1.1.0",
-            "hard-rejection": "^2.1.0",
-            "minimist-options": "^4.0.2",
-            "normalize-package-data": "^2.5.0",
-            "read-pkg-up": "^7.0.1",
-            "redent": "^3.0.0",
-            "trim-newlines": "^3.0.0",
-            "type-fest": "^0.13.1",
-            "yargs-parser": "^18.1.3"
-          }
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "parse-json": {
+        "ansi-regex": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
-        "pump": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-          "dev": true,
-          "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
-          }
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          },
-          "dependencies": {
-            "type-fest": {
-              "version": "0.6.0",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-              "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-              "dev": true
-            }
-          }
-        },
-        "read-pkg-up": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-          "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.1.0",
-            "read-pkg": "^5.2.0",
-            "type-fest": "^0.8.1"
-          },
-          "dependencies": {
-            "type-fest": {
-              "version": "0.8.1",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-              "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-              "dev": true
-            }
-          }
-        },
-        "redent": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-          "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "indent-string": "^4.0.0",
-            "strip-indent": "^3.0.0"
+            "color-convert": "^2.0.1"
           }
         },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
           "requires": {
-            "glob": "^7.1.3"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
           }
         },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+        "cli-width": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+          "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+          "dev": true
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
-            "shebang-regex": "^3.0.0"
+            "color-name": "~1.1.4"
           }
         },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
-        "strip-indent": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-          "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-          "dev": true,
-          "requires": {
-            "min-indent": "^1.0.0"
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "inquirer": {
+          "version": "7.3.3",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+          "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
+          "dev": true,
+          "requires": {
+            "ansi-escapes": "^4.2.1",
+            "chalk": "^4.1.0",
+            "cli-cursor": "^3.1.0",
+            "cli-width": "^3.0.0",
+            "external-editor": "^3.0.3",
+            "figures": "^3.0.0",
+            "lodash": "^4.17.19",
+            "mute-stream": "0.0.8",
+            "run-async": "^2.4.0",
+            "rxjs": "^6.6.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0",
+            "through": "^2.3.6"
           }
         },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+        "rxjs": {
+          "version": "6.6.7",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+          "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
           "dev": true,
           "requires": {
-            "has-flag": "^4.0.0"
+            "tslib": "^1.9.0"
           }
         },
-        "trim-newlines": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.0.tgz",
-          "integrity": "sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==",
-          "dev": true
-        },
-        "type-fest": {
-          "version": "0.13.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-          "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "dev": true,
           "requires": {
-            "isexe": "^2.0.0"
+            "ansi-regex": "^5.0.0"
           }
         },
-        "yargs-parser": {
-          "version": "18.1.3",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          },
-          "dependencies": {
-            "camelcase": {
-              "version": "5.3.1",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-              "dev": true
-            }
+            "has-flag": "^4.0.0"
           }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
         }
       }
     },
     "gulp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/gulp/-/gulp-4.0.0.tgz",
-      "integrity": "sha1-lXZsYB2t5Kd+0+eyttwDiBtZY2Y=",
-      "dev": true,
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/gulp/-/gulp-4.0.2.tgz",
+      "integrity": "sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==",
       "requires": {
-        "glob-watcher": "^5.0.0",
-        "gulp-cli": "^2.0.0",
-        "undertaker": "^1.0.0",
+        "glob-watcher": "^5.0.3",
+        "gulp-cli": "^2.2.0",
+        "undertaker": "^1.2.1",
         "vinyl-fs": "^3.0.0"
       },
       "dependencies": {
+        "ansi-colors": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+          "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+          "requires": {
+            "ansi-wrap": "^0.1.0"
+          }
+        },
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+        },
         "gulp-cli": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.1.0.tgz",
-          "integrity": "sha512-txzgdFVlEPShBZus6JJyGyKJoBVDq6Do0ZQgIgx5RAsmhNVTDjymmOxpQvo3c20m66FldilS68ZXj2Q9w5dKbA==",
-          "dev": true,
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.3.0.tgz",
+          "integrity": "sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==",
           "requires": {
             "ansi-colors": "^1.0.1",
             "archy": "^1.0.0",
@@ -12455,7 +40391,7 @@
             "copy-props": "^2.0.1",
             "fancy-log": "^1.3.2",
             "gulplog": "^1.0.0",
-            "interpret": "^1.1.0",
+            "interpret": "^1.4.0",
             "isobject": "^3.0.1",
             "liftoff": "^3.1.0",
             "matchdep": "^2.0.0",
@@ -12463,26 +40399,93 @@
             "pretty-hrtime": "^1.0.0",
             "replace-homedir": "^1.0.0",
             "semver-greatest-satisfied-range": "^1.1.0",
-            "v8flags": "^3.0.1",
+            "v8flags": "^3.2.0",
             "yargs": "^7.1.0"
-          },
-          "dependencies": {
-            "ansi-colors": {
-              "version": "1.1.0",
-              "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
-              "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
-              "dev": true,
-              "requires": {
-                "ansi-wrap": "^0.1.0"
-              }
-            }
           }
         },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1"
+          }
+        },
+        "y18n": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+          "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
+        },
         "yargs": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-          "dev": true,
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.2.tgz",
+          "integrity": "sha512-ZEjj/dQYQy0Zx0lgLMLR8QuaqTihnxirir7EwUHp1Axq4e3+k8jXU5K0VLbNvedv1f4EWtBonDIZm0NUr+jCcA==",
           "requires": {
             "camelcase": "^3.0.0",
             "cliui": "^3.2.0",
@@ -12496,54 +40499,51 @@
             "string-width": "^1.0.2",
             "which-module": "^1.0.0",
             "y18n": "^3.2.1",
-            "yargs-parser": "^5.0.0"
+            "yargs-parser": "^5.0.1"
           }
         },
         "yargs-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-          "dev": true,
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.1.tgz",
+          "integrity": "sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==",
           "requires": {
-            "camelcase": "^3.0.0"
+            "camelcase": "^3.0.0",
+            "object.assign": "^4.1.0"
           }
         }
       }
     },
-    "gulp-imagemin": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
-      "integrity": "sha512-6xBTNybmPY2YrvrhhlS8Mxi0zn0ypusLon63p9XXxDtIf7U7c6KcViz94K7Skosucr3378A6IY2kJSjJyuwylQ==",
-      "dev": true,
+    "gulp-sass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.0.0.tgz",
+      "integrity": "sha512-J0aH0/2N4+2szGCeut0ktGHK0Wg8L9uWivuigrl7xv+nhxozBQRAKLrhnDDaTa3FeUWYtgT8w4RlgdhRy5v16w==",
       "requires": {
-        "chalk": "^3.0.0",
-        "fancy-log": "^1.3.2",
-        "imagemin": "^7.0.0",
-        "imagemin-gifsicle": "^7.0.0",
-        "imagemin-mozjpeg": "^8.0.0",
-        "imagemin-optipng": "^7.0.0",
-        "imagemin-svgo": "^7.0.0",
+        "chalk": "^4.1.1",
+        "lodash": "^4.17.20",
         "plugin-error": "^1.0.1",
-        "plur": "^3.0.1",
-        "pretty-bytes": "^5.3.0",
-        "through2-concurrent": "^2.0.0"
+        "replace-ext": "^2.0.0",
+        "strip-ansi": "^6.0.0",
+        "transfob": "^1.0.0",
+        "vinyl-sourcemaps-apply": "^0.2.1"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -12553,7 +40553,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -12561,43 +40560,40 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
-        "pretty-bytes": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
-          "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
-          "dev": true
+        "replace-ext": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+          "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
             "has-flag": "^4.0.0"
           }
         }
       }
     },
-    "gulp-rename": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
-      "integrity": "sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg==",
-      "dev": true
-    },
     "gulplog": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
       "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
-      "dev": true,
       "requires": {
         "glogg": "^1.0.0"
       }
@@ -12605,14 +40601,12 @@
     "hamljs": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
-      "integrity": "sha1-e3EWz22+cnjkKz9u+HJaM+F3yOM=",
-      "dev": true
+      "integrity": "sha1-e3EWz22+cnjkKz9u+HJaM+F3yOM="
     },
     "handlebars": {
-      "version": "4.7.6",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
-      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
-      "dev": true,
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
       "requires": {
         "minimist": "^1.2.5",
         "neo-async": "^2.6.0",
@@ -12621,17 +40615,10 @@
         "wordwrap": "^1.0.0"
       },
       "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -12641,11 +40628,11 @@
       "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "requires": {
-        "ajv": "^6.5.5",
+        "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
       }
     },
@@ -12659,7 +40646,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -12672,64 +40658,31 @@
         "ansi-regex": "^2.0.0"
       }
     },
-    "has-binary2": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
-      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
-      "dev": true,
-      "requires": {
-        "isarray": "2.0.1"
-      }
-    },
-    "has-color": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
-      "integrity": "sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8=",
-      "dev": true
-    },
-    "has-cors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=",
-      "dev": true
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
     },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
-    "has-symbol-support-x": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
-      "dev": true
-    },
     "has-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
-      "dev": true
-    },
-    "has-to-string-tag-x": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
-      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "dev": true,
-      "requires": {
-        "has-symbol-support-x": "^1.4.1"
-      }
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
     },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
       "optional": true
     },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
       "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-      "dev": true,
       "requires": {
         "get-value": "^2.0.6",
         "has-values": "^1.0.0",
@@ -12740,17 +40693,33 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
       "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-      "dev": true,
       "requires": {
         "is-number": "^3.0.0",
         "kind-of": "^4.0.0"
       },
       "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
         "kind-of": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
           "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -12760,8 +40729,27 @@
     "has-yarn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
-      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
-      "dev": true
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw=="
+    },
+    "hash-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hash-string/-/hash-string-1.0.0.tgz",
+      "integrity": "sha1-w/oV8Hjd0WvBULQXb95wkWIPLH8="
+    },
+    "hdr-histogram-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hdr-histogram-js/-/hdr-histogram-js-2.0.3.tgz",
+      "integrity": "sha512-Hkn78wwzWHNCp2uarhzQ2SGFLU3JY8SBDDd3TAABK4fc30wm+MuPOrg5QVFVfkKOQd6Bfz3ukJEI+q9sXEkK1g==",
+      "requires": {
+        "@assemblyscript/loader": "^0.10.1",
+        "base64-js": "^1.2.0",
+        "pako": "^1.0.3"
+      }
+    },
+    "hdr-histogram-percentiles-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz",
+      "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw=="
     },
     "he": {
       "version": "1.2.0",
@@ -12769,117 +40757,118 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "heap-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/heap-js/-/heap-js-2.3.0.tgz",
+      "integrity": "sha512-E5303mzwQ+4j/n2J0rDvEPBN7GKjhis10oHiYOgjxsmxYgqG++hz9NyLLOXttzH8as/DyiBHYpUrJTZWYaMo8Q=="
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
       "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-      "dev": true,
       "requires": {
         "parse-passwd": "^1.0.0"
       }
     },
     "hosted-git-info": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
-      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "hsl-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
+      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4="
     },
     "hsla-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "html-comment-regex": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
-      "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
-      "dev": true
+      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
     },
     "html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="
     },
     "htmlparser2": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "dev": true,
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
       "requires": {
-        "domelementtype": "^1.3.1",
-        "domhandler": "^2.3.0",
-        "domutils": "^1.5.1",
-        "entities": "^1.1.1",
-        "inherits": "^2.0.1",
-        "readable-stream": "^3.1.1"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
-          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
       }
     },
     "http-cache-semantics": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
-      "dev": true
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
+      "devOptional": true
     },
     "http-equiv-refresh": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
-      "integrity": "sha1-jsU4hmBCvl8/evpzfRmNlL6xsHs=",
-      "dev": true
+      "integrity": "sha1-jsU4hmBCvl8/evpzfRmNlL6xsHs="
     },
     "http-errors": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.0",
-        "statuses": ">= 1.4.0 < 2"
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
       },
       "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
         "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-          "dev": true
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
         }
       }
     },
+    "http-link-header": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-0.8.0.tgz",
+      "integrity": "sha1-oitBoMmx4tj6wb8baXxr1TLV9eQ="
+    },
+    "http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+    },
     "http-proxy": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.15.2.tgz",
-      "integrity": "sha1-ZC/cr/5S00SNK9o7AHnpQJBk2jE=",
-      "dev": true,
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "requires": {
-        "eventemitter3": "1.x.x",
-        "requires-port": "1.x.x"
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "requires": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
       }
     },
     "http-signature": {
@@ -12893,53 +40882,60 @@
       }
     },
     "https-proxy-agent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
-      "dev": true,
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
       "requires": {
-        "agent-base": "5",
+        "agent-base": "6",
         "debug": "4"
       }
     },
     "human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "optional": true,
+      "requires": {
+        "ms": "^2.0.0"
+      }
+    },
     "husky": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.3.tgz",
-      "integrity": "sha512-VxTsSTRwYveKXN4SaH1/FefRJYCtx+wx04sSVcOpD7N2zjoHxa+cEJ07Qg5NmV3HAK+IRKOyNVpi2YBIVccIfQ==",
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz",
+      "integrity": "sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==",
       "dev": true,
       "requires": {
-        "chalk": "^3.0.0",
+        "chalk": "^4.0.0",
         "ci-info": "^2.0.0",
-        "compare-versions": "^3.5.1",
-        "cosmiconfig": "^6.0.0",
-        "find-versions": "^3.2.0",
+        "compare-versions": "^3.6.0",
+        "cosmiconfig": "^7.0.0",
+        "find-versions": "^4.0.0",
         "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
+        "pkg-dir": "^5.0.0",
         "please-upgrade-node": "^3.2.0",
         "slash": "^3.0.0",
         "which-pm-runs": "^1.0.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -12962,25 +40958,26 @@
           "dev": true
         },
         "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
           "dev": true,
           "requires": {
             "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
+            "import-fresh": "^3.2.1",
             "parse-json": "^5.0.0",
             "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
+            "yaml": "^1.10.0"
           }
         },
-        "find-versions": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-          "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
           "dev": true,
           "requires": {
-            "semver-regex": "^2.0.0"
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
           }
         },
         "has-flag": {
@@ -12989,387 +40986,183 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
           }
         },
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
           "dev": true,
           "requires": {
-            "has-flag": "^4.0.0"
+            "p-locate": "^5.0.0"
           }
-        }
-      }
-    },
-    "hyperlinker": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hyperlinker/-/hyperlinker-1.0.0.tgz",
-      "integrity": "sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==",
-      "dev": true
-    },
-    "iconv-lite": {
-      "version": "0.4.23",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
-      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-      "dev": true,
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "icss-replace-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
-    },
-    "idb-keyval": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-3.2.0.tgz",
-      "integrity": "sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ=="
-    },
-    "ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
-      "dev": true
-    },
-    "ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true
-    },
-    "image-size": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.8.3.tgz",
-      "integrity": "sha512-SMtq1AJ+aqHB45c3FsB4ERK0UCiA2d3H1uq8s+8T0Pf8A3W4teyBQyaFaktH6xvZqh+npwlKU7i4fJo0r7TYTg==",
-      "dev": true,
-      "requires": {
-        "queue": "6.0.1"
-      }
-    },
-    "imagemin": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/imagemin/-/imagemin-7.0.1.tgz",
-      "integrity": "sha512-33AmZ+xjZhg2JMCe+vDf6a9mzWukE7l+wAtesjE7KyteqqKjzxv7aVQeWnul1Ve26mWvEQqyPwl0OctNBfSR9w==",
-      "dev": true,
-      "requires": {
-        "file-type": "^12.0.0",
-        "globby": "^10.0.0",
-        "graceful-fs": "^4.2.2",
-        "junk": "^3.1.0",
-        "make-dir": "^3.0.0",
-        "p-pipe": "^3.0.0",
-        "replace-ext": "^1.0.0"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
         },
-        "globby": {
-          "version": "10.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
           "dev": true,
           "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.0.3",
-            "glob": "^7.1.3",
-            "ignore": "^5.1.1",
-            "merge2": "^1.2.3",
-            "slash": "^3.0.0"
+            "yocto-queue": "^0.1.0"
           }
         },
-        "graceful-fs": {
-          "version": "4.2.3",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
-          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
-          "dev": true
-        },
-        "ignore": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
-        },
-        "junk": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
-          "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        }
-      }
-    },
-    "imagemin-gifsicle": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz",
-      "integrity": "sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "gifsicle": "^5.0.0",
-        "is-gif": "^3.0.0"
-      }
-    },
-    "imagemin-mozjpeg": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-mozjpeg/-/imagemin-mozjpeg-8.0.0.tgz",
-      "integrity": "sha512-+EciPiIjCb8JWjQNr1q8sYWYf7GDCNDxPYnkD11TNIjjWNzaV+oTg4DpOPQjl5ZX/KRCPMEgS79zLYAQzLitIA==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "is-jpg": "^2.0.0",
-        "mozjpeg": "^6.0.0"
-      }
-    },
-    "imagemin-optipng": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/imagemin-optipng/-/imagemin-optipng-7.1.0.tgz",
-      "integrity": "sha512-JNORTZ6j6untH7e5gF4aWdhDCxe3ODsSLKs/f7Grewy3ebZpl1ZsU+VUTPY4rzeHgaFA8GSWOoA8V2M3OixWZQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "exec-buffer": "^3.0.0",
-        "is-png": "^2.0.0",
-        "optipng-bin": "^6.0.0"
-      },
-      "dependencies": {
-        "is-png": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-png/-/is-png-2.0.0.tgz",
-          "integrity": "sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "imagemin-pngquant": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-7.0.0.tgz",
-      "integrity": "sha512-FXBz8lfvI+noraZbNCE0AUDUng/2+Cv5W0F/nUGGjKdzb8AnN1f0JzVxH2aYj7SQxOdYYatvfNbITIZpaFATZg==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "is-png": "^1.0.0",
-        "is-stream": "^1.1.0",
-        "ow": "^0.8.0",
-        "pngquant-bin": "^5.0.0"
-      }
-    },
-    "imagemin-svgo": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/imagemin-svgo/-/imagemin-svgo-7.1.0.tgz",
-      "integrity": "sha512-0JlIZNWP0Luasn1HT82uB9nU9aa+vUj6kpT+MjPW11LbprXC+iC4HDwn1r4Q2/91qj4iy9tRZNsFySMlEpLdpg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "is-svg": "^4.2.1",
-        "svgo": "^1.3.2"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.0.0-alpha.37",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "mdn-data": "2.0.4",
-            "source-map": "^0.6.1"
+            "p-limit": "^3.0.2"
           }
         },
-        "csso": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.3.tgz",
-          "integrity": "sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==",
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "css-tree": "1.0.0-alpha.39"
-          },
-          "dependencies": {
-            "css-tree": {
-              "version": "1.0.0-alpha.39",
-              "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
-              "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "mdn-data": "2.0.6",
-                "source-map": "^0.6.1"
-              }
-            },
-            "mdn-data": {
-              "version": "2.0.6",
-              "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
-              "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
-              "dev": true,
-              "optional": true
-            }
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
           }
         },
-        "is-svg": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.2.1.tgz",
-          "integrity": "sha512-PHx3ANecKsKNl5y5+Jvt53Y4J7MfMpbNZkv384QNiswMKAWIbvcqbPz+sYbFKJI8Xv3be01GSFniPmoaP+Ai5A==",
+        "pkg-dir": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+          "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "html-comment-regex": "^1.1.2"
+            "find-up": "^5.0.0"
           }
         },
-        "mdn-data": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
-          "dev": true,
-          "optional": true
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
         },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
         },
-        "svgo": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-          "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "chalk": "^2.4.1",
-            "coa": "^2.0.2",
-            "css-select": "^2.0.0",
-            "css-select-base-adapter": "^0.1.1",
-            "css-tree": "1.0.0-alpha.37",
-            "csso": "^4.0.2",
-            "js-yaml": "^3.13.1",
-            "mkdirp": "~0.5.1",
-            "object.values": "^1.1.0",
-            "sax": "~1.2.4",
-            "stable": "^0.1.8",
-            "unquote": "~1.1.1",
-            "util.promisify": "~1.0.0"
+            "has-flag": "^4.0.0"
           }
         }
       }
     },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+    },
+    "idb": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
+      "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "image-ssim": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz",
+      "integrity": "sha1-g7Qsei5uS4VQVHf+aRf128VkIOU="
+    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
-      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=",
-      "dev": true
+      "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg=="
     },
     "import-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
-      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
       "requires": {
-        "import-from": "^2.1.0"
+        "import-from": "^3.0.0"
       }
     },
     "import-fresh": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
-      "integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
       "requires": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
       }
     },
     "import-from": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
-      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
       "requires": {
-        "resolve-from": "^3.0.0"
+        "resolve-from": "^5.0.0"
       },
       "dependencies": {
         "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
         }
       }
     },
     "import-lazy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
-      "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
-      "dev": true
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
     },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
-    },
-    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "optional": true
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
     "indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "requires": {
-        "repeating": "^2.0.0"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "devOptional": true
     },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
-      "dev": true
-    },
-    "indexof": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
-      "dev": true
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
     },
     "inflight": {
       "version": "1.0.6",
@@ -13381,77 +41174,68 @@
       }
     },
     "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
-      "dev": true
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
-      "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
-      "dev": true,
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
+      "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==",
       "requires": {
         "ansi-escapes": "^4.2.1",
-        "chalk": "^3.0.0",
+        "chalk": "^4.1.1",
         "cli-cursor": "^3.1.0",
-        "cli-width": "^2.0.0",
+        "cli-width": "^3.0.0",
         "external-editor": "^3.0.3",
         "figures": "^3.0.0",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.21",
         "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
         "run-async": "^2.4.0",
-        "rxjs": "^6.5.3",
+        "rxjs": "^7.5.5",
         "string-width": "^4.1.0",
         "strip-ansi": "^6.0.0",
-        "through": "^2.3.6"
+        "through": "^2.3.6",
+        "wrap-ansi": "^6.0.1"
       },
       "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
-          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.11.0"
-          }
-        },
         "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
         },
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
           }
         },
+        "cli-width": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+          "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
+        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -13459,78 +41243,59 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "rxjs": {
-          "version": "6.5.5",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
-          "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
-          "dev": true,
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
           "requires": {
-            "tslib": "^1.9.0"
-          }
-        },
-        "string-width": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.0"
+            "tslib": "^2.1.0"
           }
         },
         "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
           "requires": {
-            "ansi-regex": "^5.0.0"
+            "ansi-regex": "^5.0.1"
           }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
             "has-flag": "^4.0.0"
           }
         },
-        "type-fest": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-          "dev": true
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
         }
       }
     },
+    "install-artifact-from-github": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/install-artifact-from-github/-/install-artifact-from-github-1.3.3.tgz",
+      "integrity": "sha512-x79SL0d8WOi1ZjXSTUqqs0GPQZ92YArJAN9O46wgU9wdH2U9ecyyhB9YGDbPe2OLV4ptmt6AZYRQZ2GydQZosQ==",
+      "optional": true
+    },
     "interpret": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
-      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
-      "dev": true
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
     },
     "intl-list-format": {
       "version": "1.0.3",
@@ -13538,46 +41303,49 @@
       "integrity": "sha512-VNF1Mh0K1xALXkz/5QsK1gfKRvEQO/jWaniTGAzQvbzGr5uyGDskQrRjnf6Qnbc9/JRbNE8BQtTg6iWuFrZorw==",
       "dev": true
     },
-    "into-stream": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
-      "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
-      "dev": true,
+    "intl-messageformat": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-4.4.0.tgz",
+      "integrity": "sha512-z+Bj2rS3LZSYU4+sNitdHrwnBhr0wO80ZJSW8EzKDBowwUe3Q/UsvgCGjrwa+HPzoGCLEb9HAjfJgo4j2Sac8w==",
       "requires": {
-        "from2": "^2.1.1",
-        "p-is-promise": "^1.1.0"
+        "intl-messageformat-parser": "^1.8.1"
       }
     },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
+    "intl-messageformat-parser": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.8.1.tgz",
+      "integrity": "sha512-IMSCKVf0USrM/959vj3xac7s8f87sc+80Y/ipBzdKy4ifBv5Gsj2tZ41EAaURVg01QU71fYr77uA8Meh6kELbg=="
     },
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
     },
+    "ip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
+      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg=="
+    },
+    "ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q=="
+    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
     "irregular-plurals": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
-      "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.4.0.tgz",
+      "integrity": "sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y=",
       "dev": true
     },
     "is-absolute": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
       "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
-      "dev": true,
       "requires": {
         "is-relative": "^1.0.0",
         "is-windows": "^1.0.1"
@@ -13586,14 +41354,12 @@
     "is-absolute-url": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
-      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
-      "dev": true
+      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY="
     },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
       "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -13602,7 +41368,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -13610,9 +41375,9 @@
       }
     },
     "is-alphabetical": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.3.tgz",
-      "integrity": "sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
       "dev": true
     },
     "is-alphanumeric": {
@@ -13622,9 +41387,9 @@
       "dev": true
     },
     "is-alphanumerical": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz",
-      "integrity": "sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
       "dev": true,
       "requires": {
         "is-alphabetical": "^1.0.0",
@@ -13636,32 +41401,41 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
+    "is-bigint": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.2.tgz",
+      "integrity": "sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA=="
+    },
     "is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "dev": true,
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "requires": {
-        "binary-extensions": "^1.0.0"
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.1.tgz",
+      "integrity": "sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==",
+      "requires": {
+        "call-bind": "^1.0.2"
       }
     },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
-      "dev": true
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
     },
     "is-ci": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
       "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "dev": true,
       "requires": {
         "ci-info": "^2.0.0"
       }
@@ -13670,7 +41444,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
       "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
       "requires": {
         "css-color-names": "^0.0.4",
         "hex-color-regex": "^1.1.0",
@@ -13680,11 +41453,18 @@
         "rgba-regex": "^1.0.0"
       }
     },
+    "is-core-module": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
       "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -13693,7 +41473,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -13701,22 +41480,20 @@
       }
     },
     "is-date-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-      "dev": true
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
+      "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A=="
     },
     "is-decimal": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.3.tgz",
-      "integrity": "sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
       "dev": true
     },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
       "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "dev": true,
       "requires": {
         "is-accessor-descriptor": "^0.1.6",
         "is-data-descriptor": "^0.1.4",
@@ -13726,16 +41503,19 @@
         "kind-of": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
         }
       }
     },
     "is-directory": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
-      "dev": true
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
     },
     "is-dotfile": {
       "version": "1.0.3",
@@ -13759,120 +41539,73 @@
       }
     },
     "is-expression": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
-      "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
       "requires": {
-        "acorn": "~4.0.2",
-        "object-assign": "^4.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "4.0.13",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-          "dev": true
-        }
+        "acorn": "^7.1.1",
+        "object-assign": "^4.1.1"
       }
     },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
     },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
-    },
-    "is-gif": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
-      "integrity": "sha512-IqJ/jlbw5WJSNfwQ/lHEDXF8rxhRgF6ythk2oiEvhpG29F704eX9NO6TvPfMiq9DrbwgcEDnETYNcZDPewQoVw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^10.4.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "10.11.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
-          "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
-          "dev": true,
-          "optional": true
-        }
-      }
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
     "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "requires": {
         "is-extglob": "^2.1.1"
       }
     },
     "is-hexadecimal": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz",
-      "integrity": "sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
       "dev": true
     },
     "is-hidden": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-hidden/-/is-hidden-1.1.2.tgz",
-      "integrity": "sha512-kytBeNVW2QTIqZdJBDKIjP+EkUTzDT07rsc111w/gxqR6wK3ODkOswcpxgED6HU6t7fEhOxqojVZ2a2kU9rj+A==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-hidden/-/is-hidden-1.1.3.tgz",
+      "integrity": "sha512-FFzhGKA9h59OFxeaJl0W5ILTYetI8WsdqdofKr69uLKZdV6hbDKxj8vkpG3L9uS/6Q/XYh1tkXm6xwRGFweETA==",
       "dev": true
     },
     "is-installed-globally": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
-      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
-      "dev": true,
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
       "requires": {
-        "global-dirs": "^2.0.1",
-        "is-path-inside": "^3.0.1"
-      },
-      "dependencies": {
-        "is-path-inside": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
-          "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
-          "dev": true
-        }
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
       }
     },
-    "is-jpg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
-      "integrity": "sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=",
-      "dev": true
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w=="
+    },
+    "is-lambda": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+      "optional": true
     },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
-      "dev": true
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
     },
     "is-my-ip-valid": {
       "version": "1.0.0",
@@ -13881,9 +41614,9 @@
       "dev": true
     },
     "is-my-json-valid": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz",
-      "integrity": "sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==",
+      "version": "2.20.5",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.5.tgz",
+      "integrity": "sha512-VTPuvvGQtxvCeghwspQu1rBgjYUT6FGxPlvFKbYuFtgc4ADsX3U5ihZOYN0qyU6u+d4X9xXb0IT5O6QpXKt87A==",
       "dev": true,
       "requires": {
         "generate-function": "^2.0.0",
@@ -13893,88 +41626,54 @@
         "xtend": "^4.0.0"
       }
     },
-    "is-natural-number": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
-      "integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=",
-      "dev": true
-    },
     "is-negated-glob": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
-      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
-      "dev": true
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI="
+    },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w=="
     },
     "is-npm": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
-      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==",
-      "dev": true
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
+      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA=="
     },
     "is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-number-like": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/is-number-like/-/is-number-like-1.0.8.tgz",
       "integrity": "sha512-6rZi3ezCyFcn5L71ywzz2bS5b2Igl1En3eTlZlvKjpz1n3IZLAYMbKYAIQgFmEu0GENg92ziU/faEOA/aixjbA==",
-      "dev": true,
       "requires": {
         "lodash.isfinite": "^3.3.2"
       }
     },
+    "is-number-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.5.tgz",
+      "integrity": "sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw=="
+    },
     "is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
     },
     "is-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
-      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
-      "dev": true
-    },
-    "is-path-cwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
-      "integrity": "sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
+      "integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
       "dev": true
     },
-    "is-path-in-cwd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz",
-      "integrity": "sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==",
-      "dev": true,
-      "requires": {
-        "is-path-inside": "^1.0.0"
-      }
-    },
     "is-path-inside": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
-      "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
-      "dev": true,
-      "requires": {
-        "path-is-inside": "^1.0.1"
-      }
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
     },
     "is-plain-obj": {
       "version": "1.1.0",
@@ -13986,17 +41685,10 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
     },
-    "is-png": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-png/-/is-png-1.1.0.tgz",
-      "integrity": "sha1-1XSxK/J1wDUEVVcLDltXqwYgd84=",
-      "dev": true
-    },
     "is-posix-bracket": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
@@ -14010,10 +41702,9 @@
       "dev": true
     },
     "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
-      "dev": true
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
     },
     "is-property": {
       "version": "1.0.2",
@@ -14022,34 +41713,26 @@
       "dev": true
     },
     "is-reference": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
-      "integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
-      "dev": true,
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
       "requires": {
-        "@types/estree": "0.0.39"
+        "@types/estree": "*"
       }
     },
     "is-regex": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
-      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
-      "dev": true,
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
+      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
       "requires": {
-        "has": "^1.0.1"
+        "call-bind": "^1.0.2",
+        "has-symbols": "^1.0.2"
       }
     },
-    "is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
-      "dev": true
-    },
     "is-relative": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
       "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
-      "dev": true,
       "requires": {
         "is-unc-path": "^1.0.0"
       }
@@ -14057,37 +41740,29 @@
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
-    "is-retry-allowed": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
-      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=",
-      "dev": true
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
     "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
     },
-    "is-svg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
-      "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
-      "dev": true,
-      "requires": {
-        "html-comment-regex": "^1.1.0"
-      }
+    "is-stream-ended": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-stream-ended/-/is-stream-ended-0.1.4.tgz",
+      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw=="
+    },
+    "is-string": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
+      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w=="
     },
     "is-symbol": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
-      "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
-      "dev": true,
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
       "requires": {
-        "has-symbols": "^1.0.0"
+        "has-symbols": "^1.0.2"
       }
     },
     "is-typedarray": {
@@ -14099,11 +41774,20 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
       "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
-      "dev": true,
       "requires": {
         "unc-path-regex": "^0.1.2"
       }
     },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw=="
+    },
+    "is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -14112,59 +41796,60 @@
     "is-valid-glob": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
-      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
-      "dev": true
+      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao="
     },
     "is-whitespace": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
-      "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38=",
-      "dev": true
+      "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38="
     },
     "is-whitespace-character": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz",
-      "integrity": "sha512-SNPgMLz9JzPccD3nPctcj8sZlX9DAMJSKH8bP7Z6bohCwuNgX8xbWr1eTAYXX9Vpi/aSn8Y1akL9WgM3t43YNQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
       "dev": true
     },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
     "is-word-character": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.3.tgz",
-      "integrity": "sha512-0wfcrFgOOOBdgRNT9H33xe6Zi6yhX/uoc4U8NBZGeQQB0ctU1dnlNTyL9JM2646bHDTpsDm1Brb3VPoCIMrd/A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
       "dev": true
     },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
-      "dev": true
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
     },
     "is-yarn-global": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
-      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
-      "dev": true
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+    },
+    "is2": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/is2/-/is2-2.0.9.tgz",
+      "integrity": "sha512-rZkHeBn9Zzq52sd9IUIV3a5mfwBY+o2HePMh0wkGBM4z4qjvy2GwVxQ6nNXSfw6MmVP6gf1QIlWjiOavhM3x5g==",
+      "requires": {
+        "deep-is": "^0.1.3",
+        "ip-regex": "^4.1.0",
+        "is-url": "^1.2.4"
+      }
     },
     "isarray": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-      "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=",
-      "dev": true
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
     "isbinaryfile": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.3.tgz",
-      "integrity": "sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==",
-      "dev": true,
-      "requires": {
-        "buffer-alloc": "^1.2.0"
-      }
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true
     },
     "isexe": {
       "version": "2.0.0",
@@ -14172,15 +41857,23 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
     "iso-639-1": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.0.tgz",
-      "integrity": "sha512-8CTinLimb9ncAJ11wpCETWZ51qsQ3LS4vMHF2wxRRtR3+b7bvIxUlXOGYIdq0413+baWnbyG5dBluVcezOG/LQ=="
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.9.tgz",
+      "integrity": "sha512-owRu9up+Cpx/hwSzm83j6G8PtC7U99UCtPVItsafefNfEgMl+pi8KBwhXwJkJfp6IouyYWFxj8n24SvCWpKZEQ=="
     },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+    },
+    "isomorphic-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz",
+      "integrity": "sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==",
+      "requires": {
+        "node-fetch": "^2.6.1",
+        "whatwg-fetch": "^3.4.1"
+      }
     },
     "isstream": {
       "version": "0.1.2",
@@ -14188,31 +41881,25 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
     "istanbul-lib-coverage": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
-      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
-      "dev": true
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw=="
     },
     "istanbul-lib-instrument": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz",
-      "integrity": "sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
       "requires": {
-        "babel-generator": "^6.18.0",
-        "babel-template": "^6.16.0",
-        "babel-traverse": "^6.18.0",
-        "babel-types": "^6.18.0",
-        "babylon": "^6.18.0",
-        "istanbul-lib-coverage": "^1.2.1",
-        "semver": "^5.3.0"
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
       },
       "dependencies": {
-        "istanbul-lib-coverage": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz",
-          "integrity": "sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==",
-          "dev": true
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -14234,9 +41921,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -14245,9 +41932,9 @@
       }
     },
     "istanbul-lib-source-maps": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz",
-      "integrity": "sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -14264,77 +41951,148 @@
       }
     },
     "istanbul-reports": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
-      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
       "dev": true,
       "requires": {
         "html-escaper": "^2.0.0",
         "istanbul-lib-report": "^3.0.0"
+      },
+      "dependencies": {
+        "html-escaper": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+          "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+          "dev": true
+        }
       }
     },
-    "isurl": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
-      "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
-      "dev": true,
+    "jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "optional": true,
       "requires": {
-        "has-to-string-tag-x": "^1.2.0",
-        "is-object": "^1.0.1"
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "javascript-stringify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.0.1.tgz",
-      "integrity": "sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==",
-      "dev": true
+    "jake": {
+      "version": "10.8.5",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+      "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
     },
     "jest-worker": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
-      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
-      "dev": true,
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
       "requires": {
+        "@types/node": "*",
         "merge-stream": "^2.0.0",
-        "supports-color": "^6.1.0"
+        "supports-color": "^7.0.0"
       },
       "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
         "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
-            "has-flag": "^3.0.0"
+            "has-flag": "^4.0.0"
           }
         }
       }
     },
+    "jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
+    },
+    "join-path": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/join-path/-/join-path-1.1.1.tgz",
+      "integrity": "sha512-jnt9OC34sLXMLJ6YfPQ2ZEKrR9mB5ZbSnQb4LPaOx1c5rTzxpR33L18jjp0r75mGGTJmsil3qwN1B5IBeTnSSA==",
+      "requires": {
+        "as-array": "^2.0.0",
+        "url-join": "0.0.1",
+        "valid-url": "^1"
+      }
+    },
+    "jpeg-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
+      "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
+    },
     "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
-      "optional": true
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
     },
     "js-beautify": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz",
-      "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==",
-      "dev": true,
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.0.tgz",
+      "integrity": "sha512-yuck9KirNSCAwyNJbqW+BxJqJ0NLJ4PwBUzQQACl5O3qHMBXVkXb/rD0ilh/Lat/tn88zSZ+CAHOlk0DsY7GuQ==",
       "requires": {
         "config-chain": "^1.1.12",
         "editorconfig": "^0.15.3",
         "glob": "^7.1.3",
-        "mkdirp": "~1.0.3",
-        "nopt": "^4.0.3"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        }
+        "nopt": "^5.0.0"
       }
     },
     "js-cookie": {
@@ -14342,11 +42100,15 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
       "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
     },
+    "js-library-detector": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.4.0.tgz",
+      "integrity": "sha512-NB2sYpmgqiTd7PNNhgp6bnEZmjvTUdAbzxABvYXWLpTL/t158T6mPnD8uYNd0FDP73YWyMrTYDvPxqdvCTbv2g=="
+    },
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
-      "dev": true
+      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -14354,24 +42116,79 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
       }
     },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
-    },
+    "js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "requires": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "jsdoc": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.2.tgz",
+      "integrity": "sha512-e8cIg2z62InH7azBBi3EsSEqrKx+nUtAS5bBcYTSpZFA+vhNPyhv8PTFZ0WsjOPDj04/dOLlm08EDcQJDqaGQg==",
+      "requires": {
+        "@babel/parser": "^7.20.15",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+        },
+        "markdown-it-anchor": {
+          "version": "8.6.7",
+          "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz",
+          "integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==",
+          "requires": {}
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+        }
+      }
+    },
     "jsesc": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-      "dev": true
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+    },
+    "json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "requires": {
+        "bignumber.js": "^9.0.0"
+      }
     },
     "json-buffer": {
       "version": "3.0.0",
@@ -14382,9 +42199,27 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
+    "json-parse-helpfulerror": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz",
+      "integrity": "sha512-XgP0FGR77+QhUxjXkwOMkC94k3WtqEBfcnjWqhRd82qTat4SWKRE+9kUnynz/shm3I4ea2+qISvTIeGTNU7kJg==",
+      "requires": {
+        "jju": "^1.1.0"
+      }
+    },
+    "json-ptr": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-ptr/-/json-ptr-3.1.1.tgz",
+      "integrity": "sha512-SiSJQ805W1sDUCD1+/t1/1BIrveq2Fe9HJqENxZmMCILmrPI7WhS/pePpIOx85v6/H2z1Vy7AI08GV2TzfXocg=="
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -14407,8 +42242,7 @@
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -14416,19 +42250,17 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-      "dev": true,
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
       "requires": {
-        "minimist": "^1.2.0"
+        "minimist": "^1.2.5"
       }
     },
     "jsonfile": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
       "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -14440,10 +42272,48 @@
       "dev": true
     },
     "jsonpointer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
-      "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
-      "dev": true
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.1.0.tgz",
+      "integrity": "sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==",
+      "dev": true
+    },
+    "jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "requires": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "dependencies": {
+        "jwa": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+          "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+          "requires": {
+            "buffer-equal-constant-time": "1.0.1",
+            "ecdsa-sig-formatter": "1.0.11",
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "jws": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+          "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+          "requires": {
+            "jwa": "^1.4.1",
+            "safe-buffer": "^5.0.1"
+          }
+        }
+      }
     },
     "jsprim": {
       "version": "1.4.1",
@@ -14456,414 +42326,332 @@
         "verror": "1.10.0"
       }
     },
-    "jssha": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/jssha/-/jssha-2.3.1.tgz",
-      "integrity": "sha1-FHshJTaQNcpLL30hDcU58Amz3po=",
-      "dev": true
-    },
     "jstransformer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
       "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
-      "dev": true,
       "requires": {
         "is-promise": "^2.0.0",
         "promise": "^7.0.1"
       }
     },
+    "jszip": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.0.tgz",
+      "integrity": "sha512-Y2OlFIzrDOPWUnpU0LORIcDn2xN7rC9yKffFM/7pGhQuhO+SUhfm2trkJ/S5amjFvem0Y+1EALz/MEPkvHXVNw==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "junk": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
-      "integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI=",
-      "dev": true
+      "integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI="
     },
     "just-debounce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz",
-      "integrity": "sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=",
-      "dev": true
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.1.0.tgz",
+      "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ=="
+    },
+    "jwa": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+      "integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jws": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+      "integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+      "requires": {
+        "jwa": "^2.0.0",
+        "safe-buffer": "^5.0.1"
+      }
     },
     "karma": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-4.2.0.tgz",
-      "integrity": "sha512-fmCuxN1rwJxTdZfOXK5LjlmS4Ana/OvzNMpkyLL/TLE8hmgSkpVpMYQ7RTVa8TNKRVQDZNl5W1oF5cfKfgIMlA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.0.tgz",
+      "integrity": "sha512-s8m7z0IF5g/bS5ONT7wsOavhW4i4aFkzD4u4wgzAQWT4HGUeWI3i21cK2Yz6jndMAeHETp5XuNsRoyGJZXVd4w==",
       "dev": true,
       "requires": {
-        "bluebird": "^3.3.0",
-        "body-parser": "^1.16.1",
+        "@colors/colors": "1.5.0",
+        "body-parser": "^1.19.0",
         "braces": "^3.0.2",
-        "chokidar": "^3.0.0",
-        "colors": "^1.1.0",
-        "connect": "^3.6.0",
-        "core-js": "^3.1.3",
+        "chokidar": "^3.5.1",
+        "connect": "^3.7.0",
         "di": "^0.0.1",
-        "dom-serialize": "^2.2.0",
-        "flatted": "^2.0.0",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.1.2",
-        "http-proxy": "^1.13.0",
-        "isbinaryfile": "^3.0.0",
-        "lodash": "^4.17.11",
-        "log4js": "^4.0.0",
-        "mime": "^2.3.1",
-        "minimatch": "^3.0.2",
-        "optimist": "^0.6.1",
-        "qjobs": "^1.1.4",
-        "range-parser": "^1.2.0",
-        "rimraf": "^2.6.0",
-        "safe-buffer": "^5.0.1",
-        "socket.io": "2.1.1",
+        "dom-serialize": "^2.2.1",
+        "glob": "^7.1.7",
+        "graceful-fs": "^4.2.6",
+        "http-proxy": "^1.18.1",
+        "isbinaryfile": "^4.0.8",
+        "lodash": "^4.17.21",
+        "log4js": "^6.4.1",
+        "mime": "^2.5.2",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.5",
+        "qjobs": "^1.2.0",
+        "range-parser": "^1.2.1",
+        "rimraf": "^3.0.2",
+        "socket.io": "^4.4.1",
         "source-map": "^0.6.1",
-        "tmp": "0.0.33",
-        "useragent": "2.3.0"
+        "tmp": "^0.2.1",
+        "ua-parser-js": "^0.7.30",
+        "yargs": "^16.1.1"
       },
       "dependencies": {
-        "anymatch": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz",
-          "integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==",
+        "connect": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+          "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
           "dev": true,
           "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
+            "debug": "2.6.9",
+            "finalhandler": "1.1.2",
+            "parseurl": "~1.3.3",
+            "utils-merge": "1.0.1"
           }
         },
-        "binary-extensions": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "requires": {
-            "fill-range": "^7.0.1"
+            "ms": "2.0.0"
           }
         },
-        "chokidar": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz",
-          "integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==",
+        "finalhandler": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+          "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
           "dev": true,
           "requires": {
-            "anymatch": "^3.0.1",
-            "braces": "^3.0.2",
-            "fsevents": "^2.0.6",
-            "glob-parent": "^5.0.0",
-            "is-binary-path": "^2.1.0",
-            "is-glob": "^4.0.1",
-            "normalize-path": "^3.0.0",
-            "readdirp": "^3.1.1"
+            "debug": "2.6.9",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "on-finished": "~2.3.0",
+            "parseurl": "~1.3.3",
+            "statuses": "~1.5.0",
+            "unpipe": "~1.0.0"
           }
         },
-        "core-js": {
-          "version": "3.1.4",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.1.4.tgz",
-          "integrity": "sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==",
+        "mime": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+          "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
           "dev": true
         },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "fsevents": {
-          "version": "2.0.7",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz",
-          "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
-          "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
         },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         },
-        "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
           "dev": true
         },
-        "readdirp": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.1.tgz",
-          "integrity": "sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==",
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
           "dev": true,
           "requires": {
-            "picomatch": "^2.0.4"
+            "rimraf": "^3.0.0"
           }
         },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+        "ua-parser-js": {
+          "version": "0.7.32",
+          "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz",
+          "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw==",
           "dev": true
         },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
           "dev": true,
           "requires": {
-            "is-number": "^7.0.0"
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
           }
         }
       }
     },
     "karma-chrome-launcher": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.0.0.tgz",
-      "integrity": "sha512-u/PnVgDOP97AUe/gJeABlC6Wa6aQ83MZsm0JgsJQ5bGQ9XcXON/7b2aRhl59A62Zom+q3PFveBkczc7E1RT7TA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
+      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
       "dev": true,
       "requires": {
         "which": "^1.2.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
       }
     },
     "karma-coverage": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.0.2.tgz",
-      "integrity": "sha512-zge5qiGEIKDdzWciQwP4p0LSac4k/L6VfrBsERMUn5mpDvxhv1sPVOrSlpzpi70T7NhuEy4bgnpAKIYuumIMCw==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.2.0.tgz",
+      "integrity": "sha512-gPVdoZBNDZ08UCzdMHHhEImKrw1+PAOQOIiffv1YsvxFhBjqvo/SVXNk4tqn1SYqX0BJZT6S/59zgxiBe+9OuA==",
       "dev": true,
       "requires": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^4.0.1",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-instrument": "^5.1.0",
         "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.1",
+        "istanbul-reports": "^3.0.5",
         "minimatch": "^3.0.4"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.8.3"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
-          "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.9.5",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
-          "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.8.3",
-            "@babel/template": "^7.8.3",
-            "@babel/types": "^7.9.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
-          "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-          "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.8.3"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.9.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-          "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.8.6",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-          "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/parser": "^7.8.6",
-            "@babel/types": "^7.8.6"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
-          "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.9.5",
-            "@babel/helper-function-name": "^7.9.5",
-            "@babel/helper-split-export-declaration": "^7.8.3",
-            "@babel/parser": "^7.9.0",
-            "@babel/types": "^7.9.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0",
-            "lodash": "^4.17.13"
-          }
-        },
-        "@babel/types": {
-          "version": "7.9.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-          "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.9.5",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
         "istanbul-lib-instrument": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz",
-          "integrity": "sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==",
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+          "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
           "dev": true,
           "requires": {
-            "@babel/core": "^7.7.5",
-            "@babel/parser": "^7.7.5",
-            "@babel/template": "^7.7.4",
-            "@babel/traverse": "^7.7.4",
+            "@babel/core": "^7.12.3",
+            "@babel/parser": "^7.14.7",
             "@istanbuljs/schema": "^0.1.2",
-            "istanbul-lib-coverage": "^3.0.0",
+            "istanbul-lib-coverage": "^3.2.0",
             "semver": "^6.3.0"
           }
         },
-        "jsesc": {
-          "version": "2.5.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-          "dev": true
-        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
-        },
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
         }
       }
     },
     "karma-mocha": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-1.3.0.tgz",
-      "integrity": "sha1-7qrH/8DiAetjxGdEDStpx883eL8=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz",
+      "integrity": "sha512-Tzd5HBjm8his2OA4bouAsATYEpZrp9vC7z5E5j4C5Of5Rrs1jY67RAwXNcVmd/Bnk1wgvQRou0zGVLey44G4tQ==",
       "dev": true,
       "requires": {
-        "minimist": "1.2.0"
+        "minimist": "^1.2.3"
       }
     },
     "karma-sourcemap-loader": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.7.tgz",
-      "integrity": "sha1-kTIsd/jxPUb+0GKwQuEAnUxFBdg=",
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.8.tgz",
+      "integrity": "sha512-zorxyAakYZuBcHRJE+vbrK2o2JXLFWK8VVjiT/6P+ltLBUGUvqTEkUiQ119MGdOrK7mrmxXHZF1/pfT6GgIZ6g==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
       }
     },
     "karma-spec-reporter": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.32.tgz",
-      "integrity": "sha1-LpxyB+pyZ3EmAln4K+y1QyCeRAo=",
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.34.tgz",
+      "integrity": "sha512-l5H/Nh9q4g2Ysx2CDU2m+NIPyLQpCVbk9c4V02BTZHw3NM6RO1dq3eRpKXCSSdPt4RGfhHk8jDt3XYkGp+5PWg==",
       "dev": true,
       "requires": {
-        "colors": "^1.1.2"
+        "colors": "1.4.0"
       }
     },
     "keyv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
-      "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
       "dev": true,
       "requires": {
         "json-buffer": "3.0.0"
       }
     },
     "kind-of": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
-      "dev": true
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+    },
+    "klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
+    "kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
     },
     "known-css-properties": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.3.0.tgz",
       "integrity": "sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==",
-      "dev": true
-    },
-    "kuler": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/kuler/-/kuler-1.0.1.tgz",
-      "integrity": "sha512-J9nVUucG1p/skKul6DU3PUZrhs0LPulNaeUOox0IyXDi8S4CztTHs1gQphhuZmzXG7VOQSf6NJfKuzteQLv9gQ==",
-      "dev": true,
-      "requires": {
-        "colornames": "^1.1.1"
-      }
+      "dev": true
+    },
+    "kuler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+      "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="
     },
     "last-run": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz",
       "integrity": "sha1-RblpQsF7HHnHchmCWbqUO+v4yls=",
-      "dev": true,
       "requires": {
         "default-resolution": "^2.0.0",
         "es6-weak-map": "^2.0.1"
@@ -14878,19 +42666,41 @@
         "package-json": "^6.3.0"
       }
     },
-    "lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-      "dev": true
-    },
     "lazystream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
       "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
-      "dev": true,
       "requires": {
         "readable-stream": "^2.0.5"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "lcid": {
@@ -14905,7 +42715,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lead/-/lead-1.0.0.tgz",
       "integrity": "sha1-bxT5mje+Op3XhPVJVpDlkDRm7kI=",
-      "dev": true,
       "requires": {
         "flush-write-stream": "^1.0.2"
       }
@@ -14913,33 +42722,43 @@
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "dev": true
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
     },
-    "levenary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
-      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
       "requires": {
-        "leven": "^3.1.0"
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
       }
     },
-    "levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
+    "libsodium": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/libsodium/-/libsodium-0.7.13.tgz",
+      "integrity": "sha512-mK8ju0fnrKXXfleL53vtp9xiPq5hKM0zbDQtcxQIsSmxNgSxqCj6R7Hl9PkrNe2j29T4yoDaF7DJLK9/i5iWUw=="
+    },
+    "libsodium-wrappers": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/libsodium-wrappers/-/libsodium-wrappers-0.7.13.tgz",
+      "integrity": "sha512-kasvDsEi/r1fMzKouIDv7B8I6vNmknXwGiYodErGuESoFTohGSKZplFtVxZqHaoQ217AynyIFgnOVRitpHs0Qw==",
       "requires": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
+        "libsodium": "^0.7.13"
+      }
+    },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
       }
     },
     "liftoff": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-3.1.0.tgz",
       "integrity": "sha512-DlIPlJUkCV0Ips2zf2pJP0unEoT1kwYhiiPUGF3s/jtxTCjziNLoiVVh+jqWOWeFi6mmwQ5fNxvAUyPad4Dfog==",
-      "dev": true,
       "requires": {
         "extend": "^3.0.0",
         "findup-sync": "^3.0.0",
@@ -14951,11 +42770,111 @@
         "resolve": "^1.1.7"
       }
     },
+    "lighthouse": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-9.3.1.tgz",
+      "integrity": "sha512-OYYnx7kH2qhmgJDHSKzLuSSqO1/4psgtyDM/Y8Kouv0sAOITpSDZShjBe0vjTMjLl/ng7bqN+yD9yJBCu+rt1w==",
+      "requires": {
+        "axe-core": "4.3.5",
+        "chrome-launcher": "^0.15.0",
+        "configstore": "^5.0.1",
+        "csp_evaluator": "1.1.0",
+        "cssstyle": "1.2.1",
+        "enquirer": "^2.3.6",
+        "http-link-header": "^0.8.0",
+        "intl-messageformat": "^4.4.0",
+        "jpeg-js": "^0.4.3",
+        "js-library-detector": "^6.4.0",
+        "lighthouse-logger": "^1.3.0",
+        "lighthouse-stack-packs": "^1.7.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "lodash.set": "^4.3.2",
+        "lookup-closest-locale": "6.2.0",
+        "metaviewport-parser": "0.2.0",
+        "open": "^8.4.0",
+        "parse-cache-control": "1.0.1",
+        "ps-list": "^8.0.0",
+        "raven": "^2.2.1",
+        "robots-parser": "^3.0.0",
+        "semver": "^5.3.0",
+        "speedline-core": "^1.4.3",
+        "third-party-web": "^0.12.7",
+        "ws": "^7.0.0",
+        "yargs": "^17.3.1",
+        "yargs-parser": "^21.0.0"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        },
+        "open": {
+          "version": "8.4.0",
+          "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+          "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+          "requires": {
+            "define-lazy-prop": "^2.0.0",
+            "is-docker": "^2.1.1",
+            "is-wsl": "^2.2.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        },
+        "yargs-parser": {
+          "version": "21.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
+          "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA=="
+        }
+      }
+    },
+    "lighthouse-logger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.3.0.tgz",
+      "integrity": "sha512-BbqAKApLb9ywUli+0a+PcV04SyJ/N1q/8qgCNe6U97KbPCS1BTksEuHFLYdvc8DltuhfxIUBqDZsC0bBGtl3lA==",
+      "requires": {
+        "debug": "^2.6.9",
+        "marky": "^1.2.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "lighthouse-stack-packs": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lighthouse-stack-packs/-/lighthouse-stack-packs-1.7.0.tgz",
+      "integrity": "sha512-ggLg9V6Hs31Qcn29L2fwKsaQq8L5t+mIv3lNqwd85bc7zFxpMVybK71b4w2OeBLpa0H8gATIi9fxPlP+9moMDA=="
+    },
+    "lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true
+    },
     "limiter": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
-      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==",
-      "dev": true
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
     },
     "lines-and-columns": {
       "version": "1.1.6",
@@ -14963,39 +42882,339 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "linkify-it": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
-      "integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
+    "linkedom": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.13.7.tgz",
+      "integrity": "sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==",
+      "requires": {
+        "css-select": "^4.2.1",
+        "cssom": "^0.5.0",
+        "html-escaper": "^3.0.3",
+        "htmlparser2": "^7.2.0",
+        "uhyphen": "^0.1.0"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+          "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+        },
+        "htmlparser2": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.2",
+            "domutils": "^2.8.0",
+            "entities": "^3.0.1"
+          }
+        }
+      }
+    },
+    "lint-staged": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.2.tgz",
+      "integrity": "sha512-71gSwXKy649VrSU09s10uAT0rWCcY3aewhMaHyl2N84oBk4Xs9HgxvUp3AYu+bNsK4NrOYYxvSgg7FyGJ+jGcA==",
       "dev": true,
       "requires": {
-        "uc.micro": "^1.0.1"
+        "chalk": "5.2.0",
+        "cli-truncate": "^3.1.0",
+        "commander": "^10.0.0",
+        "debug": "^4.3.4",
+        "execa": "^7.0.0",
+        "lilconfig": "2.1.0",
+        "listr2": "^5.0.7",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-inspect": "^1.12.3",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.1",
+        "yaml": "^2.2.2"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+          "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+          "dev": true
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "execa": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-7.1.1.tgz",
+          "integrity": "sha512-wH0eMf/UXckdUYnO21+HDztteVv05rq2GXksxT4fCGeHkBhw1DROXh40wcjMcRqDOWE7iPJ4n3M7e2+YFP+76Q==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.3",
+            "get-stream": "^6.0.1",
+            "human-signals": "^4.3.0",
+            "is-stream": "^3.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^5.1.0",
+            "onetime": "^6.0.0",
+            "signal-exit": "^3.0.7",
+            "strip-final-newline": "^3.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+          "dev": true
+        },
+        "human-signals": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+          "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+          "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+          "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+          "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+          "dev": true,
+          "requires": {
+            "path-key": "^4.0.0"
+          }
+        },
+        "onetime": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+          "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^4.0.0"
+          }
+        },
+        "path-key": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+          "dev": true
+        },
+        "pidtree": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+          "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+          "dev": true
+        },
+        "strip-final-newline": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+          "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+          "dev": true
+        },
+        "yaml": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+          "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+          "dev": true
+        }
       }
     },
     "liquidjs": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-6.4.3.tgz",
-      "integrity": "sha512-m1xSB10Ncu22NR3X0xdaqu/GvP1xadDCFYGqGgd6me8DAWjyA68BKE5DHJmSxw1CGsWPsX+Hj2v/87J2w/LvMQ==",
-      "dev": true
+      "version": "9.43.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-9.43.0.tgz",
+      "integrity": "sha512-qZZuL5Emja2UgCqiLewiw9bvwZQwm19TTGFxDkonVzB4YSTOZ8tuTVo/7Uu/AeW1cL2Qb/at3DSoV8wwyFXQCw=="
     },
     "list-to-array": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
-      "integrity": "sha1-yn3/ZAYGQzysdcvoRGrNhksVv28=",
-      "dev": true
+      "integrity": "sha1-yn3/ZAYGQzysdcvoRGrNhksVv28="
+    },
+    "listr2": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.8.tgz",
+      "integrity": "sha512-mC73LitKHj9w6v30nLNGPetZIlfpUniNSsxxrbaPcWOjDb92SHPzJPi/t+v1YC/lxKz/AJ9egOjww0qUuFxBpA==",
+      "dev": true,
+      "requires": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.19",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.8.0",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cli-truncate": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+          "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+          "dev": true,
+          "requires": {
+            "slice-ansi": "^3.0.0",
+            "string-width": "^4.2.0"
+          },
+          "dependencies": {
+            "slice-ansi": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+              "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^4.0.0",
+                "astral-regex": "^2.0.0",
+                "is-fullwidth-code-point": "^3.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "colorette": {
+          "version": "2.0.20",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+          "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+          "dev": true
+        },
+        "log-update": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+          "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+          "dev": true,
+          "requires": {
+            "ansi-escapes": "^4.3.0",
+            "cli-cursor": "^3.1.0",
+            "slice-ansi": "^4.0.0",
+            "wrap-ansi": "^6.2.0"
+          },
+          "dependencies": {
+            "wrap-ansi": {
+              "version": "6.2.0",
+              "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+              "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^4.0.0",
+                "string-width": "^4.1.0",
+                "strip-ansi": "^6.0.0"
+              }
+            }
+          }
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
+    "lit": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.2.tgz",
+      "integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      },
+      "dependencies": {
+        "lit-element": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
+          "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+          "requires": {
+            "@lit/reactive-element": "^1.3.0",
+            "lit-html": "^2.2.0"
+          }
+        },
+        "lit-html": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.2.tgz",
+          "integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
+          "requires": {
+            "@types/trusted-types": "^2.0.2"
+          }
+        }
+      }
     },
     "lit-element": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.0.tgz",
-      "integrity": "sha512-Mzs3H7IO4wAnpzqreHw6dQqp9IG+h/oN8X9pgNbMZbE7x6B0aNOwP5Nveox/5HE+65ZfW2PeULEjoHkrwpTnuQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz",
+      "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==",
       "requires": {
-        "lit-html": "^1.0.0"
+        "lit-html": "^1.1.1"
       }
     },
     "lit-html": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.2.1.tgz",
-      "integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz",
+      "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA=="
     },
     "load-json-file": {
       "version": "1.1.0",
@@ -15007,6 +43226,16 @@
         "pify": "^2.0.0",
         "pinkie-promise": "^2.0.0",
         "strip-bom": "^2.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        }
       }
     },
     "load-plugin": {
@@ -15031,82 +43260,72 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
       "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
         "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
       }
     },
     "localtunnel": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-1.9.2.tgz",
-      "integrity": "sha512-NEKF7bDJE9U3xzJu3kbayF0WTvng6Pww7tzqNb/XtEARYwqw7CKEX7BvOMg98FtE9es2CRizl61gkV3hS8dqYg==",
-      "dev": true,
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.2.tgz",
+      "integrity": "sha512-n418Cn5ynvJd7m/N1d9WVJISLJF/ellZnfsLnx8WBWGzxv/ntNcFkJ1o6se5quUhCplfLGBNL5tYHiq5WF3Nug==",
       "requires": {
-        "axios": "0.19.0",
-        "debug": "4.1.1",
+        "axios": "0.21.4",
+        "debug": "4.3.2",
         "openurl": "1.1.1",
-        "yargs": "6.6.0"
+        "yargs": "17.1.1"
       },
       "dependencies": {
         "yargs": {
-          "version": "6.6.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
-          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
-          "dev": true,
+          "version": "17.1.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.1.1.tgz",
+          "integrity": "sha512-c2k48R0PwKIqKhPMWjeiF6y2xY/gPMUlro0sgxqXpbOIohWiLNXWslsootttv7E1e73QPAMQSg5FeySbVcpsPQ==",
           "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^4.2.0"
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
           }
         }
       }
     },
     "locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "dev": true,
       "requires": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "dependencies": {
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
+        "p-locate": "^4.1.0"
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
-      "dev": true
+    "lodash._objecttypes": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz",
+      "integrity": "sha512-XpqGh1e7hhkOzftBfWE7zt+Yn9mVHFkDhicVttvKLsoCMLVVL+xTQjfjB4X4vtznauxv0QZ5ZAeqjvat0dh62Q=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
-      "dev": true
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
     "lodash.capitalize": {
       "version": "4.2.1",
@@ -15114,11 +43333,83 @@
       "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s="
+    },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
+    },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.isfinite": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
-      "integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
-      "dev": true
+      "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA=="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
+    },
+    "lodash.isobject": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz",
+      "integrity": "sha512-sTebg2a1PoicYEZXD5PBdQcTlIJ6hUslrlWr7iV0O7n+i4596s2NQ9I5CaZ5FbXSfya/9WQsrYLANUJv9paYVA==",
+      "requires": {
+        "lodash._objecttypes": "~2.4.1"
+      }
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
@@ -15129,33 +43420,44 @@
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
-    "lodash.template": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "^3.0.0",
-        "lodash.templatesettings": "^4.0.0"
-      }
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
     },
-    "lodash.templatesettings": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "^3.0.0"
-      }
+    "lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM="
+    },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw=="
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
+    "lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw=="
     },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
     "log-symbols": {
       "version": "2.2.0",
@@ -15210,98 +43512,57 @@
       }
     },
     "log4js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/log4js/-/log4js-4.5.1.tgz",
-      "integrity": "sha512-EEEgFcE9bLgaYUKuozyFfytQM2wDHtXn4tAN41pkaxpNjAykv11GVdeI4tHtmPWW4Xrgh9R/2d7XYghDVjbKKw==",
-      "dev": true,
-      "requires": {
-        "date-format": "^2.0.0",
-        "debug": "^4.1.1",
-        "flatted": "^2.0.0",
-        "rfdc": "^1.1.4",
-        "streamroller": "^1.0.6"
-      }
-    },
-    "logalot": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
-      "integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=",
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.7.0.tgz",
+      "integrity": "sha512-KA0W9ffgNBLDj6fZCq/lRbgR6ABAodRIDHrZnS48vOtfKa4PzWImb0Md1lmGCdO3n3sbCm/n1/WmrNlZ8kCI3Q==",
       "dev": true,
       "requires": {
-        "figures": "^1.3.5",
-        "squeak": "^1.0.0"
+        "date-format": "^4.0.14",
+        "debug": "^4.3.4",
+        "flatted": "^3.2.7",
+        "rfdc": "^1.3.0",
+        "streamroller": "^3.1.3"
       },
       "dependencies": {
-        "figures": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
           "requires": {
-            "escape-string-regexp": "^1.0.5",
-            "object-assign": "^4.1.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-              "dev": true
-            }
+            "ms": "2.1.2"
           }
         }
       }
     },
     "logform": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/logform/-/logform-2.1.2.tgz",
-      "integrity": "sha512-+lZh4OpERDBLqjiwDLpAWNQu6KMjnlXH2ByZwCuSqVPJletw0kTWJf5CgSNAUKn1KUkv3m2cUz/LK8zyEy7wzQ==",
-      "dev": true,
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.5.1.tgz",
+      "integrity": "sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==",
       "requires": {
-        "colors": "^1.2.1",
-        "fast-safe-stringify": "^2.0.4",
-        "fecha": "^2.3.3",
+        "@colors/colors": "1.5.0",
+        "@types/triple-beam": "^1.3.2",
+        "fecha": "^4.2.0",
         "ms": "^2.1.1",
+        "safe-stable-stringify": "^2.3.1",
         "triple-beam": "^1.3.0"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
       }
     },
-    "longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
     },
     "longest-streak": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.3.tgz",
-      "integrity": "sha512-9lz5IVdpwsKLMzQi0MQ+oD9EA0mIGcWYP7jXMTZVXP8D42PwuAk+M/HBFYQoxt1G5OR8m7aSIgb1UymfWGBWEw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
+      "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==",
       "dev": true
     },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "requires": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      }
+    "lookup-closest-locale": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz",
+      "integrity": "sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ=="
     },
     "lowercase-keys": {
       "version": "1.0.1",
@@ -15309,18 +43570,6 @@
       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
       "dev": true
     },
-    "lpad-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
-      "integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=",
-      "dev": true,
-      "requires": {
-        "get-stdin": "^4.0.1",
-        "indent-string": "^2.1.0",
-        "longest": "^1.0.0",
-        "meow": "^3.3.0"
-      }
-    },
     "lru-cache": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -15331,24 +43580,22 @@
       }
     },
     "luxon": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.12.1.tgz",
-      "integrity": "sha512-Zv/qJb2X1ESTrlniAViWx2aqGwi2cVpeoZFTbPdPiCu4EsadKsmb/QCH8HQjMUpDZKKJIHKHsJxV5Rwpq47HKQ==",
-      "dev": true
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
     },
     "magic-string": {
-      "version": "0.25.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
-      "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
     },
     "make-dir": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-      "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
-      "dev": true,
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
       "requires": {
         "semver": "^6.0.0"
       },
@@ -15356,8 +43603,75 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "make-fetch-happen": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-11.1.1.tgz",
+      "integrity": "sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==",
+      "optional": true,
+      "requires": {
+        "agentkeepalive": "^4.2.1",
+        "cacache": "^17.0.0",
+        "http-cache-semantics": "^4.1.1",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "is-lambda": "^1.0.1",
+        "lru-cache": "^7.7.1",
+        "minipass": "^5.0.0",
+        "minipass-fetch": "^3.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^0.6.3",
+        "promise-retry": "^2.0.1",
+        "socks-proxy-agent": "^7.0.0",
+        "ssri": "^10.0.0"
+      },
+      "dependencies": {
+        "@tootallnate/once": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+          "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+          "optional": true
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "optional": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "http-proxy-agent": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+          "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+          "optional": true,
+          "requires": {
+            "@tootallnate/once": "2",
+            "agent-base": "6",
+            "debug": "4"
+          }
+        },
+        "lru-cache": {
+          "version": "7.18.3",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+          "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+          "optional": true
+        },
+        "socks-proxy-agent": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
+          "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
+          "optional": true,
+          "requires": {
+            "agent-base": "^6.0.2",
+            "debug": "^4.3.3",
+            "socks": "^2.6.2"
+          }
         }
       }
     },
@@ -15365,44 +43679,33 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
       "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
-      "dev": true,
       "requires": {
         "kind-of": "^6.0.2"
       }
     },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
     "map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.2.1.tgz",
+      "integrity": "sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==",
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
       "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-      "dev": true,
       "requires": {
         "object-visit": "^1.0.0"
       }
     },
     "markdown-escapes": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.3.tgz",
-      "integrity": "sha512-XUi5HJhhV5R74k8/0H2oCbCiYf/u4cO/rX8tnGkRvrqhsr5BRNU6Mg0yt/8UIx1iIS8220BNJsDb7XnILhLepw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
+      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
       "dev": true
     },
     "markdown-extensions": {
@@ -15412,29 +43715,53 @@
       "dev": true
     },
     "markdown-it": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
-      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
-      "dev": true,
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
       "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~1.1.1",
-        "linkify-it": "^2.0.0",
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
         "mdurl": "^1.0.1",
         "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+        },
+        "linkify-it": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+          "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+          "requires": {
+            "uc.micro": "^1.0.1"
+          }
+        }
       }
     },
     "markdown-it-anchor": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.0.2.tgz",
-      "integrity": "sha512-AFM/woBI8QDJMS/9+MmsBMT5/AR+ImfOsunQZTZhzcTmna3rIzAzbOh5E0l6mlFM/i9666BpUtkqQ9bS7WApCg==",
-      "dev": true
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz",
+      "integrity": "sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==",
+      "requires": {}
     },
     "markdown-it-attrs": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-3.0.1.tgz",
-      "integrity": "sha512-fcpdmxdEsctDVJEunPyrirVtU/6zcTMxPxAu4Ofz51PKAa8vRMpmGQXsmXx1HTdIdUPoDonm/RhS/+jTNywj/Q==",
-      "dev": true
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.1.4.tgz",
+      "integrity": "sha512-53Zfv8PTb6rlVFDlD106xcZHKBSsRZKJ2IW/rTxEJBEVbVaoxaNsmRkG0HXfbHl2SK8kaxZ2QKqdthWy/QBwmA==",
+      "requires": {}
+    },
+    "markdown-it-deflist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz",
+      "integrity": "sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg=="
     },
     "markdown-table": {
       "version": "1.1.3",
@@ -15442,11 +43769,53 @@
       "integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==",
       "dev": true
     },
+    "marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A=="
+    },
+    "marked-terminal": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-5.2.0.tgz",
+      "integrity": "sha512-Piv6yNwAQXGFjZSaiNljyNFw7jKDdGrw70FSbtxEyldLsyeuV5ZHm/1wW++kWbrOF1VPnUgYOhB2oLL0ZpnekA==",
+      "requires": {
+        "ansi-escapes": "^6.2.0",
+        "cardinal": "^2.1.1",
+        "chalk": "^5.2.0",
+        "cli-table3": "^0.6.3",
+        "node-emoji": "^1.11.0",
+        "supports-hyperlinks": "^2.3.0"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+          "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+          "requires": {
+            "type-fest": "^3.0.0"
+          }
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w=="
+        },
+        "type-fest": {
+          "version": "3.13.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+          "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g=="
+        }
+      }
+    },
+    "marky": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.2.tgz",
+      "integrity": "sha512-k1dB2HNeaNyORco8ulVEhctyEGkKHb2YWAhDsxeFlW2nROIirsctBYzKwwS3Vza+sKTS1zO4Z+n9/+9WbGLIxQ=="
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
       "integrity": "sha1-xvNINKDY28OzfCfui7yyfHd1WC4=",
-      "dev": true,
       "requires": {
         "findup-sync": "^2.0.0",
         "micromatch": "^3.0.4",
@@ -15454,11 +43823,77 @@
         "stack-trace": "0.0.10"
       },
       "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
         "findup-sync": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
           "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
-          "dev": true,
           "requires": {
             "detect-file": "^1.0.0",
             "is-glob": "^3.1.0",
@@ -15470,16 +43905,32 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
           "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-          "dev": true,
           "requires": {
             "is-extglob": "^2.1.0"
           }
         },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
         "micromatch": {
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -15495,6 +43946,15 @@
             "snapdragon": "^0.8.1",
             "to-regex": "^3.0.2"
           }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
         }
       }
     },
@@ -15508,7 +43968,6 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
       "integrity": "sha1-hs2NawTJ8wfAWmuUGZBtA2D7E6I=",
-      "dev": true,
       "requires": {
         "array-differ": "^1.0.0",
         "array-union": "^1.0.1",
@@ -15519,30 +43978,52 @@
         "array-differ": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-          "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
-          "dev": true
+          "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE="
+        },
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
         }
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "mdast-comment-marker": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/mdast-comment-marker/-/mdast-comment-marker-1.1.1.tgz",
-      "integrity": "sha512-TWZDaUtPLwKX1pzDIY48MkSUQRDwX/HqbTB4m3iYdL/zosi/Z6Xqfdv0C0hNVKvzrPjZENrpWDt4p4odeVO0Iw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-comment-marker/-/mdast-comment-marker-1.1.2.tgz",
+      "integrity": "sha512-vTFXtmbbF3rgnTh3Zl3irso4LtvwUq/jaDvT2D1JqTGAwaipcS7RpTxzi6KjoRqI9n2yuAhzLDAC8xVTF3XYVQ==",
       "dev": true
     },
     "mdast-util-compact": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.3.tgz",
-      "integrity": "sha512-nRiU5GpNy62rZppDKbLwhhtw5DXoFMqw9UNZFmlPsNaQCZ//WLjGKUwWMdJrUH+Se7UvtO2gXtAMe0g/N+eI5w==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.4.tgz",
+      "integrity": "sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==",
       "dev": true,
       "requires": {
         "unist-util-visit": "^1.1.0"
       }
     },
     "mdast-util-heading-style": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/mdast-util-heading-style/-/mdast-util-heading-style-1.0.5.tgz",
-      "integrity": "sha512-8zQkb3IUwiwOdUw6jIhnwM6DPyib+mgzQuHAe7j2Hy1rIarU4VUxe472bp9oktqULW3xqZE+Kz6OD4Gi7IA3vw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/mdast-util-heading-style/-/mdast-util-heading-style-1.0.6.tgz",
+      "integrity": "sha512-8ZuuegRqS0KESgjAGW8zTx4tJ3VNIiIaGFNEzFpRSAQBavVc7AvOo9I4g3crcZBfYisHs4seYh0rAVimO6HyOw==",
       "dev": true
     },
     "mdast-util-position": {
@@ -15552,74 +44033,93 @@
       "dev": true
     },
     "mdast-util-to-string": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.0.6.tgz",
-      "integrity": "sha512-868pp48gUPmZIhfKrLbaDneuzGiw3OTDjHc5M1kAepR2CWBJ+HpEsm252K4aXdiP5coVZaJPOqGtVU6Po8xnXg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
       "dev": true
     },
     "mdn-data": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
-      "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
-      "dev": true
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
     },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
-      "dev": true
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
     },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
-    "mem": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "dev": true,
-      "requires": {
-        "map-age-cleaner": "^0.1.1",
-        "mimic-fn": "^2.0.0",
-        "p-is-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "mimic-fn": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-          "dev": true
-        },
-        "p-is-promise": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-          "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-          "dev": true
-        }
-      }
-    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
-      "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=",
-      "dev": true
+      "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI="
     },
     "meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "requires": {
-        "camelcase-keys": "^2.0.0",
-        "decamelize": "^1.1.2",
-        "loud-rejection": "^1.0.0",
-        "map-obj": "^1.0.1",
-        "minimist": "^1.1.3",
-        "normalize-package-data": "^2.3.4",
-        "object-assign": "^4.0.1",
-        "read-pkg-up": "^1.0.1",
-        "redent": "^1.0.0",
-        "trim-newlines": "^1.0.0"
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+      "dev": true,
+      "requires": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize": "^1.2.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
+      },
+      "dependencies": {
+        "hosted-git-info": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
+          "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "normalize-package-data": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.2.tgz",
+          "integrity": "sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^4.0.1",
+            "resolve": "^1.20.0",
+            "semver": "^7.3.4",
+            "validate-npm-package-license": "^3.0.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+          "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+          "dev": true
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
       }
     },
     "merge": {
@@ -15636,14 +44136,17 @@
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "merge2": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-      "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
-      "dev": true
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
+    },
+    "metaviewport-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.2.0.tgz",
+      "integrity": "sha1-U1w84cz2IjpQJf3cahw2UF9+fbE="
     },
     "methods": {
       "version": "1.1.2",
@@ -15651,50 +44154,36 @@
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
     "micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
       }
     },
     "mime": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
-      "dev": true
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
     },
     "mime-db": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
-      "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
-      "version": "2.1.22",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
-      "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "requires": {
-        "mime-db": "~1.38.0"
+        "mime-db": "1.52.0"
       }
     },
     "mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
     "mimic-response": {
       "version": "1.0.1",
@@ -15717,9 +44206,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "minimist-options": {
       "version": "4.1.0",
@@ -15732,25 +44221,176 @@
         "kind-of": "^6.0.3"
       },
       "dependencies": {
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
           "dev": true
         }
       }
     },
+    "minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ=="
+    },
+    "minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
+      }
+    },
+    "minipass-fetch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.4.tgz",
+      "integrity": "sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==",
+      "optional": true,
+      "requires": {
+        "encoding": "^0.1.13",
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^2.1.2"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+          "optional": true
+        }
+      }
+    },
+    "minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
+      }
+    },
+    "minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
+      }
+    },
+    "minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+          "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
     "mitt": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
-      "integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==",
-      "dev": true
+      "integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw=="
     },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
       "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
-      "dev": true,
       "requires": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -15760,7 +44400,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
           "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
           "requires": {
             "is-plain-object": "^2.0.4"
           }
@@ -15768,26 +44407,23 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-      "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-      "dev": true,
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "requires": {
         "minimist": "^1.2.5"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        }
       }
     },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
     "mocha": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.0.tgz",
-      "integrity": "sha512-qwfFgY+7EKAAUAdv7VYMZQknI7YJSGesxHyhn6qD52DV8UcSZs5XwCifcZGMVIE4a5fbmhvbotxC0DLQ0oKohQ==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.3.tgz",
+      "integrity": "sha512-0R/3FvjIGH3eEuG17ccFPk117XL2rWxatr81a57D+r/x2uTYZRbdZ4oVidEUMh2W2TJDa7MdAb12Lm2/qrKajg==",
       "dev": true,
       "requires": {
         "ansi-colors": "3.2.3",
@@ -15802,7 +44438,7 @@
         "js-yaml": "3.13.1",
         "log-symbols": "2.2.0",
         "minimatch": "3.0.4",
-        "mkdirp": "0.5.1",
+        "mkdirp": "0.5.4",
         "ms": "2.1.1",
         "node-environment-flags": "1.0.5",
         "object.assign": "4.1.0",
@@ -15810,9 +44446,9 @@
         "supports-color": "6.0.0",
         "which": "1.3.1",
         "wide-align": "1.1.3",
-        "yargs": "13.2.2",
-        "yargs-parser": "13.0.0",
-        "yargs-unparser": "1.5.0"
+        "yargs": "13.3.2",
+        "yargs-parser": "13.1.2",
+        "yargs-unparser": "1.6.0"
       },
       "dependencies": {
         "ansi-colors": {
@@ -15822,38 +44458,20 @@
           "dev": true
         },
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
         "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "dev": true,
           "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
-          },
-          "dependencies": {
-            "string-width": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-              "dev": true,
-              "requires": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-              }
-            }
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
           }
         },
         "debug": {
@@ -15865,10 +44483,10 @@
             "ms": "^2.1.1"
           }
         },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
           "dev": true
         },
         "find-up": {
@@ -15880,17 +44498,19 @@
             "locate-path": "^3.0.0"
           }
         },
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-          "dev": true
-        },
-        "invert-kv": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-          "dev": true
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
@@ -15898,28 +44518,33 @@
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
           "dev": true
         },
-        "lcid": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+        "js-yaml": {
+          "version": "3.13.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
           "dev": true,
           "requires": {
-            "invert-kv": "^2.0.0"
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
           }
         },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
         },
         "mkdirp": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "version": "0.5.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
           "dev": true,
           "requires": {
-            "minimist": "0.0.8"
+            "minimist": "^1.2.5"
           }
         },
         "ms": {
@@ -15928,21 +44553,31 @@
           "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "dev": true
         },
-        "os-locale": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+        "object.assign": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+          "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
           "dev": true,
           "requires": {
-            "execa": "^1.0.0",
-            "lcid": "^2.0.0",
-            "mem": "^4.0.0"
+            "define-properties": "^1.1.2",
+            "function-bind": "^1.1.1",
+            "has-symbols": "^1.0.0",
+            "object-keys": "^1.0.11"
           }
         },
-        "require-main-filename": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
           "dev": true
         },
         "string-width": {
@@ -15954,34 +44589,23 @@
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
             "strip-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
           }
         },
         "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^3.0.0"
+            "ansi-regex": "^4.1.0"
           }
         },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+          "dev": true
+        },
         "supports-color": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
@@ -15991,41 +44615,54 @@
             "has-flag": "^3.0.0"
           }
         },
-        "which-module": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-          "dev": true
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
           "dev": true
         },
         "yargs": {
-          "version": "13.2.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.2.tgz",
-          "integrity": "sha512-WyEoxgyTD3w5XRpAQNYUB9ycVH/PQrToaTXdYXRdOXvEy1l19br+VJsc0vcO8PTGg5ro/l/GY7F/JMEBmI0BxA==",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "dev": true,
           "requires": {
-            "cliui": "^4.0.0",
+            "cliui": "^5.0.0",
             "find-up": "^3.0.0",
             "get-caller-file": "^2.0.1",
-            "os-locale": "^3.1.0",
             "require-directory": "^2.1.1",
             "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
             "string-width": "^3.0.0",
             "which-module": "^2.0.0",
             "y18n": "^4.0.0",
-            "yargs-parser": "^13.0.0"
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "13.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.0.0.tgz",
-          "integrity": "sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -16041,89 +44678,94 @@
       "dev": true
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-      "dev": true
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "moo": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
-      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==",
-      "dev": true
+      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w=="
     },
-    "mozjpeg": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-6.0.1.tgz",
-      "integrity": "sha512-9Z59pJMi8ni+IUvSH5xQwK5tNLw7p3dwDNCZ3o1xE+of3G5Hc/yOz6Ue/YuLiBXU3ZB5oaHPURyPdqfBX/QYJA==",
-      "dev": true,
+    "morgan": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
       "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.1.0"
+        "basic-auth": "~2.0.1",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
       }
     },
     "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multimatch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
-      "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
       "requires": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
         "array-union": "^2.1.0",
         "arrify": "^2.0.1",
         "minimatch": "^3.0.4"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        },
-        "arrify": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-          "dev": true
-        }
       }
     },
     "mustache": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.2.tgz",
-      "integrity": "sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ==",
-      "dev": true
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ=="
     },
     "mute-stdout": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-1.0.1.tgz",
-      "integrity": "sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==",
-      "dev": true
+      "integrity": "sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg=="
     },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-      "dev": true
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
     "nan": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
-      "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
+      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
       "optional": true
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
       "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
       "requires": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -16136,6 +44778,25 @@
         "regex-not": "^1.0.0",
         "snapdragon": "^0.8.1",
         "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
       }
     },
     "natural-compare": {
@@ -16151,27 +44812,53 @@
       "dev": true
     },
     "negotiator": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
-      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
     },
     "neo-async": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
-      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
-      "dev": true
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg=="
     },
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
-      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
-      "dev": true
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
+    "nice-napi": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
+      "integrity": "sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==",
+      "optional": true,
+      "requires": {
+        "node-addon-api": "^3.0.0",
+        "node-gyp-build": "^4.2.2"
+      }
     },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+    },
+    "node-addon-api": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
+      "optional": true
+    },
+    "node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
     },
     "node-environment-flags": {
       "version": "1.0.5",
@@ -16181,167 +44868,93 @@
       "requires": {
         "object.getownpropertydescriptors": "^2.0.3",
         "semver": "^5.7.0"
-      }
-    },
-    "node-fetch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.3.0.tgz",
-      "integrity": "sha512-MOd8pV3fxENbryESLgVIeaGKrdl+uaYhCSSVkjeOb/31/njTpcis5aWfdqgNlHIrKOLRbMnfPINPOML2CIFeXA==",
-      "dev": true
-    },
-    "node-gyp": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
-      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
-      "optional": true,
-      "requires": {
-        "fstream": "^1.0.0",
-        "glob": "^7.0.3",
-        "graceful-fs": "^4.1.2",
-        "mkdirp": "^0.5.0",
-        "nopt": "2 || 3",
-        "npmlog": "0 || 1 || 2 || 3 || 4",
-        "osenv": "0",
-        "request": "^2.87.0",
-        "rimraf": "2",
-        "semver": "~5.3.0",
-        "tar": "^2.0.0",
-        "which": "1"
       },
       "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "optional": true
-        },
-        "mkdirp": {
-          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "nopt": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-          "optional": true,
-          "requires": {
-            "abbrev": "1"
-          }
-        },
         "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "optional": true
-        },
-        "tar": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-          "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
-          "optional": true,
-          "requires": {
-            "block-stream": "*",
-            "fstream": "^1.0.12",
-            "inherits": "2"
-          }
-        }
-      }
-    },
-    "node-releases": {
-      "version": "1.1.24",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.24.tgz",
-      "integrity": "sha512-wym2jptfuKowMmkZsfCSTsn8qAVo8zm+UiQA6l5dNqUcpfChZSnS/vbbpOeXczf+VdPhutxh+99lWHhdd6xKzg==",
-      "dev": true,
-      "requires": {
-        "semver": "^5.3.0"
-      }
-    },
-    "node-sass": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
-      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
-      "optional": true,
-      "requires": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^1.1.1",
-        "cross-spawn": "^3.0.0",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "in-publish": "^2.0.0",
-        "lodash": "^4.17.11",
-        "meow": "^3.7.0",
-        "mkdirp": "^0.5.1",
-        "nan": "^2.13.2",
-        "node-gyp": "^3.8.0",
-        "npmlog": "^4.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-              "optional": true
-            }
-          }
-        },
-        "cross-spawn": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
-          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
-          "optional": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "which": "^1.2.9"
-          }
-        },
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "optional": true
-        },
-        "mkdirp": {
-          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
+    "node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
+    },
+    "node-gyp": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.4.0.tgz",
+      "integrity": "sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==",
+      "optional": true,
+      "requires": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^11.0.3",
+        "nopt": "^6.0.0",
+        "npmlog": "^6.0.0",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.2",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+          "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
           "optional": true,
           "requires": {
-            "minimist": "^1.2.5"
+            "abbrev": "^1.0.0"
           }
         }
       }
     },
+    "node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
+      "optional": true
+    },
+    "node-mocks-http": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/node-mocks-http/-/node-mocks-http-1.12.1.tgz",
+      "integrity": "sha512-jrA7Sn3qI6GsHgWtUW3gMj0vO6Yz0nJjzg3jRZYjcfj4tzi8oWPauDK1qHVJoAxTbwuDHF1JiM9GISZ/ocI/ig==",
+      "requires": {
+        "accepts": "^1.3.7",
+        "content-disposition": "^0.5.3",
+        "depd": "^1.1.0",
+        "fresh": "^0.5.2",
+        "merge-descriptors": "^1.0.1",
+        "methods": "^1.1.2",
+        "mime": "^1.3.4",
+        "parseurl": "^1.3.3",
+        "range-parser": "^1.2.0",
+        "type-is": "^1.6.18"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+    },
     "nopt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
-      "dev": true,
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "requires": {
-        "abbrev": "1",
-        "osenv": "^0.1.4"
+        "abbrev": "1"
       }
     },
     "normalize-package-data": {
@@ -16353,75 +44966,39 @@
         "resolve": "^1.10.0",
         "semver": "2 || 3 || 4 || 5",
         "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
       }
     },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
     "normalize-url": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
-      "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
-      "dev": true,
-      "requires": {
-        "prepend-http": "^2.0.0",
-        "query-string": "^5.0.1",
-        "sort-keys": "^2.0.0"
-      },
-      "dependencies": {
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
-        },
-        "sort-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "dev": true,
-          "requires": {
-            "is-plain-obj": "^1.0.0"
-          }
-        }
-      }
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "dev": true
     },
     "now-and-later": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.0.tgz",
-      "integrity": "sha1-vGHLtFbXnLMiB85HygUTb/Ln1u4=",
-      "dev": true,
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
+      "integrity": "sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==",
       "requires": {
         "once": "^1.3.2"
       }
     },
-    "npm-conf": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
-      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
-      "dev": true,
-      "requires": {
-        "config-chain": "^1.1.11",
-        "pify": "^3.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
-        }
-      }
-    },
     "npm-prefix": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/npm-prefix/-/npm-prefix-1.2.0.tgz",
@@ -16437,7 +45014,6 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
       "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "chalk": "^2.4.1",
@@ -16450,20 +45026,22 @@
         "string.prototype.padend": "^3.0.0"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
           "requires": {
-            "color-convert": "^1.9.0"
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
           }
         },
         "load-json-file": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
           "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "parse-json": "^4.0.0",
@@ -16471,21 +45049,10 @@
             "strip-bom": "^3.0.0"
           }
         },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
           "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-          "dev": true,
           "requires": {
             "pify": "^3.0.0"
           }
@@ -16493,63 +45060,79 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
         },
         "read-pkg": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
           "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-          "dev": true,
           "requires": {
             "load-json-file": "^4.0.0",
             "normalize-package-data": "^2.3.2",
             "path-type": "^3.0.0"
           }
         },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        },
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
         }
       }
     },
     "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "requires": {
-        "path-key": "^2.0.0"
+        "path-key": "^3.0.0"
+      },
+      "dependencies": {
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        }
       }
     },
     "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
       "optional": true,
       "requires": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
+        "are-we-there-yet": "^3.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^4.0.3",
+        "set-blocking": "^2.0.0"
       }
     },
     "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
       "requires": {
-        "boolbase": "~1.0.0"
+        "boolbase": "^1.0.0"
       }
     },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
     },
     "number-is-nan": {
       "version": "1.0.1",
@@ -16557,141 +45140,13 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
     "nunjucks": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.1.tgz",
-      "integrity": "sha512-LYlVuC1ZNSalQQkLNNPvcgPt2M9FTY9bs39mTCuFXtqh7jWbYzhDlmz2M6onPiXEhdZo+b9anRhc+uBGuJZ2bQ==",
-      "dev": true,
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.3.tgz",
+      "integrity": "sha512-psb6xjLj47+fE76JdZwskvwG4MYsQKXUtMsPh6U0YMvmyjRtKRFcxnlXGWglNybtNTNVmGdp94K62/+NjF5FDQ==",
       "requires": {
         "a-sync-waterfall": "^1.0.0",
         "asap": "^2.0.3",
-        "chokidar": "^3.3.0",
-        "commander": "^3.0.2"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "binary-extensions": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-          "dev": true,
-          "optional": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chokidar": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
-          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "anymatch": "~3.1.1",
-            "braces": "~3.0.2",
-            "fsevents": "~2.1.2",
-            "glob-parent": "~5.1.0",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.4.0"
-          }
-        },
-        "commander": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
-          "dev": true
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "fsevents": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
-          "optional": true
-        },
-        "readdirp": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
-          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          },
-          "dependencies": {
-            "picomatch": {
-              "version": "2.2.2",
-              "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-              "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "commander": "^5.1.0"
       }
     },
     "oauth-sign": {
@@ -16704,17 +45159,10 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
-    "object-component": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
-      "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=",
-      "dev": true
-    },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
       "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-      "dev": true,
       "requires": {
         "copy-descriptor": "^0.1.0",
         "define-property": "^0.2.5",
@@ -16725,7 +45173,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -16734,98 +45181,74 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
         }
       }
     },
-    "object-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.0.tgz",
-      "integrity": "sha512-6OO5X1+2tYkNyNEx6TsCxEqFfRWaqx6EtMiSbGrw8Ob8v9Ne+Hl8rBAgLBZn5wjEz3s/s6U1WXFUFOcxxAwUpg==",
-      "dev": true
+    "object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
     },
-    "object-path": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.9.2.tgz",
-      "integrity": "sha1-D9mnT8X60a45aLWGvaXGMr1sBaU=",
-      "dev": true
+    "object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
       "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.0"
       }
     },
     "object.assign": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dev": true,
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
       "requires": {
-        "define-properties": "^1.1.2",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.0",
-        "object-keys": "^1.0.11"
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
       }
     },
     "object.defaults": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
       "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
-      "dev": true,
       "requires": {
         "array-each": "^1.0.1",
         "array-slice": "^1.0.0",
         "for-own": "^1.0.0",
         "isobject": "^3.0.0"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "^1.0.1"
-          }
-        }
       }
     },
     "object.getownpropertydescriptors": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
-      "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
-      "dev": true,
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
       "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.5.1"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
       }
     },
     "object.map": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
-      "integrity": "sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=",
-      "dev": true,
-      "requires": {
-        "for-own": "^1.0.0",
-        "make-iterator": "^1.0.0"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "^1.0.1"
-          }
-        }
+      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+      "integrity": "sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=",
+      "requires": {
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
       }
     },
     "object.omit": {
@@ -16836,13 +45259,23 @@
       "requires": {
         "for-own": "^0.1.4",
         "is-extendable": "^0.1.1"
+      },
+      "dependencies": {
+        "for-own": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+          "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+          "dev": true,
+          "requires": {
+            "for-in": "^1.0.1"
+          }
+        }
       }
     },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -16851,33 +45284,19 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object.reduce/-/object.reduce-1.0.1.tgz",
       "integrity": "sha1-b+NI8qx/oPlcpiEiZZkJaCW7A60=",
-      "dev": true,
       "requires": {
         "for-own": "^1.0.0",
         "make-iterator": "^1.0.0"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "^1.0.1"
-          }
-        }
       }
     },
     "object.values": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz",
-      "integrity": "sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==",
-      "dev": true,
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
+      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
       "requires": {
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.12.0",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3"
+        "es-abstract": "^1.18.2"
       }
     },
     "on-finished": {
@@ -16902,113 +45321,202 @@
       }
     },
     "one-time": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/one-time/-/one-time-0.0.4.tgz",
-      "integrity": "sha1-+M33eISCb+Tf+T46nMN7HkSAdC4=",
-      "dev": true
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+      "integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
+      "requires": {
+        "fn.name": "1.x.x"
+      }
     },
     "onetime": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-      "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
-      "dev": true,
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "requires": {
         "mimic-fn": "^2.1.0"
       }
     },
+    "open": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+      "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
+    "openapi3-ts": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/openapi3-ts/-/openapi3-ts-3.2.0.tgz",
+      "integrity": "sha512-/ykNWRV5Qs0Nwq7Pc0nJ78fgILvOT/60OxEmB3v7yQ8a8Bwcm43D4diaYazG/KBn6czA+52XYy931WFLMCUeSg==",
+      "requires": {
+        "yaml": "^2.2.1"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
+          "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg=="
+        }
+      }
+    },
     "opencollective-postinstall": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
-      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
     "openurl": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/openurl/-/openurl-1.1.1.tgz",
-      "integrity": "sha1-OHW0sO96UsFW8NtB1GCduw+Us4c=",
-      "dev": true
+      "integrity": "sha512-d/gTkTb1i1GKz5k3XE3XFV/PxQ1k45zDqGP2OA7YhgsaLoqm6qRvARAZOFer1fcXritWlGBRCu/UgeS4HAnXAA=="
     },
     "opn": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
       "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
-      "dev": true,
       "requires": {
         "is-wsl": "^1.1.0"
       }
     },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-          "dev": true
-        },
-        "wordwrap": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-          "dev": true
-        }
-      }
-    },
     "optionator": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
       "dev": true,
       "requires": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.4",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "wordwrap": "~1.0.0"
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
       }
     },
-    "optipng-bin": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/optipng-bin/-/optipng-bin-6.0.0.tgz",
-      "integrity": "sha512-95bB4y8IaTsa/8x6QH4bLUuyvyOoGBCLDA7wOgDL8UFqJpSUh1Hob8JRJhit+wC1ZLN3tQ7mFt7KuBj0x8F2Wg==",
-      "dev": true,
-      "optional": true,
+    "ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
       "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.0.0"
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "log-symbols": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+          "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+          "requires": {
+            "chalk": "^4.1.0",
+            "is-unicode-supported": "^0.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "ordered-read-streams": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz",
       "integrity": "sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=",
-      "dev": true,
       "requires": {
         "readable-stream": "^2.0.1"
-      }
-    },
-    "os-filter-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
-      "integrity": "sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==",
-      "dev": true,
-      "requires": {
-        "arch": "^2.1.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
     },
     "os-locale": {
       "version": "1.4.0",
@@ -17023,104 +45531,62 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
-    "osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
-    },
-    "ow": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/ow/-/ow-0.8.0.tgz",
-      "integrity": "sha512-hYgYZNcRfIZ2JppSTqh6mxdU1zkUXsGlwy4eBsRG91R6CiZk7cB+AfHl+SVKBdynQvAnNHNfu0ZrtJN1jj7Mow==",
-      "dev": true
-    },
     "p-cancelable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
-      "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
       "dev": true
     },
     "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
-    "p-event": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
-      "integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
-      "dev": true,
-      "requires": {
-        "p-timeout": "^1.1.1"
-      }
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-3.0.0.tgz",
+      "integrity": "sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw=="
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
-    },
-    "p-is-promise": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-limit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
-      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
     },
     "p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
       "requires": {
-        "p-limit": "^2.0.0"
+        "p-limit": "^2.2.0"
       }
     },
-    "p-map-series": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-1.0.0.tgz",
-      "integrity": "sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=",
-      "dev": true,
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "devOptional": true,
       "requires": {
-        "p-reduce": "^1.0.0"
+        "aggregate-error": "^3.0.0"
       }
     },
-    "p-pipe": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-3.0.0.tgz",
-      "integrity": "sha512-gwwdRFmaxsT3IU+Tl3vYKVRdjfhg8Bbdjw7B+E0y6F7Yz6l+eaQLn0BRmGMXIhcPDONPtOkMoNwx1etZh4zPJA==",
-      "dev": true
-    },
     "p-queue": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-2.4.2.tgz",
-      "integrity": "sha512-n8/y+yDJwBjoLQe1GSJbbaYQLTI7QHNZI2+rpmCDbe++WLf9HC3gf6iqj5yfPAV71W4UF3ql5W1+UBPXoXTxng==",
-      "dev": true
-    },
-    "p-reduce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
-      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
-      "dev": true
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "requires": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      }
     },
     "p-timeout": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
-      "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
-      "dev": true,
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
       "requires": {
         "p-finally": "^1.0.0"
       }
@@ -17131,126 +45597,92 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
-    "package-json": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
-      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
-      "dev": true,
+    "pac-proxy-agent": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
+      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
       "requires": {
-        "got": "^9.6.0",
-        "registry-auth-token": "^4.0.0",
-        "registry-url": "^5.0.0",
-        "semver": "^6.2.0"
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
+        "pac-resolver": "^7.0.0",
+        "socks-proxy-agent": "^8.0.2"
       },
       "dependencies": {
-        "@sindresorhus/is": {
-          "version": "0.14.0",
-          "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
-          "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
-          "dev": true
-        },
-        "cacheable-request": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
-          "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
-          "dev": true,
+        "agent-base": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+          "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
           "requires": {
-            "clone-response": "^1.0.2",
-            "get-stream": "^5.1.0",
-            "http-cache-semantics": "^4.0.0",
-            "keyv": "^3.0.0",
-            "lowercase-keys": "^2.0.0",
-            "normalize-url": "^4.1.0",
-            "responselike": "^1.0.2"
-          },
-          "dependencies": {
-            "get-stream": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
-              "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
-              "dev": true,
-              "requires": {
-                "pump": "^3.0.0"
-              }
-            },
-            "lowercase-keys": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-              "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-              "dev": true
-            }
+            "debug": "^4.3.4"
           }
         },
-        "got": {
-          "version": "9.6.0",
-          "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
-          "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
-          "dev": true,
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "requires": {
-            "@sindresorhus/is": "^0.14.0",
-            "@szmarczak/http-timer": "^1.1.2",
-            "cacheable-request": "^6.0.0",
-            "decompress-response": "^3.3.0",
-            "duplexer3": "^0.1.4",
-            "get-stream": "^4.1.0",
-            "lowercase-keys": "^1.0.1",
-            "mimic-response": "^1.0.1",
-            "p-cancelable": "^1.0.0",
-            "to-readable-stream": "^1.0.0",
-            "url-parse-lax": "^3.0.0"
+            "ms": "2.1.2"
           }
         },
-        "http-cache-semantics": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-          "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
-          "dev": true
-        },
-        "normalize-url": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
-          "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
-          "dev": true
-        },
-        "p-cancelable": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
-          "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
-          "dev": true
-        },
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true
-        },
-        "pump": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-          "dev": true,
+        "http-proxy-agent": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+          "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
           "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
+            "agent-base": "^7.1.0",
+            "debug": "^4.3.4"
           }
         },
+        "https-proxy-agent": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
+          "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
+          "requires": {
+            "agent-base": "^7.0.2",
+            "debug": "4"
+          }
+        }
+      }
+    },
+    "pac-resolver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.0.tgz",
+      "integrity": "sha512-Fd9lT9vJbHYRACT8OhCbZBbxr6KRSawSovFpy8nDGshaK99S/EBhVIHp9+crhxrsZOuvLpgL1n23iyPg6Rl2hg==",
+      "requires": {
+        "degenerator": "^5.0.0",
+        "ip": "^1.1.8",
+        "netmask": "^2.0.2"
+      }
+    },
+    "package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "dev": true,
+      "requires": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "dependencies": {
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
-        },
-        "url-parse-lax": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-          "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-          "dev": true,
-          "requires": {
-            "prepend-http": "^2.0.0"
-          }
         }
       }
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -17258,8 +45690,21 @@
       "dev": true,
       "requires": {
         "callsites": "^3.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+          "dev": true
+        }
       }
     },
+    "parse-cache-control": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+      "integrity": "sha1-juqz5U+laSD+Fro493+iGqzC104="
+    },
     "parse-entities": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
@@ -17278,7 +45723,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
       "integrity": "sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=",
-      "dev": true,
       "requires": {
         "is-absolute": "^1.0.0",
         "map-cache": "^0.2.0",
@@ -17315,98 +45759,62 @@
       }
     },
     "parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
       "requires": {
-        "error-ex": "^1.2.0"
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
       }
     },
-    "parse-ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
-      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA=="
-    },
     "parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
     },
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
-      "dev": true
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
     },
     "parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=",
-      "dev": true
+      "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE="
     },
     "parse5": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
-      "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "parseqs": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
-      "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
-      "dev": true,
-      "requires": {
-        "better-assert": "~1.0.0"
-      }
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
     },
-    "parseuri": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
-      "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
-      "dev": true,
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
       "requires": {
-        "better-assert": "~1.0.0"
+        "parse5": "^6.0.1"
       }
     },
     "parseurl": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
-      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=",
-      "dev": true
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
-      "dev": true
-    },
-    "password-prompt": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/password-prompt/-/password-prompt-1.1.2.tgz",
-      "integrity": "sha512-bpuBhROdrhuN3E7G/koAju0WjVw9/uQOG5Co5mokNj0MiOSBVZS1JTwM4zl55hu0WFmIEFvO9cU9sJQiBIYeIA==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^3.1.0",
-        "cross-spawn": "^6.0.5"
-      }
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
     },
     "path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-      "requires": {
-        "pinkie-promise": "^2.0.0"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -17422,19 +45830,17 @@
     "path-key": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-root": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
       "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
-      "dev": true,
       "requires": {
         "path-root-regex": "^0.1.0"
       }
@@ -17442,8 +45848,25 @@
     "path-root-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
-      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
-      "dev": true
+      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0="
+    },
+    "path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "optional": true,
+      "requires": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
+          "integrity": "sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==",
+          "optional": true
+        }
+      }
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -17451,14 +45874,16 @@
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
     "path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true
     },
     "pend": {
       "version": "1.2.0",
@@ -17466,59 +45891,25 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
-    "percy-client": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/percy-client/-/percy-client-3.6.1.tgz",
-      "integrity": "sha512-J0/ohIYZF5O0PaU+Jn8AOmsx7FSgd8k94QjCCixuAo/hcuIZI4nkLGS0bXAQDPPTkbNWQKxhSlapPYkk9+gf4g==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.5.1",
-        "bluebird-retry": "^0.11.0",
-        "dotenv": "^8.1.0",
-        "es6-promise-pool": "^2.5.0",
-        "jssha": "^2.1.0",
-        "regenerator-runtime": "^0.13.1",
-        "request": "^2.87.0",
-        "request-promise": "^4.2.2",
-        "walk": "^2.3.14"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.3",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-          "dev": true
-        },
-        "request-promise": {
-          "version": "4.2.5",
-          "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.5.tgz",
-          "integrity": "sha512-ZgnepCykFdmpq86fKGwqntyTiUrHycALuGggpyCZwMvGaZWgxW6yagT0FHkgo5LzYvOaCNvxYwWYIjevSH1EDg==",
-          "dev": true,
-          "requires": {
-            "bluebird": "^3.5.0",
-            "request-promise-core": "1.1.3",
-            "stealthy-require": "^1.1.1",
-            "tough-cookie": "^2.3.3"
-          }
-        }
-      }
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
     "picomatch": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
-      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
-      "dev": true
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pidtree": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.0.tgz",
-      "integrity": "sha512-9CT4NFlDcosssyg8KVFltgokyKZIFjoBxw8CTGy+5F38Y1eQWrt8tRayiUOXE+zVKQnYu5BR8JjCtvK3BcnBhg==",
-      "dev": true
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA=="
     },
     "pify": {
       "version": "2.3.0",
@@ -17538,6 +45929,17 @@
         "pinkie": "^2.0.0"
       }
     },
+    "piscina": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/piscina/-/piscina-3.2.0.tgz",
+      "integrity": "sha512-yn/jMdHRw+q2ZJhFhyqsmANcbF6V2QwmD84c6xRau+QpQOmtrBCoRGdvTfeuFDYXB5W2m6MfLkjkvQa9lUSmIA==",
+      "requires": {
+        "eventemitter-asyncresource": "^1.0.0",
+        "hdr-histogram-js": "^2.0.1",
+        "hdr-histogram-percentiles-obj": "^3.0.0",
+        "nice-napi": "^1.0.2"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -17545,109 +45947,12 @@
       "dev": true,
       "requires": {
         "find-up": "^4.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        }
-      }
-    },
-    "pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
-      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
-      "dev": true,
-      "requires": {
-        "find-up": "^2.1.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "dev": true,
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "dev": true,
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "dev": true,
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
       }
     },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
       "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
       "requires": {
         "semver-compare": "^1.0.0"
       }
@@ -17656,7 +45961,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
       "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
-      "dev": true,
       "requires": {
         "ansi-colors": "^1.0.1",
         "arr-diff": "^4.0.0",
@@ -17668,20 +45972,36 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
           "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
-          "dev": true,
           "requires": {
             "ansi-wrap": "^0.1.0"
           }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
         }
       }
     },
     "plur": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
-      "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz",
+      "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=",
       "dev": true,
       "requires": {
-        "irregular-plurals": "^2.0.0"
+        "irregular-plurals": "^1.0.0"
       }
     },
     "pluralize": {
@@ -17690,101 +46010,115 @@
       "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=",
       "dev": true
     },
-    "pngquant-bin": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/pngquant-bin/-/pngquant-bin-5.0.2.tgz",
-      "integrity": "sha512-OLdT+4JZx5BqE1CFJkrvomYV0aSsv6x2Bba+aWaVc0PMfWlE+ZByNKYAdKeIqsM4uvW1HOSEHnf8KcOnykPNxA==",
-      "dev": true,
+    "portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
       "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.1",
-        "execa": "^0.10.0",
-        "logalot": "^2.0.0"
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
       },
       "dependencies": {
-        "execa": {
-          "version": "0.10.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
-          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
-          "dev": true,
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
           "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
+            "lodash": "^4.17.14"
           }
         },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "requires": {
+            "minimist": "^1.2.6"
+          }
         }
       }
     },
     "portscanner": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz",
-      "integrity": "sha1-6rtAnk3iSVD1oqUW01rnaTQ/u5Y=",
-      "dev": true,
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
+      "integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
       "requires": {
-        "async": "1.5.2",
+        "async": "^2.6.0",
         "is-number-like": "^1.0.3"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        }
       }
     },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
-      "dev": true
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "7.0.27",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-      "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-      "dev": true,
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "requires": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-calc": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
+      "requires": {
+        "postcss": "^7.0.27",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
           "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
         }
       }
     },
-    "postcss-calc": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz",
-      "integrity": "sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.27",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "postcss-colormin": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
       "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.0.0",
         "color": "^3.0.0",
@@ -17793,11 +46127,33 @@
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17805,17 +46161,38 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
       "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17823,53 +46200,165 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
       "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-discard-duplicates": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
       "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-discard-empty": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
       "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-discard-overridden": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
       "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-load-config": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
-      "dev": true,
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
       "requires": {
         "cosmiconfig": "^5.0.0",
         "import-cwd": "^2.0.0"
+      },
+      "dependencies": {
+        "import-cwd": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+          "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+          "requires": {
+            "import-from": "^2.1.0"
+          }
+        },
+        "import-from": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+          "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+          "requires": {
+            "resolve-from": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-merge-longhand": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
       "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
-      "dev": true,
       "requires": {
         "css-color-names": "0.0.4",
         "postcss": "^7.0.0",
@@ -17877,11 +46366,33 @@
         "stylehacks": "^4.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17889,7 +46400,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
       "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.0.0",
         "caniuse-api": "^3.0.0",
@@ -17899,16 +46409,38 @@
         "vendors": "^1.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-selector-parser": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
           "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
           "requires": {
             "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17916,17 +46448,38 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
       "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17934,7 +46487,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
       "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-arguments": "^4.0.0",
         "is-color-stop": "^1.0.0",
@@ -17942,11 +46494,33 @@
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17954,7 +46528,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
       "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
-      "dev": true,
       "requires": {
         "alphanum-sort": "^1.0.0",
         "browserslist": "^4.0.0",
@@ -17964,11 +46537,33 @@
         "uniqs": "^2.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -17976,7 +46571,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
       "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
-      "dev": true,
       "requires": {
         "alphanum-sort": "^1.0.0",
         "has": "^1.0.0",
@@ -17984,37 +46578,82 @@
         "postcss-selector-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-selector-parser": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
           "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
           "requires": {
             "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
     "postcss-modules": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-1.5.0.tgz",
-      "integrity": "sha512-KiAihzcV0TxTTNA5OXreyIXctuHOfR50WIhqBpc8pe0Q5dcs/Uap9EVlifOI9am7zGGdGOJQ6B1MPYKo2UxgOg==",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-2.0.0.tgz",
+      "integrity": "sha512-eqp+Bva+U2cwQO7dECJ8/V+X+uH1HduNeITB0CPPFAu6d/8LKQ32/j+p9rQ2YL1QytVcrNU0X+fBqgGmQIA1Rw==",
       "requires": {
         "css-modules-loader-core": "^1.1.0",
         "generic-names": "^2.0.1",
         "lodash.camelcase": "^4.3.0",
         "postcss": "^7.0.1",
         "string-hash": "^1.1.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-modules-extract-imports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
       "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
-      "dev": true,
       "requires": {
         "postcss": "^6.0.1"
       },
@@ -18023,7 +46662,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -18033,17 +46671,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -18051,7 +46679,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
       "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -18061,7 +46688,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -18071,17 +46697,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -18089,7 +46705,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
       "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -18099,7 +46714,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -18109,17 +46723,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -18127,7 +46731,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
       "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
-      "dev": true,
       "requires": {
         "icss-replace-symbols": "^1.1.0",
         "postcss": "^6.0.1"
@@ -18137,7 +46740,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -18147,17 +46749,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -18165,27 +46757,72 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
       "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-normalize-display-values": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
       "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-match": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18193,7 +46830,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
       "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-arguments": "^4.0.0",
         "has": "^1.0.0",
@@ -18201,11 +46837,33 @@
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18213,7 +46871,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
       "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-arguments": "^4.0.0",
         "cssnano-util-get-match": "^4.0.0",
@@ -18221,11 +46878,33 @@
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18233,18 +46912,39 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
       "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
-      "dev": true,
       "requires": {
         "has": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18252,18 +46952,39 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
       "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-match": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18271,18 +46992,39 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
       "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18290,7 +47032,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
       "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
-      "dev": true,
       "requires": {
         "is-absolute-url": "^2.0.0",
         "normalize-url": "^3.0.0",
@@ -18301,14 +47042,35 @@
         "normalize-url": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
-          "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
-          "dev": true
+          "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
         },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18316,17 +47078,38 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
       "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
-      "dev": true,
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18334,18 +47117,39 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
       "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-arguments": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18353,19 +47157,42 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
       "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.0.0",
         "caniuse-api": "^3.0.0",
         "has": "^1.0.0",
         "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-reduce-transforms": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
       "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
-      "dev": true,
       "requires": {
         "cssnano-util-get-match": "^4.0.0",
         "has": "^1.0.0",
@@ -18373,42 +47200,82 @@
         "postcss-value-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-      "dev": true,
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "requires": {
         "cssesc": "^3.0.0",
-        "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1"
+        "util-deprecate": "^1.0.2"
       }
     },
     "postcss-svgo": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
-      "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
+      "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
       "requires": {
-        "is-svg": "^3.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0",
         "svgo": "^1.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-value-parser": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -18416,49 +47283,68 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
       "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
-      "dev": true,
       "requires": {
         "alphanum-sort": "^1.0.0",
         "postcss": "^7.0.0",
         "uniqs": "^2.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-value-parser": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
-      "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
-      "dev": true
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
     "posthtml": {
-      "version": "0.11.6",
-      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz",
-      "integrity": "sha512-C2hrAPzmRdpuL3iH0TDdQ6XCc9M7Dcc3zEW5BLerY65G4tWWszwv6nG/ksi6ul5i2mx22ubdljgktXCtNkydkw==",
-      "dev": true,
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.15.2.tgz",
+      "integrity": "sha512-YugEJ5ze/0DLRIVBjCpDwANWL4pPj1kHJ/2llY8xuInr0nbkon3qTiMPe5LQa+cCwNjxS7nAZZTp+1M+6mT4Zg==",
       "requires": {
-        "posthtml-parser": "^0.4.1",
-        "posthtml-render": "^1.1.5"
+        "posthtml-parser": "^0.7.2",
+        "posthtml-render": "^1.3.1"
       }
     },
     "posthtml-parser": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.4.2.tgz",
-      "integrity": "sha512-BUIorsYJTvS9UhXxPTzupIztOMVNPa/HtAm9KHni9z6qEfiJ1bpOBL5DfUOL9XAc3XkLIEzBzpph+Zbm4AdRAg==",
-      "dev": true,
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.7.2.tgz",
+      "integrity": "sha512-LjEEG/3fNcWZtBfsOE3Gbyg1Li4CmsZRkH1UmbMR7nKdMXVMYI3B4/ZMiCpaq8aI1Aym4FRMMW9SAOLSwOnNsQ==",
       "requires": {
-        "htmlparser2": "^3.9.2"
+        "htmlparser2": "^6.0.0"
       }
     },
     "posthtml-render": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-1.1.5.tgz",
-      "integrity": "sha512-yvt54j0zCBHQVEFAuR+yHld8CZrCa/E1Z/OcFNCV1IEWTLVxT8O7nYnM4IIw1CD4r8kaRd3lc42+0lgCKgm87w==",
-      "dev": true
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-1.4.0.tgz",
+      "integrity": "sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw=="
     },
     "posthtml-urls": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
       "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
-      "dev": true,
       "requires": {
         "http-equiv-refresh": "^1.0.0",
         "list-to-array": "^1.1.0",
@@ -18467,15 +47353,15 @@
       }
     },
     "prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
     "prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
       "dev": true
     },
     "preserve": {
@@ -18485,10 +47371,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
-      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
-      "dev": true
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -18503,114 +47388,175 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
       "integrity": "sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=",
-      "dev": true,
       "requires": {
         "condense-newlines": "^0.2.1",
         "extend-shallow": "^2.0.1",
         "js-beautify": "^1.6.12"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
       }
     },
-    "pretty-bytes": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
-      "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
-      "dev": true
-    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
-    "pretty-ms": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.0.tgz",
-      "integrity": "sha512-J3aPWiC5e9ZeZFuSeBraGxSkGMOvulSWsxDByOcbD1Pr75YL3LSNIKIb52WXbCLE1sS5s4inBBbryjF4Y05Ceg==",
-      "requires": {
-        "parse-ms": "^2.1.0"
-      }
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
     },
     "prismjs": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
-      "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==",
-      "dev": true,
-      "requires": {
-        "clipboard": "^2.0.0"
-      }
-    },
-    "private": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
-      "dev": true
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
+      "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw=="
     },
     "process-nextick-args": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
     },
+    "promise-breaker": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/promise-breaker/-/promise-breaker-6.0.0.tgz",
+      "integrity": "sha512-BthzO9yTPswGf7etOBiHCVuugs2N01/Q/94dIPls48z2zCmrnDptUUZzfIb+41xq0MnYZ/BzmOd6ikDR4ibNZA=="
+    },
     "promise-each": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
       "integrity": "sha1-M1MXTv8mlEgQN+BOAfd6oPttG2A=",
-      "dev": true,
       "requires": {
         "any-promise": "^0.1.0"
       }
     },
+    "promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "optional": true,
+      "requires": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+          "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+          "optional": true
+        }
+      }
+    },
     "promise.series": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
-      "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=",
-      "dev": true
+      "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70="
     },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
-      "dev": true
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+    },
+    "proto3-json-serializer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-0.1.3.tgz",
+      "integrity": "sha512-X0DAtxCBsy1NDn84huVFGOFgBslT2gBmM+85nY6/5SOAaCon1jzVNdvi74foIyFvs5CjtSbQsepsM5TsyNhqQw=="
+    },
+    "protobufjs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.2.tgz",
+      "integrity": "sha512-4BQJoPooKJl2G9j3XftkIXjoC9C0Av2NOrWmbLWT1vH32GcSUHjM0Arra6UfTsVyfMAuFzaLucXn1sadxJydAw==",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.1",
+        "@types/node": ">=13.7.0",
+        "long": "^4.0.0"
+      }
     },
     "proxy-addr": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "requires": {
-        "forwarded": "~0.1.2",
+        "forwarded": "0.2.0",
         "ipaddr.js": "1.9.1"
       }
     },
+    "proxy-agent": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.3.1.tgz",
+      "integrity": "sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==",
+      "requires": {
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.0.1",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.2"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+          "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+          "requires": {
+            "debug": "^4.3.4"
+          }
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "http-proxy-agent": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+          "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+          "requires": {
+            "agent-base": "^7.1.0",
+            "debug": "^4.3.4"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
+          "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
+          "requires": {
+            "agent-base": "^7.0.2",
+            "debug": "4"
+          }
+        },
+        "lru-cache": {
+          "version": "7.18.3",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+          "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="
+        }
+      }
+    },
     "proxy-from-env": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
-      "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
-      "dev": true
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "proxyquire": {
       "version": "2.1.3",
@@ -18621,24 +47567,17 @@
         "fill-keys": "^1.0.2",
         "module-not-found-error": "^1.0.1",
         "resolve": "^1.11.1"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.16.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",
-          "integrity": "sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        }
       }
     },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "ps-list": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ps-list/-/ps-list-8.1.0.tgz",
+      "integrity": "sha512-NoGBqJe7Ou3kfQxEvDzDyKGAyEgwIuD3YrfXinjcCmBRv0hTld0Xb71hrXvtsNPj7HSFATfemvzB8PPJtq6Yag=="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -18646,195 +47585,126 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
-      "integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
     "pug": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.4.tgz",
-      "integrity": "sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==",
-      "dev": true,
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
+      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
       "requires": {
-        "pug-code-gen": "^2.0.2",
-        "pug-filters": "^3.1.1",
-        "pug-lexer": "^4.1.0",
-        "pug-linker": "^3.0.6",
-        "pug-load": "^2.0.12",
-        "pug-parser": "^5.0.1",
-        "pug-runtime": "^2.0.5",
-        "pug-strip-comments": "^1.0.4"
+        "pug-code-gen": "^3.0.2",
+        "pug-filters": "^4.0.0",
+        "pug-lexer": "^5.0.1",
+        "pug-linker": "^4.0.0",
+        "pug-load": "^3.0.0",
+        "pug-parser": "^6.0.0",
+        "pug-runtime": "^3.0.1",
+        "pug-strip-comments": "^2.0.0"
       }
     },
     "pug-attrs": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.4.tgz",
-      "integrity": "sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
       "requires": {
-        "constantinople": "^3.0.1",
-        "js-stringify": "^1.0.1",
-        "pug-runtime": "^2.0.5"
+        "constantinople": "^4.0.1",
+        "js-stringify": "^1.0.2",
+        "pug-runtime": "^3.0.0"
       }
     },
     "pug-code-gen": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.2.tgz",
-      "integrity": "sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==",
-      "dev": true,
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
+      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
       "requires": {
-        "constantinople": "^3.1.2",
+        "constantinople": "^4.0.1",
         "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.1",
-        "pug-attrs": "^2.0.4",
-        "pug-error": "^1.3.3",
-        "pug-runtime": "^2.0.5",
-        "void-elements": "^2.0.1",
-        "with": "^5.0.0"
+        "js-stringify": "^1.0.2",
+        "pug-attrs": "^3.0.0",
+        "pug-error": "^2.0.0",
+        "pug-runtime": "^3.0.0",
+        "void-elements": "^3.1.0",
+        "with": "^7.0.0"
       }
     },
     "pug-error": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.3.tgz",
-      "integrity": "sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
     },
     "pug-filters": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.1.tgz",
-      "integrity": "sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
       "requires": {
-        "clean-css": "^4.1.11",
-        "constantinople": "^3.0.1",
+        "constantinople": "^4.0.1",
         "jstransformer": "1.0.0",
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8",
-        "resolve": "^1.1.6",
-        "uglify-js": "^2.6.1"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-          "dev": true
-        },
-        "cliui": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
-          "dev": true,
-          "requires": {
-            "center-align": "^0.1.1",
-            "right-align": "^0.1.1",
-            "wordwrap": "0.0.2"
-          }
-        },
-        "uglify-js": {
-          "version": "2.8.29",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
-          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
-          "dev": true,
-          "requires": {
-            "source-map": "~0.5.1",
-            "uglify-to-browserify": "~1.0.0",
-            "yargs": "~3.10.0"
-          }
-        },
-        "window-size": {
-          "version": "0.1.0",
-          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-          "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-          "dev": true
-        },
-        "wordwrap": {
-          "version": "0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "3.10.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-          "dev": true,
-          "requires": {
-            "camelcase": "^1.0.2",
-            "cliui": "^2.1.0",
-            "decamelize": "^1.0.0",
-            "window-size": "0.1.0"
-          }
-        }
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0",
+        "resolve": "^1.15.1"
       }
     },
     "pug-lexer": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.1.0.tgz",
-      "integrity": "sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==",
-      "dev": true,
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
       "requires": {
-        "character-parser": "^2.1.1",
-        "is-expression": "^3.0.0",
-        "pug-error": "^1.3.3"
+        "character-parser": "^2.2.0",
+        "is-expression": "^4.0.0",
+        "pug-error": "^2.0.0"
       }
     },
     "pug-linker": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.6.tgz",
-      "integrity": "sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
       "requires": {
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8"
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0"
       }
     },
     "pug-load": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.12.tgz",
-      "integrity": "sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
       "requires": {
-        "object-assign": "^4.1.0",
-        "pug-walk": "^1.1.8"
+        "object-assign": "^4.1.1",
+        "pug-walk": "^2.0.0"
       }
     },
     "pug-parser": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.1.tgz",
-      "integrity": "sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==",
-      "dev": true,
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
       "requires": {
-        "pug-error": "^1.3.3",
-        "token-stream": "0.0.1"
+        "pug-error": "^2.0.0",
+        "token-stream": "1.0.0"
       }
     },
     "pug-runtime": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.5.tgz",
-      "integrity": "sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==",
-      "dev": true
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
     },
     "pug-strip-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz",
-      "integrity": "sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
       "requires": {
-        "pug-error": "^1.3.3"
+        "pug-error": "^2.0.0"
       }
     },
     "pug-walk": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.8.tgz",
-      "integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
     },
     "pump": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
       "requires": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -18844,11 +47714,59 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
       "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
-      "dev": true,
       "requires": {
         "duplexify": "^3.6.0",
         "inherits": "^2.0.3",
         "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "duplexify": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+          "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+          "requires": {
+            "end-of-stream": "^1.0.0",
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.0",
+            "stream-shift": "^1.0.0"
+          }
+        },
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "punycode": {
@@ -18857,60 +47775,73 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "pupa": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.0.1.tgz",
-      "integrity": "sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==",
-      "dev": true,
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
       "requires": {
         "escape-goat": "^2.0.0"
       }
     },
     "puppeteer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-2.1.1.tgz",
-      "integrity": "sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==",
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-12.0.1.tgz",
+      "integrity": "sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==",
       "dev": true,
       "requires": {
-        "@types/mime-types": "^2.1.0",
-        "debug": "^4.1.0",
-        "extract-zip": "^1.6.6",
-        "https-proxy-agent": "^4.0.0",
-        "mime": "^2.0.3",
-        "mime-types": "^2.1.25",
-        "progress": "^2.0.1",
-        "proxy-from-env": "^1.0.0",
-        "rimraf": "^2.6.1",
-        "ws": "^6.1.0"
+        "debug": "4.3.2",
+        "devtools-protocol": "0.0.937139",
+        "extract-zip": "2.0.1",
+        "https-proxy-agent": "5.0.0",
+        "node-fetch": "2.6.5",
+        "pkg-dir": "4.2.0",
+        "progress": "2.0.3",
+        "proxy-from-env": "1.1.0",
+        "rimraf": "3.0.2",
+        "tar-fs": "2.1.1",
+        "unbzip2-stream": "1.4.3",
+        "ws": "8.2.3"
       },
       "dependencies": {
-        "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
-          "dev": true
-        },
-        "mime-db": {
-          "version": "1.43.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-          "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.26",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-          "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
+        "node-fetch": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.5.tgz",
+          "integrity": "sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==",
           "dev": true,
           "requires": {
-            "mime-db": "1.43.0"
+            "whatwg-url": "^5.0.0"
           }
+        },
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
+    "purgecss": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+      "requires": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
         }
       }
     },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-      "dev": true
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
     "qjobs": {
       "version": "1.2.0",
@@ -18919,31 +47850,32 @@
       "dev": true
     },
     "qs": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
-      "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=",
-      "dev": true
-    },
-    "query-string": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
-      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-      "dev": true,
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "requires": {
-        "decode-uri-component": "^0.2.0",
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
+        "side-channel": "^1.0.4"
       }
     },
+    "querystring": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+    },
     "queue": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.1.tgz",
-      "integrity": "sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
       "dev": true,
       "requires": {
         "inherits": "~2.0.3"
       }
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
@@ -18969,21 +47901,51 @@
         }
       }
     },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "range-parser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
-      "dev": true
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raven": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/raven/-/raven-2.6.4.tgz",
+      "integrity": "sha512-6PQdfC4+DQSFncowthLf+B6Hr0JpPsFBgTVYTAOq7tCmx/kR4SXbeawtPch20+3QfUcQDoJBLjWW1ybvZ4kXTw==",
+      "requires": {
+        "cookie": "0.3.1",
+        "md5": "^2.2.1",
+        "stack-trace": "0.0.10",
+        "timed-out": "4.0.1",
+        "uuid": "3.3.2"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        },
+        "uuid": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+          "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+        }
+      }
     },
     "raw-body": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
-      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
-      "dev": true,
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "requires": {
-        "bytes": "3.0.0",
-        "http-errors": "1.6.3",
-        "iconv-lite": "0.4.23",
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       }
     },
@@ -18991,88 +47953,126 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
       "requires": {
         "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
         "minimist": "^1.2.0",
         "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+        }
       }
     },
-    "read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+    "re2": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/re2/-/re2-1.20.3.tgz",
+      "integrity": "sha512-g5j4YjygwGEccP9SCuDI90uPlgALLEYLotfL0K+kqL3XKB4ht7Nm1JuXfOTG96c7JozpvCUxTz1T7oTNwwMI6w==",
+      "optional": true,
       "requires": {
-        "load-json-file": "^1.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^1.0.0"
+        "install-artifact-from-github": "^1.3.3",
+        "nan": "^2.17.0",
+        "node-gyp": "^9.4.0"
       }
     },
-    "read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
       "requires": {
-        "find-up": "^1.0.0",
-        "read-pkg": "^1.0.0"
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
       }
     },
-    "readable-stream": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
       "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
       },
       "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
         }
       }
     },
-    "readdirp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "dev": true,
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
       "requires": {
-        "graceful-fs": "^4.1.11",
-        "micromatch": "^3.1.10",
-        "readable-stream": "^2.0.2"
+        "minimatch": "^5.1.0"
       },
       "dependencies": {
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
           "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
           }
         }
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "readline2": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
@@ -19084,6 +48084,15 @@
         "mute-stream": "0.0.5"
       },
       "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
         "mute-stream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
@@ -19096,19 +48105,15 @@
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
       "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
-      "dev": true,
       "requires": {
         "resolve": "^1.1.6"
       }
     },
     "recursive-copy": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.10.tgz",
-      "integrity": "sha512-S9J9XJUnfZ2NUS3lK6lx6HWLl2nWui+f7AKuu+qoFs4ikEPYgZ3qKk1T6tmBnr7PzhtKnawE+6TREy9XQKmxCA==",
-      "dev": true,
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
+      "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
       "requires": {
-        "del": "^2.2.0",
-        "emitter-mixin": "0.0.3",
         "errno": "^0.1.2",
         "graceful-fs": "^4.1.4",
         "junk": "^1.0.1",
@@ -19116,49 +48121,44 @@
         "mkdirp": "^0.5.1",
         "pify": "^2.3.0",
         "promise": "^7.0.1",
+        "rimraf": "^2.7.1",
         "slash": "^1.0.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
       "requires": {
-        "indent-string": "^2.1.0",
-        "strip-indent": "^1.0.1"
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
       }
     },
     "redeyed": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
-      "integrity": "sha1-iYS1gV2ZyyIEacme7v/jiRPmzAs=",
-      "dev": true,
+      "integrity": "sha512-FNpGGo1DycYAdnrKFxCMmKYgo/mILAqtRYbkdQD8Ep/Hk2PQ5+aEAEx+IU713RTDmuBaH0c8P5ZozurNu5ObRQ==",
       "requires": {
         "esprima": "~4.0.0"
       }
     },
-    "regenerate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
-      "dev": true
-    },
     "regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
       "dev": true
     },
-    "regenerator-transform": {
-      "version": "0.14.4",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.4.tgz",
-      "integrity": "sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.8.4",
-        "private": "^0.1.8"
-      }
-    },
     "regex-cache": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
@@ -19172,53 +48172,40 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
       "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^3.0.2",
         "safe-regex": "^1.1.0"
-      }
-    },
-    "regexpp": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
-      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
-      "dev": true
-    },
-    "regexpu-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
-      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
-      "dev": true,
-      "requires": {
-        "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.2.0",
-        "regjsgen": "^0.5.1",
-        "regjsparser": "^0.6.4",
-        "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.2.0"
       },
       "dependencies": {
-        "regenerate-unicode-properties": {
-          "version": "8.2.0",
-          "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-          "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
-          "dev": true,
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
           "requires": {
-            "regenerate": "^1.4.0"
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
           }
         },
-        "unicode-match-property-value-ecmascript": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-          "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
-          "dev": true
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
         }
       }
     },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
     "registry-auth-token": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.1.1.tgz",
-      "integrity": "sha512-9bKS7nTl9+/A1s7tnPeGrUpRcVY+LUh7bfFgzpndALdPfXQBfQV77rQVtqgUV3ti4vc/Ik81Ex8UJDWDQ12zQA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
       "dev": true,
       "requires": {
         "rc": "^1.2.8"
@@ -19228,30 +48215,14 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
       "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
-      "dev": true,
       "requires": {
         "rc": "^1.2.8"
       }
     },
-    "regjsgen": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
-      "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==",
-      "dev": true
-    },
-    "regjsparser": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
-      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
-      "dev": true,
-      "requires": {
-        "jsesc": "~0.5.0"
-      }
-    },
     "remark": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/remark/-/remark-11.0.1.tgz",
-      "integrity": "sha512-Fl2AvN+yU6sOBAjUz3xNC5iEvLkXV8PZicLOOLifjU8uKGusNvhHfGRCfETsqyvRHZ24JXqEyDY4hRLhoUd30A==",
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-11.0.2.tgz",
+      "integrity": "sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==",
       "dev": true,
       "requires": {
         "remark-parse": "^7.0.0",
@@ -19260,9 +48231,9 @@
       }
     },
     "remark-cli": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/remark-cli/-/remark-cli-7.0.0.tgz",
-      "integrity": "sha512-gYomWviFnZsiRimG+Jdb4LQ9c8uSOcGmPTmzlvxImt0gvzabqlp1kaqndxTx4kYLsWGqwhQRO+M9iyqHDkoDlA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/remark-cli/-/remark-cli-7.0.1.tgz",
+      "integrity": "sha512-CUjBLLSbEay0mNwOO+pptnLIoS8UB6cHlhZVpTRKbtbIcw6YEzEfD7jGjW1HCA8lZK87IfY3/DuWE6DlXu+hfg==",
       "dev": true,
       "requires": {
         "markdown-extensions": "^1.1.0",
@@ -19271,9 +48242,9 @@
       }
     },
     "remark-frontmatter": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-1.3.2.tgz",
-      "integrity": "sha512-2eayxITZ8rezsXdgcXnYB3iLivohm2V/ZT4Ne8uhua6A4pk6GdLE2ZzJnbnINtD1HRLaTdB7RwF9sgUbMptJZA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-1.3.3.tgz",
+      "integrity": "sha512-fM5eZPBvu2pVNoq3ZPW22q+5Ativ1oLozq2qYt9I2oNyxiUd/tDl0iLLntEVAegpZIslPWg1brhcP1VsaSVUag==",
       "dev": true,
       "requires": {
         "fault": "^1.0.1",
@@ -19281,9 +48252,9 @@
       }
     },
     "remark-lint": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/remark-lint/-/remark-lint-6.0.5.tgz",
-      "integrity": "sha512-o1I3ddm+KNsTxk60wWGI+p2yU1jB1gcm8jo2Sy6VhJ4ab2TrQIp1oQbp5xeLoFXYSh/NAqCpKjHkCM/BYpkFdQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/remark-lint/-/remark-lint-6.0.6.tgz",
+      "integrity": "sha512-JBY6zz5fYQFN724Vq6VeiHwhyjVIlrww/dE1+hWGcDyUuz7YNCqwZKwBdQGDvslICkzHw/wEExNEb8D4PNiLlA==",
       "dev": true,
       "requires": {
         "remark-message-control": "^4.0.0"
@@ -19305,6 +48276,12 @@
         "unist-util-visit": "^1.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
         "anymatch": {
           "version": "1.3.2",
           "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
@@ -19336,12 +48313,33 @@
           "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
           "dev": true
         },
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
         "array-unique": {
           "version": "0.2.1",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
           "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
           "dev": true
         },
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+          "dev": true
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true
+        },
         "braces": {
           "version": "1.8.5",
           "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
@@ -19389,6 +48387,12 @@
             "readdirp": "^2.0.0"
           }
         },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -19398,12 +48402,6 @@
             "ms": "2.0.0"
           }
         },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
         "expand-brackets": {
           "version": "0.1.5",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
@@ -19413,6 +48411,27 @@
             "is-posix-bracket": "^0.1.0"
           }
         },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "dev": true,
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
+          }
+        },
         "extglob": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
@@ -19422,6 +48441,49 @@
             "is-extglob": "^1.0.0"
           }
         },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "for-own": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+          "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+          "dev": true,
+          "requires": {
+            "for-in": "^1.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
         "glob-parent": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
@@ -19460,11 +48522,67 @@
             }
           }
         },
-        "irregular-plurals": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.4.0.tgz",
-          "integrity": "sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y=",
-          "dev": true
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
         },
         "is-extglob": {
           "version": "1.0.0",
@@ -19472,6 +48590,15 @@
           "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
           "dev": true
         },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
         "is-glob": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
@@ -19481,6 +48608,15 @@
             "is-extglob": "^1.0.0"
           }
         },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
         "isobject": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-1.0.2.tgz",
@@ -19538,6 +48674,12 @@
             "regex-cache": "^0.4.2"
           }
         },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
         "normalize-path": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@@ -19559,13 +48701,234 @@
             "isobject": "^1.0.0"
           }
         },
-        "plur": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz",
-          "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=",
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
           "dev": true,
           "requires": {
-            "irregular-plurals": "^1.0.0"
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          },
+          "dependencies": {
+            "arr-diff": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+              "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+              "dev": true
+            },
+            "array-unique": {
+              "version": "0.3.2",
+              "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+              "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+              "dev": true
+            },
+            "braces": {
+              "version": "2.3.2",
+              "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+              "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+              "dev": true,
+              "requires": {
+                "arr-flatten": "^1.1.0",
+                "array-unique": "^0.3.2",
+                "extend-shallow": "^2.0.1",
+                "fill-range": "^4.0.0",
+                "isobject": "^3.0.1",
+                "repeat-element": "^1.1.2",
+                "snapdragon": "^0.8.1",
+                "snapdragon-node": "^2.0.1",
+                "split-string": "^3.0.2",
+                "to-regex": "^3.0.1"
+              },
+              "dependencies": {
+                "extend-shallow": {
+                  "version": "2.0.1",
+                  "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+                  "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                  "dev": true,
+                  "requires": {
+                    "is-extendable": "^0.1.0"
+                  }
+                }
+              }
+            },
+            "expand-brackets": {
+              "version": "2.1.4",
+              "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+              "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+              "dev": true,
+              "requires": {
+                "debug": "^2.3.3",
+                "define-property": "^0.2.5",
+                "extend-shallow": "^2.0.1",
+                "posix-character-classes": "^0.1.0",
+                "regex-not": "^1.0.0",
+                "snapdragon": "^0.8.1",
+                "to-regex": "^3.0.1"
+              },
+              "dependencies": {
+                "define-property": {
+                  "version": "0.2.5",
+                  "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+                  "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                  "dev": true,
+                  "requires": {
+                    "is-descriptor": "^0.1.0"
+                  }
+                },
+                "extend-shallow": {
+                  "version": "2.0.1",
+                  "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+                  "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                  "dev": true,
+                  "requires": {
+                    "is-extendable": "^0.1.0"
+                  }
+                },
+                "is-descriptor": {
+                  "version": "0.1.6",
+                  "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+                  "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+                  "dev": true,
+                  "requires": {
+                    "is-accessor-descriptor": "^0.1.6",
+                    "is-data-descriptor": "^0.1.4",
+                    "kind-of": "^5.0.0"
+                  }
+                },
+                "kind-of": {
+                  "version": "5.1.0",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+                  "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+                  "dev": true
+                }
+              }
+            },
+            "extglob": {
+              "version": "2.0.4",
+              "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+              "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+              "dev": true,
+              "requires": {
+                "array-unique": "^0.3.2",
+                "define-property": "^1.0.0",
+                "expand-brackets": "^2.1.4",
+                "extend-shallow": "^2.0.1",
+                "fragment-cache": "^0.2.1",
+                "regex-not": "^1.0.0",
+                "snapdragon": "^0.8.1",
+                "to-regex": "^3.0.1"
+              },
+              "dependencies": {
+                "define-property": {
+                  "version": "1.0.0",
+                  "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+                  "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+                  "dev": true,
+                  "requires": {
+                    "is-descriptor": "^1.0.0"
+                  }
+                },
+                "extend-shallow": {
+                  "version": "2.0.1",
+                  "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+                  "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                  "dev": true,
+                  "requires": {
+                    "is-extendable": "^0.1.0"
+                  }
+                }
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "dev": true,
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "dev": true,
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "isobject": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+              "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+              "dev": true
+            },
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            },
+            "micromatch": {
+              "version": "3.1.10",
+              "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+              "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+              "dev": true,
+              "requires": {
+                "arr-diff": "^4.0.0",
+                "array-unique": "^0.3.2",
+                "braces": "^2.3.1",
+                "define-property": "^2.0.2",
+                "extend-shallow": "^3.0.2",
+                "extglob": "^2.0.4",
+                "fragment-cache": "^0.2.1",
+                "kind-of": "^6.0.2",
+                "nanomatch": "^1.2.9",
+                "object.pick": "^1.3.0",
+                "regex-not": "^1.0.0",
+                "snapdragon": "^0.8.1",
+                "to-regex": "^3.0.2"
+              }
+            }
           }
         },
         "remark": {
@@ -19638,6 +49001,43 @@
             "vfile-location": "^2.0.0"
           }
         },
+        "request-promise": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-3.0.0.tgz",
+          "integrity": "sha1-vh7bJvQcSc0dVlbGdT1oQqEkn0Y=",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.3",
+            "lodash": "^4.6.1",
+            "request": "^2.34"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
         "stringify-entities": {
           "version": "1.3.2",
           "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz",
@@ -19650,6 +49050,22 @@
             "is-hexadecimal": "^1.0.0"
           }
         },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        },
         "to-vfile": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-1.0.0.tgz",
@@ -19709,9 +49125,9 @@
       }
     },
     "remark-lint-blockquote-indentation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-blockquote-indentation/-/remark-lint-blockquote-indentation-1.0.3.tgz",
-      "integrity": "sha512-qK4C1l2VmeOVWEAkDYP0CaDtSFoaEBEo5l4oyz1kTkY7YB0Jh7llW2KjuhJz5IzMLmloKJzIyGwlu/odcwaHpg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-blockquote-indentation/-/remark-lint-blockquote-indentation-1.0.4.tgz",
+      "integrity": "sha512-ExcDP7lufshEBNkVddSHa+Bz/97PtFstIniQ8ZF2TahHPmpx92z3mkI/nXL2Qt5d3B09eTVvh4Pvhgp6x2470g==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -19722,187 +49138,132 @@
         "unist-util-visit": "^1.1.1"
       },
       "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
+        "irregular-plurals": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+          "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
           "dev": true
+        },
+        "plur": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+          "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+          "dev": true,
+          "requires": {
+            "irregular-plurals": "^2.0.0"
+          }
         }
       }
     },
     "remark-lint-code-block-style": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-code-block-style/-/remark-lint-code-block-style-1.0.3.tgz",
-      "integrity": "sha512-DL+rudnd9ILP5YXm74tLpMzfWZLqziX7NwIwUhqRefaOyWwxgPPy7hbT59FJqcFc6E/zvDz+Oq4nR1BSV5kEdw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-code-block-style/-/remark-lint-code-block-style-1.0.4.tgz",
+      "integrity": "sha512-Wq5F94nkaWTx8W/9C/ydG+DhVWLirBrWb0xnoMQ0cHnizAd3BWw8g0x5L7yglMYSUSVLWY0jfMHgOe9UW3JfTw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-definition-case": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-definition-case/-/remark-lint-definition-case-1.0.4.tgz",
-      "integrity": "sha512-ebl8vYOab9iy1Mr29Wo/9CmqcYGRjCfBievIZts08efrxIElWz+jB8/n7C17fh8k0djiiS/Of6W+bfRD+kMXLA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-definition-case/-/remark-lint-definition-case-1.0.5.tgz",
+      "integrity": "sha512-iirq74fKhJZsFw7x4FJuLVRkXclntutG1YKajfLaE3Gm14YlJWBEoabNTk+ENR4QXoB9rTdEqn3Cc3ImO8qciQ==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.4.0"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-definition-spacing": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-definition-spacing/-/remark-lint-definition-spacing-1.0.4.tgz",
-      "integrity": "sha512-UderghITmru72OXB5ErCFhVsY7up2wK/m1bUD3E2dm/TFn73/7WpykENt5UirCDT/aeyoHYl8QXUVL20rAc3XQ==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-definition-spacing/-/remark-lint-definition-spacing-1.0.5.tgz",
+      "integrity": "sha512-ss8OQmK4c/1amEAJpDjkFiByLyXpsYFNzmk6rEZQkxZZd+DVHI0oF+CzSeMVHu48rF2qHOkKhVghqrCM0vleAA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.4.0"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-emphasis-marker": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-emphasis-marker/-/remark-lint-emphasis-marker-1.0.3.tgz",
-      "integrity": "sha512-ea2tEVyhZvYxwj6AHsW2qzgEDLljcnzq5taZ3FJFL0KMZYZHfWaIU90H43jrW4seGEtmaP1bmoqJaTavJ2x5Jw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-emphasis-marker/-/remark-lint-emphasis-marker-1.0.4.tgz",
+      "integrity": "sha512-TdYISSw7Ib6EJDApDj9zcZNDCJEaEoQIrYS3+QH2TQxoDx96B0t1bbErRM5L/hx1UWPBpeFLKpgIWL163eMmYA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-fenced-code-flag": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-flag/-/remark-lint-fenced-code-flag-1.0.3.tgz",
-      "integrity": "sha512-X8Oi6dhfqV9NI3cVg29myvT/NATDHVgRGCpnNz76w7VXwzhBvQtJr1MxZzuPxfWLox+ARCXF2rY9n9hbYFHYTg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-flag/-/remark-lint-fenced-code-flag-1.0.4.tgz",
+      "integrity": "sha512-bkQvlEYco6ZzdzvGPrY7DBsqSq/2mZEmdhpn0KdMEZ9kcKJP4unQdVQys04SKnf9QISqQ446VnQj5Q4E3HMSkQ==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-fenced-code-marker": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-marker/-/remark-lint-fenced-code-marker-1.0.3.tgz",
-      "integrity": "sha512-JKnojSQ8JkwpIpbNm6wtKEfx8iiv8QIwNHFM06iTCHExMhXa4pJ3wb5M5f0wsWNHtoND3lrw6AcVPoZxEPnflg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-fenced-code-marker/-/remark-lint-fenced-code-marker-1.0.4.tgz",
+      "integrity": "sha512-aJF4ISIEvK3NX+C2rN93QoS/32SSiytQKRSeGa+HwsAn3sTwqmy2IoAwbFeZIZA2vqKcVB4h1b9yKamSlfX30Q==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-file-extension": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-file-extension/-/remark-lint-file-extension-1.0.3.tgz",
-      "integrity": "sha512-P5gzsxKmuAVPN7Kq1W0f8Ss0cFKfu+OlezYJWXf+5qOa+9Y5GqHEUOobPnsmNFZrVMiM7JoqJN2C9ZjrUx3N6Q==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-file-extension/-/remark-lint-file-extension-1.0.5.tgz",
+      "integrity": "sha512-oVQdf5vEomwHkfQ7R/mgmsWW2H/t9kSvnrxtVoNOHr+qnOEafKKDn+AFhioN2kqtjCZBAjSSrePs6xGKmXKDTw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-final-definition": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-final-definition/-/remark-lint-final-definition-1.0.3.tgz",
-      "integrity": "sha512-QhbBYy99enfQDeUTElioCHrhgg+SgjMNRlru7/JlOguOufP6wn7AXgn2EVTrLZRoByY0VsNS2jCayXxUTzQ8KA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-final-definition/-/remark-lint-final-definition-1.0.4.tgz",
+      "integrity": "sha512-y9aDZPhqWcI7AtrJtL69HE6MoWMqDqLQUyWMadzAYUYb9/m4ciLdygJ4cWVpEN3n4mkBepHIsWzASaKHHBDJOQ==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-hard-break-spaces": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-hard-break-spaces/-/remark-lint-hard-break-spaces-1.0.4.tgz",
-      "integrity": "sha512-YM82UpgliZCZhGNmFxEe7ArfhqR5CplFf2bc0k0+8w3rKWKx7EJcGMar2NK410tIi40gGeWtH/pIEypPJFCCiA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-hard-break-spaces/-/remark-lint-hard-break-spaces-1.0.5.tgz",
+      "integrity": "sha512-Rss7ujNtxipO/hasWYc0QdiO8D5VyliSwj3zAZ8GeDn0ix2KH+pY4/AJC7i9IGcVVbUGvvXLpJB3Pp1VeY7oKw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-heading-increment": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-heading-increment/-/remark-lint-heading-increment-1.0.3.tgz",
-      "integrity": "sha512-/KL4/7D2pNxP07KKgktjcIUS+ga8pYI2k9Q/V91pMfyfSC+RYuCGOLFVJSKV0Affr/4Eqnfhw+gJ9X2HAanNuw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-heading-increment/-/remark-lint-heading-increment-1.0.4.tgz",
+      "integrity": "sha512-3PJj32G7W1OUyRVSZiZbSOxyFAsw/mNssIosS9G8+6Lq2yeTSMDoCJy0+LC+s00nORFcbzeMedMK5U/eLbDe4w==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -19911,9 +49272,9 @@
       }
     },
     "remark-lint-heading-style": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-heading-style/-/remark-lint-heading-style-1.0.3.tgz",
-      "integrity": "sha512-ZUhMav0HHUxo5gzLqxQsOf2ZpP/I3m6EEK8q25/kqpCYnwm1uRJ5CQ40PDQx46pmKtVibIMzDmraYovxNG3ovw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-heading-style/-/remark-lint-heading-style-1.0.4.tgz",
+      "integrity": "sha512-ASssbw0vj9urTMxDJGpOn4K7d9MgPQPJGaCD+7v7je42krofvqC4CxpYvO/fOAkRZcttE91VfFHxkaPjiBtQLw==",
       "dev": true,
       "requires": {
         "mdast-util-heading-style": "^1.0.2",
@@ -19923,9 +49284,9 @@
       }
     },
     "remark-lint-link-title-style": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-link-title-style/-/remark-lint-link-title-style-1.0.4.tgz",
-      "integrity": "sha512-61/uH3zDTiozLJqgxp6rHGnVKTChC3UjL3Q0KQDBpprEOL4qLYjTn4fFKscVz776d0uUX6jczrW+GT4AFVOUgg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-link-title-style/-/remark-lint-link-title-style-1.0.5.tgz",
+      "integrity": "sha512-Nu0cKj220q/PmUzELhYRUR2uxXabWuFJq9sApkgsc59uh+NKDtCEdpxkx7Zwvn6kUEwpuQVimeRfdesiKxX52g==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -19933,20 +49294,12 @@
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1",
         "vfile-location": "^2.0.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-list-item-content-indent": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-list-item-content-indent/-/remark-lint-list-item-content-indent-1.0.3.tgz",
-      "integrity": "sha512-ZSIGJG2/6jd1xj/xEoDlkcJBf2Ksw8U6vIGJO0IFIA3BLCbJm2EMWJxto2cfzRvXoACmAaxTJMqW8qatPExa4w==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-content-indent/-/remark-lint-list-item-content-indent-1.0.4.tgz",
+      "integrity": "sha512-zfEeAayZjEKkPr07fnhkGLENxOhnm0WZJTj6UBIXhtGu7rX23WNKSZaiou8iUoHxcO6ySCvIUJAEmq/XN1FxkQ==",
       "dev": true,
       "requires": {
         "plur": "^3.0.0",
@@ -19956,18 +49309,27 @@
         "unist-util-visit": "^1.1.1"
       },
       "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
+        "irregular-plurals": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+          "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
           "dev": true
+        },
+        "plur": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+          "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+          "dev": true,
+          "requires": {
+            "irregular-plurals": "^2.0.0"
+          }
         }
       }
     },
     "remark-lint-list-item-indent": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-list-item-indent/-/remark-lint-list-item-indent-1.0.4.tgz",
-      "integrity": "sha512-Sv0gVH6qP1/nFpbJuyyguB9sAD2o42StD2WbEZeUcEexXwRO4u/YaX0Pm5pMtCiEHyN+qyL6ShKBQMtgol9BeA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-indent/-/remark-lint-list-item-indent-1.0.5.tgz",
+      "integrity": "sha512-DjRgxjqaVMrnlQFJypizTPtLa9gSM5ad0LVIFDSstV2UVXSgpBi2+bSsFJEXb4Fkjo/d2JAgt27UhzhcoF2lnw==",
       "dev": true,
       "requires": {
         "plur": "^3.0.0",
@@ -19977,38 +49339,39 @@
         "unist-util-visit": "^1.1.1"
       },
       "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
+        "irregular-plurals": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+          "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
           "dev": true
+        },
+        "plur": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+          "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+          "dev": true,
+          "requires": {
+            "irregular-plurals": "^2.0.0"
+          }
         }
       }
     },
     "remark-lint-list-item-spacing": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-list-item-spacing/-/remark-lint-list-item-spacing-1.1.3.tgz",
-      "integrity": "sha512-QzDY0Qfk6m+Az0kmxP57OfswIH1WRdd6SIpQLaUEgsTlsbrJOiO0sJYkkOlFPsyJIfp7SV/FCbr+aYCbHF+kRQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-list-item-spacing/-/remark-lint-list-item-spacing-1.1.4.tgz",
+      "integrity": "sha512-zZELzTPYCoOCnOWh/nYTfQWnGXWg4/I5KpwrjBqe7WYwoMtvLVU9mqjRj2jHEbmirEXas54NZnYnkCoIBMS4bw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-maximum-heading-length": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-maximum-heading-length/-/remark-lint-maximum-heading-length-1.0.3.tgz",
-      "integrity": "sha512-ybcDpR5VHBjtjzdry7AdSjLFwslPo6rdhIJK2+WfHgfeEjIYnlz1uMvp1Z98QMmjpB5JSN83Kzg5fH8/B7poUw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-maximum-heading-length/-/remark-lint-maximum-heading-length-1.0.4.tgz",
+      "integrity": "sha512-dhDBnUFXMuHoW8LSV/VICJAJO+wWumnvuu3ND7MJquCYrsjX2vcRmJXL5cusJSY4yqPosKlOowIkzdV5B6/SDQ==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20018,29 +49381,21 @@
       }
     },
     "remark-lint-maximum-line-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/remark-lint-maximum-line-length/-/remark-lint-maximum-line-length-1.2.1.tgz",
-      "integrity": "sha512-CSxX1qc+rAqixk8eBrI+yBsUmD8YGfOezFeJWjJRuUaoOvs67oqCIU+I2HbwcUYY8/KnDxF1MCp+uCM0RkjKKw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/remark-lint-maximum-line-length/-/remark-lint-maximum-line-length-1.2.2.tgz",
+      "integrity": "sha512-ItAdjK+tUhqggqFvtAJ8iJ0MbBgShLl0HDgpG3In0QSYp/dmofO77DjvRjCJQo1pQYS8/LwlBii9cqg/3MwFfA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.4.0"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-auto-link-without-protocol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-auto-link-without-protocol/-/remark-lint-no-auto-link-without-protocol-1.0.3.tgz",
-      "integrity": "sha512-k+hg2mXnO4Q9WV+UShPLen5oThvFxcRVWkx2hviVd/nu3eiszBKH3o38csBwjeJoMG3l2ZhdUW8dlOBhq8670Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-auto-link-without-protocol/-/remark-lint-no-auto-link-without-protocol-1.0.4.tgz",
+      "integrity": "sha512-dhDHQLeaI79p7SRoKfxJ9c8J5otQsGua7ILeNbs2Onzn46/tp9ir6zjq3Lfh4VJJr4OVign2e8u+MzXsS7Uu/A==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20048,20 +49403,12 @@
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-blockquote-without-marker": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-blockquote-without-marker/-/remark-lint-no-blockquote-without-marker-2.0.3.tgz",
-      "integrity": "sha512-faDzKrA6aKidsRXG6gcIlCO8TexLxIxe+n9B3mdnl8mhZGgE0FfWTkIWVMj0IYps/xVsVMf45KxhXgc1wU9kwg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-blockquote-without-marker/-/remark-lint-no-blockquote-without-marker-2.0.4.tgz",
+      "integrity": "sha512-a5LFGj7It2z7aBRGaAcztk4D2pax2b7dK9iOarIWv/JBus/PSjZJxzZCma2aAAOQhv3wbNTwqQwuQC0UJHMbPg==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20069,20 +49416,12 @@
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1",
         "vfile-location": "^2.0.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-consecutive-blank-lines": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-consecutive-blank-lines/-/remark-lint-no-consecutive-blank-lines-1.0.3.tgz",
-      "integrity": "sha512-2Ef7fPxrfLditA7sTo2Qfqd+xwh/luWl8GzILE5vcWIxLDqKk3dTLJkB5nP+7Cr4kqWJAwXnRkEDd77ehrRV3A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-consecutive-blank-lines/-/remark-lint-no-consecutive-blank-lines-1.0.4.tgz",
+      "integrity": "sha512-33rYrp+3OQ2UjG2/xhctruCvkP2iKLuHJhoUOAUV3BGwqJjAB+xNOl+0DdvDo0fxh5dyZuNesBuos3xr2yVR+w==",
       "dev": true,
       "requires": {
         "plur": "^3.0.0",
@@ -20092,18 +49431,27 @@
         "unist-util-visit": "^1.1.1"
       },
       "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
+        "irregular-plurals": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-2.0.0.tgz",
+          "integrity": "sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==",
           "dev": true
+        },
+        "plur": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz",
+          "integrity": "sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==",
+          "dev": true,
+          "requires": {
+            "irregular-plurals": "^2.0.0"
+          }
         }
       }
     },
     "remark-lint-no-duplicate-headings": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings/-/remark-lint-no-duplicate-headings-1.0.4.tgz",
-      "integrity": "sha512-QuPw+VG502Ctpd/jBjnBYuRXTg0ToP3D+dd3TYds4TRcdgaEFYTZfQ5zjK6XrxLMg0Hn9/WpXr4UqTlV4YZupA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings/-/remark-lint-no-duplicate-headings-1.0.5.tgz",
+      "integrity": "sha512-4GKPxhKpN797V/6Jg1K4Zwqq+PhsjC633+wQMrZcTvOJfY+Rq1i7sNJ9lJVZnsDAlZJI56VqZCKnPJmS2br87g==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20112,20 +49460,12 @@
         "unist-util-position": "^3.0.0",
         "unist-util-stringify-position": "^2.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-duplicate-headings-in-section": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings-in-section/-/remark-lint-no-duplicate-headings-in-section-1.0.4.tgz",
-      "integrity": "sha512-jLYXWyDRIXjE4yPKUCzbVHS5wT8jx5HOlbJ6p8mmXO0M/NmI3pUQXTt17rHjEO0nbZH/HCBT4Tl8npnub447+A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-duplicate-headings-in-section/-/remark-lint-no-duplicate-headings-in-section-1.0.5.tgz",
+      "integrity": "sha512-4BmQMSY2M9EWzK2jgUj/MIYalbTSoJkl7YgqbEF/mroS/+f9XtN09Bpfay+M4dXHXNxcjPkg653uclL1/iZATA==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20134,20 +49474,12 @@
         "unist-util-position": "^3.0.0",
         "unist-util-stringify-position": "^2.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-emphasis-as-heading": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-emphasis-as-heading/-/remark-lint-no-emphasis-as-heading-1.0.3.tgz",
-      "integrity": "sha512-HEmyeyKciUz95+CgpAH98RPR73jq5u5CZb2FOMSqgNl9B6FZXqVpq9F3txPqUw3nAqFYOAEnfiaoRgcqtioh0Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-emphasis-as-heading/-/remark-lint-no-emphasis-as-heading-1.0.4.tgz",
+      "integrity": "sha512-gnsInLxTkc59eVD3/qelFagD/NcrMPKXT1sy7i4e8D2jqQyrIHHl0p3TfiyNNt8qIjKMKhlIii4k4kVk/3Mczg==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20156,54 +49488,54 @@
       }
     },
     "remark-lint-no-file-name-articles": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-articles/-/remark-lint-no-file-name-articles-1.0.3.tgz",
-      "integrity": "sha512-YZDJDKUWZEmhrO6tHB0u0K0K2qJKxyg/kryr14OaRMvWLS62RgMn97sXPZ38XOSN7mOcCnl0k7/bClghJXx0sg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-articles/-/remark-lint-no-file-name-articles-1.0.5.tgz",
+      "integrity": "sha512-AQk5eTb3s3TAPPjiglZgqlQj4ycao+gPs8/XkdN1VCPUtewW0GgwoQe7YEuBKayJ6ioN8dGP37Kg/P/PlKaRQA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-no-file-name-consecutive-dashes": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-consecutive-dashes/-/remark-lint-no-file-name-consecutive-dashes-1.0.3.tgz",
-      "integrity": "sha512-7f4vyXn/ca5lAguWWC3eu5hi8oZ7etX7aQlnTSgQZeslnJCbVJm6V6prFJKAzrqbBzMicUXr5pZLBDoXyTvHHw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-consecutive-dashes/-/remark-lint-no-file-name-consecutive-dashes-1.0.5.tgz",
+      "integrity": "sha512-Mg2IDsi790/dSdAzwnBnsMYdZm3qC2QgGwqOWcr0TPABJhhjC3p8r5fX4MNMTXI5It7B7bW9+ImmCeLOZiXkLg==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-no-file-name-irregular-characters": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-irregular-characters/-/remark-lint-no-file-name-irregular-characters-1.0.3.tgz",
-      "integrity": "sha512-b4xIy1Yi8qZpM2vnMN+6gEujagPGxUBAs1judv6xJQngkl5d5zT8VQZsYsTGHku4NWHjjh3b7vK5mr0/yp4JSg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-irregular-characters/-/remark-lint-no-file-name-irregular-characters-1.0.5.tgz",
+      "integrity": "sha512-Oe5i99qNUKc2bxmiH421o5B/kqlf1dfjAxpHNLhi2X2dXE91zRGavrlRM/4f4oR0N9Bqb3qB9JZPyMPWrzu9XA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-no-file-name-mixed-case": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-mixed-case/-/remark-lint-no-file-name-mixed-case-1.0.3.tgz",
-      "integrity": "sha512-d7rJ4c8CzDbEbGafw2lllOY8k7pvnsO77t8cV4PHFylwQ3hmCdTHLuDvK87G3DaWCeKclp0PMyamfOgJWKMkPA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-mixed-case/-/remark-lint-no-file-name-mixed-case-1.0.5.tgz",
+      "integrity": "sha512-ilrUCbHZin/ENwr8c3SC2chgkFsizXjBQIB/oZ7gnm1IkCkZPiMyXZAHdpwC/DjbrpGxfMYh9JmIHao4giS5+A==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-no-file-name-outer-dashes": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-outer-dashes/-/remark-lint-no-file-name-outer-dashes-1.0.4.tgz",
-      "integrity": "sha512-+bZvvme2Bm3Vp5L2iKuvGHYVmHKrTkkRt8JqJPGepuhvBvT4Q7+CgfKyMtC/hIjyl+IcuJQ2H0qPRzdicjy1wQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-file-name-outer-dashes/-/remark-lint-no-file-name-outer-dashes-1.0.6.tgz",
+      "integrity": "sha512-rT8CmcIlenegS0Yst4maYXdZfqIjBOiRUY8j/KJkORF5tKH+3O1/S07025qPGmcRihzK3w4yO0K8rgkKQw0b9w==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0"
       }
     },
     "remark-lint-no-heading-punctuation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-heading-punctuation/-/remark-lint-no-heading-punctuation-1.0.3.tgz",
-      "integrity": "sha512-JQD05RjLS99ePBQ4Bed1uWsQTlIMBTcGgIgF6jFXSCEqhwnrIUDwk6S3MG1RZsKd3TLw2xuT/i+POpfBc2+1kQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-heading-punctuation/-/remark-lint-no-heading-punctuation-1.0.4.tgz",
+      "integrity": "sha512-++/HXg/qtVssJjzq2ZgEreoxaazw9KkYrAbTDImKV7Fypo+7bZFELUvFicq0/i9qwAwt1tvhkKtLYt1W/sr1JQ==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20213,9 +49545,9 @@
       }
     },
     "remark-lint-no-inline-padding": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-inline-padding/-/remark-lint-no-inline-padding-1.0.4.tgz",
-      "integrity": "sha512-u5rgbDkcfVv645YxxOwoGBBJbsHEwWm/XqnO8EhfKTxkfKOF4ZItG7Ajhj89EDaeXMkvCcB/avBl4bj50eJH3g==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-inline-padding/-/remark-lint-no-inline-padding-1.0.5.tgz",
+      "integrity": "sha512-AjS34hBRasYiIAKZJ7/9U42LouRHok2WVTRdQPcVtRBswStNOuot59S+FRsatqlk1wvMmjytqxUKQfVTSeu9ag==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20225,9 +49557,9 @@
       }
     },
     "remark-lint-no-literal-urls": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-literal-urls/-/remark-lint-no-literal-urls-1.0.3.tgz",
-      "integrity": "sha512-H5quyMzl2kaewK+jYD1FI0G1SIinIsIp4DEyOUwIR+vYUoKwo0B4vvW0cmPpD1dgqqxHYx0B2B0JQQKFVWzGiw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-literal-urls/-/remark-lint-no-literal-urls-1.0.4.tgz",
+      "integrity": "sha512-sHjbzaSG4z6jMu1L0Qx1b7VvIQHy0bR4xZ6t9auJ5AoB5ua8hb/970s77irH1+46TF1ezhE7i+QDjmhcQi09xg==",
       "dev": true,
       "requires": {
         "mdast-util-to-string": "^1.0.2",
@@ -20235,20 +49567,12 @@
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-multiple-toplevel-headings": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-multiple-toplevel-headings/-/remark-lint-no-multiple-toplevel-headings-1.0.4.tgz",
-      "integrity": "sha512-0wDddx6htN5sL9/rofesiQF0oEgwN5224UmueiDx0ZUlYrn6VS0/SS0X3WWxtXmyeqlExfWF3D/g89tNs7dcjw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-multiple-toplevel-headings/-/remark-lint-no-multiple-toplevel-headings-1.0.5.tgz",
+      "integrity": "sha512-RZ1YPxRO7Bo8mT+A36cZ7nx2QHFAKk+oE6j87YrZYpAKr2oF6snKS8nIGhVku4PSI/9cW1G12MZz1cAA5rcjFw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20256,20 +49580,12 @@
         "unist-util-position": "^3.0.0",
         "unist-util-stringify-position": "^2.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-no-shell-dollars": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-shell-dollars/-/remark-lint-no-shell-dollars-1.0.3.tgz",
-      "integrity": "sha512-fT3lQMTjEkPryL+63qDP1NfrohP3tG5i3SkNWSSR4VLU6OSsSSXlHGQGjo0ag//+EPKHB5/9frB/YQ0gDEPRGQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shell-dollars/-/remark-lint-no-shell-dollars-1.0.4.tgz",
+      "integrity": "sha512-YXFj8FUVTKkVvoAbFY3zv1Ol7Kj1i+qdze3pXSgRG61y1LpfL8/HpnvFrseMbBmNw6o4WpjTo7GoArngJ1sCeg==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20278,9 +49594,9 @@
       }
     },
     "remark-lint-no-shortcut-reference-image": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-image/-/remark-lint-no-shortcut-reference-image-1.0.3.tgz",
-      "integrity": "sha512-CGm27X54kXp/5ehXejDTsZjqzK4uIhLGcrFzN3k/KjdwunQouEY92AARGrLSEuJ1hQx0bJsmnvr/hvQyWAfNJg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-image/-/remark-lint-no-shortcut-reference-image-1.0.4.tgz",
+      "integrity": "sha512-5/9QoesnOHIDwMHU9x+AGPBiFoMe9ZBKIR8nC17C6ZdksgwUIpjBJ3VX5POFlt5E6OhAZaeXqUCq9G2USccEdA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20289,9 +49605,9 @@
       }
     },
     "remark-lint-no-shortcut-reference-link": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-link/-/remark-lint-no-shortcut-reference-link-1.0.4.tgz",
-      "integrity": "sha512-FXdMJYqspZBhPlxYqfVgVluVXjxStg0RHJzqrk8G9wS8fCS62AE3reoaoiCahwoH1tfKcA+poktbKqDAmZo7Jg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-shortcut-reference-link/-/remark-lint-no-shortcut-reference-link-1.0.5.tgz",
+      "integrity": "sha512-qDVL7/0ptOTd/nyd9u/4MYFWQtYQU8povdUB45UgTXy5Rrf1WsC+4DfzAEZkX3tOSTExdAIf1WOKqdC5xRcfvA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
@@ -20300,183 +49616,111 @@
       }
     },
     "remark-lint-no-table-indentation": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-no-table-indentation/-/remark-lint-no-table-indentation-1.0.4.tgz",
-      "integrity": "sha512-H4VGHcg1k8sTIbwazFYLNbDqpPR+M0aHHKDf+93b/xyd27Dp0ODQrMnQbls1Cls5qOAQnwAQbx+75wcpFxP3OQ==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-no-table-indentation/-/remark-lint-no-table-indentation-1.0.5.tgz",
+      "integrity": "sha512-eE1GL+IzU3vtHdYCKHCZEIhCwiwCM7UH+pMDIMpGfH2LB3cB/Nrfbiz9xadGkARKqxxDMsJSBZDw4A/01IU+kA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.4.0"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-ordered-list-marker-style": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-style/-/remark-lint-ordered-list-marker-style-1.0.3.tgz",
-      "integrity": "sha512-24TmW1eUa/2JlwprZg9jJ8LKLxNGKnlKiI5YOhN4taUp2yv8daqlV9vR54yfn/ZZQh6EQvbIX0jeVY9NYgQUtw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-style/-/remark-lint-ordered-list-marker-style-1.0.4.tgz",
+      "integrity": "sha512-c6AIqeePzm3nfkPCbTdwBS3/AQICgwE76+ryOc7tsSq4ulyK/Nt8Syvi/oiHYuonBddZoGtFTNCn0jqen9qscA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-ordered-list-marker-value": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-value/-/remark-lint-ordered-list-marker-value-1.0.3.tgz",
-      "integrity": "sha512-WQ9yLD8cI9DSk/CE+APKUT6ZeXp0/RzOnsYqzMxEa8n1QHSqRSF7hVEiisqNTG9+gV64OEE66e+m4c7RVSUADw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-ordered-list-marker-value/-/remark-lint-ordered-list-marker-value-1.0.5.tgz",
+      "integrity": "sha512-eKepbNNfu9rEuG8WvV0sc7B+KiPMgq5Nc9baAxL9Hi6mhpj347YFWXxJUNttSINS13YTpnHxPvXmF9SzhjFKNQ==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-rule-style": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-rule-style/-/remark-lint-rule-style-1.0.3.tgz",
-      "integrity": "sha512-SJe7IFORYRdo8JUhMSdcTktVAUVNVp36YYl1ZD9CfHqQHWlFD+3vWYzJXOZfog/i+CyWf7Yi0WVYmQes+167dA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-rule-style/-/remark-lint-rule-style-1.0.4.tgz",
+      "integrity": "sha512-omr5P6CCvo2zixCzK9uiGZpwzOE+4rc+95kWH95k2iA6Rp8Qohp8RK4unSRKLtFYGUhSbiQPgWaQXHDxMkWczg==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-strong-marker": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-strong-marker/-/remark-lint-strong-marker-1.0.3.tgz",
-      "integrity": "sha512-PFkH282dCwfRsVEw9IxbYbaZBY4UcTuT2SN+lA3R0cBeocWnOySVw8YEm4sv9JfV8BLcQA5gc4tj66/U3KCScw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-strong-marker/-/remark-lint-strong-marker-1.0.4.tgz",
+      "integrity": "sha512-X9f6yhZ85cdP0cmCgkqlbxllpeQ60pS9Qqk9Jb9SZo6f95esaHptQ5bExb1ZVXzhSHz2Xz86tUhXtzG3zGFD4g==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-table-cell-padding": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/remark-lint-table-cell-padding/-/remark-lint-table-cell-padding-1.0.4.tgz",
-      "integrity": "sha512-AQWWtV1yca1PN27QaFRJbBK6Ro/bopv1XnVKxj/iMebhOU2D2FBJ8rXmMZXVMC3G9OB2WSzGgqH3nP6QY12LoA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-cell-padding/-/remark-lint-table-cell-padding-1.0.5.tgz",
+      "integrity": "sha512-N/WpcymrGBSPbLiv2OQTvdzNn6H9ctdyEA+P/odn4G9FqyrLmeTMkGJuGtinU569hLG/RtHqZIDeFVDiYi8Wzw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.4.0"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-table-pipe-alignment": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-table-pipe-alignment/-/remark-lint-table-pipe-alignment-1.0.3.tgz",
-      "integrity": "sha512-5fhEMcKqNjK6S/y7cVG0+iVqhmhXFW+awIuN7vOBhmDbZ3HF9rCCy20XiHoaG6FzrPJ+zfkjK/QZAbq2Vf58HA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-pipe-alignment/-/remark-lint-table-pipe-alignment-1.0.4.tgz",
+      "integrity": "sha512-pmELEOXeUjMQedyVvOtZcTCnTu6FxZ4gfBskMx6iJhOFEEKTFOmviqlKLpndPBxFNZB86AiE0C00/NvAaut8dw==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-table-pipes": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-table-pipes/-/remark-lint-table-pipes-1.0.3.tgz",
-      "integrity": "sha512-K9NnGZp6i0m/CaOH7ZT4Ymt2seyiRPcBIlNMMGXBm6gpy34KJDDxYqsNUrh+j7dR+Zg4rYAQLnr3BiSHvj+rbQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-table-pipes/-/remark-lint-table-pipes-1.0.4.tgz",
+      "integrity": "sha512-0fdnoiiSLIPd/76gNvQY4pg27d8HkMmmv5gCGfD+Z/Si9DdpbJdq93U0kX+Botb3+/4VEDIlcU7Cp5HXppMTWA==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-lint-unordered-list-marker-style": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/remark-lint-unordered-list-marker-style/-/remark-lint-unordered-list-marker-style-1.0.3.tgz",
-      "integrity": "sha512-0nn/Yscy5ImO4fqByrk/Ua02UwGx8LRu+0kdCbkVz4IxPO5qxTEfyccUQZR71zTdMJp1d2OeqyD9XtMaO4X7Ww==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/remark-lint-unordered-list-marker-style/-/remark-lint-unordered-list-marker-style-1.0.4.tgz",
+      "integrity": "sha512-lcuG1J74VGTT4gl8oH33HpkHrqorxjxMlJnBupLFrVowqvJ2hAq8yPJdGZ7P46uZOYw+Xz+Qv08bF8A73PNWxQ==",
       "dev": true,
       "requires": {
         "unified-lint-rule": "^1.0.0",
         "unist-util-generated": "^1.1.0",
         "unist-util-position": "^3.0.0",
         "unist-util-visit": "^1.1.1"
-      },
-      "dependencies": {
-        "unist-util-position": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.0.3.tgz",
-          "integrity": "sha512-28EpCBYFvnMeq9y/4w6pbnFmCUfzlsc41NJui5c51hOFjBA1fejcwc+5W4z2+0ECVbScG3dURS3JTVqwenzqZw==",
-          "dev": true
-        }
       }
     },
     "remark-message-control": {
@@ -20491,9 +49735,9 @@
       }
     },
     "remark-parse": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-7.0.1.tgz",
-      "integrity": "sha512-WOZLa545jYXtSy+txza6ACudKWByQac4S2DmGk+tAGO/3XnVTOxwyCIxB7nTcLlk8Aayhcuf3cV1WV6U6L7/DQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-7.0.2.tgz",
+      "integrity": "sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==",
       "dev": true,
       "requires": {
         "collapse-white-space": "^1.0.2",
@@ -20514,9 +49758,9 @@
       }
     },
     "remark-preset-lint-markdown-style-guide": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/remark-preset-lint-markdown-style-guide/-/remark-preset-lint-markdown-style-guide-2.1.3.tgz",
-      "integrity": "sha512-H/jSoLvTY8abUcB+7/062I2oHevlHcHdrfRMP2RMh19QA1wmARgNEn3tZfdBXFq1TpzhevGgb6VwSdOjdU8NOQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/remark-preset-lint-markdown-style-guide/-/remark-preset-lint-markdown-style-guide-2.1.4.tgz",
+      "integrity": "sha512-CGEN3DRtJEp+BvfgZ+VKxuq0Ij8Uw2DXfrbhK2xn4/XxatcHRPN8tnagXbMe1LHaQJGN8Gl1+UyLjsfIk6hyGQ==",
       "dev": true,
       "requires": {
         "remark-lint": "^6.0.0",
@@ -20567,9 +49811,9 @@
       }
     },
     "remark-stringify": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-7.0.3.tgz",
-      "integrity": "sha512-+jgmjNjm2kR7y2Ns1BATXRlFr+iQ7sDcpSgytfU77nkw7UCd5yJNArSxB3MU3Uul7HuyYNTCjetoGfy8xLia1A==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-7.0.4.tgz",
+      "integrity": "sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==",
       "dev": true,
       "requires": {
         "ccount": "^1.0.0",
@@ -20592,7 +49836,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
       "integrity": "sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==",
-      "dev": true,
       "requires": {
         "is-buffer": "^1.1.5",
         "is-utf8": "^0.2.1"
@@ -20602,18 +49845,52 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz",
       "integrity": "sha1-BfGlk/FuQuH7kOv1nejlaVJflSM=",
-      "dev": true,
       "requires": {
         "remove-bom-buffer": "^3.0.0",
         "safe-buffer": "^5.1.0",
         "through2": "^2.0.3"
       },
       "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          },
+          "dependencies": {
+            "safe-buffer": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+            }
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          },
+          "dependencies": {
+            "safe-buffer": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+            }
+          }
+        },
         "through2": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
           "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
           "requires": {
             "readable-stream": "~2.3.6",
             "xtend": "~4.0.1"
@@ -20621,49 +49898,30 @@
         }
       }
     },
-    "remove-markdown": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.3.0.tgz",
-      "integrity": "sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg=",
-      "dev": true
-    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
     },
     "repeat-element": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
-      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
-      "dev": true
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ=="
     },
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
-    },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "requires": {
-        "is-finite": "^1.0.0"
-      }
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
     "replace-ext": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-      "dev": true
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw=="
     },
     "replace-homedir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/replace-homedir/-/replace-homedir-1.0.0.tgz",
       "integrity": "sha1-6H9tUTuSjd6AgmDBK+f+xv9ueYw=",
-      "dev": true,
       "requires": {
         "homedir-polyfill": "^1.0.1",
         "is-absolute": "^1.0.0",
@@ -20671,9 +49929,9 @@
       }
     },
     "request": {
-      "version": "2.88.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -20682,7 +49940,7 @@
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
         "form-data": "~2.3.2",
-        "har-validator": "~5.1.0",
+        "har-validator": "~5.1.3",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
@@ -20692,7 +49950,7 @@
         "performance-now": "^2.1.0",
         "qs": "~6.5.2",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.4.3",
+        "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
       },
@@ -20704,35 +49962,21 @@
         }
       }
     },
-    "request-promise": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-3.0.0.tgz",
-      "integrity": "sha1-vh7bJvQcSc0dVlbGdT1oQqEkn0Y=",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.3",
-        "lodash": "^4.6.1",
-        "request": "^2.34"
-      }
-    },
-    "request-promise-core": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.3.tgz",
-      "integrity": "sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.15"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
+    },
     "require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
     },
     "require-uncached": {
       "version": "1.0.3",
@@ -20744,6 +49988,21 @@
         "resolve-from": "^1.0.0"
       },
       "dependencies": {
+        "caller-path": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
+          "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
+          "dev": true,
+          "requires": {
+            "callsites": "^0.2.0"
+          }
+        },
+        "callsites": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
+          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
+          "dev": true
+        },
         "resolve-from": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
@@ -20752,17 +50011,31 @@
         }
       }
     },
+    "requireindex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
+      "integrity": "sha1-5UBLgVV+91225JxacgBIk/4D4WI=",
+      "dev": true
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
     },
     "resolve": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
-      "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
       "requires": {
+        "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
       }
     },
@@ -20770,23 +50043,20 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
       "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
-      "dev": true,
       "requires": {
         "expand-tilde": "^2.0.0",
         "global-modules": "^1.0.0"
       }
     },
     "resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
     "resolve-options": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-1.1.0.tgz",
       "integrity": "sha1-MrueOcBtZzONyTeMDW1gdFZq0TE=",
-      "dev": true,
       "requires": {
         "value-or-function": "^3.0.0"
       }
@@ -20794,14 +50064,12 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "resp-modifier": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/resp-modifier/-/resp-modifier-6.0.2.tgz",
-      "integrity": "sha1-sSTeXE+6/LpUH0j/pzlw9KpFa08=",
-      "dev": true,
+      "integrity": "sha512-U1+0kWC/+4ncRFYqQWTx/3qkfE6a4B/h3XXgmXypfa0SPZ3t7cbbaFk297PjQS/yov24R18h6OZe6iZwj3NSLw==",
       "requires": {
         "debug": "^2.2.0",
         "minimatch": "^3.0.2"
@@ -20811,10 +50079,14 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -20831,7 +50103,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
       "requires": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -20840,278 +50111,303 @@
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
     },
-    "retry-axios": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/retry-axios/-/retry-axios-1.0.2.tgz",
-      "integrity": "sha512-PeR6ZVYscfOHrbN3A6EiP8M6UlseHpDkwVDsT6YMcZH0qyMubuFIq6gwydn+ZkvBzry3xmAZwZ3pW1zmJbvLOA==",
-      "dev": true
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
+    },
+    "retry-request": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-4.2.2.tgz",
+      "integrity": "sha512-xA93uxUD/rogV7BV59agW/JHPGXeREMWiZc9jhcwY4YdZ7QOtC7qbomYg0n4wyk2lJhggjvKvhNX8wln/Aldhg==",
+      "requires": {
+        "debug": "^4.1.1",
+        "extend": "^3.0.2"
+      }
     },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "rfdc": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.1.4.tgz",
-      "integrity": "sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
       "dev": true
     },
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
-    "right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-      "dev": true,
-      "requires": {
-        "align-text": "^0.1.1"
-      }
-    },
-    "rimraf": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-      "requires": {
-        "glob": "^7.1.3"
-      }
+      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE="
     },
-    "rollup": {
-      "version": "1.16.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.16.3.tgz",
-      "integrity": "sha512-iXINUUEk2NTZXE3GcUtLQt2cvfQsAUXBQ8AFsDK8tg7Wp5bwTKdZXPdzB2IJQwHpdUNfsIgYMAfajurh7SVTnA==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "0.0.39",
-        "@types/node": "^12.0.8",
-        "acorn": "^6.1.1"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "12.12.43",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.43.tgz",
-          "integrity": "sha512-KUyZdkGCnVPuXfsKmDUu2XLui65LZIJ2s0M57noy5e+ixUT2oK33ep7zlvgzI8LElcWqbf8AR+o/3GqAPac2zA==",
-          "dev": true
-        },
-        "acorn": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==",
-          "dev": true
-        }
-      }
+    "rgba-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
-    "rollup-plugin-babel": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz",
-      "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==",
-      "dev": true,
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "rollup-pluginutils": "^2.8.1"
+        "glob": "^7.1.3"
       }
     },
-    "rollup-plugin-commonjs": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
-      "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
-      "dev": true,
-      "requires": {
-        "estree-walker": "^0.6.1",
-        "is-reference": "^1.1.2",
-        "magic-string": "^0.25.2",
-        "resolve": "^1.11.0",
-        "rollup-pluginutils": "^2.8.1"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.15.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
-          "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        }
-      }
+    "robots-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/robots-parser/-/robots-parser-3.0.0.tgz",
+      "integrity": "sha512-6xkze3WRdneibICBAzMKcXyTKQw5shA3GbwoEJy7RSvxpZNGF0GMuYKE1T0VMP4fwx/fQs0n0mtriOqRtk5L1w=="
     },
-    "rollup-plugin-istanbul": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-istanbul/-/rollup-plugin-istanbul-2.0.1.tgz",
-      "integrity": "sha512-5X1ExH74moFY/pHqCrAZQ0V8RyEMCmrUSuo1t1bDzv9UHTd54s79ALDaK8N87PgNzA6UuKtBVAP/tsaSYzIUVQ==",
-      "dev": true,
+    "rollup": {
+      "version": "2.64.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz",
+      "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==",
       "requires": {
-        "istanbul-lib-instrument": "^1.9.1",
-        "rollup-pluginutils": "^2.0.1"
+        "fsevents": "~2.3.2"
       }
     },
-    "rollup-plugin-node-resolve": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
-      "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==",
-      "dev": true,
+    "rollup-plugin-istanbul": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-istanbul/-/rollup-plugin-istanbul-3.0.0.tgz",
+      "integrity": "sha512-z8kD2A57qTcxgqjbJ8cZBBE/IGYk+iJtE42sCaZjrSe/uBEUq5jJYvQwquJ+Acfko1LMYww4EJfeMJmc0GttpQ==",
       "requires": {
-        "@types/resolve": "0.0.8",
-        "builtin-modules": "^3.1.0",
-        "is-module": "^1.0.0",
-        "resolve": "^1.11.1",
-        "rollup-pluginutils": "^2.8.1"
+        "@rollup/pluginutils": "^4.1.0",
+        "istanbul-lib-instrument": "^4.0.3"
       },
       "dependencies": {
-        "resolve": {
-          "version": "1.11.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
-          "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
-          "dev": true,
+        "@rollup/pluginutils": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz",
+          "integrity": "sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==",
           "requires": {
-            "path-parse": "^1.0.6"
+            "estree-walker": "^2.0.1",
+            "picomatch": "^2.2.2"
           }
         }
       }
     },
     "rollup-plugin-postcss": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-2.5.0.tgz",
-      "integrity": "sha512-tBba0iMOY+eH1bP2rUhO/WK45uTRdRbuM5yWViO7tUChUrgA+JSQJscpCpStebPZoFxRwfkJRk2PZHd1q+JY2A==",
-      "dev": true,
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-2.9.0.tgz",
+      "integrity": "sha512-Y7qDwlqjZMBexbB1kRJf+jKIQL8HR6C+ay53YzN+nNJ64hn1PNZfBE3c61hFUhD//zrMwmm7uBW30RuTi+CD0w==",
       "requires": {
-        "chalk": "^2.4.2",
-        "concat-with-sourcemaps": "^1.0.5",
-        "cssnano": "^4.1.8",
-        "import-cwd": "^2.1.0",
-        "p-queue": "^2.4.2",
-        "pify": "^3.0.0",
-        "postcss": "^7.0.14",
-        "postcss-load-config": "^2.0.0",
-        "postcss-modules": "^1.4.1",
+        "chalk": "^4.0.0",
+        "concat-with-sourcemaps": "^1.1.0",
+        "cssnano": "^4.1.10",
+        "import-cwd": "^3.0.0",
+        "p-queue": "^6.3.0",
+        "pify": "^5.0.0",
+        "postcss": "^7.0.27",
+        "postcss-load-config": "^2.1.0",
+        "postcss-modules": "^2.0.0",
         "promise.series": "^0.2.0",
-        "resolve": "^1.5.0",
-        "rollup-pluginutils": "^2.0.1",
-        "safe-identifier": "^0.3.1",
+        "resolve": "^1.16.0",
+        "rollup-pluginutils": "^2.8.2",
+        "safe-identifier": "^0.4.1",
         "style-inject": "^0.3.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
         "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+          "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA=="
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
         }
       }
     },
-    "rollup-plugin-replace": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz",
-      "integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==",
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
       "requires": {
-        "magic-string": "^0.25.2",
-        "rollup-pluginutils": "^2.6.0"
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
       }
     },
-    "rollup-plugin-sourcemaps": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.4.2.tgz",
-      "integrity": "sha1-YhJaqUCHqt97g+9N+vYptHMTXoc=",
-      "dev": true,
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
       "requires": {
-        "rollup-pluginutils": "^2.0.1",
-        "source-map-resolve": "^0.5.0"
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
+        }
       }
     },
-    "rollup-plugin-terser": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz",
-      "integrity": "sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==",
-      "dev": true,
+    "router": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/router/-/router-1.3.8.tgz",
+      "integrity": "sha512-461UFH44NtSfIlS83PUg2N7OZo86BC/kB3dY77gJdsODsBhhw7+2uE0tzTINxrY9CahCUVk1VhpWCA5i1yoIEg==",
       "requires": {
-        "@babel/code-frame": "^7.5.5",
-        "jest-worker": "^24.9.0",
-        "rollup-pluginutils": "^2.8.2",
-        "serialize-javascript": "^2.1.2",
-        "terser": "^4.6.2"
+        "array-flatten": "3.0.0",
+        "debug": "2.6.9",
+        "methods": "~1.1.2",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "setprototypeof": "1.2.0",
+        "utils-merge": "1.0.1"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
-          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
-          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
-          "dev": true
+        "array-flatten": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
+          "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
         },
-        "@babel/highlight": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
-          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
-          "dev": true,
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.10.1",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
+            "ms": "2.0.0"
           }
         },
-        "rollup-pluginutils": {
-          "version": "2.8.2",
-          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
-          "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
-          "dev": true,
-          "requires": {
-            "estree-walker": "^0.6.1"
-          }
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
-    "rollup-plugin-virtual": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-virtual/-/rollup-plugin-virtual-1.0.1.tgz",
-      "integrity": "sha512-HCTBpV8MwP5lNzZrHD2moVxHIToHU1EkzkKGVj6Z0DcgUfxrxrZmeQirQeLz2yhnkJqRjwiVywK9CS8jDYakrw=="
-    },
-    "rollup-pluginutils": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz",
-      "integrity": "sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==",
-      "requires": {
-        "estree-walker": "^0.6.1"
-      }
-    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-      "dev": true
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
     },
     "run-parallel": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
-      "dev": true
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
     },
     "rx": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
-      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=",
-      "dev": true
+      "integrity": "sha512-CiaiuN6gapkdl+cZUr67W6I8jquN4lkak3vtIsIWCl4XIPP8ffsoyN6/+PuGXnQy8Cu8W2y9Xxh31Rq4M6wUug=="
     },
     "rx-lite": {
       "version": "3.1.2",
@@ -21123,93 +50419,50 @@
       "version": "5.5.12",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
       "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
-      "dev": true,
       "requires": {
         "symbol-observable": "1.0.1"
       }
     },
     "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
     "safe-identifier": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.3.1.tgz",
-      "integrity": "sha512-+vr9lVsmciuoP1fz8w30qDcohwH2S/tb5dPGQ8zHmG9jQf7YHU2fIKGxxcDpeY38J0Dep+DdPMz8FszVZT0Mbw==",
-      "dev": true
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w=="
     },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "dev": true,
       "requires": {
         "ret": "~0.1.10"
       }
     },
+    "safe-stable-stringify": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
+      "integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g=="
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.22.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.7.tgz",
-      "integrity": "sha512-ahREi0AdG7RTovSv14+yd1prQSfIvFcrDpOsth5EQf1+RM7SvOxsSttzNQaFmK1aa/k/3vyYwlYF5l0Xl+6c+g==",
-      "dev": true,
-      "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
-      }
-    },
-    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
-      "optional": true,
+      "version": "1.35.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
+      "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
       "requires": {
-        "glob": "^7.0.0",
-        "lodash": "^4.0.0",
-        "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
-      },
-      "dependencies": {
-        "yargs": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-          "optional": true,
-          "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^5.0.0"
-          }
-        },
-        "yargs-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-          "optional": true,
-          "requires": {
-            "camelcase": "^3.0.0"
-          }
-        }
+        "chokidar": ">=3.0.0 <4.0.0"
       }
     },
     "sass-lint": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/sass-lint/-/sass-lint-1.12.1.tgz",
-      "integrity": "sha1-Yw9pwhaqIGuCMvsqqQe98zNrbYM=",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sass-lint/-/sass-lint-1.13.1.tgz",
+      "integrity": "sha512-DSyah8/MyjzW2BWYmQWekYEKir44BpLqrCFsgs9iaWiVTcwZfwXHF586hh3D1n+/9ihUNMfd8iHAyb9KkGgs7Q==",
       "dev": true,
       "requires": {
         "commander": "^2.8.1",
@@ -21229,9 +50482,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "version": "5.7.4",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
           "dev": true
         },
         "acorn-jsx": {
@@ -21267,6 +50520,12 @@
           "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -21278,14 +50537,6 @@
             "has-ansi": "^2.0.0",
             "strip-ansi": "^3.0.0",
             "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-              "dev": true
-            }
           }
         },
         "cli-cursor": {
@@ -21297,6 +50548,18 @@
             "restore-cursor": "^1.0.1"
           }
         },
+        "co": {
+          "version": "4.6.0",
+          "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+          "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+          "dev": true
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -21355,23 +50618,6 @@
             "table": "^3.7.8",
             "text-table": "~0.2.0",
             "user-home": "^2.0.0"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.5",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-              "dev": true
-            },
-            "mkdirp": {
-              "version": "0.5.4",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-              "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-              "dev": true,
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            }
           }
         },
         "espree": {
@@ -21392,14 +50638,6 @@
           "requires": {
             "escape-string-regexp": "^1.0.5",
             "object-assign": "^4.1.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-              "dev": true
-            }
           }
         },
         "file-entry-cache": {
@@ -21441,15 +50679,6 @@
           "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
           "dev": true
         },
-        "gonzales-pe-sl": {
-          "version": "4.2.3",
-          "resolved": "https://registry.npmjs.org/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz",
-          "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=",
-          "dev": true,
-          "requires": {
-            "minimist": "1.1.x"
-          }
-        },
         "ignore": {
           "version": "3.3.10",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
@@ -21478,21 +50707,28 @@
           }
         },
         "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "isarray": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "levn": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+          "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2"
+          }
         },
-        "minimist": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
-          "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
         },
         "onetime": {
@@ -21501,6 +50737,26 @@
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
+        "optionator": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+          "dev": true,
+          "requires": {
+            "deep-is": "~0.1.3",
+            "fast-levenshtein": "~2.0.6",
+            "levn": "~0.3.0",
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2",
+            "word-wrap": "~1.2.3"
+          }
+        },
+        "prelude-ls": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+          "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+          "dev": true
+        },
         "progress": {
           "version": "1.1.8",
           "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
@@ -21517,6 +50773,15 @@
             "onetime": "^1.0.0"
           }
         },
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
         "run-async": {
           "version": "0.1.0",
           "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
@@ -21532,12 +50797,29 @@
           "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
           "dev": true
         },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
         "strip-json-comments": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
           "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
           "dev": true
         },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
         "table": {
           "version": "3.8.3",
           "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
@@ -21558,6 +50840,12 @@
               "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
               "dev": true
             },
+            "is-fullwidth-code-point": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+              "dev": true
+            },
             "string-width": {
               "version": "2.1.1",
               "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -21579,6 +50867,15 @@
             }
           }
         },
+        "type-check": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+          "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "~1.1.2"
+          }
+        },
         "write": {
           "version": "0.2.1",
           "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
@@ -21586,23 +50883,6 @@
           "dev": true,
           "requires": {
             "mkdirp": "^0.5.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.5",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-              "dev": true
-            },
-            "mkdirp": {
-              "version": "0.5.4",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-              "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-              "dev": true,
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            }
           }
         }
       }
@@ -21610,8 +50890,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "scroll-to-bottomjs": {
       "version": "1.1.0",
@@ -21619,91 +50898,86 @@
       "integrity": "sha512-+e7MRrUwY7M1V93ebqxIyPwIC8rPkvcmmmdSrOnNnCpbDP2Fpva3B6RadoRQ+ubZoYdYxye3Cculgbzb/CZiGw==",
       "dev": true
     },
-    "scss-tokenizer": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
-      "optional": true,
-      "requires": {
-        "js-base64": "^2.1.8",
-        "source-map": "^0.4.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "optional": true,
-          "requires": {
-            "amdefine": ">=0.0.4"
-          }
-        }
-      }
-    },
     "section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
       "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
         "kind-of": "^6.0.0"
+      }
+    },
+    "selenium-webdriver": {
+      "version": "4.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.1.tgz",
+      "integrity": "sha512-DJ10z6Yk+ZBaLrt1CLElytQ/FOayx29ANKDtmtyW1A6kCJx3+dsc5fFMOZxwzukDniyYsC3OObT5pUAsgkjpxQ==",
+      "requires": {
+        "jszip": "^3.5.0",
+        "rimraf": "^2.7.1",
+        "tmp": "^0.2.1",
+        "ws": "^7.3.1"
       },
       "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
           "requires": {
-            "is-extendable": "^0.1.0"
+            "rimraf": "^3.0.0"
+          },
+          "dependencies": {
+            "rimraf": {
+              "version": "3.0.2",
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+              "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+              "requires": {
+                "glob": "^7.1.3"
+              }
+            }
           }
         }
       }
     },
-    "seek-bzip": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.5.tgz",
-      "integrity": "sha1-z+kXyz0nS8/6x5J1ivUxc+sfq9w=",
-      "dev": true,
+    "semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "requires": {
-        "commander": "~2.8.1"
+        "lru-cache": "^6.0.0"
       },
       "dependencies": {
-        "commander": {
-          "version": "2.8.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-          "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
-          "dev": true,
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "requires": {
-            "graceful-readlink": ">= 1.0.0"
+            "yallist": "^4.0.0"
           }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-      "dev": true,
-      "optional": true
-    },
-    "semver": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
-    },
     "semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-      "dev": true
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
     },
     "semver-diff": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
       "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
-      "dev": true,
       "requires": {
         "semver": "^6.3.0"
       },
@@ -21711,8 +50985,7 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -21720,31 +50993,20 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz",
       "integrity": "sha1-E+jCZYq5aRywzXEJMkAoDTb3els=",
-      "dev": true,
       "requires": {
         "sver-compat": "^1.5.0"
       }
     },
     "semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.3.tgz",
+      "integrity": "sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==",
       "dev": true
     },
-    "semver-truncate": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
-      "integrity": "sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=",
-      "dev": true,
-      "requires": {
-        "semver": "^5.3.0"
-      }
-    },
     "send": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -21765,30 +51027,112 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
         },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+        },
         "statuses": {
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-          "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
-          "dev": true
+          "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
         }
       }
     },
     "serialize-javascript": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-      "dev": true
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-handler": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
+      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "fast-url-parser": "1.1.3",
+        "mime-types": "2.1.18",
+        "minimatch": "3.0.4",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "2.2.1",
+        "range-parser": "1.2.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+          "dev": true
+        },
+        "content-disposition": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+          "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
+          "dev": true
+        },
+        "mime-db": {
+          "version": "1.33.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+          "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.18",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+          "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+          "dev": true,
+          "requires": {
+            "mime-db": "~1.33.0"
+          }
+        },
+        "path-to-regexp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+          "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+          "dev": true
+        },
+        "range-parser": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+          "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
+          "dev": true
+        }
+      }
     },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
-      "dev": true,
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
       "requires": {
         "accepts": "~1.3.4",
         "batch": "0.6.1",
@@ -21803,10 +51147,40 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
         }
       }
     },
@@ -21814,7 +51188,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
-      "dev": true,
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -21825,48 +51198,38 @@
     "server-destroy": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
-      "integrity": "sha1-8Tv5KOQrnD55OD5hzDmYtdFObN0=",
-      "dev": true
+      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
     },
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
       "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
         "is-extendable": "^0.1.1",
         "is-plain-object": "^2.0.3",
         "split-string": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
       }
     },
     "setprototypeof": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-      "dev": true
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
       "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
       "requires": {
         "shebang-regex": "^1.0.0"
       }
@@ -21874,20 +51237,12 @@
     "shebang-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
     },
     "shell-quote": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
-      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
-      "dev": true,
-      "requires": {
-        "array-filter": "~0.0.0",
-        "array-map": "~0.0.0",
-        "array-reduce": "~0.0.0",
-        "jsonify": "~0.0.0"
-      }
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg=="
     },
     "shelljs": {
       "version": "0.6.1",
@@ -21901,22 +51256,38 @@
       "integrity": "sha1-5PcCpQxRiw9v6YRRiQ1wWvKba3A=",
       "dev": true
     },
+    "short-hash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/short-hash/-/short-hash-1.0.0.tgz",
+      "integrity": "sha1-P0kdco/Md37GBbuvf4PyNxL0IFA=",
+      "requires": {
+        "hash-string": "^1.0.0"
+      }
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "sigmund": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
-      "dev": true
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
     },
     "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -21924,41 +51295,48 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         }
       }
     },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
-      "dev": true
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
     },
     "slice-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
       "dev": true,
       "requires": {
-        "ansi-styles": "^3.2.0",
-        "astral-regex": "^1.0.0",
-        "is-fullwidth-code-point": "^2.0.0"
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "color-convert": "^1.9.0"
+            "color-convert": "^2.0.1"
           }
         },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         }
       }
@@ -21970,16 +51348,19 @@
       "dev": true
     },
     "slugify": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
-      "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw==",
-      "dev": true
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.5.tgz",
+      "integrity": "sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ=="
+    },
+    "smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="
     },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
       "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "dev": true,
       "requires": {
         "base": "^0.11.1",
         "debug": "^2.2.0",
@@ -21995,7 +51376,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -22004,19 +51384,14 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
         },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -22024,7 +51399,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
       "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "dev": true,
       "requires": {
         "define-property": "^1.0.0",
         "isobject": "^3.0.0",
@@ -22035,7 +51409,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
           "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -22044,7 +51417,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -22053,7 +51425,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -22062,7 +51433,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -22075,7 +51445,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
       "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "dev": true,
       "requires": {
         "kind-of": "^3.2.0"
       },
@@ -22084,7 +51453,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -22092,159 +51460,99 @@
       }
     },
     "socket.io": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.1.1.tgz",
-      "integrity": "sha512-rORqq9c+7W0DAK3cleWNSyfv/qKXV99hV4tZe+gGLfBECw3XEhBy7x85F3wypA9688LKjtwO9pX9L33/xQI8yA==",
-      "dev": true,
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.4.1.tgz",
+      "integrity": "sha512-s04vrBswdQBUmuWJuuNTmXUVJhP0cVky8bBDhdkf8y0Ptsu7fKU2LuLbts9g+pdmAdyMMn8F/9Mf1/wbtUN0fg==",
       "requires": {
-        "debug": "~3.1.0",
-        "engine.io": "~3.2.0",
-        "has-binary2": "~1.0.2",
-        "socket.io-adapter": "~1.1.0",
-        "socket.io-client": "2.1.1",
-        "socket.io-parser": "~3.2.0"
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.1.0",
+        "socket.io-adapter": "~2.3.3",
+        "socket.io-parser": "~4.0.4"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "engine.io-client": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
-          "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==",
-          "dev": true,
-          "requires": {
-            "component-emitter": "1.2.1",
-            "component-inherit": "0.0.3",
-            "debug": "~3.1.0",
-            "engine.io-parser": "~2.1.1",
-            "has-cors": "1.1.0",
-            "indexof": "0.0.1",
-            "parseqs": "0.0.5",
-            "parseuri": "0.0.5",
-            "ws": "~3.3.1",
-            "xmlhttprequest-ssl": "~1.5.4",
-            "yeast": "0.1.2"
-          }
-        },
-        "socket.io-client": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.1.tgz",
-          "integrity": "sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==",
-          "dev": true,
-          "requires": {
-            "backo2": "1.0.2",
-            "base64-arraybuffer": "0.1.5",
-            "component-bind": "1.0.0",
-            "component-emitter": "1.2.1",
-            "debug": "~3.1.0",
-            "engine.io-client": "~3.2.0",
-            "has-binary2": "~1.0.2",
-            "has-cors": "1.1.0",
-            "indexof": "0.0.1",
-            "object-component": "0.0.3",
-            "parseqs": "0.0.5",
-            "parseuri": "0.0.5",
-            "socket.io-parser": "~3.2.0",
-            "to-array": "0.1.4"
-          }
-        },
-        "socket.io-parser": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
-          "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==",
-          "dev": true,
-          "requires": {
-            "component-emitter": "1.2.1",
-            "debug": "~3.1.0",
-            "isarray": "2.0.1"
-          }
-        },
-        "ws": {
-          "version": "3.3.3",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
-          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0",
-            "safe-buffer": "~5.1.0",
-            "ultron": "~1.1.0"
-          }
+        "socket.io-adapter": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.3.tgz",
+          "integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ=="
         }
       }
     },
-    "socket.io-adapter": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz",
-      "integrity": "sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=",
-      "dev": true
-    },
     "socket.io-client": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz",
-      "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==",
-      "dev": true,
-      "requires": {
-        "backo2": "1.0.2",
-        "base64-arraybuffer": "0.1.5",
-        "component-bind": "1.0.0",
-        "component-emitter": "1.2.1",
-        "debug": "~4.1.0",
-        "engine.io-client": "~3.4.0",
-        "has-binary2": "~1.0.2",
-        "has-cors": "1.1.0",
-        "indexof": "0.0.1",
-        "object-component": "0.0.3",
-        "parseqs": "0.0.5",
-        "parseuri": "0.0.5",
-        "socket.io-parser": "~3.3.0",
-        "to-array": "0.1.4"
-      }
-    },
-    "socket.io-parser": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.0.tgz",
-      "integrity": "sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==",
-      "dev": true,
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
       "requires": {
-        "component-emitter": "1.2.1",
-        "debug": "~3.1.0",
-        "isarray": "2.0.1"
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
+        "socket.io-parser": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+          "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
           "requires": {
-            "ms": "2.0.0"
+            "@socket.io/component-emitter": "~3.1.0",
+            "debug": "~4.3.1"
           }
         }
       }
     },
-    "sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-      "dev": true,
+    "socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
       "requires": {
-        "is-plain-obj": "^1.0.0"
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
       }
     },
-    "sort-keys-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
-      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
-      "dev": true,
+    "socks": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+      "requires": {
+        "ip": "^2.0.0",
+        "smart-buffer": "^4.2.0"
+      },
+      "dependencies": {
+        "ip": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+          "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ=="
+        }
+      }
+    },
+    "socks-proxy-agent": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz",
+      "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==",
       "requires": {
-        "sort-keys": "^1.0.0"
+        "agent-base": "^7.0.2",
+        "debug": "^4.3.4",
+        "socks": "^2.7.1"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+          "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+          "requires": {
+            "debug": "^4.3.4"
+          }
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        }
       }
     },
     "source-map": {
@@ -22252,13 +51560,17 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
     "source-map-resolve": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
-      "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-      "dev": true,
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
       "requires": {
-        "atob": "^2.1.1",
+        "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
         "resolve-url": "^0.2.1",
         "source-map-url": "^0.4.0",
@@ -22266,9 +51578,9 @@
       }
     },
     "source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
+      "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
       "requires": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -22282,98 +51594,90 @@
       }
     },
     "source-map-url": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
     "sourcemap-codec": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz",
-      "integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg=="
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "sparkles": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
-      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==",
-      "dev": true
+      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw=="
     },
     "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "requires": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
     },
     "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "requires": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz",
-      "integrity": "sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g=="
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
+      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+    },
+    "speedline-core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/speedline-core/-/speedline-core-1.4.3.tgz",
+      "integrity": "sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==",
+      "requires": {
+        "@types/node": "*",
+        "image-ssim": "^0.2.0",
+        "jpeg-js": "^0.4.1"
+      }
     },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
       "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^3.0.0"
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-    },
-    "squeak": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
-      "integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=",
-      "dev": true,
-      "requires": {
-        "chalk": "^1.0.0",
-        "console-stream": "^0.1.1",
-        "lpad-align": "^1.0.1"
       },
       "dependencies": {
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
           "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-              "dev": true
-            }
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
           }
         }
       }
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -22390,29 +51694,43 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssri": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
+      "integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+      "optional": true,
+      "requires": {
+        "minipass": "^7.0.3"
+      },
+      "dependencies": {
+        "minipass": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+          "optional": true
+        }
+      }
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
-      "dev": true
+      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA="
     },
     "state-toggle": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.2.tgz",
-      "integrity": "sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
+      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
       "dev": true
     },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
       "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-      "dev": true,
       "requires": {
         "define-property": "^0.2.5",
         "object-copy": "^0.1.0"
@@ -22422,7 +51740,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -22432,130 +51749,175 @@
     "statuses": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
-      "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
-      "dev": true
+      "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
     },
-    "stdout-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
-      "optional": true,
+    "stream-chain": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/stream-chain/-/stream-chain-2.2.5.tgz",
+      "integrity": "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA=="
+    },
+    "stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
       "requires": {
-        "readable-stream": "^2.0.1"
+        "stubs": "^3.0.0"
       }
     },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true
-    },
     "stream-exhaust": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz",
-      "integrity": "sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==",
-      "dev": true
+      "integrity": "sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw=="
+    },
+    "stream-json": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/stream-json/-/stream-json-1.8.0.tgz",
+      "integrity": "sha512-HZfXngYHUAr1exT4fxlbc1IOce1RYxp2ldeaf97LYCOPSoOqY/1Psp7iGvpb+6JIOgkra9zDYnPX01hGAHzEPw==",
+      "requires": {
+        "stream-chain": "^2.2.5"
+      }
     },
     "stream-shift": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
-      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
-      "dev": true
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
     "stream-throttle": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/stream-throttle/-/stream-throttle-0.1.3.tgz",
-      "integrity": "sha1-rdV8jXzHOoFjDTHNVdOWHPr7qcM=",
-      "dev": true,
+      "integrity": "sha512-889+B9vN9dq7/vLbGyuHeZ6/ctf5sNuGWsDy89uNxkFTAgzy0eK7+w5fL3KLNRTkLle7EgZGvHUphZW0Q26MnQ==",
       "requires": {
         "commander": "^2.2.0",
         "limiter": "^1.0.5"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
       }
     },
     "streamroller": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-1.0.6.tgz",
-      "integrity": "sha512-3QC47Mhv3/aZNFpDDVO44qQb9gwB9QggMEE0sQmkTAwBVYdBRWISdsywlkfm5II1Q5y/pmrHflti/IgmIzdDBg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.3.tgz",
+      "integrity": "sha512-CphIJyFx2SALGHeINanjFRKQ4l7x2c+rXYJ4BMq0gd+ZK0gi4VT8b+eHe2wi58x4UayBAKx4xtHpXT/ea1cz8w==",
       "dev": true,
       "requires": {
-        "async": "^2.6.2",
-        "date-format": "^2.0.0",
-        "debug": "^3.2.6",
-        "fs-extra": "^7.0.1",
-        "lodash": "^4.17.14"
+        "date-format": "^4.0.14",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
       },
       "dependencies": {
-        "async": {
-          "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-          "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.17.14"
-          }
-        },
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "dev": true,
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
-        },
-        "lodash": {
-          "version": "4.17.15",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
         }
       }
     },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
       "dev": true
     },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
-      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
-      "dev": true
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
     },
     "string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "requires": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "optional": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
       }
     },
     "string.prototype.padend": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz",
-      "integrity": "sha1-86rvfBcZ8XDF6rHDK/eA2W4h8vA=",
-      "dev": true,
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz",
+      "integrity": "sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==",
       "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.4.3",
-        "function-bind": "^1.0.2"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
       }
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+    "string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
       "requires": {
-        "safe-buffer": "~5.1.0"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
       }
     },
     "stringify-entities": {
@@ -22571,17 +51933,6 @@
         "is-hexadecimal": "^1.0.0"
       }
     },
-    "stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "dev": true,
-      "requires": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      }
-    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -22590,6 +51941,23 @@
         "ansi-regex": "^2.0.0"
       }
     },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "optional": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "optional": true
+        }
+      }
+    },
     "strip-bom": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
@@ -22601,33 +51969,7 @@
     "strip-bom-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=",
-      "dev": true
-    },
-    "strip-comments": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
-      "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==",
-      "dev": true,
-      "requires": {
-        "babel-extract-comments": "^1.0.0",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0"
-      }
-    },
-    "strip-dirs": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
-      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
-      "dev": true,
-      "requires": {
-        "is-natural-number": "^4.0.1"
-      }
-    },
-    "strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-      "dev": true
+      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI="
     },
     "strip-final-newline": {
       "version": "2.0.0",
@@ -22636,102 +51978,212 @@
       "dev": true
     },
     "strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
       "requires": {
-        "get-stdin": "^4.0.1"
+        "min-indent": "^1.0.0"
       }
     },
     "strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-      "dev": true
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
-    "strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        }
-      }
+    "striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw=="
+    },
+    "stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls="
     },
     "style-inject": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
-      "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==",
-      "dev": true
+      "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw=="
     },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
       "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-selector-parser": "^3.0.0"
       },
       "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "postcss-selector-parser": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
           "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
           "requires": {
             "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "superstatic": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/superstatic/-/superstatic-9.0.3.tgz",
+      "integrity": "sha512-e/tmW0bsnQ/33ivK6y3CapJT0Ovy4pk/ohNPGhIAGU2oasoNLRQ1cv6enua09NU9w6Y0H/fBu07cjzuiWvLXxw==",
+      "requires": {
+        "basic-auth-connect": "^1.0.0",
+        "commander": "^10.0.0",
+        "compression": "^1.7.0",
+        "connect": "^3.7.0",
+        "destroy": "^1.0.4",
+        "fast-url-parser": "^1.1.3",
+        "glob-slasher": "^1.0.1",
+        "is-url": "^1.2.2",
+        "join-path": "^1.1.1",
+        "lodash": "^4.17.19",
+        "mime-types": "^2.1.35",
+        "minimatch": "^6.1.6",
+        "morgan": "^1.8.2",
+        "on-finished": "^2.2.0",
+        "on-headers": "^1.0.0",
+        "path-to-regexp": "^1.8.0",
+        "re2": "^1.17.7",
+        "router": "^1.3.1",
+        "update-notifier-cjs": "^5.1.6"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "commander": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="
+        },
+        "connect": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+          "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+          "requires": {
+            "debug": "2.6.9",
+            "finalhandler": "1.1.2",
+            "parseurl": "~1.3.3",
+            "utils-merge": "1.0.1"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "finalhandler": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+          "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+          "requires": {
+            "debug": "2.6.9",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "on-finished": "~2.3.0",
+            "parseurl": "~1.3.3",
+            "statuses": "~1.5.0",
+            "unpipe": "~1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "minimatch": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
+          "integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
         }
       }
     },
     "supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
     },
     "supports-hyperlinks": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz",
-      "integrity": "sha512-HHi5kVSefKaJkGYXbDuKbUGRVxqnWGn3J2e39CYcNJEfWciGq2zYtOhXLTlvrOZW1QU7VX67w7fMmWafHX9Pfw==",
-      "dev": true,
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "requires": {
-        "has-flag": "^2.0.0",
-        "supports-color": "^5.0.0"
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
       },
       "dependencies": {
         "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
-          "dev": true
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
-            "has-flag": "^3.0.0"
-          },
-          "dependencies": {
-            "has-flag": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-              "dev": true
-            }
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -22740,25 +52192,22 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/sver-compat/-/sver-compat-1.5.0.tgz",
       "integrity": "sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=",
-      "dev": true,
       "requires": {
         "es6-iterator": "^2.0.1",
         "es6-symbol": "^3.1.1"
       }
     },
     "svgo": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.2.2.tgz",
-      "integrity": "sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==",
-      "dev": true,
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
       "requires": {
         "chalk": "^2.4.1",
         "coa": "^2.0.2",
         "css-select": "^2.0.0",
         "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.28",
-        "css-url-regex": "^1.1.0",
-        "csso": "^3.5.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
         "js-yaml": "^3.13.1",
         "mkdirp": "~0.5.1",
         "object.values": "^1.1.0",
@@ -22768,163 +52217,264 @@
         "util.promisify": "~1.0.0"
       },
       "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
+        "css-select": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^3.2.1",
+            "domutils": "^1.7.0",
+            "nth-check": "^1.0.2"
+          }
         },
-        "mkdirp": {
-          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-          "dev": true,
+        "css-tree": {
+          "version": "1.0.0-alpha.37",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
           "requires": {
-            "minimist": "^1.2.5"
+            "mdn-data": "2.0.4",
+            "source-map": "^0.6.1"
+          }
+        },
+        "css-what": {
+          "version": "3.4.2",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
+        },
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "domelementtype": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+              "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+        },
+        "nth-check": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+          "requires": {
+            "boolbase": "~1.0.0"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
-      "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=",
-      "dev": true
+      "integrity": "sha512-Kb3PrPYz4HanVF1LVGuAdW6LoVgIwjUYJGzFe7NDrBLCN4lsV/5J0MFurV+ygS4bRVwrCEt2c7MQ1R2a72oJDw=="
     },
     "table": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
-      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
       "dev": true,
       "requires": {
-        "ajv": "^6.10.2",
-        "lodash": "^4.17.14",
-        "slice-ansi": "^2.1.0",
-        "string-width": "^3.0.0"
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
-          "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
+          "version": "8.6.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.1.tgz",
+          "integrity": "sha512-42VLtQUOLefAvKFAQIxIZDaThq6om/PrfP0CYk3/vn+y4BMNkKnbli8ON2QCiHov4KkzOSJ/xSoBJdayiiYvVQ==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
             "uri-js": "^4.2.2"
           }
         },
         "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "fast-deep-equal": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
           "dev": true
         },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "dev": true,
           "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
+            "ansi-regex": "^5.0.0"
           }
+        }
+      }
+    },
+    "tar": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
+      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
         },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
+        "fs-minipass": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+          "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
           "requires": {
-            "ansi-regex": "^4.1.0"
+            "minipass": "^3.0.0"
+          },
+          "dependencies": {
+            "minipass": {
+              "version": "3.3.6",
+              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+              "requires": {
+                "yallist": "^4.0.0"
+              }
+            }
           }
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
-    "tar-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
-      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
       "dev": true,
       "requires": {
-        "bl": "^1.0.0",
-        "buffer-alloc": "^1.2.0",
-        "end-of-stream": "^1.0.0",
-        "fs-constants": "^1.0.0",
-        "readable-stream": "^2.3.0",
-        "to-buffer": "^1.1.1",
-        "xtend": "^4.0.0"
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
       }
     },
-    "temp-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
-      "dev": true
-    },
-    "tempfile": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-2.0.0.tgz",
-      "integrity": "sha1-awRGhWqbERTRhW/8vlCczLCXcmU=",
-      "dev": true,
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
       "requires": {
-        "temp-dir": "^1.0.0",
-        "uuid": "^3.0.1"
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
       }
     },
-    "tempy": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.3.0.tgz",
-      "integrity": "sha512-WrH/pui8YCwmeiAoxV+lpRH9HpRtgBhSR2ViBPgpGb/wnYDzp21R4MN45fsCGvLROvY67o3byhJRYRONJyImVQ==",
-      "dev": true,
+    "tcp-port-used": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tcp-port-used/-/tcp-port-used-1.0.2.tgz",
+      "integrity": "sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==",
       "requires": {
-        "temp-dir": "^1.0.0",
-        "type-fest": "^0.3.1",
-        "unique-string": "^1.0.0"
+        "debug": "4.3.1",
+        "is2": "^2.0.6"
       },
       "dependencies": {
-        "type-fest": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
-          "dev": true
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
         }
       }
     },
-    "term-size": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
-      "integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==",
-      "dev": true
+    "teeny-request": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
+      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
+      "requires": {
+        "http-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "stream-events": "^1.0.5",
+        "uuid": "^8.0.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
     },
     "terser": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.4.tgz",
-      "integrity": "sha512-5fqgBPLgVHZ/fVvqRhhUp9YUiGXhFJ9ZkrZWD9vQtFBR4QIGTnbsb+/kKqSqfgp3WnBwGWAFnedGTtmX1YTn0w==",
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz",
+      "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==",
       "requires": {
         "commander": "^2.20.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.12"
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.20"
       },
       "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
         "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
         }
       }
     },
@@ -22937,29 +52487,12 @@
         "@istanbuljs/schema": "^0.1.2",
         "glob": "^7.1.4",
         "minimatch": "^3.0.4"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
       }
     },
     "text-hex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
-      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
-      "dev": true
+      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
     },
     "text-table": {
       "version": "0.2.0",
@@ -22968,20 +52501,23 @@
       "dev": true
     },
     "tfunk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/tfunk/-/tfunk-3.1.0.tgz",
-      "integrity": "sha1-OORBT8ZJd9h6/apy+sttKfgve1s=",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tfunk/-/tfunk-4.0.0.tgz",
+      "integrity": "sha512-eJQ0dGfDIzWNiFNYFVjJ+Ezl/GmwHaFTBTjrtqNPW0S7cuVDBrZrmzUz6VkMeCR4DZFqhd4YtLwsw3i2wYHswQ==",
       "requires": {
-        "chalk": "^1.1.1",
-        "object-path": "^0.9.0"
+        "chalk": "^1.1.3",
+        "dlv": "^1.1.3"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
+        },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -22990,47 +52526,54 @@
             "supports-color": "^2.0.0"
           }
         },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
         }
       }
     },
+    "third-party-web": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.12.7.tgz",
+      "integrity": "sha512-9d/OfjEOjyeOpnm4F9o0KSK6BI6ytvi9DINSB5h1+jdlCvQlhKpViMSxWpBN9WstdfDQ61BS6NxWqcPCuQCAJg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
-      "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
-      "dev": true,
-      "requires": {
-        "readable-stream": "2 || 3"
-      }
-    },
-    "through2-concurrent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/through2-concurrent/-/through2-concurrent-2.0.0.tgz",
-      "integrity": "sha512-R5/jLkfMvdmDD+seLwN7vB+mhbqzWop5fAjx5IX8/yQq7VhBhzDmhXgaHAOnhnWkCpRMM7gToYHycB0CS/pd+A==",
-      "dev": true,
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
+      "integrity": "sha1-OE51MU1J8y3hLuu4E2uOtrXVnak=",
       "requires": {
-        "through2": "^2.0.0"
+        "readable-stream": "~2.0.0",
+        "xtend": "~4.0.0"
       },
       "dependencies": {
-        "through2": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+        },
+        "readable-stream": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+          "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
           "requires": {
-            "readable-stream": "~2.3.6",
-            "xtend": "~4.0.1"
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~1.0.6",
+            "string_decoder": "~0.10.x",
+            "util-deprecate": "~1.0.1"
           }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
         }
       }
     },
@@ -23038,106 +52581,30 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
       "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
-      "dev": true,
       "requires": {
         "through2": "~2.0.0",
         "xtend": "~4.0.0"
-      },
-      "dependencies": {
-        "through2": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
-          "requires": {
-            "readable-stream": "~2.3.6",
-            "xtend": "~4.0.1"
-          }
-        }
-      }
-    },
-    "time-require": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/time-require/-/time-require-0.1.2.tgz",
-      "integrity": "sha1-+eEss3D8JgXhFARYK6VO9corLZg=",
-      "dev": true,
-      "requires": {
-        "chalk": "^0.4.0",
-        "date-time": "^0.1.1",
-        "pretty-ms": "^0.2.1",
-        "text-table": "^0.2.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
-          "integrity": "sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=",
-          "dev": true
-        },
-        "chalk": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
-          "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "~1.0.0",
-            "has-color": "~0.1.0",
-            "strip-ansi": "~0.1.0"
-          }
-        },
-        "parse-ms": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-0.1.2.tgz",
-          "integrity": "sha1-3T+iXtbC78e93hKtm0bBY6opIk4=",
-          "dev": true
-        },
-        "pretty-ms": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-0.2.2.tgz",
-          "integrity": "sha1-2oeaaC/zOjcBEEbxPWJ/Z8c7hPY=",
-          "dev": true,
-          "requires": {
-            "parse-ms": "^0.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
-          "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=",
-          "dev": true
-        }
       }
     },
     "time-stamp": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
-      "dev": true
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
     },
     "timed-out": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
-      "dev": true
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
     },
     "timsort": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
       "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
       "requires": {
         "os-tmpdir": "~1.0.2"
       }
@@ -23146,35 +52613,20 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
       "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
-      "dev": true,
       "requires": {
         "is-absolute": "^1.0.0",
         "is-negated-glob": "^1.0.0"
       }
     },
-    "to-array": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
-      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=",
-      "dev": true
-    },
-    "to-buffer": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
-      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
-      "dev": true
-    },
     "to-fast-properties": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
       "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -23183,7 +52635,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -23200,38 +52651,79 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
       "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
       "requires": {
         "define-property": "^2.0.2",
         "extend-shallow": "^3.0.2",
         "regex-not": "^1.0.2",
         "safe-regex": "^1.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
       }
     },
     "to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "dev": true,
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "requires": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
+        "is-number": "^7.0.0"
       }
     },
     "to-through": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz",
       "integrity": "sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=",
-      "dev": true,
       "requires": {
         "through2": "^2.0.3"
       },
       "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
         "through2": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
           "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
           "requires": {
             "readable-stream": "~2.3.6",
             "xtend": "~4.0.1"
@@ -23240,9 +52732,9 @@
       }
     },
     "to-vfile": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-6.0.0.tgz",
-      "integrity": "sha512-i9fwXXSsHLu7mzgixc1WjgnqSe6pGpjnzCYoFmrASvEueLfyKf09QAe+XQYu8OAJ62aFqHpe2EKXojeRVvEzqA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-6.1.0.tgz",
+      "integrity": "sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==",
       "dev": true,
       "requires": {
         "is-buffer": "^2.0.0",
@@ -23250,45 +52742,49 @@
       },
       "dependencies": {
         "is-buffer": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
           "dev": true
         }
       }
     },
     "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
     "token-stream": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
-      "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=",
-      "dev": true
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ="
     },
     "tough-cookie": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
-      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
       "requires": {
-        "psl": "^1.1.24",
-        "punycode": "^1.4.1"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-        }
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "toxic": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toxic/-/toxic-1.0.1.tgz",
+      "integrity": "sha512-WI3rIGdcaKULYg7KVoB0zcjikqvcYYvcuT6D89bFPz2rVR0Rl0PK6x8/X62rtdLtBKIE985NzVf/auTtGegIIg==",
+      "requires": {
+        "lodash": "^4.17.10"
       }
     },
-    "treeify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/treeify/-/treeify-1.1.0.tgz",
-      "integrity": "sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==",
-      "dev": true
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
+    "transfob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/transfob/-/transfob-1.0.0.tgz",
+      "integrity": "sha1-x/wnpbVDCtSGJnrmZtkj90oKsyA="
     },
     "trim": {
       "version": "0.0.1",
@@ -23297,75 +52793,64 @@
       "dev": true
     },
     "trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
-    },
-    "trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        }
-      }
-    },
-    "trim-right": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true
     },
     "trim-trailing-lines": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz",
-      "integrity": "sha512-MUjYItdrqqj2zpcHFTkMa9WAv4JHTI6gnRQGPFLrt5L9a6tRMiDnIqYl8JBvu2d2Tc3lWJKQwlGCp0K8AvCM+Q==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
+      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
       "dev": true
     },
     "triple-beam": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
-      "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
-      "dev": true
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
+      "integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg=="
     },
     "trough": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.4.tgz",
-      "integrity": "sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
       "dev": true
     },
-    "true-case-path": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
-      "optional": true,
+    "truncate-utf8-bytes": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+      "integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=",
       "requires": {
-        "glob": "^7.1.2"
+        "utf8-byte-length": "^1.0.1"
       }
     },
     "tslib": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "tsutils": {
-      "version": "3.17.1",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-      "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
       }
     },
+    "tunnel": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+      "dev": true
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -23379,100 +52864,93 @@
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
       "requires": {
-        "prelude-ls": "~1.1.2"
+        "prelude-ls": "^1.2.1"
       }
     },
-    "type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
       "dev": true
     },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+    },
     "type-is": {
-      "version": "1.6.16",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
-      "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
-      "dev": true,
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "requires": {
         "media-typer": "0.3.0",
-        "mime-types": "~2.1.18"
+        "mime-types": "~2.1.24"
       }
     },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "dev": true,
       "requires": {
         "is-typedarray": "^1.0.0"
       }
     },
     "typescript": {
-      "version": "3.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz",
-      "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==",
-      "dev": true
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
     },
     "ua-parser-js": {
-      "version": "0.7.17",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz",
-      "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==",
-      "dev": true
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg=="
     },
     "uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
-      "dev": true
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
     },
     "uglify-js": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.4.tgz",
-      "integrity": "sha512-8RZBJq5smLOa7KslsNsVcSH+KOXf1uDU8yqLeNuVKwmT0T3FA0ZoXlinQfRad7SDcbZZRZE4ov+2v71EnxNyCA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "commander": "~2.20.3"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true,
-          "optional": true
-        }
-      }
+      "version": "3.13.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.10.tgz",
+      "integrity": "sha512-57H3ACYFXeo1IaZ1w02sfA71wI60MGco/IQFjOqK+WtKoprh7Go2/yvd2HPtoJILO2Or84ncLccI4xoHMTSbGg=="
     },
-    "uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
-      "optional": true
+    "uhyphen": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz",
+      "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw=="
     },
-    "ultron": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
-      "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==",
-      "dev": true
+    "unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      }
     },
     "unbzip2-stream": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz",
-      "integrity": "sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
       "dev": true,
       "requires": {
         "buffer": "^5.2.1",
@@ -23482,68 +52960,56 @@
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
-      "dev": true
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo="
+    },
+    "underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
     },
     "undertaker": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.2.0.tgz",
-      "integrity": "sha1-M52kZGJS0ILcN45wgGcpl1DhG0k=",
-      "dev": true,
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz",
+      "integrity": "sha512-/RXwi5m/Mu3H6IHQGww3GNt1PNXlbeCuclF2QYR14L/2CHPz3DFZkvB5hZ0N/QUkiXWCACML2jXViIQEQc2MLg==",
       "requires": {
         "arr-flatten": "^1.0.1",
         "arr-map": "^2.0.0",
         "bach": "^1.0.0",
         "collection-map": "^1.0.0",
         "es6-weak-map": "^2.0.1",
+        "fast-levenshtein": "^1.0.0",
         "last-run": "^1.1.0",
         "object.defaults": "^1.0.0",
         "object.reduce": "^1.0.0",
         "undertaker-registry": "^1.0.0"
+      },
+      "dependencies": {
+        "fast-levenshtein": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz",
+          "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk="
+        }
       }
     },
     "undertaker-registry": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-1.0.1.tgz",
-      "integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=",
-      "dev": true
+      "integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA="
     },
     "unherit": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.2.tgz",
-      "integrity": "sha512-W3tMnpaMG7ZY6xe/moK04U9fBhi6wEiCYHUW5Mop/wQHf12+79EQGwxYejNdhEz2mkqkBlGwm7pxmgBKMVUj0w==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "xtend": "^4.0.1"
-      }
-    },
-    "unicode-canonical-property-names-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
-      "dev": true
-    },
-    "unicode-match-property-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
+      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
       "dev": true,
       "requires": {
-        "unicode-canonical-property-names-ecmascript": "^1.0.4",
-        "unicode-property-aliases-ecmascript": "^1.0.4"
+        "inherits": "^2.0.0",
+        "xtend": "^4.0.0"
       }
     },
-    "unicode-property-aliases-ecmascript": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz",
-      "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==",
-      "dev": true
-    },
     "unified": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-8.4.1.tgz",
-      "integrity": "sha512-YPj/uIIZSO7mMIZQj/5Z3hDl4lshWYRQGs5TgUCjHTVdklUWH+O94mK5Cy77SEcmEUwGhnUcudMuH/zIwporqw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-8.4.2.tgz",
+      "integrity": "sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==",
       "dev": true,
       "requires": {
         "bail": "^1.0.0",
@@ -23554,9 +53020,9 @@
       },
       "dependencies": {
         "is-plain-obj": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.0.0.tgz",
-          "integrity": "sha512-EYisGhpgSCwspmIuRHGjROWTon2Xp8Z7U03Wubk/bTL5TTRC5R1rGVgyjzBrk9+ULdH6cRD06KRcw/xfqhVYKQ==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
           "dev": true
         }
       }
@@ -23575,23 +53041,6 @@
         "minimist": "^1.2.0",
         "text-table": "^0.2.0",
         "unified-engine": "^7.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "json5": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz",
-          "integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        }
       }
     },
     "unified-engine": {
@@ -23633,55 +53082,13 @@
             "readable-stream": "^3.0.2",
             "typedarray": "^0.0.6"
           }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "figures": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz",
-          "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==",
-          "dev": true,
-          "requires": {
-            "escape-string-regexp": "^1.0.5"
-          }
-        },
-        "ignore": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "readable-stream": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
-          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
         }
       }
     },
     "unified-lint-rule": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/unified-lint-rule/-/unified-lint-rule-1.0.5.tgz",
-      "integrity": "sha512-jOPr/fx8lTzqszEfh46p99jUMqgPlIZ8rNKllEepumISvgfj9lUq1c7BSpVihr0L1df3lkjVHAThRPS7dIyjYg==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/unified-lint-rule/-/unified-lint-rule-1.0.6.tgz",
+      "integrity": "sha512-YPK15YBFwnsVorDFG/u0cVVQN5G2a3V8zv5/N6KN3TCG+ajKtaALcy7u14DCSrJI+gZeyYquFL9cioJXOGXSvg==",
       "dev": true,
       "requires": {
         "wrapped": "^1.0.1"
@@ -23702,7 +53109,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
       "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-      "dev": true,
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
@@ -23713,38 +53119,52 @@
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
-      "dev": true
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
     },
     "uniqs": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
-      "dev": true
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
+    },
+    "unique-filename": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
+      "integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
+      "optional": true,
+      "requires": {
+        "unique-slug": "^4.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
+      "integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
+      "optional": true,
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
     },
     "unique-stream": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.3.1.tgz",
       "integrity": "sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==",
-      "dev": true,
       "requires": {
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "through2-filter": "^3.0.0"
       }
     },
     "unique-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
-      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
       "requires": {
-        "crypto-random-string": "^1.0.0"
+        "crypto-random-string": "^2.0.0"
       }
     },
     "unist-util-generated": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.5.tgz",
-      "integrity": "sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
+      "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==",
       "dev": true
     },
     "unist-util-inspect": {
@@ -23778,29 +53198,30 @@
       "dev": true
     },
     "unist-util-remove-position": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.3.tgz",
-      "integrity": "sha512-CtszTlOjP2sBGYc2zcKA/CvNdTdEs3ozbiJ63IPBxh8iZg42SCCb8m04f8z2+V1aSk5a7BxbZKEdoDjadmBkWA==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
+      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
       "dev": true,
       "requires": {
         "unist-util-visit": "^1.1.0"
       }
     },
     "unist-util-stringify-position": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.1.tgz",
-      "integrity": "sha512-Zqlf6+FRI39Bah8Q6ZnNGrEHUhwJOkHde2MHVk96lLyftfJJckaPslKgzhVcviXj8KcE9UJM9F+a4JEiBUTYgA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
       "dev": true,
       "requires": {
         "@types/unist": "^2.0.2"
       }
     },
     "unist-util-to-list-of-char": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-to-list-of-char/-/unist-util-to-list-of-char-0.1.2.tgz",
-      "integrity": "sha512-5lbFigjFtxEBxx8n9w16UwWjVepQvsamfIlgY3PPDJ+LPR3BmCE7P5ufZM0CE+yizjkuwK8FT8Z0sHfavIc0Cg==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-to-list-of-char/-/unist-util-to-list-of-char-0.1.3.tgz",
+      "integrity": "sha512-f8GrLHdhBKfaW6mzJc25BKeUOqhsuiRXlGrXBtb3pmRT3QCuYS+jH4g7Uf52hjV7TLQN4PGnjzrTFMFXAQaprA==",
       "dev": true,
       "requires": {
+        "unist-util-generated": "^1.1.6",
         "unist-util-visit": "^1.4.0"
       }
     },
@@ -23823,15 +53244,36 @@
       }
     },
     "unistore": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/unistore/-/unistore-3.4.1.tgz",
-      "integrity": "sha512-p2Ej8qqrqcD10Ah0ZUKUU/mhRB8pM4q6gzjxq9kZpgxa8dks7oHT8jDP4CqLhoRof3RXOZLKB9EBV1DTzHiJRw=="
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/unistore/-/unistore-3.5.2.tgz",
+      "integrity": "sha512-2Aa4eX0Ua1umyiI3Eai6Li+wXYOHgaDBGOPB3Hvw7PAVuD30TAyh5kS4yNKb2fLDbQgizvPhKQRcYnOdfsm4VQ=="
+    },
+    "universal-analytics": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.5.3.tgz",
+      "integrity": "sha512-HXSMyIcf2XTvwZ6ZZQLfxfViRm/yTGoRgDeTbojtq6rezeyKB0sTBcKH2fhddnteAHRcHiKgr/ACpbgjGOC6RQ==",
+      "requires": {
+        "debug": "^4.3.1",
+        "uuid": "^8.0.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
+    },
+    "universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
+      "dev": true
     },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
     "unpipe": {
       "version": "1.0.0",
@@ -23841,14 +53283,12 @@
     "unquote": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
-      "dev": true
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
     },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
       "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-      "dev": true,
       "requires": {
         "has-value": "^0.3.1",
         "isobject": "^3.0.0"
@@ -23858,7 +53298,6 @@
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
           "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-          "dev": true,
           "requires": {
             "get-value": "^2.0.3",
             "has-values": "^0.1.4",
@@ -23869,7 +53308,6 @@
               "version": "2.1.0",
               "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
               "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-              "dev": true,
               "requires": {
                 "isarray": "1.0.0"
               }
@@ -23879,68 +53317,132 @@
         "has-values": {
           "version": "0.1.4",
           "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+        }
+      }
+    },
+    "untildify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
+      "integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
+    },
+    "update-notifier": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
+      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
+      "dev": true,
+      "requires": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.1.0",
+        "pupa": "^2.1.1",
+        "semver": "^7.3.4",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
         }
       }
     },
-    "untildify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
-      "integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0"
-      }
-    },
-    "upath": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
-      "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==",
-      "dev": true
-    },
-    "update-notifier": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.0.tgz",
-      "integrity": "sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==",
-      "dev": true,
+    "update-notifier-cjs": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/update-notifier-cjs/-/update-notifier-cjs-5.1.6.tgz",
+      "integrity": "sha512-wgxdSBWv3x/YpMzsWz5G4p4ec7JWD0HCl8W6bmNB6E5Gwo+1ym5oN4hiXpLf0mPySVEJEIsYlkshnplkg2OP9A==",
       "requires": {
-        "boxen": "^4.2.0",
-        "chalk": "^3.0.0",
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
         "configstore": "^5.0.1",
         "has-yarn": "^2.1.0",
         "import-lazy": "^2.1.0",
         "is-ci": "^2.0.0",
-        "is-installed-globally": "^0.3.1",
-        "is-npm": "^4.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
         "is-yarn-global": "^0.3.0",
-        "latest-version": "^5.0.0",
-        "pupa": "^2.0.1",
+        "isomorphic-fetch": "^3.0.0",
+        "pupa": "^2.1.1",
+        "registry-auth-token": "^5.0.1",
+        "registry-url": "^5.1.0",
+        "semver": "^7.3.7",
         "semver-diff": "^3.1.1",
         "xdg-basedir": "^4.0.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -23950,7 +53452,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -23958,26 +53459,25 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
-        "import-lazy": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-          "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
-          "dev": true
+        "registry-auth-token": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz",
+          "integrity": "sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==",
+          "requires": {
+            "@pnpm/npm-conf": "^2.1.0"
+          }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -23985,9 +53485,9 @@
       }
     },
     "uri-js": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -23995,29 +53495,26 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+    },
+    "url-join": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-0.0.1.tgz",
+      "integrity": "sha512-H6dnQ/yPAAVzMQRvEvyz01hhfQL5qRWSEt7BX8t9DqnPw9BjMb64fjIRq76Uvf1hkHp+mTZvEVJ5guXOT0Xqaw=="
     },
     "url-parse-lax": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
       "dev": true,
       "requires": {
-        "prepend-http": "^1.0.1"
+        "prepend-http": "^2.0.0"
       }
     },
-    "url-to-options": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
-      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
-      "dev": true
-    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
-      "dev": true
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
     "user-home": {
       "version": "2.0.0",
@@ -24028,15 +53525,10 @@
         "os-homedir": "^1.0.0"
       }
     },
-    "useragent": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz",
-      "integrity": "sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==",
-      "dev": true,
-      "requires": {
-        "lru-cache": "4.1.x",
-        "tmp": "0.0.x"
-      }
+    "utf8-byte-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
+      "integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E="
     },
     "util": {
       "version": "0.10.4",
@@ -24045,6 +53537,14 @@
       "dev": true,
       "requires": {
         "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        }
       }
     },
     "util-deprecate": {
@@ -24053,13 +53553,14 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-      "dev": true,
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
       "requires": {
-        "define-properties": "^1.1.2",
-        "object.getownpropertydescriptors": "^2.0.3"
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
       }
     },
     "utils-merge": {
@@ -24068,20 +53569,20 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "v8-compile-cache": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
-      "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
     "v8-to-istanbul": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-4.1.3.tgz",
-      "integrity": "sha512-sAjOC+Kki6aJVbUOXJbcR0MnbfjvBzwKZazEJymA2IX49uoOdEdk+4fBq5cXgYgiyKtAyrrJNtBZdOeDIF+Fng==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.0.0.tgz",
+      "integrity": "sha512-LkmXi8UUNxnCC+JlH7/fsfsKr5AU110l+SYGJimWNkWhxbN5EyeOtm1MJ0hhvqMMOhGwBj1Fp70Yv9i+hX0QAg==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.1",
@@ -24098,10 +53599,9 @@
       }
     },
     "v8flags": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.2.tgz",
-      "integrity": "sha512-MtivA7GF24yMPte9Rp/BWGCYQNaUj86zeYxV/x2RRJMKagImbbv3u8iJC57lNhWLPcGLJmHcHmFWkNsplbbLWw==",
-      "dev": true,
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+      "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
       "requires": {
         "homedir-polyfill": "^1.0.1"
       }
@@ -24109,8 +53609,7 @@
     "valid-url": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
-      "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=",
-      "dev": true
+      "integrity": "sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -24124,8 +53623,7 @@
     "value-or-function": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
-      "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=",
-      "dev": true
+      "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM="
     },
     "vary": {
       "version": "1.1.2",
@@ -24135,8 +53633,7 @@
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-      "dev": true
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
     },
     "verror": {
       "version": "1.10.0",
@@ -24149,22 +53646,21 @@
       }
     },
     "vfile": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.0.1.tgz",
-      "integrity": "sha512-lRHFCuC4SQBFr7Uq91oJDJxlnftoTLQ7eKIpMdubhYcVMho4781a8MWXLy3qZrZ0/STD1kRiKc0cQOHm4OkPeA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
       "dev": true,
       "requires": {
         "@types/unist": "^2.0.0",
         "is-buffer": "^2.0.0",
-        "replace-ext": "1.0.0",
         "unist-util-stringify-position": "^2.0.0",
         "vfile-message": "^2.0.0"
       },
       "dependencies": {
         "is-buffer": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
           "dev": true
         }
       }
@@ -24222,25 +53718,25 @@
       }
     },
     "vfile-location": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.5.tgz",
-      "integrity": "sha512-Pa1ey0OzYBkLPxPZI3d9E+S4BmvfVwNAAXrrqGbwTVXWaX2p9kM1zZ+n35UtVM06shmWKH4RPRN8KI80qE3wNQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
       "dev": true
     },
     "vfile-message": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.1.tgz",
-      "integrity": "sha512-KtasSV+uVU7RWhUn4Lw+wW1Zl/nW8JWx7JCPps10Y9JRRIDeDXf8wfBLoOSsJLyo27DqMyAi54C6Jf/d6Kr2Bw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
       "dev": true,
       "requires": {
-        "@types/unist": "^2.0.2",
+        "@types/unist": "^2.0.0",
         "unist-util-stringify-position": "^2.0.0"
       }
     },
     "vfile-reporter": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-6.0.0.tgz",
-      "integrity": "sha512-8Is0XxFxWJUhPJdOg3CyZTqd3ICCWg6r304PuBl818ZG91h4FMS3Q+lrOPS+cs5/DZK3H0+AkJdH0J8JEwKtDA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-6.0.2.tgz",
+      "integrity": "sha512-GN2bH2gs4eLnw/4jPSgfBjo+XCuvnX9elHICJZjVD4+NM0nsUrMTvdjGY5Sc/XG69XVTgLwj7hknQVc6M9FukA==",
       "dev": true,
       "requires": {
         "repeat-string": "^1.5.0",
@@ -24251,44 +53747,6 @@
         "vfile-statistics": "^1.1.0"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz",
-          "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^5.2.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -24301,22 +53759,21 @@
       }
     },
     "vfile-sort": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-2.2.1.tgz",
-      "integrity": "sha512-5dt7xEhC44h0uRQKhbM2JAe0z/naHphIZlMOygtMBM9Nn0pZdaX5fshhwWit9wvsuP8t/wp43nTDRRErO1WK8g==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-2.2.2.tgz",
+      "integrity": "sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA==",
       "dev": true
     },
     "vfile-statistics": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-1.1.3.tgz",
-      "integrity": "sha512-CstaK/ebTz1W3Qp41Bt9Lj/2DmumFsCwC2sKahDNSPh0mPh7/UyMLCoU8ZBX34CRU0d61B4W41yIFsV0NKMZeA==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-1.1.4.tgz",
+      "integrity": "sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA==",
       "dev": true
     },
     "vinyl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
-      "integrity": "sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==",
-      "dev": true,
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+      "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
       "requires": {
         "clone": "^2.1.1",
         "clone-buffer": "^1.0.0",
@@ -24330,7 +53787,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz",
       "integrity": "sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==",
-      "dev": true,
       "requires": {
         "fs-mkdirp-stream": "^1.0.0",
         "glob-stream": "^6.1.0",
@@ -24351,85 +53807,313 @@
         "vinyl-sourcemap": "^1.1.0"
       },
       "dependencies": {
-        "through2": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-          "dev": true,
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "vinyl-sourcemap": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
+      "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
+      "requires": {
+        "append-buffer": "^1.0.2",
+        "convert-source-map": "^1.5.0",
+        "graceful-fs": "^4.1.6",
+        "normalize-path": "^2.1.1",
+        "now-and-later": "^2.0.0",
+        "remove-bom-buffer": "^3.0.0",
+        "vinyl": "^2.0.0"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        }
+      }
+    },
+    "vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "requires": {
+        "source-map": "^0.5.1"
+      }
+    },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
+    "ware": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
+      "integrity": "sha1-0bFPOdLiy0q4xAmPdW/ksWTkc9Q=",
+      "dev": true,
+      "requires": {
+        "wrap-fn": "^0.1.0"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "web-vitals": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.0.tgz",
+      "integrity": "sha512-f5YnCHVG9Y6uLCePD4tY8bO/Ge15NPEQWtvm3tPzDKygloiqtb4SVqRHBcrIAqo2ztqX5XueqDn97zHF0LdT6w=="
+    },
+    "webdev-infra": {
+      "version": "1.0.54",
+      "resolved": "https://registry.npmjs.org/webdev-infra/-/webdev-infra-1.0.54.tgz",
+      "integrity": "sha512-RDNUe5ttd8L2Kxd9bfGOa8NukevvTQub6LGtdaljiUx69ignK2uQnkOGdwK8TFM03RisXFgpWG54puuOdZbkrg==",
+      "requires": {
+        "@11ty/eleventy": "1.0.2",
+        "@11ty/eleventy-cache-assets": "^2.3.0",
+        "@imgix/js-core": "^3.1.3",
+        "@justinribeiro/lite-youtube": "^0.9.1",
+        "@mdn/browser-compat-data": "5.2.x",
+        "@swc/html": "0.0.18",
+        "async-transforms": "^1.0.9",
+        "browser-media-mime-type": "^1.0.0",
+        "chalk": "4.1.2",
+        "common-tags": "^1.8.0",
+        "csso": "5.0.5",
+        "express": "4.18.2",
+        "fast-glob": "3.2.12",
+        "js-yaml": "4.1.0",
+        "lit-element": "^2.5.1",
+        "lodash.get": "4.4.2",
+        "lodash.set": "4.3.2",
+        "markdown-it": "^12.3.2",
+        "node-mocks-http": "1.12.1",
+        "nunjucks": "3.2.3",
+        "piscina": "^3.2.0",
+        "purgecss": "5.0.0",
+        "querystring": "^0.2.1",
+        "striptags": "^3.1.1"
+      },
+      "dependencies": {
+        "@mdn/browser-compat-data": {
+          "version": "5.2.67",
+          "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.2.67.tgz",
+          "integrity": "sha512-AoLSQvglknsEyYoDHbDMGvMVt78PopMz4Kzzp+cQNlge0zGXn+QtwmIizAU+n0htMXSjNFfQOk2GgpQIrOZu0w=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "commander": {
+          "version": "9.5.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+          "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
+        },
+        "css-tree": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+          "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+          "requires": {
+            "mdn-data": "2.0.28",
+            "source-map-js": "^1.0.1"
+          }
+        },
+        "csso": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+          "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+          "requires": {
+            "css-tree": "~2.2.0"
+          }
+        },
+        "glob": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
           "requires": {
-            "readable-stream": "~2.3.6",
-            "xtend": "~4.0.1"
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
           }
-        }
-      }
-    },
-    "vinyl-sourcemap": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
-      "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
-      "dev": true,
-      "requires": {
-        "append-buffer": "^1.0.2",
-        "convert-source-map": "^1.5.0",
-        "graceful-fs": "^4.1.6",
-        "normalize-path": "^2.1.1",
-        "now-and-later": "^2.0.0",
-        "remove-bom-buffer": "^3.0.0",
-        "vinyl": "^2.0.0"
-      },
-      "dependencies": {
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-          "dev": true,
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
           "requires": {
-            "remove-trailing-separator": "^1.0.1"
+            "argparse": "^2.0.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.28",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+          "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+        },
+        "minimatch": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.4.tgz",
+          "integrity": "sha512-U0iNYXt9wALljzfnGkhFSy5sAC6/SCR3JrHrlsdJz4kF8MvhTRQNiC59iUi1iqsitV7abrNAJWElVL9pdnoUgw==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "purgecss": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz",
+          "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==",
+          "requires": {
+            "commander": "^9.0.0",
+            "glob": "^8.0.3",
+            "postcss": "^8.4.4",
+            "postcss-selector-parser": "^6.0.7"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
           }
         }
       }
     },
-    "void-elements": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
-      "dev": true
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
     },
-    "walk": {
-      "version": "2.3.14",
-      "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.14.tgz",
-      "integrity": "sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==",
-      "dev": true,
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
       "requires": {
-        "foreachasync": "^3.0.0"
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
       }
     },
-    "ware": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
-      "integrity": "sha1-0bFPOdLiy0q4xAmPdW/ksWTkc9Q=",
-      "dev": true,
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
+    },
+    "whatwg-fetch": {
+      "version": "3.6.19",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz",
+      "integrity": "sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw=="
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
       "requires": {
-        "wrap-fn": "^0.1.0"
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
       }
     },
-    "web-vitals": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-0.2.3.tgz",
-      "integrity": "sha512-6idlbUoL38El+QS320Qz6h4QSZLaWw3CHiJWBtQDmFGs72ro+fnukfavTxTdQSlsaoaBuNL/0bqlIhfdtlrx4A=="
-    },
     "which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "requires": {
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
     "which-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
     },
     "which-pm-runs": {
       "version": "1.0.0",
@@ -24437,26 +54121,13 @@
       "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
       "dev": true
     },
-    "wicg-inert": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.0.1.tgz",
-      "integrity": "sha512-ge5a5cTzkESRLPx7saeKVnJsxEZCs2h8Yx9Jnl3IAuYpeL7AO06CVWem7GU2P/HP8X+s6u3OcAiMHOBYpXSNkg=="
-    },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "requires": {
-        "string-width": "^1.0.2 || 2"
-      }
-    },
-    "widest-line": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
-      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
       "dev": true,
       "requires": {
-        "string-width": "^2.1.1"
+        "string-width": "^1.0.2 || 2"
       },
       "dependencies": {
         "ansi-regex": {
@@ -24492,336 +54163,159 @@
         }
       }
     },
-    "window-size": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.2.0.tgz",
-      "integrity": "sha1-tDFbtCFKPXBY6+7okuE/ok2YsHU=",
-      "dev": true
+    "widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "requires": {
+        "string-width": "^4.0.0"
+      }
     },
     "winston": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-3.2.1.tgz",
-      "integrity": "sha512-zU6vgnS9dAWCEKg/QYigd6cgMVVNwyTzKs81XZtTFuRwJOcDdBg7AU0mXVyNbs7O5RH2zdv+BdNZUlx7mXPuOw==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.1",
-        "diagnostics": "^1.1.1",
-        "is-stream": "^1.1.0",
-        "logform": "^2.1.1",
-        "one-time": "0.0.4",
-        "readable-stream": "^3.1.1",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-3.10.0.tgz",
+      "integrity": "sha512-nT6SIDaE9B7ZRO0u3UvdrimG0HkB7dSTAgInQnNR2SOPJ4bvq5q79+pXLftKmP52lJGW15+H5MCK0nM9D3KB/g==",
+      "requires": {
+        "@colors/colors": "1.5.0",
+        "@dabh/diagnostics": "^2.0.2",
+        "async": "^3.2.3",
+        "is-stream": "^2.0.0",
+        "logform": "^2.4.0",
+        "one-time": "^1.0.0",
+        "readable-stream": "^3.4.0",
+        "safe-stable-stringify": "^2.3.1",
         "stack-trace": "0.0.x",
         "triple-beam": "^1.3.0",
-        "winston-transport": "^4.3.0"
-      },
-      "dependencies": {
-        "async": {
-          "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-          "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.17.14"
-          }
-        },
-        "readable-stream": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz",
-          "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
+        "winston-transport": "^4.5.0"
       }
     },
     "winston-transport": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.3.0.tgz",
-      "integrity": "sha512-B2wPuwUi3vhzn/51Uukcao4dIduEiPOcOt9HJ3QeaXgkJ5Z7UwpBzxS4ZGNHtrxrUvTwemsQiSys0ihOf8Mp1A==",
-      "dev": true,
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.5.0.tgz",
+      "integrity": "sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==",
       "requires": {
-        "readable-stream": "^2.3.6",
-        "triple-beam": "^1.2.0"
+        "logform": "^2.3.2",
+        "readable-stream": "^3.6.0",
+        "triple-beam": "^1.3.0"
       }
     },
     "with": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
-      "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
-      "dev": true,
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
       "requires": {
-        "acorn": "^3.1.0",
-        "acorn-globals": "^3.0.0"
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
+        "assert-never": "^1.2.1",
+        "babel-walk": "3.0.0-canary-5"
       }
     },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
-      "dev": true
-    },
-    "workbox-background-sync": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-5.1.3.tgz",
-      "integrity": "sha512-V/R95aPxYjbKCaVzUTihrZ9ObGOnzoA5n60r0DQ747p8Pj15/dDTYixonKhhlvavTiNezUrp+wTQBvZvcd/ETA==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-broadcast-update": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-5.1.3.tgz",
-      "integrity": "sha512-HJ7FDmgweRcYp8fMiFbkmhaTjMYhMByURe5+TempnCi7cT5NNbyaG4T+rg8NWYxAeumSAB3JQF6XD/z34vRRHA==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
     },
-    "workbox-build": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-5.1.3.tgz",
-      "integrity": "sha512-cssa2cKAi/FNp2P2m2DjF/UsXlVX6b1HgkXOjBTraFkIeyZEKxN1F1DnxOpGkdM/bPPRa7y5OmUvjOpgOd9apA==",
-      "dev": true,
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "requires": {
-        "@babel/core": "^7.8.4",
-        "@babel/preset-env": "^7.8.4",
-        "@babel/runtime": "^7.8.4",
-        "@hapi/joi": "^15.1.0",
-        "@rollup/plugin-node-resolve": "^7.1.1",
-        "@rollup/plugin-replace": "^2.3.1",
-        "@surma/rollup-plugin-off-main-thread": "^1.1.1",
-        "common-tags": "^1.8.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "fs-extra": "^8.1.0",
-        "glob": "^7.1.6",
-        "lodash.template": "^4.5.0",
-        "pretty-bytes": "^5.3.0",
-        "rollup": "^1.31.1",
-        "rollup-plugin-babel": "^4.3.3",
-        "rollup-plugin-terser": "^5.2.0",
-        "source-map": "^0.7.3",
-        "source-map-url": "^0.4.0",
-        "stringify-object": "^3.3.0",
-        "strip-comments": "^1.0.2",
-        "tempy": "^0.3.0",
-        "upath": "^1.2.0",
-        "workbox-background-sync": "^5.1.3",
-        "workbox-broadcast-update": "^5.1.3",
-        "workbox-cacheable-response": "^5.1.3",
-        "workbox-core": "^5.1.3",
-        "workbox-expiration": "^5.1.3",
-        "workbox-google-analytics": "^5.1.3",
-        "workbox-navigation-preload": "^5.1.3",
-        "workbox-precaching": "^5.1.3",
-        "workbox-range-requests": "^5.1.3",
-        "workbox-routing": "^5.1.3",
-        "workbox-strategies": "^5.1.3",
-        "workbox-streams": "^5.1.3",
-        "workbox-sw": "^5.1.3",
-        "workbox-window": "^5.1.3"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
-          "dev": true
-        },
-        "fast-json-stable-stringify": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-          "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-          "dev": true
-        },
-        "fs-extra": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.2.4",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-          "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-          "dev": true
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "rollup": {
-          "version": "1.32.1",
-          "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
-          "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==",
-          "dev": true,
-          "requires": {
-            "@types/estree": "*",
-            "@types/node": "*",
-            "acorn": "^7.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        },
-        "upath": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-          "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-          "dev": true
-        }
-      }
-    },
-    "workbox-cacheable-response": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-5.1.3.tgz",
-      "integrity": "sha512-lOJEwK2T4KWFNdhRFUKxTPBIO5hIYm9E/nYgMq5h/IH3iHPHlBPuFwRMaQy+TTCGWWTA85NomQOjVw1bj65RLw==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-core": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-5.1.3.tgz",
-      "integrity": "sha512-TFSIPxxciX9sFaj0FDiohBeIKpwMcCyNduydi9i3LChItcndDS6TJpErxybv8aBWeCMraXt33TWtF6kKuIObNw==",
-      "dev": true
-    },
-    "workbox-expiration": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-5.1.3.tgz",
-      "integrity": "sha512-8YhpmIHqIx+xmtxONADc+di4a3zzCsvVHLiKq6T3vJZUPnqV2jzx+51+UHMUh3T5w5Z5SFC14l0V/jesRbuMKg==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-google-analytics": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-5.1.3.tgz",
-      "integrity": "sha512-ouK6xIJa+raFcO29TgwKFU/Hv1ejqSYzCzH9lI2B/4z/Wdnb8maL6mMIojQ8j5SohwKswMZmLDl0Az2PCmX11w==",
-      "dev": true,
-      "requires": {
-        "workbox-background-sync": "^5.1.3",
-        "workbox-core": "^5.1.3",
-        "workbox-routing": "^5.1.3",
-        "workbox-strategies": "^5.1.3"
-      }
-    },
-    "workbox-navigation-preload": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-5.1.3.tgz",
-      "integrity": "sha512-29SPQMAccOgbq3BT9Gz7k+ydy0mcKKR0Rmkmd46tnujutiL4ooE57fBhwsA+c6OlLcYdisvilKlV2YWEtKWfgQ==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-precaching": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-5.1.3.tgz",
-      "integrity": "sha512-9jjBiB00AOI0NnI320ddnhvlL3bjMrDoI3211kEaxcRWh0N2fX25uVn0O8N8u1gWY4tIfwZAn/DgtAU13cFhYA==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-range-requests": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-5.1.3.tgz",
-      "integrity": "sha512-uUvEoyEUx86LJc7mtmy/6U8xuK0guXU2FnPimt17zDbsC8FSOaPxc92rxtD6xmDSYrI4FqIebypBCjgIe+sfxA==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-routing": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-5.1.3.tgz",
-      "integrity": "sha512-F+sAp9Iy3lVl3BEG+pzXWVq4AftzjiFpHDaZ4Kf4vLoBoKQE0hIHet4zE5DpHqYdyw+Udhp4wrfHamX6PN6z1Q==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
-      }
-    },
-    "workbox-strategies": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-5.1.3.tgz",
-      "integrity": "sha512-wiXHfmOKnWABeIVW+/ye0e00+2CcS5y7SIj2f9zcdy2ZLEbcOf7B+yOl5OrWpBGlTUwRjIYhV++ZqiKm3Dc+8w==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3",
-        "workbox-routing": "^5.1.3"
-      }
-    },
-    "workbox-streams": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-5.1.3.tgz",
-      "integrity": "sha512-8kt70eBd1RXL0qenxEnch3Cd7VyW3O0CkeGBN4Bikt307nIV5Q0JciLA5o0CRteijawYOiTq0/px4GDBv1obgQ==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3",
-        "workbox-routing": "^5.1.3"
-      }
-    },
-    "workbox-sw": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-5.1.3.tgz",
-      "integrity": "sha512-Syk6RhYr/8VdFwXrxo5IpVz8Og2xapHTWJhqsZRF+TbxSvlaJs8hrvVPd7edn5ZiiVdPhE9NTeOTOg1+D+FGoA==",
-      "dev": true
-    },
-    "workbox-window": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-5.1.3.tgz",
-      "integrity": "sha512-oYvfVtPLET7FUrhOzbk0R+aATVmpdQBkmDqwyFH4W2dfVqJXTvTXzuGP5Pn9oZ8jMTB3AYW43yhYBlLYM3mYyg==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "^5.1.3"
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
       }
     },
-    "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "optional": true,
       "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "optional": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
       }
     },
     "wrap-fn": {
@@ -24831,14 +54325,6 @@
       "dev": true,
       "requires": {
         "co": "3.1.0"
-      },
-      "dependencies": {
-        "co": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
-          "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g=",
-          "dev": true
-        }
       }
     },
     "wrapped": {
@@ -24849,14 +54335,6 @@
       "requires": {
         "co": "3.1.0",
         "sliced": "^1.0.1"
-      },
-      "dependencies": {
-        "co": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
-          "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g=",
-          "dev": true
-        }
       }
     },
     "wrappy": {
@@ -24864,20 +54342,10 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
-    "write": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
-      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
-      "dev": true,
-      "requires": {
-        "mkdirp": "^0.5.1"
-      }
-    },
     "write-file-atomic": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
       "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4",
         "is-typedarray": "^1.0.0",
@@ -24886,13 +54354,10 @@
       }
     },
     "ws": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz",
-      "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==",
-      "dev": true,
-      "requires": {
-        "async-limiter": "~1.0.0"
-      }
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "requires": {}
     },
     "x-is-string": {
       "version": "0.1.0",
@@ -24903,25 +54368,32 @@
     "xdg-basedir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
-      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
-      "dev": true
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
+    },
+    "xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg=="
+    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
     },
     "xmlhttprequest-ssl": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
-      "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
     },
     "xtend": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
-      "dev": true
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
     },
     "yallist": {
       "version": "2.1.2",
@@ -24929,114 +54401,110 @@
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
     "yaml": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.8.3.tgz",
-      "integrity": "sha512-X/v7VDnK+sxbQ2Imq4Jt2PRUsRsP7UcpSl3Llg6+NRRqWLIvxkMFYtH1FmvwNGYRKKPa+EPA4qDBlI9WVG1UKw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.8.7"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.9.2",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
-          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
-          "dev": true,
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.13.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-          "dev": true
-        }
-      }
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
     },
     "yaml-front-matter": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.0.0.tgz",
-      "integrity": "sha1-EcN4xU6sMGGoLLr2k6abTkxE9IQ=",
-      "dev": true,
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.1.1.tgz",
+      "integrity": "sha512-ULGbghCLsN8Hs8vfExlqrJIe8Hl2TUjD7/zsIGMP8U+dgRXEsDXk4yydxeZJgdGiimP1XB7zhmhOB4/HyfqOyQ==",
       "requires": {
-        "commander": "1.0.0",
-        "js-yaml": "^3.10.0"
+        "commander": "^6.2.0",
+        "js-yaml": "^3.14.1"
       },
       "dependencies": {
         "commander": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz",
-          "integrity": "sha1-XmqI5wcP9ZCINurRkWlUjDD5C80=",
-          "dev": true
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
         }
       }
     },
     "yargs": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.4.0.tgz",
-      "integrity": "sha1-gW4ahm1VmMzzTlWW3c4i2S2kkNQ=",
-      "dev": true,
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
       "requires": {
-        "camelcase": "^3.0.0",
-        "cliui": "^3.2.0",
-        "decamelize": "^1.1.1",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^1.4.0",
-        "read-pkg-up": "^1.0.1",
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
-        "set-blocking": "^2.0.0",
-        "string-width": "^1.0.2",
-        "which-module": "^1.0.0",
-        "window-size": "^0.2.0",
-        "y18n": "^3.2.1",
-        "yargs-parser": "^4.1.0"
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "cliui": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+          "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.1",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
+        }
       }
     },
     "yargs-parser": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
-      "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
-      "dev": true,
-      "requires": {
-        "camelcase": "^3.0.0"
-      }
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     },
     "yargs-unparser": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.5.0.tgz",
-      "integrity": "sha512-HK25qidFTCVuj/D1VfNiEndpLIeJN78aqgR23nL3y4N0U/91cOAzqfHlF8n2BvoNDcZmJKin3ddNSvOxSr8flw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
+      "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==",
       "dev": true,
       "requires": {
         "flat": "^4.1.0",
-        "lodash": "^4.17.11",
-        "yargs": "^12.0.5"
+        "lodash": "^4.17.15",
+        "yargs": "^13.3.0"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
         "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "dev": true,
           "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
           }
         },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -25046,87 +54514,96 @@
             "locate-path": "^3.0.0"
           }
         },
-        "invert-kv": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-          "dev": true
-        },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
           "dev": true
         },
-        "lcid": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "dev": true,
           "requires": {
-            "invert-kv": "^2.0.0"
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
           }
         },
-        "os-locale": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "dev": true,
           "requires": {
-            "execa": "^1.0.0",
-            "lcid": "^2.0.0",
-            "mem": "^4.0.0"
+            "p-limit": "^2.0.0"
           }
         },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
         "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
+            "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
+            "strip-ansi": "^5.1.0"
           }
         },
         "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^3.0.0"
+            "ansi-regex": "^4.1.0"
           }
         },
-        "which-module": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
           "dev": true
         },
         "yargs": {
-          "version": "12.0.5",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "dev": true,
           "requires": {
-            "cliui": "^4.0.0",
-            "decamelize": "^1.2.0",
+            "cliui": "^5.0.0",
             "find-up": "^3.0.0",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^3.0.0",
+            "get-caller-file": "^2.0.1",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
+            "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
+            "string-width": "^3.0.0",
             "which-module": "^2.0.0",
-            "y18n": "^3.2.1 || ^4.0.0",
-            "yargs-parser": "^11.1.1"
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -25145,11 +54622,60 @@
         "fd-slicer": "~1.1.0"
       }
     },
-    "yeast": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=",
-      "dev": true
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "requires": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "archiver-utils": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+          "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+          "requires": {
+            "glob": "^7.2.3",
+            "graceful-fs": "^4.2.0",
+            "lazystream": "^1.0.0",
+            "lodash.defaults": "^4.2.0",
+            "lodash.difference": "^4.5.0",
+            "lodash.flatten": "^4.4.0",
+            "lodash.isplainobject": "^4.0.6",
+            "lodash.union": "^4.6.0",
+            "normalize-path": "^3.0.0",
+            "readable-stream": "^3.6.0"
+          }
+        },
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c790ca2b687..0e709efa5ca 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,11 @@
 {
   "name": "web.dev",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "scripts": {
-    "build": "npm-run-all clean sass gulp rollup eleventy rollup-sw",
-    "clean": "rm -rf dist",
+    "algolia": "node ./run-algolia.js",
+    "build": "npm-run-all clean gulp ignore rollup eleventy gulp:default-locale firebase-config",
+    "clean": "rimraf dist",
+    "cloud-secrets": "node ./cloud-secrets.js",
     "coverage:integration": "c8 npm-run-all test:lib test:unit test:integration",
     "coverage:unit": "c8 npm run test:unit",
     "coverage": "npm-run-all coverage:unit coverage:integration",
@@ -12,146 +14,165 @@
     "debug:test:integration": "node --inspect-brk ./node_modules/.bin/mocha ./test/integration",
     "debug:test:lib": "TEST_MODE=debug npm-run-all clean rollup --parallel watch:rollup karma",
     "debug:test:unit": "node --inspect-brk ./node_modules/.bin/mocha ./test/unit",
-    "deploy:cleanup": "node ./tools/cleanup-versions/index.js web-dev-production-1",
-    "deploy": "ELEVENTY_ENV=prod npm run build && node index-algolia.js && gcloud app deploy --project web-dev-production-1 --quiet",
-    "dev": "npm-run-all clean rollup rollup-sw sass --parallel --race watch:rollup watch:sass watch:eleventy watch:gulp watch:rollup-sw start",
+    "deploy": "ELEVENTY_ENV=prod npm-run-all build deploy:firebase algolia",
+    "deploy:firebase": "firebase deploy --non-interactive",
+    "dev": "npm-run-all clean ignore rollup gulp eleventy --parallel watch:rollup watch:eleventy watch:gulp watch:patterns firebase-config start",
+    "dev:light": "npm-run-all clean ignore rollup gulp eleventy --parallel watch:rollup watch:eleventy watch:gulp watch:patterns firebase-config eleventy:serve",
     "eleventy": "eleventy --quiet",
+    "eleventy:serve": "eleventy --quiet --serve",
+    "firebase-config": "node firebase-config.js",
+    "gulp:default-locale": "npx gulp default-locale",
+    "gulp:misc": "npx gulp copy-misc",
+    "gulp:sass": "npx gulp sass",
     "gulp": "npx gulp build",
+    "ignore": "node ./tools/eleventyignore",
     "karma": "karma start",
-    "lint:js": "gts check",
+    "lint:js": "gts lint",
     "lint:md": "remark -q -f .",
     "lint:scss": "sass-lint -v -q",
+    "lint:types": "tsc --noEmit",
     "lint": "npm-run-all lint:md lint:scss lint:js",
-    "percy": "PERCY=true npm-run-all build --parallel --race start snapshots",
-    "updated": "node ./tools/update-updated/index.js",
-    "rollup": "node build.js",
-    "rollup-sw": "node build-sw.js",
-    "sass": "node ./compile-css.js",
+    "patterns:create": "node src/component-library/pattern-generator.js",
+    "percy": "PERCY=true npm-run-all ignore build snapshots:firebase",
+    "postinstall": "npm ci --prefix functions",
+    "rollup": "rollup -c",
     "snapshots": "percy exec --config ./tools/percy/.percy.conf.yml -- node tools/percy/snapshots.js",
-    "stage:cleanup": "node ./tools/cleanup-versions/index.js web-dev-staging",
-    "stage:personal": "ELEVENTY_ENV=prod npm run build && gcloud app deploy --project web-dev-staging --quiet --no-promote",
-    "stage": "ELEVENTY_ENV=prod npm run build && gcloud app deploy --project web-dev-staging --quiet",
-    "start": "node ./server.js",
-    "test:integration": "mocha ./test/integration",
-    "test:lib": "npm-run-all clean rollup karma",
-    "test:unit": "mocha ./test/unit && npm run test:lib",
-    "test": "npm run test:unit && npm run test:lib && npm run test:integration",
-    "watch:eleventy": "eleventy --watch --quiet",
+    "snapshots:firebase": "firebase emulators:exec 'npm run snapshots'",
+    "stage": "ELEVENTY_ENV=prod npm-run-all build stage:up",
+    "stage:up": "firebase hosting:channel:deploy staging",
+    "stage:down": "firebase hosting:channel:delete staging",
+    "start": "firebase emulators:start",
+    "test:integration": "NODE_OPTIONS='--max-old-space-size=8192' ELEVENTY_ENV=staging npm-run-all build && mocha ./test/integration",
+    "test:lib": "ELEVENTY_ENV=test npm-run-all gulp rollup karma",
+    "test:unit": "mocha ./test/unit",
+    "test": "npm-run-all test:unit test:lib test:integration",
+    "translated": "node ./tools/update-translated/index.js",
+    "updated": "node ./tools/update-updated/index.js",
+    "version-check": "node version-check.js",
+    "watch:eleventy": "chokidar \"src/site/**/*\" -c \"npm run eleventy\"",
+    "watch:patterns": "chokidar \"src/components/**/*\" -c \"npm run eleventy\"",
     "watch:gulp": "npx gulp build --silent && gulp watch --silent",
-    "watch:rollup": "chokidar \"src/lib/**/*.{js,scss}\" -c --silent \"npm run rollup\"",
-    "watch:rollup-sw": "chokidar \"src/lib/**/*.js\" -c --silent \"npm run rollup-sw\"",
-    "watch:sass": "chokidar \"src/styles/**/*.scss\" -c --silent \"npm run sass\"",
+    "watch:rollup": "chokidar \"src/lib/**/*.{js,scss}\" --silent -c \"npm run rollup\"",
     "watch:test:lib": "TEST_MODE=dev npm-run-all clean rollup --parallel watch:rollup karma"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@webcomponents/webcomponentsjs": "^2.3.0",
-    "algoliasearch": "^4.1.0",
-    "babel-eslint": "^10.0.3",
-    "compression": "^1.7.4",
-    "cookie-parser": "^1.4.5",
-    "escape-string-regexp": "^2.0.0",
-    "express": "^4.17.1",
-    "focus-visible": "^5.0.2",
-    "idb-keyval": "^3.2.0",
-    "iso-639-1": "^2.1.0",
-    "js-cookie": "^2.2.1",
-    "js-yaml": "^3.13.1",
-    "lit-element": "^2.2.0",
-    "lit-html": "^1.2.1",
-    "pretty-ms": "^7.0.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-virtual": "^1.0.1",
-    "terser": "^4.6.4",
-    "unistore": "^3.4.1",
-    "web-vitals": "^0.2.3",
-    "wicg-inert": "^3.0.1"
-  },
-  "devDependencies": {
-    "@11ty/eleventy": "^0.11.0",
-    "@11ty/eleventy-plugin-rss": "^1.0.7",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
-    "@percy/script": "^1.0.3",
-    "@surma/rollup-plugin-off-main-thread": "^1.4.1",
-    "@types/node": "^13.11.1",
-    "ansi-colors": "^3.2.4",
+    "@11ty/eleventy": "^1.0.1",
+    "@11ty/eleventy-cache-assets": "^2.3.0",
+    "@11ty/eleventy-plugin-rss": "^1.1.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@google-cloud/cloudbuild": "^2.6.0",
+    "@google-cloud/error-reporting": "^2.0.3",
+    "@google-cloud/secret-manager": "^3.10.0",
+    "@mdn/browser-compat-data": "5.3.9",
+    "@minify-html/node": "^0.9.2",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-virtual": "^2.0.3",
+    "algoliasearch": "^4.8.6",
     "autoprefixer": "^9.6.1",
-    "c8": "^7.1.0",
     "chalk": "^2.4.2",
     "cheerio": "^1.0.0-rc.3",
-    "chokidar-cli": "^1.2.2",
     "common-tags": "^1.8.0",
+    "csso": "^4.2.0",
     "dotenv": "^8.2.0",
-    "fancy-log": "^1.3.3",
-    "gts": "^2.0.2",
+    "fast-glob": "^3.2.7",
+    "firebase": "^9.0.0-beta.7",
+    "firebase-tools": "^12.6.1",
+    "gorko": "^0.8.0",
+    "gray-matter": "^4.0.3",
     "gulp": "^4.0.0",
-    "gulp-imagemin": "^7.1.0",
-    "gulp-rename": "^1.4.0",
-    "husky": "^4.2.3",
-    "imagemin-mozjpeg": "^8.0.0",
-    "imagemin-pngquant": "^7.0.0",
-    "intl-list-format": "^1.0.3",
-    "karma": "^4.2.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-coverage": "^2.0.2",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.32",
+    "gulp-sass": "^5.0.0",
+    "iso-639-1": "^2.1.0",
+    "js-cookie": "^2.2.1",
+    "js-yaml": "^3.14.1",
+    "lighthouse": "9.3.1",
+    "lit": "^2.2.2",
+    "lodash.get": "^4.4.2",
     "luxon": "^1.12.1",
-    "markdown-it": "^8.4.2",
+    "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^5.0.2",
-    "markdown-it-attrs": "^3.0.0",
-    "mocha": "^6.2.0",
+    "markdown-it-attrs": "^4.1.4",
+    "markdown-it-deflist": "^2.1.0",
     "moment": "^2.24.0",
-    "node-fetch": "^2.3.0",
+    "node-fetch": "^2.6.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.27",
-    "prismjs": "^1.21.0",
+    "nunjucks": "^3.2.3",
+    "postcss": "^8.2.10",
+    "prettier": "^2.3.2",
+    "prismjs": "^1.28.0",
+    "purgecss": "^4.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.64.0",
+    "rollup-plugin-istanbul": "^3.0.0",
+    "rollup-plugin-postcss": "^2.9.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.32.11",
+    "slugify": "^1.4.5",
+    "striptags": "^3.2.0",
+    "terser": "^5.9.0",
+    "truncate-utf8-bytes": "^1.0.2",
+    "unistore": "^3.4.1",
+    "web-vitals": "^3.5.0",
+    "webdev-infra": "1.0.54",
+    "yaml-front-matter": "^4.0.0"
+  },
+  "devDependencies": {
+    "@actions/core": "^1.9.1",
+    "@actions/github": "^5.0.0",
+    "@percy/cli": "^1.0.0-beta.71",
+    "@percy/puppeteer": "^2.0.0",
+    "@types/chai": "^4.3.0",
+    "@types/grecaptcha": "^3.0.3",
+    "@types/gtag.js": "^0.0.12",
+    "@types/gulp": "^4.0.8",
+    "@types/markdown-it": "^12.0.3",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^14.11.2",
+    "@types/nunjucks": "^3.2.0",
+    "@types/resize-observer-browser": "^0.1.3",
+    "babel-eslint": "^10.0.3",
+    "c8": "^7.3.0",
+    "chai": "^4.3.4",
+    "chokidar-cli": "^1.2.3",
+    "eslint-plugin-lit-a11y": "^1.0.1",
+    "gts": "^3.1.0",
+    "husky": "^4.2.3",
+    "karma": "6.4.0",
+    "karma-chrome-launcher": "3.1.1",
+    "karma-coverage": "2.2.0",
+    "karma-mocha": "2.0.1",
+    "karma-sourcemap-loader": "0.3.8",
+    "karma-spec-reporter": "0.0.34",
+    "lint-staged": "13.2.2",
+    "mocha": "^6.2.0",
     "proxyquire": "^2.1.3",
+    "puppeteer": "^12.0.1",
     "remark-cli": "^7.0.0",
     "remark-frontmatter": "^1.3.2",
     "remark-lint": "^6.0.5",
     "remark-lint-are-links-valid": "^1.0.3",
     "remark-lint-no-duplicate-headings-in-section": "^1.0.4",
     "remark-preset-lint-markdown-style-guide": "^2.1.3",
-    "remove-markdown": "^0.3.0",
-    "rollup": "^1.16.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-istanbul": "^2.0.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^2.5.0",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "sass": "^1.22.7",
     "sass-lint": "^1.12.1",
     "scroll-to-bottomjs": "^1.1.0",
-    "slugify": "^1.3.4",
-    "through2": "^3.0.1",
-    "typescript": "^3.8.3",
+    "typescript": "^4.0.3",
     "unified-lint-rule": "^1.0.5",
     "unist-util-generated": "^1.1.5",
     "unist-util-map": "^1.0.5",
     "unist-util-position": "^3.1.0",
     "unist-util-to-list-of-char": "^0.1.2",
-    "unist-util-visit": "^1.4.1",
-    "workbox-build": "^5.1.3",
-    "workbox-cacheable-response": "^5.1.3",
-    "workbox-core": "^5.1.3",
-    "workbox-expiration": "^5.1.3",
-    "workbox-google-analytics": "^5.1.3",
-    "workbox-precaching": "^5.1.3",
-    "workbox-routing": "^5.1.3",
-    "workbox-strategies": "^5.1.3",
-    "yaml-front-matter": "^4.0.0"
-  },
-  "optionalDependencies": {
-    "node-sass": "^4.12.0"
+    "unist-util-visit": "^1.4.1"
   },
   "private": true,
   "engines": {
-    "node": "12.x"
+    "node": ">=14"
   },
   "browserslist": [
     "last 2 versions",
     "not ie <= 11"
-  ]
+  ],
+  "volta": {
+    "node": "16.14.2"
+  }
 }
diff --git a/redirect-handler.js b/redirect-handler.js
deleted file mode 100644
index c92b1d3a4af..00000000000
--- a/redirect-handler.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const yaml = require('js-yaml');
-const fs = require('fs');
-const escapeStringRegexp = require('escape-string-regexp');
-
-const baseUrlPrefix = 'https://web.dev/';
-
-/**
- * Normalizes the passed path (not a whole URL) to ensure that it ends with a
- * simple trailing slash. Removes "index.html" if found.
- *
- * @param {string} path to normalize
- * @return {string}
- */
-function ensureTrailingSlashOnly(path) {
-  if (path.endsWith('/index.html')) {
-    return path.slice(0, -'index.html'.length);
-  } else if (!path.endsWith('/')) {
-    return `${path}/`;
-  }
-  return path;
-}
-
-/**
- * Builds a method which returns a URL to redirect to.
- *
- * @param {string} yamlSource to parse redirects from
- * @param {string} baseUrlPrefix domain prefix to use, e.g. "https://web.dev/"
- * @return {function(string): ?string}
- */
-function prepareHandler(yamlSource, baseUrlPrefix) {
-  const doc = yaml.safeLoad(yamlSource);
-  baseUrlPrefix = ensureTrailingSlashOnly(baseUrlPrefix);
-
-  const groupRedirect = {};
-  const singleRedirect = {};
-
-  for (const {from, to} of doc.redirects) {
-    const hasExtra = from.indexOf('...') !== -1;
-    if (!hasExtra) {
-      singleRedirect[ensureTrailingSlashOnly(from)] = to;
-      continue;
-    }
-
-    // "Group" redirects' from must end with "/...", i.e., match the last
-    // whole path component.
-    if (!from.endsWith('/...')) {
-      throw new TypeError(`got redirect with invalid ...: ${from} => ${to}`);
-    }
-    groupRedirect[from.slice(0, -3)] = to;
-  }
-
-  // Build a single RegExp for group matches, for speed of matching.
-  const escaped = Object.keys(groupRedirect).map(escapeStringRegexp);
-  const groupMatcher = new RegExp(`^(${escaped.join('|')})`);
-
-  return (raw) => {
-    let target;
-
-    // Split the raw URL (expected to be "/foo?bar") into path and query parts.
-    const parts = raw.split('?');
-    const path = parts[0];
-    const query = parts[1] || '';
-
-    const url = ensureTrailingSlashOnly(path);
-    if (url in singleRedirect) {
-      target = new URL(singleRedirect[url], baseUrlPrefix);
-    } else {
-      const m = groupMatcher.exec(url);
-      if (!(m && m[1] in groupRedirect)) {
-        return null;
-      }
-      const base = groupRedirect[m[1]];
-      const rest = url.slice(m[1].length);
-
-      if (base.endsWith('/...')) {
-        target = new URL(base.slice(0, -3) + rest, baseUrlPrefix);
-      } else {
-        target = new URL(base, baseUrlPrefix);
-      }
-    }
-
-    // Merge the original request's params into the target. We don't use
-    // Express' req.query here as it expands the query too much, e.g.,
-    // 'foo[bar]=123' ends up like "{foo: {bar: 123}}".
-    const requestParams = new URLSearchParams(query);
-    for (const [key, value] of requestParams) {
-      target.searchParams.append(key, value);
-    }
-
-    // If the result URL starts with "https://web.dev/" (with trailing slash),
-    // then strip it and treat as local. This allows redirects to work in dev,
-    // where the domain is localhost or a staging URL.
-    let s = target.toString();
-    if (s.startsWith(baseUrlPrefix)) {
-      s = '/' + s.substr(baseUrlPrefix.length);
-    }
-    return s;
-  };
-}
-
-/**
- * Builds HTTP middleware that serves redirects for web.dev's _redirects.yaml
- * configuration file, originally from DevSite.
- *
- * @param {string} filename to load configuration from
- * @param {number=} code to use (DevSite uses 301)
- * @return {!Function}
- */
-function build(filename, code = 301) {
-  const handler = prepareHandler(
-    fs.readFileSync(filename, 'utf8'),
-    baseUrlPrefix,
-  );
-
-  return (req, res, next) => {
-    const target = handler(req.url);
-    if (target !== null) {
-      return res.redirect(code, target);
-    }
-    return next();
-  };
-}
-
-module.exports = {
-  build,
-  prepareHandler,
-  baseUrlPrefix,
-  ensureTrailingSlashOnly,
-};
diff --git a/redirects.yaml b/redirects.yaml
new file mode 100644
index 00000000000..a2837e5b417
--- /dev/null
+++ b/redirects.yaml
@@ -0,0 +1,837 @@
+# Master redirects file for web.dev. This mirrors the old DevSite file.
+# There are two types of redirects:
+#
+#  (1) Simple redirects, e.g., "from: /foo"
+#      - These don't match subpaths, like "/foo/bar"
+#      - But it will match similar URLs "/foo", "/foo/" and "/foo/index.html"
+#
+#  (2) Group redirects, e.g., "from: /foo/:part", which will match the top-level
+#      path (with the same rules as (1)) as well as any descendant paths
+#
+# WARNING! Redirects DO NOT take priority over static content.
+# For example, if you try to redirect "/foo" but the site contains a static file
+# "/foo/index.html", the static file will always win.
+
+redirects:
+  # Policies
+
+  - source: /policies
+    destination: https://policies.google.com/
+
+  # Newsletter
+
+  - source: /subscribe
+    destination: /newsletter
+
+  # Pre-v1 redirects
+
+  - source: /fast/using-lighthouse-ci-to-set-a-performance-budget
+    destination: /fast/using-lighthouse-bot-to-set-a-performance-budget
+
+  - source: /fast/defer-unused-css
+    destination: /fast/defer-non-critical-css
+
+  # Pre-v1 codelabs
+
+  - source: /reliable/http-cache/codelab-http-cache
+    destination: /codelab-http-cache
+
+  - source: /fast/serve-images-webp/codelab-serve-images-webp
+    destination: /codelab-serve-images-webp
+
+  - source: /security
+    destination: /secure
+
+  - source: /fast/remove-unused-code/codelab-remove-unused-code
+    destination: /codelab-remove-unused-code
+
+  - source: /fast/serve-responsive-images/codelab-art-direction
+    destination: /codelab-art-direction
+
+  - source: /fast/serve-responsive-images/codelab-art-direction
+    destination: /codelab-art-direction
+
+  - source: /secure/same-origin-policy/codelab-same-origin-fetch
+    destination: /codelab-same-origin-fetch
+
+  - source: /secure/same-origin-policy/codelab-same-origin-iframe
+    destination: /codelab-same-origin-iframe
+
+  - source: /fast/avoid-invisible-text/codelab-avoid-invisible-text
+    destination: /codelab-avoid-invisible-text
+
+  - source: /fast/preload-critical-assets/codelab-preload-web-fonts
+    destination: /codelab-preload-web-fonts
+
+  - source: /fast/serve-responsive-images/codelab-density-descriptors
+    destination: /codelab-density-descriptors
+
+  - source: /discoverable/fix-http-status-codes/codelab-fix-sneaky-404
+    destination: /codelab-fix-sneaky-404
+
+  - source: /installable/discover-installable/codelab-make-installable
+    destination: /codelab-make-installable
+
+  - source: /fast/use-imagemin-to-compress-images/codelab-imagemin-gulp
+    destination: /codelab-imagemin-gulp
+
+  - source: /fast/use-imagemin-to-compress-images/codelab-imagemin-grunt
+    destination: /codelab-imagemin-grunt
+
+  - source: /fast/preload-critical-assets/codelab-preload-critical-assets
+    destination: /codelab-preload-critical-assets
+
+  - source: /fast/replace-gifs-with-videos/codelab-replace-gifs-with-video
+    destination: /codelab-replace-gifs-with-video
+
+  - source: /fast/use-imagemin-to-compress-images/codelab-imagemin-webpack
+    destination: /codelab-imagemin-webpack
+
+  - source: /reliable/service-workers-cache-storage/codelab-service-workers
+    destination: /codelab-service-workers
+
+  - source: /fast/serve-modern-code-to-modern-browsers/codelab-serve-modern-code
+    destination: /codelab-serve-modern-code
+
+  - source: /fast/serve-responsive-images/codelab-specifying-multiple-slot-widths
+    destination: /codelab-specifying-multiple-slot-widths
+
+  - source: /fast/reduce-javascript-payloads-with-code-splitting/codelab-code-splitting
+    destination: /codelab-code-splitting
+
+  - source: /reliable/identify-resources-via-network-panel/codelab-explore-network-panel
+    destination: /codelab-explore-network-panel
+
+  - source: /fast/reduce-network-payloads-using-text-compression/codelab-text-compression
+    destination: /codelab-text-compression
+
+  - source: /fast/use-lazysizes-to-lazyload-images/codelab-use-lazysizes-to-lazyload-images
+    destination: /codelab-use-lazysizes-to-lazyload-images
+
+  - source: /fast/serve-images-with-correct-dimensions/codelab-serve-images-correct-dimensions
+    destination: /codelab-serve-images-correct-dimensions
+
+  - source: /fast/reduce-network-payloads-using-text-compression/codelab-text-compression-brotli
+    destination: /codelab-text-compression-brotli
+
+  - source: /fast/incorporate-performance-budgets-into-your-build-tools/codelab-setting-performance-budgets-with-webpack
+    destination: /codelab-setting-performance-budgets-with-webpack
+
+  # Redirect all pre-v1 paths to the project root.
+  # Before: web.dev/fast/remove-unused-code
+  # After: web.dev/remove-unused-code
+
+  - source: /accessible/:part
+    destination: /:part
+
+  - source: /discoverable/:part
+    destination: /:part
+
+  - source: /fast/:part
+    destination: /:part
+
+  - source: /installable/:part
+    destination: /:part
+
+  - source: /reliable/:part
+    destination: /:part
+
+  - source: /secure/:part
+    destination: /:part
+
+  # Some Google search results indexed the page with `en/`, so we'll redirect it for now
+  - source: /en/:part
+    destination: /:part
+
+  # Redirect duplicative /discoverable URLs to /lighthouse-seo
+
+  - source: /write-descriptive-text
+    destination: /lighthouse-seo
+
+  - source: /tell-search-translated-pages-equal
+    destination: /hreflang
+
+  - source: /tell-search-engine-canonical-url
+    destination: /canonical
+
+  - source: /remove-code-blocking-indexing
+    destination: /is-crawlable
+  - source: /is-crawable
+    destination: /is-crawlable
+
+  - source: /fix-http-status-codes
+    destination: /http-status-code
+
+  - source: /remove-browser-plugins
+    destination: /plugins
+
+  - source: /fix-robot-errors
+    destination: /robots-txt
+
+  - source: /fix-small-fonts
+    destination: /font-size
+
+  - source: /fix-viewport-tag
+    destination: /viewport
+
+  # Redirect older metrics docs
+
+  - source: /layout-instability-api
+    destination: /cls
+
+  - source: /largest-contentful-paint
+    destination: /lcp
+
+  - source: /web-vitals
+    destination: /vitals
+
+  - source: /si
+    destination: /speed-index
+
+  # Redirects Progressive Web App content
+  - source: /wasm
+    destination: /webassembly/
+
+  - source: /opfs
+    destination: /origin-private-file-system/
+
+  - source: /pwa
+    destination: /progressive-web-apps/
+
+  - source: /installable
+    destination: /progressive-web-apps/#make-it-installable
+
+  - source: /discover-installable
+    destination: /progressive-web-apps/#make-it-installable
+
+  - source: /progressive-web-apps/#installable
+    destination: /progressive-web-apps/#make-it-installable
+
+  - source: /push-notifications
+    destination: /push-notifications-overview/
+
+  # Redirect for spec name changes
+
+  - source: /sms-receiver-api-announcement
+    destination: /web-otp
+
+  # Redirect /payments content
+
+  - source: /android-payment-apps-overview
+    destination: /android-payment-app-developers-guide
+
+  - source: /payment-request-basic-card-deprecation
+    destination: https://chromestatus.com/feature/5730051011117056
+
+  # Redirect for misconfigured Lighthouse report
+
+  - source: /image-size-responsive
+    destination: /image-aspect-ratio
+
+  # Redirect for misconfigured Lighthouse report
+
+  # Redirects for Handbook refactors
+
+  - source: /handbook/tags
+    destination: /handbook/yaml-front-matter/#tags
+
+  # Redirect to unified clipobard article
+
+  - source: /image-support-for-async-clipboard
+    destination: /async-clipboard
+
+  # Redirect for renamed Native File System API
+  - source: /native-file-system
+    destination: /file-system-access
+  - source: /browser-nativefs
+    destination: /browser-fs-access
+
+  # Redirect to follow consistent Fugu API naming scheme
+
+  - source: /wakelock
+    destination: /wake-lock
+
+  # Redirects for performance content
+
+  - source: /native-lazy-loading
+    destination: /browser-level-image-lazy-loading
+
+  # Redirects for vanity URLs
+  - source: /scale-on-web
+    destination: /tags/scale-on-web
+  - source: /wordpress-on-wasm
+    destination: /wordpress-playground
+
+  # Redirect for the renamed WebTransport API.
+  - source: /quictransport
+    destination: /webtransport
+
+  # Redirect for consolidated Lighthouse audit for a11y names.
+  - source: /aria-toggle-field-name
+    destination: /aria-name
+  - source: /aria-input-field-name
+    destination: /aria-name
+
+  # Temporary redirect for CORS-RFC1918 guidance on DevTools.
+  # Remove once the actual article is published.
+  - source: /cors-rfc1918-guide
+    destination: /cors-rfc1918-feedback
+
+  # Redirect for style guide alignment
+  - source: /debugging-layout-shifts
+    destination: /debug-layout-shifts
+
+  # Vanity urls for Learn CSS course
+  - source: /learncss
+    destination: /learn/css
+
+  - source: /learnCSS
+    destination: /learn/css
+
+  # Changes for upcoming video...
+  - source: /whats-new-web-vitals-2021
+    destination: /vitals
+    type: 302
+
+  # Redirect for security headers quick reference.
+  - source: /security-headers-cheat-sheet
+    destination: /security-headers
+
+  # Redirects for Media content
+  - source: /media-cheat-sheet
+    destination: /media-conversion
+  - source: /media-eme-basics
+    destination: /media-eme
+  - source: /capturing-images
+    destination: /media-capturing-images
+
+  # Redirects to https://developer.chrome.com/.
+  - source: /browser-flags
+    destination: https://developer.chrome.com/blog/browser-flags/
+  - source: /third-party-origin-trials
+    destination: https://developer.chrome.com/blog/third-party-origin-trials/
+  - source: /fugu-status
+    destination: https://developer.chrome.com/blog/fugu-status/
+  - source: /fugu-showcase
+    destination: https://developer.chrome.com/fugu-showcase/
+  - source: /conversion-measurement
+    destination: https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting/
+  - source: /using-conversion-measurement
+    destination: https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting/
+  - source: /origin-trials
+    destination: https://developer.chrome.com/docs/web-platform/origin-trials/
+  - source: /launch-handler
+    destination: https://developer.chrome.com/docs/web-platform/launch-handler/
+  - source: /gpu
+    destination: https://developer.chrome.com/docs/web-platform/webgpu/
+  - source: /webgpu
+    destination: https://developer.chrome.com/docs/web-platform/webgpu/
+  - source: /storage-foundation
+    destination: https://developer.chrome.com/docs/web-platform/storage-foundation/
+  - source: /app-history-api
+    destination: https://developer.chrome.com/docs/web-platform/navigation-api/
+  - source: /fetch-upload-streaming
+    destination: https://developer.chrome.com/articles/fetch-streaming-requests/
+  - source: /compute-pressure
+    destination: https://developer.chrome.com/docs/web-platform/compute-pressure/
+  - source: /declarative-link-capturing
+    destination: https://developer.chrome.com/docs/web-platform/declarative-link-capturing/
+  - source: /handwriting-recognition
+    destination: https://developer.chrome.com/docs/web-platform/handwriting-recognition/
+  - source: /virtualkeyboard
+    destination: https://developer.chrome.com/docs/web-platform/virtual-keyboard/
+  - source: /workingoffthegrid
+    destination: https://developer.chrome.com/docs/workbox/service-worker-overview/
+  - source: /bluetooth
+    destination: https://developer.chrome.com/articles/bluetooth/
+  - source: /usb
+    destination: https://developer.chrome.com/articles/usb/
+  - source: /periodic-background-sync
+    destination: https://developer.chrome.com/articles/periodic-background-sync/
+  - source: /eyedropper
+    destination: https://developer.chrome.com/articles/eyedropper/
+  - source: /cors-rfc1918-feedback
+    destination: https://developer.chrome.com/articles/cors-rfc1918-feedback/
+  - source: /file-handling
+    destination: https://developer.chrome.com/articles/file-handling/
+  - source: /hid
+    destination: https://developer.chrome.com/articles/hid/
+  - source: /isinputpending
+    destination: https://developer.chrome.com/articles/isinputpending/
+  - source: /webcodecs
+    destination: https://developer.chrome.com/articles/webcodecs
+  - source: /mediastreamtrack-insertable-media-processing
+    destination:  https://developer.chrome.com/articles/mediastreamtrack-insertable-media-processing/
+  - source: /pwa-url-handler
+    destination: https://developer.chrome.com/articles/pwa-url-handler/
+  - source: /reporting-api-migration
+    destination: https://developer.chrome.com/articles/reporting-api-migration/
+  - source: /reporting-api
+    destination: https://developer.chrome.com/articles/reporting-api/
+  - source: /urlpattern
+    destination: https://developer.chrome.com/articles/urlpattern/
+  - source: /contact-picker
+    destination: https://developer.chrome.com/articles/contact-picker/
+  - source: /multi-screen-window-placement
+    destination: https://developer.chrome.com/articles/multi-screen-window-placement/
+  - source: /shape-detection
+    destination: https://developer.chrome.com/articles/shape-detection/
+  - source: /url-protocol-handler
+    destination: https://developer.chrome.com/articles/url-protocol-handler/
+  - source: /websocketstream
+    destination: https://developer.chrome.com/articles/websocketstream/
+  - source: /web-share-target
+    destination: https://developer.chrome.com/articles/web-share-target/
+  - source: /local-fonts
+    destination: https://developer.chrome.com/articles/local-fonts/
+  - source: /notification-triggers
+    destination: https://developer.chrome.com/docs/web-platform/notification-triggers/
+  - source: /badging-api
+    destination:  https://developer.chrome.com/articles/badging-api/
+  - source: /content-indexing-api
+    destination:  https://developer.chrome.com/articles/content-indexing-api/
+  - source: /generic-sensor
+    destination:  https://developer.chrome.com/articles/generic-sensor/
+  - source: /idle-detection
+    destination:  https://developer.chrome.com/articles/idle-detection/
+  - source: /keyboard-lock
+    destination:  https://developer.chrome.com/articles/keyboard-lock/
+  - source: /reporting-observer
+    destination:  https://developer.chrome.com/articles/reporting-observer/
+  - source: /serial
+    destination:  https://developer.chrome.com/articles/serial/
+  - source: /wake-lock
+    destination:  https://developer.chrome.com/articles/wake-lock/
+  - source: /user-agent-client-hints
+    destination: https://developer.chrome.com/articles/user-agent-client-hints/
+  - source: /browser-fs-access
+    destination: https://developer.chrome.com/articles/browser-fs-access/
+  - source: /display-override
+    destination: https://developer.chrome.com/articles/display-override/
+  - source: /file-system-access
+    destination: https://developer.chrome.com/articles/file-system-access/
+  - source: /user-agent-client-hints
+    destination: https://developer.chrome.com/articles/user-agent-client-hints/
+  - source: /nfc
+    destination: https://developer.chrome.com/articles/nfc/
+  - source: /build-for-webusb
+    destination: https://developer.chrome.com/articles/build-for-webusb/
+
+  # Redirect for Aurora
+  - source: /aurora
+    destination: https://developer.chrome.com/blog/introducing-aurora/
+  - source: /introducing-aurora
+    destination: https://developer.chrome.com/blog/introducing-aurora/
+  - source: /inp-in-frameworks
+    destination: https://developer.chrome.com/blog/inp-in-frameworks/
+  - source: /script-component
+    destination: https://developer.chrome.com/blog/script-component/
+  - source: /image-component
+    destination: https://developer.chrome.com/blog/image-component/
+  - source: /aurora-resource-inlining
+    destination: https://developer.chrome.com/blog/aurora-resource-inlining/
+  - source: /conformance
+    destination: https://developer.chrome.com/blog/conformance/
+  - source: /tags/aurora-project
+    destination: https://developer.chrome.com/tags/aurora-project/
+  - source: /declarative-shadow-dom
+    destination: https://developer.chrome.com/articles/declarative-shadow-dom/
+  - source: /gpu-compute
+    destination: https://developer.chrome.com/articles/gpu-compute/
+  - source: /web-bundles
+    destination: https://developer.chrome.com/docs/web-platform/web-bundles/
+  - source: /webtransport
+    destination: https://developer.chrome.com/articles/webtransport/
+  - source: /web-otp
+    destination: https://developer.chrome.com/articles/web-otp/
+  - source: /hid-examples
+    destination: https://developer.chrome.com/articles/hid-examples/
+
+
+
+  # Design system
+  - source: /design-system/component/action
+    destination: /design-system/component/fab
+
+  # web.dev LIVE 2020 event
+  - source: /live
+    destination: /shows/web-dev-live-day-1
+
+  # Redirects old vitals tooling workflow doc to the updated doc
+  - source: /vitals-tools-workflow
+    destination: /vitals-tools
+
+  # Redirects Extending Workbox post to the Using Plugins doc on d.c.c.
+  - source: /extending-workbox
+    destination: https://developer.chrome.com/docs/workbox/using-plugins/
+
+  # Redirects lazysizes post to the browser-level lazy loading post
+  - source: /use-lazysizes-to-lazyload-images
+    destination: /browser-level-image-lazy-loading/
+
+  # Redirects an old performance guides to more recent documentation
+  - source: /performance-get-started
+    destination: /fast/
+  - source: /performance-get-started-graphicalcontent-4
+    destination: /choose-the-right-image-format/
+  - source: /performance-get-started-httpcaching-6
+    destination: /http-cache/
+  - source: /performance-get-started-httprequests-5
+    destination: /optimizing-content-efficiency-eliminate-downloads/
+  - source: /performance-get-started-textcontent-3
+    destination: /optimizing-content-efficiency-optimize-encoding-and-transfer/
+  - source: /performance-get-started-wrapup-7
+    destination: /fast/
+  - source: /speed-txt-compression
+    destination: /reduce-network-payloads-using-text-compression/
+  - source: /webperformance-basics
+    destination: /navigation-and-resource-timing/
+  - source: /priority-hints
+    destination: /fetch-priority/
+
+  # Redirects scrolling performance post to the Intersection Observer post
+  - source: /speed-scrolling
+    destination: /intersectionobserver/
+
+  # Redirects for outdated usage of "Web Vitals"
+  - source: /learn-web-vitals
+    destination: /learn-core-web-vitals/
+  - source: /debug-web-vitals-in-the-field
+    destination: /debug-performance-in-the-field/
+
+  # Redirects for patterns
+  - source: /patterns/web-apps/audio-effects/demo.html
+    destination: /patterns/media/audio-effects/demo.html
+  - source: /patterns/web-apps/audio-effects
+    destination: /patterns/media/audio-effects
+
+  # Redirects for Lighthouse performance content.
+  - source: /lighthouse-performance
+    destination: https://developer.chrome.com/docs/lighthouse/performance/
+  - source: /performance-scoring
+    destination: https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/
+  - source: /bootup-time
+    destination: https://developer.chrome.com/docs/lighthouse/performance/bootup-time/
+  - source: /critical-request-chains
+    destination: https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/
+  - source: /dom-size
+    destination: https://developer.chrome.com/docs/lighthouse/performance/dom-size/
+  - source: /efficient-animated-content
+    destination: https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/
+  - source: /first-contentful-paint
+    destination: https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/
+  - source: /first-cpu-idle
+    destination: https://developer.chrome.com/docs/lighthouse/performance/first-cpu-idle/
+  - source: /first-meaningful-paint
+    destination: https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/
+  - source: /font-display
+    destination: https://developer.chrome.com/docs/lighthouse/performance/font-display/
+  - source: /interactive
+    destination: https://developer.chrome.com/docs/lighthouse/performance/interactive/
+  - source: /lighthouse-largest-contentful-paint
+    destination: https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/
+  - source: /lighthouse-max-potential-fid
+    destination: https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/
+  - source: /lighthouse-total-blocking-time
+    destination: https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/
+  - source: /mainthread-work-breakdown
+    destination: https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/
+  - source: /non-composited-animations
+    destination: https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/
+  - source: /offscreen-images
+    destination: https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/
+  - source: /redirects
+    destination: https://developer.chrome.com/docs/lighthouse/performance/redirects/
+  - source: /render-blocking-resources
+    destination: https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/
+  - source: /resource-summary
+    destination: https://developer.chrome.com/docs/lighthouse/performance/resource-summary/
+  - source: /speed-index
+    destination: https://developer.chrome.com/docs/lighthouse/performance/speed-index/
+  - source: /third-party-facades
+    destination: https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/
+  - source: /third-party-summary
+    destination: https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/
+  - source: /time-to-first-byte
+    destination: https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/
+  - source: /total-byte-weight
+    destination: https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/
+  - source: /unminified-css
+    destination: https://developer.chrome.com/docs/lighthouse/performance/unminified-css/
+  - source: /unminified-javascript
+    destination: https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/
+  - source: /unused-css-rules
+    destination: https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/
+  - source: /unused-javascript
+    destination: https://developer.chrome.com/docs/lighthouse/performance/unused-javascript/
+  - source: /user-timings
+    destination: https://developer.chrome.com/docs/lighthouse/performance/user-timings/
+  - source: /uses-long-cache-ttl
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/
+  - source: /uses-optimized-images
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/
+  - source: /uses-rel-preconnect
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/
+  - source: /uses-rel-preload
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/
+  - source: /uses-responsive-images
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/
+  - source: /uses-text-compression
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/
+  - source: /uses-webp-images
+    destination: https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/
+
+
+  # Redirects for Lighthouse accessibility content.
+  - source: /lighthouse-accessibility
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/
+  - source: /accessibility-scoring
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/scoring/
+  # Redirects accessibility audits, now deferring to axe docs.
+  - source: /accesskeys
+    destination: https://dequeuniversity.com/rules/axe/4.4/accesskeys
+  - source: /bypass
+    destination: https://dequeuniversity.com/rules/axe/4.4/bypass
+  - source: /duplicate-id-active
+    destination: https://dequeuniversity.com/rules/axe/4.4/duplicate-id-active
+  - source: /heading-order
+    destination: https://dequeuniversity.com/rules/axe/4.4/heading-order
+  - source: /tabindex
+    destination: https://dequeuniversity.com/rules/axe/4.4/tabindex
+  - source: /aria-allowed-attr
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr
+  - source: /aria-hidden-body
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-hidden-body
+  - source: /aria-hidden-focus
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus
+  - source: /aria-required-attr
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-required-attr
+  - source: /aria-required-children
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-required-children
+  - source: /aria-required-parent
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-required-parent
+  - source: /aria-roles
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-roles
+  - source: /aria-valid-attr-value
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value
+  - source: /aria-valid-attr
+    destination: https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr
+  - source: /duplicate-id-aria
+    destination: https://dequeuniversity.com/rules/axe/4.4/duplicate-id-aria
+  - source: /button-name
+    destination: https://dequeuniversity.com/rules/axe/4.4/button-name
+  - source: /document-title
+    destination: https://dequeuniversity.com/rules/axe/4.4/document-title
+  - source: /form-field-multiple-labels
+    destination: https://dequeuniversity.com/rules/axe/4.4/form-field-multiple-labels
+  - source: /frame-title
+    destination: https://dequeuniversity.com/rules/axe/4.4/frame-title
+  - source: /image-alt
+    destination: https://dequeuniversity.com/rules/axe/4.4/image-alt
+  - source: /input-image-alt
+    destination: https://dequeuniversity.com/rules/axe/4.4/input-image-alt
+  - source: /label
+    destination: https://dequeuniversity.com/rules/axe/4.4/label
+  - source: /link-name
+    destination: https://dequeuniversity.com/rules/axe/4.4/link-name
+  - source: /object-alt
+    destination: https://dequeuniversity.com/rules/axe/4.4/object-alt
+  - source: /color-contrast
+    destination: https://dequeuniversity.com/rules/axe/4.4/color-contrast
+  - source: /definition-list
+    destination: https://dequeuniversity.com/rules/axe/4.4/definition-list
+  - source: /dlitem
+    destination: https://dequeuniversity.com/rules/axe/4.4/dlitem
+  - source: /list
+    destination: https://dequeuniversity.com/rules/axe/4.4/list
+  - source: /listitem
+    destination: https://dequeuniversity.com/rules/axe/4.4/listitem
+  - source: /layout-table
+    destination: https://dequeuniversity.com/rules/axe/3.5/layout-table
+  - source: /td-headers-attr
+    destination: https://dequeuniversity.com/rules/axe/4.4/td-headers-attr
+  - source: /th-has-data-cells
+    destination: https://dequeuniversity.com/rules/axe/4.4/th-has-data-cells
+  - source: /meta-refresh
+    destination: https://dequeuniversity.com/rules/axe/4.4/meta-refresh
+  - source: /meta-viewport
+    destination: https://dequeuniversity.com/rules/axe/4.4/meta-viewport
+  - source: /audio-caption
+    destination: https://dequeuniversity.com/rules/axe/3.5/audio-caption
+  - source: /video-caption
+    destination: https://dequeuniversity.com/rules/axe/4.4/video-caption
+  - source: /video-description
+    destination: https://dequeuniversity.com/rules/axe/3.3/video-description
+  - source: /html-has-lang
+    destination: https://dequeuniversity.com/rules/axe/4.4/html-has-lang
+  - source: /html-lang-valid
+    destination: https://dequeuniversity.com/rules/axe/4.4/html-lang-valid
+  - source: /valid-lang
+    destination: https://dequeuniversity.com/rules/axe/4.4/valid-lang
+  - source: /aria-name
+    destination: https://dequeuniversity.com/rules/axe/4.4
+  - source: /duplicate-id
+    destination: https://dequeuniversity.com/rules/axe/4.4/duplicate-id-active
+  - source: /heading-levels
+    destination: https://dequeuniversity.com/rules/axe/4.4/heading-order
+  # "Manual" Lighthouse accessibility audits, separate from axe docs.
+  - source: /logical-tab-order
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/logical-tab-order/
+  - source: /focusable-controls
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/focusable-controls/
+  - source: /interactive-element-affordance
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/interactive-element-affordance/
+  - source: /managed-focus
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/managed-focus/
+  - source: /focus-traps
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/focus-traps/
+  - source: /custom-controls-labels
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/custom-controls-labels/
+  - source: /custom-control-roles
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/custom-control-roles/
+  - source: /visual-order-follows-dom
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/visual-order-follows-dom/
+  - source: /offscreen-content-hidden
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/offscreen-content-hidden/
+  - source: /use-landmarks
+    destination: https://developer.chrome.com/docs/lighthouse/accessibility/use-landmarks/
+
+  # Redirects for Lighthouse best practices content.
+  - source: /lighthouse-best-practices
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/
+  - source: /appcache-manifest
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/appcache-manifest/
+  - source: /charset
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/charset/
+  - source: /csp-xss
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/csp-xss/
+  - source: /deprecations
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/deprecations/
+  - source: /doctype
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/doctype/
+  - source: /errors-in-console
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/errors-in-console/
+  - source: /external-anchors-use-rel-noopener
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/
+  - source: /geolocation-on-start
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/geolocation-on-start/
+  - source: /image-aspect-ratio
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/
+  - source: /js-libraries
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/
+  - source: /no-document-write
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/no-document-write/
+  - source: /no-vulnerable-libraries
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/no-vulnerable-libraries/
+  - source: /notification-on-start
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/notification-on-start/
+  - source: /password-inputs-can-be-pasted-into
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/password-inputs-can-be-pasted-into/
+  - source: /uses-http2
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/
+  - source: /uses-passive-event-listeners
+    destination: https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/
+
+  # Redirects for Lighthouse SEO content.
+  - source: /lighthouse-seo
+    destination: https://developer.chrome.com/docs/lighthouse/seo/
+  - source: /canonical
+    destination: https://developer.chrome.com/docs/lighthouse/seo/canonical/
+  - source: /font-size
+    destination: https://developer.chrome.com/docs/lighthouse/seo/font-size/
+  - source: /hreflang
+    destination: https://developer.chrome.com/docs/lighthouse/seo/hreflang/
+  - source: /http-status-code
+    destination: https://developer.chrome.com/docs/lighthouse/seo/http-status-code/
+  - source: /is-crawlable
+    destination: https://developer.chrome.com/docs/lighthouse/seo/is-crawlable/
+  - source: /link-text
+    destination: https://developer.chrome.com/docs/lighthouse/seo/link-text/
+  - source: /meta-description
+    destination: https://developer.chrome.com/docs/lighthouse/seo/meta-description/
+  - source: /plugins
+    destination: https://developer.chrome.com/docs/lighthouse/seo/plugins/
+  - source: /robots-txt
+    destination: https://developer.chrome.com/docs/lighthouse/seo/invalid-robots-txt/
+  - source: /structured-data
+    destination: https://developer.chrome.com/docs/lighthouse/seo/structured-data/
+  - source: /tap-targets
+    destination: https://developer.chrome.com/docs/lighthouse/seo/tap-targets/
+
+  # Redirects for Lighthouse PWA content.
+  - source: /lighthouse-pwa
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/
+  - source: /apple-touch-icon
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/apple-touch-icon/
+  - source: /content-width
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/content-width/
+  - source: /installable-manifest
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/installable-manifest/
+  - source: /is-on-https
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/is-on-https/
+  - source: /load-fast-enough-for-pwa
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/
+  - source: /maskable-icon-audit
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/maskable-icon-audit/
+  - source: /offline-start-url
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/offline-start-url/
+  - source: /pwa-cross-browser
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/pwa-cross-browser/
+  - source: /pwa-each-page-has-url
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/pwa-each-page-has-url/
+  - source: /pwa-page-transitions
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/pwa-page-transitions/
+  - source: /redirects-http
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/redirects-http/
+  - source: /service-worker
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/service-worker/
+  - source: /splash-screen
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/splash-screen/
+  - source: /themed-omnibox
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/themed-omnibox/
+  - source: /viewport
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/viewport/
+  - source: /without-javascript
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/without-javascript/
+  - source: /works-offline
+    destination: https://developer.chrome.com/docs/lighthouse/pwa/works-offline/
+
+  # CrUX guides
+  - source: /chrome-ux-report-api
+    destination: https://developer.chrome.com/blog/chrome-ux-report-api/
+  - source: /chrome-ux-report-bigquery
+    destination: https://developer.chrome.com/blog/chrome-ux-report-bigquery/
+  - source: /chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/es/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/es/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/es/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/es/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/ja/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/ja/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/ko/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/ko/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/pt/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/pt/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/ru/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/ru/chrome-ux-report-looker-studio-dashboard/
+  - source: /i18n/zh/chrome-ux-report-data-studio-dashboard
+    destination: https://developer.chrome.com/blog/zh/chrome-ux-report-looker-studio-dashboard/
+  - source: /chrome-ux-report-pagespeed-insights
+    destination: https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights/
+
+  # Redirects for blogs
+  - source: /blog/native-hardware-click-to-call
+    destination: /blog/click-to-call
+  - source: /blog/native-hardware-device-orientation
+    destination: /blog/device-orientation
+  - source: /blog/native-hardware-fullscreen
+    destination: /blog/fullscreen
+  - source: /blog/native-hardware-user-location
+    destination: /blog/user-location
+  - source: /speculative-prerendering
+    destination: https://developer.chrome.com/blog/prerender-pages/
+  - source: /blog/javascript-async-functions
+    destination: /blog/async-functions
+  - source: /blog/enabling-https-on-your-servers
+    destination: /secure/enable-https
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 00000000000..303f0bc11b4
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,123 @@
+const fs = require('fs');
+const {join} = require('path');
+
+// A Rollup plugin which locates modules using the Node resolution algorithm,
+// for using third party modules in node_modules
+const {nodeResolve} = require('@rollup/plugin-node-resolve');
+
+// A Rollup plugin to convert CommonJS modules to ES6, so they can be included
+// in a Rollup bundle
+const commonjs = require('@rollup/plugin-commonjs');
+
+// A Rollup plugin to minify generated ES bundles. Uses terser under the hood.
+const {terser} = require('rollup-plugin-terser');
+
+// A Rollup plugin to import CSS and inject it into the <head>
+const postcss = require('rollup-plugin-postcss');
+
+// A Rollup plugin to mark modules for Istanbul code coverage.
+const istanbul = require('rollup-plugin-istanbul');
+
+// A Rollup plugin which loads virtual modules from memory.
+const virtual = require('@rollup/plugin-virtual');
+
+/**
+ * Virtual imports made available to all bundles. Used for site config and globals.
+ */
+const site = require('./src/site/_data/site');
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const buildVirtualJSON = require('./src/build/virtual-json');
+const virtualImports = {
+  webdev_analytics: {
+    ids: {
+      GTM: site.analytics.ids.gtm,
+    },
+    dimensions: site.analytics.dimensions,
+    version: site.analytics.version,
+  },
+  webdev_config: {
+    isProd,
+    firebaseConfig: isProd ? site.firebase.prod : site.firebase.staging,
+  },
+};
+
+// Each page type has an entrypoint js file which imports all of the custom
+// elements for that page. Most pages use the default.js entrypoint, but some
+// pages like /measure, /newsletter, etc. are special and require additional
+// elements.
+const pagesDir = './src/lib/pages/';
+const pages = fs.readdirSync(pagesDir, 'utf-8').map((p) => join(pagesDir, p));
+
+// Plugins that are common to every bundle.
+const plugins = [
+  virtual(buildVirtualJSON(virtualImports)),
+  nodeResolve(),
+  // @ts-ignore
+  commonjs(),
+];
+const devConfig = {
+  input: ['./src/lib/app.js', ...pages],
+  output: {
+    dir: 'dist/js',
+    format: 'esm',
+  },
+  watch: {
+    // By default rollup clears the console on every build. This disables that.
+    clearScreen: false,
+  },
+  plugins: [...plugins, postcss()],
+};
+
+const productionConfig = {
+  input: ['./src/lib/app.js', ...pages],
+  output: {
+    dir: 'dist/js',
+    format: 'esm',
+  },
+  plugins: [
+    ...plugins,
+    postcss({
+      minimize: true,
+    }),
+    terser({
+      format: {
+        // Remove all comments, including @license comments,
+        // otherwise LHCI complains at us.
+        comments: false,
+      },
+    }),
+  ],
+};
+
+const testConfig = {
+  input: 'test/unit/src/lib/index.js',
+  output: {
+    dir: '.tmp/test',
+    format: 'iife',
+    name: 'test',
+  },
+  plugins: [...plugins, postcss(), istanbul()],
+};
+
+/**
+ * Determine which rollup config to return based on the environment.
+ *
+ * Note: You can also pass custom command line arguments to rollup if they're
+ * prefixed with `config*`.
+ *
+ * Example: rollup -c --configFoo  # sets commandLineArgs.configFoo to true
+ *
+ * The commandLineArgs argument gets passed to this function, but we're omitting
+ * it here because we don't use it.
+ * Learn more @ https://rollupjs.org/guide/en/
+ */
+export default () => {
+  switch (process.env.ELEVENTY_ENV) {
+    case 'prod':
+      return productionConfig;
+    case 'test':
+      return testConfig;
+    default:
+      return devConfig;
+  }
+};
diff --git a/run-algolia.js b/run-algolia.js
new file mode 100644
index 00000000000..1b686b2e59d
--- /dev/null
+++ b/run-algolia.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require('./algolia')
+  .index()
+  .catch((error) => {
+    console.error(JSON.stringify(error, null, 2));
+    // We want to explicitly exit with a non-0 code here, to indicate failure.
+    process.exit(1); // eslint-disable-line no-process-exit
+  });
diff --git a/server.js b/server.js
deleted file mode 100644
index b2bcc7ca7ed..00000000000
--- a/server.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const isGAEProd = Boolean(process.env.GAE_APPLICATION);
-
-const compression = require('compression');
-const express = require('express');
-const cookieParser = require('cookie-parser');
-const localeHandler = require('./locale-handler.js');
-const {build: buildRedirectHandler} = require('./redirect-handler.js');
-
-// If true, we'll aggressively nuke the prod Service Worker. For emergencies.
-const serviceWorkerKill = false;
-
-const redirectHandler = (() => {
-  // In development, Eleventy isn't guaranteed to have run, so read the actual
-  // source file.
-  const redirectsPath = isGAEProd
-    ? 'dist/_redirects.yaml'
-    : 'src/site/content/_redirects.yaml';
-
-  // Don't block loading the server if the redirect handler couldn't build.
-  try {
-    return buildRedirectHandler(redirectsPath);
-  } catch (e) {
-    console.warn(e);
-    return (req, res, next) => next();
-  }
-})();
-
-// 404 handlers aren't special, they just run last.
-const notFoundHandler = (req, res, next) => {
-  res.status(404);
-
-  const extMatch = /(\.[^.]*)$/.exec(req.url);
-  if (extMatch && extMatch[1] !== '.html') {
-    // If this had an extension and it was not ".html", don't send any bytes.
-    // This is just a minor optimization to not waste bytes.
-    // Pages without extensions won't match here: e.g., "/foo" will still send HTML.
-    return res.end();
-  }
-
-  const options = {root: 'dist/en'};
-  res.sendFile('404/index.html', options, (err) => err && next(err));
-};
-
-// Builds a safety asset handler which matches all requests to e.g. "app-...css", and instead
-// returns the current live asset. This applies to both "app.css" and "bootstrap.js".
-function buildSafetyAssetHandler() {
-  const hashedAssetMatch = /^(\w+)(?:|-\w+)\.(\w+)(?:\?.*|)$/;
-
-  // Matches URLs like "/foo-hash.css" or "/blah.suffix", including an optional query param suffix.
-  // Just returns two groups: "foo" and "suffix".
-  const runHashedAssetMatch = (cand) => {
-    if (cand.startsWith('/')) {
-      cand = cand.substr(1);
-    }
-    const m = hashedAssetMatch.exec(cand);
-    if (!m) {
-      return {base: null, ext: null};
-    }
-    const [base, ext] = m.slice(1, 3);
-    return {base, ext};
-  };
-
-  return (req, res, next) => {
-    const {base, ext} = runHashedAssetMatch(req.url);
-    if (!base) {
-      return next();
-    }
-
-    // We don't hash these assets in the upload, so just use them directly.
-    if (base === 'bootstrap' && ext === 'js') {
-      req.url = '/bootstrap.js';
-    } else if (base === 'app' && ext === 'css') {
-      req.url = '/app.css';
-    }
-
-    return next();
-  };
-}
-
-// Implement safety mechanics.
-//   * Disallow invalid hostnames (and remove any lasting Service Workers
-//     otherwise users could be stuck forever)
-//   * Optionally nuke our production Service Worker in an emergency.
-//   * Deny loading us in an iframe.
-const invalidHostnames = ['www.web.dev', 'appengine-test.web.dev'];
-const safetyHandler = (req, res, next) => {
-  const isServiceWorkerRequest = Boolean(req.headers['service-worker']);
-  if (invalidHostnames.includes(req.hostname)) {
-    if (!isServiceWorkerRequest) {
-      return res.redirect(301, 'https://web.dev' + req.url);
-    }
-    // We always nuke the Service Worker for invalid hostnames.
-    req.url = '/nuke-sw.js';
-  } else if (serviceWorkerKill && isServiceWorkerRequest) {
-    // The kill switch is enabled, nuke the Service Worker.
-    req.url = '/nuke-sw.js';
-  }
-
-  // TODO: This should also be included in a CSP header like:
-  //   "Content-Security-Policy: frame-ancestors 'self'"
-  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
-
-  return next();
-};
-
-const handlers = [
-  safetyHandler,
-  buildSafetyAssetHandler(),
-  localeHandler,
-  express.static('dist'),
-  express.static('dist/en'),
-  redirectHandler,
-  notFoundHandler,
-];
-
-const app = express();
-
-if (!isGAEProd) {
-  // For dev we'll do our own compression. This ensures things like Lighthouse CI
-  // get a fairly accurate picture of our site.
-  // For prod we'll rely on App Engine to compress for us.
-  handlers.unshift(compression());
-
-  // In dev, serve our source files so that Source Maps can correctly load their
-  // original files.
-  app.use('/src', express.static('src'));
-}
-
-app.use(cookieParser());
-app.use(...handlers);
-
-const listener = app.listen(process.env.PORT || 8080, () => {
-  // eslint-disable-next-line
-  console.log('The server is listening on port ' + listener.address().port);
-});
diff --git a/shared/locale.js b/shared/locale.js
index 8208e33968e..f55460c0cc7 100644
--- a/shared/locale.js
+++ b/shared/locale.js
@@ -21,6 +21,7 @@ const defaultLocale = 'en';
 const isProd = Boolean(process.env.GAE_APPLICATION);
 const contentDir = isProd ? '../dist' : '../src/site/content';
 const dirs = fs.readdirSync(path.join(__dirname, contentDir));
+// @ts-ignore
 const supportedLocales = dirs.filter((dir) => localeCode.validate(dir));
 
 const isSupportedLocale = (locale) => supportedLocales.indexOf(locale) > -1;
diff --git a/shared/sizeOfJSONInBytes.js b/shared/sizeOfJSONInBytes.js
new file mode 100644
index 00000000000..760c9eec67b
--- /dev/null
+++ b/shared/sizeOfJSONInBytes.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Gets the size in bytes of an object's JSON serialization.
+ *
+ * @param {Object} obj
+ * @return {number}
+ */
+const sizeOfJSONInBytes = (obj) => {
+  const json = JSON.stringify(obj);
+  return Buffer.byteLength(json, 'utf8');
+};
+
+module.exports = {sizeOfJSONInBytes};
diff --git a/src/@typedefs.js b/src/@typedefs.js
deleted file mode 100644
index 8ba05a9a516..00000000000
--- a/src/@typedefs.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @typedef {Object} AdditionalData
- * @property {string} [title]
- * @property {string} [href]
- * @property {string} [description]
- * @property {string} [tag]
- */
-
-/**
- * @typedef {Object} Author
- * @property {string} [description]
- * @property {string} [title]
- * @property {string} [key]
- * @property {string} [href]
- * @property {string} [url]
- * @property {Object} [data]
- * @property {string} [data.title]
- * @property {string} [data.subhead]
- * @property {string} [data.hero]
- * @property {string} [data.alt]
- * @property {Array<Object>} [elements]
- */
-
-/**
- * @typedef {Object} Paginated
- * @property {string} [title]
- * @property {string} [href]
- * @property {string} [description]
- * @property {string} [tag]
- * @property {Array<Object>} elements
- * @property {number} [index]
- * @property {number} [pages]
- */
diff --git a/src/build/common.js b/src/build/common.js
deleted file mode 100644
index e5ba8b9de20..00000000000
--- a/src/build/common.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * @fileoverview Common build config and helpers for both the regular and SW builds.
- *
- * This is required as the SW build must currently run after Eleventy to precache Eleventy's output
- * (i.e., generated file hashes) as part of its generated source.
- */
-
-const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
-const rollupPluginCJS = require('rollup-plugin-commonjs');
-const rollupPluginVirtual = require('rollup-plugin-virtual');
-const buildVirtualJSON = require('./virtual-json');
-
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-
-const site = require('../../src/site/_data/site');
-
-/**
- * Virtual imports made available to all bundles. Used for site config and globals.
- */
-const virtualImports = {
-  webdev_analytics: {
-    id: isProd ? site.analytics.ids.prod : site.analytics.ids.staging,
-    dimensions: site.analytics.dimensions,
-    version: site.analytics.version,
-  },
-  webdev_config: {
-    isProd,
-    env: process.env.ELEVENTY_ENV || 'dev',
-    version: 'v' + new Date().toISOString().replace(/[\D]/g, '').slice(0, 12),
-    firebaseConfig: isProd ? site.firebase.prod : site.firebase.staging,
-  },
-  webdev_entrypoint: null,
-};
-
-/**
- * Builds the default set of Rollup functions. Snapshots virtual imports on
- * call, so should be used anew every run.
- *
- * @return {!Array<*>}
- */
-function buildDefaultPlugins() {
-  return [
-    rollupPluginNodeResolve(),
-    rollupPluginCJS({
-      include: 'node_modules/**',
-    }),
-    rollupPluginVirtual(buildVirtualJSON(virtualImports)),
-  ];
-}
-
-/**
- * Passed to Rollup's config to disallow external imports. By default, Rollup
- * leaves unresolved imports in the output.
- *
- * @param {string} source
- * @param {string} importer
- * @param {boolean} isResolved
- */
-function disallowExternal(source, importer, isResolved) {
-  // We don't support any external imports. This most likely happens if you mistype a
-  // node_modules import or the package.json has changed.
-  if (isResolved && !source.match(/^\.{0,2}\//)) {
-    throw new Error(
-      `Unresolved external import: "${source}" (imported ` +
-        `by: ${importer}), did you forget to npm install?`,
-    );
-  }
-}
-
-module.exports = {
-  virtualImports,
-  buildDefaultPlugins,
-  disallowExternal,
-};
diff --git a/src/build/hash.js b/src/build/hash.js
deleted file mode 100644
index 92513f54808..00000000000
--- a/src/build/hash.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @fileoverview Helper for hashing content.
- */
-
-const crypto = require('crypto');
-const fs = require('fs');
-
-const hashLength = 8;
-
-function generateAndValidateHash(c) {
-  const hash = c.digest('hex').substr(0, hashLength);
-  if (hash.length !== hashLength) {
-    throw new TypeError(`could not hash content`);
-  }
-  return hash;
-}
-
-/**
- * Hashes the passed content.
- *
- * @param {string} contents to hash
- * @return {string}
- */
-function hashForContent(contents) {
-  const c = crypto.createHash('sha1');
-  c.update(contents);
-  return generateAndValidateHash(c);
-}
-
-/**
- * Hashes the passed files. Requires at least one.
- *
- * @param {string} file base file to hash
- * @param {...string} rest additional files to hash
- */
-function hashForFiles(file, ...rest) {
-  const files = [file].concat(rest);
-
-  const c = crypto.createHash('sha1');
-
-  for (const file of files) {
-    const b = fs.readFileSync(file);
-    c.update(b);
-  }
-
-  return generateAndValidateHash(c);
-}
-
-module.exports = {
-  hashForContent,
-  hashForFiles,
-};
diff --git a/src/build/minify-js.js b/src/build/minify-js.js
deleted file mode 100644
index 0dfd9ddc437..00000000000
--- a/src/build/minify-js.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @fileoverview Helper that uses Terser to minify on-disk JS.
- */
-
-const terser = require('terser');
-const path = require('path');
-const fs = require('fs').promises;
-
-/**
- * Minify the passed on-disk script files. Assumes they have an adjacent ".map" source map.
- *
- * @param {!Array<string>} generated paths to generated script files
- * @return {number} ratio of compressed output to original source
- */
-async function compressOutput(generated) {
-  let inputSize = 0;
-  let outputSize = 0;
-
-  for (const fileName of generated) {
-    const target = path.join('dist', fileName);
-
-    const raw = await fs.readFile(target, 'utf8');
-    inputSize += raw.length;
-
-    const result = terser.minify(raw, {
-      sourceMap: {
-        content: await fs.readFile(target + '.map', 'utf8'),
-        url: fileName + '.map',
-      },
-    });
-
-    if (result.error) {
-      throw new Error(`could not minify ${fileName}: ${result.error}`);
-    }
-
-    outputSize += result.code.length;
-    await fs.writeFile(target, result.code, 'utf8');
-    await fs.writeFile(target + '.map', result.map, 'utf8');
-  }
-
-  const ratio = outputSize / inputSize;
-  return ratio;
-}
-
-module.exports = compressOutput;
diff --git a/src/build/output-permalink.js b/src/build/output-permalink.js
new file mode 100644
index 00000000000..e7e0ab35546
--- /dev/null
+++ b/src/build/output-permalink.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {defaultLocale} = require('../site/_data/site');
+
+/**
+ * Takes the `inputPath` or `permalink` of a post or page and generates a permalink (output path).
+ * Basically the idea is to take the `inputPath` (where in the project the file's located),
+ * or take the existing permalink (a defined output for a file) and create a new permalink
+ * with the path being modified based on its locale.
+ *
+ * If the content is in the default locale (en), we remove the default locale from the path.
+ * If the `inputPath`/`permalink` is not of the default locale we add `i18n`
+ * to the path, so that the locale's folder is in a `i18n` folder.
+ *
+ * @example outputPermalink({page: {inputPath: '/src/site/content/en/index.html'}}); // '/'
+ * @example outputPermalink({page: {inputPath: '/src/site/content/pl/index.html'}}); // '/i18n/pl/'
+ * @example outputPermalink({permalink: 'en/index.html'}); // '/'
+ * @example outputPermalink({permalink: 'pl/index.html'}); // '/i18n/pl/'
+ *
+ * @param {TODO} data
+ * @returns {string}
+ */
+module.exports = (data) => {
+  const defaultLocaleRegExp = new RegExp(`^/${defaultLocale}/`);
+  const localization = data.lang !== defaultLocale;
+
+  // In eleventy you can set permalink: false to tell it to not output a page.
+  // If a page has a false permalink we should completely ignore it.
+  if ('permalink' in data && data.permalink === false) {
+    return;
+  }
+
+  if (data.permalink) {
+    return data.permalink.replace(
+      /^\/{{lang}}/,
+      localization ? '/i18n/{{lang}}' : '',
+    );
+  }
+
+  return data.page.inputPath
+    .replace(/^\.\/src\/site\/content/, localization ? 'i18n/' : '')
+    .replace(/index.(md|njk)$/, '')
+    .replace(/(md|njk)$/, 'html')
+    .replace(defaultLocaleRegExp, '/');
+};
diff --git a/src/build/resource-path.js b/src/build/resource-path.js
deleted file mode 100644
index 34e32821060..00000000000
--- a/src/build/resource-path.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @fileoverview Helper that reads and checks the resource path
- */
-
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Finds the resource path for the given name, and confirms that the file exists (throwing an
- * Error otherwise). Returns the path including any query parameters, but without any leading "/",
- * for use in caching.
- *
- * @param {string} name
- * @return {string}
- */
-function resourcePath(name) {
-  name = name.toUpperCase();
-
-  const f = path.join(
-    __dirname,
-    '../../src/site/_data',
-    `resource${name}.json`,
-  );
-
-  const raw = JSON.parse(fs.readFileSync(f), 'utf-8');
-
-  const {path: rawPath} = raw;
-  if (rawPath === undefined) {
-    throw new Error(`could not find 'path' key in: ${f}`);
-  }
-
-  const cleanPath = rawPath.split('?')[0]; // remove trailing query params
-  const check = path.join(__dirname, '../../dist', cleanPath);
-  if (!fs.existsSync(check)) {
-    throw new Error(`path did not exist: ${check}`);
-  }
-
-  return rawPath[0] === '/' ? rawPath.substr(1) : rawPath;
-}
-
-module.exports = resourcePath;
diff --git a/src/build/virtual-json.js b/src/build/virtual-json.js
index 10fe7838ab4..1dd2226148c 100644
--- a/src/build/virtual-json.js
+++ b/src/build/virtual-json.js
@@ -7,6 +7,10 @@
 
 const validJSName = /^[\w_$][\w\d_$]*$/;
 
+/**
+ * @param {any} object to serialize
+ * @return {string}
+ */
 function createVirtualExport(object) {
   const parts = [`export default ${JSON.stringify(object)};`];
 
@@ -25,8 +29,12 @@ function createVirtualExport(object) {
   return parts.join('\n');
 }
 
+/**
+ * @param {!Object<string, any>} all
+ * @return {!Object<string, string>}
+ */
 module.exports = (all) => {
-  const out = {};
+  const out = /** @type {!Object<string, string>} } */ ({});
   Object.keys(all).forEach((key) => {
     out[key] = createVirtualExport(all[key]);
   });
diff --git a/src/component-library/aside/aside.json b/src/component-library/aside/aside.json
new file mode 100644
index 00000000000..7d0eddb15b9
--- /dev/null
+++ b/src/component-library/aside/aside.json
@@ -0,0 +1,159 @@
+{
+  "title": "Aside",
+  "summary": "The aside pattern allows you to create callouts in the body of an article. All theming of asides is achieved using utility classes.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_aside.scss"
+    }
+  ],
+  "order": "source",
+  "context": {
+    "content": "Use the note aside to provide supplemental information. [A test link](#) for CSS purposes.",
+    "utilities": {
+      "title": "color-state-info-text",
+      "main": "bg-state-info-bg color-state-info-text"
+    }
+  },
+  "variants": [
+    {
+      "name": "note",
+      "title": "Note",
+      "context": {
+        "content": "A note is just a standard aside."
+      }
+    },
+    {
+      "name": "caution",
+      "title": "Caution",
+      "context": {
+        "content": "Use the caution aside to indicate a potential pitfall or complication.",
+        "type": "caution",
+        "title": "Caution",
+        "icon": "error.svg",
+        "utilities": {
+          "title": "color-state-bad-text",
+          "main": "bg-state-bad-bg color-state-bad-text"
+        }
+      }
+    },
+    {
+      "name": "warning",
+      "title": "Warning",
+      "context": {
+        "content": "The warning aside is stronger than a caution aside; use it to tell the reader not to do something.",
+        "type": "warning",
+        "title": "Warning",
+        "icon": "warning.svg",
+        "utilities": {
+          "icon": "color-state-warn-text",
+          "main": "bg-state-warn-bg color-core-text"
+        }
+      }
+    },
+    {
+      "name": "success",
+      "title": "Success",
+      "context": {
+        "content": "Use the success aside to describe a successful action or an error-free status.",
+        "type": "success",
+        "title": "Success",
+        "icon": "done.svg",
+        "utilities": {
+          "main": "bg-state-good-bg color-state-good-text"
+        }
+      }
+    },
+    {
+      "name": "objective",
+      "title": "Objective",
+      "context": {
+        "content": "Use the objective aside to define the goal of a process described in the body copy.",
+        "type": "objective",
+        "title": "Objective",
+        "icon": "done.svg",
+        "utilities": {
+          "main": "bg-state-good-bg color-state-good-text"
+        }
+      }
+    },
+    {
+      "name": "gotchas",
+      "title": "Gotchas",
+      "context": {
+        "content": "Use the gotcha aside to indicate a common problem that the reader wouldn't know without specialized knowledge of the topic.",
+        "type": "gotchas",
+        "title": "Gotchas!",
+        "icon": "lightbulb.svg",
+        "utilities": {
+          "main": "bg-tertiary-box-bg color-tertiary-box-text"
+        }
+      }
+    },
+    {
+      "name": "attention",
+      "title": "Attention",
+      "context": {
+        "content": "Use the gotcha aside to indicate a common problem that the reader wouldn't know without specialized knowledge of the topic.",
+        "type": "attention",
+        "title": "Attention!",
+        "icon": "lightbulb.svg",
+        "utilities": {
+          "main": "bg-tertiary-box-bg color-tertiary-box-text"
+        }
+      }
+    },
+    {
+      "name": "key-term",
+      "title": "Key term",
+      "context": {
+        "content": "Use the key-term aside to define a term that's essential to understanding an idea in the body copy. Key-term asides should be a single sentence that includes the term in italics. For example, \"A portal is…\"",
+        "type": "key-term",
+        "title": "Key Term",
+        "icon": "highlighter.svg",
+        "utilities": {
+          "main": "color-secondary-box-text bg-secondary-box-bg"
+        }
+      }
+    },
+    {
+      "name": "codelab",
+      "title": "Codelab",
+      "context": {
+        "content": "Use the codelab aside to link to an associated codelab.",
+        "type": "codelab",
+        "title": "Codelab",
+        "icon": "code.svg",
+        "utilities": {
+          "main": "bg-quaternary-box-bg color-quaternary-box-text"
+        }
+      }
+    },
+    {
+      "name": "celebration",
+      "title": "Celebration",
+      "context": {
+        "content": "Use the celebration aside to celebrate events like a cross-browser launch.",
+        "type": "celebration",
+        "title": "Celebration",
+        "icon": "celebration.svg",
+        "utilities": {
+          "main": "bg-state-good-bg color-state-good-text"
+        }
+      }
+    },
+    {
+      "name": "update",
+      "title": "Update",
+      "context": {
+        "content": "Use the update aside in select cases where updates concerning a developing situation around a certain API or metric can be effectively communicated.",
+        "type": "update",
+        "title": "Update",
+        "icon": "update.svg",
+        "utilities": {
+          "main": "bg-state-update-bg color-state-update-text"
+        }
+      }
+    }
+  ]
+}
diff --git a/src/component-library/aside/aside.md b/src/component-library/aside/aside.md
new file mode 100644
index 00000000000..63e345a4bcb
--- /dev/null
+++ b/src/component-library/aside/aside.md
@@ -0,0 +1,6 @@
+The aside pattern controls its own space when in a [flow context](/design-system/css-utilities/#flow)
+to guarantee there's enough vertical space.
+
+You can style it using [theme utility classes and/or token utility classes](/design-system/colors).
+These are generally applied to the aside itself, its title, its icon and its
+body. All of these are optional.
diff --git a/src/component-library/aside/aside.njk b/src/component-library/aside/aside.njk
new file mode 100644
index 00000000000..82d9b955a58
--- /dev/null
+++ b/src/component-library/aside/aside.njk
@@ -0,0 +1,11 @@
+<div class="aside flow {{ data.utilities.main }}">
+  {% if data.title %}
+  <p class="cluster {{ data.utilities.title }}">
+    {% if data.icon %}
+      <span class="aside__icon box-block {{ data.utilities.icon }}">{% include "icons/" ~ data.icon %}</span>
+    {% endif %}
+    <strong>{{ data.title }}</strong>
+  </p> 
+  {% endif %}
+  <div class="{{ data.utilities.body }}">{{ data.content | md | safe }}</div>
+</div>
diff --git a/src/component-library/audio-player/audio-player.json b/src/component-library/audio-player/audio-player.json
new file mode 100644
index 00000000000..61dbcfb030b
--- /dev/null
+++ b/src/component-library/audio-player/audio-player.json
@@ -0,0 +1,15 @@
+{
+  "title": "Audio Player",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_audio-player.scss"
+    }
+  ],
+  "context": {
+    "title": "The CSS Podcast - 001: The Box Model",
+    "alt": "CSS Podcast Cover",
+    "thumb": "https://web-dev.imgix.net/image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png?auto=format",
+    "audioSrc": "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3"
+  }
+}
diff --git a/src/component-library/audio-player/audio-player.md b/src/component-library/audio-player/audio-player.md
new file mode 100644
index 00000000000..3115c16b1f8
--- /dev/null
+++ b/src/component-library/audio-player/audio-player.md
@@ -0,0 +1 @@
+This pattern is a wrapper for a native `<audio>` element that improves some of the native styles and provides layout for a title and thumbnail.
diff --git a/src/component-library/audio-player/audio-player.njk b/src/component-library/audio-player/audio-player.njk
new file mode 100644
index 00000000000..0f0841a833c
--- /dev/null
+++ b/src/component-library/audio-player/audio-player.njk
@@ -0,0 +1,7 @@
+<div class="audio-player cluster">
+  <img src="{{ data.thumb }}" alt="{{ data.alt }}" width="80" height="80" />
+  <div class="audio-player__inner flow">
+    <p>{{ data.title }}</p>
+    <audio id="{{ data.id }}" class="audio-player__element" src="{{ data.audioSrc }}" controls></audio>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/component-library/authors/authors.json b/src/component-library/authors/authors.json
new file mode 100644
index 00000000000..9cd47a77ad9
--- /dev/null
+++ b/src/component-library/authors/authors.json
@@ -0,0 +1,33 @@
+{
+  "title": "Authors",
+  "keyLinks": [
+    {
+      "label": "Sass Block",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_author.scss"
+    },
+    {
+      "label": "Avatar Utility",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/utilities/_avatar.scss"
+    }
+  ],
+  "context": {
+    "url": "#",
+    "name": "Collin Dion Agata",
+    "bio": "Massa gravida tempus placerat sapien venenatis conubia odio donec montes nisl feugiat.",
+    "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg",
+    "links": [
+      {
+        "text": "Twitter",
+        "url": "https://twitter.com/CollinDion"
+      },
+      {
+        "text": "Another link",
+        "url": "#"
+      },
+      {
+        "text": "Last link that's longer",
+        "url": "#"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/authors/authors.md b/src/component-library/authors/authors.md
new file mode 100644
index 00000000000..8ae48483d69
--- /dev/null
+++ b/src/component-library/authors/authors.md
@@ -0,0 +1,7 @@
+The authors pattern supports one or many authors that have one of many links associated with them. To render multiple authors in a group, use [the cluster](/design-system/css-compositions/#cluster) layout composition.
+
+### Implementations
+
+#### 11ty Shortcode
+
+An implementation of this design exists as an 11ty shortcode (`{% Author param %}`). You can [view the param type here](https://github.com/GoogleChrome/web.dev/blob/main/types/site/_includes/components/Author.d.ts).
diff --git a/src/component-library/authors/authors.njk b/src/component-library/authors/authors.njk
new file mode 100644
index 00000000000..efdeaf36f01
--- /dev/null
+++ b/src/component-library/authors/authors.njk
@@ -0,0 +1,37 @@
+<div class="author">
+  <a class="avatar" href="{{ data.url }}">
+    <img
+      alt="{{ data.name }}"
+      height="64"
+      src="https://web-dev.imgix.net/{{
+        data.image
+      }}?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
+      width="64"
+      loading="lazy"
+      decoding="async"
+      sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
+      srcset="
+        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
+        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
+        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
+        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
+        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
+      "
+    />
+  </a>
+  <div class="flow">
+    <cite class="author__name">
+      <a href="{{ data.url }}">{{ data.name }}</a>
+    </cite>
+    {% if data.bio %}
+      <p class="author__bio">{{ data.bio }}</p>
+    {% endif %}
+    <ul class="author__links cluster" role="list">
+      {% for link in data.links %}
+      <li>
+        <a href="{{ link.url }}">{{ link.text }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
diff --git a/src/component-library/authors/variants/multiple/multiple.json b/src/component-library/authors/variants/multiple/multiple.json
new file mode 100644
index 00000000000..52959db9a6f
--- /dev/null
+++ b/src/component-library/authors/variants/multiple/multiple.json
@@ -0,0 +1,29 @@
+{
+  "title": "Multiple Authors",
+  "context": {
+    "items": [
+      {
+        "url": "#",
+        "name": "Collin Dion Agata",
+        "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg",
+        "links": [
+          {
+            "text": "Twitter",
+            "url": "https://twitter.com/CollinDion"
+          }
+        ]
+      },
+      {
+        "url": "#",
+        "name": "Collin Dion Agata",
+        "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg",
+        "links": [
+          {
+            "text": "Twitter",
+            "url": "https://twitter.com/CollinDion"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/src/component-library/authors/variants/multiple/multiple.njk b/src/component-library/authors/variants/multiple/multiple.njk
new file mode 100644
index 00000000000..c203453bc6b
--- /dev/null
+++ b/src/component-library/authors/variants/multiple/multiple.njk
@@ -0,0 +1,38 @@
+<div class="cluster">
+  {% for item in data.items %}
+  <div class="author">
+    <a class="avatar" href="{{ item.url }}">
+      <img
+        alt="{{ item.name }}"
+        height="64"
+        src="https://web-dev.imgix.net/{{
+          item.image
+        }}?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
+        width="64"
+        loading="lazy"
+        decoding="async"
+        sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
+        srcset="
+          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
+          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
+          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
+          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
+          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
+        "
+      />
+    </a>
+    <div class="flow">
+      <cite class="author__name">
+        <a href="{{ item.url }}" class="author__name-link">{{ item.name }}</a>
+      </cite>
+      <ul class="author__links cluster" role="list">
+        {% for link in item.links %}
+        <li class="author__link-listdata">
+          <a href="{{ link.url }}" class="author__link">{{ link.text }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  {% endfor %}
+</div>
diff --git a/src/component-library/banners/banners.json b/src/component-library/banners/banners.json
new file mode 100644
index 00000000000..d600cff5231
--- /dev/null
+++ b/src/component-library/banners/banners.json
@@ -0,0 +1,44 @@
+{
+  "title": "Banners",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_banner.scss"
+    }
+  ],
+  "context": {
+    "content": "Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
+    "utilities": {
+      "main": "bg-state-info-bg color-core-text"
+    }
+  },
+  "variants": [
+    {
+      "name": "lots-of-content",
+      "title": "Lots of content",
+      "context": {
+        "content": "Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper"
+      }
+    },
+    {
+      "name": "caution",
+      "title": "Caution",
+      "context": {
+        "utilities": {
+          "main": "bg-state-bad-bg color-core-text",
+          "button": "color-state-bad-text"
+        }
+      }
+    },
+    {
+      "name": "warning",
+      "title": "Warning",
+      "context": {
+        "utilities": {
+          "main": "bg-state-warn-bg color-core-text",
+          "button": "color-state-warn-text"
+        }
+      }
+    }
+  ]
+}
diff --git a/src/component-library/banners/banners.md b/src/component-library/banners/banners.md
new file mode 100644
index 00000000000..b0c94ffacc6
--- /dev/null
+++ b/src/component-library/banners/banners.md
@@ -0,0 +1,4 @@
+The banner is used to present a message to the user with an optional actions.
+
+You can style it using [theme utility classes and/or token utility classes](/design-system/colors).
+These are generally applied to the banner itself, and the buttons. All of these are optional.
diff --git a/src/component-library/banners/banners.njk b/src/component-library/banners/banners.njk
new file mode 100644
index 00000000000..42b6c2360d6
--- /dev/null
+++ b/src/component-library/banners/banners.njk
@@ -0,0 +1,9 @@
+<div class="banner {{ data.utilities.main }}" role="banner">
+  <div class="banner__content flow">
+    {{ data.content | md | safe }}
+  </div>
+  <div class="banner__actions cluster">
+    <button class="button {{ data.utilities.button }}">Action 1</button>
+    <button class="button {{ data.utilities.button }}">Action 2</button>
+  </div>
+</div>
diff --git a/src/component-library/banners/variants/with-image/with-image.json b/src/component-library/banners/variants/with-image/with-image.json
new file mode 100644
index 00000000000..a7a81c0788e
--- /dev/null
+++ b/src/component-library/banners/variants/with-image/with-image.json
@@ -0,0 +1,13 @@
+{
+  "title": "With Icon Image",
+  "context": {
+    "content": "Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
+    "img": {
+      "src": "https://web.dev/images/icons/performance.svg",
+      "alt": "A spedometer"
+    },
+    "utilities": {
+      "main": "bg-state-info-bg color-core-text"
+    }
+  }
+}
diff --git a/src/component-library/banners/variants/with-image/with-image.njk b/src/component-library/banners/variants/with-image/with-image.njk
new file mode 100644
index 00000000000..2263d69a87b
--- /dev/null
+++ b/src/component-library/banners/variants/with-image/with-image.njk
@@ -0,0 +1,12 @@
+<div class="banner {{ data.utilities.main }}" role="banner">
+  <div class="banner__content flex-align-start cluster">
+    <img class="banner__img" src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+    <div class="flow">
+      {{ data.content | md | safe }}
+    </div>
+  </div>
+  <div class="banner__actions cluster">
+    <button class="button {{ data.utilities.button }}">Action 1</button>
+    <button class="button {{ data.utilities.button }}">Action 2</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/component-library/block-quotes/block-quotes.json b/src/component-library/block-quotes/block-quotes.json
new file mode 100644
index 00000000000..5a4246ad196
--- /dev/null
+++ b/src/component-library/block-quotes/block-quotes.json
@@ -0,0 +1,16 @@
+{
+  "title": "Block quotes",
+  "context": {
+    "quote": "Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.",
+    "cite": "Adipiscing Ornare"
+  },
+  "variants": [
+    {
+      "name": "no-cite",
+      "title": "No Cite",
+      "context": {
+        "cite": null
+      }
+    }
+  ]
+}
diff --git a/src/component-library/block-quotes/block-quotes.md b/src/component-library/block-quotes/block-quotes.md
new file mode 100644
index 00000000000..43d6dd354f9
--- /dev/null
+++ b/src/component-library/block-quotes/block-quotes.md
@@ -0,0 +1,3 @@
+Use block quotes to emphasize a quotation that's important to the main idea of a post. (For example, in a case study you might include a quotation from someone on the partner organization's management team.)
+
+Always include a `<cite>` element indicating the quote's source at the end of a block quote.
diff --git a/src/component-library/block-quotes/block-quotes.njk b/src/component-library/block-quotes/block-quotes.njk
new file mode 100644
index 00000000000..2b23e38a856
--- /dev/null
+++ b/src/component-library/block-quotes/block-quotes.njk
@@ -0,0 +1,6 @@
+<blockquote>
+  <p>{{ data.quote }}</p>
+  {% if data.cite %}
+  <cite>{{ data.cite }}</cite>
+  {% endif %}
+</blockquote>
diff --git a/src/component-library/brand/brand.json b/src/component-library/brand/brand.json
new file mode 100644
index 00000000000..f056f4f23e2
--- /dev/null
+++ b/src/component-library/brand/brand.json
@@ -0,0 +1,27 @@
+{
+  "title": "Brand",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_brand.scss"
+    }
+  ],
+  "context": {
+    "byline": ""
+  },
+  "variants": [
+    {
+      "name": "Byline",
+      "context": {
+        "byline": "Design System"
+      }
+    },
+    {
+      "name": "Cluster byline",
+      "context": {
+        "tokens": "cluster",
+        "byline": "Design System"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/brand/brand.md b/src/component-library/brand/brand.md
new file mode 100644
index 00000000000..fce73a5457c
--- /dev/null
+++ b/src/component-library/brand/brand.md
@@ -0,0 +1,3 @@
+The brand block is designed to add control to the web.dev brand and provide an opportunity to have a supporting byline. Gutter is set on the block for if you apply a [layout composition](/design-system/css-compositions/).
+
+In the samples, [the cluster](/design-system/css-compositions/#cluster) is used to display the byline inline, where space allows.
diff --git a/src/component-library/brand/brand.njk b/src/component-library/brand/brand.njk
new file mode 100644
index 00000000000..9d3bc477ca4
--- /dev/null
+++ b/src/component-library/brand/brand.njk
@@ -0,0 +1,6 @@
+<div class="brand {{ data.tokens }}">
+  <svg role="img" aria-label="web.dev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"></path><g transform="translate(.639 .717)"><defs><filter id="a_2si" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b_2si"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a_2si)"></path></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b_2si)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"></path></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"></path><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" fill="#5f6368"></path></svg>
+  {% if data.byline %}
+    <p class="brand__byline">{{ data.byline }}</p>
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/src/component-library/breadcrumbs/breadcrumbs.json b/src/component-library/breadcrumbs/breadcrumbs.json
new file mode 100644
index 00000000000..26b396daec8
--- /dev/null
+++ b/src/component-library/breadcrumbs/breadcrumbs.json
@@ -0,0 +1,10 @@
+{
+  "title": "Breadcrumbs",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_breadcrumbs.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/breadcrumbs/breadcrumbs.md b/src/component-library/breadcrumbs/breadcrumbs.md
new file mode 100644
index 00000000000..4d67f6845f8
--- /dev/null
+++ b/src/component-library/breadcrumbs/breadcrumbs.md
@@ -0,0 +1 @@
+A simple navigation pattern that adds spacing and decoration between each item. Beware that there is now flex wrapping, so try to keep this as succinct as possible.
diff --git a/src/component-library/breadcrumbs/breadcrumbs.njk b/src/component-library/breadcrumbs/breadcrumbs.njk
new file mode 100644
index 00000000000..c4b278a2ff2
--- /dev/null
+++ b/src/component-library/breadcrumbs/breadcrumbs.njk
@@ -0,0 +1,18 @@
+<nav class="breadcrumbs" aria-label="breadcrumbs">
+  <ul class="breadcrumbs__list" role="list">
+    <li>
+      <a href="/">
+        {% raw %}
+        <!-- USE THIS IN THE MAIN SITE: {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }} -->
+        {% endraw %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"/><g transform="translate(.639 .717)"><defs><filter id="a" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a)"/></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"/></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"/><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" class="brand-primary" fill="#5f6368"/></svg>
+      </a>
+    </li>
+    <li>
+      <a href="/learn/">Learn</a>
+    </li>
+    <li>
+      <a href="/learn/css/">CSS</a>
+    </li>
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/src/component-library/browser-compat/browser-compat.json b/src/component-library/browser-compat/browser-compat.json
new file mode 100644
index 00000000000..132ff27bbce
--- /dev/null
+++ b/src/component-library/browser-compat/browser-compat.json
@@ -0,0 +1,55 @@
+{
+  "title": "Browser compatibility table",
+  "summary": "A decorated list of browsers and their in-context support with data source link.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_browser-compat.scss"
+    }
+  ],
+  "context": {
+    "label": "Browser support:",
+    "link": {
+      "text": "Source",
+      "url": "https://developer.mozilla.org/docs/Web/API/BackgroundFetchEvent#browser_compatibility"
+    },
+    "items": [
+      {
+        "label": "Chrome 74, Supported",
+        "name": "Chrome 74",
+        "image": "chrome.svg",
+        "indicator": {
+          "content": "74",
+          "utilities": "bg-state-good-bg color-state-good-text"
+        }
+      },
+      {
+        "label": "Firefox, Not supported",
+        "name": "Firefox",
+        "image": "firefox.svg",
+        "indicator": {
+          "content": "×",
+          "utilities": "bg-state-bad-bg color-state-bad-text"
+        }
+      },
+      {
+        "label": "Edge 79, Supported",
+        "name": "Edge 79",
+        "image": "edge.svg",
+        "indicator": {
+          "content": "79",
+          "utilities": "bg-state-good-bg color-state-good-text"
+        }
+      },
+      {
+        "label": "Safari, Not supported",
+        "name": "Safari",
+        "image": "safari.svg",
+        "indicator": {
+          "content": "✕",
+          "utilities": "bg-state-bad-bg color-state-bad-text"
+        }
+      }
+    ]
+  }
+}
diff --git a/src/component-library/browser-compat/browser-compat.md b/src/component-library/browser-compat/browser-compat.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/browser-compat/browser-compat.njk b/src/component-library/browser-compat/browser-compat.njk
new file mode 100644
index 00000000000..f05ea7da80f
--- /dev/null
+++ b/src/component-library/browser-compat/browser-compat.njk
@@ -0,0 +1,17 @@
+<figure class="browser-compat cluster">
+  <figcaption class="browser-compat__label">{{ data.label }}</figcaption>
+  <ul class="browser-compat__items cluster" role="list">
+    {% for item in data.items %}
+    <li class="tooltip">
+      <span class="tooltip__content">{{ item.label }}</span>
+      <div class="browser-compat__item" aria-hidden="true">
+        <img src="/images/icons/{{ item.image }}" alt="{{ item.name }}" />
+        <span class="indicator {{ item.indicator.utilities }}">{{ item.indicator.content }}</span>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+	<p>
+    <a href="{{ data.link.url }}" target="_blank">{{ data.link.text }}</a>
+	</p>
+</figure>
diff --git a/src/component-library/button/button.json b/src/component-library/button/button.json
new file mode 100644
index 00000000000..546fbaada58
--- /dev/null
+++ b/src/component-library/button/button.json
@@ -0,0 +1,65 @@
+{
+  "title": "Button",
+  "sort": "source",
+  "keyLinks": [
+    {
+      "label": "Sass file",
+      "url": "https://github.com/GoogleChrome/web.dev/blob/main/src/scss/blocks/_button.scss"
+    }
+  ],
+  "context": {
+    "text": "A button"
+  },
+  "variants": [
+    {
+      "name": "primary",
+      "title": "Primary",
+      "context": {
+        "text": "A primary button",
+        "type": "primary"
+      }
+    },
+    {
+      "name": "secondary",
+      "title": "Secondary",
+      "context": {
+        "text": "A secondary button",
+        "type": "secondary"
+      }
+    },
+    {
+      "name": "clear",
+      "title": "Clear",
+      "context": {
+        "text": "A clear button",
+        "type": "clear"
+      }
+    },
+    {
+      "name": "disabled",
+      "title": "Disabled",
+      "context": {
+        "text": "A disabled button",
+        "type": "secondary",
+        "attribute": "disabled"
+      }
+    },
+    {
+      "name": "with-icon",
+      "title": "With Icon",
+      "context": {
+        "text": "A button with an icon",
+        "icon": "plus.svg"
+      }
+    },
+    {
+      "name": "primary-with-icon",
+      "title": "Primary With Icon",
+      "context": {
+        "text": "A primary button with an icon",
+        "icon": "plus.svg",
+        "type": "primary"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/button/button.md b/src/component-library/button/button.md
new file mode 100644
index 00000000000..8aed4fde48f
--- /dev/null
+++ b/src/component-library/button/button.md
@@ -0,0 +1,5 @@
+You can add the `.button` class to either `<button>` _or_ `<a>` elements.
+
+To apply a different type, set a `data-type` attribute with either `primary` or `secondary` as the value.
+
+You can also add icons by adding an `<svg>` as a child item of the button. If you add an icon, you should wrap the label in an element such as a `<span>` so the margin rules can affect it.
diff --git a/src/component-library/button/button.njk b/src/component-library/button/button.njk
new file mode 100644
index 00000000000..9ade5894fd9
--- /dev/null
+++ b/src/component-library/button/button.njk
@@ -0,0 +1,13 @@
+<button 
+  class="button"
+  {% if data.type %}data-type="{{ data.type }}"{% endif %}
+  {% if data.attribute %}{{ data.attribute }}{% endif %}
+>
+  {% if data.icon %}
+    {% include "icons/" ~ data.icon %}
+    <span>{{ data.text }}</span>
+  {% else %}
+  {{ data.text }}
+  {% endif %}
+  
+</button>
diff --git a/src/component-library/callout/callout.json b/src/component-library/callout/callout.json
new file mode 100644
index 00000000000..5daaa4f0825
--- /dev/null
+++ b/src/component-library/callout/callout.json
@@ -0,0 +1,48 @@
+{
+  "title": "Callout",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_callout.scss"
+    }
+  ],
+  "context": {
+    "icon": "code.svg",
+    "branding": "Codelabs",
+    "title": "See it in action",
+    "summary": "Learn more and put this guide into action.",
+    "utilities": "bg-quaternary-box-bg color-quaternary-box-text",
+    "links": [
+      {
+        "url": "#",
+        "text": "Payment form best practices codelab"
+      },
+      {
+        "url": "#",
+        "text": "Address form best practices codelab"
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "info",
+      "title": "Info style",
+      "context": {
+        "branding": false,
+        "title": "Note",
+        "summary": "Litora magnis duis molestie pharetra venenatis est.",
+        "utilities": "bg-state-info-bg color-state-info-text",
+        "links": [
+          {
+            "url": "#",
+            "text": "Lorem ipsum dolor sit amet"
+          },
+          {
+            "url": "#",
+            "text": "Inceptos consequat eu sagittis venenatis lorem fringilla"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/component-library/callout/callout.md b/src/component-library/callout/callout.md
new file mode 100644
index 00000000000..21137b628e5
--- /dev/null
+++ b/src/component-library/callout/callout.md
@@ -0,0 +1 @@
+A handy little component for directing users to supplimentary content.
diff --git a/src/component-library/callout/callout.njk b/src/component-library/callout/callout.njk
new file mode 100644
index 00000000000..32e83050054
--- /dev/null
+++ b/src/component-library/callout/callout.njk
@@ -0,0 +1,28 @@
+<aside class="callout {{ data.utilities }}">
+  <div class="repel">
+    <div class="callout__content flow">
+      {% if data.branding %}
+        <div class="callout__branding cluster gutter-base">
+          {% if data.icon %}
+            {% include "icons/" + data.icon %}
+          {% endif %}
+          {{ data.branding }}
+        </div>
+      {% endif %}
+      <h2 class="callout__title">{{ data.title }}</h2>
+      <p>{{ data.summary }}</p>
+    </div>
+    <nav class="callout__links repel" aria-label="{{ data.title }} links">
+      <ul role="list">
+        {% for item in data.links %}
+          <li>
+            <a href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
+              <span>{{ item.text }}</span>
+              {% include "icons/carat-forward.svg" %}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+  </div>
+</aside>
diff --git a/src/component-library/cards/cards.json b/src/component-library/cards/cards.json
new file mode 100644
index 00000000000..8f1f0f933a4
--- /dev/null
+++ b/src/component-library/cards/cards.json
@@ -0,0 +1,40 @@
+{
+  "title": "Cards",
+  "context": {
+    "title": "Blibli's PWA generates 10x more revenue per user than their previous mobile website",
+    "summary": "How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in mobile conversion rate, and 2.5x more pages per session.",
+    "url": "#",
+    "date": "Jun 15, 2021",
+    "img": {
+      "src": "https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?auto=format&w=1600",
+      "alt": "Images of the BliBli app."
+    },
+    "authors": [
+      {
+        "name": "Collin Dion Agata",
+        "url": "https://web.dev/authors/collindionagata/",
+        "image": "https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "multiple-authors",
+      "title": "Multiple Authors",
+      "context": {
+        "authors": [
+          {
+            "name": "Collin Dion Agata",
+            "url": "https://web.dev/authors/collindionagata/",
+            "image": "https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
+          },
+          {
+            "name": "Swetha Gopalakrishnan",
+            "url": "https://web.dev/authors/swethagopalakrishnan/",
+            "image": "https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/component-library/cards/cards.md b/src/component-library/cards/cards.md
new file mode 100644
index 00000000000..a30e70030c6
--- /dev/null
+++ b/src/component-library/cards/cards.md
@@ -0,0 +1,19 @@
+The basic card is an `<article>`, which, to make the whole thing clickable, you
+add a `.card__action` element. This uses the [breakout
+button](https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/)
+technique. The `.card` can also be an `<a>` element, like [this
+example](#path-card).
+
+The authors section is a list, even if there's just one author. This
+effortlessly expands to multiple that way.
+
+If you want to just display a summary as the content ([see this
+example](#with-a-visually-hidden-heading)), it's recommended that you remove
+the [flow utility](/design-system/css-utilities/#flow) from `.card__content`
+and add the [visually hidden
+utility](/design-system/css-utilities/#visually-hidden) to your heading.
+
+### Feature cards
+
+There’s an [example feature card in the variants](#feature-card). More detail
+can be found on the [feature card section](/design-system/component/feature-card/).
diff --git a/src/component-library/cards/cards.njk b/src/component-library/cards/cards.njk
new file mode 100644
index 00000000000..1842070f099
--- /dev/null
+++ b/src/component-library/cards/cards.njk
@@ -0,0 +1,28 @@
+<article class="card">
+  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+  <div class="card__content flow">
+    <h3 class="card__heading text-size-3">
+      <a href="{{ data.url }}">{{ data.title }}</a>
+    </h3>
+    <p>{{ data.summary }}</p>
+    {% if data.authors %}
+      <div class="cluster gutter-base">
+        <div class="card__avatars cluster" aria-hidden="true">
+          {% for author in data.authors %}
+          <a class="avatar" href="{{ author.url }}">
+            <img src="{{ author.image }}" alt="Image of {{ author.name }}" />
+          </a>
+          {% endfor %}
+        </div>
+        <ul class="card__authors flow-space-base cluster" aria-label="authors" role="list">
+          {% for author in data.authors %}
+          <li>
+            <a href="{{ author.url }}">{{ author.name }}</a>{% if not loop.last %},{% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  </div>
+  <a class="card__action" href="{{ href.data.url }}">More</a>
+</article>
diff --git a/src/component-library/cards/variants/branded/branded.json b/src/component-library/cards/variants/branded/branded.json
new file mode 100644
index 00000000000..0e0907b58fe
--- /dev/null
+++ b/src/component-library/cards/variants/branded/branded.json
@@ -0,0 +1,21 @@
+{
+  "title": "Branded",
+  "context": {
+    "title": "Learn CSS",
+    "summary": "Let’s gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.",
+    "url": "#",
+    "img": {
+      "src": "/images/courses/css/card.svg",
+      "alt": "Learn CSS branding"
+    },
+    "logo": "/images/courses/css/logo.svg",
+    "header": {
+      "text": "Course",
+      "counter": {
+        "count": "24",
+        "icon": "icons/mortarboard.svg",
+        "utilities": "t-bg-highlights-purple t-color-shades-light-bright"
+      }
+    }
+  }
+}
diff --git a/src/component-library/cards/variants/branded/branded.njk b/src/component-library/cards/variants/branded/branded.njk
new file mode 100644
index 00000000000..5e4a634afb9
--- /dev/null
+++ b/src/component-library/cards/variants/branded/branded.njk
@@ -0,0 +1,16 @@
+<a href="{{ data.url }}" class="card" data-style="branded">
+  <div class="card__header repel">
+    <p class="color-mid-text">{{ data.header.text }}</p> 
+    <div class="counter {{ data.header.counter.utilities }}">
+      <span class="counter__content">{{ data.header.counter.count }}</span>
+      {% include data.header.counter.icon %}
+    </div>
+  </div>
+  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+  <div class="card__content flow">
+    <h3 class="visually-hidden">{{ data.title }}</h3>
+    <img class="card__logo" src="{{ data.logo }}" alt="" aria-hidden="true" />
+    <p class="text-size-0">{{ data.summary }}</p>
+  </div>
+</a>
+
diff --git a/src/component-library/cards/variants/feature-card/feature-card.json b/src/component-library/cards/variants/feature-card/feature-card.json
new file mode 100644
index 00000000000..6160df82814
--- /dev/null
+++ b/src/component-library/cards/variants/feature-card/feature-card.json
@@ -0,0 +1,9 @@
+{
+  "title": "Feature Card",
+  "context": {
+    "title": "Making their web app installable resulted in increased traffic",
+    "eyebrow": "Web vitals",
+    "url": "#",
+    "background": "/images/feature-cards/web-vitals-feature.png"
+  }
+}
diff --git a/src/component-library/cards/variants/feature-card/feature-card.njk b/src/component-library/cards/variants/feature-card/feature-card.njk
new file mode 100644
index 00000000000..767276d2a78
--- /dev/null
+++ b/src/component-library/cards/variants/feature-card/feature-card.njk
@@ -0,0 +1,5 @@
+<a class="feature-card" href="{{ data.url }}" {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}>
+  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
+  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
+  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
+</a>
diff --git a/src/component-library/cards/variants/hidden-heading/hidden-heading.json b/src/component-library/cards/variants/hidden-heading/hidden-heading.json
new file mode 100644
index 00000000000..99b832e1c6b
--- /dev/null
+++ b/src/component-library/cards/variants/hidden-heading/hidden-heading.json
@@ -0,0 +1,12 @@
+{
+  "title": "With a visually hidden heading",
+  "context": {
+    "title": "Learn CSS",
+    "summary": "Let’s gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.",
+    "url": "#",
+    "img": {
+      "src": "https://web.dev/images/courses/css/card.svg",
+      "alt": "Illustration"
+    }
+  }
+}
diff --git a/src/component-library/cards/variants/hidden-heading/hidden-heading.njk b/src/component-library/cards/variants/hidden-heading/hidden-heading.njk
new file mode 100644
index 00000000000..b8bf4305d56
--- /dev/null
+++ b/src/component-library/cards/variants/hidden-heading/hidden-heading.njk
@@ -0,0 +1,12 @@
+<a href="{{ data.url }}" class="card">
+  <ul class="card__meta" role="list">
+    <li>Collection</li>
+    <li>23 resources</li>
+  </ul>
+  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+  <div class="card__content">
+    <h3 class="visually-hidden">{{ data.title }}</h3>
+    <p>{{ data.summary }}</p>
+  </div>
+</a>
+
diff --git a/src/component-library/cards/variants/path/path.json b/src/component-library/cards/variants/path/path.json
new file mode 100644
index 00000000000..c3eba4e2f3f
--- /dev/null
+++ b/src/component-library/cards/variants/path/path.json
@@ -0,0 +1,12 @@
+{
+  "title": "Path Card",
+  "context": {
+    "title": "Web Vitals",
+    "summary": "Essential metrics for a healthy site.",
+    "url": "#",
+    "img": {
+      "src": "https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg",
+      "alt": "Illustration"
+    }
+  }
+}
diff --git a/src/component-library/cards/variants/path/path.njk b/src/component-library/cards/variants/path/path.njk
new file mode 100644
index 00000000000..4e882256996
--- /dev/null
+++ b/src/component-library/cards/variants/path/path.njk
@@ -0,0 +1,12 @@
+<a href="{{ data.url }}" class="card">
+  <ul class="card__meta" role="list">
+    <li>Collection</li>
+    <li>23 resources</li>
+  </ul>
+  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+  <div class="card__content flow">
+    <h3 class="card__heading text-size-3">{{ data.title }}</h3>
+    <p>{{ data.summary }}</p>
+  </div>
+</a>
+
diff --git a/src/component-library/cards/variants/with-header/with-header.json b/src/component-library/cards/variants/with-header/with-header.json
new file mode 100644
index 00000000000..89a08fbad4c
--- /dev/null
+++ b/src/component-library/cards/variants/with-header/with-header.json
@@ -0,0 +1,20 @@
+{
+  "title": "With Header",
+  "context": {
+    "title": "Web Vitals",
+    "summary": "Essential metrics for a healthy site.",
+    "url": "#",
+    "img": {
+      "src": "https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg",
+      "alt": "Illustration"
+    },
+    "header": {
+      "text": "Collection",
+      "counter": {
+        "count": "69",
+        "icon": "icons/mortarboard.svg"
+      },
+      "author": null
+    }
+  }
+}
diff --git a/src/component-library/cards/variants/with-header/with-header.njk b/src/component-library/cards/variants/with-header/with-header.njk
new file mode 100644
index 00000000000..b11f028771d
--- /dev/null
+++ b/src/component-library/cards/variants/with-header/with-header.njk
@@ -0,0 +1,15 @@
+<a href="{{ data.url }}" class="card">
+  <div class="card__header repel">
+    <p class="color-mid-text">{{ data.header.text }}</p> 
+    <div class="counter" data-layout="flush">
+      <span class="counter__content">{{ data.header.counter.count }}</span>
+      {% include data.header.counter.icon %}
+    </div>
+  </div>
+  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
+  <div class="card__content flow">
+    <h3 class="card__heading text-size-3">{{ data.title }}</h3>
+    <p>{{ data.summary }}</p>
+  </div>
+</a>
+
diff --git a/src/component-library/carousel/carousel.json b/src/component-library/carousel/carousel.json
new file mode 100644
index 00000000000..260d42bf9a9
--- /dev/null
+++ b/src/component-library/carousel/carousel.json
@@ -0,0 +1,25 @@
+{
+  "title": "Carousel",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_carousel.scss"
+    },
+    {
+      "label": "The Reel",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/compositions/_reel.scss"
+    }
+  ],
+  "context": {
+    "items": [
+      "Item 1",
+      "Item 2",
+      "Item 3",
+      "Item 4",
+      "Item 5",
+      "Item 6",
+      "Item 7",
+      "Item 8"
+    ]
+  }
+}
diff --git a/src/component-library/carousel/carousel.md b/src/component-library/carousel/carousel.md
new file mode 100644
index 00000000000..b9a1b1ee71e
--- /dev/null
+++ b/src/component-library/carousel/carousel.md
@@ -0,0 +1,3 @@
+The carousel has a dependency of
+[The Reel layout composition](/design-system/css-compositions/#reel).
+It is an extension of that layout's scrolling capability.
diff --git a/src/component-library/carousel/carousel.njk b/src/component-library/carousel/carousel.njk
new file mode 100644
index 00000000000..a07b5791570
--- /dev/null
+++ b/src/component-library/carousel/carousel.njk
@@ -0,0 +1,40 @@
+<web-carousel>
+  <div class="carousel">
+    <button class="icon-button" data-direction="prev" aria-label="back">
+      {% include "icons/carat-back.svg" %}
+    </button>
+    <div class="carousel__track reel" data-scroll="snap">
+      {% for item in data.items %}
+        {# Note, we're just repeating the same content in an iteration #}
+        <div>
+          <a href="#" class="card" data-style="branded">
+            <div class="card__header repel">
+              <p class="color-mid-text">Course</p>
+              <div class="t-color-shades-light-bright counter t-bg-core-primary">
+                <span class="counter__content">24</span>
+                {% include "icons/mortarboard.svg" %}
+              </div>
+            </div>
+            <img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
+            <div class="card__content flow">
+              <h3 class="visually-hidden">Learn CSS</h3>
+              <img
+                class="card__logo"
+                src="/images/courses/css/logo.svg"
+                alt=""
+                aria-hidden="true"
+              />
+              <p class="text-size-0">
+                Let’s gleefully breakdown complex aspects of CSS into digestible episodes
+                covering everything from accessibility to z-index.
+              </p>
+            </div>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+    <button class="icon-button" data-direction="next" aria-label="forward">
+      {% include "icons/carat-forward.svg" %}
+    </button>
+  </div>
+</web-carousel>
diff --git a/src/component-library/code-blocks/code-blocks.json b/src/component-library/code-blocks/code-blocks.json
new file mode 100644
index 00000000000..96d15b696af
--- /dev/null
+++ b/src/component-library/code-blocks/code-blocks.json
@@ -0,0 +1,11 @@
+{
+  "title": "Code blocks",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_syntax-highlighting.scss"
+    }
+  ],
+  "summary": "These are just static examples of code highlighting. See the info for implementation notes.",
+  "context": {}
+}
diff --git a/src/component-library/code-blocks/code-blocks.md b/src/component-library/code-blocks/code-blocks.md
new file mode 100644
index 00000000000..cb818d442bc
--- /dev/null
+++ b/src/component-library/code-blocks/code-blocks.md
@@ -0,0 +1 @@
+You should implement the `<web-copy-code>` web component for code blocks to insure users can copy the code with ease.
diff --git a/src/component-library/code-blocks/code-blocks.njk b/src/component-library/code-blocks/code-blocks.njk
new file mode 100644
index 00000000000..0944b552dfb
--- /dev/null
+++ b/src/component-library/code-blocks/code-blocks.njk
@@ -0,0 +1,6 @@
+<div class="flow">
+  <pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br>  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br>  <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br>  <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br>  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
+  <pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-active">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Mary's Maple Bar Fast-Baking Recipe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    …</span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></span></code></pre>
+  <pre class="language-js"><code class="language-js"><span class="token comment">// Feature detection</span><br><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'serviceWorker'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span><br>  <span class="token comment">// Register a service worker</span><br>  navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><br>    <span class="token comment">// A service worker JS file is separate</span><br>    <span class="token string">'service-worker.js'</span><br>  <span class="token punctuation">)</span><span class="token punctuation">;</span><br>  <span class="token comment">// PaymentManager requires the service worker to be active.</span><br>  <span class="token comment">// One simple method to activate a service worker is through</span><br>  <span class="token comment">// a `ready` promise.</span><br>  <span class="token keyword">const</span> registration <span class="token operator">=</span> <span class="token keyword">await</span> navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span>ready<span class="token punctuation">;</span><br>…</code></pre>
+  <pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-remove">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Mary's Maple Bar Fast-Baking Recipe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span></mark><br /><mark class="highlight-line highlight-line-add">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Mary's Maple Bar Fast-Baking Recipe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    …</span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></span></code></pre>
+</div>
diff --git a/src/component-library/compare/compare.json b/src/component-library/compare/compare.json
new file mode 100644
index 00000000000..0bb748b210b
--- /dev/null
+++ b/src/component-library/compare/compare.json
@@ -0,0 +1,45 @@
+{
+  "title": "Compare",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_compare.scss"
+    }
+  ],
+  "context": {
+    "items": [
+      {
+        "type": "worse",
+        "label": "Don’t",
+        "code": "```Bad code example```"
+      },
+      {
+        "type": "better",
+        "label": "Do",
+        "code": "```good code example```"
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "with-captions",
+      "title": "With captions",
+      "context": {
+        "items": [
+          {
+            "type": "worse",
+            "label": "Don’t",
+            "code": "```Bad code example```",
+            "caption": "Explanation of why `example` is bad."
+          },
+          {
+            "type": "better",
+            "label": "Do",
+            "code": "```good code example```",
+            "caption": "Explanation of why `example` is good."
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/component-library/compare/compare.md b/src/component-library/compare/compare.md
new file mode 100644
index 00000000000..441f9749ba9
--- /dev/null
+++ b/src/component-library/compare/compare.md
@@ -0,0 +1,6 @@
+To highlight a comparison as incorrect/worse, add `data-type="worse"` to the
+`.compare` element. To highlight as correct/better, add `data-type="better"` to
+the `.compare` element.
+
+By default, the compare pattern will be highlighted consistently with "info"
+states.
diff --git a/src/component-library/compare/compare.njk b/src/component-library/compare/compare.njk
new file mode 100644
index 00000000000..daca7970eb8
--- /dev/null
+++ b/src/component-library/compare/compare.njk
@@ -0,0 +1,15 @@
+<div class="flow">
+  {% for item in data.items %}
+  <figure class="compare flow" data-type="{{ item.type }}">
+    <p class="compare__label">
+      {{ item.label }}
+    </p>
+    <pre class="compare__code">{{ item.code | md | safe }}</pre>
+    {% if item.caption %}
+      <figcaption class="compare__caption">
+        <p>— {{ item.caption | md | safe }}</p>
+      </figcaption>
+    {% endif %}
+  </figure>
+  {% endfor %}
+</div>
diff --git a/src/component-library/compare/variants/columns/columns.json b/src/component-library/compare/variants/columns/columns.json
new file mode 100644
index 00000000000..97993c788f7
--- /dev/null
+++ b/src/component-library/compare/variants/columns/columns.json
@@ -0,0 +1,17 @@
+{
+  "title": "In columns",
+  "context": {
+    "items": [
+      {
+        "type": "worse",
+        "label": "Don’t",
+        "code": "```Bad code example```"
+      },
+      {
+        "type": "better",
+        "label": "Do",
+        "code": "```good code example```"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/compare/variants/columns/columns.njk b/src/component-library/compare/variants/columns/columns.njk
new file mode 100644
index 00000000000..fec31002144
--- /dev/null
+++ b/src/component-library/compare/variants/columns/columns.njk
@@ -0,0 +1,15 @@
+<div class="switcher">
+  {% for item in data.items %}
+  <figure class="compare flow" data-type="{{ item.type }}">
+    <p class="compare__label">
+      {{ item.label }}
+    </p>
+    <pre class="compare__code">{{ item.code | md | safe }}</pre>
+    {% if item.caption %}
+      <figcaption class="compare__caption">
+        <p>— {{ item.caption | md | safe }}</p>
+      </figcaption>
+    {% endif %}
+  </figure>
+  {% endfor %}
+</div>
diff --git a/src/component-library/counter/counter.json b/src/component-library/counter/counter.json
new file mode 100644
index 00000000000..4fcfc578f70
--- /dev/null
+++ b/src/component-library/counter/counter.json
@@ -0,0 +1,29 @@
+{
+  "title": "Counter",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_counter.scss"
+    }
+  ],
+  "context": {
+    "count": "69",
+    "icon": "icons/mortarboard.svg"
+  },
+  "variants": [
+    {
+      "name": "flush",
+      "title": "Flush",
+      "context": {
+        "layout": "flush"
+      }
+    },
+    {
+      "name": "highlights",
+      "title": "Using Highlight Colors",
+      "context": {
+        "utilities": "t-bg-highlights-magenta t-color-shades-light-bright"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/counter/counter.md b/src/component-library/counter/counter.md
new file mode 100644
index 00000000000..0c4203dc7fb
--- /dev/null
+++ b/src/component-library/counter/counter.md
@@ -0,0 +1,6 @@
+A simple icon and count pair that by default, will match action items, such as
+[the button](/design-system/component/button). Utility classes can be applied
+to present custom coloring though, seen on the
+["Using Highlight Colors" variant](#using-highlight-colors).
+
+Use the ["Flush" variant](#flush) to remove background and padding.
diff --git a/src/component-library/counter/counter.njk b/src/component-library/counter/counter.njk
new file mode 100644
index 00000000000..0068ab2225a
--- /dev/null
+++ b/src/component-library/counter/counter.njk
@@ -0,0 +1,4 @@
+<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
+  <span class="counter__count">{{ data.count }}</span>
+  {% include data.icon %}
+</div>
diff --git a/src/component-library/details/details.json b/src/component-library/details/details.json
new file mode 100644
index 00000000000..bfd0f7d30bf
--- /dev/null
+++ b/src/component-library/details/details.json
@@ -0,0 +1,16 @@
+{
+  "title": "Details",
+  "context": {
+    "summary": "My details",
+    "content": "<p>Some content that is hidden by default.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>"
+  },
+  "variants": [
+    {
+      "name": "open",
+      "title": "Open by default",
+      "context": {
+        "state": "open"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/details/details.md b/src/component-library/details/details.md
new file mode 100644
index 00000000000..9337dd4dcde
--- /dev/null
+++ b/src/component-library/details/details.md
@@ -0,0 +1,3 @@
+The Details pattern is designed to work with plain `<details>` and `<summary>` elements **without** a class attribute to keep things as simple as possible when you're using them.
+
+The default marker has been hidden and a custom marker will render in the correct reading direction, instead.
diff --git a/src/component-library/details/details.njk b/src/component-library/details/details.njk
new file mode 100644
index 00000000000..891c15aa451
--- /dev/null
+++ b/src/component-library/details/details.njk
@@ -0,0 +1,6 @@
+<details {{ data.state | safe }}>
+  <summary>
+    {{ data.summary }}
+  </summary>
+  {{ data.content | safe }}
+</details>
diff --git a/src/component-library/details/variants/extra-summary-content/extra-summary-content.json b/src/component-library/details/variants/extra-summary-content/extra-summary-content.json
new file mode 100644
index 00000000000..87006ebeffc
--- /dev/null
+++ b/src/component-library/details/variants/extra-summary-content/extra-summary-content.json
@@ -0,0 +1,8 @@
+{
+  "title": "With extra summary content",
+  "context": {
+    "summary": "My details",
+    "summaryPreview": "Some teaser content",
+    "content": "<p>Some content that is hidden by default.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>"
+  }
+}
diff --git a/src/component-library/details/variants/extra-summary-content/extra-summary-content.njk b/src/component-library/details/variants/extra-summary-content/extra-summary-content.njk
new file mode 100644
index 00000000000..ff963c1cc5a
--- /dev/null
+++ b/src/component-library/details/variants/extra-summary-content/extra-summary-content.njk
@@ -0,0 +1,7 @@
+<details>
+  <summary>
+    {{ data.summary }}
+    <p class="text-base color-core-text gap-top-base">{{ data.summaryPreview }}</p>
+  </summary>
+  {{ data.content | safe }}
+</details>
diff --git a/src/component-library/ellipsis/ellipsis.json b/src/component-library/ellipsis/ellipsis.json
new file mode 100644
index 00000000000..6ade3ef9ef8
--- /dev/null
+++ b/src/component-library/ellipsis/ellipsis.json
@@ -0,0 +1,6 @@
+
+{ 
+  "title": "Ellipsis",
+  "context": {
+  }
+}
diff --git a/src/component-library/ellipsis/ellipsis.md b/src/component-library/ellipsis/ellipsis.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/ellipsis/ellipsis.njk b/src/component-library/ellipsis/ellipsis.njk
new file mode 100644
index 00000000000..f1ccca2272b
--- /dev/null
+++ b/src/component-library/ellipsis/ellipsis.njk
@@ -0,0 +1,3 @@
+<details class="ellipsis">
+  <summary><span class="ellipsis__full">full text</span><span class="ellipsis__more">see more</span></summary>
+</details>
\ No newline at end of file
diff --git a/src/component-library/eyebrow/eyebrow.json b/src/component-library/eyebrow/eyebrow.json
new file mode 100644
index 00000000000..9f70014ae8a
--- /dev/null
+++ b/src/component-library/eyebrow/eyebrow.json
@@ -0,0 +1,23 @@
+{
+  "title": "Eyebrow",
+  "summary": "An eyebrow is a useful tool for introducing content, such as headings.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_eyebrow.scss"
+    }
+  ],
+  "context": {
+    "content": "An eyebrow element"
+  },
+  "variants": [
+    {
+      "name": "paired-with-heading",
+      "title": "Paired with heading",
+      "context": {
+        "content": "An eyebrow",
+        "heading": "A heading element"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/eyebrow/eyebrow.md b/src/component-library/eyebrow/eyebrow.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/eyebrow/eyebrow.njk b/src/component-library/eyebrow/eyebrow.njk
new file mode 100644
index 00000000000..8fdd8ab35dd
--- /dev/null
+++ b/src/component-library/eyebrow/eyebrow.njk
@@ -0,0 +1,6 @@
+<div class="flow">
+  <p class="eyebrow">{{ data.content }}</p>
+  {% if data.heading %}
+    <h2>{{ data.heading }}</h2>
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/src/component-library/fab/fab.json b/src/component-library/fab/fab.json
new file mode 100644
index 00000000000..7ece5608136
--- /dev/null
+++ b/src/component-library/fab/fab.json
@@ -0,0 +1,38 @@
+{
+  "title": "Floating Action Button",
+  "summary": "The `.fab`—floating action button—is designed to be compact where space is limited and expanded otherwise. There's also an option for it to be docked at the bottom right of the viewport.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_fab.scss"
+    }
+  ],
+  "context": {
+    "text": "Subscribe",
+    "url": "/newsletter/",
+    "icon": "subscribe.svg"
+  },
+  "variants": [
+    {
+      "name": "primary",
+      "title": "Primary",
+      "context": {
+        "type": "primary"
+      }
+    },
+    {
+      "name": "icon-only",
+      "title": "Icon Only",
+      "context": {
+        "iconOnly": true
+      }
+    },
+    {
+      "name": "docked",
+      "title": "Docked",
+      "context": {
+        "docked": true
+      }
+    }
+  ]
+}
diff --git a/src/component-library/fab/fab.md b/src/component-library/fab/fab.md
new file mode 100644
index 00000000000..75ff3b4ad6d
--- /dev/null
+++ b/src/component-library/fab/fab.md
@@ -0,0 +1,5 @@
+Add a `data-icon-only` [exception](https://cube.fyi/exception.html) to always visually hide the label, regardless of viewport size.
+
+Just like with the [button](/design-system/component/button), you can add a `primary` or `secondary` `data-type` to set a theme.
+
+To dock the FAB at the bottom right of the screen, add `data-docked` to it.
diff --git a/src/component-library/fab/fab.njk b/src/component-library/fab/fab.njk
new file mode 100644
index 00000000000..3fd74728f2f
--- /dev/null
+++ b/src/component-library/fab/fab.njk
@@ -0,0 +1,10 @@
+<a
+  href="{{ data.url }}"
+  class="fab"
+  {% if data.type %}data-type="{{ data.type }}"{% endif %}
+  {% if data.docked %}data-docked{% endif %}
+  {% if data.iconOnly %}data-icon-only{% endif %}
+>
+  {% include "icons/" ~ data.icon %}
+  <span class="fab__label">{{ data.text }}</span>
+</a>
diff --git a/src/component-library/feature-card/feature-card.json b/src/component-library/feature-card/feature-card.json
new file mode 100644
index 00000000000..7155c802da5
--- /dev/null
+++ b/src/component-library/feature-card/feature-card.json
@@ -0,0 +1,52 @@
+{
+  "title": "Feature Card",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_feature-card.scss"
+    }
+  ],
+  "context": {
+    "title": "Making their web app installable resulted in increased traffic",
+    "eyebrow": "Web vitals",
+    "url": "#",
+    "background": "/images/feature-cards/web-vitals-feature.png"
+  },
+  "variants": [
+    {
+      "name": "with-light-text",
+      "title": "With Light Text",
+      "context": {
+        "theme": "light",
+        "title": "Designing in the browser using Dev Tools for design",
+        "eyebrow": "Show",
+        "url": "#",
+        "background": "/images/feature-cards/design-in-the-browser.jpg"
+      }
+    },
+    {
+      "name": "with-illustration-treatment",
+      "title": "With Illustration Treatment",
+      "context": {
+        "theme": "dark",
+        "treatment": "illustration",
+        "title": "Explore our structured learning paths to learn new skills",
+        "eyebrow": "Learn",
+        "url": "#",
+        "background": "https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/yJSJQfrrK4pVh44yuMZV.svg"
+      }
+    },
+    {
+      "name": "with-background-treatment",
+      "title": "With Background Treatment",
+      "context": {
+        "theme": "dark",
+        "treatment": "bg-image",
+        "title": "Mainline Menswear implements PWA and sees a 55% conversion rate uplift",
+        "eyebrow": "Case study",
+        "url": "#",
+        "background": "https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yz5G0leLpdHLidygym31.jpg?auto=format&w=1140"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/feature-card/feature-card.md b/src/component-library/feature-card/feature-card.md
new file mode 100644
index 00000000000..3e5eea56b5b
--- /dev/null
+++ b/src/component-library/feature-card/feature-card.md
@@ -0,0 +1,5 @@
+To maintain simplicity, regardless of design, this component's focus is eyebrow
+and title. Any design detail is provided by a background image.
+
+To implement a light text version, apply a `data-theme="light"` attribute to
+the `.feature-card` element.
diff --git a/src/component-library/feature-card/feature-card.njk b/src/component-library/feature-card/feature-card.njk
new file mode 100644
index 00000000000..58b0e594079
--- /dev/null
+++ b/src/component-library/feature-card/feature-card.njk
@@ -0,0 +1,10 @@
+<a 
+  class="feature-card" 
+  href="{{ data.url }}" 
+  {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}
+  {% if data.treatment %}data-treatment="{{ data.treatment }}"{% endif %}
+>
+  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
+  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
+  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
+</a>
diff --git a/src/component-library/figure/figure.json b/src/component-library/figure/figure.json
new file mode 100644
index 00000000000..c7aa3bb3344
--- /dev/null
+++ b/src/component-library/figure/figure.json
@@ -0,0 +1,6 @@
+
+{ 
+  "title": "Figure",
+  "context": {
+  }
+}
diff --git a/src/component-library/figure/figure.md b/src/component-library/figure/figure.md
new file mode 100644
index 00000000000..20d05d55608
--- /dev/null
+++ b/src/component-library/figure/figure.md
@@ -0,0 +1,3 @@
+In order to use an image inside of a text body, wrap the actual image in `<figure>` tag. Use `<figcaption>` to add a caption to the image.
+
+`<figure>` elements wrap the content inside of them.
diff --git a/src/component-library/figure/figure.njk b/src/component-library/figure/figure.njk
new file mode 100644
index 00000000000..55e7614fa0b
--- /dev/null
+++ b/src/component-library/figure/figure.njk
@@ -0,0 +1,4 @@
+<figure>
+  <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
+  <figcaption>This is the caption</figcaption>
+</figure>
diff --git a/src/component-library/figure/variants/float/float.json b/src/component-library/figure/variants/float/float.json
new file mode 100644
index 00000000000..88ab473306e
--- /dev/null
+++ b/src/component-library/figure/variants/float/float.json
@@ -0,0 +1,12 @@
+{
+  "title": "Float figure",
+  "context": {
+    "content": "Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
+    "img": {
+      "src": "https://web.dev/images/icons/performance.svg",
+      "alt": "A spedometer"
+    },
+    "utilities": {
+    }
+  }
+}
diff --git a/src/component-library/figure/variants/float/float.njk b/src/component-library/figure/variants/float/float.njk
new file mode 100644
index 00000000000..a0ffe395ebe
--- /dev/null
+++ b/src/component-library/figure/variants/float/float.njk
@@ -0,0 +1,15 @@
+<div class="prose">
+  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
+  <figure data-float="left">
+    <img alt="Alternative text" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png">
+    <figcaption>This figure floats left</figcaption>
+  </figure>
+  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
+  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
+  <figure data-float="right">
+    <img alt="Alternative text" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png">
+    <figcaption>This figure floats right</figcaption>
+  </figure>
+  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
+  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
+</div>
\ No newline at end of file
diff --git a/src/component-library/figure/variants/screenshot/screenshot.json b/src/component-library/figure/variants/screenshot/screenshot.json
new file mode 100644
index 00000000000..9a358894762
--- /dev/null
+++ b/src/component-library/figure/variants/screenshot/screenshot.json
@@ -0,0 +1,3 @@
+{
+  "title": "Screenshot figure"
+}
diff --git a/src/component-library/figure/variants/screenshot/screenshot.njk b/src/component-library/figure/variants/screenshot/screenshot.njk
new file mode 100644
index 00000000000..655bc9f3afd
--- /dev/null
+++ b/src/component-library/figure/variants/screenshot/screenshot.njk
@@ -0,0 +1,7 @@
+<div class="prose">
+  <p>Add <code>data-screenshot</code> attribute to add a border around a figure.</p>
+  <figure data-screenshot="true">
+    <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
+    <figcaption>This figure gets a border.</figcaption>
+  </figure>
+</div>
diff --git a/src/component-library/figure/variants/size/size.json b/src/component-library/figure/variants/size/size.json
new file mode 100644
index 00000000000..4ec10fd87ce
--- /dev/null
+++ b/src/component-library/figure/variants/size/size.json
@@ -0,0 +1,3 @@
+{
+  "title": "Size figure"
+}
diff --git a/src/component-library/figure/variants/size/size.njk b/src/component-library/figure/variants/size/size.njk
new file mode 100644
index 00000000000..bd5ef3740bb
--- /dev/null
+++ b/src/component-library/figure/variants/size/size.njk
@@ -0,0 +1,8 @@
+<div class="prose">
+  <p>In order for the <code>&lt;figure&gt;</code> to take up the full width of the element that it is in, add the attribute <code>data-size="full"</code>.</p>
+  <p>Content inside of the <code>&lt;figure&gt;</code> will stretch to take up all the available space.</p>
+  <figure data-size="full">
+    <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
+    <figcaption>This figure and it's content is taking up the full space it can.</figcaption>
+  </figure>
+</div>
diff --git a/src/component-library/fixed-width-img/fixed-width-img.json b/src/component-library/fixed-width-img/fixed-width-img.json
new file mode 100644
index 00000000000..deeec54df15
--- /dev/null
+++ b/src/component-library/fixed-width-img/fixed-width-img.json
@@ -0,0 +1,10 @@
+{
+  "title": "Fixed width Image",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_fixed-width-img.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/fixed-width-img/fixed-width-img.md b/src/component-library/fixed-width-img/fixed-width-img.md
new file mode 100644
index 00000000000..879f57ac0da
--- /dev/null
+++ b/src/component-library/fixed-width-img/fixed-width-img.md
@@ -0,0 +1,3 @@
+This ensures images are scaled to the exact size specified by the
+width attribute, preventing HiDPI screenshots from being blurry:
+`<img src="800x500.png" width="400" class="fixed-width-img" alt="" />`
diff --git a/src/component-library/fixed-width-img/fixed-width-img.njk b/src/component-library/fixed-width-img/fixed-width-img.njk
new file mode 100644
index 00000000000..2ae9735210e
--- /dev/null
+++ b/src/component-library/fixed-width-img/fixed-width-img.njk
@@ -0,0 +1 @@
+<img src="https://source.unsplash.com/RTfqNYKbqE4/800x500" width="400" alt="" class="fixed-width-img" />
diff --git a/src/component-library/fixed-width-img/variants/prose/prose.json b/src/component-library/fixed-width-img/variants/prose/prose.json
new file mode 100644
index 00000000000..2fe118a4b14
--- /dev/null
+++ b/src/component-library/fixed-width-img/variants/prose/prose.json
@@ -0,0 +1,6 @@
+
+{ 
+  "title": "In prose context",
+  "context": {
+  }
+}
diff --git a/src/component-library/fixed-width-img/variants/prose/prose.njk b/src/component-library/fixed-width-img/variants/prose/prose.njk
new file mode 100644
index 00000000000..e4927c3ca95
--- /dev/null
+++ b/src/component-library/fixed-width-img/variants/prose/prose.njk
@@ -0,0 +1,9 @@
+<article class="prose">
+  <p>On form submission, browsers automatically set focus on fields with problematic or missing required values. No JavaScript required!</p>
+  <figure>
+    <img class="fixed-width-img" width="500" height="483" alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value." height="483" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format" decoding="async" sizes="(min-width: 500px) 500px, calc(100vw - 48px)" srcset="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=1000 1000w" loading="lazy">
+    <figcaption>Basic built-in validation by the browser.</figcaption>
+  </figure>
+  <p>Validate inline and provide feedback to the user as they enter data, rather than providing a list of errors when they click the submit button. If you need to validate data on your server after form submission, list all problems that are found and clearly highlight all form fields with invalid values, as well as displaying a message inline next to each problematic field explaining what needs to be fixed. Check server logs and analytics data for common errors—you may need to redesign your form.</p>
+  <p>You should also use JavaScript to do more robust validation while users are entering data and on form submission. Use the <a href="https://html.spec.whatwg.org/multipage/forms.html#constraints" rel="noopener">Constraint Validation API</a> (which is <a href="https://caniuse.com/#feat=constraint-validation" rel="noopener">widely supported</a>) to add custom validation using built-in browser UI to set focus and display prompts.</p>
+</article>
diff --git a/src/component-library/form-fields/form-fields.json b/src/component-library/form-fields/form-fields.json
new file mode 100644
index 00000000000..8d372686048
--- /dev/null
+++ b/src/component-library/form-fields/form-fields.json
@@ -0,0 +1,10 @@
+{
+  "title": "Form Fields",
+  "summary": "All form inputs, collected together.",
+  "context": {
+    "id": "myInput",
+    "label": "First name",
+    "name": "myInput",
+    "type": "text"
+  }
+}
diff --git a/src/component-library/form-fields/form-fields.md b/src/component-library/form-fields/form-fields.md
new file mode 100644
index 00000000000..a392f906a1a
--- /dev/null
+++ b/src/component-library/form-fields/form-fields.md
@@ -0,0 +1,7 @@
+All form field styling is applied to the native HTML element itself as global
+CSS, rather than using a class. For checkboxes and radio buttons, the [cluster
+composition](/design-system/css-compositions/#cluster) is used to provide the
+basic layout.
+
+It's recommended that you use the `rows` attribute on a `<textarea>`, but if you
+don't, a minimum height will be applied.
diff --git a/src/component-library/form-fields/form-fields.njk b/src/component-library/form-fields/form-fields.njk
new file mode 100644
index 00000000000..53dd4e54773
--- /dev/null
+++ b/src/component-library/form-fields/form-fields.njk
@@ -0,0 +1,8 @@
+<label for="{{ data.id }}">{{ data.label }}</label>
+<input
+  id="{{ data.id }}"
+  name="{{ data.name }}"
+  type="{{ data.type }}"
+  required
+  placeholder="Useful placeholder text"
+/>
diff --git a/src/component-library/form-fields/variants/checkbox/checkbox.json b/src/component-library/form-fields/variants/checkbox/checkbox.json
new file mode 100644
index 00000000000..d981c01c088
--- /dev/null
+++ b/src/component-library/form-fields/variants/checkbox/checkbox.json
@@ -0,0 +1,8 @@
+{
+  "title": "Checkbox",
+  "context": {
+    "name": "myCheckbox",
+    "id": "myCheckbox",
+    "label": "Lorem ipsum dolor sit amet"
+  }
+}
diff --git a/src/component-library/form-fields/variants/checkbox/checkbox.njk b/src/component-library/form-fields/variants/checkbox/checkbox.njk
new file mode 100644
index 00000000000..7faf3d74afa
--- /dev/null
+++ b/src/component-library/form-fields/variants/checkbox/checkbox.njk
@@ -0,0 +1,8 @@
+<div class="cluster gutter-base flex-align-start">
+  <input
+    id="{{ data.id }}"
+    name="{{ data.name }}"
+    type="checkbox"
+  />
+  <label for="{{ data.id }}">{{ data.label }}</label>
+</div>
diff --git a/src/component-library/form-fields/variants/radio/radio.json b/src/component-library/form-fields/variants/radio/radio.json
new file mode 100644
index 00000000000..e52b9dd712d
--- /dev/null
+++ b/src/component-library/form-fields/variants/radio/radio.json
@@ -0,0 +1,18 @@
+{
+  "title": "Radio",
+  "context": {
+    "group": "myGroup",
+    "items": [
+      {
+        "id": "option1",
+        "label": "Option number 1",
+        "value": "1"
+      },
+      {
+        "id": "option2",
+        "label": "Option number 2",
+        "value": "2"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/form-fields/variants/radio/radio.njk b/src/component-library/form-fields/variants/radio/radio.njk
new file mode 100644
index 00000000000..955e087f58a
--- /dev/null
+++ b/src/component-library/form-fields/variants/radio/radio.njk
@@ -0,0 +1,15 @@
+<div class="flow">
+  {% for item in data.items %}
+  <label class="cluster gutter-base" for="{{ item.id }}">
+    <!--prettier-ignore-->
+    <input
+      type="radio"
+      id="{{ item.id }}"
+      name="{{ data.group }}"
+      value="{{ item.value }}"
+      {% if item.checked %}checked{% endif %}
+    />
+    <span>{{ item.label }}</span>
+  </label>
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/component-library/form-fields/variants/select/select.json b/src/component-library/form-fields/variants/select/select.json
new file mode 100644
index 00000000000..d12b9c0ebf3
--- /dev/null
+++ b/src/component-library/form-fields/variants/select/select.json
@@ -0,0 +1,1042 @@
+{
+  "title": "Select",
+  "context": {
+    "id": "country",
+    "label": "Country",
+    "name": "country",
+    "items": [
+      {
+        "value": "AF: Afghanistan",
+        "text": "Afghanistan (افغانستان)"
+      },
+      {
+        "value": "AX: Åland Islands",
+        "text": "Åland Islands (Åland)"
+      },
+      {
+        "value": "AL: Albania",
+        "text": "Albania (Shqipëria)"
+      },
+      {
+        "value": "DZ: Algeria",
+        "text": "Algeria (الجزائر)"
+      },
+      {
+        "value": "AS: American Samoa",
+        "text": "American Samoa"
+      },
+      {
+        "value": "AD: Andorra",
+        "text": "Andorra"
+      },
+      {
+        "value": "AO: Angola",
+        "text": "Angola"
+      },
+      {
+        "value": "AI: Anguilla",
+        "text": "Anguilla"
+      },
+      {
+        "value": "AQ: Antarctica",
+        "text": "Antarctica"
+      },
+      {
+        "value": "AG: Antigua and Barbuda",
+        "text": "Antigua and Barbuda"
+      },
+      {
+        "value": "AR: Argentina",
+        "text": "Argentina"
+      },
+      {
+        "value": "AM: Armenia",
+        "text": "Armenia (Հայաստանի Հանրապետութիւն)"
+      },
+      {
+        "value": "AW: Aruba",
+        "text": "Aruba"
+      },
+      {
+        "value": "AC: Ascension Island",
+        "text": "Ascension Island"
+      },
+      {
+        "value": "AU: Australia",
+        "text": "Australia"
+      },
+      {
+        "value": "AT: Austria",
+        "text": "Austria (Österreich)"
+      },
+      {
+        "value": "AZ: Azerbaijan",
+        "text": "Azerbaijan (Azərbaycan)"
+      },
+      {
+        "value": "BS: Bahamas",
+        "text": "Bahamas"
+      },
+      {
+        "value": "BH: Bahrain",
+        "text": "Bahrain (البحرين)"
+      },
+      {
+        "value": "BD: Bangladesh",
+        "text": "Bangladesh (বাংলাদেশ)"
+      },
+      {
+        "value": "BB: Barbados",
+        "text": "Barbados"
+      },
+      {
+        "value": "BY: Belarus",
+        "text": "Belarus (Беларусь)"
+      },
+      {
+        "value": "BE: Belgium",
+        "text": "Belgium (België)"
+      },
+      {
+        "value": "BZ: Belize",
+        "text": "Belize"
+      },
+      {
+        "value": "BJ: Benin",
+        "text": "Benin (Bénin)"
+      },
+      {
+        "value": "BM: Bermuda",
+        "text": "Bermuda"
+      },
+      {
+        "value": "BT: Bhutan",
+        "text": "Bhutan (भूटान)"
+      },
+      {
+        "value": "BO: Bolivia",
+        "text": "Bolivia"
+      },
+      {
+        "value": "BA: Bosnia and Herzegovina",
+        "text": "\n    Bosnia and Herzegovina (Bosna i Hercegovina)\n  "
+      },
+      {
+        "value": "BW: Botswana",
+        "text": "Botswana"
+      },
+      {
+        "value": "BV: Bouvet Island",
+        "text": "Bouvet Island"
+      },
+      {
+        "value": "BR: Brazil",
+        "text": "Brazil (Brasil)"
+      },
+      {
+        "value": "IO: British Indian Ocean Territory",
+        "text": "\n    British Indian Ocean Territory\n  "
+      },
+      {
+        "value": "VG: British Virgin Islands",
+        "text": "British Virgin Islands"
+      },
+      {
+        "value": "BN: Brunei",
+        "text": "Brunei"
+      },
+      {
+        "value": "BG: Bulgaria",
+        "text": "Bulgaria (България)"
+      },
+      {
+        "value": "BF: Burkina Faso",
+        "text": "Burkina Faso"
+      },
+      {
+        "value": "BI: Burundi",
+        "text": "Burundi"
+      },
+      {
+        "value": "KH: Cambodia",
+        "text": "Cambodia (កម្ពុជា)"
+      },
+      {
+        "value": "CM: Cameroon",
+        "text": "Cameroon (Cameroun)"
+      },
+      {
+        "value": "CA: Canada",
+        "text": "Canada"
+      },
+      {
+        "value": "IC: Canary Islands",
+        "text": "Canary Islands"
+      },
+      {
+        "value": "CV: Cape Verde",
+        "text": "Cape Verde (Cabo Verde)"
+      },
+      {
+        "value": "BQ: Caribbean Netherlands",
+        "text": "Caribbean Netherlands"
+      },
+      {
+        "value": "KY: Cayman Islands",
+        "text": "Cayman Islands"
+      },
+      {
+        "value": "CF: Central African Republic",
+        "text": "\n    Central African Republic (République centrafricaine)\n  "
+      },
+      {
+        "value": "EA: Ceuta and Melilla",
+        "text": "Ceuta and Melilla"
+      },
+      {
+        "value": "TD: Chad",
+        "text": "Chad (تشاد)"
+      },
+      {
+        "value": "CL: Chile",
+        "text": "Chile"
+      },
+      {
+        "value": "CN: China",
+        "text": "China (中国)"
+      },
+      {
+        "value": "CX: Christmas Island",
+        "text": "Christmas Island"
+      },
+      {
+        "value": "CP: Clipperton Island",
+        "text": "Clipperton Island"
+      },
+      {
+        "value": "CC: Cocos (Keeling) Islands",
+        "text": "Cocos (Keeling) Islands"
+      },
+      {
+        "value": "CO: Colombia",
+        "text": "Colombia"
+      },
+      {
+        "value": "KM: Comoros",
+        "text": "Comoros (جزر القمر)"
+      },
+      {
+        "value": "CD: Congo",
+        "text": "\n    Congo (DRC) (République démocratique du Congo)\n  "
+      },
+      {
+        "value": "CG: Congo",
+        "text": "Congo"
+      },
+      {
+        "value": "CK: Cook Islands",
+        "text": "Cook Islands"
+      },
+      {
+        "value": "CR: Costa Rica",
+        "text": "Costa Rica"
+      },
+      {
+        "value": "HR: Croatia",
+        "text": "Croatia (Hrvatska)"
+      },
+      {
+        "value": "CU: Cuba",
+        "text": "Cuba"
+      },
+      {
+        "value": "CW: Curaçao",
+        "text": "Curaçao"
+      },
+      {
+        "value": "CY: Cyprus",
+        "text": "Cyprus (Κύπρος)"
+      },
+      {
+        "value": "CZ: Czechia",
+        "text": "Czechia (Česko)"
+      },
+      {
+        "value": "CI: Côte d’Ivoire",
+        "text": "Côte d’Ivoire"
+      },
+      {
+        "value": "DK: Denmark",
+        "text": "Denmark (Danmark)"
+      },
+      {
+        "value": "DG: Diego Garcia",
+        "text": "Diego Garcia"
+      },
+      {
+        "value": "DJ: Djibouti",
+        "text": "Djibouti (Jabuuti)"
+      },
+      {
+        "value": "DM: Dominica",
+        "text": "Dominica"
+      },
+      {
+        "value": "DO: Dominican Republic",
+        "text": "\n    Dominican Republic (República Dominicana)\n  "
+      },
+      {
+        "value": "EC: Ecuador",
+        "text": "Ecuador"
+      },
+      {
+        "value": "EG: Egypt",
+        "text": "Egypt (مصر)"
+      },
+      {
+        "value": "SV: El Salvador",
+        "text": "El Salvador"
+      },
+      {
+        "value": "GQ: Equatorial Guinea",
+        "text": "\n    Equatorial Guinea (Guinée équatoriale)\n  "
+      },
+      {
+        "value": "ER: Eritrea",
+        "text": "Eritrea (ኤርትራ, اريتريا)"
+      },
+      {
+        "value": "EE: Estonia",
+        "text": "Estonia (Eesti)"
+      },
+      {
+        "value": "ET: Ethiopia",
+        "text": "Ethiopia (ኢትዮጵያ)"
+      },
+      {
+        "value": "FK: Falkland Islands",
+        "text": "Falkland Islands"
+      },
+      {
+        "value": "FO: Faroe Islands",
+        "text": "Faroe Islands (Føroyar)"
+      },
+      {
+        "value": "FJ: Fiji",
+        "text": "Fiji (फिजी)"
+      },
+      {
+        "value": "FI: Finland",
+        "text": "Finland (Suomi)"
+      },
+      {
+        "value": "FR: France",
+        "text": "France"
+      },
+      {
+        "value": "GF: French Guiana",
+        "text": "French Guiana (Guyane française)"
+      },
+      {
+        "value": "PF: French Polynesia",
+        "text": "\n    French Polynesia (Polynésie française)\n  "
+      },
+      {
+        "value": "TF: French Southern Territories",
+        "text": "\n    French Southern Territories\n  "
+      },
+      {
+        "value": "GA: Gabon",
+        "text": "Gabon"
+      },
+      {
+        "value": "GM: Gambia",
+        "text": "Gambia"
+      },
+      {
+        "value": "GE: Georgia",
+        "text": "Georgia (საქართველო)"
+      },
+      {
+        "value": "DE: Germany",
+        "text": "Germany (Deutschland)"
+      },
+      {
+        "value": "GH: Ghana",
+        "text": "Ghana"
+      },
+      {
+        "value": "GI: Gibraltar",
+        "text": "Gibraltar"
+      },
+      {
+        "value": "GR: Greece",
+        "text": "Greece (Ελλάδα)"
+      },
+      {
+        "value": "GL: Greenland",
+        "text": "Greenland (Kalaallit Nunaat)"
+      },
+      {
+        "value": "GD: Grenada",
+        "text": "Grenada"
+      },
+      {
+        "value": "GP: Guadeloupe",
+        "text": "Guadeloupe"
+      },
+      {
+        "value": "GU: Guam",
+        "text": "Guam"
+      },
+      {
+        "value": "GT: Guatemala",
+        "text": "Guatemala"
+      },
+      {
+        "value": "GG: Guernsey",
+        "text": "Guernsey"
+      },
+      {
+        "value": "GN: Guinea",
+        "text": "Guinea (Guinée)"
+      },
+      {
+        "value": "GW: Guinea-Bissau",
+        "text": "Guinea-Bissau (Guiné Bissau)"
+      },
+      {
+        "value": "GY: Guyana",
+        "text": "Guyana"
+      },
+      {
+        "value": "HT: Haiti",
+        "text": "Haiti (Haïti)"
+      },
+      {
+        "value": "HM: Heard & McDonald Islands",
+        "text": "\n    Heard & McDonald Islands\n  "
+      },
+      {
+        "value": "HN: Honduras",
+        "text": "Honduras"
+      },
+      {
+        "value": "HK: Hong Kong",
+        "text": "Hong Kong (香港)"
+      },
+      {
+        "value": "HU: Hungary",
+        "text": "Hungary (Magyarország)"
+      },
+      {
+        "value": "IS: Iceland",
+        "text": "Iceland (Ísland)"
+      },
+      {
+        "value": "IN: India",
+        "text": "India (भारत)"
+      },
+      {
+        "value": "ID: Indonesia",
+        "text": "Indonesia"
+      },
+      {
+        "value": "IR: Iran",
+        "text": "Iran (ایران)"
+      },
+      {
+        "value": "IQ: Iraq",
+        "text": "Iraq (العراق)"
+      },
+      {
+        "value": "IE: Ireland",
+        "text": "Ireland"
+      },
+      {
+        "value": "IM: Isle of Man",
+        "text": "Isle of Man"
+      },
+      {
+        "value": "IL: Israel",
+        "text": "Israel (ישראל)"
+      },
+      {
+        "value": "IT: Italy",
+        "text": "Italy (Italia)"
+      },
+      {
+        "value": "JM: Jamaica",
+        "text": "Jamaica"
+      },
+      {
+        "value": "JP: Japan",
+        "text": "Japan (日本)"
+      },
+      {
+        "value": "JE: Jersey",
+        "text": "Jersey"
+      },
+      {
+        "value": "JO: Jordan",
+        "text": "Jordan (الأردن)"
+      },
+      {
+        "value": "KZ: Kazakhstan",
+        "text": "Kazakhstan (Казахстан)"
+      },
+      {
+        "value": "KE: Kenya",
+        "text": "Kenya"
+      },
+      {
+        "value": "KI: Kiribati",
+        "text": "Kiribati"
+      },
+      {
+        "value": "XK: Kosovo",
+        "text": "Kosovo"
+      },
+      {
+        "value": "KW: Kuwait",
+        "text": "Kuwait (الكويت)"
+      },
+      {
+        "value": "KG: Kyrgyzstan",
+        "text": "Kyrgyzstan (Кыргызстан)"
+      },
+      {
+        "value": "LA: Laos",
+        "text": "Laos (ลาว)"
+      },
+      {
+        "value": "LV: Latvia",
+        "text": "Latvia (Latvija)"
+      },
+      {
+        "value": "LB: Lebanon",
+        "text": "Lebanon (لبنان)"
+      },
+      {
+        "value": "LS: Lesotho",
+        "text": "Lesotho"
+      },
+      {
+        "value": "LR: Liberia",
+        "text": "Liberia"
+      },
+      {
+        "value": "LY: Libya",
+        "text": "Libya (ليبيا)"
+      },
+      {
+        "value": "LI: Liechtenstein",
+        "text": "Liechtenstein"
+      },
+      {
+        "value": "LT: Lithuania",
+        "text": "Lithuania (Lietuva)"
+      },
+      {
+        "value": "LU: Luxembourg",
+        "text": "Luxembourg"
+      },
+      {
+        "value": "MO: Macau",
+        "text": "Macau (澳门)"
+      },
+      {
+        "value": "MK: Macedonia",
+        "text": "Macedonia (FYROM) (Македонија)"
+      },
+      {
+        "value": "MG: Madagascar",
+        "text": "Madagascar"
+      },
+      {
+        "value": "MW: Malawi",
+        "text": "Malawi"
+      },
+      {
+        "value": "MY: Malaysia",
+        "text": "Malaysia"
+      },
+      {
+        "value": "MV: Maldives",
+        "text": "Maldives"
+      },
+      {
+        "value": "ML: Mali",
+        "text": "Mali (مالي)"
+      },
+      {
+        "value": "MT: Malta",
+        "text": "Malta"
+      },
+      {
+        "value": "MH: Marshall Islands",
+        "text": "Marshall Islands"
+      },
+      {
+        "value": "MQ: Martinique",
+        "text": "Martinique"
+      },
+      {
+        "value": "MR: Mauritania",
+        "text": "Mauritania (موريتانيا)"
+      },
+      {
+        "value": "MU: Mauritius",
+        "text": "Mauritius"
+      },
+      {
+        "value": "YT: Mayotte",
+        "text": "Mayotte"
+      },
+      {
+        "value": "MX: Mexico",
+        "text": "Mexico (México)"
+      },
+      {
+        "value": "FM: Micronesia",
+        "text": "Micronesia"
+      },
+      {
+        "value": "MD: Moldova",
+        "text": "Moldova"
+      },
+      {
+        "value": "MC: Monaco",
+        "text": "Monaco"
+      },
+      {
+        "value": "MN: Mongolia",
+        "text": "Mongolia (Монгол улс)"
+      },
+      {
+        "value": "ME: Montenegro",
+        "text": "Montenegro (Црна Гора)"
+      },
+      {
+        "value": "MS: Montserrat",
+        "text": "Montserrat"
+      },
+      {
+        "value": "MA: Morocco",
+        "text": "Morocco (المغرب)"
+      },
+      {
+        "value": "MZ: Mozambique",
+        "text": "Mozambique (Moçambique)"
+      },
+      {
+        "value": "MM: Myanmar",
+        "text": "Myanmar (Burma)"
+      },
+      {
+        "value": "NA: Namibia",
+        "text": "Namibia"
+      },
+      {
+        "value": "NR: Nauru",
+        "text": "Nauru"
+      },
+      {
+        "value": "NP: Nepal",
+        "text": "Nepal (नेपाल)"
+      },
+      {
+        "value": "NL: Netherlands",
+        "text": "Netherlands (Nederland)"
+      },
+      {
+        "value": "AN: Netherlands Antilles",
+        "text": "\n    Netherlands Antilles (Nederlandse Antillen)\n  "
+      },
+      {
+        "value": "NC: New Caledonia",
+        "text": "New Caledonia (Nouvelle-Calédonie)"
+      },
+      {
+        "value": "NZ: New Zealand",
+        "text": "New Zealand"
+      },
+      {
+        "value": "NI: Nicaragua",
+        "text": "Nicaragua"
+      },
+      {
+        "value": "NE: Niger",
+        "text": "Niger"
+      },
+      {
+        "value": "NG: Nigeria",
+        "text": "Nigeria"
+      },
+      {
+        "value": "NU: Niue",
+        "text": "Niue"
+      },
+      {
+        "value": "NF: Norfolk Island",
+        "text": "Norfolk Island"
+      },
+      {
+        "value": "KP: North Korea",
+        "text": "\n    North Korea (조선 민주주의 인민 공화국)\n  "
+      },
+      {
+        "value": "MP: Northern Mariana Islands",
+        "text": "Northern Mariana Islands"
+      },
+      {
+        "value": "NO: Norway",
+        "text": "Norway (Norge)"
+      },
+      {
+        "value": "OM: Oman",
+        "text": "Oman (عمان)"
+      },
+      {
+        "value": "QO: Outlying Oceania",
+        "text": "Outlying Oceania"
+      },
+      {
+        "value": "PK: Pakistan",
+        "text": "Pakistan (پاکستان)"
+      },
+      {
+        "value": "PW: Palau",
+        "text": "Palau"
+      },
+      {
+        "value": "PS: Palestine",
+        "text": "Palestine (فلسطين)"
+      },
+      {
+        "value": "PA: Panama",
+        "text": "Panama (Panamá)"
+      },
+      {
+        "value": "PG: Papua New Guinea",
+        "text": "Papua New Guinea"
+      },
+      {
+        "value": "PY: Paraguay",
+        "text": "Paraguay"
+      },
+      {
+        "value": "PE: Peru",
+        "text": "Peru (Perú)"
+      },
+      {
+        "value": "PH: Philippines",
+        "text": "Philippines"
+      },
+      {
+        "value": "PN: Pitcairn Islands",
+        "text": "Pitcairn Islands"
+      },
+      {
+        "value": "PL: Poland",
+        "text": "Poland (Polska)"
+      },
+      {
+        "value": "PT: Portugal",
+        "text": "Portugal"
+      },
+      {
+        "value": "PR: Puerto Rico",
+        "text": "Puerto Rico"
+      },
+      {
+        "value": "QA: Qatar",
+        "text": "Qatar (قطر)"
+      },
+      {
+        "value": "RO: Romania",
+        "text": "Romania (România)"
+      },
+      {
+        "value": "RU: Russia",
+        "text": "Russia (Россия)"
+      },
+      {
+        "value": "RW: Rwanda",
+        "text": "Rwanda"
+      },
+      {
+        "value": "RE: Réunion",
+        "text": "Réunion"
+      },
+      {
+        "value": "BL: Saint Barthélemy",
+        "text": "Saint Barthélemy"
+      },
+      {
+        "value": "SH: Saint Helena",
+        "text": "Saint Helena"
+      },
+      {
+        "value": "KN: Saint Kitts and Nevis",
+        "text": "Saint Kitts and Nevis"
+      },
+      {
+        "value": "LC: Saint Lucia",
+        "text": "Saint Lucia"
+      },
+      {
+        "value": "MF: Saint Martin",
+        "text": "Saint Martin"
+      },
+      {
+        "value": "PM: Saint Pierre and Miquelon",
+        "text": "\n    Saint Pierre and Miquelon\n  "
+      },
+      {
+        "value": "WS: Samoa",
+        "text": "Samoa"
+      },
+      {
+        "value": "SM: San Marino",
+        "text": "San Marino"
+      },
+      {
+        "value": "SA: Saudi Arabia",
+        "text": "\n    Saudi Arabia (المملكة العربية السعودية)\n  "
+      },
+      {
+        "value": "SN: Senegal",
+        "text": "Senegal (Sénégal)"
+      },
+      {
+        "value": "RS: Serbia",
+        "text": "Serbia (Србија)"
+      },
+      {
+        "value": "SC: Seychelles",
+        "text": "Seychelles"
+      },
+      {
+        "value": "SL: Sierra Leone",
+        "text": "Sierra Leone"
+      },
+      {
+        "value": "SG: Singapore",
+        "text": "Singapore (新加坡)"
+      },
+      {
+        "value": "SX: Sint Maarten",
+        "text": "Sint Maarten"
+      },
+      {
+        "value": "SK: Slovakia",
+        "text": "Slovakia (Slovenská republika)"
+      },
+      {
+        "value": "SI: Slovenia",
+        "text": "Slovenia (Slovenija)"
+      },
+      {
+        "value": "SB: Solomon Islands",
+        "text": "Solomon Islands"
+      },
+      {
+        "value": "SO: Somalia",
+        "text": "Somalia (Somali)"
+      },
+      {
+        "value": "ZA: South Africa",
+        "text": "South Africa"
+      },
+      {
+        "value": "GS: South Georgia & South Sandwich Islands",
+        "text": "\n    South Georgia & South Sandwich Islands\n  "
+      },
+      {
+        "value": "KR: South Korea",
+        "text": "South Korea (대한민국)"
+      },
+      {
+        "value": "SS: South Sudan",
+        "text": "South Sudan"
+      },
+      {
+        "value": "ES: Spain",
+        "text": "Spain (España)"
+      },
+      {
+        "value": "LK: Sri Lanka",
+        "text": "Sri Lanka (இலங்கை)"
+      },
+      {
+        "value": "VC: St. Vincent & Grenadines",
+        "text": "\n    St. Vincent & Grenadines\n  "
+      },
+      {
+        "value": "SD: Sudan",
+        "text": "Sudan (السودان)"
+      },
+      {
+        "value": "SR: Suriname",
+        "text": "Suriname"
+      },
+      {
+        "value": "SJ: Svalbard and Jan Mayen",
+        "text": "Svalbard and Jan Mayen"
+      },
+      {
+        "value": "SZ: Swaziland",
+        "text": "Swaziland"
+      },
+      {
+        "value": "SE: Sweden",
+        "text": "Sweden (Sverige)"
+      },
+      {
+        "value": "CH: Switzerland",
+        "text": "\n    Switzerland (Schweiz, Suisse, Svizzera)\n  "
+      },
+      {
+        "value": "SY: Syria",
+        "text": "Syria (سوريا)"
+      },
+      {
+        "value": "ST: São Tomé and Príncipe",
+        "text": "São Tomé and Príncipe"
+      },
+      {
+        "value": "TW: Taiwan",
+        "text": "Taiwan (台湾)"
+      },
+      {
+        "value": "TJ: Tajikistan",
+        "text": "Tajikistan (تاجیکستان)"
+      },
+      {
+        "value": "TZ: Tanzania",
+        "text": "Tanzania"
+      },
+      {
+        "value": "TH: Thailand",
+        "text": "Thailand (ประเทศไทย)"
+      },
+      {
+        "value": "TL: Timor-Leste",
+        "text": "Timor-Leste"
+      },
+      {
+        "value": "TG: Togo",
+        "text": "Togo"
+      },
+      {
+        "value": "TK: Tokelau",
+        "text": "Tokelau"
+      },
+      {
+        "value": "TO: Tonga",
+        "text": "Tonga"
+      },
+      {
+        "value": "TT: Trinidad and Tobago",
+        "text": "Trinidad and Tobago"
+      },
+      {
+        "value": "TA: Tristan da Cunha",
+        "text": "Tristan da Cunha"
+      },
+      {
+        "value": "TN: Tunisia",
+        "text": "Tunisia (تونس)"
+      },
+      {
+        "value": "TR: Turkey",
+        "text": "Turkey (Türkiye)"
+      },
+      {
+        "value": "TM: Turkmenistan",
+        "text": "Turkmenistan (Туркменистан)"
+      },
+      {
+        "value": "TC: Turks and Caicos Islands",
+        "text": "Turks and Caicos Islands"
+      },
+      {
+        "value": "TV: Tuvalu",
+        "text": "Tuvalu"
+      },
+      {
+        "value": "UM: U.S. Outlying Islands",
+        "text": "\n    U.S. Outlying Islands (United States Minor Outlying Islands)\n  "
+      },
+      {
+        "value": "VI: U.S. Virgin Islands",
+        "text": "U.S. Virgin Islands"
+      },
+      {
+        "value": "UG: Uganda",
+        "text": "Uganda"
+      },
+      {
+        "value": "UA: Ukraine",
+        "text": "Ukraine (Україна)"
+      },
+      {
+        "value": "AE: United Arab Emirates",
+        "text": "\n    United Arab Emirates (الامارات العربية المتحدة)\n  "
+      },
+      {
+        "value": "GB: United Kingdom",
+        "text": "United Kingdom"
+      },
+      {
+        "value": "US: United States",
+        "text": "United States"
+      },
+      {
+        "value": "UY: Uruguay",
+        "text": "Uruguay"
+      },
+      {
+        "value": "UZ: Uzbekistan",
+        "text": "Uzbekistan (Ўзбекистон)"
+      },
+      {
+        "value": "VU: Vanuatu",
+        "text": "Vanuatu"
+      },
+      {
+        "value": "VA: Vatican City",
+        "text": "Vatican City (Vaticano)"
+      },
+      {
+        "value": "VE: Venezuela",
+        "text": "Venezuela"
+      },
+      {
+        "value": "VN: Vietnam",
+        "text": "Vietnam (Việt Nam)"
+      },
+      {
+        "value": "WF: Wallis and Futuna",
+        "text": "Wallis and Futuna"
+      },
+      {
+        "value": "EH: Western Sahara",
+        "text": "Western Sahara (الصحراء الغربية)"
+      },
+      {
+        "value": "YE: Yemen",
+        "text": "Yemen (اليمن)"
+      },
+      {
+        "value": "ZM: Zambia",
+        "text": "Zambia"
+      },
+      {
+        "value": "ZW: Zimbabwe",
+        "text": "Zimbabwe"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/form-fields/variants/select/select.njk b/src/component-library/form-fields/variants/select/select.njk
new file mode 100644
index 00000000000..fcf25d341a0
--- /dev/null
+++ b/src/component-library/form-fields/variants/select/select.njk
@@ -0,0 +1,10 @@
+<label for="{{ data.id }}" class="visually-hidden">{{ data.label }}</label>
+<select
+  id="{{ data.id }}"
+  name="{{ data.name }}"
+  required=""
+>
+  {% for item in data.items %}
+  <option value="{{ item.value }}">{{ item.text }}</option>
+  {% endfor %}
+</select>
diff --git a/src/component-library/form-fields/variants/textarea/textarea.json b/src/component-library/form-fields/variants/textarea/textarea.json
new file mode 100644
index 00000000000..75522a4a241
--- /dev/null
+++ b/src/component-library/form-fields/variants/textarea/textarea.json
@@ -0,0 +1,8 @@
+{
+  "title": "Textarea",
+  "context": {
+    "id": "myInput",
+    "label": "Message",
+    "name": "myInput"
+  }
+}
diff --git a/src/component-library/form-fields/variants/textarea/textarea.njk b/src/component-library/form-fields/variants/textarea/textarea.njk
new file mode 100644
index 00000000000..1eb7ccda5ae
--- /dev/null
+++ b/src/component-library/form-fields/variants/textarea/textarea.njk
@@ -0,0 +1,6 @@
+<textarea
+  id="{{ data.id }}"
+  name="{{ data.name }}"
+  type="{{ data.type }}"
+  required
+  placeholder="Useful placeholder text"></textarea>
diff --git a/src/component-library/headline/headline.json b/src/component-library/headline/headline.json
new file mode 100644
index 00000000000..bfb52156bc6
--- /dev/null
+++ b/src/component-library/headline/headline.json
@@ -0,0 +1,27 @@
+{
+  "title": "Headline",
+  "context": {
+    "title": "Tempus natoque facilisi habitant ante elementum platea sed",
+    "summary": "Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad libero mattis mi risus tempor integer sapien velit fames"
+  },
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_headline.scss"
+    }
+  ],
+  "variants": [
+    {
+      "name": "with-action",
+      "title": "With Action",
+      "context": {
+        "title": "Tempus natoque facilisi habitant ante elementum platea sed",
+        "summary": "Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad libero mattis mi risus tempor integer sapien velit fames",
+        "action": {
+          "url": "#",
+          "text": "See all"
+        }
+      }
+    }
+  ]
+}
diff --git a/src/component-library/headline/headline.md b/src/component-library/headline/headline.md
new file mode 100644
index 00000000000..d35ef1059b6
--- /dev/null
+++ b/src/component-library/headline/headline.md
@@ -0,0 +1 @@
+A simple pattern for create a centered, heading, summary and action group.
diff --git a/src/component-library/headline/headline.njk b/src/component-library/headline/headline.njk
new file mode 100644
index 00000000000..cd89dc52d09
--- /dev/null
+++ b/src/component-library/headline/headline.njk
@@ -0,0 +1,9 @@
+<div class="headline all-center flow">
+  <h2 class="headline__title">{{ data.title }}</h2>
+  <p>{{ data.summary }}</p>
+  {% if data.action %}
+    <div class="headline__action">
+      <a href="{{ data.action.url }}">{{ data.action.text }}</a>
+    </div>
+  {% endif %}
+</div>
diff --git a/src/component-library/hero-image/hero-image.json b/src/component-library/hero-image/hero-image.json
new file mode 100644
index 00000000000..108205afd71
--- /dev/null
+++ b/src/component-library/hero-image/hero-image.json
@@ -0,0 +1,11 @@
+{
+  "title": "Hero Image",
+  "extraSampleCSS": "body { padding: 0; }",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_hero-image.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/hero-image/hero-image.md b/src/component-library/hero-image/hero-image.md
new file mode 100644
index 00000000000..b0a9c548748
--- /dev/null
+++ b/src/component-library/hero-image/hero-image.md
@@ -0,0 +1,2 @@
+A handy class to apply to page-leading images that should fill the viewport,
+horizontally, up to a maximum width of approximately 1600px.
diff --git a/src/component-library/hero-image/hero-image.njk b/src/component-library/hero-image/hero-image.njk
new file mode 100644
index 00000000000..329758788ca
--- /dev/null
+++ b/src/component-library/hero-image/hero-image.njk
@@ -0,0 +1 @@
+<img class="hero-image" alt="A person looking into a scope, symbolizing monitoring and observation via the Reporting API."  decoding="auto" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format" srcset="https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=200 200w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=228 228w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=260 260w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=296 296w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=338 338w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=385 385w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=439 439w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=500 500w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=571 571w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=650 650w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=741 741w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=845 845w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=964 964w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1098 1098w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1252 1252w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1428 1428w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1600 1600w" width="1600">
diff --git a/src/component-library/hero/hero.json b/src/component-library/hero/hero.json
new file mode 100644
index 00000000000..a774b455326
--- /dev/null
+++ b/src/component-library/hero/hero.json
@@ -0,0 +1,35 @@
+{
+  "title": "Hero",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_hero.scss"
+    }
+  ],
+  "context": {
+    "eyebrow": "About web.dev",
+    "title": "Guides and tools for the modern web",
+    "summary": "Whether you already have a website or you're just getting started, learn to build for the modern web at web.dev.\n",
+    "buttonText": "Learn more",
+    "buttonUrl": "/about/",
+    "image": "https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg",
+    "imageWidth": "330",
+    "imageHeight": "210",
+    "featureCards": [
+      {
+        "theme": "dark",
+        "title": "Making their web app installable resulted in increased traffic",
+        "eyebrow": "Web vitals",
+        "url": "#",
+        "background": "/images/feature-cards/web-vitals-feature.png"
+      },
+      {
+        "theme": "light",
+        "title": "Designing in the browser using Dev Tools for design",
+        "eyebrow": "Show",
+        "url": "#",
+        "background": "/images/feature-cards/design-in-the-browser.jpg"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/hero/hero.md b/src/component-library/hero/hero.md
new file mode 100644
index 00000000000..90b775b4764
--- /dev/null
+++ b/src/component-library/hero/hero.md
@@ -0,0 +1 @@
+Compositional blocks that allow you to lay out groups of promotional content.
diff --git a/src/component-library/hero/hero.njk b/src/component-library/hero/hero.njk
new file mode 100644
index 00000000000..821be85cdc7
--- /dev/null
+++ b/src/component-library/hero/hero.njk
@@ -0,0 +1,24 @@
+<header class="hero">
+  <div class="wrapper">
+    <div class="hero__columns switcher">
+      <div>
+        <span aria-hidden="true" class="hero__eyebrow">{{ data.eyebrow }}</span>
+        <div class="hero__content flow">
+          <img src="{{ data.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ data.imageWidth }}" height="{{ data.imageHeight }}" />
+          <h1 class="hero__title">{{ data.title }}</h1>
+          {{ data.summary | md | safe }}
+          <a class="button" data-type="primary" href="{{ data.buttonUrl }}">{{ data.buttonText }}</a>
+        </div>
+      </div>
+      <div class="flow">
+        {% for item in data.featureCards %}
+        <a class="feature-card" href="{{ item.url }}" data-theme="{{ item.theme }}">
+          <span class="feature-card__eyebrow">{{ item.eyebrow }}</span>
+          <h3 class="{{ 'visually-hidden' if item.hiddenTitle else 'feature-card__title' }}">{{ item.title }}</h3>
+          <img class="feature-card__background" alt="" aria-hidden="true" src="{{ item.background }}" />
+        </a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/src/component-library/hero/variants/promo-panel/promo-panel.json b/src/component-library/hero/variants/promo-panel/promo-panel.json
new file mode 100644
index 00000000000..7e983232838
--- /dev/null
+++ b/src/component-library/hero/variants/promo-panel/promo-panel.json
@@ -0,0 +1,15 @@
+{
+  "title": "Promo Panel",
+  "context": {
+    "eyebrow": "Event",
+    "title": "Chrome Dev Summit 2021",
+    "summary": "Join the Chrome team for our two-day summit on the latest techniques for building the modern Web.\n",
+    "image": "https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/k25FHfpYLo9LQLvYT413.png",
+    "imageWidth": "800",
+    "imageHeight": "728",
+    "primaryButtonText": "Request an invite",
+    "primaryButtonUrl": "#",
+    "secondaryButtonText": "Add to calendar",
+    "secondaryButtonUrl": "#"
+  }
+}
diff --git a/src/component-library/hero/variants/promo-panel/promo-panel.njk b/src/component-library/hero/variants/promo-panel/promo-panel.njk
new file mode 100644
index 00000000000..a78d2a72742
--- /dev/null
+++ b/src/component-library/hero/variants/promo-panel/promo-panel.njk
@@ -0,0 +1,20 @@
+<section class="hero" data-type="promo">
+  <div class="wrapper">
+    <div class="hero__columns switcher">
+      <div>
+        <span aria-hidden="true" class="hero__eyebrow">{{ data.eyebrow }}</span>
+        <div class="hero__content flow">
+          <h1 class="hero__title">{{ data.title }}</h1>
+          {{ data.summary | md | safe }}
+          <div class="cluster gutter-base flow-space-size-2">
+            <a class="button" data-type="primary" href="{{ data.primaryButtonUrl }}">{{ data.primaryButtonText }}</a>
+            <a class="button" data-type="secondary" href="{{ data.secondaryButtonUrl }}">{{ data.secondaryButtonText }}</a>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img src="{{ data.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ data.imageWidth }}" height="{{ data.imageHeight }}" />
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/component-library/icon-button/icon-button.json b/src/component-library/icon-button/icon-button.json
new file mode 100644
index 00000000000..683d66d0a0b
--- /dev/null
+++ b/src/component-library/icon-button/icon-button.json
@@ -0,0 +1,22 @@
+{
+  "title": "Icon Button",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_icon-button.scss"
+    }
+  ],
+  "context": {
+    "label": "Close"
+  },
+  "variants": [
+    {
+      "name": "with-tooltip",
+      "title": "With Tooltip",
+      "extraSampleCSS": "body { display: grid; place-items: center; }",
+      "context": {
+        "tooltip": "Close"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/icon-button/icon-button.md b/src/component-library/icon-button/icon-button.md
new file mode 100644
index 00000000000..cbc4c8cddac
--- /dev/null
+++ b/src/component-library/icon-button/icon-button.md
@@ -0,0 +1,2 @@
+You have two choices when using this pattern. Use it in connection with the [tooltip](/design-system/component/tooltip)
+or set an `aria-label` on the `<button class="icon-button">` element.
diff --git a/src/component-library/icon-button/icon-button.njk b/src/component-library/icon-button/icon-button.njk
new file mode 100644
index 00000000000..90e64ed6e14
--- /dev/null
+++ b/src/component-library/icon-button/icon-button.njk
@@ -0,0 +1,11 @@
+{% if data.tooltip %}
+<button class="icon-button tooltip" aria-labelledby="icon-button-toolip">
+  {% include "icons/close.svg" %}
+  <span class="tooltip__content" id="icon-button-toolip">{{ data.tooltip }}</span>
+</button>
+{% else %}
+
+<button class="icon-button" aria-label="{{ data.label }}">
+  {% include "icons/close.svg" %}
+</button>
+{% endif %}
diff --git a/src/component-library/indicator/indicator.json b/src/component-library/indicator/indicator.json
new file mode 100644
index 00000000000..52a88745b2d
--- /dev/null
+++ b/src/component-library/indicator/indicator.json
@@ -0,0 +1,29 @@
+{
+  "title": "Indicator",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_indicator.scss"
+    }
+  ],
+  "context": {
+    "count": "99",
+    "utilities": "bg-state-info-bg color-state-info-text"
+  },
+  "variants": [
+    {
+      "name": "success",
+      "title": "Success state",
+      "context": {
+        "utilities": "bg-state-good-bg color-state-good-text"
+      }
+    },
+    {
+      "name": "error",
+      "title": "Error state",
+      "context": {
+        "utilities": "bg-state-bad-bg color-state-bad-text"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/indicator/indicator.md b/src/component-library/indicator/indicator.md
new file mode 100644
index 00000000000..6511176210f
--- /dev/null
+++ b/src/component-library/indicator/indicator.md
@@ -0,0 +1,4 @@
+Use the indicator to present a count to a user, such as in the [browser
+compatibility table](/design-system/pattern/browser-compat/). The sample uses a
+`<span>`, but try to use an HTML element that semantically supports a count,
+**in context**.
diff --git a/src/component-library/indicator/indicator.njk b/src/component-library/indicator/indicator.njk
new file mode 100644
index 00000000000..30bf65a8772
--- /dev/null
+++ b/src/component-library/indicator/indicator.njk
@@ -0,0 +1 @@
+<span class="indicator {{ data.utilities }}">{{ data.count }}</span>
\ No newline at end of file
diff --git a/src/component-library/labels/labels.json b/src/component-library/labels/labels.json
new file mode 100644
index 00000000000..afa5a430b45
--- /dev/null
+++ b/src/component-library/labels/labels.json
@@ -0,0 +1,5 @@
+{
+  "title": "Labels",
+  "summary": "Add a `.label` class to an element and it’ll reduce its contrast and spacing.",
+  "context": {}
+}
diff --git a/src/component-library/labels/labels.md b/src/component-library/labels/labels.md
new file mode 100644
index 00000000000..79016d7e65c
--- /dev/null
+++ b/src/component-library/labels/labels.md
@@ -0,0 +1,3 @@
+Labels can be used to display a filename associated with a [code](/handbook/markup-code) snippet. They are designed to work with the
+[flow utility](/design-system/css-utilities/#flow) and control spacing using
+the `--flow-space` custom property.
diff --git a/src/component-library/labels/labels.njk b/src/component-library/labels/labels.njk
new file mode 100644
index 00000000000..5d05db6fc79
--- /dev/null
+++ b/src/component-library/labels/labels.njk
@@ -0,0 +1,4 @@
+<div class="flow">
+  <p class="label">filename.js:</p>
+  <pre><code>console.log('hello');</code></pre>
+</div>
\ No newline at end of file
diff --git a/src/component-library/lists/lists.json b/src/component-library/lists/lists.json
new file mode 100644
index 00000000000..b8c2be7b867
--- /dev/null
+++ b/src/component-library/lists/lists.json
@@ -0,0 +1,11 @@
+{
+  "title": "Lists",
+  "summary": "All of these list patterns require no extra classes and style the correct semantic element.",
+  "context": {
+    "items": [
+      "A standard ordered list",
+      "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
+      "Pellentesque Condimentum Dapibus Cursus Sit"
+    ]
+  }
+}
diff --git a/src/component-library/lists/lists.md b/src/component-library/lists/lists.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/lists/lists.njk b/src/component-library/lists/lists.njk
new file mode 100644
index 00000000000..5d3a8c2ca16
--- /dev/null
+++ b/src/component-library/lists/lists.njk
@@ -0,0 +1,5 @@
+<ol>
+{% for item in data.items %}
+  <li>{{ item }}</li>
+{% endfor %}
+</ol>
diff --git a/src/component-library/lists/variants/description/description.json b/src/component-library/lists/variants/description/description.json
new file mode 100644
index 00000000000..b2e4da1f4c1
--- /dev/null
+++ b/src/component-library/lists/variants/description/description.json
@@ -0,0 +1,18 @@
+{
+  "title": "Description list",
+  "context": {
+    "items": [
+      {
+        "key": "First Term",
+        "values": ["This is the definition of the first term."]
+      },
+      {
+        "key": "Second Term",
+        "values": [
+          "This is one definition of the second term.",
+          "This is another definition of the second term."
+        ]
+      }
+    ]
+  }
+}
diff --git a/src/component-library/lists/variants/description/description.njk b/src/component-library/lists/variants/description/description.njk
new file mode 100644
index 00000000000..3730b7c1f59
--- /dev/null
+++ b/src/component-library/lists/variants/description/description.njk
@@ -0,0 +1,9 @@
+<dl>
+  {% for item in data.items %}
+  <dt>{{ item.key }}</dt>
+  {% for value in item.values %}
+  <dd>{{ value }}</dd>
+  {% endfor %}
+  <!--prettier-ignore-->
+  {% endfor %}
+</dl>
diff --git a/src/component-library/lists/variants/unordered/unordered.json b/src/component-library/lists/variants/unordered/unordered.json
new file mode 100644
index 00000000000..6c1d11fea94
--- /dev/null
+++ b/src/component-library/lists/variants/unordered/unordered.json
@@ -0,0 +1,10 @@
+{
+  "title": "Unordered list",
+  "context": {
+    "items": [
+      "An unordered list",
+      "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
+      "Pellentesque Condimentum Dapibus Cursus Sit"
+    ]
+  }
+}
diff --git a/src/component-library/lists/variants/unordered/unordered.njk b/src/component-library/lists/variants/unordered/unordered.njk
new file mode 100644
index 00000000000..8e31f6e62d1
--- /dev/null
+++ b/src/component-library/lists/variants/unordered/unordered.njk
@@ -0,0 +1,5 @@
+<ul>
+{% for item in data.items %}
+  <li>{{ item }}</li>
+{% endfor %}
+</ul>
diff --git a/src/component-library/numbered-headers/numbered-headers.json b/src/component-library/numbered-headers/numbered-headers.json
new file mode 100644
index 00000000000..1935cd56e58
--- /dev/null
+++ b/src/component-library/numbered-headers/numbered-headers.json
@@ -0,0 +1,26 @@
+{
+  "title": "Numbered headers",
+  "summary": "A simple pattern for adding numbers to headed sections of content. Use the [cluster compostion](/design-system/css-compositions/#cluster) to [render the numbers horizontally](#horizontal).",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_numbered-headers.scss"
+    }
+  ],
+  "context": {
+    "steps": [
+      {
+        "title": "Run tests on your site",
+        "summary": "Enter your site's URL to see how well it performs across all audits."
+      },
+      {
+        "title": "Look at what matters",
+        "summary": "See your site's performance across the areas you care about."
+      },
+      {
+        "title": "Get tips for improving",
+        "summary": "Each test comes with helpful steps to improve your site's results."
+      }
+    ]
+  }
+}
diff --git a/src/component-library/numbered-headers/numbered-headers.md b/src/component-library/numbered-headers/numbered-headers.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/numbered-headers/numbered-headers.njk b/src/component-library/numbered-headers/numbered-headers.njk
new file mode 100644
index 00000000000..66311a50294
--- /dev/null
+++ b/src/component-library/numbered-headers/numbered-headers.njk
@@ -0,0 +1,10 @@
+<section class="numbered-headers">
+  {% for step in data.steps %}
+    <div class="numbered-headers__step">
+      <div class="numbered-headers__heading {{ data.utilities.heading }}">
+        <h3 class="text-size-3">{{ step.title }}</h3>
+      </div>
+      <p>{{ step.summary }}</p>
+    </div>
+  {% endfor %}
+</section>
diff --git a/src/component-library/page-header/page-header.json b/src/component-library/page-header/page-header.json
new file mode 100644
index 00000000000..8f44621ef75
--- /dev/null
+++ b/src/component-library/page-header/page-header.json
@@ -0,0 +1,17 @@
+{
+  "title": "Page Header",
+  "context": {
+    "title": "A page header",
+    "summary": "A simple composition of utility classes to make a header group."
+  },
+  "variants": [
+    {
+      "title": "With no summary",
+      "name": "with-no-summary",
+      "context": {
+        "title": "A page header with no summary",
+        "summary": null
+      }
+    }
+  ]
+}
diff --git a/src/component-library/page-header/page-header.md b/src/component-library/page-header/page-header.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/page-header/page-header.njk b/src/component-library/page-header/page-header.njk
new file mode 100644
index 00000000000..333f1917df7
--- /dev/null
+++ b/src/component-library/page-header/page-header.njk
@@ -0,0 +1,6 @@
+<header class="flow all-center">
+  <h1>{{ data.title }}</h1>
+  {% if data.summary %}
+    <p>{{ data.summary }}</p>
+  {% endif %}
+</header>
diff --git a/src/component-library/pagination/pagination.json b/src/component-library/pagination/pagination.json
new file mode 100644
index 00000000000..bb91a78e4fa
--- /dev/null
+++ b/src/component-library/pagination/pagination.json
@@ -0,0 +1,31 @@
+{
+  "title": "Pagination",
+  "summary": "The pagination pattern is a simple grid-based layout that shows a visual, presentation-only status.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_pagination.scss"
+    }
+  ],
+  "context": {
+    "prev": "Newer posts",
+    "next": "Older posts",
+    "statusText": "Page 3 of 17"
+  },
+  "variants": [
+    {
+      "name": "no-next",
+      "title": "No previous",
+      "context": {
+        "next": false
+      }
+    },
+    {
+      "name": "no-prev",
+      "title": "No previous",
+      "context": {
+        "prev": false
+      }
+    }
+  ]
+}
diff --git a/src/component-library/pagination/pagination.md b/src/component-library/pagination/pagination.md
new file mode 100644
index 00000000000..0f3186b5b9f
--- /dev/null
+++ b/src/component-library/pagination/pagination.md
@@ -0,0 +1,6 @@
+The `.pagination__container` elements aren't necessarily required, but they
+assist with the visual layout.
+
+For example, if there is no previous control, the status will still be central
+and the next control will be pushed out to the end still, if you use the
+`.pagination__container` elements.
diff --git a/src/component-library/pagination/pagination.njk b/src/component-library/pagination/pagination.njk
new file mode 100644
index 00000000000..812fea53bc8
--- /dev/null
+++ b/src/component-library/pagination/pagination.njk
@@ -0,0 +1,15 @@
+<nav class="pagination" aria-label="Pagination {{ data.statusText }}">
+  <div class="pagination__container">
+  {% if data.prev %}
+    <a class="button" href="#">{{ data.prev }}</a>
+  {% endif %}
+  </div>
+  <div class="pagination__status" role="presentation" aria-hidden="true">
+    {{ data.statusText }}
+  </div>
+  <div class="pagination__container">
+  {% if data.next %}
+    <a class="button" href="#">{{ data.next }}</a>
+  {% endif %}
+  </div>
+</nav>
diff --git a/src/component-library/pattern-generator.js b/src/component-library/pattern-generator.js
new file mode 100644
index 00000000000..c780165e800
--- /dev/null
+++ b/src/component-library/pattern-generator.js
@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const pathIndex = process.argv.indexOf('-p');
+const nameIndex = process.argv.indexOf('-n');
+const titleIndex = process.argv.indexOf('-t');
+const skipMarkupIndex = process.argv.indexOf('-sm');
+const basePath = [process.cwd(), 'src', 'component-library'];
+
+// Set up the chalk warning and error states
+const warning = chalk.black.bgYellow;
+const error = chalk.black.bgRed;
+const success = chalk.black.bgGreen;
+
+if (pathIndex > 0 && nameIndex > 0) {
+  const newPath = process.argv.slice(pathIndex + 1)[0];
+  const name = process.argv.slice(nameIndex + 1)[0];
+  const title = process.argv.slice(titleIndex + 1)[0];
+  const isVariant = newPath.includes('variants');
+
+  // This one is only used for variants
+  const skipMarkup =
+    process.argv.slice(skipMarkupIndex + 1)[0] === 'true' ? true : false;
+
+  basePath.push(newPath);
+
+  if (name !== newPath) {
+    basePath.push(name);
+  }
+
+  // Create the directory if it doesn't already exist
+  if (!fs.existsSync(path.join(...basePath))) {
+    fs.mkdirSync(path.join(...basePath), {recursive: true});
+  }
+
+  // Create markup if not skipping (variants only)
+  if (isVariant && skipMarkup) {
+    console.log(warning('Markup skipped for this variant'));
+  } else {
+    fs.writeFileSync(path.join(...[...basePath, `${name}.njk`]), '');
+  }
+
+  fs.writeFileSync(
+    path.join(...[...basePath, `${name}.json`]),
+    `
+{ 
+  "title": "${title || name}",
+  "context": {
+  }
+}
+`,
+  );
+
+  if (!isVariant) {
+    fs.writeFileSync(path.join(...[...basePath, `${name}.md`]), '');
+  }
+
+  console.log(success(`${isVariant ? 'Variant' : 'Pattern'} created!`));
+} else {
+  console.log(error('Name (-n) and/or Path (-p) not defined'));
+}
diff --git a/src/component-library/pill/pill.json b/src/component-library/pill/pill.json
new file mode 100644
index 00000000000..bbf56d733bd
--- /dev/null
+++ b/src/component-library/pill/pill.json
@@ -0,0 +1,12 @@
+{
+  "title": "Pill",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_pill.scss"
+    }
+  ],
+  "context": {
+    "text": "A pill element"
+  }
+}
diff --git a/src/component-library/pill/pill.md b/src/component-library/pill/pill.md
new file mode 100644
index 00000000000..340c6b58fd3
--- /dev/null
+++ b/src/component-library/pill/pill.md
@@ -0,0 +1,3 @@
+For use in smaller, groups of buttons. Many pill elements should be laid out with the [cluster](/design-system/css-compositions/#cluster).
+
+Apply an active state with either `[data-state="active"]` or `[aria-current="page"]`.
diff --git a/src/component-library/pill/pill.njk b/src/component-library/pill/pill.njk
new file mode 100644
index 00000000000..66c7cd853e3
--- /dev/null
+++ b/src/component-library/pill/pill.njk
@@ -0,0 +1 @@
+<button class="pill {{ data.utilities }}">{{ data.text }}</button>
diff --git a/src/component-library/preview-pagination/preview-pagination.json b/src/component-library/preview-pagination/preview-pagination.json
new file mode 100644
index 00000000000..a9409c21592
--- /dev/null
+++ b/src/component-library/preview-pagination/preview-pagination.json
@@ -0,0 +1,40 @@
+{
+  "title": "Preview Pagination",
+  "summary": "A pagination pattern that works best in next and previous lesson/article contexts.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_preview-pagination.scss"
+    }
+  ],
+  "context": {
+    "title": "Next and previous lessons",
+    "next": {
+      "url": "#",
+      "meta": ["next", "018"],
+      "title": "Z-index and stacking contexts",
+      "description": "In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context."
+    },
+    "prev": {
+      "url": "#",
+      "meta": ["prev", "016"],
+      "title": "Shadows"
+    }
+  },
+  "variants": [
+    {
+      "name": "next-only",
+      "title": "Next only",
+      "context": {
+        "prev": false
+      }
+    },
+    {
+      "name": "prev-only",
+      "title": "Prev only",
+      "context": {
+        "next": false
+      }
+    }
+  ]
+}
diff --git a/src/component-library/preview-pagination/preview-pagination.md b/src/component-library/preview-pagination/preview-pagination.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/preview-pagination/preview-pagination.njk b/src/component-library/preview-pagination/preview-pagination.njk
new file mode 100644
index 00000000000..d9c94505878
--- /dev/null
+++ b/src/component-library/preview-pagination/preview-pagination.njk
@@ -0,0 +1,31 @@
+<h2 class="visually-hidden">{{ title }}</h2>
+<nav class="preview-pagination" aria-label="pagination">
+  {% if data.prev %}
+    <a class="preview-pagination__item flow" href="{{ data.prev.url }}" data-dir="prev">
+      <div class="preview-pagination__meta cluster">
+        {% include "icons/arrow-back.svg" %}
+        {% for item in data.prev.meta %}
+          <span>{{ item}}</span> 
+        {% endfor %}
+      </div>
+      <h3 class="preview-pagination__heading">{{ data.prev.title }}</h3>
+      {% if data.prev.description %}
+        <p>{{ data.prev.description }}</p>
+      {% endif %}
+    </a>
+  {% endif %}
+  {% if data.next %}
+    <a class="preview-pagination__item flow" href="{{ data.next.url }}" data-dir="next">
+      <div class="preview-pagination__meta cluster">
+        {% include "icons/arrow-forward.svg" %}
+        {% for item in data.next.meta %}
+          <span>{{ item}}</span> 
+        {% endfor %}
+      </div>
+      <h3 class="preview-pagination__heading">{{ data.next.title }}</h3>
+      {% if data.next.description %}
+        <p>{{ data.next.description }}</p>
+      {% endif %}
+    </a>
+  {% endif %}
+</nav>
\ No newline at end of file
diff --git a/src/component-library/prose/prose.json b/src/component-library/prose/prose.json
new file mode 100644
index 00000000000..49208647ab7
--- /dev/null
+++ b/src/component-library/prose/prose.json
@@ -0,0 +1,11 @@
+{
+  "title": "Prose",
+  "summary": "Simple rules to help longform content—prose—read as niceley as it can.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_prose.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/prose/prose.md b/src/component-library/prose/prose.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/component-library/prose/prose.njk b/src/component-library/prose/prose.njk
new file mode 100644
index 00000000000..4bcdf2b4d11
--- /dev/null
+++ b/src/component-library/prose/prose.njk
@@ -0,0 +1,129 @@
+<div class="prose">
+	<p>Say you have this bit of HTML:</p>
+	<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>I am a paragraph of text that has a few words in it.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></code></pre>
+	<p>Then you write this CSS for it:</p>
+	<pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br>  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br>  <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br>  <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br>  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
+	<p>The content would break out of your element and it would be 142px wide, rather than 100px. Why is that? The box model is a core foundation of CSS and understanding how it works, how it is affected by other aspects of CSS and importantly, how you can control it will help you to write more predictable CSS.</p>
+	<figure>
+		<div style="height: 300px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/WNRemxN?height=300&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen WNRemxN by web-dot-dev on Codepen"></iframe>
+		</div>
+	</figure>
+	<p>A really important thing to remember when writing CSS, or working on the web as a whole, is that everything displayed by CSS is a box. Whether that's a box that uses <code>border-radius</code> to look like a circle, or even just some text: the key thing to remember is that it's all boxes.</p>
+	<h2 id="content-and-sizing">Content and sizing <a class="headline-link" href="#content-and-sizing">#</a></h2>
+	<p>Boxes have different behavior based on their <code>display</code> value, their set dimensions, and the content that lives within them. This content could be even more boxes—generated by child elements—or plain text content. Either way, this content will affect the size of the box by default.</p>
+	<p>You can control this by using <strong>extrinsic sizing</strong>, or, you can continue to let the browser make decisions for you based on the content size, using <strong>intrinsic sizing</strong>.</p>
+	<p>Let's quickly look at the difference, using a demo to help us.</p>
+	<figure>
+		<div style="height: 500px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/abpoMBL?height=500&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen abpoMBL by web-dot-dev on Codepen"></iframe>
+		</div>
+		<figcaption>
+			Notice that when the box is using extrinsic sizing, there's a limit of how much content you can add before it overflows out of the box's bounds. This makes the word, "awesome", overflow.
+		</figcaption>
+	</figure>
+	<p>The demo has the words, "CSS is awesome" in a box with fixed dimensions and a thick border. The box has a width, so is extrinsically sized. It controls the sizing of its child content. The problem with this though, is that the word "awesome" is too large for the box, so it overflows outside of the parent box's <strong>border box</strong> (more on this later in the lesson). One way to prevent this overflow is to allow the box to be intrinsically sized by either unsetting the width, or in this case, setting the <code>width</code> to be <code>min-content</code>. The <code>min-content</code> keyword tells the box to only be as wide as the intrinsic minimum width of its content (the word "awesome"). This allows the box to fit around "CSS is awesome", perfectly.</p>
+	<p>Let's look at something more complex to see the impact of different sizing on real content:</p>
+	<figure>
+		<div style="height: 650px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/wvgwOJV?height=650&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen wvgwOJV by web-dot-dev on Codepen"></iframe>
+		</div>
+	</figure>
+	<p>Toggle intrinsic sizing on and off to see how you can gain more control with extrinsic sizing and let the content have more control with intrinsic sizing. To see the effect that intrinsic and extrinsic sizing has, add a few sentences of content to the card. When this element is using extrinsic sizing, there's a limit of how much content you can add before it overflows out of the element's bounds, but this isn't the case when intrinsic sizing is toggled on.</p>
+	<p>By default, this element has a set <code>width</code> and <code>height</code>—both <code>400px</code>. These dimensions give strict bounds to everything inside the element, which will be honored unless the content is too large for the box in which case visible overflow will happen. You can see this in action by changing the content of the caption, under the flower picture to something that exceeds the height of the box, which is a few lines of content.</p>
+	<div class="aside flow color-secondary-box-text bg-secondary-box-bg">
+		<p><strong>Key Term</strong>: When content is too big for the box it is in, we call this overflow. You can manage how an element handles overflow content, using the <code>overflow</code> property.</p>
+	</div>
+	<p>When you switch to intrinsic sizing, you are letting the browser make decisions for you, based on the box's content size. It's much more difficult for there to be overflow with intrinsic sizing because our box will resize with its content, rather than try to size the content. It's important to remember that this is the default, flexible behavior of a browser. Though extrinsic sizing gives more control on the surface, intrinsic sizing provides the most flexibility, most of the time.</p>
+	<h2 id="the-areas-of-the-box-model">The areas of the box model <a class="headline-link" href="#the-areas-of-the-box-model">#</a></h2>
+	<p>Boxes are made up of distinct box model areas that all do a specific job.</p>
+	<figure>
+		<img alt="A diagram showing the four main areas of the box model - content box, padding box, border box and margin box" height="547" src="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg" width="800">
+		<figcaption>
+			The four main areas of the box model: content box, padding box, border box and margin box.
+		</figcaption>
+	</figure>
+	<p>You start with <strong>content box</strong>, which is the area that the content lives in. As you learned before: this content can control the size of its parent, so is usually the most variably sized area.</p>
+	<p>The <strong>padding box</strong> surrounds the content box and is the space created by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" rel="noopener"><code>padding</code></a> property. Because padding is inside the box, the background of the box will be visible in the space that it creates. If our box has overflow rules set, such as <code>overflow: auto</code> or <code>overflow: scroll</code>, the scrollbars will occupy this space too.</p>
+	<figure>
+		<div style="height: 500px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/BaReoEV?height=500&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen BaReoEV by web-dot-dev on Codepen"></iframe>
+		</div>
+	</figure>
+	<p>The <strong>border box</strong> surrounds the padding box and its space is occupied by the <code>border</code> value. The border box is the bounds of your box and the <strong>border edge</strong> is the limit of what you can visually see. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" rel="noopener"><code>border</code></a> property is used to visually frame an element.</p>
+	<p>The final area, the <strong>margin box</strong>, is the space around your box, defined by the <code>margin</code> rule on your box. Properties such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" rel="noopener"><code>outline</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" rel="noopener"><code>box-shadow</code></a> occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an <code>outline-width</code> of <code>200px</code> on our box and everything inside and including the border box would be exactly the same size.</p>
+	<figure>
+		<div style="height: 500px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/XWprGea?height=500&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen XWprGea by web-dot-dev on Codepen"></iframe>
+		</div>
+	</figure>
+	<h2 id="a-useful-analogy">A useful analogy <a class="headline-link" href="#a-useful-analogy">#</a></h2>
+	<p>The box model is complex to understand, so let's recap what you've learned with an analogy.</p>
+	<figure>
+		<img alt="Three photo frames" height="562" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format" srcset="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg?auto=format&amp;w=1600 1600w" width="800">
+	</figure>
+	<p>In this diagram, you have three photo frames, mounted to a wall, next to each other. The diagram has labels that associate elements of the frame with the box model.</p>
+	<p>To break this analogy down:</p>
+	<ul>
+		<li>The content box is the artwork.</li>
+		<li>The padding box is the white matte, between the frame and the artwork.</li>
+		<li>The border box is the frame, providing a literal border for the artwork.</li>
+		<li>The margin box is the space between each frame.</li>
+		<li>The shadow occupies the same space as the margin box.</li>
+	</ul>
+	<h2 id="debugging-the-box-model">Debugging the box model <a class="headline-link" href="#debugging-the-box-model">#</a></h2>
+	<p>Browser DevTools provide a visualisation of a selected box's box model calculations, which can help you understand how the box model works and importantly, how it is affecting the website you're working on.</p>
+	<p>Go ahead and try this in your own browser:</p>
+	<ol>
+		<li>
+			<a href="https://developers.google.com/web/tools/chrome-devtools/open" rel="noopener">Open DevTools</a>
+		</li>
+		<li>
+			<a href="https://developers.google.com/web/tools/chrome-devtools/css/reference#select" rel="noopener">Select an element</a>
+		</li>
+		<li>Show the box model debugger</li>
+	</ol>
+	<figure>
+		<video controls=""><source src="https://storage.googleapis.com/web-dev-uploads/video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4" type="video/mp4"></video>
+	</figure>
+	<h2 id="controlling-the-box-model">Controlling the box model <a class="headline-link" href="#controlling-the-box-model">#</a></h2>
+	<p>To understand how to control the box model, you first need to understand what happens in your browser.</p>
+	<p>Every browser applies a user agent stylesheet to HTML documents. The CSS used varies between each browser, but they provide sensible defaults to make content easier to read. They define how elements should look and behave if there's no CSS defined. It is in the user agent styles where a box's default <code>display</code> is set, too. For example, if we are in a normal flow, a <code>&lt;div&gt;</code> element's default <code>display</code> value is <code>block</code>, a <code>&lt;li&gt;</code> has a default <code>display</code> value of <code>list-item</code>, and a <code>&lt;span&gt;</code> has a default <code>display</code> value of <code>inline</code>.</p>
+	<p>An <code>inline</code> element has block margin, but other elements won't respect it. Use <code>inline-block</code>, and those elements will respect the block margin, while the element maintains most of the same behaviors it had as an <code>inline</code> element. A <code>block</code> item will, by default, fill the available <strong>inline space</strong>, whereas a <code>inline</code> and <code>inline-block</code> elements will only be as large as their content.</p>
+	<p>Alongside an understanding of how user agent styles affect each box, you also need to understand <code>box-sizing</code>, which tells our box how to calculate its box size. By default, all elements have the following user agent style: <code>box-sizing: content-box;</code>.</p>
+	<p>Having <code>content-box</code> as the value of <code>box-sizing</code> means that when you set dimensions, such as a <code>width</code> and <code>height</code>, they will be applied to the <strong>content box</strong>. If you then set <code>padding</code> and <code>border</code>, these values will be added to the content box's size.</p>
+	<p>The actual width of this box will be 260px. As the CSS uses the default <code>box-sizing: content-box</code>, the applied width is the width of the content, <code>padding</code> and <code>border</code> on both sides are added to that. So 200px for the content + 40px of padding + 20px of border makes a total visible width of 260px.</p>
+	<p>You <em>can</em> control this, though, by making the following modification to use the alternative box model, <code>border-box</code>:</p>
+	<pre class="language-css"><code class="language-css"><span class="highlight-line"><span class="token selector">.my-box</span> <span class="token punctuation">{</span></span><br><mark class="highlight-line highlight-line-active">  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span></mark><br><span class="highlight-line"> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> 10px solid<span class="token punctuation">;</span></span><br><span class="highlight-line">   <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
+	<p>This alternative box model tells CSS to apply the <code>width</code> to the border box instead of the content box. This means that our <code>border</code> and <code>padding</code> get <em>pushed in</em>, and as a result, when you set <code>.my-box</code> to be <code>200px</code> wide: it actually renders at <code>200px</code> wide.</p>
+	<p>Check out how this works in the following interactive demo. Notice that when you toggle the <code>box-sizing</code> value it shows—via a blue background—which CSS is being applied <em>inside</em> our box.</p>
+	<figure>
+		<div style="height: 650px; width: 100%">
+			<iframe src="https://codepen.io/web-dot-dev/embed/oNBvVpM?height=650&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen oNBvVpM by web-dot-dev on Codepen"></iframe>
+		</div>
+	</figure>
+	<pre class="language-css"><code class="language-css"><span class="token selector">*,<br>*::before,<br>*::after</span> <span class="token punctuation">{</span><br>  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
+	<p>This CSS rule selects every element in the document and every <code>::before</code> and <code>::after</code> pseudo element and applies <code>box-sizing: border-box</code>. This means that every element will now have this alternative box model.</p>
+	<p>Because the alternative box model can be more predictable, developers often add this rule to resets and normalizers, <a href="https://piccalil.li/blog/a-modern-css-reset" rel="noopener">like this one</a>.</p>
+	<h2 id="resources">Resources <a class="headline-link" href="#resources">#</a></h2>
+	<ul>
+		<li>
+			<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" rel="noopener">Introduction to the box model</a>
+		</li>
+		<li>
+			<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="noopener">What are browser developer tools?</a>
+		</li>
+	</ul>
+	<h3 id="user-agent-stylesheets">User agent stylesheets <a class="headline-link" href="#user-agent-stylesheets">#</a></h3>
+	<ul>
+		<li>
+			<a href="https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css" rel="noopener">Chromium</a>
+		</li>
+		<li>
+			<a href="https://searchfox.org/mozilla-central/source/layout/style/res/html.css" rel="noopener">Firefox</a>
+		</li>
+		<li>
+			<a href="https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css" rel="noopener">Webkit</a>
+		</li>
+	</ul>
+</div>
diff --git a/src/component-library/spinner/spinner.json b/src/component-library/spinner/spinner.json
new file mode 100644
index 00000000000..da007a14c92
--- /dev/null
+++ b/src/component-library/spinner/spinner.json
@@ -0,0 +1,12 @@
+{
+  "title": "Spinner",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_spinner.scss"
+    }
+  ],
+  "context": {
+    "title": "A spinner element"
+  }
+}
diff --git a/src/component-library/spinner/spinner.md b/src/component-library/spinner/spinner.md
new file mode 100644
index 00000000000..da1fc398e9b
--- /dev/null
+++ b/src/component-library/spinner/spinner.md
@@ -0,0 +1 @@
+To display when content is loading. The `--color` CSS variable can be used to determine the color of the drawn stroke. The CSS `width` property can be used to size the element.
\ No newline at end of file
diff --git a/src/component-library/spinner/spinner.njk b/src/component-library/spinner/spinner.njk
new file mode 100644
index 00000000000..bd6ac2043e2
--- /dev/null
+++ b/src/component-library/spinner/spinner.njk
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 6 6" class="spinner" style="--color: var(--color-highlight-text); width: 50px;">
+  <circle cx="3" cy="3" r="2.5" />
+</svg>
\ No newline at end of file
diff --git a/src/component-library/stack-nav/stack-nav.json b/src/component-library/stack-nav/stack-nav.json
new file mode 100644
index 00000000000..7dfb206fad4
--- /dev/null
+++ b/src/component-library/stack-nav/stack-nav.json
@@ -0,0 +1,203 @@
+{
+  "title": "Stack Nav",
+  "summary": "Block links with an active state for current page.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_stack-nav.scss"
+    }
+  ],
+  "context": {
+    "items": [
+      {
+        "text": "Lorem ipsum dolor",
+        "url": "#",
+        "active": false
+      },
+      {
+        "text": "Tristique Ornare Commodo",
+        "url": "#",
+        "active": true
+      },
+      {
+        "text": "Adipiscing Amet Ullamcorper",
+        "url": "#",
+        "active": false
+      },
+      {
+        "text": "Risus Adipiscing",
+        "url": "#",
+        "active": false
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "with-prefix",
+      "title": "With Prefix",
+      "context": {
+        "items": [
+          {
+            "text": "Lorem ipsum dolor",
+            "url": "#",
+            "active": false,
+            "prefix": "001"
+          },
+          {
+            "text": "Tristique Ornare Commodo",
+            "url": "#",
+            "active": true,
+            "prefix": "002"
+          },
+          {
+            "text": "Adipiscing Amet Ullamcorper",
+            "url": "#",
+            "active": false,
+            "prefix": "003"
+          },
+          {
+            "text": "Risus Adipiscing",
+            "url": "#",
+            "active": false,
+            "prefix": "004"
+          }
+        ]
+      }
+    },
+    {
+      "name": "with-icon",
+      "title": "With Icon",
+      "context": {
+        "items": [
+          {
+            "text": "Lorem ipsum dolor",
+            "url": "#",
+            "active": false,
+            "icon": "done.svg"
+          },
+          {
+            "text": "Tristique Ornare Commodo",
+            "url": "#",
+            "active": true,
+            "icon": "done.svg"
+          },
+          {
+            "text": "Adipiscing Amet Ullamcorper",
+            "url": "#",
+            "active": false
+          },
+          {
+            "text": "Risus Adipiscing",
+            "url": "#",
+            "active": false,
+            "icon": "done.svg"
+          }
+        ]
+      }
+    },
+    {
+      "name": "with-icon-and-prefix",
+      "title": "With Icon And Prefix",
+      "context": {
+        "items": [
+          {
+            "text": "Lorem ipsum dolor",
+            "url": "#",
+            "active": false,
+            "icon": "done.svg",
+            "prefix": "001"
+          },
+          {
+            "text": "Tristique Ornare Commodo",
+            "url": "#",
+            "active": true,
+            "icon": "done.svg",
+            "prefix": "002"
+          },
+          {
+            "text": "Adipiscing Amet Ullamcorper",
+            "url": "#",
+            "active": false,
+            "prefix": "003"
+          },
+          {
+            "text": "Risus Adipiscing",
+            "url": "#",
+            "active": false,
+            "icon": "done.svg",
+            "prefix": "004"
+          }
+        ]
+      }
+    },
+    {
+      "name": "with-suffix",
+      "title": "With Suffix",
+      "context": {
+        "items": [
+          {
+            "text": "Lorem ipsum dolor",
+            "url": "#",
+            "active": false,
+            "prefix": "001"
+          },
+          {
+            "text": "Tristique Ornare Commodo",
+            "url": "#",
+            "active": true,
+            "prefix": "002",
+            "suffix": "New!"
+          },
+          {
+            "text": "Adipiscing Amet Ullamcorper",
+            "url": "#",
+            "active": false,
+            "prefix": "003"
+          },
+          {
+            "text": "Risus Adipiscing",
+            "url": "#",
+            "active": false,
+            "prefix": "004"
+          }
+        ]
+      }
+    },
+    {
+      "name": "with-suffix-and-icon",
+      "title": "With Suffix and Icon",
+      "context": {
+        "items": [
+          {
+            "text": "Lorem ipsum dolor",
+            "url": "#",
+            "active": false,
+            "prefix": "001",
+            "icon": "done.svg"
+          },
+          {
+            "text": "Tristique Ornare Commodo",
+            "url": "#",
+            "active": true,
+            "prefix": "002",
+            "icon": "done.svg",
+            "suffix": "New!"
+          },
+          {
+            "text": "Adipiscing Amet Ullamcorper",
+            "url": "#",
+            "active": false,
+            "prefix": "003",
+            "suffix": "New!"
+          },
+          {
+            "text": "Risus Adipiscing",
+            "url": "#",
+            "active": false,
+            "prefix": "004"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/component-library/stack-nav/stack-nav.md b/src/component-library/stack-nav/stack-nav.md
new file mode 100644
index 00000000000..e32ec875ad0
--- /dev/null
+++ b/src/component-library/stack-nav/stack-nav.md
@@ -0,0 +1,17 @@
+The active state will only
+show if the correct `aria-current="page"` attribute is set on the `<a>`
+elements.
+
+You can add a meta element (`.stack-nav__meta`) which will display as a smaller,
+monospaced element. It's recommended that you use the
+[cluster](/design-system/css-compositions/#cluster) layout composition to group
+this with the main text element if used as a prefix.
+
+You can also add an SVG and in this situation, apply a `.repel` class, which
+will then use the [repel](/design-system/css-compositions/#repel) layout
+composition to push the icon and text away from each other.
+
+You can apply `.stack-nav` directly to a list (`<ol>/<ul>`) or as a parent
+class. If you use the parent class, be sure to apply `.stack-nav__list` to
+activate reset styles. This is the recommended pattern for
+[headed/nested](<#headed-(nested)>) contexts.
diff --git a/src/component-library/stack-nav/stack-nav.njk b/src/component-library/stack-nav/stack-nav.njk
new file mode 100644
index 00000000000..e11c2825f4c
--- /dev/null
+++ b/src/component-library/stack-nav/stack-nav.njk
@@ -0,0 +1,22 @@
+<ul role="list" class="stack-nav">
+  {% for item in data.items %}
+    <li>
+      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
+        <span class="cluster">
+          {% if item.prefix %}
+          <span class="stack-nav__meta">{{ item.prefix }}</span>
+          {% endif %}
+          <span>{{ item.text }}</span>
+        </span>
+        <span class="cluster">
+          {% if item.suffix %}
+            <span class="stack-nav__meta">{{ item.suffix }}</span>
+          {% endif %}
+          {% if item.icon %}
+            {% include "icons/" + item.icon %}
+          {% endif %}
+        </span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
\ No newline at end of file
diff --git a/src/component-library/stack-nav/variants/nested/nested.json b/src/component-library/stack-nav/variants/nested/nested.json
new file mode 100644
index 00000000000..a7e2a8eb59c
--- /dev/null
+++ b/src/component-library/stack-nav/variants/nested/nested.json
@@ -0,0 +1,64 @@
+{
+  "title": "Headed (Nested)",
+  "context": {
+    "topItems": [
+      {
+        "text": "Lorem ipsum dolor",
+        "url": "#",
+        "active": false,
+        "icon": "done.svg",
+        "prefix": "001"
+      },
+      {
+        "text": "Tristique Ornare Commodo",
+        "url": "#",
+        "active": true,
+        "icon": "done.svg",
+        "prefix": "002"
+      },
+      {
+        "text": "Adipiscing Amet Ullamcorper",
+        "url": "#",
+        "active": false,
+        "prefix": "003"
+      },
+      {
+        "text": "Risus Adipiscing",
+        "url": "#",
+        "active": false,
+        "icon": "done.svg",
+        "prefix": "004"
+      }
+    ],
+    "heading": "A heading for a section",
+    "headedItems": [
+      {
+        "text": "Lorem ipsum dolor",
+        "url": "#",
+        "active": false,
+        "icon": "done.svg",
+        "prefix": "005"
+      },
+      {
+        "text": "Tristique Ornare Commodo",
+        "url": "#",
+        "active": false,
+        "icon": "done.svg",
+        "prefix": "006"
+      },
+      {
+        "text": "Adipiscing Amet Ullamcorper",
+        "url": "#",
+        "active": false,
+        "prefix": "007"
+      },
+      {
+        "text": "Risus Adipiscing",
+        "url": "#",
+        "active": false,
+        "icon": "done.svg",
+        "prefix": "008"
+      }
+    ]
+  }
+}
diff --git a/src/component-library/stack-nav/variants/nested/nested.njk b/src/component-library/stack-nav/variants/nested/nested.njk
new file mode 100644
index 00000000000..527463eea37
--- /dev/null
+++ b/src/component-library/stack-nav/variants/nested/nested.njk
@@ -0,0 +1,37 @@
+<div class="stack-nav">
+  <ul role="list" class="stack-nav__list">
+    {% for item in data.topItems %}
+      <li>
+        <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
+          <span class="cluster">
+            {% if item.prefix %}
+            <span class="stack-nav__meta">{{ item.prefix }}</span>
+            {% endif %}
+            <span>{{ item.text }}</span>
+          </span>
+          {% if item.icon %}
+            {% include "icons/" + item.icon %}
+          {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+  <h3 class="stack-nav__heading">{{ data.heading }}</h3>
+  <ul role="list" class="stack-nav__list">
+    {% for item in data.headedItems %}
+      <li>
+        <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
+          <span class="cluster">
+            {% if item.prefix %}
+            <span class="stack-nav__meta">{{ item.prefix }}</span>
+            {% endif %}
+            <span>{{ item.text }}</span>
+          </span>
+          {% if item.icon %}
+            {% include "icons/" + item.icon %}
+          {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/src/component-library/stats/stats.json b/src/component-library/stats/stats.json
new file mode 100644
index 00000000000..0d5f2ef5742
--- /dev/null
+++ b/src/component-library/stats/stats.json
@@ -0,0 +1,37 @@
+{
+  "title": "Stats",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_stats.scss"
+    }
+  ],
+  "context": {
+    "items": [
+      {
+        "stat": "30",
+        "sub": "%",
+        "desc": "Lower cost per conversion"
+      },
+      {
+        "stat": "13",
+        "sub": "%",
+        "desc": "Higher CTR"
+      },
+      {
+        "stat": "4",
+        "sub": "x",
+        "desc": "Faster load times"
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "alternative-look-and-feel",
+      "title": "Alternative Look And Feel",
+      "context": {
+        "utilities": "bg-state-info-bg color-state-info-text"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/stats/stats.md b/src/component-library/stats/stats.md
new file mode 100644
index 00000000000..45fd66a65c8
--- /dev/null
+++ b/src/component-library/stats/stats.md
@@ -0,0 +1,6 @@
+Use the Stats component to call out important statistics about a product or
+service discussed in a post. (Stats are primarily used in case studies.)
+
+You can modify the look and feel of stats by using utility classes that
+reference [theme colors](/design-system/colors#theme-usage). It's recommended
+that you add these theme classes to the root, `.stats` element.
diff --git a/src/component-library/stats/stats.njk b/src/component-library/stats/stats.njk
new file mode 100644
index 00000000000..a175ff320e7
--- /dev/null
+++ b/src/component-library/stats/stats.njk
@@ -0,0 +1,13 @@
+<ul class="stats {{ data.utilities }}">
+  {% for item in data.items %}
+  <div class="stats__item">
+    <p class="stats__figure">
+      {{ item.stat }}
+      {% if item.sub %}
+      <sub>{{ item.sub }}</sub>
+      {% endif %}
+    </p>
+    <p>{{ item.desc }}</p>
+  </div>
+  {% endfor %}
+</ul>
diff --git a/src/component-library/status-list/status-list.json b/src/component-library/status-list/status-list.json
new file mode 100644
index 00000000000..231cc6acce5
--- /dev/null
+++ b/src/component-library/status-list/status-list.json
@@ -0,0 +1,42 @@
+{
+  "title": "Status List",
+  "summary": "A simple state-based variant on an unordered or ordered list.",
+  "context": {
+    "icon": "check",
+    "items": [
+      {
+        "text": "Overview",
+        "url": "#"
+      },
+      {
+        "text": "Web Vitals Metrics",
+        "url": "#"
+      },
+      {
+        "text": "Measure Web Vitals",
+        "url": "#"
+      },
+      {
+        "text": "Debug Web Vitals",
+        "url": "#"
+      },
+      {
+        "text": "Improve Web Vitals",
+        "url": "#"
+      },
+      {
+        "text": "Best Practices",
+        "url": "#"
+      }
+    ]
+  },
+  "variants": [
+    {
+      "name": "bad",
+      "title": "Bad state",
+      "context": {
+        "state": "bad"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/status-list/status-list.md b/src/component-library/status-list/status-list.md
new file mode 100644
index 00000000000..f6a9e1e5d7e
--- /dev/null
+++ b/src/component-library/status-list/status-list.md
@@ -0,0 +1 @@
+By default, this pattern is in a success (good) state. To switch the icon to crosses, add a `data-state="bad"` to the pattern instance.
diff --git a/src/component-library/status-list/status-list.njk b/src/component-library/status-list/status-list.njk
new file mode 100644
index 00000000000..86c3c6801df
--- /dev/null
+++ b/src/component-library/status-list/status-list.njk
@@ -0,0 +1,7 @@
+<ul class="status-list" data-state="{{ data.state }}">
+  {% for item in data.items %}
+    <li>
+      <a href="{{ item.url }}">{{ item.text }}</a>
+    </li>
+  {% endfor %}
+</ul>
\ No newline at end of file
diff --git a/src/component-library/tables/tables.json b/src/component-library/tables/tables.json
new file mode 100644
index 00000000000..efb404a7ae2
--- /dev/null
+++ b/src/component-library/tables/tables.json
@@ -0,0 +1,11 @@
+{
+  "title": "Tables",
+  "summary": "Core table styles, wrapper block and scrolling utility.",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_table-wrapper.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/tables/tables.md b/src/component-library/tables/tables.md
new file mode 100644
index 00000000000..442619493ad
--- /dev/null
+++ b/src/component-library/tables/tables.md
@@ -0,0 +1,9 @@
+Use HTML markup for tables. Do _not_ use Markdown syntax. It is also
+recommended that you use the `table-wrapper` and `scrollbar` classes to
+provide a good user experience for smaller viewports.
+
+If you want content in `<td>` elements to be vertically aligned to the top of
+the cell, add the `[data-align="top"]` [exception](https://cube.fyi/exception) to the `<table>` element. You can also
+add `[data-align="baseline"]` for baseline alignment. The default alignment
+is center and bottom alignment isn't available because it provides a poor
+reading experience.
diff --git a/src/component-library/tables/tables.njk b/src/component-library/tables/tables.njk
new file mode 100644
index 00000000000..f509c8962e7
--- /dev/null
+++ b/src/component-library/tables/tables.njk
@@ -0,0 +1,41 @@
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Image Format</th>
+        <th>Lossy Plugin(s)</th>
+        <th>Lossless Plugin(s)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="#">imagemin-mozjpeg</a></td>
+        <td><a href="#">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="#">imagemin-pngquant</a></td>
+        <td><a href="#">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="#">imagemin-giflossy</a></td>
+        <td><a href="#">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="#">Imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="#">imagemin-webp</a></td>
+        <td></td>
+      </tr>
+    </tbody>
+    <caption>
+      Imagemin plugins for filetypes.
+    </caption>
+  </table>
+</div>
diff --git a/src/component-library/tables/variants/align-top/align-top.json b/src/component-library/tables/variants/align-top/align-top.json
new file mode 100644
index 00000000000..4949766edc1
--- /dev/null
+++ b/src/component-library/tables/variants/align-top/align-top.json
@@ -0,0 +1,4 @@
+{
+  "title": "Aligment exception example",
+  "context": {}
+}
diff --git a/src/component-library/tables/variants/align-top/align-top.njk b/src/component-library/tables/variants/align-top/align-top.njk
new file mode 100644
index 00000000000..f68888cc41f
--- /dev/null
+++ b/src/component-library/tables/variants/align-top/align-top.njk
@@ -0,0 +1,49 @@
+<div class="table-wrapper scrollbar">
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Tool</th>
+        <th>CLI</th>
+        <th>CI</th>
+        <th>Summary</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Lighthouse</td>
+        <td>✔</td>
+        <td>✘</td>
+        <td>
+          <ul>
+            <li>
+              Budgets for different types of resources based on their size or
+              count
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>webpack</td>
+        <td>✔</td>
+        <td>✘</td>
+        <td>
+          <ul>
+            <li>Budgets based on sizes of assets generated by webpack</li>
+            <li>Checks uncompressed sizes</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>bundlesize</td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>
+          <ul>
+            <li>Budgets based on sizes of specific resources</li>
+            <li>Checks compressed or uncompressed sizes</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/component-library/tables/variants/misc-content-examples/misc-content-examples.json b/src/component-library/tables/variants/misc-content-examples/misc-content-examples.json
new file mode 100644
index 00000000000..9b16ae0d116
--- /dev/null
+++ b/src/component-library/tables/variants/misc-content-examples/misc-content-examples.json
@@ -0,0 +1,4 @@
+{
+  "title": "Misc content examples",
+  "context": {}
+}
diff --git a/src/component-library/tables/variants/misc-content-examples/misc-content-examples.njk b/src/component-library/tables/variants/misc-content-examples/misc-content-examples.njk
new file mode 100644
index 00000000000..363a9dfeb55
--- /dev/null
+++ b/src/component-library/tables/variants/misc-content-examples/misc-content-examples.njk
@@ -0,0 +1,82 @@
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Element type</th>
+        <th>How to add a name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          HTML document
+        </td>
+        <td>
+          <a href="#label-documents-and-frames">Label documents and frames</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>&lt;frame&gt;</code> or <code>&lt;iframe&gt;</code> elements
+        </td>
+        <td>
+          <a href="#label-documents-and-frames">Label documents and frames</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Image elements
+        </td>
+        <td>
+          <a href="#include-text-alternatives-for-images-and-objects">
+            Include text alternatives for images and objects
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>&lt;input type="image"&gt;</code> elements
+        </td>
+        <td>
+          <a href="#include-text-alternatives-for-images-and-objects">
+            Include text alternatives for images and objects
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>&lt;object&gt;</code> elements
+        </td>
+        <td>
+          <a href="#include-text-alternatives-for-images-and-objects">
+            Include text alternatives for images and objects
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Buttons
+        </td>
+        <td>
+          <a href="#label-buttons-and-links">Label buttons and links</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Links
+        </td>
+        <td>
+          <a href="#label-buttons-and-links">Label buttons and links</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Form elements
+        </td>
+        <td>
+          <a href="#label-form-elements">Label form elements</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/component-library/tabs/tabs.json b/src/component-library/tabs/tabs.json
new file mode 100644
index 00000000000..af11d39fb2a
--- /dev/null
+++ b/src/component-library/tabs/tabs.json
@@ -0,0 +1,16 @@
+{
+  "title": "Tabs",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/web-components/_web-tabs.scss"
+    }
+  ],
+  "context": {
+    "items": [
+      "Sodales curabitur pretium",
+      "Ultricies interdum",
+      "Senectus aliquet"
+    ]
+  }
+}
diff --git a/src/component-library/tabs/tabs.md b/src/component-library/tabs/tabs.md
new file mode 100644
index 00000000000..4180cca168b
--- /dev/null
+++ b/src/component-library/tabs/tabs.md
@@ -0,0 +1,8 @@
+To change the active color, set a Custom Property value for
+`--tabs-active-color` and it will override the default, which is
+the primary color.
+
+It’s also recommended that panels passed into `<web-tabs>` have padding—
+using `pad-inline-size-1`, for example—to make them render nicely where
+JavaScript isn’t available and also, prevents us having to add unnecessary
+spacing in the `_web-tab.scss` component styles.
diff --git a/src/component-library/tabs/tabs.njk b/src/component-library/tabs/tabs.njk
new file mode 100644
index 00000000000..b8f7c4a9d8a
--- /dev/null
+++ b/src/component-library/tabs/tabs.njk
@@ -0,0 +1,8 @@
+<web-tabs>
+  {% for item in data.items %}
+  <div class="flow pad-block-size-1" data-label="{{ item }}">
+    <h2>{{ item }}</h2>
+    <p>Accumsan egestas suscipit quam hendrerit molestie ultrices vehicula bibendum nunc.</p>
+  </div>
+  {% endfor %}
+</web-tabs>
\ No newline at end of file
diff --git a/src/component-library/toc/toc.json b/src/component-library/toc/toc.json
new file mode 100644
index 00000000000..0036648852d
--- /dev/null
+++ b/src/component-library/toc/toc.json
@@ -0,0 +1,11 @@
+{
+  "title": "Generated table of contents",
+  "summary": "",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_toc.scss"
+    }
+  ],
+  "context": {}
+}
diff --git a/src/component-library/toc/toc.md b/src/component-library/toc/toc.md
new file mode 100644
index 00000000000..384296e513c
--- /dev/null
+++ b/src/component-library/toc/toc.md
@@ -0,0 +1 @@
+A consistent table of contents that is part of an article content/template that is generated.
diff --git a/src/component-library/toc/toc.njk b/src/component-library/toc/toc.njk
new file mode 100644
index 00000000000..b4ccb47a299
--- /dev/null
+++ b/src/component-library/toc/toc.njk
@@ -0,0 +1,67 @@
+<!-- MARKUP TAKEN FROM GENERATED OUTPUT -->
+<div class="toc">
+  <div class="toc__content">
+    <h2 class="toc__header">In this article</h2>
+    <ul class="toc__list">
+      <li>
+        <a href="#what-are-animations">What are animations?</a>
+        <ul class="toc__list">
+          <li><a href="#hodo-animations-work">How do animations work?</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#what-are-animation-frames">What are animation frames?</a>
+      </li>
+      <li>
+        <a href="#what-impacts-animation-frames"
+          >What impacts animation frames?</a
+        >
+      </li>
+      <li>
+        <a href="#animation-frames:-updates-that-matter"
+          >Animation frames: Updates that matter</a
+        >
+        <ul class="toc__list">
+          <li>
+            <a href="#main-and-compositor-thread-updates"
+              >Main and compositor thread updates</a
+            >
+          </li>
+          <li><a href="#missing-paint-updates" class="scroll-spy__active">Missing paint updates</a></li>
+          <li><a href="#detecting-animations">Detecting animations</a></li>
+          <li>
+            <a href="#quality-versus-quantity">Quality versus quantity</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#states-of-a-single-animation-frame"
+          >States of a single animation frame</a
+        >
+      </li>
+      <li>
+        <a href="#putting-it-all-together:-a-percent-dropped-frames-metric"
+          >Putting it all together: A Percent Dropped Frames metric</a
+        >
+      </li>
+      <li>
+        <a href="#try-it-yourself-in-developer-tooling!"
+          >Try it yourself in developer tooling!</a
+        >
+        <ul class="toc__list">
+          <li><a href="#performance-hud">Performance HUD</a></li>
+          <li><a href="#frame-rendering-stats">Frame Rendering Stats</a></li>
+          <li>
+            <a href="#frame-viewer-in-devtools-performance-profile-recordings"
+              >Frame Viewer in DevTools performance profile recordings</a
+            >
+          </li>
+          <li><a href="#chrome-tracing">Chrome tracing</a></li>
+        </ul>
+      </li>
+      <li><a href="#what's-next">What's next</a></li>
+      <li><a href="#feedback">Feedback</a></li>
+    </ul>
+    <!---->
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/component-library/toggle-switch/toggle-switch.json b/src/component-library/toggle-switch/toggle-switch.json
new file mode 100644
index 00000000000..8aa6b714b2f
--- /dev/null
+++ b/src/component-library/toggle-switch/toggle-switch.json
@@ -0,0 +1,21 @@
+{
+  "title": "Toggle Switch",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_toggle-switch.scss"
+    }
+  ],
+  "context": {
+    "label": "Dark theme",
+    "inputId": "toggle-switch"
+  },
+  "variants": [
+    {
+      "name": "Hidden label",
+      "context": {
+        "hiddenLabel": true
+      }
+    }
+  ]
+}
diff --git a/src/component-library/toggle-switch/toggle-switch.md b/src/component-library/toggle-switch/toggle-switch.md
new file mode 100644
index 00000000000..24469c621c8
--- /dev/null
+++ b/src/component-library/toggle-switch/toggle-switch.md
@@ -0,0 +1,11 @@
+The toggle switch extends a standard checkbox by adding a `switch` role and
+switch-like decorative styling.
+
+It's really important that the input (`toggle-switch__input`) sits **before**
+the decor (`toggle-switch__decor`) because the Sass block uses [next sibling
+combinator selectors]
+(/learn/css/selectors/#next-sibling-combinator) to create
+visual state changes.
+
+You can visually hide the text label with the `visually-hidden` utility, but
+this pattern **must** contain one for accessibility purposes.
diff --git a/src/component-library/toggle-switch/toggle-switch.njk b/src/component-library/toggle-switch/toggle-switch.njk
new file mode 100644
index 00000000000..0fa68dd2d21
--- /dev/null
+++ b/src/component-library/toggle-switch/toggle-switch.njk
@@ -0,0 +1,7 @@
+<label class="toggle-switch" for="{{ data.inputId }}">
+  <span class="toggle-switch__label {{ 'visually-hidden' if data.hiddenLabel }}">{{ data.label }}</span>
+  <input type="checkbox" role="switch" class="toggle-switch__input" id="{{ data.inputId }}" />
+  <div class="toggle-switch__decor focus-ring" aria-hidden="true">
+    <div class="toggle-switch__thumb"></div>
+  </div>
+</label>
\ No newline at end of file
diff --git a/src/component-library/tooltips/tooltips.json b/src/component-library/tooltips/tooltips.json
new file mode 100644
index 00000000000..ca5c3fe5999
--- /dev/null
+++ b/src/component-library/tooltips/tooltips.json
@@ -0,0 +1,33 @@
+{
+  "title": "Tooltips",
+  "summary": "Use tooltips to provide information about UI controls that are too small to have a label.",
+  "extraSampleCSS": ".tooltip { margin-block: 3rem; margin-inline: auto; }",
+  "keyLinks": [
+    {
+      "label": "Sass File",
+      "url": "https://github.com/GoogleChrome/web.dev/tree/main/src/scss/blocks/_tooltip.scss"
+    }
+  ],
+  "context": {
+    "tooltip": "Standard alignment",
+    "tooltipID": "mytooltip"
+  },
+  "variants": [
+    {
+      "name": "left-aligned",
+      "title": "Left aligned",
+      "context": {
+        "tooltip": "Left aligment",
+        "modifier": "left"
+      }
+    },
+    {
+      "name": "right-aligned",
+      "title": "Right aligned",
+      "context": {
+        "tooltip": "Right aligment",
+        "modifier": "right"
+      }
+    }
+  ]
+}
diff --git a/src/component-library/tooltips/tooltips.md b/src/component-library/tooltips/tooltips.md
new file mode 100644
index 00000000000..de00235a6bf
--- /dev/null
+++ b/src/component-library/tooltips/tooltips.md
@@ -0,0 +1 @@
+Tooltips use `position: absolute`, so it's crucial that the element that your tooltip is assigned to has plenty of space around it.
diff --git a/src/component-library/tooltips/tooltips.njk b/src/component-library/tooltips/tooltips.njk
new file mode 100644
index 00000000000..d226f00a55e
--- /dev/null
+++ b/src/component-library/tooltips/tooltips.njk
@@ -0,0 +1,6 @@
+<div class="tooltip" data-alignment="{{ data.modifier }}">
+  <button class="fab" aria-labelledby="{{ data.tooltipID }}">
+    {% include "icons/plus.svg" %}  
+  </button>
+  <span class="tooltip__content" role="tooltip" id="{{ data.tooltipID }}">{{ data.tooltip }}</span>
+</div>
\ No newline at end of file
diff --git a/src/fonts/google-sans/bold/cyrillic.woff2 b/src/fonts/google-sans/bold/cyrillic.woff2
new file mode 100644
index 00000000000..bd5e0fbb3e2
Binary files /dev/null and b/src/fonts/google-sans/bold/cyrillic.woff2 differ
diff --git a/src/fonts/google-sans/bold/greek.woff2 b/src/fonts/google-sans/bold/greek.woff2
new file mode 100644
index 00000000000..31d76c59b76
Binary files /dev/null and b/src/fonts/google-sans/bold/greek.woff2 differ
diff --git a/src/fonts/google-sans/bold/latin-ext.woff2 b/src/fonts/google-sans/bold/latin-ext.woff2
new file mode 100644
index 00000000000..7b7e987bfaf
Binary files /dev/null and b/src/fonts/google-sans/bold/latin-ext.woff2 differ
diff --git a/src/fonts/google-sans/bold/latin.woff2 b/src/fonts/google-sans/bold/latin.woff2
new file mode 100644
index 00000000000..cd76c558553
Binary files /dev/null and b/src/fonts/google-sans/bold/latin.woff2 differ
diff --git a/src/fonts/google-sans/bold/vietnamese.woff2 b/src/fonts/google-sans/bold/vietnamese.woff2
new file mode 100644
index 00000000000..6fdde1a6f5f
Binary files /dev/null and b/src/fonts/google-sans/bold/vietnamese.woff2 differ
diff --git a/src/fonts/google-sans/regular/cyrillic.woff2 b/src/fonts/google-sans/regular/cyrillic.woff2
new file mode 100644
index 00000000000..21e1fca365d
Binary files /dev/null and b/src/fonts/google-sans/regular/cyrillic.woff2 differ
diff --git a/src/fonts/google-sans/regular/greek.woff2 b/src/fonts/google-sans/regular/greek.woff2
new file mode 100644
index 00000000000..ff13fb8f924
Binary files /dev/null and b/src/fonts/google-sans/regular/greek.woff2 differ
diff --git a/src/fonts/google-sans/regular/latin-ext.woff2 b/src/fonts/google-sans/regular/latin-ext.woff2
new file mode 100644
index 00000000000..2b545f5d241
Binary files /dev/null and b/src/fonts/google-sans/regular/latin-ext.woff2 differ
diff --git a/src/fonts/google-sans/regular/latin.woff2 b/src/fonts/google-sans/regular/latin.woff2
new file mode 100644
index 00000000000..f8ab3e45f4d
Binary files /dev/null and b/src/fonts/google-sans/regular/latin.woff2 differ
diff --git a/src/fonts/google-sans/regular/vietnamese.woff2 b/src/fonts/google-sans/regular/vietnamese.woff2
new file mode 100644
index 00000000000..fb35f96651a
Binary files /dev/null and b/src/fonts/google-sans/regular/vietnamese.woff2 differ
diff --git a/src/fonts/material-icons/regular.woff2 b/src/fonts/material-icons/regular.woff2
new file mode 100644
index 00000000000..9fa21125208
Binary files /dev/null and b/src/fonts/material-icons/regular.woff2 differ
diff --git a/src/images/android-chrome-192x192.png b/src/images/android-chrome-192x192.png
index cbd9ba269bd..b2d7d876faf 100644
Binary files a/src/images/android-chrome-192x192.png and b/src/images/android-chrome-192x192.png differ
diff --git a/src/images/android-chrome-512x512.png b/src/images/android-chrome-512x512.png
index 576372bbb1e..c17581bd3db 100644
Binary files a/src/images/android-chrome-512x512.png and b/src/images/android-chrome-512x512.png differ
diff --git a/src/images/android-chrome-maskable-192x192.png b/src/images/android-chrome-maskable-192x192.png
new file mode 100644
index 00000000000..b2d7d876faf
Binary files /dev/null and b/src/images/android-chrome-maskable-192x192.png differ
diff --git a/src/images/apple-touch-icon.png b/src/images/apple-touch-icon.png
index 5ccf096bff1..48cbaffe443 100644
Binary files a/src/images/apple-touch-icon.png and b/src/images/apple-touch-icon.png differ
diff --git a/src/images/authors/abdshomad.jpg b/src/images/authors/abdshomad.jpg
deleted file mode 100644
index 08c73e77296..00000000000
Binary files a/src/images/authors/abdshomad.jpg and /dev/null differ
diff --git a/src/images/authors/abdshomad@2x.jpg b/src/images/authors/abdshomad@2x.jpg
deleted file mode 100644
index 057d7faf9c2..00000000000
Binary files a/src/images/authors/abdshomad@2x.jpg and /dev/null differ
diff --git a/src/images/authors/adamargyle.jpg b/src/images/authors/adamargyle.jpg
deleted file mode 100644
index 954724f1cdd..00000000000
Binary files a/src/images/authors/adamargyle.jpg and /dev/null differ
diff --git a/src/images/authors/adamargyle@2x.jpg b/src/images/authors/adamargyle@2x.jpg
deleted file mode 100644
index bad8b7bc545..00000000000
Binary files a/src/images/authors/adamargyle@2x.jpg and /dev/null differ
diff --git a/src/images/authors/addyosmani.jpg b/src/images/authors/addyosmani.jpg
deleted file mode 100644
index 816f49b33de..00000000000
Binary files a/src/images/authors/addyosmani.jpg and /dev/null differ
diff --git a/src/images/authors/addyosmani@2x.jpg b/src/images/authors/addyosmani@2x.jpg
deleted file mode 100644
index f4ec47f8bad..00000000000
Binary files a/src/images/authors/addyosmani@2x.jpg and /dev/null differ
diff --git a/src/images/authors/agektmr.jpg b/src/images/authors/agektmr.jpg
deleted file mode 100644
index 3ccc2dfa63e..00000000000
Binary files a/src/images/authors/agektmr.jpg and /dev/null differ
diff --git a/src/images/authors/agektmr@2x.jpg b/src/images/authors/agektmr@2x.jpg
deleted file mode 100644
index 983a194b47c..00000000000
Binary files a/src/images/authors/agektmr@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ahmadawais.jpg b/src/images/authors/ahmadawais.jpg
deleted file mode 100644
index d4a6afa83f4..00000000000
Binary files a/src/images/authors/ahmadawais.jpg and /dev/null differ
diff --git a/src/images/authors/ahmadawais@2x.jpg b/src/images/authors/ahmadawais@2x.jpg
deleted file mode 100644
index d4a6afa83f4..00000000000
Binary files a/src/images/authors/ahmadawais@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ajain.jpg b/src/images/authors/ajain.jpg
deleted file mode 100644
index 2c5554f8aee..00000000000
Binary files a/src/images/authors/ajain.jpg and /dev/null differ
diff --git a/src/images/authors/ajain@2x.jpg b/src/images/authors/ajain@2x.jpg
deleted file mode 100644
index f7f72478ecb..00000000000
Binary files a/src/images/authors/ajain@2x.jpg and /dev/null differ
diff --git a/src/images/authors/aleshalamov.jpg b/src/images/authors/aleshalamov.jpg
deleted file mode 100644
index fd4f07969d1..00000000000
Binary files a/src/images/authors/aleshalamov.jpg and /dev/null differ
diff --git a/src/images/authors/aleshalamov@2x.jpg b/src/images/authors/aleshalamov@2x.jpg
deleted file mode 100644
index 36d404fbcd3..00000000000
Binary files a/src/images/authors/aleshalamov@2x.jpg and /dev/null differ
diff --git a/src/images/authors/alexdanilo.jpg b/src/images/authors/alexdanilo.jpg
deleted file mode 100644
index 1c20fb016a3..00000000000
Binary files a/src/images/authors/alexdanilo.jpg and /dev/null differ
diff --git a/src/images/authors/alexdanilo@2x.jpg b/src/images/authors/alexdanilo@2x.jpg
deleted file mode 100644
index 474ed7e2bc3..00000000000
Binary files a/src/images/authors/alexdanilo@2x.jpg and /dev/null differ
diff --git a/src/images/authors/aliceboxhall.jpg b/src/images/authors/aliceboxhall.jpg
deleted file mode 100644
index 24736f5e5aa..00000000000
Binary files a/src/images/authors/aliceboxhall.jpg and /dev/null differ
diff --git a/src/images/authors/aliceboxhall@2x.jpg b/src/images/authors/aliceboxhall@2x.jpg
deleted file mode 100644
index 41cc0881940..00000000000
Binary files a/src/images/authors/aliceboxhall@2x.jpg and /dev/null differ
diff --git a/src/images/authors/alsan.jpg b/src/images/authors/alsan.jpg
deleted file mode 100644
index bd0948f9ad6..00000000000
Binary files a/src/images/authors/alsan.jpg and /dev/null differ
diff --git a/src/images/authors/alsan@2x.jpg b/src/images/authors/alsan@2x.jpg
deleted file mode 100644
index a4f723d4e44..00000000000
Binary files a/src/images/authors/alsan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/andismith.jpg b/src/images/authors/andismith.jpg
deleted file mode 100644
index 0e9ef56b8a3..00000000000
Binary files a/src/images/authors/andismith.jpg and /dev/null differ
diff --git a/src/images/authors/andismith@2x.jpg b/src/images/authors/andismith@2x.jpg
deleted file mode 100644
index 9abb6dfd244..00000000000
Binary files a/src/images/authors/andismith@2x.jpg and /dev/null differ
diff --git a/src/images/authors/andreban.jpg b/src/images/authors/andreban.jpg
deleted file mode 100644
index 820d2a05944..00000000000
Binary files a/src/images/authors/andreban.jpg and /dev/null differ
diff --git a/src/images/authors/andreban@2x.jpg b/src/images/authors/andreban@2x.jpg
deleted file mode 100644
index b5e6e41a28e..00000000000
Binary files a/src/images/authors/andreban@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ansteychris.jpg b/src/images/authors/ansteychris.jpg
deleted file mode 100644
index ec46f3b07a6..00000000000
Binary files a/src/images/authors/ansteychris.jpg and /dev/null differ
diff --git a/src/images/authors/ansteychris@2x.jpg b/src/images/authors/ansteychris@2x.jpg
deleted file mode 100644
index 7bfababb403..00000000000
Binary files a/src/images/authors/ansteychris@2x.jpg and /dev/null differ
diff --git a/src/images/authors/antonkarlovskiy.jpg b/src/images/authors/antonkarlovskiy.jpg
deleted file mode 100644
index 21308d881f5..00000000000
Binary files a/src/images/authors/antonkarlovskiy.jpg and /dev/null differ
diff --git a/src/images/authors/antonkarlovskiy@2x.jpg b/src/images/authors/antonkarlovskiy@2x.jpg
deleted file mode 100644
index 073dd6015a4..00000000000
Binary files a/src/images/authors/antonkarlovskiy@2x.jpg and /dev/null differ
diff --git a/src/images/authors/arthurevans.jpg b/src/images/authors/arthurevans.jpg
deleted file mode 100644
index 632e2a9d2c9..00000000000
Binary files a/src/images/authors/arthurevans.jpg and /dev/null differ
diff --git a/src/images/authors/arthurevans@2x.jpg b/src/images/authors/arthurevans@2x.jpg
deleted file mode 100644
index bb3587ffd16..00000000000
Binary files a/src/images/authors/arthurevans@2x.jpg and /dev/null differ
diff --git a/src/images/authors/beaufortfrancois.jpg b/src/images/authors/beaufortfrancois.jpg
deleted file mode 100644
index 518355b3d9c..00000000000
Binary files a/src/images/authors/beaufortfrancois.jpg and /dev/null differ
diff --git a/src/images/authors/beaufortfrancois@2x.jpg b/src/images/authors/beaufortfrancois@2x.jpg
deleted file mode 100644
index 92c0cafe2dd..00000000000
Binary files a/src/images/authors/beaufortfrancois@2x.jpg and /dev/null differ
diff --git a/src/images/authors/bmcquade.jpg b/src/images/authors/bmcquade.jpg
deleted file mode 100644
index b18810d2bad..00000000000
Binary files a/src/images/authors/bmcquade.jpg and /dev/null differ
diff --git a/src/images/authors/bmcquade@2x.jpg b/src/images/authors/bmcquade@2x.jpg
deleted file mode 100644
index 5079a177e6f..00000000000
Binary files a/src/images/authors/bmcquade@2x.jpg and /dev/null differ
diff --git a/src/images/authors/bojanpavic.jpg b/src/images/authors/bojanpavic.jpg
deleted file mode 100644
index 0dbb1f3a1da..00000000000
Binary files a/src/images/authors/bojanpavic.jpg and /dev/null differ
diff --git a/src/images/authors/bojanpavic@2x.jpg b/src/images/authors/bojanpavic@2x.jpg
deleted file mode 100644
index 4e5199f8b90..00000000000
Binary files a/src/images/authors/bojanpavic@2x.jpg and /dev/null differ
diff --git a/src/images/authors/bokan.jpg b/src/images/authors/bokan.jpg
deleted file mode 100644
index cfd0219a66f..00000000000
Binary files a/src/images/authors/bokan.jpg and /dev/null differ
diff --git a/src/images/authors/bokan@2x.jpg b/src/images/authors/bokan@2x.jpg
deleted file mode 100644
index 607d258ff2b..00000000000
Binary files a/src/images/authors/bokan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/borissmus.jpg b/src/images/authors/borissmus.jpg
deleted file mode 100644
index e654db95839..00000000000
Binary files a/src/images/authors/borissmus.jpg and /dev/null differ
diff --git a/src/images/authors/borissmus@2x.jpg b/src/images/authors/borissmus@2x.jpg
deleted file mode 100644
index e7996a78bb5..00000000000
Binary files a/src/images/authors/borissmus@2x.jpg and /dev/null differ
diff --git a/src/images/authors/bpj.jpg b/src/images/authors/bpj.jpg
deleted file mode 100644
index 89f164f431d..00000000000
Binary files a/src/images/authors/bpj.jpg and /dev/null differ
diff --git a/src/images/authors/bpj@2x.jpg b/src/images/authors/bpj@2x.jpg
deleted file mode 100644
index 747b3107183..00000000000
Binary files a/src/images/authors/bpj@2x.jpg and /dev/null differ
diff --git a/src/images/authors/brendankenny.jpg b/src/images/authors/brendankenny.jpg
deleted file mode 100644
index 5803a43929c..00000000000
Binary files a/src/images/authors/brendankenny.jpg and /dev/null differ
diff --git a/src/images/authors/brendankenny@2x.jpg b/src/images/authors/brendankenny@2x.jpg
deleted file mode 100644
index 71901b77d86..00000000000
Binary files a/src/images/authors/brendankenny@2x.jpg and /dev/null differ
diff --git a/src/images/authors/captainpangyo.jpg b/src/images/authors/captainpangyo.jpg
deleted file mode 100644
index 4355647110a..00000000000
Binary files a/src/images/authors/captainpangyo.jpg and /dev/null differ
diff --git a/src/images/authors/captainpangyo@2x.jpg b/src/images/authors/captainpangyo@2x.jpg
deleted file mode 100644
index 0d220014bff..00000000000
Binary files a/src/images/authors/captainpangyo@2x.jpg and /dev/null differ
diff --git a/src/images/authors/cbrand.jpg b/src/images/authors/cbrand.jpg
deleted file mode 100644
index 1d7b9b1fc38..00000000000
Binary files a/src/images/authors/cbrand.jpg and /dev/null differ
diff --git a/src/images/authors/cbrand@2x.jpg b/src/images/authors/cbrand@2x.jpg
deleted file mode 100644
index 2d3731c113f..00000000000
Binary files a/src/images/authors/cbrand@2x.jpg and /dev/null differ
diff --git a/src/images/authors/chriswilson.jpg b/src/images/authors/chriswilson.jpg
deleted file mode 100644
index 8bb96b2dc3f..00000000000
Binary files a/src/images/authors/chriswilson.jpg and /dev/null differ
diff --git a/src/images/authors/chriswilson@2x.jpg b/src/images/authors/chriswilson@2x.jpg
deleted file mode 100644
index 95a4b85d24f..00000000000
Binary files a/src/images/authors/chriswilson@2x.jpg and /dev/null differ
diff --git a/src/images/authors/cjamcl.jpg b/src/images/authors/cjamcl.jpg
deleted file mode 100644
index 53a053ca111..00000000000
Binary files a/src/images/authors/cjamcl.jpg and /dev/null differ
diff --git a/src/images/authors/cjamcl@2x.jpg b/src/images/authors/cjamcl@2x.jpg
deleted file mode 100644
index 07af7efdb24..00000000000
Binary files a/src/images/authors/cjamcl@2x.jpg and /dev/null differ
diff --git a/src/images/authors/crystallambert.jpg b/src/images/authors/crystallambert.jpg
deleted file mode 100644
index 7c2785cebcf..00000000000
Binary files a/src/images/authors/crystallambert.jpg and /dev/null differ
diff --git a/src/images/authors/crystallambert@2x.jpg b/src/images/authors/crystallambert@2x.jpg
deleted file mode 100644
index 80a89853d30..00000000000
Binary files a/src/images/authors/crystallambert@2x.jpg and /dev/null differ
diff --git a/src/images/authors/cwdoh.jpg b/src/images/authors/cwdoh.jpg
deleted file mode 100644
index ad6567a9ed5..00000000000
Binary files a/src/images/authors/cwdoh.jpg and /dev/null differ
diff --git a/src/images/authors/cwdoh@2x.jpg b/src/images/authors/cwdoh@2x.jpg
deleted file mode 100644
index 8d672add434..00000000000
Binary files a/src/images/authors/cwdoh@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dalecurtis.jpg b/src/images/authors/dalecurtis.jpg
deleted file mode 100644
index f204d286268..00000000000
Binary files a/src/images/authors/dalecurtis.jpg and /dev/null differ
diff --git a/src/images/authors/dalecurtis@2x.jpg b/src/images/authors/dalecurtis@2x.jpg
deleted file mode 100644
index 108f5663fc8..00000000000
Binary files a/src/images/authors/dalecurtis@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dalmaer.jpg b/src/images/authors/dalmaer.jpg
deleted file mode 100644
index 4118967fbb8..00000000000
Binary files a/src/images/authors/dalmaer.jpg and /dev/null differ
diff --git a/src/images/authors/dalmaer@2x.jpg b/src/images/authors/dalmaer@2x.jpg
deleted file mode 100644
index 09adca125ff..00000000000
Binary files a/src/images/authors/dalmaer@2x.jpg and /dev/null differ
diff --git a/src/images/authors/danyao.jpg b/src/images/authors/danyao.jpg
deleted file mode 100644
index 53a6dc02410..00000000000
Binary files a/src/images/authors/danyao.jpg and /dev/null differ
diff --git a/src/images/authors/danyao@2x.jpg b/src/images/authors/danyao@2x.jpg
deleted file mode 100644
index 05acc3154a8..00000000000
Binary files a/src/images/authors/danyao@2x.jpg and /dev/null differ
diff --git a/src/images/authors/demianrenzulli.jpg b/src/images/authors/demianrenzulli.jpg
deleted file mode 100644
index 648548aec3a..00000000000
Binary files a/src/images/authors/demianrenzulli.jpg and /dev/null differ
diff --git a/src/images/authors/demianrenzulli@2x.jpg b/src/images/authors/demianrenzulli@2x.jpg
deleted file mode 100644
index 4d472d94b56..00000000000
Binary files a/src/images/authors/demianrenzulli@2x.jpg and /dev/null differ
diff --git a/src/images/authors/developit.jpg b/src/images/authors/developit.jpg
deleted file mode 100644
index 011230d6ad6..00000000000
Binary files a/src/images/authors/developit.jpg and /dev/null differ
diff --git a/src/images/authors/developit@2x.jpg b/src/images/authors/developit@2x.jpg
deleted file mode 100644
index 4252824b741..00000000000
Binary files a/src/images/authors/developit@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dgash.jpg b/src/images/authors/dgash.jpg
deleted file mode 100644
index dbb93e86aa3..00000000000
Binary files a/src/images/authors/dgash.jpg and /dev/null differ
diff --git a/src/images/authors/dgash@2x.jpg b/src/images/authors/dgash@2x.jpg
deleted file mode 100644
index 5c3bcc733e3..00000000000
Binary files a/src/images/authors/dgash@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dgrogan.jpg b/src/images/authors/dgrogan.jpg
deleted file mode 100644
index f186d67cfbd..00000000000
Binary files a/src/images/authors/dgrogan.jpg and /dev/null differ
diff --git a/src/images/authors/dgrogan@2x.jpg b/src/images/authors/dgrogan@2x.jpg
deleted file mode 100644
index 998da0fcaef..00000000000
Binary files a/src/images/authors/dgrogan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dmitryskripunov.jpg b/src/images/authors/dmitryskripunov.jpg
deleted file mode 100644
index 838083a842a..00000000000
Binary files a/src/images/authors/dmitryskripunov.jpg and /dev/null differ
diff --git a/src/images/authors/dmitryskripunov@2x.jpg b/src/images/authors/dmitryskripunov@2x.jpg
deleted file mode 100644
index 61af81e5a1b..00000000000
Binary files a/src/images/authors/dmitryskripunov@2x.jpg and /dev/null differ
diff --git a/src/images/authors/domenic.jpg b/src/images/authors/domenic.jpg
deleted file mode 100644
index b6d7ac3f16e..00000000000
Binary files a/src/images/authors/domenic.jpg and /dev/null differ
diff --git a/src/images/authors/domenic@2x.jpg b/src/images/authors/domenic@2x.jpg
deleted file mode 100644
index e6e1afe9434..00000000000
Binary files a/src/images/authors/domenic@2x.jpg and /dev/null differ
diff --git a/src/images/authors/douglasparker.jpg b/src/images/authors/douglasparker.jpg
deleted file mode 100644
index 21b851c9919..00000000000
Binary files a/src/images/authors/douglasparker.jpg and /dev/null differ
diff --git a/src/images/authors/douglasparker@2x.jpg b/src/images/authors/douglasparker@2x.jpg
deleted file mode 100644
index 95c2af01aad..00000000000
Binary files a/src/images/authors/douglasparker@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dougsillars.jpg b/src/images/authors/dougsillars.jpg
deleted file mode 100644
index da9ac18ba92..00000000000
Binary files a/src/images/authors/dougsillars.jpg and /dev/null differ
diff --git a/src/images/authors/dougsillars@2x.jpg b/src/images/authors/dougsillars@2x.jpg
deleted file mode 100644
index 629608bcf83..00000000000
Binary files a/src/images/authors/dougsillars@2x.jpg and /dev/null differ
diff --git a/src/images/authors/drott.jpg b/src/images/authors/drott.jpg
deleted file mode 100644
index 374e4632dbd..00000000000
Binary files a/src/images/authors/drott.jpg and /dev/null differ
diff --git a/src/images/authors/drott@2x.jpg b/src/images/authors/drott@2x.jpg
deleted file mode 100644
index 877e32a6546..00000000000
Binary files a/src/images/authors/drott@2x.jpg and /dev/null differ
diff --git a/src/images/authors/dtapuska.jpg b/src/images/authors/dtapuska.jpg
deleted file mode 100644
index 672ac4586c1..00000000000
Binary files a/src/images/authors/dtapuska.jpg and /dev/null differ
diff --git a/src/images/authors/dtapuska@2x.jpg b/src/images/authors/dtapuska@2x.jpg
deleted file mode 100644
index c7f65df587a..00000000000
Binary files a/src/images/authors/dtapuska@2x.jpg and /dev/null differ
diff --git a/src/images/authors/durgapandey.jpg b/src/images/authors/durgapandey.jpg
deleted file mode 100644
index a24a77803be..00000000000
Binary files a/src/images/authors/durgapandey.jpg and /dev/null differ
diff --git a/src/images/authors/durgapandey@2x.jpg b/src/images/authors/durgapandey@2x.jpg
deleted file mode 100644
index 22906116b84..00000000000
Binary files a/src/images/authors/durgapandey@2x.jpg and /dev/null differ
diff --git a/src/images/authors/egsweeny.jpg b/src/images/authors/egsweeny.jpg
deleted file mode 100644
index f03a9ba17b3..00000000000
Binary files a/src/images/authors/egsweeny.jpg and /dev/null differ
diff --git a/src/images/authors/egsweeny@2x.jpg b/src/images/authors/egsweeny@2x.jpg
deleted file mode 100644
index 1da75539011..00000000000
Binary files a/src/images/authors/egsweeny@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ekharvey.jpg b/src/images/authors/ekharvey.jpg
deleted file mode 100644
index 8789be8412e..00000000000
Binary files a/src/images/authors/ekharvey.jpg and /dev/null differ
diff --git a/src/images/authors/ekharvey@2x.jpg b/src/images/authors/ekharvey@2x.jpg
deleted file mode 100644
index 109aa3de4cc..00000000000
Binary files a/src/images/authors/ekharvey@2x.jpg and /dev/null differ
diff --git a/src/images/authors/emilystark.jpg b/src/images/authors/emilystark.jpg
deleted file mode 100644
index 4b249ad30bd..00000000000
Binary files a/src/images/authors/emilystark.jpg and /dev/null differ
diff --git a/src/images/authors/emilystark@2x.jpg b/src/images/authors/emilystark@2x.jpg
deleted file mode 100644
index 3a9313651b8..00000000000
Binary files a/src/images/authors/emilystark@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ericbidelman.jpg b/src/images/authors/ericbidelman.jpg
deleted file mode 100644
index 9c2f8e5eef4..00000000000
Binary files a/src/images/authors/ericbidelman.jpg and /dev/null differ
diff --git a/src/images/authors/ericbidelman@2x.jpg b/src/images/authors/ericbidelman@2x.jpg
deleted file mode 100644
index 21c4b3aed87..00000000000
Binary files a/src/images/authors/ericbidelman@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ericlawrence.jpg b/src/images/authors/ericlawrence.jpg
deleted file mode 100644
index 8a7f781846e..00000000000
Binary files a/src/images/authors/ericlawrence.jpg and /dev/null differ
diff --git a/src/images/authors/ericlawrence@2x.jpg b/src/images/authors/ericlawrence@2x.jpg
deleted file mode 100644
index 0427cca1d5b..00000000000
Binary files a/src/images/authors/ericlawrence@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ewagasperowicz.jpg b/src/images/authors/ewagasperowicz.jpg
deleted file mode 100644
index d4b13c31b01..00000000000
Binary files a/src/images/authors/ewagasperowicz.jpg and /dev/null differ
diff --git a/src/images/authors/ewagasperowicz@2x.jpg b/src/images/authors/ewagasperowicz@2x.jpg
deleted file mode 100644
index 4b5d89fb460..00000000000
Binary files a/src/images/authors/ewagasperowicz@2x.jpg and /dev/null differ
diff --git a/src/images/authors/exterkamp.jpg b/src/images/authors/exterkamp.jpg
deleted file mode 100644
index 18d61b5f346..00000000000
Binary files a/src/images/authors/exterkamp.jpg and /dev/null differ
diff --git a/src/images/authors/exterkamp@2x.jpg b/src/images/authors/exterkamp@2x.jpg
deleted file mode 100644
index bdfd4445ad4..00000000000
Binary files a/src/images/authors/exterkamp@2x.jpg and /dev/null differ
diff --git a/src/images/authors/flaviocopes.jpg b/src/images/authors/flaviocopes.jpg
deleted file mode 100644
index bed58604975..00000000000
Binary files a/src/images/authors/flaviocopes.jpg and /dev/null differ
diff --git a/src/images/authors/flaviocopes@2x.jpg b/src/images/authors/flaviocopes@2x.jpg
deleted file mode 100644
index 9423c6bb26e..00000000000
Binary files a/src/images/authors/flaviocopes@2x.jpg and /dev/null differ
diff --git a/src/images/authors/franktang.jpg b/src/images/authors/franktang.jpg
deleted file mode 100644
index 1c92cbc73bc..00000000000
Binary files a/src/images/authors/franktang.jpg and /dev/null differ
diff --git a/src/images/authors/franktang@2x.jpg b/src/images/authors/franktang@2x.jpg
deleted file mode 100644
index ad31769b9df..00000000000
Binary files a/src/images/authors/franktang@2x.jpg and /dev/null differ
diff --git a/src/images/authors/geddski.jpg b/src/images/authors/geddski.jpg
deleted file mode 100644
index d9e0f9ef3aa..00000000000
Binary files a/src/images/authors/geddski.jpg and /dev/null differ
diff --git a/src/images/authors/geddski@2x.jpg b/src/images/authors/geddski@2x.jpg
deleted file mode 100644
index 506ab0876c5..00000000000
Binary files a/src/images/authors/geddski@2x.jpg and /dev/null differ
diff --git a/src/images/authors/gernberg.jpg b/src/images/authors/gernberg.jpg
deleted file mode 100644
index ebd2fe3ecbd..00000000000
Binary files a/src/images/authors/gernberg.jpg and /dev/null differ
diff --git a/src/images/authors/gernberg@2x.jpg b/src/images/authors/gernberg@2x.jpg
deleted file mode 100644
index 25921ca5eca..00000000000
Binary files a/src/images/authors/gernberg@2x.jpg and /dev/null differ
diff --git a/src/images/authors/gilbertococchi.jpg b/src/images/authors/gilbertococchi.jpg
deleted file mode 100644
index 2ef0d04e967..00000000000
Binary files a/src/images/authors/gilbertococchi.jpg and /dev/null differ
diff --git a/src/images/authors/gilbertococchi@2x.jpg b/src/images/authors/gilbertococchi@2x.jpg
deleted file mode 100644
index 4b8445afe2f..00000000000
Binary files a/src/images/authors/gilbertococchi@2x.jpg and /dev/null differ
diff --git a/src/images/authors/glenshires.jpg b/src/images/authors/glenshires.jpg
deleted file mode 100644
index d7e1ea72e8a..00000000000
Binary files a/src/images/authors/glenshires.jpg and /dev/null differ
diff --git a/src/images/authors/glenshires@2x.jpg b/src/images/authors/glenshires@2x.jpg
deleted file mode 100644
index 3b75cb4b481..00000000000
Binary files a/src/images/authors/glenshires@2x.jpg and /dev/null differ
diff --git a/src/images/authors/gmimani.jpg b/src/images/authors/gmimani.jpg
deleted file mode 100644
index 2c6b0cdf787..00000000000
Binary files a/src/images/authors/gmimani.jpg and /dev/null differ
diff --git a/src/images/authors/gmimani@2x.jpg b/src/images/authors/gmimani@2x.jpg
deleted file mode 100644
index 01184a7e810..00000000000
Binary files a/src/images/authors/gmimani@2x.jpg and /dev/null differ
diff --git a/src/images/authors/greenido.jpg b/src/images/authors/greenido.jpg
deleted file mode 100644
index c7923a02f33..00000000000
Binary files a/src/images/authors/greenido.jpg and /dev/null differ
diff --git a/src/images/authors/greenido@2x.jpg b/src/images/authors/greenido@2x.jpg
deleted file mode 100644
index 7816673cf4f..00000000000
Binary files a/src/images/authors/greenido@2x.jpg and /dev/null differ
diff --git a/src/images/authors/hbatra.jpg b/src/images/authors/hbatra.jpg
deleted file mode 100644
index 9aafa1af95f..00000000000
Binary files a/src/images/authors/hbatra.jpg and /dev/null differ
diff --git a/src/images/authors/hbatra@2x.jpg b/src/images/authors/hbatra@2x.jpg
deleted file mode 100644
index dd36efc86f3..00000000000
Binary files a/src/images/authors/hbatra@2x.jpg and /dev/null differ
diff --git a/src/images/authors/heathermahan.jpg b/src/images/authors/heathermahan.jpg
deleted file mode 100644
index e72f9ef3c4c..00000000000
Binary files a/src/images/authors/heathermahan.jpg and /dev/null differ
diff --git a/src/images/authors/heathermahan@2x.jpg b/src/images/authors/heathermahan@2x.jpg
deleted file mode 100644
index 8438247fe5d..00000000000
Binary files a/src/images/authors/heathermahan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/henrylim.jpg b/src/images/authors/henrylim.jpg
deleted file mode 100644
index b1931c4f7b2..00000000000
Binary files a/src/images/authors/henrylim.jpg and /dev/null differ
diff --git a/src/images/authors/henrylim@2x.jpg b/src/images/authors/henrylim@2x.jpg
deleted file mode 100644
index d083ad2f37f..00000000000
Binary files a/src/images/authors/henrylim@2x.jpg and /dev/null differ
diff --git a/src/images/authors/hongchanchoi.jpg b/src/images/authors/hongchanchoi.jpg
deleted file mode 100644
index 23859eb5d04..00000000000
Binary files a/src/images/authors/hongchanchoi.jpg and /dev/null differ
diff --git a/src/images/authors/hongchanchoi@2x.jpg b/src/images/authors/hongchanchoi@2x.jpg
deleted file mode 100644
index 8bafb8bb2d1..00000000000
Binary files a/src/images/authors/hongchanchoi@2x.jpg and /dev/null differ
diff --git a/src/images/authors/houssein.jpg b/src/images/authors/houssein.jpg
deleted file mode 100644
index e74ef406143..00000000000
Binary files a/src/images/authors/houssein.jpg and /dev/null differ
diff --git a/src/images/authors/houssein@2x.jpg b/src/images/authors/houssein@2x.jpg
deleted file mode 100644
index e4a9e8421b7..00000000000
Binary files a/src/images/authors/houssein@2x.jpg and /dev/null differ
diff --git a/src/images/authors/iamakulov.jpg b/src/images/authors/iamakulov.jpg
deleted file mode 100644
index 827f2b5e7f9..00000000000
Binary files a/src/images/authors/iamakulov.jpg and /dev/null differ
diff --git a/src/images/authors/iamakulov@2x.jpg b/src/images/authors/iamakulov@2x.jpg
deleted file mode 100644
index 357b7d7e855..00000000000
Binary files a/src/images/authors/iamakulov@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ianbarber.jpg b/src/images/authors/ianbarber.jpg
deleted file mode 100644
index 9384a7975d8..00000000000
Binary files a/src/images/authors/ianbarber.jpg and /dev/null differ
diff --git a/src/images/authors/ianbarber@2x.jpg b/src/images/authors/ianbarber@2x.jpg
deleted file mode 100644
index 66c21fc2b16..00000000000
Binary files a/src/images/authors/ianbarber@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ilmariheikkinen.jpg b/src/images/authors/ilmariheikkinen.jpg
deleted file mode 100644
index 8fdf512eb55..00000000000
Binary files a/src/images/authors/ilmariheikkinen.jpg and /dev/null differ
diff --git a/src/images/authors/ilmariheikkinen@2x.jpg b/src/images/authors/ilmariheikkinen@2x.jpg
deleted file mode 100644
index 1ba9e8c7aa2..00000000000
Binary files a/src/images/authors/ilmariheikkinen@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ilyagrigorik.jpg b/src/images/authors/ilyagrigorik.jpg
deleted file mode 100644
index f1855ca829b..00000000000
Binary files a/src/images/authors/ilyagrigorik.jpg and /dev/null differ
diff --git a/src/images/authors/ilyagrigorik@2x.jpg b/src/images/authors/ilyagrigorik@2x.jpg
deleted file mode 100644
index f917c7c18fe..00000000000
Binary files a/src/images/authors/ilyagrigorik@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jacquerie.jpg b/src/images/authors/jacquerie.jpg
deleted file mode 100644
index 3f74b966d86..00000000000
Binary files a/src/images/authors/jacquerie.jpg and /dev/null differ
diff --git a/src/images/authors/jacquerie@2x.jpg b/src/images/authors/jacquerie@2x.jpg
deleted file mode 100644
index c5ccd87ef2c..00000000000
Binary files a/src/images/authors/jacquerie@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jakearchibald.jpg b/src/images/authors/jakearchibald.jpg
deleted file mode 100644
index 76e9bb900d3..00000000000
Binary files a/src/images/authors/jakearchibald.jpg and /dev/null differ
diff --git a/src/images/authors/jakearchibald@2x.jpg b/src/images/authors/jakearchibald@2x.jpg
deleted file mode 100644
index 2c8b5f045cc..00000000000
Binary files a/src/images/authors/jakearchibald@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jasonpark.jpg b/src/images/authors/jasonpark.jpg
deleted file mode 100644
index 019c4b1c3ce..00000000000
Binary files a/src/images/authors/jasonpark.jpg and /dev/null differ
diff --git a/src/images/authors/jasonpark@2x.jpg b/src/images/authors/jasonpark@2x.jpg
deleted file mode 100644
index 2d73adcd32c..00000000000
Binary files a/src/images/authors/jasonpark@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jbnicolai.jpg b/src/images/authors/jbnicolai.jpg
deleted file mode 100644
index cfa4c144d1f..00000000000
Binary files a/src/images/authors/jbnicolai.jpg and /dev/null differ
diff --git a/src/images/authors/jbnicolai@2x.jpg b/src/images/authors/jbnicolai@2x.jpg
deleted file mode 100644
index 13904258919..00000000000
Binary files a/src/images/authors/jbnicolai@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jeffposnick.jpg b/src/images/authors/jeffposnick.jpg
deleted file mode 100644
index 9020daf2eff..00000000000
Binary files a/src/images/authors/jeffposnick.jpg and /dev/null differ
diff --git a/src/images/authors/jeffposnick@2x.jpg b/src/images/authors/jeffposnick@2x.jpg
deleted file mode 100644
index 2b27778534e..00000000000
Binary files a/src/images/authors/jeffposnick@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jennygove.jpg b/src/images/authors/jennygove.jpg
deleted file mode 100644
index 7f0fe3afa19..00000000000
Binary files a/src/images/authors/jennygove.jpg and /dev/null differ
diff --git a/src/images/authors/jennygove@2x.jpg b/src/images/authors/jennygove@2x.jpg
deleted file mode 100644
index 3ec76468a6e..00000000000
Binary files a/src/images/authors/jennygove@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jeokrang.jpg b/src/images/authors/jeokrang.jpg
deleted file mode 100644
index c9dd77f03b5..00000000000
Binary files a/src/images/authors/jeokrang.jpg and /dev/null differ
diff --git a/src/images/authors/jeokrang@2x.jpg b/src/images/authors/jeokrang@2x.jpg
deleted file mode 100644
index 106963542e2..00000000000
Binary files a/src/images/authors/jeokrang@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jeremywagner.jpg b/src/images/authors/jeremywagner.jpg
deleted file mode 100644
index 647eb29b399..00000000000
Binary files a/src/images/authors/jeremywagner.jpg and /dev/null differ
diff --git a/src/images/authors/jeremywagner@2x.jpg b/src/images/authors/jeremywagner@2x.jpg
deleted file mode 100644
index 911b0235405..00000000000
Binary files a/src/images/authors/jeremywagner@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jimper.jpg b/src/images/authors/jimper.jpg
deleted file mode 100644
index f75fdd24c66..00000000000
Binary files a/src/images/authors/jimper.jpg and /dev/null differ
diff --git a/src/images/authors/jimper@2x.jpg b/src/images/authors/jimper@2x.jpg
deleted file mode 100644
index 8206a21f703..00000000000
Binary files a/src/images/authors/jimper@2x.jpg and /dev/null differ
diff --git a/src/images/authors/joelriley.jpg b/src/images/authors/joelriley.jpg
deleted file mode 100644
index 289cd505c8b..00000000000
Binary files a/src/images/authors/joelriley.jpg and /dev/null differ
diff --git a/src/images/authors/joelriley@2x.jpg b/src/images/authors/joelriley@2x.jpg
deleted file mode 100644
index 9afa01bc25e..00000000000
Binary files a/src/images/authors/joelriley@2x.jpg and /dev/null differ
diff --git a/src/images/authors/joemedley.jpg b/src/images/authors/joemedley.jpg
deleted file mode 100644
index 7f792519064..00000000000
Binary files a/src/images/authors/joemedley.jpg and /dev/null differ
diff --git a/src/images/authors/joemedley@2x.jpg b/src/images/authors/joemedley@2x.jpg
deleted file mode 100644
index fdbfe1a3041..00000000000
Binary files a/src/images/authors/joemedley@2x.jpg and /dev/null differ
diff --git a/src/images/authors/johyphenel.jpg b/src/images/authors/johyphenel.jpg
deleted file mode 100644
index 5023fc2461a..00000000000
Binary files a/src/images/authors/johyphenel.jpg and /dev/null differ
diff --git a/src/images/authors/johyphenel@2x.jpg b/src/images/authors/johyphenel@2x.jpg
deleted file mode 100644
index bef0c8384e8..00000000000
Binary files a/src/images/authors/johyphenel@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jonathangarbee.jpg b/src/images/authors/jonathangarbee.jpg
deleted file mode 100644
index 60360d6f5b6..00000000000
Binary files a/src/images/authors/jonathangarbee.jpg and /dev/null differ
diff --git a/src/images/authors/jonathangarbee@2x.jpg b/src/images/authors/jonathangarbee@2x.jpg
deleted file mode 100644
index d67cfbd112d..00000000000
Binary files a/src/images/authors/jonathangarbee@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jonchen.jpg b/src/images/authors/jonchen.jpg
deleted file mode 100644
index 34990975c42..00000000000
Binary files a/src/images/authors/jonchen.jpg and /dev/null differ
diff --git a/src/images/authors/jonchen@2x.jpg b/src/images/authors/jonchen@2x.jpg
deleted file mode 100644
index 21872b7e271..00000000000
Binary files a/src/images/authors/jonchen@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jormears.jpg b/src/images/authors/jormears.jpg
deleted file mode 100644
index ba04ff5185e..00000000000
Binary files a/src/images/authors/jormears.jpg and /dev/null differ
diff --git a/src/images/authors/jormears@2x.jpg b/src/images/authors/jormears@2x.jpg
deleted file mode 100644
index 9ee4ae22fa6..00000000000
Binary files a/src/images/authors/jormears@2x.jpg and /dev/null differ
diff --git a/src/images/authors/jungkees.jpg b/src/images/authors/jungkees.jpg
deleted file mode 100644
index eb7ed25fd1e..00000000000
Binary files a/src/images/authors/jungkees.jpg and /dev/null differ
diff --git a/src/images/authors/jungkees@2x.jpg b/src/images/authors/jungkees@2x.jpg
deleted file mode 100644
index 231d7fa4d2a..00000000000
Binary files a/src/images/authors/jungkees@2x.jpg and /dev/null differ
diff --git a/src/images/authors/katejeffreys.jpg b/src/images/authors/katejeffreys.jpg
deleted file mode 100644
index b45f7d6fed1..00000000000
Binary files a/src/images/authors/katejeffreys.jpg and /dev/null differ
diff --git a/src/images/authors/katejeffreys@2x.jpg b/src/images/authors/katejeffreys@2x.jpg
deleted file mode 100644
index 4320c802aca..00000000000
Binary files a/src/images/authors/katejeffreys@2x.jpg and /dev/null differ
diff --git a/src/images/authors/katiehempenius.jpg b/src/images/authors/katiehempenius.jpg
deleted file mode 100644
index d796362dfd8..00000000000
Binary files a/src/images/authors/katiehempenius.jpg and /dev/null differ
diff --git a/src/images/authors/katiehempenius@2x.jpg b/src/images/authors/katiehempenius@2x.jpg
deleted file mode 100644
index 9dbba7721b2..00000000000
Binary files a/src/images/authors/katiehempenius@2x.jpg and /dev/null differ
diff --git a/src/images/authors/katjackson.jpg b/src/images/authors/katjackson.jpg
deleted file mode 100644
index 8271b212223..00000000000
Binary files a/src/images/authors/katjackson.jpg and /dev/null differ
diff --git a/src/images/authors/katjackson@2x.jpg b/src/images/authors/katjackson@2x.jpg
deleted file mode 100644
index c2c7b440392..00000000000
Binary files a/src/images/authors/katjackson@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kaycebasques.jpg b/src/images/authors/kaycebasques.jpg
deleted file mode 100644
index 95b809b01a6..00000000000
Binary files a/src/images/authors/kaycebasques.jpg and /dev/null differ
diff --git a/src/images/authors/kaycebasques@2x.jpg b/src/images/authors/kaycebasques@2x.jpg
deleted file mode 100644
index 0236f743137..00000000000
Binary files a/src/images/authors/kaycebasques@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kenchris.jpg b/src/images/authors/kenchris.jpg
deleted file mode 100644
index 32a463fc9fd..00000000000
Binary files a/src/images/authors/kenchris.jpg and /dev/null differ
diff --git a/src/images/authors/kenchris@2x.jpg b/src/images/authors/kenchris@2x.jpg
deleted file mode 100644
index 8df7b3aa856..00000000000
Binary files a/src/images/authors/kenchris@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kenjibaheux.jpg b/src/images/authors/kenjibaheux.jpg
deleted file mode 100644
index 448875e51c0..00000000000
Binary files a/src/images/authors/kenjibaheux.jpg and /dev/null differ
diff --git a/src/images/authors/kenjibaheux@2x.jpg b/src/images/authors/kenjibaheux@2x.jpg
deleted file mode 100644
index c1a8155351a..00000000000
Binary files a/src/images/authors/kenjibaheux@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kento_tsuji.jpg b/src/images/authors/kento_tsuji.jpg
deleted file mode 100644
index 0f1749644f9..00000000000
Binary files a/src/images/authors/kento_tsuji.jpg and /dev/null differ
diff --git a/src/images/authors/kento_tsuji@2x.jpg b/src/images/authors/kento_tsuji@2x.jpg
deleted file mode 100644
index 18f05b11439..00000000000
Binary files a/src/images/authors/kento_tsuji@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kevinellis.jpg b/src/images/authors/kevinellis.jpg
deleted file mode 100644
index 5c037ee82b8..00000000000
Binary files a/src/images/authors/kevinellis.jpg and /dev/null differ
diff --git a/src/images/authors/kevinellis@2x.jpg b/src/images/authors/kevinellis@2x.jpg
deleted file mode 100644
index a4967e66589..00000000000
Binary files a/src/images/authors/kevinellis@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kinukoyasuda.jpg b/src/images/authors/kinukoyasuda.jpg
deleted file mode 100644
index 61d8b7c4b2f..00000000000
Binary files a/src/images/authors/kinukoyasuda.jpg and /dev/null differ
diff --git a/src/images/authors/kinukoyasuda@2x.jpg b/src/images/authors/kinukoyasuda@2x.jpg
deleted file mode 100644
index ad39171ce4a..00000000000
Binary files a/src/images/authors/kinukoyasuda@2x.jpg and /dev/null differ
diff --git a/src/images/authors/kosamari.jpg b/src/images/authors/kosamari.jpg
deleted file mode 100644
index 007fa91b7ce..00000000000
Binary files a/src/images/authors/kosamari.jpg and /dev/null differ
diff --git a/src/images/authors/kosamari@2x.jpg b/src/images/authors/kosamari@2x.jpg
deleted file mode 100644
index 102e9b5ea9c..00000000000
Binary files a/src/images/authors/kosamari@2x.jpg and /dev/null differ
diff --git a/src/images/authors/koto.jpg b/src/images/authors/koto.jpg
deleted file mode 100644
index 5c0a104f702..00000000000
Binary files a/src/images/authors/koto.jpg and /dev/null differ
diff --git a/src/images/authors/koto@2.jpg b/src/images/authors/koto@2.jpg
deleted file mode 100644
index 416afe5a973..00000000000
Binary files a/src/images/authors/koto@2.jpg and /dev/null differ
diff --git a/src/images/authors/kumagi.jpg b/src/images/authors/kumagi.jpg
deleted file mode 100644
index b717057bff4..00000000000
Binary files a/src/images/authors/kumagi.jpg and /dev/null differ
diff --git a/src/images/authors/kumagi@2x.jpg b/src/images/authors/kumagi@2x.jpg
deleted file mode 100644
index 56cc6959307..00000000000
Binary files a/src/images/authors/kumagi@2x.jpg and /dev/null differ
diff --git a/src/images/authors/leszeks.jpg b/src/images/authors/leszeks.jpg
deleted file mode 100644
index 5cd5e5e499b..00000000000
Binary files a/src/images/authors/leszeks.jpg and /dev/null differ
diff --git a/src/images/authors/leszeks@2x.jpg b/src/images/authors/leszeks@2x.jpg
deleted file mode 100644
index d2db5fc67c8..00000000000
Binary files a/src/images/authors/leszeks@2x.jpg and /dev/null differ
diff --git a/src/images/authors/linahansson.jpg b/src/images/authors/linahansson.jpg
deleted file mode 100644
index 35984dfa0d2..00000000000
Binary files a/src/images/authors/linahansson.jpg and /dev/null differ
diff --git a/src/images/authors/linahansson@2x.jpg b/src/images/authors/linahansson@2x.jpg
deleted file mode 100644
index c7f280ce398..00000000000
Binary files a/src/images/authors/linahansson@2x.jpg and /dev/null differ
diff --git a/src/images/authors/lucaberton.jpg b/src/images/authors/lucaberton.jpg
deleted file mode 100644
index e4b86be6811..00000000000
Binary files a/src/images/authors/lucaberton.jpg and /dev/null differ
diff --git a/src/images/authors/lucaberton@2x.jpg b/src/images/authors/lucaberton@2x.jpg
deleted file mode 100644
index 4d426db5bd5..00000000000
Binary files a/src/images/authors/lucaberton@2x.jpg and /dev/null differ
diff --git a/src/images/authors/lunalu.jpg b/src/images/authors/lunalu.jpg
deleted file mode 100644
index 7cc4d5a7b1e..00000000000
Binary files a/src/images/authors/lunalu.jpg and /dev/null differ
diff --git a/src/images/authors/lunalu@2x.jpg b/src/images/authors/lunalu@2x.jpg
deleted file mode 100644
index cd7cf109a1a..00000000000
Binary files a/src/images/authors/lunalu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/lwe.jpg b/src/images/authors/lwe.jpg
deleted file mode 100644
index 019b16a1a47..00000000000
Binary files a/src/images/authors/lwe.jpg and /dev/null differ
diff --git a/src/images/authors/lwe@2x.jpg b/src/images/authors/lwe@2x.jpg
deleted file mode 100644
index 019b16a1a47..00000000000
Binary files a/src/images/authors/lwe@2x.jpg and /dev/null differ
diff --git a/src/images/authors/majidvp.jpg b/src/images/authors/majidvp.jpg
deleted file mode 100644
index 8269623ab12..00000000000
Binary files a/src/images/authors/majidvp.jpg and /dev/null differ
diff --git a/src/images/authors/majidvp@2x.jpg b/src/images/authors/majidvp@2x.jpg
deleted file mode 100644
index 42ea1849549..00000000000
Binary files a/src/images/authors/majidvp@2x.jpg and /dev/null differ
diff --git a/src/images/authors/martinschierle.jpg b/src/images/authors/martinschierle.jpg
deleted file mode 100644
index f124c0013b1..00000000000
Binary files a/src/images/authors/martinschierle.jpg and /dev/null differ
diff --git a/src/images/authors/martinschierle@2x.jpg b/src/images/authors/martinschierle@2x.jpg
deleted file mode 100644
index 601d9c9c4f1..00000000000
Binary files a/src/images/authors/martinschierle@2x.jpg and /dev/null differ
diff --git a/src/images/authors/martinsplitt.jpg b/src/images/authors/martinsplitt.jpg
deleted file mode 100644
index 301b7bb2bd6..00000000000
Binary files a/src/images/authors/martinsplitt.jpg and /dev/null differ
diff --git a/src/images/authors/martinsplitt@2x.jpg b/src/images/authors/martinsplitt@2x.jpg
deleted file mode 100644
index ba6afcaabb5..00000000000
Binary files a/src/images/authors/martinsplitt@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mathiasbynens.jpg b/src/images/authors/mathiasbynens.jpg
deleted file mode 100644
index 9f48120527f..00000000000
Binary files a/src/images/authors/mathiasbynens.jpg and /dev/null differ
diff --git a/src/images/authors/mathiasbynens@2x.jpg b/src/images/authors/mathiasbynens@2x.jpg
deleted file mode 100644
index e44e7fe717f..00000000000
Binary files a/src/images/authors/mathiasbynens@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mattgaunt.jpg b/src/images/authors/mattgaunt.jpg
deleted file mode 100644
index 0b847dc8b7f..00000000000
Binary files a/src/images/authors/mattgaunt.jpg and /dev/null differ
diff --git a/src/images/authors/mattgaunt@2x.jpg b/src/images/authors/mattgaunt@2x.jpg
deleted file mode 100644
index bb7dc035f0c..00000000000
Binary files a/src/images/authors/mattgaunt@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mattreynolds.jpg b/src/images/authors/mattreynolds.jpg
deleted file mode 100644
index c5a3439eac0..00000000000
Binary files a/src/images/authors/mattreynolds.jpg and /dev/null differ
diff --git a/src/images/authors/mattreynolds@2x.jpg b/src/images/authors/mattreynolds@2x.jpg
deleted file mode 100644
index 1a42db674f2..00000000000
Binary files a/src/images/authors/mattreynolds@2x.jpg and /dev/null differ
diff --git a/src/images/authors/maudn.jpg b/src/images/authors/maudn.jpg
deleted file mode 100644
index c926b55cf13..00000000000
Binary files a/src/images/authors/maudn.jpg and /dev/null differ
diff --git a/src/images/authors/maudn@2x.jpg b/src/images/authors/maudn@2x.jpg
deleted file mode 100644
index c20796b4e74..00000000000
Binary files a/src/images/authors/maudn@2x.jpg and /dev/null differ
diff --git a/src/images/authors/maudnalpas.jpg b/src/images/authors/maudnalpas.jpg
deleted file mode 100644
index 8cca275ce70..00000000000
Binary files a/src/images/authors/maudnalpas.jpg and /dev/null differ
diff --git a/src/images/authors/mcasas.jpg b/src/images/authors/mcasas.jpg
deleted file mode 100644
index fa2b0762a65..00000000000
Binary files a/src/images/authors/mcasas.jpg and /dev/null differ
diff --git a/src/images/authors/mcasas@2x.jpg b/src/images/authors/mcasas@2x.jpg
deleted file mode 100644
index e5193e07f16..00000000000
Binary files a/src/images/authors/mcasas@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mco.jpg b/src/images/authors/mco.jpg
deleted file mode 100644
index bfc8163f77b..00000000000
Binary files a/src/images/authors/mco.jpg and /dev/null differ
diff --git a/src/images/authors/mco@2x.jpg b/src/images/authors/mco@2x.jpg
deleted file mode 100644
index b034c5caf55..00000000000
Binary files a/src/images/authors/mco@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mdiblasio.jpg b/src/images/authors/mdiblasio.jpg
deleted file mode 100644
index e3eab6efa69..00000000000
Binary files a/src/images/authors/mdiblasio.jpg and /dev/null differ
diff --git a/src/images/authors/mdiblasio@2x.jpg b/src/images/authors/mdiblasio@2x.jpg
deleted file mode 100644
index dad5ec896fd..00000000000
Binary files a/src/images/authors/mdiblasio@2x.jpg and /dev/null differ
diff --git a/src/images/authors/megginkearney.jpg b/src/images/authors/megginkearney.jpg
deleted file mode 100644
index b9d6be453f3..00000000000
Binary files a/src/images/authors/megginkearney.jpg and /dev/null differ
diff --git a/src/images/authors/megginkearney@2x.jpg b/src/images/authors/megginkearney@2x.jpg
deleted file mode 100644
index 954fea8e0d0..00000000000
Binary files a/src/images/authors/megginkearney@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mfriesenhahn.jpg b/src/images/authors/mfriesenhahn.jpg
deleted file mode 100644
index cd83915ca3d..00000000000
Binary files a/src/images/authors/mfriesenhahn.jpg and /dev/null differ
diff --git a/src/images/authors/mfriesenhahn@2x.jpg b/src/images/authors/mfriesenhahn@2x.jpg
deleted file mode 100644
index 833c98579d2..00000000000
Binary files a/src/images/authors/mfriesenhahn@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mgechev.jpg b/src/images/authors/mgechev.jpg
deleted file mode 100644
index 25e3a0e7f68..00000000000
Binary files a/src/images/authors/mgechev.jpg and /dev/null differ
diff --git a/src/images/authors/mgechev@2x.jpg b/src/images/authors/mgechev@2x.jpg
deleted file mode 100644
index bdb6336fd98..00000000000
Binary files a/src/images/authors/mgechev@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mihajlija.jpg b/src/images/authors/mihajlija.jpg
deleted file mode 100644
index fe522b08027..00000000000
Binary files a/src/images/authors/mihajlija.jpg and /dev/null differ
diff --git a/src/images/authors/mihajlija@2x.jpg b/src/images/authors/mihajlija@2x.jpg
deleted file mode 100644
index 088e342ba92..00000000000
Binary files a/src/images/authors/mihajlija@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mikemahemoff.jpg b/src/images/authors/mikemahemoff.jpg
deleted file mode 100644
index 6c59f1271ff..00000000000
Binary files a/src/images/authors/mikemahemoff.jpg and /dev/null differ
diff --git a/src/images/authors/mikemahemoff@2x.jpg b/src/images/authors/mikemahemoff@2x.jpg
deleted file mode 100644
index 0ee20be6722..00000000000
Binary files a/src/images/authors/mikemahemoff@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mikewest.jpg b/src/images/authors/mikewest.jpg
deleted file mode 100644
index aba12505c28..00000000000
Binary files a/src/images/authors/mikewest.jpg and /dev/null differ
diff --git a/src/images/authors/mikewest@2x.jpg b/src/images/authors/mikewest@2x.jpg
deleted file mode 100644
index c0c894a221a..00000000000
Binary files a/src/images/authors/mikewest@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mkazi.jpg b/src/images/authors/mkazi.jpg
deleted file mode 100644
index fe1ab3dfa20..00000000000
Binary files a/src/images/authors/mkazi.jpg and /dev/null differ
diff --git a/src/images/authors/mkazi@2x.jpg b/src/images/authors/mkazi@2x.jpg
deleted file mode 100644
index 2b855384102..00000000000
Binary files a/src/images/authors/mkazi@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mlamouri.jpg b/src/images/authors/mlamouri.jpg
deleted file mode 100644
index e5bc10a26bd..00000000000
Binary files a/src/images/authors/mlamouri.jpg and /dev/null differ
diff --git a/src/images/authors/mlamouri@2x.jpg b/src/images/authors/mlamouri@2x.jpg
deleted file mode 100644
index 0910be456d6..00000000000
Binary files a/src/images/authors/mlamouri@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mohamedzamakhan.jpg b/src/images/authors/mohamedzamakhan.jpg
deleted file mode 100644
index 3bb5297721d..00000000000
Binary files a/src/images/authors/mohamedzamakhan.jpg and /dev/null differ
diff --git a/src/images/authors/mohamedzamakhan@2x.jpg b/src/images/authors/mohamedzamakhan@2x.jpg
deleted file mode 100644
index fa0b7c4dc37..00000000000
Binary files a/src/images/authors/mohamedzamakhan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/morss.jpg b/src/images/authors/morss.jpg
deleted file mode 100644
index 53e158fd902..00000000000
Binary files a/src/images/authors/morss.jpg and /dev/null differ
diff --git a/src/images/authors/morss@2x.jpg b/src/images/authors/morss@2x.jpg
deleted file mode 100644
index a0a14c19529..00000000000
Binary files a/src/images/authors/morss@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mscales.jpg b/src/images/authors/mscales.jpg
deleted file mode 100644
index 83bd731a631..00000000000
Binary files a/src/images/authors/mscales.jpg and /dev/null differ
diff --git a/src/images/authors/mscales@2x.jpg b/src/images/authors/mscales@2x.jpg
deleted file mode 100644
index c631e033a47..00000000000
Binary files a/src/images/authors/mscales@2x.jpg and /dev/null differ
diff --git a/src/images/authors/msdikla.jpg b/src/images/authors/msdikla.jpg
deleted file mode 100644
index c419922c322..00000000000
Binary files a/src/images/authors/msdikla.jpg and /dev/null differ
diff --git a/src/images/authors/msdikla@2x.jpg b/src/images/authors/msdikla@2x.jpg
deleted file mode 100644
index 3ebb61fcf17..00000000000
Binary files a/src/images/authors/msdikla@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mustafakurtuldu.jpg b/src/images/authors/mustafakurtuldu.jpg
deleted file mode 100644
index f0e0f9438e2..00000000000
Binary files a/src/images/authors/mustafakurtuldu.jpg and /dev/null differ
diff --git a/src/images/authors/mustafakurtuldu@2x.jpg b/src/images/authors/mustafakurtuldu@2x.jpg
deleted file mode 100644
index cb046ea3ec3..00000000000
Binary files a/src/images/authors/mustafakurtuldu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/mychaelgo.jpg b/src/images/authors/mychaelgo.jpg
deleted file mode 100644
index e3eb65b86a6..00000000000
Binary files a/src/images/authors/mychaelgo.jpg and /dev/null differ
diff --git a/src/images/authors/mychaelgo@2x.jpg b/src/images/authors/mychaelgo@2x.jpg
deleted file mode 100644
index f609d343365..00000000000
Binary files a/src/images/authors/mychaelgo@2x.jpg and /dev/null differ
diff --git a/src/images/authors/nainar.jpg b/src/images/authors/nainar.jpg
deleted file mode 100644
index 523835f4160..00000000000
Binary files a/src/images/authors/nainar.jpg and /dev/null differ
diff --git a/src/images/authors/nainar@2x.jpg b/src/images/authors/nainar@2x.jpg
deleted file mode 100644
index 9d49c60d517..00000000000
Binary files a/src/images/authors/nainar@2x.jpg and /dev/null differ
diff --git a/src/images/authors/nattestad.jpg b/src/images/authors/nattestad.jpg
deleted file mode 100644
index 868d417cdc2..00000000000
Binary files a/src/images/authors/nattestad.jpg and /dev/null differ
diff --git a/src/images/authors/nattestad@2x.jpg b/src/images/authors/nattestad@2x.jpg
deleted file mode 100644
index 0fb179c2b46..00000000000
Binary files a/src/images/authors/nattestad@2x.jpg and /dev/null differ
diff --git a/src/images/authors/no-photo.jpg b/src/images/authors/no-photo.jpg
deleted file mode 100644
index 679a74d4730..00000000000
Binary files a/src/images/authors/no-photo.jpg and /dev/null differ
diff --git a/src/images/authors/no-photo.svg b/src/images/authors/no-photo.svg
deleted file mode 100644
index c1d995086d2..00000000000
--- a/src/images/authors/no-photo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 192 192" height="48" viewBox="0 0 192 192" width="48" xmlns="http://www.w3.org/2000/svg"><path d="m96 0c-52.99 0-96 43.01-96 96s43.01 96 96 96 96-43.01 96-96-43.01-96-96-96z" fill="#e0e0e0"/><path d="m96 85.09c13.28 0 24-10.72 24-24s-10.72-24-24-24-24 10.72-24 24 10.72 24 24 24z" fill="#bdbdbd"/><path d="m96 99.27c-29.33 0-52.36 14.18-52.36 27.27 11.09 17.06 30.51 28.36 52.36 28.36s41.27-11.3 52.36-28.36c0-13.09-23.03-27.27-52.36-27.27z" fill="#bdbdbd"/><path d="m0 0h192v192h-192z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/images/authors/no-photo@2x.jpg b/src/images/authors/no-photo@2x.jpg
deleted file mode 100644
index 617518e5113..00000000000
Binary files a/src/images/authors/no-photo@2x.jpg and /dev/null differ
diff --git a/src/images/authors/nurinamu.jpg b/src/images/authors/nurinamu.jpg
deleted file mode 100644
index 941758fd30c..00000000000
Binary files a/src/images/authors/nurinamu.jpg and /dev/null differ
diff --git a/src/images/authors/nurinamu@2x.jpg b/src/images/authors/nurinamu@2x.jpg
deleted file mode 100644
index a85bde4f738..00000000000
Binary files a/src/images/authors/nurinamu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/olgademidova.jpg b/src/images/authors/olgademidova.jpg
deleted file mode 100644
index 19539cbd111..00000000000
Binary files a/src/images/authors/olgademidova.jpg and /dev/null differ
diff --git a/src/images/authors/olgademidova@2x.jpg b/src/images/authors/olgademidova@2x.jpg
deleted file mode 100644
index a3018dd23ba..00000000000
Binary files a/src/images/authors/olgademidova@2x.jpg and /dev/null differ
diff --git a/src/images/authors/owencm.jpg b/src/images/authors/owencm.jpg
deleted file mode 100644
index 0aeaad45fc9..00000000000
Binary files a/src/images/authors/owencm.jpg and /dev/null differ
diff --git a/src/images/authors/owencm@2x.jpg b/src/images/authors/owencm@2x.jpg
deleted file mode 100644
index 48d98ceeb20..00000000000
Binary files a/src/images/authors/owencm@2x.jpg and /dev/null differ
diff --git a/src/images/authors/patrickhulce.jpg b/src/images/authors/patrickhulce.jpg
deleted file mode 100644
index 440167eb423..00000000000
Binary files a/src/images/authors/patrickhulce.jpg and /dev/null differ
diff --git a/src/images/authors/patrickhulce@2x.jpg b/src/images/authors/patrickhulce@2x.jpg
deleted file mode 100644
index 5b4d9f84ecd..00000000000
Binary files a/src/images/authors/patrickhulce@2x.jpg and /dev/null differ
diff --git a/src/images/authors/patrickkettner.jpg b/src/images/authors/patrickkettner.jpg
deleted file mode 100644
index 6c6bb977f92..00000000000
Binary files a/src/images/authors/patrickkettner.jpg and /dev/null differ
diff --git a/src/images/authors/patrickkettner@2x.jpg b/src/images/authors/patrickkettner@2x.jpg
deleted file mode 100644
index 04723948547..00000000000
Binary files a/src/images/authors/patrickkettner@2x.jpg and /dev/null differ
diff --git a/src/images/authors/paulirish.jpg b/src/images/authors/paulirish.jpg
deleted file mode 100644
index f6bbb327636..00000000000
Binary files a/src/images/authors/paulirish.jpg and /dev/null differ
diff --git a/src/images/authors/paulirish@2x.jpg b/src/images/authors/paulirish@2x.jpg
deleted file mode 100644
index 312c8c76714..00000000000
Binary files a/src/images/authors/paulirish@2x.jpg and /dev/null differ
diff --git a/src/images/authors/paulkinlan.jpg b/src/images/authors/paulkinlan.jpg
deleted file mode 100644
index 7f9b9977209..00000000000
Binary files a/src/images/authors/paulkinlan.jpg and /dev/null differ
diff --git a/src/images/authors/paulkinlan@2x.jpg b/src/images/authors/paulkinlan@2x.jpg
deleted file mode 100644
index 42f6ecc8382..00000000000
Binary files a/src/images/authors/paulkinlan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/paullewis.jpg b/src/images/authors/paullewis.jpg
deleted file mode 100644
index 31bc43ae333..00000000000
Binary files a/src/images/authors/paullewis.jpg and /dev/null differ
diff --git a/src/images/authors/paullewis@2x.jpg b/src/images/authors/paullewis@2x.jpg
deleted file mode 100644
index 0327e60e96e..00000000000
Binary files a/src/images/authors/paullewis@2x.jpg and /dev/null differ
diff --git a/src/images/authors/pbakaus.jpg b/src/images/authors/pbakaus.jpg
deleted file mode 100644
index 53345e5537a..00000000000
Binary files a/src/images/authors/pbakaus.jpg and /dev/null differ
diff --git a/src/images/authors/pbakaus@2x.jpg b/src/images/authors/pbakaus@2x.jpg
deleted file mode 100644
index 7ad523de945..00000000000
Binary files a/src/images/authors/pbakaus@2x.jpg and /dev/null differ
diff --git a/src/images/authors/petelepage.jpg b/src/images/authors/petelepage.jpg
deleted file mode 100644
index ff37ffa29e9..00000000000
Binary files a/src/images/authors/petelepage.jpg and /dev/null differ
diff --git a/src/images/authors/petelepage@2x.jpg b/src/images/authors/petelepage@2x.jpg
deleted file mode 100644
index 3fdb5ae298b..00000000000
Binary files a/src/images/authors/petelepage@2x.jpg and /dev/null differ
diff --git a/src/images/authors/philipwalton.jpg b/src/images/authors/philipwalton.jpg
deleted file mode 100644
index 7481f481e0d..00000000000
Binary files a/src/images/authors/philipwalton.jpg and /dev/null differ
diff --git a/src/images/authors/philipwalton@2x.jpg b/src/images/authors/philipwalton@2x.jpg
deleted file mode 100644
index 450a847c3d1..00000000000
Binary files a/src/images/authors/philipwalton@2x.jpg and /dev/null differ
diff --git a/src/images/authors/phillipkriegel.jpg b/src/images/authors/phillipkriegel.jpg
deleted file mode 100644
index c900525e3b2..00000000000
Binary files a/src/images/authors/phillipkriegel.jpg and /dev/null differ
diff --git a/src/images/authors/pjmclachlan.jpg b/src/images/authors/pjmclachlan.jpg
deleted file mode 100644
index 3b1a4152856..00000000000
Binary files a/src/images/authors/pjmclachlan.jpg and /dev/null differ
diff --git a/src/images/authors/pjmclachlan@2x.jpg b/src/images/authors/pjmclachlan@2x.jpg
deleted file mode 100644
index 1b0ae2a44eb..00000000000
Binary files a/src/images/authors/pjmclachlan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/plegner.jpg b/src/images/authors/plegner.jpg
deleted file mode 100644
index 4081e7a6059..00000000000
Binary files a/src/images/authors/plegner.jpg and /dev/null differ
diff --git a/src/images/authors/plegner@2x.jpg b/src/images/authors/plegner@2x.jpg
deleted file mode 100644
index 63c85c38f00..00000000000
Binary files a/src/images/authors/plegner@2x.jpg and /dev/null differ
diff --git a/src/images/authors/pozdnyakov.jpg b/src/images/authors/pozdnyakov.jpg
deleted file mode 100644
index ad78a057d08..00000000000
Binary files a/src/images/authors/pozdnyakov.jpg and /dev/null differ
diff --git a/src/images/authors/pozdnyakov@2x.jpg b/src/images/authors/pozdnyakov@2x.jpg
deleted file mode 100644
index 88734947e2f..00000000000
Binary files a/src/images/authors/pozdnyakov@2x.jpg and /dev/null differ
diff --git a/src/images/authors/rachelandrew.jpg b/src/images/authors/rachelandrew.jpg
deleted file mode 100644
index b107b33b763..00000000000
Binary files a/src/images/authors/rachelandrew.jpg and /dev/null differ
diff --git a/src/images/authors/rachelandrew@2x.jpg b/src/images/authors/rachelandrew@2x.jpg
deleted file mode 100644
index 3dfe14c3b64..00000000000
Binary files a/src/images/authors/rachelandrew@2x.jpg and /dev/null differ
diff --git a/src/images/authors/renatomangini.jpg b/src/images/authors/renatomangini.jpg
deleted file mode 100644
index fce5dfcc2b8..00000000000
Binary files a/src/images/authors/renatomangini.jpg and /dev/null differ
diff --git a/src/images/authors/renatomangini@2x.jpg b/src/images/authors/renatomangini@2x.jpg
deleted file mode 100644
index 1ff4f0f79d2..00000000000
Binary files a/src/images/authors/renatomangini@2x.jpg and /dev/null differ
diff --git a/src/images/authors/rkochman.jpg b/src/images/authors/rkochman.jpg
deleted file mode 100644
index 9d1061e9530..00000000000
Binary files a/src/images/authors/rkochman.jpg and /dev/null differ
diff --git a/src/images/authors/rkochman@2x.jpg b/src/images/authors/rkochman@2x.jpg
deleted file mode 100644
index 24420e4c756..00000000000
Binary files a/src/images/authors/rkochman@2x.jpg and /dev/null differ
diff --git a/src/images/authors/robdodson.jpg b/src/images/authors/robdodson.jpg
deleted file mode 100644
index 1d677e076db..00000000000
Binary files a/src/images/authors/robdodson.jpg and /dev/null differ
diff --git a/src/images/authors/robdodson@2x.jpg b/src/images/authors/robdodson@2x.jpg
deleted file mode 100644
index dd8c9f3a3dc..00000000000
Binary files a/src/images/authors/robdodson@2x.jpg and /dev/null differ
diff --git a/src/images/authors/robertnyman.jpg b/src/images/authors/robertnyman.jpg
deleted file mode 100644
index eaa8db0dacb..00000000000
Binary files a/src/images/authors/robertnyman.jpg and /dev/null differ
diff --git a/src/images/authors/robertnyman@2x.jpg b/src/images/authors/robertnyman@2x.jpg
deleted file mode 100644
index c95eb12cf09..00000000000
Binary files a/src/images/authors/robertnyman@2x.jpg and /dev/null differ
diff --git a/src/images/authors/robhazan.jpg b/src/images/authors/robhazan.jpg
deleted file mode 100644
index 8518c8a8766..00000000000
Binary files a/src/images/authors/robhazan.jpg and /dev/null differ
diff --git a/src/images/authors/robhazan@2x.jpg b/src/images/authors/robhazan@2x.jpg
deleted file mode 100644
index d8edcd3c2e3..00000000000
Binary files a/src/images/authors/robhazan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/rowan_m.jpg b/src/images/authors/rowan_m.jpg
deleted file mode 100644
index 6dd90c09e8c..00000000000
Binary files a/src/images/authors/rowan_m.jpg and /dev/null differ
diff --git a/src/images/authors/rowan_m@2x.jpg b/src/images/authors/rowan_m@2x.jpg
deleted file mode 100644
index 7b226e2b8f0..00000000000
Binary files a/src/images/authors/rowan_m@2x.jpg and /dev/null differ
diff --git a/src/images/authors/rsolomakhin.jpg b/src/images/authors/rsolomakhin.jpg
deleted file mode 100644
index d5fe6ce736b..00000000000
Binary files a/src/images/authors/rsolomakhin.jpg and /dev/null differ
diff --git a/src/images/authors/rsolomakhin@2x.jpg b/src/images/authors/rsolomakhin@2x.jpg
deleted file mode 100644
index 2d58e781b95..00000000000
Binary files a/src/images/authors/rsolomakhin@2x.jpg and /dev/null differ
diff --git a/src/images/authors/rviscomi.jpg b/src/images/authors/rviscomi.jpg
deleted file mode 100644
index 8a423c6c822..00000000000
Binary files a/src/images/authors/rviscomi.jpg and /dev/null differ
diff --git a/src/images/authors/rviscomi@2x.jpg b/src/images/authors/rviscomi@2x.jpg
deleted file mode 100644
index 8c9c352e8da..00000000000
Binary files a/src/images/authors/rviscomi@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sahel.jpg b/src/images/authors/sahel.jpg
deleted file mode 100644
index e72ff99ffbe..00000000000
Binary files a/src/images/authors/sahel.jpg and /dev/null differ
diff --git a/src/images/authors/sahel@2x.jpg b/src/images/authors/sahel@2x.jpg
deleted file mode 100644
index 57925d8dbe9..00000000000
Binary files a/src/images/authors/sahel@2x.jpg and /dev/null differ
diff --git a/src/images/authors/samchen.jpg b/src/images/authors/samchen.jpg
deleted file mode 100644
index b8bf455260b..00000000000
Binary files a/src/images/authors/samchen.jpg and /dev/null differ
diff --git a/src/images/authors/samchen@2x.jpg b/src/images/authors/samchen@2x.jpg
deleted file mode 100644
index b5322dfa6d3..00000000000
Binary files a/src/images/authors/samchen@2x.jpg and /dev/null differ
diff --git a/src/images/authors/samdutton.jpg b/src/images/authors/samdutton.jpg
deleted file mode 100644
index 9f1642c861f..00000000000
Binary files a/src/images/authors/samdutton.jpg and /dev/null differ
diff --git a/src/images/authors/samdutton@2x.jpg b/src/images/authors/samdutton@2x.jpg
deleted file mode 100644
index a03e7749a5a..00000000000
Binary files a/src/images/authors/samdutton@2x.jpg and /dev/null differ
diff --git a/src/images/authors/samrichard.jpg b/src/images/authors/samrichard.jpg
deleted file mode 100644
index 98dcb7e2186..00000000000
Binary files a/src/images/authors/samrichard.jpg and /dev/null differ
diff --git a/src/images/authors/samrichard@2x.jpg b/src/images/authors/samrichard@2x.jpg
deleted file mode 100644
index 0587230ea0f..00000000000
Binary files a/src/images/authors/samrichard@2x.jpg and /dev/null differ
diff --git a/src/images/authors/samthor.jpg b/src/images/authors/samthor.jpg
deleted file mode 100644
index e02a2da137e..00000000000
Binary files a/src/images/authors/samthor.jpg and /dev/null differ
diff --git a/src/images/authors/samthor@2x.jpg b/src/images/authors/samthor@2x.jpg
deleted file mode 100644
index 8048fa08013..00000000000
Binary files a/src/images/authors/samthor@2x.jpg and /dev/null differ
diff --git a/src/images/authors/satoshi_arai.jpg b/src/images/authors/satoshi_arai.jpg
deleted file mode 100644
index 2df4621983b..00000000000
Binary files a/src/images/authors/satoshi_arai.jpg and /dev/null differ
diff --git a/src/images/authors/satoshi_arai@2x.jpg b/src/images/authors/satoshi_arai@2x.jpg
deleted file mode 100644
index 1b9781edfc3..00000000000
Binary files a/src/images/authors/satoshi_arai@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sebabenz.jpg b/src/images/authors/sebabenz.jpg
deleted file mode 100644
index 4a476e89dfb..00000000000
Binary files a/src/images/authors/sebabenz.jpg and /dev/null differ
diff --git a/src/images/authors/sebabenz@2x.jpg b/src/images/authors/sebabenz@2x.jpg
deleted file mode 100644
index 60364b0bcb6..00000000000
Binary files a/src/images/authors/sebabenz@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sethladd.jpg b/src/images/authors/sethladd.jpg
deleted file mode 100644
index 9ffeadc9270..00000000000
Binary files a/src/images/authors/sethladd.jpg and /dev/null differ
diff --git a/src/images/authors/sethladd@2x.jpg b/src/images/authors/sethladd@2x.jpg
deleted file mode 100644
index 0cf06a51540..00000000000
Binary files a/src/images/authors/sethladd@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sfluin.jpg b/src/images/authors/sfluin.jpg
deleted file mode 100644
index 3b40b0af50b..00000000000
Binary files a/src/images/authors/sfluin.jpg and /dev/null differ
diff --git a/src/images/authors/sfluin@2x.jpg b/src/images/authors/sfluin@2x.jpg
deleted file mode 100644
index 16177d18a6d..00000000000
Binary files a/src/images/authors/sfluin@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sfourault.jpg b/src/images/authors/sfourault.jpg
deleted file mode 100644
index 398304ba321..00000000000
Binary files a/src/images/authors/sfourault.jpg and /dev/null differ
diff --git a/src/images/authors/sfourault@2x.jpg b/src/images/authors/sfourault@2x.jpg
deleted file mode 100644
index 70ae6cad51b..00000000000
Binary files a/src/images/authors/sfourault@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sgomes.jpg b/src/images/authors/sgomes.jpg
deleted file mode 100644
index f9210d97b02..00000000000
Binary files a/src/images/authors/sgomes.jpg and /dev/null differ
diff --git a/src/images/authors/sgomes@2x.jpg b/src/images/authors/sgomes@2x.jpg
deleted file mode 100644
index 2f127d31803..00000000000
Binary files a/src/images/authors/sgomes@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sherwinski.jpg b/src/images/authors/sherwinski.jpg
deleted file mode 100644
index 6ea3b1de3d4..00000000000
Binary files a/src/images/authors/sherwinski.jpg and /dev/null differ
diff --git a/src/images/authors/sherwinski@2x.jpg b/src/images/authors/sherwinski@2x.jpg
deleted file mode 100644
index 13ec1824288..00000000000
Binary files a/src/images/authors/sherwinski@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sieke.jpg b/src/images/authors/sieke.jpg
deleted file mode 100644
index 259956371d3..00000000000
Binary files a/src/images/authors/sieke.jpg and /dev/null differ
diff --git a/src/images/authors/sieke@2x.jpg b/src/images/authors/sieke@2x.jpg
deleted file mode 100644
index fd4f3f7ab32..00000000000
Binary files a/src/images/authors/sieke@2x.jpg and /dev/null differ
diff --git a/src/images/authors/sunyunjia.jpg b/src/images/authors/sunyunjia.jpg
deleted file mode 100644
index 00b00a12d2b..00000000000
Binary files a/src/images/authors/sunyunjia.jpg and /dev/null differ
diff --git a/src/images/authors/sunyunjia@2x.jpg b/src/images/authors/sunyunjia@2x.jpg
deleted file mode 100644
index 51b6772816f..00000000000
Binary files a/src/images/authors/sunyunjia@2x.jpg and /dev/null differ
diff --git a/src/images/authors/surma.jpg b/src/images/authors/surma.jpg
deleted file mode 100644
index 4b8fe54b5ed..00000000000
Binary files a/src/images/authors/surma.jpg and /dev/null differ
diff --git a/src/images/authors/surma@2x.jpg b/src/images/authors/surma@2x.jpg
deleted file mode 100644
index 28a04951797..00000000000
Binary files a/src/images/authors/surma@2x.jpg and /dev/null differ
diff --git a/src/images/authors/swengineer.jpg b/src/images/authors/swengineer.jpg
deleted file mode 100644
index b11444a3f4f..00000000000
Binary files a/src/images/authors/swengineer.jpg and /dev/null differ
diff --git a/src/images/authors/swengineer@2x.jpg b/src/images/authors/swengineer@2x.jpg
deleted file mode 100644
index 0586cfeaeff..00000000000
Binary files a/src/images/authors/swengineer@2x.jpg and /dev/null differ
diff --git a/src/images/authors/syg.jpg b/src/images/authors/syg.jpg
deleted file mode 100644
index deb769e7bcc..00000000000
Binary files a/src/images/authors/syg.jpg and /dev/null differ
diff --git a/src/images/authors/syg@2x.jpg b/src/images/authors/syg@2x.jpg
deleted file mode 100644
index abe2c27ba2b..00000000000
Binary files a/src/images/authors/syg@2x.jpg and /dev/null differ
diff --git a/src/images/authors/taylorsavage.jpg b/src/images/authors/taylorsavage.jpg
deleted file mode 100644
index ae6f318d257..00000000000
Binary files a/src/images/authors/taylorsavage.jpg and /dev/null differ
diff --git a/src/images/authors/taylorsavage@2x.jpg b/src/images/authors/taylorsavage@2x.jpg
deleted file mode 100644
index 27c43e61c8d..00000000000
Binary files a/src/images/authors/taylorsavage@2x.jpg and /dev/null differ
diff --git a/src/images/authors/tcmg.jpg b/src/images/authors/tcmg.jpg
deleted file mode 100644
index 26f95e27d45..00000000000
Binary files a/src/images/authors/tcmg.jpg and /dev/null differ
diff --git a/src/images/authors/tcmg@2x.jpg b/src/images/authors/tcmg@2x.jpg
deleted file mode 100644
index e19baa0790b..00000000000
Binary files a/src/images/authors/tcmg@2x.jpg and /dev/null differ
diff --git a/src/images/authors/tdresser.jpg b/src/images/authors/tdresser.jpg
deleted file mode 100644
index 5e1f2e58980..00000000000
Binary files a/src/images/authors/tdresser.jpg and /dev/null differ
diff --git a/src/images/authors/tdresser@2x.jpg b/src/images/authors/tdresser@2x.jpg
deleted file mode 100644
index 0b9d4f9cb46..00000000000
Binary files a/src/images/authors/tdresser@2x.jpg and /dev/null differ
diff --git a/src/images/authors/thebengeu.jpg b/src/images/authors/thebengeu.jpg
deleted file mode 100644
index e40f10debbd..00000000000
Binary files a/src/images/authors/thebengeu.jpg and /dev/null differ
diff --git a/src/images/authors/thebengeu@2x.jpg b/src/images/authors/thebengeu@2x.jpg
deleted file mode 100644
index c1c5e2f31eb..00000000000
Binary files a/src/images/authors/thebengeu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/thomassteiner.jpg b/src/images/authors/thomassteiner.jpg
deleted file mode 100644
index 6094dab9b3e..00000000000
Binary files a/src/images/authors/thomassteiner.jpg and /dev/null differ
diff --git a/src/images/authors/thomassteiner@2x.jpg b/src/images/authors/thomassteiner@2x.jpg
deleted file mode 100644
index 8a5736ca675..00000000000
Binary files a/src/images/authors/thomassteiner@2x.jpg and /dev/null differ
diff --git a/src/images/authors/tigeroakes.jpg b/src/images/authors/tigeroakes.jpg
deleted file mode 100644
index 6dbc4be75ff..00000000000
Binary files a/src/images/authors/tigeroakes.jpg and /dev/null differ
diff --git a/src/images/authors/tigeroakes@2x.jpg b/src/images/authors/tigeroakes@2x.jpg
deleted file mode 100644
index 96508d3704f..00000000000
Binary files a/src/images/authors/tigeroakes@2x.jpg and /dev/null differ
diff --git a/src/images/authors/tomgreenaway.jpg b/src/images/authors/tomgreenaway.jpg
deleted file mode 100644
index a943f8be45b..00000000000
Binary files a/src/images/authors/tomgreenaway.jpg and /dev/null differ
diff --git a/src/images/authors/tomgreenaway@2x.jpg b/src/images/authors/tomgreenaway@2x.jpg
deleted file mode 100644
index 7233bedf77f..00000000000
Binary files a/src/images/authors/tomgreenaway@2x.jpg and /dev/null differ
diff --git a/src/images/authors/tomwiltzius.jpg b/src/images/authors/tomwiltzius.jpg
deleted file mode 100644
index dabc3a4882a..00000000000
Binary files a/src/images/authors/tomwiltzius.jpg and /dev/null differ
diff --git a/src/images/authors/tomwiltzius@2x.jpg b/src/images/authors/tomwiltzius@2x.jpg
deleted file mode 100644
index 2251a380a70..00000000000
Binary files a/src/images/authors/tomwiltzius@2x.jpg and /dev/null differ
diff --git a/src/images/authors/ulan.jpg b/src/images/authors/ulan.jpg
deleted file mode 100644
index 29fb4342ed7..00000000000
Binary files a/src/images/authors/ulan.jpg and /dev/null differ
diff --git a/src/images/authors/ulan@2x.jpg b/src/images/authors/ulan@2x.jpg
deleted file mode 100644
index e519889aca0..00000000000
Binary files a/src/images/authors/ulan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/umarhansa.jpg b/src/images/authors/umarhansa.jpg
deleted file mode 100644
index 3eba9ac01f4..00000000000
Binary files a/src/images/authors/umarhansa.jpg and /dev/null differ
diff --git a/src/images/authors/umarhansa@2x.jpg b/src/images/authors/umarhansa@2x.jpg
deleted file mode 100644
index 37545fb6dc4..00000000000
Binary files a/src/images/authors/umarhansa@2x.jpg and /dev/null differ
diff --git a/src/images/authors/una.jpg b/src/images/authors/una.jpg
deleted file mode 100644
index c2c1e602e37..00000000000
Binary files a/src/images/authors/una.jpg and /dev/null differ
diff --git a/src/images/authors/una@2x.jpg b/src/images/authors/una@2x.jpg
deleted file mode 100644
index 2ca3b6a5288..00000000000
Binary files a/src/images/authors/una@2x.jpg and /dev/null differ
diff --git a/src/images/authors/uskay.jpg b/src/images/authors/uskay.jpg
deleted file mode 100644
index 0ace6c5218f..00000000000
Binary files a/src/images/authors/uskay.jpg and /dev/null differ
diff --git a/src/images/authors/uskay@2x.jpg b/src/images/authors/uskay@2x.jpg
deleted file mode 100644
index c047575dbbb..00000000000
Binary files a/src/images/authors/uskay@2x.jpg and /dev/null differ
diff --git a/src/images/authors/victorcostan.jpg b/src/images/authors/victorcostan.jpg
deleted file mode 100644
index 64afdc5ade8..00000000000
Binary files a/src/images/authors/victorcostan.jpg and /dev/null differ
diff --git a/src/images/authors/victorcostan@2x.jpg b/src/images/authors/victorcostan@2x.jpg
deleted file mode 100644
index 5321213a43c..00000000000
Binary files a/src/images/authors/victorcostan@2x.jpg and /dev/null differ
diff --git a/src/images/authors/vinamratasingal.jpg b/src/images/authors/vinamratasingal.jpg
deleted file mode 100644
index efbd28b9a1d..00000000000
Binary files a/src/images/authors/vinamratasingal.jpg and /dev/null differ
diff --git a/src/images/authors/vinamratasingal@2x.jpg b/src/images/authors/vinamratasingal@2x.jpg
deleted file mode 100644
index 8f168fb584f..00000000000
Binary files a/src/images/authors/vinamratasingal@2x.jpg and /dev/null differ
diff --git a/src/images/authors/vladimirlevin.jpg b/src/images/authors/vladimirlevin.jpg
deleted file mode 100644
index 610d7afec8d..00000000000
Binary files a/src/images/authors/vladimirlevin.jpg and /dev/null differ
diff --git a/src/images/authors/vladimirlevin@2x.jpg b/src/images/authors/vladimirlevin@2x.jpg
deleted file mode 100644
index abb29a2bad1..00000000000
Binary files a/src/images/authors/vladimirlevin@2x.jpg and /dev/null differ
diff --git a/src/images/authors/wangyu.jpg b/src/images/authors/wangyu.jpg
deleted file mode 100644
index f93150046a4..00000000000
Binary files a/src/images/authors/wangyu.jpg and /dev/null differ
diff --git a/src/images/authors/wangyu@2x.jpg b/src/images/authors/wangyu@2x.jpg
deleted file mode 100644
index 4a7b1a95850..00000000000
Binary files a/src/images/authors/wangyu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/wayouliu.jpg b/src/images/authors/wayouliu.jpg
deleted file mode 100644
index dc9eb72df4f..00000000000
Binary files a/src/images/authors/wayouliu.jpg and /dev/null differ
diff --git a/src/images/authors/wayouliu@2x.jpg b/src/images/authors/wayouliu@2x.jpg
deleted file mode 100644
index 03f8c081004..00000000000
Binary files a/src/images/authors/wayouliu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/wdenniss.jpg b/src/images/authors/wdenniss.jpg
deleted file mode 100644
index 73ff8a31fcb..00000000000
Binary files a/src/images/authors/wdenniss.jpg and /dev/null differ
diff --git a/src/images/authors/wdenniss@2x.jpg b/src/images/authors/wdenniss@2x.jpg
deleted file mode 100644
index 989a089c39d..00000000000
Binary files a/src/images/authors/wdenniss@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yaraki.jpg b/src/images/authors/yaraki.jpg
deleted file mode 100644
index 29944b31912..00000000000
Binary files a/src/images/authors/yaraki.jpg and /dev/null differ
diff --git a/src/images/authors/yaraki@2x.jpg b/src/images/authors/yaraki@2x.jpg
deleted file mode 100644
index 0248a0c5fd0..00000000000
Binary files a/src/images/authors/yaraki@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yigu.jpg b/src/images/authors/yigu.jpg
deleted file mode 100644
index 232d86c5cec..00000000000
Binary files a/src/images/authors/yigu.jpg and /dev/null differ
diff --git a/src/images/authors/yigu@2x.jpg b/src/images/authors/yigu@2x.jpg
deleted file mode 100644
index 5df2dabbad5..00000000000
Binary files a/src/images/authors/yigu@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yoavweiss.jpg b/src/images/authors/yoavweiss.jpg
deleted file mode 100644
index 1b970110a9f..00000000000
Binary files a/src/images/authors/yoavweiss.jpg and /dev/null differ
diff --git a/src/images/authors/yoavweiss@2x.jpg b/src/images/authors/yoavweiss@2x.jpg
deleted file mode 100644
index 50768acb199..00000000000
Binary files a/src/images/authors/yoavweiss@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yoichiro.jpg b/src/images/authors/yoichiro.jpg
deleted file mode 100644
index c50b2e7ae13..00000000000
Binary files a/src/images/authors/yoichiro.jpg and /dev/null differ
diff --git a/src/images/authors/yoichiro@2x.jpg b/src/images/authors/yoichiro@2x.jpg
deleted file mode 100644
index eb9bcd05f7e..00000000000
Binary files a/src/images/authors/yoichiro@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yosuke_furukawa.jpg b/src/images/authors/yosuke_furukawa.jpg
deleted file mode 100644
index 20217831683..00000000000
Binary files a/src/images/authors/yosuke_furukawa.jpg and /dev/null differ
diff --git a/src/images/authors/yosuke_furukawa@2x.jpg b/src/images/authors/yosuke_furukawa@2x.jpg
deleted file mode 100644
index 772c159e231..00000000000
Binary files a/src/images/authors/yosuke_furukawa@2x.jpg and /dev/null differ
diff --git a/src/images/authors/yvoschaap.jpg b/src/images/authors/yvoschaap.jpg
deleted file mode 100644
index edc292d4e70..00000000000
Binary files a/src/images/authors/yvoschaap.jpg and /dev/null differ
diff --git a/src/images/authors/yvoschaap@2x.jpg b/src/images/authors/yvoschaap@2x.jpg
deleted file mode 100644
index 4487835b3fd..00000000000
Binary files a/src/images/authors/yvoschaap@2x.jpg and /dev/null differ
diff --git a/src/images/authors/zkoch.jpg b/src/images/authors/zkoch.jpg
deleted file mode 100644
index b0a6a2b90fb..00000000000
Binary files a/src/images/authors/zkoch.jpg and /dev/null differ
diff --git a/src/images/authors/zkoch@2x.jpg b/src/images/authors/zkoch@2x.jpg
deleted file mode 100644
index a31cd9c4f12..00000000000
Binary files a/src/images/authors/zkoch@2x.jpg and /dev/null differ
diff --git a/src/images/collections/animations.svg b/src/images/collections/animations.svg
new file mode 100644
index 00000000000..e2249f226a3
--- /dev/null
+++ b/src/images/collections/animations.svg
@@ -0,0 +1 @@
+<svg width="330" height="220" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="#000" stroke-dasharray="2 3" d="M81 26h168v168H81z"/><path d="M249 110H81M249 152H81M249 68H81M165 26v168M207 26v168M123 26v168" stroke="#212121" stroke-dasharray="2 3"/><path d="M81 194c74.083 0 96.25-168 168-168M180.73 26h67.823" stroke="#212121"/><circle cx="181" cy="26" r="5" fill="#FF1776" stroke="#212121"/><circle cx="249.105" cy="26" r="5" fill="#fff" stroke="#212121"/><path d="M80.447 194h70.046" stroke="#212121"/><circle cx="150" cy="194" r="5" fill="#FF1776" stroke="#212121"/><circle cx="81" cy="194" r="5" fill="#fff" stroke="#212121"/><circle cx="165" cy="110" r="28" fill="#FF80C3"/><circle cx="221" cy="110" r="28" fill="#FF1776"/><circle cx="243" cy="110" r="28" fill="#C50F62"/><circle cx="77" cy="110" r="28" stroke="#212121"/><circle cx="87" cy="110" r="28" stroke="#212121"/><circle cx="109" cy="110" r="28" stroke="#212121"/><circle cx="165" cy="110" r="28" stroke="#212121"/><circle cx="221" cy="110" r="28" stroke="#212121"/><circle cx="243" cy="110" r="28" stroke="#212121"/><circle cx="253" cy="110" r="28" fill="#fff" stroke="#212121"/><path d="M220 110h-43M223 98h-34M223 122h-30" stroke="#212121"/><path d="M177 110h-28M189 98h-28M193 122h-28" stroke="#212121" stroke-dasharray="2 3"/><mask id="a" maskUnits="userSpaceOnUse" x="225" y="82" width="56" height="56"><circle cx="253" cy="110" r="28" fill="#fff"/></mask><g mask="url(#a)" stroke="#212121"><path d="M253 82v56M265 82v56M277 82v56M241 82v56M229 82v56M225 110h56M225 98h56M225 86h56M225 122h56M225 134h56"/><path d="M265 101a3 3 0 100-6 3 3 0 000 6z" fill="#FF80C3"/><path d="M241 125a3 3 0 100-6 3 3 0 000 6z" fill="#FF1776"/></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/devices.svg b/src/images/collections/devices.svg
new file mode 100644
index 00000000000..841c33cc5e3
--- /dev/null
+++ b/src/images/collections/devices.svg
@@ -0,0 +1,44 @@
+
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="M72 222v-46h112v46m-88 0h64" stroke="#212121"/>
+  <path d="M128 184c-15.464 0-28 12.536-28 28 0 3.523.651 6.894 1.839 10h52.322A27.933 27.933 0 00156 212c0-15.464-12.536-28-28-28z" fill="#fff" stroke="#212121"/>
+  <path d="M100.5 212h55M128 184.5V222M113.051 222c-.679-3.106-1.051-6.477-1.051-10 0-15.464 7.163-28 16-28s16 12.536 16 28c0 3.523-.372 6.894-1.051 10M103.5 198.5h49" stroke="#212121"/>
+  <path d="M114.099 201.697a3.098 3.098 0 100-6.196 3.098 3.098 0 000 6.196z" fill="#FFEE43" stroke="#212121"/>
+  <path d="M144.099 215.197a3.098 3.098 0 100-6.196 3.098 3.098 0 000 6.196z" fill="#FF8100" stroke="#212121"/>
+  <path d="M128 130v32M92 81.5v39l24 23.5v18M164 81v39l-24 23.5v18M56 106l48 45.5V162M200 106l-48 45.5V162" stroke="#212121" stroke-dasharray="3 3"/>
+  <path d="M72 167a5 5 0 015-5h102a5 5 0 015 5v9H72v-9z" fill="#fff" stroke="#212121"/>
+  <path d="M81.5 171.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#FF8100" stroke="#212121"/>
+  <path d="M91.5 171.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#FFC836" stroke="#212121"/>
+  <path d="M101.5 171.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#FFEE43" stroke="#212121"/>
+  <circle cx="56" cy="106" r="23.5" fill="#FFC836" stroke="#212121"/>
+  <circle cx="49" cy="103.5" r="2.5" fill="#212121"/>
+  <circle cx="56" cy="118" r="3" fill="#212121"/>
+  <path fill="#212121" d="M60.5 98h4v4h-4zM55.984 91l2.985 5H53l2.984-5z"/>
+  <path d="M56 94v15.5m0 9V113m6.5-12.5v3.452c0 .656-.322 1.271-.862 1.644L56 109.5m0 0v3.5m-7-9v3.839a2 2 0 001.008 1.737L56 113" stroke="#212121"/>
+  <circle cx="92" cy="58" r="23.5" fill="#FFEE43" stroke="#212121"/>
+  <path d="M81.316 61.949l-2.439-7.316A2 2 0 0180.775 52h22.45a2 2 0 011.898 2.633l-2.439 7.316A3 3 0 0199.838 64H84.162a3 3 0 01-2.846-2.051z" fill="#fff" stroke="#212121"/>
+  <circle cx="84" cy="56" r="1" fill="#212121"/>
+  <circle cx="88" cy="56" r="1" fill="#212121"/>
+  <circle cx="92" cy="56" r="1" fill="#212121"/>
+  <circle cx="96" cy="56" r="1" fill="#212121"/>
+  <circle cx="100" cy="56" r="1" fill="#212121"/>
+  <circle cx="86" cy="60" r="1" fill="#212121"/>
+  <circle cx="90" cy="60" r="1" fill="#212121"/>
+  <circle cx="94" cy="60" r="1" fill="#212121"/>
+  <circle cx="98" cy="60" r="1" fill="#212121"/>
+  <circle cx="164" cy="58" r="23.5" fill="#FFC836" stroke="#212121"/>
+  <path d="M164 58v12l6-6-6-6zm0 0l6-6-6-6v12zm0 0l-6-6m6 6l-6 6" stroke="#212121" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="128" cy="106" r="23.5" fill="#FFEE43" stroke="#212121"/>
+  <path d="M119 101a7.474 7.474 0 012 5.099 7.474 7.474 0 01-2 5.099M123.304 99c1.704 1.967 2.696 4.321 2.696 6.85 0 2.532-.994 4.889-2.702 6.857M127.901 97c2.287 2.605 3.599 5.644 3.599 8.889 0 3.247-1.314 6.288-3.604 8.895M132.395 116.402c2.682-3.182 4.205-6.827 4.205-10.701 0-3.874-1.523-7.519-4.204-10.701" stroke="#212121" stroke-linecap="round"/>
+  <circle cx="200" cy="106" r="23.5" fill="#FF8100" stroke="#212121"/>
+  <mask id="a" fill="#fff">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M197.93 110A8 8 0 11191 98h18a8 8 0 11-6.93 12h-4.14z"/>
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M197.93 110A8 8 0 11191 98h18a8 8 0 11-6.93 12h-4.14z" fill="#fff"/>
+  <path d="M197.93 110v-1h-.577l-.289.499.866.501zm4.14 0l.866-.501-.289-.499h-.577v1zM191 115a8.996 8.996 0 007.795-4.499l-1.731-1.002A6.997 6.997 0 01191 113v2zm-9-9a9 9 0 009 9v-2a7 7 0 01-7-7h-2zm9-9a9 9 0 00-9 9h2a7 7 0 017-7v-2zm0 2h18v-2h-18v2zm27 7a9 9 0 00-9-9v2a7 7 0 017 7h2zm-9 9a9 9 0 009-9h-2a7 7 0 01-7 7v2zm-7.795-4.499A8.996 8.996 0 00209 115v-2a6.997 6.997 0 01-6.064-3.501l-1.731 1.002zm.865-1.501h-4.14v2h4.14v-2z" fill="#212121" mask="url(#a)"/>
+  <circle cx="209" cy="103" r="1.5" fill="#212121"/>
+  <circle cx="209" cy="109" r="1.5" fill="#212121"/>
+  <circle cx="212" cy="106" r="1.5" fill="#212121"/>
+  <circle cx="206" cy="106" r="1.5" fill="#212121"/>
+  <path d="M191 102.5v7m-3.5-3.5h7" stroke="#212121"/>
+</svg>
diff --git a/src/images/collections/identity.svg b/src/images/collections/identity.svg
new file mode 100644
index 00000000000..ec7a31daf55
--- /dev/null
+++ b/src/images/collections/identity.svg
@@ -0,0 +1 @@
+<svg width="330" height="220" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45 160.5h240" stroke="#212121" stroke-dasharray="3 3"/><path fill="#fff" stroke="#212121" d="M71 66h188v112H71z"/><path d="M79.5 77a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#006776" stroke="#212121"/><path d="M89.5 77a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#00BFA5" stroke="#212121"/><path d="M99.5 77a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill="#00E676" stroke="#212121"/><mask id="a" maskUnits="userSpaceOnUse" x="141" y="66" width="118" height="112"><path d="M206.056 178L141.392 66H259v112h-52.944z" fill="#C4C4C4"/></mask><g mask="url(#a)" stroke="#212121"><path d="M122 83h200M122 103h200M122 123h200M122 143h200M122 163h200M142 23v200M162 23v200M182 23v200M202 23v200M222 23v200M242 23v200"/></g><path d="M206.056 178L141.392 66H259v112h-52.944z" stroke="#212121"/><circle cx="202" cy="83" r="4" fill="#006776" stroke="#212121"/><circle cx="202" cy="143" r="4" fill="#00E676" stroke="#212121"/><circle cx="242" cy="163" r="4" fill="#00BFA5" stroke="#212121"/><path fill="#fff" stroke="#212121" d="M45 178h240v8H45zM155 111h80v24h-80z"/><path d="M166.5 123v-5m0 5l4.5-1.5m-4.5 1.5l3 4m-3-4l-3 4m3-4l-4.5-1.5M179.5 123v-5m0 5l4.5-1.5m-4.5 1.5l3 4m-3-4l-3 4m3-4l-4.5-1.5M192.5 123v-5m0 5l4.5-1.5m-4.5 1.5l3 4m-3-4l-3 4m3-4l-4.5-1.5M205.5 123v-5m0 5l4.5-1.5m-4.5 1.5l3 4m-3-4l-3 4m3-4l-4.5-1.5" stroke="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.77 136.999a13.476 13.476 0 01-.103-1.666C94.667 127.97 100.636 122 108 122s13.333 5.97 13.333 13.333c0 .564-.035 1.12-.103 1.666A19.924 19.924 0 01108 142a19.926 19.926 0 01-13.23-5.001zM114.667 112a6.667 6.667 0 11-13.334 0 6.667 6.667 0 0113.334 0z" fill="#006776"/><path d="M94.77 136.999l-.496.062.023.188.142.125.33-.375zm26.46 0l.331.375.142-.125.023-.188-.496-.062zm-27.063-1.666c0 .585.036 1.162.106 1.728l.993-.124c-.066-.525-.1-1.06-.1-1.604h-1zM108 121.5c-7.64 0-13.833 6.193-13.833 13.833h1c0-7.087 5.745-12.833 12.833-12.833v-1zm13.833 13.833c0-7.64-6.193-13.833-13.833-13.833v1c7.088 0 12.833 5.746 12.833 12.833h1zm-.107 1.728c.071-.566.107-1.143.107-1.728h-1c0 .544-.033 1.079-.099 1.604l.992.124zm-.827-.437A19.423 19.423 0 01108 141.5v1c5.199 0 9.948-1.936 13.561-5.126l-.662-.75zM108 141.5a19.424 19.424 0 01-12.9-4.876l-.661.75A20.425 20.425 0 00108 142.5v-1zm0-22.333a7.167 7.167 0 007.167-7.167h-1a6.167 6.167 0 01-6.167 6.167v1zM100.833 112a7.167 7.167 0 007.167 7.167v-1a6.167 6.167 0 01-6.167-6.167h-1zm7.167-7.167a7.167 7.167 0 00-7.167 7.167h1a6.167 6.167 0 016.167-6.167v-1zm7.167 7.167a7.167 7.167 0 00-7.167-7.167v1a6.167 6.167 0 016.167 6.167h1z" fill="#212121"/><circle cx="108" cy="122" r="20" stroke="#212121"/><circle cx="128" cy="142" r="16.5" fill="#00BFA5" stroke="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M137.828 137.828l-12.414 12.415-7.414-7.415 2.828-2.828 4.586 4.586L135 135l2.828 2.828z" fill="#fff" stroke="#212121"/><path d="M225 40l-63 63M259 126l-37 37M225 80l-23 23" stroke="#212121" stroke-dasharray="2 2"/><rect x="232" y="21" width="48" height="103" rx="6" fill="#fff" stroke="#212121"/><path fill="#fff" stroke="#212121" d="M232 33h48v78h-48z"/><path d="M250 27.5h12" stroke="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M263.747 61.96a.62.62 0 01-.307-.08c-2.56-1.32-4.773-1.88-7.427-1.88-2.64 0-5.146.627-7.426 1.88a.679.679 0 01-.907-.267.675.675 0 01.267-.906c2.48-1.347 5.2-2.04 8.066-2.04 2.84 0 5.32.626 8.04 2.026a.652.652 0 01.28.894.653.653 0 01-.586.373zm-19.08 7a.665.665 0 01-.547-1.053c1.32-1.867 3-3.334 5-4.36 4.187-2.16 9.547-2.174 13.747-.014 2 1.027 3.68 2.48 5 4.334a.668.668 0 01-.16.933.666.666 0 01-.934-.16c-1.2-1.68-2.72-3-4.52-3.92-3.826-1.96-8.72-1.96-12.533.013-1.813.934-3.333 2.267-4.533 3.947a.582.582 0 01-.52.28zm7.866 15.893c.12.134.294.2.467.2a.73.73 0 00.493-.2.683.683 0 000-.946c-1.026-1.04-1.613-1.694-2.466-3.227-.814-1.44-1.24-3.213-1.24-5.133 0-3.227 2.786-5.854 6.213-5.854s6.213 2.627 6.213 5.854a.66.66 0 00.667.666.66.66 0 00.667-.666c0-3.96-3.387-7.187-7.547-7.187s-7.547 3.227-7.547 7.187c0 2.146.48 4.146 1.4 5.786.894 1.614 1.52 2.36 2.68 3.52zm10.027-2.266c-1.587 0-2.987-.4-4.133-1.187-1.987-1.347-3.174-3.533-3.174-5.853a.66.66 0 01.667-.667.66.66 0 01.667.667c0 1.88.96 3.653 2.586 4.746.947.64 2.054.947 3.387.947.32 0 .853-.04 1.387-.133a.665.665 0 01.773.546.664.664 0 01-.547.774c-.76.146-1.426.16-1.613.16zm-2.853 2.72c.053.013.12.026.173.026.28 0 .56-.2.627-.506a.662.662 0 00-.467-.814c-1.88-.52-3.093-1.213-4.36-2.466a8.398 8.398 0 01-2.493-6.014c0-1.426 1.24-2.586 2.773-2.586 1.533 0 2.773 1.16 2.773 2.586 0 2.16 1.84 3.92 4.107 3.92 2.267 0 4.107-1.76 4.107-3.92 0-5.76-4.934-10.44-11-10.44-4.307 0-8.24 2.414-10.014 6.134-.6 1.266-.906 2.72-.906 4.32 0 1.8.32 3.533.973 5.28.12.333.507.52.853.386a.65.65 0 00.387-.853c-.8-2.133-.893-3.773-.893-4.813 0-1.387.266-2.654.786-3.734 1.56-3.266 5.027-5.373 8.814-5.373 5.333 0 9.666 4.08 9.666 9.107 0 1.426-1.24 2.586-2.773 2.586-1.533 0-2.773-1.16-2.773-2.586 0-2.16-1.84-3.92-4.107-3.92-2.267 0-4.107 1.76-4.107 3.92a9.728 9.728 0 002.894 6.96c1.453 1.426 2.84 2.213 4.96 2.8z" fill="#212121"/></svg> 
diff --git a/src/images/collections/lighthouse-accessibility.svg b/src/images/collections/lighthouse-accessibility.svg
deleted file mode 100644
index a5700f1aa35..00000000000
--- a/src/images/collections/lighthouse-accessibility.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="330" height="220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="37" cy="37" r="37"/><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="c"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="d"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="e"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" y2="50%" id="f"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(100 35)" fill-rule="nonzero" stroke="#212121"><circle fill="#FF5915" cx="133" cy="20.4" r="4.8"/><circle fill="#FFA900" cx="5" cy="5" r="4.8"/><circle fill="#FF5915" cx="29" cy="143.8" r="4.8"/></g><path d="M211.785 77c-14.355 3.85-31.185 5.5-46.75 5.5-15.565 0-32.395-1.65-46.75-5.5l-2.75 11c10.23 2.75 22 4.565 33 5.5V165h11v-33h11v33h11V93.5c11-.935 22.77-2.75 33-5.5l-2.75-11zm-46.75 0c6.05 0 11-4.95 11-11s-4.95-11-11-11-11 4.95-11 11 4.95 11 11 11z" stroke="#000" fill="#FFF176" fill-rule="nonzero"/><path d="M99.035 44h132v132h-132z"/><g transform="translate(189 115)"><circle fill="#FFF" cx="37" cy="37" r="37"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M50.02 26.363H48.1v.007a3.469 3.469 0 1 0 0 6.922v.008h13.875v-.063c.226.041.458.063.694.063 2.426 0 4.394-2.278 4.394-5.087 0-2.81-1.968-5.088-4.394-5.088-.377 0-.743.055-1.091.158a6.015 6.015 0 0 0-11.557 3.08z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/><path d="M-5.088-4.625h83.25v83.25h-83.25z"/><g fill-rule="nonzero"><path fill="#FFF" d="M24.44 41.83h23.872v23.874H24.44z"/><path d="M18.595 75.687l5.41-44.708H50.05l5.41 44.708H18.595zm26.208-32.728l-16.338 5.309-1.986 13.402 20.127-6.54-1.803-12.17z" stroke="#000" fill="#F4481E"/><path stroke="#979797" stroke-width=".5" fill="#FFF176" d="M27.483 15.214h17.13V36.26h-17.13z"/><path d="M50.917 30.979h3.473v6.945H19.665v-6.945h3.472v-13.89l13.89-8.681 13.89 8.681v13.89zm-6.945 0v-10.04l-6.945-4.341-6.945 4.34v10.04h13.89z" stroke="#000" fill="#F4481E"/><path d="M33.054 29.631l4.854 32.764a38.022 38.022 0 0 1-18.905 5 38.022 38.022 0 0 1-18.904-5l4.854-32.764H1.835v-6.945h3.472V8.796l13.89-8.68 13.89 8.68v13.89h3.472v6.945h-3.505z" fill="url(#c)" transform="translate(17.83 8.293)"/><path fill="url(#d)" d="M19.197 22.686H5.307V8.796l13.89-8.68z" transform="translate(17.83 8.293)"/><path d="M19.197 67.394A38.167 38.167 0 0 1 .292 62.395l4.353-32.764h14.552v37.763z" fill="url(#e)" transform="translate(17.83 8.293)"/><path fill="url(#f)" transform="matrix(-1 0 0 1 38.862 8.293)" d="M1.835 22.686h17.362v6.945H1.835z"/></g><path d="M26.825 43.475c3.065 0 5.55-2.692 5.55-6.013 0-3.32-2.485-6.012-5.55-6.012a5.18 5.18 0 0 0-.676.044A7.864 7.864 0 0 0 11.1 34.61a4.625 4.625 0 1 0-1.85 8.865h17.575z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/></g><circle stroke="#212121" cx="37" cy="37" r="36.5"/></g></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/lighthouse-best-practices.svg b/src/images/collections/lighthouse-best-practices.svg
deleted file mode 100644
index 6616c23784b..00000000000
--- a/src/images/collections/lighthouse-best-practices.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="330" height="220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="37" cy="37" r="37"/><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="c"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="d"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="e"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" y2="50%" id="f"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(93 47)" fill-rule="nonzero" stroke="#212121"><circle fill="#FF5915" cx="5" cy="30.4" r="4.8"/><circle fill="#FFF176" cx="60" cy="5" r="4.8"/><circle fill="#FFA900" cx="31" cy="128" r="4.8"/><path d="M47.35 96.674c-1.447 2.08-1.624 5.107-.53 9.077l13.065-.484 63.073-71.1-7.358-8.277-13.667-.468C66.99 70.842 48.796 94.594 47.349 96.674z" fill="#FF5915"/><path fill="#FFF" d="M45.834 88.568L23.758 63.733 16.4 72.012l29.434 33.113 63.073-70.957-7.359-8.278z"/></g><g transform="translate(189 115)"><circle fill="#FFF" cx="37" cy="37" r="37"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M50.02 26.363H48.1v.007a3.469 3.469 0 1 0 0 6.922v.008h13.875v-.063c.226.041.458.063.694.063 2.426 0 4.394-2.278 4.394-5.087 0-2.81-1.968-5.088-4.394-5.088-.377 0-.743.055-1.091.158a6.015 6.015 0 0 0-11.557 3.08z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/><path d="M-5.088-4.625h83.25v83.25h-83.25z"/><g fill-rule="nonzero"><path fill="#FFF" d="M24.44 41.83h23.872v23.874H24.44z"/><path d="M18.595 75.687l5.41-44.708H50.05l5.41 44.708H18.595zm26.208-32.728l-16.338 5.309-1.986 13.402 20.127-6.54-1.803-12.17z" stroke="#000" fill="#F4481E"/><path stroke="#979797" stroke-width=".5" fill="#FFF176" d="M27.483 15.214h17.13V36.26h-17.13z"/><path d="M50.917 30.979h3.473v6.945H19.665v-6.945h3.472v-13.89l13.89-8.681 13.89 8.681v13.89zm-6.945 0v-10.04l-6.945-4.341-6.945 4.34v10.04h13.89z" stroke="#000" fill="#F4481E"/><path d="M33.054 29.631l4.854 32.764a38.022 38.022 0 0 1-18.905 5 38.022 38.022 0 0 1-18.904-5l4.854-32.764H1.835v-6.945h3.472V8.796l13.89-8.68 13.89 8.68v13.89h3.472v6.945h-3.505z" fill="url(#c)" transform="translate(17.83 8.293)"/><path fill="url(#d)" d="M19.197 22.686H5.307V8.796l13.89-8.68z" transform="translate(17.83 8.293)"/><path d="M19.197 67.394A38.167 38.167 0 0 1 .292 62.395l4.353-32.764h14.552v37.763z" fill="url(#e)" transform="translate(17.83 8.293)"/><path fill="url(#f)" transform="matrix(-1 0 0 1 38.862 8.293)" d="M1.835 22.686h17.362v6.945H1.835z"/></g><path d="M26.825 43.475c3.065 0 5.55-2.692 5.55-6.013 0-3.32-2.485-6.012-5.55-6.012a5.18 5.18 0 0 0-.676.044A7.864 7.864 0 0 0 11.1 34.61a4.625 4.625 0 1 0-1.85 8.865h17.575z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/></g><circle stroke="#212121" cx="37" cy="37" r="36.5"/></g></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/lighthouse-performance.svg b/src/images/collections/lighthouse-performance.svg
deleted file mode 100644
index 519e9e310bc..00000000000
--- a/src/images/collections/lighthouse-performance.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="330" height="220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="96" cy="96" r="96"/><circle id="c" cx="96" cy="96" r="96"/><circle id="e" cx="96" cy="96" r="96"/><circle id="g" cx="37" cy="37" r="37"/><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="i"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="j"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="k"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" y2="50%" id="l"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(70 14)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><circle stroke="#212121" fill="#FFF176" fill-rule="nonzero" mask="url(#b)" cx="15.6" cy="68.4" r="4.8"/></g><g transform="translate(69 14)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><circle stroke="#212121" fill="#FF5915" fill-rule="nonzero" mask="url(#d)" cx="150" cy="34" r="4.8"/></g><g transform="translate(69 14)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><circle stroke="#212121" fill="#FFA900" fill-rule="nonzero" mask="url(#f)" cx="69.6" cy="160" r="4.8"/></g><g stroke="#212121"><path d="M165.815 64.416c35.862 0 64.935 29.073 64.935 64.935v11.655H100.88v-11.655c0-35.862 29.072-64.935 64.935-64.935z" fill="#FFF" fill-rule="nonzero"/><path d="M191.221 84.048c1.555.246 2.59 1.671 2.317 3.335l-19.679 54.862-.036.062c-1.582 4.164-5.906 6.695-10.355 5.99-5.195-.822-8.74-5.702-7.917-10.897.248-1.561.906-2.992 1.896-4.262l30.814-47.5.46-.673c.638-.714 1.565-1.065 2.5-.917z" fill="#FF5915" fill-rule="nonzero"/><path d="M122.525 131.742c.39-21.658 20.547-48.728 52.994-40.312" stroke-dasharray="2.31"/></g><g transform="translate(189 115)"><circle fill="#FFF" cx="37" cy="37" r="37"/><mask id="h" fill="#fff"><use xlink:href="#g"/></mask><g mask="url(#h)"><path d="M50.02 26.363H48.1v.007a3.469 3.469 0 1 0 0 6.922v.008h13.875v-.063c.226.041.458.063.694.063 2.426 0 4.394-2.278 4.394-5.087 0-2.81-1.968-5.088-4.394-5.088-.377 0-.743.055-1.091.158a6.015 6.015 0 0 0-11.557 3.08z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/><path d="M-5.088-4.625h83.25v83.25h-83.25z"/><g fill-rule="nonzero"><path fill="#FFF" d="M24.44 41.83h23.872v23.874H24.44z"/><path d="M18.595 75.687l5.41-44.708H50.05l5.41 44.708H18.595zm26.208-32.728l-16.338 5.309-1.986 13.402 20.127-6.54-1.803-12.17z" stroke="#000" fill="#F4481E"/><path stroke="#979797" stroke-width=".5" fill="#FFF176" d="M27.483 15.214h17.13V36.26h-17.13z"/><path d="M50.917 30.979h3.473v6.945H19.665v-6.945h3.472v-13.89l13.89-8.681 13.89 8.681v13.89zm-6.945 0v-10.04l-6.945-4.341-6.945 4.34v10.04h13.89z" stroke="#000" fill="#F4481E"/><path d="M33.054 29.631l4.854 32.764a38.022 38.022 0 0 1-18.905 5 38.022 38.022 0 0 1-18.904-5l4.854-32.764H1.835v-6.945h3.472V8.796l13.89-8.68 13.89 8.68v13.89h3.472v6.945h-3.505z" fill="url(#i)" transform="translate(17.83 8.293)"/><path fill="url(#j)" d="M19.197 22.686H5.307V8.796l13.89-8.68z" transform="translate(17.83 8.293)"/><path d="M19.197 67.394A38.167 38.167 0 0 1 .292 62.395l4.353-32.764h14.552v37.763z" fill="url(#k)" transform="translate(17.83 8.293)"/><path fill="url(#l)" transform="matrix(-1 0 0 1 38.862 8.293)" d="M1.835 22.686h17.362v6.945H1.835z"/></g><path d="M26.825 43.475c3.065 0 5.55-2.692 5.55-6.013 0-3.32-2.485-6.012-5.55-6.012a5.18 5.18 0 0 0-.676.044A7.864 7.864 0 0 0 11.1 34.61a4.625 4.625 0 1 0-1.85 8.865h17.575z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/></g><circle stroke="#212121" cx="37" cy="37" r="36.5"/></g></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/lighthouse-pwa.svg b/src/images/collections/lighthouse-pwa.svg
deleted file mode 100644
index 7172ff462d6..00000000000
--- a/src/images/collections/lighthouse-pwa.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="330" height="220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="96" cy="96" r="96"/><circle id="c" cx="96" cy="96" r="96"/><circle id="e" cx="96" cy="96" r="96"/><circle id="g" cx="37" cy="37" r="37"/><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="i"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="j"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="k"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" y2="50%" id="l"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(69 14)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><circle stroke="#212121" fill="#FFA900" fill-rule="nonzero" mask="url(#b)" cx="22.6" cy="64" r="4.8"/></g><g transform="translate(69 14)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><circle stroke="#212121" fill="#FF5915" fill-rule="nonzero" mask="url(#d)" cx="157" cy="33" r="4.8"/></g><g transform="translate(69 14)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><circle stroke="#212121" fill="#FFF176" fill-rule="nonzero" mask="url(#f)" cx="41" cy="159.8" r="4.8"/></g><g fill-rule="nonzero" stroke="#000"><path d="M167.255 55.127l47.04 20.906v31.36c0 29.008-20.07 56.135-47.04 62.72-26.97-6.585-47.04-33.712-47.04-62.72v-31.36l47.04-20.906zm-4.197 96.172s8.196-14.426 24.67-43.236l.293-.627c.377-.753.084-2.133-1.965-2.133h-14.635l4.181-29.27h-4.181c-10.788 18.984-18.9 33.2-24.294 42.735-.084.167.502-.92-.293.501-.794 1.422-.836 2.76 1.59 2.76h14.634l-4.181 29.27h4.181z" fill="#FFF176"/><path d="M163.058 151.299s8.196-14.426 24.67-43.236l.293-.627c.377-.753.084-2.133-1.965-2.133h-14.635l4.181-29.27h-4.181c-10.788 18.984-18.9 33.2-24.294 42.735-.084.167.502-.92-.293.501-.794 1.422-.836 2.76 1.59 2.76h14.634l-4.181 29.27h4.181z" fill="#FFF"/></g><g transform="translate(189 115)"><circle fill="#FFF" cx="37" cy="37" r="37"/><mask id="h" fill="#fff"><use xlink:href="#g"/></mask><g mask="url(#h)"><path d="M50.02 26.363H48.1v.007a3.469 3.469 0 1 0 0 6.922v.008h13.875v-.063c.226.041.458.063.694.063 2.426 0 4.394-2.278 4.394-5.087 0-2.81-1.968-5.088-4.394-5.088-.377 0-.743.055-1.091.158a6.015 6.015 0 0 0-11.557 3.08z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/><path d="M-5.088-4.625h83.25v83.25h-83.25z"/><g fill-rule="nonzero"><path fill="#FFF" d="M24.44 41.83h23.872v23.874H24.44z"/><path d="M18.595 75.687l5.41-44.708H50.05l5.41 44.708H18.595zm26.208-32.728l-16.338 5.309-1.986 13.402 20.127-6.54-1.803-12.17z" stroke="#000" fill="#F4481E"/><path stroke="#979797" stroke-width=".5" fill="#FFF176" d="M27.483 15.214h17.13V36.26h-17.13z"/><path d="M50.917 30.979h3.473v6.945H19.665v-6.945h3.472v-13.89l13.89-8.681 13.89 8.681v13.89zm-6.945 0v-10.04l-6.945-4.341-6.945 4.34v10.04h13.89z" stroke="#000" fill="#F4481E"/><path d="M33.054 29.631l4.854 32.764a38.022 38.022 0 0 1-18.905 5 38.022 38.022 0 0 1-18.904-5l4.854-32.764H1.835v-6.945h3.472V8.796l13.89-8.68 13.89 8.68v13.89h3.472v6.945h-3.505z" fill="url(#i)" transform="translate(17.83 8.293)"/><path fill="url(#j)" d="M19.197 22.686H5.307V8.796l13.89-8.68z" transform="translate(17.83 8.293)"/><path d="M19.197 67.394A38.167 38.167 0 0 1 .292 62.395l4.353-32.764h14.552v37.763z" fill="url(#k)" transform="translate(17.83 8.293)"/><path fill="url(#l)" transform="matrix(-1 0 0 1 38.862 8.293)" d="M1.835 22.686h17.362v6.945H1.835z"/></g><path d="M26.825 43.475c3.065 0 5.55-2.692 5.55-6.013 0-3.32-2.485-6.012-5.55-6.012a5.18 5.18 0 0 0-.676.044A7.864 7.864 0 0 0 11.1 34.61a4.625 4.625 0 1 0-1.85 8.865h17.575z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/></g><circle stroke="#212121" cx="37" cy="37" r="36.5"/></g></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/lighthouse-seo.svg b/src/images/collections/lighthouse-seo.svg
deleted file mode 100644
index 745e0db6659..00000000000
--- a/src/images/collections/lighthouse-seo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="330" height="220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="37" cy="37" r="37"/><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="c"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="d"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="e"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" y2="50%" id="f"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="matrix(-1 0 0 1 252 28)" fill-rule="nonzero" stroke="#212121"><circle fill="#FF5915" cx="5.6" cy="60.8" r="4.8"/><circle fill="#FFA900" cx="87" cy="5.6" r="4.8"/><circle fill="#FFF176" cx="170.4" cy="107.2" r="4.8"/><path d="M134.77 135.957l-11.64.608c-7.175-15.71-13.36-26.164-18.557-31.36-7.794-7.794.842-15.744.842-38.349 0-22.605-52.288-26.574-36.082-31.99 4.082-1.365 12.865-.676 17.413-.676 22.605 0 40.852 18.248 40.852 40.852 0 7.989-2.36 15.342-6.355 21.697l26.418 26.327-12.891 12.89z" fill="#FFA900"/><path d="M122.152 135.957l-26.418-26.418c-6.264 3.995-13.708 6.355-21.696 6.355-22.514 0-40.761-18.247-40.761-40.852 0-22.604 18.247-40.852 40.851-40.852 22.605 0 40.852 18.248 40.852 40.852 0 7.989-2.36 15.342-6.355 21.697l26.418 26.327-12.891 12.89zm-48.024-83.61c-12.528 0-22.695 10.167-22.695 22.695S61.6 97.738 74.128 97.738 96.824 87.57 96.824 75.042c0-12.528-10.168-22.695-22.696-22.695z" fill="#FFF"/></g><g transform="translate(189 115)"><circle fill="#FFF" cx="37" cy="37" r="37"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M50.02 26.363H48.1v.007a3.469 3.469 0 1 0 0 6.922v.008h13.875v-.063c.226.041.458.063.694.063 2.426 0 4.394-2.278 4.394-5.087 0-2.81-1.968-5.088-4.394-5.088-.377 0-.743.055-1.091.158a6.015 6.015 0 0 0-11.557 3.08z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/><path d="M-5.088-4.625h83.25v83.25h-83.25z"/><g fill-rule="nonzero"><path fill="#FFF" d="M24.44 41.83h23.872v23.874H24.44z"/><path d="M18.595 75.687l5.41-44.708H50.05l5.41 44.708H18.595zm26.208-32.728l-16.338 5.309-1.986 13.402 20.127-6.54-1.803-12.17z" stroke="#000" fill="#F4481E"/><path stroke="#979797" stroke-width=".5" fill="#FFF176" d="M27.483 15.214h17.13V36.26h-17.13z"/><path d="M50.917 30.979h3.473v6.945H19.665v-6.945h3.472v-13.89l13.89-8.681 13.89 8.681v13.89zm-6.945 0v-10.04l-6.945-4.341-6.945 4.34v10.04h13.89z" stroke="#000" fill="#F4481E"/><path d="M33.054 29.631l4.854 32.764a38.022 38.022 0 0 1-18.905 5 38.022 38.022 0 0 1-18.904-5l4.854-32.764H1.835v-6.945h3.472V8.796l13.89-8.68 13.89 8.68v13.89h3.472v6.945h-3.505z" fill="url(#c)" transform="translate(17.83 8.293)"/><path fill="url(#d)" d="M19.197 22.686H5.307V8.796l13.89-8.68z" transform="translate(17.83 8.293)"/><path d="M19.197 67.394A38.167 38.167 0 0 1 .292 62.395l4.353-32.764h14.552v37.763z" fill="url(#e)" transform="translate(17.83 8.293)"/><path fill="url(#f)" transform="matrix(-1 0 0 1 38.862 8.293)" d="M1.835 22.686h17.362v6.945H1.835z"/></g><path d="M26.825 43.475c3.065 0 5.55-2.692 5.55-6.013 0-3.32-2.485-6.012-5.55-6.012a5.18 5.18 0 0 0-.676.044A7.864 7.864 0 0 0 11.1 34.61a4.625 4.625 0 1 0-1.85 8.865h17.575z" stroke="#212324" fill="#FFF" fill-rule="nonzero"/></g><circle stroke="#212121" cx="37" cy="37" r="36.5"/></g></g></svg>
\ No newline at end of file
diff --git a/src/images/collections/media.svg b/src/images/collections/media.svg
new file mode 100644
index 00000000000..0dc237b9cfe
--- /dev/null
+++ b/src/images/collections/media.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="220" fill="none" viewBox="-32 13 320 220"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 72a4 4 0 014-4h184a4 4 0 014 4v10H32V72z" fill="#fff" stroke="#000"/><circle cx="40" cy="75" r="2.5" fill="#3740FF" stroke="#000"/><circle cx="50" cy="75" r="2.5" fill="#2979FF" stroke="#000"/><circle cx="60" cy="75" r="2.5" fill="#3FC4FF" stroke="#000"/><path d="M224 188V82H32v106" stroke="#000"/><mask id="a" fill="#fff"><path fill-rule="evenodd" clip-rule="evenodd" d="M134 93h50v30h-50V93zm-62 20h50v31H72v-31zm112 20h-50v30h50v-30z"/></mask><path d="M184 93h1v-1h-1v1zm-50 0v-1h-1v1h1zm50 30v1h1v-1h-1zm-50 0h-1v1h1v-1zm-12-10h1v-1h-1v1zm-50 0v-1h-1v1h1zm50 31v1h1v-1h-1zm-50 0h-1v1h1v-1zm62-11v-1h-1v1h1zm50 0h1v-1h-1v1zm-50 30h-1v1h1v-1zm50 0v1h1v-1h-1zm0-71h-50v2h50v-2zm1 31V93h-2v30h2zm-51 1h50v-2h-50v2zm-1-31v30h2V93h-2zm-11 19H72v2h50v-2zm1 32v-31h-2v31h2zm-51 1h50v-2H72v2zm-1-32v31h2v-31h-2zm63 21h50v-2h-50v2zm1 29v-30h-2v30h2zm49-1h-50v2h50v-2zm-1-29v30h2v-30h-2z" fill="#000" mask="url(#a)"/><mask id="b" maskUnits="userSpaceOnUse" x="72" y="93" width="112" height="70"><path fill-rule="evenodd" clip-rule="evenodd" d="M134 93h50v30h-50V93zm-62 20h50v31H72v-31zm112 20h-50v30h50v-30z" fill="#C4C4C4"/></mask><g mask="url(#b)" stroke="#000"><path d="M80 87.5V168M92 87.5V168M104 87.5V168M116 87.5V168M128 87.5V168M140 87.5V168M152 87.5V168M164 87.5V168M176 87.5V168M68 104.5h120.5M68 116.5h120.5M68 128.5h120.5M68 140.5h120.5M68 152.5h120.5"/></g><path d="M9.5 128.5l63-15M134.5 93.5l17-45m32 74l63-15m-142 80l17-44m13 19l17 45M183.5 133.5l63 15" stroke="#000" stroke-dasharray="2 2"/><circle cx="116" cy="128.5" r="3" fill="#3FC4FF" stroke="#000"/><circle cx="152" cy="116.5" r="3" fill="#2979FF" stroke="#000"/><circle cx="140" cy="152.5" r="3" fill="#3740FF" stroke="#000"/><circle cx="176" cy="140.5" r="3" fill="#3740FF" stroke="#000"/><path fill="#fff" stroke="#000" d="M9.5 128.5h95v59h-95z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M57 178c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20zm-5-11.34L67 158l-15-8.66v17.32z" fill="#3FC4FF"/><path d="M67 158l.25.433L68 158l-.75-.433L67 158zm-15 8.66h-.5v.866l.75-.433-.25-.433zm0-17.32l.25-.433-.75-.433v.866h.5zM76.5 158c0 10.77-8.73 19.5-19.5 19.5v1c11.322 0 20.5-9.178 20.5-20.5h-1zM57 138.5c10.77 0 19.5 8.73 19.5 19.5h1c0-11.322-9.178-20.5-20.5-20.5v1zM37.5 158c0-10.77 8.73-19.5 19.5-19.5v-1c-11.322 0-20.5 9.178-20.5 20.5h1zM57 177.5c-10.77 0-19.5-8.73-19.5-19.5h-1c0 11.322 9.178 20.5 20.5 20.5v-1zm9.75-19.933l-15 8.66.5.866 15-8.66-.5-.866zm-15-7.794l15 8.66.5-.866-15-8.66-.5.866zm.75 16.887v-17.32h-1v17.32h1z" fill="#000"/><path fill="#fff" stroke="#000" d="M151.5 48.5h95v59h-95z"/><circle cx="183" cy="91" r="5.5" fill="#2979FF" stroke="#000"/><circle cx="207" cy="85" r="5.5" fill="#2979FF" stroke="#000"/><path d="M188.5 71.366v-5.972l24-5.76v5.972l-24 5.76z" fill="#2979FF" stroke="#000"/><path d="M188.5 67v24M212.5 61v24" stroke="#000"/><path fill="#fff" stroke="#000" d="M151.5 148.5h95v59h-95z"/><path d="M192.072 174L199 162l6.928 12h-13.856z" fill="#3FC4FF" stroke="#000"/><circle cx="189" cy="186" r="7.5" fill="#2979FF" stroke="#000"/><path fill="#3740FF" stroke="#000" d="M202.5 179h14v14h-14z"/></svg>
diff --git a/src/images/collections/mini-apps.svg b/src/images/collections/mini-apps.svg
new file mode 100644
index 00000000000..5c970032696
--- /dev/null
+++ b/src/images/collections/mini-apps.svg
@@ -0,0 +1 @@
+<svg width="330" height="220" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M83 47l30-9v69l-30 9V47z" fill="#fff" stroke="#212121"/><path d="M83 47l30-9v70l-30 9V47z" fill="#fff" stroke="#212121"/><path d="M83 47v70M93 44v70M103 41v70M83 57l30-9M83 67l30-9M83 77l30-9M83 87l30-9M83 97l30-9M83 107l30-9" stroke="#212121"/><path d="M93 57a3 3 0 100-6 3 3 0 000 6z" fill="#A249FF" stroke="#212121"/><path d="M103 74a3 3 0 100-6 3 3 0 000 6z" fill="#EA80FC" stroke="#212121"/><path d="M217 38l30 9v70l-30-9V38z" fill="#fff" stroke="#212121"/><path d="M237 44v70M227 41v70M217 48l30 9M217 58l30 9M217 68l30 9M217 78l30 9M217 88l30 9M217 98l30 9" stroke="#212121"/><path d="M227 64a3 3 0 100-6 3 3 0 000 6z" fill="#6600ED" stroke="#212121"/><path d="M237 87a3 3 0 100-6 3 3 0 000 6z" fill="#A249FF" stroke="#212121"/><rect x="129" y="29" width="72" height="160" rx="10" fill="#fff" stroke="#212121"/><path fill="#fff" stroke="#212121" d="M129 45h72v128h-72z"/><path d="M156 37.5h18" stroke="#212121"/><path d="M136 62v-9l4 9 4-9v9m3-6v6m0-9v1m3 8v-5.5h2a2 2 0 012 2V62m3-6v6m0-9v1m4.5 8l1.2-3m5.8 3l-1.2-3m0 0l-2.3-6-2.3 6m4.6 0h-4.6m8.3 5v-2.5m0 0v-5h2a2 2 0 012 2v1a2 2 0 01-2 2h-2zm7 0v-5h2a2 2 0 012 2v1a2 2 0 01-2 2h-2zm0 0V64m6.5-2.5h2.3c.6 0 1.2-.6 1.2-1.3v0c0-.6-.6-1.2-1.3-1.2h-.4c-.7 0-1.3-.6-1.3-1.3v0c0-.6.6-1.2 1.3-1.2h2.2" stroke="#212121" stroke-linejoin="bevel"/><rect x="137" y="93" width="12" height="12" rx="6" fill="#6600ED" stroke="#212121"/><path fill="#A249FF" stroke="#212121" d="M136 121l7-7 7.2 7-7.1 7.2zM159 93h12v12h-12z"/><path d="M187 92l8 13.9h-16l8-13.9zM165 114l7 5-2.7 8.3h-8.6l-2.7-8.2 7-5.1z" fill="#EA80FC" stroke="#212121"/><path d="M119.4 63l-6 1m97.2-1l6 1M75 75.8C56.3 84 45 95.2 45 107.4c0 26.5 53.7 48 120 48s120-21.5 120-48c0-12.2-11.3-23.3-30-31.7" stroke="#212121" stroke-dasharray="4 4"/><path d="M227 111l40-18v80l-40 18v-80z" fill="#212121"/><path d="M226 110l40-18v80l-40 18v-80z" fill="#212121"/><path d="M227 111l40-18m-40 18v80m0-80l-1-1m41-17v80m0-80l-1-1m1 81l-40 18m40-18l-1-1m-39 19l-1-1m0-80l40-18m-40 18v80m40-98v80m0 0l-40 18" stroke="#212121"/><path d="M227 111l40-18v80l-40 18v-80z" fill="#fff" stroke="#212121" stroke-linejoin="bevel"/><path d="M231 115l6 4m0-6.4l-6 8.8" stroke="#212121"/><path d="M247 129l10 15-20 10 10-25z" fill="#EA80FC" stroke="#212121"/><path d="M63 93l40 18v80l-40-18V93z" fill="#212121"/><path d="M64 92l40 18v80l-40-18V92z" fill="#212121"/><path d="M63 93l40 18M63 93v80l40 18M63 93l1-1m39 19v80m0-80l1-1m-1 81l1-1M64 92l40 18M64 92v80l40 18m0-80v80" stroke="#212121"/><path d="M63 93l40 18v80l-40-18V93z" fill="#fff" stroke="#212121" stroke-linejoin="bevel"/><path d="M67 100l6 9m0-6.4l-6 3.8" stroke="#212121"/><ellipse cx="83" cy="144" rx="8" ry="10" transform="rotate(-30 83 144)" fill="#6600ED" stroke="#212121"/><path d="M45 109a3 3 0 100-6 3 3 0 000 6z" fill="#A249FF" stroke="#212121"/><path d="M285 109a3 3 0 100-6 3 3 0 000 6z" fill="#EA80FC" stroke="#212121"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/web-vitals.svg b/src/images/collections/web-vitals.svg
similarity index 100%
rename from src/site/content/en/vitals/web-vitals.svg
rename to src/images/collections/web-vitals.svg
diff --git a/src/images/courses/accessibility/background.svg b/src/images/courses/accessibility/background.svg
new file mode 100644
index 00000000000..a3597190ee4
--- /dev/null
+++ b/src/images/courses/accessibility/background.svg
@@ -0,0 +1,20 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1864_2099)">
+<path d="M164.934 217.984C184.749 218.628 206.128 217.145 228.152 213.262C281.489 203.857 326.457 182.517 352.119 157.354M164.934 217.984C104.986 216.036 59.3507 194.62 53.4763 161.305C45.6602 116.977 111.193 68.3704 199.848 52.7381C288.502 37.1059 366.708 60.3679 374.524 104.695C377.637 122.354 369.111 140.692 352.119 157.354M164.934 217.984C196.595 268.927 237.96 297.74 269.749 286.17C312.046 270.775 321.374 189.719 290.585 105.125C287.177 95.7624 283.421 86.7486 279.377 78.1421M164.934 217.984C159.132 208.648 153.655 198.568 148.623 187.858M148.623 187.858C144.579 179.251 140.823 170.238 137.415 160.875C106.625 76.2812 115.954 -4.77516 158.251 -20.1699C195.866 -33.8607 246.888 8.99003 279.377 78.1421M148.623 187.858C156.396 193.334 164.621 198.599 173.25 203.581C251.212 248.592 332.656 253.481 355.162 214.5C364.128 198.971 362.387 178.823 352.119 157.354M148.623 187.858C86.163 143.854 52.8231 86.1664 72.8377 51.5C95.3433 12.5191 176.788 17.4077 254.75 62.4189C263.379 67.4009 271.603 72.6655 279.377 78.1421M279.377 78.1421C313.858 102.434 339.464 130.897 352.119 157.354M377 133C377 223.022 304.022 296 214 296C123.978 296 51 223.022 51 133C51 42.9776 123.978 -30 214 -30C304.022 -30 377 42.9776 377 133ZM296.327 215.327C232.672 278.983 144.21 293.727 98.7417 248.258C53.2735 202.79 68.0172 114.328 131.673 50.6726C195.328 -12.9829 283.79 -27.7266 329.258 17.7416C374.727 63.2098 359.983 151.672 296.327 215.327Z" stroke="#AAEEFF" stroke-width="0.582143"/>
+<g clip-path="url(#clip1_1864_2099)">
+<path d="M258.161 116.664H259.265L264.467 128.883H263.206L261.945 125.966H255.481L254.219 128.883H252.958L258.161 116.664ZM257.373 132.312C258.266 132.312 259.015 132.614 259.619 133.219C260.224 133.823 260.526 134.572 260.526 135.465C260.526 135.938 260.427 136.392 260.23 136.825C260.033 137.259 259.751 137.633 259.383 137.949L258.2 139.052L260.684 141.535L263.167 139.092L264.073 139.959L261.59 142.442L263.797 144.649L262.93 145.516L260.723 143.309L258.634 145.398C258.292 145.74 257.918 146.003 257.511 146.187C257.103 146.37 256.65 146.462 256.151 146.462C255.31 146.462 254.587 146.16 253.983 145.556C253.378 144.951 253.076 144.216 253.076 143.349C253.076 142.902 253.162 142.468 253.332 142.048C253.503 141.627 253.773 141.273 254.14 140.984L256.387 138.895L255.126 137.673C254.811 137.384 254.574 137.049 254.416 136.668C254.259 136.287 254.18 135.899 254.18 135.505C254.18 134.611 254.489 133.856 255.106 133.238C255.724 132.621 256.479 132.312 257.373 132.312ZM257.254 139.801L255.008 141.851C254.797 142.035 254.633 142.258 254.515 142.521C254.397 142.784 254.338 143.06 254.338 143.349C254.338 143.874 254.522 144.314 254.889 144.669C255.257 145.024 255.704 145.201 256.23 145.201C256.519 145.201 256.781 145.135 257.018 145.004C257.254 144.873 257.478 144.702 257.688 144.492L259.816 142.403L257.254 139.801ZM257.333 133.534C256.808 133.534 256.361 133.725 255.993 134.106C255.625 134.487 255.441 134.94 255.441 135.465C255.441 135.728 255.487 135.978 255.579 136.214C255.671 136.451 255.809 136.648 255.993 136.806L257.294 138.185L258.437 137.081C258.7 136.871 258.903 136.628 259.048 136.352C259.192 136.076 259.265 135.794 259.265 135.505C259.265 134.953 259.081 134.487 258.713 134.106C258.345 133.725 257.885 133.534 257.333 133.534ZM258.634 118.556L256.032 124.744H261.393L258.792 118.556H258.634ZM275.74 116.27C275.846 116.506 275.944 116.736 276.036 116.96C276.128 117.183 276.2 117.426 276.253 117.689L274.873 118.083L281.653 118.044V119.305H279.603C279.314 120.382 278.861 121.381 278.243 122.3C277.626 123.22 276.923 124.048 276.135 124.784C276.897 125.388 277.711 125.881 278.578 126.262C279.446 126.643 280.339 126.952 281.259 127.188L280.983 128.371C279.932 128.134 278.927 127.773 277.967 127.287C277.008 126.8 276.108 126.216 275.267 125.533C274.427 126.242 273.5 126.82 272.489 127.267C271.477 127.714 270.432 128.081 269.355 128.371L269.079 127.227C270.051 126.991 270.991 126.676 271.897 126.281C272.804 125.887 273.665 125.388 274.479 124.784C273.691 124.022 273.001 123.181 272.41 122.261C271.819 121.341 271.405 120.356 271.168 119.305H268.646V118.044L274.558 118.083C274.505 117.873 274.446 117.656 274.381 117.433C274.315 117.209 274.229 116.992 274.124 116.782L275.74 116.27ZM280.116 133.337L281.022 134.204L269.867 145.319L269 144.492L280.116 133.337ZM271.208 134.007C271.602 134.007 271.93 134.138 272.193 134.401C272.456 134.664 272.587 134.992 272.587 135.387C272.587 135.781 272.456 136.109 272.193 136.372C271.93 136.635 271.602 136.766 271.208 136.766C270.813 136.766 270.485 136.635 270.222 136.372C269.959 136.109 269.828 135.781 269.828 135.387C269.828 134.992 269.959 134.664 270.222 134.401C270.485 134.138 270.813 134.007 271.208 134.007ZM272.39 119.305C272.6 120.251 272.955 121.125 273.454 121.926C273.954 122.727 274.571 123.43 275.307 124.035C276.043 123.43 276.673 122.721 277.199 121.906C277.724 121.092 278.105 120.225 278.342 119.305H272.39ZM279.091 141.89C279.485 141.89 279.813 142.022 280.076 142.284C280.339 142.547 280.47 142.876 280.47 143.27C280.47 143.664 280.339 143.992 280.076 144.255C279.813 144.518 279.485 144.649 279.091 144.649C278.697 144.649 278.368 144.518 278.105 144.255C277.843 143.992 277.711 143.664 277.711 143.27C277.711 142.876 277.843 142.547 278.105 142.284C278.368 142.022 278.697 141.89 279.091 141.89Z" fill="#99DD33"/>
+</g>
+<path d="M297.231 13.2157C293.116 14.3017 288.315 14.7875 283.857 14.7875C279.399 14.7875 274.598 14.3017 270.482 13.2157L269.682 16.3593C272.597 17.1595 275.969 17.6739 279.113 17.9311V38.3643H282.256V28.9336H285.4V38.3643H288.544V17.9311C291.687 17.6739 295.059 17.1309 297.974 16.3593L297.231 13.2157ZM283.857 13.2157C285.6 13.2157 287 11.8154 287 10.0722C287 8.32891 285.6 6.92859 283.857 6.92859C282.114 6.92859 280.713 8.35749 280.713 10.0722C280.713 11.7868 282.142 13.2157 283.857 13.2157Z" stroke="#3399FF" stroke-width="0.756786"/>
+<path d="M113.377 134.393C112.407 134.393 111.582 134.102 110.903 133.52C110.224 132.938 109.7 132.142 109.331 131.133C109.02 130.318 108.652 129.639 108.225 129.096C107.798 128.552 107.07 127.864 106.042 127.029C104.839 126.078 103.951 125.035 103.379 123.9C102.806 122.765 102.52 121.46 102.52 119.985C102.52 117.87 103.214 116.119 104.601 114.731C105.988 113.344 107.74 112.65 109.855 112.65C111.834 112.65 113.503 113.252 114.861 114.455C116.22 115.658 116.986 117.21 117.161 119.112H116.52C116.346 117.404 115.633 116.007 114.381 114.921C113.129 113.834 111.621 113.291 109.855 113.291C107.973 113.291 106.386 113.936 105.096 115.226C103.805 116.517 103.16 118.103 103.16 119.985C103.16 121.402 103.485 122.678 104.135 123.813C104.785 124.948 105.654 125.933 106.74 126.767C107.555 127.388 108.186 127.995 108.632 128.586C109.079 129.178 109.506 129.95 109.913 130.9C110.282 131.774 110.743 132.467 111.296 132.982C111.849 133.496 112.542 133.753 113.377 133.753C114.095 133.753 114.735 133.53 115.298 133.083C115.861 132.637 116.249 132.074 116.462 131.395H117.161C116.947 132.268 116.496 132.986 115.807 133.549C115.118 134.112 114.308 134.393 113.377 134.393ZM100.715 127.815C99.7838 126.748 99.061 125.545 98.5467 124.206C98.0325 122.867 97.7754 121.45 97.7754 119.956C97.7754 118.462 98.0325 117.031 98.5467 115.663C99.061 114.295 99.7838 113.087 100.715 112.039L101.181 112.417C100.288 113.465 99.6043 114.625 99.1289 115.896C98.6535 117.167 98.4157 118.52 98.4157 119.956C98.4157 121.353 98.6583 122.687 99.1434 123.958C99.6285 125.229 100.308 126.389 101.181 127.437L100.715 127.815ZM109.855 122.256C109.214 122.256 108.676 122.037 108.239 121.601C107.803 121.164 107.584 120.626 107.584 119.985C107.584 119.345 107.803 118.801 108.239 118.355C108.676 117.909 109.214 117.686 109.855 117.686C110.495 117.686 111.034 117.909 111.47 118.355C111.907 118.801 112.125 119.345 112.125 119.985C112.125 120.626 111.907 121.164 111.47 121.601C111.034 122.037 110.495 122.256 109.855 122.256Z" fill="#3399FF"/>
+<path d="M331.593 100.691L331.098 100.225C329.177 98.4789 327.595 96.9799 326.353 95.7283C325.111 94.4767 324.127 93.3803 323.399 92.4392C322.671 91.4981 322.167 90.654 321.885 89.9069C321.604 89.1598 321.463 88.4176 321.463 87.6802C321.463 86.3218 321.924 85.1818 322.846 84.2601C323.768 83.3384 324.908 82.8775 326.266 82.8775C327.314 82.8775 328.289 83.1686 329.191 83.7507C330.094 84.3329 330.894 85.1867 331.593 86.3121C332.33 85.1673 333.14 84.3086 334.023 83.7362C334.906 83.1637 335.871 82.8775 336.919 82.8775C338.278 82.8775 339.418 83.3384 340.339 84.2601C341.261 85.1818 341.722 86.3218 341.722 87.6802C341.722 88.4176 341.581 89.1598 341.3 89.9069C341.019 90.654 340.514 91.4981 339.786 92.4392C339.059 93.3803 338.074 94.4767 336.832 95.7283C335.59 96.9799 334.009 98.4789 332.087 100.225L331.593 100.691ZM331.593 99.8179C333.475 98.0908 335.027 96.6161 336.25 95.3936C337.472 94.1711 338.443 93.1038 339.161 92.1918C339.878 91.2798 340.378 90.4696 340.66 89.7613C340.941 89.0531 341.082 88.3593 341.082 87.6802C341.082 86.4965 340.684 85.5068 339.888 84.7113C339.093 83.9157 338.103 83.5179 336.919 83.5179C335.949 83.5179 335.061 83.7992 334.256 84.362C333.451 84.9247 332.66 85.827 331.884 87.0689H331.302C330.506 85.827 329.706 84.9247 328.9 84.362C328.095 83.7992 327.217 83.5179 326.266 83.5179C325.102 83.5179 324.117 83.9157 323.312 84.7113C322.506 85.5068 322.104 86.5062 322.104 87.7093C322.104 88.3885 322.244 89.0773 322.526 89.7759C322.807 90.4745 323.302 91.2798 324.01 92.1918C324.719 93.1038 325.689 94.1711 326.921 95.3936C328.153 96.6161 329.71 98.0908 331.593 99.8179Z" fill="#FF66CC"/>
+<path d="M171.503 126.796C172.571 126.796 173.483 126.413 174.239 125.647C174.996 124.88 175.375 123.973 175.375 122.925C175.375 121.858 174.991 120.946 174.225 120.189C173.458 119.432 172.551 119.054 171.503 119.054C170.436 119.054 169.524 119.437 168.767 120.203C168.01 120.97 167.632 121.877 167.632 122.925C167.632 123.992 168.015 124.904 168.782 125.661C169.548 126.418 170.455 126.796 171.503 126.796ZM171.503 126.098C170.611 126.098 169.859 125.787 169.248 125.166C168.636 124.545 168.331 123.798 168.331 122.925C168.331 122.032 168.641 121.28 169.262 120.669C169.883 120.058 170.63 119.752 171.503 119.752C172.396 119.752 173.148 120.063 173.759 120.684C174.37 121.305 174.676 122.052 174.676 122.925C174.676 123.818 174.366 124.57 173.745 125.181C173.124 125.792 172.377 126.098 171.503 126.098ZM171.503 130.144C169.097 130.144 166.895 129.489 164.896 128.179C162.897 126.869 161.374 125.118 160.326 122.925C161.374 120.732 162.897 118.981 164.896 117.671C166.895 116.361 169.097 115.706 171.503 115.706C173.91 115.706 176.112 116.361 178.111 117.671C180.109 118.981 181.633 120.732 182.68 122.925C181.633 125.118 180.109 126.869 178.111 128.179C176.112 129.489 173.91 130.144 171.503 130.144ZM171.503 129.503C173.754 129.503 175.816 128.911 177.689 127.728C179.561 126.544 180.992 124.943 181.982 122.925C180.992 120.907 179.561 119.306 177.689 118.122C175.816 116.939 173.754 116.347 171.503 116.347C169.252 116.347 167.191 116.939 165.318 118.122C163.445 119.306 162.014 120.907 161.025 122.925C162.014 124.943 163.445 126.544 165.318 127.728C167.191 128.911 169.252 129.503 171.503 129.503Z" fill="#FF66CC"/>
+</g>
+<defs>
+<clipPath id="clip0_1864_2099">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1864_2099">
+<rect width="37.8393" height="19.7929" fill="white" transform="translate(248.347 112.446)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/accessibility/card.svg b/src/images/courses/accessibility/card.svg
new file mode 100644
index 00000000000..2131ffc0d59
--- /dev/null
+++ b/src/images/courses/accessibility/card.svg
@@ -0,0 +1,36 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1847_1944)">
+<rect width="640" height="320" fill="white"/>
+<path d="M281.715 391.985C315.753 393.092 352.478 390.544 390.311 383.873C481.933 367.718 559.178 331.06 603.259 287.835M281.715 391.985C178.736 388.639 100.345 351.85 90.2538 294.621C76.8274 218.476 189.399 134.98 341.689 108.127C493.98 81.274 628.32 121.233 641.746 197.378C647.095 227.713 632.448 259.214 603.259 287.835M281.715 391.985C336.103 479.495 407.158 528.989 461.765 509.114C534.422 482.669 550.447 343.431 497.557 198.117C491.703 182.034 485.25 166.55 478.304 151.766M281.715 391.985C271.747 375.948 262.34 358.633 253.696 340.234M253.696 340.234C246.75 325.45 240.297 309.966 234.443 293.883C181.553 148.569 197.577 9.33102 270.234 -17.1139C334.849 -40.6319 422.494 32.9767 478.304 151.766M253.696 340.234C267.049 349.642 281.177 358.686 296 367.244C429.922 444.563 569.827 452.961 608.487 386C623.888 359.325 620.898 324.714 603.259 287.835M253.696 340.234C146.403 264.645 89.1317 165.55 123.513 106C162.173 39.039 302.078 47.4366 436 124.756C450.823 133.314 464.951 142.358 478.304 151.766M478.304 151.766C537.535 193.495 581.521 242.387 603.259 287.835M646 246C646 400.64 520.64 526 366 526C211.36 526 86 400.64 86 246C86 91.3603 211.36 -34 366 -34C520.64 -34 646 91.3603 646 246ZM507.421 387.421C398.075 496.768 246.115 522.095 168.01 443.99C89.9054 365.885 115.232 213.925 224.579 104.579C333.926 -4.76816 485.885 -30.0948 563.99 48.0101C642.095 126.115 616.768 278.075 507.421 387.421Z" stroke="#AAEEFF"/>
+<g clip-path="url(#clip1_1847_1944)">
+<path d="M441.859 228.245H443.755L452.693 249.234H450.526L448.359 244.224H437.255L435.089 249.234H432.922L441.859 228.245ZM440.505 255.125C442.04 255.125 443.326 255.644 444.365 256.682C445.403 257.72 445.922 259.007 445.922 260.542C445.922 261.354 445.753 262.133 445.414 262.878C445.076 263.622 444.59 264.266 443.958 264.807L441.927 266.703L446.193 270.969L450.458 266.771L452.016 268.26L447.75 272.526L451.542 276.318L450.052 277.807L446.26 274.016L442.672 277.604C442.085 278.191 441.442 278.642 440.742 278.958C440.043 279.274 439.264 279.432 438.406 279.432C436.962 279.432 435.72 278.913 434.682 277.875C433.644 276.837 433.125 275.573 433.125 274.083C433.125 273.316 433.272 272.571 433.565 271.849C433.859 271.127 434.321 270.517 434.953 270.021L438.813 266.432L436.646 264.333C436.104 263.837 435.698 263.261 435.427 262.607C435.156 261.952 435.021 261.286 435.021 260.609C435.021 259.075 435.551 257.777 436.612 256.716C437.673 255.655 438.97 255.125 440.505 255.125ZM440.302 267.99L436.443 271.51C436.082 271.826 435.799 272.21 435.596 272.661C435.393 273.113 435.292 273.587 435.292 274.083C435.292 274.986 435.608 275.742 436.24 276.352C436.872 276.961 437.639 277.266 438.542 277.266C439.038 277.266 439.49 277.153 439.896 276.927C440.302 276.701 440.686 276.408 441.047 276.047L444.703 272.458L440.302 267.99ZM440.438 257.224C439.535 257.224 438.767 257.551 438.135 258.206C437.503 258.86 437.188 259.639 437.188 260.542C437.188 260.993 437.266 261.422 437.424 261.828C437.582 262.234 437.819 262.573 438.135 262.844L440.37 265.214L442.333 263.318C442.785 262.957 443.135 262.539 443.383 262.065C443.631 261.591 443.755 261.106 443.755 260.609C443.755 259.661 443.439 258.86 442.807 258.206C442.175 257.551 441.385 257.224 440.438 257.224ZM442.672 231.495L438.203 242.125H447.411L442.943 231.495H442.672ZM472.057 227.568C472.238 227.974 472.407 228.369 472.565 228.753C472.723 229.136 472.847 229.554 472.938 230.005L470.568 230.682L482.214 230.615V232.781H478.693C478.196 234.632 477.418 236.347 476.357 237.927C475.296 239.507 474.089 240.929 472.734 242.193C474.043 243.231 475.443 244.077 476.932 244.732C478.422 245.386 479.957 245.917 481.536 246.323L481.063 248.354C479.257 247.948 477.53 247.327 475.883 246.492C474.235 245.657 472.689 244.653 471.245 243.479C469.8 244.698 468.209 245.691 466.471 246.458C464.734 247.226 462.939 247.858 461.089 248.354L460.615 246.391C462.285 245.984 463.898 245.443 465.456 244.766C467.013 244.089 468.491 243.231 469.891 242.193C468.536 240.884 467.352 239.439 466.336 237.859C465.32 236.28 464.609 234.587 464.203 232.781H459.87V230.615L470.026 230.682C469.936 230.321 469.834 229.949 469.721 229.565C469.609 229.181 469.462 228.809 469.281 228.448L472.057 227.568ZM479.573 256.885L481.13 258.375L461.969 277.469L460.479 276.047L479.573 256.885ZM464.271 258.036C464.948 258.036 465.512 258.262 465.964 258.714C466.415 259.165 466.641 259.729 466.641 260.406C466.641 261.083 466.415 261.648 465.964 262.099C465.512 262.55 464.948 262.776 464.271 262.776C463.594 262.776 463.03 262.55 462.578 262.099C462.127 261.648 461.901 261.083 461.901 260.406C461.901 259.729 462.127 259.165 462.578 258.714C463.03 258.262 463.594 258.036 464.271 258.036ZM466.302 232.781C466.663 234.406 467.273 235.907 468.13 237.284C468.988 238.661 470.049 239.868 471.313 240.906C472.576 239.868 473.66 238.649 474.563 237.25C475.465 235.851 476.12 234.361 476.526 232.781H466.302ZM477.813 271.578C478.49 271.578 479.054 271.804 479.505 272.255C479.957 272.707 480.182 273.271 480.182 273.948C480.182 274.625 479.957 275.189 479.505 275.641C479.054 276.092 478.49 276.318 477.813 276.318C477.135 276.318 476.571 276.092 476.12 275.641C475.668 275.189 475.443 274.625 475.443 273.948C475.443 273.271 475.668 272.707 476.12 272.255C476.571 271.804 477.135 271.578 477.813 271.578Z" fill="#99DD33"/>
+</g>
+<path d="M261 39.45L251.15 29.6L252.25 28.55L261 37.3L279.7 18.55L280.85 19.65L261 39.45Z" fill="#FF66CC"/>
+<path d="M508.975 36.8C501.905 38.6655 493.658 39.5 486 39.5C478.342 39.5 470.095 38.6655 463.025 36.8L461.651 42.2C466.658 43.5745 472.451 44.4582 477.851 44.9V80H483.251V63.8H488.651V80H494.051V44.9C499.451 44.4582 505.244 43.5255 510.251 42.2L508.975 36.8ZM486 36.8C488.995 36.8 491.4 34.3945 491.4 31.4C491.4 28.4055 488.995 26 486 26C483.005 26 480.6 28.4545 480.6 31.4C480.6 34.3455 483.055 36.8 486 36.8Z" stroke="#3399FF" stroke-width="1.3"/>
+<path d="M193.15 258.7C191.483 258.7 190.067 258.2 188.9 257.2C187.733 256.2 186.833 254.833 186.2 253.1C185.667 251.7 185.033 250.533 184.3 249.6C183.567 248.667 182.317 247.483 180.55 246.05C178.483 244.417 176.958 242.625 175.975 240.675C174.992 238.725 174.5 236.483 174.5 233.95C174.5 230.317 175.692 227.308 178.075 224.925C180.458 222.542 183.467 221.35 187.1 221.35C190.5 221.35 193.367 222.383 195.7 224.45C198.033 226.517 199.35 229.183 199.65 232.45H198.55C198.25 229.517 197.025 227.117 194.875 225.25C192.725 223.383 190.133 222.45 187.1 222.45C183.867 222.45 181.142 223.558 178.925 225.775C176.708 227.992 175.6 230.717 175.6 233.95C175.6 236.383 176.158 238.575 177.275 240.525C178.392 242.475 179.883 244.167 181.75 245.6C183.15 246.667 184.233 247.708 185 248.725C185.767 249.742 186.5 251.067 187.2 252.7C187.833 254.2 188.625 255.392 189.575 256.275C190.525 257.158 191.717 257.6 193.15 257.6C194.383 257.6 195.483 257.217 196.45 256.45C197.417 255.683 198.083 254.717 198.45 253.55H199.65C199.283 255.05 198.508 256.283 197.325 257.25C196.142 258.217 194.75 258.7 193.15 258.7ZM171.4 247.4C169.8 245.567 168.558 243.5 167.675 241.2C166.792 238.9 166.35 236.467 166.35 233.9C166.35 231.333 166.792 228.875 167.675 226.525C168.558 224.175 169.8 222.1 171.4 220.3L172.2 220.95C170.667 222.75 169.492 224.742 168.675 226.925C167.858 229.108 167.45 231.433 167.45 233.9C167.45 236.3 167.867 238.592 168.7 240.775C169.533 242.958 170.7 244.95 172.2 246.75L171.4 247.4ZM187.1 237.85C186 237.85 185.075 237.475 184.325 236.725C183.575 235.975 183.2 235.05 183.2 233.95C183.2 232.85 183.575 231.917 184.325 231.15C185.075 230.383 186 230 187.1 230C188.2 230 189.125 230.383 189.875 231.15C190.625 231.917 191 232.85 191 233.95C191 235.05 190.625 235.975 189.875 236.725C189.125 237.475 188.2 237.85 187.1 237.85Z" fill="#3399FF"/>
+<path d="M568 190.5L567.15 189.7C563.85 186.7 561.133 184.125 559 181.975C556.867 179.825 555.175 177.942 553.925 176.325C552.675 174.708 551.808 173.258 551.325 171.975C550.842 170.692 550.6 169.417 550.6 168.15C550.6 165.817 551.392 163.858 552.975 162.275C554.558 160.692 556.517 159.9 558.85 159.9C560.65 159.9 562.325 160.4 563.875 161.4C565.425 162.4 566.8 163.867 568 165.8C569.267 163.833 570.658 162.358 572.175 161.375C573.692 160.392 575.35 159.9 577.15 159.9C579.483 159.9 581.442 160.692 583.025 162.275C584.608 163.858 585.4 165.817 585.4 168.15C585.4 169.417 585.158 170.692 584.675 171.975C584.192 173.258 583.325 174.708 582.075 176.325C580.825 177.942 579.133 179.825 577 181.975C574.867 184.125 572.15 186.7 568.85 189.7L568 190.5ZM568 189C571.233 186.033 573.9 183.5 576 181.4C578.1 179.3 579.767 177.467 581 175.9C582.233 174.333 583.092 172.942 583.575 171.725C584.058 170.508 584.3 169.317 584.3 168.15C584.3 166.117 583.617 164.417 582.25 163.05C580.883 161.683 579.183 161 577.15 161C575.483 161 573.958 161.483 572.575 162.45C571.192 163.417 569.833 164.967 568.5 167.1H567.5C566.133 164.967 564.758 163.417 563.375 162.45C561.992 161.483 560.483 161 558.85 161C556.85 161 555.158 161.683 553.775 163.05C552.392 164.417 551.7 166.133 551.7 168.2C551.7 169.367 551.942 170.55 552.425 171.75C552.908 172.95 553.758 174.333 554.975 175.9C556.192 177.467 557.858 179.3 559.975 181.4C562.092 183.5 564.767 186.033 568 189Z" fill="#FF66CC"/>
+<path d="M293 245.65C294.833 245.65 296.4 244.992 297.7 243.675C299 242.358 299.65 240.8 299.65 239C299.65 237.167 298.991 235.6 297.675 234.3C296.358 233 294.8 232.35 293 232.35C291.166 232.35 289.6 233.008 288.3 234.325C287 235.642 286.35 237.2 286.35 239C286.35 240.833 287.008 242.4 288.325 243.7C289.641 245 291.2 245.65 293 245.65ZM293 244.45C291.466 244.45 290.175 243.917 289.125 242.85C288.075 241.783 287.55 240.5 287.55 239C287.55 237.467 288.083 236.175 289.15 235.125C290.216 234.075 291.5 233.55 293 233.55C294.533 233.55 295.825 234.083 296.875 235.15C297.925 236.217 298.45 237.5 298.45 239C298.45 240.533 297.916 241.825 296.85 242.875C295.783 243.925 294.5 244.45 293 244.45ZM293 251.4C288.866 251.4 285.083 250.275 281.65 248.025C278.216 245.775 275.6 242.767 273.8 239C275.6 235.233 278.216 232.225 281.65 229.975C285.083 227.725 288.866 226.6 293 226.6C297.133 226.6 300.916 227.725 304.35 229.975C307.783 232.225 310.4 235.233 312.2 239C310.4 242.767 307.783 245.775 304.35 248.025C300.916 250.275 297.133 251.4 293 251.4ZM293 250.3C296.866 250.3 300.408 249.283 303.625 247.25C306.841 245.217 309.3 242.467 311 239C309.3 235.533 306.841 232.783 303.625 230.75C300.408 228.717 296.866 227.7 293 227.7C289.133 227.7 285.591 228.717 282.375 230.75C279.158 232.783 276.7 235.533 275 239C276.7 242.467 279.158 245.217 282.375 247.25C285.591 249.283 289.133 250.3 293 250.3Z" fill="#FF66CC"/>
+<g style="mix-blend-mode:darken">
+<path d="M180.924 139.978H187.9L202.56 179H195.857L192.314 169.026H176.564L173.021 179H166.263L180.924 139.978ZM190.243 163.358L186.101 151.75L184.575 147.226H184.248L182.722 151.75L178.58 163.358H190.243ZM218.677 179.872C215.988 179.872 213.572 179.254 211.428 178.019C209.285 176.784 207.613 175.076 206.414 172.896C205.215 170.68 204.616 168.209 204.616 165.484C204.616 162.723 205.215 160.252 206.414 158.072C207.613 155.892 209.285 154.184 211.428 152.949C213.572 151.714 215.988 151.096 218.677 151.096C221.656 151.096 224.181 151.804 226.252 153.221C228.36 154.602 229.886 156.437 230.83 158.726L225.326 161.015C224.018 158.072 221.729 156.6 218.459 156.6C217.078 156.6 215.788 156.982 214.589 157.745C213.39 158.472 212.428 159.507 211.701 160.851C210.974 162.196 210.611 163.74 210.611 165.484C210.611 167.228 210.974 168.772 211.701 170.116C212.428 171.461 213.39 172.514 214.589 173.277C215.788 174.004 217.078 174.367 218.459 174.367C220.13 174.367 221.584 173.986 222.819 173.223C224.054 172.424 224.999 171.297 225.653 169.844L231.048 172.188C229.995 174.476 228.414 176.329 226.307 177.746C224.2 179.163 221.656 179.872 218.677 179.872ZM248.436 179.872C245.747 179.872 243.331 179.254 241.187 178.019C239.043 176.784 237.372 175.076 236.173 172.896C234.974 170.68 234.375 168.209 234.375 165.484C234.375 162.723 234.974 160.252 236.173 158.072C237.372 155.892 239.043 154.184 241.187 152.949C243.331 151.714 245.747 151.096 248.436 151.096C251.415 151.096 253.94 151.804 256.011 153.221C258.118 154.602 259.644 156.437 260.589 158.726L255.085 161.015C253.777 158.072 251.488 156.6 248.218 156.6C246.837 156.6 245.547 156.982 244.348 157.745C243.149 158.472 242.186 159.507 241.46 160.851C240.733 162.196 240.37 163.74 240.37 165.484C240.37 167.228 240.733 168.772 241.46 170.116C242.186 171.461 243.149 172.514 244.348 173.277C245.547 174.004 246.837 174.367 248.218 174.367C249.889 174.367 251.342 173.986 252.578 173.223C253.813 172.424 254.758 171.297 255.412 169.844L260.807 172.188C259.753 174.476 258.173 176.329 256.066 177.746C253.958 179.163 251.415 179.872 248.436 179.872ZM278.085 179.872C275.433 179.872 273.035 179.254 270.891 178.019C268.784 176.784 267.131 175.076 265.932 172.896C264.733 170.68 264.133 168.209 264.133 165.484C264.133 162.868 264.696 160.47 265.823 158.29C266.985 156.074 268.602 154.33 270.673 153.058C272.744 151.75 275.106 151.096 277.758 151.096C280.483 151.096 282.845 151.695 284.843 152.894C286.878 154.093 288.422 155.765 289.476 157.908C290.529 160.016 291.056 162.45 291.056 165.211C291.056 165.538 291.038 165.865 291.002 166.192C290.965 166.519 290.947 166.701 290.947 166.737H270.128C270.31 169.208 271.2 171.116 272.799 172.46C274.397 173.804 276.214 174.476 278.249 174.476C281.373 174.476 283.771 173.023 285.443 170.116L290.566 172.569C289.367 174.785 287.695 176.566 285.552 177.91C283.444 179.218 280.955 179.872 278.085 179.872ZM284.952 162.159C284.879 161.287 284.589 160.397 284.08 159.489C283.571 158.581 282.772 157.818 281.682 157.2C280.628 156.546 279.302 156.219 277.704 156.219C275.923 156.219 274.379 156.764 273.071 157.854C271.799 158.944 270.927 160.379 270.455 162.159H284.952ZM306.722 179.872C303.633 179.872 301.072 179.163 299.037 177.746C297.039 176.293 295.622 174.476 294.786 172.296L300.127 170.007C300.745 171.497 301.635 172.623 302.798 173.386C303.997 174.149 305.305 174.531 306.722 174.531C308.211 174.531 309.429 174.258 310.373 173.713C311.318 173.132 311.79 172.387 311.79 171.479C311.79 170.607 311.409 169.898 310.646 169.353C309.883 168.772 308.629 168.263 306.885 167.827L303.179 166.955C301.145 166.483 299.382 165.611 297.893 164.339C296.439 163.031 295.713 161.342 295.713 159.271C295.713 156.764 296.748 154.784 298.819 153.33C300.89 151.841 303.434 151.096 306.449 151.096C308.956 151.096 311.173 151.623 313.098 152.676C315.06 153.73 316.477 155.256 317.349 157.254L312.063 159.489C311.554 158.363 310.773 157.527 309.719 156.982C308.666 156.437 307.521 156.164 306.286 156.164C305.087 156.164 304.033 156.437 303.125 156.982C302.216 157.491 301.762 158.181 301.762 159.053C301.762 159.816 302.071 160.434 302.689 160.906C303.343 161.378 304.36 161.778 305.741 162.105L309.774 163.086C312.499 163.776 314.533 164.83 315.878 166.247C317.222 167.628 317.894 169.299 317.894 171.261C317.894 172.86 317.404 174.313 316.423 175.621C315.478 176.929 314.152 177.964 312.444 178.727C310.773 179.491 308.865 179.872 306.722 179.872ZM332.968 179.872C329.879 179.872 327.318 179.163 325.283 177.746C323.285 176.293 321.868 174.476 321.032 172.296L326.373 170.007C326.991 171.497 327.881 172.623 329.044 173.386C330.243 174.149 331.551 174.531 332.968 174.531C334.457 174.531 335.674 174.258 336.619 173.713C337.564 173.132 338.036 172.387 338.036 171.479C338.036 170.607 337.655 169.898 336.892 169.353C336.129 168.772 334.875 168.263 333.131 167.827L329.425 166.955C327.39 166.483 325.628 165.611 324.139 164.339C322.685 163.031 321.959 161.342 321.959 159.271C321.959 156.764 322.994 154.784 325.065 153.33C327.136 151.841 329.679 151.096 332.695 151.096C335.202 151.096 337.418 151.623 339.344 152.676C341.306 153.73 342.723 155.256 343.595 157.254L338.309 159.489C337.8 158.363 337.019 157.527 335.965 156.982C334.911 156.437 333.767 156.164 332.532 156.164C331.333 156.164 330.279 156.437 329.371 156.982C328.462 157.491 328.008 158.181 328.008 159.053C328.008 159.816 328.317 160.434 328.935 160.906C329.589 161.378 330.606 161.778 331.987 162.105L336.02 163.086C338.745 163.776 340.779 164.83 342.124 166.247C343.468 167.628 344.14 169.299 344.14 171.261C344.14 172.86 343.65 174.313 342.669 175.621C341.724 176.929 340.398 177.964 338.69 178.727C337.019 179.491 335.111 179.872 332.968 179.872ZM352.407 147.39C351.281 147.39 350.318 147.008 349.519 146.245C348.756 145.446 348.374 144.483 348.374 143.357C348.374 142.231 348.756 141.286 349.519 140.523C350.318 139.724 351.281 139.324 352.407 139.324C353.534 139.324 354.478 139.724 355.241 140.523C356.041 141.286 356.44 142.231 356.44 143.357C356.44 144.483 356.041 145.446 355.241 146.245C354.478 147.008 353.534 147.39 352.407 147.39ZM349.41 151.968H355.405V179H349.41V151.968ZM377.534 179.872C375.572 179.872 373.81 179.454 372.247 178.618C370.721 177.783 369.577 176.729 368.814 175.457H368.487V179H362.819V139.978H368.814V151.695L368.487 155.456H368.814C369.577 154.221 370.721 153.185 372.247 152.349C373.81 151.514 375.572 151.096 377.534 151.096C379.859 151.096 382.003 151.714 383.965 152.949C385.963 154.184 387.544 155.91 388.706 158.126C389.905 160.306 390.505 162.759 390.505 165.484C390.505 168.209 389.905 170.661 388.706 172.841C387.544 175.021 385.963 176.747 383.965 178.019C382.003 179.254 379.859 179.872 377.534 179.872ZM376.498 174.367C377.915 174.367 379.223 174.004 380.422 173.277C381.658 172.551 382.639 171.515 383.365 170.171C384.128 168.79 384.51 167.228 384.51 165.484C384.51 163.74 384.128 162.196 383.365 160.851C382.639 159.471 381.658 158.417 380.422 157.69C379.223 156.964 377.915 156.6 376.498 156.6C375.081 156.6 373.755 156.964 372.52 157.69C371.321 158.417 370.34 159.453 369.577 160.797C368.85 162.141 368.487 163.704 368.487 165.484C368.487 167.264 368.85 168.827 369.577 170.171C370.34 171.515 371.321 172.551 372.52 173.277C373.755 174.004 375.081 174.367 376.498 174.367ZM399.098 147.39C397.972 147.39 397.009 147.008 396.209 146.245C395.446 145.446 395.065 144.483 395.065 143.357C395.065 142.231 395.446 141.286 396.209 140.523C397.009 139.724 397.972 139.324 399.098 139.324C400.224 139.324 401.169 139.724 401.932 140.523C402.731 141.286 403.131 142.231 403.131 143.357C403.131 144.483 402.731 145.446 401.932 146.245C401.169 147.008 400.224 147.39 399.098 147.39ZM396.1 151.968H402.095V179H396.1V151.968ZM409.509 139.978H415.504V179H409.509V139.978ZM425.936 147.39C424.81 147.39 423.847 147.008 423.048 146.245C422.285 145.446 421.903 144.483 421.903 143.357C421.903 142.231 422.285 141.286 423.048 140.523C423.847 139.724 424.81 139.324 425.936 139.324C427.063 139.324 428.007 139.724 428.77 140.523C429.57 141.286 429.969 142.231 429.969 143.357C429.969 144.483 429.57 145.446 428.77 146.245C428.007 147.008 427.063 147.39 425.936 147.39ZM422.939 151.968H428.934V179H422.939V151.968ZM447.2 179.436C446.001 179.436 444.874 179.254 443.821 178.891C442.803 178.491 441.95 177.946 441.259 177.256C439.697 175.73 438.916 173.604 438.916 170.879V157.254H434.174V151.968H438.916V143.902H444.911V151.968H451.505V157.254H444.911V169.571C444.911 171.061 445.201 172.115 445.783 172.732C446.328 173.459 447.218 173.822 448.453 173.822C449.507 173.822 450.542 173.514 451.56 172.896V178.727C450.288 179.2 448.835 179.436 447.2 179.436ZM465.768 177.474L454.487 151.968H461.19L468.711 170.116H468.984L476.232 151.968H482.881L465.986 190.772H459.664L465.768 177.474ZM487.579 151.804V139.978H493.683V151.804L493.029 166.301H488.178L487.579 151.804ZM490.631 179.327C489.468 179.327 488.469 178.927 487.633 178.128C486.834 177.292 486.434 176.293 486.434 175.13C486.434 173.968 486.834 172.987 487.633 172.188C488.469 171.388 489.468 170.989 490.631 170.989C491.793 170.989 492.774 171.388 493.574 172.188C494.373 172.987 494.773 173.968 494.773 175.13C494.773 176.293 494.373 177.292 493.574 178.128C492.774 178.927 491.793 179.327 490.631 179.327Z" fill="url(#paint0_linear_1847_1944)"/>
+</g>
+<path d="M24 140H30.1202V173.279H46.8962V179.126H24V140Z" fill="#3C4043"/>
+<path d="M63.7596 180C61.1003 180 58.6959 179.381 56.5465 178.142C54.4336 176.903 52.776 175.191 51.5739 173.005C50.3717 170.783 49.7706 168.306 49.7706 165.574C49.7706 162.951 50.3352 160.546 51.4646 158.361C52.6303 156.138 54.2514 154.39 56.328 153.115C58.4045 151.803 60.7724 151.148 63.4318 151.148C66.164 151.148 68.532 151.749 70.5356 152.951C72.5757 154.153 74.1239 155.829 75.1804 157.978C76.2369 160.091 76.7651 162.532 76.7651 165.301C76.7651 165.628 76.7469 165.956 76.7105 166.284C76.674 166.612 76.6558 166.794 76.6558 166.831H55.7815C55.9637 169.308 56.8562 171.22 58.4591 172.568C60.062 173.916 61.8835 174.59 63.9236 174.59C67.0565 174.59 69.4609 173.133 71.1367 170.219L76.2733 172.678C75.0711 174.9 73.3953 176.685 71.246 178.033C69.1331 179.344 66.6376 180 63.7596 180ZM70.6449 162.24C70.572 161.366 70.2806 160.474 69.7706 159.563C69.2606 158.652 68.4591 157.887 67.3662 157.268C66.3097 156.612 64.98 156.284 63.3771 156.284C61.5921 156.284 60.0438 156.831 58.7323 157.923C57.4573 159.016 56.583 160.455 56.1094 162.24H70.6449Z" fill="#3C4043"/>
+<path d="M90.8857 180C88.9549 180 87.2062 179.617 85.6398 178.852C84.1097 178.051 82.8893 176.958 81.9786 175.574C81.1042 174.153 80.6671 172.55 80.6671 170.765C80.6671 167.923 81.7236 165.683 83.8365 164.044C85.9859 162.404 88.6999 161.585 91.9786 161.585C94.8565 161.585 97.3155 162.077 99.3556 163.06V161.913C99.3556 160.273 98.6999 158.925 97.3884 157.869C96.1133 156.776 94.5651 156.23 92.7436 156.23C89.9749 156.23 87.7527 157.359 86.0769 159.617L81.4868 156.448C82.7618 154.736 84.3465 153.424 86.2409 152.514C88.1716 151.603 90.3392 151.148 92.7436 151.148C96.7144 151.148 99.7746 152.149 101.924 154.153C104.11 156.12 105.203 158.907 105.203 162.514V179.126H99.3556V175.792H99.0277C98.1534 177.031 97.0423 178.051 95.6944 178.852C94.3465 179.617 92.7436 180 90.8857 180ZM91.8693 175.027C93.2172 175.027 94.4558 174.699 95.5851 174.044C96.7509 173.352 97.6616 172.459 98.3174 171.366C99.0095 170.237 99.3556 169.035 99.3556 167.76C97.4248 166.703 95.3665 166.175 93.1807 166.175C91.1771 166.175 89.6106 166.612 88.4813 167.486C87.352 168.361 86.7873 169.472 86.7873 170.82C86.7873 172.058 87.2791 173.078 88.2627 173.88C89.2828 174.645 90.4849 175.027 91.8693 175.027Z" fill="#3C4043"/>
+<path d="M111.549 152.022H117.232V156.066H117.56C118.142 154.681 119.199 153.534 120.729 152.623C122.259 151.676 123.826 151.202 125.428 151.202C126.74 151.202 127.815 151.384 128.652 151.749V158.033C127.414 157.413 126.03 157.104 124.499 157.104C122.532 157.104 120.875 157.869 119.527 159.399C118.215 160.893 117.56 162.732 117.56 164.918V179.126H111.549V152.022Z" fill="#3C4043"/>
+<path d="M133.054 152.022H138.737V155.628H139.065C139.867 154.317 141.033 153.242 142.563 152.404C144.093 151.566 145.75 151.148 147.535 151.148C150.887 151.148 153.419 152.131 155.131 154.098C156.88 156.066 157.754 158.78 157.754 162.24V179.126H151.743V163.06C151.743 158.798 149.757 156.667 145.787 156.667C143.783 156.667 142.162 157.468 140.923 159.071C139.685 160.674 139.065 162.568 139.065 164.754V179.126H133.054V152.022Z" fill="#3C4043"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1847_1944" x1="166" y1="179" x2="498.307" y2="135.685" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#33CC00"/>
+<stop offset="0.385417" stop-color="#3399FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#9933FF"/>
+</linearGradient>
+<clipPath id="clip0_1847_1944">
+<rect width="640" height="320" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1847_1944">
+<rect width="65" height="34" fill="white" transform="translate(425 221)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/accessibility/logo.svg b/src/images/courses/accessibility/logo.svg
new file mode 100644
index 00000000000..2287313bb1a
--- /dev/null
+++ b/src/images/courses/accessibility/logo.svg
@@ -0,0 +1,18 @@
+<svg width="238" height="40" viewBox="0 0 238 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M78.4618 9.48899H81.9498L89.28 29H85.9283L84.157 24.0132H76.2818L74.5105 29H71.1315L78.4618 9.48899ZM83.1215 21.1792L81.0505 15.375L80.2875 13.1132H80.124L79.361 15.375L77.29 21.1792H83.1215ZM97.3385 29.436C95.9942 29.436 94.7861 29.1272 93.7142 28.5095C92.6424 27.8918 91.8067 27.038 91.2072 25.948C90.6077 24.8398 90.308 23.6045 90.308 22.242C90.308 20.8613 90.6077 19.626 91.2072 18.536C91.8067 17.446 92.6424 16.5922 93.7142 15.9745C94.7861 15.3568 95.9942 15.048 97.3385 15.048C98.8282 15.048 100.091 15.4022 101.126 16.1107C102.18 16.8011 102.943 17.7185 103.415 18.863L100.663 20.0075C100.009 18.536 98.8645 17.8002 97.2295 17.8002C96.5392 17.8002 95.8943 17.991 95.2948 18.3725C94.6953 18.7358 94.2138 19.2536 93.8505 19.9257C93.4872 20.5979 93.3055 21.37 93.3055 22.242C93.3055 23.114 93.4872 23.8861 93.8505 24.5582C94.2138 25.2304 94.6953 25.7572 95.2948 26.1387C95.8943 26.5021 96.5392 26.6837 97.2295 26.6837C98.0652 26.6837 98.7918 26.493 99.4095 26.1115C100.027 25.7118 100.5 25.1487 100.827 24.422L103.524 25.5937C102.997 26.7382 102.207 27.6647 101.154 28.3732C100.1 29.0818 98.8282 29.436 97.3385 29.436ZM112.218 29.436C110.873 29.436 109.665 29.1272 108.594 28.5095C107.522 27.8918 106.686 27.038 106.087 25.948C105.487 24.8398 105.187 23.6045 105.187 22.242C105.187 20.8613 105.487 19.626 106.087 18.536C106.686 17.446 107.522 16.5922 108.594 15.9745C109.665 15.3568 110.873 15.048 112.218 15.048C113.707 15.048 114.97 15.4022 116.006 16.1107C117.059 16.8011 117.822 17.7185 118.295 18.863L115.542 20.0075C114.888 18.536 113.744 17.8002 112.109 17.8002C111.418 17.8002 110.774 17.991 110.174 18.3725C109.575 18.7358 109.093 19.2536 108.73 19.9257C108.366 20.5979 108.185 21.37 108.185 22.242C108.185 23.114 108.366 23.8861 108.73 24.5582C109.093 25.2304 109.575 25.7572 110.174 26.1387C110.774 26.5021 111.418 26.6837 112.109 26.6837C112.944 26.6837 113.671 26.493 114.289 26.1115C114.906 25.7118 115.379 25.1487 115.706 24.422L118.404 25.5937C117.877 26.7382 117.086 27.6647 116.033 28.3732C114.979 29.0818 113.707 29.436 112.218 29.436ZM127.043 29.436C125.716 29.436 124.517 29.1272 123.446 28.5095C122.392 27.8918 121.565 27.038 120.966 25.948C120.366 24.8398 120.067 23.6045 120.067 22.242C120.067 20.934 120.348 19.735 120.911 18.645C121.493 17.5368 122.301 16.6648 123.337 16.029C124.372 15.375 125.553 15.048 126.879 15.048C128.242 15.048 129.422 15.3477 130.422 15.9472C131.439 16.5467 132.211 17.3824 132.738 18.4542C133.265 19.5079 133.528 20.7251 133.528 22.1057C133.528 22.2692 133.519 22.4327 133.501 22.5962C133.483 22.7597 133.474 22.8506 133.474 22.8687H123.064C123.155 24.1041 123.6 25.0578 124.399 25.73C125.199 26.4022 126.107 26.7382 127.124 26.7382C128.687 26.7382 129.886 26.0116 130.721 24.5582L133.283 25.7845C132.683 26.8927 131.848 27.7828 130.776 28.455C129.722 29.109 128.478 29.436 127.043 29.436ZM130.476 20.5797C130.44 20.1437 130.294 19.6987 130.04 19.2445C129.786 18.7903 129.386 18.4088 128.841 18.1C128.314 17.773 127.651 17.6095 126.852 17.6095C125.962 17.6095 125.19 17.882 124.536 18.427C123.9 18.972 123.464 19.6896 123.228 20.5797H130.476ZM141.361 29.436C139.817 29.436 138.536 29.0818 137.519 28.3732C136.52 27.6466 135.811 26.7382 135.393 25.6482L138.064 24.5037C138.373 25.2486 138.818 25.8117 139.399 26.1932C139.998 26.5747 140.652 26.7655 141.361 26.7655C142.106 26.7655 142.714 26.6292 143.187 26.3567C143.659 26.0661 143.895 25.6937 143.895 25.2395C143.895 24.8035 143.704 24.4492 143.323 24.1767C142.941 23.8861 142.315 23.6317 141.443 23.4137L139.59 22.9777C138.572 22.7416 137.691 22.3056 136.946 21.6697C136.22 21.0157 135.856 20.171 135.856 19.1355C135.856 17.882 136.374 16.8919 137.41 16.1652C138.445 15.4204 139.717 15.048 141.225 15.048C142.478 15.048 143.586 15.3114 144.549 15.8382C145.53 16.3651 146.239 17.1281 146.675 18.1272L144.031 19.2445C143.777 18.6813 143.387 18.2635 142.86 17.991C142.333 17.7185 141.761 17.5822 141.143 17.5822C140.543 17.5822 140.017 17.7185 139.562 17.991C139.108 18.2453 138.881 18.5905 138.881 19.0265C138.881 19.408 139.036 19.7168 139.344 19.953C139.671 20.1892 140.18 20.389 140.87 20.5525L142.887 21.043C144.249 21.3882 145.267 21.915 145.939 22.6235C146.611 23.3138 146.947 24.1495 146.947 25.1305C146.947 25.9298 146.702 26.6565 146.211 27.3105C145.739 27.9645 145.076 28.4822 144.222 28.8637C143.387 29.2453 142.433 29.436 141.361 29.436ZM154.484 29.436C152.94 29.436 151.659 29.0818 150.642 28.3732C149.642 27.6466 148.934 26.7382 148.516 25.6482L151.187 24.5037C151.495 25.2486 151.941 25.8117 152.522 26.1932C153.121 26.5747 153.775 26.7655 154.484 26.7655C155.229 26.7655 155.837 26.6292 156.31 26.3567C156.782 26.0661 157.018 25.6937 157.018 25.2395C157.018 24.8035 156.827 24.4492 156.446 24.1767C156.064 23.8861 155.438 23.6317 154.566 23.4137L152.713 22.9777C151.695 22.7416 150.814 22.3056 150.069 21.6697C149.343 21.0157 148.979 20.171 148.979 19.1355C148.979 17.882 149.497 16.8919 150.533 16.1652C151.568 15.4204 152.84 15.048 154.348 15.048C155.601 15.048 156.709 15.3114 157.672 15.8382C158.653 16.3651 159.362 17.1281 159.798 18.1272L157.154 19.2445C156.9 18.6813 156.509 18.2635 155.983 17.991C155.456 17.7185 154.884 17.5822 154.266 17.5822C153.666 17.5822 153.14 17.7185 152.685 17.991C152.231 18.2453 152.004 18.5905 152.004 19.0265C152.004 19.408 152.159 19.7168 152.467 19.953C152.794 20.1892 153.303 20.389 153.993 20.5525L156.01 21.043C157.372 21.3882 158.39 21.915 159.062 22.6235C159.734 23.3138 160.07 24.1495 160.07 25.1305C160.07 25.9298 159.825 26.6565 159.334 27.3105C158.862 27.9645 158.199 28.4822 157.345 28.8637C156.509 29.2453 155.556 29.436 154.484 29.436ZM164.204 13.195C163.641 13.195 163.159 13.0042 162.76 12.6227C162.378 12.2231 162.187 11.7417 162.187 11.1785C162.187 10.6153 162.378 10.143 162.76 9.76149C163.159 9.36182 163.641 9.16199 164.204 9.16199C164.767 9.16199 165.239 9.36182 165.621 9.76149C166.02 10.143 166.22 10.6153 166.22 11.1785C166.22 11.7417 166.02 12.2231 165.621 12.6227C165.239 13.0042 164.767 13.195 164.204 13.195ZM162.705 15.484H165.703V29H162.705V15.484ZM176.767 29.436C175.786 29.436 174.905 29.2271 174.124 28.8092C173.361 28.3914 172.789 27.8646 172.407 27.2287H172.244V29H169.41V9.48899H172.407V15.3477L172.244 17.228H172.407C172.789 16.6103 173.361 16.0926 174.124 15.6747C174.905 15.2569 175.786 15.048 176.767 15.048C177.93 15.048 179.002 15.3568 179.983 15.9745C180.982 16.5922 181.772 17.4551 182.353 18.5632C182.953 19.6532 183.253 20.8795 183.253 22.242C183.253 23.6045 182.953 24.8307 182.353 25.9207C181.772 27.0107 180.982 27.8737 179.983 28.5095C179.002 29.1272 177.93 29.436 176.767 29.436ZM176.249 26.6837C176.958 26.6837 177.612 26.5021 178.211 26.1387C178.829 25.7754 179.319 25.2577 179.683 24.5855C180.064 23.8952 180.255 23.114 180.255 22.242C180.255 21.37 180.064 20.5979 179.683 19.9257C179.319 19.2354 178.829 18.7086 178.211 18.3452C177.612 17.9819 176.958 17.8002 176.249 17.8002C175.541 17.8002 174.878 17.9819 174.26 18.3452C173.661 18.7086 173.17 19.2263 172.789 19.8985C172.425 20.5707 172.244 21.3518 172.244 22.242C172.244 23.1322 172.425 23.9133 172.789 24.5855C173.17 25.2577 173.661 25.7754 174.26 26.1387C174.878 26.5021 175.541 26.6837 176.249 26.6837ZM187.549 13.195C186.986 13.195 186.504 13.0042 186.105 12.6227C185.723 12.2231 185.533 11.7417 185.533 11.1785C185.533 10.6153 185.723 10.143 186.105 9.76149C186.504 9.36182 186.986 9.16199 187.549 9.16199C188.112 9.16199 188.585 9.36182 188.966 9.76149C189.366 10.143 189.566 10.6153 189.566 11.1785C189.566 11.7417 189.366 12.2231 188.966 12.6227C188.585 13.0042 188.112 13.195 187.549 13.195ZM186.05 15.484H189.048V29H186.05V15.484ZM192.755 9.48899H195.752V29H192.755V9.48899ZM200.968 13.195C200.405 13.195 199.924 13.0042 199.524 12.6227C199.142 12.2231 198.952 11.7417 198.952 11.1785C198.952 10.6153 199.142 10.143 199.524 9.76149C199.924 9.36182 200.405 9.16199 200.968 9.16199C201.531 9.16199 202.004 9.36182 202.385 9.76149C202.785 10.143 202.985 10.6153 202.985 11.1785C202.985 11.7417 202.785 12.2231 202.385 12.6227C202.004 13.0042 201.531 13.195 200.968 13.195ZM199.469 15.484H202.467V29H199.469V15.484ZM211.6 29.218C211 29.218 210.437 29.1272 209.91 28.9455C209.402 28.7457 208.975 28.4732 208.63 28.128C207.849 27.365 207.458 26.3022 207.458 24.9397V18.1272H205.087V15.484H207.458V11.451H210.455V15.484H213.753V18.1272H210.455V24.2857C210.455 25.0306 210.601 25.5574 210.891 25.8662C211.164 26.2296 211.609 26.4112 212.227 26.4112C212.754 26.4112 213.271 26.2568 213.78 25.948V28.8637C213.144 29.0999 212.417 29.218 211.6 29.218ZM220.884 28.237L215.243 15.484H218.595L222.356 24.5582H222.492L226.116 15.484H229.441L220.993 34.886H217.832L220.884 28.237ZM231.79 15.4022V9.48899H234.842V15.4022L234.515 22.6507H232.089L231.79 15.4022ZM233.316 29.1635C232.734 29.1635 232.235 28.9637 231.817 28.564C231.417 28.1462 231.217 27.6466 231.217 27.0652C231.217 26.4839 231.417 25.9934 231.817 25.5937C232.235 25.1941 232.734 24.9942 233.316 24.9942C233.897 24.9942 234.387 25.1941 234.787 25.5937C235.187 25.9934 235.387 26.4839 235.387 27.0652C235.387 27.6466 235.187 28.1462 234.787 28.564C234.387 28.9637 233.897 29.1635 233.316 29.1635Z" fill="url(#paint0_linear_1864_2567)"/>
+</g>
+<path d="M0 9.5H3.06011V26.1394H11.4481V29.0629H0L0 9.5Z" fill="#3C4043"/>
+<path d="M19.8798 29.5C18.5501 29.5 17.348 29.1904 16.2733 28.5711C15.2168 27.9517 14.388 27.0956 13.7869 26.0027C13.1858 24.8916 12.8853 23.653 12.8853 22.2869C12.8853 20.9754 13.1676 19.7732 13.7323 18.6803C14.3152 17.5692 15.1257 16.6949 16.164 16.0574C17.2022 15.4016 18.3862 15.0738 19.7159 15.0738C21.082 15.0738 22.266 15.3743 23.2678 15.9754C24.2879 16.5765 25.062 17.4144 25.5902 18.4891C26.1185 19.5455 26.3826 20.7659 26.3826 22.1503C26.3826 22.3142 26.3735 22.4782 26.3552 22.6421C26.337 22.806 26.3279 22.8971 26.3279 22.9153H15.8908C15.9818 24.1539 16.4281 25.1102 17.2296 25.7842C18.031 26.4581 18.9418 26.7951 19.9618 26.7951C21.5283 26.7951 22.7305 26.0665 23.5684 24.6093L26.1367 25.8388C25.5356 26.9499 24.6977 27.8425 23.623 28.5164C22.5665 29.1721 21.3188 29.5 19.8798 29.5ZM23.3225 20.6202C23.286 20.1831 23.1403 19.7368 22.8853 19.2814C22.6303 18.8261 22.2296 18.4435 21.6831 18.1339C21.1549 17.806 20.49 17.6421 19.6886 17.6421C18.796 17.6421 18.0219 17.9153 17.3662 18.4618C16.7286 19.0082 16.2915 19.7277 16.0547 20.6202H23.3225Z" fill="#3C4043"/>
+<path d="M33.4429 29.5C32.4775 29.5 31.6031 29.3088 30.8199 28.9262C30.0549 28.5255 29.4447 27.9791 28.9893 27.2869C28.5521 26.5765 28.3336 25.7751 28.3336 24.8825C28.3336 23.4618 28.8618 22.3415 29.9183 21.5219C30.9929 20.7022 32.35 20.2924 33.9893 20.2924C35.4283 20.2924 36.6578 20.5383 37.6778 21.0301V20.4563C37.6778 19.6366 37.35 18.9627 36.6942 18.4344C36.0567 17.888 35.2826 17.6148 34.3718 17.6148C32.9875 17.6148 31.8764 18.1794 31.0385 19.3087L28.7434 17.724C29.3809 16.8679 30.1733 16.2122 31.1204 15.7568C32.0858 15.3015 33.1696 15.0738 34.3718 15.0738C36.3572 15.0738 37.8873 15.5747 38.962 16.5765C40.0549 17.5601 40.6013 18.9536 40.6013 20.7568V29.0629H37.6778V27.3962H37.5139C37.0767 28.0155 36.5212 28.5255 35.8472 28.9262C35.1733 29.3088 34.3718 29.5 33.4429 29.5ZM33.9347 27.0137C34.6086 27.0137 35.2279 26.8497 35.7926 26.5219C36.3755 26.1758 36.8308 25.7295 37.1587 25.1831C37.5048 24.6184 37.6778 24.0173 37.6778 23.3798C36.7124 22.8516 35.6833 22.5874 34.5904 22.5874C33.5886 22.5874 32.8053 22.806 32.2407 23.2432C31.676 23.6803 31.3937 24.2359 31.3937 24.9098C31.3937 25.5292 31.6396 26.0392 32.1314 26.4399C32.6414 26.8224 33.2425 27.0137 33.9347 27.0137Z" fill="#3C4043"/>
+<path d="M43.7744 15.5109H46.6159V17.5328H46.7798C47.0713 16.8406 47.5995 16.2669 48.3645 15.8115C49.1296 15.3379 49.9128 15.1011 50.7143 15.1011C51.37 15.1011 51.9073 15.1922 52.3263 15.3743V18.5164C51.707 18.2067 51.0148 18.0519 50.2498 18.0519C49.2662 18.0519 48.4374 18.4344 47.7634 19.1995C47.1077 19.9463 46.7798 20.8661 46.7798 21.959V29.0629H43.7744V15.5109Z" fill="#3C4043"/>
+<path d="M54.5272 15.5109H57.3688V17.3142H57.5327C57.9334 16.6585 58.5163 16.1211 59.2813 15.7022C60.0464 15.2832 60.8751 15.0738 61.7677 15.0738C63.4434 15.0738 64.7094 15.5656 65.5655 16.5492C66.4398 17.5328 66.877 18.8898 66.877 20.6202V29.0629H63.8715V21.0301C63.8715 18.8989 62.8788 17.8333 60.8933 17.8333C59.8915 17.8333 59.081 18.2341 58.4617 19.0355C57.8423 19.837 57.5327 20.7842 57.5327 21.8771V29.0629H54.5272V15.5109Z" fill="#3C4043"/>
+<defs>
+<linearGradient id="paint0_linear_1864_2567" x1="71.0008" y1="29" x2="237.637" y2="7.21421" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#33CC00"/>
+<stop offset="0.385417" stop-color="#3399FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#9933FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/css/background.svg b/src/images/courses/css/background.svg
new file mode 100644
index 00000000000..696c66bd3ae
--- /dev/null
+++ b/src/images/courses/css/background.svg
@@ -0,0 +1 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><g clip-path="url(#b)"><circle cx="180.842" cy="19.625" fill="#CEF" r="33.75"/><circle cx="243.274" cy="76.149" fill="#DED" r="8.712"/><path d="m83.893 46.264 20.765 17.423-25.472 9.271 4.707-26.694z" fill="#FDE"/><path d="M314.455 17.065v33.28l-28.821-16.64 28.821-16.64z" fill="#FED"/><path fill="#FDF" d="m327.079 108.38 26.927-7.215 7.215 26.927-26.927 7.215z"/><circle cx="185.342" cy="24.125" r="33.25" stroke="#6CF"/><path d="M255.986 80.65a8.212 8.212 0 1 1-16.424-.002 8.212 8.212 0 0 1 16.424.001z" stroke="#9D3"/><path d="m84.33 76.692 4.405-24.988 19.438 16.31-23.844 8.678z" stroke="#F6C"/><path d="m291.134 38.205 27.321-15.774v31.547l-27.321-15.773z" stroke="#FC6"/><path stroke="#C6F" d="m332.191 113.233 25.961-6.956 6.956 25.96-25.96 6.957z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h360v144H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(0 -76)" d="M0 0h360v360H0z"/></clipPath></defs></svg>
diff --git a/src/images/courses/css/card-decor.svg b/src/images/courses/css/card-decor.svg
new file mode 100644
index 00000000000..4fc55fbda7d
--- /dev/null
+++ b/src/images/courses/css/card-decor.svg
@@ -0,0 +1,13 @@
+<svg width="346" height="314" viewBox="0 0 346 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="129.463" cy="75.5499" r="36.5499" fill="#FEDFC8"/>
+<circle cx="267.438" cy="198.906" r="9.13746" fill="#CEEAD6"/>
+<path d="M38.4248 90.5411L60.2044 108.816L33.4878 118.54L38.4248 90.5411Z" fill="#CEEAD6"/>
+<path d="M268.458 65.8148L268.458 100.721L238.229 83.2679L268.458 65.8148Z" fill="#D2E3FC"/>
+<path d="M198.352 147.736L198.352 166.728L181.905 157.232L198.352 147.736Z" fill="#FDCFE8"/>
+<rect width="29.2399" height="29.2399" transform="matrix(0.965926 -0.258818 0.25882 0.965926 281.7 143.894)" fill="#E9D2FD"/>
+<rect x="152.211" y="215.285" width="73.0997" height="54.8248" fill="#CEEAD6"/>
+<mask id="path-8-inside-1_1123:677" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M170.581 80.1186C170.581 100.305 154.217 116.668 134.032 116.668C113.846 116.668 97.4817 100.305 97.4817 80.1186C97.4817 59.9327 113.846 43.5687 134.032 43.5687C154.217 43.5687 170.581 59.9327 170.581 80.1186ZM42.705 94.8541L64.9827 113.547L37.655 123.494L42.705 94.8541ZM273.348 105.611L273.348 70.7048L243.119 88.1579L273.348 105.611ZM203.242 171.618L186.795 162.122L203.242 152.626V171.618ZM314.834 141.216L286.59 148.784L294.158 177.027L322.401 169.46L314.834 141.216ZM157.101 220.175H230.201V275H157.101V220.175ZM271.094 211.698C276.14 211.698 280.231 207.607 280.231 202.561C280.231 197.514 276.14 193.423 271.094 193.423C266.047 193.423 261.956 197.514 261.956 202.561C261.956 207.607 266.047 211.698 271.094 211.698Z"/>
+</mask>
+<path d="M64.9827 113.547L65.3247 114.487L66.9523 113.895L65.6255 112.781L64.9827 113.547ZM42.705 94.8541L43.3478 94.088L42.0209 92.9747L41.7202 94.6804L42.705 94.8541ZM37.655 123.494L36.6702 123.32L36.3695 125.026L37.997 124.433L37.655 123.494ZM273.348 70.7048L274.348 70.7048V68.9728L272.848 69.8388L273.348 70.7048ZM273.348 105.611L272.848 106.477L274.348 107.343V105.611H273.348ZM243.119 88.1579L242.619 87.2919L241.119 88.1579L242.619 89.0239L243.119 88.1579ZM186.795 162.122L186.295 161.256L184.795 162.122L186.295 162.988L186.795 162.122ZM203.242 171.618L202.742 172.484L204.242 173.35V171.618H203.242ZM203.242 152.626H204.242V150.894L202.742 151.76L203.242 152.626ZM286.59 148.784L286.331 147.818L285.365 148.077L285.624 149.043L286.59 148.784ZM314.834 141.216L315.799 140.957L315.541 139.991L314.575 140.25L314.834 141.216ZM294.158 177.027L293.192 177.286L293.451 178.252L294.417 177.993L294.158 177.027ZM322.401 169.46L322.66 170.425L323.626 170.167L323.367 169.201L322.401 169.46ZM230.201 220.175H231.201V219.175H230.201V220.175ZM157.101 220.175V219.175H156.101V220.175H157.101ZM230.201 275V276H231.201V275H230.201ZM157.101 275H156.101V276H157.101V275ZM134.032 117.668C154.77 117.668 171.581 100.857 171.581 80.1186H169.581C169.581 99.7522 153.665 115.668 134.032 115.668V117.668ZM96.4817 80.1186C96.4817 100.857 113.293 117.668 134.032 117.668V115.668C114.398 115.668 98.4817 99.7522 98.4817 80.1186H96.4817ZM134.032 42.5687C113.293 42.5687 96.4817 59.3804 96.4817 80.1186H98.4817C98.4817 60.4849 114.398 44.5687 134.032 44.5687V42.5687ZM171.581 80.1186C171.581 59.3804 154.77 42.5687 134.032 42.5687V44.5687C153.665 44.5687 169.581 60.4849 169.581 80.1186H171.581ZM65.6255 112.781L43.3478 94.088L42.0622 95.6201L64.3399 114.313L65.6255 112.781ZM37.997 124.433L65.3247 114.487L64.6406 112.608L37.313 122.554L37.997 124.433ZM41.7202 94.6804L36.6702 123.32L38.6398 123.667L43.6898 95.0277L41.7202 94.6804ZM272.348 70.7048L272.348 105.611H274.348L274.348 70.7048L272.348 70.7048ZM243.619 89.0239L273.848 71.5709L272.848 69.8388L242.619 87.2919L243.619 89.0239ZM273.848 104.745L243.619 87.2919L242.619 89.0239L272.848 106.477L273.848 104.745ZM186.295 162.988L202.742 172.484L203.742 170.752L187.295 161.256L186.295 162.988ZM202.742 151.76L186.295 161.256L187.295 162.988L203.742 153.492L202.742 151.76ZM204.242 171.618V152.626H202.242V171.618H204.242ZM286.849 149.75L315.092 142.182L314.575 140.25L286.331 147.818L286.849 149.75ZM295.124 176.769L287.556 148.525L285.624 149.043L293.192 177.286L295.124 176.769ZM322.143 168.494L293.899 176.062L294.417 177.993L322.66 170.425L322.143 168.494ZM313.868 141.475L321.435 169.718L323.367 169.201L315.799 140.957L313.868 141.475ZM230.201 219.175H157.101V221.175H230.201V219.175ZM231.201 275V220.175H229.201V275H231.201ZM157.101 276H230.201V274H157.101V276ZM156.101 220.175V275H158.101V220.175H156.101ZM279.231 202.561C279.231 207.055 275.588 210.698 271.094 210.698V212.698C276.693 212.698 281.231 208.159 281.231 202.561H279.231ZM271.094 194.423C275.588 194.423 279.231 198.066 279.231 202.561H281.231C281.231 196.962 276.693 192.423 271.094 192.423V194.423ZM262.956 202.561C262.956 198.066 266.6 194.423 271.094 194.423V192.423C265.495 192.423 260.956 196.962 260.956 202.561H262.956ZM271.094 210.698C266.6 210.698 262.956 207.055 262.956 202.561H260.956C260.956 208.159 265.495 212.698 271.094 212.698V210.698Z" fill="#80868B" mask="url(#path-8-inside-1_1123:677)"/>
+</svg>
diff --git a/src/images/courses/css/card.svg b/src/images/courses/css/card.svg
new file mode 100644
index 00000000000..cb970a679de
--- /dev/null
+++ b/src/images/courses/css/card.svg
@@ -0,0 +1 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h640v317H0z"/><path d="M321.496 70c33.137 0 60-26.863 60-60s-26.863-60-60-60-60 26.863-60 60 26.863 60 60 60Z" fill="#CEF"/><path d="M432.488 125.974c8.553 0 15.487-6.934 15.487-15.487S441.041 95 432.488 95s-15.487 6.934-15.487 15.487 6.934 15.487 15.487 15.487Z" fill="#DED"/><path d="M274.487 263.974c8.553 0 15.487-6.934 15.487-15.487S283.04 233 274.487 233 259 239.934 259 248.487s6.934 15.487 15.487 15.487Z" fill="#FDF"/><path d="m149.144 57.358 36.914 30.975-45.282 16.481 8.368-47.456Z" fill="#FDE"/><path d="M559.031 5.449v59.163L507.794 35.03l51.237-29.58v-.001Z" fill="#FED"/><path d="m581.474 167.786 47.87-12.827 12.827 47.87-47.87 12.827-12.827-47.87Z" fill="#FDF"/><path d="M402.002 248.788h120v120h-120v-120Z" fill="#DED"/><path d="M329.496 77.5c32.861 0 59.5-26.64 59.5-59.5s-26.639-59.5-59.5-59.5c-32.861 0-59.5 26.64-59.5 59.5s26.639 59.5 59.5 59.5Z" stroke="#6CF"/><path d="M440.488 133.474c8.277 0 14.987-6.71 14.987-14.987 0-8.277-6.71-14.987-14.987-14.987-8.277 0-14.987 6.71-14.987 14.987 0 8.277 6.71 14.987 14.987 14.987Z" stroke="#9D3"/><path d="M282.487 271.474c8.277 0 14.987-6.71 14.987-14.987 0-8.277-6.71-14.987-14.987-14.987-8.277 0-14.987 6.71-14.987 14.987 0 8.277 6.71 14.987 14.987 14.987Z" stroke="#C6F"/><path d="m149.419 112.048 8.067-45.75 35.587 29.861-43.654 15.889Z" stroke="#F6C"/><path d="m516.794 43.03 49.737-28.715v57.43L516.794 43.03Z" stroke="#FC6"/><path d="m590.086 176.14 46.904-12.568 12.568 46.904-46.904 12.568-12.568-46.904Z" stroke="#C6F"/><path d="M410.502 257.288h119v119h-119v-119Z" stroke="#9D3"/><path d="M24 140h6.12v33.279h16.776v5.847H24V140Zm39.76 40c-2.66 0-5.064-.619-7.213-1.858-2.113-1.239-3.771-2.951-4.973-5.137-1.202-2.222-1.803-4.699-1.803-7.431 0-2.623.564-5.028 1.694-7.213 1.165-2.223 2.786-3.971 4.863-5.246 2.076-1.312 4.444-1.967 7.104-1.967 2.732 0 5.1.601 7.104 1.803 2.04 1.202 3.588 2.878 4.644 5.027 1.057 2.113 1.585 4.554 1.585 7.323 0 .327-.018.655-.055.983-.036.328-.054.51-.054.547H55.78c.183 2.477 1.075 4.389 2.678 5.737 1.603 1.348 3.424 2.022 5.465 2.022 3.133 0 5.537-1.457 7.213-4.371l5.136 2.459a14.196 14.196 0 0 1-5.027 5.355C69.133 179.344 66.638 180 63.76 180Zm6.885-17.76c-.073-.874-.364-1.766-.874-2.677s-1.312-1.676-2.405-2.295c-1.056-.656-2.386-.984-3.989-.984-1.785 0-3.333.547-4.645 1.639-1.275 1.093-2.149 2.532-2.623 4.317h14.536ZM90.886 180c-1.931 0-3.68-.383-5.246-1.148-1.53-.801-2.75-1.894-3.661-3.278-.875-1.421-1.312-3.024-1.312-4.809 0-2.842 1.057-5.082 3.17-6.721 2.149-1.64 4.863-2.459 8.142-2.459 2.877 0 5.337.492 7.377 1.475v-1.147c0-1.64-.656-2.988-1.968-4.044-1.275-1.093-2.823-1.639-4.644-1.639-2.77 0-4.991 1.129-6.667 3.387l-4.59-3.169a12.715 12.715 0 0 1 4.754-3.934c1.93-.911 4.098-1.366 6.503-1.366 3.97 0 7.03 1.001 9.18 3.005 2.186 1.967 3.279 4.754 3.279 8.361v16.612h-5.847v-3.334h-.328a10.746 10.746 0 0 1-3.334 3.06c-1.347.765-2.95 1.148-4.808 1.148Zm.983-4.973a7.278 7.278 0 0 0 3.716-.983c1.166-.692 2.077-1.585 2.732-2.678.693-1.129 1.039-2.331 1.039-3.606a12.666 12.666 0 0 0-6.175-1.585c-2.004 0-3.57.437-4.7 1.311-1.129.875-1.694 1.986-1.694 3.334 0 1.238.492 2.258 1.476 3.06 1.02.765 2.222 1.147 3.606 1.147Zm19.68-23.005h5.683v4.044h.328c.582-1.385 1.639-2.532 3.169-3.443 1.53-.947 3.097-1.421 4.699-1.421 1.312 0 2.387.182 3.224.547v6.284c-1.238-.62-2.622-.929-4.153-.929-1.967 0-3.624.765-4.972 2.295-1.312 1.494-1.967 3.333-1.967 5.519v14.208h-6.011v-27.104Zm21.505 0h5.683v3.606h.328c.802-1.311 1.968-2.386 3.498-3.224 1.53-.838 3.187-1.256 4.972-1.256 3.352 0 5.884.983 7.596 2.95 1.749 1.968 2.623 4.682 2.623 8.142v16.886h-6.011V163.06c0-4.262-1.986-6.393-5.956-6.393-2.004 0-3.625.801-4.864 2.404-1.238 1.603-1.858 3.497-1.858 5.683v14.372h-6.011v-27.104Z" fill="#3C4043"/><path d="M189.7 180c-3.707 0-7.094-.873-10.16-2.62a19.208 19.208 0 0 1-7.166-7.166c-1.747-3.066-2.62-6.471-2.62-10.214 0-3.743.873-7.13 2.62-10.16 1.747-3.066 4.136-5.473 7.166-7.22 3.066-1.747 6.453-2.62 10.16-2.62 5.74 0 10.464 2.086 14.171 6.257l-4.224 4.117c-1.319-1.568-2.799-2.727-4.439-3.476-1.604-.784-3.44-1.176-5.508-1.176-2.566 0-4.919.588-7.058 1.765-2.104 1.176-3.779 2.852-5.027 5.026-1.212 2.139-1.818 4.635-1.818 7.487 0 2.852.606 5.365 1.818 7.54 1.248 2.139 2.923 3.797 5.027 4.973 2.139 1.177 4.492 1.765 7.058 1.765 4.278 0 7.915-1.782 10.909-5.348l4.332 4.172c-1.818 2.174-4.046 3.868-6.684 5.08-2.603 1.212-5.455 1.818-8.557 1.818Z" fill="url(#b)"/><path d="M222.49 180c-3.173 0-6.025-.927-8.556-2.781-2.531-1.854-4.278-4.456-5.241-7.807l5.669-2.3c.57 2.104 1.568 3.833 2.994 5.187 1.462 1.32 3.209 1.979 5.241 1.979 1.889 0 3.494-.481 4.813-1.444 1.319-.998 1.978-2.353 1.978-4.064 0-1.569-.588-2.852-1.764-3.85-1.141-1.034-3.156-2.068-6.043-3.102l-2.407-.855c-2.566-.892-4.723-2.175-6.47-3.851-1.747-1.675-2.621-3.886-2.621-6.631 0-1.889.517-3.636 1.551-5.24 1.034-1.605 2.46-2.87 4.278-3.797 1.854-.963 3.94-1.444 6.257-1.444 3.351 0 6.025.82 8.021 2.46 1.997 1.604 3.334 3.422 4.011 5.454l-5.401 2.3c-.392-1.212-1.141-2.282-2.246-3.209s-2.531-1.39-4.278-1.39c-1.747 0-3.226.446-4.439 1.337-1.176.891-1.764 2.032-1.764 3.422 0 1.319.535 2.407 1.604 3.262 1.07.856 2.745 1.676 5.027 2.46l2.406.802c3.28 1.141 5.811 2.639 7.594 4.492 1.818 1.819 2.727 4.261 2.727 7.327 0 2.495-.642 4.599-1.925 6.31-1.283 1.675-2.923 2.923-4.92 3.743a15.641 15.641 0 0 1-6.096 1.23Z" fill="url(#c)"/><path d="M253.145 180c-3.173 0-6.025-.927-8.557-2.781-2.531-1.854-4.278-4.456-5.24-7.807l5.668-2.3c.571 2.104 1.569 3.833 2.995 5.187 1.462 1.32 3.208 1.979 5.241 1.979 1.889 0 3.493-.481 4.812-1.444 1.319-.998 1.979-2.353 1.979-4.064 0-1.569-.588-2.852-1.765-3.85-1.141-1.034-3.155-2.068-6.043-3.102l-2.406-.855c-2.567-.892-4.724-2.175-6.471-3.851-1.746-1.675-2.62-3.886-2.62-6.631 0-1.889.517-3.636 1.551-5.24 1.034-1.605 2.46-2.87 4.278-3.797 1.854-.963 3.939-1.444 6.257-1.444 3.351 0 6.025.82 8.021 2.46 1.997 1.604 3.333 3.422 4.011 5.454l-5.401 2.3c-.392-1.212-1.141-2.282-2.246-3.209s-2.531-1.39-4.278-1.39c-1.747 0-3.227.446-4.439 1.337-1.176.891-1.765 2.032-1.765 3.422 0 1.319.535 2.407 1.605 3.262 1.069.856 2.745 1.676 5.026 2.46l2.407.802c3.28 1.141 5.811 2.639 7.593 4.492 1.819 1.819 2.728 4.261 2.728 7.327 0 2.495-.642 4.599-1.925 6.31-1.284 1.675-2.924 2.923-4.92 3.743a15.641 15.641 0 0 1-6.096 1.23Z" fill="url(#d)"/><path d="M272.462 152.46v-11.604h5.99v11.604l-.642 14.224h-4.759l-.589-14.224Zm2.995 27.005c-1.141 0-2.121-.392-2.941-1.176-.785-.82-1.177-1.801-1.177-2.941 0-1.141.392-2.104 1.177-2.888.82-.784 1.8-1.177 2.941-1.177 1.141 0 2.103.393 2.888 1.177.784.784 1.176 1.747 1.176 2.888 0 1.14-.392 2.121-1.176 2.941-.785.784-1.747 1.176-2.888 1.176Z" fill="url(#e)"/></g><defs><linearGradient id="b" x1="169.754" y1="180" x2="282.916" y2="156.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="c" x1="169.754" y1="180" x2="282.916" y2="156.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="d" x1="169.754" y1="180" x2="282.916" y2="156.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="e" x1="169.754" y1="180" x2="282.916" y2="156.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h640v320H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/images/courses/css/logo.svg b/src/images/courses/css/logo.svg
new file mode 100644
index 00000000000..d01bd34d97e
--- /dev/null
+++ b/src/images/courses/css/logo.svg
@@ -0,0 +1 @@
+<svg width="128" height="40" viewBox="0 0 256 80" preserveAspectRatio="xMinYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 20h6.12v33.279h16.776v5.847H0V20zM39.76 60c-2.66 0-5.064-.62-7.213-1.858-2.113-1.239-3.771-2.95-4.973-5.137-1.202-2.222-1.803-4.699-1.803-7.431 0-2.623.564-5.028 1.694-7.213 1.165-2.223 2.786-3.971 4.863-5.246 2.076-1.312 4.444-1.968 7.104-1.968 2.732 0 5.1.602 7.104 1.804 2.04 1.202 3.588 2.878 4.644 5.027 1.057 2.113 1.585 4.554 1.585 7.322 0 .328-.018.656-.054.984-.037.328-.055.51-.055.547H31.782c.182 2.477 1.074 4.39 2.677 5.737 1.603 1.348 3.424 2.022 5.465 2.022 3.133 0 5.537-1.457 7.213-4.371l5.136 2.459a14.195 14.195 0 0 1-5.027 5.355C45.133 59.344 42.638 60 39.76 60zm6.885-17.76c-.073-.874-.364-1.766-.874-2.677-.51-.91-1.312-1.676-2.405-2.295-1.056-.656-2.386-.984-3.989-.984-1.785 0-3.333.547-4.645 1.64-1.275 1.092-2.149 2.531-2.623 4.316h14.536zM66.886 60c-1.931 0-3.68-.383-5.246-1.148-1.53-.801-2.75-1.894-3.661-3.278-.875-1.421-1.312-3.024-1.312-4.809 0-2.842 1.057-5.082 3.17-6.721 2.149-1.64 4.863-2.46 8.142-2.46 2.877 0 5.337.492 7.377 1.476v-1.147c0-1.64-.656-2.988-1.968-4.044-1.275-1.093-2.823-1.64-4.644-1.64-2.77 0-4.991 1.13-6.667 3.389l-4.59-3.17a12.728 12.728 0 0 1 4.754-3.934c1.93-.911 4.098-1.367 6.503-1.367 3.97 0 7.03 1.002 9.18 3.006 2.186 1.967 3.279 4.754 3.279 8.36v16.613h-5.847v-3.334h-.328a10.746 10.746 0 0 1-3.334 3.06c-1.347.766-2.95 1.148-4.808 1.148zm.983-4.973a7.267 7.267 0 0 0 3.716-.983c1.166-.692 2.077-1.585 2.732-2.678.693-1.13 1.039-2.331 1.039-3.606a12.67 12.67 0 0 0-6.175-1.585c-2.004 0-3.57.437-4.7 1.311-1.129.875-1.694 1.986-1.694 3.334 0 1.238.492 2.258 1.476 3.06 1.02.765 2.222 1.147 3.606 1.147zM87.549 32.022h5.683v4.044h.328c.582-1.385 1.639-2.532 3.169-3.443 1.53-.947 3.097-1.42 4.699-1.42 1.312 0 2.387.181 3.224.546v6.284c-1.238-.62-2.622-.93-4.153-.93-1.967 0-3.624.766-4.972 2.296-1.312 1.493-1.967 3.333-1.967 5.519v14.208h-6.011V32.022zM109.054 32.022h5.683v3.606h.328c.802-1.311 1.968-2.386 3.498-3.224a10.185 10.185 0 0 1 4.972-1.257c3.352 0 5.884.984 7.596 2.951 1.749 1.968 2.623 4.682 2.623 8.142v16.886h-6.011V43.06c0-4.262-1.986-6.393-5.956-6.393-2.004 0-3.625.801-4.864 2.404-1.238 1.603-1.858 3.497-1.858 5.683v14.372h-6.011V32.022z" fill="#3C4043"/><path d="M165.7 60c-3.707 0-7.094-.873-10.16-2.62a19.205 19.205 0 0 1-7.166-7.166c-1.747-3.066-2.62-6.47-2.62-10.214 0-3.743.873-7.13 2.62-10.16 1.747-3.066 4.136-5.473 7.166-7.22 3.066-1.747 6.453-2.62 10.16-2.62 5.74 0 10.464 2.086 14.171 6.257l-4.224 4.117c-1.319-1.568-2.799-2.727-4.439-3.476-1.604-.784-3.44-1.176-5.508-1.176-2.566 0-4.919.588-7.058 1.765-2.104 1.176-3.779 2.852-5.027 5.026-1.212 2.14-1.818 4.635-1.818 7.487 0 2.852.606 5.365 1.818 7.54 1.248 2.14 2.923 3.797 5.027 4.973 2.139 1.177 4.492 1.765 7.058 1.765 4.278 0 7.915-1.782 10.909-5.347l4.332 4.17c-1.818 2.175-4.046 3.869-6.684 5.08C171.654 59.395 168.802 60 165.7 60z" fill="url(#a)"/><path d="M198.49 60c-3.173 0-6.025-.927-8.556-2.78-2.531-1.855-4.278-4.457-5.241-7.808l5.669-2.3c.57 2.104 1.568 3.833 2.994 5.188 1.462 1.319 3.209 1.978 5.241 1.978 1.889 0 3.494-.481 4.813-1.444 1.319-.998 1.978-2.353 1.978-4.064 0-1.569-.588-2.852-1.764-3.85-1.141-1.034-3.156-2.068-6.043-3.102l-2.407-.855c-2.566-.892-4.723-2.175-6.47-3.85-1.747-1.676-2.621-3.887-2.621-6.632 0-1.89.517-3.636 1.551-5.24 1.034-1.605 2.46-2.87 4.278-3.797 1.854-.963 3.94-1.444 6.257-1.444 3.351 0 6.025.82 8.021 2.46 1.997 1.604 3.334 3.422 4.011 5.454l-5.401 2.3c-.392-1.212-1.141-2.282-2.246-3.209s-2.531-1.39-4.278-1.39c-1.747 0-3.226.446-4.439 1.337-1.176.891-1.764 2.032-1.764 3.422 0 1.32.535 2.407 1.604 3.262 1.07.856 2.745 1.676 5.027 2.46l2.406.802c3.28 1.141 5.811 2.638 7.594 4.492 1.818 1.819 2.727 4.26 2.727 7.327 0 2.495-.642 4.599-1.925 6.31-1.283 1.675-2.923 2.923-4.92 3.743A15.654 15.654 0 0 1 198.49 60z" fill="url(#b)"/><path d="M229.145 60c-3.173 0-6.025-.927-8.557-2.78-2.531-1.855-4.278-4.457-5.24-7.808l5.668-2.3c.571 2.104 1.569 3.833 2.995 5.188 1.462 1.319 3.208 1.978 5.241 1.978 1.889 0 3.493-.481 4.812-1.444 1.319-.998 1.979-2.353 1.979-4.064 0-1.569-.588-2.852-1.765-3.85-1.141-1.034-3.155-2.068-6.043-3.102l-2.406-.855c-2.567-.892-4.724-2.175-6.471-3.85-1.746-1.676-2.62-3.887-2.62-6.632 0-1.89.517-3.636 1.551-5.24 1.034-1.605 2.46-2.87 4.278-3.797 1.854-.963 3.939-1.444 6.257-1.444 3.351 0 6.025.82 8.021 2.46 1.997 1.604 3.333 3.422 4.011 5.454l-5.401 2.3c-.392-1.212-1.141-2.282-2.246-3.209s-2.531-1.39-4.278-1.39c-1.747 0-3.227.446-4.439 1.337-1.176.891-1.765 2.032-1.765 3.422 0 1.32.535 2.407 1.605 3.262 1.069.856 2.745 1.676 5.026 2.46l2.407.802c3.28 1.141 5.811 2.638 7.593 4.492 1.819 1.819 2.728 4.26 2.728 7.327 0 2.495-.642 4.599-1.925 6.31-1.284 1.675-2.924 2.923-4.92 3.743a15.654 15.654 0 0 1-6.096 1.23z" fill="url(#c)"/><path d="M248.462 32.46V20.856h5.99V32.46l-.642 14.224h-4.759l-.589-14.224zm2.995 27.005c-1.141 0-2.121-.392-2.941-1.176-.785-.82-1.177-1.8-1.177-2.941 0-1.141.392-2.104 1.177-2.888.82-.784 1.8-1.177 2.941-1.177 1.141 0 2.103.393 2.888 1.177.784.784 1.176 1.747 1.176 2.888 0 1.14-.392 2.12-1.176 2.94-.785.785-1.747 1.177-2.888 1.177z" fill="url(#d)"/><defs><linearGradient id="a" x1="145.754" y1="60" x2="258.916" y2="36.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="b" x1="145.754" y1="60" x2="258.916" y2="36.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="c" x1="145.754" y1="60" x2="258.916" y2="36.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient><linearGradient id="d" x1="145.754" y1="60" x2="258.916" y2="36.016" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#93F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#39F"/><stop offset=".911" stop-color="#3C0"/></linearGradient></defs></svg>
diff --git a/src/images/courses/design/background.svg b/src/images/courses/design/background.svg
new file mode 100644
index 00000000000..c4e040b101e
--- /dev/null
+++ b/src/images/courses/design/background.svg
@@ -0,0 +1,22 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_821:731)">
+<rect width="360" height="144" fill="white"/>
+<g clip-path="url(#clip1_821:731)">
+<rect x="73.125" y="-85" width="45" height="129.375" fill="#FFDDEE" fill-opacity="0.56"/>
+<path d="M95.3438 -85L95.625 44.375M95.625 44.375L87.75 36.5M95.625 44.375L103.5 36.5" stroke="#FF66CC"/>
+<rect x="302.062" y="143.375" width="65.25" height="129.375" fill="#FFDDEE" fill-opacity="0.28"/>
+<rect x="127.625" y="-104.75" width="110.938" height="139.625" stroke="#FF66CC" stroke-dasharray="2 2"/>
+<rect x="248.562" y="29.125" width="118.25" height="35" stroke="#FF66CC" stroke-dasharray="2 2"/>
+<rect x="248.062" y="-22" width="119.25" height="41.625" fill="#CCEEFF"/>
+<path d="M254.812 44.375V57.875M254.812 57.875H268.312M254.812 57.875L283.781 28.9062" stroke="#FF66CC" stroke-dasharray="2 2"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_821:731">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1_821:731">
+<rect width="360" height="360" fill="white" transform="translate(0 -76)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/design/card-decor.svg b/src/images/courses/design/card-decor.svg
new file mode 100644
index 00000000000..d164c817f24
--- /dev/null
+++ b/src/images/courses/design/card-decor.svg
@@ -0,0 +1 @@
+<svg width="328" height="258" viewBox="0 0 328 258" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M32-75h40V41H32V-75Z" fill="#FDE" fill-opacity=".56"/><path d="m52 41 7-7.06M51.75-75 52 41l-.25-116ZM52 41l-7-7.06L52 41Z" stroke="#F6C"/><path d="M237 210h58v116h-58V210Z" fill="#FDE" fill-opacity=".28"/><path d="M140 228h40v116h-40V228Z" fill="#CEF"/><path d="m180 239-5 5m-35-5h40-40Zm0 0 5-5-5 5Zm0 0 5 5-5-5Zm40 0-5-5 5 5Z" stroke="#39F"/><path d="M189 228h40v20h-40v-20Z" fill="#FDE" fill-opacity=".56"/><path d="M81.184-92h99.379V33.014H81.184V-92ZM189.096 27.491H295v31.63H189.096v-31.63ZM33 211.986h99.379V337H33V211.986Z" stroke="#F6C" stroke-dasharray="2 2"/><path d="M189-18h106v37H189v-37Z" fill="#CEF"/><path d="m195 53 25-26m-25 13.883V53 40.883ZM195 53h11.65H195Z" stroke="#F6C" stroke-dasharray="2 2"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h328v258H0z"/></clipPath></defs></svg>
diff --git a/src/images/courses/design/card.svg b/src/images/courses/design/card.svg
new file mode 100644
index 00000000000..1df3c74d02e
--- /dev/null
+++ b/src/images/courses/design/card.svg
@@ -0,0 +1 @@
+<svg width="640" height="320" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h640v320H0z"/><g clip-path="url(#b)"><path fill="#FDE" fill-opacity=".56" d="M130-176h80V54h-80z"/><path d="m169.5-176 .5 230m0 0-14-14m14 14 14-14" stroke="#F6C"/><path fill="#FDE" fill-opacity=".28" d="M537 230h116v230H537z"/><path fill="#CEF" d="M345 266h80v230h-80z"/><path d="M345 287h80m-80 0 10-10m-10 10 10 10m70-10-10-10m10 10-10 10" stroke="#39F"/><path fill="#FDE" fill-opacity=".56" d="M441 266h80v40h-80z"/><path stroke="#F6C" stroke-dasharray="2 2" d="M226.5-211.5h198v249h-198zM130.5 266.5h198v249h-198zM441.5 26.5h211v63h-211z"/><path fill="#CEF" d="M441-64h212v74H441z"/><path d="M453 54v24m0 0h24m-24 0 51.5-51.5" stroke="#F6C" stroke-dasharray="2 2"/></g><path d="M24 110h6.12v33.279h16.776v5.847H24V110ZM63.76 150c-2.66 0-5.064-.619-7.213-1.858-2.113-1.239-3.771-2.951-4.973-5.137-1.202-2.222-1.803-4.699-1.803-7.431 0-2.623.564-5.028 1.694-7.213 1.165-2.223 2.786-3.971 4.863-5.246 2.076-1.312 4.444-1.967 7.104-1.967 2.732 0 5.1.601 7.104 1.803 2.04 1.202 3.588 2.878 4.644 5.027 1.057 2.113 1.585 4.554 1.585 7.323 0 .327-.018.655-.055.983-.036.328-.054.51-.054.547H55.78c.183 2.477 1.075 4.389 2.678 5.737 1.603 1.348 3.424 2.022 5.465 2.022 3.133 0 5.537-1.457 7.213-4.371l5.136 2.459a14.196 14.196 0 0 1-5.027 5.355C69.133 149.344 66.638 150 63.76 150Zm6.885-17.76c-.073-.874-.364-1.766-.874-2.677s-1.312-1.676-2.405-2.295c-1.056-.656-2.386-.984-3.989-.984-1.785 0-3.333.547-4.645 1.639-1.275 1.093-2.149 2.532-2.623 4.317h14.536ZM90.886 150c-1.931 0-3.68-.383-5.246-1.148-1.53-.801-2.75-1.894-3.661-3.278-.875-1.421-1.312-3.024-1.312-4.809 0-2.842 1.057-5.082 3.17-6.721 2.149-1.64 4.863-2.459 8.142-2.459 2.877 0 5.337.492 7.377 1.475v-1.147c0-1.64-.656-2.988-1.968-4.044-1.275-1.093-2.823-1.639-4.644-1.639-2.77 0-4.991 1.129-6.667 3.387l-4.59-3.169a12.722 12.722 0 0 1 4.754-3.934c1.93-.911 4.098-1.366 6.503-1.366 3.97 0 7.03 1.001 9.18 3.005 2.186 1.967 3.279 4.754 3.279 8.361v16.612h-5.847v-3.334h-.328a10.735 10.735 0 0 1-3.334 3.06c-1.347.765-2.95 1.148-4.808 1.148Zm.983-4.973a7.275 7.275 0 0 0 3.716-.983c1.166-.692 2.077-1.585 2.732-2.678.693-1.129 1.039-2.331 1.039-3.606a12.664 12.664 0 0 0-6.175-1.585c-2.004 0-3.57.437-4.7 1.311-1.129.875-1.694 1.986-1.694 3.334 0 1.238.492 2.258 1.476 3.06 1.02.765 2.222 1.147 3.606 1.147ZM111.549 122.022h5.683v4.044h.328c.582-1.385 1.639-2.532 3.169-3.443 1.53-.947 3.097-1.421 4.699-1.421 1.312 0 2.387.182 3.224.547v6.284c-1.238-.62-2.622-.929-4.153-.929-1.967 0-3.624.765-4.972 2.295-1.312 1.494-1.967 3.333-1.967 5.519v14.208h-6.011v-27.104ZM133.054 122.022h5.683v3.606h.328c.802-1.311 1.968-2.386 3.498-3.224 1.53-.838 3.187-1.256 4.972-1.256 3.352 0 5.884.983 7.596 2.95 1.749 1.968 2.623 4.682 2.623 8.142v16.886h-6.011V133.06c0-4.262-1.986-6.393-5.956-6.393-2.004 0-3.625.801-4.864 2.404-1.238 1.603-1.858 3.497-1.858 5.683v14.372h-6.011v-27.104Z" fill="#3C4043"/><path d="M24 209v-38.664h13.554c2.376 0 4.5.504 6.372 1.512 1.872 1.008 3.348 2.412 4.428 4.212 1.116 1.764 1.674 3.798 1.674 6.102 0 2.52-.792 4.806-2.376 6.858-1.548 2.016-3.744 3.42-6.588 4.212l10.746 15.444V209h-6.858l-10.314-15.174H29.94V209H24Zm13.608-33.102H29.94v12.474h7.452c1.836 0 3.402-.576 4.698-1.728 1.296-1.188 1.944-2.7 1.944-4.536a6.175 6.175 0 0 0-.756-2.97 5.721 5.721 0 0 0-2.214-2.322c-.936-.612-2.088-.918-3.456-.918Z" fill="url(#c)"/><path d="M68.042 209.864c-2.7 0-5.112-.63-7.236-1.89-2.124-1.26-3.798-2.988-5.022-5.184-1.188-2.196-1.782-4.698-1.782-7.506 0-2.628.576-5.058 1.728-7.29 1.152-2.232 2.754-4.014 4.806-5.346 2.088-1.368 4.482-2.052 7.182-2.052 2.844 0 5.256.612 7.236 1.836a11.896 11.896 0 0 1 4.59 5.022c1.044 2.124 1.566 4.518 1.566 7.182 0 .396-.018.756-.054 1.08 0 .324-.018.576-.054.756H59.726c.288 2.736 1.242 4.788 2.862 6.156 1.656 1.368 3.528 2.052 5.616 2.052 1.872 0 3.42-.414 4.644-1.242a9.848 9.848 0 0 0 2.916-3.186l4.806 2.322a14.902 14.902 0 0 1-4.86 5.292c-2.052 1.332-4.608 1.998-7.668 1.998Zm-.27-24.3c-1.944 0-3.6.594-4.968 1.782-1.368 1.188-2.286 2.772-2.754 4.752h15.282c-.072-.936-.378-1.908-.918-2.916s-1.368-1.854-2.484-2.538c-1.08-.72-2.466-1.08-4.158-1.08Z" fill="url(#d)"/><path d="M96.828 209.864c-3.312 0-5.958-.72-7.938-2.16-1.98-1.476-3.348-3.222-4.104-5.238l5.238-2.268c.648 1.476 1.584 2.61 2.808 3.402 1.224.756 2.61 1.134 4.158 1.134 1.44 0 2.682-.252 3.726-.756 1.044-.54 1.566-1.404 1.566-2.592 0-1.152-.522-1.998-1.566-2.538-1.044-.54-2.34-1.008-3.888-1.404l-3.294-.756a13.507 13.507 0 0 1-3.726-1.512A8.599 8.599 0 0 1 87 192.53c-.72-1.116-1.08-2.412-1.08-3.888 0-1.62.486-3.024 1.458-4.212.972-1.224 2.25-2.16 3.834-2.808 1.62-.684 3.366-1.026 5.238-1.026 2.556 0 4.788.504 6.696 1.512 1.944.972 3.366 2.448 4.266 4.428l-5.022 2.268c-.648-1.224-1.494-2.07-2.538-2.538-1.008-.504-2.124-.756-3.348-.756-1.368 0-2.52.288-3.456.864-.9.576-1.35 1.296-1.35 2.16 0 .936.396 1.674 1.188 2.214.828.54 1.836.972 3.024 1.296l3.996.972c2.736.684 4.788 1.728 6.156 3.132 1.368 1.368 2.052 3.042 2.052 5.022 0 1.764-.504 3.312-1.512 4.644-1.008 1.296-2.376 2.304-4.104 3.024-1.692.684-3.582 1.026-5.67 1.026Z" fill="url(#e)"/><path d="M112.886 220.664V181.46h5.454v3.726h.324c.72-1.188 1.836-2.25 3.348-3.186 1.548-.936 3.384-1.404 5.508-1.404 2.52 0 4.77.63 6.75 1.89 1.98 1.26 3.546 2.988 4.698 5.184 1.188 2.196 1.782 4.716 1.782 7.56 0 2.844-.594 5.382-1.782 7.614-1.152 2.196-2.718 3.924-4.698 5.184-1.98 1.224-4.23 1.836-6.75 1.836-2.124 0-3.96-.45-5.508-1.35-1.512-.936-2.628-1.998-3.348-3.186h-.324l.324 3.834v11.502h-5.778Zm13.77-16.146c1.44 0 2.79-.378 4.05-1.134 1.26-.756 2.286-1.818 3.078-3.186.792-1.404 1.188-3.06 1.188-4.968s-.396-3.546-1.188-4.914c-.792-1.404-1.818-2.484-3.078-3.24a7.738 7.738 0 0 0-4.05-1.134c-1.44 0-2.79.378-4.05 1.134-1.26.756-2.286 1.836-3.078 3.24-.792 1.368-1.188 3.006-1.188 4.914s.396 3.564 1.188 4.968c.792 1.368 1.818 2.43 3.078 3.186a7.738 7.738 0 0 0 4.05 1.134Z" fill="url(#f)"/><path d="M159.07 209.864c-2.844 0-5.346-.648-7.506-1.944a13.901 13.901 0 0 1-5.076-5.238c-1.224-2.196-1.836-4.68-1.836-7.452 0-2.736.612-5.202 1.836-7.398 1.224-2.232 2.916-3.996 5.076-5.292 2.16-1.296 4.662-1.944 7.506-1.944 2.808 0 5.292.648 7.452 1.944 2.16 1.296 3.852 3.06 5.076 5.292 1.224 2.196 1.836 4.662 1.836 7.398 0 2.772-.612 5.256-1.836 7.452a13.901 13.901 0 0 1-5.076 5.238c-2.16 1.296-4.644 1.944-7.452 1.944Zm0-5.346c1.512 0 2.916-.36 4.212-1.08 1.296-.756 2.34-1.818 3.132-3.186.828-1.404 1.242-3.078 1.242-5.022 0-1.944-.414-3.6-1.242-4.968-.792-1.404-1.836-2.466-3.132-3.186a8.215 8.215 0 0 0-4.212-1.134 8.506 8.506 0 0 0-4.266 1.134c-1.296.72-2.358 1.782-3.186 3.186-.792 1.368-1.188 3.024-1.188 4.968s.396 3.618 1.188 5.022c.828 1.368 1.89 2.43 3.186 3.186a8.837 8.837 0 0 0 4.266 1.08Z" fill="url(#g)"/><path d="M178.278 209v-27.54h5.508v3.78h.324c.792-1.332 1.962-2.43 3.51-3.294 1.584-.9 3.312-1.35 5.184-1.35 3.384 0 5.922 1.008 7.614 3.024 1.692 2.016 2.538 4.68 2.538 7.992V209h-5.778v-16.632c0-2.232-.558-3.852-1.674-4.86-1.116-1.044-2.574-1.566-4.374-1.566-1.404 0-2.628.396-3.672 1.188-1.044.756-1.872 1.764-2.484 3.024a9.625 9.625 0 0 0-.864 4.05V209h-5.832Z" fill="url(#h)"/><path d="M219.383 209.864c-3.312 0-5.958-.72-7.938-2.16-1.98-1.476-3.348-3.222-4.104-5.238l5.238-2.268c.648 1.476 1.584 2.61 2.808 3.402 1.224.756 2.61 1.134 4.158 1.134 1.44 0 2.682-.252 3.726-.756 1.044-.54 1.566-1.404 1.566-2.592 0-1.152-.522-1.998-1.566-2.538-1.044-.54-2.34-1.008-3.888-1.404l-3.294-.756a13.507 13.507 0 0 1-3.726-1.512 8.599 8.599 0 0 1-2.808-2.646c-.72-1.116-1.08-2.412-1.08-3.888 0-1.62.486-3.024 1.458-4.212.972-1.224 2.25-2.16 3.834-2.808 1.62-.684 3.366-1.026 5.238-1.026 2.556 0 4.788.504 6.696 1.512 1.944.972 3.366 2.448 4.266 4.428l-5.022 2.268c-.648-1.224-1.494-2.07-2.538-2.538-1.008-.504-2.124-.756-3.348-.756-1.368 0-2.52.288-3.456.864-.9.576-1.35 1.296-1.35 2.16 0 .936.396 1.674 1.188 2.214.828.54 1.836.972 3.024 1.296l3.996.972c2.736.684 4.788 1.728 6.156 3.132 1.368 1.368 2.052 3.042 2.052 5.022 0 1.764-.504 3.312-1.512 4.644-1.008 1.296-2.376 2.304-4.104 3.024-1.692.684-3.582 1.026-5.67 1.026Z" fill="url(#i)"/><path d="M238.843 177.41c-1.08 0-2.016-.378-2.808-1.134-.756-.792-1.134-1.728-1.134-2.808 0-1.08.378-1.998 1.134-2.754.792-.756 1.728-1.134 2.808-1.134 1.08 0 1.998.378 2.754 1.134.792.756 1.188 1.674 1.188 2.754s-.396 2.016-1.188 2.808c-.756.756-1.674 1.134-2.754 1.134ZM235.927 209v-27.54h5.832V209h-5.832Z" fill="url(#j)"/><path d="m257.365 209-11.394-27.54h6.48l7.722 20.034h.27l7.884-20.034h6.372L263.197 209h-5.832Z" fill="url(#k)"/><path d="M290.264 209.864c-2.7 0-5.112-.63-7.236-1.89-2.124-1.26-3.798-2.988-5.022-5.184-1.188-2.196-1.782-4.698-1.782-7.506 0-2.628.576-5.058 1.728-7.29 1.152-2.232 2.754-4.014 4.806-5.346 2.088-1.368 4.482-2.052 7.182-2.052 2.844 0 5.256.612 7.236 1.836a11.896 11.896 0 0 1 4.59 5.022c1.044 2.124 1.566 4.518 1.566 7.182 0 .396-.018.756-.054 1.08 0 .324-.018.576-.054.756h-21.276c.288 2.736 1.242 4.788 2.862 6.156 1.656 1.368 3.528 2.052 5.616 2.052 1.872 0 3.42-.414 4.644-1.242a9.848 9.848 0 0 0 2.916-3.186l4.806 2.322a14.902 14.902 0 0 1-4.86 5.292c-2.052 1.332-4.608 1.998-7.668 1.998Zm-.27-24.3c-1.944 0-3.6.594-4.968 1.782-1.368 1.188-2.286 2.772-2.754 4.752h15.282c-.072-.936-.378-1.908-.918-2.916s-1.368-1.854-2.484-2.538c-1.08-.72-2.466-1.08-4.158-1.08Z" fill="url(#l)"/><path d="M322.318 209v-38.664h12.366c4.068 0 7.56.828 10.476 2.484 2.952 1.62 5.22 3.888 6.804 6.804 1.62 2.916 2.43 6.264 2.43 10.044 0 3.816-.81 7.182-2.43 10.098-1.584 2.88-3.852 5.148-6.804 6.804-2.916 1.62-6.408 2.43-10.476 2.43h-12.366Zm5.94-5.616h6.264c4.392 0 7.794-1.224 10.206-3.672 2.448-2.448 3.672-5.796 3.672-10.044s-1.224-7.596-3.672-10.044c-2.412-2.448-5.814-3.672-10.206-3.672h-6.264v27.432Z" fill="url(#m)"/><path d="M372.003 209.864c-2.7 0-5.112-.63-7.236-1.89-2.124-1.26-3.798-2.988-5.022-5.184-1.188-2.196-1.782-4.698-1.782-7.506 0-2.628.576-5.058 1.728-7.29 1.152-2.232 2.754-4.014 4.806-5.346 2.088-1.368 4.482-2.052 7.182-2.052 2.844 0 5.256.612 7.236 1.836a11.896 11.896 0 0 1 4.59 5.022c1.044 2.124 1.566 4.518 1.566 7.182 0 .396-.018.756-.054 1.08 0 .324-.018.576-.054.756h-21.276c.288 2.736 1.242 4.788 2.862 6.156 1.656 1.368 3.528 2.052 5.616 2.052 1.872 0 3.42-.414 4.644-1.242a9.848 9.848 0 0 0 2.916-3.186l4.806 2.322a14.902 14.902 0 0 1-4.86 5.292c-2.052 1.332-4.608 1.998-7.668 1.998Zm-.27-24.3c-1.944 0-3.6.594-4.968 1.782-1.368 1.188-2.286 2.772-2.754 4.752h15.282c-.072-.936-.378-1.908-.918-2.916s-1.368-1.854-2.484-2.538c-1.08-.72-2.466-1.08-4.158-1.08Z" fill="url(#n)"/><path d="M400.789 209.864c-3.312 0-5.958-.72-7.938-2.16-1.98-1.476-3.348-3.222-4.104-5.238l5.238-2.268c.648 1.476 1.584 2.61 2.808 3.402 1.224.756 2.61 1.134 4.158 1.134 1.44 0 2.682-.252 3.726-.756 1.044-.54 1.566-1.404 1.566-2.592 0-1.152-.522-1.998-1.566-2.538-1.044-.54-2.34-1.008-3.888-1.404l-3.294-.756a13.507 13.507 0 0 1-3.726-1.512 8.599 8.599 0 0 1-2.808-2.646c-.72-1.116-1.08-2.412-1.08-3.888 0-1.62.486-3.024 1.458-4.212.972-1.224 2.25-2.16 3.834-2.808 1.62-.684 3.366-1.026 5.238-1.026 2.556 0 4.788.504 6.696 1.512 1.944.972 3.366 2.448 4.266 4.428l-5.022 2.268c-.648-1.224-1.494-2.07-2.538-2.538-1.008-.504-2.124-.756-3.348-.756-1.368 0-2.52.288-3.456.864-.9.576-1.35 1.296-1.35 2.16 0 .936.396 1.674 1.188 2.214.828.54 1.836.972 3.024 1.296l3.996.972c2.736.684 4.788 1.728 6.156 3.132 1.368 1.368 2.052 3.042 2.052 5.022 0 1.764-.504 3.312-1.512 4.644-1.008 1.296-2.376 2.304-4.104 3.024-1.692.684-3.582 1.026-5.67 1.026Z" fill="url(#o)"/><path d="M420.249 177.41c-1.08 0-2.016-.378-2.808-1.134-.756-.792-1.134-1.728-1.134-2.808 0-1.08.378-1.998 1.134-2.754.792-.756 1.728-1.134 2.808-1.134 1.08 0 1.998.378 2.754 1.134.792.756 1.188 1.674 1.188 2.754s-.396 2.016-1.188 2.808c-.756.756-1.674 1.134-2.754 1.134ZM417.333 209v-27.54h5.832V209h-5.832Z" fill="url(#p)"/><path d="M442.557 221.528c-2.412 0-4.5-.396-6.264-1.188-1.728-.756-3.132-1.746-4.212-2.97-1.08-1.188-1.854-2.412-2.322-3.672l5.4-2.268a7.777 7.777 0 0 0 2.754 3.51c1.296.936 2.844 1.404 4.644 1.404 2.52 0 4.5-.756 5.94-2.268 1.476-1.512 2.214-3.654 2.214-6.426v-2.646h-.324c-.864 1.296-2.07 2.34-3.618 3.132-1.512.756-3.24 1.134-5.184 1.134-2.34 0-4.482-.594-6.426-1.782-1.944-1.188-3.51-2.844-4.698-4.968-1.188-2.16-1.782-4.68-1.782-7.56 0-2.916.594-5.436 1.782-7.56 1.188-2.16 2.754-3.834 4.698-5.022 1.944-1.188 4.086-1.782 6.426-1.782 1.944 0 3.672.396 5.184 1.188 1.548.792 2.754 1.836 3.618 3.132h.324v-3.456h5.562v26.082c0 2.988-.594 5.526-1.782 7.614-1.152 2.088-2.754 3.672-4.806 4.752-2.052 1.08-4.428 1.62-7.128 1.62Zm.054-17.55c1.44 0 2.772-.342 3.996-1.026 1.224-.72 2.214-1.746 2.97-3.078.756-1.368 1.134-3.006 1.134-4.914 0-1.98-.378-3.636-1.134-4.968-.756-1.368-1.746-2.394-2.97-3.078a8.055 8.055 0 0 0-3.996-1.026c-1.44 0-2.79.36-4.05 1.08-1.224.684-2.214 1.692-2.97 3.024-.756 1.332-1.134 2.988-1.134 4.968 0 1.944.378 3.6 1.134 4.968.756 1.332 1.746 2.34 2.97 3.024a8.36 8.36 0 0 0 4.05 1.026Z" fill="url(#q)"/><path d="M463.096 209v-27.54h5.508v3.78h.324c.792-1.332 1.962-2.43 3.51-3.294 1.584-.9 3.312-1.35 5.184-1.35 3.384 0 5.922 1.008 7.614 3.024 1.692 2.016 2.538 4.68 2.538 7.992V209h-5.778v-16.632c0-2.232-.558-3.852-1.674-4.86-1.116-1.044-2.574-1.566-4.374-1.566-1.404 0-2.628.396-3.672 1.188-1.044.756-1.872 1.764-2.484 3.024a9.625 9.625 0 0 0-.864 4.05V209h-5.832Z" fill="url(#r)"/><path d="m495.717 196.688-.54-14.202v-12.15h5.832v12.15l-.594 14.202h-4.698Zm2.376 12.636c-1.152 0-2.124-.396-2.916-1.188-.792-.792-1.188-1.746-1.188-2.862s.396-2.07 1.188-2.862c.792-.792 1.764-1.188 2.916-1.188 1.116 0 2.07.396 2.862 1.188.792.792 1.188 1.746 1.188 2.862s-.396 2.07-1.188 2.862c-.792.792-1.746 1.188-2.862 1.188Z" fill="url(#s)"/></g><defs><linearGradient id="c" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="d" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="e" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="f" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="g" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="h" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="i" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="j" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="k" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="l" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="m" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="n" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="o" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="p" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="q" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="r" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="s" x1="24" y1="221.528" x2="366.156" y2="-21.709" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h640v320H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(0 -160)" d="M0 0h640v640H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/images/courses/design/logo.svg b/src/images/courses/design/logo.svg
new file mode 100644
index 00000000000..7ced69bc4cd
--- /dev/null
+++ b/src/images/courses/design/logo.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 70" width="240" height="70" preserveAspectRatio="xMinYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 10h3.06v16.64h8.388v2.923H0V10ZM19.88 30c-1.33 0-2.532-.31-3.607-.929a6.61 6.61 0 0 1-2.486-2.568c-.601-1.111-.902-2.35-.902-3.716 0-1.312.283-2.514.847-3.607a6.624 6.624 0 0 1 2.432-2.623c1.038-.655 2.222-.983 3.552-.983 1.366 0 2.55.3 3.552.901a5.847 5.847 0 0 1 2.322 2.514c.528 1.056.793 2.277.793 3.661 0 .164-.01.328-.028.492a5.822 5.822 0 0 0-.027.273H15.89c.09 1.239.537 2.195 1.339 2.87.801.673 1.712 1.01 2.732 1.01 1.566 0 2.768-.729 3.606-2.186l2.569 1.23a7.097 7.097 0 0 1-2.514 2.677c-1.056.656-2.304.984-3.743.984Zm3.442-8.88c-.036-.437-.182-.883-.437-1.339-.255-.455-.655-.837-1.202-1.147-.528-.328-1.193-.492-1.994-.492-.893 0-1.667.273-2.323.82-.637.546-1.075 1.266-1.311 2.158h7.267ZM33.443 30c-.966 0-1.84-.191-2.623-.574a4.83 4.83 0 0 1-1.83-1.64c-.438-.71-.656-1.511-.656-2.404 0-1.42.528-2.54 1.584-3.36 1.075-.82 2.432-1.23 4.071-1.23 1.44 0 2.669.246 3.689.738v-.574c0-.82-.328-1.493-.984-2.022-.637-.546-1.412-.82-2.322-.82-1.385 0-2.496.565-3.334 1.695l-2.295-1.585a6.365 6.365 0 0 1 2.377-1.967c.966-.456 2.05-.683 3.252-.683 1.985 0 3.515.5 4.59 1.502 1.093.984 1.64 2.378 1.64 4.18v8.307h-2.924v-1.667h-.164a5.372 5.372 0 0 1-1.667 1.53c-.674.383-1.475.574-2.404.574Zm.492-2.486c.674 0 1.293-.164 1.858-.492a3.853 3.853 0 0 0 1.366-1.339c.346-.565.519-1.166.519-1.803a6.334 6.334 0 0 0-3.088-.793c-1.001 0-1.785.219-2.35.656-.564.437-.846.993-.846 1.667 0 .62.246 1.13.737 1.53.51.382 1.111.574 1.804.574ZM43.774 16.01h2.842v2.023h.164c.291-.692.82-1.266 1.584-1.722.766-.473 1.549-.71 2.35-.71.656 0 1.193.091 1.612.273v3.142c-.62-.31-1.311-.464-2.076-.464-.984 0-1.813.382-2.487 1.148-.655.746-.983 1.666-.983 2.759v7.104h-3.006V16.01ZM54.527 16.01h2.842v1.804h.164c.4-.655.983-1.193 1.748-1.612a5.093 5.093 0 0 1 2.487-.628c1.675 0 2.941.492 3.797 1.475.875.984 1.312 2.34 1.312 4.071v8.443h-3.005V21.53c0-2.131-.993-3.197-2.979-3.197-1.002 0-1.812.401-2.431 1.203-.62.801-.93 1.748-.93 2.841v7.186h-3.005V16.01Z" fill="#3C4043"/><path d="M0 59.31V39.958h6.784c1.189 0 2.252.253 3.189.757a5.67 5.67 0 0 1 2.216 2.108c.559.883.838 1.901.838 3.054 0 1.262-.396 2.406-1.19 3.433-.774 1.009-1.873 1.712-3.296 2.108l5.378 7.73v.162h-3.433l-5.162-7.595H2.973v7.595H0Zm6.81-16.568H2.974v6.244h3.73c.919 0 1.702-.289 2.351-.865.649-.595.973-1.352.973-2.27a3.09 3.09 0 0 0-.378-1.487 2.863 2.863 0 0 0-1.108-1.162c-.469-.307-1.046-.46-1.73-.46Z" fill="url(#a)"/><path d="M22.043 59.742c-1.351 0-2.559-.315-3.622-.946a6.82 6.82 0 0 1-2.513-2.594c-.595-1.1-.892-2.352-.892-3.757 0-1.315.288-2.532.865-3.649a6.903 6.903 0 0 1 2.405-2.675c1.045-.685 2.243-1.027 3.595-1.027 1.423 0 2.63.306 3.621.919a5.954 5.954 0 0 1 2.298 2.513c.522 1.063.783 2.261.783 3.595 0 .198-.009.378-.027.54 0 .162-.009.288-.027.378H17.881c.144 1.37.621 2.397 1.432 3.082.829.684 1.766 1.027 2.81 1.027.938 0 1.713-.208 2.325-.622a4.927 4.927 0 0 0 1.46-1.595l2.405 1.163a7.457 7.457 0 0 1-2.432 2.648c-1.027.667-2.307 1-3.838 1Zm-.135-12.162c-.973 0-1.802.297-2.487.892-.684.595-1.144 1.387-1.378 2.378h7.649c-.037-.468-.19-.955-.46-1.46-.27-.504-.685-.927-1.243-1.27-.54-.36-1.234-.54-2.081-.54Z" fill="url(#b)"/><path d="M36.45 59.742c-1.657 0-2.982-.36-3.973-1.08-.99-.74-1.675-1.614-2.054-2.623l2.622-1.135c.324.74.793 1.307 1.405 1.703.613.379 1.307.568 2.081.568.721 0 1.343-.127 1.865-.379.523-.27.784-.702.784-1.297 0-.577-.261-1-.784-1.27-.522-.27-1.17-.505-1.946-.703l-1.648-.378a6.759 6.759 0 0 1-1.865-.757 4.304 4.304 0 0 1-1.405-1.324c-.36-.559-.541-1.208-.541-1.946 0-.811.243-1.514.73-2.108.486-.613 1.126-1.082 1.919-1.406a6.67 6.67 0 0 1 2.621-.513c1.28 0 2.397.252 3.351.756a4.483 4.483 0 0 1 2.136 2.217l-2.514 1.135c-.324-.613-.748-1.036-1.27-1.27a3.695 3.695 0 0 0-1.676-.379c-.684 0-1.261.144-1.73.433-.45.288-.675.648-.675 1.08 0 .469.198.838.594 1.109.415.27.92.486 1.514.648l2 .487c1.37.342 2.396.865 3.081 1.567.685.685 1.027 1.523 1.027 2.514 0 .883-.252 1.657-.757 2.324-.504.649-1.189 1.153-2.054 1.514-.847.342-1.793.513-2.838.513Z" fill="url(#c)"/><path d="M44.487 65.148V45.526h2.73v1.865h.162c.36-.595.92-1.126 1.676-1.595.775-.468 1.694-.702 2.757-.702 1.261 0 2.387.315 3.378.945.991.631 1.775 1.496 2.352 2.595.594 1.1.892 2.36.892 3.784 0 1.423-.298 2.694-.892 3.81-.577 1.1-1.36 1.965-2.352 2.595-.99.613-2.117.92-3.378.92-1.063 0-1.982-.226-2.757-.676-.757-.469-1.315-1-1.676-1.595h-.162l.162 1.919v5.757h-2.892Zm6.892-8.081c.721 0 1.397-.19 2.028-.568.63-.378 1.144-.91 1.54-1.595.396-.702.595-1.531.595-2.486 0-.955-.199-1.775-.595-2.46-.396-.702-.91-1.243-1.54-1.621a3.874 3.874 0 0 0-2.028-.568c-.72 0-1.396.19-2.027.568-.63.378-1.144.919-1.54 1.621-.396.685-.595 1.505-.595 2.46 0 .955.199 1.784.595 2.486.396.685.91 1.217 1.54 1.595.631.378 1.307.568 2.027.568Z" fill="url(#d)"/><path d="M67.603 59.742c-1.424 0-2.676-.324-3.757-.973a6.958 6.958 0 0 1-2.54-2.621c-.613-1.1-.92-2.343-.92-3.73 0-1.37.307-2.604.92-3.703.612-1.117 1.459-2 2.54-2.648 1.08-.65 2.333-.973 3.757-.973 1.405 0 2.648.324 3.73.973a6.903 6.903 0 0 1 2.54 2.648c.612 1.1.919 2.333.919 3.703 0 1.387-.306 2.63-.92 3.73a6.958 6.958 0 0 1-2.54 2.621c-1.08.649-2.324.973-3.73.973Zm0-2.675c.756 0 1.46-.18 2.108-.541a4.296 4.296 0 0 0 1.567-1.595c.415-.702.622-1.54.622-2.513 0-.973-.207-1.802-.622-2.487-.396-.702-.919-1.234-1.567-1.594a4.112 4.112 0 0 0-2.108-.568c-.757 0-1.469.19-2.135.568-.65.36-1.18.892-1.595 1.594-.396.685-.595 1.514-.595 2.487 0 .973.199 1.81.595 2.513a4.505 4.505 0 0 0 1.595 1.595c.666.36 1.378.54 2.135.54Z" fill="url(#e)"/><path d="M77.216 59.31V45.526h2.757v1.892h.162c.396-.667.982-1.216 1.757-1.649a5.162 5.162 0 0 1 2.595-.675c1.693 0 2.964.504 3.81 1.513.847 1.01 1.27 2.342 1.27 4v8.703h-2.891v-8.325c0-1.117-.28-1.927-.838-2.432-.559-.522-1.288-.784-2.19-.784-.702 0-1.315.199-1.837.595a3.967 3.967 0 0 0-1.243 1.513 4.817 4.817 0 0 0-.433 2.027v7.406h-2.919Z" fill="url(#f)"/><path d="M97.79 59.742c-1.659 0-2.983-.36-3.974-1.08-.99-.74-1.676-1.614-2.054-2.623l2.622-1.135c.324.74.793 1.307 1.405 1.703.613.379 1.306.568 2.081.568.72 0 1.343-.127 1.865-.379.523-.27.784-.702.784-1.297 0-.577-.261-1-.784-1.27-.522-.27-1.171-.505-1.946-.703l-1.649-.378a6.759 6.759 0 0 1-1.864-.757 4.305 4.305 0 0 1-1.406-1.324c-.36-.559-.54-1.208-.54-1.946 0-.811.243-1.514.73-2.108.486-.613 1.126-1.082 1.918-1.406a6.67 6.67 0 0 1 2.622-.513c1.28 0 2.396.252 3.351.756a4.48 4.48 0 0 1 2.135 2.217l-2.513 1.135c-.324-.613-.748-1.036-1.27-1.27a3.695 3.695 0 0 0-1.676-.379c-.685 0-1.261.144-1.73.433-.45.288-.675.648-.675 1.08 0 .469.198.838.594 1.109.415.27.919.486 1.514.648l2 .487c1.369.342 2.396.865 3.081 1.567.684.685 1.027 1.523 1.027 2.514 0 .883-.253 1.657-.757 2.324-.505.649-1.189 1.153-2.054 1.514-.847.342-1.793.513-2.838.513Z" fill="url(#g)"/><path d="M107.529 43.499c-.541 0-1.009-.19-1.405-.568a1.965 1.965 0 0 1-.568-1.405c0-.54.189-1 .568-1.378a1.965 1.965 0 0 1 1.405-.568c.54 0 1 .19 1.378.568.397.378.595.837.595 1.378a1.92 1.92 0 0 1-.595 1.405 1.876 1.876 0 0 1-1.378.568Zm-1.46 15.81V45.527h2.919V59.31h-2.919Z" fill="url(#h)"/><path d="m116.799 59.31-5.702-13.784h3.243l3.865 10.027h.135l3.946-10.027h3.189l-5.757 13.784h-2.919Z" fill="url(#i)"/><path d="M133.265 59.742c-1.351 0-2.558-.315-3.621-.946a6.823 6.823 0 0 1-2.514-2.594c-.594-1.1-.892-2.352-.892-3.757 0-1.315.289-2.532.865-3.649a6.908 6.908 0 0 1 2.406-2.675c1.045-.685 2.243-1.027 3.594-1.027 1.424 0 2.631.306 3.622.919a5.95 5.95 0 0 1 2.297 2.513c.523 1.063.784 2.261.784 3.595 0 .198-.009.378-.027.54 0 .162-.009.288-.027.378h-10.649c.144 1.37.622 2.397 1.433 3.082.829.684 1.765 1.027 2.81 1.027.937 0 1.712-.208 2.325-.622a4.929 4.929 0 0 0 1.459-1.595l2.406 1.163a7.463 7.463 0 0 1-2.433 2.648c-1.027.667-2.306 1-3.838 1Zm-.135-12.162c-.973 0-1.802.297-2.486.892-.685.595-1.144 1.387-1.379 2.378h7.649c-.036-.468-.189-.955-.459-1.46-.271-.504-.685-.927-1.244-1.27-.54-.36-1.234-.54-2.081-.54Z" fill="url(#j)"/><path d="M149.308 59.31V39.958h6.19c2.036 0 3.783.415 5.243 1.244 1.477.81 2.613 1.946 3.405 3.405.811 1.46 1.217 3.135 1.217 5.027 0 1.91-.406 3.595-1.217 5.054-.792 1.442-1.928 2.577-3.405 3.406-1.46.81-3.207 1.216-5.243 1.216h-6.19Zm2.973-2.811h3.136c2.198 0 3.901-.613 5.108-1.838 1.225-1.225 1.838-2.9 1.838-5.027 0-2.126-.613-3.802-1.838-5.027-1.207-1.225-2.91-1.838-5.108-1.838h-3.136V56.5Z" fill="url(#k)"/><path d="M174.175 59.742c-1.351 0-2.558-.315-3.621-.946a6.823 6.823 0 0 1-2.514-2.594c-.594-1.1-.892-2.352-.892-3.757 0-1.315.289-2.532.865-3.649a6.908 6.908 0 0 1 2.406-2.675c1.045-.685 2.243-1.027 3.594-1.027 1.424 0 2.631.306 3.622.919a5.95 5.95 0 0 1 2.297 2.513c.523 1.063.784 2.261.784 3.595 0 .198-.009.378-.027.54 0 .162-.009.288-.027.378h-10.649c.144 1.37.622 2.397 1.433 3.082.829.684 1.766 1.027 2.811 1.027.936 0 1.711-.208 2.324-.622a4.929 4.929 0 0 0 1.459-1.595l2.406 1.163a7.463 7.463 0 0 1-2.433 2.648c-1.027.667-2.306 1-3.838 1Zm-.135-12.162c-.973 0-1.801.297-2.486.892-.685.595-1.144 1.387-1.379 2.378h7.649c-.036-.468-.189-.955-.459-1.46-.271-.504-.685-.927-1.244-1.27-.54-.36-1.234-.54-2.081-.54Z" fill="url(#l)"/><path d="M188.583 59.742c-1.658 0-2.982-.36-3.973-1.08-.991-.74-1.676-1.614-2.054-2.623l2.622-1.135c.324.74.792 1.307 1.405 1.703.613.379 1.306.568 2.081.568.721 0 1.342-.127 1.865-.379.522-.27.784-.702.784-1.297 0-.577-.262-1-.784-1.27-.523-.27-1.171-.505-1.946-.703l-1.649-.378a6.774 6.774 0 0 1-1.865-.757 4.305 4.305 0 0 1-1.405-1.324c-.36-.559-.54-1.208-.54-1.946 0-.811.243-1.514.729-2.108.487-.613 1.126-1.082 1.919-1.406a6.673 6.673 0 0 1 2.622-.513c1.279 0 2.396.252 3.351.756a4.48 4.48 0 0 1 2.135 2.217l-2.513 1.135c-.325-.613-.748-1.036-1.271-1.27a3.692 3.692 0 0 0-1.675-.379c-.685 0-1.261.144-1.73.433-.45.288-.676.648-.676 1.08 0 .469.199.838.595 1.109.414.27.919.486 1.514.648l2 .487c1.369.342 2.396.865 3.081 1.567.684.685 1.027 1.523 1.027 2.514 0 .883-.253 1.657-.757 2.324-.505.649-1.189 1.153-2.054 1.514-.847.342-1.793.513-2.838.513Z" fill="url(#m)"/><path d="M198.323 43.499c-.541 0-1.009-.19-1.406-.568a1.968 1.968 0 0 1-.567-1.405c0-.54.189-1 .567-1.378a1.97 1.97 0 0 1 1.406-.568c.54 0 1 .19 1.378.568.397.378.595.837.595 1.378a1.92 1.92 0 0 1-.595 1.405 1.876 1.876 0 0 1-1.378.568Zm-1.46 15.81V45.527h2.919V59.31h-2.919Z" fill="url(#n)"/><path d="M209.488 65.58c-1.207 0-2.252-.198-3.135-.594-.865-.379-1.568-.874-2.108-1.487-.541-.595-.928-1.207-1.162-1.838l2.702-1.135c.289.72.748 1.306 1.379 1.757.649.468 1.423.703 2.324.703 1.261 0 2.252-.379 2.973-1.136.739-.756 1.108-1.828 1.108-3.216V57.31h-.162c-.432.648-1.036 1.171-1.811 1.567-.756.379-1.621.568-2.594.568a6.053 6.053 0 0 1-3.217-.892c-.972-.594-1.756-1.423-2.351-2.486-.594-1.081-.892-2.343-.892-3.784 0-1.46.298-2.72.892-3.784.595-1.081 1.379-1.919 2.351-2.514a6.052 6.052 0 0 1 3.217-.891c.973 0 1.838.198 2.594.594.775.397 1.379.92 1.811 1.568h.162v-1.73h2.784V58.58c0 1.496-.297 2.766-.892 3.81a5.77 5.77 0 0 1-2.405 2.38c-1.027.54-2.216.81-3.568.81Zm.027-8.784a4.03 4.03 0 0 0 2-.513c.613-.36 1.108-.874 1.487-1.54.378-.685.567-1.505.567-2.46 0-.991-.189-1.82-.567-2.487-.379-.684-.874-1.198-1.487-1.54a4.029 4.029 0 0 0-2-.514 4.02 4.02 0 0 0-2.027.54c-.612.343-1.108.848-1.486 1.514-.379.667-.568 1.496-.568 2.487 0 .973.189 1.802.568 2.486.378.667.874 1.171 1.486 1.514a4.184 4.184 0 0 0 2.027.513Z" fill="url(#o)"/><path d="M219.768 59.31V45.526h2.757v1.892h.162c.396-.667.982-1.216 1.757-1.649a5.157 5.157 0 0 1 2.594-.675c1.694 0 2.964.504 3.811 1.513.847 1.01 1.27 2.342 1.27 4v8.703h-2.892v-8.325c0-1.117-.279-1.927-.837-2.432-.559-.522-1.289-.784-2.19-.784-.702 0-1.315.199-1.837.595a3.97 3.97 0 0 0-1.244 1.513 4.821 4.821 0 0 0-.432 2.027v7.406h-2.919Z" fill="url(#p)"/><path d="m236.094 53.148-.27-7.109v-6.08h2.919v6.08l-.297 7.109h-2.352Zm1.19 6.324a1.986 1.986 0 0 1-1.46-.595 1.954 1.954 0 0 1-.594-1.432c0-.559.198-1.036.594-1.432a1.986 1.986 0 0 1 1.46-.595c.558 0 1.036.198 1.432.595.396.396.595.873.595 1.432 0 .559-.199 1.036-.595 1.432a1.952 1.952 0 0 1-1.432.595Z" fill="url(#q)"/><defs><linearGradient id="a" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="b" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="c" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="d" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="e" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="f" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="g" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="h" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="i" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="j" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="k" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="l" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="m" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="n" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="o" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="p" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient><linearGradient id="q" x1="0" y1="65.58" x2="171.249" y2="-56.16" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#F39"/><stop offset=".38" stop-color="#93F"/><stop offset=".948" stop-color="#06F"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/images/courses/example/background.svg b/src/images/courses/example/background.svg
new file mode 100644
index 00000000000..a3597190ee4
--- /dev/null
+++ b/src/images/courses/example/background.svg
@@ -0,0 +1,20 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1864_2099)">
+<path d="M164.934 217.984C184.749 218.628 206.128 217.145 228.152 213.262C281.489 203.857 326.457 182.517 352.119 157.354M164.934 217.984C104.986 216.036 59.3507 194.62 53.4763 161.305C45.6602 116.977 111.193 68.3704 199.848 52.7381C288.502 37.1059 366.708 60.3679 374.524 104.695C377.637 122.354 369.111 140.692 352.119 157.354M164.934 217.984C196.595 268.927 237.96 297.74 269.749 286.17C312.046 270.775 321.374 189.719 290.585 105.125C287.177 95.7624 283.421 86.7486 279.377 78.1421M164.934 217.984C159.132 208.648 153.655 198.568 148.623 187.858M148.623 187.858C144.579 179.251 140.823 170.238 137.415 160.875C106.625 76.2812 115.954 -4.77516 158.251 -20.1699C195.866 -33.8607 246.888 8.99003 279.377 78.1421M148.623 187.858C156.396 193.334 164.621 198.599 173.25 203.581C251.212 248.592 332.656 253.481 355.162 214.5C364.128 198.971 362.387 178.823 352.119 157.354M148.623 187.858C86.163 143.854 52.8231 86.1664 72.8377 51.5C95.3433 12.5191 176.788 17.4077 254.75 62.4189C263.379 67.4009 271.603 72.6655 279.377 78.1421M279.377 78.1421C313.858 102.434 339.464 130.897 352.119 157.354M377 133C377 223.022 304.022 296 214 296C123.978 296 51 223.022 51 133C51 42.9776 123.978 -30 214 -30C304.022 -30 377 42.9776 377 133ZM296.327 215.327C232.672 278.983 144.21 293.727 98.7417 248.258C53.2735 202.79 68.0172 114.328 131.673 50.6726C195.328 -12.9829 283.79 -27.7266 329.258 17.7416C374.727 63.2098 359.983 151.672 296.327 215.327Z" stroke="#AAEEFF" stroke-width="0.582143"/>
+<g clip-path="url(#clip1_1864_2099)">
+<path d="M258.161 116.664H259.265L264.467 128.883H263.206L261.945 125.966H255.481L254.219 128.883H252.958L258.161 116.664ZM257.373 132.312C258.266 132.312 259.015 132.614 259.619 133.219C260.224 133.823 260.526 134.572 260.526 135.465C260.526 135.938 260.427 136.392 260.23 136.825C260.033 137.259 259.751 137.633 259.383 137.949L258.2 139.052L260.684 141.535L263.167 139.092L264.073 139.959L261.59 142.442L263.797 144.649L262.93 145.516L260.723 143.309L258.634 145.398C258.292 145.74 257.918 146.003 257.511 146.187C257.103 146.37 256.65 146.462 256.151 146.462C255.31 146.462 254.587 146.16 253.983 145.556C253.378 144.951 253.076 144.216 253.076 143.349C253.076 142.902 253.162 142.468 253.332 142.048C253.503 141.627 253.773 141.273 254.14 140.984L256.387 138.895L255.126 137.673C254.811 137.384 254.574 137.049 254.416 136.668C254.259 136.287 254.18 135.899 254.18 135.505C254.18 134.611 254.489 133.856 255.106 133.238C255.724 132.621 256.479 132.312 257.373 132.312ZM257.254 139.801L255.008 141.851C254.797 142.035 254.633 142.258 254.515 142.521C254.397 142.784 254.338 143.06 254.338 143.349C254.338 143.874 254.522 144.314 254.889 144.669C255.257 145.024 255.704 145.201 256.23 145.201C256.519 145.201 256.781 145.135 257.018 145.004C257.254 144.873 257.478 144.702 257.688 144.492L259.816 142.403L257.254 139.801ZM257.333 133.534C256.808 133.534 256.361 133.725 255.993 134.106C255.625 134.487 255.441 134.94 255.441 135.465C255.441 135.728 255.487 135.978 255.579 136.214C255.671 136.451 255.809 136.648 255.993 136.806L257.294 138.185L258.437 137.081C258.7 136.871 258.903 136.628 259.048 136.352C259.192 136.076 259.265 135.794 259.265 135.505C259.265 134.953 259.081 134.487 258.713 134.106C258.345 133.725 257.885 133.534 257.333 133.534ZM258.634 118.556L256.032 124.744H261.393L258.792 118.556H258.634ZM275.74 116.27C275.846 116.506 275.944 116.736 276.036 116.96C276.128 117.183 276.2 117.426 276.253 117.689L274.873 118.083L281.653 118.044V119.305H279.603C279.314 120.382 278.861 121.381 278.243 122.3C277.626 123.22 276.923 124.048 276.135 124.784C276.897 125.388 277.711 125.881 278.578 126.262C279.446 126.643 280.339 126.952 281.259 127.188L280.983 128.371C279.932 128.134 278.927 127.773 277.967 127.287C277.008 126.8 276.108 126.216 275.267 125.533C274.427 126.242 273.5 126.82 272.489 127.267C271.477 127.714 270.432 128.081 269.355 128.371L269.079 127.227C270.051 126.991 270.991 126.676 271.897 126.281C272.804 125.887 273.665 125.388 274.479 124.784C273.691 124.022 273.001 123.181 272.41 122.261C271.819 121.341 271.405 120.356 271.168 119.305H268.646V118.044L274.558 118.083C274.505 117.873 274.446 117.656 274.381 117.433C274.315 117.209 274.229 116.992 274.124 116.782L275.74 116.27ZM280.116 133.337L281.022 134.204L269.867 145.319L269 144.492L280.116 133.337ZM271.208 134.007C271.602 134.007 271.93 134.138 272.193 134.401C272.456 134.664 272.587 134.992 272.587 135.387C272.587 135.781 272.456 136.109 272.193 136.372C271.93 136.635 271.602 136.766 271.208 136.766C270.813 136.766 270.485 136.635 270.222 136.372C269.959 136.109 269.828 135.781 269.828 135.387C269.828 134.992 269.959 134.664 270.222 134.401C270.485 134.138 270.813 134.007 271.208 134.007ZM272.39 119.305C272.6 120.251 272.955 121.125 273.454 121.926C273.954 122.727 274.571 123.43 275.307 124.035C276.043 123.43 276.673 122.721 277.199 121.906C277.724 121.092 278.105 120.225 278.342 119.305H272.39ZM279.091 141.89C279.485 141.89 279.813 142.022 280.076 142.284C280.339 142.547 280.47 142.876 280.47 143.27C280.47 143.664 280.339 143.992 280.076 144.255C279.813 144.518 279.485 144.649 279.091 144.649C278.697 144.649 278.368 144.518 278.105 144.255C277.843 143.992 277.711 143.664 277.711 143.27C277.711 142.876 277.843 142.547 278.105 142.284C278.368 142.022 278.697 141.89 279.091 141.89Z" fill="#99DD33"/>
+</g>
+<path d="M297.231 13.2157C293.116 14.3017 288.315 14.7875 283.857 14.7875C279.399 14.7875 274.598 14.3017 270.482 13.2157L269.682 16.3593C272.597 17.1595 275.969 17.6739 279.113 17.9311V38.3643H282.256V28.9336H285.4V38.3643H288.544V17.9311C291.687 17.6739 295.059 17.1309 297.974 16.3593L297.231 13.2157ZM283.857 13.2157C285.6 13.2157 287 11.8154 287 10.0722C287 8.32891 285.6 6.92859 283.857 6.92859C282.114 6.92859 280.713 8.35749 280.713 10.0722C280.713 11.7868 282.142 13.2157 283.857 13.2157Z" stroke="#3399FF" stroke-width="0.756786"/>
+<path d="M113.377 134.393C112.407 134.393 111.582 134.102 110.903 133.52C110.224 132.938 109.7 132.142 109.331 131.133C109.02 130.318 108.652 129.639 108.225 129.096C107.798 128.552 107.07 127.864 106.042 127.029C104.839 126.078 103.951 125.035 103.379 123.9C102.806 122.765 102.52 121.46 102.52 119.985C102.52 117.87 103.214 116.119 104.601 114.731C105.988 113.344 107.74 112.65 109.855 112.65C111.834 112.65 113.503 113.252 114.861 114.455C116.22 115.658 116.986 117.21 117.161 119.112H116.52C116.346 117.404 115.633 116.007 114.381 114.921C113.129 113.834 111.621 113.291 109.855 113.291C107.973 113.291 106.386 113.936 105.096 115.226C103.805 116.517 103.16 118.103 103.16 119.985C103.16 121.402 103.485 122.678 104.135 123.813C104.785 124.948 105.654 125.933 106.74 126.767C107.555 127.388 108.186 127.995 108.632 128.586C109.079 129.178 109.506 129.95 109.913 130.9C110.282 131.774 110.743 132.467 111.296 132.982C111.849 133.496 112.542 133.753 113.377 133.753C114.095 133.753 114.735 133.53 115.298 133.083C115.861 132.637 116.249 132.074 116.462 131.395H117.161C116.947 132.268 116.496 132.986 115.807 133.549C115.118 134.112 114.308 134.393 113.377 134.393ZM100.715 127.815C99.7838 126.748 99.061 125.545 98.5467 124.206C98.0325 122.867 97.7754 121.45 97.7754 119.956C97.7754 118.462 98.0325 117.031 98.5467 115.663C99.061 114.295 99.7838 113.087 100.715 112.039L101.181 112.417C100.288 113.465 99.6043 114.625 99.1289 115.896C98.6535 117.167 98.4157 118.52 98.4157 119.956C98.4157 121.353 98.6583 122.687 99.1434 123.958C99.6285 125.229 100.308 126.389 101.181 127.437L100.715 127.815ZM109.855 122.256C109.214 122.256 108.676 122.037 108.239 121.601C107.803 121.164 107.584 120.626 107.584 119.985C107.584 119.345 107.803 118.801 108.239 118.355C108.676 117.909 109.214 117.686 109.855 117.686C110.495 117.686 111.034 117.909 111.47 118.355C111.907 118.801 112.125 119.345 112.125 119.985C112.125 120.626 111.907 121.164 111.47 121.601C111.034 122.037 110.495 122.256 109.855 122.256Z" fill="#3399FF"/>
+<path d="M331.593 100.691L331.098 100.225C329.177 98.4789 327.595 96.9799 326.353 95.7283C325.111 94.4767 324.127 93.3803 323.399 92.4392C322.671 91.4981 322.167 90.654 321.885 89.9069C321.604 89.1598 321.463 88.4176 321.463 87.6802C321.463 86.3218 321.924 85.1818 322.846 84.2601C323.768 83.3384 324.908 82.8775 326.266 82.8775C327.314 82.8775 328.289 83.1686 329.191 83.7507C330.094 84.3329 330.894 85.1867 331.593 86.3121C332.33 85.1673 333.14 84.3086 334.023 83.7362C334.906 83.1637 335.871 82.8775 336.919 82.8775C338.278 82.8775 339.418 83.3384 340.339 84.2601C341.261 85.1818 341.722 86.3218 341.722 87.6802C341.722 88.4176 341.581 89.1598 341.3 89.9069C341.019 90.654 340.514 91.4981 339.786 92.4392C339.059 93.3803 338.074 94.4767 336.832 95.7283C335.59 96.9799 334.009 98.4789 332.087 100.225L331.593 100.691ZM331.593 99.8179C333.475 98.0908 335.027 96.6161 336.25 95.3936C337.472 94.1711 338.443 93.1038 339.161 92.1918C339.878 91.2798 340.378 90.4696 340.66 89.7613C340.941 89.0531 341.082 88.3593 341.082 87.6802C341.082 86.4965 340.684 85.5068 339.888 84.7113C339.093 83.9157 338.103 83.5179 336.919 83.5179C335.949 83.5179 335.061 83.7992 334.256 84.362C333.451 84.9247 332.66 85.827 331.884 87.0689H331.302C330.506 85.827 329.706 84.9247 328.9 84.362C328.095 83.7992 327.217 83.5179 326.266 83.5179C325.102 83.5179 324.117 83.9157 323.312 84.7113C322.506 85.5068 322.104 86.5062 322.104 87.7093C322.104 88.3885 322.244 89.0773 322.526 89.7759C322.807 90.4745 323.302 91.2798 324.01 92.1918C324.719 93.1038 325.689 94.1711 326.921 95.3936C328.153 96.6161 329.71 98.0908 331.593 99.8179Z" fill="#FF66CC"/>
+<path d="M171.503 126.796C172.571 126.796 173.483 126.413 174.239 125.647C174.996 124.88 175.375 123.973 175.375 122.925C175.375 121.858 174.991 120.946 174.225 120.189C173.458 119.432 172.551 119.054 171.503 119.054C170.436 119.054 169.524 119.437 168.767 120.203C168.01 120.97 167.632 121.877 167.632 122.925C167.632 123.992 168.015 124.904 168.782 125.661C169.548 126.418 170.455 126.796 171.503 126.796ZM171.503 126.098C170.611 126.098 169.859 125.787 169.248 125.166C168.636 124.545 168.331 123.798 168.331 122.925C168.331 122.032 168.641 121.28 169.262 120.669C169.883 120.058 170.63 119.752 171.503 119.752C172.396 119.752 173.148 120.063 173.759 120.684C174.37 121.305 174.676 122.052 174.676 122.925C174.676 123.818 174.366 124.57 173.745 125.181C173.124 125.792 172.377 126.098 171.503 126.098ZM171.503 130.144C169.097 130.144 166.895 129.489 164.896 128.179C162.897 126.869 161.374 125.118 160.326 122.925C161.374 120.732 162.897 118.981 164.896 117.671C166.895 116.361 169.097 115.706 171.503 115.706C173.91 115.706 176.112 116.361 178.111 117.671C180.109 118.981 181.633 120.732 182.68 122.925C181.633 125.118 180.109 126.869 178.111 128.179C176.112 129.489 173.91 130.144 171.503 130.144ZM171.503 129.503C173.754 129.503 175.816 128.911 177.689 127.728C179.561 126.544 180.992 124.943 181.982 122.925C180.992 120.907 179.561 119.306 177.689 118.122C175.816 116.939 173.754 116.347 171.503 116.347C169.252 116.347 167.191 116.939 165.318 118.122C163.445 119.306 162.014 120.907 161.025 122.925C162.014 124.943 163.445 126.544 165.318 127.728C167.191 128.911 169.252 129.503 171.503 129.503Z" fill="#FF66CC"/>
+</g>
+<defs>
+<clipPath id="clip0_1864_2099">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1864_2099">
+<rect width="37.8393" height="19.7929" fill="white" transform="translate(248.347 112.446)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/example/card.svg b/src/images/courses/example/card.svg
new file mode 100644
index 00000000000..2131ffc0d59
--- /dev/null
+++ b/src/images/courses/example/card.svg
@@ -0,0 +1,36 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1847_1944)">
+<rect width="640" height="320" fill="white"/>
+<path d="M281.715 391.985C315.753 393.092 352.478 390.544 390.311 383.873C481.933 367.718 559.178 331.06 603.259 287.835M281.715 391.985C178.736 388.639 100.345 351.85 90.2538 294.621C76.8274 218.476 189.399 134.98 341.689 108.127C493.98 81.274 628.32 121.233 641.746 197.378C647.095 227.713 632.448 259.214 603.259 287.835M281.715 391.985C336.103 479.495 407.158 528.989 461.765 509.114C534.422 482.669 550.447 343.431 497.557 198.117C491.703 182.034 485.25 166.55 478.304 151.766M281.715 391.985C271.747 375.948 262.34 358.633 253.696 340.234M253.696 340.234C246.75 325.45 240.297 309.966 234.443 293.883C181.553 148.569 197.577 9.33102 270.234 -17.1139C334.849 -40.6319 422.494 32.9767 478.304 151.766M253.696 340.234C267.049 349.642 281.177 358.686 296 367.244C429.922 444.563 569.827 452.961 608.487 386C623.888 359.325 620.898 324.714 603.259 287.835M253.696 340.234C146.403 264.645 89.1317 165.55 123.513 106C162.173 39.039 302.078 47.4366 436 124.756C450.823 133.314 464.951 142.358 478.304 151.766M478.304 151.766C537.535 193.495 581.521 242.387 603.259 287.835M646 246C646 400.64 520.64 526 366 526C211.36 526 86 400.64 86 246C86 91.3603 211.36 -34 366 -34C520.64 -34 646 91.3603 646 246ZM507.421 387.421C398.075 496.768 246.115 522.095 168.01 443.99C89.9054 365.885 115.232 213.925 224.579 104.579C333.926 -4.76816 485.885 -30.0948 563.99 48.0101C642.095 126.115 616.768 278.075 507.421 387.421Z" stroke="#AAEEFF"/>
+<g clip-path="url(#clip1_1847_1944)">
+<path d="M441.859 228.245H443.755L452.693 249.234H450.526L448.359 244.224H437.255L435.089 249.234H432.922L441.859 228.245ZM440.505 255.125C442.04 255.125 443.326 255.644 444.365 256.682C445.403 257.72 445.922 259.007 445.922 260.542C445.922 261.354 445.753 262.133 445.414 262.878C445.076 263.622 444.59 264.266 443.958 264.807L441.927 266.703L446.193 270.969L450.458 266.771L452.016 268.26L447.75 272.526L451.542 276.318L450.052 277.807L446.26 274.016L442.672 277.604C442.085 278.191 441.442 278.642 440.742 278.958C440.043 279.274 439.264 279.432 438.406 279.432C436.962 279.432 435.72 278.913 434.682 277.875C433.644 276.837 433.125 275.573 433.125 274.083C433.125 273.316 433.272 272.571 433.565 271.849C433.859 271.127 434.321 270.517 434.953 270.021L438.813 266.432L436.646 264.333C436.104 263.837 435.698 263.261 435.427 262.607C435.156 261.952 435.021 261.286 435.021 260.609C435.021 259.075 435.551 257.777 436.612 256.716C437.673 255.655 438.97 255.125 440.505 255.125ZM440.302 267.99L436.443 271.51C436.082 271.826 435.799 272.21 435.596 272.661C435.393 273.113 435.292 273.587 435.292 274.083C435.292 274.986 435.608 275.742 436.24 276.352C436.872 276.961 437.639 277.266 438.542 277.266C439.038 277.266 439.49 277.153 439.896 276.927C440.302 276.701 440.686 276.408 441.047 276.047L444.703 272.458L440.302 267.99ZM440.438 257.224C439.535 257.224 438.767 257.551 438.135 258.206C437.503 258.86 437.188 259.639 437.188 260.542C437.188 260.993 437.266 261.422 437.424 261.828C437.582 262.234 437.819 262.573 438.135 262.844L440.37 265.214L442.333 263.318C442.785 262.957 443.135 262.539 443.383 262.065C443.631 261.591 443.755 261.106 443.755 260.609C443.755 259.661 443.439 258.86 442.807 258.206C442.175 257.551 441.385 257.224 440.438 257.224ZM442.672 231.495L438.203 242.125H447.411L442.943 231.495H442.672ZM472.057 227.568C472.238 227.974 472.407 228.369 472.565 228.753C472.723 229.136 472.847 229.554 472.938 230.005L470.568 230.682L482.214 230.615V232.781H478.693C478.196 234.632 477.418 236.347 476.357 237.927C475.296 239.507 474.089 240.929 472.734 242.193C474.043 243.231 475.443 244.077 476.932 244.732C478.422 245.386 479.957 245.917 481.536 246.323L481.063 248.354C479.257 247.948 477.53 247.327 475.883 246.492C474.235 245.657 472.689 244.653 471.245 243.479C469.8 244.698 468.209 245.691 466.471 246.458C464.734 247.226 462.939 247.858 461.089 248.354L460.615 246.391C462.285 245.984 463.898 245.443 465.456 244.766C467.013 244.089 468.491 243.231 469.891 242.193C468.536 240.884 467.352 239.439 466.336 237.859C465.32 236.28 464.609 234.587 464.203 232.781H459.87V230.615L470.026 230.682C469.936 230.321 469.834 229.949 469.721 229.565C469.609 229.181 469.462 228.809 469.281 228.448L472.057 227.568ZM479.573 256.885L481.13 258.375L461.969 277.469L460.479 276.047L479.573 256.885ZM464.271 258.036C464.948 258.036 465.512 258.262 465.964 258.714C466.415 259.165 466.641 259.729 466.641 260.406C466.641 261.083 466.415 261.648 465.964 262.099C465.512 262.55 464.948 262.776 464.271 262.776C463.594 262.776 463.03 262.55 462.578 262.099C462.127 261.648 461.901 261.083 461.901 260.406C461.901 259.729 462.127 259.165 462.578 258.714C463.03 258.262 463.594 258.036 464.271 258.036ZM466.302 232.781C466.663 234.406 467.273 235.907 468.13 237.284C468.988 238.661 470.049 239.868 471.313 240.906C472.576 239.868 473.66 238.649 474.563 237.25C475.465 235.851 476.12 234.361 476.526 232.781H466.302ZM477.813 271.578C478.49 271.578 479.054 271.804 479.505 272.255C479.957 272.707 480.182 273.271 480.182 273.948C480.182 274.625 479.957 275.189 479.505 275.641C479.054 276.092 478.49 276.318 477.813 276.318C477.135 276.318 476.571 276.092 476.12 275.641C475.668 275.189 475.443 274.625 475.443 273.948C475.443 273.271 475.668 272.707 476.12 272.255C476.571 271.804 477.135 271.578 477.813 271.578Z" fill="#99DD33"/>
+</g>
+<path d="M261 39.45L251.15 29.6L252.25 28.55L261 37.3L279.7 18.55L280.85 19.65L261 39.45Z" fill="#FF66CC"/>
+<path d="M508.975 36.8C501.905 38.6655 493.658 39.5 486 39.5C478.342 39.5 470.095 38.6655 463.025 36.8L461.651 42.2C466.658 43.5745 472.451 44.4582 477.851 44.9V80H483.251V63.8H488.651V80H494.051V44.9C499.451 44.4582 505.244 43.5255 510.251 42.2L508.975 36.8ZM486 36.8C488.995 36.8 491.4 34.3945 491.4 31.4C491.4 28.4055 488.995 26 486 26C483.005 26 480.6 28.4545 480.6 31.4C480.6 34.3455 483.055 36.8 486 36.8Z" stroke="#3399FF" stroke-width="1.3"/>
+<path d="M193.15 258.7C191.483 258.7 190.067 258.2 188.9 257.2C187.733 256.2 186.833 254.833 186.2 253.1C185.667 251.7 185.033 250.533 184.3 249.6C183.567 248.667 182.317 247.483 180.55 246.05C178.483 244.417 176.958 242.625 175.975 240.675C174.992 238.725 174.5 236.483 174.5 233.95C174.5 230.317 175.692 227.308 178.075 224.925C180.458 222.542 183.467 221.35 187.1 221.35C190.5 221.35 193.367 222.383 195.7 224.45C198.033 226.517 199.35 229.183 199.65 232.45H198.55C198.25 229.517 197.025 227.117 194.875 225.25C192.725 223.383 190.133 222.45 187.1 222.45C183.867 222.45 181.142 223.558 178.925 225.775C176.708 227.992 175.6 230.717 175.6 233.95C175.6 236.383 176.158 238.575 177.275 240.525C178.392 242.475 179.883 244.167 181.75 245.6C183.15 246.667 184.233 247.708 185 248.725C185.767 249.742 186.5 251.067 187.2 252.7C187.833 254.2 188.625 255.392 189.575 256.275C190.525 257.158 191.717 257.6 193.15 257.6C194.383 257.6 195.483 257.217 196.45 256.45C197.417 255.683 198.083 254.717 198.45 253.55H199.65C199.283 255.05 198.508 256.283 197.325 257.25C196.142 258.217 194.75 258.7 193.15 258.7ZM171.4 247.4C169.8 245.567 168.558 243.5 167.675 241.2C166.792 238.9 166.35 236.467 166.35 233.9C166.35 231.333 166.792 228.875 167.675 226.525C168.558 224.175 169.8 222.1 171.4 220.3L172.2 220.95C170.667 222.75 169.492 224.742 168.675 226.925C167.858 229.108 167.45 231.433 167.45 233.9C167.45 236.3 167.867 238.592 168.7 240.775C169.533 242.958 170.7 244.95 172.2 246.75L171.4 247.4ZM187.1 237.85C186 237.85 185.075 237.475 184.325 236.725C183.575 235.975 183.2 235.05 183.2 233.95C183.2 232.85 183.575 231.917 184.325 231.15C185.075 230.383 186 230 187.1 230C188.2 230 189.125 230.383 189.875 231.15C190.625 231.917 191 232.85 191 233.95C191 235.05 190.625 235.975 189.875 236.725C189.125 237.475 188.2 237.85 187.1 237.85Z" fill="#3399FF"/>
+<path d="M568 190.5L567.15 189.7C563.85 186.7 561.133 184.125 559 181.975C556.867 179.825 555.175 177.942 553.925 176.325C552.675 174.708 551.808 173.258 551.325 171.975C550.842 170.692 550.6 169.417 550.6 168.15C550.6 165.817 551.392 163.858 552.975 162.275C554.558 160.692 556.517 159.9 558.85 159.9C560.65 159.9 562.325 160.4 563.875 161.4C565.425 162.4 566.8 163.867 568 165.8C569.267 163.833 570.658 162.358 572.175 161.375C573.692 160.392 575.35 159.9 577.15 159.9C579.483 159.9 581.442 160.692 583.025 162.275C584.608 163.858 585.4 165.817 585.4 168.15C585.4 169.417 585.158 170.692 584.675 171.975C584.192 173.258 583.325 174.708 582.075 176.325C580.825 177.942 579.133 179.825 577 181.975C574.867 184.125 572.15 186.7 568.85 189.7L568 190.5ZM568 189C571.233 186.033 573.9 183.5 576 181.4C578.1 179.3 579.767 177.467 581 175.9C582.233 174.333 583.092 172.942 583.575 171.725C584.058 170.508 584.3 169.317 584.3 168.15C584.3 166.117 583.617 164.417 582.25 163.05C580.883 161.683 579.183 161 577.15 161C575.483 161 573.958 161.483 572.575 162.45C571.192 163.417 569.833 164.967 568.5 167.1H567.5C566.133 164.967 564.758 163.417 563.375 162.45C561.992 161.483 560.483 161 558.85 161C556.85 161 555.158 161.683 553.775 163.05C552.392 164.417 551.7 166.133 551.7 168.2C551.7 169.367 551.942 170.55 552.425 171.75C552.908 172.95 553.758 174.333 554.975 175.9C556.192 177.467 557.858 179.3 559.975 181.4C562.092 183.5 564.767 186.033 568 189Z" fill="#FF66CC"/>
+<path d="M293 245.65C294.833 245.65 296.4 244.992 297.7 243.675C299 242.358 299.65 240.8 299.65 239C299.65 237.167 298.991 235.6 297.675 234.3C296.358 233 294.8 232.35 293 232.35C291.166 232.35 289.6 233.008 288.3 234.325C287 235.642 286.35 237.2 286.35 239C286.35 240.833 287.008 242.4 288.325 243.7C289.641 245 291.2 245.65 293 245.65ZM293 244.45C291.466 244.45 290.175 243.917 289.125 242.85C288.075 241.783 287.55 240.5 287.55 239C287.55 237.467 288.083 236.175 289.15 235.125C290.216 234.075 291.5 233.55 293 233.55C294.533 233.55 295.825 234.083 296.875 235.15C297.925 236.217 298.45 237.5 298.45 239C298.45 240.533 297.916 241.825 296.85 242.875C295.783 243.925 294.5 244.45 293 244.45ZM293 251.4C288.866 251.4 285.083 250.275 281.65 248.025C278.216 245.775 275.6 242.767 273.8 239C275.6 235.233 278.216 232.225 281.65 229.975C285.083 227.725 288.866 226.6 293 226.6C297.133 226.6 300.916 227.725 304.35 229.975C307.783 232.225 310.4 235.233 312.2 239C310.4 242.767 307.783 245.775 304.35 248.025C300.916 250.275 297.133 251.4 293 251.4ZM293 250.3C296.866 250.3 300.408 249.283 303.625 247.25C306.841 245.217 309.3 242.467 311 239C309.3 235.533 306.841 232.783 303.625 230.75C300.408 228.717 296.866 227.7 293 227.7C289.133 227.7 285.591 228.717 282.375 230.75C279.158 232.783 276.7 235.533 275 239C276.7 242.467 279.158 245.217 282.375 247.25C285.591 249.283 289.133 250.3 293 250.3Z" fill="#FF66CC"/>
+<g style="mix-blend-mode:darken">
+<path d="M180.924 139.978H187.9L202.56 179H195.857L192.314 169.026H176.564L173.021 179H166.263L180.924 139.978ZM190.243 163.358L186.101 151.75L184.575 147.226H184.248L182.722 151.75L178.58 163.358H190.243ZM218.677 179.872C215.988 179.872 213.572 179.254 211.428 178.019C209.285 176.784 207.613 175.076 206.414 172.896C205.215 170.68 204.616 168.209 204.616 165.484C204.616 162.723 205.215 160.252 206.414 158.072C207.613 155.892 209.285 154.184 211.428 152.949C213.572 151.714 215.988 151.096 218.677 151.096C221.656 151.096 224.181 151.804 226.252 153.221C228.36 154.602 229.886 156.437 230.83 158.726L225.326 161.015C224.018 158.072 221.729 156.6 218.459 156.6C217.078 156.6 215.788 156.982 214.589 157.745C213.39 158.472 212.428 159.507 211.701 160.851C210.974 162.196 210.611 163.74 210.611 165.484C210.611 167.228 210.974 168.772 211.701 170.116C212.428 171.461 213.39 172.514 214.589 173.277C215.788 174.004 217.078 174.367 218.459 174.367C220.13 174.367 221.584 173.986 222.819 173.223C224.054 172.424 224.999 171.297 225.653 169.844L231.048 172.188C229.995 174.476 228.414 176.329 226.307 177.746C224.2 179.163 221.656 179.872 218.677 179.872ZM248.436 179.872C245.747 179.872 243.331 179.254 241.187 178.019C239.043 176.784 237.372 175.076 236.173 172.896C234.974 170.68 234.375 168.209 234.375 165.484C234.375 162.723 234.974 160.252 236.173 158.072C237.372 155.892 239.043 154.184 241.187 152.949C243.331 151.714 245.747 151.096 248.436 151.096C251.415 151.096 253.94 151.804 256.011 153.221C258.118 154.602 259.644 156.437 260.589 158.726L255.085 161.015C253.777 158.072 251.488 156.6 248.218 156.6C246.837 156.6 245.547 156.982 244.348 157.745C243.149 158.472 242.186 159.507 241.46 160.851C240.733 162.196 240.37 163.74 240.37 165.484C240.37 167.228 240.733 168.772 241.46 170.116C242.186 171.461 243.149 172.514 244.348 173.277C245.547 174.004 246.837 174.367 248.218 174.367C249.889 174.367 251.342 173.986 252.578 173.223C253.813 172.424 254.758 171.297 255.412 169.844L260.807 172.188C259.753 174.476 258.173 176.329 256.066 177.746C253.958 179.163 251.415 179.872 248.436 179.872ZM278.085 179.872C275.433 179.872 273.035 179.254 270.891 178.019C268.784 176.784 267.131 175.076 265.932 172.896C264.733 170.68 264.133 168.209 264.133 165.484C264.133 162.868 264.696 160.47 265.823 158.29C266.985 156.074 268.602 154.33 270.673 153.058C272.744 151.75 275.106 151.096 277.758 151.096C280.483 151.096 282.845 151.695 284.843 152.894C286.878 154.093 288.422 155.765 289.476 157.908C290.529 160.016 291.056 162.45 291.056 165.211C291.056 165.538 291.038 165.865 291.002 166.192C290.965 166.519 290.947 166.701 290.947 166.737H270.128C270.31 169.208 271.2 171.116 272.799 172.46C274.397 173.804 276.214 174.476 278.249 174.476C281.373 174.476 283.771 173.023 285.443 170.116L290.566 172.569C289.367 174.785 287.695 176.566 285.552 177.91C283.444 179.218 280.955 179.872 278.085 179.872ZM284.952 162.159C284.879 161.287 284.589 160.397 284.08 159.489C283.571 158.581 282.772 157.818 281.682 157.2C280.628 156.546 279.302 156.219 277.704 156.219C275.923 156.219 274.379 156.764 273.071 157.854C271.799 158.944 270.927 160.379 270.455 162.159H284.952ZM306.722 179.872C303.633 179.872 301.072 179.163 299.037 177.746C297.039 176.293 295.622 174.476 294.786 172.296L300.127 170.007C300.745 171.497 301.635 172.623 302.798 173.386C303.997 174.149 305.305 174.531 306.722 174.531C308.211 174.531 309.429 174.258 310.373 173.713C311.318 173.132 311.79 172.387 311.79 171.479C311.79 170.607 311.409 169.898 310.646 169.353C309.883 168.772 308.629 168.263 306.885 167.827L303.179 166.955C301.145 166.483 299.382 165.611 297.893 164.339C296.439 163.031 295.713 161.342 295.713 159.271C295.713 156.764 296.748 154.784 298.819 153.33C300.89 151.841 303.434 151.096 306.449 151.096C308.956 151.096 311.173 151.623 313.098 152.676C315.06 153.73 316.477 155.256 317.349 157.254L312.063 159.489C311.554 158.363 310.773 157.527 309.719 156.982C308.666 156.437 307.521 156.164 306.286 156.164C305.087 156.164 304.033 156.437 303.125 156.982C302.216 157.491 301.762 158.181 301.762 159.053C301.762 159.816 302.071 160.434 302.689 160.906C303.343 161.378 304.36 161.778 305.741 162.105L309.774 163.086C312.499 163.776 314.533 164.83 315.878 166.247C317.222 167.628 317.894 169.299 317.894 171.261C317.894 172.86 317.404 174.313 316.423 175.621C315.478 176.929 314.152 177.964 312.444 178.727C310.773 179.491 308.865 179.872 306.722 179.872ZM332.968 179.872C329.879 179.872 327.318 179.163 325.283 177.746C323.285 176.293 321.868 174.476 321.032 172.296L326.373 170.007C326.991 171.497 327.881 172.623 329.044 173.386C330.243 174.149 331.551 174.531 332.968 174.531C334.457 174.531 335.674 174.258 336.619 173.713C337.564 173.132 338.036 172.387 338.036 171.479C338.036 170.607 337.655 169.898 336.892 169.353C336.129 168.772 334.875 168.263 333.131 167.827L329.425 166.955C327.39 166.483 325.628 165.611 324.139 164.339C322.685 163.031 321.959 161.342 321.959 159.271C321.959 156.764 322.994 154.784 325.065 153.33C327.136 151.841 329.679 151.096 332.695 151.096C335.202 151.096 337.418 151.623 339.344 152.676C341.306 153.73 342.723 155.256 343.595 157.254L338.309 159.489C337.8 158.363 337.019 157.527 335.965 156.982C334.911 156.437 333.767 156.164 332.532 156.164C331.333 156.164 330.279 156.437 329.371 156.982C328.462 157.491 328.008 158.181 328.008 159.053C328.008 159.816 328.317 160.434 328.935 160.906C329.589 161.378 330.606 161.778 331.987 162.105L336.02 163.086C338.745 163.776 340.779 164.83 342.124 166.247C343.468 167.628 344.14 169.299 344.14 171.261C344.14 172.86 343.65 174.313 342.669 175.621C341.724 176.929 340.398 177.964 338.69 178.727C337.019 179.491 335.111 179.872 332.968 179.872ZM352.407 147.39C351.281 147.39 350.318 147.008 349.519 146.245C348.756 145.446 348.374 144.483 348.374 143.357C348.374 142.231 348.756 141.286 349.519 140.523C350.318 139.724 351.281 139.324 352.407 139.324C353.534 139.324 354.478 139.724 355.241 140.523C356.041 141.286 356.44 142.231 356.44 143.357C356.44 144.483 356.041 145.446 355.241 146.245C354.478 147.008 353.534 147.39 352.407 147.39ZM349.41 151.968H355.405V179H349.41V151.968ZM377.534 179.872C375.572 179.872 373.81 179.454 372.247 178.618C370.721 177.783 369.577 176.729 368.814 175.457H368.487V179H362.819V139.978H368.814V151.695L368.487 155.456H368.814C369.577 154.221 370.721 153.185 372.247 152.349C373.81 151.514 375.572 151.096 377.534 151.096C379.859 151.096 382.003 151.714 383.965 152.949C385.963 154.184 387.544 155.91 388.706 158.126C389.905 160.306 390.505 162.759 390.505 165.484C390.505 168.209 389.905 170.661 388.706 172.841C387.544 175.021 385.963 176.747 383.965 178.019C382.003 179.254 379.859 179.872 377.534 179.872ZM376.498 174.367C377.915 174.367 379.223 174.004 380.422 173.277C381.658 172.551 382.639 171.515 383.365 170.171C384.128 168.79 384.51 167.228 384.51 165.484C384.51 163.74 384.128 162.196 383.365 160.851C382.639 159.471 381.658 158.417 380.422 157.69C379.223 156.964 377.915 156.6 376.498 156.6C375.081 156.6 373.755 156.964 372.52 157.69C371.321 158.417 370.34 159.453 369.577 160.797C368.85 162.141 368.487 163.704 368.487 165.484C368.487 167.264 368.85 168.827 369.577 170.171C370.34 171.515 371.321 172.551 372.52 173.277C373.755 174.004 375.081 174.367 376.498 174.367ZM399.098 147.39C397.972 147.39 397.009 147.008 396.209 146.245C395.446 145.446 395.065 144.483 395.065 143.357C395.065 142.231 395.446 141.286 396.209 140.523C397.009 139.724 397.972 139.324 399.098 139.324C400.224 139.324 401.169 139.724 401.932 140.523C402.731 141.286 403.131 142.231 403.131 143.357C403.131 144.483 402.731 145.446 401.932 146.245C401.169 147.008 400.224 147.39 399.098 147.39ZM396.1 151.968H402.095V179H396.1V151.968ZM409.509 139.978H415.504V179H409.509V139.978ZM425.936 147.39C424.81 147.39 423.847 147.008 423.048 146.245C422.285 145.446 421.903 144.483 421.903 143.357C421.903 142.231 422.285 141.286 423.048 140.523C423.847 139.724 424.81 139.324 425.936 139.324C427.063 139.324 428.007 139.724 428.77 140.523C429.57 141.286 429.969 142.231 429.969 143.357C429.969 144.483 429.57 145.446 428.77 146.245C428.007 147.008 427.063 147.39 425.936 147.39ZM422.939 151.968H428.934V179H422.939V151.968ZM447.2 179.436C446.001 179.436 444.874 179.254 443.821 178.891C442.803 178.491 441.95 177.946 441.259 177.256C439.697 175.73 438.916 173.604 438.916 170.879V157.254H434.174V151.968H438.916V143.902H444.911V151.968H451.505V157.254H444.911V169.571C444.911 171.061 445.201 172.115 445.783 172.732C446.328 173.459 447.218 173.822 448.453 173.822C449.507 173.822 450.542 173.514 451.56 172.896V178.727C450.288 179.2 448.835 179.436 447.2 179.436ZM465.768 177.474L454.487 151.968H461.19L468.711 170.116H468.984L476.232 151.968H482.881L465.986 190.772H459.664L465.768 177.474ZM487.579 151.804V139.978H493.683V151.804L493.029 166.301H488.178L487.579 151.804ZM490.631 179.327C489.468 179.327 488.469 178.927 487.633 178.128C486.834 177.292 486.434 176.293 486.434 175.13C486.434 173.968 486.834 172.987 487.633 172.188C488.469 171.388 489.468 170.989 490.631 170.989C491.793 170.989 492.774 171.388 493.574 172.188C494.373 172.987 494.773 173.968 494.773 175.13C494.773 176.293 494.373 177.292 493.574 178.128C492.774 178.927 491.793 179.327 490.631 179.327Z" fill="url(#paint0_linear_1847_1944)"/>
+</g>
+<path d="M24 140H30.1202V173.279H46.8962V179.126H24V140Z" fill="#3C4043"/>
+<path d="M63.7596 180C61.1003 180 58.6959 179.381 56.5465 178.142C54.4336 176.903 52.776 175.191 51.5739 173.005C50.3717 170.783 49.7706 168.306 49.7706 165.574C49.7706 162.951 50.3352 160.546 51.4646 158.361C52.6303 156.138 54.2514 154.39 56.328 153.115C58.4045 151.803 60.7724 151.148 63.4318 151.148C66.164 151.148 68.532 151.749 70.5356 152.951C72.5757 154.153 74.1239 155.829 75.1804 157.978C76.2369 160.091 76.7651 162.532 76.7651 165.301C76.7651 165.628 76.7469 165.956 76.7105 166.284C76.674 166.612 76.6558 166.794 76.6558 166.831H55.7815C55.9637 169.308 56.8562 171.22 58.4591 172.568C60.062 173.916 61.8835 174.59 63.9236 174.59C67.0565 174.59 69.4609 173.133 71.1367 170.219L76.2733 172.678C75.0711 174.9 73.3953 176.685 71.246 178.033C69.1331 179.344 66.6376 180 63.7596 180ZM70.6449 162.24C70.572 161.366 70.2806 160.474 69.7706 159.563C69.2606 158.652 68.4591 157.887 67.3662 157.268C66.3097 156.612 64.98 156.284 63.3771 156.284C61.5921 156.284 60.0438 156.831 58.7323 157.923C57.4573 159.016 56.583 160.455 56.1094 162.24H70.6449Z" fill="#3C4043"/>
+<path d="M90.8857 180C88.9549 180 87.2062 179.617 85.6398 178.852C84.1097 178.051 82.8893 176.958 81.9786 175.574C81.1042 174.153 80.6671 172.55 80.6671 170.765C80.6671 167.923 81.7236 165.683 83.8365 164.044C85.9859 162.404 88.6999 161.585 91.9786 161.585C94.8565 161.585 97.3155 162.077 99.3556 163.06V161.913C99.3556 160.273 98.6999 158.925 97.3884 157.869C96.1133 156.776 94.5651 156.23 92.7436 156.23C89.9749 156.23 87.7527 157.359 86.0769 159.617L81.4868 156.448C82.7618 154.736 84.3465 153.424 86.2409 152.514C88.1716 151.603 90.3392 151.148 92.7436 151.148C96.7144 151.148 99.7746 152.149 101.924 154.153C104.11 156.12 105.203 158.907 105.203 162.514V179.126H99.3556V175.792H99.0277C98.1534 177.031 97.0423 178.051 95.6944 178.852C94.3465 179.617 92.7436 180 90.8857 180ZM91.8693 175.027C93.2172 175.027 94.4558 174.699 95.5851 174.044C96.7509 173.352 97.6616 172.459 98.3174 171.366C99.0095 170.237 99.3556 169.035 99.3556 167.76C97.4248 166.703 95.3665 166.175 93.1807 166.175C91.1771 166.175 89.6106 166.612 88.4813 167.486C87.352 168.361 86.7873 169.472 86.7873 170.82C86.7873 172.058 87.2791 173.078 88.2627 173.88C89.2828 174.645 90.4849 175.027 91.8693 175.027Z" fill="#3C4043"/>
+<path d="M111.549 152.022H117.232V156.066H117.56C118.142 154.681 119.199 153.534 120.729 152.623C122.259 151.676 123.826 151.202 125.428 151.202C126.74 151.202 127.815 151.384 128.652 151.749V158.033C127.414 157.413 126.03 157.104 124.499 157.104C122.532 157.104 120.875 157.869 119.527 159.399C118.215 160.893 117.56 162.732 117.56 164.918V179.126H111.549V152.022Z" fill="#3C4043"/>
+<path d="M133.054 152.022H138.737V155.628H139.065C139.867 154.317 141.033 153.242 142.563 152.404C144.093 151.566 145.75 151.148 147.535 151.148C150.887 151.148 153.419 152.131 155.131 154.098C156.88 156.066 157.754 158.78 157.754 162.24V179.126H151.743V163.06C151.743 158.798 149.757 156.667 145.787 156.667C143.783 156.667 142.162 157.468 140.923 159.071C139.685 160.674 139.065 162.568 139.065 164.754V179.126H133.054V152.022Z" fill="#3C4043"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1847_1944" x1="166" y1="179" x2="498.307" y2="135.685" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#33CC00"/>
+<stop offset="0.385417" stop-color="#3399FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#9933FF"/>
+</linearGradient>
+<clipPath id="clip0_1847_1944">
+<rect width="640" height="320" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1847_1944">
+<rect width="65" height="34" fill="white" transform="translate(425 221)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/example/logo.svg b/src/images/courses/example/logo.svg
new file mode 100644
index 00000000000..2287313bb1a
--- /dev/null
+++ b/src/images/courses/example/logo.svg
@@ -0,0 +1,18 @@
+<svg width="238" height="40" viewBox="0 0 238 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M78.4618 9.48899H81.9498L89.28 29H85.9283L84.157 24.0132H76.2818L74.5105 29H71.1315L78.4618 9.48899ZM83.1215 21.1792L81.0505 15.375L80.2875 13.1132H80.124L79.361 15.375L77.29 21.1792H83.1215ZM97.3385 29.436C95.9942 29.436 94.7861 29.1272 93.7142 28.5095C92.6424 27.8918 91.8067 27.038 91.2072 25.948C90.6077 24.8398 90.308 23.6045 90.308 22.242C90.308 20.8613 90.6077 19.626 91.2072 18.536C91.8067 17.446 92.6424 16.5922 93.7142 15.9745C94.7861 15.3568 95.9942 15.048 97.3385 15.048C98.8282 15.048 100.091 15.4022 101.126 16.1107C102.18 16.8011 102.943 17.7185 103.415 18.863L100.663 20.0075C100.009 18.536 98.8645 17.8002 97.2295 17.8002C96.5392 17.8002 95.8943 17.991 95.2948 18.3725C94.6953 18.7358 94.2138 19.2536 93.8505 19.9257C93.4872 20.5979 93.3055 21.37 93.3055 22.242C93.3055 23.114 93.4872 23.8861 93.8505 24.5582C94.2138 25.2304 94.6953 25.7572 95.2948 26.1387C95.8943 26.5021 96.5392 26.6837 97.2295 26.6837C98.0652 26.6837 98.7918 26.493 99.4095 26.1115C100.027 25.7118 100.5 25.1487 100.827 24.422L103.524 25.5937C102.997 26.7382 102.207 27.6647 101.154 28.3732C100.1 29.0818 98.8282 29.436 97.3385 29.436ZM112.218 29.436C110.873 29.436 109.665 29.1272 108.594 28.5095C107.522 27.8918 106.686 27.038 106.087 25.948C105.487 24.8398 105.187 23.6045 105.187 22.242C105.187 20.8613 105.487 19.626 106.087 18.536C106.686 17.446 107.522 16.5922 108.594 15.9745C109.665 15.3568 110.873 15.048 112.218 15.048C113.707 15.048 114.97 15.4022 116.006 16.1107C117.059 16.8011 117.822 17.7185 118.295 18.863L115.542 20.0075C114.888 18.536 113.744 17.8002 112.109 17.8002C111.418 17.8002 110.774 17.991 110.174 18.3725C109.575 18.7358 109.093 19.2536 108.73 19.9257C108.366 20.5979 108.185 21.37 108.185 22.242C108.185 23.114 108.366 23.8861 108.73 24.5582C109.093 25.2304 109.575 25.7572 110.174 26.1387C110.774 26.5021 111.418 26.6837 112.109 26.6837C112.944 26.6837 113.671 26.493 114.289 26.1115C114.906 25.7118 115.379 25.1487 115.706 24.422L118.404 25.5937C117.877 26.7382 117.086 27.6647 116.033 28.3732C114.979 29.0818 113.707 29.436 112.218 29.436ZM127.043 29.436C125.716 29.436 124.517 29.1272 123.446 28.5095C122.392 27.8918 121.565 27.038 120.966 25.948C120.366 24.8398 120.067 23.6045 120.067 22.242C120.067 20.934 120.348 19.735 120.911 18.645C121.493 17.5368 122.301 16.6648 123.337 16.029C124.372 15.375 125.553 15.048 126.879 15.048C128.242 15.048 129.422 15.3477 130.422 15.9472C131.439 16.5467 132.211 17.3824 132.738 18.4542C133.265 19.5079 133.528 20.7251 133.528 22.1057C133.528 22.2692 133.519 22.4327 133.501 22.5962C133.483 22.7597 133.474 22.8506 133.474 22.8687H123.064C123.155 24.1041 123.6 25.0578 124.399 25.73C125.199 26.4022 126.107 26.7382 127.124 26.7382C128.687 26.7382 129.886 26.0116 130.721 24.5582L133.283 25.7845C132.683 26.8927 131.848 27.7828 130.776 28.455C129.722 29.109 128.478 29.436 127.043 29.436ZM130.476 20.5797C130.44 20.1437 130.294 19.6987 130.04 19.2445C129.786 18.7903 129.386 18.4088 128.841 18.1C128.314 17.773 127.651 17.6095 126.852 17.6095C125.962 17.6095 125.19 17.882 124.536 18.427C123.9 18.972 123.464 19.6896 123.228 20.5797H130.476ZM141.361 29.436C139.817 29.436 138.536 29.0818 137.519 28.3732C136.52 27.6466 135.811 26.7382 135.393 25.6482L138.064 24.5037C138.373 25.2486 138.818 25.8117 139.399 26.1932C139.998 26.5747 140.652 26.7655 141.361 26.7655C142.106 26.7655 142.714 26.6292 143.187 26.3567C143.659 26.0661 143.895 25.6937 143.895 25.2395C143.895 24.8035 143.704 24.4492 143.323 24.1767C142.941 23.8861 142.315 23.6317 141.443 23.4137L139.59 22.9777C138.572 22.7416 137.691 22.3056 136.946 21.6697C136.22 21.0157 135.856 20.171 135.856 19.1355C135.856 17.882 136.374 16.8919 137.41 16.1652C138.445 15.4204 139.717 15.048 141.225 15.048C142.478 15.048 143.586 15.3114 144.549 15.8382C145.53 16.3651 146.239 17.1281 146.675 18.1272L144.031 19.2445C143.777 18.6813 143.387 18.2635 142.86 17.991C142.333 17.7185 141.761 17.5822 141.143 17.5822C140.543 17.5822 140.017 17.7185 139.562 17.991C139.108 18.2453 138.881 18.5905 138.881 19.0265C138.881 19.408 139.036 19.7168 139.344 19.953C139.671 20.1892 140.18 20.389 140.87 20.5525L142.887 21.043C144.249 21.3882 145.267 21.915 145.939 22.6235C146.611 23.3138 146.947 24.1495 146.947 25.1305C146.947 25.9298 146.702 26.6565 146.211 27.3105C145.739 27.9645 145.076 28.4822 144.222 28.8637C143.387 29.2453 142.433 29.436 141.361 29.436ZM154.484 29.436C152.94 29.436 151.659 29.0818 150.642 28.3732C149.642 27.6466 148.934 26.7382 148.516 25.6482L151.187 24.5037C151.495 25.2486 151.941 25.8117 152.522 26.1932C153.121 26.5747 153.775 26.7655 154.484 26.7655C155.229 26.7655 155.837 26.6292 156.31 26.3567C156.782 26.0661 157.018 25.6937 157.018 25.2395C157.018 24.8035 156.827 24.4492 156.446 24.1767C156.064 23.8861 155.438 23.6317 154.566 23.4137L152.713 22.9777C151.695 22.7416 150.814 22.3056 150.069 21.6697C149.343 21.0157 148.979 20.171 148.979 19.1355C148.979 17.882 149.497 16.8919 150.533 16.1652C151.568 15.4204 152.84 15.048 154.348 15.048C155.601 15.048 156.709 15.3114 157.672 15.8382C158.653 16.3651 159.362 17.1281 159.798 18.1272L157.154 19.2445C156.9 18.6813 156.509 18.2635 155.983 17.991C155.456 17.7185 154.884 17.5822 154.266 17.5822C153.666 17.5822 153.14 17.7185 152.685 17.991C152.231 18.2453 152.004 18.5905 152.004 19.0265C152.004 19.408 152.159 19.7168 152.467 19.953C152.794 20.1892 153.303 20.389 153.993 20.5525L156.01 21.043C157.372 21.3882 158.39 21.915 159.062 22.6235C159.734 23.3138 160.07 24.1495 160.07 25.1305C160.07 25.9298 159.825 26.6565 159.334 27.3105C158.862 27.9645 158.199 28.4822 157.345 28.8637C156.509 29.2453 155.556 29.436 154.484 29.436ZM164.204 13.195C163.641 13.195 163.159 13.0042 162.76 12.6227C162.378 12.2231 162.187 11.7417 162.187 11.1785C162.187 10.6153 162.378 10.143 162.76 9.76149C163.159 9.36182 163.641 9.16199 164.204 9.16199C164.767 9.16199 165.239 9.36182 165.621 9.76149C166.02 10.143 166.22 10.6153 166.22 11.1785C166.22 11.7417 166.02 12.2231 165.621 12.6227C165.239 13.0042 164.767 13.195 164.204 13.195ZM162.705 15.484H165.703V29H162.705V15.484ZM176.767 29.436C175.786 29.436 174.905 29.2271 174.124 28.8092C173.361 28.3914 172.789 27.8646 172.407 27.2287H172.244V29H169.41V9.48899H172.407V15.3477L172.244 17.228H172.407C172.789 16.6103 173.361 16.0926 174.124 15.6747C174.905 15.2569 175.786 15.048 176.767 15.048C177.93 15.048 179.002 15.3568 179.983 15.9745C180.982 16.5922 181.772 17.4551 182.353 18.5632C182.953 19.6532 183.253 20.8795 183.253 22.242C183.253 23.6045 182.953 24.8307 182.353 25.9207C181.772 27.0107 180.982 27.8737 179.983 28.5095C179.002 29.1272 177.93 29.436 176.767 29.436ZM176.249 26.6837C176.958 26.6837 177.612 26.5021 178.211 26.1387C178.829 25.7754 179.319 25.2577 179.683 24.5855C180.064 23.8952 180.255 23.114 180.255 22.242C180.255 21.37 180.064 20.5979 179.683 19.9257C179.319 19.2354 178.829 18.7086 178.211 18.3452C177.612 17.9819 176.958 17.8002 176.249 17.8002C175.541 17.8002 174.878 17.9819 174.26 18.3452C173.661 18.7086 173.17 19.2263 172.789 19.8985C172.425 20.5707 172.244 21.3518 172.244 22.242C172.244 23.1322 172.425 23.9133 172.789 24.5855C173.17 25.2577 173.661 25.7754 174.26 26.1387C174.878 26.5021 175.541 26.6837 176.249 26.6837ZM187.549 13.195C186.986 13.195 186.504 13.0042 186.105 12.6227C185.723 12.2231 185.533 11.7417 185.533 11.1785C185.533 10.6153 185.723 10.143 186.105 9.76149C186.504 9.36182 186.986 9.16199 187.549 9.16199C188.112 9.16199 188.585 9.36182 188.966 9.76149C189.366 10.143 189.566 10.6153 189.566 11.1785C189.566 11.7417 189.366 12.2231 188.966 12.6227C188.585 13.0042 188.112 13.195 187.549 13.195ZM186.05 15.484H189.048V29H186.05V15.484ZM192.755 9.48899H195.752V29H192.755V9.48899ZM200.968 13.195C200.405 13.195 199.924 13.0042 199.524 12.6227C199.142 12.2231 198.952 11.7417 198.952 11.1785C198.952 10.6153 199.142 10.143 199.524 9.76149C199.924 9.36182 200.405 9.16199 200.968 9.16199C201.531 9.16199 202.004 9.36182 202.385 9.76149C202.785 10.143 202.985 10.6153 202.985 11.1785C202.985 11.7417 202.785 12.2231 202.385 12.6227C202.004 13.0042 201.531 13.195 200.968 13.195ZM199.469 15.484H202.467V29H199.469V15.484ZM211.6 29.218C211 29.218 210.437 29.1272 209.91 28.9455C209.402 28.7457 208.975 28.4732 208.63 28.128C207.849 27.365 207.458 26.3022 207.458 24.9397V18.1272H205.087V15.484H207.458V11.451H210.455V15.484H213.753V18.1272H210.455V24.2857C210.455 25.0306 210.601 25.5574 210.891 25.8662C211.164 26.2296 211.609 26.4112 212.227 26.4112C212.754 26.4112 213.271 26.2568 213.78 25.948V28.8637C213.144 29.0999 212.417 29.218 211.6 29.218ZM220.884 28.237L215.243 15.484H218.595L222.356 24.5582H222.492L226.116 15.484H229.441L220.993 34.886H217.832L220.884 28.237ZM231.79 15.4022V9.48899H234.842V15.4022L234.515 22.6507H232.089L231.79 15.4022ZM233.316 29.1635C232.734 29.1635 232.235 28.9637 231.817 28.564C231.417 28.1462 231.217 27.6466 231.217 27.0652C231.217 26.4839 231.417 25.9934 231.817 25.5937C232.235 25.1941 232.734 24.9942 233.316 24.9942C233.897 24.9942 234.387 25.1941 234.787 25.5937C235.187 25.9934 235.387 26.4839 235.387 27.0652C235.387 27.6466 235.187 28.1462 234.787 28.564C234.387 28.9637 233.897 29.1635 233.316 29.1635Z" fill="url(#paint0_linear_1864_2567)"/>
+</g>
+<path d="M0 9.5H3.06011V26.1394H11.4481V29.0629H0L0 9.5Z" fill="#3C4043"/>
+<path d="M19.8798 29.5C18.5501 29.5 17.348 29.1904 16.2733 28.5711C15.2168 27.9517 14.388 27.0956 13.7869 26.0027C13.1858 24.8916 12.8853 23.653 12.8853 22.2869C12.8853 20.9754 13.1676 19.7732 13.7323 18.6803C14.3152 17.5692 15.1257 16.6949 16.164 16.0574C17.2022 15.4016 18.3862 15.0738 19.7159 15.0738C21.082 15.0738 22.266 15.3743 23.2678 15.9754C24.2879 16.5765 25.062 17.4144 25.5902 18.4891C26.1185 19.5455 26.3826 20.7659 26.3826 22.1503C26.3826 22.3142 26.3735 22.4782 26.3552 22.6421C26.337 22.806 26.3279 22.8971 26.3279 22.9153H15.8908C15.9818 24.1539 16.4281 25.1102 17.2296 25.7842C18.031 26.4581 18.9418 26.7951 19.9618 26.7951C21.5283 26.7951 22.7305 26.0665 23.5684 24.6093L26.1367 25.8388C25.5356 26.9499 24.6977 27.8425 23.623 28.5164C22.5665 29.1721 21.3188 29.5 19.8798 29.5ZM23.3225 20.6202C23.286 20.1831 23.1403 19.7368 22.8853 19.2814C22.6303 18.8261 22.2296 18.4435 21.6831 18.1339C21.1549 17.806 20.49 17.6421 19.6886 17.6421C18.796 17.6421 18.0219 17.9153 17.3662 18.4618C16.7286 19.0082 16.2915 19.7277 16.0547 20.6202H23.3225Z" fill="#3C4043"/>
+<path d="M33.4429 29.5C32.4775 29.5 31.6031 29.3088 30.8199 28.9262C30.0549 28.5255 29.4447 27.9791 28.9893 27.2869C28.5521 26.5765 28.3336 25.7751 28.3336 24.8825C28.3336 23.4618 28.8618 22.3415 29.9183 21.5219C30.9929 20.7022 32.35 20.2924 33.9893 20.2924C35.4283 20.2924 36.6578 20.5383 37.6778 21.0301V20.4563C37.6778 19.6366 37.35 18.9627 36.6942 18.4344C36.0567 17.888 35.2826 17.6148 34.3718 17.6148C32.9875 17.6148 31.8764 18.1794 31.0385 19.3087L28.7434 17.724C29.3809 16.8679 30.1733 16.2122 31.1204 15.7568C32.0858 15.3015 33.1696 15.0738 34.3718 15.0738C36.3572 15.0738 37.8873 15.5747 38.962 16.5765C40.0549 17.5601 40.6013 18.9536 40.6013 20.7568V29.0629H37.6778V27.3962H37.5139C37.0767 28.0155 36.5212 28.5255 35.8472 28.9262C35.1733 29.3088 34.3718 29.5 33.4429 29.5ZM33.9347 27.0137C34.6086 27.0137 35.2279 26.8497 35.7926 26.5219C36.3755 26.1758 36.8308 25.7295 37.1587 25.1831C37.5048 24.6184 37.6778 24.0173 37.6778 23.3798C36.7124 22.8516 35.6833 22.5874 34.5904 22.5874C33.5886 22.5874 32.8053 22.806 32.2407 23.2432C31.676 23.6803 31.3937 24.2359 31.3937 24.9098C31.3937 25.5292 31.6396 26.0392 32.1314 26.4399C32.6414 26.8224 33.2425 27.0137 33.9347 27.0137Z" fill="#3C4043"/>
+<path d="M43.7744 15.5109H46.6159V17.5328H46.7798C47.0713 16.8406 47.5995 16.2669 48.3645 15.8115C49.1296 15.3379 49.9128 15.1011 50.7143 15.1011C51.37 15.1011 51.9073 15.1922 52.3263 15.3743V18.5164C51.707 18.2067 51.0148 18.0519 50.2498 18.0519C49.2662 18.0519 48.4374 18.4344 47.7634 19.1995C47.1077 19.9463 46.7798 20.8661 46.7798 21.959V29.0629H43.7744V15.5109Z" fill="#3C4043"/>
+<path d="M54.5272 15.5109H57.3688V17.3142H57.5327C57.9334 16.6585 58.5163 16.1211 59.2813 15.7022C60.0464 15.2832 60.8751 15.0738 61.7677 15.0738C63.4434 15.0738 64.7094 15.5656 65.5655 16.5492C66.4398 17.5328 66.877 18.8898 66.877 20.6202V29.0629H63.8715V21.0301C63.8715 18.8989 62.8788 17.8333 60.8933 17.8333C59.8915 17.8333 59.081 18.2341 58.4617 19.0355C57.8423 19.837 57.5327 20.7842 57.5327 21.8771V29.0629H54.5272V15.5109Z" fill="#3C4043"/>
+<defs>
+<linearGradient id="paint0_linear_1864_2567" x1="71.0008" y1="29" x2="237.637" y2="7.21421" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#33CC00"/>
+<stop offset="0.385417" stop-color="#3399FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#9933FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/forms/background.svg b/src/images/courses/forms/background.svg
new file mode 100644
index 00000000000..d62b91cdc34
--- /dev/null
+++ b/src/images/courses/forms/background.svg
@@ -0,0 +1,44 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g clip-path="url(#clip1)">
+<rect x="73.625" y="32.5" width="134" height="26" stroke="#FF66CC"/>
+<path d="M198.852 40.7105L189.306 50.2564M189.306 40.7105L198.852 50.2564" stroke="#FF66CC"/>
+<rect x="73.625" y="-17" width="134" height="26" stroke="#3399FF"/>
+<rect x="77.625" y="-13" width="56.25" height="18" fill="#3399FF"/>
+<path d="M257.125 45.5C257.125 52.6797 251.305 58.5 244.125 58.5C236.945 58.5 231.125 52.6797 231.125 45.5C231.125 38.3203 236.945 32.5 244.125 32.5C251.305 32.5 257.125 38.3203 257.125 45.5Z" stroke="#3399FF"/>
+<circle cx="244.125" cy="45.5" r="8.5" stroke="#3399FF"/>
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="235" y="36" width="19" height="19">
+<circle cx="244.125" cy="45.5" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M244.092 26.375L225 45.4669M246.478 28.7615L227.386 47.8534M248.865 31.148L229.773 50.2398M251.251 33.5345L232.159 52.6263M253.638 35.9209L234.546 55.0128M256.024 38.3074L236.932 57.3993M260.797 43.0804L241.705 62.1723M263.184 45.4669L244.092 64.5588M258.411 40.6939L239.319 59.7858" stroke="#3399FF"/>
+</g>
+<rect x="348.125" y="32.5" width="44" height="26" rx="13" stroke="#3399FF"/>
+<path d="M369.625 45.5C369.625 50.1944 365.819 54 361.125 54C356.431 54 352.625 50.1944 352.625 45.5C352.625 40.8056 356.431 37 361.125 37C365.819 37 369.625 40.8056 369.625 45.5Z" stroke="#3399FF"/>
+<mask id="mask1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="352" y="36" width="19" height="19">
+<ellipse cx="361.125" cy="45.5" rx="9.00002" ry="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1)">
+<path d="M361.092 26.375L342 45.4669M363.478 28.7615L344.386 47.8534M365.865 31.148L346.773 50.2398M368.251 33.5345L349.159 52.6263M370.638 35.9209L351.546 55.0128M373.024 38.3074L353.932 57.3993M377.797 43.0804L358.705 62.1723M380.184 45.4669L361.092 64.5588M375.411 40.6939L356.319 59.7858" stroke="#3399FF"/>
+</g>
+<rect x="280.625" y="32.5" width="44" height="26" rx="13" stroke="#3399FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M293.625 36.5C288.654 36.5 284.625 40.5294 284.625 45.5C284.625 50.4706 288.654 54.5 293.625 54.5H311.625C306.654 54.5 302.625 50.4706 302.625 45.5C302.625 40.5294 306.654 36.5 311.625 36.5H293.625Z" fill="#3399FF"/>
+<circle cx="311.625" cy="45.5" r="8.5" stroke="#3399FF"/>
+<circle cx="277.875" cy="-4" r="8.5" stroke="#3399FF"/>
+<mask id="mask2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="268" y="-13" width="19" height="18">
+<circle cx="277.875" cy="-4" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask2)">
+<path d="M277.842 -23.125L258.75 -4.03311M280.228 -20.7385L261.136 -1.64663M282.615 -18.352L263.523 0.739859M285.001 -15.9655L265.909 3.12634M287.388 -13.5791L268.296 5.51283M289.774 -11.1926L270.682 7.89932M294.547 -6.4196L275.455 12.6723M296.934 -4.03311L277.842 15.0588M292.161 -8.80608L273.069 10.2858" stroke="#3399FF"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="360" height="360" fill="white" transform="translate(0 -76)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/forms/card-decor.svg b/src/images/courses/forms/card-decor.svg
new file mode 100644
index 00000000000..da026f545b2
--- /dev/null
+++ b/src/images/courses/forms/card-decor.svg
@@ -0,0 +1 @@
+<svg width="328" height="258" viewBox="0 0 328 258" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><g clip-path="url(#b)"><path fill="#fff" fill-opacity=".01" stroke="#BB86FC" d="M227.167 166.114H375.62v32.212H227.167z"/><path d="m241.515 182.694-4.323-1.406.417-1.315 4.323 1.601-.052-4.817h1.354l-.104 4.857 4.219-1.654.429 1.315-4.336 1.497 2.904 3.828-1.107.821-2.786-3.972-2.657 3.946-1.106-.795 2.825-3.906ZM255.51 182.694l-4.323-1.406.417-1.315 4.323 1.601-.052-4.817h1.354l-.104 4.857 4.218-1.654.43 1.315-4.336 1.497 2.904 3.828-1.107.821-2.787-3.972-2.656 3.946-1.107-.795 2.826-3.906ZM269.505 182.694l-4.323-1.406.417-1.315 4.322 1.601-.052-4.817h1.355l-.105 4.857 4.219-1.654.43 1.315-4.336 1.497 2.904 3.828-1.107.821-2.787-3.972-2.656 3.946-1.107-.795 2.826-3.906ZM283.5 182.694l-4.323-1.406.416-1.315 4.323 1.601-.052-4.817h1.354l-.104 4.857 4.219-1.654.43 1.315-4.336 1.497 2.903 3.828-1.106.821-2.787-3.972-2.656 3.946-1.107-.795 2.826-3.906ZM297.494 182.694l-4.323-1.406.417-1.315 4.323 1.601-.052-4.817h1.354l-.104 4.857 4.219-1.654.429 1.315-4.336 1.497 2.904 3.828-1.107.821-2.786-3.972-2.656 3.946-1.107-.795 2.825-3.906Z" fill="#BB86FC"/><path fill-rule="evenodd" clip-rule="evenodd" d="m285 125.905 44.149-.097-.002-1-44.189.097c.026.33.039.664.042 1Zm-29.13-.936-75.037.165.002 1 74.998-.165c.001-.336.013-.67.037-1Z" fill="#BB86FC"/><rect x="259.668" y="115.237" width="21.141" height="21.141" rx="10.571" fill="#fff" fill-opacity=".01" stroke="#BB86FC"/><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="259" y="114" width="23" height="23"><rect x="259.168" y="114.737" width="22.141" height="22.141" rx="11.071" fill="#fff"/></mask><g mask="url(#c)" stroke="#BB86FC"><path transform="rotate(135 114.457 111.649)" d="M0-.5h29.522"/><path d="m277.116 113.279-20.874 20.875M279.54 116.54l-20.875 20.875M281.964 119.802l-20.875 20.875M284.388 123.064l-20.875 20.875"/></g><path fill="#fff" fill-opacity=".01" stroke="#FF2D9F" d="M64.667 54h129v32.333h-129z"/><path d="m73.426 62.726 14.815 14.76m0-14.76-14.815 14.76" stroke="#FF2D9F"/><rect x="247.879" y="54" width="65.424" height="32.212" rx="16.106" fill="#fff" fill-opacity=".01" stroke="#BB86FC"/><rect x="286.626" y="59.535" width="21.141" height="21.141" rx="10.571" fill="#fff" fill-opacity=".01" stroke="#BB86FC"/><mask id="d" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="286" y="59" width="23" height="23"><rect x="286.126" y="59.035" width="22.141" height="22.141" rx="11.071" fill="#fff"/></mask><g mask="url(#d)" stroke="#BB86FC"><path d="M301.649 54.315 280.774 75.19M304.074 57.577l-20.875 20.875"/><path transform="rotate(135 140.545 93.647)" d="M0-.5h29.522"/><path d="m308.921 64.1-20.875 20.875M311.345 67.362 290.47 88.237"/></g><rect x="204.667" y="54" width="32.212" height="32.212" rx="16.106" fill="#fff" fill-opacity=".01" stroke="#BB86FC"/><rect x="210.202" y="59.535" width="21.141" height="21.141" rx="10.571" fill="#fff" fill-opacity=".01" stroke="#BB86FC"/><mask id="e" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="209" y="59" width="23" height="23"><rect x="209.702" y="59.035" width="22.141" height="22.141" rx="11.071" fill="#fff"/></mask><g mask="url(#e)" stroke="#BB86FC"><path transform="rotate(135 101.26 73.553)" d="M0-.5h29.522"/><path d="m227.65 57.577-20.875 20.875M230.073 60.838l-20.875 20.875M232.497 64.1l-20.875 20.875M234.921 67.362l-20.875 20.874"/></g></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h328v258H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(-70 -74)" d="M0 0h400v400H0z"/></clipPath></defs></svg>
diff --git a/src/images/courses/forms/card.svg b/src/images/courses/forms/card.svg
new file mode 100644
index 00000000000..a86592397b7
--- /dev/null
+++ b/src/images/courses/forms/card.svg
@@ -0,0 +1 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h640v320H0z"/><path d="M177.5 240.5h-47v47h47v-47ZM265.5 240.5h-47v47h47v-47Z" stroke="#39F"/><path d="m230 263 8.69 10.5L254 255" stroke="#39F"/><path d="M369.5 32.5h-239v47h239v-47ZM336.544 47.485l16.971 16.971m0-16.97-16.971 16.97 16.971-16.97ZM753.5 240.5h-239v47h239v-47Z" stroke="#F6C"/><path d="m535.818 265.125-5.187-1.687.5-1.579 5.187 1.922-.062-5.781h1.625l-.125 5.828 5.062-1.984.516 1.578-5.203 1.797 3.484 4.593-1.328.985-3.344-4.766-3.187 4.735-1.328-.954 3.39-4.687ZM552.612 265.125l-5.187-1.687.5-1.579 5.187 1.922-.062-5.781h1.625l-.125 5.828 5.062-1.984.516 1.578-5.203 1.797 3.484 4.593-1.328.985-3.344-4.766-3.187 4.735-1.329-.954 3.391-4.687ZM569.406 265.125l-5.188-1.687.5-1.579 5.188 1.922-.063-5.781h1.625l-.125 5.828 5.063-1.984.515 1.578-5.203 1.797 3.485 4.593-1.328.985-3.344-4.766-3.188 4.735-1.328-.954 3.391-4.687ZM586.2 265.125l-5.188-1.687.5-1.579 5.188 1.922-.063-5.781h1.625l-.125 5.828 5.063-1.984.515 1.578-5.203 1.797 3.484 4.593-1.328.985-3.343-4.766-3.188 4.735-1.328-.954 3.391-4.687ZM602.993 265.125l-5.187-1.687.5-1.579 5.187 1.922-.062-5.781h1.625l-.125 5.828 5.062-1.984.516 1.578-5.203 1.797 3.484 4.593-1.328.985-3.344-4.766-3.187 4.735-1.328-.954 3.39-4.687Z" fill="#F6C"/><path d="M434 79.5c12.979 0 23.5-10.521 23.5-23.5S446.979 32.5 434 32.5 410.5 43.021 410.5 56s10.521 23.5 23.5 23.5Z" stroke="#39F"/><path d="M434 71.5c8.56 0 15.5-6.94 15.5-15.5 0-8.56-6.94-15.5-15.5-15.5-8.56 0-15.5 6.94-15.5 15.5 0 8.56 6.94 15.5 15.5 15.5Z" stroke="#39F"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="418" y="40" width="32" height="32"><path d="M434 72c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16Z" fill="#C4C4C4"/></mask><g mask="url(#b)"><path d="m459.397 47.456-33.941 33.941M433.941 22 400 55.941 433.941 22Zm4.243 4.243-33.941 33.94 33.941-33.94Zm4.242 4.242-33.941 33.941 33.941-33.94Zm4.243 4.243-33.941 33.941 33.941-33.941Zm4.243 4.243-33.941 33.94 33.941-33.94Zm4.242 4.242-33.941 33.941 33.941-33.94Zm8.486 8.486-33.941 33.94L463.64 51.7Zm4.242 4.242-33.941 33.941 33.941-33.94Z" stroke="#39F"/></g><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="626" y="40" width="32" height="32"><path d="M642 72c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16Z" fill="#C4C4C4"/></mask><g mask="url(#c)"><path d="m667.397 47.456-33.941 33.941M641.941 22 608 55.941 641.941 22Zm4.243 4.243-33.941 33.94 33.941-33.94Zm4.242 4.242-33.941 33.941 33.941-33.94Zm4.243 4.243-33.941 33.941 33.941-33.941Zm4.243 4.243-33.941 33.94 33.941-33.94Zm4.242 4.242-33.941 33.941 33.941-33.94Zm8.486 8.486-33.941 33.94L671.64 51.7Zm4.242 4.242-33.941 33.941 33.941-33.94Z" stroke="#39F"/></g><mask id="d" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="374" y="248" width="32" height="32"><path d="M390 280c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16Z" fill="#C4C4C4"/></mask><g mask="url(#d)"><path d="m415.397 255.456-33.941 33.941M389.941 230 356 263.941 389.941 230Zm4.243 4.243-33.941 33.941 33.941-33.941Zm4.242 4.242-33.941 33.941 33.941-33.941Zm4.243 4.243-33.941 33.941 33.941-33.941Zm4.243 4.243-33.941 33.941 33.941-33.941Zm4.242 4.242-33.941 33.941 33.941-33.941Zm8.486 8.485-33.941 33.942 33.941-33.942Zm4.242 4.243-33.941 33.941 33.941-33.941Z" stroke="#39F"/></g><path d="M24 140h6.12v33.279h16.776v5.847H24V140ZM63.76 180c-2.66 0-5.064-.619-7.214-1.858-2.112-1.239-3.77-2.951-4.972-5.137-1.202-2.222-1.803-4.699-1.803-7.431 0-2.623.564-5.028 1.694-7.213 1.165-2.223 2.786-3.971 4.863-5.246 2.076-1.312 4.444-1.967 7.104-1.967 2.732 0 5.1.601 7.103 1.803 2.04 1.202 3.589 2.878 4.645 5.027 1.057 2.113 1.585 4.554 1.585 7.323 0 .327-.018.655-.055.983-.036.328-.054.51-.054.547H55.78c.183 2.477 1.075 4.389 2.678 5.737 1.603 1.348 3.424 2.022 5.464 2.022 3.133 0 5.538-1.457 7.214-4.371l5.136 2.459a14.196 14.196 0 0 1-5.027 5.355C69.133 179.344 66.638 180 63.76 180Zm6.885-17.76c-.073-.874-.364-1.766-.874-2.677s-1.312-1.676-2.405-2.295c-1.056-.656-2.386-.984-3.989-.984-1.785 0-3.333.547-4.645 1.639-1.275 1.093-2.15 2.532-2.623 4.317h14.536ZM90.886 180c-1.931 0-3.68-.383-5.246-1.148-1.53-.801-2.75-1.894-3.662-3.278-.874-1.421-1.311-3.024-1.311-4.809 0-2.842 1.056-5.082 3.17-6.721 2.149-1.64 4.863-2.459 8.141-2.459 2.878 0 5.337.492 7.378 1.475v-1.147c0-1.64-.656-2.988-1.968-4.044-1.275-1.093-2.823-1.639-4.645-1.639-2.768 0-4.99 1.129-6.666 3.387l-4.59-3.169a12.722 12.722 0 0 1 4.754-3.934c1.93-.911 4.098-1.366 6.502-1.366 3.971 0 7.032 1.001 9.181 3.005 2.186 1.967 3.279 4.754 3.279 8.361v16.612h-5.847v-3.334h-.328a10.735 10.735 0 0 1-3.334 3.06c-1.348.765-2.95 1.148-4.808 1.148Zm.983-4.973a7.275 7.275 0 0 0 3.716-.983c1.166-.692 2.077-1.585 2.732-2.678.692-1.129 1.039-2.331 1.039-3.606a12.664 12.664 0 0 0-6.175-1.585c-2.004 0-3.57.437-4.7 1.311-1.13.875-1.694 1.986-1.694 3.334 0 1.238.492 2.258 1.476 3.06 1.02.765 2.222 1.147 3.606 1.147ZM111.549 152.022h5.683v4.044h.328c.582-1.385 1.639-2.532 3.169-3.443 1.53-.947 3.097-1.421 4.699-1.421 1.312 0 2.387.182 3.224.547v6.284c-1.238-.62-2.622-.929-4.153-.929-1.967 0-3.624.765-4.972 2.295-1.312 1.494-1.967 3.333-1.967 5.519v14.208h-6.011v-27.104ZM133.054 152.022h5.683v3.606h.328c.802-1.311 1.968-2.386 3.498-3.224 1.53-.838 3.187-1.256 4.972-1.256 3.352 0 5.884.983 7.596 2.95 1.749 1.968 2.623 4.682 2.623 8.142v16.886h-6.011V163.06c0-4.262-1.986-6.393-5.956-6.393-2.004 0-3.625.801-4.864 2.404-1.238 1.603-1.858 3.497-1.858 5.683v14.372h-6.011v-27.104Z" fill="#3C4043"/><path d="M169.754 179.126V140h23.716v5.683h-17.705v11.475h15.956v5.684h-15.956v16.284h-6.011Z" fill="url(#e)"/><path d="M210.381 180c-2.877 0-5.409-.656-7.595-1.967a14.076 14.076 0 0 1-5.137-5.301c-1.238-2.222-1.858-4.736-1.858-7.541 0-2.768.62-5.264 1.858-7.486 1.239-2.259 2.951-4.044 5.137-5.355 2.186-1.312 4.718-1.967 7.595-1.967 2.842 0 5.356.655 7.541 1.967 2.186 1.311 3.898 3.096 5.137 5.355 1.239 2.222 1.858 4.718 1.858 7.486 0 2.805-.619 5.319-1.858 7.541a14.076 14.076 0 0 1-5.137 5.301c-2.185 1.311-4.699 1.967-7.541 1.967Zm0-5.41a8.63 8.63 0 0 0 4.263-1.093c1.311-.765 2.368-1.839 3.169-3.224.838-1.421 1.257-3.115 1.257-5.082 0-1.967-.419-3.643-1.257-5.027-.801-1.421-1.858-2.496-3.169-3.224a8.315 8.315 0 0 0-4.263-1.148c-1.53 0-2.969.383-4.316 1.148-1.312.728-2.387 1.803-3.225 3.224-.801 1.384-1.202 3.06-1.202 5.027s.401 3.661 1.202 5.082c.838 1.385 1.913 2.459 3.225 3.224a8.932 8.932 0 0 0 4.316 1.093Z" fill="url(#f)"/><path d="M229.819 179.126v-27.869h5.574v4.098h.327c.62-1.421 1.676-2.586 3.17-3.497 1.53-.947 3.169-1.421 4.918-1.421.765 0 1.402.055 1.912.164.547.109 1.039.237 1.476.383v6.12a14.676 14.676 0 0 0-2.131-.711 8.563 8.563 0 0 0-2.186-.273c-1.384 0-2.623.383-3.716 1.148-1.056.728-1.894 1.73-2.514 3.005-.619 1.239-.929 2.605-.929 4.099v14.754h-5.901Z" fill="url(#g)"/><path d="M251.751 179.126v-27.869h5.574v3.825h.328c.802-1.348 1.967-2.459 3.497-3.333 1.53-.911 3.224-1.366 5.082-1.366 2.077 0 3.844.491 5.301 1.475 1.457.984 2.495 2.222 3.115 3.716.91-1.457 2.149-2.678 3.715-3.661 1.567-1.02 3.48-1.53 5.738-1.53 3.279 0 5.72 1.001 7.323 3.005 1.602 1.967 2.404 4.59 2.404 7.869v17.869h-5.847V162.24c0-2.222-.492-3.843-1.475-4.863-.948-1.056-2.277-1.585-3.99-1.585-1.347 0-2.531.383-3.551 1.148-1.02.728-1.822 1.73-2.405 3.005-.546 1.275-.819 2.696-.819 4.263v14.918h-5.847V162.24c0-2.222-.492-3.843-1.476-4.863-.984-1.056-2.368-1.585-4.153-1.585-1.311 0-2.459.383-3.443 1.148-.983.765-1.766 1.785-2.349 3.06-.547 1.275-.82 2.696-.82 4.262v14.864h-5.902Z" fill="url(#h)"/><path d="M310.37 180c-3.352 0-6.029-.729-8.033-2.186-2.003-1.493-3.388-3.26-4.153-5.3l5.301-2.295c.655 1.493 1.603 2.641 2.841 3.442 1.239.765 2.641 1.148 4.208 1.148 1.457 0 2.714-.255 3.77-.765 1.057-.547 1.585-1.421 1.585-2.623 0-1.166-.528-2.022-1.585-2.569-1.056-.546-2.368-1.02-3.934-1.42l-3.333-.765a13.682 13.682 0 0 1-3.771-1.53 8.7 8.7 0 0 1-2.841-2.678c-.729-1.129-1.093-2.441-1.093-3.934 0-1.64.492-3.061 1.475-4.263.984-1.238 2.277-2.185 3.88-2.841 1.639-.692 3.406-1.038 5.3-1.038 2.587 0 4.846.51 6.776 1.53 1.968.983 3.407 2.477 4.317 4.48l-5.082 2.296c-.655-1.239-1.511-2.095-2.568-2.569-1.02-.51-2.149-.765-3.388-.765-1.384 0-2.55.292-3.497.875-.911.582-1.366 1.311-1.366 2.185 0 .947.4 1.694 1.202 2.241.838.546 1.858.983 3.06 1.311l4.044.984c2.768.692 4.845 1.748 6.229 3.169 1.385 1.385 2.077 3.079 2.077 5.082 0 1.785-.51 3.352-1.53 4.7-1.02 1.311-2.405 2.331-4.153 3.06-1.713.692-3.625 1.038-5.738 1.038Z" fill="url(#i)"/><path d="m328.253 166.667-.547-14.372V140h5.902v12.295l-.601 14.372h-4.754Zm2.404 12.787c-1.165 0-2.149-.401-2.951-1.203-.801-.801-1.202-1.766-1.202-2.896 0-1.129.401-2.095 1.202-2.896.802-.801 1.786-1.202 2.951-1.202 1.13 0 2.095.401 2.896 1.202.802.801 1.203 1.767 1.203 2.896 0 1.13-.401 2.095-1.203 2.896-.801.802-1.766 1.203-2.896 1.203Z" fill="url(#j)"/></g><defs><linearGradient id="e" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><linearGradient id="f" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><linearGradient id="g" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><linearGradient id="h" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><linearGradient id="i" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><linearGradient id="j" x1="169.754" y1="180" x2="331.12" y2="128.589" gradientUnits="userSpaceOnUse"><stop offset=".068" stop-color="#39F"/><stop offset=".344" stop-color="#06F"/><stop offset=".62" stop-color="#93F"/><stop offset=".911" stop-color="#F39"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h640v320H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/images/courses/forms/logo.svg b/src/images/courses/forms/logo.svg
new file mode 100644
index 00000000000..56a7cc5cb43
--- /dev/null
+++ b/src/images/courses/forms/logo.svg
@@ -0,0 +1,51 @@
+<svg width="158" height="40" viewBox="0 0 158 40" preserveAspectRatio="xMinYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H3.06011V26.6393H11.4481V29.5628H0L0 10Z" fill="#3C4043"/>
+<path d="M19.8798 30C18.5501 30 17.3479 29.6903 16.2733 29.071C15.2168 28.4517 14.388 27.5956 13.7869 26.5027C13.1858 25.3916 12.8853 24.153 12.8853 22.7869C12.8853 21.4754 13.1676 20.2732 13.7323 19.1803C14.3152 18.0692 15.1257 17.1949 16.164 16.5574C17.2022 15.9016 18.3862 15.5738 19.7159 15.5738C21.082 15.5738 22.266 15.8743 23.2678 16.4754C24.2878 17.0765 25.062 17.9144 25.5902 18.9891C26.1184 20.0455 26.3826 21.2659 26.3826 22.6503C26.3826 22.8142 26.3734 22.9781 26.3552 23.1421C26.337 23.306 26.3279 23.3971 26.3279 23.4153H15.8908C15.9818 24.6539 16.4281 25.6102 17.2295 26.2842C18.031 26.9581 18.9418 27.2951 19.9618 27.2951C21.5283 27.2951 22.7305 26.5665 23.5683 25.1093L26.1367 26.3388C25.5356 27.4499 24.6977 28.3424 23.623 29.0164C22.5665 29.6721 21.3188 30 19.8798 30ZM23.3224 21.1202C23.286 20.6831 23.1403 20.2368 22.8853 19.7814C22.6303 19.326 22.2295 18.9435 21.6831 18.6339C21.1549 18.306 20.49 18.1421 19.6886 18.1421C18.796 18.1421 18.0219 18.4153 17.3662 18.9617C16.7286 19.5082 16.2915 20.2277 16.0547 21.1202H23.3224Z" fill="#3C4043"/>
+<path d="M33.4428 30C32.4774 30 31.6031 29.8087 30.8199 29.4262C30.0549 29.0255 29.4447 28.4791 28.9893 27.7869C28.5521 27.0765 28.3335 26.275 28.3335 25.3825C28.3335 23.9617 28.8618 22.8415 29.9182 22.0219C30.9929 21.2022 32.3499 20.7924 33.9893 20.7924C35.4283 20.7924 36.6578 21.0383 37.6778 21.5301V20.9563C37.6778 20.1366 37.3499 19.4627 36.6942 18.9344C36.0567 18.388 35.2825 18.1148 34.3718 18.1148C32.9875 18.1148 31.8763 18.6794 31.0385 19.8087L28.7434 18.224C29.3809 17.3679 30.1733 16.7122 31.1204 16.2568C32.0858 15.8015 33.1696 15.5738 34.3718 15.5738C36.3572 15.5738 37.8873 16.0747 38.962 17.0765C40.0549 18.0601 40.6013 19.4536 40.6013 21.2568V29.5628H37.6778V27.8962H37.5139C37.0767 28.5155 36.5212 29.0255 35.8472 29.4262C35.1733 29.8087 34.3718 30 33.4428 30ZM33.9346 27.5137C34.6086 27.5137 35.2279 27.3497 35.7926 27.0219C36.3754 26.6758 36.8308 26.2295 37.1587 25.6831C37.5048 25.1184 37.6778 24.5173 37.6778 23.8798C36.7124 23.3515 35.6833 23.0874 34.5904 23.0874C33.5886 23.0874 32.8053 23.306 32.2406 23.7432C31.676 24.1803 31.3937 24.7359 31.3937 25.4098C31.3937 26.0291 31.6396 26.5392 32.1314 26.9399C32.6414 27.3224 33.2425 27.5137 33.9346 27.5137Z" fill="#3C4043"/>
+<path d="M43.7743 16.0109H46.6159V18.0328H46.7798C47.0712 17.3406 47.5995 16.7668 48.3645 16.3115C49.1295 15.8379 49.9128 15.6011 50.7142 15.6011C51.37 15.6011 51.9073 15.6922 52.3262 15.8743V19.0164C51.7069 18.7067 51.0148 18.5519 50.2497 18.5519C49.2661 18.5519 48.4374 18.9344 47.7634 19.6995C47.1077 20.4463 46.7798 21.3661 46.7798 22.459V29.5628H43.7743V16.0109Z" fill="#3C4043"/>
+<path d="M54.5272 16.0109H57.3687V17.8142H57.5327C57.9334 17.1585 58.5163 16.6211 59.2813 16.2022C60.0463 15.7832 60.8751 15.5738 61.7676 15.5738C63.4434 15.5738 64.7093 16.0656 65.5654 17.0492C66.4398 18.0328 66.8769 19.3898 66.8769 21.1202V29.5628H63.8715V21.5301C63.8715 19.3989 62.8787 18.3333 60.8933 18.3333C59.8915 18.3333 59.0809 18.7341 58.4616 19.5355C57.8423 20.337 57.5327 21.2842 57.5327 22.3771V29.5628H54.5272V16.0109Z" fill="#3C4043"/>
+<path d="M74.877 29.5628V10H86.7349V12.8415H77.8824V18.5792H85.8606V21.4208H77.8824V29.5628H74.877Z" fill="url(#paint0_linear)"/>
+<path d="M95.1907 30C93.7518 30 92.4858 29.6721 91.3929 29.0164C90.3 28.3607 89.4439 27.4772 88.8246 26.3661C88.2053 25.255 87.8957 23.9982 87.8957 22.5956C87.8957 21.2113 88.2053 19.9636 88.8246 18.8525C89.4439 17.7231 90.3 16.8306 91.3929 16.1749C92.4858 15.5191 93.7518 15.1913 95.1907 15.1913C96.6115 15.1913 97.8683 15.5191 98.9612 16.1749C100.054 16.8306 100.91 17.7231 101.53 18.8525C102.149 19.9636 102.458 21.2113 102.458 22.5956C102.458 23.9982 102.149 25.255 101.53 26.3661C100.91 27.4772 100.054 28.3607 98.9612 29.0164C97.8683 29.6721 96.6115 30 95.1907 30ZM95.1907 27.2951C95.9558 27.2951 96.6661 27.1129 97.3219 26.7486C97.9776 26.3661 98.5059 25.8288 98.9066 25.1366C99.3255 24.4262 99.535 23.5792 99.535 22.5956C99.535 21.612 99.3255 20.7741 98.9066 20.082C98.5059 19.3716 97.9776 18.8342 97.3219 18.4699C96.6661 18.0874 95.9558 17.8962 95.1907 17.8962C94.4257 17.8962 93.7062 18.0874 93.0323 18.4699C92.3765 18.8342 91.8392 19.3716 91.4202 20.082C91.0195 20.7741 90.8191 21.612 90.8191 22.5956C90.8191 23.5792 91.0195 24.4262 91.4202 25.1366C91.8392 25.8288 92.3765 26.3661 93.0323 26.7486C93.7062 27.1129 94.4257 27.2951 95.1907 27.2951Z" fill="url(#paint1_linear)"/>
+<path d="M104.909 29.5628V15.6284H107.696V17.6776H107.86C108.17 16.9672 108.698 16.3843 109.445 15.929C110.21 15.4554 111.03 15.2186 111.904 15.2186C112.286 15.2186 112.605 15.2459 112.86 15.3005C113.133 15.3552 113.379 15.4189 113.598 15.4918V18.5519C113.252 18.4062 112.897 18.2878 112.532 18.1967C112.186 18.1056 111.822 18.0601 111.439 18.0601C110.747 18.0601 110.128 18.2514 109.582 18.6339C109.053 18.9982 108.634 19.4991 108.325 20.1366C108.015 20.7559 107.86 21.439 107.86 22.1858V29.5628H104.909Z" fill="url(#paint2_linear)"/>
+<path d="M115.876 29.5628V15.6284H118.663V17.541H118.827C119.227 16.867 119.81 16.3115 120.575 15.8743C121.34 15.4189 122.187 15.1913 123.116 15.1913C124.154 15.1913 125.038 15.4372 125.766 15.929C126.495 16.4208 127.014 17.0401 127.324 17.7869C127.779 17.0583 128.398 16.4481 129.182 15.9563C129.965 15.4463 130.921 15.1913 132.051 15.1913C133.69 15.1913 134.91 15.6922 135.712 16.694C136.513 17.6776 136.914 18.9891 136.914 20.6284V29.5628H133.99V21.1202C133.99 20.0091 133.745 19.1985 133.253 18.6885C132.779 18.1603 132.114 17.8962 131.258 17.8962C130.584 17.8962 129.992 18.0874 129.482 18.4699C128.972 18.8342 128.572 19.3352 128.28 19.9727C128.007 20.6102 127.87 21.3206 127.87 22.1038V29.5628H124.947V21.1202C124.947 20.0091 124.701 19.1985 124.209 18.6885C123.717 18.1603 123.025 17.8962 122.133 17.8962C121.477 17.8962 120.903 18.0874 120.411 18.4699C119.919 18.8525 119.528 19.3625 119.236 20C118.963 20.6375 118.827 21.3479 118.827 22.1311V29.5628H115.876Z" fill="url(#paint3_linear)"/>
+<path d="M145.185 30C143.509 30 142.17 29.6357 141.169 28.9071C140.167 28.1603 139.475 27.2769 139.092 26.2568L141.742 25.1093C142.07 25.8561 142.544 26.4299 143.163 26.8306C143.782 27.2131 144.484 27.4044 145.267 27.4044C145.996 27.4044 146.624 27.2769 147.152 27.0219C147.68 26.7486 147.945 26.3115 147.945 25.7104C147.945 25.1275 147.68 24.6995 147.152 24.4262C146.624 24.153 145.968 23.9162 145.185 23.7158L143.518 23.3333C142.844 23.1694 142.216 22.9144 141.633 22.5683C141.05 22.2222 140.577 21.776 140.212 21.2295C139.848 20.6648 139.666 20.0091 139.666 19.2623C139.666 18.4426 139.912 17.7322 140.404 17.1311C140.895 16.5118 141.542 16.0383 142.343 15.7104C143.163 15.3643 144.047 15.1913 144.994 15.1913C146.287 15.1913 147.416 15.4463 148.382 15.9563C149.365 16.4481 150.085 17.1949 150.54 18.1967L147.999 19.3443C147.671 18.725 147.243 18.2969 146.715 18.0601C146.205 17.8051 145.64 17.6776 145.021 17.6776C144.329 17.6776 143.746 17.8233 143.272 18.1148C142.817 18.4062 142.589 18.7705 142.589 19.2077C142.589 19.6812 142.79 20.0546 143.19 20.3279C143.609 20.6011 144.119 20.8197 144.72 20.9836L146.742 21.4754C148.127 21.8215 149.165 22.3497 149.857 23.0601C150.549 23.7523 150.895 24.5993 150.895 25.6011C150.895 26.4936 150.64 27.2769 150.13 27.9508C149.62 28.6066 148.928 29.1166 148.054 29.4809C147.198 29.827 146.241 30 145.185 30Z" fill="url(#paint4_linear)"/>
+<path d="M154.126 23.3333L153.853 16.1475V10H156.804V16.1475L156.503 23.3333H154.126ZM155.329 29.7268C154.746 29.7268 154.254 29.5264 153.853 29.1257C153.452 28.725 153.252 28.2423 153.252 27.6776C153.252 27.1129 153.452 26.6302 153.853 26.2295C154.254 25.8288 154.746 25.6284 155.329 25.6284C155.893 25.6284 156.376 25.8288 156.777 26.2295C157.177 26.6302 157.378 27.1129 157.378 27.6776C157.378 28.2423 157.177 28.725 156.777 29.1257C156.376 29.5264 155.893 29.7268 155.329 29.7268Z" fill="url(#paint5_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="74.877" y1="30" x2="155.56" y2="4.29442" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#3399FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#9933FF"/>
+<stop offset="0.911458" stop-color="#FF3399"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/html/background.svg b/src/images/courses/html/background.svg
new file mode 100755
index 00000000000..f0e6fe13be9
--- /dev/null
+++ b/src/images/courses/html/background.svg
@@ -0,0 +1,23 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1864_2072)">
+<path d="M50 34.15L39.8 23.95L50.05 13.75L50.8 14.55L41.4 23.95L50.8 33.35L50 34.15ZM65.9501 34.2L65.2001 33.4L74.6 24L65.2001 14.55L66 13.75L76.2001 23.95L65.9501 34.2Z" fill="#33CC00"/>
+<mask id="path-2-inside-1_1864_2072" fill="white">
+<path d="M95 14H422V29H95V14Z"/>
+</mask>
+<path d="M422 28H95V30H422V28Z" fill="#66CCFF" mask="url(#path-2-inside-1_1864_2072)"/>
+<rect x="128" y="63" width="42.8859" height="7.62416" fill="#CCEEFF"/>
+<rect x="141.819" y="78.6241" width="50.5101" height="7.62416" fill="#CCEEFF"/>
+<rect x="157" y="94" width="102" height="8" fill="#CCEEFF"/>
+<rect x="157" y="110" width="119" height="8" fill="#CCEEFF"/>
+<rect x="95.5" y="14.5" width="326" height="269" stroke="#66CCFF"/>
+<rect x="116.5" y="51.5" width="284" height="78" stroke="#FF66CC" stroke-dasharray="1.34 1.34"/>
+<circle cx="106.358" cy="22.0175" r="3.34061" fill="#FFDDEE"/>
+<circle cx="118.384" cy="22.0175" r="3.34061" fill="#FFEEDD"/>
+<circle cx="130.41" cy="22.0175" r="3.34061" fill="#DDEEDD"/>
+</g>
+<defs>
+<clipPath id="clip0_1864_2072">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/html/card-decor.svg b/src/images/courses/html/card-decor.svg
new file mode 100644
index 00000000000..d164c817f24
--- /dev/null
+++ b/src/images/courses/html/card-decor.svg
@@ -0,0 +1 @@
+<svg width="328" height="258" viewBox="0 0 328 258" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M32-75h40V41H32V-75Z" fill="#FDE" fill-opacity=".56"/><path d="m52 41 7-7.06M51.75-75 52 41l-.25-116ZM52 41l-7-7.06L52 41Z" stroke="#F6C"/><path d="M237 210h58v116h-58V210Z" fill="#FDE" fill-opacity=".28"/><path d="M140 228h40v116h-40V228Z" fill="#CEF"/><path d="m180 239-5 5m-35-5h40-40Zm0 0 5-5-5 5Zm0 0 5 5-5-5Zm40 0-5-5 5 5Z" stroke="#39F"/><path d="M189 228h40v20h-40v-20Z" fill="#FDE" fill-opacity=".56"/><path d="M81.184-92h99.379V33.014H81.184V-92ZM189.096 27.491H295v31.63H189.096v-31.63ZM33 211.986h99.379V337H33V211.986Z" stroke="#F6C" stroke-dasharray="2 2"/><path d="M189-18h106v37H189v-37Z" fill="#CEF"/><path d="m195 53 25-26m-25 13.883V53 40.883ZM195 53h11.65H195Z" stroke="#F6C" stroke-dasharray="2 2"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h328v258H0z"/></clipPath></defs></svg>
diff --git a/src/images/courses/html/card.svg b/src/images/courses/html/card.svg
new file mode 100755
index 00000000000..ab6fb5077ed
--- /dev/null
+++ b/src/images/courses/html/card.svg
@@ -0,0 +1,44 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1847_1884)">
+<rect width="640" height="320" fill="white"/>
+<path d="M394 45.15L383.8 34.95L394.05 24.75L394.8 25.55L385.4 34.95L394.8 44.35L394 45.15ZM409.95 45.2L409.2 44.4L418.6 35L409.2 25.55L410 24.75L420.2 34.95L409.95 45.2Z" fill="#33CC00"/>
+<mask id="path-2-inside-1_1847_1884" fill="white">
+<path d="M439 25H766V40H439V25Z"/>
+</mask>
+<path d="M766 39H439V41H766V39Z" fill="#66CCFF" mask="url(#path-2-inside-1_1847_1884)"/>
+<rect x="472" y="74" width="42.8859" height="7.62416" fill="#CCEEFF"/>
+<rect x="485.819" y="89.6241" width="50.5101" height="7.62416" fill="#CCEEFF"/>
+<rect x="501" y="105" width="102" height="8" fill="#CCEEFF"/>
+<rect x="501" y="121" width="119" height="8" fill="#CCEEFF"/>
+<rect x="610.539" y="181.5" width="133.961" height="78.5066" fill="#CCEEFF" fill-opacity="0.56" stroke="#66CCFF"/>
+<rect x="439.5" y="25.5" width="326" height="269" stroke="#66CCFF"/>
+<rect x="460.5" y="62.5" width="284" height="78" stroke="#FF66CC" stroke-dasharray="1.34 1.34"/>
+<rect x="471.07" y="195.031" width="114.249" height="14.6987" fill="#CCEEFF"/>
+<rect x="460.88" y="181.5" width="133.961" height="78.5066" fill="#CCEEFF" fill-opacity="0.56" stroke="#66CCFF"/>
+<rect x="471" y="221" width="90" height="3" fill="#CCEEFF"/>
+<rect x="471" y="229" width="109" height="3" fill="#CCEEFF"/>
+<rect x="471" y="238" width="102" height="3" fill="#CCEEFF"/>
+<rect x="471" y="246" width="112" height="3" fill="#CCEEFF"/>
+<circle cx="450.358" cy="33.0175" r="3.34061" fill="#FFDDEE"/>
+<circle cx="462.384" cy="33.0175" r="3.34061" fill="#FFEEDD"/>
+<circle cx="474.41" cy="33.0175" r="3.34061" fill="#DDEEDD"/>
+<g style="mix-blend-mode:darken">
+<path d="M169.806 139.978H175.91V156.164H194.004V139.978H200.108V179H194.004V161.941H175.91V179H169.806V139.978ZM216.943 145.809H206.043V139.978H233.947V145.809H223.047V179H216.943V145.809ZM239.914 139.978H248.252L259.425 169.571H259.752L270.979 139.978H279.263V179H273.213V157.145L273.54 150.115H273.213L262.041 179H257.136L245.963 150.115H245.636L245.963 157.145V179H239.914V139.978ZM288.088 139.978H294.192V173.168H310.923V179H288.088V139.978ZM316.83 151.804V139.978H322.934V151.804L322.28 166.301H317.429L316.83 151.804ZM319.882 179.327C318.719 179.327 317.72 178.927 316.884 178.128C316.085 177.292 315.685 176.293 315.685 175.13C315.685 173.968 316.085 172.987 316.884 172.188C317.72 171.388 318.719 170.989 319.882 170.989C321.044 170.989 322.025 171.388 322.825 172.188C323.624 172.987 324.024 173.968 324.024 175.13C324.024 176.293 323.624 177.292 322.825 178.128C322.025 178.927 321.044 179.327 319.882 179.327Z" fill="url(#paint0_linear_1847_1884)"/>
+</g>
+<path d="M24 140H30.1202V173.279H46.8962V179.126H24V140Z" fill="#3C4043"/>
+<path d="M63.7596 180C61.1003 180 58.6959 179.381 56.5465 178.142C54.4336 176.903 52.776 175.191 51.5739 173.005C50.3717 170.783 49.7706 168.306 49.7706 165.574C49.7706 162.951 50.3352 160.546 51.4646 158.361C52.6303 156.138 54.2514 154.39 56.328 153.115C58.4045 151.803 60.7724 151.148 63.4318 151.148C66.164 151.148 68.532 151.749 70.5356 152.951C72.5757 154.153 74.1239 155.829 75.1804 157.978C76.2369 160.091 76.7651 162.532 76.7651 165.301C76.7651 165.628 76.7469 165.956 76.7105 166.284C76.674 166.612 76.6558 166.794 76.6558 166.831H55.7815C55.9637 169.308 56.8562 171.22 58.4591 172.568C60.062 173.916 61.8835 174.59 63.9236 174.59C67.0565 174.59 69.4609 173.133 71.1367 170.219L76.2733 172.678C75.0711 174.9 73.3953 176.685 71.246 178.033C69.1331 179.344 66.6376 180 63.7596 180ZM70.6449 162.24C70.572 161.366 70.2806 160.474 69.7706 159.563C69.2606 158.652 68.4591 157.887 67.3662 157.268C66.3097 156.612 64.98 156.284 63.3771 156.284C61.5921 156.284 60.0438 156.831 58.7323 157.923C57.4573 159.016 56.583 160.455 56.1094 162.24H70.6449Z" fill="#3C4043"/>
+<path d="M90.8857 180C88.9549 180 87.2062 179.617 85.6398 178.852C84.1097 178.051 82.8893 176.958 81.9786 175.574C81.1042 174.153 80.6671 172.55 80.6671 170.765C80.6671 167.923 81.7236 165.683 83.8365 164.044C85.9859 162.404 88.6999 161.585 91.9786 161.585C94.8565 161.585 97.3155 162.077 99.3556 163.06V161.913C99.3556 160.273 98.6999 158.925 97.3884 157.869C96.1133 156.776 94.5651 156.23 92.7436 156.23C89.9749 156.23 87.7527 157.359 86.0769 159.617L81.4868 156.448C82.7618 154.736 84.3465 153.424 86.2409 152.514C88.1716 151.603 90.3392 151.148 92.7436 151.148C96.7144 151.148 99.7746 152.149 101.924 154.153C104.11 156.12 105.203 158.907 105.203 162.514V179.126H99.3556V175.792H99.0277C98.1534 177.031 97.0423 178.051 95.6944 178.852C94.3465 179.617 92.7436 180 90.8857 180ZM91.8693 175.027C93.2172 175.027 94.4558 174.699 95.5851 174.044C96.7509 173.352 97.6616 172.459 98.3174 171.366C99.0095 170.237 99.3556 169.035 99.3556 167.76C97.4248 166.703 95.3665 166.175 93.1807 166.175C91.1771 166.175 89.6106 166.612 88.4813 167.486C87.352 168.361 86.7873 169.472 86.7873 170.82C86.7873 172.058 87.2791 173.078 88.2627 173.88C89.2828 174.645 90.4849 175.027 91.8693 175.027Z" fill="#3C4043"/>
+<path d="M111.549 152.022H117.232V156.066H117.56C118.142 154.681 119.199 153.534 120.729 152.623C122.259 151.676 123.826 151.202 125.428 151.202C126.74 151.202 127.815 151.384 128.652 151.749V158.033C127.414 157.413 126.03 157.104 124.499 157.104C122.532 157.104 120.875 157.869 119.527 159.399C118.215 160.893 117.56 162.732 117.56 164.918V179.126H111.549V152.022Z" fill="#3C4043"/>
+<path d="M133.054 152.022H138.737V155.628H139.065C139.867 154.317 141.033 153.242 142.563 152.404C144.093 151.566 145.75 151.148 147.535 151.148C150.887 151.148 153.419 152.131 155.131 154.098C156.88 156.066 157.754 158.78 157.754 162.24V179.126H151.743V163.06C151.743 158.798 149.757 156.667 145.787 156.667C143.783 156.667 142.162 157.468 140.923 159.071C139.685 160.674 139.065 162.568 139.065 164.754V179.126H133.054V152.022Z" fill="#3C4043"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1847_1884" x1="171" y1="179" x2="323.13" y2="160.917" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#FF3399"/>
+<stop offset="0.5" stop-color="#9933FF"/>
+<stop offset="0.942708" stop-color="#0066FF"/>
+</linearGradient>
+<clipPath id="clip0_1847_1884">
+<rect width="640" height="320" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/html/logo.svg b/src/images/courses/html/logo.svg
new file mode 100755
index 00000000000..f064db6f0cc
--- /dev/null
+++ b/src/images/courses/html/logo.svg
@@ -0,0 +1,17 @@
+<svg width="152" height="40" viewBox="0 0 152 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M72.9028 9.489H75.9548V17.5822H85.0018V9.489H88.0538V29H85.0018V20.4707H75.9548V29H72.9028V9.489ZM96.4714 12.4047H91.0214V9.489H104.973V12.4047H99.5234V29H96.4714V12.4047ZM107.957 9.489H112.126L117.712 24.2857H117.876L123.489 9.489H127.631V29H124.607V18.0727L124.77 14.5575H124.607L119.02 29H116.568L110.982 14.5575H110.818L110.982 18.0727V29H107.957V9.489ZM132.044 9.489H135.096V26.0842H143.462V29H132.044V9.489ZM146.415 15.4022V9.489H149.467V15.4022L149.14 22.6507H146.715L146.415 15.4022ZM147.941 29.1635C147.36 29.1635 146.86 28.9637 146.442 28.564C146.042 28.1462 145.843 27.6466 145.843 27.0652C145.843 26.4839 146.042 25.9934 146.442 25.5938C146.86 25.1941 147.36 24.9943 147.941 24.9943C148.522 24.9943 149.013 25.1941 149.412 25.5938C149.812 25.9934 150.012 26.4839 150.012 27.0652C150.012 27.6466 149.812 28.1462 149.412 28.564C149.013 28.9637 148.522 29.1635 147.941 29.1635Z" fill="url(#paint0_linear_1864_2563)"/>
+</g>
+<path d="M0 9.5H3.06011V26.1393H11.4481V29.0628H0L0 9.5Z" fill="#3C4043"/>
+<path d="M19.8798 29.5C18.5501 29.5 17.3479 29.1903 16.2733 28.571C15.2168 27.9517 14.388 27.0956 13.7869 26.0027C13.1858 24.8916 12.8853 23.653 12.8853 22.2869C12.8853 20.9754 13.1676 19.7732 13.7323 18.6803C14.3152 17.5692 15.1257 16.6949 16.164 16.0574C17.2022 15.4016 18.3862 15.0738 19.7159 15.0738C21.082 15.0738 22.266 15.3743 23.2678 15.9754C24.2878 16.5765 25.062 17.4144 25.5902 18.4891C26.1184 19.5455 26.3826 20.7659 26.3826 22.1503C26.3826 22.3142 26.3734 22.4781 26.3552 22.6421C26.337 22.806 26.3279 22.8971 26.3279 22.9153H15.8908C15.9818 24.1539 16.4281 25.1102 17.2295 25.7842C18.031 26.4581 18.9418 26.7951 19.9618 26.7951C21.5283 26.7951 22.7305 26.0665 23.5683 24.6093L26.1367 25.8388C25.5356 26.9499 24.6977 27.8424 23.623 28.5164C22.5665 29.1721 21.3188 29.5 19.8798 29.5ZM23.3224 20.6202C23.286 20.1831 23.1403 19.7368 22.8853 19.2814C22.6303 18.826 22.2295 18.4435 21.6831 18.1339C21.1549 17.806 20.49 17.6421 19.6886 17.6421C18.796 17.6421 18.0219 17.9153 17.3662 18.4617C16.7286 19.0082 16.2915 19.7277 16.0547 20.6202H23.3224Z" fill="#3C4043"/>
+<path d="M33.4428 29.5C32.4774 29.5 31.6031 29.3087 30.8199 28.9262C30.0549 28.5255 29.4447 27.9791 28.9893 27.2869C28.5521 26.5765 28.3335 25.775 28.3335 24.8825C28.3335 23.4617 28.8618 22.3415 29.9182 21.5219C30.9929 20.7022 32.3499 20.2924 33.9893 20.2924C35.4283 20.2924 36.6578 20.5383 37.6778 21.0301V20.4563C37.6778 19.6366 37.3499 18.9627 36.6942 18.4344C36.0567 17.888 35.2825 17.6148 34.3718 17.6148C32.9875 17.6148 31.8763 18.1794 31.0385 19.3087L28.7434 17.724C29.3809 16.8679 30.1733 16.2122 31.1204 15.7568C32.0858 15.3015 33.1696 15.0738 34.3718 15.0738C36.3572 15.0738 37.8873 15.5747 38.962 16.5765C40.0549 17.5601 40.6013 18.9536 40.6013 20.7568V29.0628H37.6778V27.3962H37.5139C37.0767 28.0155 36.5212 28.5255 35.8472 28.9262C35.1733 29.3087 34.3718 29.5 33.4428 29.5ZM33.9346 27.0137C34.6086 27.0137 35.2279 26.8497 35.7926 26.5219C36.3754 26.1758 36.8308 25.7295 37.1587 25.1831C37.5048 24.6184 37.6778 24.0173 37.6778 23.3798C36.7124 22.8515 35.6833 22.5874 34.5904 22.5874C33.5886 22.5874 32.8053 22.806 32.2406 23.2432C31.676 23.6803 31.3937 24.2359 31.3937 24.9098C31.3937 25.5291 31.6396 26.0392 32.1314 26.4399C32.6414 26.8224 33.2425 27.0137 33.9346 27.0137Z" fill="#3C4043"/>
+<path d="M43.7743 15.5109H46.6159V17.5328H46.7798C47.0712 16.8406 47.5995 16.2668 48.3645 15.8115C49.1295 15.3379 49.9128 15.1011 50.7142 15.1011C51.37 15.1011 51.9073 15.1922 52.3262 15.3743V18.5164C51.7069 18.2067 51.0148 18.0519 50.2497 18.0519C49.2661 18.0519 48.4374 18.4344 47.7634 19.1995C47.1077 19.9463 46.7798 20.8661 46.7798 21.959V29.0628H43.7743V15.5109Z" fill="#3C4043"/>
+<path d="M54.5272 15.5109H57.3687V17.3142H57.5327C57.9334 16.6585 58.5163 16.1211 59.2813 15.7022C60.0463 15.2832 60.8751 15.0738 61.7676 15.0738C63.4434 15.0738 64.7093 15.5656 65.5654 16.5492C66.4398 17.5328 66.8769 18.8898 66.8769 20.6202V29.0628H63.8715V21.0301C63.8715 18.8989 62.8787 17.8333 60.8933 17.8333C59.8915 17.8333 59.0809 18.2341 58.4616 19.0355C57.8423 19.837 57.5327 20.7842 57.5327 21.8771V29.0628H54.5272V15.5109Z" fill="#3C4043"/>
+<defs>
+<linearGradient id="paint0_linear_1864_2563" x1="73.5" y1="29" x2="149.565" y2="19.9587" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#FF3399"/>
+<stop offset="0.5" stop-color="#9933FF"/>
+<stop offset="0.942708" stop-color="#0066FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/images/background.svg b/src/images/courses/images/background.svg
new file mode 100755
index 00000000000..95f93c80881
--- /dev/null
+++ b/src/images/courses/images/background.svg
@@ -0,0 +1,52 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1864_2018)">
+<circle cx="190.902" cy="-20.2981" r="23.9245" fill="#F4FAF4"/>
+<circle cx="190.902" cy="128.034" r="23.9245" fill="#FAFCFA"/>
+<circle cx="324.879" cy="128.034" r="23.9245" fill="#FFFAFF"/>
+<circle cx="123.913" cy="151.958" r="23.9245" fill="#FFF7FF"/>
+<circle cx="56.9245" cy="-20.2981" r="23.9245" fill="#FAFCFA"/>
+<circle cx="123.913" cy="3.62643" r="23.9245" fill="#FFFAFF"/>
+<circle cx="257.891" cy="3.62643" r="23.9245" fill="#F7FBF7"/>
+<circle cx="257.891" cy="151.958" r="23.9245" fill="#FFF7FF"/>
+<circle cx="326.075" cy="-20.2981" r="23.9245" fill="#FFF7FF"/>
+<circle cx="324.879" cy="51.4755" r="23.9245" fill="#F4FAF4"/>
+<rect x="236.059" y="55.9613" width="43.6623" height="43.6623" stroke="#9933FF" stroke-width="0.598113"/>
+<path d="M241.143 94.2855H270.296L261.416 82.5774L252.851 93.4212L247.194 86.5063L241.143 94.2855Z" fill="#C994FF"/>
+<circle cx="271.498" cy="72.2599" r="3.14009" fill="#C994FF"/>
+<path d="M310.321 -2.69691L341.078 -39.3514M310.321 -2.69691L309.584 -11.1233M310.321 -2.69691L318.748 -3.43412M341.078 -39.3514L332.652 -38.6142M341.078 -39.3514L341.815 -30.925" stroke="#9933FF" stroke-width="0.598113"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M181.93 113.081V135.809V136.408H182.528H205.257V135.809H182.528V113.081H181.93Z" fill="#33CC00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M182.528 118.464L176.547 118.464L176.547 119.062L182.528 119.062V118.464ZM183.725 119.062V118.464L199.276 118.464L199.874 118.464V119.062L199.874 134.613H199.276L199.276 119.062L183.725 119.062ZM199.276 135.809V141.791H199.874V135.809H199.276Z" fill="#33CC00"/>
+<line x1="252.121" y1="17.5343" x2="258.042" y2="11.6133" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="257.619" y1="11.6133" x2="263.54" y2="17.5343" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="257.831" y1="22.8255" x2="257.831" y2="11.8293" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="244.732" y1="1.53304" x2="270.451" y2="1.53304" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="244.732" y1="6.31795" x2="270.451" y2="6.31795" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="129.595" y1="17.383" x2="129.595" y2="9.00941" stroke="#9933FF" stroke-width="0.598113"/>
+<line x1="129.296" y1="9.30849" x2="137.67" y2="9.30849" stroke="#9933FF" stroke-width="0.598113"/>
+<line x1="137.375" y1="17.0866" x2="129.599" y2="9.31111" stroke="#9933FF" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="8.37358" y2="-0.299057" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 117.932 17.383)" stroke="#9933FF" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="8.37358" y2="-0.299057" transform="matrix(-1 1.74846e-07 1.74846e-07 1 118.53 9.60754)" stroke="#9933FF" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="10.9962" y2="-0.299057" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 110.24 16.8751)" stroke="#9933FF" stroke-width="0.598113"/>
+<line x1="42.9339" y1="118.561" x2="42.9339" y2="109.277" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="42.5698" y1="109.641" x2="51.8536" y2="109.641" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="51.5492" y1="118.209" x2="42.9285" y2="109.589" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="9.28376" y2="-0.299057" transform="matrix(1.31134e-07 -1 -1 -1.31134e-07 72.4105 118.561)" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="9.28376" y2="-0.299057" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 73.0736 109.94)" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="12.1914" y2="-0.299057" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 63.8828 117.998)" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="72.7096" y1="130.497" x2="72.7096" y2="139.781" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="73.0736" y1="139.417" x2="63.7899" y2="139.417" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="64.0943" y1="130.849" x2="72.7149" y2="139.47" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="9.28376" y2="-0.299057" transform="matrix(-4.37113e-08 1 1 4.37113e-08 43.2329 130.497)" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="9.28376" y2="-0.299057" transform="matrix(1 0 0 -1 42.5698 139.118)" stroke="#33CC00" stroke-width="0.598113"/>
+<line y1="-0.299057" x2="12.1914" y2="-0.299057" transform="matrix(-0.707107 0.707107 0.707107 0.707107 51.7606 131.061)" stroke="#33CC00" stroke-width="0.598113"/>
+<path d="M314.711 56.3865V61.8734H335.091V56.3865" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="325.2" y1="40.7094" x2="325.2" y2="56.2297" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="325.078" y1="56.4054" x2="330.066" y2="51.417" stroke="#33CC00" stroke-width="0.598113"/>
+<line x1="320.512" y1="51.417" x2="325.501" y2="56.4054" stroke="#33CC00" stroke-width="0.598113"/>
+</g>
+<defs>
+<clipPath id="clip0_1864_2018">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/images/card-decor.png b/src/images/courses/images/card-decor.png
new file mode 100755
index 00000000000..5c78ba3e9f2
Binary files /dev/null and b/src/images/courses/images/card-decor.png differ
diff --git a/src/images/courses/images/card.svg b/src/images/courses/images/card.svg
new file mode 100755
index 00000000000..42b262f0911
--- /dev/null
+++ b/src/images/courses/images/card.svg
@@ -0,0 +1,84 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1847_2112)">
+<rect width="640" height="320" fill="white"/>
+<circle cx="378" cy="3" r="40" fill="#F4FAF4"/>
+<circle cx="378" cy="251" r="40" fill="#FAFCFA"/>
+<circle cx="602" cy="251" r="40" fill="#FFFAFF"/>
+<circle cx="266" cy="291" r="40" fill="#FFF7FF"/>
+<circle cx="154" cy="3" r="40" fill="#FAFCFA"/>
+<circle cx="266" cy="43" r="40" fill="#FFFAFF"/>
+<circle cx="490" cy="43" r="40" fill="#F7FBF7"/>
+<circle cx="490" cy="291" r="40" fill="#FFF7FF"/>
+<circle cx="604" cy="3" r="40" fill="#FFF7FF"/>
+<circle cx="602" cy="123" r="40" fill="#F4FAF4"/>
+<rect x="453.5" y="130.5" width="73" height="73" stroke="#9933FF"/>
+<path d="M462 194.575H510.741L495.895 175L481.575 193.13L472.116 181.569L462 194.575Z" fill="#C994FF"/>
+<circle cx="512.75" cy="157.75" r="5.25" fill="#C994FF"/>
+<path d="M577.66 32.4279L629.083 -28.8557M577.66 32.4279L576.428 18.3396M577.66 32.4279L591.749 31.1953M629.083 -28.8557L614.995 -27.6231M629.083 -28.8557L630.316 -14.7674" stroke="#9933FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M363 226V264V265H364H402V264H364V226H363Z" fill="#33CC00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M364 235L354 235L354 236L364 236V235ZM366 236V235L392 235L393 235V236L393 262H392L392 236L366 236ZM392 264V274H393V264H392Z" fill="#33CC00"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(0.707107 0.707107 0.707107 -0.707107 480.707 20.1924)" stroke="#33CC00"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 489.192 30.0919)" stroke="#33CC00"/>
+<line y1="-0.5" x2="18.3848" y2="-0.5" transform="matrix(0 1 1 0 490.401 11.6995)" stroke="#33CC00"/>
+<line x1="480.354" y1="66.253" x2="490.253" y2="56.3535" stroke="#33CC00"/>
+<line x1="489.546" y1="56.3535" x2="499.445" y2="66.253" stroke="#33CC00"/>
+<line x1="489.901" y1="75.0995" x2="489.901" y2="56.7147" stroke="#33CC00"/>
+<line x1="468" y1="39.5" x2="511" y2="39.5" stroke="#33CC00"/>
+<line x1="468" y1="47.5" x2="511" y2="47.5" stroke="#33CC00"/>
+<line x1="256.5" y1="20" x2="256.5" y2="34" stroke="#9933FF"/>
+<line x1="257" y1="33.5" x2="243" y2="33.5" stroke="#9933FF"/>
+<line x1="243.494" y1="20.4957" x2="256.494" y2="33.4957" stroke="#9933FF"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(4.37115e-08 1 1 -4.37115e-08 276 20)" stroke="#9933FF"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 275 33)" stroke="#9933FF"/>
+<line y1="-0.5" x2="18.3848" y2="-0.5" transform="matrix(-0.707107 0.707107 0.707107 0.707107 288.86 20.8492)" stroke="#9933FF"/>
+<line x1="275.5" y1="66" x2="275.5" y2="52" stroke="#9933FF"/>
+<line x1="275" y1="52.5" x2="289" y2="52.5" stroke="#9933FF"/>
+<line x1="288.506" y1="65.5043" x2="275.506" y2="52.5043" stroke="#9933FF"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 256 66)" stroke="#9933FF"/>
+<line y1="-0.5" x2="14" y2="-0.5" transform="matrix(-1 1.74846e-07 1.74846e-07 1 257 53)" stroke="#9933FF"/>
+<line y1="-0.5" x2="18.3848" y2="-0.5" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 243.14 65.1508)" stroke="#9933FF"/>
+<line x1="130.609" y1="243.522" x2="130.609" y2="228" stroke="#33CC00"/>
+<line x1="130" y1="228.609" x2="145.522" y2="228.609" stroke="#33CC00"/>
+<line x1="145.013" y1="242.934" x2="130.6" y2="228.521" stroke="#33CC00"/>
+<line y1="-0.5" x2="15.5217" y2="-0.5" transform="matrix(1.31134e-07 -1 -1 -1.31134e-07 179.891 243.522)" stroke="#33CC00"/>
+<line y1="-0.5" x2="15.5217" y2="-0.5" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 181 229.109)" stroke="#33CC00"/>
+<line y1="-0.5" x2="20.3831" y2="-0.5" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 165.634 242.58)" stroke="#33CC00"/>
+<line x1="180.391" y1="263.478" x2="180.391" y2="279" stroke="#33CC00"/>
+<line x1="181" y1="278.391" x2="165.478" y2="278.391" stroke="#33CC00"/>
+<line x1="165.987" y1="264.066" x2="180.4" y2="278.479" stroke="#33CC00"/>
+<line y1="-0.5" x2="15.5217" y2="-0.5" transform="matrix(-4.37113e-08 1 1 4.37113e-08 131.109 263.478)" stroke="#33CC00"/>
+<line y1="-0.5" x2="15.5217" y2="-0.5" transform="matrix(1 0 0 -1 130 277.891)" stroke="#33CC00"/>
+<line y1="-0.5" x2="20.3831" y2="-0.5" transform="matrix(-0.707107 0.707107 0.707107 0.707107 145.366 264.42)" stroke="#33CC00"/>
+<rect x="470.5" y="272.5" width="39" height="15" stroke="#9933FF"/>
+<circle cx="478" cy="280" r="2" fill="#9933FF"/>
+<rect x="470.5" y="294.5" width="39" height="15" stroke="#9933FF"/>
+<circle cx="478" cy="302" r="2" fill="#9933FF"/>
+<path d="M585 131.211V140.385H619.074V131.211" stroke="#33CC00"/>
+<line x1="602.537" y1="105" x2="602.537" y2="130.949" stroke="#33CC00"/>
+<line x1="602.332" y1="131.242" x2="610.672" y2="122.902" stroke="#33CC00"/>
+<line x1="594.699" y1="122.902" x2="603.039" y2="131.243" stroke="#33CC00"/>
+<path d="M249 295.211V304.385H283.074V295.211" stroke="#9933FF"/>
+<line x1="266.185" y1="295.597" x2="266.185" y2="269.648" stroke="#9933FF"/>
+<line x1="266.39" y1="269.354" x2="258.05" y2="277.694" stroke="#9933FF"/>
+<line x1="274.023" y1="277.694" x2="265.683" y2="269.354" stroke="#9933FF"/>
+<g style="mix-blend-mode:darken">
+<path d="M169.806 139.978H175.91V179H169.806V139.978ZM183.788 151.968H189.456V155.565H189.783C190.583 154.257 191.745 153.185 193.271 152.349C194.797 151.514 196.396 151.096 198.067 151.096C200.029 151.096 201.737 151.55 203.19 152.458C204.644 153.367 205.716 154.584 206.406 156.11C207.351 154.584 208.604 153.367 210.166 152.458C211.765 151.55 213.582 151.096 215.616 151.096C218.777 151.096 221.175 152.077 222.81 154.039C224.445 155.965 225.263 158.599 225.263 161.941V179H219.268V162.922C219.268 160.67 218.814 159.053 217.905 158.072C217.033 157.091 215.725 156.6 213.981 156.6C212.056 156.6 210.493 157.4 209.294 158.998C208.132 160.561 207.55 162.468 207.55 164.721V179H201.555V162.922C201.555 160.67 201.101 159.053 200.193 158.072C199.285 157.091 197.922 156.6 196.105 156.6C194.216 156.6 192.69 157.4 191.527 158.998C190.365 160.561 189.783 162.468 189.783 164.721V179H183.788V151.968ZM240.36 179.872C238.435 179.872 236.691 179.491 235.128 178.727C233.602 177.928 232.385 176.838 231.477 175.457C230.605 174.04 230.169 172.442 230.169 170.661C230.169 167.827 231.222 165.593 233.33 163.958C235.473 162.323 238.18 161.505 241.45 161.505C244.321 161.505 246.773 161.996 248.808 162.977V161.832C248.808 160.197 248.154 158.853 246.846 157.799C245.574 156.709 244.03 156.164 242.213 156.164C239.452 156.164 237.236 157.291 235.564 159.543L230.986 156.382C232.258 154.675 233.838 153.367 235.728 152.458C237.653 151.55 239.815 151.096 242.213 151.096C246.174 151.096 249.226 152.095 251.369 154.093C253.549 156.055 254.639 158.835 254.639 162.432V179H248.808V175.675H248.481C247.609 176.911 246.501 177.928 245.156 178.727C243.812 179.491 242.213 179.872 240.36 179.872ZM241.341 174.912C242.686 174.912 243.921 174.585 245.047 173.931C246.21 173.241 247.118 172.351 247.772 171.261C248.463 170.135 248.808 168.936 248.808 167.664C246.882 166.61 244.829 166.083 242.649 166.083C240.651 166.083 239.089 166.519 237.962 167.391C236.836 168.263 236.273 169.372 236.273 170.716C236.273 171.951 236.763 172.969 237.744 173.768C238.762 174.531 239.961 174.912 241.341 174.912ZM273.13 191.644C269.751 191.644 266.954 190.845 264.737 189.246C262.557 187.684 261.086 185.849 260.323 183.742L265.991 181.398C266.536 182.888 267.444 184.069 268.716 184.941C269.987 185.813 271.459 186.249 273.13 186.249C275.637 186.249 277.599 185.486 279.016 183.96C280.47 182.434 281.196 180.326 281.196 177.637V175.294H280.869C279.997 176.566 278.798 177.583 277.272 178.346C275.783 179.109 274.075 179.491 272.149 179.491C269.897 179.491 267.789 178.891 265.827 177.692C263.902 176.493 262.339 174.822 261.14 172.678C259.978 170.498 259.396 168.045 259.396 165.32C259.396 162.595 259.978 160.161 261.14 158.017C262.339 155.837 263.902 154.148 265.827 152.949C267.789 151.714 269.897 151.096 272.149 151.096C274.075 151.096 275.783 151.477 277.272 152.24C278.798 153.003 279.997 154.021 280.869 155.292H281.196V151.968H286.919V177.474C286.919 180.453 286.319 183.015 285.12 185.159C283.958 187.302 282.323 188.919 280.215 190.009C278.144 191.099 275.783 191.644 273.13 191.644ZM273.294 174.04C274.711 174.04 276.019 173.695 277.218 173.005C278.417 172.315 279.38 171.315 280.106 170.007C280.833 168.663 281.196 167.101 281.196 165.32C281.196 163.504 280.833 161.941 280.106 160.633C279.38 159.289 278.417 158.272 277.218 157.581C276.019 156.891 274.711 156.546 273.294 156.546C271.877 156.546 270.569 156.909 269.37 157.636C268.171 158.326 267.208 159.344 266.481 160.688C265.755 161.996 265.391 163.54 265.391 165.32C265.391 167.101 265.755 168.663 266.481 170.007C267.208 171.315 268.171 172.315 269.37 173.005C270.569 173.695 271.877 174.04 273.294 174.04ZM306.034 179.872C303.382 179.872 300.984 179.254 298.84 178.019C296.733 176.784 295.08 175.076 293.881 172.896C292.682 170.68 292.082 168.209 292.082 165.484C292.082 162.868 292.645 160.47 293.772 158.29C294.934 156.074 296.551 154.33 298.622 153.058C300.693 151.75 303.055 151.096 305.707 151.096C308.432 151.096 310.794 151.695 312.792 152.894C314.827 154.093 316.371 155.765 317.425 157.908C318.478 160.016 319.005 162.45 319.005 165.211C319.005 165.538 318.987 165.865 318.951 166.192C318.914 166.519 318.896 166.701 318.896 166.737H298.077C298.259 169.208 299.149 171.116 300.748 172.46C302.346 173.804 304.163 174.476 306.198 174.476C309.322 174.476 311.72 173.023 313.392 170.116L318.515 172.569C317.316 174.785 315.644 176.566 313.501 177.91C311.393 179.218 308.904 179.872 306.034 179.872ZM312.901 162.159C312.828 161.287 312.538 160.397 312.029 159.489C311.52 158.581 310.721 157.818 309.631 157.2C308.577 156.546 307.251 156.219 305.653 156.219C303.872 156.219 302.328 156.764 301.02 157.854C299.748 158.944 298.876 160.379 298.404 162.159H312.901ZM334.671 179.872C331.582 179.872 329.021 179.163 326.986 177.746C324.988 176.293 323.571 174.476 322.735 172.296L328.076 170.007C328.694 171.497 329.584 172.623 330.747 173.386C331.946 174.149 333.254 174.531 334.671 174.531C336.16 174.531 337.378 174.258 338.322 173.713C339.267 173.132 339.739 172.387 339.739 171.479C339.739 170.607 339.358 169.898 338.595 169.353C337.832 168.772 336.578 168.263 334.834 167.827L331.128 166.955C329.094 166.483 327.331 165.611 325.842 164.339C324.388 163.031 323.662 161.342 323.662 159.271C323.662 156.764 324.697 154.784 326.768 153.33C328.839 151.841 331.383 151.096 334.398 151.096C336.905 151.096 339.122 151.623 341.047 152.676C343.009 153.73 344.426 155.256 345.298 157.254L340.012 159.489C339.503 158.363 338.722 157.527 337.668 156.982C336.615 156.437 335.47 156.164 334.235 156.164C333.036 156.164 331.982 156.437 331.074 156.982C330.165 157.491 329.711 158.181 329.711 159.053C329.711 159.816 330.02 160.434 330.638 160.906C331.292 161.378 332.309 161.778 333.69 162.105L337.723 163.086C340.448 163.776 342.482 164.83 343.827 166.247C345.171 167.628 345.843 169.299 345.843 171.261C345.843 172.86 345.353 174.313 344.372 175.621C343.427 176.929 342.101 177.964 340.393 178.727C338.722 179.491 336.814 179.872 334.671 179.872ZM351.652 151.804V139.978H357.756V151.804L357.102 166.301H352.251L351.652 151.804ZM354.704 179.327C353.541 179.327 352.542 178.927 351.706 178.128C350.907 177.292 350.507 176.293 350.507 175.13C350.507 173.968 350.907 172.987 351.706 172.188C352.542 171.388 353.541 170.989 354.704 170.989C355.866 170.989 356.847 171.388 357.647 172.188C358.446 172.987 358.846 173.968 358.846 175.13C358.846 176.293 358.446 177.292 357.647 178.128C356.847 178.927 355.866 179.327 354.704 179.327Z" fill="url(#paint0_linear_1847_2112)"/>
+</g>
+<path d="M24 140H30.1202V173.279H46.8962V179.126H24V140Z" fill="#3C4043"/>
+<path d="M63.7596 180C61.1003 180 58.6959 179.381 56.5465 178.142C54.4336 176.903 52.776 175.191 51.5739 173.005C50.3717 170.783 49.7706 168.306 49.7706 165.574C49.7706 162.951 50.3352 160.546 51.4646 158.361C52.6303 156.138 54.2514 154.39 56.328 153.115C58.4045 151.803 60.7724 151.148 63.4318 151.148C66.164 151.148 68.532 151.749 70.5356 152.951C72.5757 154.153 74.1239 155.829 75.1804 157.978C76.2369 160.091 76.7651 162.532 76.7651 165.301C76.7651 165.628 76.7469 165.956 76.7105 166.284C76.674 166.612 76.6558 166.794 76.6558 166.831H55.7815C55.9637 169.308 56.8562 171.22 58.4591 172.568C60.062 173.916 61.8835 174.59 63.9236 174.59C67.0565 174.59 69.4609 173.133 71.1367 170.219L76.2733 172.678C75.0711 174.9 73.3953 176.685 71.246 178.033C69.1331 179.344 66.6376 180 63.7596 180ZM70.6449 162.24C70.572 161.366 70.2806 160.474 69.7706 159.563C69.2606 158.652 68.4591 157.887 67.3662 157.268C66.3097 156.612 64.98 156.284 63.3771 156.284C61.5921 156.284 60.0438 156.831 58.7323 157.923C57.4573 159.016 56.583 160.455 56.1094 162.24H70.6449Z" fill="#3C4043"/>
+<path d="M90.8857 180C88.9549 180 87.2062 179.617 85.6398 178.852C84.1097 178.051 82.8893 176.958 81.9786 175.574C81.1042 174.153 80.6671 172.55 80.6671 170.765C80.6671 167.923 81.7236 165.683 83.8365 164.044C85.9859 162.404 88.6999 161.585 91.9786 161.585C94.8565 161.585 97.3155 162.077 99.3556 163.06V161.913C99.3556 160.273 98.6999 158.925 97.3884 157.869C96.1133 156.776 94.5651 156.23 92.7436 156.23C89.9749 156.23 87.7527 157.359 86.0769 159.617L81.4868 156.448C82.7618 154.736 84.3465 153.424 86.2409 152.514C88.1716 151.603 90.3392 151.148 92.7436 151.148C96.7144 151.148 99.7746 152.149 101.924 154.153C104.11 156.12 105.203 158.907 105.203 162.514V179.126H99.3556V175.792H99.0277C98.1534 177.031 97.0423 178.051 95.6944 178.852C94.3465 179.617 92.7436 180 90.8857 180ZM91.8693 175.027C93.2172 175.027 94.4558 174.699 95.5851 174.044C96.7509 173.352 97.6616 172.459 98.3174 171.366C99.0095 170.237 99.3556 169.035 99.3556 167.76C97.4248 166.703 95.3665 166.175 93.1807 166.175C91.1771 166.175 89.6106 166.612 88.4813 167.486C87.352 168.361 86.7873 169.472 86.7873 170.82C86.7873 172.058 87.2791 173.078 88.2627 173.88C89.2828 174.645 90.4849 175.027 91.8693 175.027Z" fill="#3C4043"/>
+<path d="M111.549 152.022H117.232V156.066H117.56C118.142 154.681 119.199 153.534 120.729 152.623C122.259 151.676 123.826 151.202 125.428 151.202C126.74 151.202 127.815 151.384 128.652 151.749V158.033C127.414 157.413 126.03 157.104 124.499 157.104C122.532 157.104 120.875 157.869 119.527 159.399C118.215 160.893 117.56 162.732 117.56 164.918V179.126H111.549V152.022Z" fill="#3C4043"/>
+<path d="M133.054 152.022H138.737V155.628H139.065C139.867 154.317 141.033 153.242 142.563 152.404C144.093 151.566 145.75 151.148 147.535 151.148C150.887 151.148 153.419 152.131 155.131 154.098C156.88 156.066 157.754 158.78 157.754 162.24V179.126H151.743V163.06C151.743 158.798 149.757 156.667 145.787 156.667C143.783 156.667 142.162 157.468 140.923 159.071C139.685 160.674 139.065 162.568 139.065 164.754V179.126H133.054V152.022Z" fill="#3C4043"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1847_2112" x1="356.5" y1="141" x2="168.178" y2="164.224" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#FF3399"/>
+<stop offset="0.369792" stop-color="#9933FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#3399FF"/>
+</linearGradient>
+<clipPath id="clip0_1847_2112">
+<rect width="640" height="320" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/images/logo.svg b/src/images/courses/images/logo.svg
new file mode 100755
index 00000000000..cacadbab96a
--- /dev/null
+++ b/src/images/courses/images/logo.svg
@@ -0,0 +1,18 @@
+<svg width="170" height="40" viewBox="0 0 170 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M72.9028 9.489H75.9548V29H72.9028V9.489ZM79.8942 15.484H82.7282V17.2825H82.8917C83.2914 16.6285 83.8727 16.0926 84.6357 15.6747C85.3987 15.2569 86.1981 15.048 87.0337 15.048C88.0147 15.048 88.8686 15.2751 89.5952 15.7292C90.3219 16.1834 90.8578 16.792 91.203 17.555C91.6753 16.792 92.3021 16.1834 93.0832 15.7292C93.8826 15.2751 94.7909 15.048 95.8082 15.048C97.3887 15.048 98.5877 15.5385 99.4052 16.5195C100.223 17.4823 100.631 18.7994 100.631 20.4707V29H97.634V20.9612C97.634 19.8349 97.4069 19.0265 96.9527 18.536C96.5167 18.0455 95.8627 17.8002 94.9907 17.8002C94.0279 17.8002 93.2467 18.1999 92.6472 18.9992C92.0659 19.7804 91.7752 20.7342 91.7752 21.8605V29H88.7777V20.9612C88.7777 19.8349 88.5506 19.0265 88.0965 18.536C87.6423 18.0455 86.9611 17.8002 86.0527 17.8002C85.1081 17.8002 84.3451 18.1999 83.7637 18.9992C83.1824 19.7804 82.8917 20.7342 82.8917 21.8605V29H79.8942V15.484ZM108.18 29.436C107.217 29.436 106.345 29.2453 105.564 28.8637C104.801 28.4641 104.193 27.9191 103.738 27.2287C103.302 26.5202 103.084 25.7209 103.084 24.8307C103.084 23.4137 103.611 22.2965 104.665 21.479C105.737 20.6615 107.09 20.2527 108.725 20.2527C110.16 20.2527 111.387 20.498 112.404 20.9885V20.4162C112.404 19.5987 112.077 18.9266 111.423 18.3997C110.787 17.8547 110.015 17.5822 109.107 17.5822C107.726 17.5822 106.618 18.1454 105.782 19.2717L103.493 17.6912C104.129 16.8374 104.919 16.1834 105.864 15.7292C106.827 15.2751 107.908 15.048 109.107 15.048C111.087 15.048 112.613 15.5476 113.685 16.5467C114.775 17.5277 115.32 18.9175 115.32 20.716V29H112.404V27.3377H112.24C111.804 27.9554 111.25 28.4641 110.578 28.8637C109.906 29.2453 109.107 29.436 108.18 29.436ZM108.671 26.9562C109.343 26.9562 109.96 26.7927 110.524 26.4657C111.105 26.1206 111.559 25.6755 111.886 25.1305C112.231 24.5673 112.404 23.9678 112.404 23.332C111.441 22.8052 110.415 22.5417 109.325 22.5417C108.325 22.5417 107.544 22.7597 106.981 23.1957C106.418 23.6317 106.136 24.1858 106.136 24.858C106.136 25.4757 106.382 25.9843 106.872 26.384C107.381 26.7655 107.98 26.9562 108.671 26.9562ZM124.565 35.322C122.876 35.322 121.477 34.9223 120.369 34.123C119.279 33.3418 118.543 32.4244 118.161 31.3708L120.995 30.199C121.268 30.9438 121.722 31.5343 122.358 31.9703C122.994 32.4063 123.729 32.6243 124.565 32.6243C125.819 32.6243 126.8 32.2428 127.508 31.4798C128.235 30.7168 128.598 29.6631 128.598 28.3187V27.147H128.435C127.999 27.7828 127.399 28.2915 126.636 28.673C125.891 29.0545 125.037 29.2453 124.075 29.2453C122.948 29.2453 121.895 28.9455 120.914 28.346C119.951 27.7465 119.17 26.9108 118.57 25.839C117.989 24.749 117.698 23.5227 117.698 22.1602C117.698 20.7977 117.989 19.5806 118.57 18.5087C119.17 17.4187 119.951 16.574 120.914 15.9745C121.895 15.3568 122.948 15.048 124.075 15.048C125.037 15.048 125.891 15.2387 126.636 15.6202C127.399 16.0017 127.999 16.5104 128.435 17.1462H128.598V15.484H131.459V28.237C131.459 29.7267 131.16 31.0074 130.56 32.0793C129.979 33.1511 129.161 33.9595 128.108 34.5045C127.072 35.0495 125.891 35.322 124.565 35.322ZM124.647 26.5202C125.355 26.5202 126.009 26.3477 126.609 26.0025C127.208 25.6573 127.69 25.1577 128.053 24.5037C128.416 23.8316 128.598 23.0504 128.598 22.1602C128.598 21.2519 128.416 20.4707 128.053 19.8167C127.69 19.1446 127.208 18.6359 126.609 18.2907C126.009 17.9456 125.355 17.773 124.647 17.773C123.938 17.773 123.284 17.9547 122.685 18.318C122.085 18.6632 121.604 19.1718 121.241 19.844C120.877 20.498 120.696 21.2701 120.696 22.1602C120.696 23.0504 120.877 23.8316 121.241 24.5037C121.604 25.1577 122.085 25.6573 122.685 26.0025C123.284 26.3477 123.938 26.5202 124.647 26.5202ZM141.017 29.436C139.691 29.436 138.492 29.1272 137.42 28.5095C136.366 27.8918 135.54 27.038 134.94 25.948C134.341 24.8398 134.041 23.6045 134.041 22.242C134.041 20.934 134.323 19.735 134.886 18.645C135.467 17.5368 136.276 16.6648 137.311 16.029C138.347 15.375 139.527 15.048 140.854 15.048C142.216 15.048 143.397 15.3477 144.396 15.9472C145.413 16.5467 146.185 17.3824 146.712 18.4542C147.239 19.5079 147.503 20.7251 147.503 22.1057C147.503 22.2692 147.493 22.4327 147.475 22.5962C147.457 22.7597 147.448 22.8506 147.448 22.8687H137.039C137.129 24.1041 137.574 25.0578 138.374 25.73C139.173 26.4022 140.081 26.7382 141.099 26.7382C142.661 26.7382 143.86 26.0116 144.696 24.5582L147.257 25.7845C146.658 26.8927 145.822 27.7828 144.75 28.455C143.697 29.109 142.452 29.436 141.017 29.436ZM144.451 20.5797C144.414 20.1437 144.269 19.6987 144.015 19.2445C143.76 18.7903 143.361 18.4088 142.816 18.1C142.289 17.773 141.626 17.6095 140.826 17.6095C139.936 17.6095 139.164 17.882 138.51 18.427C137.874 18.972 137.438 19.6896 137.202 20.5797H144.451ZM155.335 29.436C153.791 29.436 152.51 29.0818 151.493 28.3732C150.494 27.6466 149.785 26.7382 149.368 25.6482L152.038 24.5037C152.347 25.2486 152.792 25.8117 153.373 26.1932C153.973 26.5747 154.627 26.7655 155.335 26.7655C156.08 26.7655 156.689 26.6292 157.161 26.3567C157.633 26.0661 157.87 25.6937 157.87 25.2395C157.87 24.8035 157.679 24.4492 157.297 24.1767C156.916 23.8861 156.289 23.6317 155.417 23.4137L153.564 22.9777C152.547 22.7416 151.666 22.3056 150.921 21.6697C150.194 21.0157 149.831 20.171 149.831 19.1355C149.831 17.882 150.349 16.8919 151.384 16.1652C152.42 15.4204 153.691 15.048 155.199 15.048C156.453 15.048 157.561 15.3114 158.524 15.8382C159.505 16.3651 160.213 17.1281 160.649 18.1272L158.006 19.2445C157.752 18.6813 157.361 18.2635 156.834 17.991C156.307 17.7185 155.735 17.5822 155.117 17.5822C154.518 17.5822 153.991 17.7185 153.537 17.991C153.083 18.2453 152.856 18.5905 152.856 19.0265C152.856 19.408 153.01 19.7168 153.319 19.953C153.646 20.1892 154.155 20.389 154.845 20.5525L156.861 21.043C158.224 21.3882 159.241 21.915 159.913 22.6235C160.586 23.3138 160.922 24.1495 160.922 25.1305C160.922 25.9298 160.676 26.6565 160.186 27.3105C159.714 27.9645 159.05 28.4822 158.197 28.8637C157.361 29.2453 156.407 29.436 155.335 29.436ZM163.826 15.4022V9.489H166.878V15.4022L166.551 22.6507H164.126L163.826 15.4022ZM165.352 29.1635C164.771 29.1635 164.271 28.9637 163.853 28.564C163.453 28.1462 163.254 27.6466 163.254 27.0652C163.254 26.4839 163.453 25.9934 163.853 25.5937C164.271 25.1941 164.771 24.9942 165.352 24.9942C165.933 24.9942 166.424 25.1941 166.823 25.5937C167.223 25.9934 167.423 26.4839 167.423 27.0652C167.423 27.6466 167.223 28.1462 166.823 28.564C166.424 28.9637 165.933 29.1635 165.352 29.1635Z" fill="url(#paint0_linear_1864_2555)"/>
+</g>
+<path d="M0 9.5H3.06011V26.1393H11.4481V29.0628H0L0 9.5Z" fill="#3C4043"/>
+<path d="M19.8798 29.5C18.5501 29.5 17.3479 29.1904 16.2733 28.571C15.2168 27.9517 14.388 27.0956 13.7869 26.0027C13.1858 24.8916 12.8853 23.653 12.8853 22.2869C12.8853 20.9754 13.1676 19.7732 13.7323 18.6803C14.3152 17.5692 15.1257 16.6949 16.164 16.0574C17.2022 15.4016 18.3862 15.0738 19.7159 15.0738C21.082 15.0738 22.266 15.3743 23.2678 15.9754C24.2878 16.5765 25.062 17.4144 25.5902 18.4891C26.1184 19.5455 26.3826 20.7659 26.3826 22.1503C26.3826 22.3142 26.3735 22.4781 26.3552 22.6421C26.337 22.806 26.3279 22.8971 26.3279 22.9153H15.8908C15.9818 24.1539 16.4281 25.1102 17.2296 25.7842C18.031 26.4581 18.9418 26.7951 19.9618 26.7951C21.5283 26.7951 22.7305 26.0665 23.5684 24.6093L26.1367 25.8388C25.5356 26.9499 24.6977 27.8424 23.623 28.5164C22.5665 29.1721 21.3188 29.5 19.8798 29.5ZM23.3224 20.6202C23.286 20.1831 23.1403 19.7368 22.8853 19.2814C22.6303 18.826 22.2296 18.4435 21.6831 18.1339C21.1549 17.806 20.49 17.6421 19.6886 17.6421C18.796 17.6421 18.0219 17.9153 17.3662 18.4618C16.7286 19.0082 16.2915 19.7277 16.0547 20.6202H23.3224Z" fill="#3C4043"/>
+<path d="M33.4428 29.5C32.4774 29.5 31.6031 29.3087 30.8199 28.9262C30.0549 28.5255 29.4447 27.9791 28.9893 27.2869C28.5521 26.5765 28.3335 25.775 28.3335 24.8825C28.3335 23.4618 28.8618 22.3415 29.9182 21.5219C30.9929 20.7022 32.3499 20.2924 33.9893 20.2924C35.4283 20.2924 36.6578 20.5383 37.6778 21.0301V20.4563C37.6778 19.6366 37.3499 18.9627 36.6942 18.4344C36.0567 17.888 35.2825 17.6148 34.3718 17.6148C32.9875 17.6148 31.8764 18.1794 31.0385 19.3087L28.7434 17.724C29.3809 16.8679 30.1733 16.2122 31.1204 15.7568C32.0858 15.3015 33.1696 15.0738 34.3718 15.0738C36.3572 15.0738 37.8873 15.5747 38.962 16.5765C40.0549 17.5601 40.6013 18.9536 40.6013 20.7568V29.0628H37.6778V27.3962H37.5139C37.0767 28.0155 36.5212 28.5255 35.8472 28.9262C35.1733 29.3087 34.3718 29.5 33.4428 29.5ZM33.9346 27.0137C34.6086 27.0137 35.2279 26.8497 35.7926 26.5219C36.3754 26.1758 36.8308 25.7295 37.1587 25.1831C37.5048 24.6184 37.6778 24.0173 37.6778 23.3798C36.7124 22.8516 35.6833 22.5874 34.5904 22.5874C33.5886 22.5874 32.8053 22.806 32.2407 23.2432C31.676 23.6803 31.3937 24.2359 31.3937 24.9098C31.3937 25.5291 31.6396 26.0392 32.1314 26.4399C32.6414 26.8224 33.2425 27.0137 33.9346 27.0137Z" fill="#3C4043"/>
+<path d="M43.7743 15.5109H46.6159V17.5328H46.7798C47.0712 16.8406 47.5995 16.2669 48.3645 15.8115C49.1295 15.3379 49.9128 15.1011 50.7142 15.1011C51.37 15.1011 51.9073 15.1922 52.3263 15.3743V18.5164C51.7069 18.2067 51.0148 18.0519 50.2498 18.0519C49.2661 18.0519 48.4374 18.4344 47.7634 19.1995C47.1077 19.9463 46.7798 20.8661 46.7798 21.959V29.0628H43.7743V15.5109Z" fill="#3C4043"/>
+<path d="M54.5272 15.5109H57.3687V17.3142H57.5327C57.9334 16.6585 58.5163 16.1211 59.2813 15.7022C60.0463 15.2832 60.8751 15.0738 61.7676 15.0738C63.4434 15.0738 64.7094 15.5656 65.5655 16.5492C66.4398 17.5328 66.8769 18.8898 66.8769 20.6202V29.0628H63.8715V21.0301C63.8715 18.8989 62.8788 17.8333 60.8933 17.8333C59.8915 17.8333 59.0809 18.2341 58.4616 19.0355C57.8423 19.837 57.5327 20.7842 57.5327 21.8771V29.0628H54.5272V15.5109Z" fill="#3C4043"/>
+<defs>
+<linearGradient id="paint0_linear_1864_2555" x1="166.735" y1="10" x2="72.1101" y2="21.7283" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#FF3399"/>
+<stop offset="0.369792" stop-color="#9933FF"/>
+<stop offset="0.625" stop-color="#0066FF"/>
+<stop offset="0.869792" stop-color="#3399FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/privacy/background.svg b/src/images/courses/privacy/background.svg
new file mode 100644
index 00000000000..4446612f667
--- /dev/null
+++ b/src/images/courses/privacy/background.svg
@@ -0,0 +1,22 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_820_4945)">
+<rect width="360" height="144" fill="white"/>
+<g clip-path="url(#clip1_820_4945)">
+<path d="M164.652 186.117C183.799 186.739 204.456 185.306 225.737 181.554C277.275 172.466 320.725 151.846 345.521 127.532M164.652 186.117C106.726 184.234 62.6315 163.541 56.9553 131.35C49.4029 88.5179 112.724 41.5511 198.388 26.4464C284.051 11.3416 359.617 33.8187 367.17 76.6504C370.178 93.7134 361.939 111.433 345.521 127.532M164.652 186.117C195.245 235.341 235.214 263.182 265.931 252.002C306.8 237.126 315.814 158.805 286.063 77.0659C282.77 68.0189 279.141 59.3092 275.234 50.9931M164.652 186.117C159.045 177.096 153.754 167.356 148.891 157.007M148.891 157.007C144.984 148.691 141.354 139.981 138.062 130.934C108.311 49.1951 117.325 -29.1263 158.194 -44.0016C194.54 -57.2304 243.84 -15.8256 275.234 50.9931M148.891 157.007C156.403 162.299 164.35 167.386 172.687 172.199C248.018 215.692 326.715 220.416 348.461 182.75C357.124 167.745 355.443 148.277 345.521 127.532M148.891 157.007C88.539 114.488 56.3241 58.7466 75.6634 25.25C97.4096 -12.4156 176.106 -7.69193 251.437 35.8005C259.775 40.6143 267.722 45.7013 275.234 50.9931M275.234 50.9931C308.551 74.4657 333.293 101.968 345.521 127.532M369.562 104C369.562 190.985 299.047 261.5 212.062 261.5C125.078 261.5 54.5625 190.985 54.5625 104C54.5625 17.0152 125.078 -53.5 212.062 -53.5C299.047 -53.5 369.562 17.0152 369.562 104ZM291.612 183.55C230.104 245.057 144.627 259.303 100.693 215.369C56.7593 171.435 71.0055 85.9581 132.513 24.4505C194.021 -37.0571 279.498 -51.3033 323.432 -7.36932C367.366 36.5647 353.12 122.042 291.612 183.55Z" stroke="#AAEEFF" stroke-opacity="0.54"/>
+<ellipse cx="212.062" cy="104" rx="157.5" ry="157.5" stroke="#66CCFF" stroke-opacity="0.54"/>
+<ellipse cx="212.062" cy="104" rx="112.5" ry="157.5" transform="rotate(45 212.062 104)" stroke="#66CCFF" stroke-opacity="0.54"/>
+<ellipse cx="148.5" cy="156.875" rx="15.75" ry="15.75" fill="#33CC00"/>
+<rect x="43.875" y="9.5" width="63" height="31.5" rx="15.75" fill="#DDEEDD"/>
+<path d="M329.771 111.785L314.021 127.535L329.771 143.285H361.271L377.021 127.535L361.271 111.785H329.771Z" fill="#DDEEDD"/>
+<path d="M275.062 28.0625L257.062 34.8125V48.515C257.062 59.8775 264.735 70.475 275.062 73.0625C285.39 70.475 293.062 59.8775 293.062 48.515V34.8125L275.062 28.0625Z" fill="#33CC00"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_820_4945">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1_820_4945">
+<rect width="360" height="360" fill="white" transform="translate(0 -76)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/privacy/card.svg b/src/images/courses/privacy/card.svg
new file mode 100644
index 00000000000..9e78237703c
--- /dev/null
+++ b/src/images/courses/privacy/card.svg
@@ -0,0 +1,83 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_820_4942)">
+<rect width="640" height="320" fill="white"/>
+<g clip-path="url(#clip1_820_4942)">
+<path d="M292.715 305.985C326.753 307.092 363.478 304.544 401.311 297.873C492.933 281.718 570.178 245.06 614.259 201.835M292.715 305.985C189.736 302.639 111.345 265.85 101.254 208.621C87.8274 132.476 200.399 48.9798 352.689 22.1269C504.98 -4.72603 639.32 35.2333 652.746 111.378C658.095 141.713 643.448 173.214 614.259 201.835M292.715 305.985C347.103 393.495 418.158 442.989 472.765 423.114C545.422 396.669 561.447 257.431 508.557 112.117C502.703 96.0336 496.25 80.5497 489.304 65.7656M292.715 305.985C282.747 289.948 273.34 272.633 264.696 254.234M264.696 254.234C257.75 239.45 251.297 223.966 245.443 207.883C192.553 62.569 208.577 -76.669 281.234 -103.114C345.849 -126.632 433.494 -53.0233 489.304 65.7656M264.696 254.234C278.049 263.642 292.177 272.686 307 281.244C440.922 358.563 580.827 366.961 619.487 300C634.888 273.325 631.898 238.714 614.259 201.835M264.696 254.234C157.403 178.645 100.132 79.5496 134.513 20C173.173 -46.961 313.078 -38.5634 447 38.7564C461.823 47.3144 475.951 56.3579 489.304 65.7656M489.304 65.7656C548.535 107.495 592.521 156.387 614.259 201.835M657 160C657 314.64 531.64 440 377 440C222.36 440 97 314.64 97 160C97 5.36028 222.36 -120 377 -120C531.64 -120 657 5.36028 657 160ZM518.421 301.421C409.075 410.768 257.115 436.095 179.01 357.99C100.905 279.885 126.232 127.925 235.579 18.5786C344.926 -90.7682 496.885 -116.095 574.99 -37.9899C653.095 40.115 627.768 192.075 518.421 301.421Z" stroke="#AAEEFF" stroke-opacity="0.54"/>
+<circle cx="377" cy="160" r="280" stroke="#66CCFF" stroke-opacity="0.54"/>
+<ellipse cx="376.999" cy="160" rx="200" ry="280" transform="rotate(45 376.999 160)" stroke="#66CCFF" stroke-opacity="0.54"/>
+<circle cx="264" cy="254" r="28" fill="#33CC00"/>
+<rect x="78" y="-8" width="112" height="56" rx="28" fill="#DDEEDD"/>
+<path d="M586.26 173.84L558.26 201.84L586.26 229.84H642.26L670.26 201.84L642.26 173.84H586.26Z" fill="#DDEEDD"/>
+<path d="M489 25L457 37V61.36C457 81.56 470.64 100.4 489 105C507.36 100.4 521 81.56 521 61.36V37L489 25Z" fill="#33CC00"/>
+</g>
+<path d="M24 140H30.1202V173.279H46.8962V179.126H24V140Z" fill="#3C4043"/>
+<path d="M63.7596 180C61.1003 180 58.6959 179.381 56.5465 178.142C54.4336 176.903 52.776 175.191 51.5739 173.005C50.3717 170.783 49.7706 168.306 49.7706 165.574C49.7706 162.951 50.3352 160.546 51.4646 158.361C52.6303 156.138 54.2514 154.39 56.328 153.115C58.4045 151.803 60.7724 151.148 63.4318 151.148C66.164 151.148 68.532 151.749 70.5356 152.951C72.5757 154.153 74.1239 155.829 75.1804 157.978C76.2369 160.091 76.7651 162.532 76.7651 165.301C76.7651 165.628 76.7469 165.956 76.7105 166.284C76.674 166.612 76.6558 166.794 76.6558 166.831H55.7815C55.9637 169.308 56.8562 171.22 58.4591 172.568C60.062 173.916 61.8835 174.59 63.9236 174.59C67.0565 174.59 69.4609 173.133 71.1367 170.219L76.2733 172.678C75.0711 174.9 73.3953 176.685 71.246 178.033C69.1331 179.344 66.6376 180 63.7596 180ZM70.6449 162.24C70.572 161.366 70.2806 160.474 69.7706 159.563C69.2606 158.652 68.4591 157.887 67.3662 157.268C66.3097 156.612 64.98 156.284 63.3771 156.284C61.5921 156.284 60.0438 156.831 58.7323 157.923C57.4573 159.016 56.583 160.455 56.1094 162.24H70.6449Z" fill="#3C4043"/>
+<path d="M90.8857 180C88.9549 180 87.2062 179.617 85.6398 178.852C84.1097 178.051 82.8893 176.958 81.9786 175.574C81.1042 174.153 80.6671 172.55 80.6671 170.765C80.6671 167.923 81.7236 165.683 83.8365 164.044C85.9859 162.404 88.6999 161.585 91.9786 161.585C94.8565 161.585 97.3155 162.077 99.3556 163.06V161.913C99.3556 160.273 98.6999 158.925 97.3884 157.869C96.1133 156.776 94.5651 156.23 92.7436 156.23C89.9749 156.23 87.7527 157.359 86.0769 159.617L81.4868 156.448C82.7618 154.736 84.3465 153.424 86.2409 152.514C88.1716 151.603 90.3392 151.148 92.7436 151.148C96.7144 151.148 99.7746 152.149 101.924 154.153C104.11 156.12 105.203 158.907 105.203 162.514V179.126H99.3556V175.792H99.0277C98.1534 177.031 97.0423 178.051 95.6944 178.852C94.3465 179.617 92.7436 180 90.8857 180ZM91.8693 175.027C93.2172 175.027 94.4558 174.699 95.5851 174.044C96.7509 173.352 97.6616 172.459 98.3174 171.366C99.0095 170.237 99.3556 169.035 99.3556 167.76C97.4248 166.703 95.3665 166.175 93.1807 166.175C91.1771 166.175 89.6106 166.612 88.4813 167.486C87.352 168.361 86.7873 169.472 86.7873 170.82C86.7873 172.058 87.2791 173.078 88.2627 173.88C89.2828 174.645 90.4849 175.027 91.8693 175.027Z" fill="#3C4043"/>
+<path d="M111.549 152.022H117.232V156.066H117.56C118.142 154.681 119.199 153.534 120.729 152.623C122.259 151.676 123.826 151.202 125.428 151.202C126.74 151.202 127.815 151.384 128.652 151.749V158.033C127.414 157.413 126.03 157.104 124.499 157.104C122.532 157.104 120.875 157.869 119.527 159.399C118.215 160.893 117.56 162.732 117.56 164.918V179.126H111.549V152.022Z" fill="#3C4043"/>
+<path d="M133.054 152.022H138.737V155.628H139.065C139.867 154.317 141.033 153.242 142.563 152.404C144.093 151.566 145.75 151.148 147.535 151.148C150.887 151.148 153.419 152.131 155.131 154.098C156.88 156.066 157.754 158.78 157.754 162.24V179.126H151.743V163.06C151.743 158.798 149.757 156.667 145.787 156.667C143.783 156.667 142.162 157.468 140.923 159.071C139.685 160.674 139.065 162.568 139.065 164.754V179.126H133.054V152.022Z" fill="#3C4043"/>
+<path d="M169.754 178.968V140.216H183.068C185.413 140.216 187.542 140.721 189.455 141.731C191.367 142.741 192.882 144.131 194.001 145.899C195.155 147.667 195.733 149.723 195.733 152.069C195.733 154.414 195.155 156.489 194.001 158.293C192.882 160.061 191.367 161.45 189.455 162.46C187.542 163.434 185.413 163.921 183.068 163.921H175.707V178.968H169.754ZM183.23 145.844H175.707V158.293H183.23C184.638 158.293 185.828 158.004 186.803 157.427C187.777 156.813 188.516 156.038 189.022 155.099C189.563 154.125 189.833 153.115 189.833 152.069C189.833 151.022 189.563 150.03 189.022 149.092C188.516 148.154 187.777 147.378 186.803 146.765C185.828 146.151 184.638 145.844 183.23 145.844Z" fill="url(#paint0_linear_820_4942)"/>
+<path d="M200.862 178.968V151.365H206.383V155.424H206.707C207.321 154.017 208.367 152.862 209.847 151.96C211.362 151.022 212.986 150.553 214.718 150.553C215.475 150.553 216.107 150.607 216.612 150.716C217.153 150.824 217.64 150.95 218.073 151.094V157.156C217.388 156.867 216.684 156.633 215.962 156.453C215.277 156.272 214.555 156.182 213.797 156.182C212.426 156.182 211.2 156.561 210.117 157.318C209.071 158.04 208.241 159.032 207.627 160.295C207.014 161.522 206.707 162.875 206.707 164.354V178.968H200.862Z" fill="url(#paint1_linear_820_4942)"/>
+<path d="M225.941 147.306C224.858 147.306 223.92 146.927 223.126 146.169C222.369 145.375 221.99 144.437 221.99 143.355C221.99 142.272 222.369 141.352 223.126 140.595C223.92 139.837 224.858 139.458 225.941 139.458C227.023 139.458 227.943 139.837 228.701 140.595C229.495 141.352 229.892 142.272 229.892 143.355C229.892 144.437 229.495 145.375 228.701 146.169C227.943 146.927 227.023 147.306 225.941 147.306ZM223.018 178.968V151.365H228.863V178.968H223.018Z" fill="url(#paint2_linear_820_4942)"/>
+<path d="M244.505 178.968L233.085 151.365H239.58L247.319 171.444H247.59L255.492 151.365H261.878L250.35 178.968H244.505Z" fill="url(#paint3_linear_820_4942)"/>
+<path d="M273.792 179.833C271.808 179.833 270.04 179.455 268.488 178.697C266.937 177.903 265.728 176.803 264.862 175.395C263.996 173.988 263.563 172.383 263.563 170.579C263.563 168.63 264.068 166.97 265.079 165.599C266.125 164.192 267.514 163.128 269.246 162.406C270.978 161.684 272.89 161.324 274.983 161.324C276.715 161.324 278.23 161.486 279.529 161.811C280.864 162.135 281.875 162.478 282.56 162.839V161.378C282.56 159.574 281.911 158.13 280.612 157.048C279.313 155.965 277.635 155.424 275.578 155.424C274.171 155.424 272.836 155.749 271.573 156.398C270.31 157.012 269.3 157.86 268.542 158.942L264.537 155.857C265.728 154.197 267.298 152.898 269.246 151.96C271.231 150.986 273.395 150.499 275.741 150.499C279.746 150.499 282.831 151.491 284.996 153.476C287.161 155.424 288.243 158.166 288.243 161.702V178.968H282.56V175.558H282.236C281.514 176.676 280.431 177.669 278.988 178.535C277.545 179.401 275.813 179.833 273.792 179.833ZM274.821 175.071C276.336 175.071 277.671 174.71 278.826 173.988C279.98 173.267 280.882 172.328 281.532 171.174C282.217 169.983 282.56 168.702 282.56 167.331C281.73 166.862 280.756 166.483 279.638 166.195C278.519 165.87 277.328 165.707 276.066 165.707C273.684 165.707 271.988 166.195 270.978 167.169C269.968 168.107 269.463 169.262 269.463 170.633C269.463 171.932 269.95 172.996 270.924 173.826C271.898 174.656 273.197 175.071 274.821 175.071Z" fill="url(#paint4_linear_820_4942)"/>
+<path d="M307.187 179.833C304.409 179.833 301.955 179.202 299.826 177.939C297.697 176.676 296.02 174.944 294.793 172.743C293.566 170.506 292.953 167.981 292.953 165.166C292.953 162.352 293.566 159.844 294.793 157.643C296.02 155.406 297.697 153.656 299.826 152.393C301.955 151.13 304.409 150.499 307.187 150.499C310.254 150.499 312.834 151.185 314.926 152.556C317.055 153.927 318.571 155.785 319.473 158.13L314.169 160.295C312.906 157.337 310.542 155.857 307.079 155.857C305.563 155.857 304.174 156.254 302.911 157.048C301.648 157.806 300.638 158.888 299.88 160.295C299.123 161.666 298.744 163.29 298.744 165.166C298.744 167.043 299.123 168.684 299.88 170.091C300.638 171.499 301.648 172.581 302.911 173.339C304.174 174.096 305.563 174.475 307.079 174.475C308.847 174.475 310.344 174.078 311.571 173.285C312.798 172.455 313.754 171.336 314.439 169.929L319.635 172.202C318.661 174.403 317.109 176.225 314.981 177.669C312.852 179.112 310.254 179.833 307.187 179.833Z" fill="url(#paint5_linear_820_4942)"/>
+<path d="M334.064 189.305C333.956 189.594 333.829 189.864 333.685 190.117C333.577 190.369 333.505 190.55 333.468 190.658H327.244C327.425 190.261 327.677 189.684 328.002 188.926C328.363 188.204 328.706 187.501 329.03 186.815C329.355 186.13 329.698 185.354 330.059 184.488C330.456 183.622 330.853 182.774 331.249 181.944L333.306 177.452L321.778 151.365H328.273L336.175 170.2H336.445L344.077 151.365H350.517L336.229 184.272C335.832 185.21 335.399 186.184 334.93 187.194C334.497 188.241 334.208 188.944 334.064 189.305Z" fill="url(#paint6_linear_820_4942)"/>
+<path d="M355.702 166.628L355.161 152.393V140.216H361.006V152.393L360.411 166.628H355.702ZM358.084 179.292C356.929 179.292 355.955 178.895 355.161 178.102C354.367 177.308 353.97 176.352 353.97 175.233C353.97 174.115 354.367 173.158 355.161 172.365C355.955 171.571 356.929 171.174 358.084 171.174C359.202 171.174 360.158 171.571 360.952 172.365C361.746 173.158 362.143 174.115 362.143 175.233C362.143 176.352 361.746 177.308 360.952 178.102C360.158 178.895 359.202 179.292 358.084 179.292Z" fill="url(#paint7_linear_820_4942)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint1_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint2_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint3_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint4_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint5_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint6_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint7_linear_820_4942" x1="169.754" y1="190.658" x2="360.902" y2="135.183" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<clipPath id="clip0_820_4942">
+<rect width="640" height="320" fill="white"/>
+</clipPath>
+<clipPath id="clip1_820_4942">
+<rect width="640" height="640" fill="white" transform="translate(0 -160)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/privacy/logo.svg b/src/images/courses/privacy/logo.svg
new file mode 100644
index 00000000000..8f2a4c6626c
--- /dev/null
+++ b/src/images/courses/privacy/logo.svg
@@ -0,0 +1,65 @@
+<svg width="172" height="40" viewBox="0 0 172 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H3.06011V26.6393H11.4481V29.5628H0L0 10Z" fill="#3C4043"/>
+<path d="M19.8798 30C18.5501 30 17.3479 29.6903 16.2733 29.071C15.2168 28.4517 14.388 27.5956 13.7869 26.5027C13.1858 25.3916 12.8853 24.153 12.8853 22.7869C12.8853 21.4754 13.1676 20.2732 13.7323 19.1803C14.3152 18.0692 15.1257 17.1949 16.164 16.5574C17.2022 15.9016 18.3862 15.5738 19.7159 15.5738C21.082 15.5738 22.266 15.8743 23.2678 16.4754C24.2878 17.0765 25.062 17.9144 25.5902 18.9891C26.1184 20.0455 26.3826 21.2659 26.3826 22.6503C26.3826 22.8142 26.3734 22.9781 26.3552 23.1421C26.337 23.306 26.3279 23.3971 26.3279 23.4153H15.8908C15.9818 24.6539 16.4281 25.6102 17.2295 26.2842C18.031 26.9581 18.9418 27.2951 19.9618 27.2951C21.5283 27.2951 22.7305 26.5665 23.5683 25.1093L26.1367 26.3388C25.5356 27.4499 24.6977 28.3424 23.623 29.0164C22.5665 29.6721 21.3188 30 19.8798 30ZM23.3224 21.1202C23.286 20.6831 23.1403 20.2368 22.8853 19.7814C22.6303 19.326 22.2295 18.9435 21.6831 18.6339C21.1549 18.306 20.49 18.1421 19.6886 18.1421C18.796 18.1421 18.0219 18.4153 17.3662 18.9617C16.7286 19.5082 16.2915 20.2277 16.0547 21.1202H23.3224Z" fill="#3C4043"/>
+<path d="M33.4428 30C32.4774 30 31.6031 29.8087 30.8199 29.4262C30.0549 29.0255 29.4447 28.4791 28.9893 27.7869C28.5521 27.0765 28.3335 26.275 28.3335 25.3825C28.3335 23.9617 28.8618 22.8415 29.9182 22.0219C30.9929 21.2022 32.3499 20.7924 33.9893 20.7924C35.4283 20.7924 36.6578 21.0383 37.6778 21.5301V20.9563C37.6778 20.1366 37.3499 19.4627 36.6942 18.9344C36.0567 18.388 35.2825 18.1148 34.3718 18.1148C32.9875 18.1148 31.8763 18.6794 31.0385 19.8087L28.7434 18.224C29.3809 17.3679 30.1733 16.7122 31.1204 16.2568C32.0858 15.8015 33.1696 15.5738 34.3718 15.5738C36.3572 15.5738 37.8873 16.0747 38.962 17.0765C40.0549 18.0601 40.6013 19.4536 40.6013 21.2568V29.5628H37.6778V27.8962H37.5139C37.0767 28.5155 36.5212 29.0255 35.8472 29.4262C35.1733 29.8087 34.3718 30 33.4428 30ZM33.9346 27.5137C34.6086 27.5137 35.2279 27.3497 35.7926 27.0219C36.3754 26.6758 36.8308 26.2295 37.1587 25.6831C37.5048 25.1184 37.6778 24.5173 37.6778 23.8798C36.7124 23.3515 35.6833 23.0874 34.5904 23.0874C33.5886 23.0874 32.8053 23.306 32.2406 23.7432C31.676 24.1803 31.3937 24.7359 31.3937 25.4098C31.3937 26.0291 31.6396 26.5392 32.1314 26.9399C32.6414 27.3224 33.2425 27.5137 33.9346 27.5137Z" fill="#3C4043"/>
+<path d="M43.7743 16.0109H46.6159V18.0328H46.7798C47.0712 17.3406 47.5995 16.7668 48.3645 16.3115C49.1295 15.8379 49.9128 15.6011 50.7142 15.6011C51.37 15.6011 51.9073 15.6922 52.3262 15.8743V19.0164C51.7069 18.7067 51.0148 18.5519 50.2497 18.5519C49.2661 18.5519 48.4374 18.9344 47.7634 19.6995C47.1077 20.4463 46.7798 21.3661 46.7798 22.459V29.5628H43.7743V16.0109Z" fill="#3C4043"/>
+<path d="M54.5272 16.0109H57.3687V17.8142H57.5327C57.9334 17.1585 58.5163 16.6211 59.2813 16.2022C60.0463 15.7832 60.8751 15.5738 61.7676 15.5738C63.4434 15.5738 64.7093 16.0656 65.5654 17.0492C66.4398 18.0328 66.8769 19.3898 66.8769 21.1202V29.5628H63.8715V21.5301C63.8715 19.3989 62.8787 18.3333 60.8933 18.3333C59.8915 18.3333 59.0809 18.7341 58.4616 19.5355C57.8423 20.337 57.5327 21.2842 57.5327 22.3771V29.5628H54.5272V16.0109Z" fill="#3C4043"/>
+<path d="M74.8769 29.7548V10.3789H81.534C82.7066 10.3789 83.771 10.6314 84.7272 11.1366C85.6834 11.6417 86.4411 12.3363 87.0004 13.2203C87.5777 14.1043 87.8663 15.1326 87.8663 16.3053C87.8663 17.4779 87.5777 18.5153 87.0004 19.4173C86.4411 20.3013 85.6834 20.9959 84.7272 21.5011C83.771 21.9882 82.7066 22.2317 81.534 22.2317H77.8536V29.7548H74.8769ZM81.6152 13.1932H77.8536V19.4173H81.6152C82.3188 19.4173 82.9141 19.273 83.4012 18.9844C83.8883 18.6777 84.2581 18.2898 84.5107 17.8207C84.7813 17.3336 84.9166 16.8285 84.9166 16.3053C84.9166 15.7821 84.7813 15.286 84.5107 14.8169C84.2581 14.3479 83.8883 13.96 83.4012 13.6533C82.9141 13.3466 82.3188 13.1932 81.6152 13.1932Z" fill="url(#paint0_linear_820_5287)"/>
+<path d="M90.431 29.7548V15.9535H93.1913V17.9831H93.3536C93.6603 17.2795 94.1835 16.7022 94.9232 16.2512C95.6809 15.7821 96.4928 15.5476 97.3587 15.5476C97.7376 15.5476 98.0533 15.5746 98.3059 15.6288C98.5765 15.6829 98.82 15.746 99.0365 15.8182V18.849C98.6937 18.7047 98.3419 18.5875 97.9811 18.4973C97.6383 18.407 97.2775 18.3619 96.8987 18.3619C96.2131 18.3619 95.5997 18.5514 95.0585 18.9302C94.5353 19.291 94.1204 19.7872 93.8137 20.4186C93.507 21.032 93.3536 21.7085 93.3536 22.4482V29.7548H90.431Z" fill="url(#paint1_linear_820_5287)"/>
+<path d="M102.97 13.9239C102.429 13.9239 101.96 13.7345 101.563 13.3556C101.184 12.9587 100.995 12.4896 100.995 11.9484C100.995 11.4072 101.184 10.9471 101.563 10.5683C101.96 10.1894 102.429 10 102.97 10C103.512 10 103.972 10.1894 104.35 10.5683C104.747 10.9471 104.946 11.4072 104.946 11.9484C104.946 12.4896 104.747 12.9587 104.35 13.3556C103.972 13.7345 103.512 13.9239 102.97 13.9239ZM101.509 29.7548V15.9535H104.432V29.7548H101.509Z" fill="url(#paint2_linear_820_5287)"/>
+<path d="M112.252 29.7548L106.542 15.9535H109.79L113.66 25.9932H113.795L117.746 15.9535H120.939L115.175 29.7548H112.252Z" fill="url(#paint3_linear_820_5287)"/>
+<path d="M126.896 30.1877C125.904 30.1877 125.02 29.9983 124.244 29.6194C123.468 29.2226 122.864 28.6723 122.431 27.9687C121.998 27.2651 121.782 26.4623 121.782 25.5603C121.782 24.586 122.034 23.7562 122.539 23.0706C123.062 22.367 123.757 21.8348 124.623 21.474C125.489 21.1132 126.445 20.9328 127.491 20.9328C128.357 20.9328 129.115 21.014 129.765 21.1763C130.432 21.3387 130.937 21.5101 131.28 21.6905V20.9598C131.28 20.0578 130.955 19.3362 130.306 18.7949C129.656 18.2537 128.817 17.9831 127.789 17.9831C127.086 17.9831 126.418 18.1455 125.787 18.4702C125.155 18.7769 124.65 19.2008 124.271 19.7421L122.269 18.1996C122.864 17.3697 123.649 16.7202 124.623 16.2512C125.615 15.7641 126.698 15.5205 127.87 15.5205C129.873 15.5205 131.415 16.0166 132.498 17.0089C133.58 17.9831 134.121 19.3542 134.121 21.1222V29.7548H131.28V28.0499H131.118C130.757 28.6092 130.216 29.1053 129.494 29.5383C128.772 29.9712 127.906 30.1877 126.896 30.1877ZM127.41 27.8063C128.168 27.8063 128.836 27.6259 129.413 27.2651C129.99 26.9043 130.441 26.4352 130.766 25.8579C131.109 25.2626 131.28 24.6221 131.28 23.9366C130.865 23.702 130.378 23.5126 129.819 23.3683C129.259 23.2059 128.664 23.1247 128.033 23.1247C126.842 23.1247 125.994 23.3683 125.489 23.8554C124.984 24.3245 124.731 24.9018 124.731 25.5873C124.731 26.2368 124.975 26.769 125.462 27.1839C125.949 27.5989 126.598 27.8063 127.41 27.8063Z" fill="url(#paint4_linear_820_5287)"/>
+<path d="M143.593 30.1877C142.204 30.1877 140.977 29.872 139.913 29.2406C138.849 28.6092 138.01 27.7432 137.396 26.6427C136.783 25.5242 136.476 24.2613 136.476 22.8541C136.476 21.4469 136.783 20.1931 137.396 19.0926C138.01 17.9741 138.849 17.0991 139.913 16.4677C140.977 15.8362 142.204 15.5205 143.593 15.5205C145.127 15.5205 146.417 15.8633 147.463 16.5488C148.528 17.2344 149.285 18.1635 149.736 19.3362L147.084 20.4186C146.453 18.9393 145.271 18.1996 143.539 18.1996C142.782 18.1996 142.087 18.398 141.456 18.7949C140.824 19.1738 140.319 19.715 139.94 20.4186C139.561 21.1042 139.372 21.916 139.372 22.8541C139.372 23.7922 139.561 24.6131 139.94 25.3167C140.319 26.0203 140.824 26.5615 141.456 26.9404C142.087 27.3192 142.782 27.5087 143.539 27.5087C144.423 27.5087 145.172 27.3102 145.785 26.9133C146.399 26.4984 146.877 25.9391 147.22 25.2355L149.817 26.3721C149.33 27.4726 148.555 28.3836 147.49 29.1053C146.426 29.8269 145.127 30.1877 143.593 30.1877Z" fill="url(#paint5_linear_820_5287)"/>
+<path d="M157.032 34.9235C156.978 35.0678 156.915 35.2031 156.842 35.3294C156.788 35.4557 156.752 35.5459 156.734 35.6H153.622C153.712 35.4016 153.839 35.1129 154.001 34.734C154.181 34.3732 154.353 34.0214 154.515 33.6786C154.678 33.3359 154.849 32.948 155.029 32.515C155.228 32.082 155.426 31.6581 155.625 31.2431L156.653 28.997L150.889 15.9535H154.136L158.087 25.3708H158.223L162.038 15.9535H165.258L158.114 32.4068C157.916 32.8758 157.699 33.3629 157.465 33.8681C157.248 34.3913 157.104 34.7431 157.032 34.9235Z" fill="url(#paint6_linear_820_5287)"/>
+<path d="M167.851 23.5848L167.58 16.4677V10.3789H170.503V16.4677L170.205 23.5848H167.851ZM169.042 29.9171C168.464 29.9171 167.977 29.7187 167.58 29.3218C167.184 28.9249 166.985 28.4468 166.985 27.8875C166.985 27.3283 167.184 26.8502 167.58 26.4533C167.977 26.0564 168.464 25.8579 169.042 25.8579C169.601 25.8579 170.079 26.0564 170.476 26.4533C170.873 26.8502 171.071 27.3283 171.071 27.8875C171.071 28.4468 170.873 28.9249 170.476 29.3218C170.079 29.7187 169.601 29.9171 169.042 29.9171Z" fill="url(#paint7_linear_820_5287)"/>
+<defs>
+<linearGradient id="paint0_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint1_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint2_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint3_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint4_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint5_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint6_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+<linearGradient id="paint7_linear_820_5287" x1="74.8769" y1="35.6" x2="170.451" y2="7.86249" gradientUnits="userSpaceOnUse">
+<stop offset="0.0677083" stop-color="#9933FF"/>
+<stop offset="0.34375" stop-color="#0066FF"/>
+<stop offset="0.619792" stop-color="#3399FF"/>
+<stop offset="0.911458" stop-color="#33CC00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/courses/pwa/background.svg b/src/images/courses/pwa/background.svg
new file mode 100644
index 00000000000..345d698beac
--- /dev/null
+++ b/src/images/courses/pwa/background.svg
@@ -0,0 +1,39 @@
+<svg width="360" height="144" viewBox="0 0 360 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_815:569)">
+<g clip-path="url(#clip1_815:569)">
+<circle cx="212.625" cy="25.25" r="22.5" fill="#FFDDFF" fill-opacity="0.16"/>
+<circle cx="212.625" cy="164.75" r="22.5" fill="#FFDDFF" fill-opacity="0.24"/>
+<ellipse cx="338.625" cy="164.75" rx="22.5" ry="22.5" fill="#DDEEDD" fill-opacity="0.16"/>
+<circle cx="86.625" cy="25.25" r="22.5" fill="#FFDDFF" fill-opacity="0.24"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.4284 17.6606L89.0348 18.5568C88.2489 18.4371 87.4441 18.375 86.6248 18.375C82.2411 18.375 78.2723 20.1519 75.3995 23.0247L74.6924 22.3176C77.7462 19.2638 81.9649 17.375 86.6248 17.375C87.5879 17.375 88.5321 17.4557 89.4511 17.6106C89.4434 17.6271 89.4358 17.6437 89.4284 17.6606ZM86.6248 21.875C86.9402 21.875 87.2528 21.8868 87.5622 21.91L87.1335 22.8862C86.9648 22.8788 86.7953 22.875 86.6248 22.875C83.4837 22.875 80.6399 24.1482 78.5815 26.2067L77.8744 25.4996C80.1138 23.2601 83.2075 21.875 86.6248 21.875ZM91.8381 23.0234L91.6529 24.0438C92.775 24.5976 93.7926 25.3311 94.6681 26.2067L95.3753 25.4996C94.3564 24.4807 93.1607 23.6386 91.8381 23.0234ZM81.0563 28.6815C82.2472 27.4907 83.8176 26.6795 85.5705 26.445L85.0862 27.5478C83.8054 27.8406 82.6609 28.4912 81.7634 29.3886L81.0563 28.6815ZM90.99 27.6946L90.7926 28.7819C91.0372 28.9686 91.2689 29.1714 91.4862 29.3886L92.1933 28.6815C91.8263 28.3146 91.4233 27.9837 90.99 27.6946ZM92.6338 18.6406L92.4797 19.4896C94.5088 20.2951 96.3324 21.507 97.8501 23.0247L98.5572 22.3176C96.896 20.6564 94.8901 19.3399 92.656 18.4847C92.6508 18.5358 92.6434 18.5878 92.6338 18.6406ZM87.8202 32.928C87.6184 33.5882 86.9195 33.9597 86.2594 33.7579C85.5992 33.556 85.2276 32.8572 85.4294 32.197L85.5768 31.7152L89.8786 21.9199L87.9675 32.4461L87.8202 32.928ZM88.963 21.5178L84.6376 31.3668L84.4731 31.9047C84.1098 33.093 84.7786 34.3509 85.967 34.7142C87.1553 35.0775 88.4132 34.4087 88.7765 33.2203L88.941 32.6824L90.8625 22.0985C91.0743 20.9319 89.4398 20.4322 88.963 21.5178Z" fill="#9933FF"/>
+<circle cx="86.625" cy="164.75" r="22.5" fill="#FFDDFF" fill-opacity="0.32"/>
+<circle cx="149.625" cy="47.75" r="22.5" fill="#DDEEDD" fill-opacity="0.32"/>
+<path d="M144.625 41C144.625 41.9614 143.836 42.75 142.875 42.75C141.914 42.75 141.125 41.9614 141.125 41C141.125 40.0386 141.914 39.25 142.875 39.25C143.836 39.25 144.625 40.0386 144.625 41ZM151.375 54.5C151.375 55.4614 150.586 56.25 149.625 56.25C148.664 56.25 147.875 55.4614 147.875 54.5C147.875 53.5386 148.664 52.75 149.625 52.75C150.586 52.75 151.375 53.5386 151.375 54.5ZM144.625 54.5C144.625 55.4614 143.836 56.25 142.875 56.25C141.914 56.25 141.125 55.4614 141.125 54.5C141.125 53.5386 141.914 52.75 142.875 52.75C143.836 52.75 144.625 53.5386 144.625 54.5ZM144.625 47.75C144.625 48.7114 143.836 49.5 142.875 49.5C141.914 49.5 141.125 48.7114 141.125 47.75C141.125 46.7886 141.914 46 142.875 46C143.836 46 144.625 46.7886 144.625 47.75ZM151.375 47.75C151.375 48.7114 150.586 49.5 149.625 49.5C148.664 49.5 147.875 48.7114 147.875 47.75C147.875 46.7886 148.664 46 149.625 46C150.586 46 151.375 46.7886 151.375 47.75ZM156.375 42.75C155.414 42.75 154.625 41.9614 154.625 41C154.625 40.0386 155.414 39.25 156.375 39.25C157.336 39.25 158.125 40.0386 158.125 41C158.125 41.9614 157.336 42.75 156.375 42.75ZM151.375 41C151.375 41.9614 150.586 42.75 149.625 42.75C148.664 42.75 147.875 41.9614 147.875 41C147.875 40.0386 148.664 39.25 149.625 39.25C150.586 39.25 151.375 40.0386 151.375 41ZM158.125 47.75C158.125 48.7114 157.336 49.5 156.375 49.5C155.414 49.5 154.625 48.7114 154.625 47.75C154.625 46.7886 155.414 46 156.375 46C157.336 46 158.125 46.7886 158.125 47.75ZM158.125 54.5C158.125 55.4614 157.336 56.25 156.375 56.25C155.414 56.25 154.625 55.4614 154.625 54.5C154.625 53.5386 155.414 52.75 156.375 52.75C157.336 52.75 158.125 53.5386 158.125 54.5Z" stroke="#33CC00"/>
+<circle cx="275.625" cy="47.75" r="22.5" fill="#FFDDFF" fill-opacity="0.24"/>
+<path d="M274.667 37.7162C274.667 37.0445 275.212 36.5 275.883 36.5C276.555 36.5 277.099 37.0445 277.099 37.7162" stroke="#9933FF"/>
+<path d="M273.528 55.9594C273.478 56.1538 273.451 56.3576 273.451 56.5676C273.451 57.9109 274.54 59 275.884 59C277.227 59 278.316 57.9109 278.316 56.5676C278.316 56.3576 278.289 56.1538 278.239 55.9594" stroke="#9933FF"/>
+<path d="M268.586 45.0135C268.586 40.9833 271.853 37.7162 275.883 37.7162V37.7162C279.914 37.7162 283.181 40.9833 283.181 45.0135V51.175C283.181 51.4374 283.273 51.6915 283.441 51.893L286.829 55.9595H264.938L268.326 51.893C268.494 51.6915 268.586 51.4374 268.586 51.175V45.0135Z" stroke="#9933FF" stroke-linecap="round" stroke-linejoin="round"/>
+<ellipse cx="338.625" cy="25.25" rx="22.5" ry="22.5" fill="#DDEEDD" fill-opacity="0.32"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M333.875 13.875H343.375C343.927 13.875 344.375 14.3227 344.375 14.875V16.25H332.875V14.875C332.875 14.3227 333.323 13.875 333.875 13.875ZM332.875 17.25V33.25H344.375V17.25H332.875ZM344.375 34.25H332.875V35.625C332.875 36.1773 333.323 36.625 333.875 36.625H343.375C343.927 36.625 344.375 36.1773 344.375 35.625V34.25ZM331.875 34.25V33.25V17.25V16.25V14.875C331.875 13.7704 332.77 12.875 333.875 12.875H343.375C344.48 12.875 345.375 13.7704 345.375 14.875V16.25V17.25V33.25V34.25V35.625C345.375 36.7296 344.48 37.625 343.375 37.625H333.875C332.77 37.625 331.875 36.7296 331.875 35.625V34.25Z" fill="#33CC00"/>
+<circle cx="275.625" cy="115.25" r="22.5" fill="#DDEEDD" fill-opacity="0.24"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M267.5 107.25H283.75C284.302 107.25 284.75 107.698 284.75 108.25V120C284.75 120.552 284.302 121 283.75 121H267.5C266.948 121 266.5 120.552 266.5 120V108.25C266.5 107.698 266.948 107.25 267.5 107.25ZM265.5 108.25C265.5 107.145 266.395 106.25 267.5 106.25H283.75C284.855 106.25 285.75 107.145 285.75 108.25V120C285.75 121.105 284.855 122 283.75 122H267.5C266.395 122 265.5 121.105 265.5 120V108.25ZM288 123.125H263.25V124.25H288V123.125Z" fill="#33CC00"/>
+<ellipse cx="338.625" cy="92.75" rx="22.5" ry="22.5" fill="#FFDDFF" fill-opacity="0.24"/>
+<g clip-path="url(#clip2_815:569)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M338.625 82.625H329.5C328.948 82.625 328.5 83.0727 328.5 83.625V98.5C328.5 99.0523 328.948 99.5 329.5 99.5H333.562H338.625H343.687H347.75C348.302 99.5 348.75 99.0523 348.75 98.5V93.875H347.75V98.5H343.687H338.625H333.562H329.5V83.625H338.625V82.625Z" fill="#9933FF"/>
+<path d="M334.125 98.9375L332.438 100.625V102.312H344.812V100.625L343.125 98.9375" stroke="#9933FF"/>
+<path d="M343.687 82.625V93.875M343.687 93.875L348.75 88.8125M343.687 93.875L338.625 88.8125" stroke="#9933FF"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_815:569">
+<rect width="360" height="144" fill="white"/>
+</clipPath>
+<clipPath id="clip1_815:569">
+<rect width="360" height="360" fill="white" transform="translate(0 -76)"/>
+</clipPath>
+<clipPath id="clip2_815:569">
+<rect width="22.5" height="22.5" fill="white" transform="translate(327.375 81.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/courses/pwa/card-decor.svg b/src/images/courses/pwa/card-decor.svg
new file mode 100644
index 00000000000..4fc55fbda7d
--- /dev/null
+++ b/src/images/courses/pwa/card-decor.svg
@@ -0,0 +1,13 @@
+<svg width="346" height="314" viewBox="0 0 346 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="129.463" cy="75.5499" r="36.5499" fill="#FEDFC8"/>
+<circle cx="267.438" cy="198.906" r="9.13746" fill="#CEEAD6"/>
+<path d="M38.4248 90.5411L60.2044 108.816L33.4878 118.54L38.4248 90.5411Z" fill="#CEEAD6"/>
+<path d="M268.458 65.8148L268.458 100.721L238.229 83.2679L268.458 65.8148Z" fill="#D2E3FC"/>
+<path d="M198.352 147.736L198.352 166.728L181.905 157.232L198.352 147.736Z" fill="#FDCFE8"/>
+<rect width="29.2399" height="29.2399" transform="matrix(0.965926 -0.258818 0.25882 0.965926 281.7 143.894)" fill="#E9D2FD"/>
+<rect x="152.211" y="215.285" width="73.0997" height="54.8248" fill="#CEEAD6"/>
+<mask id="path-8-inside-1_1123:677" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M170.581 80.1186C170.581 100.305 154.217 116.668 134.032 116.668C113.846 116.668 97.4817 100.305 97.4817 80.1186C97.4817 59.9327 113.846 43.5687 134.032 43.5687C154.217 43.5687 170.581 59.9327 170.581 80.1186ZM42.705 94.8541L64.9827 113.547L37.655 123.494L42.705 94.8541ZM273.348 105.611L273.348 70.7048L243.119 88.1579L273.348 105.611ZM203.242 171.618L186.795 162.122L203.242 152.626V171.618ZM314.834 141.216L286.59 148.784L294.158 177.027L322.401 169.46L314.834 141.216ZM157.101 220.175H230.201V275H157.101V220.175ZM271.094 211.698C276.14 211.698 280.231 207.607 280.231 202.561C280.231 197.514 276.14 193.423 271.094 193.423C266.047 193.423 261.956 197.514 261.956 202.561C261.956 207.607 266.047 211.698 271.094 211.698Z"/>
+</mask>
+<path d="M64.9827 113.547L65.3247 114.487L66.9523 113.895L65.6255 112.781L64.9827 113.547ZM42.705 94.8541L43.3478 94.088L42.0209 92.9747L41.7202 94.6804L42.705 94.8541ZM37.655 123.494L36.6702 123.32L36.3695 125.026L37.997 124.433L37.655 123.494ZM273.348 70.7048L274.348 70.7048V68.9728L272.848 69.8388L273.348 70.7048ZM273.348 105.611L272.848 106.477L274.348 107.343V105.611H273.348ZM243.119 88.1579L242.619 87.2919L241.119 88.1579L242.619 89.0239L243.119 88.1579ZM186.795 162.122L186.295 161.256L184.795 162.122L186.295 162.988L186.795 162.122ZM203.242 171.618L202.742 172.484L204.242 173.35V171.618H203.242ZM203.242 152.626H204.242V150.894L202.742 151.76L203.242 152.626ZM286.59 148.784L286.331 147.818L285.365 148.077L285.624 149.043L286.59 148.784ZM314.834 141.216L315.799 140.957L315.541 139.991L314.575 140.25L314.834 141.216ZM294.158 177.027L293.192 177.286L293.451 178.252L294.417 177.993L294.158 177.027ZM322.401 169.46L322.66 170.425L323.626 170.167L323.367 169.201L322.401 169.46ZM230.201 220.175H231.201V219.175H230.201V220.175ZM157.101 220.175V219.175H156.101V220.175H157.101ZM230.201 275V276H231.201V275H230.201ZM157.101 275H156.101V276H157.101V275ZM134.032 117.668C154.77 117.668 171.581 100.857 171.581 80.1186H169.581C169.581 99.7522 153.665 115.668 134.032 115.668V117.668ZM96.4817 80.1186C96.4817 100.857 113.293 117.668 134.032 117.668V115.668C114.398 115.668 98.4817 99.7522 98.4817 80.1186H96.4817ZM134.032 42.5687C113.293 42.5687 96.4817 59.3804 96.4817 80.1186H98.4817C98.4817 60.4849 114.398 44.5687 134.032 44.5687V42.5687ZM171.581 80.1186C171.581 59.3804 154.77 42.5687 134.032 42.5687V44.5687C153.665 44.5687 169.581 60.4849 169.581 80.1186H171.581ZM65.6255 112.781L43.3478 94.088L42.0622 95.6201L64.3399 114.313L65.6255 112.781ZM37.997 124.433L65.3247 114.487L64.6406 112.608L37.313 122.554L37.997 124.433ZM41.7202 94.6804L36.6702 123.32L38.6398 123.667L43.6898 95.0277L41.7202 94.6804ZM272.348 70.7048L272.348 105.611H274.348L274.348 70.7048L272.348 70.7048ZM243.619 89.0239L273.848 71.5709L272.848 69.8388L242.619 87.2919L243.619 89.0239ZM273.848 104.745L243.619 87.2919L242.619 89.0239L272.848 106.477L273.848 104.745ZM186.295 162.988L202.742 172.484L203.742 170.752L187.295 161.256L186.295 162.988ZM202.742 151.76L186.295 161.256L187.295 162.988L203.742 153.492L202.742 151.76ZM204.242 171.618V152.626H202.242V171.618H204.242ZM286.849 149.75L315.092 142.182L314.575 140.25L286.331 147.818L286.849 149.75ZM295.124 176.769L287.556 148.525L285.624 149.043L293.192 177.286L295.124 176.769ZM322.143 168.494L293.899 176.062L294.417 177.993L322.66 170.425L322.143 168.494ZM313.868 141.475L321.435 169.718L323.367 169.201L315.799 140.957L313.868 141.475ZM230.201 219.175H157.101V221.175H230.201V219.175ZM231.201 275V220.175H229.201V275H231.201ZM157.101 276H230.201V274H157.101V276ZM156.101 220.175V275H158.101V220.175H156.101ZM279.231 202.561C279.231 207.055 275.588 210.698 271.094 210.698V212.698C276.693 212.698 281.231 208.159 281.231 202.561H279.231ZM271.094 194.423C275.588 194.423 279.231 198.066 279.231 202.561H281.231C281.231 196.962 276.693 192.423 271.094 192.423V194.423ZM262.956 202.561C262.956 198.066 266.6 194.423 271.094 194.423V192.423C265.495 192.423 260.956 196.962 260.956 202.561H262.956ZM271.094 210.698C266.6 210.698 262.956 207.055 262.956 202.561H260.956C260.956 208.159 265.495 212.698 271.094 212.698V210.698Z" fill="#80868B" mask="url(#path-8-inside-1_1123:677)"/>
+</svg>
diff --git a/src/images/courses/pwa/card.svg b/src/images/courses/pwa/card.svg
new file mode 100644
index 00000000000..2d00c7bfecd
--- /dev/null
+++ b/src/images/courses/pwa/card.svg
@@ -0,0 +1,66 @@
+<svg width="640" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="M0 0h640v320H0z"/>
+    <g clip-path="url(#b)">
+      <circle cx="378" cy="20" r="40" fill="#FDF" fill-opacity=".16"/>
+      <circle cx="378" cy="268" r="40" fill="#FDF" fill-opacity=".24"/>
+      <circle cx="602" cy="268" r="40" fill="#DED" fill-opacity=".16"/>
+      <circle cx="266" cy="308" r="40" fill="#DED" fill-opacity=".16"/>
+      <circle cx="154" cy="20" r="40" fill="#FDF" fill-opacity=".24"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="m158.984 6.508-.793 1.804A28.217 28.217 0 0 0 154 8c-7.732 0-14.732 3.134-19.799 8.201l-1.414-1.414C138.216 9.357 145.716 6 154 6a30.2 30.2 0 0 1 5.024.419 2.55 2.55 0 0 0-.04.089ZM154 14c.56 0 1.116.021 1.666.062l-.858 1.954a19.936 19.936 0 0 0-14.95 5.842l-1.415-1.414A21.934 21.934 0 0 1 154 14Zm9.268 2.042-.371 2.041c1.951.97 3.72 2.25 5.245 3.775l1.414-1.414a22.047 22.047 0 0 0-6.288-4.402ZM144.1 26.1a13.962 13.962 0 0 1 8.025-3.976l-.973 2.216a11.978 11.978 0 0 0-5.637 3.175L144.1 26.1Zm17.66-1.754-.396 2.179c.394.307.769.637 1.121.99l1.414-1.415a14.06 14.06 0 0 0-2.139-1.754Zm2.922-16.096-.314 1.732a28.04 28.04 0 0 1 9.431 6.219l1.414-1.414a30.023 30.023 0 0 0-10.491-6.814c-.01.09-.023.183-.04.277Zm-8.77 25.335a2 2 0 1 1-3.825-1.17l.258-.844 6.883-15.672-3.057 16.842-.259.844Zm4.903-26.273-10.348 23.562-.292.957a4 4 0 1 0 7.65 2.338l.292-.956 4.597-25.32c.212-1.167-1.422-1.667-1.899-.581Z" fill="#93F"/>
+      <circle cx="154" cy="268" r="40" fill="#FDF" fill-opacity=".32"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M168.969 282A17.906 17.906 0 0 0 172 272a17.92 17.92 0 0 0-3.637-10.851l1.163-1.758A19.921 19.921 0 0 1 174 272c0 4.502-1.488 8.657-3.999 12h-32.002A19.912 19.912 0 0 1 134 272c0-11.046 8.954-20 20-20 4.78 0 9.168 1.677 12.609 4.474l-1.758 1.163A17.92 17.92 0 0 0 154 254c-9.941 0-18 8.059-18 18 0 3.703 1.116 7.14 3.031 10h29.938Zm-13.427-8.726a2 2 0 1 1-2.816-2.816l8.326-5.51-5.51 8.326Zm8.333-12.592-12.328 8.158a3.997 3.997 0 0 0-.375 5.988 3.997 3.997 0 0 0 5.988-.375l8.158-12.328 2.824-4.267-4.267 2.824Z" fill="#93F"/>
+      <circle cx="266" cy="60" r="40" fill="#DED" fill-opacity=".32"/>
+      <path d="M257 48c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm12 24c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm-12 0c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm0-12c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm12 0c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm9-9c-1.648 0-3-1.352-3-3s1.352-3 3-3 3 1.352 3 3-1.352 3-3 3Zm-9-3c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm12 12c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Zm0 12c0 1.648-1.352 3-3 3s-3-1.352-3-3 1.352-3 3-3 3 1.352 3 3Z" stroke="#3C0" stroke-width="2"/>
+      <circle cx="490" cy="60" r="40" fill="#FDF" fill-opacity=".24"/>
+      <path d="M488.297 42.162a2.162 2.162 0 0 1 4.325 0m-6.351 32.433a4.324 4.324 0 1 0 8.377 0" stroke="#93F" stroke-width="2"/>
+      <path d="M477.486 55.135c0-7.165 5.809-12.973 12.973-12.973v0c7.165 0 12.973 5.808 12.973 12.973V66.09c0 .466.164.918.463 1.276l6.024 7.23H471l6.024-7.23a1.99 1.99 0 0 0 .462-1.276V55.135Z" stroke="#93F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <circle cx="490" cy="308" r="40" fill="#DED" fill-opacity=".32"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M474 290h16v2h-16v32h32v-16h2v16a2 2 0 0 1-2 2h-32a2 2 0 0 1-2-2v-32a2 2 0 0 1 2-2Zm33 0h-13v2h10.586l-22.293 22.293 1.414 1.414L506 293.414V304h2v-14h-1Z" fill="#3C0"/>
+      <circle cx="602" cy="20" r="40" fill="#DED" fill-opacity=".32"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M592 0h20v4h-20V0Zm0 6v28h20V6h-20Zm20 30h-20v4h20v-4Zm-22 0V0a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v40a2 2 0 0 1-2 2h-20a2 2 0 0 1-2-2v-4Z" fill="#3C0"/>
+      <circle cx="490" cy="180" r="40" fill="#DED" fill-opacity=".24"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M474 166h32v24h-32v-24Zm-2 0a2 2 0 0 1 2-2h32a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2h-32a2 2 0 0 1-2-2v-24Zm40 28h-44v2h44v-2Z" fill="#3C0"/>
+      <circle cx="602" cy="140" r="40" fill="#FDF" fill-opacity=".24"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M602 122h-16a2 2 0 0 0-2 2v26a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2v-8h-2v8h-32v-26h16v-2Z" fill="#93F"/>
+      <path d="m594 151-3 3v3h22v-3l-3-3m1-29v20m0 0 9-9m-9 9-9-9" stroke="#93F" stroke-width="2"/>
+    </g>
+    <path d="M24 140h6.12v33.279h16.776v5.847H24V140Zm39.76 40c-2.66 0-5.064-.619-7.213-1.858-2.113-1.239-3.771-2.951-4.973-5.137-1.202-2.222-1.803-4.699-1.803-7.431 0-2.623.564-5.028 1.694-7.213 1.165-2.223 2.786-3.971 4.863-5.246 2.076-1.312 4.444-1.967 7.104-1.967 2.732 0 5.1.601 7.104 1.803 2.04 1.202 3.588 2.878 4.644 5.027 1.057 2.113 1.585 4.554 1.585 7.323 0 .327-.018.655-.055.983-.036.328-.054.51-.054.547H55.78c.183 2.477 1.075 4.389 2.678 5.737 1.603 1.348 3.424 2.022 5.465 2.022 3.133 0 5.537-1.457 7.213-4.371l5.136 2.459a14.196 14.196 0 0 1-5.027 5.355C69.133 179.344 66.638 180 63.76 180Zm6.885-17.76c-.073-.874-.364-1.766-.874-2.677s-1.312-1.676-2.405-2.295c-1.056-.656-2.386-.984-3.989-.984-1.785 0-3.333.547-4.645 1.639-1.275 1.093-2.149 2.532-2.623 4.317h14.536ZM90.886 180c-1.931 0-3.68-.383-5.246-1.148-1.53-.801-2.75-1.894-3.661-3.278-.875-1.421-1.312-3.024-1.312-4.809 0-2.842 1.057-5.082 3.17-6.721 2.149-1.64 4.863-2.459 8.142-2.459 2.877 0 5.337.492 7.377 1.475v-1.147c0-1.64-.656-2.988-1.968-4.044-1.275-1.093-2.823-1.639-4.644-1.639-2.77 0-4.991 1.129-6.667 3.387l-4.59-3.169a12.722 12.722 0 0 1 4.754-3.934c1.93-.911 4.098-1.366 6.503-1.366 3.97 0 7.03 1.001 9.18 3.005 2.186 1.967 3.279 4.754 3.279 8.361v16.612h-5.847v-3.334h-.328a10.735 10.735 0 0 1-3.334 3.06c-1.347.765-2.95 1.148-4.808 1.148Zm.983-4.973a7.275 7.275 0 0 0 3.716-.983c1.166-.692 2.077-1.585 2.732-2.678.693-1.129 1.039-2.331 1.039-3.606a12.664 12.664 0 0 0-6.175-1.585c-2.004 0-3.57.437-4.7 1.311-1.129.875-1.694 1.986-1.694 3.334 0 1.238.492 2.258 1.476 3.06 1.02.765 2.222 1.147 3.606 1.147Zm19.68-23.005h5.683v4.044h.328c.582-1.385 1.639-2.532 3.169-3.443 1.53-.947 3.097-1.421 4.699-1.421 1.312 0 2.387.182 3.224.547v6.284c-1.238-.62-2.622-.929-4.153-.929-1.967 0-3.624.765-4.972 2.295-1.312 1.494-1.967 3.333-1.967 5.519v14.208h-6.011v-27.104Zm21.505 0h5.683v3.606h.328c.802-1.311 1.968-2.386 3.498-3.224 1.53-.838 3.187-1.256 4.972-1.256 3.352 0 5.884.983 7.596 2.95 1.749 1.968 2.623 4.682 2.623 8.142v16.886h-6.011V163.06c0-4.262-1.986-6.393-5.956-6.393-2.004 0-3.625.801-4.864 2.404-1.238 1.603-1.858 3.497-1.858 5.683v14.372h-6.011v-27.104Z" fill="#3C4043"/>
+    <path d="M169.754 179.668V140h13.629c2.4 0 4.58.517 6.537 1.551 1.958 1.034 3.509 2.456 4.654 4.266 1.182 1.81 1.773 3.915 1.773 6.316s-.591 4.524-1.773 6.371c-1.145 1.81-2.696 3.232-4.654 4.266-1.957.997-4.137 1.496-6.537 1.496h-7.535v15.402h-6.094Zm13.795-33.906h-7.701v12.742h7.701c1.44 0 2.659-.295 3.656-.886.998-.628 1.755-1.422 2.272-2.383.554-.997.831-2.031.831-3.102a6.004 6.004 0 0 0-.831-3.047c-.517-.96-1.274-1.755-2.272-2.382-.997-.628-2.216-.942-3.656-.942Z" fill="url(#c)"/>
+    <path d="M209.686 179.668 199.049 140h6.759l6.316 25.762.664 3.435h.333l.831-3.435L221.93 140h6.094l7.645 25.762.831 3.379h.333l.665-3.379L243.813 140h6.704l-10.471 39.668h-6.427l-7.59-26.316-.886-3.712h-.332l-.942 3.712-7.923 26.316h-6.26Z" fill="url(#d)"/>
+    <path d="M249.849 179.668 264.808 140h6.925l15.014 39.668h-6.704l-3.656-10.194h-16.178l-3.656 10.194h-6.704Zm16.787-27.978-4.377 12.133h12.078l-4.377-12.133-1.496-4.543h-.332l-1.496 4.543Z" fill="url(#e)"/>
+    <path d="m292.414 167.036-.554-14.571V140h5.983v12.465l-.609 14.571h-4.82ZM294.851 180c-1.182 0-2.179-.406-2.991-1.219-.813-.812-1.219-1.791-1.219-2.936s.406-2.124 1.219-2.936c.812-.813 1.809-1.219 2.991-1.219 1.145 0 2.124.406 2.937 1.219.812.812 1.218 1.791 1.218 2.936s-.406 2.124-1.218 2.936c-.813.813-1.792 1.219-2.937 1.219Z" fill="url(#f)"/>
+  </g>
+  <defs>
+    <linearGradient id="c" x1="169.754" y1="180" x2="300.825" y2="147.288" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3C0"/>
+      <stop offset=".13" stop-color="#39F"/>
+      <stop offset=".385" stop-color="#06F"/>
+      <stop offset=".703" stop-color="#93F"/>
+    </linearGradient>
+    <linearGradient id="d" x1="169.754" y1="180" x2="300.825" y2="147.288" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3C0"/>
+      <stop offset=".13" stop-color="#39F"/>
+      <stop offset=".385" stop-color="#06F"/>
+      <stop offset=".703" stop-color="#93F"/>
+    </linearGradient>
+    <linearGradient id="e" x1="169.754" y1="180" x2="300.825" y2="147.288" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3C0"/>
+      <stop offset=".13" stop-color="#39F"/>
+      <stop offset=".385" stop-color="#06F"/>
+      <stop offset=".703" stop-color="#93F"/>
+    </linearGradient>
+    <linearGradient id="f" x1="169.754" y1="180" x2="300.825" y2="147.288" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3C0"/>
+      <stop offset=".13" stop-color="#39F"/>
+      <stop offset=".385" stop-color="#06F"/>
+      <stop offset=".703" stop-color="#93F"/>
+    </linearGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h640v320H0z"/>
+    </clipPath>
+    <clipPath id="b">
+      <path fill="#fff" transform="translate(0 -160)" d="M0 0h640v640H0z"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/images/courses/pwa/logo.svg b/src/images/courses/pwa/logo.svg
new file mode 100644
index 00000000000..ed2b2d86e5a
--- /dev/null
+++ b/src/images/courses/pwa/logo.svg
@@ -0,0 +1,37 @@
+<svg width="140" height="40" viewBox="0 0 140 40" preserveAspectRatio="xMinYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H3.06011V26.6393H11.4481V29.5628H0L0 10Z" fill="#3C4043"/>
+<path d="M19.8798 30C18.5501 30 17.3479 29.6903 16.2733 29.071C15.2168 28.4517 14.388 27.5956 13.7869 26.5027C13.1858 25.3916 12.8853 24.153 12.8853 22.7869C12.8853 21.4754 13.1676 20.2732 13.7323 19.1803C14.3152 18.0692 15.1257 17.1949 16.164 16.5574C17.2022 15.9016 18.3862 15.5738 19.7159 15.5738C21.082 15.5738 22.266 15.8743 23.2678 16.4754C24.2878 17.0765 25.062 17.9144 25.5902 18.9891C26.1184 20.0455 26.3826 21.2659 26.3826 22.6503C26.3826 22.8142 26.3734 22.9781 26.3552 23.1421C26.337 23.306 26.3279 23.3971 26.3279 23.4153H15.8908C15.9818 24.6539 16.4281 25.6102 17.2295 26.2842C18.031 26.9581 18.9418 27.2951 19.9618 27.2951C21.5283 27.2951 22.7305 26.5665 23.5683 25.1093L26.1367 26.3388C25.5356 27.4499 24.6977 28.3424 23.623 29.0164C22.5665 29.6721 21.3188 30 19.8798 30ZM23.3224 21.1202C23.286 20.6831 23.1403 20.2368 22.8853 19.7814C22.6303 19.326 22.2295 18.9435 21.6831 18.6339C21.1549 18.306 20.49 18.1421 19.6886 18.1421C18.796 18.1421 18.0219 18.4153 17.3662 18.9617C16.7286 19.5082 16.2915 20.2277 16.0547 21.1202H23.3224Z" fill="#3C4043"/>
+<path d="M33.4428 30C32.4774 30 31.6031 29.8087 30.8199 29.4262C30.0549 29.0255 29.4447 28.4791 28.9893 27.7869C28.5521 27.0765 28.3335 26.275 28.3335 25.3825C28.3335 23.9617 28.8618 22.8415 29.9182 22.0219C30.9929 21.2022 32.3499 20.7924 33.9893 20.7924C35.4283 20.7924 36.6578 21.0383 37.6778 21.5301V20.9563C37.6778 20.1366 37.3499 19.4627 36.6942 18.9344C36.0567 18.388 35.2825 18.1148 34.3718 18.1148C32.9875 18.1148 31.8763 18.6794 31.0385 19.8087L28.7434 18.224C29.3809 17.3679 30.1733 16.7122 31.1204 16.2568C32.0858 15.8015 33.1696 15.5738 34.3718 15.5738C36.3572 15.5738 37.8873 16.0747 38.962 17.0765C40.0549 18.0601 40.6013 19.4536 40.6013 21.2568V29.5628H37.6778V27.8962H37.5139C37.0767 28.5155 36.5212 29.0255 35.8472 29.4262C35.1733 29.8087 34.3718 30 33.4428 30ZM33.9346 27.5137C34.6086 27.5137 35.2279 27.3497 35.7926 27.0219C36.3754 26.6758 36.8308 26.2295 37.1587 25.6831C37.5048 25.1184 37.6778 24.5173 37.6778 23.8798C36.7124 23.3515 35.6833 23.0874 34.5904 23.0874C33.5886 23.0874 32.8053 23.306 32.2406 23.7432C31.676 24.1803 31.3937 24.7359 31.3937 25.4098C31.3937 26.0291 31.6396 26.5392 32.1314 26.9399C32.6414 27.3224 33.2425 27.5137 33.9346 27.5137Z" fill="#3C4043"/>
+<path d="M43.7743 16.0109H46.6159V18.0328H46.7798C47.0712 17.3406 47.5995 16.7668 48.3645 16.3115C49.1295 15.8379 49.9128 15.6011 50.7142 15.6011C51.37 15.6011 51.9073 15.6922 52.3262 15.8743V19.0164C51.7069 18.7067 51.0148 18.5519 50.2497 18.5519C49.2661 18.5519 48.4374 18.9344 47.7634 19.6995C47.1077 20.4463 46.7798 21.3661 46.7798 22.459V29.5628H43.7743V16.0109Z" fill="#3C4043"/>
+<path d="M54.5272 16.0109H57.3687V17.8142H57.5327C57.9334 17.1585 58.5163 16.6211 59.2813 16.2022C60.0463 15.7832 60.8751 15.5738 61.7676 15.5738C63.4434 15.5738 64.7093 16.0656 65.5654 17.0492C66.4398 18.0328 66.8769 19.3898 66.8769 21.1202V29.5628H63.8715V21.5301C63.8715 19.3989 62.8787 18.3333 60.8933 18.3333C59.8915 18.3333 59.0809 18.7341 58.4616 19.5355C57.8423 20.337 57.5327 21.2842 57.5327 22.3771V29.5628H54.5272V16.0109Z" fill="#3C4043"/>
+<path d="M74.877 29.8338V10H81.6914C82.8917 10 83.9813 10.2585 84.9601 10.7756C85.9388 11.2927 86.7144 12.0037 87.2869 12.9086C87.8779 13.8135 88.1734 14.8661 88.1734 16.0665C88.1734 17.2669 87.8779 18.3287 87.2869 19.2521C86.7144 20.157 85.9388 20.868 84.9601 21.385C83.9813 21.8837 82.8917 22.133 81.6914 22.133H77.924V29.8338H74.877ZM81.7745 12.8809H77.924V19.2521H81.7745C82.4947 19.2521 83.1041 19.1043 83.6027 18.8089C84.1013 18.4949 84.4799 18.0979 84.7384 17.6177C85.0155 17.1191 85.154 16.602 85.154 16.0665C85.154 15.5309 85.0155 15.0231 84.7384 14.5429C84.4799 14.0628 84.1013 13.6657 83.6027 13.3518C83.1041 13.0379 82.4947 12.8809 81.7745 12.8809Z" fill="url(#paint0_linear_815:1044)"/>
+<path d="M94.843 29.8338L89.5244 10H92.9039L96.0618 22.8809L96.3942 24.5983H96.5604L96.9759 22.8809L100.965 10H104.012L107.835 22.8809L108.25 24.5706H108.416L108.749 22.8809L111.907 10H115.258L110.023 29.8338H106.81L103.015 16.6759L102.572 14.8199H102.405L101.934 16.6759L97.9732 29.8338H94.843Z" fill="url(#paint1_linear_815:1044)"/>
+<path d="M114.925 29.8338L122.404 10H125.866L133.373 29.8338H130.022L128.193 24.7368H120.105L118.276 29.8338H114.925ZM123.318 15.8449L121.13 21.9114H127.168L124.98 15.8449L124.232 13.5734H124.066L123.318 15.8449Z" fill="url(#paint2_linear_815:1044)"/>
+<path d="M136.207 23.518L135.93 16.2327V10H138.921V16.2327L138.617 23.518H136.207ZM137.426 30C136.835 30 136.336 29.7969 135.93 29.3906C135.524 28.9843 135.32 28.4949 135.32 27.9224C135.32 27.35 135.524 26.8606 135.93 26.4543C136.336 26.048 136.835 25.8449 137.426 25.8449C137.998 25.8449 138.488 26.048 138.894 26.4543C139.3 26.8606 139.503 27.35 139.503 27.9224C139.503 28.4949 139.3 28.9843 138.894 29.3906C138.488 29.7969 137.998 30 137.426 30Z" fill="url(#paint3_linear_815:1044)"/>
+<defs>
+<linearGradient id="paint0_linear_815:1044" x1="74.877" y1="30" x2="140.413" y2="13.6441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#33CC00"/>
+<stop offset="0.130208" stop-color="#3399FF"/>
+<stop offset="0.385417" stop-color="#0066FF"/>
+<stop offset="0.703125" stop-color="#9933FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_815:1044" x1="74.877" y1="30" x2="140.413" y2="13.6441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#33CC00"/>
+<stop offset="0.130208" stop-color="#3399FF"/>
+<stop offset="0.385417" stop-color="#0066FF"/>
+<stop offset="0.703125" stop-color="#9933FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_815:1044" x1="74.877" y1="30" x2="140.413" y2="13.6441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#33CC00"/>
+<stop offset="0.130208" stop-color="#3399FF"/>
+<stop offset="0.385417" stop-color="#0066FF"/>
+<stop offset="0.703125" stop-color="#9933FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_815:1044" x1="74.877" y1="30" x2="140.413" y2="13.6441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#33CC00"/>
+<stop offset="0.130208" stop-color="#3399FF"/>
+<stop offset="0.385417" stop-color="#0066FF"/>
+<stop offset="0.703125" stop-color="#9933FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/favicon-16x16.png b/src/images/favicon-16x16.png
index d6b8b00ee7a..040818085b5 100644
Binary files a/src/images/favicon-16x16.png and b/src/images/favicon-16x16.png differ
diff --git a/src/images/favicon-32x32.png b/src/images/favicon-32x32.png
index bbe4d54f14d..022415f24b7 100644
Binary files a/src/images/favicon-32x32.png and b/src/images/favicon-32x32.png differ
diff --git a/src/images/favicon.ico b/src/images/favicon.ico
index a92064bf9ce..14e9e4396df 100644
Binary files a/src/images/favicon.ico and b/src/images/favicon.ico differ
diff --git a/src/images/feature-cards/design-in-the-browser.jpg b/src/images/feature-cards/design-in-the-browser.jpg
new file mode 100644
index 00000000000..a134c678129
Binary files /dev/null and b/src/images/feature-cards/design-in-the-browser.jpg differ
diff --git a/src/images/feature-cards/web-vitals-feature.png b/src/images/feature-cards/web-vitals-feature.png
new file mode 100644
index 00000000000..48b4b8cea4d
Binary files /dev/null and b/src/images/feature-cards/web-vitals-feature.png differ
diff --git a/src/images/icons/a11y.svg b/src/images/icons/a11y.svg
index 3997dd252cb..514a8d49fdd 100644
--- a/src/images/icons/a11y.svg
+++ b/src/images/icons/a11y.svg
@@ -1 +1 @@
-<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".181" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.743)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g transform="translate(14.034 20.667)" stroke="#212121"><path d="M36.435 9.95c-9.714-11.664-25.418-11.664-35.132 0a2.249 2.249 0 0 0 0 2.877c9.714 11.663 25.418 11.663 35.132 0a2.249 2.249 0 0 0 0-2.878z"/><ellipse fill="#2979FF" cx="18.731" cy="11.371" rx="8.262" ry="8.274"/></g></g></g></svg>
\ No newline at end of file
+<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".181" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.743)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g transform="translate(14.034 20.667)" stroke="#212121"><path d="M36.435 9.95c-9.714-11.664-25.418-11.664-35.132 0a2.249 2.249 0 000 2.877c9.714 11.663 25.418 11.663 35.132 0a2.249 2.249 0 000-2.878z"/><ellipse fill="#2979FF" cx="18.731" cy="11.371" rx="8.262" ry="8.274"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/calendar.svg b/src/images/icons/calendar.svg
index 310ad10d5b4..3000b4b8975 100644
--- a/src/images/icons/calendar.svg
+++ b/src/images/icons/calendar.svg
@@ -1,4 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 17V9H17V12.09C17.33 12.04 17.66 12 18 12C18.34 12 18.67 12.04 19 12.09V6C19 4.9 18.1 4 17 4H16V2H14V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 17C3 18.1 3.89 19 5 19H12.09C12.04 18.67 12 18.34 12 18C12 17.66 12.04 17.33 12.09 17H5Z" fill="#5F6368"/>
-<path d="M19 17V14H17V17H14V19H17V22H19V19H22V17H19Z" fill="#5F6368"/>
-</svg>
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 17V9h12v3.09c.33-.05.66-.09 1-.09.34 0 .67.04 1 .09V6c0-1.1-.9-2-2-2h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 17a2 2 0 002 2h7.09c-.05-.33-.09-.66-.09-1 0-.34.04-.67.09-1H5z" fill="#5F6368"/><path d="M19 17v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z" fill="#5F6368"/></svg>
diff --git a/src/images/icons/chrome.svg b/src/images/icons/chrome.svg
new file mode 100644
index 00000000000..2b90ad3de63
--- /dev/null
+++ b/src/images/icons/chrome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 190 190"><linearGradient id="d" x1="28.3" x2="80.8" y1="75" y2="44.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".7" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="109.9" x2="51.5" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".3" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".7" stop-color="#ea6100" stop-opacity="0"/></linearGradient><radialGradient id="a" cx="91.2" cy="55" r="84.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><radialGradient id="i" cx="20.9" cy="47.5" r="78" xlink:href="#a"/><radialGradient id="j" cx="94.8" cy="95.1" r="87.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="k" cx="33.3" cy="31" r="176.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><clipPath id="b"><circle cx="95" cy="95" r="88"/></clipPath><g clip-path="url(#b)"><use fill="#db4437" xlink:href="#c"/><use fill="url(#d)" xlink:href="#c"/><use fill="#0f9d58" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/><use fill="#ffcd40" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/><g fill-opacity=".1"><path fill="#3e2723" d="M61.3 114.7L21 47.4l39 67.8z"/><path fill="#263238" d="M128.8 116.3l-.8-.4-37.3 67 38.3-67z"/></g><path id="e" d="M7 183h83.8l39-39v-29H60.2L7 23.5z"/><path id="g" d="M95 55l34.6 60L91 183h92V55z"/><path id="c" d="M21 7v108h39.4L95 55h88V7z"/><path fill="url(#a)" d="M95 55v21l78.4-21z"/><path fill="url(#i)" d="M21 47.5l57.2 57.2L60.4 115z"/><path fill="url(#j)" d="M90.8 183l21-78.3 17.8 10.3z"/><circle cx="95" cy="95" r="40" fill="#f1f1f1"/><circle cx="95" cy="95" r="32" fill="#4285f4"/><circle cx="95" cy="95" r="88" fill="url(#k)"/><g fill="#3e2723" fill-opacity=".1"><path fill="#fff" d="M129.6 115a40 40 0 01-69.2 0L7 24.5 60.4 116a40 40 0 0069.2 0z"/><path d="M96 55h-.5a40 40 0 110 80h.5c22 0 40-18 40-40s-18-40-40-40zm-1 127a88 88 0 0088-87.5v.5A88 88 0 017 95v-.5A88 88 0 0095 182z"/><g fill-opacity=".2"><path fill="#fff" d="M130 116.3a39.3 39.3 0 003.4-32 38 38 0 01-3.8 30.7L92 183l38.2-66.5zM95 8a88 88 0 0188 87.5V95A88 88 0 007 95v.5A88 88 0 0195 8z"/><path d="M95 54c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/done.svg b/src/images/icons/done.svg
new file mode 100644
index 00000000000..7d22cf956c4
--- /dev/null
+++ b/src/images/icons/done.svg
@@ -0,0 +1 @@
+<svg aria-label='done' role='img' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='icon' fill='#3740ff'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'></path></svg>
diff --git a/src/images/icons/edge.svg b/src/images/icons/edge.svg
new file mode 100644
index 00000000000..f986f0899f4
--- /dev/null
+++ b/src/images/icons/edge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><linearGradient id="A" gradientUnits="userSpaceOnUse"/><linearGradient id="B" x1="6870" x2="24704" y1="18705" y2="18705" xlink:href="#A"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="C" x1="16272" x2="5133" y1="10968" y2="23102" xlink:href="#A"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="D" cx="16720" cy="18747" r="9538" xlink:href="#A"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="E" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" xlink:href="#A"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="F" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" xlink:href="#A"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="G" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" xlink:href="#A"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="H" d="M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z"/><path id="I" d="M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z"/><path id="J" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#B)" xlink:href="#H"/><use fill="url(#D)" opacity=".35" xlink:href="#H"/><use fill="url(#C)" xlink:href="#I"/><use fill="url(#E)" opacity=".4" xlink:href="#I"/><use fill="url(#F)" xlink:href="#J"/><use fill="url(#G)" xlink:href="#J"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/firefox.svg b/src/images/icons/firefox.svg
new file mode 100644
index 00000000000..065152acf64
--- /dev/null
+++ b/src/images/icons/firefox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51500 51500"><radialGradient id="b" cx="87.4%" cy="-12.9%" r="128%" gradientTransform="matrix(.8 0 0 1 .18 .13)"><stop offset=".13" stop-color="#ffbd4f"/><stop offset=".28" stop-color="#ff980e"/><stop offset=".47" stop-color="#ff3750"/><stop offset=".78" stop-color="#eb0878"/><stop offset=".86" stop-color="#e50080"/></radialGradient><radialGradient id="d" cx="49%" cy="40%" r="128%" gradientTransform="matrix(.82 0 0 1 .09 0)"><stop offset=".3" stop-color="#960e18"/><stop offset=".35" stop-color="#b11927" stop-opacity=".74"/><stop offset=".43" stop-color="#db293d" stop-opacity=".34"/><stop offset=".5" stop-color="#f5334b" stop-opacity=".1"/><stop offset=".53" stop-color="#ff3750" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="48%" cy="-12%" r="140%"><stop offset=".13" stop-color="#fff44f"/><stop offset=".53" stop-color="#ff980e"/></radialGradient><radialGradient id="f" cx="22.76%" cy="110.11%" r="100%"><stop offset=".35" stop-color="#3a8ee6"/><stop offset=".67" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></radialGradient><radialGradient id="h" cx="52%" cy="33%" r="59%" gradientTransform="scale(.9 1)"><stop offset=".21" stop-color="#9059ff" stop-opacity="0"/><stop offset=".97" stop-color="#6e008b" stop-opacity=".6"/></radialGradient><radialGradient id="i" cx="210%" cy="-100%" r="290%"><stop offset=".1" stop-color="#ffe226"/><stop offset=".79" stop-color="#ff7139"/></radialGradient><radialGradient id="j" cx="84%" cy="-41%" r="180%"><stop offset=".11" stop-color="#fff44f"/><stop offset=".46" stop-color="#ff980e"/><stop offset=".72" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="k" cx="16.1%" cy="-18.6%" r="348.8%" gradientTransform="matrix(.10453 .46743 -.99452 .04913 -.05 -.26)"><stop offset="0" stop-color="#fff44f"/><stop offset=".3" stop-color="#ff980e"/><stop offset=".57" stop-color="#ff3647"/><stop offset=".74" stop-color="#e31587"/></radialGradient><radialGradient id="l" cx="18.9%" cy="-42.5%" r="238.4%"><stop offset=".14" stop-color="#fff44f"/><stop offset=".48" stop-color="#ff980e"/><stop offset=".66" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="m" cx="159.3%" cy="-44.72%" r="313.1%"><stop offset=".09" stop-color="#fff44f"/><stop offset=".63" stop-color="#ff980e"/></radialGradient><linearGradient id="a" x1="87.25%" x2="9.4%" y1="15.5%" y2="93.1%"><stop offset=".05" stop-color="#fff44f"/><stop offset=".37" stop-color="#ff980e"/><stop offset=".53" stop-color="#ff3647"/><stop offset=".7" stop-color="#e31587"/></linearGradient><linearGradient id="n" x1="80%" x2="18%" y1="14%" y2="84%"><stop offset=".17" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".6" stop-color="#fff44f" stop-opacity="0"/></linearGradient><path id="c" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294 0-6 2 5 4 22l4 26c2268 6147 1032 12398-748 16218-2754 5910-9420 11967-19857 11670-11276-318-21210-8683-23064-19643-338-1728 0-2605 170-4008-207 1080-286 1394-390 3315l-2 123c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075z"/><path id="g" d="M25677 21050c-40 598-2150 2660-2890 2660-6834 0-7943 4133-7943 4133 303 3480 2726 6348 5660 7865 134 70 270 130 405 193a13277 13277 0 00706 289 10674 10674 0 003127 603c11978 562 14300-14320 5655-18640 2213-385 4510 505 5794 1407-2100-3672-6025-6150-10530-6150-285 0-564 24-844 43a12025 12025 0 00-6614 2549c366 310 780 724 1650 1583 1630 1606 5813 3270 5822 3465z"/><path fill="url(#a)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350a12025 12025 0 00-6614 2548 7136 7136 0 00-622-470 11134 11134 0 01-68-5873c-2468 1124-4390 2900-5785 4470h-10c-953-1206-886-5187-832-6018-10-52-710 363-802 425a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39700 39700 0 00-237 1500l-5 52a22907 22907 0 00-390 3316l-1 120c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zM20170 35545c113 53 220 112 334 164l16 10a12620 12620 0 01-350-174zm5506-14493zm19813-3060l-3-23 4 26z"/><use fill="url(#b)" xlink:href="#c"/><use fill="url(#d)" xlink:href="#c"/><path fill="url(#e)" d="M36192 19560l150 110a13070 13070 0 00-2231-2911C26640 9290 32150 563 33080 120l10-13c-6037 3535-8085 10076-8273 13348 280-20 560-43 844-43 4505 0 8430 2477 10530 6150z"/><use fill="url(#f)" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/><path fill="url(#i)" d="M17083 15204a24404 24404 0 01498 330 11134 11134 0 01-67-5874c-2470 1125-4390 2900-5785 4470 115-3 3600-66 5354 1074z"/><path fill="url(#j)" d="M1822 26240c1855 10960 11788 19325 23063 19644 10437 296 17104-5762 19858-11670 1780-3820 3016-10070 748-16218v-2l-4-24c-2-17-4-28-4-22l5 40c853 5566-1980 10958-6405 14604l-13 30c-8625 7023-16878 4237-18550 3097a14410 14410 0 01-350-174c-5028-2403-7105-6984-6660-10913-4245 0-5693-3580-5693-3580s3812-2718 8836-355c4653 2190 9023 355 9023 354-10-195-4192-1860-5822-3465-872-860-1285-1272-1652-1583a7136 7136 0 00-622-470 28293 28293 0 00-498-330c-1753-1140-5240-1076-5355-1073h-10c-953-1207-886-5188-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280c-10 52-865 3784-444 5720z"/><path fill="url(#k)" d="M34110 16760a13070 13070 0 012231 2910l360 296c5450 5020 2594 12120 2380 12626 4426-3646 7258-9038 6405-14604-2716-6774-7323-9506-11086-15453l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10c-930 443-6440 9170 1030 16640z"/><path fill="url(#l)" d="M36702 19965a4743 4743 0 00-360-295l-150-110c-1283-900-3580-1792-5794-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l16 10c1670 1140 9924 3925 18550-3097l13-30c213-506 3068-7606-2380-12626z"/><path fill="url(#m)" d="M14844 27844s1110-4133 7943-4133c740 0 2850-2062 2890-2660s-4370 1836-9023-354c-5024-2363-8836 354-8836 354s1448 3580 5693 3580c-445 3930 1632 8510 6660 10913 113 53 218 112 334 164-2935-1517-5358-4384-5660-7865z"/><path fill="url(#n)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350 280-20 560-43 845-43 4505 0 8430 2477 10530 6148-1284-900-3580-1792-5795-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l17 10a14410 14410 0 01-350-174c112 53 218 112 333 164-2935-1517-5358-4384-5660-7865 0 0 1108-4133 7942-4133 740 0 2850-2062 2890-2660-10-195-4190-1860-5822-3465-870-860-1285-1272-1650-1583a7136 7136 0 00-623-470 11134 11134 0 01-67-5873c-2470 1124-4390 2900-5785 4470h-10c-953-1207-886-5187-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2243 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39787 39787 0 00-277 1515c-2 18 2-17 0 0a27956 27956 0 00-355 3353l-3 122c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zm-2384 1234l4 26v-2l-4-24z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/github.svg b/src/images/icons/github.svg
index 42533edaba8..58c56ecb894 100644
--- a/src/images/icons/github.svg
+++ b/src/images/icons/github.svg
@@ -1,3 +1 @@
-<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29" fill="#161514" fill-rule="evenodd"/>
-</svg>
+<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg"><path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 014.078-.549 15.62 15.62 0 014.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29" fill="#161514" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/glitch.svg b/src/images/icons/glitch.svg
index 4643289f162..cb65956d118 100644
--- a/src/images/icons/glitch.svg
+++ b/src/images/icons/glitch.svg
@@ -1,88 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 58">
-  <defs>
-    <clipPath id="clip-path">
-      <path d="M32.027 52.567a6.467 6.467 0 0 1 .545 3.08 8.518 8.518 0 0 1-2.122.24 14.078 14.078 0 0 1-5.902-.209c-3.882-.823-5.677-4.966-5.677-4.966s.038-.037.112-.1a.883.883 0 0 0-.37-.033 24.798 24.798 0 0 1-5.723.433c-1.91 0-9.465-2.869-11.9-5.945 0 0 3.78-.923 3.78-1.703S.452 41.142.452 41.142s-.654-3.599 3.974-7.192a28.282 28.282 0 0 1 8.05-4.742c-2.404-.321-9.2-3.026-11.486-5.913 0 0 3.78-.923 3.78-1.703S.452 19.37.452 19.37s-.654-3.599 3.974-7.193 8.092-5.3 11.984-5.499 5.197-.2 5.197-.2 3.388-4.574 5.168-4.574c.89 0 13.927 2.77 15.056 4.574a4.676 4.676 0 0 0 2.256 2.105c.577.433.214.087 2.829.671 6.541 1.462 5.65 2.035 10.51 2.923 1.966.36 10.98-4.07 11.831-3.64.396.2.707 4.01-.84 6.509s1.241 4.561-.012 7.69 1.435 5.445.852 6.504-10.155-3.465-11.832-3.138c-1.5.292-5.762 2.296-14.086 3.828a8.158 8.158 0 0 1 .748.426c.577.432.213.087 2.829.671 6.541 1.462 5.649 2.035 10.51 2.923 1.966.36 10.98-4.07 11.831-3.64.396.2.707 4.01-.841 6.508s1.242 4.562-.01 7.69 1.434 5.446.85 6.505-10.154-3.466-11.83-3.138-6.8 2.79-17.185 4.345a42.08 42.08 0 0 1-8.214.347z" clip-rule="evenodd" fill="none"/>
-    </clipPath>
-    <clipPath id="clip-path-2">
-      <path class="cls-2" d="M27.245 12.044a835.386 835.386 0 0 1 4.573.248c.998.057 1.834.11 2.476.154a81.997 81.997 0 0 1 8.987 1.296 60.67 60.67 0 0 1 13.576 4.665l1.946.866a.715.715 0 0 0 .958-.463.862.862 0 0 0-.413-1.073L57.4 16.87a61.882 61.882 0 0 0-13.86-4.756 83.196 83.196 0 0 0-9.154-1.318 223.98 223.98 0 0 0-2.492-.155l-1.109-.063a840.811 840.811 0 0 0-4.617-.244l-.32-.016-.114-.005a.823.823 0 0 0-.687 1.207l.061.137a22.695 22.695 0 0 1 .7 1.812 16.398 16.398 0 0 1 .605 2.263c.048.266.085.52.11.763a12.637 12.637 0 0 1-.432 3.45 42.137 42.137 0 0 1-.423 1.702 58.225 58.225 0 0 1-.812 2.742l-.055.17-.02.057a.859.859 0 0 0 .432 1.064.717.717 0 0 0 .95-.483l.022-.065.059-.18a60.455 60.455 0 0 0 .838-2.829 44.13 44.13 0 0 0 .44-1.775 13.834 13.834 0 0 0 .468-4.039q-.045-.44-.13-.908a18.153 18.153 0 0 0-.67-2.517 25.45 25.45 0 0 0-.309-.859z"/>
-    </clipPath>
-    <clipPath id="clip-path-3">
-      <path class="cls-2" d="M.449 1.904h69.202V56.18H.449z"/>
-    </clipPath>
-    <clipPath id="clip-path-4">
-      <path class="cls-2" d="M27.254 21.553q.146-.58.268-1.13a14.185 14.185 0 0 0 .468-4.091q-.045-.446-.13-.92a18.577 18.577 0 0 0-.67-2.55c-.1-.298-.204-.59-.309-.87l.364.02a826.102 826.102 0 0 1 4.574.25c.997.059 1.833.112 2.476.157a81.018 81.018 0 0 1 8.987 1.312 60.142 60.142 0 0 1 13.575 4.725l1.946.877a.713.713 0 0 0 .958-.468.878.878 0 0 0-.413-1.087c-.033-.015-1.515-.684-1.948-.878a61.344 61.344 0 0 0-13.86-4.817 82.203 82.203 0 0 0-9.154-1.336c-.649-.045-1.49-.098-2.492-.157l-1.109-.064a831.486 831.486 0 0 0-4.617-.246l-.32-.017-.114-.005a.834.834 0 0 0-.687 1.223l.061.138a23.25 23.25 0 0 1 .7 1.835 16.78 16.78 0 0 1 .605 2.293c.048.27.085.527.11.773a12.957 12.957 0 0 1-.432 3.494c-.11.492-.235 1.007-.374 1.539z"/>
-    </clipPath>
-    <clipPath id="clip-path-5">
-      <path class="cls-2" d="M.449 1.796h69.202v54.976H.449z"/>
-    </clipPath>
-    <clipPath id="clip-path-6">
-      <path class="cls-2" d="M21.226 12.316c.011.019.036.06.07.121a17.257 17.257 0 0 1 .815 1.632 11.7 11.7 0 0 1 .739 2.231 5.612 5.612 0 0 1 .129 1.13 9.721 9.721 0 0 1-.584 3.092 13.293 13.293 0 0 1-.54 1.327 3.256 3.256 0 0 1-.044.09.778.778 0 0 0 .258 1.01.649.649 0 0 0 .924-.282c.046-.09.122-.246.216-.46.156-.352.311-.743.456-1.165a11.25 11.25 0 0 0 .67-3.614 7.194 7.194 0 0 0-.162-1.456 13.212 13.212 0 0 0-.836-2.538 18.817 18.817 0 0 0-.98-1.937.644.644 0 0 0-.94-.209.784.784 0 0 0-.191 1.028z"/>
-    </clipPath>
-    <clipPath id="clip-path-8">
-      <path class="cls-3" d="M23.513 21.553q.077-.208.152-.427a11.55 11.55 0 0 0 .67-3.664 7.393 7.393 0 0 0-.162-1.477 13.53 13.53 0 0 0-.835-2.574 19.118 19.118 0 0 0-.98-1.963.64.64 0 0 0-.94-.212.802.802 0 0 0-.192 1.04l.07.124a17.627 17.627 0 0 1 .815 1.655 11.98 11.98 0 0 1 .74 2.262 5.767 5.767 0 0 1 .128 1.145 9.98 9.98 0 0 1-.584 3.136c-.116.343-.24.663-.364.955z"/>
-    </clipPath>
-    <clipPath id="clip-path-9">
-      <path class="cls-2" d="M27.245 34.071a818.397 818.397 0 0 1 4.573.248c.998.058 1.834.11 2.476.154a82 82 0 0 1 8.987 1.296 60.67 60.67 0 0 1 13.576 4.665l1.946.867a.715.715 0 0 0 .958-.463.862.862 0 0 0-.413-1.074c-.033-.014-1.515-.675-1.948-.866a61.88 61.88 0 0 0-13.86-4.756 83.192 83.192 0 0 0-9.154-1.318 223.98 223.98 0 0 0-2.492-.156l-1.109-.062a858.696 858.696 0 0 0-4.617-.244l-.32-.016-.114-.006a.823.823 0 0 0-.687 1.208l.061.137a22.695 22.695 0 0 1 .7 1.812 16.398 16.398 0 0 1 .605 2.263c.048.265.085.52.11.763a12.637 12.637 0 0 1-.432 3.45 42.178 42.178 0 0 1-.423 1.702 58.225 58.225 0 0 1-.812 2.741l-.055.17-.02.057a.859.859 0 0 0 .432 1.065.717.717 0 0 0 .95-.483l.022-.065.059-.18a60.455 60.455 0 0 0 .838-2.829 44.13 44.13 0 0 0 .44-1.775 13.834 13.834 0 0 0 .467-4.039q-.044-.44-.13-.908a18.154 18.154 0 0 0-.67-2.517 25.45 25.45 0 0 0-.308-.86z"/>
-    </clipPath>
-    <clipPath id="clip-path-11">
-      <path class="cls-2" d="M27.254 43.459q.146-.572.268-1.117a13.834 13.834 0 0 0 .468-4.038q-.045-.44-.13-.909a18.154 18.154 0 0 0-.67-2.516 25.45 25.45 0 0 0-.309-.86l.364.02a818.397 818.397 0 0 1 4.574.247c.997.058 1.833.11 2.476.154a82 82 0 0 1 8.987 1.296 60.67 60.67 0 0 1 13.575 4.665l1.946.867a.715.715 0 0 0 .958-.463.862.862 0 0 0-.413-1.073c-.033-.015-1.515-.676-1.948-.867a61.88 61.88 0 0 0-13.86-4.756 83.192 83.192 0 0 0-9.155-1.318 223.98 223.98 0 0 0-2.49-.155l-1.11-.063a858.696 858.696 0 0 0-4.617-.244l-.321-.016-.114-.006a.823.823 0 0 0-.687 1.208l.062.137a22.695 22.695 0 0 1 .7 1.812 16.398 16.398 0 0 1 .604 2.263c.05.265.086.52.11.763a12.637 12.637 0 0 1-.432 3.45c-.109.485-.234.994-.373 1.52z"/>
-    </clipPath>
-    <clipPath id="clip-path-13">
-      <path class="cls-3" d="M23.513 43.459q.077-.205.152-.422a11.25 11.25 0 0 0 .67-3.613 7.195 7.195 0 0 0-.162-1.457 13.213 13.213 0 0 0-.835-2.538 18.817 18.817 0 0 0-.98-1.936.644.644 0 0 0-.94-.21.784.784 0 0 0-.192 1.027c.011.02.036.06.07.122a17.257 17.257 0 0 1 .815 1.632 11.7 11.7 0 0 1 .74 2.23 5.612 5.612 0 0 1 .128 1.13 9.721 9.721 0 0 1-.584 3.093c-.116.338-.24.654-.364.942z"/>
-    </clipPath>
-    <linearGradient id="New_Gradient_Swatch_1" x1="34.057" y1="1.904" x2="34.057" y2="21.653" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#e559ff"/>
-      <stop offset="1" stop-color="#924dff"/>
-    </linearGradient>
-    <linearGradient id="New_Gradient_Swatch_2" x1="17.168" y1="11.682" x2="46.06" y2="30.967" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#f1a5ff"/>
-      <stop offset="1" stop-color="#ff686c"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient" x1="35.22" y1="27.024" x2="35.22" y2="43.9" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#6f3cff"/>
-      <stop offset="1" stop-color="#3633ff"/>
-    </linearGradient>
-    <linearGradient id="New_Gradient_Swatch_2-2" x1="28.82" y1="41.374" x2="40.705" y2="55.625" xlink:href="#New_Gradient_Swatch_2"/>
-    <style>
-      .cls-2{fill:none}.cls-3{fill:#f1a5ff}.cls-21{fill-rule:evenodd}.cls-10{clip-path:url(#clip-path-3)}.cls-11{fill:#974dff}.cls-18{fill:#373fff}.cls-21,.cls-22{fill:#fff}
-    </style>
-  </defs>
-  <g style="isolation:isolate" clip-path="url(#clip-path)">
-    <path fill="url(#New_Gradient_Swatch_1)" d="M-1.402 1.904h70.918v19.87H-1.402z"/>
-    <path fill="url(#New_Gradient_Swatch_2)" d="M61.469 31.062l8.111-1.112.183-2.604v-5.772l-.632-2.031H42.683v2.031H.449v5.772l5.704 1.88 21.604 1.836h4.707"/>
-    <path fill="url(#linear-gradient)" fill-rule="evenodd" d="M27.757 27.346H52.35v2.649l17.64-.047v11.475H33.354v2.036H.449V29.948l10.262-.737 17.046.132v-1.997z"/>
-    <g class="cls-10" clip-path="url(#clip-path-2)">
-      <path class="cls-11" d="M23.856 9.536h36.806v17.131H23.856z"/>
-    </g>
-    <g clip-path="url(#clip-path-4)">
-      <g clip-path="url(#clip-path-5)">
-        <path class="cls-3" d="M24.195 9.355h36.467v13.057H24.195z"/>
-      </g>
-    </g>
-    <g class="cls-10" clip-path="url(#clip-path-6)">
-      <path class="cls-11" d="M20.294 10.384h4.919v13.569h-4.919z"/>
-    </g>
-    <path class="cls-3" d="M23.513 21.553q.077-.208.152-.427a11.55 11.55 0 0 0 .67-3.664 7.393 7.393 0 0 0-.162-1.477 13.53 13.53 0 0 0-.835-2.574 19.118 19.118 0 0 0-.98-1.963.64.64 0 0 0-.94-.212.802.802 0 0 0-.192 1.04l.07.124a17.627 17.627 0 0 1 .815 1.655 11.98 11.98 0 0 1 .74 2.262 5.767 5.767 0 0 1 .128 1.145 9.98 9.98 0 0 1-.584 3.136c-.116.343-.24.663-.364.955z"/>
-    <g clip-path="url(#clip-path-8)">
-      <path class="cls-3" d="M.449 1.775h69.202v55.034H.449z"/>
-    </g>
-    <path fill="url(#New_Gradient_Swatch_2-2)" d="M69.601 56.18H.399V43.459h32.905l-.002-2.07h36.299V56.18z"/>
-    <g class="cls-10" clip-path="url(#clip-path-9)">
-      <path class="cls-18" d="M23.856 31.416h36.806v17.131H23.856z"/>
-    </g>
-    <g class="cls-10" clip-path="url(#clip-path-11)">
-      <path class="cls-3" d="M24.195 31.416h36.467v12.89H24.195z"/>
-    </g>
-    <path class="cls-18" d="M21.226 34.343c.011.02.036.06.07.122a17.257 17.257 0 0 1 .815 1.632 11.7 11.7 0 0 1 .74 2.23 5.612 5.612 0 0 1 .128 1.13 9.721 9.721 0 0 1-.584 3.093 13.293 13.293 0 0 1-.54 1.327 3.256 3.256 0 0 1-.044.09.778.778 0 0 0 .258 1.01.649.649 0 0 0 .924-.282c.046-.09.122-.246.216-.46.156-.352.311-.744.456-1.165a11.25 11.25 0 0 0 .67-3.614A7.195 7.195 0 0 0 24.174 38a13.213 13.213 0 0 0-.835-2.538 18.817 18.817 0 0 0-.98-1.937.644.644 0 0 0-.94-.209.784.784 0 0 0-.192 1.027z"/>
-    <path class="cls-3" d="M23.513 43.459q.077-.205.152-.422a11.25 11.25 0 0 0 .67-3.613 7.195 7.195 0 0 0-.162-1.457 13.213 13.213 0 0 0-.835-2.538 18.817 18.817 0 0 0-.98-1.936.644.644 0 0 0-.94-.21.784.784 0 0 0-.192 1.027c.011.02.036.06.07.122a17.257 17.257 0 0 1 .815 1.632 11.7 11.7 0 0 1 .74 2.23 5.612 5.612 0 0 1 .128 1.13 9.721 9.721 0 0 1-.584 3.093c-.116.338-.24.654-.364.942z"/>
-    <g clip-path="url(#clip-path-13)">
-      <path class="cls-3" d="M.449 1.904h69.202V56.18H.449z"/>
-    </g>
-  </g>
-  <circle cx="12.226" cy="16.056" r="3"/>
-  <path class="cls-21" d="M9.226 15.817v-.037a3.234 3.234 0 1 1 3.232 3.328 2.985 2.985 0 0 1-3.186-2.766 2.359 2.359 0 0 0 2.446 2.073 2.567 2.567 0 1 0-2.492-2.598z"/>
-  <circle class="cls-22" cx="10.519" cy="16.743" r=".824"/>
-  <circle cx="12.226" cy="37.987" r="3"/>
-  <path class="cls-21" d="M9.226 37.748v-.037a3.234 3.234 0 1 1 3.232 3.329 2.985 2.985 0 0 1-3.186-2.767 2.359 2.359 0 0 0 2.445 2.074 2.567 2.567 0 1 0-2.491-2.599z"/>
-  <circle class="cls-22" cx="10.519" cy="38.675" r=".824"/>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 58"><defs><clipPath id="clip-path"><path d="M32.027 52.567a6.467 6.467 0 01.545 3.08 8.518 8.518 0 01-2.122.24 14.078 14.078 0 01-5.902-.209c-3.882-.823-5.677-4.966-5.677-4.966s.038-.037.112-.1a.883.883 0 00-.37-.033 24.798 24.798 0 01-5.723.433c-1.91 0-9.465-2.869-11.9-5.945 0 0 3.78-.923 3.78-1.703S.452 41.142.452 41.142s-.654-3.599 3.974-7.192a28.282 28.282 0 018.05-4.742c-2.404-.321-9.2-3.026-11.486-5.913 0 0 3.78-.923 3.78-1.703S.452 19.37.452 19.37s-.654-3.599 3.974-7.193 8.092-5.3 11.984-5.499 5.197-.2 5.197-.2 3.388-4.574 5.168-4.574c.89 0 13.927 2.77 15.056 4.574a4.676 4.676 0 002.256 2.105c.577.433.214.087 2.829.671 6.541 1.462 5.65 2.035 10.51 2.923 1.966.36 10.98-4.07 11.831-3.64.396.2.707 4.01-.84 6.509s1.241 4.561-.012 7.69 1.435 5.445.852 6.504-10.155-3.465-11.832-3.138c-1.5.292-5.762 2.296-14.086 3.828a8.158 8.158 0 01.748.426c.577.432.213.087 2.829.671 6.541 1.462 5.649 2.035 10.51 2.923 1.966.36 10.98-4.07 11.831-3.64.396.2.707 4.01-.841 6.508s1.242 4.562-.01 7.69 1.434 5.446.85 6.505-10.154-3.466-11.83-3.138-6.8 2.79-17.185 4.345a42.08 42.08 0 01-8.214.347z" clip-rule="evenodd" fill="none"/></clipPath><clipPath id="clip-path-2"><path class="cls-2" d="M27.245 12.044a835.386 835.386 0 014.573.248c.998.057 1.834.11 2.476.154a81.997 81.997 0 018.987 1.296 60.67 60.67 0 0113.576 4.665l1.946.866a.715.715 0 00.958-.463.862.862 0 00-.413-1.073L57.4 16.87a61.882 61.882 0 00-13.86-4.756 83.196 83.196 0 00-9.154-1.318 223.98 223.98 0 00-2.492-.155l-1.109-.063a840.811 840.811 0 00-4.617-.244l-.32-.016-.114-.005a.823.823 0 00-.687 1.207l.061.137a22.695 22.695 0 01.7 1.812 16.398 16.398 0 01.605 2.263c.048.266.085.52.11.763a12.637 12.637 0 01-.432 3.45 42.137 42.137 0 01-.423 1.702 58.225 58.225 0 01-.812 2.742l-.055.17-.02.057a.859.859 0 00.432 1.064.717.717 0 00.95-.483l.022-.065.059-.18a60.455 60.455 0 00.838-2.829 44.13 44.13 0 00.44-1.775 13.834 13.834 0 00.468-4.039q-.045-.44-.13-.908a18.153 18.153 0 00-.67-2.517 25.45 25.45 0 00-.309-.859z"/></clipPath><clipPath id="clip-path-3"><path class="cls-2" d="M.449 1.904h69.202V56.18H.449z"/></clipPath><clipPath id="clip-path-4"><path class="cls-2" d="M27.254 21.553q.146-.58.268-1.13a14.185 14.185 0 00.468-4.091q-.045-.446-.13-.92a18.577 18.577 0 00-.67-2.55c-.1-.298-.204-.59-.309-.87l.364.02a826.102 826.102 0 014.574.25c.997.059 1.833.112 2.476.157a81.018 81.018 0 018.987 1.312 60.142 60.142 0 0113.575 4.725l1.946.877a.713.713 0 00.958-.468.878.878 0 00-.413-1.087c-.033-.015-1.515-.684-1.948-.878a61.344 61.344 0 00-13.86-4.817 82.203 82.203 0 00-9.154-1.336c-.649-.045-1.49-.098-2.492-.157l-1.109-.064a831.486 831.486 0 00-4.617-.246l-.32-.017-.114-.005a.834.834 0 00-.687 1.223l.061.138a23.25 23.25 0 01.7 1.835 16.78 16.78 0 01.605 2.293c.048.27.085.527.11.773a12.957 12.957 0 01-.432 3.494c-.11.492-.235 1.007-.374 1.539z"/></clipPath><clipPath id="clip-path-5"><path class="cls-2" d="M.449 1.796h69.202v54.976H.449z"/></clipPath><clipPath id="clip-path-6"><path class="cls-2" d="M21.226 12.316c.011.019.036.06.07.121a17.257 17.257 0 01.815 1.632 11.7 11.7 0 01.739 2.231 5.612 5.612 0 01.129 1.13 9.721 9.721 0 01-.584 3.092 13.293 13.293 0 01-.54 1.327 3.256 3.256 0 01-.044.09.778.778 0 00.258 1.01.649.649 0 00.924-.282c.046-.09.122-.246.216-.46.156-.352.311-.743.456-1.165a11.25 11.25 0 00.67-3.614 7.194 7.194 0 00-.162-1.456 13.212 13.212 0 00-.836-2.538 18.817 18.817 0 00-.98-1.937.644.644 0 00-.94-.209.784.784 0 00-.191 1.028z"/></clipPath><clipPath id="clip-path-8"><path class="cls-3" d="M23.513 21.553q.077-.208.152-.427a11.55 11.55 0 00.67-3.664 7.393 7.393 0 00-.162-1.477 13.53 13.53 0 00-.835-2.574 19.118 19.118 0 00-.98-1.963.64.64 0 00-.94-.212.802.802 0 00-.192 1.04l.07.124a17.627 17.627 0 01.815 1.655 11.98 11.98 0 01.74 2.262 5.767 5.767 0 01.128 1.145 9.98 9.98 0 01-.584 3.136c-.116.343-.24.663-.364.955z"/></clipPath><clipPath id="clip-path-9"><path class="cls-2" d="M27.245 34.071a818.397 818.397 0 014.573.248c.998.058 1.834.11 2.476.154a82 82 0 018.987 1.296 60.67 60.67 0 0113.576 4.665l1.946.867a.715.715 0 00.958-.463.862.862 0 00-.413-1.074c-.033-.014-1.515-.675-1.948-.866a61.88 61.88 0 00-13.86-4.756 83.192 83.192 0 00-9.154-1.318 223.98 223.98 0 00-2.492-.156l-1.109-.062a858.696 858.696 0 00-4.617-.244l-.32-.016-.114-.006a.823.823 0 00-.687 1.208l.061.137a22.695 22.695 0 01.7 1.812 16.398 16.398 0 01.605 2.263c.048.265.085.52.11.763a12.637 12.637 0 01-.432 3.45 42.178 42.178 0 01-.423 1.702 58.225 58.225 0 01-.812 2.741l-.055.17-.02.057a.859.859 0 00.432 1.065.717.717 0 00.95-.483l.022-.065.059-.18a60.455 60.455 0 00.838-2.829 44.13 44.13 0 00.44-1.775 13.834 13.834 0 00.467-4.039q-.044-.44-.13-.908a18.154 18.154 0 00-.67-2.517 25.45 25.45 0 00-.308-.86z"/></clipPath><clipPath id="clip-path-11"><path class="cls-2" d="M27.254 43.459q.146-.572.268-1.117a13.834 13.834 0 00.468-4.038q-.045-.44-.13-.909a18.154 18.154 0 00-.67-2.516 25.45 25.45 0 00-.309-.86l.364.02a818.397 818.397 0 014.574.247c.997.058 1.833.11 2.476.154a82 82 0 018.987 1.296 60.67 60.67 0 0113.575 4.665l1.946.867a.715.715 0 00.958-.463.862.862 0 00-.413-1.073c-.033-.015-1.515-.676-1.948-.867a61.88 61.88 0 00-13.86-4.756 83.192 83.192 0 00-9.155-1.318 223.98 223.98 0 00-2.49-.155l-1.11-.063a858.696 858.696 0 00-4.617-.244l-.321-.016-.114-.006a.823.823 0 00-.687 1.208l.062.137a22.695 22.695 0 01.7 1.812 16.398 16.398 0 01.604 2.263c.05.265.086.52.11.763a12.637 12.637 0 01-.432 3.45c-.109.485-.234.994-.373 1.52z"/></clipPath><clipPath id="clip-path-13"><path class="cls-3" d="M23.513 43.459q.077-.205.152-.422a11.25 11.25 0 00.67-3.613 7.195 7.195 0 00-.162-1.457 13.213 13.213 0 00-.835-2.538 18.817 18.817 0 00-.98-1.936.644.644 0 00-.94-.21.784.784 0 00-.192 1.027c.011.02.036.06.07.122a17.257 17.257 0 01.815 1.632 11.7 11.7 0 01.74 2.23 5.612 5.612 0 01.128 1.13 9.721 9.721 0 01-.584 3.093c-.116.338-.24.654-.364.942z"/></clipPath><linearGradient id="New_Gradient_Swatch_1" x1="34.057" y1="1.904" x2="34.057" y2="21.653" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e559ff"/><stop offset="1" stop-color="#924dff"/></linearGradient><linearGradient id="New_Gradient_Swatch_2" x1="17.168" y1="11.682" x2="46.06" y2="30.967" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f1a5ff"/><stop offset="1" stop-color="#ff686c"/></linearGradient><linearGradient id="linear-gradient" x1="35.22" y1="27.024" x2="35.22" y2="43.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6f3cff"/><stop offset="1" stop-color="#3633ff"/></linearGradient><linearGradient id="New_Gradient_Swatch_2-2" x1="28.82" y1="41.374" x2="40.705" y2="55.625" xlink:href="#New_Gradient_Swatch_2"/><style>.cls-2{fill:none}.cls-3{fill:#f1a5ff}.cls-21{fill-rule:evenodd}.cls-10{clip-path:url(#clip-path-3)}.cls-11{fill:#974dff}.cls-18{fill:#373fff}.cls-21,.cls-22{fill:#fff}</style></defs><g style="isolation:isolate" clip-path="url(#clip-path)"><path fill="url(#New_Gradient_Swatch_1)" d="M-1.402 1.904h70.918v19.87H-1.402z"/><path fill="url(#New_Gradient_Swatch_2)" d="M61.469 31.062l8.111-1.112.183-2.604v-5.772l-.632-2.031H42.683v2.031H.449v5.772l5.704 1.88 21.604 1.836h4.707"/><path fill="url(#linear-gradient)" fill-rule="evenodd" d="M27.757 27.346H52.35v2.649l17.64-.047v11.475H33.354v2.036H.449V29.948l10.262-.737 17.046.132v-1.997z"/><g class="cls-10" clip-path="url(#clip-path-2)"><path class="cls-11" d="M23.856 9.536h36.806v17.131H23.856z"/></g><g clip-path="url(#clip-path-4)"><g clip-path="url(#clip-path-5)"><path class="cls-3" d="M24.195 9.355h36.467v13.057H24.195z"/></g></g><g class="cls-10" clip-path="url(#clip-path-6)"><path class="cls-11" d="M20.294 10.384h4.919v13.569h-4.919z"/></g><path class="cls-3" d="M23.513 21.553q.077-.208.152-.427a11.55 11.55 0 00.67-3.664 7.393 7.393 0 00-.162-1.477 13.53 13.53 0 00-.835-2.574 19.118 19.118 0 00-.98-1.963.64.64 0 00-.94-.212.802.802 0 00-.192 1.04l.07.124a17.627 17.627 0 01.815 1.655 11.98 11.98 0 01.74 2.262 5.767 5.767 0 01.128 1.145 9.98 9.98 0 01-.584 3.136c-.116.343-.24.663-.364.955z"/><g clip-path="url(#clip-path-8)"><path class="cls-3" d="M.449 1.775h69.202v55.034H.449z"/></g><path fill="url(#New_Gradient_Swatch_2-2)" d="M69.601 56.18H.399V43.459h32.905l-.002-2.07h36.299V56.18z"/><g class="cls-10" clip-path="url(#clip-path-9)"><path class="cls-18" d="M23.856 31.416h36.806v17.131H23.856z"/></g><g class="cls-10" clip-path="url(#clip-path-11)"><path class="cls-3" d="M24.195 31.416h36.467v12.89H24.195z"/></g><path class="cls-18" d="M21.226 34.343c.011.02.036.06.07.122a17.257 17.257 0 01.815 1.632 11.7 11.7 0 01.74 2.23 5.612 5.612 0 01.128 1.13 9.721 9.721 0 01-.584 3.093 13.293 13.293 0 01-.54 1.327 3.256 3.256 0 01-.044.09.778.778 0 00.258 1.01.649.649 0 00.924-.282c.046-.09.122-.246.216-.46.156-.352.311-.744.456-1.165a11.25 11.25 0 00.67-3.614A7.195 7.195 0 0024.174 38a13.213 13.213 0 00-.835-2.538 18.817 18.817 0 00-.98-1.937.644.644 0 00-.94-.209.784.784 0 00-.192 1.027z"/><path class="cls-3" d="M23.513 43.459q.077-.205.152-.422a11.25 11.25 0 00.67-3.613 7.195 7.195 0 00-.162-1.457 13.213 13.213 0 00-.835-2.538 18.817 18.817 0 00-.98-1.936.644.644 0 00-.94-.21.784.784 0 00-.192 1.027c.011.02.036.06.07.122a17.257 17.257 0 01.815 1.632 11.7 11.7 0 01.74 2.23 5.612 5.612 0 01.128 1.13 9.721 9.721 0 01-.584 3.093c-.116.338-.24.654-.364.942z"/><g clip-path="url(#clip-path-13)"><path class="cls-3" d="M.449 1.904h69.202V56.18H.449z"/></g></g><circle cx="12.226" cy="16.056" r="3"/><path class="cls-21" d="M9.226 15.817v-.037a3.234 3.234 0 113.232 3.328 2.985 2.985 0 01-3.186-2.766 2.359 2.359 0 002.446 2.073 2.567 2.567 0 10-2.492-2.598z"/><circle class="cls-22" cx="10.519" cy="16.743" r=".824"/><circle cx="12.226" cy="37.987" r="3"/><path class="cls-21" d="M9.226 37.748v-.037a3.234 3.234 0 113.232 3.329 2.985 2.985 0 01-3.186-2.767 2.359 2.359 0 002.445 2.074 2.567 2.567 0 10-2.491-2.599z"/><circle class="cls-22" cx="10.519" cy="38.675" r=".824"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/info.svg b/src/images/icons/info.svg
new file mode 100644
index 00000000000..38c9c3f9764
--- /dev/null
+++ b/src/images/icons/info.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+<path fill="currentColor" d="M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2v6Z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/language.svg b/src/images/icons/language.svg
index c23e6dd1f65..e179edfd5a3 100644
--- a/src/images/icons/language.svg
+++ b/src/images/icons/language.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 00-1.38-3.56A8.03 8.03 0 0118.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 015.08 16zm2.95-8H5.08a7.987 7.987 0 014.33-3.56A15.65 15.65 0 008.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 01-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/performance.svg b/src/images/icons/performance.svg
index 4ad7003fbd3..41797cf89e2 100644
--- a/src/images/icons/performance.svg
+++ b/src/images/icons/performance.svg
@@ -1 +1 @@
-<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".372" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g stroke="#212121"><path d="M32.48 20.355c10.083 0 18.257 8.173 18.257 18.256v3.309H14.225v-3.31c0-10.082 8.173-18.255 18.256-18.255z"/><path d="M39.676 25.555c.618.098 1.032.67.91 1.378l-5.55 15.488.006-.018a3.002 3.002 0 0 1-3.273 1.897 3.012 3.012 0 0 1-2.501-3.447c.079-.498.287-.952.582-1.328l8.667-13.38.157-.225a1.107 1.107 0 0 1 1.002-.365z" fill="#2979FF" fill-rule="nonzero"/><path d="M20.31 39.311c.11-6.098 5.777-13.72 14.9-11.35" stroke-dasharray="2.304"/></g></g></g></svg>
\ No newline at end of file
+<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".372" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g stroke="#212121"><path d="M32.48 20.355c10.083 0 18.257 8.173 18.257 18.256v3.309H14.225v-3.31c0-10.082 8.173-18.255 18.256-18.255z"/><path d="M39.676 25.555c.618.098 1.032.67.91 1.378l-5.55 15.488.006-.018a3.002 3.002 0 01-3.273 1.897 3.012 3.012 0 01-2.501-3.447c.079-.498.287-.952.582-1.328l8.667-13.38.157-.225a1.107 1.107 0 011.002-.365z" fill="#2979FF" fill-rule="nonzero"/><path d="M20.31 39.311c.11-6.098 5.777-13.72 14.9-11.35" stroke-dasharray="2.304"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/pwa.svg b/src/images/icons/pwa.svg
index 9b403e91f9e..32537d101f3 100644
--- a/src/images/icons/pwa.svg
+++ b/src/images/icons/pwa.svg
@@ -1 +1 @@
-<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".372" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g stroke="#212121"><path d="M22.293 46.534V16.787h20.052v29.747H22.293z"/><path d="M22.293 45.777v4.528a1.5 1.5 0 0 0 1.5 1.5h17.052a1.5 1.5 0 0 0 1.5-1.5v-4.528H22.293zM22.293 19.301v-4.528a1.5 1.5 0 0 1 1.5-1.5h17.052a1.5 1.5 0 0 1 1.5 1.5v4.528H22.293z" fill="#2979FF" fill-rule="nonzero"/></g></g></g></svg>
\ No newline at end of file
+<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".758" y=".372" width="64" height="64" rx="32"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g transform="translate(-48.212 -48.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g><g stroke="#212121"><path d="M22.293 46.534V16.787h20.052v29.747H22.293z"/><path d="M22.293 45.777v4.528a1.5 1.5 0 001.5 1.5h17.052a1.5 1.5 0 001.5-1.5v-4.528H22.293zm0-26.476v-4.528a1.5 1.5 0 011.5-1.5h17.052a1.5 1.5 0 011.5 1.5v4.528H22.293z" fill="#2979FF" fill-rule="nonzero"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/reload.svg b/src/images/icons/reload.svg
index acf60692bef..61e3b68ec61 100644
--- a/src/images/icons/reload.svg
+++ b/src/images/icons/reload.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" style=""><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
-
-
-<g class="currentLayer" style=""><title>Layer 1</title><path d="M6,0 C2.6899999999999995,0 0,2.6899999999999995 0,6 C0,9.31 2.6899999999999995,12 6,12 C9.309999999999999,12 12,9.31 12,6 H10 C10,8.2091 8.2091,10 6,10 C3.7909000000000006,10 2,8.2091 2,6 C2,3.7909000000000006 3.7909000000000006,2 6,2 C7.275600000000001,2 8.392600000000002,2.6012699999999995 9.125,3.5312 H11.468800000000002 C10.526599999999998,1.4496000000000002 8.430800000000001,0 6,0 z" fill="black" id="svg_1" class=""/><path d="M11.091000000000001,0.8799999999999999 V3.9718 H7.999199999999998 L11.091000000000001,0.8799999999999999 z" fill="black" stroke="black" stroke-width="1.068" id="svg_2" class=""/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none"><rect width="100%" height="100%"/><g class="currentLayer" fill="#000"><path d="M6 0C2.69 0 0 2.69 0 6s2.69 6 6 6 6-2.69 6-6h-2a4 4 0 11-4-4c1.276 0 2.393.601 3.125 1.531h2.344A6.004 6.004 0 006 0z"/><path d="M11.091.88v3.092H7.999L11.091.88z" stroke="#000" stroke-width="1.068"/></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/rss.svg b/src/images/icons/rss.svg
index 762c6f045b6..5b382b934ac 100644
--- a/src/images/icons/rss.svg
+++ b/src/images/icons/rss.svg
@@ -1,7 +1 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd">
-    <path d="M4 0h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#FFA200"/>
-    <circle fill="#FFF" fill-rule="nonzero" cx="6.18" cy="17.82" r="2.18"/>
-    <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z" fill="#FFF" fill-rule="nonzero"/>
-  </g>
-</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M4 0h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z" fill="#FFA200"/><circle fill="#FFF" fill-rule="nonzero" cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z" fill="#FFF" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/safari.svg b/src/images/icons/safari.svg
new file mode 100644
index 00000000000..e7ce3fc2dfe
--- /dev/null
+++ b/src/images/icons/safari.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="25%" stop-color="#DBDBDA"/><stop offset="100%" stop-color="#FFF"/></linearGradient><linearGradient id="d" x1="49.05%" x2="25.713%" y1="35.703%" y2="77.572%"><stop offset="0%" stop-opacity="0"/><stop offset="100%"/></linearGradient><filter id="b" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.266007133 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="e" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 13 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="c" cx="57.025%" cy="39.017%" r="61.032%" fx="57.025%" fy="39.017%"><stop offset="0%" stop-color="#2ABCE1"/><stop offset="11.363%" stop-color="#2ABBE1"/><stop offset="100%" stop-color="#3375F8"/></radialGradient></defs><g transform="translate(4 2)"><circle cx="124" cy="124" r="124" fill="url(#a)" filter="url(#b)"/><circle cx="124" cy="124" r="114.7" fill="url(#c)"/><g transform="translate(9.688 8.719)"><path fill="#F3F3F3" d="M114.506 28.481c-.775 0-1.453-.581-1.453-1.356V6.878c0-.775.678-1.356 1.453-1.356s1.453.581 1.453 1.356v20.247c-.097.775-.678 1.356-1.453 1.356z"/><path fill="#FFF" d="M114.506 28.578c-.872 0-1.55-.678-1.55-1.453V6.878c0-.775.678-1.453 1.55-1.453s1.55.678 1.55 1.453v20.247c0 .775-.775 1.453-1.55 1.453zm0-22.96c-.678 0-1.356.582-1.356 1.26v20.247c0 .678.581 1.26 1.356 1.26.678 0 1.356-.582 1.356-1.26V6.878c-.096-.678-.678-1.26-1.356-1.26z"/><path fill="#F3F3F3" d="M124.194 17.631c-.775-.097-1.356-.678-1.356-1.453l.678-9.01c.096-.774.775-1.356 1.55-1.259.775.097 1.356.679 1.356 1.454l-.678 9.009c-.097.775-.775 1.356-1.55 1.26z"/><path fill="#FFF" d="M124.194 17.728c-.872-.097-1.453-.775-1.453-1.55l.678-9.01c.097-.774.775-1.452 1.647-1.356.871.097 1.453.776 1.453 1.55l-.678 9.01c-.097.872-.775 1.453-1.647 1.356zm.872-11.722c-.678 0-1.357.485-1.357 1.163l-.678 9.01c0 .677.485 1.259 1.26 1.355.678 0 1.356-.484 1.356-1.162l.678-9.01c0-.678-.581-1.259-1.26-1.356z"/><path fill="#F3F3F3" d="M131.46 30.225c-.776-.194-1.26-.872-1.163-1.647l3.972-19.86c.194-.774.872-1.259 1.647-1.065.775.194 1.259.872 1.162 1.647l-3.972 19.86c-.097.677-.872 1.162-1.647 1.065z"/><path fill="#FFF" d="M131.46 30.322c-.873-.194-1.357-.969-1.26-1.744l3.972-19.86c.194-.774.969-1.356 1.84-1.162.872.194 1.357.969 1.26 1.744L133.3 29.16c-.194.774-.969 1.259-1.84 1.162zm4.552-22.572c-.678-.097-1.356.29-1.55.969l-3.971 19.86c-.097.677.29 1.355 1.065 1.55.678.096 1.356-.292 1.55-.97L137.078 9.3c.097-.775-.387-1.356-1.066-1.55z"/><path fill="#F3F3F3" d="M143.084 21.506a1.444 1.444 0 0 1-1.065-1.744l2.422-8.718c.193-.775.968-1.163 1.743-.969.775.194 1.26.969 1.066 1.744l-2.422 8.719c-.194.774-.969 1.162-1.744.968z"/><path fill="#FFF" d="M143.084 21.603c-.775-.194-1.356-1.066-1.065-1.84l2.422-8.72c.193-.774 1.065-1.259 1.84-1.065.775.194 1.356 1.066 1.066 1.84l-2.422 8.72c-.194.774-.969 1.259-1.84 1.065zm3.197-11.334c-.678-.194-1.453.194-1.647.872l-2.421 8.718c-.194.678.193 1.357.968 1.55.678.194 1.453-.193 1.647-.871l2.422-8.72c.097-.677-.29-1.355-.969-1.55z"/><path fill="#F3F3F3" d="M147.831 35.166c-.775-.291-1.065-1.163-.775-1.841l7.75-18.697c.29-.678 1.163-1.066 1.84-.678.776.29 1.067 1.163.776 1.84l-7.75 18.697c-.29.679-1.163 1.066-1.84.679z"/><path fill="#FFF" d="M147.831 35.263a1.505 1.505 0 0 1-.872-1.938l7.75-18.697c.291-.775 1.163-1.066 2.035-.775a1.505 1.505 0 0 1 .872 1.938l-7.75 18.697c-.388.775-1.26 1.162-2.035.775zm8.816-21.216c-.678-.29-1.453 0-1.744.678l-7.75 18.697c-.29.678.097 1.356.775 1.647.678.29 1.453 0 1.744-.678l7.75-18.697c.194-.582-.097-1.357-.775-1.647z"/><path fill="#F3F3F3" d="M160.91 28.966c-.679-.388-.97-1.163-.679-1.841l4.069-8.04c.387-.679 1.162-.97 1.938-.582.678.388.968 1.163.678 1.84l-4.07 8.041c-.387.678-1.162.97-1.937.582z"/><path fill="#FFF" d="M160.91 29.063c-.776-.388-1.066-1.26-.679-2.035l4.069-8.04c.387-.776 1.26-1.066 2.034-.679.775.388 1.066 1.26.678 2.035l-4.068 8.04c-.388.775-1.26 1.066-2.035.678zm5.328-10.56c-.679-.29-1.454-.097-1.744.581l-4.069 8.041c-.29.581 0 1.356.581 1.744.678.29 1.453.097 1.744-.581l4.069-8.041c.29-.581 0-1.356-.581-1.744z"/><path fill="#F3F3F3" d="M162.847 43.303c-.678-.484-.872-1.356-.388-1.937l11.238-16.76c.387-.678 1.26-.775 1.937-.387.679.484.872 1.356.388 1.937l-11.238 16.76c-.387.678-1.259.872-1.937.387z"/><path fill="#FFF" d="M162.847 43.4c-.678-.484-.872-1.453-.484-2.131l11.237-16.76c.484-.678 1.356-.872 2.131-.387.678.484.872 1.453.485 2.131l-11.238 16.76c-.484.678-1.453.871-2.131.387zm12.787-19.084c-.58-.388-1.453-.291-1.84.29l-11.238 16.76c-.387.58-.194 1.356.388 1.743.581.388 1.453.291 1.84-.29l11.238-16.663c.387-.581.194-1.453-.388-1.84z"/><path fill="#F3F3F3" d="M176.99 39.719c-.58-.485-.774-1.357-.29-1.938l5.619-7.072c.484-.58 1.356-.678 1.937-.193.582.484.775 1.356.29 1.937l-5.618 7.072c-.484.581-1.356.678-1.937.194z"/><path fill="#FFF" d="M176.894 39.816c-.678-.485-.775-1.454-.29-2.132l5.618-7.071c.484-.679 1.453-.776 2.131-.194.678.484.775 1.453.29 2.131l-5.618 7.072c-.484.678-1.453.775-2.131.194zm7.265-9.204c-.58-.484-1.356-.387-1.84.194l-5.619 7.072c-.387.581-.29 1.356.29 1.84.582.485 1.357.388 1.841-.193l5.619-7.072c.388-.581.29-1.453-.29-1.84z"/><path fill="#F3F3F3" d="M176.022 54.25c-.581-.581-.581-1.453 0-1.938l14.337-14.24c.582-.581 1.453-.485 1.938 0 .484.484.581 1.453 0 1.937l-14.24 14.241c-.582.581-1.454.581-2.035 0z"/><path fill="#FFF" d="M175.925 54.347a1.52 1.52 0 0 1 0-2.131l14.337-14.241a1.52 1.52 0 0 1 2.132 0 1.52 1.52 0 0 1 0 2.131l-14.338 14.24a1.52 1.52 0 0 1-2.131 0zm16.372-16.275c-.484-.485-1.356-.485-1.84 0l-14.338 14.24c-.485.485-.485 1.357 0 1.841.484.485 1.356.485 1.84 0l14.338-14.24c.484-.485.484-1.26 0-1.841z"/><path fill="#F3F3F3" d="M190.553 53.475c-.484-.581-.484-1.453.097-1.938l6.878-5.812c.581-.484 1.453-.388 1.938.194.484.581.484 1.453-.097 1.937l-6.878 5.813c-.582.484-1.454.387-1.938-.194z"/><path fill="#FFF" d="M190.456 53.572c-.581-.678-.484-1.647.097-2.131l6.878-5.813c.581-.581 1.55-.484 2.131.194.582.678.485 1.647-.096 2.131l-6.879 5.813c-.58.58-1.55.484-2.13-.194zm8.913-7.653c-.485-.581-1.26-.581-1.84-.194l-6.879 5.813c-.484.484-.581 1.259-.097 1.84.484.581 1.26.581 1.84.194l6.879-5.813c.581-.484.581-1.259.097-1.84z"/><path fill="#F3F3F3" d="M186.678 67.425c-.484-.678-.29-1.55.388-1.938l16.856-11.237c.678-.388 1.55-.194 1.937.388.485.678.291 1.55-.387 1.937l-16.856 11.237c-.582.388-1.454.194-1.938-.387z"/><path fill="#FFF" d="M186.581 67.425c-.484-.678-.29-1.647.388-2.131l16.856-11.238c.678-.484 1.647-.29 2.131.485.485.678.29 1.647-.387 2.13L188.713 67.91c-.679.485-1.647.291-2.132-.484zm19.181-12.69c-.387-.582-1.162-.776-1.743-.388l-16.857 11.237c-.58.388-.775 1.163-.29 1.841.387.581 1.162.775 1.744.388l16.856-11.238c.581-.484.678-1.26.29-1.84z"/><path fill="#F3F3F3" d="M201.113 69.46c-.388-.679-.194-1.55.484-1.938l7.847-4.456c.678-.388 1.55-.097 1.937.58.388.679.194 1.55-.484 1.938l-7.847 4.457c-.678.387-1.55.097-1.938-.582z"/><path fill="#FFF" d="M201.016 69.556c-.388-.775-.194-1.647.484-2.034l7.847-4.456c.678-.388 1.647-.097 2.034.58.388.776.194 1.648-.484 2.035l-7.847 4.457c-.678.387-1.647.096-2.034-.582zm10.268-5.812c-.387-.678-1.162-.872-1.743-.485l-7.847 4.457c-.581.387-.775 1.162-.485 1.743.388.678 1.163.872 1.744.485l7.847-4.457c.581-.29.775-1.065.484-1.743z"/><path fill="#F3F3F3" d="M194.622 82.344c-.29-.775 0-1.55.775-1.84l18.697-7.75c.678-.291 1.55.096 1.84.774.291.775 0 1.55-.775 1.84l-18.696 7.75c-.679.291-1.55 0-1.841-.774z"/><path fill="#FFF" d="M194.525 82.44c-.29-.774 0-1.646.775-2.034l18.697-7.75a1.505 1.505 0 0 1 1.937.872c.291.775 0 1.647-.775 2.034l-18.696 7.75a1.505 1.505 0 0 1-1.938-.871zm21.216-8.815c-.291-.678-1.066-.969-1.647-.775l-18.697 7.75c-.678.29-.969 1.066-.678 1.744.29.678 1.065.969 1.647.775l18.696-7.75c.679-.29.97-1.066.679-1.744z"/><path fill="#F3F3F3" d="M208.281 87.188c-.29-.776.097-1.55.872-1.841l8.525-2.81c.678-.29 1.55.194 1.744.872.29.775-.097 1.55-.872 1.841l-8.525 2.81c-.678.29-1.453-.097-1.744-.873z"/><path fill="#FFF" d="M208.184 87.284c-.29-.775.097-1.647.97-1.937l8.524-2.81c.775-.29 1.647.194 1.938.97.29.774-.097 1.646-.97 1.937l-8.524 2.81c-.775.193-1.647-.195-1.938-.97zm11.238-3.68c-.194-.679-.969-1.067-1.647-.873l-8.525 2.81c-.678.193-.969.968-.775 1.647.194.678.969 1.065 1.647.871l8.525-2.809c.678-.29.969-.969.775-1.647z"/><path fill="#F3F3F3" d="M199.563 98.716c-.194-.775.29-1.55 1.065-1.647l19.86-3.875c.774-.194 1.453.387 1.646 1.162.194.775-.29 1.55-1.065 1.647l-19.86 3.875c-.775.097-1.55-.387-1.647-1.162z"/><path fill="#FFF" d="M199.369 98.716c-.194-.872.387-1.647 1.162-1.841L220.391 93c.775-.194 1.55.388 1.743 1.26.194.871-.387 1.646-1.162 1.84l-19.86 3.875c-.774.194-1.55-.387-1.743-1.26zm22.572-4.36c-.097-.678-.775-1.162-1.453-1.065l-19.86 3.875c-.678.097-1.162.871-.969 1.55.097.678.775 1.162 1.454 1.065l19.859-3.875c.678-.194 1.162-.872.969-1.55z"/><path fill="#F3F3F3" d="M211.963 106.175c-.097-.775.387-1.453 1.162-1.55l8.912-1.066c.775-.096 1.454.485 1.55 1.26.097.775-.387 1.453-1.162 1.55l-8.913 1.065c-.678.097-1.453-.484-1.55-1.259z"/><path fill="#FFF" d="M211.866 106.175c-.097-.872.484-1.647 1.259-1.744l8.912-1.065c.775-.097 1.55.484 1.647 1.356.097.872-.484 1.647-1.259 1.744l-8.913 1.065c-.774.097-1.55-.484-1.646-1.356zm11.721-1.356c-.096-.678-.774-1.26-1.453-1.163l-8.912 1.066c-.678.097-1.163.775-1.066 1.453.097.678.775 1.26 1.453 1.163l8.913-1.066c.678-.097 1.162-.775 1.066-1.453z"/><path fill="#F3F3F3" d="M201.113 115.572c0-.775.58-1.453 1.356-1.453h20.247c.775 0 1.356.678 1.356 1.453s-.581 1.453-1.356 1.453h-20.247c-.775 0-1.356-.678-1.356-1.453z"/><path fill="#FFF" d="M201.016 115.572c0-.872.678-1.55 1.453-1.55h20.247c.775 0 1.453.678 1.453 1.55s-.678 1.55-1.453 1.55h-20.247c-.775 0-1.453-.678-1.453-1.55zm22.959.097c0-.678-.581-1.356-1.26-1.356H202.47c-.678 0-1.26.58-1.26 1.356 0 .678.582 1.356 1.26 1.356h20.247c.678-.097 1.259-.678 1.259-1.356z"/><path fill="#F3F3F3" d="M211.866 125.356c.096-.775.678-1.356 1.453-1.356l9.01.678c.774.097 1.355.775 1.258 1.55-.096.775-.678 1.356-1.453 1.356l-9.009-.678c-.678-.097-1.26-.775-1.26-1.55z"/><path fill="#FFF" d="M211.769 125.356c.097-.872.775-1.453 1.55-1.453l9.01.678c.774.097 1.452.775 1.355 1.647-.096.872-.775 1.453-1.55 1.453l-9.009-.678c-.775-.097-1.356-.872-1.356-1.647zm11.819.872c.096-.678-.485-1.356-1.163-1.356l-9.01-.678c-.677 0-1.259.484-1.356 1.26-.096.677.485 1.355 1.163 1.355l9.01.678c.677 0 1.259-.58 1.356-1.259z"/><path fill="#F3F3F3" d="M199.369 132.428c.194-.775.872-1.26 1.647-1.162l19.859 3.972c.775.193 1.26.871 1.066 1.646-.194.775-.872 1.26-1.647 1.163l-19.86-3.972c-.678-.097-1.162-.872-1.065-1.647z"/><path fill="#FFF" d="M199.272 132.428c.194-.872.969-1.356 1.744-1.26l19.859 3.973c.775.193 1.356.968 1.162 1.84-.193.872-.968 1.357-1.743 1.26l-19.86-3.972c-.775-.194-1.259-.969-1.162-1.84zm22.572 4.553c.097-.678-.29-1.356-.969-1.55l-19.86-3.972c-.677-.096-1.356.291-1.55 1.066-.096.678.291 1.356.97 1.55l19.859 3.972c.775.097 1.356-.388 1.55-1.066z"/><path fill="#F3F3F3" d="M208.088 144.053a1.444 1.444 0 0 1 1.743-1.065l8.719 2.421c.775.194 1.162.97.969 1.744a1.444 1.444 0 0 1-1.744 1.066l-8.719-2.422c-.775-.194-1.162-.969-.969-1.744z"/><path fill="#FFF" d="M207.99 144.053c.194-.775 1.066-1.356 1.841-1.065l8.719 2.421c.775.194 1.26 1.066 1.066 1.841-.194.775-1.066 1.356-1.841 1.066l-8.719-2.422c-.775-.194-1.26-.969-1.065-1.84zm11.335 3.197c.194-.678-.194-1.453-.872-1.647l-8.719-2.422c-.678-.194-1.356.194-1.55.969-.193.678.194 1.453.872 1.647l8.719 2.422c.678.097 1.356-.29 1.55-.969z"/><path fill="#F3F3F3" d="M194.428 148.703c.29-.775 1.163-1.066 1.84-.775l18.698 7.75c.678.29 1.065 1.163.775 1.84-.291.776-1.163 1.066-1.841.776l-18.697-7.75c-.775-.29-1.066-1.163-.775-1.84z"/><path fill="#FFF" d="M194.331 148.606a1.505 1.505 0 0 1 1.938-.872l18.697 7.75c.775.291 1.065 1.163.775 2.035a1.505 1.505 0 0 1-1.938.872l-18.697-7.75c-.775-.388-1.065-1.26-.775-2.035zm21.216 8.816c.29-.678 0-1.453-.678-1.744l-18.697-7.75c-.678-.29-1.356.097-1.647.775-.29.678 0 1.453.678 1.744l18.697 7.75c.678.194 1.453-.097 1.647-.775z"/><path fill="#F3F3F3" d="M200.725 161.781c.388-.678 1.162-.969 1.84-.678l8.041 4.069c.678.29.969 1.162.582 1.937-.388.678-1.163.97-1.841.678l-8.04-4.068c-.679-.388-.97-1.26-.582-1.938z"/><path fill="#FFF" d="M200.628 161.684c.388-.775 1.26-1.065 2.035-.678l8.04 4.069c.775.388 1.066 1.26.678 2.034-.387.775-1.26 1.066-2.034.678l-8.04-4.068c-.776-.29-1.066-1.26-.679-2.035zm10.463 5.328c.29-.678.096-1.453-.582-1.743l-8.04-4.069c-.582-.29-1.356 0-1.744.581-.29.678-.097 1.453.581 1.744l8.04 4.069c.679.29 1.454.097 1.745-.582z"/><path fill="#F3F3F3" d="M186.484 163.622c.485-.678 1.26-.872 1.938-.388l16.856 11.238c.678.387.775 1.26.388 1.937-.485.679-1.26.872-1.938.388l-16.856-11.238c-.678-.484-.872-1.356-.388-1.937z"/><path fill="#FFF" d="M186.387 163.525c.485-.678 1.454-.872 2.132-.484l16.856 11.237c.678.484.872 1.356.387 2.131-.484.679-1.453.872-2.13.485l-16.857-11.238c-.775-.484-.872-1.453-.388-2.131zm19.085 12.787c.387-.58.29-1.453-.29-1.84l-16.857-11.238c-.581-.387-1.356-.193-1.744.388-.387.581-.29 1.453.29 1.84l16.857 11.238c.581.388 1.356.194 1.744-.387z"/><path fill="#F3F3F3" d="M190.069 177.669c.484-.582 1.356-.775 1.937-.29l7.072 5.521c.581.484.678 1.356.194 1.938-.484.58-1.356.775-1.938.29l-7.072-5.522c-.58-.484-.678-1.356-.193-1.937z"/><path fill="#FFF" d="M189.972 177.572c.484-.678 1.453-.775 2.131-.29l7.072 5.521c.678.484.775 1.453.29 2.131-.484.679-1.453.775-2.13.291l-7.073-5.522c-.678-.484-.774-1.453-.29-2.131zm9.3 7.266c.484-.582.387-1.357-.194-1.841l-7.072-5.522c-.581-.387-1.356-.29-1.84.29-.485.582-.388 1.357.193 1.841l7.072 5.522c.581.388 1.356.29 1.84-.29z"/><path fill="#F3F3F3" d="M175.634 176.7c.582-.581 1.454-.581 1.938 0l14.337 14.24c.582.582.485 1.454 0 1.938-.58.581-1.453.581-1.937 0l-14.338-14.24c-.484-.485-.484-1.454 0-1.938z"/><path fill="#FFF" d="M175.634 176.603a1.52 1.52 0 0 1 2.132 0l14.337 14.24a1.52 1.52 0 0 1 0 2.132 1.52 1.52 0 0 1-2.131 0l-14.338-14.24c-.678-.582-.678-1.55 0-2.132zm16.275 16.178c.485-.484.485-1.356 0-1.84L177.572 176.7c-.484-.484-1.356-.484-1.84 0-.485.484-.485 1.356 0 1.84l14.337 14.241c.484.582 1.26.582 1.84 0z"/><path fill="#F3F3F3" d="M176.506 191.134c.582-.484 1.453-.484 1.938.097l5.91 6.781c.483.582.387 1.454-.195 1.938-.58.484-1.453.484-1.937-.097l-5.91-6.781c-.484-.484-.387-1.356.194-1.938z"/><path fill="#FFF" d="M176.41 191.134c.678-.58 1.55-.484 2.13.097l5.91 6.781c.581.582.484 1.55-.194 2.132-.678.581-1.55.484-2.131-.097l-5.91-6.781c-.484-.678-.484-1.647.194-2.132zm7.75 8.816c.58-.484.58-1.26.193-1.84l-5.91-6.782c-.484-.484-1.259-.581-1.84-.097-.581.485-.581 1.26-.194 1.84l5.91 6.782c.484.581 1.26.581 1.84.097z"/><path fill="#F3F3F3" d="M162.556 187.453c.678-.484 1.55-.29 1.938.388L175.73 204.6c.388.678.194 1.55-.387 1.938-.678.484-1.55.29-1.938-.388l-11.237-16.76c-.388-.677-.194-1.55.387-1.937z"/><path fill="#FFF" d="M162.556 187.356c.678-.484 1.647-.29 2.131.388l11.238 16.76c.484.677.29 1.646-.484 2.13-.679.485-1.647.291-2.132-.387l-11.237-16.76c-.484-.774-.29-1.646.484-2.13zm12.788 19.085c.581-.388.775-1.163.387-1.744l-11.237-16.76c-.388-.58-1.163-.678-1.84-.29-.582.387-.776 1.162-.388 1.744l11.237 16.759c.388.484 1.26.678 1.84.29z"/><path fill="#F3F3F3" d="M160.522 201.79c.678-.387 1.55-.193 1.937.485l4.457 7.847c.387.678.096 1.55-.582 1.937-.678.388-1.55.194-1.937-.484l-4.456-7.847c-.291-.678-.097-1.55.58-1.937z"/><path fill="#FFF" d="M160.522 201.694c.775-.388 1.647-.194 2.034.484l4.456 7.847c.388.678.194 1.647-.58 2.034-.776.388-1.648.194-2.035-.484l-4.456-7.847c-.388-.678-.194-1.55.58-2.034zm5.812 10.269c.582-.388.872-1.163.485-1.744l-4.456-7.847c-.388-.581-1.163-.775-1.744-.485-.582.388-.872 1.163-.485 1.744l4.457 7.847c.29.581 1.162.872 1.743.484z"/><path fill="#F3F3F3" d="M147.637 195.397c.775-.29 1.55 0 1.841.678l7.847 18.697c.29.678-.097 1.55-.775 1.84-.678.291-1.55 0-1.84-.678l-7.847-18.696c-.291-.679.096-1.55.774-1.841z"/><path fill="#FFF" d="M147.637 195.3c.775-.29 1.647 0 2.035.775l7.847 18.697a1.505 1.505 0 0 1-.872 1.937c-.775.291-1.647 0-2.034-.775l-7.847-18.696c-.291-.679.097-1.55.871-1.938zm8.816 21.216c.678-.291.969-1.066.678-1.647l-7.847-18.697c-.29-.678-1.065-.969-1.743-.678-.678.29-.97 1.065-.678 1.647l7.846 18.697c.388.678 1.066.968 1.744.678z"/><path fill="#F3F3F3" d="M142.89 209.153c.776-.29 1.55.097 1.841.872l2.81 8.525c.29.678-.194 1.55-.872 1.744-.775.29-1.55-.097-1.84-.872l-2.81-8.525c-.29-.678.097-1.453.872-1.744z"/><path fill="#FFF" d="M142.794 209.056a1.505 1.505 0 0 1 1.937.872l2.81 8.525c.29.775-.194 1.647-.97 1.938a1.505 1.505 0 0 1-1.937-.872l-2.809-8.525c-.194-.775.194-1.647.969-1.938zm3.778 11.14c.678-.193 1.065-.968.872-1.646l-2.81-8.525c-.193-.678-.968-.969-1.646-.775-.679.194-1.066.969-.872 1.647l2.809 8.525a1.223 1.223 0 0 0 1.647.775z"/><path fill="#F3F3F3" d="M131.46 200.338c.774-.194 1.55.29 1.646 1.065l4.069 19.86c.194.774-.388 1.453-1.163 1.646-.774.194-1.55-.29-1.646-1.065l-4.07-19.86c-.096-.678.388-1.453 1.163-1.647z"/><path fill="#FFF" d="M131.46 200.24c.871-.193 1.646.388 1.84 1.163l4.069 19.86c.194.774-.388 1.646-1.163 1.743-.872.194-1.647-.387-1.84-1.162l-4.07-19.86c-.193-.775.292-1.55 1.163-1.743zm4.552 22.572c.679-.096 1.163-.775 1.066-1.55l-4.069-19.859c-.096-.678-.871-1.162-1.55-.969-.678.097-1.162.775-1.065 1.55l4.069 19.86c.193.678.871 1.065 1.55.969z"/><path fill="#F3F3F3" d="M124.097 212.931c.775-.097 1.453.388 1.647 1.163l1.162 8.912c.097.775-.484 1.453-1.26 1.55-.774.097-1.452-.387-1.646-1.162l-1.162-8.913c-.097-.775.484-1.453 1.259-1.55z"/><path fill="#FFF" d="M124.097 212.834c.872-.096 1.647.485 1.744 1.26l1.162 8.912c.097.775-.484 1.55-1.356 1.647-.872.097-1.647-.484-1.744-1.26l-1.162-8.912c-.097-.775.484-1.55 1.356-1.647zm1.453 11.625c.678-.096 1.26-.775 1.163-1.453l-1.163-8.912c-.097-.678-.775-1.163-1.453-1.066-.678.097-1.26.775-1.163 1.453l1.163 8.913c.097.678.775 1.162 1.453 1.065z"/><path fill="#F3F3F3" d="M114.119 202.081c.775 0 1.453.582 1.453 1.357v20.246c0 .775-.678 1.357-1.453 1.357s-1.453-.582-1.453-1.357v-20.246c.097-.775.678-1.357 1.453-1.357z"/><path fill="#FFF" d="M114.119 201.984c.872 0 1.55.678 1.55 1.453v20.247c0 .775-.678 1.453-1.55 1.453s-1.55-.678-1.55-1.453v-20.246c0-.775.775-1.454 1.55-1.454zm0 22.96c.678 0 1.356-.581 1.356-1.26v-20.246c0-.679-.581-1.26-1.356-1.26-.678 0-1.356.581-1.356 1.26v20.246c.096.679.678 1.26 1.356 1.26z"/><path fill="#F3F3F3" d="M104.431 212.931c.775.097 1.356.678 1.356 1.453l-.678 9.01c-.096.775-.775 1.356-1.55 1.26-.775-.098-1.356-.679-1.356-1.454l.678-9.01c.097-.774.775-1.356 1.55-1.259z"/><path fill="#FFF" d="M104.431 212.834c.872.097 1.453.775 1.453 1.55l-.678 9.01c-.097.775-.775 1.453-1.647 1.356-.871-.097-1.453-.775-1.453-1.55l.678-9.01c.097-.871.775-1.452 1.647-1.356zm-.872 11.722c.678 0 1.357-.484 1.357-1.162l.678-9.01c0-.678-.485-1.259-1.26-1.356-.678 0-1.356.484-1.356 1.163l-.678 9.009c0 .678.581 1.26 1.26 1.356z"/><path fill="#F3F3F3" d="M97.166 200.338c.775.193 1.259.871 1.162 1.646l-3.972 19.86c-.194.775-.872 1.26-1.647 1.065-.775-.193-1.259-.871-1.162-1.647l3.972-19.859c.097-.678.872-1.162 1.647-1.065z"/><path fill="#FFF" d="M97.166 200.24c.871.194 1.356.97 1.259 1.744l-3.972 19.86c-.194.775-.969 1.356-1.84 1.162-.872-.194-1.357-.969-1.26-1.744l3.972-19.859c.194-.775.969-1.26 1.84-1.162zm-4.553 22.572c.678.097 1.356-.29 1.55-.968l3.971-19.86c.097-.678-.29-1.356-1.065-1.55-.678-.096-1.356.291-1.55.97l-3.972 19.858c-.097.775.387 1.357 1.066 1.55z"/><path fill="#F3F3F3" d="M85.54 209.056c.776.194 1.26.969 1.066 1.744l-2.422 8.719c-.193.775-.968 1.162-1.743.969a1.444 1.444 0 0 1-1.066-1.744l2.422-8.719c.194-.775.969-1.162 1.744-.969z"/><path fill="#FFF" d="M85.54 208.96c.776.193 1.357 1.065 1.066 1.84l-2.422 8.719c-.193.775-1.065 1.26-1.84 1.065-.775-.193-1.356-1.065-1.066-1.84l2.422-8.719c.194-.775.969-1.26 1.84-1.066zm-3.196 11.334c.678.194 1.453-.194 1.647-.872l2.421-8.719c.194-.678-.193-1.356-.968-1.55-.678-.194-1.453.194-1.647.872l-2.422 8.719c-.097.678.29 1.356.969 1.55z"/><path fill="#F3F3F3" d="M80.794 195.397c.775.29 1.065 1.162.775 1.84l-7.75 18.697c-.29.679-1.163 1.066-1.84.679-.679-.388-1.067-1.163-.776-1.841l7.75-18.697c.29-.678 1.163-1.066 1.84-.678z"/><path fill="#FFF" d="M80.794 195.3a1.505 1.505 0 0 1 .872 1.938l-7.75 18.696c-.291.775-1.163 1.066-2.035.775a1.505 1.505 0 0 1-.872-1.937l7.75-18.697c.388-.775 1.26-1.162 2.035-.775zm-8.816 21.216c.678.29 1.453 0 1.744-.678l7.75-18.697c.29-.678-.097-1.357-.775-1.647-.678-.29-1.453 0-1.744.678l-7.75 18.697c-.194.581.097 1.356.775 1.647z"/><path fill="#F3F3F3" d="M67.716 201.597c.678.387.968 1.162.678 1.84l-4.069 8.041c-.388.678-1.163.969-1.938.581-.678-.387-.968-1.162-.678-1.84l4.07-8.04c.387-.679 1.162-.97 1.937-.582z"/><path fill="#FFF" d="M67.716 201.5c.775.387 1.065 1.26.678 2.034l-4.069 8.041c-.388.775-1.26 1.066-2.034.678-.775-.387-1.066-1.26-.678-2.034l4.068-8.04c.388-.776 1.26-1.066 2.035-.679zm-5.328 10.56c.678.29 1.453.096 1.743-.582l4.069-8.04c.29-.582 0-1.357-.581-1.744-.678-.29-1.453-.097-1.744.581l-4.069 8.04c-.29.582 0 1.357.582 1.744z"/><path fill="#F3F3F3" d="M65.778 187.26c.678.484.872 1.356.388 1.937l-11.238 16.76c-.387.677-1.26.774-1.937.387-.678-.485-.872-1.356-.388-1.938l11.238-16.76c.387-.677 1.259-.871 1.937-.387z"/><path fill="#FFF" d="M65.778 187.162c.678.485.872 1.454.484 2.132l-11.237 16.76c-.484.677-1.356.871-2.131.387-.678-.485-.872-1.453-.485-2.132l11.238-16.759c.484-.678 1.453-.872 2.131-.388zm-12.787 19.085c.58.387 1.453.29 1.84-.29l11.238-16.76c.387-.581.194-1.356-.388-1.744-.581-.387-1.453-.29-1.84.29l-11.238 16.663c-.387.582-.194 1.453.388 1.84z"/><path fill="#F3F3F3" d="M51.634 190.844c.582.484.775 1.356.291 1.937l-5.619 7.072c-.484.581-1.356.678-1.937.194-.581-.484-.775-1.356-.29-1.938l5.618-7.072c.484-.58 1.356-.678 1.937-.193z"/><path fill="#FFF" d="M51.731 190.747c.678.484.775 1.453.29 2.131l-5.618 7.072c-.484.678-1.453.775-2.131.194-.678-.485-.775-1.453-.29-2.132l5.618-7.071c.484-.679 1.453-.775 2.131-.194zm-7.265 9.203c.58.484 1.356.388 1.84-.194l5.619-7.072c.388-.58.29-1.356-.29-1.84-.582-.485-1.357-.388-1.841.194l-5.619 7.071c-.387.582-.29 1.453.29 1.841z"/><path fill="#F3F3F3" d="M52.603 176.313c.581.58.581 1.453 0 1.937l-14.337 14.24c-.582.582-1.453.485-1.938 0-.484-.484-.581-1.453 0-1.937l14.24-14.24c.582-.582 1.454-.582 2.035 0z"/><path fill="#FFF" d="M52.7 176.216a1.52 1.52 0 0 1 0 2.13l-14.338 14.242a1.52 1.52 0 0 1-2.13 0 1.52 1.52 0 0 1 0-2.132l14.337-14.24a1.52 1.52 0 0 1 2.131 0zM36.328 192.49c.484.484 1.356.484 1.84 0l14.338-14.241c.485-.484.485-1.356 0-1.84-.484-.485-1.356-.485-1.84 0l-14.338 14.24c-.484.484-.484 1.26 0 1.84z"/><path fill="#F3F3F3" d="M38.072 177.088c.484.58.484 1.453-.097 1.937l-6.878 5.813c-.581.484-1.453.387-1.938-.194-.484-.582-.484-1.453.097-1.938l6.878-5.812c.582-.485 1.453-.388 1.938.194z"/><path fill="#FFF" d="M38.169 176.99c.581.679.484 1.647-.097 2.132l-6.878 5.812c-.581.582-1.55.485-2.131-.193-.582-.679-.485-1.647.096-2.132l6.879-5.812c.58-.581 1.55-.484 2.13.194zm-8.913 7.654c.485.581 1.26.581 1.84.194l6.879-5.813c.484-.484.581-1.26.097-1.84-.485-.582-1.26-.582-1.84-.194l-6.879 5.812c-.581.484-.581 1.26-.097 1.84z"/><path fill="#F3F3F3" d="M41.947 163.137c.484.679.29 1.55-.388 1.938l-16.856 11.238c-.678.387-1.55.193-1.937-.388-.485-.678-.291-1.55.387-1.938L40.01 162.75c.582-.387 1.453-.194 1.938.387z"/><path fill="#FFF" d="M42.044 163.137c.484.679.29 1.647-.388 2.132L24.8 176.506c-.678.485-1.647.29-2.131-.484-.485-.678-.29-1.647.387-2.131l16.857-11.238c.678-.484 1.646-.29 2.13.484zm-19.181 12.691c.387.581 1.162.775 1.743.388l16.856-11.238c.582-.387.775-1.162.291-1.84-.387-.582-1.162-.775-1.744-.388l-16.856 11.238c-.581.484-.678 1.259-.29 1.84z"/><path fill="#F3F3F3" d="M27.512 161.103c.388.678.194 1.55-.484 1.938l-7.847 4.456c-.678.387-1.55.097-1.937-.581-.388-.678-.194-1.55.484-1.938l7.847-4.456c.678-.388 1.55-.097 1.938.581z"/><path fill="#FFF" d="M27.61 161.006c.387.775.193 1.647-.485 2.035l-7.847 4.456c-.678.387-1.647.097-2.034-.581-.388-.775-.194-1.647.484-2.035l7.847-4.456c.678-.388 1.647-.097 2.034.581zm-10.27 5.813c.388.678 1.163.872 1.744.484l7.847-4.456c.581-.388.775-1.163.485-1.744-.388-.678-1.163-.872-1.744-.484l-7.847 4.456c-.581.29-.775 1.066-.484 1.744z"/><path fill="#F3F3F3" d="M34.003 148.219c.29.775 0 1.55-.775 1.84l-18.697 7.75c-.678.291-1.55-.096-1.84-.775-.291-.775 0-1.55.775-1.84l18.697-7.75c.678-.29 1.55 0 1.84.775z"/><path fill="#FFF" d="M34.1 148.122c.29.775 0 1.647-.775 2.034l-18.697 7.75a1.505 1.505 0 0 1-1.937-.872c-.291-.775 0-1.647.775-2.034l18.697-7.75a1.505 1.505 0 0 1 1.937.872zm-21.216 8.815c.291.679 1.066.97 1.647.775l18.697-7.75c.678-.29.969-1.065.678-1.743-.29-.678-1.065-.969-1.647-.775l-18.697 7.75c-.678.29-.968 1.065-.678 1.744z"/><path fill="#F3F3F3" d="M20.344 143.375c.29.775-.097 1.55-.872 1.84l-8.525 2.81c-.678.29-1.55-.194-1.744-.872-.29-.775.097-1.55.872-1.84l8.525-2.81c.678-.29 1.453.097 1.744.872z"/><path fill="#FFF" d="M20.44 143.278c.291.775-.096 1.647-.968 1.938l-8.525 2.809c-.775.29-1.647-.194-1.938-.969-.29-.775.097-1.647.97-1.937l8.524-2.81c.775-.193 1.647.194 1.938.97zM9.204 146.96c.194.678.969 1.066 1.647.872l8.525-2.81c.678-.193.969-.968.775-1.646-.194-.678-.969-1.066-1.647-.872l-8.525 2.81c-.678.29-.969.968-.775 1.646z"/><path fill="#F3F3F3" d="M29.063 131.847c.193.775-.291 1.55-1.066 1.647l-19.86 3.875c-.775.194-1.453-.388-1.646-1.163-.194-.775.29-1.55 1.065-1.647l19.86-3.875c.775-.096 1.55.388 1.646 1.163z"/><path fill="#FFF" d="M29.256 131.847c.194.872-.387 1.647-1.162 1.84l-19.86 3.875c-.775.194-1.55-.387-1.743-1.259-.194-.872.387-1.647 1.162-1.84l19.86-3.875c.774-.194 1.55.387 1.743 1.259zm-22.572 4.36c.097.677.775 1.162 1.453 1.065l19.86-3.875c.678-.097 1.162-.872.969-1.55-.097-.678-.775-1.163-1.454-1.066l-19.859 3.875c-.678.194-1.162.872-.969 1.55z"/><path fill="#F3F3F3" d="M16.663 124.388c.096.774-.388 1.453-1.163 1.55l-8.912 1.065c-.776.097-1.454-.484-1.55-1.26-.097-.774.387-1.452 1.162-1.55l8.913-1.065c.678-.097 1.453.484 1.55 1.26z"/><path fill="#FFF" d="M16.76 124.388c.096.871-.485 1.646-1.26 1.743l-8.912 1.066c-.776.097-1.55-.484-1.647-1.356-.097-.872.484-1.647 1.259-1.744l8.913-1.066c.774-.097 1.55.485 1.646 1.356zm-11.723 1.356c.097.678.776 1.26 1.454 1.162l8.912-1.065c.678-.097 1.163-.775 1.066-1.453-.097-.679-.775-1.26-1.453-1.163l-8.913 1.066c-.678.097-1.162.775-1.066 1.453z"/><path fill="#F3F3F3" d="M27.512 114.99c0 .776-.58 1.454-1.356 1.454H5.91c-.775 0-1.356-.678-1.356-1.453s.581-1.454 1.356-1.454h20.247c.775 0 1.357.679 1.357 1.454z"/><path fill="#FFF" d="M27.61 114.99c0 .873-.679 1.55-1.454 1.55H5.91c-.775 0-1.453-.678-1.453-1.55 0-.871.678-1.55 1.453-1.55h20.247c.775 0 1.453.679 1.453 1.55zm-22.96-.096c0 .678.581 1.356 1.26 1.356h20.246c.678 0 1.26-.581 1.26-1.356 0-.678-.582-1.357-1.26-1.357H5.91c-.678.097-1.259.679-1.259 1.357z"/><path fill="#E2E2E2" d="M16.76 105.206c-.098.775-.679 1.356-1.454 1.356l-9.01-.678c-.774-.097-1.355-.775-1.259-1.55.097-.775.679-1.356 1.454-1.356l9.009.678c.678.097 1.26.775 1.26 1.55z"/><path fill="#FFF" d="M16.856 105.206c-.097.872-.775 1.453-1.55 1.453l-9.01-.678c-.774-.097-1.452-.775-1.355-1.647.096-.871.775-1.453 1.55-1.453l9.009.678c.775.097 1.356.872 1.356 1.647zm-11.819-.872c-.096.678.485 1.357 1.163 1.357l9.01.678c.677 0 1.259-.485 1.356-1.26.097-.678-.485-1.356-1.163-1.356l-9.01-.678c-.677 0-1.259.581-1.356 1.26z"/><path fill="#F3F3F3" d="M29.256 98.134c-.194.775-.872 1.26-1.647 1.163L7.75 95.228c-.775-.194-1.26-.872-1.066-1.647.194-.775.872-1.26 1.647-1.162l19.86 3.972c.678.193 1.162.968 1.065 1.743z"/><path fill="#FFF" d="M29.353 98.134c-.194.872-.969 1.357-1.744 1.26L7.75 95.422c-.775-.194-1.356-.969-1.162-1.84.193-.873.968-1.357 1.743-1.26l19.86 3.972c.775.194 1.259.969 1.162 1.84zM6.781 93.581c-.097.678.29 1.356.969 1.55l19.86 3.972c.678.097 1.356-.29 1.55-1.066.096-.678-.291-1.356-.97-1.55L8.332 92.516c-.775-.097-1.356.387-1.55 1.065z"/><path fill="#F3F3F3" d="M20.538 86.51a1.444 1.444 0 0 1-1.744 1.065l-8.719-2.422c-.775-.194-1.162-.969-.969-1.744a1.444 1.444 0 0 1 1.744-1.065l8.719 2.422c.775.193 1.162.968.969 1.743z"/><path fill="#FFF" d="M20.634 86.51c-.193.774-1.065 1.356-1.84 1.065l-8.719-2.422c-.775-.194-1.26-1.066-1.066-1.84.194-.776 1.066-1.357 1.841-1.066l8.719 2.422c.775.194 1.26.969 1.065 1.84zM9.3 83.311c-.194.679.194 1.454.872 1.647l8.719 2.422c.678.194 1.356-.194 1.55-.969.193-.678-.194-1.453-.872-1.646l-8.719-2.422c-.678-.097-1.356.29-1.55.969z"/><path fill="#F3F3F3" d="M34.197 81.86c-.29.774-1.163 1.065-1.84.774l-18.698-7.75c-.678-.29-1.065-1.162-.775-1.84.291-.775 1.163-1.066 1.841-.775l18.697 7.75c.775.29 1.066 1.162.775 1.84z"/><path fill="#FFF" d="M34.294 81.956a1.505 1.505 0 0 1-1.938.872l-18.697-7.75c-.775-.29-1.065-1.162-.775-2.034a1.505 1.505 0 0 1 1.938-.872l18.697 7.75c.775.387 1.065 1.26.775 2.034zm-21.216-8.815c-.29.678 0 1.453.678 1.743l18.697 7.75c.678.291 1.356-.097 1.647-.775.29-.678 0-1.453-.678-1.743l-18.697-7.75c-.678-.194-1.453.097-1.647.775z"/><path fill="#F3F3F3" d="M27.9 68.781c-.387.678-1.162.969-1.84.678l-8.041-4.068c-.678-.291-.969-1.163-.581-1.938.387-.678 1.162-.969 1.84-.678l8.04 4.069c.679.387.97 1.26.582 1.937z"/><path fill="#FFF" d="M27.997 68.878c-.388.775-1.26 1.066-2.035.678l-8.04-4.069c-.775-.387-1.066-1.259-.678-2.034.387-.775 1.26-1.066 2.034-.678l8.04 4.069c.776.29 1.066 1.26.679 2.034zM17.534 63.55c-.29.678-.096 1.453.582 1.744l8.04 4.069c.582.29 1.357 0 1.744-.582.29-.678.097-1.453-.581-1.744L19.18 62.97c-.581-.29-1.356-.097-1.647.581z"/><path fill="#F3F3F3" d="M42.14 66.94c-.484.679-1.259.873-1.937.388l-16.76-11.14c-.677-.388-.774-1.26-.387-1.938.388-.678 1.26-.872 1.938-.388L41.85 65.1c.581.388.775 1.26.29 1.84z"/><path fill="#FFF" d="M42.237 67.037c-.484.679-1.453.872-2.13.485l-16.76-11.238c-.678-.484-.872-1.356-.388-2.13.485-.679 1.454-.873 2.132-.485L41.85 64.906c.775.485.872 1.453.387 2.131zM23.153 54.25c-.387.581-.29 1.453.29 1.84L40.3 67.329c.581.388 1.356.194 1.744-.387.387-.582.29-1.454-.29-1.841L24.896 53.863c-.581-.388-1.356-.194-1.744.387z"/><path fill="#F3F3F3" d="M38.556 52.894c-.484.581-1.356.775-1.937.29l-7.072-5.521c-.581-.485-.678-1.357-.194-1.938.484-.581 1.356-.775 1.938-.29l7.071 5.521c.582.485.679 1.356.194 1.938z"/><path fill="#FFF" d="M38.653 52.99c-.484.679-1.453.776-2.131.291L29.45 47.76c-.678-.484-.775-1.453-.29-2.13.484-.679 1.453-.776 2.13-.291l7.072 5.521c.679.485.776 1.453.291 2.132zm-9.3-7.265c-.484.581-.387 1.356.194 1.84l7.072 5.523c.581.387 1.356.29 1.84-.291.485-.581.388-1.356-.193-1.84l-7.072-5.523c-.581-.387-1.357-.29-1.84.291z"/><path fill="#F3F3F3" d="M52.99 53.862c-.58.582-1.453.582-1.937 0L36.62 39.622c-.581-.581-.485-1.453 0-1.938.581-.58 1.453-.58 1.937 0l14.338 14.241c.581.484.581 1.453.097 1.938z"/><path fill="#FFF" d="M52.99 53.96a1.52 1.52 0 0 1-2.13 0L36.521 39.718a1.52 1.52 0 0 1 0-2.132 1.52 1.52 0 0 1 2.131 0L52.99 51.827c.678.581.678 1.55 0 2.131zM36.717 37.78c-.485.485-.485 1.357 0 1.84l14.337 14.241c.485.485 1.356.485 1.84 0 .485-.484.485-1.356 0-1.84L38.557 37.684c-.484-.484-1.26-.484-1.84.097z"/><path fill="#F3F3F3" d="M52.119 39.428c-.581.485-1.453.485-1.938-.097l-5.91-6.781c-.483-.581-.387-1.453.195-1.937.58-.485 1.453-.485 1.937.096l5.91 6.782c.484.484.387 1.356-.194 1.937z"/><path fill="#FFF" d="M52.216 39.428c-.678.581-1.55.485-2.132-.097l-5.909-6.781c-.581-.581-.484-1.55.194-2.131.678-.582 1.55-.485 2.131.097l5.91 6.78c.484.679.484 1.648-.194 2.132zm-7.75-8.815c-.582.484-.582 1.259-.194 1.84l5.91 6.781c.484.485 1.259.582 1.84.097.581-.484.581-1.26.194-1.84l-5.91-6.782c-.484-.58-1.26-.58-1.84-.096z"/><path fill="#F3F3F3" d="M66.069 43.11c-.678.484-1.55.29-1.938-.388l-11.334-16.76c-.388-.678-.194-1.55.387-1.937.678-.484 1.55-.29 1.938.388l11.237 16.759c.485.678.291 1.55-.29 1.937z"/><path fill="#FFF" d="M66.069 43.206c-.678.485-1.647.29-2.132-.387L52.7 26.059c-.484-.678-.29-1.646.484-2.13.678-.485 1.647-.291 2.132.387l11.237 16.759c.484.775.29 1.647-.484 2.131zM53.28 24.122c-.581.387-.775 1.162-.387 1.744L64.13 42.625c.388.581 1.163.678 1.84.29.582-.387.776-1.162.388-1.743L55.122 24.509c-.388-.58-1.26-.775-1.84-.387z"/><path fill="#F3F3F3" d="M68.103 28.772c-.678.387-1.55.194-1.937-.484l-4.457-7.847c-.387-.678-.097-1.55.582-1.938.678-.387 1.55-.194 1.937.485l4.456 7.846c.291.678.097 1.55-.58 1.938z"/><path fill="#FFF" d="M68.103 28.869c-.775.387-1.647.194-2.034-.485l-4.457-7.846c-.387-.679-.193-1.647.582-2.035.775-.387 1.647-.194 2.034.485l4.456 7.846c.388.678.194 1.55-.58 2.035zM62.291 18.6c-.582.387-.872 1.162-.485 1.744l4.457 7.847c.387.58 1.162.775 1.743.484.582-.387.872-1.163.485-1.744l-4.457-7.847c-.29-.58-1.162-.872-1.743-.484z"/><path fill="#F3F3F3" d="M80.987 35.166c-.774.29-1.55 0-1.84-.678L71.3 15.79c-.29-.678.097-1.55.775-1.841.775-.29 1.55 0 1.84.678l7.847 18.697c.291.678-.096 1.55-.775 1.84z"/><path fill="#FFF" d="M80.987 35.263c-.774.29-1.646 0-2.034-.776l-7.847-18.696a1.505 1.505 0 0 1 .872-1.938c.775-.29 1.647 0 2.035.775l7.846 18.697c.291.678-.096 1.55-.871 1.938zm-8.815-21.216c-.678.29-.969 1.066-.678 1.647L79.34 34.39c.29.678 1.065.968 1.743.678.678-.29.97-1.066.678-1.647l-7.846-18.697c-.388-.678-1.066-.969-1.744-.678z"/><path fill="#F3F3F3" d="M85.734 21.41c-.775.29-1.55-.098-1.84-.872l-2.81-8.526c-.29-.678.194-1.55.872-1.743.678-.194 1.55.097 1.84.872l2.81 8.525c.29.678-.097 1.453-.872 1.743z"/><path fill="#FFF" d="M85.831 21.506a1.505 1.505 0 0 1-1.937-.872l-2.81-8.525c-.29-.775.194-1.646.97-1.937a1.505 1.505 0 0 1 1.937.872l2.809 8.525c.194.775-.194 1.647-.969 1.937zm-3.778-11.14c-.678.193-1.066.968-.872 1.646l2.81 8.526c.193.678.968.968 1.647.774.678-.193 1.065-.968.871-1.646L83.7 11.14a1.223 1.223 0 0 0-1.647-.775z"/><path fill="#F3F3F3" d="M97.166 30.225c-.775.194-1.55-.29-1.647-1.066L91.45 9.3c-.194-.775.388-1.453 1.162-1.647.776-.194 1.55.29 1.647 1.066l4.07 19.86c.096.677-.388 1.452-1.163 1.646z"/><path fill="#FFF" d="M97.166 30.322c-.872.194-1.647-.388-1.841-1.163L91.256 9.3c-.194-.775.388-1.647 1.163-1.744.872-.194 1.647.388 1.84 1.163l4.07 19.86c.193.774-.291 1.55-1.163 1.743zM92.613 7.75c-.679.097-1.163.775-1.066 1.55l4.069 19.86c.097.677.871 1.162 1.55.968.678-.097 1.162-.775 1.065-1.55l-4.069-19.86c-.193-.677-.871-1.065-1.55-.968z"/><path fill="#F3F3F3" d="M104.528 17.631c-.775.097-1.453-.387-1.647-1.162l-1.162-8.913c-.097-.775.484-1.453 1.26-1.55.774-.097 1.452.388 1.646 1.163l1.162 8.912c.097.775-.484 1.453-1.259 1.55z"/><path fill="#FFF" d="M104.528 17.728c-.872.097-1.647-.484-1.744-1.26l-1.162-8.912c-.097-.775.484-1.55 1.356-1.647.872-.096 1.647.485 1.744 1.26l1.162 8.912c.097.775-.484 1.55-1.356 1.647zm-1.453-11.625c-.678.097-1.26.775-1.163 1.453l1.163 8.913c.097.678.775 1.162 1.453 1.065.678-.096 1.26-.775 1.163-1.453l-1.163-8.912c-.097-.678-.775-1.163-1.453-1.066z"/><circle cx="114.991" cy="115.184" r="114.7" fill="url(#d)" fill-opacity=".2"/></g><path fill-opacity=".05" d="M204.116 51.15 111.6 110.438h-.097v.096l-.097.097L53.67 205.86l84.862-68.297.097-.096v-.097l65.488-86.219z" filter="url(#e)"/><path fill="#CD151E" d="m202.372 45.628-91.45 65.003 27.125 26.931 64.325-91.934"/><path fill="#FA5153" d="m111.019 110.438 13.66 13.465 77.693-78.275-91.353 64.81z"/><path fill="#ACACAC" d="m111.019 110.438 27.125 26.93-91.45 65.004 64.325-91.935z"/><path fill="#EEE" d="m46.694 202.372 77.984-78.469-13.66-13.466-64.324 91.935z"/></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/safari_24x24.png b/src/images/icons/safari_24x24.png
new file mode 100644
index 00000000000..15780dc20b2
Binary files /dev/null and b/src/images/icons/safari_24x24.png differ
diff --git a/src/images/icons/seo.svg b/src/images/icons/seo.svg
index 53412b9439d..bb5edf93286 100644
--- a/src/images/icons/seo.svg
+++ b/src/images/icons/seo.svg
@@ -1 +1 @@
-<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".258" y=".872" width="61" height="61" rx="30.5"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g transform="translate(2 2)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g stroke="#212121" fill-rule="nonzero"><path d="M43.007 45.718l-3.272.171c-2.017-4.424-3.757-7.367-5.217-8.83-2.192-2.194.236-4.433.236-10.798 0-6.364-14.7-7.482-10.144-9.007 1.148-.384 3.617-.19 4.896-.19 6.355 0 11.485 5.138 11.485 11.502 0 2.25-.664 4.32-1.787 6.11l7.428 7.412-3.625 3.63z" fill="#2979FF"/><path d="M39.46 45.718l-7.427-7.438a11.305 11.305 0 0 1-6.1 1.789c-6.33 0-11.46-5.138-11.46-11.503 0-6.364 5.13-11.502 11.485-11.502 6.355 0 11.485 5.138 11.485 11.502 0 2.25-.663 4.32-1.786 6.11l7.427 7.412-3.624 3.63zM25.958 22.176c-3.522 0-6.38 2.863-6.38 6.39 0 3.528 2.858 6.39 6.38 6.39s6.38-2.862 6.38-6.39c0-3.527-2.858-6.39-6.38-6.39z" fill="#F5F5F5"/></g><g transform="translate(-50.212 -49.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g></g></g></svg>
\ No newline at end of file
+<svg width="65" height="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x=".258" y=".872" width="61" height="61" rx="30.5"/><path d="M80.97 162.182C36.25 162.182 0 125.876 0 81.09S36.251 0 80.97 0c44.718 0 80.97 36.306 80.97 81.09 0 44.786-36.252 81.092-80.97 81.092zm0-35.477c25.154 0 45.545-20.422 45.545-45.614 0-25.192-20.391-45.614-45.545-45.614-25.154 0-45.546 20.422-45.546 45.614 0 25.192 20.392 45.614 45.546 45.614z" id="c"/></defs><g transform="translate(2 2)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><g stroke="#212121" fill-rule="nonzero"><path d="M43.007 45.718l-3.272.171c-2.017-4.424-3.757-7.367-5.217-8.83-2.192-2.194.236-4.433.236-10.798 0-6.364-14.7-7.482-10.144-9.007 1.148-.384 3.617-.19 4.896-.19 6.355 0 11.485 5.138 11.485 11.502 0 2.25-.664 4.32-1.787 6.11l7.428 7.412-3.625 3.63z" fill="#2979FF"/><path d="M39.46 45.718l-7.427-7.438a11.305 11.305 0 01-6.1 1.789c-6.33 0-11.46-5.138-11.46-11.503 0-6.364 5.13-11.502 11.485-11.502 6.355 0 11.485 5.138 11.485 11.502 0 2.25-.663 4.32-1.786 6.11l7.427 7.412-3.624 3.63zM25.958 22.176c-3.522 0-6.38 2.863-6.38 6.39 0 3.528 2.858 6.39 6.38 6.39s6.38-2.862 6.38-6.39c0-3.527-2.858-6.39-6.38-6.39z" fill="#F5F5F5"/></g><g transform="translate(-50.212 -49.552)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)"/><path d="M122.234 159.468L38.461 2.028" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 160.695 0)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)"/><path d="M168.292 97.152L-7.085 65.886" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 161.207 0)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)"/><path d="M152.897 131.873L7.085 29.395" stroke="#212121" mask="url(#d)" transform="matrix(-1 0 0 1 159.982 0)"/><path d="M80.97-8.11v178.4" stroke="#212121" mask="url(#d)"/><ellipse cx="80.97" cy="81.091" rx="40.485" ry="40.545"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/share_white.svg b/src/images/icons/share_white.svg
index a1b60cc7bd4..83705276134 100644
--- a/src/images/icons/share_white.svg
+++ b/src/images/icons/share_white.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 16.1c-.8 0-1.4.3-2 .8l-7.1-4.2c.1-.2.1-.5.1-.7s0-.5-.1-.7L16 7.2c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .5.1.7L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.6 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9-1.2-2.9-2.8-2.9z" fill="#fff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M0 0h24v24H0V0z" fill="none"/>
+  <path d="M18 16.1c-.8 0-1.4.3-2 .8l-7.1-4.2c.1-.2.1-.5.1-.7s0-.5-.1-.7L16 7.2c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .5.1.7L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.6 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9-1.2-2.9-2.8-2.9z" fill="#fff"/>
+</svg>
diff --git a/src/images/icons/subscribe.svg b/src/images/icons/subscribe.svg
index 5821cb0632c..15f4ec6695f 100644
--- a/src/images/icons/subscribe.svg
+++ b/src/images/icons/subscribe.svg
@@ -1,9 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
-    <title>Artboard</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M13,20 L4,20 C2.9,20 2,19.1 2,18 L2.01,6 C2.01,4.9 2.9,4 4,4 L20,4 C21.1,4 22,4.9 22,6 L22,13 L20,13 L20,8 L12,13 L4,8 L4,18 L13,18 L13,20 Z M12,11 L20,6 L4,6 L12,11 Z M20,18 L23,18 L23,20 L20,20 L20,23 L18,23 L18,20 L15,20 L15,18 L18,18 L18,15 L20,15 L20,18 Z" id="Combined-Shape" fill="#3740FF" fill-rule="nonzero"></path>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z" fill="#3740FF" fill-rule="nonzero"/>
+</svg>
diff --git a/src/images/lockup-chrome-dev.svg b/src/images/lockup-chrome-dev.svg
new file mode 100644
index 00000000000..3b1afede3db
--- /dev/null
+++ b/src/images/lockup-chrome-dev.svg
@@ -0,0 +1 @@
+<svg width="237" height="36" viewBox="0 0 237 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="brand__text" d="M54 26.35A7.92 7.92 0 0 1 48.17 24a7.97 7.97 0 0 1-2.36-5.88c0-2.34.79-4.3 2.36-5.87A7.92 7.92 0 0 1 54 9.9c2.37 0 4.3.85 5.78 2.57l-1.4 1.36a5.31 5.31 0 0 0-4.38-2 6 6 0 0 0-4.36 1.74 6.12 6.12 0 0 0-1.76 4.55c0 1.88.59 3.4 1.76 4.56A6 6 0 0 0 54 24.42c1.89 0 3.5-.77 4.84-2.3l1.4 1.42a7.79 7.79 0 0 1-2.7 2.06c-1.09.5-2.27.75-3.54.75Zm10.07-16.1v4.97l-.09 1.5h.09c.3-.52.75-.95 1.38-1.3a3.97 3.97 0 0 1 2.03-.55c1.33 0 2.35.4 3.06 1.23a4.9 4.9 0 0 1 1.05 3.3V26h-2.02v-6.3c0-1.99-.89-2.98-2.66-2.98-.84 0-1.52.33-2.05 1-.53.67-.8 1.44-.8 2.32V26h-2.02V10.25h2.03ZM75.99 26h-2.02V15.22h1.93v1.76h.1c.2-.59.62-1.07 1.25-1.45a3.68 3.68 0 0 1 3.38-.31l-.77 1.9c-.26-.11-.62-.16-1.07-.16-.74 0-1.39.3-1.96.88a3.1 3.1 0 0 0-.84 2.26V26Zm6.25-9.48a5.24 5.24 0 0 1 3.98-1.65c1.62 0 2.94.55 3.98 1.65a5.67 5.67 0 0 1 1.57 4.09c0 1.64-.52 3.01-1.57 4.11a5.282 5.282 0 0 1-3.98 1.63 5.28 5.28 0 0 1-3.98-1.63 5.75 5.75 0 0 1-1.56-4.11c0-1.64.52-3 1.56-4.1v.01Zm1.5 6.93a3.4 3.4 0 0 0 4.95 0 3.88 3.88 0 0 0 1.05-2.84 3.8 3.8 0 0 0-1.05-2.82 3.37 3.37 0 0 0-4.95 0 3.85 3.85 0 0 0-1.04 2.82c0 1.17.35 2.12 1.04 2.84ZM93.39 26V15.22h1.94v1.5h.08c.31-.52.78-.95 1.41-1.3a3.86 3.86 0 0 1 1.92-.55c1.67 0 2.8.69 3.4 2.07a4.205 4.205 0 0 1 3.77-2.07c1.27 0 2.23.4 2.88 1.23.65.8.97 1.9.97 3.3V26h-2.03v-6.3c0-1.08-.2-1.85-.59-2.3-.4-.46-1-.68-1.8-.68s-1.46.33-1.98 1a3.718 3.718 0 0 0-.77 2.32V26h-2.03v-6.3c0-1.08-.2-1.85-.6-2.3-.39-.46-.99-.68-1.8-.68-.79 0-1.45.33-1.98 1a3.72 3.72 0 0 0-.77 2.32V26h-2.02Zm23.62.35a5.23 5.23 0 0 1-3.98-1.63 5.8 5.8 0 0 1-1.52-4.11c0-1.57.49-2.92 1.47-4.05 1-1.13 2.27-1.7 3.8-1.7 1.6 0 2.88.53 3.84 1.57a5.902 5.902 0 0 1 1.45 4.18l-.02.37h-8.52a3.676 3.676 0 0 0 1.08 2.58c.67.63 1.46.94 2.36.94 1.45 0 2.43-.61 2.94-1.84l1.8.74a4.905 4.905 0 0 1-1.73 2.12c-.8.55-1.8.83-2.97.83Zm2.9-7.04a2.85 2.85 0 0 0-.85-1.76c-.52-.56-1.29-.83-2.31-.83-.75 0-1.4.23-1.96.7-.55.47-.92 1.1-1.13 1.9h6.25v-.01Zm9.2 6.69V10.25h4.81c2.42 0 4.36.73 5.81 2.2a7.682 7.682 0 0 1 2.18 5.67c0 2.34-.73 4.24-2.18 5.7-1.45 1.45-3.39 2.18-5.8 2.18h-4.83.01Zm2.02-1.94h2.8c1.81 0 3.25-.52 4.3-1.56 1.08-1.04 1.61-2.5 1.61-4.38 0-1.86-.53-3.31-1.6-4.35a5.83 5.83 0 0 0-4.32-1.59h-2.8v11.88h.01Zm17.4 2.3a5.242 5.242 0 0 1-3.99-1.64 5.8 5.8 0 0 1-1.51-4.11c0-1.57.49-2.92 1.47-4.05 1-1.13 2.27-1.7 3.8-1.7 1.6 0 2.88.53 3.83 1.57a5.901 5.901 0 0 1 1.46 4.18l-.03.37h-8.51a3.676 3.676 0 0 0 1.08 2.58c.67.63 1.46.94 2.35.94 1.45 0 2.44-.61 2.95-1.84l1.8.74a4.905 4.905 0 0 1-1.73 2.12c-.81.55-1.8.83-2.97.83v.01Zm2.9-7.05a2.85 2.85 0 0 0-.86-1.76c-.51-.56-1.28-.83-2.3-.83-.76 0-1.4.23-1.97.7-.54.47-.91 1.1-1.12 1.9h6.25v-.01Zm7 6.69-4.35-10.78h2.2l3.17 8.36h.04l3.21-8.36h2.16L160.46 26h-2.03Zm12.31.35a5.24 5.24 0 0 1-3.98-1.63 5.8 5.8 0 0 1-1.52-4.11c0-1.57.5-2.92 1.47-4.05 1-1.13 2.27-1.7 3.81-1.7 1.6 0 2.88.53 3.83 1.57a5.902 5.902 0 0 1 1.45 4.18l-.02.37h-8.52a3.676 3.676 0 0 0 1.08 2.58c.68.63 1.46.94 2.36.94 1.45 0 2.43-.61 2.95-1.84l1.8.74a4.898 4.898 0 0 1-1.74 2.12c-.8.55-1.8.83-2.97.83Zm2.9-7.04a2.85 2.85 0 0 0-.85-1.76c-.52-.56-1.29-.83-2.31-.83-.75 0-1.4.23-1.96.7-.54.47-.92 1.1-1.12 1.9h6.25l-.01-.01Zm6.04 6.69h-2.03V10.25h2.03V26Zm3.3-9.48a5.239 5.239 0 0 1 3.98-1.65c1.62 0 2.94.55 3.98 1.65a5.677 5.677 0 0 1 1.57 4.09c0 1.64-.52 3.01-1.56 4.11a5.284 5.284 0 0 1-3.99 1.63 5.275 5.275 0 0 1-3.98-1.63 5.75 5.75 0 0 1-1.56-4.11c0-1.64.52-3 1.56-4.1v.01Zm1.5 6.93a3.396 3.396 0 0 0 2.48 1.05c.96 0 1.78-.35 2.47-1.05a3.88 3.88 0 0 0 1.05-2.84 3.796 3.796 0 0 0-1.05-2.82 3.373 3.373 0 0 0-3.826-.8 3.373 3.373 0 0 0-1.124.8 3.85 3.85 0 0 0-1.04 2.82c0 1.17.35 2.12 1.04 2.84Zm15.37 2.9c-.82 0-1.56-.17-2.22-.53a3.763 3.763 0 0 1-1.46-1.32h-.08l.08 1.5v4.75h-2.02V15.22h1.94v1.5h.08c.33-.53.81-.97 1.46-1.32.66-.36 1.4-.53 2.22-.53 1.4 0 2.6.55 3.6 1.65a5.819 5.819 0 0 1 1.52 4.09c0 1.63-.5 3-1.51 4.1a4.744 4.744 0 0 1-3.61 1.64Zm-.33-1.85c.94 0 1.74-.35 2.42-1.05a3.979 3.979 0 0 0 1.01-2.84 3.903 3.903 0 0 0-1.01-2.82 3.206 3.206 0 0 0-2.42-1.07c-.96 0-1.77.35-2.44 1.05-.66.7-1 1.65-1 2.84s.34 2.13 1 2.84c.67.7 1.48 1.05 2.44 1.05Zm12.2 1.85a5.23 5.23 0 0 1-3.99-1.63 5.8 5.8 0 0 1-1.52-4.11c0-1.57.5-2.92 1.48-4.05 1-1.13 2.26-1.7 3.8-1.7 1.6 0 2.88.53 3.83 1.57a5.902 5.902 0 0 1 1.45 4.18l-.02.37h-8.51a3.68 3.68 0 0 0 1.07 2.58c.68.63 1.46.94 2.36.94 1.45 0 2.43-.61 2.95-1.84l1.8.74a4.898 4.898 0 0 1-1.74 2.12c-.8.55-1.8.83-2.97.83h.01Zm2.9-7.04a2.85 2.85 0 0 0-.86-1.76c-.52-.56-1.29-.83-2.31-.83-.75 0-1.4.23-1.96.7-.54.47-.92 1.1-1.12 1.9h6.25v-.01Zm6.03 6.69h-2.03V15.22h1.94v1.76h.09c.2-.59.62-1.07 1.25-1.45a3.67 3.67 0 0 1 3.39-.31l-.77 1.9c-.27-.11-.63-.16-1.08-.16-.73 0-1.38.3-1.96.88a3.092 3.092 0 0 0-.83 2.26V26Zm9.54.35c-1.2 0-2.2-.3-3-.88a5.254 5.254 0 0 1-1.7-2.2l1.8-.75c.57 1.35 1.54 2.03 2.92 2.03.63 0 1.14-.14 1.54-.42.41-.28.62-.65.62-1.1 0-.7-.5-1.18-1.48-1.43l-2.17-.53a5.27 5.27 0 0 1-1.96-.99 2.447 2.447 0 0 1-.93-2c0-.95.42-1.72 1.26-2.31.85-.6 1.85-.9 3.01-.9.95 0 1.8.22 2.55.66a3.599 3.599 0 0 1 1.6 1.85l-1.75.72c-.4-.95-1.22-1.43-2.47-1.43-.6 0-1.1.13-1.51.38-.41.25-.62.58-.62 1 0 .62.48 1.04 1.43 1.26l2.13.5c1.02.24 1.76.65 2.25 1.22a3 3 0 0 1-.46 4.36c-.8.64-1.81.96-3.06.96Z" fill="#5F6368"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="32" height="32"><path d="M18 34c8.837 0 16-7.163 16-16S26.837 2 18 2 2 9.163 2 18s7.163 16 16 16Z" fill="#C4C4C4"/></mask><g mask="url(#a)"><path d="M2 2v19.636h9.702L18 10.727h16V2H2Z" fill="#DB4437"/><path d="M2 34h15.23l7.07-7.07v-5.294H11.702L2 4.996V34Z" fill="#0F9D58"/><path d="M2 34h15.23l7.07-7.07v-5.294H11.702L2 4.996V34Z" fill="url(#b)"/><path d="m18 10.727 6.3 10.91L17.23 34H34V10.727H18Z" fill="#FFCD40"/><path d="m18 10.727 6.3 10.91L17.23 34H34V10.727H18Z" fill="url(#c)"/><path d="M11.874 21.573 4.633 9.153l-.106.182 7.19 12.327.157-.09Z" fill="#3E2723" fill-opacity=".15"/><path d="m24.153 21.878-.151-.087L17.022 34h.209l6.927-12.116-.005-.006Z" fill="#263238" fill-opacity=".15"/><path d="m4.54 9.354 10.409 10.408-3.247 1.874L4.54 9.354Z" fill="url(#d)"/><path d="m17.242 33.98 3.81-14.218 3.248 1.874-7.058 12.344Z" fill="url(#e)"/><path d="M18 10.727v3.81l14.255-3.81H18Z" fill="url(#f)"/><path d="M18 25.273a7.273 7.273 0 1 0 0-14.546 7.273 7.273 0 0 0 0 14.546Z" fill="#F1F1F1"/><path d="M18 23.818a5.818 5.818 0 1 0 0-11.636 5.818 5.818 0 0 0 0 11.636Z" fill="#4285F4"/><path d="M18 10.546a7.273 7.273 0 0 0-7.273 7.272V18A7.273 7.273 0 0 1 18 10.727h16v-.181H18Z" fill="#3E2723" fill-opacity=".2"/><path d="M24.29 21.636A7.266 7.266 0 0 1 18 25.273a7.266 7.266 0 0 1-6.293-3.637H11.7L2 4.996v.182l9.702 16.64h.007a7.266 7.266 0 0 0 6.293 3.636 7.262 7.262 0 0 0 6.29-3.636h.01v-.182h-.011Z" fill="#fff" fill-opacity=".1"/><path opacity=".1" d="M18.182 10.727c-.031 0-.06.004-.091.006A7.27 7.27 0 0 1 25.273 18a7.27 7.27 0 0 1-7.182 7.267c.03 0 .06.006.09.006a7.273 7.273 0 0 0 0-14.546Z" fill="#3E2723"/><path d="M24.364 21.878A7.25 7.25 0 0 0 25 16.051c.173.622.273 1.275.273 1.95 0 1.325-.358 2.56-.977 3.63l.004.007-7.07 12.364h.212l6.925-12.117-.003-.007Z" fill="#fff" fill-opacity=".2"/><path d="M18 2.182c8.805 0 15.95 7.114 15.998 15.909L34 18c0-8.836-7.164-16-16-16S2 9.164 2 18l.002.09C2.05 9.297 9.194 2.183 18 2.183Z" fill="#fff" fill-opacity=".2"/><path d="M18 33.818c8.805 0 15.95-7.114 15.998-15.909L34 18c0 8.836-7.164 16-16 16S2 26.836 2 18l.002-.09C2.05 26.703 9.194 33.817 18 33.817Z" fill="#3E2723" fill-opacity=".15"/><path d="M18 34c8.837 0 16-7.163 16-16S26.837 2 18 2 2 9.163 2 18s7.163 16 16 16Z" fill="url(#g)"/></g><defs><radialGradient id="d" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.523 9.367) scale(14.1898)"><stop stop-color="#3E2723" stop-opacity=".2"/><stop offset="1" stop-color="#3E2723" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.972 18.025) scale(15.9764)"><stop stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.305 10.718) scale(15.2869)"><stop stop-color="#3E2723" stop-opacity=".2"/><stop offset="1" stop-color="#3E2723" stop-opacity="0"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.78 6.366) scale(32.1356)"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="b" x1="20.704" y1="30.454" x2="10.098" y2="24.242" gradientUnits="userSpaceOnUse"><stop stop-color="#055524" stop-opacity=".4"/><stop offset=".33" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="22.701" y1="9.601" x2="25.372" y2="21.296" gradientUnits="userSpaceOnUse"><stop stop-color="#EA6100" stop-opacity=".3"/><stop offset=".66" stop-color="#EA6100" stop-opacity="0"/></linearGradient></defs></svg>
diff --git a/src/images/lockup-chrome.svg b/src/images/lockup-chrome.svg
new file mode 100644
index 00000000000..df2d1c6121e
--- /dev/null
+++ b/src/images/lockup-chrome.svg
@@ -0,0 +1,53 @@
+<svg width="102" height="27" viewBox="0 0 102 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.382 20.288C41.458 20.288 40.642 20.078 39.934 19.658C39.226 19.238 38.668 18.662 38.26 17.93C37.852 17.186 37.648 16.346 37.648 15.41C37.648 14.474 37.852 13.64 38.26 12.908C38.668 12.164 39.226 11.582 39.934 11.162C40.642 10.742 41.458 10.532 42.382 10.532C43.402 10.532 44.26 10.76 44.956 11.216C45.664 11.672 46.168 12.29 46.468 13.07L44.704 13.79C44.284 12.806 43.498 12.314 42.346 12.314C41.842 12.314 41.38 12.446 40.96 12.71C40.54 12.962 40.204 13.322 39.952 13.79C39.7 14.246 39.574 14.786 39.574 15.41C39.574 16.034 39.7 16.58 39.952 17.048C40.204 17.516 40.54 17.876 40.96 18.128C41.38 18.38 41.842 18.506 42.346 18.506C42.934 18.506 43.432 18.374 43.84 18.11C44.248 17.834 44.566 17.462 44.794 16.994L46.522 17.75C46.198 18.482 45.682 19.088 44.974 19.568C44.266 20.048 43.402 20.288 42.382 20.288ZM48.1887 20V7.112H50.1327V10.64L50.0247 12.08H50.1327C50.3847 11.636 50.7687 11.27 51.2847 10.982C51.8127 10.682 52.3947 10.532 53.0307 10.532C54.1707 10.532 55.0287 10.874 55.6047 11.558C56.1807 12.23 56.4687 13.112 56.4687 14.204V20H54.5427V14.456C54.5427 13.712 54.3447 13.172 53.9487 12.836C53.5647 12.488 53.0907 12.314 52.5267 12.314C52.0587 12.314 51.6447 12.446 51.2847 12.71C50.9247 12.974 50.6427 13.322 50.4387 13.754C50.2347 14.174 50.1327 14.624 50.1327 15.104V20H48.1887ZM58.6828 20V10.82H60.5188V12.17H60.6268C60.8308 11.702 61.1788 11.318 61.6708 11.018C62.1748 10.706 62.7148 10.55 63.2908 10.55C63.5428 10.55 63.7528 10.568 63.9208 10.604C64.1008 10.64 64.2628 10.682 64.4068 10.73V12.746C64.1788 12.65 63.9448 12.572 63.7048 12.512C63.4768 12.452 63.2368 12.422 62.9848 12.422C62.5288 12.422 62.1208 12.548 61.7608 12.8C61.4128 13.04 61.1368 13.37 60.9328 13.79C60.7288 14.198 60.6268 14.648 60.6268 15.14V20H58.6828ZM69.6825 20.288C68.7345 20.288 67.9005 20.072 67.1805 19.64C66.4605 19.208 65.8965 18.626 65.4885 17.894C65.0805 17.162 64.8765 16.334 64.8765 15.41C64.8765 14.498 65.0805 13.676 65.4885 12.944C65.8965 12.2 66.4605 11.612 67.1805 11.18C67.9005 10.748 68.7345 10.532 69.6825 10.532C70.6185 10.532 71.4465 10.748 72.1665 11.18C72.8865 11.612 73.4505 12.2 73.8585 12.944C74.2665 13.676 74.4705 14.498 74.4705 15.41C74.4705 16.334 74.2665 17.162 73.8585 17.894C73.4505 18.626 72.8865 19.208 72.1665 19.64C71.4465 20.072 70.6185 20.288 69.6825 20.288ZM69.6825 18.506C70.1865 18.506 70.6545 18.386 71.0865 18.146C71.5185 17.894 71.8665 17.54 72.1305 17.084C72.4065 16.616 72.5445 16.058 72.5445 15.41C72.5445 14.762 72.4065 14.21 72.1305 13.754C71.8665 13.286 71.5185 12.932 71.0865 12.692C70.6545 12.44 70.1865 12.314 69.6825 12.314C69.1785 12.314 68.7045 12.44 68.2605 12.692C67.8285 12.932 67.4745 13.286 67.1985 13.754C66.9345 14.21 66.8025 14.762 66.8025 15.41C66.8025 16.058 66.9345 16.616 67.1985 17.084C67.4745 17.54 67.8285 17.894 68.2605 18.146C68.7045 18.386 69.1785 18.506 69.6825 18.506ZM76.0852 20V10.82H77.9212V12.08H78.0292C78.2932 11.636 78.6772 11.27 79.1812 10.982C79.6852 10.682 80.2432 10.532 80.8552 10.532C81.5392 10.532 82.1212 10.694 82.6012 11.018C83.0812 11.342 83.4232 11.75 83.6272 12.242C83.9272 11.762 84.3352 11.36 84.8512 11.036C85.3672 10.7 85.9972 10.532 86.7412 10.532C87.8212 10.532 88.6252 10.862 89.1532 11.522C89.6812 12.17 89.9452 13.034 89.9452 14.114V20H88.0192V14.438C88.0192 13.706 87.8572 13.172 87.5332 12.836C87.2212 12.488 86.7832 12.314 86.2192 12.314C85.7752 12.314 85.3852 12.44 85.0492 12.692C84.7132 12.932 84.4492 13.262 84.2572 13.682C84.0772 14.102 83.9872 14.57 83.9872 15.086V20H82.0612V14.438C82.0612 13.706 81.8992 13.172 81.5752 12.836C81.2512 12.488 80.7952 12.314 80.2072 12.314C79.7752 12.314 79.3972 12.44 79.0732 12.692C78.7492 12.944 78.4912 13.28 78.2992 13.7C78.1192 14.12 78.0292 14.588 78.0292 15.104V20H76.0852ZM96.328 20.288C95.428 20.288 94.624 20.078 93.916 19.658C93.208 19.238 92.65 18.662 92.242 17.93C91.846 17.198 91.648 16.364 91.648 15.428C91.648 14.552 91.84 13.742 92.224 12.998C92.608 12.254 93.142 11.66 93.826 11.216C94.522 10.76 95.32 10.532 96.22 10.532C97.168 10.532 97.972 10.736 98.632 11.144C99.304 11.552 99.814 12.11 100.162 12.818C100.51 13.526 100.684 14.324 100.684 15.212C100.684 15.344 100.678 15.464 100.666 15.572C100.666 15.68 100.66 15.764 100.648 15.824H93.556C93.652 16.736 93.97 17.42 94.51 17.876C95.062 18.332 95.686 18.56 96.382 18.56C97.006 18.56 97.522 18.422 97.93 18.146C98.338 17.858 98.662 17.504 98.902 17.084L100.504 17.858C100.108 18.578 99.568 19.166 98.884 19.622C98.2 20.066 97.348 20.288 96.328 20.288ZM96.238 12.188C95.59 12.188 95.038 12.386 94.582 12.782C94.126 13.178 93.82 13.706 93.664 14.366H98.758C98.734 14.054 98.632 13.73 98.452 13.394C98.272 13.058 97.996 12.776 97.624 12.548C97.264 12.308 96.802 12.188 96.238 12.188Z" fill="#5F6368"/>
+<mask id="mask0_1319:6668" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="3" width="24" height="24">
+<path d="M12 27C18.6274 27 24 21.6274 24 15C24 8.37258 18.6274 3 12 3C5.37258 3 0 8.37258 0 15C0 21.6274 5.37258 27 12 27Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_1319:6668)">
+<path d="M1.90918 3V17.7273H7.28191L12.0001 9.54545H24.0001V3H1.90918Z" fill="#DB4437"/>
+<path d="M1.90918 3V17.7273H7.28191L12.0001 9.54545H24.0001V3H1.90918Z" fill="url(#paint0_linear_1319:6668)"/>
+<path d="M0 27H11.4273L16.7455 21.6818V17.7273H7.25455L0 5.25V27Z" fill="#0F9D58"/>
+<path d="M0 27H11.4273L16.7455 21.6818V17.7273H7.25455L0 5.25V27Z" fill="url(#paint1_linear_1319:6668)"/>
+<path d="M12 9.54541L16.7182 17.7272L11.4546 27H24V9.54541H12Z" fill="#FFCD40"/>
+<path d="M12 9.54541L16.7182 17.7272L11.4546 27H24V9.54541H12Z" fill="url(#paint2_linear_1319:6668)"/>
+<path opacity="0.1" d="M7.40463 17.6863L1.90918 8.50903L7.22736 17.7545L7.40463 17.6863Z" fill="#3E2723"/>
+<path opacity="0.1" d="M16.609 17.9046L16.4999 17.8501L11.4136 26.9865L16.6363 17.8501L16.609 17.9046Z" fill="#263238"/>
+<path d="M12 9.54541V12.409L22.6909 9.54541H12Z" fill="url(#paint3_radial_1319:6668)"/>
+<path d="M1.90918 8.52271L9.70918 16.3227L7.28191 17.7273L1.90918 8.52271Z" fill="url(#paint4_radial_1319:6668)"/>
+<path d="M11.4272 27L14.2909 16.3228L16.7182 17.7273L11.4272 27Z" fill="url(#paint5_radial_1319:6668)"/>
+<path d="M12 20.4545C15.0124 20.4545 17.4545 18.0124 17.4545 15C17.4545 11.9875 15.0124 9.54541 12 9.54541C8.98749 9.54541 6.54541 11.9875 6.54541 15C6.54541 18.0124 8.98749 20.4545 12 20.4545Z" fill="#F1F1F1"/>
+<path d="M11.9999 19.3637C14.4098 19.3637 16.3635 17.4101 16.3635 15.0001C16.3635 12.5901 14.4098 10.6365 11.9999 10.6365C9.5899 10.6365 7.63623 12.5901 7.63623 15.0001C7.63623 17.4101 9.5899 19.3637 11.9999 19.3637Z" fill="#4285F4"/>
+<path d="M12 27C18.6274 27 24 21.6274 24 15C24 8.37258 18.6274 3 12 3C5.37258 3 0 8.37258 0 15C0 21.6274 5.37258 27 12 27Z" fill="url(#paint6_radial_1319:6668)"/>
+<path opacity="0.2" d="M12 9.40918C10.5547 9.4135 9.16977 9.98956 8.14778 11.0115C7.12579 12.0335 6.54973 13.4184 6.54541 14.8637V15.0001C6.54973 13.5548 7.12579 12.1699 8.14778 11.1479C9.16977 10.1259 10.5547 9.54986 12 9.54554H24V9.40918H12Z" fill="#3E2723"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1319:6668" x1="2.84327" y1="12.1664" x2="10.0024" y2="7.99364" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A52714" stop-opacity="0.6"/>
+<stop offset="0.7" stop-color="#A52714" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1319:6668" x1="14.0905" y1="24.3764" x2="6.12682" y2="19.7127" gradientUnits="userSpaceOnUse">
+<stop stop-color="#055524" stop-opacity="0.4"/>
+<stop offset="0.3" stop-color="#055524" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1319:6668" x1="15.5755" y1="8.85814" x2="17.58" y2="17.6263" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EA6100" stop-opacity="0.3"/>
+<stop offset="0.7" stop-color="#EA6100" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint3_radial_1319:6668" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4818 9.54541) scale(11.4682)">
+<stop stop-color="#3E2723" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#3E2723" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1319:6668" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(164.929 1338.58) scale(608.4 717.955)">
+<stop stop-color="#3E2723" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#3E2723" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_1319:6668" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.9727 15.0137) scale(11.9864)">
+<stop stop-color="#263238" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#263238" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_1319:6668" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3.58636 6.27273) scale(24.1091)">
+<stop stop-color="white" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/images/lockup.svg b/src/images/lockup.svg
index 51b73b5d8b9..ef9ed03f46f 100644
--- a/src/images/lockup.svg
+++ b/src/images/lockup.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"/><g transform="translate(.639 .717)"><defs><filter id="a" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a)"/></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"/></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"/><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" fill="#5f6368"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="119.79" height="22.32" viewBox="0 0 119.79 22.32"><path class="brand__text" d="M114.99 19.32h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4Zm-16.8-7.3h6.8a3.17 3.17 0 0 0-3.4-2.9 3.42 3.42 0 0 0-3.4 2.9Zm3.6 7.7a6 6 0 0 1-6-6.3c0-3.6 2.5-6.3 5.9-6.3s5.8 2.4 5.8 6.5v.2h-9.3a3.88 3.88 0 0 0 3.8 3.9 3.56 3.56 0 0 0 3.3-2.1l2 1a6.22 6.22 0 0 1-5.5 3.1Zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3a5 5 0 0 1 4.1 2h.1l-.1-1.6v-5.5h2.2v17.3h-2.1v-1.6h-.1a5.12 5.12 0 0 1-4.1 2Zm.3-2c2.2 0 3.8-1.7 3.8-4.3s-1.6-4.3-3.8-4.3a4 4 0 0 0-3.8 4.3 4 4 0 0 0 3.8 4.3Zm-6.8.1a1.61 1.61 0 0 1-1.7 1.6 1.74 1.74 0 0 1-1.7-1.6 1.67 1.67 0 0 1 1.7-1.6 1.61 1.61 0 0 1 1.7 1.6Zm-10.5-.1a4 4 0 0 0 3.8-4.3 4 4 0 0 0-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3Zm.4 2a5 5 0 0 1-4.1-2h-.1v1.6h-2.1V2.02h2.2v5.5l-.1 1.6h.1a4.84 4.84 0 0 1 4.1-2c3.1 0 5.7 2.8 5.7 6.3s-2.6 6.3-5.7 6.3Zm-17.4-7.7h6.8a3.17 3.17 0 0 0-3.4-2.9 3.42 3.42 0 0 0-3.4 2.9Zm3.6 7.7a6 6 0 0 1-6-6.3c0-3.6 2.5-6.3 5.9-6.3s5.8 2.4 5.8 6.5v.2h-9.3a3.88 3.88 0 0 0 3.8 3.9 3.67 3.67 0 0 0 3.3-2.1l2 1a6.22 6.22 0 0 1-5.5 3.1Zm-6.3-12.2-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3l-3.9-11.9h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9Z" fill="#5f6368" fill-rule="evenodd"/><path d="M0 19.28a3 3 0 0 1 3-3h16.27a3.045 3.045 0 0 1 0 6.09H3.04A3 3 0 0 1 0 19.28Z" fill="#6cf"/><path d="M.89.9a3 3 0 0 1 4.3 0l8.12 8.11a3.05 3.05 0 0 1 0 4.3l-8.12 8.12a3.04 3.04 0 1 1-4.3-4.3l5.6-5.61a.51.51 0 0 0 0-.72L.89 5.22A3 3 0 0 1 .89.9Z" fill="#06f" fill-rule="evenodd"/><path d="m10.39 16.22-5.2 5.2a3.04 3.04 0 1 1-4.3-4.3l.89-.9Z" fill="#c6f"/><circle cx="19.27" cy="19.27" r="3.04" fill="#06f"/></svg>
diff --git a/src/images/logo.svg b/src/images/logo.svg
new file mode 100644
index 00000000000..ec0856cc3ea
--- /dev/null
+++ b/src/images/logo.svg
@@ -0,0 +1,7 @@
+<svg width="125" height="24" viewBox="0 0 125 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.625 19.9489C0.625 18.2638 1.99102 16.8977 3.67614 16.8977H19.9489C21.634 16.8977 23 18.2638 23 19.9489C23 21.634 21.634 23 19.9489 23H3.67614C1.99102 23 0.625 21.634 0.625 19.9489Z" fill="#66CCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.51866 1.51866C2.7102 0.327114 4.64208 0.327114 5.83361 1.51866L13.97 9.65503C15.1615 10.8466 15.1615 12.7784 13.97 13.97L5.83361 22.1063C4.64208 23.2979 2.7102 23.2979 1.51866 22.1063C0.327114 20.9148 0.327114 18.9829 1.51866 17.7914L7.13797 12.1721C7.33655 11.9735 7.33655 11.6515 7.13797 11.4529L1.51866 5.83361C0.327114 4.64208 0.327114 2.7102 1.51866 1.51866Z" fill="#0066FF"/>
+<path d="M11.0422 16.8977L5.83361 22.1063C4.64208 23.2979 2.7102 23.2979 1.51866 22.1063C0.327114 20.9148 0.327114 18.9829 1.51866 17.7914L2.41233 16.8977H11.0422Z" fill="#CC66FF"/>
+<path d="M19.9488 23C21.6339 23 23 21.634 23 19.9489C23 18.2638 21.6339 16.8977 19.9488 16.8977C18.2637 16.8977 16.8977 18.2638 16.8977 19.9489C16.8977 21.634 18.2637 23 19.9488 23Z" fill="#0066FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.6 20.1H114.4L109.6 8.20005H112L115.5 17.4L119 8.20005H121.4L116.6 20.1V20.1ZM99.8 12.8H106.6C106.5 11.2 105.2 9.90005 103.2 9.90005C101.5 9.90005 100.2 11 99.8 12.8V12.8ZM103.4 20.5C99.9 20.5 97.4 17.8 97.4 14.2C97.4 10.6 99.9 7.90005 103.3 7.90005C106.8 7.90005 109.1 10.3 109.1 14.4V14.6H99.8C99.9 16.9 101.6 18.5 103.6 18.5C105 18.5 106.2 17.8 106.9 16.4L108.9 17.4C107.8 19.3 105.8 20.5 103.4 20.5V20.5ZM89.4 20.5C86.3 20.5 83.7 17.7 83.7 14.2C83.7 10.7 86.3 7.90005 89.4 7.90005C91.1 7.90005 92.7 8.70005 93.5 9.90005H93.6L93.5 8.30005V2.80005H95.7V20.1H93.6V18.5H93.5C92.6 19.7 91.1 20.5 89.4 20.5V20.5ZM89.7 18.5C91.9 18.5 93.5 16.8 93.5 14.2C93.5 11.7 91.9 9.90005 89.7 9.90005C87.6 9.90005 85.9 11.7 85.9 14.2C85.9 16.7 87.6 18.5 89.7 18.5ZM82.9 18.6C82.9 19.5 82.2 20.2001 81.2 20.2001C80.3 20.2001 79.5 19.4 79.5 18.6C79.5 17.7 80.3 17 81.2 17C82.2 17 82.9 17.7 82.9 18.6ZM72.4 18.5C74.5 18.5 76.2 16.7 76.2 14.2C76.2 11.7 74.5 9.90005 72.4 9.90005C70.2 9.90005 68.6 11.7 68.6 14.2C68.6 16.7 70.2 18.5 72.4 18.5ZM72.8 20.5C71.1 20.5 69.5 19.7 68.7 18.5H68.6V20.1H66.5V2.80005H68.7V8.30005L68.6 9.90005H68.7C69.5 8.70005 71 7.90005 72.8 7.90005C75.9 7.90005 78.5 10.7 78.5 14.2C78.4 17.7 75.9 20.5 72.8 20.5V20.5ZM55.4 12.8H62.2C62.1 11.2 60.8 9.90005 58.8 9.90005C57.1 9.90005 55.8 11 55.4 12.8V12.8ZM59 20.5C55.5 20.5 53 17.8 53 14.2C53 10.6 55.5 7.90005 58.9 7.90005C62.4 7.90005 64.7 10.3 64.7 14.4V14.6H55.4C55.5 16.9 57.2 18.5 59.2 18.5C60.6 18.5 61.7 17.8 62.5 16.4L64.5 17.4C63.4 19.3 61.4 20.5 59 20.5V20.5ZM52.7 8.30005L48.9 20.2001H46.6L43.6 11.1L40.7 20.2001H38.4L34.5 8.30005H36.8L39.4 17.3L42.3 8.30005H44.6L47.5 17.3L50.1 8.30005H52.7V8.30005Z" />
+</svg>
diff --git a/src/images/modules/cds20-wide_960.jpg b/src/images/modules/cds20-wide_960.jpg
new file mode 100644
index 00000000000..c33dc9a1a24
Binary files /dev/null and b/src/images/modules/cds20-wide_960.jpg differ
diff --git a/src/images/podcasts/css-podcast.jpg b/src/images/podcasts/css-podcast.jpg
index 670c57146a3..94cd711fe36 100644
Binary files a/src/images/podcasts/css-podcast.jpg and b/src/images/podcasts/css-podcast.jpg differ
diff --git a/src/images/podcasts/designer-vs-developer.jpg b/src/images/podcasts/designer-vs-developer.jpg
index e65bbaabe1a..8e920020cfb 100644
Binary files a/src/images/podcasts/designer-vs-developer.jpg and b/src/images/podcasts/designer-vs-developer.jpg differ
diff --git a/src/images/podcasts/search-off-the-record.jpg b/src/images/podcasts/search-off-the-record.jpg
new file mode 100644
index 00000000000..b75fb3d300a
Binary files /dev/null and b/src/images/podcasts/search-off-the-record.jpg differ
diff --git a/src/images/podcasts/state-of-the-web.jpg b/src/images/podcasts/state-of-the-web.jpg
index d8cae751843..ad7c4e44430 100644
Binary files a/src/images/podcasts/state-of-the-web.jpg and b/src/images/podcasts/state-of-the-web.jpg differ
diff --git a/src/images/screenshot1.png b/src/images/screenshot1.png
new file mode 100644
index 00000000000..393622ebe1c
Binary files /dev/null and b/src/images/screenshot1.png differ
diff --git a/src/images/screenshot2.png b/src/images/screenshot2.png
new file mode 100644
index 00000000000..3732159ad45
Binary files /dev/null and b/src/images/screenshot2.png differ
diff --git a/src/images/screenshot3.png b/src/images/screenshot3.png
new file mode 100644
index 00000000000..5ff02304643
Binary files /dev/null and b/src/images/screenshot3.png differ
diff --git a/src/images/rss-banner.png b/src/images/shared/rss-banner.png
similarity index 100%
rename from src/images/rss-banner.png
rename to src/images/shared/rss-banner.png
diff --git a/src/images/social.png b/src/images/social.png
index 3fd045bc166..03d49ebc8cd 100644
Binary files a/src/images/social.png and b/src/images/social.png differ
diff --git a/src/images/tags/scale-on-web.svg b/src/images/tags/scale-on-web.svg
new file mode 100644
index 00000000000..d72c54ae5bf
--- /dev/null
+++ b/src/images/tags/scale-on-web.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 338 155"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#4285f4;}.cls-3,.cls-4,.cls-5{opacity:0.48;}.cls-4{fill:#f2f0ff;}.cls-5{fill:#c3bce8;}.cls-6{font-size:61.9px;}.cls-6,.cls-7{fill:#3c3c3b;font-family:GoogleSans-Regular, Google Sans;}.cls-7{font-size:36.15px;}.cls-8{letter-spacing:-0.01em;}</style><clipPath id="clip-path"><rect class="cls-1" x="186.12" y="33.28" width="80.56" height="80.56"/></clipPath></defs><title>Logo_SOW</title><g class="cls-2"><path class="cls-3" d="M244.6,59a27.17,27.17,0,1,0,8,19.22A27,27,0,0,0,244.6,59Z"/><path class="cls-3" d="M244.6,59a27,27,0,0,0-19.22-8V105.4A27.17,27.17,0,0,0,244.6,59Z"/><path class="cls-4" d="M252.51,76.63h-13.8a57.64,57.64,0,0,0-1.12-10H250a27.49,27.49,0,0,0-1.78-3.18H236.85a40.32,40.32,0,0,0-5-11.62,26.75,26.75,0,0,0-4.49-.7,29.56,29.56,0,0,1,5,8.78c.44,1.14.84,2.32,1.19,3.54H217.22c.35-1.22.74-2.4,1.18-3.54a29.79,29.79,0,0,1,5-8.78,26.75,26.75,0,0,0-4.49.7,40.32,40.32,0,0,0-5,11.62H202.58a26.08,26.08,0,0,0-1.78,3.18h12.37a58.64,58.64,0,0,0-1.11,10h-13.8c0,.53,0,1.06,0,1.6s0,1.06,0,1.59h13.8a58.64,58.64,0,0,0,1.11,10H200.8A26.08,26.08,0,0,0,202.58,93h11.34a40.32,40.32,0,0,0,5,11.62,26.75,26.75,0,0,0,4.49.7,29.79,29.79,0,0,1-5-8.78c-.44-1.14-.83-2.32-1.18-3.54h16.33c-.35,1.22-.75,2.4-1.19,3.54a29.56,29.56,0,0,1-5,8.78,26.75,26.75,0,0,0,4.49-.7,40.32,40.32,0,0,0,5-11.62h11.34A27.49,27.49,0,0,0,250,89.83H237.59a57.64,57.64,0,0,0,1.12-10h13.8c0-.53.05-1.06.05-1.59S252.54,77.16,252.51,76.63Zm-18.16,13.2H216.42a55.94,55.94,0,0,1-1.18-10h20.28A55,55,0,0,1,234.35,89.83Zm-19.11-13.2a55.94,55.94,0,0,1,1.18-10h17.93a55,55,0,0,1,1.17,10Z"/><path class="cls-5" d="M252.51,79.82c0-.53.05-1.06.05-1.59s0-1.07-.05-1.6h-13.8a57.64,57.64,0,0,0-1.12-10H250a27.49,27.49,0,0,0-1.78-3.18H236.85a40.32,40.32,0,0,0-5-11.62,26.75,26.75,0,0,0-4.49-.7,29.56,29.56,0,0,1,5,8.78c.44,1.14.84,2.32,1.19,3.54h-8.17v3.18h9a55,55,0,0,1,1.17,10H225.38v3.19h10.14a55,55,0,0,1-1.17,10h-9V93h8.17c-.35,1.22-.75,2.4-1.19,3.54a29.56,29.56,0,0,1-5,8.78,26.75,26.75,0,0,0,4.49-.7,40.32,40.32,0,0,0,5-11.62h11.34A27.49,27.49,0,0,0,250,89.83H237.59a57.64,57.64,0,0,0,1.12-10Z"/></g><text class="cls-6" transform="translate(2 100.47)">SCALE</text><text class="cls-7" transform="translate(266.17 74.88)"><tspan class="cls-8">o</tspan><tspan x="21.18" y="0">n </tspan><tspan class="cls-8" x="0" y="27.64">w</tspan><tspan x="27.72" y="27.64">eb</tspan></text></svg>
\ No newline at end of file
diff --git a/src/lib/actions.js b/src/lib/actions.js
index 4f3aacdf52f..8f193e425b4 100644
--- a/src/lib/actions.js
+++ b/src/lib/actions.js
@@ -1,10 +1,11 @@
 import {store} from './store';
-import {saveUserUrl} from './fb';
-import {runLighthouse, fetchReports} from './lighthouse-service';
+import {fetchReports} from './lighthouse-service';
+import {runPsi} from './psi-service';
 import lang from './utils/language';
 import {localStorage} from './utils/storage';
-import {getCanonicalPath} from './urls';
 import cookies from 'js-cookie';
+import {ids} from 'webdev_analytics';
+import {isProd} from 'webdev_config';
 
 export const clearSignedInState = store.action(() => {
   const {isSignedIn} = store.getState();
@@ -21,12 +22,8 @@ export const clearSignedInState = store.action(() => {
   }
 });
 
-export const requestRunLighthouse = store.action((state, url) => {
+export const requestRunPSI = store.action((state, url) => {
   const p = (async () => {
-    if (state.activeLighthouseUrl) {
-      return null; // there's an active run, nothing will happen
-    }
-
     // Only write the user's URL preference to `activeLighthouseUrl` here before running
     // Lighthouse. The `userUrl` field inside state is not "safe" in that it can be replaced by
     // Firestore at any point. This ensures that results are never approportioned to the wrong URL.
@@ -34,51 +31,39 @@ export const requestRunLighthouse = store.action((state, url) => {
       activeLighthouseUrl: url,
       lighthouseError: null,
     });
-
-    const run = await runLighthouse(url, state.isSignedIn);
-    const auditedOn = new Date(run.auditedOn);
+    const run = await runPsi(url);
     state = store.getState(); // might change during runLighthouse
-
-    // Don't just replace last run for signed in users to avoid double rendering / outdated
-    // sparkline data. Instead, call fetchReports() to repopulate the graphs with the latest data.
-    // Yes, this means that signed-in users have two network requests.
-
-    const firstSeenUrl = await saveUserUrl(url, auditedOn); // write to Firestore and get first seen
-
-    // nb. use firstSeenUrl as state.userUrlSeen is updated from a Firebase snapshot which
-    // usually has not arrived by now (since it's updated right above)
-    const runs = await fetchReports(url, firstSeenUrl);
-
     return {
       userUrl: url,
       activeLighthouseUrl: null,
       lighthouseResult: {
         url,
-        runs,
+        run,
       },
     };
   })();
 
   return p.catch((err) => {
-    console.warn('failed to run Lighthouse', url, err);
-
-    const update = {
-      lighthouseError: err.toString(),
-      activeLighthouseUrl: null,
-    };
-
-    // If the previous result was for a different URL, clear it so there's not confusion about
-    // what the error is being shown for.
-    const {lighthouseResult} = store.getState();
-    if (lighthouseResult && lighthouseResult.url !== url) {
-      update.lighthouseResult = null;
-    }
-
-    return update;
+    const errMsg = err.name === 'FetchError' ? err.name : err.toString();
+    console.warn('failed to run PSI', url, errMsg);
+    return setLighthouseError(errMsg);
   });
 });
 
-export const requestFetchReports = store.action((state, url, startDate) => {
+export const setLighthouseError = store.action((_, errMsg) => {
+  const update = {
+    lighthouseError: errMsg,
+    activeLighthouseUrl: null,
+  };
+  const {activeLighthouseUrl, lighthouseResult} = store.getState();
+  if (lighthouseResult && lighthouseResult.url !== activeLighthouseUrl) {
+    update.lighthouseResult = null;
+  }
+  store.setState(update);
+  return update;
+});
+
+export const requestFetchReports = store.action((_, url, startDate) => {
   const p = (async () => {
     const runs = await fetchReports(url, startDate);
 
@@ -124,60 +109,88 @@ export const requestFetchReports = store.action((state, url, startDate) => {
   });
 });
 
-export const expandSideNav = store.action(() => {
-  openModal();
-  return {isSideNavExpanded: true};
+/**
+ * Inert the page so scrolling and pointer events are disabled.
+ * This is used when we open the navigation drawer or show a modal dialog.
+ */
+const disablePage = () => {
+  // Setting the majority of the page as inert can have a significant perf hit when
+  // trying to animate e.g. the navigation drawer, so do it in the frame after this
+  // to avoid blocking on interaction and incurring an INP delay.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = true;
+      if (footer) footer.inert = true;
+    });
+  });
+};
+
+/**
+ * Uninert the page so scrolling and pointer events work again.
+ */
+const enablePage = () => {
+  // Similar to disablePage(), go inert in the next frame to avoid the perf hit.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = false;
+      if (footer) footer.inert = false;
+    });
+  });
+};
+
+export const openNavigationDrawer = store.action(() => {
+  disablePage();
+  return {isNavigationDrawerOpen: true};
 });
 
-export const collapseSideNav = store.action(() => {
-  closeModal();
-  return {isSideNavExpanded: false};
+export const closeNavigationDrawer = store.action(() => {
+  enablePage();
+  return {isNavigationDrawerOpen: false};
 });
 
 export const openModal = store.action(() => {
-  const main = document.querySelector('main');
-  const header = document.querySelector('web-header');
-  const footer = document.querySelector('.w-footer');
-
-  document.documentElement.classList.add('web-modal__overflow-hidden');
-  main.inert = true;
-  header.inert = true;
-  footer.inert = true;
+  disablePage();
   return {isModalOpen: true};
 });
 
 export const closeModal = store.action(() => {
-  const main = document.querySelector('main');
-  const header = document.querySelector('web-header');
-  const footer = document.querySelector('.w-footer');
-
-  document.documentElement.classList.remove('web-modal__overflow-hidden');
-  main.inert = false;
-  header.inert = false;
-  footer.inert = false;
+  enablePage();
   return {isModalOpen: false};
 });
 
-export const checkIfUserAcceptsCookies = store.action(
-  ({userAcceptsCookies}) => {
-    if (userAcceptsCookies) {
-      return;
-    }
+export const checkIfUserAcceptsCookies = store.action(({cookiePreference}) => {
+  if (cookiePreference) {
+    return;
+  }
 
-    if (localStorage['web-accepts-cookies']) {
-      return {
-        userAcceptsCookies: true,
-      };
-    }
+  // If set, this will be either the string '1' or '0' based on whether
+  // the user has accepted or rejected the use of cookies.
+  // If not set it means the user has not made a choice (or cleared storage).
+  const storedWebAcceptsCookiesValue = localStorage['web-accepts-cookies'];
 
-    return {showingSnackbar: true, snackbarType: 'cookies'};
-  },
-);
+  if (typeof storedWebAcceptsCookiesValue === 'string') {
+    cookiePreference =
+      storedWebAcceptsCookiesValue === '1' ? 'accepts' : 'rejects';
+  } else {
+    cookiePreference = null;
+  }
+
+  // Only show the cookie snack-bar if the user hasn't set a preference.
+  const showingSnackbar = cookiePreference === null;
+
+  return {cookiePreference, showingSnackbar, snackbarType: 'cookies'};
+});
 
 export const setUserAcceptsCookies = store.action(() => {
-  localStorage['web-accepts-cookies'] = 1;
+  localStorage['web-accepts-cookies'] = '1';
   return {
-    userAcceptsCookies: true,
+    cookiePreference: 'accepts',
     showingSnackbar: false,
     // Note we don't set the snackbarType to null because that would cause the
     // snackbar to re-render and break the animation.
@@ -186,34 +199,41 @@ export const setUserAcceptsCookies = store.action(() => {
   };
 });
 
-export const checkUserPreferredLanguage = store.action(
-  ({userPreferredLanguage}) => {
-    userPreferredLanguage =
-      // Use currently set language.
-      userPreferredLanguage ||
-      // Or check in the url.
-      lang.getLanguageFromPath(location.pathname) ||
-      // Or check in a cookie.
-      cookies.get('preferred_lang') ||
-      // Or check in the browser setting.
-      navigator.language.split('-')[0];
-    if (!lang.isValidLanguage(userPreferredLanguage)) {
-      userPreferredLanguage = '';
-    }
-    return {userPreferredLanguage};
-  },
-);
+export const setUserRejectsCookies = store.action(() => {
+  localStorage['web-accepts-cookies'] = '0';
+  return {
+    cookiePreference: 'rejects',
+    showingSnackbar: false,
+    // Note we don't set the snackbarType to null because that would cause the
+    // snackbar to re-render and break the animation.
+    // Instead, snackbarType is allowed to stick around and future updates can
+    // overwrite it.
+  };
+});
 
-export const setLanguage = store.action((state, preferredLanguage) => {
+export const setLanguage = store.action((state, language) => {
+  if (!lang.isValidLanguage(language)) {
+    return state;
+  }
   const options = {
     expires: 10 * 365, // 10 years
     samesite: 'strict',
   };
-  cookies.set('preferred_lang', preferredLanguage, options);
-  if (preferredLanguage !== state.userPreferredLanguage) {
-    location.pathname = getCanonicalPath(location.pathname);
+  cookies.set('firebase-language-override', language, options);
+  if (language !== state.currentLanguage) {
+    location.reload();
   }
   return {
-    userPreferredLanguage: preferredLanguage,
+    currentLanguage: language,
   };
 });
+
+export const loadAnalyticsScript = store.action(() => {
+  const {gtmScriptLoaded} = store.getState();
+  if (!gtmScriptLoaded && isProd) {
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${ids.GTM}`, null);
+    return {
+      gtmScriptLoaded: true,
+    };
+  }
+});
diff --git a/src/lib/analytics.js b/src/lib/analytics.js
index d76aa82a268..d04bb1734df 100644
--- a/src/lib/analytics.js
+++ b/src/lib/analytics.js
@@ -1,112 +1,421 @@
-import {getCLS, getFID, getLCP} from 'web-vitals';
-import {dimensions} from 'webdev_analytics';
+import {
+  onCLS,
+  onFCP,
+  onFID,
+  onINP,
+  onLCP,
+  onTTFB,
+} from 'web-vitals/attribution';
 import {store} from './store';
+import {checkIfUserAcceptsCookies} from './actions.js';
+import {version} from 'webdev_analytics';
 
-// Events missing from DevSite include:
-//   * "devsite-analytics-observation", generated by the Metric class for page load timing
-//   * "devsite-analytics-error", wired up to the onerror handler
-//   * "devsite-analytics-set-dimension", for user response to custom questions
-//   * "devsite-analytics-scope", which constructs complex click events (was used for header)
-//
-// Note that many parts of our code are annotated with an "gc-analytics-event" attribute, but this
-// is actually ignored in DevSite v2. Instead, any links that have `data-category` automatically
-// have clicks logged (see below).
-
-function getAnalyticsDataFromElement(elem, defaultAction = 'click') {
-  const category = elem.dataset['category'] || undefined;
-  const action = elem.dataset['action'] || defaultAction;
-  const label = elem.dataset['label'] || undefined;
-  const value = Number(elem.dataset['value']) || undefined; // must be number, or is ignored
-  return {
-    category,
-    action,
-    label,
-    value,
-  };
-}
+// A function that should be called once all all analytics code has been
+// initialized. Calling this will resolve the `whenAnalyticsInitialize`
+// promise.
+let markAnalyticsInitialized;
+
+// A promise that settles once all analytics has been initialized.
+// Internally this assigned the `resolve()` function to the module-level
+// `markAnalyticsInitialized` variable.
+const whenAnalyticsInitialized = new Promise((resolve) => {
+  markAnalyticsInitialized = resolve;
+});
 
 /**
- * @param {{ category: string, action: string, label: string, value: number }} param
+ * @param {string} name
+ * @param {Object} params
  */
-export function trackEvent({category, action, label, value}) {
-  ga('send', 'event', {
-    eventCategory: category,
-    eventAction: action,
-    eventLabel: label,
-    eventValue: value,
-  });
+export async function logEvent(name, params) {
+  await whenAnalyticsInitialized;
+  gtag('event', name, params);
 }
 
 /**
- * Track an error via Analytics with optional context message and fatal notice.
+ * Logs an error via Analytics with optional context message and fatal notice.
  *
- * @param {!Error} error to log
+ * @param {Error} error to log
  * @param {string=} message context to provide around error message
  * @param {boolean=} fatal whether this is fatal (as per Analytics' logging)
  */
-export function trackError(error, message = '', fatal = false) {
-  const exDescription = message
-    ? `${message} (${error.message})`
-    : error.message;
-  ga('send', 'exception', {
-    exDescription,
-    exFatal: fatal,
-  });
+export function logError(error, message = '', fatal = false) {
+  const description = message ? `${message} (${error.message})` : error.message;
+  logEvent('exception', {description, fatal});
 }
 
 /**
  * See: https://github.com/GoogleChrome/web-vitals#using-analyticsjs
  * @param {Object} metric
  */
-function sendToGoogleAnalytics({name, delta, id}) {
-  // Assumes the global `ga()` function exists, see:
-  // https://developers.google.com/analytics/devguides/collection/analyticsjs
-  ga('send', 'event', {
-    eventCategory: 'Web Vitals',
-    eventAction: name,
-    // Google Analytics metrics must be integers, so the value is rounded.
-    // For CLS the value is first multiplied by 1000 for greater precision
-    // (note: increase the multiplier for greater precision if needed).
-    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
+function sendToGoogleAnalytics({
+  name,
+  value,
+  delta,
+  id,
+  attribution,
+  navigationType,
+}) {
+  const params = {
+    event_category: 'Web Vitals',
     // The `id` value will be unique to the current page load. When sending
     // multiple values from the same page (e.g. for CLS), Google Analytics can
     // compute a total by grouping on this ID (note: requires `eventLabel` to
     // be a dimension in your report).
-    eventLabel: id,
+    event_label: id,
+    // Google Analytics metrics must be integers, so the value is rounded.
+    // For CLS the value is first multiplied by 1000 for greater precision
+    // (note: increase the multiplier for greater precision if needed).
+    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
+    // Send the raw metric value in addition to the value computed for GA
+    // so it's available in BigQuery and the API.
+    metric_value: value,
+    // This should already by set globally, but to ensure it's consistent
+    // with the web-vitals library, set it again.
+    // Override for 'navigational-prefetch' for the prefetch origin trial
+    // experiment (https://github.com/GoogleChrome/web.dev/pull/9532)
+    navigation_type:
+      navigationType === 'navigate' &&
+      performance.getEntriesByType &&
+      performance.getEntriesByType('navigation')[0] &&
+      performance.getEntriesByType('navigation')[0].deliveryType ===
+        'navigational-prefetch'
+        ? 'navigational-prefetch'
+        : navigationType,
     // Use a non-interaction event to avoid affecting bounce rate.
-    nonInteraction: true,
-  });
+    // This only applies to Universal Analytics and can be deleted once
+    // we're only using GA4.
+    non_interaction: true,
+  };
+
+  let overrides;
+  let debug_input_delay;
+  let debug_processing_time;
+  let debug_presentation_delay;
+
+  switch (name) {
+    case 'CLS':
+      overrides = {
+        debug_time: attribution.largestShiftTime,
+        debug_load_state: attribution.loadState,
+        debug_target: attribution.largestShiftTarget || '(not set)',
+      };
+      break;
+    case 'FCP':
+      overrides = {
+        debug_ttfb: attribution.timeToFirstByte,
+        debug_fb2fcp: attribution.firstByteToFCP,
+        debug_load_state: attribution.loadState,
+        debug_target: attribution.loadState || '(not set)',
+      };
+      break;
+    case 'FID':
+      overrides = {
+        debug_event: attribution.eventType,
+        debug_time: attribution.eventTime,
+        debug_load_state: attribution.loadState,
+        debug_target: attribution.eventTarget || '(not set)',
+      };
+      break;
+    case 'INP':
+      if (attribution.eventEntry) {
+        debug_input_delay = Math.round(
+          attribution.eventEntry.processingStart -
+            attribution.eventEntry.startTime,
+        );
+        debug_processing_time = Math.round(
+          attribution.eventEntry.processingEnd -
+            attribution.eventEntry.processingStart,
+        );
+        debug_presentation_delay = Math.round(
+          // RenderTime is an estimate, because duration is rounded, and may get rounded down.
+          // In rare cases it can be less than processingEnd and that breaks performance.measure().
+          // Lets make sure its at least 4ms in those cases so you can just barely see it.
+          Math.max(
+            attribution.eventEntry.processingEnd + 4,
+            attribution.eventEntry.startTime + attribution.eventEntry.duration,
+          ) - attribution.eventEntry.processingEnd,
+        );
+      }
+      overrides = {
+        debug_event: attribution.eventType,
+        debug_time: attribution.eventTime,
+        debug_load_state: attribution.loadState,
+        debug_target: attribution.eventTarget || '(not set)',
+        debug_input_delay: debug_input_delay,
+        debug_processing_time: debug_processing_time,
+        debug_presentation_delay: debug_presentation_delay,
+      };
+      break;
+    case 'LCP':
+      overrides = {
+        debug_url: attribution.url,
+        debug_ttfb: attribution.timeToFirstByte,
+        debug_rld: attribution.resourceLoadDelay,
+        debug_rlt: attribution.resourceLoadTime,
+        debug_erd: attribution.elementRenderDelay,
+        debug_target: attribution.element || '(not set)',
+      };
+      break;
+    case 'TTFB':
+      overrides = {
+        debug_waiting_time: attribution.waitingTime,
+        debug_dns_time: attribution.dnsTime,
+        debug_connection_time: attribution.connectionTime,
+        debug_request_time: attribution.requestTime,
+      };
+      break;
+  }
+
+  logEvent(name, Object.assign(params, overrides));
 }
 
 /**
- * Configure tracking events for any clicks on a link (`<a href="...">`)
- * or another trackable element (class="gc-analytics-event"), searching
+ * Configures logging events for any clicks on a link (`<a href="...">`)
+ * or another relevant elements (class="gc-analytics-event"), searching
  * for (requiring at least `data-category`, but also allowing
  * `data-action`, `data-label` and `data-value`.
  */
-document.addEventListener('click', (e) => {
-  const clickableEl = e.target.closest('a[href], .gc-analytics-event');
-  if (!clickableEl) {
+function addClickEventListener() {
+  document.addEventListener(
+    'click',
+    /**
+     * @param {WMouseEvent} e
+     */
+    (e) => {
+      const clickableEl = e.target.closest('a[href], .gc-analytics-event');
+      if (!clickableEl) {
+        return;
+      }
+      const event = clickableEl.dataset['action'] || 'click';
+      const category = clickableEl.dataset['category'] || undefined;
+      const label = clickableEl.dataset['label'] || undefined;
+      // must be number, or is ignored
+      const value = Number(clickableEl.dataset['value']) || undefined;
+
+      if (event && category) {
+        logEvent(event, {
+          event_category: category,
+          event_label: label,
+          value: value,
+        });
+      }
+    },
+  );
+}
+
+/**
+ * Adds a listener to detect back/forward cache restores and log them
+ * as pageviews with the "back-forward-cache" navigation type set (in
+ * case we need to distinguish them from regular pageviews).
+ * https://web.dev/bfcache/#how-bfcache-affects-analytics-and-performance-measurement
+ */
+function addPageShowEventListener() {
+  window.addEventListener(
+    'pageshow',
+    /**
+     * @param {PageTransitionEvent} e
+     */
+    (e) => {
+      if (e.persisted) {
+        window.dataLayer.push({navigation_type: 'back-forward-cache'});
+        logEvent('page_view');
+      }
+    },
+  );
+}
+
+// Set up a promise for when the page is activated,
+// which is needed for prerendered pages.
+const whenPageActivated = new Promise((resolve) => {
+  if (document.prerendering) {
+    document.addEventListener('prerenderingchange', () => resolve());
+  } else {
+    resolve();
+  }
+});
+
+/**
+ * Gets the type of navigation for this page. In most cases this is the
+ * value returned by the Navigation Timing API (normalized to use kebab case),
+ * but in addition to this it also captures pages that were prerendered
+ * as well as page that were restored after a discard.
+ * @returns {string}
+ */
+function getNavigationType() {
+  if (document.wasDiscarded) {
+    return 'restore';
+  }
+
+  const navEntry =
+    self.performance &&
+    performance.getEntriesByType &&
+    performance.getEntriesByType('navigation')[0];
+
+  if (navEntry) {
+    // Prerendered pages have an activationStart time after activation
+    if (navEntry.activationStart > 0) {
+      return 'prerender';
+    } else if (
+      // For the document speculation rules origin trial
+      // overrwrite the navigation type
+      navEntry.type === 'navigate' &&
+      navEntry.deliveryType === 'navigational-prefetch'
+    ) {
+      return 'navigational-prefetch';
+    } else {
+      return navEntry.type.replace(/_/, '-');
+    }
+  }
+  return '(not set)';
+}
+
+/**
+ * Gets the type of navigation for this page. In most cases this is the
+ * value returned by the Navigation Timing API (normalized to use kebab case),
+ * but in addition to this it also captures pages that were prerendered
+ * as well as page that were restored after a discard.
+ * @returns {string|undefined}
+ */
+function getBackForwardNotRestoreReasons() {
+  const navEntry =
+    self.performance &&
+    performance.getEntriesByType &&
+    performance.getEntriesByType('navigation')[0];
+
+  if (navEntry) {
+    if (navEntry.notRestoredReasons) {
+      return navEntry.notRestoredReasons.reasons.toString();
+    }
+  }
+  return;
+}
+
+/**
+ * Returns a list of any `prerender` speculation rules defined by any
+ * `script[type=speculationrules]` elements on the page.
+ * @returns {Object}
+ */
+function getPrerenderRules() {
+  return [...document.querySelectorAll('script[type=speculationrules]')]
+    .map((s) => {
+      try {
+        return JSON.parse(s.textContent).prerender;
+      } catch {
+        // Ignore parse errors.
+      }
+    })
+    .flat() // Remove scripts with errors or no prerender rules.
+    .filter((rule) => rule && rule.source === 'list');
+}
+
+/**
+ * Logs analytics events for `prerender` speculation rules, if that browser
+ * support speculation rules and is not in Data Saver mode.
+ * @returns {void}
+ */
+function logPrerenders() {
+  // Only log prerender attempts if supported
+  // and not in datasaver mode
+  if (
+    !(
+      HTMLScriptElement.supports &&
+      HTMLScriptElement.supports('speculationrules')
+    ) ||
+    navigator.connection?.saveData
+  ) {
     return;
   }
 
-  const data = getAnalyticsDataFromElement(clickableEl);
-  if (!data.category) {
-    return; // category is required
+  const prerenderURLs = new Set(
+    getPrerenderRules()
+      .map((r) => r.urls)
+      .flat(),
+  );
+
+  prerenderURLs.forEach((prerenderURL) => {
+    logEvent('prerender_attempt', {
+      value: 1,
+      event_category: 'Site-Wide Custom Events',
+      event_label: prerenderURL,
+      // Use a non-interaction event to avoid affecting bounce rate.
+      non_interaction: true,
+    });
+  });
+}
+
+/**
+ * @param {string} name
+ * @returns {string|undefined}
+ */
+function getMeta(name) {
+  const meta = document.querySelector(`meta[name="${name}"]`);
+  return meta && meta.content;
+}
+
+/**
+ * Sets the config for a given analytics measurement ID,
+ * configured for the web.dev accounts.
+ */
+function setConfig() {
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({measurement_version: version});
+  const navigationType = getNavigationType();
+  window.dataLayer.push({navigation_type: navigationType});
+  if (navigationType === 'back-forward') {
+    const reasons = getBackForwardNotRestoreReasons();
+    window.dataLayer.push({back_forward_not_restore_reasons: reasons});
   }
+  window.dataLayer.push({page_path: location.pathname});
+  window.dataLayer.push({page_authors: getMeta('authors')});
+  window.dataLayer.push({page_tags: getMeta('tags')});
+  window.dataLayer.push({page_learn_paths: getMeta('paths')});
+  window.dataLayer.push({
+    color_scheme_preference: self.matchMedia('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light',
+  });
+  if (navigator.deviceMemory) {
+    window.dataLayer.push({device_memory: navigator.deviceMemory});
+  }
+  if (navigator.connection && navigator.connection.effectiveType) {
+    window.dataLayer.push({
+      effective_connection_type: navigator.connection.effectiveType,
+    });
+  }
+  if (location.hostname === 'localhost') {
+    window.dataLayer.push({debug_mode: true});
+  }
+  checkIfUserAcceptsCookies();
+  const {cookiePreference} = store.getState();
+  window.dataLayer.push({cookiePreference: cookiePreference});
 
-  trackEvent(data);
-});
+  logEvent('webdev_analytics_configed');
+}
 
-// Update Analytics dimension if signed-in state changes. This doesn't cause a
-// new pageview implicitly but annotates all further events.
-// We log pageviews only in bootstrap.js (on entry, for all browsers) and in
-// loader.js (for dynamic SPA page loads, part of our core bundle).
-store.subscribe(({isSignedIn}) => {
-  // nb. Analytics requires dimension values to be strings.
-  ga('set', dimensions.SIGNED_IN, isSignedIn ? '1' : '0');
-});
+async function initAnalytics() {
+  // If prerendering then only init once the page is activated
+  await whenPageActivated;
+
+  setConfig();
+
+  addClickEventListener();
+  addPageShowEventListener();
+
+  onCLS(sendToGoogleAnalytics);
+  onFCP(sendToGoogleAnalytics);
+  onFID(sendToGoogleAnalytics);
+  onINP(sendToGoogleAnalytics);
+  onLCP(sendToGoogleAnalytics);
+  onTTFB(sendToGoogleAnalytics);
 
-getCLS(sendToGoogleAnalytics);
-getFID(sendToGoogleAnalytics);
-getLCP(sendToGoogleAnalytics);
+  logPrerenders();
+
+  markAnalyticsInitialized();
+}
+
+// Some pages on web.dev include the full site JS but don't load
+// the gtag.js library. We can't initialize analytics in those cases.
+if (window.gtag) {
+  initAnalytics();
+}
diff --git a/src/lib/app.js b/src/lib/app.js
index 7dee21ebfdb..326bc91c1a5 100644
--- a/src/lib/app.js
+++ b/src/lib/app.js
@@ -1,119 +1,33 @@
 /**
- * @fileoverview Site entrypoint. This runs only in supported browsers and is
- * dynamically inserted by "bootstrap.js" if the user's browser is supported.
+ * @fileoverview Site entrypoint.
  *
- * This is web.dev's core JS bundle; it includes unistore, routing, Service
- * Worker initialization, component loading for routes, et al.
+ * This is web.dev's core JS bundle; it includes unistore, and some basic
+ * sw cleanup code.
  */
 
-/* global WebComponents */
-import './webcomponents-config'; // must go before -loader below
-import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
-import './analytics'; // side effects
-import {swapContent, getPartial} from './loader';
-import * as router from './utils/router';
-import {checkUserPreferredLanguage} from './actions';
 import {store} from './store';
-import {localStorage} from './utils/storage';
+import {loadAnalyticsScript} from './actions';
 import removeServiceWorkers from './utils/sw-remove';
 
-WebComponents.waitFor(async () => {
-  // TODO(samthor): This isn't quite the right class name because not all Web Components are ready
-  // at this point due to code-splitting.
-  document.body.classList.remove('unresolved');
-
-  // Run as long-lived router w/ history & "<a>" bindings
-  // Also immediately calls `swapContent()` handler for current location,
-  // loading its required JS entrypoint
-  router.listen(swapContent);
-
-  // If the site becomes online again, and the special offline page was shown,
-  // then trigger a reload
-  window.addEventListener('online', () => {
-    const {isOffline} = store.getState();
-    if (isOffline) {
-      router.reload();
-    }
+// This hides a legacy browser warning that can appear on the /measure page
+// See .unsupported-notice in _page-header.scss
+document.body.classList.remove('unresolved');
+
+// Although discouraged (especially for longer videos), some video clips may have
+// autoplay enabled. Disable it when prefers-reduced-motion is set, and ensure
+// controls are enabled.
+if (matchMedia('(prefers-reduced-motion)').matches) {
+  document.querySelectorAll('video[autoplay]').forEach((b) => {
+    b.removeAttribute('autoplay');
+    b.setAttribute('controls', '');
   });
-});
-
-// Read preferred language from the url, a cookie or browser settings.
-checkUserPreferredLanguage();
-
-// Configures global page state (loading, signed in).
-function onGlobalStateChanged({isSignedIn, isPageLoading}) {
-  document.body.classList.toggle('lh-signedin', isSignedIn);
-
-  const progress = document.querySelector('.w-loading-progress');
-  progress.hidden = !isPageLoading;
+}
 
-  const main = document.querySelector('main');
-  if (isPageLoading) {
-    main.setAttribute('aria-busy', 'true');
-  } else {
-    main.removeAttribute('aria-busy');
-  }
-  // Cache whether the user was signed in, to help prevent FOUC in future and
-  // for Analytics, as this can be read synchronosly and Firebase's auth takes
-  // ~ms to arrive.
-  localStorage['webdev_isSignedIn'] = isSignedIn ? 'probably' : '';
+function onGlobalStateChanged({cookiePreference}) {
+  window.dataLayer.push({cookiePreference: cookiePreference});
 }
+loadAnalyticsScript();
 store.subscribe(onGlobalStateChanged);
 onGlobalStateChanged(store.getState());
 
-// Ensure/update the Service Worker, or remove it if unsupported (this should
-// never happen here unless the valid domains change, but left in for safety).
-if (serviceWorkerIsSupported(window.location.hostname)) {
-  ensureServiceWorker();
-} else {
-  removeServiceWorkers();
-}
-
-function serviceWorkerIsSupported(hostname) {
-  // Allow local/prod as well as .netlify staging deploy target.
-  const allowedHostnames = [
-    'web.dev',
-    'web-dev-staging.appspot.com',
-    'localhost',
-  ];
-  return (
-    'serviceWorker' in navigator &&
-    (allowedHostnames.includes(hostname) || hostname.endsWith('.netlify.com'))
-  );
-}
-
-function ensureServiceWorker() {
-  const ensurePartialCache = (isFirstInstall = false) => {
-    const {pathname} = window.location;
-    if (isFirstInstall) {
-      // We don't fetch the partial for the initial, real, HTML fetch from out HTTP server. This
-      // ensures that if the user goes offline and reloads for some reason, the page still loads.
-      getPartial(pathname);
-    }
-    if (pathname !== '/') {
-      // Aggressively refetch the landing page every time the site is loaded.
-      // TODO(samthor): Check Workbox's cache time and fetch if needed. Additionally, cache a
-      // number of recent articles.
-      getPartial('/');
-    }
-  };
-
-  const isFirstInstall = !navigator.serviceWorker.controller;
-  if (isFirstInstall) {
-    // Watch for the brand new Service Worker to be activated. We claim this foreground page
-    // inside the Service Worker, so this event will fire when it is activated.
-    navigator.serviceWorker.addEventListener('controllerchange', () => {
-      ensurePartialCache(true);
-    });
-  } else {
-    // This isn't the first install, but ensure some partials are up-to-date.
-    ensurePartialCache();
-
-    // We claim active clients if the Service Worker's architecture rev changes. We can't
-    // reliably force a reload via the Client interface as it's unsupported in Safari.
-    navigator.serviceWorker.addEventListener('controllerchange', () => {
-      window.location.reload();
-    });
-  }
-  navigator.serviceWorker.register('/sw.js');
-}
+removeServiceWorkers();
diff --git a/src/lib/bootstrap.js b/src/lib/bootstrap.js
deleted file mode 100644
index 20c39f1f868..00000000000
--- a/src/lib/bootstrap.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @fileoverview Bootstrap code run by all browsers inside `script defer`.
- *
- * Used to trigger basic Analytics, including with our known previous signed-in
- * state that was cached in `localStorage`.
- *
- *   * This file is built with Rollup, but separately to our core bundle: don't
- *     import any core site code as it'll be duplicated.
- *
- *   * It's run in all browsers as a regular script (not "module"), and this
- *     includes all ancient browsers, e.g., IE11 or older.
- *
- *   * It runs _before_ our core bundle (for supported browsers), as it inserts
- *     the "entrypoint" script tag as part of its work.
- */
-
-import {dimensions, id, version} from 'webdev_analytics';
-import entrypoint from 'webdev_entrypoint';
-import {localStorage} from './utils/storage';
-import removeServiceWorkers from './utils/sw-remove';
-
-window.ga =
-  window.ga ||
-  function () {
-    (ga.q = ga.q || []).push(arguments);
-  };
-ga.l = +new Date();
-ga('create', id);
-ga('set', 'transport', 'beacon');
-ga('set', 'page', window.location.pathname);
-// nb. Analytics requires dimension values to be strings.
-ga('set', dimensions.SIGNED_IN, localStorage['webdev_isSignedIn'] ? '1' : '0');
-ga('set', dimensions.TRACKING_VERSION, version.toString());
-ga('send', 'pageview');
-
-// In future, we can feature-detect other things here and prevent loading core
-// site code. This includes Shadow DOM.
-const browserSupport = 'noModule' in HTMLScriptElement.prototype;
-if (browserSupport) {
-  const s = document.createElement('script');
-  s.type = 'module';
-  s.src = '/' + entrypoint;
-  document.head.append(s);
-} else {
-  // If we've transitioned into becoming an unsupported browser, then any
-  // previous Service Worker won't be updated. Aggressively remove on load.
-  removeServiceWorkers();
-}
diff --git a/src/lib/components/Assessment/_styles.scss b/src/lib/components/Assessment/_styles.scss
deleted file mode 100644
index ceb5fb13257..00000000000
--- a/src/lib/components/Assessment/_styles.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/tools/breakpoints';
-
-.web-assessment__launcher {
-  display: flex;
-  flex-direction: column;
-  margin: 3em 0;
-}
-
-// Allows buttons to resize with root font-size, maximizing space for questions
-.web-assessment__button {
-  height: 3rem;
-}
-
-web-assessment {
-  display: none;
-  flex-direction: column;
-
-  &[animatable] {
-    animation: .25s ease reverse modal-slideup;
-  }
-
-  &[animatable][open] {
-    animation: .25s ease modal-slideup;
-  }
-
-  // Prevent FOUC by hiding children until after firstUpdated().
-  // This isn't ":not(:defined)" because firstUpdated occurs after a frame.
-  &.unresolved * {
-    display: none !important;
-  }
-
-  @include bp(sm) {
-    display: flex;
-    margin: 5em 0 !important; // Override .w-callout
-    padding: 0 !important; // Override .w-callout
-  }
-}
-
-@keyframes modal-slideup {
-  0% {
-    transform: translateY(40%);
-    opacity: 0;
-  }
-
-  100% {
-    transform: none;
-    opacity: 1;
-  }
-}
-
-// Overrides .w-button--primary so button matches self-assessment color
-// (All states needed because they're specified for .w-button--primary.)
-.web-assessment__open,
-.web-assessment__open:hover,
-.web-assessment__open:active,
-.web-assessment__open:focus {
-  background: $SELF_ASSESSMENT_PRIMARY_COLOR;
-}
-
-.web-assessment__close {
-  position: absolute;
-  right: .5rem;
-  top: .75rem;
-}
-
-.web-assessment__lockup {
-  color: $SELF_ASSESSMENT_PRIMARY_COLOR;
-}
-
-.web-assessment__lockup::before {
-  content: 'school';
-}
-
-.web-assessment--singleton .web-assessment__header {
-  border-bottom: 1px solid $BORDER_COLOR;
-}
-
-.web-assessment__content {
-  display: flex;
-  flex: 1;
-}
-
-web-assessment[open],
-web-assessment[animatable] {
-  background: $WHITE;
-  bottom: 0;
-  display: flex;
-  left: 0;
-  margin: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 250; // Between Header and SideNav
-
-  .web-assessment__header {
-    padding: 1.5rem 3.5rem 1rem 1.5rem;
-  }
-
-  // Adjust visisbility of set leader when in modal view on mobile.
-  .web-assessment__set-leader {
-    display: none;
-  }
-}
-
-@include bp(sm) {
-  .web-assessment__launcher {
-    display: none;
-  }
-
-  .web-assessment__close {
-    display: none;
-  }
-
-  .web-assessment__header {
-    padding: 1.5rem 1.5rem 1rem;
-  }
-}
diff --git a/src/lib/components/Assessment/index.js b/src/lib/components/Assessment/index.js
index a97b76b8e95..a756f5b34d9 100644
--- a/src/lib/components/Assessment/index.js
+++ b/src/lib/components/Assessment/index.js
@@ -14,20 +14,22 @@
  * limitations under the License.
  */
 
-import {html} from 'lit-element';
-import {render} from 'lit-html';
+import {html} from 'lit';
 import {BaseModalElement} from '../BaseModalElement';
-import './_styles.scss';
 
 /**
  * Element that renders a self-assessment callout.
  * @extends {BaseModalElement}
  * @final
  */
-class Assessment extends BaseModalElement {
+export class Assessment extends BaseModalElement {
   static get properties() {
     return {
       modal: {attribute: 'aria-modal', reflect: true},
+      open: {type: Boolean, reflect: true},
+      animatable: {type: Boolean, reflect: true},
+      overflow: {type: Boolean, reflect: true},
+      parentModal: {type: String, reflect: true, attribute: 'parent-modal'},
     };
   }
 
@@ -60,20 +62,9 @@ class Assessment extends BaseModalElement {
     }
 
     return html`
-      <div class="w-callout__header web-assessment__header">
-        <h2 class="w-callout__lockup web-assessment__lockup">
-          Check your understanding
-        </h2>
+      <div class="web-assessment__header flow flow-space-size-0">
+        <h2 class="web-assessment__lockup">Check your understanding</h2>
         ${this.setLeader}
-        <button
-          @click="${this.onCloseClick}"
-          class="w-button--icon w-button--round web-assessment__close"
-          data-icon="close"
-        >
-          <span role="tooltip" class="w-tooltip">
-            Close
-          </span>
-        </button>
       </div>
       ${this.prerenderedChildren}
     `;
@@ -86,7 +77,7 @@ class Assessment extends BaseModalElement {
     // (display: none used to remove it from the tab order when closed on mobile.)
     this.inert = false;
     // Render the launcher that appears in closed state on mobile.
-    this.renderLauncher();
+    // this.renderLauncher();
     // Listen to reset requests from child question components.
     this.addEventListener('request-assessment-reset', this.reset);
 
@@ -122,34 +113,6 @@ class Assessment extends BaseModalElement {
     this.breakpoint_.removeListener(this.onAssessmentResize);
   }
 
-  renderLauncher() {
-    const launcher = document.createElement('div');
-    const contentTemplate = (setLeader) => html`
-      <div class="w-callout__header web-assessment__header">
-        <h2 class="w-callout__lockup web-assessment__lockup">
-          Check your understanding
-        </h2>
-        <div class="w-callout__blurb web-assessment__set-leader">
-          ${setLeader}
-        </div>
-      </div>
-      <button
-        @click="${this.onOpenClick}"
-        class="w-button w-button--primary web-assessment__button web-assessment__open"
-      >
-        Open quiz
-      </button>
-    `;
-    // lit-element prevents children from being duplicated,
-    // so grab setLeader text content.
-    const text = this.setLeader[0] ? this.setLeader[0].textContent : '';
-    const content = contentTemplate(text);
-
-    render(content, launcher);
-    launcher.className = 'web-assessment__launcher';
-    this.before(launcher);
-  }
-
   onOpenClick() {
     this.open = true;
   }
@@ -202,6 +165,7 @@ class Assessment extends BaseModalElement {
   }
 
   onAssessmentAnimationEnd() {
+    /** @type import('../Tabs').Tabs */
     const tabs = this.querySelector('web-tabs');
 
     if (!tabs) {
@@ -227,7 +191,9 @@ class Assessment extends BaseModalElement {
 
   // Reset assessment to initial state.
   reset() {
+    /** @type import('../Tabs').Tabs */
     const tabs = this.querySelector('web-tabs');
+    /** @type NodeListOf<import('../AssessmentQuestion').AssessmentQuestion> */
     const questions = this.querySelectorAll('web-question');
 
     for (const question of questions) {
diff --git a/src/lib/components/AssessmentQuestion/_styles.scss b/src/lib/components/AssessmentQuestion/_styles.scss
deleted file mode 100644
index b1518579c4b..00000000000
--- a/src/lib/components/AssessmentQuestion/_styles.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-web-question {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%; // Constrains child white-space:pre elements
-}
-
-.web-question__content {
-  display: block;
-  flex: 1 1 0;
-  height: 0; // Lets content match viewport height minus assessment header/footer
-  padding: 0 1.5rem 1.5rem;
-  overflow-y: auto;
-
-  @include bp(sm) {
-    flex: 1 1 auto;
-    height: 25rem; // Default height; can be overridden by content author
-  }
-}
-
-.web-question__footer {
-  border-top: 1px solid $BORDER_COLOR;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: .625rem;
-
-  @include bp(sm) {
-    padding: 1rem;
-  }
-}
-
-.web-question__cta {
-  overflow: visible;
-}
-
-$SUCCCESS_FLAG_SIZE: 24px;
-
-.web-question__cta::before {
-  @include font-material-icon();
-  align-items: center;
-  background: $SUCCESS_COLOR;
-  border-radius: $GLOBAL_ROUNDED;
-  color: $WHITE;
-  content: 'check';
-  display: flex;
-  font-size: $SUCCCESS_FLAG_SIZE * .75;
-  height: $SUCCCESS_FLAG_SIZE;
-  justify-content: center;
-  left: calc(-#{$SUCCCESS_FLAG_SIZE} - .5rem);
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  top: calc(50% - #{$SUCCCESS_FLAG_SIZE / 2});
-  transform: scale(0);
-  transition:
-    opacity $TRANSITION_SPEED * 2 ease,
-    transform $TRANSITION_SPEED ease;
-  width: $SUCCCESS_FLAG_SIZE;
-}
-
-[state=completed] .web-question__cta::before {
-  opacity: 1;
-  transform: scale(1);
-}
diff --git a/src/lib/components/AssessmentQuestion/index.js b/src/lib/components/AssessmentQuestion/index.js
index 0a845648f07..9b5503947a9 100644
--- a/src/lib/components/AssessmentQuestion/index.js
+++ b/src/lib/components/AssessmentQuestion/index.js
@@ -1,6 +1,6 @@
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
-import './_styles.scss';
+import {logEvent} from '../../analytics';
 
 /**
  * Element that renders an assessment question shell.
@@ -8,7 +8,7 @@ import './_styles.scss';
  *
  * @extends {BaseElement}
  */
-class AssessmentQuestion extends BaseElement {
+export class AssessmentQuestion extends BaseElement {
   static get properties() {
     return {
       id: {type: String, reflect: true},
@@ -25,6 +25,7 @@ class AssessmentQuestion extends BaseElement {
 
     this.responseComponentUpdated = this.responseComponentUpdated.bind(this);
     this.reset = this.reset.bind(this);
+    this.height = null;
   }
 
   render() {
@@ -43,13 +44,14 @@ class AssessmentQuestion extends BaseElement {
       <div class="web-question__content" style="${heightStyle}">
         ${this.prerenderedChildren}
       </div>
-      <div class="web-question__footer">
-        <span></span>
+      <hr />
+      <div class="web-question__footer gap-top-size-1 ta-right">
         <button
           @click="${this.onSubmit}"
-          class="w-button w-button--primary web-assessment__button web-question__cta gc-analytics-event"
+          class="button web-assessment__button web-question__cta gc-analytics-event"
           data-category="Self-assessments"
           data-label="CTA, ${this.id}"
+          data-type="primary"
           ?disabled="${this.state === 'unanswered'}"
         >
           ${this.ctaLabel}
@@ -65,18 +67,20 @@ class AssessmentQuestion extends BaseElement {
 
     // Listen to contained option selections.
     this.addEventListener('question-option-select', (e) => {
-      const {detail: optionIndex, target} = e;
+      const ce = /** @type {!CustomEvent} */ (e);
+      const {detail: optionIndex, target} = ce;
 
       // This event comes from the final option that the user selects.
       // Find the index of the response that this input is contained within.
       // We could also use `target.closest("[data-role=response]")` to look _up_ from the option,
       // but we'd still need to find its index.
       let responseIndex = -1;
+      /** @type {(import('../ResponseMultipleChoice').ResponseMultipleChoice|import('../ResponseThinkAndCheck').ResponseThinkAndCheck)[]} */
       const responseComponents = Array.from(
         this.querySelectorAll('[data-role=response]'),
       );
       for (let i = 0; i < responseComponents.length; ++i) {
-        if (responseComponents[i].contains(target)) {
+        if (responseComponents[i].contains(/** @type {Element} */ (target))) {
           responseIndex = i;
           break;
         }
@@ -87,16 +91,16 @@ class AssessmentQuestion extends BaseElement {
 
       // Send an Analytics event manually. We don't want to pipe through the IDs all the way down
       // to each individual option.
-      ga('send', 'event', {
-        eventCategory: 'Self-assessments',
-        eventAction: 'click',
-        eventLabel: `${this.id}-response-${responseIndex}-option-${optionIndex}`,
+      logEvent('click', {
+        event_category: 'Self-assessments',
+        event_label: `${this.id}-response-${responseIndex}-option-${optionIndex}`,
       });
     });
   }
 
   // Update question state based on state of response components.
   responseComponentUpdated() {
+    /** @type {NodeListOf<(import('../ResponseMultipleChoice').ResponseMultipleChoice|import('../ResponseThinkAndCheck').ResponseThinkAndCheck)>} */
     const responseComponents = this.querySelectorAll('[data-role=response]');
     const stateArr = Array.from(responseComponents).map(({state}) => state);
 
@@ -121,7 +125,9 @@ class AssessmentQuestion extends BaseElement {
         this.state = 'unanswered';
         this.ctaLabel = 'Recheck';
 
+        /** @type import('../Tabs').Tabs */
         const tabs = this.closest('web-tabs');
+        /** @type import('../Assessment').Assessment */
         const assessment = this.closest('web-assessment');
         if (tabs) {
           // Focus currently active tab since submit button disables
@@ -143,6 +149,7 @@ class AssessmentQuestion extends BaseElement {
   }
 
   updateResponseComponents() {
+    /** @type {NodeListOf<(import('../ResponseMultipleChoice').ResponseMultipleChoice|import('../ResponseThinkAndCheck').ResponseThinkAndCheck)>} */
     const responseComponents = this.querySelectorAll('[data-role=response]');
 
     for (const responseComponent of responseComponents) {
@@ -176,6 +183,7 @@ class AssessmentQuestion extends BaseElement {
   // Helper function to allow other components to reset the question
   // to its unanswered state.
   reset() {
+    /** @type {NodeListOf<(import('../ResponseMultipleChoice').ResponseMultipleChoice|import('../ResponseThinkAndCheck').ResponseThinkAndCheck)>} */
     const responseComponents = this.querySelectorAll('[data-role=response]');
     const questionContent = this.querySelector('.web-question__content');
 
diff --git a/src/lib/components/AudioFab/index.js b/src/lib/components/AudioFab/index.js
new file mode 100644
index 00000000000..2a87cf1b495
--- /dev/null
+++ b/src/lib/components/AudioFab/index.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {BaseElement} from '../BaseElement';
+
+/**
+ * A FAB that observes a target using an IntersectionObserver and fades in
+ * when the target is offscreen.
+ * Since this is an audio FAB it also monitors the play/pause state of the
+ * target and animates a fake equalizer if the target is playing.
+ */
+export class AudioFab extends BaseElement {
+  static get properties() {
+    return {
+      playing: {type: Boolean, reflect: true},
+      showing: {type: Boolean, reflect: true},
+      target: {type: String},
+    };
+  }
+
+  constructor() {
+    super();
+    this._player = null;
+    this._observer = null;
+    this.target = null;
+    this.inert = true;
+
+    this.onToggle = this.onToggle.bind(this);
+    this.onScrollUp = this.onScrollUp.bind(this);
+    this.onIntersect = this.onIntersect.bind(this);
+  }
+
+  firstUpdated() {
+    this._player = document.getElementById(this.target);
+    if (!this._player) {
+      return;
+    }
+
+    this._player.addEventListener('play', this.onToggle);
+    this._player.addEventListener('pause', this.onToggle);
+
+    this.addEventListener('click', this.onScrollUp);
+
+    this._observer = new IntersectionObserver(this.onIntersect, {threshold: 1});
+    this._observer.observe(this._player);
+  }
+
+  onToggle() {
+    this.playing = !(/** @type {HTMLMediaElement} */ (this._player).paused);
+  }
+
+  onScrollUp() {
+    document.documentElement.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
+  onIntersect(entries) {
+    entries.forEach((entry) => {
+      this.showing = !entry.isIntersecting;
+      this.inert = !this.showing;
+    });
+  }
+}
+
+customElements.define('web-audio-fab', AudioFab);
diff --git a/src/lib/components/BaseElement/index.js b/src/lib/components/BaseElement/index.js
index e8c9cfe27d4..1fb07430bd2 100644
--- a/src/lib/components/BaseElement/index.js
+++ b/src/lib/components/BaseElement/index.js
@@ -1,14 +1,13 @@
-import {LitElement} from 'lit-element';
+import {LitElement} from 'lit';
 
 /* eslint-disable require-jsdoc */
 export class BaseElement extends LitElement {
-  constructor() {
-    super();
-  }
-
-  firstUpdated() {
+  /**
+   * @param {PropertyValues} changedProperties
+   */
+  firstUpdated(changedProperties) {
     this.classList.remove('unresolved');
-    super.firstUpdated();
+    super.firstUpdated(changedProperties);
   }
 
   createRenderRoot() {
diff --git a/src/lib/components/BaseModalElement/_styles.scss b/src/lib/components/BaseModalElement/_styles.scss
index a5de8122d32..eb56db10eb1 100644
--- a/src/lib/components/BaseModalElement/_styles.scss
+++ b/src/lib/components/BaseModalElement/_styles.scss
@@ -1,12 +1,6 @@
-@import '../../../styles/tools/mixins';
-
 $MODAL_CONTENT_PADDING: 1.5rem;
 $MODAL_ANIMATION_DURATION: 150ms;
 
-.web-modal__overflow-hidden {
-  overflow: hidden;
-}
-
 @keyframes fadein {
   0% {
     opacity: 0;
@@ -47,8 +41,8 @@ $MODAL_ANIMATION_DURATION: 150ms;
   z-index: 275; // Between SideNav and Header
 
   .web-modal__container {
-    background: $WHITE;
-    border-radius: $GLOBAL_RADIUS_MEDIUM;
+    background: get-color('shades-light-bright');
+    border-radius: 10px;
     box-shadow:
       0 11px 15px -7px rgba(0,0,0,.2),
       0 24px 38px 3px rgba(0,0,0,.14),
@@ -95,7 +89,7 @@ $MODAL_ANIMATION_DURATION: 150ms;
   }
 
   &[animatable] {
-    animation: $MODAL_ANIMATION_DURATION / 2 linear reverse fadein;
+    animation: $MODAL_ANIMATION_DURATION * 0.5 linear reverse fadein;
   }
 
   &[animatable][open] {
@@ -104,17 +98,17 @@ $MODAL_ANIMATION_DURATION: 150ms;
     .web-modal__container {
       animation:
         $MODAL_ANIMATION_DURATION cubic-bezier(0,0,.2,1) scaleup,
-        $MODAL_ANIMATION_DURATION / 2 linear fadein;
+        $MODAL_ANIMATION_DURATION * 0.5 linear fadein;
     }
   }
 
   &[overflow] {
     .web-modal__header {
-      border-color: $BORDER_COLOR;
+      border-color: get-color('shades-gray-glare');
     }
 
     .web-modal__footer {
-      border-color: $BORDER_COLOR;
+      border-color: get-color('shades-gray-glare');
     }
   }
 }
diff --git a/src/lib/components/BaseModalElement/index.js b/src/lib/components/BaseModalElement/index.js
index 33e6c81e349..5c9a79f7471 100644
--- a/src/lib/components/BaseModalElement/index.js
+++ b/src/lib/components/BaseModalElement/index.js
@@ -15,7 +15,6 @@
  */
 
 import {BaseElement} from '../BaseElement';
-import 'wicg-inert';
 import {checkOverflow} from '../../utils/check-overflow';
 import {openModal} from '../../actions';
 import {closeModal} from '../../actions';
@@ -33,7 +32,7 @@ export class BaseModalElement extends BaseElement {
       open: {type: Boolean, reflect: true},
       animatable: {type: Boolean, reflect: true},
       overflow: {type: Boolean, reflect: true},
-      parentModal: {attribute: 'parent-modal', reflect: true},
+      parentModal: {type: String, reflect: true, attribute: 'parent-modal'},
     };
   }
 
@@ -43,8 +42,10 @@ export class BaseModalElement extends BaseElement {
     this.open_ = false;
     this.animatable = false;
     this.overflow = false;
+    /** @type HTMLElement */
     this._triggerElement = null;
     this._parent = null;
+    this.parentModal = null;
 
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onResize = this.onResize.bind(this);
@@ -82,7 +83,7 @@ export class BaseModalElement extends BaseElement {
     this.open_ = val;
     if (this.open_) {
       // Must get trigger before manipulating the DOM.
-      this._triggerElement = document.activeElement;
+      this._triggerElement = /** @type HTMLElement */ (document.activeElement);
       // Add keyup event listener to this element rather than document
       // so a nested modal doesn't close its parent modal when the user presses Esc.
       this.addEventListener('keyup', this.onKeyUp);
diff --git a/src/lib/components/BaseResponseElement/_styles.scss b/src/lib/components/BaseResponseElement/_styles.scss
deleted file mode 100644
index fd0332ac159..00000000000
--- a/src/lib/components/BaseResponseElement/_styles.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/global';
-
-// -----------------------------------------------------------------------------
-// General option styling
-// -----------------------------------------------------------------------------
-
-// Style option when the question is complete
-// or the option has been submitted.
-[state=completed] [data-role=option],
-[data-role=option][data-submitted] {
-  background: $GREY_100;
-  border-radius: $GLOBAL_RADIUS;
-  cursor: initial;
-}
-
-// Style correct options that have been submitted.
-// This uses $SUCCESS_COLOR because it shows the correct answer and so
-// should be independent of the self-assessment color.
-[data-role=option][data-correct][data-submitted] {
-  background: rgba($SUCCESS_COLOR, .08);
-  box-shadow: inset 0 0 0 1px $SUCCESS_COLOR;
-}
-
-// -----------------------------------------------------------------------------
-// Correct/incorrect flags
-// -----------------------------------------------------------------------------
-
-.web-response__correctness-flag {
-  color: $GREY_700;
-  display: none;
-  padding: .1875rem 0 .5rem;
-}
-
-// Show the correctness indicator when the question is complete
-// or the option has been submitted.
-[state=completed] .web-response__correctness-flag,
-[data-role=option][data-submitted] .web-response__correctness-flag {
-  display: block;
-}
-
-// Change color of the correctness indicator
-// when an incorrect option has been submitted.
-[data-role=option][data-submitted] .web-response__correctness-flag {
-  color: $SELF_ASSESSMENT_INCORRECT_COLOR;
-}
-
-// Change color of the correctness indicator
-// when a correct option has been submitted.
-// This uses $SUCCESS_COLOR because it shows the correct answer and so
-// should be independent of the self-assessment color.
-[data-role=option][data-submitted][data-correct] .web-response__correctness-flag {
-  color: $SUCCESS_COLOR;
-}
-
-// -----------------------------------------------------------------------------
-// Option rationales
-// -----------------------------------------------------------------------------
-
-.web-response__option-rationale {
-  color: $GREY_700;
-  display: none;
-  font-size: .833em;
-  padding: .5rem 0 0;
-}
-
-// Show the option rationale when the question is complete
-// or the option has been submitted.
-[state=completed] .web-response__option-rationale,
-[data-submitted] .web-response__option-rationale {
-  display: block;
-}
-
-.web-response__option-rationale > *:first-child {
-  margin-top: 0;
-}
-
-.web-response__option-rationale > *:last-child {
-  margin-bottom: 0;
-}
-
-.web-response__option-rationale p {
-  font-size: 1em;
-  line-height: 1.5;
-}
-
-.web-response__option-rationale ol > li,
-.web-response__option-rationale ul > li {
-  font-size: 1em;
-}
-
-.web-response__option-rationale ol > li::before {
-  margin-top: .25em;
-}
diff --git a/src/lib/components/BaseResponseElement/index.js b/src/lib/components/BaseResponseElement/index.js
index b56fe69cff3..291e8a89799 100644
--- a/src/lib/components/BaseResponseElement/index.js
+++ b/src/lib/components/BaseResponseElement/index.js
@@ -15,7 +15,7 @@
  */
 
 import {BaseElement} from '../BaseElement';
-import './_styles.scss';
+import {debounce} from '../../utils/debounce';
 
 /**
  * Base element used by all self-assessment response components.
@@ -33,10 +33,15 @@ export class BaseResponseElement extends BaseElement {
   constructor() {
     super();
     this.state = 'unanswered';
+    this.correctAnswer = '';
+    this.maxSelections = null;
+    this.minSelections = null;
 
+    this.deselectOption = this.deselectOption.bind(this);
     this.enforceCardinality = this.enforceCardinality.bind(this);
     this.submitResponse = this.submitResponse.bind(this);
     this.reset = this.reset.bind(this);
+    this.scrollToOption = debounce(this.scrollToOption.bind(this), 100);
   }
 
   /**
@@ -59,8 +64,7 @@ export class BaseResponseElement extends BaseElement {
       min = parseInt(cardinality);
       max = 0;
     } else if (/^\d-\d+$/.test(cardinality)) {
-      [min, max] = cardinality.split('-');
-      [min, max] = [parseInt(min), parseInt(max)];
+      [min, max] = cardinality.split('-').map(parseInt);
     }
     // Input errors handled in src/site/_includes/components/Assessment.js
 
@@ -169,10 +173,26 @@ export class BaseResponseElement extends BaseElement {
     return correctAnswersArr.every((val) => selections.includes(val));
   }
 
+  /**
+   * @param {HTMLElement} option HTML ELement to scroll to.
+   */
+  scrollToOption(option) {
+    const paddingTop = parseFloat(
+      window.getComputedStyle(option, null).getPropertyValue('padding-top'),
+    );
+    this.parentElement.scrollTo({
+      // Deduct offset of parent from top from element's offset and add padding.
+      top: option.offsetTop - this.parentElement.offsetTop - paddingTop,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }
+
   // Updates option states when response component is submitted.
   // NOTE: Assumes client components have a deselectOption() method.
   // (Necessary because selection mechanisms will vary by response type.)
   submitResponse() {
+    /** @type {NodeListOf<HTMLElement>} */
     const options = this.querySelectorAll('[data-role=option]');
 
     for (const option of options) {
@@ -187,13 +207,16 @@ export class BaseResponseElement extends BaseElement {
         } else if (isSelected && !isCorrect) {
           option.setAttribute('data-submitted', '');
           this.disableOption(option);
-          this.deselectOption(option);
+          if (typeof this.deselectOption === 'function') {
+            this.deselectOption(option);
+          }
         } else if (!isSelected && !isSubmitted) {
           this.enableOption(option);
         }
       } else if (this.state === 'answeredCorrectly') {
         this.disableOption(option);
         if (isSelected) {
+          this.scrollToOption(option);
           option.setAttribute('data-submitted', '');
         }
       }
@@ -222,6 +245,10 @@ export class BaseResponseElement extends BaseElement {
     }
   }
 
+  // @ts-ignore-start
+  deselectOption(option) {} // eslint-disable-line no-unused-vars
+  // @ts-ignore-end
+
   disableOption(option) {
     const inputs = option.querySelectorAll('input, button');
 
diff --git a/src/lib/components/BaseStateElement/index.js b/src/lib/components/BaseStateElement/index.js
index 317cbf883f6..116913ba695 100644
--- a/src/lib/components/BaseStateElement/index.js
+++ b/src/lib/components/BaseStateElement/index.js
@@ -29,6 +29,8 @@ export class BaseStateElement extends BaseElement {
    *
    * @param {!Object<string, *>} state
    */
-  // eslint-disable-next-line
-  onStateChanged(state) {}
+
+  // @ts-ignore-start
+  onStateChanged(state) {} // eslint-disable-line no-unused-vars
+  // @ts-ignore-end
 }
diff --git a/src/lib/components/Carousel/index.js b/src/lib/components/Carousel/index.js
new file mode 100644
index 00000000000..7af9261ffcc
--- /dev/null
+++ b/src/lib/components/Carousel/index.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {BaseElement} from '../BaseElement';
+
+export class Carousel extends BaseElement {
+  constructor() {
+    super();
+
+    /** @type {HTMLElement} */
+    this._carouselTrack = undefined;
+    /** @type {number} */
+    this.index = 0;
+    /** @type {HTMLElement[]} */
+    this._items = [];
+    /** @type {HTMLButtonElement} */
+    this._nextButton = undefined;
+    /** @type {HTMLButtonElement} */
+    this._previousButton = undefined;
+
+    this._next = this._next.bind(this);
+    this._onClick = this._onClick.bind(this);
+    this._onKeyup = this._onKeyup.bind(this);
+    this._previous = this._previous.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._carouselTrack = this.querySelector('div.carousel__track');
+
+    if (!this._carouselTrack.firstElementChild) {
+      return;
+    }
+
+    this._items = /** @type {HTMLElement[]} */ ([
+      ...this._carouselTrack.children,
+    ]);
+
+    this._previousButton = this.querySelector('button[data-direction="prev"]');
+    this._previousButton.addEventListener('click', this._previous);
+
+    this._nextButton = this.querySelector('button[data-direction="next"]');
+    this._nextButton.addEventListener('click', this._next);
+
+    this._carouselTrack.addEventListener('click', this._onClick);
+    this._carouselTrack.addEventListener('keyup', this._onKeyup);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._previousButton?.removeEventListener('click', this._previous);
+    this._nextButton?.removeEventListener('click', this._next);
+    this._carouselTrack?.addEventListener('click', this._onClick);
+    this._carouselTrack?.removeEventListener('keyup', this._onKeyup);
+  }
+
+  /**
+   * Event listener function for next button.
+   */
+  _next() {
+    this._scroll(true);
+  }
+
+  /**
+   * Event listener function that listens for click to see if user is selecting element in carousel.
+   *
+   * @param {MouseEvent} e The click event.
+   */
+  _onClick(e) {
+    let target = /** @type {HTMLElement} */ (e.target);
+    let searchForElement = true;
+
+    do {
+      if (target.tagName === 'A') {
+        return;
+      }
+
+      searchForElement = !(target.parentElement === this._carouselTrack);
+      if (searchForElement) {
+        target = target.parentElement;
+      }
+    } while (searchForElement);
+
+    const index = this._items.findIndex((e) => e === target);
+    this._setIndex(index - this.index);
+  }
+
+  /**
+   * Event listener function that listens for key presses to see if user is switching elements.
+   *
+   * @param {KeyboardEvent} e The keyboard event.
+   */
+  _onKeyup(e) {
+    switch (e.key) {
+      case 'ArrowLeft':
+        return this._setIndex(-1);
+      case 'ArrowRight':
+        return this._setIndex(1);
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Event listener function for previous button.
+   */
+  _previous() {
+    this._scroll(false);
+  }
+
+  _scroll(forward = true) {
+    for (let i = 0; i < this._items.length; i++) {
+      const item = this._items[i];
+      const overflow =
+        this._carouselTrack.parentElement.clientWidth -
+        this._carouselTrack.clientWidth;
+      if (
+        this._carouselTrack.scrollLeft + overflow <=
+        item.offsetLeft + item.offsetWidth
+      ) {
+        let index = i + (forward ? 1 : -1);
+
+        if (index < 0) {
+          index = 0;
+        } else if (index >= this._items.length) {
+          index = this._items.length - 1;
+        }
+
+        const scrollTo = this._items[index];
+        return this._carouselTrack.scrollTo(scrollTo.offsetLeft, 0);
+      }
+    }
+  }
+
+  /**
+   * Sets the new current slide index and scrolls to it.
+   *
+   * @param {number} increment How many items to move by.
+   */
+  _setIndex(increment) {
+    this.index = this.index + increment;
+
+    if (this.index < 0) {
+      this.index = 0;
+    } else if (this.index >= this._items.length) {
+      this.index = this._items.length - 1;
+    }
+
+    const active = this._items[this.index];
+    active.focus({preventScroll: true});
+    this._carouselTrack.scrollTo(active.offsetLeft, 0);
+  }
+}
+
+customElements.define('web-carousel', Carousel);
diff --git a/src/lib/components/Codelab/_styles.scss b/src/lib/components/Codelab/_styles.scss
deleted file mode 100644
index 5eb479a5b22..00000000000
--- a/src/lib/components/Codelab/_styles.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/tools/breakpoints';
-
-web-codelab {
-  // This is `display: flex` inside styles/pages/_codelab.scss.
-
-  .w-sizer {
-    &.w-test {
-      @include bp(md) {
-        display: flex;
-        flex-flow: column;
-        justify-content: space-between;
-
-        &::after {
-          content: '';
-          background: $WARNING_COLOR;
-          height: 2px;
-        }
-      }
-    }
-
-    .w-aside {
-      margin: 16px;
-    }
-
-    @include bp(md) {
-      position: sticky;
-      top: $WEB_HEADER_HEIGHT + 16px;
-      height: calc(100vh - #{$WEB_HEADER_HEIGHT + 32px});
-    }
-  }
-
-  .web-codelab__headline {
-    padding-top: 0;
-  }
-
-  .web-codelab__glitch {
-    flex: 1;
-
-    // on small screens, we repurpose this element for the warning notice: put
-    // the notice at the top
-    order: -1;
-    @include bp(md) {
-      order: initial;
-    }
-  }
-}
-
diff --git a/src/lib/components/Codelab/index.js b/src/lib/components/Codelab/index.js
index 5dea2e53728..42a8259150a 100644
--- a/src/lib/components/Codelab/index.js
+++ b/src/lib/components/Codelab/index.js
@@ -3,10 +3,8 @@
  * instructions and an embedded Glitch iframe.
  */
 
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
-import {env} from 'webdev_config';
-import './_styles.scss';
 
 /**
  * Render codelab instructions and Glitch
@@ -20,6 +18,8 @@ class Codelab extends BaseElement {
       glitch: {type: String},
       // The file to show when the Glitch renders.
       path: {type: String},
+      // Wether to show iframe or not because of a snapshot test.
+      snapshot: {type: Boolean},
       // Whether we are a desktop-sized browser or not.
       _isDesktop: {type: Boolean},
     };
@@ -33,31 +33,36 @@ class Codelab extends BaseElement {
     // _isDesktop has no default value as it's only correctly set between connected/disconnected
     // callbacks via the MediaQueryList's listener.
 
-    this._mql = window.matchMedia('(min-width: 865px)');
+    this._mql = window.matchMedia('(min-width: 1000px)');
     this._toggleDesktop = () => (this._isDesktop = this._mql.matches);
+    this.snapshot = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this._mql.addListener(this._toggleDesktop);
+    this._mql.addEventListener('change', this._toggleDesktop);
     this._toggleDesktop();
   }
 
   disconnectedCallback() {
     super.connectedCallback();
-    this._mql.removeListener(this._toggleDesktop);
+    this._mql.removeEventListener('change', this._toggleDesktop);
   }
 
+  /**
+   * Normally LitElement will remove any light DOM children that are not
+   * slotted when we call render().
+   * Because we don't use slots, and we _do_ want to preserve this element's
+   * light DOM children (they hold the codelab instructions) we create a new
+   * renderRoot for LitElement.
+   * https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
+   * This will render the glitch element as a sibling to the existing light
+   * DOM children.
+   */
   createRenderRoot() {
-    // Normally LitElement will remove any light DOM children that are not
-    // slotted when we call render().
-    // Because we don't use slots, and we _do_ want to preserve this element's
-    // light DOM children (they hold the codelab instructions) we create a new
-    // renderRoot for LitElement.
-    // https://lit-element.polymer-project.org/guide/templates#renderroot
-    // This will render the glitch element as a sibling to the existing light
-    // DOM children.
-    const container = document.createElement('div');
+    const container = /** @type this */ (
+      /** @type Element */ (document.createElement('div'))
+    );
     container.className = 'web-codelab__glitch';
     this.appendChild(container);
     return container;
@@ -81,41 +86,53 @@ class Codelab extends BaseElement {
     if (!this.glitch) {
       return html``;
     }
-    const isTest = env === 'test';
-
-    // If this is a test, always show the warning. Percy snapshots our DOM at a
-    // low resolution before resizing it, so we can't rely on _isDesktop being
-    // different for smaller or larger tests. The `w-test` ensures we test the
-    // sticky behavior of this element.
-    if (!this._isDesktop || isTest) {
-      const message = isTest
-        ? `This Glitch isn't loaded in a test environment`
-        : `This Glitch isn't available on small screens`;
+
+    if (!this._isDesktop) {
       return html`
-        <div class="w-sizer ${isTest ? 'w-test' : ''}">
-          <div class="w-aside w-aside--warning">
-            <p>
-              <strong>Warning:</strong> ${message},
-              <a target="_blank" rel="noopener" href=${this.glitchSrc(false)}>
-                open it in a new tab.</a
+        <div class="aside flow bg-state-warn-bg color-core-text">
+          <p class="cluster">
+            <span class="aside__icon box-block color-state-warn-text"
+              ><svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                role="img"
+                aria-label="Warning sign"
+                xmlns="http://www.w3.org/2000/svg"
               >
-            </p>
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M23 21L12 2 1 21h22zm-12-3v-2h2v2h-2zm0-4h2v-4h-2v4z"
+                /></svg
+            ></span>
+            <strong>Warning</strong>
+          </p>
+          <div>
+            This Glitch isn't available on small screens,
+            <a target="_blank" rel="noopener" href=${this.glitchSrc(false)}>
+              open it in a new tab.</a
+            >
           </div>
         </div>
       `;
     }
 
-    return html`
-      <div class="w-sizer">
-        <iframe
+    const iframe = this.snapshot
+      ? html`<div
+          class="web-codelab__glitch-iframe web-codelab__glitch-snapshot"
+        ></div>`
+      : html`<iframe
           allow="geolocation; microphone; camera; midi; encrypted-media"
           alt="Embedded glitch ${this.glitch}"
+          class="web-codelab__glitch-iframe"
+          title="Embedded glitch ${this.glitch}"
           src="${this.glitchSrc(true)}"
-          style="height: 100%; width: 100%; border: 0;"
         >
-        </iframe>
-      </div>
-    `;
+        </iframe>`;
+
+    return html` <div class="web-codelab__glitch-container">${iframe}</div> `;
   }
 }
 
diff --git a/src/lib/components/CopyCode/_styles.scss b/src/lib/components/CopyCode/_styles.scss
deleted file mode 100644
index 7ce11420c8c..00000000000
--- a/src/lib/components/CopyCode/_styles.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-.web-copy-code__button {
-  color: $GREY_900;
-  height: 48px;
-  margin: 8px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  width: 48px;
-
-  &:focus,
-  &:hover {
-    background-color: rgba($WEB_SECONDARY_COLOR, 0.2);
-    opacity: 1;
-  }
-
-  &:active {
-    background-color: rgba($WEB_SECONDARY_COLOR, 0.4);
-    opacity: 1;
-  }
-}
-
-web-copy-code {
-  display: block;
-  position: relative;
-
-  &:active,
-  &:focus,
-  &:hover {
-    .web-copy-code__button {
-      opacity: 1;
-    }
-  }
-
-  pre {
-    min-height: 64px;
-  }
-}
diff --git a/src/lib/components/CopyCode/index.js b/src/lib/components/CopyCode/index.js
index 2d355eb3492..7af4ebecc25 100644
--- a/src/lib/components/CopyCode/index.js
+++ b/src/lib/components/CopyCode/index.js
@@ -3,7 +3,6 @@
  */
 
 import {BaseElement} from '../BaseElement';
-import './_styles.scss';
 
 /**
  * Renders code block that can easily be copied.
@@ -22,9 +21,8 @@ class CopyCode extends BaseElement {
 
     if (!this.copyButton) {
       this.copyButton = document.createElement('button');
-      this.copyButton.className =
-        'w-button--icon w-button--round web-copy-code__button';
-      this.copyButton.setAttribute('data-icon', 'file_copy');
+      this.copyButton.className = 'button button__round web-copy-code__button';
+
       // Set aria-label because title isn't accessible to sighted keyboard users
       // and the tooltip is only visible on focus,
       // which means it isn't read reliably by screen readers.
@@ -32,9 +30,15 @@ class CopyCode extends BaseElement {
       this.copyButton.addEventListener('click', this.onCopy);
 
       this.tooltip = document.createElement('span');
-      this.tooltip.className = 'w-tooltip w-tooltip--right';
+      this.tooltip.className = 'tooltip';
       this.tooltip.setAttribute('role', 'tooltip');
-      this.tooltip.textContent = 'Copy code';
+      this.tooltip.setAttribute('data-alignment', 'left');
+
+      this.tooltipContent = document.createElement('span');
+      this.tooltipContent.className = 'tooltip__content';
+      this.tooltipContent.textContent = 'Copy code';
+
+      this.tooltip.append(this.tooltipContent);
       this.copyButton.append(this.tooltip);
 
       this.prepend(this.copyButton);
diff --git a/src/lib/components/CourseLinks/index.js b/src/lib/components/CourseLinks/index.js
new file mode 100644
index 00000000000..112b45718d0
--- /dev/null
+++ b/src/lib/components/CourseLinks/index.js
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A custom element to track the user's progress using
+ * localstorage, which is used to marks sections as ticked in the course
+ * table of contents.
+ *
+ * We inline this element into the head of the document to avoid FOUC because
+ * it needs to read from localstorage and then modify its children.
+ */
+
+/**
+ * @typedef {object} Course
+ * @property {string[]} pages
+ * @property {string} percent
+ */
+
+/** @type {Course} */
+const initialCourse = {pages: [], percent: '0'};
+
+class CourseLinks extends HTMLElement {
+  constructor() {
+    super();
+
+    // Add a slot that is basically a cheap MutationObserver
+    // We use this to listen for when children are added or removed.
+    this.attachShadow({mode: 'open'});
+    const slot = document.createElement('slot');
+    this.shadowRoot.appendChild(slot);
+    slot.addEventListener('slotchange', this.onSlotChange);
+  }
+
+  /**
+   * Get the user's overall course progress from localstorage.
+   * This returns an object where each string key represents a different course.
+   * Example: {css: {pages: ['intro', ...], percent: 10}, pwa: {...}}
+   * @returns {{[courseName: string]: Course}}
+   */
+  getProgress = () => {
+    let progress;
+    try {
+      progress = JSON.parse(localStorage['webdev_course_progress']);
+    } catch (e) {
+      progress = {};
+    }
+    return progress;
+  };
+
+  /**
+   * Called when the element's children are first parsed.
+   * This will set attributes on the children so they render correctly.
+   */
+  onSlotChange = () => {
+    const children = Array.from(this.querySelectorAll('a'));
+    const currentUrl = this.getAttribute('data-current');
+    const courseKey = this.getAttribute('data-course-key');
+
+    // Get the user's progress from localstorage and update it.
+    const progress = this.getProgress();
+    const course = progress[courseKey] || {...initialCourse};
+    // Find every anchor that the user has already visited and set an attribute
+    // on it so it renders a checkmark.
+    children.forEach((child) => {
+      if (course.pages && course.pages.includes(child.getAttribute('href'))) {
+        child.setAttribute('data-complete', 'true');
+      }
+      return child;
+    });
+
+    this.trackProgress(children, currentUrl, course, courseKey);
+  };
+
+  /**
+   * Update the user's progress in localstorage.
+   * @param {Element[]} children
+   * @param {string} currentUrl
+   * @param {Course} course
+   * @param {string} courseKey
+   */
+  trackProgress = (children, currentUrl, course, courseKey) => {
+    // Add the user's current page to the set of pages already visited.
+    // We use a Set here to avoid duplicate pages.
+    // We'll compare newPages to oldPages to figure out how far they
+    // have progressed.
+    const oldPages = new Set(course.pages);
+    oldPages.add(currentUrl);
+    const newPages = Array.from(oldPages);
+
+    // Bucket the user's progress into increments of 10.
+    // Currently not used, but used to be used for analytics tracking
+    // and may be useful in future so keeping for now.
+    const newPercent =
+      Math.floor((newPages.length / children.length) * 10) * 10;
+
+    // Write everything back to localstorage using the data-course-key
+    // to identify which course it came from.
+    //
+    // If a user has visited multiple courses, then we need to preserve
+    // their progress, so we merge the new progress with their saved state.
+    let updatedProgress = this.getProgress();
+    updatedProgress = Object.assign({}, updatedProgress, {
+      [courseKey]: {
+        pages: newPages,
+        percent: newPercent,
+      },
+    });
+
+    try {
+      localStorage['webdev_course_progress'] = JSON.stringify(updatedProgress);
+    } catch (e) {
+      // Fail gracefully with a console log.
+      // We don't want to cause a runtime error here and possibly disrupt
+      // the rest of the JS on the page since tracking progress isn't a
+      // critical feature.
+      console.warn(`Failed to write course status to localstorage.`);
+    }
+  };
+}
+
+customElements.define('course-links', CourseLinks);
diff --git a/src/lib/components/CourseSearchResults/index.js b/src/lib/components/CourseSearchResults/index.js
new file mode 100644
index 00000000000..537c91a3255
--- /dev/null
+++ b/src/lib/components/CourseSearchResults/index.js
@@ -0,0 +1,94 @@
+/**
+ * @fileoverview An Algolia search box.
+ */
+
+import {html} from 'lit';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {SearchResults} from '../SearchResults';
+
+/**
+ * An Algolia search box for courses drawer.
+ * @extends {SearchResults}
+ * @final
+ */
+class CourseSearchResults extends SearchResults {
+  /* eslint-disable indent */
+  render() {
+    if (!this.showHits) {
+      return html`<div role="listbox" aria-hidden="true"></div>`;
+    }
+
+    if (!this.hits_.length) {
+      if (!this.query) {
+        return '';
+      }
+
+      // prettier-ignore
+      return html`
+        <div class="web-course-search web-course-search__no-results web-search-popout">
+          <svg width="200" height="200" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="100" cy="100" r="96" fill="#F8F9FA"/>
+            <path fill="#F1F3F4" stroke="#fff" d="M84.5 40.5h59v79h-59z"/>
+            <path fill="#F1F3F4" stroke="#fff" d="M52.5 72.5h59v79h-59z"/>
+            <path fill="#fff" stroke="#212121" d="M68.5 56.5h59v79h-59z"/>
+            <path stroke="#212121" d="M78 69.5h20M78 81.5h40M78 93.5h40M78 105.5h40M78 117.5h20M106 118l26 26"/>
+            <path d="M131.198 143.198a2.383 2.383 0 013.371 0l12.233 12.233a2.383 2.383 0 11-3.371 3.371l-12.233-12.233a2.383 2.383 0 010-3.371z" fill="#fff" stroke="#212121"/>
+            <circle cx="106" cy="118" r="32" fill="#fff"/>
+            <mask id="a" maskUnits="userSpaceOnUse" x="76" y="88" width="60" height="60">
+              <circle cx="106" cy="118" r="29.5" fill="#fff" stroke="#212121"/>
+            </mask>
+            <g mask="url(#a)" stroke="#212121" stroke-width="3">
+              <path d="M76 95.5h42M76 108.5h42M76 121.5h25"/>
+            </g>
+            <circle cx="106" cy="118" r="29.5" fill="#fff" fill-opacity=".88" stroke="#212121"/>
+            <path d="M96 116l-3 3-3 3m0-6l6 6M92 136s3.2-4 8-4 8 4 8 4M110 116l-3 3-3 3m0-6l6 6" stroke="#FF1776"/>
+          </svg>
+          <p>
+            No results
+          </p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="web-course-search web-search-popout">
+        <ul id="${this.id}-list" class="stack-nav" role="listbox">
+          ${this.itemsTemplate}
+        </ul>
+      </div>
+    `;
+  }
+
+  get itemsTemplate() {
+    // Note that our anchors have tabindex=-1 to prevent them from
+    // being focused.
+    // This is intentional because focus needs to stay in the input field.
+    // When the user is pressing arrow keys, we use a virtual cursor and
+    // aria-activedescendant to indicate the active anchor.
+    return this.hits_.map((hit, idx) => {
+      if (!hit._highlightResult.title || !hit._highlightResult.title.value) {
+        return html``;
+      }
+      const title = this.formatAlgoliaValue(hit._highlightResult.title.value);
+      const snippet = this.formatAlgoliaValue(hit._snippetResult.content.value);
+      return html`
+        <li>
+          <a
+            id="${this.id}-link-${idx}"
+            aria-selected="${idx === this.cursor}"
+            tabindex="-1"
+            href="${hit.url}"
+          >
+            <div class="flow flow-space-size-0">
+              <h3 class="text-size-1">${unsafeHTML(title)}</h3>
+              <p class="text-size-0 color-mid-text">${unsafeHTML(snippet)}</p>
+            </div>
+          </a>
+        </li>
+      `;
+    });
+  }
+  /* eslint-enable indent */
+}
+
+customElements.define('web-course-search-results', CourseSearchResults);
diff --git a/src/lib/components/DevRelRibbon/index.js b/src/lib/components/DevRelRibbon/index.js
new file mode 100644
index 00000000000..0a08866837c
--- /dev/null
+++ b/src/lib/components/DevRelRibbon/index.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A small flag on the bottom left or center right of
+ * the viewport, depending on screen size, messaging that this page
+ * is built by Chrome DevRel. Hides on scroll.
+ */
+
+import {BaseElement} from '../BaseElement';
+
+/**
+ * @extends {BaseElement}
+ * @final
+ */
+class DevRelRibbon extends BaseElement {
+  constructor() {
+    super();
+    this.onIntersection = this.onIntersection.bind(this);
+  }
+
+  onIntersection(entries) {
+    for (const entry of entries) {
+      this.ribbon.classList.toggle('--visible', entry.isIntersecting);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.ribbon = this.querySelector('.devrel-ribbon__ribbon');
+
+    this.observer = new IntersectionObserver(this.onIntersection);
+    this.observer.observe(this);
+  }
+
+  detachedCallback() {
+    this.observer.disconnect();
+    this.observer = null;
+  }
+}
+
+customElements.define('web-devrel-ribbon', DevRelRibbon);
diff --git a/src/lib/components/EventCarousel/index.js b/src/lib/components/EventCarousel/index.js
deleted file mode 100644
index b3d95e1c3d2..00000000000
--- a/src/lib/components/EventCarousel/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {BaseStateElement} from '../BaseStateElement';
-import {html} from 'lit-element';
-
-/**
- * @fileoverview A carousel manager which controls the video links for the top
- * carousel of the event page.
- *
- * Note that this element just uses global styles for the Live page.
- */
-
-class EventCarousel extends BaseStateElement {
-  static get properties() {
-    return {
-      eventDays: Object,
-    };
-  }
-
-  render() {
-    // Note that we use `isChatActive` to determine whether the current day
-    // shows as "Broadcasting". We backed ourselves into a corner with the
-    // `activeEventDay` property as it actually reflects the upcoming day, even
-    // hours before the event starts (which is useful for the YT _preview_).
-
-    const renderDay = (day) => {
-      const {isComplete, isChatActive, videoId, playlistId, title} = day;
-      const isClickable = Boolean(
-        // Allows to click if playlist is available, otherwise depends on event status.
-        (playlistId || isComplete || isChatActive) && (videoId || playlistId),
-      );
-
-      // The thumbnail is shown as long as we have a videoId, regardless of
-      // whether the day is complete or not.
-      // nb. We use "maxresdefault" as the other images have black bars as they
-      // try to fit 4:3 rendering.
-      const thumbnailPart = videoId
-        ? html`<div class="w-event-carousel__thumbnail">
-            <img
-              alt="${title}"
-              src="https://img.youtube.com/vi/${videoId}/maxresdefault.jpg"
-              width="178"
-              height="110"
-            />
-          </div>`
-        : '';
-
-      let message = 'Coming soon';
-      if (isChatActive) {
-        message = 'Broadcasting';
-      } else if (isClickable) {
-        message = 'All sessions';
-      }
-
-      const descriptionPart = html` <div class="w-event-carousel__description">
-        ${title} &mdash; ${message}
-      </div>`;
-
-      if (isClickable) {
-        // Prefer the playlistId over the videoId, if available.
-        const href =
-          !isChatActive && playlistId
-            ? `https://www.youtube.com/playlist?list=${playlistId}`
-            : `https://youtu.be/${videoId}`;
-        return html`
-          <a
-            class="w-event-carousel__day gc-analytics-event"
-            data-category="web.dev"
-            data-label="live, open ${title} on YouTube"
-            data-action="click"
-            href="${href}"
-            target="_blank"
-          >
-            ${thumbnailPart} ${descriptionPart}
-          </a>
-        `;
-      }
-      return html`
-        <div class="w-event-carousel__day w-event-carousel__pending">
-          ${thumbnailPart} ${descriptionPart}
-        </div>
-      `;
-    };
-
-    return html`${this.eventDays.map(renderDay)}`;
-  }
-
-  onStateChanged({eventDays}) {
-    this.eventDays = eventDays;
-  }
-}
-
-customElements.define('web-event-carousel', EventCarousel);
diff --git a/src/lib/components/EventMap/_styles.scss b/src/lib/components/EventMap/_styles.scss
deleted file mode 100644
index 1ab2c0fc78c..00000000000
--- a/src/lib/components/EventMap/_styles.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-
-web-event-map {
-  display: block;
-  text-align: left;
-  font-family: $HEADLINE_FONT;
-
-  code {
-    display: none;
-  }
-
-  ul {
-    margin-top: 24px;
-    list-style: none;
-    font: inherit;
-    white-space: nowrap;
-    line-height: 32px;
-
-
-    li > :first-child {
-      min-width: 180px;
-      display: inline-block;
-    }
-
-    li > :last-child {
-      font-size: 14px;
-      color: $GREY_700;
-    }
-  }
-
-  select {
-    color: $GREY_700;
-    font-size: 16px;
-    margin: -14px 0 16px;
-    width: initial;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/components/EventMap/index.js b/src/lib/components/EventMap/index.js
deleted file mode 100644
index 97ba23f9ace..00000000000
--- a/src/lib/components/EventMap/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @fileoverview Element that renders a map and a list of local events.
- */
-
-import {html} from 'lit-element';
-import {BaseStateElement} from '../BaseStateElement';
-import './_styles.scss';
-
-const encodeMarkers = function (markers) {
-  const color = 'red';
-  return markers
-    .map((marker) => {
-      return `markers=color:${color}%7Clabel:${marker.place[0]}%7C${marker.marker}`;
-    })
-    .join('&');
-};
-
-const formatDate = function (date) {
-  const options = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  };
-  return new Intl.DateTimeFormat('en-US', options).format(date);
-};
-
-/**
- * Renders a map and a list of local events. It takes input from a <code>
- * element embedded as a child of this element.
- *
- * @extends {BaseElement}
- * @final
- */
-class EventMap extends BaseStateElement {
-  static get properties() {
-    return {
-      title: {type: String},
-      center: {type: String},
-      zoom: {type: Number},
-      size: {type: String},
-      events: {type: String},
-      key: {type: String},
-      localEvents: {type: Object},
-    };
-  }
-
-  constructor() {
-    super();
-    this.title = '';
-    this.center = '';
-    this.size = '600x300';
-    this.events = null;
-  }
-
-  onStateChanged({communityEvents}) {
-    if (communityEvents && this.events !== communityEvents) {
-      this.events = communityEvents;
-      this.eventRegions = Object.keys(this.events);
-      this.localEvents = this.events[this.eventRegions[0]];
-    }
-  }
-
-  onChange(e) {
-    this.localEvents = this.events[e.target.value];
-  }
-
-  render() {
-    if (!this.events) {
-      return '';
-    }
-
-    // Set the minimal zoom to 4, if only 1 marker present.
-    const zoom = this.zoom || this.localEvents.length < 2 ? 4 : '';
-    const params = [
-      `center=${this.center}`,
-      `zoom=${zoom}`,
-      `size=${this.size}`,
-      `maptype=roadmap`,
-      encodeMarkers(this.localEvents),
-      `key=${this.key}`,
-    ].join('&');
-    const url = `https://maps.googleapis.com/maps/api/staticmap?${params}`;
-
-    // prettier-ignore
-    /* eslint-disable indent */
-    return html`
-      <select class="w-select--borderless" @change="${this.onChange}">
-        ${this.eventRegions.map((region) => {
-          return html`<option value=${region}>${region}</option>`;
-        })}
-      </select>
-      <img
-        width="600"
-        height="300"
-        src="${url}"
-        alt="${this.title}"
-      />
-      <ul class="w-event-list__community-events">
-        ${this.localEvents.map((entry) => {
-          const date = new Date(entry.date);
-          return html`
-            <li>
-              <a href="${entry.link}" target="_blank">${entry.place} (${entry.country})</a>
-              <time datetime=${date.toISOString()}>
-                ${formatDate(date)}
-              </time>
-            </li>
-          `;
-        })}
-      </ul>
-    `;
-  }
-}
-
-customElements.define('web-event-map', EventMap);
diff --git a/src/lib/components/EventQandA/_styles.scss b/src/lib/components/EventQandA/_styles.scss
deleted file mode 100644
index e701729c033..00000000000
--- a/src/lib/components/EventQandA/_styles.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-
-web-event-q-and-a {
-  display: block;
-
-  select {
-    color: $GREY_700;
-    font-family: $HEADLINE_FONT;
-    margin: -14px 0 16px;
-    width: auto;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/components/EventQandA/index.js b/src/lib/components/EventQandA/index.js
deleted file mode 100644
index f8645b237ed..00000000000
--- a/src/lib/components/EventQandA/index.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview Filters out Q&A's based on `data-category` property.
- */
-
-import {html} from 'lit-html';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-/**
- * @extends {BaseElement}
- * @final
- */
-class EventQAndA extends BaseElement {
-  static get properties() {
-    return {
-      selected: {type: String},
-    };
-  }
-
-  constructor() {
-    super();
-    this.closeDetail = this.closeDetail.bind(this);
-    this.selectCategory = this.selectCategory.bind(this);
-
-    this.childElements = [];
-    this.categories = [];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.childElements = Array.from(this.children);
-
-    const categories = new Set();
-    this.childElements.forEach((element) =>
-      categories.add(element.getAttribute('data-category')),
-    );
-    this.categories = Array.from(categories).map((c) => ({name: c, value: c}));
-    this.categories.push({name: 'All categories', value: null});
-
-    this.selected = this.categories[0].value;
-    this.addEventListener('click', this.closeDetail);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('click', this.closeDetail);
-  }
-
-  render() {
-    this.filterCategories();
-
-    return html`
-      <select
-        class="w-select--borderless w-mb--sm"
-        @change="${this.selectCategory}"
-      >
-        ${this.renderOptions()}
-      </select>
-      ${this.childElements}
-    `;
-  }
-
-  renderOptions() {
-    return this.categories.map((c) =>
-      c.value
-        ? html`<option value="${c.value}">${c.name}</option>`
-        : html`<option value>${c.name}</option>`,
-    );
-  }
-
-  closeDetail($event) {
-    const categoryElement = $event.target.closest('[data-category]');
-    if (!categoryElement) {
-      return;
-    }
-    this.childElements.forEach((element) => {
-      if (element !== categoryElement) {
-        element.open = false;
-      }
-    });
-  }
-
-  selectCategory($event) {
-    this.selected = $event.target.value;
-  }
-
-  filterCategories() {
-    this.childElements.forEach((element) => {
-      const show =
-        !this.selected ||
-        element.getAttribute('data-category') === this.selected;
-      element.classList.toggle('hidden', !show);
-    });
-  }
-}
-
-customElements.define('web-event-q-and-a', EventQAndA);
diff --git a/src/lib/components/EventSchedule/index.js b/src/lib/components/EventSchedule/index.js
deleted file mode 100644
index fd5cfdd5237..00000000000
--- a/src/lib/components/EventSchedule/index.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import '../EventScheduleModal';
-import '../Tabs';
-
-import {store} from '../../store';
-
-/**
- * @fileoverview A schedule manager which opens and closes modals based on
- * the current href. Looks in children for content.
- *
- * This does not inherit from BaseStateElement as it is not a LitElement.
- */
-
-class EventSchedule extends HTMLElement {
-  constructor() {
-    super();
-    this.onStateChanged = this.onStateChanged.bind(this);
-    this.onCloseModal = this.onCloseModal.bind(this);
-    this.onHashChange = this.onHashChange.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onModalAnimationEnd = this.onModalAnimationEnd.bind(this);
-
-    this._activeEventDay = null;
-    this._currentSession = null;
-    this._tabsElement = null;
-
-    // This just creates an element, we're not yet making it part of the DOM, so it's allowed here
-    // in the constructor.
-    this._modalElement = document.createElement('web-event-schedule-modal');
-    this._modalElement.className = 'web-modal';
-    this._modalElement.open = false;
-    this._modalElement.addEventListener('close-modal', this.onCloseModal);
-
-    this._modalElement.addEventListener(
-      'animationend',
-      this.onModalAnimationEnd,
-    );
-  }
-
-  onCloseModal() {
-    if (!window.location.hash.substr(1)) {
-      return; // we closed ourselves, so got an event that can be ignored
-    }
-    const url = window.location.pathname + window.location.search;
-    window.history.replaceState(null, null, url);
-    this.onHashChange();
-  }
-
-  _elementForHash(hash = window.location.hash) {
-    const id = hash.substr(1);
-    return (id && this.querySelector(`[data-session-id="${id}"]`)) || null;
-  }
-
-  /**
-   * Controls the open/close of session modals, by matching the page's hash to any contained
-   * elements with a matching `data-session-id` attribute.
-   *
-   * If no hash is set, or no element is found, hides any modal.
-   */
-  onHashChange() {
-    const session = this.isConnected ? this._elementForHash() : null;
-    if (session === this._currentSession) {
-      return;
-    }
-
-    this._currentSession = session;
-    if (!session) {
-      this._modalElement.open = false;
-      // Our animationend handler, added above, clears the modal after its remove animation.
-      return;
-    }
-
-    // Clone the session node and pass it to our session. This is kinda gross but basically we use
-    // it as the canonical source of truth for the modal. We also have to remove all tabindex
-    // attributes as they may have been added by the inert polyfill.
-    const clone = session.cloneNode(true);
-    clone.querySelectorAll('[tabindex]').forEach((el) => {
-      el.removeAttribute('tabindex');
-    });
-
-    // If the user opens this page from externally on a specific session, make sure we're showing
-    // the correct day of tab.
-    const index = this._tabsElement.indexOfTabByChild(session);
-    if (index !== -1) {
-      this._tabsElement.activeTab = index;
-    }
-
-    this._modalElement.sessionRow = clone;
-    this._modalElement.open = true;
-    document.body.append(this._modalElement);
-  }
-
-  onModalAnimationEnd() {
-    // Don't remove the modal if it's been made open again.
-    if (!this._modalElement.open) {
-      this._modalElement.remove();
-    }
-  }
-
-  /**
-   * Handles clicks within this schedule, searching for hashes which open a
-   * session.
-   *
-   * @param {!MouseEvent} ev
-   */
-  onClick(ev) {
-    if (!ev.target.href) {
-      return;
-    }
-
-    const check = new URL(ev.target.href);
-    const id = check.hash.substr(1);
-    check.hash = '';
-
-    const page = new URL(window.location);
-    page.hash = '';
-
-    if (!(page.toString() === check.toString() && id)) {
-      return;
-    }
-
-    // We clicked on a link that's on the same page but has a hash, so intercept
-    // it if handled. We need this as otherwise a history stack event occurs.
-
-    const session = this._elementForHash(ev.target.hash);
-    if (!session) {
-      return;
-    }
-
-    window.history.replaceState(null, null, ev.target.hash);
-    this.onHashChange();
-    ev.preventDefault();
-  }
-
-  connectedCallback() {
-    this._tabsElement = this.querySelector('web-tabs');
-    if (!this._tabsElement) {
-      throw new Error(`web-event-schedule expects web-tabs child element`);
-    }
-
-    window.addEventListener('hashchange', this.onHashChange);
-    this.addEventListener('click', this.onClick);
-
-    customElements.whenDefined('web-tabs').then(() => {
-      if (!this.isConnected) {
-        return; // disconnected while we waited for web-tabs
-      }
-
-      store.subscribe(this.onStateChanged);
-      this.onStateChanged(store.getState()); // subscribe doesn't trigger listener
-      this.onHashChange();
-    });
-  }
-
-  disconnectedCallback() {
-    store.unsubscribe(this.onStateChanged);
-
-    window.removeEventListener('hashchange', this.onHashChange);
-    this.removeEventListener('click', this.onClick);
-    this.onHashChange();
-
-    this._tabsElement = null;
-  }
-
-  onStateChanged({activeEventDay}) {
-    // Update the activeEventDay which in turn sets the current active tab.
-    // This happens initially when the component first boots and again if the
-    // user leaves the tab open and we transition to a new day.
-    // This does not attempt to set the tabsElement on every tick because we
-    // assume the user will be changing tabs on their own.
-    if (
-      activeEventDay &&
-      activeEventDay !== this._activeEventDay &&
-      !this._modalElement.open
-    ) {
-      this._tabsElement.activeTab = activeEventDay.index;
-      this._activeEventDay = activeEventDay;
-    }
-  }
-}
-
-customElements.define('web-event-schedule', EventSchedule);
diff --git a/src/lib/components/EventScheduleModal/_styles.scss b/src/lib/components/EventScheduleModal/_styles.scss
deleted file mode 100644
index 3fe3af275e3..00000000000
--- a/src/lib/components/EventScheduleModal/_styles.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/breakpoints';
-
-web-event-schedule-modal {
-  .modal {
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
-    padding: 16px 16px 8px;
-    background: white;
-    max-width: 100%; // modal puts us in 1em padding anyway
-    width: 512px;
-
-    @include bp(sm) {
-      padding: 16px 24px;
-    }
-  }
-
-  h2 {
-    margin: 0 0 12px;
-  }
-
-  .w-event-schedule-modal__about {
-    font-size: 14px;
-    color: $GREY_800;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    margin: 12px 0;
-  }
-
-  // Modify the default button to match the mocks.
-  button.w-button.close {
-    float: right;
-    letter-spacing: 0;
-    margin: auto -8px -8px auto;
-    text-transform: none;
-  }
-
-  p {
-    color: $GREY_700;
-    font: inherit;
-    font-size: 14px;
-    margin: 8px 0;
-
-    &:first-of-type {
-      margin-top: 16px;
-    }
-  }
-}
diff --git a/src/lib/components/EventScheduleModal/index.js b/src/lib/components/EventScheduleModal/index.js
deleted file mode 100644
index bb9768554e8..00000000000
--- a/src/lib/components/EventScheduleModal/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {BaseModalElement} from '../BaseModalElement';
-import {html} from 'lit-element';
-import './_styles.scss';
-import {generateIdSalt} from '../../utils/generate-salt';
-
-/**
- * @fileoverview Modal element for session information.
- */
-
-class EventScheduleModal extends BaseModalElement {
-  static get properties() {
-    return {
-      sessionRow: {type: Object},
-      _sessionName: {type: String},
-      _authorsPart: {type: Object},
-      _abstractPart: {type: Object},
-      _youtubeLinkPart: {type: Object},
-      _titleId: {type: String},
-    };
-  }
-
-  constructor() {
-    super();
-
-    this._titleId = generateIdSalt();
-  }
-
-  shouldUpdate(changedProperties) {
-    if (!changedProperties.has('sessionRow')) {
-      return super.shouldUpdate(changedProperties);
-    }
-
-    this._authorsPart = null;
-    this._abstractPart = null;
-    this._sessionName = '';
-
-    if (!this.sessionRow) {
-      return true;
-    }
-    const row = this.sessionRow;
-
-    // Extract the authors' collection and abstract.
-    this._authorsPart = row.querySelector('.w-event-schedule__speaker');
-    this._abstractPart = row.querySelector('.w-event-schedule__abstract');
-    if (this._abstractPart) {
-      this._abstractPart.removeAttribute('hidden');
-    }
-
-    // Extract the optional YouTube link.
-    this._youtubeLinkPart = row.querySelector('.w-event-schedule__video');
-
-    // Extract the title from the link that was used to open us.
-    const link = row.querySelector('.w-event-schedule__open');
-    if (link) {
-      this._sessionName = link.textContent;
-    }
-    return true;
-  }
-
-  render() {
-    return html`
-      <div class="modal" aria-modal="true" aria-labelledby="${this._titleId}">
-        <div class="w-event-schedule-modal__about">About this session</div>
-        <h2 id=${this._titleId}>${this._sessionName || '?'}</h2>
-        ${this._authorsPart || ''}
-        ${this._youtubeLinkPart || ''}
-        ${this._abstractPart || ''}
-        <button
-          class="w-button close gc-analytics-event"
-          data-category="web.dev"
-          data-label="live, close session modal"
-          data-action="click"
-          @click=${() => (this.open = false)}
-        >
-          Close
-        </button>
-      </main>
-    `;
-  }
-}
-
-customElements.define('web-event-schedule-modal', EventScheduleModal);
diff --git a/src/lib/components/EventStore/index.js b/src/lib/components/EventStore/index.js
deleted file mode 100644
index 9ac32b24864..00000000000
--- a/src/lib/components/EventStore/index.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import '../EventScheduleModal';
-
-import {store} from '../../store';
-
-// Pretend the date is active within this buffer. This is useful so we can
-// reveal the player for a bit more time.
-const bufferMinutes = 60;
-const bufferChatMinutes = 10;
-
-// Run the timer every minute.
-const timerEveryMillisecond = 60 * 1000;
-
-/**
- * @fileoverview Provides an element which publishes event data to Unistore, as well as finding
- * the most relevant day to show information for (the active day).
- *
- * Notably:
- *   - From one hour after the current day, you'll see that day
- *   - If you refresh the page one hour after that day, you'll see the next day
- */
-
-class EventStore extends HTMLElement {
-  constructor() {
-    super();
-    this.onStateChanged = this.onStateChanged.bind(this);
-    this._update = this._update.bind(this);
-
-    this._timer = 0;
-    this._timeOffset = 0;
-    this._days = [];
-  }
-
-  /**
-   * Interval function to determine which day is currently active and whether
-   * or not chat should be enabled.
-   */
-  _update() {
-    const now = +new Date() + this._timeOffset;
-
-    let daysPropertiesChange = false;
-    let activeDay = null;
-
-    // If there was a previously active day (because the user has their tab open for a long time),
-    // then prefer it over showing the upcoming day (we store that in nextPendingDay).
-    let nextPendingDay = null;
-
-    for (const day of this._days || []) {
-      const timeOffsetBy = (minutes) => {
-        const d = new Date(day.when);
-        d.setMinutes(d.getMinutes() + minutes);
-        return +d;
-      };
-
-      const activeStart = timeOffsetBy(-bufferMinutes);
-      const activeEnd = timeOffsetBy(day.duration + bufferMinutes);
-      const chatStart = timeOffsetBy(-bufferChatMinutes);
-      const chatEnd = timeOffsetBy(day.duration + bufferChatMinutes);
-
-      // DEBUG
-      // Suggest leaving this checked-in because it's very useful for debugging.
-      // console.log(
-      //   'day.when',
-      //   `${new Date(day.when)}\n`,
-      //   'activeStart:',
-      //   `${new Date(activeStart)}\n`,
-      //   'chatStart:',
-      //   `${new Date(chatStart)}\n`,
-      //   'activeEnd:',
-      //   `${new Date(activeEnd)}\n`,
-      //   'chatEnd:',
-      //   `${new Date(chatEnd)}\n`,
-      // );
-
-      // Are we past the completion of this day? This allows the YT link to show up.
-      const isComplete = now >= activeEnd;
-      if (day.isComplete !== isComplete) {
-        day.isComplete = isComplete;
-        daysPropertiesChange = true;
-      }
-      if (!isComplete && nextPendingDay === null) {
-        // The first time we find an incomplete day (e.g., tomorrow's event day), mark it as the
-        // next pending day we use as the active fallback.
-        nextPendingDay = day;
-      }
-
-      // Is this day active (within the buffer time range)?
-      const isActive = now >= activeStart && now < activeEnd;
-      if (isActive) {
-        activeDay = day;
-      }
-
-      // Is this the active day for chat (within the actual time range)?
-      const isChatActive = now >= chatStart && now < chatEnd;
-      if (day.isChatActive !== isChatActive) {
-        day.isChatActive = isChatActive;
-        daysPropertiesChange = true;
-      }
-    }
-
-    // If there was no previously active day, then choose the upcoming day.
-    // If we've reached the end of the event then revert to the first day.
-    if (activeDay === null) {
-      activeDay = nextPendingDay ? nextPendingDay : this._days[0];
-    }
-
-    // If there was a property change on any particular day, change the Array
-    // reference so listeners can use simple comparisons to force a refresh.
-    if (daysPropertiesChange) {
-      this._days = this._days.slice();
-    }
-
-    store.setState({
-      eventDays: this._days,
-      activeEventDay: activeDay,
-    });
-  }
-
-  connectedCallback() {
-    const raw = JSON.parse(this.textContent.trim());
-
-    for (let i = 0; i < raw.days.length; ++i) {
-      const day = raw.days[i];
-      day.index = i;
-      day.isComplete = false;
-      day.isChatActive = false;
-    }
-
-    this._days = raw.days || [];
-    store.setState({communityEvents: raw.communityEvents});
-
-    this._update();
-    this._timer = window.setInterval(this._update, timerEveryMillisecond);
-
-    store.subscribe(this.onStateChanged);
-    this.onStateChanged(store.getState());
-  }
-
-  disconnectedCallback() {
-    store.unsubscribe(this.onStateChanged);
-
-    this._days = [];
-    this._update();
-
-    window.clearInterval(this._timer);
-  }
-
-  onStateChanged({timeOffset}) {
-    if (this._timeOffset !== timeOffset) {
-      this._timeOffset = timeOffset;
-      this._update();
-    }
-  }
-}
-
-customElements.define('web-event-store', EventStore);
diff --git a/src/lib/components/EventTime/_styles.scss b/src/lib/components/EventTime/_styles.scss
deleted file mode 100644
index 91085020f4d..00000000000
--- a/src/lib/components/EventTime/_styles.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-
-web-event-time {
-  time {
-    align-items: center;
-    display: flex;
-    min-height: 120px;
-  }
-
-  .date {
-    align-items: center;
-    display: flex;
-    flex-flow: column;
-    font-family: $HEADLINE_FONT;
-    margin-right: 32px;
-    text-align: left;
-    width: 80px;
-  }
-
-  .date__month {
-    text-transform: uppercase;
-  }
-
-  .date__day {
-    font-size: 44px;
-    line-height: 1;
-    text-transform: uppercase;
-  }
-
-  .time {
-    text-align: left;
-  }
-
-  .time__timezone {
-    color: $GREY_700;
-  }
-}
diff --git a/src/lib/components/EventTime/index.js b/src/lib/components/EventTime/index.js
deleted file mode 100644
index a19a3b8fa48..00000000000
--- a/src/lib/components/EventTime/index.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * @fileoverview Element that renders a time in local timezone.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-const months = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec',
-];
-
-const connected = new Set();
-let timezoneCheckInterval = 0;
-let previous = 0;
-
-/**
- * This runs every ten minutes while any `web-event-time` element exists on the page. It checks for
- * the rare but frustrating case where a user's timezone changes while the page is open.
- */
-function checkTimezone() {
-  const now = new Date().getTimezoneOffset();
-  if (now !== previous) {
-    previous = now;
-    connected.forEach((node) => node.requestUpdate());
-  }
-}
-
-/**
- * Renders an event's time in the user's local timezone, including optional duration.
- *
- * @extends {BaseElement}
- * @final
- */
-class EventTime extends BaseElement {
-  static get properties() {
-    return {
-      datetime: {type: String},
-      duration: {type: Number},
-    };
-  }
-
-  constructor() {
-    super();
-    this._date = null;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (connected.size === 0) {
-      // Every 10 minutes, check if we're in the same timezone.
-      timezoneCheckInterval = window.setInterval(checkTimezone, 10 * 60 * 1000);
-    }
-    connected.add(this);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    connected.delete(this);
-    if (connected.size === 0) {
-      window.clearInterval(timezoneCheckInterval);
-    }
-  }
-
-  shouldUpdate(changedProperties) {
-    if (changedProperties.has('datetime')) {
-      this._date = null;
-
-      if (this.datetime) {
-        const d = new Date(Date.parse(this.datetime));
-        if (+d) {
-          // +d checks the validity of the parsed date (0 if invalid).
-          this._date = d;
-        }
-      }
-    }
-
-    return super.shouldUpdate(changedProperties);
-  }
-
-  render() {
-    if (!this._date) {
-      return html`<!-- Invalid time "${this.datetime || ''}" -->`;
-    }
-
-    const format = (d, options) => {
-      return new Intl.DateTimeFormat('default', options).format(d);
-    };
-    const options = new Intl.DateTimeFormat().resolvedOptions();
-
-    let durationPart = '';
-    if (this.duration > 0) {
-      const end = new Date(this._date);
-      end.setMinutes(end.getMinutes() + this.duration);
-      durationPart = html`
-        &mdash; ${format(end, {hour: 'numeric', minute: '2-digit'})}
-      `;
-    }
-
-    return html`
-      <time datetime=${this._date.toISOString()}>
-        <div class="date">
-          <div class="date__month">
-            ${months[this._date.getMonth()]}
-          </div>
-          <div class="date__day">
-            ${this._date.getDate()}
-          </div>
-        </div>
-        <div class="time">
-          <div class="time__value">
-            ${format(this._date, {hour: 'numeric', minute: '2-digit'})}
-            ${durationPart}
-          </div>
-          <div class="time__timezone">
-            ${options.timeZoneName || options.timeZone || 'Local Time'}
-          </div>
-        </div>
-      </time>
-    `;
-  }
-}
-
-customElements.define('web-event-time', EventTime);
diff --git a/src/lib/components/Feedback/_styles.scss b/src/lib/components/Feedback/_styles.scss
deleted file mode 100644
index 76267742576..00000000000
--- a/src/lib/components/Feedback/_styles.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-
-web-feedback {
-  display: block;
-
-  .web-feedback__row {
-    align-items: center;
-    border-bottom: 1px solid $GREY_300;
-    display: grid;
-    font-family: "Google Sans", sans-serif;
-    font-size: .875em;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    grid-template-columns: 2fr 1fr 1fr;
-    line-height: 1.5;
-
-    &:first-of-type,
-    &:last-of-type {
-      border-bottom: 0;
-    }
-
-    /* Center the contents of the 2nd and 3rd columns. */
-    > *:not(:first-child) {
-      justify-self: center;
-    }
-
-    > label {
-      padding: 1rem;
-    }
-  }
-}
diff --git a/src/lib/components/Feedback/index.js b/src/lib/components/Feedback/index.js
deleted file mode 100644
index bd09ebe5088..00000000000
--- a/src/lib/components/Feedback/index.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * @fileoverview Element that handles feedback on posts.
- */
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {trackEvent} from '../../analytics';
-import './_styles.scss';
-
-/**
- * Element that handles feedback on posts to submit to Analytics.
- *
- * @extends {BaseElement}
- * @final
- */
-class Feedback extends BaseElement {
-  constructor() {
-    super();
-    this.submitted = false;
-    this.submit = this.submit.bind(this);
-  }
-
-  submit(event) {
-    event.preventDefault();
-    const form = new FormData(event.target);
-    const formIterable = Array.from(form.entries());
-    if (!formIterable.length || this.submitted) {
-      return;
-    }
-
-    this.submitted = true;
-    this.requestUpdate();
-
-    formIterable.forEach((entry) => {
-      trackEvent({
-        category: 'Feedback',
-        action: 'submit',
-        label: entry[0],
-        value: Number(entry[1]),
-      });
-    });
-  }
-
-  updated() {
-    const confirmationElement = this.querySelector('.w-feedback__confirmation');
-    if (this.submitted && confirmationElement) {
-      confirmationElement.focus();
-    }
-  }
-
-  render() {
-    // Because we share CSS with the `app.css` we want this to be in the light DOM
-    return html`
-      <details class="w-details" open>
-        <summary class="w-details__summary">
-          <h2 class="w-details__header">Give feedback</h2>
-        </summary>
-        <div
-          class="w-display--flex w-justify-content--center ${!this.submitted &&
-          'hidden'}"
-        >
-          <p
-            class="w-feedback__confirmation w-text--center w-force-focus"
-            tabindex="-1"
-          >
-            Thank you for the feedback!
-          </p>
-        </div>
-        <form
-          class="w-feedback__form ${this.submitted && 'hidden'}"
-          @submit=${this.submit}
-        >
-          <small>All fields optional</small>
-          <div class="web-feedback__rows">
-            <div class="web-feedback__row">
-              <div></div>
-              <div id="yes-label">Yes</div>
-              <div id="no-label">No</div>
-            </div>
-
-            <div class="web-feedback__row">
-              <div id="helpful-label">Was this page helpful?</div>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="helpful-label yes-label"
-                  name="Helpfulness"
-                  value="1"
-                />
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="helpful-label no-label"
-                  name="Helpfulness"
-                  value="0"
-                />
-              </label>
-            </div>
-
-            <div class="web-feedback__row">
-              <div id="effective-label">
-                Did this page help you complete your goal(s)?
-              </div>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="effective-label yes-label"
-                  name="Effectiveness"
-                  value="1"
-                />
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="effective-label no-label"
-                  name="Effectiveness"
-                  value="0"
-                />
-              </label>
-            </div>
-
-            <div class="web-feedback__row">
-              <div id="complete-label">
-                Did this page have the information you needed?
-              </div>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="complete-label yes-label"
-                  name="Completeness"
-                  value="1"
-                />
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="complete-label no-label"
-                  name="Completeness"
-                  value="0"
-                />
-              </label>
-            </div>
-
-            <div class="web-feedback__row">
-              <div id="accuracy-label">
-                Was this page's information accurate?
-              </div>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="accuracy-label yes-label"
-                  name="Accuracy"
-                  value="1"
-                />
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="accuracy-label no-label"
-                  name="Accuracy"
-                  value="0"
-                />
-              </label>
-            </div>
-
-            <div class="web-feedback__row">
-              <div id="readable-label">Was this page easy to read?</div>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="readable-label yes-label"
-                  name="Readability"
-                  value="1"
-                />
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  aria-labelledby="readable-label no-label"
-                  name="Readability"
-                  value="0"
-                />
-              </label>
-            </div>
-          </div>
-
-          <div class="w-text--center w-mt--sm">
-            <button class="w-button w-button--primary" type="submit">
-              Submit
-            </button>
-          </div>
-        </form>
-      </details>
-    `;
-  }
-}
-
-customElements.define('web-feedback', Feedback);
diff --git a/src/lib/components/Header/index.js b/src/lib/components/Header/index.js
index eae5935aded..29b5216348f 100644
--- a/src/lib/components/Header/index.js
+++ b/src/lib/components/Header/index.js
@@ -15,31 +15,33 @@
  */
 
 /**
- * @fileoverview A responsive header that can trigger a side-nav.
+ * @fileoverview A responsive header that can trigger a navigation drawer.
  *
  * This does not inherit from BaseStateElement as it is not a LitElement.
  */
 
 import {store} from '../../store';
-import {expandSideNav} from '../../actions';
+import {openNavigationDrawer} from '../../actions';
+import {BaseStateElement} from '../BaseStateElement';
 
-class Header extends HTMLElement {
+export class Header extends BaseStateElement {
   constructor() {
     super();
-
-    this.onStateChanged = this.onStateChanged.bind(this);
   }
 
   connectedCallback() {
-    this.hamburgerBtn = this.querySelector('.web-header__hamburger-btn');
-    this.hamburgerBtn.classList.remove('unresolved');
-    this.hamburgerBtn.addEventListener('click', expandSideNav);
-
-    store.subscribe(this.onStateChanged);
+    super.connectedCallback();
+    /** @type HTMLButtonElement */
+    this.openDrawerBtn = this.querySelector('[data-open-drawer-button]');
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.addEventListener('click', openNavigationDrawer);
+    }
   }
 
   disconnectedCallback() {
-    this.hamburgerBtn.removeEventListener('click', expandSideNav);
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.removeEventListener('click', openNavigationDrawer);
+    }
 
     store.unsubscribe(this.onStateChanged);
   }
@@ -71,12 +73,14 @@ class Header extends HTMLElement {
   }
 
   /**
-   * This is called by the SideNav to return focus to this control when the
-   * user closes the SideNav.
+   * This is called by the NavigationDrawer to return focus to this control when
+   * the user closes the NavigationDrawer.
    * This is important for accessibility.
    */
   manageFocus() {
-    this.hamburgerBtn.focus();
+    if (this.openDrawerBtn) {
+      this.openDrawerBtn.focus();
+    }
   }
 }
 
diff --git a/src/lib/components/LanguageSelect/index.js b/src/lib/components/LanguageSelect/index.js
index f3d44246b92..0ecfb757c23 100644
--- a/src/lib/components/LanguageSelect/index.js
+++ b/src/lib/components/LanguageSelect/index.js
@@ -18,7 +18,7 @@
  * @fileoverview A select for choosing language option.
  */
 
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseStateElement} from '../BaseStateElement';
 import {setLanguage} from '../../actions';
 import lang from '../../utils/language';
@@ -26,12 +26,12 @@ import lang from '../../utils/language';
 class LanguageSelect extends BaseStateElement {
   static get properties() {
     return {
-      currentLanguage: {type: String},
+      current: {type: String},
     };
   }
 
   onStateChanged({currentLanguage}) {
-    this.currentLanguage = currentLanguage;
+    this.current = currentLanguage;
   }
 
   onChange(e) {
@@ -44,27 +44,34 @@ class LanguageSelect extends BaseStateElement {
       return '';
     }
     languageName = languageName.toUpperCase();
-    return this.currentLanguage === language
+    return this.current === language
       ? html`
           <option value="${language}" selected>
             ${languageName} (${language})
           </option>
         `
       : html`
-          <option value="${language}">
-            ${languageName} (${language})
-          </option>
+          <option value="${language}">${languageName} (${language})</option>
         `;
   }
 
   render() {
-    const langList = lang.supportedLanguages;
+    const languageVersions = Array.from(
+      document.querySelectorAll('link[rel="alternate"]'),
+    )
+      .filter((link) => link['hreflang'])
+      .map((link) => link['hreflang']);
+    const currentLang = document.documentElement.lang;
+    const langList = lang.supportedLanguages.filter(
+      (language) =>
+        languageVersions.includes(language) || language === currentLang,
+    );
     return html`
       <div class="w-display-flex">
-        <label class="w-visually-hidden" for="preferred-language">
+        <label class="visually-hidden" for="preferred-language">
           Choose language
         </label>
-        <select id="preferred-language" @change=${this.onChange}>
+        <select id="preferred-language" @change="${this.onChange}">
           ${langList.map((language) => this.renderOption(language))}
         </select>
       </div>
diff --git a/src/lib/components/LearnFilter/index.js b/src/lib/components/LearnFilter/index.js
new file mode 100644
index 00000000000..32efd30e77f
--- /dev/null
+++ b/src/lib/components/LearnFilter/index.js
@@ -0,0 +1,64 @@
+import {html} from 'lit';
+import {BaseElement} from '../BaseElement';
+
+/**
+ * @extends {BaseElement}
+ * @final
+ */
+class LearnFilter extends BaseElement {
+  static get properties() {
+    return {
+      active: {type: String},
+      all: {type: String},
+      filters: {type: Array},
+    };
+  }
+
+  constructor() {
+    super();
+    /** @type {string|undefined} */
+    this.active = undefined;
+    /** @type {string} */
+    this.all = 'All';
+    /** @type {{id: string, title: string}[]} */
+    this.filters = [];
+  }
+
+  /**
+   * @param {string|undefined} id
+   */
+  setActive(id) {
+    this.active = id;
+
+    const learnCollectionsElement =
+      document.getElementById('learn__collections') ||
+      document.getElementById('learning-paths');
+    if (!learnCollectionsElement) {
+      return;
+    }
+
+    for (const child of learnCollectionsElement.children) {
+      child.classList.toggle('hidden', !!id && id !== child.id);
+      child.classList.toggle('hidden-yes', !!id && id !== child.id);
+    }
+  }
+
+  render() {
+    const filters = [{title: this.all}, ...this.filters];
+
+    /** @type {(filter: {id?: string, title: string}) => any} */
+    const filtersMap = (filter) =>
+      html`<button
+        class="pill chip${this.active === filter.id ? ' chip__active' : ''}"
+        data-state="${this.active === filter.id ? 'active' : 'inactive'}"
+        type="button"
+        @click="${() => this.setActive(filter.id)}"
+      >
+        ${filter.title}
+      </button>`;
+
+    return html`<div class="chips cluster">${filters.map(filtersMap)}</div>`;
+  }
+}
+
+customElements.define('web-learn-filter', LearnFilter);
diff --git a/src/lib/components/LighthouseGauge/_styles.scss b/src/lib/components/LighthouseGauge/_styles.scss
deleted file mode 100644
index e49170b8170..00000000000
--- a/src/lib/components/LighthouseGauge/_styles.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import '../../../styles/settings/colors';
-
-web-lighthouse-gauge {
-  color: $GREY_400;
-  display: block;
-  position: relative;
-
-  .gauge__pass {
-    color: $PASS_COLOR;
-  }
-
-  .gauge__average {
-    color: $AVERAGE_COLOR;
-  }
-
-  .gauge__fail {
-    color: $FAIL_COLOR;
-  }
-
-  .gauge {
-    stroke-linecap: round;
-  }
-
-  .gauge-base {
-    stroke: $GREY_200;
-    stroke-width: 9;
-  }
-
-  .gauge__pass .gauge-base {
-    stroke: $PASS_COLOR_LIGHT;
-  }
-
-  .gauge__average .gauge-base {
-    stroke: $AVERAGE_COLOR_LIGHT;
-  }
-
-  .gauge__fail .gauge-base {
-    stroke: $FAIL_COLOR_LIGHT;
-  }
-
-  .gauge-arc {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 9;
-    transition: stroke-dasharray 1.2s;
-  }
-
-  .bootstrap {
-    // held for first rAF so this animates in
-    stroke-dasharray: 0 359 !important;
-  }
-
-  .gauge-percent {
-    align-items: center;
-    bottom: 0;
-    color: currentColor;
-    display: flex;
-    font: inherit;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
diff --git a/src/lib/components/LighthouseGauge/index.js b/src/lib/components/LighthouseGauge/index.js
deleted file mode 100644
index e9cc6b39700..00000000000
--- a/src/lib/components/LighthouseGauge/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * @fileoverview Element that shows a score in a gauge.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-/**
- * @extends {BaseElement}
- * @final
- */
-class LighthouseGauge extends BaseElement {
-  static get properties() {
-    return {
-      score: {type: Number},
-      _bootstrap: {type: Boolean}, // holds arc value at zero for hydration
-    };
-  }
-
-  constructor() {
-    super();
-    this.score = 0;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this._bootstrap = true;
-    window.requestAnimationFrame(() => {
-      this._bootstrap = false;
-    });
-  }
-
-  render() {
-    const clamped = Math.max(0, Math.min(1, this.score));
-    const round = Math.round(clamped * 100);
-
-    // nb. Pulled directly from report/html/renderer/util.js in Lighthouse.
-    let label = 'fail';
-    if (clamped >= 0.9) {
-      label = 'pass';
-    } else if (clamped >= 0.5) {
-      label = 'average';
-    }
-    const className = `gauge__${label}`;
-
-    return html`
-      <div class=${className}>
-        <svg viewBox="0 0 120 120" class="gauge" fill="none" stroke-width="2">
-          <circle class="gauge-base" r="53" cx="60" cy="60"></circle>
-          <circle
-            class="gauge-arc ${this._bootstrap ? 'bootstrap' : ''}"
-            transform="rotate(-90 60 60)"
-            stroke-dasharray="${clamped * 329} 329"
-            stroke-dashoffset="0"
-            r="53"
-            cx="60"
-            cy="60"
-          ></circle>
-        </svg>
-        <div class="gauge-percent">${round}</div>
-      </div>
-    `;
-  }
-
-  firstUpdated() {
-    this.setAttribute('role', 'progressbar');
-    this.setAttribute('aria-valuemin', 0);
-    this.setAttribute('aria-valuemax', 100);
-  }
-
-  updated() {
-    this.setAttribute('aria-valuenow', this.score * 100);
-  }
-}
-
-customElements.define('web-lighthouse-gauge', LighthouseGauge);
diff --git a/src/lib/components/LighthouseScoresAudits/_styles.scss b/src/lib/components/LighthouseScoresAudits/_styles.scss
deleted file mode 100644
index fd4bee82783..00000000000
--- a/src/lib/components/LighthouseScoresAudits/_styles.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/mixins';
-
-// =============================================================================
-// LIGHTHOUSE SCORES OVERVIEW
-//
-// Shows a list of audits and what guides you could follow to fix them.
-//
-// =============================================================================
-
-web-lighthouse-scores-audits {
-  display: block;
-  min-height: 400px; // Give layout before CE upgrade.
-  margin-top: 40px;
-
-  $IMPACT_CHIP_WIDTH: 75px;
-  $ROW_PADDING: 16px;
-
-  // TODO(robdodson): Move this to `settings/_type.scss`.
-  $FILTERFONT: (
-    FONT_WEIGHT: 500,
-    FONT_SIZE:   14,
-    LINE_HEIGHT: 16,
-    FONT_FAMILY: $PRIMARY_FONT,
-  );
-
-  .lh-audit-list-headers {
-    @include font($FILTERFONT);
-    color: $GREY_700;
-    text-transform: uppercase;
-    display: flex;
-    padding: $ROW_PADDING / 2 $ROW_PADDING;
-
-    .lh-audit-list-row__item {
-      // Enforce vertical alignment w/o flex.
-      line-height: 60px;
-    }
-  }
-
-  .lh-audit-list-rows {
-    .lh-audit-list-row {
-      background-color: $WHITE;
-      margin: 8px 0;
-      padding: $ROW_PADDING;
-      border-radius: 2px;
-      @include elevation(1);
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .lh-audit-list-row__impact {
-      display: inline-flex;
-      background-color: transparentize($WEB_EXTENDED_TERTIARY_COLOR, .8);
-      color: $WEB_EXTENDED_TERTIARY_COLOR;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      border-radius: $GLOBAL_RADIUS_LARGE;
-      height: 32px;
-      flex-grow: 0;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .lh-audit-list-row__impact--high {
-      background-color: $HIGH_IMPACT_BACKGROUND_COLOR;
-      color: $HIGH_IMPACT_COLOR;
-    }
-
-    .lh-audit-list-row__impact--medium {
-      background-color: $MEDIUM_IMPACT_BACKGROUND_COLOR;
-      color: $MEDIUM_IMPACT_COLOR;
-    }
-
-    .lh-audit-list-row__impact--low {
-      background-color: $LOW_IMPACT_BACKGROUND_COLOR;
-      color: $LOW_IMPACT_COLOR;
-    }
-  }
-
-  .lh-audit-list-row__item {
-    margin-right: 16px;
-  }
-
-  .lh-audit-list-row__link {
-    text-decoration: underline;
-  }
-
-  .lh-audit-list-row__item:last-of-type {
-    margin-right: 0;
-  }
-
-  // Sizes of each "column".
-  .lh-audit-list-row__impact {
-    min-width: $IMPACT_CHIP_WIDTH;
-    display: flex;
-    align-items: center;
-  }
-
-  // Button to flip the ordering of failing audits.
-  .lh-audit-list-row__impact-arrow {
-    display: flex;
-    align-items: center;
-    background: none;
-    border: 0;
-    padding-left: 0;
-    border-bottom: 1px solid transparent;
-    color: inherit;
-    text-transform: uppercase;
-    outline: none;
-    box-shadow: none;
-    @include font($FILTERFONT);
-
-    &:focus-within {
-      border-bottom: 1px solid $GREY_700;
-      margin-bottom: 0;
-    }
-
-    &::after {
-      @include font-material-icon();
-      content: 'arrow_drop_down';
-    }
-
-    &[data-inverted]::after {
-      content: 'arrow_drop_up';
-    }
-  }
-
-  .lh-audit-list-row__category {
-    min-width: 150px;
-  }
-
-  .lh-audit-list-row__recommendation,
-  .lh-audit-list-row__guide {
-    width: 50%;
-    overflow: hidden;
-  }
-
-  .lh-audit-list-row__guide {
-    // Prevent focus ring from being clipped
-    padding: 0 4px;
-  }
-
-  .lh-audit-list-see-more__container {
-    display: flex;
-    margin-top: 32px;
-    flex-direction: column;
-  }
-
-  .lh-audit-list-see-more__button {
-    align-self: center;
-
-    &:disabled {
-      display: none;
-    }
-  }
-
-  /// @deprecated
-  // TODO(robdodson): This should be replaced with the @media rules from breakpoints.scss, but the
-  // Measure page is special and currently does not have a matching value.
-  @media screen and (max-width: $BREAKPOINT_VALUE_TABLET) {
-    .lh-audit-list-headers  .lh-audit-list-row__category,
-    .lh-audit-list-row__category {
-      display: none;
-    }
-  }
-}
diff --git a/src/lib/components/LighthouseScoresAudits/index.js b/src/lib/components/LighthouseScoresAudits/index.js
deleted file mode 100644
index 20cc30f04e6..00000000000
--- a/src/lib/components/LighthouseScoresAudits/index.js
+++ /dev/null
@@ -1,253 +0,0 @@
-/**
- * @fileoverview An element which shows a friendly list of failing audits and related guides.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {getAuditGuideMapping} from '../../lighthouse/mapping';
-import {
-  computeWeightForAuditResult,
-  filterAuditResult,
-  sortOnWeights,
-  getAuditReferenceDocLink,
-} from '../../lighthouse';
-import './_styles.scss';
-
-const NUM_AUDITS_TO_SHOW = 10;
-
-/**
- * Renders a table for the passed Lighthouse report.
- *
- * @param {!LighthouseLastRunDetail} lhr The lighthouse report to render a table for.
- * @param {!CombinedAuditAndAuditRef} category
- * @return {!TemplateResult}
- */
-function createRowForAuditCategory(lhr, category) {
-  let relevantGuides = ['Guide coming soon'];
-  const audit = lhr.audits[category.ref.id];
-
-  const auditGuideMapping = getAuditGuideMapping();
-  if (auditGuideMapping) {
-    const guidesForAudit = auditGuideMapping[category.ref.id];
-    if (guidesForAudit) {
-      relevantGuides = guidesForAudit.map((guide) => {
-        return html`
-          <a
-            href="${guide.url}"
-            class="lh-audit-list-row__link internal gc-analytics-event"
-            data-category="web.dev"
-            data-label="audit todos, internal link"
-            data-action="click"
-            >${guide.title}</a
-          >
-        `;
-      });
-    } else {
-      const docLink = getAuditReferenceDocLink(audit.description);
-      if (docLink) {
-        relevantGuides = html`
-          <a
-            href="${docLink}"
-            class="lh-audit-list-row__link external gc-analytics-event"
-            target="_blank"
-            data-category="web.dev"
-            data-label="audit todos, external link"
-            data-action="click"
-            >${audit.title}</a
-          >
-        `;
-      }
-    }
-  }
-
-  return html`
-    <div class="lh-audit-list-row" role="row">
-      <span
-        class="lh-audit-list-row__impact lh-audit-list-row__item
-                lh-audit-list-row__impact--${category.impact.toLowerCase()}"
-        role="cell"
-        >${category.impact}</span
-      >
-      <span
-        class="lh-audit-list-row__item lh-audit-list-row__category"
-        role="cell"
-        >${category.ref.cat}</span
-      >
-      <span
-        class="lh-audit-list-row__item lh-audit-list-row__recommendation"
-        role="cell"
-        >${audit.title}</span
-      >
-      <span class="lh-audit-list-row__item lh-audit-list-row__guide" role="cell"
-        >${relevantGuides}</span
-      >
-    </div>
-  `;
-}
-
-/* eslint-disable require-jsdoc */
-class LighthouseScoresAudits extends BaseElement {
-  static get properties() {
-    return {
-      timesExpanded: {type: Number}, // number of times a user has asked for more help
-      inverted: {type: Boolean}, // whether to sort by low impact first
-      filteringOn: {type: String}, // the Lighthouse category to filter to
-      lhr: {type: Object}, // contains the raw Lighthouse results data
-    };
-  }
-
-  constructor() {
-    super();
-    this.timesExpanded = 0;
-    this.inverted = false;
-  }
-
-  set lhr(value) {
-    if (this._lhr === value) {
-      return; // don't reset, same results
-    }
-
-    // setting lhr resets most properties of this element
-    this.timesExpanded = 1;
-    this.inverted = false;
-    this.filteringOn = null;
-
-    const oldValue = this._lhr;
-    this._lhr = value;
-    this.requestUpdate('lhr', oldValue);
-  }
-
-  get lhr() {
-    return this._lhr;
-  }
-
-  firstUpdated() {
-    this.setAttribute('role', 'table');
-    this.setAttribute('aria-label', 'Lighthouse audits and suggested guides');
-  }
-
-  /**
-   * @private
-   * @param {!LighthouseLastRunDetail} lhr The lighthouse report to render a
-   *     table for.
-   * @return {!Array<!CombinedAuditAndAuditRef>} The audits and refs, sorted
-   *     on performance improvement or ref weight.
-   */
-  getHighestImpactScores(lhr) {
-    const sortedValues = Object.values(lhr.categories)
-      // First filter on selected category.
-      .filter((cat) => (this.filteringOn ? cat.id === this.filteringOn : true))
-      // Flatmap all audits with their corresponding category.
-      .map((cat) => {
-        return cat.auditRefs.map((ref) => Object.assign({cat: cat.title}, ref));
-      })
-      .reduce((one, other) => one.concat(other), [])
-      .map((ref) => ({ref, audit: lhr.audits[ref.id]}))
-      .filter(filterAuditResult)
-      .map(computeWeightForAuditResult)
-      .sort(sortOnWeights);
-
-    if (this.inverted) {
-      sortedValues.reverse();
-    }
-    return sortedValues;
-  }
-
-  render() {
-    const lhr = this.lhr;
-    let rows = html``;
-    let allRowsShown = false;
-
-    if (lhr) {
-      const scores = this.getHighestImpactScores(lhr);
-      allRowsShown = scores.length <= NUM_AUDITS_TO_SHOW * this.timesExpanded;
-
-      rows = scores
-        .slice(0, NUM_AUDITS_TO_SHOW * this.timesExpanded)
-        .map((category) => createRowForAuditCategory(lhr, category));
-    } else {
-      // Render placeholder rows for hydrating.
-      const dummyArray = Array(NUM_AUDITS_TO_SHOW * this.timesExpanded).keys();
-      rows = Array.from(dummyArray).map(() => {
-        return html`
-          <div class="lh-audit-list-row" role="row">
-            <span
-              class="lh-audit-list-row__impact lh-audit-list-row__item"
-              role="cell"
-            ></span>
-          </div>
-        `;
-      });
-    }
-
-    return html`
-      <div class="lh-audit-list-headers" role="row">
-        <span
-          class="lh-audit-list-row__impact lh-audit-list-row__item"
-          role="columnheader"
-        >
-          <button
-            class="lh-audit-list-row__impact-arrow"
-            @click="${this.onInvert}"
-            ?data-inverted="${this.inverted}"
-          >
-            Impact
-          </button>
-        </span>
-        <span
-          class="lh-audit-list-row__category lh-audit-list-row__item"
-          role="columnheader"
-          >Category</span
-        >
-        <span
-          class="lh-audit-list-row__recommendation lh-audit-list-row__item"
-          role="columnheader"
-          >Audit</span
-        >
-        <span
-          class="lh-audit-list-row__guide lh-audit-list-row__item"
-          role="columnheader"
-          >Guide</span
-        >
-      </div>
-      <div class="lh-audit-list-rows" role="rowgroup">
-        ${rows}
-      </div>
-      <div class="lh-audit-list-see-more__container">
-        <button
-          @click="${this.onIncreaseAuditsShown}"
-          ?disabled="${!lhr || allRowsShown}"
-          class="w-button lh-audit-list-see-more__button gc-analytics-event"
-          data-category="web.dev"
-          data-label="audit todos, see more"
-          data-action="click"
-        >
-          See more
-        </button>
-      </div>
-    `;
-  }
-
-  onInvert(e) {
-    e.preventDefault();
-    this.inverted = !this.inverted;
-  }
-
-  onIncreaseAuditsShown(e) {
-    e.preventDefault();
-    this.timesExpanded++;
-  }
-
-  /**
-   * Toggles filtering of the audit list.
-   * @param {?string} cat Category id to filter on. Passing null or the same
-   *     name clears the filter.
-   * @export
-   */
-  filter(cat) {
-    // Reset filter if same category is passed, otherwise set new filter.
-    this.filteringOn = cat === this.filteringOn ? null : cat;
-  }
-}
-
-customElements.define('web-lighthouse-scores-audits', LighthouseScoresAudits);
diff --git a/src/lib/components/LighthouseScoresContainer/index.js b/src/lib/components/LighthouseScoresContainer/index.js
deleted file mode 100644
index 6ae781a8b7b..00000000000
--- a/src/lib/components/LighthouseScoresContainer/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import {html} from 'lit-element';
-import {store} from '../../store';
-import {requestFetchReports} from '../../actions';
-import {BaseElement} from '../BaseElement';
-
-/**
- * @fileoverview Container element for displaying Lighthouse results.
- */
-
-/* eslint-disable require-jsdoc */
-class LighthouseScoresContainer extends BaseElement {
-  static get properties() {
-    return {
-      filteringOn: {type: String}, // the Lighthouse category to filter to, not from state
-
-      lighthouseError: {type: String},
-      activeLighthouseUrl: {type: String},
-      auditedOn: {type: Date},
-      lighthouseResultUrl: {type: String},
-      lighthouseResultRuns: {type: Array},
-      lighthouseResultLastLhr: {type: Object},
-    };
-  }
-
-  constructor() {
-    super();
-    this.onStateChanged = this.onStateChanged.bind(this);
-  }
-
-  render() {
-    return html`
-      <web-lighthouse-scores-meta
-        .errorMessage=${this.lighthouseError}
-        .auditedOn=${this.auditedOn}
-        .url=${this.lighthouseResultUrl}
-      ></web-lighthouse-scores-meta>
-      <web-lighthouse-scores-stats
-        @category=${(e) => (this.filteringOn = e.detail)}
-        .lhrRuns=${this.lighthouseResultRuns}
-        .disabled=${Boolean(this.activeLighthouseUrl)}
-      ></web-lighthouse-scores-stats>
-      <web-lighthouse-scores-metrics
-        .lhr=${this.lighthouseResultLastLhr}
-        ?hidden=${!this.lighthouseResultLastLhr}
-      ></web-lighthouse-scores-metrics>
-      <web-lighthouse-scores-audits
-        .filteringOn=${this.filteringOn}
-        .lhr=${this.lighthouseResultLastLhr}
-        ?hidden=${!this.lighthouseResultLastLhr}
-      ></web-lighthouse-scores-audits>
-    `;
-  }
-
-  onStateChanged() {
-    const {
-      lighthouseError,
-      lighthouseResult,
-      activeLighthouseUrl,
-      userUrlResultsPending,
-    } = store.getState();
-
-    // Only request reports if this element is visible on the page. This prevents a user's signin
-    // from fetching reports before they're needed.
-    if (userUrlResultsPending) {
-      const {userUrl, userUrlSeen} = store.getState();
-      requestFetchReports(userUrl, userUrlSeen);
-      store.setState({
-        userUrlResultsPending: false,
-      });
-    }
-
-    this.lighthouseError = lighthouseError;
-    this.activeLighthouseUrl = activeLighthouseUrl;
-
-    const runs = (lighthouseResult && lighthouseResult.runs) || [];
-    const lastRun = runs.slice(-1)[0] || null;
-
-    this.lighthouseResultUrl = lighthouseResult ? lighthouseResult.url : null;
-    this.lighthouseResultRuns = runs;
-    this.lighthouseResultLastLhr = lastRun ? lastRun.lhr : null;
-
-    let auditedOn = null;
-    if (lastRun) {
-      const d = new Date(lastRun.auditedOn);
-      if (d.getTime()) {
-        auditedOn = d;
-      }
-    }
-    this.auditedOn = auditedOn;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    store.subscribe(this.onStateChanged);
-    this.onStateChanged();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    store.unsubscribe(this.onStateChanged);
-  }
-}
-
-customElements.define(
-  'web-lighthouse-scores-container',
-  LighthouseScoresContainer,
-);
diff --git a/src/lib/components/LighthouseScoresMeta/_styles.scss b/src/lib/components/LighthouseScoresMeta/_styles.scss
deleted file mode 100644
index b6f1b47688a..00000000000
--- a/src/lib/components/LighthouseScoresMeta/_styles.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/tools/breakpoints';
-@import '../../../styles/tools/mixins';
-
-
-web-lighthouse-scores-meta {
-  .lh-report-meta {
-    margin-top: 8px;
-    margin-bottom: 16px;
-    font-size: 14px;
-  }
-
-  .lh-report-meta__links {
-    display: flex;
-    flex-direction: column;
-
-    @include bp(sm) {
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    @include bp(md) {
-      display: block;
-    }
-  }
-
-  .lh-report-meta__lastaudit {
-    margin-left: 8px;
-
-    @include bp(sm) {
-      margin-left: 8px;
-    }
-
-    @include bp(md) {
-      min-width: 180px;
-      margin-right: 16px;
-      display: inline-block;
-    }
-  }
-
-  .lh-report-invisible {
-    visibility: hidden;
-  }
-
-  .lh-report-link {
-    margin: 0 8px;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  .lh-error-msg {
-    color: $RED_600;
-    max-width: 100%;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-
-    &:empty {
-      display: none;
-    }
-
-    &::before {
-      @include font-material-icon();
-      content: 'info';
-      margin-right: 8px;
-      font-size: 20px;
-
-      // Disabled as `alt` is a new property only supported in Safari.
-      // scss-lint:disable PropertySpelling
-      alt: '';
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/lib/components/LighthouseScoresMeta/index.js b/src/lib/components/LighthouseScoresMeta/index.js
deleted file mode 100644
index 1aafad98117..00000000000
--- a/src/lib/components/LighthouseScoresMeta/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @fileoverview Shows meta information about a Lighthouse run, including an optional error.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {LH_HOST} from '../../lighthouse-service';
-import './_styles.scss';
-
-/* eslint-disable require-jsdoc */
-class LighthouseScoresMeta extends BaseElement {
-  static get properties() {
-    return {
-      errorMessage: {type: String},
-      url: {type: String},
-      auditedOn: {type: Date},
-    };
-  }
-
-  firstUpdated() {
-    this.setAttribute('aria-label', 'Lighthouse meta information');
-  }
-
-  render() {
-    const hidden = !this.url || this.errorMessage || !this.auditedOn;
-
-    let auditedOnText = '\u2014'; // em dash
-    if (!hidden && this.auditedOn) {
-      try {
-        const opts = {
-          day: 'numeric',
-          month: 'short',
-          hour: 'numeric',
-          minute: 'numeric',
-        };
-        auditedOnText = new Intl.DateTimeFormat('en-US', opts).format(
-          this.auditedOn,
-        );
-      } catch (err) {
-        auditedOnText = this.auditedOn.toLocaleString();
-      }
-    }
-
-    const encodedUrl = encodeURIComponent(this.url);
-
-    return html`
-      <div class="lh-report-meta">
-        <span class="lh-report-meta__links" ?hidden="${hidden}">
-          <span class="lh-report-meta__lastaudit">
-            <span>Last audit:</span> <span>${auditedOnText}</span>
-          </span>
-          <span>
-            <a
-              href="${LH_HOST}/lh/html?url=${encodedUrl}"
-              title="View latest Lighthouse report"
-              class="viewreport lh-report-link gc-analytics-event"
-              data-category="web.dev"
-              data-label="view lighthouse report"
-              data-action="click"
-              target="_blank"
-              rel="noopener"
-              >View Report</a
-            >
-          </span>
-        </span>
-        <span class="lh-error-msg">${this.errorMessage}</span>
-      </div>
-    `;
-  }
-}
-
-customElements.define('web-lighthouse-scores-meta', LighthouseScoresMeta);
diff --git a/src/lib/components/LighthouseScoresMetrics/_styles.scss b/src/lib/components/LighthouseScoresMetrics/_styles.scss
deleted file mode 100644
index bd56bda64bc..00000000000
--- a/src/lib/components/LighthouseScoresMetrics/_styles.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/mixins';
-
-// =============================================================================
-// LIGHTHOUSE SCORES METRICS
-//
-// Shows key metrics for a Lighthouse run.
-//
-// =============================================================================
-
-web-lighthouse-scores-metrics {
-  $PADDING: 16px;
-  $CARDS_HEIGHT: 219px;
-
-  .lh-metrics-container {
-    @include elevation(2);
-    border-radius: inherit;
-    background-color: $WHITE;
-    margin-top: $PADDING;
-    padding: $PADDING * 2;
-    min-height: ($PADDING * 4);
-  }
-
-  .lh-metrics-table {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .lh-metrics-vitals {
-    display: flex;
-    font-size: 14px;
-    justify-content: center;
-    padding-top: $PADDING;
-
-    &::before {
-      @include font_material_icon();
-      color: $WEB_VITALS_COLOR;
-      content: 'bookmark';
-      margin-right: 5px;
-      font-size: 20px;
-    }
-  }
-
-  .lh-metrics-table {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .lh-metrics-table__metric {
-    $MARGIN: 15px;
-
-    flex: 1;
-    width: calc(50% - #{$MARGIN});
-    min-width: 260px;
-    max-width: 300px;
-    flex-basis: auto;
-    margin: 0 $MARGIN;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 40px;
-    border-bottom: 1px solid $GREY_200;
-
-    span {
-      display: flex;
-    }
-  }
-
-  .lh-metrics-table__icon {
-    @include font_material_icon();
-    align-items: center;
-    font-size: 16px;
-    margin-left: 5px;
-  }
-
-  .lh-vital {
-    &::after {
-      @include font_material_icon();
-      color: $WEB_VITALS_COLOR;
-      content: 'bookmark';
-      margin-left: 5px;
-    }
-  }
-
-  .lh-metrics-table__score {
-    &.lh-score--fail {
-      color: $FAIL_COLOR;
-
-      .lh-metrics-table__icon::before {
-        content: 'warning';
-      }
-    }
-
-    &.lh-score--average {
-      color: $AVERAGE_COLOR;
-
-      .lh-metrics-table__icon::before {
-        content: 'info';
-      }
-    }
-
-    &.lh-score--pass {
-      color: $PASS_COLOR;
-
-      .lh-metrics-table__icon::before {
-        content: 'check_circle';
-      }
-    }
-  }
-}
diff --git a/src/lib/components/LighthouseScoresMetrics/index.js b/src/lib/components/LighthouseScoresMetrics/index.js
deleted file mode 100644
index e8aecabc3f0..00000000000
--- a/src/lib/components/LighthouseScoresMetrics/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * @fileoverview An element which shows key metrics for a Lighthouse run.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {metrics} from '../../lighthouse';
-import './_styles.scss';
-
-/* eslint-disable require-jsdoc */
-class LighthouseScoresMetrics extends BaseElement {
-  static get properties() {
-    return {
-      lhr: {type: Object}, // the single Lighthouse run being shown
-    };
-  }
-
-  firstUpdated() {
-    this.setAttribute('role', 'table');
-    this.setAttribute('aria-label', 'Lighthouse key metrics');
-  }
-
-  render() {
-    let inner = '';
-    let hasVitals = false;
-
-    if (this.lhr) {
-      const metricToHtml = (metric) => {
-        const audit = this.lhr.audits[metric.id];
-        if (!audit) {
-          return '';
-        }
-
-        let label = null;
-        if (audit.score >= 0.9) {
-          label = 'pass';
-        } else if (audit.score >= 0.5) {
-          label = 'average';
-        } else {
-          label = 'fail';
-        }
-
-        const vitalsClass = metric.vitals ? 'lh-vital' : '';
-        hasVitals = hasVitals || metric.vitals;
-
-        return html`
-          <div class="lh-metrics-table__metric">
-            <span class="${vitalsClass}">${metric.title}</span>
-            <span
-              class="lh-metrics-table__score lh-score--${label}"
-              aria-label="${label} score: ${audit.displayValue}"
-              role="group"
-            >
-              ${audit.displayValue}
-              <span class="lh-metrics-table__icon"></span>
-            </span>
-          </div>
-        `;
-      };
-      inner = metrics.map(metricToHtml);
-    }
-
-    return html`
-      <div class="lh-metrics-container">
-        <div class="lh-metrics-table">${inner}</div>
-        <div class="lh-metrics-vitals" ?hidden=${!hasVitals}>
-          <span
-            >Core Web Vitals assessment. To learn more, see
-            <a href="/vitals">Web Vitals</a>.</span
-          >
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('web-lighthouse-scores-metrics', LighthouseScoresMetrics);
diff --git a/src/lib/components/LighthouseScoresStats/_styles.scss b/src/lib/components/LighthouseScoresStats/_styles.scss
deleted file mode 100644
index 603f5ee4933..00000000000
--- a/src/lib/components/LighthouseScoresStats/_styles.scss
+++ /dev/null
@@ -1,263 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/mixins';
-
-// =============================================================================
-// LIGHTHOUSE SCORES STATS
-//
-// Shows the sparklines and gauges for recent Lighthouse runs.
-//
-// =============================================================================
-
-web-lighthouse-scores-stats {
-  $PADDING: 16px;
-  $CARDS_HEIGHT: 219px;
-
-  web-progress-bar {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-  }
-
-  .lh-score-cards {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    @include elevation(2);
-    border-radius: inherit;
-    background-color: $WHITE;
-    min-height: ($PADDING * 4);
-  }
-
-  .lh-score-cards {
-    margin-top: 16px;
-
-    /// @deprecated
-    @media screen and (min-width: $BREAKPOINT_VALUE_TABLET) {
-      margin-top: 32px;
-    }
-  }
-
-  .lh-score-card {
-    color: unset;
-    font-size: unset;
-    display: block;
-
-    > input[type="radio"] {
-      display: none;
-    }
-  }
-
-  .lh-audit-running {
-    web-progress-bar {
-      visibility: visible;
-    }
-  }
-
-  .lh-score-cards--fade {
-    .lh-score-card {
-      opacity: .5;
-    }
-  }
-
-  .lh-score-card {
-    position: relative;
-    padding: $PADDING;
-    width: 25%;
-    height: 100%;
-    border-left: 1px solid $GREY_300;
-    border-bottom: 1px solid $GREY_300;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .lh-score-card__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
-    font-size: 18px;
-    font-weight: 500;
-  }
-
-  .lh-score-card__data {
-    position: relative;
-  }
-
-  .lh-score-card__title {
-    @include ellipsis();
-    flex-shrink: 0;
-    user-select: none;
-  }
-
-  web-sparkline {
-    display: inline-block;
-    width: 100%;
-    height: 100px;
-  }
-
-  web-lighthouse-gauge {
-    width: 50px;  // Give layout before hydration
-    height: 50px;
-    contain: content;
-    display: block;
-    user-select: none;
-  }
-
-  .lh-score-card__scorescale {
-    text-align: right;
-
-    &.lh-score__label {
-      margin: $PADDING 0;
-    }
-  }
-
-  .lh-score__label {
-    font-size: 14px;
-    color: $GREY_700;
-    width: 100%;;
-  }
-
-  .lh-score-card__legend {
-    display: inline-block;
-
-    .lh-score-card__legend--ellipsis {
-      @include ellipsis();
-      max-width: 100%;
-    }
-  }
-
-  .lh-score-card__range {
-    white-space: nowrap;
-
-    &::before {
-      content: '';
-      width: 14px;
-      height: 8px;
-      border-radius: 4px;
-      display: inline-block;
-      margin: 0 5px;
-    }
-
-    &.lh-score--fail::before {
-      background-color: $FAIL_COLOR;
-    }
-
-    &.lh-score--average::before {
-      background-color: $AVERAGE_COLOR;
-    }
-
-    &.lh-score--pass::before {
-      background-color: $PASS_COLOR;
-    }
-  }
-
-  /// @deprecated
-  @media screen and (min-width: $BREAKPOINT_VALUE_DESKTOP) {
-    web-lighthouse-gauge {
-      width: 50px;
-      height: 50px;
-    }
-
-    .lh-score-cards {
-      flex-wrap: nowrap;
-    }
-  }
-
-  /// @deprecated
-  @media screen and (min-width: $BREAKPOINT_VALUE_TABLET) and
-      (max-width: $BREAKPOINT_VALUE_TABLET_LANDSCAPE) {
-    web-lighthouse-gauge {
-      width: 30px;
-      height: 30px;
-      font-size: 14px;
-    }
-
-    .lh-score-card__title {
-      font-size: 14px;
-      max-width: calc(100% - 30px) !important;
-    }
-  }
-
-  /// @deprecated
-  @media screen and (min-width: $BREAKPOINT_VALUE_TABLET) {
-    .results-row {
-      grid-column: 1 / span 12;
-    }
-
-    .report_header_enterurl {
-      display: flex;
-    }
-
-    .lh-controls {
-      margin-top: 0;
-      flex-wrap: nowrap;
-    }
-
-    .lh-enterurl {
-      margin-right: 32px;
-      width: 100%;
-    }
-
-    .lh-input {
-      width: 100%;
-    }
-
-    .lh-score-card {
-      border-bottom: 0;
-
-      &.lh-score__label {
-        display: none;
-      }
-    }
-
-    .lh-score-card__header {
-      flex-direction: row;
-    }
-
-    .lh-score-card__title {
-      max-width: calc(100% - 60px);
-    }
-
-    .lh-score-card__range:not([data-first]) {
-      margin-left: 4px;
-    }
-
-    .lh-score__label {
-      text-align: right;
-      margin-top: $PADDING;
-    }
-
-    .lh-score-card__legend {
-      margin-left: 24px;
-    }
-  }
-
-  @media screen and (max-width: $BREAKPOINT_VALUE_TABLET) {
-    .lh-score-card {
-      min-width: 50%;
-    }
-
-    .lh-score-cards + .lh-score__label {
-      display: none;
-    }
-
-    .lh-score-card__title {
-      margin-bottom: 8px;
-    }
-
-    .lh-score-card__legend {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 8px 0;
-
-      &:last-child {
-        order: -1;
-      }
-    }
-  }
-}
diff --git a/src/lib/components/LighthouseScoresStats/index.js b/src/lib/components/LighthouseScoresStats/index.js
deleted file mode 100644
index e9147bb1e84..00000000000
--- a/src/lib/components/LighthouseScoresStats/index.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * @fileoverview An element which shows a number of sparklines and gauges.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {categories} from '../../lighthouse';
-import './_styles.scss';
-
-/* eslint-disable require-jsdoc */
-class LighthouseScoresStats extends BaseElement {
-  static get properties() {
-    return {
-      lhrRuns: {type: Array}, // all the Lighthouse runs being shown
-      category: {type: String}, // the current chosen category
-      disabled: {type: Boolean}, // fades out UI elements for LH run
-      medians: {type: Array},
-    };
-  }
-
-  firstUpdated() {
-    this.setAttribute('role', 'table');
-    this.setAttribute('aria-label', 'Lighthouse performance over time');
-  }
-
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  onCardClick(e) {
-    if (this.category === e.target.value) {
-      // clicking on card again clears filter
-      this.category = null;
-    } else {
-      this.category = e.target.value;
-    }
-    const event = new CustomEvent('category', {
-      detail: this.category,
-      bubbles: true,
-    });
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * @param {string} catId
-   * @return {!Array<!LighthouseScore>}
-   * @export
-   */
-  getScoresForCategory(catId) {
-    const runs = this.lhrRuns || [];
-    return runs
-      .map((run) => {
-        const items = run.lhrSlim;
-        const item = (items || []).find((item) => item.id === catId);
-        if (!item) {
-          return null;
-        }
-        return {
-          date: run.auditedOn,
-          score: item.score * 100,
-        };
-      })
-      .filter(Boolean);
-  }
-
-  /**
-   * @return {!Array<!TemplateResult>}
-   */
-  generateCards() {
-    /**
-     * @param {string} id
-     * @param {!Array<!LighthouseScore>} scores
-     * @return {!TemplateResult}
-     */
-    const generateGraphs = (id, scores) => {
-      if (!scores.length) {
-        return html``;
-      }
-      return html`
-        <web-sparkline-chart
-          class="score-line"
-          fill
-          showlast
-          .values="${scores}"
-          .medians="${this.medians}"
-        ></web-sparkline>
-      `;
-    };
-
-    return categories.map(({id, title}) => {
-      const scores = this.getScoresForCategory(id);
-      const lastScore = scores.slice(-1)[0] || {score: 0};
-
-      return html`
-        <label class="lh-score-card">
-          <input
-            type="radio"
-            name="lh-score-category"
-            value="${id}"
-            .checked=${this.category === id}
-            @click=${this.onCardClick}
-          />
-          <div class="lh-score-card__header">
-            <span
-              class="lh-score-card__title"
-              aria-hidden="true"
-              >${title}</span
-            >
-            <web-lighthouse-gauge
-              aria-labelledby="${id}-score-gauge-title"
-              score="${lastScore.score / 100}"
-            ></web-lighthouse-gauge>
-          </div>
-          <div class="lh-score-card__data">
-            ${generateGraphs(id, scores)}
-          </div>
-        </div>
-      `;
-    });
-  }
-
-  scoreLegend(inline = true) {
-    const className = inline ? 'lh-score-card' : '';
-
-    return html`
-      <div class="${className} lh-score__label">
-        <div class="lh-score-card__legend">
-          <span>Score scale:</span>
-          <span class="lh-score-card__range lh-score--fail" data-first>
-            0-49
-          </span>
-          <span class="lh-score-card__range lh-score--average">50-89</span>
-          <span class="lh-score-card__range lh-score--pass">90-100</span>
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    const lastRun = this.lhrRuns && this.lhrRuns.slice(-1)[0];
-    const lhr = lastRun ? lastRun.lhr : null;
-
-    return html`
-      <div class="${this.disabled ? 'lh-audit-running' : ''}">
-        <div class="lh-score-cards ${!lhr ? 'lh-score-cards--fade' : ''}">
-          <web-progress-bar></web-progress-bar>
-          ${this.generateCards()} ${this.scoreLegend(true)}
-        </div>
-        ${this.scoreLegend(false)}
-      </div>
-    `;
-  }
-}
-
-customElements.define('web-lighthouse-scores-stats', LighthouseScoresStats);
diff --git a/src/lib/components/LivestreamContainer/_styles.scss b/src/lib/components/LivestreamContainer/_styles.scss
deleted file mode 100644
index c2ea27e4fb7..00000000000
--- a/src/lib/components/LivestreamContainer/_styles.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/breakpoints';
-
-web-livestream-container {
-  display: flex;
-  margin: auto;
-  max-width: 1600px;
-  position: relative;
-  
-  .web-livestream-container__col-yt {
-    max-width: 100%;
-    align-items: center;
-    background-color: $GREY_50;
-    display: flex;
-    flex: 1;
-  }
-
-  .web-livestream-container__col-chat {
-    display: none;
-    
-    @include bp(md) {
-      border-left: 1px solid $GREY_300;
-      display: block;
-      min-height: 600px;
-      width: 400px;
-    }
-
-    @media (hover: none) {
-      display: none;
-    }
-  }
-
-  .w-youtube-chat {
-    height: 100%;
-    width: 100%;
-  }
-
-  .w-youtube-disabled-chat {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-  }
-
-  .w-youtube-disabled-chat__text {
-    max-width: 250px;
-    color: $GREY_700;
-  }
-
-  .w-youtube-disabled-chat__link {
-    display: block;
-    font-family: $HEADLINE_FONT;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    font-size: 14px;
-    margin-top: 16px;
-  }
-
-  .web-livestream-container__chat-toggle {
-    display: none;
-
-    @include bp(md) {
-      align-items: center;
-      appearance: none;
-      background: none;
-      border-radius: 1px;
-      border: none;
-      bottom: -48px;
-      color: $GREY_700;
-      cursor: pointer;
-      display: flex;
-      font-size: 12px;
-      height: 40px;
-      line-height: 20px;
-      padding: 8px;
-      position: absolute;
-      right: 0;
-      text-align: center;
-  
-      &:hover {
-        background-color: $GREY_300;
-      }
-    }
-
-    @media (hover: none) {
-      display: none;
-    }
-  }
-}
-
-web-livestream-container[chat-closed] {
-  .web-livestream-container__col-chat {
-    display: none;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/components/LivestreamContainer/index.js b/src/lib/components/LivestreamContainer/index.js
deleted file mode 100644
index 209d1292f99..00000000000
--- a/src/lib/components/LivestreamContainer/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import {html} from 'lit-element';
-import {BaseStateElement} from '../BaseStateElement';
-import './_styles.scss';
-
-/* eslint-disable require-jsdoc */
-class LivestreamContainer extends BaseStateElement {
-  static get properties() {
-    return {
-      videoId: {type: String},
-      isChatActive: {type: Boolean},
-      chatClosed: {type: Boolean, reflect: true, attribute: 'chat-closed'},
-    };
-  }
-
-  constructor() {
-    super();
-    this.videoId = null;
-    this.isChatActive = true;
-    this.chatClosed = false;
-    this.isSignedIn = undefined;
-  }
-
-  render() {
-    if (!this.videoId) {
-      return html``;
-    }
-
-    // prettier-ignore
-    /* eslint-disable indent */
-    return html`
-      <div class="web-livestream-container__col-yt">
-        <div class="w-youtube">
-          <iframe
-            title="web.dev YouTube livestream"
-            class="w-youtube__embed"
-            src="https://www.youtube.com/embed/${this.videoId}"
-            frameborder="0"
-            allowfullscreen
-            loading="lazy"
-          ></iframe>
-        </div>
-      </div>
-
-      <div class="web-livestream-container__col-chat">
-        ${this.isChatActive ?
-          html`
-            <iframe
-              title="web.dev YouTube live chat"
-              class="w-youtube-chat"
-              src="https://www.youtube.com/live_chat?v=${this.videoId}&amp;embed_domain=${location.hostname}"
-              frameborder="0"
-            ></iframe>
-          ` :
-          html`
-            <div class="w-youtube-disabled-chat">
-              <div class="w-youtube-disabled-chat__text">
-                <div>
-                  Live Chat is currently disabled. Please head to YouTube and
-                  ask your questions in the comments on the video.
-                </div>
-                <a
-                  class="w-youtube-disabled-chat__link" 
-                  href="https://www.youtube.com/watch?v=${this.videoId}">
-                  Go to YouTube
-                </a>
-              </div>
-            </div>
-          `
-        }
-      </div>
-      <button class="web-livestream-container__chat-toggle" @click="${() => {this.chatClosed = !this.chatClosed}}">
-        ${this.chatClosed ?
-          html`<i class="material-icons">chevron_left</i> <span>Open live chat</span>` :
-          html`<i class="material-icons">chevron_right</i> <span>Close live chat</span>`
-        }
-      </button>
-    `;
-  }
-
-  /**
-   * @param {!Object<string, *>} state
-   */
-  onStateChanged({activeEventDay, isSignedIn}) {
-    const {videoId, isChatActive} = activeEventDay || {
-      videoId: null,
-      isChatActive: false,
-    };
-    this.videoId = videoId;
-    this.isChatActive = isChatActive;
-
-    // If there was a signed-in state change, reload all our frames as YouTube won't otherwise
-    // reconfigure them automatically. This can technically force a double-reload, if videoId also
-    // changes in the same update, but in practice they're updated separately.
-    // Note that signed-in state might change for one of two reasons:
-    //  1) the user is signed into Google but signs in/out of web.dev (and reload is needless)
-    //  2) the user signs in or out of Google as part of web.dev (reload is required)
-    if (this.isSignedIn !== isSignedIn) {
-      const frames = this.renderRoot.querySelectorAll('iframe');
-      frames.forEach((frame) => {
-        frame.src = '' + frame.src;
-      });
-      this.isSignedIn = isSignedIn;
-    }
-  }
-}
-
-customElements.define('web-livestream-container', LivestreamContainer);
diff --git a/src/lib/components/NavigationDrawer/index.js b/src/lib/components/NavigationDrawer/index.js
new file mode 100644
index 00000000000..16e3e6e7a7e
--- /dev/null
+++ b/src/lib/components/NavigationDrawer/index.js
@@ -0,0 +1,164 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint lit-a11y/click-events-have-key-events: 0 */
+
+import {BaseStateElement} from '../BaseStateElement';
+import {closeNavigationDrawer} from '../../actions';
+
+export const NAVIGATION_DRAWER_TYPE = {
+  standard: 'standard',
+  modal: 'modal',
+};
+
+export class NavigationDrawer extends BaseStateElement {
+  static get properties() {
+    return {
+      type: {type: String, reflect: true},
+      open: {type: Boolean, reflect: true},
+      animating: {type: Boolean, reflect: true},
+    };
+  }
+
+  set open(val) {
+    if (this._open === val) {
+      return;
+    }
+
+    const oldVal = this._open;
+    this._open = val;
+    this.animating = true;
+    if (this._open) {
+      document.addEventListener('keyup', this.onKeyUp);
+    }
+    this.addEventListener('transitionend', this.onTransitionEnd);
+    this.requestUpdate('open', oldVal);
+  }
+
+  get open() {
+    return this._open;
+  }
+
+  constructor() {
+    super();
+
+    this.type = null;
+    this._open = false;
+    this.animating = false;
+
+    this.onTransitionEnd = this.onTransitionEnd.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+  }
+
+  connectedCallback() {
+    this.tabIndex = -1;
+
+    if (this.type === NAVIGATION_DRAWER_TYPE.modal) {
+      this.inert = true;
+    }
+
+    /** @type HTMLElement */
+    this.drawerContainer = this.querySelector('[data-drawer-container]');
+    /** @type HTMLElement */
+    this.closeBtn = this.querySelector('[data-drawer-close-button]');
+
+    this.addEventListeners();
+    super.connectedCallback();
+  }
+
+  addEventListeners() {
+    this.drawerContainer.addEventListener('click', this.onBlockClicks);
+    this.closeBtn.addEventListener('click', this.onCloseNavigationDrawer);
+    this.addEventListener('click', this.onCloseNavigationDrawer);
+  }
+
+  onStateChanged({isNavigationDrawerOpen, currentUrl}) {
+    this.open = isNavigationDrawerOpen;
+
+    if (currentUrl) {
+      // Ensure that the "active" attribute is applied to any matching header
+      // link, or to none (for random subpages or articles).
+      currentUrl = currentUrl.replace(/"/g, '\\"');
+      currentUrl = (currentUrl.match(/^\/\w+\//) || [''])[0];
+
+      const active = this.querySelector('[active]');
+      const updated = this.querySelector(`[href="${currentUrl}"]`);
+
+      if (active === updated) {
+        return;
+      }
+
+      if (active) {
+        active.removeAttribute('active');
+        active.removeAttribute('aria-current');
+      }
+
+      if (updated) {
+        updated.setAttribute('active', '');
+        updated.setAttribute('aria-current', 'page');
+      }
+    }
+  }
+
+  onCloseNavigationDrawer() {
+    this.blur();
+    closeNavigationDrawer();
+  }
+
+  onBlockClicks(e) {
+    // When the NavigationDrawer is expanded we use a ::before element to render
+    // the overlay. Because the ::before element is a child of NavigationDrawer,
+    // and covers the entire page, we add a listener to NavigationDrawer to see
+    // if it was clicked on.
+    // If a link within the NavigationDrawer was clicked, we allow the click to
+    // happen so the router can know about it.
+    // If the NavigationDrawer's container was clicked, we block the click so
+    // the NavigationDrawer won't collapse.
+    // If the click was outside of the container/on the overlay, we close the
+    // NavigationDrawer.
+    const link = e.target.closest('a');
+    if (!link) {
+      e.stopPropagation();
+    }
+  }
+
+  onTransitionEnd(e) {
+    if (e.target !== this) {
+      return;
+    }
+
+    this.animating = false;
+    // If the NavigationDrawer is expanded we need to move focus into the element so
+    // folks using a screen reader or switch can access it.
+    if (this.open) {
+      this.focus();
+    } else {
+      // When the NavigationDrawer is collapsed, we need to remove focus on it.
+      this.blur();
+    }
+    this.inert = !this.open;
+    this.removeEventListener('transitionend', this.onTransitionEnd);
+  }
+
+  onKeyUp(e) {
+    if (e.key === 'Escape') {
+      closeNavigationDrawer();
+      document.removeEventListener('keyup', this.onKeyUp);
+    }
+  }
+}
+
+customElements.define('web-navigation-drawer', NavigationDrawer);
diff --git a/src/lib/components/Newsletter/index.js b/src/lib/components/Newsletter/index.js
index e1f157bcb5d..bfb5827dc06 100644
--- a/src/lib/components/Newsletter/index.js
+++ b/src/lib/components/Newsletter/index.js
@@ -46,7 +46,9 @@ class Newsletter extends BaseElement {
   }
 
   resizeIFrame() {
-    this.iframe.height = this.iframe.contentWindow.document.body.scrollHeight;
+    this.iframe.height = String(
+      this.iframe.contentWindow.document.body.scrollHeight,
+    );
   }
 }
 
diff --git a/src/lib/components/ProfileSwitcher/_styles.scss b/src/lib/components/ProfileSwitcher/_styles.scss
deleted file mode 100644
index c87c871e757..00000000000
--- a/src/lib/components/ProfileSwitcher/_styles.scss
+++ /dev/null
@@ -1,279 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/type';
-@import '../../../styles/tools/mixins';
-
-// =============================================================================
-// PROFILE SWITCHER OVERVIEW
-//
-// The profile switcher let's the user change which Google profile they're
-// signed in with. It also lets them sign out.
-//
-// =============================================================================
-
-web-profile-switcher-container {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  
-  @include bp(md) {
-    margin-left: 16px;
-  }
-}
-
-.w-profile-signin {
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  color: $PRIMARY_TEXT_COLOR;
-  cursor: pointer;
-  font-family: $PRIMARY_FONT;
-  text-transform: uppercase;
-  font-size: 14px;
-  font-weight: 500;
-  height: 100%;
-  outline: none;
-  padding: 0 8px;
-
-  @include bp(md) {
-    padding: 0 24px;
-  }
-
-  &:hover {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .04);
-  }
-
-  &:focus {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .12);
-  }
-
-  &:active {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .16);
-  }
-}
-
-web-profile-switcher {
-  display: block;
-  margin: 0 0 0 16px;
-}
-
-.w-profile-toggle {
-  background: $GREY_100;
-  border: 4px solid $WHITE;
-  border-radius: 50%;
-  box-shadow: none;
-  box-sizing: content-box;
-  display: flex;
-  height: auto;
-  justify-content: center;
-  min-height: 32px;
-  min-width: 32px;
-  overflow: hidden;
-  padding: 0;
-  width: auto;
-}
-
-.w-profile-toggle:hover,
-.w-profile-toggle:focus,
-.w-profile-toggle:active {
-  box-shadow: none;
-}
-
-.w-profile-toggle:focus {
-  border-color: rgba($BLACK, .2) !important;
-}
-
-@keyframes w-profile-toggle__appear {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-.w-profile-toggle__photo {
-  border-radius: 50%;
-  height: 32px;
-  width: 32px;
-  animation: w-profile-toggle__appear 0.45s;
-}
-
-.w-profile-dialog {
-  background: $WHITE;
-  border: 1px solid rgba($BLACK, .2);
-  border-radius: 2px;
-  box-shadow: 0 2px 10px rgba($BLACK, .2);
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  right: 15px;
-  top: 62px;
-
-  @include bp(sm) {
-    right: 24px;
-  }
-}
-
-.w-profile-dialog__user {
-  padding: 20px;
-
-  @include bp(xsm) {
-    display: flex;
-  }
-}
-
-.w-profile-dialog__photo-container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin: 0 0 20px;
-
-  @include bp(xsm) {
-    margin: 0 20px 0 0;
-  }
-}
-
-.w-profile-dialog__photo {
-  border-radius: 50%;
-  display: block;
-  height: 64px;
-  width: 64px;
-
-  @include bp(xsm) {
-    height: 96px;
-    width: 96px;
-  }
-}
-
-.w-profile-dialog__details {
-  font-size: 13px;
-  line-height: normal;
-}
-
-.w-profile-dialog__name {
-  font-weight: 500;
-  margin-bottom: 1px;
-}
-
-.w-profile-dialog__email {
-  color: #666;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.w-profile-dialog__privacy {
-  color: #1a73e8;
-  display: block;
-  margin: 6px 0;
-}
-
-.w-profile-dialog__privacy:hover {
-  text-decoration: none;
-}
-
-.w-profile-dialog__account {
-  background: #4d90fe;
-  border: 1px solid #3079ed;
-  border-radius: 2px;
-  color: $WHITE;
-  display: inline-block;
-  font: 13px/28px Roboto, Noto Sans, sans-serif;
-  margin: 10px 0 0;
-  padding: 0 12px;
-  position: relative;
-  text-align: center;
-  white-space: nowrap;
-  width: 100%;
-
-  @include bp(xsm) {
-    width: auto;
-  }
-}
-
-.w-profile-dialog__account:hover,
-.w-profile-dialog__account:focus,
-.w-profile-dialog__account:active {
-  outline: none;
-  text-decoration: none;
-}
-
-// This element is used to tint the button during user actions such as
-// hover, focus, and active.
-.w-profile-dialog__account::after {
-  @include w-overlay();
-}
-
-.w-profile-dialog__account:hover::after {
-  background-color: rgba($WHITE, .08);
-}
-
-.w-profile-dialog__account:focus::after {
-  background-color: rgba($WHITE, .12);
-}
-
-.w-profile-dialog__account:active::after {
-  background-color: rgba($WHITE, .24);
-}
-
-.w-profile-dialog__controls {
-  background: #f5f5f5;
-  border-top: 1px solid rgba($BLACK, .2);
-  display: block;
-  padding: 10px 20px;
-
-  @include bp(xsm) {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.w-profile-dialog__button {
-  background: #f8f8f8;
-  border: 1px solid #c6c6c6;
-  border-radius: 2px;
-  box-shadow: none;
-  color: #666;
-  display: block;
-  font: 13px/28px Roboto, Noto Sans, sans-serif;
-  height: auto;
-  margin: 0;
-  padding: 0 12px;
-  position: relative;
-  text-align: center;
-  text-align: center;
-  text-transform: none;
-  width: 100%;
-
-  @include bp(xsm) {
-    width: auto;
-  }
-}
-
-.w-profile-dialog__button:not(:last-of-type) {
-  margin-bottom: 8px;
-
-  @include bp(xsm) {
-    margin: 0;
-  }
-}
-
-.w-profile-dialog__button:focus {
-  background: #f8f8f8;
-  outline: none;
-  text-decoration: none;
-}
-
-// This element is used to tint the button during user actions such as
-// hover, focus, and active.
-.w-profile-dialog__button::after {
-  @include w-overlay();
-}
-
-.w-profile-dialog__button:hover::after {
-  background-color: rgba($BLACK, .04);
-}
-
-.w-profile-dialog__button:focus::after {
-  background-color: rgba($BLACK, .08);
-}
-
-.w-profile-dialog__button:active::after {
-  background-color: rgba($BLACK, .1);
-}
diff --git a/src/lib/components/ProfileSwitcher/index.js b/src/lib/components/ProfileSwitcher/index.js
deleted file mode 100644
index 0353e2ca873..00000000000
--- a/src/lib/components/ProfileSwitcher/index.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import {html} from 'lit-element';
-import {until} from 'lit-html/directives/until';
-import {BaseElement} from '../BaseElement';
-import {signIn, signOut} from '../../fb';
-import './_styles.scss';
-
-const emptyFrag = document.createDocumentFragment();
-
-/* eslint-disable require-jsdoc */
-class ProfileSwitcher extends BaseElement {
-  static get properties() {
-    return {
-      expanded: {type: Boolean},
-      user: {type: Object},
-      photoPromise: {type: Promise},
-    };
-  }
-
-  render() {
-    return html`
-      <button
-        class="w-profile-toggle"
-        .disabled=${!this.user}
-        @click="${() => (this.expanded = !this.expanded)}"
-      >
-        ${until(this.photoPromise)}
-      </button>
-      ${this.expanded && this.user ? this.expandedTemplate : ''}
-    `;
-  }
-
-  firstUpdated() {
-    // Close the profile switcher if it's open and the user presses escape.
-    this.addEventListener('keyup', (e) => {
-      if (e.key === 'Escape') {
-        if (this.expanded) {
-          this.expanded = false;
-        }
-      }
-    });
-
-    // Close the profile switcher if it's open and the user clicks outside.
-    document.addEventListener('click', (e) => {
-      if (this.expanded && !this.contains(e.target)) {
-        this.expanded = false;
-      }
-    });
-  }
-
-  shouldUpdate(changedProperties) {
-    if (!changedProperties.has('user')) {
-      return true;
-    }
-
-    this.expanded = false;
-
-    if (!this.user) {
-      this.photoPromise = null;
-      return true;
-    }
-
-    this.photoPromise = new Promise((resolve) => {
-      const image = new Image();
-      image.src = this.user.photoURL;
-      image.className = 'w-profile-toggle__photo';
-      image.onload = () => resolve(image);
-
-      // Ignore errors and don't display a photo at all.
-      image.onerror = () => resolve(emptyFrag);
-    });
-    return true;
-  }
-
-  get expandedTemplate() {
-    /**
-     * Note, the Google One Bar will also display a blurb at the top if the
-     * user is signed in with a G Suite account. It does this using the
-     * hosted domain property of the Google Sign-in User object.
-     * https://developers.google.com/identity/sign-in/web/reference#googleusergethosteddomain
-     *
-     * I don't think this data is made available by Firebase auth so we don't
-     * implement this feature.
-     */
-    return html`
-      <div class="w-profile-dialog">
-        <div class="w-profile-dialog__user">
-          <div class="w-profile-dialog__photo-container">
-            <img class="w-profile-dialog__photo" src="${this.user.photoURL}" />
-          </div>
-          <div class="w-profile-dialog__details">
-            <div class="w-profile-dialog__name">
-              ${this.user.displayName}
-            </div>
-            <div class="w-profile-dialog__email">
-              ${this.user.email}
-            </div>
-            <a
-              class="w-profile-dialog__privacy"
-              href="https://myaccount.google.com/privacypolicy"
-              target="_blank"
-            >
-              Privacy
-            </a>
-            <a
-              class="w-profile-dialog__account"
-              href="https://myaccount.google.com"
-              target="_blank"
-            >
-              Google Account
-            </a>
-          </div>
-        </div>
-        <div class="w-profile-dialog__controls">
-          <button class="w-profile-dialog__button" @click="${signIn}">
-            Change accounts
-          </button>
-          <button class="w-profile-dialog__button" @click="${signOut}">
-            Sign out
-          </button>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('web-profile-switcher', ProfileSwitcher);
diff --git a/src/lib/components/ProfileSwitcherContainer/index.js b/src/lib/components/ProfileSwitcherContainer/index.js
deleted file mode 100644
index f40fc04a9fb..00000000000
--- a/src/lib/components/ProfileSwitcherContainer/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import {html} from 'lit-element';
-import {signIn} from '../../fb';
-import {BaseStateElement} from '../BaseStateElement';
-import '../ProfileSwitcher';
-
-/* eslint-disable require-jsdoc */
-class ProfileSwitcherContainer extends BaseStateElement {
-  static get properties() {
-    return {
-      checkingSignedInState: {type: Boolean},
-      isSignedIn: {type: Boolean},
-      user: {type: Object},
-    };
-  }
-
-  render() {
-    if (this.isSignedIn) {
-      // nb. web-profile-switcher allows a null user
-      return html`
-        <web-profile-switcher .user="${this.user}"></web-profile-switcher>
-      `;
-    }
-
-    return html`
-      <button
-        class="w-profile-signin"
-        .disabled=${this.checkingSignedInState}
-        @click="${signIn}"
-      >
-        Sign in
-      </button>
-    `;
-  }
-
-  onStateChanged({checkingSignedInState, isSignedIn, user}) {
-    this.checkingSignedInState = checkingSignedInState;
-    this.isSignedIn = isSignedIn;
-    this.user = user;
-  }
-}
-
-customElements.define(
-  'web-profile-switcher-container',
-  ProfileSwitcherContainer,
-);
diff --git a/src/lib/components/ProgressBar/_styles.scss b/src/lib/components/ProgressBar/_styles.scss
deleted file mode 100644
index 728f6f9a145..00000000000
--- a/src/lib/components/ProgressBar/_styles.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import '../../../styles/settings/colors';
-
-// animate transforms instead of left/right
-@keyframes indeterminate {
-  0% { left: -35%; right: 100%; }
-  60% { left: 100%; right: -90%; }
-  100% { left: 100%; right: -90%; }
-}
-
-web-progress-bar {
-  display: block;
-}
-
-.web-progress-bar-wrapper {
-  position: relative;
-  height: 4px;
-  display: block;
-  width: 100%;
-  background-color: transparentize($WEB_EXTENDED_TERTIARY_COLOR, .8);
-  border-radius: 2px;
-  overflow: hidden;
-  contain: strict;
-}
-
-.web-progress-bar-indeterminate {
-  background-color: $WEB_EXTENDED_TERTIARY_COLOR;
-}
-
-.web-progress-bar-indeterminate::before {
-  content: '';
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 3px;
-  bottom: 0;
-  will-change: left, right;
-  animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
-}
-
-.web-progress-bar-indeterminate::after {
-  content: '';
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
-  animation-delay: 1.15s;
-}
\ No newline at end of file
diff --git a/src/lib/components/ProgressBar/index.js b/src/lib/components/ProgressBar/index.js
deleted file mode 100644
index b176f12265a..00000000000
--- a/src/lib/components/ProgressBar/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * @fileoverview An indeterminate progress bar.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-/**
- * An indeterminate progress bar.
- * @extends {BaseElement}
- * @final
- */
-class ProgressBar extends BaseElement {
-  render() {
-    return html`
-      <div class="web-progress-bar-wrapper">
-        <div class="web-progress-bar-indeterminate"></div>
-      </div>
-    `;
-  }
-
-  firstUpdated() {
-    this.setAttribute('role', 'progressbar');
-  }
-}
-
-customElements.define('web-progress-bar', ProgressBar);
diff --git a/src/lib/components/ResponseMultipleChoice/_styles.scss b/src/lib/components/ResponseMultipleChoice/_styles.scss
deleted file mode 100644
index a4d0e67a243..00000000000
--- a/src/lib/components/ResponseMultipleChoice/_styles.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-// Applies self-assessment color scheme to radio buttons and checkboxes.
-// Needs specificity of web-response-mc to override default SelectGroup styles.
-web-response-mc {
-  .web-response-mc__selector {
-    border-color: $SELF_ASSESSMENT_PRIMARY_COLOR;
-  }
-
-  input[type='radio'] ~ .web-response-mc__selector::after {
-    border-color: $SELF_ASSESSMENT_PRIMARY_COLOR;
-  }
-
-  @include hover() {
-    .web-response-mc__option:hover .web-response-mc__selector::before,
-    .web-response-mc__input:focus ~ .web-response-mc__selector::before {
-      background: $SELF_ASSESSMENT_HOVER_COLOR;
-    }
-  }
-
-  .web-response-mc__option:active .web-response-mc__selector::before {
-    background: $SELF_ASSESSMENT_ACTIVE_COLOR;
-  }
-
-  input[type='checkbox']:checked ~ .web-response-mc__selector {
-    background: $SELF_ASSESSMENT_PRIMARY_COLOR;
-  }
-}
-
-// Style multiple-choice options when the question is complete
-// or the option has been submitted.
-[state=completed] .web-response-mc__option,
-.web-response-mc__option[data-submitted] {
-  align-items: flex-start;
-  justify-self: stretch;
-  padding: 1rem 1rem 1.5rem;
-}
-
-[state=completed] .web-response-mc__input[disabled] ~ .web-response-mc__selector {
-  background: $GREY_600;
-  border-color: $GREY_600;
-  transition: none;
-}
-
-.web-select-group__option[data-submitted] .web-response-mc__input ~ .web-response-mc__selector {
-  background: $SELF_ASSESSMENT_INCORRECT_COLOR !important;
-  border-color: $SELF_ASSESSMENT_INCORRECT_COLOR !important;
-  transition: none;
-}
-
-// This uses $SUCCESS_COLOR because it shows success and so should be
-// independent of the self-assessment color scheme.
-.web-select-group__option[data-submitted][data-correct] .web-response-mc__input ~ .web-response-mc__selector {
-  background: $SUCCESS_COLOR !important;
-  border-color: $SUCCESS_COLOR !important;
-  transition: none;
-}
-
-// Prevent selector states from appearing when the question is complete
-// or an option has been submitted.
-[state=completed] .web-response-mc__selector::before,
-.web-select-group__option[data-submitted] .web-response-mc__selector::before {
-  background: none !important;
-}
-
-// Override default SelectGroup radio button checked states.
-[state=completed] .web-response-mc__input ~ .web-response-mc__selector::after,
-.web-select-group__option[data-submitted] .web-response-mc__input ~ .web-response-mc__selector::after {
-  border: 0;
-  content: 'remove';
-  height: initial;
-  transform: initial;
-  transition: none;
-  width: initial;
-}
-
-.web-select-group__option[data-submitted] .web-response-mc__input ~ .web-response-mc__selector::after {
-  content: 'clear';
-}
-
-.web-select-group__option[data-submitted][data-correct] .web-response-mc__input ~ .web-response-mc__selector::after {
-  content: 'check';
-}
-
-// Override disabled state when the question is complete
-// or the option has been submitted
-// so it's fully visible and allows text selection.
-[state=completed] .web-select-group__option[disabled],
-.web-select-group__option[data-submitted][disabled] {
-  pointer-events: auto;
-}
-
-[state=completed] .web-select-group__option[disabled] .web-select-group__option-content,
-.web-select-group__option[data-submitted][disabled] .web-select-group__option-content {
-  opacity: 1;
-}
diff --git a/src/lib/components/ResponseMultipleChoice/index.js b/src/lib/components/ResponseMultipleChoice/index.js
index 6054676e711..bf5cb899eeb 100644
--- a/src/lib/components/ResponseMultipleChoice/index.js
+++ b/src/lib/components/ResponseMultipleChoice/index.js
@@ -1,15 +1,15 @@
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseResponseElement} from '../BaseResponseElement';
-import './_styles.scss';
 import {generateIdSalt} from '../../utils/generate-salt';
 
-/* eslint-disable require-jsdoc */
-class ResponseMultipleChoice extends BaseResponseElement {
+export class ResponseMultipleChoice extends BaseResponseElement {
   static get properties() {
     return {
       id: {type: String, reflect: true},
       cardinality: {type: String}, // Allows a range, so it's a string
       columns: {type: Boolean},
+      state: {type: String, reflect: true},
+      correctAnswer: {attribute: 'correct-answer', type: String},
     };
   }
 
@@ -22,6 +22,8 @@ class ResponseMultipleChoice extends BaseResponseElement {
     this.minSelections = null;
     this.maxSelections = null;
     this.selectType = null;
+    this.cardinality = null;
+    this.columns = false;
 
     this.onOptionInput = this.onOptionInput.bind(this);
     this.deselectOption = this.deselectOption.bind(this);
@@ -122,7 +124,7 @@ class ResponseMultipleChoice extends BaseResponseElement {
     } else {
       flag.textContent = 'Incorrect';
     }
-    content.prepend(flag);
+    content.append(flag);
     rationale.className = 'web-response__option-rationale';
     content.append(rationale);
 
@@ -139,11 +141,15 @@ class ResponseMultipleChoice extends BaseResponseElement {
 
   onOptionInput(e) {
     this.updateSelections(e);
-    this.enforceCardinality(e);
+    this.enforceCardinality();
   }
 
+  /**
+   *
+   * @param {WMouseEvent<HTMLInputElement>} e
+   */
   onOptionClick(e) {
-    const {target} = /** @type {!HTMLInputElement} */ (e);
+    const target = e.target;
     const index = Number(target.value);
 
     const ce = new CustomEvent('question-option-select', {
diff --git a/src/lib/components/ResponseThinkAndCheck/_styles.scss b/src/lib/components/ResponseThinkAndCheck/_styles.scss
deleted file mode 100644
index c99e22bf5cc..00000000000
--- a/src/lib/components/ResponseThinkAndCheck/_styles.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-[state=completed] .web-response-tac__option-rationale {
-  @include w-body-text();
-  background: rgba($SUCCESS_COLOR, .08);
-  border-radius: $GLOBAL_RADIUS;
-  color: $PRIMARY_TEXT_COLOR;
-  display: block;
-  line-height: 1.778 !important; // Override w-body-text mixin
-  padding: 1.125rem;
-}
diff --git a/src/lib/components/ResponseThinkAndCheck/index.js b/src/lib/components/ResponseThinkAndCheck/index.js
index 3ec84824db3..17a35a08bb4 100644
--- a/src/lib/components/ResponseThinkAndCheck/index.js
+++ b/src/lib/components/ResponseThinkAndCheck/index.js
@@ -1,9 +1,7 @@
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseResponseElement} from '../BaseResponseElement';
-import './_styles.scss';
 
-/* eslint-disable require-jsdoc */
-class ResponseThinkAndCheck extends BaseResponseElement {
+export class ResponseThinkAndCheck extends BaseResponseElement {
   constructor() {
     super();
     this.prerenderedChildren = null;
diff --git a/src/lib/components/ScrollSpy/index.js b/src/lib/components/ScrollSpy/index.js
new file mode 100644
index 00000000000..176154d7230
--- /dev/null
+++ b/src/lib/components/ScrollSpy/index.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the Licenspe.
+ */
+
+import {BaseElement} from '../BaseElement';
+
+/**
+ * Element that adds active classes to its children when the user scrolls to
+ * a heading this child points to.
+ * @extends {BaseElement}
+ * @final
+ */
+class ScrollSpy extends BaseElement {
+  constructor() {
+    super();
+    this.scrollSpy = this.scrollSpy.bind(this);
+    this.tocActiveClass = 'scroll-spy__active';
+    this.tocVisibleClass = 'scroll-spy__visible';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.articleContent = document.querySelector('main');
+
+    if (!this.articleContent) {
+      return;
+    }
+
+    this.headings = this.articleContent.querySelectorAll(
+      'h1[id], h2[id], h3[id]',
+    );
+
+    this.observer = new IntersectionObserver(this.scrollSpy, {
+      rootMargin: '0px 0px -80% 0px',
+    });
+    this.headings.forEach((heading) => this.observer.observe(heading));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer.disconnect();
+  }
+
+  scrollSpy(headings) {
+    const links = new Map(
+      [...this.querySelectorAll('a')].map((l) => [l.getAttribute('href'), l]),
+    );
+    for (const heading of headings) {
+      const href = `#${heading.target.getAttribute('id')}`;
+      const link = links.get(href);
+
+      if (link) {
+        if (heading.intersectionRatio > 0) {
+          link.classList.add(this.tocVisibleClass);
+          this.previouslyActiveHeading = heading.target.getAttribute('id');
+        } else {
+          link.classList.remove(this.tocVisibleClass);
+        }
+      }
+
+      const firstVisibleLink = this.querySelector(`.${this.tocVisibleClass}`);
+
+      links.forEach((link) => {
+        link.classList.remove(this.tocActiveClass, this.tocVisibleClass);
+      });
+
+      if (firstVisibleLink) {
+        firstVisibleLink.classList.add(this.tocActiveClass);
+      }
+
+      if (!firstVisibleLink && this.previouslyActiveHeading) {
+        const last = this.querySelector(
+          `a[href="#${this.previouslyActiveHeading}"]`,
+        );
+        last.classList.add(this.tocActiveClass);
+      }
+    }
+  }
+}
+
+customElements.define('web-scroll-spy', ScrollSpy);
diff --git a/src/lib/components/Search/_styles.scss b/src/lib/components/Search/_styles.scss
deleted file mode 100644
index 0952f4905c8..00000000000
--- a/src/lib/components/Search/_styles.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/tools/mixins';
-
-// This represent the margin from the surrounding elements which needs to
-// be factored in when we're calculating the final width and translate
-// position for this element's expanded state.
-$WEB_SEARCH_MARGIN: 16px;
-
-// This accounts for the width of the close button which we display on mobile.
-// We need to offset the results popout by this amount so it doesn't appear
-// to extend past the search input field.
-$WEB_CLOSE_BUTTON_WIDTH: 45px;
-
-web-search {
-  --web-search-animation-time: 0;
-
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: flex-end;
-  min-width: 50%;
-
-  @include bp(md) {
-    --web-search-animation-time: 200ms;
-    justify-content: flex-start;
-  }
-
-  .web-search__close-btn {
-    display: none;
-    margin-left: 8px;
-    text-overflow: initial;
-  }
-
-  .web-search__open-btn,
-  .web-search__close-btn {
-    border-radius: 0;
-    border: none;
-    box-shadow: none;
-    color: $GREY_700;
-    cursor: pointer;
-    padding: 0 8px;
-    transition: none;
-    background: transparent;
-
-    @include bp(md) {
-      display: none;
-    }
-  }
-
-  .web-search__open-btn:focus,
-  .web-search__open-btn:hover,
-  .web-search__close-btn:focus,
-  .web-search__close-btn:hover {
-    background: transparent;
-  }
-
-  .web-search__open-btn.focus-visible,
-  .web-search__close-btn.focus-visible {
-    // Use an inset box-shadow to draw the focus ring so we don't get weird
-    // clipping because we're adjacent to another element.
-    box-shadow: inset 0 0 0 1px $WEB_SECONDARY_COLOR;
-    outline: none;
-  }
-
-  .web-search__input-wrapper {
-    align-items: center;
-    background: $WHITE;  // This visually hides the top nav links when open
-    color: $GREY_700;
-    display: none;
-    height: 100%;
-    width: 100%;
-
-    @include bp(md) {
-      display: flex;
-      max-width: calc(200% - #{$WEB_SEARCH_MARGIN} * 2);
-      min-width: calc(200% - #{$WEB_SEARCH_MARGIN} * 2);
-      // Display a minimum of 200px of search bar.
-      transform: translateX(calc(50% - 200px + #{$WEB_SEARCH_MARGIN}));
-      transition: var(--web-search-animation-time) transform;
-      width: calc(200% - #{$WEB_SEARCH_MARGIN} * 2);
-    }
-
-    .web-search__search-icon {
-      left: 8px;
-      position: absolute;
-    }
-  }
-
-  .web-search__search-icon,
-  .web-search__close-icon {
-    fill: $GREY_600;
-  }
-
-  .web-search__input {
-    background: #F1F3F4;
-    border: none;
-    padding: 8px 8px 8px 40px;
-    width: 100%;
-    font: inherit;
-    font-size: 16px;
-    line-height: 20px;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $WEB_SECONDARY_COLOR;
-    }
-  }
-
-  .web-search-popout {
-    background: white;
-    border-top: 1px solid #ddd;
-    box-shadow: 0 1px 2px 0 rgba($GREY_800,.3), 0 2px 6px 2px rgba($GREY_800,.15);
-    left: 0;
-    padding: 16px 0;
-    position: absolute;
-    top: 55px;
-    width: calc(100% - #{$WEB_CLOSE_BUTTON_WIDTH});
-    
-    @include bp(md) {
-      left: calc(#{$WEB_SEARCH_MARGIN} * 2);
-      width: calc(100% - #{$WEB_SEARCH_MARGIN} * 2);
-    }
-  }
-
-  .web-search-popout__heading {
-    color: $GREY_700;
-    font-size: 12px;
-    padding: 0 24px;
-  }
-
-  .web-search-popout__list {
-    list-style: none;
-    max-height: 50vh;
-    overflow: scroll;
-  }
-
-  .web-search-popout__link {
-    color: $PRIMARY_TEXT_COLOR;
-    display: block;
-    padding: 8px 24px;
-  }
-
-  .web-search-popout__link:hover,
-  .web-search-popout__link--active {
-    background: $GREY_200;
-  }
-}
-
-web-search[expanded] {
-  .web-search__open-btn {
-    display: none;
-  }
-
-  .web-search__input-wrapper {
-    display: flex;
-
-    @include bp(md) {
-      transform: translate(calc(-50% + #{$WEB_SEARCH_MARGIN}));
-    }
-  }
-
-  .web-search__close-btn {
-    display: inline-flex;
-    align-items: center;
-
-    @include bp(md) {
-      display: none;
-    }
-  }
-}
diff --git a/src/lib/components/Search/index.js b/src/lib/components/Search/index.js
index 18f29b8c84d..2f02fc31cb8 100644
--- a/src/lib/components/Search/index.js
+++ b/src/lib/components/Search/index.js
@@ -2,30 +2,39 @@
  * @fileoverview An Algolia search box.
  */
 
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
+import {html} from 'lit';
+import {BaseStateElement} from '../BaseStateElement';
 import {store} from '../../store';
-import * as router from '../../utils/router';
 import {debounce} from '../../utils/debounce';
-import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser';
-import {trackError} from '../../analytics';
-import 'focus-visible';
-import './_styles.scss';
+import {logError} from '../../analytics';
 
-// Create an algolia client so we can get search results.
-// These keys are safe to be public.
-const applicationID = '2JPAZHQ6K7';
-const apiKey = '01ca870a3f1cad9984ed72419a12577c';
-const indexName = 'webdev';
-const client = algoliasearch(applicationID, apiKey);
-const index = client.initIndex(indexName);
+let algoliaIndexPromise;
+
+function loadAlgoliaLibrary() {
+  algoliaIndexPromise = algoliaIndexPromise || internalLoadAlgoliaLibrary();
+  return algoliaIndexPromise;
+}
+
+async function internalLoadAlgoliaLibrary() {
+  const {default: algoliasearch} = await import(
+    'algoliasearch/dist/algoliasearch-lite.esm.browser'
+  );
+  // Create an algolia client so we can get search results.
+  // These keys are safe to be public.
+  const applicationID = '2JPAZHQ6K7';
+  const apiKey = 'ac32acde5503ed0ab18332e0592e9919';
+  const indexName = 'prod_web_dev';
+  const client = algoliasearch(applicationID, apiKey);
+  const index = client.initIndex(indexName);
+  return index;
+}
 
 /**
  * An Algolia search box.
- * @extends {BaseElement}
+ * @extends {BaseStateElement}
  * @final
  */
-class Search extends BaseElement {
+class Search extends BaseStateElement {
   static get properties() {
     return {
       // Manages the expanded/collapsed state of the UI.
@@ -34,9 +43,14 @@ class Search extends BaseElement {
       hits: {type: Object},
       // Manages showing/hiding the search results popout.
       showHits: {type: Boolean},
-      // Indicates which search result should be highlighted in the popout.
-      // Primarily used for keyboard behavior.
-      cursor: {type: Number},
+      // Locale to use for search
+      locale: {type: String},
+      // Search query
+      query: {type: String},
+      // Tag to filter the search results by.
+      tag: {type: String},
+      // Translations for strings displayed by this component
+      i18n: {type: Object},
     };
   }
 
@@ -44,10 +58,13 @@ class Search extends BaseElement {
     super();
     this.hits = [];
     this.showHits = false;
-    this.cursor = -1;
     this.query = '';
-    this.timeout = 0;
+    this.tag = '';
+    this.timeout;
     this.expanded = false;
+    this.locale = 'en';
+    this.resultsEl;
+    this.i18n = {};
 
     // On smaller screens we don't do an animation so it's ok for us to fire off
     // actions immediately. On larger screens we need to wait for the searchbox
@@ -59,25 +76,58 @@ class Search extends BaseElement {
     // Debounce the method we use to search Algolia so we don't waste calls
     // while the user is typing.
     this.search = debounce(this.search.bind(this), 200);
+
+    this.onResultSelect = this.onResultSelect.bind(this);
+  }
+
+  onStateChanged({currentLanguage}) {
+    this.locale = currentLanguage;
   }
 
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener('resize', this.onResize);
     this.onResize();
+    // Note: We only check for the existence of the resultsEl here in
+    // connectedCalback. This means if the resultsEl is added later, or
+    // if the JavaScript for the search component is inlined into the head,
+    // then this will run _before_ resultsEl exists.
+    this.resultsEl = document.getElementById(this.getAttribute('results-id'));
+    if (this.resultsEl) {
+      // ts requires us to cast the event listener if it's handling custom
+      // events.
+      // https://github.com/Microsoft/TypeScript/issues/28357
+      this.resultsEl.addEventListener(
+        'resultselect',
+        /** @type {EventListener} */ (this.onResultSelect),
+      );
+    } else {
+      console.warn(`No search results element found for ${this}`);
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener('resize', this.onResize);
+    if (this.resultsEl) {
+      this.resultsEl.removeEventListener(
+        'resultselect',
+        /** @type {EventListener} */ (this.onResultSelect),
+      );
+    }
   }
 
   render() {
+    const i18n = this.i18n;
+    const locale = this.locale;
+    const placeholder = i18n.search[locale] || i18n.search['en'];
+    const open_search = i18n.open_search[locale] || i18n.open_search['en'];
+    const all_articles = i18n.all_articles[locale] || i18n.all_articles['en'];
     return html`
       <button
-        class="web-search__open-btn"
+        class="web-search__open-btn icon-button color-mid-text"
         @click="${this.onOpenSearch}"
-        aria-label="Open search"
+        aria-label="${open_search}"
       >
         <svg
           class="web-search__search-icon"
@@ -96,163 +146,46 @@ class Search extends BaseElement {
         class="web-search__input-wrapper"
         role="combobox"
         aria-expanded="${this.expanded}"
-        aria-owns="web-search-popout__list"
+        aria-controls="web-search__input"
+        aria-owns="${this.resultsEl.id}-list"
         aria-haspopup="listbox"
       >
-        <svg
-          class="web-search__search-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"
-          aria-hidden="true"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-          />
-        </svg>
         <input
+          id="web-search__input"
           class="web-search__input"
           type="text"
           role="searchbox"
           autocomplete="off"
           aria-autocomplete="list"
-          aria-controls="web-search-popout__list"
-          aria-label="All articles"
-          placeholder="Search"
+          aria-controls="${this.resultsEl.id}-list"
+          aria-label="${all_articles}"
+          placeholder="${placeholder}"
           @keydown="${this.onKeyDown}"
           @input="${this.onInput}"
           @focusin="${this.onFocusIn}"
           @focusout="${this.onFocusOut}"
         />
       </div>
-      <button
-        @click="${this.onCloseSearch}"
-        class="web-search__close-btn"
-        aria-label="Close search"
-      >
-        <svg
-          class="web-search__close-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-          />
-        </svg>
-      </button>
-      ${this.hitsTemplate}
     `;
   }
 
-  /* eslint-disable indent */
-  get hitsTemplate() {
-    if (!this.showHits) {
-      return html`
-        <div
-          id="web-search-popout__list"
-          role="listbox"
-          aria-hidden="true"
-        ></div>
-      `;
-    }
-
-    if (!this.hits.length) {
-      if (!this.query) {
-        return '';
-      }
-
-      // This is intentionally NOT "site:web.dev", as users can have a broader
-      // result set that way. We tend to come up first regardless.
-      const query = 'web.dev ' + this.query.trim();
-      const searchUrl =
-        'https://google.com/search?q=' + window.encodeURIComponent(query);
-      return html`
-        <div class="web-search-popout">
-          <div class="web-search-popout__heading">
-            There are no suggestions for your query&mdash;try
-            <a
-              data-category="web.dev"
-              data-label="search, open Google"
-              data-action="click"
-              target="_blank"
-              tabindex="-1"
-              href=${searchUrl}
-            >
-              Google search
-            </a>
-          </div>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="web-search-popout">
-        <div class="web-search-popout__heading">Pages</div>
-        <ul
-          id="web-search-popout__list"
-          class="web-search-popout__list"
-          role="listbox"
-        >
-          ${this.itemsTemplate}
-        </ul>
-      </div>
-    `;
-  }
-
-  get itemsTemplate() {
-    // Note that our anchors have tabindex=-1 to prevent them from
-    // being focused.
-    // This is intentional because focus needs to stay in the input field.
-    // When the user is pressing arrow keys, we use a virtual cursor and
-    // aria-activedescendant to indicate the active anchor.
-    return this.hits.map(
-      (hit, idx) => html`
-        <li class="web-search-popout__item">
-          <a
-            id="web-search-popout__link--${idx}"
-            class="web-search-popout__link ${idx === this.cursor
-              ? 'web-search-popout__link--active'
-              : ''}"
-            aria-selected="${idx === this.cursor}"
-            tabindex="-1"
-            href="${hit.url}"
-            >${hit.title}</a
-          >
-        </li>
-      `,
-    );
-  }
-  /* eslint-enable indent */
-
   firstUpdated() {
+    /** @type HTMLInputElement */
     this.inputEl = this.renderRoot.querySelector('.web-search__input');
   }
 
   /**
-   * Keep track of cursor changes and reflect them to aria-activedescendant.
-   * This ensures screen readers properly announce the current search result.
-   * We do this because focus never leaves the search input box, so when the
-   * user is arrowing through results, we have to tell the screen reader about
-   * it.
+   * Passes on updated search properties to the search results element.
    * @param {Map} changedProperties A Map of LitElement properties that changed.
    */
   updated(changedProperties) {
-    if (!changedProperties.has('cursor')) {
-      return;
-    }
-
-    if (this.cursor === -1) {
-      this.inputEl.removeAttribute('aria-activedescendant');
-      return;
-    }
-
-    this.inputEl.setAttribute(
-      'aria-activedescendant',
-      `web-search-popout__link--${this.cursor}`,
-    );
+    // Reflect changed properties to the results el.
+    const sharedProperties = ['query', 'hits', 'showHits'];
+    sharedProperties.forEach((property) => {
+      if (changedProperties.has(property)) {
+        this.resultsEl[property] = this[property];
+      }
+    });
   }
 
   /**
@@ -266,42 +199,42 @@ class Search extends BaseElement {
     this.animationTime = parseInt(value, 10);
   }
 
+  /**
+   * Keep track of which result is selected in the search results element and
+   * reflect them to aria-activedescendant.
+   * This ensures screen readers properly announce the current search result.
+   * We do this because focus never leaves the search input box, so when the
+   * user is arrowing through results, we have to tell the screen reader about
+   * it.
+   * @param {CustomEvent} event Select event fired by search results element.
+   */
+  onResultSelect(event) {
+    const selected = event.detail.selected;
+    if (!selected || !selected.id) {
+      this.inputEl.removeAttribute('aria-activedescendant');
+      return;
+    }
+    this.inputEl.setAttribute('aria-activedescendant', selected.id);
+  }
+
   onKeyDown(e) {
+    const navigationKeys = [
+      'Home',
+      'End',
+      'Up',
+      'ArrowUp',
+      'Down',
+      'ArrowDown',
+      'Enter',
+    ];
     // Check if the user is navigating within the search popout.
-    switch (e.key) {
-      case 'Home':
-        e.preventDefault();
-        this.firstHit();
-        return;
-
-      case 'End':
-        e.preventDefault();
-        this.lastHit();
-        return;
-
-      case 'Up': // IE/Edge specific value
-      case 'ArrowUp':
-        e.preventDefault();
-        this.prevHit();
-        return;
-
-      case 'Down': // IE/Edge specific value
-      case 'ArrowDown':
-        e.preventDefault();
-        this.nextHit();
-        return;
-
-      case 'Enter':
-        const hit = this.hits[this.cursor];
-        if (hit) {
-          this.navigateToHit(hit);
-        }
-        return;
-
-      case 'Esc': // IE/Edge specific value
-      case 'Escape':
-        document.activeElement.blur();
-        return;
+    if (navigationKeys.includes(e.key)) {
+      e.preventDefault();
+      /** @type {WebSearchResults} */ (this.resultsEl).navigate(e.key);
+    }
+    if (['Esc', 'Escape'].includes(e.key)) {
+      /** @type HTMLElement */ (document.activeElement).blur();
+      return;
     }
   }
 
@@ -325,92 +258,56 @@ class Search extends BaseElement {
       return;
     }
     try {
-      const {hits} = await index.search(query, {hitsPerPage: 10});
+      const index = await loadAlgoliaLibrary();
+      const settings = {
+        hitsPerPage: 10,
+        attributesToHighlight: ['title'],
+        attributesToRetrieve: ['url', 'parentTitle'],
+        highlightPreTag: '<strong>',
+        highlightPostTag: '</strong>',
+        facetFilters: [`locales:${this.locale}`],
+        attributesToSnippet: ['content:20'],
+        snippetEllipsisText: '...',
+      };
+      if (this.tag) {
+        settings.facetFilters.push(`tags:${this.tag}`);
+      }
+      const {hits} = await index.search(query, settings);
       if (this.query === query) {
         this.hits = hits;
       }
     } catch (err) {
       console.error(err);
       console.error(err.debugData);
-      trackError('search', err);
+      logError(err, 'search');
     }
   }
 
-  firstHit() {
-    this.cursor = 0;
-    this.scrollHitIntoView();
-  }
-
-  lastHit() {
-    this.cursor = this.hits.length - 1;
-    this.scrollHitIntoView();
-  }
-
-  nextHit() {
-    this.cursor = (this.cursor + 1) % this.hits.length;
-    this.scrollHitIntoView();
-  }
-
-  prevHit() {
-    if (this.cursor === -1) {
-      this.cursor = this.hits.length - 1;
-    } else {
-      this.cursor = (this.cursor - 1 + this.hits.length) % this.hits.length;
-    }
-    this.scrollHitIntoView();
-  }
-
-  /**
-   * Waits for LitElement to render, then attempts to scroll the current active
-   * link into view. This is done because focus never leaves the input field
-   * since the user may still be typing their query. As a result, we need to
-   * tell the browser to scroll if the user has arrowed down to a hit that has
-   * overflown the container.
-   */
-  scrollHitIntoView() {
-    this.requestUpdate().then(() => {
-      this.renderRoot
-        .querySelector('.web-search-popout__link--active')
-        .scrollIntoView();
-    });
-  }
-
-  /**
-   * Tells the router to navigate to the specified URL.
-   * Because this closes the search box, it has the side effect of blurring
-   * focus.
-   * @param {{url:string}} url A URL data object.
-   */
-  navigateToHit({url}) {
-    router.route(url);
-    document.activeElement.blur();
-  }
-
   /**
    * Empty out the search field.
    */
   clear() {
     this.inputEl.value = '';
+    this.inputEl.removeAttribute('aria-activedescendant');
     this.query = '';
   }
 
   /**
    * Expand the search box.
-   * Only used on mobile viewports where we hide the search box behind an icon.
    */
   onOpenSearch() {
     this.expanded = true;
     // Set state here even though it'll happen again during onFocusIn.
     // If we wait until onFocusIn the animation has a bit of jank to it.
     store.setState({isSearchExpanded: true});
-    this.requestUpdate().then(() => {
+    this.requestUpdate();
+    this.updateComplete.then(() => {
       this.inputEl.focus();
     });
   }
 
   /**
    * Collapse the search box.
-   * Only used on mobile viewports.
    */
   onCloseSearch() {
     this.expanded = false;
@@ -420,18 +317,12 @@ class Search extends BaseElement {
    * Animate the search box open.
    */
   onFocusIn() {
+    loadAlgoliaLibrary().catch((err) => {
+      console.error('failed to load Algolia', err);
+      logError(err, 'algolia load');
+    });
     this.expanded = true;
 
-    // Collapse the search box if the user scrolls while the seach box is
-    // focused.
-    window.addEventListener(
-      'scroll',
-      () => {
-        document.activeElement.blur();
-      },
-      {passive: true, once: true},
-    );
-
     // Wait for the expanding animation to finish before hiding the header
     // links and allowing overflow content.
     // Keep a reference to the timeout in case the user tabs out quickly.
@@ -452,8 +343,8 @@ class Search extends BaseElement {
     // on. If so, programatically click it before closing the popout.
     // Because focusout fires before click, if we try to wait for the click
     // event (~10's of ms later) then lit will have already deleted the link.
-    const {relatedTarget} = e;
-    if (relatedTarget && this.contains(relatedTarget)) {
+    const relatedTarget = /** @type HTMLElement */ (e.relatedTarget);
+    if (relatedTarget && this.resultsEl.contains(relatedTarget)) {
       relatedTarget.click();
     }
 
@@ -466,7 +357,6 @@ class Search extends BaseElement {
     this.expanded = false;
     this.showHits = false;
     this.hits = [];
-    this.cursor = -1;
     this.clear();
   }
 }
diff --git a/src/lib/components/SearchResults/index.js b/src/lib/components/SearchResults/index.js
new file mode 100644
index 00000000000..e09519a7a2c
--- /dev/null
+++ b/src/lib/components/SearchResults/index.js
@@ -0,0 +1,215 @@
+/**
+ * @fileoverview An Algolia search box.
+ */
+
+import {html} from 'lit';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {BaseElement} from '../BaseElement';
+import {allowHtml, escapeHtml} from '../../../lib/utils/escape-html';
+
+/**
+ * An Algolia search box.
+ * @extends {BaseElement}
+ * @final
+ */
+export class SearchResults extends BaseElement {
+  static get properties() {
+    return {
+      // An array of algolia results.
+      hits: {type: Object},
+      // An internal array of algolia results (observable).
+      hits_: {type: Object},
+      // Manages showing/hiding the search results element.
+      showHits: {type: Boolean},
+      // Indicates which search result should be highlighted.
+      // Primarily used for keyboard behavior.
+      cursor: {type: Number},
+    };
+  }
+
+  constructor() {
+    super();
+    this.hits = [];
+    this.hits_ = [];
+    this.showHits = false;
+    this.cursor = -1;
+    this.query = '';
+  }
+
+  set hits(hits) {
+    this.hits_ = hits;
+    this.cursor = -1;
+  }
+
+  /**
+   * Allows to select and navigate to a search result using keyboard keys.
+   * @param {String} key Key identifier
+   */
+  navigate(key) {
+    switch (key) {
+      case 'Home':
+        this.firstHit();
+        return;
+
+      case 'End':
+        this.lastHit();
+        return;
+
+      case 'Up': // IE/Edge specific value
+      case 'ArrowUp':
+        this.prevHit();
+        return;
+
+      case 'Down': // IE/Edge specific value
+      case 'ArrowDown':
+        this.nextHit();
+        return;
+
+      case 'Enter':
+        const hit = this.hits_[this.cursor];
+        if (hit) {
+          this.navigateToHit(hit);
+        }
+        return;
+    }
+  }
+
+  firstHit() {
+    this.cursor = 0;
+    this.scrollHitIntoView();
+  }
+
+  lastHit() {
+    this.cursor = this.hits_.length - 1;
+    this.scrollHitIntoView();
+  }
+
+  nextHit() {
+    this.cursor = (this.cursor + 1) % this.hits_.length;
+    this.scrollHitIntoView();
+  }
+
+  prevHit() {
+    if (this.cursor === -1) {
+      this.cursor = this.hits_.length - 1;
+    } else {
+      this.cursor = (this.cursor - 1 + this.hits_.length) % this.hits_.length;
+    }
+    this.scrollHitIntoView();
+  }
+
+  /**
+   * Waits for LitElement to render, then attempts to scroll the current active
+   * link into view. This is done because focus never leaves the input field
+   * since the user may still be typing their query. As a result, we need to
+   * tell the browser to scroll if the user has arrowed down to a hit that has
+   * overflown the container.
+   */
+  scrollHitIntoView() {
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const selected = this.renderRoot.querySelector('[aria-selected="true"]');
+      selected.scrollIntoView({block: 'nearest'});
+      this.dispatchEvent(new CustomEvent('resultselect', {detail: {selected}}));
+    });
+  }
+
+  /**
+   * Tells the page to navigate to the url.
+   * @param {{url:string}} url A URL data object.
+   */
+  navigateToHit({url}) {
+    window.location.href = url;
+  }
+
+  /* eslint-disable indent */
+  render() {
+    if (!this.showHits) {
+      return html`
+        <div id="${this.id}-list" role="listbox" aria-hidden="true"></div>
+      `;
+    }
+
+    if (!this.hits_.length) {
+      if (!this.query) {
+        return '';
+      }
+
+      // This is intentionally NOT "site:web.dev", as users can have a broader
+      // result set that way. We tend to come up first regardless.
+      const query = 'web.dev ' + this.query.trim();
+      const searchUrl =
+        'https://google.com/search?q=' + window.encodeURIComponent(query);
+      return html`
+        <div class="web-search-popout">
+          <div class="web-search-popout__heading">
+            There are no suggestions for your query&mdash;try
+            <a
+              data-category="web.dev"
+              data-label="search, open Google"
+              data-action="click"
+              target="_blank"
+              tabindex="-1"
+              href=${searchUrl}
+            >
+              Google search
+            </a>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="web-search-popout over-scroll">
+        <ul id="${this.id}-list" class="stack-nav" aria-label="search results">
+          ${this.itemsTemplate}
+        </ul>
+      </div>
+    `;
+  }
+
+  get itemsTemplate() {
+    // Note that our anchors have tabindex=-1 to prevent them from
+    // being focused.
+    // This is intentional because focus needs to stay in the input field.
+    // When the user is pressing arrow keys, we use a virtual cursor and
+    // aria-activedescendant to indicate the active anchor.
+    return this.hits_.map((hit, idx) => {
+      if (!hit._highlightResult.title || !hit._highlightResult.title.value) {
+        return html``;
+      }
+
+      const title = this.formatAlgoliaValue(hit._highlightResult.title.value);
+      return html`
+        <li>
+          <a
+            id="${this.id}-link-${idx}"
+            aria-selected="${idx === this.cursor}"
+            tabindex="-1"
+            href="${hit.url}"
+          >
+            ${unsafeHTML(title)}
+            ${hit.parentTitle !== null
+              ? html`<div class="web-search-popout__parent-title">
+                  ${unsafeHTML(hit.parentTitle)}
+                </div>`
+              : ''}
+          </a>
+        </li>
+      `;
+    });
+  }
+
+  formatAlgoliaValue(value) {
+    // Escape any html entities in the title except for <strong> tags.
+    // Algolia sends back <strong> tags in the title which help highlight
+    // the characters that match what the user has typed.
+    value = allowHtml(escapeHtml(value), 'strong');
+    // Strip backticks as they look a bit ugly in the results.
+    return value.replace(/`/g, '');
+  }
+
+  /* eslint-enable indent */
+}
+
+customElements.define('web-search-results', SearchResults);
diff --git a/src/lib/components/SelectGroup/_styles.scss b/src/lib/components/SelectGroup/_styles.scss
deleted file mode 100644
index cbd57d20316..00000000000
--- a/src/lib/components/SelectGroup/_styles.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-.web-select-group {
-  border: 0; // Reset default fieldset style
-  margin: 1.5rem 0;
-  padding: 0; // Reset default fieldset style
-}
-
-.web-select-group__options-wrapper {
-  display: grid;
-  gap: 1em;
-  justify-items: start;
-}
-
-// Need the specificity to avoid affecting nested SelectGroups
-// (e.g., the AssessmentFeedbackForm selections in AssessmentQuestion).
-[columns] > fieldset > .web-select-group__options-wrapper {
-  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
-  justify-items: stretch;
-}
-
-.web-select-group__option {
-  @include w-article-text();
-  -webkit-tap-highlight-color: transparent;
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  line-height: 1.5 !important; // Override w-article-text mixin
-  margin: 0 !important; // Override w-article-text mixin
-  padding: 0 1rem;
-  position: relative;
-  z-index: 1; // Ensure selector states are always visible
-}
-
-// A standalone selector with no visible text label.
-.w-selectgroup__option--standalone {
-  justify-content: center;
-}
-
-.web-select-group__option[disabled] {
-  pointer-events: none;
-}
-
-.web-select-group__option-content {
-  transition: opacity .12s cubic-bezier(0, 0, .2, 1);
-}
-
-// Use opacity rather than changing the color
-// to account for image-based option content.
-.web-select-group__option[disabled] .web-select-group__option-content {
-  opacity: .5;
-}
-
-.web-select-group__input {
-  cursor: inherit;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-}
-
-// Style checkboxes.
-.web-select-group__selector {
-  align-items: center;
-  border: 2px solid $WEB_PRIMARY_COLOR;
-  border-radius: 2px;
-  display: inline-flex;
-  flex: 0 0 auto;
-  height: 18px;
-  justify-content: center;
-  margin: .4375rem 1.5625rem .4375rem .3125rem;
-  position: relative;
-  transition:
-    border .12s cubic-bezier(0, 0, .2, 1),
-    background .12s cubic-bezier(0, 0, .2, 1);
-  width: 18px;
-}
-
-.w-selectgroup__option--standalone ~ .w-selectgroup__selector {
-  margin: .4375rem;
-}
-
-// Style radio buttons.
-input[type='radio'] ~ .web-select-group__selector {
-  border-radius: $GLOBAL_ROUNDED;
-  height: 20px;
-  margin: .375rem 1.5rem .375rem .25rem;
-  width: 20px;
-}
-
-.w-selectgroup__option--standalone input[type='radio'] ~ .w-selectgroup__selector {
-  margin: .375rem;
-}
-
-// Handles hover, active, and focus states.
-.web-select-group__selector::before {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: $GLOBAL_ROUNDED;
-  content: '';
-  display: block;
-  height: 40px;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transition:
-    background .12s cubic-bezier(0, 0, .2, 1),
-    border .12s cubic-bezier(0, 0, .2, 1);
-  width: 40px;
-  z-index: -1; // Position behind the selector.
-}
-
-// Checkbox check
-.web-select-group__selector::after {
-  @include font-material-icon();
-  color: $WHITE;
-  content: '';
-  display: block;
-  font-size: 18px;
-}
-
-// Radio button dot
-input[type='radio'] ~ .web-select-group__selector::after {
-  border: 5px solid $WEB_PRIMARY_COLOR;
-  border-radius: $GLOBAL_ROUNDED;
-  height: 0;
-  transform: scale(0);
-  transition: transform .12s cubic-bezier(0, 0, .2, 1);
-  width: 0;
-}
-
-@include hover() {
-  .web-select-group__option:hover .web-select-group__selector::before,
-  .web-select-group__input:focus ~ .web-select-group__selector::before {
-    background: rgba(55, 64, 255, 0.11);
-  }
-}
-
-.web-select-group__option:active .web-select-group__selector::before {
-  background: rgba(55, 64, 255, 0.26);
-}
-
-.web-select-group__input:focus ~ .web-select-group__selector::before {
-  border-color: $FOCUS_COLOR;
-}
-
-.js-focus-visible .web-select-group__input:focus:not(.focus-visible) ~ .web-select-group__selector::before {
-  border-color: transparent;
-}
-
-input[type='radio']:checked ~ .web-select-group__selector::after {
-  transform: scale(1);
-}
-
-input[type='checkbox']:checked ~ .web-select-group__selector {
-  background: $WEB_PRIMARY_COLOR;
-}
-
-input[type='checkbox']:checked ~ .web-select-group__selector::after {
-  content: 'check';
-}
-
-.web-select-group__input[disabled] ~ .web-select-group__selector {
-  border-color: $GREY_400;
-}
-
-input[type='checkbox'][disabled]:checked ~ .web-select-group__selector {
-  background: $GREY_400;
-}
-
-.web-select-group__input[disabled] ~ .web-select-group__selector::after {
-  border-color: $GREY_400;
-}
diff --git a/src/lib/components/SelectGroup/index.js b/src/lib/components/SelectGroup/index.js
index 082f50f56de..74b54bf1cf3 100644
--- a/src/lib/components/SelectGroup/index.js
+++ b/src/lib/components/SelectGroup/index.js
@@ -1,8 +1,6 @@
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
 import {generateIdSalt} from '../../utils/generate-salt';
-import 'focus-visible';
-import './_styles.scss';
 
 /**
  * Element that renders a radio group or checkbox group.
@@ -22,6 +20,9 @@ class SelectGroup extends BaseElement {
     super();
     this.idSalt = generateIdSalt('web-select-group-');
     this.selectors = null;
+    this.type = null;
+    this.prefix = null;
+    this.columns = false;
   }
 
   render() {
@@ -41,12 +42,10 @@ class SelectGroup extends BaseElement {
 
     return html`
       <fieldset
-        class="web-select-group ${this.prefix}"
+        class="web-select-group flow ${this.prefix}"
         ?columns="${this.columns}"
       >
-        <div class="web-select-group__options-wrapper">
-          ${this.selectors}
-        </div>
+        <div class="web-select-group__options-wrapper">${this.selectors}</div>
       </fieldset>
     `;
   }
@@ -76,9 +75,7 @@ class SelectGroup extends BaseElement {
           value="${i}"
         />
         <span class="web-select-group__selector ${selectorClass}"></span>
-        <span class="web-select-group__option-content">
-          ${content}
-        </span>
+        <span class="web-select-group__option-content">${content}</span>
       </label>
     `;
   }
diff --git a/src/lib/components/ShareAction/_styles.scss b/src/lib/components/ShareAction/_styles.scss
new file mode 100644
index 00000000000..01918c7a8ea
--- /dev/null
+++ b/src/lib/components/ShareAction/_styles.scss
@@ -0,0 +1,17 @@
+share-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  cursor: pointer;
+  color: var(--color-mid-text);
+
+  &:hover {
+    filter: invert(0.05);
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+    transform: translateY(-0.05ex); // optical adjustment
+  }
+}
diff --git a/src/lib/components/ShareAction/index.js b/src/lib/components/ShareAction/index.js
index d422b2d9bee..54e30259219 100644
--- a/src/lib/components/ShareAction/index.js
+++ b/src/lib/components/ShareAction/index.js
@@ -4,11 +4,13 @@
 
 import {isWebShareSupported} from '../../utils/web-share';
 
+import './_styles.scss';
+
 /**
  * Renders share element. This simply adds behavaior to share, and does not
  * render any HTML.
  *
- * @extends {BaseElement}
+ * @extends {HTMLElement}
  * @final
  */
 class ShareAction extends HTMLElement {
@@ -41,7 +43,7 @@ class ShareAction extends HTMLElement {
     url.searchParams.set('url', this.shareUrl);
     url.searchParams.set('text', this.shareText);
     e.preventDefault();
-    window.open(url, 'share-twitter', 'width=550,height=235');
+    window.open(url.toString(), 'share-twitter', 'width=550,height=235');
   }
 
   get shareUrl() {
diff --git a/src/lib/components/SideNav/_styles.scss b/src/lib/components/SideNav/_styles.scss
deleted file mode 100644
index c76cfec2ccc..00000000000
--- a/src/lib/components/SideNav/_styles.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- *
- * Copyright 2019 Google Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/global';
-@import '../../../styles/tools/breakpoints';
-@import '../../../styles/tools/mixins';
-
-body.web-side-nav--expanded {
-  overflow: hidden;
-}
-
-web-side-nav {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 300;
-}
-
-// Prevent FOUC by hiding children until after firstUpdated(), as children are
-// reparented within .web-side-nav__container before use
-// This isn't ":not(:defined)" because firstUpdated occurs after a frame.
-web-side-nav.unresolved * {
-  display: none !important;
-}
-
-web-side-nav::before {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba($BLACK, .4);
-  opacity: 0;
-  will-change: opacity;
-  transition: opacity $TRANSITION_SPEED cubic-bezier(.4, 0, .2, 1);
-}
-
-web-side-nav[expanded] {
-  pointer-events: auto;
-  visibility: visible;
-}
-
-web-side-nav[expanded]::before {
-  opacity: 1;
-}
-
-.web-side-nav__container {
-  position: relative;
-  width: 90%;
-  max-width: 268px;
-  background: $WHITE;
-  height: 100%;
-  box-shadow: 2px 0 12px rgba($BLACK, .4);
-  transform: translateX(-110%);
-  display: flex;
-  flex-direction: column;
-  will-change: transform;
-}
-
-web-side-nav[expanded] .web-side-nav__container {
-  transform: none;
-}
-
-web-side-nav[animatable] .web-side-nav__container {
-  transition: transform $TRANSITION_SPEED cubic-bezier(.4, 0, .2, 1);
-}
-
-web-side-nav[expanded][animatable] .web-side-nav__container {
-  transition: transform $TRANSITION_SPEED cubic-bezier(.4, 0, .2, 1);
-}
-
-.web-side-nav__header {
-  align-items: center;
-  display: flex;
-  padding: 16px;
-  border-bottom: 1px solid $GREY_300;
-}
-
-.web-side-nav__logo {
-  height: 30px;
-  width: 125px;
-}
-
-.web-side-nav__hide {
-  height: 2.75rem;
-  margin: 0 10px 0 -6px;
-  width: 2.75rem;
-}
-
-.web-side-nav__hide::before {
-  @include font-material-icon();
-  content: 'close';
-}
-
-.web-side-nav__content {
-  padding-top: 32px;
-  flex: 1;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.web-side-nav__link {
-  border-bottom: 1px solid $GREY_300;
-  color: $GREY_700;
-  font-size: 14px;
-  font-weight: 500;
-  padding: 16px 24px;
-
-  &[active] {
-    -webkit-box-shadow: 0 -2px 0 $WEB_PRIMARY_COLOR inset;
-    box-shadow: 0 -2px 0 $WEB_PRIMARY_COLOR inset;
-  }
-}
-
-.web-side-nav__link:hover,
-.web-side-nav__link:focus,
-.web-side-nav__link:active {
-  text-decoration: none;
-  outline: 0;
-}
-
-.web-side-nav__link:hover {
-  background-color: rgba($PRIMARY_TEXT_COLOR, .04);
-}
-
-.web-side-nav__link:focus {
-  background-color: rgba($PRIMARY_TEXT_COLOR, .12);
-}
-
-.web-side-nav__link:active {
-  background-color: rgba($PRIMARY_TEXT_COLOR, .16);
-}
-
-.web-side-nav__link[data-active] {
-  color: $WEB_PRIMARY_COLOR;
-}
diff --git a/src/lib/components/SideNav/index.js b/src/lib/components/SideNav/index.js
deleted file mode 100644
index cf198f37b40..00000000000
--- a/src/lib/components/SideNav/index.js
+++ /dev/null
@@ -1,260 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import {store} from '../../store';
-import 'wicg-inert';
-import {collapseSideNav} from '../../actions';
-import './_styles.scss';
-
-class SideNav extends BaseElement {
-  static get properties() {
-    return {
-      animatable: {type: Boolean, reflect: true},
-      expanded: {type: Boolean, reflect: true},
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.inert = true;
-    this.animatable = false;
-    this.expanded_ = false;
-    this.startX_ = 0;
-    this.currentX_ = 0;
-    this.touchingSideNav_ = false;
-    this.prerenderedChildren_ = null;
-
-    this.onCloseSideNav = this.onCloseSideNav.bind(this);
-    this.onTouchStart = this.onTouchStart.bind(this);
-    this.onTouchMove = this.onTouchMove.bind(this);
-    this.onTouchEnd = this.onTouchEnd.bind(this);
-    this.onTransitionEnd = this.onTransitionEnd.bind(this);
-    this.drag = this.drag.bind(this);
-    this.onStateChanged = this.onStateChanged.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
-  }
-
-  render() {
-    if (!this.prerenderedChildren_) {
-      this.prerenderedChildren_ = [];
-      for (const child of this.children) {
-        this.prerenderedChildren_.push(child);
-      }
-    }
-    return html`
-      <nav @click="${this.onBlockClicks}" class="web-side-nav__container">
-        <div class="web-side-nav__header">
-          <button
-            @click="${this.onCloseSideNav}"
-            data-icon="close"
-            class="w-button--icon w-button--round web-side-nav__hide"
-            aria-label="Close"
-          >
-            <span class="w-tooltip">Close</span>
-          </button>
-          <a
-            href="/"
-            class="gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Site logo"
-          >
-            <img
-              class="web-side-nav__logo"
-              src="/images/lockup.svg"
-              alt="web.dev"
-            />
-          </a>
-        </div>
-        ${this.prerenderedChildren_}
-      </nav>
-    `;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.tabIndex = -1;
-    store.subscribe(this.onStateChanged);
-  }
-
-  firstUpdated() {
-    this.sideNavContainerEl = this.querySelector('.web-side-nav__container');
-    this.addEventListeners();
-    this.onStateChanged();
-    this.classList.remove('unresolved');
-  }
-
-  addEventListeners() {
-    this.addEventListener('click', this.onCloseSideNav);
-    this.addEventListener('touchstart', this.onTouchStart, {passive: true});
-    this.addEventListener('touchmove', this.onTouchMove, {passive: true});
-    this.addEventListener('touchend', this.onTouchEnd);
-  }
-
-  onStateChanged({currentUrl} = {}) {
-    const {isSideNavExpanded} = store.getState();
-    if (isSideNavExpanded === this.expanded) {
-      return;
-    }
-
-    this.expanded = isSideNavExpanded;
-    if (currentUrl) {
-      // Ensure that the "active" attribute is applied to any matching header
-      // link, or to none (for random subpages or articles).
-      currentUrl = currentUrl.replace(/"/g, '\\"');
-      currentUrl = (currentUrl.match(/^\/\w+\//) || [''])[0];
-
-      const active = this.querySelector('[active]');
-      const updated = this.querySelector(`[href="${currentUrl}"]`);
-
-      if (active === updated) {
-        return;
-      }
-
-      if (active) {
-        active.removeAttribute('active');
-        active.removeAttribute('aria-current');
-      }
-
-      if (updated) {
-        updated.setAttribute('active', '');
-        updated.setAttribute('aria-current', 'page');
-      }
-    }
-  }
-
-  onTouchStart(e) {
-    if (!this.expanded) {
-      return;
-    }
-
-    this.startX_ = e.touches[0].pageX;
-    this.currentX_ = this.startX_;
-
-    this.touchingSideNav_ = true;
-    requestAnimationFrame(this.drag);
-  }
-
-  onTouchMove(e) {
-    if (!this.touchingSideNav_) {
-      return;
-    }
-
-    this.currentX_ = e.touches[0].pageX;
-  }
-
-  onTouchEnd() {
-    if (!this.touchingSideNav_) {
-      return;
-    }
-
-    this.touchingSideNav_ = false;
-
-    const translateX = Math.min(0, this.currentX_ - this.startX_);
-    this.sideNavContainerEl.style.transform = '';
-
-    if (translateX < 0) {
-      this.onCloseSideNav();
-    }
-  }
-
-  drag() {
-    if (!this.touchingSideNav_) {
-      return;
-    }
-
-    requestAnimationFrame(this.drag);
-
-    const translateX = Math.min(0, this.currentX_ - this.startX_);
-    this.sideNavContainerEl.style.transform = `translateX(${translateX}px)`;
-  }
-
-  onBlockClicks(e) {
-    // When the SideNav is expanded we use a ::before element to render the
-    // overlay. Because the ::before element is a child of SideNav, and covers
-    // the entire page, we add a listener to SideNav to see if it was clicked
-    // on.
-    // If a link within the SideNav was clicked, we allow the click to happen so
-    // the router can know about it.
-    // If the SideNav's .web-side-nav__container was clicked, we block the click
-    // so the SideNav won't collapse.
-    // If the click was outside of the container/on the overlay, we close the
-    // SideNav.
-    const link = e.target.closest('a');
-    if (!link) {
-      e.stopPropagation();
-    }
-  }
-
-  onTransitionEnd() {
-    this.animatable = false;
-    // If the SideNav is expanded we need to move focus into the element so
-    // folks using a screen reader or switch can access it.
-    if (this.expanded_) {
-      this.focus();
-    } else {
-      // When the SideNav is collapsed, we need to restore focus to the
-      // hamburger button in the header. It might be more techincally pure to
-      // use a unistore action for this, but it feels like a lot of ceremony
-      // for a small behavior.
-      document.querySelector('web-header').manageFocus();
-    }
-    this.inert = !this.expanded_;
-  }
-
-  onCloseSideNav() {
-    // It's important to call the closeSideNav() action here instead of just
-    // setting expanded = false.
-    // The closeSideNav() action will inform other page elements that they
-    // should un-inert themselves.
-    collapseSideNav();
-  }
-
-  onKeyUp(e) {
-    if (e.key === 'Escape') {
-      collapseSideNav();
-      document.removeEventListener('keyup', this.onKeyUp);
-    }
-  }
-
-  set expanded(val) {
-    if (this.expanded_ === val) {
-      return;
-    }
-
-    const oldVal = this.expanded_;
-    this.expanded_ = val;
-    this.animatable = true;
-    if (this.expanded_) {
-      document.addEventListener('keyup', this.onKeyUp);
-    }
-    this.addEventListener('transitionend', this.onTransitionEnd, {once: true});
-    this.requestUpdate('expanded', oldVal);
-  }
-
-  get expanded() {
-    return this.expanded_;
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    store.unsubscribe(this.onStateChanged);
-  }
-}
-
-customElements.define('web-side-nav', SideNav);
diff --git a/src/lib/components/SigninButton/index.js b/src/lib/components/SigninButton/index.js
index dd09ab673c2..dfc7b5067e9 100644
--- a/src/lib/components/SigninButton/index.js
+++ b/src/lib/components/SigninButton/index.js
@@ -1,4 +1,4 @@
-import {html} from 'lit-element';
+import {html, nothing} from 'lit';
 import {signIn} from '../../fb';
 import {BaseStateElement} from '../BaseStateElement';
 import './_styles.scss';
@@ -14,8 +14,7 @@ class SigninButton extends BaseStateElement {
 
   render() {
     if (this.isSignedIn) {
-      // lit-element ignores "" (prior to 2.2.2), so return an empty template.
-      return html``;
+      return nothing;
     }
 
     // We don't set "disabled" attribute on the <button> based on this, because
@@ -25,13 +24,13 @@ class SigninButton extends BaseStateElement {
     return html`
       <button
         @click=${action}
-        class="w-button w-button--secondary lh-signin-button gc-analytics-event"
+        class="button lh-signin-button gc-analytics-event"
+        data-type="secondary"
         data-category="web.dev"
         data-label="measure, big sign-in"
         data-action="click"
       >
         <svg
-          class="w-mr--sm"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 0 48 48"
diff --git a/src/lib/components/Snackbar/_styles.scss b/src/lib/components/Snackbar/_styles.scss
deleted file mode 100644
index 7a7fb894a99..00000000000
--- a/src/lib/components/Snackbar/_styles.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/global';
-@import '../../../styles/tools/breakpoints';
-
-web-snackbar {
-  align-items: center;
-  display: flex;
-  visibility: hidden;
-
-  .web-snackbar__surface {
-    align-items: center;
-    background-color: $GREY_900;
-    display: flex;
-    justify-content: flex-start;
-    opacity: 0;
-    transform: scale(.8);
-    width: 100vw;
-
-    @include bp(sm) {
-      border-radius: $GLOBAL_RADIUS;
-      box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2),
-                  0 6px 10px 0 rgba(0, 0, 0, .14),
-                  0 1px 18px 0 rgba(0, 0, 0, .12);
-      min-width: 344px;
-    }
-
-    @include bp(md) {
-      max-width: 400px;
-    }
-  }
-
-  .web-snackbar__label {
-    color: rgba($WHITE, .87);
-    font-size: .875rem;
-    padding: 14px 16px;
-  }
-
-  .web-snackbar__actions {
-    margin-left: 0;
-    margin-right: 8px;
-    display: flex;
-    align-items: center;
-  }
-
-  .web-snackbar__action {
-    font-size: .875rem;
-    color: $WEB_SECONDARY_COLOR;
-    height: auto;
-  }
-
-  .web-snackbar__action:hover,
-  .web-snackbar__action:focus,
-  .web-snackbar__action:active {
-    box-shadow: none;
-  }
-
-  .web-snackbar__action:hover {
-    background: rgba($WEB_SECONDARY_COLOR, .08);
-  }
-
-  .web-snackbar__action:focus {
-    background: rgba($WEB_SECONDARY_COLOR, .12);
-  }
-
-  .web-snackbar__action:active {
-    background: rgba($WEB_SECONDARY_COLOR, .16);
-  }
-
-  .web-snackbar__action + .web-snackbar__action {
-    margin-left: 8px;
-  }
-}
-
-web-snackbar[open] {
-  visibility: visible;
-
-  .web-snackbar__surface {
-    transform: scale(1);
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-// Opening animation
-web-snackbar[open][animatable] {
-  .web-snackbar__surface {
-    transition: opacity 150ms cubic-bezier(0, 0, .2, 1),
-                transform 150ms cubic-bezier(0, 0, .2, 1);
-  }
-}
-
-// Closing animation
-web-snackbar[animatable] {
-  visibility: visible;
-
-  .web-snackbar__surface {
-    transition: opacity 75ms cubic-bezier(.4, 0, 1, 1),
-                transform 75ms cubic-bezier(0, 0, .2, 1);
-  }
-}
-
-web-snackbar[stacked] {
-  .web-snackbar__surface {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .web-snackbar__actions {
-    align-self: flex-end;
-    margin-bottom: 8px;
-  }
-}
diff --git a/src/lib/components/Snackbar/index.js b/src/lib/components/Snackbar/index.js
index 6ec01535484..bf67c77fecc 100644
--- a/src/lib/components/Snackbar/index.js
+++ b/src/lib/components/Snackbar/index.js
@@ -18,9 +18,8 @@
  * @fileoverview A Material snackbar for showing notifications.
  */
 
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
-import './_styles.scss';
 
 const OPENING_ANIMATION_TIME = 150;
 const CLOSING_ANIMATION_TIME = 75;
@@ -31,10 +30,18 @@ class Snackbar extends BaseElement {
       animatable: {type: Boolean, reflect: true},
       stacked: {type: Boolean, reflect: true},
       type: {type: String},
-      action: {type: Object}, // action is a Function
+      onAccept: {type: Object}, // onAccept is a Function
+      onReject: {type: Object}, // onReject is a Function
     };
   }
 
+  constructor() {
+    super();
+    this.onAccept = null;
+    this.onReject = null;
+    this.type = null;
+  }
+
   get open() {
     return this.hasAttribute('open');
   }
@@ -56,18 +63,19 @@ class Snackbar extends BaseElement {
   get cookiesTemplate() {
     return html`
       <div class="web-snackbar__label" role="status">
-        We serve cookies on this site to analyze traffic, remember your
-        preferences, and optimize your experience.
+        web.dev uses cookies to deliver and enhance the quality of its services
+        and to analyze traffic. If you agree, cookies are also used to serve
+        advertising and to personalize the content and advertisements that you
+        see.
+        <a href="https://policies.google.com/technologies/cookies">
+          Learn more.
+        </a>
       </div>
-      <div class="web-snackbar__actions">
-        <a
-          href="https://policies.google.com/technologies/cookies"
-          class="w-button web-snackbar__action"
-          >More details</a
-        >
-        <button @click=${this.action} class="w-button web-snackbar__action">
-          OK
+      <div class="web-snackbar__actions cluster gutter-base">
+        <button @click=${this.onAccept} class="button button--action">
+          Agree
         </button>
+        <button @click=${this.onReject} class="button">No thanks</button>
       </div>
     `;
   }
@@ -82,11 +90,7 @@ class Snackbar extends BaseElement {
         break;
     }
 
-    return html`
-      <div class="web-snackbar__surface">
-        ${template}
-      </div>
-    `;
+    return html` <div class="web-snackbar__surface flow">${template}</div> `;
   }
 }
 
diff --git a/src/lib/components/SnackbarContainer/_styles.scss b/src/lib/components/SnackbarContainer/_styles.scss
deleted file mode 100644
index 8fd44593b3a..00000000000
--- a/src/lib/components/SnackbarContainer/_styles.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '../../../styles/tools/mixins';
-
-web-snackbar-container {
-  bottom: 0;
-  display: block;
-  left: 0;
-  margin: 0;
-  pointer-events: none;
-  position: fixed;
-  right: 0;
-  z-index: 300;
-
-  @include bp(sm) {
-    margin: 8px;
-  }
-}
diff --git a/src/lib/components/SnackbarContainer/index.js b/src/lib/components/SnackbarContainer/index.js
index 71b7b3cbfad..2da66454dcf 100644
--- a/src/lib/components/SnackbarContainer/index.js
+++ b/src/lib/components/SnackbarContainer/index.js
@@ -18,12 +18,15 @@
  * @fileoverview A Snackbar container for handling Redux state and actions.
  */
 
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
 import {store} from '../../store';
-import {setUserAcceptsCookies, checkIfUserAcceptsCookies} from '../../actions';
+import {
+  setUserAcceptsCookies,
+  setUserRejectsCookies,
+  checkIfUserAcceptsCookies,
+} from '../../actions';
 import '../Snackbar';
-import './_styles.scss';
 
 class SnackbarContainer extends BaseElement {
   static get properties() {
@@ -58,7 +61,7 @@ class SnackbarContainer extends BaseElement {
   }
 
   onBeforeInstallPrompt(e) {
-    if (!this.acceptedCookies) {
+    if (!this.cookiePreference) {
       e.preventDefault();
     }
   }
@@ -67,15 +70,17 @@ class SnackbarContainer extends BaseElement {
     const state = store.getState();
     this.open = state.showingSnackbar;
     this.type = state.snackbarType;
-    this.acceptedCookies = state.userAcceptsCookies;
+    this.cookiePreference = state.cookiePreference;
   }
 
   render() {
-    let action;
+    let onAccept;
+    let onReject;
     let isStacked;
     switch (this.type) {
       case 'cookies':
-        action = setUserAcceptsCookies;
+        onAccept = setUserAcceptsCookies;
+        onReject = setUserRejectsCookies;
         isStacked = true;
         break;
       default:
@@ -84,10 +89,11 @@ class SnackbarContainer extends BaseElement {
 
     return html`
       <web-snackbar
-        .type=${this.type}
-        .open=${this.open}
-        .stacked=${isStacked}
-        .action="${action}"
+        .type="${this.type}"
+        .open="${this.open}"
+        .stacked="${isStacked}"
+        .onAccept="${onAccept}"
+        .onReject="${onReject}"
       ></web-snackbar>
     `;
   }
diff --git a/src/lib/components/SparklineChart/_styles.scss b/src/lib/components/SparklineChart/_styles.scss
deleted file mode 100644
index bd8afbee16a..00000000000
--- a/src/lib/components/SparklineChart/_styles.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '../../../styles/settings/colors';
-
-@keyframes sparkline-dash-animation {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-web-sparkline-chart {
-  display: block;
-  height: 100px;
-
-  &:focus {
-    // Note: Focus style should be applied to the parent element using
-    // :focus-within.
-    outline: none;
-  }
-
-  .sl-outer {
-    position: absolute;  // w/h is set explicitly, need this otherwise we hold it
-  }
-
-  .path.dashed {
-    stroke-linecap: round;
-    stroke-width: 1;
-    stroke-dasharray: 4;
-    stroke-dashoffset: 0;
-    stop-color: $GREY_500;
-    stroke: $GREY_500;
-  }
-
-  .result--fail {
-    stroke: $FAIL_COLOR;
-    stop-color: $FAIL_COLOR;
-    fill: $FAIL_COLOR;
-    stroke-width: 2;
-  }
-
-  .result--average {
-    stroke: $AVERAGE_COLOR;
-    stop-color: $AVERAGE_COLOR;
-    fill: $AVERAGE_COLOR;
-    stroke-width: 2;
-  }
-
-  .result--pass {
-    stroke: $PASS_COLOR;
-    stop-color: $PASS_COLOR;
-    fill: $PASS_COLOR;
-    stroke-width: 2;
-  }
-
-  .sl-caption {
-    z-index: 100;
-    position: relative;
-
-    rect {
-      stroke-width: 0;
-    }
-  }
-
-  .sl-caption--value {
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  .sl-caption--date {
-    font-size: 12px;
-    stroke-width: 0 !important;
-    fill: $GREY_500;
-  }
-
-  svg {
-    pointer-events: none;  // otherwise mouseout generates events for every part of SVG
-    display: block;
-  }
-
-  .sl-cursor {
-    stroke-linecap: round;
-  }
-
-  .path {
-    stroke-linecap: round;
-  }
-
-  .gradient {
-    transition: opacity 600ms ease-in-out;
-    opacity: 0;
-  }
-
-  .gradient.fadein {
-    opacity: 1;
-  }
-
-  .sr-announcer {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/components/SparklineChart/index.js b/src/lib/components/SparklineChart/index.js
deleted file mode 100644
index e1070641bc1..00000000000
--- a/src/lib/components/SparklineChart/index.js
+++ /dev/null
@@ -1,582 +0,0 @@
-/**
- * @fileoverview Element that renders data as a spark line.
- */
-
-import {html, svg} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-const HAS_RESIZE_OBSERVER = typeof ResizeObserver === 'function';
-
-/**
- * @typedef {{
- *   x: number,
- *   y: number,
- *   score: number,
- *   date: string,
- * }}
- */
-let DataPoint; // eslint-disable-line no-unused-vars
-
-/**
- * @typedef {{
- *   points: string,
- *   lastPoint: {x: number, y: number},
- *   firstPoint: {x: number, y: number},
- *   color: string,
- * }}
- */
-let PathPart; // eslint-disable-line no-unused-vars
-
-/**
- * @param {number} val to round
- * @return {number} number rounded to two decimals
- */
-function clampTo2Decimals(val) {
-  return Math.round(val * 100) / 100;
-}
-
-/**
- * Render a sparkline.
- * @extends {BaseElement}
- * @final
- */
-class SparklineChart extends BaseElement {
-  static get properties() {
-    return {
-      fill: {type: Boolean},
-      values: {type: Object},
-      medians: {type: Object},
-
-      // TODO(robdodson): make these all --var?
-      topPadding: {type: Number}, // top padding to prevent catching popup
-      circleRadius: {type: Number}, // configurable circle radius
-      strokeWidth: {type: Number}, // width of SVG stroke
-
-      demo: {type: Boolean},
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.topPadding = 20;
-    this.circleRadius = 3;
-    this.strokeWidth = 2;
-
-    // private, updated in render() by calling getBoundingClientRect
-    this.width_ = 0;
-    this.height_ = 0;
-
-    // cursor selection, causes non-render() changes
-    this.point_ = null;
-
-    // elements stolen from renderRoot
-    this.cursorElement_ = null;
-    this.scoreElement_ = null;
-    this.announcerElement_ = null;
-    this.scoreValueText_ = null;
-    this.scoreDateText_ = null;
-
-    // processed points from values that allow mouse focus
-    this.datapoints = [];
-
-    // bind so this can be added/removed from a global handler
-    this.onResize = this.onResize.bind(this);
-
-    if (HAS_RESIZE_OBSERVER) {
-      // We rely on our user ensuring that <web-sparkline-chart> has size.
-      const ro = new ResizeObserver(this.onResize);
-      ro.observe(this);
-    }
-  }
-
-  set demo(demo) {
-    this.demo_ = demo;
-
-    if (demo) {
-      this.values = [
-        {score: 35, date: '2019-05-22'},
-        {score: 30, date: '2019-05-24'},
-        {score: 20, date: '2019-06-01'},
-        {score: 50, date: '2019-06-24'},
-        {score: 92, date: '2019-06-29'},
-        {score: 90, date: '2019-07-01'},
-      ];
-
-      this.medians = [{score: 89, date: '2019-06-24'}];
-    }
-  }
-
-  get demo() {
-    return this.demo_;
-  }
-
-  redrawPoint() {
-    if (!(this.cursorElement_ && this.scoreElement_)) {
-      return;
-    }
-
-    // Clear the point if it was drawn on the screen.
-    if (!this.point_) {
-      this.cursorElement_.setAttribute('x1', -10000);
-      this.cursorElement_.setAttribute('x2', -10000);
-      this.scoreElement_.setAttribute('transform', 'translate(-10000,-10000)');
-      return;
-    }
-
-    // Draw the point on the screen.
-    this.cursorElement_.setAttribute('x1', this.point_.x);
-    this.cursorElement_.setAttribute('x2', this.point_.x);
-    this.cursorElement_.setAttribute('y1', this.point_.y);
-    this.cursorElement_.setAttribute('y2', this.height_);
-    const colorClass = this.computeColorClass_(this.point_.score);
-    this.cursorElement_.style.stroke = colorClass;
-    this.cursorElement_.classList.value = `sl-cursor result--${colorClass}`;
-
-    // Set text first, then measure.
-    this.scoreValueText_.textContent = this.point_.score;
-
-    const d = new Date(this.point_.date);
-    let dateText = '\u2014'; // em dash
-
-    if (d.getTime()) {
-      // d.getTime() is NaN/falsey if invalid
-      try {
-        dateText = new Intl.DateTimeFormat('en-US', {
-          day: 'numeric',
-          month: 'short',
-        }).format(d);
-      } catch (err) {
-        dateText = d.toLocaleDateString();
-      }
-    }
-    this.scoreDateText_.textContent = dateText;
-
-    const PADDING = 3;
-
-    const scoreHoverRectWidth = this.scoreElement_.getBoundingClientRect()
-      .width;
-    const x = Math.max(
-      PADDING,
-      Math.min(
-        this.width_ - scoreHoverRectWidth - 2 * PADDING,
-        this.point_.x - scoreHoverRectWidth / 2,
-      ),
-    );
-    const y = Math.max(
-      -1 * (this.height_ / 2),
-      Math.min(this.height_ / 2 - PADDING - 10, this.point_.y - 10),
-    );
-
-    // Position score/date centered on the hover card.
-    const scoreTextWidth = this.scoreValueText_.getBoundingClientRect().width;
-    const dateTextWidth = this.scoreDateText_.getBoundingClientRect().width;
-    this.scoreDateText_.setAttribute(
-      'x',
-      scoreHoverRectWidth / 2 - dateTextWidth / 2,
-    );
-    this.scoreValueText_.setAttribute(
-      'x',
-      scoreHoverRectWidth / 2 - scoreTextWidth / 2,
-    );
-    this.scoreElement_.setAttribute('transform', `translate(${x},${y})`);
-    this.scoreElement_.classList.value = `sl-caption result--${colorClass}`;
-  }
-
-  set point(point) {
-    if (this.point_ === point) {
-      return;
-    }
-
-    this.point_ = point;
-    if (point) {
-      const date = new Date(point.date).toLocaleDateString();
-      this.announce_(`Score ${point.score} on date ${date}`);
-    }
-    this.redrawPoint();
-  }
-
-  get point() {
-    return this.point_;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.setAttribute('aria-valuemin', 0);
-    this.setAttribute('aria-valuemax', 100);
-
-    this.setAttribute('role', 'group');
-    this.setAttribute(
-      'aria-label',
-      'scores over time. Use arrow keys to navigate',
-    );
-
-    if (!HAS_RESIZE_OBSERVER) {
-      window.addEventListener('resize', this.onResize);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    if (!HAS_RESIZE_OBSERVER) {
-      window.removeEventListener('resize', this.onResize);
-    }
-  }
-
-  /**
-   * As a mouse moves over this element, find and highlight the nearest point in the chart.
-   *
-   * @param {!Event} e
-   */
-  onMouseMove(e) {
-    // TODO(b/117590606): Make this work with touch events.
-    const mouseX = e.offsetX;
-
-    const nextDataPointIdx = this.datapoints.findIndex(
-      (entry) => entry.x >= mouseX,
-    );
-    const prevPoint = this.datapoints[nextDataPointIdx - 1];
-    const nextPoint = this.datapoints[nextDataPointIdx];
-
-    let point;
-    if (!nextPoint) {
-      point = this.datapoints[this.datapoints.length - 1];
-    } else if (!prevPoint) {
-      point = this.datapoints[0];
-    } else {
-      if (Math.abs(mouseX - prevPoint.x) <= Math.abs(mouseX - nextPoint.x)) {
-        point = prevPoint;
-      } else {
-        point = nextPoint;
-      }
-    }
-
-    this.point = point;
-  }
-
-  /**
-   * Allow keyboard navigation through points.
-   *
-   * @param {!Event} e
-   */
-  onKeyDown(e) {
-    switch (e.key) {
-      case 'Right':
-      case 'ArrowRight':
-        this.setNextPoint_();
-        break;
-
-      case 'Left':
-      case 'ArrowLeft':
-        this.setPrevPoint_();
-        break;
-
-      default:
-        return;
-    }
-
-    e.preventDefault();
-  }
-
-  /**
-   * Set the next point that should be drawn to the screen.
-   * @private
-   */
-  setNextPoint_() {
-    // Unless the user has focused on the last, this should always find a point
-    // as the disused cursor is hidden offscreen to the left.
-    const cursorX = this.cursorElement_.getAttribute('x1');
-    const nextPoint = this.datapoints.find((entry) => entry.x > cursorX);
-    if (nextPoint) {
-      this.point = nextPoint;
-    }
-  }
-
-  /**
-   * Set the previous point that should be drawn to the screen.
-   * @private
-   */
-  setPrevPoint_() {
-    const cursorX = +this.cursorElement_.getAttribute('x1');
-    const currentPointIdx = this.datapoints.findIndex(
-      (entry) => entry.x === cursorX,
-    );
-
-    const prevPoint =
-      currentPointIdx === -1
-        ? this.datapoints.slice(-1)[0]
-        : this.datapoints[currentPointIdx - 1];
-    if (prevPoint) {
-      this.point = prevPoint;
-    }
-  }
-
-  /**
-   * Clear the point due to blur or mouseout.
-   */
-  onClearPoint() {
-    this.point = null;
-  }
-
-  /**
-   * Announce content for screen readers using an ARIA live region.
-   * @private
-   * @param {string} msg
-   */
-  announce_(msg) {
-    this.announcerElement_.textContent = msg;
-    window.setTimeout(() => {
-      this.announcerElement_.textContent = '';
-    }, 100);
-  }
-
-  /**
-   * Calculate the data point y's value
-   * @param {number} score
-   * @return {number}
-   */
-  calculateY(score) {
-    const scoreRatio = Math.min(1, Math.max(score / 100, 0));
-    return (1 - scoreRatio) * this.height_;
-  }
-
-  /**
-   * Generates the line path from values.
-   * @param {?Array<!LighthouseScore>} values Values to generate a path from.
-   * @return {{datapoints: !Array<Object>, path: !Array<!PathPart>}}
-   * @private
-   */
-  processValues(values) {
-    if (!values || values.length === 0) {
-      // no values, failure case: just draw in the top-left corner
-      return {
-        datapoints: [],
-        paths: [
-          {
-            points: 'M0 0 L0 0',
-            firstPoint: {x: 0, y: 0},
-            lastPoint: {x: 0, y: 0},
-            color: '',
-          },
-        ],
-      };
-    }
-
-    // Regardless of how many values we have, each is interspersed by the same offset.
-    const offset =
-      values.length > 1 ? Math.floor(this.width_ / (values.length - 1)) : 0;
-
-    const datapoints = [];
-    const paths = [];
-
-    let points = `M0 ${this.calculateY(values[0].score).toFixed(2)}`;
-    let firstPoint = {x: NaN, y: NaN};
-    let lastPoint = {x: NaN, y: NaN};
-    let prevColor;
-
-    values.forEach((value, i) => {
-      const isFirstPoint = i === 0;
-      const isLastPoint = i === values.length - 1;
-
-      // if last point, use width (otherwise the clamp hides ~fractional pixels)
-      const x = isLastPoint ? this.width_ : i * offset;
-      const y = parseFloat(this.calculateY(value.score).toFixed(2));
-      const currColor = this.computeColorClass_(value.score);
-
-      if (isFirstPoint) {
-        firstPoint = {x, y};
-      } else if (prevColor !== currColor) {
-        paths.push({firstPoint, lastPoint, color: prevColor, points});
-        points = `M${lastPoint.x} ${lastPoint.y} L${lastPoint.x} ${lastPoint.y}`;
-        firstPoint = {x: lastPoint.x, y: lastPoint.y};
-      }
-
-      points += ` L${x} ${y}`;
-
-      if (isLastPoint) {
-        if (isFirstPoint) {
-          // if this graph only has one point, the fill needs to reset to far left
-          firstPoint.x = 0;
-        }
-        paths.push({firstPoint, lastPoint: {x, y}, color: currColor, points});
-      }
-
-      prevColor = currColor;
-      lastPoint = {x, y};
-
-      datapoints.push({
-        x,
-        y,
-        score: clampTo2Decimals(value.score),
-        date: value.date,
-      });
-    });
-
-    return {paths, datapoints};
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('fill') || changedProperties.has('values')) {
-      const gradients = this.renderRoot.getElementsByClassName('gradient');
-      for (const gradient of gradients) {
-        if (this.fill) {
-          gradient.classList.add('fadein');
-        } else {
-          gradient.classList.remove('fadein');
-        }
-      }
-    }
-  }
-
-  render() {
-    const rect = this.getBoundingClientRect();
-
-    // If the element hasn't yet had layout, then request a rerender a frame later.
-    if (!rect.width || !rect.height) {
-      window.requestAnimationFrame(() => this.requestUpdate());
-      // we can't bail early, as firstUpdated() still needs to steal rendered nodes
-    }
-
-    const pixelBuffer = this.circleRadius + this.strokeWidth / 2;
-
-    // Save width and height, padded by any requested buffer. This is needed for processValues()
-    // and showing the user's cursor.
-    // Align the SVG content by `pixelBuffer` on the top, left, and right sides. Add topPadding on
-    // the top, to allow the popup to be contained properly.
-    const groupTransform = `translate(${pixelBuffer},${
-      pixelBuffer + this.topPadding
-    })`;
-    this.width_ = rect.width - pixelBuffer * 2;
-    this.height_ = rect.height - pixelBuffer - this.topPadding;
-
-    const {paths, datapoints} = this.processValues(this.values);
-    this.datapoints = datapoints;
-
-    if (this.datapoints.length) {
-      this.setAttribute('aria-valuenow', this.datapoints.slice(-1)[0].score);
-    } else {
-      this.removeAttribute('aria-valuenow');
-    }
-
-    const lastDataPoint = paths[paths.length - 1] || null;
-
-    // Only render medians if there's actually a value contained here.
-    let medianPaths = '';
-    if (this.medians && this.medians.length) {
-      const {paths} = this.processValues(this.medians);
-      medianPaths = paths.map(({points}) => {
-        return svg`<path d="${points}" class="path dashed" />`;
-      });
-    }
-
-    const lastDataPointCircle = lastDataPoint
-      ? svg`
-      <circle
-        cx="${lastDataPoint.lastPoint.x}"
-        cy="${lastDataPoint.lastPoint.y}"
-        r="${this.circleRadius}"
-        stroke-width="${this.strokeWidth}"
-        class="result--${lastDataPoint.color}"
-        style="fill:#fff" />`
-      : '';
-
-    /* eslint-disable max-len,indent */
-    const innerSVG = svg`
-      <svg xmlns="http://www.w3.org/2000/svg"
-          width="100%" height="100%">
-        <defs>
-          <filter id="hover-shadow">
-            <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000"
-               flood-opacity="0.4"/>
-          </filter>
-          <linearGradient id="gradient-pass" x1="0" x2="0" y1="0" y2="1">
-            <stop offset="0" stop-color="rgb(24,182,99)" stop-opacity="0.2" />
-          </linearGradient>
-          <linearGradient id="gradient-average" x1="0" x2="0" y1="0" y2="1">
-            <stop offset="0" stop-color="rgb(251,140,0)" stop-opacity="0.2" />
-          </linearGradient>
-          <linearGradient id="gradient-fail" x1="0" x2="0" y1="0" y2="1">
-            <stop offset="0" stop-color="rgb(229,57,53)" stop-opacity="0.2" />
-          </linearGradient>
-        </defs>
-        <g transform="${groupTransform}">
-          ${paths.map(({firstPoint, points, color}) => {
-            // Ensures that each path segment's fill is complete.
-            const d = `${points} V ${this.height_} H ${firstPoint.x} Z`;
-            return svg`
-              <path class="gradient"
-                  d="${d}"
-                  fill="${this.fill ? `url(#gradient-${color})` : 'none'}" />
-              <path d="${points}" class="path result--${color}" style="fill:none" />
-            `;
-          })}
-          ${medianPaths}
-          <line class="sl-cursor"
-                x1="-10000" x2="-10000" y1="0" y2="${this.height_}" />
-          ${lastDataPointCircle}
-          <g class="sl-caption" transform="translate(-10000,-10000)" aria-hidden="true">
-            <rect width="50" height="40" fill="#fff" rx="2" ry="2"
-                  style="filter:url(#hover-shadow)"/>
-            <text class="sl-caption--value" stroke="none" x="25" y="18"></text>
-            <text class="sl-caption--date" stroke="none" x="3" y="32"></text>
-          </g>
-        </g>
-      </svg>`;
-
-    return html`
-      <div
-        style="width: ${rect.width}px; height: ${rect.height}px"
-        tabindex="0"
-        class="sl-outer"
-        @blur=${this.onClearPoint}
-        @mouseout=${this.onClearPoint}
-        @mousemove=${this.onMouseMove}
-        @keydown=${this.onKeyDown}
-      >
-        ${innerSVG}
-        <div aria-live="assertive" class="sr-announcer"></div>
-      </div>
-    `;
-  }
-
-  /**
-   * Determines Lighthouse pass/average/fail coloring based on value.
-   * @param {number} val
-   * @return {string}
-   * @private
-   */
-  computeColorClass_(val) {
-    // Match to Lighthouse rating. See https://goo.gl/Pz6xfR.
-    let result = 'fail';
-    if (val >= 90) {
-      result = 'pass';
-    } else if (val >= 50) {
-      result = 'average';
-    }
-    return result;
-  }
-
-  onResize() {
-    // When the browser window resizes, force a render to redraw the SVG.
-    this.requestUpdate().then(() => {
-      this.redrawPoint();
-    });
-  }
-
-  firstUpdated() {
-    this.cursorElement_ = this.renderRoot.querySelector('.sl-cursor');
-    this.scoreElement_ = this.renderRoot.querySelector('.sl-caption');
-    this.announcerElement_ = this.querySelector('.sr-announcer');
-    this.scoreValueText_ = this.scoreElement_.querySelector(
-      '.sl-caption--value',
-    );
-    this.scoreDateText_ = this.scoreElement_.querySelector('.sl-caption--date');
-  }
-}
-
-customElements.define('web-sparkline-chart', SparklineChart);
diff --git a/src/lib/components/Subscribe/_styles.scss b/src/lib/components/Subscribe/_styles.scss
deleted file mode 100644
index 91bdf5cd9fd..00000000000
--- a/src/lib/components/Subscribe/_styles.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-web-subscribe {
-  display: block;
-  width: 100%;
-}
diff --git a/src/lib/components/Subscribe/index.js b/src/lib/components/Subscribe/index.js
index b4b6637460b..a471e17f15d 100644
--- a/src/lib/components/Subscribe/index.js
+++ b/src/lib/components/Subscribe/index.js
@@ -3,8 +3,10 @@
  */
 
 import {BaseElement} from '../BaseElement';
-import {trackError, trackEvent} from '../../analytics';
-import './_styles.scss';
+import {logError, logEvent} from '../../analytics';
+
+const pTagSelector = '.subscribe__error__message';
+const hiddenClass = 'hidden-yes';
 
 /**
  * Element that renders newsletter subscription form.
@@ -23,26 +25,87 @@ class Subscribe extends BaseElement {
       'LU: Luxembourg',
       'NO: Norway',
     ];
-    this.robotName = 'is-it-just-me-or-was-this-form-filled-out-by-a-robot';
     this.processing = false;
     this.submitted = false;
     this.onError = this.onError.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.onSuccess = this.onSuccess.bind(this);
+    window['recaptchaSuccess'] = this.captchaCheck.bind(this);
+  }
+
+  /**
+   * Called by the IntersectionObserver defined in this#connectedCallback.
+   *
+   * @param {IntersectionObserverEntry[]} entries
+   */
+  onIntersection(entries) {
+    const entry = entries[0];
+    if (!entry.isIntersecting) {
+      return;
+    }
+
+    // can safely assume this.intersectionObserver is defined, since onIntersection is being called
+    this.intersectionObserver.disconnect();
+    window.recaptchaLoadCallback = () => {
+      /** @type {HTMLDivElement} */
+      const recaptchaContainerEl = this.querySelector('.g-recaptcha');
+      // fix for percy re-executing JavaScript with pre-rendered DOM
+      recaptchaContainerEl.children[0].remove();
+
+      window.grecaptcha.render(recaptchaContainerEl, {
+        sitekey: recaptchaContainerEl.dataset.sitekey,
+      });
+    };
+
+    window.loadScript(
+      'https://www.google.com/recaptcha/api.js?onload=recaptchaLoadCallback&render=explicit',
+    );
   }
 
   connectedCallback() {
+    if (!this.classList.contains('unresolved')) {
+      return;
+    }
+
     super.connectedCallback();
-    this.form = this.querySelector('.w-subscribe__form');
-    this.subscribeError = this.querySelector('.w-subscribe__error');
-    this.subscribeMessage = this.querySelector('.w-subscribe__message');
+    /** @type {HTMLFormElement} */
+    this.form = this.querySelector('form');
+    this.intersectionObserver = new IntersectionObserver((entries) =>
+      this.onIntersection(entries),
+    );
+
+    this.intersectionObserver.observe(this.form);
+
+    /** @type HTMLElement */
+    this.subscribeError = this.querySelector('.subscribe__error');
+    this.subscribeMessage = this.querySelector('.subscribe__message');
     this.submissionUrl = this.form.action;
+    if (!this.submissionUrl) {
+      console.warn(`No submission URL found for subscribe element.`);
+    }
+    // Prevent `form.submit()` from being called as it bypasses the event listener
+    this.form.submit = () =>
+      this.onError(new Error('Please fill out the form'));
     this.form.addEventListener('submit', this.onSubmit);
   }
 
   detachedCallback() {
-    super.detachedCallback();
     this.form.removeEventListener('submit', this.onSubmit);
+    window['recaptchaSuccess'] = null;
+  }
+
+  /**
+   * Returns captcha passes, displays error if it doesn't.
+   *
+   * @returns {boolean}
+   */
+  captchaCheck() {
+    const token = window.grecaptcha.getResponse();
+    if (token.length === 0) {
+      this.onError(new Error('Please complete the reCAPTCHA.'));
+      return false;
+    }
+    return true;
   }
 
   /**
@@ -50,11 +113,13 @@ class Subscribe extends BaseElement {
    * @return {FormData}
    */
   cleanForm(form) {
-    const doubleOptIn = this.needsDoubleOptIn.includes(form.get('Country'));
+    const doubleOptIn = this.needsDoubleOptIn.includes(
+      String(form.get('Country')),
+    );
     this.checkboxes.forEach((checkbox) =>
       form.set(checkbox, doubleOptIn ? 'Unconfirmed' : 'True'),
     );
-    form.delete(this.robotName);
+    form.delete('g-recaptcha-response');
     return form;
   }
 
@@ -66,37 +131,34 @@ class Subscribe extends BaseElement {
   }
 
   /**
-   *
-   * @param {Error} [error]
-   * @param {boolean} [useDefault=false]
+   * @param {Error} error
+   * @param {boolean} useDefault
    */
   onError(error, useDefault = false) {
-    const pTag = document.createElement('p');
-    const defaultError = new Error('Could not submit, please try again.');
-    this.subscribeError.textContent = '';
+    if (!this.subscribeError) {
+      console.warn(
+        'Could not find area to display error in subscribe element.',
+      );
+      return;
+    }
 
-    pTag.textContent = useDefault
+    const defaultError = new Error('Could not submit, please try again.');
+    this.subscribeError.querySelector(pTagSelector).textContent = useDefault
       ? defaultError.message
       : (error || defaultError).message;
 
-    this.subscribeError.appendChild(pTag);
+    this.subscribeError.classList.toggle(hiddenClass, false);
 
-    trackError(error, 'Email form failed to submit because');
+    logError(error, 'Email form failed to submit because');
   }
 
   onSubmit(e) {
     e.preventDefault();
-    if (this.processing || this.submitted) {
+    if (this.processing || this.submitted || !this.captchaCheck()) {
       return;
     }
     this.processing = true;
     const form = new FormData(e.target);
-    const formIsRobot = form.get(this.robotName).length !== 0;
-
-    if (formIsRobot) {
-      this.onSuccess(true);
-      return;
-    }
     const cleanedForm = this.cleanForm(form);
 
     this.postForm(cleanedForm)
@@ -114,19 +176,16 @@ class Subscribe extends BaseElement {
       .finally(() => (this.processing = false));
   }
 
-  onSuccess(isRobot = false) {
+  onSuccess() {
     this.submitted = true;
-    this.subscribeError.textContent = '';
+    this.subscribeError.classList.toggle(hiddenClass, true);
+    this.subscribeError.querySelector(pTagSelector).textContent = '';
     this.subscribeMessage.textContent = `Thank you! You're all signed up.`;
     this.form.removeEventListener('submit', this.onSubmit);
     this.form.parentElement.removeChild(this.form);
-    if (isRobot) {
-      return;
-    }
-    trackEvent({
-      category: 'web.dev',
-      action: 'submit',
-      label: 'subscribe, newsletter',
+    logEvent('submit', {
+      event_category: 'web.dev',
+      event_label: 'subscribe, newsletter',
     });
   }
 }
diff --git a/src/lib/components/Tabs/_styles.scss b/src/lib/components/Tabs/_styles.scss
deleted file mode 100644
index 6b013fa265e..00000000000
--- a/src/lib/components/Tabs/_styles.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- *
- * Copyright 2019 Google Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../../styles/tools/mixins';
-
-web-tabs {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  --primary-color: var(--hover-color, #{$SELF_ASSESSMENT_PRIMARY_COLOR});
-  --hover-color: var(--hover-color, #{$SELF_ASSESSMENT_HOVER_COLOR});
-  --active-color: var(--active-color, #{$SELF_ASSESSMENT_ACTIVE_COLOR});
-
-  .web-tabs__tablist {
-    @include scrollbars();
-    align-items: flex-end;
-    border-bottom: 1px solid $GREY_300;
-    display: flex;
-    min-height: 50px; // matches _unresolved.scss to avoid FOUC
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    width: 100%;
-  }
-
-  &[overflow] .web-tabs__tablist {
-    padding-left: 3rem;
-  }
-
-  .web-tabs__tab {
-    @include base-button();
-    border-radius: 0;
-    color: $BLACK;
-    flex: 1 0 auto;
-    height: 3rem;
-    margin: 0;
-    min-width: fit-content;
-    transition:
-      background $TRANSITION_SPEED,
-      box-shadow $TRANSITION_SPEED,
-      color $TRANSITION_SPEED;
-  }
-
-  @include hover() {
-    .web-tabs__tab:hover,
-    .web-tabs__tab:focus {
-      background: var(--hover-color);
-    }
-  }
-
-  .web-tabs__tab:focus {
-    box-shadow: inset 0 0 0 1px $FOCUS_COLOR;
-    outline: 0;
-  }
-
-  .web-tabs__tab:active {
-    background: var(--active-color);
-    box-shadow: none;
-  }
-
-  .web-tabs__tab[aria-selected="true"] {
-    color: var(--primary-color);
-  }
-
-  .web-tabs__tab::after {
-    background: transparent;
-    bottom: 0;
-    content: '';
-    display: block;
-    height: 2px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    transition: background $TRANSITION_SPEED;
-  }
-
-  .web-tabs__tab[aria-selected="true"]::after {
-    background: var(--primary-color);
-  }
-
-  .web-tabs__text-label {
-    opacity: .6;
-    transition: opacity $TRANSITION_SPEED;
-  }
-
-  .web-tabs__tab[aria-selected="true"] .web-tabs__text-label {
-    opacity: 1;
-  }
-
-  .web-tabs__panel {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-
-  .web-tabs__panel {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-}
-
-.js-focus-visible .web-tabs__tab:focus:not(.focus-visible) {
-  box-shadow: none;
-}
diff --git a/src/lib/components/Tabs/index.js b/src/lib/components/Tabs/index.js
index 14c03b656a9..f5db69a6458 100644
--- a/src/lib/components/Tabs/index.js
+++ b/src/lib/components/Tabs/index.js
@@ -1,31 +1,32 @@
-import {html} from 'lit-element';
+import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
 import {checkOverflow} from '../../utils/check-overflow';
 import {generateIdSalt} from '../../utils/generate-salt';
-import 'focus-visible';
-import './_styles.scss';
 
 /**
  * Element that wraps each child element in a tab panel
  * and renders a tab for each panel.
  * @extends {BaseElement}
  */
-class Tabs extends BaseElement {
+export class Tabs extends BaseElement {
   static get properties() {
     return {
       label: {type: String},
       activeTab: {type: Number, reflect: true},
       overflow: {type: Boolean, reflect: true},
+      limit: {type: Number, reflect: true},
     };
   }
 
   constructor() {
     super();
+    this.label = '';
     this.activeTab = 0;
     this.overflow = false;
     this.prerenderedChildren = null;
     this.tabs = null;
     this.idSalt = generateIdSalt('web-tab-');
+    this.limit = this.children.length;
 
     this.onResize = this.onResize.bind(this);
     this._changeTab = this._changeTab.bind(this);
@@ -34,6 +35,7 @@ class Tabs extends BaseElement {
     this.nextTab = this.nextTab.bind(this);
     this.firstTab = this.firstTab.bind(this);
     this.lastTab = this.lastTab.bind(this);
+    this.onClickLoadMore = this.onClickLoadMore.bind(this);
   }
 
   render() {
@@ -41,8 +43,14 @@ class Tabs extends BaseElement {
       this.prerenderedChildren = [];
       this.tabs = [];
       let i = 1;
-
       for (const child of this.children) {
+        if (this.limit && i === this.limit + 1) {
+          this.tabs.push(this.loadMoreTab());
+          this.prerenderedChildren.push(
+            html`<div class="web-tabs__panel" role="tabpanel" hidden></div>`,
+          );
+        }
+
         // Set id and aria-labelledby attributes for each panel for a11y.
         this.prerenderedChildren.push(this.panelTemplate(i, child));
         // Get tab label from child data-label attribute
@@ -65,6 +73,27 @@ class Tabs extends BaseElement {
     `;
   }
 
+  loadMoreTab() {
+    return html`
+      <button
+        class="web-tabs__tab gc-analytics-event expendableTab"
+        @click=${this.onClickLoadMore}
+      >
+        <span class="web-tabs__text-label">More...</span>
+      </button>
+    `;
+  }
+
+  onClickLoadMore(e) {
+    const tab = e.currentTarget;
+    const parentTabs = tab.parentElement;
+
+    const extendTabs = parentTabs.querySelectorAll('.web-tabs__tab.hidden');
+    extendTabs.forEach((tab) => tab.classList.remove('hidden'));
+
+    tab.classList.add('hidden');
+  }
+
   tabTemplate(i, tabLabel) {
     switch (tabLabel) {
       case 'question':
@@ -88,7 +117,9 @@ class Tabs extends BaseElement {
         @click=${this.onFocus}
         @focus=${this.onFocus}
         @keydown=${this.onKeydown}
-        class="web-tabs__tab gc-analytics-event"
+        class="web-tabs__tab
+        gc-analytics-event
+        ${i > this.limit ? 'hidden' : ''}"
         role="tab"
         aria-selected="false"
         id="web-tab-${this.idSalt}-${i}"
@@ -118,8 +149,8 @@ class Tabs extends BaseElement {
     `;
   }
 
-  firstUpdated() {
-    super.firstUpdated();
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
 
     this.activeTab = 0;
     this.onResize();
@@ -155,7 +186,9 @@ class Tabs extends BaseElement {
 
   // Update state of tabs and associated panels.
   _changeTab() {
+    /** @type NodeListOf<HTMLButtonElement> */
     const tabs = this.querySelectorAll('.web-tabs__tab');
+    /** @type NodeListOf<HTMLDivElement> */
     const panels = this.querySelectorAll('.web-tabs__panel');
     const activeTab = tabs[this.activeTab];
     const activePanel = panels[this.activeTab];
@@ -201,6 +234,7 @@ class Tabs extends BaseElement {
   }
 
   onKeydown(e) {
+    /** @type NodeListOf<HTMLButtonElement> */
     const tabs = this.querySelectorAll('.web-tabs__tab');
     const KEYCODE = {
       END: 35,
@@ -232,6 +266,7 @@ class Tabs extends BaseElement {
 
   // Helper method to allow other components to focus an arbitrary tab.
   focusTab(index) {
+    /** @type NodeListOf<HTMLButtonElement> */
     const tabs = this.querySelectorAll('.web-tabs__tab');
 
     if (tabs[index]) {
@@ -270,10 +305,11 @@ class Tabs extends BaseElement {
   }
 
   /**
-   * @param {!Node} node to check
+   * @param {HTMLElement} node to check
    * @return {number} the index of the tab containing this node, or -1 for none
    */
   indexOfTabByChild(node) {
+    /** @type HTMLElement */
     const panel = node.closest('[class="web-tabs__panel"]');
     if (!this.contains(panel)) {
       return -1;
diff --git a/src/lib/components/ThemeToggle/index.js b/src/lib/components/ThemeToggle/index.js
new file mode 100644
index 00000000000..9273bb5fa86
--- /dev/null
+++ b/src/lib/components/ThemeToggle/index.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Element that allows a user to toggle the current theme.
+ * @extends {HTMLElement}
+ * @final
+ */
+class ThemeToggle extends HTMLElement {
+  constructor() {
+    super();
+
+    this.STORAGE_KEY = 'user-color-scheme';
+    this.COLOR_MODE_KEY = '--color-mode';
+  }
+
+  connectedCallback() {
+    this.toggleSwitch = this.querySelector('[role="switch"]');
+
+    if (this.toggleSwitch) {
+      // On change, calculate the new setting, toggle state changes and store in storage
+      this.toggleSwitch.addEventListener('change', () => {
+        const setting = this.toggleSwitch.checked ? 'dark' : 'light';
+        this.applySetting(setting);
+        localStorage.setItem(this.STORAGE_KEY, setting);
+      });
+
+      this.applySetting();
+    }
+  }
+
+  applySetting(passedSetting) {
+    // Attempts to load the setting from local storage
+    const currentSetting =
+      passedSetting || localStorage.getItem(this.STORAGE_KEY);
+
+    if (currentSetting) {
+      this.setToggleSwitchStatus(currentSetting);
+      window.applyThemeSetting(currentSetting);
+    }
+    // If no storage setting, we set up media query-based state change
+    else {
+      // Set the checkbox to on if we're already in dark preference
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        this.setToggleSwitchStatus('dark');
+      }
+
+      // Listen for changes to the preference and set checkbox state accordingly
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', (evt) => {
+          this.setToggleSwitchStatus(evt.matches ? 'dark' : 'light');
+        });
+    }
+  }
+
+  // Sets the correct aria checked role and checked state
+  setToggleSwitchStatus(currentSetting) {
+    const isDarkMode = currentSetting === 'dark';
+    this.toggleSwitch.setAttribute(
+      'aria-checked',
+      isDarkMode ? 'true' : 'false',
+    );
+
+    this.toggleSwitch.checked = isDarkMode;
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('theme-toggle', ThemeToggle);
+}
+
+export default ThemeToggle;
diff --git a/src/lib/components/UrlChooser/_styles.scss b/src/lib/components/UrlChooser/_styles.scss
deleted file mode 100644
index 69a0d0566c1..00000000000
--- a/src/lib/components/UrlChooser/_styles.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/dimensions';
-@import '../../../styles/settings/global';
-@import '../../../styles/tools/mixins';
-
-// =============================================================================
-// URL CHOOSER
-//
-// Lets the user select a URL and trigger an audit.
-//
-// =============================================================================
-
-web-url-chooser {
-  $INPUT_HEIGHT: 56px;
-
-  display: block;
-
-  &:not([switching]) .lh-enterurl--switch {
-    display: none;
-  }
-
-  &[switching] .lh-enterurl--selected {
-    display: none;
-  }
-
-  .lh-report-header-enterurl {
-    position: relative;
-  }
-
-  .lh-enterurl {
-    position: relative;
-    align-self: center;
-  }
-
-  /** The "X" button that appears to the right of a URL. */
-  .lh-enterurl__close {
-    align-items: center;
-    background: none;
-    border: 0;
-    box-shadow: none;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    margin: 0 8px;
-    padding: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    &[disabled] {
-      display: none;
-    }
-
-    &::after {
-      @include font-material-icon();
-      content: 'close';
-      color: $GREY_400;
-    }
-
-    &:focus,
-    &::-moz-focus-inner {
-      outline: 0;
-    }
-
-    &:focus::after {
-      color: $GREY_900;
-    }
-  }
-
-  /** The currently selected URL, not in editing mode. */
-  .lh-enterurl--selected {
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    padding-left: 24px;
-    // image is duplicated in lh-input.scss
-    background: url('data:image/svg+xml;utf8,<svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg"><path fill="%23212121" d="M7.992,0 C3.576,0 0,3.584 0,8 C0,12.416 3.576,16 7.992,16 C12.416,16 16,12.416 16,8 C16,3.584 12.416,0 7.992,0 Z M13.536,4.8 L11.176,4.8 C10.92,3.8 10.552,2.84 10.072,1.952 C11.544,2.456 12.768,3.48 13.536,4.8 Z M8,1.632 C8.664,2.592 9.184,3.656 9.528,4.8 L6.472,4.8 C6.816,3.656 7.336,2.592 8,1.632 Z M1.808,9.6 C1.68,9.088 1.6,8.552 1.6,8 C1.6,7.448 1.68,6.912 1.808,6.4 L4.512,6.4 C4.448,6.928 4.4,7.456 4.4,8 C4.4,8.544 4.448,9.072 4.512,9.6 L1.808,9.6 Z M2.464,11.2 L4.824,11.2 C5.08,12.2 5.448,13.16 5.928,14.048 C4.456,13.544 3.232,12.528 2.464,11.2 Z M4.824,4.8 L2.464,4.8 C3.232,3.472 4.456,2.456 5.928,1.952 C5.448,2.84 5.08,3.8 4.824,4.8 Z M8,14.368 C7.336,13.408 6.816,12.344 6.472,11.2 L9.528,11.2 C9.184,12.344 8.664,13.408 8,14.368 Z M9.872,9.6 L6.128,9.6 C6.056,9.072 6,8.544 6,8 C6,7.456 6.056,6.92 6.128,6.4 L9.872,6.4 C9.944,6.92 10,7.456 10,8 C10,8.544 9.944,9.072 9.872,9.6 Z M10.072,14.048 C10.552,13.16 10.92,12.2 11.176,11.2 L13.536,11.2 C12.768,12.52 11.544,13.544 10.072,14.048 Z M11.488,9.6 C11.552,9.072 11.6,8.544 11.6,8 C11.6,7.456 11.552,6.928 11.488,6.4 L14.192,6.4 C14.32,6.912 14.4,7.448 14.4,8 C14.4,8.552 14.32,9.088 14.192,9.6 L11.488,9.6 Z" id="icon/action/language_24px"></path></svg>') no-repeat 0 50%;
-
-    &::before {
-      // include zero-width space to force minimum height
-      content: '\200b';
-      user-select: none;
-    }
-  }
-
-  .lh-input {
-    background-color: $WHITE;
-    border-radius: 2px;
-    border: 1px solid $GREY_200;
-    color: $PRIMARY_TEXT_COLOR;
-    font: 16px / 20px Roboto, sans-serif;
-    height: $INPUT_HEIGHT;
-    margin: 0;
-    max-width: 100%;
-    outline: none;
-    padding: 8px 16px;
-    transition: box-shadow $TRANSITION_SPEED ease-in-out;
-    width: 100%;
-
-    &:focus {
-      box-shadow: inset 0 -2px 0 0 $FOCUS_COLOR;
-    }
-
-    &::-ms-clear {
-      display: none;
-    }
-  }
-
-  .lh-controls {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 8px;
-  }
-
-  .lh-controls .w-button {
-    // List all vals so autoprefixer doesn't rewrite this to flex: 1 1 0%
-    // and make "switch url" text ellipsis.
-    flex: 1 1 auto;
-    height: $INPUT_HEIGHT;
-    justify-content: center;
-  }
-
-  .lh-controls button + button {
-    margin-left: 16px;
-  }
-}
-
-web-url-chooser {
-  /// @deprecated
-  // TODO(robdodson): This should be replaced with the @media rules from breakpoints.scss, but the
-  // Measure page is special and currently does not have a matching value.
-  @media screen and (min-width: $BREAKPOINT_VALUE_TABLET) {
-    .lh-report-header-enterurl {
-      display: flex;
-    }
-
-    .lh-controls {
-      margin-top: 0;
-      flex-wrap: nowrap;
-    }
-
-    .lh-enterurl {
-      margin-right: 32px;
-      width: 100%;
-    }
-
-    .lh-input {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/lib/components/UrlChooser/index.js b/src/lib/components/UrlChooser/index.js
deleted file mode 100644
index 370ca665894..00000000000
--- a/src/lib/components/UrlChooser/index.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import {html} from 'lit-element';
-import {BaseElement} from '../BaseElement';
-import './_styles.scss';
-
-/**
- * @fileoverview Displays the primary URL chooser for Lighthouse.
- */
-
-/* eslint-disable require-jsdoc */
-class UrlChooser extends BaseElement {
-  static get properties() {
-    return {
-      url: {type: String},
-      switching: {type: Boolean, reflect: true},
-      hasError: {type: Boolean},
-      disabled: {type: Boolean},
-    };
-  }
-
-  constructor() {
-    super();
-    this.url = null; // when signed out or waiting for Firestore, this is null
-    this.switching = true; // controls whether the user is editing the URL
-    this.disabled = false; // disables buttons (because Lighthouse is active)
-
-    // non-properties (stolen DOM nodes)
-    this._urlInput = null;
-    this._runLighthouseButton = null;
-  }
-
-  render() {
-    return html`
-      <div class="lh-report-header-enterurl">
-        <div class="lh-enterurl lh-enterurl--selected">${this.url}</div>
-        <div class="lh-enterurl lh-enterurl--switch">
-          <input
-            ?disabled=${this.disabled}
-            type="url"
-            class="lh-input"
-            name="url"
-            placeholder="Enter a web page URL"
-            pattern="https?://.*"
-            minlength="7"
-            @keyup="${this.onUrlKeyup}"
-          />
-          <button
-            ?disabled=${this.disabled}
-            class="lh-enterurl__close gc-analytics-event"
-            data-category="web.dev"
-            data-label="measure, remove url"
-            data-action="click"
-            aria-label="Remove URL"
-            @click=${this.onClearInput}
-          ></button>
-        </div>
-        <div class="lh-controls">
-          <button
-            ?disabled=${this.disabled}
-            class="w-button w-button--secondary gc-analytics-event"
-            data-category="web.dev"
-            data-label="measure, switch url"
-            data-action="click"
-            @click=${this.onSwitchUrl}
-          >
-            Switch URL
-          </button>
-          <button
-            ?disabled=${this.disabled}
-            class="w-button w-button--primary gc-analytics-event"
-            data-category="web.dev"
-            data-label="measure, run audit"
-            data-action="click"
-            id="run-lh-button"
-            @click=${this.onRequestAudit}
-          >
-            Run Audit
-          </button>
-        </div>
-      </div>
-    `;
-  }
-
-  firstUpdated() {
-    this._urlInput = this.renderRoot.querySelector('input[type="url"]');
-    this._runLighthouseButton = this.renderRoot.querySelector('#run-lh-button');
-  }
-
-  updated(changedProperties) {
-    const input = this._urlInput;
-
-    if (changedProperties.has('hasError')) {
-      if (this.hasError) {
-        // hasError false -> true implies switching, but not the other way around
-        this.switching = true;
-      }
-    }
-    if (changedProperties.has('switching') && this.switching) {
-      input.setSelectionRange(0, input.value.length);
-      input.focus();
-    }
-    if (changedProperties.has('url')) {
-      // Note: This behavior can't be performed in a setter as the <input /> might not have been
-      // rendered yet.
-      const url = this.url;
-      if (this.switching && url && !input.value) {
-        // if the user has just signed in, the element was in an initial state,
-        // AND the user hasn't typed anything, reset element with URL
-        input.value = url;
-        this.switching = false;
-      } else if (url === null && !this.switching) {
-        // if the user has signed out, clear the href and enter switching mode
-        input.value = null;
-        this.switching = true;
-      } else if (!this.switching) {
-        // in all other cases, only update the URL if ther user isn't switching
-        input.value = url;
-      }
-    }
-  }
-
-  onRequestAudit() {
-    // Even if the user isn't switching URLs, fix and verify the saved URL which is inserted into
-    // the <input /> inside this element.
-    this.fixUpUrl();
-    if (!this._urlInput.validity.valid) {
-      const detail =
-        'Invalid URL. Please enter a full URL starting with https://.';
-      const event = new CustomEvent('web-error', {bubbles: true, detail});
-      this.dispatchEvent(event);
-      return;
-    }
-
-    // "Request Audit" finishes editing the URL.
-    this.switching = false;
-
-    const event = new CustomEvent('audit', {detail: this._urlInput.value});
-    this.dispatchEvent(event);
-  }
-
-  onSwitchUrl() {
-    this.switching = true;
-
-    // Focus won't occur if switching is already true, so trigger it here too.
-    this._urlInput.focus();
-  }
-
-  onUrlKeyup(e) {
-    if (e.key === 'Escape') {
-      this.onClearInput();
-    } else if (e.key === 'Enter') {
-      this._runLighthouseButton.click();
-    }
-  }
-
-  /**
-   * Performs basic sanity fixes on the URL in the <input />.
-   */
-  fixUpUrl() {
-    let url = this._urlInput.value.trim();
-    if (!url.startsWith('https://') && !url.startsWith('http://')) {
-      url = `http://${url}`;
-    }
-    if (url !== this._urlInput.value) {
-      this._urlInput.value = url;
-    }
-  }
-
-  onClearInput() {
-    this._urlInput.value = null;
-  }
-}
-
-customElements.define('web-url-chooser', UrlChooser);
diff --git a/src/lib/components/UrlChooserContainer/index.js b/src/lib/components/UrlChooserContainer/index.js
deleted file mode 100644
index d49b0d1e97f..00000000000
--- a/src/lib/components/UrlChooserContainer/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import {html} from 'lit-element';
-import {BaseStateElement} from '../BaseStateElement';
-import {requestRunLighthouse} from '../../actions';
-import '../UrlChooser';
-
-/**
- * @fileoverview Manages state interaction with UrlChooser.
- *
- * Invokes Lighthouse when the UrlChooser requests it, possibly with an updated URL.
- */
-class UrlChooserContainer extends BaseStateElement {
-  static get properties() {
-    return {
-      url: {type: String},
-      active: {type: Boolean},
-      hasError: {type: Boolean},
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.url = null; // when signed out or waiting for Firestore, this is null
-    this.active = false;
-  }
-
-  render() {
-    return html`
-      <web-url-chooser
-        .url=${this.url}
-        .disabled=${this.active}
-        .hasError=${this.hasError}
-        @audit=${this.runAudit}
-      ></web-url-chooser>
-    `;
-  }
-
-  onStateChanged(state) {
-    // As userUrl can change (a signed-in user can modify it in another browser
-    // window), _prefer_ any URL that's currently being run through Lighthouse.
-    // This will prevent e.g. "foo.com" (after a user has hit "Run Audit") being
-    // replaced by "bar.com" (which is run in another browser window), and then
-    // results being approprtioned to the wrong URL.
-
-    this.url = state.activeLighthouseUrl || state.userUrl;
-    this.active = state.activeLighthouseUrl !== null;
-    this.hasError = Boolean(state.lighthouseError);
-  }
-
-  runAudit(e) {
-    const url = e.detail;
-    requestRunLighthouse(url);
-  }
-}
-
-customElements.define('web-url-chooser-container', UrlChooserContainer);
diff --git a/src/lib/components/base.js b/src/lib/components/base.js
index 67cc24f1363..eb5e56590aa 100644
--- a/src/lib/components/base.js
+++ b/src/lib/components/base.js
@@ -2,9 +2,13 @@
  * @fileoverview Web Components used by all pages within web.dev.
  */
 
-import './ProfileSwitcherContainer';
+import 'webdev-infra/web-components/YouTube';
+
 import './Header';
+import './DevRelRibbon';
 import './LanguageSelect';
-import './SideNav';
+import './NavigationDrawer';
 import './SnackbarContainer';
+import './ThemeToggle';
 import './Search';
+import './SearchResults';
diff --git a/src/lib/content-indexing.js b/src/lib/content-indexing.js
new file mode 100644
index 00000000000..424764110b7
--- /dev/null
+++ b/src/lib/content-indexing.js
@@ -0,0 +1,168 @@
+/**
+ * @fileoverview Interaction with the Content Indexing API.
+ *
+ * See https://web.dev/content-indexing-api/
+ */
+
+import {normalizeUrl} from './urls';
+
+const CACHE_NAME = 'webdev-html-cache-v1';
+const PREFERRED_ICON_SIZE = 192;
+
+const DEFAULT_ICON = {
+  sizes: '128x128',
+  src: '/images/icon-128x128.png',
+  type: 'image/png',
+};
+
+/**
+ * Returns an instance of the ContentIndex associated with the active
+ * registration, if supported in the current browser.
+ *
+ * @return {Promise<ContentIndex|void>} The ContentIndex interface, or undefined
+ * if that functionality isn't supported.
+ */
+async function getContentIndexInterface() {
+  if ('serviceWorker' in navigator) {
+    const registration = await navigator.serviceWorker.ready;
+    return registration.index;
+  }
+
+  // Just to be explicit about the return value.
+  return undefined;
+}
+
+/**
+ * Normalizes an image URL to the dimensions and format expected by the
+ * Content Indexing API.
+ *
+ * @param {string} imgSrc The URL for an image asset, usually on imgix.
+ * @return {Object} The image metadata fields that the content index expects.
+ */
+function getIconFromImageSrc(imgSrc) {
+  if (!imgSrc) {
+    return DEFAULT_ICON;
+  }
+
+  const url = new URL(imgSrc, location.href);
+
+  // The image manipulation will only work if this icon is served by Imgix.
+  // If it's not, just use the default icon.
+  if (url.origin !== 'https://webdev.imgix.net') {
+    return DEFAULT_ICON;
+  }
+
+  url.searchParams.set('w', '' + PREFERRED_ICON_SIZE);
+  url.searchParams.set('h', '' + PREFERRED_ICON_SIZE);
+  url.searchParams.set('fit', 'crop');
+  url.searchParams.set('fm', 'webp');
+
+  return {
+    sizes: `${PREFERRED_ICON_SIZE}x${PREFERRED_ICON_SIZE}`,
+    src: url.href,
+    type: 'image/webp',
+  };
+}
+
+/**
+ * Adds a given pageURL to the content index. The ID used is the normalized URL.
+ *
+ * Metadata for the indexed page is read from the Cache Storage API, by
+ * translating the page's URL into a cache key for the JSON metadata.
+ *
+ * @param {string} pageURL The URL of the page being indexed, or the cache key
+ * corresponding to that page's metadata.
+ * @param {Cache} [cache] If set, an open Cache object that the metadata can
+ * be read from.
+ */
+export async function addPageToContentIndex(pageURL, cache) {
+  const index = await getContentIndexInterface();
+  //  Bail early if the Content Indexing API isn't supported.
+  if (!index) {
+    return;
+  }
+
+  const normalizedURL = normalizeUrl(pageURL);
+  if (!normalizedURL.endsWith('/')) {
+    // If this is a URL that doesn't appear to be supported, bail.
+    return;
+  }
+
+  if (!cache) {
+    cache = await caches.open(CACHE_NAME);
+  }
+
+  const response = await cache.match(normalizedURL);
+  // If for some reason there's no HTML in the cache for our cache key, bail.
+  if (!response) {
+    return;
+  }
+
+  // Parse the HTML and extract the description, image etc.
+  const raw = await response.text();
+  const candidateDocument = new DOMParser().parseFromString(raw, 'text/html');
+  const meta = (attr) => {
+    const el = candidateDocument.head.querySelector(`meta[${attr}]`);
+    return (el && el.getAttribute('content')) || '';
+  };
+  const description = meta('name="description"');
+  const imageSrc = meta('itemprop="image"');
+  const {title} = candidateDocument;
+
+  // We can use a default image, but the other fields need to be set.
+  if (!(title && description)) {
+    return;
+  }
+
+  const icon = getIconFromImageSrc(imageSrc);
+
+  await index.add({
+    description,
+    title,
+    category: 'article',
+    id: normalizedURL,
+    icons: [icon],
+    url: normalizedURL,
+    launchUrl: normalizedURL,
+  });
+}
+
+/**
+ * Syncs the currently cached media with the Content Indexing API
+ * (on browsers that support it). The Cache Storage is the source of truth.
+ */
+export async function syncContentIndex() {
+  const index = await getContentIndexInterface();
+  //  Bail early if the Content Indexing API isn't supported.
+  if (!index) {
+    return;
+  }
+
+  // Get a list of everything currently in the content index.
+  const alreadyIndexed = await index.getAll();
+  const idsInIndex = new Set(alreadyIndexed.map(({id}) => id));
+
+  // Get all the cached JSON partials.
+  const cache = await caches.open(CACHE_NAME);
+  const cachedRequests = await cache.keys();
+
+  for (const request of cachedRequests) {
+    // Find the unique ID. We get the cache key here, which ends with
+    // "/index.json": remove this and normalize the URL to get the correct ID.
+    const id = normalizeUrl(request.url.replace(/\.json$/, '.html'));
+
+    // If our id is already in the index, remove it from the set of ids that
+    // need to be deleted.
+    if (idsInIndex.has(id)) {
+      idsInIndex.delete(id);
+      continue;
+    }
+    await addPageToContentIndex(id, cache);
+  }
+
+  // Finally, for all of the ids that are currently in the index but aren't
+  // cached, remove them from the index.
+  for (const id of idsInIndex) {
+    await index.delete(id);
+  }
+}
diff --git a/src/lib/fb.js b/src/lib/fb.js
index bc83de5a387..41c0e94afd6 100644
--- a/src/lib/fb.js
+++ b/src/lib/fb.js
@@ -1,36 +1,37 @@
+import {initializeApp} from 'firebase/app';
+import {
+  getAuth,
+  GoogleAuthProvider,
+  signInWithPopup,
+  signOut as authSignOut,
+} from 'firebase/auth';
+import {
+  getFirestore,
+  doc,
+  runTransaction,
+  onSnapshot,
+} from 'firebase/firestore';
+
 import {firebaseConfig} from 'webdev_config';
 import {store} from './store';
 import {clearSignedInState} from './actions';
-import loadFirebase from './utils/firebase-loader';
-import {trackError} from './analytics';
-
-const firebasePromise = loadFirebase('app', 'auth', 'performance').then(
-  () => window.firebase,
-);
-firebasePromise.then(initialize).catch((err) => {
-  console.error('failed to load Firebase', err);
-  trackError(err, 'firebase load');
-});
-
-const firestorePromiseLoader = (() => {
-  let p;
-  return () => {
-    if (p) {
-      return p;
-    }
-    // We don't have to block on the top-level Promise, as the scripts run
-    // in-order of being added to the page (async=false).
-    p = loadFirebase('firestore').then(() => {
-      const firestore = window.firebase.firestore();
-      return firestore;
-    });
-    return p;
-  };
-})();
 
-function initialize(firebase) {
-  firebase.initializeApp(firebaseConfig);
-  firebase.performance(); // initialize performance monitoring
+import {logError} from './analytics';
+
+let isInitialized = false;
+
+export function initialize() {
+  // Initialization is run lazily (only when clicking signIn or signOut)
+  // because not all pages use the sign-in components, and the Firebase
+  // auth code creates a connection to an IndexedDB database that it doesn't
+  // close, preventing any pages that run the code form being eligible for
+  // bfcache in Chrome (which hurts performance).
+  // See: https://github.com/GoogleChrome/web.dev/pull/7155/
+  if (isInitialized) {
+    return;
+  }
+
+  initializeApp(firebaseConfig);
 
   let firestoreUserUnsubscribe = () => {};
   let lastSavedUrl = null;
@@ -89,7 +90,7 @@ function initialize(firebase) {
   };
 
   // Listen for the user's signed in state and update the store.
-  firebase.auth().onAuthStateChanged((user) => {
+  getAuth().onAuthStateChanged((user) => {
     store.setState({checkingSignedInState: false});
     firestoreUserUnsubscribe();
 
@@ -112,16 +113,9 @@ function initialize(firebase) {
       let internalUnsubscribe = null;
       let unsubscribed = false;
 
-      userRef()
-        .then((ref) => {
-          if (!unsubscribed) {
-            internalUnsubscribe = ref.onSnapshot(onUserSnapshot);
-          }
-        })
-        .catch((err) => {
-          console.warn('failed to load Firestore library', err);
-          trackError(err, 'firestore load');
-        });
+      if (!unsubscribed) {
+        internalUnsubscribe = onSnapshot(userRef(), onUserSnapshot);
+      }
 
       return () => {
         unsubscribed = true;
@@ -132,21 +126,23 @@ function initialize(firebase) {
       };
     })();
   });
+
+  isInitialized = true;
 }
 
 /**
  * Gets the Firestore reference to the user's document.
  *
- * @return {?Object}
+ * @return {import('firebase/firestore').DocumentReference<import('firebase/firestore').DocumentData> | null}
  */
-async function userRef() {
+function userRef() {
   const state = store.getState();
   if (!state.user) {
     return null;
   }
 
-  const firestore = await firestorePromiseLoader();
-  return firestore.collection('users').doc(state.user.uid);
+  const firestore = getFirestore();
+  return doc(firestore, 'users', state.user.uid);
 }
 
 /**
@@ -154,17 +150,17 @@ async function userRef() {
  *
  * @param {string} url to update the user's row with
  * @param {!Date} auditedOn of the most recent Lighthouse run
- * @return {!Date} the earliest audit seen for this URL
+ * @return {Promise<Date>} the earliest audit seen for this URL
  */
 export async function saveUserUrl(url, auditedOn = null) {
-  const ref = await userRef();
+  const ref = userRef();
   if (!ref) {
     return null; // not signed in so user has never seen this site
   }
 
   // This must exist, as userRef() forces Firestore to be loaded.
-  const firestore = await firestorePromiseLoader();
-  const p = firestore.runTransaction(async (transaction) => {
+  const firestore = getFirestore();
+  const p = runTransaction(firestore, async (transaction) => {
     const snapshot = await transaction.get(ref);
     const data = snapshot.data() || {};
 
@@ -199,7 +195,7 @@ export async function saveUserUrl(url, auditedOn = null) {
     // Note: We don't plan to do anything here. If we can't write to Firebase, we can still
     // try to invoke Lighthouse with the new URL.
     console.warn('could not write URL to Firestore', err);
-    trackError(err, 'write URL');
+    logError(err, 'write URL');
   }
 
   return auditedOn;
@@ -208,18 +204,19 @@ export async function saveUserUrl(url, auditedOn = null) {
 /**
  * Request that the user signs in. Resolves on completion.
  *
- * @return {?Object} the auth user
+ * @return {Promise<Object>} the auth user
  */
 export async function signIn() {
   let user = null;
   try {
-    await firebasePromise;
-    const provider = new firebase.auth.GoogleAuthProvider();
-    const res = await firebase.auth().signInWithPopup(provider);
+    // Run the initialization code (if it hasn't already been initialized).
+    initialize();
+    const provider = new GoogleAuthProvider();
+    const res = await signInWithPopup(getAuth(), provider);
     user = res.user;
   } catch (err) {
     console.error('signIn error', err);
-    trackError(err, 'signIn');
+    logError(err, 'signIn');
   }
 
   return user;
@@ -230,10 +227,11 @@ export async function signIn() {
  */
 export async function signOut() {
   try {
-    await firebasePromise;
-    await firebase.auth().signOut();
+    // Run the initialization code (if it hasn't already been initialized).
+    initialize();
+    await authSignOut(getAuth());
   } catch (err) {
     console.error('signOut error', err);
-    trackError(err, 'signOut');
+    logError(err, 'signOut');
   }
 }
diff --git a/src/lib/lighthouse-service.js b/src/lib/lighthouse-service.js
index a375fe759b7..d2034ce7c23 100644
--- a/src/lib/lighthouse-service.js
+++ b/src/lib/lighthouse-service.js
@@ -5,7 +5,7 @@ export const LH_HOST = 'https://lighthouse-dot-webdotdevsite.appspot.com/';
  * Fetches recent median values for various Lighthouse categories. This is used as a baseline for
  * site authors to compare to.
  *
- * @return {!Object<string, Array<!Object>>} mapping from category to recent median scores
+ * @return {Promise<Object<string, Array<Object>>>} mapping from category to recent median scores
  */
 export async function fetchMedians() {
   // TODO(robdodson): As of July 2019, this call always returns empty/invalid JSON.
@@ -19,7 +19,7 @@ export async function fetchMedians() {
  *
  * @param {string} url to request a Lighthouse run
  * @param {boolean} signedIn whether the user is signed in
- * @return {!Object} a single lighthouse run
+ * @return {Promise<Object>} a single lighthouse run
  */
 export async function runLighthouse(url, signedIn = false) {
   const body = {
@@ -50,7 +50,7 @@ export async function runLighthouse(url, signedIn = false) {
  *
  * @param {string} url to request reports for
  * @param {?Date=} startDate when reports should start from
- * @return {!Array<!Object>} recent runs
+ * @return {Promise<Array<Object>>} recent runs
  */
 export async function fetchReports(url, startDate = null) {
   const testUrl = window.encodeURIComponent(url);
diff --git a/src/lib/loader.js b/src/lib/loader.js
deleted file mode 100644
index d928ac421b7..00000000000
--- a/src/lib/loader.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * @fileoverview Handles SPA loading and importing the correct page entrypoint for web.dev.
- *
- * Exports a single function, swapContent, which ensures that the inner contents of the web.dev
- * template is correct, and that the correct JS entrypoint is ready.
- */
-
-import {store} from './store';
-import {normalizeUrl, getCanonicalPath} from './urls';
-import './utils/underscore-import-polyfill';
-
-/**
- * Dynamically loads code required for the passed URL entrypoint.
- *
- * @param {string} url normalize pathname of the page to load modules for.
- * @return {!Promise<?>}
- */
-async function loadEntrypoint(url) {
-  url = getCanonicalPath(url);
-  const prefixTo = url.indexOf('/', 1);
-  const prefix = url.substring(1, prefixTo === -1 ? url.length : prefixTo);
-
-  // This is a switch as it's easy to see all entrypoints (vs. lots of if/else).
-  // We can't dynamically generate the argument to import as Rollup rewrites
-  // import() statements as a whole for us.
-  switch (prefix) {
-    case 'measure':
-      return import('./pages/measure.js');
-
-    case 'live':
-      return import('./pages/live.js');
-
-    case 'newsletter':
-      return import('./pages/newsletter.js');
-  }
-
-  return import('./pages/default.js');
-}
-
-/**
- * Gets the partial content of the target normalized URL. Returns null if aborted.
- *
- * If the partial is missing (i.e., 404) this throws an error. This means that
- * requests to missing pages will do an additional network round-trip. This is
- * important as there might be a configured redirect.
- *
- * @param {string} url of the page to fetch.
- * @param {!AbortSignal=} signal
- * @return {?{raw: string, title: string, offline: (boolean|undefined)}}
- */
-export async function getPartial(url, signal) {
-  if (!url.endsWith('/')) {
-    throw new Error(`partial unsupported for non-folder: ${url}`);
-  }
-  try {
-    const res = await fetch(url + 'index.json', {signal});
-    if (!res.ok) {
-      throw res.status;
-    }
-    return await res.json();
-  } catch (e) {
-    if (e instanceof DOMException && e.name === 'AbortError') {
-      return null;
-    }
-    throw e;
-  }
-}
-
-/**
- * Force the user's cursor to the target element, making it focusable if needed.
- * After the user blurs from the target, it will restore to its initial state.
- *
- * @param {?Element} el
- */
-function forceFocus(el) {
-  if (!el) {
-    // do nothing
-  } else if (el.hasAttribute('tabindex')) {
-    el.focus();
-  } else {
-    // nb. This will also operate on elements that implicitly allow focus, but
-    // it should be harmless there (aside hiding the focus ring with
-    // w-force-focus).
-    el.tabIndex = -1;
-    el.focus();
-    el.classList.add('w-force-focus');
-
-    el.addEventListener(
-      'blur',
-      () => {
-        el.removeAttribute('tabindex');
-        el.classList.remove('w-force-focus');
-      },
-      {once: true},
-    );
-  }
-}
-
-/**
- * Replaces the current #content element with new partial content.
- *
- * @param {!Object} partial
- */
-function updateDom(partial) {
-  const content = document.querySelector('main #content');
-  content.innerHTML = partial.raw;
-
-  // Close any open self-assessment modals.
-  // TODO(samthor): Replace this logic with a store subscriber that allows
-  // all components to clean up after themselves when the page changes.
-  const assessmentsOpen = document.querySelectorAll('web-assessment[open]');
-  for (const assessment of assessmentsOpen) {
-    assessment.remove();
-  }
-
-  // Update the page title.
-  document.title = partial.title || '';
-
-  const rss = document.querySelector('link[type="application/atom+xml"]');
-  if (rss) {
-    rss.href = partial.rss || rss.href;
-  }
-
-  // Focus on the first title (or fallback to content itself).
-  forceFocus(content.querySelector('h1, h2, h3, h4, h5, h6') || content);
-}
-
-/**
- * Swap the current page for a new one. Accepts an incoming URL.
- *
- * @param {{
- *   firstRun: boolean,
- *   url: string,
- *   signal: !AbortSignal,
- *   ready: function(string, ?Object): void,
- *   state: ?Object,
- * }} object
- */
-export async function swapContent({firstRun, url, signal, ready, state}) {
-  url = normalizeUrl(url);
-
-  // Kick off loading the correct JS entrypoint.
-  const entrypointPromise = loadEntrypoint(url);
-
-  // If this is the first run, bail out early. We generate an inferred partial for back/forward nav,
-  // as we only have the initial prerendered HTML.
-  if (firstRun) {
-    const content = document.querySelector('main #content');
-    const inferredPartial = {
-      raw: content.innerHTML,
-      title: document.title,
-    };
-    if (store.getState().isOffline) {
-      inferredPartial.offline = true;
-    }
-    ready(url, {partial: inferredPartial});
-    return entrypointPromise;
-  }
-
-  // Either use a partial from the previous state (user has hit back/forward) if it's not offline,
-  // or fetch it anew from the network.
-  let partial;
-  if (state && state.partial && !state.partial.offline) {
-    partial = state.partial;
-  } else {
-    store.setState({isPageLoading: true});
-    partial = await getPartial(url, signal);
-    if (signal.aborted) {
-      return;
-    }
-  }
-
-  // Code in entrypoint.jsuses this to trigger a reload if we see an "online" event. This partial
-  // value is only returned via the Service Worker if we failed to fetch a 'real' page.
-  const isOffline = Boolean(partial.offline);
-  store.setState({currentUrl: url, isOffline});
-
-  // Inform the router that we're ready early (even though the JS isn't done). This updates the URL,
-  // which must happen before DOM changes and ga event.
-  ready(url, {partial});
-
-  ga('set', 'page', window.location.pathname);
-  ga('send', 'pageview');
-  updateDom(partial);
-
-  // Finally, just await for the entrypoint JS. It this fails we'll throw an exception and force a
-  // complete reload.
-  await entrypointPromise;
-
-  if (!signal.aborted) {
-    store.setState({isPageLoading: false});
-  }
-}
diff --git a/src/lib/pages/about.js b/src/lib/pages/about.js
new file mode 100644
index 00000000000..93358007dac
--- /dev/null
+++ b/src/lib/pages/about.js
@@ -0,0 +1,7 @@
+/**
+ * @fileoveriew Entrypoint for About page.
+ */
+
+import '../components/Subscribe';
+
+import '../components/base';
diff --git a/src/lib/pages/content.js b/src/lib/pages/content.js
new file mode 100644
index 00000000000..35333faad49
--- /dev/null
+++ b/src/lib/pages/content.js
@@ -0,0 +1,16 @@
+/**
+ * @fileoveriew Entrypoint for default content pages on web.dev.
+ */
+
+import '../components/ShareAction';
+import '../components/AssessmentQuestion';
+import '../components/Codelab';
+import '../components/Assessment';
+import '../components/ResponseMultipleChoice';
+import '../components/ResponseThinkAndCheck';
+import '../components/SelectGroup';
+import '../components/ScrollSpy';
+import '../components/Tabs';
+import '../components/CopyCode';
+
+import '../components/base';
diff --git a/src/lib/pages/course.js b/src/lib/pages/course.js
new file mode 100644
index 00000000000..6ef19516beb
--- /dev/null
+++ b/src/lib/pages/course.js
@@ -0,0 +1,3 @@
+import './content';
+import '../components/AudioFab';
+import '../components/CourseSearchResults';
diff --git a/src/lib/pages/default.js b/src/lib/pages/default.js
index 2d1833436d9..ed0e1ab522e 100644
--- a/src/lib/pages/default.js
+++ b/src/lib/pages/default.js
@@ -1,16 +1,6 @@
 /**
- * @fileoveriew Entrypoint for default content pages on web.dev.
+ * @fileoveriew Minimal entrypoint for a page on web.dev.
+ * This will include things like the SideNav, Search, Header, etc.
  */
 
-import '../components/ShareAction';
-import '../components/AssessmentQuestion';
-import '../components/Codelab';
-import '../components/Assessment';
-import '../components/ResponseMultipleChoice';
-import '../components/ResponseThinkAndCheck';
-import '../components/SelectGroup';
-import '../components/Tabs';
-import '../components/CopyCode';
-import '../components/Feedback';
-
 import '../components/base';
diff --git a/src/lib/pages/design-system.js b/src/lib/pages/design-system.js
new file mode 100644
index 00000000000..cf65c279e74
--- /dev/null
+++ b/src/lib/pages/design-system.js
@@ -0,0 +1,8 @@
+/**
+ * @fileoveriew Entrypoint for default content pages on web.dev.
+ */
+
+import '../components/Carousel';
+import '../components/CopyCode';
+import '../components/Tabs';
+import '../components/base';
diff --git a/src/lib/pages/explore.js b/src/lib/pages/explore.js
new file mode 100644
index 00000000000..63c3764df0a
--- /dev/null
+++ b/src/lib/pages/explore.js
@@ -0,0 +1,7 @@
+/**
+ * @fileoveriew Entrypoint for Explore page.
+ */
+
+import '../components/LearnFilter';
+
+import '../components/base';
diff --git a/src/lib/pages/home.js b/src/lib/pages/home.js
new file mode 100644
index 00000000000..6aec00d974c
--- /dev/null
+++ b/src/lib/pages/home.js
@@ -0,0 +1,8 @@
+/**
+ * @fileoveriew Entrypoint for Home page.
+ */
+
+import '../components/Subscribe';
+import '../components/LearnFilter';
+
+import '../components/base';
diff --git a/src/lib/pages/learn.js b/src/lib/pages/learn.js
new file mode 100644
index 00000000000..fc4f0295600
--- /dev/null
+++ b/src/lib/pages/learn.js
@@ -0,0 +1,5 @@
+/**
+ * @fileoveriew Entrypoint for Learn page.
+ */
+
+import '../components/base';
diff --git a/src/lib/pages/live.js b/src/lib/pages/live.js
deleted file mode 100644
index 7a793a7db24..00000000000
--- a/src/lib/pages/live.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @fileoveriew Entrypoint for web.dev LIVE page.
- */
-
-import '../components/EventCarousel';
-import '../components/EventMap';
-import '../components/EventSchedule';
-import '../components/EventStore';
-import '../components/EventTime';
-import '../components/EventQandA';
-import '../components/LivestreamContainer';
-import '../components/Subscribe';
-import '../components/ShareAction';
-import '../components/Tabs';
-
-import '../components/base';
diff --git a/src/lib/pages/measure.js b/src/lib/pages/measure.js
index f6e549f8a69..ffe40d4f9dc 100644
--- a/src/lib/pages/measure.js
+++ b/src/lib/pages/measure.js
@@ -3,16 +3,4 @@
  * Web Components from the rest of web.dev.
  */
 
-import '../components/ProgressBar';
-import '../components/SparklineChart';
-import '../components/LighthouseGauge';
-import '../components/LighthouseScoresAudits';
-import '../components/LighthouseScoresContainer';
-import '../components/LighthouseScoresMeta';
-import '../components/LighthouseScoresMetrics';
-import '../components/LighthouseScoresStats';
-import '../components/UrlChooser';
-import '../components/UrlChooserContainer';
-import '../components/SigninButton';
-
 import '../components/base';
diff --git a/src/lib/pages/newsletter.js b/src/lib/pages/newsletter.js
index 0095f4d126c..f8a8c877c7c 100644
--- a/src/lib/pages/newsletter.js
+++ b/src/lib/pages/newsletter.js
@@ -1,6 +1,5 @@
 /**
- * @fileoveriew Entrypoint for Newsletter page, which requires an extra Web
- * Components from the bulk of web.dev.
+ * @fileoveriew Entrypoint for Newsletter page.
  */
 
 import '../components/Subscribe';
diff --git a/src/lib/patterns.js b/src/lib/patterns.js
new file mode 100644
index 00000000000..7fadb8aea50
--- /dev/null
+++ b/src/lib/patterns.js
@@ -0,0 +1,125 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A singleton that collects all Code Patterns from .md files
+ *   under "basePath" directory. Code Patterns then get exposed as part of
+ *   the _data directory, for use in eleventy.
+ */
+
+const glob = require('fast-glob');
+const fs = require('fs');
+const path = require('path');
+const matter = require('gray-matter');
+
+const stripDot = /^\./;
+
+const contentRoot = path.join(
+  __dirname,
+  '..',
+  '..',
+  'src',
+  'site',
+  'content',
+  'en',
+);
+const basePath = path.join(contentRoot, 'patterns');
+
+const patternPaths = [
+  path.join(contentRoot, 'patterns', '**', 'index.md'),
+  path.join(
+    contentRoot,
+    'handbook',
+    'content-types',
+    'example-pattern',
+    '**',
+    'index.md',
+  ),
+];
+
+const patterns = glob.sync(patternPaths);
+
+/** @type {CodePatternSets} */
+const allPatternSets = {};
+
+/** @type {CodePatterns} */
+const allPatterns = patterns.reduce((patterns, file) => {
+  const id = path.relative(basePath, path.dirname(file));
+  const fileContents = matter(fs.readFileSync(file, 'utf-8'));
+  const suite = path.dirname(id);
+
+  // This only reads front-matter from files, and doesn't inherit any data
+  // from Eleventy data cascade (e.g. "11tydata.js" files).
+  if (fileContents.data.layout === 'pattern-set') {
+    const set = {
+      id,
+      title: fileContents.data.title,
+      description: fileContents.data.description,
+      hero: fileContents.data.hero,
+      draft: Boolean(fileContents.data.draft),
+      rawContent: fileContents.content,
+      suite: suite !== '.' ? suite : null,
+    };
+    /** @type {CodePatternSet} */
+    allPatternSets[id] = set;
+  }
+
+  if (fileContents.data.layout !== 'pattern') {
+    return patterns;
+  }
+
+  const assetsPaths = glob.sync(path.join(path.dirname(file), 'assets', '*'));
+
+  /** @type {CodePatternAssets} */
+  const assets = assetsPaths.reduce((out, assetPath) => {
+    // Ignore images.
+    if (/\.(?:png|jpe?g|avif|webp|gif|svg)$/.test(assetPath)) {
+      return out;
+    }
+    const basename = path.basename(assetPath);
+    const type = path.extname(assetPath).replace(stripDot, '');
+    const content = fs.readFileSync(assetPath, 'utf-8');
+    out[basename] = {
+      content,
+      type,
+      name: basename,
+    };
+    return out;
+  }, {});
+
+  // Use external demo url from frontmatter, if set, or default to local demo.
+  const demo =
+    fileContents.data.demo || path.join('/', 'patterns', id, 'demo.html');
+  const set = path.dirname(id);
+  patterns[id] = /** @type {CodePattern} */ ({
+    id,
+    ...fileContents.data,
+    rawContent: fileContents.content,
+    assets,
+    demo,
+    set,
+  });
+  return patterns;
+}, /** @type {CodePatterns} */ ({}));
+
+module.exports = {
+  patterns: function () {
+    return allPatterns;
+  },
+  sets: function () {
+    return allPatternSets;
+  },
+};
diff --git a/src/lib/psi-service.js b/src/lib/psi-service.js
new file mode 100644
index 00000000000..a581a9f3c4f
--- /dev/null
+++ b/src/lib/psi-service.js
@@ -0,0 +1,40 @@
+const PSI_API =
+  'https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed';
+// This is referrer-restricted key, safe to be stored on the client.
+const API_KEY = 'AIzaSyCWNar-IbOaQT1WX_zfAjUxG01x7xErbSc';
+
+/**
+ * Queries the Pagespeed Insights API on the given URL. Returns the run's JSON,
+ * or throws an Error if there was a problem.
+ *
+ * @param {string} url to request a Lighthouse run (via PSI)
+ * @return {Promise<Object>} a single lighthouse run
+ */
+export async function runPsi(url) {
+  const categories = [
+    'ACCESSIBILITY',
+    'BEST_PRACTICES',
+    'PERFORMANCE',
+    // 'PWA', // Disable until installability results are correct. https://crbug.com/1267022#c7
+    'SEO',
+  ];
+  const params = new URLSearchParams();
+  params.append('strategy', 'MOBILE');
+  params.append('url', url);
+  params.append('key', API_KEY);
+  for (const category of categories) {
+    params.append('category', category);
+  }
+  const requestUrl = `${PSI_API}?${params.toString()}`;
+  const resp = await fetch(requestUrl, {
+    method: 'GET',
+  });
+  const r = await resp.json();
+
+  if (!resp.ok) {
+    throw new Error(r['errors']);
+  } else if (!r.lighthouseResult) {
+    throw new Error('Unexpected result, no lighthouseResult key');
+  }
+  return r.lighthouseResult;
+}
diff --git a/src/lib/store.js b/src/lib/store.js
index 28847ffcc15..2dc12f108a0 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -38,7 +38,7 @@ const initialState = {
   currentUrl: window.location.pathname,
   currentLanguage: document.documentElement.getAttribute('lang'),
   isOffline: Boolean(getMeta('offline')),
-  isSideNavExpanded: false,
+  isNavigationDrawerOpen: false,
   isModalOpen: false,
   isSearchExpanded: false,
 
@@ -49,20 +49,19 @@ const initialState = {
   // cookie policy.
   // We automatically accept cookies in dev and test environments so the cookie
   // banner doesn't interfere with tests.
-  userAcceptsCookies: !isProd,
+  cookiePreference: isProd ? null : 'accepts',
 
   // Handle hiding/showing the snackbar.
   showingSnackbar: false,
   snackbarType: null,
 
-  userPreferredLanguage: '',
-
   // Used to override the current time for web.dev/LIVE testing.
   timeOffset,
 
   // Data for the current web.dev/LIVE event.
   eventDays: [],
   activeEventDay: null, // livestream shown for this day
+  gtmScriptLoaded: false,
 };
 
 let store;
diff --git a/src/lib/sw.js b/src/lib/sw.js
deleted file mode 100644
index 219d154758e..00000000000
--- a/src/lib/sw.js
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * @fileoverview Service Worker entrypoint for web.dev.
- */
-
-import * as idb from 'idb-keyval';
-import manifest from 'cache-manifest';
-import {initialize as initializeGoogleAnalytics} from 'workbox-google-analytics';
-import * as workboxRouting from 'workbox-routing';
-import * as workboxStrategies from 'workbox-strategies';
-import {CacheableResponsePlugin} from 'workbox-cacheable-response';
-import {ExpirationPlugin} from 'workbox-expiration';
-import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
-import {cacheNames as workboxCacheNames} from 'workbox-core';
-import {matchSameOriginRegExp} from './utils/sw-match.js';
-
-const cacheNames = {webdevCore: 'webdev-core', ...workboxCacheNames};
-
-/**
- * Configure default cache for some common web.dev assets: images, CSS, JS, partial template. This
- * doesn't match general HTML or other files, so we disable directoryIndex and cleanURLs.
- *
- * This must occur first, as we cache images that are also matched by runtime handlers below. See
- * this workbox issue for updates: https://github.com/GoogleChrome/workbox/issues/2402
- */
-precacheAndRoute(manifest, {
-  cleanURLs: false,
-  directoryIndex: '',
-});
-
-// Architecture revision of the Service Worker. If the previously saved revision doesn't match,
-// then this will cause clients to be aggressively claimed and reloaded on install/activate.
-// Used when the design of the SW changes dramatically.
-const serviceWorkerArchitecture = 'v3';
-
-let replacingPreviousServiceWorker = false;
-
-self.addEventListener('install', (event) => {
-  // This is non-null if there was a previous Service Worker registered. Record for "activate", so
-  // that a lack of current architecture can be seen as a reason to reload our clients.
-  if (self.registration.active) {
-    replacingPreviousServiceWorker = true;
-  }
-  event.waitUntil(self.skipWaiting());
-});
-
-self.addEventListener('activate', (event) => {
-  // This deletes the default Workbox runtime cache, which was previously growing unbounded. At the
-  // start of March 2020, caches must now have explicit expirations and custom names.
-  event.waitUntil(caches.delete(cacheNames.runtime));
-});
-
-self.addEventListener('activate', (event) => {
-  const p = Promise.resolve().then(async () => {
-    const previousArchitecture = await idb.get('arch');
-    if (previousArchitecture === serviceWorkerArchitecture) {
-      return; // no arch change, don't force reload, upgrade will happen over time
-    }
-    await idb.set('arch', serviceWorkerArchitecture);
-
-    // If the architecture changed (including due to an initial install), claim our clients so they
-    // get the 'controllerchange' event and take over their network requests.
-    await self.clients.claim();
-
-    // If this is not a new install, and the architecture has changed, force an immediate reload.
-    // Installs from March 2020 will do this in the client scope (but we need this for safety).
-    if (replacingPreviousServiceWorker) {
-      const windowClients = await self.clients.matchAll({
-        includeUncontrolled: true,
-        type: 'window',
-      });
-      windowClients.map((client) => client.navigate(client.url));
-    }
-  });
-  event.waitUntil(p);
-});
-
-initializeGoogleAnalytics();
-
-const externalExpirationPlugin = new ExpirationPlugin({
-  maxAgeSeconds: 60 * 60 * 24 * 365, // 1 yr
-});
-
-const contentExpirationPlugin = new ExpirationPlugin({
-  maxEntries: 50, // store the most recent ~50 articles
-});
-
-const assetExpirationPlugin = new ExpirationPlugin({
-  maxAgeSeconds: 60 * 60 * 24 * 7, // 1 wk
-  maxEntries: 100, // allow a large number of images, but expire quickly
-});
-
-// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
-workboxRouting.registerRoute(
-  /^https:\/\/fonts\.googleapis\.com/,
-  new workboxStrategies.StaleWhileRevalidate({
-    cacheName: 'google-fonts-stylesheets',
-    plugins: [externalExpirationPlugin],
-  }),
-);
-
-// Cache the underlying font files with a cache-first strategy for 1 year.
-workboxRouting.registerRoute(
-  /^https:\/\/fonts\.gstatic\.com/,
-  new workboxStrategies.CacheFirst({
-    cacheName: 'google-fonts-webfonts',
-    plugins: [
-      new CacheableResponsePlugin({
-        statuses: [0, 200],
-      }),
-      externalExpirationPlugin,
-    ],
-  }),
-);
-
-/**
- * Match fetches for partials, for SPA requests. Matches requests like:
- *   - /index.json
- *   - /foo-bar/index.json
- *   - /foo-bar/many/parts/test.json
- *
- * This matches all JSON files, but the only JSON files served on our domain are
- * partials.
- */
-const partialPathRe = new RegExp('^/([\\w-]+/)*\\w+\\.json$');
-const partialStrategy = new workboxStrategies.NetworkFirst({
-  cacheName: 'webdev-html-cache-v1', // nb. We used to cache HTML here, so we name it the same
-  plugins: [contentExpirationPlugin],
-});
-
-const partialMatch = matchSameOriginRegExp(partialPathRe);
-workboxRouting.registerRoute(partialMatch, partialStrategy);
-
-/**
- * Cache images that aren't included in the original manifest, such as author profiles.
- */
-workboxRouting.registerRoute(
-  new RegExp('/images/.*'),
-  new workboxStrategies.StaleWhileRevalidate({
-    cacheName: 'webdev-assets-cache-v1',
-    plugins: [assetExpirationPlugin],
-  }),
-);
-
-/**
- * Matches normal web.dev routes. This will match pages like:
- *   - /
- *   - /foo-bar                  # without trailing slash
- *   - /foo-bar/
- *   - /zing/hello/
- *   - /test/page/index.html     # trailing /index.html is special
- *   - /hello/other.html         # also allows any html page
- *   - ///////////.html          # valid but wrong
- *
- * This won't match any URL that contains a "." except for a trailing ".html".
- *
- * Internally, the handler fetches the required partial using `partialStrategy`,
- * and generates the page's real HTML based on the layout template. This can be
- * an offline page if there was a network failure, but other failures (including
- * a 404) fall through to the catch handler which does a network fetch.
- */
-const normalMatch = matchSameOriginRegExp(
-  new RegExp('^/[\\w-/]*(?:|\\.html)$'),
-);
-workboxRouting.registerRoute(normalMatch, async ({url}) => {
-  let pathname = url.pathname;
-
-  // Ensure that the pathname always ends with ".html". This means that URLs
-  // ending with "foo.html" are valid, and we add a default "index.html" if
-  // it's otherwise missing.
-  if (!pathname.endsWith('.html')) {
-    if (!pathname.endsWith('/')) {
-      // Special-case a URL that doesn't end with "/". We must redirect before
-      // returning content as otherwise relative URLs don't work.
-      // This is not a problem as:
-      //   * this is occuring almost immediately (no network traffic)
-      //   * our webserver treats "/foo" and "/foo/" the same for other folders
-      //     and for the _redirects.yaml handler (i.e., a 404 on /foo and /foo/
-      //     will be treated the same way)
-      //   * a _real_ network request to "/foo" gets 301'ed to "/foo/"
-      return Response.redirect(pathname + '/' + url.search, 301);
-    }
-    pathname += 'index.html';
-  }
-
-  // As we have a fully-formed URL with a trailing ".html", then just replace
-  // it to get the path of its respective partial.
-  const partialPath = pathname.replace(/\.html$/, '.json');
-
-  let response;
-  try {
-    // Use the same strategy for partials when hydrating a full request. Note
-    // that this doesn't implicitly invoke the global catch handler (as we're
-    // just using the strategy itself), so failures here flow to the catch
-    // block below.
-    const request = new Request(partialPath);
-    response = await partialStrategy.handle({request});
-  } catch (e) {
-    // Offline pages are served with the default 200 status.
-    response = await offlinePartialResponse();
-  }
-
-  // If we can't get a real response (or the offline response), go to the
-  // network proper. This includes for 404 pages, as we don't want to mask a
-  // redirect handlers.
-  if (!response.ok) {
-    throw new Error(
-      `unhandled status for normal route '${url.pathname}': ${response.status}`,
-    );
-  }
-  const partial = await response.json();
-
-  const meta = partial.offline ? '<meta name="offline" value="true" />' : '';
-  const title = `<title>${partial.title || 'web.dev'}</title>`;
-  const rssHref = partial.rss || '/feed.xml';
-  const rssTitle =
-    partial.rss !== '/feed.xml'
-      ? `${partial.title} on web.dev`
-      : 'web.dev feed';
-  const rss = `<link rel="alternate" href="${rssHref}" type="application/atom+xml" data-title="${rssTitle}" />`;
-
-  const layoutTemplate = await templateForPartial();
-  const output = layoutTemplate
-    .replace('<!-- %_HEAD_REPLACE_% -->', `${meta}\n${title}\n${rss}`)
-    .replace('%_CONTENT_REPLACE_%', partial.raw);
-  const headers = new Headers();
-  headers.append('Content-Type', 'text/html');
-  return new Response(output, {headers, status: response.status});
-});
-
-/**
- * @return {!Promise<string>} partial template to use in hydration
- */
-async function templateForPartial() {
-  const cachedResponse = await matchPrecache('/sw-partial-layout.partial');
-  if (!cachedResponse) {
-    // This occurs in development when the partial template isn't precached.
-    try {
-      return await fetch('/sw-partial-layout.partial');
-    } catch (e) {
-      console.warn('could not go to network for partial in dev', e);
-    }
-    return `<!DOCTYPE html>
-<head>
-<!-- %_HEAD_REPLACE_% -->
-</head>
-<body>
-<h1>web.dev dev partial</h1>
-%_CONTENT_REPLACE_%
-</body>
-</html>`;
-  }
-  return cachedResponse.text();
-}
-
-/**
- * @return {!Promise<Response>} response for the offline page's partial
- */
-async function offlinePartialResponse() {
-  const cachedResponse = await matchPrecache('/offline/index.json');
-  if (!cachedResponse) {
-    // This occurs in development when the offline partial isn't precached.
-    return new Response(
-      JSON.stringify({offline: true, raw: '<h1>Dev offline</h1>', title: ''}),
-    );
-  }
-  return cachedResponse;
-}
-
-workboxRouting.setCatchHandler(async ({url, request}) => {
-  // If we failed to fetch a partial, use the offline partial.
-  if (partialMatch({url})) {
-    return offlinePartialResponse();
-  }
-
-  // Go to the network for 'normal' pages. This will only fire if there's an
-  // internal error with the normalMatch route handler, above.
-  if (normalMatch({url})) {
-    return fetch(request);
-  }
-});
diff --git a/src/lib/urls.js b/src/lib/urls.js
index 529c1c58f53..66579b30d9f 100644
--- a/src/lib/urls.js
+++ b/src/lib/urls.js
@@ -1,11 +1,11 @@
-import lang from './utils/language';
-
 /**
  * @param {string} url containing pathname and search only
  * @return {string} normalized URL
  */
 export function normalizeUrl(url) {
-  const u = new URL(url, window.location);
+  url = url.replace(/\/+/g, '/'); // replace any occurance of "////" with "/"
+
+  const u = new URL(url, window.location.toString());
   let pathname = u.pathname;
 
   if (pathname.endsWith('/index.html')) {
@@ -20,11 +20,3 @@ export function normalizeUrl(url) {
 
   return pathname + u.search;
 }
-
-export function getCanonicalPath(path) {
-  const parts = path.split('/');
-  if (parts[1] && lang.isValidLanguage(parts[1])) {
-    parts.splice(1, 1);
-  }
-  return parts.join('/');
-}
diff --git a/src/lib/utils/abort-controller-polyfill.js b/src/lib/utils/abort-controller-polyfill.js
index 5dc658998a9..e64d021d56c 100644
--- a/src/lib/utils/abort-controller-polyfill.js
+++ b/src/lib/utils/abort-controller-polyfill.js
@@ -2,6 +2,7 @@
  * An incredibly simple AbortController polyfill. Does not actually abort in-flight fetch()
  * requests.
  */
+/** @type AbortController */
 class AbortControllerPolyfill {
   constructor() {
     let aborted = false;
@@ -24,6 +25,9 @@ class AbortControllerPolyfill {
           handlers.push(fn);
         }
       },
+      onabort: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => undefined,
     });
   }
 }
diff --git a/src/lib/utils/debounce.js b/src/lib/utils/debounce.js
index 8da2840d5ce..ac0cc49cb50 100644
--- a/src/lib/utils/debounce.js
+++ b/src/lib/utils/debounce.js
@@ -3,7 +3,7 @@
  * a particular interval.
  * @param {!Function} func A function to debounce based on the wait time.
  * @param {!number} wait Time in milliseconds to wait before invoking function.
- * @return {Function} A debounced copy of the function.
+ * @return {() => void | Promise<void> | TODO} A debounced copy of the function.
  */
 export const debounce = (func, wait) => {
   if (!func) {
diff --git a/src/lib/utils/escape-html.js b/src/lib/utils/escape-html.js
new file mode 100644
index 00000000000..184d399d3ef
--- /dev/null
+++ b/src/lib/utils/escape-html.js
@@ -0,0 +1,20 @@
+/**
+ * Sanitize an HTML string by escaping < and > characters.
+ * @param {string} str A string to sanitize
+ * @return {string}
+ */
+export const escapeHtml = (str) => {
+  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+
+/**
+ * Allow a specific tag to be unescaped.
+ * @param {string} str A string which has already been escaped
+ * @param {string} tag The html tag to allow. E.g. "strong"
+ * @return {string}
+ */
+export const allowHtml = (str, tag) => {
+  const open = new RegExp(`&lt;${tag}&gt;`, 'g');
+  const close = new RegExp(`&lt;/${tag}&gt;`, 'g');
+  return str.replace(open, `<${tag}>`).replace(close, `</${tag}>`);
+};
diff --git a/src/lib/utils/firebase-loader.js b/src/lib/utils/firebase-loader.js
deleted file mode 100644
index f1c94801c5f..00000000000
--- a/src/lib/utils/firebase-loader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @fileoverview Dynamic loading code for Firebase and libraries.
- */
-
-/**
- * @type {!Object<!Promise>}
- */
-const libs = {};
-
-const firebasePrefix = '//www.gstatic.com/firebasejs/6.6.1';
-
-/**
- * Loads the specific Firebase library (or returns the previous cached load).
- *
- * @param {string} library to load
- * @return {!Promise<void>} for library
- */
-function internalLoad(library) {
-  if (library in libs) {
-    return libs[library];
-  }
-
-  const p = new Promise((resolve, reject) => {
-    const s = document.createElement('script');
-    s.src = `${firebasePrefix}/firebase-${library}.js`;
-    s.async = false; // prevent misordered execution
-
-    s.onerror = reject;
-    s.onload = () => resolve();
-
-    document.head.append(s);
-  });
-  libs[library] = p;
-  return p;
-}
-
-/**
- * Loads a number of named Firebase libaries (or their cached previous loads).
- *
- * @param {...string} names to load
- * @return {!Promise<void>}
- */
-export default function loadFirebase(...names) {
-  return Promise.all(names.map(internalLoad));
-}
diff --git a/src/lib/utils/generate-salt.js b/src/lib/utils/generate-salt.js
index 022fb45661f..bc39d4a3d49 100644
--- a/src/lib/utils/generate-salt.js
+++ b/src/lib/utils/generate-salt.js
@@ -1,7 +1,7 @@
 /**
  * Generates a random string that can be used to ensure uniqueness of
  * the elements id on a page.
- * @param {string} idPrefix An id prefix to be followed by the generated salt.
+ * @param {string} [idPrefix] An id prefix to be followed by the generated salt.
  *     Used to check the uniqueness of the outcome id (prefix + salt).
  * @return {string} Id salt.
  */
diff --git a/src/lib/utils/language.js b/src/lib/utils/language.js
index 2f7e7410c43..47806a30981 100644
--- a/src/lib/utils/language.js
+++ b/src/lib/utils/language.js
@@ -10,9 +10,36 @@
  */
 const languageNames = {
   en: 'English',
-  // pl: 'Polish', TODO: Uncomment when PL language is prod-ready.
+  pl: 'Polski',
+  es: 'Español',
+  ko: '한국어',
+  zh: '中文',
+  ru: 'Русский',
+  pt: 'Português',
+  ja: '日本語',
+  de: 'Deutsch',
+  fr: 'Français',
 };
 
+/**
+ * When we display a list of translations available for a given page,
+ * use this ordering for the names of the languages.
+ * See https://github.com/GoogleChrome/web.dev/issues/7430
+ * @const
+ */
+const languageOrdering = [
+  'de',
+  'en',
+  'es',
+  'fr',
+  'pl',
+  'pt',
+  'ru',
+  'zh',
+  'ja',
+  'ko',
+];
+
 /**
  * A default language for the site.
  * @const
@@ -34,15 +61,10 @@ function isValidLanguage(lang) {
   return supportedLanguages.indexOf(lang) > -1;
 }
 
-function getLanguageFromPath(path) {
-  const parts = path.split('/');
-  return isValidLanguage(parts[1]) && parts[1];
-}
-
-export default {
-  languageNames,
+module.exports = {
   defaultLanguage,
   isValidLanguage,
+  languageNames,
+  languageOrdering,
   supportedLanguages,
-  getLanguageFromPath,
 };
diff --git a/src/lib/utils/router.js b/src/lib/utils/router.js
index 91c8def4c48..f71ae60431c 100644
--- a/src/lib/utils/router.js
+++ b/src/lib/utils/router.js
@@ -1,6 +1,6 @@
 import './abort-controller-polyfill';
-import {store} from '../store';
-import language from './language';
+import {addPageToContentIndex} from '../content-indexing';
+import {logError} from '../analytics';
 
 let globalHandler;
 let recentActiveUrl; // current URL not including hash
@@ -71,9 +71,13 @@ function onClick(e) {
     return;
   }
 
+  if (!(e.target instanceof HTMLElement)) {
+    return;
+  }
+
   // nb. If this ever supports Shadow DOM, we can use .composedPath to find
   // the nearest link inside an open Shadow Root.
-  const link = e.target.closest('a[href]');
+  const link = /** @type {!HTMLAnchorElement} */ (e.target.closest('a[href]'));
   if (
     !link ||
     link.target ||
@@ -89,16 +93,23 @@ function onClick(e) {
 }
 
 /**
- * @TODO how is listen being reassigned as a function?
+ * Exports the 'default' listener function. This is a let so we can change it
+ * after it has been called once.
+ *
+ * @param {function(!Object): ?} handler which returns an optional Promise
+ */
+export let listen = defaultListen;
+
+/**
  * Adds global page listeners for SPA routing.
  *
  * @param {function(!Object): ?} handler which returns an optional Promise
  */
-export function listen(handler) {
+function defaultListen(handler) {
   if (!handler) {
     throw new Error('need handler');
   }
-  listen = () => { // eslint-disable-line
+  listen = () => {
     throw new Error('listen can only be called once');
   };
 
@@ -109,12 +120,6 @@ export function listen(handler) {
     if (!isNavigation) {
       url = getUrl();
       hash = window.location.hash;
-    } else {
-      // If user has a preferred language, use it in the request.
-      const lang = store.getState().userPreferredLanguage;
-      if (lang && lang !== language.defaultLanguage) {
-        url = '/' + lang + url;
-      }
     }
 
     const firstRun = previousController === null;
@@ -186,7 +191,7 @@ export function route(url) {
   if (!globalHandler) {
     throw new Error('listen() not called');
   }
-  const u = new URL(url, window.location);
+  const u = new URL(url, window.location.toString());
 
   // Check if this is the same URL, but has a hash. If so, allow the *browser*
   // to move to the correct target on the page.
@@ -198,6 +203,10 @@ export function route(url) {
   globalHandler(candidateUrl, u.hash).then((aborted) => {
     if (!aborted) {
       scrollToHashOrTop(u.hash);
+      addPageToContentIndex(u.href).catch((error) => {
+        console.warn('could not index page', u.href, error);
+        logError(error, 'Content Indexing error');
+      });
     }
   });
   return true;
diff --git a/src/lib/utils/sw-match.js b/src/lib/utils/sw-match.js
deleted file mode 100644
index 3c0957e1a44..00000000000
--- a/src/lib/utils/sw-match.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Returns a helper which matches a whole pathname on the Service Worker's host.
- * The helper returns the matched groups from the RegExp.
- *
- * @param {!RegExp} pathRegexp
- * @return {function({url: !URL}): (boolean|!Array<string>)}
- */
-export function matchSameOriginRegExp(pathRegexp) {
-  return ({url}) => {
-    if (url.host !== self.location.host) {
-      return false;
-    }
-    const m = pathRegexp.exec(url.pathname);
-    if (!m) {
-      return false;
-    }
-    return Array.from(m);
-  };
-}
diff --git a/src/lib/utils/time-offset.js b/src/lib/utils/time-offset.js
index 6b244cc68d8..46faacf97c6 100644
--- a/src/lib/utils/time-offset.js
+++ b/src/lib/utils/time-offset.js
@@ -40,7 +40,7 @@ export function getTimeOffset(raw) {
   if (+d) {
     const now = new Date();
     console.warn('debug time start at', d);
-    return d - now;
+    return +d - +now;
   }
   return 0;
 }
diff --git a/src/lib/utils/underscore-import-polyfill.js b/src/lib/utils/underscore-import-polyfill.js
deleted file mode 100644
index 1295cc17f3e..00000000000
--- a/src/lib/utils/underscore-import-polyfill.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const seen = {};
-
-/**
- * Provides a simple dynamic `import()` polyfill on `window._import`.
- *
- * Does not return the exports from the module: web.dev doesn't use import this way.
- *
- * @param {string} src
- * @return {!Promise<?>}
- */
-window._import = (src) => {
-  // Rollup generates relative paths, but they're all relative to top level.
-  if (src.startsWith('./')) {
-    src = src.substr(2);
-  }
-
-  // We only need this cache for Edge, as it doesn't fire onload for module
-  // scripts that have already loaded, unlike every other browser. When Edge
-  // support is dropped, we can just include the Promise below.
-  const previous = seen[src];
-  if (previous !== undefined) {
-    return previous;
-  }
-
-  const p = new Promise((resolve, reject) => {
-    const n = Object.assign(document.createElement('script'), {
-      src: `/${src}`, // Rollup generates sources only in top-level
-      type: 'module',
-      onload: () => resolve(),
-      onerror: reject,
-    });
-    document.head.append(n);
-  });
-
-  seen[src] = p;
-  return p;
-};
diff --git a/src/lib/utils/web-share.js b/src/lib/utils/web-share.js
index 6f0a1f22df1..e6b1cbde437 100644
--- a/src/lib/utils/web-share.js
+++ b/src/lib/utils/web-share.js
@@ -2,7 +2,7 @@
  * @return {boolean} whether Web Share is supported on this browser
  */
 export function isWebShareSupported() {
-  if (!('share' in navigator)) {
+  if (!('share' in window.navigator)) {
     return false;
   }
 
@@ -11,7 +11,7 @@ export function isWebShareSupported() {
   // https://bugs.chromium.org/p/chromium/issues/detail?id=903010
   if ('canShare' in navigator) {
     const url = `https://${window.location.hostname}`;
-    return navigator.canShare({url});
+    return window.navigator.canShare({url});
   }
 
   return true;
diff --git a/src/lib/webcomponents-config.js b/src/lib/webcomponents-config.js
deleted file mode 100644
index 7132d84108e..00000000000
--- a/src/lib/webcomponents-config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @fileoverview Configures the WebComponents polyfill path.
- *
- * This needs to occur in its own file that is included _before_ the loader itself, because ES6
- * modules are all hoisted in the order in which they are found.
- */
-
-// Set the production path for the Web Components polyfills. Must have leading and trailing slash.
-// This actually looks inside the root PLUS "bundles/<filename>".
-// This isn't configurable as we don't need the polyfill in dev.
-window.WebComponents = {root: '/lib/webcomponents/'};
diff --git a/src/misc/manifest.webmanifest b/src/misc/manifest.webmanifest
index 48124cae649..2f9c52a21df 100644
--- a/src/misc/manifest.webmanifest
+++ b/src/misc/manifest.webmanifest
@@ -12,12 +12,38 @@
       "sizes": "192x192",
       "type": "image/png"
     },
+    {
+      "src": "/images/android-chrome-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
     {
       "src": "/images/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ],
+  "description": "Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.",
+  "lang": "en",
+  "categories": ["education", "news"],
+  "screenshots": [
+    {
+      "src": "/images/screenshot1.png",
+      "sizes": "540x720",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/screenshot2.png",
+      "sizes": "540x720",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/screenshot3.png",
+      "sizes": "540x720",
+      "type": "image/png"
+    }
+  ],
   "shortcuts": [
     {
       "name": "Measure",
diff --git a/src/misc/nuke-sw.js b/src/misc/sw.js
similarity index 100%
rename from src/misc/nuke-sw.js
rename to src/misc/sw.js
diff --git a/src/pattern-library/patterns/code-blocks/code-blocks.md b/src/pattern-library/patterns/code-blocks/code-blocks.md
new file mode 100644
index 00000000000..cb818d442bc
--- /dev/null
+++ b/src/pattern-library/patterns/code-blocks/code-blocks.md
@@ -0,0 +1 @@
+You should implement the `<web-copy-code>` web component for code blocks to insure users can copy the code with ease.
diff --git a/src/scss/_config.scss b/src/scss/_config.scss
new file mode 100644
index 00000000000..1d5473fa92b
--- /dev/null
+++ b/src/scss/_config.scss
@@ -0,0 +1,208 @@
+/**
+ * IMPORTED TOKENS
+ * These are generated with the design tokens data
+*/
+@import 'tokens';
+
+/**
+ * IMPORTED THEMES
+ * These themes are for dark/light mode and abstract CSS Custom
+ * property references to design tokens into more contextual references
+*/
+@import 'themes';
+
+/**
+ * CORE CONFIG
+ * This powers everything from utility class generation to breakpoints
+ * to enabling/disabling pre-built components/utilities.
+ */
+$gorko-config: (
+  'css-vars': (
+    'color': $gorko-colors,
+    'themes': $gorko-themes,
+  ),
+  'bg': (
+    'items': $gorko-theme-keys,
+    'output': 'standard',
+    'property': 'background',
+  ),
+  't-bg': (
+    'items': $gorko-colors,
+    'output': 'standard',
+    'property': 'background',
+  ),
+  'box': (
+    'items': (
+      'hidden': 'none',
+      'block': 'block',
+      'inline-block': 'inline-block',
+      'flex': 'flex',
+    ),
+    'output': 'responsive',
+    'property': 'display',
+  ),
+  'color': (
+    'items': $gorko-theme-keys,
+    'output': 'standard',
+    'property': 'color',
+  ),
+  't-color': (
+    'items': $gorko-colors,
+    'output': 'standard',
+    'property': 'color',
+  ),
+  'flex-dir': (
+    'items': (
+      'row': 'row',
+      'rev': 'row-reverse',
+      'column': 'column',
+    ),
+    'output': 'standard',
+    'property': 'flex-direction',
+  ),
+  'flex': (
+    'items': (
+      'none': 'none',
+      'auto': 'auto',
+    ),
+    'output': 'standard',
+    'property': 'flex',
+  ),
+  'flex-align': (
+    'items': (
+      'baseline': 'baseline',
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+    ),
+    'output': 'responsive',
+    'property': 'align-items',
+  ),
+  'flex-justify': (
+    'items': (
+      'baseline': 'baseline',
+      'start': 'flex-start',
+      'center': 'center',
+      'end': 'flex-end',
+    ),
+    'output': 'responsive',
+    'property': 'justify-content',
+  ),
+  'flex-wrap': (
+    'items': (
+      'yes': 'wrap',
+      'no': 'nowrap',
+    ),
+    'output': 'responsive',
+    'property': 'flex-wrap',
+  ),
+  'flow-space': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': '--flow-space',
+  ),
+  'font': (
+    'items': $gorko-fonts,
+    'output': 'standard',
+    'property': 'font-family',
+  ),
+  'gap-inline': (
+    'items':
+      map-merge(
+        $gorko-space-scale,
+        (
+          'auto': 'auto',
+        )
+      ),
+    'output': 'standard',
+    'property': 'margin-inline',
+  ),
+  'gap-top': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': 'margin-top',
+  ),
+  'gap-bottom': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': 'margin-bottom',
+  ),
+  'gutter': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': '--gutter',
+  ),
+  'hidden': (
+    'items': (
+      'yes': 'none',
+      'no': 'revert',
+    ),
+    'output': 'responsive',
+    'property': 'display',
+  ),
+  'leading': (
+    'items': (
+      'flat': '1.2',
+      'short': '1.35',
+      'regular': '1.7',
+    ),
+    'output': 'standard',
+    'property': 'line-height',
+  ),
+  'measure': (
+    'items': (
+      'short': '40ch',
+      'long': '65ch',
+    ),
+    'output': 'standard',
+    'property': 'max-width',
+  ),
+  'pad': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': 'padding',
+  ),
+  'pad-block': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': 'padding-block',
+  ),
+  'pad-inline': (
+    'items': $gorko-space-scale,
+    'output': 'standard',
+    'property': 'padding-inline',
+  ),
+  'ta': (
+    'items': (
+      'center': 'center',
+      'left': 'left',
+      'right': 'right',
+    ),
+    'output': 'standard',
+    'property': 'text-align',
+  ),
+  'text': (
+    'items': $gorko-size-scale,
+    'output': 'standard',
+    'property': 'font-size',
+  ),
+  'tt': (
+    'items': (
+      'upper': 'uppercase',
+    ),
+    'output': 'standard',
+    'property': 'text-transform',
+  ),
+  'weight': (
+    'items': $gorko-font-weights,
+    'output': 'standard',
+    'property': 'font-weight',
+  ),
+  'breakpoints': (
+    'xs': '(max-width: 25em)',
+    'md': '(min-width: 50em)',
+    'lg': '(min-width: 80em)',
+    'xl': '(min-width: 106em)',
+    'md-max': '(max-width: 591px)', /* For temporary compatibility with DCC */
+  ),
+);
diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss
new file mode 100644
index 00000000000..a51f2cad455
--- /dev/null
+++ b/src/scss/_fonts.scss
@@ -0,0 +1,110 @@
+// See: https://fonts.google.com/license/googlerestricted
+
+// cyrillic
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: local('Google Sans Regular'), local('GoogleSans-Regular'),
+    url('/fonts/google-sans/regular/cyrillic.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+// greek
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: local('Google Sans Regular'), local('GoogleSans-Regular'),
+    url('/fonts/google-sans/regular/greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+// vietnamese
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: local('Google Sans Regular'), local('GoogleSans-Regular'),
+    url('/fonts/google-sans/regular/vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+// latin-ext
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: local('Google Sans Regular'), local('GoogleSans-Regular'),
+    url('/fonts/google-sans/regular/latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+// latin
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: local('Google Sans Regular'), local('GoogleSans-Regular'),
+    url('/fonts/google-sans/regular/latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+// cyrillic
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: local('Google Sans Medium'), local('GoogleSans-Medium'),
+    url('/fonts/google-sans/bold/cyrillic.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+// greek
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: local('Google Sans Medium'), local('GoogleSans-Medium'),
+    url('/fonts/google-sans/bold/greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+// vietnamese
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: local('Google Sans Medium'), local('GoogleSans-Medium'),
+    url('/fonts/google-sans/bold/vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+// latin-ext
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: local('Google Sans Medium'), local('GoogleSans-Medium'),
+    url('/fonts/google-sans/bold/latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+// latin
+@font-face {
+  font-family: 'Google Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: local('Google Sans Medium'), local('GoogleSans-Medium'),
+    url('/fonts/google-sans/bold/latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
diff --git a/src/scss/_reset.scss b/src/scss/_reset.scss
new file mode 100644
index 00000000000..40ac305031b
--- /dev/null
+++ b/src/scss/_reset.scss
@@ -0,0 +1,71 @@
+// A modified version of the modern CSS reset https://piccalil.li/blog/a-modern-css-reset/
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd,
+pre {
+  margin: 0;
+}
+
+// Set core body defaults
+body {
+  min-height: 100vh;
+}
+
+// Remove list styles on ul, ol elements with a list role, which suggests
+// default styling will be removed.
+// https://github.com/hankchizljaw/modern-css-reset/issues/30
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+// Anchor elements that don't have a class get default styles
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+// Make images easier to work with
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+li img,
+p img {
+  display: inline-block;
+  vertical-align: sub;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+}
+
+// Remove the default border on iframes
+iframe {
+  border: 0;
+}
diff --git a/src/scss/_unresolved.scss b/src/scss/_unresolved.scss
new file mode 100644
index 00000000000..56b6cf702ca
--- /dev/null
+++ b/src/scss/_unresolved.scss
@@ -0,0 +1,17 @@
+// =============================================================================
+// UNRESOLVED
+//
+// Specifies behavior for unresolved elements. This uses the "unresolved"
+// class as lit doesn't render for a frame after :defined is removed.
+//
+// =============================================================================
+
+// Elements marked with the unresolved class are hidden until the JS is first
+*:not(body).unresolved {
+  display: none;
+}
+
+web-tabs.unresolved {
+  padding-top: 50px;
+  display: block;
+}
diff --git a/src/scss/blocks/_aside.scss b/src/scss/blocks/_aside.scss
new file mode 100644
index 00000000000..a566be029b4
--- /dev/null
+++ b/src/scss/blocks/_aside.scss
@@ -0,0 +1,42 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/aside
+.aside {
+  --gutter: 0.5rem;
+
+  @extend .flow;
+
+  padding: $global-gutter;
+  border-radius: $global-radius-large;
+
+  @include apply-utility('bg', 'mid-bg'); // For if no BG utility is added
+
+  a {
+    color: currentColor;
+    text-decoration-color: currentColor;
+  }
+
+  a:focus {
+    outline-color: currentColor;
+  }
+}
+
+.aside__icon,
+.aside svg {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+/// Blocks usually shouldn't control spacing, but
+/// the aside is often found in `.flow` contexts
+/// so we need to make sure the space above and below
+/// is consistent
+.aside,
+.aside + * {
+  @include apply-utility('flow-space', 'size-2');
+}
+
+/// Now, we want to make sure all spacing inside the
+/// element stays consistent too
+.aside > * {
+  @include apply-utility('flow-space', 'base');
+}
diff --git a/src/scss/blocks/_audio-player.scss b/src/scss/blocks/_audio-player.scss
new file mode 100644
index 00000000000..3c1f582fa33
--- /dev/null
+++ b/src/scss/blocks/_audio-player.scss
@@ -0,0 +1,32 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/audio-player
+.audio-player {
+  --cluster-vertical-alignment: flex-start;
+
+  padding: get-space('base');
+  flex-wrap: nowrap;
+
+  @include apply-utility('bg', 'mid-bg');
+
+  audio {
+    width: 100%;
+
+    &::-webkit-media-controls-panel {
+      padding: 0 0.5rem;
+    }
+
+    &::-webkit-media-controls-enclosure {
+      border-radius: $global-radius-base;
+      background: rgb(255 255 255 / 0.7);
+    }
+  }
+
+  img {
+    transform: translateY(0.5ex);
+  }
+}
+
+.audio-player__inner {
+  --flow-space: 0.5em;
+  flex: auto;
+}
diff --git a/src/scss/blocks/_author.scss b/src/scss/blocks/_author.scss
new file mode 100644
index 00000000000..f0eea8985ca
--- /dev/null
+++ b/src/scss/blocks/_author.scss
@@ -0,0 +1,109 @@
+.author {
+  display: flex;
+  gap: 1em;
+  align-items: flex-start;
+}
+
+.author__links {
+  --gutter: 0 1em;
+  --flow-space: 0.3em;
+
+  padding: 0;
+  font-size: 0.9em;
+
+  a {
+    color: currentColor;
+  }
+}
+
+.author__name {
+  font-style: normal;
+
+  a:not(:hover) {
+    text-decoration: none;
+  }
+}
+
+.author__bio {
+  --flow-space: 0.1em;
+  font-size: 0.9em;
+
+  @include apply-utility('color', 'mid-text');
+}
+
+.author__bio + .author__links {
+  --flow-space: 0.8em;
+}
+
+.author-profile {
+  &__name {
+    flex-wrap: nowrap;
+    margin-bottom: 30px;
+
+    .headline__title {
+      font-size: 24px;
+    }
+
+    .avatar,
+    .avatar > img {
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  &__socials {
+    margin: 2rem 0;
+  }
+
+  &__bio {
+    display: none;
+  }
+  
+  &__detail {
+    display: flex;
+    flex-direction: column-reverse;
+
+    > details {
+      display: block;
+    }
+  }
+
+  a:not(:hover) > svg {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  @include media-query('md') {
+    &__name {
+      flex-wrap: nowrap;
+
+      .headline__title {
+        font-size: 36px;
+      }
+
+      .avatar,
+      .avatar > img {
+        width: 120px;
+        height: 120px;
+      }
+    }
+  
+    &__detail {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0 !important;
+  
+      > details {
+        display: none;
+      }
+    }
+  
+    &__socials {
+      margin: 1.25rem 0 1rem;
+    }
+
+    &__bio {
+      display: block;
+    }
+  }
+}
+
diff --git a/src/scss/blocks/_banner.scss b/src/scss/blocks/_banner.scss
new file mode 100644
index 00000000000..4af79acfcf3
--- /dev/null
+++ b/src/scss/blocks/_banner.scss
@@ -0,0 +1,58 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/banner
+.banner {
+  --gutter: 0.5rem;
+
+  padding: 1.5em $global-gutter;
+  display: flex;
+  gap: 0 $global-gutter;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  font-size: get-size('size-0');
+}
+
+.banner__content {
+  @include apply-utility('leading', 'short');
+}
+
+.banner__actions {
+  $banner-actions-button-padding-x: 1rem;
+  $banner-actions-button-padding-y: 0.8rem;
+
+  flex: none; /// We don't want this to shrink
+  margin-inline-start: auto;
+  margin-block-start: auto;
+
+  button.button {
+    padding: $banner-actions-button-padding-y $banner-actions-button-padding-x;
+
+    @include apply-utility('text', 'size-0');
+  }
+
+  /// Let whatever button element's current hover state happen
+  button:not(:hover) {
+    background: transparent;
+  }
+}
+
+/// If the content has a cluster on it,
+/// we need to make some adjustments
+.banner__content.cluster {
+  --gutter: #{$global-gutter};
+
+  flex-wrap: nowrap;
+}
+
+.banner__img {
+  max-width: 2.5em;
+  max-height: 2.5em;
+  /// A slightly lighter background, regardless of current color
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/// Hides banner in print mode
+@media print {
+  .banner {
+    display: none !important;
+  }
+}
diff --git a/src/scss/blocks/_baseline.scss b/src/scss/blocks/_baseline.scss
new file mode 100644
index 00000000000..b433c56ae79
--- /dev/null
+++ b/src/scss/blocks/_baseline.scss
@@ -0,0 +1,66 @@
+.baseline {
+  border: 1px solid get-color('state-good');
+  border-radius: $global-radius-base;
+  padding: $global-gutter;
+
+
+  summary::before {
+    background-color: transparent;
+    border: none;
+  }
+
+  summary::after {
+    color: get-color('state-good');
+  }
+
+  summary:hover::before,
+  summary:focus::before {
+    background: get-color('state-good-bright');
+    outline: none;
+  }
+
+  &__title {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  &__icon {
+    display: inline-block;
+    vertical-align: sub;
+  }
+
+  &__keyword {
+    font-weight: 500;
+  }
+
+  &__browser {
+    background: get-color('state-good-bright');
+    padding: 0.4rem;
+    border-radius: 1.4rem;
+    margin-inline-end: 8px;
+
+    img {
+      width: 1.4rem;
+      height: 1.4rem;
+      background-color: transparent;
+      display: inline-block;
+    vertical-align: sub;
+    }
+
+    img + img {
+      margin-left: 0.4rem;
+    }
+  }
+
+  a {
+    text-transform: uppercase;
+    letter-spacing: .03ch;
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/src/scss/blocks/_brand.scss b/src/scss/blocks/_brand.scss
new file mode 100644
index 00000000000..f3eef3af136
--- /dev/null
+++ b/src/scss/blocks/_brand.scss
@@ -0,0 +1,33 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/brand
+.brand {
+  --gutter: 0.5rem;
+
+  svg {
+    width: 100%;
+    max-width: 8rem;
+    fill: var(--color-mid-text);
+  }
+}
+
+/// Sets the text color to be themeable
+/// If the logo SVG changes, make sure this
+/// pseudo-class is still accurate
+.brand__text {
+  fill: get-utility-value('color', 'mid-text');
+
+  /// In very small contexts, the logo takes up a lot of space, so we
+  /// use just the logomark instead
+  @include media-query('xs') {
+    display: none;
+  }
+}
+
+.brand__byline {
+  font-size: get-size('size-2');
+  transform: translateY(-0.05ex); // Optical adjustment
+
+  @include apply-utility('font', 'brand');
+  @include apply-utility('leading', 'flat');
+  @include apply-utility('weight', 'medium');
+}
diff --git a/src/scss/blocks/_breadcrumbs.scss b/src/scss/blocks/_breadcrumbs.scss
new file mode 100644
index 00000000000..e539d43deba
--- /dev/null
+++ b/src/scss/blocks/_breadcrumbs.scss
@@ -0,0 +1,60 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/breadcrumbs
+.breadcrumbs {
+  a {
+    color: currentColor;
+    overflow: hidden; // Prevents the selected SVG from highlighting on click
+  }
+
+  a svg {
+    display: block;
+    width: 120px;
+    height: auto;
+
+    // This is the text within the SVG
+    .brand-primary {
+      fill: get-utility-value('color', 'mid-text');
+    }
+
+    /// We're hiding the text (see _brand.scss), so shrink the svg to adjust
+    @include media-query('xs') {
+      margin-inline-end: -95px;
+    }
+  }
+}
+
+.breadcrumbs__list {
+  margin: 0 -1em;
+  overflow-x: auto;
+  padding: 1em;
+  -webkit-overflow-scrolling: touch;
+
+  &,
+  li {
+    display: flex;
+    align-items: center;
+    gap: 0 $global-gutter-narrow;
+  }
+
+  li {
+    flex: none;
+
+    @include apply-utility('color', 'mid-text');
+  }
+
+  li + li::before {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-top: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    transform: rotate(45deg);
+    opacity: 0.8;
+  }
+
+  a:hover {
+    background: transparent;
+    text-decoration: none;
+  }
+}
diff --git a/src/scss/blocks/_button.scss b/src/scss/blocks/_button.scss
new file mode 100644
index 00000000000..8998236c827
--- /dev/null
+++ b/src/scss/blocks/_button.scss
@@ -0,0 +1,14 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/button
+.button {
+  text-transform: uppercase;
+  letter-spacing: 0.03ch;
+  border-radius: $global-radius-base;
+  padding: 1.4em 1em;
+
+  @include button-base-styles();
+
+  &__round {
+    border-radius: 8px;
+  }
+}
diff --git a/src/scss/blocks/_callout.scss b/src/scss/blocks/_callout.scss
new file mode 100644
index 00000000000..400f81a3f01
--- /dev/null
+++ b/src/scss/blocks/_callout.scss
@@ -0,0 +1,80 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/callout
+.callout {
+  --repel-vertical-alignment: flex-end;
+
+  padding: $global-gutter;
+  border-radius: $global-radius-large;
+
+  @include apply-utility('bg', 'mid-bg'); // For if no BG utility is added
+
+  .stack-nav {
+    margin-block: 0;
+  }
+}
+
+/// We add the .callout because this often finds itself in contexts
+/// such as prose, so we need a quick specificity boost
+.callout .callout__title {
+  --flow-space: #{get-space('base')};
+  font-size: get-size('size-3');
+}
+
+.callout__content {
+  max-width: 20rem;
+
+  p {
+    --flow-space: 0.2rem;
+  }
+}
+
+.callout__links {
+  justify-content: end;
+}
+
+.callout__links [role='list'] {
+  margin-block: 0;
+  padding: 0;
+  max-width: 22rem;
+
+  li {
+    padding-inline: 0;
+  }
+
+  li::before {
+    display: none;
+  }
+
+  /// We don't use .repel because we want to hook into global link styles
+  a {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+    color: currentColor;
+    text-decoration-color: currentColor;
+
+    &:focus {
+      outline-color: currentColor;
+    }
+
+    &:hover {
+      text-decoration: none;
+      background: none;
+    }
+
+    svg {
+      flex-shrink: 0;
+      transform: translateY(0.2ex); // Optical adjustment
+    }
+  }
+}
+
+.callout__branding {
+  @include apply-utility('font', 'brand');
+
+  svg {
+    flex-shrink: 0;
+    transform: translateY(-0.2ex); // Optical adjustment
+  }
+}
diff --git a/src/scss/blocks/_card.scss b/src/scss/blocks/_card.scss
new file mode 100644
index 00000000000..584c8b44bda
--- /dev/null
+++ b/src/scss/blocks/_card.scss
@@ -0,0 +1,143 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/card
+.card {
+  @include card-base-styles();
+
+  &:hover {
+    @include apply-utility('bg', 'mid-bg');
+  }
+
+  &:link:hover {
+    @include apply-utility('bg', 'highlight-interact-bg');
+  }
+}
+
+.card__content {
+  flex: auto;
+  max-width: 100%;
+  overflow-wrap: break-word;
+
+  &:not(:first-child) {
+    @include apply-utility('gap-top', 'size-1');
+  }
+
+  a:not([class]) {
+    color: currentColor;
+  }
+
+  a:not(:hover) {
+    text-decoration: none;
+  }
+
+  p,
+  li {
+    @include apply-utility('color', 'mid-text');
+  }
+}
+
+.card__action {
+  display: inline-block;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  @include apply-utility('flow-space', 'size-1');
+  @include apply-utility('weight', 'medium');
+  @include apply-utility('leading', 'flat');
+  @include apply-utility('gap-top', 'size-1');
+
+  /// This breakout element allows the whole card to be hovered
+  /// More: https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+}
+
+.card__avatars {
+  --gutter: 0.5rem;
+  --flow-space: 0.5rem;
+  --avatar-size: 2rem;
+
+  font-size: get-size('size-0');
+}
+
+.card__authors {
+  --gutter: 1ex;
+
+  padding: 0;
+  flex: auto;
+}
+
+.card__meta {
+  font-size: 0.9em;
+  padding: 0;
+  margin: 0 0 1em 0;
+
+  &,
+  li {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  li + li::before {
+    content: '·';
+    display: block;
+  }
+
+  /// Adds a little line above the first item
+  li:first-of-type {
+    position: relative;
+
+    @include apply-utility('color', 'highlight-text');
+
+    &::before {
+      content: '';
+      width: 100%;
+      height: 2px;
+      background: get-utility-value('color', 'highlight-text');
+      position: absolute;
+      inset: -0.5ex 0 0 0;
+    }
+  }
+}
+
+.card__header {
+  width: 100%;
+  margin-bottom: get-space('size-1');
+  font-size: 0.875rem;
+}
+
+.card__hero {
+  width: 100%;
+  aspect-ratio: 5/3;
+  object-fit: cover;
+  border-radius: $global-radius-base;
+}
+
+.card__tags {
+  --gutter: 0.5rem;
+  margin-block-start: get-space('base');
+}
+
+/// EXCEPTIONS
+.card[data-style='branded'] {
+  max-width: 25rem;
+  min-width: 22rem;
+
+  > img {
+    height: unset;
+  }
+
+  &:hover {
+    @include apply-utility('bg', 'core-bg');
+  }
+}
+
+/// These cards are way too wide and tall for really small screens
+/// so these little adjustments help that, without affecting other screens
+@include media-query('xs') {
+  .card[data-style='branded'] {
+    min-width: 16rem;
+  }
+}
diff --git a/src/scss/blocks/_carousel.scss b/src/scss/blocks/_carousel.scss
new file mode 100644
index 00000000000..8b09c3cf4fe
--- /dev/null
+++ b/src/scss/blocks/_carousel.scss
@@ -0,0 +1,82 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/carousel
+.carousel {
+  .icon-button {
+    display: none;
+    height: 36px;
+    width: 36px;
+
+    &:focus-visible {
+      outline: none;
+
+      > svg {
+        border-radius: 100%;
+        border: 2px solid var(--color-focus-ring);
+        height: 36px;
+        padding: 4px;
+        width: 36px;
+      }
+    }
+
+    &:not(:hover) {
+      @include apply-utility('color', 'mid-text');
+    }
+
+    > svg {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+.carousel__track {
+  /// Allows inner hover states to show
+  padding: 1rem 0.5rem;
+  justify-content: flex-start;
+
+  /// TODO: this is being set because child items have this as a max width
+  /// in terms of a brand card context. It’s not ideal though because things
+  /// might change. These direct children of the carousel track should size fluidly
+  /// based on the child content
+  > * {
+    max-width: 25rem;
+  }
+
+  /// Adds some small invisible space so child element’s hover states can be seen.
+  /// Scroll snaps to the start of the item, so this is currently concealed, which is suboptimal
+  /// This trick creates that space on the first item to prevent hidden hover states.
+  > *:first-child {
+    display: flex;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 0.5rem;
+    }
+  }
+
+  // Makes the content of each carousel item, fill the item.
+  // E.G cards will all be the same height in a carousel
+  > * > * {
+    height: 100%;
+  }
+}
+
+@include media-query('md') {
+  .carousel {
+    display: grid;
+    grid-template-columns: 2rem 1fr 2rem;
+    gap: $global-gutter-narrow;
+    align-items: center;
+
+    .icon-button {
+      display: inline-block;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .carousel__track {
+    scroll-behavior: smooth;
+  }
+}
diff --git a/src/scss/blocks/_compare.scss b/src/scss/blocks/_compare.scss
new file mode 100644
index 00000000000..b885a3e1cec
--- /dev/null
+++ b/src/scss/blocks/_compare.scss
@@ -0,0 +1,60 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/compare
+.compare {
+  --compare-highlight-color: #{get-utility-value('color', 'state-info-text')};
+
+  /// It's really important than this space is controlled, regardless of context
+  --flow-space: #{get-space('base')} !important;
+}
+
+.compare__label {
+  color: var(--compare-highlight-color);
+  font-size: get-size('size-2');
+
+  @include apply-utility('font', 'brand');
+}
+
+.compare__caption {
+  --flow-space: 1rem;
+
+  text-align: left;
+  font-style: normal;
+  margin-inline-start: 0;
+  padding-inline-start: 1rem;
+  padding-inline-end: 1ch;
+  border-inline-start: 3px solid var(--compare-highlight-color);
+
+  @include apply-utility('color', 'mid-text');
+
+  /// Ensures paragraphs flow into each other rather than act like blocks
+  > * {
+    display: inline;
+  }
+}
+
+/// TYPE EXCEPTIONS
+.compare[data-type='better'] {
+  --compare-highlight-color: #{get-utility-value('color', 'state-good-text')};
+}
+
+.compare[data-type='worse'] {
+  --compare-highlight-color: #{get-utility-value('color', 'state-bad-text')};
+}
+
+/// PROSE RULES
+/// for longform text contexts
+
+/// Adds spacing around compare and compare groups
+.prose > *:not(.compare) + .compare,
+.prose > .compare + .compare {
+  margin-block-start: get-space('size-2');
+}
+
+.prose > .compare + *:not(.compare) {
+  margin-block-start: get-space('size-3');
+}
+
+.prose figure.compare {
+  border: none;
+  padding: 0;
+}
diff --git a/src/scss/blocks/_counter.scss b/src/scss/blocks/_counter.scss
new file mode 100644
index 00000000000..a74f37a80c2
--- /dev/null
+++ b/src/scss/blocks/_counter.scss
@@ -0,0 +1,26 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/counter
+.counter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.4rem 0.6rem 0.4rem 0.6rem;
+  border-radius: 2em;
+  line-height: 1;
+  font-size: get-size('size-0');
+  text-decoration: none;
+
+  @include apply-utility('color', 'action-text');
+
+  svg {
+    fill: currentColor;
+    width: 1.4em;
+    height: 1.4em;
+    transform: translateY(-1px); // Optical adjustment
+  }
+}
+
+.counter[data-layout='flush'] {
+  background: none;
+  padding: 0;
+}
diff --git a/src/scss/blocks/_devrel-ribbon.scss b/src/scss/blocks/_devrel-ribbon.scss
new file mode 100644
index 00000000000..42f6e04f484
--- /dev/null
+++ b/src/scss/blocks/_devrel-ribbon.scss
@@ -0,0 +1,62 @@
+// DEVREL RIBBON
+
+.devrel-ribbon {
+  align-items: flex-end;
+  display: flex;
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  z-index: 9;
+
+  @media (min-width: 1000px) {
+    align-items: center;
+    justify-content: center;
+    left: auto;
+    right: 0;
+  }
+
+  &__ribbon {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    padding: 4px 6px;
+    text-decoration: none;
+    transform: translateY(100%);
+    transition: transform 0.2s ease;
+
+    @media (min-width: 1000px) {
+      bottom: auto;
+      left: auto;
+      right: 14px;
+      top: calc(50% - 60px);
+      transform-origin: right;
+      transform: rotate(-90deg) translateY(100%);
+    }
+
+    &.--visible {
+      transform: translate(0);;
+
+      @media (min-width: 1000px) {
+        transform: rotate(-90deg);
+      }
+    }
+
+    svg {
+      height: 12px;
+      width: 12px;
+      margin: 0 4px;
+    }
+  
+    span {
+      font-size: 12px;
+      font-family: inherit;
+      color: get-color('shades-light-bright');
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: get-color('shades-charcoal');
+    } 
+  }
+}
diff --git a/src/scss/blocks/_ellipsis.scss b/src/scss/blocks/_ellipsis.scss
new file mode 100644
index 00000000000..c422c616e5e
--- /dev/null
+++ b/src/scss/blocks/_ellipsis.scss
@@ -0,0 +1,53 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/ellipsis
+
+details.ellipsis {
+  border-block: 0;
+  padding-inline: 0;
+}
+
+details.ellipsis summary::before,
+details.ellipsis summary::after {
+  display: none;
+}
+
+details.ellipsis summary {
+  list-style: none;
+  max-width: 800px;
+  font-size: 1em;
+  color: var(--color-mid-text);
+
+  .ellipsis__full {
+    text-overflow: ellipsis;
+    white-space: break-all;
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  @include media-query('md') {
+    display: flex;
+
+    .ellipsis__full {
+      white-space: nowrap;
+      display: block;
+    }
+
+    .ellipsis__more {
+      white-space: nowrap;
+      font-weight: 500;
+    }
+  }
+}
+
+details.ellipsis[open] .ellipsis__full {
+  text-overflow: initial;
+  white-space: normal;
+  display: block;
+}
+
+details.ellipsis[open] .ellipsis__more {
+  display: none;
+}
diff --git a/src/scss/blocks/_eyebrow.scss b/src/scss/blocks/_eyebrow.scss
new file mode 100644
index 00000000000..901eb7e674c
--- /dev/null
+++ b/src/scss/blocks/_eyebrow.scss
@@ -0,0 +1,16 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/eyebrow
+.eyebrow {
+  text-transform: uppercase;
+  line-height: 1;
+  font-size: get-size('size-0');
+
+  @include apply-utility('color', 'mid-text');
+  @include apply-utility('font', 'mono');
+}
+
+/// If in a flow context, reduce the space between
+/// this and the immediate heading sibling
+.eyebrow + :is(h1, h2, h3, h4) {
+  --flow-space: 1rem;
+}
diff --git a/src/scss/blocks/_fab.scss b/src/scss/blocks/_fab.scss
new file mode 100644
index 00000000000..40bd8afddc5
--- /dev/null
+++ b/src/scss/blocks/_fab.scss
@@ -0,0 +1,40 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/fab
+.fab {
+  position: relative;
+  padding: 0.8em 1em 0.8em 0.8em;
+  border-radius: 3em;
+  flex: none;
+
+  @include button-base-styles();
+
+  /// Ensures the hover state doesn't overflow;
+  &::after {
+    border-radius: 3em;
+  }
+}
+
+.fab__label {
+  text-transform: uppercase;
+  // By default (small viewport), the
+  // label is hidden
+  @extend .visually-hidden;
+
+  // If this isn't a icon only context,
+  // show the label where there is more space
+  @include media-query('md') {
+    .fab:not([data-icon-only]) & {
+      height: auto;
+      position: initial;
+      width: auto;
+    }
+  }
+}
+
+/// Docked state
+.fab[data-docked] {
+  position: fixed;
+  bottom: $global-gutter;
+  right: $global-gutter;
+  z-index: 10;
+}
diff --git a/src/scss/blocks/_feature-card.scss b/src/scss/blocks/_feature-card.scss
new file mode 100644
index 00000000000..bca763fd5c6
--- /dev/null
+++ b/src/scss/blocks/_feature-card.scss
@@ -0,0 +1,106 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/feature-card
+.feature-card {
+  position: relative;
+  aspect-ratio: 16/9;
+  justify-content: space-between;
+
+  @include card-base-styles();
+
+  &:link,
+  &:visited {
+    color: get-color('shades-dark');
+  }
+
+  > :not(img) {
+    z-index: 1;
+  }
+
+  > img,
+  > video {
+    position: absolute;
+    inset: 0 0 0 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: $global-radius-large;
+    z-index: 0;
+  }
+
+}
+
+.feature-card__eyebrow {
+  font-size: get-size('base');
+}
+
+.feature-card__title {
+  font-size: get-size('size-2');
+  margin-block-start: get-space('size-1');
+  max-width: 18rem;
+  line-height: 1.4;
+}
+
+/// EXCEPTIONS
+
+/// Light text version
+.feature-card[data-theme='light'] {
+  &:link,
+  &:visited {
+    color: get-color('shades-light-bright');
+  }
+}
+
+.feature-card[data-treatment='bg-image'] {
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: radial-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 60%));
+    border-radius: $global-radius-large;
+  }
+
+  &:link,
+  &:visited {
+    color: get-color('shades-light-bright');
+  }
+}
+
+/// These cards have content flow issues on small viewports,
+/// so this treatment helps that and is removed for larger
+/// viewports
+.feature-card[data-treatment='illustration'] {
+  &[data-theme="dark"] {
+    --color-img-mask: 255, 255, 255;
+  }
+
+  &[data-theme="light"] {
+    --color-img-mask: 0, 0, 0;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 70%;
+    position: absolute;
+    inset: auto 0 0 0;
+    background: linear-gradient(
+      0deg,
+      rgba(var(--color-img-mask), 70%),
+      rgba(var(--color-img-mask),  60%),
+      rgba(var(--color-img-mask), 0%)
+    );
+    border-radius: $global-radius-large;
+    z-index: 1;
+  }
+}
+
+@include media-query('md') {
+  .feature-card[data-treatment='illustration']::before {
+    display: none;
+  }
+}
diff --git a/src/scss/blocks/_figure.scss b/src/scss/blocks/_figure.scss
new file mode 100644
index 00000000000..297a6b22279
--- /dev/null
+++ b/src/scss/blocks/_figure.scss
@@ -0,0 +1,44 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/figure
+figure {
+  display: block;
+  width: 100%;
+
+  > *:not(figcaption) {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  > figcaption {
+    display: block;
+    max-width: 100%;
+    text-align: center;
+  }
+}
+
+figure[data-float] {
+  width: auto;
+  max-width: calc(#{$global-prose-element-max-width} / 2);
+  margin-bottom: get-space('size-1');
+}
+
+figure[data-float='left'] {
+  float: left;
+  margin-inline-end: get-space('size-1');
+}
+
+figure[data-float='right'] {
+  float: right;
+  margin-inline-start: get-space('size-1');
+}
+
+figure[data-size='full'] {
+  > * {
+    width: 100%;
+  }
+}
+
+figure[data-screenshot] {
+  border: 1px solid var(--color-stroke);
+}
diff --git a/src/scss/blocks/_fixed-width-img.scss b/src/scss/blocks/_fixed-width-img.scss
new file mode 100644
index 00000000000..bee0212a313
--- /dev/null
+++ b/src/scss/blocks/_fixed-width-img.scss
@@ -0,0 +1,15 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/fixed-width-img
+.fixed-width-img {
+  // This ensures images are scaled to the exact size specified by the
+  // width attribute, preventing HiDPI screenshots from being blurry:
+  //  <img src="800x500.png" width="400" class="fixed-width-img" alt="" />
+  box-sizing: content-box;
+  margin-inline: auto;
+}
+
+/// Figures often force media to fill them, so this rule prevents that
+/// if a width attribute is present
+figure > .fixed-width-img[width] {
+  width: unset;
+}
diff --git a/src/scss/blocks/_headline.scss b/src/scss/blocks/_headline.scss
new file mode 100644
index 00000000000..c7dabb2a0ef
--- /dev/null
+++ b/src/scss/blocks/_headline.scss
@@ -0,0 +1,23 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/headline
+.headline {
+  --flow-space: #{get-space('base')};
+
+  p {
+    @include apply-utility('color', 'mid-text');
+  }
+}
+
+.headline__title {
+  font-size: get-size('size-4');
+}
+
+.headline__action {
+  --flow-space: #{get-space('size-1')};
+
+  :link,
+  :visited {
+    @include apply-utility('font', 'brand');
+    @include apply-utility('color', 'mid-text');
+  }
+}
diff --git a/src/scss/blocks/_hero-image.scss b/src/scss/blocks/_hero-image.scss
new file mode 100644
index 00000000000..8c9e8d1ec35
--- /dev/null
+++ b/src/scss/blocks/_hero-image.scss
@@ -0,0 +1,9 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/hero-image
+.hero-image {
+  width: 100%;
+  max-width: 100rem;
+  max-height: 30rem;
+  object-fit: cover;
+  margin-inline: auto;
+}
diff --git a/src/scss/blocks/_hero.scss b/src/scss/blocks/_hero.scss
new file mode 100644
index 00000000000..8a0407698a7
--- /dev/null
+++ b/src/scss/blocks/_hero.scss
@@ -0,0 +1,96 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/hero
+.hero {
+  padding-block: get-space('size-3');
+
+  @include apply-utility('bg', 'mid-bg');
+
+  .feature-card {
+    --flow-space: #{get-space('size-1')};
+    max-width: 35rem;
+  }
+}
+
+.hero__eyebrow {
+  @include apply-utility('color', 'mid-text');
+}
+
+.hero__content {
+  margin-block-start: get-space('size-2');
+  max-width: 50ch;
+
+  h1 {
+    font-size: get-size('size-4');
+  }
+
+  .button {
+    --flow-space: #{get-space('size-2')};
+  }
+}
+
+/// Overrides a global masking for transparent images
+.hero__decor[src$='.svg'],
+.hero__decor[src$='.png'] {
+  background-color: transparent;
+}
+
+.hero__columns {
+  --switcher-target-container-width: 50rem;
+  --gutter: #{get-space('size-3')} #{get-space('size-2')};
+}
+
+/// EXCEPTIONS
+.hero[data-type='promo'] {
+  background: unset;
+}
+
+.hero[data-type='promo'] .hero__columns {
+  --switcher-vertical-alignment: stretch;
+}
+
+.hero[data-type='promo'] .hero__columns > :first-child {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/// Reversed columns
+.hero__columns[data-direction='rev'] {
+  flex-direction: row-reverse;
+}
+
+/// RESPONSIVE ADJUSTMENTS
+@include media-query('lg') {
+  .hero {
+    .feature-card {
+      margin-inline-start: auto;
+    }
+  }
+
+  .hero__columns[data-direction='rev'] {
+    > :first-child > * {
+      margin-inline-start: auto;
+    }
+  }
+}
+
+
+.hero__content__img {
+  @include media-query('md') {
+    height: auto;
+    max-width: initial;
+    width: 420px;
+  }
+}
+
+.hero__content--split {
+  display: block;
+  text-align: center;
+
+  @include media-query('md') {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    text-align: initial;
+  }
+}
diff --git a/src/scss/blocks/_icon-button.scss b/src/scss/blocks/_icon-button.scss
new file mode 100644
index 00000000000..67edecf5362
--- /dev/null
+++ b/src/scss/blocks/_icon-button.scss
@@ -0,0 +1,30 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/icon-button
+.icon-button {
+  display: inline-block;
+  background: transparent;
+  border: none;
+  color: currentColor;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+
+  svg {
+    display: block;
+    width: 1em;
+    height: 1em;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    fill: currentColor;
+  }
+
+  &:hover svg {
+    filter: invert(0.2);
+  }
+
+  &__round {
+    border-radius: 8px;
+  }
+}
diff --git a/src/scss/blocks/_indicator.scss b/src/scss/blocks/_indicator.scss
new file mode 100644
index 00000000000..1853e4cf163
--- /dev/null
+++ b/src/scss/blocks/_indicator.scss
@@ -0,0 +1,18 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/indicator
+.indicator {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: get-size('size-0');
+  line-height: 0.9;
+  padding: 0.4em;
+  border-radius: 50%;
+  width: max-content;
+  min-width: 1.6rem;
+  min-height: 1.6rem;
+
+  @include apply-utility('font', 'mono');
+}
diff --git a/src/scss/blocks/_label.scss b/src/scss/blocks/_label.scss
new file mode 100644
index 00000000000..f6bfc5dd8b5
--- /dev/null
+++ b/src/scss/blocks/_label.scss
@@ -0,0 +1,7 @@
+.label {
+  @include apply-utility('color', 'mid-text');
+}
+
+.label + * {
+  --flow-space: 0.5rem;
+}
diff --git a/src/scss/blocks/_numbered-headers.scss b/src/scss/blocks/_numbered-headers.scss
new file mode 100644
index 00000000000..6355344f286
--- /dev/null
+++ b/src/scss/blocks/_numbered-headers.scss
@@ -0,0 +1,55 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/numbered-headers
+.numbered-headers {
+  counter-reset: numbered-headers;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: get-space('size-1');
+}
+
+.numbered-headers__step {
+  counter-increment: numbered-headers;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  width: clamp(16rem, 100%, 30rem);
+}
+
+/// The heading is a wrapper element which makes the horizontal
+/// view (using cluster) easier to achieve
+.numbered-headers__heading {
+  --gutter: 1em;
+  flex: auto;
+
+  &::before {
+    content: counter(numbered-headers);
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 2em;
+    height: 2em;
+    font-size: get-size('size-2');
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    margin-bottom: 1em;
+
+    @include apply-utility('weight', 'bold');
+    @include apply-utility('bg', 'mid-bg');
+  }
+}
+
+.numbered-headers__heading.cluster::before {
+  margin: 0;
+}
+
+@include media-query('lg') {
+  .numbered-headers {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .numbered-headers__step {
+    width: unset;
+  }
+}
diff --git a/src/scss/blocks/_pagination.scss b/src/scss/blocks/_pagination.scss
new file mode 100644
index 00000000000..7be822cbc55
--- /dev/null
+++ b/src/scss/blocks/_pagination.scss
@@ -0,0 +1,25 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/pagination
+.pagination {
+  display: grid;
+  grid-template-columns: 1fr minmax(0, max-content) 1fr;
+  align-items: center;
+  gap: 0 $global-gutter;
+}
+
+.pagination__status {
+  display: none;
+  padding: 0.3em 0.8em;
+
+  @include apply-utility('bg', 'mid-bg');
+}
+
+.pagination__container:last-child {
+  text-align: right;
+}
+
+@include media-query('md') {
+  .pagination__status {
+    display: inline-block;
+  }
+}
diff --git a/src/scss/blocks/_pill.scss b/src/scss/blocks/_pill.scss
new file mode 100644
index 00000000000..10f10d70338
--- /dev/null
+++ b/src/scss/blocks/_pill.scss
@@ -0,0 +1,40 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/pill
+.pill {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: get-size('size-0');
+  line-height: 1;
+  padding: 0.35rem 0.6rem;
+  border-radius: 2em;
+  border: 1px solid var(--color-stroke);
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+
+  @include apply-utility('font', 'brand');
+  @include apply-utility('color', 'core-text');
+
+  &:hover,
+  &[data-state='active'],
+  &[aria-current='page'] {
+    border-color: get-utility-value('bg', 'action-bg-primary');
+
+    @include apply-utility('color', 'action-text-primary');
+    @include apply-utility('bg', 'action-bg-primary');
+  }
+}
+
+.pill[data-inactive] {
+  cursor: default;
+
+  &:hover,
+  &[data-state='active'],
+  &[aria-current='page'] {
+    background: transparent;
+    border-color: var(--color-stroke);
+    @include apply-utility('color', 'core-text');
+  }
+}
\ No newline at end of file
diff --git a/src/scss/blocks/_post-credits.scss b/src/scss/blocks/_post-credits.scss
new file mode 100644
index 00000000000..9c5c3c55493
--- /dev/null
+++ b/src/scss/blocks/_post-credits.scss
@@ -0,0 +1,33 @@
+.post-credits {
+  border-top: 1px solid get-color('shades-gray-glare');
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding-top: 2rem;
+
+  div {
+    margin-bottom: 2rem;
+    width: 100%;
+  }
+
+  h3 {
+    color: get-color('shades-gray');
+    font-size: 0.875rem;
+    line-height: 170%;
+  }
+
+  a{
+    width: fit-content;
+  }
+
+  &__editors, &__credits {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include media-query('md'){
+    flex-direction: row;
+    flex: 1 1 0;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/blocks/_preview-pagination.scss b/src/scss/blocks/_preview-pagination.scss
new file mode 100644
index 00000000000..69bd47f6d53
--- /dev/null
+++ b/src/scss/blocks/_preview-pagination.scss
@@ -0,0 +1,59 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/preview-pagination
+.preview-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  border: 1px solid get-utility-value('color', 'stroke');
+
+  svg {
+    fill: get-utility-value('color', 'mid-text');
+  }
+
+  p {
+    @include apply-utility('color', 'mid-text');
+  }
+}
+
+.preview-pagination__item {
+  display: block;
+  flex-grow: 1;
+  padding: $global-gutter-narrow $global-gutter $global-gutter $global-gutter;
+  min-width: 16rem;
+
+  text-decoration: none;
+
+  &[data-dir='prev'] {
+    flex-basis: 40%;
+  }
+
+  &[data-dir='next'] {
+    flex-basis: 60%;
+  }
+
+  /// Beats the specificity of the :link global style
+  &:link,
+  &:visited {
+    color: currentColor;
+  }
+}
+
+.preview-pagination__item + .preview-pagination__item {
+  outline: 1px solid get-utility-value('color', 'stroke');
+}
+
+.preview-pagination__meta {
+  --gutter: #{$global-gutter-narrow};
+
+  text-transform: uppercase;
+  font-size: get-size('size-0');
+
+  @include apply-utility('font', 'mono');
+
+  [data-dir='next'] & {
+    @include apply-utility('color', 'action-text');
+  }
+}
+
+.preview-pagination__heading {
+  --flow-space: #{get-space('base')};
+}
diff --git a/src/scss/blocks/_prose.scss b/src/scss/blocks/_prose.scss
new file mode 100644
index 00000000000..7a4e943b5df
--- /dev/null
+++ b/src/scss/blocks/_prose.scss
@@ -0,0 +1,107 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/prose
+.prose {
+  @extend .flow;
+  @extend .wrapper;
+
+  --flow-space: #{get-space('size-1')};
+
+  max-width: $global-prose-element-max-width;
+  display: flow-root;  // Clear floats
+
+  p:empty {
+    display: none;
+  }
+
+  > img,
+  > table {
+    width: 100%;
+  }
+
+  /// Add more space to elements that follow figures etc
+  pre,
+  pre + *,
+  figure,
+  figure + *,
+  h2,
+  h3,
+  h4 {
+    --flow-space: #{get-space('size-2')};
+  }
+
+  /// Main headings should have less space for their
+  /// immediate sibling
+  h2 + *,
+  h3 + *,
+  h4 + * {
+    --flow-space: 1rem;
+  }
+
+  /// Stacked headings need to maintain larger spacing, however
+  h2 + h3,
+  h3 + h4 {
+    --flow-space: #{get-space('size-1')};
+  }
+
+  /// Details gets more surrounding space, but the inner elements
+  /// should all be equal
+  details,
+  details + * {
+    --flow-space: #{get-space('size-2')};
+  }
+
+  details + details {
+    margin-top: 0;
+  }
+
+  details > * {
+    --flow-space: #{get-space('size-1')};
+  }
+
+  :not([class]) li {
+    @extend .flow;
+
+    line-height: unset;
+  }
+
+  /// Modidifies the custom list style positions to
+  /// work with the larger line heights
+  ul > li::before {
+    inset: 1.2ex 0 0 0;
+  }
+
+  ol > li::before {
+    line-height: 1.1;
+    inset: 0.25ex 0 0 0;
+  }
+
+  /// An anchor that starts with a hash is a
+  /// skip link, so it needs to be visually hidden
+  /// until focused or hovered
+  :is(h2, h3, h4, h5, h6) a[href^='#'] {
+    font-size: 0.9em;
+    text-decoration: none;
+    color: transparent;
+    transform: translateY(-0.2ex);
+  }
+
+  :is(h2, h3, h4, h5, h6):hover a[href^='#'],
+  :is(h2, h3, h4, h5, h6) a[href^='#']:focus {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  /// Misc elements that need adjusting in this context
+  .banner {
+    font-size: get-size('base');
+  }
+
+  .banner,
+  .banner + * {
+    --flow-space: #{get-space('size-2')};
+  }
+
+  .stats {
+    --auto-grid-min-item-size: 12rem;
+    padding: 1em;
+  }
+}
diff --git a/src/scss/blocks/_site-footer.scss b/src/scss/blocks/_site-footer.scss
new file mode 100644
index 00000000000..dc07a4fe802
--- /dev/null
+++ b/src/scss/blocks/_site-footer.scss
@@ -0,0 +1,72 @@
+/// SITE FOOTER
+/// The main, global footer that is on each page
+
+.site-footer {
+  padding: $global-gutter;
+  border-block-start: 1px solid get-utility-value('color', 'stroke');
+
+  /// There's a few lists, so we set globally
+  ul {
+    padding: 0;
+  }
+
+  li a,
+  li a:visited,
+  theme-toggle {
+    font-size: get-size('size-0');
+    @include apply-utility('color', 'mid-text');
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+.site-footer__brand {
+  margin-bottom: 1.2rem;
+  display: block;
+}
+
+.site-footer__primary-nav {
+  grid-template-columns: repeat(1, 1fr);
+  --auto-grid-placement: auto-fit;
+
+  @media (min-width: 865px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.site-footer__primary-nav-links {
+  --auto-grid-placement: auto-fit;
+
+  @media (min-width: 865px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  li + li {
+    margin-top: 0.5rem;
+  }
+}
+
+.site-footer__primary-nav-content {
+  margin-bottom: 0.75rem;
+
+  p {
+    max-width: 65ch;
+  }
+}
+
+.site-footer__brand-nav {
+  border-block: 1px solid get-utility-value('color', 'stroke');
+  padding: get-space('base') 0;
+  margin: get-space('size-1') 0;
+
+  img {
+    display: block;
+    background: transparent;
+  }
+}
diff --git a/src/scss/blocks/_site-header.scss b/src/scss/blocks/_site-header.scss
new file mode 100644
index 00000000000..bd82b6dc35a
--- /dev/null
+++ b/src/scss/blocks/_site-header.scss
@@ -0,0 +1,189 @@
+/// SITE HEADER
+/// The main, global header that is on each page
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 4rem;
+  padding: 0 $global-gutter;
+  border-bottom: 1px solid get-utility-value('color', 'stroke');
+  line-height: 1;
+
+  @include apply-utility('font', 'brand');
+}
+
+.site-header__brand {
+  display: block;
+  width: 140px;
+
+  &:hover {
+    background: none;
+  }
+}
+
+.site-header__link {
+  display: inline-block;
+  padding: 1.5em $global-gutter-narrow;
+  text-decoration: none;
+
+  &:link,
+  &:visited {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  &:hover {
+    @include apply-utility('bg', 'mid-bg');
+  }
+
+  &[aria-current='page'] {
+    @include apply-utility('color', 'core-text');
+  }
+
+  &:only-of-type {
+    padding-inline: 0.8em;
+  }
+}
+
+.site-header__nav {
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 4.5rem 0 0 0;
+  min-width: 16rem;
+
+  a {
+    display: block;
+  }
+}
+
+.site-header__actions {
+  --gutter: 0.5rem;
+}
+
+.site-header__search {
+  position: relative;
+  min-width: 2.5rem;
+  z-index: 99;
+
+  .web-search__input-wrapper:not([aria-expanded='true']) {
+    display: none;
+  }
+
+  .web-search__input-wrapper {
+    position: absolute;
+    inset: -0.8rem 0 auto auto;
+
+    input {
+      padding-block: 0.5rem;
+    }
+  }
+
+  web-search-results {
+    position: absolute;
+    inset: 2.8rem 1rem auto auto;
+  }
+
+  .web-search-popout {
+    height: unset;
+    max-height: 16rem;
+    line-height: 1.4;
+    border: 1px solid get-utility-value('color', 'stroke');
+    border-radius: $global-radius-base;
+    padding: 0;
+    z-index: 99;
+
+    @include apply-utility('bg', 'core-bg');
+
+    a {
+      color: currentColor;
+    }
+
+    &__heading {
+      padding: $global-gutter-narrow;
+
+      @include apply-utility('bg', 'core-bg');
+    }
+
+    &__parent-title {
+      @include apply-utility('color', 'mid-text');
+      font-size: 0.9rem;
+      margin-top: 4px;
+    }
+  }
+}
+
+.site-header web-search[expanded] .web-search__input-wrapper,
+.site-header web-search-results {
+  width: clamp(16rem, 40vw, 25rem);
+}
+
+.site-header .cluster {
+  flex-wrap: nowrap;
+}
+
+.site-header [data-drawer-close-button] {
+  position: absolute;
+  z-index: 1;
+  inset: $global-gutter-narrow $global-gutter auto auto;
+}
+
+.site-header web-navigation-drawer:not([open]) {
+  [data-drawer-close-button] {
+    display: none;
+  }
+}
+
+@include media-query('md') {
+  .site-header web-navigation-drawer {
+    transition: opacity 100ms;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .site-header[class*='expanded'] web-navigation-drawer {
+    opacity: 0;
+    pointer-events: none !important;
+  }
+
+  .site-header__nav {
+    display: flex;
+    height: unset;
+    min-width: unset;
+    padding: unset;
+
+    a {
+      display: inline-block;
+    }
+  }
+
+  .site-header web-navigation-drawer[animating] [data-drawer-container] {
+    transition: none;
+  }
+
+  .site-header web-navigation-drawer[type='standard'] {
+    position: static;
+    pointer-events: auto;
+    top: 0;
+    width: auto;
+
+    [data-drawer-container] {
+      box-shadow: none;
+      transform: none;
+    }
+  }
+}
+
+@include media-query('lg') {
+  /// Although the nav is centered, via flexbox, it doesn't look
+  /// optically centered, thanks to elements that vertically follow
+  /// it. This transform creates that optical adjustment
+  .site-header web-navigation-drawer[type='standard'] [data-drawer-container] {
+    transform: translateX(-1.75rem);
+  }
+
+  .site-header__link {
+    padding: 1.5em 2em;
+  }
+}
diff --git a/src/scss/blocks/_skip-link.scss b/src/scss/blocks/_skip-link.scss
new file mode 100644
index 00000000000..56462861b79
--- /dev/null
+++ b/src/scss/blocks/_skip-link.scss
@@ -0,0 +1,17 @@
+/// The skip link is visually hidden when it is not focused.
+/// It exists so when a user hits tab on load, they can quickly
+/// skip to the main content of the site—avoiding navigation etc
+.skip-link {
+  z-index: 11;
+  width: max-content;
+  inset: $global-gutter-narrow auto auto $global-gutter;
+  position: absolute;
+  flex: none;
+
+  /// Please avoid using @extend where possible
+  /// In this context, it's fine because this
+  /// skip link needs parity with the visually hidden util
+  &:not(:focus) {
+    @extend .visually-hidden;
+  }
+}
diff --git a/src/scss/blocks/_spinner.scss b/src/scss/blocks/_spinner.scss
new file mode 100644
index 00000000000..c0fd16df6d2
--- /dev/null
+++ b/src/scss/blocks/_spinner.scss
@@ -0,0 +1,22 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/spinner
+.spinner {
+  fill: none;
+  animation: cubic-bezier(0.25, 0, 0.6, 1) infinite both 1.5s spinner__spin;
+  stroke: var(--color, black);
+  stroke-width: 0.5px;
+}
+
+@keyframes spinner__spin {
+  0% {
+    transform: rotate(0);
+    stroke-dasharray: 1px, 15px;
+    stroke-dashoffset: 1px;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    stroke-dasharray: 15px, 15px;
+    stroke-dashoffset: -15px;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/blocks/_stack-nav.scss b/src/scss/blocks/_stack-nav.scss
new file mode 100644
index 00000000000..7469d5c42dc
--- /dev/null
+++ b/src/scss/blocks/_stack-nav.scss
@@ -0,0 +1,85 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/stack-nav
+.stack-nav,
+.stack-nav__list {
+  padding: 0;
+}
+
+.stack-nav {
+  --gutter: 0.5rem #{$global-gutter};
+
+  a {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    font-size: 0.9em;
+    line-height: 1.2;
+    padding: 1.2em $global-gutter-narrow;
+    text-decoration: none;
+
+    @include apply-utility('bg', 'action-bg-alt');
+    @include apply-utility('color', 'action-text-alt');
+
+    &:not([class]) {
+      display: block; // For if there's no composition class added
+    }
+  }
+
+  a:hover,
+  a[aria-selected='true'] {
+    @include apply-utility('bg', 'accent-bg');
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+
+    @include apply-utility('color', 'mid-text');
+  }
+
+  a[aria-current='page'],
+  a[aria-select='true'] {
+    @include apply-utility('bg', 'active-bg');
+    @include apply-utility('color', 'active-text');
+
+    svg {
+      color: currentColor;
+    }
+  }
+
+  .cluster {
+    --gutter: 0.5rem 1.2rem;
+
+    flex-wrap: nowrap;
+    align-items: flex-start;
+  }
+
+  .cluster:last-of-type {
+    --gutter: 0.5rem 0.8rem;
+  }
+}
+
+.stack-nav__meta {
+  transform: translateY(0.45ex); /// optical adjustment
+  flex: none;
+  font-size: 0.8em;
+
+  @include apply-utility('color', 'mid-text');
+  @include apply-utility('font', 'mono');
+
+  [aria-current='page'] & {
+    color: currentColor;
+  }
+}
+
+// Smaller font size for placeholder meta
+.is-placeholder .stack-nav__meta {
+  font-size: 0.7em;
+}
+
+.stack-nav__heading {
+  font-size: get-size('size-2');
+  padding-inline-start: $global-gutter-narrow;
+
+  @include apply-utility('gap-top', 'size-1');
+}
diff --git a/src/scss/blocks/_stats.scss b/src/scss/blocks/_stats.scss
new file mode 100644
index 00000000000..f692de0809e
--- /dev/null
+++ b/src/scss/blocks/_stats.scss
@@ -0,0 +1,29 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/stats
+.stats {
+  @extend .auto-grid;
+
+  --auto-grid-placement: auto-fit;
+  --auto-grid-gutter: 0;
+
+  padding: 2em 2em 3em 2em;
+
+  @include apply-utility('bg', 'state-good-bg');
+  @include apply-utility('color', 'state-good-text');
+
+  &__item {
+    @extend .flow;
+
+    --flow-space: 0.3rem;
+
+    padding: 2em;
+    text-align: center;
+
+    @include apply-utility('leading', 'flat');
+  }
+
+  &__figure {
+    @include apply-utility('font', 'brand');
+    @include apply-utility('text', 'size-6');
+  }
+}
diff --git a/src/scss/blocks/_status-list.scss b/src/scss/blocks/_status-list.scss
new file mode 100644
index 00000000000..d53106272da
--- /dev/null
+++ b/src/scss/blocks/_status-list.scss
@@ -0,0 +1,60 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/status-list
+.status-list {
+  list-style: none;
+  padding: 0;
+
+  li {
+    position: relative;
+    padding-inline-start: 25px;
+  }
+
+  li + li {
+    margin-block-start: 0.5em;
+  }
+
+  a {
+    color: currentColor;
+  }
+
+  /// The cross is the default icon
+  li::before,
+  li::after {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 2px;
+    background: get-utility-value('color', 'state-bad-text');
+    position: absolute;
+    inset: 50% 0 0 0;
+  }
+
+  li::before {
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  li::after {
+    transform: translateY(-50%) rotate(-45deg);
+  }
+
+  /// The default state, by proxy, is good, but it results in simpler
+  /// code if we start with a cross, then modify that to become a checkmark
+  &:not([data-state='bad']) {
+    li::before,
+    li::after {
+      background: get-utility-value('color', 'state-good-text');
+    }
+
+    /// These rather magic numbers convert that cross alignment
+    /// to a check alignment instead
+    li::before {
+      width: 9px;
+      transform: rotate(45deg);
+      inset: 16px 0 0 -2px;
+    }
+
+    li::after {
+      inset: 50% 0 0 3px;
+    }
+  }
+}
diff --git a/src/scss/blocks/_syntax-highlighting.scss b/src/scss/blocks/_syntax-highlighting.scss
new file mode 100644
index 00000000000..46bced4a987
--- /dev/null
+++ b/src/scss/blocks/_syntax-highlighting.scss
@@ -0,0 +1,88 @@
+/// PATTERN LIBRARY LOCATION 
+/// https://web.dev/design-system/pattern/code-blocks
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  &.punctuation,
+  &.string,
+  &.atrule,
+  &.attr-value {
+    @include apply-utility('color', 'syntax-primary');
+  }
+
+  &.property,
+  &.tag {
+    @include apply-utility('color', 'syntax-quaternary');
+  }
+
+  &.boolean,
+  &.number {
+    @include apply-utility('color', 'syntax-primary-glare');
+  }
+
+  &.selector,
+  &.attr-name,
+  &.attr-value .punctuation:first-child,
+  &.keyword,
+  &.regex,
+  &.important {
+    @include apply-utility('color', 'syntax-tertiary');
+  }
+
+  &.operator,
+  &.entity,
+  &.url,
+  .language-css &.string {
+    @include apply-utility('color', 'syntax-secondary');
+  }
+
+  &.entity {
+    cursor: help;
+  }
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.highlight-line-active,
+.highlight-line-add,
+.highlight-line-active *,
+.highlight-line-add * {
+  @include apply-utility('weight', 'medium');
+  @include apply-utility('color', 'core-text');
+}
+
+.highlight-line-active {
+  @include apply-utility('bg', 'state-warn-bg');
+
+  &,
+  .token {
+    @include apply-utility('color', 'state-warn-text');
+  }
+}
+
+.highlight-line-add {
+  text-decoration: none;
+
+  @include apply-utility('bg', 'state-good-bg');
+
+  &,
+  .token {
+    @include apply-utility('color', 'state-good-text');
+  }
+}
+
+.highlight-line-remove {
+  @include apply-utility('bg', 'state-bad-bg');
+
+  &,
+  .token {
+    @include apply-utility('color', 'state-bad-text');
+  }
+}
diff --git a/src/scss/blocks/_table-wrapper.scss b/src/scss/blocks/_table-wrapper.scss
new file mode 100644
index 00000000000..02266e0276e
--- /dev/null
+++ b/src/scss/blocks/_table-wrapper.scss
@@ -0,0 +1,20 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/tables
+.table-wrapper {
+  @include overflow-shadow(#{get-utility-value('bg', 'core-bg')});
+
+  table {
+    min-width: 30rem;
+    width: 100%;
+  }
+
+  td,
+  th {
+    min-width: 8rem;
+  }
+
+  [colspan],
+  [rowspan] {
+    min-width: 15rem;
+  }
+}
diff --git a/src/scss/blocks/_toc.scss b/src/scss/blocks/_toc.scss
new file mode 100644
index 00000000000..c7ce85eb38b
--- /dev/null
+++ b/src/scss/blocks/_toc.scss
@@ -0,0 +1,67 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/toc
+.toc {
+  --toc-vert-space: 0.5rem;
+
+  font-size: get-size('base');
+
+  a {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  a:not(:hover) {
+    text-decoration: none;
+  }
+}
+
+.toc__list {
+  list-style: none;
+  padding: 0;
+}
+
+.toc__list li {
+  padding-block: calc(var(--toc-vert-space) / 2);
+  position: relative;
+
+  @include apply-utility('weight', 'medium');
+}
+
+.toc__list .toc__list {
+  margin-block: var(--toc-vert-space);
+}
+
+.toc__list .toc__list li {
+  padding-inline-start: $global-gutter-narrow;
+  border-inline-start: 1px solid get-utility-value('color', 'stroke');
+
+  @include apply-utility('weight', 'regular');
+
+  /// Removes the space as negative margin to prevent double spacing
+  &:last-of-type {
+    margin-block-end: calc(var(--toc-vert-space) * -1);
+  }
+}
+
+.toc__header {
+  font-size: get-size('size-1');
+}
+
+.toc .scroll-spy__active, .toc .toc__active {
+  @include apply-utility('color', 'action-text');
+  @include apply-utility('weight', 'bold');
+}
+
+/// An active style for nested list items
+.toc__list .toc__list li .scroll-spy__active::before,
+.toc__list .toc__list li .toc__active::before {
+  /// The list element is the relative parent, allowing
+  /// this additional border style to "break out" of the
+  /// anchor element that this active state is applied to
+  content: '';
+  display: block;
+  width: 2px;
+  height: 100%;
+  position: absolute;
+  inset: 0 auto 0 -1px;
+  background: currentColor;
+}
diff --git a/src/scss/blocks/_toggle-switch.scss b/src/scss/blocks/_toggle-switch.scss
new file mode 100644
index 00000000000..6608503a9f6
--- /dev/null
+++ b/src/scss/blocks/_toggle-switch.scss
@@ -0,0 +1,76 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/toggle-switch
+
+$toggle-switch-thumb-size: 1.25em;
+$toggle-switch-decor-ratio: 0.8;
+
+.toggle-switch {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: max-content;
+  gap: 1em;
+  cursor: pointer;
+}
+
+.toggle-switch__input {
+  opacity: 0;
+  // Yup, the global input styles have some pretty high specificity
+  position: absolute !important;
+  inset: 50% 0 0 0;
+  transform: translateY(-50%);
+}
+
+.toggle-switch__decor {
+  display: block;
+  position: relative;
+  width: #{$toggle-switch-thumb-size * 1.7};
+  height: #{$toggle-switch-decor-ratio}em;
+  border-radius: $toggle-switch-thumb-size;
+  transition: background $global-transition-base;
+  transition-delay: $global-transition-base-duration;
+
+  @include apply-utility('bg', 'check-bg');
+}
+
+.toggle-switch__thumb {
+  display: block;
+  width: $toggle-switch-thumb-size;
+  height: $toggle-switch-thumb-size;
+  border-radius: 100%;
+  box-shadow: 0 0 2px rgb(0 0 0 / 50%);
+  position: absolute;
+  inset: 50% 0 0 0;
+  transform: translateY(-50%);
+  transition: transform $global-transition-bounce;
+  z-index: 1;
+
+  @include apply-utility('bg', 'check-fg');
+}
+
+/// INTERACTIVE STATES
+
+/// On hover, shift the switch 1px in the direction it will go
+.toggle-switch__decor:hover .toggle-switch__thumb {
+  margin-inline-start: 1px;
+}
+
+:checked + .toggle-switch__decor:hover .toggle-switch__thumb {
+  margin-inline-start: -1px;
+}
+
+:checked + .toggle-switch__decor {
+  @include apply-utility('bg', 'check-bg-active');
+}
+
+:checked + .toggle-switch__decor .toggle-switch__thumb {
+  transform: translate(
+    #{$toggle-switch-thumb-size * $toggle-switch-decor-ratio},
+    -50%
+  );
+}
+
+:disabled + .toggle-switch__decor {
+  filter: grayscale(1) brightness(1.5);
+  cursor: not-allowed;
+}
diff --git a/src/scss/blocks/_tooltip.scss b/src/scss/blocks/_tooltip.scss
new file mode 100644
index 00000000000..493b15bedb3
--- /dev/null
+++ b/src/scss/blocks/_tooltip.scss
@@ -0,0 +1,56 @@
+/// PATTERN LIBRARY LOCATION
+/// https://web.dev/design-system/pattern/tooltip
+$tooltip-aligned-side-space: calc(100% + 2.5rem);
+.tooltip {
+  position: relative;
+  width: max-content;
+}
+
+.tooltip__content {
+  display: block;
+  width: max-content;
+  text-transform: none;
+  position: absolute;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0.3em 0.5em 0.4em;
+  border-radius: 2px;
+  position: absolute;
+  top: $tooltip-aligned-side-space;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  visibility: hidden;
+
+  @include apply-utility('color', 'reversed-text');
+  @include apply-utility('bg', 'reversed-bg');
+  @include apply-utility('font', 'base');
+  @include apply-utility('weight', 'regular');
+}
+
+.tooltip:focus-within .tooltip__content,
+.tooltip:hover .tooltip__content {
+  opacity: 1;
+  transition: opacity $global-transition-fade;
+  visibility: visible;
+  z-index: 10;
+}
+
+/// ALIGNMENT EXCEPTIONS
+.tooltip[role='tooltip'][data-alignment='left'] {
+  .tooltip__content {
+    top: 50%;
+    right: $tooltip-aligned-side-space;
+    left: auto;
+    transform: translateY(-50%);
+  }
+}
+
+.tooltip[role='tooltip'][data-alignment='right'] {
+  .tooltip__content {
+    top: 50%;
+    left: $tooltip-aligned-side-space;
+    right: auto;
+    transform: translateY(-50%);
+  }
+}
diff --git a/src/scss/blocks/_widget.scss b/src/scss/blocks/_widget.scss
new file mode 100644
index 00000000000..f3837e9e94f
--- /dev/null
+++ b/src/scss/blocks/_widget.scss
@@ -0,0 +1,19 @@
+/// COMPONENT LIBRARY LOCATION
+/// https://web.dev/design-system/component/widget
+.widget {
+
+  &__actions {
+    display: flex;
+    justify-content: end;
+    gap: 0.2em;
+  }
+
+  iframe {
+    border: 1px solid var(--color-stroke);
+  }
+
+  share-action {
+    display: block;
+    color: var(--color-highlight-text);
+  }
+}
\ No newline at end of file
diff --git a/src/scss/compositions/_auto-grid.scss b/src/scss/compositions/_auto-grid.scss
new file mode 100644
index 00000000000..4647f177895
--- /dev/null
+++ b/src/scss/compositions/_auto-grid.scss
@@ -0,0 +1,22 @@
+/// AUTO GRID
+/// More info: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
+/// A flexible layout that will create an auto-fill grid with
+/// configurable grid item sizes
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --gutter ($global-gutter): This defines the space
+/// between each item.
+
+/// --auto-grid-min-item-size (16rem): How large each item should be
+/// ideally, as a minimum.
+
+/// --auto-grid-placement (auto-fill): Set either auto-fit or auto-fill
+/// to change how empty grid tracks are handled
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--auto-grid-placement, auto-fill),
+    minmax(var(--auto-grid-min-item-size, 16rem), 1fr)
+  );
+  grid-gap: var(--gutter, $global-gutter);
+}
diff --git a/src/scss/compositions/_breakout.scss b/src/scss/compositions/_breakout.scss
new file mode 100644
index 00000000000..74d0ed3ee4c
--- /dev/null
+++ b/src/scss/compositions/_breakout.scss
@@ -0,0 +1,12 @@
+/// BREAKOUT
+/// A layout that allows you to break a an element out of the
+/// bounds of its parent, with a sensible lock to prevent it bleeding out
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --breakout-max-width: This defines the maximum width of the element.
+.breakout {
+  width: calc(100vw - #{$global-gutter-narrow * 2});
+  max-width: var(--breakout-max-width, 65rem);
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
diff --git a/src/scss/compositions/_cluster.scss b/src/scss/compositions/_cluster.scss
new file mode 100644
index 00000000000..3eb9ad7922e
--- /dev/null
+++ b/src/scss/compositions/_cluster.scss
@@ -0,0 +1,22 @@
+/// CLUSTER
+/// More info: https://every-layout.dev/layouts/cluster/
+/// A layout that lets you distribute items with consitent
+/// spacing, regardless of their size
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --gutter ($global-gutter): This defines the space
+/// between each item.
+
+/// --cluster-horizontal-alignment (flex-start) How items should align
+/// horizontally. Can be any acceptable flexbox aligmnent value.
+
+/// --cluster-vertical-alignment How items should align vertically.
+/// Can be any acceptable flexbox alignment value.
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, $global-gutter);
+  justify-content: var(--cluster-horizontal-alignment, flex-start);
+  align-items: var(--cluster-vertical-alignment, center);
+}
diff --git a/src/scss/compositions/_reel.scss b/src/scss/compositions/_reel.scss
new file mode 100644
index 00000000000..79a3578dcc3
--- /dev/null
+++ b/src/scss/compositions/_reel.scss
@@ -0,0 +1,42 @@
+/// REEL
+/// A layout that creates a carousel-like element
+
+/// CONFIGURATION
+/// Add an attribute of data-scroll="snap" to the element
+/// to enable scroll snapping
+.reel {
+  --reel-space: 2rem;
+  display: flex;
+  height: auto;
+  max-width: 100%;
+  margin-inline: auto;
+
+  /// Padding allows child element hover states to show
+  padding: 0.5rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.reel > * {
+  flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-space)));
+  flex-shrink: 0;
+}
+
+.reel > * + * {
+  margin-inline-start: var(--reel-space);
+}
+
+/// Adds extra space if the reel has a scrollbar
+.reel.scrollbar {
+  padding-block-end: get-space('size-1');
+}
+
+/// SCROLL TYPE EXCEPTION
+/// Sets the reel to snap on each item on scroll
+.reel[data-scroll='snap'] {
+  scroll-snap-type: x mandatory;
+}
+
+.reel[data-scroll='snap'] > * {
+  scroll-snap-align: start;
+}
diff --git a/src/scss/compositions/_repel.scss b/src/scss/compositions/_repel.scss
new file mode 100644
index 00000000000..9d5d2399103
--- /dev/null
+++ b/src/scss/compositions/_repel.scss
@@ -0,0 +1,17 @@
+/// CLUSTER
+/// A little layout that pushes items away from each other where
+/// there is space in the viewport and stacks on small viewports
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --gutter ($global-gutter): This defines the space
+/// between each item.
+
+/// --repel-vertical-alignment How items should align vertically.
+/// Can be any acceptable flexbox alignment value.
+.repel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: var(--repel-vertical-alignment, center);
+  gap: var(--gutter, $global-gutter);
+}
diff --git a/src/scss/compositions/_sidebar.scss b/src/scss/compositions/_sidebar.scss
new file mode 100644
index 00000000000..342680b3d15
--- /dev/null
+++ b/src/scss/compositions/_sidebar.scss
@@ -0,0 +1,46 @@
+/// SIDEBAR
+/// More info: https://every-layout.dev/layouts/sidebar/
+/// A layout that allows you to have a flexible main content area
+/// and a "fixed" width sidebar that sits on the left or right.
+/// If there is not enough viewport space to fit both the sidebar
+/// width *and* the main content minimum width, they will stack
+/// on top of each other
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --gutter ($global-gutter): This defines the space
+/// between the sidebar and main content.
+
+/// --sidebar-target-width (20rem): How large the sidebar should be
+
+/// --sidebar-content-min-width(50%): The minimum size of the main content area
+
+/// EXCEPTIONS
+/// .sidebar[data-direction='rtl']: flips the sidebar to be on the right
+.sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, $global-gutter);
+}
+
+.sidebar:not([data-direction]) > :first-child {
+  flex-basis: var(--sidebar-target-width, 20rem);
+  flex-grow: 1;
+}
+
+.sidebar:not([data-direction]) > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: var(--sidebar-content-min-width, 50%);
+}
+
+/// A flipped version where the sidebar is on the right
+.sidebar[data-direction='rtl'] > :last-child {
+  flex-basis: var(--sidebar-target-width, 20rem);
+  flex-grow: 1;
+}
+
+.sidebar[data-direction='rtl'] > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: var(--sidebar-content-min-width, 50%);
+}
diff --git a/src/scss/compositions/_switcher.scss b/src/scss/compositions/_switcher.scss
new file mode 100644
index 00000000000..7743eb1152a
--- /dev/null
+++ b/src/scss/compositions/_switcher.scss
@@ -0,0 +1,34 @@
+/// SWITCHER
+/// More info: https://every-layout.dev/layouts/switcher/
+/// A layout that allows you to lay **2** items next to each other
+/// until there is not enough horizontal space to allow that.
+
+/// CUSTOM PROPERTIES AND CONFIGURATION
+/// --gutter ($global-gutter): This defines the space
+/// between each item
+
+/// --switcher-target-container-width (40rem): How large the container
+/// needs to be to allow items to sit inline with each other
+
+/// --switcher-vertical-alignment How items should align vertically.
+/// Can be any acceptable flexbox alignment value.
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gutter, $global-gutter);
+  align-items: var(--switcher-vertical-alignment, flex-start);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc(
+    (var(--switcher-target-container-width, 40rem) - 100%) * 999
+  );
+}
+
+/// Max 2 items, so we target everything *after* those
+.switcher > :nth-last-child(n + 3),
+.switcher > :nth-last-child(n + 3) ~ * {
+  flex-basis: 100%;
+}
diff --git a/src/scss/compositions/_wide-card-index.scss b/src/scss/compositions/_wide-card-index.scss
new file mode 100644
index 00000000000..2ab1004ef9a
--- /dev/null
+++ b/src/scss/compositions/_wide-card-index.scss
@@ -0,0 +1,10 @@
+/// WIDE CARD INDEX
+/// A little helper composition that lets cards grow wide in an
+/// auto grid at larger viewports
+@include media-query('md') {
+  .wide-card-index {
+    .auto-grid {
+      --auto-grid-min-item-size: 22rem;
+    }
+  }
+}
diff --git a/src/scss/functions/_get-space.scss b/src/scss/functions/_get-space.scss
new file mode 100644
index 00000000000..082ad5c6a3b
--- /dev/null
+++ b/src/scss/functions/_get-space.scss
@@ -0,0 +1,18 @@
+/// GET SPACE FUNCTION
+///
+/// Function tries to match the passed $ratio-key with the $gorko-space-scale. Returns null
+/// if it can’t find a match.
+///
+/// @param {string} $ratio-key - The size ratio that you want to get
+///
+@function get-space($ratio-key) {
+  $response: map-get($gorko-space-scale, $ratio-key);
+
+  @if ($response) {
+    @return $response;
+  }
+
+  @warn #{'Space "' + $ratio-key + '" not found in $gorko-space-scale'};
+
+  @return null;
+}
diff --git a/src/scss/mixins/_button-base-styles.scss b/src/scss/mixins/_button-base-styles.scss
new file mode 100644
index 00000000000..bce7f9edf6f
--- /dev/null
+++ b/src/scss/mixins/_button-base-styles.scss
@@ -0,0 +1,116 @@
+/// BUTTON BASE STYLES
+/// Consistent, base styles that can be shared
+/// between button-type elements
+@mixin button-base-styles() {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  /// It's really important line-height is flat
+  /// so to prevent cascade issues, we make it important
+  line-height: 1 !important;
+
+  @include apply-utility('bg', 'action-bg');
+  @include apply-utility('weight', 'medium');
+  @include apply-utility('font', 'brand');
+  @include vertically-align-label();
+
+  &,
+  &:visited {
+    @include apply-utility('color', 'action-text');
+  }
+
+  & svg {
+    width: 1.3em;
+    height: 1.3em;
+    fill: currentColor;
+    transform: translateY(-0.2ex);
+  }
+
+  & svg + * {
+    /// Why not gap?
+    /// Gap will add space to the pseudo-element that's
+    /// assisting with vertical alignment, so we add margin
+    /// inline-start to the element that directly follows the icon
+    margin-inline-start: 0.5em;
+  }
+
+  /// If there's no text utility, we need to make sure
+  /// the& is the base size as internal padding
+  /// is em based
+  &:not([class*='text']) {
+    font-size: get-size('base');
+  }
+
+  /// TYPES
+  &[data-type='primary'] {
+    border-color: get-utility-value('bg', 'action-bg-primary');
+
+    @include apply-utility('bg', 'action-bg-primary');
+
+    &,
+    &:visited {
+      @include apply-utility('color', 'action-text-primary');
+    }
+  }
+
+  &[data-type='secondary'] {
+    border: 1px solid get-utility-value('color', 'stroke');
+  }
+
+  &[data-type='clear'] {
+    border: none;
+    background: none;
+  }
+
+  /// DISABLED STATE
+  /// All properties are !important because this
+  /// state has to take priority in all cases
+  &:disabled {
+    filter: invert(0.2) !important;
+    box-shadow: none !important;
+    transform: none !important;
+    cursor: not-allowed !important;
+  }
+
+  /// INTERACTIVE STATE
+  /// A pseudo-element is used to create the material design
+  /// ripple effect on hover/active
+  &::after {
+    content: '';
+    display: block;
+    inset: -1px; // Covers the border then, too
+    position: absolute;
+    background-position: center;
+    transition: background 0.8s;
+    opacity: 0.2;
+    // border-radius: 50%;
+  }
+
+  &:hover::after {
+    background: get-utility-value('bg', 'action-bg-hover')
+      radial-gradient(
+        circle,
+        transparent 1%,
+        get-utility-value('bg', 'action-bg-hover') 1%
+      )
+      center/15000%;
+  }
+
+  &:hover {
+    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 10%),
+      0px 8px 8px 1px rgb(0 0 0 / 7%), 0px 3px 8px 2px rgb(0 0 0 / 8%);
+    transition: transform $global-transition-movement,
+      box-shadow $global-transition-movement, filter $global-transition-fade;
+  }
+
+  &:active::after {
+    background-color: get-utility-value('bg', 'mid-bg');
+    background-size: 100%;
+    transition: background 0s;
+  }
+}
diff --git a/src/scss/mixins/_card-base-styles.scss b/src/scss/mixins/_card-base-styles.scss
new file mode 100644
index 00000000000..d5a888c5dc9
--- /dev/null
+++ b/src/scss/mixins/_card-base-styles.scss
@@ -0,0 +1,50 @@
+/// CARD BASE STYLES
+/// Consistent, base styles that can be shared
+/// between card-type elements
+@mixin card-base-styles() {
+  /// Flex layout allows the content to grow so where you have a grid
+  /// of cards, the actions will all be aligned
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  padding: $global-gutter-narrow;
+  border: 1px solid get-utility-value('color', 'stroke');
+  border-radius: $global-radius-large;
+  max-width: 37rem;
+  text-decoration: none;
+  word-break: break-word;
+
+  @include apply-utility('bg', 'core-bg');
+
+  // This lets text keep its selectable state
+  a:not([class*='action']),
+  p,
+  h2,
+  h3,
+  h4 {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:link:hover {
+    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 10%),
+      0px 8px 8px 1px rgb(0 0 0 / 7%), 0px 3px 8px 2px rgb(0 0 0 / 8%),
+      0px 0px 0px 2px var(--color-focus-ring);
+    transition: transform $global-transition-movement,
+      box-shadow $global-transition-movement, background $global-transition-fade,
+      border-color $global-transition-fade;
+    border-color: get-utility-value('bg', 'mid-bg');
+  }
+
+  &:link,
+  &:visited {
+    @include apply-utility('color', 'core-text');
+  }
+
+  > img:not([class]) {
+    height: 15rem;
+    object-fit: cover;
+    margin-inline: auto;
+  }
+}
diff --git a/src/scss/mixins/_overflow-shadow.scss b/src/scss/mixins/_overflow-shadow.scss
new file mode 100644
index 00000000000..9ac05958784
--- /dev/null
+++ b/src/scss/mixins/_overflow-shadow.scss
@@ -0,0 +1,25 @@
+/// OVERFLOW SHADOW
+/// Presents a shadow for horizontal overflow elements
+/// to show users that there is more content available.
+/// This mixin also applies the bouncy overflow styles.
+/// All you need to pass in is a background color, or it won't conceal
+// the shadow when there is overflow content
+@mixin overflow-shadow($background) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  /// Creates a shadow when there is overflow content to see on both inline sides
+  background: linear-gradient(to right, $background 30%, rgb(255 255 255 / 0%)),
+    linear-gradient(to right, rgb(255 255 255 / 0%), $background 70%) 0 100%,
+    radial-gradient(farthest-side at 0% 50%, rgb(0 0 0 / 20%), rgb(0 0 0 / 0%)),
+    radial-gradient(
+        farthest-side at 100% 50%,
+        rgb(0 0 0 / 20%),
+        rgb(0 0 0 / 0%)
+      )
+      0 100%;
+  background-repeat: no-repeat;
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-position: 0 0, 100%, 0 0, 100%;
+  background-attachment: local, local, scroll, scroll;
+} ;
diff --git a/src/scss/mixins/_rounded-border.scss b/src/scss/mixins/_rounded-border.scss
new file mode 100644
index 00000000000..ad4ef74de85
--- /dev/null
+++ b/src/scss/mixins/_rounded-border.scss
@@ -0,0 +1,11 @@
+/// ROUNDED BORDER
+/// This mixin applies a border on all sides with
+/// consistent color and radius by default
+@mixin rounded-border(
+  $size: $global-radius-base,
+  $color: var(--color-stroke),
+  $width: 1px
+) {
+  border-radius: $size;
+  border: $width solid $color;
+}
diff --git a/src/scss/mixins/_vertically-align-label.scss b/src/scss/mixins/_vertically-align-label.scss
new file mode 100644
index 00000000000..41503551031
--- /dev/null
+++ b/src/scss/mixins/_vertically-align-label.scss
@@ -0,0 +1,13 @@
+/// VERTICALLY ALIGN LABEL
+/// Adds a pseudo-element to help vertically align
+/// text labels in buttons/block-like links without
+/// using magic numbers
+/// More: https://ishadeed.com/article/button-label-alignment/
+@mixin vertically-align-label() {
+  &::before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 1ex;
+  }
+}
diff --git a/src/scss/next.scss b/src/scss/next.scss
new file mode 100644
index 00000000000..1de0d8adf52
--- /dev/null
+++ b/src/scss/next.scss
@@ -0,0 +1,812 @@
+// First up: config
+@import 'config';
+
+// Disable util class generator because we'll render them at the end
+$generate-utility-classes: false;
+
+// Next: pull in gorko for design token and custom property generation
+@import '../../node_modules/gorko/gorko.scss';
+
+@import 'node_modules/webdev-infra/shortcodes/BrowserCompat/styles';
+
+@import 'reset';
+@import 'fonts';
+
+/// GLOBAL VARIABLES
+/// Global variables that should be accessible in all authored CSS
+$global-gutter: map-get($gorko-space-scale, 'size-1');
+$global-gutter-narrow: 1.25rem;
+$global-stroke: 1px solid get-utility-value('color', 'stroke');
+
+/// Elements that feature in prose contexts need to have a consistent max width
+$global-prose-element-max-width: min(50rem, 100%);
+
+// NOTE: there are more design token-led global variables in _tokens.scss
+
+/// FUNCTIONS
+@import 'functions/get-space';
+
+/// MIXINS
+@import 'mixins/button-base-styles';
+@import 'mixins/card-base-styles';
+@import 'mixins/overflow-shadow';
+@import 'mixins/rounded-border';
+@import 'mixins/vertically-align-label';
+
+/// GLOBAL CSS
+/// Core CSS that is applicable to every page
+/// https://cube.fyi/css.html
+
+body {
+  font-size: get-size('size-1');
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+
+  @include apply-utility('bg', 'core-bg');
+  @include apply-utility('color', 'core-text');
+  @include apply-utility('font', 'base');
+  @include apply-utility('leading', 'regular');
+}
+
+main {
+  flex: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include apply-utility('font', 'brand');
+  @include apply-utility('leading', 'flat');
+  @include apply-utility('weight', 'regular');
+}
+
+h1 {
+  font-size: get-size('size-5');
+}
+
+h2 {
+  font-size: get-size('size-4');
+}
+
+h3 {
+  font-size: get-size('size-3');
+}
+
+h4,
+h5,
+h6 {
+  font-size: get-size('size-2');
+}
+
+/// General typesetting
+
+p,
+li {
+  max-width: 70ch;
+}
+
+h1,
+h2,
+h3 {
+  max-width: 30ch;
+}
+
+/// Lists
+
+ul:not([class]),
+ol:not([class]) {
+  list-style: none;
+}
+
+ol:not([class]),
+ul:not([class]) {
+  li {
+    position: relative;
+
+    @include apply-utility('leading', 'short');
+  }
+
+  li + li {
+    margin-top: 1em;
+  }
+}
+
+ul:not([class]) {
+  // AB: I don't like how restrictive the marker pseudo-element is
+  // and we have some sizing and positioning that will benefit
+  // from a standard pseudo-element instead.
+  list-style: none;
+  padding-inline-start: 1rem;
+
+  > li::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 1ex 0 0 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  > li {
+    padding-inline-start: 2ch;
+  }
+}
+
+ol:not([class]) {
+  counter-reset: ol-list;
+  padding-inline-start: 0.5rem;
+
+  > li::before {
+    content: counter(ol-list);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    inset: 0 0 0 0;
+    border-radius: 50%;
+    font-size: 0.9em;
+    background: var(--color-accent-bg);
+    color: var(--color-accent-text);
+
+    @include apply-utility('weight', 'medium');
+  }
+
+  > li {
+    counter-increment: ol-list;
+    padding-inline-start: 2.5rem;
+  }
+}
+
+dt {
+  @include apply-utility('weight', 'bold');
+}
+
+dt ~ dd {
+  margin-inline-start: 2ch;
+}
+
+dd + dt {
+  margin-top: 0.5em;
+}
+
+/// Blockquotes
+
+blockquote {
+  padding-left: 24px;
+
+  cite {
+    font-size: get-size('size-0');
+  }
+}
+
+blockquote::before {
+  content: '”';
+  @include apply-utility('font', 'brand');
+  font-size: get-size('size-4');
+  float: left;
+  margin: -6px 0 0 -24px;
+}
+
+blockquote[data-type=pullquote] {
+  padding-left: initial;
+  font-size: get-size('size-3');
+  text-align: center;
+  display: block;
+
+  @include apply-utility('font', 'brand');
+  @include apply-utility('leading', 'short');
+}
+
+blockquote[data-type=pullquote],
+blockquote[data-type=pullquote] > * {
+  margin-inline: auto;
+
+  @include apply-utility('measure', 'short');
+}
+
+/// @extend is *very* naughty if used unwisely
+/// However, we want child elements to flow without
+/// having to add a class so in this instance, it
+/// can slide
+blockquote[data-type=pullquote] {
+  @extend .flow;
+}
+
+/// <q> elements are ideal, but we need to make sure
+/// any element is styled as a quote
+
+blockquote[data-type=pullquote]::before {
+  content: '';
+  display: none;
+}
+
+blockquote[data-type=pullquote] > *:first-child::before {
+  content: open-quote;
+}
+
+blockquote[data-type=pullquote] > *:nth-last-child(2)::after {
+  content: close-quote;
+}
+
+blockquote[data-type=pullquote] > *:last-child:not(cite)::after {
+  content: close-quote;
+}
+
+/// It's best to reset content rather than
+/// add quotes only to the first-child, because
+/// quotes might actually be multiline
+blockquote[data-type=pullquote] > cite::before,
+blockquote[data-type=pullquote] > cite::after {
+  content: unset;
+}
+
+/// Make sure figcaptions are central with the blockquote[data-type=pullquote]
+/// when they appear in the same <figure> context.
+// Same applies to cites
+figure > blockquote[data-type=pullquote] ~ figcaption,
+blockquote[data-type=pullquote] cite {
+  margin-inline: auto;
+  display: block;
+  font-style: normal;
+  font-size: get-size('size-2');
+
+  @include apply-utility('weight', 'bold');
+  @include apply-utility('leading', 'flat');
+}
+
+/// Captions
+
+caption,
+figcaption {
+  font-style: italic;
+  text-align: start;
+  font-size: get-size('size-0');
+
+  @include apply-utility('measure', 'short');
+  @include apply-utility('color', 'mid-text');
+  @include apply-utility('gap-top', 'base');
+
+  code {
+    white-space: nowrap;
+  }
+}
+
+/// Tables
+
+table {
+  max-width: 100%;
+  min-width: 50%;
+  border-spacing: 0;
+}
+
+th,
+td {
+  padding: 0.8em 0.5em;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+th {
+  @include apply-utility('weight', 'medium');
+}
+
+tr td {
+  border-top: 1px solid var(--color-stroke);
+}
+
+caption {
+  caption-side: bottom;
+}
+
+table ul:not([class]),
+table ol:not([class]) {
+  margin: 0;
+}
+
+/// Code in tables
+table code {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+/// Cell alignment
+table[data-alignment='top'] {
+  th,
+  td {
+    vertical-align: top;
+  }
+}
+
+table[data-alignment='baseline'] {
+  th,
+  td {
+    vertical-align: top;
+  }
+}
+
+/// Separators
+
+hr {
+  border: none;
+  border-top: 1px solid var(--color-stroke);
+  max-width: 80rem;
+  margin-inline: 0;
+}
+
+// For the <hr /> itself and whatever element follows it,
+// have consistent space in flow contexts
+hr,
+hr + * {
+  --flow-space: #{get-size('size-6')};
+}
+
+/// Code
+
+code {
+  padding: 0.125em 0.25em;
+  background: var(--color-mid-bg);
+  border: 1px solid var(--color-stroke);
+  font-size: 0.9em;
+  hyphens: none;
+  tab-size: 2;
+  text-align: left;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+
+  @include apply-utility('font', 'mono');
+}
+
+pre > code {
+  display: block;
+  padding: get-size('size-1');
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+// It's not uncommon to have code in markdown headings.
+// In these cases we should remove the border.
+// There is also a utility class, .unstyled-code, that can be used
+// if we're using <code> blocks in new contexts.
+// For example: <span class="unstyled-code">{{ description | md | safe }}</span>
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code,
+.unstyled-code code {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  margin: 0;
+  padding: 0;
+  white-space: normal;
+  overflow-wrap: break-word
+}
+
+p code,
+li code {
+  overflow-wrap: break-word;
+}
+
+/// Sub and sup
+sub,
+sup {
+  font-size: 0.6em;
+  vertical-align: baseline;
+}
+
+sup {
+  position: relative;
+  top: -1ex;
+}
+
+/// Details and summary
+details {
+  @extend .flow;
+
+  --flow-space: 0.5em;
+
+  border-block: 1px solid get-utility-value('bg', 'stroke');
+  padding: 1rem 0.5rem 1.2rem 0.5rem;
+  text-align: left;
+}
+
+details + details {
+  border-block-start: none;
+}
+
+details summary {
+  position: relative;
+  font-size: get-size('size-2');
+  list-style: none;
+  cursor: pointer;
+  padding-right: 28px; // Prevent overlap with ::before element
+
+  @include apply-utility('color', 'action-text');
+  @include apply-utility('weight', 'regular');
+  @include apply-utility('leading', 'flat');
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  /// A custom marker
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+  }
+
+  &::before {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: get-utility-value('bg', 'highlight-interact-bg');
+    inset-inline-end: 0;
+    inset-block-start: -2px;
+  }
+
+  &::after {
+    width: 8px;
+    height: 8px;
+    border-bottom: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    inset-block-start: 7px;
+    inset-inline-end: 10px;
+    transform: rotate(45deg);
+  }
+
+  /// The marker handles our focus state for us
+  &:focus {
+    outline: none;
+
+    &::before {
+      outline: 1px solid currentColor;
+    }
+  }
+
+  &:hover {
+    &::before {
+      filter: invert(0.05);
+    }
+  }
+}
+
+/// Let a details element inherit a parent's font-size
+/// if it feature a font size utility class
+[class*='text-'] > details summary {
+  font-size: inherit;
+}
+
+details[open] summary {
+  &::after {
+    inset-block-start: 11px;
+    transform: rotate(-135deg);
+  }
+}
+
+details summary + * {
+  @include apply-utility('flow-space', 'size-1');
+}
+
+/// Form fields
+
+// Style inputs without a type attribute the same as type="text", since they
+// are semantically equivalent.
+// See https://github.com/GoogleChrome/web.dev/issues/7638#issuecomment-1087607518
+input:not([type]),
+input[type='text'],
+input[type='email'],
+input[type='password'],
+textarea {
+  display: block;
+  width: 100%;
+  background-color: get-utility-value('bg', 'core-bg');
+  color: get-utility-value('color', 'core-text');
+  border: 1px solid get-utility-value('color', 'stroke');
+  font: inherit;
+  padding: 0.8em;
+  line-height: 1;
+  border-radius: $global-radius-base;
+}
+
+textarea {
+  &:not([rows]) {
+    min-height: 12rem;
+  }
+
+  @include apply-utility('leading', 'short');
+}
+
+// Style inputs without a type attribute the same as type="text", since they
+// are semantically equivalent.
+// See https://github.com/GoogleChrome/web.dev/issues/7638#issuecomment-1087607518
+input:not([type]),
+input[type='text'],
+input[type='email'],
+input[type='password'],
+textarea,
+select {
+  max-width: 40rem;
+}
+
+select {
+  display: block;
+  width: 100%;
+  background-color: get-utility-value('bg', 'core-bg');
+  color: get-utility-value('color', 'core-text');
+  // Use an escaped svg to add a small grey arrow to the end of the select
+  // sass-lint:disable quotes
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10H7Z' fill='%235F6368'/%3E%3C/svg%3E%0A");
+  // Set the width of the arrow background image and let the height default to auto
+  background-size: 1.5em;
+  background-position: right 0.5em top 50%;
+  background-repeat: no-repeat;
+  border: $global-stroke;
+  border-radius: $global-radius-base;
+  font: inherit;
+  line-height: 1.1;
+  padding: 1em 3em 1em 0.8em;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select:hover {
+  background-color: get-utility-value('bg', 'accent-bg');
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  position: relative;
+  border: none;
+  cursor: pointer;
+  margin: 0px;
+  background-size: cover;
+  flex: none;
+  appearance: none;
+  -webkit-appearance: none;
+
+  /// A material design-style "click" state
+  &::before {
+    content: '';
+    display: block;
+    width: 2.5em;
+    height: 2.5em;
+    background: get-utility-value('bg', 'mid-bg');
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: opacity $global-transition-fade 50ms,
+      background $global-transition-fade, transform $global-transition-movement;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  &:hover:focus::before {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  &:checked::before {
+    background: get-utility-value('bg', 'highlight-interact-bg');
+  }
+}
+
+/// Optical adjustment helps align labels
+input[type='checkbox'] + label,
+input[type='radio'] + label {
+  transform: translateY(-0.5ex);
+}
+
+input[type='checkbox'] {
+  width: min(1.13em, 18px);
+  height: min(1.13em, 18px);
+
+  @include apply-utility('bg', 'checkbox');
+}
+
+input[type='checkbox']:checked {
+  @include apply-utility('bg', 'checkbox-checked');
+}
+
+input[type='radio'] {
+  width: min(1.5em, 24px);
+  height: min(1.5em, 24px);
+
+  @include apply-utility('bg', 'radio');
+}
+
+input[type='radio']:checked {
+  @include apply-utility('bg', 'radio-checked');
+}
+
+/// Media
+video {
+  max-width: 100%;
+}
+
+/// Selects images that are likely to have a transparent BG and applies a
+/// theme-driven mask to them
+img[src$='.svg'],
+img[src$='.png'] {
+  background-color: get-utility-value('bg', 'transparent-img-mask');
+}
+
+/// Links
+
+a {
+  color: var(--color-highlight-text);
+}
+
+a:visited {
+  color: var(--color-highlight-text-alt);
+}
+
+a:hover {
+  color: var(--color-highlight-text);
+  background: var(--color-highlight-interact-bg);
+}
+
+a:active {
+  filter: brightness(0.9);
+}
+
+/// General interactive states
+
+:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 4px;
+}
+
+:target {
+  scroll-margin-top: 2ex;
+}
+
+/// High contrast selection style
+::selection {
+  color: var(--color-core-bg);
+  background: var(--color-core-text);
+}
+
+/// If an element is [hidden] it needs to be max priority
+[hidden] {
+  display: none !important;
+}
+
+/// Misc web components that need to be blocks
+web-copy-code {
+  display: block;
+}
+
+/// Video related elements
+video,
+.youtube {
+  position: relative;
+  aspect-ratio: 16/9;
+}
+
+/// COMPOSITIONS
+@import 'compositions/auto-grid';
+@import 'compositions/breakout';
+@import 'compositions/cluster';
+@import 'compositions/reel';
+@import 'compositions/repel';
+@import 'compositions/sidebar';
+@import 'compositions/switcher';
+@import 'compositions/wide-card-index';
+
+/// BLOCKS
+@import 'blocks/aside';
+@import 'blocks/audio-player';
+@import 'blocks/author';
+@import 'blocks/banner';
+@import 'blocks/baseline';
+@import 'blocks/brand';
+@import 'blocks/breadcrumbs';
+@import 'blocks/button';
+@import 'blocks/callout';
+@import 'blocks/card';
+@import 'blocks/carousel';
+@import 'blocks/compare';
+@import 'blocks/counter';
+@import 'blocks/devrel-ribbon';
+@import 'blocks/ellipsis';
+@import 'blocks/eyebrow';
+@import 'blocks/fab';
+@import 'blocks/feature-card';
+@import 'blocks/figure';
+@import 'blocks/fixed-width-img';
+@import 'blocks/headline';
+@import 'blocks/hero';
+@import 'blocks/hero-image';
+@import 'blocks/icon-button';
+@import 'blocks/indicator';
+@import 'blocks/label';
+@import 'blocks/numbered-headers';
+@import 'blocks/pagination';
+@import 'blocks/pill';
+@import 'blocks/post-credits';
+@import 'blocks/preview-pagination';
+@import 'blocks/prose';
+@import 'blocks/site-footer';
+@import 'blocks/site-header';
+@import 'blocks/skip-link';
+@import 'blocks/spinner';
+@import 'blocks/stack-nav';
+@import 'blocks/stats';
+@import 'blocks/status-list';
+@import 'blocks/syntax-highlighting';
+@import 'blocks/table-wrapper';
+@import 'blocks/toc';
+@import 'blocks/toggle-switch';
+@import 'blocks/tooltip';
+@import 'blocks/widget';
+
+
+/// WEB COMPONENTS
+@import 'web-components/web-assessment';
+@import 'web-components/web-audio-fab';
+@import 'web-components/web-codelab';
+@import 'web-components/web-copy-code';
+@import 'web-components/web-navigation-drawer';
+@import 'web-components/web-search';
+@import 'web-components/web-select-group';
+@import 'web-components/web-snackbar';
+@import 'web-components/web-subscribe';
+@import 'web-components/web-tabs';
+
+/// UTILITY CLASSES
+@import 'utilities/all-center';
+@import 'utilities/avatar';
+@import 'utilities/docked-actions';
+@import 'utilities/flow';
+@import 'utilities/focus-ring';
+@import 'utilities/region';
+@import 'utilities/over-scroll';
+@import 'utilities/scrollbar';
+@import 'utilities/visually-hidden';
+@import 'utilities/wrapper';
+
+/// PAGES
+@import 'pages/about';
+@import 'pages/course';
+@import 'pages/design-system';
+@import 'pages/homepage';
+@import 'pages/landing-page';
+@import 'pages/learn';
+@import 'pages/explore';
+@import 'pages/measure';
+@import 'pages/collection';
+@import 'pages/pattern';
+@import 'pages/spaces';
+
+// Import unresolved states for lit-elements
+@import 'unresolved';
+
+// Render gorko utilities
+@include generate-utility-classes();
diff --git a/src/scss/pages/_about.scss b/src/scss/pages/_about.scss
new file mode 100644
index 00000000000..fd24f8b6656
--- /dev/null
+++ b/src/scss/pages/_about.scss
@@ -0,0 +1,84 @@
+@include media-query('lg') {
+  .about {
+    .hero__title {
+      margin-bottom: 20px;
+    }
+    .hero__content {
+      margin-block-start: get-space('size-4');
+    }
+  }
+}
+
+.about__teams {
+  border-block-start: 1px solid var(--color-stroke);
+
+  .card {
+    padding-block: get-space('size-1');
+  }
+
+  .card > img {
+    width: 192px;
+    height: 192px;
+    border-radius: 50%;
+  }
+
+  .authors {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+
+    @include media-query('lg') {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @include media-query('xs') {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+}
+
+.about__developers {
+  p {
+    max-width: 75ch;
+  }
+  .button {
+    margin-top: 2.5em;
+  }
+
+  .headline__title {
+    margin-top: 1.5em;
+  }
+}
+
+.about__coupled-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+
+  @include media-query('xs') {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  h5 {
+    margin: 0.5em;
+  }
+
+  div:first-child {
+    border-right: 1px solid get-utility-value('color', 'stroke');
+    padding-right: get-space('size-2');
+
+    @include media-query('xs') {
+      border-right: 0;
+      padding-right: 0;
+    }
+  }
+
+  div:last-child {
+    padding-left: get-space('size-2');
+
+    @include media-query('xs') {
+      border-top: 1px solid get-utility-value('color', 'stroke');
+      margin-top: get-space('size-2');
+      padding: 2.5em 0 0;
+    }
+  }
+}
diff --git a/src/scss/pages/_collection.scss b/src/scss/pages/_collection.scss
new file mode 100644
index 00000000000..92549ba749a
--- /dev/null
+++ b/src/scss/pages/_collection.scss
@@ -0,0 +1,262 @@
+.collection {
+  hr {
+      max-width: 100%;
+  }
+  
+  .path__topic {
+    .prose > * {
+      margin-inline: initial;
+    }
+  }
+  
+  .path__toc--item {
+    display: flex;
+    flex-direction: row;
+  
+    svg {
+      fill: get-color('core-primary');
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
+  }
+}
+
+.collection__cards {
+  border-top: 1px solid var(--color-stroke);
+  margin-top: 30px;
+
+  .wrapper {
+      padding-top: 2.5rem;
+  }
+}
+
+.collection__layout {
+  margin-top: 40px;
+
+  @include media-query('md') {
+      display: grid;
+      grid-gap: 30px;
+      margin-top: 60px;
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .card  {
+    margin-top: 25px;
+
+    @include media-query('md') {
+      margin-top: 0;
+    }
+  }
+
+  .card > img {
+      width: 100%;
+      height: 220px;
+      border-radius: 5px;
+
+      @include media-query('md') {
+          width: 100%;
+      }
+  }
+
+  .card, p {
+      max-width: 100%;
+  }
+
+  .card__eyebrow {
+      align-items: center;
+      display: flex;
+  }
+
+  .card__content {
+      margin: 25px 0;
+  }
+
+  svg {
+      fill: var(--color-mid-text);
+      height: 20px;
+      margin-right: 10px;
+  }
+
+  span {
+      margin-top: 0;
+  }
+
+  h4 {
+      font-size: 1.25rem;
+
+      @include media-query('md') {
+          font-size: 1.5rem;
+      }
+
+      @include media-query('lg') {
+          font-size: 1.75rem;
+      }      
+  }
+
+  p {
+      margin-top: 15px;
+  }
+
+  .card-horizontal {
+    .card__eyebrow {
+      margin-top: 25px;
+    }
+  
+    .content {
+        padding-right: 0;
+    }
+  
+    @include media-query('lg') {
+      .content {
+          padding-right: 25px;
+      }
+    }
+  
+    @include media-query('md') {
+      display: flex;
+      flex-flow: row-reverse;
+      align-items: center;
+      gap: 30px;
+      grid-column: 1 / span 2;
+  
+      .content {
+          width: 50%;
+          padding-right: 0;
+      }
+  
+      img {
+          width: 50%;
+      }
+  
+      .card__eyebrow {
+          margin-top: 0;
+      }
+    }
+  
+    &.col-1 {
+      @include media-query('md') {
+        grid-column: 1 / span 2;
+      }
+    }
+    
+    &.col-2 {
+      @include media-query('md') {
+        grid-column: 2 / span 2;
+      }
+    }
+  }
+  
+  .card-vertical {
+    .card__eyebrow {
+      margin-top: 25px;
+    }
+  
+    @include media-query('md') {
+        grid-row: 1 / span 2;
+    }
+  
+    &.col-1 {
+      @include media-query('md') {
+        grid-column: 1 / span 1;
+      }
+    }
+  
+    &.col-2 {
+      @include media-query('md') {
+        grid-column: 2 / span 1;
+      }
+    }
+  
+    &.col-3 {
+      @include media-query('md') {
+        grid-column: 3 / span 1;
+      }
+    }
+  
+    &.row-1 {
+      @include media-query('md') {
+        grid-row: 1 / span 2;
+      }
+    }
+    
+    &.row-2 {
+      @include media-query('md') {
+        grid-row: 2 / span 2;
+      }
+    }
+    
+    &.row-3 {
+      @include media-query('md') {
+        grid-row: 3 / span 2;
+      }
+    }
+  }
+  
+  .bg-tertiary,
+  .bg-quaternary,
+  .bg-pink,
+  .bg-dark,
+  .bg-blue  {
+    svg {
+        fill: get-color('shades-light-bright');
+    }
+  
+    p, span, h4 {
+        color: get-color('shades-light-bright');
+    }
+  }
+  
+  .bg-quaternary {
+    $CORE_QUATERNARY: get-color('core-quaternary');
+    background-color: $CORE_QUATERNARY;
+  
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: rgba($CORE_QUATERNARY, .9);
+    }
+  }
+
+  .bg-dark {
+    background-color: #26373D;
+  
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: rgba(#26373D, .9);
+    }
+  }
+  
+  .bg-tertiary {
+    $CORE_TERTIARY: get-color('core-tertiary');
+    background-color: $CORE_TERTIARY;
+  
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: rgba($CORE_TERTIARY, .9);
+    }
+  }
+
+  .bg-pink {
+    $CORE_SECONDARY_SHADE: get-color('core-secondary-shade');
+    background-color: $CORE_SECONDARY_SHADE;
+  
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: rgba($CORE_SECONDARY_SHADE, .9);
+    }
+  }
+  
+  .bg-blue {
+    $CORE_PRIMARY: get-color('core-primary');
+    background-color: $CORE_PRIMARY;
+  
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: rgba($CORE_PRIMARY, .9);
+    }
+  }
+}
diff --git a/src/scss/pages/_course.scss b/src/scss/pages/_course.scss
new file mode 100644
index 00000000000..809f5b66fbc
--- /dev/null
+++ b/src/scss/pages/_course.scss
@@ -0,0 +1,260 @@
+$course-header-height: 144px;
+$course-search-height: 58px;
+$course-side-vert-space: 20px;
+
+.course {
+  /// For the sidebar composition
+  --sidebar-target-width: 22rem;
+
+  --sidebar-content-min-width: 70%;
+
+  /// For the navigation drawer web component
+  --web-navigation-drawer-width: 22rem;
+
+  .stack-nav {
+    margin-block: 0;
+  }
+
+  // Hides the check icon when item is not complete yet
+  .stack-nav a:not([data-complete='true']) {
+    svg {
+      display: none;
+    }
+  }
+
+  // Complete items have slightly dimmed look and feel
+  .stack-nav a[data-complete='true']:not([aria-current='page']) {
+    @include apply-utility('color', 'mid-text');
+
+    /// Hides any "NEW" meta elements
+    .stack-nav__meta:last-of-type {
+      display: none;
+    }
+  }
+
+  // Placeholder items have slightly dimmed look and feel
+  .is-placeholder span {
+    @include apply-utility('color', 'mid-text');
+  }
+
+  // Allows the sidebar elements to place and flex themselves
+  web-navigation-drawer > * {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  web-header {
+    --cluster-vertical-alignment: center;
+
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    /// Shorter left pad accounts for the burger menu button
+    padding: 0.8rem $global-gutter 0.8rem 1rem;
+    box-shadow: 0 0 10px rgba(0 0 0 / 20%);
+    background-position: top right;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-image: var(--course-background);
+
+    /// Background image is supplied as an inline style, as a custom property,
+    /// so we only want to set the color here
+    background-color: get-utility-value('bg', 'core-bg');
+
+    /// Targets the logo
+    > svg[role='img'] {
+      display: block;
+      width: 8rem;
+      height: 1.5rem;
+    }
+  }
+
+  // Allows this element to scroll independently
+  // Learn: https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/
+  course-links {
+    flex-basis: 0;
+  }
+}
+
+.course__sidebar {
+  --flow-space: #{$course-side-vert-space};
+
+  outline: 1px solid get-utility-value('color', 'stroke');
+  max-height: 100vh;
+  overflow: hidden;
+  gap: 0;
+
+  @include apply-utility('bg', 'core-bg');
+}
+
+.course__header {
+  background-image: var(--course-background);
+  background-position: top right;
+  background-repeat: no-repeat;
+  background-color: get-utility-value('bg', 'img-backdrop');
+  display: flex;
+  align-items: start;
+  flex: none;
+
+  /// These magic numbers ensure display and alignment
+  /// of decorative elements
+  height: $course-header-height;
+  padding: 0 1rem;
+  gap: 0.5rem;
+
+  /// Add a touch of top space to the close button to increase tap accuracy
+  .fab {
+    margin-block-start: $global-gutter-narrow;
+  }
+}
+
+.course__side-title {
+  margin: auto 0 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+
+  > svg {
+    height: 100%;
+    width: auto;
+  }
+}
+
+.course__over-scroll {
+  flex: auto;
+  overflow: auto;
+  // sass-lint:disable no-misspelled-properties
+  overscroll-behavior: contain;
+  position: relative;
+}
+
+.course__toc {
+  position: sticky;
+  top: get-space('size-1');
+  max-height: 90vh;
+
+  .toc__wrapper {
+    max-width: 18rem;
+  }
+}
+
+.course__intro {
+  max-width: $global-prose-element-max-width;
+
+  p {
+    font-style: italic;
+  }
+}
+
+/// RESPONSIVE STYLES
+.course {
+  @include media-query('md') {
+    &__sidebar {
+      max-width: var(--sidebar-target-width);
+    }
+  }
+}
+
+.course {
+  @include media-query('lg') {
+    --web-navigation-drawer-width: 100%;
+
+    > .sidebar {
+      gap: 0;
+    }
+
+    web-header {
+      display: none;
+      pointer-events: none;
+    }
+
+    .course__sidebar {
+      position: sticky;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+/// STYLES FOR EXISTING, UN-TOUCHED ELEMENTS
+web-search.course__search {
+  display: block;
+  height: $course-search-height;
+  padding: 0 $global-gutter-narrow;
+  // Prevent this from being squished by flex grow around us.
+  // This ensures that the search box doesn't grow as it appears.
+  min-height: $course-search-height;
+
+  .web-search__input-wrapper {
+    display: flex;
+  }
+
+  .web-search__open-btn,
+  .web-search__close-btn,
+  &[expanded] .web-search__close-btn {
+    display: none;
+  }
+}
+
+.web-search-popout {
+  height: 100%;
+  padding-top: 0.5rem;
+}
+
+.course {
+  /// Search is always visible so this doesn't need to show
+  .web-search__open-btn,
+  .web-search__search-icon {
+    display: none;
+  }
+
+  .web-search-popout {
+    position: absolute;
+
+    /// Andy: Gosh I hate this so much but making the search results a part of the partially
+    /// scrollable links section was causing scrolling *havoc*. This keeps it out of there,
+    /// but maintains the layout structure of its siblings. Luckily, we know how big they are,
+    /// how many there are and what the spacing between them is, so it's only partially "magic numbers"
+    top: #{$course-side-vert-space + $course-search-height +
+      $course-header-height};
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    @include apply-utility('bg', 'core-bg');
+
+    /// Adds space to the bottom of the last item, to assist with overscroll behaviour
+    .stack-nav li:last-child {
+      margin-bottom: get-space('size-3');
+    }
+  }
+
+  .web-course-search__no-results {
+    text-align: center;
+    padding-top: get-space('size-3');
+  }
+
+  /// Responsive adjustments for navigation drawer
+  web-navigation-drawer[type='standard'] {
+    @include media-query('lg') {
+      align-self: flex-start;
+      position: sticky;
+      pointer-events: auto;
+      top: 0;
+      width: auto;
+
+      [data-drawer-container] {
+        box-shadow: none;
+        transform: none;
+      }
+
+      [data-drawer-close-button] {
+        visibility: hidden;
+      }
+    }
+  }
+}
diff --git a/src/scss/pages/_design-system.scss b/src/scss/pages/_design-system.scss
new file mode 100644
index 00000000000..e608e342aa1
--- /dev/null
+++ b/src/scss/pages/_design-system.scss
@@ -0,0 +1,55 @@
+.design-system {
+  --sidebar-content-min-width: 60%;
+  --sidebar-target-width: 25rem;
+  --switcher-target-container-width: 0rem;
+
+  .sidebar > nav {
+    outline: 1px solid var(--color-stroke);
+  }
+
+  // Optical adjustment
+  .sidebar theme-toggle {
+    display: block;
+    transform: translateY(3px);
+  }
+
+  nav.cluster {
+    gap: 0.5rem $global-gutter;
+  }
+
+  details {
+    max-width: 50rem;
+  }
+
+  .prose {
+    iframe {
+      max-width: unset;
+    }
+  }
+}
+
+.design-system__swatch {
+  aspect-ratio: 1/1;
+  width: 3rem;
+  border: 1px solid var(--color-stroke);
+  flex-shrink: 0;
+}
+
+.design-system__preview-frame {
+  width: 100%;
+  min-height: 500px;
+  border: 1px solid var(--color-stroke);
+  resize: both;
+
+  &[data-size='tall'] {
+    min-height: 800px;
+  }
+}
+
+.design-system .breakout {
+  max-width: 52rem;
+
+  details {
+    margin-inline: auto;
+  }
+}
diff --git a/src/scss/pages/_explore.scss b/src/scss/pages/_explore.scss
new file mode 100644
index 00000000000..05ec768ee14
--- /dev/null
+++ b/src/scss/pages/_explore.scss
@@ -0,0 +1,18 @@
+.explore__collections {
+  .pill {
+    min-width: 4rem;
+  }
+
+  .cluster {
+    gap: 1em;
+  }
+}
+
+.explore__collection {
+  border-block-start: 1px solid var(--color-stroke);
+  padding-block: get-space('size-1');
+
+  .auto-grid {
+    padding-block-end: get-space('size-2');
+  }
+}
diff --git a/src/scss/pages/_homepage.scss b/src/scss/pages/_homepage.scss
new file mode 100644
index 00000000000..aa355bbf643
--- /dev/null
+++ b/src/scss/pages/_homepage.scss
@@ -0,0 +1,75 @@
+.homepage {
+  // Creates a pencil line for the one case where there's a border
+  hr {
+    margin: 0;
+    width: 100%;
+    max-width: unset;
+  }
+
+  hr + * {
+    --flow-space: unset;
+  }
+
+  .headline__title {
+    max-width: 100%;
+
+    @include media-query('md') {
+      margin-top: 50px;
+    }
+  }
+
+  .cluster {
+    gap: 0.5rem 0.8rem;
+
+    .pill {
+      padding: 0.5rem 0.8rem;
+    }
+  }
+
+  web-subscribe {
+    border-top: none;
+  }
+}
+
+.homepage__section {
+  padding-block: get-space('size-3');
+}
+
+.homepage__developers svg {
+  fill: var(--color-mid-text);
+}
+
+.homepage__news {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: 2fr;
+  grid-column-gap: 30px;
+  max-width: 70rem;
+  margin: auto;
+
+  .card {
+    justify-self: center;
+    margin-bottom: 30px;
+  }
+
+  @include media-query('md') {
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 1fr;
+
+    .card {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.homepage .repel {
+  --repel-vertical-alignment: stretch;
+}
+
+.homepage__collection {
+  border-top: 1px solid var(--color-stroke);
+
+  .wrapper {
+      padding-top: 2.5rem;
+  }
+}
diff --git a/src/scss/pages/_landing-page.scss b/src/scss/pages/_landing-page.scss
new file mode 100644
index 00000000000..2b09e993f59
--- /dev/null
+++ b/src/scss/pages/_landing-page.scss
@@ -0,0 +1,9 @@
+.landing-page {
+  --auto-grid-placement: auto-fit;
+}
+
+@include media-query('md') {
+  .landing-page {
+    --auto-grid-min-item-size: 22rem;
+  }
+}
diff --git a/src/scss/pages/_learn.scss b/src/scss/pages/_learn.scss
new file mode 100644
index 00000000000..749d8a155f2
--- /dev/null
+++ b/src/scss/pages/_learn.scss
@@ -0,0 +1,13 @@
+.learn__collection {
+  .card[data-style=branded] {
+    min-height: 25.625rem;
+    max-width: 37rem;
+    min-width: auto;
+  }
+}
+
+.learn__hero {
+  p {
+    max-width: 74ch;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/pages/_measure.scss b/src/scss/pages/_measure.scss
new file mode 100644
index 00000000000..65f05d89220
--- /dev/null
+++ b/src/scss/pages/_measure.scss
@@ -0,0 +1,11 @@
+.measure__section {
+  padding-block: clamp(3.75rem, 3.21rem + 2.68vw, 5.625rem);
+}
+
+@include media-query('lg') {
+  .measure__page-speed-hero {
+    .hero__content {
+      margin-block-start: get-space('size-4');
+    }
+  }
+}
diff --git a/src/scss/pages/_pattern.scss b/src/scss/pages/_pattern.scss
new file mode 100644
index 00000000000..e568495adbf
--- /dev/null
+++ b/src/scss/pages/_pattern.scss
@@ -0,0 +1,56 @@
+.code-pattern {
+  width: 100%;
+
+  --flow-space: 1em;
+  --primary-color: get-color('core-primary');
+
+  .code-pattern__content {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+
+    @include media-query('md') {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .code-pattern__assets {
+    overflow: hidden;
+
+    .web-tabs__tablist {
+      border: solid var(--color-stroke);
+      border-width: 1px 1px 0 1px;
+    }
+  }
+
+  .code-pattern__meta {
+    padding-top: 0.5rem;
+  }
+
+  .code-pattern__icon {
+    svg {
+      display: inline-block;
+      margin-right: 6px;
+      vertical-align: middle;
+    }
+  }
+
+  iframe {
+    background-color: get-utility-value('bg', 'core-bg');
+    border: 1px solid var(--color-stroke);
+    width: 100%;
+    resize: both;
+    position: relative;
+    z-index: 1;
+  }
+
+  web-tabs {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.code-patterns__description,
+.code-patterns__more {
+  --flow-space: 1em;
+}
diff --git a/src/scss/pages/_spaces.scss b/src/scss/pages/_spaces.scss
new file mode 100644
index 00000000000..8e5a56e4f80
--- /dev/null
+++ b/src/scss/pages/_spaces.scss
@@ -0,0 +1,212 @@
+.spaces {
+  --blue-1: #3740ff;
+  --blue-2: #3c82ff;
+  --blue-3: #3fc4ff;
+  --color-transparent-img-mask: transparent;
+  --auto-grid-min-item-size: 310px;
+
+  audio {
+    width: 250px;
+    @include media-query('md') {
+      width: 100%;
+    }
+  }
+
+  .wrapper.spaces--past {
+    padding-inline: 0;
+    margin-inline: 0;
+    @include media-query('md') {
+      padding-inline: $global-gutter;
+      margin-inline: auto;
+    }
+  }
+
+  .hero, .hero p {
+    background: none;
+    color: #fff;
+  }
+
+  header {
+    margin-bottom: map-get($gorko-space-scale, 'size-1');
+    min-height: 740px;
+    position: relative;
+  }
+
+  header:before {
+    position: absolute;
+    content: "";
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/3a8feEJ8tNYtUQRUHPER.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: bottom left;
+
+    @include media-query('md') {
+      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/3tW171hjep8z4WvpAvkw.svg');
+    }
+  }
+
+  .hero__columns {
+    align-items: center;
+  }
+
+  // Cards
+
+  .card__header {
+    background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/x7xXPnsdyuEsWENvc0oZ.svg');
+    background-size: cover;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .avatar {
+      --avatar-size: 96px;
+      --avatar-gap: 6px;
+    }
+  }
+
+  .card {
+    &:nth-child(3n+1)  .card__header {
+      --color-core-bg: #3740ff;
+      --color-action-bg-primary: var(--blue-3);
+    }
+
+    &:nth-child(3n+2) .card__header {
+      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/Ays4p05JflBuEf9Jn7lg.svg');
+      --color-core-bg: #3c82ff;
+      --color-action-bg-primary: var(--blue-1)
+    }
+
+    &:nth-child(3n+3) .card__header {
+      background-image: url('https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/GfTxIFG0aFNwHR9x5HpU.svg');
+      --color-core-bg: #3fc4ff;
+      --color-action-bg-primary: var(--blue-2)
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    .card__content {
+      text-align: initial;
+    }
+  }
+
+
+  // Avatars
+
+  .avatars {
+    overflow: hidden;
+    padding-inline-end: 0;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .avatar {
+    --avatar-size: 32px;
+    --avatar-gap: 2px;
+    min-width:  var(--avatar-size);
+    display: inline-block;
+    border: 3px solid var(--color-action-bg-primary);
+    box-shadow: 0 0 0 var(--avatar-gap) var(--color-core-bg);
+
+    &:first-child {
+      --avatar-gap: 0;
+    }
+
+    img {
+      display: inline-block;
+    }
+
+    @include media-query('md') {
+      --avatar-size: 72px;
+      --avatar-gap: 4px;
+    }
+  }
+
+  img.avatar {
+    --avatar-offset: -0.3;
+  }
+
+  // Set a bigger avatar offset if there are 5 or 6 hosts, so that they fit.
+  img.avatar:first-child:nth-last-child(5),
+  img.avatar:first-child:nth-last-child(5) ~ img.avatar,
+  img.avatar:first-child:nth-last-child(6),
+  img.avatar:first-child:nth-last-child(6) ~ img.avatar {
+    --avatar-offset: -0.5;
+  }
+
+  img.avatar + img.avatar,
+  .card .avatar + .avatar {
+    margin-left: calc(var(--avatar-size) * var(--avatar-offset));
+  }
+
+  // Hosts
+
+  ul.hosts {
+    list-style: none;
+    padding: 0;
+  }
+
+  .host {
+    padding-right: 1em;
+    display: block;
+
+    @include media-query('md') {
+      display: inline;
+    }
+
+    .pill {
+      margin-inline: 1em;
+    }
+  }
+
+  // Adjustments
+  .icon-button {
+    color: var(--color-action-bg-primary);
+  }
+
+  table {
+    width: 100%;
+
+    td {
+      vertical-align: top;
+      @include media-query('md') {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  p {
+    color: var(--color-mid-text);
+  }
+
+  .ellipsis__more {
+    display: none;
+  }
+
+  @include media-query('md') {
+    .ellipsis__more {
+      display: block;
+    }
+  }
+
+  // Mobile
+
+  td.eyebrow {
+    display: none;
+    @include media-query('md') {
+      display: table-cell;
+    }
+  }
+
+  .sm-only {
+    @include media-query('md') {
+      display: none;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/scss/utilities/_all-center.scss b/src/scss/utilities/_all-center.scss
new file mode 100644
index 00000000000..b4af009aff7
--- /dev/null
+++ b/src/scss/utilities/_all-center.scss
@@ -0,0 +1,6 @@
+/// ALL CENTER UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#all-center
+.all-center > * {
+  text-align: center;
+  margin-inline: auto;
+}
diff --git a/src/scss/utilities/_avatar.scss b/src/scss/utilities/_avatar.scss
new file mode 100644
index 00000000000..269859d2206
--- /dev/null
+++ b/src/scss/utilities/_avatar.scss
@@ -0,0 +1,20 @@
+/// AVATAR UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#avatar
+.avatar,
+.avatar > img {
+  width: var(--avatar-size, 65px);
+  height: var(--avatar-size, 65px);
+  object-fit: cover;
+  flex: none;
+  border-radius: 50%;
+}
+
+.avatar[data-size='large'],
+.avatar[data-size='large'] > img {
+  --avatar-size: 192px;
+}
+
+.avatar[data-size='medium'],
+.avatar[data-size='medium'] > img {
+  --avatar-size: 120px;
+}
diff --git a/src/scss/utilities/_docked-actions.scss b/src/scss/utilities/_docked-actions.scss
new file mode 100644
index 00000000000..55bf96ccf83
--- /dev/null
+++ b/src/scss/utilities/_docked-actions.scss
@@ -0,0 +1,7 @@
+/// Docks share/subscribe actions to the block end and inline end
+.docked-actions {
+  inset: auto $global-gutter $global-gutter auto;
+  position: fixed;
+  text-align: end;
+  z-index: 1;
+}
diff --git a/src/scss/utilities/_flow.scss b/src/scss/utilities/_flow.scss
new file mode 100644
index 00000000000..f8a0ea32e23
--- /dev/null
+++ b/src/scss/utilities/_flow.scss
@@ -0,0 +1,5 @@
+/// FLOW UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#flow
+.flow > * + * {
+  margin-top: var(--flow-space, 1em);
+}
diff --git a/src/scss/utilities/_focus-ring.scss b/src/scss/utilities/_focus-ring.scss
new file mode 100644
index 00000000000..2e8704088db
--- /dev/null
+++ b/src/scss/utilities/_focus-ring.scss
@@ -0,0 +1,9 @@
+/// FOCUS RING
+/// Info: https://web.dev/design-system/css-utilities/#focus-ring
+.focus-ring:focus-visible,
+:focus-visible + .focus-ring {
+  outline: 2px solid transparent;
+  box-shadow: 0px 0px 0px 2px
+      var(--focus-ring-padding-color, var(--color-core-bg)),
+    0px 0px 0px 4px var(--color-focus-ring);
+}
diff --git a/src/scss/utilities/_over-scroll.scss b/src/scss/utilities/_over-scroll.scss
new file mode 100644
index 00000000000..033c9cb2d64
--- /dev/null
+++ b/src/scss/utilities/_over-scroll.scss
@@ -0,0 +1,10 @@
+/// OVER-SCROLL UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#over-scroll
+
+.over-scroll {
+  flex: auto;
+  overflow: auto;
+  // sass-lint:disable no-misspelled-properties
+  overscroll-behavior: contain;
+  position: relative;
+}
diff --git a/src/scss/utilities/_region.scss b/src/scss/utilities/_region.scss
new file mode 100644
index 00000000000..12fb8b1fb95
--- /dev/null
+++ b/src/scss/utilities/_region.scss
@@ -0,0 +1,6 @@
+/// REGION UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#region
+.region {
+  padding-top: var(--region-space, #{get-space('size-3')});
+  padding-bottom: var(--region-space, #{get-space('size-3')});
+}
diff --git a/src/scss/utilities/_scrollbar.scss b/src/scss/utilities/_scrollbar.scss
new file mode 100644
index 00000000000..185763a8dde
--- /dev/null
+++ b/src/scss/utilities/_scrollbar.scss
@@ -0,0 +1,24 @@
+/// SCROLLBAR UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#scrollbar
+.scrollbar {
+  scrollbar-color: get-utility-value('bg', 'core-bg')
+    get-utility-value('bg', 'stroke');
+}
+
+.scrollbar::-webkit-scrollbar {
+  height: 8px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  border: 1px solid get-utility-value('bg', 'stroke');
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  @include apply-utility('bg', 'stroke');
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  @include apply-utility('bg', 'action-bg-hover');
+}
diff --git a/src/scss/utilities/_visually-hidden.scss b/src/scss/utilities/_visually-hidden.scss
new file mode 100644
index 00000000000..271d73e0a30
--- /dev/null
+++ b/src/scss/utilities/_visually-hidden.scss
@@ -0,0 +1,14 @@
+/// VISUALLY HIDDEN UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#visually-hidden
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
diff --git a/src/scss/utilities/_wrapper.scss b/src/scss/utilities/_wrapper.scss
new file mode 100644
index 00000000000..05fcdcc8ea1
--- /dev/null
+++ b/src/scss/utilities/_wrapper.scss
@@ -0,0 +1,30 @@
+/// WRAPPER UTILITY
+/// Info: https://web.dev/design-system/css-utilities/#wrapper
+
+.wrapper {
+  margin-inline: auto;
+  width: 85rem; // For no clamp support
+  width: clamp(16rem, 95vw, 85rem);
+  padding-inline: $global-gutter;
+  position: relative;
+}
+
+.wrapper[data-size='narrow'] {
+  width: 62rem; // For no clamp support
+  width: clamp(16rem, 95vw, 62rem);
+  padding-inline: 0;
+}
+
+.wrapper[data-size='extra-narrow'] {
+  width: 46rem; // For no clamp support
+  width: clamp(16rem, 95vw, 46rem);
+  padding-inline: $global-gutter;
+
+  @include media-query('lg') {
+    padding-inline: 0;
+  }
+}
+
+.wrapper[data-flush] {
+  padding-inline: 0;
+}
diff --git a/src/scss/web-components/_web-assessment.scss b/src/scss/web-components/_web-assessment.scss
new file mode 100644
index 00000000000..cc94371cee7
--- /dev/null
+++ b/src/scss/web-components/_web-assessment.scss
@@ -0,0 +1,41 @@
+web-assessment,
+.web-assessment__launcher {
+  --gutter: 0.5rem;
+
+  display: block;
+  padding: $global-gutter;
+  border-radius: $global-radius-large;
+  border: 1px solid var(--color-stroke);
+
+  @include apply-utility('bg', 'mid-bg');
+  @include apply-utility('color', 'state-good-text');
+}
+
+web-assessment {
+  a {
+    color: currentColor;
+    text-decoration-color: currentColor;
+  }
+
+  a:focus {
+    outline-color: currentColor;
+  }
+
+  .web-tabs__tablist {
+    background: none;
+  }
+
+  [data-role='stimulus'] {
+    margin-block: get-space('size-1');
+  }
+}
+
+.web-assessment__content {
+  margin-top: get-space('size-1');
+
+  @include apply-utility('color', 'core-text');
+}
+
+.web-question__content {
+  padding: get-space('size-1') 0 0;
+}
diff --git a/src/scss/web-components/_web-audio-fab.scss b/src/scss/web-components/_web-audio-fab.scss
new file mode 100644
index 00000000000..ff912673da5
--- /dev/null
+++ b/src/scss/web-components/_web-audio-fab.scss
@@ -0,0 +1,111 @@
+/// WEB AUDIO FAB
+/// Styles mainly pulled from existing styles and refactored
+/// with new system elements
+web-audio-fab {
+  border-radius: 50%;
+  box-shadow: 0px 8px 12px 6px rgba(60, 64, 67, 0.15),
+    0px 4px 4px rgba(60, 64, 67, 0.3);
+  display: block;
+  height: 56px;
+  width: 56px;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  right: $global-gutter;
+  bottom: $global-gutter;
+  transition: opacity $global-transition-bounce;
+  z-index: 1;
+
+  &[showing] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.web-audio-fab {
+  &__button {
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  &__thumbnail {
+    border-radius: 50%;
+    display: block;
+  }
+
+  &__equalizer-container {
+    align-items: center;
+    background-color: #fff;
+    border-radius: 50%;
+    bottom: 0;
+    box-shadow: 0px 8px 12px 6px rgba(60, 64, 67, 0.15),
+      0px 4px 4px rgba(60, 64, 67, 0.3);
+    display: flex;
+    height: 24px;
+    justify-content: center;
+    position: absolute;
+    right: 0;
+    width: 24px;
+  }
+
+  &__equalizer {
+    fill: get-color('core-primary');
+
+    &-left {
+      animation: equalizer-morph 1s linear 0.1s infinite;
+      transform-origin: bottom;
+    }
+
+    &-middle {
+      animation: equalizer-morph 1s linear 0.2s infinite;
+      transform-origin: bottom;
+    }
+
+    &-right {
+      animation: equalizer-morph 1s linear 0.4s infinite;
+      transform-origin: bottom;
+    }
+  }
+}
+
+// Shout out to Hope Armstrong for the original codepen
+// https://blog.logrocket.com/animating-svg-with-css-83e8e27d739c/
+// https://codepen.io/hopearmstrong/pen/VNYoNq
+
+@keyframes equalizer-morph {
+  0% {
+    transform: scaleY(1);
+  }
+
+  25% {
+    transform: scaleY(0.3);
+  }
+
+  50% {
+    transform: scaleY(0.7);
+  }
+
+  75% {
+    transform: scaleY(0.15);
+  }
+}
+
+web-audio-fab:not([playing]) .web-audio-fab__equalizer {
+  &-left {
+    animation: none;
+    transform: scaleY(0.8);
+  }
+
+  &-middle {
+    animation: none;
+    transform: scaleY(1);
+  }
+
+  &-right {
+    animation: none;
+    transform: scaleY(0.6);
+  }
+}
diff --git a/src/scss/web-components/_web-codelab.scss b/src/scss/web-components/_web-codelab.scss
new file mode 100644
index 00000000000..3b49261166b
--- /dev/null
+++ b/src/scss/web-components/_web-codelab.scss
@@ -0,0 +1,32 @@
+.web-codelab {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: $global-gutter get-space('size-1');
+  padding: $global-gutter;
+
+  .prose {
+    width: inherit;
+  }
+
+  @media (min-width: 1000px) {
+    display: grid;
+    gap: 0;
+    grid-template-columns: minmax(0px, 600px) minmax(0px, 100%);
+
+    .web-codelab__glitch-container {
+      position: sticky;
+      top: calc(#{$global-gutter} / 2);
+      height: calc(100vh - #{$global-gutter});
+
+      .web-codelab__glitch-iframe {
+        height: 100%;
+        width: 100%;
+        border: 0;
+
+        &.web-codelab__glitch-snapshot {
+          background-color: red;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/web-components/_web-copy-code.scss b/src/scss/web-components/_web-copy-code.scss
new file mode 100644
index 00000000000..9a90c36a9fb
--- /dev/null
+++ b/src/scss/web-components/_web-copy-code.scss
@@ -0,0 +1,38 @@
+web-copy-code {
+  position: relative;
+  display: block;
+
+  &:active,
+  &:focus,
+  &:hover {
+    .web-copy-code__button {
+      opacity: 1;
+    }
+  }
+
+  .web-copy-code__button {
+    // We should use these classes in the web component itself
+    @extend .fab;
+    @extend .tooltip;
+
+    position: absolute;
+    inset: 0.5rem 0.5rem auto auto;
+    overflow: visible;
+    opacity: 0;
+
+    &::before {
+      display: block;
+      width: 1.25em;
+      height: 1.25em;
+
+      /// This needs to be removed in favour of an SVG in the web component itself and should have the following CSS:
+      /// fill: get-utility-value('color', 'mid-text');
+      content: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768"><path fill="gray" d="M607.5 672v-448.5h-351v448.5h351zM607.5 160.5q25.5 0 45 18.75t19.5 44.25v448.5q0 25.5-19.5 45t-45 19.5h-351q-25.5 0-45-19.5t-19.5-45v-448.5q0-25.5 19.5-44.25t45-18.75h351zM511.5 31.5v64.5h-384v448.5h-63v-448.5q0-25.5 18.75-45t44.25-19.5h384z"></path></svg>');
+    }
+
+    // We should use these classes in the web component itself
+    [role='tooltip'] .tooltip__content {
+      @extend .tooltip__content;
+    }
+  }
+}
diff --git a/src/scss/web-components/_web-navigation-drawer.scss b/src/scss/web-components/_web-navigation-drawer.scss
new file mode 100644
index 00000000000..cf300bbb51e
--- /dev/null
+++ b/src/scss/web-components/_web-navigation-drawer.scss
@@ -0,0 +1,68 @@
+// The navigation drawer has two types: standard and modal.
+//
+// modal (default)
+// -----
+// Modal navigation drawers block interaction with the rest of an app’s content
+// with a scrim. They are elevated above most of the app’s UI and don’t affect
+// the screen’s layout grid.
+//
+// standard
+// --------
+// Standard navigation drawers allow users to simultaneously access drawer
+// destinations and app content. They are often co-planar with app content and
+// affect the screen’s layout grid. They can be used on tablet and desktop only.
+// On mobile, they switch to a modal behavior.
+
+web-navigation-drawer {
+  display: block;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 300;
+
+  [data-drawer-container] {
+    box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
+    // position: relative is needed here to keep the drawer above the scrim
+    position: relative;
+    transform: translateX(-110%);
+    width: var(--web-navigation-drawer-width, fit-content);
+
+    @include apply-utility('bg', 'core-bg');
+  }
+}
+
+// This is the scrim that appears behind the navigation drawer when it is
+// expanded.
+web-navigation-drawer::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(5px);
+  opacity: 0;
+}
+
+web-navigation-drawer[open] {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+web-navigation-drawer[open]::before {
+  opacity: 1;
+}
+
+web-navigation-drawer[open] [data-drawer-container],
+web-navigation-drawer[open]:focus-within [data-drawer-container] {
+  transform: none;
+}
+
+web-navigation-drawer[animating] [data-drawer-container] {
+  transition: transform $global-transition-movement;
+}
diff --git a/src/scss/web-components/_web-search.scss b/src/scss/web-components/_web-search.scss
new file mode 100644
index 00000000000..e8ee6c09510
--- /dev/null
+++ b/src/scss/web-components/_web-search.scss
@@ -0,0 +1,15 @@
+/// WEB SEARCH and WEB SEARCH RESULTS
+/// Styles for both are here for brevity
+
+web-search {
+  position: relative;
+
+  .icon-button svg {
+    transform: translateY(2px); // Optical adjustment
+  }
+}
+
+web-search-results .stack-nav {
+  list-style: none;
+  margin: 0;
+}
diff --git a/src/scss/web-components/_web-select-group.scss b/src/scss/web-components/_web-select-group.scss
new file mode 100644
index 00000000000..f199d3e4c66
--- /dev/null
+++ b/src/scss/web-components/_web-select-group.scss
@@ -0,0 +1,75 @@
+.web-select-group {
+  border: none;
+  padding: 0;
+}
+
+.web-select-group__options-wrapper {
+  padding: get-space('base') 0;
+}
+
+.web-select-group__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3rem;
+
+  code {
+    border: none;
+    padding: 0;
+    background: transparent;
+  }
+
+  input {
+    transform: translateY(0.2ex);
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.web-select-group__option + .web-select-group__option {
+  margin-top: 0.5rem;
+}
+
+.web-response-mc__selector::after {
+  display: none;
+}
+
+.web-response__correctness-flag {
+  transform: translateY(-0.25ex);
+  margin-block-end: 0.5rem;
+
+  @include apply-utility('weight', 'bold');
+  @include apply-utility('color', 'state-bad-text');
+
+  [data-correct] & {
+    @include apply-utility('color', 'state-good-text');
+  }
+}
+
+.web-response__option-rationale {
+  font-size: get-size('size-0');
+  margin-block-end: 0.5rem;
+
+  @include apply-utility('color', 'mid-text');
+}
+
+/// Only show the correctness flags and option rationale when the
+/// context (usually assesment is submitted)
+.web-select-group {
+  .web-response__correctness-flag,
+  .web-response__option-rationale {
+    display: none;
+  }
+}
+
+.web-response-tac__option-rationale {
+  display: none;
+}
+
+
+[data-role='option'][data-submitted] .web-response__correctness-flag,
+[data-role='option'][data-submitted] .web-response__option-rationale,
+[data-role='option'][data-submitted] .web-response-tac__option-rationale {
+  display: block;
+}
diff --git a/src/scss/web-components/_web-snackbar.scss b/src/scss/web-components/_web-snackbar.scss
new file mode 100644
index 00000000000..1dd3edadced
--- /dev/null
+++ b/src/scss/web-components/_web-snackbar.scss
@@ -0,0 +1,42 @@
+web-snackbar {
+  --flow-space: #{get-space('size-1')};
+  visibility: hidden;
+  display: block;
+  padding: $global-gutter;
+  background: get-color('shades-dim');
+  color: get-color('shades-light');
+  outline: 1px solid var(--color-stroke);
+  width: 100%;
+  position: fixed;
+  inset: auto auto 0 0;
+  z-index: 99;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+
+  .button {
+    padding: 0.8rem 1rem;
+    background: get-color('shades-charcoal');
+    color: get-color('core-primary-glare');
+    min-width: 6rem;
+    justify-content: center;
+  }
+
+  .button--action {
+    background: get-color('core-primary-glare');
+    color: get-color('shades-charcoal');
+  }
+
+  a {
+    color: get-color('core-primary-glare');
+  }
+
+  @include media-query('md') {
+    inset: auto auto $global-gutter $global-gutter;
+    border-radius: $global-radius-large;
+    max-width: 30rem;
+  }
+
+  &[open] {
+    visibility: visible;
+  }
+}
diff --git a/src/scss/web-components/_web-subscribe.scss b/src/scss/web-components/_web-subscribe.scss
new file mode 100644
index 00000000000..7e7a5afa207
--- /dev/null
+++ b/src/scss/web-components/_web-subscribe.scss
@@ -0,0 +1,46 @@
+web-subscribe {
+  display: block;
+  padding: get-space('size-3') 0;
+  border-block-start: 1px solid var(--color-stroke);
+
+  .wrapper {
+    max-width: 50rem;
+  }
+
+  form .cluster {
+    flex-wrap: nowrap;
+    max-width: 40rem;
+    margin-inline: auto;
+  }
+
+  // See https://github.com/GoogleChrome/web.dev/issues/7638#issuecomment-1087607518
+  input:not([type]),
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  textarea,
+  select {
+    max-width: unset;
+  }
+
+  .captcha {
+    height: 78px;
+
+    &__placeholder {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      color: var(--color-action-bg);
+      align-items: center;
+      max-width: 304px;
+      height: 100%;
+      background-color: var(--color-mid-text);
+      border-radius: 5px;
+    }
+
+    .spinner {
+      width: 30px;
+      --color: #3740ff;
+    }
+  }
+}
diff --git a/src/scss/web-components/_web-tabs.scss b/src/scss/web-components/_web-tabs.scss
new file mode 100644
index 00000000000..364e9db89cb
--- /dev/null
+++ b/src/scss/web-components/_web-tabs.scss
@@ -0,0 +1,70 @@
+/// To change the active color, set a Custom Property value for
+/// --tabs-active-color and it will override the default, which is
+/// the primary color
+web-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+web-tabs:not(:defined) {
+  display: none;
+}
+
+.web-tabs__tablist {
+  display: flex;
+  scrollbar-width: 0;
+
+  @include overflow-shadow(#{get-utility-value('bg', 'core-bg')});
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.web-tabs__tab {
+  position: relative;
+
+  // Lets them grow, stops them shrinking and lets them pick their own size
+  flex: 1 0 auto;
+  padding: 1rem 1.5rem;
+  background: transparent;
+  border: none;
+
+  // A rare occasion to break from the sizing scale because size-0 is just a bit
+  // too small in this context
+  font-size: 0.9em;
+  text-transform: uppercase;
+  text-align: center;
+  cursor: pointer;
+  letter-spacing: 0.03ch;
+  border-bottom: 2px solid var(--color-stroke);
+
+  @include apply-utility('color', 'mid-text');
+  @include apply-utility('font', 'brand');
+
+  &.hidden {
+    display: none;
+  }
+
+  &:hover {
+    @include apply-utility('bg', 'highlight-interact-bg');
+  }
+}
+
+.web-tabs__tab[aria-selected='true'] {
+  border-color: var(
+    --tabs-active-color,
+    #{get-utility-value('color', 'action-text')}
+  );
+
+  @include apply-utility('color', 'core-text');
+}
+
+.web-tabs__panel {
+  height: 100%;
+  overflow: auto;
+
+  code, pre {
+    height: 100%;
+  }
+}
diff --git a/src/site/_collections/algolia-posts.js b/src/site/_collections/algolia-posts.js
deleted file mode 100644
index 33433bac07c..00000000000
--- a/src/site/_collections/algolia-posts.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {livePosts} = require('../_filters/live-posts');
-const removeMarkdown = require('remove-markdown');
-
-/**
- * Shrink the size of the given fulltext to fit within a certain limit, at the
- * nearest found newline character.
- *
- * @param {string} fulltext
- * @param {number=} limit
- * @return {string}
- */
-function limitText(fulltext, limit = 7500) {
-  if (fulltext.length <= limit) {
-    return fulltext;
-  }
-
-  // Find the nearest prior newline to the 10k limit.
-  let newlineIndex = fulltext.lastIndexOf('\n', limit);
-  if (newlineIndex === -1) {
-    newlineIndex = limit;
-  }
-  return fulltext.slice(0, newlineIndex);
-}
-
-module.exports = (collection) => {
-  const validTags = ['post'];
-  const eleventyPosts = collection
-    .getFilteredByGlob('**/*.md')
-    .filter((item) => {
-      // nb. There's no easy 'getFilteredByMultipleTag' method in Eleventy.
-      if (!Array.isArray(item.data.tags)) {
-        return false;
-      }
-      return item.data.tags.some((tag) => validTags.includes(tag));
-    })
-    .filter((item) => {
-      return item.data.title && item.data.page.url;
-    })
-    .filter(livePosts);
-
-  // For now, hard-code language to English.
-  const lang = 'en';
-
-  // Convert 11ty-posts to a flat, indexable format.
-  return eleventyPosts.map(({data, template}) => {
-    const fulltext = removeMarkdown(template.frontMatter.content);
-
-    // Algolia has a limit of ~10k JSON on its records. For now, just trim fulltext to the nearest
-    // line break below ~7500 characters (allowing buffer).
-    // As of September 2019, this effects about 20 articles.
-    // https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/in-depth/index-and-records-size-and-usage-limitations/#record-size
-    const limited = limitText(fulltext);
-
-    return {
-      objectID: data.page.url + '#' + lang,
-      lang,
-      title: data.title,
-      url: data.canonicalUrl,
-      description: data.description,
-      fulltext: limited,
-      _tags: data.tags,
-    };
-  });
-};
diff --git a/src/site/_collections/authors.js b/src/site/_collections/authors.js
index 3c4d0ddb35a..a9c703f3749 100644
--- a/src/site/_collections/authors.js
+++ b/src/site/_collections/authors.js
@@ -13,127 +13,112 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const yaml = require('js-yaml');
+const fs = require('fs');
 const path = require('path');
-const authorsData = require('../_data/authorsData');
-const {livePosts} = require('../_filters/live-posts');
-const setdefault = require('../_utils/setdefault');
 
-/**
- * Generate map the posts by author's username/key
- *
- * @param {Array<{ data: { authors: any[] }}>} posts
- * @return {Map<string, Array<Object>>} Map of posts by author's username/key
- */
-const findAuthorsPosts = (posts) => {
-  const authorsMap = new Map();
-  posts.forEach((post) => {
-    const authors = post.data.authors || [];
-    authors.forEach((author) => {
-      const postsByAuthor = setdefault(authorsMap, author, []);
-      postsByAuthor.push(post);
-      authorsMap.set(author, postsByAuthor);
-    });
-  });
-  return authorsMap;
-};
-
-/**
- * @param {!Author} author to update
- * @param {!Array<*>} allAuthorPosts posts including drafts
- * @return {boolean} whether this author is allowed here
- */
-const maybeUpdateAuthorHref = (author, allAuthorPosts) => {
-  if (author.elements.length !== 0) {
-    return true;
-  }
-
-  if (author.twitter) {
-    author.href = `https://twitter.com/${author.twitter}`;
-    return true;
-  }
-
-  // If the author has scheduled or draft posts, don't complain.
-  if (allAuthorPosts.length !== 0) {
-    return true;
-  }
-
-  return false;
-};
+/** @type AuthorsData */
+const authorsData = require('../_data/authorsData.json');
+const authorsYaml = yaml.safeLoad(
+  fs.readFileSync(
+    path.join(__dirname, '..', '_data', 'i18n', 'authors.yml'),
+    'utf-8',
+  ),
+);
+const {isLive} = require('../_filters/is-live');
+const {sortByUpdated} = require('../_utils/sort-by-updated');
+
+/** @type Authors */
+let processedCollection;
+const PLACEHOLDER_IMG = 'image/admin/1v5F1SOBl46ZghbHQMle.svg';
 
 /**
  * Returns all authors with their posts.
  *
- * @param {any} [collections] Eleventy collection object
- * @return {Object.<string, Author>}
+ * @param {EleventyCollectionObject} [collections] Eleventy collection object
+ * @return {Authors}
  */
 module.exports = (collections) => {
-  let allPosts = [];
-
-  if (collections) {
-    // Find all posts, sort and key by author. Don't yet filter to live posts.
-    allPosts = collections
-      .getFilteredByGlob('**/*.md')
-      .sort((a, b) => b.date - a.date);
+  if (processedCollection) {
+    return processedCollection;
   }
 
-  const authorsPosts = findAuthorsPosts(allPosts);
-
-  /** @constant @type {Object.<string, Author>} @default */
+  /** @type Authors */
   const authors = {};
 
-  /** @type {!Array<string>} */
-  const invalidAuthors = [];
-
-  Object.keys(authorsData).forEach((key) => {
-    const author = {...authorsData[key]};
-    author.key = key;
-
-    // Generate the author's name out of valid given/family parts. This
-    // allows our authors to just have a single name.
-    const parts = [author.name.given, author.name.family].filter(
-      (s) => s && s.length,
-    );
-    author.title = parts.join(' ');
-    author.href = `/authors/${key}/`;
-    author.description =
-      author.description && author.description.en
-        ? author.description.en
-        : `Our latest news, updates, and stories by ${author.title}.`;
-    author.data = {
-      title: author.title,
-      subhead: author.description,
-      canonicalUrl: author.href,
-    };
+  Object.keys(authorsYaml).forEach((key) => {
+    const authorData = authorsData[key] || {};
+    const href = `/authors/${key}/`;
+    let elements = [];
+    let date, updated;
+    const image = authorData.image || PLACEHOLDER_IMG;
+
+    // Get posts
+    if (collections) {
+      elements = collections
+        .getFilteredByGlob('**/*.md')
+        .filter(
+          (item) =>
+            isLive(item) &&
+            !item.data.excludeFromAuthors &&
+            (item.data.authors || []).includes(key),
+        )
+        .sort(sortByUpdated);
+    }
 
-    // Get all authors but filter later.
-    const allAuthorPosts = authorsPosts.get(key) || [];
-    author.elements = allAuthorPosts.filter(livePosts);
+    // Limit posts for percy
+    if (process.env.PERCY) {
+      elements = elements.slice(-6);
+    }
 
-    // Update the author's href to be their Twitter profile, if they have no
-    // live posts on the site.
-    if (!maybeUpdateAuthorHref(author, allAuthorPosts)) {
-      // If they have no Twitter profile or posts (even draft ones), the
-      // author probably shouldn't be here.
-      invalidAuthors.push(key);
+    // Set created on date and updated date to be used for indexing to detect updates
+    if (elements.length > 0) {
+      date = elements.slice(-1).pop().data.date;
+      const tempUpdated = elements.slice(0, 1).pop().data.date;
+      if (tempUpdated && date !== tempUpdated) {
+        updated = tempUpdated;
+      }
     }
 
-    const authorsImage = path.join('/images', 'authors', `${key}@2x.jpg`);
-    author.data.hero = authorsImage;
-    author.data.alt = author.title;
+    /** @type AuthorsItem */
+    const author = {
+      ...authorData,
+      data: {
+        date,
+        hero: image,
+        updated,
+      },
+      description: `i18n.authors.${key}.description`,
+      elements,
+      href,
+      image,
+      key,
+      bio: `i18n.authors.${key}.bio`,
+      title: `i18n.authors.${key}.title`,
+      url: href,
+    };
 
-    if (process.env.PERCY) {
-      author.elements = author.elements.slice(-6);
+    // If author has no posts, point to their Twitter
+    if (author.elements.length === 0) {
+      if (author.twitter) {
+        author.href = `https://twitter.com/${author.twitter}`;
+      } else if (author.homepage) {
+        author.href = author.homepage;
+      }
     }
 
-    authors[key] = author;
+    if (
+      author.elements.length > 0 ||
+      !collections ||
+      author.twitter ||
+      author.homepage
+    ) {
+      authors[author.key] = author;
+    }
   });
 
-  // Only complain that authors are invalid if we've got any posts *at all*
-  // (we can do weird Eleventy builds with no posts, don't complain here).
-  const isRegularBuild = Boolean(allPosts.length);
-  if (isRegularBuild && invalidAuthors.length) {
-    const s = invalidAuthors.join(',');
-    throw new Error(`authors [${s}] have no posts and/or Twitter information`);
+  if (collections) {
+    processedCollection = authors;
   }
 
   return authors;
diff --git a/src/site/_collections/blog-posts-descending.js b/src/site/_collections/blog-posts-descending.js
index dff0b89bba2..7ffa2d3d880 100644
--- a/src/site/_collections/blog-posts-descending.js
+++ b/src/site/_collections/blog-posts-descending.js
@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-const {livePosts} = require('../_filters/live-posts');
+const {isLive} = require('../_filters/is-live');
 
+/**
+ * @param {EleventyCollectionObject} collection
+ * @returns {EleventyCollectionItem[]}
+ */
 module.exports = (collection) => {
-  const tag = process.env.PERCY ? 'test-post' : 'blog';
-  return collection.getFilteredByTag(tag).filter(livePosts).reverse();
+  return collection.getFilteredByTag('blog').filter(isLive).reverse();
 };
diff --git a/src/site/_collections/hooks/authors.js b/src/site/_collections/hooks/authors.js
index 275f27348ae..99ecbc57743 100644
--- a/src/site/_collections/hooks/authors.js
+++ b/src/site/_collections/hooks/authors.js
@@ -17,13 +17,13 @@
 const {feed, index, individual} = require('./utils');
 
 /**
- * @param {Author[]} authors
- * @return {Author[]}
+ * @param {AuthorsItem[]} authors
+ * @return {AuthorsItem[]}
  */
 const authorsFeed = (authors) => feed(authors);
 
 /**
- * @param {Author[]} authors
+ * @param {AuthorsItem[]} authors
  * @return {Paginated[]}
  */
 const authorsIndex = (authors) => {
@@ -41,11 +41,11 @@ const authorsIndex = (authors) => {
 };
 
 /**
- * @param {Author[]} authors
+ * @param {AuthorsItem[]} authors
  * @param {string} lang
  * @return {Paginated[]}
  */
-const authorsIndividual = (authors, lang) => individual(authors, lang);
+const authorsIndividual = (authors, lang) => individual(authors, lang, true);
 
 module.exports = {
   feed: authorsFeed,
diff --git a/src/site/_collections/hooks/recent-blog-posts.js b/src/site/_collections/hooks/recent-blog-posts.js
new file mode 100644
index 00000000000..337fd5ad100
--- /dev/null
+++ b/src/site/_collections/hooks/recent-blog-posts.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = function (data) {
+  const recent = [];
+  for (const item of data.collections.blogPosts) {
+    if (
+      (item.data.hero || item.data.thumbnail) &&
+      item.data.lang === data.lang
+    ) {
+      recent.push(item);
+      if (recent.length === 3) {
+        break;
+      }
+    }
+  }
+  return recent;
+};
diff --git a/src/site/_collections/hooks/shows.js b/src/site/_collections/hooks/shows.js
new file mode 100644
index 00000000000..b5d7a0b10bd
--- /dev/null
+++ b/src/site/_collections/hooks/shows.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {feed, index, individual} = require('./utils');
+
+/**
+ * @param {ShowsItem[]} shows
+ * @return {ShowsItem[]}
+ */
+const showsFeed = (shows) => feed(shows);
+
+/**
+ * @param {ShowsItem[]} shows
+ * @return {Paginated[]}
+ */
+const showsIndex = (shows) => {
+  const href = '/shows/';
+  const testTags = ['http-203'];
+
+  return index(shows, href, testTags);
+};
+
+/**
+ * @param {ShowsItem[]} shows
+ * @param {string} [lang]
+ * @return {Paginated[]}
+ */
+const showsIndividual = (shows, lang) => individual(shows, lang);
+
+module.exports = {
+  feed: showsFeed,
+  index: showsIndex,
+  individual: showsIndividual,
+};
diff --git a/src/site/_collections/hooks/tags.js b/src/site/_collections/hooks/tags.js
index 74b4be7ac29..c7f799a2b83 100644
--- a/src/site/_collections/hooks/tags.js
+++ b/src/site/_collections/hooks/tags.js
@@ -17,13 +17,13 @@
 const {feed, index, individual} = require('./utils');
 
 /**
- * @param {any[]} tags
- * @return {any[]}
+ * @param {TagsItem[]} tags
+ * @return {TagsItem[]}
  */
 const tagsFeed = (tags) => feed(tags);
 
 /**
- * @param {any[]} tags
+ * @param {TagsItem[]} tags
  * @return {Paginated[]}
  */
 const tagsIndex = (tags) => {
@@ -41,7 +41,7 @@ const tagsIndex = (tags) => {
 };
 
 /**
- * @param {any[]} tags
+ * @param {TagsItem[]} tags
  * @param {string} lang
  * @return {Paginated[]}
  */
diff --git a/src/site/_collections/hooks/utils.js b/src/site/_collections/hooks/utils.js
index ac265072f5b..56bb7b0f7fe 100644
--- a/src/site/_collections/hooks/utils.js
+++ b/src/site/_collections/hooks/utils.js
@@ -18,23 +18,27 @@
  * Reusable hooks for authors and tags
  */
 
+const {PAGINATION_COUNT} = require('../../_utils/constants');
 const addPagination = require('../../_utils/add-pagination');
 const filterByLang = require('../../_filters/filter-by-lang');
 
 /**
- * @param {any[]} items
- * @return {any[]}
+ * @param {VirtualCollectionItem[]} items
+ * @return {VirtualCollectionItem[]}
  */
 const feed = (items) => {
   const filteredFeed = [];
 
-  if (process.env.ELEVENTY_ENV !== 'prod') {
+  if (!['prod', 'staging'].includes(process.env.ELEVENTY_ENV)) {
     return filteredFeed;
   }
 
   for (const item of items) {
     if (item.elements.length > 0) {
-      filteredFeed.push(item);
+      filteredFeed.push({
+        ...item,
+        elements: item.elements.slice(0, PAGINATION_COUNT),
+      });
     }
   }
 
@@ -42,11 +46,10 @@ const feed = (items) => {
 };
 
 /**
- *
- * @param {any[]} items
+ * @param {VirtualCollectionItem[]} items
  * @param {string} href
  * @param {string[]} testItems
- * @return {any[]}
+ * @return {Paginated[]}
  */
 const index = (items, href, testItems) => {
   let itemsWithPosts = [];
@@ -63,17 +66,23 @@ const index = (items, href, testItems) => {
 };
 
 /**
- * @param {any[]} items
+ * @param {VirtualCollectionItem[]} items
  * @param {string} lang
+ * @param {boolean} indexedOnly
  * @return {Paginated[]}
  */
-const individual = (items, lang) => {
+const individual = (items, lang, indexedOnly = false) => {
   let paginated = [];
 
   for (const item of items) {
-    if (item.elements.length > 0) {
+    let elements = item.elements;
+    if (indexedOnly) {
+      elements = elements.filter((element) => element.data.noindex !== true);
+    }
+
+    if (elements.length > 0) {
       paginated = paginated.concat(
-        addPagination(filterByLang(item.elements, lang), item),
+        addPagination(filterByLang(elements, lang), item),
       );
     }
   }
diff --git a/src/site/_collections/newsletters.js b/src/site/_collections/newsletters.js
index 56ee843a3ef..0a61c0c964e 100644
--- a/src/site/_collections/newsletters.js
+++ b/src/site/_collections/newsletters.js
@@ -18,7 +18,7 @@
  * Returns an array of all past Newsletters.
  *
  * @param {object} collections 11ty collections object
- * @return {Array<{ data: { title: string, subhead: string, thumbnail: string, alt: string; }, date: Date, permalink: string, url: string, content: string }>}
+ * @return {Newsletters}
  */
 module.exports = (collections) => {
   return collections.getFilteredByTag('newsletter').reverse();
diff --git a/src/site/_collections/posts-with-lighthouse.js b/src/site/_collections/posts-with-lighthouse.js
deleted file mode 100644
index 4cc4ce796b5..00000000000
--- a/src/site/_collections/posts-with-lighthouse.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview
- * Return posts that reference a Lighthouse audit.
- * These posts will be displayed in the user's TODO list on the /measure page.
- */
-
-const {livePosts} = require('../_filters/live-posts');
-
-/**
- * Filter out posts that aren't related to LH audits.
- * @param {{data: Object}} post An eleventy post object.
- * @return {boolean}
- */
-function hasLighthouseAudit(post) {
-  const audits = post.data.web_lighthouse;
-  if (typeof audits === 'string' && audits !== 'N/A') {
-    return true;
-  }
-  return audits instanceof Array && audits.length !== 0;
-}
-
-/**
- * Filter all eleventy posts down to a set that are used as LH audit references.
- * @param {Object} collection An eleventy collection object
- * @return {Object[]}
- */
-function postsWithLighthouse(collection) {
-  return collection
-    .getFilteredByTag('post')
-    .filter(livePosts)
-    .filter(hasLighthouseAudit);
-}
-
-module.exports = {postsWithLighthouse, hasLighthouseAudit};
diff --git a/src/site/_collections/recent-blog-posts.js b/src/site/_collections/recent-blog-posts.js
deleted file mode 100644
index c1c359f3c29..00000000000
--- a/src/site/_collections/recent-blog-posts.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {livePosts} = require('../_filters/live-posts');
-
-// Return the three most recent blog posts.
-// Because these posts appear on the homepage they need to have a hero or
-// thumbnail image, otherwise the visual layout will not work.
-module.exports = (collection) => {
-  const tag = process.env.PERCY ? 'test-post' : 'blog';
-  return collection
-    .getFilteredByTag(tag)
-    .filter(livePosts)
-    .filter((item) => item.data.hero || item.data.thumbnail)
-    .reverse()
-    .slice(0, 3);
-};
diff --git a/src/site/_collections/shows.js b/src/site/_collections/shows.js
new file mode 100644
index 00000000000..0f434bd6100
--- /dev/null
+++ b/src/site/_collections/shows.js
@@ -0,0 +1,105 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const CacheAsset = require('@11ty/eleventy-cache-assets');
+const path = require('path');
+const {defaultLocale} = require('../../../shared/locale');
+
+/** @type ShowsData */
+const showsData = require('../_data/showsData.json');
+
+/**
+ * Returns all show playlists with their videos.
+ *
+ * @return {Promise<Shows>}
+ */
+module.exports = async () => {
+  /** @type Shows */
+  const shows = {};
+  const keys = Object.keys(showsData);
+
+  for (const key of keys) {
+    const showData = showsData[key];
+    const href = path.join('/', 'shows', key, '/');
+    const title = `i18n.shows.${key}.title`;
+    const description = `i18n.shows.${key}.description`;
+    /**
+     * Instead of calling the YouTube API here, the playlist information is handled by GoogleChromeLabs/chrome-gcs-uploader
+     * This is so:
+     * 1. We don't expose our YouTube Playlist API key
+     * 2. We don't make thousands of requests
+     * 3. The thumbnails are added to our storage bucket for imgix
+     */
+    const url = `https://storage.googleapis.com/web-dev-uploads/youtube/${showData.playlistId}.json`;
+    const elements = (
+      await CacheAsset(url, {
+        duration: '6h',
+        type: 'json',
+      }).catch(() => {
+        throw new Error(
+          `Error fetching JSON for YouTube Playlist ${showData.playlistId} (${key})`,
+        );
+      })
+    ).map((v) => {
+      v.date = new Date(v.date);
+      v.data.date = new Date(v.data.date);
+      v.url = path.join(href, v.data.videoId, '/');
+      v.data.lang = defaultLocale;
+      v.data.parent = {
+        title,
+        url: href,
+      };
+      return v;
+    });
+    if (elements.length === 0) {
+      continue;
+    }
+
+    /** @type ShowsItem */
+    const show = {
+      ...showData,
+      data: {
+        date: elements[elements.length - 1].date,
+        hero: elements[0].data.thumbnail,
+      },
+      description,
+      elements,
+      href,
+      key,
+      title,
+      url: href,
+    };
+
+    // Limit posts for percy
+    if (process.env.PERCY) {
+      show.elements = show.elements.slice(-6);
+    }
+
+    // Set created on date and updated date to be used for indexing to detect updates
+    if (show.elements.length > 0) {
+      show.data.date = show.elements.slice(-1).pop().data.date;
+      const updated = show.elements.slice(0, 1).pop().data.date;
+      if (show.data.date !== updated) {
+        show.data.updated = updated;
+      }
+    }
+
+    if (show.elements.length > 0) {
+      shows[key] = show;
+    }
+  }
+
+  return shows;
+};
diff --git a/src/site/_collections/tags.js b/src/site/_collections/tags.js
index e3aaf2af6cf..a11cf9db896 100644
--- a/src/site/_collections/tags.js
+++ b/src/site/_collections/tags.js
@@ -13,44 +13,128 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const tagsData = require('../_data/tagsData');
-const {livePosts} = require('../_filters/live-posts');
+const YAML = require('js-yaml');
+const fs = require('fs');
+const path = require('path');
+
+/** @type TagsData */
+const tagsData = require('../_data/tagsData.json');
+// The i18n for this file exposes top-level object keys of valid tags.
+// We use this only to fetch valid tags from the object's keys.
+const supportedTags = /** @type {{[tag: string]: unknown}} */ (
+  YAML.load(
+    fs.readFileSync(path.join(__dirname, '../_data/i18n/tags.yml'), 'utf-8'),
+  )
+);
+
+const {isLive} = require('../_filters/is-live');
+const {sortByUpdated} = require('../_utils/sort-by-updated');
+
+/** @type Tags */
+let processedCollection;
+
+/**
+ *
+ * @param {string} key
+ * @returns {TagsItem}
+ */
+function createChromeTag(key) {
+  const release = +key.substr('chrome-'.length);
+  const tag = {
+    ...createTag(key),
+    description: `i18n.tags.chrome.description`,
+    /**
+     * For Chrome releases, use a literal string title (don't translate "Chrome xx").
+     */
+    overrideTitle: key.replace('chrome-', 'Chrome '),
+    title: `i18n.tags.chrome.title`,
+    /**
+     * This is the numeric Chrome release for this tag.
+     */
+    release,
+  };
+  return tag;
+}
 
 /**
- * Returns all tags with posts.
  *
- * @param {any} [collections] Eleventy collection object
- * @return {Array<{ title: string, key: string, description: string, href: string, url: string, data: { title: string, subhead: string }, elements: Array<object> }>} An array where each element is a paged tag with some meta data and n posts for the page.
+ * @param {string} key
+ * @param {TagsDataItem} tagData
+ * @returns {TagsItem}
+ */
+function createTag(key, tagData = {}) {
+  const href = `/tags/${key}/`;
+  const image = tagData.image;
+
+  /** @type TagsItem */
+  const tag = {
+    ...tagData,
+    data: {
+      hero: image,
+      tags: [key],
+    },
+    description: `i18n.tags.${key}.description`,
+    elements: [],
+    href,
+    key,
+    title: `i18n.tags.${key}.title`,
+    url: href,
+  };
+
+  return tag;
+}
+
+/**
+ * Returns all tags with their posts.
+ *
+ * @param {EleventyCollectionObject} [collections] Eleventy collection object
+ * @return {Tags}
  */
 module.exports = (collections) => {
-  const tags = {};
-
-  Object.keys(tagsData).forEach((key) => {
-    const tag = {...tagsData[key]};
-
-    tag.key = key;
-    tag.href = `/tags/${key}/`;
-    tag.description = tag.description
-      ? tag.description
-      : `Our latest news, updates, and stories about ${tag.title.toLowerCase()}.`;
-    tag.data = {
-      title: tag.title,
-      subhead: tag.description,
-      canonicalUrl: tag.href,
-    };
-    tag.elements = [];
-
-    if (collections) {
-      tag.elements = collections
-        .getFilteredByTag(tag.key)
-        .filter(livePosts)
-        .sort((a, b) => b.date - a.date);
-    }
+  if (processedCollection) {
+    return processedCollection;
+  }
+
+  /** @type Tags */
+  const tags = Object.fromEntries(
+    Object.keys(supportedTags).map((tag) => [
+      tag,
+      createTag(tag, tagsData[tag]),
+    ]),
+  );
 
-    if (tag.elements.length > 0 || !collections) {
-      tags[tag.key] = tag;
+  const posts = collections
+    .getFilteredByGlob('**/*.md')
+    .filter((item) => isLive(item) && !item.data.excludeFromTags)
+    .sort(sortByUpdated);
+
+  for (const post of posts) {
+    post.data.tags = [post.data.tags ?? []].flat();
+    if (post.data.tags.length) {
+      // Handle Chrome Tags
+      const chromeTags = post.data.tags.filter((tag) =>
+        tag.startsWith('chrome-'),
+      );
+
+      for (const chromeTag of chromeTags) {
+        if (!tags[chromeTag]) {
+          tags[chromeTag] = createChromeTag(chromeTag);
+        }
+        tags[chromeTag].elements.push(post);
+      }
+
+      // Handle All Other Tags
+      for (const postsTag of post.data.tags) {
+        if (postsTag in supportedTags) {
+          tags[postsTag].elements.push(post);
+        }
+      }
     }
-  });
+  }
+
+  if (collections) {
+    processedCollection = tags;
+  }
 
   return tags;
 };
diff --git a/src/site/_data/authorsData.json b/src/site/_data/authorsData.json
index 62809e138ad..89e31ffff34 100644
--- a/src/site/_data/authorsData.json
+++ b/src/site/_data/authorsData.json
@@ -1,1451 +1,1858 @@
 {
+  "danristic": {
+    "homepage": "http://www.danristic.com/",
+    "twitter": "dristic101",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/b6v4qq26t6NWHAIm0SbV.png"
+  },
+  "gman": {
+    "homepage": "http://games.greggman.com/game/",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/1BBm3UlHXE5rTYgdFr7e.png"
+  },
+  "dominiccooney": {
+    "homepage": "http://dcooney.com/",
+    "twitter": "coonsta",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/LZY3l6Yk6Nfj2whuB15r.png"
+  },
+  "zgoddard": {
+    "homepage": "http://gradientstudios.com/",
+    "twitter": "ZofGames",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/eYqcqTbc2Lgfn9013boG.png"
+  },
+  "tomwiltzius": {
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/pfj6ogyKu63pn6IOoJEA.png"
+  },
+  "coltmcanlis": {
+    "homepage": "http://mainroach.blogspot.com/",
+    "twitter": "duhroach",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/YT88zCOqYHewnehPUatW.png"
+  },
+  "adamzielinski": {
+    "twitter": "adamzielin",
+    "github": "adamziel",
+    "homepage": "https://adamadam.blog/",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/qNsFHO1nZ3FxmYd3PwWL.webp"
+  },
+  "marcinwichary": {
+    "homepage": "http://www.aresluna.org/",
+    "twitter": "mwichary",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/xUepvN9NAbPTBl8gZNkS.png"
+  },
+  "razvancaliman": {
+    "homepage": "http://razvancaliman.com/",
+    "twitter": "razvancaliman",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/7dpZJ4nTkOOGSpZdJqeR.png"
+  },
+  "christiancantrell": {
+    "homepage": "http://www.livingdigitally.net/",
+    "twitter": "cantrell",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/YguFULnqX68vwQFm3kXi.png"
+  },
+  "jameswilliams": {
+    "homepage": "http://jameswilliams.be/",
+    "twitter": "ecspike",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/XAcwYmIIXpwKmGY5oUsy.png"
+  },
+  "joemarini": {
+    "twitter": "joemarini",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/HWikKThV8CDipPIInN3c.png"
+  },
+  "loreenalee": {
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/CvudF1XU7va8GySmmbqU.png"
+  },
+  "malteubl": {
+    "homepage": "http://nonblocking.io/",
+    "twitter": "cramforce",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/bealJ5BxlwRxOGhya1PK.png"
+  },
+  "raymondcamden": {
+    "homepage": "http://www.raymondcamden.com/",
+    "twitter": "cfjedimaster",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/1AfrcGQyX3BBB6hK6VGM.png"
+  },
+  "brianford": {
+    "homepage": "http://briantford.com/",
+    "twitter": "briantford",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/L4fwOAEyX6GidNzg9kOo.png"
+  },
+  "tjvantoll": {
+    "homepage": "http://tjvantoll.com/",
+    "twitter": "tjvantoll",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/OVtLm4LBwpG4NHlgIOvh.png"
+  },
+  "bradfrost": {
+    "homepage": "http://http//bradfrostweb.com/",
+    "twitter": "brad_frost",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ng7L8xiEtfwItM990PhT.png"
+  },
+  "lillithompson": {
+    "twitter": "lillithompson",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/WiYHLt4y5HHcWvKPN017.png"
+  },
+  "saqoosha": {
+    "homepage": "http://saqoo.sh/a",
+    "twitter": "Saqoosha",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/kZHW6d3oVitJH5CRRbFT.png"
+  },
+  "adriangould": {
+    "homepage": "http://pagodagames.com/",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/0JlbM6fxB53uDHeSAs1U.png"
+  },
+  "adammark": {
+    "homepage": "http://www.adammark.net/",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/QXPmWhi88BVfaVcS72d4.png"
+  },
+  "gskinnerdotcom": {
+    "homepage": "http://gskinner.com/",
+    "twitter": "gskinner",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZtebgoAmedmaAWsHNMgS.png"
+  },
+  "seanmiddleditch": {
+    "homepage": "http://sonargame.com/",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/IVLI2l2RjFbHDB9MJOg3.png"
+  },
+  "justingitlin": {
+    "homepage": "http://legworkstudio.com/",
+    "twitter": "legwork",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/ARaEfdMejcNWtPLqyf3O.png"
+  },
+  "activetheory": {
+    "homepage": "http://activetheory.net/",
+    "twitter": "active_theory",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/gNL5Xc8KIWX7RlLfccdz.png"
+  },
+  "luigimontanez": {
+    "homepage": "http://sunlightlabs.com/",
+    "twitter": "LuigiMontanez",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/glvD0KI05d9PTHfzRWRw.png"
+  },
+  "michaeldewey": {
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/HHHUxL7iukuBbyuVMnqR.png"
+  },
+  "oskareriksson": {
+    "homepage": "http://www.dinahmoe.com/",
+    "twitter": "_oskareriksson",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/1d8l0y8VlzSZJslyjG61.png"
+  },
+  "fredchasen": {
+    "homepage": "http://www.fchasen.com/",
+    "twitter": "fredjc",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZIZgvlAA5NnDA5EQexpB.png"
+  },
+  "plan8": {
+    "homepage": "http://plan8.se/",
+    "twitter": "Plan8_Music",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZIZgvlAA5NnDA5EQexpB.png"
+  },
+  "unit9com": {
+    "homepage": "http://unit9.com/",
+    "twitter": "unit9",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/cyO3s1wDVx9DcPfFLTfT.png"
+  },
+  "geoffblair": {
+    "homepage": "http://www.lostdecadegames.com/",
+    "twitter": "geoffblair",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/gSUNYY4W3dJE9tYlp4ZG.png"
+  },
+  "matthackett": {
+    "homepage": "http://www.lostdecadegames.com/",
+    "twitter": "richtaur",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/UH9IVsVygWpMOqtPsVrQ.png"
+  },
+  "christophergammon": {
+    "homepage": "http://www.cjgammon.com/",
+    "twitter": "cjgammon",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/tRs6b787z7gcczj3sZt8.png"
+  },
+  "ericrk": {
+    "homepage": "http://allthecodes.tumblr.com/",
+    "twitter": "ericrkarlSF",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/9iO5gZZ7T89hpyTaKn0x.png"
+  },
+  "thomasreynolds": {
+    "homepage": "http://awardwinningfjords.com/",
+    "twitter": "tdreyno",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/9a6bZAoux8hlKtPGQdG5.png"
+  },
+  "einaroberg": {
+    "homepage": "http://www.northkingdom.com/",
+    "twitter": "inear",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/A5LlokBwOGhxuOd2g0g0.png"
+  },
+  "danielisaksson": {
+    "homepage": "http://www.northkingdom.com/",
+    "twitter": "northkingdom",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/rOydjtEeVxCf2G0gLuKA.png"
+  },
+  "michaelchang": {
+    "homepage": "http://ghost-hack.com/",
+    "twitter": "mflux",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZgEOjGWE13Mq77PmQuy2.png"
+  },
+  "hakimelhattab": {
+    "homepage": "http://hakim.se/experiments",
+    "twitter": "hakimel",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/cNfAWdx2YLptERfhfevM.png"
+  },
+  "hanseklund": {
+    "homepage": "http://www.northkingdom.com/",
+    "twitter": "boolhaze",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/E6s2qr8J7nxIfGwuGHVk.png"
+  },
+  "derekdetweiler": {
+    "homepage": "http://gopherwoodstudios.com/",
+    "twitter": "gopherwood",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/7vUD1Qw3zif8kJidsFXr.png"
+  },
+  "johnmccutchan": {
+    "homepage": "http://www.johnmccutchan.com/",
+    "twitter": "johnmccutchan",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/hYFvb82T2jrdglYrC0o9.png"
+  },
+  "wesleyhales": {
+    "homepage": "http://wesleyhales.com/",
+    "twitter": "wesleyhales",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/Gfvo39bDqZMSOQmQ9WRc.png"
+  },
+  "mahemoff": {
+    "homepage": "http://mahemoff.com/",
+    "twitter": "mahemoff",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/8qXOF2DbhYTGnJG5qHXh.png"
+  },
+  "taligarsiel": {
+    "homepage": "http://taligarsiel.com/",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/V3imNwHh9VNaDmFpXRnC.png"
+  },
+  "paulirish": {
+    "homepage": "https://www.paulirish.com/",
+    "twitter": "paul_irish",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/pkfFfQq25tFjXgFQw1rF.png"
+  },
+  "mdeal": {
+    "homepage": "https://galactic.ink/",
+    "twitter": "mudcube",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/OAJG3V813un1iXuy451G.png"
+  },
+  "smus": {
+    "homepage": "https://smus.com/",
+    "twitter": "borismus",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/qjz6fGVI9DfXFbR2n4KC.png"
+  },
+  "danielmoore": {
+    "homepage": "https://blog.danielx.net/",
+    "twitter": "STRd6",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/oHvCdFmgZrWSnqFWK2Qz.png"
+  },
+  "davidtong": {
+    "homepage": "http://ww25.davidtong.me/?subid1=20220505-1958-5384-b7d2-32bce5bbc6f8",
+    "twitter": "davidalism",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/oateRfgAPbjgAOQYLcCZ.png"
+  },
+  "jeremychone": {
+    "homepage": "https://britesnow.com",
+    "twitter": "jeremychone",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/bnjbSoWQdzP3AEYOyZnW.png"
+  },
+  "ernestd": {
+    "twitter": "edr",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/CoDoVg4PZ64aeUGLbr9i.png"
+  },
+  "chriswilson": {
+    "homepage": "https://cwilso.com/",
+    "twitter": "cwilso",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/RudCxfjPZlFSFeFRaYuG.png"
+  },
+  "sethladd": {
+    "homepage": "https://sethladd.com/",
+    "twitter": "sethladd",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/G0iRvLgivtwPq5cEdk8g.jpeg"
+  },
+  "mustafa": {
+    "homepage": "http://www.designtoday.info/",
+    "twitter": "mustafa_x",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/zL9KZGMmN6NIfAxwSMfx.jpeg"
+  },
+  "mco": {
+    "homepage": "https://about.me/marc1",
+    "twitter": "marcacohen",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/4VNx2OZc6ngQf50LNQz0.jpeg"
+  },
+  "iamakulov": {
+    "homepage": "https://iamakulov.com/",
+    "github": "iamakulov",
+    "twitter": "iamakulov",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/wGLbfEs3xyBlmA4lqviX.jpg"
+  },
+  "pbakaus": {
+    "homepage": "https://paulbakaus.com/",
+    "twitter": "pbakaus",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/dmZ5xayLJVUioaNSvtmB.jpeg"
+  },
+  "paulkinlan": {
+    "homepage": "https://paul.kinlan.me/",
+    "twitter": "paul_kinlan",
+    "github": "PaulKinlan",
+    "glitch": "PaulKinlan",
+    "dcc": "paulkinlan",
+    "mastodon": "https://status.kinlan.me/@paul",
+    "linkedin": "https://uk.linkedin.com/in/paulkinlan",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/0O1ZGr2P0l9oTKabyUK5.jpeg"
+  },
+  "dalecurtis": {
+    "github": "https://github.com/dalecurtis",
+    "twitter": "dalecurtis",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/htLpTCWkW3Z6kcuo1Hef.jpeg"
+  },
+  "mscales": {
+    "twitter": "wibblymat",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/z8HZkmZsSLmcKCj0c89W.jpeg"
+  },
+  "ewagasperowicz": {
+    "twitter": "devnook",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/K5zWxdTH5JagItd1w8Vm.jpeg"
+  },
+  "alispivak": {
+    "twitter": "alispivak",
+    "image": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/epjaUBZaBUz4esC6C7n5.png"
+  },
+  "alexdanilo": {
+    "twitter": "alexanderdanilo",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/3EIOmsgE36khub8NbZgE.jpeg"
+  },
+  "taylorsavage": {
+    "twitter": "taylorthesavage",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/rGy547i80kDDHCjlAOdD.jpeg"
+  },
+  "umarhansa": {
+    "country": "UK",
+    "homepage": "https://umaar.com",
+    "twitter": "umaar",
+    "github": "umaar",
+    "image": "image/eHjLPdOn1XcKYDm76GytojNeEkZ2/C0zDh9w4i3wZ8oOunJvR.jpg"
+  },
+  "ilmariheikkinen": {
+    "homepage": "http://fhtr.org/",
+    "twitter": "ilmarihei",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/7cfol9s4qh9MOWWhNosR.jpeg"
+  },
+  "mikewest": {
+    "homepage": "https://mikewest.org/",
+    "twitter": "mikewest",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/lXPOi8zfvtTDXy2kSHVh.jpeg"
+  },
+  "samthorogood": {
+    "homepage": "https://whistlr.info/",
+    "twitter": "samthor",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/lnlpPLdWVs9KlivW4K8A.jpeg"
+  },
+  "aliceboxhall": {
+    "twitter": "sundress",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/X7V1IaSbxjs1E7w8BBrH.jpeg"
+  },
+  "eligrey": {
+    "homepage": "https://eligrey.com/",
+    "twitter": "sephr",
+    "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/KCVBACTJTdRvr20r751u.jpeg"
+  },
   "jakearchibald": {
-    "name": {
-      "given": "Jake",
-      "family": "Archibald"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "UK",
     "homepage": "https://jakearchibald.com/",
     "twitter": "jaffathecake",
-    "description": {
-      "en": "Human boy working on web standards at Google"
-    }
+    "image": "image/admin/Cprm03kLbFXkxbzGLI6x.jpg"
+  },
+  "aaronkrajeski": {
+    "country": "Canada",
+    "homepage": "http://aaronk.is//",
+    "twitter": "_mysteryDate",
+    "github": "mysteryDate",
+    "image": "image/admin/1v5F1SOBl46ZghbHQMle.svg"
+  },
+  "felixarntz": {
+    "country": "US",
+    "homepage": "https://felix-arntz.me",
+    "twitter": "felixarntz",
+    "image": "image/admin/rAUzMzFAA67M36n66uVT.jpg"
+  },
+  "amandabaker": {
+    "github": "amandabaker",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/nr8opTnZn8ZFfrXzfGkV.png"
   },
   "kaycebasques": {
-    "name": {
-      "given": "Kayce",
-      "family": "Basques"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
+    "homepage": "https://kayce.basqu.es/",
     "twitter": "kaycebasques",
     "github": "kaycebasques",
     "glitch": "kaycebasques",
-    "description": {
-      "en": "Technical Writer, Chrome DevTools & Lighthouse"
-    }
+    "image": "image/admin/7GdPR4YDRHSS6llepBOd.jpg"
+  },
+  "johyphenel": {
+    "twitter": "johyphenel",
+    "image": "image/admin/Qfxylpir4hHF23rUgEQP.jpg"
   },
   "sgomes": {
-    "name": {
-      "given": "Sérgio",
-      "family": "Gomes"
-    },
-    "twitter": "sergiomdgomes"
+    "twitter": "sergiomdgomes",
+    "image": "image/admin/qexUlvBmj0edRQSlsdGL.jpg"
   },
   "beaufortfrancois": {
-    "name": {
-      "given": "François",
-      "family": "Beaufort"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "FR",
     "github": "beaufortfrancois",
-    "description": {
-      "en": "Dives into Chromium source code"
-    }
+    "image": "image/admin/mXjY3z3JmrispGtu9yn6.jpg"
+  },
+  "cwallez": {
+    "country": "FR",
+    "twitter": "DaKangz",
+    "github": "Kangz",
+    "image": "image/vvhSqZboQoZZN9wBvoXq72wzGAf1/mYkUaoNpythq50oIFiQh.jpeg"
   },
   "mathiasbynens": {
-    "name": {
-      "given": "Mathias",
-      "family": "Bynens"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "V8"
-    },
     "country": "DE",
     "homepage": "https://mathiasbynens.be/",
     "twitter": "mathias",
     "github": "mathiasbynens",
-    "description": {
-      "en": "V8 JavaScript whisperer"
-    }
+    "image": "image/admin/BTQ1idSEo72TlNRJKmLf.jpg"
   },
   "hongchanchoi": {
-    "name": {
-      "given": "Hongchan",
-      "family": "Choi"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "twitter": "hochsays",
     "github": "hoch",
     "homepage": "https://hoch.io/",
-    "description": {
-      "en": "Software Engineer working on Chromium"
-    }
+    "image": "image/admin/YbudG6EUF3JjB7u1iLey.jpg"
   },
   "robdodson": {
-    "name": {
-      "given": "Rob",
-      "family": "Dodson"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
     "homepage": "https://robdodson.me",
     "twitter": "rob_dodson",
     "github": "robdodson",
-    "glitch": "robdodson"
+    "glitch": "robdodson",
+    "image": "image/admin/1Yk1TThRpbQr08rC9tmL.jpg"
   },
   "samdutton": {
-    "name": {
-      "given": "Sam",
-      "family": "Dutton"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "UK",
     "twitter": "sw12",
     "github": "samdutton",
-    "description": {
-      "en": "Sam is a Developer Advocate"
-    }
+    "image": "image/admin/wPss4TJX9IJ1CJza7iFY.jpg"
   },
   "arthurevans": {
-    "name": {
-      "given": "Arthur",
-      "family": "Evans"
-    },
     "twitter": "devdocdude",
     "github": "arthurevans",
-    "description": {
-      "en": "Arthur is a Tech Writer"
-    }
+    "image": "image/admin/e0IbHjXAuzFNqSnnZMcp.jpg"
   },
   "exterkamp": {
-    "name": {
-      "given": "Shane",
-      "family": "Exterkamp"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "country": "US",
     "twitter": "shane_exterkamp",
     "github": "exterkamp",
-    "description": {
-      "en": "Shane is a SWE on Lighthouse"
-    }
+    "image": "image/admin/yPytekIqH5VnoqMx3jj2.jpg"
   },
   "sfourault": {
-    "name": {
-      "given": "Sébastien",
-      "family": "Fourault"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Mobile Solutions Consultant"
-    },
     "twitter": "SebFourault",
     "github": "krustydaclown",
     "homepage": "https://medium.com/@sebFourault",
-    "country": "FR"
+    "country": "FR",
+    "image": "image/admin/zZ07PO3CHP6zwPpnDI03.jpg"
   },
   "tomgreenaway": {
-    "name": {
-      "given": "Tom",
-      "family": "Greenaway"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "AU",
     "github": "tcmg",
     "twitter": "tcmg",
-    "description": {
-      "en": "Tom is the Games Lead for the Chrome & Web Developer Relations team at Google"
-    }
+    "image": "image/admin/A1EASC3dUKSf0lHijPyh.jpg"
   },
   "ilyagrigorik": {
-    "name": {
-      "given": "Ilya",
-      "family": "Grigorik"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "twitter": "igrigorik",
-    "github": "igrigorik"
+    "github": "igrigorik",
+    "image": "image/admin/ZkKPT8vEyGOWvy60ML7R.jpg"
   },
   "yigu": {
-    "name": {
-      "given": "Yi",
-      "family": "Gu"
-    },
     "twitter": "yigsgu",
     "github": "yi-gu",
-    "description": {
-      "en": "Software Engineer working on Chromium"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
-    "country": "Canada"
+    "country": "Canada",
+    "image": "image/admin/1jsaXAFfmWcyGObF0MF3.jpg"
   },
   "alsan": {
-    "name": {
-      "given": "Kaan",
-      "family": "Alsan"
-    },
-    "description": {
-      "en": "Former Software Engineer Intern working on Chromium"
-    },
-    "org": {
-      "name": "University of Waterloo"
-    }
+    "image": "image/admin/4PTUuazRuGaWSV1LbAOz.jpg"
   },
   "katiehempenius": {
-    "name": {
-      "given": "Katie",
-      "family": "Hempenius"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "USA",
     "homepage": "https://katiehempenius.com/",
     "twitter": "katiehempenius",
     "github": "khempenius",
-    "glitch": "khempenius"
+    "glitch": "khempenius",
+    "image": "image/admin/fZo7BJGec2MNRt6cWpeh.jpg"
   },
   "mihajlija": {
-    "name": {
-      "given": "Milica",
-      "family": "Mihajlija"
-    },
     "homepage": "https://mihajlija.github.io/",
     "twitter": "bibydigital",
-    "github": "mihajlija"
+    "github": "mihajlija",
+    "image": "image/admin/WkMOiDtaDgiAA2YkRZ5H.jpg"
   },
   "mustafakurtuldu": {
-    "name": {
-      "given": "Mustafa",
-      "family": "Kurtuldu"
-    },
     "homepage": "https://www.designtoday.info/",
     "twitter": "mustafa_x",
-    "github": "mustafa-x"
+    "github": "mustafa-x",
+    "image": "image/admin/0MyqDvMQmaxVodxo5kr9.jpg"
   },
   "agektmr": {
-    "name": {
-      "given": "Eiji",
-      "family": "Kitamura"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "JP",
     "homepage": "https://blog.agektmr.com",
     "twitter": "agektmr",
     "github": "agektmr",
-    "description": {
-      "en": "Developer Advocate in Tokyo"
-    }
+    "image": "image/admin/Mh9DRmQhjlroJM9JDqsu.jpg"
   },
   "kosamari": {
-    "name": {
-      "given": "Mariko",
-      "family": "Kosaka"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
     "homepage": "https://kosamari.com/",
     "twitter": "kosamari",
     "github": "kosamari",
     "glitch": "kosamari",
-    "description": {
-      "en": "Mariko is a drawsplainer"
-    }
+    "image": "image/admin/TaVHIb4KixCUF6XheH7z.jpg"
   },
   "petelepage": {
-    "name": {
-      "given": "Pete",
-      "family": "LePage"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
     "homepage": "https://petelepage.com",
     "twitter": "petele",
     "github": "petele",
     "glitch": "petele",
-    "description": {
-      "en": "Developer Advocate on the web team at Google, taking the sharp edges off new stuff & helping make the web better for developers! (he/him)"
-    }
+    "image": "image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/3rFbsLsMMk1VveHfBRSu.jpg"
   },
   "pjmclachlan": {
-    "name": {
-      "given": "PJ",
-      "family": "Mclachlan"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "country": "CA",
     "twitter": "b1tr0t",
-    "description": {
-      "en": "PJ is a Product Manager on the Chrome Web Platform team responsible for Chrome permissions, notifications, and progressive web apps."
-    }
+    "github": "b1tr0t",
+    "image": "image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/moQSH93u2pALgA65WrsK.jpg"
   },
   "developit": {
-    "name": {
-      "given": "Jason",
-      "family": "Miller"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
     "homepage": "https://jasonformat.com",
     "twitter": "_developit",
     "github": "developit",
-    "description": {
-      "en": "Jason is a Web DevRel focused on speed and the JS ecosystem."
-    }
+    "image": "image/admin/bPCYfhUgxdCpXhKAWc9X.jpg"
   },
   "addyosmani": {
-    "name": {
-      "given": "Addy",
-      "family": "Osmani"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "country": "USA",
     "twitter": "addyosmani",
     "github": "addyosmani",
-    "description": {
-      "en": "Eng Manager working on Chrome and Web Platform"
-    }
+    "image": "image/1L2RBhCLSnXjCnSlevaDjy3vba73/LJyNTOzyWbowv2mrlzPS.jpeg"
   },
   "jeffposnick": {
-    "name": {
-      "given": "Jeff",
-      "family": "Posnick"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
-    "country": "US",
-    "homepage": "https://twitter.com/jeffposnick",
+    "country": "US",
+    "homepage": "https://jeffy.info/",
     "twitter": "jeffposnick",
     "github": "jeffposnick",
     "glitch": "jeffposnick",
-    "description": {
-      "en": "Web DevRel @ Google"
-    }
+    "image": "image/FNkVSAX8UDTTQWQkKftSgGe9clO2/aNrmVViMdqMvdXZn0NHA.jpg"
+  },
+  "pozdnyakov": {
+    "image": "image/admin/l2RwV8N49BBwJax77Op4.jpg"
   },
   "demianrenzulli": {
-    "name": {
-      "given": "Demian",
-      "family": "Renzulli"
-    },
     "twitter": "drenzulli",
     "github": "demianrenzulli",
-    "glitch": "demianrenzulli"
+    "glitch": "demianrenzulli",
+    "image": "image/admin/EuTrT82fyivFn16L0vD9.jpg"
+  },
+  "alexshalamov": {
+    "image": "image/admin/1v5F1SOBl46ZghbHQMle.svg"
   },
   "rsolomakhin": {
-    "name": {
-      "given": "Rouslan",
-      "family": "Solomakhin"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "country": "USA",
-    "twitter": "rsolomakhin"
+    "twitter": "rsolomakhin",
+    "image": "image/admin/ShZR6Eo34U1LJkBEIgk7.jpg"
   },
   "thomassteiner": {
-    "name": {
-      "given": "Thomas",
-      "family": "Steiner"
-    },
     "homepage": "https://blog.tomayac.com/",
     "twitter": "tomayac",
     "github": "tomayac",
     "glitch": "tomayac",
-    "description": {
-      "en": "Tom is a Developer Advocate"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
-    "country": "DE"
+    "country": "DE",
+    "image": "image/admin/8PLpVmFef6mj72MVWeiN.jpg"
+  },
+  "pliao": {
+    "country": "US",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/2FRO4kPII2vh8tfjLtsw.jpg"
+  },
+  "conwayt": {
+    "country": "UK",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/JcsexdcJ6OkCV9UUYW7X.jpg"
+  },
+  "chuijun": {
+    "country": "CN",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/JISOQ86K4Eo8akasdS5S.png"
   },
   "surma": {
-    "name": {
-      "given": "Surma",
-      "family": ""
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "UK",
-    "twitter": "DasSurma"
+    "twitter": "DasSurma",
+    "image": "image/admin/MPQ3Co9Ej7Uka4cgPePh.jpg"
   },
   "samthor": {
-    "name": {
-      "given": "Sam",
-      "family": "Thorogood"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "AU",
     "homepage": "https://whistlr.info/",
     "twitter": "samthor",
     "github": "samthor",
     "glitch": "samthor",
-    "description": {
-      "en": "¯‍\\‍_‍(‍ツ‍)‍_‍/‍¯"
-    }
+    "image": "image/admin/XQIDJD6narW2eA4d141g.jpg"
+  },
+  "stephenstchur": {
+    "country": "US",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/117HjdRQMScu0EouANUl.jpg"
   },
   "rachelandrew": {
-    "name": {
-      "given": "Rachel",
-      "family": "Andrew"
-    },
-    "country": "GB",
+    "country": "UK",
     "homepage": "https://rachelandrew.co.uk/",
     "twitter": "rachelandrew",
     "github": "rachelandrew",
-    "glitch": "rachelandrew"
+    "glitch": "rachelandrew",
+    "image": "image/admin/dUAN2DEXHRT6G6iPrIby.jpg"
   },
   "rviscomi": {
-    "name": {
-      "given": "Rick",
-      "family": "Viscomi"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "USA",
+    "homepage": "https://rviscomi.dev/",
     "twitter": "rick_viscomi",
     "github": "rviscomi",
-    "glitch": "rviscomi"
+    "image": "image/admin/oWRqaR6XXwIdNXPLpUMn.jpg"
   },
   "philipwalton": {
-    "name": {
-      "given": "Philip",
-      "family": "Walton"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "USA",
     "homepage": "https://philipwalton.com",
     "twitter": "philwalton",
     "github": "philipwalton",
-    "description": {
-      "en": "Engineer at Google working on the Web Platform"
-    }
+    "image": "image/admin/ovBM8MF9rYDxVVHUVlcG.jpg"
+  },
+  "tunetheweb": {
+    "country": "Ireland",
+    "homepage": "https://www.tunetheweb.com",
+    "twitter": "tunetheweb",
+    "github": "tunetheweb",
+    "image": "image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/FzCdsVVLfgdqxfgs6BDc.jpeg"
   },
   "ekharvey": {
-    "name": {
-      "given": "Lizzi",
-      "family": "Harvey"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "twitter": "HarveyLizzi",
     "github": "ekharvey",
     "glitch": "ekharvey",
-    "description": {
-      "en": "Lizzi is a Tech Writer at Google"
-    }
+    "image": "image/admin/qAnatGOMJMeJhHbHwbWp.jpg"
   },
   "houssein": {
-    "name": {
-      "given": "Houssein",
-      "family": "Djirdeh"
-    },
     "homepage": "https://houssein.me/",
     "twitter": "hdjirdeh",
     "github": "housseindjirdeh",
-    "glitch": "housseindjirdeh"
+    "glitch": "housseindjirdeh",
+    "image": "image/admin/BibySYHD7JweNcHZCCOe.jpg",
+    "country": "US"
   },
   "megginkearney": {
-    "name": {
-      "given": "Meggin",
-      "family": "Kearney"
-    },
     "twitter": "megginkearney",
-    "description": {
-      "en": "Meggin is a Tech Writer"
-    }
+    "image": "image/admin/1sJM27b1jwZmcKa6yJEf.jpg"
   },
   "dgash": {
-    "name": {
-      "given": "Dave",
-      "family": "Gash"
-    },
-    "description": {
-      "en": "Dave is a Tech Writer"
-    }
+    "image": "image/admin/SVZgPh6bWnji4cQyL38l.jpg"
   },
   "mdiblasio": {
-    "name": {
-      "given": "Michael",
-      "family": "DiBlasio"
-    },
     "github": "mdiblasio",
-    "glitch": "mdiblasio"
-  },
-  "jeremywagner": {
-    "name": {
-      "given": "Jeremy",
-      "family": "Wagner"
-    },
-    "github": "malchata",
-    "twitter": "malchata"
+    "glitch": "mdiblasio",
+    "image": "image/admin/CO9R6GSKlH794WHxbpQD.jpg"
   },
   "gmimani": {
-    "name": {
-      "given": "Garima",
-      "family": "Mimani"
-    },
     "github": "garimamimani",
-    "glitch": "garimamimani"
+    "glitch": "garimamimani",
+    "image": "image/admin/obrDCmQVA55Oc4bBX5ek.jpg"
   },
   "martinsplitt": {
-    "name": {
-      "given": "Martin",
-      "family": "Splitt"
-    },
     "github": "AVGP",
     "twitter": "g33konaut",
-    "glitch": "AVGP"
+    "glitch": "AVGP",
+    "image": "image/admin/HoAwoSaHr3yneJoSxKYc.jpg"
   },
   "uskay": {
-    "name": {
-      "given": "Yusuke",
-      "family": "Utsunomiya"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Mobile Solutions Consultant"
-    },
     "country": "JP",
     "homepage": "https://blog.uskay.io/",
     "twitter": "uskay",
-    "description": {
-      "en": "Tech consultant for Web, Chrome & AMP"
-    }
+    "image": "image/admin/ztcrpMPYTd84oPTN4GdY.jpg"
   },
   "jormears": {
-    "name": {
-      "given": "Jordon",
-      "family": "Mears‎"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Earth"
-    },
     "country": "USA",
     "homepage": "https://www.finefrog.com/",
-    "description": {
-      "en": "Jordon is a Tech Lead Manager working on Google Earth."
-    }
+    "image": "image/admin/NjW9TEPrICgYcmSWgliA.jpg"
   },
   "martinschierle": {
-    "name": {
-      "given": "Martin",
-      "family": "Schierle"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Technical Solutions"
-    },
     "country": "DE",
     "twitter": "martinschierle",
-    "github": "martinschierle"
+    "github": "martinschierle",
+    "image": "image/admin/DheRfImH6FxRNajMslIk.jpg"
   },
   "joemedley": {
-    "name": {
-      "given": "Joe",
-      "family": "Medley"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "US",
     "github": "jpmedley",
     "twitter": "medleyjp",
-    "description": {
-      "en": "If an API's not documented it doesn't exist"
-    }
+    "image": "image/admin/ynJFmvKEbD9diZZsTdkD.jpg"
   },
   "egsweeny": {
-    "name": {
-      "given": "Elizabeth",
-      "family": "Sweeny"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Product Manager"
-    },
     "country": "US",
     "github": "egsweeny",
     "twitter": "egsweeny",
-    "description": {
-      "en": "Product manager for developer tools on the web platform in Chrome."
-    }
+    "image": "image/admin/IyB0bE6NGAvhRJkD6wRz.jpg"
   },
   "rowan_m": {
-    "name": {
-      "given": "Rowan",
-      "family": "Merewood"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
-    "description": {
-      "en": "Developer Advocate for Chrome and web"
-    },
     "country": "UK",
     "twitter": "rowan_m",
     "github": "rowan-m",
-    "glitch": "rowan-m"
+    "glitch": "rowan-m",
+    "image": "image/admin/TASwqsVceW68MrM7bjt8.jpg"
   },
   "adamargyle": {
-    "name": {
-      "given": "Adam",
-      "family": "Argyle"
-    },
-    "description": {
-      "en": "Developer Advocate for Chrome"
-    },
     "homepage": "https://nerdy.dev",
     "github": "argyleink",
     "twitter": "argyleink",
-    "glitch": "argyleink"
+    "glitch": "argyleink",
+    "image": "image/admin/jdQIxAJrGuFOtwmuDfIn.jpg"
+  },
+  "emmatwersky": {
+    "homepage": "https://twerske.dev",
+    "github": "twerske",
+    "twitter": "twerske",
+    "image": "image/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/9oW5Nx95erxvoGHcKHL6.jpg"
   },
   "lunalu": {
-    "name": {
-      "given": "Luna",
-      "family": "Lu"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    },
     "country": "Canada",
     "github": "loonybear",
-    "description": {
-      "en": "Build and enforce guardrails for the web."
-    }
+    "image": "image/admin/NTv1ih4WoIEUdRA0psCk.jpg"
   },
   "geddski": {
-    "name": {
-      "given": "Dave",
-      "family": "Geddes"
-    },
-    "description": {
-      "en": "Founder at Mastery Games"
-    },
     "homepage": "https://gedd.ski/",
     "country": "US",
     "twitter": "geddski",
-    "github": "geddski"
+    "github": "geddski",
+    "image": "image/admin/aU4CRVGbOgg8uSRuLAfh.jpg"
   },
   "danyao": {
-    "name": {
-      "given": "Danyao",
-      "family": "Wang"
-    },
-    "description": {
-      "en": ""
-    },
     "country": "US",
-    "twitter": "danyaowang"
+    "twitter": "danyaowang",
+    "image": "image/admin/usgKL78gSEe0uJ7AE2rT.jpg"
   },
   "linahansson": {
-    "name": {
-      "given": "Lina",
-      "family": "Hansson"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Platform Sales"
-    },
     "country": "Sweden",
     "homepage": "https://digies.se",
     "twitter": "LinaCHansson",
-    "description": {
-      "en": "Lina is a Conversion Specialist at Google, focused on mobile CRO and site speed."
-    }
+    "image": "image/admin/8xXS5zjREzCNIpHX3F4h.jpg"
   },
   "bojanpavic": {
-    "name": {
-      "given": "Bojan",
-      "family": "Pavic"
-    },
-    "github": "bojanpavic"
+    "github": "bojanpavic",
+    "image": "image/admin/vxFF9sBge4qdpMqaKC0Z.jpg"
   },
   "ansteychris": {
-    "name": {
-      "given": "Chris",
-      "family": "Anstey"
-    }
+    "github": "ansteychris",
+    "image": "image/admin/n9o3c8Qxz0uUprZnlsRk.jpg"
   },
   "mfriesenhahn": {
-    "name": {
-      "given": "Michael",
-      "family": "Friesenhahn"
-    },
     "country": "US",
     "github": "mfriesenhahn",
-    "description": {
-      "en": "Michael is a Tech Writer"
-    }
+    "image": "image/admin/z1OxoDh8QIp4q9l3wOCO.jpg"
   },
   "hbatra": {
-    "name": {
-      "given": "Harleen",
-      "family": "Batra"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Marketing"
-    },
     "country": "US",
     "twitter": "harleenkbatra",
-    "description": {
-      "en": "Harleen is a Developer Marketing Manager"
-    }
+    "image": "image/admin/msXgnzpR066rwvDz772V.jpg"
   },
   "mgechev": {
-    "name": {
-      "given": "Minko",
-      "family": "Gechev"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Programs Engineer for Angular"
-    },
     "country": "US",
     "homepage": "https://blog.mgechev.com/",
     "twitter": "mgechev",
     "github": "mgechev",
-    "glitch": "mgechev"
+    "glitch": "mgechev",
+    "image": "image/admin/OPpZ9x8KCVcxvqgdWXM5.jpg"
   },
   "sfluin": {
-    "name": {
-      "given": "Stephen",
-      "family": "Fluin"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Advocate for Angular"
-    },
     "country": "US",
     "twitter": "stephenfluin",
-    "github": "stephenfluin"
+    "github": "stephenfluin",
+    "image": "image/admin/s111dYyDIM2JRjTQbbu1.jpg"
   },
   "mohamedzamakhan": {
-    "name": {
-      "given": "Zama Khan",
-      "family": "Mohammed"
-    },
-    "org": {
-      "name": "Tekzenit, Inc.",
-      "unit": "Software Engineering"
-    },
     "country": "USA",
     "homepage": "https://blog.mgechev.com/",
     "twitter": "mohamedzamakhan",
-    "github": "mohammedzamakhan"
+    "github": "mohammedzamakhan",
+    "image": "image/admin/GFORxGF2V01nQ1p4lJ3E.jpg"
   },
   "dougsillars": {
-    "name": {
-      "given": "Doug",
-      "family": "Sillars"
-    },
     "github": "Dougsillars",
     "twitter": "dougsillars",
     "country": "US",
-    "homepage": "https://dougsillars.com"
+    "homepage": "https://dougsillars.com",
+    "image": "image/admin/pl93DWDPXm3Jkz7V0Lnt.jpg"
   },
   "samrichard": {
-    "name": {
-      "given": "Sam",
-      "family": "Richard"
-    },
     "twitter": "snugug",
     "github": "snugug",
     "glitch": "snugug",
-    "org": {
-      "name": "Chrome OS",
-      "unit": "Developer Relations"
-    },
-    "homepage": "https://snugug.com"
+    "homepage": "https://snugug.com",
+    "image": "image/admin/5kuER6QRWs54zbYIJ4zS.jpg"
   },
   "yoavweiss": {
-    "name": {
-      "given": "Yoav",
-      "family": "Weiss"
-    },
     "twitter": "yoavweiss",
-    "github": "yoavweiss"
+    "github": "yoavweiss",
+    "image": "image/admin/FOIxDKJfuHssXMNzezIt.jpg"
   },
   "katejeffreys": {
-    "name": {
-      "given": "Kate",
-      "family": "Jeffreys"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Web Developer Relations"
-    },
-    "country": "US",
-    "description": {
-      "en": "Technical Writer at Google"
-    }
+    "country": "US",
+    "image": "image/admin/InS6CReujIoGmjKuOTaA.jpg"
   },
   "jimper": {
-    "name": {
-      "given": "Jonathon",
-      "family": "Imperiosi"
-    },
     "github": "jimper",
-    "org": {
-      "name": "Google",
-      "unit": "Ads Developer Relations"
-    },
-    "country": "JP"
+    "country": "JP",
+    "image": "image/admin/9HsIJu89Pj0CqvED7rsc.jpg"
   },
   "robhazan": {
-    "name": {
-      "given": "Rob",
-      "family": "Hazan"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Product Manager"
-    }
+    "image": "image/admin/kqqjE2pJsDjyakfSPtsT.jpg"
   },
   "gernberg": {
-    "name": {
-      "given": "Gustav",
-      "family": "Ernberg von Heijne"
-    },
     "github": "gernberg",
     "country": "SE",
-    "org": {
-      "name": "Google",
-      "unit": "Technical Solutions Consultant"
-    }
+    "image": "image/admin/pXu2oWi0XOi9mzoNTtOG.jpg"
   },
   "thebengeu": {
-    "name": {
-      "given": "Beng",
-      "family": "Eu"
-    },
     "twitter": "thebengeu",
     "github": "thebengeu",
     "glitch": "thebengeu",
-    "org": {
-      "name": "Google",
-      "unit": "AdSpeed"
-    },
     "country": "US",
-    "description": {
-      "en": "AdSpeed tech lead at Google"
-    }
+    "image": "image/admin/JcKHWSuhVrG1uuxlLaUq.jpg"
   },
   "yosuke_furukawa": {
-    "name": {
-      "given": "Yosuke",
-      "family": "Furukawa"
-    },
-    "org": {
-      "name": "Recruit Technologies",
-      "unit": "Software Engineering"
-    },
     "country": "JP",
-    "twitter": "yosuke_furukawa"
+    "twitter": "yosuke_furukawa",
+    "image": "image/admin/XCKP6ZnBZIezAB5ReAfk.jpg"
   },
   "satoshi_arai": {
-    "name": {
-      "given": "Satoshi",
-      "family": "Arai"
-    },
-    "org": {
-      "name": "Recruit Technologies",
-      "unit": "Software Engineering"
-    },
-    "country": "JP"
+    "country": "JP",
+    "image": "image/admin/bSMJWJHcRvGcRhnwVxs7.jpg"
   },
   "kento_tsuji": {
-    "name": {
-      "given": "Kento",
-      "family": "Tsuji"
-    },
-    "org": {
-      "name": "Recruit Technologies",
-      "unit": "Software Engineering"
-    },
     "country": "JP",
-    "twitter": "maxmellon_9039"
+    "twitter": "maxmellon_9039",
+    "image": "image/admin/6IoGBLrEZkQnm0JfMV0O.jpg"
   },
   "ajain": {
-    "name": {
-      "given": "Ankit",
-      "family": "Jain"
-    },
-    "twitter": "AnkitJainOAJ"
+    "twitter": "AnkitJainOAJ",
+    "image": "image/admin/IZc31j5Pp3h5rm00jpKO.jpg"
   },
   "kenjibaheux": {
-    "name": {
-      "given": "Kenji",
-      "family": "Baheux"
-    },
-    "twitter": "KenjiBaheux"
+    "twitter": "KenjiBaheux",
+    "image": "image/admin/I92nHj8yNfMgjnpIsvL6.jpg"
   },
   "una": {
-    "name": {
-      "given": "Una",
-      "family": "Kravets"
-    },
-    "description": {
-      "en": "Developer Advocate for Material Design"
-    },
     "homepage": "https://una.im/",
     "github": "una",
-    "twitter": "una"
+    "twitter": "una",
+    "image": "image/admin/c4bzyDkOZ9MhBaqp0HfW.jpg"
   },
   "phillipkriegel": {
-    "name": {
-      "given": "Phillip",
-      "family": "Kriegel"
-    },
     "homepage": "https://www.philkrie.me/",
     "github": "philkrie",
-    "description": {
-      "en": "Phillip is a Specialist Engineer"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Global Business"
-    },
-    "country": "US"
+    "country": "US",
+    "image": "image/admin/1v5F1SOBl46ZghbHQMle.svg"
   },
   "tigeroakes": {
-    "name": {
-      "given": "Tiger",
-      "family": "Oakes"
-    },
-    "org": {
-      "name": "Mozilla",
-      "unit": "Student Worker"
-    },
     "country": "CA",
     "homepage": "https://tigeroakes.com/",
     "twitter": "Not_Woods",
     "github": "NotWoods",
-    "description": {
-      "en": "Developer working on Firefox Preview"
-    }
+    "image": "image/admin/xxIhAVCPO90YG4I5LFYI.jpg"
   },
   "kumagi": {
-    "name": {
-      "given": "Hiroki",
-      "family": "Kumazaki"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Software engineering"
-    },
     "country": "JP",
     "twitter": "kumagi",
-    "github": "kumagi"
+    "github": "kumagi",
+    "image": "image/admin/Y780bmlJiHhk6UwxgOFF.jpg"
   },
   "andreban": {
-    "name": {
-      "given": "André",
-      "family": "Cipriani Bandarra"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
     "country": "UK",
     "homepage": "https://bandarra.me/",
     "twitter": "andreban",
     "github": "andreban",
-    "description": {
-      "en": "Andre is a Developer Advocate"
-    }
+    "image": "image/admin/XVGMhdOgHJhch3EBcw89.jpg"
   },
   "koto": {
-    "name": {
-      "given": "Krzysztof",
-      "family": "Kotowicz"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Information Security Engineering"
-    },
     "country": "CH",
     "twitter": "kkotowicz",
-    "github": "koto"
+    "github": "koto",
+    "image": "image/admin/1v5F1SOBl46ZghbHQMle.svg"
   },
   "lwe": {
-    "name": {
-      "given": "Lukas",
-      "family": "Weichselbaum"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Information Security Engineering"
-    },
     "country": "CH",
     "twitter": "we1x",
     "github": "lweichselbaum",
-    "homepage": "https://webappsec.dev"
+    "homepage": "https://webappsec.dev",
+    "image": "image/admin/SR3DdHwfeqxp5k9ojcr6.jpg"
   },
   "dgrogan": {
-    "name": {
-      "given": "David",
-      "family": "Grogan"
-    },
     "country": "US",
     "github": "davidsgrogan",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/qPVct6hKRbw1YO0qVMcc.jpg"
   },
   "ulan": {
-    "name": {
-      "given": "Ulan",
-      "family": "Degenbaev"
-    },
     "twitter": "ulandev",
     "github": "ulan",
-    "org": {
-      "name": "Google",
-      "unit": "Chrome"
-    }
+    "image": "image/admin/PmkU3edj6n65Zh0bjaX7.jpg"
   },
   "domenic": {
-    "name": {
-      "given": "Domenic",
-      "family": "Denicola"
-    },
     "twitter": "domenic",
-    "github": "domenic"
+    "github": "domenic",
+    "image": "image/admin/HXHbHrl9qxcxCQK90yIc.jpg"
   },
   "cjamcl": {
-    "name": {
-      "given": "Connor",
-      "family": "Clark"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Connor is a software engineer working on Lighthouse"
-    },
     "country": "US",
     "twitter": "cjamcl",
-    "github": "connorjclark"
+    "github": "connorjclark",
+    "image": "image/admin/JDJv4ZTKpDobwrJ8MSkZ.jpg"
   },
   "paullewis": {
-    "name": {
-      "given": "Paul",
-      "family": "Lewis"
-    },
     "twitter": "aerotwist",
     "country": "UK",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/FqkHLK1y5d0ob6JJAQkR.jpg"
   },
-  "patrickkettner": {
-    "name": {
-      "given": "Patrick",
-      "family": "Kettner"
-    },
-    "twitter": "patrickkettner",
+  "patmeenan": {
+    "twitter": "patmeenan",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ownYNba1FYga5v97gKRF.jpg"
   },
   "sebabenz": {
-    "name": {
-      "given": "Sebastian",
-      "family": "Benz"
-    },
     "twitter": "sebabenz",
     "country": "DE",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/zqFXVJ377ZsIuPQ0X2vT.jpg"
   },
   "syg": {
-    "name": {
-      "given": "Shu-yu",
-      "family": "Guo"
-    },
     "twitter": "_shu",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/KxIs73yjsWwzEPHQaHEA.jpg"
+  },
+  "nabeelalshamma": {
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/gZlM5s1kj09oCG5h2buz.jpeg",
+    "github": "alshamma",
+    "linkedin": "https://www.linkedin.com/in/alshamma/"
   },
   "nattestad": {
-    "name": {
-      "given": "Thomas",
-      "family": "Nattestad"
-    },
     "twitter": "fractorious",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/UyUsatSDE2wdnfy3KHzO.jpg"
   },
   "maudn": {
-    "name": {
-      "given": "Maud",
-      "family": "Nalpas"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Developer Relations"
-    },
-    "description": {
-      "en": "Developer Advocate for Chrome and web"
-    },
     "country": "DE",
     "twitter": "maudnals",
-    "github": "maudnals"
+    "github": "maudnals",
+    "image": "image/O2RNUyVSLubjvENAT3e7JSdqSOx1/9ORwve80jFiyYnPvNcWF.jpg"
   },
   "morss": {
-    "name": {
-      "given": "Ben",
-      "family": "Morss"
-    },
     "twitter": "benmorss",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/Gxnm3F1zP1MFz2OrkjUp.jpg"
   },
   "ericbidelman": {
-    "name": {
-      "given": "Eric",
-      "family": "Bidelman"
-    },
     "twitter": "ebidel",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/ACrLFM1rLlaY2fzUTeXl.jpg"
   },
   "jungkees": {
-    "name": {
-      "given": "Jungkee",
-      "family": "Song"
-    },
-    "org": {
-      "name": "Microsoft",
-      "unit": "Edge"
-    },
     "country": "US",
     "twitter": "jungkees",
     "github": "jungkees",
-    "description": {
-      "en": "PM on the Microsoft Edge team"
-    }
+    "image": "image/admin/n1MFAKkwQLIbMeIvdkQ2.jpg"
   },
   "leszeks": {
-    "name": {
-      "given": "Leszek",
-      "family": "Swirski"
-    },
     "twitter": "leszekswirski",
     "country": "DE",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/80dslyGUB46JmerKVfYJ.jpg"
   },
   "nainar": {
-    "name": {
-      "given": "Naina",
-      "family": "Raisinghani"
-    },
     "twitter": "nainar92",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/vOxj6s4xPFGnL5YGBMym.jpg"
   },
   "crystallambert": {
-    "name": {
-      "given": "Crystal",
-      "family": "Lambert"
-    },
     "twitter": "CrystalOnScript",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/M7O2yjRx7UKFowqrf5bk.jpg"
   },
   "dalmaer": {
-    "name": {
-      "given": "Dion",
-      "family": "Almaer"
-    },
     "twitter": "dalmaer",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/jF8K7dz0XSobNkNDGWKp.jpg"
   },
   "bmcquade": {
-    "name": {
-      "given": "Bryan",
-      "family": "McQuade"
-    },
     "twitter": "bryanmcquade",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/KVeCLO473nZtAEMzDpo6.jpg"
   },
   "drott": {
-    "name": {
-      "given": "Dominik",
-      "family": "Röttsches"
-    },
     "country": "FI",
     "github": "drott",
     "twitter": "abrax5",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/xb7jK8lMyvbHQrBJzlxv.jpg"
   },
   "yaraki": {
-    "name": {
-      "given": "Yuichi",
-      "family": "Araki"
-    },
     "twitter": "yuichi_araki",
     "github": "yaraki",
     "country": "JP",
-    "description": {
-      "en": "Developer Programs Engineer at Google"
-    }
+    "image": "image/admin/IjxUTn7SuYE9pHLSZteN.jpg"
   },
   "kevinellis": {
-    "name": {
-      "given": "Kevin",
-      "family": "Ellis"
-    },
-    "description": {
-      "en": "Software Engineer on the web platform."
-    }
+    "image": "image/admin/IQ4fOKz2TfwgCfiF4AZv.jpg"
   },
   "robertnyman": {
-    "name": {
-      "given": "Robert",
-      "family": "Nyman"
-    },
-    "org": {
-      "name": "Google"
-    },
     "twitter": "robertnyman",
     "github": "robnyman",
     "country": "SE",
     "homepage": "https://robertnyman.com/",
-    "description": {
-      "en": "Developer advocate on the web team at Google."
-    }
+    "image": "image/admin/fbCJc4uifsZ4d5KolJ7j.jpg"
+  },
+  "foolip": {
+    "github": "foolip",
+    "twitter": "foolip",
+    "homepage": "https://foolip.org/",
+    "image": "image/i1D3fea4SShlOWR9GvCYL83Xw822/PAm8xSnqRZyu7qaDzyTO.jpg"
   },
   "olgademidova": {
-    "name": {
-      "given": "Olga",
-      "family": "Demidova"
-    },
-    "org": {
-      "name": "Google",
-      "unit": "Ads Marketing EMEA"
-    },
-    "description": {
-      "en": "Product Marketing Manager"
-    },
-    "country": "UK"
+    "country": "UK",
+    "image": "image/admin/ECEeCqjirRT1455x3AQj.jpg"
   },
   "gilbertococchi": {
-    "name": {
-      "given": "Gilberto",
-      "family": "Cocchi"
-    },
-    "org": {
-      "name": "Google"
-    },
     "twitter": "gilberto_cocchi",
-    "github": "gilbertococchi"
+    "github": "gilbertococchi",
+    "image": "image/admin/4CxwBoPk1E2KKHDkdY1s.jpg"
   },
   "antonkarlovskiy": {
-    "name": {
-      "given": "Anton",
-      "family": "Karlovskiy"
-    },
     "twitter": "antonkarlovskiy",
     "github": "anton-karlovskiy",
-    "glitch": "anton-karlovskiy"
+    "glitch": "anton-karlovskiy",
+    "image": "image/admin/IkUjDRwWBvgvkMuXmlad.jpg"
   },
   "rkochman": {
-    "name": {
-      "given": "Rob",
-      "family": "Kochman"
-    },
     "twitter": "rkochman",
     "github": "rkochman",
     "glitch": "rkochman",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/2TCATL7dglEFzZZWnXo0.jpg"
   },
   "jonchen": {
-    "name": {
-      "given": "Jon",
-      "family": "Chen"
-    },
     "twitter": "jonchenn",
     "github": "jonchenn",
     "glitch": "jonchenn",
     "country": "US",
-    "org": {
-      "name": "Google"
-    },
-    "description": {
-      "en": "Web Ecosystem Consultant"
-    }
+    "image": "image/admin/DSWao9z2Qq584d9kbjit.jpg"
   },
   "msdikla": {
-    "name": {
-      "given": "Dikla",
-      "family": "Cohen"
-    },
-    "org": {
-      "name": "Google"
-    },
     "country": "UK",
     "twitter": "diklla",
-    "github": "diklla"
-  },
-   "bpj": {
-    "name": {
-      "given": "Bart",
-      "family": "Jarochowski"
-    },
-    "org": {
-      "name": "Google"
-    },
+    "github": "diklla",
+    "image": "image/admin/b9zEc84wlzbNww2MKoBL.jpg"
+  },
+  "bpj": {
     "country": "KR",
     "twitter": "maranag",
-    "github": "maranag"
+    "github": "maranag",
+    "image": "image/admin/ChOBe0OzPT7siDgFmjC9.jpg"
+  },
+  "harrytheodoulou": {
+    "twitter": "harryTheo_",
+    "country": "UK",
+    "homepage": "https://www.harrytheo.com/",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/RDHNBibB1P7yeOIrw0JX.jpg"
+  },
+  "natashakosoglov": {
+    "linkedin": "https://uk.linkedin.com/in/natashakosoglov",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/ccGMk9IszZxs7LbBum7s.png"
   },
   "mattreynolds": {
-    "name": {
-      "given": "Matt",
-      "family": "Reynolds"
-    },
-    "org": {
-      "name": "Google"
-    },
-    "country": "US",
-    "description": {
-      "en": "Matt is a software developer"
-    }
+    "country": "US",
+    "image": "image/admin/g2zwlKdDpsMMPtgkx3Gb.jpg"
+  },
+  "joriktangelder": {
+    "country": "NL",
+    "twitter": "jorikdelaporik",
+    "github": "jtangelder",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/1P2utnbQKi02S0iz4GUz.jpg",
+    "homepage": "https://jorik.dev/"
   },
   "sahel": {
-    "name": {
-      "given": "Sahel",
-      "family": "Sharify"
-    },
     "github": "sahel-sh",
     "country": "CA",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/X2tDP3SQzVCQ8dVLmMMI.jpg"
+  },
+  "loirooriol": {
+    "github": "Loirooriol",
+    "image": "image/admin/uedrGuXN8MZ0tg11zsmK.jpg"
   },
   "joelriley": {
-    "name": {
-      "given": "Joel",
-      "family": "Riley"
-    },
     "github": "j0000el",
     "twitter": "j0000el",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/ecKzFuXSShBZ0BOyQmgS.jpg"
   },
   "douglasparker": {
-    "name": {
-      "given": "Douglas",
-      "family": "Parker"
-    },
     "github": "dgp1130",
     "twitter": "develwoutacause",
     "country": "US",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/32FlxFjSQeesv2IgBva4.jpg"
   },
   "vladimirlevin": {
-    "name": {
-      "given": "Vladimir",
-      "family": "Levin"
-    },
     "country": "CA",
-    "org": {
-      "name": "Google"
-    }
+    "image": "image/admin/dmYne3aSCS1fj5ZfL8If.jpg"
+  },
+  "rreverser": {
+    "country": "UK",
+    "twitter": "RReverser",
+    "github": "RReverser",
+    "homepage": "https://rreverser.com/",
+    "image": "image/admin/Ma3ckXmLV7aj1rVgVT1I.jpg"
+  },
+  "masonfreed": {
+    "twitter": "Mfreed777",
+    "github": "mfreed7",
+    "image": "image/admin/t7E3inN3orEPpDUXSkXR.jpg"
+  },
+  "roeln": {
+    "twitter": "pixelambacht",
+    "github": "roeln",
+    "homepage": "https://pixelambacht.nl/",
+    "image": "image/admin/sJXQNtqZbfnddKBtKZo1.jpg"
+  },
+  "dcrossland": {
+    "twitter": "davelab6",
+    "github": "davelab6",
+    "image": "image/admin/Yw6cuEYfVm8eOqiRFtml.jpg"
+  },
+  "aaronleventhal": {
+    "country": "US",
+    "twitter": "aaronlev",
+    "image": "image/admin/VU5wtCAkiSbrzkXznpwT.jpg"
+  },
+  "joanbaca": {
+    "twitter": "joan_baka",
+    "image": "image/admin/ckrFgScrH3fYr2CZ1kMg.jpg"
+  },
+  "aranhacarlos": {
+    "github": "aranhacarlos",
+    "image": "image/admin/lO32XQupcXe0oJfcPX2Q.jpg"
+  },
+  "scottfriesen": {
+    "github": "scott-friesen",
+    "image": "image/admin/D4T7yi0PpYUsSRf38KKc.jpg"
+  },
+  "bartekn": {
+    "image": "image/admin/T5PegmVyKW3nxjuHZF14.jpg"
+  },
+  "djuffin": {
+    "github": "djuffin",
+    "image": "image/admin/MWYHP293xzaBdw30G3Ts.jpg"
+  },
+  "giesau": {
+    "image": "image/admin/smQwRPUSvlFH6IDe3TNX.jpg"
+  },
+  "mattgaunt": {
+    "image": "image/admin/yGv3dhfUhHvSpDA3bNYW.jpg"
+  },
+  "reillyg": {
+    "twitter": "reillyeon",
+    "github": "reillyeon",
+    "image": "image/admin/C7kO2T8Q8jSZxU9xj3AC.jpg"
+  },
+  "nateschloss": {
+    "github": "n8schloss",
+    "twitter": "n8schloss",
+    "image": "image/admin/BS9rSjcVynuKi2SX5Whu.jpg"
+  },
+  "andrewcomminos": {
+    "github": "acomminos",
+    "twitter": "acomminos",
+    "image": "image/admin/ykAIcNpbomeiulF6Kw7P.jpg"
+  },
+  "bingler": {
+    "country": "US",
+    "github": "sbingler",
+    "image": "image/admin/32OlQmcgfam3csi9SBGI.jpg"
+  },
+  "andrewguan": {
+    "github": "AndrewKGuan",
+    "image": "image/HFWAhol3apcfNfuFxGZfjtLt2Yq2/oXpI60ZHNBOBos8bGJRn.jpeg"
+  },
+  "sorenbalko": {
+    "linkedin": "https://www.linkedin.com/in/sbalko/",
+    "github": "sbalko",
+    "image": "image/admin/H0Zvzmn5QMsTdTySkkpx.jpg"
+  },
+  "rezakazemi": {
+    "image": "image/admin/eXpk44oNMpOnNPLrMOMm.jpg"
+  },
+  "antoinebisch": {
+    "country": "UK",
+    "linkedin": "https://www.linkedin.com/in/antoinebisch/",
+    "github": "antoinebisch",
+    "twitter": "AntoineBisch",
+    "image": "image/admin/xCDa34tJbhKRgr8pj5BJ.jpg"
+  },
+  "anniesullie": {
+    "github": "anniesullie",
+    "twitter": "anniesullie",
+    "homepage": "https://anniesullie.com",
+    "image": "image/admin/Elo3rfkiDHm148ov4IZU.jpg"
+  },
+  "mmocny": {
+    "github": "mmocny",
+    "twitter": "mmocny",
+    "image": "image/admin/urYfROhm806fvOPRMsRg.jpg"
+  },
+  "huib": {
+    "github": "huibk",
+    "twitter": "HKleinhout",
+    "image": "image/admin/ljpewM8syhxW7SBleO58.jpg"
+  },
+  "sisidovski": {
+    "country": "JP",
+    "github": "sisidovski",
+    "twitter": "sisidovski",
+    "homepage": "https://sisidov.ski/",
+    "image": "image/iEYkFAI5LNQv7oLlIBv9DuB265a2/hrfeVegJxVUofxsDxkbh.jpg"
+  },
+  "gladenjoy": {
+    "country": "JP",
+    "twitter": "gladenjoy",
+    "image": "image/iEYkFAI5LNQv7oLlIBv9DuB265a2/o8ixW7QKSWR02r9ZUOFP.jpg"
+  },
+  "alonko": {
+    "github": "alonkochba",
+    "twitter": "alonkochba",
+    "country": "IL",
+    "image": "image/BrQidfK9jaQyIHwdw91aVpkPiib2/9zVJ5KLkDStLNSz2ZxPE.jpg"
+  },
+  "choudhuryashish": {
+    "linkedin": "https://www.linkedin.com/in/choudhuryashish/",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/urBoPCVFLFNYxcA4rWBO.jpg"
+  },
+  "dinakarchandolu": {
+    "linkedin": "https://www.linkedin.com/in/dinakarchandolu/",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/E0gT4HrFyUImA5COXOme.jpg"
+  },
+  "abhimanyuraibahadur": {
+    "linkedin": "https://www.linkedin.com/in/abhimanyuraibahadur/",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/D36izBJ4CpCDjAxWhUe6.jpg"
+  },
+  "dhilipvenkateshuvarajan": {
+    "linkedin": "https://www.linkedin.com/in/dhilip-venkatesh-uvarajan-16914624/",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/5FvsHblPdOVKpC5Pdru2.jpg"
+  },
+  "safwans": {
+    "linkedin": "https://www.linkedin.com/in/safwansamla/",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/lR8Vo8IDNt6AnLSVvObk.jpg"
+  },
+  "andybell": {
+    "homepage": "https://piccalil.li/",
+    "github": "andy-piccalilli",
+    "twitter": "piccalilli_",
+    "image": "image/foR0vJZKULb5AGJExlazy1xYDgI2/KgpVYUM3YJiVTASm4RTB.jpeg"
+  },
+  "ajara": {
+    "country": "US",
+    "twitter": "tropicadri",
+    "github": "tropicadri",
+    "image": "image/SeARmcA1EicLXagFnVOe0ou9cqK2/fSWKElF58iFEzXGkfOj9.jpg"
+  },
+  "jbrockmeyer": {
+    "twitter": "jan_brockmeyer",
+    "github": "jabro86",
+    "country": "DE",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/OKm64vE60MFeWq62TFBh.jpg"
+  },
+  "jcolin": {
+    "twitter": "jee_colin",
+    "github": "jeremycolin",
+    "country": "DE",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/IycLA5UeiU6yGAlwrkQ0.jpg"
+  },
+  "hbsong": {
+    "twitter": "HongboSong",
+    "github": "debugtive0517",
+    "image": "image/MZfwZ8oVW8U6tzo5CXffcER0jR83/ieAP4AO0so7own9kFVW4.png"
+  },
+  "adamskret": {
+    "image": "image/BrQidfK9jaQyIHwdw91aVpkPiib2/nsG8CdUek2tyhCd6cCGf.jpg"
+  },
+  "rafałfilipek": {
+    "image": "image/BrQidfK9jaQyIHwdw91aVpkPiib2/hpg1RLMvmCAx9V7d0vVv.jpg"
+  },
+  "marcinsierakowski": {
+    "image": "image/BrQidfK9jaQyIHwdw91aVpkPiib2/8yggAIdGCA6AlONdxH4F.png"
+  },
+  "jiwoong": {
+    "twitter": "jiwoong",
+    "github": "jimoong",
+    "image": "image/foR0vJZKULb5AGJExlazy1xYDgI2/i3fyhkDpmO6VM1opsETS.jpg"
+  },
+  "christianliebel": {
+    "country": "DE",
+    "homepage": "https://christianliebel.com/",
+    "twitter": "christianliebel",
+    "github": "christianliebel",
+    "glitch": "christianliebel",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/pguQ0oykD0nNu9jM5OcP.jpeg"
+  },
+  "mgiuca": {
+    "twitter": "mgiuca",
+    "github": "mgiuca",
+    "country": "AU",
+    "image": "image/26V1DWN36MZr3mUo8ChSBlCpzp43/9gFKixjZHcpFPVcOX9Av.jpg"
+  },
+  "swethagopalakrishnan": {
+    "twitter": "swetha_go",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg"
+  },
+  "saurabhrajpal": {
+    "twitter": "imsaurabhrajpal",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/pgfTCNTb5C2ThMcZCzPQ.jpg"
+  },
+  "arturjanc": {
+    "github": "arturjanc",
+    "twitter": "arturjanc",
+    "image": "image/YLflGBAPWecgtKJLqCJHSzHqe2J2/hwvmzV4b6VQpTNrNF3wK.jpg"
+  },
+  "mkazi": {
+    "country": "USA",
+    "github": "minhaz",
+    "twitter": "_mkazi_",
+    "image": "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/JIhb3g9F2oAg2t3PJ5Y2.jpeg"
+  },
+  "cmp": {
+    "github": "chasephillips",
+    "country": "US"
+  },
+  "collindionagata": {
+    "country": "ID",
+    "twitter": "CollinDion",
+    "linkedin": "collin-dion-agata",
+    "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg"
+  },
+  "chrisboakes": {
+    "github": "chrisboakes",
+    "linkedin": "https://www.linkedin.com/in/chris-boakes",
+    "twitter": "cboakes",
+    "country": "UK",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/eIgvuUcq2LknyiDixzOJ.jpeg"
+  },
+  "jaikk": {
+    "country": "US",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/BKGlQ9PreNrLEV74mhKX.jpg"
+  },
+  "wtc": {
+    "country": "US",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/tyVCzJx2Qe2hCSwXzhrk.jpeg"
+  },
+  "shubhie": {
+    "github": "spanicker",
+    "twitter": "shubhie",
+    "country": "US",
+    "image": "image/0SXGYLkliuPQY3aSy3zWvdv7RqG2/sInJ1hYQTzeVJUGaOjlk.jpeg"
+  },
+  "npm": {
+    "github": "npm1",
+    "twitter": "NicPenaM",
+    "image": "image/kns0INkO77RkiEStzHWYrugyWj32/SCSIEb0Qtv6tPWel5tfd.jpeg"
+  },
+  "derekherman": {
+    "country": "US",
+    "github": "derekherman",
+    "twitter": "derekherman",
+    "image": "image/8L1ESx211yWBm8uNAgqvUc2GwNk1/Co3mEQ34Z8eAw6lPGx5o.jpg"
+  },
+  "dero": {
+    "country": "CZ",
+    "github": "dero",
+    "twitter": "dero_name",
+    "image": "image/8L1ESx211yWBm8uNAgqvUc2GwNk1/wj3d5QqXh3gIUuR7Ob7w.jpg"
+  },
+  "jarhar": {
+    "github": "josepharhar",
+    "twitter": "josepharhar",
+    "image": "image/ahMMPwVRwAdp0gFdY0zZnncYdsm1/3i0rkOVNKJImIy1UWvyC.jpeg"
+  },
+  "majido": {
+    "github": "majido",
+    "twitter": "majido",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/0uSIZyBE7DIwZ3bGnPgz.jpg"
+  },
+  "flackr": {
+    "twitter": "flackrw",
+    "github": "flackr",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/OoCXp829hcVrzCEmjzSd.jpg"
+  },
+  "dandclark": {
+    "twitter": "dandclark1",
+    "github": "dandclark",
+    "country": "US",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/lYPo8w4ZwA465hg323uT.jpg"
+  },
+  "cambickel": {
+    "twitter": "camdenbickel",
+    "github": "camden",
+    "homepage": "https://cambickel.com",
+    "country": "US",
+    "image": "image/eiKy1JcjHqPp3gaedjAQWjPJ8YK2/qTCSbuHdDVtzqMKnDUJx.jpg"
+  },
+  "michaelscharnagl": {
+    "twitter": "justmarkup",
+    "homepage": "https://justmarkup.com",
+    "country": "DE",
+    "image": "image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/OZvyDgCkUQAIA87UJV7A.jpg"
+  },
+  "leenasohoni": {
+    "country": "Singapore",
+    "twitter": "leena_sohoni",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/VXCjCzLEGWApTkZkNZkR.JPG"
+  },
+  "jackjey": {
+    "github": "JackJey",
+    "image": "image/PV7xjXdOKHP8LWt9XhstsToJeK82/O5CMzBRhiNQelJ5Rkzv0.jpg"
+  },
+  "tcoustillac": {
+    "github": "tcoustil",
+    "homepage": "https://www.linkedin.com/in/tcoustillac/",
+    "country": "FR",
+    "image": "image/16kgsueJSCPH4556d9XWWWENbk12/N6sroCi4an6S9ak9XttX.jpg"
+  },
+  "jlwagner": {
+    "github": "malchata",
+    "linkedin": "https://www.linkedin.com/in/malchata/",
+    "homepage": "https://jlwagner.net/",
+    "country": "US",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YROiiX412sAFeV58NStI.jpg"
+  },
+  "cédricbazureau": {
+    "github": "cbazureau",
+    "homepage": "https://cedric.bazureau.com/",
+    "country": "FR",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/vGr2SOy8UdaSj4LvhcxH.jpg"
+  },
+  "adactio": {
+    "github": "adactio",
+    "twitter": "adactio",
+    "homepage": "https://adactio.com/",
+    "country": "UK",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/rM22MifxkT2kdFSUjioP.jpeg"
+  },
+  "firt": {
+    "github": "firtman",
+    "twitter": "firt",
+    "homepage": "https://firt.dev",
+    "country": "AR",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/TJnzoAklhouTpv6YVNn8.jpeg"
+  },
+  "patrickbrosset": {
+    "twitter": "patrickbrosset",
+    "github": "captainbrosset",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/9qyg3BRTavzYs9eFNS0F.jpeg"
+  },
+  "karaerickson": {
+    "image": "image/IypihH3o5cSpEMVp5i08dp69otp2/Az2VaHZ4nQ6ovvTvzCD3.jpeg"
+  },
+  "alexcastle": {
+    "image": "image/IypihH3o5cSpEMVp5i08dp69otp2/ofc2dLwuNURvRIMvTdIv.jpeg"
+  },
+  "behdadb": {
+    "country": "Canada",
+    "github": "behdadb",
+    "image": "image/nM10iAStORWg0YlDbPc2czmpRRr2/yNf8CJMxm2ZigCktK56g.jpg"
+  },
+  "jonross": {
+    "country": "Canada",
+    "github": "jonrossca",
+    "image": "image/nM10iAStORWg0YlDbPc2czmpRRr2/js2VCA8TRNRK2nYwhQFG.jpg"
+  },
+  "bckenny": {
+    "country": "US",
+    "twitter": "brendankenny",
+    "github": "brendankenny",
+    "image": "image/MtjnObpuceYe3ijODN3a79WrxLU2/sWOfAs4f2WyQMMF9xt1A.jpg"
+  },
+  "alexandrawhite": {
+    "country": "US",
+    "github": "heyawhite",
+    "twitter": "heyawhite",
+    "homepage": "https://heyawhite.com",
+    "image": "image/VbsHyyQopiec0718rMq2kTE1hke2/Fg3QPnZnoZh2LbVOs8mK.jpg"
+  },
+  "svenmay": {
+    "country": "DE",
+    "github": "Svenmay",
+    "image": "image/dB6B4Sr8kaaT0KZujRBFC303oFR2/FAG5C2RsJyDw1Ap2DGBw.jpg"
+  },
+  "denisstasyev": {
+    "country": "RU",
+    "github": "denisstasyev",
+    "image": "image/dB6B4Sr8kaaT0KZujRBFC303oFR2/GcmQMuJs1yvVmFILU3Xw.jpg"
+  },
+  "lozandier": {
+    "twitter": "KevinLozandier",
+    "github": "lozandier",
+    "linkedin": "KevinLozandier",
+    "country": "US",
+    "image": "image/bMU6K5O6Yce7QrxAoaF3hsleaRM2/juyWJB261DOLBT16GyMa.png"
+  },
+  "mobtec": {
+    "twitter": "mobtec",
+    "linkedin": "guilhermems",
+    "country": "BR",
+    "image": "image/26V1DWN36MZr3mUo8ChSBlCpzp43/wYWiAqwJid6lXBpotD6h.jpeg"
+  },
+  "maurizioparadisi": {
+    "country": "IT",
+    "linkedin": "https://www.linkedin.com/in/maurizio-paradisi-74422a79",
+    "image": "image/JsqezhaeRldmuGd4UREN7n3ydds2/sv3bdC9e1dS95RsYAk2Y.jpg"
+  },
+  "anshusharma": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/oNcJwYe68di724tSCBj8.png",
+    "linkedin": "anshusharma1983"
+  },
+  "sumitgugnani": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dDPYVsbbwF8sz0ZM5bBg.png",
+    "linkedin": "sumit-gugnani-a187203"
+  },
+  "prashantmishra": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/vTeW4U9wTuLr8QmYoGxX.png",
+    "github": "prash-mi"
+  },
+  "joshuagrossberg": {
+    "country": "US",
+    "linkedin": "https://www.linkedin.com/in/joshua-grossberg-148b7a14",
+    "image": "image/VbsHyyQopiec0718rMq2kTE1hke2/ghjO05jRwr6p0GPCA8sQ.jpg"
+  },
+  "nsull": {
+    "country": "US",
+    "twitter": "stubbornella",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/gjyoj6pRzTfjLXfU7589.jpeg"
+  },
+  "danielasy": {
+    "country": "BR",
+    "github": "danielasy",
+    "linkedin": "https://www.linkedin.com/in/danielayassuda/",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/GglXoaMdqB9PTnUieTSH.jpg"
+  },
+  "arthursonzogni": {
+    "country": "FR",
+    "twitter": "arthursonzogni",
+    "github": "ArthurSonzogni",
+    "homepage": "https://arthursonzogni.com/",
+    "image": "image/VbsHyyQopiec0718rMq2kTE1hke2/McVMXjWzmTFo66lqFLms.jpg"
+  },
+  "chrispalmer": {
+    "country": "US",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/7OUAnF3abartcOzqxQqi.jpeg"
+  },
+  "abeyad": {
+    "country": "US",
+    "twitter": "alibeyad",
+    "github": "abeyad",
+    "image": "image/BLBNCWcM57UxCqJ0LsNECuVCaxD2/GR8cNgtWyPyXDqI4d61Q.jpeg"
+  },
+  "karldubost": {
+    "github": "karlcow",
+    "homepage": "https://www.otsukare.info",
+    "image": "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/dsNUPCYy6gvrU9EEAhaI.jpeg"
+  },
+  "sdenaro": {
+    "country": "US",
+    "homepage": "https://salvatore.denaro.nyc/",
+    "twitter": "sdenaro",
+    "github": "sdenaro",
+    "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/96HCLa4Ee5rbhnPvuP9i.png"
+  },
+  "kbalasub": {
+    "country": "US",
+    "github": "kbalasub",
+    "image": "image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/uuTVpUzvfaPnpX6UjL8t.jpeg"
+  },
+  "monikajanota": {
+    "country": "PL",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FQzvy4BexCKN6Ip51wsg.jpg"
+  },
+  "patrickhlauke": {
+    "github": "patrickhlauke",
+    "country": "UK",
+    "homepage": "https://www.splintered.co.uk/"
+  },
+  "kevinkiklee": {
+    "country": "US",
+    "twitter": "kevinkiklee",
+    "github": "kevinkiklee",
+    "glitch": "kevinkiklee",
+    "image": "image/hVf1flv5Jdag8OQKYqOcJgWUvtz1/8bRRaZVXzJKCDu0RlK1Y.jpg"
+  },
+  "nikilmathew": {
+    "twitter": "nikil_mathew",
+    "linkedin": "https://www.linkedin.com/in/nikilmat/",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/mc2N7pSjT8K7WBi8PR6L.jpeg"
+  },
+  "jheyy": {
+    "country": "UK",
+    "twitter": "jh3yy",
+    "github": "jh3y",
+    "linkedin": "https://www.linkedin.com/in/jheytompkins/",
+    "homepage": "https://jhey.dev/links",
+    "image": "image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/JjwUlxDMTmjyFEvBC8wG.jpeg"
+  },
+  "patrickkettner": {
+    "country": "US",
+    "twitter": "patrickkettner",
+    "github": "patrickkettner",
+    "homepage": "https://patrickkettner.com/",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/O2raVJadIJBVue1fK85Z.png"
+  },
+  "andreabreanna": {
+    "country": "US",
+    "twitter": "andreabreannany",
+    "linkedin": "https://www.linkedin.com/in/andreabreanna/",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8X4Jxtq931g6qIBH5fNK.jpg"
+  },
+  "yuyaito": {
+    "country": "JP",
+    "twitter": "bang_yy",
+    "image": "image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2oSWqurqXEqx9jzuAqyn.jpeg"
+  },
+  "keenyeeliau": {
+    "image": "image/Or7Bgsqru3MxJHvMtp68LKOjxkH3/UbfmJ8kJwfT9FVLHjX3r.jpeg",
+    "github": "kyliau"
+  },
+  "jimmymooney": {
+    "homepage": "https://www.jimmymooney.com/",
+    "twitter": "jimmy0x52",
+    "github": "jimmy0x52",
+    "linkedin": "https://www.linkedin.com/in/jimmymooney/",
+    "country": "US",
+    "image": "image/Xyvh8LLq27V5yRjH5iS1dbf64pE2/M2E7ke6rO6ZpIabYeizX.jpg"
+  },
+  "alexeyrodionov": {
+    "twitter": "alexey_rodionov",
+    "github": "FluorescentHallucinogen",
+    "linkedin": "https://linkedin.com/in/alexey-rodionov",
+    "image": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/n6mW0LtLb2NtYAoQSCx7.png"
+  },
+  "twifkak": {
+    "twitter": "twifkak",
+    "github": "twifkak",
+    "image": "image/rULxC7pPw3PFS4o9xr7v8isFmCv1/fDaDWpuKLKDm4mjnt0jV.jpg"
+  },
+  "ruisantos": {
+    "twitter": "ruijssantos",
+    "linkedin": "https://www.linkedin.com/in/ruijssantos/",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/AVrqFlCqg3j6Rp03tPco.jpg"
+  },
+  "manuelgarcia": {
+    "homepage": "https://farfetchtechblog.com/en/blog/authors/manuel-garcia/",
+    "twitter": "corrosion_pt",
+    "github": "soulcorrosion",
+    "linkedin": "https://www.linkedin.com/in/manuel-garcia-12b6928/",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KZ5GI42sni0kphabO7ut.jpg"
+  },
+  "patriciacoutoneto": {
+    "linkedin": "https://www.linkedin.com/in/pccneto",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/rZFsmMBh2R3d0MCV6gLE.jpg"
+  },
+  "steveworkman": {
+    "twitter": "steveworkman",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/ZQJOeFPFZCQrWmWfFGeH.jpeg"
+  },
+  "simonleparc": {
+    "twitter": "sleparc",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/u9LOvMuiDIAoW5aKZgsQ.jpg"
+  },
+  "dbaron": {
+    "country": "US",
+    "twitter": "davidbaron",
+    "github": "dbaron",
+    "linkedin": "https://www.linkedin.com/in/ldavidbaron/",
+    "homepage": "https://dbaron.org/",
+    "image": "image/ORyRmnnHXAbyJZvAGcyoT2oKi2o2/1Npv2NPkO3ht3vWAqkGv.jpg"
+  },
+  "bramus": {
+    "homepage": "https://www.bram.us/",
+    "twitter": "bramus",
+    "github": "bramus",
+    "country": "BE",
+    "image": "image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/CQMqvg5UkY4weDnJij3b.jpeg"
+  },
+  "kadirtopal": {
+    "country": "US",
+    "twitter": "atopal",
+    "image": "image/HodOHWjMnbNw56hvNASHWSgZyAf2/locu2HN2Xf0XCE3kqoLl.jpeg"
+  },
+  "michellebarker": {
+    "country": "GB",
+    "twitter": "michebarks",
+    "homepage": "https://css-irl.info/",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/TXk0tkZHdsVgSI0XlYMo.jpeg"
+  },
+  "daviddarnes": {
+    "country": "UK",
+    "twitter": "DavidDarnes",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/D4RF9eRlpsL0byFo3nTu.jpeg"
+  },
+  "linhduong": {
+    "country": "JP",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/49yMNi8zYI3ufLHlPL2S.png",
+    "github": "duongkhlinh"
+  },
+  "jecelynyeen": {
+    "homepage": "https://jec.fyi",
+    "twitter": "jecfish",
+    "github": "jecfish",
+    "country": "MY",
+    "image": "image/dPDCek3EhZgLQPGtEG3y0fTn4v82/VrTsk9Vt9SuOzvFZKvOK.jpg"
+  },
+  "shogokashiwase": {
+    "country": "JP",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/65uId5WZmSmGVf4iNFjS.png"
+  },
+  "hayounglee": {
+    "country": "JP",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mrDD7FK1dMWyzJCD4EBy.png"
+  },
+  "ryunosukeakiba": {
+    "country": "JP",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/x1WXJeBxlPZftTHVnSmP.png"
+  },
+  "mmatuzo": {
+    "country": "AT",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/X3PNOGXB6wYGEqGEjoWd.jpeg",
+    "twitter": "mmatuzo"
+  },
+  "estelleweyl": {
+    "country": "US",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/tdK5bAeVqsW0WEJNyvUg.jpeg",
+    "twitter": "estellevw"
+  },
+  "davideast": {
+    "homepage": "https://davidea.st",
+    "twitter": "_davideast",
+    "image": "image/vS06HQ1YTsbMKSFTIPl2iogUQP73/S8CN1AfcJpoUJvYqrfeT.jpeg"
+  },
+  "cariefisher": {
+    "homepage": "https://cariefisher.com/",
+    "twitter": "cariefisher",
+    "country": "US",
+    "image": "image/VbsHyyQopiec0718rMq2kTE1hke2/eurEFMIkwaNmX7HpnGJg.png"
+  },
+  "marksteadman": {
+    "homepage": "https://dev.to/steady5063",
+    "twitter": "Steady5063",
+    "country": "US",
+    "image": "image/VbsHyyQopiec0718rMq2kTE1hke2/zyOtFQPQnT8ZGKdo14EG.jpeg"
+  },
+  "superhighfives": {
+    "homepage": "https://charliegleason.com",
+    "twitter": "superhighfives",
+    "image": "image/vS06HQ1YTsbMKSFTIPl2iogUQP73/yFI6NAn66sh1FZF5yfFK.jpg",
+    "github": "https://github.com/superhighfives"
+  },
+  "sriramkrishnan": {
+    "country": "US",
+    "image": "image/1L2RBhCLSnXjCnSlevaDjy3vba73/6anAlrMu2HmIplZiOguG.jpeg"
+  },
+  "matmarquis": {
+    "country": "US",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/sR0Qflm2JCrHYywcDMVP.jpeg",
+    "homepage": "https://hire.wil.to/"
+  },
+  "aaronforinton": {
+    "country": "UK",
+    "image": "image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/uiiy89r72VrVR9lgrDb5.jpeg",
+    "github": "https://github.com/aaronforinton"
+  },
+  "sil": {
+    "country": "UK",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/xj60ht9o33rZ846tU3e7.png",
+    "twitter": "sil"
+  },
+  "anslo": {
+    "country": "UK",
+    "twitter": "anslogen",
+    "homepage": "https://anslo.dev",
+    "image": "image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/hAkxOPvCiyOG1TZn7R05.jpg"
+  },
+  "amitkumar": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/02ULDoUejjQD0HozJsvG.jpg",
+    "homepage": "https://amitkumar-v.medium.com/"
+  },
+  "daya": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/0UD8AsknXR40nTFeuh5u.JPG",
+    "linkedin": "https://www.linkedin.com/in/daya-yadav-41731a1a/"
+  },
+  "barunkumar": {
+    "country": "IN",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/0fDWYdhK8RVDKLvhQv69.jpg",
+    "linkedin": "https://www.linkedin.com/in/kumarbarun89/",
+    "github": "kumar-barun"
+  },
+  "jhuoponen": {
+    "country": "US",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/m4DVyjMLVB2tOQu8g92S.jpg",
+    "linkedin": "https://www.linkedin.com/in/janihuoponen/"
+  },
+  "vignesh": {
+    "country": "US",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8c6t6kea6QWzRJ1oEIal.jpg"
+  },
+  "ddworken": {
+    "country": "US",
+    "image": "image/udVScdcCFAdRjZwFdLk2jWAFQyr1/n7JbFJPZgqVm1n60t62o.jpeg"
+  },
+  "ramona": {
+    "country": "DE",
+    "image": "image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JjZvG1rUMq9DRil4MnIT.jpeg",
+    "twitter": "leichteckig",
+    "github": "leichteckig",
+    "linkedin": "https://www.linkedin.com/in/ramona-schwering/",
+    "homepage": "https://www.ramona.codes/"
+  },
+  "mitchgalavan": {
+    "country": "US",
+    "image": "image/YLflGBAPWecgtKJLqCJHSzHqe2J2/FeU9BLJudtXgBy873ZVP.jpg",
+    "linkedin": "https://www.linkedin.com/in/mitchellgalavan/",
+    "twitter": "mitchgalavan"
+  },
+  "cjacinic": {
+    "country": "US",
+    "image": "image/YLflGBAPWecgtKJLqCJHSzHqe2J2/CJwGxU6Ml9Eoj2EI3j8W.png"
+  },
+  "silviaconvento": {
+    "country": "US",
+    "image": "image/YLflGBAPWecgtKJLqCJHSzHqe2J2/D7aLMO2nHDOmZ3xFctGX.jpg"
+  },
+  "yurikohirota": {
+    "country": "JP",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gWQBNNc7xafsHz7KBrE1.jpg",
+    "twitter": "yuriko_fuuu"
+  },
+  "thiernothiam": {
+    "country": "UK",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/G39Wqf36XLYM27LOrexr.jpg",
+    "twitter": "localhost_droid",
+    "github": "thierhost",
+    "linkedin": "https://www.linkedin.com/in/thierno-thiam-9753489b/"
+  },
+  "guilhermems": {
+    "country": "BR",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WM20YjI0H9jhcAPlwzoZ.jpg",
+    "twitter": "mobtec",
+    "github": "gui-poa",
+    "linkedin": "https://www.linkedin.com/in/guilhermems/"
+  },
+  "nandunair": {
+    "country": "US",
+    "image": "image/kheDArv5csY6rvQUJDbWRscckLr1/kUDOtUFzBKmIAhlLjefO.jpg",
+    "twitter": "_nairnm",
+    "github": "nairnandu",
+    "linkedin": "https://www.linkedin.com/in/nmnair/"
+  },
+  "markusbordihn": {
+    "country": "DE",
+    "image": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/XQRAhPqZMiqUHeoteyuZ.jpg",
+    "github": "MarkusBordihn",
+    "linkedin": "https://www.linkedin.com/in/MarkusBordihn"
   }
 }
diff --git a/src/site/_data/countries.js b/src/site/_data/countries.js
index 15b250af44a..41ea2566018 100644
--- a/src/site/_data/countries.js
+++ b/src/site/_data/countries.js
@@ -297,7 +297,7 @@ module.exports = [
     'ST: S\u00e3o Tom\u00e9 and Pr\u00edncipe',
     'S\u00e3o Tom\u00e9 and Pr\u00edncipe',
   ],
-  ['TW: Taiwan', 'Taiwan (\u53f0\u6e7e)'],
+  ['TW: Taiwan', 'Taiwan (\u53f0\u7063)'],
   [
     'TJ: Tajikistan',
     'Tajikistan (\u062a\u0627\u062c\u06cc\u06a9\u0633\u062a\u0627\u0646)',
diff --git a/src/site/_data/courses/accessibility/meta.yml b/src/site/_data/courses/accessibility/meta.yml
new file mode 100644
index 00000000000..8c13b25d7d1
--- /dev/null
+++ b/src/site/_data/courses/accessibility/meta.yml
@@ -0,0 +1,19 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2022-09-23
+url: /learn/accessibility
+draft: false
+title: i18n.courses.learn_accessibility.title
+description: i18n.courses.learn_accessibility.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/accessibility/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/accessibility/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/accessibility/card.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/VbsHyyQopiec0718rMq2kTE1hke2/03dCg7PsCbcwblqRHYMB.png'
diff --git a/src/site/_data/courses/accessibility/toc.yml b/src/site/_data/courses/accessibility/toc.yml
new file mode 100644
index 00000000000..78c99acd98e
--- /dev/null
+++ b/src/site/_data/courses/accessibility/toc.yml
@@ -0,0 +1,21 @@
+- url: /learn/accessibility
+- url: /learn/accessibility/why
+- url: /learn/accessibility/measure
+- url: /learn/accessibility/aria-html
+- url: /learn/accessibility/structure
+- url: /learn/accessibility/more-html
+- url: /learn/accessibility/focus
+- url: /learn/accessibility/javascript
+- url: /learn/accessibility/images
+- url: /learn/accessibility/color-contrast
+- url: /learn/accessibility/motion
+- url: /learn/accessibility/typography
+- url: /learn/accessibility/video-audio
+- url: /learn/accessibility/forms
+- url: /learn/accessibility/patterns
+- url: /learn/accessibility/design-ux
+- url: /learn/accessibility/test-automated
+- url: /learn/accessibility/test-manual
+- url: /learn/accessibility/test-assistive-technology
+- url: /learn/accessibility/conclusion
+- url: /learn/accessibility/glossary
diff --git a/src/site/_data/courses/css/meta.yml b/src/site/_data/courses/css/meta.yml
new file mode 100644
index 00000000000..c012787a399
--- /dev/null
+++ b/src/site/_data/courses/css/meta.yml
@@ -0,0 +1,23 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2021-05-10
+url: /learn/css/
+draft: false
+title: i18n.courses.learn_css.title
+description: i18n.courses.learn_css.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/css/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/css/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/css/card.svg'
+# Abstract decorative image that's used in some card contexts
+decor: '/images/courses/css/card-decor.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/foR0vJZKULb5AGJExlazy1xYDgI2/N5mplhgLlq9qzABgyYKQ.png'
+# This is used to color the card module count
+highlight: 'purple'
diff --git a/src/site/_data/courses/css/toc.yml b/src/site/_data/courses/css/toc.yml
new file mode 100644
index 00000000000..0fe4be37959
--- /dev/null
+++ b/src/site/_data/courses/css/toc.yml
@@ -0,0 +1,30 @@
+- url: /learn/css
+- url: /learn/css/box-model
+- url: /learn/css/selectors
+- url: /learn/css/the-cascade
+- url: /learn/css/specificity
+- url: /learn/css/inheritance
+- url: /learn/css/color
+- url: /learn/css/sizing
+- url: /learn/css/layout
+- url: /learn/css/flexbox
+- url: /learn/css/grid
+- url: /learn/css/logical-properties
+- url: /learn/css/spacing
+- url: /learn/css/pseudo-elements
+- url: /learn/css/pseudo-classes
+- url: /learn/css/borders
+- url: /learn/css/shadows
+- url: /learn/css/focus
+- url: /learn/css/z-index
+- url: /learn/css/functions
+- url: /learn/css/gradients
+- url: /learn/css/animations
+- url: /learn/css/filters
+- url: /learn/css/blend-modes
+- url: /learn/css/lists
+- url: /learn/css/transitions
+- url: /learn/css/overflow
+- url: /learn/css/backgrounds
+- url: /learn/css/typography
+- url: /learn/css/conclusion
diff --git a/src/site/_data/courses/design/meta.yml b/src/site/_data/courses/design/meta.yml
new file mode 100644
index 00000000000..08e1f6af4df
--- /dev/null
+++ b/src/site/_data/courses/design/meta.yml
@@ -0,0 +1,23 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2021-11-03
+url: /learn/design/
+draft: false
+title: i18n.courses.learn_design.title
+description: i18n.courses.learn_design.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/design/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/design/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/design/card.svg'
+# Abstract decorative image that's used in some card contexts
+decor: '/images/courses/design/card-decor.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/KxnwWklPxOyH9uK87KG8.svg'
+# This is used to color the card module count
+highlight: 'green'
diff --git a/src/site/_data/courses/design/toc.yml b/src/site/_data/courses/design/toc.yml
new file mode 100644
index 00000000000..a3ec8b4d5ba
--- /dev/null
+++ b/src/site/_data/courses/design/toc.yml
@@ -0,0 +1,17 @@
+- url: /learn/design
+- url: /learn/design/intro
+- url: /learn/design/media-queries
+- url: /learn/design/internationalization
+- url: /learn/design/macro-layouts
+- url: /learn/design/micro-layouts
+- url: /learn/design/typography
+- url: /learn/design/responsive-images
+- url: /learn/design/picture-element
+- url: /learn/design/icons
+- url: /learn/design/theming
+- url: /learn/design/accessibility
+- url: /learn/design/interaction
+- url: /learn/design/ui-patterns
+- url: /learn/design/media-features
+- url: /learn/design/screen-configurations
+- url: /learn/design/conclusion
diff --git a/src/site/_data/courses/example/meta.yml b/src/site/_data/courses/example/meta.yml
new file mode 100644
index 00000000000..461d676f283
--- /dev/null
+++ b/src/site/_data/courses/example/meta.yml
@@ -0,0 +1,21 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2022-01-17
+url: /handbook/content-types/example-course/
+draft: false
+# When true the course will not be listed on the /learn page
+invisible: true
+title: i18n.courses.example.title
+description: i18n.courses.example.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/example/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/example/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/example/card.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/VbsHyyQopiec0718rMq2kTE1hke2/03dCg7PsCbcwblqRHYMB.png'
diff --git a/src/site/_data/courses/example/toc.yml b/src/site/_data/courses/example/toc.yml
new file mode 100644
index 00000000000..c95cc1f18fc
--- /dev/null
+++ b/src/site/_data/courses/example/toc.yml
@@ -0,0 +1,3 @@
+- url: /handbook/content-types/example-course
+- url: /handbook/content-types/example-course/example-section
+- url: /handbook/content-types/example-course/example-section-2
diff --git a/src/site/_data/courses/forms/meta.yml b/src/site/_data/courses/forms/meta.yml
new file mode 100644
index 00000000000..e9c5b53f43d
--- /dev/null
+++ b/src/site/_data/courses/forms/meta.yml
@@ -0,0 +1,23 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2021-11-03
+url: /learn/forms/
+draft: false
+title: i18n.courses.learn_forms.title
+description: i18n.courses.learn_forms.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/forms/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/forms/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/forms/card.svg'
+# Abstract decorative image that's used in some card contexts
+decor: '/images/courses/forms/card-decor.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/n5XVLEqt8NTQQGAANqLJ.png'
+# This is used to color the card module count
+highlight: 'magenta'
diff --git a/src/site/_data/courses/forms/toc.yml b/src/site/_data/courses/forms/toc.yml
new file mode 100644
index 00000000000..da3953bf025
--- /dev/null
+++ b/src/site/_data/courses/forms/toc.yml
@@ -0,0 +1,33 @@
+- url: /learn/forms
+  sections:
+  - title: i18n.courses.get_started_with_forms.title
+  - url: /learn/forms/form-element
+  - url: /learn/forms/form-fields
+  - url: /learn/forms/auto
+  - url: /learn/forms/validation
+  - url: /learn/forms/testing
+  - title: i18n.courses.general_best_practice.title
+  - url: /learn/forms/design-basics
+  - url: /learn/forms/accessibility
+  - url: /learn/forms/internationalization
+  - url: /learn/forms/security-privacy
+  - url: /learn/forms/autofill
+  - title: i18n.courses.testing_monitoring.title
+  - url: /learn/forms/usability-testing
+  - url: /learn/forms/cross-platform-testing
+  - url: /learn/forms/data
+  - title: i18n.courses.elements_attributes.title
+  - url: /learn/forms/form
+  - url: /learn/forms/fields
+  - url: /learn/forms/attributes
+  - title: i18n.courses.styling.title
+  - url: /learn/forms/styling
+  - url: /learn/forms/styling-form-controls
+  - title: i18n.courses.javascript.title
+  - url: /learn/forms/javascript
+  - title: i18n.courses.form_types.title
+  - url: /learn/forms/identity
+  - url: /learn/forms/payment
+  - url: /learn/forms/address
+  - title: i18n.courses.wrap_up.title
+  - url: /learn/forms/conclusion
diff --git a/src/site/_data/courses/html/meta.yml b/src/site/_data/courses/html/meta.yml
new file mode 100644
index 00000000000..0b0ba92bfad
--- /dev/null
+++ b/src/site/_data/courses/html/meta.yml
@@ -0,0 +1,23 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2022-09-08
+url: /learn/html/
+draft: false
+title: i18n.courses.learn_html.title
+description: i18n.courses.learn_html.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/html/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/html/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/html/card.svg'
+# Abstract decorative image that's used in some card contexts
+decor: '/images/courses/html/card-decor.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/YDxKJ14tckrLzMXYZquR.png'
+# This is used to color the card module count
+highlight: 'purple'
\ No newline at end of file
diff --git a/src/site/_data/courses/html/toc.yml b/src/site/_data/courses/html/toc.yml
new file mode 100644
index 00000000000..f51061af07f
--- /dev/null
+++ b/src/site/_data/courses/html/toc.yml
@@ -0,0 +1,22 @@
+- url: /learn/html
+- url: /learn/html/overview
+- url: /learn/html/document-structure
+- url: /learn/html/metadata
+- url: /learn/html/semantic-html
+- url: /learn/html/headings-and-sections
+- url: /learn/html/attributes
+- url: /learn/html/text-basics
+- url: /learn/html/links
+- url: /learn/html/lists
+- url: /learn/html/navigation
+- url: /learn/html/tables
+- url: /learn/html/forms
+- url: /learn/html/images
+- url: /learn/html/audio-video
+- url: /learn/html/template
+- url: /learn/html/apis
+- url: /learn/html/focus
+- url: /learn/html/inline-text
+- url: /learn/html/details
+- url: /learn/html/dialog
+- url: /learn/html/conclusion
diff --git a/src/site/_data/courses/images/meta.yml b/src/site/_data/courses/images/meta.yml
new file mode 100644
index 00000000000..87d70a7b50e
--- /dev/null
+++ b/src/site/_data/courses/images/meta.yml
@@ -0,0 +1,23 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2022-02-01
+url: /learn/images/
+draft: false
+title: i18n.courses.learn_images.title
+description: i18n.courses.learn_images.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/images/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/images/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/images/card.svg'
+# Abstract decorative image that's used in some card contexts
+decor: '/images/courses/images/card-decor.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/MadRbq0upSrYMQ1ksYrQ.png'
+# This is used to color the card module count
+highlight: 'magenta'
diff --git a/src/site/_data/courses/images/toc.yml b/src/site/_data/courses/images/toc.yml
new file mode 100644
index 00000000000..c6c7afcc11c
--- /dev/null
+++ b/src/site/_data/courses/images/toc.yml
@@ -0,0 +1,23 @@
+- url: /learn/images
+  sections:
+  - title: i18n.courses.images_and_performance.title
+  - url: /learn/images/history
+  - url: /learn/images/performance-issues
+  - title: i18n.courses.image_formats.title
+  - url: /learn/images/vector-images
+  - url: /learn/images/raster-images
+  - url: /learn/images/gif
+  - url: /learn/images/png
+  - url: /learn/images/jpeg
+  - url: /learn/images/webp
+  - url: /learn/images/avif
+  - title: i18n.courses.responsive_images.title
+  - url: /learn/images/responsive-images
+  - url: /learn/images/descriptive
+  - url: /learn/images/prescriptive
+  - title: i18n.courses.image_workflows.title
+  - url: /learn/images/automating
+  - url: /learn/images/cms
+  - url: /learn/images/cdn
+  - url: /learn/images/conclusion
+  
\ No newline at end of file
diff --git a/src/site/_data/courses/privacy/meta.yml b/src/site/_data/courses/privacy/meta.yml
new file mode 100644
index 00000000000..7962ca3f059
--- /dev/null
+++ b/src/site/_data/courses/privacy/meta.yml
@@ -0,0 +1,19 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2023-02-22
+url: /learn/privacy
+draft: false
+title: i18n.courses.learn_privacy.title
+description: i18n.courses.learn_privacy.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/privacy/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/privacy/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/privacy/card.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/E10gLEyQQ7GKqaJwUJn4.png'
diff --git a/src/site/_data/courses/privacy/toc.yml b/src/site/_data/courses/privacy/toc.yml
new file mode 100644
index 00000000000..7829885624b
--- /dev/null
+++ b/src/site/_data/courses/privacy/toc.yml
@@ -0,0 +1,6 @@
+- url: /learn/privacy
+- url: /learn/privacy/data
+- url: /learn/privacy/third-parties
+- url: /learn/privacy/fingerprinting
+- url: /learn/privacy/encryption
+- url: /learn/privacy/best-practices
diff --git a/src/site/_data/courses/pwa/meta.yml b/src/site/_data/courses/pwa/meta.yml
new file mode 100644
index 00000000000..8ed36353434
--- /dev/null
+++ b/src/site/_data/courses/pwa/meta.yml
@@ -0,0 +1,19 @@
+# The date is used to organize the courses on the /learn page.
+# This should be the initial publish date of the course. When new pages are
+# added to the course the site will check if they are <30 days old, and if they
+# are, it will give them a "New" badge. However, when you first launch a course
+# you don't want every entry to have a "New" badge, so anything that existed
+# on or before this date will not receive the "New" badge.
+date: 2021-11-03
+url: /learn/pwa/
+draft: false
+title: i18n.courses.learn_pwa.title
+description: i18n.courses.learn_pwa.description
+# This is the logo that appears in the navigation drawer and header.
+logo: '/images/courses/pwa/logo.svg'
+# This is used to provide the background for the navigation drawer and header.
+background: '/images/courses/pwa/background.svg'
+# This provides the cover image for the card on /learn/
+card: '/images/courses/pwa/card.svg'
+# This is used for the social media thumbnail.
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/NUc0UUPjUOXpaLvvEz1H.png'
diff --git a/src/site/_data/courses/pwa/toc.yml b/src/site/_data/courses/pwa/toc.yml
new file mode 100644
index 00000000000..b56a9dd8b47
--- /dev/null
+++ b/src/site/_data/courses/pwa/toc.yml
@@ -0,0 +1,25 @@
+- url: /learn/pwa
+- url: /learn/pwa/progressive-web-apps
+- url: /learn/pwa/getting-started
+- url: /learn/pwa/foundations
+- url: /learn/pwa/app-design
+- url: /learn/pwa/assets-and-data
+- url: /learn/pwa/service-workers
+- url: /learn/pwa/caching
+- url: /learn/pwa/serving
+- url: /learn/pwa/workbox
+- url: /learn/pwa/offline-data
+- url: /learn/pwa/installation
+- url: /learn/pwa/web-app-manifest
+- url: /learn/pwa/installation-prompt
+- url: /learn/pwa/update
+- url: /learn/pwa/enhancements
+- url: /learn/pwa/detection
+- url: /learn/pwa/os-integration
+- url: /learn/pwa/windows
+- url: /learn/pwa/experimental
+- url: /learn/pwa/tools-and-debug
+- url: /learn/pwa/architecture
+- url: /learn/pwa/complexity
+- url: /learn/pwa/capabilities
+- url: /learn/pwa/conclusion
diff --git a/src/site/_data/design/components.js b/src/site/_data/design/components.js
new file mode 100644
index 00000000000..4912ecafdee
--- /dev/null
+++ b/src/site/_data/design/components.js
@@ -0,0 +1,305 @@
+/* global __basedir */
+
+const chalk = require('chalk');
+const nunjucks = require('nunjucks');
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+
+// Pull in filters
+const md = require('../../_filters/md');
+
+// Set up the chalk warning and error state
+// @ts-ignore
+const warning = chalk.black.bgYellow;
+// @ts-ignore
+const error = chalk.black.bgRed;
+
+// Set up custom nunjucks environment and add custom parts
+const nunjucksEnv = new nunjucks.Environment(
+  new nunjucks.FileSystemLoader(
+    path.join(__basedir, 'src', 'site', '_includes'),
+  ),
+  {autoescape: false},
+);
+
+nunjucksEnv.addFilter('md', md);
+
+// For storing processed items for speedier builds
+let processedItems = [];
+
+module.exports = {
+  // Grabs all components that it can find at the root level then builds up a dataset,
+  // rendered markup, view markup and docs. Lastly, it finds any variants and makes
+  // those part of the component, too
+  get items() {
+    // @ts-ignore
+
+    // If the items have already been processed, it's an immediate return
+    if (processedItems.length) {
+      return processedItems;
+    }
+
+    const basePath = path.join(__basedir, 'src', 'component-library');
+
+    // Gets component paths, excluding hidden files/folders
+    const getComponentPaths = (refPath) => {
+      return fs
+        .readdirSync(refPath)
+        .filter((item) => !/(^|\/)\.[^/.]/g.test(item)) // Hidden
+        .filter((item) => !/[^\\]*\.(\w+)$/.test(item)); // detect file
+    };
+
+    // Parses out the component name from the last segment in its path
+    const getComponentName = (componentPath) => {
+      const pathParts = componentPath.split(path.sep).filter((x) => x.length);
+      return pathParts[pathParts.length - 1];
+    };
+
+    const components = getComponentPaths(basePath);
+
+    // For creating a result collection
+    const result = [];
+
+    // This is used for both components and variants to grab markup, data and docs
+    const buildComponent = (
+      componentPath,
+      componentName,
+      parentPath = null,
+      parentName = null,
+      contextData = null,
+    ) => {
+      const response = {};
+
+      // Attempt to load markup from the pass componentPath and componentName first,
+      // but if that can’t be found, attempt to load from the parent instead, if
+      // its details have been passed in
+      if (fs.existsSync(path.resolve(componentPath, `${componentName}.njk`))) {
+        response.markup = fs.readFileSync(
+          path.resolve(componentPath, `${componentName}.njk`),
+          'utf8',
+        );
+      } else {
+        if (parentPath !== null && parentName !== null) {
+          if (fs.existsSync(path.resolve(parentPath, `${parentName}.njk`))) {
+            response.markup = fs.readFileSync(
+              path.resolve(parentPath, `${parentName}.njk`),
+              'utf8',
+            );
+          }
+        }
+      }
+
+      // All markup avenues exhausted so time to bail out
+      if (!response.markup.length) {
+        console.log(
+          warning(
+            `Markup file, ${componentName}.njk wasn’t found, so this component (${componentPath}) can’t be built up`,
+          ),
+        );
+        return null;
+      }
+
+      // If specific context data has been passed, we prioritise that
+      if (contextData) {
+        response.data = contextData.context
+          ? contextData
+          : {context: contextData};
+      }
+      // If not, we look for a data file
+      else if (
+        fs.existsSync(path.resolve(componentPath, `${componentName}.json`))
+      ) {
+        response.data = buildComponentData(
+          fs.readFileSync(
+            path.resolve(componentPath, `${componentName}.json`),
+            'utf8',
+          ),
+          path.resolve(componentPath, `${componentName}.json`),
+        );
+      }
+
+      // Render the component with nunjucks and then run it through
+      // prettier so format it correctly to make copy/paste easier
+      response.rendered = prettier
+        .format(
+          nunjucksEnv.renderString(response.markup, {
+            data: response.data.context || {},
+          }),
+          {
+            useTabs: false,
+            tabWidth: 2,
+            parser: 'html',
+          },
+        )
+        .replace(/^\s*\n/gm, ''); // Gets rid of blank lines (https://stackoverflow.com/q/16369642)
+
+      if (fs.existsSync(path.resolve(componentPath, `${componentName}.md`))) {
+        response.docs = fs.readFileSync(
+          path.resolve(componentPath, `${componentName}.md`),
+          'utf8',
+        );
+      }
+
+      return response;
+    };
+
+    // Take data input and attempt to parse as JSON
+    const buildComponentData = (input, filePath) => {
+      try {
+        return JSON.parse(input);
+      } catch (ex) {
+        console.log(
+          error(
+            `Component data was malformed and couldn’t be parsed (${filePath})`,
+          ),
+        );
+        return {};
+      }
+    };
+
+    // Loop each components folder, attempt to grab all the things and return
+    // back a fully formed object to use
+    components.forEach((item) => {
+      const componentRoot = path.resolve(basePath, item);
+      const componentName = getComponentName(componentRoot);
+      const componentResponse = buildComponent(componentRoot, componentName);
+      const componentVariantsRoot = path.resolve(componentRoot, 'variants');
+      const componentVariantsData = componentResponse.data.variants || [];
+
+      // Error will have been logged in buildComponent, but this is
+      // not an acceptable response.
+      if (!componentResponse) {
+        return;
+      }
+
+      // Urls for component page and preview
+      componentResponse.handle = componentName;
+      componentResponse.url = `/design-system/component/${componentName}/`;
+      componentResponse.previewUrl = `/design-system/preview/${componentName}/`;
+
+      // An empty container for variants for if one or the other methods of loading
+      // them results in nothing
+      componentResponse.variants = [];
+
+      // If this component has a variants folder
+      // run the whole process on all that can be found
+      if (fs.existsSync(componentVariantsRoot)) {
+        const variants = getComponentPaths(componentVariantsRoot);
+
+        componentResponse.variants = variants.map((variant) => {
+          const variantRoot = path.resolve(componentVariantsRoot, variant);
+          const variantName = getComponentName(variantRoot);
+
+          return {
+            ...{
+              name: variantName,
+              handle: componentName + '-' + variantName,
+              previewUrl: `/design-system/preview/${componentName}/${variantName}/`,
+            },
+            ...buildComponent(
+              variantRoot,
+              variantName,
+              componentRoot,
+              componentName,
+            ),
+          };
+        });
+      }
+
+      // If variants are defined in the root component's config,
+      // we need to render them too, using the root component's markup
+      if (componentVariantsData.length) {
+        const dataVariantItems = [];
+        componentVariantsData.forEach((variant) => {
+          dataVariantItems.push({
+            ...{
+              name: variant.name,
+              handle: componentName + '-' + variant.name,
+              previewUrl: `/design-system/preview/${componentName}/${variant.name}/`,
+            },
+            ...buildComponent(componentRoot, componentName, null, null, {
+              title: variant.title || variant.name,
+              context: {...componentResponse.data.context, ...variant.context}, // Merge existing context with variant context so we don't have to repeat ourselves a lot
+            }),
+          });
+        });
+
+        // Now with the data variants built, we need to loop,
+        // check that a file-based one wasn't already made,
+        // then add it to the collection
+        dataVariantItems.forEach((variantItem) => {
+          const existingComponent = componentResponse.variants.find(
+            (x) => x.name === variantItem.name,
+          );
+
+          // Variant data files take priority, so if a rendered component exists, bail on this iteration
+          if (existingComponent) {
+            console.log(
+              warning(
+                `The variant, ${variantItem.name} was already processed with a data file, which takes priority over variants defined in the root component’ (${componentName}) data file`,
+              ),
+            );
+            return;
+          }
+
+          componentResponse.variants.push(variantItem);
+        });
+      }
+
+      // Lastly, sort variants by name if component hasn't
+      // specifically defined source order sorting
+      if (componentResponse.data.sort !== 'source') {
+        if (componentResponse.variants) {
+          componentResponse.variants = componentResponse.variants.sort((a, b) =>
+            a.name.localeCompare(b.name),
+          );
+        }
+      }
+
+      result.push(componentResponse);
+    });
+
+    processedItems = result;
+    return result;
+  },
+
+  // Returns a flat array of all components and variants
+  get previews() {
+    const response = [];
+
+    this.items.forEach((item) => {
+      // Slice only what's needed from root component
+      response.push({
+        previewUrl: item.previewUrl,
+        data: item.data,
+        rendered: item.rendered,
+        markup: item.markup,
+        handle: item.handle,
+      });
+
+      if (item.variants) {
+        item.variants.forEach((variant) => {
+          response.push(variant);
+        });
+      }
+    });
+
+    return response;
+  },
+
+  // Takes a handle, tries to match that with a component or variant then
+  // applies passed data if available
+  render(handle, data = null) {
+    const item = this.previews.find((item) => item.handle === handle);
+
+    if (!item) {
+      console.log(error(`Component, "${handle}" couldn't be found`));
+      return '';
+    }
+
+    // Passed data overwrites any context data.
+    const renderData = {...item.data.context, ...data};
+    return nunjucksEnv.renderString(item.markup, {data: renderData});
+  },
+};
diff --git a/src/site/_data/design/patterns.js b/src/site/_data/design/patterns.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/site/_data/design/themes.js b/src/site/_data/design/themes.js
new file mode 100644
index 00000000000..6d7a2e874e1
--- /dev/null
+++ b/src/site/_data/design/themes.js
@@ -0,0 +1,243 @@
+/*
+  THEME CONFIG
+
+  In here, we have some enum-style keys that refer to colors in context. These
+  keys are then used to inform a relationship between context and design tokens.
+
+  The structure for a color design token reference is ${group}-${item} and should
+  be lowercase, so if you wanted to use the core primary color, you would use
+  'core-primary' because “Core” is the group and “Primary” is the item
+*/
+module.exports = {
+  colorKeys: {
+    MODE: 'mode',
+    CHECKBOX: 'checkbox',
+    CHECKBOX_CHECKED: 'checkbox-checked',
+    CORE_TEXT: 'core-text',
+    CORE_BG: 'core-bg',
+    DARK_BG: 'dark-bg',
+    DARK_TEXT: 'dark-text',
+    MID_TEXT: 'mid-text',
+    MID_BG: 'mid-bg',
+    HIGHLIGHT_TEXT: 'highlight-text',
+    HIGHLIGHT_TEXT_ALT: 'highlight-text-alt',
+    HIGHLIGHT_INTERACT_BG: 'highlight-interact-bg',
+    ACCENT_TEXT: 'accent-text',
+    ACCENT_BG: 'accent-bg',
+    ACTION_BG: 'action-bg',
+    ACTION_BG_HOVER: 'action-bg-hover',
+    ACTION_BG_ALT: 'action-bg-alt',
+    ACTION_BG_PRIMARY: 'action-bg-primary',
+    ACTION_TEXT: 'action-text',
+    ACTION_TEXT_ALT: 'action-text-alt',
+    ACTION_TEXT_PRIMARY: 'action-text-primary',
+    ACTIVE_BG: 'active-bg',
+    ACTIVE_TEXT: 'active-text',
+    BRAND_TEXT: 'brand-text',
+    CHECK_FG: 'check-fg',
+    CHECK_BG: 'check-bg',
+    CHECK_BG_ACTIVE: 'check-bg-active',
+    FLOATING_RIBBON_BG: 'floating-ribbon-bg',
+    FOCUS_RING: 'focus-ring',
+    IMG_BACKDROP: 'img-backdrop',
+    PRIMARY_BOX_BG: 'primary-box-bg',
+    PRIMARY_BOX_TEXT: 'primary-box-text',
+    QUATERNARY_BOX_BG: 'quaternary-box-bg',
+    QUATERNARY_BOX_TEXT: 'quaternary-box-text',
+    SECONDARY_BOX_BG: 'secondary-box-bg',
+    SECONDARY_BOX_TEXT: 'secondary-box-text',
+    RADIO: 'radio',
+    RADIO_CHECKED: 'radio-checked',
+    REVERSED_BG: 'reversed-bg',
+    REVERSED_TEXT: 'reversed-text',
+    STATE_INFO_TEXT: 'state-info-text',
+    STATE_INFO_BG: 'state-info-bg',
+    STATE_WARN_TEXT: 'state-warn-text',
+    STATE_WARN_BG: 'state-warn-bg',
+    STATE_GOOD_TEXT: 'state-good-text',
+    STATE_GOOD_BG: 'state-good-bg',
+    STATE_BAD_TEXT: 'state-bad-text',
+    STATE_BAD_BG: 'state-bad-bg',
+    STATE_UPDATE_BG: 'state-update-bg',
+    STATE_UPDATE_TEXT: 'state-update-text',
+    SYNTAX_PRIMARY: 'syntax-primary',
+    SYNTAX_PRIMARY_GLARE: 'syntax-primary-glare',
+    SYNTAX_SECONDARY: 'syntax-secondary',
+    SYNTAX_TERTIARY: 'syntax-tertiary',
+    SYNTAX_QUATERNARY: 'syntax-quaternary',
+    STROKE: 'stroke',
+    TERTIARY_BOX_BG: 'tertiary-box-bg',
+    TERTIARY_BOX_TEXT: 'tertiary-box-text',
+    TRANSPARENT_IMG_MASK: 'transparent-img-mask',
+  },
+  getDark() {
+    return {
+      MODE: 'dark',
+      CHECKBOX: 'backgrounds-checkbox-dark',
+      CHECKBOX_CHECKED: 'backgrounds-checkbox-dark-checked',
+      CORE_TEXT: 'shades-light',
+      CORE_BG: 'shades-dim',
+      DARK_BG: 'shades-charcoal',
+      DARK_TEXT: 'shades-dark',
+      MID_TEXT: 'shades-gray-glare',
+      MID_BG: 'shades-charcoal',
+      HIGHLIGHT_TEXT: 'core-primary-glare',
+      HIGHLIGHT_TEXT_ALT: 'core-tertiary-glare',
+      HIGHLIGHT_INTERACT_BG: 'shades-charcoal',
+      ACCENT_TEXT: 'shades-gray-glare',
+      ACCENT_BG: 'shades-charcoal',
+      ACTION_BG: 'shades-dim',
+      ACTION_BG_ALT: 'shades-dim',
+      ACTION_BG_PRIMARY: 'core-primary-dim',
+      ACTION_BG_HOVER: 'shades-gray-glare',
+      ACTION_TEXT: 'core-primary-glare',
+      ACTION_TEXT_PRIMARY: 'core-primary-bright',
+      ACTION_TEXT_ALT: 'shades-light',
+      ACTIVE_BG: 'core-primary-glare',
+      ACTIVE_TEXT: 'shades-dark',
+      BRAND_TEXT: 'shades-gray-glare',
+      CHECK_FG: 'shades-light',
+      CHECK_BG: 'shades-gray',
+      CHECK_BG_ACTIVE: 'core-tertiary-glare',
+      FLOATING_RIBBON_BG: 'core-primary-dim',
+      FOCUS_RING: 'core-primary-glare',
+      IMG_BACKDROP: 'shades-light',
+      PRIMARY_BOX_BG: 'core-primary-dim',
+      PRIMARY_BOX_TEXT: 'core-primary-bright',
+      QUATERNARY_BOX_BG: 'core-quaternary-dim',
+      QUATERNARY_BOX_TEXT: 'core-quaternary-bright',
+      SECONDARY_BOX_BG: 'core-secondary-dim',
+      SECONDARY_BOX_TEXT: 'core-secondary-bright',
+      RADIO: 'backgrounds-radio-dark',
+      RADIO_CHECKED: 'backgrounds-radio-dark-checked',
+      REVERSED_BG: 'shades-gray-glare',
+      REVERSED_TEXT: 'shades-dark',
+      STATE_INFO_TEXT: 'state-info-bright',
+      STATE_INFO_BG: 'state-info-dim',
+      STATE_WARN_TEXT: 'state-warn-glare',
+      STATE_WARN_BG: 'state-warn-dim',
+      STATE_GOOD_TEXT: 'state-good-glare',
+      STATE_GOOD_BG: 'state-good-dim',
+      STATE_BAD_TEXT: 'state-bad-glare',
+      STATE_BAD_BG: 'state-bad-dim',
+      STATE_UPDATE_BG: 'state-update-dim',
+      STATE_UPDATE_TEXT: 'state-update-bright',
+      SYNTAX_PRIMARY: 'code-primary-bright',
+      SYNTAX_PRIMARY_GLARE: 'code-primary-bright',
+      SYNTAX_SECONDARY: 'code-secondary-bright',
+      SYNTAX_TERTIARY: 'code-tertiary-bright',
+      SYNTAX_QUATERNARY: 'code-quaternary-bright',
+      STROKE: 'shades-gray',
+      TERTIARY_BOX_TEXT: 'core-tertiary-glare',
+      TERTIARY_BOX_BG: 'core-tertiary-dim',
+      TRANSPARENT_IMG_MASK: 'shades-gray-glare',
+    };
+  },
+  getLight() {
+    return {
+      MODE: 'light',
+      CHECKBOX: 'backgrounds-checkbox',
+      CHECKBOX_CHECKED: 'backgrounds-checkbox-checked',
+      CORE_TEXT: 'shades-dark',
+      CORE_BG: 'shades-light-bright',
+      DARK_BG: 'shades-gray-glare',
+      DARK_TEXT: 'shades-dark',
+      MID_TEXT: 'shades-gray',
+      MID_BG: 'shades-light',
+      HIGHLIGHT_TEXT: 'core-primary',
+      HIGHLIGHT_TEXT_ALT: 'core-tertiary',
+      HIGHLIGHT_INTERACT_BG: 'core-primary-bright',
+      ACCENT_TEXT: 'shades-dark',
+      ACCENT_BG: 'shades-light',
+      ACTION_BG: 'shades-light-bright',
+      ACTION_BG_ALT: 'shades-light-bright',
+      ACTION_BG_PRIMARY: 'core-primary',
+      ACTION_BG_HOVER: 'shades-gray-bright',
+      ACTION_TEXT: 'core-primary',
+      ACTION_TEXT_PRIMARY: 'shades-light-bright',
+      ACTION_TEXT_ALT: 'shades-dark',
+      ACTIVE_BG: 'core-primary-bright',
+      ACTIVE_TEXT: 'core-primary',
+      BRAND_TEXT: 'shades-gray',
+      CHECK_FG: 'shades-light',
+      CHECK_BG: 'shades-gray-glare',
+      CHECK_BG_ACTIVE: 'core-tertiary-glare',
+      FLOATING_RIBBON_BG: 'core-primary-dim',
+      FOCUS_RING: 'core-primary',
+      IMG_BACKDROP: 'shades-light-bright',
+      PRIMARY_BOX_BG: 'core-primary-bright',
+      PRIMARY_BOX_TEXT: 'core-primary',
+      QUATERNARY_BOX_BG: 'core-quaternary-bright',
+      QUATERNARY_BOX_TEXT: 'core-quaternary',
+      RADIO: 'backgrounds-radio',
+      RADIO_CHECKED: 'backgrounds-radio-checked',
+      REVERSED_BG: 'shades-charcoal',
+      REVERSED_TEXT: 'shades-light',
+      SECONDARY_BOX_BG: 'core-secondary-bright',
+      SECONDARY_BOX_TEXT: 'core-secondary',
+      STATE_INFO_TEXT: 'state-info',
+      STATE_INFO_BG: 'state-info-bright',
+      STATE_WARN_TEXT: 'state-warn',
+      STATE_WARN_BG: 'state-warn-bright',
+      STATE_GOOD_TEXT: 'state-good',
+      STATE_GOOD_BG: 'state-good-bright',
+      STATE_BAD_TEXT: 'state-bad',
+      STATE_BAD_BG: 'state-bad-bright',
+      STATE_UPDATE_BG: 'state-update-bright',
+      STATE_UPDATE_TEXT: 'state-update',
+      STROKE: 'shades-gray-glare',
+      SYNTAX_PRIMARY: 'code-primary',
+      SYNTAX_PRIMARY_GLARE: 'code-primary-glare',
+      SYNTAX_SECONDARY: 'code-secondary',
+      SYNTAX_TERTIARY: 'code-tertiary',
+      SYNTAX_QUATERNARY: 'code-quaternary',
+      TERTIARY_BOX_TEXT: 'core-tertiary',
+      TERTIARY_BOX_BG: 'core-tertiary-bright',
+      TRANSPARENT_IMG_MASK: 'shades-light-bright',
+    };
+  },
+  generate() {
+    return [
+      {
+        name: 'default',
+        tokens: this.getLight(),
+      },
+      {
+        name: 'dark-toggle',
+        key: 'prefix',
+        value: '[data-user-theme="dark"]',
+        tokens: this.getDark(),
+      },
+      {
+        name: 'dark',
+        key: 'prefers-color-scheme',
+        value: 'dark',
+        tokens: this.getDark(),
+      },
+      {
+        name: 'light-toggle',
+        key: 'prefix',
+        value: '[data-user-theme="light"]',
+        tokens: this.getLight(),
+      },
+    ];
+  },
+  get backgroundUtilities() {
+    return Object.keys(this.colorKeys)
+      .filter((key) => key.includes('_BG'))
+      .map((key) => ({
+        utilityClass: `bg-${this.colorKeys[key]}`,
+        sassMixin: `@include apply-utility('bg', '${this.colorKeys[key]}')`,
+        sassFunction: `get-utility-value('bg', '${this.colorKeys[key]}')`,
+      }));
+  },
+  get textUtilities() {
+    return Object.keys(this.colorKeys)
+      .filter((key) => key.includes('_TEXT'))
+      .map((key) => ({
+        utilityClass: `color-${this.colorKeys[key]}`,
+        sassMixin: `@include apply-utility('color', '${this.colorKeys[key]}')`,
+        sassFunction: `get-utility-value('color', '${this.colorKeys[key]}')`,
+      }));
+  },
+};
diff --git a/src/site/_data/design/tokens.json b/src/site/_data/design/tokens.json
new file mode 100644
index 00000000000..13bc7b79443
--- /dev/null
+++ b/src/site/_data/design/tokens.json
@@ -0,0 +1,475 @@
+{
+  "colors": [
+    {
+      "group": "Core",
+      "items": [
+        {
+          "name": "Primary",
+          "value": "#3740ff"
+        },
+        {
+          "name": "Primary Glare",
+          "value": "#9da2ff"
+        },
+        {
+          "name": "Primary Bright",
+          "value": "#f8faff"
+        },
+        {
+          "name": "Primary Dim",
+          "value": "#2c333f"
+        },
+        {
+          "name": "Secondary",
+          "value": "#e51661"
+        },
+        {
+          "name": "Secondary Shade",
+          "value": "#9c166b"
+        },
+        {
+          "name": "Secondary Glare",
+          "value": "#ee518a"
+        },
+        {
+          "name": "Secondary Bright",
+          "value": "#fef5fa"
+        },
+        {
+          "name": "Secondary Dim",
+          "value": "#3e2d39"
+        },
+        {
+          "name": "Tertiary",
+          "value": "#6001ff"
+        },
+        {
+          "name": "Tertiary Glare",
+          "value": "#d7aefb"
+        },
+        {
+          "name": "Tertiary Bright",
+          "value": "#faf6fe"
+        },
+        {
+          "name": "Tertiary Dim",
+          "value": "#352e3f"
+        },
+        {
+          "name": "Quaternary",
+          "value": "#007b83"
+        },
+        {
+          "name": "Quaternary Glare",
+          "value": "#78d9ec"
+        },
+        {
+          "name": "Quaternary Bright",
+          "value": "#f4fcfe"
+        },
+        {
+          "name": "Quaternary Dim",
+          "value": "#26373d"
+        },
+        {
+          "name": "Brand",
+          "value": "#3fc4ff"
+        }
+      ]
+    },
+    {
+      "group": "State",
+      "items": [
+        {
+          "name": "Good",
+          "value": "#0d652d"
+        },
+        {
+          "name": "Good Bright",
+          "value": "#e9f6ed"
+        },
+        {
+          "name": "Good Dim",
+          "value": "#283532"
+        },
+        {
+          "name": "Good Glare",
+          "value": "#e2faed"
+        },
+        {
+          "name": "Info",
+          "value": "#174ea6"
+        },
+        {
+          "name": "Info Glare",
+          "value": "#3074e2"
+        },
+        {
+          "name": "Info Bright",
+          "value": "#deeafd"
+        },
+        {
+          "name": "Info Dim",
+          "value": "#2c333f"
+        },
+        {
+          "name": "Warn",
+          "value": "#c34900"
+        },
+        {
+          "name": "Warn Bright",
+          "value": "#fff5e3"
+        },
+        {
+          "name": "Warn Dim",
+          "value": "#3b372b"
+        },
+        {
+          "name": "Warn Glare",
+          "value": "#fffcf2"
+        },
+        {
+          "name": "Bad",
+          "value": "#a50e0e"
+        },
+        {
+          "name": "Bad Bright",
+          "value": "#fce8e8"
+        },
+        {
+          "name": "Bad Dim",
+          "value": "#3b2d30"
+        },
+        {
+          "name": "Bad Glare",
+          "value": "#ffe9e8"
+        },
+        {
+          "name": "Update",
+          "value": "#3740ff"
+        },
+        {
+          "name": "Update Glare",
+          "value": "#9da2ff"
+        },
+        {
+          "name": "Update Bright",
+          "value": "#f8faff"
+        },
+        {
+          "name": "Update Dim",
+          "value": "#2c333f"
+        }
+      ]
+    },
+    {
+      "group": "Shades",
+      "items": [
+        {
+          "name": "Dark",
+          "value": "#191919"
+        },
+        {
+          "name": "Dim",
+          "value": "#202124"
+        },
+        {
+          "name": "Charcoal",
+          "value": "#303136"
+        },
+        {
+          "name": "Gray",
+          "value": "#585b63"
+        },
+        {
+          "name": "Gray Bright",
+          "value": "#a5a7af"
+        },
+        {
+          "name": "Gray Glare",
+          "value": "#d2d3d7"
+        },
+        {
+          "name": "Light",
+          "value": "#f8f9fa"
+        },
+        {
+          "name": "Light Bright",
+          "value": "#ffffff"
+        }
+      ]
+    },
+    {
+      "group": "Backgrounds",
+      "items": [
+        {
+          "name": "Checkbox",
+          "value": "data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23191919' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Checkbox Checked",
+          "value": "data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%233740ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM16 16H2V2H16V16ZM15 6L13.6 4.6L7 11.2L4.4 8.6L3 10L7 14L15 6Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Checkbox Dark",
+          "value": "data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23f6f6f7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Checkbox Dark Checked",
+          "value": "data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%239da2ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM16 16H2V2H16V16ZM15 6L13.6 4.6L7 11.2L4.4 8.6L3 10L7 14L15 6Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Radio",
+          "value": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23191919' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Radio Checked",
+          "value": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%233740ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Radio Dark",
+          "value": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23f6f6f7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' /%3E%3C/svg%3E"
+        },
+        {
+          "name": "Radio Dark Checked",
+          "value": "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%239da2ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "group": "Code",
+      "items": [
+        {
+          "name": "Primary",
+          "value": "#183691"
+        },
+        {
+          "name": "Primary Glare",
+          "value": "#007aa2"
+        },
+        {
+          "name": "Primary Bright",
+          "value": "#4dd3ff"
+        },
+        {
+          "name": "Secondary",
+          "value": "#a71d5d"
+        },
+        {
+          "name": "Secondary Glare",
+          "value": "#d22575"
+        },
+        {
+          "name": "Secondary Bright",
+          "value": "#e776aa"
+        },
+        {
+          "name": "Tertiary",
+          "value": "#9f1c59"
+        },
+        {
+          "name": "Tertiary Glare",
+          "value": "#ca2471"
+        },
+        {
+          "name": "Tertiary Bright",
+          "value": "#e3609d"
+        },
+        {
+          "name": "Quaternary",
+          "value": "#385d34"
+        },
+        {
+          "name": "Quaternary Glare",
+          "value": "#52894c"
+        },
+        {
+          "name": "Quaternary Bright",
+          "value": "#9cc598"
+        }
+      ]
+    },
+    {
+      "group": "Highlights",
+      "items": [
+        {
+          "name": "Magenta",
+          "value": "#ff00b8"
+        },
+        {
+          "name": "Green",
+          "value": "#128500"
+        },
+        {
+          "name": "Purple",
+          "value": "#7600ae"
+        }
+      ]
+    }
+  ],
+  "textSizes": [
+    {
+      "name": "Base",
+      "min": 16,
+      "max": 16,
+      "unit": "px"
+    },
+    {
+      "name": "Size 0",
+      "min": 12,
+      "max": 14,
+      "unit": "px"
+    },
+    {
+      "name": "Size 1",
+      "min": 16,
+      "max": 18,
+      "unit": "px"
+    },
+    {
+      "name": "Size 2",
+      "min": 18,
+      "max": 20,
+      "unit": "px"
+    },
+    {
+      "name": "Size 3",
+      "min": 20,
+      "max": 28,
+      "unit": "px"
+    },
+    {
+      "name": "Size 4",
+      "min": 24,
+      "max": 36,
+      "unit": "px"
+    },
+    {
+      "name": "Size 5",
+      "min": 28,
+      "max": 48,
+      "unit": "px"
+    },
+    {
+      "name": "Size 6",
+      "min": 36,
+      "max": 60,
+      "unit": "px"
+    }
+  ],
+  "spacing": [
+    {
+      "name": "Base",
+      "min": 16,
+      "max": 16,
+      "unit": "px"
+    },
+    {
+      "name": "Size 1",
+      "min": 22,
+      "max": 32,
+      "unit": "px"
+    },
+    {
+      "name": "Size 2",
+      "min": 38,
+      "max": 60,
+      "unit": "px"
+    },
+    {
+      "name": "Size 3",
+      "min": 60,
+      "max": 90,
+      "unit": "px"
+    },
+    {
+      "name": "Size 4",
+      "min": 100,
+      "max": 150,
+      "unit": "px"
+    }
+  ],
+  "fonts": [
+    {
+      "name": "Base",
+      "description": "System fonts - main content.",
+      "values": ["Segoe UI", "system-ui", "-apple-system", "sans-serif"]
+    },
+    {
+      "name": "Brand",
+      "description": "Google Sans - headings.",
+      "values": [
+        "Google Sans",
+        "Segoe UI",
+        "system-ui",
+        "-apple-system",
+        "sans-serif"
+      ]
+    },
+    {
+      "name": "Mono",
+      "description": "Code samples etc.",
+      "values": [
+        "SFMono-Regular",
+        "Consolas",
+        "Liberation Mono",
+        "Menlo",
+        "monospace"
+      ]
+    }
+  ],
+  "fontWeights": [
+    {
+      "name": "Regular",
+      "value": 400
+    },
+    {
+      "name": "Medium",
+      "value": 500
+    },
+    {
+      "name": "Bold",
+      "value": 700
+    }
+  ],
+  "radius": [
+    {
+      "name": "Base",
+      "value": "3px"
+    },
+    {
+      "name": "Large",
+      "value": "10px"
+    }
+  ],
+  "transitions": [
+    {
+      "name": "Base",
+      "value": "250ms ease"
+    },
+    {
+      "name": "Base duration",
+      "value": "250ms"
+    },
+    {
+      "name": "Movement",
+      "value": "200ms linear"
+    },
+    {
+      "name": "Movement Duration",
+      "value": "200ms"
+    },
+    {
+      "name": "Fade",
+      "value": "400ms ease"
+    },
+    {
+      "name": "Fade Duration",
+      "value": "400ms"
+    },
+    {
+      "name": "Bounce",
+      "value": "500ms cubic-bezier(.45,.05,.22,1.3)"
+    }
+  ]
+}
diff --git a/src/site/_data/event.js b/src/site/_data/event.js
index d75fb1fef90..85c1a4a482d 100644
--- a/src/site/_data/event.js
+++ b/src/site/_data/event.js
@@ -155,7 +155,7 @@ const days = [
         blurb:
           "Let's take a look at the latest and greatest features in Chrome's DevTools!",
         abstract: [
-          "Let's take a look at the latest and greatest features in Chrome's DevTools. We'll cover how you can use the Performance Panel to assess your page load metrics, how you can locate issues with your pages, debug your Web Assembly, and even emulate color vision deficiencies.",
+          "Let's take a look at the latest and greatest features in Chrome's DevTools. We'll cover how you can use the Performance Panel to assess your page load metrics, how you can locate issues with your pages, debug your WebAssembly, and even emulate color vision deficiencies.",
         ],
         videoId: '6yrJZHqJe2k',
       },
@@ -183,9 +183,9 @@ const days = [
         speaker: 'andreban',
         title: 'Shipping a PWA as an Android app',
         blurb:
-          'In this session you will learn about Bubblewrap, a new tool that developers can use to transform their PWAs into an Android application, without having to write native code or learn native tooling.',
+          'In this session you will learn about Bubblewrap, a new tool that developers can use to transform their PWAs into an Android application, without having to learn Android code or tooling.',
         abstract: [
-          'Increase the reach of your Progressive Web App by using it as an Android app. In this session you will learn about Bubblewrap, a new tool that developers can use to transform their PWAs into an Android application, without having to write native code or learn native tooling. You’ll watch us to transform an existing PWA into a native app from start to finish, in just a few minutes.',
+          'Increase the reach of your Progressive Web App by using it as an Android app. In this session you will learn about Bubblewrap, a new tool that developers can use to transform their PWAs into an Android application, without having to learn Android code or tooling. You’ll watch us to transform an existing PWA into an Android app from start to finish, in just a few minutes.',
         ],
         videoId: 'QJlbMfW3jPc',
       },
@@ -203,10 +203,10 @@ const days = [
         speaker: 'thomassteiner',
         title: "Progressively Enhancing Like It's 2003",
         blurb:
-          'In this talk, we will show how new and upcoming browser capabilities can progressively enhance an application so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support capabilities like native file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, sharing features, and many more.',
+          'In this talk, we will show how new and upcoming browser capabilities can progressively enhance an application so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support capabilities like file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, sharing features, and many more.',
         abstract: [
           'Back in March 2003, Nick Finck and Steve Champeon stunned the web design world with the concept of progressive enhancement, a strategy for web design that emphasizes core webpage content first, and that then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content. While in 2003, progressive enhancement was about using at the time modern CSS features, unobtrusive JavaScript, and even Scalable Vector Graphics, progressive enhancement in 2020 is about using modern browser capabilities.',
-          'In this talk, we will show at the example of a greeting card web application how new and upcoming browser capabilities can progressively enhance this application so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support capabilities like native file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, sharing features, and many more.',
+          'In this talk, we will show at the example of a greeting card web application how new and upcoming browser capabilities can progressively enhance this application so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support capabilities like file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, sharing features, and many more.',
           'After the talk, developers will have a solid understanding of how to progressively enhance their web applications with new browser features, all while not putting a download burden on the subset of their users that happen to be on incompatible browsers, and, most importantly, while not excluding them from using the web application in the first place.',
         ],
         videoId: 'NXCT3htg9nk',
@@ -227,7 +227,7 @@ const days = [
         blurb:
           'In this session we’ll introduce new features for installed PWAs, teach approaches for building better PWAs, and answer frequent developer questions about the design and future of PWAs.',
         abstract: [
-          'In this session we’ll introduce new features for installed PWAs, including capabilities previously reserved for native apps. You’ll learn approaches for building better PWAs, including Play apps that use PWAs. Finally, we’ll answer frequently asked developer questions about the design and future of PWAs.',
+          'In this session we’ll introduce new features for installed PWAs, including capabilities previously reserved for iOS/Android apps. You’ll learn approaches for building better PWAs, including Play apps that use PWAs. Finally, we’ll answer frequently asked developer questions about the design and future of PWAs.',
         ],
         videoId: 'M0wPM8B6z5c',
       },
@@ -418,7 +418,7 @@ for (const day of days) {
   day.date = new Date(day.when);
 }
 
-// TODO: Dummy data for testing, replace with real data once available.
+// TODO: Placeholder data for testing, replace with real data once available.
 // prettier-ignore
 const communityEvents = {
   'North America': [
@@ -561,7 +561,7 @@ const qAndAs = [
   {
     category: 'Web Vitals',
     question: '#webdevLIVE how do you get field values and how do you get lab values for core web vitals?',
-    answer: 'For field data you can look at <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome UX Report</a> data, available in tools like <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>, <a href="https://web.dev/chrome-ux-report-data-studio-dashboard/">DataStudio</a>  and the <a href="https://developers.google.com/web/tools/chrome-user-experience-report/api/reference">CrUX API</a>. For lab data, you can use Lighthouse (either in the <a href="https://developers.google.com/web/tools/lighthouse#devtools">Lighthouse panel in DevTools</a>, via the <a href="https://developers.google.com/web/tools/lighthouse#cli">CLI</a>, or in <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>).',
+    answer: 'For field data you can look at <a href="https://developer.chrome.com/docs/crux/">Chrome UX Report</a> data, available in tools like <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>, <a href="https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/">DataStudio</a>  and the <a href="https://developer.chrome.com/docs/crux/api/">CrUX API</a>. For lab data, you can use Lighthouse (either in the <a href="https://developers.google.com/web/tools/lighthouse#devtools">Lighthouse panel in DevTools</a>, via the <a href="https://developers.google.com/web/tools/lighthouse#cli">CLI</a>, or in <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>).',
   },
   {
     category: 'Web Vitals',
@@ -635,7 +635,7 @@ const qAndAs = [
   },
   {
     category: 'PWA',
-    question: 'Can we call native functionality from PWAs?',
+    question: 'Can we call OS functionality from PWAs?',
     answer: 'No, developers only have access to the capabilities of the browser, but we’re working to add new capabilities with our  capabilities project.',
   },
   {
diff --git a/src/site/_data/helpers.js b/src/site/_data/helpers.js
new file mode 100644
index 00000000000..ee26c55a782
--- /dev/null
+++ b/src/site/_data/helpers.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {hashForProd} = require('./lib/hash');
+const path = require('path');
+
+module.exports = {
+  hashForProd,
+  values: Object.values,
+  join: path.join,
+};
diff --git a/src/site/_data/i18n/authors.yml b/src/site/_data/i18n/authors.yml
new file mode 100644
index 00000000000..55854684b50
--- /dev/null
+++ b/src/site/_data/i18n/authors.yml
@@ -0,0 +1,4558 @@
+danristic:
+  title:
+    en: Dan Ristic
+  description:
+    en: Developer at PubNub
+
+gman:
+  title:
+    en: Gregg Tavares
+  description:
+    en: Software Engineer at Google
+
+dominiccooney:
+  title:
+    en: Dominic Cooney
+  description:
+    en: Software Engineer at Google
+
+zgoddard:
+  title:
+    en: Z Goddard
+  description:
+    en: Game Developer at Gradient Studios, Inc.
+
+adamzielinski:
+  title:
+    en: Adam Zieliński
+  description:
+    en: WordPress core committer at Automattic
+
+tomwiltzius:
+  title:
+    en: Tom Wiltzius
+  description:
+    en: Chrome Product Manager at Google
+
+coltmcanlis:
+  title:
+    en: Colt McAnlis
+  description:
+    en: Developer Relations at Google
+
+marcinwichary:
+  title:
+    en: Marcin Wichary
+  description:
+    en: Sr. User Experience Designer at Google
+
+razvancaliman:
+  title:
+    en: Razvan Caliman
+  description:
+    en: Web Platform Adobe
+
+christiancantrell:
+  title:
+    en: Christian Cantrell
+  description:
+    en: Web Platform Adobe
+
+jameswilliams:
+  title:
+    en: James Williams
+  description:
+    en: Independent Developer
+
+joemarini:
+  title:
+    en: Joe Marini
+  description:
+    en: Chrome Developer Advocate at Google
+
+loreenalee:
+  title:
+    en: Loreena Lee
+  description:
+    en: Software Engineer at Google
+
+malteubl:
+  title:
+    en: Malte Ubl
+  description:
+    en: Customer Solutions Engineering at Google
+
+raymondcamden:
+  title:
+    en: Raymond Camden
+  description:
+    en: Developer Relations at Adobe
+
+brianford:
+  title:
+    en: Brian Ford
+  description:
+    en: Software Engineer Intern at Google
+
+tjvantoll:
+  title:
+    en: TJ VanToll
+  description:
+    en: Web Develope at Liquid Web
+
+bradfrost:
+  title:
+    en: Brian Ford
+  description:
+    en: Front-end designer at R/GA
+
+lillithompson:
+  title:
+    en: Lilli Thompson
+  description:
+    en: Game Developer
+
+saqoosha:
+  title:
+    en: Saqoosha
+  description:
+    en: Programmer at Katamari Inc.
+
+adriangould:
+  title:
+    en: Adrian Gould
+  description:
+    en: Programmer, Designer at Pagoda Software
+
+adammark:
+  title:
+    en: Adam Mark
+  description:
+    en: Programmer, Designer at Pagoda Software
+
+gskinnerdotcom:
+  title:
+    en: Sean Middleditch
+  description:
+    en: Agency
+
+seanmiddleditch:
+  title:
+    en: Sean Middleditch
+  description:
+    en: Developer at Subsonic LLC
+
+justingitlin:
+  title:
+    en: Justin Gitlin
+  description:
+    en: Agency/Developer at Legwork/Mode Set
+
+activetheory:
+  title:
+    en: Active Theory
+  description:
+    en: Creative Development
+
+luigimontanez:
+  title:
+    en: Luigi Montanez
+  description:
+    en: Software Developer at Sunlight Labs
+
+michaeldewey:
+  title:
+    en: Mike Dewey
+  description:
+    en: Muro at deviantART
+
+oskareriksson:
+  title:
+    en: Oskar Eriksson
+  description:
+    en: Technical Director at Dinahmoe
+
+fredchasen:
+  title:
+    en: Fred Chasen
+  description:
+    en: Lead Developer at Tool Of North America
+
+plan8:
+  title:
+    en: Plan 8
+  description:
+    en: Audio Agency
+
+unit9com:
+  title:
+    en: unit9 com
+  description:
+    en: Production Company
+
+geoffblair:
+  title:
+    en: Geoff Blair
+  description:
+    en: Programmer, Designer at Lost Decade Games
+
+matthackett:
+  title:
+    en: Matt Hackett
+  description:
+    en: Programmer, Designer at Lost Decade Games
+
+christophergammon:
+  title:
+    en: Christopher Gammon
+  description:
+    en: Web Platform Adobe
+
+ericrk:
+  title:
+    en: Eric Karl
+  description:
+    en: Developer at Munkadoo Games LLC
+
+thomasreynolds:
+  title:
+    en: Thomas Reynolds
+  description:
+    en: Agency Instrument
+
+einaroberg:
+  title:
+    en: Einar Öberg
+  description:
+    en: Developer at North Kingdom
+
+danielisaksson:
+  title:
+    en: Daniel Isaksson
+  description:
+    en: Technical Director at North Kingdom
+
+michaelchang:
+  title:
+    en: Michael Chang
+  description:
+    en: Developer
+
+hakimelhattab:
+  title:
+    en: Hakim El Hattab
+  description:
+    en: Senior Interactive Developer
+
+hanseklund:
+  title:
+    en: Hans Eklund
+  description:
+    en: Technical Director at North Kingdom
+
+derekdetweiler:
+  title:
+    en: Derek Detweiler
+  description:
+    en: Game Designer at Gopherwood Studios
+
+johnmccutchan:
+  title:
+    en: John McCutchan
+  description:
+    en: Developer Relations at Google
+
+wesleyhales:
+  title:
+    en: Wesley Hales
+  description:
+    en: Senior Developer at Red Hat
+
+mahemoff:
+  title:
+    en: Michael Mahemoff
+  description:
+    en: Freelance Web Developer
+
+taligarsiel:
+  title:
+    en: Tali Garsiel
+  description:
+    en: Developer at Incapsula
+
+paulirish:
+  title:
+    en: Paul Irish
+  description:
+    en: Developer Relations at Google
+
+mdeal:
+  title:
+    en: Michael Deal
+  description:
+    en: New Product Development at Orange Honey
+
+smus:
+  title:
+    en: Boris Smus
+  description:
+    en: Google Developer Relations
+
+danielmoore:
+  title:
+    en: Daniel X. Moore
+  description:
+    en: Pixel Relations at STRd6
+
+davidtong:
+  title:
+    en: David Tong
+  description:
+    en: Box.net
+
+jeremychone:
+  title:
+    en: Jeremy Chone
+  description:
+    en: Developer
+
+ernestd:
+  title:
+    en: Ernest Delgado
+  description:
+    en: Google Developer Relations
+
+chriswilson:
+  title:
+    en: Chris Wilson
+  description:
+    en: Google Developer Relations
+
+sethladd:
+  title:
+    en: Seth Ladd
+  description:
+    en: Seth is a contributor to web.dev
+
+mustafa:
+  title:
+    en: Mustafa Kurtuldu
+  description:
+    en: Design Advocate at Google • Material Design, UX & Design Sprints
+
+mco:
+  title:
+    en: Marc Cohen
+  description:
+    en: Eng Manager, Web Developer Relations
+
+iamakulov:
+  title:
+    en: Ivan Akulov
+  description:
+    en: Contracting software engineer · Blogging, open source, performance, UX
+
+pbakaus:
+  title:
+    en: Paul Bakaus
+  description:
+    en: Open Web Developer Advocate at Google • Tools, Performance, Animation, UX
+
+paulkinlan:
+  title:
+    en: Paul Kinlan
+  description:
+    en: Developer Advocate
+  bio:
+    en:
+      - I lead the Chrome Developer Relations team at Google.
+      - We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
+      - Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
+
+dalecurtis:
+  title:
+    en: Dale Curtis
+  description:
+    en: Dale is a Senior Software Engineer
+
+mscales:
+  title:
+    en: Mat Scales
+  description:
+    en: Mat is a contributor to web.dev
+
+ewagasperowicz:
+  title:
+    en: Ewa Gasperowicz
+  description:
+    en: Ewa is a contributor to web.dev
+
+alexdanilo:
+  title:
+    en: Alex Danilo
+  description:
+    en: Alex is a contributor to web.dev
+
+taylorsavage:
+  title:
+    en: Taylor Savage
+  description:
+    en: Taylor is a PM on the Chrome Team, focusing on Web Components and Polymer.
+
+umarhansa:
+  title:
+    en: Umar Hansa
+  description:
+    en: Umar is a front-end web developer
+
+ilmariheikkinen:
+  title:
+    en: Ilmari Heikkinen
+  description:
+    en: Ilmari is a contributor to web.dev
+
+mikewest:
+  title:
+    en: Mike West
+  description:
+    en: Mike is a contributor to web.dev
+
+samthorogood:
+  title:
+    en: Sam Thorogood
+  description:
+    en: Evangelises Chrome and the mobile web in the Developer Relations team at Google.
+
+aliceboxhall:
+  title:
+    en: Alice Boxhall
+  description:
+    en: Alice is a contributor to web.dev
+
+eligrey:
+  title:
+    en: Eli Grey
+  description:
+    en: Eli is a Developer
+
+jakearchibald:
+  title:
+    en: Jake Archibald
+    es: Jake Archibald
+    ja: Jake Archibald
+    ko: Jake Archibald
+    pt: Jake Archibald
+    ru: Jake Archibald
+    zh: Jake Archibald
+  description:
+    en: Human boy working on web standards at Google
+    es: Chico humano que trabaja en los estándares de la web en Google
+    ja: Google で Web 標準に取り組むヒューマンボーイ
+    ko: Google에서 웹 표준 작업을 하는 인간적인 청년
+    pt: Garoto humano trabalhando nos padrões da web na empresa Google
+    ru: Разработчик веб-стандартов в компании Google
+    zh: 在 Google 研究网络标准的大男孩
+
+aaronkrajeski:
+  title:
+    en: Aaron Krajeski
+    es: Aaron Krajeski
+    ja: Aaron Krajeski
+    ko: Aaron Krajeski
+    pt: Aaron Krajeski
+    ru: Aaron Krajeski
+    zh: Aaron Krajeski
+  description:
+    en: Overly concerned with glowing rectangles
+    es: Demasiado preocupado por los rectángulos brillantes
+    ja: 四角く光る画面に過度に関心がある人
+    ko: 빛나는 직사각형에 지나치게 관심을 가진 사람
+    pt: Excessivamente preocupado com retângulos brilhantes
+    ru: Проявляет повышенный интерес к светящимся прямоугольникам
+    zh: 全身心研究发光的矩形
+
+felixarntz:
+  title:
+    en: Felix Arntz
+    es: Felix Arntz
+    ja: Felix Arntz
+    ko: Felix Arntz
+    pt: Felix Arntz
+    ru: Felix Arntz
+    zh: Felix Arntz
+  description:
+    en: Developer Programs Engineer at Google, contributing to the CMS ecosystem
+    es: Ingeniero de programas para desarrolladores en Google, contribuyendo al ecosistema CMS
+    ja: CMS エコシステムに貢献する Google の開発者プログラムエンジニア
+    ko: CMS 생태계에 기여하는 Google의 개발자 프로그램 엔지니어
+    pt: Engenheiro de programas de desenvolvedor no Google, contribuindo para o ecossistema CMS
+    ru: Developer Programs Engineer в компании Google. Участвует в развитии экосистемы CMS
+    zh: Google 的开发者计划工程师，也是 CMS 生态系统的贡献者
+
+amandabaker:
+  title:
+    en: Amanda Baker
+    es: Amanda Baker
+    ja: Amanda Baker
+    ko: Amanda Baker
+    pt: Amanda Baker
+    ru: Amanda Baker
+    zh: Amanda Baker
+  description:
+    en: Software Engineer on the Microsoft Edge team
+    es: Ingeniero de software en el equipo de Microsoft Edge
+    ja: Microsoft Edge チームに所属するソフトウェアエンジニア
+    ko: Microsoft Edge 팀의 소프트웨어 엔지니어
+    pt: Engenheira de software na equipe Microsoft Edge
+    ru: Инженер-программист в команде Microsoft Edge
+    zh: Microsoft Edge 团队的软件工程师
+
+kaycebasques:
+  title:
+    en: Kayce Basques
+    es: Kayce Basques
+    ja: Kayce Basques
+    ko: Kayce Basques
+    pt: Kayce Basques
+    ru: Kayce Basques
+    zh: Kayce Basques
+  description:
+    en: Technical Writer, Chrome DevTools & Lighthouse
+    es: Escritor técnico, Chrome DevTools y Lighthouse
+    ja: Chrome DevTools や Lighthouse を対象としたテクニカルライター
+    ko: 테크니컬라이터, Chrome DevTools 및 Lighthouse
+    pt: Escritora técnica, Chrome DevTools & Lighthouse
+    ru: Технический писатель, специализирующийся на Chrome DevTools и Lighthouse
+    zh: Chrome DevTools 与 Lighthouse 技术撰稿人
+
+johyphenel:
+  title:
+    en: Jo-el van Bergen
+    es: Jo-el van Bergen
+    ja: Jo-el van Bergen
+    ko: Jo-el van Bergen
+    pt: Jo-el van Bergen
+    ru: Jo-el van Bergen
+    zh: Jo-el van Bergen
+  description:
+    en: Our latest news, updates, and stories by Jo-el van Bergen.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Jo-el van Bergen.
+    ja: Jo-el van Bergen による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Jo-el van Bergen의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Jo-el van Bergen.
+    ru: Последние новости и статьи от Jo-el van Bergen.
+    zh: Jo-el van Bergen 撰写我们的最新资讯、动态和故事。
+
+sgomes:
+  title:
+    en: Sérgio Gomes
+    es: Sérgio Gomes
+    ja: Sérgio Gomes
+    ko: Sérgio Gomes
+    pt: Sérgio Gomes
+    ru: Sérgio Gomes
+    zh: Sérgio Gomes
+  description:
+    en: Our latest news, updates, and stories by Sérgio Gomes.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Sérgio Gomes.
+    ja: Sérgio Gomes による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Sérgio Gomes의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Sérgio Gomes.
+    ru: Последние новости и статьи от Sérgio Gomes.
+    zh: Sérgio Gomes 撰写我们的最新资讯、动态和故事。
+
+beaufortfrancois:
+  title:
+    en: François Beaufort
+    es: François Beaufort
+    ja: François Beaufort
+    ko: François Beaufort
+    pt: François Beaufort
+    ru: François Beaufort
+    zh: François Beaufort
+  description:
+    en: Dives into Chromium source code
+    es: Se sumerge en el código fuente de Chromium
+    ja: Chromium のソースコードを深掘りする人
+    ko: Chromium 소스 코드 심층 해부
+    pt: Mergulha no código-fonte do Chromium
+    ru: Исследователь исходного кода Chromium
+    zh: 潜心研究 Chromium 源代码
+
+cwallez:
+  title:
+    en: Corentin Wallez
+    es: Corentin Wallez
+    ja: Corentin Wallez
+    ko: Corentin Wallez
+    pt: Corentin Wallez
+    ru: Corentin Wallez
+    zh: Corentin Wallez
+  description:
+    en: Graphics plumber at Google
+    es: Técnico de gráficos en Google
+    ja: Google のグラフィクス配管工
+    ko: Google의 그래픽 배관공
+    pt: Encanador gráfico na empresa Google
+    ru: Графический инженер в компании Google
+    zh: Google 的图形“水管工”
+
+mathiasbynens:
+  title:
+    en: Mathias Bynens
+    es: Mathias Bynens
+    ja: Mathias Bynens
+    ko: Mathias Bynens
+    pt: Mathias Bynens
+    ru: Mathias Bynens
+    zh: Mathias Bynens
+  description:
+    en: V8 JavaScript whisperer
+    es: Escritor sobre JavaScript V8
+    ja: V8 JavaScript エンジンについてささやく人
+    ko: V8 JavaScript 가이드
+    pt: Encantador do V8 JavaScript
+    ru: Эксперт по вопросам V8 JavaScript
+    zh: V8 JavaScript 网络标准爱好者
+
+hongchanchoi:
+  title:
+    en: Hongchan Choi
+    es: Hongchan Choi
+    ja: Hongchan Choi
+    ko: Hongchan Choi
+    pt: Hongchan Choi
+    ru: Hongchan Choi
+    zh: Hongchan Choi
+  description:
+    en: Software Engineer working on Chromium
+    es: Ingeniero de software que trabaja en Chromium
+    ja: Chromium の開発に取り組むソフトウェアエンジニア
+    ko: Chromium 작업을 하는 소프트웨어 엔지니어
+    pt: Engenheiro de software trabalhando no Chromium
+    ru: Инженер-программист, работающий над Chromium
+    zh: 研究 Chromium 的软件工程师
+
+robdodson:
+  title:
+    en: Rob Dodson
+    es: Rob Dodson
+    ja: Rob Dodson
+    ko: Rob Dodson
+    pt: Rob Dodson
+    ru: Rob Dodson
+    zh: Rob Dodson
+  description:
+    en: Googler working on web stuff. I help build web.dev!
+    es: Empleado de Google que trabaja en la web. ¡Ayuda a construir web.dev!
+    ja: Web 関連技術に取り組む Googler。web.dev の構築をお手伝いします！
+    ko: 웹 작업을 하는 구글러입니다. web.dev 구축을 도와드립니다!
+    pt: Googler que trabalha com coisas da web. Eu ajudo a construir a web.dev!
+    ru: Разработчик веб-технологий в компании Google. Участвует в работе над web.dev.
+    zh: 研究网络相关内容的 Google 员工。我帮助搭建了 web.dev！
+
+samdutton:
+  title:
+    en: Sam Dutton
+    es: Sam Dutton
+    ja: Sam Dutton
+    ko: Sam Dutton
+    pt: Sam Dutton
+    ru: Sam Dutton
+    zh: Sam Dutton
+  description:
+    en: Sam is a Developer Advocate
+    es: Sam es un Desarrollador partidario
+    ja: Sam は Developer Advocate です
+    ko: Sam은 개발자 애드버킷입니다.
+    pt: Sam é um Developer Advocate
+    ru: Сэм — Developer Advocate
+    zh: Sam 是一名开发技术推广工程师
+
+arthurevans:
+  title:
+    en: Arthur Evans
+    es: Arthur Evans
+    ja: Arthur Evans
+    ko: Arthur Evans
+    pt: Arthur Evans
+    ru: Arthur Evans
+    zh: Arthur Evans
+  description:
+    en: Arthur is a Tech Writer
+    es: Arthur es un escritor técnico
+    ja: Arthur はテクニカルライターです
+    ko: Arthur는 테크니컬라이터입니다.
+    pt: Arthur é um escritor técnico
+    ru: Артур — технический писатель
+    zh: Arthur 是一名技术撰稿人
+
+exterkamp:
+  title:
+    en: Shane Exterkamp
+    es: Shane Exterkamp
+    ja: Shane Exterkamp
+    ko: Shane Exterkamp
+    pt: Shane Exterkamp
+    ru: Shane Exterkamp
+    zh: Shane Exterkamp
+  description:
+    en: Shane is a SWE on Lighthouse
+    es: Shane es un Ingeniero de software en Lighthouse
+    ja: Shane は Lighthouse の開発に取り組むソフトウェアエンジニアです
+    ko: Shane은 Lighthouse의 SWE입니다.
+    pt: Shane é engenheiro de software na empresa Lighthouse
+    ru: Шейн — инженер-программист в команде Lighthouse
+    zh: Shane 是一名负责 Lighthouse 的软件工程师
+
+sfourault:
+  title:
+    en: Sébastien Fourault
+    es: Sébastien Fourault
+    ja: Sébastien Fourault
+    ko: Sébastien Fourault
+    pt: Sébastien Fourault
+    ru: Sébastien Fourault
+    zh: Sébastien Fourault
+  description:
+    en: Our latest news, updates, and stories by Sébastien Fourault.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Sébastien Fourault.
+    ja: Sébastien Fourault による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Sébastien Fourault의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Sébastien Fourault.
+    ru: Последние новости и статьи от Sébastien Fourault.
+    zh: Sébastien Fourault 撰写我们的最新资讯、动态和故事。
+
+tomgreenaway:
+  title:
+    en: Tom Greenaway
+    es: Tom Greenaway
+    ja: Tom Greenaway
+    ko: Tom Greenaway
+    pt: Tom Greenaway
+    ru: Tom Greenaway
+    zh: Tom Greenaway
+  description:
+    en: Tom is the Games Lead for the Chrome & Web Developer Relations team at Google
+    es: Tom es el Jefe de juegos en el Equipo de relaciones para desarrolladores web y de Chrome
+    ja: Tom は Google の Chrome & Web Developer Relations チームのゲームリーダーです。
+    ko: Tom은 Google의 Chrome 및 웹 개발자 관계 팀에서 게임 책임자를 맡고 있습니다.
+    pt: Tom é o líder de jogos na equipe Chrome & Web Developer Relations na empresa Google
+    ru: Том — руководитель по вопросам веб-игр в команде, отвечающей за разработку Chrome и взаимодействие с веб-разработчиками в компании Google
+    zh: Tom 是 Google 的 Chrome 和网站开发者关系团队的游戏主管
+
+ilyagrigorik:
+  title:
+    en: Ilya Grigorik
+    es: Ilya Grigorik
+    ja: Ilya Grigorik
+    ko: Ilya Grigorik
+    pt: Ilya Grigorik
+    ru: Ilya Grigorik
+    zh: Ilya Grigorik
+  description:
+    en: Our latest news, updates, and stories by Ilya Grigorik.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Ilya Grigorik.
+    ja: Ilya Grigorik による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Ilya Grigorik의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Ilya Grigorik.
+    ru: Последние новости и статьи от Ilya Grigorik.
+    zh: Ilya Grigorik 撰写我们的最新资讯、动态和故事。
+
+yigu:
+  title:
+    en: Yi Gu
+    es: Yi Gu
+    ja: Yi Gu
+    ko: Yi Gu
+    pt: Yi Gu
+    ru: Yi Gu
+    zh: Yi Gu
+  description:
+    en: Software Engineer working on Chromium
+    es: Ingeniero de software que trabaja en Chromium
+    ja: Chromium の開発に取り組むソフトウェアエンジニア
+    ko: Chromium 작업을 하는 소프트웨어 엔지니어
+    pt: Engenheiro de software trabalhando no Chromium
+    ru: Инженер-программист, работающий над Chromium
+    zh: 研究 Chromium 的软件工程师
+
+alsan:
+  title:
+    en: Kaan Alsan
+    es: Kaan Alsan
+    ja: Kaan Alsan
+    ko: Kaan Alsan
+    pt: Kaan Alsan
+    ru: Kaan Alsan
+    zh: Kaan Alsan
+  description:
+    en: Former Software Engineer Intern working on Chromium
+    es: Experimentado pasante como Ingeniero de software que trabaja en Chromium
+    ja: Chromium の開発に取り組む元ソフトウェアエンジニアインターン
+    ko: Chromium 작업을 하는 이전 소프트웨어 엔지니어 인턴
+    pt: Ex-estagiário de engenharia de software trabalhando no Chromium
+    ru: Инженер-программист, участвовал в разработке Chromium в качестве стажера
+    zh: 研究 Chromium 的前软件工程师实习生
+
+katiehempenius:
+  title:
+    en: Katie Hempenius
+    es: Katie Hempenius
+    ja: Katie Hempenius
+    ko: Katie Hempenius
+    pt: Katie Hempenius
+    ru: Katie Hempenius
+    zh: Katie Hempenius
+  description:
+    en: Our latest news, updates, and stories by Katie Hempenius.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Katie Hempenius.
+    ja: Katie Hempenius による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Katie Hempenius의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Katie Hempenius.
+    ru: Последние новости и статьи от Katie Hempenius.
+    zh: Katie Hempenius 撰写我们的最新资讯、动态和故事。
+
+mihajlija:
+  title:
+    en: Milica Mihajlija
+    es: Milica Mihajlija
+    ja: Milica Mihajlija
+    ko: Milica Mihajlija
+    pt: Milica Mihajlija
+    ru: Milica Mihajlija
+    zh: Milica Mihajlija
+  description:
+    en: Our latest news, updates, and stories by Milica Mihajlija.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Milica Mihajlija.
+    ja: Milica Mihajlija による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Milica Mihajlija의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Milica Mihajlija.
+    ru: Последние новости и статьи от Milica Mihajlija.
+    zh: Milica Mihajlija 撰写我们的最新资讯、动态和故事。
+
+mustafakurtuldu:
+  title:
+    en: Mustafa Kurtuldu
+    es: Mustafa Kurtuldu
+    ja: Mustafa Kurtuldu
+    ko: Mustafa Kurtuldu
+    pt: Mustafa Kurtuldu
+    ru: Mustafa Kurtuldu
+    zh: Mustafa Kurtuldu
+  description:
+    en: Our latest news, updates, and stories by Mustafa Kurtuldu.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Mustafa Kurtuldu.
+    ja: Mustafa Kurtuldu による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Mustafa Kurtuldu의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Mustafa Kurtuldu.
+    ru: Последние новости и статьи от Mustafa Kurtuldu.
+    zh: Mustafa Kurtuldu 撰写我们的最新资讯、动态和故事。
+
+agektmr:
+  title:
+    en: Eiji Kitamura
+    es: Eiji Kitamura
+    ja: えーじ
+    ko: Eiji Kitamura
+    pt: Eiji Kitamura
+    ru: Eiji Kitamura
+    zh: Eiji Kitamura
+  description:
+    en: Developer Advocate in Tokyo
+    es: Desarrollador partidario en Tokio
+    ja: 東京を拠点に活動するデベロッパー アドボケート
+    ko: 도쿄의 개발자 애드버킷
+    pt: Developer Advocate em Tóquio
+    ru: Developer Advocate в Токио
+    zh: 东京的开发技术推广工程师
+
+kosamari:
+  title:
+    en: Mariko Kosaka
+    es: Mariko Kosaka
+    ja: Mariko Kosaka
+    ko: Mariko Kosaka
+    pt: Mariko Kosaka
+    ru: Mariko Kosaka
+    zh: Mariko Kosaka
+  description:
+    en: Mariko is a drawsplainer
+    es: Mariko es una persona que explica cosas mediante dibujos
+    ja: 'Mariko はドロウスプレイナー (drawsplainer: イラストで説明する人) です'
+    ko: Mariko는 드로스플레이너입니다.
+    pt: Mariko é uma pessoa que explica coisas usando desenhos
+    ru: Марико — иллюстратор
+    zh: Mariko 是一名思维导图画师
+
+petelepage:
+  title:
+    en: Pete LePage
+    es: Pete LePage
+    ja: Pete LePage
+    ko: Pete LePage
+    pt: Pete LePage
+    ru: Pete LePage
+    zh: Pete LePage
+  description:
+    en: Developer Advocate on the web team at Google, taking the sharp edges off new stuff & helping make the web better for developers! (he/him)
+    es: Desarrollador partidario en el equipo web de Google, su objetivo es eliminar las imperfecciones de los productos nuevos y ayuda a mejorar la web para los desarrolladores. (él)
+    ja: Google の Web チームの Developer Advocate であり、新しい技術から尖った部分を取り除き、Web を開発者にとってより良いものにするサポートをしています (私については He/Him を使って言及してください)。
+    ko: Google 웹 팀의 개발자 애드버킷으로, 새로운 기능을 최대한 활용하고 개발자를 위해 더 나은 웹을 만드는 데 도움을 줍니다! (그가/그를)
+    pt: Developer Advocate na equipe web do Google, removendo as pontas afiadas das novidades e ajudando a deixar a web melhor para os desenvolvedores! (he/him)
+    ru: Developer Advocate в команде разработки веб-технологий компании Google. Доступно рассказывает про новые технологии и помогает облегчить работу веб-разработчикам.
+    zh: Google 网络团队的开发技术推广工程师，致力于打磨新事物的棱角并努力为开发者提供更好的网络环境！（他）
+
+pjmclachlan:
+  title:
+    en: Penny McLachlan
+    es: Penny McLachlan
+    ja: Penny McLachlan
+    ko: Penny McLachlan
+    pt: Penny McLachlan
+    ru: Penny McLachlan
+    zh: Penny McLachlan
+  description:
+    en: Penny is a Product Manager on the Chrome Web Platform team responsible for Chrome permissions, notifications, and progressive web apps.
+    es: Penny es Gerente de productos en el equipo de la plataforma web de Chrome, responsable de los permisos, las notificaciones y las aplicaciones web progresivas de Chrome.
+    ja: Penny は Chrome Web プラットフォームチームのプロダクトマネージャーとして Chrome のアクセス権、通知、プログレッシブウェブアプリを担当しています。
+    ko: Penny는 Chrome 권한, 알림 및 프로그레시브 웹 앱을 담당하는 Chrome 웹 플랫폼 팀의 제품 관리자입니다.
+    pt: Penny é gerente de produtos da equipe da plataforma da web do Chrome, responsável pelas permissões, notificações e aplicações web progressivas do Chrome.
+    ru: Пенни — менеджер по продукту в команде веб-платформы Chrome. Она отвечает за поддержку разрешений, уведомлений и прогрессивных веб-приложений в Chrome.
+    zh: Penny 是 Chrome 网络平台团队的产品经理，负责 Chrome 权限、通知和渐进式 Web 应用。
+
+developit:
+  title:
+    en: Jason Miller
+    es: Jason Miller
+    ja: Jason Miller
+    ko: Jason Miller
+    pt: Jason Miller
+    ru: Jason Miller
+    zh: Jason Miller
+  description:
+    en: Jason is a Web DevRel focused on speed and the JS ecosystem.
+    es: Jason es un Web DevRel centrado en la velocidad y en el ecosistema de JS.
+    ja: Jason は、スピードと JS のエコシステムに関心を持つ Web DevRel チームのメンバーです。
+    ko: Jason은 속도와 JS 생태계에 중점을 둔 Web DevRel입니다.
+    pt: Jason é Web DevRel focado na velocidade e no ecossistema JS.
+    ru: Джейсон — DevRel по вопросам веб-технологий, специализирующийся на оптимизации скорости и экосистеме JS.
+    zh: Jason 是网络开发者关系团队成员，专注于速度和 JS 生态系统。
+
+addyosmani:
+  title:
+    en: Addy Osmani
+    es: Addy Osmani
+    ja: Addy Osmani
+    ko: Addy Osmani
+    pt: Addy Osmani
+    ru: Addy Osmani
+    zh: Addy Osmani
+  description:
+    en: Eng Manager working on Chrome and Web Platform
+    es: Gerente de ingeniería que trabaja en Chrome y en la plataforma web
+    ja: Chrome と Web プラットフォームの開発に取り組むエンジニアリングマネージャー
+    ko: Chrome 및 웹 플랫폼 작업을 하는 엔지니어링 관리자
+    pt: Gerente de engenharia trabalhando no Chrome e na plataforma Web
+    ru: Менеджер по разработке, работающий над Chrome и веб-платформой
+    zh: Eng Manager 研究 Chrome 和网络平台
+
+jeffposnick:
+  title:
+    en: Jeff Posnick
+    es: Jeff Posnick
+    ja: Jeff Posnick
+    ko: Jeff Posnick
+    pt: Jeff Posnick
+    ru: Jeff Posnick
+    zh: Jeff Posnick
+  description:
+    en: Web DevRel @ Google
+    es: Web DevRel @ Google
+    ja: Web DevRel @ Google
+    ko: Google의 Web DevRel
+    pt: Web DevRel @ Google
+    ru: DevRel по вопросам веб-технологий в компании Google
+    zh: Google 的网络开发者关系团队成员
+
+pozdnyakov:
+  title:
+    en: Mikhail Pozdnyakov
+    es: Mikhail Pozdnyakov
+    ja: Mikhail Pozdnyakov
+    ko: Mikhail Pozdnyakov
+    pt: Mikhail Pozdnyakov
+    ru: Mikhail Pozdnyakov
+    zh: Mikhail Pozdnyakov
+  description:
+    en: Mikhail is an Engineer at Intel
+    es: Mikhail es un ingeniero en Intel
+    ja: Mikhail は Intel のエンジニアです
+    ko: Mikhail은 Intel의 엔지니어입니다.
+    pt: Mikhail é engenheiro na Intel
+    ru: Михаил — инженер в компании Intel
+    zh: Mikhail 是 Intel 的一名工程师
+
+demianrenzulli:
+  title:
+    en: Demian Renzulli
+    es: Demian Renzulli
+    ja: Demian Renzulli
+    ko: Demian Renzulli
+    pt: Demian Renzulli
+    ru: Demian Renzulli
+    zh: Demian Renzulli
+  description:
+    en: Our latest news, updates, and stories by Demian Renzulli.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Demian Renzulli.
+    ja: Demian Renzulli による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Demian Renzulli의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Demian Renzulli.
+    ru: Последние новости и статьи от Demian Renzulli.
+    zh: Demian Renzulli 撰写我们的最新资讯、动态和故事。
+
+alexshalamov:
+  title:
+    en: Alex Shalamov
+    es: Alex Shalamov
+    ja: Alex Shalamov
+    ko: Alex Shalamov
+    pt: Alex Shalamov
+    ru: Alex Shalamov
+    zh: Alex Shalamov
+  description:
+    en: Alex is an Engineer at Intel
+    es: Alex es un ingeniero en Intel
+    ja: Alex は Intel のエンジニアです
+    ko: Alex는 Intel의 엔지니어입니다.
+    pt: Alex é engenheiro na Intel
+    ru: Алекс — инженер в компании Intel
+    zh: Alex 是 Intel 的一名工程师
+
+rsolomakhin:
+  title:
+    en: Rouslan Solomakhin
+    es: Rouslan Solomakhin
+    ja: Rouslan Solomakhin
+    ko: Rouslan Solomakhin
+    pt: Rouslan Solomakhin
+    ru: Rouslan Solomakhin
+    zh: Rouslan Solomakhin
+  description:
+    en: Our latest news, updates, and stories by Rouslan Solomakhin.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Rouslan Solomakhin.
+    ja: Rouslan Solomakhin による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Rouslan Solomakhin의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Rouslan Solomakhin.
+    ru: Последние новости и статьи от Rouslan Solomakhin.
+    zh: Rouslan Solomakhin 撰写我们的最新资讯、动态和故事。
+
+thomassteiner:
+  title:
+    en: Thomas Steiner
+    es: Thomas Steiner
+    ja: Thomas Steiner
+    ko: Thomas Steiner
+    pt: Thomas Steiner
+    ru: Thomas Steiner
+    zh: Thomas Steiner
+  description:
+    en: Tom is a Developer Advocate
+    es: Tom es un Desarrollador partidario
+    ja: Tom は Developer Advocate です
+    ko: Tom은 개발자 애드버킷입니다.
+    pt: Tom é um Developer Advocate
+    ru: Том — Developer Advocate
+    zh: Tom 是一名开发技术推广工程师
+
+pliao:
+  title:
+    en: Palances Liao
+    es: Palances Liao
+    ja: Palances Liao
+    ko: Palances Liao
+    pt: Palances Liao
+    ru: Palances Liao
+    zh: Palances Liao
+  description:
+    en: Palances is a Web Ecosystem Consultant
+    es: Palances es un Consultor de Ecosistemas Web
+    ja: Palances は Web エコシステム コンサルタントです。
+    ko: Palances는 웹 생태계 컨설턴트입니다.
+    pt: Palances é um Consultor de Ecossistemas Web
+    ru: Palances — консультант по веб-экосистеме
+    zh: Palances 是一名网络生态系统顾问
+
+conwayt:
+  title:
+    en: Tony Conway
+    es: Tony Conway
+    ja: Tony Conway
+    ko: Tony Conway
+    pt: Tony Conway
+    ru: Tony Conway
+    zh: Tony Conway
+  description:
+    en: Tony is a Web Ecosystem Consultant
+    es: Tony es un Consultor de Ecosistemas Web
+    ja: Tony は Web エコシステム コンサルタントです。
+    ko: Tony는 웹 생태계 컨설턴트입니다.
+    pt: Tony é um Consultor de Ecossistemas Web
+    ru: Tony — консультант по веб-экосистеме
+    zh: Tony 是一名网络生态系统顾问
+
+chuijun:
+  title:
+    en: Cecilia Cong
+    es: Cecilia Cong
+    ja: Cecilia Cong
+    ko: Cecilia Cong
+    pt: Cecilia Cong
+    ru: Cecilia Cong
+    zh: Cecilia Cong
+  description:
+    en: Cecilia is a Web Ecosystem Consultant
+    es: Cecilia es una Consultora de Ecosistemas Web
+    ja: Cecilia は Web エコシステム コンサルタントです。
+    ko: Cecilia는 웹 생태계 컨설턴트입니다.
+    pt: Cecilia é uma Consultora de Ecossistemas Web
+    ru: Cecilia — консультант по веб-экосистеме
+    zh: Cecilia 是一名网络生态系统顾问
+
+surma:
+  title:
+    en: Surma
+    es: Surma
+    ja: Surma
+    ko: Surma
+    pt: Surma
+    ru: Surma
+    zh: Surma
+  description:
+    en: Our latest news, updates, and stories by Surma.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Surma.
+    ja: Surma による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Surma의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Surma.
+    ru: Последние новости и статьи от Surma.
+    zh: Surma 撰写我们的最新资讯、动态和故事。
+
+stephenstchur:
+  title:
+    en: Stephen Stchur
+    es: Stephen Stchur
+    ja: Stephen Stchur
+    ko: Stephen Stchur
+    pt: Stephen Stchur
+    ru: Stephen Stchur
+    zh: Stephen Stchur
+  description:
+    en: Our latest news, updates, and stories by Stephen Stchur.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Stephen Stchur.
+    ja: Stephen Stchur による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Stephen Stchur의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Stephen Stchur.
+    ru: Последние новости и статьи от Stephen Stchur.
+    zh: Stephen Stchur 撰写我们的最新资讯、动态和故事。
+
+samthor:
+  title:
+    en: Sam Thorogood
+    es: Sam Thorogood
+    ja: Sam Thorogood
+    ko: Sam Thorogood
+    pt: Sam Thorogood
+    ru: Sam Thorogood
+    zh: Sam Thorogood
+  description:
+    en: ¯‍\‍_‍(‍ツ‍)‍_‍/‍¯
+    es: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+    ja: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+    ko: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+    pt: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+    ru: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+    zh: '¯‍\‍_‍(‍ツ‍)‍_‍/‍¯'
+
+rachelandrew:
+  title:
+    en: Rachel Andrew
+    es: Rachel Andrew
+    ja: Rachel Andrew
+    ko: Rachel Andrew
+    pt: Rachel Andrew
+    ru: Rachel Andrew
+    zh: Rachel Andrew
+  description:
+    en: Technical writer at Google. Content lead for web.dev.
+    es: Escritor y editor independiente. Es un especialista invitado en el grupo de trabajo de CSS.
+    ja: フリーランスのライター兼編集者。CSS ワーキンググループ招待エキスパート。
+    ko: 프리랜서 작가이자 편집자. CSS 작업 그룹에 초대된 전문가.
+    pt: Escritor e editor freelancer. Especialista convidada do grupo de trabalho CSS.
+    ru: Независимая писательница и редактор. Приглашенный эксперт рабочей группы CSS.
+    zh: 自由撰稿人兼编辑。CSS 工作组特邀专家。
+
+rviscomi:
+  title:
+    en: Rick Viscomi
+    es: Rick Viscomi
+    ja: Rick Viscomi
+    ko: Rick Viscomi
+    pt: Rick Viscomi
+    ru: Rick Viscomi
+    zh: Rick Viscomi
+  description:
+    en: Our latest news, updates, and stories by Rick Viscomi.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Rick Viscomi.
+    ja: Rick Viscomi による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Rick Viscomi의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Rick Viscomi.
+    ru: Последние новости и статьи от Rick Viscomi.
+    zh: Rick Viscomi 撰写我们的最新资讯、动态和故事。
+
+philipwalton:
+  title:
+    en: Philip Walton
+    es: Philip Walton
+    ja: Philip Walton
+    ko: Philip Walton
+    pt: Philip Walton
+    ru: Philip Walton
+    zh: Philip Walton
+  description:
+    en: Engineer at Google working on the Web Platform
+    es: Ingeniero en Google, trabaja en la plataforma web
+    ja: Google で Web プラットフォームの開発に取り組むエンジニア
+    ko: 웹 플랫폼 작업을 하는 Google 엔지니어
+    pt: Engenheiro na empresa Google trabalhando na plataforma web
+    ru: Инженер в компании Google, участвующий в разработке веб-платформы
+    zh: 研究网络平台的 Google 工程师
+
+tunetheweb:
+  title:
+    en: Barry Pollard
+    es: Barry Pollard
+    ja: Barry Pollard
+    ko: Barry Pollard
+    pt: Barry Pollard
+    ru: Barry Pollard
+    zh: Barry Pollard
+  description:
+    en: Web Performance Developer Advocate for Google
+    es: Rendimiento web aesarrollador partidario para Google
+    ja: Google を対象とした Developer Advocate
+    ko: Google의 개발자 애드버킷
+    pt: Developer Advocate para o Google
+    ru: Developer Advocate по вопросам Google
+    zh: 负责 Google 的开发技术推广工程师
+
+ekharvey:
+  title:
+    en: Lizzi Harvey
+    es: Lizzi Harvey
+    ja: Lizzi Harvey
+    ko: Lizzi Harvey
+    pt: Lizzi Harvey
+    ru: Lizzi Harvey
+    zh: Lizzi Harvey
+  description:
+    en: Lizzi is a Tech Writer at Google
+    es: Lizzi es una escritora técnica en Google
+    ja: Lizzi は Google に所属するテクニカルライターです
+    ko: Lizzi는 Google의 테크니컬라이터입니다.
+    pt: Lizzi é escritora de tecnologia na empresa Google
+    ru: Лиззи — технический писатель в компании Google
+    zh: Lizzi 是 Google 的一名技术撰稿人
+
+houssein:
+  title:
+    en: Houssein Djirdeh
+    es: Houssein Djirdeh
+    ja: Houssein Djirdeh
+    ko: Houssein Djirdeh
+    pt: Houssein Djirdeh
+    ru: Houssein Djirdeh
+    zh: Houssein Djirdeh
+  description:
+    en: Our latest news, updates, and stories by Houssein Djirdeh.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Houssein Djirdeh.
+    ja: Houssein Djirdeh による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Houssein Djirdeh의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Houssein Djirdeh.
+    ru: Последние новости и статьи от Houssein Djirdeh.
+    zh: Houssein Djirdeh 撰写我们的最新资讯、动态和故事。
+
+megginkearney:
+  title:
+    en: Meggin Kearney
+    es: Meggin Kearney
+    ja: Meggin Kearney
+    ko: Meggin Kearney
+    pt: Meggin Kearney
+    ru: Meggin Kearney
+    zh: Meggin Kearney
+  description:
+    en: Meggin is a Tech Writer
+    es: Meggin es una escritora técnica
+    ja: Meggin はテクニカルライターです
+    ko: Meggin은 테크니컬라이터입니다.
+    pt: Meggin é uma escritora técnica
+    ru: Меггин — технический писатель
+    zh: Meggin 是一名技术撰稿人
+
+dgash:
+  title:
+    en: Dave Gash
+    es: Dave Gash
+    ja: Dave Gash
+    ko: Dave Gash
+    pt: Dave Gash
+    ru: Dave Gash
+    zh: Dave Gash
+  description:
+    en: Dave is a Tech Writer
+    es: Dave es un escritor técnico
+    ja: Dave はテクニカルライターです
+    ko: Dave는 테크니컬라이터입니다.
+    pt: Dave é escritor técnico
+    ru: Дейв — технический писатель
+    zh: Dave 是一名技术撰稿人
+
+mdiblasio:
+  title:
+    en: Michael DiBlasio
+    es: Michael DiBlasio
+    ja: Michael DiBlasio
+    ko: Michael DiBlasio
+    pt: Michael DiBlasio
+    ru: Michael DiBlasio
+    zh: Michael DiBlasio
+  description:
+    en: Our latest news, updates, and stories by Michael DiBlasio.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Michael DiBlasio.
+    ja: Michael DiBlasio による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Michael DiBlasio의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Michael DiBlasio.
+    ru: Последние новости и статьи от Michael DiBlasio.
+    zh: Michael DiBlasio 撰写我们的最新资讯、动态和故事。
+
+jlwagner:
+  title:
+    en: Jeremy Wagner
+    es: Jeremy Wagner
+    ja: Jeremy Wagner
+    ko: Jeremy Wagner
+    pt: Jeremy Wagner
+    ru: Jeremy Wagner
+    zh: Jeremy Wagner
+  description:
+    en: Tech writin', doc slingin' reprobate.
+
+gmimani:
+  title:
+    en: Garima Mimani
+    es: Garima Mimani
+    ja: Garima Mimani
+    ko: Garima Mimani
+    pt: Garima Mimani
+    ru: Garima Mimani
+    zh: Garima Mimani
+  description:
+    en: Our latest news, updates, and stories by Garima Mimani.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Garima Mimani.
+    ja: Garima Mimani による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Garima Mimani의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Garima Mimani.
+    ru: Последние новости и статьи от Garima Mimani.
+    zh: Garima Mimani 撰写我们的最新资讯、动态和故事。
+
+martinsplitt:
+  title:
+    en: Martin Splitt
+    es: Martin Splitt
+    ja: Martin Splitt
+    ko: Martin Splitt
+    pt: Martin Splitt
+    ru: Martin Splitt
+    zh: Martin Splitt
+  description:
+    en: Our latest news, updates, and stories by Martin Splitt.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Martin Splitt.
+    ja: Martin Splitt による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Martin Splitt의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Martin Splitt.
+    ru: Последние новости и статьи от Martin Splitt.
+    zh: Martin Splitt 撰写我们的最新资讯、动态和故事。
+
+uskay:
+  title:
+    en: Yusuke Utsunomiya
+    es: Yusuke Utsunomiya
+    ja: Yusuke Utsunomiya
+    ko: Yusuke Utsunomiya
+    pt: Yusuke Utsunomiya
+    ru: Yusuke Utsunomiya
+    zh: Yusuke Utsunomiya
+  description:
+    en: Tech consultant for Web, Chrome & AMP
+    es: Consultor técnico para Web, Chrome y AMP
+    ja: Web、Chrome、AMP を対象とした技術コンサルタント
+    ko: Web, Chrome 및 AMP 기술 컨설턴트
+    pt: Consultor técnico para a web, Chrome e AMP
+    ru: Технический консультант по веб-разработке, Chrome и AMP
+    zh: 网络、Chrome 和 AMP 技术顾问
+
+jormears:
+  title:
+    en: Jordon Mears‎
+    es: Jordon Mears‎
+    ja: Jordon Mears‎
+    ko: Jordon Mears‎
+    pt: Jordon Mears‎
+    ru: Jordon Mears‎
+    zh: Jordon Mears‎
+  description:
+    en: Jordon is a Tech Lead Manager working on Google Earth.
+    es: Jordon es un Gerente principal de tecnología que trabaja en Google Earth.
+    ja: Jordon は Google Earth の開発に取り組むテックリードマネージャーです。
+    ko: Jordon은 Google Earth 작업을 수행하는 기술 수석 관리자입니다.
+    pt: Jordon é gerente líder de tecnologia que trabalha no Google Earth.
+    ru: Джордон — технический руководитель проекта Google Earth.
+    zh: Jordan 是一名研究 Google 地球的技术主管经理。
+
+martinschierle:
+  title:
+    en: Martin Schierle
+    es: Martin Schierle
+    ja: Martin Schierle
+    ko: Martin Schierle
+    pt: Martin Schierle
+    ru: Martin Schierle
+    zh: Martin Schierle
+  description:
+    en: Our latest news, updates, and stories by Martin Schierle.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Martin Schierle.
+    ja: Martin Schierle による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Martin Schierle의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Martin Schierle.
+    ru: Последние новости и статьи от Martin Schierle.
+    zh: Martin Schierle 撰写我们的最新资讯、动态和故事。
+
+joemedley:
+  title:
+    en: Joe Medley
+    es: Joe Medley
+    ja: Joe Medley
+    ko: Joe Medley
+    pt: Joe Medley
+    ru: Joe Medley
+    zh: Joe Medley
+  description:
+    en: If an API's not documented it doesn't exist
+    es: Si una API no está documentada entonces no existe
+    ja: ドキュメントがない API は存在しない API です
+    ko: API가 문서화되지 않은 경우, 존재하지 않습니다.
+    pt: Se uma API não estiver documentada, ela não existe
+    ru: Если API не задокументирован, то его не существует
+    zh: 如果 API 未被记载就表示其不存在
+
+egsweeny:
+  title:
+    en: Elizabeth Sweeny
+    es: Elizabeth Sweeny
+    ja: Elizabeth Sweeny
+    ko: Elizabeth Sweeny
+    pt: Elizabeth Sweeny
+    ru: Elizabeth Sweeny
+    zh: Elizabeth Sweeny
+  description:
+    en: Product manager for developer tools on the web platform in Chrome.
+    es: Gerente de productos encargada de las herramientas de desarrollo en la plataforma web de Chrome.
+    ja: Chrome の Web プラットフォームで使用される開発者ツールのプロダクトマネージャー。
+    ko: Chrome 웹 플랫폼의 개발자 도구 제품 관리자입니다.
+    pt: Gerente de produtos para ferramentas de desenvolvimento na plataforma web no Chrome.
+    ru: Менеджер по продукту в команде Chrome, работает над инструментами для разработчиков на веб-платформе.
+    zh: 负责 Chrome 网络平台开发者工具的产品经理。
+
+rowan_m:
+  title:
+    en: Rowan Merewood
+    es: Rowan Merewood
+    ja: Rowan Merewood
+    ko: Rowan Merewood
+    pt: Rowan Merewood
+    ru: Rowan Merewood
+    zh: Rowan Merewood
+  description:
+    en: Developer Advocate for Chrome and web
+    es: Desarrollador partidario para Chrome y otros sitios web
+    ja: Chrome と Web を対象とした Developer Advocate
+    ko: Chrome 및 웹 개발자 애드버킷
+    pt: Developer Advocate para Chrome e web
+    ru: Developer Advocate по вопросам Chrome и веб-разработки
+    zh: 负责 Chrome 和网络的开发技术推广工程师
+
+adamargyle:
+  title:
+    en: Adam Argyle
+    es: Adam Argyle
+    ja: Adam Argyle
+    ko: Adam Argyle
+    pt: Adam Argyle
+    ru: Adam Argyle
+    zh: Adam Argyle
+  description:
+    en: Developer Advocate for Chrome
+    es: Desarrollador partidario para Chrome
+    ja: Chrome を対象とした Developer Advocate
+    ko: Chrome의 개발자 애드버킷
+    pt: Developer Advocate para o Chrome
+    ru: Developer Advocate по вопросам Chrome
+    zh: 负责 Chrome 的开发技术推广工程师
+
+emmatwersky:
+  title:
+    en: Emma Twersky
+  description:
+    en: Developer Relations Engineer for Angular
+
+lunalu:
+  title:
+    en: Luna Lu
+    es: Luna Lu
+    ja: Luna Lu
+    ko: Luna Lu
+    pt: Luna Lu
+    ru: Luna Lu
+    zh: Luna Lu
+  description:
+    en: Build and enforce guardrails for the web.
+    es: Construye y refuerza las barreras de protección para la web.
+    ja: Web の世界にガードレールを構築し、補強する人。
+    ko: 웹용 가드레일을 구축하고 실행합니다.
+    pt: Construir e impor grades de proteção para a web.
+    ru: Разработка и внедрение механизмов защиты в вебе.
+    zh: 为网络搭建并加强护栏。
+
+geddski:
+  title:
+    en: Dave Geddes
+    es: Dave Geddes
+    ja: Dave Geddes
+    ko: Dave Geddes
+    pt: Dave Geddes
+    ru: Dave Geddes
+    zh: Dave Geddes
+  description:
+    en: Founder at Mastery Games
+    es: Fundador de Mastery Games
+    ja: Mastery Games の創設者
+    ko: Mastery Games 설립자
+    pt: Fundador da Mastery Games
+    ru: Основатель Mastery Games
+    zh: Mastery Games 创始人
+
+danyao:
+  title:
+    en: Danyao Wang
+    es: Danyao Wang
+    ja: Danyao Wang
+    ko: Danyao Wang
+    pt: Danyao Wang
+    ru: Danyao Wang
+    zh: Danyao Wang
+  description:
+    en:
+    es:
+    ja:
+    ko:
+    pt:
+    ru:
+    zh:
+
+linahansson:
+  title:
+    en: Lina Hansson
+    es: Lina Hansson
+    ja: Lina Hansson
+    ko: Lina Hansson
+    pt: Lina Hansson
+    ru: Lina Hansson
+    zh: Lina Hansson
+  description:
+    en: Lina is a Conversion Specialist at Google, focused on mobile CRO and site speed.
+    es: Lina es una especialista en conversiones en Google, y su trabajo se centra en la CRO para dispositivos móviles y en la velocidad del sitio.
+    ja: Lina は、モバイルにおけるコンバージョン率の最適化とWeb サイトのスピードに関心を持つ Google のコンバージョンスペシャリストです。
+    ko: Lina는 Google의 전환 전문가로 모바일 CRO 및 사이트 속도에 중점을 두고 있습니다.
+    pt: Lina é especialista em conversão no Google, com foco em CRO móvel e velocidade do site.
+    ru: Лина — специалист по повышению конверсии в компании Google, специализирующаяся на мобильной CRO-оптимизации и повышении скорости сайтов.
+    zh: Lina 是 Google 的转化专家，专注于移动端 CRO 和网站速度。
+
+bojanpavic:
+  title:
+    en: Bojan Pavic
+    es: Bojan Pavic
+    ja: Bojan Pavic
+    ko: Bojan Pavic
+    pt: Bojan Pavic
+    ru: Bojan Pavic
+    zh: Bojan Pavic
+  description:
+    en: Our latest news, updates, and stories by Bojan Pavic.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Bojan Pavic.
+    ja: Bojan Pavic による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Bojan Pavic의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias de Bojan Pavic.
+    ru: Последние новости и статьи от Bojan Pavic.
+    zh: Bojan Pavic 撰写我们的最新资讯、动态和故事。
+
+ansteychris:
+  title:
+    en: Chris Anstey
+    es: Chris Anstey
+    ja: Chris Anstey
+    ko: Chris Anstey
+    pt: Chris Anstey
+    ru: Chris Anstey
+    zh: Chris Anstey
+  description:
+    en: Our latest news, updates, and stories by Chris Anstey.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Chris Anstey.
+    ja: Chris Anstey による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Chris Anstey의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Chris Anstey.
+    ru: Последние новости и статьи от Chris Anstey.
+    zh: Chris Anstey 撰写我们的最新资讯、动态和故事。
+
+mfriesenhahn:
+  title:
+    en: Michael Friesenhahn
+    es: Michael Friesenhahn
+    ja: Michael Friesenhahn
+    ko: Michael Friesenhahn
+    pt: Michael Friesenhahn
+    ru: Michael Friesenhahn
+    zh: Michael Friesenhahn
+  description:
+    en: Michael is a Tech Writer
+    es: Michael es un escritor técnico
+    ja: Michael はテクニカルライターです
+    ko: Michael은 테크니컬라이터입니다.
+    pt: Michael é escritor técnico
+    ru: Майкл — технический писатель
+    zh: Michael 是一名技术撰稿人
+
+hbatra:
+  title:
+    en: Harleen Batra
+    es: Harleen Batra
+    ja: Harleen Batra
+    ko: Harleen Batra
+    pt: Harleen Batra
+    ru: Harleen Batra
+    zh: Harleen Batra
+  description:
+    en: Harleen is a Developer Marketing Manager
+    es: Harleen es Gerente de marketing de desarrolladores
+    ja: Harleen は開発者マーケティングマネージャーです
+    ko: Harleen은 개발자 마케팅 관리자입니다.
+    pt: Harleen é gerente de marketing de desenvolvedores
+    ru: Харлин — менеджер по маркетингу среди разработчиков
+    zh: Harleen 是一名开发者营销经理
+
+mgechev:
+  title:
+    en: Minko Gechev
+    es: Minko Gechev
+    ja: Minko Gechev
+    ko: Minko Gechev
+    pt: Minko Gechev
+    ru: Minko Gechev
+    zh: Minko Gechev
+  description:
+    en: Our latest news, updates, and stories by Minko Gechev.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Minko Gechev.
+    ja: Minko Gechev による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Minko Gechev의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias de Minko Gechev.
+    ru: Последние новости и статьи от Minko Gechev.
+    zh: Minko Gechev 撰写我们的最新资讯、动态和故事。
+
+sfluin:
+  title:
+    en: Stephen Fluin
+    es: Stephen Fluin
+    ja: Stephen Fluin
+    ko: Stephen Fluin
+    pt: Stephen Fluin
+    ru: Stephen Fluin
+    zh: Stephen Fluin
+  description:
+    en: Our latest news, updates, and stories by Stephen Fluin.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Stephen Fluin.
+    ja: Stephen Fluin による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Stephen Fluin의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Stephen Fluin.
+    ru: Последние новости и статьи от Stephen Fluin.
+    zh: Stephen Fluin 撰写我们的最新资讯、动态和故事。
+
+mohamedzamakhan:
+  title:
+    en: Zama Khan Mohammed
+    es: Zama Khan Mohammed
+    ja: Zama Khan Mohammed
+    ko: Zama Khan Mohammed
+    pt: Zama Khan Mohammed
+    ru: Zama Khan Mohammed
+    zh: Zama Khan Mohammed
+  description:
+    en: Our latest news, updates, and stories by Zama Khan Mohammed.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Zama Khan Mohammed.
+    ja: Zama Khan Mohammed による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Zama Khan Mohammed의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Zama Khan Mohammed.
+    ru: Последние новости и статьи от Zama Khan Mohammed.
+    zh: Zama Khan Mohammed 撰写我们的最新资讯、动态和故事。
+
+dougsillars:
+  title:
+    en: Doug Sillars
+    es: Doug Sillars
+    ja: Doug Sillars
+    ko: Doug Sillars
+    pt: Doug Sillars
+    ru: Doug Sillars
+    zh: Doug Sillars
+  description:
+    en: Our latest news, updates, and stories by Doug Sillars.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Doug Sillars.
+    ja: Doug Sillars による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Doug Sillars의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Doug Sillars.
+    ru: Последние новости и статьи от Doug Sillars.
+    zh: Doug Sillars 撰写我们的最新资讯、动态和故事。
+
+samrichard:
+  title:
+    en: Sam Richard
+    es: Sam Richard
+    ja: Sam Richard
+    ko: Sam Richard
+    pt: Sam Richard
+    ru: Sam Richard
+    zh: Sam Richard
+  description:
+    en: Our latest news, updates, and stories by Sam Richard.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Sam Richard.
+    ja: Sam Richard による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Sam Richard의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Sam Richard.
+    ru: Последние новости и статьи от Sam Richard.
+    zh: Sam Richard 撰写我们的最新资讯、动态和故事。
+
+yoavweiss:
+  title:
+    en: Yoav Weiss
+    es: Yoav Weiss
+    ja: Yoav Weiss
+    ko: Yoav Weiss
+    pt: Yoav Weiss
+    ru: Yoav Weiss
+    zh: Yoav Weiss
+  description:
+    en: Our latest news, updates, and stories by Yoav Weiss.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Yoav Weiss.
+    ja: Yoav Weiss による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Yoav Weiss의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Yoav Weiss.
+    ru: Последние новости и статьи от Yoav Weiss.
+    zh: Yoav Weiss 撰写我们的最新资讯、动态和故事。
+
+katejeffreys:
+  title:
+    en: Kate Jeffreys
+    es: Kate Jeffreys
+    ja: Kate Jeffreys
+    ko: Kate Jeffreys
+    pt: Kate Jeffreys
+    ru: Kate Jeffreys
+    zh: Kate Jeffreys
+  description:
+    en: Technical Writer at Google
+    es: Escritor técnico en Google
+    ja: Google のテクニカルライター
+    ko: Google 테크니컬라이터
+    pt: Escritora técnica na empresa Google
+    ru: Технический писатель в компании Google
+    zh: Google 的技术撰稿人
+
+jimper:
+  title:
+    en: Jonathon Imperiosi
+    es: Jonathon Imperiosi
+    ja: Jonathon Imperiosi
+    ko: Jonathon Imperiosi
+    pt: Jonathon Imperiosi
+    ru: Jonathon Imperiosi
+    zh: Jonathon Imperiosi
+  description:
+    en: Our latest news, updates, and stories by Jonathon Imperiosi.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Jonathon Imperiosi.
+    ja: Jonathon Imperiosi による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Jonathon Imperiosi의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Jonathon Imperiosi.
+    ru: Последние новости и статьи от Jonathon Imperiosi.
+    zh: Jonathon Imperiosi 撰写我们的最新资讯、动态和故事。
+
+robhazan:
+  title:
+    en: Rob Hazan
+    es: Rob Hazan
+    ja: Rob Hazan
+    ko: Rob Hazan
+    pt: Rob Hazan
+    ru: Rob Hazan
+    zh: Rob Hazan
+  description:
+    en: Our latest news, updates, and stories by Rob Hazan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Rob Hazan.
+    ja: Rob Hazan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Rob Hazan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Rob Hazan.
+    ru: Последние новости и статьи от Rob Hazan.
+    zh: Rob Hazan 撰写我们的最新资讯、动态和故事。
+
+gernberg:
+  title:
+    en: Gustav Ernberg von Heijne
+    es: Gustav Ernberg von Heijne
+    ja: Gustav Ernberg von Heijne
+    ko: Gustav Ernberg von Heijne
+    pt: Gustav Ernberg von Heijne
+    ru: Gustav Ernberg von Heijne
+    zh: Gustav Ernberg von Heijne
+  description:
+    en: Our latest news, updates, and stories by Gustav Ernberg von Heijne.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Gustav Ernberg von Heijne.
+    ja: Gustav Ernberg von Heijne による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Gustav Ernberg von Heijne의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Gustav Ernberg von Heijne.
+    ru: Последние новости и статьи от Gustav Ernberg von Heijne.
+    zh: Gustav Ernberg von Heijne 撰写我们的最新资讯、动态和故事。
+
+thebengeu:
+  title:
+    en: Beng Eu
+    es: Beng Eu
+    ja: Beng Eu
+    ko: Beng Eu
+    pt: Beng Eu
+    ru: Beng Eu
+    zh: Beng Eu
+  description:
+    en: AdSpeed tech lead at Google
+    es: Experto en la tecnología AdSpeed en Google
+    ja: Google に所属する AdSpeed テックリーダー
+    ko: Google의 AdSpeed 기술 책임자
+    pt: Líder técnico do AdSpeed na empresa Google
+    ru: Технический руководитель по вопросам оптимизации скорости рекламы в компании Google
+    zh: Google 的 AdSpeed 技术主管
+
+yosuke_furukawa:
+  title:
+    en: Yosuke Furukawa
+    es: Yosuke Furukawa
+    ja: Yosuke Furukawa
+    ko: Yosuke Furukawa
+    pt: Yosuke Furukawa
+    ru: Yosuke Furukawa
+    zh: Yosuke Furukawa
+  description:
+    en: Our latest news, updates, and stories by Yosuke Furukawa.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Yosuke Furukawa.
+    ja: Yosuke Furukawa による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Yosuke Furukawa의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Yosuke Furukawa.
+    ru: Последние новости и статьи от Yosuke Furukawa.
+    zh: Yosuke Furukawa 撰写我们的最新资讯、动态和故事。
+
+satoshi_arai:
+  title:
+    en: Satoshi Arai
+    es: Satoshi Arai
+    ja: Satoshi Arai
+    ko: Satoshi Arai
+    pt: Satoshi Arai
+    ru: Satoshi Arai
+    zh: Satoshi Arai
+  description:
+    en: Our latest news, updates, and stories by Satoshi Arai.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Satoshi Arai.
+    ja: Satoshi Arai による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Satoshi Arai의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Satoshi Arai.
+    ru: Последние новости и статьи от Satoshi Arai.
+    zh: Satoshi Arai 撰写我们的最新资讯、动态和故事。
+
+kento_tsuji:
+  title:
+    en: Kento Tsuji
+    es: Kento Tsuji
+    ja: Kento Tsuji
+    ko: Kento Tsuji
+    pt: Kento Tsuji
+    ru: Kento Tsuji
+    zh: Kento Tsuji
+  description:
+    en: Our latest news, updates, and stories by Kento Tsuji.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Kento Tsuji.
+    ja: Kento Tsuji による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Kento Tsuji의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Kento Tsuji.
+    ru: Последние новости и статьи от Kento Tsuji.
+    zh: Kento Tsuji 撰写我们的最新资讯、动态和故事。
+
+ajain:
+  title:
+    en: Ankit Jain
+    es: Ankit Jain
+    ja: Ankit Jain
+    ko: Ankit Jain
+    pt: Ankit Jain
+    ru: Ankit Jain
+    zh: Ankit Jain
+  description:
+    en: Our latest news, updates, and stories by Ankit Jain.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Ankit Jain.
+    ja: Ankit Jain による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Ankit Jain의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Ankit Jain.
+    ru: Последние новости и статьи от Ankit Jain.
+    zh: Ankit Jain 撰写我们的最新资讯、动态和故事。
+
+kenjibaheux:
+  title:
+    en: Kenji Baheux
+    es: Kenji Baheux
+    ja: Kenji Baheux
+    ko: Kenji Baheux
+    pt: Kenji Baheux
+    ru: Kenji Baheux
+    zh: Kenji Baheux
+  description:
+    en: Our latest news, updates, and stories by Kenji Baheux.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Kenji Baheux.
+    ja: Kenji Baheux による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Kenji Baheux의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Kenji Baheux.
+    ru: Последние новости и статьи от Kenji Baheux.
+    zh: Kenji Baheux 撰写我们的最新资讯、动态和故事。
+
+una:
+  title:
+    en: Una Kravets
+    es: Una Kravets
+    ja: Una Kravets
+    ko: Una Kravets
+    pt: Una Kravets
+    ru: Una Kravets
+    zh: Una Kravets
+  description:
+    en: Developer Advocate for CSS, UI & DevTools at Chrome
+    es: Desarrollador partidario para CSS, UI y DevTools en Chrome
+    ja: Chrome の CSS、UI、DevTools を対象とした Developer Advocate
+    ko: Chrome의 CSS, UI 및 DevTools 개발자 애드버킷
+    pt: Developer Advocate para CSS, UI e DevTools no Chrome
+    ru: Developer Advocate по вопросам CSS, UI и DevTools в команде Chrome
+    zh: Chrome 的 CSS、UI 和 DevTools 开发技术推广工程师
+
+phillipkriegel:
+  title:
+    en: Phillip Kriegel
+    es: Phillip Kriegel
+    ja: Phillip Kriegel
+    ko: Phillip Kriegel
+    pt: Phillip Kriegel
+    ru: Phillip Kriegel
+    zh: Phillip Kriegel
+  description:
+    en: Phillip is a Specialist Engineer
+    es: Phillip es un ingeniero especializado
+    ja: Phillip はスペシャリストエンジニアです
+    ko: Phillip은 전문 엔지니어입니다.
+    pt: Phillip é engenheiro especialista
+    ru: Филип — инженер-специалист
+    zh: Phillip 是一名专家工程师
+
+tigeroakes:
+  title:
+    en: Tiger Oakes
+    es: Tiger Oakes
+    ja: Tiger Oakes
+    ko: Tiger Oakes
+    pt: Tiger Oakes
+    ru: Tiger Oakes
+    zh: Tiger Oakes
+  description:
+    en: Developer working on Firefox Preview
+    es: Es un desarrollador que trabaja en Firefox Preview
+    ja: Firefox Preview の開発に取り組む開発者
+    ko: Firefox 프리뷰 작업을 수행하는 개발자
+    pt: Desenvolvedor trabalhando no Firefox Preview
+    ru: Разработчик Firefox Preview
+    zh: 从事 Firefox 预览版开发的开发者
+
+kumagi:
+  title:
+    en: Hiroki Kumazaki
+    es: Hiroki Kumazaki
+    ja: Hiroki Kumazaki
+    ko: Hiroki Kumazaki
+    pt: Hiroki Kumazaki
+    ru: Hiroki Kumazaki
+    zh: Hiroki Kumazaki
+  description:
+    en: Our latest news, updates, and stories by Hiroki Kumazaki.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Hiroki Kumazaki.
+    ja: Hiroki Kumazaki による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Hiroki Kumazaki의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Hiroki Kumazaki.
+    ru: Последние новости и статьи от Hiroki Kumazaki.
+    zh: Hiroki Kumazaki 撰写我们的最新资讯、动态和故事。
+
+andreban:
+  title:
+    en: André Cipriani Bandarra
+    es: André Cipriani Bandarra
+    ja: André Cipriani Bandarra
+    ko: André Cipriani Bandarra
+    pt: André Cipriani Bandarra
+    ru: André Cipriani Bandarra
+    zh: André Cipriani Bandarra
+  description:
+    en: Andre is a Developer Advocate
+    es: Andre es un Desarrollador partidario
+    ja: Andre は Developer Advocate です
+    ko: Andre은 개발자 애드버킷입니다.
+    pt: Andre é Developer Advocate
+    ru: Андре — Developer Advocate
+    zh: Andre 是一名开发技术推广工程师
+
+koto:
+  title:
+    en: Krzysztof Kotowicz
+    es: Krzysztof Kotowicz
+    ja: Krzysztof Kotowicz
+    ko: Krzysztof Kotowicz
+    pt: Krzysztof Kotowicz
+    ru: Krzysztof Kotowicz
+    zh: Krzysztof Kotowicz
+  description:
+    en: Our latest news, updates, and stories by Krzysztof Kotowicz.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Krzysztof Kotowicz.
+    ja: Krzysztof Kotowicz による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Krzysztof Kotowicz의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Krzysztof Kotowicz.
+    ru: Последние новости и статьи от Krzysztof Kotowicz.
+    zh: Krzysztof Kotowicz 撰写我们的最新资讯、动态和故事。
+
+lwe:
+  title:
+    en: Lukas Weichselbaum
+    es: Lukas Weichselbaum
+    ja: Lukas Weichselbaum
+    ko: Lukas Weichselbaum
+    pt: Lukas Weichselbaum
+    ru: Lukas Weichselbaum
+    zh: Lukas Weichselbaum
+  description:
+    en: Our latest news, updates, and stories by Lukas Weichselbaum.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Lukas Weichselbaum.
+    ja: Lukas Weichselbaum による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Lukas Weichselbaum의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Lukas Weichselbaum.
+    ru: Последние новости и статьи от Lukas Weichselbaum.
+    zh: Lukas Weichselbaum 撰写我们的最新资讯、动态和故事。
+
+dgrogan:
+  title:
+    en: David Grogan
+    es: David Grogan
+    ja: David Grogan
+    ko: David Grogan
+    pt: David Grogan
+    ru: David Grogan
+    zh: David Grogan
+  description:
+    en: Our latest news, updates, and stories by David Grogan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por David Grogan.
+    ja: David Grogan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: David Grogan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por David Grogan.
+    ru: Последние новости и статьи от David Grogan.
+    zh: David Grogan 撰写我们的最新资讯、动态和故事。
+
+ulan:
+  title:
+    en: Ulan Degenbaev
+    es: Ulan Degenbaev
+    ja: Ulan Degenbaev
+    ko: Ulan Degenbaev
+    pt: Ulan Degenbaev
+    ru: Ulan Degenbaev
+    zh: Ulan Degenbaev
+  description:
+    en: Our latest news, updates, and stories by Ulan Degenbaev.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Ulan Degenbaev.
+    ja: Ulan Degenbaev による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Ulan Degenbaev의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Ulan Degenbaev.
+    ru: Последние новости и статьи от Ulan Degenbaev.
+    zh: Ulan Degenbaev 撰写我们的最新资讯、动态和故事。
+
+domenic:
+  title:
+    en: Domenic Denicola
+    es: Domenic Denicola
+    ja: Domenic Denicola
+    ko: Domenic Denicola
+    pt: Domenic Denicola
+    ru: Domenic Denicola
+    zh: Domenic Denicola
+  description:
+    en: Our latest news, updates, and stories by Domenic Denicola.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Domenic Denicola.
+    ja: Domenic Denicola による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Domenic Denicola의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Domenic Denicola.
+    ru: Последние новости и статьи от Domenic Denicola.
+    zh: Domenic Denicola 撰写我们的最新资讯、动态和故事。
+
+cjamcl:
+  title:
+    en: Connor Clark
+    es: Connor Clark
+    ja: Connor Clark
+    ko: Connor Clark
+    pt: Connor Clark
+    ru: Connor Clark
+    zh: Connor Clark
+  description:
+    en: Our latest news, updates, and stories by Connor Clark.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Connor Clark.
+    ja: Connor Clark による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Connor Clark의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Connor Clark.
+    ru: Последние новости и статьи от Connor Clark.
+    zh: Connor Clark 撰写我们的最新资讯、动态和故事。
+
+paullewis:
+  title:
+    en: Paul Lewis
+    es: Paul Lewis
+    ja: Paul Lewis
+    ko: Paul Lewis
+    pt: Paul Lewis
+    ru: Paul Lewis
+    zh: Paul Lewis
+  description:
+    en: Our latest news, updates, and stories by Paul Lewis.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Paul Lewis.
+    ja: Paul Lewis による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Paul Lewis의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Paul Lewis.
+    ru: Последние новости и статьи от Paul Lewis.
+    zh: Paul Lewis 撰写我们的最新资讯、动态和故事。
+
+patrickkettner:
+  title:
+    en: Patrick Kettner
+    es: Patrick Kettner
+    ja: Patrick Kettner
+    ko: Patrick Kettner
+    pt: Patrick Kettner
+    ru: Patrick Kettner
+    zh: Patrick Kettner
+  description:
+    en: Our latest news, updates, and stories by Patrick Kettner.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Patrick Kettner.
+    ja: Patrick Kettner による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Patrick Kettner의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Patrick Kettner.
+    ru: Последние новости и статьи от Patrick Kettner.
+    zh: Patrick Kettner 撰写我们的最新资讯、动态和故事。
+
+sebabenz:
+  title:
+    en: Sebastian Benz
+    es: Sebastian Benz
+    ja: Sebastian Benz
+    ko: Sebastian Benz
+    pt: Sebastian Benz
+    ru: Sebastian Benz
+    zh: Sebastian Benz
+  description:
+    en: Our latest news, updates, and stories by Sebastian Benz.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Sebastian Benz.
+    ja: Sebastian Benz による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Sebastian Benz의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Sebastian Benz.
+    ru: Последние новости и статьи от Sebastian Benz.
+    zh: Sebastian Benz 撰写我们的最新资讯、动态和故事。
+
+syg:
+  title:
+    en: Shu-yu Guo
+    es: Shu-yu Guo
+    ja: Shu-yu Guo
+    ko: Shu-yu Guo
+    pt: Shu-yu Guo
+    ru: Shu-yu Guo
+    zh: Shu-yu Guo
+  description:
+    en: Our latest news, updates, and stories by Shu-yu Guo.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Shu-yu Guo.
+    ja: Shu-yu Guo による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Shu-yu Guo의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Shu-yu Guo.
+    ru: Последние новости и статьи от Shu-yu Guo.
+    zh: Shu-yu Guo 撰写我们的最新资讯、动态和故事。
+
+nabeelalshamma:
+  title:
+    en: Nabeel Al-Shamma
+    es: Nabeel Al-Shamma
+    ja: Nabeel Al-Shamma
+    ko: Nabeel Al-Shamma
+    pt: Nabeel Al-Shamma
+    ru: Nabeel Al-Shamma
+    zh: Nabeel Al-Shamma
+  description:
+    en: Principal Scientist at Adobe
+    es: Principal Scientist at Adobe
+    ja: Principal Scientist at Adobe
+    ko: Principal Scientist at Adobe
+    pt: Principal Scientist at Adobe
+    ru: Principal Scientist at Adobe
+    zh: Principal Scientist at Adobe
+
+nattestad:
+  title:
+    en: Thomas Nattestad
+    es: Thomas Nattestad
+    ja: Thomas Nattestad
+    ko: Thomas Nattestad
+    pt: Thomas Nattestad
+    ru: Thomas Nattestad
+    zh: Thomas Nattestad
+  description:
+    en: Our latest news, updates, and stories by Thomas Nattestad.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Thomas Nattestad.
+    ja: Thomas Nattestad による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Thomas Nattestad의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Thomas Nattestad.
+    ru: Последние новости и статьи от Thomas Nattestad.
+    zh: Thomas Nattestad 撰写我们的最新资讯、动态和故事。
+
+maudn:
+  title:
+    en: Maud Nalpas
+    es: Maud Nalpas
+    ja: Maud Nalpas
+    ko: Maud Nalpas
+    pt: Maud Nalpas
+    ru: Maud Nalpas
+    zh: Maud Nalpas
+  description:
+    en: Developer Advocate for Chrome and web
+    es: Desarrollador partidario para Chrome y otros sitios web
+    ja: Chrome と Web を対象とした Developer Advocate
+    ko: Chrome 및 웹 개발자 애드버킷
+    pt: Developer Advocate para Chrome e web
+    ru: Developer Advocate по вопросам Chrome и веб-разработки
+    zh: 负责 Chrome 和网络的开发技术推广工程师
+
+morss:
+  title:
+    en: Ben Morss
+    es: Ben Morss
+    ja: Ben Morss
+    ko: Ben Morss
+    pt: Ben Morss
+    ru: Ben Morss
+    zh: Ben Morss
+  description:
+    en: Our latest news, updates, and stories by Ben Morss.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Ben Morss.
+    ja: Ben Morss による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Ben Morss의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Ben Morss.
+    ru: Последние новости и статьи от Ben Morss.
+    zh: Ben Morss 撰写我们的最新资讯、动态和故事。
+
+ericbidelman:
+  title:
+    en: Eric Bidelman
+    es: Eric Bidelman
+    ja: Eric Bidelman
+    ko: Eric Bidelman
+    pt: Eric Bidelman
+    ru: Eric Bidelman
+    zh: Eric Bidelman
+  description:
+    en: Our latest news, updates, and stories by Eric Bidelman.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Eric Bidelman.
+    ja: Eric Bidelman による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Eric Bidelman의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Eric Bidelman.
+    ru: Последние новости и статьи от Eric Bidelman.
+    zh: Eric Bidelman 撰写我们的最新资讯、动态和故事。
+
+jungkees:
+  title:
+    en: Jungkee Song
+    es: Jungkee Song
+    ja: Jungkee Song
+    ko: Jungkee Song
+    pt: Jungkee Song
+    ru: Jungkee Song
+    zh: Jungkee Song
+  description:
+    en: PM on the Microsoft Edge team
+    es: Administrador de proyectos en el equipo de Microsoft Edge
+    ja: Microsoft Edge チームのプロジェクトマネージャー
+    ko: Microsoft Edge 팀 PM
+    pt: Gerente de projeto na equipe Microsoft Edge
+    ru: Менеджер по продукту в команде Microsoft Edge
+    zh: Microsoft Edge 团队的项目经理
+
+leszeks:
+  title:
+    en: Leszek Swirski
+    es: Leszek Swirski
+    ja: Leszek Swirski
+    ko: Leszek Swirski
+    pt: Leszek Swirski
+    ru: Leszek Swirski
+    zh: Leszek Swirski
+  description:
+    en: Our latest news, updates, and stories by Leszek Swirski.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Leszek Swirski.
+    ja: Leszek Swirski による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Leszek Swirski의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Leszek Swirski.
+    ru: Последние новости и статьи от Leszek Swirski.
+    zh: Leszek Swirski 撰写我们的最新资讯、动态和故事。
+
+nainar:
+  title:
+    en: Naina Raisinghani
+    es: Naina Raisinghani
+    ja: Naina Raisinghani
+    ko: Naina Raisinghani
+    pt: Naina Raisinghani
+    ru: Naina Raisinghani
+    zh: Naina Raisinghani
+  description:
+    en: Our latest news, updates, and stories by Naina Raisinghani.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Naina Raisinghani.
+    ja: Naina Raisinghani による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Naina Raisinghani의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Naina Raisinghani.
+    ru: Последние новости и статьи от Naina Raisinghani.
+    zh: Naina Raisinghani 撰写我们的最新资讯、动态和故事。
+
+crystallambert:
+  title:
+    en: Crystal Lambert
+    es: Crystal Lambert
+    ja: Crystal Lambert
+    ko: Crystal Lambert
+    pt: Crystal Lambert
+    ru: Crystal Lambert
+    zh: Crystal Lambert
+  description:
+    en: Our latest news, updates, and stories by Crystal Lambert.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Crystal Lambert.
+    ja: Crystal Lambert による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Crystal Lambert의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Crystal Lambert.
+    ru: Последние новости и статьи от Crystal Lambert.
+    zh: Crystal Lambert 撰写我们的最新资讯、动态和故事。
+
+dalmaer:
+  title:
+    en: Dion Almaer
+    es: Dion Almaer
+    ja: Dion Almaer
+    ko: Dion Almaer
+    pt: Dion Almaer
+    ru: Dion Almaer
+    zh: Dion Almaer
+  description:
+    en: Our latest news, updates, and stories by Dion Almaer.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Dion Almaer.
+    ja: Dion Almaer による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dion Almaer의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dion Almaer.
+    ru: Последние новости и статьи от Dion Almaer.
+    zh: Dion Almaer 撰写我们的最新资讯、动态和故事。
+
+bmcquade:
+  title:
+    en: Bryan McQuade
+    es: Bryan McQuade
+    ja: Bryan McQuade
+    ko: Bryan McQuade
+    pt: Bryan McQuade
+    ru: Bryan McQuade
+    zh: Bryan McQuade
+  description:
+    en: Our latest news, updates, and stories by Bryan McQuade.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Bryan McQuade.
+    ja: Bryan McQuade による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Bryan McQuade의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Bryan McQuade.
+    ru: Последние новости и статьи от Bryan McQuade.
+    zh: Bryan McQuade 撰写我们的最新资讯、动态和故事。
+
+drott:
+  title:
+    en: Dominik Röttsches
+    es: Dominik Röttsches
+    ja: Dominik Röttsches
+    ko: Dominik Röttsches
+    pt: Dominik Röttsches
+    ru: Dominik Röttsches
+    zh: Dominik Röttsches
+  description:
+    en: Our latest news, updates, and stories by Dominik Röttsches.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Dominik Röttsches.
+    ja: Dominik Röttsches による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dominik Röttsches의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dominik Röttsches.
+    ru: Последние новости и статьи от Dominik Röttsches.
+    zh: Dominik Röttsches 撰写我们的最新资讯、动态和故事。
+
+yaraki:
+  title:
+    en: Yuichi Araki
+    es: Yuichi Araki
+    ja: Yuichi Araki
+    ko: Yuichi Araki
+    pt: Yuichi Araki
+    ru: Yuichi Araki
+    zh: Yuichi Araki
+  description:
+    en: Developer Programs Engineer at Google
+    es: Ingeniero de programas para desarrolladores en Google
+    ja: Google の開発者プログラムエンジニア
+    ko: Google의 개발자 프로그램 엔지니어
+    pt: Engenheiro de programas de desenvolvedor na empresa Google
+    ru: Developer Programs Engineer в компании Google
+    zh: Google 的开发者计划工程师
+
+kevinellis:
+  title:
+    en: Kevin Ellis
+    es: Kevin Ellis
+    ja: Kevin Ellis
+    ko: Kevin Ellis
+    pt: Kevin Ellis
+    ru: Kevin Ellis
+    zh: Kevin Ellis
+  description:
+    en: Software Engineer on the web platform.
+    es: Ingeniero de software en la plataforma web.
+    ja: Web プラットフォームのソフトウェアエンジニア。
+    ko: 웹 플랫폼 소프트웨어 엔지니어.
+    pt: Engenheiro de software na plataforma web.
+    ru: Инженер-программист, участвующий в разработке веб-платформы.
+    zh: 负责网络平台的软件工程师。
+
+robertnyman:
+  title:
+    en: Robert Nyman
+    es: Robert Nyman
+    ja: Robert Nyman
+    ko: Robert Nyman
+    pt: Robert Nyman
+    ru: Robert Nyman
+    zh: Robert Nyman
+  description:
+    en: Developer advocate on the web team at Google.
+    es: Desarrollador partidario en el equipo web de Google.
+    ja: Google の Web チームの Developer Advocate。
+    ko: Google 웹 팀의 개발자 애드버킷.
+    pt: Developer Advocate na equipe da web na empresa Google.
+    ru: Developer Advocate в команде разработки веб-технологий компании Google.
+    zh: Google 网络团队的开发技术推广工程师。
+
+foolip:
+  title:
+    en: Philip Jägenstedt
+    es: Philip Jägenstedt
+    ja: Philip Jägenstedt
+    ko: Philip Jägenstedt
+    pt: Philip Jägenstedt
+    ru: Philip Jägenstedt
+    zh: Philip Jägenstedt
+  description:
+    en: Our latest news, updates, and stories by Philip Jägenstedt.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Philip Jägenstedt.
+    ja: Philip Jägenstedt による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Philip Jägenstedt의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Philip Jägenstedt.
+    ru: Последние новости и статьи от Philip Jägenstedt.
+    zh: Philip Jägenstedt 撰写我们的最新资讯、动态和故事。
+
+olgademidova:
+  title:
+    en: Olga Demidova
+    es: Olga Demidova
+    ja: Olga Demidova
+    ko: Olga Demidova
+    pt: Olga Demidova
+    ru: Olga Demidova
+    zh: Olga Demidova
+  description:
+    en: Product Marketing Manager
+    es: Gerente de marketing de productos
+    ja: プロダクトマーケティングマネージャー
+    ko: 제품 마케팅 관리자
+    pt: Gerente de marketing de produtos
+    ru: Менеджер по маркетингу продуктов
+    zh: 产品营销经理
+
+gilbertococchi:
+  title:
+    en: Gilberto Cocchi
+    es: Gilberto Cocchi
+    ja: Gilberto Cocchi
+    ko: Gilberto Cocchi
+    pt: Gilberto Cocchi
+    ru: Gilberto Cocchi
+    zh: Gilberto Cocchi
+  description:
+    en: Our latest news, updates, and stories by Gilberto Cocchi.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Gilberto Cocchi.
+    ja: Gilberto Cocchi による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Gilberto Cocchi의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Gilberto Cocchi.
+    ru: Последние новости и статьи от Gilberto Cocchi.
+    zh: Gilberto Cocchi 撰写我们的最新资讯、动态和故事。
+
+antonkarlovskiy:
+  title:
+    en: Anton Karlovskiy
+    es: Anton Karlovskiy
+    ja: Anton Karlovskiy
+    ko: Anton Karlovskiy
+    pt: Anton Karlovskiy
+    ru: Anton Karlovskiy
+    zh: Anton Karlovskiy
+  description:
+    en: Our latest news, updates, and stories by Anton Karlovskiy.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Anton Karlovskiy.
+    ja: Anton Karlovskiy による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Anton Karlovskiy의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Anton Karlovskiy.
+    ru: Последние новости и статьи от Anton Karlovskiy.
+    zh: Anton Karlovskiy 撰写我们的最新资讯、动态和故事。
+
+rkochman:
+  title:
+    en: Rob Kochman
+    es: Rob Kochman
+    ja: Rob Kochman
+    ko: Rob Kochman
+    pt: Rob Kochman
+    ru: Rob Kochman
+    zh: Rob Kochman
+  description:
+    en: Our latest news, updates, and stories by Rob Kochman.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Rob Kochman.
+    ja: Rob Kochman による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Rob Kochman의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Rob Kochman.
+    ru: Последние новости и статьи от Rob Kochman.
+    zh: Rob Kochman 撰写我们的最新资讯、动态和故事。
+
+jonchen:
+  title:
+    en: Jonathan Chen
+    es: Jonathan Chen
+    ja: Jonathan Chen
+    ko: Jonathan Chen
+    pt: Jonathan Chen
+    ru: Джонатан Чен
+    zh: Jonathan Chen
+  description:
+    en: Web Ecosystem Consultant
+    es: Consultor de ecosistemas web
+    ja: Web エコシステムコンサルタント
+    ko: 웹 생태계 컨설턴트
+    pt: Consultor de ecossistemas web
+    ru: Консультант по веб-экосистеме
+    zh: 网络生态系统顾问
+
+msdikla:
+  title:
+    en: Dikla Cohen
+    es: Dikla Cohen
+    ja: Dikla Cohen
+    ko: Dikla Cohen
+    pt: Dikla Cohen
+    ru: Dikla Cohen
+    zh: Dikla Cohen
+  description:
+    en: Our latest news, updates, and stories by Dikla Cohen.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Dikla Cohen.
+    ja: Dikla Cohen による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dikla Cohen의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dikla Cohen.
+    ru: Последние новости и статьи от Dikla Cohen.
+    zh: Dikla Cohen 撰写我们的最新资讯、动态和故事。
+
+bpj:
+  title:
+    en: Bart Jarochowski
+    es: Bart Jarochowski
+    ja: Bart Jarochowski
+    ko: Bart Jarochowski
+    pt: Bart Jarochowski
+    ru: Bart Jarochowski
+    zh: Bart Jarochowski
+  description:
+    en: Our latest news, updates, and stories by Bart Jarochowski.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Bart Jarochowski.
+    ja: Bart Jarochowski による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Bart Jarochowski의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Bart Jarochowski.
+    ru: Последние новости и статьи от Bart Jarochowski.
+    zh: Bart Jarochowski 撰写我们的最新资讯、动态和故事。
+
+harrytheodoulou:
+  title:
+    en: Harry Theodoulou
+    es: Harry Theodoulou
+    ja: Harry Theodoulou
+    ko: Harry Theodoulou
+    pt: Harry Theodoulou
+    ru: Harry Theodoulou
+    zh: Harry Theodoulou
+  description:
+    en: Our latest news, updates, and stories by Harry Theodoulou.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Harry Theodoulou.
+    ja: Harry Theodoulou による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Harry Theodoulou의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Harry Theodoulou.
+    ru: Последние новости и статьи от Harry Theodoulou.
+    zh: Harry Theodoulou 撰写我们的最新资讯、动态和故事。
+
+natashakosoglov:
+  title:
+    en: Natasha Kosoglov
+    es: Natasha Kosoglov
+    ja: Natasha Kosoglov
+    ko: Natasha Kosoglov
+    pt: Natasha Kosoglov
+    ru: Natasha Kosoglov
+    zh: Natasha Kosoglov
+  description:
+    en: Our latest news, updates, and stories by Natasha Kosoglov.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Natasha Kosoglov.
+    ja: Natasha Kosoglov による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Natasha Kosoglov의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Natasha Kosoglov.
+    ru: Последние новости и статьи от Natasha Kosoglov.
+    zh: Natasha Kosoglov 撰写我们的最新资讯、动态和故事。
+
+mattreynolds:
+  title:
+    en: Matt Reynolds
+    es: Matt Reynolds
+    ja: Matt Reynolds
+    ko: Matt Reynolds
+    pt: Matt Reynolds
+    ru: Matt Reynolds
+    zh: Matt Reynolds
+  description:
+    en: Matt is a software developer
+    es: Matt es un desarrollador de software
+    ja: Matt はソフトウェア開発者です
+    ko: Matt는 소프트웨어 개발자입니다.
+    pt: Matt é um desenvolvedor de software
+    ru: Мэтт — разработчик программного обеспечения
+    zh: Matt 是一名软件开发者
+
+joriktangelder:
+  title:
+    en: Jorik Tangelder
+    es: Jorik Tangelder
+    ja: Jorik Tangelder
+    ko: Jorik Tangelder
+    pt: Jorik Tangelder
+    ru: Jorik Tangelder
+    zh: Jorik Tangelder
+  description:
+    en: User Experience Engineer
+    es: Ingeniero de Experiencia de usuario
+    ja: ユーザーエクスペリエンスエンジニア
+    ko: 사용자 경험 엔지니어
+    pt: Engenheiro de experiência de usuário
+    ru: UX-инженер
+    zh: 用户体验工程师
+
+sahel:
+  title:
+    en: Sahel Sharify
+    es: Sahel Sharify
+    ja: Sahel Sharify
+    ko: Sahel Sharify
+    pt: Sahel Sharify
+    ru: Sahel Sharify
+    zh: Sahel Sharify
+  description:
+    en: Our latest news, updates, and stories by Sahel Sharify.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Sahel Sharify.
+    ja: Sahel Sharify による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Sahel Sharify의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Sahel Sharify.
+    ru: Последние новости и статьи от Sahel Sharify.
+    zh: Sahel Sharify 撰写我们的最新资讯、动态和故事。
+
+loirooriol:
+  title:
+    en: Oriol Brufau
+    es: Oriol Brufau
+    ja: Oriol Brufau
+    ko: Oriol Brufau
+    pt: Oriol Brufau
+    ru: Oriol Brufau
+    zh: Oriol Brufau
+  description:
+    en: Our latest news, updates, and stories by Oriol Brufau.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Oriol Brufau.
+    ja: Oriol Brufau による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Oriol Brufau의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Oriol Brufau.
+    ru: Последние новости и статьи от Oriol Brufau.
+    zh: Oriol Brufau 撰写我们的最新资讯、动态和故事。
+
+joelriley:
+  title:
+    en: Joel Riley
+    es: Joel Riley
+    ja: Joel Riley
+    ko: Joel Riley
+    pt: Joel Riley
+    ru: Joel Riley
+    zh: Joel Riley
+  description:
+    en: Our latest news, updates, and stories by Joel Riley.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Joel Riley.
+    ja: Joel Riley による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Joel Riley의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Joel Riley.
+    ru: Последние новости и статьи от Joel Riley.
+    zh: Joel Riley 撰写我们的最新资讯、动态和故事。
+
+douglasparker:
+  title:
+    en: Douglas Parker
+    es: Douglas Parker
+    ja: Douglas Parker
+    ko: Douglas Parker
+    pt: Douglas Parker
+    ru: Douglas Parker
+    zh: Douglas Parker
+  description:
+    en: Our latest news, updates, and stories by Douglas Parker.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Douglas Parker.
+    ja: Douglas Parker による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Douglas Parker의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Douglas Parker.
+    ru: Последние новости и статьи от Douglas Parker.
+    zh: Douglas Parker 撰写我们的最新资讯、动态和故事。
+
+vladimirlevin:
+  title:
+    en: Vladimir Levin
+    es: Vladimir Levin
+    ja: Vladimir Levin
+    ko: Vladimir Levin
+    pt: Vladimir Levin
+    ru: Vladimir Levin
+    zh: Vladimir Levin
+  description:
+    en: Our latest news, updates, and stories by Vladimir Levin.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Vladimir Levin.
+    ja: Vladimir Levin による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Vladimir Levin의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Vladimir Levin.
+    ru: Последние новости и статьи от Vladimir Levin.
+    zh: Vladimir Levin 撰写我们的最新资讯、动态和故事。
+
+rreverser:
+  title:
+    en: Ingvar Stepanyan
+    es: Ingvar Stepanyan
+    ja: Ingvar Stepanyan
+    ko: Ingvar Stepanyan
+    pt: Ingvar Stepanyan
+    ru: Ingvar Stepanyan
+    zh: Ingvar Stepanyan
+  description:
+    en: WebAssembly Advocadoer
+    es: Desarrollador partidario en WebAssembly
+    ja: WebAssembly の Developer Advocate
+    ko: WebAssembly Advocadoer
+    pt: WebAssembly Advocadoer
+    ru: Advocadoer по вопросам WebAssembly
+    zh: WebAssembly Advocadoer
+
+masonfreed:
+  title:
+    en: Mason Freed
+    es: Mason Freed
+    ja: Mason Freed
+    ko: Mason Freed
+    pt: Mason Freed
+    ru: Mason Freed
+    zh: Mason Freed
+  description:
+    en: Developer on the Chrome team
+    es: Desarrollador en el equipo de Chrome
+    ja: Chrome チームに所属する開発者
+    ko: Chrome 팀 개발자
+    pt: Desenvolvedor na equipe do Chrome
+    ru: Разработчик в команде Chrome
+    zh: Chrome 团队的开发者
+
+roeln:
+  title:
+    en: Roel Nieskens
+    es: Roel Nieskens
+    ja: Roel Nieskens
+    ko: Roel Nieskens
+    pt: Roel Nieskens
+    ru: Roel Nieskens
+    zh: Roel Nieskens
+  description:
+    en: Our latest news, updates, and stories by Roel Nieskens.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Roel Nieskens.
+    ja: Roel Nieskens による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Roel Nieskens의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Roel Nieskens.
+    ru: Последние новости и статьи от Roel Nieskens.
+    zh: Roel Nieskens 撰写我们的最新资讯、动态和故事。
+
+dcrossland:
+  title:
+    en: Dave Crossland
+    es: Dave Crossland
+    ja: Dave Crossland
+    ko: Dave Crossland
+    pt: Dave Crossland
+    ru: Dave Crossland
+    zh: Dave Crossland
+  description:
+    en: Our latest news, updates, and stories by Dave Crossland.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Dave Crossland.
+    ja: Dave Crossland による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dave Crossland의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dave Crossland.
+    ru: Последние новости и статьи от Dave Crossland.
+    zh: Dave Crossland 撰写我们的最新资讯、动态和故事。
+
+aaronleventhal:
+  title:
+    en: Aaron Leventhal
+    es: Aaron Leventhal
+    ja: Aaron Leventhal
+    ko: Aaron Leventhal
+    pt: Aaron Leventhal
+    ru: Aaron Leventhal
+    zh: Aaron Leventhal
+  description:
+    en: Software Engineer
+    es: Ingeniero de software
+    ja: ソフトウェアエンジニア
+    ko: 소프트웨어 엔지니어
+    pt: Engenheiro de software
+    ru: Инженер-программист
+    zh: 软件工程师
+
+joanbaca:
+  title:
+    en: Joan Baca
+    es: Joan Baca
+    ja: Joan Baca
+    ko: Joan Baca
+    pt: Joan Baca
+    ru: Joan Baca
+    zh: Joan Baca
+  description:
+    en: Our latest news, updates, and stories by Joan Baca.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Joan Baca.
+    ja: Joan Baca による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Joan Baca의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Joan Baca.
+    ru: Последние новости и статьи от Joan Baca.
+    zh: Joan Baca 撰写我们的最新资讯、动态和故事。
+
+aranhacarlos:
+  title:
+    en: Carlos Aranha
+    es: Carlos Aranha
+    ja: Carlos Aranha
+    ko: Carlos Aranha
+    pt: Carlos Aranha
+    ru: Carlos Aranha
+    zh: Carlos Aranha
+  description:
+    en: Our latest news, updates, and stories by Carlos Aranha.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Carlos Aranha.
+    ja: Carlos Aranha による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Carlos Aranha의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Carlos Aranha.
+    ru: Последние новости и статьи от Carlos Aranha.
+    zh: Carlos Aranha 撰写我们的最新资讯、动态和故事。
+
+scottfriesen:
+  title:
+    en: Scott Friesen
+    es: Scott Friesen
+    ja: Scott Friesen
+    ko: Scott Friesen
+    pt: Scott Friesen
+    ru: Scott Friesen
+    zh: Scott Friesen
+  description:
+    en: Our latest news, updates, and stories by Scott Friesen.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Scott Friesen.
+    ja: Scott Friesen による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Scott Friesen의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Scott Friesen.
+    ru: Последние новости и статьи от Scott Friesen.
+    zh: Scott Friesen 撰写我们的最新资讯、动态和故事。
+
+bartekn:
+  title:
+    en: Bartek Nowierski
+    es: Bartek Nowierski
+    ja: Bartek Nowierski
+    ko: Bartek Nowierski
+    pt: Bartek Nowierski
+    ru: Bartek Nowierski
+    zh: Bartek Nowierski
+  description:
+    en: Chrome Software Engineer
+    es: Ingeniero de software de Chrome
+    ja: Chrome ソフトウェアエンジニア
+    ko: Chrome 소프트웨어 엔지니어
+    pt: Engenheiro de software do Chrome
+    ru: Инженер-программист проекта Chrome
+    zh: Chrome 软件工程师
+
+djuffin:
+  title:
+    en: Eugene Zemtsov
+    es: Eugene Zemtsov
+    ja: Eugene Zemtsov
+    ko: Eugene Zemtsov
+    pt: Eugene Zemtsov
+    ru: Eugene Zemtsov
+    zh: Eugene Zemtsov
+  description:
+    en: Our latest news, updates, and stories by Eugene Zemtsov.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Eugene Zemtsov.
+    ja: Eugene Zemtsov による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Eugene Zemtsov의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Eugene Zemtsov.
+    ru: Последние новости и статьи от Eugene Zemtsov.
+    zh: Eugene Zemtsov 撰写我们的最新资讯、动态和故事。
+
+giesau:
+  title:
+    en: Stephan Giesau
+    es: Stephan Giesau
+    ja: Stephan Giesau
+    ko: Stephan Giesau
+    pt: Stephan Giesau
+    ru: Stephan Giesau
+    zh: Stephan Giesau
+  description:
+    en: Our latest news, updates, and stories by Stephan Giesau.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Stephan Giesau.
+    ja: Stephan Giesau による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Stephan Giesau의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Stephan Giesau.
+    ru: Последние новости и статьи от Stephan Giesau.
+    zh: Stephan Giesau 撰写我们的最新资讯、动态和故事。
+
+mattgaunt:
+  title:
+    en: Matt Gaunt
+    es: Matt Gaunt
+    ja: Matt Gaunt
+    ko: Matt Gaunt
+    pt: Matt Gaunt
+    ru: Matt Gaunt
+    zh: Matt Gaunt
+  description:
+    en: Our latest news, updates, and stories by Matt Gaunt.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Matt Gaunt.
+    ja: Matt Gaunt による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Matt Gaunt의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Matt Gaunt.
+    ru: Последние новости и статьи от Matt Gaunt.
+    zh: Matt Gaunt 撰写我们的最新资讯、动态和故事。
+
+reillyg:
+  title:
+    en: Reilly Grant
+    es: Reilly Grant
+    ja: Reilly Grant
+    ko: Reilly Grant
+    pt: Reilly Grant
+    ru: Reilly Grant
+    zh: Reilly Grant
+  description:
+    en: Software Engineer on Google Chrome focusing on hardware APIs
+    es: Ingeniero de software en Google Chrome centrado en las API de hardware
+    ja: ハードウェア API に関心を持つ Google Chrome のソフトウェアエンジニア
+    ko: 하드웨어 API에 중점을 둔 Chrome의 소프트웨어 엔지니어
+    pt: Engenheiro de software no Google Chrome com foco em APIs de hardware
+    ru: Инженер-программист в команде Google Chrome, специализирующийся на API для работы с устройствами
+    zh: 专注于硬件 API 的 Google Chrome 软件工程师
+
+nateschloss:
+  title:
+    en: Nate Schloss
+    es: Nate Schloss
+    ja: Nate Schloss
+    ko: Nate Schloss
+    pt: Nate Schloss
+    ru: Nate Schloss
+    zh: Nate Schloss
+  description:
+    en: Our latest news, updates, and stories by Nate Schloss.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Nate Schloss.
+    ja: Nate Schloss による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Nate Schloss의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Nate Schloss.
+    ru: Последние новости и статьи от Nate Schloss.
+    zh: Nate Schloss 撰写我们的最新资讯、动态和故事。
+
+andrewcomminos:
+  title:
+    en: Andrew Comminos
+    es: Andrew Comminos
+    ja: Andrew Comminos
+    ko: Andrew Comminos
+    pt: Andrew Comminos
+    ru: Andrew Comminos
+    zh: Andrew Comminos
+  description:
+    en: Our latest news, updates, and stories by Andrew Comminos.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Andrew Comminos.
+    ja: Andrew Comminos による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Andrew Comminos의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Andrew Comminos.
+    ru: Последние новости и статьи от Andrew Comminos.
+    zh: Andrew Comminos 撰写我们的最新资讯、动态和故事。
+
+bingler:
+  title:
+    en: Steven Bingler
+    es: Steven Bingler
+    ja: Steven Bingler
+    ko: Steven Bingler
+    pt: Steven Bingler
+    ru: Steven Bingler
+    zh: Steven Bingler
+  description:
+    en: Software engineer on Chrome's Privacy Sandbox.
+    es: Ingeniero de software para Privacy Sandbox de Chrome.
+    ja: Chrome の Privacy Sandbox の開発に取り組むソフトウェアエンジニア。
+    ko: Chrome의 개인정보 보호 샌드박스 소프트웨어 엔지니어입니다.
+    pt: Engenheiro de software na Privacy Sandbox do Chrome.
+    ru: Инженер-программист, работающий над Chrome Privacy Sandbox.
+    zh: Chrome 隐私沙盒的软件工程师。
+
+andrewguan:
+  title:
+    en: Andrew Guan
+    es: Andrew Guan
+    ja: Andrew Guan
+    ko: Andrew Guan
+    pt: Andrew Guan
+    ru: Andrew Guan
+    zh: Andrew Guan
+  description:
+    en: Our latest news, updates, and stories by Andrew Guan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Andrew Guan.
+    ja: Andrew Guan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Andrew Guan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Andrew Guan.
+    ru: Последние новости и статьи от Andrew Guan.
+    zh: Andrew Guan 撰写我们的最新资讯、动态和故事。
+
+sorenbalko:
+  title:
+    en: Sören Balko
+    es: Sören Balko
+    ja: Sören Balko
+    ko: Sören Balko
+    pt: Sören Balko
+    ru: Sören Balko
+    zh: Sören Balko
+  description:
+    en: CTO at Clipchamp
+    es: CTO en Clipchamp
+    ja: Clipchamp の CTO
+    ko: Clipchamp의 CTO
+    pt: CTO na empresa Clipchamp
+    ru: Технический директор компании Clipchamp
+    zh: Clipchamp 首席技术官
+
+rezakazemi:
+  title:
+    en: Reza Kazemi
+    es: Reza Kazemi
+    ja: Reza Kazemi
+    ko: Reza Kazemi
+    pt: Reza Kazemi
+    ru: Reza Kazemi
+    zh: Reza Kazemi
+  description:
+    en: Product Manager at Corel
+    es: Gerente de productos de Corel
+    ja: Corel のプロダクトマネージャー
+    ko: Corel의 제품 관리자
+    pt: Gerente de produtos da Corel
+    ru: Менеджер по продукту в компании Corel
+    zh: Corel 产品经理
+
+antoinebisch:
+  title:
+    en: Antoine Bisch
+    es: Antoine Bisch
+    ja: Antoine Bisch
+    ko: Antoine Bisch
+    pt: Antoine Bisch
+    ru: Antoine Bisch
+    zh: Antoine Bisch
+  description:
+    en: Web Ecosystem Consultant
+    es: Consultor de ecosistemas web
+    ja: Web エコシステムコンサルタント
+    ko: 웹 생태계 컨설턴트
+    pt: Consultor de ecossistemas web
+    ru: Консультант по веб-экосистеме
+    zh: 网络生态系统顾问
+
+anniesullie:
+  title:
+    en: Annie Sullivan
+    es: Annie Sullivan
+    ja: Annie Sullivan
+    ko: Annie Sullivan
+    pt: Annie Sullivan
+    ru: Annie Sullivan
+    zh: Annie Sullivan
+  description:
+    en: Our latest news, updates, and stories by Annie Sullivan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Annie Sullivan.
+    ja: Annie Sullivan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Annie Sullivan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Annie Sullivan.
+    ru: Последние новости и статьи от Annie Sullivan.
+    zh: Annie Sullivan 撰写我们的最新资讯、动态和故事。
+
+mmocny:
+  title:
+    en: Michal Mocny
+    es: Michal Mocny
+    ja: Michal Mocny
+    ko: Michal Mocny
+    pt: Michal Mocny
+    ru: Michal Mocny
+    zh: Michal Mocny
+  description:
+    en: Our latest news, updates, and stories by Michal Mocny.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Michal Mocny.
+    ja: Michal Mocny による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Michal Mocny의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Michal Mocny.
+    ru: Последние новости и статьи от Michal Mocny.
+    zh: Michal Mocny 撰写我们的最新资讯、动态和故事。
+
+huib:
+  title:
+    en: Huib Kleinhout
+    es: Huib Kleinhout
+    ja: Huib Kleinhout
+    ko: Huib Kleinhout
+    pt: Huib Kleinhout
+    ru: Huib Kleinhout
+    zh: Huib Kleinhout
+  description:
+    en: Our latest news, updates, and stories by Huib Kleinhout.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Huib Kleinhout.
+    ja: Huib Kleinhout による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Huib Kleinhout의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Huib Kleinhout.
+    ru: Последние новости и статьи от Huib Kleinhout.
+    zh: Huib Kleinhout 撰写我们的最新资讯、动态和故事。
+
+sisidovski:
+  title:
+    en: Shunya Shishido
+    es: Shunya Shishido
+    ja: Shunya Shishido
+    ko: Shunya Shishido
+    pt: Shunya Shishido
+    ru: Shunya Shishido
+    zh: Shunya Shishido
+  description:
+    en: Web Ecosystem Consultant
+    es: Consultor de ecosistemas web
+    ja: Web エコシステムコンサルタント
+    ko: 웹 생태계 컨설턴트
+    pt: Consultor de ecossistemas web
+    ru: Консультант по веб-экосистеме
+    zh: 网络生态系统顾问
+
+gladenjoy:
+  title:
+    en: Tomoki Kiraku
+    es: Tomoki Kiraku
+    ja: Tomoki Kiraku
+    ko: Tomoki Kiraku
+    pt: Tomoki Kiraku
+    ru: Tomoki Kiraku
+    zh: Tomoki Kiraku
+  description:
+    en: Our latest news, updates, and stories by Tomoki Kiraku.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Tomoki Kiraku.
+    ja: Tomoki Kiraku による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Tomoki Kiraku의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Tomoki Kiraku.
+    ru: Последние новости и статьи от Tomoki Kiraku.
+    zh: Tomoki Kiraku 撰写我们的最新资讯、动态和故事。
+
+alonko:
+  title:
+    en: Alon Kochba
+    es: Alon Kochba
+    ja: Alon Kochba
+    ko: Alon Kochba
+    pt: Alon Kochba
+    ru: Alon Kochba
+    zh: Alon Kochba
+  description:
+    en: Our latest news, updates, and stories by Alon Kochba.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Alon Kochba.
+    ja: Alon Kochba による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Alon Kochba의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Alon Kochba.
+    ru: Последние новости и статьи от Alon Kochba.
+    zh: Alon Kochba 撰写我们的最新资讯、动态和故事。
+
+choudhuryashish:
+  title:
+    en: Ashish Choudhury
+    es: Ashish Choudhury
+    ja: Ashish Choudhury
+    ko: Ashish Choudhury
+    pt: Ashish Choudhury
+    ru: Ashish Choudhury
+    zh: Ashish Choudhury
+  description:
+    en: Our latest news, updates, and stories by Ashish Choudhury.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Ashish Choudhury.
+    ja: Ashish Choudhury による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Ashish Choudhury의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Ashish Choudhury.
+    ru: Последние новости и статьи от Ashish Choudhury.
+    zh: Ashish Choudhury 撰写我们的最新资讯、动态和故事。
+
+dinakarchandolu:
+  title:
+    en: Dinakar Chandolu
+    es: Dinakar Chandolu
+    ja: Dinakar Chandolu
+    ko: Dinakar Chandolu
+    pt: Dinakar Chandolu
+    ru: Dinakar Chandolu
+    zh: Dinakar Chandolu
+  description:
+    en: Our latest news, updates, and stories by Dinakar Chandolu.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Dinakar Chandolu.
+    ja: Dinakar Chandolu による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dinakar Chandolu의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dinakar Chandolu.
+    ru: Последние новости и статьи от Dinakar Chandolu.
+    zh: Dinakar Chandolu 撰写我们的最新资讯、动态和故事。
+
+abhimanyuraibahadur:
+  title:
+    en: Abhimanyu Raibahadur
+    es: Abhimanyu Raibahadur
+    ja: Abhimanyu Raibahadur
+    ko: Abhimanyu Raibahadur
+    pt: Abhimanyu Raibahadur
+    ru: Abhimanyu Raibahadur
+    zh: Abhimanyu Raibahadur
+  description:
+    en: Our latest news, updates, and stories by Abhimanyu Raibahadur.
+    es: Nuestras últimas noticias, actualizaciones e historias de Abhimanyu Raibahadur.
+    ja: Abhimanyu Raibahadur による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Abhimanyu Raibahadur의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Abhimanyu Raibahadur.
+    ru: Последние новости и статьи от Abhimanyu Raibahadur.
+    zh: Abhimanyu Raibahadur 撰写我们的最新资讯、动态和故事。
+
+dhilipvenkateshuvarajan:
+  title:
+    en: Dhilip venkatesh Uvarajan
+    es: Dhilip venkatesh Uvarajan
+    ja: Dhilip venkatesh Uvarajan
+    ko: Dhilip venkatesh Uvarajan
+    pt: Dhilip venkatesh Uvarajan
+    ru: Dhilip venkatesh Uvarajan
+    zh: Dhilip venkatesh Uvarajan
+  description:
+    en: Our latest news, updates, and stories by Dhilip venkatesh Uvarajan.
+    es: Nuestras últimas noticias, actualizaciones e historias de Dhilip venkatesh Uvarajan.
+    ja: Dhilip venkatesh Uvarajan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Dhilip venkatesh Uvarajan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Dhilip venkatesh Uvarajan.
+    ru: Последние новости и статьи от Dhilip venkatesh Uvarajan.
+    zh: Dhilip venkatesh Uvarajan 撰写我们的最新资讯、动态和故事。
+
+safwans:
+  title:
+    en: Safwan Samla
+    es: Safwan Samla
+    ja: Safwan Samla
+    ko: Safwan Samla
+    pt: Safwan Samla
+    ru: Safwan Samla
+    zh: Safwan Samla
+  description:
+    en: Our latest news, updates, and stories by Safwan Samla.
+    es: Nuestras últimas noticias, actualizaciones e historias de Safwan Samla.
+    ja: Safwan Samla による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Safwan Samla의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Safwan Samla.
+    ru: Последние новости и статьи от Safwan Samla.
+    zh: Safwan Samla 撰写我们的最新资讯、动态和故事。
+
+andybell:
+  title:
+    en: Andy Bell
+    es: Andy Bell
+    ja: Andy Bell
+    ko: Andy Bell
+    pt: Andy Bell
+    ru: Andy Bell
+    zh: Andy Bell
+  description:
+    en: Freelance designer and educator
+    es: Diseñador y profesor independiente
+    ja: フリーランスのデザイナー兼教育者
+    ko: 프리랜서 디자이너 겸 교육자
+    pt: Designer e educador freelancer
+    ru: Дизайнер-фрилансер и автор обучающих материалов
+    zh: 自由设计师和教育工作者
+
+ajara:
+  title:
+    en: Adriana Jara
+    es: Adriana Jara
+    ja: Adriana Jara
+    ko: Adriana Jara
+    pt: Adriana Jara
+    ru: Adriana Jara
+    zh: Adriana Jara
+  description:
+    en: Adriana is a Developer Relations Engineer
+    es: Adriana es una ingeniera DevRel
+    ja: Adriana は開発者リレーションエンジニアです
+    ko: Adriana는 개발자 관계 엔지니어입니다.
+    pt: Adriana é engenheira de relações com desenvolvedores
+    ru: Адриана — DevRel-инженер
+    zh: Adriana 是一名开发者关系工程师
+
+jbrockmeyer:
+  title:
+    en: Jan Brockmeyer
+    es: Jan Brockmeyer
+    ja: Jan Brockmeyer
+    ko: Jan Brockmeyer
+    pt: Jan Brockmeyer
+    ru: Jan Brockmeyer
+    zh: Jan Brockmeyer
+  description:
+    en: Our latest news, updates, and stories by Jan Brockmeyer.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Jan Brockmeyer.
+    ja: Jan Brockmeyer による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Jan Brockmeyer의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Jan Brockmeyer.
+    ru: Последние новости и статьи от Jan Brockmeyer.
+    zh: Jan Brockmeyer 撰写我们的最新资讯、动态和故事。
+
+jcolin:
+  title:
+    en: Jeremy Colin
+    es: Jeremy Colin
+    ja: Jeremy Colin
+    ko: Jeremy Colin
+    pt: Jeremy Colin
+    ru: Jeremy Colin
+    zh: Jeremy Colin
+  description:
+    en: Engineering Manager
+    es: Gerente de Ingeniería
+    ja: エンジニアリングマネージャー
+    ko: 엔지니어링 관리자
+    pt: Gerente de engenharia
+    ru: Менеджер по разработке
+    zh: 工程经理
+
+hbsong:
+  title:
+    en: Hongbo Song
+    es: Hongbo Song
+    ja: Hongbo Song
+    ko: Hongbo Song
+    pt: Hongbo Song
+    ru: Hongbo Song
+    zh: Hongbo Song
+  description:
+    en: Our latest news, updates, and stories by Hongbo Song.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Hongbo Song.
+    ja: Hongbo Song による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Hongbo Song의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Hongbo Song.
+    ru: Последние новости и статьи от Hongbo Song.
+    zh: Hongbo Song 撰写我们的最新资讯、动态和故事。
+
+adamskret:
+  title:
+    en: Adam Skręt
+    es: Adam Skręt
+    ja: Adam Skręt
+    ko: Adam Skręt
+    pt: Adam Skręt
+    ru: Adam Skręt
+    zh: Adam Skręt
+  description:
+    en: Director of Digital & Performance Marketing, Orange Polska S.A.
+    es: Director de marketing digital y rendimiento de Orange Polska S.A.
+    ja: Orange Polska S.A. に所属するデジタル & パフォーマンスマーケティングディレクター
+    ko: 디지털 및 성능 마케팅 이사, Orange Polska SA
+    pt: Diretor de marketing digital e desempenho, Orange Polska S.A.
+    ru: Директор по цифровому и performance-маркетингу, Orange Polska S.A.
+    zh: Orange Polska S.A. 数字和绩效营销总监
+
+rafałfilipek:
+  title:
+    en: Rafał Filipek
+    es: Rafał Filipek
+    ja: Rafał Filipek
+    ko: Rafał Filipek
+    pt: Rafał Filipek
+    ru: Rafał Filipek
+    zh: Rafał Filipek
+  description:
+    en: Lead Frontend Developer, Orange Polska S.A.
+    es: Desarrollador principal de front-end en Orange Polska S.A.
+    ja: Orange Polska S.A. に所属するリードフロントエンド開発者
+    ko: 수석 프런트엔드 개발자, Orange Polska SA
+    pt: Desenvolvedor líder de front-end, Orange Polska S.A.
+    ru: Ведущий фронтенд-разработчик, Orange Polska S.A.
+    zh: Orange Polska S.A. 首席前端开发者
+
+marcinsierakowski:
+  title:
+    en: Marcin Sierakowski
+    es: Marcin Sierakowski
+    ja: Marcin Sierakowski
+    ko: Marcin Sierakowski
+    pt: Marcin Sierakowski
+    ru: Marcin Sierakowski
+    zh: Marcin Sierakowski
+  description:
+    en: Director of Sales Platforms Development & Maintenance, Orange Polska S.A.
+    es: Director de desarrollo y mantenimiento de plataformas de ventas en Orange Polska S.A.
+    ja: Orange Polska S.A. に所属する販売プラットフォーム開発 & メンテナンスディレクター
+    ko: 영업 플랫폼 개발 및 유지관리 이사, Orange Polska SA
+    pt: Diretor de desenvolvimento e manutenção de plataformas de vendas, Orange Polska S.A.
+    ru: Директор по развитию и поддержке торговых платформ, Orange Polska S.A.
+    zh: Orange Polska S.A. 销售平台开发与维护总监
+
+jiwoong:
+  title:
+    en: Jiwoong Lee
+    es: Jiwoong Lee
+    ja: Jiwoong Lee
+    ko: 이지웅
+    pt: Jiwoong Lee
+    ru: Jiwoong Lee
+    zh: 李智雄
+  description:
+    en: UX Designer for Web Platform & Chrome
+    es: Diseñador de UX para Web Platform y Chrome
+    ja: Web プラットフォームと Chrome を対象とした UX デザイナー
+    ko: 웹 플랫폼 및 Chrome의 UX 디자이너
+    pt: Designer de UX para plataforma web e Chrome
+    ru: UX-дизайнер веб-платформы и Chrome
+    zh: 网络平台与 Chrome 用户体验设计师
+
+christianliebel:
+  title:
+    en: Christian Liebel
+    es: Christian Liebel
+    ja: Christian Liebel
+    ko: Christian Liebel
+    pt: Christian Liebel
+    ru: Christian Liebel
+    zh: Christian Liebel
+  description:
+    en: GDE for Web Capabilities & Angular
+    es: Diseñador de GDE para funcionalidades web y de Angular
+    ja: Web Capabilities と Angular を対象とした GDE
+    ko: 웹 기능 및 Angular의 GDE
+    pt: Designer GDE para Web Capabilities e Angular
+    ru: Эксперт GDE по веб-возможностям и Angular
+    zh: 专攻网络功能与 Angular 的 Google 开发者专家
+
+mgiuca:
+  title:
+    en: Matt Giuca
+    es: Matt Giuca
+    ja: Matt Giuca
+    ko: Matt Giuca
+    pt: Matt Giuca
+    ru: Matt Giuca
+    zh: Matt Giuca
+  description:
+    en: Our latest news, updates, and stories by Matt Giuca.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Matt Giuca.
+    ja: Matt Giuca による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Matt Giuca의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Matt Giuca.
+    ru: Последние новости и статьи от Мэтта Джуки.
+    zh: Matt Giuca 撰写我们的最新资讯、动态和故事。
+
+swethagopalakrishnan:
+  title:
+    en: Swetha Gopalakrishnan
+    es: Swetha Gopalakrishnan
+    ja: Swetha Gopalakrishnan
+    ko: Swetha Gopalakrishnan
+    pt: Swetha Gopalakrishnan
+    ru: Swetha Gopalakrishnan
+    zh: Swetha Gopalakrishnan
+  description:
+    en: Our latest news, updates, and stories by Swetha Gopalakrishnan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Swetha Gopalakrishnan.
+    ja: Swetha Gopalakrishnan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Swetha Gopalakrishnan의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Swetha Gopalakrishnan.
+    ru: Последние новости и статьи от Swetha Gopalakrishnan.
+    zh: Swetha Gopalakrishnan 撰写我们的最新资讯、动态和故事。
+
+saurabhrajpal:
+  title:
+    en: Saurabh Rajpal
+    es: Saurabh Rajpal
+    ja: Saurabh Rajpal
+    ko: Saurabh Rajpal
+    pt: Saurabh Rajpal
+    ru: Saurabh Rajpal
+    zh: Saurabh Rajpal
+  description:
+    en: Our latest news, updates, and stories by Saurabh Rajpal.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Saurabh Rajpal.
+    ja: Saurabh Rajpal による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Saurabh Rajpal의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Saurabh Rajpal.
+    ru: Последние новости и статьи от Saurabh Rajpal.
+    zh: Saurabh Rajpal 撰写我们的最新资讯、动态和故事。
+
+arturjanc:
+  title:
+    en: Artur Janc
+    es: Artur Janc
+    ja: Artur Janc
+    ko: Artur Janc
+    pt: Artur Janc
+    ru: Artur Janc
+    zh: Artur Janc
+  description:
+    en: Our latest news, updates, and stories by Artur Janc.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Artur Janc.
+    ja: Artur Janc による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Artur Janc의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Artur Janc.
+    ru: Последние новости и статьи от Artur Janc.
+    zh: Artur Janc 撰写我们的最新资讯、动态和故事。
+
+mkazi:
+  title:
+    en: Minhaz Kazi
+    es: Minhaz Kazi
+    ja: Minhaz Kazi
+    ko: Minhaz Kazi
+    pt: Minhaz Kazi
+    ru: Minhaz Kazi
+    zh: Minhaz Kazi
+  description:
+    en: Developer Advocate at Google
+    es: Desarrollador partidario en Google
+    ja: Google に所属する Developer Advocate
+    ko: Google의 개발자 애드버킷
+    pt: Developer Advocate na empresa Google
+    ru: Developer Advocate в компании Google
+    zh: Google 的开发技术推广工程师
+
+cmp:
+  title:
+    en: Chase Phillips
+    es: Chase Phillips
+    ja: Chase Phillips
+    ko: Chase Phillips
+    pt: Chase Phillips
+    ru: Chase Phillips
+    zh: Chase Phillips
+  description:
+    en: Software Engineer on the Google Chrome team
+    es: Ingeniero de software en el equipo de Google Chrome
+    ja: Google Chrome チームのソフトウェアエンジニア
+    ko: Google Chrome 팀의 소프트웨어 엔지니어
+    pt: Engenheiro de software na equipe do Google Chrome
+    ru: Инженер-программист в команде Google Chrome
+    zh: Google Chrome 团队的软件工程师
+
+collindionagata:
+  title:
+    en: Collin Dion Agata
+    es: Collin Dion Agata
+    ja: Collin Dion Agata
+    ko: Collin Dion Agata
+    pt: Collin Dion Agata
+    ru: Collin Dion Agata
+    zh: Collin Dion Agata
+  description:
+    en: Our latest news, updates, and stories by Collin Dion Agata.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Collin Dion Agata.
+    ja: Dion Agata による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Collin Dion Agata의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Collin Dion Agata.
+    ru: Последние новости и статьи от Collin Dion Agata.
+    zh: Collin Dion Agata 撰写我们的最新资讯、动态和故事。
+
+chrisboakes:
+  title:
+    en: Chris Boakes
+    es: Chris Boakes
+    ja: Chris Boakes
+    ko: Chris Boakes
+    pt: Chris Boakes
+    ru: Chris Boakes
+    zh: Chris Boakes
+  description:
+    en: Principal Software Engineer at The Telegraph
+    es: Ingeniero principal de software en The Telegraph
+    ja: Telegraph のプリンシパルソフトウェアエンジニア
+    ko: The Telegraph의 수석 소프트웨어 엔지니어
+    pt: Engenheiro de software principal no The Telegraph
+    ru: Главный инженер-программист в The Telegraph
+    zh: The Telegraph 首席软件工程师
+
+jaikk:
+  title:
+    en: Jai Krishnan
+    es: Jai Krishnan
+    ja: Jai Krishnan
+    ko: Jai Krishnan
+    pt: Jai Krishnan
+    ru: Jai Krishnan
+    zh: Jai Krishnan
+  description:
+    en: Product Manager at Google working on open codecs
+    es: Gerente de productos de Google que trabaja en códigos abiertos
+    ja: オープンコーデックに取り組む Google のプロダクトマネージャー
+    ko: 오픈 코덱 작업을 수행하는 Google의 제품 관리자
+    pt: Gerente de produtos no Google trabalhando em codecs abertos
+    ru: Менеджер по продукту в Google, участвует в разработке открытых кодеков
+    zh: 研究开放式编解码器的 Google 产品经理
+
+wtc:
+  title:
+    en: Wan-Teh Chang
+    es: Wan-Teh Chang
+    ja: Wan-Teh Chang
+    ko: Wan-Teh Chang
+    pt: Wan-Teh Chang
+    ru: Wan-Teh Chang
+    zh: Wan-Teh Chang
+  description:
+    en: Engineer at Google working on AVIF
+    es: Ingeniero en Google que trabaja en AVIF
+    ja: AVIF に取り組む Google のエンジニア
+    ko: AVIF 작업을 수행하는 Google 엔지니어
+    pt: Engenheiro na Google trabalhando em AVIF
+    ru: Инженер в компании Google, участвующий в разработке AVIF
+    zh: 研究 AVIF 的 Google 工程师
+
+shubhie:
+  title:
+    en: Shubhie Panicker
+    es: Shubhie Panicker
+    ja: Shubhie Panicker
+    ko: Shubhie Panicker
+    pt: Shubhie Panicker
+    ru: Shubhie Panicker
+    zh: Shubhie Panicker
+  description:
+    en: Tech Lead Manager on the Chrome Web Platform team
+    es: Gerente principal de tecnología de la plataforma web de Chrome
+    ja: Chrome Web プラットフォームチームのテクニカルリードマネージャー
+    ko: Chrome 웹 플랫폼 팀의 기술 수석 관리자
+    pt: Gerente líder técnico na equipe de plataforma web do Chrome
+    ru: Технический руководитель команды веб-платформы Chrome
+    zh: Chrome 网络平台团队的技术主管经理
+
+npm:
+  title:
+    en: Nicolás Peña Moreno
+    es: Nicolás Peña Moreno
+    ja: Nicolás Peña Moreno
+    ko: Nicolás Peña Moreno
+    pt: Nicolás Peña Moreno
+    ru: Nicolás Peña Moreno
+    zh: Nicolás Peña Moreno
+  description:
+    en: Software developer always looking for chocolates and games
+    es: Programador siempre en busca de chocolates y juegos
+    ja: チョコレートとゲームをいつも探しているソフトウェア開発者
+    ko: 늘 초콜릿과 게임을 찾는 소프트웨어 개발자
+    pt: Desenvolvedor de software sempre à procura de chocolates e jogos
+    ru: Разработчик ПО, обожает шоколадки и игры
+    zh: 总是在寻找巧克力和游戏的软件开发者
+
+derekherman:
+  title:
+    en: Derek Herman
+    es: Derek Herman
+    ja: Derek Herman
+    ko: Derek Herman
+    pt: Derek Herman
+    ru: Derek Herman
+    zh: Derek Herman
+  description:
+    en: CTO at XWP
+    es: Director de tecnología en XWP
+    ja: XWP の CTO
+    ko: XWP의 CTO
+    pt: CTO na empresa XWP
+    ru: Технический директор компании XWP
+    zh: XWP 首席技术官
+
+dero:
+  title:
+    en: Jaroslav Polakovič
+    es: Jaroslav Polakovič
+    ja: Jaroslav Polakovič
+    ko: Jaroslav Polakovič
+    pt: Jaroslav Polakovič
+    ru: Jaroslav Polakovič
+    zh: Jaroslav Polakovič
+  description:
+    en: Senior Engineer at XWP
+    es: Jefe de ingeniería en XWP
+    ja: XWP のシニアエンジニア
+    ko: XWP의 수석 엔지니어
+    pt: Engenheiro sênior na empresa XWP
+    ru: Старший инженер в компании XWP
+    zh: XWP 高级工程师
+
+jarhar:
+  title:
+    en: Joey Arhar
+    es: Joey Arhar
+    ja: Joey Arhar
+    ko: Joey Arhar
+    pt: Joey Arhar
+    ru: Joey Arhar
+    zh: Joey Arhar
+  description:
+    en: Software Engineer on the Chrome DOM team
+    es: Ingeniero de software en el equipo de Chrome DOM
+    ja: Chrome DOM チームのソフトウェアエンジニア
+    ko: Chrome DOM 팀의 소프트웨어 엔지니어
+    pt: Engenheiro de software na equipe do Chrome DOM
+    ru: Инженер-программист в команде Chrome DOM
+    zh: Chrome DOM 团队的软件工程师
+
+majido:
+  title:
+    en: Majid Valipour
+    es: Majid Valipour
+    ja: Majid Valipour
+    ko: Majid Valipour
+    pt: Majid Valipour
+    ru: Majid Valipour
+    zh: Majid Valipour
+  description:
+    en: Software Engineer on the Chrome team
+    es: Ingeniero de software en el equipo de Chrome
+    ja: Chrome チームに所属するソフトウェアエンジニア
+    ko: Chrome 팀의 소프트웨어 엔지니어
+    pt: Engenheiro de software na equipe do Chrome
+    ru: Инженер-программист в команде Chrome
+    zh: Chrome 团队的软件工程师
+
+flackr:
+  title:
+    en: Robert Flack
+    es: Robert Flack
+    ja: Robert Flack
+    ko: Robert Flack
+    pt: Robert Flack
+    ru: Robert Flack
+    zh: Robert Flack
+  description:
+    en: Software Engineer on the Chrome team
+    es: Ingeniero de software en el equipo de Chrome
+    ja: Chrome チームに所属するソフトウェアエンジニア
+    ko: Chrome 팀의 소프트웨어 엔지니어
+    pt: Engenheiro de software na equipe do Chrome
+    ru: Инженер-программист в команде Chrome
+    zh: Chrome 团队的软件工程师
+
+dandclark:
+  title:
+    en: Dan Clark
+    es: Dan Clark
+    ja: Dan Clark
+    ko: Dan Clark
+    pt: Dan Clark
+    ru: Dan Clark
+    zh: Dan Clark
+  description:
+    en: Developer on the Microsoft Edge Web Platform team
+    es: Desarrollador en el equipo de la plataforma web Microsoft Edge
+    ja: Microsoft Edge Web プラットフォームチームに所属する開発者
+    ko: Microsoft Edge 웹 플랫폼 팀 개발자
+    pt: Desenvolvedor na equipe de plataforma web do Microsoft Edge
+    ru: Разработчик в команде веб-платформы Microsoft Edge
+    zh: Microsoft Edge 网络平台团队的开发者
+
+cambickel:
+  title:
+    en: Camden Bickel
+  description:
+    en: Software Engineer at Google
+
+michaelscharnagl:
+  title:
+    en: Michael Scharnagl
+    es: Michael Scharnagl
+    ja: Michael Scharnagl
+    ko: Michael Scharnagl
+    pt: Michael Scharnagl
+    ru: Michael Scharnagl
+    zh: Michael Scharnagl
+  description:
+    en: Freelance front-end web developer
+    es: Freelance front-end web developer
+    ja: Freelance front-end web developer
+    ko: Freelance front-end web developer
+    pt: Freelance front-end web developer
+    ru: Freelance front-end web developer
+    zh: Freelance front-end web developer
+
+leenasohoni:
+  title:
+    en: Leena Sohoni
+    es: Leena Sohoni
+    ja: Leena Sohoni
+    ko: Leena Sohoni
+    pt: Leena Sohoni
+    ru: Leena Sohoni
+    zh: Leena Sohoni
+  description:
+    en: Freelance technical analyst and writer
+    es: Analista técnica / escritora independiente
+    ja: フリーランスのテクニカルアナリスト/ライター。
+    ko: 프리랜서 기술 분석가/작가
+    pt: Analista / redator técnico freelance.
+    ru: Технический аналитик / писатель-фрилансер.
+    zh: 自由技术分析师/作家。
+
+jackjey:
+  title:
+    en: Jack J
+    es: Jack J
+    ja: Jack J
+    ko: Jack J
+    pt: Jack J
+    ru: Jack J
+    zh: Jack J
+  description:
+    en: Jack is an engineer working on the web
+    es: Jack es un ingeniero que trabaja para la web
+    ja: Jack は Web のために働くエンジニアです
+    ko: Jack은 웹에서 일하는 엔지니어입니다.
+    pt: Jack é um engenheiro que trabalha para web
+    ru: Jack - инженер, работающий в Интернете.
+    zh: Jack是一个为网络工作的工程师。
+
+tcoustillac:
+  title:
+    en: Thierry Coustillac
+    es: Thierry Coustillac
+    ja: Thierry Coustillac
+    ko: Thierry Coustillac
+    pt: Thierry Coustillac
+    ru: Thierry Coustillac
+    zh: Thierry Coustillac
+  description:
+    en: Thierry Coustillac is a consultant at Google.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Thierry Coustillac.
+    ja: Thierry Coustillac による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Thierry Coustillac의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Thierry Coustillac.
+    ru: Последние новости и статьи от Thierry Coustillac.
+    zh: Thierry Coustillac 撰写我们的最新资讯、动态和故事。
+
+cédricbazureau:
+  title:
+    en: Cédric Bazureau
+  description:
+    en: Cédric Bazureau is a lead developer at Renault.
+
+adactio:
+  title:
+    en: Jeremy Keith
+  description:
+    en: An Irish web developer living in Brighton, England, working with Clearleft.
+
+patmeenan:
+  title:
+    en: Patrick Meenan
+    es: Patrick Meenan
+    ja: Patrick Meenan
+    ko: Patrick Meenan
+    pt: Patrick Meenan
+    ru: Patrick Meenan
+    zh: Patrick Meenan
+  description:
+    en: Our latest news, updates, and stories by Patrick Meenan.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Patrick Meenan.
+    ja: Patrick Meenan による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Patrick Meenan 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Patrick Meenan.
+    ru: Последние новости и статьи от Patrick Meenan.
+    zh: Patrick Meenan 撰写我们的最新资讯、动态和故事。
+
+firt:
+  title:
+    en: Maximiliano Firtman
+  description:
+    en: Author of Hacking Web Performance from O'Reilly
+
+patrickbrosset:
+  title:
+    en: Patrick Brosset
+    es: Patrick Brosset
+    ja: Patrick Brosset
+    ko: Patrick Brosset
+    pt: Patrick Brosset
+    ru: Patrick Brosset
+    zh: Patrick Brosset
+  description:
+    en: Our latest news, updates, and stories by Patrick Brosset.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Patrick Brosset.
+    ja: Patrick Brosset による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Patrick Brosset 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Patrick Brosset.
+    ru: Последние новости и статьи от Patrick Brosset.
+    zh: Patrick Brosset 撰写我们的最新资讯、动态和故事。
+
+karaerickson:
+  title:
+    en: Kara Erickson
+    es: Kara Erickson
+    ja: Kara Erickson
+    ko: Kara Erickson
+    pt: Kara Erickson
+    ru: Kara Erickson
+    zh: Kara Erickson
+  description:
+    en: Software Engineer on the Aurora team at Chrome.
+    es: Ingeniera de software en el equipo de Aurora en Chrome.
+    ja: ChromeのAuroraチームのソフトウェアエンジニア。
+    ko: Chrome에서 Aurora 팀의 소프트웨어 엔지니어입니다.
+    pt: Engenheiro de software da equipe Aurora no Chrome.
+    ru: Инженер-программист в команде Aurora в Chrome.
+    zh: Chrome 公司 Aurora 团队的软件工程师。
+
+alexcastle:
+  title:
+    en: Alex Castle
+    es: Alex Castle
+    ja: Alex Castle
+    ko: Alex Castle
+    pt: Alex Castle
+    ru: Alex Castle
+    zh: Alex Castle
+  description:
+    en: Software Engineer on the Aurora team at Chrome.
+    es: Ingeniero de software en el equipo de Aurora en Chrome.
+    ja: ChromeのAuroraチームのソフトウェアエンジニア。
+    ko: Chrome에서 Aurora 팀의 소프트웨어 엔지니어입니다.
+    pt: Engenheiro de software da equipe Aurora no Chrome.
+    ru: Инженер-программист в команде Aurora в Chrome.
+    zh: Chrome 公司 Aurora 团队的软件工程师
+
+behdadb:
+  title:
+    en: Behdad Bakhshinategh
+  description:
+    en: Software Engineer
+
+jonross:
+  title:
+    en: Jonathan Ross
+  description:
+    en: Software Engineer
+
+bckenny:
+  title:
+    en: Brendan Kenny
+  description:
+    en: Lighthouse lens polisher
+
+alexandrawhite:
+  title:
+    en: Alexandra White
+    es: Alexandra White
+    ja: Alexandra White
+    ko: Alexandra White
+    pt: Alexandra White
+    ru: Alexandra White
+    zh: Alexandra White
+  description:
+    en: Technical Writer at Google.
+    es: Escritor técnico en Google
+    ja: Google のテクニカルライター
+    ko: Google 테크니컬라이터
+    pt: Escritora técnica na empresa Google
+    ru: Технический писатель в компании Google
+    zh: Google 的技术撰稿人
+
+svenmay:
+  title:
+    en: Sven May
+  description:
+    en: Privacy Web Ecosystem Consultant at Google
+
+denisstasyev:
+  title:
+    en: Denis Stasyev
+  description:
+    en: Software Engineer
+
+lozandier:
+  title:
+    en: Kevin Lozandier
+  description:
+    en: User Experience Engineer on the Google Responsible Innovation team
+mobtec:
+  title:
+    en: Guilherme Moser de Souza
+  description:
+    en: Web Developer
+maurizioparadisi:
+  title:
+    en: Maurizio Paradisi
+    es: Maurizio Paradisi
+    it: Maurizio Paradisi
+    ja: Maurizio Paradisi
+    ko: Maurizio Paradisi
+    pt: Maurizio Paradisi
+    ru: Maurizio Paradisi
+    zh: Maurizio Paradisi
+  description:
+    en: Our latest news, updates, and stories by Maurizio Paradisi.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Maurizio Paradisi.
+    it: Consulta le ultime notizie, aggiornamenti e storie di Maurizio Paradisi.
+    ja: Maurizio Paradisi による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Maurizio Paradisi의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Maurizio Paradisi.
+    ru: Последние новости и статьи от Maurizio Paradisi.
+    zh: Maurizio Paradisi 撰写我们的最新资讯、动态和故事。
+
+anshusharma:
+  title:
+    en: Anshu Sharma
+  description:
+    en: Head of Engineering at The Economic Times
+
+sumitgugnani:
+  title:
+    en: Sumit Gugnani
+  description:
+    en: Head of Frontend Engineering at The Economic Times
+
+prashantmishra:
+  title:
+    en: Prashant Mishra
+  description:
+    en: Web Ecosystem Consultant at Google
+
+joshuagrossberg:
+  title:
+    en: Joshua Grossberg
+  description:
+    en: Chief Technology Officer of Kapwing
+
+nsull:
+  title:
+    en: Nicole Sullivan
+  description:
+    en: Product manager on the Chrome team.
+
+danielasy:
+  title:
+    en: Daniela Sayuri Yassuda
+  description:
+    en: Staff Software Engineer at QuintoAndar
+
+arthursonzogni:
+  title:
+    en: Arthur Sonzogni
+  description:
+    en: Software Engineer at Google
+
+chrispalmer:
+  title:
+    en: Chris Palmer
+  description:
+    en: Software Security Engineer at Google
+
+karldubost:
+  title:
+    en: Karl Dubost
+  description:
+    en: Web Compatibility Engineering Manager at Mozilla
+
+abeyad:
+  title:
+    en: Ali Beyad
+  description:
+    en: Software Engineer
+
+sdenaro:
+  title:
+    en: Salvatore Denaro
+  description:
+    en: Salvatore Denaro is a Sr. Web Ecosystem Consultant at Google
+
+kbalasub:
+  title:
+    en: Kalyanaraman Balasubramaniam Krishnan
+  description:
+    en: Kalyan is a Sr. Computer Scientist at Adobe
+
+monikajanota:
+  title:
+    en: Monika Janota
+  description:
+    en: Monika is a Community Manager at Google.
+
+patrickhlauke:
+  title:
+    en: Patrick H. Lauke
+  description:
+    en: Patrick is a Web Evangelist
+
+kevinkiklee:
+  title:
+    en: Kevin K. Lee
+    ko: 이경인
+  description:
+    en: Developer Relations Engineer, Google Chrome
+    ko: Google Chrome의 개발자 관계 엔지니어
+
+nikilmathew:
+  title:
+    en: Nikil Mathew
+  description:
+    en: Lead Software engineer at Mishipay
+
+jheyy:
+  title:
+    en: Jhey Tompkins
+    es: Jhey Tompkins
+    it: Jhey Tompkins
+    ja: Jhey Tompkins
+    ko: Jhey Tompkins
+    pt: Jhey Tompkins
+    ru: Jhey Tompkins
+    zh: Jhey Tompkins
+  description:
+    en: Whimsy Dev Supreme! Developer Relations Engineer @ Google
+    es: ¡Extravagante Dev Supremo! Ingeniero de Relaciones con los Desarrolladores @ Google
+    it: Stravagante Dev Supremo! Ingegnere relazioni con gli sviluppatori @ Google
+    ja: 気まぐれな開発最高！開発者関係エンジニア@Google
+    ko: 변덕스러운 데브 슈프림! 개발자 관계 엔지니어 @ Google
+    pt: Excêntrico Dev Supremo! Engenheiro de relações com desenvolvedores @ Google
+    ru: Причудливый Дев Высший! Инженер по связям с разработчиками @ Google
+    zh: 奇思妙想的开发者至尊！开发者关系工程师 @ Google
+
+andreabreanna:
+  title:
+    en: Andrea Breanna
+    es: Andrea Breanna
+    ja: Andrea Breanna
+    ko: Andrea Breanna
+    pt: Andrea Breanna
+    ru: Andrea Breanna
+    zh: Andrea Breanna
+  description:
+    en: Our latest news, updates, and stories by Andrea Breanna.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas por Andrea Breanna.
+    ja: Andrea Breanna による最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Andrea Breanna의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias por Andrea Breanna.
+    ru: Последние новости и статьи от Andrea Breanna.
+    zh: Andrea Breanna 撰写我们的最新资讯、动态和故事。
+
+keenyeeliau:
+  title:
+    en: Keen Yee Liau
+    es: Keen Yee Liau
+    ja: Keen Yee Liau
+    ko: Keen Yee Liau
+    pt: Keen Yee Liau
+    ru: Keen Yee Liau
+    zh: Keen Yee Liau
+  description:
+    en: Software Engineer on the Aurora team at Chrome.
+    es: Ingeniera de software en el equipo de Aurora en Chrome.
+    ja: ChromeのAuroraチームのソフトウェアエンジニア。
+    ko: Chrome에서 Aurora 팀의 소프트웨어 엔지니어입니다.
+    pt: Engenheiro de software da equipe Aurora no Chrome.
+    ru: Инженер-программист в команде Aurora в Chrome.
+    zh: Chrome 公司 Aurora 团队的软件工程师。
+
+yuyaito:
+  title:
+    en: Yuya Ito
+  description:
+    en: Vice President ID Division at Yahoo! JAPAN
+
+jimmymooney:
+  title:
+    en: Jimmy Mooney
+    es: Jimmy Mooney
+    ja: Jimmy Mooney
+    ko: Jimmy Mooney
+    pt: Jimmy Mooney
+    ru: Jimmy Mooney
+    zh: Jimmy Mooney
+  description:
+    en: Senior Product Manager, Google Fonts.
+    es: Gerente Sénior de Productos, Google Fonts.
+    ja: GoogleFontsシニアプロダクトマネージャー。
+    ko: Google Fonts 수석 제품 관리자.
+    pt: Gerente de Produto Sênior, Google Fonts.
+    ru: Старший менеджер по продукту, Google Fonts.
+    zh: Google Fonts 高级产品经理。
+
+alexeyrodionov:
+  title:
+    en: Alexey Rodionov
+    ru: Алексей Родионов
+  description:
+    en: PWA developer. UX/DX engineer. Web platform advocate. Google Developer Expert (GDE) in Web Technologies. PWA, Web Components, GraphQL evangelist. PWA Russian-speaking community organizer. Chromium contributor. Lead front-end developer at Mercury Development.
+    ru: Разработчик PWA. UX/DX-инженер. Адвокат веб-платформы. Официально признанный Google эксперт в области веб-технологий. Евангелист PWA, Web Components, GraphQL. Организатор русскоязычного сообщества PWA. Контрибьютор Chromium. Ведущий фронтенд-разработчик в Mercury Development.
+
+twifkak:
+  title:
+    en: Devin Mullins
+  description:
+    en: Software engineer at Google, signed exchanges integration lead in Search
+
+ruisantos:
+  title:
+    en: Rui Santos
+  description:
+    en: Senior Head of Product Strategy & Operations at Farfetch
+
+manuelgarcia:
+  title:
+    en: Manuel Garcia
+  description:
+    en: Senior Principal Engineer at Farfetch
+
+patriciacoutoneto:
+  title:
+    en: Patrícia Couto Neto
+  description:
+    en: Senior Analytics Manager
+
+steveworkman:
+  title:
+    en: steveworkman
+  description:
+    en: Lead Engineer at Maersk.com
+
+simonleparc:
+  title:
+    en: Simon Le Parc
+  description:
+    en: Senior Manager Software Development at GoDaddy
+
+dbaron:
+  title:
+    en: L. David Baron
+  description:
+    en: Software engineer at Google and contributor to Web standards
+
+bramus:
+  title:
+    en: Bramus
+    es: Bramus
+    ja: Bramus
+    ko: Bramus
+    pt: Bramus
+    ru: Bramus
+    zh: Bramus
+  description:
+    en: Developer Advocate for CSS, UI, and DevTools at Chrome
+    es: Desarrollador partidario para CSS, UI y DevTools en Chrome
+    ja: Chrome の CSS、UI、DevTools を対象とした Developer Advocate
+    ko: Chrome의 CSS, UI 및 DevTools 개발자 애드버킷
+    pt: Developer Advocate para CSS, UI e DevTools no Chrome
+    ru: Developer Advocate по вопросам CSS, UI и DevTools в команде Chrome
+    zh: Chrome 的 CSS、UI 和 DevTools 开发技术推广工程师
+
+kadirtopal:
+  title:
+    en: Kadir Topal
+  description:
+    en: Kadir is a product manager on the Web Developer Platform team.
+
+michellebarker:
+  title:
+    en: Michelle Barker
+  description:
+    en: Michelle is a senior front-end developer at Ada Mode.
+
+daviddarnes:
+  title:
+    en: David Darnes
+  description:
+    en: David is a senior front-end developer at Nordhealth.
+
+linhduong:
+  title:
+    en: Linh Duong
+  description:
+    en: Front-end Engineer at Rakuten Group, Inc.
+
+shogokashiwase:
+  title:
+    en: Shogo Kashiwase
+  description:
+    en: Designer at Rakuten Group, Inc.
+
+hayounglee:
+  title:
+    en: Hayoung Lee
+  description:
+    en: Front-end Engineer at Rakuten Group, Inc.
+
+jecelynyeen:
+  title:
+    en: Jecelyn Yeen
+  description:
+    en: DevRel Engineer at Google Chrome.
+
+ryunosukeakiba:
+  title:
+    en: Ryunosuke Akiba
+  description:
+    en: Creative Director at Rakuten Group, Inc.
+
+mmatuzo:
+  title:
+    en: Manuel Matuzović
+  description:
+    en: Front-end developer.
+
+estelleweyl:
+  title:
+    en: Estelle Weyl
+  description:
+    en: Open-source maintainer. Front-end engineer. Technical writer.
+
+davideast:
+  title:
+    en: David East
+  description:
+    en: Web Developer
+
+cariefisher:
+   title:
+      en: Carie Fisher
+   description:
+      en: Senior Accessibility Consultant and developer
+
+marksteadman:
+   title:
+      en: Mark Steadman
+   description:
+      en: Principal Accessibility Engineer
+
+superhighfives:
+  title:
+    en: Charlie Gleason
+  description:
+    en: Designer and Developer
+
+sriramkrishnan:
+  title:
+    en: 'Sriram Krishnan'
+  description:
+    en: 'Tech Lead and Manager on YouTube Web'
+
+alispivak:
+  title:
+    en: 'Ali Spivak'
+  description:
+    en: 'Member of Chrome DevRel, lead for Extensions.'
+
+matmarquis:
+  title:
+    en: 'Mat Marquis'
+  description:
+    en: 'Independent consultant specializing in inclusive web development.'
+
+aaronforinton:
+  title:
+    en: 'Aaron Forinton'
+  description:
+    en: 'Technical Writer'
+
+sil:
+  title:
+    en: 'Stuart Langridge'
+  description:
+    en: 'Web consultant and developer.'
+
+anslo:
+  title:
+    en: Anslo
+  description:
+    en: Exploring creative development and digital craft
+
+amitkumar:
+  title:
+    en: Amit Kumar
+  description:
+    en: Senior Engineering Manager at redBus
+
+daya:
+  title:
+    en: Daya Ram Yadav
+  description:
+    en: Senior Engineering Manager at Times Internet
+
+barunkumar:
+  title:
+    en: Barun Kumar
+  description:
+    en: Senior Frontend Developer at Times Internet
+
+jhuoponen:
+  title: 
+    en: Jani Huoponen
+  description:
+    en: Group Product Manager at Google
+
+vignesh:
+  title:
+    en: Vignesh Venkatasubramanian
+  description:
+    en: Staff Software Engineer at Google
+
+ddworken:
+  title:
+    en: David Dworken
+  description:
+    en: Information Security Engineer, Google Security Team
+
+ramona:
+  title:
+    en: Ramona Schwering
+  description:
+    en: A frontend developer who ❤️ Test Automation and JavaScript.
+
+mitchgalavan:
+  title:
+    en: Mitchell Galavan
+  description:
+    en: Interaction Designer at Google
+
+cjacinic:
+  title:
+    en: Court Jacinic
+  description:
+    en: Senior UX Writer at Google
+
+silviaconvento:
+  title:
+    en: Silvia Convento
+  description:
+    en: User Experience Researcher at Google
+
+yurikohirota:
+  title:
+    en: Yuriko Hirota
+  description:
+    en: Web Ecosystem Consultant at Google
+
+thiernothiam:
+  title:
+    en: Thierno Thiam
+  description:
+    en: Web Ecosystem Consultant at Google
+
+guilhermems:
+  title:
+    en: Guilherme Moser de Souza
+  description:
+    en: IT Manager for Vivo
+  
+nandunair:
+  title:
+    en: Nandu Nair
+  description:
+    en: Technical Program Manager
+
+markusbordihn:
+  title:
+    en: Markus Bordihn
+  description:
+    en: Senior Technical Solution Consultant at Google
diff --git a/src/site/_data/i18n/baseline.yml b/src/site/_data/i18n/baseline.yml
new file mode 100644
index 00000000000..1069de2f94f
--- /dev/null
+++ b/src/site/_data/i18n/baseline.yml
@@ -0,0 +1,8 @@
+widely_supported:
+  en: Widely supported
+
+definition:
+  en: Baseline support is determined by this web feature being supported on the current and the previous version of major browsers.
+
+learn_more:
+  en: Learn more
diff --git a/src/site/_data/i18n/common.yml b/src/site/_data/i18n/common.yml
new file mode 100644
index 00000000000..ea7671f22c5
--- /dev/null
+++ b/src/site/_data/i18n/common.yml
@@ -0,0 +1,192 @@
+note:
+  en: Note
+  es: Nota
+  ja: メモ
+  ko: 메모
+  pt: Observação
+  ru: Примечание
+  zh: 注意
+
+caution:
+  en: Caution
+  es: Precaución
+  ja: 注意
+  ko: 주의
+  pt: Cuidado
+  ru: Внимание
+  zh: 小心
+
+warning:
+  en: Warning
+  es: Advertencia
+  ja: 警告
+  ko: 경고
+  pt: Aviso
+  ru: Предупреждение
+  zh: 警告
+
+success:
+  en: Success
+  es: Éxito
+  ja: 成功
+  ko: 성공
+  pt: Sucesso
+  ru: Успех
+  zh: 成功
+
+objective:
+  en: Objective
+  es: Objetivo
+  ja: 目的
+  ko: 목적
+  pt: Objetivo
+  ru: Цель
+  zh: 目标
+
+try_it:
+  en: Try it
+  es: Pruebelo
+  ja: お試しください
+  ko: 시도하기
+  pt: Experimente
+  ru: Попробуйте
+  zh: 请尝试
+
+key_term:
+  en: Key Term
+  es: Término clave
+  ja: 重要な用語
+  ko: 핵심 용어
+  pt: Termo chave
+  ru: Ключевой термин
+  zh: 重要词汇
+
+gotchas:
+  en: Gotchas
+  es: Gotchas
+  ja: 問題の原因
+  ko: 갓차
+  pt: Pegadinhas
+  ru: Обратите внимание
+  zh: 问题
+  
+celebration:
+  en: Celebration
+  es: Celebración
+  ja: お祝い
+  ko: 축하
+  pt: Celebração
+  ru: праздник
+  zh: 庆典
+
+important:
+  en: Important
+  es: Importante
+  ja: 重要
+  ko: 중요한
+  pt: Importante
+  ru: Важный
+  zh: 重要的
+
+update:
+  en: Update
+  es: Actualizar
+  ja: 更新
+  ko: 업데이트
+  pt: Atualizar
+  ru: Обновлять
+  zh: 更新
+
+do:
+  en: Do
+  es: Hacer
+  ja: すべきこと
+  ko: 허용
+  pt: Faça
+  ru: Правильно
+  zh: 正确做法
+
+dont:
+  en: Don't
+  es: No hagas
+  ja: してはいけないこと
+  ko: 금지
+  pt: Não faça
+  ru: Неправильно
+  zh: 错误做法
+
+close:
+  en: Close
+  es: Cerrar
+  ja: 閉じる
+  ko: 닫기
+  pt: Fechar
+  ru: Закрыть
+  zh: 关闭
+
+next:
+  en: Next
+  es: Contiguo
+  ja: 次へ
+  ko: 다음
+  pt: Avançar
+  ru: Далее
+  zh: 下一课
+
+prev:
+  en: Prev # Short for "previous"
+  es: Previo
+  ja: 前へ
+  ko: 이전
+  pt: Voltar
+  ru: Назад
+  zh: 上一课
+
+new:
+  en: new
+  es: nuevo
+  ja: 新着
+  ko: 신규
+  pt: novo
+  ru: новое
+  zh: 新
+
+updated:
+  en: Updated
+  es: Actualizado
+  ja: 更新済み
+  ko: 업데이트됨
+  pt: Atualizado
+  ru: Обновлено
+  zh: 更新日期
+
+share:
+  en: Share
+  es: Compartir
+  ja: 共有する
+  ko: 공유
+  pt: Compartilhar
+  ru: Поделиться
+  zh: 分享
+
+sign_in:
+  en: Sign in
+
+all:
+  en: All
+  es: Todos
+
+see_all:
+  en: See all
+
+more:
+  en: More
+
+by:
+  en: By
+
+chrome_devrel:
+  en: Chrome DevRel
+
+skip_link:
+  en: Skip to content
diff --git a/src/site/_data/i18n/courses.yml b/src/site/_data/i18n/courses.yml
new file mode 100644
index 00000000000..7b125428ffd
--- /dev/null
+++ b/src/site/_data/i18n/courses.yml
@@ -0,0 +1,133 @@
+learn_css:
+  title:
+    en: Learn CSS!
+    es: ¡Aprenda CSS!
+    ja: CSS を学びましょう！
+    ko: CSS를 배우세요!
+    pt: Aprenda CSS!
+    ru: Изучаем CSS!
+    zh: 学习 CSS！
+  description:
+    en: "Let’s gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index."
+    es: "Dividamos alegremente los aspectos complejos de CSS en episodios digeribles que abarquen todo, desde la accesibilidad hasta el z-índex."
+    ja: "アクセシビリティから z-index に至るまで、CSS の難解な部分を分かりやすいエピソードに分けて楽しく解説していきます。"
+    ko: "CSS의 복잡한 측면을 접근성부터 z-인덱스까지 모든 부분을 다룬 부담 없는 다양한 에피소드로 즐겁게 꾸며 보겠습니다."
+    pt: "Vamos dividir aspectos complexos do CSS em episódios digeríveis cobrindo tudo, desde a acessibilidade até o z-index."
+    ru: "Разбор сложных аспектов CSS в рамках коротких эпизодов, охватывающих все темы, начиная с доступности и заканчивая z-index."
+    zh: "我们来愉快地将 CSS 的种种复杂方面拆解成可消化吸收的知识点，涵盖从无障碍功能到 z-index 的所有内容。"
+learn_forms:
+  title:
+    en: Learn Forms!
+    es: '¡Aprenda formularios!'
+    ja: Forms について学びましょう！
+    ko: 양식을 배우세요!
+    pt: Aprenda formulários!
+    ru: Изучаем формы!
+    zh: 学习表单！
+  description:
+    en: "A course about HTML forms to help you improve your web developer expertise."
+    ko: "[할 일]: ..."
+get_started_with_forms:
+  title:
+    en: Get started with forms
+  description:
+    en: "to do."
+general_best_practice:
+  title:
+    en: General best practice
+  description:
+    en: "to do."
+testing_monitoring:
+  title:
+    en: Testing and monitoring
+  description:
+    en: "to do."
+elements_attributes:
+  title:
+    en: Elements and attributes
+  description:
+    en: "to do."
+styling:
+  title:
+    en: CSS
+  description:
+    en: "to do."
+javascript:
+  title:
+    en: JavaScript
+  description:
+    en: "to do."
+form_types:
+  title:
+    en: Specific form types
+  description:
+    en: "to do."
+
+wrap_up:
+  title:
+    en: Wrap up
+  description:
+    en: "Title for the section with the conclusion of the course"
+
+learn_design:
+  title:
+    en: Learn Responsive Design!
+  description:
+    en: "Let's explore all aspects of responsive design, learning how to make sites that look great and work well for everyone."
+
+learn_pwa:
+  title:
+    en: Learn PWA!
+  description:
+    en: "A course that breaks down every aspect of modern progressive web app development."
+
+learn_accessibility:
+   title:
+    en: Learn Accessibility
+   description:
+    en: "Discover how to make your websites and web apps more accessible."
+
+learn_html:
+  title:
+    en: Learn HTML!
+  description:
+    en: "This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML."
+
+learn_privacy:
+   title:
+    en: Learn Privacy!
+   description:
+    en: "A course to help you build more privacy-preserving websites."
+
+learn_images:
+  title:
+    en: Learn Images!
+  description:
+    en: "A course covering everything from selecting the right formats, to responsive images, and performance."
+images_and_performance:
+  title:
+    en: Images and performance
+  description:
+    en: "Learn how images can impact the performance of your site."
+image_formats:
+  title:
+    en: Image formats and compression
+  description:
+    en: "A detailed explanation of the different image formats and compression types."
+responsive_images:
+  title:
+    en: Responsive images
+  description:
+    en: "A modern approach to responsive image use."
+image_workflows:
+  title:
+    en: High performance image workflows
+  description:
+    en: "How to integrate the advice from this course into your workflow, CMS, CDN, and automation tools."
+    
+example:
+  title:
+    en: Example course
+  description:
+    en: This page is used for visual testing of the courses layout and also showcases it's capabilities"
+
diff --git a/src/site/_data/i18n/explore.yml b/src/site/_data/i18n/explore.yml
new file mode 100644
index 00000000000..656ea54b0c7
--- /dev/null
+++ b/src/site/_data/i18n/explore.yml
@@ -0,0 +1,68 @@
+header:
+  en: "Explore our structured learning paths to discover everything you need to know about building for the modern web."
+  es: "Explore nuestras rutas de aprendizaje estructuradas para descubrir todo lo que necesita saber sobre cómo crear para la Web moderna."
+  ja: "体系的なラーニングパスを経由することにより、最新の Web 環境の構築に必要なすべての知識を学ぶことができます。"
+  ko: "잘 짜여진 학습 경로를 따라 최신 웹 구축에 대해 알아야 할 모든 사항을 찾아보세요."
+  pt: "Explore nossos caminhos de aprendizagem estruturados para descobrir tudo o que você precisa saber sobre como criar para a web moderna."
+  ru: "Ознакомьтесь с нашими структурированными курсами, которые научат вас всему необходимому для создания современных сайтов."
+  zh: "探索我们的结构化学习路径，发掘您为现代网络构建时的所有须知事项。"
+
+resources:
+  en: resources
+  es: recursos
+  ja: 件のリソース
+  ko: 리소스
+  pt: recursos
+  ru: (ресурсы)
+  zh: 个资源
+
+performance:
+  en: Performance
+  es: Performance
+  ja: パフォーマンス
+  ko: 성능
+  pt: Desempenho
+  ru: Производительность
+  zh: 性能
+
+build_excellent:
+  en: Build excellent websites
+  es: Crea sitios web excelentes
+  ja: 優れた Web サイトを構築する
+  ko: 우수한 웹사이트 구축
+  pt: Crie sites excelentes
+  ru: Создание качественных сайтов
+  zh: 构建优秀的网站
+
+frameworks:
+  en: Frameworks
+  es: Frameworks
+  ja: フレームワーク
+  ko: 프레임워크
+  pt: Frameworks
+  ru: Фреймворки
+  zh: 框架
+
+lighthouse:
+  en: Lighthouse
+  es: Lighthouse
+  ja: Lighthouse
+  ko: Lighthouse
+  pt: Lighthouse
+  ru: Lighthouse
+  zh: Lighthouse
+
+explorations:
+  en: Explorations
+  es: Exploraciones
+  ja: 探求
+  ko: 탐색
+  pt: Explorações
+  ru: Дополнительно
+  zh: 探索
+
+collections:
+  en: Collections
+
+web_dev_basics:
+  en: Web Dev Basics
diff --git a/src/site/_data/i18n/footer.yml b/src/site/_data/i18n/footer.yml
new file mode 100644
index 00000000000..d2b8dc9bf59
--- /dev/null
+++ b/src/site/_data/i18n/footer.yml
@@ -0,0 +1,117 @@
+contribute:
+  en: Contribute
+  pt: Contribua
+
+file_a_bug:
+  en: File a bug
+  es: Presentar un error
+  ja: バグを報告する
+  ko: 버그 신고
+  pt: Registrar um bug
+  ru: Сообщить об ошибке
+  zh: 提交错误
+
+view_source:
+  en: View source
+  es: Ver fuente
+  ja: ソースを表示する
+  ko: 소스 보기
+  pt: Visualizar código-fonte
+  ru: Просмотреть исходный код
+  zh: 查看源代码
+
+related_content:
+  en: Related content
+  es: Contenido relevante
+  ja: 関連性のあるコンテンツ
+  ko: 관련된 콘텐츠
+  pt: Conteúdo relacionado
+  ru: Дополнительная информация
+  zh: 相关内容
+
+chrome_updates:
+  en: Chrome updates
+  es: Chrome Actualizaciones
+  ja: Chrome のアップデート
+  ko: Chrome 업데이트
+  pt: Atualizações do Chrome
+  ru: Новости Chrome
+  zh: Chrome 动态
+
+web_fundamentals:
+  en: Web Fundamentals
+  es: Web Fundamentals
+  ja: Web Fundamentals
+  ko: 웹 기초
+  pt: Web Fundamentals
+  ru: Web Fundamentals
+  zh: 网站开发基础
+
+case_studies:
+  en: Case studies
+  es: Case studies
+  ja: ケーススタディ
+  ko: 사례 연구
+  pt: Estudos de caso
+  ru: Разборы конкретных случаев
+  zh: 案例研究
+
+podcasts:
+  en: Podcasts
+  es: Podcasts
+  ja: ポッドキャスト
+  ko: 팟캐스트
+  pt: Podcasts
+  ru: Подкасты
+  zh: 播客
+
+connect:
+  en: Connect
+  es: Conectar
+  ja: 接続する
+  ko: 연결
+  pt: Conectar
+  ru: Соцсети
+  zh: 连接
+
+all_products:
+  en: All products
+  es: Todos los productos
+  ja: すべての製品
+  ko: 전체 제품
+  pt: Todos os produtos
+  ru: Все продукты
+  zh: 所有产品
+
+terms_and_privacy:
+  en: Terms & Privacy
+  es: Condiciones y privacidad
+  ja: 利用規約とプライバシーポリシー
+  ko: 약관 및 개인정보 보호
+  pt: Termos e privacidade
+  ru: Условия и конфиденциальность
+  zh: 条款和隐私权
+
+community_guidelines:
+  en: Community Guidelines
+  es: Principios de la Comunidad
+  ja: コミュニティガイドライン
+  ko: 커뮤니티 가이드라인
+  pt: Diretrizes da comunidade
+  ru: Правила сообщества
+  zh: 社区准则
+
+shows:
+  en: Shows
+  es: Shows
+  ja: ショー
+  ko: 쇼
+  pt: Shows
+  ru: Шоу
+  zh: 节目
+
+developer_chrome_com:
+  en: developer.chrome.com
+
+mission:
+  en: We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.
diff --git a/src/site/_data/i18n/header.yml b/src/site/_data/i18n/header.yml
new file mode 100644
index 00000000000..184662bab72
--- /dev/null
+++ b/src/site/_data/i18n/header.yml
@@ -0,0 +1,74 @@
+learn:
+  en: Learn
+  es: Aprender
+  ja: 学習する
+  ko: 배우기
+  pt: Aprender
+  ru: Обучение
+  zh: 学习
+
+explore:
+  en: Explore
+  es: Explorar
+  ja: 探検
+  ko: 탐구하다
+  pt: Explorar
+  ru: Исследовать
+  zh: 探索
+
+patterns:
+  en: Patterns
+  es: patrones
+  ja: パターン
+  ko: 패턴
+  pt: padrões
+  ru: Паттерны
+  zh: 模式
+
+measure:
+  en: Measure
+  es: Medir
+  ja: 測定する
+  ko: 측정
+  pt: Medir
+  ru: Измерить
+  zh: 衡量
+
+blog:
+  en: Blog
+  es: Blog
+  ja: ブログ
+  ko: 블로그
+  pt: Blog
+  ru: Блог
+  zh: 博客
+
+about:
+  en: About
+  es: About
+  ja: 概要
+  ko: 정보
+  pt: Sobre
+  ru: О сайте
+  zh: 关于
+
+live:
+  en: Live
+  es: Live
+  ja: ライブ
+  ko: 라이브
+  pt: Produção
+  ru: Live
+  zh: 直播
+
+open_menu:
+  en: Open menu
+  es: Abrir menú
+  ja: メニューを開く
+  ko: 메뉴 열기
+  pt: Abrir menu
+  ru: Открыть меню
+  zh: 打开菜单
+
+case_studies:
+  en: Case studies
diff --git a/src/site/_data/i18n/instruction.yml b/src/site/_data/i18n/instruction.yml
new file mode 100644
index 00000000000..087ce751222
--- /dev/null
+++ b/src/site/_data/i18n/instruction.yml
@@ -0,0 +1,53 @@
+devtools:
+  en: DevTools
+
+network:
+  en: Network
+  ru: Сеть
+
+elements:
+  en: Elements
+  ru: Элементы
+
+console:
+  en: Console
+  ru: Консоль
+
+sources:
+  en: Sources
+  ru: Источники
+  
+performance:
+  en: Performance
+  ru: Производительность
+
+memory:
+  en: memory
+  ru: память
+
+application:
+  en: Application
+  ru: Приложение
+
+security:
+  en: Security
+  ru: Защита
+
+lighthouse:
+  en: Lighthouse
+
+disable_cache:
+  en: Select the **Disable cache** checkbox.
+  ru: Установите флажок **Отключить кеш**.
+
+reload_page:
+  en: Reload the page.
+  ru: Перезагрузите страницу.
+
+devtools_click:
+  en: Click the **$0** tab.
+  ru: Перейдите на вкладку **$0**.
+
+devtools_shared:
+  en: Press \`Control+Shift+J\` (or \`Command+Option+J\` on Mac) to open DevTools.
+  ru: Откройте DevTools, нажав `Control+Shift+J` (или `Command+Option+J`, если у вас Mac).
\ No newline at end of file
diff --git a/src/site/_data/i18n/learn.yml b/src/site/_data/i18n/learn.yml
new file mode 100644
index 00000000000..49c8ef27ffe
--- /dev/null
+++ b/src/site/_data/i18n/learn.yml
@@ -0,0 +1,11 @@
+header:
+  en: "Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about."
+
+resources:
+  en: resources
+  es: recursos
+  ja: 件のリソース
+  ko: 리소스
+  pt: recursos
+  ru: (ресурсы)
+  zh: 个资源
diff --git a/src/site/_data/i18n/paths/accessible.yml b/src/site/_data/i18n/paths/accessible.yml
new file mode 100644
index 00000000000..05b78383681
--- /dev/null
+++ b/src/site/_data/i18n/paths/accessible.yml
@@ -0,0 +1,63 @@
+title:
+  en: Accessible to all
+  es: Accesible para todos
+  ja: すべてのユーザーをアクセス可能に
+  ko: 누구나 이용 가능
+  pt: Acessível a todos
+  ru: Доступность для всех
+  zh: 让所有人都能访问
+
+description:
+  en: Build a site that works for all of your users.
+  es: Crea un sitio que funcione para todos sus usuarios.
+  ja: すべてのユーザーにとってアクセスが可能なサイトを構築しましょう。
+  ko: 모든 사용자에게 적합한 사이트를 구축하세요.
+  pt: Crie um site que funcione para todos os seus usuários.
+  ru: Создайте сайт, который подойдет для всех ваших пользователей.
+  zh: 构建一个适用于所有用户的网站。
+
+overview:
+  en: All users should be able to access your content. In this section you'll learn how to provide a robust experience to your users that accounts for their context and any situational, temporary, or permanent disabilities.
+  es: Todos los usuarios deben poder acceder a su contenido. En esta sección aprenderá cómo proporcionar una experiencia sólida a sus usuarios, teniendo en cuenta su contexto y cualquier situación de discapacidad, temporal o permanente.
+  ja: すべてのユーザーがコンテンツにアクセスできるようにする必要があります。このセクションでは、ユーザーの文脈や、状況に起因する障害、一時的な障害、永続的な障害を考慮に入れ、ユーザーに対して安定したエクスペリエンスを提供する方法について説明します。
+  ko: 모든 사용자가 콘텐츠에 액세스할 수 있어야 합니다. 이 섹션에서는 컨텍스트와 모든 상황적, 일시적 또는 영구적 장애를 고려하여 사용자에게 강력한 경험을 제공하는 방법을 알아봅니다.
+  pt: Todos os usuários devem poder acessar seu conteúdo. Nesta seção, você aprenderá como fornecer uma experiência robusta para seus usuários, considerando seu contexto e quaisquer deficiências situacionais, temporárias ou permanentes.
+  ru: Контент на вашем сайте должен быть доступен для всех. В этом разделе вы узнаете, как сделать доступ к сайту удобным для пользователей независимо от их контекста, а также от различных ситуативных, временных или постоянных ограничений.
+  zh: 所有用户都应该能够访问您的内容。在此部分中，您将了解如何在考虑用户所处境况以及他们在任何情况下的、暂时性或永久性残疾的同时，为您的用户提供一种健全的体验。
+
+topics:
+  understand_the_diverse_needs_of_users:
+    en: Understand the diverse needs of users
+    es: Comprender las diversas necesidades de los usuarios
+    ja: ユーザーの多様なニーズを理解する
+    ko: 사용자의 다양한 요구 이해
+    pt: Entender as diversas necessidades dos usuários
+    ru: Понимание разнообразных потребностей пользователей
+    zh: 了解用户的多样化需求
+
+  make_your_site_keyboard_accessible:
+    en: Make your site keyboard accessible
+    es: Habilite el acceso a su sitio web con el teclado
+    ja: サイトをキーボードで操作できるようにする
+    ko: 사이트 키보드에 접근성 부여
+    pt: Torne o teclado do seu site acessível
+    ru: Адаптация сайта для управления с помощью клавиатуры
+    zh: 使您的网站能够通过键盘进行访问
+
+  understand_semantics_and_basic_screen_reader_support:
+    en: Understand semantics and basic screen reader support
+    es: Comprender la semántica y la compatibilidad básica con lectores de pantalla
+    ja: セマンティクスと基本的なスクリーンリーダーのサポートについて理解する
+    ko: 의미 체계 및 기본적인 화면 읽기 프로그램 지원 이해하기
+    pt: Entenda a semântica e o suporte básico ao leitor de tela
+    ru: Понимание семантики и реализации базовой поддержки программ чтения с экрана
+    zh: 了解语义学和基本的屏幕阅读器支持
+
+  create_a_design_and_css_that_supports_users_with_different_needs:
+    en: Create a design and CSS that supports users with different needs
+    es: Cree un diseño y un CSS que de soporte a los usuarios con diferentes necesidades
+    ja: さまざまなニーズを持ったユーザーに対応するデザインおよび CSS を作成する
+    ko: 다양한 요구 사항을 가진 사용자를 지원하는 디자인 및 CSS 생성
+    pt: Crie um design e CSS que ofereça suporte a usuários com necessidades diferentes
+    ru: Создание дизайна и CSS-стилей с учетом различных потребностей пользователей
+    zh: 创建一套为有不同需求的用户提供支持的设计和 CSS
diff --git a/src/site/_data/i18n/paths/angular.yml b/src/site/_data/i18n/paths/angular.yml
new file mode 100644
index 00000000000..546a5abcb8b
--- /dev/null
+++ b/src/site/_data/i18n/paths/angular.yml
@@ -0,0 +1,72 @@
+title:
+  en: Angular
+  es: Angular
+  ja: Angular
+  ko: Angular
+  pt: Angular
+  ru: Angular
+  zh: Angular
+
+description:
+  en: Build performant and progressive Angular applications.
+  es: Crea aplicaciones de Angular progresivas y de alto rendimiento.
+  ja: 優れたパフォーマンスを発揮するプログレッシブ Angular アプリケーションを構築しましょう。
+  ko: 성능이 뛰어나고 진보적인 Angular 애플리케이션을 구축하세요.
+  pt: Construa aplicativos Angular progressivos de alto desempenho.
+  ru: Создавайте прогрессивные и производительные приложения на основе Angular.
+  zh: 构建高性能与渐进式 Angular 应用。
+
+overview:
+  en: In this collection you’ll learn practical tips and tricks to make your Angular applications faster, more reliable, more accessible, and generally awesome.
+  es: En esta colección aprenderás trucos y consejos prácticos para hacer que tus aplicaciones de Angular sean más rápidas, confiables, accesibles y, en general, increíbles.
+  ja: このコレクションでは、Angular アプリケーションを高速化し、より安定させ、より高いアクセシビリティを実現しながら、全体を通して素晴らしいものにするための実践的なヒントやコツをご紹介します。
+  ko: 이 컬렉션에서는 Angular 애플리케이션을 더 빠르고 안정적이며 액세스하기 쉽고 전반적으로 훌륭하게 만드는 실용적인 팁과 트릭을 알아봅니다.
+  pt: Nesta coleção, você aprenderá dicas e truques práticos para deixar seus aplicativos Angular mais rápidos, mais confiáveis, mais acessíveis e, em geral, incríveis.
+  ru: В этой серии вы сможете ознакомиться с практическими советами о том, как сделать приложения на основе Angular более быстрыми, надежными, доступными и в целом более качественными.
+  zh: 在该系列文章中，您将了解能够使您的 Angular 应用更快、更可靠、更易于使用，且整体上更加出色的实用技巧和窍门。
+
+topics:
+  introduction:
+    en: Introduction
+    es: Introducción
+    ja: はじめに
+    ko: 소개
+    pt: Introdução
+    ru: Введение
+    zh: 介绍
+
+  fast:
+    en: Fast
+    es: Rápido
+    ja: 高速性
+    ko: 빠른 속도
+    pt: Rápido
+    ru: Скорость
+    zh: 快速
+
+  reliable:
+    en: Reliable
+    es: Confiable
+    ja: 安定性
+    ko: 안정적 작동
+    pt: Confiável
+    ru: Надежность
+    zh: 可靠
+
+  installable:
+    en: Installable
+    es: Instalable
+    ja: インストール可能性
+    ko: 설치 가능
+    pt: Instalável
+    ru: Возможность установки
+    zh: 可安装
+
+  accessible:
+    en: Accessible
+    es: Accesible
+    ja: アクセシビリティ
+    ko: 접근 가능
+    pt: Acessível
+    ru: Доступность
+    zh: 易于使用
diff --git a/src/site/_data/i18n/paths/animations.yml b/src/site/_data/i18n/paths/animations.yml
new file mode 100644
index 00000000000..ce47968da11
--- /dev/null
+++ b/src/site/_data/i18n/paths/animations.yml
@@ -0,0 +1,54 @@
+title:
+  en: Animations
+  es: Animaciones
+  ja: アニメーション
+  ko: 애니메이션
+  pt: Animações
+  ru: Анимации
+  zh: 动画
+
+description:
+  en: Techniques for developing high-performance animations.
+  es: Técnicas para desarrollar animaciones de alto rendimiento.
+  ja: 優れたパフォーマンスを発揮するアニメーションを作成するための技術。
+  ko: 고성능 애니메이션을 개발하기 위한 기술.
+  pt: Técnicas para desenvolvimento de animações de alto desempenho.
+  ru: Приемы для создания высокопроизводительных анимаций.
+  zh: 开发高性能动画的技术。
+
+overview:
+  en: A curated collection of high-quality resources that will help you understand why some animations are slow, and how to build and debug your own animations with CSS or JavaScript.
+  es: Una colección seleccionada de recursos de alta calidad que le ayudarán a comprender por qué algunas animaciones son lentas, y cómo crear y depurar sus propias animaciones con CSS o JavaScript.
+  ja: 一部のアニメーションの動作が遅い理由や、CSS や JavaScript を活用した独自のアニメーションの開発方法やデバッグの実施方法の理解に役立つ質の高いリソースを厳選したコレクションです。
+  ko: 일부 애니메이션이 느린 이유와 CSS 또는 JavaScript를 사용하여 애니메이션을 빌드하고 디버그하는 방법을 이해하는 데 도움이 되는 선별된 고품격 리소스 모음입니다.
+  pt: Uma coleção organizada de recursos de alta qualidade que vão lhe ajudar a entender por que algumas animações são lentas e como criar e depurar suas próprias animações com CSS ou JavaScript.
+  ru: Коллекция специально отобранных высококачественных ресурсов, которые расскажут вам, в чём причина медленной отрисовки некоторых анимаций и как можно создавать и отлаживать собственные анимации с помощью CSS или JavaScript.
+  zh: 一个精选高质量资源集合，能够帮助您了解某些动画运行缓慢的原因，以及如何使用 CSS 或 JavaScript 构建和调试您自己的动画。
+
+topics:
+  how_browsers_render_animations:
+    en: How browsers render animations
+    es: Cómo los navegadores renderizan animaciones
+    ja: ブラウザーがアニメーションをレンダリングする際の仕組み
+    ko: 브라우저에서 애니메이션을 렌더링하는 방법
+    pt: Como os navegadores renderizam animações
+    ru: Как происходит отрисовка анимации в браузере
+    zh: 浏览器呈现动画的方式
+
+  build_animations_with_css:
+    en: Build animations with CSS
+    es: Crea animaciones con CSS
+    ja: CSS を使用してアニメーションを作成する
+    ko: CSS로 애니메이션 빌드
+    pt: Crie animações com CSS
+    ru: Создание анимаций с помощью CSS
+    zh: 使用 CSS 构建动画
+
+  build_animations_with_javascript:
+    en: Build animations with JavaScript
+    es: Crea animaciones con JavaScript
+    ja: JavaScript を使用してアニメーションを作成する
+    ko: JavaScript로 애니메이션 빌드
+    pt: Crie animações com JavaScript
+    ru: Создание анимаций с помощью JavaScript
+    zh: 使用 JavaScript 构建动画
diff --git a/src/site/_data/i18n/paths/authors.yml b/src/site/_data/i18n/paths/authors.yml
new file mode 100644
index 00000000000..11f28e75489
--- /dev/null
+++ b/src/site/_data/i18n/paths/authors.yml
@@ -0,0 +1,8 @@
+see_more:
+  en: See more Authors
+  es: Ver más Autores
+  ja: 他の執筆者を見る
+  ko: 더 많은 저자 보기
+  pt: Ver mais Autores
+  ru: Другие авторы
+  zh: 查看更多作者
diff --git a/src/site/_data/i18n/paths/devices.yml b/src/site/_data/i18n/paths/devices.yml
new file mode 100644
index 00000000000..a38a942cf79
--- /dev/null
+++ b/src/site/_data/i18n/paths/devices.yml
@@ -0,0 +1,54 @@
+title:
+  en: Devices
+  es: Dispositivos
+  ja: デバイス
+  ko: 장치
+  pt: Dispositivos
+  ru: Устройства
+  zh: 设备
+
+description:
+  en: Connecting hardware devices to the web
+  es: Conexión de dispositivos de hardware a la web
+  ja: ハードウェア デバイスを Web に接続する
+  ko: 웹에 하드웨어 장치 연결
+  pt: Conexão de dispositivos de hardware à web
+  ru: Взаимодействие с устройствами на веб-страницах
+  zh: 将硬件设备连接到网络
+
+overview:
+  en: Learn to communicate with hardware devices over Bluetooth, USB, NFC, Serial, and HID from a website.
+  es: Aprenda a comunicarse con dispositivos de hardware mediante Bluetooth, USB, NFC, Serial y HID desde un sitio web.
+  ja: Bluetooth、USB、NFC、シリアル接続、HID を介して Web サイトからハードウェアデバイスへと通信を行う方法について説明します。
+  ko: 웹사이트에서 Bluetooth, USB, NFC, 직렬 및 HID를 통해 하드웨어 장치와 통신하는 방법을 알아봅니다.
+  pt: Aprenda a se comunicar com dispositivos de hardware através de Bluetooth, USB, NFC, Serial e HID a partir de um site.
+  ru: Узнайте, как реализовать на сайте взаимодействие с устройствами посредством Bluetooth, USB, NFC, последовательного порта или HID.
+  zh: 学会从网站上通过蓝牙、USB、NFC、串行和 HID 与硬件设备进行通信。
+
+topics:
+  introduction:
+    en: Introduction
+    es: Introducción
+    ja: はじめに
+    ko: 소개
+    pt: Introdução
+    ru: Введение
+    zh: 介绍
+
+  api_guides:
+    en: API guides
+    es: Guías de la API
+    ja: API ガイド
+    ko: API 가이드
+    pt: Guias de API
+    ru: Руководства по API
+    zh: API 指南
+
+  advanced_topics:
+    en: Advanced topics
+    es: Temas avanzados
+    ja: 高度なトピック
+    ko: 고급 주제
+    pt: Tópicos avançados
+    ru: Продвинутые темы
+    zh: 高级主题
diff --git a/src/site/_data/i18n/paths/discoverable.yml b/src/site/_data/i18n/paths/discoverable.yml
new file mode 100644
index 00000000000..ba3cad05295
--- /dev/null
+++ b/src/site/_data/i18n/paths/discoverable.yml
@@ -0,0 +1,57 @@
+title:
+  en: Easily discoverable
+  es: Fácilmente visualizable
+  ja: 検索で簡単に見つかるようにする
+  ko: 쉽게 발견 가능
+  pt: Facilmente encontrável
+  ru: Обеспечение видимости сайта
+  zh: 能够被轻松发现
+
+description:
+  en: Ensure users can find your site easily through search.
+  es: Asegúrese de que los usuarios puedan encontrar su sitio fácilmente a través de las búsquedas.
+  ja: ユーザーが検索を介してあなたのサイトを簡単に見つけられるようにしましょう。
+  ko: 사용자가 검색을 통해 내 사이트를 쉽게 찾을 수 있도록 하세요.
+  pt: Garanta que os usuários consigam encontrar seu site facilmente por meio de uma busca.
+  ru: Позаботьтесь о том, чтобы пользователи легко находили ваш сайт в поиске.
+  zh: 确保用户可以通过搜索轻松找到您的网站。
+
+overview:
+  en: |
+    Making your content discoverable matters because it's how you get more relevant users viewing your content. If a search engine has trouble seeing your page, you're possibly missing out on a source of traffic.
+
+    By making sure search engines can find and automatically understand your content, you are improving the visibility of your site for relevant searches. This is called SEO, or search engine optimization, which can result in more interested users coming to your site. Audit your site and check the SEO results to see how well search engines can surface your content.
+  es: |
+    Es importante hacer que su contenido sea detectable porque así consigue que más usuarios destacados vean su contenido. Si un motor de búsqueda tiene problemas para ver su página, podría estar perdiendo una fuente de tráfico.
+
+    Al asegurarse de que los motores de búsqueda pueden encontrar y comprender automáticamente su contenido, está mejorando la visibilidad de su sitio cuando se realizan búsquedas. Esto se llama SEO, Posicionamiento en buscadores u Optimización de motores de búsqueda, que puede dar lugar a que más usuarios interesados lleguen a su sitio. Audite su sitio web y verifique los resultados de SEO para ver cómo los motores de búsqueda pueden mostrar su contenido.
+  ja: |
+    コンテンツを検索結果に表示されやすくすることは、より多くの関連ユーザーにコンテンツを閲覧してもらうために重要です。検索エンジンがあなたのページを見つけ出すことができなければ、トラフィックの源泉を逃すことになってしまう可能性があります。
+
+    検索エンジンがあなたのコンテンツを見つけ出し、自動的に内容を理解できるようにすることにより、ユーザーの検索結果でのあなたのサイトの可視性を高めることができます。これは SEO (検索エンジン最適化) と呼ばれ、これを実施することにより興味を持ったユーザーがより多くあなたのサイトを訪問してくれるようになります。あなたのサイトを監査し、SEO の結果を確認して、検索エンジンがあなたのコンテンツをどの程度カバーできているのかを確認しましょう。
+  ko: |
+    콘텐츠를 검색 가능하게 만드는 것은 관련성이 더욱 높은 사용자가 콘텐츠를 보게 된다는 점에서 중요성이 큽니다. 검색 엔진에 페이지가 잘 드러나지 않으면 트래픽 소스를 놓치고 있을 수 있습니다.
+
+    검색 엔진이 해당 콘텐츠를 찾고 자동으로 이해할 수 있도록 하면 관련 검색에서 사이트의 가시성이 향상됩니다. 이를 SEO 또는 검색 엔진 최적화라고 하며 관심을 가진 더 많은 사용자가 사이트를 방문하도록 유도할 수 있습니다. 사이트를 감사하고 SEO 결과를 확인하여 검색 엔진이 해당 콘텐츠를 얼마나 잘 보여줄 수 있는지 확인하세요.
+  pt: |
+    Deixar seu conteúdo encontrável é importante porque é assim que você consegue que usuários mais relevantes visualizem seu conteúdo. Se um mecanismo de busca tiver problemas para acessar sua página, você pode estar perdendo uma fonte de tráfego.
+
+    Ao garantir que os mecanismos de busca consigam encontrar e entender automaticamente seu conteúdo, você estará melhorando a visibilidade do seu site para pesquisas relevantes. Isto se chama SEO, ou otimização do mecanismo de pesquisa (search engine optimization), o que pode resultar em mais usuários interessados chegando ao seu site. Faça uma auditoria no seu site e verifique os resultados de SEO para conhecer a capacidade dos mecanismos de busca em mostrar seu conteúdo.
+  ru: |
+    Старайтесь облегчить обнаружение вашего контента, чтобы его чаще просматривали заинтересованные пользователи. Если поисковые системы не могут проиндексировать вашу страницу, возможно, вы упускаете важный источник трафика.
+
+    Позволив поисковым системам находить и автоматически обрабатывать ваш контент, вы повышаете видимость вашего сайта по релевантным запросам. Это называется «SEO» или «поисковая оптимизация», и с ее помощью можно привлечь на сайт больше заинтересованных пользователей. Проведите аудит своего сайта и ознакомьтесь с результатами SEO, чтобы узнать, насколько хорошо поисковые системы обнаруживают размещенный вами контент.
+  zh: |
+    使您的内容能够被发现十分重要，因为只有这样，才能让更多相关用户查看您的内容。如果搜索引擎无法看到您的网页，那么您就有可能错失一大流量来源。
+
+    通过确保搜索引擎可以找到并自动理解您的内容，您可以提高网站在相关搜索中的可见度。这称为 SEO 或搜索引擎优化，该优化可以促使更多感兴趣的用户访问您的网站。对您的网站进行审核并检查 SEO 结果，了解搜索引擎对您的内容的呈现情况。
+
+topics:
+  how_search_works_and_how_to_measure_discoverability:
+    en: How search works and how to measure discoverability
+    es: Cómo funciona la búsqueda y cómo medir la capacidad de visualización
+    ja: 検索の仕組みと見つけやすさの測定方法
+    ko: 검색 작동 방식 및 검색 가능성을 측정하는 방법
+    pt: Como funciona a busca e como medir a capacidade de descoberta
+    ru: Как работает поиск и как измерить легкость обнаружения страницы
+    zh: 搜索的运作方式以及衡量曝光度的方式
diff --git a/src/site/_data/i18n/paths/fast.yml b/src/site/_data/i18n/paths/fast.yml
new file mode 100644
index 00000000000..3c76d05219e
--- /dev/null
+++ b/src/site/_data/i18n/paths/fast.yml
@@ -0,0 +1,144 @@
+title:
+  en: Fast load times
+  es: Tiempos de carga rápidos
+  ja: 読み込み時間の高速化
+  ko: 빠른 로드 시간
+  pt: Tempos de carregamento rápidos
+  ru: Ускорение загрузки
+  zh: 快速加载
+
+description:
+  en: Techniques for improving site performance.
+  es: Técnicas para mejorar el rendimiento del sitio.
+  ja: サイトのパフォーマンスを改善するための技術。
+  ko: 사이트 성능을 높이기 위한 기술.
+  pt: Técnicas para melhorar o desempenho do site.
+  ru: Приемы для повышения производительности сайта.
+  zh: 提升网站性能的技术。
+
+overview:
+  en: When you're building a modern web experience, it's important to measure, optimize, and monitor if you're to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric happiness metrics. Tools like Lighthouse (baked into web.dev!) highlight these metrics and help you take the right steps toward improving your performance. To "stay fast", set and enforce performance budgets to help your team work within the constraints needed to continue loading fast and keeping users happy after your site has launched.
+  es: Cuando se crea una experiencia web moderna, es importante medir, optimizar y monitorear si se quiere ser rápido y mantenerse rápido. El rendimiento juega un papel importante en el éxito de cualquier empresa en línea, ya que los sitios de alto rendimiento atraen y retienen a los usuarios mejor que los de bajo rendimiento. Los sitios deben centrarse en optimizar las métricas de felicidad centradas en el usuario. Herramientas como Lighthouse (¡integrada en web.dev!) destacan estas métricas le ayudan a tomar las medidas adecuadas para mejorar su rendimiento. Para "mantenerse rápido", establezca y haga cumplir presupuestos de rendimiento para ayudar a su equipo a trabajar dentro de las limitaciones necesarias para seguir cargando rápido y mantener a los usuarios contentos después del lanzamiento de su sitio.
+  ja: 最新の Web エクスペリエンスを構築する際に高速化を行い、高速化を維持するためには、測定、最適化、監視が重要となります。パフォーマンスの高いサイトではパフォーマンスの低いサイトに比べてユーザーの活動がより活発になり、そしてその活動がより長く維持されるようになるため、Web ベンチャーが成功を収めるためにはパフォーマンスが重要な役割を果たします。サイトは、ユーザーの満足度を中心とした指標に重点を置いて最適化が行われる必要があります。これらの指標を確認し、パフォーマンスを向上させるために必要な正しい手順を進めるためには、(web.dev に組み込まれている) Lighthouse などのツールが役に立ちます。"高速化を維持する" ためには、パフォーマンスバジェットを設定して適用し、高速化した読み込み速度やユーザーにとっての高い使用感を維持していくために必要な制約の中でサイトの公開後もチームが作業を行うようにしましょう。
+  ko: 최신 웹 경험을 구축할 때는 속도를 높이고 빠르게 유지할 수 있는지 측정하고 이를 최적화 및 모니터링하는 것이 중요합니다. 성능이 저조한 사이트보다 성능이 좋은 사이트가 사용자를 더 잘 유도하고 유지하기 때문에 성능은 모든 온라인 도전의 성공에 중요한 역할을 합니다. 사용자 중심의 만족도 메트릭을 최적화하는 데 사이트 개발의 중점을 두어야 합니다. Lighthouse와 같은 도구(web.dev에 포함됨!)는 이러한 메트릭을 중요하게 부각시키고 성능 향상을 위한 올바른 단계를 거치도록 도움을 줍니다. "빠르게 유지"하려면 사이트가 시작된 후에도 계속 빠르게 로드하고 사용자를 만족스럽게 유지하는 데 필요한 제약 조건 내에서 팀이 작업할 수 있도록 성능 예산을 수립하고 실행하세요.
+  pt: Quando voce está criando uma experiência web moderna, é importante medir, otimizar e monitorar se você deseja ter velocidade e mantê-la. O desempenho tem um papel significativo no sucesso de qualquer empreendimento online, pois sites de alto desempenho envolvem e retêm melhor os usuários que os de baixo desempenho. Os sites devem se concentrar na otimização de métricas de felicidade centradas no usuário. Ferramentas como Lighthouse (incorporada ao web.dev!) destacam essas métricas e ajudam você a tomar as medidas certas para melhorar seu desempenho. Para "permanecer rápido", defina e imponha orçamentos de desempenho para ajudar sua equipe a trabalhar dentro das restrições necessárias para continuar carregando rapidamente e mantendo seus usuários satisfeitos depois do lançamento do seu site.
+  ru: При создании современного веб-проекта необходимо уделять много внимания измерениям, оптимизации и мониторингу, чтобы обеспечить высокую скорость работы. Производительность играет важную роль в успехе любого онлайн-проекта, так как высокопроизводительные сайты лучше привлекают и удерживают внимание пользователей. Разработчикам сайтов следует сосредоточиться на повышении показателей пользовательского счастья. Такие инструменты, как Lighthouse (доступен на web.dev), выделяют эти показатели и помогают предпринять нужные шаги для улучшения результата. Чтобы сайт оставался быстрым, установите бюджеты производительности и следите за их соблюдением, чтобы ваша команда не выходила за рамки допустимого времени загрузки страниц и ваши пользователи оставались удовлетворенными, после того как сайт будет запущен.
+  zh: 在构建现代网络体验时，如果您希望获得快速的体验并加以维持，那么对网站进行衡量、优化和监控就显得至关重要。性能对于任何线上项目的成功都起着重要作用，因为高性能网站比性能欠佳的网站更能吸引和留住用户。网站应该专注于优化以用户为中心的幸福指标。Lighthouse（已内置在 web.dev 中！）等工具可以突出这些指标，并帮助您采取正确的步骤来提高性能。若想“维持快速的体验”，请设置并执行性能预算来帮助您的团队在所需的限制条件内工作，从而在您的网站推出后继续提供快速的加载体验并让用户满意。
+
+topics:
+  introduction:
+    en: Introduction
+    es: Introducción
+    ja: はじめに
+    ko: 소개
+    pt: Introdução
+    ru: Введение
+    zh: 介绍
+
+  core_web_vitals:
+    en: Core Web Vitals
+    es: Core Web Vitals
+    ja: Core Web Vitals
+    ko: Core Web Vitals
+    pt: Core Web Vitals
+    ru: Core Web Vitals
+    zh: Core Web Vitals
+
+  set_performance_budgets:
+    en: Set performance budgets
+    es: Definir los presupuestos de rendimiento
+    ja: パフォーマンスバジェットを設定する
+    ko: 성능 예산 수립
+    pt: Defina orçamentos de desempenho
+    ru: Установка бюджетов производительности
+    zh: 设置性能预算
+
+  optimize_your_images:
+    en: Optimize your images
+    es: Optimizar sus imágenes
+    ja: 画像を最適化する
+    ko: 이미지 최적화
+    pt: Otimize suas imagens
+    ru: Оптимизация изображений
+    zh: 优化图片
+
+  lazy_load_images_and_video:
+    en: Lazy-load images and video
+    es: Carga diferida de imágenes y videos
+    ja: 画像や動画の遅延読み込みを設定する
+    ko: 이미지 및 비디오 지연 로드
+    pt: Use carregamento adiado (lazy loading) de imagens e vídeos
+    ru: Отложенная загрузка изображений и видео
+    zh: 延迟加载图片和视频
+
+  optimize_your_javascript:
+    en: Optimize your JavaScript
+    es: Optimizar su JavaScript
+    ja: JavaScript を最適化する
+    ko: JavaScript 최적화
+    pt: Otimize seu JavaScript
+    ru: Оптимизация JavaScript-кода
+    zh: 优化 JavaScript
+
+  optimize_your_resource_delivery:
+    en: Optimize your resource delivery
+    es: Optimizar la entrega de recursos
+    ja: リソースの配信を最適化する
+    ko: 리소스 전달 최적화
+    pt: Otimize a entrega de recursos
+    ru: Оптимизация доставки ресурсов
+    zh: 优化资源交付
+
+  optimize_your_css:
+    en: Optimize your CSS
+    es: Optimizar su CSS
+    ja: CSS を最適化する
+    ko: CSS 최적화
+    pt: Otimize seu CSS
+    ru: Оптимизация CSS
+    zh: 优化 CSS
+
+  optimize_your_third_party_resources:
+    en: Optimize your third-party resources
+    es: Optimizar recursos de terceros
+    ja: サードパーティ製リソースを最適化する
+    ko: 타사 리소스 최적화
+    pt: Otimize recursos de terceiros
+    ru: Оптимизация сторонних ресурсов
+    zh: 优化第三方资源
+
+  optimize_webfonts:
+    en: Optimize WebFonts
+    es: Optimizar WebFonts
+    ja: Web フォントを最適化する
+    ko: WebFonts 최적화
+    pt: Otimize WebFonts
+    ru: Оптимизация веб-шрифтов
+    zh: 优化网络字体
+
+  optimize_for_network_quality:
+    en: Optimize for network quality
+    es: Optimizar la calidad de la red
+    ja: ネットワーク品質の最適化
+    ko: 네트워크 품질 최적화
+    pt: Otimize visando a qualidade da rede
+    ru: Оптимизация с учетом качества соединения
+    zh: 针对网络质量优化
+
+  measure_performance_in_the_field:
+    en: Measure performance in the field
+    es: Medir el rendimiento en el campo
+    ja: 実際のユーザー環境でパフォーマンスを測定する
+    ko: 현장에서 성능 측정
+    pt: Meça o desempenho em campo
+    ru: Измерение производительности в полевых условиях
+    zh: 对性能进行实测
+
+  build_a_performance_culture:
+    en: Build a performance culture
+    es: Crea una cultura del rendimiento
+    ja: パフォーマンス文化を築き上げる
+    ko: 성과를 장려하는 문화 수립
+    pt: Construa uma cultura de desempenho
+    ru: Создание культуры производительности
+    zh: 建立性能文化
diff --git a/src/site/_data/i18n/paths/handbook.yml b/src/site/_data/i18n/paths/handbook.yml
new file mode 100644
index 00000000000..f61924f0091
--- /dev/null
+++ b/src/site/_data/i18n/paths/handbook.yml
@@ -0,0 +1,63 @@
+title:
+  en: Content handbook
+  es: Manual de contenido
+  ja: コンテンツハンドブック
+  ko: 콘텐츠 핸드북
+  pt: Manual de conteúdo
+  ru: Руководство по созданию контента
+  zh: 内容手册
+
+description:
+  en: Create great content for web.dev.
+  es: Crear un gran contenido para web.dev.
+  ja: web.dev に関する優れたコンテンツを作成しましょう。
+  ko: web.dev를 위한 훌륭한 콘텐츠를 제작하세요.
+  pt: Crie um ótimo conteúdo para o web.dev.
+  ru: Создавайте качественный контент для web.dev.
+  zh: 为 web.dev 创建精彩的内容。
+
+overview:
+  en: This handbook helps contributors to web.dev create effective, engaging content and get it published as easily as possible. This is a living document that will evolve as we learn more about what works.
+  es: Este manual ayuda a que los colaboradores de web.dev creen contenido eficaz y atractivo y lo publiquen con la mayor facilidad posible. Se trata de un documento en dinámico que evolucionará conforme aprendamos más sobre lo que funciona.
+  ja: このハンドブックは、web.dev に貢献してくださるユーザーの皆さまが効果的かつ魅力的なコンテンツを作成し、それを可能な限り簡単に公開できるようにサポートするために作成されました。効果的な手法を学習しながら進化していく、生きたドキュメントです。
+  ko: 이 핸드북은 web.dev에 기여하는 사람들이 효과적이고 매력적인 콘텐츠를 제작하고 이를 가능한 한 쉽게 게시할 수 있도록 도와줍니다. 효과적인 것으로 확인된 부분을 더욱 보완해 나가는 살아 있는 문서입니다.
+  pt: Este manual ajuda os colaboradores do web.dev a criar conteúdo eficaz e envolvente e a publicá-lo com a maior facilidade possível. Este é um documento vivo que evoluirá à medida que aprendemos mais sobre o que funciona.
+  ru: Это руководство о том, как создавать качественный и интересный контент для сайта web.dev и с легкостью публиковать его. Документ будет дорабатываться по мере необходимости.
+  zh: 这本手册能够帮助 web.dev 的贡献者创建有效且具有吸引力的的内容，并尽可能轻松地发布这些内容。该手册是一个动态文档，将随着我们对有效方法的进一步了解而不断发展。
+
+topics:
+  content_process:
+    en: Content process
+    es: Procesamiento de contenido
+    ja: コンテンツのプロセス
+    ko: 콘텐츠 프로세스
+    pt: Processo de conteúdo
+    ru: Процесс публикации контента
+    zh: 内容流程
+
+  content_guidelines:
+    en: Content guidelines
+    es: Directrices de contenido
+    ja: コンテンツのガイドライン
+    ko: 콘텐츠 가이드라인
+    pt: Diretrizes de conteúdo
+    ru: Рекомендации по созданию контента
+    zh: 内容准则
+
+  web_dev_markup:
+    en: web.dev markup
+    es: marcado de web.dev
+    ja: web.dev のマークアップ
+    ko: web.dev 마크업
+    pt: Marcação web.dev
+    ru: Разметка web.dev
+    zh: web.dev 标记
+
+  content_infrastructure:
+    en: Content infrastructure
+    es: Infraestructura del contenido
+    ja: コンテンツのインフラストラクチャ
+    ko: 콘텐츠 인프라
+    pt: Infraestrutura de conteúdo
+    ru: Инфраструктура размещения контента
+    zh: 内容基础架构
diff --git a/src/site/_data/i18n/paths/how_to_optimize_inp.yaml b/src/site/_data/i18n/paths/how_to_optimize_inp.yaml
new file mode 100644
index 00000000000..44ee7fd020a
--- /dev/null
+++ b/src/site/_data/i18n/paths/how_to_optimize_inp.yaml
@@ -0,0 +1,21 @@
+title:
+  en: How to Optimize Interaction to Next Paint (INP)
+
+description:
+  en: Learn how to optimize for the Interaction to Next Paint metric.
+
+overview:
+  en: Interaction to Next Paint (INP) is an important responsiveness metric that measures how quickly a page responds to user interactions. INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. Optimizing INP is an involved process, requiring knowledge of various aspects that drive interactivity. Fortunately, the collection of guides below will help you to understand how INP works, how to find slow interactions in the field, how to reproduce them in the lab, and then fix them.
+
+topics:
+  familiarize:
+    en: Familiarize yourself with INP and how to optimize it
+
+  troubleshooting:
+    en: Troubleshooting
+
+  javascript:
+    en: Optimize poor INP caused by JavaScript
+
+  rendering:
+    en: Optimize poor INP caused by rendering
diff --git a/src/site/_data/i18n/paths/identity.yml b/src/site/_data/i18n/paths/identity.yml
new file mode 100644
index 00000000000..2d2337876a6
--- /dev/null
+++ b/src/site/_data/i18n/paths/identity.yml
@@ -0,0 +1,27 @@
+title:
+  en: Identity
+
+description:
+  en: Understand and build advanced authentication systems.
+
+overview:
+  en: A curated collection of high-quality resources that will help you understand authentication basics and how to build your own authentication systems with modern APIs.
+
+topics:
+  understand_authentication_basics:
+    en: Understand authentication basics
+
+  build_authentication_systems_with_modern_APIs:
+    en: Build authentication systems with modern APIs
+
+  strengthen_security_with_two-factor_authentication:
+    en: Strengthen security with two-factor authentication
+
+  build_advanced_authentication_systems:
+    en: Build advanced authentication systems
+
+  build_authentication_with_identity_federation:
+    en: Build authentication with identity federation
+
+  case_studies:
+    en: Case studies
diff --git a/src/site/_data/i18n/paths/learn_core_web_vitals.yml b/src/site/_data/i18n/paths/learn_core_web_vitals.yml
new file mode 100644
index 00000000000..82b25552427
--- /dev/null
+++ b/src/site/_data/i18n/paths/learn_core_web_vitals.yml
@@ -0,0 +1,81 @@
+title:
+  en: Core Web Vitals
+  es: Core Web Vitals
+  ja: Core Web Vitals
+  ko: Core Web Vitals
+  pt: Core Web Vitals
+  ru: Core Web Vitals
+  zh: Core Web Vitals
+
+description:
+  en: Essential metrics for a healthy site.
+  es: Métricas esenciales para mantener un sitio en excelente estado.
+  ja: サイトの健全性の評価に不可欠となる指標。
+  ko: 건전한 사이트를 위한 필수 메트릭.
+  pt: Métricas essenciais para um site saudável.
+  ru: Ключевые показатели, отражающие здоровье сайта.
+  zh: 健康网站的关键指标。
+
+overview:
+  en: An initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
+  es: Una iniciativa para proporcionar una guía unificada para las señales de calidad que son esenciales para ofrecer una gran experiencia de usuario en la web.
+  ja: Web 上での優れたユーザーエクスペリエンスの提供に不可欠な品質シグナルに関する統一されたガイダンスを提供するためのイニシアチブです。
+  ko: 웹에서 훌륭한 사용자 경험을 제공하는 데 필수적인 품질 신호와 관련하여 통합적 가이드를 제공하는 이니셔티브입니다.
+  pt: Uma iniciativa que proporciona orientação unificada para sinais de qualidade que são essenciais para oferecer uma ótima experiência ao usuário na web.
+  ru: Инициатива по предоставлению унифицированных сигналов качества для повышения удобства пользователей сайтов.
+  zh: 一项旨在为质量信号提供统一指导的计划，这些信号对于提供出色的网络用户体验至关重要。
+
+topics:
+  overview:
+    en: Overview
+    es: Panorama general
+    ja: 概要
+    ko: 개요
+    pt: Visão geral
+    ru: Краткий обзор
+    zh: 概览
+
+  core_web_vitals_metrics:
+    en: Core Web Vitals Metrics
+    es: Métricas de Core Web Vitals
+    ja: Core Web Vitals 指標
+    ko: Core Web Vitals 메트릭
+    pt: Métricas Core Web Vitals
+    ru: Показатели Core Web Vitals
+    zh: 网页指标
+
+  measure_core_web_vitals:
+    en: Measure Core Web Vitals
+    es: Medir Core Web Vitals
+    ja: Core Web Vitals を測定する
+    ko: Core Web Vitals 측정
+    pt: Medição das Core Web Vitals
+    ru: Измерение Core Web Vitals
+    zh: 衡量网页指标
+
+  improve_core_web_vitals:
+    en: Improve Core Web Vitals
+    es: Mejorar Core Web Vitals
+    ja: Core Web Vitals を改善する
+    ko: Core Web Vitals 개선
+    pt: Melhoria das Core Web Vitals
+    ru: Улучшение Core Web Vitals
+    zh: 改善网页指标
+
+  debug_core_web_vitals:
+    en: Debug Core Web Vitals
+    es: Depurar Core Web Vitals
+    ja: Core Web Vitals のデバッグを行う
+    ko: Core Web Vitals 디버깅
+    pt: Depuração das Core Web Vitals
+    ru: Отладка Core Web Vitals
+    zh: 调试网页指标
+
+  best_practices:
+    en: Best Practices
+    es: Prácticas recomendadas
+    ja: ベストプラクティス
+    ko: 모범 사례
+    pt: Práticas recomendadas
+    ru: Рекомендации
+    zh: 最佳做法
diff --git a/src/site/_data/i18n/paths/media.yml b/src/site/_data/i18n/paths/media.yml
new file mode 100644
index 00000000000..6005fcbca07
--- /dev/null
+++ b/src/site/_data/i18n/paths/media.yml
@@ -0,0 +1,54 @@
+title:
+  en: Media
+  es: Multimedia
+  ja: メディア
+  ko: 미디어
+  pt: Mídia
+  ru: Медиаконтент
+  zh: 媒体
+
+description:
+  en: Add audio and video to your web sites
+  es: Agregue audio y video a sus sitios web
+  ja: Web サイトに音声や動画を追加する
+  ko: 웹 사이트에 오디오 및 비디오 추가
+  pt: Adicione áudio e vídeo aos seus sites
+  ru: Добавляйте аудио и видео на свои сайты
+  zh: 将音频和视频添加到您的网站
+
+overview:
+  en: Learn to add media capabilities to your site using either basic HTML or a media framework such as Shaka Player, JW Player, or Video.js.
+  es: Aprenda cómo agregar funcionalidades multimedia a su sitio web utilizando HTML básico o una estructura multimedia como Shaka Player, JW Player o Video.js.
+  ja: 基本的な HTML、Shaka Player、JW Player、Video.js などのメディアフレームワークを使用し、サイトにメディア機能を追加する方法について説明します。
+  ko: 기본 HTML, 또는 Shaka Player, JW Player, Video.js와 같은 미디어 프레임워크를 사용하여 사이트에 미디어 기능을 추가하는 방법을 알아보세요.
+  pt: Aprenda a adicionar recursos de mídia a seu site usando HTML básico ou um framework de mídia como Shaka Player, JW Player ou Video.js.
+  ru: Узнайте, как добавлять на сайты мультимедийные возможности, используя базовый HTML или мультимедийные фреймворки, такие как Shaka Player, JW Player или Video.js.
+  zh: 学习使用基本的 HTML 或媒体框架（如 Shaka Player、JW Player 或 Video.js）向您的网站添加媒体功能。
+
+topics:
+  concepts:
+    en: Concepts
+    es: Conceptos
+    ja: コンセプト
+    ko: 컨셉
+    pt: Conceitos
+    ru: Общие принципы
+    zh: 概念
+
+  prepare_media_files_for_the_web:
+    en: Prepare media files for the web
+    es: Prepare archivos multimedia para la web
+    ja: Web 用にメディアファイルを準備する
+    ko: 웹용 미디어 파일 준비
+    pt: Prepare arquivos de mídia para a web
+    ru: Подготовка медиафайлов для размещения на веб-страницах
+    zh: 准备网络媒体文件
+
+  add_media_to_a_web_page:
+    en: Add media to a web page
+    es: Agregue contenido multimedia a una página web
+    ja: Web ページにメディアを追加する
+    ko: 웹 페이지에 미디어 추가
+    pt: Adicione mídia a uma página web
+    ru: Добавление медиаконтента на веб-страницу
+    zh: 将媒体添加到网页
diff --git a/src/site/_data/i18n/paths/metrics.yml b/src/site/_data/i18n/paths/metrics.yml
new file mode 100644
index 00000000000..bdbf8590e59
--- /dev/null
+++ b/src/site/_data/i18n/paths/metrics.yml
@@ -0,0 +1,54 @@
+title:
+  en: Metrics
+  es: Métricas
+  ja: 指標
+  ko: 메트릭
+  pt: Métricas
+  ru: Показатели
+  zh: 指标
+
+description:
+  en: Measuring performance and user experience.
+  es: Medir el rendimiento y la experiencia del usuario.
+  ja: パフォーマンスとユーザーエクスペリエンスの測定。
+  ko: 성능 및 사용자 경험 측정.
+  pt: Medição do desempenho e da experiência do usuário.
+  ru: Измерение производительности и удобства использования
+  zh: 衡量性能和用户体验。
+
+overview:
+  en: User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.
+  es: Las métricas de rendimiento centradas en el usuario son una herramienta fundamental para comprender y mejorar la experiencia de su sitio web de una manera que beneficie a los usuarios reales.
+  ja: ユーザーを中心としたパフォーマンス指標は、実際のユーザーにとって有益となる方法でサイトのユーザーエクスペリエンスを理解し、改善を行う場合に必須となるツールです。
+  ko: 사용자 중심의 성능 메트릭은 실제 사용자에게 도움이 되는 방식으로 사이트 경험을 이해하고 개선하는 데 중요한 도구입니다.
+  pt: As métricas de desempenho centradas no usuário são uma ferramenta crítica para entender e melhorar a experiência do seu site de uma maneira que beneficie os usuários reais.
+  ru: Ориентированные на пользователей показатели производительности — это важный инструмент для понимания и улучшения вашего сайта с точки зрения удобства для реальных пользователей.
+  zh: 以用户为中心的性能指标是了解和改善您的网站体验的一大重要工具，这些指标将使真实用户受益。
+
+topics:
+  introduction:
+    en: Introduction
+    es: Introducción
+    ja: はじめに
+    ko: 소개
+    pt: Introdução
+    ru: Введение
+    zh: 介绍
+
+  important_metrics_to_measure:
+    en: Important metrics to measure
+    es: Métricas importantes para medir
+    ja: 測定を実施する重要な指標
+    ko: 측정할 중요 메트릭
+    pt: Métricas importantes para medir
+    ru: Главные показатели для отслеживания
+    zh: 需要衡量的重要指标
+
+  define_your_own_metrics:
+    en: Define your own metrics
+    es: Defina sus propias métricas
+    ja: 独自の指標を定義する
+    ko: 고유한 메트릭 정의
+    pt: Defina suas próprias métricas
+    ru: Определение собственных показателей
+    zh: 定义您自己的指标
diff --git a/src/site/_data/i18n/paths/mini_apps.yml b/src/site/_data/i18n/paths/mini_apps.yml
new file mode 100644
index 00000000000..97a2b80ee5f
--- /dev/null
+++ b/src/site/_data/i18n/paths/mini_apps.yml
@@ -0,0 +1,63 @@
+title:
+  en: Mini apps
+  es: Mini aplicaciones
+  ja: ミニアプリ
+  ko: 미니앱
+  pt: Miniaplicativos
+  ru: Мини-приложения
+  zh: 小程序
+
+description:
+  en: A web developer's exploration into mini apps—apps that are built with web technologies but that do not run in browsers.
+  es: Un desarrollador web explora las mini aplicaciones, es decir, las aplicaciones creadas con tecnologías web pero que no se ejecutan en los navegadores.
+  ja: ある Web 開発者によるミニアプリの探求 — ミニアプリとは、Web 技術を用いて構築されているもののブラウザーでは動作しないアプリケーションのことを指します。
+  ko: 웹 기술로 구축되었지만 브라우저에서 실행되지 않는, 미니앱을 향한 웹 개발자의 여정.
+  pt: 'Uma introdução, para desenvolvedores web, aos miniaplicativos: aplicações que são construídas com tecnologias web mas que não rodam em navegadores.'
+  ru: Введение для веб-разработчиков в мини-приложения — приложения, основанные на веб-технологиях, но работающие не в браузере.
+  zh: 一个网站开发者对小程序（利用网页技术构建但不在浏览器中运行的应用）的探索。
+
+overview:
+  en: Learn more about the thriving ecosystem of mini apps and what web developers can learn from it.
+  es: Obtenga más información sobre el próspero ecosistema de las mini aplicaciones y lo que los desarrolladores web pueden aprender de él.
+  ja: 活性化を続けるミニアプリのエコシステムと、Web 開発者がそこから学ぶことができる内容についてご紹介します。
+  ko: 미니앱의 번창하는 생태계와, 웹 개발자가 이를 통해 배울 수 있는 점에 대해 자세히 알아보세요.
+  pt: Saiba mais sobre o vibrante ecossistema dos miniaplicativos e o que os desenvolvedores web podem aprender com eles.
+  ru: Узнайте подробнее о бурно развивающейся экосистеме мини-приложений и о том, что могут из нее извлечь веб-разработчики.
+  zh: 详细了解蓬勃发展的小程序生态系统，以及网站开发者可以从中学习的东西。
+
+topics:
+  welcome:
+    en: Welcome to the world of mini apps
+    es: Bienvenido al mundo de las mini aplicaciones
+    ja: ミニアプリの世界へようこそ
+    ko: 미니앱의 세상에 오신 것을 환영해요
+    pt: Bem-vindo ao mundo dos miniaplicativos
+    ru: Знакомство с миром мини-приложений
+    zh: 欢迎来到小程序的世界
+
+  the_developer_experience_of_mini_apps:
+    en: The developer experience of mini apps
+    es: La experiencia de los desarrolladores de mini aplicaciones
+    ja: ミニアプリの開発者エクスペリエンス
+    ko: 미니앱의 개발자 경험
+    pt: A experiência dos desenvolvedores de miniaplicativos
+    ru: Процесс разработки мини-приложений
+    zh: 小程序开发者体验
+
+  the_wider_mini_apps_ecosystem:
+    en: The wider mini apps ecosystem
+    es: El amplio ecosistema de las mini aplicaciones
+    ja: 幅広いミニアプリのエコシステム
+    ko: 더 넓어진 미니앱 생태계
+    pt: O amplo ecossistema dos miniaplicativos
+    ru: Глобальная экосистема мини-приложений
+    zh: 更广泛的小程序生态系统
+
+  learning_from_mini_apps:
+    en: Learning from mini apps
+    es: Aprender de las mini aplicaciones
+    ja: ミニアプリから学ぶ
+    ko: 미니앱에서 배울 점
+    pt: Como aprender com os miniaplicativos
+    ru: Чему можно научиться у мини-приложений
+    zh: 从小程序中汲取经验
diff --git a/src/site/_data/i18n/paths/notifications.yml b/src/site/_data/i18n/paths/notifications.yml
new file mode 100644
index 00000000000..8f1e946d37b
--- /dev/null
+++ b/src/site/_data/i18n/paths/notifications.yml
@@ -0,0 +1,33 @@
+title:
+  en: Notifications
+  es: Notificaciones
+  ja: 通知
+  ko: 알림
+  pt: Notificações
+  ru: Уведомления
+  zh: 通知
+
+description:
+  en: Web Push and Notifications
+
+overview:
+  en: Push messages enable you to bring information to the attention of your users even when they're not using your website.
+
+topics:
+  notifications:
+    en: Notifications
+    es: Notificaciones
+    ja: 通知
+    ko: 알림
+    pt: Notificações
+    ru: Уведомления
+    zh: 通知
+
+  codelabs:
+    en: Codelabs
+    es: Codelabs
+    ja: Codelabs
+    ko: Codelabs
+    pt: Codelabs
+    ru: Проекты Codelabs
+    zh: 代码实验室
diff --git a/src/site/_data/i18n/paths/payments.yml b/src/site/_data/i18n/paths/payments.yml
new file mode 100644
index 00000000000..51b313062d8
--- /dev/null
+++ b/src/site/_data/i18n/paths/payments.yml
@@ -0,0 +1,63 @@
+title:
+  en: Web Payments
+  es: Web Payments
+  ja: Web Payments
+  ko: 웹 결제
+  pt: Web Payments
+  ru: Веб-платежи
+  zh: Web 付款
+
+description:
+  en: Build the next generation of payments on the web.
+  es: Crea la próxima generación de pagos en la web.
+  ja: Web の世界における次世代の支払い方法を構築しましょう。
+  ko: 웹에서 차세대 결제를 구축하세요.
+  pt: Crie a próxima geração de pagamentos na web.
+  ru: Создавайте сайты с поддержкой оплаты нового поколения.
+  zh: 构建下一代网络付款。
+
+overview:
+  en: Web Payments aims to provide frictionless payment experience on the web. Learn how it works, its benefits, and get ready to integrate your payment app with Web Payments.
+  es: El objetivo de Web Payments es ofrecer una experiencia de pago sin complicaciones en la web. Aprenda cómo funciona, sus ventajas y prepárese para integrar su aplicación de pago con Web Payments.
+  ja: Web Payments は、Web 上でスムーズな支払いエクスペリエンスを提供することを目的としています。Web Payments の仕組みやメリットを理解し、あなたの決済アプリを Web Payments と統合する準備を始めましょう。
+  ko: 웹 결제는 웹에서 마찰 없는 결제 경험을 제공하는 데 목적을 둡니다. 웹 결제의 작동 방식과 이점에 대해 알아보고 웹 결제와의 결제 앱 통합을 준비하세요.
+  pt: O Web Payments tem como objetivo fornecer uma experiência de pagamento descomplicada na web. Saiba como funciona, seus benefícios e prepare-se para integrar seu aplicativo de pagamento ao Web Payments.
+  ru: Веб-платежи призваны обеспечить удобную оплату в Интернете. Узнайте, как они работают, каковы их преимущества, и подготовьтесь к интеграции веб-платежей в ваше платежное приложение.
+  zh: Web 付款旨在提供流畅的的网络付款体验。了解 Web 付款的运作方式及益处，并准备好将您的付款应用与 Web 付款整合。
+
+topics:
+  basics:
+    en: Basics
+
+  web_payments:
+    en: Web Payments
+
+  integrate_web_payments_into_your_payment_app:
+    en: Integrate Web Payments into your payment app
+    es: Integra Web Payments a su aplicación de pago
+    ja: Web Payments をあなたの支払いアプリに統合する
+    ko: 웹 결제를 결제 앱에 통합
+    pt: Integre o Web Payments a seu aplicativo de pagamento
+    ru: Интеграция веб-платежей в платежное приложение
+    zh: 将 Web 付款集成到您的付款应用中
+
+  build_an_android_payment_app:
+    en: Build an Android payment app
+    es: Crea una aplicación de pago para Android
+    ja: Android で支払いアプリを構築する
+    ko: Android 결제 앱 빌드
+    pt: Crie um aplicativo de pagamento Android
+    ru: Создание платежного приложения для Android
+    zh: 构建一个 Android 付款应用
+
+  build_a_web_based_payment_app:
+    en: Build a web-based payment app
+    es: Crea una aplicación de pago basada en la web
+    ja: Web ベースの支払いアプリを構築する
+    ko: 웹 기반 결제 앱 구축
+    pt: Crie uma aplicação de pagamento baseada na web
+    ru: Создание платежного веб-приложения
+    zh: 构建一个 Web 付款应用
+
+  secure_payment_confirmation:
+    en: Find out about the Secure Payment Confirmation proposal
\ No newline at end of file
diff --git a/src/site/_data/i18n/paths/progressive_web_apps.yml b/src/site/_data/i18n/paths/progressive_web_apps.yml
new file mode 100644
index 00000000000..8528e12d3b2
--- /dev/null
+++ b/src/site/_data/i18n/paths/progressive_web_apps.yml
@@ -0,0 +1,108 @@
+title:
+  en: Progressive Web Apps
+  es: Aplicaciones web progresivas
+  ja: プログレッシブウェブアプリ
+  ko: 프로그레시브 웹 앱
+  pt: Aplicações Web Progressivas
+  ru: Прогрессивные веб-приложения
+  zh: 渐进式 Web 应用
+
+description:
+  en: Websites that took all the right vitamins.
+  es: Sitios web que cuentan con todos los elementos que se necesitan.
+  ja: すべてのビタミンを正しく摂取した Web サイト。
+  ko: 살아 생동하는 데 필요한 요소를 모두 갖춘 웹사이트.
+  pt: Sites que tomaram todas as vitaminas certas.
+  ru: Сайты, которые принимали правильные витамины.
+  zh: 采用所有正确组成要素的网站。
+
+overview:
+  en: <p>In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how to build them.</p><p>For a course that breaks down every aspect of modern progressive web app development, check out <a href="/learn/pwa/">Learn PWA</a>.</p>
+  es: En esta colección, aprenderá qué hace especial a una aplicación web progresiva, cómo pueden afectar a su empresa y cómo crearlas.
+  ja: このコレクションでは、プログレッシブウェブアプリの特徴、ビジネスに与える影響、構築方法について説明します。
+  ko: 이 컬렉션에서는 프로그레시브 웹 앱을 특별하게 만드는 요소, 이것이 비즈니스에 미치는 영향과 구축 방법을 알아봅니다.
+  pt: Nesta coleção, você aprenderá o que torna especial uma Aplicação Web Progressiva, como elas podem afetar sua empresa e como construí-las.
+  ru: В этой серии вы узнаете об уникальных особенностях прогрессивных веб-приложений, об их преимуществах для бизнеса и о процессе их создания.
+  zh: 在本系列文章中，您将了解渐进式 Web 应用的特点、这些特点对您业务的影响，以及如何构建这些特点。
+
+topics:
+  introduction:
+    en: Introduction
+    es: Introducción
+    ja: はじめに
+    ko: 소개
+    pt: Introdução
+    ru: Введение
+    zh: 介绍
+
+  make_it_installable:
+    en: Make it installable
+    es: Haga que pueda instalarse
+    ja: インストール可能にする
+    ko: 설치 가능하게 만들기
+    pt: Faça com que seja instalável
+    ru: Обеспечение возможности установки
+    zh: 使其可安装
+
+  provide_an_installable_experience:
+    en: Provide an installable experience
+    es: Proporcione una experiencia que pueda instalarse
+    ja: インストール可能なエクスペリエンスを提供する
+    ko: 설치 가능한 경험 제공
+    pt: Forneça uma experiência instalável
+    ru: Как обеспечить возможность установки
+    zh: 提供可安装的体验
+
+  codelabs:
+    en: Codelabs
+    es: Codelabs
+    ja: Codelabs
+    ko: Codelabs
+    pt: Codelabs
+    ru: Проекты Codelabs
+    zh: 代码实验室
+
+  create_an_app_like_user_experience:
+    en: Create an app-like user experience
+    es: Cree una experiencia de usuario similar a la de una aplicación
+    ja: アプリのようなユーザーエクスペリエンスを作り上げる
+    ko: 앱과 같은 사용자 경험 만들기
+    pt: Crie uma experiência de usuário semelhante à de uma aplicação
+    ru: Создание интерфейса, имитирующего приложение
+    zh: 创造应用式用户体验
+
+  pwa_exclusive_features:
+    en: PWA-exclusive features
+    es: Funciones exclusivas de la PWA
+    ja: PWA 限定の機能
+    ko: PWA 전용 기능
+    pt: Recursos exclusivos das PWA
+    ru: Функции, эксклюзивные для PWA
+    zh: PWA 独有的功能
+
+  more_ways_to_improve_your_user_experience:
+    en: More ways to improve your user experience
+    es: Más formas de mejorar la experiencia del usuario
+    ja: その他のユーザーエクスペリエンス改善方法
+    ko: 사용자 경험을 개선하는 더 많은 방법
+    pt: Mais maneiras de melhorar sua experiência de usuário
+    ru: Дополнительные способы повысить удобство пользователя
+    zh: 更多改善您的用户体验的方法
+
+  advanced_topics:
+    en: Advanced topics
+    es: Temas avanzados
+    ja: 高度なトピック
+    ko: 고급 주제
+    pt: Tópicos avançados
+    ru: Продвинутые темы
+    zh: 高级主题
+
+  case_studies:
+    en: Case studies
+    es: Estudios de caso
+    ja: ケーススタディ
+    ko: 사례 연구
+    pt: Estudos de caso
+    ru: Разборы конкретных случаев
+    zh: 案例研究
diff --git a/src/site/_data/i18n/paths/react.yml b/src/site/_data/i18n/paths/react.yml
new file mode 100644
index 00000000000..95439bd69f8
--- /dev/null
+++ b/src/site/_data/i18n/paths/react.yml
@@ -0,0 +1,45 @@
+title:
+  en: React
+  es: React
+  ja: React
+  ko: React
+  pt: React
+  ru: React
+  zh: React
+
+description:
+  en: Build performant and progressive React applications.
+  es: Crea aplicaciones de React progresivas y de alto rendimiento.
+  ja: 優れたパフォーマンスを発揮するプログレッシブ React アプリケーションを構築しましょう。
+  ko: 성능이 뛰어나고 진보적인 React 애플리케이션을 구축하세요.
+  pt: Crie aplicações React progressivas e de alto desempenho.
+  ru: Создавайте прогрессивные и производительные приложения на основе React.
+  zh: 构建高性能与渐进式 React 应用。
+
+overview:
+  en: In this section you'll learn how to use built-in APIs and third-party libraries to improve the performance of your React applications.
+  es: En esta sección aprenderá a utilizar las API integradas y las bibliotecas de terceros para mejorar el rendimiento de sus aplicaciones de React.
+  ja: このセクションでは、組み込みの API やサードパーティ製ライブラリを使用して React アプリケーションのパフォーマンスを向上させる方法について説明します。
+  ko: 이 섹션에서는 내장 API 및 타사 라이브러리를 사용하여 React 애플리케이션의 성능을 개선하는 방법을 알아봅니다.
+  pt: Nesta seção, você aprenderá a usar APIs internas e bibliotecas de terceiros para melhorar o desempenho de suas aplicações React.
+  ru: В этом разделе вы узнаете, как повысить производительность приложений на основе React с помощью встроенных API и сторонних библиотек.
+  zh: 在本部分中，您将了解如何使用内置 API 和第三方库来提升您的 React 应用的性能。
+
+topics:
+  next_js:
+    en: Next.js
+    es: Next.js
+    ja: Next.js
+    ko: Next.js
+    pt: Next.js
+    ru: Next.js
+    zh: Next.js
+
+  create_react_app:
+    en: Create React App
+    es: Create React App
+    ja: Create React App
+    ko: Create React App
+    pt: Create React App
+    ru: Create React App
+    zh: Create React App
diff --git a/src/site/_data/i18n/paths/reliable.yml b/src/site/_data/i18n/paths/reliable.yml
new file mode 100644
index 00000000000..76f89b42c55
--- /dev/null
+++ b/src/site/_data/i18n/paths/reliable.yml
@@ -0,0 +1,72 @@
+title:
+  en: Network reliability
+  es: Confiabilidad de la red
+  ja: ネットワークの安定性
+  ko: 네트워크 안정성
+  pt: Confiabilidade da rede
+  ru: Надежность соединения
+  zh: 网络可靠性
+
+description:
+  en: See consistent, reliable performance regardless of network quality.
+  es: Vea un rendimiento constante y confiable independientemente de la calidad de la red.
+  ja: ネットワークの品質に関わらず、一貫して安定したパフォーマンスを実現しましょう。
+  ko: 네트워크 품질에 관계없이 일관되고 안정적인 성능을 확인하세요.
+  pt: Perceba um desempenho consistente e confiável, independente da qualidade da rede.
+  ru: Стабильная и надежная производительность вне зависимости от качества соединения.
+  zh: 在任何网络质量下都能呈现稳定可靠的性能。
+
+overview:
+  en: The modern web gives you access to a diverse global audience with a range of devices and network connections. In this section you'll learn how to provide a consistently reliable experience to all your users, wherever and however they access the internet.
+  es: La web moderna le da acceso a una audiencia global diversa con una variedad de dispositivos y conexiones de red. En esta sección aprenderá a proporcionar una experiencia confiable y constante a todos sus usuarios, independientemente de dónde y cómo accedan a Internet.
+  ja: 最新の Web 環境においては、多種多様なデバイスおよびネットワーク接続を利用している世界中のユーザーへとリーチすることが可能になっています。このセクションでは、インターネットにアクセスする場所や方法に関わらず、すべてのユーザーに一貫して安定した質の高いユーザーエクスペリエンスを提供する方法について説明します。
+  ko: 최신 웹을 사용하면 다양한 장치와 네트워크 연결을 통해 전 세계의 다양한 대상에게 접근할 수 있습니다. 이 섹션에서는 인터넷에 액세스하는 위치와 방식에 관계없이 모든 사용자에게 지속적으로 안정적인 환경을 제공하는 방법을 알아봅니다.
+  pt: A web moderna oferece acesso a um público global diversificado com uma variedade de dispositivos e conexões de rede. Nesta seção, você aprenderá como fornecer uma experiência consistentemente confiável a todos os seus usuários, independente de onde e como eles acessam a internet.
+  ru: Современный Интернет позволяет охватить глобальную аудиторию, состоящую из самых разных людей с различными устройствами и типами соединения. В этом разделе вы узнаете, как обеспечить стабильную работу сайта для всех пользователей, независимо от их местонахождения и типа соединения.
+  zh: 现代网络使您能够接触到全球范围内使用各种设备和网络连接的广泛受众。在本部分中，您将了解如何为您所有的用户提供稳定可靠的体验（无论他们在何处以何种方式访问互联网）。
+
+topics:
+  how_to_measure_network_reliability:
+    en: How to measure network reliability
+    es: Cómo medir la confiabilidad de la red
+    ja: ネットワークの安定性の測定方法
+    ko: 네트워크 안정성을 측정하는 방법
+    pt: Como medir a confiabilidade da rede
+    ru: Как измерить надежность соединения
+    zh: 如何衡量网络可靠性
+
+  the_options_in_your_caching_toolbox:
+    en: The options in your caching toolbox
+    es: Las opciones en su caja de herramientas de caché
+    ja: キャッシングツールボックスのオプション
+    ko: 캐싱 도구 상자의 옵션
+    pt: As opções na sua caixa de ferramentas de cache
+    ru: Возможности кеширования
+    zh: 您的缓存工具箱中的选项
+
+  how_caching_strategies_work:
+    en: How caching strategies work
+    es: Cómo funcionan las estrategias del caché
+    ja: キャッシング戦略の仕組み
+    ko: 캐싱 전략의 작동 방식
+    pt: Como as estratégias de cache funcionam
+    ru: Принципы работы стратегий кеширования
+    zh: 缓存策略的运作方式
+
+  advanced_patterns:
+    en: Advanced patterns
+    es: Patrones avanzados
+    ja: 高度なパターン
+    ko: 고급 패턴
+    pt: Padrões avançados
+    ru: Продвинутые решения
+    zh: 高级模式
+
+  communicate_with_workers:
+    en: Communicate with workers
+    es: Comunicación con los trabajadores
+    ja: Worker との通信
+    ko: 작업자와의 의사 소통
+    pt: Comunique-se com workers
+    ru: Взаимодействие с воркерами
+    zh: 与工作进程通信
diff --git a/src/site/_data/i18n/paths/sample.yml b/src/site/_data/i18n/paths/sample.yml
new file mode 100644
index 00000000000..612cc2b9c78
--- /dev/null
+++ b/src/site/_data/i18n/paths/sample.yml
@@ -0,0 +1,9 @@
+title:
+  en: Sample collection
+
+description:
+  en: Lorem ipsum dolor sit amet consectetur adipisicing elit
+
+topics:
+  a:
+    en: Lorem ipsum
diff --git a/src/site/_data/i18n/paths/secure.yml b/src/site/_data/i18n/paths/secure.yml
new file mode 100644
index 00000000000..854a067f6fb
--- /dev/null
+++ b/src/site/_data/i18n/paths/secure.yml
@@ -0,0 +1,78 @@
+title:
+  en: Safe and secure
+  es: Seguro y protegido
+  ja: 安全とセキュリティ
+  ko: 안전한 보안 환경
+  pt: Seguro e protegido
+  ru: Безопасность и надежность
+  zh: 安全且可靠
+
+description:
+  en: Ensure your site and your users' data is secure.
+  es: Asegúrese de que su sitio web y los datos de sus usuarios están seguros.
+  ja: あなたのサイトとユーザーのデータを確実にセキュリティで保護しましょう。
+  ko: 사이트와 사용자 데이터를 안전하게 지키세요.
+  pt: Garanta que seu site e os dados de seus usuários estejam seguros.
+  ru: Обеспечьте безопасность своего сайта и пользовательских данных.
+  zh: 确保您的网站和用户数据安全。
+
+overview:
+  en: Every website is vulnerable to attack—not just those handling sensitive data. In this section you'll learn simple techniques to keep your users, your content and your business secure.
+  es: Todos los sitios web son vulnerables a ataques, no solo los que manejan datos confidenciales. En esta sección aprenderá técnicas sencillas para mantener seguros a sus usuarios, su contenido y su empresa.
+  ja: 機密データを扱う Web サイトだけでなく、あらゆる Web サイトが攻撃に対する脆弱性を抱えています。このセクションでは、ユーザー、コンテンツ、ビジネスを安全に保つために有効となる簡単なテクニックをご紹介します。
+  ko: 민감한 데이터를 처리하는 웹사이트뿐만 아니라 모든 웹사이트가 공격에 취약합니다. 이 섹션에서는 사용자, 콘텐츠 및 비즈니스를 안전하게 보호하는 간단한 기술을 알아봅니다.
+  pt: Cada site é vulnerável a ataques – não apenas aqueles que lidam com dados confidenciais. Nesta seção, você aprenderá técnicas simples para manter seus usuários, seu conteúdo e sua empresa seguros.
+  ru: Любые сайты подвержены атакам — даже те, которые не обрабатывают конфиденциальную информацию. В этом разделе вы узнаете простые методы, которые помогут защитить ваших пользователей, ваш контент и ваш бизнес.
+  zh: 不仅那些处理敏感数据的网站容易受到攻击，其实每个网站都容易受到攻击。在本部分中，您将了解能够保持您的用户、内容和业务安全的简单技术。
+
+topics:
+  understand_security_basics:
+    en: Understand security basics
+    es: Comprenda los conceptos básicos de seguridad
+    ja: セキュリティの基礎を理解する
+    ko: 보안 기초 이해하기
+    pt: Compreenda os fundamentos da segurança
+    ru: Понимание основ безопасности
+    zh: 了解安全基础知识
+
+  secure_connections_with_https:
+    en: Secure connections with HTTPS
+    es: Conexiones seguras con HTTPS
+    ja: HTTPS を利用した安全な接続
+    ko: HTTPS를 통한 보안 연결
+    pt: Conexões seguras com HTTPS
+    ru: Безопасные соединения с использованием HTTPS
+    zh: 使用 HTTPS 进行安全连接
+
+  prevent_info_leaks:
+    en: Prevent info leaks
+    es: Prevención de filtraciones de información
+    ja: 情報漏洩を防ぐ
+    ko: 정보 유출 방지
+    pt: Prevenção de vazamentos de informações
+    ru: Предотвращение утечек информации
+    zh: 防止信息泄露
+
+  protect_websites_from_xss:
+    en: Protect websites from XSS
+    es: Protege los sitios web de ataques XSS
+    ja: XSS から Web サイトを保護する
+    ko: XSS로부터 웹사이트 보호
+    pt: Proteja os sites de ataques XSS
+    ru: Защита сайтов от XSS-атак
+    zh: 保护网站免受 XSS 攻击
+
+  protect_users_from_tracking:
+    en: Protect users from tracking
+    es: Protege a los usuarios del rastreo
+    ja: トラッキングからユーザーを保護する
+    ko: 추적으로부터 사용자 보호
+    pt: Proteja os usuários de rastreamento
+    ru: Защита пользователей от отслеживания
+    zh: 保护用户免受跟踪
+
+  monitor_security_violations_deprecations:
+    en: Monitor security violations and deprecations
+
+  help_ive_been_hacked:
+    en: Help! I've been hacked
diff --git a/src/site/_data/i18n/paths/shows.yml b/src/site/_data/i18n/paths/shows.yml
new file mode 100644
index 00000000000..ccf2cbcbb9e
--- /dev/null
+++ b/src/site/_data/i18n/paths/shows.yml
@@ -0,0 +1,8 @@
+see_more:
+  en: See more Shows
+  es: Ver más Shows
+  ja: 他のショーを見る
+  ko: 더 많은 프로그램 보기
+  pt: Ver mais Shows
+  ru: Другие шоу
+  zh: 查看更多节目
diff --git a/src/site/_data/i18n/paths/tags.yml b/src/site/_data/i18n/paths/tags.yml
new file mode 100644
index 00000000000..4bd3f522961
--- /dev/null
+++ b/src/site/_data/i18n/paths/tags.yml
@@ -0,0 +1,8 @@
+see_more:
+  en: See more Tags
+  es: Ver más Tags
+  ja: 他のタグを見る
+  ko: 더 많은 태그 보기
+  pt: Ver mais Tags
+  ru: Другие теги
+  zh: 查看更多标签
diff --git a/src/site/_data/i18n/paths/web-dev-basics-one.yml b/src/site/_data/i18n/paths/web-dev-basics-one.yml
new file mode 100644
index 00000000000..70625a674fd
--- /dev/null
+++ b/src/site/_data/i18n/paths/web-dev-basics-one.yml
@@ -0,0 +1,25 @@
+title:
+  en: Web Dev Basics One
+
+description:
+  en: Here's a brief description.
+
+overview:
+  en: This is a longer overview. To see the full course <a href="#">click here</a>.
+
+topics:
+  web:
+    en: Develop on the web
+
+  html:
+    en: Write semantic HTML
+
+  css:
+    en: Styling with CSS
+
+  javascript:
+    en: Program with JavaScript
+
+  dom:
+    en: Manipulate web pages with the Document Object Model (DOM)
+
diff --git a/src/site/_data/i18n/paths/webassembly.yaml b/src/site/_data/i18n/paths/webassembly.yaml
new file mode 100644
index 00000000000..4fdf5bab16f
--- /dev/null
+++ b/src/site/_data/i18n/paths/webassembly.yaml
@@ -0,0 +1,22 @@
+title:
+  en: WebAssembly
+
+description:
+  en: Enable high-performance applications on web pages.
+
+overview:
+  en: <p>WebAssembly (sometimes abbreviated Wasm) defines a portable binary-code format and a corresponding text format for executable programs and software interfaces for facilitating interactions between such programs and their host environment.</p><p>The main goal of WebAssembly is to enable high-performance applications on web pages, <em>"but it does not make any Web-specific assumptions or provide Web-specific features, so it can be employed in other environments as well"</em>, according to the <a href="https://webassembly.github.io/mutable-global/core/intro/introduction.html#:~:text=but%20it%20does%20not%20make%20any%20Web%2Dspecific%20assumptions%20or%20provide%20Web%2Dspecific%20features%2C%20so%20it%20can%20be%20employed%20in%20other%20environments%20as%20well">spec</a>.</p><p>It is an open standard and aims to support any language on any operating system, and in practice all of the most popular languages already have at least some level of support.</p>
+
+topics:
+  introduction:
+    en: Introduction
+  debugging:
+    en: WebAssembly debugging
+  coding:
+    en: Coding with WebAssembly
+  practice:
+    en: WebAssembly in practice
+  case-studies:
+    en: WebAssembly case studies
+  emscripten:
+    en: Emscripten
diff --git a/src/site/_data/i18n/patterns.yml b/src/site/_data/i18n/patterns.yml
new file mode 100644
index 00000000000..517ae25e6e3
--- /dev/null
+++ b/src/site/_data/i18n/patterns.yml
@@ -0,0 +1,11 @@
+all_patterns:
+  en: All patterns
+  es: Todos los patrones
+  ja: すべてのパターン
+  ko: 모든 패턴
+  pt: Todos os padrões
+  ru: Все шаблоны
+  zh: 所有模式
+
+supporting:
+  en: Supporting
diff --git a/src/site/_data/i18n/post.yml b/src/site/_data/i18n/post.yml
new file mode 100644
index 00000000000..d5b5ad29d14
--- /dev/null
+++ b/src/site/_data/i18n/post.yml
@@ -0,0 +1,41 @@
+is_draft:
+  en: 🚨 This post is a draft! 🚨
+  es: 🚨 ¡Esta publicación es un borrador! 🚨
+  ja: '🚨 この投稿は下書きです！ 🚨'
+  ko: '🚨 이 게시물은 초안입니다! 🚨'
+  pt-BR: '🚨 Este post é um rascunho!🚨'
+  ru: '🚨 Эта публикация — черновик! 🚨'
+  zh-CN: '🚨 本篇文章为草稿！ 🚨'
+
+last_updated:
+  en: Last updated
+  es: Última actualización
+  ja: 最終更新
+  ko: 마지막 업데이트
+  pt-BR: Última atualização
+  ru: Последнее обновление
+  zh-CN: 最近更新
+
+improve_article:
+  en: Improve article
+  es: Mejorar el artículo
+  ja: 記事を改善する
+  ko: 기사 개선하기
+  pt-BR: Melhorar o artigo
+  ru: Улучшить статью
+  zh-CN: 完善文章
+
+appears_in:
+  en: Appears in
+
+available_in:
+  en: Available in  # Refers to language, e.g. in "available in English"
+
+latest:
+  en: Latest
+
+editors:
+  en: Editors
+
+credits:
+  en: Credits
\ No newline at end of file
diff --git a/src/site/_data/i18n/search.yml b/src/site/_data/i18n/search.yml
new file mode 100644
index 00000000000..650a618a3a6
--- /dev/null
+++ b/src/site/_data/i18n/search.yml
@@ -0,0 +1,11 @@
+search:
+  en: Search
+
+open_search:
+  en: Open search
+
+all_articles:
+  en: All articles
+
+close_search:
+  en: Close search
diff --git a/src/site/_data/i18n/shows.yml b/src/site/_data/i18n/shows.yml
new file mode 100644
index 00000000000..175257eb2b7
--- /dev/null
+++ b/src/site/_data/i18n/shows.yml
@@ -0,0 +1,120 @@
+http-203:
+  title:
+    en: 'HTTP 203'
+    es: 'HTTP 203'
+    ja: 'HTTP 203'
+    ko: 'HTTP 203'
+    pt: 'HTTP 203'
+    ru: 'HTTP 203'
+    zh: 'HTTP 203'
+  description:
+    en: 'Google Developers Jake Archibald and Surma discuss their philosophies about web development and the various aspects of it, meanwhile dropping in lifehacks, lessons and some honest truths.'
+    es: 'Los desarrolladores de Google, Jake Archibald y Surma, discuten sus filosofías sobre el desarrollo web y los diversos aspectos del mismo, mientras expresan consejos prácticos, lecciones y algunas verdades honestas.'
+    ja: 'Google の開発者である Jake Archibald と Surma が、ライフハックや教訓、そして率直な事実を交えながら、Web 開発の様々な側面についてそれぞれの哲学を語り合います。'
+    ko: 'Google 개발자인 Jake Archibald와 Surma가 웹 개발과 웹 개발의 다양한 측면에 대한 자신들의 의견을 나눕니다. 생활을 편리하게 만들어주는 도구, 교훈 및 숨겨둔 진실에 대한 이야기도 함께 들어볼 수 있습니다.'
+    pt: 'Os desenvolvedores Google Jake Archibald e Surma discutem suas filosofias sobre o desenvolvimento web e seus vários aspectos, enquanto ensinam macetes, lições e algumas verdades honestas.'
+    ru: 'Разработчики Google Джейк Арчибальд и Сурма обсуждают свои взгляды на веб-разработку и различные ее аспекты, а также делятся наставлениями, откровениями и лайфхаками.'
+    zh: 'Google 开发者 Jake Archibald 和 Surma 就他们关于网络开发及其各个方面的理念展开讨论，同时还介绍了生活小窍门、经验教训和一些中肯的事实。'
+
+mother-language-day:
+  title:
+    en: 'Mother Language Day'
+    es: 'Día de la Lengua Materna'
+    ja: '国際母語デー'
+    ko: '모국어의 날'
+    pt: 'Dia da Língua Materna'
+    ru: 'День родного языка'
+    zh: '母语日'
+  description:
+    en: 'February 21st is International Mother Language Day! To celebrate, each week we’ll be releasing a new video hosted by one of our team members in their mother language.'
+    es: '¡El 21 de febrero es el Día Internacional de la Lengua Materna! Para celebrarlo, cada semana publicaremos un nuevo vídeo presentado por uno de los miembros de nuestro equipo en su lengua materna.'
+    ja: '2 月 21 日は国際母語デーです。これを記念して、チームメンバーの 1 人がそれぞれの母語を用いてホストを務める新しい動画を毎週公開します。'
+    ko: '2월 21일은 세계 모국어의 날입니다! 이를 축하하기 위해 매주 우리 팀원 중 한 명이 자신의 모국어로 진행하는 새로운 비디오를 공개할 예정입니다.'
+    pt: '21 de fevereiro é o Dia Internacional da Língua Materna! Para comemorar, todas as semanas lançaremos um novo vídeo hospedado por um de nossos membros da equipe em seu idioma materno.'
+    ru: '21 февраля — Международный день родного языка. Чтобы его отметить, мы будем еженедельно публиковать новое видео от одного из участников нашей команды на его родном языке.'
+    zh: '2 月 21 日是国际母语日！为庆祝母语日，我们每周都会发布一个新视频，并由我们的一位团队成员用他们的母语主持。'
+
+gui-challenges:
+  title:
+    en: GUI Challenges
+    es: Desafíos de la Interfaz gráfica de usuario (GUI)
+    ja: GUI の課題
+    ko: GUI 챌린지
+    pt: Desafios da GUI
+    ru: Трудности в интерфейсах
+    zh: 图形用户界面挑战
+  description:
+    en: |
+      There is no one way to solve interfaces challenges.
+      In this series, we'll be challenging ourselves and each other
+      to find multiple ways to solve interface challenges
+      and expand the diversity of our skills.
+    es: |
+      No hay una sola manera de resolver los desafíos de las interfaces.
+      En esta serie, nos desafiaremos a nosotros mismos y a los demás
+      para encontrar varias formas de resolver los desafíos de la interfaz
+      y ampliar la diversidad de nuestras habilidades.
+    ja: |
+      インターフェースに関する課題を解決する方法は、1 つではありません。
+      このシリーズではインターフェイスに関する課題を解決するための
+      方法を複数見つけ出し、多彩なスキルを身につけるために、
+      自分自身に、そしてお互いに挑戦していきます。
+    ko: |
+      인터페이스 문제를 해결하는 단 한 가지 방법은 없습니다.
+      이 시리즈에서는 인터페이스 문제를 해결하는 여러 가지 방법을 찾고
+      우리가 가진 기술의 다양성을 확장하기 위해
+      스스로, 그리고 서로 간에 도전을 제기할 것입니다.
+    pt: |
+      Não há uma única maneira de resolver os desafios das interfaces.
+      Nesta série, estaremos desafiando a nós mesmos e uns aos outros
+      para encontrar diferentes maneiras de resolver os desafios das interfaces
+      e expandir a diversidade de nossas habilidades.
+    ru: |
+      Для проблем при разработке интерфейсов нет единого решения.
+      В этой серии мы будем испытывать себя и своих коллег и искать
+      различные способы решения задач, возникающих при создании
+      интерфейсов, чтобы расширить многообразие наших навыков.
+    zh: |
+      解决界面挑战的方法远不止一种。
+      在本系列中，我们将挑战自我、挑战彼此，
+      找到多种解决界面问题的方法，
+      并扩大我们的技能多样性。
+
+designing-in-the-browser:
+  title:
+    en: 'Designing in the Browser'
+    es: 'Diseñando en el navegador'
+    ja: 'ブラウザーでのデザイン'
+    ko: '브라우저에서 디자인하기'
+    pt: 'Design no navegador'
+    ru: 'Дизайн в браузере'
+    zh: '在浏览器中进行设计'
+  description:
+    en: 'Designing in the Browser explores the intersection of design and front-end development, teaching you how to build beautiful UIs with modern web standards in mind.'
+    es: 'Diseñando en el navegador explora la intersección entre el diseño y el desarrollo front-end, lo que le enseña a crear hermosas interfaces de usuario al tomar en cuenta los estándares web modernos.'
+    ja: 'ブラウザーでのデザインでは、デザインとフロントエンド開発の共通点を模索し、 最新の Web 標準を念頭に置いた美しい UI を構築する方法について解説します。'
+    ko: '''브라우저에서 디자인하기''는 디자인과 프런트 엔드 개발의 교차점을 탐색하고 최신 웹 표준을 염두에 두고 아름다운 UI를 구축하는 방법을 알려줍니다.'
+    pt: 'O design no navegador explora a interseção entre design e o desenvolvimento front-end, ensinando você a construir belas interfaces do usuário de acordo com os mais modernos padrões da web.'
+    ru: 'Шоу «Дизайн в браузере» рассматривает проблемы на пересечении дизайна и фронтенд-разработки и учит создавать красивые интерфейсы с использованием современных веб-стандартов.'
+    zh: '《在浏览器中进行设计》探索了设计和前端开发的交叉点，会教您如何构建符合现代网络标准的美观界面。'
+
+web-dev-live-day-1:
+  title:
+    en: web.dev LIVE Day 1
+  description:
+    en: Missed web.dev LIVE? We’ve got you covered. Watch the talks from the web.dev LIVE 2020 event on Youtube ([Day 2](/shows/web-dev-live-day-2), [Day 3](/shows/web-dev-live-day-3))
+
+web-dev-live-day-2:
+  title:
+    en: web.dev LIVE Day 2
+  description:
+    en: Missed web.dev LIVE? We’ve got you covered. Watch the talks from the web.dev LIVE 2020 event on Youtube ([Day 1](/shows/web-dev-live-day-1), [Day 3](/shows/web-dev-live-day-3))
+
+web-dev-live-day-3:
+  title:
+    en: web.dev LIVE Day 3
+  description:
+    en: Missed web.dev LIVE? We’ve got you covered. Watch the talks from the web.dev LIVE 2020 event on Youtube ([Day 1](/shows/web-dev-live-day-1), [Day 2](/shows/web-dev-live-day-2))
+
+all_episodes:
+  en: 'Back to all episodes'
diff --git a/src/site/_data/i18n/spaces.yml b/src/site/_data/i18n/spaces.yml
new file mode 100644
index 00000000000..3a546412048
--- /dev/null
+++ b/src/site/_data/i18n/spaces.yml
@@ -0,0 +1,23 @@
+upcoming_spaces:
+  en: Upcoming spaces
+
+host:
+  en: HOST
+
+add_to_calendar:
+  en: add to calendar
+
+past_spaces:
+  en: Past spaces
+
+see_more:
+  en: See more
+
+see_on_twitter:
+  en: See on Twitter
+
+no_upcoming_spaces:
+  en: There are no upcoming Twitter Spaces at the moment. Please check back soon!
+
+no_past_spaces:
+  en: There are no recorded Twitter Spaces at the moment. Please check back soon!
\ No newline at end of file
diff --git a/src/site/_data/i18n/stackoverflow.yml b/src/site/_data/i18n/stackoverflow.yml
new file mode 100644
index 00000000000..b8d432b27ca
--- /dev/null
+++ b/src/site/_data/i18n/stackoverflow.yml
@@ -0,0 +1,8 @@
+ask_question:
+  en: Have a question about using this feature? You can get help by <a href="https://stackoverflow.com/questions/ask?tags=<TAG>">asking a question on Stack Overflow</a>, or <a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">browsing a list of questions</a> asked by other developers.
+  es: ¿Tiene alguna pregunta sobre el uso de esta función? Puede obtener ayuda <a href="https://stackoverflow.com/questions/ask?tags=<TAG>">hacer una pregunta sobre Stack Overflow</a>, o <a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">navegando por una lista de preguntas</a> preguntado por otros desarrolladores.
+  ja: この機能の使用方法について質問がある場合は、<a href="https://stackoverflow.com/questions/ask?tags=<TAG>">Stack Overflow で質問をしたり</a>、<a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">他の開発者から寄せられた質問のリストを確認したり</a>することにより、ヒントを得ることができます。
+  ko: 이 기능 사용에 대해 질문이 있나요? <a href="https://stackoverflow.com/questions/ask?tags=<TAG>">스택 오버플로에서 질문</a>을 하거나 <a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">다른 개발자들이 이미 올린 질문 목록을 검색</a>하여 도움을 받을 수 있습니다.
+  pt: Tem alguma dúvida sobre como usar este recurso? Você pode obter ajuda <a href="https://stackoverflow.com/questions/ask?tags=<TAG>">fazendo uma pergunta no Stack Overflow</a> ou <a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">navegando numa lista de perguntas</a> feitas por outros desenvolvedores.
+  ru: Возник вопрос по поводу этой функции? Вы можете <a href="https://stackoverflow.com/questions/ask?tags=<TAG>">задать его на сайте Stack Overflow</a> или <a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">просмотреть список вопросов</a> от других разработчиков.
+  zh: 对此功能的使用有疑问？您可以通过<a href="https://stackoverflow.com/questions/ask?tags=<TAG>">在 Stack Overflow 上提出问题</a>，或<a href="https://stackoverflow.com/search?q=%5B<TAG>%5D+is%3Aquestion">浏览其他开发者提出的问题列表</a>来获得帮助。
diff --git a/src/site/_data/i18n/subscribe.yml b/src/site/_data/i18n/subscribe.yml
new file mode 100644
index 00000000000..0edb09abc52
--- /dev/null
+++ b/src/site/_data/i18n/subscribe.yml
@@ -0,0 +1,89 @@
+subscribe:
+  en: subscribe
+  es: suscribir
+  ja: サブスクライブする
+  ko: 구독
+  pt: assinar
+  ru: подписаться
+  zh: 订阅
+
+no_javascript:
+  en: It seems like you have JavaScript disabled or it failed to load. After you submit the form, press the back button to return to the site.
+  es: Parece que tiene JavaScript deshabilitado o no se pudo cargar. Después de enviar el formulario, presione el botón Atrás para regresar al sitio.
+  ja: JavaScript が無効になっているか、読み込みに失敗したようです。フォームの送信後、戻るボタンを押してサイトに戻ってください。
+  ko: JavaScript가 비활성화되었거나 로드에 실패한 것 같습니다. 양식을 제출한 후 뒤로 버튼을 눌러 사이트로 돌아가세요.
+  pt: Parece que você desabilitou o JavaScript ou ele não foi carregado. Depois de enviar o formulário, pressione o botão "voltar" para retornar ao site.
+  ru: Похоже, у вас отключен JavaScript или код не загрузился. После отправки формы нажмите «Назад», чтобы вернуться на сайт.
+  zh: 您似乎已停用 JavaScript 或 JavaScript 加载失败。在您提交表单后，请按“后退”按钮返回到网站。
+
+first_name:
+  en: First Name
+  es: Nombre
+  ja: 名前
+  ko: 이름
+  pt: Nome
+  ru: Имя
+  zh: 名字
+
+last_name:
+  en: Last Name
+  es: Apellido
+  ja: 苗字
+  ko: 성
+  pt: Sobrenome
+  ru: Фамилия
+  zh: 姓氏
+
+your_email:
+  en: Your Email
+  es: Tu email
+  ja: メールアドレス
+  ko: 귀하의 이메일
+  pt: Seu e-mail
+  ru: Ваш электронный адрес
+  zh: 您的电子邮件
+
+country:
+  en: Country
+  es: País
+  ja: 国
+  ko: 국가
+  pt: País
+  ru: Страна
+  zh: 国家/地区
+
+language:
+  en: Language
+  es: Idioma
+  ja: 言語
+  ko: 언어
+  pt: Idioma
+  ru: Язык
+  zh: 语言
+
+notice:
+  en: Don't worry, no spam here! Your information will only be used for web.dev and Chrome related updates and our emails are typically no more than 1-2 times a month. You can unsubscribe anytime.
+  es: ¡No te preocupes, no hay spam aquí! Su información solo se utilizará para web.dev y actualizaciones relacionadas con Chrome y nuestros correos electrónicos no suelen recibir más de 1 a 2 veces al mes. Puede anular su suscripción en cualquier momento.
+  ja: 迷惑メールを送信することはありませんので、ご安心ください。お客様の情報は web.dev や Chrome に関連する最新情報の提供にのみ使用され、メールは通常 1 か月に 1 回から 2 回しか送信されません。配信の停止は、いつでも可能です。
+  ko: 걱정하지 마세요. 스팸은 없습니다! 귀하의 정보는 web.dev 및 Chrome 관련 업데이트에만 사용되며 당사에서 보내는 이메일은 일반적으로 한 달에 1-2회를 넘지 않습니다. 언제든지 구독을 취소할 수 있습니다.
+  pt: Não se preocupe, aqui não tem spam! Suas informações apenas serão usadas para atualizações relacionadas ao web.dev e ao Chrome e geralmente não enviamos e-mail mais que 1-2 vezes por mês. Você pode cancelar sua inscrição a qualquer momento.
+  ru: Мы не рассылаем спам. Ваши данные будут использоваться только для отправки новостей, связанных с web.dev и Chrome (как правило, не больше 1–2 писем в месяц). Отписаться можно в любой момент.
+  zh: 无需担心垃圾邮件！我们只会将您的信息用于 web.dev 和 Chrome 的相关动态，且我们每月发送的电子邮件数量不会超过 1-2 封。您可以随时退订。
+
+add_me:
+  en: Add me to the web.dev mailing list.
+  es: Agrégame a la lista de correo web.dev.
+  ja: web.dev メーリングリストに参加します。
+  ko: web.dev 수신자 목록에 추가해주세요.
+  pt: Adicione-me à lista de discussão web.dev.
+  ru: Подписаться на рассылку web.dev.
+  zh: 将我加入 web.dev 邮件列表。
+
+i_accept_terms:
+  en: I accept Google's <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Terms and Conditions</a> and acknowledge that my information will be used in accordance with Google's <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy Policy</a>.
+  es: Acepto los <a href="https://policies.google.com/terms" target="_blank" rel="noopener"> Términos y condiciones </a> de Google y reconozco que mi información se utilizará de acuerdo con con la <a href="https://policies.google.com/privacy" target="_blank" rel="noopener"> Política de privacidad </a> de Google.
+  ja: Google の<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a>に同意し、Google の<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>に基づいて自身の情報が使用されることを認めます。
+  ko: 본인은 Google의 <a href="https://policies.google.com/terms" target="_blank" rel="noopener">이용 약관</a>에 동의하며 본인의 정보가 Google의 <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">개인정보보호 정책</a>에 따라 이용된다는 것을 인정합니다.
+  pt: Aceito os <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Termos e Condições</a> do Google e reconheço que minhas informações serão usadas de acordo com a <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Política de Privacidade</a> do Google.
+  ru: Я принимаю <a href="https://policies.google.com/terms" target="_blank" rel="noopener">условия использования</a> Google и соглашаюсь, что моя информация будет использоваться в соответствии с <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">политикой конфиденциальности</a> Google.
+  zh: 我接受 Google 的<a href="https://policies.google.com/terms" target="_blank" rel="noopener">条款</a>，并知悉 Google 将会遵照<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">隐私权政策</a>使用我的信息。
diff --git a/src/site/_data/i18n/tags.yml b/src/site/_data/i18n/tags.yml
new file mode 100644
index 00000000000..3c068189999
--- /dev/null
+++ b/src/site/_data/i18n/tags.yml
@@ -0,0 +1,1379 @@
+3d:
+  title:
+    en: 3D
+    es: 3D
+    ja: 3D
+    ko: 3D
+    pt: 3D
+    ru: 3D
+    zh: 3D
+  description:
+    en: Our latest news, updates, and stories about 3D.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los modelos en 3D.
+    ja: 3D に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 3D에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre 3D.
+    ru: Последние новости и статьи о 3D.
+    zh: 我们关于 3D 的最新资讯、动态和故事。
+
+accessibility:
+  title:
+    en: Accessibility
+    es: Accesibilidad
+    ja: アクセシビリティ
+    ko: 접근성
+    pt: Acessibilidade
+    ru: Доступность
+    zh: 无障碍功能
+  description:
+    en: Our latest news, updates, and stories about Accessibility.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Accesibilidad.
+    ja: アクセシビリティに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 접근성에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre acessibilidade.
+    ru: Последние новости и статьи о доступности.
+    zh: 我们关于无障碍功能的最新资讯、动态和故事。
+
+amp:
+  title:
+    en: AMP
+    es: AMP
+    ja: AMP
+    ko: AMP
+    pt: AMP
+    ru: AMP
+    zh: AMP
+  description:
+    en: Our latest news, updates, and stories about AMP.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre AMP.
+    ja: AMP に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: AMP에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o AMP.
+    ru: Последние новости и статьи об AMP.
+    zh: 我们关于 AMP 的最新资讯、动态和故事。
+
+analytics:
+  title:
+    en: Analytics
+    es: Análisis
+    ja: アナリティクス
+    ko: 분석 기술
+    pt: Analytics
+    ru: Аналитика
+    zh: 分析
+  description:
+    en: Our latest news, updates, and stories about Analytics.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Google Analytics.
+    ja: アナリティクスに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 분석 기술에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre Analytics.
+    ru: Последние новости и статьи об аналитике.
+    zh: 我们关于分析的最新资讯、动态和故事。
+
+animations:
+  title:
+    en: Animations
+    es: Animaciones
+    ja: アニメーション
+    ko: 애니메이션
+    pt: Animações
+    ru: Анимации
+    zh: 动画
+  description:
+    en: Our latest news, updates, and stories about Animations.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las animaciones.
+    ja: アニメーションに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 애니메이션에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre animações.
+    ru: Последние новости и статьи об анимациях.
+    zh: 我们关于动画的最新资讯、动态和故事。
+
+audio:
+  title:
+    en: Audio
+    es: Audio
+    ja: オーディオ
+    ko: 오디오
+    pt: Áudio
+    ru: Аудио
+    zh: 音频
+  description:
+    en: Our latest news, updates, and stories about Audio.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el Audio.
+    ja: オーディオに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 오디오에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre áudio.
+    ru: Последние новости и статьи об аудио.
+    zh: 我们关于音频的最新资讯、动态和故事。
+
+augmented-reality:
+  title:
+    en: Augmented Reality
+    es: Realidad aumentada
+    ja: 拡張現実
+    ko: 증강 현실
+    pt: Realidade aumentada
+    ru: Дополненная реальность
+    zh: 增强现实
+  description:
+    en: Our latest news, updates, and stories about Augmented Reality.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Realidad aumentada.
+    ja: 拡張現実に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 증강 현실에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre realidade aumentada.
+    ru: Последние новости и статьи о дополненной реальности.
+    zh: 我们关于增强现实的最新资讯、动态和故事。
+
+aurora-project:
+  title:
+    en: Aurora Project
+  description:
+    en: Our latest news, updates, and stories about the Chrome Aurora project.
+
+canvas:
+  title:
+    en: Canvas
+    es: Canvas
+    ja: Canvas
+    ko: 캔버스
+    pt: Canvas
+    ru: Canvas
+    zh: Canvas
+  description:
+    en: Our latest news, updates, and stories about Canvas.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Google Canvas.
+    ja: Canvas に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 캔버스에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Canvas.
+    ru: Последние новости и статьи о Canvas.
+    zh: 我们关于 Canvas 的最新资讯、动态和故事。
+
+capabilities:
+  title:
+    en: Capabilities
+    es: Funcionalidades
+    ja: Capabilities
+    ko: 기능
+    pt: Funcionalidades
+    ru: Возможности
+    zh: 能力
+  description:
+    en: Our latest news, updates, and stories about new web capabilities (aka Project Fugu).
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las nuevas funcionalidades web (también conocidas como Proyecto Fugu).
+    ja: Capabilities (別名 Project Fugu) に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 새로운 웹 기능(일명 Project Fugu)에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre novos recursos da web (também conhecido como Projeto Fugu).
+    ru: Последние новости и статьи о новых возможностях для веб-приложений (Project Fugu).
+    zh: 我们关于全新的网络能力（即 Fugu 项目）的最新资讯、动态和故事。
+
+case-study:
+  title:
+    en: Case Study
+    es: Estudio de caso
+    ja: ケーススタディ
+    ko: 사례 연구
+    pt: Estudo de caso
+    ru: Разбор конкретного случая
+    zh: 案例研究
+  description:
+    en: Learn why and how other developers have used the web to create amazing web experiences for their users.
+
+cast:
+  title:
+    en: Cast
+    es: Cast
+    ja: Cast
+    ko: 캐스트
+    pt: Cast
+    ru: Cast
+    zh: Cast
+  description:
+    en: Our latest news, updates, and stories about Cast.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Google Cast.
+    ja: Cast に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 캐스트에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Cast.
+    ru: Последние новости и статьи о Cast.
+    zh: 我们关于 Cast 的最新资讯、动态和故事。
+
+chrome:
+  title:
+    en: Chrome
+  description:
+    en: Articles about features shipping in Chrome.
+
+chrome-ux-report:
+  title:
+    en: Chrome UX Report
+    es: Chrome User Experience Report
+    ja: Chrome UX Report
+    ko: Chrome UX 보고서
+    pt: Relatório de UX do Chrome
+    ru: Отчет Chrome UX
+    zh: Chrome 用户体验报告
+  description:
+    en: Our latest news, updates, and stories about Chrome UX Report.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Chrome User Experience Report.
+    ja: Chrome UX Report に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Chrome UX 보고서에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Relatório de UX do Chrome.
+    ru: Последние новости и статьи об отчете Chrome UX.
+    zh: 我们关于 Chrome 用户体验报告的最新资讯、动态和故事。
+
+chrome-dev-summit:
+  title:
+    en: Chrome Dev Summit
+    es: Chrome Dev Summit
+    ja: Chrome Dev Summit
+    ko: Chrome 개발자 회의
+    pt: Chrome Dev Summit
+    ru: Chrome Dev Summit
+    zh: Chrome 开发者峰会
+  description:
+    en: Our latest news, updates, and stories about Chrome Dev Summit.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Chrome Dev Summit.
+    ja: Chrome Dev Summit に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Chrome 개발자 회의에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Chrome Dev Summit.
+    ru: Последние новости и статьи о конференции Chrome Dev Summit.
+    zh: 我们关于 Chrome 开发者峰会的最新资讯、动态和故事。
+
+community:
+  title:
+    en: Community
+  description:
+    en: Interviews, features, and stories, from the wider web community.
+
+content-security-policy:
+  title:
+    en: Content Security Policy
+    es: Política de seguridad de los contenidos
+    ja: コンテンツ セキュリティポリシー
+    ko: 콘텐츠 보안 정책
+    pt: Política de segurança de conteúdo
+    ru: Политика безопасности контента
+    zh: 内容安全政策
+  description:
+    en: Our latest news, updates, and stories about Content Security Policy.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Política de seguridad de los contenidos.
+    ja: コンテンツセキュリティポリシーに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 콘텐츠 보안 정책에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre a Política de segurança de conteúdo.
+    ru: Последние новости и статьи о политике безопасности контента.
+    zh: 我们关于内容安全政策的最新资讯、动态和故事。
+
+cookies:
+  title:
+    en: Cookies
+    es: Cookies
+    ja: Cookies
+    ko: 쿠키
+    pt: Cookies
+    ru: Файлы cookie
+    zh: Cookie
+  description:
+    en: Our latest news, updates, and stories about Cookies.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las Cookies.
+    ja: Cookies に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 쿠키에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre cookies.
+    ru: Последние новости и статьи о файлах cookie.
+    zh: 我们关于 Cookie 的最新资讯、动态和故事。
+
+cors:
+  title:
+    en: CORS
+    es: CORS
+    ja: CORS
+    ko: CORS
+    pt: CORS
+    ru: CORS
+    zh: CORS
+  description:
+    en: Our latest news, updates, and stories about CORS.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre CORS.
+    ja: CORS に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: CORS에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o CORS.
+    ru: Последние новости и статьи о CORS.
+    zh: 我们关于 CORS 的最新资讯、动态和故事。
+
+css:
+  title:
+    en: CSS
+    es: CSS
+    ja: CSS
+    ko: CSS
+    pt: CSS
+    ru: CSS
+    zh: CSS
+  description:
+    en: Our latest news, updates, and stories about CSS.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las CSS.
+    ja: CSS に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: CSS에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o CSS.
+    ru: Последние новости и статьи о CSS.
+    zh: 我们关于 CSS 的最新资讯、动态和故事。
+
+devices:
+  title:
+    en: Devices
+    es: Dispositivos
+    ja: デバイス
+    ko: 장치
+    pt: Dispositivos
+    ru: Устройства
+    zh: 设备
+  description:
+    en: Our latest news, updates, and stories about connecting hardware devices to the web.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre cómo conectar dispositivos de hardware a la web.
+    ja: デバイスに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 하드웨어 장치를 웹에 연결하는 방법에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre como conectar dispositivos de hardware à web.
+    ru: Последние новости и статьи о взаимодействии веб-приложений с устройствами.
+    zh: 我们关于将硬件设备连接到网络的最新资讯、动态和故事。
+
+devtools:
+  title:
+    en: DevTools
+    es: DevTools
+    ja: DevTools
+    ko: DevTools
+    pt: DevTools
+    ru: DevTools
+    zh: DevTools
+  description:
+    en: Our latest news, updates, and stories about DevTools.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las DevTools.
+    ja: DevTools に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: DevTools에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre DevTools.
+    ru: Последние новости и статьи о DevTools.
+    zh: 我们关于 DevTools 的最新资讯、动态和故事。
+
+dom:
+  title:
+    en: DOM
+    es: DOM
+    ja: DOM
+    ko: DOM
+    pt: DOM
+    ru: DOM
+    zh: DOM
+  description:
+    en: Our latest news, updates, and stories about DOM.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el DOM.
+    ja: DOM に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: DOM에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o DOM.
+    ru: Последние новости и статьи о DOM.
+    zh: 我们关于 DOM 的最新资讯、动态和故事。
+
+encryption:
+  title:
+    en: Encryption
+    es: Cifrado
+    ja: 暗号化
+    ko: 암호화
+    pt: Criptografia
+    ru: Шифрование
+    zh: 加密
+  description:
+    en: Our latest news, updates, and stories about Encryption.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el Cifrado.
+    ja: 暗号化に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 암호화에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre criptografia.
+    ru: Последние новости и статьи о шифровании.
+    zh: 我们关于加密技术的最新资讯、动态和故事。
+
+engineering-blog:
+  title:
+    en: Engineering Blog
+    es: Blog de Ingeniería
+    ja: エンジニアリングブログ
+    ko: 엔지니어링 블로그
+    pt: Blog de engenharia
+    ru: Блог инженеров
+    zh: 工程博客
+  description:
+    en: Our latest news, updates, and stories from our engineering team.
+    es: Consulte las últimas noticias, actualizaciones e historias publicadas sobre nuestro equipo de ingenieros.
+    ja: エンジニアリングブログに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 엔지니어링 팀의 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias da nossa equipe de engenharia.
+    ru: Последние новости и статьи от нашей команды инженеров.
+    zh: 来自我们工程团队的最新资讯、动态和故事。
+
+permissions-policy:
+  title:
+    en: Permissions Policy
+    es: Política de permisos
+    ja: Permissions Policy
+    ko: 권한 정책
+    pt: Política de Permissões
+    ru: Политика разрешений
+    zh: 權限政策
+  description:
+    en: Our latest news, updates, and stories about Permissions Policy.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Política de las permisos.
+    ja: Permissions Policy に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 권한 정책책에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre a Política de Permissões.
+    ru: Последние новости и статьи о политике разрешений.
+    zh: 我们关于权限政策的最新消息、更新和故事。
+
+file-system:
+  title:
+    en: File System
+    es: Sistema de archivos
+    ja: File System
+    ko: 파일 시스템
+    pt: Sistema de arquivos
+    ru: Файловая система
+    zh: 文件系统
+  description:
+    en: Our latest news, updates, and stories about File System.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el Sistema de archivos.
+    ja: File System に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 파일 시스템에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o sistema de arquivos.
+    ru: Последние новости и статьи о файловой системе.
+    zh: 我们关于文件系统的最新资讯、动态和故事。
+
+fonts:
+  title:
+    en: Fonts
+    es: Fuentes
+    ja: Fonts
+    ko: 글꼴
+    pt: Fontes
+    ru: Шрифты
+    zh: 字体
+  description:
+    en: Our latest news, updates, and stories about Fonts.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las Fuentes.
+    ja: Fonts に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 글꼴에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre fontes.
+    ru: Последние новости и статьи о шрифтах.
+    zh: 我们关于字体的最新资讯、动态和故事。
+
+forms:
+  title:
+    en: Forms
+    es: Formularios
+    ja: Forms
+    ko: 양식
+    pt: Formulários
+    ru: Формы
+    zh: 表单
+  description:
+    en: Our latest news, updates, and stories about Forms.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los Formularios.
+    ja: Forms に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 양식에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre formulários.
+    ru: Последние новости и статьи о формах.
+    zh: 我们关于表单的最新资讯、动态和故事。
+
+games:
+  title:
+    en: Games
+    es: Juegos
+    ja: ゲーム
+    ko: 게임
+    pt: Jogos
+    ru: Игры
+    zh: 游戏
+  description:
+    en: Our latest news, updates, and stories about Games.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los juegos.
+    ja: ゲームに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 게임에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre jogos.
+    ru: Последние новости и статьи об играх.
+    zh: 我们关于游戏的最新资讯、动态和故事。
+
+graphics:
+  title:
+    en: Graphics
+    es: Gráficos
+    ja: グラフィックス
+    ko: 그래픽
+    pt: Gráficos
+    ru: Графика
+    zh: 图形
+  description:
+    en: Our latest news, updates, and stories about Graphics.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los Gráficos.
+    ja: グラフィックスに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 그래픽에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre gráficos.
+    ru: Последние новости и статьи о графике.
+    zh: 我们关于图形的最新资讯、动态和故事。
+
+houdini:
+  title:
+    en: Houdini
+    es: Houdini
+    ja: Houdini
+    ko: Houdini
+    pt: Houdini
+    ru: Houdini
+    zh: Houdini
+  description:
+    en: Our latest news, updates, and stories about Houdini.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Houdini.
+    ja: Houdini に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Houdini에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobrem o Houdini.
+    ru: Последние новости и статьи о Houdini.
+    zh: 我们关于 Houdini 的最新资讯、动态和故事。
+
+html:
+  title:
+    en: HTML
+    es: HTML
+    ja: HTML
+    ko: HTML
+    pt: HTML
+    ru: HTML
+    zh: HTML
+  description:
+    en: Our latest news, updates, and stories about HTML.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el HTML.
+    ja: HTML に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: HTML에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o HTML.
+    ru: Последние новости и статьи об HTML.
+    zh: 我们关于 HTML 的最新资讯、动态和故事。
+
+identity:
+  title:
+    en: Identity
+    es: Identidad
+    ja: Identity
+    ko: ID
+    pt: Identidade
+    ru: Идентификация
+    zh: 身份
+  description:
+    en: Our latest news, updates, and stories about Identity.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Identidad.
+    ja: Identity に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: ID에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre identidade.
+    ru: Последние новости и статьи об идентификации.
+    zh: 我们关于身份的最新资讯、动态和故事。
+
+images:
+  title:
+    en: Images
+    es: Imágenes
+    ja: 画像検索
+    ko: 이미지
+    pt: Imagens
+    ru: Изображения
+    zh: 图片
+  description:
+    en: Our latest news, updates, and stories about Images.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las imágenes.
+    ja: 画像検索に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 이미지에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre imagens.
+    ru: Последние новости и статьи об изображениях.
+    zh: 我们关于图片的最新资讯、动态和故事。
+
+install:
+  title:
+    en: Install
+    es: Instalación
+    ja: インストール
+    ko: 설치
+    pt: Instalação
+    ru: Установка
+    zh: 安装
+  description:
+    en: Our latest news, updates, and stories about Install.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Instalación.
+    ja: インストールに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 설치에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre instalação.
+    ru: Последние новости и статьи об установке.
+    zh: 我们关于安装的最新资讯、动态和故事。
+
+intl:
+  title:
+    en: Intl
+    es: Intl
+    ja: Intl
+    ko: 국제화
+    pt: Intl
+    ru: Интернационализация
+    zh: 国际化
+  description:
+    en: Our latest news, updates, and stories about Intl.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Intl.
+    ja: Intl に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 국제에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o objeto Intl.
+    ru: Последние новости и статьи об интернационализации.
+    zh: 我们关于 Intl 的最新资讯、动态和故事。
+
+iot:
+  title:
+    en: IoT
+    es: IoT
+    ja: IoT
+    ko: 사물 인터넷
+    pt: IoT
+    ru: Интернет вещей
+    zh: IoT
+  description:
+    en: Our latest news, updates, and stories about IoT.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el loT.
+    ja: IoT に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 사물 인터넷에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre IoT.
+    ru: Последние новости и статьи об Интернете вещей.
+    zh: 我们关于 IoT 的最新资讯、动态和故事。
+
+javascript:
+  title:
+    en: JavaScript
+    es: JavaScript
+    ja: JavaScript
+    ko: JavaScript
+    pt: JavaScript
+    ru: JavaScript
+    zh: JavaScript
+  description:
+    en: Our latest news, updates, and stories about JavaScript.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre JavaScript.
+    ja: JavaScript に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: JavaScript에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre JavaScript.
+    ru: Последние новости и статьи о JavaScript.
+    zh: 我们关于 JavaScript 的最新资讯、动态和故事。
+
+layout:
+  title:
+    en: Layout
+    es: Diseño
+    ja: LayOut
+    ko: 레이아웃
+    pt: Layout
+    ru: Компоновка
+    zh: 布局
+  description:
+    en: Our latest news, updates, and stories about Layout.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el Diseño.
+    ja: LayOut に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 레이아웃에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o layout.
+    ru: Последние новости и статьи о компоновке.
+    zh: 我们关于布局的最新资讯、动态和故事。
+
+lighthouse:
+  title:
+    en: Lighthouse
+    es: Lighthouse
+    ja: Lighthouse
+    ko: Lighthouse
+    pt: Lighthouse
+    ru: Lighthouse
+    zh: Lighthouse
+  description:
+    en: Our latest news, updates, and stories about Lighthouse.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Lighthouse.
+    ja: Lighthouse に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Lighthouse에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Lighthouse.
+    ru: Последние новости и статьи о Lighthouse.
+    zh: 我们关于 Lighthouse 的最新资讯、动态和故事。
+
+media:
+  title:
+    en: Media
+    es: Multimedia
+    ja: メディア
+    ko: 미디어
+    pt: Mídia
+    ru: Медиаконтент
+    zh: 媒体
+  description:
+    en: Our latest news, updates, and stories about Media.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Multimedia.
+    ja: メディアに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 미디어에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre mídia.
+    ru: Последние новости и статьи о медиаконтенте.
+    zh: 我们关于媒体的最新资讯、动态和故事。
+
+media-queries:
+  title:
+    en: Media Queries
+    es: Media Queries
+    ja: メディアクエリ
+    ko: 미디어 쿼리
+    pt: Consultas de mídia
+    ru: Медиазапросы
+    zh: 媒体查询
+  description:
+    en: Our latest news, updates, and stories about Media Queries.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Media Queries
+    ja: メディアクエリに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 미디어 쿼리에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre consultas de mídia (media queries).
+    ru: Последние новости и статьи о медиазапросах.
+    zh: 我们关于媒体查询的最新资讯、动态和故事。
+
+memory:
+  title:
+    en: Memory
+    es: Memoria
+    ja: メモリ
+    ko: 메모리
+    pt: Memória
+    ru: Память
+    zh: 内存
+  description:
+    en: Memory management on the web.
+    es: Administración de la Memoria en la web.
+    ja: Web 上でのメモリ管理。
+    ko: 웹에서 메모리 관리.
+    pt: Gerenciamento de memória na web.
+    ru: Управление памятью на веб-страницах.
+    zh: 网络内存管理。
+
+metrics:
+  title:
+    en: Metrics
+    es: Métricas
+    ja: 指標
+    ko: 메트릭
+    pt: Métricas
+    ru: Показатели
+    zh: 指标
+  description:
+    en: Our latest news, updates, and stories about Metrics.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las Métricas.
+    ja: 指標に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 메트릭에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre métricas.
+    ru: Последние новости и статьи о показателях.
+    zh: 我们关于指标的最新资讯、动态和故事。
+
+mini-apps:
+  title:
+    en: Mini apps
+    es: Mini aplicaciones
+    ja: ミニアプリ
+    ko: 미니앱
+    pt: Miniaplicativos
+    ru: Мини-приложения
+    zh: 小程序
+  description:
+    en: Apps built with Web technologies but not running in the browser.
+    es: Se refiere a las aplicaciones creadas con las tecnologías web pero que no se ejecutan en el navegador.
+    ja: Web テクノロジーを利用して構築されているものの、ブラウザ上では動作しないアプリ。
+    ko: 웹 기술로 구축되었지만 브라우저에서 실행되지 않는 앱입니다.
+    pt: Aplicações criadas com tecnologias web, mas que não rodam no navegador.
+    ru: Приложения, созданные на основе веб-технологий, но работающие не в браузере.
+    zh: 利用网络技术构建但不在浏览器中运行的应用。
+
+mobile:
+  title:
+    en: Mobile
+    es: Dispositivos móviles
+    ja: モバイル
+    ko: 모바일
+    pt: Mobile
+    ru: Мобильные устройства
+    zh: 移动端
+  description:
+    en: Our latest news, updates, and stories about Mobile.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los dispositivos móviles.
+    ja: モバイルに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 모바일에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre dispositivos móveis.
+    ru: Последние новости и статьи о мобильных устройствах.
+    zh: 我们关于移动端的最新资讯、动态和故事。
+
+modules:
+  title:
+    en: Modules
+    es: Módulos
+    ja: モジュール
+    ko: 모듈
+    pt: Módulos
+    ru: Модули
+    zh: 模块
+  description:
+    en: Our latest news, updates, and stories about Modules.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los Módulos.
+    ja: モジュールに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 모듈에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre módulos.
+    ru: Последние новости и статьи о модулях.
+    zh: 我们关于模块的最新资讯、动态和故事。
+
+monetization:
+  title:
+    en: Monetization
+    es: Monetización
+    ja: マネタイズ
+    ko: 수익화
+    pt: Monetização
+    ru: Монетизация
+    zh: 创收
+  description:
+    en: Our latest news, updates, and stories about Monetization.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Monetización.
+    ja: マネタイズに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 수익화에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre monetização.
+    ru: Последние новости и статьи о монетизации.
+    zh: 我们关于创收的最新资讯、动态和故事。
+
+monitoring:
+  title:
+    en: Monitoring
+  description:
+    en: Our latest news, updates, and stories about Monitoring.
+
+network:
+  title:
+    en: Network
+    es: Red
+    ja: ネットワーク
+    ko: 네트워크
+    pt: Rede
+    ru: Сеть
+    zh: 网络
+  description:
+    en: Our latest news, updates, and stories about Network.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Red.
+    ja: ネットワークに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 네트워크에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre rede.
+    ru: Последние новости и статьи о работе с сетью.
+    zh: 我们关于网络的最新资讯、动态和故事。
+
+new-to-the-web:
+  title:
+    en: New to the web platform
+  description:
+    en: A series of posts to keep you updated with what's landing in web browsers each month.
+
+newly-interoperable:
+  title:
+    en: Newly interoperable
+    es: Interoperable recientemente
+    ja: 新しく相互運用可能
+    ko: 새롭게 상호 운용 가능
+    pt: Recentemente interoperável
+    ru: Новый интероперабельный
+    zh: 新的互操作性
+  description:
+    en: Features that have recently become supported in all three engines.
+    es: Nuestras últimas noticias, actualizaciones e historias sobre funciones compatibles con todos los navegadores.
+    ja: クロスブラウザでサポートされている機能に関する最新のニュース、アップデート、ストーリー。
+    ko: 브라우저 간 지원되는 기능에 대한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas notícias, atualizações e histórias mais recentes sobre recursos compatíveis com vários navegadores.
+    ru: Наши последние новости, обновления и истории о функциях, поддерживаемых в разных браузерах.
+    zh: 我们关于跨浏览器支持的功能的最新新闻、更新和故事。
+
+node:
+  title:
+    en: Node
+    es: Nodo
+    ja: Node
+    ko: 노드
+    pt: Node
+    ru: Node
+    zh: 节点
+  description:
+    en: Our latest news, updates, and stories about Node.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los Nodos.
+    ja: Node に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 노드에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Node.
+    ru: Последние новости и статьи о Node.
+    zh: 我们关于节点的最新资讯、动态和故事。
+
+notifications:
+  title:
+    en: Notifications
+    es: Notificaciones
+    ja: 通知
+    ko: 알림
+    pt: Notificações
+    ru: Уведомления
+    zh: 通知
+  description:
+    en: Our latest news, updates, and stories about Notifications.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las Notificaciones.
+    ja: 通知に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 알림에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre notificações.
+    ru: Последние новости и статьи об уведомлениях.
+    zh: 我们关于通知的最新资讯、动态和故事。
+
+offline:
+  title:
+    en: Offline
+    es: Offline
+    ja: オフライン
+    ko: 오프라인
+    pt: Offline
+    ru: Офлайн-работа
+    zh: 离线
+  description:
+    en: Our latest news, updates, and stories about Offline.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los medios Offline.
+    ja: オフラインに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 오프라인에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre offline.
+    ru: Последние новости и статьи об офлайн-работе.
+    zh: 我们关于离线的最新资讯、动态和故事。
+
+origin-trials:
+  title:
+    en: Origin Trials
+    es: Origin Trials
+    ja: オリジントライアル
+    ko: 최초 평가판
+    pt: Ensaios de Origem
+    ru: Испытания Origin Trial
+    zh: 源站试用
+  description:
+    en: Our latest news, updates, and stories about Origin Trials.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Origin Trials.
+    ja: オリジントライアルに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 최초 평가판에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre os ensaios de origem.
+    ru: Последние новости и статьи об испытаниях Origin Trial.
+    zh: 我们关于源站试用的最新资讯、动态和故事。
+
+payments:
+  title:
+    en: Payments
+    es: Pagos
+    ja: 支払い
+    ko: 결제
+    pt: Pagamentos
+    ru: Платежи
+    zh: 付款
+  description:
+    en: Our latest news, updates, and stories about Payments.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Pagos.
+    ja: 支払いに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 결제에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre pagamentos.
+    ru: Последние новости и статьи о платежах.
+    zh: 我们关于付款的最新资讯、动态和故事。
+
+performance:
+  title:
+    en: Performance
+    es: Rendimiento
+    ja: パフォーマンス
+    ko: 성능
+    pt: Desempenho
+    ru: Производительность
+    zh: 性能
+  description:
+    en: Our latest news, updates, and stories about Performance.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Rendimiento.
+    ja: パフォーマンスに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 성능에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre desempenho.
+    ru: Последние новости и статьи о производительности.
+    zh: 我们关于性能的最新资讯、动态和故事。
+
+permissions:
+  title:
+    en: Permissions
+    es: Permisos
+    ja: アクセス権
+    ko: 권한
+    pt: Permissões
+    ru: Разрешения
+    zh: 权限
+  description:
+    en: Our latest news, updates, and stories about Permissions.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Permisos.
+    ja: アクセス権に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 권한에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre permissões.
+    ru: Последние новости и статьи о разрешениях.
+    zh: 我们关于权限的最新资讯、动态和故事。
+
+progressive-web-apps:
+  title:
+    en: Progressive Web Apps
+    es: Aplicaciones web progresivas
+    ja: プログレッシブウェブアプリ
+    ko: 프로그레시브 웹 앱
+    pt: Aplicações Web Progressivas
+    ru: Прогрессивные веб-приложения
+    zh: 渐进式 Web 应用
+  description:
+    en: Our latest news, updates, and stories about Progressive Web Apps.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las aplicaciones web progresivas.
+    ja: プログレッシブウェブアプリに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 프로그레시브 웹 앱에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre as aplicações web progressivas (PWA).
+    ru: Последние новости и статьи о прогрессивных веб-приложениях.
+    zh: 我们关于渐进式 Web 应用的最新资讯、动态和故事。
+
+privacy:
+  title:
+    en: Privacy
+    es: Privacidad
+    ja: プライバシー
+    ko: 개인정보보호
+    pt: Privacidade
+    ru: Конфиденциальность
+    zh: 隐私
+  description:
+    en: Our latest news, updates, and stories about Privacy.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Privacidad.
+    ja: プライバシーに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 개인정보보호에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre privacidade.
+    ru: Последние новости и статьи о конфиденциальности.
+    zh: 我们关于隐私权的最新资讯、动态和故事。
+
+puppeteer:
+  title:
+    en: Puppeteer
+    es: Puppeteer
+    ja: Puppeteer
+    ko: Puppeteer
+    pt: Puppeteer
+    ru: Puppeteer
+    zh: Puppeteer
+  description:
+    en: Our latest news, updates, and stories about Puppeteer.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Puppeteer.
+    ja: Puppeteer に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Puppeteer에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Puppeteer.
+    ru: Последние новости и статьи о Puppeteer.
+    zh: 我们关于 Puppeteer 的最新资讯、动态和故事。
+
+rendering:
+  title:
+    en: Rendering
+    es: Renderización
+    ja: レンダリング
+    ko: 렌더링
+    pt: Renderização
+    ru: Рендеринг
+    zh: 呈现
+  description:
+    en: Our latest news, updates, and stories about Rendering.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Renderización.
+    ja: レンダリングに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 렌더링에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre renderização.
+    ru: Последние новости и статьи о рендеринге.
+    zh: 我们关于呈现的最新资讯、动态和故事。
+
+resources:
+  title:
+    en: Resources
+  description:
+    en: Useful links shared by the people of Chrome Developer Relations.
+
+scale-on-web:
+  title:
+    en: Scale on web
+    es: Escalar en la web
+    ja: Web のスケーリング
+    ko: 웹에서 확장
+    pt: Scale on web
+    ru: Scale on web
+    zh: 在网络上扩缩
+  description:
+    en: A collection of short case studies from India and Southeast Asia celebrating the success stories of Google partners across multiple aspects of modern web development. Learn how these partners achieved scale while building amazing web experiences and delighting their customers.
+    es: Una colección de estudios de casos breves procedentes de la India y el sudeste asiático en los que se celebran las historias de éxito de los socios de Google en varios aspectos del desarrollo web moderno. Descubra cómo estos socios lograron escalar al mismo tiempo que diseñaban experiencias web increíbles y encantaban a sus clientes.
+    ja: 最先端の Web 開発のさまざまな場面で Google のパートナーの皆さまが体験したサクセスストーリーを紹介する、インドおよび東南アジアでの事例を集めた簡潔なケーススタディ集です。パートナー企業の皆さまが規模の拡大を実現しながら素晴らしい Web エクスペリエンスを構築し、顧客満足を獲得した方法をぜひご確認ください。
+    ko: 현대식 웹 개발의 다양한 측면에서 Google 파트너가 거둔 성공 사례를 기념하기 위해 인도 및 동남아시아의 짧은 사례 연구를 한데 모았습니다. 이러한 파트너들이 놀라운 웹 경험을 구축하고 고객에게 기쁨을 주는 동시에 비즈니스를 확장할 수 있었던 방법을 알아보세요.
+    pt: Uma coleção de estudos de caso curtos da Índia e do Sudeste Asiático que celebram as histórias de sucesso dos parceiros Google em vários aspectos do desenvolvimento web moderno. Saiba como esses parceiros cresceram enquanto criavam experiências incríveis na web encantando seus clientes.
+    ru: Серия кратких разборов конкретных случаев из Индии и Юго-Восточной Азии, рассказывающих об успехах партнеров Google в различных аспектах современной веб-разработки. Узнайте, как им удалось достичь роста, разрабатывая потрясающие веб-продукты и радуя своих клиентов.
+    zh: 来自印度和东南亚的一系列简短的案例研究，庆祝 Google 合作伙伴在现代网络开发的多个方面的成功故事。了解这些合作伙伴如何在构建出色的网络体验并使客户满意的同时实现扩缩。
+
+security:
+  title:
+    en: Security
+    es: Seguridad
+    ja: セキュリティ
+    ko: 보안
+    pt: Segurança
+    ru: Безопасность
+    zh: 安全
+  description:
+    en: Our latest news, updates, and stories about Security.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Seguridad.
+    ja: セキュリティに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 보안에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre segurança.
+    ru: Последние новости и статьи о безопасности.
+    zh: 我们关于安全的最新资讯、动态和故事。
+
+seo:
+  title:
+    en: SEO
+    es: SEO
+    ja: SEO
+    ko: SEO
+    pt: SEO
+    ru: SEO
+    zh: SEO
+  description:
+    en: Our latest news, updates, and stories about SEO.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el SEO.
+    ja: SEO に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: SEO에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre SEO.
+    ru: Последние новости и статьи о SEO.
+    zh: 我们关于 SEO 的最新资讯、动态和故事。
+
+service-worker:
+  title:
+    en: Service Worker
+    es: Service Worker
+    ja: Service Worker
+    ko: 서비스 워커
+    pt: Service Worker
+    ru: Service Worker
+    zh: Service Worker
+  description:
+    en: Our latest news, updates, and stories about Service Worker.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el Service Worker.
+    ja: Service Worker に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 서비스 워커에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Service Worker.
+    ru: Последние новости и статьи о Service Worker.
+    zh: 我们关于 Service Worker 的最新资讯、动态和故事。
+
+sourcemap:
+  title:
+    en: Source maps
+  description:
+    en: Our latest news, updates, and stories about source maps.
+
+storage:
+  title:
+    en: Storage
+    es: Almacenamiento
+    ja: ストレージ
+    ko: 스토리지
+    pt: Armazenamento
+    ru: Хранение данных
+    zh: 存储
+  description:
+    en: Our latest news, updates, and stories about Storage.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Almacenamiento.
+    ja: ストレージに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 스토리지에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre armazenamento.
+    ru: Последние новости и статьи о хранении данных.
+    zh: 我们关于存储的最新资讯、动态和故事。
+
+svg:
+  title:
+    en: SVG
+    es: SVG
+    ja: SVG
+    ko: SVG
+    pt: SVG
+    ru: SVG
+    zh: SVG
+  description:
+    en: Our latest news, updates, and stories about SVG.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los SVG.
+    ja: SVG に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: SVG에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o SVG.
+    ru: Последние новости и статьи об SVG.
+    zh: 我们关于 SVG 的最新资讯、动态和故事。
+
+testing:
+  title:
+    en: Testing
+    es: Pruebas
+    ja: Testing
+    ko: 테스트
+    pt: Testes
+    ru: Тестирование
+    zh: 测试
+  description:
+    en: Our latest news, updates, and stories about Testing.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las pruebas.
+    ja: Testing に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 테스트에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre testes.
+    ru: Последние новости и статьи о тестировании.
+    zh: 我们关于测试的最新资讯、动态和故事。
+
+test-automation:
+  title:
+    en: Test automation
+  description:
+    en: Test automation
+
+tools:
+  title:
+    en: Tools
+    es: Herramientas
+    ja: ツール
+    ko: 도구
+    pt: Ferramentas
+    ru: Инструменты
+    zh: 工具
+  description:
+    en: Our latest news, updates, and stories about Tools.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre las Herramientas.
+    ja: ツールに関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 도구에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre ferramentas.
+    ru: Последние новости и статьи об инструментах.
+    zh: 我们关于工具的最新资讯、动态和故事。
+
+twitter-space:
+  title:
+    en: Space
+  description:
+    en: Page presenting a Twitter Space event.
+
+ux:
+  title:
+    en: UX
+    es: Experiencia del usuario (UX)
+    ja: UX
+    ko: UX
+    pt: UX
+    ru: UX
+    zh: 用户体验
+  description:
+    en: Our latest news, updates, and stories about UX.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la experiencia del usuario (UX).
+    ja: UX に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: UX에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre a UX.
+    ru: Последние новости и статьи о UX.
+    zh: 我们关于用户体验的最新资讯、动态和故事。
+
+virtual-reality:
+  title:
+    en: Virtual Reality
+    es: Realidad Virtual
+    ja: Virtual Reality
+    ko: 가상 현실
+    pt: Realidade virtual
+    ru: Виртуальная реальность
+    zh: 虚拟现实
+  description:
+    en: Our latest news, updates, and stories about Virtual Reality.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre la Realidad Virtual.
+    ja: Virtual Reality に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 가상 현실에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre realidade virtual.
+    ru: Последние новости и статьи о виртуальной реальности.
+    zh: 我们关于虚拟现实的最新资讯、动态和故事。
+
+webassembly:
+  title:
+    en: WebAssembly
+    es: WebAssembly
+    ja: WebAssembly
+    ko: WebAssembly
+    pt: WebAssembly
+    ru: WebAssembly
+    zh: WebAssembly
+  description:
+    en: Our latest news, updates, and stories about WebAssembly.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre WebAssembly.
+    ja: WebAssembly に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: WebAssembly에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o WebAssembly.
+    ru: Последние новости и статьи о WebAssembly.
+    zh: 我们关于 WebAssembly 的最新资讯、动态和故事。
+
+web-app-manifest:
+  title:
+    en: Web App Manifest
+    es: Web App Manifest
+    ja: Web App Manifest
+    ko: 웹 앱 매니페스트
+    pt: Web App Manifest
+    ru: Манифесты веб-приложений
+    zh: Web 应用清单
+  description:
+    en: Our latest news, updates, and stories about Web App Manifest.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre Web App Manifest.
+    ja: Web App Manifest に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 웹 앱 매니페스트에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o Web App Manifest.
+    ru: Последние новости и статьи о манифестах веб-приложений.
+    zh: 我们关于 Web 应用清单的最新资讯、动态和故事。
+
+web-bundles:
+  title:
+    en: Web Bundles
+    es: Web Bundles
+    ja: Web Bundles
+    ko: 웹 번들
+    pt: Web Bundles
+    ru: Web Bundles
+    zh: Web Bundles
+  description:
+    en: Our latest news, updates, and stories about Web Bundles.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre el paquete Web Bundles.
+    ja: Web Bundles に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: 웹 번들에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre Web Bundles.
+    ru: Последние новости и статьи о Web Bundles.
+    zh: 我们关于 Web Bundles 的最新资讯、动态和故事。
+
+web-vitals:
+  title:
+    en: Web Vitals
+    es: Web Vitals
+    ja: Web Vitals
+    ko: Web Vitals
+    pt: Web Vitals
+    ru: Web Vitals
+    zh: 网页指标
+  description:
+    en: Our latest news, updates, and stories about Web Vitals.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre los Web Vitals.
+    ja: Web Vitals に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: Web Vitals에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre os Web Vitals.
+    ru: Последние новости и статьи о Web Vitals.
+    zh: 我们关于网页指标的最新资讯、动态和故事。
+
+webxr:
+  title:
+    en: WebXR
+    es: WebXR
+    ja: WebXR
+    ko: WebXR
+    pt: WebXR
+    ru: WebXR
+    zh: WebXR
+  description:
+    en: Our latest news, updates, and stories about WebXR.
+    es: Consulte nuestras últimas noticias, actualizaciones e historias publicadas sobre WebXR.
+    ja: WebXR に関する最新のニュース、アップデート情報、記事などをご紹介します。
+    ko: WebXR에 관한 최신 뉴스, 업데이트 및 스토리.
+    pt: Nossas últimas notícias, atualizações e histórias sobre o WebXR.
+    ru: Последние новости и статьи о WebXR.
+    zh: 我们关于 WebXR 的最新资讯、动态和故事。
diff --git a/src/site/_data/i18n/toc.yml b/src/site/_data/i18n/toc.yml
new file mode 100644
index 00000000000..3ca723c169f
--- /dev/null
+++ b/src/site/_data/i18n/toc.yml
@@ -0,0 +1,11 @@
+on_this_page:
+  en: On this page
+  es: En esta página
+  ja: このページ内
+  ko: 이 페이지에서
+  pt: Nesta página
+  ru: Содержание
+  zh: 本页内容
+
+toc:
+  en: Table of Contents
diff --git a/src/site/_data/lib/hash.js b/src/site/_data/lib/hash.js
new file mode 100644
index 00000000000..c7845253900
--- /dev/null
+++ b/src/site/_data/lib/hash.js
@@ -0,0 +1,90 @@
+/**
+ * @fileoverview Helper for hashing content.
+ */
+
+const path = require('path');
+const crypto = require('crypto');
+const fs = require('fs');
+
+const hashLength = 8;
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const isStaging = process.env.ELEVENTY_ENV === 'staging';
+
+function randomHash() {
+  return Math.random().toString(16).substring(2);
+}
+
+function generateAndValidateHash(c) {
+  const hash = c.digest('hex').substr(0, hashLength);
+  if (hash.length !== hashLength) {
+    throw new TypeError('could not hash content');
+  }
+  return hash;
+}
+
+/**
+ * @param {string} str
+ * @return {string}
+ */
+function sha256base64(str) {
+  const c = crypto.createHash('sha256');
+  c.update(str);
+  return c.digest('base64');
+}
+
+/**
+ * Hashes the passed files. Requires at least one.
+ *
+ * @param {string} file base file to hash
+ * @param {...string} rest additional files to hash
+ */
+function hashForFiles(file, ...rest) {
+  const files = [file].concat(rest);
+
+  const c = crypto.createHash('sha1');
+
+  for (const file of files) {
+    const b = fs.readFileSync(file);
+    c.update(b);
+  }
+
+  return generateAndValidateHash(c);
+}
+
+const hashForProdCache = {};
+
+/**
+ * Hashes the passed file from within the dist dir if in production mode,
+ * returning the file with an appended `?v=<hash>`.
+ * In dev mode it will return the file with an appended `?v=<randomHash>` to
+ * avoid caching.
+ *
+ * @param {string} file
+ * @return {string}
+ */
+function hashForProd(file) {
+  if (!isProd && !isStaging) {
+    return `${file}?v=${randomHash()}`;
+  }
+
+  let hash = hashForProdCache[file];
+  if (hash === undefined) {
+    const distPath = path.join(process.cwd(), 'dist', file);
+    try {
+      hash = hashForFiles(distPath);
+    } catch (err) {
+      console.error('Could not find asset at', file);
+      return file;
+    }
+
+    hashForProdCache[file] = hash;
+  }
+
+  return `${file}?v=${hash}`;
+}
+
+module.exports = {
+  hashForProd,
+  randomHash,
+  sha256base64,
+};
diff --git a/src/site/_data/paths/accessible.json b/src/site/_data/paths/accessible.json
index cf76edd04f9..bb384eb4b3f 100644
--- a/src/site/_data/paths/accessible.json
+++ b/src/site/_data/paths/accessible.json
@@ -1,18 +1,18 @@
 {
   "slug": "accessible",
-  "cover": "/images/collections/accessible.svg",
-  "title": "Accessible to all",
-  "description": "Build a site that works for all of your users.",
-  "overview": "All users should be able to access your content. In this section you'll learn how to provide a robust experience to your users that accounts for their context and any situational, temporary, or permanent disabilities.",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/kIvqNJ7Z62umTO31nYhk.svg",
+  "title": "i18n.paths.accessible.title",
+  "description": "i18n.paths.accessible.description",
+  "overview": "i18n.paths.accessible.overview",
   "topics": [
     {
-      "title": "Understand the diverse needs of users",
+      "title": "i18n.paths.accessible.topics.understand_the_diverse_needs_of_users",
       "pathItems": [
         "what-is-accessibility"
       ]
     },
     {
-      "title": "Make your site keyboard accessible",
+      "title": "i18n.paths.accessible.topics.make_your_site_keyboard_accessible",
       "pathItems": [
         "keyboard-access",
         "use-semantic-html",
@@ -21,15 +21,16 @@
       ]
     },
     {
-      "title": "Understand semantics and basic screen reader support",
+      "title": "i18n.paths.accessible.topics.understand_semantics_and_basic_screen_reader_support",
       "pathItems": [
         "semantics-and-screen-readers",
         "headings-and-landmarks",
-        "labels-and-text-alternatives"
+        "labels-and-text-alternatives",
+        "media-accessibility"
       ]
     },
     {
-      "title": "Create a design and CSS that supports users with different needs",
+      "title": "i18n.paths.accessible.topics.create_a_design_and_css_that_supports_users_with_different_needs",
       "pathItems": [
         "accessible-tap-targets",
         "color-and-contrast-accessibility",
@@ -38,4 +39,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/angular.json b/src/site/_data/paths/angular.json
index 477e91af3a0..5ca25f05cf3 100644
--- a/src/site/_data/paths/angular.json
+++ b/src/site/_data/paths/angular.json
@@ -1,19 +1,19 @@
 {
   "slug": "angular",
-  "cover": "/images/collections/angular.svg",
-  "title": "Angular",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/8VpJZiVck4X4bBXXGMsU.svg",
+  "title": "i18n.paths.angular.title",
   "updated": "June 24, 2019",
-  "description": "Build performant and progressive Angular applications.",
-  "overview": "In this collection you’ll learn practical tips and tricks to make your Angular applications faster, more reliable, more accessible, and generally awesome.",
+  "description": "i18n.paths.angular.description",
+  "overview": "i18n.paths.angular.overview",
   "topics": [
     {
-      "title": "Introduction",
+      "title": "i18n.paths.angular.topics.introduction",
       "pathItems": [
         "get-started-optimize-angular"
       ]
     },
     {
-      "title": "Fast",
+      "title": "i18n.paths.angular.topics.fast",
       "pathItems": [
         "route-level-code-splitting-in-angular",
         "route-preloading-in-angular",
@@ -23,19 +23,19 @@
       ]
     },
     {
-      "title": "Reliable",
+      "title": "i18n.paths.angular.topics.reliable",
       "pathItems": [
         "precaching-with-the-angular-service-worker"
       ]
     },
     {
-      "title": "Installable",
+      "title": "i18n.paths.angular.topics.installable",
       "pathItems": [
         "creating-pwa-with-angular-cli"
       ]
     },
     {
-      "title": "Accessible",
+      "title": "i18n.paths.angular.topics.accessible",
       "pathItems": [
         "accessible-angular-with-codelyzer"
       ]
diff --git a/src/site/_data/paths/animations.json b/src/site/_data/paths/animations.json
new file mode 100644
index 00000000000..ccb7b84b8b4
--- /dev/null
+++ b/src/site/_data/paths/animations.json
@@ -0,0 +1,50 @@
+{
+  "slug": "animations",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/khlZd1T1VU3FjmklZY2b.svg",
+  "title": "i18n.paths.animations.title",
+  "updated": "September 25, 2020",
+  "description": "i18n.paths.animations.description",
+  "overview": "i18n.paths.animations.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.animations.topics.how_browsers_render_animations",
+      "pathItems": [
+        "animations-overview"
+      ]
+    },
+    {
+      "title": "i18n.paths.animations.topics.build_animations_with_css",
+      "pathItems": [
+        {
+          "title": "CSS animations API guide",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"
+        },
+        "animations-guide",
+        "animations-examples",
+        "prefers-reduced-motion",
+        {
+          "title": "Debug CSS animations with Chrome DevTools",
+          "url": "https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations"
+        },
+        {
+          "title": "Debug CSS animations with Firefox DevTools",
+          "url": "https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.animations.topics.build_animations_with_javascript",
+      "pathItems": [
+        {
+          "title": "Web Animations API overview",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API"
+        },
+        {
+          "title": "Web Animations API guide",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"
+        },
+        "web-animations"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/devices.json b/src/site/_data/paths/devices.json
new file mode 100644
index 00000000000..8c07a23c612
--- /dev/null
+++ b/src/site/_data/paths/devices.json
@@ -0,0 +1,33 @@
+{
+  "slug": "devices",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rls8wXcjXofU4iZfXVDb.svg",
+  "title": "i18n.paths.devices.title",
+  "updated": "February 12, 2021",
+  "description": "i18n.paths.devices.description",
+  "overview": "i18n.paths.devices.overview",
+  "youtubeId": "ZIZqmXfrRLI",
+  "topics": [
+    {
+      "title": "i18n.paths.devices.topics.introduction",
+      "pathItems": [
+        "devices-introduction"
+      ]
+    },
+    {
+      "title": "i18n.paths.devices.topics.api_guides",
+      "pathItems": [
+        "bluetooth",
+        "usb",
+        "nfc",
+        "serial",
+        "hid"
+      ]
+    },
+    {
+      "title": "i18n.paths.devices.topics.advanced_topics",
+      "pathItems": [
+        "build-for-webusb"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/discoverable.json b/src/site/_data/paths/discoverable.json
index ea6ebfbd44d..cad27abefaa 100644
--- a/src/site/_data/paths/discoverable.json
+++ b/src/site/_data/paths/discoverable.json
@@ -1,13 +1,13 @@
 {
   "slug": "discoverable",
-  "cover": "/images/collections/discoverable.svg",
-  "title": "Easily discoverable",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/SYMQe2sdOk99lBWpN3qG.svg",
+  "title": "i18n.paths.discoverable.title",
   "updated": "August 23, 2019",
-  "description": "Ensure users can find your site easily through search.",
-  "overview": "Making your content discoverable matters because it's how you get more relevant users viewing your content. If a search engine has trouble seeing your page, you're possibly missing out on a source of traffic.\n\nBy making sure search engines can find and automatically understand your content, you are improving the visibility of your site for relevant searches. This is called SEO, or search engine optimization, which can result in more interested users coming to your site. Audit your site and check the SEO results to see how well search engines can surface your content.",
+  "description": "i18n.paths.discoverable.description",
+  "overview": "i18n.paths.discoverable.overview",
   "topics": [
     {
-      "title": "How search works and how to measure discoverability",
+      "title": "i18n.paths.discoverable.topics.how_search_works_and_how_to_measure_discoverability",
       "pathItems": [
         "how-search-works",
         "pass-lighthouse-seo-audit",
diff --git a/src/site/_data/paths/fast.json b/src/site/_data/paths/fast.json
index c12b6e744e9..d7c8ba08baf 100644
--- a/src/site/_data/paths/fast.json
+++ b/src/site/_data/paths/fast.json
@@ -1,23 +1,39 @@
 {
   "slug": "fast",
-  "cover": "/images/collections/fast.svg",
-  "title": "Fast load times",
-  "updated": "July 17, 2020",
-  "description": "Techniques for improving site performance.",
-  "overview": "When you're building a modern web experience, it's important to measure, optimize, and monitor if you're to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones.\n\nSites should focus on optimizing for user-centric happiness metrics. Tools like Lighthouse (baked into web.dev!) highlight these metrics and help you take the right steps toward improving your performance. To \"stay fast\", set and enforce performance budgets to help your team work within the constraints needed to continue loading fast and keeping users happy after your site has launched.",
-  "topics": [
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/fjFJRFnHXiem8yF0GGQ9.svg",
+  "title": "i18n.paths.fast.title",
+  "updated": "January 6, 2022",
+  "description": "i18n.paths.fast.description",
+  "overview": "i18n.paths.fast.overview",
+    "topics": [
     {
-      "title": "Introduction",
+      "title": "i18n.paths.fast.topics.introduction",
       "pathItems": [
         "why-speed-matters",
         "what-is-speed",
         "how-to-measure-speed",
-        "how-to-stay-fast",
-        "rail"
+        "how-to-stay-fast"
       ]
     },
     {
-      "title": "Set performance budgets",
+      "title": "i18n.paths.fast.topics.core_web_vitals",
+      "pathItems": [
+        "vitals",
+        "user-centric-performance-metrics",
+        "defining-core-web-vitals-thresholds",
+        "lcp",
+        "cls",
+        "fid",
+        "inp",
+        "optimize-lcp",
+        "optimize-cls",
+        "optimize-fid",
+        "optimize-inp",
+        "vitals-tools"
+      ]
+    },
+    {
+      "title": "i18n.paths.fast.topics.set_performance_budgets",
       "pathItems": [
         "performance-budgets-101",
         "your-first-performance-budget",
@@ -29,7 +45,7 @@
       ]
     },
     {
-      "title": "Optimize your images",
+      "title": "i18n.paths.fast.topics.optimize_your_images",
       "pathItems": [
         "choose-the-right-image-format",
         "compress-images",
@@ -42,38 +58,43 @@
       ]
     },
     {
-      "title": "Lazy-load images and video",
+      "title": "i18n.paths.fast.topics.lazy_load_images_and_video",
       "pathItems": [
         "lazy-loading",
         "lazy-loading-images",
         "lazy-loading-video",
-        "native-lazy-loading",
+        "browser-level-image-lazy-loading",
         "use-lazysizes-to-lazyload-images",
         "lazy-loading-problems"
       ]
     },
     {
-      "title": "Optimize your JavaScript",
+      "title": "i18n.paths.fast.topics.optimize_your_javascript",
       "pathItems": [
+        "optimize-long-tasks",
         "apply-instant-loading-with-prpl",
         "reduce-javascript-payloads-with-code-splitting",
         "remove-unused-code",
         "reduce-network-payloads-using-text-compression",
         "serve-modern-code-to-modern-browsers",
+        "publish-modern-javascript",
         "commonjs-larger-bundles"
       ]
     },
     {
-      "title": "Prioritize resources",
+      "title": "i18n.paths.fast.topics.optimize_your_resource_delivery",
       "pathItems": [
+        "content-delivery-networks",
         "prioritize-resources",
         "preload-critical-assets",
         "preconnect-and-dns-prefetch",
-        "link-prefetch"
+        "link-prefetch",
+        "fast-playback-with-preload",
+        "optimize-ttfb"
       ]
     },
     {
-      "title": "Optimize your CSS",
+      "title": "i18n.paths.fast.topics.optimize_your_css",
       "pathItems": [
         "defer-non-critical-css",
         "minify-css",
@@ -82,33 +103,39 @@
       ]
     },
     {
-      "title": "Optimize your third-party resources",
+      "title": "i18n.paths.fast.topics.optimize_your_third_party_resources",
       "pathItems": [
         "third-party-javascript",
         "identify-slow-third-party-javascript",
-        "efficiently-load-third-party-javascript"
+        "efficiently-load-third-party-javascript",
+        "tag-best-practices"
       ]
     },
     {
-      "title": "Optimize WebFonts",
-      "pathItems": ["avoid-invisible-text","optimize-webfont-loading","reduce-webfont-size"]
+      "title": "i18n.paths.fast.topics.optimize_webfonts",
+      "pathItems": [
+        "font-best-practices",
+        "avoid-invisible-text",
+        "optimize-webfont-loading",
+        "reduce-webfont-size"
+      ]
     },
     {
-      "title": "Optimize for network quality",
-      "pathItems": ["adaptive-serving-based-on-network-quality"]
+      "title": "i18n.paths.fast.topics.optimize_for_network_quality",
+      "pathItems": [
+        "adaptive-serving-based-on-network-quality"
+      ]
     },
     {
-      "title": "Measure performance in the field",
+      "title": "i18n.paths.fast.topics.measure_performance_in_the_field",
       "pathItems": [
         "chrome-ux-report",
-        "chrome-ux-report-data-studio-dashboard",
-        "chrome-ux-report-pagespeed-insights",
-        "chrome-ux-report-bigquery",
-        "chrome-ux-report-api"
+        "lab-and-field-data-differences",
+        "crux-and-rum-differences"
       ]
     },
     {
-      "title": "Build a performance culture",
+      "title": "i18n.paths.fast.topics.build_a_performance_culture",
       "pathItems": [
         "value-of-speed",
         "how-can-performance-improve-conversion",
diff --git a/src/site/_data/paths/handbook.json b/src/site/_data/paths/handbook.json
index 43373446c84..806f09be375 100644
--- a/src/site/_data/paths/handbook.json
+++ b/src/site/_data/paths/handbook.json
@@ -1,23 +1,25 @@
 {
   "slug": "handbook",
-  "cover": "/images/collections/handbook.svg",
-  "title": "Content handbook",
-  "updated": "Jun 24, 2019",
-  "description": "Create great content for web.dev.",
-  "overview": "This handbook helps contributors to web.dev create effective, engaging content and get it published as easily as possible. This is a living document that will evolve as we learn more about what works.",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/Tb9AWhihdixMZTA3taHV.svg",
+  "title": "i18n.paths.handbook.title",
+  "updated": "Oct 11, 2021",
+  "description": "i18n.paths.handbook.description",
+  "overview": "i18n.paths.handbook.overview",
   "topics": [
     {
-      "title": "Content process",
+      "title": "i18n.paths.handbook.topics.content_process",
       "pathItems": [
         "handbook/quick-start",
+        "handbook/writing-blog-posts",
         "handbook/content-checklist",
         "handbook/third-party-contributions"
       ]
     },
     {
-      "title": "Content guidelines",
+      "title": "i18n.paths.handbook.topics.content_guidelines",
       "pathItems": [
         "handbook/content-types",
+        "handbook/case-study-guidelines",
         "handbook/quality",
         "handbook/voice",
         "handbook/audience",
@@ -33,10 +35,11 @@
       ]
     },
     {
-      "title": "web.dev markup",
+      "title": "i18n.paths.handbook.topics.web_dev_markup",
       "pathItems": [
         "handbook/author-profile",
         "handbook/markup-post-codelab",
+        "handbook/markup-cards-collection",
         "handbook/web-dev-components",
         "handbook/markup-media",
         "handbook/markup-code",
@@ -46,11 +49,12 @@
       ]
     },
     {
-      "title": "Content infrastructure",
+      "title": "i18n.paths.handbook.topics.content_infrastructure",
       "pathItems": [
         "handbook/resolving-glitch-issues",
-        "handbook/redirects"
+        "handbook/redirects",
+        "handbook/adding-a-course"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/how-to-optimize-inp.json b/src/site/_data/paths/how-to-optimize-inp.json
new file mode 100644
index 00000000000..eb792ef8004
--- /dev/null
+++ b/src/site/_data/paths/how-to-optimize-inp.json
@@ -0,0 +1,42 @@
+{
+  "slug": "how-to-optimize-inp",
+  "cover": "image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/1AtWWHLH0bovMgv44FBU.svg",
+  "title": "i18n.paths.how_to_optimize_inp.title",
+  "updated": "May 10, 2023",
+  "description": "i18n.paths.how_to_optimize_inp.description",
+  "overview": "i18n.paths.how_to_optimize_inp.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.how_to_optimize_inp.topics.familiarize",
+      "pathItems": [
+        "inp",
+        "optimize-inp"
+      ]
+    },
+    {
+      "title": "i18n.paths.how_to_optimize_inp.topics.troubleshooting",
+      "pathItems": [
+        "find-slow-interactions-in-the-field",
+        "diagnose-slow-interactions-in-the-lab"
+      ]
+    },
+    {
+      "title": "i18n.paths.how_to_optimize_inp.topics.javascript",
+      "pathItems": [
+        "optimize-long-tasks",
+        "optimize-input-delay",
+        "script-evaluation-and-long-tasks",
+        "off-main-thread"
+      ]
+    },
+    {
+      "title": "i18n.paths.how_to_optimize_inp.topics.rendering",
+      "pathItems": [
+        "avoid-large-complex-layouts-and-layout-thrashing",
+        "reduce-the-scope-and-complexity-of-style-calculations",
+        "dom-size-and-interactivity",
+        "client-side-rendering-of-html-and-interactivity"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/identity.json b/src/site/_data/paths/identity.json
new file mode 100644
index 00000000000..a62a9eea281
--- /dev/null
+++ b/src/site/_data/paths/identity.json
@@ -0,0 +1,83 @@
+{
+  "slug": "identity",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/LHnKunuy8B0KRVYCv1nj.svg",
+  "title": "i18n.paths.identity.title",
+  "updated": "September 30, 2021",
+  "description": "i18n.paths.identity.description",
+  "overview": "i18n.paths.identity.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.identity.topics.understand_authentication_basics",
+      "pathItems": [
+        "sign-in-form-best-practices",
+        {
+          "title": "[Codelab] Use cross-platform browser features to build a sign-in form",
+          "url": "https://web.dev/codelab-sign-in-form-best-practices/"
+        },
+        "sign-up-form-best-practices",
+        {
+          "title": "[Codelab] Sign-up form best practices codelab",
+          "url": "https://web.dev/codelab-sign-up-form-best-practices/"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.identity.topics.build_authentication_systems_with_modern_APIs",
+      "pathItems": [
+        "web-otp",
+        "change-password-url"
+      ]
+    },
+    {
+      "title": "i18n.paths.identity.topics.strengthen_security_with_two-factor_authentication",
+      "pathItems": [
+        {
+          "title": "SMS OTP form for two-step verification",
+          "url": "sms-otp-form"
+        },
+        {
+          "title": "[Codelab] Enable two-factor authentication with WebAuthn",
+          "url": "https://developers.google.com/codelabs/webauthn-2fa-key/"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.identity.topics.build_advanced_authentication_systems",
+      "pathItems": [
+        {
+          "title": "Passwordless login with passkeys",
+          "url": "https://developers.google.com/identity/passkeys/"
+        },
+        "passkey-registration",
+        "passkey-form-autofill",
+        {
+          "title": "[Codelab] Set up a biometric re-authentication functionality with WebAuthn",
+          "url": "https://developers.google.com/codelabs/webauthn-reauth/"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.identity.topics.build_authentication_with_identity_federation",
+      "pathItems": [
+        {
+          "title": "Use OAuth 2.0 to access Google APIs",
+          "url": "https://developers.google.com/identity/protocols/oauth2"
+        },
+        {
+          "title": "Set up OpenID Connect compliant OAuth 2.0",
+          "url": "https://developers.google.com/identity/protocols/oauth2/openid-connect"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.identity.topics.case_studies",
+      "pathItems": [
+        "yahoo-japan-identity-case-study",
+        {
+          "title": "Goibibo dropped OTP retry on sign-up by 25% with WebOTP",
+          "url": "goibibo#web-otp"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/index.js b/src/site/_data/paths/index.js
index ac10e044d9d..bb94a85a932 100644
--- a/src/site/_data/paths/index.js
+++ b/src/site/_data/paths/index.js
@@ -1,31 +1,34 @@
 const accessible = require('./accessible.json');
 const angular = require('./angular.json');
+const devices = require('./devices.json');
 const discoverable = require('./discoverable.json');
 const fast = require('./fast.json');
-const lighthouseAccessibility = require('./lighthouse-accessibility.json');
-const lighthouseBestPractices = require('./lighthouse-best-practices.json');
-const lighthousePerformance = require('./lighthouse-performance.json');
-const lighthousePwa = require('./lighthouse-pwa.json');
-const lighthouseSeo = require('./lighthouse-seo.json');
+const learnCoreWebVitals = require('./learn-core-web-vitals.json');
+const media = require('./media.json');
 const metrics = require('./metrics.json');
 const notifications = require('./notifications.json');
 const payments = require('./payments.json');
 const progressiveWebApps = require('./progressive-web-apps.json');
+const miniApps = require('./mini-apps.json');
 const react = require('./react.json');
 const reliable = require('./reliable.json');
 const secure = require('./secure.json');
-const vitals = require('./vitals.json');
+const animations = require('./animations.json');
+const identity = require('./identity.json');
+const webDevBasicsOne = require('./web-dev-basics-one.json');
+const webassembly = require('./webassembly.json');
+const howToOptimizeINP = require('./how-to-optimize-inp.json');
 
 module.exports = {
   accessible,
   angular,
+  animations,
+  devices,
   discoverable,
   fast,
-  'lighthouse-accessibility': lighthouseAccessibility,
-  'lighthouse-best-practices': lighthouseBestPractices,
-  'lighthouse-performance': lighthousePerformance,
-  'lighthouse-pwa': lighthousePwa,
-  'lighthouse-seo': lighthouseSeo,
+  'learn-core-web-vitals': learnCoreWebVitals,
+  identity,
+  media,
   metrics,
   notifications,
   payments,
@@ -33,5 +36,8 @@ module.exports = {
   react,
   reliable,
   secure,
-  vitals,
+  'mini-apps': miniApps,
+  'web-dev-basics-one': webDevBasicsOne,
+  webassembly,
+  'how-to-optimize-inp': howToOptimizeINP,
 };
diff --git a/src/site/_data/paths/learn-core-web-vitals.json b/src/site/_data/paths/learn-core-web-vitals.json
new file mode 100644
index 00000000000..27fb1122f63
--- /dev/null
+++ b/src/site/_data/paths/learn-core-web-vitals.json
@@ -0,0 +1,71 @@
+{
+    "slug": "learn-core-web-vitals",
+    "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg",
+    "title": "i18n.paths.learn_core_web_vitals.title",
+    "description": "i18n.paths.learn_core_web_vitals.description",
+    "overview": "i18n.paths.learn_core_web_vitals.overview",
+    "topics": [
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.overview",
+            "pathItems": [
+                "vitals",
+                "vitals-business-impact"
+            ]
+        },
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.core_web_vitals_metrics",
+            "pathItems": [
+                "lcp",
+                "cls",
+                "fid",
+                "inp",
+                "defining-core-web-vitals-thresholds"
+            ]
+        },
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.measure_core_web_vitals",
+            "pathItems": [
+                "vitals-measurement-getting-started",
+                "vitals-tools",
+                "vitals-field-measurement-best-practices",
+                "crux-and-rum-differences"
+            ]
+        },
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.debug_core_web_vitals",
+            "pathItems": [
+                "lab-and-field-data-differences",
+                "debug-layout-shifts",
+                "debug-performance-in-the-field"
+            ]
+        },
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.improve_core_web_vitals",
+            "pathItems": [
+                "optimize-lcp",
+                "optimize-cls",
+                "optimize-fid",
+                "optimize-inp"
+            ]
+        },
+        {
+            "title": "i18n.paths.learn_core_web_vitals.topics.best_practices",
+            "pathItems": [
+                {
+                    "title": "UX patterns optimized for Core Web Vitals",
+                    "url": "/patterns/web-vitals-patterns"
+                },
+                "carousel-best-practices",
+                "cookie-notice-best-practices",
+                "font-best-practices",
+                "tag-best-practices",
+                "embed-best-practices",
+                {
+                    "title": "Infinite scroll without layout shifts",
+                    "url": "https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/"
+                },
+                "css-web-vitals"
+            ]
+        }
+    ]
+}
diff --git a/src/site/_data/paths/lighthouse-accessibility.json b/src/site/_data/paths/lighthouse-accessibility.json
deleted file mode 100644
index c24bc3d4cff..00000000000
--- a/src/site/_data/paths/lighthouse-accessibility.json
+++ /dev/null
@@ -1,112 +0,0 @@
-{
-  "slug": "lighthouse-accessibility",
-  "cover": "/images/collections/lighthouse-accessibility.svg",
-  "title": "Accessibility audits",
-  "description": "Can all users access content and navigate your site effectively?",
-  "overview": "These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
-  "topics": [
-    {
-      "title": "Audit scoring",
-      "pathItems": [
-        "accessibility-scoring"
-      ]
-    },
-    {
-      "title": "Navigation",
-      "pathItems": [
-        "accesskeys",
-        "bypass",
-        "duplicate-id-active",
-        "heading-order",
-        "tabindex"
-      ]
-    },
-    {
-      "title": "ARIA",
-      "pathItems": [
-        "aria-allowed-attr",
-        "aria-hidden-body",
-        "aria-hidden-focus",
-        "aria-input-field-name",
-        "aria-required-attr",
-        "aria-required-children",
-        "aria-required-parent",
-        "aria-roles",
-        "aria-toggle-field-name",
-        "aria-valid-attr-value",
-        "aria-valid-attr",
-        "duplicate-id-aria"
-      ]
-    },
-    {
-      "title": "Names and labels",
-      "pathItems": [
-        "button-name",
-        "document-title",
-        "form-field-multiple-labels",
-        "frame-title",
-        "image-alt",
-        "input-image-alt",
-        "label",
-        "link-name",
-        "object-alt"
-      ]
-    },
-    {
-      "title": "Contrast",
-      "pathItems": [
-        "color-contrast"
-      ]
-    },
-    {
-      "title": "Tables and lists",
-      "pathItems": [
-        "definition-list",
-        "dlitem",
-        "list",
-        "listitem",
-        "layout-table",
-        "td-headers-attr",
-        "th-has-data-cells"
-      ]
-    },
-    {
-      "title": "Best practices",
-      "pathItems": [
-        "meta-refresh",
-        "meta-viewport"
-      ]
-    },
-    {
-      "title": "Audio and video",
-      "pathItems": [
-        "audio-caption",
-        "video-caption",
-        "video-description"
-      ]
-    },
-    {
-      "title": "Internationalization and localization",
-      "pathItems": [
-        "html-has-lang",
-        "html-lang-valid",
-        "valid-lang"
-      ]
-    },
-    {
-      "title": "Additional items to manually check",
-      "pathItems": [
-        "logical-tab-order",
-        "focusable-controls",
-        "interactive-element-affordance",
-        "managed-focus",
-        "focus-traps",
-        "custom-controls-labels",
-        "custom-control-roles",
-        "visual-order-follows-dom",
-        "offscreen-content-hidden",
-        "use-landmarks"
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/lighthouse-best-practices.json b/src/site/_data/paths/lighthouse-best-practices.json
deleted file mode 100644
index f152e21a913..00000000000
--- a/src/site/_data/paths/lighthouse-best-practices.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "slug": "lighthouse-best-practices",
-  "cover": "/images/collections/lighthouse-best-practices.svg",
-  "title": "Best Practices audits",
-  "description": "Improve code health of your web page following these best practices",
-  "overview": "These checks highlight opportunities to improve the overall code health of your web app.",
-  "topics": [
-    {
-      "title": "General best practices",
-      "pathItems": ["doctype","errors-in-console","image-aspect-ratio"]
-    },
-    {
-      "title": "Make your page fast",
-      "pathItems": ["uses-http2","no-document-write","uses-passive-event-listeners"]
-    },
-    {
-      "title": "Make your page secure",
-      "pathItems": [
-        "is-on-https",
-        "external-anchors-use-rel-noopener",
-        "no-vulnerable-libraries"
-      ]
-    },
-    {
-      "title": "Create a good user experience",
-      "pathItems": [
-        "geolocation-on-start",
-        "notification-on-start",
-        "password-inputs-can-be-pasted-into"
-      ]
-    },
-    {
-      "title": "Avoid deprecated technologies",
-      "pathItems": ["appcache-manifest","deprecations"]
-    },
-    {"title": "Diagnostic audits","pathItems": ["js-libraries"]}
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/lighthouse-performance.json b/src/site/_data/paths/lighthouse-performance.json
deleted file mode 100644
index 4dd10c949fc..00000000000
--- a/src/site/_data/paths/lighthouse-performance.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "slug": "lighthouse-performance",
-  "cover": "/images/collections/lighthouse-performance.svg",
-  "title": "Performance audits",
-  "description": "Measure performance and find opportunities to speed up page loads.",
-  "overview": "These checks ensure that your page is optimized for users to be able to see and interact with page content.",
-  "topics": [
-    {
-      "title": "Performance audit scoring",
-      "pathItems": ["performance-scoring"]
-    },
-    {
-      "title": "Metrics",
-      "pathItems": [
-        "first-contentful-paint",
-        "first-meaningful-paint",
-        "speed-index",
-        "first-cpu-idle",
-        "interactive",
-        "lighthouse-max-potential-fid",
-        "lighthouse-total-blocking-time",
-        "lighthouse-largest-contentful-paint"
-      ]
-    },
-    {
-      "title": "Opportunities",
-      "pathItems": [
-        "render-blocking-resources",
-        "uses-responsive-images",
-        "offscreen-images",
-        "unminified-css",
-        "unminified-javascript",
-        "unused-css-rules",
-        "uses-optimized-images",
-        "uses-webp-images",
-        "uses-text-compression",
-        "uses-rel-preconnect",
-        "time-to-first-byte",
-        "redirects",
-        "uses-rel-preload",
-        "efficient-animated-content",
-        "third-party-summary"
-      ]
-    },
-    {
-      "title": "Diagnostics",
-      "pathItems": [
-        "total-byte-weight",
-        "uses-long-cache-ttl",
-        "dom-size",
-        "critical-request-chains",
-        "user-timings",
-        "bootup-time",
-        "mainthread-work-breakdown",
-        "font-display",
-        "resource-summary"
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/lighthouse-pwa.json b/src/site/_data/paths/lighthouse-pwa.json
deleted file mode 100644
index 8c81f28b598..00000000000
--- a/src/site/_data/paths/lighthouse-pwa.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "slug": "lighthouse-pwa",
-  "cover": "/images/collections/lighthouse-pwa.svg",
-  "title": "PWA audits",
-  "description": "Measure if your site is fast, reliable and installable.",
-  "overview": "These checks validate the aspects of a Progressive Web App.",
-  "topics": [
-    {
-      "title": "Fast and reliable",
-      "pathItems": ["load-fast-enough-for-pwa","works-offline","offline-start-url"]
-    },
-    {
-      "title": "Installable",
-      "pathItems": ["is-on-https","service-worker","installable-manifest"]
-    },
-    {
-      "title": "PWA optimized",
-      "pathItems": [
-        "redirects-http",
-        "splash-screen",
-        "themed-omnibox",
-        "content-width",
-        "viewport",
-        "without-javascript",
-        "apple-touch-icon"
-      ]
-    },
-    {
-      "title": "Additional items to manually check",
-      "pathItems": ["pwa-cross-browser","pwa-page-transitions","pwa-each-page-has-url"]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/lighthouse-seo.json b/src/site/_data/paths/lighthouse-seo.json
deleted file mode 100644
index 46b1758c9ef..00000000000
--- a/src/site/_data/paths/lighthouse-seo.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "slug": "lighthouse-seo",
-  "cover": "/images/collections/lighthouse-seo.svg",
-  "title": "SEO audits",
-  "description": "How well can search engines understand your content?",
-  "overview": "These checks ensure that your page is optimized for search engine results ranking.",
-  "topics": [
-    {
-      "title": "Make sure search engines understand your content",
-      "pathItems": [
-        "document-title",
-        "meta-description",
-        "link-text",
-        "hreflang",
-        "canonical"
-      ]
-    },
-    {
-      "title": "Make sure search engines can crawl and index your page",
-      "pathItems": [
-        "http-status-code",
-        "is-crawable",
-        "robots-txt",
-        "plugins"
-      ]
-    },
-    {
-      "title": "Make your page mobile-friendly",
-      "pathItems": [
-        "viewport",
-        "font-size",
-        "tap-targets"
-      ]
-    },
-    {"title": "Things to check manually","pathItems": ["structured-data"]}
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/media.json b/src/site/_data/paths/media.json
new file mode 100644
index 00000000000..c4ccc54ab24
--- /dev/null
+++ b/src/site/_data/paths/media.json
@@ -0,0 +1,42 @@
+{
+  "slug": "media",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6hi0spZGVaFnsPVEt1P0.svg",
+  "title": "i18n.paths.media.title",
+  "updated": "March 3, 2021",
+  "description": "i18n.paths.media.description",
+  "overview": "i18n.paths.media.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.media.topics.concepts",
+      "pathItems": [
+        "media-experience",
+        "media-file-basics",
+        "media-application-basics",
+        "media-streaming-basics"
+      ]
+    },
+    {
+      "title": "i18n.paths.media.topics.prepare_media_files_for_the_web",
+      "pathItems": [
+        "prepare-media",
+        "containers-and-codecs",
+        "bitrate",
+        "resolution",
+        "media-conversion",
+        "media-encryption"
+      ]
+    },
+    {
+      "title": "i18n.paths.media.topics.add_media_to_a_web_page",
+      "pathItems": [
+        "add-media",
+        "video-and-source-tags",
+        "media-accessibility",
+        "media-frameworks",
+        "pwa-with-offline-streaming",
+        "fast-playback-with-preload",
+        "debug-playback-errors"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/metrics.json b/src/site/_data/paths/metrics.json
index fdd52ad62e3..40565be8766 100644
--- a/src/site/_data/paths/metrics.json
+++ b/src/site/_data/paths/metrics.json
@@ -1,32 +1,34 @@
 {
   "slug": "metrics",
-  "cover": "/images/collections/metrics.svg",
-  "title": "Metrics",
-  "description": "Measuring performance and user experience.",
-  "overview": "User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HEYcHDKWo6u5S9Cq4etF.svg",
+  "title": "i18n.paths.metrics.title",
+  "overview": "i18n.paths.metrics.overview",
+  "description": "i18n.paths.metrics.description",
   "topics": [
     {
-      "title": "Introduction",
+      "title": "i18n.paths.metrics.topics.introduction",
       "pathItems": [
         "user-centric-performance-metrics"
       ]
     },
     {
-      "title": "Important metrics to measure",
+      "title": "i18n.paths.metrics.topics.important_metrics_to_measure",
       "pathItems": [
+        "ttfb",
         "fcp",
         "lcp",
         "fid",
         "tti",
         "tbt",
-        "cls"
+        "cls",
+        "inp"
       ]
     },
     {
-      "title": "Define your own metrics",
+      "title": "i18n.paths.metrics.topics.define_your_own_metrics",
       "pathItems": [
         "custom-metrics"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/mini-apps.json b/src/site/_data/paths/mini-apps.json
new file mode 100644
index 00000000000..f67a3021cc2
--- /dev/null
+++ b/src/site/_data/paths/mini-apps.json
@@ -0,0 +1,43 @@
+{
+  "slug": "mini-apps",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eKSmiCo2lrPZctW51u6C.svg",
+  "title": "i18n.paths.mini_apps.title",
+  "updated": "March 3, 2021",
+  "description": "i18n.paths.mini_apps.description",
+  "overview": "i18n.paths.mini_apps.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.mini_apps.topics.welcome",
+      "pathItems": [
+        "mini-app-super-apps",
+        "mini-app-about",
+        "mini-app-what-are-h5-and-quickapp"
+      ]
+    },
+    {
+      "title": "i18n.paths.mini_apps.topics.the_developer_experience_of_mini_apps",
+      "pathItems": [
+        "mini-app-devtools",
+        "mini-app-markup-styling-and-scripting",
+        "mini-app-components",
+        "mini-app-project-structure-lifecycle-and-bundling"
+      ]
+    },
+    {
+      "title": "i18n.paths.mini_apps.topics.the_wider_mini_apps_ecosystem",
+      "pathItems": [
+        "mini-app-standardization",
+        "mini-app-alternative-runtime-environments",
+        "mini-app-open-source-projects"
+      ]
+    },
+    {
+      "title": "i18n.paths.mini_apps.topics.learning_from_mini_apps",
+      "pathItems": [
+        "mini-app-programming-way",
+        "mini-app-example-project",
+        "mini-app-conclusion"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/notifications.json b/src/site/_data/paths/notifications.json
index ac999f12ce1..4b0d4d930de 100644
--- a/src/site/_data/paths/notifications.json
+++ b/src/site/_data/paths/notifications.json
@@ -1,17 +1,34 @@
 {
-  "draft": true,
   "slug": "notifications",
   "cover": "",
-  "title": "Notifications",
+  "title": "i18n.paths.notifications.title",
   "updated": "May 24, 2018",
-  "description": "Notifications",
-  "overview": "Notifications",
+  "description": "i18n.paths.notifications.description",
+  "overview": "i18n.paths.notifications.overview",
   "topics": [
     {
-      "title": "Notifications",
+      "title": "i18n.paths.notifications.topics.notifications",
       "pathItems": [
-        "codelab-notifications-get-started"
+        "push-notifications-overview",
+        "push-notifications-how-push-works",
+        "push-notifications-subscribing-a-user",
+        "push-notifications-permissions-ux",
+        "sending-messages-with-web-push-libraries",
+        "push-notifications-web-push-protocol",
+        "push-notifications-handling-messages",
+        "push-notifications-display-a-notification",
+        "push-notifications-notification-behaviour",
+        "push-notifications-common-notification-patterns",
+        "push-notifications-faq",
+        "push-notifications-common-issues-and-reporting-bugs"
+      ]
+    },
+    {
+      "title": "i18n.paths.notifications.topics.codelabs",
+      "pathItems": [
+        "push-notifications-client-codelab",
+        "push-notifications-server-codelab"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/payments.json b/src/site/_data/paths/payments.json
index 492c020b5b3..4148e7b5c36 100644
--- a/src/site/_data/paths/payments.json
+++ b/src/site/_data/paths/payments.json
@@ -1,32 +1,65 @@
 {
   "slug": "payments",
-  "cover": "/images/collections/payments.svg",
-  "title": "Web Payments",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/XrHTPjEPSDdCMduCzJxs.svg",
+  "title": "i18n.paths.payments.title",
   "updated": "May 25, 2020",
-  "description": "Build the next generation of payments on the web.",
-  "overview": "Web Payments aims to provide frictionless payment experience on the web. Learn how it works, its benefits, and get ready to integrate your payment app with Web Payments.",
+  "description": "i18n.paths.payments.description",
+  "overview": "i18n.paths.payments.overview",
   "topics": [
     {
-      "title": "Integrate Web Payments into your payment app",
+      "title": "i18n.paths.payments.topics.basics",
       "pathItems": [
-        "empowering-payment-apps-with-web-payments",
-        "life-of-a-payment-transaction",
-        "setting-up-a-payment-method"
+        "payment-and-address-form-best-practices"
+      ]
+    },
+    {
+      "title": "i18n.paths.payments.topics.web_payments",
+      "pathItems": [
+        "web-payments-overview",
+        "how-payment-ecosystem-works",
+        "how-payment-request-api-works"
       ],
       "subtopics": [
         {
-          "title": "Build a native payment app",
+          "title": "i18n.paths.payments.topics.integrate_web_payments_into_your_payment_app",
           "pathItems": [
-            "android-payment-apps-developers-guide",
-            "android-payment-apps-delegation"
+            "empowering-payment-apps-with-web-payments",
+            "life-of-a-payment-transaction",
+            "setting-up-a-payment-method"
           ]
         },
         {
-          "title": "Build a web-based payment app",
+          "title": "i18n.paths.payments.topics.build_an_android_payment_app",
           "pathItems": [
-            "web-based-payment-apps-overview",
-            "registering-a-web-based-payment-app"
+            "android-payment-apps-developers-guide",
+            "android-payment-apps-delegation"
           ]
+        },
+        {
+           "title": "i18n.paths.payments.topics.build_a_web_based_payment_app",
+           "pathItems": [
+             "web-based-payment-apps-overview",
+             "registering-a-web-based-payment-app",
+             "orchestrating-payment-transactions",
+             "handling-optional-payment-information"
+           ]
+        },
+        {
+           "title": "i18n.paths.payments.topics.secure_payment_confirmation",
+           "pathItems": [
+             {
+               "title": "Secure Payment Confirmation (developer.chrome.com)",
+               "url": "https://developer.chrome.com/articles/secure-payment-confirmation"
+             },
+             {
+               "title": "Register a Secure Payment Confirmation (developer.chrome.com)",
+               "url": "https://developer.chrome.com/articles/register-secure-payment-confirmation"
+             },
+             {
+               "title": "Authenticate with Secure Payment Confirmation (developer.chrome.com)",
+               "url": "https://developer.chrome.com/articles/authenticate-secure-payment-confirmation"
+             }
+	        ]
         }
       ]
     }
diff --git a/src/site/_data/paths/progressive-web-apps.json b/src/site/_data/paths/progressive-web-apps.json
index 34a1f781e48..38d1c14171b 100644
--- a/src/site/_data/paths/progressive-web-apps.json
+++ b/src/site/_data/paths/progressive-web-apps.json
@@ -1,13 +1,13 @@
 {
   "slug": "progressive-web-apps",
-  "cover": "/images/collections/pwa.svg",
-  "title": "Progressive Web Apps",
+  "cover": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LvIq0sbMK73ycjb2yomw.svg",
+  "title": "i18n.paths.progressive_web_apps.title",
   "updated": "February 24, 2019",
-  "description": "Websites that took all the right vitamins",
-  "overview": "In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how to build them.",
+  "description": "i18n.paths.progressive_web_apps.description",
+  "overview": "i18n.paths.progressive_web_apps.overview",
   "topics": [
     {
-      "title": "Introduction",
+      "title": "i18n.paths.progressive_web_apps.topics.introduction",
       "pathItems": [
         "what-are-pwas",
         "drive-business-success",
@@ -15,27 +15,25 @@
       ]
     },
     {
-      "title": "Reliable",
-      "pathItems": []
-    },
-    {
-      "title": "Installable",
+      "title": "i18n.paths.progressive_web_apps.topics.make_it_installable",
       "pathItems": [
-        "define-install-strategy",
-        "install-criteria"
+        "install-criteria",
+        "define-install-strategy"
       ],
       "subtopics": [
         {
-          "title": "Provide an installable experience",
+          "title": "i18n.paths.progressive_web_apps.topics.provide_an_installable_experience",
           "pathItems": [
             "add-manifest",
+            "offline-fallback-page",
             "customize-install",
             "promote-install",
-            "using-a-pwa-in-your-android-app"
+            "using-a-pwa-in-your-android-app",
+            "pwas-in-app-stores"
           ]
         },
         {
-          "title": "Codelabs",
+          "title": "i18n.paths.progressive_web_apps.topics.codelabs",
           "pathItems": [
             "codelab-make-installable"
           ]
@@ -43,26 +41,51 @@
       ]
     },
     {
-      "title": "Capable",
+      "title": "i18n.paths.progressive_web_apps.topics.create_an_app_like_user_experience",
       "pathItems": [
         "app-like-pwas",
         "progressively-enhance-your-pwa"
       ],
       "subtopics": [
         {
-          "title": "Improve your experience with PWA-exclusive features",
+          "title": "i18n.paths.progressive_web_apps.topics.pwa_exclusive_features",
           "pathItems": [
             "app-shortcuts",
             "badging-api",
-            "web-share-target"
+            "web-share-target",
+            "maskable-icon",
+            "periodic-background-sync",
+            "window-controls-overlay"
+          ]
+        }, {
+          "title": "i18n.paths.progressive_web_apps.topics.more_ways_to_improve_your_user_experience",
+          "pathItems": [
+            "get-installed-related-apps",
+            "web-share"
           ]
         }
       ]
     },
     {
-      "title": "Advanced topics",
+      "title": "i18n.paths.progressive_web_apps.topics.advanced_topics",
+      "pathItems": [
+        "manifest-updates",
+        "multi-origin-pwas",
+        "building-multiple-pwas-on-the-same-domain",
+        "offline-ux-design-guidelines"
+      ]
+    },
+    {
+      "title": "i18n.paths.progressive_web_apps.topics.case_studies",
       "pathItems": [
-        "multi-origin-pwas"
+        "deprecating-excalidraw-electron",
+        "clipchamp",
+        "gravit-designer",
+        "jdid",
+        "rakuten-24",
+        "zdf",
+        "goibibo",
+        "building-a-pwa-at-google-part-1"
       ]
     }
   ]
diff --git a/src/site/_data/paths/react.json b/src/site/_data/paths/react.json
index f14921e4b3e..778454dc8ba 100644
--- a/src/site/_data/paths/react.json
+++ b/src/site/_data/paths/react.json
@@ -1,13 +1,13 @@
 {
   "slug": "react",
-  "cover": "/images/collections/react.svg",
-  "title": "React",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/3A9YgY1kQmaTmILXiF1k.svg",
+  "title": "i18n.paths.react.title",
   "updated": "October 11, 2019",
-  "description": "Build performant and progressive React applications.",
-  "overview": "In this section you'll learn how to use built-in APIs and third-party libraries to improve the performance of your React applications.",
+  "description": "i18n.paths.react.description",
+  "overview": "i18n.paths.react.overview",
   "topics": [
     {
-      "title": "Next.js",
+      "title": "i18n.paths.react.topics.next_js",
       "pathItems": [
         "performance-as-a-default-with-nextjs",
         "route-prefetching-in-nextjs",
@@ -16,7 +16,7 @@
       ]
     },
     {
-      "title": "Create React App",
+      "title": "i18n.paths.react.topics.create_react_app",
       "pathItems": [
         "get-started-optimize-react",
         "code-splitting-suspense",
diff --git a/src/site/_data/paths/reliable.json b/src/site/_data/paths/reliable.json
index 6314b83777d..ef294dc210e 100644
--- a/src/site/_data/paths/reliable.json
+++ b/src/site/_data/paths/reliable.json
@@ -1,43 +1,58 @@
 {
   "slug": "reliable",
-  "cover": "/images/collections/reliable.svg",
-  "title": "Network reliability",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/9K5gvnLRtD0yyiJM2r0c.svg",
+  "title": "i18n.paths.reliable.title",
   "updated": "July 17, 2020",
-  "description": "See consistent, reliable performance regardless of network quality.",
-  "overview": "The modern web gives you access to a diverse global audience with a range of devices and network connections. In this section you'll learn how to provide a consistently reliable experience to all your users, wherever and however they access the internet.",
+  "description": "i18n.paths.reliable.description",
+  "overview": "i18n.paths.reliable.overview",
   "topics": [
     {
-      "title": "How to measure network reliability",
+      "title": "i18n.paths.reliable.topics.how_to_measure_network_reliability",
       "pathItems": [
         "network-connections-unreliable",
-        "identify-resources-via-network-panel"
+        "identify-resources-via-network-panel",
+        "measuring-offline-usage"
       ]
     },
     {
-      "title": "The options in your caching toolbox",
+      "title": "i18n.paths.reliable.topics.the_options_in_your_caching_toolbox",
       "pathItems": [
         "http-cache",
+        "love-your-cache",
+        "cache-api-quick-guide",
         "service-workers-cache-storage",
         "workbox",
         "service-worker-caching-and-http-caching"
       ]
     },
     {
-      "title": "How caching strategies work",
+      "title": "i18n.paths.reliable.topics.how_caching_strategies_work",
       "pathItems": [
+        "offline-cookbook",
         "precache-with-workbox",
         "runtime-caching-with-workbox",
         "handling-navigation-requests"
       ]
     },
     {
-      "title": "Advanced patterns",
+      "title": "i18n.paths.reliable.topics.advanced_patterns",
       "pathItems": [
         "resilient-search-experiences",
         "instant-navigation-experiences",
         "app-shell-ux-with-service-workers",
-        "adaptive-loading-with-service-workers"
+        "adaptive-loading-with-service-workers",
+        "offline-ux-design-guidelines",
+        "extending-workbox"
+      ]
+    },
+    {
+      "title": "i18n.paths.reliable.topics.communicate_with_workers",
+      "pathItems": [
+        "workers-overview",
+        "imperative-caching-guide",
+        "broadcast-updates-guide",
+        "two-way-communication-guide"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/secure.json b/src/site/_data/paths/secure.json
index ddfc5f24e79..c587f9ab491 100644
--- a/src/site/_data/paths/secure.json
+++ b/src/site/_data/paths/secure.json
@@ -1,25 +1,33 @@
 {
   "slug": "secure",
-  "cover": "/images/collections/secure.svg",
-  "title": "Safe and secure",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/gVpSImYQruckFe6Srvxv.svg",
+  "title": "i18n.paths.secure.title",
   "updated": "May 24, 2018",
-  "description": "Ensure your site and your users' data is secure.",
-  "overview": "Every website is vulnerable to attack—not just those handling sensitive data. In this section you'll learn simple techniques to keep your users, your content and your business secure.",
+  "description": "i18n.paths.secure.description",
+  "overview": "i18n.paths.secure.overview",
   "topics": [
     {
-      "title": "Understand security basics",
+      "title": "i18n.paths.secure.topics.understand_security_basics",
       "pathItems": [
         "security-not-scary",
         "security-attacks",
-        "same-site-same-origin"
+        "same-site-same-origin",
+        "security-headers"
       ]
     },
     {
-      "title": "Secure connections with HTTPS",
-      "pathItems": ["why-https-matters"]
+      "title": "i18n.paths.secure.topics.secure_connections_with_https",
+      "pathItems": [
+        "why-https-matters",
+        "enable-https",
+        "what-is-mixed-content",
+        "fixing-mixed-content",
+        "when-to-use-local-https",
+        "how-to-use-local-https"
+      ]
     },
     {
-      "title": "Prevent info leaks",
+      "title": "i18n.paths.secure.topics.prevent_info_leaks",
       "pathItems": [
         "browser-sandbox",
         "same-origin-policy",
@@ -30,19 +38,52 @@
       ]
     },
     {
-      "title": "Protect websites from XSS",
-      "pathItems": ["trusted-types"]
+      "title": "i18n.paths.secure.topics.protect_websites_from_xss",
+      "pathItems": ["trusted-types", "strict-csp", "securely-hosting-user-data"]
     },
     {
-      "title": "Protect users from tracking",
+      "title": "i18n.paths.secure.topics.protect_users_from_tracking",
       "pathItems": [
         "digging-into-the-privacy-sandbox",
+        "understanding-cookies",
         "samesite-cookies-explained",
         "samesite-cookie-recipes",
+        "first-party-cookie-recipes",
         "referrer-best-practices",
         "trust-tokens",
-        "user-agent-client-hints"
+        "user-agent-client-hints",
+        "schemeful-samesite",
+        "floc"
+      ]
+    },
+    {
+      "title": "i18n.paths.secure.topics.monitor_security_violations_deprecations",
+      "pathItems": [
+        "reporting-api",
+        "reporting-api-migration",
+        "network-error-logging"
+      ]
+    },
+    {
+      "title": "i18n.paths.secure.topics.help_ive_been_hacked",
+      "pathItems": [
+        "hacked",
+        "how-do-i-know-if-my-site-was-hacked",
+        "top-ways-sites-get-hacked-by-spammers",
+        "build-a-support-team",
+        "quarantine-your-site",
+        "use-search-console",
+        "assess-spam-damage",
+        "fixing-the-japanese-kayword-hack",
+        "fixing-the-gibberish-hack",
+        "fixing-the-cloaked-keywords-hack",
+        "hacked-with-malware",
+        "identify-the-vulnerability",
+        "clean-and-maintain-your-site",
+        "request-a-review",
+        "glossary-for-hacked-sites",
+        "faq-for-hacked-sites"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/site/_data/paths/vitals.json b/src/site/_data/paths/vitals.json
deleted file mode 100644
index 2542c198628..00000000000
--- a/src/site/_data/paths/vitals.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "slug": "vitals",
-  "cover": "/vitals/web-vitals.svg",
-  "title": "Web Vitals",
-  "description": "Overview of Web Vitals.",
-  "topics": [
-    {
-      "title": "Web Vitals",
-      "pathItems": [
-        "vitals"
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/site/_data/paths/web-dev-basics-one.json b/src/site/_data/paths/web-dev-basics-one.json
new file mode 100644
index 00000000000..bb115a00c38
--- /dev/null
+++ b/src/site/_data/paths/web-dev-basics-one.json
@@ -0,0 +1,176 @@
+{
+  "slug": "web-dev-basics-one",
+  "cover": "image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/9K5gvnLRtD0yyiJM2r0c.svg",
+  "title": "i18n.paths.web-dev-basics-one.title",
+  "updated": "February 1, 2022",
+  "description": "i18n.paths.web-dev-basics-one.description",
+  "overview": "i18n.paths.web-dev-basics-one.overview",
+  "draft": true,
+  "topics": [
+    {
+      "title": "i18n.paths.web-dev-basics-one.topics.web",
+      "pathItems": [
+        {
+          "title": "Web development basics",
+          "url": "#"
+        },
+        {
+          "title": "The role of HTML, CSS, and JavaScript on a web page",
+          "url": "https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards"
+        },
+        {
+          "title": "The importance of accessibility",
+          "url": "/what-is-accessibility"
+        },
+        {
+          "title": "The value of web security and privacy",
+          "url": "/security-not-scary"
+        },
+        {
+          "title": "Preview the capabilities of the modern web platform",
+          "url": "https://codelabs.developers.google.com/codelabs/web-capabilities"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.web-dev-basics-one.topics.html",
+      "pathItems": [
+        {
+          "title": "Introduction to HTML",
+          "url": "#"
+        },
+        {
+          "title": "Write and preview HTML code with a code editor",
+          "url": "#"
+        },
+        {
+          "title": "Learn basic HTML elements",
+          "url": "#"
+        },
+        {
+          "title": "Structure an HTML web page",
+          "url": "#"
+        },
+        {
+          "title": "Accessible HTML with semantic tags",
+          "url": "https://www.youtube.com/watch?v=g2tzEil5TL0"
+        },
+        {
+          "title": "Learn additional HTML elements",
+          "url": "additional-html-elements"
+        },
+        {
+          "title": "Embed media content with video and audio tags",
+          "url": "https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.web-dev-basics-one.topics.css",
+      "pathItems": [
+        {
+          "title": "An introduction to CSS",
+          "url": "#"
+        },
+        {
+          "title": "Write CSS selectors and apply styles to a web page",
+          "url": "#"
+        },
+        {
+          "title": "Style text to improve legibility",
+          "url": "#"
+        },
+        {
+          "title": "Create simple page layouts using the box model",
+          "url": "#"
+        },
+        {
+          "title": "Create layouts with Flexbox",
+          "url": "/learn/css/flexbox"
+        },
+        {
+          "title": "Create layouts with Grid",
+          "url": "/learn/css/grid"
+        },
+        {
+          "title": "Simple page layouts with Flexbox and Grid",
+          "url": "https://www.youtube.com/watch?v=qm0IfG1GyZU"
+        },
+        {
+          "title": "Choose and set color themes",
+          "url": "/learn/css/color"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.web-dev-basics-one.topics.javascript",
+      "pathItems": [
+        {
+          "title": "Introduction to JavaScript",
+          "url": "#"
+        },
+        {
+          "title": "Learn about different data types, variables, operators and conditional statements",
+          "url": "#"
+        },
+        {
+          "title": "Organize and store data in arrays using Array methods",
+          "url": "#"
+        },
+        {
+          "title": "Control the flow of a program with loops",
+          "url": "#"
+        },
+        {
+          "title": "Control the flow of a program with functions",
+          "url": "#"
+        },
+        {
+          "title": "Understand global and local variable scoping",
+          "url": "#"
+        },
+        {
+          "title": "Use objects to model real-world items",
+          "url": "#"
+        },
+        {
+          "title": "Use classes to model real-world items",
+          "url": "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.web-dev-basics-one.topics.dom",
+      "pathItems": [
+        {
+          "title": "An introduction to DOM manipulation",
+          "url": "#"
+        },
+        {
+          "title": "Access the DOM",
+          "url": "https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction"
+        },
+        {
+          "title": "Access the DOM and read information on a web page",
+          "url": "#"
+        },
+        {
+          "title": "Manipulate and insert content on a web page",
+          "url": "#"
+        },
+        {
+          "title": "The basics of cross-site Scripting (XSS)",
+          "url": "#"
+        },
+        {
+          "title": "Listen for web page events",
+          "url": "https://developer.mozilla.org/docs/Web/Events/Event_handlers"
+        },
+        {
+          "title": "Interact with the DOM in response to web page events",
+          "url": "#"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/paths/webassembly.json b/src/site/_data/paths/webassembly.json
new file mode 100644
index 00000000000..76f5e103c37
--- /dev/null
+++ b/src/site/_data/paths/webassembly.json
@@ -0,0 +1,82 @@
+{
+  "slug": "webassembly",
+  "cover": "image/8WbTDNrhLsU0El80frMBGE4eMCD3/8Gm7xljiB4j6K5VeQNMV.svg",
+  "title": "i18n.paths.webassembly.title",
+  "updated": "April 28, 2023",
+  "description": "i18n.paths.webassembly.description",
+  "overview": "i18n.paths.webassembly.overview",
+  "topics": [
+    {
+      "title": "i18n.paths.webassembly.topics.introduction",
+      "pathItems": [
+        "what-is-webassembly",
+        "compiling-mkbitmap-to-webassembly"
+      ]
+    },
+    {
+      "title": "i18n.paths.webassembly.topics.emscripten",
+      "pathItems": [
+        "drawing-to-canvas-in-emscripten",
+        "embind",
+        "emscripten-embedding-js-snippets",
+        "emscripten-npm"
+      ]
+    },
+    {
+      "title": "i18n.paths.webassembly.topics.coding",
+      "pathItems": [
+        "webassembly-threads",
+        "webassembly-feature-detection",
+        "loading-wasm",
+        "asyncify",
+        {
+          "title": "Using WebGPU with Emscripten",
+          "url": "https://developer.chrome.com/blog/webgpu-cross-platform/"
+        }
+      ]
+    },
+    {
+      "title": "i18n.paths.webassembly.topics.debugging",
+      "pathItems": [
+        {
+          "title": "Debugging WebAssembly with modern tools",
+          "url": "https://developer.chrome.com/blog/wasm-debugging-2020/"
+        },
+        {
+          "title": "Debugging WebAssembly faster",
+          "url": "https://developer.chrome.com/blog/faster-wasm-debugging/"
+        },
+        {
+          "title": "WebAssembly memory inspection",
+          "url": "https://developer.chrome.com/docs/devtools/memory-inspector/#wasm"
+        },
+        "webassembly-memory-debugging"
+      ]
+    },
+    {
+      "title": "i18n.paths.webassembly.topics.practice",
+      "pathItems": [
+        "wasm-libraries",
+        {
+          "title": "SQLite Wasm in the browser backed by the Origin Private File System",
+          "url": "https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/"
+        },
+        {
+          "title": "Replacing a hot path in your app's JavaScript with WebAssembly",
+          "url": "https://developer.chrome.com/blog/hotpath-with-wasm/"
+        },
+        "emscripting-a-c-library",
+        "wasm-av1"
+      ]
+    },
+    {
+      "title": "i18n.paths.webassembly.topics.case-studies",
+      "pathItems": [
+        "wordpress-playground",
+        "porting-libusb-to-webusb",
+        "porting-gphoto2-to-the-web",
+        "earth-webassembly"
+      ]
+    }
+  ]
+}
diff --git a/src/site/_data/patterns.js b/src/site/_data/patterns.js
new file mode 100644
index 00000000000..3441762c5c6
--- /dev/null
+++ b/src/site/_data/patterns.js
@@ -0,0 +1,13 @@
+const patterns = require('../../lib/patterns');
+
+/**
+ * @fileoverview This module gets the Code Patterns from the patterns.js module
+ *   and exposes them for the use in eleventy. The code work is done outside
+ *   of _data to avoid multiple executions by eleventy (_data will get loaded
+ *   twice if it is also required as a module outside of eleventy process).
+ */
+
+module.exports = {
+  patterns: patterns.patterns(),
+  sets: patterns.sets(),
+};
diff --git a/src/site/_data/podcasts.js b/src/site/_data/podcasts.js
index e49e0efaab0..11f9a07f4ea 100644
--- a/src/site/_data/podcasts.js
+++ b/src/site/_data/podcasts.js
@@ -30,4 +30,14 @@ module.exports = [
       and more.`,
     thumbnail: '/images/podcasts/state-of-the-web.jpg',
   },
+  {
+    title: 'Search Off The Record',
+    url: 'https://search-off-the-record.libsyn.com/',
+    description: `Search Off the Record takes you behind the scenes of Google Search
+      and its inner workings. The folks from the Search Relations
+      team will give you background info on the decision-making behind launches, 
+      and the projects Google Search teams are working on. They will share fun stories
+      as well as their working life at Google and discussions in the SEO community.`,
+    thumbnail: '/images/podcasts/search-off-the-record.jpg',
+  },
 ];
diff --git a/src/site/_data/postHost.js b/src/site/_data/postHost.js
index 5c1e5574004..bf6733fa24a 100644
--- a/src/site/_data/postHost.js
+++ b/src/site/_data/postHost.js
@@ -28,7 +28,7 @@ const data = require('../content/en/learn/learn.11tydata.js')();
 module.exports = function () {
   const out = {};
 
-  const paths = data.learn.paths;
+  const paths = data.learn.build_excellent;
   paths.forEach((path) => {
     path.topics.forEach((topic) => {
       (topic.pathItems || []).forEach((id) => {
diff --git a/src/site/_data/process.js b/src/site/_data/process.js
new file mode 100644
index 00000000000..b5e204fab31
--- /dev/null
+++ b/src/site/_data/process.js
@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Expose Node's process to eleventy's nunjucks templates.
+ */
+
+module.exports = {
+  env: process.env,
+};
diff --git a/src/site/_data/showsData.json b/src/site/_data/showsData.json
new file mode 100644
index 00000000000..78cc3ae5d63
--- /dev/null
+++ b/src/site/_data/showsData.json
@@ -0,0 +1,23 @@
+{
+  "http-203": {
+    "playlistId": "PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9"
+  },
+  "mother-language-day": {
+    "playlistId": "PLNYkxOF6rcICpDJelUzmahpycz3ID6MZY"
+  },
+  "gui-challenges": {
+    "playlistId": "PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ"
+  },
+  "designing-in-the-browser": {
+    "playlistId": "PLNYkxOF6rcIDI0QtJvW6vKonTxn6azCsD"
+  },
+  "web-dev-live-day-1": {
+    "playlistId": "PLNYkxOF6rcIDC0-BiwSL52yQ0n9rNozaF"
+  },
+  "web-dev-live-day-2": {
+    "playlistId": "PLNYkxOF6rcIBhuGsbO6t8-OBE5-fVPe7K"
+  },
+  "web-dev-live-day-3": {
+    "playlistId": "PLNYkxOF6rcIDJHOcBzho38p6WTn3vESvQ"
+  }
+}
diff --git a/src/site/_data/site.js b/src/site/_data/site.js
index 4090451251e..5206ab7fe6b 100644
--- a/src/site/_data/site.js
+++ b/src/site/_data/site.js
@@ -16,42 +16,35 @@
 
 const path = require('path');
 const locale = require('../../../shared/locale');
+const {PAGINATION_COUNT} = require('../_utils/constants');
 
 module.exports = {
   env: process.env.ELEVENTY_ENV || 'dev',
+  isProd: () => process.env.ELEVENTY_ENV === 'prod',
   percy: process.env.PERCY || false,
   contentDir: path.join('src/site/content/', process.env.ELEVENTY_LANG || ''),
   title: 'web.dev',
   titleVariation: 'Home',
   defaultLocale: locale.defaultLocale,
   url: 'https://web.dev',
+  buildDate: new Date(),
   repo: 'https://github.com/GoogleChrome/web.dev',
   subscribe: 'https://web.dev/newsletter',
   subscribeForm:
     'https://services.google.com/fb/submissions/591768a1-61a6-4f16-8e3c-adf1661539da/',
-  thumbnail: '/images/social.png',
+  thumbnail: 'image/FNkVSAX8UDTTQWQkKftSgGe9clO2/uZ3hQS2EPrA9csOgkoXI.png',
   isBannerEnabled: true,
   banner:
-    "Have a voice in guiding the future of Google's developer brands. [Share your thoughts in our survey](https://google.qualtrics.com/jfe/form/SV_2oE4GCkTH5QVVNr?PT=3).",
-  // Note that the imageCdn value is only used when we do a production build
-  // of the site. Otherwise all image paths are local. This means you can
-  // develop locally without having to mess with the CDN at all.
-  imageCdn: 'https://webdev.imgix.net',
-  gitlocalize: 'https://gitlocalize.com/repo/3847/',
+    'Thanks for tuning in to Google I/O. [Watch the Chrome content on-demand.](https://io.google/2023/program/?q=web-topic,web/&utm_source=web&utm_medium=embedded_marketing&utm_campaign=hpp_ondemand_banner&utm_content=)',
+  paginationCount: PAGINATION_COUNT,
+  imgixDomain: 'web-dev.imgix.net',
+  bucket: 'web-dev-uploads',
+  gitlocalize: 'https://gitlocalize.com/repo/6062/',
   analytics: {
     ids: {
-      prod: 'UA-126406676-2',
-      // TODO (robdodson): These properties exist in GA but we don't use them.
-      // Adding a note to inject these into pages when we create a fancier
-      // staging environment.
-      staging: 'UA-126406676-3',
-      notFound: 'UA-126406676-4',
+      gtm: 'GTM-MZWCJPP',
     },
-    dimensions: {
-      SIGNED_IN: 'dimension1',
-      TRACKING_VERSION: 'dimension5',
-    },
-    version: 3,
+    version: 15,
   },
   firebase: {
     prod: {
@@ -77,4 +70,5 @@ module.exports = {
   maps: {
     apiKey: 'AIzaSyCc27LkiT_ZvmEszthj__edZEzB7B7976s',
   },
+  recaptchaSiteKey: '6Lfqf9YdAAAAAKUVvj6y53E_tMMlnj8dt1fpo-FV',
 };
diff --git a/src/site/_data/tagsData.json b/src/site/_data/tagsData.json
index 1fcec70a392..b1e91ff0b88 100644
--- a/src/site/_data/tagsData.json
+++ b/src/site/_data/tagsData.json
@@ -1,228 +1,5 @@
 {
-  "3d": {
-    "title": "3D",
-    "description": "Our latest news, updates, and stories about 3D."
-  },
-  "accessibility": {
-    "title": "Accessibility"
-  },
-  "amp": {
-    "title": "AMP",
-    "description": "Our latest news, updates, and stories about AMP."
-  },
-  "analytics": {
-    "title": "Analytics"
-  },
-  "animations": {
-    "title": "Animations"
-  },
-  "audio": {
-    "title": "Audio"
-  },
-  "augmented-reality": {
-    "title": "Augmented Reality"
-  },
-  "canvas": {
-    "title": "Canvas"
-  },
-  "capabilities": {
-    "title": "Capabilities",
-    "description": "Our latest news, updates, and stories about new web capabilities (aka Project Fugu)."
-  },
-  "case-study": {
-    "title": "Case Study",
-    "description": "Our latest news, updates, and stories about case studies."
-  },
-  "cast": {
-    "title": "Cast"
-  },
-  "chrome-ux-report": {
-    "title": "Chrome UX Report",
-    "description": "Our latest news, updates, and stories about Chrome UX Report."
-  },
-  "chrome-dev-summit": {
-    "title": "Chrome Dev Summit",
-    "description": "Our latest news, updates, and stories about Chrome Dev Summit."
-  },
-  "content-security-policy": {
-    "title": "Content Security Policy"
-  },
-  "cookies": {
-    "title": "Cookies"
-  },
-  "cors": {
-    "title": "CORS",
-    "description": "Our latest news, updates, and stories about CORS."
-  },
-  "css": {
-    "title": "CSS",
-    "description": "Our latest news, updates, and stories about CSS."
-  },
-  "devtools": {
-    "title": "DevTools",
-    "description": "Our latest news, updates, and stories about DevTools."
-  },
-  "dom": {
-    "title": "DOM",
-    "description": "Our latest news, updates, and stories about DOM."
-  },
-  "encryption": {
-    "title": "Encryption"
-  },
-  "engineering-blog": {
-    "title": "Engineering Blog",
-    "description": "Our latest news, updates, and stories from our engineering team."
-  },
-  "feature-policy": {
-    "title": "Feature Policy"
-  },
-  "file-system": {
-    "title": "File System"
-  },
-  "fonts": {
-    "title": "Fonts"
-  },
-  "forms": {
-    "title": "Forms"
-  },
-  "games": {
-    "title": "Games"
-  },
-  "graphics": {
-    "title": "Graphics"
-  },
-  "houdini": {
-    "title": "Houdini",
-    "description": "Our latest news, updates, and stories about Houdini."
-  },
-  "html": {
-    "title": "HTML"
-  },
-  "identity": {
-    "title": "Identity"
-  },
-  "images": {
-    "title": "Images"
-  },
-  "install": {
-    "title": "Install"
-  },
-  "intl": {
-    "title": "Intl"
-  },
-  "iot": {
-    "title": "IoT",
-    "description": "Our latest news, updates, and stories about IoT."
-  },
-  "javascript": {
-    "title": "JavaScript",
-    "description": "Our latest news, updates, and stories about JavaScript."
-  },
-  "layout": {
-    "title": "Layout"
-  },
-  "lighthouse": {
-    "title": "Lighthouse",
-    "description": "Our latest news, updates, and stories about Lighthouse."
-  },
-  "media": {
-    "title": "Media"
-  },
-  "media-queries": {
-    "title": "Media Queries"
-  },
-  "metrics": {
-    "title": "Metrics"
-  },
-  "mobile": {
-    "title": "Mobile"
-  },
-  "modules": {
-    "title": "Modules"
-  },
-  "monetization": {
-    "title": "Monetization"
-  },
-  "network": {
-    "title": "Network"
-  },
-  "node": {
-    "title": "Node"
-  },
-  "notifications": {
-    "title": "Notifications"
-  },
-  "offline": {
-    "title": "Offline"
-  },
-  "origin-trials": {
-    "title": "Origin Trials"
-  },
-  "payments": {
-    "title": "Payments"
-  },
-  "performance": {
-    "title": "Performance"
-  },
-  "permissions": {
-    "title": "Permissions"
-  },
-  "progressive-web-apps": {
-    "title": "Progressive Web Apps",
-    "description": "Our latest news, updates, and stories about Progressive Web Apps."
-  },
-  "privacy": {
-    "title": "Privacy"
-  },
-  "puppeteer": {
-    "title": "Puppeteer",
-    "description": "Our latest news, updates, and stories about Puppeteer."
-  },
-  "rendering": {
-    "title": "Rendering"
-  },
-  "security": {
-    "title": "Security"
-  },
-  "seo": {
-    "title": "SEO",
-    "description": "Our latest news, updates, and stories about SEO."
-  },
-  "service-worker": {
-    "title": "Service Worker"
-  },
-  "storage": {
-    "title": "Storage"
-  },
-  "svg": {
-    "title": "SVG",
-    "description": "Our latest news, updates, and stories about SVG."
-  },
-  "testing": {
-    "title": "Testing"
-  },
-  "tools": {
-    "title": "Tools"
-  },
-  "ux": {
-    "title": "UX",
-    "description": "Our latest news, updates, and stories about UX."
-  },
-  "virtual-reality": {
-    "title": "Virtual Reality"
-  },
-  "web-assembly": {
-    "title": "Web Assembly"
-  },
-  "web-bundles": {
-    "title": "Web Bundles"
-  },
-  "web-vitals": {
-    "title": "Web Vitals",
-    "description": "Our latest news, updates, and stories about Web Vitals."
-  },
-  "webxr": {
-    "title": "WebXR",
-    "description": "Our latest news, updates, and stories about WebXR."
+  "scale-on-web": {
+    "image": "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cBy8xMTOQzYOt6Ru4C0e.svg"
   }
 }
diff --git a/src/site/_drafts/_template-audit-post/index.md b/src/site/_drafts/_template-audit-post/index.md
index eb4f2c06373..45db5403fae 100644
--- a/src/site/_drafts/_template-audit-post/index.md
+++ b/src/site/_drafts/_template-audit-post/index.md
@@ -21,8 +21,8 @@ flags [pages that do the thing the audit checks for]:
   bottom border. The width should match that of the top and bottom borders.
 -->
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="audit-slug.png" alt="Lighthouse audit showing [the problem]">
+<figure>
+  <img src="audit-slug.png" alt="Lighthouse audit showing [the problem]">
 </figure>
 
 Brief explanation of the audit. It may include various elements as needed:
@@ -54,5 +54,5 @@ When a fix involves multiple steps, provide a codelab instead of sample code.
   audit always comes first. If there are no links other than the source code,
   present it as a paragraph rather than an unordered list.
 -->
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/…/audit-name.js" rel="noopener">Source code for **Audit name** audit</a>
+- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/core/audits/…/audit-name.js" rel="noopener">Source code for **Audit name** audit</a>
 - [Link to another resource](#)
diff --git a/src/site/_drafts/_template-codelab/index.md b/src/site/_drafts/_template-codelab/index.md
index 6e802138e0e..e8d3b3e268c 100644
--- a/src/site/_drafts/_template-codelab/index.md
+++ b/src/site/_drafts/_template-codelab/index.md
@@ -74,11 +74,11 @@ synchronized with every other person using the application. 🐈
 - Open the DevTools by pressing `CMD + OPTION + i` / `CTRL + SHIFT + i`.
 - Click on the **Network** tab.
 
-<img class="w-screenshot" src="./network.png" alt="Network tab">
+<img src="./network.png" alt="Network tab">
 
 Make sure `Disable Cache` is checked and reload the app.
 
-<img class="w-screenshot" src="./main-bundle.png" alt="Original bundle size of 992 KB">
+<img src="./main-bundle.png" alt="Original bundle size of 992 KB">
 
 Almost 1 MB worth of JavaScript is being shipped to load this simple application!
 
@@ -167,7 +167,7 @@ Not as cute as seeing some kittens 🐱, but incredibly helpful nonetheless.
 Hovering over any of the packages shows its size represented in three
 different ways:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <thead>
       <tr>
diff --git a/src/site/_drafts/_template-post/hero.jpg b/src/site/_drafts/_template-post/hero.jpg
deleted file mode 100644
index cd3b60fe3a3..00000000000
Binary files a/src/site/_drafts/_template-post/hero.jpg and /dev/null differ
diff --git a/src/site/_drafts/_template-post/index.md b/src/site/_drafts/_template-post/index.md
index 2220d001d86..867d89f872b 100644
--- a/src/site/_drafts/_template-post/index.md
+++ b/src/site/_drafts/_template-post/index.md
@@ -21,8 +21,8 @@ date: 2019-10-31
 
 # !!! IMPORTANT: If your post does not contain a hero image it will not appear
 # on the homepage.
-# Hero images should be 3200 x 920.
-hero: hero.jpg
+# Hero images should be 3200 x 960.
+hero: image/admin/jAI014ZfN96soXr2QZRQ.jpg
 # You can adjust the fit of your hero image with this property.
 # Values: contain | cover (default)
 # hero_fit: contain
@@ -63,6 +63,11 @@ tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - accessibility
   - ux
+
+# You can provide an optional Stack Overflow tag to be used at the end of the
+# post in an "Ask on Stack Overflow" note.
+# Find the official list of tags at https://stackoverflow.com/tags.
+# stack_overflow_tag: service-worker
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
@@ -91,9 +96,9 @@ scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
 sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
 tempus enim.
 
-<figure class="w-figure w-figure--fullbleed">
+<figure data-size="full">
   <img src="a.jpg" alt="">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+  <figcaption>
     Large image.
   </figcaption>
 </figure>
@@ -106,9 +111,9 @@ quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
 ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
 quam sem.
 
-<figure class="w-figure">
+<figure>
   <img src="image-small.png" alt="" width="400">
-  <figcaption class="w-figcaption">
+  <figcaption>
     Small image.
   </figcaption>
 </figure>
@@ -131,9 +136,9 @@ quam sem.
 
 ## Image, Inline
 
-<figure class="w-figure w-figure--inline-right">
-  <img class="w-screenshot" src="image-inline.png" alt="" width="200">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  <img src="image-inline.png" alt="" width="200">
+  <figcaption>
     Inline right, outlined image.
   </figcaption>
 </figure>
@@ -152,9 +157,9 @@ augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
 aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
 velit. Morbi at quam sem.
 
-<figure class="w-figure w-figure--inline-left">
-  <img class="w-screenshot" src="image-inline.png" alt="" width="200">
-  <figcaption class="w-figcaption">
+<figure data-float="left">
+  <img src="image-inline.png" alt="" width="200">
+  <figcaption>
     Inline left, outlined image.
   </figcaption>
 </figure>
@@ -173,9 +178,9 @@ augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
 aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
 velit. Morbi at quam sem.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-  <figcaption class="w-figcaption">
+<figure>
+  <img src="image-screenshot.png" alt="">
+  <figcaption>
     Filled screenshot.
   </figcaption>
 </figure>
@@ -192,7 +197,7 @@ quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
 ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
 quam sem.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <thead>
       <tr>
@@ -266,9 +271,9 @@ quam sem.
   <li>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
   sit amet ullamcorper.
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-    <figcaption class="w-figcaption">
+  <figure>
+    <img src="image-screenshot.png" alt="">
+    <figcaption>
       Filled screenshot.
     </figcaption>
   </figure>
@@ -313,9 +318,9 @@ quam sem.
   <li>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
   sit amet ullamcorper.
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-    <figcaption class="w-figcaption">
+  <figure>
+    <img src="image-screenshot.png" alt="">
+    <figcaption>
       Filled screenshot.
     </figcaption>
   </figure>
@@ -481,23 +486,24 @@ quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
 ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
 quam sem.
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">30<sub>%</sub></p>
+    <p>Lower cost per conversion</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
+  <div class="stats__item">
+    <p class="stats__figure">13<sub>%</sub></p>
+    <p>Higher CTR</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">4<sub class="w-stat__sub">x</sub></p>
-    <p class="w-stat__desc">Faster load times</p>
+  <div class="stats__item">
+    <p class="stats__figure">4<sub>x</sub></p>
+    <p>Faster load times</p>
   </div>
 </div>
 
-<div class="w-text--center">
-  <a href="https://example.com/some.pdf" class="w-button w-button--with-icon" data-icon="file_download">
+<div class="all-center">
+  <a class="button" href="https://example.com/some.pdf">
+    {% include "icons/download.svg" %}
     Download case study
   </a>
 </div>
@@ -509,3 +515,10 @@ porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
 quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
 ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
 quam sem.
+
+## Acknowledgements
+
+This article was reviewed by [reviewer #1](#) and [reviewer #2](#).
+Thanks to [external contributor #1](#) and [external contributor #2](#) for
+their work on TODO.
+Hero image by [unsplash author](#) on [Unsplash](#).
diff --git a/src/site/_drafts/_template-self-assessment/index.md b/src/site/_drafts/_template-self-assessment/index.md
index 1ef8bc6e465..7b5e6f293c1 100644
--- a/src/site/_drafts/_template-self-assessment/index.md
+++ b/src/site/_drafts/_template-self-assessment/index.md
@@ -11,7 +11,7 @@ tags:
 
 Include a self-assessment in your post using this short code:
 
-{% Assessment page, 'my-first-self-assessment' %}
+{% Assessment 'my-first-self-assessment' %}
 
 Rename the file and the shortcode argument
 so it conveys the topic of your assessment.
diff --git a/src/site/_drafts/_template-self-assessment/my-first-self-assessment.assess.yml b/src/site/_drafts/_template-self-assessment/my-first-self-assessment.assess.yml
index 7cb64f8c400..9eeac956389 100644
--- a/src/site/_drafts/_template-self-assessment/my-first-self-assessment.assess.yml
+++ b/src/site/_drafts/_template-self-assessment/my-first-self-assessment.assess.yml
@@ -1,5 +1,5 @@
 setLeader: Test your knowledge of resource optimization
-height: 25rem
+height: unset
 tabLabel: question
 questions:
   - type: multiple-choice
diff --git a/src/site/_drafts/build-a-custom-performance-analysis-tool/index.md b/src/site/_drafts/build-a-custom-performance-analysis-tool/index.md
index 074ca1c269e..51b9b3ede2d 100644
--- a/src/site/_drafts/build-a-custom-performance-analysis-tool/index.md
+++ b/src/site/_drafts/build-a-custom-performance-analysis-tool/index.md
@@ -53,7 +53,7 @@ You can now return the FCP in the response text. The new code will look like thi
 
 ![image](step1.png)
 
-Now reload `labtest.html` and click the button. You should see the time taken to [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint) (FCP) of the first load in a window alert. If you feel that the FCP is still quite fast, this is because you haven't throttled the network and CPU yet. Insert this before the two lines you just added:
+Now reload `labtest.html` and click the button. You should see the time taken to [First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/) (FCP) of the first load in a window alert. If you feel that the FCP is still quite fast, this is because you haven't throttled the network and CPU yet. Insert this before the two lines you just added:
 
 ```js
 //throttle network and CPU
@@ -91,7 +91,7 @@ And the output should look like this:
 ![image](step2_result.png)
 
 Instead of measuring the sum of the full page loads, you can also sum up FCP if you like, or whatever else you consider most meaningful.
-Now you'll inject JavaScript into the pages loaded via Puppeteer to extract the sum of [long tasks](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API): tasks that take 50 milliseconds or more. Define a function to be executed for new documents to measure long tasks and track them on a global variable:
+Now you'll inject JavaScript into the pages loaded via Puppeteer to extract the sum of [long tasks](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API): tasks that take 50 milliseconds or more. Define a function to be executed for new documents to measure long tasks and track them on a global variable:
 
 ```js
 page.evaluateOnNewDocument(function() {
@@ -122,7 +122,7 @@ We strongly recommend that you build measurement scripts like this for your most
 ## Build the field test
 
 While lab data is always helpful, you need to collect the same metrics from real usage, and potentially also make the data visible to stakeholders and decision makers.
-In your project, open the empty file  `perfoverlay.js`. You'll start by creating a new [PerformanceObserver](https://developers.google.com/web/updates/2016/06/performance-observer) and tell it what to measure. For simplicity you'll stick to the same metrics you collected in the lab test, but you can easily extend this for your own projects. For now you'll listen for FCP, long tasks and load events. Add the following code to the empty file `perfoverlay.js`:
+In your project, open the empty file  `perfoverlay.js`. You'll start by creating a new [PerformanceObserver](https://developer.chrome.com/blog/performance-observer) and tell it what to measure. For simplicity you'll stick to the same metrics you collected in the lab test, but you can easily extend this for your own projects. For now you'll listen for FCP, long tasks and load events. Add the following code to the empty file `perfoverlay.js`:
 
 ```js
 const observer = new PerformanceObserver((list) => {
diff --git a/src/site/_drafts/digging-into-the-privacy-sandbox/index.md b/src/site/_drafts/digging-into-the-privacy-sandbox/index.md
deleted file mode 100644
index 157f6e90a5f..00000000000
--- a/src/site/_drafts/digging-into-the-privacy-sandbox/index.md
+++ /dev/null
@@ -1,300 +0,0 @@
----
-title: Digging into the Privacy Sandbox
-subhead: The Privacy Sandbox is a series of proposals to satisfy third-party use cases without third-party cookies or other tracking mechanisms. The proposals need your feedback.
-authors:
-  - samdutton
-date: 2020-03-31
-description: The Privacy Sandbox is a series of proposals to satisfy third-party use cases without third-party cookies or other tracking mechanisms. The proposals need your feedback!
-tags:
-  - blog
-  - privacy
-  - security
-  - trust and safety
-draft: true
----
-
-## Summary
- + The [Privacy Sandbox proposals](#proposals) need your feedback.
- + Please comment on the proposals by filing issues on the repositories linked to below.
-+ There's a [glossary for the proposals](#glossary) at the end of this post.
-
-{% YouTube 'WnCKlNE52tc' %}
-
-## Why does the web use third-party code?
-
-Websites use services from other companies to provide analytics, serve video and do lots of other useful stuff. Composability is one of the web's [superpowers](https://youtu.be/WnCKlNE52tc?t=930).
-
-Most notably, ads are included in web pages via third-party JavaScript and iframes. Ad views, clicks and conversions are tracked via third-party cookies and scripts. That's how most of the web is funded.
-
-Relevant ads are [less annoying to users and more profitable for publishers](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf) (the people running ad-supported websites). Third party ad targeting tools make ad space more valuable to advertisers (the people who purchase ad space on websites) which in turn increases revenue for ad-supported websites.
-
-Reliable measurement and anti-fraud protection are also crucial. Advertisers and site owners must be able to distinguish between malicious bots and trustworthy humans. If advertisers can't reliably tell which ads work well, they spend less, so site publishers get less revenue. Many third party services currently use techniques such as [device fingerprinting](./#fingerprinting) to combat fraud.
-
-The problem is… privacy.
-
-## The current state of privacy on the web
-
-When you visit a website you may not be aware of the third parties involved and what they're doing with your data. Even publishers and web developers may not understand the entire third-party supply chain.
-
-Ad targeting, conversion measurement, and other use cases currently rely on establishing stable cross-site identity. Historically this has been done by using [third-party cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Third-party_cookies), but browsers have begun to restrict access to these cookies, and there's been an [increase  in the use of other mechanisms](https://github.com/bslassey/privacy-budget/issues/6) for cross-site user tracking—such as covert browser storage, device fingerprinting, and requests for personal information like email addresses.
-
-This is a dilemma for the web. How can we support legitimate third-party use cases without enabling users to be tracked across sites?
-
-In particular, how can websites fund content by enabling third parties to show ads and measure ad performance—but not allow individual users to be profiled? How can advertisers verify real users, and site owners check that users are trustworthy, without resorting to dark patterns such as device fingerprinting?
-
-The way things work at the moment can be problematic for everyone concerned, not just users. For publishers and advertisers, tracking identity and using a variety of non-native, un-standardised third-party solutions can add to technical debt, code complexity and data risk.
-
-Users, developers, publishers, and advertisers shouldn't have to worry.
-
-## Introducing the Privacy Sandbox
-
-The [Privacy Sandbox](https://www.blog.google/products/chrome/building-a-more-private-web/) introduces a set of privacy-preserving APIs to accomplish tasks that use tracking today.
-
-The Privacy Sandbox APIs require web browsers to take on a new role. Rather than working with limited tools and protections, the APIs enable the user's browser to act on their behalf to ensure that data is never shared without their knowledge and consent. The APIs enable use cases such as ad targeting and conversion measurement, but without revealing individual private and personal information.
-
-This is a shift in direction for browsers. The Privacy Sandbox authors' vision of the future has browsers providing specific tools to target specific use cases, while preserving user privacy.
-
-In order to successfully transition away from third-party cookies the Privacy Sandbox authors need your support. The [explainers](https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html) need feedback from publishers, developers, advertisers, and advertising platforms, to suggest missing use cases and more-private ways to accomplish their goals.
-
-### Privacy sandbox proposals {: #proposals }
-
-Please comment on the explainers by filing issues against each repository:
-
-+   [Privacy Model for the Web](https://github.com/michaelkleber/privacy-model)<br>
-Establish the range of web activity across which the user's browser can let websites treat a person as having a single identity. Identify the ways in which information can move across identity boundaries without compromising that separation.
-+   [Privacy Budget](https://github.com/bslassey/privacy-budget)<br>
-Limit the total amount of sensitive data that sites can access. Update APIs to reduce the amount of sensitive data revealed. Make access to sensitive data measurable.
-+   [Trust Token API](https://github.com/dvorak42/trust-token-api)<br>
-Enable an origin that trusts a user to issue them with cryptographic tokens which are stored by the user's browser and then used in other contexts for authentication.
-+   [Willful IP Blindness](https://github.com/bslassey/ip-blindness)<br>
-Enable sites to 'blind' themselves to IP addresses and other network data so they can avoid consuming privacy budget.
-+   [First-Party Sets](https://github.com/krgovind/first-party-sets/)<br>
-Allow related domain names owned by the same entity (such as apple.com and icloud.com) to declare themselves as the same first party.
-+   [Aggregated Reporting API](https://github.com/csharrison/aggregate-reporting-api)<br>
-Provide privacy preserving ad reach measurement.
-+   [Event-level conversion measurement](https://github.com/csharrison/conversion-measurement-api)<br>
-Provide privacy preserving [click-through-conversion](#glossary-ctc) measurement.
-+   [Federated Learning of Cohorts](https://github.com/jkarlin/floc)<br>
-Target ads without cross-site user tracking.
-+   [TURTLEDOVE](https://github.com/michaelkleber/turtledove)<br>
-Enable the user's browser, not the advertiser, to hold information about what a person is interested in. Enable some form of on-device 'auction' to choose the most relevant ads.
-
-You can dive into the explainers right away, and over the coming months we'll be publishing posts about each of the API proposals.
-
-## Use cases and goals
-
-### Measure conversion
-**Goal: Enable advertisers to measure ad performance.**
-
-There are two proposals for APIs that would allow the user's browser to gather impression and conversion data and report this back to advertisers in a way that prevents linking of identities across sites or collecting user browsing history:
-
-+   [Event-Level Click Through Conversion Measurement](https://github.com/csharrison/conversion-measurement-api) allows advertisers to determine which ad clicks later turned into conversions. (API name suggestions welcome!)
-+   [Aggregated Reporting](https://github.com/csharrison/aggregate-reporting-api) aggregates browsing data for multiple sites and multiple users in a single report, while preserving privacy by only allowing aggregate reporting on things that a lot of different people did.
-
-Other companies have been investigating similar ideas, such as Facebook's [Cross-Browser Anonymous Conversion Reporting](https://github.com/w3c/web-advertising/blob/master/cross-browser-anonymous-conversion-reporting.md), Apple's [Ad Click Attribution API](https://webkit.org/blog/8943/privacy-preserving-ad-click-attribution-for-the-web/) and Brave's [ad conversion attribution](https://github.com/brave/brave-browser/issues/6536).
-
-### Target ads
-**Goal: Enable advertisers to display ads relevant to users.**
-
-There are many ways to make ads relevant to the user, including the following:
-
-+   **First-party-data targeting**: Show ads relevant to topics a person has told a website they have an interest in, or content a person has looked at previously on this web site.
-+   **Contextual targeting**: Choose where to display ads based on site content. For example, 'Put this ad next to articles about knitting.'
-+   **Remarketing**: Advertise to people who've already visited your site, while they are not on your site. For example,  'Show this ad for discount wool to people who visited your store and left knitting items in their shopping cart—while they're visiting craft sites.'
-+   **Interest-based targeting**: Select ads based on a user's browsing history. For example, 'Show this ad to users whose browsing behaviour indicates they might be interested in knitting'.
-
-First-party-data and contextual targeting can be achieved without knowing anything about the user other than their activity within a site. These techniques don't require cross-site tracking.
-
-Remarketing is usually done by using cookies or some other way to recognize people across web sites: adding users to lists and then targeting them with specific ads.
-
-Interest-based targeting currently uses cookies or device fingerprinting to track user behaviour across as many sites as possible. Many people are concerned about the privacy implications of ad targeting. The Privacy Sandbox includes two alternatives:
-
-+   [FLoC](https://github.com/jkarlin/floc), which generates clusters of similar people, known as cohorts or "flocks". Data is generated locally on the user's browser, not by a third party. The browser shares the generated flock data, but this cannot be used to identify or track individual users. This enables companies to target ads based on the behavior of people with similar browsing behaviour, while preserving privacy.
-+   [TURTLEDOVE](https://github.com/michaelkleber/turtledove), whereby the user's browser, not advertisers, holds information about what the user is interested in. Two (uncorrelated) requests are sent for ads: one to retrieve an ad based on contextual data, and one to retrieve an ad based on an advertiser-defined interest. An 'auction' is then conducted by the browser to choose the most relevant ad, using JavaScript code provided by the advertiser. This code *can only be used to choose between ads*: it cannot make network requests or access the DOM or external state.
-
-### Combat fingerprinting
-**Goal: Reduce the amount of sensitive data revealed by APIs and make access to sensitive data controllable by users, and measurable.**
-
-Browsers have taken steps to [deprecate third-party cookies](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html?mod=article_inline), but techniques to identify and track the behaviour individual users, known as fingerprinting, have continued to evolve. Fingerprinting uses mechanisms that users aren't aware of and can't control.
-
-{% Aside %}
-Sites such as [Panopticlick](https://panopticlick.eff.org) and [amiunique.org](https://amiunique.org/) show how fingerprint data can be combined to identify you as an individual.
-{% endAside %}
-
-The [Privacy Budget](https://github.com/bslassey/privacy-budget) proposal aims to limit the potential for fingerprinting by identifying how much fingerprint data is exposed by JavaScript APIs or other 'surfaces' (such as HTTP request headers) and then set a limit on how much of this data can be accessed.
-
-Fingerprinting surfaces such as the [User-Agent](https://github.com/WICG/ua-client-hints) header will be phased out, and the data made available by alternative mechanisms such as [Client Hints](https://wicg.github.io/ua-client-hints/) will be subject to Privacy Budget limits. Other surfaces, such as the [device orientation](https://bugs.chromium.org/p/chromium/issues/detail?id=1018180) and [battery-level](https://bugs.chromium.org/p/chromium/issues/detail?id=661792) APIs, will be updated to keep the information exposed to a minimum.
-
-### Combat spam, fraud and denial-of-service attacks
-**Goal: Enable authentication without fingerprinting.**
-
-Anti-fraud protection is crucial for keeping users safe, and to ensure that advertisers and site owners can get accurate ad performance measurements.
-
-Unfortunately, the techniques used to identify legitimate users and block spammers, fraudsters, and bots work in ways similar to [fingerprinting](#glossary-fingerprinting) techniques that damage privacy.
-
-The [Trust Tokens API](https://github.com/dvorak42/trust-token-api) proposes an alternative approach, allowing trust of a user in one context, such as gmail.com, to be conveyed to another context, such as an ad running on nytimes.com—without identifying the user or linking the two identities.
-
-### IP address security
-**Goal: Control access to IP addresses to reduce covert fingerprinting, and allow sites to opt out of seeing IP addresses in order to not consume privacy budget.**
-
-Your IP address is the public 'address' of your computer on the internet, which in most cases is dynamically assigned by the network through which you connect to the internet. However, even dynamic IP addresses may remain stable over a significant period of time.
-
-Not surprisingly, this means that IP addresses are a significant source of fingerprint data. The [Willful IP Blindness](https://github.com/bslassey/ip-blindness) proposal is an attempt to provide a privacy-preserving alternative.
-
-### Third parties that aren't third parties
-**Goal: Enable entities to declare that related domain names are owned by the same first party: apple.com and icloud.com, for example.**
-
-Many organizations own sites across multiple domains. For example, google.com, google.co.uk, and youtube.com are owned by the same entity, as are apple.com and icloud.com, or amazon.com.au and amazon.de. This can become a problem if restrictions are imposed on tracking user identity across sites that are seen as 'third-party' but actually belong to the same organization.
-
-[First Party Sets](https://github.com/krgovind/first-party-sets/) aims to make the web's concept of first and third parties more closely aligned with the real world's by enabling multiple domains to declare themselves as belonging to the same first party.
-
-## Next steps
-
-To reiterate: the Privacy Sandbox authors need your support. The [explainers](https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html) need feedback—in particular to suggest missing use cases and more-private ways to accomplish their goals.
-
-Please comment on the explainers by filing issues on the repositories linked to below.
-
-## Find out more
-
-### Explainers
-
-+   [Privacy Model for the Web](https://github.com/michaelkleber/privacy-model)
-+   [Privacy Budget](https://github.com/bslassey/privacy-budget)
-+   [Trust Token API](https://github.com/dvorak42/trust-token-api)
-+   [Willful IP Blindness](https://github.com/bslassey/ip-blindness)
-+   [Aggregated Reporting API](https://github.com/csharrison/aggregate-reporting-api)
-+   [Conversion measurement](https://github.com/csharrison/conversion-measurement-api)
-+   [Fedearated Learning of Cohorts](https://github.com/jkarlin/floc)
-+   [TURTLEDOVE](https://github.com/michaelkleber/turtledove)
-
-### The Privacy Sandbox
-
-+   Privacy Sandbox overview: [Building a more private web](https://www.blog.google/products/chrome/building-a-more-private-web/)
-+   WebKit blog: [Privacy Preserving Ad Click Attribution For the Web](https://webkit.org/blog/8943/privacy-preserving-ad-click-attribution-for-the-web/)
-+   Google AI Blog: [Federated Learning: Collaborative Machine Learning without Centralized Training Data](https://ai.googleblog.com/2017/04/federated-learning-collaborative.html)
-+   [The future of third-party cookies](https://blog.chromium.org/2019/10/developers-get-ready-for-new.html)
-
-### Theory
-
-+   [A Primer on Information Theory and Privacy](https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy)
-
-### Policy and requirements
-
-+   The [Tor Browser design's "Privacy Requirements"](https://2019.www.torproject.org/projects/torbrowser/design/#privacy), particularly the clear emphasis on "Unlinkability".
-+   Mozilla anti-tracking policy: [wiki.mozilla.org/Security/Anti_tracking_policy](https://wiki.mozilla.org/Security/Anti_tracking_policy)
-+   WebKit tracking prevention policy: [webkit.org/tracking-prevention-policy](https://webkit.org/tracking-prevention-policy/)
-+   [Privacy Preserving Ad Click Attribution For the Web](https://webkit.org/blog/8943/privacy-preserving-ad-click-attribution-for-the-web/)
-+   [Brave, Fingerprinting, and Privacy Budgets](https://brave.com/brave-fingerprinting-and-privacy-budgets/)
-
-## Appendix: Glossary of terms used in the explainers {: #glossary }
-
-### Click-through rate (CTR) {: #glossary-ctr }
-
-The ratio of users who click on an ad, having seen it. (See also [impression](#glossary-impression).)
-
-### Click-through-conversion (CTC) {: #glossary-ctc }
-
-A conversion attributed to an ad that was 'clicked'.
-
-### Conversion
-
-The completion of an action on an advertiser's website by a user who has previously interacted with an ad from that advertiser. For example, purchase of a product or sign-up for a newsletter after clicking an ad that links to the advertiser's site.
-
-### Differential privacy
-
-Share information about a dataset to reveal patterns of behaviour without revealing private information about individuals or whether they belong to the set.
-
-### Domain
-
-See [Top-Level Domain](#glossary-tld) and [eTLD](#glossary-etld).
-
-### eTLD, eTLD+1 {: #glossary-etld }
-
-Pseudo top level domains are defined by the [Public Suffix List](https://publicsuffix.org/list/). For example:
-
-```text
-co.uk
-appspot.com
-glitch.me
-```
-Pseudo TLDs are what enable foo.appspot.com to be a different site from bar.appspot.com. The effective top-level domain (**eTLD**) in this case is appspot.com, and the whole **site** name (foo.appspot.com, bar.appspot.com) is known as the **eTLD+1**.
-
-See also [Top-Level Domain](#glossary-tld).
-
-### Entropy
-
-A measure of how much an item of data reveals individual identity.
-
-Data entropy is measured in bits. The more that data reveals identity, the higher its entropy value.
-
-The total number of humans on the planet is around eight billion, which is almost equal to two to the power of 33. This means you need around 33 bits worth of entropy to identify an individual.
-
-Each bit of entropy halves the possible number of potential individuals referred to. For example, binary gender data has an entropy value of around 1 bit. Assuming that birthdays are evenly distributed throughout the year, revealing your birthday (such as 1 January) would reduce your data entropy by around 8.5 bits (since 2 to the power of 8.5 is approximately 365). A postal code might be worth somewhere between 10 and 25 bits. This means that for postal areas with a small population, knowing a person's birthday and postal code means you might have 8.5 + 25 (= 33.5) bits of data—which is likely to be enough to identify individuals.
-
-Data can be combined to identify an individual, but it can be difficult to work out whether new data adds to entropy. For example, knowing a person is from Australia doesn't reduce entropy if you already know the person is from Kangaroo Island.
-
-### Fingerprinting {: #glossary-fingerprinting }
-
-Techniques to identify and track the behaviour of individual users. Fingerprinting uses mechanisms that users aren't aware of and can't control. Sites such as [Panopticlick](https://panopticlick.eff.org) and [amiunique.org](https://amiunique.org/) show how fingerprint data can be combined to identify you as an individual.
-
-### Fingerprinting surface {: #glossary-fingerprinting-surface }
-
-Something that can be used (probably in combination with other surfaces) to identify a particular user or device. For example, the `navigator.userAgent()` JavaScript method and the `User-Agent` HTTP request header provide access to a fingerprinting surface (the user agent string).
-
-### First-party {: #glossary-first-party }
-
-Resources from the site you're visiting. For example, the page you're reading is on the site web.dev and includes resources from that site. See also [Third-party](#glossary-third-party).
-
-### Impression {: #glossary-impression }
-
-View of an ad. (See also [click-through rate](#glossary-ctr).)
-
-### k-anonymity
-
-A measure of anonymity within a data set. If you have _k_ anonymity, you can't be distinguished from _k-1_ other individuals in the data set. In other words, _k_ individuals have the same information (including you).
-
-### Nonce
-Arbitrary number used once only in cryptographic communication.
-
-### Origin
-The origin of a request, including the server name but no path information. For example: `https://web.dev`.
-
-### Passive surface {: #glossary-passive-surface }
-
-Some fingerprinting surfaces, such as user agent strings, IP addresses and accept-language headers, are available to every website whether the site asks for them or not. That means passive surfaces can easily consume a site's privacy budget.
-
-The Privacy Sandbox initiatives proposes replacing passive surfaces with active ways to get specific information, for example using Client Hints a single time to get the user's language rather than having an accept-language header for every response to every server.
-
-### Publisher
-
-The Privacy Sandbox explainers are mostly about ads, so the kinds of publishers referred to are ones that put ads on their web sites.
-
-### Reach
-
-The total number of people who see an ad.
-
-### Remarketing
-
-Advertising to people who've already visited your site. For example, an online store could show ads for a toy sale to people who previously viewed toys on their site.
-
-### Site
-
-See [Top-Level Domain](#glossary-tld) and [eTLD](#glossary-etld).
-
-### Surface
-
-See [Fingerprinting surface](#glossary-fingerprinting-surface) and [Passive surface](#glossary-passive-surface).
-
-### Third-party  {: #glossary-third-party }
-
-Resources served from a domain that's different from the website you're visiting. For example, a website foo.com might use analytics code from google-analytics.com (via JavaScript), fonts from use.typekit.net (via a link element) and a video from vimeo.com (in an iframe). See also [First-party](#glossary-first-party).
-
-### Top-level domain (TLD) {: #glossary-tld }
-
-Top-level domains such as .com and .org are listed in the [Root Zone Database](https://www.iana.org/domains/root/db).
-
-Note that some 'sites' are actually just subdomains. For example, translate.google.com and maps.google.com are just subdomains of google.com (which is the [eTLD + 1](#glossary-etld)).
-
-### .well-known
-
-It can be useful to access policy or other information about a host _before_ making a request. For example, robots.txt tells web crawlers which pages to visit and which pages to ignore. IETF [RFC8615](https://tools.ietf.org/html/rfc8615) outlines a standardised way to make site-wide metadata accessible in standard locations in a /.well-known/ subdirectory. You can see a list of these at [iana.org/assignments/well-known-uris/well-known-uris.xhtml](https://www.iana.org/assignments/well-known-uris/well-known-uris.xhtml).
diff --git a/src/site/_drafts/intrinsic-layout-overview/hero.jpg b/src/site/_drafts/intrinsic-layout-overview/hero.jpg
deleted file mode 100644
index 9d76960ce4f..00000000000
Binary files a/src/site/_drafts/intrinsic-layout-overview/hero.jpg and /dev/null differ
diff --git a/src/site/_drafts/intrinsic-layout-overview/index.md b/src/site/_drafts/intrinsic-layout-overview/index.md
index 4a3408baa0c..8dfc329ca46 100644
--- a/src/site/_drafts/intrinsic-layout-overview/index.md
+++ b/src/site/_drafts/intrinsic-layout-overview/index.md
@@ -7,7 +7,7 @@ description: Intrinsic layout starts with healthy layout strategies that respond
 alt: A full page design is shown alluding to a large amount of layout work
 web_lighthouse: N/A
 date: 2019-06-10
-hero: hero.jpg
+hero: image/admin/qJ1nZhqmZbdu7HDxqXhM.jpg
 hero_position: top
 tags:
   - blog
@@ -101,8 +101,8 @@ The example below demonstrates the flexibility your site gains when it uses an
 intrinsic layout. While the content might change—sometimes dramatically—the layout
 is able to accommodate these changes in a way that preserves the site's design.
 
-<figure class="w-figure">
-  <video class="w-screenshot" autoplay loop muted playsinline aria-label="Large amounts of text are added to a three column layout. The layout flows the text correctly so it preserves its three column appearance.">
+<figure>
+  <video autoplay loop muted playsinline aria-label="Large amounts of text are added to a three column layout. The layout flows the text correctly so it preserves its three column appearance.">
     <source src="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/intrinsic-layout-overview_intrinsic-chaos-overview.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/intrinsic-layout-overview_intrinsic-chaos-overview.mp4" type="video/mp4; codecs=h264">
   </video>
@@ -120,12 +120,12 @@ As a practical way of learning the ropes of intrinsic web design, I'd like to
 orient this series of guides towards a tangible end goal: **a full page
 intrinsic layout.**
 
-<figure class="w-figure w-figure--fullbleed">
+<figure data-size="full">
   <picture>
     <source type="image/jpeg" srcset="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/home@2x.jpg 2x"/>
     <img loading="lazy" src="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/home.jpg" alt="TenHundred store home page" class="screenshot">
   </picture>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+  <figcaption>
     <a href="https://intrinsic-layout-guide.glitch.me" target="_blank" rel="noopener noreferrer">Preview the final layout demo page</a>
   </figcaption>
 </figure>
@@ -156,12 +156,12 @@ If you don't have the basics of grid or flexbox down, have no fear! **You'll
 pick up the basics along the way** and I'll do my best to provide links that
 explain certain topics in-depth. 👍
 
-<figure class="w-figure">
+<figure>
   <video autoplay loop muted playsinline aria-label="A man and a woman quickly running in place.">
     <source src="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/intrinsic-layout-overview_get-started.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/intrinsic-layout-overview/intrinsic-layout-overview_get-started.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption w-figcaption--center">
+ <figcaption>
     Weeeeeeeeeeeeeeee!
   </figcaption>
 </figure>
diff --git a/src/site/_filters/algolia-indexable.js b/src/site/_filters/algolia-indexable.js
new file mode 100644
index 00000000000..a43921cd460
--- /dev/null
+++ b/src/site/_filters/algolia-indexable.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Filter eleventy collection of posts that should not be in algolia.
+ */
+
+/**
+ * @param {EleventyCollectionItem[]} posts An array of 11ty post objects.
+ * @return {EleventyCollectionItem[]} The posts that should go be searchable in algolia.
+ */
+function algoliaIndexable(posts) {
+  return posts.filter(
+    (post) =>
+      post.url &&
+      post.data.title &&
+      !(post.data.noindex === true || post.data.noindex === 'true'),
+  );
+}
+
+module.exports = algoliaIndexable;
diff --git a/src/site/_filters/algolia-item.js b/src/site/_filters/algolia-item.js
new file mode 100644
index 00000000000..a73628add47
--- /dev/null
+++ b/src/site/_filters/algolia-item.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const striptags = require('striptags');
+
+const md5 = require('./md5');
+const {getDefaultUrl} = require('./urls');
+const {defaultLocale} = require('../_data/site');
+const {generateImgixSrc} = require('../_includes/components/Img');
+const {findByUrl} = require('./find-by-url');
+
+/**
+ * Returns the parent URL of a post. For example:
+ * /en/blog/example-post -> /en/blog/
+ *
+ * @param {EleventyCollectionItem} post
+ * @returns {string}
+ */
+function getPostParentUrl(post) {
+  return `${post.data.page.filePathStem.split('/').slice(0, -2).join('/')}/`;
+}
+
+/**
+ * @param {EleventyCollectionItem} post
+ * @return {AlgoliaItem}
+ */
+function algoliaItem(post) {
+  const data = post.data;
+
+  let parent;
+  try {
+    parent = findByUrl(getPostParentUrl(post));
+  } catch (e) {
+    if (
+      e instanceof Error &&
+      e.message === 'No collection has been memoized yet.'
+    ) {
+      parent = null;
+    } else {
+      throw e;
+    }
+  }
+
+  return {
+    content: striptags(/** @type {string} */ (post.templateContent)),
+    createdOn: data.date,
+    description: data.renderData?.description || data.description,
+    image: data.hero
+      ? generateImgixSrc(data.hero, {w: 100, auto: 'format'})
+      : null,
+    locale: data.lang || defaultLocale,
+    locales: [],
+    objectID: md5(post.url),
+    priority: data.algolia_priority ?? 1,
+    tags: data.tags && Array.isArray(data.tags) ? data.tags : [],
+    title: data.renderData?.title || data.title,
+    updatedOn: data.updated,
+    url: getDefaultUrl(post.url),
+    parentTitle: parent?.data?.title,
+  };
+}
+
+module.exports = {algoliaItem, getPostParentUrl};
diff --git a/src/site/_filters/calendar-link.js b/src/site/_filters/calendar-link.js
new file mode 100644
index 00000000000..1c214394491
--- /dev/null
+++ b/src/site/_filters/calendar-link.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Returns a calendar link for an event.
+ */
+
+const {DateTime} = require('luxon');
+
+/**
+ * @param {Date} date Date of the event.
+ * @param {string} title Title of the event.
+ * @param {string} description Description of the event.
+ * @return {string} Calendar url string.
+ */
+function calendarLink(date, title, description) {
+  const end = DateTime.fromJSDate(date);
+  const start = end.minus({days: 1});
+  const url = new URL('https://calendar.google.com/calendar/render');
+  url.searchParams.set('action', 'TEMPLATE');
+  url.searchParams.set(
+    'dates',
+    [start.toFormat('yyyyMMdd'), end.toFormat('yyyyMMdd')].join('/'),
+  );
+  url.searchParams.set('text', title);
+  url.searchParams.set('details', description);
+  return url.toString();
+}
+
+module.exports = {calendarLink};
diff --git a/src/site/_filters/console-dump.js b/src/site/_filters/console-dump.js
deleted file mode 100644
index 2d6d2a40f24..00000000000
--- a/src/site/_filters/console-dump.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// Use console.log while rendering nunjucks templates.
-// e.g. {{ collections.blogPosts | consoleDump }}
-// https://twitter.com/eleven_ty/status/1227229750747389952
-// Note, this will be added by eleventy v0.11 but it's still nice to
-// have our own version that we can use with the debugger.
-module.exports = (values) => {
-  // Uncomment the debugger statement below to use the debugger.
-  // Then run `npm run debug:eleventy`
-  // debugger;
-  console.log(values);
-};
diff --git a/src/site/_filters/csp-hash.js b/src/site/_filters/csp-hash.js
new file mode 100644
index 00000000000..41aa4c393e9
--- /dev/null
+++ b/src/site/_filters/csp-hash.js
@@ -0,0 +1,16 @@
+const {sha256base64} = require('../_data/lib/hash');
+const hashList = new Set();
+
+function cspHash(raw) {
+  if (process.env.ELEVENTY_ENV === 'prod') {
+    const hash = `'sha256-${sha256base64(raw)}'`;
+    hashList.add(hash);
+  }
+  return raw;
+}
+
+function getHashList() {
+  return [...hashList];
+}
+
+module.exports = {cspHash, getHashList};
diff --git a/src/site/_filters/expand-authors.js b/src/site/_filters/expand-authors.js
index 2046c9ab00b..525ab88b1b9 100644
--- a/src/site/_filters/expand-authors.js
+++ b/src/site/_filters/expand-authors.js
@@ -1,19 +1,26 @@
-module.exports = (authorSlugs = [], authorsCollection) => {
+const {i18n} = require('./i18n');
+
+/**
+ *
+ * @param {string[]} authorSlugs
+ * @param {Authors} authorsCollection
+ * @param {string} [lang]
+ * @returns
+ */
+module.exports = (authorSlugs = [], authorsCollection, lang) => {
   return authorSlugs
-    .map((authorKey) => {
+    .reduce((authors, authorKey) => {
       const profile = authorsCollection[authorKey];
 
       if (!profile) {
-        throw new Error(
-          `Author '${authorKey}' does not exist in '_data/authorsData.json'.`,
-        );
-      }
-
-      if (profile.twitter) {
-        return `@${profile.twitter}`;
+        console.log(`Cannot find author '${authorKey}' in authorsCollection`);
+      } else if (profile.twitter) {
+        authors.push(`@${profile.twitter}`);
+      } else {
+        authors.push(i18n(profile.title, lang));
       }
 
-      return profile.title;
-    })
+      return authors;
+    }, [])
     .join(' | ');
 };
diff --git a/src/site/_filters/filter-by-lang.js b/src/site/_filters/filter-by-lang.js
index 73632518588..17fbdd02bd0 100644
--- a/src/site/_filters/filter-by-lang.js
+++ b/src/site/_filters/filter-by-lang.js
@@ -1,11 +1,25 @@
+const {defaultLocale} = require('../_data/site');
+const {getDefaultUrl} = require('../_filters/urls');
 /**
  * Filters-in posts that have the same lang attribute as requested.
- * @param {Array} posts An array of posts.
- * @param {string} lang Target language.
+ * @param {EleventyCollectionItem[]} posts An array of posts.
+ * @param {string} [lang] Target language.
+ * @return {EleventyCollectionItem[]}
  */
-module.exports = function filterByLang(posts, lang) {
-  if (!lang) {
-    return posts;
+module.exports = function filterByLang(posts, lang = defaultLocale) {
+  /** @type Map<string, EleventyCollectionItem> */
+  const filteredPosts = new Map();
+  for (const post of posts) {
+    if (post.data && [lang, defaultLocale].includes(post.data.lang)) {
+      const defaultUrl = getDefaultUrl(post.url);
+      if (filteredPosts.has(defaultUrl) && post.data.lang === lang) {
+        filteredPosts.set(defaultUrl, post);
+      } else if (!filteredPosts.has(defaultUrl)) {
+        filteredPosts.set(defaultUrl, post);
+      }
+    }
   }
-  return posts.filter((post) => lang === (post.data && post.data.lang));
+  return Array.from(filteredPosts.values()).sort(
+    (a, b) => b.date.getTime() - a.date.getTime(),
+  );
 };
diff --git a/src/site/_filters/find-by-url.js b/src/site/_filters/find-by-url.js
index 8893d92afff..cf526e2144b 100644
--- a/src/site/_filters/find-by-url.js
+++ b/src/site/_filters/find-by-url.js
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+const {defaultLocale} = require('../_data/site');
+const defaultLocaleRegExp = new RegExp(`^/${defaultLocale}/`);
+/** @type {{[url: string]: EleventyCollectionItem}} */
 let memo;
 
 /**
@@ -23,9 +26,9 @@ let memo;
  *
  * Memoize an eleventy collection into a hash for faster lookups.
  * Important: Memoization assumes that all post urls are unique.
- * @param {Array<Object>} collection An eleventy collection.
+ * @param {EleventyCollectionItem[]} collection An eleventy collection.
  * Typically collections.all
- * @return {Array<Object>} The original collection. We return this to make
+ * @return {EleventyCollectionItem[]} The original collection. We return this to make
  * eleventy.addCollection happy since it expects a collection of some kind.
  * @see {@link https://github.com/11ty/eleventy/issues/399}
  */
@@ -33,11 +36,12 @@ const memoize = (collection) => {
   memo = {};
   collection.forEach((item) => {
     if (item.url) {
-      if (memo[item.url]) {
-        throw new Error(`Found duplicate post url: '${item.url}'`);
+      const url = item.url.replace(defaultLocaleRegExp, '/');
+      if (memo[url]) {
+        throw new Error(`Found duplicate post url: '${url}'`);
       }
 
-      memo[item.url] = item;
+      memo[url] = item;
     }
   });
 
@@ -49,7 +53,7 @@ const memoize = (collection) => {
  * Look up a post by its url.
  * Requires that the collection the post lives in has already been memoized.
  * @param {string} url The post url (in a form of "lang/slug") to look up.
- * @return {Object} An eleventy collection item.
+ * @return {EleventyCollectionItem} An eleventy collection item.
  */
 const findByUrl = (url) => {
   if (!url) {
@@ -60,6 +64,7 @@ const findByUrl = (url) => {
     throw new Error('No collection has been memoized yet.');
   }
 
+  url = url.replace(defaultLocaleRegExp, '/');
   return memo[url];
 };
 
diff --git a/src/site/_filters/find-tags.js b/src/site/_filters/find-tags.js
deleted file mode 100644
index 028bd810519..00000000000
--- a/src/site/_filters/find-tags.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const tagsCollection = require('../_collections/tags')();
-
-/**
- * @param {Array<string>} tags Array of tags.
- * @return {Array<object>} An array of tags urls, titles, and any other information.
- */
-module.exports = (tags) => {
-  const validTags = [];
-
-  for (const tag of tags) {
-    const tagData = tagsCollection[tag];
-    if (tagData) {
-      validTags.push(tagData);
-    }
-  }
-
-  return validTags;
-};
diff --git a/src/site/_filters/get-paths.js b/src/site/_filters/get-paths.js
index 45c81e49f32..ac92b65f235 100644
--- a/src/site/_filters/get-paths.js
+++ b/src/site/_filters/get-paths.js
@@ -14,7 +14,24 @@
  * limitations under the License.
  */
 const postToPathsMap = require('../_data/postToPaths.js');
+const paths = require('../_data/paths');
 
 module.exports = (post) => {
-  return postToPathsMap[post.fileSlug];
+  const out = postToPathsMap[post.fileSlug];
+  if (out) {
+    return out;
+  }
+
+  // Not all posts are correctly attributed to a path (they're not linked to in the path JSON).
+  // However, guess based on their filename. This is only needed for some "return" links.
+  const parts = post.filePathStem.split('/');
+
+  if (parts.length > 2) {
+    const pathFolder = parts[2];
+    if (pathFolder in paths) {
+      return [pathFolder]; // callers use this key to look up in paths again
+    }
+  }
+
+  return [];
 };
diff --git a/src/site/_filters/github-link.js b/src/site/_filters/github-link.js
index 3078f449c76..76442d1925c 100644
--- a/src/site/_filters/github-link.js
+++ b/src/site/_filters/github-link.js
@@ -24,6 +24,6 @@ module.exports = (inputPath) => {
       'inputPath passed to githubLink filter was undefined or null.',
     );
   }
-  const branch = 'master';
+  const branch = 'main';
   return `${repo}/${path.join('blob', branch, inputPath)}`;
 };
diff --git a/src/site/_filters/i18n.js b/src/site/_filters/i18n.js
new file mode 100644
index 00000000000..43e7bea0dfc
--- /dev/null
+++ b/src/site/_filters/i18n.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const yaml = require('js-yaml');
+const get = require('lodash.get');
+const fs = require('fs');
+const path = require('path');
+const {defaultLocale} = require('../../../shared/locale');
+
+/**
+ * Recursively walk a directory and create an object out of the file tree.
+ * For example: _data/i18n/foo/bar/baz.yml would produce:
+ * {foo: {bar: baz: { ... }}}
+ * @param {string} dir A directory
+ * @return {object}
+ */
+const walk = (dir) => {
+  const results = {};
+  const files = fs.readdirSync(dir);
+  files
+    .filter((file) => {
+      // Only allow directories and yaml files.
+      const ext = path.extname(file);
+      // !ext implies a directory
+      if (!ext || ext === '.yaml' || ext === '.yml') {
+        return true;
+      }
+
+      return false;
+    })
+    .forEach((file) => {
+      file = path.join(dir, file);
+      const ext = path.extname(file);
+      const name = path.basename(file, ext);
+      const stat = fs.statSync(file);
+      if (stat && stat.isDirectory()) {
+        /* Recurse into a subdirectory */
+        results[name] = walk(file);
+      } else {
+        /* Is a file */
+        results[name] = yaml.safeLoad(fs.readFileSync(file, 'utf-8'));
+      }
+    });
+  return results;
+};
+
+// Scan the _data/i18n directory and create a nested i18n data object
+const data = {i18n: walk(path.join(__dirname, '..', '_data', 'i18n'))};
+
+/**
+ * Looks for the i18n string that matches the path and locale.
+ * @param {string} path A dot separated path
+ * @param {string} [locale] A locale prefix (example: 'en', 'pl')
+ * @param {boolean} [ignoreMissing] Some i18n paths are expected to not exist, and should not throw an error
+ * @return {string}
+ */
+function i18n(path, locale = defaultLocale, ignoreMissing = false) {
+  locale = locale.split('_')[0];
+  try {
+    const out = get(data, path)[locale] ?? get(data, path)[defaultLocale];
+    if (out !== undefined) {
+      return out;
+    }
+  } catch (err) {
+    if (!ignoreMissing) {
+      throw new Error(`Could not find i18n result for: ${path}`);
+    }
+  }
+
+  return '';
+}
+
+/**
+ * Infer the page locale using page's filePathStem. Usually for 11ty pages
+ * the locale is defined as a part of the data cascade and can be accessed
+ * via this.locale. This function is helpful if this.locale is not available,
+ * e.g. inside 11ty shortcodes.
+ * @param {string} path filePathStem property, e.g. /en/docs/hosted_apps/index
+ * @return {string}
+ */
+function getLocaleFromPath(path) {
+  return path ? path.split('/')[1] : defaultLocale;
+}
+
+module.exports = {i18n, getLocaleFromPath};
diff --git a/src/site/_filters/is-live.js b/src/site/_filters/is-live.js
new file mode 100644
index 00000000000..537861d215e
--- /dev/null
+++ b/src/site/_filters/is-live.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Filter scheduled and draft posts out from a collection.
+ */
+
+const {env} = require('../_data/site');
+
+/**
+ * If a post has a future date it will automatically be set to `draft: true`.
+ * When the date arrives, our daily GitHub Action that publishes the site
+ * should pickup the new post and publish it.
+ * This action runs at around 7am PST / 15:00 UTC.
+ * Because Eleventy sets the post.date to midnight, UTC time, we offset it
+ * to be at 15:00.
+ * If we did not do this, then deploying the site at 4pm PST / 00:00 UTC
+ * would launch posts intended for the next day.
+ * @param {*} post An eleventy post object.
+ * @param {!Date=} now A Date object representing the current time. You
+ * shouldn't ever need to pass a date into this function. We make it an argument
+ * so we can write tests against it.
+ * @return {boolean}
+ */
+function isScheduledForTheFuture(post, now = new Date()) {
+  if (!(now instanceof Date)) {
+    throw new Error('now argument must by a Date object.');
+  }
+
+  const postDate = new Date(post.date);
+  postDate.setUTCHours(15, 0, 0, 0);
+  return postDate.getTime() > now.getTime();
+}
+
+/**
+ * @param {object} post An eleventy post object.
+ * @return {boolean} Whether or not the post should go live.
+ */
+function isLive(post) {
+  if (!post.date) {
+    throw new Error(`${post.inputPath} did not specify a date.`);
+  }
+
+  if (!post.data) {
+    throw new Error(
+      `${post.inputPath} does not have a data object. Are you sure it's a post?`,
+    );
+  }
+
+  // Scheduled posts.
+  // Check to see if the post is schedule to go live some date in the future.
+  // If it is, set its draft flag so it will behave like other draft posts
+  // on the site and be excluded from collections in production.
+  if (post.data.scheduled && isScheduledForTheFuture(post)) {
+    post.data.draft = true;
+  }
+
+  // If we're in dev mode, force all posts to show up.
+  // We do this after checking for scheduled posts so scheduled posts will get
+  // their draft flag set and show the `draft` visual indicator.
+  if (env === 'dev') {
+    return true;
+  }
+
+  // Draft posts.
+  // Draft posts should be excluded from collections in the prod environment.
+  // nb. If a post has the `draft: true` flag set then it *will* still
+  // generate a file but it will not be search crawlable.
+  // However, if you know the URL you can view it in prod.
+  // We may want to change this behavior someday.
+  return !post.data.draft;
+}
+
+module.exports = {isLive, isScheduledForTheFuture};
diff --git a/src/site/_filters/is-new-content.js b/src/site/_filters/is-new-content.js
new file mode 100644
index 00000000000..3ed5fec071d
--- /dev/null
+++ b/src/site/_filters/is-new-content.js
@@ -0,0 +1,13 @@
+const freshnessTreshold = 1000 * 60 * 60 * 24 * 30; // 30 days
+
+/**
+ * Returns true if the date is fresher than the freshnes treshold.
+ * @param {Date} date Date to be checked
+ * @return {Boolean} isNew
+ */
+module.exports = (date) => {
+  if (!date) {
+    return;
+  }
+  return date.getTime() > Date.now() - freshnessTreshold;
+};
diff --git a/src/site/_filters/is-upcoming.js b/src/site/_filters/is-upcoming.js
new file mode 100644
index 00000000000..28c4d51c2f7
--- /dev/null
+++ b/src/site/_filters/is-upcoming.js
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Returns true if a post has a date specified in the future.
+ */
+
+/**
+ * @param {object} post An eleventy post object.
+ * @param {string} dateFieldName Name of the field containing the date.
+ * @return {boolean} Whether the posts date is set in the future.
+ */
+function isUpcoming(post, dateFieldName) {
+  const date = dateFieldName === 'date' ? post.date : post.data[dateFieldName];
+  if (!post.data[dateFieldName]) {
+    throw new Error(`${post.inputPath} did not specify a ${dateFieldName}.`);
+  }
+  const now = new Date();
+  const postDate = new Date(date);
+  return postDate.getTime() > now.getTime();
+}
+
+/**
+ * @param {EleventyCollectionObject} posts An eleventy posts object.
+ * @param {string} dateFieldName Name of the field containing the date.
+ * @return {EleventyCollectionObject} Posts filtered by date.
+ */
+function filterInUpcoming(posts, dateFieldName) {
+  return posts.filter((post) => isUpcoming(post, dateFieldName));
+}
+
+/**
+ * @param {EleventyCollectionObject} posts An eleventy posts object.
+ * @param {string} dateFieldName Name of the field containing the date.
+ * @return {EleventyCollectionObject} Posts filtered by date.
+ */
+function filterOutUpcoming(posts, dateFieldName) {
+  return posts.filter((post) => !isUpcoming(post, dateFieldName));
+}
+
+module.exports = {isUpcoming, filterInUpcoming, filterOutUpcoming};
diff --git a/src/site/_filters/language-list.js b/src/site/_filters/language-list.js
new file mode 100644
index 00000000000..730e35530ac
--- /dev/null
+++ b/src/site/_filters/language-list.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {
+  languageNames,
+  defaultLanguage,
+  languageOrdering,
+} = require('../../lib/utils/language');
+
+const {
+  getDefaultUrl,
+  getTranslatedUrls,
+  getLocaleSpecificUrl,
+} = require('../_filters/urls');
+
+/**
+ * Look up all supported languages for a specific post
+ *
+ * @param {String} lang The current lang of a post to look up.
+ * @param {EleventyCollectionItem} post The post to look up.
+ * @return {String[][]} The list of supported languages for a specific post
+ */
+
+const supportedLanguages = (post, lang) => {
+  const url = post.url;
+  const languages = getTranslatedUrls(url).filter(
+    (langHref) => langHref[0] !== lang,
+  );
+
+  // Exit early if there are no translations.
+  if (languages.length === 0) return [];
+
+  languages.map((langHref) => {
+    langHref.push(languageNames[langHref[0]]);
+  });
+
+  // Ensure that the default (English) translation is added as well.
+  const defaultHref = getLocaleSpecificUrl(defaultLanguage, getDefaultUrl(url));
+  languages.push([
+    defaultLanguage,
+    defaultHref,
+    languageNames[defaultLanguage],
+  ]);
+
+  // Sort the list of languages with a specific ordering.
+  // C.f. https://github.com/GoogleChrome/web.dev/issues/7430
+  languages.sort((a, b) => {
+    const indexOfA = languageOrdering.indexOf(a[0]);
+    const indexOfB = languageOrdering.indexOf(b[0]);
+    return indexOfA > indexOfB ? 1 : -1;
+  });
+
+  return languages;
+};
+
+module.exports = {supportedLanguages};
diff --git a/src/site/_filters/latest-post-by-tags.js b/src/site/_filters/latest-post-by-tags.js
new file mode 100644
index 00000000000..1da3a273b3a
--- /dev/null
+++ b/src/site/_filters/latest-post-by-tags.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Return the latest post by specific tags.
+ */
+
+const {findByUrl} = require('./find-by-url');
+
+/**
+ * @param {EleventyCollectionObject} _ An eleventy posts object.
+ * @param {string[]} tags Array of tag name.
+ * @return {EleventyCollectionItem} Latest post filter by tag.
+ */
+
+function latestPostByTags(_, tags) {
+  let latestPost = null;
+  for (const tag of tags) {
+    // @ts-ignore
+    const tagPosts = this.ctx.collections[tag];
+    if (!tagPosts.length) continue;
+
+    const candidatePost = tagPosts[tagPosts.length - 1];
+    if (!latestPost) {
+      latestPost = candidatePost;
+      continue;
+    }
+
+    if (new Date(candidatePost.date) > new Date(latestPost.date)) {
+      latestPost = candidatePost;
+    }
+  }
+
+  if (!latestPost) {
+    // @ts-ignore
+    const blogPosts = this.ctx.collections.all;
+    latestPost = blogPosts[blogPosts.length - 1];
+  }
+
+  return findByUrl(latestPost.url);
+}
+
+module.exports = {latestPostByTags};
diff --git a/src/site/_filters/live-posts.js b/src/site/_filters/live-posts.js
index c881f3cef09..a22c973d178 100644
--- a/src/site/_filters/live-posts.js
+++ b/src/site/_filters/live-posts.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 Google LLC
+ * Copyright 2021 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,73 +15,17 @@
  */
 
 /**
- * @fileoverview Filter scheduled and draft posts out from a collection.
+ * @fileoverview Filters out 11ty post objects that are not live.
  */
 
-const {env} = require('../_data/site');
+const {isLive} = require('./is-live');
 
 /**
- * If a post has a future date it will automatically be set to `draft: true`.
- * When the date arrives, our daily GitHub Action that publishes the site
- * should pickup the new post and publish it.
- * This action runs at around 7am PST / 15:00 UTC.
- * Because Eleventy sets the post.date to midnight, UTC time, we offset it
- * to be at 15:00.
- * If we did not do this, then deploying the site at 4pm PST / 00:00 UTC
- * would launch posts intended for the next day.
- * @param {*} post An eleventy post object.
- * @param {!Date=} now A Date object representing the current time. You
- * shouldn't ever need to pass a date into this function. We make it an argument
- * so we can write tests against it.
- * @return {boolean}
- */
-function isScheduledForTheFuture(post, now = new Date()) {
-  if (!(now instanceof Date)) {
-    throw new Error('now argument must by a Date object.');
-  }
-
-  const postDate = new Date(post.date);
-  postDate.setUTCHours(15, 0, 0, 0);
-  return postDate.getTime() > now.getTime();
-}
-
-/**
- * @param {object} post An eleventy post object.
- * @return {boolean} Whether or not the post should go live.
+ * Filters out 11ty post objects that are not live.
+ *
+ * @param {object[]} posts An array of 11ty post objects.
+ * @return {object[]} An array of 11ty post objects that are live.
  */
-function livePosts(post) {
-  if (!post.date) {
-    throw new Error(`${post.inputPath} did not specify a date.`);
-  }
-
-  if (!post.data) {
-    throw new Error(
-      `${post.inputPath} does not have a data object. Are you sure it's a post?`,
-    );
-  }
-
-  // Scheduled posts.
-  // Check to see if the post is schedule to go live some date in the future.
-  // If it is, set its draft flag so it will behave like other draft posts
-  // on the site and be excluded from collections in production.
-  if (post.data.scheduled && isScheduledForTheFuture(post)) {
-    post.data.draft = true;
-  }
-
-  // If we're in dev mode, force all posts to show up.
-  // We do this after checking for scheduled posts so scheduled posts will get
-  // their draft flag set and show the `draft` visual indicator.
-  if (env === 'dev') {
-    return true;
-  }
-
-  // Draft posts.
-  // Draft posts should be excluded from collections in the prod environment.
-  // nb. If a post has the `draft: true` flag set then it *will* still
-  // generate a file but it will not be search crawlable.
-  // However, if you know the URL you can view it in prod.
-  // We may want to change this behavior someday.
-  return !post.data.draft;
-}
+const livePosts = (posts) => posts.filter(isLive);
 
-module.exports = {livePosts, isScheduledForTheFuture};
+module.exports = livePosts;
diff --git a/src/site/_filters/md-block.js b/src/site/_filters/md-block.js
index 6cd5c45db25..7d9a50d266b 100644
--- a/src/site/_filters/md-block.js
+++ b/src/site/_filters/md-block.js
@@ -34,15 +34,15 @@ const rules = {
     return `<web-copy-code>${fenced}</web-copy-code>`;
   },
   table_close: () => '</table>\n</div>',
-  table_open: () => '<div class="w-table-wrapper">\n<table>\n',
+  table_open: () => '<div class="table-wrapper scrollbar">\n<table>\n',
 };
 
 mdLib.renderer.rules = {...mdLib.renderer.rules, ...rules};
 
 /**
  * Render content as markdown.
- * @param {string} content
- * @return {?string}
+ * @param {string?} content
+ * @return {string|undefined}
  */
 module.exports = (content) => {
   if (!content) {
diff --git a/src/site/_filters/md.js b/src/site/_filters/md.js
index 3327eb38d14..75b6ffd6d66 100644
--- a/src/site/_filters/md.js
+++ b/src/site/_filters/md.js
@@ -1,13 +1,28 @@
 const md = require('markdown-it')();
 
 /**
- * Render content as inline markdown.
- * @param {string} content
- * @return {?string}
+ * Render content as inline markdown if single line, or full
+ * markdown if multiline
+ * @param {string} [content]
+ * @param {import('markdown-it').Options} [opts]
+ * @return {string|undefined}
  */
-module.exports = (content) => {
+module.exports = (content, opts) => {
   if (!content) {
     return;
   }
-  return md.renderInline(content);
+
+  if (opts) {
+    md.set(opts);
+  }
+
+  let inline = !content.includes('\n');
+
+  // If there's quite a bit of content, we want to make sure
+  // it's marked up for readability purposes
+  if (inline && content.length > 200) {
+    inline = false;
+  }
+
+  return inline ? md.renderInline(content) : md.render(content);
 };
diff --git a/src/site/_filters/md5.js b/src/site/_filters/md5.js
new file mode 100644
index 00000000000..029275972f7
--- /dev/null
+++ b/src/site/_filters/md5.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const {createHash} = require('crypto');
+
+const md5 = (i) => createHash('md5').update(i).digest('hex');
+
+module.exports = md5;
diff --git a/src/site/_filters/minify-js.js b/src/site/_filters/minify-js.js
new file mode 100644
index 00000000000..25b63b20e30
--- /dev/null
+++ b/src/site/_filters/minify-js.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {minify} = require('terser');
+
+/**
+ * Minify JS using terser.
+ * Nunjucks supports async filters (yay!) but they have to use ugly callback
+ * syntax (boo...).
+ * https://www.11ty.dev/docs/quicktips/inline-js/
+ *
+ * This never errors, it just logs an error in production if we can't minify.
+ *
+ * @param {string} code
+ * @param {(err: Error, ret: string) => void} callback
+ */
+function minifyJs(code, callback) {
+  if (process.env.ELEVENTY_ENV !== 'prod') {
+    callback(null, code);
+    return;
+  }
+
+  minify(code)
+    .then((result) => {
+      callback(null, result.code);
+    })
+    .catch((err) => {
+      console.error('Terser error: ', err);
+      // Fail gracefully.
+      callback(null, code);
+    });
+}
+
+module.exports = {minifyJs};
diff --git a/src/site/_filters/minify-json.js b/src/site/_filters/minify-json.js
new file mode 100644
index 00000000000..b47df4ad01b
--- /dev/null
+++ b/src/site/_filters/minify-json.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Do a simple minify JSON using stringify to strip whitespaces
+ *
+ * @param {string} code
+ */
+function minifyJSON(code) {
+  if (process.env.ELEVENTY_ENV !== 'prod') {
+    return code;
+  }
+
+  try {
+    return JSON.stringify(JSON.parse(code));
+  } catch (err) {
+    console.error('JSON error: ', err);
+    // Fail gracefully.
+    return code;
+  }
+}
+
+module.exports = {minifyJSON};
diff --git a/src/site/_filters/navigation.js b/src/site/_filters/navigation.js
new file mode 100644
index 00000000000..8cd38d0f710
--- /dev/null
+++ b/src/site/_filters/navigation.js
@@ -0,0 +1,103 @@
+const {join} = require('path');
+
+/**
+ * Turns the toc into an array of NavigationItems.
+ * At this stage most NavigationItems are a simple object which looks like this:
+ * [
+ *  {url: '/learn/css/foo' }
+ * ]
+ * We use the url as a key in a Map so we can later loop through the Eleventy
+ * collection and backfill our NavigationItem with its page data.
+ * Note that some NavigationItems may be section headings, rather than having
+ * a url these will have a title and we'll recurse through their children to
+ * continue building out the tree:
+ * [
+ *  {title: 'Hello World', children: [{url: ...}, {url: ...}]}
+ * ]
+ * @param {NavigationToC[]} toc
+ * @param {Map<string, NavigationItem>} map url-based map of entries
+ * @return {NavigationItem[]}
+ */
+function buildTree(toc, map) {
+  /** @type {NavigationItem[]} */
+  const tree = [];
+  for (const entry of toc) {
+    /** @type {NavigationItem} */
+    const item = {};
+
+    if (entry.url) {
+      // EleventyCollection items always end in a trailing slash so we need
+      // to ensure our urls have it if we want to use them as keys.
+      item.url = join(entry.url, '/');
+
+      // This has to happen before calling buildTree so the correct order is maintained.
+      map.set(item.url, item);
+    }
+
+    if (entry.sections?.length) {
+      item.children = buildTree(entry.sections, map);
+    }
+
+    if (entry.title) {
+      item.title = entry.title;
+    }
+
+    tree.push(item);
+  }
+
+  return tree;
+}
+
+/**
+ * During this pass we loop through the collection and see if any of the page
+ * urls match a url in the tree. If we find a match then we add the page data
+ * to the tree.
+ * @param {EleventyCollectionItem[]} collection
+ * @param {Map<string, NavigationItem>} map
+ */
+function mapPagesToTree(collection, map) {
+  for (const item of collection) {
+    const ref = map.get(item.url);
+    if (!ref) {
+      continue;
+    }
+    // Copy the page data that we actually need.
+    // Don't clone the entire data object or you can easily run into
+    // circular reference issues if you try to use this data inside of
+    // page content.
+    ref.data = {
+      title: item.data.title,
+      description: item.data.description,
+      date: item.data.date,
+      // @ts-ignore
+      placeholder: item.data.placeholder,
+    };
+  }
+}
+
+/**
+ * Consumes a NavigationToC and turns it into a tree of NavigationItems.
+ * This array of NavigationItems can be used to render things like breadcrumbs
+ * or page navigation.
+ * @param {EleventyCollectionItem[]} collection
+ * @param {NavigationToC[]} toc
+ * @return {{ tree: NavigationItem[], list: NavigationItem[] }}
+ */
+module.exports = function navigation(collection, toc) {
+  /** @type {Map<string, NavigationItem>} */
+  const map = new Map();
+  const tree = buildTree(toc, map);
+  mapPagesToTree(collection, map);
+
+  // The map is ordered correctly, even considering nesting, so use it to set
+  // next/previous links and anything else.
+  // The list only contains items with actual URLs.
+  const list = [...map.values()];
+  list.forEach((item, idx) => {
+    item.counter = idx.toString().padStart(3, '0');
+    item.prev = list[idx - 1] || null;
+    item.next = list[idx + 1] || null;
+  });
+
+  return {tree, list};
+};
diff --git a/src/site/_filters/paged-navigation.js b/src/site/_filters/paged-navigation.js
index d7982645384..246b6b2320a 100644
--- a/src/site/_filters/paged-navigation.js
+++ b/src/site/_filters/paged-navigation.js
@@ -17,7 +17,7 @@
 /**
  * Takes an object and determines how many links to other pages in the same paginated collection to display.
  * @param {{index: number, pages: number, href: string}} paged Page details including the `index` in the pagination, how many `pages` there are, and the `href` of the page.
- * @return {Array<{showEllipses: boolean, index: number, href: string}>} An array of up to 8 items to display, including href and index.
+ * @return {PagedNavigation[]} An array of up to 8 items to display, including href and index.
  */
 module.exports = function pagedNavigation(paged) {
   const halfTargetSize = 4;
diff --git a/src/site/_filters/posts-lighthouse-json.js b/src/site/_filters/posts-lighthouse-json.js
index a5691769f26..012ae6e8424 100644
--- a/src/site/_filters/posts-lighthouse-json.js
+++ b/src/site/_filters/posts-lighthouse-json.js
@@ -55,7 +55,7 @@ module.exports = (posts) => {
       id: post.fileSlug, // e.g. "test-post"
       lighthouse: toArray(post.data.web_lighthouse),
       title: escapeHtml(post.data.title),
-      url: post.data.canonicalUrl,
+      url: post.url,
     };
 
     const host = post.data.postHost[out.id];
diff --git a/src/site/_filters/pretty-date.js b/src/site/_filters/pretty-date.js
index 4e018e8b70a..d2703b63225 100644
--- a/src/site/_filters/pretty-date.js
+++ b/src/site/_filters/pretty-date.js
@@ -19,9 +19,18 @@ const {DateTime} = require('luxon');
 /**
  * Convert a JavaScript Date object into a human readable string.
  * @param {Date} date The date to convert.
- * @return {string} A human readable date string.
+ * @param {string|Intl.DateTimeFormat|undefined} format Desired date format.
+ * @return {string|undefined} A human readable date string.
  */
-module.exports = (date) => {
+module.exports = (date, format = 'DATE_MED') => {
+  const dateShorter = {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+  };
+  const dateTimeFormat =
+    format === 'DATE_SHORTER' ? dateShorter : DateTime[format];
+
   if (!date) {
     /* eslint-disable-next-line */
     console.warn('Date passed to prettyDate filter was undefined or null.');
@@ -29,6 +38,6 @@ module.exports = (date) => {
   }
 
   return DateTime.fromISO(date.toISOString(), {zone: 'utc'}).toLocaleString(
-    DateTime.DATE_MED,
+    dateTimeFormat,
   );
 };
diff --git a/src/site/_filters/remove-drafts.js b/src/site/_filters/remove-drafts.js
index ffdd9d88eea..78d5bcf26a5 100644
--- a/src/site/_filters/remove-drafts.js
+++ b/src/site/_filters/remove-drafts.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const {findByUrl} = require('./find-by-url');
 
 /**
@@ -5,14 +6,18 @@ const {findByUrl} = require('./find-by-url');
  * If a topic in a learning path contains only draft posts this will remove
  * the topic as well.
  * @param {Array} topics An array of posts inside of a learning path topic.
- * @param {string} lang Language of the page.
+ * @param {string?} lang Language of the page.
  * @return {Array}
  */
-module.exports = function removeDrafts(topics, lang) {
+module.exports = function removeDrafts(topics, lang = 'en') {
   return topics.reduce((accumulator, topic) => {
     // Remove draft posts from a topic.
     const posts = topic.pathItems.filter((slug) => {
-      const post = findByUrl(`/${lang}/${slug}/`);
+      if (typeof slug === 'object' && slug.url) {
+        // This is an external link.
+        return true;
+      }
+      const post = findByUrl(path.join('/', lang, slug, '/'));
       return post && !post.data.draft;
     });
     // If all of the posts in a topic are drafts then don't add the topic
diff --git a/src/site/_filters/site-render.js b/src/site/_filters/site-render.js
new file mode 100644
index 00000000000..28d4be02f51
--- /dev/null
+++ b/src/site/_filters/site-render.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const md = require('../_plugins/markdown');
+
+// Imported just for types.
+// eslint-disable-next-line no-unused-vars
+const {Environment} = require('nunjucks');
+
+/**
+ * Renders content with Nunjucks _then_ with Markdown. This emulates rendering actual page content.
+ *
+ * This relies on the shape of the Nunjucks `this` object, which has a Nunjucks `Environment`.
+ *
+ * @this {{env: Environment, ctx: Object}}
+ * @param {string} raw
+ * @param {(err: Error?, result: string?) => void} callback
+ */
+function siteRender(raw, callback) {
+  const env = this.env;
+
+  // This renders Nunjucks, then we apply Markdown to the output.
+  // We use the async callback in case Nunjucks itself calls further async code (otherwise it will
+  // throw using the sync call).
+  env.renderString(raw, this.ctx, (err, result) => {
+    if (err) {
+      callback(err, null);
+      return;
+    }
+
+    const markdownResult = md.render(result);
+    callback(null, markdownResult);
+  });
+}
+
+module.exports = {siteRender};
diff --git a/src/site/_filters/slugify.js b/src/site/_filters/slugify.js
new file mode 100644
index 00000000000..4e13f6b2eb8
--- /dev/null
+++ b/src/site/_filters/slugify.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const slugify = require('slugify');
+
+/**
+ * Slugifies string.
+ *
+ * @param {string|StringConstructor} str
+ * @return {string}
+ */
+module.exports = (str) => {
+  if (str instanceof String) {
+    str = str.toString();
+  } else if (typeof str !== 'string') {
+    return '';
+  }
+
+  return slugify(str, {
+    replacement: '-',
+    remove: /[$*_+~.()'"!/\-:@?]+/g,
+    lower: true,
+  });
+};
diff --git a/src/site/_filters/strip-query-params-dev.js b/src/site/_filters/strip-query-params-dev.js
deleted file mode 100644
index fb16fe8b13d..00000000000
--- a/src/site/_filters/strip-query-params-dev.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const isProd = process.env.ELEVENTY_ENV === 'prod';
-const noop = (url) => url;
-const strip = (url) => url.split('?')[0];
-
-// Strip query params from URLs in dev only. Used for lazy cache-busting
-// e.g. in non-prod, app.css?blah => app.css
-module.exports = isProd ? noop : strip;
diff --git a/src/site/_filters/strip.js b/src/site/_filters/strip.js
index 1af64e0a967..1189c61bc0a 100644
--- a/src/site/_filters/strip.js
+++ b/src/site/_filters/strip.js
@@ -23,6 +23,7 @@
  */
 module.exports = (text, additionallyForbidden) => {
   let cleaned = String(text || '');
+
   const forbidden = [{searchValue: /`/g, replaceValue: ''}];
 
   [...forbidden, ...(additionallyForbidden || [])].forEach((rule) => {
diff --git a/src/site/_filters/urls.js b/src/site/_filters/urls.js
new file mode 100644
index 00000000000..7a0036b44d4
--- /dev/null
+++ b/src/site/_filters/urls.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const path = require('path');
+const {supportedLocales} = require('../../../shared/locale');
+const {findByUrl} = require('./find-by-url');
+
+const i18nRegex = /i18n\/\w+\//;
+
+/**
+ * Removes any i18n data from a URL to determine the default URL.
+ * @param {string} url URL with possible i18n folder and locale in prefix.
+ * @returns {string} URL without any i18n information.
+ */
+const getDefaultUrl = (url) => {
+  if (typeof url !== 'string') {
+    return url; // shows up for `permalink: false`
+  }
+  return url.startsWith('/i18n/') ? url.replace(i18nRegex, '') : url;
+};
+
+/**
+ * Extracts relative path from a url.
+ * @param {string} url Url to be processed.
+ * @param {string} pathPrefix Part of the url the output should be relative to.
+ * @returns {string} relative path
+ */
+const getRelativePath = (url, pathPrefix) => path.relative(pathPrefix, url);
+
+/**
+ * Find i18n equivalents of the current url and check if they exist.
+ * @param {string} url Url of the original article.
+ * @returns {Array<Array<string, string>>} Array of language and url pairs.
+ */
+const getTranslatedUrls = (url) => {
+  url = getDefaultUrl(url);
+  return (
+    supportedLocales
+      .map((locale) => [locale, getLocaleSpecificUrl(locale, url)])
+      // Filter out i18n urls that do not have an existing translated file.
+      .filter((langHref) => !!findByUrl(langHref[1]))
+  );
+};
+
+/**
+ * Generate a URL that includes the locale-specific prefix.
+ * @param {string} locale One of the support locale codes.
+ * @param {string} defaultUrl Default URL of the page.
+ * @returns {string} The locale-specific prefix followed by the default URL.
+ */
+const getLocaleSpecificUrl = (locale, defaultUrl) => {
+  if (!defaultUrl.startsWith('/')) {
+    defaultUrl = '/' + defaultUrl;
+  }
+  return `/i18n/${locale}${defaultUrl}`;
+};
+
+module.exports = {
+  getDefaultUrl,
+  getLocaleSpecificUrl,
+  getRelativePath,
+  getTranslatedUrls,
+};
diff --git a/src/site/_includes/about.njk b/src/site/_includes/about.njk
new file mode 100644
index 00000000000..76b864a190b
--- /dev/null
+++ b/src/site/_includes/about.njk
@@ -0,0 +1,115 @@
+---
+layout: default
+pageScripts:
+  - '/js/about.js'
+---
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+<div class="about">
+  <section class="bg-mid-bg hero">
+    <div class="wrapper">
+      <div class="hero__columns switcher" data-direction="rev">
+        <div class="flow">
+          {% Img
+            src=banner.image,
+            width="546",
+            height="421",
+            alt=banner.title,
+            loading="lazy",
+            class="hero__decor"
+          %}
+        </div>
+        <div>
+          <span aria-hidden="true" class="hero__eyebrow">{{ banner.eyebrow }}</span>
+          <div class="hero__content flow gap-top-size-5">
+            <h1 class="hero__title">{{ banner.title }}</h1>
+            <div class="color-mid-text">{{ banner.summary }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  {# Intro start #}
+  <section class="about__intro region bg-core-bg">
+    <div class="wrapper flow" data-size='extra-narrow'>
+        <h1 class="headline__title">{{ intro.title }}</h1>
+        {% for paragraph in intro.summary %}  
+          <p class="color-mid-text">{{ paragraph.paragraph | safe }}</p>
+        {% endfor %}
+    </div>
+  </section>
+  {# Intro end #}
+  
+  {# The teams start #}
+  <section class="about__teams region bg-core-bg">
+    <div class="wrapper flow all-center">
+      <h1 class="headline__title"> {{ theTeam.title }} </h1>
+      <p class="color-mid-text"> {{ theTeam.subTitle }} </p>
+      <div class="authors gap-top-size-2">
+        {% for author in theTeam.authors %}  
+          {% set data = collections.authors[author.name] %}
+
+          {% if data %}
+            <article class="card all-center">
+              {% Img
+                src=data.image,
+                width="192",
+                height="192",
+                alt=data.title | i18n(locale),
+                decoding="async",
+                loading="lazy"
+              %}
+              <div class="card__content flow">
+                <h3 class="card__heading text-size-3">
+                  {% if data.homepage %}
+                    <a target="_blank" href="{{ data.homepage }}">{{ data.title | i18n(locale) }}</a>
+                  {% else %}
+                    {{ data.title | i18n(locale) }}
+                  {% endif %}
+                </h3>
+                <p>{{ author.role }}</p>
+              </div>
+            </article>
+          {% endif %}
+        {% endfor %}
+      </div>
+      <div>
+        <a class="button gap-top-size-2" target="_blank" data-type="primary" href="{{ theTeam.primaryButtonUrl }}">
+          {{ theTeam.primaryButtonText }}
+        </a>
+      </div>
+    </div>
+  </section>
+  {# The teams end #}
+
+  {# Chrome developers start #}
+  <section class="about__developers region bg-mid-bg">
+    <div class="wrapper flow all-center">
+      <div> {% include "icons/chrome.svg" %} </div>
+
+      <h1 class="headline__title">{{ developers.title }}</h1>
+      <p>{{ developers.summary | safe }}</p>
+      <div>
+        <a class="button" data-type="primary" href="{{ developers.primaryButtonUrl }}">{{ developers.primaryButtonText }}</a>
+      </div>
+    </div>
+  </section>
+  {# Chrome developers end #}
+
+  {# Coupled Column start #}
+  <section class="region bg-core-bg">
+    <div class="wrapper flow all-center">
+      <div class="about__coupled-column"> 
+        {% for column in coupledColumn %}
+          <div>
+            {% include column.icon %}
+            <h5>{{ column.title }}</h5>
+            <p class="color-mid-text">{{ column.summary | safe }}</p>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+  {# Coupled Column end #}
+</div>
diff --git a/src/site/_includes/base.njk b/src/site/_includes/base.njk
new file mode 100644
index 00000000000..147b3750865
--- /dev/null
+++ b/src/site/_includes/base.njk
@@ -0,0 +1,24 @@
+---
+show_banner: true
+algolia_priority: 1
+tags: []
+---
+
+<!DOCTYPE html>
+<html lang="{{lang}}">
+  <head>
+    {% include 'partials/head.njk' %}
+  </head>
+  <body class="unresolved">
+    {#
+      Make the snackbar the first item in the DOM so we don't have to steal the
+      user's focus on initial visit to show them a cookie banner. Instead, the
+      snackbar will be the first stop for the screen reader / focus.
+    #}
+    <web-snackbar-container></web-snackbar-container>
+
+    {{ content | safe }}
+
+    {% include 'partials/devrel-ribbon.njk' %}
+  </body>
+</html>
diff --git a/src/site/_includes/blog.njk b/src/site/_includes/blog.njk
new file mode 100644
index 00000000000..c209f422779
--- /dev/null
+++ b/src/site/_includes/blog.njk
@@ -0,0 +1,8 @@
+---
+layout: landing-page
+algolia_priority: 0.9
+eleventyComputed:
+  noindex: "{{ paged.index > 0 }}"
+---
+
+{% include 'partials/paged.njk' %}
diff --git a/src/site/_includes/codelab.njk b/src/site/_includes/codelab.njk
index f2bd8157143..987ecdd84db 100644
--- a/src/site/_includes/codelab.njk
+++ b/src/site/_includes/codelab.njk
@@ -1,51 +1,91 @@
 ---
-layout: layout
+layout: default
 permalink: "/{{lang}}/{{page.fileSlug}}/index.html"
 show_banner: false
+pageScripts:
+  - '/js/content.js'
 ---
+{% if path === undefined  %}
+  {% set postPaths = page | getPaths %}
+  {# Use first found path as a default path. #}
+  {% set path = paths[postPaths[0]] %}
+{% endif %}
+<web-codelab class="web-codelab" glitch="{{ glitch }}" {% if glitch_path %}path="{{ glitch_path }}"{% endif %} {% if site.percy === 'true' %}snapshot{% endif %}>
+  <div class="web-codelab__instructions">
+    <article class="prose">
+      <header class="flow gap-bottom-size-3">
 
-<div class="codelab-landing-page">
-  <web-codelab glitch="{{ glitch }}" {% if glitch_path %}path="{{ glitch_path }}"{% endif %} {% if site.env === 'test' %}testmode{% endif %}>
-    <div class="web-codelab__instructions">
-      <h1 class="w-headline w-headline--two web-codelab__headline">{{ title }}</h1>
-      {% if date %}
-        <div class="w-author__published">
-          <time>{{date | prettyDate}}</time>
-          {% if updated %} <span class="w-author__separator">•</span> Updated <time>{{ updated | prettyDate }}</time> {% endif %}
-        </div>
-      {% endif %}
+        <h1 id="{{ title | slugify }}">{{ title }}</h1>
+        {% if subhead | length %}
+          <p class="color-mid-text flow-space-base">
+            {{ subhead | md | safe }}
+          </p>
+        {% endif %}
 
-      {% if authors %}
-        <div class="w-authors w-mt--xl w-pt--sm">
-          {% for author in authors %}
-            {% Author {
-              id: author,
-              author: collections.authors[author],
-              showSocialMedia: true
-              }
-            %}
-          {% endfor %}
-        </div>
-      {% endif %}
+        {% if date %}
+          <div class="flow-space-size-1 color-mid-text text-size-0">
+            <time>{{date | prettyDate}}</time>
+            {% if updated %} — {{ 'i18n.common.updated' | i18n((locale)) }} <time>{{ updated | prettyDate }}</time> {% endif %}
+          </div>
+        {% endif %}
+
+        {% include 'partials/sign-post.njk' %}
+
+        {% if authors %}
+          <div class="cluster flow-space-size-2">
+            {% for author in authors %}
+              {% Author {
+                id: authorKey,
+                author: collections.authors[author],
+                showSocialMedia: true,
+                locale: locale
+                }
+              %}
+            {% endfor %}
+          </div>
+        {% endif %}
+      </header>
 
       {% if draft and site.env === 'dev' %}
-        <div class="w-banner w-banner--warning w-banner--body">
-          🚨 This post is a draft! 🚨
+        <div class="banner bg-state-warn-bg color-core-text">
+          <p><strong>{{ 'i18n.post.is_draft' | i18n(locale) }}</strong></p>
         </div>
       {% endif %}
 
       {{ content | safe }}
+
+      <div class="text-size-0 color-mid-text">
+        <span>
+          {% if updated %}
+            {{ 'i18n.post.last_updated' | i18n(locale) }}: <time>{{ updated | prettyDate }}</time>
+          {% else %}
+            {{ 'i18n.post.last_updated' | i18n(locale) }}: <time>{{ date | prettyDate }}</time>
+          {% endif %}
+        </span>
+        —
+        <a
+          href="{{ page.inputPath | githubLink }}"
+        >
+          {{ 'i18n.post.improve_article' | i18n(locale) }}
+        </a>
+      </div>
+
       {% if related_post %}
-        {% ArticleNavigation {
-          back: '/' + related_post,
-          backLabel: 'Return to article'
-        } %}
-      {% else %}
-        {% ArticleNavigation {
-          back: '/' + path.slug,
-          backLabel: 'Return to all articles'
-        } %}
+        {% set backUrl = '/' + related_post %}
+        {% set backLabel = 'Return to article' %}
+      {% elif path %}
+        {% set backUrl = '/' + path.slug %}
+        {% set backLabel = 'Return to all articles' %}
+      {% endif %}
+
+      {% if backLabel and backUrl %}
+        <div class="flow-space-size-2">
+          <a href="{{ backUrl }}" class="button" data-type="secondary">
+            {% include 'icons/arrow-back.svg' %}
+            <span>{{ backLabel }}</span>
+          </a>
+        </div>
       {% endif %}
-    </div>
-  </web-codelab>
-</div>
+    </article>
+  </div>
+</web-codelab>
diff --git a/src/site/_includes/collection.njk b/src/site/_includes/collection.njk
new file mode 100644
index 00000000000..f439acc5721
--- /dev/null
+++ b/src/site/_includes/collection.njk
@@ -0,0 +1,105 @@
+---
+layout: default
+algolia_priority: 1.1
+eleventyComputed:
+  title: "{{paths[pathName].title | i18n(locale)}}"
+  description: "{{paths[pathName].description | i18n(locale)}}"
+  hero: "{{paths[pathName].cover}}"
+---
+
+{% from 'macros/icon.njk' import icon, svg with context %}
+{% set path = paths[pathName] %}
+{% set topics = path.topics | removeDrafts %}
+
+<header class="hero">
+  <div class="wrapper">
+    <div class="hero__content--split">
+      <div>
+        <h1 class="text-size-6">{{ title }}</h1>
+        <p>{{path.description | i18n(locale)}}</p>
+      </div>
+      {% if path.cover %}
+        <div class="all-center">
+          {% Img
+            fetchpriority="high",
+            height=220,
+            width=330,
+            src=path.cover,
+            alt="Collection cover image",
+            class="hero__content__img"
+          %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</header>
+
+<div class="collection">
+{% if path.draft and site.env === 'dev' %}
+  <div class="banner bg-state-bad-bg color-core-text" role="banner">
+    <div class="banner__content flow">
+      🚨 This path is a draft! 🚨
+    </div>
+  </div>
+{% endif %}
+
+<div class="wrapper pad-block-size-1">
+  <div class="sidebar" data-direction="rtl">
+    <div class="pad-block-size-1 flow">
+      <h2>Overview</h2>
+      <p>{{path.overview | i18n(locale) | safe}}</p>
+      {% if path.youtubeId %}
+        {% YouTube path.youtubeId %}
+      {% endif %}
+    </div>
+    <div class="pad-block-size-1">
+      <div class="toc">
+        <div class="toc__content">
+          <h2 class="toc__header">Table of Contents</h2>
+          <ul class="toc__list">
+            {% for topic in topics %}
+              <li>
+                <div class="path__toc--item">
+                  {{ svg('../../images/icons/done.svg', {label: 'done'}) }}
+                  <a href="#{{ topic.title | i18n(locale) | slug }}">{{topic.title | i18n(locale)}}</a>
+                </div>
+              </li>
+              {% if topic.subtopics %}
+                {% for section in topic.subtopics %}
+                  <li>
+                    <div class="path__toc--item">
+                      {{ svg('../../images/icons/done.svg', {label: 'done'}) }}
+                      <a href="#{{ section.title | i18n(locale) | slug }}">{{ section.title | i18n(locale) }}</a>
+                    </div>
+                  </li>
+                {% endfor %}
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr />
+
+<div class="pad-block-size-1">
+{% for topic in topics %}
+  <div class="path__topic">
+    {% include 'partials/topic.njk' %}
+  </div>
+{% endfor %}
+</div>
+
+{% if cards %}
+  <div class="collection__cards">
+    <div class="region wrapper">
+      <h5> On this topic </h5>
+      <div class="collection__layout" aria-label="topics">
+        {% include 'partials/cards-collection.njk' %}
+      </div>
+    </div>
+  </div>
+{% endif %}
+</div>
diff --git a/src/site/_includes/components/ArticleNavigation.js b/src/site/_includes/components/ArticleNavigation.js
deleted file mode 100644
index 4db274568c7..00000000000
--- a/src/site/_includes/components/ArticleNavigation.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const md = require('markdown-it')();
-
-module.exports = ({back, backLabel}) => {
-  function renderBack(link, label) {
-    return html`
-      <a
-        class="w-article-navigation__link w-article-navigation__link--back
-          w-article-navigation__link--single gc-analytics-event"
-        data-category="web.dev"
-        data-label="navigation, go back"
-        data-action="click"
-        href="${link}"
-      >
-        ${md.renderInline(label)}
-      </a>
-    `;
-  }
-
-  return html`
-    <nav class="w-article-navigation">
-      ${back && backLabel && renderBack(back, backLabel)}
-    </nav>
-  `;
-};
diff --git a/src/site/_includes/components/Aside.js b/src/site/_includes/components/Aside.js
index 64aa0447e15..85a68151f3b 100644
--- a/src/site/_includes/components/Aside.js
+++ b/src/site/_includes/components/Aside.js
@@ -1,3 +1,5 @@
+/* global __basedir */
+
 /*
  * Copyright 2019 Google LLC
  *
@@ -14,51 +16,134 @@
  * limitations under the License.
  */
 
-const md = require('markdown-it')();
-const capitalize = require('../../_filters/capitalize');
-const titleCase = require('../../_filters/title-case');
+const {html} = require('common-tags');
+const fs = require('fs');
+// We need html: true since folks embed HTML inside of {% Aside %}.
+// See https://markdown-it.github.io/markdown-it/#MarkdownIt.new
+const md = require('markdown-it')({html: true});
+const path = require('path');
+
+const {i18n, getLocaleFromPath} = require('../../_filters/i18n');
+
+/**
+ * @this {EleventyPage}
+ */
+function Aside(content, type = 'note') {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
+
+  // CSS utility classes that vary per aside type
+  const utilities = {
+    main: '',
+    title: '',
+    icon: '',
+    body: '',
+  };
+
+  // These two get populated based on type
+  let title = '';
+  let icon = '';
+
+  // If an icon is required, it grabs the SVG source with fs
+  // because in a shortcode, we have no access to includes etc
+  const getIcon = () => {
+    if (!icon.length) {
+      return '';
+    }
 
-module.exports = (content, type = 'note') => {
-  let prefix;
+    return fs.readFileSync(
+      path.join(__basedir, 'src', 'site', '_includes', 'icons', icon),
+      'utf8',
+    );
+  };
+
+  // Generate all the configurations per aside type
   switch (type) {
     case 'note':
-      content = md.render(content);
+    default:
+      utilities.title = 'color-state-info-text';
+      utilities.main = 'bg-state-info-bg color-state-info-text';
       break;
 
     case 'caution':
+      utilities.title = 'color-state-bad-text';
+      utilities.main = 'bg-state-bad-bg color-state-bad-text';
+      icon = 'error.svg';
+      title = i18n(`i18n.common.${type}`, locale);
+      break;
+
     case 'warning':
+      utilities.icon = 'color-state-warn-text';
+      utilities.main = 'bg-state-warn-bg color-state-warn-text';
+      icon = 'warning.svg';
+      title = i18n(`i18n.common.${type}`, locale);
+      break;
+
     case 'success':
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'done.svg';
+      title = i18n(`i18n.common.${type}`, locale);
+      break;
+
     case 'objective':
-      prefix = capitalize(type);
-      // Create a <strong> with the type of aside and render it inline with
-      // the generated markdown.
-      content = `**${prefix}:** ${content}`;
-      content = md.render(content);
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'done.svg';
+      title = i18n(`i18n.common.${type}`, locale);
       break;
 
-    case 'codelab':
-      content = `**Try it!** ${content}`;
-      content = md.render(content);
+    case 'gotchas':
+      icon = 'lightbulb.svg';
+      title = i18n(`i18n.common.gotchas`, locale);
+      utilities.main = 'bg-tertiary-box-bg color-tertiary-box-text';
+      break;
+
+    case 'important':
+      icon = 'lightbulb.svg';
+      title = i18n(`i18n.common.important`, locale);
+      utilities.main = 'bg-tertiary-box-bg color-tertiary-box-text';
       break;
 
     case 'key-term':
-      prefix = titleCase(type);
-      content = `**${prefix}:** ${content}`;
-      content = md.render(content);
+      icon = 'highlighter.svg';
+      title = i18n(`i18n.common.key_term`, locale);
+      utilities.main = 'color-secondary-box-text bg-secondary-box-bg';
       break;
 
-    case 'gotchas':
-      prefix = capitalize(type);
-      // Note the gotchas prefix has a ! instead of a :
-      // And the <strong> tag should appear outside of the <p> tag
-      // generated by markdown. This forces an intentional line break.
-      content = `<strong>${prefix}!</strong> ${md.render(content)}`;
+    case 'codelab':
+      icon = 'code.svg';
+      title = i18n(`i18n.common.try_it`, locale);
+      utilities.main = 'bg-quaternary-box-bg color-quaternary-box-text';
+      break;
+
+    case 'celebration':
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'celebration.svg';
+      title = i18n(`i18n.common.${type}`, locale);
+      break;
+
+    case 'update':
+      icon = 'update.svg';
+      title = i18n(`i18n.common.${type}`, locale);
+      utilities.main = 'bg-state-update-bg color-state-update-text';
       break;
   }
 
-  return `
-<div class="w-aside w-aside--${type}">
-${content}
-</div>
-  `;
-};
+  // Make sure that we don't insert multiple newlines when this component is
+  // used, as it can break the parent Markdown rendering.
+  // See https://github.com/GoogleChrome/web.dev/issues/7640
+  const renderedContent = md.renderInline(content);
+  const titleHTML = title.length
+    ? `<p class="cluster ${utilities.title}">` +
+      `<span class="aside__icon box-block ${
+        utilities.icon
+      }">${getIcon()}</span>` +
+      `<strong>${title}</strong></p>`
+    : '';
+  const asideHTML =
+    `<aside class="aside flow ${utilities.main}">` +
+    titleHTML +
+    `<div class="${utilities.body} flow">${renderedContent}</div></aside>`;
+
+  return html`${asideHTML}`;
+}
+
+module.exports = Aside;
diff --git a/src/site/_includes/components/Assessment.js b/src/site/_includes/components/Assessment.js
index 69d871c6d3c..3e7f50e222e 100644
--- a/src/site/_includes/components/Assessment.js
+++ b/src/site/_includes/components/Assessment.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+const cheerio = require('cheerio');
 const {html} = require('common-tags');
 const md = require('markdown-it')();
 const mdBlock = require('../../_filters/md-block');
@@ -21,14 +22,13 @@ const fs = require('fs');
 const path = require('path');
 const yaml = require('js-yaml');
 const site = require('../../_data/site');
+const {generateImgixSrc} = require('./Img');
 
 // Renders the set leader at the top of the self-assessment
 function headerTemplate(assessment) {
   if (assessment.setLeader && assessment.questions.length > 1) {
     return html`
-      <div class="w-callout__blurb web-assessment__set-leader">
-        ${assessment.setLeader}
-      </div>
+      <div class="web-assessment__set-leader">${assessment.setLeader}</div>
     `;
   }
 }
@@ -170,9 +170,7 @@ function optionContentTemplate(option) {
     return;
   }
   return html`
-    <span data-role="option">
-      ${md.renderInline(option.content)}
-    </span>
+    <span data-role="option">${md.renderInline(option.content)}</span>
   `;
 }
 
@@ -183,28 +181,26 @@ function rationaleTemplate(option) {
     return;
   }
   return html`
-    <div data-role="rationale">
-      ${md.render(option.rationale)}
-    </div>
+    <div data-role="rationale">${md.render(option.rationale)}</div>
   `;
 }
 
-// Gets the assessment object from the YAML file passed in the shortcode
-// and passes it to the template functions above.
-module.exports = (page, targetAssessment) => {
-  if (!page) {
-    throw new Error(
-      `Can't create Assessment component without the page argument.`,
-    );
-  }
-
+/**
+ * Gets the assessment object from the YAML file passed in the shortcode
+ * and passes it to the template functions above.
+ * @this {EleventyPage}
+ * @param {TargetAssessment} targetAssessment
+ * @returns
+ */
+module.exports = function (targetAssessment) {
   if (!targetAssessment) {
     throw new Error(`
       Can't create Assessment component without a target assessment.
       Pass the file name, without ".assess.yml", of the desired assessment as a string.
     `);
   }
-  const filePath = page.filePathStem.replace(/index$/, '');
+
+  const filePath = this.page.filePathStem.replace(/index$/, '');
   const source = path.join(
     site.contentDir,
     filePath,
@@ -214,9 +210,22 @@ module.exports = (page, targetAssessment) => {
   const assessment = yaml.safeLoad(data);
 
   // prettier-ignore
-  return html`
-    <web-assessment class="w-callout unresolved ${assessment.questions.length === 1 && 'web-assessment--singleton'}" aria-label="Check your understanding">
+  const content = html`
+    <web-assessment aria-label="Check your understanding">
       ${headerTemplate(assessment)} ${contentTemplate(assessment)}
     </web-assessment>
   `;
+
+  const $ = cheerio.load(content);
+  $('img').each(function () {
+    // @ts-ignore
+    const oldSrc = $(this).attr('src');
+    if (/image\/(.*)\/(.*)\.([a-z]{1,4})$/.test(oldSrc)) {
+      const src = generateImgixSrc(oldSrc);
+      // @ts-ignore
+      $(this).attr('src', src);
+    }
+  });
+
+  return html`${$.html()}`;
 };
diff --git a/src/site/_includes/components/Author.js b/src/site/_includes/components/Author.js
index d921bedae0e..cc69705cacf 100644
--- a/src/site/_includes/components/Author.js
+++ b/src/site/_includes/components/Author.js
@@ -15,35 +15,72 @@
  */
 
 const {html} = require('common-tags');
-const AuthorInfo = require('./AuthorInfo');
+const {Img} = require('./Img');
+const {i18n} = require('../../_filters/i18n');
+const {defaultLocale} = require('../../_data/site');
 
-module.exports = ({id, author, showSocialMedia = false, small = false}) => {
+/**
+ * @param {AuthorParam} param0
+ * @returns {string}
+ */
+function Author({
+  id,
+  author,
+  locale = defaultLocale,
+  showSocialMedia = false,
+  showDescription = false,
+}) {
   if (!author) {
-    throw new Error(
+    console.log(
       `Can't create Author component for "${id}" without author ` +
         `information. Please check '_data/authorsData.json' and make sure the ` +
         `author you provide is a key in this object.`,
     );
+    return;
   }
-
-  if (!author.name) {
+  const title = i18n(author.title, locale);
+  if (!title) {
     throw new Error(
-      `Can't create Author with missing author.name. author object: ${JSON.stringify(
-        author,
-      )}`,
+      `Can't create Author "${id}" with missing title. ` +
+        `Please check '_data/authorsData.json' and make sure the ` +
+        `author has a title.`,
     );
   }
 
+  const img = Img({
+    src: author.image,
+    alt: title,
+    width: '64',
+    height: '64',
+    params: {
+      fit: 'crop',
+      h: '64',
+      w: '64',
+    },
+  });
+
   return html`
-    <div class="w-author">
-      <a href="/authors/${id}">
-        <img
-          class="w-author__image ${small && 'w-author__image--small'}"
-          src="/images/authors/${id}.jpg"
-          alt="${author.title}"
-        />
-      </a>
-      ${AuthorInfo({author, id, showSocialMedia})}
+    <div class="author">
+      <a class="avatar" href="${author.href}"> ${img} </a>
+      <div class="flow">
+        <cite class="author__name">
+          <a href="${author.href}">${title}</a>
+        </cite>
+        ${showDescription &&
+        html`<p class="author__bio">${i18n(author.description, locale)}</p>`}
+        ${showSocialMedia &&
+        html` <div class="author__links cluster">
+          ${author.twitter &&
+          `<a href="https://twitter.com/${author.twitter}">Twitter</a>`}
+          ${author.github &&
+          `<a href="https://github.com/${author.github}">GitHub</a>`}
+          ${author.glitch &&
+          `<a href="https://glitch.com/@${author.glitch}">Glitch</a>`}
+          ${author.homepage && `<a href="${author.homepage}">Homepage</a>`}
+        </div>`}
+      </div>
     </div>
   `;
-};
+}
+
+module.exports = Author;
diff --git a/src/site/_includes/components/AuthorCard.js b/src/site/_includes/components/AuthorCard.js
deleted file mode 100644
index ade2b29529c..00000000000
--- a/src/site/_includes/components/AuthorCard.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const {html} = require('common-tags');
-const BaseCard = require('./BaseCard');
-
-/**
- * AuthorCard used to preview authors.
- * @param {Object} collectionItem An eleventy collection item with post data.
- * @return {string}
- */
-class AuthorCard extends BaseCard {
-  constructor(collectionItem) {
-    super(collectionItem, 'w-card-author');
-  }
-
-  renderThumbnail(url, img, alt) {
-    return html`
-      <figure class="w-card-base__figure w-card-author__figure">
-        <img
-          class="w-card-author__image"
-          src="${img}"
-          alt="${alt}"
-          loading="lazy"
-        />
-      </figure>
-    `;
-  }
-}
-module.exports = (args) => new AuthorCard(args).render();
diff --git a/src/site/_includes/components/AuthorInfo.js b/src/site/_includes/components/AuthorInfo.js
deleted file mode 100644
index 0908e8b88de..00000000000
--- a/src/site/_includes/components/AuthorInfo.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-
-/* eslint-disable require-jsdoc */
-
-module.exports = ({author, id, showSocialMedia = false}) => {
-  if (!author) {
-    throw new Error('Can not generate AuthorInfo without author object');
-  }
-
-  function renderTwitter({twitter}) {
-    return html`
-      <li class="w-author__link-listitem">
-        <a class="w-author__link" href="https://twitter.com/${twitter}"
-          >Twitter</a
-        >
-      </li>
-    `;
-  }
-
-  function renderGitHub({github}) {
-    return html`
-      <li class="w-author__link-listitem">
-        <a class="w-author__link" href="https://github.com/${github}">GitHub</a>
-      </li>
-    `;
-  }
-
-  function renderGlitch({glitch}) {
-    return html`
-      <li class="w-author__link-listitem">
-        <a class="w-author__link" href="https://glitch.com/@${glitch}"
-          >Glitch</a
-        >
-      </li>
-    `;
-  }
-
-  function renderHomepage({homepage}) {
-    return html`
-      <li class="w-author__link-listitem">
-        <a class="w-author__link" href="${homepage}">Blog</a>
-      </li>
-    `;
-  }
-
-  function renderSocialMedia(author) {
-    // Check to see if the author has any social info. If they don't then we
-    // should skip rendering the list, otherwise a screen reader will announce
-    // "list with 0 items".
-    // It'd be nice if we had put all of these social accounts into a social
-    // object, but changing that now might be really annoying.
-    if (author.twitter || author.github || author.glitch || author.homepage) {
-      return html`
-        <ul class="w-author__link-list">
-          ${author.twitter && renderTwitter(author)}
-          ${author.github && renderGitHub(author)}
-          ${author.glitch && renderGlitch(author)}
-          ${author.homepage && renderHomepage(author)}
-        </ul>
-      `;
-    } else {
-      return html``;
-    }
-  }
-
-  /* eslint-disable max-len */
-  return html`
-    <div
-      class="w-author__info"
-      style="display: flex; flex-direction: column; justify-content: center;"
-    >
-      <cite class="w-author__name">
-        <a class="w-author__name-link" href="/authors/${id}">${author.title}</a>
-      </cite>
-      ${showSocialMedia && renderSocialMedia(author)}
-    </div>
-  `;
-  /* eslint-enable max-len */
-};
diff --git a/src/site/_includes/components/AuthorsDate.js b/src/site/_includes/components/AuthorsDate.js
index d0549d3b8d9..942e3347250 100644
--- a/src/site/_includes/components/AuthorsDate.js
+++ b/src/site/_includes/components/AuthorsDate.js
@@ -21,49 +21,52 @@
  */
 
 const {html} = require('common-tags');
-const authorsCollectionFn = require('../../_collections/authors');
+const {Img} = require('./Img');
 const prettyDate = require('../../_filters/pretty-date');
+const {i18n} = require('../../_filters/i18n');
+const authorsCollectionFn = require('../../_collections/authors');
+const {defaultLocale} = require('../../_data/site');
 
-const renderDate = (date) => {
-  // nb. +date checks for valid dates, not just non-null dates
-  return +date
-    ? html`
-        <div class="w-author__published">
-          <time>${prettyDate(date)}</time>
-        </div>
-      `
-    : '';
+/**
+ *
+ * @param {string} locale
+ * @param {Date} date
+ * @param {Date} [updated]
+ * @returns {string}
+ */
+const renderDate = (locale, date, updated) => {
+  // prettier-ignore
+  return html`
+      <time>${(+updated) ? `${i18n('i18n.common.updated', locale)}: ${prettyDate(updated)}` : prettyDate(date)}</time>
+    `;
 };
 
+/**
+ *
+ * @param {number} limit
+ * @param {Array<TODO>} pairs
+ * @returns {string|string[]}
+ */
 const renderAuthorImages = (limit, pairs) => {
   if (!pairs.length || pairs.length > limit) {
     return ''; // don't render images if we have none, or too many
   }
 
-  const inner = pairs
-    .map(({id, info}) => {
-      return html`
-        <div class="w-author__image--row-item">
-          <a href="${info.href}">
-            <img
-              class="w-author__image w-author__image--small"
-              src="/images/authors/${id}.jpg"
-              alt="${info.title}"
-              width="40"
-              height="40"
-              loading="lazy"
-            />
-          </a>
-        </div>
-      `;
-    })
-    .reverse();
-
-  return html`
-    <div class="w-author__image--row">
-      ${inner}
-    </div>
-  `;
+  return pairs.map(({info}) => {
+    const img = Img({
+      src: info.image,
+      alt: info.title,
+      width: '40',
+      height: '40',
+      class: '',
+      params: {
+        fit: 'crop',
+        h: '40',
+        w: '40',
+      },
+    });
+    return html` <a class="avatar" href="${info.href}">${img}</a> `;
+  });
 };
 
 const renderAuthorNames = (pairs) => {
@@ -71,67 +74,63 @@ const renderAuthorNames = (pairs) => {
     return; // don't render if no authors
   }
 
-  const inner = pairs
-    .map(({info}) => {
-      return html`
-        <a class="w-author__name-link" href="${info.href}">${info.title}</a>
-      `;
-    })
-    .join(', ');
-
+  // prettier-ignore
   return html`
-    <span class="w-author__name">
-      ${inner}
-    </span>
-  `;
+      <div
+        class="card__authors flow-space-base"
+        aria-label="authors"
+      >
+        ${pairs.map(({info}) => `<a href="${info.href}">${info.title}</a>`).join(', ')}
+      </div>
+    `;
 };
 
 /**
  * Render an authors card, including any number of authors and an optional date.
  *
- * @param {{authors: !Array<string>, date: ?Date, images: number}} arg
- * @param {Object.<string, Author>} [authorsCollectionArg]
+ * @param {{authors?: string[], date?: Date, images?: number, updated?: Date, locale?: string}} arg
+ * @param {Authors} [authorsCollection]
  * @return {string}
  */
-const renderAuthorsDate = (
-  {authors, date = null, images = 2},
-  authorsCollectionArg,
-) => {
-  const authorsCollection = authorsCollectionArg
-    ? authorsCollectionArg
-    : authorsCollectionFn();
+function renderAuthorsDate(
+  {authors, date, images = 2, updated, locale = defaultLocale},
+  authorsCollection = authorsCollectionFn(),
+) {
   const pairs = (authors || []).map((id) => {
-    const info = authorsCollection[id];
-    if (!info) {
+    const author = authorsCollection[id];
+    if (!author) {
       throw new Error(
         `Can't create Author component for "${id}" without author ` +
           `information. Please check '_data/authorsData.json' and make sure the ` +
           `author you provide is a key in this object.`,
       );
     }
-
-    if (!info.title) {
+    const title = i18n(author.title, locale);
+    if (!title) {
       throw new Error(
-        `Can't create Author with missing 'title'. author object: ${JSON.stringify(
-          info,
-        )}`,
+        `Can't create Author "${id}" with missing title. ` +
+          `Please check '_data/authorsData.json' and make sure the ` +
+          `author has a title.`,
       );
     }
 
     return {
       id,
-      info,
+      info: {
+        ...author,
+        title,
+      },
     };
   });
 
   return html`
-    <div class="w-authors__card">
+    <div class="card__avatars cluster color-mid-text">
       ${renderAuthorImages(images, pairs)}
-      <div class="w-authors__card--holder">
-        ${renderAuthorNames(pairs)} ${renderDate(date)}
+      <div class="flow flow-space-size-0">
+        ${renderAuthorNames(pairs)} ${renderDate(locale, date, updated)}
       </div>
     </div>
   `;
-};
+}
 
 module.exports = renderAuthorsDate;
diff --git a/src/site/_includes/components/Banner.js b/src/site/_includes/components/Banner.js
index 3811f5b33d3..9179f521410 100644
--- a/src/site/_includes/components/Banner.js
+++ b/src/site/_includes/components/Banner.js
@@ -14,15 +14,27 @@
  * limitations under the License.
  */
 
-const {html} = require('common-tags');
-const md = require('markdown-it')();
+const md = require('markdown-it')({
+  html: true, // Allow full links, e.g. with _target=blank.
+});
 
-module.exports = (content, type = 'info', location) => {
-  const locationOverride = location === 'body' ? 'w-banner--body' : '';
+function Banner(content, type = 'info') {
+  let utilityClasses = 'bg-state-info-bg color-core-text';
 
-  return html`
-    <div role="banner" class="w-banner w-banner--${type} ${locationOverride}">
-      ${md.renderInline(content)}
-    </div>
-  `;
-};
+  switch (type) {
+    case 'caution':
+      utilityClasses = 'bg-state-bad-bg color-core-text';
+      break;
+    case 'warning':
+      utilityClasses = 'bg-state-warn-bg color-core-text';
+      break;
+  }
+
+  return `<div role="banner" class="banner ${utilityClasses}">
+  <div class="banner__content flow">
+    ${md.renderInline(content)}
+  </div>
+  </div>`;
+}
+
+module.exports = Banner;
diff --git a/src/site/_includes/components/BaseCard.js b/src/site/_includes/components/BaseCard.js
deleted file mode 100644
index abb47c8ef32..00000000000
--- a/src/site/_includes/components/BaseCard.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const path = require('path');
-const {html} = require('common-tags');
-const md = require('../../_filters/md');
-const constants = require('../../_utils/constants');
-const getSrcsetRange = require('../../_utils/get-srcset-range');
-const tagsCollection = require('../../_collections/tags')();
-
-const AuthorsDate = require('./AuthorsDate');
-
-/* eslint-disable require-jsdoc,indent,max-len */
-
-/**
- * BaseCard used to preview collection items.
- * @param {Object} collectionItem An eleventy collection item with additional data.
- * @param {string} className CSS class to apply to `div.w-card`
- * @param {boolean} featured If card is a featured card.
- * @return {string}
- */
-class BaseCard {
-  constructor(collectionItem, className = '', featured = false) {
-    this.collectionItem = collectionItem;
-    this.collectionItem.data = this.collectionItem.data || {};
-    this.featured = featured;
-    this.className = className;
-    this.url = this.collectionItem.data.canonicalUrl;
-    this.data = this.collectionItem.data;
-    this.displayedTags = [];
-
-    for (const tag of this.data.tags || []) {
-      const foundTag = tagsCollection[tag.toLowerCase()];
-      if (foundTag) {
-        this.displayedTags.push(foundTag);
-      }
-      if (this.displayedTags.length === constants.POST_CARD_CHIP_COUNT) {
-        break;
-      }
-    }
-
-    // If the post does not provide a thumbnail, attempt to reuse the hero image.
-    // Otherwise, omit the image entirely.
-    this.thumbnail = this.data.thumbnail || this.data.hero || null;
-    this.alt = this.data.alt || '';
-  }
-
-  isDraft() {
-    if (this.data.draft) {
-      return 'w-card--draft';
-    }
-  }
-
-  renderThumbnail(url, img, alt) {
-    const imagePath = path.isAbsolute(img) ? img : path.join(url, img);
-
-    const srcsetRange = getSrcsetRange(240, 768);
-
-    return html`
-      <figure class="w-card-base__figure">
-        <img
-          class="w-card-base__image"
-          srcset="
-            ${srcsetRange.map(
-              (width) => html`
-                ${imagePath}?auto=format&fit=max&w=${width} ${width}w,
-              `,
-            )}
-          "
-          src="${imagePath}"
-          alt="${alt}"
-          width="100%"
-          height="240"
-          loading="lazy"
-        />
-      </figure>
-    `;
-  }
-
-  renderSubhead(subhead) {
-    if (!subhead) {
-      return;
-    }
-
-    return html`
-      <a class="w-card-base__link" tabindex="-1" href="${this.url}">
-        <p class="w-card-base__subhead">
-          ${md(subhead)}
-        </p>
-      </a>
-    `;
-  }
-
-  renderChips() {
-    if (!this.displayedTags.length) {
-      return;
-    }
-    return html`
-      <div class="w-card__chips w-chips">
-        ${this.displayedTags.map((displayedTag) => {
-          return html`
-            <a class="w-chip" href="${displayedTag.href}"
-              >${displayedTag.title}</a
-            >
-          `;
-        })}
-      </div>
-    `;
-  }
-
-  render() {
-    const authors = this.collectionItem.data.authors || [];
-
-    // prettier-ignore
-    return html`
-      <div class="w-card ${this.className} ${this.isDraft()}" role="listitem">
-        <article
-          class="w-card-base ${this.featured ? 'w-card-base--featured' : ''}"
-        >
-          <div
-            class="w-card-base__cover ${this.thumbnail &&
-              'w-card-base__cover--with-image'}"
-          >
-            <a
-              class="w-card-base__link"
-              tabindex="-1"
-              href="${this.url}"
-              aria-hidden="true"
-            >
-              ${this.thumbnail &&
-                this.renderThumbnail(this.url, this.thumbnail, this.alt)}
-            </a>
-          </div>
-          <div class="w-card-base__blurb">
-            <a class="w-card-base__link" href="${this.url}">
-              <h2
-                class="${this.thumbnail
-                  ? 'w-card-base__headline--with-image'
-                  : 'w-card-base__headline'}"
-              >
-                ${md(this.data.title)}
-              </h2>
-            </a>
-            ${AuthorsDate({authors, date: this.collectionItem.date})}
-            <div
-              class="w-card-base__desc ${this.className &&
-                `${this.className}__desc`}"
-            >
-              ${this.renderSubhead(this.data.subhead)}
-              ${this.renderChips()}
-            </div>
-          </div>
-        </article>
-      </div>
-    `;
-  }
-}
-
-module.exports = BaseCard;
diff --git a/src/site/_includes/components/Blockquote.js b/src/site/_includes/components/Blockquote.js
deleted file mode 100644
index f0b6618334d..00000000000
--- a/src/site/_includes/components/Blockquote.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const md = require('markdown-it')();
-
-module.exports = (content, source) => {
-  if (!source) {
-    /* eslint-disable max-len */
-    throw new Error(
-      `Can't create Blockquote component without a source. Did you forget to pass the source as a string?`,
-    );
-    /* eslint-enable max-len */
-  }
-
-  return html`
-    <blockquote>
-      ${content}
-      <cite>
-        ${md.renderInline(source)}
-      </cite>
-    </blockquote>
-  `;
-};
diff --git a/src/site/_includes/components/Breadcrumbs.js b/src/site/_includes/components/Breadcrumbs.js
deleted file mode 100644
index 24ab64bf86a..00000000000
--- a/src/site/_includes/components/Breadcrumbs.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const path = require('path');
-const site = require('../../_data/site');
-const {html} = require('common-tags');
-
-/* eslint-disable max-len */
-
-module.exports = ({title, slug}) => {
-  return html`
-    <ul class="w-breadcrumbs">
-      <li class="w-breadcrumbs__crumb">
-        <a
-          class="w-breadcrumbs__link w-breadcrumbs__link--left-justify gc-analytics-event"
-          data-category="web.dev"
-          data-label="post, home breadcrumb"
-          data-action="click"
-          href="/"
-        >
-          ${site.titleVariation}
-        </a>
-      </li>
-
-      <svg
-        class="w-breadcrumbs__icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        aria-hidden="true"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
-      </svg>
-
-      <li class="w-breadcrumbs__crumb">
-        <a
-          class="w-breadcrumbs__link gc-analytics-event"
-          data-category="web.dev"
-          data-label="post, path breadcrumb"
-          data-action="click"
-          href=${path.join('/', slug)}
-        >
-          ${title}
-        </a>
-      </li>
-    </ul>
-  `;
-};
diff --git a/src/site/_includes/components/CodePattern.js b/src/site/_includes/components/CodePattern.js
new file mode 100644
index 00000000000..294fa288714
--- /dev/null
+++ b/src/site/_includes/components/CodePattern.js
@@ -0,0 +1,96 @@
+const Prism = require('prismjs');
+const {i18n} = require('../../_filters/i18n');
+const {defaultLocale} = require('../../_data/site');
+const patterns = require('../../_data/patterns').patterns;
+
+/**
+ * @fileoverview A component to display code samples, organized in tabs,
+ *   and a code demo side-by-side.
+ */
+
+/**
+ * Height of a one line of code, in px. Used to calculate the default height
+ *   of the component.
+ */
+const lineHeight = 24;
+
+/**
+ * Margin of the <pre> element, in px. Used to calculate the default height
+ *   of the component.
+ */
+const preMargin = 2 * 16;
+
+/**
+ * Tab list height, in px. Used to calculate the default height
+ *   of the component.
+ */
+const tabListHeight = 54;
+
+/**
+ * A component to display code samples and a code demo side-by-side.
+ * @param {string} patternId Id of the Code Pattern to be displayed.
+ * @param {number} height Optional desired height of the demo frame.
+ */
+module.exports = (patternId, height) => {
+  const pattern = patterns[patternId];
+  if (!pattern) {
+    return '';
+  }
+  const prismTypes = ['html', 'css', 'js'];
+  const assetLines = [];
+  const assets = Object.values(pattern.assets)
+    .map((asset) => {
+      const type = prismTypes.includes(asset.type) ? asset.type : 'text';
+      assetLines.push(asset.content.split('\n').length);
+
+      const isSupportingAsset = asset.name.includes('supporting');
+      const tabName = isSupportingAsset
+        ? `${i18n('i18n.patterns.supporting', defaultLocale)} ${type}`
+        : asset.type;
+
+      // Jake says:
+      // Because Prism outputs preformatted code, it will often contain blank
+      // lines, eg if the source contains blank lines. Unfortunately the
+      // markdown parser sees that as "the HTML has ended, process as markdown".
+      // This results in lots of malformed HTML that may appear fine in dev,
+      // but may appear differently once the minifier has chewed through it.
+      // To avoid this, 'blank lines' (which in markdown-speak can include
+      // whitespace) are replaced with an empty span, followed by any
+      // whitespace. The span is not an empty line in markdown-speak, so it
+      // continues to defer to HTML source.
+      const content = Prism.highlight(
+        asset.content,
+        Prism.languages[type],
+        type,
+      ).replace(/^(\s*?)$/gm, '<span></span>$1');
+
+      return `<web-tab title="${tabName}" data-label="${tabName}">
+          <pre><code class="language-${asset.type}">${content}</code></pre>
+        </web-tab>`;
+    })
+    .join('\n');
+
+  const defaultHeight =
+    Math.max(...assetLines) * lineHeight + preMargin + tabListHeight;
+  height = height || pattern.height || defaultHeight;
+
+  return `<div class="code-pattern">
+    <div class="code-pattern__content">
+      <div class="code-pattern__demo" style="min-height: ${height}px">
+        <iframe src="${pattern.demo}" title="Demo" height="${height}" loading="lazy"></iframe>
+      </div>
+      <div class="code-pattern__assets" style="height: ${height}px">
+        <web-tabs limit="3">${assets}</web-tabs>
+      </div>
+    </div>
+    <div class="code-pattern__meta">
+      <a
+        href="${pattern.demo}"
+        target="_blank"
+        class="code-pattern__icon"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>Open demo
+      </a>
+    </div>
+  </div>`;
+};
diff --git a/src/site/_includes/components/CodelabsCallout.js b/src/site/_includes/components/CodelabsCallout.js
index b7420747a0c..d2e3b5eef9a 100644
--- a/src/site/_includes/components/CodelabsCallout.js
+++ b/src/site/_includes/components/CodelabsCallout.js
@@ -15,47 +15,90 @@
  */
 
 const {html} = require('common-tags');
+
+const {defaultLanguage} = require('../../../lib/utils/language');
 const {findByUrl} = require('../../_filters/find-by-url');
 const md = require('../../_filters/md');
 
-/* eslint-disable require-jsdoc */
+/**
+ * Find matching collection items given a language code.
+ *
+ * @param {string[]} slugs
+ * @param {string} lang
+ * @returns {EleventyCollectionItem[]}
+ */
+function filterCodelabsByLang(slugs, lang) {
+  return slugs
+    .map((slug) => findByUrl(`/${lang}/${slug}/`))
+    .filter((item) => item); // filter out any undefined entries
+}
 
-module.exports = (slugs, lang) => {
+/**
+ * Generates codelab links HTML.
+ *
+ * @param {string[]|string} slugs
+ * @param {string} lang
+ * @returns {string}
+ */
+function CodelabsCallout(slugs, lang) {
   // Coerce slugs to Array just in case someone pasted in a single slug string.
   slugs = slugs instanceof Array ? slugs : [slugs];
 
-  const codelabs = slugs.map((slug) => findByUrl(`/${lang}/${slug}/`));
-  if (!codelabs.length) {
-    /* eslint-disable-next-line */
-    console.warn(`Did not find any matching codelabs.`);
-    return;
+  let codelabs = filterCodelabsByLang(slugs, lang);
+  // If there's no language-specific codelab, returning the default (English)
+  // language one is preferable.
+  if (codelabs.length === 0) {
+    codelabs = filterCodelabsByLang(slugs, defaultLanguage);
+  }
+  // If there's still no codelabs found, return an empty string (not undefined).
+  if (codelabs.length === 0) {
+    return '';
   }
 
-  function renderCodelab(codelab) {
-    return html`
-      <li class="w-callout__listitem">
-        <a
-          class="w-callout__link w-callout__link--codelab"
-          href="${codelab.data.canonicalUrl}"
-        >
-          ${md(codelab.data.title)}
-        </a>
-      </li>
+  return `
+      <aside class="callout bg-quaternary-box-bg color-quaternary-box-text">
+        <div class="auto-grid">
+          <div class="callout__content flow">
+            <div class="callout__branding cluster gutter-base">
+              <!-- icons/code.svg -->
+              <svg width="24" height="24" fill="currentColor" aria-label="Code brackets" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.41 16.59 8 18l-6-6 6-6 1.41 1.41L4.83 12l4.58 4.59zm5.18-9.18L16 6l6 6-6 6-1.41-1.41L19.17 12l-4.58-4.59z"/></svg>
+              Codelabs
+            </div>
+            <h2 class="callout__title">See it in action</h2>
+            <p>Learn more and put this guide into action.</p>
+          </div>
+          <nav class="callout__links repel" aria-label="Codelabs links">
+            <ul role="list">
+              ${codelabs.map(CodelabsCallout.renderCodelab).join('')}
+            </ul>
+          </nav>
+        </div>
+      </aside>
     `;
-  }
+}
 
+/**
+ * @param {EleventyCollectionItem} codelab
+ * @returns {string}
+ */
+CodelabsCallout.renderCodelab = function (codelab) {
+  const svg = html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m8 7.34 4.58 4.365L8 16.07l1.41 1.34 6-5.705L9.41 6 8 7.34Z" />
+  </svg>`;
   return html`
-    <div class="w-callout w-callout--2col">
-      <div class="w-callout__header">
-        <h2 class="w-callout__lockup w-callout__lockup--codelab">Codelabs</h2>
-        <div class="w-callout__headline">See it in action</div>
-        <div class="w-callout__blurb">
-          Learn more and put this guide into action.
-        </div>
-      </div>
-      <ul class="w-unstyled-list w-callout__list">
-        ${codelabs.map(renderCodelab)}
-      </ul>
-    </div>
+    <li>
+      <a href="${codelab.url}">
+        <span>${md(codelab.data.title)}</span>
+        ${svg}
+      </a>
+    </li>
   `;
 };
+
+module.exports = CodelabsCallout;
diff --git a/src/site/_includes/components/Compare.js b/src/site/_includes/components/Compare.js
index cce0b3ef9d9..bf28c69e64d 100644
--- a/src/site/_includes/components/Compare.js
+++ b/src/site/_includes/components/Compare.js
@@ -14,14 +14,21 @@
  * limitations under the License.
  */
 
-const {html} = require('common-tags');
+const {i18n, getLocaleFromPath} = require('../../_filters/i18n');
 
-/* eslint-disable require-jsdoc */
+/**
+ * @this {EleventyPage}
+ * @param {string} content Markdown with the content for the compare element.
+ * @param {string} type Compare element type: 'worse' or 'better'.
+ * @param {string} labelOverride Custom label for the compare element.
+ */
+function Compare(content, type, labelOverride) {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
 
-module.exports = (content, type, labelOverride) => {
   if (!type) {
     throw new Error(
-      "Can't create Compare component without a type. Did you forget to pass the type as a string?",
+      `Can't create Compare component without a type in ${this.page.inputPath}.
+      Did you forget to pass the type as a string?`,
     );
   }
 
@@ -29,11 +36,11 @@ module.exports = (content, type, labelOverride) => {
   if (!label) {
     switch (type) {
       case 'worse':
-        label = "Don't";
+        label = i18n(`i18n.common.dont`, locale);
         break;
 
       case 'better':
-        label = 'Do';
+        label = i18n(`i18n.common.do`, locale);
         break;
 
       default:
@@ -41,12 +48,9 @@ module.exports = (content, type, labelOverride) => {
     }
   }
 
-  return html`
-    <figure class="w-compare">
-      <p class="w-compare__label w-compare__label--${type}">
-        ${label}
-      </p>
-      ${content}
-    </figure>
-  `;
-};
+  // prettier-ignore
+  return `<figure class="compare flow" data-type="${type}" data-size="full"><p class="compare__label">${label}</p>
+${content}</figure>`;
+}
+
+module.exports = Compare;
diff --git a/src/site/_includes/components/CompareCaption.js b/src/site/_includes/components/CompareCaption.js
index 8fc829a119e..edb1ca83cd6 100644
--- a/src/site/_includes/components/CompareCaption.js
+++ b/src/site/_includes/components/CompareCaption.js
@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-const {oneLine} = require('common-tags');
-const md = require('markdown-it')();
-
-/* eslint-disable require-jsdoc */
+/**
+ * @param {string} content Markdown with the content for the compare element.
+ * @return {string}
+ */
+function CompareCaption(content) {
+  return `<figcaption class="compare__caption">
+${content}</figcaption>`;
+}
 
-module.exports = (content) => {
-  return oneLine`
-    <figcaption class="w-compare__caption">
-      <p>${md.renderInline(content)}</p>
-    </figcaption>
-  `;
-};
+module.exports = CompareCaption;
diff --git a/src/site/_includes/components/Details.js b/src/site/_includes/components/Details.js
deleted file mode 100644
index 851ad22d192..00000000000
--- a/src/site/_includes/components/Details.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-
-module.exports = (content, state) => {
-  const stateOverride = state === 'open' ? 'open' : '';
-
-  return html`
-    <details class="w-details" ${stateOverride}>
-      ${content}
-    </details>
-  `;
-};
diff --git a/src/site/_includes/components/DetailsSummary.js b/src/site/_includes/components/DetailsSummary.js
deleted file mode 100644
index 85d33088051..00000000000
--- a/src/site/_includes/components/DetailsSummary.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// Need markdown-it for nested shortcodes to render as expected
-const md = require('markdown-it')();
-const {html} = require('common-tags');
-
-/* eslint-disable max-len */
-
-/**
- * Render a Details panel preview as an HTML string.
- * @param {string} contentArr Array of content split at new lines.
- * @return {string}
- */
-function renderPreview(contentArr) {
-  if (!contentArr.length) return '';
-
-  const preview = contentArr.join('\n');
-
-  return html`<p class="w-details__preview">${md.renderInline(preview)}</p>`;
-}
-
-module.exports = (content, headingLevel = 'h2') => {
-  const validLevels = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-
-  if (!validLevels.includes(headingLevel)) {
-    throw new Error(
-      'Invalid heading level for Details component. Use h2, h3, h4, h5, h6, or p.',
-    );
-  }
-
-  const contentArr = content.trim().split('\n');
-  const heading = contentArr.shift();
-
-  // Has to be on one line to keep whitespace out of the heading element
-  return html`
-    <summary class="w-details__summary">
-      <${headingLevel} class="w-details__header">
-        ${md.renderInline(heading)}
-      </${headingLevel}>
-      ${renderPreview(contentArr)}
-    </summary>
-  `;
-};
diff --git a/src/site/_includes/components/EventTable.js b/src/site/_includes/components/EventTable.js
deleted file mode 100644
index f41d1573a3d..00000000000
--- a/src/site/_includes/components/EventTable.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const slugify = require('slugify');
-
-const AuthorsDate = require('./AuthorsDate');
-
-/**
- * @param {!Array<{title: string, from: !Date, sessions: !Array<any>}>} days
- * @param {Object.<string, Author>} authorsCollection
- * @return {string}
- */
-module.exports = (days, authorsCollection) => {
-  const defaultScheduleDay = 0; // we're post-event, use the first day as default
-
-  const slugs = {};
-  const slugForTitle = (title) => {
-    // Find a slug for this title, but prevent duplicate IDs.
-    const base = slugify(title, {
-      lower: true,
-      strict: true,
-      remove: /[^-\w _]/, // remove anything not in: basic word chars, space, - and _
-    });
-    let id = base;
-    let suffix = 0;
-    while (id in slugs) {
-      id = base + ++suffix;
-    }
-    slugs[id] = title;
-    return id;
-  };
-
-  const renderSession = (
-    playlistId,
-    {speaker, title, blurb = '', abstract, videoId},
-  ) => {
-    // Always pass an Array of author IDs.
-    const authors = typeof speaker === 'string' ? [speaker] : speaker;
-
-    const id = slugForTitle(title);
-
-    // Coerce to array or empty array.
-    abstract =
-      (abstract && (typeof abstract === 'string' ? [abstract] : abstract)) ||
-      [];
-
-    let showVideoLink = false;
-    const u = new URL('https://www.youtube.com/watch');
-    if (videoId) {
-      showVideoLink = true;
-      u.searchParams.set('v', videoId);
-    }
-    if (playlistId) {
-      u.searchParams.set('list', playlistId);
-    }
-
-    const videoLink = showVideoLink
-      ? html`<a
-          href="${u.toString()}"
-          target="_blank"
-          class="w-event-schedule__video"
-          >Watch on YouTube</a
-        >`
-      : '';
-
-    return html`
-      <div class="w-event-schedule__row" data-session-id=${id}>
-        <div class="w-event-schedule__cell w-event-schedule__speaker">
-          ${AuthorsDate({authors}, authorsCollection)}
-        </div>
-        <div class="w-event-schedule__cell w-event-schedule__session">
-          <a class="w-event-schedule__open" href="#${id}">
-            <span>${title}</span>
-          </a>
-          ${videoLink}
-          <div class="w-event-schedule__blurb">
-            ${blurb}
-          </div>
-          <div class="w-event-schedule__abstract" hidden>
-            ${abstract.map((part) => html`<p>${part}</p>`)}
-          </div>
-        </div>
-      </div>
-    `;
-  };
-
-  const renderDay = (day, index) => {
-    // nb. We don't render a fallback time for browsers without JS.
-    return html`
-      <div
-        data-label="${day.title}"
-        class="${index === defaultScheduleDay ? 'w-tabs-default' : ''}"
-      >
-        <div class="w-event-section__schedule_header">
-          <web-event-time
-            class="unresolved"
-            datetime="${day.date.toISOString()}"
-            duration="${day.duration}"
-          ></web-event-time>
-        </div>
-
-        <div class="w-event-schedule">
-          ${day.sessions.map(renderSession.bind(null, day.playlistId))}
-        </div>
-      </div>
-    `;
-  };
-
-  return html`
-    <web-event-schedule>
-      <web-tabs class="w-event-tabs unresolved" label="schedule">
-        ${days.map(renderDay)}
-      </web-tabs>
-    </web-event-schedule>
-  `;
-};
diff --git a/src/site/_includes/components/Glitch.js b/src/site/_includes/components/Glitch.js
index 3f9a6549a89..d1a0175fa54 100644
--- a/src/site/_includes/components/Glitch.js
+++ b/src/site/_includes/components/Glitch.js
@@ -19,18 +19,43 @@ const {escape, stringify} = require('querystring');
 const iframe = require('./IFrame');
 
 /**
+ * Validates allow sources are an array and lower case.
+ * If allow sources are a string, it will be split by the `;` character.
  *
- * @param {string | { id: string; path?: string; previewSize?: number; style?: string; }} param
+ * @param {string|string[]} s
+ * @returns {string[]}
+ */
+function expandAllowSource(s) {
+  if (typeof s === 'string') {
+    s = s.split(/;\s*/g);
+  }
+  return s.map((a) => a.toLowerCase());
+}
+
+/**
+ *
+ * @param {string | GlitchParam } param
  * @return string
  */
 module.exports = (param) => {
-  const allow =
-    'camera; clipboard; clipboard-read; clipboard-write; geolocation; encrypted-media; microphone; midi; vr;';
+  const defaultAllow = [
+    'camera',
+    'clipboard-read',
+    'clipboard-write',
+    'encrypted-media',
+    'geolocation',
+    'microphone',
+    'midi',
+  ];
+
+  /** @type GlitchParam */
   let glitchProps = {
+    allow: [],
+    height: 420,
     id: null,
     path: '',
+    highlights: '',
     previewSize: 100,
-    height: 420,
   };
 
   if (typeof param === 'string') {
@@ -39,7 +64,14 @@ module.exports = (param) => {
     glitchProps = {...glitchProps, ...param};
   }
 
-  const {id, path, previewSize, height} = glitchProps;
+  const {
+    allow: userAllow,
+    id,
+    path,
+    highlights,
+    previewSize,
+    height,
+  } = glitchProps;
 
   if (!id) {
     return;
@@ -53,10 +85,17 @@ module.exports = (param) => {
   if (path) {
     queryParams.path = path;
   }
+  if (highlights) {
+    queryParams.highlights = highlights;
+  }
   if (typeof previewSize === 'number') {
     queryParams.previewSize = previewSize;
   }
 
+  const allow = Array.from(
+    new Set([...defaultAllow, ...expandAllowSource(userAllow)]),
+  ).join('; ');
+
   const src = `${url}?${stringify(queryParams)}`;
 
   return html`
diff --git a/src/site/_includes/components/Hero.js b/src/site/_includes/components/Hero.js
deleted file mode 100644
index ddd08ab99f1..00000000000
--- a/src/site/_includes/components/Hero.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const getSrcsetRange = require('../../_utils/get-srcset-range');
-
-module.exports = ({hero, alt, heroPosition, heroFit = 'cover'}) => {
-  const srcsetRange = getSrcsetRange();
-
-  // prettier-ignore
-  return html`
-    <img
-      class="w-hero w-hero--${heroFit} ${heroPosition ? `w-hero--${heroPosition}` : ''}"
-      width="1600"
-      height="480"
-      sizes="100vw"
-      srcset="${srcsetRange.map((width) => html`
-        ${hero}?auto=format&fit=max&w=${width} ${width}w,
-      `)}"
-      src="${hero}"
-      alt="${alt}"
-    />
-  `;
-};
diff --git a/src/site/_includes/components/Img.js b/src/site/_includes/components/Img.js
new file mode 100644
index 00000000000..7b7bb2407b5
--- /dev/null
+++ b/src/site/_includes/components/Img.js
@@ -0,0 +1,34 @@
+const {imgix: imgixFilter} = require('webdev-infra/filters/imgix');
+const {Img: BuildImgShortcode} = require('webdev-infra/shortcodes/Img');
+
+const {imgixDomain} = require('../../_data/site');
+
+/**
+ * Takes an imgix url or path and generates an `<img>` element with `srcset`.
+ *
+ * @param {import('webdev-infra/types').ImgArgs} args Named arguments
+ * @return {string}
+ */
+const Img = BuildImgShortcode(imgixDomain);
+
+function MetaImg(args) {
+  const IS_SVG_IMG = /\.svg$/i.test(args.src);
+
+  if (!args.params?.auto && !IS_SVG_IMG) {
+    args.params = args.params || {};
+    args.params.auto = 'format';
+  }
+
+  return Img(args);
+}
+
+/**
+ * Generates src URL of image from imgix path or URL.
+ *
+ * @param {string} src Path (or URL) for image.
+ * @param {import('webdev-infra/types').TODOObject} [params] Imgix API params.
+ * @return {string}
+ */
+const generateImgixSrc = imgixFilter(imgixDomain);
+
+module.exports = {Img: MetaImg, generateImgixSrc};
diff --git a/src/site/_includes/components/Instruction.js b/src/site/_includes/components/Instruction.js
index 3506616fe72..0a0cbe1e4e7 100644
--- a/src/site/_includes/components/Instruction.js
+++ b/src/site/_includes/components/Instruction.js
@@ -15,17 +15,21 @@
  */
 
 const {html} = require('common-tags');
+const {i18n, getLocaleFromPath} = require('../../_filters/i18n');
 const capitalize = require('../../_filters/capitalize');
 
 /**
  * A component to help DRY up common lists of instructions.
  * This helps ensure consistency in our docs and makes it easy
  * to respond when Glitch changes their UI.
+ * @this {EleventyPage}
  * @param {string} type The type of instruction to print.
  * @param {string} listStyle The list style to use. Defaults to 'ul'.
  * @return {string} A list of instructions.
  */
-module.exports = (type, listStyle = 'ul') => {
+module.exports = function (type, listStyle = 'ul') {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
+
   let instruction;
   let substitution;
   let bullet;
@@ -51,7 +55,7 @@ module.exports = (type, listStyle = 'ul') => {
 
   // Common phrases shared across multiple instructions.
   const shared = {
-    devtools: `${bullet}Press \`Control+Shift+J\` (or \`Command+Option+J\` on Mac) to open DevTools.`,
+    devtools: `${bullet}${i18n('i18n.instruction.devtools_shared', locale)}`,
   };
 
   switch (type) {
@@ -62,9 +66,7 @@ module.exports = (type, listStyle = 'ul') => {
     // prettier-ignore
     case 'console':
       instruction = html`
-        ${bullet}Click **Tools**.
-        ${bullet}Click **Logs**.
-        ${bullet}Click **Console**.
+        ${bullet}Click **Terminal** (note: if the Terminal button does not show you may need to use the Fullscreen option).
       `;
       break;
 
@@ -87,7 +89,7 @@ module.exports = (type, listStyle = 'ul') => {
         <img
           src="/images/glitch/fullscreen.svg"
           alt="fullscreen"
-          style="padding: 4px 8px; opacity: .5; border: 1px solid #c3c3c3; border-radius: 5px;"
+          style="padding: 4px 8px; opacity: .5; border: 1px solid #c3c3c3; border-radius: 5px; margin-top: 0;"
         />.
       `;
       break;
@@ -99,7 +101,10 @@ module.exports = (type, listStyle = 'ul') => {
       break;
 
     case 'disable-cache':
-      instruction = html`${bullet}Select the **Disable cache** checkbox.`;
+      instruction = html`${bullet}${i18n(
+        'i18n.instruction.disable_cache',
+        locale,
+      )}`;
       break;
 
     case 'reload-app':
@@ -107,7 +112,10 @@ module.exports = (type, listStyle = 'ul') => {
       break;
 
     case 'reload-page':
-      instruction = html`${bullet}Reload the page.`;
+      instruction = html`${bullet}${i18n(
+        'i18n.instruction.reload_page',
+        locale,
+      )}`;
       break;
 
     case 'start-profiling':
@@ -116,7 +124,7 @@ module.exports = (type, listStyle = 'ul') => {
         <img
           src="/images/icons/reload.svg"
           alt="reload"
-          style="width: 1.2em; padding: 0px 0px 2px 2px; opacity: .5"
+          style="width: 1.2em; padding: 0px 0px 2px 2px; opacity: .5; margin-top: 0;"
         />.
       `;
       break;
@@ -141,10 +149,15 @@ module.exports = (type, listStyle = 'ul') => {
       instruction = html`${shared.devtools}`;
       substitution = type.substring('devtools-'.length);
       if (substitution) {
+        const tab = i18n(`i18n.instruction.${substitution}`, locale);
+        const step = i18n('i18n.instruction.devtools_click', locale).replace(
+          '$0',
+          `${tab}`,
+        );
         // prettier-ignore
         instruction = html`
           ${instruction}
-          ${bullet}Click the **${capitalize(substitution)}** tab.
+          ${bullet}${step}
         `;
       }
       break;
@@ -167,9 +180,9 @@ module.exports = (type, listStyle = 'ul') => {
       // prettier-ignore
       instruction = html`
         ${shared.devtools}
-        ${bullet}Click the **Audits** tab.
-        ${bullet}Select the **${substitution}** checkbox.
-        ${bullet}Click **Run audits**.
+        ${bullet}Click the **Lighthouse** tab.
+        ${bullet}Make sure the **${substitution}** checkbox is selected in the *Categories* list.
+        ${bullet}Click the **Generate report** button.
       `;
       break;
 
diff --git a/src/site/_includes/components/Label.js b/src/site/_includes/components/Label.js
index 57c486aba11..16d2a883f8d 100644
--- a/src/site/_includes/components/Label.js
+++ b/src/site/_includes/components/Label.js
@@ -18,5 +18,5 @@ const {html} = require('common-tags');
 const md = require('markdown-it')();
 
 module.exports = (content) => {
-  return html`<p class="w-label">${md.renderInline(content)}</p>`;
+  return html`<p class="label">${md.renderInline(content)}</p>`;
 };
diff --git a/src/site/_includes/components/Meta.js b/src/site/_includes/components/Meta.js
index 31b565eb9dc..8ddc4b5a523 100644
--- a/src/site/_includes/components/Meta.js
+++ b/src/site/_includes/components/Meta.js
@@ -13,19 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-const path = require('path');
+const {html} = require('common-tags');
+const {generateImgixSrc} = require('./Img');
 const site = require('../../_data/site');
 const strip = require('../../_filters/strip');
-const {html} = require('common-tags');
+const {getTranslatedUrls} = require('../../_filters/urls');
+const {findByUrl} = require('../../_filters/find-by-url');
 
-module.exports = (locale, page, collections, renderData = {}) => {
+const i18nRegex = /i18n\/\w+\//;
+
+module.exports = (locale, page, renderData = {}) => {
   const forbiddenCharacters = [{searchValue: /"/g, replaceValue: '&quot;'}];
   const pageData = {
-    ...collections.all.find((item) => item.fileSlug === page.fileSlug).data,
+    ...findByUrl(page.url)?.data,
     ...renderData,
+    page,
   };
-  const pageUrl = pageData.canonicalUrl;
+  const pageUrl = pageData.page.url;
+  const canonical = new URL(pageUrl, site.url).href;
 
   /**
    * Find post meta data associated with a social media platform.
@@ -51,21 +56,19 @@ module.exports = (locale, page, collections, renderData = {}) => {
       social.description || (social.path && social.path.description),
       forbiddenCharacters,
     );
-    let thumbnail = social.thumbnail || social.hero;
+    let thumbnail = social.thumbnail || social.hero || site.thumbnail;
     const alt = social.alt || site.name;
+    let imgixOptions = {};
 
-    // If the page doesn't have social media images, a hero, or a thumbnail,
-    // fallback to using the site's default thumbnail.
-    // Return a full path to the image using our image CDN.
-    if (!thumbnail) {
-      thumbnail = new URL(site.thumbnail, site.imageCdn);
-    } else {
-      thumbnail = new URL(path.join(pageUrl, thumbnail), site.imageCdn);
+    const IS_SVG_IMG = /\.svg$/i.test(thumbnail);
+    if (!IS_SVG_IMG) {
+      imgixOptions = {
+        fit: 'max',
+        w: 1200,
+        fm: 'auto',
+      };
     }
-    thumbnail.searchParams.set('auto', 'format');
-    thumbnail.searchParams.set('fit', 'max');
-    thumbnail.searchParams.set('w', 1200);
-    thumbnail = thumbnail.toString();
+    thumbnail = generateImgixSrc(thumbnail, imgixOptions);
 
     return {title, description, thumbnail, alt};
   }
@@ -94,7 +97,7 @@ module.exports = (locale, page, collections, renderData = {}) => {
     return html`
       <meta property="og:locale" content="${locale}" />
       <meta property="og:type" content="${type}" />
-      <meta property="og:url" content="${new URL(pageUrl, site.url).href}" />
+      <meta property="og:url" content="${canonical}" />
       <meta property="og:site_name" content="${site.title}" />
       <meta property="og:title" content="${meta.title}" />
       <meta property="og:description" content="${meta.description}" />
@@ -106,21 +109,53 @@ module.exports = (locale, page, collections, renderData = {}) => {
 
   function renderTwitterMeta() {
     const meta = getMetaByPlatform('twitter');
+    /**
+     * We replace the `<` and `>` characters for Twitter because HTML tags
+     * get rendered as HTML and therefore do not show up on Twitter cards.
+     * So in order to render the tag correctly, we replace them with pointing
+     * angle quotation marks. While we considered using the HTML entities
+     * `&lt;` and `&gt;`, Twitter seems to render them as `<` and `>` anyway.
+     */
+    const htmlCharacters = [
+      {searchValue: /</g, replaceValue: '&lsaquo;'},
+      {searchValue: />/g, replaceValue: '&rsaquo;'},
+    ];
+    const title = strip(meta.title, htmlCharacters);
+    const description = strip(meta.description, htmlCharacters);
+
     return html`
       <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:title" content="${meta.title}" />
-      <meta name="twitter:description" content="${meta.description}" />
+      <meta name="twitter:title" content="${title}" />
+      <meta name="twitter:description" content="${description}" />
       <meta name="twitter:image" content="${meta.thumbnail}" />
     `;
   }
 
+  function renderHreflangMeta() {
+    if (!pageUrl) {
+      // This can happen when a page is not intended to be included in the final
+      // output, e.g. has a permalink: false.
+      return;
+    }
+    const url = pageUrl.startsWith('/i18n/')
+      ? pageUrl.replace(i18nRegex, '')
+      : pageUrl;
+
+    // Find i18n equivalents of the current url and check if they exist.
+    const langhrefs = getTranslatedUrls(pageUrl).map((langhref) => {
+      const href = new URL(langhref[1], site.url).href;
+      return `<link rel="alternate" hreflang="${langhref[0]}" href="${href}" />`;
+    });
+    // If some i18n equivalents are found, add also the default language (en).
+    if (langhrefs.length) {
+      const enHref = new URL(url, site.url).href;
+      langhrefs.push(`<link rel="alternate" hreflang="en" href="${enHref}" />`);
+    }
+    return langhrefs.join('\n');
+  }
+
   function renderCanonicalMeta() {
-    return html`
-      <link
-        rel="canonical"
-        href="${pageData.canonical ? pageData.canonical : site.url + pageUrl}"
-      />
-    `;
+    return html` <link rel="canonical" href="${canonical}" />`;
   }
 
   function renderRSS() {
@@ -138,6 +173,25 @@ module.exports = (locale, page, collections, renderData = {}) => {
     `;
   }
 
+  function renderPageMeta() {
+    // Ensure multiple metadata are always reported the same way.
+    const sortAndDedupe = (list) => {
+      return list && [...new Set(list.sort())].join();
+    };
+
+    const authors = sortAndDedupe(pageData.authors);
+    const paths = sortAndDedupe(pageData.postToPaths[page.fileSlug]);
+    const tags = sortAndDedupe(
+      pageData.tags?.filter((t) => !['post', 'blog'].includes(t)),
+    );
+
+    return html`
+      ${authors && `<meta name="authors" content="${authors}" />`}
+      ${paths && `<meta name="paths" content="${paths}" />`}
+      ${tags && `<meta name="tags" content="${tags}" />`}
+    `;
+  }
+
   // prettier-ignore
   return html`
     <title>${strip(pageData.title
@@ -147,9 +201,11 @@ module.exports = (locale, page, collections, renderData = {}) => {
       || (pageData.path && pageData.path.description), forbiddenCharacters)}" />
 
     ${renderCanonicalMeta()}
+    ${renderHreflangMeta()}
     ${renderGoogleMeta()}
     ${renderFacebookMeta()}
     ${renderTwitterMeta()}
     ${renderRSS()}
+    ${renderPageMeta()}
   `;
 };
diff --git a/src/site/_includes/components/PathCard.js b/src/site/_includes/components/PathCard.js
deleted file mode 100644
index e8d5d86a07e..00000000000
--- a/src/site/_includes/components/PathCard.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const removeDrafts = require('../../_filters/remove-drafts');
-
-/* eslint-disable max-len */
-
-/**
- * Count the number of posts in a learning path.
- * @param {*} learningPath A learning path data object.
- * @param {string} lang Language of the page.
- * @return {number}
- */
-function getPostCount(learningPath, lang) {
-  // TODO (robdodson): It's annoying to have to removeDrafts both here and
-  // in path.njk. Ideally we should do this in the learningPath .11ty.js files
-  // but eleventy hasn't parsed all of the collections when those files get
-  // initialized so we can't look up posts by slug.
-
-  // Merge subtopic pathItems
-  const flattenedTopics = learningPath.topics.map((topic) => {
-    const subPathItems = (topic.subtopics || []).reduce(
-      (accumulator, subtopic) => {
-        return [...accumulator, ...subtopic.pathItems];
-      },
-      [],
-    );
-    return {
-      ...topic,
-      pathItems: [...(topic.pathItems || []), ...subPathItems],
-    };
-  });
-
-  const topics = removeDrafts(flattenedTopics, lang);
-  const count = topics.reduce((pathItemsCount, topic) => {
-    return pathItemsCount + topic.pathItems.length;
-  }, 0);
-  const label = count > 1 ? 'resources' : 'resource';
-  return `${count} ${label}`;
-}
-
-/**
- * PathCard used to preview learning paths.
- * @param {Object} path A learning path data object.
- * @param {string} lang Language of the page.
- * @return {string}
- */
-module.exports = (path, lang) => {
-  return html`
-    <a href="/${path.slug}" class="w-card" role="listitem">
-      <div class="w-path-card">
-        <div class="w-path-card__info">
-          <ul class="w-path-card__info-list">
-            <li
-              class="w-path-card__info-listitem w-path-card__info-listitem--category"
-            >
-              Collection
-            </li>
-            <li
-              class="w-path-card__info-listitem w-path-card__info-listitem--more-info"
-            >
-              ${getPostCount(path, lang)}
-            </li>
-            <li
-              class="w-path-card__info-listitem w-path-card__info-listitem--updated"
-            >
-              Updated <time>${path.date}</time>
-            </li>
-          </ul>
-        </div>
-        <div class="w-path-card__cover">
-          <img
-            class="w-path-card__cover-image"
-            src="${path.cover}"
-            alt=""
-            loading="lazy"
-            width="100%"
-            height="240"
-          />
-        </div>
-        <div class="w-path-card__desc">
-          <h2 class="w-path-card__headline">${path.title}</h2>
-          <p class="w-path-card__subhead">
-            ${path.description}
-          </p>
-        </div>
-      </div>
-    </a>
-  `;
-};
diff --git a/src/site/_includes/components/PostCard.js b/src/site/_includes/components/PostCard.js
deleted file mode 100644
index d173096a595..00000000000
--- a/src/site/_includes/components/PostCard.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const BaseCard = require('./BaseCard');
-
-/**
- * PostCard used to preview posts.
- * @param {Object} collectionItem An eleventy collection item with post data.
- * @param {boolean} featured If post is a featured post.
- * @return {string}
- */
-module.exports = (collectionItem, featured = false) => {
-  return new BaseCard(collectionItem, null, featured).render();
-};
diff --git a/src/site/_includes/components/SignPosts.js b/src/site/_includes/components/SignPosts.js
deleted file mode 100644
index e6252cde2de..00000000000
--- a/src/site/_includes/components/SignPosts.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const paths = require('../../_data/paths');
-const postToPaths = require('../../_data/postToPaths');
-
-module.exports = (slug) => {
-  const postPaths = postToPaths[slug];
-  if (!postPaths) {
-    return '';
-  }
-  const aTags = postPaths
-    .map((pathName) => {
-      return html`<a
-        class="w-post-signpost__link"
-        href="/${paths[pathName].slug}"
-        >${paths[pathName].title}</a
-      >`;
-    })
-    .join(html`<span class="w-post-signpost__divider">|</span>`);
-
-  return html`
-    <div class="w-layout-container--narrow w-post-signpost">
-      <span class="w-post-signpost__title">Appears in:</span>
-      ${aTags}
-    </div>
-  `;
-};
diff --git a/src/site/_includes/components/StackOverflow.js b/src/site/_includes/components/StackOverflow.js
new file mode 100644
index 00000000000..638434dc273
--- /dev/null
+++ b/src/site/_includes/components/StackOverflow.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {html} = require('common-tags');
+const {i18n, getLocaleFromPath} = require('../../_filters/i18n');
+
+function StackOverflow(tag) {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
+  const text = i18n(`i18n.stackoverflow.ask_question`, locale).replace(
+    /<TAG>/g,
+    tag,
+  );
+  return html` <div class="aside flow">${text}</div> `;
+}
+
+module.exports = StackOverflow;
diff --git a/src/site/_includes/components/Tooltip.js b/src/site/_includes/components/Tooltip.js
deleted file mode 100644
index 49e71dfb25f..00000000000
--- a/src/site/_includes/components/Tooltip.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-const md = require('markdown-it')();
-
-module.exports = (content, alignment) => {
-  switch (alignment) {
-    case 'left':
-      alignment = 'w-tooltip--left';
-      break;
-    case 'right':
-      alignment = 'w-tooltip--right';
-      break;
-    default:
-      alignment = '';
-  }
-
-  return html`
-    <span role="tooltip" class="w-tooltip ${alignment}">
-      ${md.renderInline(content)}
-    </span>
-  `;
-};
diff --git a/src/site/_includes/components/Video.js b/src/site/_includes/components/Video.js
new file mode 100644
index 00000000000..0a0def31d04
--- /dev/null
+++ b/src/site/_includes/components/Video.js
@@ -0,0 +1,11 @@
+const {Video: BuildVideoShortcode} = require('webdev-infra/shortcodes/Video');
+
+const {bucket, imgixDomain} = require('../../_data/site');
+
+/**
+ * @param {import('webdev-infra/types').VideoArgs} args Named arguments
+ * @returns {string}
+ */
+const Video = BuildVideoShortcode(bucket, imgixDomain);
+
+module.exports = {Video};
diff --git a/src/site/_includes/components/Widget.js b/src/site/_includes/components/Widget.js
new file mode 100644
index 00000000000..31361cd94b2
--- /dev/null
+++ b/src/site/_includes/components/Widget.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const path = require('path');
+const {findByUrl} = require('../../_filters/find-by-url');
+const site = require('../../_data/site');
+
+/**
+ * @fileoverview A component to display an interactive demo,
+ * as an iframe embed.
+ */
+
+/**
+ * @param {string} demoUrl Url of the demo to be displayed. It can be
+ *   an external url, or a deep url on web.dev, .e.g. /demos/my-demo-name.
+ * @param {string} height Optional height of the widget with units, e.g. 100px.
+ */
+module.exports = function (demoUrl, height) {
+  let url;
+  try {
+    // Check if it's external url.
+    const externalUrl = new URL(demoUrl);
+    url = externalUrl.href;
+  } catch (e) {
+    // Otherwise, check if internal url exists.
+    url = path.join('/', demoUrl, '/');
+    if (!findByUrl(url)) {
+      return site.isProd() ? '' : `[No demo found at ${url}.]`;
+    }
+  }
+
+  return `<div class="widget">
+      <iframe
+        src="${url}"
+        title="Demo"
+        height="${height}"
+        loading="lazy"
+        width="100%"
+        scrolling="no"></iframe>
+        <div class="widget__actions">
+          <a
+            href="${url}"
+            target="_blank"
+            class="code-pattern__icon"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+          </a>
+          <share-action class="gc-analytics-event code-pattern__icon"
+            data-category="web.dev"
+            data-label="share"
+            data-action="click"
+            data-type="primary"
+            data-icon="share"
+            tabindex="0"
+            role="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 16.1c-.8 0-1.4.3-2 .8l-7.1-4.2c.1-.2.1-.5.1-.7s0-.5-.1-.7L16 7.2c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .5.1.7L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.6 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9-1.2-2.9-2.8-2.9z" fill="currentColor"/></svg>
+          </share-action>
+    </div>
+  </div>`;
+};
diff --git a/src/site/_includes/components/YouTube.js b/src/site/_includes/components/YouTube.js
deleted file mode 100644
index cf9001e330a..00000000000
--- a/src/site/_includes/components/YouTube.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {html} = require('common-tags');
-
-/* eslint-disable max-len */
-
-/**
- * A YouTube video embed.
- * @param {string} id The id of the YouTube video
- * @param {string} startTime A start time for the video
- * @return {string}
- */
-module.exports = (id, startTime) => {
-  if (!id) {
-    throw new Error('Cannot create YouTube component if id is undefined');
-  }
-
-  // Don't load YT iframe in our test environment. This specifically affects
-  // screenshot testing where the iframe can be slow or flaky to load and fail
-  // because YouTube is always fiddling with their UI.
-  // Load a placeholder to fill the space instead.
-  if (process.env.PERCY) {
-    return html`
-      <div class="w-youtube" style="background: aquamarine;">
-        YouTube iframe placeholder
-      </div>
-    `;
-  }
-
-  let src = `https://www.youtube.com/embed/${id}`;
-  if (startTime) {
-    src += `?start=${startTime}`;
-  }
-
-  return html`
-    <div class="w-youtube">
-      <iframe
-        class="w-youtube__embed"
-        src="${src}"
-        frameborder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-        loading="lazy"
-      ></iframe>
-    </div>
-  `;
-};
diff --git a/src/site/_includes/components/YouTubePlaylist.js b/src/site/_includes/components/YouTubePlaylist.js
new file mode 100644
index 00000000000..3d03e69f3ac
--- /dev/null
+++ b/src/site/_includes/components/YouTubePlaylist.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Iframe embed of a Youtube playlist
+ * @param {string} id Id of the playlist from Youtube
+ * @param {{src?: string; allow?: string; style?: string; title?: string;}} options
+ * @return string
+ */
+module.exports = (id, options) => {
+  if (!id) {
+    return;
+  }
+  const iframeStyle = [
+    'height: 100%;',
+    'left: 50%;',
+    'position: absolute;',
+    'top: 50%;',
+    'transform: translate(-50%, -50%);',
+    'border: 0;',
+    'width: 100%',
+  ];
+  let iframeProps = {
+    allow:
+      'accelerometer; autoplay; clipboard-write; ' +
+      'encrypted-media; gyroscope; picture-in-picture',
+    src: `https://www.youtube.com/embed/videoseries?list=${id}`,
+    style: iframeStyle.join(''),
+    title: 'Youtube Playlist',
+  };
+  iframeProps = {...iframeProps, ...options};
+  const {allow, src, style, title} = iframeProps;
+  return `
+    <div class="youtube">
+      <iframe
+        allow="${allow}"
+        loading="lazy"
+        src="${src}"
+        style="${style}"
+        title="${title}"
+        frameborder="0"
+        allowfullscreen
+      ></iframe>
+    </div>
+  `;
+};
diff --git a/src/site/_includes/components/includeRaw.js b/src/site/_includes/components/includeRaw.js
new file mode 100644
index 00000000000..d018136665e
--- /dev/null
+++ b/src/site/_includes/components/includeRaw.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+// The path to the _includes folder inside web.dev.
+const includesPath = path.join(__dirname, '../');
+
+/**
+ * @param {string} arg
+ * @return {string}
+ */
+module.exports = (arg) => {
+  const p = path.join(includesPath, arg);
+  return fs.readFileSync(p, 'utf-8');
+};
diff --git a/src/site/_includes/content/lighthouse-accessibility/about-aria.njk b/src/site/_includes/content/lighthouse-accessibility/about-aria.njk
deleted file mode 100644
index d686ca1a1b6..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/about-aria.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-Users of screen readers and other assistive technologies need information
-about the behavior and purpose of controls on your web page.
-Native HTML controls like buttons and radio groups
-come with that information [built in](/use-semantic-html).
-For custom controls you create, however, you must provide the information with
-[ARIA](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)
-roles and attributes.
-(Learn more in the
-[Introduction to ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/).)
diff --git a/src/site/_includes/content/lighthouse-accessibility/accessible-names.njk b/src/site/_includes/content/lighthouse-accessibility/accessible-names.njk
deleted file mode 100644
index ff26965fa49..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/accessible-names.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-To be announced properly by assistive technologies,
-both
-<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms" rel="noopener">native HTML controls</a>
-and
-<a href="https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex" rel="noopener">custom ARIA controls</a>
-must have [accessible names](/labels-and-text-alternatives)
-that convey their purpose.
diff --git a/src/site/_includes/content/lighthouse-accessibility/aria-child-parent.njk b/src/site/_includes/content/lighthouse-accessibility/aria-child-parent.njk
deleted file mode 100644
index 83ca0f42464..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/aria-child-parent.njk
+++ /dev/null
@@ -1,45 +0,0 @@
-There are two ways to set up the required relationships
-between ARIA parent and child roles.
-
-### Option 1: Place the child elements within the parent in the DOM
-Placing elements with child roles within the parent role element
-in your HTML is usually the easiest and most maintainable solution.
-For example:
-
-```html
-<div role="tablist">
-	<button role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
-		Tab 1
-	</button>
-	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
-		Tab 2
-	</button>
-	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
-		Tab 3
-	</button>
-</div>
-```
-
-### Option 2: Associate the child roles with the parent role using `aria-owns`
-If you can't place child role elements inside the parent role element,
-you can use the `aria-owns` attribute to associate them:
-
-```html/0
-<div role="tablist" aria-owns="tab-1 tab-2 tab-3"></div>
-…
-<button id="tab-1" role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
-  Tab 1
-</button>
-<button id="tab-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
-  Tab 2
-</button>
-<button id="tab-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
-  Tab 3
-</button>
-```
-
-{% Aside %}
-If an element with the `aria-owns` attribute contains DOM children,
-assistive technologies will announce the DOM children before the elements
-listed in `aria-owns`.
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-accessibility/fix-duplicate-ids.njk b/src/site/_includes/content/lighthouse-accessibility/fix-duplicate-ids.njk
deleted file mode 100644
index a52c6762fb9..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/fix-duplicate-ids.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-## How to fix duplicate IDs
-
-Change an ID value if it is used more than once.
-
-For example, the following code sample includes two elements with the same ID.
-One ID should be changed:
-
-```html/0-1
-<input type="radio" id="huey" name="newphews" value="Huey" checked>
-<input type="radio" id="huey" name="newphews" value="Dewey" checked>
-<input type="radio" id="louie" name="newphews" value="Louie" checked>
-```
diff --git a/src/site/_includes/content/lighthouse-accessibility/fix-lang-attr.njk b/src/site/_includes/content/lighthouse-accessibility/fix-lang-attr.njk
deleted file mode 100644
index 4240f58bd87..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/fix-lang-attr.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-To ensure your page's content is pronounced correctly for screen reader users,
-use a <a href="https://www.w3.org/International/questions/qa-choosing-language-tags#question" rel="noopener">valid language code</a>
-in the `lang` attribute of the `<html>` element.
-
-For example, this sample code sets the language of the document to English:
-
-```html
-<html lang="en">
-```
diff --git a/src/site/_includes/content/lighthouse-accessibility/focusable-els.njk b/src/site/_includes/content/lighthouse-accessibility/focusable-els.njk
deleted file mode 100644
index 37930b1eedf..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/focusable-els.njk
+++ /dev/null
@@ -1,19 +0,0 @@
-An element is _focusable_ when keyboard users can navigate to it
-using the `Tab` key.
-Focusability differs somewhat across browsers, but in general,
-the following elements are focusable:
-- `<a>`
-- `<area>`
-- `<audio controls>`
-- `<button>`
-- `<iframe>`
-- `<input>`
-- `<select>`
-- `<summary>`
-- `<textarea>`
-- `<video controls>`
-- Any element with the `contentEditable` attribute
-- Any element with a `tabindex` set to a numeric value other than `-1`
-
-For a complete breakdown of cross-browser focus behavior, see ally.js's
-<a href="https://allyjs.io/data-tables/focusable.html" rel="noopener">Focusable Elements - Browser Compatibility Table</a>.
diff --git a/src/site/_includes/content/lighthouse-accessibility/lang-attr.njk b/src/site/_includes/content/lighthouse-accessibility/lang-attr.njk
deleted file mode 100644
index 06cbbce2af2..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/lang-attr.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-To ensure correct pronunciation,
-screen readers use a different sound library
-for each language they support.
-Screen readers can switch between these language libraries easily,
-but only if a web page specifies which language to read
-for a given piece of content.
diff --git a/src/site/_includes/content/lighthouse-accessibility/no-duplicate-ids.njk b/src/site/_includes/content/lighthouse-accessibility/no-duplicate-ids.njk
deleted file mode 100644
index 5e142c99577..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/no-duplicate-ids.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-Each ID in your HTML document must be unique.
-Using the same ID on more than one element may cause screen readers and other
-assistive technologies to only announce the first element with the shared ID,
-preventing users from accessing the later elements.
diff --git a/src/site/_includes/content/lighthouse-accessibility/scoring.njk b/src/site/_includes/content/lighthouse-accessibility/scoring.njk
deleted file mode 100644
index 6635540dae8..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/scoring.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% Aside 'note' %}
-  The Lighthouse Accessibility score is a weighted average of all the accessibility audits.
-  See the
-  [Lighthouse accessibility scoring](/accessibility-scoring) post
-  for more information.
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-accessibility/use-native.njk b/src/site/_includes/content/lighthouse-accessibility/use-native.njk
deleted file mode 100644
index 2544f46223b..00000000000
--- a/src/site/_includes/content/lighthouse-accessibility/use-native.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-{% Aside 'caution' %}
-Most common input types can be created with native HTML elements,
-which come with built-in behaviors and accessible semantics
-that can be time consuming to replicate.
-Consider [using native elements](/semantics-and-screen-readers/#use-semantic-html)
-instead of ARIA roles if possible.
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-best-practices/scoring.njk b/src/site/_includes/content/lighthouse-best-practices/scoring.njk
deleted file mode 100644
index 0b3680a4fde..00000000000
--- a/src/site/_includes/content/lighthouse-best-practices/scoring.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% Aside 'note' %}
-  Each Best Practices audit is weighted equally in the Lighthouse Best Practices
-  Score. Learn more in [The Best Practices
-  score](https://developers.google.com/web/tools/lighthouse/v3/scoring#best-practices).
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-performance/improve.njk b/src/site/_includes/content/lighthouse-performance/improve.njk
deleted file mode 100644
index 01a60b61940..00000000000
--- a/src/site/_includes/content/lighthouse-performance/improve.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-## How to improve your overall Performance score
-
-Unless you have a specific reason for focusing on a particular metric, it's
-usually better to focus on improving your overall Performance score.
-
-Use the **Opportunities** section of your Lighthouse report to determine which
-improvements will have the most value for your page. The more significant the opportunity,
-the greater the effect it will have on your Performance score. For example, the Lighthouse
-screenshot below shows that [eliminating render-blocking resources](/render-blocking-resources)
-will yield the biggest improvement:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="/images/shared/opportunities.png"
-       alt="Lighthouse: Opportunities section">
-</figure>
-
-See the [Performance audits landing page](/lighthouse-performance)
-to learn how to address the opportunities identified in your Lighthouse report.
diff --git a/src/site/_includes/content/lighthouse-performance/js-perf.njk b/src/site/_includes/content/lighthouse-performance/js-perf.njk
deleted file mode 100644
index 2af64513f5c..00000000000
--- a/src/site/_includes/content/lighthouse-performance/js-perf.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-- [Only send the code that your users need by implementing code splitting](/reduce-javascript-payloads-with-code-splitting).
-- [Minify and compress your code](/reduce-network-payloads-using-text-compression).
-- [Remove unused code](/remove-unused-code).
-- [Reduce network trips by caching your code with the PRPL pattern](/apply-instant-loading-with-prpl).
-
-For other ways to improve page load, check out the
-[Performance audits landing page](/lighthouse-performance).
diff --git a/src/site/_includes/content/lighthouse-performance/scoring.njk b/src/site/_includes/content/lighthouse-performance/scoring.njk
deleted file mode 100644
index 4176529558f..00000000000
--- a/src/site/_includes/content/lighthouse-performance/scoring.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% Aside 'note' %}
-  See the
-  [Lighthouse performance scoring](/performance-scoring) post to learn
-  how your page's overall performance score is calculated.
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-pwa/scoring.njk b/src/site/_includes/content/lighthouse-pwa/scoring.njk
deleted file mode 100644
index b01597dd9b4..00000000000
--- a/src/site/_includes/content/lighthouse-pwa/scoring.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-{% Aside 'note' %}
-  In the Lighthouse report UI the full PWA badge is given when you pass all of the
-  audits in all of the PWA subcategories (**Fast and reliable**, **Installable**, and **PWA optimized**).
-{% endAside %}
diff --git a/src/site/_includes/content/lighthouse-seo/scoring.njk b/src/site/_includes/content/lighthouse-seo/scoring.njk
deleted file mode 100644
index 5347e7cb9c2..00000000000
--- a/src/site/_includes/content/lighthouse-seo/scoring.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% Aside 'note' %}
-  Each SEO audit is weighted equally
-  in the Lighthouse SEO Score,
-  except for the manual **[Structured data is valid](/structured-data)** audit.
-  Learn more in the [Lighthouse Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring).
-{% endAside %}
diff --git a/src/site/_includes/content/metrics/first-hidden-time.njk b/src/site/_includes/content/metrics/first-hidden-time.njk
deleted file mode 100644
index 954095708d7..00000000000
--- a/src/site/_includes/content/metrics/first-hidden-time.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-// Keep track of whether (and when) the page was first hidden, see:
-// https://github.com/w3c/page-visibility/issues/29
-// NOTE: ideally this check would be performed in the document <head>
-// to avoid cases where the visibility state changes before this code runs.
-let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
-document.addEventListener('visibilitychange', (event) => {
-  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
-}, {once: true});
diff --git a/src/site/_includes/content/metrics/metrics-changelog.njk b/src/site/_includes/content/metrics/metrics-changelog.njk
index 44fc378d648..48536fa43fe 100644
--- a/src/site/_includes/content/metrics/metrics-changelog.njk
+++ b/src/site/_includes/content/metrics/metrics-changelog.njk
@@ -1,10 +1,7 @@
 ## CHANGELOG
 
-Occasionally, bugs are discovered in the APIs used to measure metrics, and
-sometimes in the definitions of the metrics themselves. As a result, changes
-must sometimes be made, and these changes can show up as improvements or
-regressions in your internal reports and dashboards.
+Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.
 
-To help you manage this, all changes to either the implementation or definition
-of these metrics will be surfaced in this
-[CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog).
+To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this [CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog).
+
+If you have feedback for these metrics, you can provide it in the [web-vitals-feedback Google group](https://groups.google.com/g/web-vitals-feedback).
diff --git a/src/site/_includes/content/metrics/performance-observer-catch.njk b/src/site/_includes/content/metrics/performance-observer-catch.njk
deleted file mode 100644
index d853aef8b41..00000000000
--- a/src/site/_includes/content/metrics/performance-observer-catch.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-} catch (e) {
-  // Do nothing if the browser doesn't support this API.
-}
\ No newline at end of file
diff --git a/src/site/_includes/content/metrics/performance-observer-init.njk b/src/site/_includes/content/metrics/performance-observer-init.njk
deleted file mode 100644
index fa1a5863420..00000000000
--- a/src/site/_includes/content/metrics/performance-observer-init.njk
+++ /dev/null
@@ -1,11 +0,0 @@
-  // Create a PerformanceObserver that calls `{{ entryCallback }}` for each entry.
-  const po = new PerformanceObserver((entryList, po) => {
-    entryList.getEntries().forEach((entry) => {{ entryCallback }}(entry, po));
-  });
-
-  // Observe entries of type `{{ entryType }}`, including buffered entries,
-  // i.e. entries that occurred before calling `observe()` below.
-  po.observe({
-    type: '{{ entryType }}',
-    buffered: true,
-  });
\ No newline at end of file
diff --git a/src/site/_includes/content/metrics/performance-observer-try.njk b/src/site/_includes/content/metrics/performance-observer-try.njk
deleted file mode 100644
index 716e7af3668..00000000000
--- a/src/site/_includes/content/metrics/performance-observer-try.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-// Use a try/catch instead of feature detecting `{{ entryType }}`
-// support, since some browsers throw when using the new `type` option.
-// https://bugs.webkit.org/show_bug.cgi?id=209216
-try {
\ No newline at end of file
diff --git a/src/site/_includes/content/metrics/send-to-analytics.njk b/src/site/_includes/content/metrics/send-to-analytics.njk
deleted file mode 100644
index fffbc0af189..00000000000
--- a/src/site/_includes/content/metrics/send-to-analytics.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-// Sends the passed data to an analytics endpoint. This code
-// uses `/analytics`; you can replace it with your own URL.
-function sendToAnalytics(data) {
-  const body = JSON.stringify(data);
-  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
-  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
-      fetch('/analytics', {body, method: 'POST', keepalive: true});
-}
diff --git a/src/site/_includes/content/payments/browser-compatibility.njk b/src/site/_includes/content/payments/browser-compatibility.njk
index 964728e65e8..4f95162b812 100644
--- a/src/site/_includes/content/payments/browser-compatibility.njk
+++ b/src/site/_includes/content/payments/browser-compatibility.njk
@@ -3,13 +3,12 @@
 Web Payments consists of a few different pieces of technologies and the support
 status depends on the browser.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <tr>
       <td></td>
       <td>Chromium</td>
       <td></td>
-      <td></td>
       <td>Safari</td>
       <td></td>
       <td>Firefox</td>
@@ -18,19 +17,17 @@ status depends on the browser.
       <td></td>
       <td>Desktop</td>
       <td>Android</td>
-      <td>iOS</td>
       <td>Desktop</td>
       <td>Mobile</td>
-      <td></td>
+      <td>Desktop/Mobile</td>
     </tr>
     <tr>
       <td>Payment Request API</td>
       <td>✔</td>
       <td>✔</td>
-      <td></td>
       <td>✔</td>
       <td>✔</td>
-      <td>Under active development</td>
+      <td></td>
     </tr>
     <tr>
       <td>Payment Handler API</td>
@@ -39,23 +36,18 @@ status depends on the browser.
       <td></td>
       <td></td>
       <td></td>
-      <td>Under active development</td>
     </tr>
     <tr>
-      <td>Native payment app</td>
+      <td>iOS/Android payment app</td>
       <td>✔</td>
       <td>✔</td>
-      <td>*</td>
-      <td>✔**</td>
-      <td>✔**</td>
+      <td>✔*</td>
+      <td>✔*</td>
       <td></td>
     </tr>
   </table>
 </div>
 
 {% Aside %}
-*Chrome is considering making native payment apps available on
-iOS.
-
-**Safari supports Apple Pay but no third party payment apps.
+*Safari supports Apple Pay but no third party payment apps.
 {% endAside %}
\ No newline at end of file
diff --git a/src/site/_includes/content/lighthouse-accessibility/why-headings.njk b/src/site/_includes/content/why-headings.njk
similarity index 100%
rename from src/site/_includes/content/lighthouse-accessibility/why-headings.njk
rename to src/site/_includes/content/why-headings.njk
diff --git a/src/site/_includes/course.njk b/src/site/_includes/course.njk
new file mode 100644
index 00000000000..e7eed512f6c
--- /dev/null
+++ b/src/site/_includes/course.njk
@@ -0,0 +1,86 @@
+---
+layout: base
+pageScripts:
+  - '/js/course.js'
+inlineScripts:
+  - '../../lib/components/CourseLinks/index.js'
+---
+
+{% from 'macros/audio-fab.njk' import audioFab %}
+{% from 'macros/audio-player.njk' import audioPlayer %}
+
+{#
+  Grab the data for the course using the projectKey defined in the 11tydata.js
+  file at the root of the course in /learn/[course]
+#}
+{% set courseData = courses[projectKey] %}
+{% set courseTitle = courseData.meta.title | i18n(locale) %}
+
+{#
+  Grab the navigation data for the course. These are the links that will appear
+  in the navigation drawer as well as in various places around the course.
+#}
+{% set pageNavigation = collections.all | navigation(courseData.toc) %}
+
+{#
+  Grab the ToC contents for headings ToC. This powers the list of headings
+  that appears on the right-hand side of the page. Unfortunately our use of
+  the word 'toc' is a bit overloaded :P
+#}
+{% set tocContents %}
+  {{- content | toc | safe -}}
+{% endset %}
+{% set tocTitle = 'i18n.toc.on_this_page' | i18n(locale) %}
+
+<a class="skip-link button" data-type="primary" href="#main">Skip to main</a>
+
+<div class="course">
+  {% include 'partials/header-course.njk' %}
+
+  <div class="sidebar">
+
+    <div class="course__sidebar">
+      {% include 'partials/navigation-drawer-course.njk' %}
+    </div>
+
+    <div class="course__main">
+      {% include 'partials/course-app-bar.njk' %}
+      <div class="sticky-observer"></div>
+      <div class="gap-top-size-2">
+        <div class="sidebar flex-align-start flex-dir-rev flex-wrap-no">
+          {% include 'partials/toc-side.njk' %}
+          <main id="main">
+            <div class="prose">
+              <div class="course__intro flow">
+                {% for item in pageNavigation.list %}
+                  {% if item.url === page.url %}
+                    <div class="eyebrow">{{ item.counter }}</div>
+                  {% endif %}
+                {% endfor %}
+                <h1>{{ title | md | safe }}</h1>
+                {% if description %}
+                <div class="color-mid-text unstyled-code">
+                  {# If authors use backticks in their description markdown we don't #}
+                  {# want the code to have any border or background color. #}
+                  {{ description | md | safe }}
+                </div>
+                {% endif %}
+                {% include 'partials/toc-inner.njk' %}
+              </div>
+            </div>
+            <div class="prose gap-top-size-2">
+              {% if audio %}
+                {% include 'partials/course-audio.njk' %}
+              {% endif %}
+              {{ content | safe }}
+            </div>
+          </main>
+        </div>
+      </div>
+
+      {% include 'partials/course-pagination.njk' %}
+
+      {% include 'partials/site-footer.njk' %}
+    </div>
+  </div>
+</div>
diff --git a/src/site/_includes/default.njk b/src/site/_includes/default.njk
new file mode 100644
index 00000000000..66d31b5ea61
--- /dev/null
+++ b/src/site/_includes/default.njk
@@ -0,0 +1,13 @@
+---
+layout: 'base'
+---
+{# This is the standard layout that most pages will use. #}
+<a href="#main" class="skip-link button" data-type="primary">{{ 'i18n.common.skip_link' | i18n(locale) }}</a>
+{% include 'partials/site-header.njk' %}
+<main id="main">
+  {% if show_banner %}
+    {% include 'partials/banner.njk' %}
+  {% endif %}
+  {{ content | safe }}
+</main>
+{% include 'partials/site-footer.njk' %}
diff --git a/src/site/_includes/demo.njk b/src/site/_includes/demo.njk
new file mode 100644
index 00000000000..5ed1c727e66
--- /dev/null
+++ b/src/site/_includes/demo.njk
@@ -0,0 +1,44 @@
+{# A file to display a standalone demo for a CodePattern #}
+{% set pattern = patterns.patterns[patternId] %}
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ title }}</title>
+  {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+  {% include 'partials/script-loader.njk' %}
+
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    figure {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+    }
+    figure > img {
+      max-width: 100%;
+      object-fit: contain;
+    }
+  </style>
+  {% for assetName, asset in pattern.assets %}
+    {% if asset.type == 'css' %}
+      <style>{{ asset.content | safe }}</style>
+    {% endif %}
+  {% endfor %}
+</head>
+<body>
+  {{ content | safe }}
+  {{ pattern.assets['body.html'].content | safe }}
+  {% for assetName, asset in pattern.assets %}
+    {% if asset.type == 'js' %}
+      <script>{{ asset.content | minifyJs | cspHash | safe }}</script>
+    {% endif %}
+  {% endfor %}
+</body>
+</html>
\ No newline at end of file
diff --git a/src/site/_includes/design-system-documentation.njk b/src/site/_includes/design-system-documentation.njk
new file mode 100644
index 00000000000..85457eb1f62
--- /dev/null
+++ b/src/site/_includes/design-system-documentation.njk
@@ -0,0 +1,5 @@
+{% extends "design-system.njk" %}
+
+{% block inner %}
+{{ content | safe }}
+{% endblock %}
\ No newline at end of file
diff --git a/src/site/_includes/design-system.njk b/src/site/_includes/design-system.njk
new file mode 100644
index 00000000000..e4f358931a0
--- /dev/null
+++ b/src/site/_includes/design-system.njk
@@ -0,0 +1,67 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+{% macro stackLink(url, pageUrl, text) %}
+  <a class="repel" href="{{ url }}" {% if url == pageUrl %}aria-current="page"{% endif %}>{{ text }}</a> 
+{% endmacro %}
+
+<!DOCTYPE html>
+<html lang="{{lang}}">
+  <head>
+    {% include 'partials/head.njk' %}
+    <!-- some hacky styles to get through this populating effort -->
+  </head>
+  <body class="design-system">
+    {#
+      Make the snackbar the first item in the DOM so we don't have to steal the
+      user's focus on initial visit to show them a cookie banner. Instead, the
+      snackbar will be the first stop for the screen reader / focus.
+    #}
+    <web-snackbar-container></web-snackbar-container>
+
+    <a class="skip-link button" href="#main">Skip to main</a>
+
+    <div class="flex-auto box-flex flex-dir-column">
+      <div class="sidebar flex-auto">
+        <nav class="flow bg-mid-bg pad-block-size-1" aria-label="design system">
+          <div class="repel pad-inline-base flex-align-end">
+            <div class="brand">
+              {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }}
+              <p class="brand__byline">Design System</p>
+            </div>
+            <div>
+              {% include "partials/standard-theme-toggle.njk" %}
+            </div>
+          </div>
+          <ul class="stack-nav flow-space-size-2" role="list">
+            {% for link in sideLinks %}
+              <li>{{ stackLink(link.url, page.url, link.text)}}</li>
+            {% endfor %}
+          </ul>
+          <h2 class="text-size-3 pad-inline-base flow-space-size-2">CSS</h2>
+          <ul class="stack-nav" role="list">
+            {% for link in cssLinks %}
+              <li>{{ stackLink(link.url, page.url, link.text)}}</li>
+            {% endfor %}
+          </ul>
+          <h2 class="text-size-3 pad-inline-base flow-space-size-2">Component Library</h2>
+          <ul class="stack-nav" role="list">
+            {% for item in design.components.items %}
+              <li>{{ stackLink(item.url, page.url, item.data.title) }}</li>
+            {% endfor %}
+          </ul>
+        </nav>
+        <div class="pad-block-size-1">
+          <article class="prose">
+            <h1>{{ pageTitle if pageTitle else title }}</h1>
+            {% if summary %}
+              <p>{{ summary | md | safe }}</p>
+            {% endif %}
+            {% block inner %}
+            {% endblock %}
+          </article>
+        </div>
+      </div>
+    </div>
+    {% include 'partials/site-footer.njk' %}
+  </body>
+</html>
diff --git a/src/site/_includes/devsite/devsite-footer.njk b/src/site/_includes/devsite/devsite-footer.njk
deleted file mode 100644
index 050c581d1dd..00000000000
--- a/src/site/_includes/devsite/devsite-footer.njk
+++ /dev/null
@@ -1,240 +0,0 @@
-<devsite-footer-promos ds-is="footer-promos" class="devsite-footer">
-</devsite-footer-promos>
-<devsite-footer-linkboxes
-  ds-is="footer-linkboxes"
-  class="devsite-footer"
->
-  <nav class="devsite-footer-linkboxes nocontent">
-    <ul class="devsite-footer-linkboxes-list">
-      <li class="devsite-footer-linkbox ">
-        <h3 class="devsite-footer-linkbox-heading">Contribute</h3>
-        <ul class="devsite-footer-linkbox-list">
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://github.com/GoogleChrome/web.dev/issues/new?template=documentation-bug.md"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 1)"
-            >
-              File a bug
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://github.com/googlechrome/web.dev"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 2)"
-            >
-              View source
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="devsite-footer-linkbox ">
-        <h3 class="devsite-footer-linkbox-heading">Related content</h3>
-        <ul class="devsite-footer-linkbox-list">
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://developers.google.com/web/updates/"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 1)"
-            >
-              Updates
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://developers.google.com/web/"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 2)"
-            >
-              Web Fundamentals
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://developers.google.com/web/showcase/"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 3)"
-            >
-              Case studies
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://devwebfeed.appspot.com/"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 4)"
-            >
-              DevWeb Content Firehose
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="devsite-footer-linkbox ">
-        <h3 class="devsite-footer-linkbox-heading">Connect</h3>
-        <ul class="devsite-footer-linkbox-list">
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://www.twitter.com/@ChromiumDev"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 1)"
-            >
-              Twitter
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://www.youtube.com/user/ChromeDevelopers"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 2)"
-            >
-              YouTube
-            </a>
-          </li>
-          <li class="devsite-footer-linkbox-item">
-            <a
-              href="https://medium.com/dev-channel"
-              class="devsite-footer-linkbox-link
-            gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Footer Link (index 3)"
-            >
-              Medium
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-</devsite-footer-linkboxes>
-<devsite-footer-utility ds-is="footer-utility" class="devsite-footer">
-  <div class="devsite-footer-utility">
-    <nav class="devsite-nav devsite-footer-sites">
-      <a
-        href="https://developers.google.com/"
-        class="devsite-footer-sites-logo-link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="Footer Google Developers Link"
-      >
-        <img
-          loading="lazy" width="185" height="33"
-          class="devsite-footer-sites-logo"
-          src="https://web.dev/_static/images/lockup-color.png"
-          alt="Google Developers"
-        />
-      </a>
-      <ul class="devsite-footer-sites-list">
-        <li class="devsite-footer-sites-item">
-          <a
-            href="https://developer.chrome.com/home"
-            class="devsite-footer-sites-link
-          gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Chrome Link"
-          >
-            Chrome
-          </a>
-        </li>
-        <li class="devsite-footer-sites-item">
-          <a
-            href="https://firebase.google.com/"
-            class="devsite-footer-sites-link
-          gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Firebase Link"
-          >
-            Firebase
-          </a>
-        </li>
-        <li class="devsite-footer-sites-item">
-          <a
-            href="https://cloud.google.com/"
-            class="devsite-footer-sites-link
-          gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Google Cloud Platform Link"
-          >
-            Google Cloud Platform
-          </a>
-        </li>
-        <li class="devsite-footer-sites-item">
-          <a
-            href="https://developers.google.com/products"
-            class="devsite-footer-sites-link
-          gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer All products Link"
-          >
-            All products
-          </a>
-        </li>
-      </ul>
-    </nav>
-
-    <nav class="devsite-nav">
-      <ul class="devsite-footer-utility-list">
-        <li
-          class="devsite-footer-utility-item
-          "
-        >
-          <a
-            class="devsite-footer-utility-link
-          gc-analytics-event"
-            href="https://developers.google.com/terms/site-terms"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Terms link"
-          >
-            Terms
-          </a>
-        </li>
-        <li
-          class="devsite-footer-utility-item
-          "
-        >
-          <a
-            class="devsite-footer-utility-link
-          gc-analytics-event"
-            href="https://policies.google.com/privacy"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Privacy link"
-          >
-            Privacy
-          </a>
-        </li>
-        <li
-          class="devsite-footer-utility-item
-          devsite-footer-utility-button"
-        >
-          <span class="devsite-footer-utility-description"
-            >Sign up for the Google Developers newsletter</span
-          >
-          <a
-            class="devsite-footer-utility-link
-          gc-analytics-event"
-            href="https://services.google.com/fb/forms/googledevelopersnewsletter/?utm_medium=referral&amp;utm_source=google-products&amp;utm_team=googledevs&amp;utm_campaign=201611-newsletter-launch"
-            data-category="Site-Wide Custom Events"
-            data-label="Footer Subscribe link"
-          >
-            Subscribe
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</devsite-footer-utility>
\ No newline at end of file
diff --git a/src/site/_includes/devsite/devsite-header.njk b/src/site/_includes/devsite/devsite-header.njk
deleted file mode 100644
index bd07b318494..00000000000
--- a/src/site/_includes/devsite/devsite-header.njk
+++ /dev/null
@@ -1,282 +0,0 @@
-<devsite-header
-  ds-is="header"
-  no-lower-row=""
-  top-row--height="64"
-  bottom-row--height="0"
-  bottom-tabs--height="0"
-  bottom-row--hidden=""
-  fixed=""
-  style="opacity: 1;"
->
-  <div class="devsite-header--inner">
-    <div class="devsite-top-logo-row-wrapper-wrapper">
-      <div class="devsite-top-logo-row-wrapper">
-        <div class="devsite-top-logo-row">
-          <button
-            type="button"
-            id="devsite-hamburger-menu"
-            class="devsite-header-icon-button button-flat material-icons gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Navigation menu button"
-            aria-label="Close menu"
-          ></button>
-          <div class="devsite-product-name-wrapper">
-            <a
-              href="/"
-              class="devsite-site-logo-link gc-analytics-event"
-              data-category="Site-Wide Custom Events"
-              data-label="Site logo"
-            >
-              <img
-                src="/images/lockup.svg"
-                class="devsite-site-logo"
-                alt="web.dev"
-              />
-            </a>
-          </div>
-          <div class="devsite-top-logo-row-middle">
-            <div class="devsite-header-upper-tabs">
-              <devsite-tabs ds-is="tabs" class="upper-tabs" connected="">
-                <div class="devsite-tabs-wrapper">
-                  <tab>
-                    <a
-                      href="/learn"
-                      class="gc-analytics-event"
-                      data-category="Site-Wide Custom Events"
-                      data-label="Tab: Learn"
-                    >
-                      Learn
-                    </a>
-                  </tab>
-                  <tab>
-                    <a
-                      href="/measure"
-                      class="gc-analytics-event"
-                      data-category="Site-Wide Custom Events"
-                      data-label="Tab: Measure"
-                    >
-                      Measure
-                    </a>
-                  </tab>
-                  <tab>
-                    <a
-                      href="/blog"
-                      class="gc-analytics-event"
-                      data-category="Site-Wide Custom Events"
-                      data-label="Tab: Blog"
-                    >
-                      Blog
-                    </a>
-                  </tab>
-                  <tab>
-                    <a
-                      href="/about"
-                      class="gc-analytics-event"
-                      data-category="Site-Wide Custom Events"
-                      data-label="Tab: About"
-                    >
-                      About
-                    </a>
-                  </tab>
-                  <tab overflow-tab="" hidden=""
-                    ><a
-                      href="/fast/use-imagemin-to-compress-images#"
-                      class="devsite-icon devsite-icon-arrow-drop-down"
-                      >More</a
-                    >
-                    <div
-                      class="devsite-tabs-overflow-menu"
-                      scrollbars=""
-                      hidden=""
-                    ></div
-                  ></tab></div
-              ></devsite-tabs>
-            </div>
-            <devsite-search
-              ds-is="search"
-              enable-search=""
-              enable-signin=""
-              enable-suggestions=""
-              enable-query-completion=""
-              enable-product-suggestions=""
-              enable-title-suggestions=""
-              enable-reference-suggestions=""
-              project-path=""
-            >
-              <form
-                class="devsite-search-form"
-                action="/results/"
-                method="GET"
-              >
-                <div class="devsite-search-container">
-                  <div id="searchbox" class="devsite-searchbox">
-                    <input
-                      placeholder="Search"
-                      type="text"
-                      class="devsite-search-field devsite-search-query"
-                      name="q"
-                      value=""
-                      autocomplete="off"
-                      aria-label="Search box"
-                    />
-                    <div
-                      class="devsite-search-image material-icons"
-                    ></div>
-                  </div>
-                  <button
-                    type="button"
-                    search-open=""
-                    class="devsite-search-button devsite-header-icon-button button-flat material-icons"
-                    aria-label="Open search box"
-                  ></button>
-                </div>
-                <div class="devsite-popout">
-                  <div
-                    class="devsite-popout-result devsite-suggest-results-container"
-                    devsite-hide=""
-                    role="menu"
-                    aria-haspopup="true"
-                  >
-                    <div class="devsite-suggest-wrapper">
-                      <div class="devsite-suggest-section">
-                        <div class="devsite-suggest-header">
-                          Suggested searches
-                        </div>
-                        <devsite-analytics-scope
-                          category="Site-Wide Custom Events"
-                          label="Search"
-                          action="Query Suggestion Click"
-                          ds-is="analytics-scope"
-                          ><div
-                            class="devsite-result-item devsite-nav-label"
-                            role="menuitem"
-                            index=":0"
-                          >
-                            <a
-                              class="devsite-result-item-link"
-                              href="/results/?q=api"
-                              ><span class="devsite-suggestion-fragment"
-                                ><b></b>a<b></b>p<b></b>i<b></b></span
-                            ></a>
-                          </div>
-                          <devsite-analytics-scope
-                            category="Site-Wide Custom Events"
-                            label="Search"
-                            action="Query Suggestion Click"
-                            ds-is="analytics-scope"
-                            ><div
-                              class="devsite-result-item devsite-nav-label"
-                              role="menuitem"
-                              index=":1"
-                            >
-                              <a
-                                class="devsite-result-item-link"
-                                href="/results/?q=google"
-                                ><span class="devsite-suggestion-fragment"
-                                  ><b></b>g<b></b>o<b></b>o<b></b>g<b
-                                  ></b>l<b></b>e<b></b></span
-                              ></a>
-                            </div>
-                            <devsite-analytics-scope
-                              category="Site-Wide Custom Events"
-                              label="Search"
-                              action="Query Suggestion Click"
-                              ds-is="analytics-scope"
-                              ><div
-                                class="devsite-result-item devsite-nav-label"
-                                role="menuitem"
-                                index=":2"
-                              >
-                                <a
-                                  class="devsite-result-item-link"
-                                  href="/results/?q=developers"
-                                  ><span
-                                    class="devsite-suggestion-fragment"
-                                    ><b></b>d<b></b>e<b></b>v<b></b>e<b
-                                    ></b>l<b></b>o<b></b>p<b></b>e<b
-                                    ></b>r<b></b>s<b></b></span
-                                ></a>
-                              </div>
-                              <devsite-analytics-scope
-                                category="Site-Wide Custom Events"
-                                label="Search"
-                                action="Query Suggestion Click"
-                                ds-is="analytics-scope"
-                                ><div
-                                  class="devsite-result-item devsite-nav-label"
-                                  role="menuitem"
-                                  index=":3"
-                                >
-                                  <a
-                                    class="devsite-result-item-link"
-                                    href="/results/?q=cloud"
-                                    ><span
-                                      class="devsite-suggestion-fragment"
-                                      ><b></b>c<b></b>l<b></b>o<b></b>u<b
-                                      ></b>d<b></b></span
-                                  ></a>
-                                </div>
-                                <devsite-analytics-scope
-                                  category="Site-Wide Custom Events"
-                                  label="Search"
-                                  action="Query Suggestion Click"
-                                  ds-is="analytics-scope"
-                                  ><div
-                                    class="devsite-result-item devsite-nav-label"
-                                    role="menuitem"
-                                    index=":4"
-                                  >
-                                    <a
-                                      class="devsite-result-item-link"
-                                      href="/results/?q=site"
-                                      ><span
-                                        class="devsite-suggestion-fragment"
-                                        ><b></b>s<b></b>i<b></b>t<b
-                                        ></b>e<b></b></span
-                                    ></a></div></devsite-analytics-scope></devsite-analytics-scope></devsite-analytics-scope></devsite-analytics-scope
-                        ></devsite-analytics-scope>
-                      </div>
-                      <div class="devsite-suggest-footer">
-                        <button
-                          type="submit"
-                          class="button button-white devsite-suggest-all-results"
-                        >
-                          See all results for ""
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="devsite-popout-result devsite-history-container"
-                    devsite-hide=""
-                    role="menu"
-                    aria-haspopup="true"
-                  ></div>
-                </div>
-              </form>
-              <button
-                type="button"
-                search-close=""
-                class="devsite-search-button devsite-header-icon-button button-flat material-icons"
-                aria-label="Close search box"
-              ></button>
-            </devsite-search>
-
-            <devsite-search-background
-              style="opacity: 1;"
-            ></devsite-search-background>
-          </div>
-
-          <web-profile-switcher-container></web-profile-switcher-container>
-        </div>
-      </div>
-    </div>
-    <div
-      class="devsite-collapsible-section
-      devsite-header-no-lower-tabs
-"
-    >
-      <div class="devsite-header-background"></div>
-    </div>
-  </div>
-</devsite-header>
\ No newline at end of file
diff --git a/src/site/_includes/explore.njk b/src/site/_includes/explore.njk
new file mode 100644
index 00000000000..f4df441b200
--- /dev/null
+++ b/src/site/_includes/explore.njk
@@ -0,0 +1,67 @@
+---
+layout: default
+title: Explore
+description: |
+  Learn best practices for the modern web and hone your skills with hands-on
+  codelabs.
+pageScripts:
+  - '/js/explore.js'
+---
+{% from 'macros/icon.njk' import icon with context %}
+
+<div class="wide-card-index">
+  {# Hero starts #}
+  <header class="region bg-mid-bg">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h1 class="headline__title">{{ title }}</h1>
+        <p>{{ 'i18n.explore.header' | i18n(locale) }}</p>
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
+  {# Collections start #}
+  <div class="wrapper explore__collections">
+    <div class="pad-block-size-1 repel">
+      <h2 id="{{ 'i18n.explore.collections' | i18n(locale) | slug }}" class="text-size-3">{{ 'i18n.explore.collections' | i18n(locale) }}</h2>
+
+      {% set filterItems = [] %}
+      {% for category, paths in learn %}
+        {% set i18nKey = 'i18n.explore.' + category %}
+        {% set filterItems = (filterItems.push({title: i18nKey | i18n(locale), id: i18nKey | i18n(locale) | slug}), filterItems) %}
+      {% endfor %}
+      <web-learn-filter all="{{'i18n.common.all' | i18n(locale)}}" filters="{{filterItems | dump}}"></web-learn-filter>
+    </div>
+  </div>
+
+  <div id="learn__collections">
+    {% for category, paths in learn %}
+      {% set i18nKey = 'i18n.explore.' + category %}
+      <div id="{{ i18nKey | i18n(locale) | slug }}" class="explore__collection">
+        <div class="wrapper flow">
+          <h2 id="{{ 'i18n.explore.collections' | i18n(locale) | slug }}" class="text-size-2">{{ i18nKey | i18n(locale) }}</h2>
+          <div class="auto-grid gap-top-size-2">
+            {% for path in paths %}
+              <a href="/{{ path.slug }}" class="card">
+                <div class="card__header repel">
+                  <p class="color-mid-text">Collection</p>
+                  <div class="counter" data-layout="flush">
+                    <span class="counter__content">{{ path.topics.length }}</span>
+                    {% include 'icons/mortarboard.svg' %}
+                  </div>
+                </div>
+                <img src="{{ path.cover | imgix }}" alt="{{ path.title | i18n(locale) }}" />
+                <div class="card__content flow">
+                  <h3 class="card__heading text-size-3">{{ path.title | i18n(locale) }}</h3>
+                  <p class="text-size-1">{{ path.description | i18n(locale) }}</p>
+                </div>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {# Collections end #}
+</div>
diff --git a/src/site/_includes/feed.njk b/src/site/_includes/feed.njk
new file mode 100644
index 00000000000..4d66c94e08b
--- /dev/null
+++ b/src/site/_includes/feed.njk
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>{{ metadata.title }}</title>
+  <subtitle>{{ metadata.feed.subtitle }}</subtitle>
+  <link href="{{ metadata.feed.url }}" rel="self"/>
+  <link href="{{ metadata.url }}"/>
+  <updated>{{ site.buildDate | rssDate }}</updated>
+  <id>{{ metadata.feed.id }}</id>
+  <author>
+    <name>{{ metadata.author.name }}</name>
+  </author>
+  <icon>{{ metadata.icon }}</icon>
+  <logo>{{ metadata.logo }}</logo>
+  {% for post in collections.blogPosts -%}
+    {% if loop.index0 < site.paginationCount %}
+    {#  absoluteUrl comes from 11ty RSS Plugin (@see https://www.11ty.dev/docs/plugins/rss/) #}
+    {% set absolutePostUrl -%}{{ post.url | url | absoluteUrl(metadata.url) }}{%- endset %}
+    <entry>
+      <title>{{ post.data.title }}</title>
+      <link href="{{ absolutePostUrl }}"/>
+      <updated>{{ post.date | rssDate }}</updated>
+      <id>{{ absolutePostUrl }}</id>
+      <content type="html" mode="escaped">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+      {% for entry in post.data.authors %}
+        {%- set author = collections.authors[entry] -%}
+        <author>
+          <name>{{ author.title | i18n(locale) }}</name>
+        </author>
+      {%- endfor %}
+    </entry>
+    {% endif %}
+  {%- endfor %}
+</feed>
diff --git a/src/site/_includes/handbook.njk b/src/site/_includes/handbook.njk
index 2960e3d9c18..a6c3ed5a889 100644
--- a/src/site/_includes/handbook.njk
+++ b/src/site/_includes/handbook.njk
@@ -1,9 +1,9 @@
 ---
-layout: layout
+layout: default
 noindex: true
 permalink: "/{{lang}}/handbook/{{page.fileSlug}}/index.html"
-eleventyComputed:
-  canonicalUrl: "/handbook/{{page.fileSlug}}/"
+pageScripts:
+  - '/js/content.js'
 ---
 
-{% include 'partials/post.njk' %}
\ No newline at end of file
+{% include 'partials/post.njk' %}
diff --git a/src/site/_includes/homepage.njk b/src/site/_includes/homepage.njk
new file mode 100644
index 00000000000..190a6e16748
--- /dev/null
+++ b/src/site/_includes/homepage.njk
@@ -0,0 +1,137 @@
+---
+layout: default
+pageScripts:
+  - '/js/home.js'
+---
+{% from 'macros/icon.njk' import icon with context %}
+
+<div class="homepage">
+  {# Hero starts #}
+  <header class="hero bg-core-bg">
+    <div class="wrapper">
+      <div class="hero__columns switcher">
+        <div>
+          <span aria-hidden="true" class="hero__eyebrow">{{ intro.eyebrow }}</span>
+          <div class="hero__content flow">
+            <img fetchpriority="high" src="{{ intro.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ intro.imageWidth }}" height="{{ intro.imageHeight }}" />
+            <h1 class="hero__title">{{ intro.title }}</h1>
+            {{ intro.summary | md | safe }}
+            <a class="button" data-type="primary" href="{{ intro.buttonUrl }}">{{ intro.buttonText }}</a>
+          </div>
+        </div>
+        <div class="flow">
+          <a class="feature-card" href="{{ featuredCard.url }}" data-theme="{{ featuredCard.theme }}" data-treatment="illustration">
+            <span class="feature-card__eyebrow">{{ featuredCard.eyebrow }}</span>
+            <h3 class="feature-card__title">{{ featuredCard.title | safe }}</h3>
+            {% if featuredCard.video %}
+              <video autoplay loop muted playsinline
+                class="feature-card__background"
+                aria-label="{{ featuredCard.alt }}">
+                <source src="{{ featuredCard.video }}" type="video/mp4;">
+              </video>
+            {% elif featuredCard.background %}
+            {% Img src=featuredCard.background, alt=featuredCard.alt, width="800", height="434", class="feature-card__background", fetchpriority="high" %}
+            {% endif %}
+          </a>
+
+          {% include "partials/picked-case-study.njk" %}
+        </div>
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
+  {# Web Platform News start #}
+  <div class="homepage__section bg-mid-bg">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h2 class="headline__title">{{ platformNews.title }}</h2>
+        <p>{{ platformNews.subTitle }}</p>
+      </div>
+      <div class="homepage__news gap-top-size-2">
+      {% set cardCount = 0 %}
+      {% set pickedLeft = platformNews.pickedLeft %}
+      {% set pickedRight = platformNews.pickedRight %}
+      {% set items = [pickedLeft, pickedRight] %}
+
+      {% for item in items %}
+        {% if item.url %}
+          {% set post = item.url | findByUrl %}
+        {% endif %}
+
+        {% if post.data.lang === 'en' %}
+          {% if cardCount <= 1 %}
+            {% if post.data.hero %}
+              <article class="card">
+                <a href="{{ post.url }}" aria-hidden="true">
+                  {% Img src=item.thumbnail or post.data.thumbnail or post.data.hero, alt=post.data.alt or '', width="570", height="330", class="card__hero" %}
+                </a>
+                <div class="card__content flow">
+                  <h3 class="card__heading text-size-3">
+                    <a href="{{ post.url }}">{{ item.title or post.data.title }}</a>
+                  </h3>
+                  <p>{{ item.description or post.data.description }}</p>
+                </div>
+                <div class="card__tags cluster gap-top-size-1" aria-label="tags for this case study">
+                  {% for tagKey in post.data.tags or [] %}
+                    {% if tagKey in collections.tags %}
+                      {% set tag = collections.tags[tagKey] %}
+                      <a class="pill" href="{{ tag.url }}">{{ tag.overrideTitle or tag.title | i18n(locale) }}</a>
+                    {% endif %}
+                  {% endfor %}
+                </div>
+              </article>
+              {% set cardCount = cardCount + 1 %}
+            {% endif %}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+      </div>
+    </div>
+  </div>
+  {# Web Platform News end #}
+
+  {# Themes start #}
+  <div class="wrapper">
+    <div class="pad-block-size-1 repel">
+      <h2 id="themes" class="text-size-3"> Themes </h2>
+
+      {% set filterItems = [] %}
+      {% for theme in themes %}
+        {% set filterItems = (filterItems.push({title: theme.category, id: theme.category | slug }), filterItems) %}
+      {% endfor %}
+      <web-learn-filter all="all" filters="{{filterItems | dump}}"></web-learn-filter>
+    </div>
+  </div>
+
+  <div id="learn__collections">
+  {% for theme in themes %}
+    <div class="homepage__collection" id="{{ theme.category | slug }}">
+      <div class="region wrapper">
+        <h5> {{ theme.category }} </h5>
+          <div class="collection__layout" aria-label="topics">
+            {% set cards = theme.cards %}
+            {% include 'partials/cards-collection.njk' %}
+          </div>
+      </div>
+    </div>
+  {% endfor %}
+  </div>
+  {# Themes end #}
+
+  {# Chrome developers start #}
+  <section class="homepage__developers region bg-mid-bg">
+    <div class="wrapper flow all-center">
+      <div> {% include "icons/chrome.svg" %} </div>
+
+      <h1 class="headline__title">{{ developers.title }}</h1>
+      <p class="color-mid-text">{{ developers.summary | safe }}</p>
+      <div>
+        <a class="button gap-top-size-1" data-type="primary" href="{{ developers.primaryButtonUrl }}">{{ developers.primaryButtonText }}</a>
+      </div>
+    </div>
+  </section>
+  {# Chrome developers end #}
+
+  {% include 'partials/subscribe.njk' %}
+</div>
diff --git a/src/site/_includes/icons/arrow-back.svg b/src/site/_includes/icons/arrow-back.svg
new file mode 100644
index 00000000000..59b84237e5f
--- /dev/null
+++ b/src/site/_includes/icons/arrow-back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
diff --git a/src/site/_includes/icons/arrow-forward.svg b/src/site/_includes/icons/arrow-forward.svg
new file mode 100644
index 00000000000..161c2ecf276
--- /dev/null
+++ b/src/site/_includes/icons/arrow-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
diff --git a/src/site/_includes/icons/arrow-right.svg b/src/site/_includes/icons/arrow-right.svg
new file mode 100644
index 00000000000..03bd472bd5a
--- /dev/null
+++ b/src/site/_includes/icons/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M10 17l5-5-5-5v10z"/><path d="M0 24V0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/baseline.svg b/src/site/_includes/icons/baseline.svg
new file mode 100644
index 00000000000..2e38bf2bbfb
--- /dev/null
+++ b/src/site/_includes/icons/baseline.svg
@@ -0,0 +1,13 @@
+
+<svg width="38" height="22" viewBox="0 0 38 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6676 2.21159L2.11839 13.2002L0.00854492 11.0024L10.5578 0.0138804L12.6676 2.21159Z" fill="#A8DAB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.44415 2.19735L14.7737 8.79049L16.8835 6.59277L10.554 -0.000363149L8.44415 2.19735Z" fill="#A8DAB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3324 2.21159L35.8816 13.2002L37.9915 11.0024L27.4422 0.0138804L25.3324 2.21159Z" fill="#A8DAB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4548 21.9998L21.1253 15.4067L23.2351 13.209L29.5647 19.8021L27.4548 21.9998Z" fill="#A8DAB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.0001 10.9934L29.5088 19.8383L27.3989 17.6406L35.8902 8.79572L38.0001 10.9934Z" fill="#A8DAB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5493 21.9822L1.35582e-05 10.9936L2.10986 8.7959L12.6591 19.7845L10.5493 21.9822Z" fill="#1E8E3E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5625 21.991L19.0019 13.2002L16.8921 11.0024L8.45269 19.7933L10.5625 21.991Z" fill="#DDB98E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5558 2.21159L19.0066 13.2002L16.8967 11.0024L27.446 0.0138804L29.5558 2.21159Z" fill="#DDB98E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5625 21.991L19.0019 13.2002L16.8921 11.0024L8.45269 19.7933L10.5625 21.991Z" fill="#1E8E3E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5558 2.21159L19.0066 13.2002L16.8967 11.0024L27.446 0.0138804L29.5558 2.21159Z" fill="#1E8E3E"/>
+</svg>
diff --git a/src/site/_includes/icons/blog.svg b/src/site/_includes/icons/blog.svg
new file mode 100644
index 00000000000..5d2bad0eecd
--- /dev/null
+++ b/src/site/_includes/icons/blog.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" />
+<path d="M14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" />
+</svg>
diff --git a/src/site/_includes/icons/calendar.svg b/src/site/_includes/icons/calendar.svg
new file mode 100644
index 00000000000..7eaf12e9f6a
--- /dev/null
+++ b/src/site/_includes/icons/calendar.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 17V9h12v3.09c.33-.05.66-.09 1-.09.34 0 .67.04 1 .09V6c0-1.1-.9-2-2-2h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 17a2 2 0 002 2h7.09c-.05-.33-.09-.66-.09-1 0-.34.04-.67.09-1H5z" fill="currentColor"/><path d="M19 17v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z" fill="currentColor"/></svg>
diff --git a/src/site/_includes/icons/carat-back.svg b/src/site/_includes/icons/carat-back.svg
new file mode 100644
index 00000000000..2aa2ead0de9
--- /dev/null
+++ b/src/site/_includes/icons/carat-back.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.41 16.0699L10.83 11.7053L15.41 7.34075L14 6L8 11.7053L14 17.4106L15.41 16.0699Z" />
+</svg>
diff --git a/src/site/_includes/icons/carat-forward.svg b/src/site/_includes/icons/carat-forward.svg
new file mode 100644
index 00000000000..a5e98a646ce
--- /dev/null
+++ b/src/site/_includes/icons/carat-forward.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 7.34075L12.58 11.7053L8 16.0699L9.41 17.4106L15.41 11.7053L9.41 6L8 7.34075Z" />
+</svg>
diff --git a/src/site/_includes/icons/celebration.svg b/src/site/_includes/icons/celebration.svg
new file mode 100644
index 00000000000..95fbc2a926f
--- /dev/null
+++ b/src/site/_includes/icons/celebration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128" xml:space="preserve"><path d="M7.5 123.3c2.2 2.4 11.6-1.9 19-5.3C32 115.4 54 106.3 65 101.6c3-1.2 7.3-2.9 10.4-7 2.8-3.6 10-19-4.6-34.7-15-16-30.4-11.5-36.2-7.5A28.5 28.5 0 0 0 27.3 63c-5.2 11.6-12.7 32.9-15.7 41.3-2.3 6.1-6.4 16.5-4.1 19z" fill="currentColor"></path><path d="M18 86.8s.7 6.5 6.1 14.6c6.3 9.6 15 11.2 15 11.2l-5.8 2.4s-6.5-2-12.7-10.4c-3.8-5.3-5-11.6-5-11.6l2.3-6.2zm-5.6 15.4s1.5 5.6 4.7 9.7c3.8 5 8.6 6.5 8.6 6.5l-4.5 2s-3.3-.8-7-5.5c-2.9-3.5-3.7-7.6-3.7-7.6l1.9-5.1z" fill="currentColor"></path><path d="M10 116.4c-.2-.5-.2-1 0-1.4l25.4-53 4.2 16-26.8 38.7c-.7 1-2.3 1-2.8-.2z" style="opacity:.44" fill="currentColor"></path><path d="M41.6 83.2c12 14 25.5 12.2 30 8.6 4.5-3.5 8.1-15.6-3.7-29.3C55.3 48.2 41.3 52.2 38 55.3s-7.4 15.1 3.5 27.9z" style="fill: var(--color-state-good-bg);"></path><path d="M82.5 89c-4.3-3.7-6.6-3-9.7-1.8a26 26 0 0 1-18.9 0l2.6-6.2c5 1.7 8.7 1 12-1 4-2.4 9.6-5.6 18.3 1.6 3.6 3 7.3 5.1 10 4.2 2-.7 3-3.6 3.6-6l.2-1.3c.4-3.7 1.2-11.6 7.1-15.7 6.4-4.3 13-4.3 13-4.3l1.2 12c-3-.5-5.2.1-7 1-6.7 3.8-.8 18.2-11.3 23-10.1 4.8-18.4-3.3-21-5.6zM45.4 73.7l-4.3-3.9c8-8.9 5.8-15.4 4.3-20.2A26.4 26.4 0 0 1 44 38.8c-3-3.8-4.4-7.8-4.5-8-1.9-5.7-.5-11.2 2.8-16.4C48.7 4 60.5 4 60.5 4l4 10.5c-3-.1-12.8 0-15.8 4.8-3.8 6-1.3 9.6-1.2 10 .8-1 1.5-1.7 2.2-2.3 4.8-4.2 9-4.8 11.6-4.6a11 11 0 0 1 7.6 4.2c2 2.7 3 6.2 2.3 9.4a11 11 0 0 1-5.8 7.4 16 16 0 0 1-13 1.5v.3l.6 2c1.8 5.4 5 14.1-7.6 26.5zm7.4-37.5c.5.4 1.1.8 1.8 1 2 .8 4.4.6 7-.8 1.5-.9 1.7-1.7 1.7-2 .2-.9 0-2-.7-2.8a2.8 2.8 0 0 0-2-1.2c-1.6-.2-3.6.8-5.6 2.6-1 .9-1.7 2-2.3 3.2zm10 39.1-6.2-.1s3-16.7 12.5-19.5c1.8-.5 3.7-1 5.7-1.3l4-.8c.1-1.6-.5-3.6-1.3-5.9-.6-1.7-1.2-3.5-1.5-5.5-.6-3.9.4-7.3 3-9.6 3-2.9 7.9-3.8 13.4-2.5 3.2.7 5.5 2.2 7.6 3.6 2.9 2 4.6 3 8.2.5 4.3-2.9-1.4-14.3-4.4-21l11.3-4.6c1.5 3.3 8.8 20.3 4 30a11.5 11.5 0 0 1-8.1 6.2c-8 1.8-12.6-1.3-16-3.6-1.6-1-3-1.9-4.6-2.3-10.6-3 4.2 12.6-2.7 19.6-4.2 4.2-14.4 5.3-15 5.5-6.6 1.6-10 11.3-10 11.3z" fill="currentColor"></path><path d="M44 38.8c-.2 2.2-.3 3.5.3 6.4 2.7 2 8.7 2 8.7 2l-.6-2v-.3c-6.1-3-8.4-6.1-8.4-6.1zm-12.5 9.8-10.3-5 5.1-7.5 8.2 5.4zm-15.2-14A26 26 0 0 1 5 28.9l5.2-6c1.6 1.2 5 3.5 7.2 3.8l-1.1 7.9zM25.6 21.3 18 18.8a18 18 0 0 0 .7-8.3l7.9-1.3c.6 4 .3 8.2-1 12zM73 15.3l7.9-1.7L83 23.9l-7.8 1.7zM92.5 17.8 87 12c2.8-2.8 3.5-6.3 3.5-6.4L98.4 7c-.1.6-1.1 6.3-6 10.9zM95.5 48.6l7-2.2 2.3 7.7-7 2.1zM97.5 113l-7.9-1c.3-2.7-1.8-6.2-2.4-7l6.4-4.8c.5.6 4.7 6.4 4 12.8zM120.4 102.9c-3-.5-6-.6-9.1-.5l-.3-8c3.5-.2 7 0 10.6.6l-1.2 7.9zM109.6 113.9l5.6-5.7 7.8 7.6-5.6 5.7zM93.1 63.3 99 70l-6.6 5.8-5.8-6.6z" fill="currentColor"></path></svg>
diff --git a/src/site/_includes/icons/chrome-white.svg b/src/site/_includes/icons/chrome-white.svg
new file mode 100644
index 00000000000..bd833bd6cee
--- /dev/null
+++ b/src/site/_includes/icons/chrome-white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0002 0.000198896C8.03654 0.000198896 4.52717 1.9163 2.34307 4.87283L6.04945 11.2927C6.22181 9.848 6.91291 8.51514 7.99463 7.54208C9.07636 6.56901 10.4747 6.0223 11.9296 6.00331C11.9529 6.00073 11.9767 5.99962 12.0005 5.99981L22.3939 5.99981C20.3207 2.41237 16.4471 0.000198896 12.0002 0.000198896ZM1.60671 5.99906C0.586498 7.76412 0 9.81226 0 12.0003C0 18.1811 4.65658 23.2593 10.6575 23.9249L14.3581 17.5155C13.6129 17.8346 12.8109 17.9998 12.0001 18.0003C9.89088 17.9976 7.93796 16.8875 6.85643 15.0765C6.83691 15.0526 6.81923 15.027 6.80376 15.0003L1.60671 5.99906ZM12.0002 7.20025C10.7271 7.20025 9.50625 7.70609 8.60612 8.60622C7.70598 9.50636 7.20033 10.7273 7.20033 12.0003C7.20033 13.2733 7.70603 14.4942 8.60612 15.3943C9.50621 16.2945 10.7271 16.8001 12.0002 16.8001C13.2732 16.8001 14.4941 16.2944 15.3942 15.3943C16.2944 14.4943 16.8 13.2733 16.8 12.0003C16.8 10.7273 16.2943 9.50636 15.3942 8.60622C14.4941 7.70609 13.2732 7.20025 12.0002 7.20025ZM15.5902 7.20025C17.1048 8.33129 17.9977 10.11 18.0001 12.0003C17.9977 13.0181 17.7364 14.0185 17.2409 14.9076C17.2289 14.9397 17.2142 14.9706 17.1969 15.0003L12.0009 24.0002C18.6352 23.9998 24 18.6345 24 12.0001C24 10.2923 23.6427 8.66976 23.0015 7.2001L15.5902 7.20025Z" fill="white"/>
+</svg>
diff --git a/src/site/_includes/icons/chrome.svg b/src/site/_includes/icons/chrome.svg
new file mode 100644
index 00000000000..e315037d65b
--- /dev/null
+++ b/src/site/_includes/icons/chrome.svg
@@ -0,0 +1,53 @@
+<svg width="238" height="36" viewBox="0 0 238 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M54.5001 26.3499C53.4194 26.3768 52.3446 26.1822 51.3419 25.7781C50.3393 25.3739 49.43 24.7688 48.6701 23.9999C47.8956 23.2332 47.2866 22.3159 46.8806 21.3045C46.4747 20.2932 46.2805 19.2093 46.3101 18.1199C46.3101 15.7799 47.1001 13.8199 48.6701 12.2499C49.43 11.4811 50.3393 10.8759 51.3419 10.4718C52.3446 10.0676 53.4194 9.873 54.5001 9.89992C56.8701 9.89992 58.8001 10.7499 60.2801 12.4699L58.8801 13.8299C58.3592 13.175 57.6909 12.6525 56.9298 12.3049C56.1686 11.9574 55.3361 11.7946 54.5001 11.8299C53.6937 11.812 52.8919 11.9568 52.1428 12.2558C51.3937 12.5548 50.7125 13.0017 50.1401 13.5699C49.5504 14.1671 49.0899 14.8792 48.7871 15.662C48.4843 16.4447 48.3458 17.2814 48.3801 18.1199C48.3801 19.9999 48.9701 21.5199 50.1401 22.6799C50.7125 23.2481 51.3937 23.6951 52.1428 23.994C52.8919 24.293 53.6937 24.4378 54.5001 24.4199C56.3901 24.4199 58.0001 23.6499 59.3401 22.1199L60.7401 23.5399C60.0025 24.4168 59.0806 25.1202 58.0401 25.5999C56.9501 26.0999 55.7701 26.3499 54.5001 26.3499V26.3499ZM64.5701 10.2499V15.2199L64.4801 16.7199H64.5701C64.8701 16.1999 65.3201 15.7699 65.9501 15.4199C66.565 15.0574 67.2662 14.8674 67.9801 14.8699C69.3101 14.8699 70.3301 15.2699 71.0401 16.0999C71.7801 17.0354 72.1534 18.2088 72.09 19.3999V25.9999H70.0701V19.6999C70.0701 17.7099 69.1801 16.7199 67.4101 16.7199C66.5701 16.7199 65.8901 17.0499 65.3601 17.7199C64.8301 18.3899 64.5601 19.1599 64.5601 20.0399V25.9999H62.5401V10.2499H64.5701ZM76.4901 25.9999H74.4701V15.2199H76.4001V16.9799H76.5001C76.7001 16.3899 77.1201 15.9099 77.7501 15.5299C78.2472 15.2107 78.8139 15.0159 79.4022 14.962C79.9905 14.908 80.5831 14.9965 81.1301 15.2199L80.3601 17.1199C80.1001 17.0099 79.7401 16.9599 79.2901 16.9599C78.5501 16.9599 77.9001 17.2599 77.3301 17.8399C77.0462 18.1414 76.8256 18.4967 76.6813 18.8849C76.5371 19.2731 76.472 19.6862 76.4901 20.0999V25.9999V25.9999ZM82.7401 16.5199C83.2486 15.9785 83.8665 15.5514 84.5526 15.2669C85.2388 14.9825 85.9776 14.8471 86.7201 14.8699C88.3401 14.8699 89.6601 15.4199 90.7001 16.5199C91.2199 17.0634 91.6265 17.705 91.896 18.4072C92.1656 19.1093 92.2927 19.8581 92.2701 20.6099C92.2701 22.2499 91.7501 23.6199 90.7001 24.7199C90.1881 25.2556 89.5692 25.6775 88.8835 25.9583C88.1978 26.2392 87.4607 26.3726 86.7201 26.3499C85.9794 26.3727 85.2423 26.2393 84.5566 25.9585C83.8709 25.6777 83.2519 25.2557 82.7401 24.7199C81.6962 23.6106 81.1351 22.1325 81.1801 20.6099C81.1801 18.9699 81.7001 17.6099 82.7401 16.5099V16.5199ZM84.2401 23.4499C84.5579 23.7874 84.9415 24.0563 85.3671 24.2401C85.7927 24.4239 86.2514 24.5187 86.715 24.5187C87.1787 24.5187 87.6374 24.4239 88.063 24.2401C88.4886 24.0563 88.8722 23.7874 89.1901 23.4499C89.5465 23.0711 89.8231 22.6245 90.0035 22.1366C90.1839 21.6487 90.2643 21.1295 90.2401 20.6099C90.2662 20.0931 90.1866 19.5765 90.0061 19.0916C89.8255 18.6066 89.5478 18.1637 89.1901 17.7899C88.8745 17.4485 88.4917 17.176 88.0658 16.9897C87.6399 16.8033 87.18 16.7071 86.715 16.7071C86.2501 16.7071 85.7902 16.8033 85.3643 16.9897C84.9384 17.176 84.5556 17.4485 84.2401 17.7899C83.8865 18.1662 83.6122 18.6098 83.4335 19.0942C83.2548 19.5787 83.1754 20.0941 83.2001 20.6099C83.2001 21.7799 83.5501 22.7299 84.2401 23.4499ZM93.8901 25.9999V15.2199H95.8301V16.7199H95.9101C96.2201 16.1999 96.6901 15.7699 97.3201 15.4199C97.9007 15.0713 98.5629 14.8816 99.2401 14.8699C100.91 14.8699 102.04 15.5599 102.64 16.9399C103.024 16.2875 103.577 15.7508 104.24 15.3865C104.904 15.0221 105.654 14.8437 106.41 14.8699C107.68 14.8699 108.64 15.2699 109.29 16.0999C109.94 16.8999 110.26 17.9999 110.26 19.3999V25.9999H108.23V19.6999C108.23 18.6199 108.03 17.8499 107.64 17.3999C107.24 16.9399 106.64 16.7199 105.84 16.7199C105.04 16.7199 104.38 17.0499 103.86 17.7199C103.349 18.3844 103.078 19.2019 103.09 20.0399V25.9999H101.06V19.6999C101.06 18.6199 100.86 17.8499 100.46 17.3999C100.07 16.9399 99.4701 16.7199 98.6601 16.7199C97.8701 16.7199 97.2101 17.0499 96.6801 17.7199C96.1694 18.3844 95.8981 19.2019 95.9101 20.0399V25.9999H93.8901ZM117.51 26.3499C116.769 26.3759 116.031 26.244 115.345 25.963C114.659 25.6819 114.04 25.2582 113.53 24.7199C112.505 23.6014 111.96 22.126 112.01 20.6099C112.01 19.0399 112.5 17.6899 113.48 16.5599C114.48 15.4299 115.75 14.8599 117.28 14.8599C118.88 14.8599 120.16 15.3899 121.12 16.4299C122.127 17.5825 122.647 19.0813 122.57 20.6099L122.55 20.9799H114.03C114.036 21.9486 114.424 22.8758 115.11 23.5599C115.78 24.1899 116.57 24.4999 117.47 24.4999C118.92 24.4999 119.9 23.8899 120.41 22.6599L122.21 23.3999C121.846 24.2564 121.246 24.9917 120.48 25.5199C119.68 26.0699 118.68 26.3499 117.51 26.3499ZM120.41 19.3099C120.343 18.6414 120.042 18.0181 119.56 17.5499C119.04 16.9899 118.27 16.7199 117.25 16.7199C116.5 16.7199 115.85 16.9499 115.29 17.4199C114.74 17.8899 114.37 18.5199 114.16 19.3199H120.41V19.3099V19.3099ZM129.61 25.9999V10.2499H134.42C136.84 10.2499 138.78 10.9799 140.23 12.4499C140.96 13.1972 141.529 14.0854 141.904 15.0603C142.279 16.0352 142.451 17.0763 142.41 18.1199C142.41 20.4599 141.68 22.3599 140.23 23.8199C138.78 25.2699 136.84 25.9999 134.43 25.9999H129.6H129.61V25.9999ZM131.63 24.0599H134.43C136.24 24.0599 137.68 23.5399 138.73 22.4999C139.81 21.4599 140.34 19.9999 140.34 18.1199C140.34 16.2599 139.81 14.8099 138.74 13.7699C138.166 13.2256 137.486 12.8038 136.744 12.5305C136.001 12.2571 135.21 12.1379 134.42 12.1799H131.62V24.0599H131.63V24.0599ZM149.03 26.3599C148.287 26.3853 147.546 26.2521 146.859 25.9694C146.171 25.6866 145.551 25.2607 145.04 24.7199C144.019 23.5998 143.477 22.1246 143.53 20.6099C143.53 19.0399 144.02 17.6899 145 16.5599C146 15.4299 147.27 14.8599 148.8 14.8599C150.4 14.8599 151.68 15.3899 152.63 16.4299C153.641 17.5809 154.164 19.0799 154.09 20.6099L154.06 20.9799H145.55C145.556 21.9486 145.944 22.8758 146.63 23.5599C147.3 24.1899 148.09 24.4999 148.98 24.4999C150.43 24.4999 151.42 23.8899 151.93 22.6599L153.73 23.3999C153.366 24.2564 152.766 24.9917 152 25.5199C151.19 26.0699 150.2 26.3499 149.03 26.3499V26.3599V26.3599ZM151.93 19.3099C151.86 18.6401 151.556 18.0165 151.07 17.5499C150.56 16.9899 149.79 16.7199 148.77 16.7199C148.01 16.7199 147.37 16.9499 146.8 17.4199C146.26 17.8899 145.89 18.5199 145.68 19.3199H151.93V19.3099V19.3099ZM158.93 25.9999L154.58 15.2199H156.78L159.95 23.5799H159.99L163.2 15.2199H165.36L160.96 25.9999H158.93V25.9999ZM171.24 26.3499C170.499 26.3752 169.761 26.243 169.075 25.9621C168.389 25.6811 167.77 25.2577 167.26 24.7199C166.235 23.6014 165.69 22.126 165.74 20.6099C165.74 19.0399 166.24 17.6899 167.21 16.5599C168.21 15.4299 169.48 14.8599 171.02 14.8599C172.62 14.8599 173.9 15.3899 174.85 16.4299C175.857 17.5825 176.377 19.0813 176.3 20.6099L176.28 20.9799H167.76C167.766 21.9486 168.154 22.8758 168.84 23.5599C169.52 24.1899 170.3 24.4999 171.2 24.4999C172.65 24.4999 173.63 23.8899 174.15 22.6599L175.95 23.3999C175.584 24.2579 174.98 24.9934 174.21 25.5199C173.41 26.0699 172.41 26.3499 171.24 26.3499V26.3499ZM174.14 19.3099C174.073 18.6414 173.772 18.0181 173.29 17.5499C172.77 16.9899 172 16.7199 170.98 16.7199C170.23 16.7199 169.58 16.9499 169.02 17.4199C168.48 17.8899 168.1 18.5199 167.9 19.3199H174.15L174.14 19.3099V19.3099ZM180.18 25.9999H178.15V10.2499H180.18V25.9999V25.9999ZM183.48 16.5199C183.989 15.9785 184.606 15.5513 185.293 15.2668C185.979 14.9824 186.718 14.8471 187.46 14.8699C189.08 14.8699 190.4 15.4199 191.44 16.5199C191.96 17.0637 192.366 17.7052 192.635 18.4074C192.905 19.1095 193.032 19.8582 193.01 20.6099C193.01 22.2499 192.49 23.6199 191.45 24.7199C190.937 25.2567 190.316 25.6794 189.629 25.9602C188.941 26.2411 188.202 26.3739 187.46 26.3499C186.719 26.373 185.982 26.2398 185.296 25.959C184.611 25.6781 183.992 25.2559 183.48 24.7199C182.436 23.6106 181.875 22.1325 181.92 20.6099C181.92 18.9699 182.44 17.6099 183.48 16.5099V16.5199V16.5199ZM184.98 23.4499C185.3 23.7848 185.685 24.0507 186.112 24.2313C186.538 24.4118 186.997 24.5033 187.46 24.4999C188.42 24.4999 189.24 24.1499 189.93 23.4499C190.287 23.0711 190.563 22.6245 190.744 22.1366C190.924 21.6487 191.004 21.1295 190.98 20.6099C191.006 20.0931 190.927 19.5764 190.746 19.0914C190.566 18.6065 190.288 18.1636 189.93 17.7899C189.454 17.2758 188.83 16.9226 188.145 16.7792C187.459 16.6359 186.746 16.7095 186.104 16.9899C185.678 17.1763 185.296 17.4487 184.98 17.7899C184.626 18.1662 184.352 18.6098 184.174 19.0942C183.995 19.5787 183.915 20.0941 183.94 20.6099C183.94 21.7799 184.29 22.7299 184.98 23.4499ZM200.35 26.3499C199.53 26.3499 198.79 26.1799 198.13 25.8199C197.535 25.5172 197.031 25.0617 196.67 24.4999H196.59L196.67 25.9999V30.7499H194.65V15.2199H196.59V16.7199H196.67C197 16.1899 197.48 15.7499 198.13 15.3999C198.79 15.0399 199.53 14.8699 200.35 14.8699C201.75 14.8699 202.95 15.4199 203.95 16.5199C204.968 17.6345 205.513 19.101 205.47 20.6099C205.47 22.2399 204.97 23.6099 203.96 24.7099C203.512 25.2275 202.958 25.6421 202.335 25.9252C201.711 26.2082 201.034 26.3531 200.35 26.3499V26.3499ZM200.02 24.4999C200.96 24.4999 201.76 24.1499 202.44 23.4499C203.136 22.6723 203.499 21.6524 203.45 20.6099C203.476 20.0965 203.4 19.5831 203.226 19.0992C203.053 18.6152 202.786 18.1703 202.44 17.7899C202.136 17.4496 201.763 17.1781 201.346 16.9936C200.928 16.8091 200.476 16.7158 200.02 16.7199C199.06 16.7199 198.25 17.0699 197.58 17.7699C196.92 18.4699 196.58 19.4199 196.58 20.6099C196.58 21.7999 196.92 22.7399 197.58 23.4499C198.25 24.1499 199.06 24.4999 200.02 24.4999ZM212.22 26.3499C211.477 26.3773 210.737 26.2461 210.049 25.965C209.361 25.684 208.741 25.2595 208.23 24.7199C207.205 23.6014 206.66 22.126 206.71 20.6099C206.71 19.0399 207.21 17.6899 208.19 16.5599C209.19 15.4299 210.45 14.8599 211.99 14.8599C213.59 14.8599 214.87 15.3899 215.82 16.4299C216.827 17.5825 217.347 19.0813 217.27 20.6099L217.25 20.9799H208.74C208.744 21.9471 209.128 22.8739 209.81 23.5599C210.49 24.1899 211.27 24.4999 212.17 24.4999C213.62 24.4999 214.6 23.8899 215.12 22.6599L216.92 23.3999C216.554 24.2579 215.95 24.9934 215.18 25.5199C214.38 26.0699 213.38 26.3499 212.21 26.3499H212.22V26.3499ZM215.12 19.3099C215.05 18.6401 214.746 18.0165 214.26 17.5499C213.74 16.9899 212.97 16.7199 211.95 16.7199C211.2 16.7199 210.55 16.9499 209.99 17.4199C209.45 17.8899 209.07 18.5199 208.87 19.3199H215.12V19.3099V19.3099ZM221.15 25.9999H219.12V15.2199H221.06V16.9799H221.15C221.35 16.3899 221.77 15.9099 222.4 15.5299C222.898 15.2083 223.467 15.0121 224.057 14.9581C224.647 14.9041 225.242 14.9939 225.79 15.2199L225.02 17.1199C224.75 17.0099 224.39 16.9599 223.94 16.9599C223.21 16.9599 222.56 17.2599 221.98 17.8399C221.698 18.142 221.479 18.4976 221.336 18.8858C221.193 19.274 221.13 19.6868 221.15 20.0999V25.9999V25.9999ZM230.69 26.3499C229.49 26.3499 228.49 26.0499 227.69 25.4699C226.936 24.9025 226.349 24.1426 225.99 23.2699L227.79 22.5199C228.36 23.8699 229.33 24.5499 230.71 24.5499C231.34 24.5499 231.85 24.4099 232.25 24.1299C232.66 23.8499 232.87 23.4799 232.87 23.0299C232.87 22.3299 232.37 21.8499 231.39 21.5999L229.22 21.0699C228.504 20.8812 227.837 20.5439 227.26 20.0799C226.959 19.8426 226.718 19.538 226.557 19.1906C226.395 18.8433 226.318 18.4628 226.33 18.0799C226.33 17.1299 226.75 16.3599 227.59 15.7699C228.44 15.1699 229.44 14.8699 230.6 14.8699C231.55 14.8699 232.4 15.0899 233.15 15.5299C233.883 15.9409 234.449 16.5954 234.75 17.3799L233 18.0999C232.6 17.1499 231.78 16.6699 230.53 16.6699C229.93 16.6699 229.43 16.7999 229.02 17.0499C228.61 17.2999 228.4 17.6299 228.4 18.0499C228.4 18.6699 228.88 19.0899 229.83 19.3099L231.96 19.8099C232.98 20.0499 233.72 20.4599 234.21 21.0299C234.479 21.3406 234.682 21.7032 234.805 22.0954C234.928 22.4876 234.97 22.9009 234.927 23.3098C234.884 23.7186 234.757 24.1142 234.554 24.4721C234.352 24.8299 234.078 25.1423 233.75 25.3899C232.95 26.0299 231.94 26.3499 230.69 26.3499Z"/>
+    <mask id="mask0_636_18464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="33" height="32">
+    <path d="M18.5 34C27.337 34 34.5 26.837 34.5 18C34.5 9.163 27.337 2 18.5 2C9.663 2 2.5 9.163 2.5 18C2.5 26.837 9.663 34 18.5 34Z" fill="#C4C4C4"/>
+    </mask>
+    <g mask="url(#mask0_636_18464)">
+    <path d="M2.5 2V21.636H12.202L18.5 10.727H34.5V2H2.5Z" fill="#DB4437"/>
+    <path d="M2.5 34.0001H17.73L24.8 26.9301V21.6361H12.202L2.5 4.99609V34.0001Z" fill="#0F9D58"/>
+    <path d="M2.5 34.0001H17.73L24.8 26.9301V21.6361H12.202L2.5 4.99609V34.0001Z" fill="url(#paint0_linear_636_18464)"/>
+    <path d="M18.5 10.7266L24.8 21.6366L17.73 33.9996H34.5V10.7266H18.5Z" fill="#FFCD40"/>
+    <path d="M18.5 10.7266L24.8 21.6366L17.73 33.9996H34.5V10.7266H18.5Z" fill="url(#paint1_linear_636_18464)"/>
+    <path d="M12.3741 21.5733L5.1331 9.15332L5.0271 9.33532L12.2171 21.6623L12.3741 21.5723V21.5733Z" fill="#3E2723" fill-opacity="0.15"/>
+    <path d="M24.653 21.878L24.502 21.791L17.522 34H17.731L24.658 21.884L24.653 21.878Z" fill="#263238" fill-opacity="0.15"/>
+    <path d="M5.04004 9.35352L15.449 19.7615L12.202 21.6355L5.04004 9.35352Z" fill="url(#paint2_radial_636_18464)"/>
+    <path d="M17.7419 33.9797L21.5519 19.7617L24.7999 21.6357L17.7419 33.9797Z" fill="url(#paint3_radial_636_18464)"/>
+    <path d="M18.5 10.7266V14.5366L32.755 10.7266H18.5Z" fill="url(#paint4_radial_636_18464)"/>
+    <path d="M18.5001 25.2726C20.429 25.2726 22.2789 24.5063 23.6428 23.1424C25.0068 21.7784 25.7731 19.9285 25.7731 17.9996C25.7731 16.0706 25.0068 14.2207 23.6428 12.8568C22.2789 11.4928 20.429 10.7266 18.5001 10.7266C16.5711 10.7266 14.7212 11.4928 13.3573 12.8568C11.9933 14.2207 11.2271 16.0706 11.2271 17.9996C11.2271 19.9285 11.9933 21.7784 13.3573 23.1424C14.7212 24.5063 16.5711 25.2726 18.5001 25.2726V25.2726Z" fill="#F1F1F1"/>
+    <path d="M18.4999 23.8176C20.0429 23.8176 21.5227 23.2047 22.6138 22.1136C23.7049 21.0225 24.3179 19.5427 24.3179 17.9996C24.3179 16.4566 23.7049 14.9768 22.6138 13.8857C21.5227 12.7946 20.0429 12.1816 18.4999 12.1816C16.9569 12.1816 15.477 12.7946 14.3859 13.8857C13.2949 14.9768 12.6819 16.4566 12.6819 17.9996C12.6819 19.5427 13.2949 21.0225 14.3859 22.1136C15.477 23.2047 16.9569 23.8176 18.4999 23.8176V23.8176Z" fill="#4285F4"/>
+    <path d="M18.5001 10.5459C16.5713 10.5459 14.7215 11.312 13.3576 12.6758C11.9937 14.0395 11.2273 15.8892 11.2271 17.8179V17.9999C11.2271 16.071 11.9933 14.2211 13.3573 12.8571C14.7212 11.4932 16.5711 10.7269 18.5001 10.7269H34.5V10.5459H18.5001V10.5459Z" fill="#3E2723" fill-opacity="0.2"/>
+    <path d="M24.79 21.6361C24.153 22.741 23.2364 23.6588 22.1322 24.2973C21.0281 24.9357 19.7754 25.2722 18.5 25.2731C17.2241 25.2728 15.9707 24.9365 14.866 24.298C13.7614 23.6596 12.8443 22.7415 12.207 21.6361H12.2L2.5 4.99609V5.17809L12.202 21.8181H12.209C12.8464 22.9233 13.7635 23.8412 14.8682 24.4795C15.9729 25.1177 17.2262 25.4539 18.502 25.4541C19.7774 25.4537 21.0302 25.1175 22.1344 24.4792C23.2386 23.841 24.1552 22.9231 24.792 21.8181H24.802V21.6361H24.791H24.79Z" fill="white" fill-opacity="0.1"/>
+    <path opacity="0.1" d="M18.6821 10.7266C18.6511 10.7266 18.6221 10.7306 18.5911 10.7326C20.5034 10.7557 22.3296 11.5315 23.6739 12.8917C25.0182 14.2519 25.7724 16.0871 25.7731 17.9996C25.7724 19.912 25.0182 21.7472 23.6739 23.1074C22.3296 24.4677 20.5034 25.2434 18.5911 25.2666C18.6211 25.2666 18.6511 25.2726 18.6811 25.2726C20.61 25.2726 22.4599 24.5063 23.8239 23.1424C25.1878 21.7784 25.9541 19.9285 25.9541 17.9996C25.9541 16.0706 25.1878 14.2207 23.8239 12.8568C22.4599 11.4928 20.61 10.7266 18.6811 10.7266H18.6821Z" fill="#3E2723"/>
+    <path d="M24.864 21.8778C25.3698 21.0043 25.6876 20.0348 25.7971 19.0314C25.9066 18.028 25.8054 17.0128 25.5 16.0508C25.673 16.6728 25.773 17.3258 25.773 18.0008C25.773 19.3258 25.415 20.5608 24.796 21.6308L24.8 21.6378L17.73 34.0018H17.942L24.867 21.8848L24.864 21.8778V21.8778Z" fill="white" fill-opacity="0.2"/>
+    <path d="M18.5 2.182C27.305 2.182 34.45 9.296 34.498 18.091L34.5 18C34.5 9.164 27.336 2 18.5 2C9.664 2 2.5 9.164 2.5 18L2.502 18.09C2.55 9.297 9.694 2.183 18.5 2.183V2.182Z" fill="white" fill-opacity="0.2"/>
+    <path d="M18.5 33.8182C27.305 33.8182 34.45 26.7042 34.498 17.9092L34.5 18.0002C34.5 26.8362 27.336 34.0002 18.5 34.0002C9.664 34.0002 2.5 26.8362 2.5 18.0002L2.502 17.9102C2.55 26.7032 9.694 33.8172 18.5 33.8172V33.8182Z" fill="#3E2723" fill-opacity="0.15"/>
+    <path d="M18.5 34C27.337 34 34.5 26.837 34.5 18C34.5 9.163 27.337 2 18.5 2C9.663 2 2.5 9.163 2.5 18C2.5 26.837 9.663 34 18.5 34Z" fill="url(#paint5_radial_636_18464)"/>
+    </g>
+    <defs>
+    <linearGradient id="paint0_linear_636_18464" x1="21.204" y1="30.4541" x2="10.598" y2="24.2421" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#055524" stop-opacity="0.4"/>
+    <stop offset="0.33" stop-color="#055524" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_636_18464" x1="23.201" y1="9.60056" x2="25.872" y2="21.2956" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#EA6100" stop-opacity="0.3"/>
+    <stop offset="0.66" stop-color="#EA6100" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="paint2_radial_636_18464" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.02304 9.36652) scale(14.1898)">
+    <stop stop-color="#3E2723" stop-opacity="0.2"/>
+    <stop offset="1" stop-color="#3E2723" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint3_radial_636_18464" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.4719 18.0247) scale(15.9764 15.9764)">
+    <stop stop-color="#263238" stop-opacity="0.2"/>
+    <stop offset="1" stop-color="#263238" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint4_radial_636_18464" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.805 10.7176) scale(15.2869 15.2869)">
+    <stop stop-color="#3E2723" stop-opacity="0.2"/>
+    <stop offset="1" stop-color="#3E2723" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint5_radial_636_18464" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.28 6.366) scale(32.1356)">
+    <stop stop-color="white" stop-opacity="0.1"/>
+    <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+    </defs>
+</svg>
diff --git a/src/site/_includes/icons/close.svg b/src/site/_includes/icons/close.svg
new file mode 100644
index 00000000000..daebefb3170
--- /dev/null
+++ b/src/site/_includes/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/code.svg b/src/site/_includes/icons/code.svg
new file mode 100644
index 00000000000..e6feeb1d13d
--- /dev/null
+++ b/src/site/_includes/icons/code.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewbox="0 0 24 24" fill="currentColor" role="img" aria-label="Code brackets" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.41 16.59L8 18l-6-6 6-6 1.41 1.41L4.83 12l4.58 4.59zm5.18-9.18L16 6l6 6-6 6-1.41-1.41L19.17 12l-4.58-4.59z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/dcc.svg b/src/site/_includes/icons/dcc.svg
new file mode 100644
index 00000000000..d5225091411
--- /dev/null
+++ b/src/site/_includes/icons/dcc.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 0.000165745C6.69712 0.000165745 3.77264 1.5969 1.95256 4.06066L5.04121 9.41048C5.18484 8.20659 5.76075 7.09589 6.6622 6.28501C7.56364 5.47413 8.72896 5.01854 9.9413 5.00271C9.96079 5.00056 9.98058 4.99964 10.0004 4.99979H18.6616C16.934 2.01029 13.7059 0.000165745 10.0001 0.000165745ZM1.33892 4.99917C0.488748 6.47004 0 8.17681 0 10.0001C0 15.1508 3.88048 19.3826 8.88123 19.9373L11.9651 14.5961C11.3441 14.862 10.6758 14.9997 10.0001 15.0001C8.2424 14.9978 6.61497 14.0728 5.71369 12.5637C5.69742 12.5437 5.68269 12.5224 5.6698 12.5001L1.33892 4.99917ZM10.0001 6.00015C8.93929 6.00015 7.92188 6.42168 7.17176 7.17179C6.42165 7.9219 6.00028 8.93929 6.00028 10.0001C6.00028 11.061 6.42169 12.0784 7.17176 12.8285C7.92184 13.5786 8.93929 14 10.0001 14C11.061 14 12.0784 13.5786 12.8285 12.8285C13.5786 12.0784 14 11.061 14 10.0001C14 8.93929 13.5786 7.9219 12.8285 7.17179C12.0785 6.42168 11.061 6.00015 10.0001 6.00015ZM12.9918 6.00015C14.254 6.94268 14.9981 8.42494 15.0001 10.0001C14.9981 10.8483 14.7804 11.682 14.3674 12.4229C14.3574 12.4496 14.3452 12.4754 14.3307 12.5001L10.0007 20C15.5293 19.9997 20 15.5286 20 10C20 8.57684 19.7023 7.22474 19.1679 6.00003L12.9918 6.00015Z" />
+</svg>
diff --git a/src/site/_includes/icons/done.svg b/src/site/_includes/icons/done.svg
new file mode 100644
index 00000000000..1a384ddc617
--- /dev/null
+++ b/src/site/_includes/icons/done.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" fill="currentColor" role="img" aria-label="Check">
+  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/download.svg b/src/site/_includes/icons/download.svg
new file mode 100644
index 00000000000..263fc27ec46
--- /dev/null
+++ b/src/site/_includes/icons/download.svg
@@ -0,0 +1,3 @@
+<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/edit.svg b/src/site/_includes/icons/edit.svg
new file mode 100644
index 00000000000..c087e92da85
--- /dev/null
+++ b/src/site/_includes/icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.25 29.5001V37.0001H7.75L29.87 14.8801L22.37 7.38012L0.25 29.5001ZM35.67 9.08012C36.45 8.30012 36.45 7.04012 35.67 6.26012L30.99 1.58012C30.21 0.800117 28.95 0.800117 28.17 1.58012L24.51 5.24012L32.01 12.7401L35.67 9.08012V9.08012Z" fill="#585B63"/>
+</svg>
diff --git a/src/site/_includes/icons/error.svg b/src/site/_includes/icons/error.svg
new file mode 100644
index 00000000000..2bbf8067bf1
--- /dev/null
+++ b/src/site/_includes/icons/error.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Error sign">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/event.svg b/src/site/_includes/icons/event.svg
new file mode 100644
index 00000000000..d0c6dfea270
--- /dev/null
+++ b/src/site/_includes/icons/event.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 2H15V0H13V2H5V0H3V2H2C0.89 2 0.00999999 2.9 0.00999999 4L0 18C0 19.1 0.89 20 2 20H16C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2ZM16 18H2V8H16V18ZM16 6H2V4H16V6ZM6 12H4V10H6V12ZM10 12H8V10H10V12ZM14 12H12V10H14V12ZM6 16H4V14H6V16ZM10 16H8V14H10V16ZM14 16H12V14H14V16Z" />
+</svg>
diff --git a/src/site/_includes/icons/featured.svg b/src/site/_includes/icons/featured.svg
new file mode 100644
index 00000000000..cb081ca4997
--- /dev/null
+++ b/src/site/_includes/icons/featured.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 15.27L16.18 19L14.54 11.97L20 7.24L12.81 6.63L10 0L7.19 6.63L0 7.24L5.46 11.97L3.82 19L10 15.27Z" />
+</svg>
diff --git a/src/site/_includes/icons/github.svg b/src/site/_includes/icons/github.svg
new file mode 100644
index 00000000000..934c111cc04
--- /dev/null
+++ b/src/site/_includes/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1779 0C4.54977 0 0 4.58331 0 10.2535C0 14.786 2.9152 18.6226 6.95935 19.9805C7.46497 20.0826 7.65018 19.7599 7.65018 19.4885C7.65018 19.2508 7.63351 18.436 7.63351 17.587C4.80227 18.1983 4.21269 16.3647 4.21269 16.3647C3.75769 15.1764 3.08353 14.871 3.08353 14.871C2.15687 14.2429 3.15103 14.2429 3.15103 14.2429C4.17894 14.3108 4.71831 15.2954 4.71831 15.2954C5.6281 16.857 7.09414 16.4158 7.68393 16.1441C7.76809 15.482 8.03788 15.0237 8.32434 14.7691C6.06623 14.5314 3.6904 13.6487 3.6904 9.71017C3.6904 8.58976 4.09457 7.67309 4.73498 6.96018C4.63394 6.7056 4.27998 5.65289 4.83623 4.24394C4.83623 4.24394 5.6956 3.97228 7.6333 5.29644C8.4629 5.07199 9.31845 4.95782 10.1779 4.95685C11.0372 4.95685 11.9133 5.07581 12.7222 5.29644C14.6601 3.97228 15.5195 4.24394 15.5195 4.24394C16.0758 5.65289 15.7216 6.7056 15.6206 6.96018C16.2778 7.67309 16.6653 8.58976 16.6653 9.71017C16.6653 13.6487 14.2895 14.5143 12.0145 14.7691C12.3854 15.0916 12.7054 15.7026 12.7054 16.6703C12.7054 18.0453 12.6887 19.1489 12.6887 19.4883C12.6887 19.7599 12.8741 20.0826 13.3795 19.9808C17.4237 18.6224 20.3389 14.786 20.3389 10.2535C20.3555 4.58331 15.7891 0 10.1779 0Z" />
+</svg>
diff --git a/src/site/_includes/icons/glitch.svg b/src/site/_includes/icons/glitch.svg
new file mode 100644
index 00000000000..609014c2c58
--- /dev/null
+++ b/src/site/_includes/icons/glitch.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9684 18.1769L10.9716 18.1843L10.9642 18.1839L10.9684 18.1769ZM10.9716 18.1843C11.1189 18.5178 11.1827 18.8823 11.1575 19.2461C10.9165 19.3047 10.6691 19.3326 10.4211 19.3294C9.74093 19.4503 9.04286 19.4256 8.37295 19.2569C7.0258 18.9713 6.40323 17.5335 6.40323 17.5335C6.40323 17.5335 6.41607 17.5207 6.4421 17.4988C6.40057 17.4861 6.3568 17.4823 6.3137 17.4877C5.65974 17.6145 4.99327 17.6649 4.32767 17.638C3.66485 17.638 1.04307 16.642 0.198067 15.5749C0.198067 15.5749 1.50982 15.2546 1.50982 14.9836C1.50982 14.7126 0.0110196 14.2122 0.0110196 14.2122C0.0110196 14.2122 -0.215935 12.9629 1.3901 11.716C2.22362 11.0164 3.16768 10.4603 4.18366 10.0704C3.34941 9.95936 0.99102 9.02031 0.197719 8.01844C0.197719 8.01844 1.50948 7.69814 1.50948 7.42711C1.50948 7.15608 0.0110196 6.65671 0.0110196 6.65671C0.0110196 6.65671 -0.215935 5.40742 1.3901 4.16056C2.99614 2.91369 4.19823 2.32132 5.54886 2.25192L7.35235 2.18251C7.35235 2.18251 8.52807 0.595215 9.14578 0.595215C9.4581 0.595215 13.9788 1.55648 14.3706 2.18286C14.5414 2.50792 14.8174 2.76545 15.1535 2.91335C15.2627 2.99511 15.2749 2.99667 15.4107 3.01401C15.5238 3.02846 15.7229 3.05388 16.1356 3.14585C17.2846 3.40229 17.7728 3.58005 18.1929 3.73304C18.6029 3.88232 18.9481 4.00802 19.7793 4.16021C20.1538 4.22875 21.2644 3.79694 22.2394 3.41782C23.0415 3.10592 23.7519 2.82968 23.8854 2.89704C24.0228 2.96644 24.1307 4.28514 23.5938 5.15617C23.3219 5.59742 23.4361 5.99788 23.5585 6.4272C23.6777 6.84538 23.8048 7.29095 23.5904 7.82827C23.324 8.49591 23.5714 9.05528 23.7562 9.47287C23.8727 9.73641 23.9643 9.94349 23.886 10.0857C23.777 10.2837 22.762 9.919 21.7581 9.55825C20.8992 9.24959 20.0484 8.94385 19.78 8.99601C19.6288 9.02555 19.3966 9.10518 19.0725 9.21636C18.281 9.48784 16.941 9.94745 14.8918 10.3251C14.9809 10.3698 15.0675 10.4191 15.1514 10.473C15.2606 10.5547 15.2727 10.5563 15.4085 10.5736C15.5217 10.5881 15.7207 10.6135 16.1335 10.7055C17.2825 10.9619 17.7707 11.1397 18.1908 11.2926C18.6008 11.4419 18.946 11.5676 19.7773 11.7198C20.1518 11.7884 21.2623 11.3565 22.2373 10.9774C23.0394 10.6655 23.7498 10.3893 23.8833 10.4566C24.0207 10.5261 24.1286 11.8447 23.5918 12.7158C23.3198 13.157 23.434 13.5575 23.5564 13.9868C23.6756 14.405 23.8027 14.8506 23.5883 15.3879C23.3219 16.0555 23.5694 16.6149 23.7541 17.0325C23.8706 17.296 23.9622 17.5031 23.884 17.6453C23.7749 17.8433 22.76 17.4786 21.7561 17.1179C20.8971 16.8092 20.0463 16.5035 19.778 16.5556C19.6265 16.5851 19.3941 16.665 19.0696 16.7766C18.1471 17.0937 16.4804 17.6668 13.8147 18.0634C12.8732 18.1962 11.921 18.2367 10.9716 18.1843ZM7.21958 11.8527L7.24387 11.8944L7.31328 12.0203L7.52635 12.4611C7.6376 12.7099 7.72352 12.9692 7.7828 13.2353C7.81094 13.364 7.82594 13.4953 7.82757 13.6271C7.81877 13.9935 7.75032 14.356 7.6249 14.7004L7.48366 15.0613L7.43786 15.1606L7.42259 15.1953C7.39167 15.2544 7.38371 15.3229 7.40024 15.3875C7.41677 15.4521 7.45662 15.5084 7.51212 15.5454C7.53919 15.5618 7.56941 15.5722 7.60079 15.5761C7.63218 15.58 7.66403 15.5773 7.69428 15.568C7.72453 15.5588 7.7525 15.5433 7.77636 15.5225C7.80022 15.5018 7.81944 15.4762 7.83277 15.4476L7.90773 15.2879L8.06597 14.8836C8.21182 14.4812 8.29049 14.0575 8.29883 13.6295C8.29738 13.4588 8.27843 13.2886 8.24226 13.1218C8.17557 12.8192 8.07837 12.5241 7.95215 12.241L7.71964 11.7615L7.61137 11.5692C7.59603 11.5416 7.57501 11.5176 7.5497 11.4987C7.5244 11.4798 7.49538 11.4665 7.46456 11.4597C7.43374 11.4528 7.40182 11.4526 7.3709 11.4589C7.33998 11.4653 7.31076 11.4782 7.28517 11.4967C7.2322 11.5375 7.19612 11.5964 7.18383 11.6622C7.17154 11.7279 7.1839 11.7959 7.21854 11.8531L7.21958 11.8527ZM7.24343 4.25113L7.21914 4.20879L7.21879 4.21226C7.18402 4.15506 7.17155 4.08704 7.18378 4.02123C7.19601 3.95541 7.23207 3.89641 7.28507 3.85552C7.31066 3.83703 7.33988 3.82417 7.3708 3.81779C7.40173 3.81141 7.43365 3.81165 7.46447 3.81851C7.49529 3.82536 7.52431 3.83866 7.54961 3.85754C7.57491 3.87643 7.59593 3.90045 7.61128 3.92805L7.71955 4.1203L7.95206 4.59989C8.07828 4.88291 8.17548 5.17801 8.24217 5.48064C8.27808 5.64683 8.29692 5.81624 8.29839 5.98626C8.29005 6.41425 8.21139 6.83795 8.06553 7.24041L7.90729 7.64469L7.83233 7.80432C7.819 7.833 7.79978 7.85855 7.77592 7.87931C7.75206 7.90007 7.72409 7.91557 7.69384 7.9248C7.66359 7.93403 7.63174 7.93679 7.60035 7.93289C7.56897 7.929 7.53875 7.91853 7.51168 7.90219C7.45618 7.86516 7.41633 7.80891 7.3998 7.74427C7.38327 7.67963 7.39123 7.61116 7.42215 7.55204L7.43742 7.51733L7.48322 7.41809L7.62446 7.05718C7.74988 6.71278 7.81833 6.35025 7.82713 5.98383C7.8255 5.85205 7.8105 5.72078 7.78236 5.59204C7.72308 5.32601 7.63716 5.06663 7.52591 4.81782L7.31284 4.3771L7.24343 4.25113ZM9.30864 4.11439L10.5121 4.17859L10.8959 4.20045L11.7552 4.25389C12.8022 4.34609 13.8434 4.49624 14.8739 4.70364C16.5028 5.05492 18.0843 5.59834 19.5851 6.32251L20.2604 6.62304C20.2926 6.63625 20.3273 6.64252 20.3621 6.64145C20.3969 6.64039 20.4311 6.632 20.4625 6.61685C20.4938 6.60169 20.5217 6.5801 20.5441 6.55349C20.5666 6.52687 20.5832 6.49582 20.5929 6.46237C20.619 6.39354 20.6188 6.3175 20.5924 6.2488C20.5659 6.1801 20.5151 6.12356 20.4496 6.09001L19.7732 5.78914C18.241 5.05043 16.6264 4.4964 14.9634 4.13868C13.9137 3.92742 12.8531 3.77473 11.7864 3.6813L10.9223 3.62751L10.5371 3.60565L9.33189 3.54145L8.78359 3.51369C8.73559 3.51605 8.68896 3.53048 8.64803 3.55565C8.60709 3.58081 8.57316 3.6159 8.54939 3.65767C8.52562 3.69943 8.51277 3.74652 8.51204 3.79457C8.5113 3.84262 8.5227 3.89007 8.54518 3.93255L8.566 3.98009L8.62569 4.12064L8.80892 4.6089C8.89742 4.86534 8.96746 5.12779 9.01852 5.39422L9.05323 5.659C9.05866 6.06308 9.00821 6.46597 8.90331 6.85624L8.75687 7.44688L8.54518 8.17806L8.47577 8.39808L8.45634 8.45707L8.4494 8.47685C8.4244 8.54601 8.42584 8.62196 8.45345 8.69012C8.48106 8.75828 8.53288 8.81383 8.59897 8.84609C8.63151 8.85861 8.66633 8.86416 8.70115 8.86237C8.73598 8.86057 8.77004 8.85148 8.80112 8.83567C8.83221 8.81987 8.85962 8.79771 8.88159 8.77063C8.90356 8.74355 8.91959 8.71215 8.92864 8.67847L8.93628 8.65592L8.9571 8.59345L9.02928 8.3658L9.24791 7.61171L9.4006 6.9954C9.52332 6.53883 9.57793 6.06664 9.56266 5.59411C9.55248 5.49231 9.53744 5.38705 9.51755 5.27831C9.46106 4.98197 9.38336 4.69006 9.28504 4.40485L9.17815 4.10641L9.30864 4.11439ZM10.5118 11.8222L9.30829 11.758L9.17815 11.7507L9.28504 12.0491C9.38335 12.3344 9.46106 12.6263 9.51754 12.9226C9.53744 13.0309 9.55248 13.1359 9.56266 13.2377C9.57793 13.7102 9.52332 14.1824 9.4006 14.639L9.24791 15.2553L9.02928 16.0094L8.9571 16.2371L8.93628 16.2995L8.92864 16.3221C8.91959 16.3557 8.90356 16.3871 8.88159 16.4142C8.85962 16.4413 8.83221 16.4635 8.80112 16.4793C8.77004 16.4951 8.73598 16.5042 8.70115 16.506C8.66633 16.5078 8.63151 16.5022 8.59897 16.4897C8.53288 16.4574 8.48106 16.4019 8.45345 16.3337C8.42584 16.2656 8.4244 16.1896 8.4494 16.1205L8.45634 16.1007L8.47577 16.0417L8.54518 15.8217L8.75686 15.0905L8.90331 14.4998C9.00821 14.1096 9.05865 13.7067 9.05322 13.3026L9.01852 13.0378C8.96746 12.7714 8.89742 12.5089 8.80892 12.2525L8.62569 11.7642L8.566 11.6237L8.54518 11.5761C8.5227 11.5337 8.5113 11.4862 8.51204 11.4382C8.51277 11.3901 8.52562 11.343 8.54939 11.3013C8.57316 11.2595 8.60709 11.2244 8.64803 11.1992C8.68896 11.1741 8.73559 11.1596 8.78359 11.1573L9.33189 11.185L10.5371 11.2492L10.9223 11.2711L11.7864 11.3249C12.8531 11.4183 13.9137 11.571 14.9634 11.7823C16.6264 12.14 18.241 12.694 19.7732 13.4327L20.4492 13.7336C20.5147 13.7672 20.5656 13.8237 20.592 13.8924C20.6185 13.9611 20.6186 14.0371 20.5925 14.106C20.5829 14.1394 20.5662 14.1705 20.5438 14.1971C20.5213 14.2237 20.4935 14.2453 20.4621 14.2604C20.4308 14.2756 20.3966 14.284 20.3618 14.2851C20.327 14.2861 20.2923 14.2798 20.2601 14.2666L19.5848 13.9661C18.084 13.2419 16.5025 12.6985 14.8735 12.3472C13.8431 12.1398 12.8019 11.9897 11.7548 11.8975L10.8956 11.8441L10.5118 11.8222ZM3.05566 5.42375V5.41091C3.06214 5.19043 3.13345 4.97675 3.26067 4.79657C3.38789 4.61638 3.56539 4.47768 3.77098 4.39779C3.97658 4.3179 4.20115 4.30037 4.41666 4.34738C4.63216 4.39439 4.82903 4.50387 4.98268 4.66212C5.13632 4.82038 5.23993 5.0204 5.28055 5.2372C5.32117 5.454 5.297 5.67796 5.21107 5.8811C5.12514 6.08425 4.98125 6.25756 4.79738 6.3794C4.61352 6.50124 4.39782 6.5662 4.17725 6.56616C3.90333 6.58533 3.633 6.49496 3.42568 6.31491C3.21836 6.13485 3.09101 5.87985 3.07163 5.60594C3.09644 5.81074 3.19766 5.99862 3.35504 6.132C3.51242 6.26538 3.71435 6.33443 3.92045 6.32532C4.09721 6.33054 4.27152 6.28304 4.42119 6.18886C4.57085 6.09469 4.68911 5.9581 4.76088 5.79649C4.83266 5.63488 4.85472 5.45556 4.82424 5.28138C4.79377 5.10719 4.71214 4.94601 4.58976 4.81837C4.46738 4.69073 4.30977 4.6024 4.13702 4.56464C3.96427 4.52687 3.78419 4.54137 3.6197 4.60629C3.45522 4.67121 3.31378 4.78362 3.2134 4.92919C3.11301 5.07477 3.05788 5.24693 3.05566 5.42375ZM3.05566 13.0215V13.034C3.05795 12.8572 3.11279 12.6851 3.21322 12.5396C3.31364 12.394 3.4551 12.2817 3.61959 12.2168C3.78408 12.1519 3.96415 12.1375 4.13688 12.1753C4.30961 12.2131 4.46718 12.3015 4.58953 12.4291C4.71188 12.5568 4.79347 12.7179 4.82391 12.8921C4.85436 13.0663 4.83229 13.2456 4.7605 13.4072C4.68871 13.5688 4.57046 13.7053 4.4208 13.7995C4.27114 13.8937 4.09685 13.9412 3.92011 13.9359C3.71401 13.945 3.51207 13.876 3.35469 13.7426C3.19731 13.6092 3.09609 13.4214 3.07128 13.2166C3.09066 13.4905 3.21806 13.7456 3.42545 13.9257C3.63285 14.1057 3.90327 14.196 4.17725 14.1768C4.39782 14.1768 4.61352 14.1119 4.79738 13.99C4.98125 13.8682 5.12514 13.6949 5.21107 13.4917C5.297 13.2886 5.32117 13.0646 5.28055 12.8478C5.23993 12.631 5.13632 12.431 4.98268 12.2727C4.82903 12.1145 4.63216 12.005 4.41666 11.958C4.20115 11.911 3.97658 11.9285 3.77098 12.0084C3.56539 12.0883 3.38789 12.227 3.26067 12.4072C3.13345 12.5874 3.06214 12.8011 3.05566 13.0215ZM3.50421 6.03104C3.66214 6.03104 3.79016 5.90301 3.79016 5.74509C3.79016 5.58716 3.66214 5.45914 3.50421 5.45914C3.34629 5.45914 3.21826 5.58716 3.21826 5.74509C3.21826 5.90301 3.34629 6.03104 3.50421 6.03104ZM3.79016 13.356C3.79016 13.514 3.66214 13.642 3.50421 13.642C3.34629 13.642 3.21826 13.514 3.21826 13.356C3.21826 13.1981 3.34629 13.0701 3.50421 13.0701C3.66214 13.0701 3.79016 13.1981 3.79016 13.356Z" />
+</svg>
diff --git a/src/site/_includes/icons/highlighter.svg b/src/site/_includes/icons/highlighter.svg
new file mode 100644
index 00000000000..0596909d047
--- /dev/null
+++ b/src/site/_includes/icons/highlighter.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" role="img" aria-label="Highlighter pen" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.22 9.49l-5.91 6c-.77.8-.7 2.05.08 2.85L.77 22h5.68l.74-.75c.78.81 1.95.86 2.73.05l5.96-6.05-5.66-5.76zm12.46-4l-2.82-2.87c-.78-.8-2.07-.84-2.84-.04l-5.75 5.85 5.66 5.75 5.69-5.78c.77-.81.83-2.11.06-2.91z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/language.svg b/src/site/_includes/icons/language.svg
new file mode 100644
index 00000000000..34ae382f49d
--- /dev/null
+++ b/src/site/_includes/icons/language.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C8.63333 20 7.34167 19.7373 6.125 19.212C4.90833 18.6873 3.846 17.9707 2.938 17.062C2.02933 16.154 1.31267 15.0917 0.788 13.875C0.262667 12.6583 0 11.3667 0 10C0 8.61667 0.262667 7.321 0.788 6.113C1.31267 4.90433 2.02933 3.846 2.938 2.938C3.846 2.02933 4.90833 1.31233 6.125 0.787C7.34167 0.262333 8.63333 0 10 0C11.3833 0 12.679 0.262333 13.887 0.787C15.0957 1.31233 16.154 2.02933 17.062 2.938C17.9707 3.846 18.6873 4.90433 19.212 6.113C19.7373 7.321 20 8.61667 20 10C20 11.3667 19.7373 12.6583 19.212 13.875C18.6873 15.0917 17.9707 16.154 17.062 17.062C16.154 17.9707 15.0957 18.6873 13.887 19.212C12.679 19.7373 11.3833 20 10 20ZM10 17.95C10.4333 17.35 10.8083 16.725 11.125 16.075C11.4417 15.425 11.7 14.7333 11.9 14H8.1C8.3 14.7333 8.55833 15.425 8.875 16.075C9.19167 16.725 9.56667 17.35 10 17.95ZM7.4 17.55C7.1 17 6.83767 16.429 6.613 15.837C6.38767 15.2457 6.2 14.6333 6.05 14H3.1C3.58333 14.8333 4.18733 15.5583 4.912 16.175C5.63733 16.7917 6.46667 17.25 7.4 17.55ZM12.6 17.55C13.5333 17.25 14.3623 16.7917 15.087 16.175C15.8123 15.5583 16.4167 14.8333 16.9 14H13.95C13.8 14.6333 13.6127 15.2457 13.388 15.837C13.1627 16.429 12.9 17 12.6 17.55ZM2.25 12H5.65C5.6 11.6667 5.56233 11.3373 5.537 11.012C5.51233 10.6873 5.5 10.35 5.5 10C5.5 9.65 5.51233 9.31267 5.537 8.988C5.56233 8.66267 5.6 8.33333 5.65 8H2.25C2.16667 8.33333 2.104 8.66267 2.062 8.988C2.02067 9.31267 2 9.65 2 10C2 10.35 2.02067 10.6873 2.062 11.012C2.104 11.3373 2.16667 11.6667 2.25 12ZM7.65 12H12.35C12.4 11.6667 12.4377 11.3373 12.463 11.012C12.4877 10.6873 12.5 10.35 12.5 10C12.5 9.65 12.4877 9.31267 12.463 8.988C12.4377 8.66267 12.4 8.33333 12.35 8H7.65C7.6 8.33333 7.56267 8.66267 7.538 8.988C7.51267 9.31267 7.5 9.65 7.5 10C7.5 10.35 7.51267 10.6873 7.538 11.012C7.56267 11.3373 7.6 11.6667 7.65 12ZM14.35 12H17.75C17.8333 11.6667 17.896 11.3373 17.938 11.012C17.9793 10.6873 18 10.35 18 10C18 9.65 17.9793 9.31267 17.938 8.988C17.896 8.66267 17.8333 8.33333 17.75 8H14.35C14.4 8.33333 14.4373 8.66267 14.462 8.988C14.4873 9.31267 14.5 9.65 14.5 10C14.5 10.35 14.4873 10.6873 14.462 11.012C14.4373 11.3373 14.4 11.6667 14.35 12ZM13.95 6H16.9C16.4167 5.16667 15.8123 4.44167 15.087 3.825C14.3623 3.20833 13.5333 2.75 12.6 2.45C12.9 3 13.1627 3.57067 13.388 4.162C13.6127 4.754 13.8 5.36667 13.95 6ZM8.1 6H11.9C11.7 5.26667 11.4417 4.575 11.125 3.925C10.8083 3.275 10.4333 2.65 10 2.05C9.56667 2.65 9.19167 3.275 8.875 3.925C8.55833 4.575 8.3 5.26667 8.1 6ZM3.1 6H6.05C6.2 5.36667 6.38767 4.754 6.613 4.162C6.83767 3.57067 7.1 3 7.4 2.45C6.46667 2.75 5.63733 3.20833 4.912 3.825C4.18733 4.44167 3.58333 5.16667 3.1 6Z" />
+</svg>
diff --git a/src/site/_includes/icons/latest.svg b/src/site/_includes/icons/latest.svg
new file mode 100644
index 00000000000..613905b665d
--- /dev/null
+++ b/src/site/_includes/icons/latest.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 11V13H22V11H18ZM16 17.61C16.96 18.32 18.21 19.26 19.2 20C19.6 19.47 20 18.93 20.4 18.4C19.41 17.66 18.16 16.72 17.2 16C16.8 16.54 16.4 17.08 16 17.61ZM20.4 5.6C20 5.07 19.6 4.53 19.2 4C18.21 4.74 16.96 5.68 16 6.4C16.4 6.93 16.8 7.47 17.2 8C18.16 7.28 19.41 6.35 20.4 5.6ZM4 9C2.9 9 2 9.9 2 11V13C2 14.1 2.9 15 4 15H5V19H7V15H8L13 18V6L8 9H4ZM15.5 12C15.5 10.67 14.92 9.47 14 8.65V15.34C14.92 14.53 15.5 13.33 15.5 12Z" />
+</svg>
diff --git a/src/site/_includes/icons/lightbulb.svg b/src/site/_includes/icons/lightbulb.svg
new file mode 100644
index 00000000000..abb76eefd63
--- /dev/null
+++ b/src/site/_includes/icons/lightbulb.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/linkedin.svg b/src/site/_includes/icons/linkedin.svg
new file mode 100644
index 00000000000..bf211ed3f6c
--- /dev/null
+++ b/src/site/_includes/icons/linkedin.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 1.32353V16.6765C18 17.0275 17.8606 17.3641 17.6123 17.6123C17.3641 17.8606 17.0275 18 16.6765 18H1.32353C0.972508 18 0.635863 17.8606 0.387653 17.6123C0.139443 17.3641 0 17.0275 0 16.6765L0 1.32353C0 0.972508 0.139443 0.635863 0.387653 0.387653C0.635863 0.139443 0.972508 0 1.32353 0L16.6765 0C17.0275 0 17.3641 0.139443 17.6123 0.387653C17.8606 0.635863 18 0.972508 18 1.32353ZM5.29412 6.88235H2.64706V15.3529H5.29412V6.88235ZM5.53235 3.97059C5.53375 3.77036 5.49569 3.57182 5.42035 3.3863C5.34502 3.20078 5.23387 3.03191 5.09328 2.88935C4.95268 2.74678 4.78537 2.6333 4.60091 2.5554C4.41646 2.47749 4.21846 2.43668 4.01824 2.43529H3.97059C3.5634 2.43529 3.17289 2.59705 2.88497 2.88497C2.59705 3.17289 2.43529 3.5634 2.43529 3.97059C2.43529 4.37777 2.59705 4.76828 2.88497 5.05621C3.17289 5.34413 3.5634 5.50588 3.97059 5.50588C4.17083 5.51081 4.37008 5.47623 4.55696 5.40413C4.74383 5.33202 4.91467 5.2238 5.0597 5.08565C5.20474 4.94749 5.32113 4.78212 5.40223 4.59897C5.48333 4.41582 5.52755 4.21848 5.53235 4.01824V3.97059ZM15.3529 10.2071C15.3529 7.66059 13.7329 6.67059 12.1235 6.67059C11.5966 6.6442 11.0719 6.75644 10.6019 6.9961C10.1318 7.23577 9.73285 7.59448 9.44471 8.03647H9.37059V6.88235H6.88235V15.3529H9.52941V10.8476C9.49115 10.3862 9.63649 9.92835 9.93388 9.57347C10.2313 9.2186 10.6567 8.9954 11.1176 8.95235H11.2182C12.06 8.95235 12.6847 9.48177 12.6847 10.8159V15.3529H15.3318L15.3529 10.2071Z" />
+</svg>
diff --git a/src/site/_includes/icons/mastodon.svg b/src/site/_includes/icons/mastodon.svg
new file mode 100644
index 00000000000..6157b466445
--- /dev/null
+++ b/src/site/_includes/icons/mastodon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9683 15.2439C16.4742 14.9446 18.6561 13.4006 18.9304 11.9898C19.3625 9.76737 19.3268 6.56632 19.3268 6.56632C19.3268 2.22771 16.4842 0.955994 16.4842 0.955994C15.051 0.297725 12.5899 0.0209043 10.033 0H9.97018C7.41328 0.0209043 4.95379 0.297725 3.52045 0.955994C3.52045 0.955994 0.677788 2.22771 0.677788 6.56632C0.677788 6.82934 0.676429 7.10599 0.675013 7.39399C0.671083 8.19382 0.666722 9.08121 0.689857 10.0074C0.793085 14.2504 1.46773 18.432 5.39063 19.4703C7.19939 19.9491 8.75234 20.0493 10.003 19.9805C12.2712 19.8548 13.5444 19.1711 13.5444 19.1711L13.4696 17.5254C13.4696 17.5254 11.8488 18.0365 10.0285 17.9742C8.22499 17.9124 6.32109 17.7797 6.0294 15.5655C6.00246 15.371 5.98899 15.163 5.98899 14.9446C5.98899 14.9446 7.75939 15.3774 10.003 15.4802C11.375 15.5431 12.6616 15.3998 13.9683 15.2439ZM15.9738 12.1562V6.90289C15.9738 5.82923 15.7004 4.97603 15.1514 4.34481C14.5851 3.71359 13.8435 3.39 12.9231 3.39C11.8579 3.39 11.0514 3.79936 10.5182 4.61818L9.9997 5.48722L9.4813 4.61818C8.94802 3.79936 8.14148 3.39 7.07644 3.39C6.1559 3.39 5.41433 3.71359 4.84809 4.34481C4.29897 4.97603 4.0256 5.82923 4.0256 6.90289V12.1562H6.10687V7.0573C6.10687 5.98245 6.55911 5.4369 7.46371 5.4369C8.46388 5.4369 8.96526 6.08407 8.96526 7.36375V10.1547H11.0342V7.36375C11.0342 6.08407 11.5355 5.4369 12.5357 5.4369C13.4403 5.4369 13.8925 5.98245 13.8925 7.0573V12.1562H15.9738Z" />
+</svg>
diff --git a/src/site/_includes/icons/menu.svg b/src/site/_includes/icons/menu.svg
new file mode 100644
index 00000000000..b7d94d7e56a
--- /dev/null
+++ b/src/site/_includes/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/mortarboard.svg b/src/site/_includes/icons/mortarboard.svg
new file mode 100644
index 00000000000..500582d91d4
--- /dev/null
+++ b/src/site/_includes/icons/mortarboard.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z" />
+  <path d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z" />
+</svg>
diff --git a/src/site/_includes/icons/news.svg b/src/site/_includes/icons/news.svg
new file mode 100644
index 00000000000..2f853530e99
--- /dev/null
+++ b/src/site/_includes/icons/news.svg
@@ -0,0 +1,7 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 21L14 16L5 7L0 21ZM10.35 15.18L3.3 17.7L5.82 10.65L10.35 15.18Z" />
+<path d="M12.5297 11.5296L18.1197 5.93965C18.6097 5.44965 19.3997 5.44965 19.8897 5.93965L20.4797 6.52965L21.5397 5.46965L20.9497 4.87965C19.8797 3.80965 18.1297 3.80965 17.0597 4.87965L11.4697 10.4696L12.5297 11.5296Z"/>
+<path d="M8.05973 5.87996L7.46973 6.46996L8.52973 7.52996L9.11973 6.93996C10.1897 5.86996 10.1897 4.11996 9.11973 3.04996L8.52973 2.45996L7.46973 3.52996L8.05973 4.11996C8.53973 4.59996 8.53973 5.39996 8.05973 5.87996Z"/>
+<path d="M15.0597 10.8796L13.4697 12.4696L14.5297 13.5296L16.1197 11.9396C16.6097 11.4496 17.3997 11.4496 17.8897 11.9396L19.4997 13.5496L20.5597 12.4896L18.9497 10.8796C17.8697 9.80965 16.1297 9.80965 15.0597 10.8796Z"/>
+<path d="M13.0597 4.87996L9.46973 8.46996L10.5297 9.52996L14.1197 5.93996C15.1897 4.86996 15.1897 3.11996 14.1197 2.04996L12.5297 0.459961L11.4697 1.51996L13.0597 3.10996C13.5397 3.59996 13.5397 4.39996 13.0597 4.87996Z"/>
+</svg>
diff --git a/src/site/_includes/icons/open_in_new.svg b/src/site/_includes/icons/open_in_new.svg
new file mode 100644
index 00000000000..8a2c31a8982
--- /dev/null
+++ b/src/site/_includes/icons/open_in_new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
diff --git a/src/site/_includes/icons/pattern.svg b/src/site/_includes/icons/pattern.svg
new file mode 100644
index 00000000000..3f26f4684b6
--- /dev/null
+++ b/src/site/_includes/icons/pattern.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.9 0.9 0 2 0C3.1 0 4 0.9 4 2C4 3.1 3.1 4 2 4C0.9 4 0 3.1 0 2ZM2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10ZM8 4C9.1 4 10 3.1 10 2C10 0.9 9.1 0 8 0C6.9 0 6 0.9 6 2C6 3.1 6.9 4 8 4ZM14 6C12.9 6 12 6.9 12 8C12 9.1 12.9 10 14 10C15.1 10 16 9.1 16 8C16 6.9 15.1 6 14 6ZM13.98 12C13.24 12 12.61 12.4 12.26 13H9.72C9.38 12.4 8.74 12 8 12C7.26 12 6.63 12.4 6.28 13H4.41L7.48 9.93C7.65 9.97 7.82 10 8 10C9.1 10 10 9.1 10 8C10 7.82 9.97 7.65 9.93 7.49L13.49 3.93C13.65 3.97 13.82 4 14 4C15.1 4 16 3.1 16 2C16 0.9 15.1 0 14 0C12.9 0 12 0.9 12 2C12 2.18 12.03 2.35 12.07 2.51L8.51 6.07C8.35 6.03 8.18 6 8 6C6.9 6 6 6.9 6 8C6 8.18 6.03 8.35 6.07 8.51L2.51 12.07C2.35 12.03 2.18 12 2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C2.74 16 3.37 15.6 3.72 15H6.29C6.63 15.6 7.27 16 8.01 16C8.75 16 9.38 15.6 9.73 15H12.28C12.62 15.6 13.26 16 14 16C15.1 16 16 15.1 16 14C15.98 12.9 15.08 12 13.98 12Z" />
+</svg>
diff --git a/src/site/_includes/icons/plus.svg b/src/site/_includes/icons/plus.svg
new file mode 100644
index 00000000000..d70fddfef77
--- /dev/null
+++ b/src/site/_includes/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" role="img" aria-label="plus" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/icons/podcast.svg b/src/site/_includes/icons/podcast.svg
new file mode 100644
index 00000000000..7cef6363502
--- /dev/null
+++ b/src/site/_includes/icons/podcast.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 10C12 10.74 11.6 11.38 11 11.72V20H9V11.72C8.4 11.37 8 10.74 8 10C8 8.9 8.9 8 10 8C11.1 8 12 8.9 12 10ZM10 4C6.69 4 4 6.69 4 10C4 11.74 4.75 13.31 5.94 14.4L7.36 12.98C6.53 12.25 6 11.19 6 10C6 7.79 7.79 6 10 6C12.21 6 14 7.79 14 10C14 11.19 13.47 12.25 12.64 12.98L14.06 14.4C15.25 13.31 16 11.74 16 10C16 6.69 13.31 4 10 4ZM10 0C4.48 0 0 4.48 0 10C0 12.85 1.2 15.41 3.11 17.24L4.53 15.82C2.98 14.36 2 12.29 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 12.29 17.02 14.36 15.47 15.82L16.89 17.24C18.8 15.41 20 12.85 20 10C20 4.48 15.52 0 10 0Z" />
+</svg>
diff --git a/src/site/_includes/icons/rss.svg b/src/site/_includes/icons/rss.svg
new file mode 100644
index 00000000000..d066ce2e6ca
--- /dev/null
+++ b/src/site/_includes/icons/rss.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 17C1.45 17 0.979167 16.8042 0.5875 16.4125C0.195833 16.0208 0 15.55 0 15C0 14.45 0.195833 13.9792 0.5875 13.5875C0.979167 13.1958 1.45 13 2 13C2.55 13 3.02083 13.1958 3.4125 13.5875C3.80417 13.9792 4 14.45 4 15C4 15.55 3.80417 16.0208 3.4125 16.4125C3.02083 16.8042 2.55 17 2 17ZM14 17C14 15.0667 13.6333 13.2542 12.9 11.5625C12.1667 9.87083 11.1625 8.3875 9.8875 7.1125C8.6125 5.8375 7.12917 4.83333 5.4375 4.1C3.74583 3.36667 1.93333 3 0 3V0C2.35 0 4.55833 0.445833 6.625 1.3375C8.69167 2.22917 10.4917 3.44167 12.025 4.975C13.5583 6.50833 14.7708 8.30833 15.6625 10.375C16.5542 12.4417 17 14.65 17 17H14ZM8 17C8 14.7833 7.22083 12.8958 5.6625 11.3375C4.10417 9.77917 2.21667 9 0 9V6C1.53333 6 2.96667 6.2875 4.3 6.8625C5.63333 7.4375 6.79583 8.22083 7.7875 9.2125C8.77917 10.2042 9.5625 11.3667 10.1375 12.7C10.7125 14.0333 11 15.4667 11 17H8Z" />
+</svg>
diff --git a/src/site/_includes/icons/search.svg b/src/site/_includes/icons/search.svg
new file mode 100644
index 00000000000..6c60269648c
--- /dev/null
+++ b/src/site/_includes/icons/search.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.76 13.27L20.49 19L19 20.49L13.27 14.76C12.2 15.53 10.91 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C13.09 3 16 5.91 16 9.5C16 10.91 15.53 12.2 14.76 13.27ZM9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.99 14 14 11.99 14 9.5C14 7.01 11.99 5 9.5 5Z" fill="currentColor"/>
+</svg>
diff --git a/src/site/_includes/icons/share.svg b/src/site/_includes/icons/share.svg
new file mode 100644
index 00000000000..9a7acfcf95b
--- /dev/null
+++ b/src/site/_includes/icons/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 16.1c-.8 0-1.4.3-2 .8l-7.1-4.2c.1-.2.1-.5.1-.7s0-.5-.1-.7L16 7.2c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .5.1.7L8 9.8C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 4.2c-.1.2-.1.4-.1.6 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9-1.2-2.9-2.8-2.9z" fill="currentColor"/></svg>
diff --git a/src/site/_includes/icons/spotted.svg b/src/site/_includes/icons/spotted.svg
new file mode 100644
index 00000000000..46680bbafc7
--- /dev/null
+++ b/src/site/_includes/icons/spotted.svg
@@ -0,0 +1,3 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.75 0C9.71 0 0.75 8.96 0.75 20C0.75 31.04 9.71 40 20.75 40C31.79 40 40.75 31.04 40.75 20C40.75 8.96 31.79 0 20.75 0ZM18.75 30V26H22.75V30H18.75ZM18.75 10V22H22.75V10H18.75Z" fill="#585B63"/>
+</svg>
diff --git a/src/site/_includes/icons/subscribe.svg b/src/site/_includes/icons/subscribe.svg
new file mode 100644
index 00000000000..e570dc18776
--- /dev/null
+++ b/src/site/_includes/icons/subscribe.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewbox="0 0 24 24" role="img" aria-label="An envelope with plus icon" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z" fill="currentColor" fill-rule="nonzero"/>
+</svg>
diff --git a/src/site/_includes/icons/twitter.svg b/src/site/_includes/icons/twitter.svg
new file mode 100644
index 00000000000..22facf9ca33
--- /dev/null
+++ b/src/site/_includes/icons/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9525 4.9201C17.9647 5.09642 17.9647 5.27273 17.9647 5.45067C17.9647 10.8726 13.8371 17.1257 6.28966 17.1257V17.1224C4.06013 17.1257 1.8769 16.487 0 15.2829C0.324193 15.3219 0.65001 15.3414 0.97664 15.3422C2.82429 15.3438 4.61913 14.7239 6.07272 13.5823C4.31688 13.549 2.77717 12.4042 2.23928 10.7328C2.85436 10.8514 3.48812 10.8271 4.09181 10.6621C2.17753 10.2754 0.800325 8.59347 0.800325 6.64019C0.800325 6.62232 0.800325 6.60525 0.800325 6.58819C1.37071 6.90588 2.00934 7.0822 2.6626 7.1017C0.859638 5.89674 0.30388 3.49821 1.39265 1.62293C3.47593 4.1864 6.54967 5.7448 9.84928 5.90974C9.51859 4.4846 9.97034 2.9912 11.0364 1.98937C12.689 0.435846 15.2882 0.515472 16.8418 2.16731C17.7607 1.98612 18.6415 1.64893 19.4475 1.17117C19.1412 2.121 18.5001 2.92782 17.6437 3.44052C18.457 3.34464 19.2517 3.12689 20 2.79457C19.4491 3.62008 18.7552 4.33916 17.9525 4.9201Z" />
+</svg>
diff --git a/src/site/_includes/icons/update.svg b/src/site/_includes/icons/update.svg
new file mode 100644
index 00000000000..f8554b84641
--- /dev/null
+++ b/src/site/_includes/icons/update.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 5.5V10.5L12.25 13.02L13.02 11.74L9.5 9.65V5.5H8ZM18 7.5V0.5L15.36 3.14C13.74 1.51 11.49 0.5 9 0.5C4.03 0.5 0 4.53 0 9.5C0 14.47 4.03 18.5 9 18.5C13.97 18.5 18 14.47 18 9.5H16C16 13.36 12.86 16.5 9 16.5C5.14 16.5 2 13.36 2 9.5C2 5.64 5.14 2.5 9 2.5C10.93 2.5 12.68 3.29 13.95 4.55L11 7.5H18Z"  fill="currentColor"/>
+</svg>
diff --git a/src/site/_includes/icons/warning.svg b/src/site/_includes/icons/warning.svg
new file mode 100644
index 00000000000..a7bc799c6a2
--- /dev/null
+++ b/src/site/_includes/icons/warning.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" role="img" aria-label="Warning sign" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23 21L12 2 1 21h22zm-12-3v-2h2v2h-2zm0-4h2v-4h-2v4z" />
+</svg>
\ No newline at end of file
diff --git a/src/site/_includes/index-page.njk b/src/site/_includes/index-page.njk
new file mode 100644
index 00000000000..d9c13786ca8
--- /dev/null
+++ b/src/site/_includes/index-page.njk
@@ -0,0 +1,32 @@
+---
+layout: landing-page
+algolia_priority: 0.9
+eleventyComputed:
+  noindex: "{{ paged.index > 0 }}"
+---
+{% from 'macros/post-card.njk' import postCard with context %}
+
+<div class="region">
+  {# Elements start #}
+  <div class="wrapper auto-grid">
+    {% for element in paged.elements %}
+      {% set data = element.data %}
+
+      {{ postCard(
+        {
+          title: element.overrideTitle or element.title | i18n(locale),
+          subhead: element.description | i18n(locale),
+          url: element.url,
+          thumbnail: data.thumbnail or data.hero or null,
+          alt: element.overrideTitle or element.title | i18n(locale)
+        },
+        imageType
+      ) }}
+    {% endfor %}
+  </div>
+  {# Elements end #}
+
+  <div class="wrapper gap-top-size-3">
+    {% include "partials/pagination.njk" %}
+  </div>
+</div>
diff --git a/src/site/_includes/item-page.njk b/src/site/_includes/item-page.njk
new file mode 100644
index 00000000000..577c1ebc774
--- /dev/null
+++ b/src/site/_includes/item-page.njk
@@ -0,0 +1,129 @@
+---
+layout: default
+algolia_priority: 0.9
+eleventyComputed:
+  noindex: "{{ paged.index > 0 }}"
+---
+<div class="landing-page">
+  {# Hero starts #}
+  <header class="region bg-mid-bg author-profile">
+    <div class="wrapper">
+      <div class="headline">
+        <div class="switcher flex-align-center author-profile__name">
+          {% if paged.data.hero and showHero %}
+            {% if imageType == 'round' %}
+              <div class="avatar gap-inline-auto" data-size="medium">
+                {% Img
+                  src=paged.data.hero,
+                  alt=renderData.title or title,
+                  height="120",
+                  width="120",
+                  fetchpriority="high"
+                %}
+              </div>
+            {% else %}
+              {% Img
+                src=paged.data.hero,
+                alt=renderData.title or title,
+                height="120",
+                width="120",
+                fetchpriority="high"
+              %}
+            {% endif %}
+          {% endif %}
+          <div class="flow">
+            <h1 class="headline__title">{{ renderData.title or title }}</h1>
+            <p>{{ renderData.description | md | safe or description | md | safe }}</p>
+          </div>
+        </div>
+
+        <div class="author-profile__detail">
+          {% from 'macros/icon.njk' import icon, svg with context %}
+          <div class="cluster author-profile__socials flex-justify-left">
+            {% if paged.homepage %}
+              <a href="{{ paged.homepage }}" target="_blank">
+                {{ icon('language') }}
+              </a>
+            {% endif %}
+            {% if paged.linkedin %}
+              <a href="{{ paged.linkedin }}" target="_blank">
+                {{ icon('linkedin') }}
+              </a>
+            {% endif %}
+            {% if paged.mastodon %}
+              <a href="{{ paged.mastodon }}" target="_blank">
+                {{ icon('mastodon') }}
+              </a>
+            {% endif %}
+            {% if paged.dcc %}
+              <a href="https://developer.chrome.com/authors/{{ paged.dcc }}" target="_blank">
+                {{ icon('dcc') }}
+              </a>
+            {% endif %}
+            {% if paged.github %}
+              <a href="https://github.com/{{ paged.github }}" target="_blank">
+                {{ icon('github') }}
+              </a>
+            {% endif %}
+            {% if paged.glitch %}
+              <a href="https://glitch.com/@{{ paged.glitch }}" target="_blank">
+                {{ icon('glitch') }}
+              </a>
+            {% endif %}
+            {% if paged.twitter %}
+              <a href="https://twitter.com/{{ paged.twitter }}" target="_blank">
+                {{ icon('twitter') }}
+              </a>
+            {% endif %}
+            {% if renderData.rss %}
+              <a href="{{ renderData.rss }}" target="_blank">
+                {{ icon('rss') }}
+              </a>
+            {% endif %}
+          </div>
+
+          {% macro renderBio(bio) %}
+            {% if bio is string %}
+              <p class="gap-top-size-1">{{ bio }}</p>
+            {% else %}
+              {% for paragraph in bio %}
+                <p class="gap-top-size-1">{{ paragraph }}</p>
+              {% endfor %}
+            {% endif %}
+          {% endmacro %}
+
+          {% set bio = renderData.bio | i18n(locale, true) %}
+          {% if bio %}
+            {% Details %}
+            {% DetailsSummary %} Bio {% endDetailsSummary %}
+              {{ renderBio(bio) }}
+            {% endDetails %}
+
+            <div class="author-profile__bio"> {{ renderBio(bio) }} </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
+  {% include 'partials/paged.njk' %}
+
+  {% if path %}
+    <div class="region">
+      <div class="wrapper">
+        <div class="cluster flex-justify-center">
+          <a class="button" href="/{{path}}">
+            {{ ('i18n.paths.'+path+'.see_more') | i18n(locale) }}
+          </a>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  <div class="docked-actions flow flow-space-base">
+    <div>
+      {% include 'partials/subscribe-action.njk' %}
+    </div>
+  </div>
+</div>
diff --git a/src/site/_includes/landing-page.njk b/src/site/_includes/landing-page.njk
new file mode 100644
index 00000000000..73f9acaae9f
--- /dev/null
+++ b/src/site/_includes/landing-page.njk
@@ -0,0 +1,22 @@
+---
+layout: default
+---
+<div class="landing-page">
+  {# Hero starts #}
+  <header class="region bg-mid-bg">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h2 class="headline__title">{{ title }}</h2>
+        <p>{{ description }}</p>
+        {% if headlineAction %}
+          <div class="headline__action">
+            <a href="{{ headlineAction.url }}">{{ headlineAction.text }}</a>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
+  {{ content | safe }}
+</div>
diff --git a/src/site/_includes/layout.njk b/src/site/_includes/layout.njk
deleted file mode 100644
index 5c768aa66cf..00000000000
--- a/src/site/_includes/layout.njk
+++ /dev/null
@@ -1,178 +0,0 @@
----
-show_banner: true
-tags: []
-eleventyComputed:
-  canonicalUrl: "/{{page.fileSlug}}/"
----
-
-<!DOCTYPE html>
-<html lang="{{lang}}">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="theme-color" content="#fff"/>
-    {% if noindex or draft -%}
-      <meta name="robots" content="noindex">
-    {%- endif %}
-    {% if offline %}
-      <meta name="offline" content="true" />
-    {%- endif %}
-
-    {% if nometa %}
-      {# Area on page that service worker will load title, rss url and if offline #}
-      <!-- %_HEAD_REPLACE_% -->
-    {% else %}
-      {% Meta locale, page, collections, renderData %}
-    {%- endif %}
-
-    <link rel="preconnect" href="//www.gstatic.com" crossorigin="" />
-    <link rel="preconnect" href="//fonts.gstatic.com" crossorigin="" />
-    <link rel="preconnect" href="//fonts.googleapis.com" crossorigin="" />
-    <link rel="preconnect" href="//www.google-analytics.com" crossorigin="" />
-    <link rel="preconnect" href="//firebaseremoteconfig.googleapis.com" crossorigin="" />
-    <link rel="preconnect" href="//firebaseinstallations.googleapis.com" crossorigin="" />
-    <link rel="preconnect" href="//webdev.imgix.net" crossorigin="" />
-    <link
-      rel="stylesheet"
-      href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic|Roboto+Condensed:400,700|Roboto+Mono:400,500|Material+Icons"
-    />
-    <link rel="stylesheet" href="{{ resourceCSS.path | stripQueryParamsDev }}" />
-    <link rel="manifest" href="/manifest.webmanifest" />
-    {# Include default icon even though we have a manifest #}
-    <link rel="shortcut icon" href="/images/favicon.ico">
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
-    <link rel="mask-icon" color="#0054ff" href="/images/safari-pinned-tab.svg">
-    <script async src="//www.google-analytics.com/analytics.js"></script>
-    <script defer src="{{ resourceJS.path | stripQueryParamsDev }}"></script>
-  </head>
-  <body class="unresolved">
-    {#
-      Make the snackbar the first item in the DOM so we don't have to steal the
-      user's focus on initial visit to show them a cookie banner. Instead, the
-      snackbar will be the first stop for the screen reader / focus.
-    #}
-    <web-snackbar-container></web-snackbar-container>
-    <div class="w-loading-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" hidden></div>
-    <web-header role="navigation">
-      <button class="w-button--icon w-button--round web-header__hamburger-btn unresolved" aria-label="Open menu">
-        <span class="w-tooltip w-tooltip--left">Open menu</span>
-      </button>
-
-      <a
-        href="/"
-        class="web-header__logo-link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="Site logo"
-      >
-        <img class="web-header__logo" src="/images/lockup.svg" alt="web.dev" />
-      </a>
-
-      <div class="web-header__middle">
-        <div class="web-header__links">
-          <a
-            href="/learn/"
-            class="web-header__link gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Tab: Learn"
-          >
-            Learn
-          </a>
-
-          <a
-            href="/measure/"
-            class="web-header__link gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Tab: Measure"
-          >
-            Measure
-          </a>
-
-          <a
-            href="/blog/"
-            class="web-header__link gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Tab: Blog"
-          >
-            Blog
-          </a>
-
-          <a
-            href="/live/"
-            class="web-header__link gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Tab: Live"
-          >
-            Live
-          </a>
-
-          <a
-            href="/about/"
-            class="web-header__link gc-analytics-event"
-            data-category="Site-Wide Custom Events"
-            data-label="Tab: About"
-          >
-            About
-          </a>
-        </div>
-        <web-search></web-search>
-      </div>
-
-      <web-profile-switcher-container></web-profile-switcher-container>
-    </web-header>
-
-    <web-side-nav class="unresolved">
-      <a
-        href="/learn/"
-        class="web-side-nav__link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="SideNav: Learn"
-      >
-        Learn
-      </a>
-      <a
-        href="/measure/"
-        class="web-side-nav__link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="SideNav: Measure"
-      >
-        Measure
-      </a>
-      <a
-        href="/blog/"
-        class="web-side-nav__link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="SideNav: Blog"
-      >
-        Blog
-      </a>
-      <a
-        href="/live/"
-        class="web-side-nav__link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="SideNav: Live"
-      >
-        Live
-      </a>
-      <a
-        href="/about/"
-        class="web-side-nav__link gc-analytics-event"
-        data-category="Site-Wide Custom Events"
-        data-label="SideNav: About"
-      >
-        About
-      </a>
-    </web-side-nav>
-    <main>
-      <div id="content">
-        {% if show_banner %}
-          {% include 'partials/banner.njk' %}
-        {% endif %}
-        {% include 'partials/translation-disclaimer.njk' %}
-        {{ content | safe }}
-      </div>
-    </main>
-    {% include 'partials/footer.njk' %}
-  </body>
-</html>
diff --git a/src/site/_includes/learn-page.njk b/src/site/_includes/learn-page.njk
new file mode 100644
index 00000000000..d8aa753e9ab
--- /dev/null
+++ b/src/site/_includes/learn-page.njk
@@ -0,0 +1,49 @@
+---
+layout: default
+title: Learn
+description: |
+  Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
+pageScripts:
+  - '/js/learn.js'
+---
+{% from 'macros/icon.njk' import icon with context %}
+
+<div class="learn wide-card-index">
+  {# Hero starts #}
+  <header class="region bg-mid-bg learn__hero">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h1 class="headline__title">{{ title }}</h1>
+        <p>{{ 'i18n.learn.header' | i18n(locale) }}</p>
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
+  {# Courses start #}
+  <div class="region">
+    <div class="wrapper auto-grid learn__collection">
+      {% set coursesArr = helpers.values(courses) %}
+      {% for course in coursesArr|sort(true, false, 'meta.date') %}
+      {% if course.meta and not course.meta.draft and not course.meta.invisible %}
+        <a href="{{ course.meta.url }}" class="card" data-style="branded">
+          <h3 class="visually-hidden">{{ course.meta.title }}</h3>
+          <div class="card__header repel">
+            <p class="color-mid-text">Course</p>
+            <div class="counter">
+              {% set pages = collections.all | navigation(course.toc) %}
+              <span class="counter__content" aria-label="{{ pages.list.length }} {{ 'i18n.learn.resources' | i18n(locale) }}">{{ pages.list.length }}</span>
+              {{ icon('mortarboard') }}
+            </div>
+          </div>
+          <img src="{{ course.meta.card }}" alt="{{ course.meta.title }} branding" />
+          <div class="card__content flow">
+            <p class="text-size-1">{{ course.meta.description | i18n(locale) }}</p>
+          </div>
+        </a>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+  {# Courses end #}
+</div>
diff --git a/src/site/_includes/macros/audio-fab.njk b/src/site/_includes/macros/audio-fab.njk
new file mode 100644
index 00000000000..52b18ec3f0b
--- /dev/null
+++ b/src/site/_includes/macros/audio-fab.njk
@@ -0,0 +1,16 @@
+{% macro audioFab(thumbnail, target="audio-player") %}
+<web-audio-fab target="{{ target }}">
+  <button class="web-audio-fab__button" data-playing aria-label="Back to audio player">
+    {% Img class="web-audio-fab__thumbnail", src=thumbnail, alt="", width="56", height="56" %}
+    <div class="web-audio-fab__equalizer-container">
+      <svg class="web-audio-fab__equalizer" xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">
+        <g>
+          <rect class="web-audio-fab__equalizer-left" width="3" height="8" />
+          <rect class="web-audio-fab__equalizer-middle" width="3" height="8" x="5" />
+          <rect class="web-audio-fab__equalizer-right" width="3" height="8" x="10" />
+        </g>
+      </svg>
+    </div>
+  </button>
+</web-audio-fab>
+{% endmacro %}
diff --git a/src/site/_includes/macros/audio-player.njk b/src/site/_includes/macros/audio-player.njk
new file mode 100644
index 00000000000..76eff757667
--- /dev/null
+++ b/src/site/_includes/macros/audio-player.njk
@@ -0,0 +1,9 @@
+{% macro audioPlayer(title, src, thumbnail, id="audio-player") %}
+<div class="audio-player cluster">
+  {% Img class="audio-player__thumbnail", src=thumbnail, alt="", width="80", height="80" %}
+  <div class="audio-player__inner flow">
+    <div class="audio-player__title">{{ title }}</div>
+    <audio id="{{ id }}" class="audio-player__element" src="{{ src }}" controls></audio>
+  </div>
+</div>
+{% endmacro %}
diff --git a/src/site/_includes/macros/authors.njk b/src/site/_includes/macros/authors.njk
new file mode 100644
index 00000000000..9a1f195fb98
--- /dev/null
+++ b/src/site/_includes/macros/authors.njk
@@ -0,0 +1,19 @@
+{#
+  Displays many authors.
+  @param {boolean} stacked Flag if authors should be stacked
+  @param {boolean} showDescription Flag if authors description should be shown
+#}
+{% macro authorsMacro(stacked=false, showDescription=false) %}
+{% set conatinerClass = "flow" if stacked else "cluster flow-space-size-2" %}
+<div class="{{conatinerClass}}">
+  {%- for author in authors -%}
+    {% Author {
+      id: author,
+      author: collections.authors[author],
+      showSocialMedia: true,
+      showDescription: showDescription,
+      locale: locale
+    } %}
+  {%- endfor -%}
+</div>
+{% endmacro %}
diff --git a/src/site/_includes/macros/breadcrumbs.njk b/src/site/_includes/macros/breadcrumbs.njk
new file mode 100644
index 00000000000..fed3cc91021
--- /dev/null
+++ b/src/site/_includes/macros/breadcrumbs.njk
@@ -0,0 +1,39 @@
+{#
+  @typedef {Array.<string>} BreadcrumbLink - 2-el array with a title and
+    an url for a breadcrumb link.
+#}
+
+{#
+  Displays breadcrumbs element.
+  @param {Array.<BreadcrumbLink>} crumbs
+#}
+{% macro breadcrumbs(crumbs) %}
+  <nav class="breadcrumbs" aria-label="breadcrumbs">
+    <ul class="breadcrumbs__list" role="list">
+      <li>
+        <a
+          class="gc-analytics-event"
+          data-category="web.dev"
+          data-label="post, home breadcrumb"
+          data-action="click"
+          href="/"
+        >
+          {{site.titleVariation}}
+        </a>
+      </li>
+      {% for crumb in crumbs %}
+        <li>
+          <a
+            class="gc-analytics-event"
+            data-category="web.dev"
+            data-label="post, path breadcrumb"
+            data-action="click"
+            href="{{crumb[1]}}"
+          >
+            {{crumb[0]}}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+{% endmacro %}
diff --git a/src/site/_includes/macros/code-pattern.njk b/src/site/_includes/macros/code-pattern.njk
new file mode 100644
index 00000000000..065b6a8bf44
--- /dev/null
+++ b/src/site/_includes/macros/code-pattern.njk
@@ -0,0 +1,15 @@
+{#
+  @param {CodePattern} pattern - Code Pattern object.
+#}
+{% macro codePattern(pattern) %}
+  {% Details %}
+    {% DetailsSummary 'h3' %}
+      {{pattern.title}}
+    {% endDetailsSummary %}
+    {% CodePattern pattern.id %}
+    {% if pattern.description %}
+      <p class="code-patterns__description">{{ pattern.description | safe }}</p>
+    {% endif %}
+    <p class="code-patterns__more"><a href="/patterns/{{pattern.id}}">Learn more</a></p>
+  {% endDetails %}
+{% endmacro %}
diff --git a/src/site/_includes/macros/design-system-component.njk b/src/site/_includes/macros/design-system-component.njk
new file mode 100644
index 00000000000..6344d80bf85
--- /dev/null
+++ b/src/site/_includes/macros/design-system-component.njk
@@ -0,0 +1,31 @@
+<!-- The design-system top-level class is the scss/pages/_design-system.scss page -->
+{% macro designSystemComponent(previewUrl, markup, rendered, handle, size) %}
+<div class="flow">
+  <iframe class="design-system__preview-frame" src="{{ previewUrl }}?state=window" data-size="{{ size if size else 'standard' }}"></iframe>
+  <div class="cluster flex-justify-end">
+    <a href="{{ previewUrl }}">View full screen</a>
+  </div>
+  {% if markup or rendered %}
+  <div class="gap-top-size-2">
+    <details>
+      <summary>Code</summary>
+      <div class="flow">
+        {% if markup %}      
+          <p class="text-size-3">Source (Nunjucks)</p>
+          <web-copy-code>
+            {% highlight "html" %}{{ markup | safe }}{% endhighlight %}
+          </web-copy-code>
+        {% endif %}
+
+        {% if rendered %}
+          <p class="text-size-3">Output</p>
+          <web-copy-code>
+            {% highlight "html" %}{{ rendered | safe }}{% endhighlight %}
+          </web-copy-code>
+        {% endif %}
+      </div>
+    </details>
+  </div>
+  {% endif %}
+</div>
+{% endmacro %}
diff --git a/src/site/_includes/macros/icon.njk b/src/site/_includes/macros/icon.njk
new file mode 100644
index 00000000000..88ff4ec2fe7
--- /dev/null
+++ b/src/site/_includes/macros/icon.njk
@@ -0,0 +1,45 @@
+{#
+  @typedef {object} SvgOptions - Options used to configure the attributes on the svg.
+  @property {string} [label] - An aria-label that describes the svg.
+  @property {string} [className] - A space separated list of classes to apply to
+  the svg.
+  @property {boolean} [hidden] - Indicates if an svg should have aria-hidden.
+#}
+
+{#
+  Inlines an svg into the page.
+  @param {string} path - The file path to the svg.
+  @param {SvgOptions} options
+#}
+{% macro svg(path, options) %}
+{% set rawSvg -%}
+  {% includeRaw path %}
+{%- endset %}
+{{ rawSvg | updateSvgForInclude(options) | safe }}
+{% endmacro %}
+
+{#
+  Finds an icon in the _includes/icons folder.
+  Adds a class="icon" to the icon, as well as any additional classes passed in.
+  @param {string} name - The filename for the icon, minus the .svg extension.
+  @param {SvgOptions} options
+#}
+{% macro icon(name, options) %}
+{% set path = 'icons/' + name + '.svg' %}
+
+{# Nunjucks' {% set %} can't modify object properties #}
+{# https://github.com/mozilla/nunjucks/issues/313 #}
+{# So instead we unpack the object, set the defaults, and send a new object #}
+{# to the updateSvgForInclude function. #}
+{% set label = options.label %}
+{% if not label %}
+  {% set label = name %}
+{% endif %}
+
+{% set className = options.className or '' %}
+{% set className = 'icon ' + className %}
+
+{% set hidden = options.hidden or false %}
+
+{{ svg(path, {label: label, hidden: hidden, className: className}) }}
+{% endmacro %}
diff --git a/src/site/_includes/macros/post-card.njk b/src/site/_includes/macros/post-card.njk
new file mode 100644
index 00000000000..cd1cfcd5a8a
--- /dev/null
+++ b/src/site/_includes/macros/post-card.njk
@@ -0,0 +1,60 @@
+{% from 'macros/tag-pills.njk' import tagPills with context %}
+
+{#
+  @typedef {string} param.title - The title of the card, like a show's name or a post's title.
+  @typedef {string} param.subhead - A description or short summary.
+  @typedef {string} param.url - The url for the page the card is previewing.
+  @typedef {string|null} param.thumbnail - An relevant image to be displayed in the card.
+  @typedef {string|null} param.alt - Alt text for image. If no thumbnail is provided, this can be null.
+  @typedef {string[]|null} param.authors - An array of author ids for the authors who wrote the post.
+  @typedef {string[]|null} param.tags - An array of tag ids for the tags relevant to the post.
+  @typedef {Date|null} param.date - Date for when a post was created.
+  @typedef {Date|null} param.updated - Date for when a post was updated.
+  @typedef {boolean|null} param.draft - Conditional if the card is for a draft post. This puts a pill on the card that says "DRAFT".
+  @typedef {'round'|'square'} [imageType] - Defines shape of page's hero. Defailts to 'square'.
+#}
+{% macro postCard(param, imageType = 'square') %}
+
+<article class="card">
+  {% if param.draft %}
+    <div class="card__header cluster flex-justify-end">
+      <p class="pill">DRAFT</p>
+    </div>
+  {% endif %}
+
+  {% if param.thumbnail %}
+    {% if imageType == 'round' %}
+      <a href="{{ param.url }}" aria-hidden="true" class="avatar gap-inline-auto" data-size="large">
+        {% Img src=param.thumbnail, alt=param.alt, width="192", height="192", params={fit: 'crop', h: '192', w: '192'} %}
+      </a>
+    {% else %}
+      <a href="{{ param.url }}" aria-hidden="true">
+        {% Img src=param.thumbnail, alt=param.alt, width="570", height="330", class="card__hero" %}
+      </a>
+    {% endif %}
+  {% endif %}
+
+  <div class="card__content flow">
+    <h2 class="card__heading text-size-3">
+      <a href="{{ param.url }}">{{ param.title }}</a>
+    </h2>
+    <p>{{ param.subhead | md | safe }}</p>
+  </div>
+
+  {% if param.authors %}
+    <div class="gap-top-size-1">
+      {% if param.date %}
+        {% AuthorsDate authors=param.authors, date=param.date, updated=param.updated, locale=locale %}
+      {% else %}
+        {% AuthorsDate authors=param.authors, locale=locale %}
+      {% endif %}
+    </div>
+  {% endif %}
+
+  {% if param.tags %}
+    <div class="card__tags cluster gap-top-base" aria-label="tags for this post">
+      {{ tagPills(param.tags) }}
+    </div>
+  {% endif %}
+</article>
+{% endmacro %}
diff --git a/src/site/_includes/macros/prerender.njk b/src/site/_includes/macros/prerender.njk
new file mode 100644
index 00000000000..57d39045c1c
--- /dev/null
+++ b/src/site/_includes/macros/prerender.njk
@@ -0,0 +1,20 @@
+{#
+  @typedef {string} url - The url for the prerendering.
+#}
+{% macro prerender(url) %}
+{% if url and not url.startsWith('http://') and not url.startsWith('https://') %}
+{% set speculationRules %}
+{
+  "prerender":[
+    {
+      "source":"list",
+      "urls":[
+        "{{ url }}"
+      ]
+    }
+  ]
+}
+{% endset %}
+<script type="speculationRules">{{ speculationRules | minifyJSON | cspHash | safe }}</script>
+{% endif %}
+{% endmacro %}
diff --git a/src/site/_includes/macros/tag-chips.njk b/src/site/_includes/macros/tag-chips.njk
new file mode 100644
index 00000000000..52be2142a6f
--- /dev/null
+++ b/src/site/_includes/macros/tag-chips.njk
@@ -0,0 +1,14 @@
+{#
+  @typedef {string[]} tags - An array of tag keys to display.
+  @property {string} [className] - A space separated list of classes to apply.
+#}
+{% macro tagChips(tags, className = '') %}
+  <div class="chips {{className}}">
+    {% for tagKey in tags or [] %}
+      {% if tagKey in collections.tags %}
+        {% set tag = collections.tags[tagKey] %}
+        <a class="chip" href="{{tag.url}}">{{tag.overrideTitle or tag.title | i18n(locale)}}</a>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endmacro %}
diff --git a/src/site/_includes/macros/tag-pills.njk b/src/site/_includes/macros/tag-pills.njk
new file mode 100644
index 00000000000..7b8993a4522
--- /dev/null
+++ b/src/site/_includes/macros/tag-pills.njk
@@ -0,0 +1,11 @@
+{#
+  @param {string[]} tags - An array of tag keys to display.
+#}
+{% macro tagPills(tags) %}
+  {% for tagKey in tags or [] %}
+    {% if tagKey in collections.tags %}
+      {% set tag = collections.tags[tagKey] %}
+      <a class="pill" href="{{ tag.url }}">{{ tag.overrideTitle or tag.title | i18n(locale) }}</a>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}
diff --git a/src/site/_includes/newsletter.njk b/src/site/_includes/newsletter.njk
index 68fb1b1e9ae..41bf393096c 100644
--- a/src/site/_includes/newsletter.njk
+++ b/src/site/_includes/newsletter.njk
@@ -1,5 +1,8 @@
 ---
-layout: layout
-permalink: "{{page.filePathStem}}.html"
+layout: default
+pageScripts:
+  - '/js/newsletter.js'
 ---
-{% include 'partials/newsletter.njk' %}
+<web-newsletter>
+  <iframe frameborder="0" scrolling="yes" width="100%" height="1000px" srcdoc="{{ content }}"></iframe>
+</web-newsletter>
diff --git a/src/site/_includes/page.njk b/src/site/_includes/page.njk
deleted file mode 100644
index 3001b8f7c52..00000000000
--- a/src/site/_includes/page.njk
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: layout
----
-
-{#
-  Use this template for custom landing pages that don't match any of the other
-  layout templates.
-#}
-
-{% if masthead %}
-  <header class="w-masthead-path">
-    <div class="w-masthead-path__container">
-      <div class="w-masthead-path__left">
-        <h1 class="w-masthead-path__headline no-link">{{title}}</h1>
-        <p class="w-masthead-path__description">{{description}}</p>
-      </div>
-      <div class="w-masthead-path__right">
-        <img class="w-masthead-path__image" src="{{masthead}}" alt="" width="420" height="280">
-      </div>
-    </div>
-  </header>
-{% elif hero %}
-  {% Hero {
-    hero: hero,
-    alt: alt,
-    heroPosition: hero_position,
-    heroFit: hero_fit
-  } %}
-{% endif %}
-
-{% if draft and site.env === 'dev' %}
-  <div class="w-banner w-banner--warning w-banner--body">
-    🚨 This page is a draft! 🚨
-  </div>
-{% endif %}
-
-{#
-  Blog posts have more padding on the sides so give page authors the option
-  of using either the full width or narrow layout.
-#}
-<section class="{{ 'w-layout-container--narrow' if narrow else 'w-layout-container' }}">
-  {{ content | safe }}
-</section>
\ No newline at end of file
diff --git a/src/site/_includes/pagination.njk b/src/site/_includes/pagination.njk
deleted file mode 100644
index c19ba6dfcd2..00000000000
--- a/src/site/_includes/pagination.njk
+++ /dev/null
@@ -1,41 +0,0 @@
-<nav class="w-pagination">
-  {# Show first page anchor only if not on the first page #}
-  {% if paged.index != 0 %}
-    <a class="w-pagination__link w-pagination__arrow w-pagination__arrow--first" aria-label="First Page" href="{{ paged.href }}"></a>
-  {% endif %}
-
-  {# Show previous page anchor only if not on the first two pages #}
-  {% if paged.index > 1 %}
-    <a class="w-pagination__link w-pagination__arrow w-pagination__arrow--previous" aria-label="Previous Page" href="{{ paged.href }}{{ paged.index }}"></a>
-  {% endif %}
-
-  {%- for pageEntry in paged | pagedNavigation  %}
-    {% if pageEntry.showEllipses %}
-      <span class="w-pagination__spacer">…</span>
-    {% endif %}
-    <a
-      {% if paged.index == (pageEntry.index - 1) %}
-        class="w-pagination__link w-pagination__link--active"
-        aria-current="page"
-      {% else %}
-        class="w-pagination__link"
-      {% endif %}
-
-      aria-label="Page {{pageEntry.index}}"
-      href="{{ pageEntry.href }}"
-    >
-      {{ pageEntry.index }}
-    </a>
-  {%- endfor %}
-
-  {# Show next page anchor only if not on the last or penultimate pages #}
-  {% if (paged.index + 2) < (paged.pages) %}
-    <a class="w-pagination__link w-pagination__arrow w-pagination__arrow--next" aria-label="Next Page" href="{{ paged.href }}{{ paged.index + 2 }}"></a>
-  {% endif %}
-
-  {# Show last page anchor only if not on the last page #}
-  {% if paged.index != (paged.pages - 1) %}
-    <a class="w-pagination__link w-pagination__arrow w-pagination__arrow--last" aria-label="Last Page" href="{{ paged.href }}{{ paged.pages }}"></a>
-  {% endif %}
-
-</nav>
diff --git a/src/site/_includes/partials/analytics.njk b/src/site/_includes/partials/analytics.njk
new file mode 100644
index 00000000000..feeb08e87eb
--- /dev/null
+++ b/src/site/_includes/partials/analytics.njk
@@ -0,0 +1,13 @@
+{% set analyticsScript %}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({'gtm.start': new Date().getTime(),event:'gtm.js'});
+window.dataLayer.push({'user_agent': navigator.userAgent});
+//Restrict GTM variables:
+window.dataLayer.push({'gtm.blocklist': ['html', 'd', 'jsm', 'j']});
+function gtag(){dataLayer.push(arguments)};
+{% if (site.env != 'prod') %}
+  {# In development, log debug events to the console instead of sending them to GA #}
+  window.gtag = console.debug;
+{% endif %}
+{% endset %}
+<script>{{ analyticsScript | minifyJs | cspHash | safe }}</script>
diff --git a/src/site/_includes/partials/authors-stack.njk b/src/site/_includes/partials/authors-stack.njk
new file mode 100644
index 00000000000..20a0182437e
--- /dev/null
+++ b/src/site/_includes/partials/authors-stack.njk
@@ -0,0 +1,2 @@
+{% from 'macros/authors.njk' import authorsMacro with context %}
+{{ authorsMacro(true, true) }}
\ No newline at end of file
diff --git a/src/site/_includes/partials/banner.njk b/src/site/_includes/partials/banner.njk
index cbf712a103e..82ccb8d82e0 100644
--- a/src/site/_includes/partials/banner.njk
+++ b/src/site/_includes/partials/banner.njk
@@ -1,3 +1,3 @@
 {% if site.isBannerEnabled %}
-  {% Banner %}{{ site.banner }}{% endBanner %}
+  {% Banner %}{{ site.banner | safe }}{% endBanner %}
 {% endif %}
\ No newline at end of file
diff --git a/src/site/_includes/partials/cards-collection.njk b/src/site/_includes/partials/cards-collection.njk
new file mode 100644
index 00000000000..a097da03ebf
--- /dev/null
+++ b/src/site/_includes/partials/cards-collection.njk
@@ -0,0 +1,42 @@
+{% if cards %}
+  {% for card in cards %}
+    {% set post = null %}
+    {% if card.latestPostByTags %}
+      {% set post = collections.all | latestPostByTags(card.latestPostByTags) %}
+      {% set eyebrowIcon = 'latest' %}
+      {% set eyebrowText = 'i18n.post.latest' | i18n(locale) %}
+    {% endif %}
+    {% if card.url %}
+      {% set post = card.url | findByUrl %}
+      {% set eyebrowIcon = card.eyebrow.icon %}
+      {% set eyebrowText = card.eyebrow.text %}
+    {% endif %}
+
+     <a
+      {% if post or card.url %} href="{{ post.url or card.url }}" {% endif %}
+      class="card {% if card.cardLayout %}card-{{card.cardLayout}}{% endif %}{% if card.row %} row-{{card.row}}{% endif %}{% if card.column %} col-{{card.column}}{% endif %}{% if card.theme %} bg-{{card.theme}}{% endif %}"
+      data-category="web.dev"
+      data-label="Topic: {{card.title or post.data.title }}"
+      data-action="click"
+      role="listitem"
+    >
+      {% set thumbnail = card.thumbnail or post.data.thumbnail or post.data.hero %}
+      {% set alt = post.data.alt or card.title or '' %}
+      {% if (card.cardLayout == 'vertical' or card.cardLayout == 'horizontal') %}
+        {% if thumbnail %} {% Img src=thumbnail, alt=alt, width="370", height="220" %} {% endif %}
+      {% endif %}
+
+      <div class="content">
+        <div class="card__eyebrow flow">
+          {{ icon(eyebrowIcon) }}
+          <span class="text-size-0 color-mid-text">{{ eyebrowText }}</span>
+        </div>
+
+        <div class="card__content flow">
+          <h4 class="card__heading color-core-text">{{ card.title or post.data.title }}</h4>
+          <p class="text-size-1 color-mid-text">{{ card.description or post.data.description }}</p>
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+{% endif %}
\ No newline at end of file
diff --git a/src/site/_includes/partials/course-app-bar.njk b/src/site/_includes/partials/course-app-bar.njk
new file mode 100644
index 00000000000..df7584cefd6
--- /dev/null
+++ b/src/site/_includes/partials/course-app-bar.njk
@@ -0,0 +1,28 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+<nav class="breadcrumbs pad-inline-size-1" aria-label="breadcrumbs">
+  <div class="repel">
+    <ul class="breadcrumbs__list" role="list">
+      <li>
+        <a href="/">{{ svg('../../images/lockup.svg', {label: 'web.dev', className: 'breadcrumbs__brand'}) }}</a>
+      </li>
+      <li>
+        <a href="/learn/">{{ 'i18n.header.learn' | i18n(locale) }}</a>
+      </li>
+      <li>
+        <a href="/learn/{{ projectKey }}">{{ courseData.meta.title | i18n(locale) }}</a>
+      </li>
+    </ul>
+    <share-action class="gc-analytics-event breadcrumbs__share"
+      authors="{{ authors | expandAuthors(collections.authors, lang) }}"
+      data-category="web.dev"
+      data-label="share"
+      data-action="click"
+      data-icon="share"
+      tabindex="0"
+      role="button"
+    >
+      {{ icon('share') }}
+      <span>{{ 'i18n.common.share' | i18n(locale) }}</span>
+    </share-action>
+  </div>
+</nav>
diff --git a/src/site/_includes/partials/course-audio.njk b/src/site/_includes/partials/course-audio.njk
new file mode 100644
index 00000000000..07ee80738db
--- /dev/null
+++ b/src/site/_includes/partials/course-audio.njk
@@ -0,0 +1,5 @@
+{{ audioFab(audio.thumbnail) }}
+<figure>
+  {{ audioPlayer(audio.title, audio.src, audio.thumbnail) }}
+  <figcaption class="visually-hidden">An audio version of this module</figcaption>
+</figure>
diff --git a/src/site/_includes/partials/course-index.njk b/src/site/_includes/partials/course-index.njk
new file mode 100644
index 00000000000..fda0319683a
--- /dev/null
+++ b/src/site/_includes/partials/course-index.njk
@@ -0,0 +1,20 @@
+{%- set courseData = courses[projectKey] -%}
+{%- set pageNavigation = collections.all | navigation(courseData.toc) -%}
+{%- for item in pageNavigation.list -%}
+  {#- Skip the first item so we don't show an entry for the current page. -#}
+  {%- if not loop.first -%}
+      {%- set title = item.data.title or '' -%}
+      {%- if item.title -%}
+        {%- set title = item.title | i18n(locale) -%}
+      {%- endif -%}
+      {%- if not item.data.placeholder -%}
+        <h3><a href="{{ item.url }}">{{ title }}</a></h3>
+        <p>{{ item.data.description }}</p>
+      {%- endif -%}
+      {# Don't link to placeholder items #}
+      {%- if item.data.placeholder -%}
+        <h3>{{ title }}</h3>
+        <p>{{ item.data.description }}</p>
+      {%- endif -%}
+  {%- endif -%}
+{%- endfor -%}
diff --git a/src/site/_includes/partials/course-pagination.njk b/src/site/_includes/partials/course-pagination.njk
new file mode 100644
index 00000000000..1953e0345a2
--- /dev/null
+++ b/src/site/_includes/partials/course-pagination.njk
@@ -0,0 +1,40 @@
+{% from 'macros/icon.njk' import icon with context %}
+
+{% macro preferredTitle(item) %}
+  {%- set title = item.data.title or '' -%}
+  {%- if item.title -%}
+    {%- set title = item.title | i18n(locale) -%}
+  {%- endif -%}
+  {{- title -}}
+{% endmacro %}
+
+<h2 class="visually-hidden">Next and previous lessons</h2>
+<nav class="preview-pagination gap-top-size-2" aria-label="pagination">
+  {% for item in pageNavigation.list %}
+    {% if item.url === page.url %}
+      {% if item.prev %}
+        {% set prev = item.prev %}
+        <a class="preview-pagination__item flow" href="{{ prev.url }}" data-dir="prev">
+          <div class="preview-pagination__meta cluster">
+            {{ icon('arrow-back', {label: 'previous'}) }}
+            <span>{{ 'i18n.common.prev' | i18n(locale) }}</span>
+            <span>{{ prev.counter }}</span>
+          </div>
+          <h3 class="preview-pagination__heading">{{ preferredTitle(prev) }}</h3>
+        </a>
+      {% endif %}
+      {% if item.next %}
+        {% set next = item.next %}
+        <a class="preview-pagination__item flow" href="{{ next.url }}" data-dir="next">
+          <div class="preview-pagination__meta cluster">
+            {{ icon('arrow-forward', {label: 'next'}) }}
+            <span>{{ 'i18n.common.next' | i18n(locale) }}</span>
+            <span>{{ next.counter }}</span>
+          </div>
+          <h3 class="preview-pagination__heading">{{ preferredTitle(next) }}</h3>
+          <p>{{ next.data.description }}</p>
+        </a>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+</nav>
diff --git a/src/site/_includes/partials/devrel-ribbon.njk b/src/site/_includes/partials/devrel-ribbon.njk
new file mode 100644
index 00000000000..197c0620790
--- /dev/null
+++ b/src/site/_includes/partials/devrel-ribbon.njk
@@ -0,0 +1,7 @@
+<web-devrel-ribbon class="devrel-ribbon">
+  <a class="devrel-ribbon__ribbon bg-floating-ribbon-bg" href="/about/">
+    <span>{{ 'i18n.common.by' | i18n(locale) }}</span>
+    {% include "icons/chrome-white.svg" %}
+    <span>{{ 'i18n.common.chrome_devrel' | i18n(locale) }}</span>
+  </a>
+</web-devrel-ribbon>
diff --git a/src/site/_includes/partials/footer.njk b/src/site/_includes/partials/footer.njk
deleted file mode 100644
index 13eb114a667..00000000000
--- a/src/site/_includes/partials/footer.njk
+++ /dev/null
@@ -1,147 +0,0 @@
-<footer class="w-footer">
-  <nav class="w-footer__linkboxes">
-    <ul class="w-footer__linkboxes-list">
-      <li class="w-footer__linkbox">
-        <h3 class="w-footer__linkbox-heading">Contribute</h3>
-        <ul class="w-footer__linkbox-list">
-          <li class="w-footer__linkbox-item">
-            <a href="https://github.com/GoogleChrome/web.dev/issues/new?assignees=&labels=bug&template=bug_report.md&title="
-              class="w-footer__linkbox-link" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
-              File a bug
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://github.com/googlechrome/web.dev" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
-              View source
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="w-footer__linkbox">
-        <h3 class="w-footer__linkbox-heading">Related content</h3>
-        <ul class="w-footer__linkbox-list">
-          <li class="w-footer__linkbox-item">
-            <a href="https://developers.google.com/web/updates/" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
-              Updates
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://developers.google.com/web/" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
-              Web Fundamentals
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://developers.google.com/web/showcase/" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)">
-              Case studies
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://devwebfeed.appspot.com/" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)">
-              DevWeb Content Firehose
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="/podcasts/" class="w-footer__linkbox-link"
-              data-category="Podcasts" data-label="Footer Link (index 5)">
-              Podcasts
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="w-footer__linkbox">
-        <h3 class="w-footer__linkbox-heading">Connect</h3>
-        <ul class="w-footer__linkbox-list">
-          <li class="w-footer__linkbox-item">
-            <a href="https://www.twitter.com/@ChromiumDev" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
-              Twitter
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://www.youtube.com/user/ChromeDevelopers" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
-              YouTube
-            </a>
-          </li>
-          <li class="w-footer__linkbox-item">
-            <a href="https://medium.com/dev-channel" class="w-footer__linkbox-link"
-              data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)">
-              Medium
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="w-footer__utility">
-    <nav class="w-footer__utility-nav">
-      <a href="https://developers.google.com/" class="w-footer__utility-logo-link"
-        data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link">
-        <img loading="lazy" width="185" height="33" class="w-footer__utility-logo" src="/images/lockup-color.png"
-          alt="Google Developers" />
-      </a>
-      <ul class="w-footer__utility-list">
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="https://developer.chrome.com/home"
-            data-category="Site-Wide Custom Events" data-label="Footer Chrome Link">
-            Chrome
-          </a>
-        </li>
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="https://firebase.google.com/" data-category="Site-Wide Custom Events"
-            data-label="Footer Firebase Link">
-            Firebase
-          </a>
-        </li>
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="https://cloud.google.com/" data-category="Site-Wide Custom Events"
-            data-label="Footer Google Cloud Platform Link">
-            Google Cloud Platform
-          </a>
-        </li>
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="https://developers.google.com/products"
-            data-category="Site-Wide Custom Events" data-label="Footer All products Link">
-            All products
-          </a>
-        </li>
-      </ul>
-      <web-language-select></web-language-select>
-    </nav>
-    <nav class="w-footer__utility-nav">
-      <ul class="w-footer__utility-list">
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="https://policies.google.com/" data-category="Site-Wide Custom Events"
-            data-label="Footer Terms and Privacy link">
-            Terms &amp; Privacy
-          </a>
-        </li>
-        <li class="w-footer__utility-item">
-          <a class="w-footer__utility-link" href="/community-guidelines/" data-category="Site-Wide Custom Events"
-            data-label="Footer Community Guidelines link">
-            Community Guidelines
-          </a>
-        </li>
-      </ul>
-      <div class="w-footer__license">
-        <p>
-          Except as otherwise noted, the content of this page is licensed
-          under the
-          <a href="https://creativecommons.org/licenses/by/4.0/">
-          Creative Commons Attribution 4.0 License</a>,
-          and code samples are licensed under the
-          <a href="https://www.apache.org/licenses/LICENSE-2.0">
-          Apache 2.0 License</a>. For details, see the
-          <a href="https://developers.google.com/site-policies">
-          Google Developers Site Policies</a>.
-        </p>
-      </div>
-    </nav>
-  </div>
-</footer>
diff --git a/src/site/_includes/partials/head.njk b/src/site/_includes/partials/head.njk
new file mode 100644
index 00000000000..e8f4a9324ee
--- /dev/null
+++ b/src/site/_includes/partials/head.njk
@@ -0,0 +1,71 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+{% include "partials/theme-script.njk" %}
+<link rel="stylesheet" href="{{ helpers.hashForProd('/css/next.css') }}">
+<link rel="preload" as="font" crossorigin="anonymous" href="/fonts/material-icons/regular.woff2">
+
+<link rel="preload" as="font" crossorigin="anonymous" href="/fonts/google-sans/regular/latin.woff2">
+<link rel="preload" as="font" crossorigin="anonymous" href="/fonts/google-sans/bold/latin.woff2">
+<link rel="preconnect" href="https://{{site.imgixDomain}}">
+
+<meta name="theme-color" content="#fff"/>
+
+{% if (noindex and noindex != "false") or draft -%}
+  <meta name="robots" content="noindex" />
+{%- endif %}
+{% if offline %}
+  <meta name="offline" content="true" />
+{%- endif %}
+
+{% Meta locale, page, renderData %}
+
+<link rel="manifest" href="/manifest.webmanifest" />
+{# Include default icon even though we have a manifest #}
+<link rel="shortcut icon" href="/images/favicon.ico">
+<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+<link rel="mask-icon" color="#0054ff" href="/images/safari-pinned-tab.svg">
+
+{# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+{% include 'partials/script-loader.njk' %}
+
+{# Private Aggregation API testing script #}
+{# The testing will run until mid-April 2023 #}
+{% set paaScript %}
+  loadScript('https://shared-storage-demo-content-producer.web.app/paa/scripts/private-aggregation-test.js', null);
+{% endset %}
+<script>{{ paaScript | minifyJs | cspHash | safe }}</script>
+
+{% include 'partials/analytics.njk' %}
+
+{# Dogfood document speculation rules origin trial #}
+<!-- web.dev speculation rules origin trial -->
+<meta http-equiv="origin-trial" content="AuLV+OPMY8vBf0KOuf+wa79CbvuL8StRjFn/uhNIe3iLaFNrTmpm3CkNoi7piGlUFOwiAId206QJVoty89TsiQsAAABfeyJvcmlnaW4iOiJodHRwczovL3dlYi5kZXY6NDQzIiwiZmVhdHVyZSI6IlNwZWN1bGF0aW9uUnVsZXNQcmVmZXRjaEZ1dHVyZSIsImV4cGlyeSI6MTcwOTY4MzE5OX0=">
+{# Exclude the /patterns/ section as a control #}
+{% set speculationRules %}
+{
+  "prerender": [
+   {
+      "source": "document",
+      "where": {
+        "and": [
+          {
+            "href_matches": "/*\\?*#*", "relative_to": "document"
+          },
+          {
+            "not": {
+              "href_matches": "/patterns/*\\?*#*",
+              "relative_to": "document"
+            }
+          }
+        ]
+      },
+      "eagerness": "moderate"
+    }
+  ]
+}
+{% endset %}
+<script type="speculationrules">{{ speculationRules | minifyJSON | cspHash | safe }}</script>
+
diff --git a/src/site/_includes/partials/header-course.njk b/src/site/_includes/partials/header-course.njk
new file mode 100644
index 00000000000..3387c4bbdea
--- /dev/null
+++ b/src/site/_includes/partials/header-course.njk
@@ -0,0 +1,10 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+<web-header class="cluster gutter-base" role="navigation" style="--course-background: url('{{ courseData.meta.background }}')">
+  <button data-open-drawer-button class="icon-button tooltip" data-alignment="right">
+    {{ icon('menu') }}
+    <span class="tooltip__content">{{ 'i18n.header.open_menu' | i18n(locale) }}</span>
+  </button>
+
+  <p class="font-brand text-size-2 color-mid-text">{{ courseData.meta.title | i18n(locale) }}</p>
+</web-header>
diff --git a/src/site/_includes/partials/item.njk b/src/site/_includes/partials/item.njk
index cf343907efd..3640162f2f8 100644
--- a/src/site/_includes/partials/item.njk
+++ b/src/site/_includes/partials/item.njk
@@ -1,19 +1,22 @@
-{% for slug in section.pathItems %}
-  {% set url = ['', lang, slug, ''] | join('/') %}
+{% for pathItem in section.pathItems %}
+  {% set url = ['', 'i18n', lang, pathItem, ''] | join('/') %}
   {% set item = url | findByUrl %}
-
-  {% if item %}
-
-    {% if item.data.draft %}
-      {# noop #}
-    {% else %}
-
-      <li class="w-path-listitem">
-        <a
-          class="w-path-link"
-          href="{{ item.data.canonicalUrl }}"
-        >
-          {{ item.data.title | md | safe }}
+  {# Add a default language fallback in case the article is not translated. #}
+  {% if not item %}
+    {% set url = ['', 'en', pathItem, ''] | join('/') %}
+    {% set item = url | findByUrl %}
+  {% endif %}
+  {% if pathItem.url %}
+    <li>
+      <a href="{{ pathItem.url }}">
+        {{ pathItem.title | trim }}
+      </a>
+    </li>
+  {% elif item %}
+    {% if not item.data.draft %}
+      <li>
+        <a href="{{ item.url | getDefaultUrl }}">
+          {{ item.data.title | trim | md({linkify: false}) | safe }}
         </a>
       </li>
     {% endif %}
diff --git a/src/site/_includes/partials/language-list.njk b/src/site/_includes/partials/language-list.njk
new file mode 100644
index 00000000000..8aec3406db0
--- /dev/null
+++ b/src/site/_includes/partials/language-list.njk
@@ -0,0 +1,18 @@
+<span class="post-signpost__title">
+  {% set languages = page | supportedLanguages(lang) %}
+
+  {% if (languages.length) %}
+    {{'i18n.post.available_in' | i18n(locale)}}:
+    {% for language in languages %}
+      {% set lang = language[0] %}
+      {% set langHref = language[1] %}
+      {% set langName = language[2] %}
+
+      <span>
+        <a href={{langHref}} class="post-signpost__link" translate="no" lang={{lang}}>{{langName}}</a>
+        {%- if not loop.last -%}, {%- endif -%} 
+        {% if loop.index === (languages.length - 1) %} and {% endif %}
+      </span>
+    {% endfor %}
+  {% endif %}
+</span>
diff --git a/src/site/_includes/partials/load-script-func.njk b/src/site/_includes/partials/load-script-func.njk
new file mode 100644
index 00000000000..e3f4a038c5e
--- /dev/null
+++ b/src/site/_includes/partials/load-script-func.njk
@@ -0,0 +1,27 @@
+
+{% set scriptLoader %}
+function loadScript(url, type) {
+  const s = document.createElement('script');
+  s.src = url;
+  s.onload = () => {
+    document.dispatchEvent(new CustomEvent('scriptLoaded', {detail: {url}}));
+  }
+  if (type) {
+    s.type = type;
+  }
+  if (type === 'module') {
+    s.async = false; // Preserve load order.
+    const pre = document.createElement('link');
+    pre.rel = 'modulepreload';
+    pre.href = url;
+    document.head.append(pre);
+    // We use DOMContentLoaded as the loader script is running sync, and inserting a module script here doesn't defer. This brings back normal type="module" behavior.
+    window.addEventListener('DOMContentLoaded', () => {
+      document.head.append(s);
+    });
+  } else {
+    document.head.append(s);
+  }
+}
+{% endset %}
+<script>{{ scriptLoader | minifyJs | cspHash | safe }}</script>
diff --git a/src/site/_includes/partials/navigation-drawer-course.njk b/src/site/_includes/partials/navigation-drawer-course.njk
new file mode 100644
index 00000000000..9309ec3c256
--- /dev/null
+++ b/src/site/_includes/partials/navigation-drawer-course.njk
@@ -0,0 +1,81 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+{% macro renderItem(item, depth) %}
+  {%- if item.title -%}
+    {%- set title = (item.title | i18n(locale)) or '' -%}
+  {%- else -%}
+    {%- set title = item.data.title or '' -%}
+  {%- endif -%}
+
+  {% if item.url %}
+    {# The isNew flag is used to display a 'NEW' badge next to content. #}
+    {% set isNew = false %}
+    {% set isPlaceholder= false %}
+    {# Check to make sure the content was published after the course's #}
+    {# initial launch date (so everything doesn't say 'NEW' when we #}
+    {# first launch a course). #}
+    {% if item.data.date > courseData.meta.date %}
+      {# Only show the 'NEW' badge if content is less than thirty days old. #}
+      {% set isNew = item.data.date | isNewContent %}
+    {% endif %}
+    {% if item.data.placeholder %}
+      {# Set disabled style #}
+      {% set isDisabledClass = 'is-placeholder' %}
+    {% endif %}
+    <a class="repel {{isDisabledClass}}" {% if item.url == page.url %}aria-current="page"{% endif %} {% if item.data.placeholder != true %} href="{{ item.url }}" {% endif %}>
+      <span class="cluster">
+        <span class="stack-nav__meta">{{ item.counter }}</span>
+        <span>{{ title }}</span>
+      </span>
+      <span class="cluster">
+        {% if isNew %}
+          <span class="stack-nav__meta tt-upper color-action-text">{{ 'i18n.common.new' | i18n(locale) }}</span>
+        {% endif %}
+        {% if item.data.placeholder %}
+          <span class="stack-nav__meta tt-upper color-action-text">{{ 'Coming Soon' }}</span>
+        {% endif %}
+        {{ icon('done') }}
+      </span>
+    </a>
+  {% elif title %}
+    {# This is just a heading for children. #}
+    <h3 class="stack-nav__heading">{{ title }}</h3>
+  {% endif %}
+
+  {# Renders any nested children. #}
+  {% for c in item.children %}
+    {{ renderItem(c, depth + 1) }}
+  {% endfor %}
+{% endmacro %}
+
+<web-navigation-drawer type="standard">
+  <nav data-drawer-container class="course__drawer flow">
+    <div class="course__header" style="--course-background: url('{{ courseData.meta.background }}')">
+      <button data-drawer-close-button class="icon-button tooltip gap-top-base color-dark-text" data-alignment="right">
+        {{ icon('close') }}
+        <span class="tooltip__content">{{ 'i18n.common.close' | i18n(locale) }}</span>
+      </button>
+
+      <div class="course__side-title">
+        {% if courseData.meta.logo %}
+          {# The course logo is stored in src/images, but the svg macro uses
+          Nunjuck's include syntax. So we need to give it a relative path from
+          src/site/_includes to src/images. #}
+          {% set logo = helpers.join('../..', courseData.meta.logo) %}
+          {{ svg(logo, {label: courseData.meta.title | i18n(locale)}) }}
+        {% endif %}
+      </div>
+    </div>
+    <web-search class="course__search" results-id="search-course-results" tag="{{ searchTag }}" i18n="{{ i18n.search | dump }}"></web-search>
+    <div class="over-scroll">
+      <course-links data-current="{{ page.url }}" data-course-key="{{ projectKey }}">
+        <ul class="stack-nav">
+        {% for item in pageNavigation.tree %}
+          <li>{{ renderItem(item, 0) }}</li>
+        {% endfor %}
+        </ul>
+      </course-links>
+    </div>
+    <web-course-search-results class="course__search-results" id="search-course-results"></web-course-search-results>
+  </nav>
+</web-navigation-drawer>
diff --git a/src/site/_includes/partials/newsletter.njk b/src/site/_includes/partials/newsletter.njk
deleted file mode 100644
index f5aef60c9c5..00000000000
--- a/src/site/_includes/partials/newsletter.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-<web-newsletter>
-  <iframe frameborder="0" scrolling="yes" width="100%" height="1000px" srcdoc="{{ content }}"></iframe>
-</web-newsletter>
diff --git a/src/site/_includes/partials/offline.njk b/src/site/_includes/partials/offline.njk
new file mode 100644
index 00000000000..1df203582a4
--- /dev/null
+++ b/src/site/_includes/partials/offline.njk
@@ -0,0 +1,8 @@
+<header class="region">
+  <div class="wrapper">
+    <div class="headline all-center flow">
+      <h1 class="headline__title">{{ title }}</h1>
+      <p>{{ i18n.no_connection }} 📶</p>
+    </div>
+  </div>
+</header>
\ No newline at end of file
diff --git a/src/site/_includes/partials/paged.njk b/src/site/_includes/partials/paged.njk
index bd867381ffc..891aef9f55c 100644
--- a/src/site/_includes/partials/paged.njk
+++ b/src/site/_includes/partials/paged.njk
@@ -1,9 +1,27 @@
-<section class="w-grid">
-  <div class="w-grid__columns w-grid__columns--three" role="list">
+{% from 'macros/post-card.njk' import postCard with context %}
+
+<div class="region">
+  <div class="wrapper auto-grid">
     {% for element in paged.elements %}
-      {% PostCard element %}
+      {% set data = element.data %}
+      {# The `alt` property fallsback onto the element's
+      title in cases like authors or tags which do not have an alt. #}
+      {{ postCard({
+        title: data.title,
+        subhead: data.subhead,
+        url: element.url,
+        thumbnail: data.thumbnail or data.hero,
+        alt: data.alt or data.title or '',
+        authors: data.authors,
+        tags: data.tags,
+        date: data.date,
+        updated: data.updated,
+        draft: data.draft
+      }) }}
     {% endfor %}
   </div>
-</section>
 
-{% include 'pagination.njk' %}
+  <div class="wrapper gap-top-size-3">
+    {% include "partials/pagination.njk" %}
+  </div>
+</div>
diff --git a/src/site/_includes/partials/pagination.njk b/src/site/_includes/partials/pagination.njk
new file mode 100644
index 00000000000..1c3bdbbe2cb
--- /dev/null
+++ b/src/site/_includes/partials/pagination.njk
@@ -0,0 +1,17 @@
+{% set currentPage = (paged.index or 0) + 1 %}
+
+<nav class="pagination" aria-label="pagination">
+  <div class="pagination__container">
+    {% if paged.index > 0 %}
+      <a class="button" href="{{ paged.href }}{% if paged.index != 1 %}{{ paged.index }}{% endif %}">{{ 'i18n.common.prev' | i18n(locale) }}</a>
+    {% endif %}
+  </div>
+  <div class="pagination__status" role="presentation" aria-hidden="true">
+    Page {{ currentPage }} of {{ paged.pages }}
+  </div>
+  <div class="pagination__container">
+    {% if currentPage < paged.pages %}
+      <a class="button" href="{{ paged.href }}{{ paged.index + 2 }}">{{ 'i18n.common.next' | i18n(locale) }}</a>
+    {% endif %}
+  </div>
+</nav>
diff --git a/src/site/_includes/partials/picked-case-study.njk b/src/site/_includes/partials/picked-case-study.njk
new file mode 100644
index 00000000000..a06ecd704aa
--- /dev/null
+++ b/src/site/_includes/partials/picked-case-study.njk
@@ -0,0 +1,17 @@
+{% set pickedItem = null %}
+
+{% if pickedCaseStudyUrl %}
+  {% set pickedItem = pickedCaseStudyUrl | findByUrl %}
+{% endif %}
+
+{% if pickedItem %}
+<a class="feature-card" href="{{ pickedItem.url }}" data-treatment="bg-image">
+  <span class="feature-card__eyebrow">Case study</span>
+  <h3 class="feature-card__title">{{ pickedItem.data.title }}</h3>
+  {% if featuredCard.video %}
+  {% Img src=pickedItem.data.hero, alt="", width="570", height="330", class="feature-card__background", fetchpriority="high"%}
+  {% else %}
+  {% Img src=pickedItem.data.hero, alt="", width="570", height="330", class="feature-card__background", loading="eager" %}
+  {% endif %}
+</a>
+{% endif %}
diff --git a/src/site/_includes/partials/post-credits.njk b/src/site/_includes/partials/post-credits.njk
new file mode 100644
index 00000000000..b78adff09bf
--- /dev/null
+++ b/src/site/_includes/partials/post-credits.njk
@@ -0,0 +1,37 @@
+<div class="post-credits">
+  {% if editors %}
+  <div class="post-credits__editors">
+    <h3>{{ 'i18n.post.editors' | i18n(locale) }}</h3>
+      {% for editor in editors %}
+        <a href="{{collections.authors[editor].href}}">{{collections.authors[editor].title | i18n(locale)}}</a>
+      {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if credits %}
+  <div class="post-credits__credits">
+    <h3>{{ 'i18n.post.credits' | i18n(locale) }}</h3>
+      {% for credit in credits %}
+        <a href="{{credit.href}}">{{credit.name}}</a>
+      {% endfor %}
+  </div>
+  {% endif %}
+  
+  {% if updated or date %}
+  <div>
+    <h3>{{ 'i18n.post.last_updated' | i18n(locale) }}</h3>
+    <span>
+      {% if updated %}
+        <time>{{ updated | prettyDate }}</time>
+      {% else %}
+        <time>{{ date | prettyDate }}</time>
+      {% endif %}
+    </span>
+    —
+    <a
+      href="{{ page.inputPath | githubLink }}"
+    >
+      {{ 'i18n.post.improve_article' | i18n(locale) }}
+    </a></div>
+    {% endif %}
+</div>
diff --git a/src/site/_includes/partials/post.njk b/src/site/_includes/partials/post.njk
index cc32d2f05e8..392c90d6280 100644
--- a/src/site/_includes/partials/post.njk
+++ b/src/site/_includes/partials/post.njk
@@ -1,122 +1,201 @@
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="guide-landing-page">
+{% from 'macros/tag-chips.njk' import tagChips with context %}
+{% from 'macros/authors.njk' import authorsMacro with context %}
+
+{#
+  Grab the ToC contents for headings ToC. This powers the list of headings
+  that appears on the right-hand side of the page. Unfortunately our use of
+  the word 'toc' is a bit overloaded :P
+#}
+{% set tocContents %}
+  {{- content | toc | safe -}}
+{% endset %}
+{% set tocTitle = 'i18n.toc.on_this_page' | i18n(locale) %}
+
+{% if hero %}
+  {% Img src=hero, alt=alt or '', fetchpriority='high', class='hero-image', height='480', width='1600', sizes='100vw' %}
+{% endif %}
+
+<div class="post wrapper" data-flush>
   {% if path === undefined  %}
     {% set postPaths = page | getPaths %}
     {# Use first found path as a default path. #}
     {% set path = paths[postPaths[0]] %}
   {% endif %}
+  {% set safeTitle = title | trim | md({linkify: false}) | safe %}
 
-  {% if hero %}
-    {% Hero {
-      hero: hero,
-      alt: alt,
-      heroPosition: hero_position,
-      heroFit: hero_fit
-    } %}
-  {% endif %}
+  <div class="sidebar region flex-align-start flex-dir-rev flex-wrap-no">
+    {% include 'partials/toc-side.njk' %}
+    {#
+      TODO: The legacy rollout task can be removed
+      when the design system has been full rolled-out across the site
+    #}
+    <article class="prose legacy-rollout">
+      <header class="flow gap-bottom-size-3">
+        {% if 'blog' in tags or crumbs %}
+          <nav class="breadcrumbs" aria-label="breadcrumbs">
+            <ul class="breadcrumbs__list" role="list">
+              <li>
+                <a
+                  class="gc-analytics-event"
+                  data-category="web.dev"
+                  data-label="post, home breadcrumb"
+                  data-action="click"
+                  href="/"
+                >
+                  {{site.titleVariation}}
+                </a>
+              </li>
+              {% if 'blog' in tags %}
+              <li>
+                <a
+                  class="gc-analytics-event"
+                  data-category="web.dev"
+                  data-label="post, path breadcrumb"
+                  data-action="click"
+                  href="/blog"
+                >
+                  {{ 'i18n.search.all_articles' | i18n(locale) }}
+                </a>
+              </li>
+              {% elif crumbs %}
+                {% for crumb in crumbs %}
+                  <li>
+                    <a
+                      class="gc-analytics-event"
+                      data-category="web.dev"
+                      data-label="post, path breadcrumb"
+                      data-action="click"
+                      href="{{crumb[1]}}"
+                    >
+                      {{crumb[0]}}
+                    </a>
+                  </li>
+                {% endfor %}
+              {% endif %}
+            </ul>
+          </nav>
+        {% endif %}
 
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    <share-action authors="{{ authors | expandAuthors(collections.authors) }}"
-      class="gc-analytics-event w-actions__fab w-actions__fab--share"
-      data-category="web.dev"
-      data-label="share"
-      data-action="click"
-      data-icon="share"
-      tabindex="0"
-      role="button"
-    >
-      <span>Share</span>
-    </share-action>
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
+        <h1>{{ safeTitle }}</h1>
+        {% if is_baseline %}
+          <details class="baseline flow">
+            <summary class="color-core-text text-size-1">
+              <div class="switcher">
+                <div class="baseline__title">
+                  <span class="baseline__icon">
+                  {% include "icons/baseline.svg" %}
+                  </span>
+                  <p>
+                    <span class="baseline__keyword">Baseline: </span>{{ 'i18n.baseline.widely_supported' | i18n((locale)) }}
+                  </p>
+                </div>
+                <div>
+                    <span class="baseline__browser">
+                      <img alt="Chrome 74" src="/images/icons/chrome.svg"><img alt="Chrome 74" src="/images/icons/edge.svg"></span>
+                      <span class="baseline__browser"><img alt="Chrome 74" src="/images/icons/firefox.svg"></span>
+                      <span class="baseline__browser"><img alt="Chrome 74" src="/images/icons/safari.svg"></span>
+                </div>
+              </div>
+            </summary>
+            <p class="text-size-0">
+              {{ 'i18n.baseline.definition' | i18n((locale)) }}
+            </p>
+            <p><a href="http://web.dev/baseline">{{ 'i18n.baseline.learn_more' | i18n((locale)) }}</a></p>
+          </details>
+        {% endif %}
+        {% if subhead | length %}
+          <p class="color-mid-text flow-space-base">
+            {{ subhead | md | safe }}
+          </p>
+        {% endif %}
 
-  <div class="w-layout-container--narrow w-post-content">
-    <header class="w-article-header">
-      {% if 'blog' in tags %}
-        <div class="w-post-breadcrumbs">
-          {% Breadcrumbs {title: 'All articles', slug: 'blog'} %}
+        {% if date %}
+          <div class="flow-space-size-1 color-mid-text text-size-0">
+            <time>{{date | prettyDate}}</time>
+            {% if updated %} — {{ 'i18n.common.updated' | i18n((locale)) }} <time>{{ updated | prettyDate }}</time> {% endif %}
+          </div>
+        {% endif %}
+
+        <div class="flow">
+          {% include 'partials/language-list.njk' %}
+        </div>
+
+        <div class="flow">
+          {% include 'partials/sign-post.njk' %}
+        </div>
+
+        {% if authors %}
+          {{ authorsMacro() }}
+        {% endif %}
+      </header>
+
+      {% if draft and site.env === 'dev' %}
+        <div class="banner bg-state-warn-bg color-core-text">
+          <p><strong>{{ 'i18n.post.is_draft' | i18n(locale) }}</strong></p>
         </div>
       {% endif %}
 
-      <h1 class="w-article-header__headline">{{ title | md | safe }}</h1>
-      {% if subhead %}
-        <p class="w-article-header__subhead w-mb--non">
-          {{ subhead | md | safe }}
-        </p>
+      {% include 'partials/toc-inner.njk' %}
+
+      {{ content | safe }}
+
+      {% if stack_overflow_tag %}
+        {% StackOverflow stack_overflow_tag %}
       {% endif %}
 
-      {% if date %}
-        <div class="w-author__published">
-          <time>{{date | prettyDate}}</time>
-          {% if updated %} <span class="w-author__separator">•</span> Updated <time>{{ updated | prettyDate }}</time> {% endif %}
+      <nav class="cluster gutter-base flow-space-size-2" aria-label="tags">
+        {% for tagKey in tags or [] %}
+          {% if tagKey in collections.tags %}
+            {% set tag = collections.tags[tagKey] %}
+            <a class="pill" href="{{tag.url}}">{{tag.overrideTitle or tag.title | i18n(locale)}}</a>
+          {% endif %}
+        {% endfor %}
+      </nav>
+
+      {% include 'partials/post-credits.njk' %}
+
+      {% if codelabs %}
+        <div class="flow-space-size-2">
+          {% CodelabsCallout codelabs, lang %}
         </div>
       {% endif %}
-      {% SignPosts page.fileSlug %}
-
-      {% if authors %}
-        <div class="w-authors w-mt--xl w-pt--sm">
-          {% for author in authors %}
-            {% Author {
-              id: author,
-              author: collections.authors[author],
-              showSocialMedia: true}
-            %}
-          {% endfor %}
-        </div>
+
+      {% if 'blog' in tags %}
+        {% set backUrl = '/blog' %}
+        {% set backLabel = 'Return to all articles' %}
+      {% elif path %}
+        {% set backUrl = '/' + path.slug %}
+        {% set backLabel = 'Return to all articles' %}
       {% endif %}
-    </header>
 
-    {% if draft and site.env === 'dev' %}
-      <div class="w-banner w-banner--warning w-banner--body">
-        🚨 This post is a draft! 🚨
+      {% if backLabel and backUrl %}
+        <div class="flow-space-size-2">
+          <a href="{{ backUrl }}" class="button" data-type="secondary">
+            {% include 'icons/arrow-back.svg' %}
+            <span>{{ backLabel }}</span>
+          </a>
+        </div>
+      {% endif %}
+      <div class="docked-actions flow flow-space-base">
+        <div>
+          <share-action class="gc-analytics-event fab"
+            authors="{{ authors | expandAuthors(collections.authors, lang) }}"
+            data-category="web.dev"
+            data-label="share"
+            data-action="click"
+            data-type="primary"
+            data-icon="share"
+            tabindex="0"
+            role="button"
+          >
+            {% include "icons/share.svg" %}
+            <span class="fab__label">{{ 'i18n.common.share' | i18n(locale) }}</span>
+          </share-action>
+        </div>
+        <div>
+          {% include 'partials/subscribe-action.njk' %}
+        </div>
       </div>
-    {% endif %}
-
-    {{ content | safe }}
-
-    <div class="w-chips">
-      {% for tag in tags | findTags %}
-        <a class="w-chip" href="{{ tag.href }}">{{ tag.title }}</a>
-      {% endfor %}
-    </div>
-
-    <div class="w-post-github-link w-mt--l w-mb--l">
-      <span class="w-mr--sm">
-        {% if updated %}
-        Last updated: <time>{{ updated | prettyDate }}</time>
-        {% else %}
-        Last updated: <time>{{ date | prettyDate }}</time>
-        {% endif %}
-      </span>
-      <a
-        href="{{ page.inputPath | githubLink }}"
-      >
-        Improve article
-      </a>
-      {# Hide suggest translation for now. #} {#
-      <a href="#">Suggest translation</a> #}
-    </div>
-
-    {% if codelabs %}
-      {% CodelabsCallout codelabs, lang %}
-    {% endif %}
-
-    <web-feedback></web-feedback>
+    </article>
   </div>
-
-  {% if 'blog' in tags %}
-    {# Find next blog post #}
-    {% ArticleNavigation {
-      back: '/blog',
-      backLabel: 'Return to all articles'
-    } %}
-  {% elif path %}
-    {# Find next item in this learning path #}
-    {% ArticleNavigation {
-      back: '/' + path.slug,
-      backLabel: 'Return to all articles'
-    } %}
-  {% endif %}
 </div>
diff --git a/src/site/_includes/partials/script-loader.njk b/src/site/_includes/partials/script-loader.njk
new file mode 100644
index 00000000000..09a072c5181
--- /dev/null
+++ b/src/site/_includes/partials/script-loader.njk
@@ -0,0 +1,46 @@
+{% for item in inlineScripts %}
+  {% set inlineScript %}
+    {% includeRaw item %}
+  {% endset %}
+  <script>{{ inlineScript | minifyJs | cspHash | safe }}</script>
+{% endfor %}
+
+
+{# Sourced scripts cannot be authorized by a CSP hash individually, so we need
+to use an inline script loader for any sourced scripts. #}
+{# This works because the CSP includes the 'strict-dynamic' keyword, allowing
+the children of an authorized script to run. #}
+{% include 'partials/load-script-func.njk' %}
+{% set loadScripts %}
+  loadScript('{{ helpers.hashForProd('/js/app.js') }}', 'module');
+
+  {# Add a facility for pages to declare an array of script paths. #}
+  {# If no scripts are declared we will use the default page script. #}
+  {# default.js loads the basic set of custom elements that all pages need. #}
+
+  {# Dispatch event to notify that all pageScripts got loaded. #}
+  {% if pageScripts %}
+    let pageScripts = {{ pageScripts | dump | safe }};
+    document.addEventListener('scriptLoaded', (e) => {
+      const source = e.detail.url.split('?')[0]
+      const index = pageScripts.indexOf(source);
+      if (index > -1) {
+        pageScripts.splice(index, 1);
+      }
+      if (pageScripts.length === 0) {
+        document.dispatchEvent(new CustomEvent('pageScriptsLoaded'));
+      }
+    })
+  {% endif %}
+  {% for item in pageScripts %}
+    loadScript('{{ helpers.hashForProd(item) }}', 'module');
+  {% else %}
+    loadScript('{{ helpers.hashForProd('/js/default.js') }}', 'module');
+  {% endfor %}
+
+  {% for item in externalScripts %}
+    loadScript('{{item}}', null);
+  {% endfor %}
+{% endset %}
+<script>{{ loadScripts | minifyJs | cspHash | safe }}</script>
+
diff --git a/src/site/_includes/partials/sign-post.njk b/src/site/_includes/partials/sign-post.njk
new file mode 100644
index 00000000000..9dafc57f4a0
--- /dev/null
+++ b/src/site/_includes/partials/sign-post.njk
@@ -0,0 +1,21 @@
+{% set postPaths = postToPaths[slug] %}
+
+{% if postPaths %}
+  <div class="flow post-signpost">
+    {% if postPaths.length %}
+      <span class="post-signpost__title">
+        {{'i18n.post.appears_in' | i18n(locale)}}:
+      </span>
+
+      {% for pathName in postPaths %}
+        {% set postHref = '/' + paths[pathName].slug + '/' %}
+
+        <a href={{postHref}} class="post-signpost__link">{{paths[pathName].title | i18n(locale)}}</a>
+
+        {% if not loop.last %}
+          <span class="post-signpost__divider"> | </span>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/src/site/_includes/partials/site-footer.njk b/src/site/_includes/partials/site-footer.njk
new file mode 100644
index 00000000000..e7cfb734252
--- /dev/null
+++ b/src/site/_includes/partials/site-footer.njk
@@ -0,0 +1,150 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+<footer class="site-footer" role="contentinfo">
+  <nav class="site-footer__primary-nav auto-grid" aria-label="footer navigation">
+    <div class="site-footer__primary-nav-content">
+      <a href="/" class="site-footer__brand brand">
+        {{ svg('../../images/logo.svg', {label: 'web.dev'}) }}
+      </a>
+      <p class="text-size-0">
+        {{ 'i18n.footer.mission' | i18n(locale) }}
+      </p>
+    </div>
+    <div class="site-footer__primary-nav-links auto-grid">
+      <div>
+        <h3 class="text-size-2 color-mid-text">Contribute</h3>
+        <ul class="site-footer__linkbox-list" role="list">
+          <li>
+            <a href="https://github.com/GoogleChrome/web.dev/issues/new?assignees=&labels=bug&template=bug_report.md&title="
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
+              {{ 'i18n.footer.file_a_bug' | i18n(locale) }}
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/googlechrome/web.dev"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
+              {{ 'i18n.footer.view_source' | i18n(locale) }}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <h3 class="text-size-2 color-mid-text">{{ 'i18n.footer.related_content' | i18n(locale) }}</h3>
+        <ul class="site-footer__linkbox-list" role="list">
+            <li>
+            <a href="https://developer.chrome.com/"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
+              {{ 'i18n.footer.developer_chrome_com' | i18n(locale) }}
+            </a>
+          </li>
+          <li>
+            <a href="https://blog.chromium.org/"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
+              {{ 'i18n.footer.chrome_updates' | i18n(locale) }}
+            </a>
+          </li>
+          <li>
+            <a href="/tags/case-study/"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)">
+              {{ 'i18n.footer.case_studies' | i18n(locale) }}
+            </a>
+          </li>
+          <li>
+            <a href="/podcasts/"
+              data-category="Podcasts" data-label="Footer Link (index 5)">
+              {{ 'i18n.footer.podcasts' | i18n(locale) }}
+            </a>
+          </li>
+          <li>
+            <a href="/shows/"
+              data-category="Shows" data-label="Footer Link (index 6)">
+              {{ 'i18n.footer.shows' | i18n(locale) }}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <h3 class="text-size-2 color-mid-text">{{ 'i18n.footer.connect' | i18n(locale) }}</h3>
+        <ul class="site-footer__linkbox-list" role="list">
+          <li>
+            <a href="https://www.twitter.com/ChromiumDev"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
+              Twitter
+            </a>
+          </li>
+          <li>
+            <a href="https://www.youtube.com/user/ChromeDevelopers"
+              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
+              YouTube
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <nav class="site-footer__brand-nav repel" aria-label="Google developers">
+    <ul class="cluster" role="list">
+      <li>
+        <a href="https://developers.google.com/" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link">
+          <img loading="lazy" width="185" height="33" class="site-footer__utility-logo" src="/images/lockup-color.png"
+            alt="Google Developers" />
+        </a>
+      </li>
+      <li>
+        <a href="https://developer.chrome.com/"
+          data-category="Site-Wide Custom Events" data-label="Footer Chrome Link">
+          Chrome
+        </a>
+      </li>
+      <li>
+        <a href="https://firebase.google.com/" data-category="Site-Wide Custom Events"
+          data-label="Footer Firebase Link">
+          Firebase
+        </a>
+      </li>
+      <li>
+        <a href="https://cloud.google.com/" data-category="Site-Wide Custom Events"
+          data-label="Footer Google Cloud Platform Link">
+          Google Cloud Platform
+        </a>
+      </li>
+      <li>
+        <a href="https://developers.google.com/products"
+          data-category="Site-Wide Custom Events" data-label="Footer All products Link">
+          {{ 'i18n.footer.all_products' | i18n(locale) }}
+        </a>
+      </li>
+    </ul>
+    <div class="cluster">
+      {% include "partials/standard-theme-toggle.njk" %}
+      <web-language-select current="{{ lang }}"></web-language-select>
+    </div>
+  </nav>
+  <nav class="site-footer__misc-links" aria-label="terms and policies">
+    <ul class="cluster" role="list">
+      <li>
+        <a href="https://policies.google.com/" data-category="Site-Wide Custom Events"
+          data-label="Footer Terms and Privacy link">
+          {{ 'i18n.footer.terms_and_privacy' | i18n(locale) }}
+        </a>
+      </li>
+      <li>
+        <a href="/community-guidelines/" data-category="Site-Wide Custom Events"
+          data-label="Footer Community Guidelines link">
+          {{ 'i18n.footer.community_guidelines' | i18n(locale) }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <p class="gap-top-size-2 text-size-0">
+    Except as otherwise noted, the content of this page is licensed
+    under the
+    <a href="https://creativecommons.org/licenses/by/4.0/">
+    Creative Commons Attribution 4.0 License</a>,
+    and code samples are licensed under the
+    <a href="https://www.apache.org/licenses/LICENSE-2.0">
+    Apache 2.0 License</a>. For details, see the
+    <a href="https://developers.google.com/terms/site-policies">
+    Google Developers Site Policies</a>.
+  </p>
+</footer>
diff --git a/src/site/_includes/partials/site-header.njk b/src/site/_includes/partials/site-header.njk
new file mode 100644
index 00000000000..abeef25ac26
--- /dev/null
+++ b/src/site/_includes/partials/site-header.njk
@@ -0,0 +1,73 @@
+{% from 'macros/icon.njk' import icon, svg with context %}
+
+<web-header role="banner" class="site-header">
+  <div class="cluster gutter-base">
+    <button class="icon-button tooltip color-core-text md:hidden-yes" aria-labelledby="menu-button-toolip" data-open-drawer-button data-alignment="right" role="tooltip">
+      {% include "icons/menu.svg" %}
+      <span class="tooltip__content" id="menu-button-tooltip">Open menu</span>
+    </button>
+    <a href="/" class="site-header__brand brand">
+      {{ svg('../../images/logo.svg', {label: 'web.dev'}) }}
+    </a>
+  </div>
+  <web-navigation-drawer type="standard">
+    <nav class="site-header__nav" aria-label="main navigation" data-drawer-container>
+      <a
+        class="site-header__link"
+        href="/about/"
+        data-category="Site-Wide Custom Events"
+        data-label="Tab: About" 
+        {% if page.url === '/about/' %}aria-current="page"{% endif %}>
+        {{ 'i18n.header.about' | i18n(locale) }}
+      </a>
+      <a
+        class="site-header__link"
+        href="/blog/"
+        data-category="Site-Wide Custom Events"
+        data-label="Tab: Blog"
+        {% if page.url === '/blog/' %}aria-current="page"{% endif %}>
+        {{ 'i18n.header.blog' | i18n(locale) }}
+      </a>
+      <a
+        class="site-header__link"
+        href="/learn/" data-category="Site-Wide Custom Events"
+        data-label="Tab: Learn"
+        {% if page.url === '/learn/' %}aria-current="page"{% endif %}>
+          {{ 'i18n.header.learn' | i18n(locale) }}
+      </a>
+      <a
+        class="site-header__link"
+        href="/explore/" data-category="Site-Wide Custom Events"
+        data-label="Tab: Explore"
+        {% if page.url === '/explore/' %}aria-current="page"{% endif %}>
+          {{ 'i18n.header.explore' | i18n(locale) }}
+      </a>
+      <a
+        class="site-header__link"
+        href="/patterns/"
+        data-category="Site-Wide Custom Events"
+        data-label="Tab: Patterns"
+        {% if page.url === '/patterns/' %}aria-current="page"{% endif %}>
+        {{ 'i18n.header.patterns' | i18n(locale) }}
+      </a>
+      <a
+        class="site-header__link"
+        href="/tags/case-study/"
+        data-category="Site-Wide Custom Events"
+        data-label="Tab: Case Studies"
+        {% if page.url === '/tags/case-study/' %}aria-current="page"{% endif %}>
+        {{ 'i18n.header.case_studies' | i18n(locale) }}
+      </a>
+      <button class="icon-button tooltip color-core-text md:hidden-yes" data-drawer-close-button>
+        {{ icon('close') }}
+        <span class="tooltip__content">{{ 'i18n.common.close' | i18n(locale) }}</span>
+      </button>
+    </nav>
+  </web-navigation-drawer>
+  <div class="site-header__actions cluster">
+    <div class="site-header__search">
+      <web-search results-id="search-main-results" i18n="{{ i18n.search | dump }}"></web-search>
+      <web-search-results id="search-main-results"></web-search-results>
+    </div>
+  </div>
+</web-header>
diff --git a/src/site/_includes/partials/standard-theme-toggle.njk b/src/site/_includes/partials/standard-theme-toggle.njk
new file mode 100644
index 00000000000..ef98f137fea
--- /dev/null
+++ b/src/site/_includes/partials/standard-theme-toggle.njk
@@ -0,0 +1,9 @@
+<theme-toggle>
+  <label class="toggle-switch" for="theme-toggle">
+    <span class="toggle-switch__label ">Dark theme</span>
+    <input type="checkbox" role="switch" class="toggle-switch__input" id="theme-toggle" />
+    <div class="toggle-switch__decor focus-ring" aria-hidden="true">
+      <div class="toggle-switch__thumb"></div>
+    </div>
+  </label>
+</theme-toggle>
\ No newline at end of file
diff --git a/src/site/_includes/partials/subscribe-action.njk b/src/site/_includes/partials/subscribe-action.njk
index 50045e4cdd0..be931307d34 100644
--- a/src/site/_includes/partials/subscribe-action.njk
+++ b/src/site/_includes/partials/subscribe-action.njk
@@ -1,3 +1,4 @@
-<a class="w-actions__fab w-actions__fab--subscribe gc-analytics-event" data-category="web.dev" data-label="view-subscribe" data-action="click" href="/newsletter/">
-  <span>Subscribe</span>
+<a class="fab gc-analytics-event" data-type="primary" data-category="web.dev" data-label="view-subscribe" data-action="click" href="/newsletter/">
+  {% include "icons/subscribe.svg" %}
+  <span class="fab__label">{{ 'i18n.subscribe.subscribe' | i18n(locale) }}</span>
 </a>
diff --git a/src/site/_includes/partials/subscribe.njk b/src/site/_includes/partials/subscribe.njk
index da13a4bd4fd..fbcb1733523 100644
--- a/src/site/_includes/partials/subscribe.njk
+++ b/src/site/_includes/partials/subscribe.njk
@@ -1,34 +1,30 @@
-<web-subscribe class="w-pt--l w-pb--l">
-  <div class="w-subscribe">
-    <div class="w-display--flex w-justify-content--center">
-      <h1 class="w-text--center">{{ subscribeTitle | default('Developer Newsletter', false) }}</h1>
+<web-subscribe class="unresolved">
+  <div class="wrapper">
+    <div class="headline all-center flow">
+      <h2 class="headline__title">{{ subscribeTitle | default('Developer Newsletter', false) }}</h2>
+      <p class="subscribe__message">{{ subscribeNotes | default('Get the latest news, techniques and updates straight to your inbox.', false) }}</p>
     </div>
-    <div class="w-display--flex w-justify-content--center">
-      <div class="w-subscribe--padded">
-        <p class="w-text--center w-mt--non w-subscribe__message">{{ subscribeNotes | default('Get the latest news, techniques and updates straight to your inbox.', false) }}</p>
-      </div>
-    </div>
-    <form class="w-subscribe__form" action="{{ site.subscribeForm }}" method="post">
-      <div class="w-subscribe__fields">
-        <div class="w-subscribe__field">
-          <label class="w-visually-hidden" for="sub-firstname">First name</label>
-          <input id="sub-firstname" name="FirstName" placeholder="First Name" required
+    <form class="flow gap-top-size-2" action="{{ site.subscribeForm }}" method="post">
+      <div class="switcher">
+        <div>
+          <label class="visually-hidden" for="sub-firstname">{{ 'i18n.subscribe.first_name' | i18n(locale) }}</label>
+          <input id="sub-firstname" name="FirstName" placeholder="{{ 'i18n.subscribe.first_name' | i18n(locale) }}" required
             type="text" />
         </div>
-        <div class="w-subscribe__field">
-          <label class="w-visually-hidden" for="sub-lastname">Last name</label>
-          <input id="sub-lastname" name="LastName" placeholder="Last Name" required
+        <div>
+          <label class="visually-hidden" for="sub-lastname">{{ 'i18n.subscribe.last_name' | i18n(locale) }}</label>
+          <input id="sub-lastname" name="LastName" placeholder="{{ 'i18n.subscribe.last_name' | i18n(locale) }}" required
             type="text" />
         </div>
       </div>
-      <div class="w-subscribe__field w-display--flex">
-        <label class="w-visually-hidden" for="sub-email">Your Email</label>
-        <input id="sub-email" name="EmailAddress" placeholder="Your Email" required
+      <div>
+        <label class="visually-hidden" for="sub-email">{{ 'i18n.subscribe.your_email' | i18n(locale) }}</label>
+        <input id="sub-email" name="EmailAddress" placeholder="{{ 'i18n.subscribe.your_email' | i18n(locale) }}" required
           type="email" />
       </div>
-      <div class="w-subscribe__field w-display--flex">
-        <label class="w-visually-hidden" for="sub-country">Country</label>
-        <select class="w-subscribe__select w-select--full-width" id="sub-country" name="Country" required>
+      <div>
+        <label class="visually-hidden" for="sub-country">{{ 'i18n.subscribe.country' | i18n(locale) }}</label>
+        <select id="sub-country" name="Country" required>
           {% for country in countries %}
             {% if country[1] === "United States" %}
               <option selected value="{{country[0]}}">{{country[1]}}</option>
@@ -38,43 +34,53 @@
           {% endfor %}
         </select>
       </div>
-      <div class="w-subscribe__field w-text--center w-display--flex">
-        <span class="w-subscribe__notice">Don't worry, no spam here! Your information will only be used for web.dev and Chrome related updates and our emails are typically no more than 1-2 times a month. You can unsubscribe anytime.</span>
+      <div class="all-center">
+        <p class="color-mid-text">
+          {{ 'i18n.subscribe.notice' | i18n(locale) }}
+        </p>
       </div>
-      <div class="w-display--flex w-justify-content--center">
-        <div class="w-subscribe__field w-subscribe--padded">
-          <div class="w-display--inline-flex">
-            <input id="sub-newsletter" name="WebDevNewsletter" required value="Unconfirmed" class="w-checkbox" type="checkbox" />
-            <label for="sub-newsletter" class="w-ml--std w-text--left">Add me to the web.dev mailing list.</label>
-          </div>
-        </div>
+      <div class="cluster gutter-base flex-align-start gap-top-size-2">
+        <input id="sub-newsletter" name="WebDevNewsletter" required value="Unconfirmed" type="checkbox" />
+        <label for="sub-newsletter">{{ 'i18n.subscribe.add_me' | i18n(locale) }}</label>
       </div>
-      <div class="w-display--flex w-justify-content--center">
-        <div class="w-subscribe__field w-subscribe--padded">
-          <div class="w-display--inline-flex">
-            <input id="sub-pii-spii" name="collects-pii-spii-checkbox" required value="Unconfirmed" class="w-checkbox" type="checkbox" />
-            <label for="sub-pii-spii" class="w-ml--std w-text--left">
-              I accept Google's <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Terms and Conditions</a> and acknowledge that my information will be used in accordance with Google's <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy Policy</a>.
-            </label>
-          </div>
-        </div>
+      <div class="cluster gutter-base flex-align-start">
+        <input id="sub-pii-spii" name="collects-pii-spii-checkbox" required value="Unconfirmed" type="checkbox" />
+        <label for="sub-pii-spii">
+          {{ 'i18n.subscribe.i_accept_terms' | i18n(locale) | safe}}
+        </label>
       </div>
-      <div class="w-visually-hidden">
-        <label for="sub-is-it-just-me-or-was-this-form-filled-out-by-a-robot">Congrats on finding this field, I'd recommend you not filling it out though...</label>
-        <input type="text" id="sub-is-it-just-me-or-was-this-form-filled-out-by-a-robot" name="is-it-just-me-or-was-this-form-filled-out-by-a-robot" tabindex="-1" />
-        <label for="sub-language">Language</label>
+      <div class="visually-hidden">
+        <label for="sub-language">{{ 'i18n.subscribe.language' | i18n(locale) }}</label>
         <select id="sub-language" name="LanguagePreference" required tabindex="-1">
           <option selected value="en-US">en-US</option>
         </select>
       </div>
-      <div class="w-subscribe__field w-text--center">
-        <button class="w-subscribe__button w-button w-button--primary" type="submit">
-          Subscribe
-        </button>
+      <div
+        class="g-recaptcha captcha all-center gap-top-size-1"
+        data-sitekey="{{ site.recaptchaSiteKey }}"
+        data-callback="recaptchaSuccess"
+      >
+        <div class="captcha__placeholder">
+          <svg viewBox="0 0 6 6" class="spinner">
+            <circle cx="3" cy="3" r="2.5" />
+          </svg>
+        </div>
+      </div>
+      <div class="gap-top-size-2">
+        <div class="subscribe__error hidden-yes">
+          {% Aside 'warning' %}
+            <p class="subscribe__error__message"></p>
+          {% endAside %}
+        </div>
+        <noscript>{% Aside 'warning' %}{{ 'i18n.subscribe.no_javascript' | i18n(locale) }}{% endAside %}</noscript>
+      </div>
+      <div class="all-center gap-top-size-1">
+        <div>
+          <button class="button" type="submit" data-type="primary">
+            {{ 'i18n.subscribe.subscribe' | i18n(locale) }}
+          </button>
+        </div>
       </div>
     </form>
-    <div class="w-subscribe__error w-text--center w-mt--sm">
-      <noscript>It seems like you have JavaScript disabled or it failed to load. After you submit the form, press the back button to return to the site.</noscript>
-    </div>
   </div>
 </web-subscribe>
diff --git a/src/site/_includes/partials/text.njk b/src/site/_includes/partials/text.njk
deleted file mode 100644
index ab26f00b58f..00000000000
--- a/src/site/_includes/partials/text.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="w-layout-container--narrow">
-  <h1 class="w-headline--two w-font-weight--medium w-mt--non">{{ title | md | safe }}</h1>
-  {% if subhead %}
-    <p class="w-article-header__subhead w-mb--non">
-      {{ subhead | md | safe }}
-    </p>
-  {% endif %}
-
-  {{ content | safe }}
-</div>
diff --git a/src/site/_includes/partials/theme-script.njk b/src/site/_includes/partials/theme-script.njk
new file mode 100644
index 00000000000..21cb9443f9a
--- /dev/null
+++ b/src/site/_includes/partials/theme-script.njk
@@ -0,0 +1,18 @@
+{% set inlineScript %}
+  // A global function that the theme toggle can use to apply the current theme.
+  window.applyThemeSetting = function(override) {
+    const browserSetting = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const currentSetting = override || localStorage.getItem('user-color-scheme') || browserSetting;
+    const currentAttribute = document.documentElement.getAttribute('data-user-theme');
+
+    if (currentSetting) {
+      if (currentSetting !== currentAttribute) {
+        document.documentElement.setAttribute('data-user-theme', currentSetting);
+      }
+      const lhRoot = document.querySelector('web-lighthouse-viewer article.lh-root');
+      lhRoot && lhRoot.classList.toggle('lh-dark', currentSetting === 'dark');
+    }
+  };
+window.applyThemeSetting();
+{% endset %}
+<script>{{ inlineScript | minifyJs | cspHash | safe }}</script>
diff --git a/src/site/_includes/partials/toc-inner.njk b/src/site/_includes/partials/toc-inner.njk
new file mode 100644
index 00000000000..2d1b9ceae34
--- /dev/null
+++ b/src/site/_includes/partials/toc-inner.njk
@@ -0,0 +1,16 @@
+{#
+  This is used inline with body contents as the TOC on small screens.
+  Set `tocTitle` to ovverride default title of ToC.
+#}
+{% if tocContents %}
+  {% from 'macros/icon.njk' import icon with context %}
+
+  <div class="lg:hidden-yes flow-space-size-1">
+    <details data-type="inner" role="navigation" aria-label="{{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}">
+      <summary>
+        {{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}
+      </summary>
+      <div class="toc">{{ tocContents | safe }}</div>
+    </details>
+  </div>
+{% endif %}
diff --git a/src/site/_includes/partials/toc-side.njk b/src/site/_includes/partials/toc-side.njk
new file mode 100644
index 00000000000..c7645310a7e
--- /dev/null
+++ b/src/site/_includes/partials/toc-side.njk
@@ -0,0 +1,14 @@
+{#
+  This is used on the right hand side of the page as the ToC for larger viewports.
+  Set `tocTitle` to ovverride default title of ToC.
+#}
+{% if tocContents %}
+  <nav class="course__toc toc over-scroll hidden-yes lg:hidden-no" data-type="side" aria-label="{{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}">
+    <div class="course-toc__heading font-google-sans weight-medium">{{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}</div>
+    <web-scroll-spy>
+      <div class="toc__wrapper flow-recursive">
+        {{ tocContents | safe }}
+      </div>
+    </web-scroll-spy>
+  </nav>
+{% endif %}
diff --git a/src/site/_includes/partials/topic.njk b/src/site/_includes/partials/topic.njk
index afc6c48d316..420b8b8b655 100644
--- a/src/site/_includes/partials/topic.njk
+++ b/src/site/_includes/partials/topic.njk
@@ -1,23 +1,29 @@
-<div class="w-topic">
-  <h2 id="{{ topic.title | slug }}" class="no-link w-headline--three w-topic__header">
-    {{ topic.title }}
-    <a class="w-headline-link" href="#{{ topic.title | slug }}" aria-hidden="true">#</a>
-  </h2>
-  <ul class="w-path-list">
-    {% if topic.pathItems %}
-      {% set section = topic %}
-      {% include 'partials/item.njk' %}
-    {% endif %}
-  </ul>
-  {% if topic.subtopics %}
-    {% for section in topic.subtopics %}
-      <h3 id="{{ section.title | slug }}" class="no-link w-headline--four w-topic__subtopic-header">
-        {{ section.title }}
-        <a class="w-headline-link" href="#{{ section.title | slug }}" aria-hidden="true">#</a>
-      </h3>
-      <ul class="w-path-list">
+<div class="wrapper pad-block-size-1">
+  <div class="prose">
+    <h2 id="{{ topic.title | i18n(locale) | slug }}" class="text-size-2">
+      {{ topic.title | i18n(locale) }}
+      <a href="#{{ topic.title | i18n(locale) | slug }}" aria-hidden="true" class="color-mid-text">#</a>
+    </h2>
+    <ul>
+      {% if topic.pathItems %}
+        {% set section = topic %}
         {% include 'partials/item.njk' %}
-      </ul>
-    {% endfor %}
-  {% endif %}
+      {% endif %}
+    </ul>
+  </div>
 </div>
+{% if topic.subtopics %}
+  {% for section in topic.subtopics %}
+    <div class="wrapper pad-block-size-1">
+      <div class="prose">
+        <h3 id="{{ section.title | i18n(locale) | slug }}" class="text-size-1">
+          {{ section.title | i18n(locale) }}
+          <a href="#{{ section.title | i18n(locale) | slug }}" aria-hidden="true" class="color-mid-text">#</a>
+        </h3>
+        <ul>
+          {% include 'partials/item.njk' %}
+        </ul>
+      </div>
+    </div>
+  {% endfor %}
+{% endif %}
diff --git a/src/site/_includes/partials/translation-disclaimer.njk b/src/site/_includes/partials/translation-disclaimer.njk
deleted file mode 100644
index f5a8ba6075d..00000000000
--- a/src/site/_includes/partials/translation-disclaimer.njk
+++ /dev/null
@@ -1,17 +0,0 @@
-{% set gitlocalizeUrl =  page.inputPath | gitlocalizeLink(lang) %}
-{% if translation %}
-{% Banner 'neutral' %}
-    {% if translation === 'none' %}
-    This page is not translated yet.
-    {% elif translation === 'machine' %}
-    This page is automatically translated using the Google Translation
-    API.
-    {% elif translation === 'manual' %}
-    This article was translated from
-    [the original post](/en{{ page.data.canonicalUrl }}).
-    {% endif %}
-    {% if gitlocalizeUrl %}
-    Consider improving it by [contributing your translation]({{ gitlocalizeUrl }}).
-    {% endif %}
-{% endBanner %}
-{% endif %}
\ No newline at end of file
diff --git a/src/site/_includes/path.njk b/src/site/_includes/path.njk
deleted file mode 100644
index 0b54c2b51bb..00000000000
--- a/src/site/_includes/path.njk
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: layout
----
-
-{% set path = paths[pathName] %}
-{% set topics = path.topics | removeDrafts(lang) %}
-
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="path-landing-page">
-  <header class="w-masthead-path">
-    <div class="w-masthead-path__container">
-      <div class="w-masthead-path__left">
-        <h1 class="w-masthead-path__headline no-link">{{path.title}}</h1>
-        <p class="w-masthead-path__description">{{path.description}}</p>
-      </div>
-      <div class="w-masthead-path__right">
-        <img class="w-masthead-path__image" src="{{path.cover}}" alt="">
-      </div>
-    </div>
-  </header>
-
-  {% if path.draft and site.env === 'dev' %}
-    <div class="w-banner w-banner--warning w-banner--body">
-      🚨 This path is a draft! 🚨
-    </div>
-  {% endif %}
-
-  <section class="w-layout-container w-path-intro">
-    <div class="w-path-intro__overview">
-      <h2 class="w-headline--three no-link">Overview</h2>
-      <div>{{path.overview}}</div>
-    </div>
-    <div class="w-path-intro__learn">
-      <h2 class="w-headline--three no-link">What you'll learn</h2>
-      <ul class="w-icon-list">
-        {% for topic in topics %}
-          <li class="w-icon-list__item w-icon-list__item--check">
-            <a class="w-path-link" href="#{{ topic.title | slug }}">{{ topic.title }}</a>
-          </li>
-	      {% endfor %}
-      </ul>
-    </div>
-  </section>
-
-  <hr>
-
-  <section class="w-layout-container">
-    {% for topic in topics %}
-      {% include 'partials/topic.njk' %}
-    {% endfor %}
-  </section>
-</div>
diff --git a/src/site/_includes/pattern-page.njk b/src/site/_includes/pattern-page.njk
new file mode 100644
index 00000000000..9c9f2d20bf0
--- /dev/null
+++ b/src/site/_includes/pattern-page.njk
@@ -0,0 +1,31 @@
+---
+layout: default
+pageScripts:
+  - '/js/content.js'
+---
+
+{% if page.url %}
+  {% set patternId = page.url | getRelativePath('/patterns/') %}
+{% else %}
+  {% set patternId = null %}
+{% endif %}
+
+{% if patternId %}
+  {% set pattern = patterns.patterns[patternId] %}
+{% else %}
+  {% set pattern = null %}
+{% endif %}
+
+{% if pattern %}
+  {% set allPatternsName = 'i18n.patterns.all_patterns' | i18n(locale) %}
+  {% set patternSet = patterns.sets[pattern.set] %}
+  {% set crumbs = [
+    [allPatternsName, '/patterns/'],
+    [patternSet.title, '/patterns/' + pattern.set + '/']
+  ] %}
+{% else %}
+  {% set patternSet = null %}
+  {% set crumbs = null %}
+{% endif %}
+
+{% include 'partials/post.njk' %}
diff --git a/src/site/_includes/pattern-set.njk b/src/site/_includes/pattern-set.njk
new file mode 100644
index 00000000000..45d1972b744
--- /dev/null
+++ b/src/site/_includes/pattern-set.njk
@@ -0,0 +1,137 @@
+---
+layout: default
+pageScripts:
+  - '/js/content.js'
+---
+
+{#
+  This page displays a set (or a suite of sets) of code patterns.
+  Code patterns are organized as follows:
+  /patterns/ -> PatternSuites -> PatternSets -> Patterns
+#}
+
+{% from 'macros/code-pattern.njk' import codePattern with context %}
+
+
+{% set tocTitle = "On this page" %}
+
+{% if page.url %}
+  {% set patternSetId = page.url | getRelativePath('/patterns/') %}
+{% else %}
+  {% set patternSetId = '' %}
+{% endif %}
+
+{% if patternSetId %}
+  {% set patternSet = patterns.sets[patternSetId] %}
+{% else %}
+  {% set patternSet = null %}
+{% endif %}
+
+{% if patternSet.suite %}
+  {# This is a page for a PatternSet.
+    patternSuite variable is set to the parent of the current set. #}
+  {% set patternSuite = patterns.sets[patternSet.suite] %}
+  {% set currentPatternSet = patternSet %}
+{% else %}
+  {# This is a page for a PatternSuite.
+    There is no current pattern set selected. #}
+  {% set patternSuite = patterns.sets[patternSetId] %}
+  {% set currentPatternSet = null %}
+{% endif %}
+
+{% set tocContents %}
+  <div class="toc">
+    <ul class="toc__list">
+      <li class="toc__listitem">
+        <a href="/patterns/{{patternSuite.id}}" class="toc__anchor {{ "toc__active" if not currentPatternSet }}">All</a>
+      </li>
+      {% for setId, set in patterns.sets %}
+        {% if set.suite == patternSuite.id %}
+          <li class="toc__listitem">
+            <a href="/patterns/{{set.id}}" class="toc__anchor {{ "toc__active" if setId == currentPatternSet.id }}">{{set.title}}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </div>
+{% endset %}
+
+
+<section class="wrapper">
+  {% from 'macros/breadcrumbs.njk' import breadcrumbs with context %}
+  {% set allPatternsName = 'i18n.patterns.all_patterns' | i18n(locale) %}
+  {% set crumbs = [
+    [allPatternsName, '/patterns/'],
+    [patternSuite.title, '/patterns/' + patternSuite.id]
+  ] %}
+  {{ breadcrumbs(crumbs) }}
+</section>
+
+<header class="hero bg-core-bg">
+  <div class="wrapper">
+    <div class="hero__content--split">
+      <div>
+        <h1 class="text-size-6">{{ patternSuite.title }}</h1>
+        <p>{{ patternSuite.description }}</p>
+      </div>
+      <div class="all-center">
+        {% Img
+          height=220,
+          width=330,
+          src=patternSuite.hero,
+          alt="Collection cover image",
+          decoding="async",
+          class="hero__content__img"
+        %}
+      </div>
+    </div>
+  </div>
+</header>
+
+<div class="wrapper">
+  <div class="sidebar region flex-align-start flex-dir-rev flex-wrap-no">
+    {% include 'partials/toc-side.njk' %}
+
+    <div class="flow">
+      {% include 'partials/toc-inner.njk' %}
+      {# Show patterns from current set (if set) or from the whole suite #}
+      {% if currentPatternSet %}
+        <h2>{{ currentPatternSet.title }}</h2>
+        {{ content | safe }}
+        {% for patternId, pattern in patterns.patterns %}
+          {% if pattern.set == currentPatternSet.id %}
+            {{ codePattern(pattern) }}
+          {% endif %}
+        {% endfor %}
+
+      {% else %}
+
+        {# Patterns in PatternSets that belong to the current suite #}
+        {% for patternSetId, patternSet in patterns.sets %}
+          {% if patternSet.suite == patternSuite.id %}
+            <h2>{{ patternSet.title }}</h2>
+            {{ patternSet.rawContent | siteRender | safe }}
+            {% for patternId, pattern in patterns.patterns %}
+              {% if pattern.set == patternSetId %}
+                {{ codePattern(pattern) }}
+              {% endif %}
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+
+        {# Patterns that belong directly to the pattern suite #}
+        {% set first = true %}
+        {% for patternId, pattern in patterns.patterns %}
+          {% if pattern.set == patternSuite.id %}
+            {% if first %}
+              {{ content | safe }}
+            {% endif %}
+            {% set first = false %}
+            {{ codePattern(pattern) }}
+          {% endif %}
+        {% endfor %}
+
+      {% endif %}
+    </div>
+  </div>
+</div>
diff --git a/src/site/_includes/pattern.njk b/src/site/_includes/pattern.njk
new file mode 100644
index 00000000000..bf3a29a8110
--- /dev/null
+++ b/src/site/_includes/pattern.njk
@@ -0,0 +1,13 @@
+---
+layout: pattern-page
+pageScripts:
+  - '/js/content.js'
+---
+
+{{ content | safe }}
+
+{% if page.url %}
+  {% set patternId = page.url | getRelativePath('/patterns/') %}
+{% endif %}
+
+{% CodePattern patternId %}
diff --git a/src/site/_includes/patterns.njk b/src/site/_includes/patterns.njk
new file mode 100644
index 00000000000..0ace368793d
--- /dev/null
+++ b/src/site/_includes/patterns.njk
@@ -0,0 +1,29 @@
+---
+layout: landing-page
+eleventyComputed:
+  noindex: "{{ paged.index > 0 }}"
+---
+{% from 'macros/post-card.njk' import postCard with context %}
+
+<div class="region">
+  <div class="wrapper auto-grid">
+    {% for setId, set in patterns.sets %}
+      {% if (site.env == 'prod' and set.draft) or set.suite %}
+        {# Don't display draft suite cards in prod, and don't display
+          sets that have a parent suite #}
+      {% else %}
+        {{ postCard(
+          {
+            title: set.title,
+            subhead: set.description,
+            url: '/patterns/' + set.id,
+            thumbnail: set.thumbnail or set.hero or null,
+            alt: set.title + ' cover'
+          },
+          'square'
+        ) }}
+
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/_includes/post.njk b/src/site/_includes/post.njk
index 4ffc8146638..ec02028e04e 100644
--- a/src/site/_includes/post.njk
+++ b/src/site/_includes/post.njk
@@ -1,8 +1,9 @@
 ---
-layout: layout
+layout: default
 permalink: "/{{lang}}/{{page.fileSlug}}/index.html"
 tags:
   - post
+pageScripts:
+  - '/js/content.js'
 ---
-
-{% include 'partials/post.njk' %}
\ No newline at end of file
+{% include 'partials/post.njk' %}
diff --git a/src/site/_includes/sandbox/article.njk b/src/site/_includes/sandbox/article.njk
deleted file mode 100644
index b81474b235c..00000000000
--- a/src/site/_includes/sandbox/article.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-layout: sandbox/layout
----
-
-{% if hero %}
-  <figure class="w-figure w-figure--hero">
-    <img src="{{ hero }}" alt="">
-  </figure>
-{% endif %}
-
-<article class="w-layout-container--narrow">
-  <h2>Sample article with {{ title }}</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-    Vestibulum porta dolor erat, vel molestie dolor posuere in.
-  </p>
-  {{ content | safe }}
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-    Vestibulum porta dolor erat, vel molestie dolor posuere in.
-  </p>
-</article>
\ No newline at end of file
diff --git a/src/site/_includes/sandbox/container.njk b/src/site/_includes/sandbox/container.njk
deleted file mode 100644
index 0e96c65cb75..00000000000
--- a/src/site/_includes/sandbox/container.njk
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: sandbox/layout
----
-
-<div class="w-layout-container">
-  {{ content | safe }}
-</div>
\ No newline at end of file
diff --git a/src/site/_includes/sandbox/layout.njk b/src/site/_includes/sandbox/layout.njk
deleted file mode 100644
index 835611c79a2..00000000000
--- a/src/site/_includes/sandbox/layout.njk
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>{{title}}</title>
-    <meta name="robots" content="noindex">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta charset="utf-8" />
-    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
-    <meta name="full_width" value="true" />
-    <link rel="preconnect" href="//www.gstatic.com" crossorigin="" />
-    <link rel="preconnect" href="//fonts.gstatic.com" crossorigin="" />
-    <link rel="preconnect" href="//fonts.googleapis.com" crossorigin="" />
-    <link
-      rel="stylesheet"
-      href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Condensed:400|Roboto+Mono:400,500,700|Material+Icons"
-    />
-    <link
-      rel="stylesheet"
-      href="/all.css"
-    />
-  </head>
-  <body>
-    {{ content | safe }}
-  </body>
-</html>
diff --git a/src/site/_includes/show.njk b/src/site/_includes/show.njk
new file mode 100644
index 00000000000..5a844599e3a
--- /dev/null
+++ b/src/site/_includes/show.njk
@@ -0,0 +1,24 @@
+---
+layout: default
+---
+{% set data = paged.data %}
+<div class="post wrapper region" data-flush>
+  <article class="prose legacy-rollout">
+    <header class="flow gap-bottom-size-2">
+      <h1>{{ data.title }}</h1>
+      <div class="flow-space-base color-mid-text text-size-0">
+        <time>{{ data.date | prettyDate }}</time>
+      </div>
+    </header>
+
+    {% YouTube data.videoId %}
+    <p>{{ data.description | md({linkify: true, breaks: true}) | safe }}</p>
+    <p>
+      <a href="{{ data.parent.url }}" class="button" data-type="secondary">
+        {% include 'icons/arrow-back.svg' %}
+        <span>{{ 'i18n.shows.all_episodes' | i18n(locale) }}</span>
+      </a>
+    </p>
+    
+  </article>
+</div>
diff --git a/src/site/_includes/spaces.njk b/src/site/_includes/spaces.njk
new file mode 100644
index 00000000000..b878dc6b1a6
--- /dev/null
+++ b/src/site/_includes/spaces.njk
@@ -0,0 +1,162 @@
+---
+layout: default
+---
+
+{% macro twitterSpaceCard(space) %}
+  <div class="card__header">
+    <div class="avatars">
+    {% for host in space.data.hosts %}
+      {% set alt = "Profile image for " + collections.authors[host].title | i18n(locale) %}
+      {% Img
+        src=collections.authors[host].image,
+        class="avatar",
+        width="96",
+        height="96",
+        alt=alt,
+        decoding="async",
+        loading="lazy"
+      %}
+    {% endfor %}
+    </div>
+  </div>
+  <div class="card__content flow">
+    <h2 class="card__heading text-size-3">
+      {{ space.data.title }}
+    </h2>
+    <ul class="hosts">
+      {% for host in space.data.hosts %}
+        <li>
+            {{ collections.authors[host].title | i18n(locale) }}
+            {% if space.data.primary_host == host %}
+              <span class="pill" data-inactive>{{ 'i18n.spaces.host' | i18n(locale) }}</span>
+            {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+    <time class="eyebrow">{{ space.data.event_date | prettyDate('DATE_FULL') }}</time>
+    <p class="eyebrow"> {{ space.data.event_time }} </p>
+    <p class="gap-top-size-1 gap-bottom-size-2">{{ space.data.description }}</p>
+  </div>
+  {% if space.data.twitter_link %}
+    <a class="button" href="{{ space.data.twitter_link }}" target="_blank">
+      {% include "icons/twitter.svg" %}
+      <span>{{ 'i18n.spaces.see_on_twitter' | i18n(locale) }}</span>
+    </a>
+  {% elif space.data.cal_link %}
+    <a class="button" href="{{ space.data.cal_link }}" target="_blank">
+      {% include "icons/calendar.svg" %}
+      <span>{{ 'i18n.spaces.add_to_calendar' | i18n(locale) }}</span>
+    </a>
+  {% else %}
+    <a class="button" href="{{ space.data.event_date | calendarLink(space.data.title, space.data.description) }}" target="_blank">
+      {% include "icons/calendar.svg" %}
+      <span>{{ 'i18n.spaces.add_to_calendar' | i18n(locale) }}</span>
+    </a>
+  {% endif %}
+{% endmacro %}
+
+<div class="landing-page spaces">
+  <header>
+    <div class="hero wrapper pad-inline-size-3">
+      <div class="hero__columns switcher">
+        <div>
+          <div class="flow">
+              <h1 class="text-size-6">{{ title }}</h1>
+              <p>{{ description }}</p>
+          </div>
+        </div>
+        <div class="flow">
+          {% Img src="image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/LKn1zx3kYtce65rHnnIj.svg", alt="Globe", width="600", height="488", fetchpriority="high" %}
+        </div>
+      </div>
+    </div>
+  </header>
+
+{% set spaces = collections['twitter-space'] %}
+<div class="spaces wrapper region all-center">
+  <h2 class="text-size-4  gap-bottom-size-2">{{ 'i18n.spaces.upcoming_spaces' | i18n(locale) }}</h2>
+  <div class="auto-grid all-center">
+    {% if not spaces %}
+      {% set spaces = [] %}
+    {% endif %}
+    {% set upcomingSpaces = spaces | livePosts | filterInUpcoming('event_date') %}
+    {% set pastSpaces = spaces | livePosts | filterOutUpcoming('event_date') %}
+
+    {% if not upcomingSpaces.length %}
+    <p>{{ 'i18n.spaces.no_upcoming_spaces' | i18n(locale) }}</p>
+    {% endif %}
+
+    {% for space in upcomingSpaces %}
+        <article class="card flow">
+          {{ twitterSpaceCard(space) }}
+        </article>
+    {% endfor %}
+  </div>
+</div>
+
+<div class="spaces spaces--past wrapper region all-center">
+  <h2 class="text-size-4  gap-bottom-size-2">{{ 'i18n.spaces.past_spaces' | i18n(locale) }}</h2>
+
+  {% if not pastSpaces.length %}
+  <p>{{ 'i18n.spaces.no_past_spaces' | i18n(locale) }}</p>
+  {% endif %}
+
+  <table>
+    {% for space in pastSpaces %}
+      <tr>
+        <td class="eyebrow all-center">
+          <p>
+            {{ space.data.event_date | prettyDate('') }}
+          </p>
+        </td>
+        <td class="pad-block-size-1 pad-inline-size-1">
+          <div class="avatars">
+            {% for host in space.data.hosts %}
+              {% set alt = "Profile image for " + collections.authors[host].title | i18n(locale) %}
+              {% Img
+                src=collections.authors[host].image,
+                class="avatar",
+                width="96",
+                height="96",
+                alt=alt,
+                decoding="async",
+                loading="lazy"
+              %}
+            {% endfor %}
+          </div>
+          <p class="gap-top-size-1 eyebrow sm-only">
+            {{ space.data.event_date | prettyDate('DATE_SHORTER') }}
+          </p>
+        </td>
+        <td class="flow pad-block-size-1">
+          <h2 class="text-size-2">
+            {{ space.data.title }}
+          </h2>
+          <p>
+            {% for host in space.data.hosts %}
+              <span class="host">
+                {{ collections.authors[host].title | i18n(locale) }}
+                {% if space.data.primary_host == host %}
+                  <span class="pill" data-inactive>{{ 'i18n.spaces.host' | i18n(locale) }}</span>
+                {% endif %}
+              </span>
+            {% endfor %}
+            <details class="ellipsis">
+              <summary>
+                <span class="ellipsis__full">{{ space.data.description }}</span>
+                <span class="ellipsis__more">{{ 'i18n.spaces.see_more' | i18n(locale) }}</span>
+              </summary>
+            </details>
+            {% if space.data.audio %}
+            <p>
+              <audio src="{{ space.data.audio }}" class="audio-player__element" controls=""></audio>
+            </p>
+            {% endif %}
+          </p>
+        </td>
+      </tr>
+    {% endfor %}
+  </table>
+</div>
+</div>
+
diff --git a/src/site/_includes/text.njk b/src/site/_includes/text.njk
index 9bc6266228c..183903fead2 100644
--- a/src/site/_includes/text.njk
+++ b/src/site/_includes/text.njk
@@ -1,6 +1,18 @@
 ---
-layout: layout
-permalink: "/{{lang}}/{{page.fileSlug}}/index.html"
+layout: default
 ---
 
-{% include 'partials/text.njk' %}
\ No newline at end of file
+<div class="region wrapper">
+  <header>
+    <div class="flow all-center headline">
+    <h1 class="headline__title">{{ title | safe }}</h1>
+    {% if subhead %}
+      <p>
+        {{ subhead | safe }}
+      </p>
+    {% endif %}
+  </header>
+  <div class="gap-top-size-2 prose">
+    {{ content | safe }}
+  </div>
+</div>
diff --git a/src/site/_plugins/markdown.js b/src/site/_plugins/markdown.js
new file mode 100644
index 00000000000..5a149275f90
--- /dev/null
+++ b/src/site/_plugins/markdown.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is di_plstributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const md = require('markdown-it');
+const slugify = require('slugify');
+const site = require('../_data/site');
+
+const markdown = md({
+  html: true,
+})
+  // Let folks author definition lists using markdown syntax.
+  .use(require('markdown-it-deflist'))
+  // Let folks customize markdown output with attributes (id, class, data-*)
+  .use(require('markdown-it-attrs'), {
+    leftDelimiter: '{:',
+    rightDelimiter: '}',
+    allowedAttributes: ['id', 'class', /^data-.*$/],
+  })
+  // Automatically add anchors to headings
+  .use(require('markdown-it-anchor'), {
+    level: 2,
+    permalink: true,
+    permalinkClass: 'headline-link',
+    permalinkSymbol: '#',
+    // @ts-ignore
+    slugify: (s) => slugify(s, {lower: true, remove: /[$*_+~.()'"!/\-:@?]+/g}),
+  })
+  // Disable indented code blocks.
+  // We only support fenced code blocks.
+  .disable('code');
+
+// Custom renderer rules
+const fence = markdown.renderer.rules.fence;
+const link_open =
+  markdown.renderer.rules.link_open ||
+  // @ts-ignore
+  ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
+
+const rules = {
+  // Wrap code blocks in a web-copy-code element so folks can copy the
+  // snippet.
+  fence: (tokens, idx, options, env, slf) => {
+    const fenced = fence(tokens, idx, options, env, slf);
+    return `<web-copy-code>${fenced}</web-copy-code>`;
+  },
+  // Wrap tables in a <div class="table-wrapper scrollbar"> element to make them
+  // responsive.
+  table_close: () => '</table>\n</div>',
+  table_open: () => '<div class="table-wrapper scrollbar">\n<table>\n',
+  link_open: (tokens, idx, options, env, slf) => {
+    const origin = new URL(tokens[idx].attrGet('href'), site.url).origin;
+    if (origin !== site.url) {
+      tokens[idx].attrPush(['rel', 'noopener']);
+    }
+    return link_open(tokens, idx, options, env, slf);
+  },
+};
+
+markdown.renderer.rules = {...markdown.renderer.rules, ...rules};
+
+module.exports = markdown;
diff --git a/src/site/_transforms/minify-html.js b/src/site/_transforms/minify-html.js
new file mode 100644
index 00000000000..b6e1bb6f0bd
--- /dev/null
+++ b/src/site/_transforms/minify-html.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const htmlMinifier = require('@minify-html/node');
+const path = require('path');
+const {URL} = require('url');
+const stagingUrls =
+  require('../../../tools/lhci/lighthouserc').ci.collect.url.map((url) =>
+    path.join('dist', new URL(url).pathname, 'index.html'),
+  );
+
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const isStaging = process.env.ELEVENTY_ENV === 'staging';
+
+const minifyHtml = (content, outputPath) => {
+  if (
+    (isProd && outputPath && outputPath.endsWith('.html')) ||
+    (isStaging && stagingUrls.includes(outputPath))
+  ) {
+    try {
+      content = htmlMinifier
+        .minify(Buffer.from(content, 'utf8'), {
+          // See https://docs.rs/minify-html/latest/minify_html/struct.Cfg.html
+          do_not_minify_doctype: true,
+          ensure_spec_compliant_unquoted_attribute_values: true,
+          keep_spaces_between_attributes: true,
+          keep_html_and_head_opening_tags: true,
+          keep_closing_tags: true,
+        })
+        .toString('utf-8');
+    } catch (err) {
+      console.warn(err, 'while minifying', outputPath);
+    }
+  }
+
+  return content;
+};
+
+module.exports = {minifyHtml};
diff --git a/src/site/_transforms/responsive-images/helpers.js b/src/site/_transforms/responsive-images/helpers.js
deleted file mode 100644
index 7ac5370c527..00000000000
--- a/src/site/_transforms/responsive-images/helpers.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview Utilities to be support rewriting image paths.
- */
-
-const site = require('../../_data/site');
-const path = require('path');
-
-/**
- * Convert an image path (relative or absolute) over to a full path that uses
- * the image CDN. Will ignore paths that being with a protocol.
- * @param {string} src src attribute for image
- * @param {string} outputPath Output path for HTML file
- *
- * @return {{src: string, isLocal: boolean}}
- */
-function determineImagePath(src, outputPath) {
-  const isLocal = !RegExp('^https?://').test(src);
-
-  // If an image has a protocol then we should just return the src as is.
-  // If the outputPath is false then it means the file has permalink set to
-  // false. In this scenario we should also just return the src as is.
-  if (!isLocal || !outputPath) {
-    return {
-      src,
-      isLocal,
-    };
-  }
-
-  if (path.isAbsolute(src)) {
-    const url = new URL(src, site.imageCdn);
-    return {src: url.href, isLocal};
-  }
-
-  // At this point we've determined that the image has a relative path.
-  // outputPath will be something like dist/en/some-article/index.html
-  // We need to remove dist/en so we can just target the directory that holds
-  // the image.
-  const parts = path.dirname(outputPath).split(path.sep);
-  if (parts[0] !== 'dist') {
-    throw new Error('Bad output directory. Files must be served from /dist/');
-  }
-  parts.shift();
-  // Check to see if the path contains a language prefix like /en/ or /ja/.
-  if (parts[0].length === 2) {
-    parts.shift();
-  }
-  const base = parts.join('/');
-
-  const url = new URL(path.join(base, src), site.imageCdn);
-  return {src: url.href, isLocal};
-}
-
-module.exports = {determineImagePath};
diff --git a/src/site/_transforms/responsive-images/index.js b/src/site/_transforms/responsive-images/index.js
deleted file mode 100644
index 77d460afe85..00000000000
--- a/src/site/_transforms/responsive-images/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview An eleventy transform that rewrites image paths to use our
- * image CDN.
- */
-
-const cheerio = require('cheerio');
-const {determineImagePath} = require('./helpers');
-
-const responsiveImages = (content, outputPath) => {
-  if (!outputPath || !outputPath.endsWith('.html')) {
-    return content;
-  }
-
-  const $ = cheerio.load(content);
-  const $img = $('img');
-  $img.each((i, elem) => {
-    const $elem = $(elem);
-    const originalSrc = $elem.attr('src');
-    const newSrc = determineImagePath($elem.attr('src'), outputPath).src;
-    $elem.attr('src', newSrc);
-    // Note the code below is a short term fix and should be removed eventually.
-    // If the image already has srcset defined,
-    // update that to use the image CDN as well.
-    // This assumes the srcset paths use the same src as the image.
-    // e.g. src=./foo.jpg srcset=./foo.jpg?w=640w.
-    // We do this because some components, like Hero, and PostCard, will
-    // attempt to define a srcset for their images before their html makes it to
-    // this transform.
-    // Ultimately we'd like to add support for the sizes attribute, so authors
-    // can tell us what dimensions they want their images displayed at
-    // and then this transform can do all the srcsetting for the entire site.
-    const originalSrcSet = $elem.attr('srcset');
-    if (originalSrcSet) {
-      const newSrcSet = originalSrcSet
-        .split(' ')
-        .map((src) => src.replace(originalSrc, newSrc))
-        .join(' ');
-      $elem.attr('srcset', newSrcSet);
-    }
-  });
-  return $.html();
-};
-
-module.exports = {responsiveImages};
diff --git a/src/site/_transforms/service-worker-partials/index.js b/src/site/_transforms/service-worker-partials/index.js
deleted file mode 100644
index 72a44f7a4a1..00000000000
--- a/src/site/_transforms/service-worker-partials/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview Builds a shortcode which writes article inner content to peer JSON files.
- *
- * This is needed so our SPA routing and Service Worker can fetch partials in order to hydrate the
- * main web.dev template, cutting down on bytes needed to render further pages.
- */
-
-const fs = require('fs').promises;
-const path = require('path');
-const cheerio = require('cheerio');
-
-const writePartial = async (to, raw) => {
-  await fs.mkdir(path.dirname(to), {recursive: true});
-  await fs.writeFile(to, JSON.stringify(raw));
-};
-
-const getPartial = (content) => {
-  const $ = cheerio.load(content);
-  const partial = {
-    raw: $('#content').html(),
-    lang: $('html').attr('lang'),
-    title: $('title').text(),
-    rss: $('link[type="application/atom+xml"]').attr('href'),
-    offline: Boolean($('meta[name="offline"]').attr('content')) || false,
-  };
-  return partial;
-};
-
-const serviceWorkerPartials = async (content, outputPath) => {
-  // Page has permalink set to false and will not be rendered.
-  if (!outputPath) {
-    return content;
-  }
-
-  // Unexpected output format.
-  if (!outputPath.endsWith('/index.html')) {
-    return content;
-  }
-
-  // Skip the web.dev/LIVE page to force online-only.
-  if (outputPath === 'dist/en/live/index.html') {
-    return content;
-  }
-
-  const partial = getPartial(content, outputPath);
-  const suffixLength = 'index.html'.length;
-  const partialOutputPath =
-    outputPath.substr(0, outputPath.length - suffixLength) + 'index.json';
-  await writePartial(partialOutputPath, partial);
-
-  return content;
-};
-
-module.exports = {serviceWorkerPartials, getPartial, writePartial};
diff --git a/src/site/_utils/course-11tydata.js b/src/site/_utils/course-11tydata.js
new file mode 100644
index 00000000000..263af213e08
--- /dev/null
+++ b/src/site/_utils/course-11tydata.js
@@ -0,0 +1,42 @@
+/**
+ * @fileoverview This is a generator for course data.
+ */
+
+/**
+ * @param {string} projectKey This is used to look up the data for the course
+ * in _data. e.g., a course with a key of 'a11y' would have a corresponding
+ * "_data/courses/a11y" directory.
+ */
+module.exports = (projectKey) => {
+  return {
+    layout: 'course',
+    projectKey,
+    searchTag: `course-${projectKey}`,
+    // Exclude course content from the /tags/ pages.
+    excludeFromTags: true,
+    // Exclude course content from the /authors/ pages.
+    excludeFromAuthors: true,
+    eleventyComputed: {
+      tags: (data) => {
+        const {searchTag} = data;
+        let tags = data?.courses?.[projectKey]?.meta?.tags || [];
+        tags = [...tags, ...data.tags];
+        if (!tags.includes(searchTag)) {
+          tags.push(searchTag);
+        }
+        return tags;
+      },
+      thumbnail: (data) => {
+        // Use thumbnail defined in the frontmatter or in the meta.yml file.
+        return data.thumbnail || data?.courses?.[projectKey]?.meta?.thumbnail;
+      },
+      noindex: (data) => {
+        // If the course is marked as draft, don't allow it to be indexed accidentally.
+        // In the chain below, `true` wins, so if we're draft or a specific page is marked
+        // draft, the noindex meta tags will be added.
+        const meta = data?.courses?.[projectKey]?.meta;
+        return meta?.draft || data.noindex || false;
+      },
+    },
+  };
+};
diff --git a/src/site/_utils/get-image-path.js b/src/site/_utils/get-image-path.js
deleted file mode 100644
index d6cf6cb3955..00000000000
--- a/src/site/_utils/get-image-path.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const path = require('path');
-const site = require('../_data/site');
-
-/**
- * Takes a path to an image and converts it to an image CDN path if we're in
- * a production environment.
- * @param {!string} src A path to an image asset.
- * @param {!string} pageUrl The url for the current page.
- * @return {string} An image path. May be converted to an image CDN path if
- * it's a production environment.
- */
-module.exports = function getImagePath(src, pageUrl) {
-  let imagePath = path.join(pageUrl, src);
-  if (site.env === 'prod') {
-    imagePath = new URL(imagePath, site.imageCdn).href;
-  }
-  return imagePath;
-};
diff --git a/src/site/_utils/get-srcset-range.js b/src/site/_utils/get-srcset-range.js
deleted file mode 100644
index adf0a327c6d..00000000000
--- a/src/site/_utils/get-srcset-range.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// The range of widths that we use when we srcset images.
-// srcset sizes generated using https://www.responsivebreakpoints.com/
-const srcsetRange = [240, 480, 768, 1045, 1434, 1730, 1959, 2195, 2880, 3200];
-
-/**
- * Take min and max values for an image and return all srcset sizes that fall
- * within that range.
- * @param {?number} min A minimum width.
- * @param {?number} max A maximum width.
- * @return {Array<number>} An array of srcset widths.
- */
-module.exports = function getSrcsetRange(min, max) {
-  min = min || srcsetRange[0];
-  max = max || srcsetRange[srcsetRange.length - 1];
-  if (min > max) {
-    throw new Error(
-      `Can't get srcset range. min: ${min} is greater than max: ${max}`,
-    );
-  }
-
-  const range = [];
-  for (let i = 0; i < srcsetRange.length; i++) {
-    if (srcsetRange[i] < min) {
-      continue;
-    }
-    if (srcsetRange[i] > max) {
-      break;
-    }
-    range.push(srcsetRange[i]);
-  }
-  return range;
-};
diff --git a/src/site/_utils/sort-by-updated.js b/src/site/_utils/sort-by-updated.js
new file mode 100644
index 00000000000..99d1b6c7b36
--- /dev/null
+++ b/src/site/_utils/sort-by-updated.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @param {EleventyCollectionItem} a An eleventy post object.
+ * @param {EleventyCollectionItem} b An eleventy post object.
+ * @return {number} The difference in their date's.
+ */
+function sortByUpdated(a, b) {
+  const aTime = a.data.updated ? a.data.updated.getTime() : a.date.getTime();
+  const bTime = b.data.updated ? b.data.updated.getTime() : b.date.getTime();
+
+  return bTime - aTime;
+}
+
+module.exports = {sortByUpdated};
diff --git a/src/site/content/_redirects.yaml b/src/site/content/_redirects.yaml
deleted file mode 100644
index e475b325681..00000000000
--- a/src/site/content/_redirects.yaml
+++ /dev/null
@@ -1,212 +0,0 @@
-# Master redirects file for web.dev. This mirrors the old DevSite file.
-# There are two types of redirects:
-#
-#  (1) Simple redirects, e.g., "from: /foo"
-#      - These don't match subpaths, like "/foo/bar"
-#      - But it will match similar URLs "/foo", "/foo/" and "/foo/index.html"
-#
-#  (2) Group redirects, e.g., "from: /foo/...", which will match the top-level
-#      path (with the same rules as (1)) as well as any descendant paths
-#
-# WARNING! Redirects DO NOT take priority over static content.
-# For example, if you try to redirect "/foo" but the site contains a static file
-# "/foo/index.html", the static file will always win.
-
-redirects:
-
-# Policies
-
-- from: /policies
-  to: https://policies.google.com/
-
-# Newsletter
-
-- from: /subscribe
-  to: /newsletter
-
-# Pre-v1 redirects
-
-- from: /fast/using-lighthouse-ci-to-set-a-performance-budget
-  to: /fast/using-lighthouse-bot-to-set-a-performance-budget
-
-- from: /fast/defer-unused-css
-  to: /fast/defer-non-critical-css
-
-# Pre-v1 codelabs
-
-- from: /reliable/http-cache/codelab-http-cache
-  to: /codelab-http-cache
-
-- from: /fast/serve-images-webp/codelab-serve-images-webp
-  to: /codelab-serve-images-webp
-
-- from: /fast/remove-unused-code/codelab-remove-unused-code
-  to: /codelab-remove-unused-code
-
-- from: /fast/serve-responsive-images/codelab-art-direction
-  to: /codelab-art-direction
-
-- from: /fast/serve-responsive-images/codelab-art-direction
-  to: /codelab-art-direction
-
-- from: /secure/same-origin-policy/codelab-same-origin-fetch
-  to: /codelab-same-origin-fetch
-
-- from: /secure/same-origin-policy/codelab-same-origin-iframe
-  to: /codelab-same-origin-iframe
-
-- from: /fast/avoid-invisible-text/codelab-avoid-invisible-text
-  to: /codelab-avoid-invisible-text
-
-- from: /fast/preload-critical-assets/codelab-preload-web-fonts
-  to: /codelab-preload-web-fonts
-
-- from: /fast/serve-responsive-images/codelab-density-descriptors
-  to: /codelab-density-descriptors
-
-- from: /discoverable/fix-http-status-codes/codelab-fix-sneaky-404
-  to: /codelab-fix-sneaky-404
-
-- from: /installable/discover-installable/codelab-make-installable
-  to: /codelab-make-installable
-
-- from: /fast/use-imagemin-to-compress-images/codelab-imagemin-gulp
-  to: /codelab-imagemin-gulp
-
-- from: /fast/use-imagemin-to-compress-images/codelab-imagemin-grunt
-  to: /codelab-imagemin-grunt
-
-- from: /fast/preload-critical-assets/codelab-preload-critical-assets
-  to: /codelab-preload-critical-assets
-
-- from: /fast/replace-gifs-with-videos/codelab-replace-gifs-with-video
-  to: /codelab-replace-gifs-with-video
-
-- from: /fast/use-imagemin-to-compress-images/codelab-imagemin-webpack
-  to: /codelab-imagemin-webpack
-
-- from: /reliable/service-workers-cache-storage/codelab-service-workers
-  to: /codelab-service-workers
-
-- from: /fast/serve-modern-code-to-modern-browsers/codelab-serve-modern-code
-  to: /codelab-serve-modern-code
-
-- from: /fast/serve-responsive-images/codelab-specifying-multiple-slot-widths
-  to: /codelab-specifying-multiple-slot-widths
-
-- from: /fast/reduce-javascript-payloads-with-code-splitting/codelab-code-splitting
-  to: /codelab-code-splitting
-
-- from: /reliable/identify-resources-via-network-panel/codelab-explore-network-panel
-  to: /codelab-explore-network-panel
-
-- from: /fast/reduce-network-payloads-using-text-compression/codelab-text-compression
-  to: /codelab-text-compression
-
-- from: /fast/use-lazysizes-to-lazyload-images/codelab-use-lazysizes-to-lazyload-images
-  to: /codelab-use-lazysizes-to-lazyload-images
-
-- from: /fast/serve-images-with-correct-dimensions/codelab-serve-images-correct-dimensions
-  to: /codelab-serve-images-correct-dimensions
-
-- from: /fast/reduce-network-payloads-using-text-compression/codelab-text-compression-brotli
-  to: /codelab-text-compression-brotli
-
-- from: /fast/incorporate-performance-budgets-into-your-build-tools/codelab-setting-performance-budgets-with-webpack
-  to: /codelab-setting-performance-budgets-with-webpack
-
-# Redirect all pre-v1 paths to the project root.
-# Before: web.dev/fast/remove-unused-code
-# After: web.dev/remove-unused-code
-
-- from: /accessible/...
-  to: /...
-
-- from: /discoverable/...
-  to: /...
-
-- from: /fast/...
-  to: /...
-
-- from: /installable/...
-  to: /...
-
-- from: /reliable/...
-  to: /...
-
-- from: /secure/...
-  to: /...
-
-- from: /en/handbook/...
-  to: /handbook/...
-
-# Redirect duplicative /discoverable URLs to /lighthouse-seo
-
-- from: /write-descriptive-text
-  to: /lighthouse-seo
-
-- from: /tell-search-translated-pages-equal
-  to: /hreflang
-
-- from: /tell-search-engine-canonical-url
-  to: /canonical
-
-- from: /remove-code-blocking-indexing
-  to: /is-crawlable
-
-- from: /fix-http-status-codes
-  to: /http-status-code
-
-- from: /remove-browser-plugins
-  to: /plugins
-
-- from: /fix-robot-errors
-  to: /robots-txt
-
-- from: /fix-small-fonts
-  to: /font-size
-
-- from: /fix-viewport-tag
-  to: /viewport
-
-# Redirect older metrics docs
-
-- from: /layout-instability-api
-  to: /cls
-
-- from: /largest-contentful-paint
-  to: /lcp
-
-- from: /web-vitals
-  to: /vitals
-
-# Redirects Progressive Web App content
-
-- from: /pwa
-  to: /progressive-web-apps/
-
-- from: /installable
-  to: /progressive-web-apps/#installable
-
-- from: /discover-installable
-  to: /progressive-web-apps/#installable
-
-# Redirect for spec name changes
-
-- from: /sms-receiver-api-announcement
-  to: /web-otp
-
-# Redirect /payments content
-
-- from: /android-payment-apps-overview
-  to: /android-payment-app-developers-guide
-
-# Redirect for misconfigured Lighthouse report
-
-- from: /image-size-responsive
-  to: /image-aspect-ratio
-
-# Redirects for Handbook refactors
-
-- from: /handbook/tags
-  to: /handbook/yaml-front-matter/#tags
diff --git a/src/site/content/algolia.njk b/src/site/content/algolia.njk
deleted file mode 100644
index 104927bd1fa..00000000000
--- a/src/site/content/algolia.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-noindex: true
-permalink: "/en/algolia.json"
-
----
-{{ collections.algolia | dump | safe }}
\ No newline at end of file
diff --git a/src/site/content/content.11tydata.js b/src/site/content/content.11tydata.js
new file mode 100644
index 00000000000..f24aa9675b3
--- /dev/null
+++ b/src/site/content/content.11tydata.js
@@ -0,0 +1,23 @@
+const outputPermalink = require('../../build/output-permalink');
+
+module.exports = {
+  eleventyComputed: {
+    tags: (data) => {
+      // Add the following tags if necessary
+      const originTrials = 'origin-trials';
+
+      if (typeof data.tags === 'string') {
+        data.tags = [data.tags];
+      } else if (!Array.isArray(data.tags)) {
+        data.tags = [];
+      }
+
+      if (data.origin_trial && !data.tags.includes(originTrials)) {
+        data.tags.push(originTrials);
+      }
+
+      return data.tags;
+    },
+    permalink: (data) => outputPermalink(data),
+  },
+};
diff --git a/src/site/content/de/blog/blog.11tydata.js b/src/site/content/de/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/de/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/de/blog/referrer-best-practices/index.md b/src/site/content/de/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..409f8c42f74
--- /dev/null
+++ b/src/site/content/de/blog/referrer-best-practices/index.md
@@ -0,0 +1,332 @@
+---
+title: Referrer und Best Practices für Referrer-Richtlinien
+subhead: Best Practices für das Festlegen Ihrer Referrer-Richtlinie (Referrer-Policy) und für die Nutzung von Referrern in eingehenden Anfragen.
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2021-10-14
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: Ziehen Sie in Erwägung eine Referrer-Richtlinie von „strict-origin-when-cross-origin“ festzulegen. Dies bewahrt einen großen Teil der Nützlichkeit des Referrers und verringert gleichzeitig das Risiko von Datenlecks zwischen verschiedenen Origins (cross-origin).
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## Zusammenfassung
+
+- Unerwartete Cross-Origin-Informationslecks beeinträchtigen die Privatsphäre der Webbenutzer. Eine schützende Referrer-Richtlinie kann dagegen helfen.
+- Ziehen Sie in Erwägung, eine Referrer-Richtlinie von `strict-origin-when-cross-origin` festzulegen. Diese bewahrt einen großen Teil der Nützlichkeit des Referrers und verringert gleichzeitig das Risiko von Datenlecks zwischen verschiedenen Origins (cross-origin).
+- Verwenden Sie zum Schutz vor Cross-Site Request Forgery (CSRF) keine Referrer. Nutzen Sie stattdessen für eine zusätzliche Sicherheitsebene [CSRF-Token](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) und andere Header.
+
+{% Aside %} Bevor wir beginnen:
+
+- Wenn Ihnen der Unterschied zwischen „Site“ und „Origin“ (auch „Ausgangspunkt“) nicht klar ist, lesen Sie den Artikel [Verstehen von „Same-Site“ und „Same-Origin“](/same-site-same-origin/).
+- Dem `Referer`-Header fehlt aufgrund eines Schreibfehlers in der ursprünglichen Spezifikation ein R. Der `Referrer-Policy`-Header, der `referrer` in JavaScript sowie der DOM-Referrer sind korrekt geschrieben. {% endAside %}
+
+## Referer und Referrer-Richtlinie 101
+
+HTTP requests may include the optional [`Referer` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer), which indicates the origin or web page URL the request was made from. The [`Referrer-Policy` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) defines what data is made available in the `Referer` header.
+
+Im folgenden Beispiel enthält der `Referer`-Header die vollständige URL der Seite unter `site-one`, von der aus die Anfrage gestellt wurde.
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="HTTP-Anfrage mit Referer-Header.", width="800", height="573" %}</figure>
+
+Der `Referer`-Header kann in verschiedenen Arten von Anfragen vorhanden sein:
+
+- Navigationsanfragen, wenn ein Benutzer auf einen Link klickt
+- Anfragen zu Unterressourcen, wenn ein Browser Bilder, iframes, Skripte und andere Ressourcen anfordert, die von einer Seite benötigt werden.
+
+Zur Navigation und für iframes können diese Daten auch per JavaScript mit `document.referrer` abgerufen werden.
+
+Der `Referer`-Wert kann aufschlussreich sein. Beispielsweise könnte ein Analysedienst den Wert verwenden, um zu bestimmen, dass 50 % der Besucher auf `site-two.example` von `social-network.example` kamen.
+
+Wenn jedoch die vollständige URL einschließlich des Pfads per`Referer` **zwischen verschiedenen Origins** geteilt wird, kann dies nicht nur die **Privatsphäre beeinträchtigen** sondern ebenfalls **Sicherheitsrisiken bergen**. Sehen Sie sich beispielsweise diese URLs an:
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URLs mit Pfaden, die verschiedenen Datenschutz- und Sicherheitsrisiken zugeordnet sind.", width="800", height="370" %}</figure>
+
+Die URLs #1 bis #5 enthalten private Informationen – manche sogar identifizierende oder vertrauliche. Wenn diese stillschweigend zu anderen Origins durchsickern, kann dies die Privatsphäre der Webbenutzer gefährden.
+
+URL #6 ist eine [Funktions-URL](https://www.w3.org/TR/capability-urls/). Man möchte nicht, dass sie in die Hände von jemand anderem als dem gewünschten Benutzer fällt. In diesem Fall könnte ein böswilliger Akteur das Konto dieses Benutzers kapern.
+
+**Um einzuschränken, welche Referrer-Daten für Anfragen von Ihrer Website zur Verfügung gestellt werden, können Sie eine Referrer-Richtlinie festlegen.**
+
+## Welche Richtlinien gibt es und wie unterscheiden sie sich?
+
+Sie können eine von acht Richtlinien auswählen. Abhängig von der Richtlinie können die im `Referer`-Header (und über `document.referrer`) verfügbaren Daten:
+
+- Nicht vorhanden sein (kein `Referer`-Header vorhanden)
+- Nur die [Origins](/same-site-same-origin/#origin) betreffen
+- Die vollständige URL enthalten: Origin, Pfad und Query-String
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Daten, die im Referer-Header und in document.referrer enthalten sein können.", width="800", height="255" %}</figure>
+
+Einige Richtlinien wurden so gestaltet, dass Sie je nach **Kontext** unterschiedliches Verhalten hervorrufen, beispielsweise im Kontext einer Cross-Origin- bzw. Same-Origin-Anfrage, wenn erhöht Wert auf die Sicherheit (das Ziel der Anfrage sollte genauso sicher sein wie die Origin) gelegt wird oder wenn beides der Fall ist. Dies ist nützlich, um die Menge an Informationen zu begrenzen, die über Origins hinweg (cross-origin) oder mit weniger sicheren Origins geteilt werden – während gleichzeitig die Vielfalt des Referrers auf Ihrer eigenen Site erhalten bleibt.
+
+Hier ist eine Übersicht, die zeigt, wie Referrer-Richtlinien die im Referer-Header und über `document.referrer` verfügbaren URL-Daten einschränken:
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Unterschiedliche Referrer-Richtlinien und ihr Verhalten, je nach Sicherheitseinstellungen und Cross-Origin-Kontext.", width="800", height="537" %}</figure>
+
+MDN bietet eine [vollständige Liste mit Richtlinien und Verhaltensbeispielen](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives) an.
+
+Dinge zu beachten:
+
+- Alle Richtlinien, die das Schema (HTTPS vs. HTTP) berücksichtigen (`strict-origin`, `no-referrer-when-downgrade` und `strict-origin-when-cross-origin`) behandeln Anfragen von einer HTTP-Origin zu einer anderen HTTP-Origin genauso wie Anfragen von einer HTTPS-Origin zu einer anderen HTTPS-Oigin – auch wenn HTTP unsicherer ist. Der Grund dafür ist, dass es im Rahmen der Richtlinien entscheidend ist, ob ein Sicherheits-**Downgrade** stattfindet, also ob die Anfrage Daten einer verschlüsselten Origin einer unverschlüsselten Origin preisgeben kann. Eine HTTP → HTTP-Anfrage bleibt die ganze Zeit über unverschlüsselt, ein Downgrade findet nicht statt. Bei HTTPS → HTTP-Anfragen wird hingegen ein Downgrade durchgeführt.
+- Wenn eine Anfrage eine **Same-Origin**-Anfrage ist, stimmt das Schema (HTTPS oder HTTP) überein, was bedeutet, dass kein Sicherheits-Downgrade vollzogen wird.
+
+## Standardmäßige Referrer-Richtlinien in Browsern
+
+*Stand Oktober 2021*
+
+**Wenn keine Referrer-Richtlinie (Refferer-Policy) festgelegt wurde, wird die Standardrichtlinie des Browsers verwendet.**
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Browser</th>
+        <th>Standardmäßige <code>Referrer-Policy</code> / Verhalten</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>Die Standardeinstellung ist <code>strict-origin-when-cross-origin</code>.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>Die Standardeinstellung ist <code>strict-origin-when-cross-origin</code>.<br> Ab <a href="https://blog.mozilla.org/security/2021/10/05/firefox-93-features-an-improved-smartblock-and-new-referrer-tracking-protections/">Version 93</a> gilt für Benutzer mit strengem Tracking-Schutz und des Inkognitomodus: Die weniger restriktiven Referrer-Richtlinien <code>no-referrer-when-downgrade</code>, <code>origin-when-cross-origin</code> und <code>unsafe-url</code> werden bei Cross-Site-Anfragen ignoriert. Dies bedeutet, dass der Referrer für Cross-Site-Anfragen, unabhängig von den Richtlinien der Website, stets gekürzt wird.</td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>Die Standardeinstellung ist <code>strict-origin-when-cross-origin</code>.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Die Standardeinstellung entspricht in etwa <code>strict-origin-when-cross-origin</code>, weist jedoch einige Besonderheiten auf. Weitere Informationen finden Sie unter <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">Verhindern von durch Ausnutzen des Tracking-Schutzes durchgeführtem Tracking.</a>
+</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Festlegen Ihrer Referrer-Richtlinie: Best Practices
+
+{% Aside 'objective' %} Legen Sie explizit eine den Datenschutz verbessernde Richtlinie wie `strict-origin-when-cross-origin` (oder eine strengere) fest. {% endAside %}
+
+Es gibt verschiedene Möglichkeiten, die Referrer-Richtlinien Ihrer Website festzulegen:
+
+- Per HTTP-Header
+- In Ihrem [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)-Code
+- Auf [Anfragebasis](https://javascript.info/fetch-api#referrer-referrerpolicy) per JavaScript
+
+Sie können unterschiedliche Richtlinien für verschiedene Seiten, Anfragen oder Elemente festlegen.
+
+Der HTTP-Header und das Meta-Element befinden sich beide auf Seitenebene. Die bei der Bestimmung der für ein Element geltenden Richtlinie geltende Reihenfolge lautet:
+
+1. Richtlinie für die Elementebene
+2. Richtlinie für die Seitenebene
+3. Standardeinstellung des Browsers
+
+**Beispiel:**
+
+`index.html`:
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+Das Bild wird mit einer geltenden Richtlinie von `no-referrer-when-downgrade` angefordert, während alle anderen Unterressourcenanfragen dieser Seite der Richtlinie `strict-origin-when-cross-origin` folgen.
+
+## Wie kann ich die Referrer-Richtlinie einsehen?
+
+Die Website [securityheaders.com](https://securityheaders.com/) kann dabei helfen, die von einer bestimmten Website oder Seite angewendete Richtlinie zu bestimmen.
+
+Sie können ebenfalls die Entwicklertools von Chrome, Edge oder Firefox nutzen, um die von einer bestimmten Anfrage genutzte Referrer-Richtlinie anzuzeigen. Zum Zeitpunkt der Erstellung dieses Artikels kann Safari den `Referrer-Policy`-Header nicht anzeigen, zeigt allerdings den gesendeten `Referer` an.
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Ein Screenshot des Netzwerk-Panels der Chrome-Entwicklertools mit Referrer und Referrer-Richtlinie.", width="800", height="416" %}<figcaption> Chrome-Entwicklertools, <b>Netzwerk</b>-Panel mit einer ausgewählten Anfrage.</figcaption></figure>
+
+## Welche Richtlinie sollten Sie für Ihre Website festlegen?
+
+Zusammenfassung: Legen Sie explizit eine den Datenschutz verbessernde Richtlinie wie `strict-origin-when-cross-origin` (oder eine strengere) fest.
+
+### Warum „explizit“?
+
+Wenn keine Referrer-Richtlinie festgelegt wurde, wird die Standardrichtlinie des Browsers verwendet – tatsächlich greifen Websites oft auf diese Standardrichtlinie des Browsers zurück. Dies ist jedoch nicht ideal, denn:
+
+- Die Standardrichtlinien von Browsern sind entweder `no-referrer-when-downgrade`, `strict-origin-when-cross-origin` oder strengere – je nach Browser und Modus (privat/inkognito). Das Verhalten Ihrer Website in verschiedenen Browsern ist also nicht vorhersehbar.
+- Browser verwenden strengere Standardeinstellungen wie `strict-origin-when-cross-origin` und Mechanismen wie [Referrer-Trimming](https://github.com/privacycg/proposals/issues/13) für Cross-Origin-Anfragen. Wenn Sie sich explizit für eine Datenschutzrichtlinie entscheiden, bevor sich die Browser-Standardeinstellungen ändern, haben Sie die Kontrolle und können nach Belieben Tests durchführen.
+
+### Weshalb `strict-origin-when-cross-origin` (oder strenger)?
+
+Sie benötigen eine sichere, datenschutzfreundliche und nützliche Richtlinie – was „nützlich“ dabei genau bedeutet, hängt davon ab, was Sie vom Referrer erwarten:
+
+- **Sicherheit**: Wenn Ihre Website HTTPS verwendet ([wenn nicht, machen Sie dies zu einer Priorität](/why-https-matters/)), möchten Sie nicht, dass die URLs Ihrer Website an Nicht-HTTPS-Anfragen durchsickern. Da jeder im Netzwerk diese sehen kann, würde dies Ihre Benutzer Person-in-the-Middle-Angriffen aussetzen. Die Richtlinien `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, `no-referrer` und `strict-origin` lösen dieses Problem.
+- **Verbesserung der Privatsphäre**: Bei einer Cross-Origin-Anfrage wird im Rahmen der Richtlinie `no-referrer-when-downgrade` die vollständige URL geteilt – dies schützt nicht die Privatsphäre. `strict-origin-when-cross-origin` und `strict-origin` teilen nur die Origin mit, und `no-referrer` gibt gar nichts preis. Damit bleiben Ihnen zum Schutz der Privatsphäre nur noch die Optionen `strict-origin-when-cross-origin`, `strict-origin` und `no-referrer` übrig.
+- **Nützlich**: `no-referrer` und `strict-origin` teilen nie die vollständige URL, selbst bei Anfragen mit gleichem Ursprungspunkt. Wenn Sie dies benötigen, ist `strict-origin-when-cross-origin` bessere Option.
+
+Daraus lässt sich schließen, dass **`strict-origin-when-cross-origin`** im Allgemeinen eine sinnvolle Wahl ist.
+
+**Beispiel: Festlegen einer Richtlinie von `strict-origin-when-cross-origin`:**
+
+`index.html`:
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+Oder serverseitig, zum Beispiel per Express-Framework:
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### Was ist, wenn `strict-origin-when-cross-origin` (oder strenger) nicht für alle Ihre Anwendungsfälle geeignet ist?
+
+Gehen Sie in diesem Fall **progressiv vor**: Legen Sie für Ihre Website eine schützende Richtlinie wie `strict-origin-when-cross-origin` und bei Bedarf eine eher tolerantere Richtlinie für spezifische Anfragen oder HTML-Elemente fest.
+
+### Beispiel: Richtlinie für die Elementebene
+
+`index.html`:
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Beachten Sie, dass Safari/WebKit `document.referrer` oder den `Referer`-Header für [Cross-Site](/same-site-same-origin/#same-site-cross-site)-Anfragen blockieren könnte. Siehe [weitere Details](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/).
+
+### Beispiel: Richtlinie für die Anfrageebene
+
+`script.js`:
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### Was sollten Sie weiteres beachten?
+
+Ihre Richtlinie sollten Sie entsprechend Ihrer Website und den spezifischen Anwendungsfällen wählen – diese Entscheidung liegt bei Ihnen, Ihrem Team und Ihrem Unternehmen. Wenn einige der URLs identifizierende oder sensible Daten enthalten, stellen Sie eine Richtlinie ein, bei der der Fokus auf dem Datenschutz liegt.
+
+{% Aside 'warning' %} Daten, die Ihnen nicht sensibel zu sein scheinen, können durchaus für Ihre Nutzer sensibel sein oder sie erwarten einfach, dass Daten dieser Art nicht stillschweigend anderen Origins (Cross-Origin) preisgeben werden. {% endAside %}
+
+## Verwendung des Referrers aus eingehenden Anfragen: Best Practices
+
+### Was ist zu tun, wenn die Funktionalität Ihrer Website die Referrer-URL eingehender Anfragen verwendet?
+
+#### Schützen Sie die Benutzerdaten
+
+Der `Referer` kann private, personenbezogene oder identifizierende Daten enthalten – stellen Sie also sicher, dass Sie diese auch als solche behandeln.
+
+#### Denken Sie daran, dass sich von ihnen erhaltene `Referer` ändern können
+
+Die Verwendung des Referrers aus eingehenden Cross-Origin-Anfragen bringt einige Einschränkungen mit sich:
+
+- Wenn Sie keine Kontrolle über die Implementierung der für das Senden der Anfragen genutzten Software haben, können Sie auch keine Annahmen über den erhaltenen `Referer`-Header (sowie über `document.referrer`) anstellen. Der Emittent der Anfrage kann sich jederzeit entscheiden, zu einer `no-referrer`-Richtlinie oder einer insgesamt strengeren Richtlinie im Vergleich zu vorher zu wechseln. Damit würden Sie weniger Daten über den `Referer` erhalten als früher.
+- Immer mehr Browser verwenden standardmäßig die Referrer-Richtlinie `strict-origin-when-cross-origin`. Dies bedeutet, dass Sie die Origin (anstelle der vollständigen Referrer-URL) mit eingehenden Cross-Origin-Anfragen jetzt möglicherweise nur noch mitgeteilt bekommen, wenn die Site, die diese sendet, keine Richtlinien festgelegt hat.
+- Browser könnten in Zukunft die Art und Weise ändern, auf die sie mit dem `Referer` umgehen. Beispielsweise könnten sie in Zukunft beschließen, Referrerinhalte in Cross-Origin-Anfragen für Unterressourcen immer auf die Origins zu beschränken, um die Privatsphäre der Benutzer zu schützen.
+- Der `Referer`-Header (sowie `document.referrer`) kann mehr Daten enthalten, als Sie benötigen, beispielsweise eine vollständige URL, wenn Sie lediglich wissen möchten, ob es sich um eine Cross-Origin-Anfrage handelt.
+
+#### Alternativen zu `Referer`
+
+Möglicherweise müssen Sie Alternativen in Betracht ziehen, wenn:
+
+- Eine wesentliche Funktion Ihrer Website die Referrer-URL eingehender Cross-Origin-Anfragen nutzt;
+- Und/oder wenn Ihre Website den benötigten Teil der Referrer-URL aus einer Cross-Origin-Anfrage nicht mehr erhält. Dies geschieht, wenn der Sender der Anfrage seine Richtlinie geändert hat oder wenn keine Richtlinie festgelegt wurde und die Richtlinie des Browsers geändert wurde (wie in [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+Um Alternativen zu definieren, analysieren Sie zuerst, welchen Teil des Referrers Sie verwenden.
+
+**Wenn Sie lediglich die Origin benötigen (`https://site-one.example`):**
+
+- Wenn Sie den Referrer in einem Skript verwenden, das Zugriff auf die oberste Ebene der Seite hat, ist `window.location.origin` eine Alternative.
+- Wenn verfügbar, geben Header wie [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) und [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) die `Origin` an oder beschreiben, ob es sich um eine Cross-Origin-Anfrage handelt, was möglicherweise genau das ist, was Sie brauchen.
+
+**Wenn Sie andere Elemente der URL benötigen (Pfad, Query-Parameter usw.):**
+
+- Gibt es eventuell Anfrageparameter die auf Ihren Anwendungsfall zugeschnitten sind, was Ihnen das Parsen des Referrers erspart.
+- Dann kann, wenn Sie den Referrer in einem Skript verwenden, das Zugriff auf die oberste Ebene einer Seite hat, `window.location.pathname` eine Alternative sein. Extrahieren Sie nur den Pfadabschnitt der URL und übergeben Sie ihn als Argument, damit keine potenziell sensiblen Informationen über die URL-Parameter weitergegeben werden.
+
+**Wenn Sie diese Alternativen nicht verwenden können:**
+
+- Prüfen Sie, ob Ihre Systeme so angepasst werden können, dass vom Sender der Anfrage (`site-one.example`) erwartet wird, dass die von Ihnen benötigten Informationen von ihm explizit in einer Art Konfiguration festlegt werden. Vorteile: expliziter, datenschutzfreundlicher für Benutzer von `site-one.example` und zukunftssicherer. Nachteile: möglicherweise mehr Arbeit von Ihrer Seite oder für die Benutzer Ihres Systems.
+- Prüfen Sie, ob die Site, die die Anfragen versendet, zustimmt, eine Referrer-Richtlinie von `no-referrer-when-downgrade` auf Element- oder Anfragebasis festzulegen. Nachteile: potenziell weniger Datenschutz für Benutzer von `site-one.example`, möglicherweise nicht von allen Browsern unterstützt.
+
+### Schutz vor Cross-Site Request Forgery (CSRF)
+
+Beachten Sie, dass sich ein Sender einer Anfrage jederzeit entscheiden kann, keinen Referrer zu senden, indem er eine Richtlinie von `no-referrer` festlegt (außerdem könnte ein böswilliger Akteur den Referrer sogar fälschen).
+
+Verwenden Sie [CSRF-Token](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) als Ihren primären Schutz. Für zusätzliche Sicherheit sollten Sie [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites) nutzen und anstelle des `Referer`-Headers Header wie den [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)-Header (verfügbar bei POST- und CORS-Anfragen) sowie [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (falls verfügbar) verwenden.
+
+### Protokollierung
+
+Stellen Sie sicher, sich eventuell im `Referer` befindende Benutzerdaten zu schützen.
+
+Wenn Sie nur den Ursprungspunkt verwenden, prüfen Sie, ob der [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)-Header eine Alternative sein könnte. Auf diese Weise erhalten Sie möglicherweise auf einfachere Weise die Informationen, die Sie zum Debuggen benötigen, ohne den Referrer analysieren zu müssen.
+
+### Zahlungen
+
+Zahlungsanbieter können für Sicherheitsüberprüfungen bei eingehenden Anfragen auf den `Referer`-Header setzen.
+
+Zum Beispiel:
+
+- Der Nutzer klickt unter `online-shop.example/cart/checkout` auf einen **Kaufen**-Button.
+- `online-shop.example` leitet zum Verwalten der Transaktion auf `payment-provider.example` um.
+- `payment-provider.example` gleicht den `Referer` dieser Anfrage mit einer Liste zulässiger `Referer`-Werte ab, die von den Händlern eingerichtet wurde. Wenn er mit keinem Listeneintrag übereinstimmt, dann lehnt `payment-provider.example` die Anfrage ab. Wenn es eine Übereinstimmung gibt, kann der Benutzer mit der Transaktion fortfahren.
+
+#### Best Practices für Sicherheitsprüfungen bei Bezahlvorgängen
+
+**Fazit: Als Zahlungsanbieter können Sie den `Referer` als grundlegenden Überprüfungsfaktor zur Verhinderung naiver Angriffe verwenden – Sie sollten jedoch zusätzlich unbedingt eine andere, zuverlässigere Überprüfungsmethode einsetzen.**
+
+Der `Referer`-Header alleine stellt keine zuverlässige Basis für eine Sicherheitsprüfung dar, denn die Site von der die Anfrage ausgeht, könnte unabhängig davon, ob es sich um einen legitimen Händler handelt oder nicht, eine `no-referrer`-Richtlinie festgelegt haben, die die `Referer`-Informationen vor dem Zahlungsanbieter zurückhält. Als Zahlungsanbieter kann Ihnen ein Blick auf den `Referer`-Header jedoch zumindest dabei helfen naive Angreifer abzuwehren, die keine `no-referrer`-Richtlinie festgelegt haben. Es bietet sich also an, den `Referer` für eine erste grundlegende Sicherheitsprüfung zu nutzen. Sollten Sie dies tun, dann:
+
+- **Erwarten Sie nicht, dass der `Referer` immer verfügbar ist; und sollte er verfügbar sein, dann durchsuchen Sie ihn nur nach dem Minimum an möglichen enthaltenen Informationen, also nach der Origin**. Wenn Sie die Liste mit erlaubten `Referer`-Werten festlegen, dann stellen Sie sicher, dass dort kein Pfad, sondern nur die Origin enthalten ist. Beispiel: Die erlaubten `Referer`-Werte für `online-shop.example` sollten die Angabe `online-shop.example` und nicht `online-shop.example/cart/checkout` beinhalten. Warum? Weil, wenn Sie entweder überhaupt keinen `Referer` erwarten oder Sie einen `Referer`-Wert erwarten, der der Origin der anfragestellenden Website entspricht, unerwartete Fehler vermieden werden können, da **keine Vermutungen darüber angestellt werden müssen, welche `Referrer-Policy`** von Ihrem Händler festgelegt wurde oder wie sich Browser verhalten könnten, wenn der Händler keine Richtlinie festgelegt hat. Sowohl die Site als auch der Browser könnten die Informationen des in der eingehenden Anfrage gesendeten `Referers` auf die Origin beschränken oder den `Referer` gar nicht senden.
+- Wenn der `Referer` vorhanden ist oder wenn er vorhanden ist und zusätzlich Ihre einfache Sicherheitsprüfung der `Referer`-Origin erfolgreich war, können Sie den Benutzer zu einer weiteren zuverlässigeren Verifizierungsmethode weiterleiten (siehe unten).
+
+**Welche zuverlässigeren Verifizierungsmethoden gibt es?**
+
+Eine zuverlässige Verifizierungsmethode ist es, den Steller der Anfrage **einen Hash der Anfrageparameter** in Verbindung mit einem eindeutigen Schlüssel erstellen zu lassen. Sie können dann als Zahlungsanbieter **auf Ihrer Seite den gleichen Hash berechnen** und die Anfrage nur akzeptieren, wenn der Hash mit dem von Ihnen berechneten übereinstimmt.
+
+**Was passiert mit dem `Referer`, wenn eine HTTP-Website eines Händlers ohne Referrer-Richtlinie Weiterleitungen zu einem HTTPS-Zahlungsanbieter durchführt?**
+
+In der Anfrage an den HTTPS-Zahlungsanbieter wird kein `Referer` sichtbar sein, da die [meisten Browser](#default-referrer-policies-in-browsers) standardmäßig auf die Richtlinien `strict-origin-when-cross-origin` oder `no-referrer-when-downgrade` zurückgreifen, wenn eine Website keine Richtlinie festgelegt hat. Beachten Sie auch, dass [Chromes Wechsel zur Verwendung einer neuen Standardrichtlinie](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) dieses Verhalten nicht ändert.
+
+{% Aside %}
+
+Wenn Ihre Website HTTP verwendet, [migrieren Sie zu HTTPS](/why-https-matters/).
+
+{% endAside %}
+
+## Fazit
+
+Eine schützende Referrer-Richtlinie stellt eine großartige Möglichkeit dar, Ihren Benutzern mehr Privatsphäre zu bieten.
+
+Um mehr über diverse Techniken zum Schutz Ihrer Benutzer zu erfahren, sehen Sie sich web.dev's Sammlung von Artikeln mit [Sicherheitsbezug](/secure/) an!
+
+*Mit herzlichem Dank für Beiträge und Feedback an alle Rezensenten – insbesondere Kaustubha Govind, David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck und Kayce Basques.*
+
+## Ressourcen
+
+- [Verstehen von „Same-Site“ und „Same-Origin“](/same-site-same-origin/)
+- [Ein neuer Sicherheitsheader: Referrer-Richtlinie (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [„Referrer-Richtlinie“ auf MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [„Referer-Header: Datenschutz- und Sicherheitsbedenken“ bei MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Chrome-Änderung: Blink – Implementierungsabsicht](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Chrome-Änderung: Blink – Auslieferungsabsicht](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Chrome-Aktualisierung: Statuseintrag](https://www.chromestatus.com/feature/6251880185331712)
+- [Chrome-Aktualisierung: Blogpost zur 85 Beta](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [GitHub-Thread zum Kürzen von Refferern: Wie sich verschiedene Browser verhalten](https://github.com/privacycg/proposals/issues/13)
+- [Referrer-Richtlinien-Spezifikation](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/de/blog/samesite-cookies-explained/index.md b/src/site/content/de/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..29320b160b7
--- /dev/null
+++ b/src/site/content/de/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,246 @@
+---
+title: SameSite-Cookies erklärt
+subhead: Sichern Sie Ihre Website, indem Sie lernen, wie Sie Ihre Cross-Site-Cookies explizit kennzeichnen.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: Erfahren Sie, wie Sie Ihre Cookies für die Nutzung durch Erst- und Drittanbieter mit dem SameSite-Attribut versehen können. Sie können die Sicherheit Ihrer Website verbessern, indem Sie die Werte „Lax“ und „Strict“ für das SameSite-Attribut zum Schutz vor CSRF-Angriffen nutzen. Durch Angabe des neuen Attributs „None“ können Sie Ihre Cookies explizit für die webseitenübergreifende (cross-site) Nutzung kennzeichnen.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Dieser Artikel ist Teil einer Reihe über `SameSite`-Cookie-Attribute betreffende Änderungen:
+
+- [SameSite-Cookies erklärt](/samesite-cookies-explained/)
+- [SameSite-Cookies-Rezepte](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+Cookies sind eine der verfügbaren Methoden, um Websites einen dauerhaften Status hinzuzufügen. Im Laufe der Jahre haben ihre Funktionen zugenommen und sie sind weiterentwickelt worden, wobei allerdings auch einige problematische Altlasten für die Plattform entstanden sind. Um dem entgegenzuwirken, ändern Browser (einschließlich Chrome, Firefox und Edge) ihr Verhalten und setzen datenschutzfreundlichere Standardeinstellungen durch.
+
+Jedes Cookie ist ein `key=value`-Paar mit einer Reihe von Attributen, die steuern, wann und wo dieses Cookie verwendet wird. Sie haben diese Attribute wahrscheinlich bereits verwendet, um Dinge wie Ablaufdaten festzulegen oder anzugeben, dass das Cookie nur über HTTPS gesendet werden soll. Server setzen Cookies, indem sie in ihrer Antwort den treffend benannten `Set-Cookie`-Header senden. Für alle Details können Sie sich das Dokument [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1) durchlesen, aber hier vorerst eine kurze Erinnerung.
+
+Angenommen, Sie haben einen Blog, in dem Sie Ihren Benutzern eine „Neuigkeiten“-Werbeaktion anzeigen möchten. Benutzer können die Werbeaktion ausblenden und sehen sie dann für eine Weile nicht mehr. Sie können diese Einstellung in einem Cookie speichern, den sie in einem Monat (2.600.000 Sekunden) ablaufen lassen und eine Übertragung ausschließlich über HTTPS zulassen. Dieser Header würde so aussehen:
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Drei Cookies werden von einem Server in einer Antwort an einen Browser gesendet", width="800", height="276", style="max-width: 35vw" %}<figcaption> Server setzen Cookies mithilfe des <code>Set-Cookie</code>-Headers.</figcaption></figure>
+
+Wenn sich Ihre Besucher eine Seite ansehen, die diese Anforderungen erfüllt, z. B. wenn eine sichere Verbindung besteht und das Cookie weniger als einen Monat alt ist, senden die Browser diesen Header in der Anfrage:
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Drei Cookies werden in einer Anfrage von einem Browser an einen Server gesendet", width="800", height="165", style="max-width: 35vw" %}<figcaption> Ihr Browser sendet Cookies im <code>Cookie</code>-Header zurück.</figcaption></figure>
+
+Sie können die für diese Site verfügbaren Cookies auch per JavaScript mit `document.cookie` hinzufügen und lesen. Durch eine Zuweisung an `document.cookie` wird ein Cookie mit diesem Schlüssel erstellt oder überschrieben. Sie können beispielsweise Folgendes in der JavaScript-Konsole Ihres Browsers versuchen:
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+Beim Lesen von `document.cookie` werden alle im aktuellen Kontext zugänglichen Cookies ausgegeben, wobei jedes Cookie durch ein Semikolon getrennt ist:
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript greift auf Cookies im Browser zu", width="600", height="382", style="max-width: 35vw" %}<figcaption> JavaScript kann mit <code>document.cookie</code> auf Cookies zugreifen.</figcaption></figure>
+
+Wenn Sie dies auf einer Auswahl beliebter Websites ausprobieren, werden Sie feststellen, dass die meisten von ihnen deutlich mehr als nur drei Cookies setzen. In den meisten Fällen werden diese Cookies bei jeder einzelnen Anfrage an eine dieser Domains gesendet, was eine Reihe von Auswirkungen hat. Die Upload-Bandbreite Ihrer Benutzer ist oft stärker eingeschränkt als die Download-Bandbreite, sodass der Overhead für alle ausgehenden Anfragen die Zeit bis zum ersten empfangenen Byte verzögert. Gehen Sie beim Festlegen der Anzahl und Größe der von Ihnen gesetzten Cookies zurückhaltend vor. Verwenden Sie das `Max-Age`-Attribut, um sicherzustellen, dass Cookies nicht länger als nötig vorhanden bleiben.
+
+## Was sind Erstanbieter- und Drittanbieter-Cookies?
+
+Wenn Sie einer Auswahl von Webseiten zurückkehren, die Sie bereits zuvor besucht haben, dann ist Ihnen wahrscheinlich aufgefallen, dass Cookies für eine Vielzahl von Domains vorhanden sind, und nicht nur für die, die Sie gerade besuchen. So werden Cookies für die Domain der aktuell besuchten und in der Adresszeile des Browsers angezeigten Seite, als **Erstanbieter**-Cookies bezeichnet. Cookies von anderen Domains als der aktuellen Webseite werden als **Drittanbieter**-Cookies bezeichnet. Dies sind keine absoluten Bezeichnungen, sondern sie sind relativ zum Kontext des Benutzers aufzufassen. Ein und derselbe Cookie kann entweder ein Erstanbieter- oder ein Drittanbieter-Cookie sein, je nachdem, auf welcher Website sich der Benutzer gerade befindet.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Drei Cookies werden über verschiedene Anfragen einer Seite an einen Browser gesendet", width="800", height="346", style="max-width: 35vw" %}<figcaption> Cookies auf einer Seite können von einer Vielzahl unterschiedlicher Domains stammen.</figcaption></figure>
+
+Führen wir einmal das oben angefangene Beispiel weiter, und nehmen an, einer Ihrer Blog-Posts würde unter `/blog/img/amazing-cat.png` gehostet und ein Bild einer besonders tollen Katze enthalten. Weil es ein so tolles Bild ist, verwendet es eine andere Person direkt auf ihrer eigenen Website. Wenn ein Besucher Ihren Blog besucht hat und der Cookie die `promo_shown` vorhanden ist, dann wird, wenn sie `amazing-cat.png` auf der Website der anderen Person betrachten, das Cookie für das Bild in der Anfrage **mitübertragen**. Dies ist für niemanden besonders nützlich, da `promo_shown` für nichts auf der Webseite dieser anderen Person verwendet wird, es fügt der Anfrage lediglich Overhead hinzu.
+
+Wenn dies also ein unbeabsichtigter Effekt ist, warum sollten Sie das tun? Dieser Mechanismus ermöglicht es Webseiten, Ihren Zustand beizubehalten, wenn sie in einem Drittanbieterkontext verwendet werden. Wenn Sie beispielsweise ein YouTube-Video auf Ihrer Website einbetten, sehen Besucher im Player die Option „Später ansehen“. Ist Ihr Besucher bereits bei YouTube angemeldet, wird diese Sitzung im eingebetteten Player durch einen Drittanbieter-Cookie zur Verfügung gestellt. Dies bedeutet, dass die Schaltfläche „Später ansehen“ das Video in einem Schritt speichert, anstatt ihn zur Anmeldung aufzufordern oder von Ihrer Seite weg zu YouTube zu navigieren.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="Dasselbe Cookie wird in drei verschiedenen Kontexten gesendet", width="800", height="433", style="max-width: 35vw" %}<figcaption> Beim Besuch verschiedener Seiten wird ein Cookie im Drittanbieterkontext gesendet.</figcaption></figure>
+
+Eine der kulturellen Eigenschaften des Webs ist, dass es in der Regel offen ist. Dies ist einer der Gründe, aus denen so vielen Menschen ermöglicht wurde, dort ihre eigenen Inhalte und Apps zu erstellen. Andererseits hat dies jedoch auch eine Reihe von Sicherheits- und Datenschutzbedenken mit sich gebracht. Cross-Site Request Forgery-Angriffe (CSRF) beruhen darauf, dass Cookies für alle Anfragen mit beliebigen Zielen angehängt werden, unabhängig davon, wer diese Anfragen initiiert. Wenn Sie beispielsweise `evil.example` besuchen, kann diese Seite Anfragen für `your-blog.example` auslösen und Ihr Browser würde dazu ohne weiteres die zugehörigen Cookies anhängen. Wenn Ihr Blog also nicht sicherstellt, dass diese Anfragen korrekt validiert werden, dann kann `evil.example` Aktionen wie das Löschen von Beiträgen oder das Hinzufügen eigener Inhalte auslösen.
+
+Benutzer werden sich auch immer mehr bewusst, wie Cookies verwendet werden können, um ihre Aktivitäten über mehrere Webseiten nachzuverfolgen. Bisher gab es für Sie jedoch keine Möglichkeit, Ihre Absicht mit dem Cookie explizit anzugeben. Ihr `promo_shown`-Cookie sollte nur in einem Erstanbieterkontext gesendet werden, während mit einem Sitzungscookie für ein Widget, das auf anderen Webseiten eingebettet werden soll, eine klare Absicht besteht, den Anmeldestatus in einem Drittanbieterkontext bereitzustellen.
+
+## Geben Sie die Cookie-Verwendung explizit mit dem Attribut `SameSite` an
+
+Durch die Einführung des `SameSite`-Attributs (definiert in [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)) können Sie angeben, ob die Verwendung Ihres Cookies auf einen Erstanbieter- oder Same-Site-Kontext beschränkt werden soll. Es ist hilfreich, genau zu verstehen, was „Site“ hier bedeutet. Die Site ist die Kombination aus dem Domain-Suffix und dem Teil der Domain direkt davor. So ist beispielsweise die Domain `www.web.dev` Teil der `web.dev`-Site.
+
+{% Aside 'key-term' %}
+
+Wenn der Benutzer auf `www.web.dev` ist und ein Bild von `static.web.dev` abruft, dann stellt dies eine **Same-Site**-Anfrage dar.
+
+{% endAside %}
+
+Dies wird mithilfe der [öffentlichen Suffixliste](https://publicsuffix.org/) definiert, die nicht nur Top-Level-Domains wie `.com`, sondern auch Dienste wie `github.io` enthält. So wird es ermöglicht, dass `your-project.github.io` und `my-project.github.io` als separate Sites betrachtet werden können.
+
+{% Aside 'key-term' %}
+
+Wenn sich der Benutzer auf `your-project.github.io` befindet und ein Bild von `my-project.github.io` anfordert, ist dies eine **Cross-Site**-Anfrage.
+
+{% endAside %}
+
+Die Einführung des `SameSite` Attributs in ein Cookie bietet drei verschiedene Möglichkeiten, dieses Verhalten zu steuern. Sie können das Attribut nicht angeben, oder Sie können `Strict` oder `Lax` , um das Cookie auf Anfragen derselben Site zu beschränken.
+
+Wenn Sie `SameSite` auf `Strict` stellen, wird Ihr Cookie nur in einem Erstanbieterkontext gesendet. Aus Benutzersicht wird das Cookie nur gesendet, wenn die Site für das Cookie mit der Site übereinstimmt, die derzeit in der URL-Leiste des Browsers angezeigt wird. Wenn also das `promo_shown`-Cookie wie folgt eingestellt wurde:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+Wenn der Benutzer sich auf Ihrer Website aufhält, wird das Cookie wie erwartet mit der Anfrage gesendet. Wenn Sie jedoch einem Link zu Ihrer Site folgen, beispielsweise von einer anderen Site oder über eine E-Mail von einem Freund, wird bei dieser ersten Anfrage kein Cookie gesendet. Dies ist gut, wenn es um Cookies geht, die sich auf Funktionen beziehen, denen immer eine vorherige Navigation vorausgeht, wie zum Beispiel das Ändern eines Passworts oder eine Bestellung, ist jedoch zu restriktiv für `promo_shown`. Wenn Ihr Leser dem Link auf die Site folgt, möchte er, dass das Cookie gesendet wird, damit seine Präferenz angewendet werden kann.
+
+Hier kommt `SameSite=Lax` zum Zug, indem es erlaubt, dass das Cookie bei dieser Top-Level-Navigation mitgesendet wird. Sehen wir uns das Beispiel mit der Katze aus dem oben stehenden Artikel noch einmal an, bei dem eine andere Website auf Ihren Inhalt verweist. Sie verwenden Ihr Foto der Katze direkt und stellen einen Link zu Ihrem ursprünglichen Artikel bereit.
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+Und das Cookie wurde so gesetzt:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+Wenn sich der Leser im Blog der anderen Person befindet, wird das Cookie **nicht gesendet**, wenn der Browser `amazing-cat.png` anfordert. Wenn der Leser jedoch dem Link zu `cat.html` in Ihrem Blog folgt, **enthält** diese Anfrage das Cookie. Dies macht `Lax` zu einer guten Wahl für Cookies, die das Aussehen einer Website betreffen, wobei `Strict` für Cookies nützlich ist, die Nutzeraktionen betreffen.
+
+{% Aside 'caution' %}
+
+Weder `Strict` noch `Lax` sind eine Komplettlösung für die Sicherheit Ihrer Webseite. Cookies werden als Teil der Anfrage des Benutzers gesendet und Sie sollten genauso behandelt werden wie jede andere Benutzereingabe. Das bedeutet, dass die Eingaben genauso bereinigt und validiert werden sollten. Verwenden Sie einen Cookie niemals um Daten zu speichern, die Sie als serverseitiges Geheimnis betrachten.
+
+{% endAside %}
+
+Schließlich besteht die Möglichkeit, den Wert nicht anzugeben, was bislang implizit bedeutete, dass das Cookie in allen Kontexten gesendet werden soll. Im neuesten Entwurf von [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) wird dies durch die Einführung eines neuen Wertes von `SameSite=None` explizit festgelegt. Das bedeutet, dass Sie mit `None` klar kommunizieren können, dass Sie das Cookie absichtlich im Drittanbieterkontext senden möchten.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Drei Cookies mit den kontextabhängigen Bezeichnungen „None“, „Lax“ oder „Strict“", width="800", height="456", style="max-width: 35vw" %}<figcaption> Geben Sie den Kontext eines Cookies explizit als <code>None</code> , <code>Lax</code> oder <code>Strict</code> an.</figcaption></figure>
+
+{% Aside %}
+
+Wenn Sie Dienste bereitstellen, der von anderen Websites genutzt werden, wie z. B. Widgets, eingebettete Inhalte, Partnerprogramme, Werbung oder Anmeldung auf mehreren Websites, sollten Sie `None` wählen, um sicherzustellen, dass Ihre Absicht klar ist.
+
+{% endAside %}
+
+## Änderungen am Standardverhalten ohne SameSite
+
+Obwohl das `SameSite`-Attribut weithin unterstützt wird, wird es leider nicht von vielen Entwicklern genutzt. Die offene Standardeinstellung, mit der Cookies überall hingesendet werden können, sichert zwar in allen Anwendungsfällen die Funktion, aber die Benutzer sind anfällig für CSRF und unbeabsichtigte Informationslecks. Um Entwickler zu ermutigen, ihre Absicht zu äußern und den Benutzern ein sichereres Erlebnis zu bieten, enthält der IETF-Vorschlag [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) zwei wichtige Änderungen:
+
+- Cookies ohne `SameSite`-Attribut werden wie solche mit dem Attribut `SameSite=Lax` behandelt.
+- Cookies mit `SameSite=None` müssen auch `Secure` angeben, sie erfordern also einen sicheren Kontext.
+
+Chrome implementiert dieses Standardverhalten ab Version 84. [Firefox stellt](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) sie zum Testen ab Firefox 69 bereit und wird sie in Zukunft zum Standardverhalten machen. Um dieses Verhalten in Firefox zu testen, öffnen Sie [`about:config`](http://kb.mozillazine.org/About:config) und legen Sie `network.cookie.sameSite.laxByDefault` fest. Auch für [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) ist geplant, das Standardverhalten zu ändern.
+
+{% Aside %}
+
+Dieser Artikel wird aktualisiert, sobald weitere Browser Unterstützung ankündigen.
+
+{% endAside %}
+
+### `SameSite=Lax` in der Standardeinstellung
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+Wenn Sie ein Cookie ohne festgelegtem `SameSite`-Attribut senden…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+Wird der Browser das Cookie so interpretieren, als wäre `SameSite=Lax` angegeben worden.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Obwohl dies als eine sicherere Standardeinstellung gedacht ist, sollten Sie idealerweise dennoch ein explizites `SameSite`-Attribut festlegen, anstatt sich darauf zu verlassen, dass der Browser dieses für Sie anwendet. Dies macht Ihre Absicht für das Cookie deutlich und verbessert die Chancen auf ein übereinstimmendes Benutzererlebnis in allen Browsern.
+
+{% Aside 'caution' %}
+
+Das von Chrome angewendete Standardverhalten ist etwas toleranter als mit explizit angegebenem `SameSite=Lax`, da es das Senden bestimmter Cookies bei Top-Level-POST-Anfragen ermöglicht. Die genauen Details können Sie der [Ankündigung von blink-dev](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ) entnehmen. Dies ist als vorübergehende Lösung gedacht. Sie sollten für Ihre Cross-Site-Cookies aber dennoch die Einstellung `SameSite=None; Secure` nutzen.
+
+{% endAside %}
+
+### `SameSite=None` muss sicher sein
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+Das Setzen eines Cookies ohne `Secure` **wird abgelehnt** .
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+Sie müssen sicherstellen, dass Sie `SameSite=None` mit dem Attribut `Secure` koppeln.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Sie können dieses Verhalten ab Chrome 76 testen, indem Sie `about://flags/#cookies-without-same-site-must-be-secure` aktivieren und ab Firefox 69 unter [`about:config`](http://kb.mozillazine.org/About:config) die Einstellung `network.cookie.sameSite.noneRequiresSecure` setzen.
+
+Sie sollten diese Einstellungen beim Setzen neuer Cookies anwenden und vorhandene Cookies aktiv aktualisieren, auch wenn deren Ablaufdatum noch in der Ferne liegt.
+
+{% Aside 'note' %}
+
+Wenn Sie auf Dienste angewiesen sind, die Drittanbieterinhalte auf Ihrer Website bereitstellen, sollten Sie sich auch bei diesen Anbietern erkundigen, ob die entsprechenden Dienste aktualisiert wurden. Möglicherweise müssen Sie Ihre Abhängigkeiten oder Snippets aktualisieren, um sicherzustellen, dass Ihre Website das neue Verhalten übernimmt.
+
+{% endAside %}
+
+Beide Änderungen sind abwärtskompatibel mit Browsern, die die vorherige Version des `SameSite`-Attributs korrekt implementiert haben oder es überhaupt nicht unterstützen. Indem Sie diese Änderungen auf Ihre Cookies anwenden, erklären Sie explizit deren beabsichtigte Verwendung, anstatt sich auf das Standardverhalten des Browsers zu verlassen. Ebenso sollten alle Clients, die `SameSite=None` noch nicht erkennen, es einfach ignorieren und weiterarbeiten, als ob das Attribut nicht gesetzt wäre.
+
+{% Aside 'warning' %}
+
+Eine Reihe älterer Browserversionen, einschließlich Versionen der Browser Chrome, Safari und des UC-Browsers, sind mit dem neuen `None`-Attribut nicht kompatibel und könnten das Cookie ignorieren oder einschränken. Dieses Verhalten wurde in aktuellen Versionen behoben, Sie sollten jedoch Ihren Datenverkehr überprüfen, um festzustellen, ob Benutzer von Ihnen betroffen sind. Sie können die [Liste der bekannten inkompatiblen Clients auf der Chromium-Website](https://www.chromium.org/updates/same-site/incompatible-clients) einsehen.
+
+{% endAside %}
+
+## `SameSite`-Cookie-Rezepte
+
+Weitere Informationen dazu, wie Sie Ihre Cookies genau aktualisieren, um diese Änderungen zu `SameSite=None` und den einhergehenden Unterschied im Browserverhalten zu berücksichtigen, finden Sie im Folgeartikel [SameSite-Cookie-Rezepte](/samesite-cookie-recipes) .
+
+_Herzlichen Dank für Beiträge und Feedback von Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner und Vivek Sekhar_
+
+_Cookie-Held-Bild von [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) auf [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/de/de.11tydata.js b/src/site/content/de/de.11tydata.js
new file mode 100644
index 00000000000..46f40a871ba
--- /dev/null
+++ b/src/site/content/de/de.11tydata.js
@@ -0,0 +1,32 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    translated: 'none',
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/de/lang.js b/src/site/content/de/lang.js
new file mode 100644
index 00000000000..385b981505c
--- /dev/null
+++ b/src/site/content/de/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'de',
+  locale: 'de_DE',
+};
diff --git a/src/site/content/de/secure/cross-origin-isolation-guide/index.md b/src/site/content/de/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..8f3eae0c28f
--- /dev/null
+++ b/src/site/content/de/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Eine Anleitung zum Ermöglichen einer Cross-Origin-Isolierung
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-05-06
+subhead: Die Cross-Origin-Isolation ermöglicht es einer Webseite, leistungsstarke Funktionen wie SharedArrayBuffer zu verwenden. In diesem Artikel wird erläutert, wie Sie Cross-Origin-Isolierung auf Ihrer Website aktivieren.
+description: Die Cross-Origin-Isolation ermöglicht es einer Webseite, leistungsstarke Funktionen wie SharedArrayBuffer zu verwenden. In diesem Artikel wird erläutert, wie Sie Cross-Origin-Isolierung auf Ihrer Website aktivieren.
+tags:
+  - security
+---
+
+In dieser Anleitung erfahren Sie, wie Sie die Cross-Origin-Isolierung aktivieren. Cross-Origin-Isolierung wird vorausgesetzt, wenn Sie [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/), einen [hochauflösenden Timer mit mehr Genauigkeit](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/) oder das JS Self-Profiling API verwenden möchten.
+
+Wenn Sie beabsichtigen, Cross-Origin-Isolierung zu aktivieren, dann schätzen Sie zuvor ab, welche Auswirkungen dies auf andere Cross-Origin-Ressourcen auf Ihrer Website hätte, wie z. B. auf platzierte Anzeigen.
+
+{% Details %} {% DetailsSummary %} Stellen Sie fest, wo auf Ihrer Website `SharedArrayBuffer` verwendet wird.
+
+Ab Chrome 92 funktionieren Funktionen, die `SharedArrayBuffer` nutzen, nicht mehr ohne Cross-Origin-Isolierung. Wenn Sie aufgrund einer `SharedArrayBuffer`-Deprecation-Meldung auf dieser Seite gelandet sind, scheint Ihre Website oder eine der darin eingebetteten Ressourcen `SharedArrayBuffer` zu verwenden. Um sicherzustellen, dass auf Ihrer Website keine Unterbrechungen aufgrund veralteter Funktionen auftreten, ermitteln Sie zunächst, wo sie verwendet wird.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- Aktivieren Sie die Cross-Origin-Isolierung, um `SharedArrayBuffer` weiternutzen zu können.
+- Wenn Sie auf Drittanbietercode angewiesen sind, der `SharedArrayBuffer` nutzt, fordern Sie den Drittanbieter auf, Maßnahmen zu ergreifen. {% endAside %}
+
+Wenn Sie sich nicht sicher sind, wo auf Ihrer Site ein `SharedArrayBuffer` verwendet wird, gibt es zwei Möglichkeiten, dies herauszufinden:
+
+- Verwendung der Chrome-Entwicklertools
+- (Erweitert) Nutzen von Deprecation Reporting
+
+Wenn Sie bereits wissen, wo Sie `SharedArrayBuffer` nutzen, fahren Sie mit dem Artikel [Analysieren der Auswirkungen der Cross-Origin-Isolierung](#analysis) fort.
+
+### Verwendung der Chrome-Entwicklertools
+
+Die [Chrome-Entwicklertools](https://developer.chrome.com/docs/devtools/open/) ermöglichen es Entwicklern, Websites zu überprüfen.
+
+1. [Öffnen Sie die Chrome-Entwicklertools](https://developer.chrome.com/docs/devtools/open/) auf der Seite, auf der Sie den Einsatz von `SharedArrayBuffer` vermuten.
+2. Wählen Sie das **Konsolenfenster** aus.
+3. Wenn die Seite `SharedArrayBuffer` nutzt, wird die folgende Meldung angezeigt:
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. Der Dateiname und die Zeilennummer am Ende der Nachricht (z. B. `common-bundle.js:535`) geben an, woher der `SharedArrayBuffer` stammt. Wenn es sich um eine Bibliothek eines Drittanbieters handelt, wenden Sie sich an die Entwickler, um das Problem zu beheben. Wenn es als Teil Ihrer Website implementiert wurde, folgen Sie der Anleitung unten, um die Cross-Site-Isolierung zu aktivieren.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="DevTools-Konsolenwarnung bei Verwendung von SharedArrayBuffer ohne Cross-Origin-Isolation", width="800", height="163" %}<figcaption> DevTools-Konsolenwarnung, wenn SharedArrayBuffer ohne Cross-Origin-Isolierung verwendet wird.</figcaption></figure>
+
+### (Erweitert) Nutzen von Deprecation Reporting
+
+Einige Browser verfügen über [eine Funktion zur Berichterstattung über veraltete APIs](https://wicg.github.io/deprecation-reporting/) zu einem bestimmten Endpunkt.
+
+1. [Richten Sie einen Berichtsserver für Meldungen zu veralteten APIs ein und rufen Sie die Berichts-URL ab](/coop-coep/#set-up-reporting-endpoint). Sie können dies erreichen, indem Sie entweder einen öffentlichen Dienst nutzen oder einen eigenen aufsetzen.
+2. Legen Sie den folgenden HTTP-Header auf Seiten fest, die `SharedArrayBuffer` bereitstellen könnten und  verwenden Sie darin die Berichts-URL.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. Sobald der Header ausgegeben wird, sollte der von ihnen festgelegte Endpunkt mit dem Sammeln von Berichten über veraltete Software (Deprecation Reports) beginnen.
+
+Sehen Sie sich hier eine Beispielimplementierung an: [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me).
+
+{% endDetails %}
+
+## Analysieren Sie die Auswirkungen der Cross-Origin-Isolierung {: #analysis}
+
+Wäre es nicht großartig, wenn Sie die Auswirkungen abschätzen könnten, die die Aktivierung von Cross-Origin-Isolierung auf Ihre Website haben würde, ohne dabei tatsächlich Fehler auf der Website hervorzurufen? Die HTTP-Header für [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) sowie [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) ermöglichen Ihnen genau das.
+
+1. Legen Sie in Ihrem Dokument auf oberster Websiteebene die Einstellung [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) fest. Wie der Name andeutet, sendet dieser Header nur Berichte über die Auswirkungen, die `COOP: same-origin` auf Ihre Website haben **würde** – die tatsächliche Kommunikation mit Popup-Fenstern wird nicht ausgesetzt.
+2. Setzen Sie die Einstellungen für die Berichterstellung und konfigurieren Sie einen Webserver zum Empfangen und Speichern der Berichte.
+3. Legen Sie in Ihrem Dokument auf oberster Websiteebene die Einstellung [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources). Auch dieser Header zeigt Ihnen die Auswirkungen der Aktivierung von `COEP: require-corp`, ohne die Funktion Ihrer Site tatsächlich zu beeinträchtigen. Sie können diesen Header so konfigurieren, dass Berichte an denselben Berichtsserver gesendet werden, den Sie im vorherigen Schritt eingerichtet haben.
+
+{% Aside %} Sie können ebenfalls [die **Domain**-Spalte](https://developer.chrome.com/docs/devtools/network/#information) im **Netzwerk**-Panel der Chrome-Entwicklertools aktivieren, um einen grundlegenden Überblick über die betroffenen Ressourcen zu erhalten. {% endAside %}
+
+{% Aside 'caution' %}
+
+Das Aktivieren der Cross-Origin-Isolierung blockiert das Laden von Cross-Origin-Ressourcen, die Sie nicht explizit dafür aktivieren, und verhindert, dass Ihr Dokument auf oberster Websiteebene mit Popup-Fenstern kommunizieren kann.
+
+Wir haben nach Möglichkeiten gesucht, `Cross-Origin-Resource-Policy` in einem größeren Maßstab bereitzustellen, da die Cross-Origin-Isolierung derzeit erfordert, dass alle Unterressourcen explizit dafür aktiviert werden müssen. Uns kam schließlich die Idee, in die entgegengesetzte Richtung zu gehen: [einen neuen „berechtigungslosen“ COEP-Modus](https://github.com/mikewest/credentiallessness/), der es ermöglicht, Ressourcen ohne CORP-Header zu laden, indem alle ihrer Berechtigungsinformationen entfernt werden. Wir finden noch im Detail heraus, wie dies funktionieren könnte, hoffen aber, dass es Ihnen erleichtern wird, sicherzustellen, dass all Ihre Unterressourcen den Header `Cross-Origin-Resource-Policy` senden.
+
+Es ist weiterhin bekannt, dass der Header`Cross-Origin-Opener-Policy: same-origin` Fehler mit Integrationen verursacht, die auf Cross-Origin-Fensterinteraktionen angewiesen sind, beispielsweise OAuth oder Zahlungsdienste. Um dieses Problem zu mildern, untersuchen wir die Möglichkeit, die [Bedingung zu lockern](https://github.com/whatwg/html/issues/6364), um eine Cross-Origin-Isolierung von `Cross-Origin-Opener-Policy: same-origin-allow-popups` zuzulassen. Auf diese Weise ist die Kommunikation mit dem selbstständig geöffneten Fenster möglich.
+
+Wenn Sie die Cross-Origin-Isolierung aktivieren möchten, diese Herausforderungen sie jedoch davon abhalten, empfehlen wir Ihnen, [sich für eine Origin-Trial anzumelden](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) und zu warten, bis die neuen Modi verfügbar sind. Wir planen nicht, die Origin-Trial zu beenden, bevor diese neuen Modi verfügbar sind.
+
+{% endAside %}
+
+## Minderung der Auswirkungen der Cross-Origin-Isolierung
+
+Nachdem Sie nun festgestellt haben, welche Ressourcen von der Cross-Origin-Isolierung betroffen sind, finden Sie hier allgemeine Richtlinien dazu, wie Sie diese Cross-Origin-Ressourcen tatsächlich aktivieren:
+
+1. Legen Sie für Cross-Origin-Ressourcen wie Bilder, Skripts, Stylesheets, iframes und andere den Header [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin) fest. Setzen Sie für Same-Site-Ressourcen den Header [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin).
+2. Legen Sie das `crossorigin`-Attribut im HTML-Dokument auf oberster Websiteebene fest, wenn die Ressource per [CORS](/cross-origin-resource-sharing/) bereitgestellt wird (z. B. `<img src="example.jpg" crossorigin>`).
+3. Wenn in iframes geladene Cross-Origin-Ressourcen eine weitere Ebene von iframes umfassen, wenden Sie die in diesem Abschnitt beschriebenen Schritte rekursiv an, bevor Sie fortfahren.
+4. Sobald Sie bestätigt haben, dass alle Cross-Origin-Ressourcen aktiviert sind, setzen Sie für die in iframes geladenen Cross-Origin-Ressourcen den Header `Cross-Origin-Embedder-Policy: require-corp`.
+5. Stellen Sie sicher, dass keine Cross-Origin-Popup-Fenster vorhanden sind, die eine Kommunikation über `postMessage()` erfordern. Es gibt keine Möglichkeit, diese funktional zu halten, wenn die Cross-Origin-Isolierung aktiviert ist. Sie können die Kommunikation über ein anderes Dokument regeln, für das keine Cross-Origin-Isolierung besteht, oder eine andere Kommunikationsmethode verwenden (z. B. HTTP-Anforderungen).
+
+## Aktivieren von Cross-Origin-Isolierung
+
+Nachdem Sie nun Vorkehrungen gegen unerwünschte Auswirkungen der Cross-Origin-Isolierung getroffen haben, finden Sie hier allgemeine Richtlinien zum Aktivieren der Cross-Origin-Isolierung:
+
+1. Setzen Sie in Ihrem Dokument auf der obersten Websiteebene den Header `Cross-Origin-Opener-Policy: same-origin`. Wenn zuvor `Cross-Origin-Opener-Policy-Report-Only: same-origin` eingestellt war, ersetzen Sie es. Dadurch wird die Kommunikation zwischen dem Dokument auf Ihrer obersten Websiteebene und seinen Popup-Fenstern verhindert.
+2. Setzen Sie in Ihrem Dokument auf der obersten Websiteebene den Header `Cross-Origin-Embedder-Policy: require-corp`. Wenn zuvor `Cross-Origin-Embedder-Policy-Report-Only: require-corp` eingestellt war, ersetzen Sie es. Dadurch wird das Laden von Cross-Origin-Ressourcen verhindert, für die keine Zustimmung vorliegt.
+3. Stellen Sie sicher, dass `self.crossOriginIsolated` in der Konsole den Wert `true` ausgibt, um zu verifizieren, dass auf Ihrer Seite eine Cross-Origin-Isolierung besteht.
+
+{% Aside 'gotchas' %}
+
+Das Aktivieren der Cross-Origin-Isolierung auf einem lokalen Server kann mühsam sein, da einfache Server das Senden von Headern nicht unterstützen. Sie können Chrome mit einem Befehlszeilen-Flag von `--enable-features=SharedArrayBuffer` starten, um `SharedArrayBuffer` zu aktivieren, ohne dabei die Cross-Origin-Isolierung zu aktivieren. Erfahren Sie, [wie Sie Chrome auf entsprechenden Plattformen mit einem Befehlszeilen-Flag ausführen können](https://www.chromium.org/developers/how-tos/run-chromium-with-flags) .
+
+{% endAside %}
+
+## Ressourcen
+
+- [Sorgen Sie für eine „Cross-Origin-Isolation“ Ihrer Website mit COOP und COEP](/coop-coep/)
+- [SharedArrayBuffer-Aktualisierungen in Android-Chrome 88 und Desktop-Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/en/404.md b/src/site/content/en/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/en/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/en/404.njk b/src/site/content/en/404.njk
deleted file mode 100644
index 0633aa62ade..00000000000
--- a/src/site/content/en/404.njk
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: layout
-title: 404
-description: |
-  Page Not Found
-noindex: true
----
-
-<div class="w-layout-container--large">
-  <header class="w-page-header">
-    <h1 class="w-page-header__headline w-code">{{ title }}</h1>
-    <p class="w-page-header__copy">
-      Sorry, we couldn't find that page.
-    </p>
-  </header>
-</div>
diff --git a/src/site/content/en/about/index.md b/src/site/content/en/about/index.md
new file mode 100644
index 00000000000..3582ccaa052
--- /dev/null
+++ b/src/site/content/en/about/index.md
@@ -0,0 +1,59 @@
+---
+layout: 'about'
+title: 'About web.dev'
+banner:
+  eyebrow: 'About web.dev'
+  title: 'Guidance from Chrome Developer Relations'
+  summary: |
+    We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.
+  image: 'image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/R8GB4ZvgVvy4gimaqrXs.png'
+  imageWidth: '546'
+  imageHeight: '421'
+intro:
+  title: 'On this site'
+  summary:
+    - paragraph: Explore our archive of content, covering subjects across the web development stack. Find the latest news and content on our <a href="/blog/">blog</a>, and discover content by groups on the <a href="/explore">explore</a> page.
+    - paragraph: For complete courses on key web development topics, check out <a href="/learn/">Learn</a>. Developed by industry experts, these courses take you right through a subject. They are structured to allow you to just dip into one or two modules of interest too.
+    - paragraph: Want some grab and go code? Our <a href="/patterns/">Patterns</a> break down common web development requirements. Whether you want to understand how to approach a certain UI component, or need to know how to copy an image to the <a href="/patterns/clipboard/">clipboard</a>, you’ll find a solution there.
+    - paragraph: To help you make a case for work on UI or Performance, we have <a href="/tags/case-study/">case studies</a>. Find out how other companies have used metrics such as Core Web Vitals to see real results. And, if that’s quite enough reading for one day we also have a great archive of <a href="/podcasts/">podcasts</a> and other <a href="/shows/">shows</a>, plus recordings of our <a href="/spaces/">Twitter Space</a> sessions with members of the Chrome team.
+    - paragraph: We believe that a web with multiple browser engines is important, and that web sites and applications should work well no matter which browser your visitors use. We know that you care about that too, and so content on this site should have cross-browser status clearly explained. You’ll see that many articles have a component showing browser support—the data comes from our friends at MDN, via the Browser Compat Data project that powers the data on MDN pages.
+theTeam:
+  title: 'The team'
+  subTitle: 'This site is brought to you by the Chrome DevRel team led by:'
+  authors:
+    - name: paulkinlan
+      role: DevRel lead
+    - name: rachelandrew
+      role: Content lead
+    - name: rowan_m
+      role: SPPI lead
+    - name: andreban
+      role: Infrastructure lead
+    - name: philipwalton
+      role: Performance Lead
+    - name: una
+      role: CSS and UI lead
+    - name: alispivak
+      role: Chrome extensions lead
+    - name: petelepage
+      role: Advanced apps lead
+    - name: ewagasperowicz
+      role: Tech lead
+  primaryButtonText: 'See our authors'
+  primaryButtonUrl: '/authors/'
+developers:
+  title: 'Making the web better for tomorrow'
+  summary: |
+    We hope web.dev helps you to create high quality web experiences today. The Chrome team is also working to make the web better tomorrow. If you want to learn more about what we are doing, and offer feedback on the features we are developing and contributing to, check out <a href="https://developer.chrome.com/">Chrome Developers</a>.
+  primaryButtonText: 'Chrome Developers'
+  primaryButtonUrl: 'https://developer.chrome.com/'
+coupledColumn:
+  - icon: 'icons/spotted.svg'
+    title: 'Spotted an error?' 
+    summary: |
+      Please <a href="https://github.com/GoogleChrome/web.dev/issues">raise an issue</a> with information about the page and what’s wrong, and we’ll take a look.
+  - icon: 'icons/edit.svg'
+    title: 'Want to contribute?' 
+    summary: |
+      We feature articles and larger sections of content from external authors. If you would like to pitch an article, <a href="mailto:rachelandrew@google.com">contact Rachel Andrew</a> with an outline of your idea.
+---
diff --git a/src/site/content/en/about/index.njk b/src/site/content/en/about/index.njk
deleted file mode 100644
index 65ba9c5c1de..00000000000
--- a/src/site/content/en/about/index.njk
+++ /dev/null
@@ -1,172 +0,0 @@
----
-layout: layout
-title: About
-description: |
-  web.dev is the ultimate resource for developers of all backgrounds to learn,
-  create, and solve on the web.
-date: 2018-11-05
----
-<div class="about-landing-page">
-  <header class="w-masthead-about">
-    <div class="w-masthead-about__container">
-      <div class="w-masthead-about__left">
-        <h1 class="w-headline--two w-font-weight--medium w-mt--non">
-          Where you can learn and measure
-        </h1>
-        <p>
-          Whether you already have a website or you're just getting started,
-          learn to build for the modern web at web.dev. Then, apply your new
-          skills and solutions to any personal or professional site you work on.
-        </p>
-        <p>
-          After you've launched your site, come back to web.dev and measure how
-          well it supports your users. If there are areas where it can improve,
-          you'll get immediate steps to increase your metrics.
-        </p>
-        <p>
-          As the web advances, users' expectations get higher. With web.dev's
-          guidance, you can give your users the best possible experience,
-          wherever they are.
-        </p>
-      </div>
-      <div class="w-masthead-about__right">
-        <img class="w-masthead-about__image" src="/images/headers/about.svg" alt="">
-      </div>
-    </div>
-  </header>
-
-  <div class="w-about-principles">
-    <div class="w-layout-container">
-      <h2 class="w-headline w-headline--two w-font-weight--medium">
-        What the web can be
-      </h2>
-      <p>
-        You know your users, and you have solutions for their needs. But, to win
-        your users' loyalty, you also need to give them the best possible
-        experience with your site.
-      </p>
-      <p>
-        Make sure your audience can:
-      </p>
-      <ul class="w-unstyled-list w-grid-list">
-        <li class="w-grid-list__item">
-          Find your site
-        </li>
-        <li class="w-grid-list__item">
-          Open your site from any device
-        </li>
-        <li class="w-grid-list__item">
-          Load your site on a poor network connection
-        </li>
-        <li class="w-grid-list__item">
-          Use your site with assistive technology, like a screen reader
-        </li>
-      </ul>
-      <p>
-        While these principles seem basic, there's a lot of room for improvement
-        across the web. With web.dev, you can see how your website is
-        performing, and learn tips to improve your user experience.
-      </p>
-      <h2 class="w-headline w-headline--two w-font-weight--medium">
-        Reaching users on the mobile web
-      </h2>
-      <div class="w-about-video-wrapper">
-        {% YouTube '3bKMnYJzrqI' %}
-      </div>
-      <p>
-        At first, Pinterest's mobile site pushed all their users to
-        download their app. Then, they invested in building a modern web
-        experience.
-      </p>
-      <p>
-        With a new focus on speed and performance, Pinterest's mobile
-        site became more engaging to their users. Now, the mobile web is
-        their top channel where new users sign up to join Pinterest.
-      </p>
-    </div>
-  </div>
-
-  <div class="w-layout-container">
-    <h2 class="w-headline w-headline--two w-font-weight--medium w-text--center">
-      Your tools for success
-    </h2>
-    <p class="w-text--center">
-      To get started, all you need is a basic understanding of HTML, CSS, and
-      JavaScript.
-    </p>
-    <div class="w-about-boxes">
-      <div class="w-about-box">
-        <h3 class="w-about-box__headline">
-          Measure
-        </h3>
-        <p class="w-about-box__copy">
-          Audit your site with Lighthouse to get guidance you can use to improve:
-        </p>
-        <ul>
-          <li>
-            Performance
-          </li>
-          <li>
-            Progressive Web App status
-          </li>
-          <li>
-            Accessibility
-          </li>
-          <li>
-            Use of best practices
-          </li>
-          <li>
-            Search engine optimization
-          </li>
-        </ul>
-        <div class="w-text--center">
-          <a
-            class="w-button gc-analytics-event"
-            data-category="web.dev"
-            data-label="about, explore measure"
-            data-action="click"
-            href="/measure"
-          >
-            Test my site
-          </a>
-        </div>
-      </div>
-      <div class="w-about-box">
-        <h3 class="w-about-box__headline">Learn</h3>
-        <p class="w-about-box__copy">
-          Practice new skills for the modern web and expand your
-          knowledge on:
-        </p>
-        <ul>
-          <li>
-            Load speed
-          </li>
-          <li>
-            Network reliability
-          </li>
-          <li>
-            Data security
-          </li>
-          <li>
-            Site discoverability
-          </li>
-          <li>
-            Accessibility for all users
-          </li>
-        </ul>
-        <div class="w-text--center">
-          <a
-            class="w-button gc-analytics-event"
-            data-category="web.dev"
-            data-label="about, explore learn"
-            data-action="click"
-            href="/learn"
-          >
-            Explore topics
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/src/site/content/en/accessible/accessible-responsive-design/index.md b/src/site/content/en/accessible/accessible-responsive-design/index.md
index b6c658e9dc1..4fd4d746754 100644
--- a/src/site/content/en/accessible/accessible-responsive-design/index.md
+++ b/src/site/content/en/accessible/accessible-responsive-design/index.md
@@ -19,8 +19,8 @@ but responsive design also yields a win for accessibility.
 
 Consider a site like [Udacity](https://udacity.com):
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./udacity-100.jpg" alt="The Udacity site">
+<figure>
+  {% Img src="image/admin/5q9dDtEubSM23SzokQNu.jpg", alt="The Udacity site", width="800", height="393" %}
 </figure>
 
 A low-vision user who has difficulty reading small print might zoom in the page,
@@ -31,8 +31,8 @@ which is great for desktop users who require screen magnification
 and for mobile screen reader users as well. It's a win-win.
 Here's the same page magnified to 400%:
 
-<figure class="w-figure">
-  <img src="./udacity-400.jpg" alt="The Udacity site zoomed to 400%">
+<figure>
+  {% Img src="image/admin/WKHO21uWQz5lJ7Aqej1E.jpg", alt="The Udacity site zoomed to 400%", width="800", height="393" %}
 </figure>
 
 In fact, just by designing responsively,
@@ -94,7 +94,7 @@ This can lead to disconcerting jumps around the page for someone using the keybo
 Make sure to test your design at each breakpoint by tabbing through the content,
 does the flow through the page still make sense?
 
-Read more about [the source and visual display disconnect](/source-reordering).
+Read more about [the source and visual display disconnect](/content-reordering/).
 
 ## Take care with spatial clues
 
diff --git a/src/site/content/en/accessible/accessible-responsive-design/udacity-100.jpg b/src/site/content/en/accessible/accessible-responsive-design/udacity-100.jpg
deleted file mode 100644
index f24d671f92f..00000000000
Binary files a/src/site/content/en/accessible/accessible-responsive-design/udacity-100.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/accessible-responsive-design/udacity-400.jpg b/src/site/content/en/accessible/accessible-responsive-design/udacity-400.jpg
deleted file mode 100644
index 3e7d66124a1..00000000000
Binary files a/src/site/content/en/accessible/accessible-responsive-design/udacity-400.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/accessible-tap-targets/firefox-layout.jpg b/src/site/content/en/accessible/accessible-tap-targets/firefox-layout.jpg
deleted file mode 100644
index 90be51321b3..00000000000
Binary files a/src/site/content/en/accessible/accessible-tap-targets/firefox-layout.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/accessible-tap-targets/index.md b/src/site/content/en/accessible/accessible-tap-targets/index.md
index c12fb51fd04..89a679fd835 100644
--- a/src/site/content/en/accessible/accessible-tap-targets/index.md
+++ b/src/site/content/en/accessible/accessible-tap-targets/index.md
@@ -6,8 +6,9 @@ authors:
   - megginkearney
   - rachelandrew
   - robdodson
+  - patrickhlauke
 date: 2020-03-31
-updated: 2020-05-29
+updated: 2022-03-16
 description: |
   It's important that interactive elements have enough space around them, when used on a mobile or touchscreen device. This will help everyone, but especially those with motor impairments.
 tags:
@@ -51,20 +52,26 @@ In the example below I am using `em` for my text and padding.
 } %}
 
 Inspect the `a` of the link,
-and in Chrome DevTools switch to the [Computed pane](https://developers.google.com/web/tools/chrome-devtools/css/overrides#computed)  where you can inspect the various parts of the box
+and in Chrome DevTools switch to the [Computed pane](https://developer.chrome.com/docs/devtools/css/overrides/#computed)  where you can inspect the various parts of the box
 and see what pixel size they resolve to.
 In Firefox DevTools there is a Layout Panel.
 In that Panel you get the actual size of the inspected element.
 
-<figure class="w-figure" style="max-width: 500px">
-  <img src="./firefox-layout.jpg" alt="The Layout Panel in Firefox DevTools showing the size of the a element">
+<figure style="max-width: 500px">
+  {% Img src="image/admin/vmFzREveRttHVDfLqqCx.jpg", alt="The Layout Panel in Firefox DevTools showing the size of the a element", width="800", height="565" %}
 </figure>
 
 ## Using media queries to detect touchscreen use
 
+Instead of simply testing for viewport dimensions, and then guessing
+that small dimensions are likely to be phones or tablets, which in turn
+use a touchscreen, there are now more robust ways to adapt
+your design based on actual device capabilities.
+
 One of the media features we can now test for with media queries
-is whether the user's primary input is a touchscreen.
-The `pointer` feature will return `fine` or `coarse`.
+is whether the user's *primary input* is a touchscreen (`pointer`) and
+whether *any* of the currently detected inputs is a touchscreen (`any-pointer`).
+The `pointer` and `any-pointer` features will return `fine` or `coarse`.
 A fine pointer will be someone using a mouse or trackpad,
 even if that mouse is connected via Bluetooth to a phone.
 A `coarse` pointer indicates a touchscreen,
@@ -72,15 +79,14 @@ which could be a mobile device but may also be a laptop screen or large tablet.
 
 If you are adjusting your CSS within a media query to increase the touch target,
 testing for a coarse pointer allows you to increase the tap targets for all touchscreen users.
-This gives the larger tap area whether the device is a phone or larger device,
-while testing for width only gives you mobile users.
+This gives the larger tap area whether the device is a phone or larger device.
 
 ```css
 .container a {
   padding: .2em;
 }
 
-@media (pointer: coarse) {
+@media (any-pointer: coarse) {
   .container a {
     padding: .8em;
   }
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/accessibility-audit.png b/src/site/content/en/accessible/color-and-contrast-accessibility/accessibility-audit.png
deleted file mode 100644
index 88e856a3a86..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/accessibility-audit.png and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/contrast-ratios.jpg b/src/site/content/en/accessible/color-and-contrast-accessibility/contrast-ratios.jpg
deleted file mode 100644
index c3636f74077..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/contrast-ratios.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/emulate.jpg b/src/site/content/en/accessible/color-and-contrast-accessibility/emulate.jpg
deleted file mode 100644
index 1236610fd75..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/emulate.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/fastpass-contrast.jpg b/src/site/content/en/accessible/color-and-contrast-accessibility/fastpass-contrast.jpg
deleted file mode 100644
index 03762f37904..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/fastpass-contrast.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/high-contrast.jpg b/src/site/content/en/accessible/color-and-contrast-accessibility/high-contrast.jpg
deleted file mode 100644
index 48dd0b36bc6..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/high-contrast.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/index.md b/src/site/content/en/accessible/color-and-contrast-accessibility/index.md
index 64f62026271..1482c4a042c 100644
--- a/src/site/content/en/accessible/color-and-contrast-accessibility/index.md
+++ b/src/site/content/en/accessible/color-and-contrast-accessibility/index.md
@@ -28,8 +28,8 @@ The [WebAIM guidelines](https://webaim.org/standards/wcag/) recommend an AA (min
 An exception is made for very large text (120-150% larger than the default body text),
 for which the ratio can go down to 3:1. Notice the difference in the contrast ratios shown below.
 
-<figure class="w-figure">
-  <img src="./contrast-ratios.jpg" alt="An image showing the different contrast ratios">
+<figure>
+  {% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="An image showing the different contrast ratios", width="800", height="328" %}
 </figure>
 
 The contrast ratio of 4.5:1 was chosen for level AA
@@ -42,16 +42,40 @@ we can increase the contrast up to 7:1 for body text.
 You can use the Accessibility Audit in Lighthouse to check your color contrast.
 Open DevTools, click Audits, and select Accessibility to run the report.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./accessibility-audit.png" alt="A screenshot of the output of an audit for color contrast.">
+<figure>
+  {% Img src="image/admin/vSFzNOurQO6z2xV6qWuW.png", alt="A screenshot of the output of an audit for color contrast.", width="800", height="218" %}
+</figure>
+
+Chrome also includes an experimental feature to help you [detect all the low contrast texts of your page](https://developer.chrome.com/blog/new-in-devtools-87/#css-overview). You can also use the [accessible color suggestion](https://developer.chrome.com/blog/new-in-devtools-86/#accessible-color) to fix the low contrast text.
+
+<figure>
+  {% Img src="image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt="A screenshot of the output of the Chrome low contrast text experimental feature.", width="800", height="521" %}
 </figure>
 
 For a more complete report, install the [Accessibility Insights Extension](https://accessibilityinsights.io/).
 One of the checks in the Fastpass report, is color contrast.
 You will get a detailed report of any failing elements.
 
-<figure class="w-figure w-screenshot">
-  <img src="./fastpass-contrast.jpg" alt="The report in Accessibility Insights">
+<figure>
+  {% Img src="image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt="The report in Accessibility Insights", width="800", height="473" %}
+</figure>
+
+## Advanced Perceptual Contrast Algorithm (APCA)
+
+The [Advanced Perceptual Contrast Algorithm (APCA)](https://git.apcacontrast.com/documentation/WhyAPCA) is a new way to compute contrast based on modern research on color perception.
+
+Compared to [AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) guidelines, APCA is more context-dependent.
+
+The contrast is calculated based on the following features:
+
+- Spatial properties (font weight and text size)
+- Text color (perceived lightness difference between text and background)
+- Context (ambient light, surroundings, and intended purpose of the text)
+
+Chrome includes an [experimental feature to replace the AA/AAA contrast ratio guidelines with APCA](https://developer.chrome.com/blog/new-in-devtools-89/#apca).
+
+<figure>
+  {% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="A screenshot of the output of the APCA feature in Chrome.", width="800", height="543" %}
 </figure>
 
 ## Don't convey information with color alone
@@ -74,8 +98,8 @@ a telephone number might be underlined in red to show that it is invalid.
 But to a color deficient or screen reader user, that information is not conveyed well, if at all.
 Thus, you should always try to provide multiple avenues for the user to access critical information.
 
-<figure class="w-figure" style="width: 200px">
-  <img class="w-screenshot" src="./input-form1.png" alt="A image of an input form with an incorrect phone number highlighted only with a red color.">
+<figure style="width: 200px">
+  {% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="A image of an input form with an incorrect phone number highlighted only with a red color.", width="293", height="323" %}
 </figure>
 
 The [WebAIM checklist states in section 1.4.1](https://webaim.org/standards/wcag/checklist#sc1.4.1) that
@@ -88,8 +112,8 @@ Instead, the checklist recommends adding an additional indicator such as an unde
 An easy way to fix the previous example is to add an additional message to the field,
  announcing that it is invalid and why.
 
-<figure class="w-figure" style="width: 200px">
-  <img class="w-screenshot" src="./input-form2.png" alt="The same input form as in the last example, this time with a text label indicating the problem with the field.">
+<figure style="width: 200px">
+  {% Img src="image/admin/FLQPcG16akNRoElx3pnz.png", alt="The same input form as in the last example, this time with a text label indicating the problem with the field.", width="292", height="343" %}
 </figure>
 
 When you're building an app, keep these sorts of things in mind
@@ -99,7 +123,7 @@ If you're curious about how your site looks to different people,
 or if you rely heavily on the use of color in your UI,
 you can use DevTools to simulate various forms of visual impairment,
 including different types of color blindness.
-Chrome includes an [Emulate Vision Deficiencies feature](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies).
+Chrome includes an [Emulate Vision Deficiencies feature](https://developer.chrome.com/blog/new-in-devtools-83/#vision-deficiencies).
 To access it open DevTools and then open the **Rendering** tab in the Drawer,
 you can then emulate the following color deficiencies.
 
@@ -108,8 +132,8 @@ you can then emulate the following color deficiencies.
 - Tritanopia: the inability to perceive any blue light.
 - Achromatopsia: the inability to perceive any color except for shades of grey (extremely rare).
 
-<figure class="w-figure">
-  <img class="w-screenshot--filled" src="./emulate.jpg" alt="Emulating the vision of a person with Achromatopsia shows our page in greyscale.">
+<figure>
+  {% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="Emulating the vision of a person with Achromatopsia shows our page in greyscale.", width="800", height="393" %}
 </figure>
 
 ## High contrast mode
@@ -131,16 +155,16 @@ to indicate which page is currently selected.
 If you view it in a high-contrast extension, that subtlety completely disappears,
 and with it goes the reader's understanding of which page is active.
 
-<figure class="w-figure" style="width: 500px">
-  <img class="w-screenshot" src="./tab-contrast.png" alt="Screenshot of a navigation bar in high contrast mode where the acvtive tab is hard to read">
+<figure style="width: 500px">
+  {% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="Screenshot of a navigation bar in high contrast mode where the acvtive tab is hard to read", width="640", height="57" %}
 </figure>
 
 Similarly, if you consider the example from the previous lesson,
 the red underline on the invalid phone number field might be
 displayed in a hard-to-distinguish blue-green color.
 
-<figure class="w-figure">
-  <img src="./high-contrast.jpg" alt="Screenshot of the address form used earlier, this time in high contrast mode. The color change of the invalid element is hard to read.">
+<figure>
+  {% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="Screenshot of the address form used earlier, this time in high contrast mode. The color change of the invalid element is hard to read.", width="700", height="328" %}
 </figure>
 
 If you are meeting the contrast ratios covered earlier
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/input-form1.png b/src/site/content/en/accessible/color-and-contrast-accessibility/input-form1.png
deleted file mode 100644
index 16c8cea58c1..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/input-form1.png and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/input-form2.png b/src/site/content/en/accessible/color-and-contrast-accessibility/input-form2.png
deleted file mode 100644
index 0f43452fb09..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/input-form2.png and /dev/null differ
diff --git a/src/site/content/en/accessible/color-and-contrast-accessibility/tab-contrast.png b/src/site/content/en/accessible/color-and-contrast-accessibility/tab-contrast.png
deleted file mode 100644
index 2c6a6ce1010..00000000000
Binary files a/src/site/content/en/accessible/color-and-contrast-accessibility/tab-contrast.png and /dev/null differ
diff --git a/src/site/content/en/accessible/content-reordering/a11y-insights.jpg b/src/site/content/en/accessible/content-reordering/a11y-insights.jpg
deleted file mode 100644
index ad356b81ef7..00000000000
Binary files a/src/site/content/en/accessible/content-reordering/a11y-insights.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/content-reordering/index.md b/src/site/content/en/accessible/content-reordering/index.md
index b4e008abdb2..2812b4d4b1f 100644
--- a/src/site/content/en/accessible/content-reordering/index.md
+++ b/src/site/content/en/accessible/content-reordering/index.md
@@ -84,8 +84,8 @@ try the Tab Stop checker in the [Accessibility Insights](https://accessibilityin
 The image below shows the CSS Grid example in that tool.
 You can see how the focus has to jump around the layout.
 
-<figure class="w-figure" style="max-width: 600px">
-  <img class="w-screenshot" src="./a11y-insights.jpg" alt="A screenshot of the Accessibility Insights Tool demonstrating the confusing order of items.">
+<figure style="max-width: 600px">
+  {% Img src="image/admin/n0i0TJf3OdZYvwswrHDV.jpg", alt="A screenshot of the Accessibility Insights Tool demonstrating the confusing order of items.", width="800", height="919" %}
 </figure>
 
 ## Content reordering and responsive web design
diff --git a/src/site/content/en/accessible/control-focus-with-tabindex/index.md b/src/site/content/en/accessible/control-focus-with-tabindex/index.md
index 862a6c05b40..6856b1f5d91 100644
--- a/src/site/content/en/accessible/control-focus-with-tabindex/index.md
+++ b/src/site/content/en/accessible/control-focus-with-tabindex/index.md
@@ -5,17 +5,17 @@ authors:
   - robdodson
 date: 2018-11-18
 description: |
-  Native HTML elements such as <button> or <input> have keyboard accessibility
+  Standard HTML elements such as <button> or <input> have keyboard accessibility
   built-in for free. If you're building custom interactive components, use
   tabindex to ensure that they're keyboard accessible.
 ---
 
-Native HTML elements such as `<button>` or `<input>` have keyboard accessibility
+Standard HTML elements such as `<button>` or `<input>` have keyboard accessibility
 built in for free. If you're building _custom_ interactive components, however,
 use the `tabindex` attribute to ensure that they're keyboard accessible.
 
 {% Aside %}
-Whenever possible, use a native HTML element rather than building your
+Whenever possible, use a built-in HTML element rather than building your
 own custom version. `<button>`, for example, is very easy to style and
 already has full keyboard support. This will save you from needing to manage
 `tabindex` or add semantics with ARIA.
@@ -28,7 +28,7 @@ some things can only be tested by a human.
 
 Try pressing the `Tab` key to navigate through your site. Are you able to reach
 all the interactive controls on the page? If not, you may need to use
-[`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
+[`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex)
 to improve the focusability of those controls.
 
 {% Aside 'warning' %}
@@ -48,10 +48,12 @@ Insert an element into the natural tab order using `tabindex="0"`. For example:
 
 To focus an element, press the `Tab` key or call the element's `focus()` method.
 
-{% Glitch {
-  id: 'tabindex-zero',
-  path: 'index.html',
-  height: 346
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWzzMqp',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
 } %}
 
 ## Remove an element from the tab order
@@ -65,10 +67,12 @@ Remove an element using `tabindex="-1"`. For example:
 This removes an element from the natural tab order, but the element can still be
 focused by calling its `focus()` method.
 
-{% Glitch {
-  id: 'tabindex-negative-one',
-  path: 'index.html',
-  height: 346
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BammWGg',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
 } %}
 
 Note that applying `tabindex="-1"` to an element doesn't affect its children;
@@ -102,7 +106,7 @@ results of the "No element has a [tabindex] value greater than 0" audit.
 ## Create accessible components with "roving `tabindex`"
 
 If you're building a complex component, you may need to add additional keyboard
-support beyond focus. Consider the native `select` element. It is focusable and
+support beyond focus. Consider the built-in `select` element. It is focusable and
 you can use the arrow keys to expose additional functionality (the selectable
 options).
 
@@ -119,9 +123,9 @@ method on it.
 
 ```html/2-3
 <div role="toolbar">
-  <button tabindex="-1">Undo</div>
-  <button tabindex="0">Redo</div>
-  <button tabindex="-1">Cut</div>
+  <button tabindex="-1">Undo</button>
+  <button tabindex="0">Redo</button>
+  <button tabindex="-1">Cut</button>
 </div>
 ```
 
@@ -129,16 +133,18 @@ method on it.
 
 ```html/2-3
 <div role="toolbar">
-  <button tabindex="-1">Undo</div>
-  <button tabindex="-1">Redo</div>
-  <button tabindex="0">Cut</div>
+  <button tabindex="-1">Undo</button>
+  <button tabindex="-1">Redo</button>
+  <button tabindex="0">Cut</button>
 </div>
 ```
 
-{% Glitch {
-  id: 'roving-tabindex',
-  path: 'index.html',
-  height: 346
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYOOWam',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
 } %}
 
 {% Aside %}
@@ -148,7 +154,7 @@ You can learn more about them in our guide on
 [screen reader basics](/semantics-and-screen-readers).
 {% endAside %}
 
-{% Assessment page, 'self-assessment' %}
+{% Assessment 'self-assessment' %}
 
 ## Keyboard access recipes
 
diff --git a/src/site/content/en/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/en/accessible/control-focus-with-tabindex/self-assessment.assess.yml
index 03449e88b14..cfd424d97f3 100644
--- a/src/site/content/en/accessible/control-focus-with-tabindex/self-assessment.assess.yml
+++ b/src/site/content/en/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -25,7 +25,7 @@ questions:
           1. The **Yes** button
 
           Only the `<button>` elements are included in the tab order
-          because they're the only native HTML form elements.
+          because they're the only standardized HTML form elements.
           To insert other elements into the tab order, you would add a `tabindex` attribute.
   - stimulus: |
       ```html
@@ -64,7 +64,7 @@ questions:
     options:
       - rationale: |
           The **Search** text input comes first in the tab order.
-          Because it has a `tabindex` greater than 1, it jumps to the front of the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
 
           (This behavior is likely to cause confusion
           if the menu is positioned on the page before the search input.
@@ -72,7 +72,7 @@ questions:
           is considered an anti-pattern.)
   - stimulus: |
       This HTML renders a custom radio group, which should have a
-      [roving `tabindex`](#create-accessible-components-with-"roving-tabindex").
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
       (To keep things simpler, ignore the
       [`aria-*` attributes](/semantics-and-screen-readers) for now.)
 
@@ -98,5 +98,5 @@ questions:
           - Focus the radio element that now has a `tabindex` of 0.
 
           That's a lot—and it doesn't even include ARIA attributes!
-          This is an example of why it's easier to use native elements
+          This is an example of why it's easier to use built-in elements
           with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/en/accessible/headings-and-landmarks/headings.png b/src/site/content/en/accessible/headings-and-landmarks/headings.png
deleted file mode 100644
index d538b55add1..00000000000
Binary files a/src/site/content/en/accessible/headings-and-landmarks/headings.png and /dev/null differ
diff --git a/src/site/content/en/accessible/headings-and-landmarks/index.md b/src/site/content/en/accessible/headings-and-landmarks/index.md
index d5af62f46fb..513b11c71f0 100644
--- a/src/site/content/en/accessible/headings-and-landmarks/index.md
+++ b/src/site/content/en/accessible/headings-and-landmarks/index.md
@@ -9,7 +9,7 @@ description: |
   improve the navigation experience for users of assitive technology.
 ---
 
-{% include 'content/lighthouse-accessibility/why-headings.njk' %}
+{% include 'content/why-headings.njk' %}
 
 ## Use headings to outline the page
 
@@ -18,7 +18,7 @@ to create a skeleton or scaffold of the page such that anyone navigating by
 headings can form a mental picture.
 
 A common practice is to use a single `h1` for the primary headline or logo on a
-page, `h2`s to designate major sections, and `h3`'s in supporting subsections:
+page, `h2` elements to designate major sections, and `h3` elements in supporting subsections:
 
 ```html
 <h1>Company name</h1>
@@ -41,10 +41,10 @@ own CSS, and don't skip levels.
 For example, this site has a section called "IN THE NEWS", followed by two
 headlines:
 
-<img class="screenshot" src="./headings.png" alt="A news site with a headline, hero image, and subsections.">
+{% Img src="image/admin/CdBjBuUo2yVVHWVFnQzx.png", alt="A news site with a headline, hero image, and subsections.", width="800", height="414" %}
 
 The section heading, "IN THE NEWS", could be an `h2`, and the supporting
-headlines could both be `h3`'s.
+headlines could both be `h3` elements.
 
 Because the `font-size` for "IN THE NEWS" is _smaller_ than the headline, it may
 be tempting to make the headline for the first story an `h2` and to make
@@ -52,8 +52,8 @@ be tempting to make the headline for the first story an `h2` and to make
 it would break the outline conveyed to a screen reader user!
 
 {% Aside %}
-Though it may seem counterintuitive, it does not matter if _visually_ `h3`'s and
-`h4`'s are larger than their `h2` or `h1` counterparts. What matters is the
+Though it may seem counterintuitive, it does not matter if _visually_ `h3` and
+`h4` elements are larger than their `h2` or `h1` counterparts. What matters is the
 outline conveyed by the elements and elements' ordering.
 {% endAside %}
 
diff --git a/src/site/content/en/accessible/index.md b/src/site/content/en/accessible/index.md
new file mode 100644
index 00000000000..c3c9536e528
--- /dev/null
+++ b/src/site/content/en/accessible/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: accessible
+---
\ No newline at end of file
diff --git a/src/site/content/en/accessible/index.njk b/src/site/content/en/accessible/index.njk
deleted file mode 100644
index 7a7941b5c0c..00000000000
--- a/src/site/content/en/accessible/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: accessible
----
\ No newline at end of file
diff --git a/src/site/content/en/accessible/keyboard-access/index.md b/src/site/content/en/accessible/keyboard-access/index.md
index 3ff767569ac..72543a99735 100644
--- a/src/site/content/en/accessible/keyboard-access/index.md
+++ b/src/site/content/en/accessible/keyboard-access/index.md
@@ -33,7 +33,7 @@ is called the **tab order**.
 Interactive HTML elements like text fields, buttons, and select lists are
 **implicitly focusable**: they are automatically inserted into the tab order
 based on their position in the
-[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).
+[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
 These interactive elements also have built-in keyboard event handling. Elements
 such as paragraphs and divs are not implicitly focusable because users typically
 do not need to interact with them.
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/button-label.png b/src/site/content/en/accessible/labels-and-text-alternatives/button-label.png
deleted file mode 100644
index af1084547b7..00000000000
Binary files a/src/site/content/en/accessible/labels-and-text-alternatives/button-label.png and /dev/null differ
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/devtools-name.png b/src/site/content/en/accessible/labels-and-text-alternatives/devtools-name.png
deleted file mode 100644
index 785ae2a59c4..00000000000
Binary files a/src/site/content/en/accessible/labels-and-text-alternatives/devtools-name.png and /dev/null differ
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/icon-button.png b/src/site/content/en/accessible/labels-and-text-alternatives/icon-button.png
deleted file mode 100644
index d3a616bb984..00000000000
Binary files a/src/site/content/en/accessible/labels-and-text-alternatives/icon-button.png and /dev/null differ
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/index.md b/src/site/content/en/accessible/labels-and-text-alternatives/index.md
index 9f1a8609403..84b34dc7ea2 100644
--- a/src/site/content/en/accessible/labels-and-text-alternatives/index.md
+++ b/src/site/content/en/accessible/labels-and-text-alternatives/index.md
@@ -34,16 +34,16 @@ It's easy to check an element's accessible name using Chrome's DevTools:
    behind a `»` symbol.
 1. In the **Computed Properties** dropdown, look for the **Name** property.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./devtools-name.png" alt="">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/38c68DmamTCqt2LFxTmu.png", alt="", width="800", height="471" %}
+  <figcaption>
     DevTools accessibility pane showing the computed name for a button.
   </figcaption>
 </figure>
 
 {% Aside %}
 To learn more, check out the [DevTools Accessibility
-Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference).
+Reference](https://developer.chrome.com/docs/devtools/accessibility/reference/).
 {% endAside %}
 
 Whether you're looking at an `img` with `alt` text or an `input` with a
@@ -56,7 +56,7 @@ There are different ways to add an accessible name to an element,
 depending on its type. The following table lists the most common element types
 that need accessible names and links to explanations for how to add them.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -142,7 +142,7 @@ that need accessible names and links to explanations for how to add them.
 ## Label documents and frames
 
 Every page should have a
-[`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
+[`title`](https://developer.mozilla.org/docs/Web/HTML/Element/title)
 element that briefly explains what the page is about. The `title` element gives
 the page its accessible name. When a screen reader enters the page, this is the
 first text that is announced.
@@ -180,7 +180,7 @@ lets the user decide if they wish to enter the frame or bypass it.
 ## Include text alternatives for images and objects
 
 An `img` should always be accompanied by an
-[`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+[`alt`](https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes)
 attribute to give the image its accessible name. If the image fails to load, the
 `alt` text is used as a placeholder so users have a sense of what the image was
 trying to convey.
@@ -255,14 +255,14 @@ name.
 <button>Book Room</button>
 ```
 
-![A mobile form with a 'Book Room' button.](./button-label.png)
+{% Img src="image/admin/tcIDzNpCHS9AlfwflQjI.png", alt="A mobile form with a 'Book Room' button.", width="800", height="269" %}
 
 One common exception to this rule is icon buttons. An icon button may use an
 image or an icon font to provide the text content for the button. For example,
 the buttons used in a What You See Is What You Get (WYSIWYG) editor to format
 text are typically just graphic symbols:
 
-![A left align icon button.](./icon-button.png)
+{% Img src="image/admin/ZmQ77kLPbqd5iFOmn4SU.png", alt="A left align icon button.", width="800", height="269" %}
 
 When working with icon buttons, it can be helpful to give them an explicit
 accessible name using the `aria-label` attribute. `aria-label` overrides any
@@ -296,9 +296,9 @@ This is especially helpful for screen readers that offer shortcuts to list all
 of the links on the page. If links are full of repetitive filler text, these
 shortcuts become much less useful:
 
-<figure class="w-figure">
-  <img src="./vo.jpg" alt="VoiceOver's links menu filled with the word 'here'.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/IPxS2dwHMyGRvGxGi5n2.jpg", alt="VoiceOver's links menu filled with the word 'here'.", width="519", height="469" %}
+  <figcaption>
     Example of VoiceOver, a screen reader for macOS, showing the navigate by
     links menu.
   </figcaption>
@@ -330,9 +330,8 @@ When the checkbox has been labeled correctly, the screen reader can report that
 the element has a role of checkbox, is in a checked state, and is named "Receive
 promotional offers?" like in the VoiceOver example below:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./promo-offers.png"
-  alt="VoiceOver text output showing 'Receive promotional offers?'">
+<figure>
+  {% Img src="image/admin/WklT2ymrCmceyrGUNizF.png", alt="VoiceOver text output showing 'Receive promotional offers?'", width="640", height="174" %}
 </figure>
 
-{% Assessment page, 'self-assessment' %}
+{% Assessment 'self-assessment' %}
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/promo-offers.png b/src/site/content/en/accessible/labels-and-text-alternatives/promo-offers.png
deleted file mode 100644
index 82be11a9a64..00000000000
Binary files a/src/site/content/en/accessible/labels-and-text-alternatives/promo-offers.png and /dev/null differ
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/self-assessment.assess.yml b/src/site/content/en/accessible/labels-and-text-alternatives/self-assessment.assess.yml
index dc57ea54f55..7a074e4e939 100644
--- a/src/site/content/en/accessible/labels-and-text-alternatives/self-assessment.assess.yml
+++ b/src/site/content/en/accessible/labels-and-text-alternatives/self-assessment.assess.yml
@@ -3,10 +3,7 @@ setLeader: |
 height: unset
 tabLabel: sample
 questions:
-  - stimulus: |
-      ```html
-      <img src="temp.svg" alt="temp">
-      ```
+  - stimulus: "![temp](image/user/temp.svg)"
     type: think-and-check
     stem: Does this image have an accessible name?
     options:
diff --git a/src/site/content/en/accessible/labels-and-text-alternatives/vo.jpg b/src/site/content/en/accessible/labels-and-text-alternatives/vo.jpg
deleted file mode 100644
index e5b261870a8..00000000000
Binary files a/src/site/content/en/accessible/labels-and-text-alternatives/vo.jpg and /dev/null differ
diff --git a/src/site/content/en/accessible/semantics-and-screen-readers/a11y-devtools.png b/src/site/content/en/accessible/semantics-and-screen-readers/a11y-devtools.png
deleted file mode 100644
index b347d795467..00000000000
Binary files a/src/site/content/en/accessible/semantics-and-screen-readers/a11y-devtools.png and /dev/null differ
diff --git a/src/site/content/en/accessible/semantics-and-screen-readers/index.md b/src/site/content/en/accessible/semantics-and-screen-readers/index.md
index 7637945d509..fb2a86eb5ed 100644
--- a/src/site/content/en/accessible/semantics-and-screen-readers/index.md
+++ b/src/site/content/en/accessible/semantics-and-screen-readers/index.md
@@ -22,9 +22,9 @@ Before diving into semantics, it's helpful to understand another term:
 **affordances**. An affordance is any object that offers, or affords, its user
 the opportunity to perform an action. A classic example is the teapot:
 
-<figure class="w-figure">
-  <img src="./teapot.png" alt="" style="max-width: 400px;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/EXqR31Kq3mosH6jv6jiG.png", alt="", width="640", height="446" %}
+  <figcaption>
     A teapot's handle is a natural affordance.
   </figcaption>
 </figure>
@@ -73,8 +73,8 @@ properties:
 - A **value** (optional)
 - A **state** (optional)
 
-An element's **role** describes its type, i.e. "button," "input," or even just
-"group" for things like `div`'s and `span`'s.
+An element's **role** describes its type, for example, "button," "input," or even just
+"group" for things like `div` and `span` elements.
 
 An element's **name** is its computed label. Screen readers typically announce
 an element's name followed by its role, e.g. "Sign Up, button." The algorithm
@@ -95,7 +95,7 @@ _collapsed_ state, depending on if it's open or closed.
 
 For each node in the DOM, the browser determines if the
 node is semantically "interesting" and adds it to [the accessibility
-tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree).
+tree](/the-accessibility-tree/).
 When assistive technology, like a screen reader, is providing an alternative UI
 to the user, it is often doing so by walking this accessibility tree.
 
@@ -103,12 +103,12 @@ to the user, it is often doing so by walking this accessibility tree.
 Browsers will often remove semantically uninteresting nodes like `div` and
 `span` from the accessibility tree, especially if they're just being used to
 position their children with CSS. For instance, if you have a `button` nested
-inside of 5 `div`'s, the browser may prune out some of the `div`'s in the middle
+inside of 5 `div` elements, the browser may prune out some of the `div` elements in the middle
 to cut down on noise.
 {% endAside %}
 
 Using Chrome's DevTools you can [inspect an element's semantic
-properties](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)
+properties](https://developer.chrome.com/docs/devtools/accessibility/reference/#pane)
 and explore its position in the accessibility tree.
 
 ## Next steps
@@ -116,4 +116,4 @@ and explore its position in the accessibility tree.
 Once you know a bit about semantics and how they aid screen reader navigation,
 you can't help but look at the pages you build differently. In the next section,
 we'll take a step back and consider how the entire outline of a page can be
-conveyed using effective headings and landmarks.
+conveyed using effective [headings and landmarks](/headings-and-landmarks/).
diff --git a/src/site/content/en/accessible/semantics-and-screen-readers/teapot.png b/src/site/content/en/accessible/semantics-and-screen-readers/teapot.png
deleted file mode 100644
index f756ecc2400..00000000000
Binary files a/src/site/content/en/accessible/semantics-and-screen-readers/teapot.png and /dev/null differ
diff --git a/src/site/content/en/accessible/style-focus/index.md b/src/site/content/en/accessible/style-focus/index.md
index 5f7ab5e0ae4..03852c5990f 100644
--- a/src/site/content/en/accessible/style-focus/index.md
+++ b/src/site/content/en/accessible/style-focus/index.md
@@ -11,8 +11,8 @@ description: |
 ---
 
 The focus indicator (often signified by a "focus ring") identifies the currently
-focused element on your page. For users who are unable to use a mouse, this 
-indicator is _extremely important_ because it acts as a stand-in for their 
+focused element on your page. For users who are unable to use a mouse, this
+indicator is _extremely important_ because it acts as a stand-in for their
 mouse-pointer.
 
 If the browser's default focus indicator clashes with your design, you can use
@@ -20,16 +20,16 @@ CSS to restyle it. Just remember to keep your keyboard users in mind!
 
 ## Use `:focus` to always show a focus indicator
 
-The [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
+The [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus)
 pseudo-class is applied any time an element is focused, regardless of the input
-device (mouse, keyboard, stylus, etc.) or method used to focus it. For example, 
+device (mouse, keyboard, stylus, etc.) or method used to focus it. For example,
 the `<div>` below has a `tabindex` which makes it focusable. It also has a
 custom style for its `:focus` state:
 
 ```css
-div[tabindex="0"]:focus {  
-  outline: 4px dashed orange;  
-}  
+div[tabindex="0"]:focus {
+  outline: 4px dashed orange;
+}
 ```
 
 Regardless of whether you use a mouse to click on it or a keyboard to tab to it,
@@ -49,15 +49,15 @@ For example, the `<button>` below also has a custom style for its `:focus`
 state.
 
 ```css
-button:focus {  
-  outline: 4px dashed orange;  
-}  
+button:focus {
+  outline: 4px dashed orange;
+}
 ```
 
 If you click on the `<button>` with a mouse in Chrome on macOS you should see
 its custom focus style. However, you will not see the custom focus style if you
-click on the `<button>` in Firefox or Safari on macOS. This is because in
-Firefox and Safari the element does not receive focus when you click on it.
+click on the `<button>` in Safari on macOS. This is because in
+Safari the element does not receive focus when you click on it.
 
 {% Glitch {
   id: 'focus-style2',
@@ -67,7 +67,7 @@ Firefox and Safari the element does not receive focus when you click on it.
 
 {% Aside %}
 See the
-[MDN reference for `<button>` focus behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
+[MDN reference for `<button>` focus behavior](https://developer.mozilla.org/docs/Web/HTML/Element/button#Clicking_and_focus)
 for a summary of which browsers and operating systems will apply focus to
 `<button>` elements.
 {% endAside %}
@@ -78,27 +78,21 @@ on different devices to ensure your focus styles are acceptable to your users.
 ## Use `:focus-visible` to selectively show a focus indicator
 
 The new
-[`:focus-visible`]([https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible))
-pseudo-class is applied any time that an element receives focus and the 
-browser determines via heuristics that displaying a focus indicator would be 
-beneficial to the user. In particular, if the most recent user interaction 
+[`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
+pseudo-class is applied any time that an element receives focus and the
+browser determines via heuristics that displaying a focus indicator would be
+beneficial to the user. In particular, if the most recent user interaction
 was via the keyboard and the key press did not include a meta, `ALT` / `OPTION`,
 or `CONTROL` key, then `:focus-visible` will match.
 
-{% Aside %}
-`:focus-visible` is currently only supported in Chrome behind a flag,
-but there is a [lightweight polyfill](https://github.com/WICG/focus-visible)
-that can be added to your app to make it work.
-{% endAside %}
-
-The button in the example below will _selectively_ show a focus indicator. If 
-you use a mouse to click on it, the results are different than if you first use 
+The button in the example below will _selectively_ show a focus indicator. If
+you use a mouse to click on it, the results are different than if you first use
 a keyboard to tab to it.
 
 ```css
-button:focus-visible {  
-  outline: 4px dashed orange;  
-}  
+button:focus-visible {
+  outline: 4px dashed orange;
+}
 ```
 
 {% Glitch {
@@ -110,13 +104,13 @@ button:focus-visible {
 ## Use `:focus-within` to style the parent of a focused element
 
 The
-[`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
+[`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
 pseudo-class is applied to an element either when the element itself receives
 focus or when another element inside that element receives focus.
 
 It can be used to highlight a region of the page to draw the
-user's attention to that area. For example, the form below receives focus both 
-when the form itself is selected and also when any of its radio buttons are 
+user's attention to that area. For example, the form below receives focus both
+when the form itself is selected and also when any of its radio buttons are
 selected.
 
 ```css
@@ -138,7 +132,7 @@ using a mobile device, would you expect it to display a keyboard?"
 
 If the answer is "yes," then the control should probably _always_ show a focus
 indicator, regardless of the input device used to focus it. A good example is
-the `<input type="text">` element. The user will need to send input to the 
+the `<input type="text">` element. The user will need to send input to the
 element via the keyboard regardless of how the input element originally received
 focus, so it's helpful to always display a focus indicator.
 
@@ -146,7 +140,7 @@ If the answer is "no," then the control may choose to selectively show a focus
 indicator. A good example is the `<button>` element. If a user clicks on it with
 a mouse or touch screen, the action is complete, and a focus indicator may not
 be necessary. However, if the user is _navigating_ with a keyboard, it's useful
-to show a focus indicator so the user can decide whether or not they want to 
+to show a focus indicator so the user can decide whether or not they want to
 click the control using the `ENTER` or `SPACE` keys.
 
 ## Avoid `outline: none`
@@ -156,13 +150,13 @@ confusing. Changing the appearance of a `<button>` element with CSS or giving
 an element a `tabindex` will cause the browser's default focus ring behavior to
 kick-in.
 
-A very common anti-pattern is to remove the focus indicator using CSS such as:  
+A very common anti-pattern is to remove the focus indicator using CSS such as:
 
 ```css
-/* Don't do this!!! */  
-:focus {  
-  outline: none;  
-}  
+/* Don't do this!!! */
+:focus {
+  outline: none;
+}
 ```
 
 A better way to work around this issue is to use a combination of `:focus` and
@@ -171,22 +165,22 @@ the polyfill works, and the sample app beneath it provides an example of using
 the polyfill to change the focus indicator on a button.
 
 ```css
-/*  
+/*
   This will hide the focus indicator if the element receives focus via the
-  mouse, but it will still show up on keyboard focus.  
-*/  
-.js-focus-visible :focus:not(.focus-visible) {  
-  outline: none;  
+  mouse, but it will still show up on keyboard focus.
+*/
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
 }
 
-/*  
-  Optionally: Define a strong focus indicator for keyboard focus.  
-  If you choose to skip this step, then the browser's default focus  
-  indicator will be displayed instead.  
-*/  
-.js-focus-visible .focus-visible {  
-  …  
-}  
+/*
+  Optionally: Define a strong focus indicator for keyboard focus.
+  If you choose to skip this step, then the browser's default focus
+  indicator will be displayed instead.
+*/
+.js-focus-visible .focus-visible {
+  …
+}
 ```
 
 {% Glitch {
diff --git a/src/site/content/en/accessible/use-semantic-html/index.md b/src/site/content/en/accessible/use-semantic-html/index.md
index 04fa996ccae..b21d470bf2c 100644
--- a/src/site/content/en/accessible/use-semantic-html/index.md
+++ b/src/site/content/en/accessible/use-semantic-html/index.md
@@ -19,15 +19,15 @@ and more happy users!
 There are a number of built-in interactive elements with proper semantics and
 keyboard support. The ones most developers use are:
 
-- [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
-- [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
+- [`<a>`](https://developer.mozilla.org/docs/Web/HTML/Element/a)
+- [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)
 - [`<input>` (and its many
-    types)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)
-- [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
-- [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
+    types)](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)
+- [`<select>`](https://developer.mozilla.org/docs/Web/HTML/Element/select)
+- [`<textarea>`](https://developer.mozilla.org/docs/Web/HTML/Element/textarea)
 
 In addition, elements with the
-[`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable)
+[`contenteditable`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/contenteditable)
 attribute are sometimes used for freeform text entry.
 
 It's easy to overlook the built-in keyboard support that these elements offer.
@@ -99,13 +99,13 @@ should you choose?
 - If clicking on the element will _navigate_ the user to a new page then use
   `<a>`. This includes single page web apps that load new content and update
   the URL using the
-  [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
+  [History API](https://developer.mozilla.org/docs/Web/API/History).
 
 The reason for this is that buttons and links are announced differently by
 screen readers. Using the correct element helps screen reader users know which
 outcome to expect.
 
-{% Assessment page, 'self-assessment' %}
+{% Assessment 'self-assessment' %}
 
 ## Styling
 
@@ -122,7 +122,7 @@ built-in elements.
 Using built-in HTML elements can greatly improve the accessibility of your site,
 and significantly cut down on your workload. Try tabbing through your site and
 look for any controls which lack keyboard support. If possible, switch them out
-for native HTML alternatives.
+for standardized HTML alternatives.
 
 Sometimes you may find an element that doesn't have a counterpart in HTML.
 That's okay! Read on to learn how to add keyboard support to custom interactive
diff --git a/src/site/content/en/angular/accessible-angular-with-codelyzer/accessible.jpg b/src/site/content/en/angular/accessible-angular-with-codelyzer/accessible.jpg
deleted file mode 100644
index aa415f6e2a8..00000000000
Binary files a/src/site/content/en/angular/accessible-angular-with-codelyzer/accessible.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/accessible-angular-with-codelyzer/editor-template.png b/src/site/content/en/angular/accessible-angular-with-codelyzer/editor-template.png
deleted file mode 100644
index dec144fc16f..00000000000
Binary files a/src/site/content/en/angular/accessible-angular-with-codelyzer/editor-template.png and /dev/null differ
diff --git a/src/site/content/en/angular/accessible-angular-with-codelyzer/index.md b/src/site/content/en/angular/accessible-angular-with-codelyzer/index.md
index 4feac2e2e23..1b3dc571780 100644
--- a/src/site/content/en/angular/accessible-angular-with-codelyzer/index.md
+++ b/src/site/content/en/angular/accessible-angular-with-codelyzer/index.md
@@ -3,7 +3,7 @@ layout: post
 title: "Audit your Angular app's accessibility with codelyzer"
 subhead: |
   Want to make your Angular site accessible for everyone? This is the right place!
-hero: accessible.jpg
+hero: image/admin/NxNmK1G1YjhB7tU6yVQa.jpg
 alt: Gondolas.
 date: 2019-07-03
 description: |
@@ -12,8 +12,10 @@ authors:
   - mohamedzamakhan
   - mgechev
 tags:
-  - angular
+  # - angular
   - accessibility
+feedback:
+  - api
 ---
 
 Making your app accessible means that all users, including those with special needs, can use it and understand the content. According to the [World Health Report](https://www.who.int/disabilities/world_report/2011/report.pdf), more than a billion people—about 15% of the world's population—have some form of disability. So [accessibility](/accessible) is a priority for any development project.
@@ -53,18 +55,18 @@ TSLint works with all popular text editors and IDEs. To use it with VSCode, inst
 
 With codelyzer's accessibility checks set up, you get a popup showing accessibility errors in TypeScript files or inline templates as you code:
 
-<figure class="w-figure">
-  <img src="./editor-template.png" alt="A screenshot of a codelyzer popup in a text editor.">
-  <figcaption class="w-figcaption">A codelyzer popup showing a form element labeling error.</figcaption>
+<figure>
+  {% Img src="image/admin/XArrTmBXfijqQ8AteI76.png", alt="A screenshot of a codelyzer popup in a text editor.", width="800", height="433" %}
+  <figcaption>A codelyzer popup showing a form element labeling error.</figcaption>
 </figure>
 
 To perform linting over the entire project (including external templates), use the `ng lint` command:
 
-![Linting with Angular CLI](ng-lint.png "Linting with Angular CLI")
+{% Img src="image/admin/sZdIj5CNklqppTk0UCf3.png", alt="Linting with Angular CLI", width="800", height="342" %}
 
 ## Supplementing codelyzer
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) is another tool you can use to enforce accessibility practices in your Angular application. The main difference between codelyzer and Lighthouse is when their checks get performed. Codelyzer statically analyzes the application at development time, without running it. This means that during development you can get direct feedback in your text editor or in the terminal. By contrast, Lighthouse actually runs your application and performs a bunch of checks using dynamic analysis.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is another tool you can use to enforce accessibility practices in your Angular application. The main difference between codelyzer and Lighthouse is when their checks get performed. Codelyzer statically analyzes the application at development time, without running it. This means that during development you can get direct feedback in your text editor or in the terminal. By contrast, Lighthouse actually runs your application and performs a bunch of checks using dynamic analysis.
 
 Both tools can be useful parts of your development flow. Lighthouse has better coverage given the checks it performs, while codelyzer allows you to iterate faster by getting constant feedback in your text editor.
 
diff --git a/src/site/content/en/angular/accessible-angular-with-codelyzer/ng-lint.png b/src/site/content/en/angular/accessible-angular-with-codelyzer/ng-lint.png
deleted file mode 100644
index 86addebdee6..00000000000
Binary files a/src/site/content/en/angular/accessible-angular-with-codelyzer/ng-lint.png and /dev/null differ
diff --git a/src/site/content/en/angular/creating-pwa-with-angular-cli/home.png b/src/site/content/en/angular/creating-pwa-with-angular-cli/home.png
deleted file mode 100644
index 4eff4ed95ad..00000000000
Binary files a/src/site/content/en/angular/creating-pwa-with-angular-cli/home.png and /dev/null differ
diff --git a/src/site/content/en/angular/creating-pwa-with-angular-cli/icon.png b/src/site/content/en/angular/creating-pwa-with-angular-cli/icon.png
deleted file mode 100644
index 568b2c603a2..00000000000
Binary files a/src/site/content/en/angular/creating-pwa-with-angular-cli/icon.png and /dev/null differ
diff --git a/src/site/content/en/angular/creating-pwa-with-angular-cli/index.md b/src/site/content/en/angular/creating-pwa-with-angular-cli/index.md
index 3aeb1740380..2b98df25d9f 100644
--- a/src/site/content/en/angular/creating-pwa-with-angular-cli/index.md
+++ b/src/site/content/en/angular/creating-pwa-with-angular-cli/index.md
@@ -3,7 +3,7 @@ layout: post
 title: "Create a Progressive Web App with the Angular CLI"
 subhead: |
   You want to make your Angular app installable? Wait no more!
-hero: installable.jpg
+hero: image/admin/8lEoUW3i1nEU1q10N1YK.jpg
 alt: Network cables.
 date: 2019-08-15
 description: |
@@ -11,8 +11,10 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
-  - pwa
+  # - angular
+  - progressive-web-apps
+feedback:
+  - api
 ---
 
 In this post, you'll learn how to use the Angular command line interface (CLI) to make a [Progressive Web App (PWA)](/discover-installable).
@@ -39,9 +41,11 @@ This command will:
 * Create a [service worker](/precaching-with-the-angular-service-worker) with a default caching configuration.
 * Create a [manifest file](/add-manifest), which tells the browser how your app should behave when installed on the user's device.
 * Add a link to the manifest file in `index.html`.
-* Add the [`theme-color`](/themed-omnibox) `<meta>` tag to `index.html`.
+* Add the [`theme-color`](https://developer.chrome.com/docs/lighthouse/pwa/themed-omnibox/) `<meta>` tag to `index.html`.
 * Create app icons in the `src/assets` directory.
 
+By default, your service worker should be registered within a few seconds of the first page load. If it isn't, consider modifying the [`registrationStrategy`](https://angular.io/api/service-worker/SwRegistrationOptions).
+
 ## Customize your PWA
 
 The [Precaching with the Angular service worker](/precaching-with-the-angular-service-worker) post explains how to configure the Angular service worker. There you can find how to specify which resources you want the service worker to cache and what strategy it should use to do so.
@@ -79,14 +83,14 @@ You can customize any of these properties by changing the relevant value in `man
 
 A PWA references its manifest file with a `link` element in `index.html`. Once the browser finds the reference, it'll show the **Add to Home screen** prompt:
 
-<figure class="w-figure">
-  <img src="home.png" alt="A progressive web app install prompt">
+<figure>
+  {% Img src="image/admin/IgMnFCuRU1Fx9JLZWXuT.png", alt="A progressive web app install prompt", width="344", height="650" %}
 </figure>
 
 Since the `ng-add` schematics add everything needed to make your app [installable](/discover-installable/), they generate some shortcut icons that are shown once the user adds the app to their desktop:
 
-<figure class="w-figure">
-  <img src="icon.png" alt="A progressive web app shortcut icon">
+<figure>
+  {% Img src="image/admin/3h7Yuj3MJPiNzbh2xdlB.png", alt="A progressive web app shortcut icon", width="344", height="650" %}
 </figure>
 
 Make sure you customize the manifest properties and icons before you deploy your PWA to production!
diff --git a/src/site/content/en/angular/creating-pwa-with-angular-cli/installable.jpg b/src/site/content/en/angular/creating-pwa-with-angular-cli/installable.jpg
deleted file mode 100644
index aff80157c17..00000000000
Binary files a/src/site/content/en/angular/creating-pwa-with-angular-cli/installable.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/faster-angular-change-detection/app.png b/src/site/content/en/angular/faster-angular-change-detection/app.png
deleted file mode 100644
index 092bdac042b..00000000000
Binary files a/src/site/content/en/angular/faster-angular-change-detection/app.png and /dev/null differ
diff --git a/src/site/content/en/angular/faster-angular-change-detection/change-detection.jpg b/src/site/content/en/angular/faster-angular-change-detection/change-detection.jpg
deleted file mode 100644
index b38e896aa22..00000000000
Binary files a/src/site/content/en/angular/faster-angular-change-detection/change-detection.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/faster-angular-change-detection/component-sub-tree-cd.png b/src/site/content/en/angular/faster-angular-change-detection/component-sub-tree-cd.png
deleted file mode 100644
index 3c78875334a..00000000000
Binary files a/src/site/content/en/angular/faster-angular-change-detection/component-sub-tree-cd.png and /dev/null differ
diff --git a/src/site/content/en/angular/faster-angular-change-detection/component-tree.png b/src/site/content/en/angular/faster-angular-change-detection/component-tree.png
deleted file mode 100644
index a3ed3cecdae..00000000000
Binary files a/src/site/content/en/angular/faster-angular-change-detection/component-tree.png and /dev/null differ
diff --git a/src/site/content/en/angular/faster-angular-change-detection/index.md b/src/site/content/en/angular/faster-angular-change-detection/index.md
index 61d3a28fa9b..058dc7947d7 100644
--- a/src/site/content/en/angular/faster-angular-change-detection/index.md
+++ b/src/site/content/en/angular/faster-angular-change-detection/index.md
@@ -3,7 +3,7 @@ layout: post
 title: "Optimize Angular's change detection"
 subhead: |
   Implement faster change detection for better user experience.
-hero: change-detection.jpg
+hero: image/admin/gzvMgZD2uXO7L49EWuIV.jpg
 alt: An array of light bulbs with a single bulb turned on.
 date: 2019-07-09
 description: |
@@ -11,8 +11,10 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
   - performance
+feedback:
+  - api
 ---
 
 Angular runs its [change detection mechanism](https://angular.io/api/core/ChangeDetectorRef) periodically so that changes to the data model are reflected in an app's view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XHR completion).
@@ -33,7 +35,7 @@ The app lists employees from two departments in a company—sales and R&D—and
 * `AppComponent`, which is the root component of the app, and
 * Two instances of `EmployeeListComponent`, one for sales and one for R&D.
 
-![Sample application](app.png "Sample application")
+{% Img src="image/admin/JtDFr3VL1e2AyUvhbKVU.png", alt="Sample application", width="800", height="456" %}
 
 You can see the two instances of `EmployeeListComponent` in the template for `AppComponent`:
 
@@ -98,17 +100,17 @@ export class EmployeeListComponent {
 Here's the template for `EmployeeListComponent`:
 
 ```html
-<h1 title="Department">{% raw %}{% verbatim %}{{ department }}{% endverbatim %}{% endraw %}</h1>
+<h1 title="Department">{% raw %}{{ department }}{% endraw %}</h1>
 <mat-form-field>
   <input placeholder="Enter name here" matInput type="text" [(ngModel)]="label" (keydown)="handleKey($event)">
 </mat-form-field>
 <mat-list>
   <mat-list-item *ngFor="let item of data">
     <h3 matLine title="Name">
-      {% raw %}{% verbatim %}{{ item.label }}{% endverbatim %}{% endraw %}
+      {% raw %}{{ item.label }}{% endraw %}
     </h3>
     <md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
-      {% raw %}{% verbatim %}{{ calculate(item.num) }}{% endverbatim %}{% endraw %}
+      {% raw %}{{ calculate(item.num) }}{% endraw %}
     </md-chip>
   </mat-list-item>
 </mat-list>
@@ -118,7 +120,7 @@ This code iterates over all the employees in the list and, for each one, renders
 
 With the two instances of `EmployeeListComponent`, the app forms the following component tree:
 
-![Component tree](component-tree.png "Component tree")
+{% Img src="image/admin/iMfgq2xaKVRcXc3LhWW7.png", alt="Component tree", width="800", height="454" %}
 
 `AppComponent` is the root component of the application. Its child components are the two instances of `EmployeeListComponent`. Each instance has a list of items (E<sub>1</sub>, E<sub>2</sub>, etc.) that represent the individual employees in the department.
 
@@ -132,7 +134,7 @@ You can verify that the slowdown comes from the `fibonacci` function by setting
 
 Now click **Record** <span style="width: 13px;height: 13px;background-color: #6E6E6E;display: inline-block;border-radius: 50%;margin-left: 3px;margin-right: 3px;"></span> (in the top-left corner of the **Performance** panel) and start typing in one of the text boxes in the app. In a few seconds, click **Record** <span style="width: 13px;height: 13px;background-color: #6E6E6E;display: inline-block;border-radius: 50%;margin-left: 3px;margin-right: 3px;"></span> again to stop recording. Once Chrome DevTools processes all the profiling data it collected, you'll see something like this:
 
-![Performance profiling](profiling.png "Performance profiling in Chrome DevTools")
+{% Img src="image/admin/1rXcCcnM7rLj183jgQCk.png", alt="Performance profiling", width="800", height="276" %}
 
 If there are many employees in the list, this process may block the browser's UI thread and cause frame drops, which leads to a bad user experience.
 
@@ -154,7 +156,7 @@ export class EmployeeListComponent {...}
 
 Now when the user types in a text input, change detection is only triggered for the corresponding department:
 
-![Change detection in a component subtree](component-sub-tree-cd.png "Change detection in a component subtree")
+{% Img src="image/admin/1hUupNUByRDQLyYYvMcX.png", alt="Change detection in a component subtree", width="800", height="462" %}
 
 _You can find this optimization applied to the original application [here](https://github.com/mgechev/change-detection-web-dev/tree/onpush)._
 
@@ -199,7 +201,7 @@ Finally, update the expression inside of the template for `EmployeeListComponent
 ```html
 <mat-chip-list>
   <md-chip>
-    {% raw %}{% verbatim %}{{ item.num | calculate }}{% endverbatim %}{% endraw %}
+    {% raw %}{{ item.num | calculate }}{% endraw %}
   </md-chip>
 </mat-chip-list>
 ```
diff --git a/src/site/content/en/angular/faster-angular-change-detection/profiling.png b/src/site/content/en/angular/faster-angular-change-detection/profiling.png
deleted file mode 100644
index 6e0971c6f36..00000000000
Binary files a/src/site/content/en/angular/faster-angular-change-detection/profiling.png and /dev/null differ
diff --git a/src/site/content/en/angular/get-started-optimize-angular/get-started-optimize-angular.jpg b/src/site/content/en/angular/get-started-optimize-angular/get-started-optimize-angular.jpg
deleted file mode 100644
index 5f91eeedf28..00000000000
Binary files a/src/site/content/en/angular/get-started-optimize-angular/get-started-optimize-angular.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/get-started-optimize-angular/index.md b/src/site/content/en/angular/get-started-optimize-angular/index.md
index 243108d3019..145c8afca4b 100644
--- a/src/site/content/en/angular/get-started-optimize-angular/index.md
+++ b/src/site/content/en/angular/get-started-optimize-angular/index.md
@@ -3,7 +3,7 @@ layout: post
 title: 'Get started: optimize an Angular application'
 subhead: |
   Want to make your Angular site as fast and accessible as possible? You've come to the right place!
-hero: get-started-optimize-angular.jpg
+hero: image/admin/DX8MXZivFjz3NqMtFcK4.jpg
 alt: A hand dipping a paintbrush in one of several buckets of paint.
 date: 2019-06-24
 description: |
@@ -11,7 +11,7 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
 ---
 
 ## What's Angular?
@@ -25,7 +25,7 @@ This collection focuses on five major areas for optimizing an Angular applicatio
 * Improving the **performance** of your application to increase user conversion and engagement
 * Improving your application's **reliability** on poor networks by precaching assets with the Angular service worker
 * Making your application **discoverable** for search engines and social media bots using prerendering and server-side rendering
-* Making your application **installable** to provide a user experience similar to a native app's
+* Making your application **installable** to provide a user experience similar to an iOS/Android app's
 * Improving the **accessibility of** your application to make it usable and understandable for all users
 
 Each post in the collection will describe techniques that you can directly apply to your own applications.
diff --git a/src/site/content/en/angular/index.md b/src/site/content/en/angular/index.md
new file mode 100644
index 00000000000..f2b5ae78538
--- /dev/null
+++ b/src/site/content/en/angular/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: angular
+---
\ No newline at end of file
diff --git a/src/site/content/en/angular/index.njk b/src/site/content/en/angular/index.njk
deleted file mode 100644
index 903a4eb4488..00000000000
--- a/src/site/content/en/angular/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: angular
----
\ No newline at end of file
diff --git a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-calculator.png b/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-calculator.png
deleted file mode 100644
index ad7f8d870ba..00000000000
Binary files a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-calculator.png and /dev/null differ
diff --git a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-failure.png b/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-failure.png
deleted file mode 100644
index c8d34fda229..00000000000
Binary files a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/budget-failure.png and /dev/null differ
diff --git a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/index.md b/src/site/content/en/angular/performance-budgets-with-the-angular-cli/index.md
index 8fb0d1136e6..1ce9b262ec4 100644
--- a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/index.md
+++ b/src/site/content/en/angular/performance-budgets-with-the-angular-cli/index.md
@@ -3,7 +3,7 @@ layout: post
 title: 'Performance budgets with the Angular CLI'
 subhead: |
   Monitor the sizes of your bundles over time to make sure your application stays fast.
-hero: performance-budgets-with-the-angular-cli.jpg
+hero: image/admin/dDEEMFg0WKylKvlOwlQ3.jpg
 alt: A closeup photo of a calculator.
 date: 2019-07-02
 description: |
@@ -11,8 +11,10 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
   - performance
+feedback:
+  - api
 ---
 
 Optimizing an Angular application is important, but how do you make sure its performance doesn't regress over time? By introducing performance metrics and monitoring them on each code change!
@@ -21,9 +23,9 @@ One important metric is the size of the JavaScript shipped with your application
 
 ## Calculate your performance budget
 
-You can use [this online budget calculator](https://bit.ly/perf-budget-calculator) to estimate how much JavaScript your app can afford to load, depending on the [Time to Interactive](/interactive) you're aiming for.
+You can use [this online budget calculator](https://bit.ly/perf-budget-calculator) to estimate how much JavaScript your app can afford to load, depending on the [Time to Interactive](/tti/) you're aiming for.
 
-![Budget calculator](budget-calculator.png "Budget calculator")
+{% Img src="image/admin/TWPRBRI7ja8d33unYYK6.png", alt="Budget calculator", width="800", height="524" %}
 
 ## Configure a performance budget in the Angular CLI
 
@@ -50,7 +52,7 @@ Now try building the app by running `ng build --prod`.
 
 You should see this error in the console:
 
-![Budget failure](budget-failure.png "Budget failure")
+{% Img src="image/admin/KXJS3kX1XGnItcrS8HJS.png", alt="Budget failure", width="800", height="258" %}
 
 To fix the build error, take a look at `app.component.ts`, which includes an import from `rxjs/internal/operators`. This is a private import that's not supposed to be used by consumers of `rxjs`. It increases the bundle size a lot! When you update to the correct import, `rxjs/operators`, and run the build again, you'll see that it passes the budget check successfully.
 
diff --git a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/performance-budgets-with-the-angular-cli.jpg b/src/site/content/en/angular/performance-budgets-with-the-angular-cli/performance-budgets-with-the-angular-cli.jpg
deleted file mode 100644
index 4ccd07c4c81..00000000000
Binary files a/src/site/content/en/angular/performance-budgets-with-the-angular-cli/performance-budgets-with-the-angular-cli.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/precaching-with-the-angular-service-worker/index.md b/src/site/content/en/angular/precaching-with-the-angular-service-worker/index.md
index 38d4fc5c22a..61fd7027b1b 100644
--- a/src/site/content/en/angular/precaching-with-the-angular-service-worker/index.md
+++ b/src/site/content/en/angular/precaching-with-the-angular-service-worker/index.md
@@ -3,7 +3,7 @@ layout: post
 title: 'Precaching with the Angular service worker'
 subhead: |
   Use the Angular service worker to make your app faster and more reliable on networks with poor connectivity.
-hero: precaching-with-the-angular-service-worker.jpg
+hero: image/admin/r1NlrtasqQuMo11wlSva.jpg
 alt: Sparks flying off a metal grinder.
 date: 2019-07-02
 description: |
@@ -11,14 +11,16 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
   - performance
-  - reliability
+  # - reliability
+feedback:
+  - api
 ---
 
 ## Dealing with limited connectivity
 
-When users have limited network access—or none at all—web app functionality can significantly degrade and often fails. Using a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) to provide precaching lets you intercept network requests and deliver responses directly from a local cache instead of retrieving them from the network. Once your app's assets have been cached, this approach can really speed up an app and make it work when the user is offline.
+When users have limited network access—or none at all—web app functionality can significantly degrade and often fails. Using a [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/) to provide precaching lets you intercept network requests and deliver responses directly from a local cache instead of retrieving them from the network. Once your app's assets have been cached, this approach can really speed up an app and make it work when the user is offline.
 
 This post walks through how to set up precaching in an Angular app. It assumes you're already familiar with precaching and service workers in general. If you need a refresher, check out the [Service workers and the Cache Storage API](/service-workers-cache-storage/) post.
 
@@ -60,7 +62,7 @@ Now start an HTTP server in the directory containing your app's production asset
 
 Note that the network tab has a bunch of static assets directly downloaded in the background by the `ngsw-worker.js` script:
 
-![Sample app](sample-app.png "Sample app")
+{% Img src="image/admin/XL0o6p4YbQiBJmWW8Kw4.png", alt="Sample app", width="800", height="599" %}
 
 This is the Angular service worker precaching the static assets specified in the generated `ngsw.json` manifest file.
 
diff --git a/src/site/content/en/angular/precaching-with-the-angular-service-worker/precaching-with-the-angular-service-worker.jpg b/src/site/content/en/angular/precaching-with-the-angular-service-worker/precaching-with-the-angular-service-worker.jpg
deleted file mode 100644
index 5ad90af8ba5..00000000000
Binary files a/src/site/content/en/angular/precaching-with-the-angular-service-worker/precaching-with-the-angular-service-worker.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/precaching-with-the-angular-service-worker/sample-app.png b/src/site/content/en/angular/precaching-with-the-angular-service-worker/sample-app.png
deleted file mode 100644
index 9a4e142608c..00000000000
Binary files a/src/site/content/en/angular/precaching-with-the-angular-service-worker/sample-app.png and /dev/null differ
diff --git a/src/site/content/en/angular/route-level-code-splitting-in-angular/code-splitting-network-tab.png b/src/site/content/en/angular/route-level-code-splitting-in-angular/code-splitting-network-tab.png
deleted file mode 100644
index 672d3c3df86..00000000000
Binary files a/src/site/content/en/angular/route-level-code-splitting-in-angular/code-splitting-network-tab.png and /dev/null differ
diff --git a/src/site/content/en/angular/route-level-code-splitting-in-angular/index.md b/src/site/content/en/angular/route-level-code-splitting-in-angular/index.md
index d1bfcd4647f..72102012384 100644
--- a/src/site/content/en/angular/route-level-code-splitting-in-angular/index.md
+++ b/src/site/content/en/angular/route-level-code-splitting-in-angular/index.md
@@ -3,18 +3,20 @@ layout: post
 title: 'Route-level code splitting in Angular'
 subhead: |
   Improve the performance of your app by using route-level code splitting!
-hero: route-level-code-splitting.jpg
+hero: image/admin/WVwZbWEEXUfXzVTtAlha.jpg
 date: 2019-06-24
 description: |
   Learn how to make your initial app bundle smaller by using route-level code splitting.
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
   - performance
+feedback:
+  - api
 ---
 
-This post explains how to set up route-level [code splitting](/reduce-javascript-payloads-with-code-splitting/) in an Angular application, which can reduce JavaScript bundle size and dramatically improve [Time to Interactive](/interactive).
+This post explains how to set up route-level [code splitting](/reduce-javascript-payloads-with-code-splitting/) in an Angular application, which can reduce JavaScript bundle size and dramatically improve [Time to Interactive](/tti/).
 
 _You can find the code samples from this article on [GitHub](https://github.com/mgechev/code-splitting-web-dev). The eager routing example is available in the [eager branch](https://github.com/mgechev/code-splitting-web-dev/tree/eager). The route-level code splitting example is in the [lazy branch](https://github.com/mgechev/code-splitting-web-dev/tree/lazy)._
 
@@ -32,7 +34,7 @@ The most efficient way to shrink JavaScript bundles without sacrificing features
 
 {% Aside 'note' %}
 
-By using code splitting, [Twitter and Tinder](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) observed improvements of up to 50% for their [Time to Interactive](/interactive).
+By using code splitting, [Twitter and Tinder](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) observed improvements of up to 50% for their [Time to Interactive](/tti/).
 
 {% endAside %}
 
@@ -145,7 +147,7 @@ To check that the Angular router downloads the `nyan.module` lazily in your loca
 1. Click **NYAN** in the sample app.
 1. Note that the `nyan-nyan-module.js` file appears in the network tab.
 
-![Lazy-loading of JavaScript bundles with route-level code splitting](code-splitting-network-tab.png "Lazy-loading of JavaScript bundles with route-level code-splitting")
+{% Img src="image/admin/wT4xLV2OkrZ2b7QaQz8L.png", alt="Lazy-loading of JavaScript bundles with route-level code splitting", width="800", height="524" %}
 
 _Find this example [on GitHub](https://github.com/mgechev/code-splitting-web-dev/tree/lazy/src)._
 
diff --git a/src/site/content/en/angular/route-level-code-splitting-in-angular/route-level-code-splitting.jpg b/src/site/content/en/angular/route-level-code-splitting-in-angular/route-level-code-splitting.jpg
deleted file mode 100644
index c4421042901..00000000000
Binary files a/src/site/content/en/angular/route-level-code-splitting-in-angular/route-level-code-splitting.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/route-preloading-in-angular/index.md b/src/site/content/en/angular/route-preloading-in-angular/index.md
index 5cb66457e3f..1d2b63a9d74 100644
--- a/src/site/content/en/angular/route-preloading-in-angular/index.md
+++ b/src/site/content/en/angular/route-preloading-in-angular/index.md
@@ -3,7 +3,7 @@ layout: post
 title: 'Route preloading strategies in Angular'
 subhead: |
   Preload routes ahead of time to speed up users' navigation.
-hero: route-preloading.jpg
+hero: image/admin/q4b86k6REnNHkpjQnsLK.jpg
 hero_position: bottom
 alt: Glass crystal ball
 date: 2019-07-09
@@ -12,8 +12,10 @@ description: |
 authors:
   - mgechev
 tags:
-  - angular
+  # - angular
   - performance
+feedback:
+  - api
 ---
 
 [Route-level code splitting](/route-level-code-splitting-in-angular) can help you reduce the initial load time of an application by delaying the JavaScript associated with routes that aren't initially needed. This way, the Angular router waits until a user navigates to a given route before triggering a network request to download the associated JavaScript.
@@ -53,12 +55,14 @@ Now serve the application and look at the **Network** panel in Chrome DevTools:
 
 You should see that the router downloaded `nyan-nyan-module.js` and `about-about-module.js` in the background when you opened the application:
 
-<figure class="w-figure w-figure--fullbleed">
-<video controls loop muted poster="https://storage.googleapis.com/web-dev-angular/preloading/poster.png">
-  <source src="https://storage.googleapis.com/web-dev-angular/preloading/preload-all.webm" type="video/webm; codecs=vp8">
-  <source src="https://storage.googleapis.com/web-dev-angular/preloading/preload-all.mp4" type="video/mp4; codecs=h264">
-</video>
- <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+{% Video
+  src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/TVi6LCasiwZI1hxJrBOL.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/e9h6JBVl8TUGMWOSAWyC.mp4"],
+  controls="true",
+  loop="true",
+  muted="true"
+%}
+ <figcaption>
     The PreloadAllModules strategy in action.
   </figcaption>
 </figure>
@@ -70,7 +74,7 @@ The router also registered the modules' route declarations so that when you navi
 
 `PreloadAllModules` is useful in a lot of cases. When you have dozens of modules, however, its aggressive preloading can really increase network usage. Also, since the router needs to register the routes in all the preloaded modules, it can cause intensive computations in the UI thread and lead to sluggish user experience.
 
-The [quicklink](https://github.com/GoogleChromeLabs/quicklink) library provides a better strategy for larger apps. It uses the [IntersectionObserver](https://developers.google.com/web/updates/2019/02/intersectionobserver-v2) API to preload only modules associated with links that are currently visible on the page.
+The [quicklink](https://github.com/GoogleChromeLabs/quicklink) library provides a better strategy for larger apps. It uses the [IntersectionObserver](/intersectionobserver-v2/) API to preload only modules associated with links that are currently visible on the page.
 
 You can add quicklink to an Angular app by using the [ngx-quicklink](https://www.npmjs.com/package/ngx-quicklink) package. Start by installing the package from npm:
 
@@ -100,12 +104,14 @@ export class AppModule {}
 
 Now when you open the application again, you'll notice that the router only preloads `nyan-nyan-module.js` since the button in the center of the page has a router link to it. And when you open the side navigation, you'll notice that the router then preloads the "About" route:
 
-<figure class="w-figure w-figure--fullbleed">
-<video controls loop muted poster="https://storage.googleapis.com/web-dev-angular/preloading/poster.png">
-  <source src="https://storage.googleapis.com/web-dev-angular/preloading/ngx-quicklink.webm" type="video/webm; codecs=vp8">
-  <source src="https://storage.googleapis.com/web-dev-angular/preloading/ngx-quicklink.mp4" type="video/mp4; codecs=h264">
-</video>
- <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+{% Video
+  src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/dfZkoiQyNh4fUj4DJjrc.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/SkNp99W1Bv2tsaRgOwoe.mp4"],
+  controls="true",
+  loop="true",
+  muted="true"
+%}
+ <figcaption>
     A demo of the quicklink preloading strategy.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/angular/route-preloading-in-angular/route-preloading.jpg b/src/site/content/en/angular/route-preloading-in-angular/route-preloading.jpg
deleted file mode 100644
index 6c5759eaf45..00000000000
Binary files a/src/site/content/en/angular/route-preloading-in-angular/route-preloading.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/hero.jpg b/src/site/content/en/angular/virtualize-lists-with-angular-cdk/hero.jpg
deleted file mode 100644
index f50cb20daa1..00000000000
Binary files a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/index.md b/src/site/content/en/angular/virtualize-lists-with-angular-cdk/index.md
index d7e565de8b9..6e853888820 100644
--- a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/index.md
+++ b/src/site/content/en/angular/virtualize-lists-with-angular-cdk/index.md
@@ -7,7 +7,7 @@ authors:
 date: 2019-07-12
 # Add an updated date to your post if you edit in the future.
 # updated: 2019-06-27
-hero: hero.jpg
+hero: image/admin/bGHUmFg8d3zHg6dJ29YT.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -15,8 +15,10 @@ alt: Stacks of vinyl records.
 description: |
   Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit.
 tags:
-  - angular
+  # - angular
   - performance
+feedback:
+  - api
 ---
 
 The scrolling list is one of the most common UI patterns today, whether it's browsing an infinitely scrolling feed on your favorite social media site, or navigating an enterprise dashboard. When scrolling lists become very long (hundreds, thousands, or hundreds of thousands of items), application performance can suffer.
@@ -66,7 +68,7 @@ To see how the package works, try creating a component with a simple list of num
 
 ```js
 @Component({
-  template: `<div *ngFor="let item of list">{% raw %}{% verbatim %}{{item}}{% endverbatim %}{% endraw %}</div>`
+  template: `<div *ngFor="let item of list">{% raw %}{{item}}{% endraw %}</div>`
 })
 export class ScrollComponent {
   list = Array.from({length: 100000}).map((_, i) => i);
@@ -80,7 +82,7 @@ To add virtual scrolling and avoid those problems, you need to create a viewport
 ```js/1-3
 @Component({
   template: `<cdk-virtual-scroll-viewport>
-    <div *ngFor="let item of list">{% raw %}{% verbatim %}{{item}}{% endverbatim %}{% endraw %}</div>
+    <div *ngFor="let item of list">{% raw %}{{item}}{% endraw %}</div>
     </cdk-virtual-scroll-viewport>`
 })
 export class ScrollComponent {
@@ -93,7 +95,7 @@ Because `ScrollingModule` dynamically renders subsets of the list, you have to s
 ```js/1
 @Component({
   template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
-    <div *ngFor="let item of list">{% raw %}{% verbatim %}{{item}}{% endverbatim %}{% endraw %}</div>
+    <div *ngFor="let item of list">{% raw %}{{item}}{% endraw %}</div>
     </cdk-virtual-scroll-viewport>`
 })
 export class ScrollComponent {
@@ -106,7 +108,7 @@ Finally, convert `*ngFor` to `*cdkVirtualFor`:
 ```js
 @Component({
   template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
-    <div *cdkVirtualFor="let item of list">{% raw %}{% verbatim %}{{item}}{% endverbatim %}{% endraw %}</div>
+    <div *cdkVirtualFor="let item of list">{% raw %}{{item}}{% endraw %}</div>
     </cdk-virtual-scroll-viewport>`
 })
 export class ScrollComponent {
@@ -117,10 +119,13 @@ export class ScrollComponent {
  Instead of iterating through the entire list, the viewport will dynamically identify and iterate through the correct subset of the list for the user. Now when the user loads the page, the CDK should render the subset of the list that fits on the screen (plus a bit of buffer), and any scrolling events in the viewport will load and render the appropriate subset of the list:
 
 <figure>
-  <video autoplay loop muted playsinline>
-    <source src="./render-subset.webm" type="video/webm">
-    <source src="./render-subset.mp4" type="video/mp4">
-  </video>
+  {% Video
+    src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hplr8uuGGlq7xhxfkeca.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tVvS430R28iEmDEGLewX.mp4"],
+    autoplay=true,
+    loop=true,
+    muted=true,
+    playsinline=true
+  %}
   <figcaption>
     The CDK rendering subsets of a list as the user scrolls.
   </figcaption>
diff --git a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.mp4 b/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.mp4
deleted file mode 100644
index 58d19fc1b5e..00000000000
Binary files a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.mp4 and /dev/null differ
diff --git a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.webm b/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.webm
deleted file mode 100644
index b3de7bfdaaa..00000000000
Binary files a/src/site/content/en/angular/virtualize-lists-with-angular-cdk/render-subset.webm and /dev/null differ
diff --git a/src/site/content/en/animations/animations-examples/index.md b/src/site/content/en/animations/animations-examples/index.md
new file mode 100644
index 00000000000..da9eb50d30b
--- /dev/null
+++ b/src/site/content/en/animations/animations-examples/index.md
@@ -0,0 +1,368 @@
+---
+layout: post
+title: Examples of high-performance CSS animations
+authors:
+  - rachelandrew
+description: |
+  Demonstrating how high performance techniques can create complex and beautiful animations.
+date: 2020-10-23
+tags:
+  - animations
+  - performance
+---
+
+In this post find out how some popular animations found on CodePen have been created.
+These animations all use the performant techniques discussed in other articles in this section.
+
+See [Why are some animations slow?](/animations-overview/) to learn the theory behind
+these recommendations, and the [Animations Guide](/animations-guide) for practical tips.
+
+## Wizard loading animation
+
+<div style="height: 500px; width: 100%;">
+  {% IFrame {
+    src: 'https://codepen.io/Craaftx/embed/ExyYRMK?height=458&theme-id=light&default-tab=result',
+    title: 'Only CSS Loader - Wizard by Guilmain Dorian'
+  } %}
+</div>
+
+[View Wizard loading animation on CodePen](https://codepen.io/Craaftx/full/ExyYRMK)
+
+This loading animation is built entirely with CSS.
+The image plus all of the animation has been created in CSS and HTML,
+no images or JavaScript.
+To understand how it was created and how well it performs you can use Chrome DevTools.
+
+### Inspect the animation with Chrome DevTools
+
+With the animation running, open the Performance tab in Chrome DevTools and record a few seconds of the animation.
+You should see in the Summary that the browser is not doing any Layout or Paint operations when running this animation.
+
+<figure>
+  {% Img src="image/admin/r1h4gb24ZiYXAfI7Mskh.jpg", alt="Summary in DevTools", width="724", height="416" %}
+  <figcaption>
+    The summary after profiling the wizard animation.
+  </figcaption>
+</figure>
+
+To find out how this animation was achieved without causing layout and paint,
+inspect any of the moving elements in Chrome DevTools.
+You can use the **Animations Panel** to locate the various animated elements,
+clicking on any element will highlight it in the DOM.
+
+<figure>
+  {% Img src="image/admin/sPoemcfld1jfUkSFhv3o.jpg", alt="The Animations Panel showing the various parts of our animation.", width="800", height="349" %}
+  <figcaption>
+    Viewing and selecting items in the Chrome DevTools Animation Panel.
+  </figcaption>
+</figure>
+
+For example select the triangle,
+and watch how the box of the element transforms during its journey into the air,
+as it spins, and then returns to the start position.
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/STzIqse0ekWT49oJbwX5.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+  <figcaption>
+    Video showing how we can track the path of the triangle in Chrome DevTools.
+  </figcaption>
+</figure>
+
+With the element still selected look at the Styles Panel.
+There you can see the CSS which draws the shape of the triangle,
+and the animation being used.
+
+### How it works
+
+The triangle is created by using the `::after` pseudo-element to add generated content,
+using borders to create the shape.
+
+```css
+.triangle {
+    position: absolute;
+    bottom: -62px;
+    left: -10px;
+    width: 110px;
+    height: 110px;
+    border-radius: 50%;
+}
+
+.triangle::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -10px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 28px 48px 28px;
+    border-color: transparent transparent #89beb3 transparent;
+}
+```
+
+{% Aside %}
+You can find out more about making shapes with borders and generated content in
+[The Shapes of CSS](https://css-tricks.com/the-shapes-of-css/).
+{% endAside %}
+
+The animation is added with the following line of CSS,
+
+```css
+animation: path_triangle 10s ease-in-out infinite;
+```
+
+Staying in Chrome DevTools you can find the keyframes by scrolling down the Style Panel.
+There you will find that the animation is created by using `transform` to change the position of the element and rotate it.
+The `transform` property is one of the properties described in the [Animations Guide](/animations-guide),
+which does not cause the browser to do layout or paint operations (which are the main causes of slow animations).
+
+```css
+@keyframes path_triangle {
+  0% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-172px) translatex(10px) rotate(-10deg);
+  }
+  55% {
+    transform: translateY(-172px) translatex(10px) rotate(-365deg);
+  }
+  58% {
+    transform: translateY(-172px) translatex(10px) rotate(-365deg);
+  }
+  63% {
+    transform: rotate(-360deg);
+  }
+}
+```
+
+{% Glitch 'animation-breakdown1-2' %}
+
+Each of the different moving parts of this animation uses similar techniques.
+The result is a complex animation which runs smoothly.
+
+## Pulsating Circle
+
+<div style="height: 500px; width: 100%;">
+{% IFrame {
+  src: 'https://codepen.io/peeke/embed/BjxXZa?height=458&theme-id=light&default-tab=result',
+  title: 'Pulsating Circle by Peeke'
+}
+%}
+</div>
+
+[View Pulsating Circle on CodePen](https://codepen.io/peeke/full/BjxXZa)
+
+This type of animation is sometimes used to draw attention to something on a page.
+To understand the animation you can use Firefox DevTools.
+
+### Inspect the animation with Firefox DevTools
+
+With the animation running, open the Performance tab in Firefox DevTools and record a few seconds of the animation.
+Stop the recording,
+in the waterfall you should see that there are no entries for **Recalculate Style**.
+You now know that this animation does not cause style recalculation,
+and therefore layout and paint operations.
+
+<figure>
+  {% Img src="image/admin/68jWlrbNhgmS07vrXMCO.jpg", alt="details of the animation in the Firefox Waterfall", width="800", height="354" %}
+  <figcaption>
+    The Firefox DevTools Waterfall.
+  </figcaption>
+</figure>
+
+Staying in Firefox DevTools inspect the circle to see how this animation works.
+The `<div>` with a class of `pulsating-circle` marks the position of the circle,
+however it does not draw a circle itself.
+
+```css
+.pulsating-circle {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 30px;
+    height: 30px;
+}
+```
+
+The visible circle and animations are achieved using the `::before` and `::after` pseudo-elements.
+
+The `::before` element creates the opaque ring that extends outside of the white circle,
+using an animation called `pulse-ring`,
+which animates `transform: scale`, and `opacity`.
+
+```css
+.pulsating-circle::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 300%;
+    height: 300%;
+    box-sizing: border-box;
+    margin-left: -100%;
+    margin-top: -100%;
+    border-radius: 45px;
+    background-color: #01a4e9;
+    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.33);
+  }
+  80%, 100% {
+    opacity: 0;
+  }
+}
+```
+
+Another way to see which properties are being animated is to select the **Animations** panel in Firefox DevTools.
+You will then see a visualization of the animations being used,
+and the properties that are being animated.
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/FuxnywlwqojS8YVMCmKC.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+  <figcaption>
+    With the ::before pseudo-element selected we can see which properties are animating.
+  </figcaption>
+</figure>
+
+The white circle itself is created and animated using the `::after` pseudo-element.
+The animation `pulse-dot` uses `transform: scale` to grow and shrink the dot during the animation.
+
+```css
+.pulsating-circle::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
+}
+
+@keyframes pulse-dot {
+  0% {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.8);
+  }
+}
+```
+
+An animation like this could be used in various places in your application,
+it's important that these small touches don't impact the overall performance of your app.
+
+## Pure CSS 3D Sphere
+
+<div style="height: 500px; width: 100%;">
+{% IFrame {
+  src: 'https://codepen.io/iamlark/embed/jYzYJg?height=458&theme-id=light&default-tab=result',
+  title: 'Pure CSS 3d Sphere'
+}
+%}
+</div>
+
+[View Pure CSS 3D Sphere on CodePen](https://codepen.io/iamlark/full/jYzYJg)
+
+This animation seems incredibly complicated,
+however it uses techniques that we have already seen in the previous examples.
+The complexity comes from animating a large number of elements.
+
+Open Chrome DevTools and select one of the elements with a class of `plane`.
+The sphere is made up of a set of rotating planes and spokes.
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8lA3linRM6SqufzlUlJR.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+  <figcaption>
+    The plane appears to be rotating.
+  </figcaption>
+</figure>
+
+{% Aside %}
+The [DOM Search Tool](https://developer.chrome.com/docs/devtools/dom/#search)
+in Chrome DevTools can make it easier to find an element that you want to inspect.
+{% endAside %}
+
+These planes and spokes are inside a wrapper `<div>`,
+and it is this element which is rotating using `transform: rotate3d`.
+
+```css
+.sphere-wrapper {
+  transform-style: preserve-3d;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  animation: rotate3d 10s linear infinite;
+}
+
+@keyframes rotate3d {
+  0% {
+    transform: rotate3d(1, 1, 1, 0deg);
+  }
+  25% {
+    transform: rotate3d(1, 1, 1, 90deg);
+  }
+  50% {
+    transform: rotate3d(1, 1, 1, 180deg);
+  }
+  75% {
+    transform: rotate3d(1, 1, 1, 270deg);
+  }
+  100% {
+    transform: rotate3d(1, 1, 1, 360deg);
+  }
+}
+```
+
+The dots can be found nested inside the `plane` and `spoke` elements,
+they use an animation which uses transform to scale and translate them.
+This creates the pulsing effect.
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/JoLi8L3VW9nUG25sEvkZ.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+  <figcaption>
+    The dot rotates with the sphere and pulses.
+  </figcaption>
+</figure>
+
+```css
+.spoke-15 .dot,
+.spoke-21 .dot {
+  animation: pulsate 0.5s infinite 0.83333333s alternate both;
+  background-color: #55ffee;
+}
+
+@-webkit-keyframes pulsate {
+  0% {
+    transform: rotateX(90deg) scale(0.3) translateZ(20px);
+  }
+  100% {
+    transform: rotateX(90deg) scale(1) translateZ(0px);
+  }
+}
+```
+
+The work involved in creating this animation has been to get the timing right,
+to create the turning and pulsing effect.
+The animations themselves are quite straightforward,
+and use methods which perform very well.
+
+You can see how this animation performs by opening Chrome DevTools and recording Performance while it is running.
+After the initial load, the animation is not triggering Layout or Paint,
+and runs smoothly.
+
+## Conclusion
+
+From these examples you can see how animating a few properties using performant methods can create some very cool animations.
+By defaulting to the performant methods described in the [Animations guide](/animations-guide)
+you can spend your time creating the effect you want, with fewer concerns about making the page slow.
diff --git a/src/site/content/en/animations/animations-guide/index.md b/src/site/content/en/animations/animations-guide/index.md
new file mode 100644
index 00000000000..c8a354c7266
--- /dev/null
+++ b/src/site/content/en/animations/animations-guide/index.md
@@ -0,0 +1,341 @@
+---
+layout: post
+title: How to create high-performance CSS animations
+authors:
+  - rachelandrew
+  - kaycebasques
+description: |
+  Use the transform and opacity CSS properties as much as possible, and avoid anything that
+  triggers layout or painting.
+date: 2020-10-06
+tags:
+  - animations
+  - performance
+---
+
+This guide teaches you how to create high-performance CSS animations.
+
+See [Why are some animations slow?](/animations-overview/) to learn the theory behind
+these recommendations.
+
+## Browser compatibility
+
+All of the CSS properties that this guide recommends have good cross-browser support.
+
+* [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform#Browser_compatibility)
+* [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity#Browser_compatibility)
+* [`will-change`](https://developer.mozilla.org/docs/Web/CSS/will-change#Browser_compatibility)
+
+## Move an element {: #move }
+
+To move an element, use the `translate` or `rotation` keyword values of the
+[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) property.
+
+For example to slide an item into view, use `translate`.
+
+```css
+.animate {
+  animation: slide-in 0.7s both;
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(-1000px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+```
+
+{% Glitch 'animation-slide-in' %}
+
+Items can also be rotated, in the example below 360 degrees.
+
+```css
+.animate {
+  animation: rotate 0.7s ease-in-out both;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+```
+
+{% Glitch 'animation-rotate' %}
+
+## Resize an element {: #resize }
+
+To resize an element, use the `scale` keyword value of the
+[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) property.
+
+```css
+.animate {
+  animation: scale 1.5s both;
+}
+
+@keyframes scale {
+  50% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+```
+
+{% Glitch 'animation-scale' %}
+
+## Change an element's visibility {: #visibility }
+
+To show or hide an element, use [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity).
+
+```css
+.animate {
+  animation: opacity 2.5s both;
+}
+
+@keyframes opacity {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+```
+
+{% Glitch 'animation-opacity' %}
+
+{% Aside %}
+  Find copy and paste examples of various animations at [Animista](https://animista.net/).
+{% endAside %}
+
+## Avoid properties that trigger layout or paint {: #triggers }
+
+Before using any CSS property for animation (other than `transform` and `opacity`),
+determine the property's impact on the [rendering pipeline](/animations-overview/#pipeline).
+Avoid any property that triggers layout or paint unless absolutely necessary.
+
+{% Aside 'warning' %}
+  If you must use a property
+  that triggers layout or paint, it is unlikely that you will be able to make the animation
+  smooth and high-performance.
+{% endAside %}
+
+## Force layer creation {: #force }
+
+As explained in [Why are some animations slow?](/animations-overview),
+by placing elements on a new layer they can be repainted without also requiring the rest of the layout to be repainted.
+
+Browsers will often make good decisions about which items should be placed on a new layer,
+but you can manually force layer creation with the
+[`will-change`](https://developer.mozilla.org/docs/Web/CSS/will-change) property.
+As the name suggests, this property tells the browser that this element is going to be changed in some way.
+
+{% Aside 'caution' %}
+As layer creation can cause other performance issues,
+this property should not be used as a premature optimization.
+Instead, you should only use it when you are seeing jank and think that promoting
+the element to a new layer may help.
+{% endAside %}
+
+In CSS this property can be applied to any selector:
+
+```css
+body > .sidebar {
+  will-change: transform;
+}
+```
+
+However, [the specification](https://drafts.csswg.org/css-will-change/)
+suggests this approach should only be taken for elements that are always about to change.
+If the above example was a sidebar the user could slide in and out, that might be the case.
+Some items on your page may not frequently change,
+and so it would be better to apply `will-change` using JavaScript
+at a point where it becomes likely the change will occur.
+You'll need to make sure to give the browser enough time to perform the optimizations needed
+and then remove the property once the changing has stopped.
+
+{% Aside %}
+For more information and examples of correct use of `will-change` read
+[Everything You Need To Know About The CSS `will-change` Property](https://dev.opera.com/articles/css-will-change-property/).
+{% endAside %}
+
+If you need a way to force layer creation in one of the rare browsers that doesn't support
+`will-change` (most likely Internet Explorer at this point),
+you can set `transform: translateZ(0)`.
+
+## Debug slow or janky animations {: #debug }
+
+Chrome DevTools and Firefox DevTools have lots of tools to help you figure out why
+your animations are slow or janky.
+
+### Check if an animation triggers layout {: #layout }
+
+An animation that moves an element using something other than `transform`, is likely to be slow.
+In the following example, I have achieved the same visual result animating `top` and `left`, and using `transform`.
+
+{% Compare 'worse' %}
+```css/9-10
+.box {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  animation: move 3s ease infinite;
+}
+
+@keyframes move {
+  50% {
+     top: calc(90vh - 160px);
+     left: calc(90vw - 200px);
+  }
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css/9
+.box {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  animation: move 3s ease infinite;
+}
+
+@keyframes move {
+  50% {
+     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
+  }
+}
+```
+{% endCompare %}
+
+You can test this in the following two Glitch examples,
+and explore performance using DevTools.
+
+* [Before](https://glitch.com/~animation-with-top-left).
+* [After](https://glitch.com/~animation-with-transform).
+
+#### Chrome DevTools {: #layout-chrome }
+
+1. Open the **Performance** panel.
+1. [Record runtime performance](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#record-runtime)
+   while your animation is happening.
+1. Inspect the **Summary** tab.
+
+If you see a nonzero value for **Rendering** in the **Summary** tab, it may mean that your
+animation is causing the browser to do layout work.
+
+<figure>
+  {% Img src="image/admin/cMNQR2jBEwa6ku5POXtZ.jpg", alt="The Summary panel shows 37ms for rendering and 79ms for painting.", width="800", height="699" %}
+  <figcaption>
+    The <a href="https://animation-with-top-left.glitch.me/">animation-with-top-left</a>
+    example causes rendering work.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/admin/3bn44P9h6lR93uBNRXY3.jpg", alt="The Summary panel show zero values for rendering and painting.", width="800", height="639" %}
+  <figcaption>
+    The <a href="https://animation-with-transform.glitch.me/">animation-with-transform</a>
+    example does not cause rendering work.
+  </figcaption>
+</figure>
+
+#### Firefox DevTools {: #layout-firefox }
+
+In Firefox DevTools the [Waterfall](https://developer.mozilla.org/docs/Tools/Performance/Waterfall)
+can help you to understand where the browser is spending time.
+
+1. Open the **Performance** panel.
+1. In the panel Start Recording Performance while your animation is happening.
+1. Stop the recording and inspect the **Waterfall** tab.
+
+If you see entries for [**Recalculate Style**](https://developer.mozilla.org/docs/Tools/Performance/Scenarios/Animating_CSS_properties)
+then the browser is having to begin at the start of the [rendering waterfall](https://developer.mozilla.org/docs/Tools/Performance/Scenarios/Animating_CSS_properties).
+
+### Check if an animation is dropping frames {: #fps }
+
+1. Open the [**Rendering** tab][rendering] of Chrome DevTools.
+1. Enable the **FPS meter** checkbox.
+1. Watch the values as your animation runs.
+
+At the top of the **FPS meter** UI you see the label **Frames**. Below
+that you see a value along the lines of `50% 1 (938 m) dropped of 1878`.
+A high-performance animation will have a high percentage, e.g. `99%`. A
+high percentage means that few frames are being dropped and the animation will look smooth.
+
+<figure>
+  {% Img src="image/admin/i9Cg7nswyO7jB768kpdQ.jpg", alt="The fps meter shows 50% of frames were dropped", width="710", height="469" %}
+  <figcaption>
+    The <a href="https://animation-with-top-left.glitch.me/">animation-with-top-left</a>
+    example causes 50% of frames to be dropped
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/admin/FGROZ0i15tCAoiIOoEdG.jpg", alt="The fps meter shows only 1% of frames were dropped", width="710", height="468" %}
+  <figcaption>
+    The <a href="https://animation-with-transform.glitch.me/">animation-with-transform</a>
+    example causes only 1% of frames to be dropped.
+  </figcaption>
+</figure>
+
+### Check if an animation triggers paint {: #paint }
+
+When it comes to painting, some things are more expensive than others.
+For example, anything that involves a blur (like a shadow, for example) is going to take longer to paint than drawing a red box.
+In terms of CSS, however, this isn't always obvious:
+`background: red;` and `box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);`
+don't necessarily look like they have vastly different performance characteristics, but they do.
+
+Browser DevTools can help you to identify which areas need to be repainted,
+and performance issues related to painting.
+
+#### Chrome DevTools {: #paint-chrome }
+
+1. Open the [**Rendering** tab][rendering] of Chrome DevTools.
+1. Select **Paint Flashing**.
+1. Move the pointer around the screen.
+
+<figure>
+  {% Img src="image/admin/MzAeQc5PvCltcm3gWaNV.jpg", alt="A UI element highlighted in green to demonstrate it will be repainted", width="708", height="185" %}
+  <figcaption>In this example from Google Maps you can see the elements that will be repainted.</figcaption>
+</figure>
+
+If you see the whole screen flashing,
+or areas that you don't think should change highlighted then you can do some investigation.
+
+If you need to dig into whether a particular property is causing performance issues due to painting,
+the [paint profiler](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-profiler)
+in Chrome DevTools can help.
+
+#### Firefox DevTools {: #paint-firefox }
+
+1. Open **Settings** and add a Toolbox button for [Toggle paint flashing](https://developer.mozilla.org/docs/Tools/Paint_Flashing_Tool).
+1. On the page you want to inspect, toggle the button on and move your mouse or scroll to see highlighted areas.
+
+
+## Conclusion
+
+Where possible restrict animations to `opacity` and `transform`
+in order to keep animations on the compositing stage of the rendering path.
+Use DevTools to check which stage of the path is being affected by your animations.
+
+Use the paint profiler to see if any paint operations are particularly expensive.
+If you find anything,
+see if a different CSS property will give the same look and feel with better performance.
+
+Use the `will-change` property sparingly,
+and only if you encounter a performance issue.
+
+[rendering]: https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#rendering
diff --git a/src/site/content/en/animations/animations-overview/index.md b/src/site/content/en/animations/animations-overview/index.md
new file mode 100644
index 00000000000..d321a07cafe
--- /dev/null
+++ b/src/site/content/en/animations/animations-overview/index.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: Why are some animations slow?
+authors:
+  - rachelandrew
+description: |
+  Animating well is core to a great web experience.
+  This post explains why certain types of animation perform better than others.
+date: 2020-10-06
+tags:
+  - animations
+  - performance
+---
+
+Modern browsers can animate two CSS properties cheaply: `transform` and `opacity`.
+If you animate anything else,
+the chances are you're not going to hit a silky smooth 60 frames per second (FPS).
+This post explains why this is the case.
+
+## Animation performance and frame rate {: #fps }
+
+It is widely accepted that a frame rate of 60 FPS is the target when animating anything on the web.
+This frame rate will ensure that your animations look smooth.
+On the web a frame is the time that it takes to do all of the work required to update and repaint the screen.
+If each frame does not complete within 16.7ms (1000ms / 60 ≈ 16.7),
+then users will perceive the delay.
+
+## The rendering pipeline {: #pipeline }
+
+To display something on a webpage the browser has to go through the following sequential steps:
+
+1. **Style**: Calculate the styles that apply to the elements.
+2. **Layout**: Generate the geometry and position for each element.
+3. **Paint**: Fill out the pixels for each element into [layers](#layers).
+4. **Composite**: Draw the layers to the screen.
+
+These four steps are known as the browser's **rendering pipeline**.
+
+When you animate something on a page that has already loaded
+these steps have to happen again.
+This process begins from the step that has to be changed in order to allow the animation to take place.
+
+As mentioned before, these steps are **sequential**.
+For example, if you animate something that changes layout, the paint and composite
+steps also have to run again. Animating something that changes layout
+is therefore more expensive than animating something that only changes compositing.
+
+{% Aside %}
+For an in-depth look at exactly how this process happens in the browser
+read [From Braces to Pixels](https://alistapart.com/article/braces-to-pixels/) and
+[Inside look at modern browser browser](https://developer.chrome.com/blog/inside-browser-part3/).
+{% endAside %}
+
+### Animating layout properties {: #layout }
+
+Layout changes involve calculating the geometry (position and size) of all the elements affected by the change.
+If you change one element,
+the geometry of other elements may need to be recalculated.
+For example, if you change the width of the `<html>` element any of its children may be affected.
+Due to the way elements overflow and affect one another,
+changes further down the tree can sometimes result in layout calculations all the way back up to the top.
+
+The larger the tree of visible elements,
+the longer it takes to perform layout calculations.
+
+### Animating paint properties {: #paint }
+
+[Paint](https://developer.chrome.com/blog/inside-browser-part3/#paint)
+is the process of determining in what order elements should be painted to the screen.
+It is often the longest-running of all tasks in the pipeline.
+
+The majority of painting in modern browsers is done in
+[software rasterizers](https://software.intel.com/content/www/us/en/develop/articles/software-vs-gpu-rasterization-in-chromium.html).
+Depending on how the elements in your app are grouped into layers,
+other elements besides the one that changed may also need to be painted.
+
+### Animating composite properties {: #composite }
+
+[Compositing](https://developer.chrome.com/blog/inside-browser-part3/#what-is-compositing)
+is the process of separating the page into layers, converting the information about how the page should look
+into pixels (rasterization), and putting the layers together to create a page (compositing).
+
+This is why the `opacity` property is included in the list of things which are cheap to animate.
+As long as this property is in its own layer, changes to it can be handled by the GPU during the compositing step.
+Chromium-based browsers and WebKit create a new layer for any element which has a CSS transition or animation on `opacity`.
+
+{% Aside %}
+For an in-depth look at compositing see the article
+[GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/)
+{% endAside %}
+
+## What is a layer? {: #layers }
+
+By placing the things that will be animated or transitioned onto a new layer,
+the browser only needs to repaint those items and not everything else.
+You may be familiar with Photoshop's concept of a layer which contains a bunch of elements that can be moved together.
+Browser rendering layers are similar to that idea.
+
+While the browser does a good job of making decisions about what elements should be on a new layer,
+if it misses one there are ways to force layer creation.
+You can find out about that in [How to create high-performance animations](/animations-guide).
+However, creating new layers should be done with care because each layer uses memory.
+On devices with limited memory creating new layers may cause more of a performance problem than the one you are trying to solve.
+In addition, each layer's textures need to be uploaded to the GPU.
+Therefore you may well hit constraints of bandwidth between the CPU and GPU.
+
+{% Aside %}
+You can read a good explanation of layers, and how to create them in
+[Layers and how to force them](https://dassur.ma/things/forcing-layers/).
+{% endAside %}
+
+## CSS vs JavaScript performance {: #css-js }
+
+You might wonder: is it better from a performance perspective to use CSS or JavaScript for animations?
+
+CSS-based animations, and [Web Animations](/web-animations/) (in the browsers that support the API),
+are typically handled on a thread known as the *compositor thread*.
+This is different from the browser's *main thread*, where styling, layout, painting, and JavaScript are executed.
+This means that if the browser is running some expensive tasks on the main thread,
+these animations can keep going without being interrupted.
+
+As explained in this article,
+other changes to transforms and opacity can, in many cases, also be handled by the compositor thread.
+
+If any animation triggers paint, layout, or both,
+the main thread will be required to do work.
+This is true for both CSS and JavaScript animations,
+and the overhead of layout or paint will likely dwarf any work associated with CSS or JavaScript execution,
+rendering the question moot.
diff --git a/src/site/content/en/animations/index.md b/src/site/content/en/animations/index.md
new file mode 100644
index 00000000000..7353c5e9b21
--- /dev/null
+++ b/src/site/content/en/animations/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2020-10-06
+pathName: animations
+---
diff --git a/src/site/content/en/authors/feed.11tydata.js b/src/site/content/en/authors/feed.11tydata.js
index f7afd92f8f0..687d82d9e36 100644
--- a/src/site/content/en/authors/feed.11tydata.js
+++ b/src/site/content/en/authors/feed.11tydata.js
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-const {feed} = require('../../../_collections/hooks/authors');
+const filterByLang = require('../../../_filters/filter-by-lang');
+const {lang} = require('../lang');
 
 module.exports = {
   pagination: {
-    before: (authors) => feed(authors),
+    before: (authors) => {
+      for (const author of authors) {
+        author.elements = filterByLang(author.elements, lang);
+      }
+      return authors;
+    },
   },
 };
diff --git a/src/site/content/en/authors/feed.njk b/src/site/content/en/authors/feed.njk
index ff77f681ee8..d142885b449 100644
--- a/src/site/content/en/authors/feed.njk
+++ b/src/site/content/en/authors/feed.njk
@@ -1,12 +1,12 @@
 ---
 renderData:
   metadata:
-    author: "{{ paged.title }}"
-    icon: "{{ paged.data.hero or '/images/social.png' }}"
+    author: "{{ paged.title | i18n(locale) }}"
+    icon: "{{ paged.data.hero | imgix }}"
     id: https://web.dev/
-    logo: https://web.dev/images/rss-banner.png
-    subtitle: "{{ paged.description }}"
-    title: "{{ paged.title }} on web.dev"
+    logo: https://web.dev/images/shared/rss-banner.png
+    subtitle: "{{ paged.description | i18n(locale) }}"
+    title: "{{ paged.title | i18n(locale) }} on web.dev"
     url: https://web.dev{{ paged.href }}feed.xml
 noindex: true
 permalink: "/{{lang}}{{ paged.href }}feed.xml"
@@ -20,28 +20,28 @@ pagination:
 <feed xmlns="http://www.w3.org/2005/Atom">
   <id>{{ renderData.metadata.id }}</id>
   <title>{{ renderData.metadata.title }}</title>
-  <updated>{{ paged.elements | reverse | rssLastUpdatedDate }}</updated>
+  <updated>{{ site.buildDate | rssDate }}</updated>
   <author>
     <name>{{ renderData.metadata.author }}</name>
   </author>
   <link href="{{ renderData.metadata.url }}" rel="self"/>
   <link href="{{ renderData.metadata.id }}"/>
-  <icon>https://web.dev{{ renderData.metadata.icon }}</icon>
+  <icon>{{ renderData.metadata.icon }}</icon>
   <logo>{{ renderData.metadata.logo }}</logo>
   <subtitle>{{ renderData.metadata.subtitle }}</subtitle>
   {% for post in paged.elements -%}
   {#  absoluteUrl comes from 11ty RSS Plugin (@see https://www.11ty.dev/docs/plugins/rss/) #}
-  {% set absolutePostUrl -%}{{ post.data.canonicalUrl | url | absoluteUrl(renderData.metadata.url) }}{%- endset %}
+  {% set absolutePostUrl -%}{{ post.url | url | absoluteUrl(renderData.metadata.url) }}{%- endset %}
   <entry>
     <title>{{ post.data.title }}</title>
     <link href="{{ absolutePostUrl }}"/>
     <updated>{{ post.date | rssDate }}</updated>
     <id>{{ absolutePostUrl }}</id>
-    <content type="html">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+    <content type="html" mode="escaped">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
     {% for entry in post.data.authors %}
-    {%- set author =  collections.authors[entry] -%}
+    {%- set author = collections.authors[entry] -%}
     <author>
-      <name>{{ author.title }}</name>
+      <name>{{ author.title | i18n(locale) }}</name>
     </author>
     {%- endfor %}
   </entry>
diff --git a/src/site/content/en/authors/index.md b/src/site/content/en/authors/index.md
new file mode 100644
index 00000000000..5c777019e37
--- /dev/null
+++ b/src/site/content/en/authors/index.md
@@ -0,0 +1,13 @@
+---
+layout: index-page
+imageType: 'round'
+title: Authors
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+pagination:
+  data: collections.authors
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/authors/index.njk b/src/site/content/en/authors/index.njk
deleted file mode 100644
index d6d54fd4981..00000000000
--- a/src/site/content/en/authors/index.njk
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: layout
-title: Authors
-permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
-description: Our latest news, updates, and stories for developers
-pagination:
-  data: collections.authors
-  size: 1
-  alias: paged
-  resolve: values
-eleventyComputed:
-  canonicalUrl: "{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}"
----
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="authors-landing-page">
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
-
-  <div class="w-layout-container w-pb--non">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline">{{ title }}</h1>
-      <p class="w-page-header__copy">{{ description }}</p>
-    </header>
-  </div>
-  <section class="w-grid">
-    <div class="w-grid__columns w-grid__columns--three" role="list">
-      {% for element in paged.elements %}
-        {% AuthorCard element %}
-      {% endfor %}
-    </div>
-  </section>
-
-  {% include 'pagination.njk' %}
-</div>
diff --git a/src/site/content/en/authors/individual.11tydata.js b/src/site/content/en/authors/individual.11tydata.js
index 1dccc141b22..962a9a2a338 100644
--- a/src/site/content/en/authors/individual.11tydata.js
+++ b/src/site/content/en/authors/individual.11tydata.js
@@ -15,10 +15,10 @@
  */
 
 const {individual} = require('../../../_collections/hooks/authors');
-const lang = require('../lang');
+const {lang} = require('../lang');
 
 module.exports = {
   pagination: {
-    before: (authors) => individual(authors, lang.lang),
+    before: (authors) => individual(authors, lang),
   },
 };
diff --git a/src/site/content/en/authors/individual.md b/src/site/content/en/authors/individual.md
new file mode 100644
index 00000000000..377d84f4b86
--- /dev/null
+++ b/src/site/content/en/authors/individual.md
@@ -0,0 +1,21 @@
+---
+layout: item-page
+path: 'authors'
+showHero: true
+imageType: 'round'
+title: Authors
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+renderData:
+  title: "{{ paged.overrideTitle or paged.title | i18n(locale) or title }}"
+  description: "{{ paged.description | i18n(locale) or description }}"
+  bio: "{{ paged.bio }}"
+  rss: "{{ paged.href }}feed.xml"
+  hero: "{{ paged.data.hero }}"
+pagination:
+  data: collections.authors
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/authors/individual.njk b/src/site/content/en/authors/individual.njk
deleted file mode 100644
index f54b9d7c923..00000000000
--- a/src/site/content/en/authors/individual.njk
+++ /dev/null
@@ -1,59 +0,0 @@
----
-layout: layout
-title: Authors
-permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
-description: Our latest news, updates, and stories for developers
-renderData:
-  title: "{{ paged.title or title }}"
-  description: "{{ paged.description or description }}"
-  rss: "{{ paged.href }}feed.xml"
-pagination:
-  data: collections.authors
-  size: 1
-  alias: paged
-  resolve: values
-eleventyComputed:
-  canonicalUrl: "{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}"
----
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="authors-landing-page">
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
-
-  <div class="w-layout-container w-pb--non">
-    <header class="w-page-header w-author-page-header">
-      <img src="{{paged.data.hero}}" alt="{{paged.data.alt}}" class="w-author-page__image">
-      <h1 class="w-page-header__headline w-author-page-header__headline">{{ renderData.title }}</h1>
-      <p class="w-page-header__copy">{{ renderData.description | safe }}</p>
-      <div class="w-author-page__links">
-        {% if paged.homepage %}
-          <a href="{{ paged.homepage }}" target="_blank" class="w-author-page__link">
-            <img src="/images/icons/language.svg" alt="Homepage" class="w-author-page__icon">
-          </a>
-        {% endif %}
-        {% if paged.twitter %}
-          <a href="https://twitter.com/{{ paged.twitter }}" target="_blank" class="w-author-page__link">
-            <img src="/images/icons/twitter.svg" alt="Twitter" class="w-author-page__icon">
-          </a>
-        {% endif %}
-        {% if paged.github %}
-          <a href="https://github.com/{{ paged.github }}" target="_blank" class="w-author-page__link">
-            <img src="/images/icons/github.svg" alt="GitHub" class="w-author-page__icon">
-          </a>
-        {% endif %}
-        {% if paged.glitch %}
-          <a href="https://glitch.com/@{{ paged.glitch }}" target="_blank" class="w-author-page__link">
-            <img src="/images/icons/glitch.svg" alt="Glitch" class="w-author-page__icon">
-          </a>
-        {% endif %}
-        <a href="{{ renderData.rss }}" target="_blank" class="w-author-page__link">
-          <img src="/images/icons/rss.svg" alt="RSS Feed" class="w-author-page__icon">
-        </a>
-      </div>
-    </header>
-  </div>
-  {% include 'partials/paged.njk' %}
-</div>
diff --git a/src/site/content/en/baseline/index.md b/src/site/content/en/baseline/index.md
new file mode 100644
index 00000000000..e4cffc5b49a
--- /dev/null
+++ b/src/site/content/en/baseline/index.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: "Baseline"
+subhead: |
+  Web Platform Baseline brings clarity to information about browser support for web platform features.
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/Gv27TPZQF9EPSZIDmpHZ.png
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/0VOcvycql3S9d7wFy6Zv.png
+alt: The Baseline icon for supported features which includes a green check.
+date: 2023-05-10
+description: |
+  Web Platform Baseline brings clarity to information about browser support for web platform features.
+tags:
+  - baseline
+---
+
+Web Platform Baseline gives you clear information about which web platform features are safe to use in your projects today. When reading an article, or choosing a library for your project, if the features used are all part of Baseline, you can trust the level of browser compatibility. By aligning with Baseline, there should be no surprises when testing your site.
+
+Baseline is rolling out on MDN, web.dev, and we will be providing the tools for you to show that features described in an article or library are all in Baseline.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/LdeGG4Edq2Q7TRfovzIz.png", alt="A screenshot of the page for the CSS grid property on MDN. The green checkmark for Baseline shows this feature is supported.", width="800", height="503" %}
+    <figcaption>Baseline on MDN.</figcaption>
+</figure>
+
+Baseline makes target browser support easy to understand for all your stakeholders and team members. 
+
+- When planning a project, rather than needing to list specific browser versions, you can set a requirement to use features that are part of Baseline.
+- When publishing a library, you can help potential users understand support of features used (and therefore whether it is safe to use on their site) by declaring support for Baseline.
+- When writing a tutorial, you can tell readers that everything described is in Baseline. Your reader then knows this is a solution they can incorporate into a project.
+
+Features become part of Baseline when they are supported in the current and previous version of all major browsers—Chrome, Edge, Firefox, and Safari. Targeting Baseline helps prevent your site requirements becoming stuck in the past. When adding features, you can take advantage of new things that have become part of Baseline, maintaining the same level of support for your users. 
+
+## Working with our partners at other browsers
+
+The Chrome team wants to improve the experience of developers, and we know how important it is that your sites and applications work well in all browsers. To improve interoperability we have been collaborating with Apple, Microsoft and Mozilla, along with other partners in Interop 2022 and Interop 2023. 
+
+As there will always be some gap between features being available in all browsers, we proposed the idea of creating a known set of safe features to the [Web DX Community Group](https://www.w3.org/blog/2022/11/webdx-improving-the-experience-for-web-developers/). This idea became Baseline, a way to identify which features work well across all engines, a way to make support in a multi-engine world clear.
+
+## Baseline 2024
+
+Baseline will move as more features become interoperable, however we think there is value in understanding the featureset of the web at a point in time. Therefore, once a year we will publish the Baseline set of the year, later this year you’ll be able to see what’s in Baseline 2024. This means if you want a non-moving target you can target the yearly release. You’ll also be able to compare year on year, how the web platform has changed.  
+
+## Get involved
+
+Baseline is developed as part of the [Feature Set project](https://github.com/web-platform-dx/feature-set), a community-driven project that aims to provide a comprehensive and up-to-date set of grouped web platform features. Anyone can contribute to Baseline by adding new features, reviewing existing features, or providing feedback as issues on that repository.
+
+If you are a library or tool author, we'll be making it easy to show support. Coming soon, we'll provide ways to show that your library or tool is compatible with Baseline. The widget can be displayed on Github and will link to the Baseline website. Watch this page for updates.
+
+## Find out more
+
+- [Introducing Baseline](/introducing-baseline/)
+- [Baseline features you can use today](/baseline-features/)
+- [Introducing Baseline: a unified view of stable web features](https://developer.mozilla.org/en-US/blog/baseline-unified-view-stable-web-features/)
diff --git a/src/site/content/en/blog/0hh1/index.md b/src/site/content/en/blog/0hh1/index.md
new file mode 100644
index 00000000000..fa701520e83
--- /dev/null
+++ b/src/site/content/en/blog/0hh1/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: 0h h1
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eCdqV3lXBTovQQ3GiRUN.png", alt="0h h1 screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[0h h1](http://0hh1.com/) is a fun (and addictive) game that just feels right
+on mobile.
+
+## Q & A with Martin Kool
+
+### Why the web?
+
+I have always loved the endless possibilities of web technology, and I
+consider myself lucky for having embraced it so many years ago, because these
+past years have seen amazing enhancements that really bring the web forward,
+both on desktop and mobile.
+
+And JavaScript. OMG! That's just Play-Doh for nerds. Almost literally, because
+both Play-Doh and JavaScript really allow you to make a little pile of
+spaghetti ;) But that just makes it all the more awesome.
+
+But honestly, you can go from zero to 88 MPH in no time, host a demo on
+Dropbox or elsewhere, run it from a device and get it out so people can test
+it. The feedback loop is really short - devices included - which allows me to
+adapt quickly, make the required changes early on and move forward. Then
+when it's almost ready to release a game it's amazing to see how many people
+can be reached through all the different app stores and a playable web version
+combined.
+
+### What worked really well during development?
+
+I'm known to code my JavaScript with a hypothetical chainsaw as I just want
+to get stuff done. Ship it, you know? So for me it's about creating a working
+game in black and white that's playable for people - that's what I start with,
+and then I try to find a design theme that's almost spartan but gets the job
+done. Once those are in place I'm just fine-tuning all the details using
+Chrome on a Mac while constantly trying out Cordova builds on my Nexus 5.
+
+### If you could have any API to improve your app, what would it be?
+
+Let me start with two minor wishes, before I throw out the big one:
+
+One is the WebView restrictions on mobile devices. Wrapping a game using
+Cordova usually gets you a webview that is quite old. I shouldn't complain as
+WKWebView is coming and it'll be a few more months when the whole process is
+streamlined, but until then it's a mess with all the plugins and everything to
+get your HTML5 stuff perform on mobile.
+
+The other is this: Google really needs to provide devs with easy means of
+handling cheaters in leaderboards and achievements. In my game 0h n0 some
+player got a score of 1 and I've spent a full day trying to get this
+management code to run locally, which should connect given the proper
+keys and stuff all set up in my dashboard. But in the end it just won't
+work, and I feel it should be a service built in the Google Play Game
+Services dashboard for devs on Google Play.
+
+But here's the one thing that would truly make all the difference.
+
+Why on Earth do we still need to 8*wrap*8 HTML5 into some native Java/ObjC
+coat to turn it into an app? That's just… beyond my comprehension. I'd
+expected this to be "fixed" five years ago, but here we are still using
+Cordova to fill the "gap" between native and the web that originally coined
+up the name "Phone Gap". I still consider Cordova a broker that one day will
+hopefully be gone as I can use JavaScript to build and compile my app and to
+use all APIs that a mobile device or tablet has. So both Android and iOS
+should IMHO allow devs to build "native" apps with nothing more than
+JavaScript and Sublime.
+
diff --git a/src/site/content/en/blog/100000stars/index.md b/src/site/content/en/blog/100000stars/index.md
new file mode 100644
index 00000000000..18b72d4bde4
--- /dev/null
+++ b/src/site/content/en/blog/100000stars/index.md
@@ -0,0 +1,389 @@
+---
+layout: post
+title: Making 100,000 Stars
+authors:
+  - michaelchang
+date: 2012-11-28
+tags:
+  - blog
+  - case-study
+---
+
+Hello! My name is Michael Chang and I work with the Data Arts Team at Google. Recently, we completed [100,000 Stars](http://workshop.chromeexperiments.com/stars), a [Chrome Experiment](http://chromeexperiments.com/) visualizing nearby stars. The project was built with [THREE.js](https://github.com/mrdoob/three.js/) and CSS3D. In this case study I will outline the discovery process, share some programming techniques, and finish with some thoughts for future improvement.
+
+The topics discussed here will be fairly broad, and require some knowledge of THREE.js, though it is my hope that you can still enjoy this as a technical post-mortem. Feel free to jump to an area of interest using the table of contents button on the right. First, I'll show the rendering portion of the project, followed by shader management, and finally how to use CSS text labels in combination with WebGL.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vlT6adEn3dy1cqmQVxBG.png", alt="100,000 Stars, a Chrome Experiment by Data Arts Team", width="500", height="235" %}
+    <figcaption>100,000 Stars uses THREE.js to visualize nearby stars in the Milky Way</figcaption>
+</figure>
+
+## Discovering Space
+
+Shortly after we finished [Small Arms Globe](http://www.chromeexperiments.com/detail/arms-globe/), I was experimenting with a THREE.js particle demo with depth of field. I noticed that I could change the interpreted "scale" of the scene by adjusting the amount of the effect applied. When the depth of field effect was really extreme, distant objects became really blurry similar to the way tilt-shift photography works on giving one the illusion of looking at a microscopic scene. Conversely, turning down the effect made it appear as if you were staring into deep space.
+
+I began hunting for data I could use to inject particle positions with, a path that lead me to [astronexus.com](http://astronexus.com/)'s HYG database, a compilation of the three data sources (Hipparcos, Yale Bright Star Catalog, and Gliese/Jahreiss Catalog) accompanied by pre-calculated xyz Cartesian coordinates. Let's begin!
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3ViDnDe2KbPrITxGzGK5.png", alt="Plotting star data.", width="500", height="264" %}
+    <figcaption>The first step is to plot every star in the catalog as a single particle.</figcaption>
+</figure>
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QI23eDp67VmKRHeOB7w9.png", alt="The named stars.", width="500", height="253" %}
+    <figcaption>Some stars in the catalog have proper names, labeled here.</figcaption>
+</figure>
+
+It took about an hour to hack together something that placed the star data in 3D space. There are exactly 119,617 stars in the data set, so representing each star with a particle is not a problem for a modern GPU. There are also 87 individually identified stars, so I created a CSS marker overlay using the same technique I [described](http://mflux.tumblr.com/post/28367579774/armstradeviz) in Small Arms Globe.
+
+During this time I had just finished the [Mass Effect](http://masseffect.bioware.com/) series. In the game the player is invited to explore the galaxy and [scan various planets and read about](https://www.youtube.com/watch?v=1g92-pgyJrU) their completely fictional, wikipedia-sounding history: what species had thrived on the planet, its geological history, and so forth.
+
+Knowing the wealth of actual data that's out there about stars, one could conceivably present real information about the galaxy in the same way. The ultimate goal for this project would be to bring to life this data, allow the viewer to explore the galaxy à la Mass Effect, to learn about stars and their distribution, and hopefully inspire a sense of awe and wonder about space. Phew!
+
+I should probably preface the rest of this case-study by saying that __I am by no means an astronomer, and that this is the work of amateur research__ supported by some advice from external experts. This project should definitely be construed as an artist interpretation of space.
+
+## Building a Galaxy
+
+My plan was to procedurally generate a model of the galaxy that can put the star data in context -- and hopefully give an awesome view of our place in the Milky Way.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/S5ZbLFPB3RnfRTOT35mW.png", alt="An early prototype of the galaxy.", width="500", height="200" %}
+    <figcaption>An early prototype of the Milky Way particle system.</figcaption>
+</figure>
+
+To generate the Milky Way, I spawned 100,000 particles and placed them in a spiral by emulating the way galactic arms are formed. I wasn't too worried about the specifics of spiral arm formation because this would be a representational model rather than a mathematical one. However I did try to get the number of spiral arms more or less correct, and spinning in the "right direction."
+
+In later versions of the Milky Way model I de-emphasized the use of particles in favor of a planar image of a galaxy to accompany the particles, hopefully giving it a more of a photographic appearance. The [actual image is of spiral galaxy NGC 1232](http://www.eso.org/public/images/ngc1232b/) roughly 70 million light years away from us, image-manipulated to look like the Milky Way.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dQZVXko0eZdufru9zpqr.png", alt="Figuring out the scale of the galaxy.", width="500", height="221" %}
+    <figcaption>Every GL unit is a light year. In this case the sphere is 110,000 light years wide, encompassing the particle system.</figcaption>
+</figure>
+
+I decided early on to represent one GL unit, basically a pixel in 3D, as one light year -- a convention that unified placement for everything visualized, and unfortunately gave me serious precision issues later on.
+
+Another convention I decided was to rotate the entire scene rather than moving the camera, something I've done in a few other projects. One advantage is that everything is placed onto a "turntable" so that mouse-dragging left and right rotates the object in question, but zooming in is only a matter of changing camera.position.z.
+
+Field of view (or FOV) for the camera is also dynamic. As one pulls outwards, the field of view widens, taking in more and more of the galaxy. The opposite is true when moving inwards towards a star, the field of view narrows. This allows the camera to view things that are infinitesimal (in comparison to the galaxy) by squishing the FOV down to something of a god-like magnifying glass without having to deal with near-plane clipping issues.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cJhqkFVdJ81oTmVYsyFY.png", alt="Different ways of rendering a galaxy.", width="500", height="366" %}
+    <figcaption>(above) Early particle galaxy. (below) Particles accompanied by an image plane.</figcaption>
+</figure>
+
+From here I was able to "place" the Sun at some number of units away from the galactic core. I was also able to visualize the relative size of the solar system by mapping out the radius of the [Kuiper Cliff](http://en.wikipedia.org/wiki/Kuiper_cliff#.22Kuiper_cliff.22) (I eventually chose to visualize the [Oort Cloud](http://en.wikipedia.org/wiki/Oort_cloud)) instead. Within this model solar system, I could also visualize a simplified orbit of Earth, and the actual radius of the Sun in comparison.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iVU66rpZ86Wfoz3mY7B6.png", alt="The solar system.", width="500", height="267" %}
+    <figcaption>The Sun orbited by planets and a sphere representing the Kuiper Belt.</figcaption>
+</figure>
+
+The Sun was difficult to render. I had to cheat with as many real-time graphics techniques as I knew. The surface of the Sun is a hot froth of plasma and needed to pulse and change over time. This was simulated via a bitmap texture of an infrared image of the solar surface. The surface shader makes a color look-up based on the grayscale of this texture and performs a look-up in a separate color ramp. When this look-up is shifted over time it creates this lava-like distortion.
+
+A similar technique was used for the corona of the Sun, except that it would be a flat sprite card that always faces the camera using [https://github.com/mrdoob/three.js/blob/master/src/extras/core/Gyroscope.js](https://github.com/mrdoob/three.js/blob/master/src/extras/core/Gyroscope.js).
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4yVISJF05rsbqZBogwl4.png", alt="Rendering Sol.", width="500", height="313" %}
+    <figcaption>Early version of the Sun.</figcaption>
+</figure>
+
+The solar flares were created via vertex and fragment shaders applied to a torus, spinning just around the edge of the solar surface. The vertex shader has a noise function causing it to weave in a blob-like fashion.
+
+It was here that I was starting to experience some z-fighting issues due to GL precision. All of the variables for precision were pre-defined in THREE.js, so I couldn't realistically bump up the precision without a huge amount of work. Precision issues were not as bad near the origin. However, once I started modeling other star systems, this became an issue.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/U8H1iHnTmqlKLBLmwO75.png", alt="Star model.", width="500", height="324" %}
+    <figcaption>The code for rendering the Sun was later generalized to render other stars.</figcaption>
+</figure>
+
+There were a few hacks I employed to mitigate z-fighting. THREE's [Material.polygonoffset](https://github.com/mrdoob/three.js/blob/master/src/materials/Material.js) is a property that allows polygons to be rendered at a different perceived location (as far as I understand). This was used to force the corona plane to always render on top of the Sun's surface. Below this, a Sun "halo" was rendered to give sharp light rays moving away from the sphere.
+
+A different problem related to precision was that the star models would begin jittering as the scene zoomed in. To fix this I had to "zero out" the scene rotation and separately rotate the star model and environment map to give the illusion that you are orbiting the star.
+
+### Creating Lensflare
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aS7ugNArmQTjwwmT1PeS.png", alt="With great power comes great responsibility.", width="500", height="324" %}
+    <figcaption>With great power comes great responsibility.</figcaption>
+</figure>
+
+Space visualizations are where I feel like I can get away with excessive use of lensflare. [THREE.LensFlare](https://github.com/mrdoob/three.js/blob/master/src/extras/objects/LensFlare.js) serves this purposes, all I needed to do was throw in some anamorphic hexagons and a dash of [JJ Abrams](http://en.wikipedia.org/wiki/J._J._Abrams). The snippet below shows how to construct them in your scene.
+
+```js
+// This function retuns a lesnflare THREE object to be .add()ed to the scene graph
+function addLensFlare(x,y,z, size, overrideImage){
+var flareColor = new THREE.Color( 0xffffff );
+
+lensFlare = new THREE.LensFlare( overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor );
+
+// we're going to be using multiple sub-lens-flare artifacts, each with a different size
+lensFlare.add( textureFlare1, 4096, 0.0, THREE.AdditiveBlending );
+lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
+lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
+lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
+
+// and run each through a function below
+lensFlare.customUpdateCallback = lensFlareUpdateCallback;
+
+lensFlare.position = new THREE.Vector3(x,y,z);
+lensFlare.size = size ? size : 16000 ;
+return lensFlare;
+}
+
+// this function will operate over each lensflare artifact, moving them around the screen
+function lensFlareUpdateCallback( object ) {
+var f, fl = this.lensFlares.length;
+var flare;
+var vecX = -this.positionScreen.x _ 2;
+var vecY = -this.positionScreen.y _ 2;
+var size = object.size ? object.size : 16000;
+
+var camDistance = camera.position.length();
+
+for( f = 0; f &lt; fl; f ++ ) {
+flare = this.lensFlares[ f ];
+
+flare.x = this.positionScreen.x + vecX * flare.distance;
+flare.y = this.positionScreen.y + vecY * flare.distance;
+
+flare.scale = size / camDistance;
+flare.rotation = 0;
+
+}
+}
+```
+
+### An easy way to do texture scrolling
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jKVWKP56RGV6ULZmY0LC.png", alt="Inspired by Homeworld.", width="500", height="247" %}
+    <figcaption>A cartesian plane to help with spatial orientation in space.</figcaption>
+</figure>
+
+For the "spatial orientation plane", a gigantic THREE.CylinderGeometry() was created and centered on the Sun. To create the "wave of light" fanning outwards, I modified its texture offset over time like so:
+
+```js
+mesh.material.map.needsUpdate = true;
+mesh.material.map.onUpdate = function(){
+this.offset.y -= 0.001;
+this.needsUpdate = true;
+}
+```
+
+`map` is the texture belonging to the material, which get an onUpdate function you can over-write. Setting its offset causes the texture to be "scrolled" along that axis, and spamming needsUpdate = true would force this behavior to loop.
+
+### Using color ramps
+
+Each star has a different color based on a "color-index" that astronomers have assigned them. In general, red stars are cooler and blue/purple stars are hotter. A band of white and intermediate orange colors exist in this gradient.
+
+When rendering the stars I wanted to give each particle its own color based on this data. The way to do this was with "attributes" given to the shader material applied to the particles.
+
+```js
+var shaderMaterial = new THREE.ShaderMaterial( {
+uniforms: datastarUniforms,
+attributes: datastarAttributes,
+/_ ... etc _/
+});
+```
+
+```js
+var datastarAttributes = {
+size: { type: 'f', value: [] },
+colorIndex: { type: 'f', value: [] },
+};
+```
+
+Filling up the colorIndex array would give each particle its unique color in the shader. Normally one would pass in a color vec3, but in this instance I'm passing in a float for the eventual color ramp look-up.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FalbN0I27j7vvmlJQQJj.png", alt="Color ramp.", width="500", height="10" %}
+    <figcaption>A color ramp used to look up the visible color from a star's color index.</figcaption>
+</figure>
+
+The color ramp looked like this, however I needed to access its bitmap color data from JavaScript. The way I did this was to first load the image onto DOM, draw it into a canvas element, then access the canvas bitmap.
+
+```js
+// make a blank canvas, sized to the image, in this case gradientImage is a dom image element
+gradientCanvas = document.createElement('canvas');
+gradientCanvas.width = gradientImage.width;
+gradientCanvas.height = gradientImage.height;
+
+// draw the image
+gradientCanvas.getContext('2d').drawImage( gradientImage, 0, 0, gradientImage.width, gradientImage.height );
+
+// a function to grab the pixel color based on a normalized percentage value
+gradientCanvas.getColor = function( percentage ){
+return this.getContext('2d').getImageData(percentage \* gradientImage.width,0, 1, 1).data;
+}
+```
+
+This same method is then used for coloring individual stars in the star model view.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/J9xkA6vu8V6BBbkjQ2og.png", alt="My eyes!", width="500", height="236" %}
+    <figcaption>The same technique is used to do color lookup for a star's spectral class.</figcaption>
+</figure>
+
+## Shader wrangling
+
+Throughout the project I discovered that I needed to write more and more shaders to accomplish all of the visual effects. I wrote a custom shader loader for this purpose because I was tired of having shaders live in index.html.
+
+```js
+// list of shaders we'll load
+var shaderList = ['shaders/starsurface', 'shaders/starhalo', 'shaders/starflare', 'shaders/galacticstars', /*...etc...*/];
+
+// a small util to pre-fetch all shaders and put them in a data structure (replacing the list above)
+function loadShaders( list, callback ){
+var shaders = {};
+
+var expectedFiles = list.length \* 2;
+var loadedFiles = 0;
+
+function makeCallback( name, type ){
+return function(data){
+if( shaders[name] === undefined ){
+shaders[name] = {};
+}
+
+    shaders[name][type] = data;
+
+    //  check if done
+    loadedFiles++;
+    if( loadedFiles == expectedFiles ){
+    callback( shaders );
+    }
+
+};
+
+}
+
+for( var i=0; i&lt;list.length; i++ ){
+var vertexShaderFile = list[i] + '.vsh';
+var fragmentShaderFile = list[i] + '.fsh';
+
+//	find the filename, use it as the identifier
+var splitted = list[i].split('/');
+var shaderName = splitted[splitted.length-1];
+$(document).load( vertexShaderFile, makeCallback(shaderName, 'vertex') );
+$(document).load( fragmentShaderFile,  makeCallback(shaderName, 'fragment') );
+
+}
+}
+```
+
+The loadShaders() function takes a list of shader file names (expecting .fsh for fragment and .vsh for vertex shaders), attempts to load their data, and then just replaces the list with objects. The end result is in your THREE.js uniforms you could pass shaders to it like so:
+
+```js
+var galacticShaderMaterial = new THREE.ShaderMaterial( {
+vertexShader: shaderList.galacticstars.vertex,
+fragmentShader: shaderList.galacticstars.fragment,
+/_..._/
+});
+```
+
+I probably could have used require.js although that would have needed some code reassembling just for this purpose. This solution, while much easier, could be improved upon I think, perhaps even as a THREE.js extension. If you have suggestions or ways to do this better, please let me know!
+
+## CSS Text Labels on top of THREE.js
+
+On our last project, Small Arms Globe, I toyed with making text labels appear on top of a THREE.js scene. The method I was using calculates the absolute model position of where I want the text to appear, then resolves the screen position using THREE.Projector(), and finally uses CSS "top" and "left" to place the CSS elements at the desired position.
+
+Early iterations on this project used this same technique, however I've been itching to try [this other method described by Luis Cruz.](http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs)
+
+The basic idea: match the CSS3D's matrix transform to THREE's camera and scene, and you can "place" CSS elements in 3D as if it were on top of THREE's scene. There are limitations to this though, for example you won't be able to have text go underneath a THREE.js object. This is still much faster than trying to perform layout using "top" and "left" CSS attributes.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9GGQ2CoTcQ5DAkgJ2NdA.png", alt="Text labels.", width="500", height="287" %}
+    <figcaption>Using CSS3D transforms to place text labels on top of WebGL.</figcaption>
+</figure>
+
+You can find the [demo (and code in view source) for this here.](http://www.emagix.net/images/portfolio/academic/mscs-project/code_projects/projects/webgl-three-css3-sync01.html) However I did find that the matrix order has since changed for THREE.js. The function I've updated:
+
+```js
+/_ Fixes the difference between WebGL coordinates to CSS coordinates _/
+function toCSSMatrix(threeMat4, b) {
+var a = threeMat4, f;
+if (b) {
+f = [
+a.elements[0], -a.elements[1], a.elements[2], a.elements[3],
+a.elements[4], -a.elements[5], a.elements[6], a.elements[7],
+a.elements[8], -a.elements[9], a.elements[10], a.elements[11],
+a.elements[12], -a.elements[13], a.elements[14], a.elements[15]
+];
+} else {
+f = [
+a.elements[0], a.elements[1], a.elements[2], a.elements[3],
+a.elements[4], a.elements[5], a.elements[6], a.elements[7],
+a.elements[8], a.elements[9], a.elements[10], a.elements[11],
+a.elements[12], a.elements[13], a.elements[14], a.elements[15]
+];
+}
+for (var e in f) {
+f[e] = epsilon(f[e]);
+}
+return "matrix3d(" + f.join(",") + ")";
+}
+```
+
+Since everything is transformed, the text no longer faces the camera. The solution was to use [THREE.Gyroscope()](https://github.com/mrdoob/three.js/blob/master/src/extras/core/Gyroscope.js) which forces an Object3D to "lose" its inherited orientation from the scene. This technique is called "billboarding", and Gyroscope is perfect for doing this.
+
+What's really nice is that all of the normal DOM and CSS still played along, like being able mouse-over a 3D text label and have it glow with drop shadows.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HVa9xgeH7Dy4YGoGlrC9.png", alt="Text labels.", width="500", height="267" %}
+    <figcaption>Having text labels always face the camera by attaching it to a THREE.Gyroscope().</figcaption>
+</figure>
+
+When zooming in I found the scaling of typography was causing issues with positioning. Perhaps is this due to the kerning and padding of the text? Another problem was that the text became pixelated when zoomed into since the DOM renderer treats the rendered text as a textured quad, something to be aware of when using this method. In retrospect, I could have just used gigantic font-sized text, and perhaps this is something for future exploration. In this project I also used the "top/left" CSS placement text labels, described earlier, for really small elements that accompany planets in the solar system.
+
+## Music playback and looping
+
+The piece of music played during Mass Effect's 'Galactic Map' was by Bioware composers Sam Hulick and Jack Wall, and it had the kind of emotion I wanted the visitor to experience. We wanted some music in our project because we felt it was an important part of the atmosphere, helping create that sense of awe and wonderment we were trying to aim for.
+
+Our producer Valdean Klump contacted Sam who had a bunch of "cutting floor" music from Mass Effect that he very graciously let us use. The track is titled "In a Strange Land".
+
+I used the audio tag for music playback, however even in Chrome the "loop" attribute was unreliable -- sometimes it would just fail to loop. In the end this dual audio tag hack was used to check for end of playback and cycling to the other tag for playing. What was disappointing was that this *still* was not perfectly looping all the time, alas I feel like this was the best that I could do.
+
+```js
+var musicA = document.getElementById('bgmusicA');
+var musicB = document.getElementById('bgmusicB');
+musicA.addEventListener('ended', function(){
+this.currentTime = 0;
+this.pause();
+var playB = function(){
+musicB.play();
+}
+// make it wait 15 seconds before playing again
+setTimeout( playB, 15000 );
+}, false);
+
+musicB.addEventListener('ended', function(){
+this.currentTime = 0;
+this.pause();
+var playA = function(){
+musicA.play();
+}
+// otherwise the music will drive you insane
+setTimeout( playA, 15000 );
+}, false);
+
+// okay so there's a bit of code redundancy, I admit it
+musicA.play();
+```
+
+## Room for improvement
+
+After having worked with THREE.js for a while, I feel like I've gotten to the point where my data was mixing too much with my code. For example when defining materials, textures, and geometry instructions in-line, I was essentially "3D modeling with code". This felt really bad, and is an area where future endeavors with THREE.js could greatly improve upon, for example defining material data in a separate file, preferably viewable and tweakable in some context, and can be brought back into the main project.
+
+Our colleague Ray McClure also spent some time creating some awesome generative "space noises" which had to be cut due to the web audio API being unstable, crashing Chrome every so often. It's unfortunate… but it definitely got us thinking more in the sound space for future work. As of this writing I'm informed that the Web Audio API has been patched so it's possible this is working now, something to look out for in the future.
+
+Typographical elements paired with WebGL still remains to be a challenge, and I'm not 100% sure what we're doing here is the correct way. It still feels like a hack. Perhaps future versions of THREE, with its [up and coming CSS Renderer](https://plus.sandbox.google.com/113862800338869870683/posts/PnJB9fAQb6z), can be used to better join the two worlds.
+
+## Credits
+
+Thanks to Aaron Koblin for letting me go to town with this project. Jono Brandel for the excellent UI design + implementation, type treatment, and tour implementation. Valdean Klump for giving the project a name and all of the copy. Sabah Ahmed for clearing the metric ton of use-rights for the data and image sources. Clem Wright for reaching out to the right people for publication. Doug Fritz for technical excellence. George Brower for teaching me JS and CSS. And of course Mr. Doob for THREE.js.
+
+## References
+
+- [Three.js](https://github.com/mrdoob/three.js/)
+- [Camera Sync with CSS3 and WebGL THREE.js](http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs)
+- [Mass Effect](http://masseffect.bioware.com/)
diff --git a/src/site/content/en/blog/2021-scroll-survey-report/index.md b/src/site/content/en/blog/2021-scroll-survey-report/index.md
new file mode 100644
index 00000000000..77573813847
--- /dev/null
+++ b/src/site/content/en/blog/2021-scroll-survey-report/index.md
@@ -0,0 +1,397 @@
+---
+layout: post
+title: 2021 Scroll Survey Report
+subhead: Get the 2021 Scroll Survey Report plus words from the Chrome team about how this impacts priorities and plans for Chromium and the web.
+authors:
+  - adamargyle
+  - samdutton
+description: Get the 2021 Scroll Survey Report plus words from the Chrome team about how this impacts priorities and plans for Chromium and the web.
+date: 2021-08-02
+updated: 2021-09-10
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/0yI4zjveGNiC1Kh8QzhV.jpg
+alt: The unveiling of the new Torah display at Trinity International University, photo by Taylor Wilcox.
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - mobile
+  - ux
+---
+
+In April, the Chrome team [released a scroll and touch-action
+survey](/2021-scroll-survey/) based on top reported issues from
+the [2019 MDN Web DNA
+Report](https://mdn-web-dna.s3-us-west-2.amazonaws.com/MDN-Web-DNA-Report-2019.pdf).
+The [2021 Scroll Survey
+Report](https://storage.googleapis.com/web-dev-uploads/file/vS06HQ1YTsbMKSFTIPl2iogUQP73/QZopyELSk8T7IpsgOnRU.pdf)
+is ready, and the Chrome team would like to share some thoughts and action items
+we've gleaned from the survey results. We hope these results will help browser
+vendors and standards groups understand how to improve web scrolling.
+
+**View the [2021 Scroll Survey
+Report](https://storage.googleapis.com/web-dev-uploads/file/vS06HQ1YTsbMKSFTIPl2iogUQP73/QZopyELSk8T7IpsgOnRU.pdf).**
+
+## Noteworthy results
+
+The survey anonymously collected 880 submissions, with 366 answering every
+question.
+
+While getting started with scrolling is one line of CSS, like `overflow-x:
+scroll;`, the surface area of scroll APIs and options is large, spanning JavaScript to
+CSS. The following results help to highlight the issues web developers are
+encountering.
+
+### Overall satisfaction with web scrolling
+
+<small>Question 27</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">45<sub>%</sub></p>
+    <p>
+      are <b>somewhat</b> or <b>extremely dissatisfied overall</b> <br>
+      with <b>web scrolling</b>.
+    </p>
+  </div>
+</div>
+
+This question was placed near the end of the survey intentionally, after
+questions on 26 scroll use cases and features. From the response, it's clear that
+the web community struggles with scroll. Almost half of the respondents report a
+level of overall dissatisfaction.
+
+We believe overall sentiment about working with scroll should not be this low.
+This metric needs to be changed; it's a clear signal there's work to be done.
+
+### Difficulty working with scroll
+
+<small>Question 2</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">43<sub>%</sub></p>
+    <p>
+      reported it's <b>somewhat</b> or <br>
+      <b>extremely difficult <br>
+      to  work with scrolling</b>.
+    </p>
+  </div>
+</div>
+
+From our research, these difficulties come from the multitude of use cases for
+scroll. When we talk about scrolling, that might include:
+- [Positioning elements within scrollable areas](https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46)
+- [Infinite scroll](https://blog.logrocket.com/infinite-scroll-techniques-in-react-adcfd7ff32bd/)
+- [Scroll linked animation](https://greensock.com/scrolltrigger/)
+- [Carousels](https://css-tricks.com/css-only-carousel/)
+- [Scrollview padding](https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4)
+- [Cyclical scroll](https://www.magictoolbox.com/magicscroll/integration/)
+- [Virtualized scroll](https://github.com/tbranyen/hyperlist)
+
+Missing browser features,
+complex JavaScript, and the need to support input modes including touch,
+keyboard, and gamepads, make all of these things harder.
+
+### Importance of touch interactions
+
+<small>Question 3</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">51<sub>%</sub></p>
+    <p>
+      report <b>touch interactions</b> as <br>
+      <b>very</b> or <b>extremely important</b> <br>
+      to their work.
+    </p>
+  </div>
+</div>
+
+With [mobile web users still on the rise in visit
+statistics](https://twitter.com/TheRealNooshu/status/1399676709125906432?s=20),
+it wasn't surprising to see half of the respondents report that touch is very
+important to their work on the web. This signaled that web features like CSS
+scroll snap and `touch-action` need extra attention so the web can deliver on
+high-quality touch interaction.
+
+### Difficulty of tab key or gamepad navigation
+
+<small>Question 5a</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">44<sub>%</sub></p>
+    <p>
+      report <b>somewhat</b> or <b>extremely difficult</b> <br>
+      to do <b>gamepad</b> and <b>tab navigation</b>.
+    </p>
+  </div>
+</div>
+
+Scrolling includes navigation methods such as keyboard arrows, tab keys,
+spacebar presses, and gamepads, and it can be difficult to include these when doing
+custom scroll work. Almost half of the respondents report it's
+somewhat or extremely difficult to include these inputs.
+
+### Learning `touch-action`
+
+<small>Question 9</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">50<sub>%</sub></p>
+    <p>
+      report <b>learning</b> about <br>
+      <b>`touch-action: manipulation`</b> <br>
+      from the survey.
+    </p>
+  </div>
+</div>
+
+Some of the survey questions asked about using certain APIs with a possible
+answer of Yes, No, or "today I learned." One notable piece of feedback was the
+number of people who reported learning about `touch-action` from the survey, as
+it's a critical property when building custom touch gestures that need to
+interact within scroll.
+
+### Cyclical scrolling
+
+<small>Question 27</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">58<sub>%</sub></p>
+    <p>
+      report <b>sometimes, often</b> or on <b>every project</b> <br>
+      using <b>cyclical scrolling</b>.
+    </p>
+  </div>
+</div>
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/xLwqQ6xGBIdI0uxFx566.mp4",
+    autoplay="true",
+    loop="true",
+    width="380",
+    muted="true"
+  %}
+  <figcaption>
+    The video shows cyclical seconds scrolling, <br>
+    after 60 seconds it begins at 0 again.
+  </figcaption>
+</figure>
+
+Those numbers are high for a scrolling feature with little or no support provided by the web platform.
+The feature often incurs high amounts of technical
+debt because of this, with duplication or JavaScript injected to force the
+effect. It's popular for product carousels and when selecting time in seconds or minutes to
+offer cyclical scrolling.
+
+### Are scrollable areas important
+
+<small>Question 2</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">55<sub>%</sub></p>
+    <p>
+      <b>very</b> or <br>
+      <b>extremely important</b>
+    </p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">16<sub>%</sub></p>
+    <p>
+      report <b>not at all</b> <br>
+      or <b>slightly important</b>
+    </p>
+  </div>
+</div>
+
+Respondents felt strongly about the importance of scrollable areas,
+giving another signal about the struggles required to deliver high-quality scrolling.
+
+### Carousels
+
+<small>Question 20</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">87<sub>%</sub></p>
+    <p>
+      <b>have used</b> carousels.
+    </p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">24<sub>%</sub></p>
+    <p>
+      report they're <br>
+      <b>easy</b> to manage.
+    </p>
+  </div>
+</div>
+
+Nearly every respondent delivers carousels in their web work, while only 25% find
+them easy to manage. Off-the-shelf carousels were popular during our
+research, but this statistic surprised us, as it doesn't sound very solved.
+
+### Infinite scroll
+
+<small>Question 22</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">65<sub>%</sub></p>
+    <p>
+      use it <b>sometimes</b> <br>
+      to <b>every project</b>
+    </p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">60<sub>%</sub></p>
+    <p>
+      <b>somewhat</b> or <br>
+      <b>extremely difficult</b>.
+    </p>
+  </div>
+</div>
+
+Two-thirds of respondents deliver infinite scroll in their web work, and an equal
+amount report it's difficult to do. Another example of high usage paired with
+high difficulty, which indicates to us an area needing attention.
+
+While [`content-visibility`](/content-visibility/) and
+`contain-intrinsic-size` can be combined to reduce render costs for long
+scrollable areas, it doesn't seem to be helping with "load more" infinite scroll
+UX.
+
+### Scroll-linked or scroll-triggered animations
+
+<small>Question 24</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">47<sub>%</sub></p>
+    <p>
+      use it <b>sometimes</b><br>
+      to <b>every project</b>
+    </p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">56<sub>%</sub></p>
+    <p>
+      report <b>somewhat</b> or <br>
+      <b>extremely difficult</b>
+    </p>
+  </div>
+</div>
+
+Almost half of all respondents use scroll-orchestrated animations and half the
+respondents find it difficult, once again linking high usage with difficulty.
+
+### Compete with built-in scrolling
+
+<small>Question 26</small>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">32<sub>%</sub></p>
+    <p>
+      <b>always</b> or <br>
+      <b>most of the time</b>
+    </p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">50<sub>%</sub></p>
+    <p>
+      <b>sometimes</b>
+    </p>
+  </div>
+</div>
+
+The built-in scroll and touch interactions of phone and tablet applications are
+often touted as a clear place where the web can catch up. The features include
+scroll-linked animations, programmatic interfaces, voice integration, scroll
+hints, and pull-to-refresh APIs.
+
+Just half of the respondents felt it was only sometimes possible to match the
+experience of built-in scrolling.
+
+### Overall satisfaction building scroll interactions on the web
+
+<small>Question 27</small>
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ycHj33nZb1KfUFxNBdH5.png", alt="A
+pie chart showing 5 sections: 6.3% extremely dissatisfied, 2.7% extremely
+satisfied, 23.4% somewhat satisfied, 28.8% neither satisfied nor dissatisfied,
+38.7% somewhat dissatisfied.", width="800", height="400" %}
+
+## Survey Takeaways
+
+The survey results are segmented into four categories:
+[compatibility](#compatibility),
+[education](#education),
+[APIs](#apis),
+and [features](#features).
+
+### Compatibility
+
+The Chrome team has [declared a goal](/compat2021) to decrease
+the number of web compatibility issues, including scroll compatibility.
+
+The first three compatibility issues to focus on:
+1. Horizontal scrolling compatibility.
+1. `overscroll-behavior` cross browser.
+1. Removing prefixes from `-webkit-scrollbar` and following the standard.
+
+### Education
+
+The survey results showed that there needs to be more education around
+`touch-action` and [logical
+properties](/logical-property-shorthands/). The browser is at the
+forefront of international layout, and it's apparent it's underutilized or
+misunderstood.
+
+Areas to focus on:
+1. [`touch-action`](https://developer.mozilla.org/docs/Web/CSS/touch-action)
+1. [Logical properties](/learn/css/logical-properties/)
+
+### APIs
+
+Usage of scroll snapping is growing, and developers have responded that they
+want to use features interoperably with popular libraries and
+plugins. Shrinking this gap between CSS and plugin libraries will help the
+satisfaction of scroll snap developer and user experience.
+
+We'll focus API work on `scroll-snap`:
+1. API availability and compatibility across browsers.
+1. Begin work on [new CSS
+   APIs](https://github.com/argyleink/ScrollSnapExplainers) like `scroll-start`.
+1. Begin work on [new JS
+   events](https://github.com/argyleink/ScrollSnapExplainers) like
+   `snapChanged()`.
+
+### Features
+
+The survey results showed that users struggle with some specific types of
+scroll-related components on the web, as the platform doesn't provide the
+primitives they need to build them without plugins or a high level of effort.
+This is an area that we hope to explore more deeply.
+
+The features developers struggle to build include:
+1. Carousels
+1. Virtual scroll
+1. Infinite scroll
+
+### Resources
+
+- [Scroll Survey
+  Report](https://storage.googleapis.com/web-dev-uploads/file/vS06HQ1YTsbMKSFTIPl2iogUQP73/QZopyELSk8T7IpsgOnRU.pdf)
+- [Survey Announcement](/2021-scroll-survey/)
+- [Mozilla DNA Reports](https://insights.developer.mozilla.org/)
+- [Compat2021: Eliminating five top compatibility pain points on the
+  web](/compat2021/)
+
+Thumbnail image: photo by [Taylor Wilcox](https://unsplash.com/@taypaigey) on [Unsplash](https://unsplash.com/photos/aXeVH4FcS1k).
diff --git a/src/site/content/en/blog/2021-scroll-survey/index.md b/src/site/content/en/blog/2021-scroll-survey/index.md
new file mode 100644
index 00000000000..2f948e42c69
--- /dev/null
+++ b/src/site/content/en/blog/2021-scroll-survey/index.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: Take the 2021 scroll survey to help improve scrolling on the web
+subhead: An introduction to the 2021 Scroll Survey from the Chrome team
+authors:
+  - adamargyle
+  - samdutton
+description: An introduction to the 2021 Scroll Survey from the Chrome team
+date: 2021-04-15
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - mobile
+  - ux
+---
+
+We've been analyzing the results of the
+[2019 Mozilla Developer Network Web DNA Report](https://mdn-web-dna.s3-us-west-2.amazonaws.com/MDN-Web-DNA-Report-2019.pdf)
+for action items and follow up strategies to improve the top reported issues.
+A small sub-group on the Chrome team identified a group of issues related
+to scrolling, `scroll-snap`, and `touch-action`. Those issues were researched,
+evaluated, and synthesized into a new, follow-up survey with more precise
+questions about issues related to these topics.
+
+## 2021 Scroll Survey
+
+We believe that there are many ways to improve scrolling on the web for
+developers, designers, and users alike. We've created a survey which we
+hope is respectful of your time. It should take no more than 10 minutes
+to complete. The results will help browser vendors and standards groups
+understand how to make scrolling better.
+
+You can take part in the survey at [2021 Web Scrolling Survey](https://google.qualtrics.com/jfe/form/SV_bjbaTccU1lpPlVX).
diff --git a/src/site/content/en/blog/20things-pageflip/index.md b/src/site/content/en/blog/20things-pageflip/index.md
new file mode 100644
index 00000000000..1d62a6b49c0
--- /dev/null
+++ b/src/site/content/en/blog/20things-pageflip/index.md
@@ -0,0 +1,415 @@
+---
+layout: post
+title: Case Study - Page Flip Effect from 20thingsilearned.com
+authors:
+  - hakimelhattab
+date: 2011-01-20
+tags:
+  - blog
+  - case-study
+---
+## Introduction
+
+In 2010, [F-i.com](http://www.f-i.com) and the
+Google Chrome team collaborated on an HTML5-based educational web app called
+20 Things I Learned about Browsers and the Web
+([www.20thingsilearned.com](http://www.20thingsilearned.com)).
+One of the key ideas behind this project was that it would best be presented
+in the [context of a book](http://chrome.blogspot.com/2010/11/curious-guide-to-browsers-and-web.html).
+Since the contents of the book is very much about open web
+technologies we felt it was important to stay true to that by making the
+container itself an example of what these technologies allow us to
+accomplish today.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/o5841WYMvQebTxtGDvU3.png", alt="Book cover and homepage of '20 Things I Learned About Browsers and the Web'", width="500", height="347" %}
+<figcaption>Book cover and homepage of "20 Things I Learned About Browsers and the Web" (<a href="http://www.20thingsilearned.com" target="_blank">www.20thingsilearned.com</a>)</figcaption>
+</figure>
+
+We decided that the best way to achieve the feeling of a real world
+book is to simulate the good parts of the analogue reading experience
+while still leveraging the benefits of the digital realm in areas such
+as navigation. A lot of effort went into the graphical and interactive
+treatment of the reading flow - especially how the pages of the books
+flip from one page to another.
+
+## Getting Started
+
+This tutorial will take you through the process of creating your own
+page flip effect using the canvas element and plenty of JavaScript. Some
+of the rudimentary code, such as variable declarations and event listener
+subscription, has been left out of the snippets in this article so remember
+to reference the working example.
+
+Before we get started it's a good idea to [check out the demo](https://www.html5rocks.com/static/demos/20things_pageflip/example/index.html) so that you know what we're aiming to build.
+
+## Markup
+
+It's always important to remember that what we draw on canvas can't be
+indexed by search engines, selected by a visitor or found by in-browser
+searches. For that reason, the content we will be working with is put
+directly in the DOM and then manipulated by JavaScript if it is available.
+The markup required for this is minimal:
+
+```html
+<div id='book'>
+<canvas id='pageflip-canvas'></canvas>
+<div id='pages'>
+<section>
+    <div> <!-- Any type of contents here --> </div>
+</section>
+<!-- More <section>s here -->
+</div>
+</div>
+```
+
+We have one main container element for the book, which in turn contains
+the different pages of our book and the `canvas` element that we will be
+drawing the flipping pages on. Inside of the `section` element there is a
+`div` wrapper for the content - we need this to be able to change the width
+of the page without affecting the layout of its contents. The `div` has a
+fixed width and the `section` is set to hide its overflow, this results in
+the width of the `section` acting as a horizontal mask for the `div`.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/60Tx7hRxSZhnDKhJc0Ri.png", alt="Open Book.", width="500", height="172" %}
+<figcaption>A background image containing the paper texture and brown book jacket is added to the book element.</figcaption>
+</figure>
+
+## Logic
+
+The code required to power the page flip is not very complex, but it
+is quite extensive since it involves a lot of procedurally generated
+graphics. Let's start by looking at the description of the constant
+values we'll be using throughout the code.
+
+```js
+var BOOK_WIDTH = 830;
+var BOOK_HEIGHT = 260;
+var PAGE_WIDTH = 400;
+var PAGE_HEIGHT = 250;
+var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
+var CANVAS_PADDING = 60;
+```
+
+The `CANVAS_PADDING` is added around the canvas so that we can have
+the paper extend outside of the book when flipping. Note that some the
+constants defined here are also set in CSS, so if you want to change the
+size of the book you will also need to update the values there.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TQrEg4tSBisQAv5GXyrG.png", alt="Constants.", width="500", height="172" %}
+<figcaption>The constant values used throughout the code to track interaction and draw the page flip.</figcaption>
+</figure>
+
+Next we need to define a flip object for each page, these will
+constantly be updated as we interact with the book to reflect the
+current status of the flip.
+
+```js
+// Create a reference to the book container element
+var book = document.getElementById( 'book' );
+
+// Grab a list of all section elements (pages) within the book
+var pages = book.getElementsByTagName( 'section' );
+
+for( var i = 0, len = pages.length; i < len; i++ ) {
+pages[i].style.zIndex = len - i;
+
+flips.push( {
+progress: 1,
+target: 1,
+page: pages[i],
+dragging: false
+});
+}
+```
+
+First we need to make sure the pages are layered correctly by
+organizing the z-indexes of the section elements so that the first
+page is on top and the last page is in the bottom. The most important
+properties of the flip objects are the `progress` and `target` values.
+These are used to determine how far the page should currently be
+folded, -1 means all the way to the left, 0 means the dead center
+of the book and +1 means the right most edge of the book.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3ESKJMS6s4rSL5zK49cb.png", alt="Progress.", width="500", height="172" %}
+<figcaption>The progress and target values of the flips are used
+to determine where the folding page should be drawn on a <samp>-1</samp> to <samp>+1</samp>
+scale.</figcaption>
+</figure>
+
+Now that we have a flip object defined for each page we need to
+start capturing and using the users input to update the state of the
+flip.
+
+```js
+function mouseMoveHandler( event ) {
+// Offset mouse position so that the top of the book spine is 0,0
+mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
+mouse.y = event.clientY - book.offsetTop;
+}
+
+function mouseDownHandler( event ) {
+// Make sure the mouse pointer is inside of the book
+if (Math.abs(mouse.x) < PAGE_WIDTH) {
+if (mouse.x < 0 &amp;&amp; page - 1 >= 0) {
+    // We are on the left side, drag the previous page
+    flips[page - 1].dragging = true;
+}
+else if (mouse.x > 0 &amp;&amp; page + 1 < flips.length) {
+    // We are on the right side, drag the current page
+    flips[page].dragging = true;
+}
+}
+
+// Prevents the text selection
+event.preventDefault();
+}
+
+function mouseUpHandler( event ) {
+for( var i = 0; i < flips.length; i++ ) {
+// If this flip was being dragged, animate to its destination
+if( flips[i].dragging ) {
+    // Figure out which page we should navigate to
+    if( mouse.x < 0 ) {
+    flips[i].target = -1;
+    page = Math.min( page + 1, flips.length );
+    }
+    else {
+    flips[i].target = 1;
+    page = Math.max( page - 1, 0 );
+    }
+}
+
+flips[i].dragging = false;
+}
+}
+```
+
+The `mouseMoveHandler` function updates the `mouse` object so that we
+are always working towards the most recent cursor location.
+
+In `mouseDownHandler` we start by checking if the mouse was pressed
+down on either the left or the right page so that we know which
+direction we want to start flipping towards. We also ensure that
+another page exists in that direction since we might be on the first
+or last page. If a valid flip option is available after these checks,
+we set the `dragging` flag of the corresponding flip object to `true`.
+
+Once we reach the `mouseUpHandler` we go through all of the `flips`
+and check if any of them were flagged as `dragging` and should now be
+released. When a flip is released we set its target value to match
+the side it should flip to depending on the current mouse position.
+The page number is also update to reflect this navigation.
+
+## Rendering
+
+Now that most of our logic is in place we'll go through how to
+render the folding paper onto the canvas element. Most of this happens
+inside of the `render()` function, which is called 60 times
+per second to update and draw the current state of all active flips.
+
+```js
+function render() {
+// Reset all pixels in the canvas
+context.clearRect( 0, 0, canvas.width, canvas.height );
+
+for( var i = 0, len = flips.length; i < len; i++ ) {
+var flip = flips[i];
+
+if( flip.dragging ) {
+    flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
+}
+
+// Ease progress towards the target value
+flip.progress += ( flip.target - flip.progress ) * 0.2;
+
+// If the flip is being dragged or is somewhere in the middle
+// of the book, render it
+if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
+    drawFlip( flip );
+}
+
+}
+}
+```
+
+Before we start rendering the `flips`, we reset the
+canvas by using the `clearRect(x,y,w,h)` method. Clearing the whole canvas
+comes at a big performance expense and it would be much more effecient
+to clear only the regions that we are drawing on. For the sake of
+keeping this tutorial on topic, we'll leave it at clearing the whole
+canvas.
+
+If a flip is being dragged we update its `target` value to match the
+mouse position but on a -1 to 1 scale rather than actual pixels.
+We also increment the `progress` by a fraction of the distance to
+the `target`, this will result in a smooth and animated progression
+of the flip since it updates on every frame.
+
+Since we are going over all of the `flips` on every frame, we need to
+make sure we only redraw the ones that are active. If a flip is not
+very close to the book edge (within 0.3% of `BOOK_WIDTH`), or if it is
+flagged as `dragging`, it is considered active.
+
+Now that all of the logic is in place, we need to draw the graphical
+representation of a flip depending on its current state. It's time to
+look at the first part of the `drawFlip(flip)` function.
+
+```js
+// Determines the strength of the fold/bend on a 0-1 range
+var strength = 1 - Math.abs( flip.progress );
+
+// Width of the folded paper
+var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
+
+// X position of the folded paper
+var foldX = PAGE_WIDTH * flip.progress + foldWidth;
+
+// How far outside of the book the paper is bent due to perspective
+var verticalOutdent = 20 * strength;
+
+// The maximum widths of the three shadows used
+var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0);
+var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
+var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
+
+// Mask the page by setting its width to match the foldX
+flip.page.style.width = Math.max(foldX, 0) + 'px';
+```
+
+This section of the code starts by calculating a number of visual
+variables that we need to draw the fold in a realistic manner. The
+`progress` value of the flip we are drawing plays a big part here, since
+that is where we want the page fold to appear. To add depth to the page
+flip effect we make the paper extend outside of the top and bottom
+edges of the book, this effect is at its peak when a flip is close to
+the book's spine.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/73JKSfkcxMnLw661RnKA.png", alt="Flip", width="500", height="172" %}
+<figcaption>This is what the page fold looks like when the page is flipping or being dragged.</figcaption>
+</figure>
+
+Now that all of the values are prepared, all that remains is drawing the paper!
+
+```js
+context.save();
+context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
+
+// Draw a sharp shadow on the left side of the page
+context.strokeStyle = `rgba(0,0,0,`+(0.05 * strength)+`)`;
+context.lineWidth = 30 * strength;
+context.beginPath();
+context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
+context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
+context.stroke();
+
+// Right side drop shadow
+var rightShadowGradient = context.createLinearGradient(foldX, 0,
+            foldX + rightShadowWidth, 0);
+rightShadowGradient.addColorStop(0, `rgba(0,0,0,`+(strength*0.2)+`)`);
+rightShadowGradient.addColorStop(0.8, `rgba(0,0,0,0.0)`);
+
+context.fillStyle = rightShadowGradient;
+context.beginPath();
+context.moveTo(foldX, 0);
+context.lineTo(foldX + rightShadowWidth, 0);
+context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
+context.lineTo(foldX, PAGE_HEIGHT);
+context.fill();
+
+// Left side drop shadow
+var leftShadowGradient = context.createLinearGradient(
+foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
+leftShadowGradient.addColorStop(0, `rgba(0,0,0,0.0)`);
+leftShadowGradient.addColorStop(1, `rgba(0,0,0,`+(strength*0.15)+`)`);
+
+context.fillStyle = leftShadowGradient;
+context.beginPath();
+context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
+context.lineTo(foldX - foldWidth, 0);
+context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
+context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
+context.fill();
+
+// Gradient applied to the folded paper (highlights &amp; shadows)
+var foldGradient = context.createLinearGradient(
+foldX - paperShadowWidth, 0, foldX, 0);
+foldGradient.addColorStop(0.35, `#fafafa`);
+foldGradient.addColorStop(0.73, `#eeeeee`);
+foldGradient.addColorStop(0.9, `#fafafa`);
+foldGradient.addColorStop(1.0, `#e2e2e2`);
+
+context.fillStyle = foldGradient;
+context.strokeStyle = `rgba(0,0,0,0.06)`;
+context.lineWidth = 0.5;
+
+// Draw the folded piece of paper
+context.beginPath();
+context.moveTo(foldX, 0);
+context.lineTo(foldX, PAGE_HEIGHT);
+context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),
+                        foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
+context.lineTo(foldX - foldWidth, -verticalOutdent);
+context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
+
+context.fill();
+context.stroke();
+
+context.restore();
+```
+
+The canvas API's `translate(x,y)` method is used to offset the
+co-ordinate system so that we can draw our page flip with the top of the
+spine acting as the 0,0 position. Note that we also need to `save()` the
+current transformation matrix of the canvas and `restore()` to it
+when we are done drawing.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/73JKSfkcxMnLw661RnKA.png", alt="Translate", width="500", height="172" %}
+<figcaption>This is the point from which we draw the page flip. The
+original 0,0 point is in the top left of the image but by changing that,
+via translate(x,y), we simplify the drawing logic.</figcaption>
+</figure>
+
+The `foldGradient` is what we will fill the shape of the folded paper with
+to give it realistic highlights and shadows. We also add a very thin line
+around the paper drawing so that the paper doesn't disappear when put
+against light backgrounds.
+
+All that remains now is drawing the shape of the folded paper using the
+properties we defined above. The left and right sides of our paper is drawn
+as straight lines and the top and bottom sides are curved to bring that bent
+feeling of a folding paper across. The strength of this paper bend is
+determined by the `verticalOutdent` value.
+
+That's it! You've now got a fully functional page flip navigation in
+place.
+
+## Page Flip Demo
+
+The page flip effect is all about communicating the right interactive
+feel so looking at images of it doesn't exactly do it justice. 
+
+## Next Steps
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5Aepb68RaR7M21gPfSCT.png", alt="Hard-flip", width="500", height="347" %}
+<figcaption>The soft page flip in this tutorial becomes even more powerful
+when paired with other book-like features such as an interactive hard
+cover.</figcaption>
+</figure>
+
+This is only one example of what can be accomplished by utilizing HTML5
+features such as the canvas element. I recommend you have a look at the more
+refined book experience from which this technique is an excerpt at:
+[www.20thingsilearned.com](http://www.20thingsilearned.com). There
+you will see how the page flips can be applied in a real application and how
+powerful it becomes when paired with other HTML5 features.
+
+## References
+
+- [Canvas](http://developers.whatwg.org/the-canvas-element.html#the-canvas-element) API specification
diff --git a/src/site/content/en/blog/3d-css/index.md b/src/site/content/en/blog/3d-css/index.md
new file mode 100644
index 00000000000..4bc1ba81ab1
--- /dev/null
+++ b/src/site/content/en/blog/3d-css/index.md
@@ -0,0 +1,76 @@
+---
+layout: post
+title: 3D and CSS
+date: 2010-09-07
+authors:
+  - paulkinlan
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+## Introduction
+
+For a long time 3D has been the preserve of desktop applications. Recently with the introduction of advanced smart-phones that have access to native GPU acceleration we have started to see 3D used nearly everywhere.
+
+Commonly, 3D is primarily used as a device for gaming or some advanced user interfaces.  It wasn't until the introduction of Perspective transforms in WPF and Silverlight that a suitable model for applying 3D effects to user interface elements became a practical solution for application developers (after all 3D isn't exactly easy).
+
+The [CSS 3D Transform Model](http://www.w3.org/TR/css3-3d-transforms/) was introduced as a Draft specification in March 2009 to allow web developers to create interesting and compelling user interfaces that take advantage of 3D by allowing application authors to apply 3D perspective transformations to any visual DOM element.
+
+The CSS 3D Transformation Working Draft is a logical extension to the [CSS 2D Transformation Model](http://www.w3.org/TR/css3-2d-transforms), introducing some extra properties, including: perspectives, rotations and transforms in a 3D space.
+
+Never before have we been able build 3D interfaces so easily. These technologies have lowered the barrier to entry.  No longer do you have to be a mathematical whizz to build 3d elements.
+
+It must be noted that the CSS 3D module is designed to help developers build rich and visually interesting applications, it is not designed to enable you to build immersive 3d worlds.
+
+## Browser Support and Hardware Acceleration
+
+### -webkit-perspective
+
+{% BrowserCompat 'css.properties.perspective' %}
+
+### -webkit-transform-3d
+
+{% BrowserCompat 'css.at-rules.media.-webkit-transform-3d' %}
+
+The important piece of information to remember is that although a browser may "support" 3d, it may not be able to render 3D due to hardware and driver limitations.
+3D scenes based on the DOM can be very computationally expensive and therefore browser vendors have decided rather than slow the browsers down with a pure software rendering solution, they instead will take advantage of GPU which might not be available on all platforms
+
+## Feature Detection
+
+What about feature detection? I was hoping that you weren't going to ask!
+Developers have been using tools such as Modernizr to detect support for specific browser features and abilities.  Whilst it is possible to detect the presence of support for 3D transformations, it is not possible to detect for the presence of hardware acceleration, and hardware acceleration is the key ingredient.
+
+## Basic Sample
+
+There is nothing better than jumping straight in. In this sample we will apply a basic set of rotations of an arbitrary DOM element.
+
+We start by defining a perspective on the root element.
+
+```html
+<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
+```
+
+Perspective is important because it defines how the depth of the 3D scene is rendered, values from 1-1000 will produce a very pronounced effect, and values over 1000 less so.
+We then add an iframe and apply a 30 degree rotation around the Z and Y axis
+
+```html
+<iframe
+    src="http://www.html5rocks.com/"
+    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
+```
+
+BAM! That is it, the element is fully interactive, and in all respects it is a fully fledged DOM element (except that it now looks even cooler).
+If your browser doesn't support 3D transformations, nothing will happen. You will just see a simple iframe with no rotation applied.  If your browser supports 3d transformations but without hardware acceleration, it might look a little odd.
+
+## Animating
+
+The thing that I love about CSS3 3D transformations is that it ties so beautifully with the CSS Transition module.  Animations and transitions are easy to define in CSS, and applying these to 3d is no exception.
+
+To animate elements that have a 3D perspective applied is easy.  Simply set the "transition" style to be "transform", attach a duration and an animation function.  From then on, any change to the "tranform" style will be animated.
+
+We have re-factored the previous examples to use document styles, rather than inline styles. Not only does it clear the example up, it allows the sample to take advantage of the `:hover` pseudo selector.  By using the `:hover` selector, transitions can be initiated by simply moving the mouse over the element. Awesome!
+
+## Summary
+
+This was just a quick glance over some of the cool effects that can be applied to any visible DOM element using CSS 3D transformations.  There are still many things that can be done that have not been covered in this tutorial.
diff --git a/src/site/content/en/blog/5miles/index.md b/src/site/content/en/blog/5miles/index.md
new file mode 100644
index 00000000000..f207ce74e66
--- /dev/null
+++ b/src/site/content/en/blog/5miles/index.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: 5miles
+date: 2016-05-12
+updated: 2016-05-12
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0ivyLzLs74ECIJGubzvk.gif", alt="5 miles detail", width="582", height="1000" %}
+</figure>
+
+## Summary
+
+5miles decreases bounce rate by 50% and increases conversions by 60% with new
+Progressive Web App
+
+### Results
+
+- 50% decrease in bounce rates
+- 30% increase in time spent on site
+- 30% better conversion for users who arrived via Add to Home screen
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/uKFLKjXOfOzvuD90R0VN.pdf)
+
+## About 5miles
+
+“Sell what you got and buy what you want!” is the motto of 5miles, a mobile
+marketplace where shoppers can buy everything from furniture to diamond
+earrings. The Dallas-based startup with an R&D center in Beijing has more than
+seven million app downloads.
+
+
+## Challenge
+
+More than half of new shoppers discovered 5miles via the mobile web, but the
+company found it hard to provide a mobile web user experience that was as fast
+and engaging as their mobile app. The resulting high bounce and low retention
+rates prompted them to focus on encouraging users to download their native
+app. Not everyone downloaded their app, however, and getting users to install
+and re-engage with it was challenging and costly.
+
+
+## Solution
+
+5miles built a Progressive Web App (lite.5milesapp.com) to combine the best
+of their app with the broad reach of the web. It leverages new, open web APIs
+to offer a mobile web experience that loads quickly, uses less data, and
+re-engages users in multiple ways. The new strategy delivered a dramatic
+improvement in overall user experience. They’ve seen a 50% decrease in bounce
+rates and a subsequent 30% increase in time spent on the site. Engagement
+rates are now comparable to their native app.
+
+The company wanted to re-engage their mobile web users just as they would
+with mobile app users. With the Progressive Web App, they’re now able to
+prompt users to "Add to Home screen,” and users can simply launch the site
+from the home-screen icon. This has led to high-quality visits, with these
+users converting 30% more than average users.
+
+5miles also added Push Notifications for mobile web users on Android. Sent
+via the mobile web, these notifications look and feel exactly like native-app
+notifications, and work even if the browser isn't currently running on a
+device.
+
+"With a new user growth rate of 100%, quarter-on-quarter, the mobile web is
+at the heart of our success,” says Lucas Lu, 5miles CEO. “It’s a major venue
+for low-cost and highly effective customer acquisition and engagement."
diff --git a/src/site/content/en/blog/6-css-snippets-every-front-end-developer-should-know-in-2023/index.md b/src/site/content/en/blog/6-css-snippets-every-front-end-developer-should-know-in-2023/index.md
new file mode 100644
index 00000000000..f2b37f8c694
--- /dev/null
+++ b/src/site/content/en/blog/6-css-snippets-every-front-end-developer-should-know-in-2023/index.md
@@ -0,0 +1,249 @@
+---
+layout: post
+title: 6 CSS snippets every front-end developer should know in 2023
+subhead: Toolbelt worthy, powerful, and stable CSS you can use today.
+authors:
+  - adamargyle
+description: Toolbelt worthy, powerful, and stable CSS you can use today.
+date: 2023-03-15
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/8A29dtYK0wfkRh8a8wMe.jpg
+thumbthumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GBUkJYnsvmzkdKCQUfWZ.png
+alt: A wooden table with a hammer and a wrench neatly placed on it.
+tags:
+  - blog
+  - css
+---
+
+I believe every front-end developer should know how to use [container
+queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries),
+create a [scroll snap](https://codepen.io/collection/KpqBGW) experience, avoid
+`position: absolute` with
+[grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout),
+swiftly hammer out a circle, use [cascade
+layers](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_layers),
+and reach more with less via [logical
+properties](/learn/css/logical-properties/). Here's a quick
+overview of each of those expectations.
+
+## 1. A container query
+
+The top requested CSS feature for 10 years straight, is [now
+stable](/cq-stable/) across browsers and available for you to use
+for width queries in 2023.
+
+```css
+.panel {
+  container: layers-panel / inline-size;
+}
+
+.card {
+  padding: 1rem;
+}
+
+@container layers-panel (min-width: 20rem) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJovdLN',
+  height: 500,
+  tab: 'css,result'
+} %}
+
+<div class="compat-subject"><code>@container</code></div>
+{% BrowserCompat 'css.at-rules.container' %}
+
+<div class="compat-subject"><code>container</code></div>
+{% BrowserCompat 'css.properties.container' %}
+
+<style>
+.compat-subject ~ .wdi-browser-compat {
+  margin-block-start: 0;
+}
+</style>
+
+## 2. Scroll snap
+
+Well orchestrated scroll experiences set your experience apart from the rest,
+and [scroll
+snap](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) is the
+perfect way to match system scroll UX while providing meaningful stopping
+points.
+
+```css
+.snaps {
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+}
+
+.snap-target {
+  scroll-snap-align: center;
+}
+
+.snap-force-stop {
+  scroll-snap-stop: always;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWVmYLv',
+  height: 700,
+  tab: 'result'
+} %}
+
+Learn more about the potential of this CSS feature in this [huge and inspiring
+Codepen collection](https://codepen.io/collection/KpqBGW) of around 25 demos.
+
+<div class="compat-subject"><code>scroll-snap-type</code></div>
+{% BrowserCompat 'css.properties.scroll-snap-type' %}
+
+<div class="compat-subject"><code>scroll-snap-align</code></div>
+{% BrowserCompat 'css.properties.scroll-snap-align' %}
+
+<div class="compat-subject"><code>scroll-snap-stop</code></div>
+{% BrowserCompat 'css.properties.scroll-snap-stop' %}
+
+<div class="compat-subject"><code>overscroll-behavior</code></div>
+{% BrowserCompat 'css.properties.overscroll-behavior' %}
+
+## 3. Grid pile
+
+Avoid position absolute with a single cell CSS grid. Once they're [piled on top
+of each other](/shows/gui-challenges/m4DKhRJeYx4/), use justify
+and align properties to position them.
+
+```css
+.pile {
+  display: grid;
+  place-content: center;
+}
+
+.pile > * {
+  grid-area: 1/1;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWqVLgQ',
+  height: 300,
+  tab: 'css,result'
+} %}
+
+<div class="compat-subject"><code>grid</code></div>
+{% BrowserCompat 'css.properties.grid' %}
+
+## 4. Quick circle
+
+There are lots of ways to make circles in CSS, but this is definitely the most
+minimal.
+
+```css
+.circle {
+  inline-size: 25ch;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNZdPBK',
+  height: 300,
+  tab: 'css,result'
+} %}
+
+<div class="compat-subject"><code>aspect-ratio</code></div>
+{% BrowserCompat 'css.properties.aspect-ratio' %}
+
+## 5. Control variants with @layer
+
+[Cascade
+layers](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_layers)
+can [help insert variants](https://nerdy.dev/cascade-layer-async-overrides)
+discovered or created later, into the right place in the cascade with the
+original set of variants.
+
+```css
+/* file buttons.css */
+@layer components.buttons {
+  .btn.primary {
+    …
+  }
+}
+```
+
+Then, in some entirely different file, loaded at some other random time, append
+a new variant to the button layer as if it was there with the rest of them this
+whole time.
+
+```css
+/* file video-player.css */
+@layer components.buttons {
+  .btn.player-icon {
+    …
+  }
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYJdqPv',
+  height: 300,
+  tab: 'css,result'
+} %}
+
+<div class="compat-subject"><code>@layer</code></div>
+{% BrowserCompat 'css.at-rules.layer' %}
+
+## 6. Memorize less and reach more with logical properties
+
+Memorize this [one new box model](/learn/css/logical-properties/)
+and [never have to worry](https://css-tricks.com/late-to-logical/) about
+changing left and right padding or margin for international [writing
+modes](https://developer.mozilla.org/docs/Web/CSS/writing-mode) and
+[document
+directions](https://developer.mozilla.org/docs/Web/CSS/direction) again.
+Adjust your styles from physical properties to logical ones like
+[`padding-inline`](https://developer.mozilla.org/docs/Web/CSS/padding-inline),
+[`margin-inline`](https://developer.mozilla.org/docs/Web/CSS/margin-inline),
+[`inset-inline`](https://developer.mozilla.org/docs/Web/CSS/inset-inline),
+and now the browser will do the adjusting work.
+
+```css
+button {
+  padding-inline: 2ch;
+  padding-block: 1ch;
+}
+
+article > p {
+  text-align: start;
+  margin-block: 2ch;
+}
+
+.something::before {
+  inset-inline: auto 0;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdGxvdJ',
+  height: 450,
+  tab: 'css,result'
+} %}
+
+<div class="compat-subject"><code>padding-inline</code></div>
+{% BrowserCompat 'css.properties.padding-inline' %}
+
+<div class="compat-subject"><code>margin-block</code></div>
+{% BrowserCompat 'css.properties.margin-block' %}
+
+<div class="compat-subject"><code>inset-inline</code></div>
+{% BrowserCompat 'css.properties.inset-inline' %}
diff --git a/src/site/content/en/blog/Spooktacular-HTML5-Pumpkin/index.md b/src/site/content/en/blog/Spooktacular-HTML5-Pumpkin/index.md
new file mode 100644
index 00000000000..41fdbb05689
--- /dev/null
+++ b/src/site/content/en/blog/Spooktacular-HTML5-Pumpkin/index.md
@@ -0,0 +1,14 @@
+---
+title: Spooktacular HTML5 Pumpkin
+date: 2011-10-26
+updated: 2019-01-21
+authors:
+  - sethladd
+tags:
+  - blog
+---
+
+
+A fun Halloween treat.
+
+Thanks to Rachel Blum for the picture, Dan Beam, and James Hawkins for the carving.
diff --git a/src/site/content/en/blog/a11y-for-teams/index.md b/src/site/content/en/blog/a11y-for-teams/index.md
new file mode 100644
index 00000000000..c07b8c38892
--- /dev/null
+++ b/src/site/content/en/blog/a11y-for-teams/index.md
@@ -0,0 +1,335 @@
+---
+layout: post
+title: Accessibility for teams
+subhead: How to incorporate accessibility into your team's process.
+description: |
+  How to incorporate accessibility into your team's process.
+authors:
+  - robdodson
+date: 2017-08-01
+updated: 2018-09-20
+---
+
+Making your site more accessible can be a daunting task. If you are approaching
+accessibility for the first time, the sheer breadth of the topic can leave you
+wondering where to start. After all, working to accommodate a diverse range of
+abilities means there are a correspondingly diverse range of issues to consider.
+
+Remember, accessibility is a team effort. Every person has a role to play. This
+article outlines criteria for each of the major disciplines (project manager, UX
+designer, and developer) so that they can work to incorporate accessibility best
+practices into their process.
+
+{% YouTube id="A5XzoDT37iM" %}
+
+
+## Project manager
+
+An overriding goal for any project manager is to try to include accessibility
+work in every milestone; making sure it’s just as much a priority as other
+topics like performance, and user experience. Below are a few checklist items to
+keep in mind when working through your process.
+
+- Make accessibility training available to the team.
+- Identify critical user journeys in the site or application.
+- Try to incorporate an accessibility checklist into the team process.
+- Where possible, evaluate the site or application with user studies.
+
+### Accessibility training
+
+There are a number of great free resources for learning about web accessibility.
+Setting aside time for your team to study the topic can make it easier to
+include accessibility early in the process.
+
+Some resources provided by Google include:
+
+[Web Accessibility by Google](https://bit.ly/web-a11y) — a multi-week interactive
+training course.
+
+[Accessibility Fundamentals](https://bit.ly/a11y-fundamentals) — written
+accessibility guides and best practices.
+
+[Material Guidelines: Accessibility](https://bit.ly/a11y-material) — a set of
+UX best practices for inclusive design.
+
+### Identifying critical user journeys
+
+Every application has some primary action that the user needs to take. For
+example, if you're building an e-commerce app, then every user will need to be
+able to add an item to their shopping cart.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fIlqtDx7bDsiSDYS0XpN.jpg", alt="Primary user journey: A user can add an item to their shopping cart.", width="800", height="447" %}
+</figure>
+
+Some actions may be of secondary importance, and perhaps only performed
+occasionally. For example, changing your avatar photo is a nice feature, but
+may not be critical for every experience.
+
+Identifying the primary and secondary actions in your application will help you
+prioritize the accessibility work ahead. Later, you can combine these actions
+with an accessibility checklist to keep track of your progress and avoid
+regressions.
+
+### Incorporating an accessibility checklist
+
+The topic of accessibility is quite broad, so having a checklist of
+important areas to consider can help you make sure you're covering all of your
+bases.
+
+There are a number of accessibility checklists out there, a few industry
+examples include:
+
+[WebAIM WCAG Checklist](https://webaim.org/standards/wcag/checklist)
+[Vox Accessibility Guidelines](https://accessibility.voxmedia.com)
+
+With a checklist in hand, you can look over your primary and secondary actions
+to start to triage what work still needs to be done. You can get pretty tactical
+about this process and even build a matrix of primary and secondary actions and
+determine for each step in those processes, whether there are any missing
+accessibility bits.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fIlqtDx7bDsiSDYS0XpN.jpg", alt="A table with primary use cases as rows and checklist items as columns.", width="800", height="447" %}
+</figure>
+
+
+### Evaluating with user studies
+
+Nothing beats sitting down with actual users and observing them as they try to
+use your app. If you're retrofitting accessibility into an existing experience,
+this process can help you quickly identify areas that need improvement. And if
+you're starting a new project, early user studies can help you
+avoid spending too much time developing a feature that is difficult to use.
+
+Aim to incorporate feedback from as diverse of a user population as possible.
+Consider users who primarily navigate with the keyboard, or rely on assistive
+technology like screen readers or screen magnifiers.
+
+## UX designer
+
+Because people tend to design using their own biases, if you don't have a
+disability and don't have colleagues with disabilities, you might be
+unintentionally designing for only some of your users. As you work, ask yourself
+"what are all the types of users who might rely on this design?" Here are some
+techniques you can try to make your process more inclusive.
+
+- Content has sufficient color contrast.
+- The tab order is defined.
+- Controls have accessible labels.
+- There are multiple ways to interact with the UI.
+
+### Content has good color contrast
+
+The primary goal of most sites is to convey some information to the user, either
+through written text or images. However, if this content is low contrast, it may
+be difficult for some users (particularly those with a vision impairment) to
+read. This may negatively affect their user experience. To address
+this concern, aim for all text and images to have sufficient color contrast.
+
+Contrast is measured by comparing the luminance of a foreground and background
+color. For smaller text (anything below 18pt or 14pt bold) a minimum ratio of
+4.5:1 is recommended. For larger text, this ratio can be adjusted to 3:1.
+
+In the image below, the text on the left hand side meets these contrast
+minimums, whereas the text on right hand side is low contrast.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jaNjQm0xH9SCKlwlGkkr.jpg", alt="Side-by-side text samples. One is sufficient contrast, one is low contrast.", width="800", height="449" %}
+</figure>
+
+There are a number of tools for measuring color contrast, such as Google’s [Material
+Color Tool](https://material.io/color), [Lea Verou's Contrast Ratio
+app](https://leaverou.github.io/contrast-ratio), and Deque’s
+[aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd).
+
+### Tab order is defined
+
+The tab order is the order in which elements receive focus as the user
+presses the tab key. For users who navigate primarily with a keyboard, the
+tab key is their primary means of reaching everything on screen. Think of it
+like their mouse cursor.
+
+Ideally the tab order should follow the reading order and flow from the top of
+the page to the bottom, with more important items appearing higher up in the
+order. This makes it more efficient for anyone using a keyboard to quickly reach
+these items.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bXXmEcviM7CcBIOe4IY9.jpg", alt="A design comp with interactive controls numbered.", width="800", height="447" %}
+</figure>
+
+The mock interface above is numbered to show the tab order. Creating a mock like
+this can help by identifying the intended tab order. This can then be shared
+with the developers and QA testers to make sure it is properly implemented and
+tested.
+
+### Controls have accessible labels
+
+For users of assistive technology like screen readers, labels provide
+information that would otherwise be visual only. For example a search button
+that's just a magnifying glass icon can have an accessible label of "Search" to
+help fill in the missing visual affordance.
+
+Here are a few simple suggestions to follow when designing accessible labels:
+
+- Be succinct - It can be tedious to listen to long descriptions.
+- Try not to include control type or state - If the control is coded properly
+  then a screen reader will announce this automatically.
+- Focus on action verbs - Use "search" not "magnifying glass".
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Crox54xaTpHceNJinK7X.jpg", alt="A design comp with controls marked with their accessible labels.", width="800", height="448" %}
+</figure>
+
+
+You might consider creating a mock with all of your controls labeled. This can
+be shared with your development team and QA team for implementation and testing.
+
+
+### Multiple ways to interact with and understand UI
+
+It's easy to assume that all users interact with the
+page primarily using a mouse. When designing, consider how someone will
+interact with a control using a keyboard instead.
+
+Plan your focus states! This means determining what a control will look like
+when the user focuses it with tab or presses the arrow keys. It's useful to have
+these states planned early, rather than trying to shoehorn them into the design
+later.
+
+Finally, for any point of interaction, you want to make sure that the user has
+multiple ways of understanding the content. Try not to use color alone to convey
+information, as these subtle cues may be missed by a user with a color vision
+deficiency. A classic example is an invalid text field. Instead of just a red
+underline to signify a problem, also consider adding some helper text. That
+way you're covering more bases and increasing the likelihood that a user will
+notice the issue.
+
+## Developer
+
+The developer's role is where focus management and semantics combine to form a
+robust user experience. Below are a few items a developers can keep in mind as
+they're working on their site or application:
+
+- The tab order is logical.
+- Focus is properly managed and visible.
+- Interactive elements have keyboard support.
+- ARIA roles and attributes are applied as needed.
+- Elements are properly labeled.
+- Testing is automated.
+
+### Logical tab order
+
+Native elements like `input`, `button`, and `select` get opted into the tab
+order for free and are automatically focusable with the keyboard. But not all
+elements receive this same behavior! In particular, generic elements like `div`,
+and `span`, are not opted into the tab order. This means if you use a `div` to
+create an interactive control, you'll need to do additional work to make
+it keyboard accessible.
+
+Two options are:
+
+- Give the control a `tabindex="0"`. This will at least make it focusable,
+  though you'll likely need to do additional work to add support for keypresses.
+- Where possible, consider using a `button` instead of a `div` or `span` for any
+button-like control. The native `button` element is very easy to style and gets
+keyboard support for free.
+
+
+{% YouTube id="CZGqnp06DnI" %}
+
+
+### Managing focus
+
+When you change the content of the page, it's important to direct the user's
+attention by moving focus. A classic example of when this technique is useful is
+when opening a modal dialog. If a user relying on a keyboard presses a button to
+open a dialog and their focus _is not_ moved into the dialog element, then their
+only course of action is to tab through the entire site until they eventually
+find the new control. By moving focus into the new content as soon as it
+appears, you can improve the efficiency of these users’ experiences.
+
+{% YouTube id="JS68faEUduk" %}
+
+### Keyboard support for interactive elements
+
+If you're building a custom control like a carousel or dropdown, then you'll
+need to do some additional work to add keyboard support. The [ARIA Authoring
+Practices Guide](https://w3.org/TR/wai-aria-practices-1.1) is a useful resource
+which identifies various UI patterns and the kinds of keyboard actions they are
+expected to support.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4fMxB2KVIG5qXWX5Nc7l.jpg", alt="An excerpt from the ARIA Authoring Practices guide explaining how to build a radio group.", width="800", height="449" %}
+</figure>
+
+To learn more about adding keyboard support to an element, take a look at the
+[roving tabindex]((https://web.dev/control-focus-with-tabindex/#create-accessible-components-with-%22roving-tabindex%22))
+section in Google’s Accessibility Fundamentals docs.
+
+### ARIA roles and attributes are applied as needed
+
+Not only do custom controls need proper keyboard support, they also need proper
+semantics. After all, a `div`, semantically, is just a generic grouping
+container. If you're using a `div` as the basis for your dropdown menu, you'll
+need to rely on
+[ARIA](/semantics-aria/)
+to layer in additional semantics so the control type can be conveyed to
+assistive technology. Here again the
+[ARIA Authoring Practices Guide](https://w3.org/TR/wai-aria-practices-1.1)
+can help by identifying which roles, states, and properties you should be using.
+As an added bonus, many of the explanations in the ARIA guide also come with
+sample code!
+
+### Labeling elements
+
+For labeling native inputs, you can use the built-in
+[`<label>` element](https://developer.mozilla.org/docs/Web/HTML/Element/label)
+as described on MDN. Not only will this help you create an onscreen visual
+affordance, but it also gives the input an accessible name in the accessibility
+tree. This name is then picked up by assistive technology (like a screen reader)
+and announced to the user.
+
+Unfortunately `<label>` _does not_ support giving an accessible name to custom
+controls (like ones created using [Custom
+Elements](/custom-elements-v1/)
+or out of simple divs and spans). For these kinds of controls you'll need to use
+the [`aria-label` and `aria-labelledby`
+attributes](/aria-labels-and-relationships/#labels).
+
+### Automated testing
+
+Being lazy can be good, especially when it comes to testing. Wherever possible
+seek to automate your accessibility tests so you don't have to do everything
+manually. There are a number of great industry testing tools that exist today to
+make it easy and fast to check for common accessibility issues:
+
+aXe, created by Deque systems, is available as a [Chrome
+extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
+and [a Node module](https://github.com/dequelabs/axe-core) (good for continuous
+integration environments). This short A11ycast explains a few different ways to
+incorporate aXe into your development process.
+
+{% YouTube id="jC_7NnRdYb0" %}
+
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is Google’s
+open source project for auditing the performance of your Progressive Web Apps.
+In addition to checking if your PWA has support for things like [Service
+Worker](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+and a [Web App
+Manifest](/add-manifest/),
+Lighthouse will also run a series of best practice tests, including tests for
+accessibility issues.
+
+## Conclusion
+
+Accessibility is a team effort. Everyone has a role to play. This guide has laid
+out a few key items that each team member can use to quickly ramp up on the
+subject and hopefully improve the overall experience of their app.
+
+To learn more about accessibility, be sure to check out [our free Udacity
+course](https://bit.ly/web-a11y) and browse [the accessibility docs](/accessible/) available here on web.dev.
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-chrome.png b/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-chrome.png
deleted file mode 100644
index ad099f3f2b6..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-chrome.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-ff.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-ff.jpg
deleted file mode 100644
index cf009935a20..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/a11y-tree-ff.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/angular-a11y-testing.png b/src/site/content/en/blog/a11y-tips-for-web-dev/angular-a11y-testing.png
deleted file mode 100644
index 2eaa2243078..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/angular-a11y-testing.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/aria-expanded.gif b/src/site/content/en/blog/a11y-tips-for-web-dev/aria-expanded.gif
deleted file mode 100644
index 9b2597e981b..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/aria-expanded.gif and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/chromelens.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/chromelens.jpg
deleted file mode 100644
index 0fd74e09df0..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/chromelens.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/dos-donts.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/dos-donts.jpg
deleted file mode 100644
index 3647524fd33..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/dos-donts.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/hero.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/hero.jpg
deleted file mode 100644
index 68724948f2b..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/index.md b/src/site/content/en/blog/a11y-tips-for-web-dev/index.md
index 4e173a82728..f694fd5b127 100644
--- a/src/site/content/en/blog/a11y-tips-for-web-dev/index.md
+++ b/src/site/content/en/blog/a11y-tips-for-web-dev/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Accessibility tips for web developers
 subhead: Improving accessibility makes your site more useable for everyone.
 description: |
@@ -10,7 +11,7 @@ description: |
 authors:
   - addyosmani
 date: 2019-12-06
-hero: hero.jpg
+hero: image/admin/whvrlDQbdAnmwbnZH7qX.jpg
 alt: Illustration showing images of common disabilities pinned to a corkboard.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -38,7 +39,7 @@ Moreover, sites should be usable by the broadest group of users,
 including those with disabilities.
 Here's a sample of just a few disabilities your users may have:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -128,7 +129,7 @@ Here's a sample of just a few disabilities your users may have:
 tools displays a tooltip of CSS properties
 that includes a quick check for color contrast ratio.
 
-![Screenshot of the Chrome DevTools Inspect Element tooltip.](./inspect-element.jpg)
+{% Img src="image/admin/avwZaOjEWT7pES1OqUly.jpg", alt="Screenshot of the Chrome DevTools Inspect Element tooltip.", width="800", height="370" %}
 
 I personally live with low vision, and I often find myself zooming in on sites,
 their DevTools, and the terminal.
@@ -143,7 +144,7 @@ it can make a world of difference to users like me.🤓
 - Test that your UI components are still functional
   [without sound](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-understanding).
 
-![Screenshot of the ChromeVox screen reader reading a web page.](screen-reader.jpg)
+{% Img src="image/admin/ZIbJHF5vyMxmKAN9juO1.jpg", alt="Screenshot of the ChromeVox screen reader reading a web page.", width="800", height="500" %}
 
 **Mobility issues** can include the inability to operate a mouse, a keyboard, or a touch screen.
 
@@ -162,7 +163,7 @@ to help them with reading text, so it's important to ensure text alternatives ex
   or flash, which can cause [issues](http://www.w3.org/TR/WCAG20/#seizure)
   for some users.
 
-  The [`prefers-reduced-motion`](https://developers.google.com/web/updates/2019/03/prefers-reduced-motion#too_much_motion_in_real_life_and_on_the_web)
+  The [`prefers-reduced-motion`](/prefers-reduced-motion/#too-much-motion-in-real-life-and-on-the-web)
   CSS media query allows you to limit animations
   and autoplaying videos for users who prefer reduced motion:
 
@@ -188,11 +189,11 @@ and then improving the accessibility of your UI components.
 [accessibility dos and don'ts digital posters](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)
 to spread awareness of best practices in your team:
 
-![Digital posters showing accessibility dos and don'ts.](dos-donts.jpg)
+{% Img src="image/admin/lmcS2dTmBHuUo3j0ERCp.jpg", alt="Digital posters showing accessibility dos and don'ts.", width="800", height="721" %}
 
 ## Are your UI components accessible?
 
-**Summary (tl;dr)**
+**Summary**
 
 When auditing your page's UI components for accessibility, ask yourself:
 
@@ -226,7 +227,7 @@ When auditing your page's UI components for accessibility, ask yourself:
   [High Contrast](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en)
   is a Chrome extension that can help here.
 
-Native controls (such as `<button>` and `<select>`)
+Standardized controls (such as `<button>` and `<select>`)
 have accessibility built in by the browser.
 They are focusable using the `Tab` key;
 they respond to keyboard events (like the `Enter`, `Space`, and arrow keys);
@@ -234,22 +235,22 @@ and they have semantic roles, states, and properties used by accessibility tools
 Their default styling should also meet the accessibility requirements listed above.
 
 Custom UI components
-(with the exception of components that extend native elements like `<button>`)
+(with the exception of components that extend standard elements like `<button>`)
 do not have any built-in functionality, including accessibility,
 so you need to provide it.
 A good place to start when implementing accessibility
-is to compare your component to an analogous native element
-(or a combination of several native elements,
+is to compare your component to an analogous standard element
+(or a combination of several standard elements,
 depending on how complex your component is).
 
 **Tip:** Most browser developer tools support inspecting the accessibility tree of a page.
 In Chrome DevTools, this is available via the **Accessibility** tab in the **Elements** panel:
 
-![Screenshot of the accessibility tree view in Chrome DevTools.](./a11y-tree-chrome.png)
+{% Img src="image/admin/FcpD3oNA1C39KbQuNinf.png", alt="Screenshot of the accessibility tree view in Chrome DevTools.", width="800", height="486" %}
 
 Firefox also has an **Accessibility** panel:
 
-![Screenshot of the accessibility tree view in FireFox DevTools.](./a11y-tree-ff.jpg)
+{% Img src="image/admin/DRqDC9mtfcejAIjLImdR.jpg", alt="Screenshot of the accessibility tree view in FireFox DevTools.", width="800", height="500" %}
 
 Safari exposes accessibility information in the **Elements** panel's **Node** tab.
 
@@ -267,15 +268,13 @@ First, ensure that you have a sensible focus target for each component.
 For example, a complex component like a menu may be one focus target within a page
 but should then manage focus within itself so that the active menu item always takes focus.
 
-<figure class="w-figure">
-  <img src="./manage-focus.png" alt="A screenshot of a menu and submenu that requires focus management.">
-  <figcaption class="w-figcaption">
-    Managing focus within a complex element.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/8zpJMaaY0DuAHdugbSr3.png", alt="A screenshot of a menu and submenu that requires focus management.", width="800", height="377" %}
+  <figcaption>Managing focus within a complex element.</figcaption>
 </figure>
 
 ### Using tabindex
-The `tabindex` attribute allows elements and UI components to be focused using the keyboard. Keyboard-only and assistive technology users both need to be able to place keyboard focus on elements to interact with them. Native interactive elements are implicitly focusable, so they don't need a `tabindex` attribute unless you wish to change their position in the tab order.
+The `tabindex` attribute allows elements and UI components to be focused using the keyboard. Keyboard-only and assistive technology users both need to be able to place keyboard focus on elements to interact with them. Built-in interactive elements (like `<button>`) are implicitly focusable, so they don't need a `tabindex` attribute unless you wish to change their position in the tab order.
 
 **There are three types of `tabindex` values:**
 
@@ -291,7 +290,7 @@ Also ensure that focus is always visible, whether by allowing the default focus
 
 {% Aside %}
 You may also be interested in the roving `tabindex` or `aria-activedescendant` approaches,
-[covered over on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex).
+[covered over on MDN](https://developer.mozilla.org/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex).
 {% endAside %}
 
 ### Using autofocus
@@ -302,7 +301,7 @@ when the page is loaded.
 [all web form controls](https://html.spec.whatwg.org/multipage/forms.html#association-of-controls-and-forms),
 including buttons.
 To autofocus elements in your own custom UI components,
-call the [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus) method,
+call the [`focus()`](https://developer.mozilla.org/docs/Web/API/HTMLElement.focus) method,
 supported on all HTML elements that can be focused
 (for example, `document.querySelector('myButton').focus()`).
 
@@ -335,8 +334,8 @@ to automate running keyboard accessibility tests for toggling UI states.
 [WalkMe Engineering](https://medium.com/walkme-engineering/web-accessibility-testing-d499a7f7a032)
 has a great guide on this I recommend reading.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./aria-expanded.gif" alt="WalkMe state toggle test.">
+<figure>
+  {% Img src="image/admin/3lZosaL1YXafLn4ZRINl.gif", alt="WalkMe state toggle test.", width="441", height="400" %}
 </figure>
 
 ```js
@@ -390,7 +389,7 @@ for providing alternative text for that image, analogous to the `alt` attribute.
 Assistive technology conveys semantic information
 that is otherwise expressed to sighted users via visual cues
 such as formatting, cursor style, or position.
-Native elements have this semantic information built-in by the browser,
+Standardized elements have this semantic information built-in by the browser,
 but for custom components you need to use
 [ARIA](http://www.w3.org/WAI/PF/aria/) to add the information.
 
@@ -404,11 +403,9 @@ By binding these attributes to the relevant properties on your custom component,
 you can allow users of assistive technology to interact with the element,
 change its value, and even cause the element's visual presentation to change accordingly.
 
-<figure class="w-figure">
-  <img src="./slider.png" class="w-screenshot" alt="A screenshot of a slider.">
-  <figcaption class="w-figcaption">
-    A range slider component.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/BD2bS6XEEUlORVOGHwhe.png", alt="A screenshot of a slider.", width="159", height="56" %}
+  <figcaption>A range slider component.</figcaption>
 </figure>
 
 ```html
@@ -425,9 +422,9 @@ provide labels and values for each slice
 so users who have visual impairments can understand the information
 even if they can't tell where the slices begin and end:
 
-<figure class="w-figure">
-  <img src="./pie-chart.png" alt="A pie chart with labels and values to ensure accessibility.">
-  <figcaption class="w-figcaption">An accessible pie chart. (From the <a href="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)" rel="noopener">W3C Web Accessibility Initiative</a>.)</figcaption>
+<figure>
+  {% Img src="image/admin/4DlbNfCX7AYYrPSpQg4L.png", alt="A pie chart with labels and values to ensure accessibility.", width="500", height="442" %}
+  <figcaption>An accessible pie chart. (From the <a href="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)" rel="noopener">W3C Web Accessibility Initiative</a>.)</figcaption>
 </figure>
 
 ### Is there sufficient contrast between text and images and their background?
@@ -456,35 +453,35 @@ debugging the accessibility of your visual components.
   for your framework or browser of choice.
   [Axe Puppeteer](https://www.deque.com/blog/axe-and-attest-integration-puppeteer/)
   can be used for writing automated accessibility tests.
-- The [Lighthouse](https://developers.google.com/web/tools/lighthouse)
+- The [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
   Accessibility audits provide helpful insights for discovering common accessibility issues.
   The accessibility score is a weighted average of all accessibility audits
   based on [Axe user impact assessments](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md).
   For monitoring accessibility via continuous integration, see [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci).
 
-![Screenshot of the Lighthouse accessibility audit.](./lh-a11y-audit.png)
+{% Img src="image/admin/Bft9DABqWge4ZRpF6wzK.png", alt="Screenshot of the Lighthouse accessibility audit.", width="800", height="649" %}
 
 - [Tenon.io](https://tenon.io/) is useful for testing common accessibility problems.
   Tenon has strong integration support across build tools, browsers (via extensions), and even text editors.
 - There are many library- and framework-specific tools
   for highlighting accessibility issues with components.
-  For example, [web.dev](https://web.dev/accessibility-auditing-react/)
+  For example, [web.dev](/accessibility-auditing-react/)
   explains how to use [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)
   to highlight accessibility issues for React components in your editor:
 
-  ![Screenshot of a code editor with an accessibility issue flagged by eslint-plugin-jsx-a11y.](./react-a11y-testing.png)
+  {% Img src="image/admin/9bAOYq7Cr11vzf4P04d2.png", alt="Screenshot of a code editor with an accessibility issue flagged by eslint-plugin-jsx-a11y.", width="800", height="500" %}
 
   If you use Angular, [codelyzer](/accessible-angular-with-codelyzer)
   provides in-editor accessibility audits too:
 
-  ![Screenshot of a code editor with an accessibility issue flagged by codelyzer.](./angular-a11y-testing.png)
+  {% Img src="image/admin/Ca3rCQlJ53C7ILx3hwot.png", alt="Screenshot of a code editor with an accessibility issue flagged by codelyzer.", width="800", height="433" %}
 
 - You can examine the way that assistive technologies see web content by using
   [Accessibility Inspector](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html#//apple_ref/doc/uid/TP40001078-CH210-SW1) (Mac)
   or [Windows Automation API Testing Tools](http://msdn.microsoft.com/en-us/library/windows/desktop/dd373661(v=vs.85).aspx)
   and [AccProbe](http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/) (Windows).
   You can also see the full accessibility tree that Chrome creates
-  by navigating to `chrome://accessibility`.
+  by navigating to `about://accessibility`.
 - The best way to test for screen reader support on a Mac is using the VoiceOver utility.
   Use `⌘F5` to enable or disable it, `Ctrl+Option ←→` to move through the page,
   and `Ctrl+Shift+Option + ↑↓` to move up and down the accessibility tree.
@@ -501,7 +498,7 @@ debugging the accessibility of your visual components.
 - [ChromeLens](http://chromelens.xyz/) helps develop for the visually impaired.
   It also has great support for visualizing keyboard navigation paths.
 
-  ![Screenshot of ChromeLens.](./chromelens.jpg)
+  {% Img src="image/admin/RcDZ95ALFvNeDdpdv2Mo.jpg", alt="Screenshot of ChromeLens.", width="800", height="514" %}
 
 - [ChromeVox](http://www.chromevox.com/) is a screen reader available as a Chrome extension and built into ChromeOS devices.
 
@@ -519,4 +516,4 @@ To learn more about accessibility fundamentals and help improve those statistics
 I recommend the [Accessible to all](/accessible/) docs on web.dev.
 There's much we can do to build experiences that are more accessible for everyone.
 
-![Screenshot of the web.dev "Accessible to all" collection page.](./web-dev-a11y.jpg)
+{% Img src="image/admin/iMaXm08LsbVKpkNCZEwA.jpg", alt="Screenshot of the web.dev 'Accessible to all' collection page.", width="800", height="513" %}
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/inspect-element.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/inspect-element.jpg
deleted file mode 100644
index 6cf3483b040..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/inspect-element.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/lh-a11y-audit.png b/src/site/content/en/blog/a11y-tips-for-web-dev/lh-a11y-audit.png
deleted file mode 100644
index 95624b14ddf..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/lh-a11y-audit.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/manage-focus.png b/src/site/content/en/blog/a11y-tips-for-web-dev/manage-focus.png
deleted file mode 100644
index f74679dc599..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/manage-focus.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/pie-chart.png b/src/site/content/en/blog/a11y-tips-for-web-dev/pie-chart.png
deleted file mode 100644
index c0d06dc41cc..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/pie-chart.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/react-a11y-testing.png b/src/site/content/en/blog/a11y-tips-for-web-dev/react-a11y-testing.png
deleted file mode 100644
index b7ddd513714..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/react-a11y-testing.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/screen-reader.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/screen-reader.jpg
deleted file mode 100644
index f5cd0f2c85c..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/screen-reader.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/slider.png b/src/site/content/en/blog/a11y-tips-for-web-dev/slider.png
deleted file mode 100644
index 671dab5ad21..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/slider.png and /dev/null differ
diff --git a/src/site/content/en/blog/a11y-tips-for-web-dev/web-dev-a11y.jpg b/src/site/content/en/blog/a11y-tips-for-web-dev/web-dev-a11y.jpg
deleted file mode 100644
index a8fc8c0e583..00000000000
Binary files a/src/site/content/en/blog/a11y-tips-for-web-dev/web-dev-a11y.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/abouttracing/index.md b/src/site/content/en/blog/abouttracing/index.md
new file mode 100644
index 00000000000..35e01160fe3
--- /dev/null
+++ b/src/site/content/en/blog/abouttracing/index.md
@@ -0,0 +1,185 @@
+---
+layout: post
+title: Profiling your WebGL Game with the about:tracing flag
+authors:
+  - lillithompson
+date: 2012-05-24
+tags:
+  - blog
+---
+
+{% Blockquote 'Lord Kelvin' %}If you can not measure it, you can not improve it.
+{% endBlockquote %}
+
+To get your HTML5 games to run faster, you have to first pinpoint the performance bottlenecks, but this can be difficult. Evaluating frames per second (FPS) data is a start, but to see the full picture, you have to grasp the nuances in the Chrome activities.
+
+The about:tracing tool provides the insight that helps you avoid hasty workarounds aimed at performance improvement, but which are essentially well-intentioned guesswork. You’ll save a lot of time and energy, get a clearer picture of what Chrome is doing with each frame, and use this information to optimize your game.
+
+
+## Hello about:tracing
+
+Chrome's about:tracing tool gives you a window into all of Chrome's activities over a period of time with so much granularity that you might find it overwhelming at first. Many of the functions in Chrome are instrumented for tracing out of the box, so without doing any manual instrumentation you can still use about:tracing to track your performance. (See a later section on manually instrumenting your JS)
+
+
+{% Aside %}
+Tip: you can also capture tracing information from Chrome for Android. Future articles will cover mobile debugging, but in the meanwhile you can refer to [this document](https://developers.google.com/chrome/mobile/docs/debugging).
+{% endAside %}
+
+To see the tracing view simply type "about:tracing" into Chrome's omnibox (address bar).
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vRsSLBbk9yTHj0H5dSlj.png", alt="Chrome omnibox", width="239", height="31" %}
+  <figcaption>Type "about:tracing" into Chrome's omnibox</figcaption>
+</figure>
+
+From the tracing tool, you can start recording, run your game for a few seconds, and then view the trace data. This is an example of what the data might look like:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/StTkRW4Gz0GTPOWYdNPl.png", alt="Simple tracing result", width="600", height="373" %}
+  <figcaption>Simple tracing result</figcaption>
+</figure>
+
+Yep, that's confusing all right. Let's talk about how to read it.
+
+Each row represents a process being profiled, the left-right axis indicates time, and each colored box is an instrumented function call. There are rows for a number of different kinds of resources. The ones that are most interesting for game profiling are CrGpuMain, which shows what the Graphics Processing Unit (GPU) is doing, and CrRendererMain. Each trace contains CrRendererMain lines for each open tab during the trace period (including the about:tracing tab itself).
+
+When reading trace data your first task is to determine which CrRendererMain row corresponds to your game. 
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ALzEKpvx9OALhsD04LFy.png", alt="Simple tracing result highlighted", width="600", height="373" %}
+  <figcaption>Simple tracing result highlighted</figcaption>
+</figure>
+
+In this example the two candidates are: 2216 and 6516. Unfortunately there currently isn't a polished way to pick out your application except to look for the line that's doing a lot of periodic updating (or if you've  manually instrumented your code with trace points, to look for the line that contains your trace data). In this example, it looks like 6516 is running a main loop from the frequency of updates. If you close all other tabs before starting trace, finding out the correct CrRendererMain will be easier. But there still may be CrRendererMain rows for processes other than your game. 
+
+### Finding your frame
+
+Once you've located the correct row in the tracing tool for your game, the next step is to find the main loop. The main loop looks like a repeating pattern in the tracing data. You can navigate the tracing data by using the W, A, S, D keys: A and D to move left or right (back and forth in time) and W and S to zoom in and out on the data. You would expect your main loop to be a pattern that repeats every 16 milliseconds if your game is running at 60Hz.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OaqgG1IveqQcmrvLbeHs.png", alt="Looks like three execution frames", width="579", height="141" %}
+  <figcaption>Looks like three execution frames</figcaption>
+</figure>
+
+Once you've located your game's heartbeat, you can dig into what exactly your code is doing at each frame. Use W, A, S, D to zoom in until you can read the text in the function boxes.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LZZ7mv7XoGiC01rIOaWh.png", alt="Deep into an execution frame", width="579", height="335" %}
+  <figcaption>Deep into an execution frame</figcaption>
+</figure>
+
+This collection of boxes shows a series of function calls, with each call represented by a colored box. Each function was called by the box above it, so in this case, you can see that MessageLoop::RunTask called RenderWidget::OnSwapBuffersComplete, which in turn called RenderWidget::DoDeferredUpdate, and so on. Reading this data, you can get a full view of what called what and how long each execution took.
+
+But here's where it gets a little sticky. The information exposed by about:tracing is the raw function calls from the Chrome source code. You can make educated guesses about what each function is doing from the name, but the information is not exactly user friendly. It's useful to see the overall flow of your frame, but you need something a little more human readable to actually figure out what's going on.
+
+### Adding trace tags
+
+Fortunately there's a friendly way to add manual instrumentation to your code to create trace data: `console.time` and `console.timeEnd`.
+
+```js
+console.time("update");
+update();
+console.timeEnd("update");
+console.time("render");
+update();
+console.timeEnd("render");
+```
+
+The above code creates new boxes in the tracing view name with the tags specified, so if you re-run the app you'll see "update" and "render" boxes that show the time elapsed between the start and end calls for each tag.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/b7tbYPkUqwujYn2UIgT5.png", alt="Tags added manually", width="621", height="127" %}
+  <figcaption>Tags added manually</figcaption>
+</figure>
+
+Using this, you can create human readable tracing data to track hotspots in your code.
+
+### GPU or CPU?
+
+With hardware accelerated graphics, one of the most important questions you can ask during profiling is: Is this code GPU bound or CPU bound? With each frame you'll be doing some rendering work on the GPU and some logic on the CPU; in order to understand what's making your game slow you'll need to see how the work is balanced across the two resources.
+
+First, find the line on the tracing view named CrGPUMain, which indicates whether the GPU is busy at a particular time.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HYrlpTCRfe0pjRd46r2C.png", alt="GPU and CPU traces", width="584", height="195" %}
+</figure>
+
+You can see that every frame of your game causes CPU work in the CrRendererMain as well as on the GPU. The above trace shows a very simple use case where both the CPU and GPU are idle for most of each 16ms frame.
+
+The tracing view really becomes helpful when you've got a game that's running slowly and you're not sure which resource you're maxing out. Looking at how the GPU and CPU lines relate is the key to debugging. Take the same example as before, but add a little extra work in the update loop.
+
+```js
+console.time("update");
+doExtraWork();
+update(Math.min(50, now - time));
+console.timeEnd("update");
+
+console.time("render");
+render();
+console.timeEnd("render");
+```
+
+Now you'll see a trace that looks like this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/infS4eZbJFuPQIkzbqOs.png", alt="GPU and CPU traces", width="800", height="182" %}
+</figure>
+
+What does this trace tell us? We can see that the frame pictured goes from about 2270ms to 2320ms, meaning that each frame is taking about 50ms (a frame rate of 20Hz). You can see slivers of colored boxes representing the render function next to the update box, but the frame is entirely dominated by update itself.
+
+In contrast to what's going on on the CPU, you can see that the GPU is still sitting around idle for most of every frame. To optimize this code, you could look for operations that can be done in shader code and move them to the GPU to make best use of resources.
+
+What about when the shader code itself is slow and the GPU is overworked? What if we remove the unnecessary work from the CPU and instead add some work in the fragment shader code. Here's a needlessly expensive fragment shader:
+
+```csharp
+#ifdef GL_ES
+precision highp float;
+#endif
+void main(void) {
+  for(int i=0; i<9999; i++) {
+    gl_FragColor = vec4(1.0, 0, 0, 1.0);
+  }
+}
+```
+
+What does a trace of code using that shader look like?
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5JVG2ReFlsdqGnDWn0Ov.png", alt="GPU and CPU traces when using slow GPU code", width="737", height="209" %}
+  <figcaption>GPU and CPU traces when using slow GPU code</figcaption>
+</figure>
+
+Again, note the duration of a frame. Here the repeating pattern goes from about 2750ms to 2950ms, a duration of 200ms (frame rate of about 5Hz). The CrRendererMain line is almost completely empty meaning that the CPU is idle most of the time, while the GPU is overloaded. This is a sure sign that your shaders are too heavy.
+
+If you didn't have visibility into exactly what was causing the low framerate, you could observe the 5 Hz update and be tempted to go into the game code and start trying to optimize or remove game logic. In this case, that would do absolutely no good, because logic in the game loop isn't what is eating up time. In fact, what this trace indicates is that doing more CPU work each frame would be essentially "free" in that the CPU is hanging around idle, so giving it more work will not effect how long the frame takes.
+
+## Real Examples
+
+Now let's check out what tracing data from a real game looks like. One of the cool things about games built with open web technologies is that you can see what's going on in your favorite products. If you want to test out profiling tools you can pick your favorite WebGL title from the Chrome Web Store and profile it with about:tracing. This is an example trace taken from the excellent WebGL game Skid Racer.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/a52GuNsgHSXcvKNHwtlt.png", alt="Tracing a real game", width="482", height="198" %}
+  <figcaption>Tracing a real game</figcaption>
+</figure>
+
+Looks like each frame takes about 20ms, which means that the frame rate is about 50 FPS. You can see that the work is balanced between the CPU and GPU, but the GPU is the resource that's most in demand. If you want to see what it's like to profile real examples of WebGL games try playing around with some of the Chrome Web Store titles built with WebGL including:
+
+- [Skid Racer](https://chrome.google.com/webstore/detail/bhoaojooagiaaiidlnfhkkafjpbbnnno)
+- [Bouncy Mouse](https://chrome.google.com/webstore/detail/cgdllcbmneiklcmbeclfegccdjholomb)
+- [Bejeweled](https://chrome.google.com/webstore/detail/adpkifcfcacgmnggcbpbjbkdijciiigm)
+- [FieldRunners](https://chrome.google.com/webstore/detail/lkpikhjbfbffdblahfidklcohlaeabak)
+- [Angry Birds](https://chrome.google.com/webstore/detail/aknpkdffaafgjchaibgeefbgmgeghloj)
+- [Bug Village](https://chrome.google.com/webstore/detail/pabppflkalbniedjechdomdnofnogcfh)
+- [Monster Dash](https://chrome.google.com/webstore/detail/cknghehebaconkajgiobncfleofebcog)
+
+## Conclusion
+
+If you want your game to run at 60Hz, then for every frame all your operations have to fit into 16ms of CPU and 16ms of GPU time. You have two resources that can be utilized in parallel, and you can shift work between them to maximize performance. Chrome's about:tracing view is an invaluable tool for getting insight into what your code is actually doing and will help you maximize your development time by tackling the right problems.
+
+## What's next?
+
+Besides GPU, you can also trace other parts of the Chrome runtime. Chrome Canary, the early stage version of Chrome, is instrumented to trace IO, IndexedDB and several other activities. You should read [this Chromium article](http://www.chromium.org/developers/how-tos/trace-event-profiling-tool/trace-event-reading) for a deeper understanding of the current state of tracing events.
+
+If you are a web game developer, make sure you watch the video below. It is a presentation from Google's Game Developer Advocate team at GDC 2012 about performance optimization for Chrome games:
+
+{% YouTube id="XAqIpGU8ZZk" %}
diff --git a/src/site/content/en/blog/accent-color/index.md b/src/site/content/en/blog/accent-color/index.md
new file mode 100644
index 00000000000..5e20ae6ab2d
--- /dev/null
+++ b/src/site/content/en/blog/accent-color/index.md
@@ -0,0 +1,180 @@
+---
+layout: post
+title: CSS `accent-color`
+subhead: Bring your brand color to built-in HTML form inputs with one line of code.
+authors:
+  - adamargyle
+  - jarhar
+description: Bring your brand color to built-in HTML form inputs with one line of code.
+date: 2021-08-11
+updated: 2022-07-25
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WOcuCLCwMr0M2lF17bmm.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/huEpiCoJQ6dAo8rHGsZT.png
+tags:
+  - blog
+  - css
+---
+
+Today's HTML form elements are [difficult to
+customize](https://codepen.io/GeoffreyCrofte/pen/BiHzp). It feels as if it's
+a choice between few or no custom styles, or resetting input styles and
+build it up from scratch. Building it up from scratch ends up being much more
+work than anticipated. It can also lead to forgotten styles for element states
+([indeterminate](https://developer.mozilla.org/docs/Web/CSS/:indeterminate),
+I'm looking at you), and the loss of built-in accessibility features.
+To fully recreate what the browser provides may be more
+work than you're looking to take on.
+
+```css
+accent-color: hotpink;
+```
+
+CSS `accent-color` from the [CSS UI
+specification](https://www.w3.org/TR/css-ui-4/#widget-accent) is here to tint
+elements with one line of CSS, saving you from customization efforts by
+providing a way to bring your brand into elements.
+
+{% BrowserCompat 'css.properties.accent-color' %}
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CfSS3F1XUsfCHIB86xeE.png",
+    alt="A light theme screenshot of an accent-color demo where
+    checkbox, radio buttons, a range slider and progress element
+    are all tinted hotpink.",
+    width="800", height="548"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demo</a>
+  </figcaption>
+</figure>
+
+The `accent-color` property also works with
+[`color-scheme`](/color-scheme/), allowing authors to tint both
+the light and dark elements.
+In the following example the user has a dark theme active, the page uses
+`color-scheme: light dark`, and uses the same `accent-color: hotpink` for dark
+themed hotpink tinted controls.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3gxeeZoSLY34tsMxkyt9.png",
+    alt="A dark theme screenshot of an accent-color demo where
+    checkbox, radio buttons, a range slider and progress element
+    are all tinted hotpink.",
+    width="800", height="548"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demo</a>
+  </figcaption>
+</figure>
+
+## Supported elements
+
+Currently, only four elements will tint via the `accent-color` property:
+[checkbox](#checkbox), [radio](#radio), [range](#range) and
+[progress](#progress). Each can be previewed here
+[https://accent-color.glitch.me](https://accent-color.glitch.me) in light and
+dark color schemes.
+
+{% Aside "warning" %}
+If the following demo elements are all the same color,
+then your browser doesn't support `accent-color` yet.
+{% endAside %}
+
+### Checkbox
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyWjGqZ'
+} %}
+
+### Radio
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNjKrgB'
+} %}
+
+### Range
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLbqeRy'
+} %}
+
+### Progress
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNmrxqL'
+} %}
+
+## Guaranteeing contrast
+
+To prevent inaccessible elements from existing, browsers with `accent-color`
+need to determine an [eligible contrast
+color](https://webaim.org/articles/contrast/) to be used alongside the custom
+accent. Below is a screenshot demonstrating how Chrome 94 (left) and Firefox 92
+Nightly (right) differ in their algorithms:
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DJhB56n10Eh8O29RsRdE.png",
+   alt="A screenshot of Firefox and Chromium side by side,
+  rendering a full spectrum of checkboxes in various hues and darknesses.",
+  width="800", height="832"
+%}
+
+The most important thing to take away from this, is to **trust the browser**.
+Provide a brand color, and trust that it will make smart decisions for you.
+
+{% Aside %}
+The browser will not change your color in a dark theme.
+{% endAside %}
+
+## Extra: More tinting
+
+You may be wondering how to tint more than these four form elements? Here's a
+minimal sandbox which tints:
+- the focus ring
+- text selection highlights
+- list [markers](/css-marker-pseudo-element/)
+- arrow indicators (Webkit only)
+- scrollbar thumb (Firefox only)
+
+```css
+html {
+  --brand: hotpink;
+  scrollbar-color: hotpink Canvas;
+}
+
+:root { accent-color: var(--brand); }
+:focus-visible { outline-color: var(--brand); }
+::selection { background-color: var(--brand); }
+::marker { color: var(--brand); }
+
+:is(
+  ::-webkit-calendar-picker-indicator,
+  ::-webkit-clear-button,
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button
+) {
+  color: var(--brand);
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwVBreJ'
+} %}
+
+### Potential future
+
+The spec does not limit the application of `accent-color` to the four elements
+shown in this article, more support could be added later. Elements like the
+selected `<option>` in a `<select>` could be highlighted with the
+`accent-color`.
+
+What else do you like to tint on the web? Tweet
+[@argyleink](https://twitter.com/argyleink) with your selector and it might get
+added to this article!
diff --git a/src/site/content/en/blog/accessibility-week-2022/index.md b/src/site/content/en/blog/accessibility-week-2022/index.md
new file mode 100644
index 00000000000..5fd3082b339
--- /dev/null
+++ b/src/site/content/en/blog/accessibility-week-2022/index.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Accessibility Week
+subhead: >
+  Our week celebrating accessibility resources
+description: >
+  This week we celebrated accessibility work and highlighted
+  resources to help you make your sites and applications
+  usable by everyone.
+date: 2022-11-18
+authors:
+  - alexandrawhite
+  - rachelandrew
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/F6xN4wjE6Y9vgh1m1uCi.png
+alt: 'Learn Accessibility! Community highlight.'
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/F6xN4wjE6Y9vgh1m1uCi.png
+tags:
+  - blog
+  - accessibility
+---
+
+This week we highlighted accessibility resources to help you make your sites
+and applications usable by everyone.
+
+We're continuing to roll out [Learn Accessibility](/learn/accessibility/), a
+brand new course written by [Carie Fisher](https://twitter.com/cariefisher)
+that will take you through the essentials for building accessible websites and
+web apps.
+
+We've had 3 community spotlights:
+
+* [Melanie Sumner](/community-highlight-melanie/) told us about her journey
+  into engineering, accessible design, Ember.js, and the importance of funding
+  these efforts.
+* [Olutimilehin Olushuyi](/community-highlight-shuyi/) told us about his move
+  from the law to web development, building accessible community, and creating
+  accessible layouts.
+* [Albert Kim](/community-highlight-albert-kim/) told us about mental health
+  awareness, building for invisible disabilities, the  COGA Accessibility
+  Community Group, and more practical wisdom.
+
+## Watch us answer your questions
+
+On Thursday, Alexandra White spoke with Carie Fisher and Melanie Sumner about
+accessibility, and we answered some of your questions.
+
+{% YouTube "xvGDgDRWl_E" %}
+
+Have more questions? Ask us on Twitter,
+[@ChromiumDev](https://twitter.com/chromiumdev).
+
+## More resources
+
+A solid document structure is a great start for accessible development. Find
+out how to really use HTML in  our [Learn HTML](/learn/html) course. Follow it
+up with Learn Accessibility's [Content structure module](/learn/accessibility/structure/)
+for more on semantic HTML, landmarks, and tables for accessible content.
+
+In [Testing web design color contrast](/testing-web-design-color-contrast/) get
+an overview of three tools and techniques to ensure your content is readable by
+everyone.
+
+In [Building the main navigation for a website](/website-navigation/) learn how to create accessible navigation using semantic HTML.
+
+## On the web
+
+* The W3C hosts a collection of [courses, training, and certification on digital accessibility](https://www.w3.org/WAI/courses/list/) from different providers.
+* Read [Accessibility articles on Smashing Magazine](https://www.smashingmagazine.com/category/accessibility/), including [&lt;article> vs. &lt;section>: How To Choose The Right One](https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/) by Olushuyi Olutimilehin.
+* If you're making a case for accessibility work at your company, check out Melanie Sumner's [pleasefunda11y.com](https://pleasefunda11y.com/).
+* If you want to support the Cognitive and Learning Disabilities Accessibility Task Force, join the [COGA Accessibility Community Group](https://www.w3.org/community/coga-community/). This group supplies user needs and feedback to the COGA Task Force.
diff --git a/src/site/content/en/blog/accessibility/index.md b/src/site/content/en/blog/accessibility/index.md
new file mode 100644
index 00000000000..8bbe4633ec1
--- /dev/null
+++ b/src/site/content/en/blog/accessibility/index.md
@@ -0,0 +1,377 @@
+---
+title: Accessibility
+subhead: Improving accessibility for web pages
+date: 2016-06-26
+updated: 2019-06-08
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+  - robdodson
+description: Improving accessibility for web pages
+tags:
+  - blog
+---
+
+This document set is a text-based version of part of the content covered in the
+[Udacity course on
+Accessibility](https://www.udacity.com/course/web-accessibility--ud891).
+Rather than a direct transcription of the video course, it is meant to be a more
+concise treatment of accessibility principles and practices, using the course's
+original content as a base.
+
+## Summary
+
+- Learn what accessibility means and how it applies to web development.
+- Learn how to make websites accessible and usable for everyone.
+- Learn how to include basic accessibility with minimal development impact.
+- Learn what HTML features are available and how to use them to improve
+  accessibility.
+- Learn about advanced accessibility techniques for creating polished
+  accessibility experiences.
+
+
+Understanding accessibility, its scope, and its impact can make you a better web
+developer. This guide is intended to help you understand how you can make your
+websites accessible and usable for everyone.
+
+"Accessibility" can be difficult to spell, but it doesn't have to be difficult
+to accomplish. In this guide, you will see how to get some easy wins to help
+improve accessibility with minimal effort, how you can use what's built in to
+HTML to create more accessible and robust interfaces, and how to leverage some
+advanced techniques for creating polished accessible experiences.
+
+You'll also find that many of these techniques will help you create interfaces
+that are more pleasant and easy to use for *all* users, not just for those with
+disabilities.
+
+Of course, many developers have only a hazy understanding of what accessibility
+means - something to do with government contracts, checklists, and screen
+readers, right? - and there are plenty of misconceptions floating around.
+For example, many developers feel that addressing accessibility will force them
+to choose between creating a delightful and attractive experience, and one that
+is clunky and ugly but accessible.
+
+That is, of course, not the case at all, so let's clear that up before we get
+into anything else. What do we mean by accessibility, and what are we here to
+learn about?
+
+## What is accessibility?
+Broadly speaking, when we say a site is accessible, we mean that the site's
+content is available, and its functionality can be operated, by literally
+*anyone*. As developers, it's easy to assume that all users can see and use a
+keyboard, mouse, or touch screen, and can interact with your page content the
+same way you do. This can lead to an experience that works well for some people,
+but creates issues that range from simple annoyances to show-stoppers for
+others.
+
+Accessibility, then, refers to the experience of users who might be outside the
+narrow range of the "typical" user, who might access or interact with things
+differently than you expect. Specifically, it concerns users who are
+experiencing some type of impairment or disability - and bear in mind that
+that experience might be non-physical or temporary.
+
+For example, although we tend to center our discussion of accessibility on users
+with physical impairments, we can all relate to the experience of using an
+interface that is not accessible to us for other reasons. Have you ever had a
+problem using a desktop site on a mobile phone, or seen the message "This
+content is not available in your area", or been unable to find a familiar menu
+on a tablet? Those are all accessibility issues.
+
+As you learn more, you'll find that addressing accessibility issues in this
+broader, more general sense almost always improves the user experience for
+everyone. Let's look at an example:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hcBkdjssb6gqRgOyjpzm.jpg", alt="A form with poor accessibility.", width="575", height="308" %}
+</figure>
+
+This form has several accessibility issues.
+
+ - The text is low contrast, which is hard for low-vision users to read.
+ - Having labels on the left and fields on the right makes it hard for many
+   people to associate them, and almost impossible for someone who needs to zoom
+   in to use the page; imagine looking at this on a phone and having to pan
+   around to figure out what goes with what.
+ - The "Remember details?" label isn't associated with the checkbox, so you have
+   to tap or click only on the tiny square rather than just clicking the label;
+   also, someone using a screen reader would have trouble figuring out the
+   association.
+
+Now let's wave our accessibility wand and see the form with those issues fixed.
+We're going to make the text darker, modify the design so that the labels are
+close to the things they're labeling, and fix the label to be associated with
+the checkbox so you can toggle it by clicking the label as well.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/degxEapMFe6T27SWUZOf.jpg", alt="A form with improved accessibility.", width="575", height="319" %}
+</figure>
+
+Which would you rather use? If you said "the accessible version", you're on your
+way to understanding a main premise of this guide. Often, something that's a
+complete blocker for a few users is also a pain point for many others, so by
+fixing the accessibility issue you improve the experience for everyone.
+
+## Web Content Accessibility Guidelines
+
+Throughout this guide we'll refer to the [Web Content Accessibility Guidelines
+(WCAG) 2.0](https://www.w3.org/TR/WCAG20/), a set of guidelines
+and best practices put together by accessibility experts to address what
+"accessibility" means in a methodical way.
+
+WCAG is organized around four principles often called by the acronym *POUR*:
+
+ - **Perceivable**: Can users perceive the content? This helps us keep in mind
+   that just because something is perceivable with one sense, such as sight,
+   that doesn't mean that all users can perceive it.
+
+ - **Operable**: Can users use UI components and navigate the content? For
+   example, something that requires a hover interaction cannot be operated by
+   someone who can't use a mouse or touch screen.
+
+ - **Understandable**: Can users understand the content? Can users understand
+   the interface and is it consistent enough to avoid confusion?
+
+ - **Robust**: Can the content be consumed by a wide variety of user agents
+   (browsers)? Does it work with assistive technology?
+
+While WCAG provides a comprehensive overview of what it means for content to be
+accessible, it can also be a bit overwhelming. To help mitigate this, the
+[WebAIM](https://webaim.org/)(Web Accessibility in Mind) group has
+distilled the WCAG guidelines into an easy-to-follow checklist, targeted
+specifically for web content.
+
+The [WebAIM checklist](https://webaim.org/standards/wcag/checklist)
+can give you a short, high-level summary of what you need to implement, while
+also linking to the underlying WCAG specification if you need an expanded
+definition.
+
+With this tool in hand, you can chart a direction for your accessibility work
+and be confident that, as long as your project meets the outlined criteria, your
+users should have a positive experience accessing your content.
+
+## Understanding users' diversity
+
+When learning about accessibility, it helps to have an understanding of the
+diverse range of users in the world and the kinds of accessibility topics that
+affect them. To explain further, here's an informative question/answer session
+with Victor Tsaran, a Technical Program Manager at Google, who is totally blind.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EddhO9hBAtpLUVeWXnjA.jpg", alt="Victor Tsaran.", width="250", height="250" %}
+  <figcaption>Victor Tsaran</figcaption>
+</figure>
+
+<hr>
+
+> *What do you work on at Google?*
+
+Here at Google my job is to help ensure that our products work for all of our
+diverse users, regardless of impairment or ability.
+
+> *What kinds of impairments do users have?*
+
+When we think about the kinds of impairments which would make it difficult for
+someone to access our content, many people will immediately picture a blind user
+like me. And it's true, this impairment can really make it frustrating or even
+impossible to use a lot of web sites.
+
+A lot of modern web techniques have the unfortunate side effect of creating
+sites which don't work well with the tools used by blind users to access the
+web. However, there is actually more to accessibility than that. We find it
+useful think of impairments falling into four broad buckets: visual, motor,
+hearing, and cognitive.
+
+> *Let's go through those one at a time. Can you give some examples of visual impairments?*
+
+Visual impairments can be split into a few categories: Users with no vision,
+like me, might use a screen reader, braille, or combination of the two.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/C59Cjp5DEIjceMA49Y5g.png", alt="A braille reader.", width="475", height="297" %}
+  <figcaption>A braille reader</figcaption>
+</figure>
+
+Now, it's actually pretty unusual to have literally no vision, but still,
+there's a good chance you know or have met at least one person who can't see at
+all. However there are also a much larger number of what we call low-vision
+users.
+
+This is a broad range, from someone like my wife, who doesn't have any corneas - so while she can basically see things she has a hard time reading print
+and is considered legally blind - to someone who might have just poor
+vision and needs to wear very strong prescription glasses.
+
+There's a huge range, and so naturally there's a big range of accommodations
+that people in this category use: some do use a screen reader or a braille
+display (I've even heard of one woman who reads braille displayed on-screen
+because it's easier to see than printed text), or they might use text-to-speech
+technology without the full screen reader functionality, or they might use a
+screen magnifier which zooms in on part of the screen, or they might just use
+their browser zoom to make all the fonts bigger. They might also use
+high-contrast options like an operating system high-contrast mode, a
+high-contrast browser extension or a high-contrast theme for a website.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WG5G5cWGZXAjpriWuIHt.png", alt="High-contrast mode.", width="475", height="297" %}
+  <figcaption>High-contrast mode</figcaption>
+</figure>
+
+A lot of users even use a combination of these, like my friend Laura who uses a
+combination of high-contrast mode, browser zoom and text-to-speech.
+
+Low vision is something a lot of people can relate to. For a start, we all
+experience deteriorating vision as we age, so even if you haven't experienced it
+there's a good chance you've heard your parents complain about it. But a lot of
+people experience the frustration of taking their laptop out by a sunny window
+only to find they suddenly can't read anything! Or anyone who's had laser
+surgery or maybe just has to read something from across the room might have used
+one of those accommodations I mentioned. So I think it's pretty easy for
+developers to have some empathy for low-vision users.
+
+Oh, and I shouldn't forget to mention people with poor color vision -
+about 9% of males have some form of color vision deficiency! Plus about 1% of
+females. They may have trouble distinguishing red and green, or yellow and blue.
+Think about that the next time you design form validation.
+
+> *What about motor impairments?*
+
+Yes, motor impairments, or dexterity impairments. This group ranges all the way
+from those who would prefer not to use a mouse, because perhaps they've had some
+RSI or something and find it painful, to someone who may be physically paralyzed
+and have limited range of motion for certain parts of their body.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BLk6WCwCOprDmAoTky4F.png", alt="A person using an eye tracking device.", width="475", height="297" %}
+  <figcaption>An eye tracking device</figcaption>
+</figure>
+
+Motor impaired users may use a keyboard, switch device, voice control, or even
+an eye-tracking device to interact with their computer.
+
+Similar to vision impairments, mobility can also be a temporary or situational
+issue: Maybe you have a broken wrist on your mouse hand. Maybe the trackpad is
+broken on your laptop, or you're just riding on a shaky train. There can be a
+lot of situations where a user's mobility is impeded, and by making sure we
+cater for them we improve the experience overall, both for anyone with a
+permanent impairment but also for anyone who temporarily finds that they can't
+use a pointer-based UI.
+
+> *Great, let's talk about hearing impairments.*
+
+This group can range from the profoundly deaf through to hard-of-hearing. And
+much like eyesight, our hearing tends to degrade with age. Many of us use common
+affordances like hearing aids to help us.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vci6EjBFLKfUPrifdIKh.png", alt="A television with captions at the bottom.", width="475", height="297" %}
+  <figcaption>Screen captions</figcaption>
+</figure>
+
+For hearing-impaired users we need to make sure that we're not relying on
+sound, so making sure to use things like video captions and transcripts, and
+providing some kind of alternative, if sound is part of the interface.
+
+And like we saw with vision and motor impairments, it's really easy to imagine
+a situation where someone whose ears work fine would benefit from these
+accommodations as well. A lot of my friends say they love it when videos have
+captions and transcripts because it means that if they're in an open plan office
+and didn't bring their headphones, they can still watch the video!
+
+> *All right, can you tell us a bit about cognitive impairments?*
+
+There's a range of cognitive conditions like ADD, Dyslexia, and Autism,
+which can mean that people want or need to access things differently. The
+accommodations for these groups are naturally extremely diverse, but we
+definitely find some overlap with other areas, like using zoom functionality to
+make reading or concentrating easier. Also, these users may find that really
+minimal design works best because it minimizes distraction and cognitive load.
+
+I think everyone can relate to the stress of cognitive overload, so it's
+obvious that if we create something that works well for someone with a cognitive
+impairment, we're going to be creating something which is going to be a pleasant
+experience for everyone.
+
+So, how would you summarize how you think about accessibility?
+
+When you look at the broad range of abilities and disabilities that people
+might have, you can see that designing and building products only for people who
+have perfect vision, hearing, dexterity, and cognition seems incredibly narrow.
+It's almost self-defeating, because we're creating a more stressful and less
+usable experience for everyone, and for some users creating an experience which
+actually excludes them altogether.
+
+
+In this interview, Victor identified a range of impairments, and placed them
+into four broad categories: *visual*, *motor*, *hearing*, and *cognitive*. He
+also pointed out that each type of impairment might be *situational*,
+*temporary*, or *permanent*.
+
+Let's take a look at some real-world examples of access impairments and see
+where they fall within those categories and types. Note that some impairments
+may fall into more than one category or type.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Situational</th>
+    <th>Temporary</th>
+    <th>Permanent</th>
+  </tr>
+  <tr>
+    <th>Visual</th>
+    <td></td>
+    <td>concussion</td>
+    <td>blindness</td>
+  </tr>
+  <tr>
+    <th>Motor</th>
+    <td>holding a baby</td>
+    <td>broken arm, RSI*</td>
+    <td>RSI*</td>
+  </tr>
+  <tr>
+    <th>Hearing</th>
+    <td>noisy office</td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <th>Cognitive</th>
+    <td></td>
+    <td>concussion</td>
+    <td></td>
+  </tr>
+</table>
+
+Repetitive Strain Injury: e.g., carpal tunnel syndrome, tennis elbow, trigger
+finger
+
+## Next steps
+
+We've covered quite a bit of ground already! You have read about
+
+ - what accessibility is and why it matters for everyone
+ - the WCAG and the WebAIM accessibility checklist
+ - different types of impairments you should consider
+
+For the rest of the guide, we'll dive into the practical aspects of creating
+accessible web sites. We'll organize this effort around three main subject
+areas:
+
+ - [**Focus**](/focus/): We'll look at how to
+   build things that can be operated with a keyboard instead of a mouse. This is
+   important for users with motor impairments, of course, but it also ensures
+   that your UI is in good shape for all users.
+
+ - [**Semantics**](/semantics-builtin/): We'll
+   make sure that we express our user interface in a robust way that works with
+   a variety of assistive technologies.
+
+ - [**Styling**](/accessible/#create-a-design-and-css-that-supports-users-with-different-needs): We'll consider visual
+   design and look at some techniques for making the visual elements of the
+   interface as flexible and usable as possible.
+
+Each of those subjects could fill a whole course, so we won't cover every aspect
+of creating accessible web sites. However, we'll give you enough information to
+get started, and point you to some good places where you can learn more about
+each topic.
diff --git a/src/site/content/en/blog/adapting-typography-to-user-preferences-with-css/index.md b/src/site/content/en/blog/adapting-typography-to-user-preferences-with-css/index.md
new file mode 100644
index 00000000000..d565c603d13
--- /dev/null
+++ b/src/site/content/en/blog/adapting-typography-to-user-preferences-with-css/index.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: Adapting typography to user preferences with CSS
+subhead: A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.
+authors:
+  - adamargyle
+description: A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.
+date: 2023-07-27
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/JQ2Vv49WINKpelsnpIZJ.png
+thumbthumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/MIeIToUHSwhwTfrmqJbL.png
+alt: Three font weights are shown for a headline and paragraph across two color schemes, each labeled above them with the user preference.
+tags:
+  - blog
+  - css
+  - typography
+---
+
+Bringing the user into the design process has been an exciting time for users,
+designers and developers. Users can land on your experience and seamlessly begin
+consuming content, their preferences richly integrated into the design result.
+
+This blog post explores using CSS media queries with a variable font to tailor
+the reading experience even further. Font grade and weight can be customized
+with `font-variation-settings`, allowing microtuning given various preferences
+and contexts, like a preference for dark mode or high contrast. We can take
+these preferences and tailor a variable font for that user experience.
+
+- Dark mode gets a slightly reduced gradation.
+- High contrast gets a bolder font.
+- Low contrast gets a thinner font.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/cgGryLwncKVnBUQ8iQOF.mp4",
+    autoplay="true",
+    controls="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/argyleink/pen/mdQrqvj">https://codepen.io/argyleink/pen/mdQrqvj</a>
+  </figcaption>
+</figure>
+
+Follow along to understand each portion of the CSS and variable font that enable
+this meaningful moment!
+
+## Getting setup
+
+To help focus on the CSS and font variation setting values, but also give us
+something to read and see, here's the markup you can use to preview the work:
+
+```html
+<h1>Variable font weight based on contrast preference</h1>
+
+<p>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
+  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
+  labore aliquid ex, dicta corporis.
+</p>
+```
+
+Without adding any CSS, the font size is already adaptive to user preferences.
+Here's a video from another demo showing how setting `font-size` in pixels will
+squash any user preferences, and why you should set your font size in rems:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/8mxSKsYmv6K7zoqDor0F.mp4",
+  autoplay="true",
+  controls="true",
+  loop="true",
+  muted="true"
+%}
+
+Lastly, to center and support the demo, a little CSS:
+
+```css
+@layer demo.support {
+  body {
+    display: grid;
+    place-content: center;
+    padding: var(--size-5);
+    gap: var(--size-5);
+  }
+
+  h1 {
+    text-wrap: balance;
+  }
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png", alt="A
+screenshot preview of the demo so far, in both dark and light themes.",
+width="800", height="327" %}
+
+This demo setup lets you begin testing and implementing this neat typography UX
+feature.
+
+## Loading the Roboto Flex variable font
+
+The adaptive strategy depends on a variable font with meaningful axes for
+customization, specifically you need `GRAD` and `wght`. The target adaptive user
+preferences in this article are for color scheme and contrast, both of which
+will tailor these axes to match the user's desired preference.
+
+{% Aside %}
+A variable font is not required to achieve this user experience that matches
+preferences, however, using one achieves the effect without loading multiple
+weights or versions of a font. See [this demo](https://codepen.io/web-dot-dev/pen/zYMmevQ)
+for an example of this UX without a dependency on a variable font.
+{% endAside %}
+
+Load the variable font using the `@font-face` API of CSS:
+
+```css
+@font-face {
+  font-family: "Roboto Flex";
+  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
+}
+```
+
+Next, apply the font to some content. The following CSS applies it to
+everything:
+
+```css
+@layer demo.support {
+  body {
+    font-family: Roboto Flex;
+  }
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png", alt="A
+screenshot preview of the demo so far, with the font now in Roboto Flex in both
+dark and light themes.", width="800", height="327" %}
+
+## CSS custom properties and media queries for the win
+
+With the font loaded, you can query for user preferences and adapt the variable
+font settings to match.
+
+{% Aside %}
+If you need a review on some of these styles, check out the [Learn CSS](/learn/css/)
+module on [media queries](/learn/design/media-queries/) or this post on
+[building an adaptive color scheme with custom properties](/building-a-color-scheme/).
+{% endAside %}
+
+### Settings when there's no preferences (default)
+
+The following initial styles will be the default styles, or another way to look
+at it, the styles for users without any preferences.
+
+```css
+@layer demo {
+  body {
+    --base-weight: 400;
+    --base-grade: 0;
+
+    font-variation-settings:
+      "wght" var(--base-weight),
+      "GRAD" var(--base-grade)
+    ;
+  }
+}
+```
+
+### Settings when the preference is for high contrast
+
+For users who have indicated a preference for high contrast in their system
+settings, increase the `--base-weight` value from `400` to `700`:
+
+```css
+@layer demo {
+  @media (prefers-contrast: more) {
+    body {
+      --base-weight: 700;
+    }
+  }
+}
+```
+
+Now there's more contrast while reading.
+
+### Settings when the preference is for low contrast
+
+For users who have indicated a preference for low contrast in their system
+settings, decrease the `--base-weight` value from `400` to `200`:
+
+```css
+@layer demo {
+  @media (prefers-contrast: less) {
+    body {
+      --base-weight: 200;
+    }
+  }
+}
+```
+
+Now there's less contrast while reading.
+
+### Settings when the preference is for dark mode
+
+```css
+@layer demo {
+  @media (prefers-color-scheme: dark) {
+    body {
+      --base-grade: -25;
+    }
+  }
+}
+```
+
+Now the perceptual differences of light on dark vs dark on light have been
+accounted for.
+
+### All together now
+
+```css
+@layer demo {
+  body {
+    --base-weight: 400;
+    --base-grade: 0;
+
+    font-variation-settings:
+      "wght" var(--base-weight),
+      "GRAD" var(--base-grade)
+    ;
+  }
+
+  @media (prefers-contrast: more) {
+    body {
+      --base-weight: 700;
+    }
+  }
+
+  @media (prefers-contrast: less) {
+    body {
+      --base-weight: 200;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    body {
+      --base-grade: -25;
+    }
+  }
+}
+```
+
+Or, for fun, all together with [CSS nesting](https://developer.chrome.com/articles/css-nesting/):
+
+```css
+@layer demo {
+  body {
+    --base-weight: 400;
+    --base-grade: 0;
+
+    font-variation-settings:
+      "wght" var(--base-weight),
+      "GRAD" var(--base-grade)
+    ;
+
+    @media (prefers-contrast: more)     { --base-weight: 700 }
+    @media (prefers-contrast: less)     { --base-weight: 200 }
+    @media (prefers-color-scheme: dark) { --base-grade: -25 }
+  }
+}
+```
+
+The result is a reading experience that adapts the font to match the user's
+preferences. Full source code is available below in the Codepen.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNQZMzo'
+} %}
diff --git a/src/site/content/en/blog/adaptive-loading-cds-2019/adaptive-code-splitting.png b/src/site/content/en/blog/adaptive-loading-cds-2019/adaptive-code-splitting.png
deleted file mode 100644
index e63282bc73d..00000000000
Binary files a/src/site/content/en/blog/adaptive-loading-cds-2019/adaptive-code-splitting.png and /dev/null differ
diff --git a/src/site/content/en/blog/adaptive-loading-cds-2019/hero.png b/src/site/content/en/blog/adaptive-loading-cds-2019/hero.png
deleted file mode 100644
index 0c7a88ae26e..00000000000
Binary files a/src/site/content/en/blog/adaptive-loading-cds-2019/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/adaptive-loading-cds-2019/index.md b/src/site/content/en/blog/adaptive-loading-cds-2019/index.md
index d470036e9f7..256d62f1063 100755
--- a/src/site/content/en/blog/adaptive-loading-cds-2019/index.md
+++ b/src/site/content/en/blog/adaptive-loading-cds-2019/index.md
@@ -9,11 +9,12 @@ date: 2019-12-16
 description: |
   Learn about adaptive loading pattern, how to implement it, and how Facebook, Tinder, eBay, and
   other companies use adaptive loading in production.
-hero: hero.png
-thumbnail: thumbnail.png
+hero: image/admin/KVRAyvGzRVa1vS8filbH.png
+thumbnail: image/admin/kQJs9KCpVXDSWTtmZO5g.png
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
+  - memory
 ---
 
 Device capabilities and network connections vary a lot. Sites that delight users
@@ -38,9 +39,7 @@ based on their network and hardware constraints, specifically:
 * Progressively adding high-end-only features, if a user's network and hardware
   can handle it.
 
-By optimizing for specific hardware and network constraints you enable every
-user to get the best possible experience for their device. Tailoring the
-experience to users' constraints can include:
+By optimizing for specific hardware and network constraints you enable every user to get the best possible experience for their device. Tailoring the experience to users' constraints can include:
 
 * Serving low-quality images and videos on slow networks.
 
@@ -52,27 +51,30 @@ experience to users' constraints can include:
 
 * Loading non-critical JavaScript for interactivity only on fast CPUs.
 
-## How to implement adaptive loading
+## Browser support and how to implement adaptive loading
 
-The signals you can use for adaptive loading are:
+The signals you can use for adaptive loading are listed below. Browser support is also included for each signal:
 
-* Network—for fine-tuning data transfer to use less bandwidth (via
-  [`navigator.connection.effectiveType`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType)).
-  You can also leverage the user's Data Saver preferences (via
-  [`navigator.connection.saveData`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data#detecting_the_save-data_setting)).
+### `Navigator.deviceMemory`
 
-* Memory—for reducing memory consumption on low-end devices (via
-  [`navigator.deviceMemory`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory)).
+The [`navigator.deviceMemory`](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) property is used to reduce memory consumption on low-end devices. {% BrowserCompat 'api.Navigator.deviceMemory' %}
 
-* CPU core count—for limiting costly JavaScript execution and reducing CPU
-  intensive logic when a device can't handle it well (via
-  [`navigator.hardwareConcurrency`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency)).
+### `Navigator.hardwareConcurrency`
 
+The [`navigator.hardwareConcurrency`](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency) property is the CPU core count. It is used to limit costly JavaScript execution and reduce CPU intensive logic when a device can't handle it well. {% BrowserCompat 'api.Navigator.hardwareConcurrency' %}
+
+### `NetworkInformation.effectiveType`
+
+The [`navigator.connection.effectiveType`](https://developer.mozilla.org/docs/Web/API/NetworkInformation/effectiveType) property is used to fine-tune data transfer to use less bandwidth. {% BrowserCompat 'api.NetworkInformation.effectiveType' %}
+
+### `NetworkInformation.saveData`
+
+The [`navigator.connection.saveData`](/optimizing-content-efficiency-save-data/) property is used to leverage the user's Data Saver preferences. {% BrowserCompat 'http.headers.Save-Data' %}
 
 There are two places where you can make a decision about what to serve to users:
 the client and the server. On the client, you have the JavaScript APIs noted
 above. On the server, you can use [client
-hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints)
+hints](/performance-optimizing-content-efficiency-client-hints/)
 to get insight into the user's device capabilities and the network they're
 connected to.
 
@@ -105,10 +107,10 @@ network effective type changes.
 
 React Adaptive Loading Hooks & Utilities are implemented using web platform APIs
 ([Network
-Information](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API),
-[Device Memory](https://developers.google.com/web/updates/2017/12/device-memory)
+Information](https://developer.mozilla.org/docs/Web/API/Network_Information_API),
+[Device Memory](https://developer.chrome.com/blog/device-memory/)
 and [Hardware
-Concurrency](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency)).
+Concurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency)).
 You can use the same APIs to apply adaptive loading concepts to other frameworks
 and libraries, such as
 [Angular](https://netbasal.com/connection-aware-components-in-angular-3a66bb0bab6f),
@@ -140,11 +142,11 @@ opening your DevTools **Network** panel and looking at the difference in the amo
 of data transferred as you scroll while Save Data is disabled versus when it's
 enabled.
 
-  <figure class="w-figure">
-    <video controls autoplay loop muted class="w-screenshot">
+  <figure>
+    <video controls autoplay loop muted>
       <source src="https://storage.googleapis.com/web-dev-assets/adaptive-loading-cds-2019/twitter-save-data.mp4" type="video/mp4">
     </video>
-     <figcaption class="w-figcaption">
+     <figcaption>
       A screencast comparing scrolling the Twitter timeline with Data Saver on and off. With Data Saver on, only image previews are loaded and videos don't autoplay.
     </figcaption>
   </figure>
@@ -160,9 +162,7 @@ implemented with [React.lazy() and Suspense](/code-splitting-suspense/) on a
 [demo eBay product
 page](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/react-ebay-network-aware-code-splitting).
 
-![A diagram of modules shipped for a product page on low-end and high-end
-devices: both versions include "image viewer", while the high-end version
-includes additional "zoom" and "carousel" modules.](adaptive-code-splitting.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gdXBknVxIdd8FcSvIrxw.png", alt="A diagram of modules shipped for a product page on low-end and high-end devices: both versions include \"image viewer\", while the high-end version includes additional \"zoom\" and \"carousel\" modules.", width="800", height="446" %}
 
 Tinder is using a number of adaptive loading patterns in its
 [web](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0)
@@ -173,12 +173,8 @@ and limit loading the next image in the carousel to loading images one at a time
 as users swipe. After implementing these optimizations, they've seen significant
 improvements in average swipe count in countries such as Indonesia.
 
-<figure class="w-figure">
-  <img src="tinder.png" style="max-width: 75%"
-       alt="A screenshot of two versions of Tinder chat: with autoplaying video and
-            with a video with play button overlay. A screenshot of a Tinder profile with
-            caption 'Limit carousel images on Data Saver or 3G'.
-            A code snippet for prefetching in-viewport videos only on 4G.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/N1xJkEMQ9rE513TNm8va.png", alt="A screenshot of two versions of Tinder chat: with autoplaying video and with a video with play button overlay. A screenshot of a Tinder profile with caption 'Limit carousel images on Data Saver or 3G'. A code snippet for prefetching in-viewport videos only on 4G.", width="800", height="445", style="max-width: 75%" %}
 </figure>
 
 ### Adaptive loading at Facebook
diff --git a/src/site/content/en/blog/adaptive-loading-cds-2019/thumbnail.png b/src/site/content/en/blog/adaptive-loading-cds-2019/thumbnail.png
deleted file mode 100644
index 469785f4565..00000000000
Binary files a/src/site/content/en/blog/adaptive-loading-cds-2019/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/adaptive-loading-cds-2019/tinder.png b/src/site/content/en/blog/adaptive-loading-cds-2019/tinder.png
deleted file mode 100644
index cc444345ed1..00000000000
Binary files a/src/site/content/en/blog/adaptive-loading-cds-2019/tinder.png and /dev/null differ
diff --git a/src/site/content/en/blog/add-touch-to-your-site/index.md b/src/site/content/en/blog/add-touch-to-your-site/index.md
new file mode 100644
index 00000000000..ab9bc6d2a46
--- /dev/null
+++ b/src/site/content/en/blog/add-touch-to-your-site/index.md
@@ -0,0 +1,821 @@
+---
+title: Add touch to your site
+subhead: |
+  Touchscreens are available on more and more devices,  from phones up to desktop screens. Your app should respond to their touch  in intuitive and beautiful ways.
+date: 2014-01-01
+updated: 2018-09-20
+authors:
+  - mattgaunt
+description: |
+  Touchscreens are available on more and more devices,  from phones up to desktop screens. Your app should respond to their touch  in intuitive and beautiful ways.
+tags:
+  - blog
+---
+
+{% YouTube id="Rwc4fHUnGuU" %}
+
+Touchscreens are available on more and more devices, ranging from phones to
+desktop screens. When your users choose to interact with your UI, your app
+should respond to their touch in intuitive ways.
+
+## Respond to element states
+
+Have you ever touched or clicked an element on a web page and questioned
+whether the site actually detected it?
+
+Simply altering the color of an element as users touch or interact with parts
+of your UI gives a basic reassurance that your site is working. Not only does
+this alleviate frustration, it can also give a snappy and responsive feel.
+
+DOM elements can inherit any of the following states: default, focus, hover
+and active. To change our UI for each of these states, we need to apply styles
+to the following pseudo classes `:hover`, `:focus` and `:active` as shown below:
+
+```css
+.btn {
+  background-color: #4285f4;
+}
+
+.btn:hover {
+  background-color: #296cdb;
+}
+
+.btn:focus {
+  background-color: #0f52c1;
+
+  /* The outline parameter suppresses the border
+  color / outline when focused */
+  outline: 0;
+}
+
+.btn:active {
+  background-color: #0039a8;
+}
+
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/states-example.html)
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BoIVrO4Nh0MdDMHofs6q.png", alt="Image illustrating different colors for button
+states", width="500", height="300" %}
+</figure>
+
+On most mobile browsers *hover* and/or *focus* states will apply to an element
+after it's been tapped.
+
+Consider carefully what styles you set and how they will look to the user after
+they finish their touch.
+
+{% Aside %}
+Anchor tags and buttons may have different behavior
+in different browsers, so assume in some cases **hover**
+will remain and in others **focus** will remain.
+{% endAside %}
+
+### Suppressing default browser styles
+
+Once you add styles for the different states, you'll notice that most browsers
+implement their own styles in response to a user’s touch. This is largely
+because when mobile devices first launched, a number of sites didn’t
+have styling for the `:active` state. As a result, many browsers added
+additional highlight color or style to give the user feedback.
+
+Most browsers use the `outline` CSS property to display a ring around an
+element when an element is focused. You can suppress it with:
+
+```css
+.btn:focus {
+    outline: 0;
+
+    /* Add replacement focus styling here (i.e. border) */
+}
+```
+
+Safari and Chrome add a tap highlight color which can be prevented with the
+`-webkit-tap-highlight-color` CSS property:
+
+```css
+/* Webkit / Chrome Specific CSS to remove tap
+highlight color */
+.btn {
+  -webkit-tap-highlight-color: transparent;
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/states-example.html)
+
+Internet Explorer on Windows Phone has a similar behavior, but is suppressed
+via a meta tag:
+
+```html
+<meta name="msapplication-tap-highlight" content="no">
+```
+
+Firefox has two side effects to handle.
+
+The `-moz-focus-inner` pseudo class, which adds an outline on
+touchable elements, you can remove by setting `border: 0`.
+
+If you are using a `<button>` element on Firefox, you get a gradient
+applied, which you can remove by setting `background-image: none`.
+
+```css
+/* Firefox Specific CSS to remove button
+differences and focus ring */
+.btn {
+  background-image: none;
+}
+
+.btn::-moz-focus-inner {
+  border: 0;
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/states-example.html)
+
+{% Aside 'caution' %}
+Only suppress the default styles mentioned above if you have pseudo
+classes for `:hover`, `:active` and `:focus`!
+{% endAside %}
+
+### Disabling user-select
+
+When you're creating your UI there may be scenarios where you want users
+to interact with your elements but you want to suppress the default behavior
+of selecting text on long press or dragging a mouse over your UI.
+
+You can do this with the `user-select` CSS property, but beware that
+doing this on content can be **extremely** infuriating
+for users if they *want* to select the text in the element.
+So make sure you use it with caution and sparingly.
+
+```css
+/* Example: Disable selecting text on a paragraph element: */
+p.disable-text-selection {
+  user-select: none;
+}
+```
+
+## Implement custom gestures
+
+If you have an idea for custom interactions and gestures for your site, there
+are two topics to keep in mind:
+
+1. How to support all browsers.
+1. How to keep your frame rate high.
+
+In this article, we'll look at exactly these topics covering the API's we need
+to support to hit all browsers and then cover how we use these events
+efficiently.
+
+Depending on what you would like your gesture to do, you likely want the
+user to interact with one element at a time *or* you'll want them to be able
+to interact with multiple elements at the same time.
+
+{% Aside 'caution' %}
+Don't forget that some users will want keyboard input and users
+running assistive technology on a touchscreen device may not be able to
+perform gestures because they're intercepted / consumed by the assistive
+technology.
+{% endAside %}
+
+We are going to look at two examples in this article, both demonstrating
+support for all browsers and how to keep the frame rate high.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ebgKNdiNNFkqDFg03VFl.gif", alt="Example GIF of touch on document", width="282", height="500" %}
+</figure>
+
+The first example will allow the user to interact with one element. In this
+case you might want all touch events to be given to that one element, as long
+as the gesture initially started on the element itself. For example, moving a
+finger off the swipe-able element can still control the element.
+
+This is useful as it provides a great deal of flexibility for the user, but
+enforces a restriction on how the user can interact with your UI.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nuyIBu5bPy7ihWIOgDkY.gif", alt="Example GIF of touch on element", width="282", height="500" %}
+</figure>
+
+If, however, you expect users to interact with multiple elements at the same
+time (using multi-touch), you should restrict the touch to the specific
+element.
+
+This is more flexible for users, but complicates the logic for manipulating
+the UI and is less resilient to user error.
+
+### Add event listeners
+
+In Chrome (version 55 and later), Internet Explorer & Edge,
+`PointerEvents` are the recommended approach for implementing custom gestures.
+
+In other browsers `TouchEvents` and `MouseEvents` are the correct approach.
+
+The great feature of `PointerEvents` is that it merges multiple types of input,
+including mouse, touch and pen events, into one set of
+callbacks. The events to listen for are `pointerdown`, `pointermove`,
+`pointerup` and `pointercancel`.
+
+The equivalents in other browsers are `touchstart`, `touchmove`,
+`touchend` and `touchcancel` for touch events and if you wanted to implement
+the same gesture for mouse input you'd need to implement `mousedown`,
+`mousemove`, and `mouseup`.
+
+If you have questions about which events to use, check out this table of
+[Touch, mouse and pointer events](#touch-mouse-and-pointer-events)).
+
+Using these events requires calling the `addEventListener()` method on a DOM
+element, along with the name of an event, a callback function and a boolean.
+The boolean determines whether you should catch the event before or after
+other elements have had the opportunity to catch and interpret the
+events. (`true` means you want the event before other elements.)
+
+Here's an example of listening for the start of an interaction.
+
+```js
+// Check if pointer events are supported.
+if (window.PointerEvent) {
+  // Add Pointer Event Listener
+  swipeFrontElement.addEventListener('pointerdown', this.handleGestureStart, true);
+  swipeFrontElement.addEventListener('pointermove', this.handleGestureMove, true);
+  swipeFrontElement.addEventListener('pointerup', this.handleGestureEnd, true);
+  swipeFrontElement.addEventListener('pointercancel', this.handleGestureEnd, true);
+} else {
+  // Add Touch Listener
+  swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
+  swipeFrontElement.addEventListener('touchmove', this.handleGestureMove, true);
+  swipeFrontElement.addEventListener('touchend', this.handleGestureEnd, true);
+  swipeFrontElement.addEventListener('touchcancel', this.handleGestureEnd, true);
+
+  // Add Mouse Listener
+  swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/touch-demo-1.html)
+
+{% Aside %}
+Because of the design of the API, PointerEvents only need a single
+`pointerdown` event to handle both mouse and touch events.
+{% endAside %}
+
+#### Handle single-element interaction
+
+In the short snippet of code above we only added the starting event listener
+for mouse events. The reason for this is that mouse events will only trigger
+when the cursor is hovering *over* the element the event listener is added to.
+
+`TouchEvents` will track a gesture after it's started regardless of where the
+touch occurs and `PointerEvents` will track events regardless of where the touch
+occurs after we call `setPointerCapture` on a DOM element.
+
+For mouse move and end events we add the event listeners *in* the
+gesture start method and add the listeners to the document, meaning it can
+track the cursor until the gesture is complete.
+
+The steps taken to implement this are:
+
+1. Add all TouchEvent and PointerEvent listeners. For MouseEvents add **only**
+   the start event.
+1. Inside the start gesture callback, bind the mouse move and end events to
+   the document. This way all mouse events are received regardless of whether
+   the event occurs on the original element or not. For PointerEvents we
+   need to call `setPointerCapture()` on our original element to receive
+   all further events. Then handle the start of the gesture.
+1. Handle the move events.
+1. On the end event, remove the mouse move and end listeners from the document
+   and end the gesture.
+
+Below is a snippet of our `handleGestureStart()` method which adds the move
+and end events to the document:
+
+```js
+// Handle the start of gestures
+this.handleGestureStart = function(evt) {
+  evt.preventDefault();
+
+  if(evt.touches && evt.touches.length > 1) {
+    return;
+  }
+
+  // Add the move and end listeners
+  if (window.PointerEvent) {
+    evt.target.setPointerCapture(evt.pointerId);
+  } else {
+    // Add Mouse Listeners
+    document.addEventListener('mousemove', this.handleGestureMove, true);
+    document.addEventListener('mouseup', this.handleGestureEnd, true);
+  }
+
+  initialTouchPos = getGesturePointFromEvent(evt);
+
+  swipeFrontElement.style.transition = 'initial';
+}.bind(this);
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/touch-demo-1.html)
+
+The end callback we add is `handleGestureEnd()`, which removes the move
+and end event listeners from the document and releases the pointer capture
+when the gesture has finished like so:
+
+```js
+// Handle end gestures
+this.handleGestureEnd = function(evt) {
+  evt.preventDefault();
+
+  if (evt.touches && evt.touches.length > 0) {
+    return;
+  }
+
+  rafPending = false;
+
+  // Remove Event Listeners
+  if (window.PointerEvent) {
+    evt.target.releasePointerCapture(evt.pointerId);
+  } else {
+    // Remove Mouse Listeners
+    document.removeEventListener('mousemove', this.handleGestureMove, true);
+    document.removeEventListener('mouseup', this.handleGestureEnd, true);
+  }
+
+  updateSwipeRestPosition();
+
+  initialTouchPos = null;
+}.bind(this);
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/touch-demo-1.html)
+
+By following this pattern of adding the move event to the document, if the
+user starts interacting with an element and moves their gesture outside of
+the element, we'll continue to get mouse movements regardless of where they
+are on the page, because the events are being received from the document.
+
+This diagram shows what the touch events are doing as we add the
+move and end events to the document once a gesture begins.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uJFeeOLZfIarpdQ0Orz3.gif", alt="Illustrating binding touch events to document in
+`touchstart`", width="282", height="500" %}
+</figure>
+
+### Responding to touch efficiently
+
+Now that we have the start and end events taken care of we can actually
+respond to the touch events.
+
+For any of the start and move events, you can easily extract `x` and `y`
+from an event.
+
+The following example checks whether the event is from a `TouchEvent` by
+checking if `targetTouches` exists. If it does, then it extracts the
+`clientX` and `clientY` from the first touch.
+If the event is a `PointerEvent` or `MouseEvent` it extracts `clientX` and
+`clientY` directly from the event itself.
+
+```js
+function getGesturePointFromEvent(evt) {
+    var point = {};
+
+    if (evt.targetTouches) {
+      // Prefer Touch Events
+      point.x = evt.targetTouches[0].clientX;
+      point.y = evt.targetTouches[0].clientY;
+    } else {
+      // Either Mouse event or Pointer Event
+      point.x = evt.clientX;
+      point.y = evt.clientY;
+    }
+
+    return point;
+  }
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/touch-demo-2.html)
+
+A `TouchEvent` has three lists containing touch data:
+
+* `touches`: list of all current touches on the screen, regardless of
+DOM element they are on.
+* `targetTouches`: list of touches currently on the DOM element the event
+is bound to.
+* `changedTouches`: list of touches which changed resulting in the event
+being fired.
+
+In most cases, `targetTouches` gives you everything you need and want. (For
+more info on these lists see [Touch lists](#touch-lists)).
+
+#### Use requestAnimationFrame
+
+Since the event callbacks are fired on the main thread, we want to run as
+little code as possible in the callbacks for our events, keeping our frame
+rate high and preventing jank.
+
+Using `requestAnimationFrame()` we have an opportunity to update the UI just
+before the browser is intending to draw a frame and will help us move some
+work out of our event callbacks.
+
+If you are unfamiliar with `requestAnimationFrame()`, you
+can [learn more here](/optimize-javascript-execution/#use-requestanimationframe-for-visual-changes).
+
+A typical implementation is to save the `x` and `y` coordinates from the
+start and move events and request an animation frame inside the move event
+callback.
+
+In our demo, we store the initial touch position in `handleGestureStart()` (look for `initialTouchPos`):
+
+```js
+// Handle the start of gestures
+this.handleGestureStart = function(evt) {
+  evt.preventDefault();
+
+  if (evt.touches && evt.touches.length > 1) {
+    return;
+  }
+
+  // Add the move and end listeners
+  if (window.PointerEvent) {
+    evt.target.setPointerCapture(evt.pointerId);
+  } else {
+    // Add Mouse Listeners
+    document.addEventListener('mousemove', this.handleGestureMove, true);
+    document.addEventListener('mouseup', this.handleGestureEnd, true);
+  }
+
+  initialTouchPos = getGesturePointFromEvent(evt);
+
+  swipeFrontElement.style.transition = 'initial';
+}.bind(this);
+```
+
+The `handleGestureMove()` method stores the position of it's event
+before requesting an animation frame if we need to, passing in our
+`onAnimFrame()` function as the callback:
+
+```js
+this.handleGestureMove = function (evt) {
+  evt.preventDefault();
+
+  if (!initialTouchPos) {
+    return;
+  }
+
+  lastTouchPos = getGesturePointFromEvent(evt);
+
+  if (rafPending) {
+    return;
+  }
+
+  rafPending = true;
+
+  window.requestAnimFrame(onAnimFrame);
+}.bind(this);
+```
+
+
+The `onAnimFrame` value is a function that when called, changes our UI
+to move it around. By passing this function into `requestAnimationFrame()`, we
+tell the browser to call it just before it's about to update the page
+(i.e. paint any changes to the page).
+
+In the `handleGestureMove()` callback we initially check if `rafPending` is false,
+which indicates if `onAnimFrame()` has been called by `requestAnimationFrame()`
+since the last move event. This means we only have one `requestAnimationFrame()`
+waiting to run at any one time.
+
+When our `onAnimFrame()` callback is executed, we set the transform on any
+elements we want to move before updating `rafPending` to `false`, allowing the
+the next touch event to request a new animation frame.
+
+```js
+function onAnimFrame() {
+  if (!rafPending) {
+    return;
+  }
+
+  var differenceInX = initialTouchPos.x - lastTouchPos.x;
+  var newXTransform = (currentXPosition - differenceInX)+'px';
+  var transformStyle = 'translateX('+newXTransform+')';
+
+  swipeFrontElement.style.webkitTransform = transformStyle;
+  swipeFrontElement.style.MozTransform = transformStyle;
+  swipeFrontElement.style.msTransform = transformStyle;
+  swipeFrontElement.style.transform = transformStyle;
+
+  rafPending = false;
+}
+```
+
+### Control gestures using touch actions
+
+The CSS property `touch-action` allows you to control the default touch
+behavior of an element. In our examples, we use `touch-action: none` to
+prevent the browser from doing anything with a users' touch, allowing us
+to intercept all of the touch events.
+
+```css
+/* Pass all touches to javascript: */
+button.custom-touch-logic {
+  touch-action: none;
+}
+```
+
+Using `touch-action: none` is somewhat a nuclear option as it prevents all
+the default browser behaviors. In many cases one of the options
+below is a better solution.
+
+`touch-action` allows you to disable gestures implemented by a browser.
+For example, IE10+ supports a double-tap to zoom gesture. By setting a
+`touch-action` of `manipulation` you prevent the default double-tap
+behavior.
+
+This allows you to implement a double-tap gesture yourself.
+
+Below is a list of commonly used `touch-action` values:
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th colspan="2">Touch Action Parameters</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Property"><code>touch-action: none</code></td>
+      <td data-th="Description">No touch interactions will be handled by
+      the browser.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>touch-action: pinch-zoom</code></td>
+      <td data-th="Description">Disables all browser interactions like
+      `touch-action: none` apart from `pinch-zoom`, which is still handled by
+      the browser.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>touch-action: pan-y pinch-zoom</code></td>
+      <td data-th="Description">Handle horizontal scrolls in JavaScript without
+      disabling vertical scrolling or pinch-zooming (eg. image carousels).</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>touch-action: manipulation</code></td>
+      <td data-th="Description">Disables double-tap gesture which avoids any
+      click delay by the browser. Leaves scrolling and pinch-zoom up to the
+      browser.</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+## Supporting older versions of IE
+
+If you want to support IE10, you'll need to handle vendor prefixed versions of
+`PointerEvents`.
+
+To check for support of `PointerEvents` you'd typically look for
+`window.PointerEvent`, but in IE10, you'd look for
+`window.navigator.msPointerEnabled`.
+
+The event names with vendor prefixes are: `'MSPointerDown'`, `'MSPointerUp'` and
+`'MSPointerMove'`.
+
+The example below shows you how to check for support and switch
+the event names.
+
+```js
+var pointerDownName = 'pointerdown';
+var pointerUpName = 'pointerup';
+var pointerMoveName = 'pointermove';
+
+if (window.navigator.msPointerEnabled) {
+  pointerDownName = 'MSPointerDown';
+  pointerUpName = 'MSPointerUp';
+  pointerMoveName = 'MSPointerMove';
+}
+
+// Simple way to check if some form of pointerevents is enabled or not
+window.PointerEventsSupport = false;
+if (window.PointerEvent || window.navigator.msPointerEnabled) {
+  window.PointerEventsSupport = true;
+}
+```
+
+For more information, checkout this [updates article from
+Microsoft](https://msdn.microsoft.com/library/dn304886(v=vs.85).aspx).
+
+## Reference
+
+### Pseudo classes for touch states
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Class">:hover</td>
+      <td data-th="Example"><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XVGNwzMZeMZ6YfjsaYlP.png", alt="Button in Pressed State", width="70", height="40" %}</figure></td>
+      <td data-th="Description">
+        Entered when a cursor is placed over an element.
+        Changes in the UI on hover are helpful to encourage users to interact
+        with elements.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Class">:focus</td>
+      <td data-th="Example">
+        <figure>
+        {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/a4xf5cg5aB3VzXcnFmZW.png", alt="Button with Focus State", width="70", height="40" %}
+        </figure>
+      </td>
+      <td data-th="Description">
+        Entered when the user tabs through elements on a page. The focus state
+        allows the user to know what element they are currently interacting
+        with; also allows users to navigate your UI easily using a keyboard.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Class">:active</td>
+      <td data-th="Example">
+        <figure>
+        {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bjKXowmUU9rnewiaK2g5.png", alt="Button in Pressed State", width="70", height="40" %}
+        </figure>
+      </td>
+      <td data-th="Description">
+        Entered when an element is being selected, for
+        example, when a user is clicking or touching an element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+The definitive touch events reference can be found here:
+[W3C Touch Events](http://www.w3.org/TR/touch-events/).
+
+### Touch, mouse, and pointer events
+
+These events are the building blocks for adding new gestures into your
+application:
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th colspan="2">Touch, Mouse, Pointer Events</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Event Names">
+        <code>touchstart</code>,
+        <code>mousedown</code>,
+        <code>pointerdown</code>
+      </td>
+      <td data-th="Description">
+        This is called when a finger first touches an element or when the
+        user clicks down on the mouse.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Event Names">
+        <code>touchmove</code>,
+        <code>mousemove</code>,
+        <code>pointermove</code>
+      </td>
+      <td data-th="Description">
+        This is called when the user moves their finger across the screen or
+        drags with the mouse.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Event Names">
+        <code>touchend</code>,
+        <code>mouseup</code>,
+        <code>pointerup</code>
+      </td>
+      <td data-th="Description">
+        This is called when the user lifts their finger off of the screen
+        or releases the mouse.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Event Names">
+        <code>touchcancel</code>
+        <code>pointercancel</code>
+      </td>
+      <td data-th="Description">
+        This is called when the browser cancels the touch gestures. For example,
+        a user touch a web app and then change tabs.
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+### Touch lists
+
+Each touch event includes three list attributes:
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th colspan="2">Touch Event Attributes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Attribute"><code>touches</code></td>
+      <td data-th="Description">
+        List of all current touches on the screen, regardless of elements
+        being touched.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Attribute"><code>targetTouches</code></td>
+      <td data-th="Description">
+        List of touches that started on the element that is the target of
+        the current event. For example, if you bind to a <code>&lt;button&gt;</code>,
+        you'll only get touches currently on that button. If you bind to the
+        document, you'll get all touches currently on the document.
+      </td>
+    </tr>
+    <tr>
+      <td data-th="Attribute"><code>changedTouches</code></td>
+      <td data-th="Description">
+        List of touches which changed resulting in the event being fired:
+        <ul>
+          <li>
+            For the <code>
+            <a href="http://www.w3.org/TR/touch-events/#dfn-touchstart">
+            touchstart</a></code>
+            event-- list of the touch points that just became active with the
+            current event.
+          </li>
+          <li>
+            For the <code>
+            <a href="http://www.w3.org/TR/touch-events/#dfn-touchmove">
+            touchmove</a></code>
+            event-- list of the touch points that have moved since the last
+            event.
+          </li>
+          <li>
+            For the <code>
+            <a href="http://www.w3.org/TR/touch-events/#dfn-touchend">
+            touchend</a></code>
+            and <code>
+            <a href="http://www.w3.org/TR/touch-events/#dfn-touchcancel">
+            touchcancel</a></code>
+            events-- list of the touch points that have just been removed
+            from the surface.
+          </li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+### Enabling active state support on iOS
+
+Unfortunately, Safari on iOS does not apply the *active* state by default, to
+get it working you need to add a `touchstart` event listener to the *document
+body* or to each element.
+
+You should do this behind a user agent test so it's only run on iOS devices.
+
+Adding a touch start to the body has the advantage of applying to all elements
+in the DOM, however this may have performance issues when scrolling the page.
+
+```js
+window.onload = function() {
+  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
+    document.body.addEventListener('touchstart', function() {}, false);
+  }
+};
+```
+
+The alternative is to add the touch start listeners to all the interactable
+elements in the page, alleviating some of the performance concerns.
+
+```js
+window.onload = function() {
+  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
+    var elements = document.querySelectorAll('button');
+    var emptyFunction = function() {};
+
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].addEventListener('touchstart', emptyFunction, false);
+    }
+  }
+};
+```
diff --git a/src/site/content/en/blog/adobe/index.md b/src/site/content/en/blog/adobe/index.md
new file mode 100644
index 00000000000..04bfb484843
--- /dev/null
+++ b/src/site/content/en/blog/adobe/index.md
@@ -0,0 +1,309 @@
+---
+layout: post
+title: Magazine-like layout for the web with CSS regions and exclusions
+authors:
+  - christiancantrell
+date: 2013-08-03
+tags:
+  - blog
+---
+
+## Introduction
+
+The web is an extremely powerful platform for text, an area where Adobe has a great deal of experience and expertise. When Adobe was looking for ways to help move the web forward, therefore, advancing the web's text capabilities even further seemed like an obvious place for us to start.
+The web generally assumes a single column, vertical orientation for text. Although it's possible to flow text around graphics, and even to format text into multiple columns with CSS, it's still very difficult to achieve true magazine-like layout on the web. With [CSS Regions][css-regions-spec] and [CSS Exclusions][css-exclusions-spec], Adobe is spearheading the effort to bring the power of desktop publishing to modern browsers. For instance, in the screenshot below, CSS Exclusions is being used to flow text along the contour of the mountain:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jsrbpqGzX0AqWd3b3rCT.png", alt="Example of CSS Exclusions in action", width="561", height="407" %}
+<figcaption>Example of CSS Exclusions in action</figcaption>
+</figure>
+
+The document in the screenshot below also uses CSS Exclusions to allow the text to wrap around shapes in the images, as well as CSS Regions to format text into columns and around a pull quote:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RfZc8ai0xxe5kd5Xv70t.png", alt="Example of CSS Regions in action", width="551", height="380" %}
+<figcaption>Example of CSS Regions in action</figcaption>
+</figure>
+
+## CSS Regions
+
+Before getting into the details of [CSS Regions][css-regions-spec], I'd like to cover how regions can be enabled in Google Chrome. Once you have CSS Regions enabled, you can try out some of the samples referenced in this article, and create your own.
+
+### Enabling CSS Regions in Google Chrome
+
+As of version 20 of Chrome (version 20.0.1132.57, to be exact), CSS Regions is enabled through the `chrome://flags` interface. To enable CSS Regions, follow these steps:
+
+1. Open a new tab or window in Chrome.
+1. Type `chrome://flags` in the location bar.
+1. Use *find in page* (control/command + f) and search for the ["experimental Web Platform features"](chrome://flags/#enable-experimental-web-platform-features) section.
+1. Click on the *Enable* link.
+1. Click on the *Relaunch Now* button at the bottom.
+
+For more information on Chrome's flags, see my blog post on [All About Chrome Flags](http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html).
+
+Once you've relaunched your browser, you're free to start experimenting with CSS Regions.
+
+### An Overview of CSS Regions
+
+CSS Regions allows a block of semantically marked-up text to automatically flow into "boxes" (currently elements). The diagram below demonstrates the separation of text (the flow) and boxes (the regions the text flows into):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GB9RxLwRmIl4Da8xcG9i.png", alt="Content flows into defined regions", width="625", height="428" %}
+<figcaption>Content flows into defined regions</figcaption>
+</figure>
+
+Let's take a look at an actual CSS Regions use case. In addition to being a developer at Adobe, I'm also a science fiction writer. I frequently publish my work online under a Creative Commons license, and in order to allow it to work across the maximum number of devices and browsers, I frequently use an extremely simple format similar to this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/akdIU7zkdb3Eha7EtAYJ.png", alt="Unstyled Human Legacy Project Example", width="526", height="579" %}
+<figcaption>Unstyled Human Legacy Project Example</figcaption>
+</figure>
+
+Using CSS Regions, I was able to create an experience that is both more visually interesting, and much more functional since it's easier to navigate and more comfortable to read:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uxdYX19LuTnIi3ERsMO7.png", alt="Human Legacy Project showing Region", width="580", height="377" %}
+<figcaption>Human Legacy Project with Regions.</figcaption>
+</figure>
+
+For demonstration purposes, I added the ability to reveal CSS Regions in this prototype. The screenshot below shows how the regions are arranged such that they give the impression of being columns that wrap around a graphic and a pull-quote in the center:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GGleVLeXf2G26yIO9or6.png", alt="Human Legacy Project showing Regions", width="582", height="378" %}
+<figcaption>Human Legacy Project showing Regions</figcaption>
+</figure>
+
+You can experiment with this prototype (as well as view the source code) [here](http://christiancantrell.com/adobe/hlp/callout.html). Use your arrow keys to navigate, and press the `Esc` key to reveal regions. Earlier prototypes are also available [here]().
+
+### Creating a Named Flow
+
+The CSS required to get a block of text to flow through regions is extremely simple. The snippet below assigns a named flow called "article" to a div with the id "content," and assigns that same "article" named flow to any element with the class "region." The result is that text contained inside the "content" element will automatically flow through any element with the class "region."
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+    #content {
+        { % mixin flow-into: article; % }
+    }
+
+    .region {
+        { % mixin flow-from: article; % }
+        box-sizing: border-box;
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        padding: 10px;
+    }
+
+    #box-a {
+        border: 1px solid red;
+        top: 10px;
+        left: 10px;
+    }
+
+    #box-b {
+        border: 1px solid green;
+        top: 210px;
+        left: 210px;
+    }
+
+    #box-c {
+        border: 1px solid blue;
+        top: 410px;
+        left: 410px;
+    }
+    </style>
+</head>
+<body>
+    <div id="box-a" class="region"></div>
+    <div id="box-b" class="region"></div>
+    <div id="box-c" class="region"></div>
+    <div id="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
+    </div>
+</body>
+</html>
+```
+
+The result looks like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3FP6TQNfWuRkJBWY0QDj.png", alt="Result of above code", width="465", height="539" %}
+<figcaption>Result of above code</figcaption>
+</figure>
+
+Note that the text inside the "content" div doesn't have any knowledge of its presentation. In other words, it can remain entirely semantically intact even as it's flowing through various regions. Additionally, since regions are just elements, they are positioned and sized using CSS just as any other element, and are therefore perfectly compatible with responsive design principles. Designating elements as part of a named flow simply means that the specified text automatically flows through them.
+
+### The CSS Object Model
+
+{% Aside %}
+To be concise, this section uses only one vendor prefix (`webkit`),
+but you should write code that works across [browsers that support](http://html.adobe.com/webplatform/enable/) this feature!
+{% endAside %}
+
+The [CSS Object Model][cssom-spec], or CSSOM, defines JavaScript APIs for working with CSS. Below is a list of the new APIs related to CSS Regions:
+
+- `document.webkitGetNamedFlows()`: A function that returns the collection of named flows available in the document.
+- `document.webkitGetNamedFlows().namedItem("article")`: A function that returns a reference to a specific named flow. The argument corresponds to the name specified as the value of the `flow-into` and `from-from` CSS properties. To get a reference to the named flow specified in the code snippet above, you would pass in the string "article."
+- `WebKitNamedFlow`: An object representation of a named floe with the following properties and functions:
+    - `firstEmptyRegionIndex`: An integer value that points to the index of the first empty region associated to the named flow. See `getRegions()` below to learn how to get the collection of regions.
+    - `name`: A string value with the name of the flow.
+    - `overset`: A boolean property that is:
+      - `false` when the content of the named flow fits in the associated regions
+      - `true` when the content does not fit and more regions are required to contain all the content.
+    - `getContent()`: A function that returns a collection with references to the nodes that flow into the named flow.
+    - `getRegions()`: A function that returns a collection with references to regions that hold the content of the named flow.
+    - `getRegionsByContentNode(node)`: A function that returns a reference to the region containing the specified node. This is especially useful for finding regions containing things like named anchors.
+- `webkitregionoversetchange` event. This event is triggered on a `WebkitNamedFlow` whenever the layout of the associated content changes for any reason (content is added or removed, the font size changes, the shape of the region changes, etc.) _and_ causes the `webkitRegionOverset` property of a region to change. This event is useful for listening to coarse layout changes. It is an indicator that something important happened and the layout might need attention, such as: more regions are required, some regions might be empty, etc.
+- `webkitregionfragmentchange` event. Not implemented at the time of this edit. This event is triggered on a `WebkitNamedFlow` whenever the layout of the associated content changes for any reason, similar to `webkitregionoversetchange`, but *regardless* of any change in `webkitRegionOverset` properties. This event is useful for listening for fine-grained layout changes which don't necessarily impact the whole layout of the named flow, for example: content moves from one region to another, but the overall content still fits in all the regions.
+- `Element.webkitRegionOverset`: Elements become regions when they have the `flow-from` CSS property assigned. These elements have a `webkitRegionOverset` property which, if they are part of a named flow, indicates whether or not content from a flow is overflowing the region. The possible of values webkitRegionOverset are:
+  - "overflow" if there is more content than the region can hold
+  - "fit" if the content stops before the end of the region
+  - "empty" if the content has not reached the region
+
+One of the primary uses for the CSSOM is listening for `webkitregionoversetchange` events and dynamically adding or removing regions in order to accommodate varying amounts of text. For instance, if the amount of text to be formatted is unpredictable (perhaps user-generated), if the browser window is resized, or if the font size changes, it might be necessary to add or remove regions to accommodate the change in the flow. Additionally, if you want to organize your content into pages, you will need a mechanism for dynamically modifying the DOM as well as your regions.
+
+The following snippet of JavaScript code demonstrates the use of the CSSOM to dynamically add regions as necessary. Note that for the sake of simplicity, it does not handle removing regions or defining the size and positions of regions; it is for demonstration purposes only.
+
+```js
+var flow = document.webkitGetNamedFlows().namedItem("article")
+flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
+
+function onLayoutUpdate(event) {
+    var flow = event.target;
+    
+    // The content does not fit
+    if (flow.overset === true) {
+    addRegion();
+    } else {
+    regionLayoutComplete();
+    }
+}
+
+function addRegion() {
+    var region = document.createElement("div");
+    region.style = "flow-from: article";
+    document.body.appendChild(region);
+}
+
+function regionLayoutComplete() {
+    // Finish up your layout.
+}
+```
+
+More demos are available on the [CSS Regions samples page](http://html.adobe.com/webplatform/layout/regions/).
+
+### CSS Page Templates
+
+{% Aside %}
+This section discusses future concepts not yet implemented in any browser.
+{% endAside %}
+
+Leveraging the CSSOM is probably the most powerful and flexible way of implementing things like paging and responsive layout, but Adobe has been working with text and desktop publishing tools long enough to know that designers and developers are also going to want an easier way to get relatively generic paging capabilities. Therefore we are working on a proposal called CSS Page Templates which allows paging behavior to be defined entirely declaratively.
+
+Let's take a look at a common use case for CSS Page Templates. The code snippet below shows the use of CSS to create two named flows: "article-flow" and "timeline-flow." Additionally it defines a third selector called "combined-articles" inside of which the two flows will be contained. The simple inclusion of the `overflow-style` property inside the "combined-articles" selector indicates that the content should automatically be paged along the x axis, or horizontally:
+
+```html
+<style>
+    #article {
+    { % mixin flow-into: article-flow; % }
+    }
+
+    #timeline {
+    { % mixin flow-into: timeline-flow; % }
+    }
+
+    #combined-articles {
+    overflow-style: paged-x;
+    }
+</style>
+```
+
+Now that the flows have been defined and the desired overflow behavior has been specified, we can create the page template itself:
+
+```css
+@template {
+    @slot left {
+    width: 35%;
+    float: left;
+    { % mixin flow-from: article-flow; % }
+    }
+
+    @slot time {
+    width: 25%;
+    float: left;
+    { % mixin flow-from: timeline-flow; % }
+    }
+
+    @slot right {
+    width: 35%;
+    float: left;
+    { % mixin flow-from: article-flow; % }
+    }
+}
+```
+
+Page templates are defined using the new "at" syntax. In the code snippet above, we define three slots, each corresponding to a column. The text from the "article-flow" will flow through the columns on the left and right, and text from the "timeline-flow" will populate the column in the middle. The result might look something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8b94ouCJU0Z5lUnOFDvj.png", alt="Page templates example", width="572", height="430" %}
+<figcaption>Page templates example</figcaption>
+</figure>
+
+Note that the article text -- the text in the left- and right-hand columns -- is English, and the timeline in the center is German. Additionally, the document pages horizontally without the need for any JavaScript code. Everything was done entirely declaratively in CSS.
+
+CSS Page Templates are still a proposal, however we have a [prototype](http://adobe.github.com/web-platform/utilities/css-pagination-template/) which uses a JavaScript "shim" (a.k.a [polyfill](http://remysharp.com/2010/10/08/what-is-a-polyfill/)) in order to allow you to experiment with them now.
+
+To learn more about CSS Regions in general, check out the [CSS Regions page on html.adobe.com](http://html.adobe.com/webstandards/cssregions/).
+
+## CSS Exclusions
+
+In order to achieve true magazine-like layout, it's not enough to be able to flow text through regions. A critical element of high-quality and visually interesting desktop publishing is the ability to make text flow either around or inside of irregular graphics and shapes. CSS Exclusions is bringing this level of production quality to the web.
+
+The screenshot below is from a CSS Exclusions prototype, and shows text dynamically flowing around a path that matches the contour of a large rock formation:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jsrbpqGzX0AqWd3b3rCT.png", alt="Example of CSS Exclusions in action", width="561", height="407" %}
+<figcaption>Example of CSS Exclusions in action</figcaption>
+</figure>
+
+The inverse is illustrated in the next screenshot: text flowing inside of irregularly shaped polygons:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lZsJ151712IStFQkZyNl.png", alt="Text flowing into irregularly shaped polygons", width="555", height="408" %}
+<figcaption>Text flowing into irregularly shaped polygons</figcaption>
+</figure>
+
+The first step to being able to flow text around or inside of arbitrary shapes is to develop and optimize the required algorithms. Adobe is currently working on implementations which will be contributed directly to WebKit. Once these algorithms have been optimized, they will become the foundations on top of which the remainder of CSS Exclusions are built.
+
+For more information on CSS Exclusions, see the [CSS Exclusions page on html.adobe.com](http://html.adobe.com/webstandards/cssexclusions/), and for a more detailed look at Adobe's work on the underlying technology for CSS Exclusions, see Hans Muller's blog post entitled [Horizontal Box: Polygon Intersection for CSS Exclusions](http://hansmuller-webkit.blogspot.com/2012/06/horizontal-box-polygon-intersection-for.html).
+
+### The Current State of CSS Regions and CSS Exclusions
+
+The first time I talked about CSS Regions and CSS Exclusions publicly was at the Adobe Developer Pod at Google I/O 2011. At the time, I was showing demos in our own custom prototype browser. The reception was extremely enthusiastic, however there was a palpable sense of disappointment when onlookers discovered that none of the functionality I was showing was available in any of the major browsers yet.
+
+I was at Google I/O again this year (2012), this time as a presenter along with my coworker [Vincent Hardy](https://twitter.com/vincent_hardy) and [Alex Danilo](https://plus.google.com/113205278198625312096/posts) from Google (you can [watch the presentation here](http://www.youtube.com/watch?v=bwOhfoewMYs)). Just one year later, about 80% of the CSS Regions specification has been implemented in WebKit, and is already in the most recent version of Google Chrome (note that CSS Regions currently has to be enabled through `chrome://flags`). Preliminary support for CSS Regions has even landed in Chrome for Android:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/DYO89INBNLmqZCWj45Av.png", alt="Regions on Chrome for Android", width="612", height="522" %}
+<figcaption>Regions on Chrome for Android</figcaption>
+</figure>
+
+Additionally, both CSS Regions and CSS Exclusions are implemented in the Internet Explorer 10 preview, and are currently on Mozilla's 2012 roadmap for Firefox. The next major version of Safari should support the majority of the CSS Regions specification, and subsequent updates should include the remainder.
+
+Below is a detailed timeline of the progress we've made with CSS Regions and CSS Exclusions since our initial proposal to the W3C in April of 2011:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/kC7qgaDPFceOEiuvWpLE.png", alt="Region and Exclusion Progress", width="636", height="406" %}
+<figcaption>Region and Exclusion Progress</figcaption>
+</figure>
+
+## Conclusion
+
+Adobe has a huge amount of experience with text, fonts, and with desktop publishing in general through tools like InDesign. Although the web is already a very powerful platform for text, we want to use our knowledge and experience to push text presentation even further. CSS Regions and CSS Exclusions are allowing content to remain semantically structured while also enabling true magazine-like layout, and ultimately a much more expressive web.
+
+[css-regions-spec]: http://dev.w3.org/csswg/css3-regions/
+[css-exclusions-spec]: http://dev.w3.org/csswg/css3-exclusions/
+[cssom-spec]: http://dev.w3.org/csswg/cssom/
\ No newline at end of file
diff --git a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/change-in-number-of-ad-script-loads-vs-ad-script-load-time.svg b/src/site/content/en/blog/ads-case-study-stale-while-revalidate/change-in-number-of-ad-script-loads-vs-ad-script-load-time.svg
deleted file mode 100644
index fe4386e8d45..00000000000
--- a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/change-in-number-of-ad-script-loads-vs-ad-script-load-time.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" style="" viewBox="0 0 800 600"><rect x="0" y="0" width="800" height="600" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-d30585"><g class="clips"><clipPath id="clipd30585xyplot" class="plotclip"><rect width="640" height="420"/></clipPath><clipPath class="axesclip" id="clipd30585x"><rect x="80" y="0" width="640" height="600"/></clipPath><clipPath class="axesclip" id="clipd30585y"><rect x="0" y="100" width="800" height="420"/></clipPath><clipPath class="axesclip" id="clipd30585xy"><rect x="80" y="100" width="640" height="420"/></clipPath></g><g class="gradients"/></defs><g class="bglayer"/><g class="layer-below"><g class="imagelayer"/><g class="shapelayer"/></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"/><g class="imagelayer"/></g><g class="gridlayer"><g class="x"/><g class="y"><path class="ygrid crisp" transform="translate(0,425.45)" d="M80,0h640" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,330.9)" d="M80,0h640" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,236.35)" d="M80,0h640" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,141.8)" d="M80,0h640" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g></g><g class="zerolinelayer"><path class="yzl zl crisp" transform="translate(0,520)" d="M80,0h640" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/></g><path class="xlines-below"/><path class="ylines-below"/><g class="overlines-below"/><g class="xaxislayer-below"/><g class="yaxislayer-below"/><g class="overaxes-below"/><g class="plot" transform="translate(80, 100)" clip-path="url('#clipd30585xyplot')"><g class="barlayer mlayer"><g class="trace bars" style="opacity: 1;"><g class="points"><g class="point"><path d="M1.6,420V21H14.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M17.6,420V187.41H30.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M33.6,420V143.91H46.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M49.6,420V291.41H62.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M65.6,420V333.01H78.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M81.6,420V346.25H94.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M97.6,420V333.01H110.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M113.6,420V333.01H126.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M129.6,420V342.47H142.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M145.6,420V340.58H158.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M161.6,420V353.82H174.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M177.6,420V361.38H190.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M193.6,420V374.62H206.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M209.6,420V382.18H222.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M225.6,420V387.85H238.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M241.6,420V397.31H254.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M257.6,420V399.2H270.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M273.6,420V402.98H286.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M289.6,420V399.2H302.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M305.6,420V404.87H318.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M321.6,420V406.76H334.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M337.6,420V420H350.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M353.6,420V420H366.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M369.6,420V418.11H382.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M385.6,420V416.22H398.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M401.6,420V418.11H414.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M417.6,420V416.22H430.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M433.6,420V416.22H446.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M449.6,420V418.11H462.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M465.6,420V416.22H478.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M481.6,420V414.33H494.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M497.6,420V418.11H510.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M513.6,420V416.22H526.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M529.6,420V418.11H542.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M545.6,420V420H558.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M561.6,420V416.22H574.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M577.6,420V416.22H590.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M593.6,420V416.22H606.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M609.6,420V414.33H622.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="point"><path d="M625.6,420V416.22H638.4V420Z" style="vector-effect: non-scaling-stroke; opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g></g></g></g></g><g class="overplot"/><path class="xlines-above crisp" d="M0,0" style="fill: none;"/><path class="ylines-above crisp" d="M0,0" style="fill: none;"/><g class="overlines-above"/><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(88,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(248,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">500</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(408,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1000</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(568,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1500</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,520)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,425.45)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.05</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,330.9)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.1</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,236.35)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.15</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,141.8)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.2</text></g></g><g class="overaxes-above"/></g></g><g class="polarlayer"/><g class="ternarylayer"/><g class="geolayer"/><g class="funnelarealayer"/><g class="pielayer"/><g class="treemaplayer"/><g class="sunburstlayer"/><g class="glimages"/><defs id="topdefs-d30585"><g class="clips"/></defs><g class="layer-above"><g class="imagelayer"/><g class="shapelayer"/></g><g class="infolayer"><g class="g-gtitle"><text class="gtitle" x="400" y="50" text-anchor="middle" dy="0em" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;"><tspan class="line" dy="0em" x="400" y="50"><tspan style="font-weight:bold">Percentage point change in no. of ad script loads</tspan></tspan><tspan class="line" dy="1.3em" x="400" y="50"><tspan style="font-weight:bold">vs.</tspan></tspan><tspan class="line" dy="2.6em" x="400" y="50"><tspan style="font-weight:bold">Time from page load start to ad script load (ms)</tspan></tspan></text></g><g class="g-xtitle"><text class="xtitle" x="400" y="572" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Time from page load start to ad script load (ms)</text></g><g class="g-ytitle"><text class="ytitle" transform="rotate(-90,42,310)" x="42" y="310" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Percentage point change in no. of ad script loads</text></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/hero.jpg b/src/site/content/en/blog/ads-case-study-stale-while-revalidate/hero.jpg
deleted file mode 100644
index 1c73144be23..00000000000
Binary files a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/index.md b/src/site/content/en/blog/ads-case-study-stale-while-revalidate/index.md
index 75f36ecc31d..1de3e5f6529 100644
--- a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/index.md
+++ b/src/site/content/en/blog/ads-case-study-stale-while-revalidate/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: How Google improved ads performance with stale-while-revalidate
 subhead: |
     Find out how loading third-party resources faster can increase revenue.
@@ -6,8 +7,8 @@ date: 2020-03-05
 authors:
   - thebengeu
   - jimper
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+hero: image/admin/CYbrrEv8KBJtPHCvLV4Y.jpg
+thumbnail: image/admin/KriMXq0cv6h8IhzVjyst.jpg
 alt: Dew on a thin leaf in macro
 description: |
     This case study explains how Google increased key ads business metrics by
@@ -16,19 +17,19 @@ tags:
   - blog
   - case-study
   - performance
-  - ads
+  # - ads
 ---
 
 This case study highlights how improving the performance of third-party resources can boost business metrics. While a [previous study](/fast-ads-matter/#fast-ads-make-you-more-money) measured the cost of added ads latency, this study demonstrates the value of a real-world performance improvement:
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">0.5<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Revenue lift for publishers</p>
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">0.5<sub>%</sub></p>
+    <p>Revenue lift for publishers</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">2<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Increase in early ad script loads</p>
+  <div class="stats__item">
+    <p class="stats__figure">2<sub>%</sub></p>
+    <p>Increase in early ad script loads</p>
   </div>
 </div>
 
@@ -66,11 +67,9 @@ Chrome rolled out `stale-while-revalidate` in version 75 to 99% of all traffic,
 - 2% increase in early ad script loads (<500ms from the start of page load).
 - 1.1% increase in successful ad script loads overall.
 
-<figure class="w-figure">
-  <img src="./change-in-number-of-ad-script-loads-vs-ad-script-load-time.svg" alt="Percentage point change in number of ad script loads vs. Time from page load start to ad script load (ms)">
-  <figcaption class="w-figcaption">
-    Source: Google Internal Data, June to July 2019.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/ZRKz2IHKdGNTDM3WdsvX.svg", alt="Percentage point change in number of ad script loads vs. Time from page load start to ad script load (ms)", width="800", height="600" %}
+  <figcaption>Source: Google Internal Data, June to July 2019.</figcaption>
 </figure>
 
 As shown in the chart above, the results of this experiment can be attributed to an increase in successful ad script loads, with a majority occurring early in the page load process.
diff --git a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/thumbnail.jpg b/src/site/content/en/blog/ads-case-study-stale-while-revalidate/thumbnail.jpg
deleted file mode 100644
index bf89ff0da41..00000000000
Binary files a/src/site/content/en/blog/ads-case-study-stale-while-revalidate/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/adsy-me/index.md b/src/site/content/en/blog/adsy-me/index.md
new file mode 100644
index 00000000000..7a5df7b5b57
--- /dev/null
+++ b/src/site/content/en/blog/adsy-me/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Adsy.me
+date: 2015-05-04
+updated: 2020-07-24
+tags:
+  - blog
+  - case-study
+
+---
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OBheS2foH6xlJh06O5fG.png", alt="Adsy.me detail", width="800", height="1570" %}
+</figure>
+
+## Summary
+
+[Adsy.me](http://adsy.me/) is a super quick and easy way to build mobile
+microsites.
+
+### What we like?
+
+Adsy.me is a tool that allows anyone to create a mobile (micro-) website, and
+they immediately gained my trust by eating their own dogfood: The whole tool
+is a fantastic mobile web app that feels very responsive and intuitive.
+
+### Possible Improvements
+
+By utilizing more lazy-loading techniques, the app could load even faster, and
+it would benefit from utilizing the full screen API, as well as a ServiceWorker
+for going offline.
+
+## Q & A with Frederick Tubiermont
+
+### Why the web?
+
+Three main reasons motivated our choice: openness, cross-platform support and
+instant updates for our users.
+
+**Openness** = great for discoverability.
+It might sound obvious but the web is open. It can be freely crawled by search
+engines (Google first) and is the ideal ecosystem for easy discovery.
+
+**Cross-platform**
+The web works (almost) seamlessly across platforms (when browser updates
+don't ruin your development efforts ;-)). If you have the right in-house
+talent to execute your app properly, it will work on all major devices /
+platforms, without the need to develop a different branch for each OS.
+Ideally, it saves time & money.
+
+**Instant updates**
+You don't need to submit any app updates to the app stores. The end-users
+always get the latest version of your product when they refresh their browser.
+This is a key advantage if you develop in an agile way, pushing bug fixes and
+new features on a regular basis.
+
+By the way, I wrote an article called "7 reasons why appstores are doomed"
+(and how we'll be better off in a post-appstores era), which
+[you can read here](https://medium.com/@adsy_me/7-reasons-why-appstores-are-doomed-ce05dda53e7c).
+
+### What worked really well during development?
+
+Tough question because, to be honest, it's not that easy (1) to properly
+develop for the web (2) to find the right talent who grasps JS & HTML5 at an
+execution level matching our requirements (3) to attract those talents to a
+bootstrapped startup who can't afford Silicon Valley salaries.
+
+So it wasn't by any means an easy journey but at the end our efforts were
+rewarded. I think that we delivered an unprecedented creation experience in
+the mobile browser and I'm proud we did it with just 2 guys in 18 months,
+even if it required long days & sleepless nights of hard work.
+
+### If you could have any API to improve your app, what would it be?
+
+I'd love to connect our web app to the Wordpress developers'
+community/ecosystem, in one way or another, to open our framework to their
+talent while giving our users access to the huge selection of Wordpress
+plugins, without the need to reinvent the wheel.
+
+Who knows, you might read in the near future that adsy goes Wordpress ;-)
+Stay tuned.
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/babel-preset-env.png b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/babel-preset-env.png
deleted file mode 100644
index 904201b42cb..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/babel-preset-env.png and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/barnebys.png b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/barnebys.png
deleted file mode 100644
index a90096affa2..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/barnebys.png and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/conformance.png b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/conformance.png
deleted file mode 100644
index fb0d5f5db98..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/conformance.png and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/differential-loading-angular.png b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/differential-loading-angular.png
deleted file mode 100644
index eded9f1fe9a..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/differential-loading-angular.png and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/framework-types.png b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/framework-types.png
deleted file mode 100644
index 2ba7584478c..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/framework-types.png and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/hero.jpg b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/hero.jpg
deleted file mode 100644
index dd2670b375e..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/index.md b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/index.md
index c68d0129f5b..94e4511dd5d 100644
--- a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/index.md
+++ b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/index.md
@@ -7,12 +7,12 @@ authors:
 date: 2020-01-08
 description: |
   Learn about how Chrome is investing efforts in a number of open-source tools to advance the JavaScript ecosystem
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+hero: image/admin/prKYY6a0bcDxDvuiWvWk.jpg
+thumbnail: image/admin/c8D4Cj94qLbosd7ptE7Q.jpg
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
-  - frameworks
+  # - frameworks
 ---
 
 Chrome is an active contributor to the web framework ecosystem and our talk at Chrome Dev Summit
@@ -59,7 +59,7 @@ Frameworks commonly used to build and structure web pages fall into two categori
     with opinionated features built-in, such as server-side rendering. These frameworks usually
     leverage a UI framework or library for the view layer.
 
-![A spectrum of UI frameworks and libaries versus Web frameworks](./framework-types.png)
+{% Img src="image/admin/OI4rF5fAQJ5PYP2f6AA6.png", alt="A spectrum of UI frameworks and libraries versus Web frameworks", width="800", height="455" %}
 
 Developers can choose not to use frameworks but by piecing together a view layer library, router,
 styling system, server renderer and so forth, they often end up creating their own type of a
@@ -75,11 +75,9 @@ The Angular team has shipped a number of improvements to version 8 of the framew
 +   [Differential loading](https://angular.io/guide/deployment#differential-builds) by
     default to minimize unneeded polyfills for newer browsers.
 
-<figure class="w-figure">
-  <img src="differential-loading-angular.png" class="w-screenshot" alt="Graph showing bundle size reduction of angular.io with and without differential builds">
-  <figcaption class="w-figcaption">
-    Bundle size reduction for angular.io with differential builds (from <a href="https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27">Version 8 of Angular</a>)
-  </figcaption>
+<figure>
+  {% Img src="image/admin/kPQFf4eoaz1wcUZULmbZ.png", alt="Graph showing bundle size reduction of angular.io with and without differential builds", width="800", height="463" %}
+  <figcaption>Bundle size reduction for angular.io with differential builds (from <a href="https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27">Version 8 of Angular</a>)</figcaption>
 </figure>
 
 +   Support for standard dynamic import syntax for lazy-loading routes.
@@ -123,11 +121,9 @@ for comments (RFCs) and pull requests (PRs):
 3.  Improved performance metric tracking which utilizes the User Timing API
     ([PR](https://github.com/zeit/next.js/pull/8069)).
 
-<figure class="w-figure">
-  <img src="barnebys.png" class="w-screenshot-filled" alt="Homepage of Barnebys.com">
-  <figcaption class="w-figcaption">
-    <a href="https://www.barnebys.com/">Barnebys.com</a>, a large search engine for antiques and collectibles, saw a 23% reduction in total JavaScript after enabling granular chunking
-  </figcaption>
+<figure>
+  {% Img src="image/admin/5QA6KNYCwQ4aLdowLGNS.png", alt="Homepage of Barnebys.com", width="800", height="543" %}
+  <figcaption><a href="https://www.barnebys.com/">Barnebys.com</a>, a large search engine for antiques and collectibles, saw a 23% reduction in total JavaScript after enabling granular chunking</figcaption>
 </figure>
 
 We are also exploring other features to improve both the user and developer experience of using
@@ -137,11 +133,9 @@ Next.js, such as:
 +   A webpack based conformance system that analyzes all source files and generated assets to
     surface better errors and warnings ([RFC](https://github.com/zeit/next.js/issues/9310)).
 
-<figure class="w-figure">
-  <img src="conformance.png" class="w-screenshot-filled" alt="Example of a conformance build error in Next.js">
-  <figcaption class="w-figcaption">
-    An example of a conformance build error in Next.js (prototype)
-  </figcaption>
+<figure>
+  {% Img src="image/admin/LoKCHqIIpGkQIUjxZlre.png", alt="Example of a conformance build error in Next.js", width="800", height="367" %}
+  <figcaption>An example of a conformance build error in Next.js (prototype)</figcaption>
 </figure>
 
 ## Nuxt.js
@@ -193,7 +187,7 @@ to older syntax to avoid browser bugs, `preset-modules` fixes each specific bug
 closest possible non-broken modern syntax. This results in modern code that can be delivered *nearly
 unmodified* to most browsers.
 
-![A new babel preset to provide better polyfilling for browsers](./babel-preset-env.png)
+{% Img src="image/admin/8qG6cuXyjKvE89du82Ki.png", alt="A new babel preset to provide better polyfilling for browsers", width="800", height="453" %}
 
 Developers who already use `preset-env` will also benefit from these optimizations without having to
 do anything, as they'll soon be incorporated into `preset-env` too.
diff --git a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/thumbnail.jpg b/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/thumbnail.jpg
deleted file mode 100644
index e3c1d7e3315..00000000000
Binary files a/src/site/content/en/blog/advancing-framework-ecosystem-cds-2019/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/adventuremachine/index.md b/src/site/content/en/blog/adventuremachine/index.md
new file mode 100644
index 00000000000..4b257cfb0a5
--- /dev/null
+++ b/src/site/content/en/blog/adventuremachine/index.md
@@ -0,0 +1,57 @@
+---
+layout: post
+title: Madeon Adventure Machine
+date: 2015-08-14
+updated: 2015-08-14
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s676oANZk4tBdMozz4s3.png", alt="Madeon adventure machine detail", width="800", height="1570" %}
+</figure>
+
+[Madeon Adventure Machine](http://www.madeon.fr/adventuremachine/) is a clever
+promotion for Madeon's new album that is a fun drum machine.
+
+### What we like?
+
+The Adventure Machine is a really simple app, but it does its job quite well.
+By utilizing Web Audio and optionally Web Midi (yes – you can connect your own
+synthesizer!), the newly created loops that appear by the touch of a button
+sync perfectly, and the interface works well on mobile, especially when
+installed to home screen.
+
+### Possible Improvements
+
+The load time (see WebPageTest score) on mobile 3G could be significantly
+improved if the precaching of all beats and loops was removed or done in
+a smarter way. Gzip compression on assets is missing and and easy fix, and
+the touch targets are slightly too small for smaller screens.
+
+## Q & A with Syd Lawrence
+
+### Why the web?
+
+We wanted the project to be available to as many people as possible around
+the world. We also wanted as many people to interact with it as possible,
+so we needed to remove every potential barrier to entry.
+
+### What worked really well during development?
+
+We used the Web MIDI API for the first time for this project. Interacting
+with a website using a MIDI instrument is an amazing feeling.
+
+### If you could have any API to improve your app, what would it be?
+
+For this web app, tbh, there are ways we could improve it, but there are
+already APIs we could use to help with this.
+
+### What happened after launch?
+
+It exceeded all hopes and expectations. It got to #2 on the front page of
+reddit, and had almost half a million users within the first month. It also
+generated a substantial number of album sales and tour ticket purchases.
+
diff --git a/src/site/content/en/blog/aem-with-workbox/index.md b/src/site/content/en/blog/aem-with-workbox/index.md
new file mode 100644
index 00000000000..614882def40
--- /dev/null
+++ b/src/site/content/en/blog/aem-with-workbox/index.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: A modern web experience on Adobe Experience Manager with WorkBox
+description: >
+  Progressive Web Apps leverage what the modern web can do. Adobe used Workbox to bring those capabilities to Adobe Experience Manager.
+authors:
+  - kbalasub
+  - sdenaro
+date: 2022-04-12
+hero: image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/DYLQrK14PjcDGMLjJy7C.png
+alt: The Adobe Experience Manager logo.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+If you are a technical lead or digital marketing analyst interested in providing a modern Web experience to your Adobe Experience Manager (AEM) web application and have been looking for your options in doing so, then you have come to the right article. This will cover what Progressive Web Apps (PWA) are and what you need to create a PWA in AEM leveraging the WorkBox library through configuration, without coding.
+
+## Why PWA?
+
+Progressive Web Apps leverage what the modern web can do. They are installable on your device, load quickly, with subsequent visits loading instantly. They respond to input quickly. They work well on an unreliable connection or when offline. PWAs use modern APIs to provide an engaging app-like experience with an optional full screen UI, background updating, and offline access to data.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/xkDFjbziiPKvr2TLiAXF.png", alt="From web app to Progressive Web App.", width="800", height="477" %}
+</figure>
+
+To enhance a web app into a Progressive Web App requires adding two artifacts:
+
+- A [web app manifest](/add-manifest/): a JSON configuration file that defines the app's entry point URL, the icon used to represent the PWA and other configuration that describe how the application looks and behaves.
+- A [service worker](/learn/pwa/): a script that provides background services that enrich your PWA by defining resources your PWA uses and the strategies to access them.
+
+## What is a service worker?
+
+At its core, a service worker is just a script that your browser runs independently as you interact with your web application. An active service worker provides services such as smart caching using the [Cache API](/cache-api-quick-guide/), keeping data up to date using the [Background Sync API](/periodic-background-sync/), and integrating with push notifications. A service worker with the right caching strategy provides stable and reliable user experiences for various scenarios, returning pre-cached resources instantly, storing data in cache, and updating resources when connected to the web.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/j97xB2WYaExyh8SbI3pw.png", alt="A service worker lives on the client, but proxies the network.", width="800", height="369" %}
+</figure>
+
+{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/4izQ6TMiE9PHdRTor7b2.png", alt="Workbox Logo", width="200", height="47", style="max-width: 200px; margin: 0 auto;" %}
+
+Service workers can be hard to write from scratch. Workbox was created to make it easier. Workbox is a set of libraries to help you write and manage [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) and caching with the [Cache Storage API](/cache-api-quick-guide/). Service workers and the Cache Storage API, when used together, control how assets (HTML, CSS, JS, images, etc.) are requested from the network or cache, even allowing you to return cached content when offline. With Workbox, you can quickly set up and manage both, and more, with production-ready code.
+
+## Upgrading an AEM site to a PWA
+
+[Adobe Experience Manager](https://business.adobe.com/products/experience-manager/sites/aem-sites) (AEM) is a comprehensive content management solution for building websites, mobile apps, forms, and digital signage. It makes it easy to manage your marketing content and assets.
+
+While AEM provides a rich library for building web applications, until now it's been difficult to build a PWA by adding a service worker and a manifest.
+
+Adobe Experience Manager Sites is the UI building tool that is part of Adobe Experience Manager. When used with Adobe Experience Manager as a cloud service, AEM Sites makes it easy to convert any existing AEM website or single page application into an installable offline-enabled Progressive Web App with just configuration and no coding. It uses Workbox to deliver the best practices for Progressive Web Apps and abstracts the complexities of writing boilerplate manifests and service workers.
+
+AEM supports localization of content which means you can have different branding and even different offline content for different locales. To do this build different PWA configurations for each language master.
+
+### Getting started with PWA configuration on AEM
+
+Log into Adobe Experience Manager as a Cloud Service and select any Adobe Experience Manager Sites page or language master and click properties. You should see a tab called Progressive Web App. (Note: if you do not see this tab, please contact Adobe to enable this feature.) You can configure the installation and the look and feel of your Progressive Web Apps with just a few clicks.
+
+If you've completed AEM Sites tutorials you have likely seen the WKND site before. This article uses the [WKND](https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/overview.html) demo as the starting point. When you are done you will have updated WKND from a web app to a PWA using WorkBox.
+
+### Configure the manifest
+
+The [web app manifest](/add-manifest/) is a JSON file that contains properties that describe the look and behavior of a PWA. Adobe Experience Manager Sites provides a friendly user interface to configure the properties.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/mhq0Kyzn88zfryTFpQgU.png", alt="Configuring the manifest in the installable experience dialog box.", width="800", height="634" %}
+</figure>
+The start URL is the entry point of your PWA. When a user taps on the PWA icon on their phone, they will be accessing the startup URL. The display mode configures whether the app is a windowed or fullscreen experience. You can also specify the screen orientation of the application. The theme color is the color of the window and toolbar while the background color is the color of the splash screen when the application is launched. The icon is the image that is shown on the devices home screen or application drawer when the application is installed on the device. The configuration shown in the image generates the manifest JSON shown below.
+
+```json
+{
+  "name": "WKND Adventures and Travel",
+  "short_name": "WKND Adventures and Travel",
+  "start_url": "/content/wknd/us/en.html",
+  "display": "standalone",
+  "theme_color": "#FFDC00",
+  "background_color": "#FF851B",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/content/dam/wknd/pwa-logo.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ]
+}
+```
+
+The start URL can be different from the default landing page for your domain. By changing the `start_url` parameter, you can send your users directly to the application experience rather than the default page a non-authenticated or new user would be presented. This provides PWA users with a smoother, more app-like experience.
+
+AEM understands that different locales can have a different look and feel. You can configure different properties, colors, and icons for different locales or languages and then synchronize the configuration with the linked pages.
+
+Once the PWA is accessed on the browser, you can right click and inspect to bring up DevTools and view the manifest under the Applications panel.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/xWxP7YILDgejrdtbq0hh.png", alt="A PWA in the DevTools Application panel.", width="800", height="966" %}
+</figure>
+
+### Configure the service worker
+
+You can configure the content to cache and the caching strategy to use.
+
+If you have been using service workers you may be familiar with [caching strategies](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/). Caching strategies specify which resources to cache and whether to look for those resources in the cache first, the network first, or in the cache with a network fallback. You can then choose the resources to pre-cache when the service worker is installed. AEM Application service workers implement a [warm cache strategy](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#warming-the-runtime-cache) which means user's experience will not break even if you specify a missing or broken path.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/GY9pDPqKTuux6jR26ZZZ.png", alt="Configuring the service worker using the Cache Management (Advanced) dialog box.", width="800", height="753" %}
+</figure>
+
+In AEM, the term "clientlibs" refers to client-side Libraries: the combination of related JavaScript, CSS, and static resources that have been added to your project that are served to and utilized by the client web browser. You can easily set your client-side libraries to be used offline by specifying those libraries in the user interface.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/9jrYgsiQzPecwYPVdCEw.png", alt="The client side libraries dialog box.", width="800", height="634" %}
+</figure>
+
+You can also include third-party resources such as fonts. This offline cache configuration provides configuration information to a service worker that is generated for your application that internally uses workbox. That is pretty much all there is to make your application installable. Once installed, the application icon will show up on your mobile device home screen just like a platform app. Clicking the icon will access the wknd site.
+
+Please note that you can change your content or these settings at any time. When you publish your changes, the service worker will be updated at the client by the browser and a message will be presented to the user that a newer version of the PWA is available. The user can click the message to reload the application and get the latest updates. You can open the browser developer tools and applications panel to view the service worker details.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/4trs4SyeqTJN7HQQTXst.png", alt="The DevTools service worker panel.", width="800", height="575" %}
+</figure>
+
+You can expand cache storage to view the content that has been cached locally:
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/vNL5kbPDYti0GEkiJNBq.png", alt="The cache storage view in DevTools.", width="800", height="398" %}
+</figure>
+
+### The results
+
+It's time to look at the results of your hard work. With just configuration and without coding you have just enhanced your AEM site to become a Progressive Web App.
+
+{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/kKx6HOoA6z4hXoy4WZn8.gif", alt="An AEM site as a Progressive Web App.", width="385", height="633", style="max-width: 385; margin: 0 auto;" %}
+
+Chrome developer tools provide a lighthouse audit that lets you check how compliant your web application and configuration is with Progressive Web App standards.
+
+<figure>
+  {% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/MGOAltGvFK3MCJLgFznv.png", alt="A lighthouse audit.", width="800", height="694" %}
+</figure>
+
+## Conclusion
+
+Progressive Web Apps provide an app-like experience for your website, that uses the cross platform and open nature of the web at a lower cost of development and maintenance while providing control over distribution. This enhances engagement, retention, and most importantly, drives higher conversion rates. AEM in conjunction with Workbox makes it easy to enhance your existing site into a PWA with just configuration and no coding.
+
+## References
+
+* [WKND Tutorial](https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/overview.html)
+* [Service Workers](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+* [Cache API](/cache-api-quick-guide/)
+* [Web application manifest](/add-manifest/)
+* [Adaptive icon support in PWAs with maskable icons](/maskable-icon/)
+* [Learn more about Adobe Experience Manager Sites](https://business.adobe.com/products/experience-manager/sites/aem-sites)
+* [Learn more about Workbox:](https://developer.chrome.com/docs/workbox/the-ways-of-workbox/)
+* [Workbox Caching strategies:](https://developer.chrome.com/docs/workbox/different-architectures/)
+* Learn more about [Progressive Web Apps](/progressive-web-apps/)
+
diff --git a/src/site/content/en/blog/agrofy/index.md b/src/site/content/en/blog/agrofy/index.md
new file mode 100644
index 00000000000..c79f250b460
--- /dev/null
+++ b/src/site/content/en/blog/agrofy/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: "Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment"
+subhead: By using real user monitoring tools and focusing on improving Core Web Vitals in refactoring their app, they also improved CLS by 72%, as well as application responsiveness.
+authors:
+  - kaycebasques
+date: 2021-03-01
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/lpdEvKkrGYQcqkyfkPWw.png
+thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/SQ1GzmbmNQz0Sr9fdr3u.png
+alt: A photo of a phone showing Agrofy Market app.
+description: Read how Agrofy improved their load abandoment rate by focusing on Core Web Vitals.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+  - web-vitals
+---
+
+
+[Agrofy](https://www.agrofy.com.ar/) is an online marketplace for Latin
+America's agribusiness market. They match up buyers and sellers of farm
+machines, land, equipment, and financial services. In Q3 2020 a 4-person
+development team at Agrofy spent a month optimizing their website because they
+hypothesized that improved performance would lead to reduced bounce rates. They
+specifically focused on improving [LCP](/lcp/), which is one of
+the [Core Web Vitals](/vitals/#core-web-vitals). These
+performance optimizations led to a 70% improvement in LCP, which correlated to a
+76% reduction in load abandonment (from 3.8% to 0.9%).
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">70<sub>%</sub></p>
+    <p>Lower LCP</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">76<sub>%</sub></p>
+    <p>Lower load abandonment</p>
+  </div>
+</div>
+
+## Problem
+
+While studying their business metrics, a development team at Agrofy noticed
+that their bounce rates seemed higher than industry benchmarks. Technical
+debt was also increasing in the website codebase.
+
+## Solution
+
+The Agrofy team pitched their executives and got buy-in to:
+
++   Migrate from an older, deprecated framework to a newer, actively
+    supported one.
++   Optimize the load performance of the new codebase.
+
+The migration took 2 months. Aside from the 4-person development team mentioned
+earlier, this migration also involved product and UX specialists and a software
+architect.
+The optimization project took the 4-person development team 1 month. They
+focused on LCP, [CLS](/cls/) (another Core Web Vitals metric),
+and [FCP](/fcp/). Specific optimizations included:
+
++   Lazy loading all non-visible elements with the
+    [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).
++   Delivering static resources faster with a [content delivery
+    network](/content-delivery-networks/).
++   [Lazy loading images](/browser-level-image-lazy-loading/)
+    with `loading="lazy"`.
++   [Server-side rendering](/rendering-on-the-web/)
+    of
+    [critical rendering path](/critical-rendering-path/)
+    content.
++   [Preloading and preconnecting](/fast/#optimize-your-resource-delivery)
+    critical resources to minimize handshake times.
++   Using real user monitoring (RUM) tools to identify which product detail
+    pages were experiencing lots of layout shifts and then make adjustments to
+    the codebase's architecture.
+
+Check out the
+[Agrofy engineering blog post](https://mollar-luciano.medium.com/how-agrofy-optimised-core-web-vitals-and-improved-business-metrics-2f73311bca)
+for more technical details.
+
+After enabling the new codebase on 20% of traffic, they launched the new site to
+all visitors in early September 2020.
+
+## Results
+
+The development team's optimizations led to measurable improvements in many
+different metrics:
+
++   LCP improved 70%.
++   CLS improved 72%.
++   Blocking JS requests reduced 100% and blocking CSS requests 80%.
++   [Long tasks](/long-tasks-devtools/) reduced 72%.
++   [First CPU Idle](https://developer.chrome.com/docs/lighthouse/performance/first-cpu-idle/) improved 25%.
+
+Over the same time frame, real user monitoring data (also known as [field
+data](/how-to-measure-speed/#lab-data-vs-field-data)) showed that
+the load abandonment rate on product detail pages dropped 76%, from 3.8% to
+0.9%:
+
+
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2lMYiXdjh5aLr4UIMVJF.png", alt="A graph showing load abandonment rate decrease of 76% on the product details page after performance optimizations.", width="800", height="461" %}
+  <figcaption>
+    Load abandonment rate trend on product detail page.
+  </figcaption>
+</figure>
+
+
diff --git a/src/site/content/en/blog/airhorner/index.md b/src/site/content/en/blog/airhorner/index.md
new file mode 100644
index 00000000000..6ae0cca91e0
--- /dev/null
+++ b/src/site/content/en/blog/airhorner/index.md
@@ -0,0 +1,52 @@
+---
+layout: post
+title: AirHorner.com
+description: |
+    AirHorner is a simple but powerful Progressive Web App that shows the power of Service Workers and the Web Audio API to give you your very own air horn. Use it to annoy your friends or co-workers, no matter whether you're online, offline or on a flaky 2G network
+date: 2015-10-16
+updated: 2015-10-16
+tags:
+  - blog
+  - case-study
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jl0fjnn688WfsNXJElRf.png", alt="Airhorner detail", width="800", height="1343" %}
+</figure>
+
+## Summary
+
+[AirHorner](https://airhorner.com/) is a simple air horn.
+
+## What we like?
+
+There is a little bit of bias here, the author of this post wrote the app.  But in summary, it is installable and works offline.
+
+## Possible Improvements
+
+Is the fact that it is incredibly annoying not enough?
+
+## Q & A with Paul Kinlan
+
+### Why the web?
+
+I built this app because I wanted to show users and developers that not
+every single app needs to be a native app, and for an experience such as
+this where it is only meant to be used once in a while, but feel like it should
+be installed. The web is an ideal distribution platform for this.
+
+### Are you worried that service worker is not yet in all browsers?
+
+No. I made this app to load quickly irrespective of the browser being used,
+service worker for installability and offline is an added bonus that should
+delight users. My thought at the time was that if a user adds this app to the
+home screen then it **must** work where ever the user is irrespective of the
+connectivity.
+
+### If you could have any API to improve your app, what would it be?
+
+**Web Intents** but everyone knows that.  Actually, Web Intents wouldn't have
+been useful for this app.  One area that I would love to see expanded is
+Payments, I could quite easily see that having a quick way to buy new sounds
+etc would be quite nice.
+
diff --git a/src/site/content/en/blog/ali-express-smart-lock/index.md b/src/site/content/en/blog/ali-express-smart-lock/index.md
new file mode 100644
index 00000000000..77726d5ae57
--- /dev/null
+++ b/src/site/content/en/blog/ali-express-smart-lock/index.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Smart Lock for AliExpress
+date: 2016-09-29
+updated: 2017-10-09
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/63QdzF1WyEdvnOqlb3xN.png", alt="Smart Lock detail", width="800", height="1422" %}
+</figure>
+
+
+### Results
+
+- 11% increase in conversion rate
+- 50% of all new users signed up with the hint selector dialog
+- 95% of users have saved their credentials to Smart Lock for seamless return next time
+- 85% drop in failures for web sign in
+- 60% decrease in time spent signing in to website
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/LF6skFst8mLdwVbiaqBZ.pdf)
+
+## Company
+Launched in April 2010, AliExpress is a global retail marketplace targeted at
+consumers worldwide. The platform enables consumers from around the world to buy
+directly from wholesalers and manufacturers in China through access to products
+at competitive prices. AliExpress is a business within the Alibaba Group.
+
+## Challenges
+Shoppers from over 200 countries and regions have downloaded the AliExpress app
+or used its desktop and mobile websites. In order to make a purchase, users are
+required to enter their account information each time, which can be unpleasant.
+In addition, users sometimes forget their login information, requiring them to
+leave the app and reset their passwords. This is especially problematic when
+moving cross platform in the middle of a purchase.
+
+## Solution
+With Smart Lock, AliExpress was able to improve the user experience in their app
+and websites: it’s faster for users to login and start the shopping journey,
+users do not need to constantly remember their passwords, and users can be
+automatically signed in when moving between platforms like Android and Chrome
+web.
+
+Smart Lock on Android prefills 3 out of the 4 required onboarding fields (Email,
+First Name, Last Name), reducing manual typing errors. 50% of all new users on
+the native app are signed up with the hint selector dialog, and 95% of users
+have saved their credentials to Smart Lock for seamless return next time.
+
+After implementing Smart Lock on Chrome with the Credential Management API,
+there was a 85% drop in failures during sign-in and a 60% decrease in time spent
+signing in.
+
+It was easy for AliExpress to implement Smart Lock. It took only one engineer
+and about three days to implement and test the API on Android and a similar
+amount of effort on Chrome.
+
+{% Blockquote 'Lijun Chen, Director of AliExpress Mobile Team' %}
+Since implementing Smart Lock, we’ve been continuously impressed by the
+improving data and positive user feedback. This is one of our greatest
+accomplishments when it comes to optimizing the user experience for our
+sign in process. We’ve seen a reduction in user name and password errors.
+Smart Lock is a great product.
+{% endBlockquote %}
+
+## Learn more about Smart Lock
+
+Users save passwords to Google from Chrome or Android and passwords are made
+available across platforms.
+
+Find out more at: [g.co/smartlock#for-passwords](https://g.co/smartlock#for-passwords)
diff --git a/src/site/content/en/blog/alibaba/index.md b/src/site/content/en/blog/alibaba/index.md
new file mode 100644
index 00000000000..6512c87e0d0
--- /dev/null
+++ b/src/site/content/en/blog/alibaba/index.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: Alibaba
+description: |
+  Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.
+date: 2016-11-09
+updated: 2017-02-15
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+## Summary
+
+**Alibaba.com increases conversions on the mobile web by 76% with
+Progressive Web App.**
+
+### Results
+
+- 76% higher conversions across browsers
+- 14% more monthly active users on iOS; 30% on Android
+- 4X higher interaction rate from Add to Homescreen
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/fk7h9pfAAR2Ng6or3DVL.pdf)
+
+## About Alibaba
+
+Alibaba.com is the world’s largest online business-to-business (B2B) trading
+platform, serving 200+ countries and regions. After upgrading their site to a
+Progressive Web App (PWA), they saw a 76 percent increase in total
+conversions across browsers.
+
+
+## Challenge
+
+Building great mobile experiences is an indispensable part of Alibaba.com’s
+success. The mobile web is their primary platform for discovery on mobile, so
+they’ve always focused on design and functionality. They found it difficult
+to build an engaging experience for the mobile web, however. They looked at
+the mobile web as a platform to shift non-app users to the app, but many
+preferred to stay within a browser.
+
+{% Blockquote 'Zou Yu, director of Alibaba.com’s mobile team' %}
+Users consider having to download an app to browse or complete a
+transaction an unnecessary barrier, compared to the quick, easy solution
+of browsing directly from their mobile browser
+{% endBlockquote %}
+
+## Solution
+
+Alibaba.com recognized that to build an effective mobile presence, they needed
+to understand how two different user segments—native app users and mobile web
+users—interacted with their business. They wanted to deliver a great user
+experience for both first-time visitors (in the hopes of re-engaging them) and
+repeat visitors (who are more loyal to the site). Alibaba.com built a PWA that
+led to a fast, effective, and reliable mobile web experience. The new strategy
+delivered a 76 percent increase in total conversions across browsers. (A
+conversion corresponds to visits that result in direct contact with a supplier.)
+
+
+For mobile web users on Android, Alibaba.com integrated features that helped
+users re-engage with the site. The company implemented an "Add to Home Screen"
+prompt, which resulted in users re-engaging four times more often than other
+mobile users. They also noticed that re-engagement on the web was comparable to
+that of their native app. For push notifications, the open rate on the mobile
+web is the same as that on the native app.
+
+
+The new strategy also delivered a much better user experience across platforms.
+The investment in the mobile web increased monthly active user rates on iOS by
+14 percent. On Android devices where re-engagement capabilities like push
+notifications and Add to Home Screen were enabled, active user rates increased
+by 30 percent.
+
+{% Blockquote 'Zou Yu, director of Alibaba.com’s mobile team' %}
+Delivering a mobile-first, user-centric mobile site that harnesses the
+best of the native app, with all the accessibility and versatility of the
+mobile web, is key to maintaining our competitive edge and the path to
+better conversions.
+{% endBlockquote %}
+
diff --git a/src/site/content/en/blog/aliexpress/index.md b/src/site/content/en/blog/aliexpress/index.md
new file mode 100644
index 00000000000..232b9a1f6b1
--- /dev/null
+++ b/src/site/content/en/blog/aliexpress/index.md
@@ -0,0 +1,65 @@
+---
+layout: post
+title: AliExpress
+date: 2016-05-17
+updated: 2016-05-17
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+### Summary {: .hide-from-toc }
+
+AliExpress increases conversion rate for new users by 104% with new
+Progressive Web App
+
+### Results
+
+- 104% for new users across all browsers; 82%
+increase in iOS conversion rate
+- 2X more pages visited per session per user
+across all browsers
+- 74% increase in time spent per session
+across all browsers
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/ODQ7ENAMWwMMS9SoQxup.pdf)
+
+## About AliExpress
+
+"Smarter shopping, better living!" is the motto of AliExpress, a website where
+shoppers can buy everything from baby clothes to refrigerators directly from
+China. Part of the Alibaba Group, the global online retail marketplace is now
+a popular e-commerce site in America, Russia, and Brazil.
+
+## Challenge
+
+Building great mobile experiences is an indispensable part of AliExpress’
+success, as mobile commerce is growing [three times](http://www.demacmedia.com/infographic/mobile-commerce/)
+faster than e-commerce. The mobile web is their primary platform for discovery
+so they have always focused its design and functionality. But AliExpress found
+it difficult to build an engaging experience on the web that was as fast as
+their mobile app. They looked at the mobile web as a platform to transition a
+non-app user to an app user. Not everyone downloaded their app, however, and
+getting users to install and re-engage with it was challenging and costly.
+
+## Solution
+
+AliExpress looked for a way to provide all of their web users with the benefits
+of their app, such as performance and the ability to work offline and re-engage
+users. They built a cross-browser Progressive Web App ([https://m.aliexpress.com](https://m.aliexpress.com))
+to combine the best of their app with the broad reach of the web.
+
+After implementing their Progressive Web App, AliExpress saw conversion rates
+for new users increase by 104%. This investment in the mobile web also resulted
+in conversion rates on Safari increasing by 82%. The new strategy also
+delivered a much better experience. Users now visit twice as many pages per
+session, and time spent per session increased an average of 74% across all
+browsers.
+
+{% Blockquote 'Lijun Chen, director of AliExpress Mobile Team.' %}
+One of the reasons we built a Progressive Web App was to be able to invest
+in the web experience across all browsers. Not only did we see huge benefits
+on browsers that support the latest features, but we also got to see a bump
+across the board. That is the sign of a great investment, and one that will
+keep paying for itself as browsers evolve.
+{% endBlockquote %}
diff --git a/src/site/content/en/blog/angular-websockets/index.md b/src/site/content/en/blog/angular-websockets/index.md
new file mode 100644
index 00000000000..6dcbd7a4218
--- /dev/null
+++ b/src/site/content/en/blog/angular-websockets/index.md
@@ -0,0 +1,381 @@
+---
+layout: post
+title: Writing an AngularJS App with Socket.IO
+authors:
+  - brianford
+date: 2012-07-27
+tags:
+  - blog
+---
+
+## Introduction
+
+[AngularJS](http://angularjs.org) is an awesome JavaScript framework that gives you two-way data binding that's both easy to use and fast, a powerful directive system that lets you use create reusable custom components, plus a lot more. Socket.IO is a cross-browser wrapper and polyfill for websockets that makes developing real-time applications a breeze. Incidentally, the two work quite well together!
+
+I've written before about [writing an AngularJS app with Express](http://briantford.com/blog/angular-express.html), but this time I'll be writing about how to integrate <a href="">[Socket.IO](http://socket.io/) to add real-time features to an AngularJS application. In this tutorial, I'm going to walk through writing a instant messaging app. This builds upon my earlier tutorial (using a similar node.js stack on the server), so I recommend checking that out first if you're not familiar with Node.js or Express.
+
+[Open the Demo](http://btford.angular-socket-io-im.jit.su/)
+
+
+As always, you can [get the finished product on Github](https://github.com/btford/angular-socket-io-im).
+
+## Prerequisites
+
+There's a bit of boilerplate to getting Socket.IO set up and integrated with Express, so I created the [Angular Socket.IO Seed](https://github.com/btford/angular-socket-io-seed).
+
+To get started, you can either clone the angular-node-seed repo from Github:
+
+```shell
+git clone git://github.com/btford/angular-socket-io-seed my-project
+```
+
+or [download it as a zip](https://github.com/btford/angular-socket-io-seed/zipball/master).
+
+Once you have the seed, you need to grab a few dependencies with npm. Open a terminal to the directory with the seed, and run:
+
+```shell
+npm install
+```
+
+With these dependencies installed, you can run the skeleton app:
+
+```shell
+node app.js
+```
+
+and see it in your browser at `http://localhost:3000` to ensure that the seed is working as expected.
+
+## Deciding on App Features
+
+There are more than a few different ways to write a chat application, so let's describe the minimal features that ours will have. There will be just one chat room that all users will belong to. Users can choose and change their name, but the names must be unique. The server will enforce this uniqueness and announce when users change their names. The client should expose a list of messages, and a list of users currently in the chat room.
+
+## A Simple Front End
+
+With this specification, we can make a simple front end with Jade that provies the necessary UI elements. Open `views/index.jade` and add this inside of `block body`:
+
+```css
+div(ng-controller='AppCtrl')
+.col
+  h3 Messages
+  .overflowable
+    p(ng-repeat='message in messages') {{message.user}}: {{message.text}}
+
+.col
+  h3 Users
+  .overflowable
+    p(ng-repeat='user in users') {{user}}
+
+.clr
+  form(ng-submit='sendMessage()')
+    | Message: 
+    input(size='60', ng-model='message')
+    input(type='submit', value='Send')
+
+.clr
+  h3 Change your name
+  p Your current user name is {{name}}
+  form(ng-submit='changeName()')
+    input(ng-model='newName')
+    input(type='submit', value='Change Name')
+```
+
+Open `public/css/app.css` and add the CSS to provide columns and overflows:
+
+```css
+/* app css stylesheet */
+
+.overflowable {
+  height: 240px;
+  overflow-y: auto;
+  border: 1px solid #000;
+}
+
+.overflowable p {
+  margin: 0;
+}
+
+/* poor man's grid system */
+.col {
+  float: left;
+  width: 350px;
+}
+
+.clr {
+  clear: both;
+}
+```
+
+## Interacting with Socket.IO
+
+Although Socket.IO exposes an `io` variable on the `window`, it's better to encapsulate it in AngularJS's [Dependency Injection system](http://docs.angularjs.org/guide/di). So, we'll start by writing a service to wrap the `socket` object returned by Socket.IO. This is awesome, because it will make it much easier to test our controller later. Open `public/js/services.js` and replace the contents with:
+
+```js
+app.factory('socket', function ($rootScope) {
+  var socket = io.connect();
+  return {
+    on: function (eventName, callback) {
+      socket.on(eventName, function () {  
+        var args = arguments;
+        $rootScope.$apply(function () {
+          callback.apply(socket, args);
+        });
+      });
+    },
+    emit: function (eventName, data, callback) {
+      socket.emit(eventName, data, function () {
+        var args = arguments;
+        $rootScope.$apply(function () {
+          if (callback) {
+            callback.apply(socket, args);
+          }
+        });
+      })
+    }
+  };
+});
+```
+
+Notice that we wrap each socket callback in `$scope.$apply`. This tells AngularJS that it needs to check the state of the application and update the templates if there was a change after running the callback passed to it. Internally, `$http` works in the same way; after some XHR returns, it calls `$scope.$apply`, so that AngularJS can update its views accordingly.
+
+Note that this service doesn't wrap the entire Socket.IO API (that's left as an exercise for the reader ;P ). However, it covers the methods used in this tutorial, and should point you in the right direction if you want to expand on it. I may revisit writing a complete wrapper, but that's beyond the scope of this tutorial.
+
+Now, within our controller, we can ask for the `socket` object, much like we would with `$http`:
+
+```js
+function AppCtrl($scope, socket) {
+  /* Controller logic */
+}
+```
+
+Inside the controller, let's add logic for sending and receiving messages. Open `js/public/controllers.js` and replace the contents with the following:
+
+```js
+function AppCtrl($scope, socket) {
+
+  // Socket listeners
+  // ================
+
+  socket.on('init', function (data) {
+    $scope.name = data.name;
+    $scope.users = data.users;
+  });
+
+  socket.on('send:message', function (message) {
+    $scope.messages.push(message);
+  });
+
+  socket.on('change:name', function (data) {
+    changeName(data.oldName, data.newName);
+  });
+
+  socket.on('user:join', function (data) {
+    $scope.messages.push({
+      user: 'chatroom',
+      text: 'User ' + data.name + ' has joined.'
+    });
+    $scope.users.push(data.name);
+  });
+
+  // add a message to the conversation when a user disconnects or leaves the room
+  socket.on('user:left', function (data) {
+    $scope.messages.push({
+      user: 'chatroom',
+      text: 'User ' + data.name + ' has left.'
+    });
+    var i, user;
+    for (i = 0; i &lt; $scope.users.length; i++) {
+      user = $scope.users[i];
+      if (user === data.name) {
+        $scope.users.splice(i, 1);
+        break;
+      }
+    }
+  });
+
+  // Private helpers
+  // ===============
+
+  var changeName = function (oldName, newName) {
+    // rename user in list of users
+    var i;
+    for (i = 0; i &lt; $scope.users.length; i++) {
+      if ($scope.users[i] === oldName) {
+        $scope.users[i] = newName;
+      }
+    }
+
+    $scope.messages.push({
+      user: 'chatroom',
+      text: 'User ' + oldName + ' is now known as ' + newName + '.'
+    });
+  }
+
+  // Methods published to the scope
+  // ==============================
+
+  $scope.changeName = function () {
+    socket.emit('change:name', {
+      name: $scope.newName
+    }, function (result) {
+      if (!result) {
+        alert('There was an error changing your name');
+      } else {
+
+        changeName($scope.name, $scope.newName);
+
+        $scope.name = $scope.newName;
+        $scope.newName = '';
+      }
+    });
+  };
+
+  $scope.sendMessage = function () {
+    socket.emit('send:message', {
+      message: $scope.message
+    });
+
+    // add the message to our model locally
+    $scope.messages.push({
+      user: $scope.name,
+      text: $scope.message
+    });
+
+    // clear message box
+    $scope.message = '';
+  };
+}
+```
+
+This application will only feature one view, so we can remove the routing from `public/js/app.js` and simplify it to:
+
+```js
+// Declare app level module which depends on filters, and services
+var app = angular.module('myApp', ['myApp.filters', 'myApp.directives']);
+```
+
+## Writing the Server
+
+Open `routes/socket.js`. We need to define an object for maintaining the state of the server, so that user names are unique.
+
+```js
+// Keep track of which names are used so that there are no duplicates
+var userNames = (function () {
+  var names = {};
+
+  var claim = function (name) {
+    if (!name || userNames[name]) {
+      return false;
+    } else {
+      userNames[name] = true;
+      return true;
+    }
+  };
+
+  // find the lowest unused "guest" name and claim it
+  var getGuestName = function () {
+    var name,
+      nextUserId = 1;
+
+    do {
+      name = 'Guest ' + nextUserId;
+      nextUserId += 1;
+    } while (!claim(name));
+
+    return name;
+  };
+
+  // serialize claimed names as an array
+  var get = function () {
+    var res = [];
+    for (user in userNames) {
+      res.push(user);
+    }
+
+    return res;
+  };
+
+  var free = function (name) {
+    if (userNames[name]) {
+      delete userNames[name];
+    }
+  };
+
+  return {
+    claim: claim,
+    free: free,
+    get: get,
+    getGuestName: getGuestName
+  };
+}());
+```
+
+This basically defines a set of names, but with APIs that make more sense for the domain of a chat server. Let's hook this up to the server's socket to respond to the calls that our client makes:
+
+```js
+// export function for listening to the socket
+module.exports = function (socket) {
+  var name = userNames.getGuestName();
+
+  // send the new user their name and a list of users
+  socket.emit('init', {
+    name: name,
+    users: userNames.get()
+  });
+
+  // notify other clients that a new user has joined
+  socket.broadcast.emit('user:join', {
+    name: name
+  });
+
+  // broadcast a user's message to other users
+  socket.on('send:message', function (data) {
+    socket.broadcast.emit('send:message', {
+      user: name,
+      text: data.message
+    });
+  });
+
+  // validate a user's name change, and broadcast it on success
+  socket.on('change:name', function (data, fn) {
+    if (userNames.claim(data.name)) {
+      var oldName = name;
+      userNames.free(oldName);
+
+      name = data.name;
+
+      socket.broadcast.emit('change:name', {
+        oldName: oldName,
+        newName: name
+      });
+
+      fn(true);
+    } else {
+      fn(false);
+    }
+  });
+
+  // clean up when a user leaves, and broadcast it to other users
+  socket.on('disconnect', function () {
+    socket.broadcast.emit('user:left', {
+      name: name
+    });
+    userNames.free(name);
+  });
+};
+```
+
+And with that, the application should be complete. Try it out by running `node app.js`. The application should update in real-time, thanks to Socket.IO.
+
+## Conclusion
+
+There's a lot more you could add to this instant messaging app. For instance, you can submit empty messages. You could use [`ng-valid`](http://docs.angularjs.org/api/ng.directive:form) to prevent this on the client side, and a check on the server. Maybe the server could keep a recent history of messages for the benefit of new users joining the app.
+
+Writing AngularJS apps that make use of other libraries is easy once you understand how to wrap them in a service and notify Angular that a model has changed. Next I plan to cover using AngularJS with [D3.js](http://d3js.org/), the popular visualization library.
+
+## References
+
+[Angular Socket.IO Seed](https://github.com/btford/angular-socket-io-seed)
+[Finished Instant Messaging App](https://github.com/btford/angular-socket-io-im)
+[AngularJS](http://angularjs.org/)
+[Express](http://expressjs.com/)
+[Socket.IO](http://socket.io/)`
diff --git a/src/site/content/en/blog/animating-between-views/index.md b/src/site/content/en/blog/animating-between-views/index.md
new file mode 100644
index 00000000000..3c3727ad395
--- /dev/null
+++ b/src/site/content/en/blog/animating-between-views/index.md
@@ -0,0 +1,132 @@
+---
+title: Animating Between Views
+subhead: Learn how to animate between two views in your apps.
+authors:
+  - paullewis
+date: 2014-08-08
+updated: 2019-08-11
+description: |
+  Learn how to animate between two views in your apps.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+Often, you want to move users between views in your application, whether that's from a list to a details view, or show a sidebar navigation. Animations between these views keep the user engaged and add even more life to your projects.
+
+* Use translations to move between views; avoid using `left`, `top`, or any other property that triggers layout.
+* Ensure that any animations you use are snappy and the durations are kept short.
+* Consider how your animations and layouts change as the screen sizes go up; what works for a smaller screen may look odd when used in a desktop context.
+
+What these view transitions look and behave like depends on the type of views you’re dealing with. For example, animating a modal overlay on top of a view should be a different experience from transitioning between a list and details view.
+
+Success: Try to maintain 60fps for all of your animations. That way, your users won't see stuttering animations that interfere with their experience. Ensure that any animating element has `will-change` set for anything you plan to change well ahead of the animation starting. For view transitions, it’s highly likely you will want to use `will-change: transform`.
+
+## Use translations to move between views
+
+<figure class="float-left">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZbdixE36RlDboM08jwGH.gif", alt="Translating between two views.", width="320", height="404" %}
+</figure>
+
+To make life easier, assume that there are two views: a list view and a details view. As the user taps a list item inside the list view, the details view slides in, and the list view slides out.
+
+<figure class="float-right">
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5t4foOL1MBvOiAD4XbFD.svg", alt="View hierarchy.", width="309", height="148" %}
+</figure>
+
+To achieve this effect, you need a container for both views that has `overflow: hidden` set on it. That way, the two views can both be inside the container side-by-side without showing any horizontal scrollbars, and each view can slide side-to-side inside the container as needed.
+
+
+The CSS for the container is:
+
+```css
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+```
+
+The position of the container is set as `relative`. This means that each view inside it can be positioned absolutely to the top left corner and then moved around with transforms. This approach is better for performance than using the `left` property (because that triggers layout and paint), and is typically easier to rationalize.
+
+```css
+.view {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  /* let the browser know we plan to animate
+     each view in and out */
+  will-change: transform;
+}
+```
+
+Adding a `transition` on the `transform` property provides a nice slide effect. To give it a nice feel, it’s using a custom `cubic-bezier` curve, which we discussed in the [Custom Easing guide](custom-easing).
+
+```css
+.view {
+  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+```
+
+The view that is offscreen should be translated to the right, so in this case the details view needs to be moved:
+
+```css
+.details-view {
+  transform: translateX(100%);
+}
+```
+
+Now a small amount of JavaScript is necessary to handle the classes. This toggles the appropriate classes on the views.
+
+```js
+var container = document.querySelector('.container');
+var backButton = document.querySelector('.back-button');
+var listItems = document.querySelectorAll('.list-item');
+
+/**
+    * Toggles the class on the container so that
+    * we choose the correct view.
+    */
+function onViewChange(evt) {
+    container.classList.toggle('view-change');
+}
+
+// When you click a list item, bring on the details view.
+for (var i = 0; i < listItems.length; i++) {
+    listItems[i].addEventListener('click', onViewChange, false);
+}
+
+// And switch it back again when you click the back button
+backButton.addEventListener('click', onViewChange);
+```
+
+Finally, we add the CSS declarations for those classes.
+
+```css
+.view-change .list-view {
+  transform: translateX(-100%);
+}
+
+.view-change .details-view {
+  transform: translateX(0);
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/inter-view-animation.html)
+
+You could expand this to cover multiple views, and the basic concept should remain the same; each non-visible view should be offscreen and brought on as needed, and the currently onscreen view should be moved off.
+
+Caution: Making this kind of hierarchy in a cross-browser way can be challenging. For example, iOS requires an additional CSS property, <code>-webkit-overflow-scrolling: touch</code>, to "reenable" fling scrolling, but you don’t get to control which axis that’s for, as you can with the standard overflow property. Be sure to test your implementation across a range of devices!
+
+In addition to transitioning between views, this technique can also be applied to other slide-in elements, like sidebar navigation elements. The only real difference is that you shouldn’t need to move the other views.
+
+## Ensure that your animation works with larger screens
+
+<figure class="float-right">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1unXXqFlFcKCktBXERJR.svg", alt="View hierarchy on a large screen.", width="282", height="292" %}
+</figure>
+
+For a larger screen, you should keep the list view around all the time rather than removing it, and slide on the details view from the right-hand side. It’s pretty much the same as dealing with a navigation view.
diff --git a/src/site/content/en/blog/animating-modal-views/index.md b/src/site/content/en/blog/animating-modal-views/index.md
new file mode 100644
index 00000000000..78f95fa0b13
--- /dev/null
+++ b/src/site/content/en/blog/animating-modal-views/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: Animating Modal Views
+subhead: Modal views block the user interface to display important messages. Learn how to animate modal views in your apps.
+authors:
+  - paullewis
+date: 2014-08-08
+updated: 2019-08-07
+description: Learn how to animate modal views in your apps.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IysQk9ksWLJvaV3KhS83.gif", alt="Animating a modal view.", width="320", height="405" %}
+    <figcaption>
+      <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/modal-view-animation.html" target="_blank" class="external">Try it</a>
+    </figcaption>
+  </figure>
+
+Modal views are for important messages, and for which you have very good reasons to block the user interface. Use them carefully, because they're disruptive and can easily ruin the user’s experience if overused. But, in some circumstances, they’re the right views to use, and adding some animation will bring them to life.
+
+* Use modal views sparingly; users get frustrated if you interrupt their experience unnecessarily.
+* Adding scale to the animation gives a nice "drop on" effect.
+* Get rid of the modal view quickly when the user dismisses it. However, bring the modal view onto the screen a little more slowly so that it doesn't surprise the user.
+
+
+The modal overlay should be aligned to the viewport, so set its `position` to `fixed`:
+
+```css
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
+  opacity: 0;
+
+  will-change: transform, opacity;
+}
+```
+
+It has an initial `opacity` of 0, so it's hidden from view, but then it also needs `pointer-events` set to `none` so that clicks and touches pass through. Without that, it blocks all interactions, rendering the whole page unresponsive. Finally, because it animates its `opacity` and `transform`, those need to be marked as changing with `will-change` (see also [Using the will-change property](/animations-and-performance/#using-the-will-change-property)).
+
+When the view is visible, it needs to accept interactions and have an `opacity` of 1:
+
+```css
+.modal.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+```
+
+Now whenever the modal view is required, you can use JavaScript to toggle the "visible" class:
+
+```js
+modal.classList.add('visible');
+```
+
+At this point, the modal view appears without any animation, so you can now add that in
+(see also [Custom Easing](/custom-easing/)):
+
+```css
+.modal {
+  transform: scale(1.15);
+
+  transition:
+    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
+    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+```
+
+Adding `scale` to the transform makes the view appear to drop onto the screen slightly, which is a nice effect. The default transition applies to both transform and opacity properties with a custom curve and a duration of 0.1 seconds.
+
+The duration is pretty short, though, but it's ideal for when the user dismisses the view and wants to get back to your app. The downside is that it’s probably too aggressive for when the modal view appears. To fix this, override the transition values for the `visible` class:
+
+```css
+.modal.visible {
+  transform: scale(1);
+
+  transition:
+    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
+    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+```
+
+Now the modal view takes 0.3 seconds to come onto the screen, which is a bit less aggressive, but it is dismissed quickly, which the user will appreciate.
+
diff --git a/src/site/content/en/blog/animations-and-performance/index.md b/src/site/content/en/blog/animations-and-performance/index.md
new file mode 100644
index 00000000000..fba2586c5fa
--- /dev/null
+++ b/src/site/content/en/blog/animations-and-performance/index.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: Animations and performance
+subhead: Animations must perform well, otherwise they will negatively impact the user experience.
+authors:
+  - paullewis
+  - samthorogood
+date: 2014-08-08
+updated: 2019-08-09
+description: Animations must perform well, otherwise they will negatively impact the user experience.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+Maintain 60fps whenever you are animating, because any less results in stutters or stalls that will be noticeable to your users and negatively impact their experiences.
+
+* Take care that your animations don’t cause performance issues; ensure that you know the impact of animating a given CSS property.
+* Animating properties that change the geometry of the page (layout) or cause painting are particularly expensive.
+* Where you can, stick to changing transforms and opacity.
+* Use <code>will-change</code> to ensure that the browser knows what you plan to animate.
+
+
+Animating properties is not free, and some properties are cheaper to animate than others. For example, animating the `width` and `height` of an element changes its geometry and may cause other elements on the page to move or change size. This process is called *layout* (or *reflow* in Gecko-based browsers like Firefox), and can be expensive if your page has a lot of elements. Whenever layout is triggered, the page or part of it will normally need to be painted, which is typically even more expensive than the layout operation itself.
+
+Where you can, you should avoid animating properties that trigger layout or paint. For most modern browsers, this means limiting animations to `opacity` or `transform`, both of which the browser can highly optimize; it doesn’t matter if the animation is handled by JavaScript or CSS.
+
+Read a full guide on creating [high performance animations](/animations-guide/).
+
+### Using the `will-change` property
+
+{% BrowserCompat 'css.properties.will-change' %}
+
+Use the [`will-change`](https://dev.w3.org/csswg/css-will-change/) to ensure the browser knows that you intend to change an element’s property. This allows the browser to put the most appropriate optimizations in place ahead of when you make the change. Don't overuse `will-change`, however, because doing so can cause the browser to waste resources, which in turn causes even more performance issues.
+
+The general rule of thumb is that if the animation might be triggered in the next 200ms, either by a user’s interaction or because of your application’s state, then having `will-change` on animating elements is a good idea. For most cases, then, any element in your app’s current view that you intend to animate should have `will-change` enabled for whichever properties you plan to change. In the case of the box sample we’ve been using throughout the previous guides, adding `will-change` for transforms and opacity looks like this:
+
+```css
+.box {
+  will-change: transform, opacity;
+}
+```
+
+Now the browsers that support it, [currently most modern browsers](https://caniuse.com/#feat=will-change), will make the appropriate optimizations under the hood to support changing or animating those properties.
+
+## CSS vs JavaScript performance
+
+There are many pages and comments threads around the web that discuss the relative merits of CSS and JavaScript animations from a performance perspective. Here are a few points to keep in mind:
+
+* CSS-based animations, and Web Animations where supported natively, are typically handled on a thread known as the "compositor thread". This is different from the browser's "main thread", where styling, layout, painting, and JavaScript are executed. This means that if the browser is running some expensive tasks on the main thread, these animations can keep going without being interrupted.
+
+* Other changes to transforms and opacity can, in many cases, also be handled by the compositor thread.
+
+* If any animation triggers paint, layout, or both, the "main thread" will be required to do work. This is true for both CSS- and JavaScript-based animations, and the overhead of layout or paint will likely dwarf any work associated with CSS or JavaScript execution, rendering the question moot.
diff --git a/src/site/content/en/blog/antialiasing-101/index.md b/src/site/content/en/blog/antialiasing-101/index.md
new file mode 100644
index 00000000000..7785da65362
--- /dev/null
+++ b/src/site/content/en/blog/antialiasing-101/index.md
@@ -0,0 +1,105 @@
+---
+layout: post
+title: Antialiasing 101
+authors:
+  - paullewis
+date: 2013-06-28
+tags:
+  - blog
+---
+
+## Introduction
+
+Antialiasing is something of an unsung hero in web graphics; it’s the reason we have clear text and smooth vector shapes on our screens. There are actually a couple of approaches to antialiasing used in browsers today which are most obvious when it comes to text rendering. When the algorithm used for antialising switches it can lead to unexpected visual results. In this article we’ll take a look at the approaches to antialiasing and see how the pixels get drawn.
+
+All of our screens are made up, as we all know, of pixels. It’s a giant grid of blocks, and each one contains red, green and blue (RGB) components. At a distance we see images, text and icons, but up close we can actually see the grid of RGB components and how everything is made up.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/v3n2et6F22tiQgQeCw6O.jpg", alt="Pixels of a screen up close. Each pixel has red, green and blue components", width="800", height="350" %}
+  <figcaption>
+    Figure 1 - Pixels of a screen up close. Each pixel has red, green and blue components.
+  </figcaption>
+</figure>
+
+## Antialiasing
+
+So what happens when we’re drawing a vector shape and it passes through “part” of a pixel? Let’s assume that the shape we’re drawing is black and the background is white. Should we color that pixel at all? If we color it, what color should it be? Black, gray, something else?
+
+The process of antialiasing determines which color we should use when we’re filling in pixels. The simplest version of it is called grayscale antialiasing, and it treats the three components of the pixels equally. So if the pixel is half covered  -  and let's assume black text on white for a second to keep it simple  -  you'd think each component will be set to half brightness (I know I certainly did), but actually it's more complex than that: you have to account for gamma, which means you'll likely never set it to that exact value. That of course makes things a little trickier, but since this is an introduction to the topic I won't dive into that here. The important thing to know is that grayscale antialiasing is dealt with at the __pixel level__ and we can, in fact, do much better.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FrvezWNFi0mc2fpkuaQT.png", alt="Figure 2 - Antialiased vs hard edges", width="800", height="339" %}
+  <figcaption>
+    Figure 2 - Antialiased vs hard edges
+  </figcaption>
+</figure>
+
+In Figure 2 you can see the same triangle being drawn, but on the left it has antialiasing enabled and on the right it’s been disabled. As you can see, when antialiasing is enabled the pixels are shades of gray when the triangle only passes through part of the pixel. When disabled, however, the pixel is filled in as either solid black or solid white and the shape looks jagged.
+
+## Text Rendering
+
+Whenever a browser is rendering text, which is essentially a vector shape, we will come up against the same problem: the characters of text will only partially fill some pixels so we will want to have a strategy for how to fill in those pixels. Ideally we want the text to be antialiased as it will make it easier and more pleasant to read.
+
+It turns out, however, that the grayscale approach to antialiasing is only __one way__ to handle it. An approach that is often taken is to be a bit more selective with how we enable the RGB components of the pixels. The process is called subpixel antialiasing and over the years the ClearType team at Microsoft in particular have invested a great deal of time and effort to make progress on it. It’s now much more widely used, and all the major browsers use it to a greater or lesser degree.
+
+Firstly, since we know that each pixel is in fact made up of separate red, green and blue components we detect how much of each of those components should be “switched on” for the pixel in question. So if a pixel is “half covered” from the left hand side then we might switch on the red component totally, the green component to half way, and keep the blue switched off. This process is often described as “tripling the horizontal resolution of the screen”, and relies on the fact that each pixel is really the three separate components side by side rather than a single unit.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nFgZpYAtMk1VyJaLXcsi.png", alt="Figure 3 - Antialiasing using grayscale vs subpixel", width="800", height="350" %}
+  <figcaption>
+    Figure 3 - Antialiasing using grayscale vs subpixel
+  </figcaption>
+</figure>
+
+In figure 3 above you can see that on the left we treat each component equally and each is turned on or off equally (grayscale). On the right hand side, however, we use the subpixel approach, enabling each component (red, green and blue) differently depending on __how much__ it overlaps with the shape being drawn.
+
+With all that said, however, human vision doesn’t actually weigh red, green and blue light equally. We are far more sensitive to green than either red or blue, and this means that while there is definite benefit over grayscale antialiasing, as [Darel Rex Finley notes](http://alienryderflex.com/sub_pixel/), enabling each component separately is __not__ actually going to yield a 3x improvement in clarity. Subpixel antialiasing is definitely helpful, though, and it does mean that we see text more clearly than if grayscale antialiasing is used.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GdLxu4vlQ8xSH0ypdvIK.jpg", alt="Figure 4 - Subpixel antialiased text. Individual components of the pixels are enabled to create the overall effect", width="800", height="288" %}
+  <figcaption>
+    Figure 4 - Subpixel antialiased text. Individual components of the pixels are enabled to create the overall effect
+  </figcaption>
+</figure>
+
+## Cutting to the chase
+
+What does all this mean for us as developers? Well, from a Chrome perspective at least there is a mix of both grayscale and subpixel antialiasing used to render text, and which one you get depends on a few criteria. To begin with, however, we need to understand a little about layers, since that’s the main criterion at play. If you’ve not come across layers and how they are used internally by Chrome, Tom Wiltzius has written [a fantastic introduction to the topic](http://www.html5rocks.com/en/tutorials/speed/layers/) that you should read first.
+
+Assuming you’re familiar with layers, or you’ve just read about them, let’s continue on. If hardware compositing is enabled for the page, and you have text content on a layer that __isn’t__ the **root layer** it will, by default, be rendered using grayscale antialiasing. Developers often notice that if they apply hacks to elements to get them into their own (non-root) layers ([such as using translateZ](http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/)) that they see text being rendered differently. Often times developers apply “new layer” triggers on the fly through JavaScript or CSS causing the text rendering to switch from subpixel to grayscale; it can be confusing if you don’t know what triggered the rendering change. If your text resides in the root layer, however, it should be rendered with subpixel antialiasing, and consequently it will be much clearer to read.
+
+But, like all things web, it’s changing. Subpixel antialiasing is being enabled in Chrome for text in non-root layers, provided the layer satisfies three criteria. It’s worth saying that these criteria apply __today__, but it’s likely they will change and you should expect to see __more__ cases covered over time. Today those criteria are:
+
+
+1. **The layer has a fully opaque background color.** Notably using `border-radius` or a non-default `background-clip` value results in the layer being treated as non-opaque and text rendering reverts to grayscale antialiasing.
+1. **The layer can only have either identity transform or integral translation applied to it.** By integral we mean rounded values. So for example `translate(20.2px, 30px)` would result in grayscale antialiasing since the x component, `20.2px`, is non-integral. The identity transform simply means that there is no additional rotation, translation, or scaling applied beyond its default.
+1. **The layer has an opacity of 1.0**. Any change in opacity will change the antialiasing from subpixel to grayscale.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8P2VqVpXXb2cz1yQEza8.png", alt="Figure 5 - Before and after: grayscale vs. subpixel. Note the
+    color edging on the text to the right", width="800", height="250" %}
+  <figcaption>
+    Figure 5 - Before and after: grayscale vs. subpixel. Note the
+    color edging on the text to the right
+  </figcaption>
+</figure>
+
+One final thing of note is that applying a CSS animation may cause a new layer to be created, whereas using `requestAnimationFrame` does not. For some developers the text rendering differences that implies has precluded the use of CSS animations. So if you’ve been using JavaScript to animate elements because of text rendering differences, check to see if this update fixes things for you!
+
+So that’s Chrome covered. As far as other browsers go, Opera, as it moves to Chromium, should match Chrome’s behaviours closely. Internet Explorer seems to use subpixel antialiasing for virtually all text (if you’ve enabled ClearType, of course!), although seemingly not in Windows 8’s Metro mode. Safari, given WebKit’s proximity to Blink, behaves very similarly to Chrome, albeit without these newer improvements that allow for more subpixel antialiasing. Firefox largely behaves in the same way as Internet Explorer insofar as it uses subpixel antialiasing for virtually all text. Of course this isn’t an exhaustive list, and there are likely to be cases in __all browsers__ where grayscale antialiasing is used instead of subpixel, but it’s good to know that subpixel antialiasing is widely used across the main set of browsers.
+
+## Conclusion
+
+So now you know a little about how antialiasing works, and why you might see text rendering differences in your sites and applications today, especially on lower DPI devices. If you’re interested in following along with Chrome’s implementation with respect to text rendering you should star the following bugs:
+
+- [Automatic Font Grayscale Anti-Aliasing above 48px not Overridable](https://crbug.com/167131)
+- [Horrible font rendering with Google Web Fonts on Chrome for Windows](https://crbug.com/137692))
+- [DirectWrite support](https://crbug.com/25541)
+
+## Resources and references
+
+- [Subpixel Rendering on Wikipedia](http://en.wikipedia.org/wiki/Subpixel_rendering)
+- [Darel Rex Finley on Subpixel Text Rendering](http://alienryderflex.com/sub_pixel/)
+- [How Subpixel rendering works](http://www.grc.com/ctwhat.htm)
+- [CSS properties that affect type rendering](http://blog.typekit.com/category/type-rendering/)
+
diff --git a/src/site/content/en/blog/api-for-fast-beautiful-web-fonts/index.md b/src/site/content/en/blog/api-for-fast-beautiful-web-fonts/index.md
new file mode 100644
index 00000000000..2b0cfb6fc8c
--- /dev/null
+++ b/src/site/content/en/blog/api-for-fast-beautiful-web-fonts/index.md
@@ -0,0 +1,160 @@
+---
+title: An API for fast, beautiful web fonts
+subhead: How to use the Google Fonts CSS API to efficiently deliver web fonts.
+description: |
+  An update on the Google Fonts CSS API—how it works, how to use it, and how it can efficiently deliver your web fonts.
+
+# A list of authors. Supports more than one.
+authors:
+  - jimmymooney
+
+date: 2022-05-20
+# Add an updated date to your post if you edit in the future.
+# updated: 2019-11-01
+
+# Add the scheduled flag if you'd like your post to automatically go live
+# during a future date. Posts will deploy at 7am PST / 15:00 UTC.
+# Example: A post with `date: 2050-01-01`, `scheduled: true`, will go live at
+# 7am PST, January 1st, 2050.
+# If you don't use the scheduled flag then setting a future date has no effect.
+# scheduled: true
+
+# !!! IMPORTANT: If your post does not contain a hero image it will not appear
+# on the homepage.
+# Hero images should be 3200 x 960.
+hero: image/Xyvh8LLq27V5yRjH5iS1dbf64pE2/m9vEMs7VIwwsRX4PJdLt.png
+# You can adjust the fit of your hero image with this property.
+# Values: contain | cover (default)
+# hero_fit: contain
+
+# You can adjust the position of your hero image with this property.
+# Values: top | bottom | center (default)
+# hero_position: bottom
+
+# You can provide an optional cropping of your hero image to be used as a
+# thumbnail. Note the alt text will be the same for both the thumbnail and
+# the hero.
+# thumbnail: thumbnail.jpg
+
+alt: Google Fonts API with description of Roboto Flex and an example code snippet.
+
+# You can provide a custom thumbnail and description for social media cards.
+# Thumbnail images should be 896 x 480.
+# If no social thumbnail is provided then the post will attempt to fallback to
+# the post's thumbnail or hero from above. It will also reuse the alt.
+# social:
+#   google:
+#     title: A title for Google search card.
+#     description: A description for Google search card.
+#     thumbnail: google_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+#   facebook:
+#     title: A title for Facebook card.
+#     description: A description for Facebook card.
+#     thumbnail: facebook_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+#   twitter:
+#     title: A title for Twitter card.
+#     description: A description for Twitter card.
+#     thumbnail: twitter_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - ux
+
+# You can provide an optional Stack Overflow tag to be used at the end of the
+# post in an "Ask on Stack Overflow" note.
+# Find the official list of tags at https://stackoverflow.com/tags.
+# stack_overflow_tag: service-worker
+---
+
+Over the years, a lot has changed with [web fonts](https://fonts.google.com/knowledge/glossary/web_font) technology. What used to be a niche practice that required an image of text or a [Flash](https://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement) plug-in (and that compromised your website’s search engine optimization) is now a standard practice across the web. Once upon a time, you had to load an entire font before the page loaded—with styles and characters you may not have even used—but even that has become a thing of the past.
+
+The [Google Fonts CSS API](https://developers.google.com/fonts/docs/getting_started) has also evolved over the years to keep up with changes in web fonts technology. It has come a long way from its original value proposition—to make the web faster by allowing your browser to cache commonly used fonts across all the websites that used the API. This is [no longer true](https://developer.chrome.com/blog/http-cache-partitioning/#how-will-cache-partitioning-affect-chromes-http-cache), but the API still provides additional and important optimizations so that websites load quickly and the fonts work well. 
+
+Using the Google Fonts CSS API, your website can request only the font data it needs to keep its CSS loading time to a minimum, ensuring your website visitors can load your content as quickly as possible. The API will respond to each request with the best font for that web browser.
+
+All this happens by including a single line of HTML in your code.
+
+## How to use the Google Fonts CSS API
+
+The [Google Fonts CSS API documentation](https://developers.google.com/fonts/docs/getting_started) sums it up nicely:
+
+<blockquote>
+  <p>
+    You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.
+  </p>
+</blockquote>
+
+The minimum you need to do is include a single line in your HTML, like this:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+```
+
+When you request a font from the API, you specify which family or families you would like and, optionally, their weights, styles, subsets, and [many other options](https://developers.google.com/fonts/docs/getting_started). The API will then handle your request in one of two ways:
+
+1. If your request uses common parameters that the API already has files for, it will immediately return CSS to your user, directing them to these files.
+2. If you requested a font with parameters that the API doesn’t currently have cached, it will subset your fonts on the fly, using [HarfBuzz](https://harfbuzz.github.io/harfbuzz-hb-subset.html) to do it quickly, and return CSS pointing to them.
+
+## Font files can be large, but they don’t have to be
+
+Web fonts can be large; it’s true. Just a single weight of <a href="https://fonts.google.com/noto/specimen/Noto+Sans+JP">Noto Sans Japanese</a> in WOFF2 is almost 3.4MB—and downloading this to each and every one of your users would be a drag on your page load time. When every millisecond counts and every byte is precious, you want to be sure you’re only loading the data your users need.
+
+The Google Fonts CSS API can create very small font files (called subsets), generated in real time, to serve your users only the text and styles required by your website. Instead of serving up an entire font, you can request specific characters using the <a href="https://developers.google.com/fonts/docs/getting_started#optimizing_your_font_requests">`text`</a> parameter.
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
+```
+
+{% Img src="image/Xyvh8LLq27V5yRjH5iS1dbf64pE2/qCy8MLmblSbhXM4aKbDv.png", alt="A chart with a character count of basic Latin, basic Greek, and extended Greek.", width="800", height="219" %}
+
+The CSS API also provides additional web font optimizations to your users automatically, without any API parameters. The API will serve your users CSS files with [`unicode-range`](https://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-range) already enabled ([if supported by their web browser](https://caniuse.com/font-unicode-range)), so they load the fonts for only the specific characters your website needs.
+
+The unicode-range CSS descriptor is one tool that can now be used to combat large font downloads. This CSS property sets a range of unicode characters that the `@font-face` declaration contains. If one of these characters is rendered on the page, that font is downloaded. This works well for all kinds of languages, so you can take a font that includes Latin, Greek, or Cyrillic characters and make smaller subsets. In the preceding chart, you can see that if you had to load all three of these character sets, it would be over 600 glyphs.
+
+{% Img src="image/Xyvh8LLq27V5yRjH5iS1dbf64pE2/phsjfrDgRzrz0r8ytvt2.png", alt="A chart with a character count of basic Latin, extended Latin, Korean and Japanese.", width="800", height="255" %}
+
+This also enables [Chinese, Japanese, and Korean (CJK) fonts](https://en.wikipedia.org/wiki/CJK_characters) for the web. In the preceding chart, you can see that a CJK font covers 15-20 times the number of characters that a Latin character font does. These fonts are typically very large and many of the characters in those languages are not used as frequently as others.
+
+Using the CSS API and unicode-range can reduce file transfers by [approximately 90%](https://www.w3.org/TR/PFE-evaluation/). Using the `unicode-range` descriptor, you can define each portion separately, and each slice is only downloaded once your content contains one of the characters in these character ranges.
+
+Example: If you wanted to set only the word "[こんにちは](https://translate.google.com/?sl=ja&tl=en&text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF&op=translate)" in [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP), you could:
+
+- Self-host your own WOFF2 files.
+- Use the CSS API to retrieve the WOFF2.
+- Use the CSS API with the text= parameter set to “こんにちは.”
+
+{% Img src="image/Xyvh8LLq27V5yRjH5iS1dbf64pE2/B9FAwSaH2bJQ4SHCmRJk.png", alt="Graph with comparison of different methods of downloading Noto Sans JP.", width="800", height="324" %}
+
+In this example, you can see that by using the CSS API you are already saving 97.5% over self-hosting the WOFF2 font, thanks to the API’s built-in support for separating large fonts into unicode-range. By taking it a step further and specifying exactly the text you want to display, you can further reduce the size of the font to only 95.3% of the CSS API font–that’s 99.9% smaller than the self-hosted font.
+
+The Google Fonts CSS API will automatically deliver fonts in the smallest and most compatible format supported by your user’s browser. If your user is on a browser with WOFF2 support, the API will supply the fonts in WOFF2, but if they are using an older browser, the API will deliver the fonts in a format supported by that browser. To reduce the file size for each user, the API also removes data from the fonts when it’s not needed. For example, hinting data will be removed for users whose browsers do not need it.
+
+## Future-proofing your web fonts with the Google Fonts CSS API
+
+The Google Fonts team also contributes to new W3C standards that continue innovating web font technologies, such as [WOFF2](https://www.w3.org/TR/WOFF2/). One current project is [Incremental Font Transfer](https://www.w3.org/TR/PFE-evaluation/), which allows users to load very small parts of font files as they’re used on screen and stream in the rest on demand, surpassing the performance of unicode-range. When you use our web fonts API, your users get these underlying font transfer technology improvements when they become available in their browser.
+
+This is the beauty of a fonts API: your users have the benefit of each new technology improvement without any changes to your website. New web font format? No problem. New browser or operating system support? It's taken care of. So instead of being bogged down with the maintenance of your web fonts, you are free to focus on your users and your content. 
+
+## Variable fonts support built-in
+
+[Variable fonts](https://fonts.google.com/knowledge/glossary/variable_fonts) are font files that can store a range of design variation amongst multiple [axes](https://fonts.google.com/knowledge/glossary/axis_in_type_design), and the [new version](https://developers.google.com/fonts/docs/css2) of the Google Fonts CSS API includes support for them. Adding an additional axis of variation enables new flexibility with a font—but it can almost double the size of the font file.
+
+When you are more specific in your CSS API request, the Google Fonts CSS API can serve only the portion of the variable font your website needs, in order to reduce download size for users. This enables the use of variable fonts for the web without incurring long page loading times.  You can do this by specifying a single value on an axis, or specifying a range; you can even specify multiple axes and multiple font families all in one request. The API is flexible to meet your needs. 
+
+## Simple to implement, optimized for you
+
+The Google Fonts CSS API helps you deliver fonts that are:
+
+- More compatible with web browsers.
+- As small as possible.
+- Delivered quickly.
+- Easier for you to use.
+
+For more information on Google Fonts, visit [fonts.google.com](https://fonts.google.com/). To learn more about the CSS API, review the [API Documentation](https://developers.google.com/fonts/).
+
+## Acknowledgements
+
+Hero image by [leesehee](https://twitter.com/seheely).
diff --git a/src/site/content/en/blog/app-shortcuts/app-shortcuts-devtools.png b/src/site/content/en/blog/app-shortcuts/app-shortcuts-devtools.png
deleted file mode 100644
index a9a06ce47fa..00000000000
Binary files a/src/site/content/en/blog/app-shortcuts/app-shortcuts-devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-android.png b/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-android.png
deleted file mode 100644
index 9913fb15365..00000000000
Binary files a/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-android.png and /dev/null differ
diff --git a/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-windows.png b/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-windows.png
deleted file mode 100644
index 89ffe878cff..00000000000
Binary files a/src/site/content/en/blog/app-shortcuts/app-shortcuts-menu-windows.png and /dev/null differ
diff --git a/src/site/content/en/blog/app-shortcuts/hero.jpg b/src/site/content/en/blog/app-shortcuts/hero.jpg
deleted file mode 100644
index 1891e34d2a0..00000000000
Binary files a/src/site/content/en/blog/app-shortcuts/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/app-shortcuts/index.md b/src/site/content/en/blog/app-shortcuts/index.md
index f326295dd70..711d387ddc6 100644
--- a/src/site/content/en/blog/app-shortcuts/index.md
+++ b/src/site/content/en/blog/app-shortcuts/index.md
@@ -5,26 +5,23 @@ authors:
   - beaufortfrancois
   - jungkees
 date: 2020-05-20
-updated: 2020-07-22
-hero: hero.jpg
+updated: 2022-06-08
+hero: image/admin/1ekafMZjtzcd0G3TLQJ4.jpg
 alt: A photo of an Android phone showing an app shortcuts menu
 description: App shortcuts give quick access to a handful of common actions that users need frequently.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - capabilities
   - progressive-web-apps
+feedback:
+  - api
 ---
 
-To improve users' productivity and facilitate re-engagement with key tasks, the
+To improve users' productivity and facilitate reengagement with key tasks, the
 web platform now supports app shortcuts. They allow web developers to provide
 quick access to a handful of common actions that users need frequently.
 
-{% Aside %}
-At the time of writing, app shortcuts are available on Android (Chrome 84) and
-Windows (Chrome 85 and Edge 85).
-{% endAside %}
-
-This article will teach you how to define those app shortcuts. Additionally,
+This article will teach you how to define app shortcuts. Additionally,
 you'll learn some associated best practices.
 
 ## About app shortcuts
@@ -35,25 +32,28 @@ enhance users' productivity as well as increase their engagement with the web
 app.
 
 The app shortcuts menu is invoked by right-clicking the app icon in the taskbar
-(Windows) or dock (macOS) on the user's desktop, or long pressing the app's
+(Windows) or dock (macOS) on the user's desktop, or touch & holding the app's
 launcher icon on Android.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./app-shortcuts-menu-android.png" alt="Screenshot of an app shortcuts menu opened on Android">
-  <figcaption class="w-figcaption">App shortcuts menu opened on Android</figcaption>
-</figure>
+<div class="switcher" >
+  <figure>
+    {% Img src="image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt="Screenshot of an app shortcuts menu opened on Android", width="800", height="420" %}
+    <figcaption>App shortcuts menu opened on Android</figcaption>
+  </figure>
+
+  <figure>
+    {% Img src="image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt="Screenshot of an app shortcuts menu opened on Windows", width="800", height="420" %}
+    <figcaption>App shortcuts menu opened on Windows</figcaption>
+  </figure>
+</div>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./app-shortcuts-menu-windows.png" alt="Screenshot of an app shortcuts menu opened on Windows">
-  <figcaption class="w-figcaption">App shortcuts menu opened on Windows</figcaption>
-</figure>
 
 The app shortcuts menu is shown only for [Progressive Web Apps] that are
-installed on the user's desktop or mobile device. Check out [What does it take
-to be installable?] to learn about installability requirements.
+installed on the user's desktop or mobile device. Check out [Installation]
+in our "Learn PWA" module to learn about installability requirements.
 
 Each app shortcut expresses a user intent, each of which is associated with a
-URL within the [scope] of your web app. The URL is opened when users activate
+URL within the [scope] of your web app. The URL is opened when a user activate
 the app shortcut. Examples of app shortcuts include the following:
 
 - Top-level navigation items (e.g., home, timeline, recent orders)
@@ -71,7 +71,7 @@ Googler, and these contributors deserve special recognition!
 ## Define app shortcuts in the web app manifest
 
 App shortcuts are optionally defined in the [web app manifest], a JSON file that
-tells the browser about your Progressive Web App and how it should behave when
+tells the browser about your web app and how it should behave when
 installed on the user's desktop or mobile device. More specifically, they are
 declared in the `shortcuts` array member. Below is an
 example of a potential web app manifest.
@@ -103,77 +103,69 @@ example of a potential web app manifest.
 Each member of the `shortcuts` array is a dictionary that contains at least a
 `name` and a `url`. Other members are optional.
 
-### name
-
-The human-readable label for the app shortcut when
+`name`
+:   The human-readable label for the app shortcut when
 displayed to the user.
 
-### short_name (optional)
-
-The human-readable label used where space is limited. It is recommended
+`short_name` (optional)
+:   The human-readable label used where space is limited. It is recommended
 that you provide it, even though it's
 optional.
 
-### description (optional)
-
-The human-readable purpose for the app shortcut.
+`description` (optional)
+:   The human-readable purpose for the app shortcut.
 It is not used at the time of writing but may be exposed to assistive technology
 in the future.
 
-### url
-
-The URL opened when a user activates the app
+`url`
+:   The URL opened when a user activates the app
 shortcut. This URL must exist within the scope of the web app manifest. If it is
 a relative URL, the base URL will be the URL of the web app manifest.
 
-### icons (optional)
-
-An array of image resource objects. Each object must
+`icons` (optional)
+:   An array of image resource objects. Each object must
 include the `src` and a `sizes` property. Unlike [web app manifest icons], the
-`type` of image is optional.
-
-SVG files are not supported at the time of writing, use PNG instead.
+`type` of image is optional. SVG files are not supported at the time of writing.
+Use PNG instead.
 
-If you want pixel-perfect icons, provide them in increments of 48dp (i.e. 36x36,
+   If you want pixel-perfect icons, provide them in increments of 48dp (i.e. 36x36,
 48x48, 72x72, 96x96, 144x144, 192x192 pixel icons). Otherwise, it is recommended
 that you use a single 192x192 pixel icon.
 
-As a quality measure, icons must be at least half of the device's ideal size on
+   As a quality measure, icons must be at least half of the device's ideal size on
 Android, which is 48dp. For example, to display on an [xxhdpi screen], the icon
 must be at least 72 by 72 pixels. (This is derived from the
 [formula for converting] dp units for pixel units.)
 
 ## Test your app shortcuts
 
-To verify your app shortcuts are setup correctly, use the **Manifest** pane in the
+To verify that your app shortcuts are set up correctly, use the **Manifest** pane in the
 **Application** panel of DevTools.
 
-<figure class="w-figure">
-  <img src="./app-shortcuts-devtools.png" alt="Screenshot of app shortcuts in DevTools">
-  <figcaption class="w-figcaption">App shortcuts shown in DevTools</figcaption>
+<figure>
+  {% Img src="image/admin/rEL0r8lEfYHlsj0ylLSL.png", alt="Screenshot of app shortcuts in DevTools", width="800", height="534" %}
+  <figcaption>App shortcuts shown in DevTools</figcaption>
 </figure>
 
 This pane provides a human-readable version of many of your manifest's
 properties, including app shortcuts. It makes it easy to verify that all of the
 shortcut icons, if provided, are loading properly.
 
-{% Aside %}
-DevTools support for app shortcuts is available in Chrome 84 and Edge 84 and later.
-{% endAside %}
-
 App shortcuts may not be available right away to all users because Progressive
-Web App updates are capped to once a day.  You can find more details in this
-[article].
+Web App updates are capped to once a day.  Find out more about
+[how Chrome handles updates to the web app manifest].
 
-## Best practises
+## Best practices
 
 ### Order app shortcuts by priority
 
-You are encouraged to order app shortcuts by priority, with the most critical
-app shortcuts appearing first in the `shortcuts` array as the limit on the
-number of app shortcuts displayed varies depending on the platform. Chrome and
-Edge on Windows for instance limit the number of app shortcuts to 10 while
-Chrome for Android only takes the first 4 app shortcuts into account.
+Shortcuts are displayed in the order by which you define them in the manifest.
+You are encouraged to order app shortcuts by priority because the limit on the
+number of app shortcuts displayed varies byß platform. Chrome and Edge on
+Windows for instance limit the number of app shortcuts to 10 while Chrome for
+Android only display 3. Before Chrome 92 for Android 7, 4 were allowed. Chrome
+92 added a shortcut to the site settings, taking one of the available shortcut
+slots for the app.
 
 ### Use distinct app shortcut names
 
@@ -189,8 +181,14 @@ You should annotate app shortcuts `url` entries like you would do with
 
 ## Browser support
 
-App shortcuts are available on Android (Chrome 84) and Windows (Chrome 85 and
-Edge 85). More desktop platform support will follow.
+App shortcuts are available on the platforms and versions listed below.
+
+{% BrowserCompat 'html.manifest.shortcuts' %}
+
+<figure>
+  {% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/6KgvySxUcryuD0gwXa0u.png",alt="Screenshot of an app shortcuts menu opened on ChromeOS", width="800", height="450" %}
+  <figcaption>App shortcuts menu opened on ChromeOS</figcaption>
+</figure>
 
 ## Trusted Web Activity support
 
@@ -209,8 +207,8 @@ behaviors.
 
 ## Sample
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot"
+<figure>
+  <video controls autoplay loop muted
     src="https://storage.googleapis.com/web-dev-assets/app-shortcuts/app-shortcuts-recording.mp4">
   </video>
 </figure>
@@ -225,20 +223,17 @@ Check out the [app shortcuts sample] and its [source].
 
 ## Helpful links
 
-* [Explainer][explainer]
+* [MDN][mdn-shortcuts]
 * [Spec][spec]
 * [App shortcuts sample][app shortcuts sample] | [App shortcuts sample source][source]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
 * Blink Component: [`UI>Browser>WebAppInstalls`]
 
-<!-- lint disable definition-case -->
 [Progressive Web Apps]: /progressive-web-apps/
-[What does it take to be installable?]: https://web.dev/install-criteria/
+[Installation]: /learn/pwa/installation/
 [scope]: /add-manifest/#scope
-[web app manifest]: /add-manifest
+[web app manifest]: /learn/pwa/web-app-manifest/
 [web app manifest icons]: /add-manifest/#icons
-[explainer]: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Shortcuts/explainer.md
+[mdn-shortcuts]: https://developer.mozilla.org/docs/Web/Manifest/shortcuts
 [spec]: https://w3c.github.io/manifest/#shortcuts-member
 [app shortcuts sample]: https://app-shortcuts.glitch.me
 [source]: https://glitch.com/edit/#!/app-shortcuts
@@ -253,5 +248,4 @@ Check out the [app shortcuts sample] and its [source].
 [Android app shortcuts]: https://developer.android.com/guide/topics/ui/shortcuts
 [xxhdpi screen]: https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp
 [formula for converting]: https://developer.android.com/training/multiscreen/screendensities#dips-pels
-[article]: https://developers.google.com/web/fundamentals/integration/webapks#update-webapk
-<!-- lint enable definition-case -->
+[how Chrome handles updates to the web app manifest]: /manifest-updates
diff --git a/src/site/content/en/blog/appcache-beginner/index.md b/src/site/content/en/blog/appcache-beginner/index.md
new file mode 100644
index 00000000000..eb9c2a72a1e
--- /dev/null
+++ b/src/site/content/en/blog/appcache-beginner/index.md
@@ -0,0 +1,335 @@
+---
+layout: post
+title: A beginner's guide to using the application cache
+authors:
+  - ericbidelman
+date: 2010-06-18
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+## Introduction
+It's becoming increasingly important for web-based applications to be accessible offline.
+Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with
+the [ApplicationCache](http://www.whatwg.org/specs/web-apps/current-work/#applicationcache) interface.
+Using the cache interface gives your application three advantages:
+
+1. Offline browsing - users can navigate your full site when they're offline
+1. Speed - resources come straight from disk, no trip to the network.
+1. Resilience - if your site goes down for "maintenance" (as in, someone accidentally breaks everything), your users will get the offline experience
+
+The Application Cache (or AppCache) allows a developer to specify which files the browser should cache
+and make available to offline users. Your app will load and work correctly, even if the user presses
+the refresh button while they're offline.
+
+## The cache manifest file
+
+The cache manifest file is a simple text file that lists the resources the browser should cache
+for offline access.
+
+### Referencing a manifest file
+
+To enable the application cache for an app, include the manifest attribute on the
+document's `html` tag:
+
+```html
+<html manifest="example.appcache">
+  ...
+</html>
+```
+
+The `manifest` attribute should be included on every page of your web application
+that you want cached. The browser does not cache a page if it does not contain
+the `manifest` attribute (unless it is explicitly listed
+in the manifest file itself. This means that any page the user navigates to that
+includes a `manifest` will be implicitly added to the application cache.
+Thus, there's no need to list every page in your manifest. If a page points to a manifest, there's no way to prevent this page being cached.
+
+{% Aside %}
+"/page-url/", "/page-url/?something", "/page-url/?something-else" are considered separate pages. If they link to the manifest, they will all be implicitly cached separately. Because of this and [other gotchas](http://alistapart.com/article/application-cache-is-a-douchebag), AppCache best used on apps with one URL.
+{% endAside %}
+
+You can see the urls that are controlled by the application cache by visiting about://://appcache-internals/ in Chrome. From here you can clear caches and view the entries. There are [similar developer tools](http://flailingmonkey.com/application-cache-not-a-douchebag) in Firefox.
+
+The `manifest` attribute can point to an absolute URL or relative path,
+but an absolute URL must be under the same origin as the web application.
+A manifest file can have any file extension, but needs to be served
+with the correct mime-type (see below).
+
+```html
+<html manifest="http://www.example.com/example.mf">
+  ...
+</html>
+```
+
+A manifest file must be served with the mime-type `text/cache-manifest`.
+You may need to add a custom file type to your web server or `.htaccess` configuration.
+
+For example, to serve this mime-type in Apache, add this line to your config file:
+
+```apacheconf
+AddType text/cache-manifest .appcache
+```
+
+Or, in your app.yaml file in Google App Engine:
+
+```yml
+- url: /mystaticdir/(.*\.appcache)
+  static_files: mystaticdir/\1
+  mime_type: text/cache-manifest
+  upload: mystaticdir/(.*\.appcache)
+```
+
+This requirement was dropped from the specification some time ago, and no longer required by the latest versions of Chrome, Safari and Firefox, but you'll need the mime-type to work in older browsers and IE11.
+
+### Structure of a manifest file
+
+The manifest is a separate file you link to via the manifest attribute on the html element. A simple manifest looks something like this:
+
+```apacheconf
+CACHE MANIFEST
+index.html
+stylesheet.css
+images/logo.png
+scripts/main.js
+http://cdn.example.com/scripts/main.js
+```
+
+This example will cache four files on the page that specifies this manifest file.
+
+There are a couple of things to note:
+
+- The `CACHE MANIFEST` string is the first line and is required.
+- Files can be from another domain
+- Some browsers place restrictions on the amount of storage quota available
+to your app. In Chrome for example, AppCache uses a [shared pool](https://developer.chrome.com/docs/apps/offline_storage/#table) of TEMPORARY
+storage that other offline APIs can share. If you are writing an app for the [Chrome Web Store](http://code.google.com/chrome/apps/docs/developers_guide.html), using the `unlimitedStorage` removes that restriction.
+- If the manifest itself returns a 404 or 410, the cache is deleted.
+- If the manifest or a resource specified in it fails to download,
+the entire cache update process fails. The browser will keep using the old
+application cache in the event of failure.
+
+Lets take a look at a more complex example:
+
+```apacheconf
+CACHE MANIFEST
+# 2010-06-18:v2
+
+# Explicitly cached 'master entries'.
+CACHE:
+/favicon.ico
+index.html
+stylesheet.css
+images/logo.png
+scripts/main.js
+
+# Resources that require the user to be online.
+NETWORK:
+*
+
+# static.html will be served if main.py is inaccessible
+# offline.jpg will be served in place of all images in images/large/
+# offline.html will be served in place of all other .html files
+FALLBACK:
+/main.py /static.html
+images/large/ images/offline.jpg
+```
+Lines starting with a '#' are comment lines, but can also serve another purpose.
+An application's cache is only updated when its manifest file changes.
+So for example, if you edit an image resource or change a JavaScript function, those changes will not
+be re-cached. **You must modify the manifest file itself to inform the browser to refresh cached files**.
+
+Avoid using a continually-updating timestamp or random string to force updates every time. The manifest is checked twice during an update, once at the start and once after all cached files have been updated. If the manifest has changed during the update, it's possible the browser fetched some files from one version, and other files from another version, so it doesn't apply the cache and retries later.
+
+Although the cache updates, the browser won't use those files until the page is refreshed, because updates happen after the page is loaded from the current version of the cache.
+
+A manifest can have three distinct sections: `CACHE`, `NETWORK`, and `FALLBACK`.
+
+`CACHE:`
+: This is the default section for entries. Files listed under this header (or immediately after the `CACHE MANIFEST`)
+will be explicitly cached after they're downloaded for the first time.
+`NETWORK:`
+: Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".
+`FALLBACK:`
+: An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource,
+the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
+
+
+{% Aside %}
+These sections can be listed in any order and each section can appear more than one in a single manifest.
+{% endAside %}
+
+The following manifest defines a "catch-all" page (offline.html) that will be displayed when the user
+tries to access the root of the site while offline. It also declares that all other resources (e.g. those on remote a site)
+require an internet connection.
+
+```apacheconf
+CACHE MANIFEST
+# 2010-06-18:v3
+
+# Explicitly cached entries
+index.html
+css/style.css
+
+# offline.html will be displayed if the user is offline
+FALLBACK:
+/ /offline.html
+
+# All other resources (e.g. sites) require the user to be online.
+NETWORK:
+*
+
+# Additional resources to cache
+CACHE:
+images/logo1.png
+images/logo2.png
+images/logo3.png
+```
+
+{% Aside %}
+The HTML file that references your manifest file is automatically cached.
+There's no need to include it in your manifest, however it is encouraged to do so.
+{% endAside %}
+
+{% Aside %}
+HTTP cache headers and the caching restrictions imposed on pages served over SSL
+are overridden by cache manifests. Thus, pages served over https can be made to work offline.
+{% endAside %}
+
+## Updating the cache
+
+Once an application is offline it remains cached until one of the following happens:
+
+1. The user clears their browser's data storage for your site.
+1. The manifest file is modified. Note: updating a file listed in the manifest doesn't mean
+the browser will re-cache that resource. The manifest file itself must be altered.
+
+
+### Cache status
+
+The `window.applicationCache` object is your programmatic access the browser's app cache.
+Its `status` property is useful for checking the current state of the cache:
+
+```js
+var appCache = window.applicationCache;
+
+switch (appCache.status) {
+case appCache.UNCACHED: // UNCACHED == 0
+return 'UNCACHED';
+break;
+case appCache.IDLE: // IDLE == 1
+return 'IDLE';
+break;
+case appCache.CHECKING: // CHECKING == 2
+return 'CHECKING';
+break;
+case appCache.DOWNLOADING: // DOWNLOADING == 3
+return 'DOWNLOADING';
+break;
+case appCache.UPDATEREADY:  // UPDATEREADY == 4
+return 'UPDATEREADY';
+break;
+case appCache.OBSOLETE: // OBSOLETE == 5
+return 'OBSOLETE';
+break;
+default:
+return 'UKNOWN CACHE STATUS';
+break;
+};
+```
+
+To programmatically check for updates to the manifest, first call `applicationCache.update()`.
+This will attempt to update the user's cache (which requires the manifest file to have changed).
+Finally, when the `applicationCache.status` is in its `UPDATEREADY` state,
+calling `applicationCache.swapCache()` will swap the old cache for the new one.
+
+```js
+var appCache = window.applicationCache;
+
+appCache.update(); // Attempt to update the user's cache.
+
+...
+
+if (appCache.status == window.applicationCache.UPDATEREADY) {
+appCache.swapCache();  // The fetch was successful, swap in the new cache.
+}
+```
+
+{% Aside %}
+Using `update()` and `swapCache()`
+like this will mean the new cache will be used for subsequent downloads, but the user will already have downloaded the page and likely all resources by this point, those files won't be automatically reloaded. You'll need to refresh the page to get the latest version of the page and resources, which doesn't require calling `swapCache()`
+{% endAside %}
+
+The good news: you can automate this. To update users to
+the newest version of your site, set a listener to monitor the
+`updateready` event on page load:
+
+```js
+// Check if a new cache is available on page load.
+window.addEventListener('load', function(e) {
+
+window.applicationCache.addEventListener('updateready', function(e) {
+if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
+    // Browser downloaded a new app cache.
+    if (confirm('A new version of this site is available. Load it?')) {
+    window.location.reload();
+    }
+} else {
+    // Manifest didn't changed. Nothing new to server.
+}
+}, false);
+
+}, false);
+```
+
+### AppCache events
+
+As you may expect, additional events are exposed to monitor the cache's state.
+The browser fires events for things like download progress, updating the app cache, and error conditions.
+The following snippet sets up event listeners for each type of cache event:
+
+```js
+function handleCacheEvent(e) {
+//...
+}
+
+function handleCacheError(e) {
+alert('Error: Cache failed to update!');
+};
+
+// Fired after the first cache of the manifest.
+appCache.addEventListener('cached', handleCacheEvent, false);
+
+// Checking for an update. Always the first event fired in the sequence.
+appCache.addEventListener('checking', handleCacheEvent, false);
+
+// An update was found. The browser is fetching resources.
+appCache.addEventListener('downloading', handleCacheEvent, false);
+
+// The manifest returns 404 or 410, the download failed,
+// or the manifest changed while the download was in progress.
+appCache.addEventListener('error', handleCacheError, false);
+
+// Fired after the first download of the manifest.
+appCache.addEventListener('noupdate', handleCacheEvent, false);
+
+// Fired if the manifest file returns a 404 or 410.
+// This results in the application cache being deleted.
+appCache.addEventListener('obsolete', handleCacheEvent, false);
+
+// Fired for each resource listed in the manifest as it is being fetched.
+appCache.addEventListener('progress', handleCacheEvent, false);
+
+// Fired when the manifest resources have been newly redownloaded.
+appCache.addEventListener('updateready', handleCacheEvent, false);
+```
+
+If the manifest file or a resource specified in it fails to download, the entire
+update fails. The browser will continue to use the old application cache in the event of such a failure.
+
+## References
+
+
+- [ApplicationCache](http://www.whatwg.org/specs/web-apps/current-work/#applicationcache) API specification
+- [Application Cache is a douchebag](http://alistapart.com/article/application-cache-is-a-douchebag) - covering the gotchas and issues with AppCache.
diff --git a/src/site/content/en/blog/appcache-removal/appcache-token.jpg b/src/site/content/en/blog/appcache-removal/appcache-token.jpg
deleted file mode 100644
index e606b0cfaa1..00000000000
Binary files a/src/site/content/en/blog/appcache-removal/appcache-token.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/appcache-removal/hero.jpg b/src/site/content/en/blog/appcache-removal/hero.jpg
deleted file mode 100644
index 48e3b6e7b73..00000000000
Binary files a/src/site/content/en/blog/appcache-removal/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/appcache-removal/index.md b/src/site/content/en/blog/appcache-removal/index.md
index ea56e6f5abe..889ccec1d7d 100644
--- a/src/site/content/en/blog/appcache-removal/index.md
+++ b/src/site/content/en/blog/appcache-removal/index.md
@@ -1,30 +1,30 @@
 ---
+layou: post
 title: Preparing for AppCache removal
 subhead: Chrome 85 removes support for AppCache by default. Most developers should migrate off AppCache now, and not wait any longer.
 authors:
   - jeffposnick
 description: Details of Chrome's and other browsers' plans to remove AppCache.
 date: 2020-05-18
-updated: 2020-05-18
-scheduled: true
+updated: 2021-08-23
 tags:
-  - appcache
+  # - appcache
   - blog
-  - chrome84
-  - deprecation
-  - origin-trial
-  - removal
+  - chrome-84
+  # - deprecation
+  - origin-trials
+  # - removal
   - service-worker
-hero: hero.jpg
+hero: image/admin/YDs2H4gLPhIwPMjPtc8o.jpg
 alt: An old-fashioned storage container.
 origin_trial:
   url: https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673
 ---
 
-Following up on [previous announcements](https://blog.chromium.org/2020/01/appcache-scope-restricted.html), support for [AppCache](https://developer.mozilla.org/docs/Web/HTML/Using_the_application_cache) will be removed from Chrome and other Chromium-based browsers. We encourage developers to migrate off of AppCache now, rather than waiting any longer.
+Following up on [previous announcements](https://blog.chromium.org/2020/01/appcache-scope-restricted.html), support for [AppCache](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) will be removed from Chrome and other Chromium-based browsers. We encourage developers to migrate off of AppCache now, rather than waiting any longer.
 
-[Service workers](https://developers.google.com/web/fundamentals/primers/service-workers), 
-which are widely supported in current browsers, offer an alternative to providing the offline 
+[Service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/),
+which are widely supported in current browsers, offer an alternative to providing the offline
 experience that AppCache had offered. See [Migration strategies](#migration-strategies).
 
 ## Timeline
@@ -33,7 +33,7 @@ experience that AppCache had offered. See [Migration strategies](#migration-stra
 
 A "deprecated" feature still exists, but logs warning messages discouraging use. A "removed" feature no longer exists in the browser.
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <tr>
     <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/UKF8cK0EwMI/m/NLhsIrs-AQAJ">Deprecation in non-secure contexts</a>
@@ -56,26 +56,22 @@ A "deprecated" feature still exists, but logs warning messages discouraging use.
     <tr>
     <td><a href="https://blog.chromium.org/2020/01/appcache-scope-restricted.html">AppCache scope restriction</a>
     </td>
-    <td>Chrome 80 (February 2020)
-    </td>
+    <td>Chrome 80 (February 2020)</td>
     </tr>
     <tr>
     <td>"Reverse" origin trial begins
     </td>
-    <td>Chrome 84 (<a href="https://chromiumdash.appspot.com/schedule">estimated July 2020</a>)
-    </td>
+    <td>Chrome 84 (July 2020)</td>
     </tr>
     <tr>
     <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/AvxoE6JpBgAJ">Removal from secure contexts</a>, except for those opted-in to the origin trial
     </td>
-    <td>Chrome 85 (<a href="https://chromiumdash.appspot.com/schedule">estimated August 2020</a>)
-    </td>
+    <td>Chrome 85 (August 2020)</td>
     </tr>
     <tr>
     <td>Complete removal from secure contexts for everyone, with completion of origin trial
     </td>
-    <td>Chrome 90 (<a href="https://chromiumdash.appspot.com/schedule">estimated April 2021</a>)
-    </td>
+    <td>October 5th, 2021 (roughly Chrome 95)</td>
     </tr>
   </table>
 </div>
@@ -86,7 +82,7 @@ This timeline applies to Chrome on **all platforms other than iOS**. There is al
 
 ## Origin trial
 
-The timeline lists two upcoming milestones for removal. Beginning with Chrome 85, AppCache will no longer be available in Chrome by default. Developers who require additional time to migrate off of AppCache can [sign up](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673) for a "reverse" [origin trial](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) to extend the availability of AppCache for their web apps. The origin trial will start in Chrome 84 (in advance of the default removal in Chrome 85), and will be active through Chrome 89. Starting with Chrome 90, AppCache will be fully removed for everyone, even those who had signed up for the origin trial.
+The timeline lists two upcoming milestones for removal. Beginning with Chrome 85, AppCache will no longer be available in Chrome by default. Developers who require additional time to migrate off of AppCache can [sign up](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673) for a "reverse" [origin trial](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) to extend the availability of AppCache for their web apps. The origin trial will start in Chrome 84 (in advance of the default removal in Chrome 85), and will be active through October 5th, 2021 (roughly Chrome 95). At that point, AppCache will be fully removed for everyone, even those who had signed up for the origin trial.
 
 {% Aside %}
 Why are we calling this a "reverse" origin trial? Normally, an origin trial allows developers to opt-in to early access to new functionality before it has shipped by default in Chrome. In this case, we're allowing developers to opt-in to using legacy technology even after it's been removed from Chrome, but only temporarily.
@@ -150,15 +146,15 @@ Adding the origin trial token to your AppCache manifests indicates that each man
 
 While the "reverse" origin trial officially starts with Chrome 84, you can [sign up](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673) for the origin trial today and add the tokens to your HTML and AppCache manifests. As your web app's audience gradually upgrades to Chrome 84, any tokens that you've already added will go into effect.
 
-Once you've added a token to your AppCache manifest, visit `chrome://appcache-internals` to confirm that your local instance of Chrome (version 84 or later) has properly associated the origin trial token with your manifest's cached entries. If your origin trial is recognized, you should see a field with `Token Expires: Tue Apr 06 2021...` on that page, associated with your manifest:
+Once you've added a token to your AppCache manifest, visit `about://appcache-internals` to confirm that your local instance of Chrome (version 84 or later) has properly associated the origin trial token with your manifest's cached entries. If your origin trial is recognized, you should see a field with `Token Expires: Tue Apr 06 2021...` on that page, associated with your manifest:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="appcache-token.jpg" alt="chrome://appcache-internals interface showing a recognized token." width="550">
+<figure>
+  {% Img src="image/admin/Xid94kdPT5yGbQzBL4at.jpg", alt="about://appcache-internals interface showing a recognized token.", width="550", height="203" %}
 </figure>
 
 ## Testing prior to removal
 
-We strongly encourage you to migrate off of AppCache as soon as is feasible. If you want to test removal of AppCache on your web apps, use the `chrome://flags/#app-cache` [flag](https://www.chromium.org/developers/how-tos/run-chromium-with-flags) to simulate its removal. This flag is available starting with Chrome 84.
+We strongly encourage you to migrate off of AppCache as soon as is feasible. If you want to test removal of AppCache on your web apps, use the `about://flags/#app-cache` [flag](https://www.chromium.org/developers/how-tos/run-chromium-with-flags) to simulate its removal. This flag is available starting with Chrome 84.
 
 ## Migration strategies {: #migration-strategies }
 
@@ -166,11 +162,11 @@ Service workers, which are [widely supported in current browsers](https://develo
 
 We've provided a [polyfill](https://github.com/GoogleChromeLabs/sw-appcache-behavior) that uses a service worker to replicate some of the functionality of AppCache, though it does not replicate the entire AppCache interface. In particular, it does not provide a replacement for the `window.applicationCache` interface or the related AppCache events.
 
-For more complex cases, libraries like [Workbox](https://developers.google.com/web/tools/workbox/) provide an easy way to create a modern service worker for your web app.
+For more complex cases, libraries like [Workbox](https://developer.chrome.com/docs/workbox/) provide an easy way to create a modern service worker for your web app.
 
 ### Service workers and AppCache are mutually exclusive
 
-While working on your migration strategy, please keep in mind that Chrome will disable AppCache functionality on any page that's loaded under the [control](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#scope_and_control) of a service worker. In other words, as soon as you deploy a service worker that controls a given page, you're no longer able to use AppCache on that page.
+While working on your migration strategy, please keep in mind that Chrome will disable AppCache functionality on any page that's loaded under the [control](/service-worker-lifecycle/#scope-and-control) of a service worker. In other words, as soon as you deploy a service worker that controls a given page, you're no longer able to use AppCache on that page.
 
 Because of this, we recommend that you do not attempt to migrate to service workers piece-by-piece. It would be a mistake to deploy a service worker that only contains some of your caching logic. You cannot fall back on AppCache to "fill in the gaps."
 
@@ -194,7 +190,7 @@ Chrome for iOS is a special case, as it uses a different browser engine than Chr
 
 ### Android WebViews
 
-Some developers of native Android applications use Chrome [WebView](https://developer.android.com/reference/android/webkit/WebView) to display web content, and might also use AppCache. However, it's not possible to enable an origin trial for a WebView. In light of that, Chrome WebView will support AppCache without an origin trial until the final removal takes place, expected in Chrome 90.
+Some developers of Android applications use Chrome [WebView](https://developer.android.com/reference/android/webkit/WebView) to display web content, and might also use AppCache. However, it's not possible to enable an origin trial for a WebView. In light of that, Chrome WebView will support AppCache without an origin trial until the final removal takes place, expected in Chrome 90.
 
 ## Learn more
 
@@ -202,15 +198,15 @@ Here are some resources for developers migrating from AppCache to service worker
 
 ### Articles
 
-- [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
-- [The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)
-- [Progressive Web Apps Training](https://developers.google.com/web/ilt/pwa)
+- [Service Workers: an Introduction](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+- [The Service Worker Lifecycle](/service-worker-lifecycle/)
+- [Progressive Web Apps Training](/learn/pwa/)
 - [Network Reliability](/reliable/)
 
 ### Tools
 
 - [AppCache Polyfill](https://github.com/GoogleChromeLabs/sw-appcache-behavior)
-- [Workbox](https://developers.google.com/web/tools/workbox/)
+- [Workbox](https://developer.chrome.com/docs/workbox/)
 - [PWA Builder](https://www.pwabuilder.com/)
 
 ## Getting help
diff --git a/src/site/content/en/blog/ar-hit-test/hero.jpg b/src/site/content/en/blog/ar-hit-test/hero.jpg
deleted file mode 100644
index 1afce21a744..00000000000
Binary files a/src/site/content/en/blog/ar-hit-test/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/ar-hit-test/index.md b/src/site/content/en/blog/ar-hit-test/index.md
index 3964a5b5440..f6d452e5628 100644
--- a/src/site/content/en/blog/ar-hit-test/index.md
+++ b/src/site/content/en/blog/ar-hit-test/index.md
@@ -5,7 +5,7 @@ authors:
   - joemedley
 date: 2020-02-13
 updated: 2020-06-04
-hero: hero.jpg
+hero: image/admin/7wUhOX8bWoohQObJO6lL.jpg
 alt: A virtual object in a real-world view.
 description:
   The WebXR Hit Test API is an enhancement to the web's augmented reality that
@@ -13,7 +13,7 @@ description:
 tags:
   - blog
   - augmented-reality
-  - hit-test
+  # - hit-test
   - virtual-reality
   - webxr
 ---
@@ -33,9 +33,9 @@ In this article I assume you already know how to create an augmented reality
 session and that you know how to run a frame loop. If you're not familiar with
 these concepts, you should read the earlier articles in this series.
 
-* [Virtual reality comes to the web](https://web.dev/vr-comes-to-the-web/)
-* [Virtual reality comes to the web, part II](https://web.dev/vr-comes-to-the-web-pt-ii/)
-* [Web AR: you may already know how to use it](https://web.dev/web-ar)
+* [Virtual reality comes to the web](/vr-comes-to-the-web/)
+* [Virtual reality comes to the web, part II](/vr-comes-to-the-web-pt-ii/)
+* [Web AR: you may already know how to use it](/web-ar)
 
 ## The immersive AR session sample
 
@@ -65,10 +65,9 @@ placed on the surface at the reticle location and orientation of the reticle
 point, regardless of where you tapped the screen. The reticle continues to move
 with your device.
 
-<figure class="w-figure  w-figure--right">
-  <img src="./reticles.png" alt="A reticle rendered on a wall,
-    Lax, or Strict depending on their context" style="max-width: 60vw;">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/42fbB0q2WTa9ytTm8NZN.png", alt="A reticle rendered on a wall, Lax, or Strict depending on their context", width="800", height="1422", style="max-width: 60vw;" %}
+  <figcaption>
     The reticle is a temporary image that aids in placing an object in augmented reality.
   </figcaption>
 </figure>
@@ -304,7 +303,7 @@ function onSelect(event) {
 The best way to get a handle on this is to step through the [sample
 code](https://immersive-web.github.io/webxr-samples/immersive-ar-session.html) or
 try out the
-[codelab](https://codelabs.developers.google.com/codelabs/ar-with-webxr). I hope
+[codelab](https://codelabs.developers.google.com/ar-with-webxr). I hope
 I've given you enough background to make sense of both.
 
 We're not done building immersive web APIs, not by a long shot. We'll publish
diff --git a/src/site/content/en/blog/ar-hit-test/reticles.png b/src/site/content/en/blog/ar-hit-test/reticles.png
deleted file mode 100644
index 2e638c8805f..00000000000
Binary files a/src/site/content/en/blog/ar-hit-test/reticles.png and /dev/null differ
diff --git a/src/site/content/en/blog/aria-labels-and-relationships/index.md b/src/site/content/en/blog/aria-labels-and-relationships/index.md
new file mode 100644
index 00000000000..92c7f414f8c
--- /dev/null
+++ b/src/site/content/en/blog/aria-labels-and-relationships/index.md
@@ -0,0 +1,158 @@
+---
+layout: post
+title: ARIA labels and relationships
+subhead: Using ARIA labels to create accessible element descriptions
+description: Using ARIA labels to create accessible element descriptions
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2018-09-20
+#tags:
+
+---
+
+## Labels
+
+ARIA provides several mechanisms for adding labels and descriptions to elements.
+In fact, ARIA is the only way to add accessible help or description text. Let's
+look at the properties ARIA uses to create accessible labels.
+
+### aria-label
+
+`aria-label` allows us to specify a string to be used as the accessible label.
+This overrides any other native labeling mechanism, such as a `label` element
+&mdash; for example, if a `button` has both text content and an `aria-label`,
+only the `aria-label` value will be used.
+
+You might use an `aria-label` attribute when you have some kind of visual
+indication of an element's purpose, such as a button that uses a graphic instead
+of text, but still need to clarify that purpose for anyone who cannot access the
+visual indication, such as a button that uses only an image to indicate its
+purpose.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ztuCT2fpHvBsKxSBJaXn.jpg", alt="Using aria-label to identify an image only button.", width="575", height="268" %}
+</figure>
+
+### aria-labelledby
+
+`aria-labelledby` allows us to specify the ID of another element in the DOM as
+an element's label.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YQfKTKuskbWwUg1tLlos.jpg", alt="Using aria-labelledby to identify a radio group.", width="575", height="307" %}
+</figure>
+
+This is much like using a `label` element, with some key differences.
+
+ 1. `aria-labelledby` may be used on any element, not just labelable elements.
+ 1. While a `label` element refers to the thing it labels, the relationship is
+    reversed in the case of `aria-labelledby` &mdash; the thing being
+    labeled refers to the thing that labels it.
+ 1. Only one label element may be associated with a labelable element, but
+    `aria-labelledby` can take a list of IDREFs to compose a label from multiple
+    elements. The label will be concatenated in the order that the IDREFs are
+    given.
+ 1. You can use `aria-labelledby` to refer to elements that are hidden and would
+    otherwise not be in the accessibility tree. For example, you could add a
+    hidden `span` next to an element you want to label, and refer to that with
+    `aria-labelledby`.
+ 1. However, since ARIA only affects the accessibility tree, `aria-labelledby`
+    does not give you the familiar label-clicking behavior you get from using a
+    `label` element.
+
+Importantly, `aria-labelledby` overrides **all** other name sources for an
+element. So, for example, if an element has both an `aria-labelledby` and an
+`aria-label`, or an `aria-labelledby` and a native HTML `label`, the
+`aria-labelledby` label always takes precedence.
+
+## Relationships
+
+`aria-labelledby` is an example of a *relationship attribute*. A relationship
+attribute creates a semantic relationship between elements on the page
+regardless of their DOM relationship. In the case of `aria-labelledby`, that
+relationship is "this element is labelled by that element".
+
+The ARIA specification lists [eight relationship
+attributes](https://www.w3.org/TR/wai-aria/states_and_properties#attrs_relationships).
+Six of these, `aria-activedescendant`, `aria-controls`, `aria-describedby`,
+`aria-labelledby`, and `aria-owns`, take a reference to one or more elements to
+create a new link between elements on the page. The difference in each case is
+what that link means and how it is presented to users.
+
+### aria-owns
+
+`aria-owns` is one of the most widely used ARIA relationships. This attribute
+allows us to tell assistive technology that an element that is separate in the
+DOM should be treated as a child of the current element, or to rearrange
+existing child elements into a different order. For example, if a pop-up
+sub-menu is visually positioned near its parent menu, but cannot be a DOM child
+of its parent because it would affect the visual presentation, you can use
+`aria-owns` to present the sub-menu as a child of the parent menu to a screen
+reader.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/K5dAbga6rD8APoZi3IUS.jpg", alt="Using aria-owns to establish a relationship between a menu and a submenu.", width="800", height="377" %}
+</figure>
+
+
+### aria-activedescendant
+
+`aria-activedescendant` plays a related role. Just as the active element of a
+page is the one that has focus, setting the active descendant of an element
+allows us to tell assistive technology that an element should be presented to
+the user as the focused element when its parent actually has the focus. For
+example, in a listbox, you might want to leave page focus on the listbox
+container, but keep its `aria-activedescendant` attribute updated to the
+currently selected list item. This makes the currently selected item appear to
+assistive technology as if it is the focused item.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/v1Ov4bak7cBYT9T6rIGT.jpg", alt="Using aria-activedescendant to establish a relationship in a listbox.", width="800", height="370" %}
+</figure>
+
+### aria-describedby
+
+`aria-describedby` provides an accessible description in the same way that
+`aria-labelledby` provides a label. Like `aria-labelledby`, `aria-describedby`
+may reference elements that are otherwise not visible, whether hidden from the
+DOM, or hidden from assistive technology users. This is a useful technique when
+there is some extra explanatory text that a user might need, whether it applies
+only to users of assistive technology or all users.
+
+A common example is a password input field that is accompanied by some
+descriptive text explaining the minimum password requirements. Unlike a label,
+this description may or may not ever be presented to the user; they may have a
+choice of whether to access it, or it may come after all the other information,
+or it may be pre-empted by something else. For example, if the user is entering
+information, their input will be echoed back and may interrupt the element's
+description. Thus, a description is a great way to communicate supplementary,
+but not essential, information; it won't get in the way of more critical
+information such as the element's role.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gs2BVykPBYV1Ac2tNr8K.jpg", alt="Using aria-describedby to establish a relationship with a password field.", width="800", height="353" %}
+</figure>
+
+
+### aria-posinset & aria-setsize
+
+The remaining relationship attributes are a little different, and work together.
+`aria-posinset` ("position in set") and `aria-setsize` ("size of set") are about
+defining a relationship between sibling elements in a set, such as a list.
+
+When the size of a set cannot be determined by the elements present in the DOM
+&mdash; such as when lazy rendering is used to avoid having all of a large list
+in the DOM at once &mdash; `aria-setsize` can specify the actual set size, and
+`aria-posinset` can specify the element's position in the set. For example, in a
+set that might contain 1000 elements, you could say that a particular element
+has an `aria-posinset` of 857 even though it appears first in the DOM, and then
+use dynamic HTML techniques to ensure that the user can explore the full list on
+demand.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HL5MFhh74egrOD2537WO.jpg", alt="Using aria-posinset and aria-setsize to establish a relationship in a list.", width="800", height="382" %}
+</figure>
diff --git a/src/site/content/en/blog/aria-poison-or-antidote/index.md b/src/site/content/en/blog/aria-poison-or-antidote/index.md
new file mode 100644
index 00000000000..234638b4f97
--- /dev/null
+++ b/src/site/content/en/blog/aria-poison-or-antidote/index.md
@@ -0,0 +1,282 @@
+---
+title: |
+  ARIA: poison or antidote?
+subhead: |
+  How lying to screen readers cures accessibility, when it doesn't rub salt in it!
+authors:
+  - aaronleventhal
+date: 2020-08-18
+description: |
+  How lying to screen readers cures accessibility, when it doesn't rub salt in it!
+tags:
+  - blog
+  - accessibility
+hero: image/admin/avB7jubYxhJr1dHQzl6c.jpg
+alt: >
+  Man lying on the floor covered in post-it notes with empty checkboxes and messages
+  such as off line, overthink, $, chill, take a break, and zzzz.
+---
+
+## What is ARIA?
+
+ARIA lets web authors create an alternative reality, seen only by screen readers 🤥
+
+Sometimes it's necessary to expand on the truth or even downright "lie" to screen readers about
+what's happening in web content. For example, "focus is really over here!" or "this is really a
+slider!". It's like adding magical sticky notes on top of tools and widgets on your workbench. These
+magical sticky notes make everyone believe what's written on them.
+
+Whenever a magical sticky note exists, it either overrides our belief about what each tool is, or
+something about the tool. Example: "this thing over here is a glue gun!". Even though it's still
+actually an empty blue box sitting there on the workbench, the magical sticky note will make us see
+it is a glue gun. We can also add, "and it is 30% full!". The screen reader will now report that
+there is a 30% full glue gun there.
+
+The web equivalent to this is to take a plain box element (a div) with an image inside of it, and
+use ARIA to say it's a slider at value 30 out of 100.
+
+## What isn't ARIA?
+
+ARIA does not affect the appearance of a web page, or the behavior for a mouse or keyboard user.
+Only users of assistive technologies will notice any difference from ARIA. Web developers can add
+any arbitrary ARIA without affecting users that aren't running an assistive technology.
+
+You read it right: ARIA doesn't actually do anything to keyboard focus or tab order. That's all done
+in HTML, sometimes tweaked with bits of JavaScript.
+
+## How does ARIA work?
+
+Browsers are asked by a screen reader or other assistive technology for information about each
+element. When ARIA is present on an element, the browser takes in the information and changes
+what it tells the screen reader about that element.
+
+## Why ARIA?
+
+Why would we ever want to lie to our users!?
+
+Let's say the local web store doesn't sell all the widgets we need. But, we are
+[MacGyver](https://www.cbs.com/shows/macgyver/), dammit. We can just invent our own widgets from
+other widgets! FWIW, the
+[MacGyver's seven most used things](https://www.cbs.com/shows/macgyver/news/1005839/the-notorious-tools-of-macgyver-s-trade/)
+are Swiss Army knives, gum, shoe strings, matches, paper clips, birthday candles, and duct tape. He
+uses them to make bombs and other things that aren't just laying around. This is pretty similar to a
+web author who needs to make a menu bar. Menu bars are so useful you would think they would be part of
+HTML, but they aren't. Oh well! You didn't think authors would be happy with links and buttons did
+you? So the author will cobble one together using their favorite tools: divs, images, style, click
+handlers, keypress handlers, spit, and ARIA.
+
+Sometimes, rather than using ARIA to the max, we just use it as an enhancement. It can be useful to
+sprinkle a little ARIA on some HTML that already basically works. For example, we might want a form
+control to point to an error message alert that relates to some invalid input. Or we might want to
+indicate that a textbox is for searching. These little tweaks can make ordinary websites more usable
+with a screen reader.
+
+## Menu bar example
+
+### Supporting mouse clicker people
+
+Let's make a menu bar together. We show a bunch of items in generic box elements called divs. Any
+time our user clicks on a div, it executes the corresponding command. Cool, it works for mouse
+clicker people!
+
+Next we make it look pretty. We use CSS, i.e. styles, lining things up nicely and putting visual
+outlines around them. We make it look enough like other menu bars that sighties intuitively know
+that it's a menu bar and how to use it. Our menu bar even uses a different background color on any
+item that the mouse is over, giving the user some helpful visual feedback.
+
+Some menu items are parents. They spawn child submenus. Whenever the user hovers on one of these we
+start an animation that slides out the child submenu.
+
+This, of course, is all pretty inaccessible, as is the usual case for many things on the web,
+largely because the HTML standards wizards didn't add everything a web author needs. And even if
+they did, web authors would always want to invent their own special version anyway.
+
+### Making our menu bar keyboard accessible
+
+As a first step toward accessibility, let's add keyboard accessibility. This part only uses HTML,
+and not ARIA. Remember that ARIA does not affect core aspects such as appearance, mouse, or
+keyboard for users without assistive technologies.
+
+Just like a web page can respond to the mouse, it can also respond to the keyboard. Our JavaScript
+will listen to all keystrokes that occur and decide if the keypress is useful. If not, it throws it
+back to the page like a fish that's too small to eat. Our rules are something like:
+
++   If the user presses an arrow key, let's look at our own internal menu bar blueprints and
+    decide what the new active menu item should be. We will clear any current highlights and
+    highlight the new menu item so the sighted user visually knows where they are. The web page
+    should then call `event.preventDefault()` to prevent the browser from performing the
+    usual action (scrolling the page, in this case).
++   If the user presses the <kbd>Enter</kbd> key, we can treat it just like a click, and perform
+    the appropriate action (or even open another menu).
++   If the user presses a key that should do something else, don't eat that!
+    Throw it back to the page as nature intended. For example, our menu bar
+    doesn't need the <kbd>Tab</kbd> key, so throw it back! This is hard to get
+    right, and authors often mess it up. For example, the menu bar needs arrow
+    keys, but not <kbd>Alt</kbd>+<kbd>Arrow</kbd> or
+    <kbd>Command</kbd>+</kbd>Arrow</kbd>. Those are shortcuts for moving to the
+    previous/next page in the web history of your browser tab. If the author
+    isn't careful, the menu bar will eat those. This kind of bug happens a lot,
+    and we haven't even started with ARIA yet!
+
+### Screen reader access to our menu bar
+
+Our menu bar was created with duct tape and divs. As a result, a screen reader has no idea what any
+of it is. The background color for the active item is just a color. The menu item divs are just
+plain objects with no particular meaning. Consequently, a user of our menu bar doesn't get any
+instructions about what keys to press or what item they're on.
+
+But that's no fair! The menu bar acts just fine for the sighted user.
+
+ARIA to the rescue. ARIA lets us pretend to the screen reader that focus is in a
+menu bar. If the author does everything right, our custom menu bar will look to the screen reader
+just like a menu bar in a desktop application.
+
+Our first, ahem, ARIA lie, is to use the `aria-activedescendant` attribute, and set it to the ID of
+the currently active menuitem, being careful to update it whenever it changes. For example,
+`aria-activedescendant="settings-menuitem"`. This little white lie causes the screen reader to
+consider our ARIA active item as the focus, which is read aloud or shown on a Braille display.
+
+{% Details %}
+{% DetailsSummary %}
+Explanation of _ancestor_, _parent_, and _descendant_
+{% endDetailsSummary %}
+The term descendant refers to the
+fact that an item is contained somewhere inside of another. The opposite term is ancestor, which is
+to say an item is contained by ancestors. For the next container up/down, these may use the more
+specific terms parent/child. For example, imagine a document with a paragraph that has a link
+inside. The link's parent is a paragraph, but it also has the document as an ancestor.
+Conversely, the document may have many paragraph children, each with links. The links are all
+descendants of the grandparent document.
+{% endDetails %}
+
+Back to `aria-activedescendant`. By using it to point from the focused menu bar to a specific menu
+item, the screen reader now knows where the user has moved, but nothing else about the object. What
+is this div thing anyway? That's where the role attribute comes in. We use `role="menubar"` on the
+containing element for the entire thing, then we use `role="menu"` on groups of items, and
+`role="menuitem"` on … drumroll … the individual menu items.
+
+And what if the menuitem can lead to a child menu? The user needs to know that right? For a sighted
+user, there might be a little picture of a triangle at the end of the menu, but the screen reader
+doesn't know how to automatically read images, at least at this point. We can add
+`aria-expanded="false"` on each expandable menuitem to indicate that 1) there is something that can
+be expanded, and 2) it currently is not expanded. As an added touch the author should put
+`role="none"` on the img triangle to indicate it's for prettification purposes only. This prevents
+the screen reader from saying anything about the image that would be redundant at best and possibly annoying.
+
+## Dealing with bugs
+
+### Keyboard bugs (HTML!)
+
+Although keyboard access is a part of core HTML, authors mess it up all the time, either because
+they don't use keyboard navigation all that much, or because there is much nuance to get right.
+
+Examples of bugs:
+
++   A checkbox uses spacebar to toggle, but the author forgot to call `preventDefault()`. Now
+    the spacebar will both toggle the checkbox and page down, which is the default browser behavior
+    for spacebar.
++   An ARIA modal dialog wants to trap tab navigation inside of it, and the author forgets to
+    specifically allow <kbd>Control</kbd>+<kbd>Tab</kbd> through to the browser. Now,
+    <kbd>Control</kbd>+<kbd>Tab</kbd> just navigates within their dialog, and doesn't switch tabs
+    in the browser as it should. Ugh.
++   An author creates a selection list, and implements up/down, but does not implement
+    home/end/pageup/pagedown or first letter navigation.
+
+Authors should follow known patterns. Check out the [Resources](#resources) section for more information.
+
+For pure keyboard access issues, it's useful to also try without a screen reader, or with virtual
+browser mode off. Screen readers are not generally necessary to discover keyboard bugs, and keyboard
+access is actually implemented with HTML, not ARIA. After all, ARIA doesn't affect basic stuff like
+the keyboard or mouse behavior, it only lies to the screen reader about what's in the web page,
+what's currently focused, etc.
+
+Keyboard bugs are almost always a bug in the web content, specifically in their HTML and JavaScript,
+not in ARIA.
+
+### ARIA bugs: why are there so many?
+
+There are many, many places where authors can get ARIA wrong, and each will lead to either complete
+breakage or subtle differences. The subtle ones are probably worse, because the author won't catch
+most of them before publishing.
+
+After all, unless the author is an experienced screen reader user, something is going to go wrong in
+the ARIA. In our menu bar example, the author could think the "option" role was to be used when "menuitem"
+was correct. They could forget to use `aria-expanded`, forget to set and clear
+`aria-activedescendant` at the right times, or forget to have a menu bar containing the other menus.
+And what about menu item counts? Usually menu items are presented by screen readers with something
+like "item 3 of 5" so that the user knows where they are. This is generally counted automatically by
+the browser, but in some cases, and in some browser - screen reader combinations, the wrong numbers
+might be computed, and the author would need to override these numbers with `aria-posinset` and
+`aria-setsize`.
+
+And this is just menu bars. Think of how many kinds of widgets there are. Glance at the ARIA spec or
+authoring practices if you like. For each pattern, there are a dozen ways ARIA could be misused.
+ARIA relies on authors to know what they're doing. What could possibly go wrong, given that most
+authors are not screen reader users?
+
+In other words, it is 100 percent necessary for actual screen reader users to try ARIA widgets before
+they're considered shippable. There's too much nuance. Ideally everything would be tried with
+several different browser-screen reader combinations, because of the numerous implementation
+quirks, in addition to a few incomplete implementations.
+
+## Summary
+
+In summary, ARIA magic can be used to override or add to anything and everything that the HTML says.
+It can be used to do little fine changes to the accessibility presentation, or to create an
+entire experience. This is why ARIA is both incredibly powerful and yet dangerous in the hands of
+our friendly local web authors who don't generally use screen readers themselves.
+
+ARIA is just a straightforward truth override markup layer. When a screen reader asks what's happening, if ARIA
+exists, they get the ARIA version of the truth instead of the real underlying truth.
+
+## Addendum 1: Additional Resources
+
+### Hybrid reference with keyboard info and code examples
+
++   [W3C's ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/): this
+    documents the important keyboard navigation characteristics of each example and provides
+    working JS/CSS/ARIA code. The examples are focused on what works today, and do not cover mobile.
+
+## Addendum 2: What is ARIA most used for?
+
+Because ARIA can replace or supplement small or large truths, generally
+useful for saying stuff that the screen reader cares about.
+
+Here are some common uses of ARIA.
+
+* Special widgets that don't exist in HTML, like a menu bar, autocomplete, tree, or spreadsheet
+* Widgets that exist in HTML, but the author invented their own anyway, possibly because they
+  needed to tweak the behavior or appearance of the normal widget. For example, an HTML `<input
+  type="range">` element is basically a slider, but authors want to make it look different. For
+  most things, CSS can be used, but for `input type="range"`, CSS is awkward. An author can
+  make their own slider, and use `role="slider"` on it with `aria-valuenow` to say what the current
+  value is.
+* Live regions tell screen readers "in this area of the page, anything that changes is worth telling
+  the user about."
+* Landmarks (HTML has equivalents now). These are somewhat like headings, in that they help
+  screen reader users find what they want faster. However, they're different in that they contain
+  the entire related area. Like, "this container is the main area of the page" and "this
+  container over here is a navigation panel".
+
+## Addendum 3: What's an Accessibility API?
+
+An accessibility API is how a screen reader or other AT knows what's in the page and what's
+happening right now. Examples include MSAA, IA2, and UIA. And that's just Windows! There are two parts to
+an accessibility API:
+
++   A "tree" of objects that represents a container hierarchy. These are like Russian nesting dolls,
+    but each doll can contain multiple other dolls. For example, a document can contain a bunch of
+    paragraphs, and a paragraph can have text, images, links, boldface, etc. Each item in the
+    object tree can have properties like a role (what am I?), a name/label, a user-entered value, a
+    description, as well as boolean states like focusable, focused, required, checked. ARIA can
+override any of these properties.
+    The screen reader uses the tree to help the user navigate in virtual buffer mode, like "go to
+    the next heading please".
++   A series of events that occur describing changes to the tree, like "focus is now over
+    here!".  The screen reader uses the events to tell the user what has just happened. When
+    important HTML or ARIA markup changes, an event is fired to tell the screen reader that
+    something changed.
+
+Usually authors just use HTML, which maps nicely to these accessibility APIs. When HTML is not
+enough, ARIA is used and the browser overrides the HTML semantics before sending the object tree or
+events to the screen reader.
diff --git a/src/site/content/en/blog/art-sessions/index.md b/src/site/content/en/blog/art-sessions/index.md
new file mode 100644
index 00000000000..f865d0c29a9
--- /dev/null
+++ b/src/site/content/en/blog/art-sessions/index.md
@@ -0,0 +1,445 @@
+---
+layout: post
+title: Virtual Art Sessions
+description: Six artists were invited to paint, design, and sculpt in VR.
+date: 2016-04-19
+updated: 2016-04-19
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RKMo1BHS0YOcGjlcNqv8.png", alt="Art Session detail", width="800", height="1428" %}
+</figure>
+
+### Summary
+
+Six artists were invited to paint, design, and sculpt in VR. This is the
+process for how we recorded their sessions, converted the data, and presented
+it in real-time with web browsers.
+
+[https://g.co/VirtualArtSessions](https://g.co/VirtualArtSessions)
+
+What a time to be alive! With the introduction of virtual reality as a consumer
+product, new and unexplored possibilities are being discovered. Tilt Brush, a
+Google product available on the HTC Vive, allows you to draw in three
+dimensional space. When we tried Tilt Brush for the first time, that feeling of
+drawing with motion-tracked controllers coupled with the presence of being "in a
+room with super-powers" lingers with you; there really isn't an experience quite
+like being able to draw in the empty space all around you.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/95AzVa7Ik3rPAbuuLhlc.png", alt="Virtual art piece", width="800", height="471" %}
+</figure>
+
+The Data Arts Team at Google was presented with the challenge of showcasing this
+experience to those without a VR headset, on the web where Tilt Brush doesn't
+yet operate. To that end, the team brought in a sculptor, an illustrator, a
+concept designer, a fashion artist, an installation artist, and street artists
+to create artwork in their own style within this new medium.
+
+## Recording Drawings in Virtual Reality
+
+Built in Unity, the Tilt Brush software itself is a desktop application that
+uses room-scale VR to track your head position (head mounted display, or HMD)
+and the controllers in each of your hands. Artwork created in Tilt Brush is by
+default exported as a `.tilt` file. To bring this experience to the web, we
+realized we needed more than just the artwork data. We worked closely with the
+Tilt Brush team to modify Tilt Brush so it exported undo/delete actions as well
+as the artist's head and hand positions at 90 times a second.
+
+When drawing, Tilt Brush takes your controller position and angle and converts
+multiple points over time into a "stroke". You can see an example
+[here](https://docs.google.com/document/d/11ZsHozYn9FnWG7y3s3WAyKIACfbfwb4PbaS8cZ_xjvo/edit#).
+We wrote plugins that extracted these strokes and output them as raw JSON.
+
+```js
+    {
+      "metadata": {
+        "BrushIndex": [
+          "d229d335-c334-495a-a801-660ac8a87360"
+        ]
+      },
+      "actions": [
+        {
+          "type": "STROKE",
+          "time": 12854,
+          "data": {
+            "id": 0,
+            "brush": 0,
+            "b_size": 0.081906750798225,
+            "color": [
+              0.69848710298538,
+              0.39136275649071,
+              0.211316883564
+            ],
+            "points": [
+              [
+                {
+                  "t": 12854,
+                  "p": 0.25791856646538,
+                  "pos": [
+                    [
+                      1.9832634925842,
+                      17.915264129639,
+                      8.6014995574951
+                    ],
+                    [
+                      -0.32014992833138,
+                      0.82291424274445,
+                      -0.41208130121231,
+                      -0.22473378479481
+                    ]
+                  ]
+                }, ...many more points
+              ]
+            ]
+          }
+        }, ... many more actions
+      ]
+    }
+```
+
+The above snippet outlines the format of the sketch JSON format.
+
+Here, each stroke is saved as an action, with a type: "STROKE". In addition to
+stroke actions, we wanted to show an artist making mistakes and changing their
+mind mid-sketch, so it was critical to save "DELETE" actions which serve as
+either erase or undo actions for an entire stroke.
+
+Basic information for each stroke is saved, so the brush type, brush size, color
+rgb are all collected.
+
+Finally, each vertex of the stroke is saved out and that includes the position,
+angle, time, as well as the controller's trigger pressure strength (noted as `p`
+within each point).
+
+Note that the rotation is a 4-component quaternion. This is important later when
+we render the strokes out to avoid gimbal lock.
+
+## Playing Back Sketches with WebGL
+
+In order to show the sketches in a web browser, we used
+[THREE.js](http://threejs.org/) and wrote geometry generation code that mimicked
+what Tilt Brush does under the hood.
+
+While Tilt Brush produces triangle strips in real-time based on the user's hand
+motion, the entirety of the sketch is already "finished" by the time we show it
+on the web. This allows us to bypass much of the real-time calculation and bake
+the geometry on load.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bARCGRBnvZ6ikrwg5YID.png", alt="WebGL Sketches", width="800", height="667" %}
+</figure>
+
+Each pair of vertices in a stroke produce a direction vector (the blue lines
+connecting each point as shown above, `moveVector` in the code snippet below).
+Each point also contain an orientation, a quaternion that represent the
+controller's current angle. To produce a triangle strip, we iterate over each of
+these points producing normals that are perpendicular to the direction and
+controller orientation.
+
+The process for computing the triangle strip for each stroke is nearly identical
+to the code used in Tilt Brush:
+
+ ```js
+const V_UP = new THREE.Vector3( 0, 1, 0 );
+const V_FORWARD = new THREE.Vector3( 0, 0, 1 );
+
+function computeSurfaceFrame( previousRight, moveVector, orientation ){
+    const pointerF = V_FORWARD.clone().applyQuaternion( orientation );
+
+    const pointerU = V_UP.clone().applyQuaternion( orientation );
+
+    const crossF = pointerF.clone().cross( moveVector );
+    const crossU = pointerU.clone().cross( moveVector );
+
+    const right1 = inDirectionOf( previousRight, crossF );
+    const right2 = inDirectionOf( previousRight, crossU );
+
+    right2.multiplyScalar( Math.abs( pointerF.dot( moveVector ) ) );
+
+    const newRight = ( right1.clone().add( right2 ) ).normalize();
+    const normal = moveVector.clone().cross( newRight );
+    return { newRight, normal };
+}
+
+function inDirectionOf( desired, v ){
+    return v.dot( desired ) >= 0 ? v.clone() : v.clone().multiplyScalar(-1);
+}
+```
+
+Combining the stroke direction and orientation by themselves return
+mathematically ambiguous results; there could be multiple normals derived and
+would often yield a "twist" in the geometry.
+
+When iterating over the points of a stroke, we maintain a "preferred right"
+vector and pass this into the function `computeSurfaceFrame()`. This function
+gives us a normal from which we can derive a quad in the quad strip, based on
+the direction of the stroke (from last point to current point), and the
+orientation of the controller (a quaternion). More importantly, it also returns
+a new "preferred right" vector for the next set of computations.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4yln7PFKrg41VJ6M07jU.png", alt="Strokes", width="788", height="1003" %}
+</figure>
+
+After generating quads based on the control points of each stroke, we _fuse the
+quads_ by interpolating their corners, from one quad to the next.
+
+```js
+function fuseQuads( lastVerts, nextVerts) {
+    const vTopPos = lastVerts[1].clone().add( nextVerts[0] ).multiplyScalar( 0.5
+);
+    const vBottomPos = lastVerts[5].clone().add( nextVerts[2] ).multiplyScalar(
+0.5 );
+
+    lastVerts[1].copy( vTopPos );
+    lastVerts[4].copy( vTopPos );
+    lastVerts[5].copy( vBottomPos );
+    nextVerts[0].copy( vTopPos );
+    nextVerts[2].copy( vBottomPos );
+    nextVerts[3].copy( vBottomPos );
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5DtNonqJ8id4Gcr71KJ4.png", alt="Fused quads", width="800", height="668" %}
+<figcaption>Fused quads.</figcaption>
+</figure>
+
+Each quad also contain UVs which are generated as a next step. Some brushes
+contain a variety of stroke patterns to give the impression that every stroke
+felt like a different stroke of the paint brush. This is accomplished using
+_texture atlasing, _where each brush texture contain all the possible
+variations. The correct texture is selected by modifying the UV values of the
+stroke.
+
+```js
+function updateUVsForSegment( quadVerts, quadUVs, quadLengths, useAtlas,
+atlasIndex ) {
+    let fYStart = 0.0;
+    let fYEnd = 1.0;
+
+    if( useAtlas ){
+    const fYWidth = 1.0 / TEXTURES_IN_ATLAS;
+    fYStart = fYWidth * atlasIndex;
+    fYEnd = fYWidth * (atlasIndex + 1.0);
+    }
+
+    //get length of current segment
+    const totalLength = quadLengths.reduce( function( total, length ){
+    return total + length;
+    }, 0 );
+
+    //then, run back through the last segment and update our UVs
+    let currentLength = 0.0;
+    quadUVs.forEach( function( uvs, index ){
+    const segmentLength = quadLengths[ index ];
+    const fXStart = currentLength / totalLength;
+    const fXEnd = ( currentLength + segmentLength ) / totalLength;
+    currentLength += segmentLength;
+
+    uvs[ 0 ].set( fXStart, fYStart );
+    uvs[ 1 ].set( fXEnd, fYStart );
+    uvs[ 2 ].set( fXStart, fYEnd );
+    uvs[ 3 ].set( fXStart, fYEnd );
+    uvs[ 4 ].set( fXEnd, fYStart );
+    uvs[ 5 ].set( fXEnd, fYEnd );
+
+    });
+
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/30s85NPeu9ZcMVxitDHn.png", alt="Four textures in a texture atlas for oil brush", width="800", height="705" %}
+<figcaption>Four textures in a texture atlas for oil brush</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6M9djtdCUMFpZmQgwcjs.png", alt="In Tilt Brush", width="800", height="450" %}
+<figcaption>In Tilt Brush</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Xs8c9HR71dOxZV7NTz10.png", alt="In WebGL", width="800", height="667" %}
+<figcaption>In WebGL</figcaption>
+</figure>
+
+Since each sketch has unbounded number of strokes, and the strokes won't need to
+modified in run-time, we pre-compute the stroke geometry ahead of time and merge
+them into one single mesh. Even though each new brush type must be its own
+material, that still reduces our draw calls to one per brush.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qhkAAXNh64KFfDQCN447.png", alt="The entire sketch above is performed in one draw call in WebGL", width="800", height="760" %}
+<figcaption>The entire sketch above is performed in one draw call in WebGL</figcaption>
+</figure>
+
+To stress test the system, we created a sketch that took 20 minutes filling the
+space with as many vertices as we could. The resulting sketch still played at
+60fps in WebGL.
+
+Since each of the original vertices of a stroke also contained time, we can
+easily play back the data. Re-calculating the strokes per-frame would be really
+slow, so instead we pre-computed the entire sketch on load and simply revealed
+each quad when it was time to do so.
+
+Hiding a quad simply meant collapsing its vertices to the 0,0,0 point. When the
+time has reached the point at which the quad is supposed to be revealed, we
+reposition the vertices back into place.
+
+An area for improvement is manipulating the vertices entirely on the GPU with
+shaders. The current implementation places them by looping through the vertex
+array from the current timestamp, checking which vertices need to be revealed
+and then updating the geometry. This puts a lot of load on the CPU which causes
+the fan to spin as well as wasting battery life.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nPnpJyxwrGtJK3gcBmY4.png", alt="Virtual art piece", width="800", height="972" %}
+</figure>
+
+## Recording the Artists
+
+We felt that the sketches themselves wouldn't be enough. We wanted to show the
+artists inside their sketches, painting each brushstroke.
+
+To capture the artists, we used Microsoft Kinect cameras to record the depth
+data of the artists' body in space. This gives us the ability to show their
+three dimensional figures in the same space the drawings appear.
+
+Since the artist's body would occlude itself preventing us from seeing what's
+behind it, we used a double Kinect system, both at opposite sides of the room
+pointing at the center.
+
+In addition to the depth information, we also captured the color information of
+the scene with standard DSLR cameras. We used the excellent
+[DepthKit](http://www.depthkit.tv/) software to calibrate and merge
+the footage from the depth camera and the color cameras. The Kinect is capable
+of recording color, but we chose to use DSLRs because we could control the
+exposure settings, use beautiful high-end lenses, and record in high definition.
+
+To record the footage, we built a special room to house the HTC Vive, the artist
+and the camera. All surfaces were covered with material that absorbed infrared
+light to give us a cleaner point cloud (duvetyne on the walls, ribbed rubber
+matting on the floor). In case the material showed up in the point cloud
+footage, we chose black material so it wouldn't be as distracting as something
+that was white.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8e3ohI2IU1bXjDkFsmq9.jpg", alt="Recording artist", width="800", height="600" %}
+</figure>
+
+The resulting video recordings gave us enough information to project a particle
+system. We wrote some additional tools in
+[openFrameworks](http://openframeworks.cc/) to further clean up the footage, in
+particular removing the floors, walls and ceiling.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PN1w7DtFJEVq4nFDT9sz.png", alt="All four channels of a recorded video session (two color channels above and two
+depth below)", width="649", height="751" %}
+<figcaption>All four channels of a recorded video session (two color channels above and two
+depth below)</figcaption>
+</figure>
+
+In addition to showing the artists, we wanted to render the HMD and the
+controllers in 3D as well. This was not only important for showing the HMD in
+the final output clearly (the HTC Vive's reflective lenses were throwing off
+Kinect's IR readings), it gave us points of contact for debugging the particle
+output and lining up the videos with the sketch.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/i7rfX3n7VMcs3zjukANS.png", alt="The head mounted display, controllers, and particles lined up", width="800", height="652" %}
+<figcaption>The head mounted display, controllers, and particles lined up</figcaption>
+</figure>
+
+This was done by writing a custom plugin into Tilt Brush that extracted the
+positions of the HMD and controllers each frame. Since Tilt Brush runs at 90fps,
+tons of data streamed out and a sketch's input data was upwards of 20mb
+uncompressed. We also used this technique to capture events that aren't recorded
+in the typical Tilt Brush save file, such as when the artist selects an option
+on the tools panel and the position of the mirror widget.
+
+In processing the 4TB of data we captured, one of the biggest challenges was
+aligning all the different visual/data sources. Each video from a DSLR camera
+need to be aligned with the corresponding Kinect, so that the pixels aligned in
+space as well as time. Then the footage from these two camera rigs needed to be
+aligned with each other to form a single artist. Then we needed to align our 3d
+artist with the data captured from their drawing. Phew! We wrote browser based
+tools to help with most of these tasks, and you can try them yourself
+[here](https://virtualart.chromeexperiments.com/test/)
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XtKPh1CuV4Ri8vx3EmkT.png", alt="Recordin artists", width="800", height="513" %}
+<figure>
+
+Once the data was aligned, we used some scripts written in NodeJS to process it
+all and output  a video file and series of JSON files, all trimmed and
+synchronized. To reduce the file size, we did three things. First, we reduced
+the accuracy of each floating point number so that they are at maximum 3
+decimal's worth of precision. Second, we cut the number of points by a third to
+30fps, and interpolated the positions client-side. Finally, we serialized the
+data so instead of using plain JSON with key/value pairs, an order of values is
+created for position and rotation of the HMD and controllers. This cut the file
+size down to just shy of 3mb which was acceptable to deliver over the wire.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6E3mK9YZDTJb5oVt311U.png", alt="Recording artists", width="800", height="265" %}
+</figure>
+
+Since the video itself is served as an HTML5 video element that is read in by a
+WebGL texture to become particles, the video itself needed to play hidden in the
+background. A shader converts the colors in the depth imagery into positions in
+3D space. James George has shared [a great example](https://github.com/obviousjim/DepthKitJS)
+of how you can do with with footage straight out of DepthKit.
+
+iOS has restrictions on inline video playback, which we assume is to prevent
+users from being pestered by web video ads that autoplay. We used a technique
+similar to [other workarounds on the
+web](http://stanko.github.io/html-canvas-video-player/), which is to copy the
+video frame into a canvas and manually update the video seek time, every 1/30 of
+a second.
+
+```js
+videoElement.addEventListener( 'timeupdate', function(){
+    videoCanvas.paintFrame( videoElement );
+});
+
+function loopCanvas(){
+
+    if( videoElement.readyState === videoElement.HAVE\_ENOUGH\_DATA ){
+
+    const time = Date.now();
+    const elapsed = ( time - lastTime ) / 1000;
+
+    if( videoState.playing && elapsed &gt;= ( 1 / 30 ) ){
+        videoElement.currentTime = videoElement.currentTime + elapsed;
+        lastTime = time;
+    }
+
+    }
+
+}
+
+frameLoop.add( loopCanvas );
+```
+
+Our approach had the unfortunate side-effect of significantly lowering iOS
+framerate since the copying of pixel buffer from video to canvas is very
+CPU-intensive. To get around this, we simply served smaller sized versions of
+the same videos which allow at least 30fps on an iPhone 6.
+
+## Conclusion
+
+The general consensus for VR software development as of 2016 is to keep
+geometries and shaders simple so that you can run at 90+fps in an HMD. This
+turned out to be a really great target for WebGL demos since the techniques used
+in Tilt Brush map very nicely to WebGL.
+
+While web browsers displaying complex 3D meshes is not exciting in and of
+itself, this was a proof of concept that cross pollination of VR work and the
+web is entirely possible.
+
diff --git a/src/site/content/en/blog/asda-george/index.md b/src/site/content/en/blog/asda-george/index.md
new file mode 100644
index 00000000000..fa8261c2bc2
--- /dev/null
+++ b/src/site/content/en/blog/asda-george/index.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: George.com enhances the mobile customer experience with new Progressive Web App 
+date: 2018-02-23
+updated: 2018-02-27
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+[George.com](http://www.george.com) is a leading UK clothing brand, part of ASDA
+Walmart. After upgrading their site to a Progressive Web App (PWA), the brand 
+saw a 31 percent increase in mobile conversion.
+
+- 3.8x - Faster average page load time
+- 2x - Lower bounce rate
+- 31% - Increase in Conversion Rate
+- 20% - More page views per visit
+- 28% - Longer average time on site for visits from Home screen
+
+
+## Challenge
+
+With consumer expectations around the mobile shopping experience at an all-time 
+high, Asda George realized they needed to revamp an outdated mobile solution and
+thereby improve the offer for customers. The team embraced a mobile-first approach, 
+placing focus on design, speed and functionality to drive mobile conversion.
+
+## Solution
+
+The George.com team recognized that to meet this challenge the business had to
+enhance the mobile experience by building a Progressive Web App. Working with 
+Isobar UK to assess the end to end customer journey, the team adopted a scrum 
+driven, agile approach to the workstream. By incrementally deploying the PWA, the 
+Asda George team were able to realize the benefits immediately.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Dgw4Dg0zGAdYbkZLtqTY.png", alt="Skeleton screen during page transition", width="300", height="652" %}
+    <figcaption>Skeleton screen during page transition</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5IAPQvot5X1QSDiRppml.png", alt="Page fully rendered after page transition", width="300", height="655" %}
+    <figcaption>Page fully rendered after page transition</figcaption>
+  </figure>
+</div>
+
+Site speed was the most crucial part of the initiative. Following PWA best 
+practices, in accordance with Google, Asda George reduced page load time for 
+shoppers by **3.8x times**. The business also saw a 31 percent 
+increase in conversion and **20 percent more page views** per visit. 
+
+By implementing site wide HTTPS, Asda George now offers a more secure end-to-end
+ shopping experience for customers, enabling modern browser capabilities, like 
+ Service Worker, and therefore allowing consumers to stay in touch with the brand 
+ whilst offline. 
+
+In addition, the brand implemented an “Add to Home Screen” prompt, which resulted
+ in an increase in customer time on site by **28 percent**, truly 
+ creating a native app like experience on the web.
diff --git a/src/site/content/en/blog/aspect-ratio/index.md b/src/site/content/en/blog/aspect-ratio/index.md
new file mode 100644
index 00000000000..978268cd192
--- /dev/null
+++ b/src/site/content/en/blog/aspect-ratio/index.md
@@ -0,0 +1,279 @@
+---
+layout: post
+title: 'New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly'
+subhead: The new CSS property that helps maintain spacing in responsive layouts.
+authors:
+  - una
+date: 2021-01-28
+hero: image/admin/I14dS86oJT2f0uHaDLEM.jpg
+alt: Image of colorful telephones resized with the same aspect ratio.
+description: Maintaining aspect ratio within images and elements is now
+    easier to achieve with the new aspect-ratio CSS property.
+tags:
+  - blog
+  - css
+---
+
+{% Aside %}
+
+Summary: Maintaining a consistent width-to-height ratio, called an *aspect ratio*, is critical in
+responsive web design and for preventing [cumulative layout shift](/cls/). Now,
+there's a more straightforward way to do this with the new `aspect-ratio` property launching in
+[Chromium 88](https://www.chromestatus.com/feature/5738050678161408), [Firefox
+87](https://developer.mozilla.org/docs/Mozilla/Firefox/Experimental_features#property_aspect-ratio), and [Safari Technology Preview
+118](https://developer.apple.com/safari/technology-preview/release-notes/).
+
+{% endAside %}
+
+## Aspect ratio
+
+{% BrowserCompat 'css.properties.aspect-ratio' %}
+
+Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of:
+width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video,
+and more recent consumer cameras, tend to have a 16:9 aspect ratio.
+
+<figure>
+  {% Img src="image/admin/od54hUUe21UABpbWxSFG.jpg", alt="Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio.", width="800", height="526" %}
+  <figcaption>Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio.</figcaption>
+</figure>
+
+With the advent of responsive design, maintaining aspect ratio has been increasingly important for
+web developers, especially as image dimensions differ and element sizes shift based on available
+space.
+
+Some examples of where maintaining aspect ratio become important are:
+
+- Creating responsive iframes, where they are 100% of a parent's width, and the height should remain
+  a specific viewport ratio
+- Creating intrinsic placeholder containers for images, [videos](http://fitvidsjs.com/), and embeds
+  to prevent re-layout when the items load and take up space
+- Creating uniform, responsive space for interactive data visualizations or SVG animations
+- Creating uniform, responsive space for multi-element components such as cards or calendar dates
+- Creating uniform, responsive space for multiple images of varying dimension (can be used alongside
+  `object-fit`)
+
+## Object-fit
+
+Defining an aspect ratio helps us with sizing media in a responsive context. Another tool in this
+bucket is the `object-fit` property, which enables users to describe how an object (such an as image)
+within a block should fill that block:
+
+<figure>
+  {% Img src="image/admin/A7uj6u5MULodlw4lVsI2.jpg", alt="Object-fit demo visualization", width="800", height="236" %}
+  <figcaption>Showcasing various <code>object-fit</code> values. See <a href="https://codepen.io/una/pen/mdrLGjR">demo on Codepen</a>.</figcaption>
+</figure>
+
+The `initial` and `fill` values re-adjust the image to fill the space. In our example, this causes
+the image to be squished and blurry, as it re-adjusts pixels. Not ideal. `object-fit: cover` uses
+the image's smallest dimension to fill the space and crops the image to fit into it based on this
+dimension. It "zooms in" at its lowest boundary. `object-fit: contain` ensures that the entire image
+is always visible, and so the opposite of `cover`, where it takes the size of the largest boundary
+(in our example above this is width), and resizes the image to maintain its intrinsic aspect ratio
+while fitting into the space. The `object-fit: none` case shows the image cropped in its center
+(default object position) at its natural size.
+
+`object-fit: cover` tends to work in most situations to ensure a nice uniform interface when dealing
+with images of varying dimensions, however, you lose information this way (the image is cropped at
+its longest edges).
+
+If these details are important (for example, when working with a flat lay of beauty products),
+cropping important content is not acceptable. So the ideal scenario would be responsive images of
+varying sizes that fit the UI space without cropping.
+
+## The old hack: maintaining aspect ratio with `padding-top`
+
+<figure>
+  {% Img src="image/admin/j3YJicINXjly349uEEUt.jpg", alt="Using padding-top to set a 1:1 aspect ratio on post preview images within a carousel.", width="800", height="296" %}
+  <figcaption> Using <code>padding-top</code> to set a 1:1 aspect ratio on post preview images within a carousel.</figcaption>
+</figure>
+
+In order to make these more responsive, we can use aspect ratio. This allows for us to set a
+specific ratio size and base the rest of the media on an individual axis (height or width).
+
+A currently well-accepted cross-browser solution for maintaining aspect ratio based on an image's
+width is known as the "Padding-Top Hack". This solution requires a parent container and an
+absolutely placed child container. One would then calculate the aspect ratio as a percentage to set
+as the `padding-top`. For example:
+
+- 1:1 aspect ratio = 1 / 1 = 1 = `padding-top: 100%`
+- 4:3 aspect ratio = 3 / 4 = 0.75 = `padding-top: 75%`
+- 3:2 aspect ratio = 2 / 3 = 0.66666 = `padding-top: 66.67%`
+- 16:9 aspect ratio = 9 / 16 = 0.5625 = `padding-top: 56.25%`
+
+Now that we have identified the aspect ratio value, we can apply that to our parent container.
+Consider the following example:
+
+```html
+<div class="container">
+  <img class="media" src="..." alt="...">
+</div>
+```
+
+We could then write the following CSS:
+
+```css
+.container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.media {
+  position: absolute;
+  top: 0;
+}
+```
+
+## Maintaining aspect ratio with `aspect-ratio`
+
+<figure>
+  {% Img src="image/admin/XT8PbPiYx1IJq3Pvmanz.jpg", alt="Using aspect-ratio to set a 1:1 aspect ratio on post preview images within a carousel.", width="800", height="296" %}
+  <figcaption>Using <code>aspect-ratio</code> to set a 1:1 aspect ratio on post preview images within a carousel.</figcaption>
+</figure>
+
+Unfortunately, calculating these `padding-top` values is not very intuitive, and requires some
+additional overhead and positioning. With the new intrinsic `aspect-ratio` [CSS
+property](https://drafts.csswg.org/css-sizing-4/#aspect-ratio), the language for maintaining aspect
+ratios is much more clear.
+
+With the same markup, we can replace: `padding-top: 56.25%` with `aspect-ratio: 16 / 9`, setting
+`aspect-ratio` to a specified ratio of `width` / `height`.
+
+<div class="switcher">
+{% Compare 'worse', 'Using padding-top' %}
+```css
+.container {
+  width: 100%;
+  padding-top: 56.25%;
+}
+```
+{% endCompare %}
+
+{% Compare 'better', 'Using aspect-ratio' %}
+```css
+.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+{% endCompare %}
+</div>
+
+Using `aspect-ratio` instead of `padding-top` is much more clear, and does not overhaul the padding
+property to do something outside of its usual scope.
+
+This new property also adds the ability to
+set aspect ratio to `auto`, where "replaced elements with an intrinsic aspect ratio use that aspect
+ratio; otherwise the box has no preferred aspect ratio." If both `auto` and a `<ratio>` are
+specified together, the preferred aspect ratio is the specified ratio of `width` divided by `height` unless
+it is a [replaced element](https://developer.mozilla.org/docs/Web/CSS/Replaced_element) with
+an intrinsic aspect ratio, in which case that aspect ratio is used instead.
+
+## Example: consistency in a grid
+
+This works really well with CSS layout mechanisms like CSS Grid and Flexbox as well. Consider a list
+with children that you want to maintain a 1:1 aspect ratio, such as a grid of sponsor icons:
+
+```html
+<ul class="sponsor-grid">
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+</ul>
+```
+
+```css
+.sponsor-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+.sponsor img {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  object-fit: contain;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/gridimages2.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Images in a grid with their parent element at various aspect ratio dimensions. <a href="https://codepen.io/una/pen/PoGddaw">See demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+## Example: preventing layout shift
+
+Another great feature of `aspect-ratio` is that it can create placeholder space to prevent
+[Cumulative Layout Shift](/cls/) and deliver better [Web Vitals](/learn-core-web-vitals/). In this first
+example, loading an asset from an API such as [Unsplash](https://source.unsplash.com/) creates a
+layout shift when the media is finished loading.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-missing.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Video of cumulative layout shift that happens when no aspect ratio is set on a loaded asset. This video is recorded with an emulated 3G network.
+  </figcaption>
+</figure>
+
+Using `aspect-ratio`, on the other hand, creates a placeholder to prevent this layout shift:
+
+```css
+img {
+  width: 100%;
+  aspect-ratio: 8 / 6;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-set.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Video with a set aspect ratio is set on a loaded asset. This video is recorded with an emulated 3G network. <a href="https://codepen.io/una/pen/GRjLZmG">See demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+### Bonus tip: image attributes for aspect ratio
+
+Another way to set an image's aspect ratio is through [image attributes](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). If you know the dimensions of the image ahead of time, it is a [best practice](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/#check-the-images-width-and-height-attributes-in-the-html) to
+set these dimensions as its `width` and `height`.
+
+For our example above, knowing the dimensions are 800px by 600px, the image markup would look like: `<img src="image.jpg"
+alt="..." width="800" height="600">`. If the image sent has the same aspect
+ratio, but not necessarily those exact pixel values, we could still use image
+attribute values to set the ratio, combined with a style of `width: 100%` so
+that the image takes up the proper space. All together that would look like:
+
+```markup
+<!-- Markup -->
+<img src="image.jpg" alt="..." width="8" height="6">
+```
+
+```css
+/* CSS */
+img {
+  width: 100%;
+}
+```
+
+In the end, the effect is the same as setting the `aspect-ratio` on the
+image via CSS, and cumulative layout shift is avoided ([see demo on
+Codepen](https://codepen.io/una/pen/gOwJWoz)).
+
+## Conclusion
+
+With the new `aspect-ratio` CSS property, launching across multiple modern browsers, maintaining proper
+aspect ratios in your media and layout containers gets a little bit more straightforward.
+
+
+Photos by [Amy Shamblen](https://unsplash.com/photos/TXg_38oImi0) and [Lionel
+Gustave](https://unsplash.com/photos/c1rOy44wuts) via Unsplash.
diff --git a/src/site/content/en/blog/assetmanager/index.md b/src/site/content/en/blog/assetmanager/index.md
new file mode 100644
index 00000000000..00f5ced798b
--- /dev/null
+++ b/src/site/content/en/blog/assetmanager/index.md
@@ -0,0 +1,290 @@
+---
+layout: post
+title: Simple asset management for HTML5 games
+authors:
+  - sethladd
+date: 2011-07-02
+tags:
+  - blog
+---
+
+## Introduction
+
+HTML5 has provided many useful APIs for building modern, responsive, and powerful web applications in the browser. This is great, but you really want to build and play games!  Luckily, HTML5 has also ushered in a new era of game development that uses APIs like Canvas and powerful JavaScript engines to deliver gaming straight to your browser without the need for plugins.
+
+This article will walk you through building a simple Asset Management component for your HTML5 game. Without an asset manager, your game will have a hard time compensating for unknown download times and asynchronous image loading. Follow along to see an example of a simple asset manager for your HTML5 games.
+
+## The Problem
+
+HTML5 games can’t assume their assets such as images or audio will be on the player’s local machine, as HTML5 games imply being played in a web browser with assets downloaded over HTTP. Because the network is involved, the browser isn’t sure when the assets for the game will be downloaded and available.
+
+The basic way to programmatically load an image in a web browser is the following code:
+
+
+```js
+var image = new Image();
+image.addEventListener("success", function(e) {
+  // do stuff with the image
+});
+image.src = "/some/image.png";
+```
+
+Now imagine having a hundred images that need to be loaded and displayed when the game starts up. How do you know when all 100 images are ready?  Did they all successfully load?  When should the game actually start?
+
+## The Solution
+
+Let an asset manager handle the queuing of assets and report back to the game when everything is ready. An asset manager generalizes the logic for loading assets over the network, and it provides an easy way to check on the status.
+
+Our simple asset manager has the following requirements:
+
+- queue up downloads
+- start downloads
+- track success and failure
+- signal when everything is done
+- easy retrieval of assets
+
+## Queuing
+
+The first requirement is to queue up downloads. This design lets you declare the assets you need without actually downloading them. This can be useful if, for example, you want to declare all assets for a game level in a configuration file.
+
+The code for the constructor and queuing looks like:
+
+```js
+function AssetManager() {
+  this.downloadQueue = [];
+}
+
+AssetManager.prototype.queueDownload = function(path) {
+    this.downloadQueue.push(path);
+}
+```
+
+## Start Downloads
+
+After you have queued up all the assets to be downloaded, you can ask the asset manager to start downloading everything.
+
+The web browser can parallelize the downloads, luckily—usually up to 4 connections per host. One way to speed up asset downloading is to use a range of domain names for asset hosting. For example, instead of serving everything from assets.example.com, try using assets1.example.com, assets2.example.com, assets3.example.com, and so on. Even if each of those domain names is simply a CNAME to the same web server, the web browser sees them as separate servers and increases the number of connections used for asset downloading. Learn more about this technique from [Split Components Across Domains](http://developer.yahoo.com/performance/rules.html#split) at Best Practices for Speeding Up Your Web Site.
+
+Our method for download initialization is called `downloadAll()`. We’ll build it up over time. For now, here is the first logic to just start the downloads.
+
+```js
+AssetManager.prototype.downloadAll = function() {
+    for (var i = 0; i &lt; this.downloadQueue.length; i++) {
+        var path = this.downloadQueue[i];
+        var img = new Image();
+        var that = this;
+        img.addEventListener("load", function() {
+            // coming soon
+        }, false);
+        img.src = path;
+    }
+}
+```
+
+As you can see in the code above, `downloadAll()` simply iterates through the downloadQueue and creates a new Image object. An event listener for the load event is added and the src of the image is set, which triggers the actual download.
+
+With this method you can start the downloads.
+
+## Tracking Success and Failure
+
+Another requirement is to track both success and failures, because unfortunately not everything always works out perfectly. The code so far only tracks successfully downloaded assets. By adding an event listener for the error event, you will be able to capture both success and failure scenarios.
+
+```js
+AssetManager.prototype.downloadAll = function(downloadCallback) {
+  for (var i = 0; i &lt; this.downloadQueue.length; i++) {
+    var path = this.downloadQueue[i];
+    var img = new Image();
+    var that = this;
+    img.addEventListener("load", function() {
+        // coming soon
+    }, false);
+    img.addEventListener("error", function() {
+        // coming soon
+    }, false);
+    img.src = path;
+  }
+}
+```
+
+Our asset manager needs to know how many successes and failures we’ve encountered, or it will never know when the game can start.
+
+First up, we’ll add the counters to the object in the constructor, which now looks like this:
+
+```js
+function AssetManager() {
+<span class="highlight">    this.successCount = 0;
+    this.errorCount = 0;</span>
+    this.downloadQueue = [];
+}
+```
+
+Next, increment the counters in the event listeners, which now look like this:
+
+```js
+img.addEventListener("load", function() {
+    <span class="highlight">that.successCount += 1;</span>
+}, false);
+img.addEventListener("error", function() {
+    <span class="highlight">that.errorCount += 1;</span>
+}, false);
+```
+
+The asset manager is now tracking both successfully loaded and failed assets.
+
+## Signaling When Done
+
+After the game has queued up its assets for download, and asked the asset manager to download all the assets, the game needs to be told when all the assets are downloaded. Instead of the game asking over and over and over if the assets are downloaded, the asset manager can signal back to the game.
+
+The asset manager needs to first know when every asset is finished. We will add an isDone method now:
+
+```js
+AssetManager.prototype.isDone = function() {
+    return (this.downloadQueue.length == this.successCount + this.errorCount);
+}
+```
+
+By comparing the successCount + errorCount to the size of the downloadQueue, the asset manager knows if every asset either finished successfully or had some sort of error.
+
+Of course knowing if it’s done is only half the battle; the asset manager also needs to check this method. We will add this check inside both of our event handlers, as the code below shows:
+
+```js
+img.addEventListener("load", function() {
+    console.log(this.src + ' is loaded');
+    that.successCount += 1;
+    if (that.isDone()) {
+        // ???
+    }
+}, false);
+img.addEventListener("error", function() {
+    that.errorCount += 1;
+if (that.isDone()) {
+        // ???
+    }
+}, false);
+```
+
+After the counters are incremented, we will see if that was the last asset in our queue. If the asset manager is indeed done downloading, what should we do, exactly?
+
+If the asset manager is done downloading all the assets, we will call a callback method, of course!  Let’s change `downloadAll()` and add a parameter for the callback:
+
+```js
+AssetManager.prototype.downloadAll = function(downloadCallback) {
+    ...
+```
+
+We will call the downloadCallback method inside of our event listeners:
+
+```js
+img.addEventListener("load", function() {
+    that.successCount += 1;
+    if (that.isDone()) {
+        downloadCallback();
+    }
+}, false);
+img.addEventListener("error", function() {
+    that.errorCount += 1;
+    if (that.isDone()) {
+        downloadCallback();
+    }
+}, false);
+```
+
+The asset manager is finally ready for the last requirement.
+
+## Easy Retrieval of Assets
+
+Once the game has been signaled that it can start, the game will begin to render images. The asset manager is not only responsible for downloading and tracking the assets, but also for providing them to the game.
+
+Our final requirement implies some sort of getAsset method, so we’ll add it now:
+
+```js
+AssetManager.prototype.getAsset = function(path) {
+    return this.cache[path];
+}
+```
+
+This cache object is initialized in the constructor, which now looks like this:
+
+```js
+function AssetManager() {
+    this.successCount = 0;
+    this.errorCount = 0;
+    this.cache = {};
+    this.downloadQueue = [];
+}
+```
+
+The cache is populated at the end of `downloadAll()`, as shown below:
+
+
+```js
+AssetManager.prototype.downloadAll = function(downloadCallback) {
+  ...
+      img.addEventListener("error", function() {
+          that.errorCount += 1;
+          if (that.isDone()) {
+              downloadCallback();
+          }
+      }, false);
+      img.src = path;
+      <span class="highlight">this.cache[path] = img;</span>
+  }
+}
+```
+
+## Bonus: Bug Fix
+
+Did you spot the bug?  As written above, the isDone method is only called when either load or error events are triggered. But what if the asset manager doesn’t have any assets queued up for download?  The isDone method is never triggered, and the game never starts.
+
+You can accommodate this scenario by adding the following code to <code>downloadAll()</code>:
+
+```js
+AssetManager.prototype.downloadAll = function(downloadCallback) {
+    if (this.downloadQueue.length === 0) {
+      downloadCallback();
+  }
+ ...
+```
+
+If no assets are queued, the callback is called immediately. Bug fixed!
+
+## Example Usage
+
+Using this asset manager in your HTML5 game is quite straightforward. Here is the most basic way to use the library:
+
+```js 
+var ASSET_MANAGER = new AssetManager();
+
+ASSET_MANAGER.queueDownload('img/earth.png');
+
+ASSET_MANAGER.downloadAll(function() {
+    var sprite = ASSET_MANAGER.getAsset('img/earth.png');
+    ctx.drawImage(sprite, x - sprite.width/2, y - sprite.height/2);
+});
+```
+
+The above code illustrates:
+
+1. Creates a new asset manager
+1. Queue up assets to be downloaded
+1. Start the downloads with `downloadAll()`
+1. Signal when the assets are ready by invoking the callback function
+1. Retrieve assets with `getAsset()`
+
+## Areas for Improvement
+
+You will no doubt outgrow this simple asset manager as you build out your game, although I hope it provided a basic start. Future features could include:
+
+- signaling which asset had an error
+- callbacks to indicate progress
+- retrieving assets from the File System API
+
+Please post improvements, forks, and links to code in the comments below.
+
+## Full Source
+
+The source for this asset manager, and the game it’s abstracted from, is open source under the Apache License and can be found in the  [Bad Aliens GitHub account](https://github.com/sethladd/Bad-Aliens). The [Bad Aliens game](http://bad-aliens.appspot.com/) can be played in your HTML5 compatible browser. This game was the subject for my Google IO talk titled Super Browser 2 Turbo HD Remix: Introduction to HTML5 Game Development ([slides](http://io-2011-html5-games-hr.appspot.com), [video](https://www.youtube.com/watch?v=yEocRtn_j9s)).
+
+## Summary
+
+Most games have some sort of asset manager, but HTML5 games require an asset manager that loads assets over a network and handles failures. This article outlined a simple asset manager that should be easy for you to use and adapt for your next HTML5 game. Have fun, and please let us know what you think in the comments below. Thanks!
diff --git a/src/site/content/en/blog/asymmetric-animation-timing/index.md b/src/site/content/en/blog/asymmetric-animation-timing/index.md
new file mode 100644
index 00000000000..493772ea5c2
--- /dev/null
+++ b/src/site/content/en/blog/asymmetric-animation-timing/index.md
@@ -0,0 +1,29 @@
+---
+layout: post
+title: Asymmetric animation timing
+subhead: Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
+authors:
+  - paullewis
+date: 2014-08-08
+updated: 2018-09-20
+description: Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+Asymmetric animation timing improves the user experience by allowing you to express personality while at the same time respond quickly to user interactions. It also provides contrast to the feel, which makes the interface more visually appealing.
+
+* Use asymmetric animation timing to add personality and contrast to your work.
+* Always favor the user's interaction; use shorter durations when responding to taps or clicks, and reserve longer durations for times when you aren't.
+
+
+Like most "rules" of animation, you should experiment to find out what works for your application, but when it comes to the user experience, users are notoriously impatient. The rule of thumb is to **always respond to a user interaction quickly**. That said, most of the time the user's action is asymmetric, and therefore the animation can be, too.
+
+For example, when a user taps to display a sidebar navigation, you should display it as quickly as possible, with a duration of around 100ms. When the user dismisses the menu, however, you can afford to animate the view out a little more slowly, say, around the 300ms mark.
+
+By contrast, when you bring on a modal view, this is normally to display an error or some other critical message. In such cases, you will want to bring on the view a little more slowly, again around the 300ms mark, but dismissal, which the user triggers, should happen very quickly.
+
+The general rule of thumb, then, is the following:
+
+* For UI animations triggered by a user’s interaction, such as view transitions or showing an element, have a fast intro (short duration), but a slow outro (longer duration).
+* For UI animations triggered by your code, such as errors or modal views, have a slower intro (longer duration), but a fast outro (short duration).
diff --git a/src/site/content/en/blog/async-clipboard/index.md b/src/site/content/en/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..78d30a6d658
--- /dev/null
+++ b/src/site/content/en/blog/async-clipboard/index.md
@@ -0,0 +1,492 @@
+---
+title: Unblocking clipboard access
+subhead: Safer, unblocked clipboard access for text and images
+authors:
+  - developit
+  - thomassteiner
+description: Async Clipboard API simplifies permissions-friendly copy and paste.
+date: 2020-07-31
+updated: 2023-03-27
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: Clipboard with shopping list
+feedback:
+  - api
+---
+
+The traditional way of getting access to the system clipboard was via
+[`document.execCommand()`](https://developer.chrome.com/blog/cut-and-copy-commands/)
+for clipboard interactions. Though widely supported, this method of cutting and
+pasting came at a cost: clipboard access was synchronous, and could only read
+and write to the DOM.
+
+That's fine for small bits of text, but there are many cases where blocking the
+page for clipboard transfer is a poor experience. Time consuming sanitization or
+image decoding might be needed before content can be safely pasted. The browser
+may need to load or inline linked resources from a pasted document. That would
+block the page while waiting on the disk or network. Imagine adding permissions
+into the mix, requiring that the browser block the page while requesting
+clipboard access. At the same time, the permissions put in place around
+`document.execCommand()` for clipboard interaction are loosely defined and vary
+between browsers.
+
+The
+[Async Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+addresses these issues, providing a well-defined permissions model that doesn't
+block the page. The Async Clipboard API is limited to handling text and images
+on most browsers, but support varies. Be sure to carefully study the browser
+compatibility overview for each of the following sections.
+
+{% Aside 'important' %}
+Chrome as of version 104 supports
+[web custom formats](https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api/)
+that let developers write arbitrary data to the clipboard.
+{% endAside %}
+
+## Copy: writing data to the clipboard
+
+### writeText()
+
+To copy text to the clipboard call `writeText()`. Since this API is
+asynchronous, the `writeText()` function returns a Promise that resolves or
+rejects depending on whether the passed text is copied successfully:
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+{% BrowserCompat 'api.Clipboard.writeText' %}
+
+### write()
+
+Actually, `writeText()` is just a convenience method for the generic `write()`
+method, which also lets you copy images to the clipboard. Like `writeText()`, it
+is asynchronous and returns a Promise.
+
+To write an image to the clipboard, you need the image as a
+[`blob`](https://developer.mozilla.org/docs/Web/API/blob). One way to do
+this is by requesting the image from a server using `fetch()`, then calling
+[`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob) on the
+response.
+
+Requesting an image from the server may not be desirable or possible for a
+variety of reasons. Fortunately, you can also draw the image to a canvas and
+call the canvas'
+[`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)
+method.
+
+Next, pass an array of `ClipboardItem` objects as a parameter to the `write()`
+method. Currently you can only pass one image at a time, but we hope to add
+support for multiple images in the future. `ClipboardItem` takes an object with
+the MIME type of the image as the key and the blob as the value. For blob
+objects obtained from `fetch()` or `canvas.toBlob()`, the `blob.type` property
+automatically contains the correct MIME type for an image.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      // The key is determined dynamically based on the blob's type.
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+Alternatively, you can write a promise to the `ClipboardItem` object.
+For this pattern, you need to know the MIME type of the data beforehand.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      // Set the key beforehand and write a promise as the value.
+      'image/png': fetch(imgURL).then(response => response.blob()),
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %}
+  Safari (WebKit) treats user activation differently than Chromium (Blink)
+  (see [WebKit bug #222262](https://bugs.webkit.org/show_bug.cgi?id=222262)).
+  For Safari, run all asynchronous operations in a promise
+  whose result you assign to the `ClipboardItem`:
+
+  ```js
+  new ClipboardItem({
+    'foo/bar': new Promise(async (resolve) => {
+        // Prepare `blobValue` of type `foo/bar`
+        resolve(new Blob([blobValue], { type: 'foo/bar' }));
+      }),
+    })
+  ```
+{% endAside %}
+
+{% BrowserCompat 'api.Clipboard.write' %}
+
+### The copy event
+
+In the case where a user initiates a clipboard copy
+and does _not_ call `preventDefault()`, the
+[`copy` event](https://developer.mozilla.org/docs/Web/API/Document/copy_event)
+includes a `clipboardData` property with the items already in the right format.
+If you want to implement your own logic, you need to call `preventDefault()` to
+prevent the default behavior in favor of your own implementation.
+In this case, `clipboardData` will be empty.
+Consider a page with text and an image, and when the user selects all and
+initiates a clipboard copy, your custom solution should discard text and only
+copy the image. You can achieve this as shown in the code sample below.
+What's not covered in this example is how to fall back to earlier
+APIs when the Clipboard API isn't supported.
+
+```html
+<!-- The image we want on the clipboard. -->
+<img src="kitten.webp" alt="Cute kitten.">
+<!-- Some text we're not interested in. -->
+<p>Lorem ipsum</p>
+```
+
+```js
+document.addEventListener("copy", async (e) => {
+  // Prevent the default behavior.
+  e.preventDefault();
+  try {
+    // Prepare an array for the clipboard items.
+    let clipboardItems = [];
+    // Assume `blob` is the blob representation of `kitten.webp`.
+    clipboardItems.push(
+      new ClipboardItem({
+        [blob.type]: blob,
+      })
+    );
+    await navigator.clipboard.write(clipboardItems);
+    console.log("Image copied, text ignored.");
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+```
+
+For the `copy` event:
+
+{% BrowserCompat 'api.Element.copy_event' %}
+
+For `ClipboardItem`:
+
+{% BrowserCompat 'api.ClipboardItem' %}
+
+## Paste: reading data from clipboard
+
+### readText()
+
+To read text from the clipboard, call `navigator.clipboard.readText()` and wait
+for the returned promise to resolve:
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+{% BrowserCompat 'api.Clipboard.readText' %}
+
+### read()
+
+The `navigator.clipboard.read()` method is also asynchronous and returns a
+promise. To read an image from the clipboard, obtain a list of
+[`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem)
+objects, then iterate over them.
+
+Each `ClipboardItem` can hold its contents in different types, so you'll need to
+iterate over the list of types, again using a `for...of` loop. For each type,
+call the `getType()` method with the current type as an argument to obtain the
+corresponding blob. As before, this code is not tied to images, and will
+work with other future file types.
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+{% BrowserCompat 'api.Clipboard.read' %}
+
+### Working with pasted files
+
+It is useful for users to be able to use clipboard keyboard shortcuts such as
+<kbd>ctrl</kbd>+<kbd>c</kbd> and <kbd>ctrl</kbd>+<kbd>v</kbd>.
+Chromium exposes _read-only_ files on the clipboard as outlined below.
+This triggers when the user hits the operating system's default paste shortcut
+or when the user clicks **Edit** then **Paste** in the browser's menu bar.
+No further plumbing code is needed.
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Read the file's contents, assuming it's a text file.
+  // There is no way to write back to it.
+  console.log(await file.text());
+});
+```
+
+{% BrowserCompat 'api.DataTransfer.files' %}
+
+### The paste event
+
+As noted before, there are plans to introduce events to work with the Clipboard API,
+but for now you can use the existing `paste` event. It works nicely with the new
+asynchronous methods for reading clipboard text. As with the `copy` event, don't
+forget to call `preventDefault()`.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+{% BrowserCompat 'api.Element.copy_event' %}
+
+## Handling multiple MIME types
+
+Most implementations put multiple data formats on the clipboard for a single cut
+or copy operation. There are two reasons for this: as an app developer, you have
+no way of knowing the capabilities of the app that a user wants to copy text or images to,
+and many applications support pasting structured data as plain text. This is typically
+presented to users with an **Edit** menu item with a name such as **Paste and
+match style** or **Paste without formatting**.
+
+The following example shows how to do this. This example uses `fetch()` to obtain
+image data, but it could also come from a
+[`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas)
+or the [File System Access API](/file-system-access/).
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png').then(response => response.blob());
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## Security and permissions
+
+Clipboard access has always presented a security concern for browsers. Without
+proper permissions, a page could silently copy all manner of malicious content
+to a user's clipboard that would produce catastrophic results when pasted.
+Imagine a web page that silently copies `rm -rf /` or a
+[decompression bomb image](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html)
+to your clipboard.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="Browser prompt asking the user for the clipboard permission.", width="800", height="338" %}
+  <figcaption>
+    The permission prompt for the Clipboard API.
+  </figcaption>
+</figure>
+
+Giving web pages unfettered read access to the clipboard is even more
+troublesome. Users routinely copy sensitive information like passwords and
+personal details to the clipboard, which could then be read by any page without
+the user's knowledge.
+
+As with many new APIs, the Clipboard API is only supported for pages served over
+HTTPS. To help prevent abuse, clipboard access is only allowed when a page is
+the active tab. Pages in active tabs can write to the clipboard without
+requesting permission, but reading from the clipboard always requires
+permission.
+
+Permissions for copy and paste have been added to the
+[Permissions API](https://developer.chrome.com/blog/permissions-api-for-the-web/).
+The `clipboard-write` permission is granted automatically to pages when they are
+the active tab. The `clipboard-read` permission must be requested, which you can
+do by trying to read data from the clipboard. The code below shows the latter:
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Will be 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Listen for changes to the permission state
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+You can also control whether a user gesture is required to invoke cutting or
+pasting using the `allowWithoutGesture` option. The default for this value
+varies by browser, so you should always include it.
+
+Here's where the asynchronous nature of the Clipboard API really comes in handy:
+attempting to read or write clipboard data automatically prompts the user for
+permission if it hasn't already been granted. Since the API is promise-based,
+this is completely transparent, and a user denying clipboard permission causes
+the promise to reject so the page can respond appropriately.
+
+Because browsers only allow clipboard access when a page is the active tab,
+you'll find that some of the examples here don't run if pasted directly into
+the browser's console, since the developer tools themselves are the active tab. There's a trick: defer
+clipboard access using `setTimeout()`, then quickly click inside the page to
+focus it before the functions are called:
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## Permissions policy integration
+
+To use the API in iframes, you need to enable it with
+[Permissions Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/),
+which defines a mechanism that allows for selectively enabling and
+disabling various browser features and APIs. Concretely, you need to pass either
+or both of `clipboard-read` or `clipboard-write`, depending on the needs of your app.
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+{% Aside 'caution' %}
+The values of the `allow` attribute need to be separated by semicolon.
+{% endAside %}
+
+## Feature detection
+
+To use the Async Clipboard API while supporting all browsers, test for
+`navigator.clipboard` and fall back to earlier methods. For example, here's how
+you might implement pasting to include other browsers.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+That's not the whole story. Before the Async Clipboard API, there were a mix of
+different copy and paste implementations across web browsers. In most browsers,
+the browser's own copy and paste can be triggered using
+`document.execCommand('copy')` and `document.execCommand('paste')`. If the text
+to be copied is a string not present in the DOM, it must be injected into the
+DOM and selected:
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  input.style.display = 'none';
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+  input.remove();
+});
+```
+
+## Demos
+
+You can play with the Async Clipboard API in the demos below. On Glitch you
+can remix [the text demo](https://glitch.com/edit/#!/async-clipboard-text)
+or [the image demo](https://glitch.com/edit/#!/async-clipboard-api) to
+experiment with them.
+
+The first example demonstrates moving text on and off the clipboard.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">
+  <iframe
+    src="https://async-clipboard-text.glitch.me/"
+    title="async-clipboard-text on Glitch"
+    allow="clipboard-read; clipboard-write"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+To try the API with images, use this demo. Recall that only PNGs are supported
+and only in
+[a few browsers](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility).
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">
+  <iframe
+    src="https://async-clipboard-api.glitch.me/"
+    title="async-clipboard-api on Glitch"
+    allow="clipboard-read; clipboard-write"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+## Related links
+
+* [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+* [Web custom formats](https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api/)
+
+## Acknowledgements
+
+The Asynchronous Clipboard API was implemented by [Darwin
+Huang](https://www.linkedin.com/in/darwinhuang/) and [Gary
+Kačmarčík](https://www.linkedin.com/in/garykac/). Darwin also provided the demo.
+Thanks to [Kyarik](https://github.com/kyarik) and again Gary Kačmarčík for
+reviewing parts of this article.
+
+Hero image by [Markus Winkler](https://unsplash.com/@markuswinkler) on
+[Unsplash](https://unsplash.com/photos/7iSEHWsxPLw).
diff --git a/src/site/content/en/blog/async-deferred/index.md b/src/site/content/en/blog/async-deferred/index.md
new file mode 100644
index 00000000000..0140ff14d58
--- /dev/null
+++ b/src/site/content/en/blog/async-deferred/index.md
@@ -0,0 +1,318 @@
+---
+layout: post
+title: Asynch JS - The power of $.Deferred
+authors:
+  - jeremychone
+date: 2012-08-29
+tags:
+  - blog
+---
+
+One of the most important aspects about building smooth and responsive HTML5 applications is the synchronization
+between all the different parts of the application such as data fetching, processing, animations, and user
+interface elements.
+
+The main difference with a desktop or a native environment is that browsers do not give access to the threading model
+and provide a single thread for everything accessing the user interface (i.e. the DOM). This means that all the
+application logic accessing and modifying the user interface elements is always in the same thread, hence the
+importance of keeping all the application work units as small and efficient as possible and taking advantage of any
+asynchronous capabilities the browser offers as much as possible.
+
+## Browser Asynchronous APIs
+
+Luckily, Browsers provide a number of asynchronous APIs such as the commonly used XHR (XMLHttpRequest or 'AJAX') APIs, as well
+as IndexedDB, SQLite, HTML5 Web workers, and the HTML5 GeoLocation APIs to name a few. Even some DOM related actions are
+exposed asynchronously, such CSS3 animation via the transitionEnd events.     
+
+The way browsers expose asynchronous programming to the application logic is via events or callbacks.     
+In event-based asynchronous APIs, developers register an event handler for a given object 
+(e.g. HTML Element or other DOM objects) and then call the action. The browser will perform 
+the action usually in a different thread, and trigger the event in the main thread when appropriate.     
+
+For example, code using the XHR API, an event based asynchronous API, would look like this:
+
+```js
+// Create the XHR object to do GET to /data resource  
+var xhr = new XMLHttpRequest();
+xhr.open("GET","data",true);
+
+// register the event handler
+xhr.addEventListener('load',function(){
+if(xhr.status === 200){
+alert("We got data: " + xhr.response);
+}
+},false)
+
+// perform the work
+xhr.send();
+```
+
+The CSS3 transitionEnd event is another example of a event based asynchronous API.
+
+```js
+// get the html element with id 'flyingCar'  
+var flyingCarElem = document.getElementById("flyingCar");
+
+// register an event handler 
+// ('transitionEnd' for FireFox, 'webkitTransitionEnd' for webkit) 
+flyingCarElem.addEventListener("transitionEnd",function(){
+// will be called when the transition has finished.
+alert("The car arrived");
+});
+
+// add the CSS3 class that will trigger the animation
+// Note: some browers delegate some transitions to the GPU , but 
+//       developer does not and should not have to care about it.
+flyingCarElemen.classList.add('makeItFly') 
+```
+
+Other browser APIs, such as SQLite and HTML5 Geolocation, are callback based, meaning
+that the developer passes a function as argument that will get called back by the
+underlying implementation with the corresponding resolution.
+
+For example, for HTML5 Geolocation, the code looks like this:
+
+```js
+// call and pass the function to callback when done.
+navigator.geolocation.getCurrentPosition(function(position){  
+        alert('Lat: ' + position.coords.latitude + ' ' +  
+                'Lon: ' + position.coords.longitude);  
+});  
+```
+
+In this case, we just call a method and pass a function that will get called back with the
+requested result. This allows the browser to implement
+this functionality synchronously or asynchronously and give a single API to the developer regardless
+of the implementation details.
+
+## Making Applications Asynchronous-Ready
+
+Beyond the browser’s built-in asynchronous APIs, well architected applications should
+expose their low level APIs in an asynchronous fashion as well, especially when they do any
+sort of I/O or computational heavy processing. For example, APIs to get data should
+be asynchronous, and should NOT look like this:    
+
+```js
+// WRONG: this will make the UI freeze when getting the data  
+var data = getData();
+alert("We got data: " + data);
+```
+
+This API design requires the **getData()** to be blocking, which will freeze the user
+interface until the data is fetched. If the data is local in the JavaScript context
+then this might not be an issue, however if the data needs to be fetched from the
+network or even locally in a SQLite or index store this could have dramatic impact on
+the user experience.
+
+The right design is to proactively make all application API that could take some time
+to process, asynchronous from the beginning as retrofitting synchronous application code
+to be asynchronous can be a daunting task.
+
+For example the simplistic getData() API would become something like:
+
+```js
+getData(function(data){
+alert("We got data: " + data);
+});
+```
+
+The nice thing about this approach is that this forces the application UI code to be
+asynchronous-centric from the beginning and allows the underlying APIs to decide if
+they need to be asynchronous or not in a later stage.
+
+Note that not all the application API need or should be asynchronous. The rule of
+thumb is that any API that does any type of I/O or heavy processing (anything that
+can take longer than 15ms) should be exposed asynchronously from the start even if
+the first implementation is synchronous.
+
+## Handling Failures
+
+One catch of asynchronous programing is that the traditional try/catch way to handle
+failures does not really work anymore, as errors usually happen in another thread.
+Consequently, the callee needs to have a structured way to notify the caller when
+something goes wrong during the processing.     
+
+In an event-based asynchronous API this is often accomplished by the application code
+querying the event or object when receiving the event. For callback based
+asynchronous APIs, the best practice is to have a second argument that takes a
+function that would be called in case of a failure with the appropriate error
+information as argument.     
+
+Our getData call would look like this:
+
+```js
+// getData(successFunc,failFunc);  
+getData(function(data){
+alert("We got data: " + data);
+}, function(ex){
+alert("oops, some problem occured: " + ex);
+});
+```
+
+## Putting it together with $.Deferred
+
+One limitation of the above callback approach is that it can become really cumbersome
+to write even moderately advanced synchronization logic.     
+
+For example, if you need to wait for two asynchronous API to be done before doing a
+third one, code complexity can rise quickly.
+
+```js
+// first do the get data.   
+getData(function(data){
+// then get the location
+getLocation(function(location){
+alert("we got data: " + data + " and location: " + location);
+},function(ex){
+alert("getLocation failed: "  + ex);
+});
+},function(ex){
+alert("getData failed: " + ex);
+});
+```
+
+Things can even get more complex when the application needs to make the same call
+from multiple parts of the application, as every call will have to perform these multi
+step calls, or the application will have to implement its own caching mechanism.
+
+Luckily, there is a relatively old pattern, called Promises (kind of similar to
+[Future](http://docs.oracle.com/javase/1.5.0/docs/api/java/util/concurrent/Future.html) in Java) and a robust and modern implementation
+in jQuery core called [$.Deferred](http://api.jquery.com/category/deferred-object/) that provides a simple and powerful solution to asynchronous programing.
+
+To make it simple, the Promises pattern defines that the asynchronous API returns a
+Promise object which is kind of a “Promise that the result will be resolved with the
+corresponding data.” To get the resolution, the caller gets the Promise object and
+calls a __done(successFunc(data))__ which will tell the Promise object to call this
+__successFunc__ when the “data” is resolved.
+
+So, the getData call example above becomes like this:
+
+```js
+// get the promise object for this API  
+var dataPromise = getData();
+
+// register a function to get called when the data is resolved
+dataPromise.done(function(data){
+alert("We got data: " + data);
+});
+
+// register the failure function
+dataPromise.fail(function(ex){
+alert("oops, some problem occured: " + ex);
+});
+
+// Note: we can have as many dataPromise.done(...) as we want. 
+dataPromise.done(function(data){
+alert("We asked it twice, we get it twice: " + data);
+});
+```
+
+Here, we get the __dataPromise__ object first and then call the __.done__ method to register
+a function we want to get called back when the data gets resolved. We can also call
+the __.fail__ method to handle the eventual failure.  Note that we can have as many __.done__
+or __.fail__ calls as we need since the underlying Promise implementation (jQuery code) will
+handle the registration and callbacks.
+
+With this pattern, it is relatively easy to implement more advanced synchronization
+code, and jQuery already provides the most common one such a [$.when](http://api.jquery.com/jQuery.when/).
+
+For example, the nested __getData__/__getLocation__ callback above would become something like:
+
+```js
+// assuming both getData and getLocation return their respective Promise
+var combinedPromise = $.when(getData(), getLocation())
+
+// function will be called when both getData and getLocation resolve
+combinePromise.done(function(data,location){
+alert("We got data: " + dataResult + " and location: " + location);
+});  
+```
+
+And the beauty of it all is that jQuery.Deferred makes it very easy for developers to
+implement the asynchronous function. For example, the getData could look something like this:
+
+```js
+function getData(){
+// 1) create the jQuery Deferred object that will be used
+var deferred = $.Deferred();
+
+// ---- AJAX Call ---- //
+XMLHttpRequest xhr = new XMLHttpRequest();
+xhr.open("GET","data",true);
+
+// register the event handler
+xhr.addEventListener('load',function(){
+if(xhr.status === 200){
+    // 3.1) RESOLVE the DEFERRED (this will trigger all the done()...)
+    deferred.resolve(xhr.response);
+}else{
+    // 3.2) REJECT the DEFERRED (this will trigger all the fail()...)
+    deferred.reject("HTTP error: " + xhr.status);
+}
+},false) 
+
+// perform the work
+xhr.send();
+// Note: could and should have used jQuery.ajax. 
+// Note: jQuery.ajax return Promise, but it is always a good idea to wrap it
+//       with application semantic in another Deferred/Promise  
+// ---- /AJAX Call ---- //
+
+// 2) return the promise of this deferred
+return deferred.promise();
+}
+```
+
+So, when the getData() is called, it first creates a new jQuery.Deferred object (1)
+and then returns its Promise (2) so that the caller can register its done and fail
+functions. Then, when the XHR call returns, it either resolves the deferred (3.1) or
+reject it (3.2). Doing the deferred.resolve will trigger all the done(…) functions
+and other promise functions (e.g., then and pipe) and calling deferred.reject will
+call all the fail() functions.
+
+## Use Cases
+
+Here are some good use cases where Deferred can be very useful:
+
+**Data Access:** Exposing data access APIs as $.Deferred is often the right design.
+This is obvious for remote data, as synchronous remote calls would completely ruin the
+user experience, but is also true for local data as often the lower level APIs (e.g.,
+SQLite and IndexedDB) are asynchronous themselves. The Deferred API''s $.when and .pipe
+are extremely powerful to synchronize and chain asynchronous sub-queries.
+
+**UI Animations:** Orchestrating one or more animations with transitionEnd events
+can be quite tedious, especially when the animations are a mixed of CSS3 animation
+and JavaScript (as it is often the case). Wrapping the animation functions as Deferred
+can significantly reduce the code complexity and improve flexibility. Even a simple
+generic wrapper function like cssAnimation(className) that will return the Promise
+object that gets resolved on transitionEnd could be of a great help.
+
+**UI Component Display:** This is a little bit more advanced, but advanced HTML
+Component frameworks should use the Deferred as well. Without going too much into
+the details (this will be the subject of another post), when an application needs to
+display different parts of the user interface, having the lifecycle of those
+components encapsulated in Deferred allows greater control of the timing.
+
+**Any browser asynchronous API:** For normalization purpose, it is often a good
+idea to wrap the browser API calls as Deferred. This takes literally 4 to 5 lines
+of code each, but will greatly simplify any application code. As show in the above
+getData/getLocation pseudo code, this allows the applications code to have one
+asynchronous model across all types of API (browsers, application specifics, and
+compound).
+
+**Caching:** This is kind of a side benefit, but can be very useful in some
+occasion. Because the Promise APIs (e.g., .done(…) and .fail(…)) can be called
+before or after the asynchronous call is performed, the Deferred object can be
+used as a caching handle for an asynchronous call. For example, a CacheManager
+could just keep track of Deferred for given requests, and return the Promise of
+the matching Deferred if it has not be invalidated. The beauty is that the caller
+does not have to know if the call has already been resolved or is in the process
+of being resolved, its callback function will get called exactly the same way.
+
+## Conclusion
+
+While the $.Deferred concept is simple, it can take time to get a good handle on it.
+However, given the nature of the browser environment, mastering asynchronous
+programing in JavaScript is a must for any serious HTML5 application developer and
+the Promise pattern (and the jQuery implementation) are tremendous tools 
+to make asynchronous programming reliable and powerful.
\ No newline at end of file
diff --git a/src/site/content/en/blog/async-functions/index.md b/src/site/content/en/blog/async-functions/index.md
new file mode 100644
index 00000000000..326bf40ad08
--- /dev/null
+++ b/src/site/content/en/blog/async-functions/index.md
@@ -0,0 +1,435 @@
+---
+title: 'Async functions: making promises friendly'
+subhead: >
+  Async functions allow you to write promise-based code as if it were synchronous.
+description: >
+  Async functions allow you to write promise-based code as if it were synchronous.
+date: 2016-10-20
+updated: 2021-02-22
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+Async functions are enabled by default in Chrome, Edge, Firefox, and Safari, and
+they're quite frankly marvelous. They allow you to write promise-based code as
+if it were synchronous, but without blocking the main thread. They make your
+asynchronous code less "clever" and more readable.
+
+Async functions work like this:
+
+```js
+async function myFirstAsyncFunction() {
+  try {
+    const fulfilledValue = await promise;
+  } catch (rejectedValue) {
+    // …
+  }
+}
+```
+
+If you use the `async` keyword before a function definition, you can then use
+`await` within the function. When you `await` a promise, the function is paused
+in a non-blocking way until the promise settles. If the promise fulfills, you
+get the value back. If the promise rejects, the rejected value is thrown.
+
+{% Aside %}
+If you're unfamiliar with promises, check out [our
+promises guide](/promises).
+{% endAside %}
+
+## Browser support
+
+{% BrowserCompat 'javascript.statements.async_function' %}
+
+## Example: logging a fetch
+
+Say you want to fetch a URL and log the response as text. Here's how it looks
+using promises:
+
+```js
+function logFetch(url) {
+  return fetch(url)
+    .then((response) => response.text())
+    .then((text) => {
+      console.log(text);
+    })
+    .catch((err) => {
+      console.error('fetch failed', err);
+    });
+}
+```
+
+And here's the same thing using async functions:
+
+```js
+async function logFetch(url) {
+  try {
+    const response = await fetch(url);
+    console.log(await response.text());
+  } catch (err) {
+    console.log('fetch failed', err);
+  }
+}
+```
+
+It's the same number of lines, but all the callbacks are gone. This makes it way
+easier to read, especially for those less familiar with promises.
+
+{% Aside %}
+Anything you `await` is passed through `Promise.resolve()`, so you can
+safely `await` non-platform promises, such as those created by promise polyfills.
+{% endAside %}
+
+## Async return values
+
+Async functions _always_ return a promise, whether you use `await` or not. That
+promise resolves with whatever the async function returns, or rejects with
+whatever the async function throws. So with:
+
+```js
+// wait ms milliseconds
+function wait(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+async function hello() {
+  await wait(500);
+  return 'world';
+}
+```
+
+…calling `hello()` returns a promise that _fulfills_ with `"world"`.
+
+```js
+async function foo() {
+  await wait(500);
+  throw Error('bar');
+}
+```
+
+…calling `foo()` returns a promise that _rejects_ with `Error('bar')`.
+
+## Example: streaming a response
+
+The benefit of async functions increases in more complex examples. Say you wanted
+to stream a response while logging out the chunks, and return the final size.
+
+{% Aside %}
+The phrase "logging out the chunks" made me sick in my mouth.
+{% endAside %}
+
+Here it is with promises:
+
+```js
+function getResponseSize(url) {
+  return fetch(url).then((response) => {
+    const reader = response.body.getReader();
+    let total = 0;
+
+    return reader.read().then(function processResult(result) {
+      if (result.done) return total;
+
+      const value = result.value;
+      total += value.length;
+      console.log('Received chunk', value);
+
+      return reader.read().then(processResult);
+    });
+  });
+}
+```
+
+Check me out, Jake "wielder of promises" Archibald. See how I'm calling
+`processResult()` inside itself to set up an asynchronous loop? Writing that made
+me feel _very smart_. But like most "smart" code, you have to stare at it for
+ages to figure out what it's doing, like one of those magic-eye pictures from
+the 90's.
+
+Let's try that again with async functions:
+
+```js
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  const reader = response.body.getReader();
+  let result = await reader.read();
+  let total = 0;
+
+  while (!result.done) {
+    const value = result.value;
+    total += value.length;
+    console.log('Received chunk', value);
+    // get the next result
+    result = await reader.read();
+  }
+
+  return total;
+}
+```
+
+All the "smart" is gone. The asynchronous loop that made me feel so smug is
+replaced with a trusty, boring, while-loop. Much better. In future, you'll get
+[async iterators](https://github.com/tc39/proposal-async-iteration),
+which would
+[replace the `while` loop with a for-of loop](https://gist.github.com/jakearchibald/0b37865637daf884943cf88c2cba1376), making it even neater.
+
+{% Aside %}
+I'm sort-of in love with streams. If you're unfamiliar with streaming,
+[check out my guide](https://jakearchibald.com/2016/streams-ftw/#streams-the-fetch-api).
+{% endAside %}
+
+## Other async function syntax
+
+I've shown you `async function() {}` already, but the `async` keyword can be
+used with other function syntax:
+
+### Arrow functions
+
+```js
+// map some URLs to json-promises
+const jsonPromises = urls.map(async (url) => {
+  const response = await fetch(url);
+  return response.json();
+});
+```
+
+{% Aside %}
+The `array.map(func)` doesn't care that I gave it an async function. It just
+sees it as a function that returns a promise. It won't wait for the first
+function to complete before calling the second.
+{% endAside %}
+
+### Object methods
+
+```js
+const storage = {
+  async getAvatar(name) {
+    const cache = await caches.open('avatars');
+    return cache.match(`/avatars/${name}.jpg`);
+  }
+};
+
+storage.getAvatar('jaffathecake').then(…);
+```
+
+### Class methods
+
+```js
+class Storage {
+  constructor() {
+    this.cachePromise = caches.open('avatars');
+  }
+
+  async getAvatar(name) {
+    const cache = await this.cachePromise;
+    return cache.match(`/avatars/${name}.jpg`);
+  }
+}
+
+const storage = new Storage();
+storage.getAvatar('jaffathecake').then(…);
+```
+
+{% Aside %}
+Class constructors and getters/setters cannot be async.
+{% endAside %}
+
+## Careful! Avoid going too sequential
+
+Although you're writing code that looks synchronous, ensure you don't miss the
+opportunity to do things in parallel.
+
+```js
+async function series() {
+  await wait(500); // Wait 500ms…
+  await wait(500); // …then wait another 500ms.
+  return 'done!';
+}
+```
+
+The above takes 1000ms to complete, whereas:
+
+```js
+async function parallel() {
+  const wait1 = wait(500); // Start a 500ms timer asynchronously…
+  const wait2 = wait(500); // …meaning this timer happens in parallel.
+  await Promise.all([wait1, wait2]); // Wait for both timers in parallel.
+  return 'done!';
+}
+```
+
+The above takes 500ms to complete, because both waits happen at the same time.
+Let's look at a practical example.
+
+### Example: outputting fetches in order
+
+Say you wanted to fetch a series of URLs and log them as soon as possible, in the
+correct order.
+
+_Deep breath_ - here's how that looks with promises:
+
+```js
+function markHandled(promise) {
+  promise.catch(() => {});
+  return promise;
+}
+
+function logInOrder(urls) {
+  // fetch all the URLs
+  const textPromises = urls.map((url) => {
+    return markHandled(fetch(url).then((response) => response.text()));
+  });
+
+  // log them in order
+  return textPromises.reduce((chain, textPromise) => {
+    return chain.then(() => textPromise).then((text) => console.log(text));
+  }, Promise.resolve());
+}
+```
+
+Yeah, that's right, I'm using `reduce` to chain a sequence of promises. I'm _so
+smart_. But this is a bit of _so smart_ coding you're better off without.
+
+However, when converting the above to an async function, it's tempting to go
+_too sequential_:
+
+{% Compare 'worse', 'Not recommended - too sequential' %}
+
+```js
+async function logInOrder(urls) {
+  for (const url of urls) {
+    const response = await fetch(url);
+    console.log(await response.text());
+  }
+}
+```
+
+{% CompareCaption %}
+Looks much neater, but my second fetch doesn't begin until my first fetch has
+been fully read, and so on. This is much slower than the promises example that
+performs the fetches in parallel. Thankfully there's an ideal middle-ground.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Recommended - nice and parallel' %}
+
+```js
+function markHandled(...promises) {
+  Promise.allSettled(promises);
+}
+
+async function logInOrder(urls) {
+  // fetch all the URLs in parallel
+  const textPromises = urls.map(async (url) => {
+    const response = await fetch(url);
+    return response.text();
+  });
+
+  markHandled(...textPromises);
+
+  // log them in sequence
+  for (const textPromise of textPromises) {
+    console.log(await textPromise);
+  }
+}
+```
+
+{% CompareCaption %}
+In this example, the URLs are fetched and read in parallel, but the "smart"
+`reduce` bit is replaced with a standard, boring, readable for-loop.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'important' %}
+`markHandled` is used to avoid "unhandled promise rejections". If a promise
+rejects, and it was never given a rejection handler (for example, via
+`.catch(handler)`), it's known as an "unhandled rejection". These are logged to
+the console, and also trigger [a global
+event](https://developer.mozilla.org/docs/Web/API/Window/unhandledrejection_event).
+
+The gotcha when handling a bunch of promises in sequence, is if one of them
+rejects, the function ends and the remaining promises are never handled.
+`markHandled` is used to prevent this, by attaching rejection handlers to all of
+the promises.
+{% endAside %}
+
+{% Aside %} The `for` loop in the previous example could make use of another
+JavaScript feature, [for
+await…of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for-await...of).
+
+```js
+for await (const text of textPromises) {
+  console.log(await text);
+}
+```
+
+This automatically `await`s the next item in the iterable (the `textPromises`
+array in this case). It awaits at the start of each turn through the loop, so
+the performance is the same as `await`ing within the loop. {% endAside %}
+
+### Browser support workaround: generators
+
+If you're targeting browsers that support generators (which includes
+[the latest version of every major browser](http://kangax.github.io/compat-table/es6/#test-generators)
+) you can sort-of polyfill async functions.
+
+[Babel](https://babeljs.io/) will do this for you,
+[here's an example via the Babel REPL](https://goo.gl/0Cg1Sq)
+
+- note how similar the transpiled code is. This transformation is part of
+  [Babel's es2017 preset](http://babeljs.io/docs/plugins/preset-es2017/).
+
+{% Aside %}
+Babel REPL is fun to say. Try it.
+{% endAside %}
+
+I recommend the transpiling approach, because you can just turn it off once your
+target browsers support async functions, but if you _really_ don't want to use a
+transpiler, you can take
+[Babel's polyfill](https://gist.github.com/jakearchibald/edbc78f73f7df4f7f3182b3c7e522d25)
+and use it yourself. Instead of:
+
+```js
+async function slowEcho(val) {
+  await wait(1000);
+  return val;
+}
+```
+
+…you'd include [the polyfill](https://gist.github.com/jakearchibald/edbc78f73f7df4f7f3182b3c7e522d25)
+and write:
+
+```js
+const slowEcho = createAsyncFunction(function* (val) {
+  yield wait(1000);
+  return val;
+});
+```
+
+Note that you have to pass a generator (`function*`) to `createAsyncFunction`,
+and use `yield` instead of `await`. Other than that it works the same.
+
+### Workaround: regenerator
+
+If you're targeting older browsers, Babel can also transpile generators,
+allowing you to use async functions all the way down to IE8. To do this you need
+[Babel's es2017 preset](http://babeljs.io/docs/plugins/preset-es2017/)
+_and_ the [es2015 preset](http://babeljs.io/docs/plugins/preset-es2015/).
+
+The [output is not as pretty](https://goo.gl/jlXboV), so watch out for
+code-bloat.
+
+## Async all the things!
+
+Once async functions land across all browsers, use them on every
+promise-returning function! Not only do they make your code tidier, but it makes
+sure that function will _always_ return a promise.
+
+I got really excited about async functions [back in
+2014](https://jakearchibald.com/2014/es7-async-functions/), and
+it's great to see them land, for real, in browsers. Whoop!
diff --git a/src/site/content/en/blog/asyncify/index.md b/src/site/content/en/blog/asyncify/index.md
new file mode 100644
index 00000000000..f19a8886e9f
--- /dev/null
+++ b/src/site/content/en/blog/asyncify/index.md
@@ -0,0 +1,512 @@
+---
+title: Using asynchronous web APIs from WebAssembly
+description: Learn how to invoke asynchronous web APIs when compiling traditionally synchronous languages to WebAssembly.
+date: 2021-04-26
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/3XqfQyjjfxEw8T3azz0W.jpg
+alt: A crosswalk signal asking pedestrians to wait.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - file-system
+---
+
+The I/O APIs on the web are asynchronous, but they're synchronous in most system languages. When
+compiling code to WebAssembly, you need to bridge one kind of APIs to another—and this bridge is
+Asyncify. In this post, you'll learn when and how to use Asyncify and how it works under the hood.
+
+## I/O in system languages
+
+I'll start with a simple example in C. Say, you want to read the user's name from a file, and greet
+them with a "Hello, (username)!" message:
+
+```cpp
+#include <stdio.h>
+
+int main() {
+    FILE *stream = fopen("name.txt", "r");
+    char name[20+1];
+    size_t len = fread(&name, 1, 20, stream);
+    name[len] = '\0';
+    fclose(stream);
+    printf("Hello, %s!\n", name);
+    return 0;
+}
+```
+
+While the example doesn't do much, it already demonstrates something you'll find in an application
+of any size: it reads some inputs from the external world, processes them internally and writes
+outputs back to the external world. All such interaction with the outside world happens via a few
+functions commonly called input-output functions, also shortened to I/O.
+
+To read the name from C, you need at least two crucial I/O calls: `fopen`, to open the file, and
+`fread` to read data from it. Once you retrieve the data, you can use another I/O function `printf`
+to print the result to the console.
+
+Those functions look quite simple at first glance and you don't have to think twice about the
+machinery involved to read or write data. However, depending on the environment, there can be quite
+a lot going on inside:
+
+  - If the input file is located on a local drive, the application needs to perform a series of
+    memory and disk accesses to locate the file, check permissions, open it for reading, and then
+    read block by block until the requested number of bytes is retrieved. This can be pretty slow,
+    depending on the speed of your disk and the requested size.
+  - Or, the input file might be located on a mounted network location, in which case, the network
+    stack will now be involved too, increasing the complexity, latency and number of potential
+    retries for each operation.
+  - Finally, even `printf` is not guaranteed to print things to the console and might be redirected
+    to a file or a network location, in which case it would have to go via the same steps above.
+
+Long story short, I/O can be slow and you can't predict how long a particular call will take by a
+quick glance at the code. While that operation is running, your whole application will appear frozen
+and unresponsive to the user.
+
+This is not limited to C or C++ either. Most system languages present all the I/O in a form of
+synchronous APIs. For example, if you translate the example to Rust, the API might look simpler, but
+the same principles apply. You just make a call and synchronously wait for it to return the result,
+while it performs all the expensive operations and eventually returns the result in a single
+invocation:
+
+```rust
+fn main() {
+    let s = std::fs::read_to_string("name.txt");
+    println!("Hello, {}!", s);
+}
+```
+
+But what happens when you try to compile any of those samples to WebAssembly and translate them to
+the web? Or, to provide a specific example, what could "file read" operation translate to? It would
+need to read data from some storage.
+
+## Asynchronous model of the web
+
+The web has a variety of different storage options you could map to, such as in-memory storage (JS
+objects), [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage),
+[IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API), server-side storage,
+and a new [File System Access API](/file-system-access/).
+
+However, only two of those APIs—the in-memory storage and the `localStorage`—can be used
+synchronously, and both are the most limiting options in what you can store and for how long. All
+the other options provide only asynchronous APIs.
+
+This is one of the core properties of executing code on the web: any time-consuming operation, which
+includes any I/O, has to be asynchronous.
+
+The reason is that the web is historically single-threaded, and any user code that touches the UI
+has to run on the same thread as the UI. It has to compete with the other important tasks like
+layout, rendering and event handling for the CPU time. You wouldn't want a piece of JavaScript or
+WebAssembly to be able to start a "file read" operation and block everything else—the entire tab,
+or, in the past, the entire browser—for a range from milliseconds to a few seconds, until it's over.
+
+Instead, code is only allowed to schedule an I/O operation together with a callback to be executed
+once it's finished. Such callbacks are executed as part of the browser's event loop. I won't be
+going into details here, but if you're interested in learning how the event loop works under the hood,
+check out
+[Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
+which explains this topic in-depth.
+
+The short version is that the browser runs all the pieces of code in sort of an infinite loop, by
+taking them from the queue one by one. When some event is triggered, the browser queues the
+corresponding handler, and on the next loop iteration it's taken out from the queue and executed.
+This mechanism allows simulating concurrency and running lots of parallel operations while using only
+a single thread.
+
+The important thing to remember about this mechanism is that, while your custom JavaScript (or
+WebAssembly) code executes, the event loop is blocked and, while it is, there is no way to react to
+any external handlers, events, I/O, etc. The only way to get the I/O results back is to register a
+callback, finish executing your code, and give the control back to the browser so that it can keep
+processing any pending tasks. Once I/O is finished, your handler will become one of those tasks and
+will get executed.
+
+For example, if you wanted to rewrite the samples above in modern JavaScript and decided to read a
+name from a remote URL, you would use Fetch API and async-await syntax:
+
+```js
+async function main() {
+  let response = await fetch("name.txt");
+  let name = await response.text();
+  console.log("Hello, %s!", name);
+}
+```
+
+Even though it looks synchronous, under the hood each `await` is essentially syntax sugar for
+callbacks:
+
+```js
+function main() {
+  return fetch("name.txt")
+    .then(response => response.text())
+    .then(name => console.log("Hello, %s!", name));
+}
+```
+
+In this de-sugared example, which is a bit clearer, a request is started and responses are subscribed to with the first callback. Once the browser receives the initial response—just the HTTP
+headers—it asynchronously invokes this callback. The callback starts reading the body as text using
+`response.text()`, and subscribes to the result with another callback. Finally, once `fetch` has
+retrieved all the contents, it invokes the last callback, which prints "Hello, (username)!" to the
+console.
+
+Thanks to the asynchronous nature of those steps, the original function can return control to the
+browser as soon as the I/O has been scheduled, and leave the entire UI responsive and available for
+other tasks, including rendering, scrolling and so on, while the I/O is executing in background.
+
+As a final example, even simple APIs like "sleep", which makes an application wait a specified
+number of seconds, are also a form of an I/O operation:
+
+```cpp
+#include <stdio.h>
+#include <unistd.h>
+// ...
+printf("A\n");
+sleep(1);
+printf("B\n");
+```
+
+Sure, you could translate it in a very straightforward manner that would block the current thread
+until the time expires:
+
+```js
+console.log("A");
+for (let start = Date.now(); Date.now() - start < 1000;);
+console.log("B");
+```
+
+In fact, that's exactly what Emscripten does in [its default implementation of
+"sleep",](https://github.com/emscripten-core/emscripten/blob/16d5755a3f71f27d0c67b8d7752f94844e56ef7c/src/library_pthread_stub.js#L47-L52)
+but that's very inefficient, will block the entire UI and won't allow any other events to be handled
+meanwhile. Generally, don't do that in production code.
+
+Instead, a more idiomatic version of "sleep" in JavaScript would involve calling `setTimeout()`, and
+subscribing with a handler:
+
+```js
+console.log("A");
+setTimeout(() => {
+    console.log("B");
+}, 1000);
+```
+
+What's common to all these examples and APIs? In each case, the idiomatic code in the original
+systems language uses a blocking API for the I/O, whereas an equivalent example for the web uses an
+asynchronous API instead. When compiling to the web, you need to somehow transform between those two
+execution models, and WebAssembly has no built-in ability to do so just yet.
+
+## Bridging the gap with Asyncify
+
+This is where [Asyncify](https://emscripten.org/docs/porting/asyncify.html) comes in. Asyncify is a
+compile-time feature supported by Emscripten that allows pausing the entire program and
+asynchronously resuming it later.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/VSMrdTiQ7PubW6vfE6WZ.svg", alt="A call graph
+describing a JavaScript -> WebAssembly -> web API -> async task invocation, where Asyncify connects
+the result of the async task back into WebAssembly", width="800", height="200" %}
+
+### Usage in C / C++ with Emscripten
+
+If you wanted to use Asyncify to implement an asynchronous sleep for the last example, you could do
+it like this:
+
+```cpp
+#include <stdio.h>
+#include <emscripten.h>
+
+EM_JS(void, async_sleep, (int seconds), {
+    Asyncify.handleSleep(wakeUp => {
+        setTimeout(wakeUp, seconds * 1000);
+    });
+});
+…
+puts("A");
+async_sleep(1);
+puts("B");
+```
+
+[`EM_JS`](https://emscripten.org/docs/api_reference/emscripten.h.html?highlight=em_js#c.EM_JS) is a
+macro that allows defining JavaScript snippets as if they were C functions. Inside, use a function
+[`Asyncify.handleSleep()`](https://emscripten.org/docs/porting/asyncify.html#making-async-web-apis-behave-as-if-they-were-synchronous)
+which tells Emscripten to suspend the program and provides a `wakeUp()` handler that should be
+called once the asynchronous operation has finished. In the example above, the handler is passed to
+`setTimeout()`, but it could be used in any other context that accepts callbacks. Finally, you can
+call `async_sleep()` anywhere you want just like regular `sleep()` or any other synchronous API.
+
+When compiling such code, you need to tell Emscripten to activate the Asyncify feature. Do that by
+passing `-s ASYNCIFY` as well as [`-s ASYNCIFY_IMPORTS=[func1,
+func2]`](https://emscripten.org/docs/porting/asyncify.html#more-on-asyncify-imports) with an
+array-like list of functions that might be asynchronous.
+
+```shell
+emcc -O2 \
+    -s ASYNCIFY \
+    -s ASYNCIFY_IMPORTS=[async_sleep] \
+    ...
+```
+
+This lets Emscripten know that any calls to those functions might require saving and restoring the
+state, so the compiler will inject supporting code around such calls.
+
+Now, when you execute this code in the browser you'll see a seamless output log like you'd expect,
+with B coming after a short delay after A.
+
+```text
+A
+B
+```
+
+You can [return values from
+Asyncify](https://emscripten.org/docs/porting/asyncify.html#returning-values) functions too. What
+you need to do is return the result of `handleSleep()`, and pass the result to the `wakeUp()`
+callback. For example, if, instead of reading from a file, you want to fetch a number from a remote
+resource, you can use a snippet like the one below to issue a request, suspend the C code, and
+resume once the response body is retrieved—all done seamlessly as if the call were synchronous.
+
+```js
+EM_JS(int, get_answer, (), {
+     return Asyncify.handleSleep(wakeUp => {
+        fetch("answer.txt")
+            .then(response => response.text())
+            .then(text => wakeUp(Number(text)));
+    });
+});
+puts("Getting answer...");
+int answer = get_answer();
+printf("Answer is %d\n", answer);
+```
+
+In fact, for Promise-based APIs like `fetch()`, you can even combine Asyncify with JavaScript's
+async-await feature instead of using the callback-based API. For that, instead of
+`Asyncify.handleSleep()`, call `Asyncify.handleAsync()`. Then, instead of having to schedule a
+`wakeUp()` callback, you can pass an `async` JavaScript function and use `await` and `return`
+inside, making code look even more natural and synchronous, while not losing any of the benefits of
+the asynchronous I/O.
+
+```js
+EM_JS(int, get_answer, (), {
+     return Asyncify.handleAsync(async () => {
+        let response = await fetch("answer.txt");
+        let text = await response.text();
+        return Number(text);
+    });
+});
+
+int answer = get_answer();
+```
+
+#### Awaiting complex values
+
+But this example still limits you only to numbers. What if you want to implement the original
+example, where I tried to get a user's name from a file as a string? Well, you can do that too!
+
+Emscripten provides a feature called
+[Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) that allows
+you to handle conversions between JavaScript and C++ values. It has support for Asyncify as well, so
+you can call `await()` on external `Promise`s and it will act just like `await` in async-await
+JavaScript code:
+
+```cpp
+val fetch = val::global("fetch");
+val response = fetch(std::string("answer.txt")).await();
+val text = response.call<val>("text").await();
+auto answer = text.as<std::string>();
+```
+
+When using this method, you don't even need to pass `ASYNCIFY_IMPORTS` as a compile flag, as it's
+already included by default.
+
+Okay, so this all works great in Emscripten. What about other toolchains and languages?
+
+### Usage from other languages
+
+Say that you have a similar synchronous call somewhere in your Rust code that you want to map to an
+async API on the web. Turns out, you can do that too!
+
+First, you need to define such a function as a regular import via `extern` block (or your chosen
+language's syntax for foreign functions).
+
+```rust
+extern {
+    fn get_answer() -> i32;
+}
+
+println!("Getting answer...");
+let answer = get_answer();
+println!("Answer is {}", answer);
+```
+
+And compile your code to WebAssembly:
+
+```shell
+cargo build --target wasm32-unknown-unknown
+```
+
+Now you need to instrument the WebAssembly file with code for storing/restoring the stack. For C /
+C++, Emscripten would do this for us, but it's not used here, so the process is a bit more manual.
+
+Luckily, the Asyncify transform itself is completely toolchain-agnostic. It can transform arbitrary
+WebAssembly files, no matter which compiler it's produced by. The transform is provided separately
+as part of the `wasm-opt` optimiser from the [Binaryen
+toolchain](https://github.com/WebAssembly/binaryen) and can be invoked like this:
+
+```shell
+wasm-opt -O2 --asyncify \
+      --pass-arg=asyncify-imports@env.get_answer \
+      [...]
+```
+
+Pass `--asyncify` to enable the transform, and then use `--pass-arg=…` to provide a comma-separated
+list of asynchronous functions, where the program state should be suspended and later resumed.
+
+All that's left is to provide supporting runtime code that will actually do that—suspend and resume
+WebAssembly code. Again, in the C / C++ case this would be included by Emscripten, but now you need
+custom JavaScript glue code that would handle arbitrary WebAssembly files. We've created a library
+just for that.
+
+You can find it on GitHub at
+[https://github.com/GoogleChromeLabs/asyncify](https://github.com/GoogleChromeLabs/asyncify) or npm
+under the name [`asyncify-wasm`](https://www.npmjs.com/package/asyncify-wasm).
+
+It simulates a standard [WebAssembly instantiation
+API](https://developer.mozilla.org/docs/WebAssembly), but under its own namespace. The only
+difference is that, under a regular WebAssembly API you can only provide synchronous functions as
+imports, while under the Asyncify wrapper, you can provide asynchronous imports as well:
+
+```js
+const { instance } = await Asyncify.instantiateStreaming(fetch('app.wasm'), {
+    env: {
+        async get_answer() {
+            let response = await fetch("answer.txt");
+            let text = await response.text();
+            return Number(text);
+        }
+    }
+});
+…
+await instance.exports.main();
+```
+
+Once you try to call such an asynchronous function - like `get_answer()` in the example above - from
+the WebAssembly side, the library will detect the returned `Promise`, suspend and save the state of
+the WebAssembly application, subscribe to the promise completion, and later, once it's resolved,
+seamlessly restore the call stack and state and continue execution as if nothing has happened.
+
+Since any function in the module might make an asynchronous call, all the exports become potentially
+asynchronous too, so they get wrapped as well. You might have noticed in the example above that you
+need to `await` the result of `instance.exports.main()` to know when the execution is truly
+finished.
+
+### How does this all work under the hood?
+
+When Asyncify detects a call to one of the `ASYNCIFY_IMPORTS` functions, it starts an asynchronous
+operation, saves the entire state of the application, including the call stack and any temporary
+locals, and later, when that operation is finished, restores all the memory and call stack and
+resumes from the same place and with the same state as if the program has never stopped.
+
+This is quite similar to async-await feature in JavaScript that I showed earlier, but, unlike the
+JavaScript one, doesn't require any special syntax or runtime support from the language, and instead
+works by transforming plain synchronous functions at compile-time.
+
+When compiling the earlier shown asynchronous sleep example:
+
+```js
+puts("A");
+async_sleep(1);
+puts("B");
+```
+
+Asyncify takes this code and transforms it to roughly like the following one (pseudo-code, real
+transformation is more involved than this):
+
+```js
+if (mode == NORMAL_EXECUTION) {
+    puts("A");
+    async_sleep(1);
+    saveLocals();
+    mode = UNWINDING;
+    return;
+}
+if (mode == REWINDING) {
+    restoreLocals();
+    mode = NORMAL_EXECUTION;
+}
+puts("B");
+```
+
+Initially `mode` is set to `NORMAL_EXECUTION`. Correspondingly, the first time such transformed code
+is executed, only the part leading up to `async_sleep()` will get evaluated. As soon as the
+asynchronous operation is scheduled, Asyncify saves all the locals, and unwinds the stack by
+returning from each function all the way to the top, this way giving control back to the browser
+event loop.
+
+Then, once `async_sleep()` resolves, Asyncify support code will change `mode` to `REWINDING`, and
+call the function again. This time, the "normal execution" branch is skipped - since it already did
+the job last time and I want to avoid printing "A" twice - and instead it comes straight to the
+"rewinding" branch. Once it's reached, it restores all the stored locals, changes mode back to
+"normal" and continues the execution as if the code were never stopped in the first place.
+
+### Transformation costs
+
+Unfortunately, Asyncify transform isn't completely free, since it has to inject quite a bit of
+supporting code for storing and restoring all those locals, navigating the call stack under
+different modes and so on. It tries to modify only functions marked as asynchronous on the command
+line, as well as any of their potential callers, but the code size overhead might still add up to approximately 50% before compression.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/Im4hmQOYRHFcsg8UTfTR.png", alt="A graph showing code
+size overhead for various benchmarks, from near-0% under fine-tuned conditions to over 100% in worst
+cases", width="800", height="494" %}
+
+This isn't ideal, but in many cases acceptable when the alternative is not having the functionality
+altogether or having to make significant rewrites to the original code.
+
+Make sure to always enable optimizations for the final builds to avoid it going even higher. You can
+also check [Asyncify-specific optimization
+options](https://emscripten.org/docs/porting/asyncify.html#optimizing) to reduce the overhead by
+limiting transforms only to specified functions and/or only direct function calls. There is also a
+minor cost to runtime performance, but it's limited to the async calls themselves. However, compared
+to the cost of the actual work, it's usually negligible.
+
+## Real-world demos
+
+Now that you've looked at the simple examples, I'll move on to more complicated scenarios.
+
+As mentioned in the beginning of the article, one of the storage options on the web is an
+asynchronous [File System Access API](/file-system-access/). It provides access to a
+real host filesystem from a web application.
+
+On the other hand, there is a de-facto standard called [WASI](https://github.com/WebAssembly/WASI)
+for WebAssembly I/O in the console and the server-side. It was designed as a compilation target for
+system languages, and exposes all sorts of file system and other operations in a traditional
+synchronous form.
+
+What if you could map one to another? Then you could compile any application in any source language
+with any toolchain supporting the WASI target, and run it in a sandbox on the web, while still
+allowing it to operate on real user files! With Asyncify, you can do just that.
+
+In this demo, I've compiled Rust [coreutils](https://github.com/RReverser/coreutils) crate with a
+few minor patches to WASI, passed via Asyncify transform and implemented asynchronous
+[bindings](https://github.com/GoogleChromeLabs/wasi-fs-access/blob/main/src/bindings.ts) from WASI
+to File System Access API on the JavaScript side. Once combined with
+[Xterm.js](https://xtermjs.org/) terminal component, this provides a realistic shell running in the
+browser tab and operating on real user files - just like an actual terminal.
+
+{% Video src="video/9oK23mr86lhFOwKaoYZ4EySNFp02/4244yB6c9RbMCjGjP8ZW.mp4" %}
+
+Check it out live at [https://wasi.rreverser.com/](https://wasi.rreverser.com/).
+
+Asyncify use-cases are not limited just to timers and filesystems, either. You can go further and
+use more niche APIs on the web.
+
+For example, also with the help of Asyncify, it's possible to map
+[libusb](https://github.com/libusb/libusb)—probably the most popular native library for working with
+USB devices—to a [WebUSB API](/usb/), which gives asynchronous access to such devices
+on the web. Once mapped and compiled, I got standard libusb tests and examples to run against chosen
+devices right in the sandbox of a web page.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/2rscL8dyhOVMacuq54Ad.jpg", alt="Screenshot of libusb
+debug output on a web page, showing information about the connected Canon camera", width="375",
+height="548" %}
+
+It's probably a story for another blog post though.
+
+Those examples demonstrate just how powerful Asyncify can be for bridging the gap and porting all
+sorts of applications to the web, allowing you to gain cross-platform access, sandboxing, and better
+security, all without losing functionality.
diff --git a/src/site/content/en/blog/at-property/hero.jpg b/src/site/content/en/blog/at-property/hero.jpg
deleted file mode 100644
index 03f6f530ac0..00000000000
Binary files a/src/site/content/en/blog/at-property/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/at-property/index.md b/src/site/content/en/blog/at-property/index.md
index 6265c384760..18e911fbb3a 100644
--- a/src/site/content/en/blog/at-property/index.md
+++ b/src/site/content/en/blog/at-property/index.md
@@ -1,33 +1,39 @@
 ---
+layout: post
 title: '@property: giving superpowers to CSS variables'
 subhead: The Houdini Properties and Values API is coming to your CSS file in Chromium 85.
 authors:
   - una
 date: 2020-07-21
 # updated: 2020-07-22
-hero: hero.jpg
+hero: image/admin/Iajld9FPY089XWDAZVQ4.jpg
 alt: A sparkler.
 description: Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.
 tags:
   - blog
   - css
   - houdini
+feedback:
+  - api
 ---
 
 [CSS Houdini](https://ishoudinireadyyet.com) is an umbrella term that covers a
 set of low-level APIs that expose parts of the CSS rendering engine, and give
 developers access to the CSS Object Model. This is a huge
 change for the CSS ecosystem, as it enables developers to tell the browser how
-to read and parse custom CSS without waiting for browser vendors to natively
-implement these features. So exciting!
+to read and parse custom CSS without waiting for browser vendors to provide
+built-in support for these features. So exciting!
 
 One of the most exciting additions to CSS within the Houdini umbrella is the
 [Properties and Values
-API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API).
+API](https://developer.mozilla.org/docs/Web/API/CSS_Properties_and_Values_API).
+
 This API supercharges your CSS custom properties (also commonly referred to as
 CSS variables) by giving them semantic meaning (defined by a syntax) and even
 fallback values, enabling CSS testing.
 
+{% BrowserCompat 'api.CSS.registerProperty' %}
+
 ## Writing Houdini custom properties
 
 Here's an example of setting a custom property (think: CSS variable), but now
@@ -36,7 +42,7 @@ it inherit the value from it's parent or not?). The current way to do this is
 through `CSS.registerProperty()` in JavaScript, but in Chromium 85 and later, the
 `@property` syntax will be supported in your CSS files:
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse', 'Separate JavaScript file (Chromium 78)' %}
 ```js
 CSS.registerProperty({
@@ -124,22 +130,22 @@ To illustrate this point, I'll show you how to animate a gradient. Currently,
 there is no way to smoothly animate (or interpolate) between gradient values, as
 each gradient declaration is parsed as a string.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="https://storage.googleapis.com/web-dev-assets/at-property/support1.gif">
-  <figcaption class="w-figcaption">
-    Using a custom property with a "number" syntax, the gradient on the left shows a smooth 
-    transition between stop values. The gradient on the right uses a default custom property 
+<figure>
+  <img src="https://storage.googleapis.com/web-dev-assets/at-property/support1.gif">
+  <figcaption>
+    Using a custom property with a "number" syntax, the gradient on the left shows a smooth
+    transition between stop values. The gradient on the right uses a default custom property
     (no syntax defined) and shows an abrupt transition.
   </figcaption>
 </figure>
 
-<!-- <figure class="w-figure">
-  <video controls autoplay loop muted playsinline class="w-screenshot">
+<!-- <figure>
+  <video controls autoplay loop muted playsinline>
     <source src="https://storage.googleapis.com/web-dev-assets/at-property/support1.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-figcaption">
-    Using a custom property with a "number" syntax, the gradient on the left shows a smooth 
-    transition between stop values. The gradient on the right uses a default custom property 
+  <figcaption>
+    Using a custom property with a "number" syntax, the gradient on the left shows a smooth
+    transition between stop values. The gradient on the right uses a default custom property
     (no syntax defined) and shows an abrupt transition.
   </figcaption>
 </figure>
@@ -183,25 +189,25 @@ And then when it comes time to animate it, you can update the value from the ini
 
 This will now enable that smooth gradient transition.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="https://storage.googleapis.com/web-dev-assets/at-property/demo.gif">
-  <figcaption class="w-figcaption">
+<figure>
+  <img src="https://storage.googleapis.com/web-dev-assets/at-property/demo.gif">
+  <figcaption>
     Smoothly transitioning gradient borders. <a href="https://glitch.com/~houdini-gradient-borders">See Demo on Glitch</a>
   </figcaption>
 </figure>
 
 <!--
-<figure class="w-figure">
-  <video controls autoplay loop muted playsinline class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src="https://storage.googleapis.com/web-dev-assets/at-property/demo.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Smoothly transitioning gradient borders. <a href="https://glitch.com/~houdini-gradient-borders">See Demo on Glitch</a>
   </figcaption>
 </figure>
 -->
 
-## Conclusion 
+## Conclusion
 
 The `@property` rule makes an exciting technology even more accessible by
 allowing you to write semantically meaningful CSS within CSS itself. To learn
@@ -209,8 +215,8 @@ more about CSS Houdini and the Properties and Values API, check out these
 resources:
 
 - [Is Houdini Ready Yet?](http://ishoudinireadyyet.com/)
-- [MDN Houdini Reference](https://developer.mozilla.org/en-US/docs/Web/Houdini)
-- [Smarter custom properties with Houdini's new API](https://web.dev/css-props-and-vals/)
+- [MDN Houdini Reference](https://developer.mozilla.org/docs/Web/Houdini)
+- [Smarter custom properties with Houdini's new API](/css-props-and-vals/)
 - [Houdini CSSWG Issue Queue](https://github.com/w3c/css-houdini-drafts/issues)
 
 Photo by [Cristian Escobar](https://unsplash.com/@cristian1) on Unsplash.
diff --git a/src/site/content/en/blog/audio-output-latency/index.md b/src/site/content/en/blog/audio-output-latency/index.md
new file mode 100644
index 00000000000..ea6c7d464aa
--- /dev/null
+++ b/src/site/content/en/blog/audio-output-latency/index.md
@@ -0,0 +1,36 @@
+---
+title: Synchronize audio and video playback on the web
+subhead: >
+  The Web Audio API makes it possible to properly achieve AV synchronization.
+date: 2022-06-01
+hero: image/vvhSqZboQoZZN9wBvoXq72wzGAf1/9nYDoT45VHvNAtTfLciY.jpeg
+alt: A photo of a video editing timeline in Adobe Premiere Pro
+authors: 
+  - beaufortfrancois
+description: >
+  The Web Audio API makes it possible to properly achieve AV synchronization.
+tags:
+  - blog
+  - audio
+  - media
+---
+
+The `outputLatency` property of an `AudioContext` instance provides an estimate of audio hardware's output latency (for example, that of Bluetooth earbuds or of an external USB audio interface). This property is useful when you want to:
+
+- Synchronize the existing audio material and the newly recorded material. (in a music production scenario)
+- Synchronize the [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API) output and other media (e.g. video or MIDI playback).
+
+In this [WebCodecs demo](https://wc-talk.netlify.app/simple_video_player.html) ([source](https://github.com/chcunningham/wc-talk)), the [WebCodecs API](https://developer.mozilla.org/docs/Web/API/WebCodecs_API) is used to decode a `MediaStream` into raw video and audio data, and then played back into a HTML `<canvas>` element with audio data coming from an [Audio Worklet](https://developer.mozilla.org/docs/Web/API/AudioWorklet). The `outputLatency` property allows the demo to determine when a given audio timestamp is reaching the user's ears and then properly paint video frames to match that.
+
+<figure>
+  {% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/p61K2S4Wye34OJn4XZOj.png", alt="A screenshot of the demo, which is of an embedded video with audio controls for volume, audio buffer health, total output latency, and a checkbox to use AudioContext.outputLatency.", width="800", height="533" %}
+</figure>
+
+Try it out for yourself, play the video with your favorite Bluetooth headset (🎧), wait for the bird (🐦) (see above), and toggle the checkbox (☑️) to observe audio playback changes. The total output latency value is updated in real time.
+
+### AudioContext outputLatency
+
+{% BrowserCompat 'api.AudioContext.outputLatency' %}
+
+_Hero image by [Wahid Khene](https://unsplash.com/@wahidkhene) on [Unsplash](https://unsplash.com/photos/iKdQCIiSMlQ)._
+  
diff --git a/src/site/content/en/blog/audio-quick/index.md b/src/site/content/en/blog/audio-quick/index.md
new file mode 100644
index 00000000000..e64c6df6ae2
--- /dev/null
+++ b/src/site/content/en/blog/audio-quick/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Quick guide to implementing the HTML5 audio tag
+authors:
+  - ernestd
+date: 2010-02-05
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+## Step 1: Wrap your Flash object with the audio tag
+
+Those browsers that don't recognize the audio tag will load the Flash content instead.
+
+```html
+<audio>
+</span><span class="old">
+    <object class="playerpreview" type="application/x-shockwave-flash"
+            data="player_mp3_mini.swf" width="200" height="20">
+      <param name="movie" value="player_mp3_mini.swf" />
+      <param name="bgcolor" value="#085c68" />
+      <param name="FlashVars" value="mp3=test.mp3" />
+      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
+             height="20" name="movie" align=""
+             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
+      </embed>
+    </object>
+</span><span class="new">
+</audio>
+```
+
+## Step 2: Add the source reference
+
+We can add as many "source" lines and formats as we want. If the browser doesn't support one specific format it will fallback to the next one and so forth.
+
+```html
+<span class="old"><audio></span>
+  <span class="new"><source src="test.mp3" type="audio/mpeg" />
+  <source src="test.ogg" type="audio/ogg" /></span><span class="old">
+
+  <object class="playerpreview" type="application/x-shockwave-flash"
+          data="player_mp3_mini.swf" width="200" height="20">
+    <param name="movie" value="player_mp3_mini.swf" />
+    <param name="bgcolor" value="#085c68" />
+    <param name="FlashVars" value="mp3=test.mp3" />
+    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
+           height="20" name="movie" align=""
+           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
+    </embed>
+  </object>
+
+</audio></span>
+```
+
+## Step 3: Add fallback to Flash
+
+To be safe, we need to add the fallback to a Flash audio player, in case the browser doesn't support any of the formats we specified. For instance, Firefox 3.5 only supports the audio tag with __Ogg__ format, but we might only have the __mp3__ file available.
+
+{% Aside %}
+There are also tools and [online converters](http://audio.online-convert.com/convert-to-ogg) you can use if you want to create ogg files from your mp3 and add support for ogg too.
+{% endAside %}
+
+```html
+<span class="old"><audio></span>
+<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
+
+<object class="playerpreview" type="application/x-shockwave-flash"
+        data="player_mp3_mini.swf" width="200" height="20">
+<param name="movie" value="player_mp3_mini.swf" />
+<param name="bgcolor" value="#085c68" />
+<param name="FlashVars" value="mp3=test.mp3" />
+<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
+        height="20" name="movie" align=""
+        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
+</embed>
+</object>
+
+</audio>
+</span><span class="new">
+<div id="player_fallback"></div>
+<script>
+if (document.createElement('audio').canPlayType) {
+if (!document.createElement('audio').canPlayType('audio/mpeg')) {
+    swfobject.embedSWF(
+    "player_mp3_mini.swf",
+    "player_fallback",
+    "200",
+    "20",
+    "9.0.0",
+    "",
+    {"mp3":"test.mp3"},
+    {"bgcolor":"#085c68"});
+}
+}
+</script></span>
+```
+
+To make it easier, we are using the [SWFObject](http://code.google.com/p/swfobject/) library to insert the Flash player via JavaScript. To include the library you can simply use the [Google AJAX Libraries API](http://code.google.com/apis/ajaxlibs/) inserting these two lines in your header:
+
+```html
+<span class="new"><script src="http://www.google.com/jsapi"></script>
+<script>google.load("swfobject", "2.2");</script></span></pre>
+```
+
+## Step 4: Add the default controls to show the player
+
+These controls are not customizable (see examples at the end). Since these default controls will show up regardless of the supported format we will need to handle its visibility with the conditional we previously created.
+
+```html
+<span class="old"><audio </span><span class="new">id="audio_with_controls" controls</span><span class="old">></span>
+<span class="old"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
+
+<object class="playerpreview" type="application/x-shockwave-flash"
+        data="player_mp3_mini.swf" width="200" height="20">
+<param name="movie" value="player_mp3_mini.swf" />
+<param name="bgcolor" value="#085c68" />
+<param name="FlashVars" value="mp3=test.mp3" />
+<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
+        height="20" name="movie" align=""
+        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
+</embed>
+</object>
+
+</audio>
+</span><span class="old">
+<div id="player_fallback"></div>
+<script>
+if (document.createElement('audio').canPlayType) {
+if (!document.createElement('audio').canPlayType('audio/mpeg')) {
+    ... SWFObject script line here ...
+    </span><span class="new">document.getElementsById('audio_with_controls').style.display = 'none';</span><span class="old">
+}
+}
+</script></span>
+```
+
+Alternatively, you can create your own player using JavaScript and CSS.
+```html
+<span class="old"><audio </span><span class="new">id="audio"</span><span class="old">></span>
+<span class="old"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
+
+<object class="playerpreview" type="application/x-shockwave-flash"
+        data="player_mp3_mini.swf" width="200" height="20">
+<param name="movie" value="player_mp3_mini.swf" />
+<param name="bgcolor" value="#085c68" />
+<param name="FlashVars" value="mp3=test.mp3" />
+<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
+        height="20" name="movie" align=""
+        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
+</embed>
+</object>
+
+</audio>
+</span><span class="old">
+<div id="player_fallback"></div>
+<span class="new"><div id="player" style="display: none">
+<button onClick="document.getElementById('audio').play()">Play</button>
+<button onClick="document.getElementById('audio').pause()">Pause</button>
+</div></span>
+
+<script>
+if (document.createElement('audio').canPlayType) {
+if (!document.createElement('audio').canPlayType('audio/mpeg')) {
+    ... SWFObject script lines here ...
+} </span><span class="new">else { // HTML5 audio + mp3 support
+    document.getElementById('player').style.display = 'block';
+}</span><span class="old">
+}
+</script></span>
+```
+
diff --git a/src/site/content/en/blog/audio-scheduling/index.md b/src/site/content/en/blog/audio-scheduling/index.md
new file mode 100644
index 00000000000..4c4c836b64f
--- /dev/null
+++ b/src/site/content/en/blog/audio-scheduling/index.md
@@ -0,0 +1,189 @@
+---
+layout: post
+title: A tale of two clocks
+subhead: Scheduling web audio with precision
+authors:
+  - chriswilson
+date: 2013-01-09
+tags:
+  - blog
+---
+
+## Introduction
+One of the biggest challenges in building great audio and music software using the web platform is managing time.  Not as in “time to write code”, but as in clock time - one of the least well-understood topics about Web Audio is how to properly work with the audio clock. The Web Audio AudioContext object has a currentTime property that exposes this audio clock.  
+
+Particularly for musical applications of web audio - not just writing sequencers and synthesizers, but any rhythmic use of audio events such as [drum machines](http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html), [games](http://cappel-nord.de/webaudio/acid-defender/), and [other](http://labs.dinahmoe.com/plink/) [applications](http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html) - it’s very important to have consistent, precise timing of audio events; not just starting and stopping sounds, but also scheduling changes to the sound (like changing frequency or volume).  Sometimes it’s desirable to have slightly time-randomized events - for example, in the machine-gun demo in [Developing Game Audio with the Web Audio API](http://www.html5rocks.com/en/tutorials/webaudio/games/) - but usually, we want to have consistent and accurate timing for musical notes.
+
+We’ve already shown you how to schedule notes using the Web Audio noteOn and noteOff (now renamed start and stop) methods’ time parameter in [Getting Started with Web Audio](http://www.html5rocks.com/tutorials/webaudio/intro/) and also in [Developing Game Audio with the Web Audio API](http://www.html5rocks.com/tutorials/webaudio/games/); however, we haven’t deeply explored more complex scenarios, such as playing long musical sequences or rhythms.  To dive into that, first we need a little background on clocks.
+
+## The Best of Times - the Web Audio Clock
+
+The Web Audio API exposes access to the audio subsystem’s hardware clock.  This clock is exposed on the AudioContext object through its .currentTime property, as a floating-point number of seconds since the AudioContext was created.  This enables this clock (hereafter called the “audio clock”) to be very high-precision;  it’s designed to be able to specify alignment at an individual sound sample level, even with a high sample rate.  Since there are around 15 decimal digits of precision in a “double”, even if the audio clock has been running for days, it should still have plenty of bits left over to point to a specific sample even at a high sample rate.
+
+The audio clock is used for scheduling parameters and audio events throughout the Web Audio API - for [start()](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#dfn-start) and [stop()](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#dfn-stop), of course, but also for [set*ValueAtTime() methods](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#methodsandparams-AudioParam) on AudioParams.  This lets us set up very precisely-timed audio events in advance.  In fact, it’s tempting to just set up everything in Web Audio as start/stop times - however, in practice there’s a problem with that. 
+
+For example, look at this reduced code snippet from our Web Audio Intro, which sets up two bars of an eighth note hi-hat pattern:
+
+```js
+for (var bar = 0; bar < 2; bar++) {
+  var time = startTime + bar * 8 * eighthNoteTime;
+
+  // Play the hi-hat every eighth note.
+  for (var i = 0; i < 8; ++i) {
+    playSound(hihat, time + i * eighthNoteTime);
+  }
+```
+
+This code will work great.  However, if you want to change the tempo in the middle of those two bars - or stop playing before the two bars are up - you’re out of luck. (I’ve seen developers do things like insert a gain node between their pre-scheduled AudioBufferSourceNodes and the output, just so they can mute their own sounds!)
+
+In short, because you will need the flexibility to change tempo or parameters like frequency or gain (or stop scheduling altogether), you don’t want to push too many audio events into the queue - or, more accurately, you don’t want to look ahead too far in time, because you may want to change that scheduling entirely.
+
+## The Worst of Times - the JavaScript Clock
+
+We also have our much-beloved and much-maligned JavaScript clock, represented by Date.now() and setTimeout().  The good side of the JavaScript clock is that it has a couple of very useful call-me-back-later window.setTimeout() and window.setInterval() methods, which let us have the system call our code back at specific times.
+
+The bad side of the JavaScript clock is that it is not very precise.  For starters, Date.now() returns a value in milliseconds - an integer number of milliseconds - so the best precision you could hope for is one millisecond.  This isn’t incredibly bad in some musical contexts - if your note started a millisecond early or late, you might not even notice - but even at a relatively low audio hardware rate of 44.1kHz, it’s about 44.1 times too slow to use as an audio scheduling clock.  Remember that dropping any samples at all can cause audio glitching - so if we’re chaining samples together, we may need them to be precisely sequential.
+
+The up-and-coming [High Resolution Time specification](http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HighResolutionTime/Overview.html) actually does give us a much better precision current time through window.performance.now(); it’s even implemented (albeit prefixed) in many current browsers.  That can help in some situations, although it’s not really relevant to the worst part of the JavaScript timing APIs.
+
+The worst part of the JavaScript timing APIs are that although Date.now()’s millisecond precision doesn’t sound too bad to live with, the actual callback of timer events in JavaScript (through window.setTimeout() or window.setInterval) can easily be skewed by tens of milliseconds or more by layout, rendering, garbage collection, and XMLHTTPRequest and other callbacks - in short, by any number of things happening on the main execution thread.  Remember how I mentioned “audio events” that we could schedule using the Web Audio API?  Well, those are all getting processed on a separate thread - so even if the main thread is temporarily stalled doing a complex layout or other long task, the audio will still happen at exactly the times they were told to happen - in fact, even if you’re stopped at a breakpoint in the debugger, the audio thread will continue to play scheduled events!
+
+## Using JavaScript setTimeout() in Audio Apps
+
+Since the main thread can easily get stalled for multiple milliseconds at a time, it is a bad idea to use JavaScript’s setTimeout to directly start playing audio events, because at best your notes will fire within a millisecond or so of when they really should, and at worst they will be delayed for even longer.  Worst of all, for what should be rhythmic sequences, they won’t fire at precise intervals as the timing will be sensitive to other things happening on the main JavaScript thread.
+
+To demonstrate this, I wrote a sample “bad” metronome application  - that is, one that uses setTimeout directly to schedule notes - and also does a lot of layout.  Open this application, click “play”, and then resize the window quickly while it’s playing; you’ll notice that the timing is noticeably jittery (you can hear the rhythm doesn't stay consistent).  “But this is contrived!” you say?  Well, of course - but that doesn’t mean it doesn’t happen in the real world too.  Even relatively static user interface will have timing issues in setTimeout due to relayouts - for example, I noticed that resizing the window quickly will cause the timing on the otherwise excellent [WebkitSynth](http://jeremywentworth.com/webkitSynth/) to stutter noticeably.  Now picture what will happen when you’re trying to smooth-scroll a full musical score along with your audio, and you can easily imagine how this would affect complex music apps in the real world.
+
+One of the most frequently-asked questions I hear is “Why can’t I get callbacks from audio events?”  Although there may be uses for these types of callbacks, they wouldn’t solve the particular problem at hand - it’s important to understand that those events would be fired in the main JavaScript thread, so they would be subject to all the same potential delays as setTimeout; that is, they could be delayed for some unknown and variable number of milliseconds from the precise time they were scheduled before they were actually processed.  
+
+So what can we do?  Well, the best way to handle timing is to set up a collaboration between JavaScript timers (setTimeout(), setInterval() or requestAnimationFrame() - more on that later) and the audio hardware scheduling.
+
+## Obtaining Rock-Solid Timing By Looking Ahead
+
+Let’s go back to that metronome demo - in fact, I wrote the first version of this simple metronome demo correctly to demonstrate this collaborative scheduling technique.  ([The code is also available on Github](http://github.com/cwilso/metronome/)  This demo plays beep sounds (generated by an Oscillator) with high precision on every sixteenth, eighth, or quarter note, altering the pitch depending on the beat.  It also lets you change the tempo and note interval while it’s playing, or stop the playback at any time - which is a key feature for any real-world rhythmic sequencer.  It would be pretty easy to add code to change the sounds this metronome uses on the fly as well.
+
+The way that it manages to allow temp control while maintaining rock-solid timing is a collaboration: a setTimeout timer that fires once every so often, and sets up Web Audio scheduling in the future for individual notes.  The setTimeout timer basically just checks to see if any notes are going to need to be scheduled “soon” based on the current tempo, and then schedules them, like so:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pu23mak40dM0zYG3BkF9.png", alt="setTimeout() and audio event interactio.", width="800", height="545" %}
+  <figcaption>
+  setTimeout() and audio event interaction.
+  </figcaption>
+</figure>
+
+In practice, setTimeout() calls may get delayed, so the timing of the scheduling calls may jitter (and skew, depending on how you use setTimeout) over time - although the events in this example fire approximately 50ms apart, they’re frequently slightly more than that (and sometimes much more).  However, during each call, we schedule Web Audio events not only for any notes that need to be played now (e.g. the very first note), but also any notes that need to be played between now and the next interval.
+
+In fact, we don’t want to just look ahead by precisely the interval between setTimeout() calls - we also need some scheduling overlap between this timer call and the next, in order to accommodate the worst case main thread behavior - that is, the worst case of garbage collection, layout, rendering or other code happening on the main thread delaying our next timer call.  We also need to account for the audio block-scheduling time - that is, how much audio the operating system keeps in its processing buffer - which varies across operating systems and hardware, from low single digits of milliseconds to around 50ms.  Each setTimeout() call shown above has a blue interval that shows the entire range of times during which it will attempt to schedule events; for example, the fourth web audio event scheduled in the diagram above might have been played “late” if we’d waited to play it until the next setTimeout call happened, if that setTimeout call was just a few milliseconds later.  In real life, the jitter in these times can be even more extreme than that, and this overlap becomes even more important as your app becomes more complex.
+
+The overall lookahead latency affects how tight the tempo control (and other real-time controls) can be; the interval between scheduling calls is a tradeoff between the minimum latency and how often your code impacts the processor.  How much the lookahead overlaps with the next interval’s start time is determines how resilient your app will be across different machines, and as it becomes more complex (and layout and garbage collection may take longer).  In general, to be resilient to slower machines and operating systems, it’s best to have a large overall lookahead and a reasonably short interval.  You can adjust to have shorter overlaps and longer intervals, in order to process fewer callbacks, but at some point, you might start hearing that a large latency causes tempo changes, etc., to not take effect immediately; conversely, if you lessened the lookahead too much, you might start hearing some jittering (as a scheduling call might have to “make up” events that should have happened in the past).
+
+The following timing diagram shows what the metronome demo code actually does: it has a setTimeout interval of 25ms, but a much more resilient overlap: each call will schedule for the next 100ms.  The downside of this long lookahead is that tempo changes, etc., will take a tenth of a second to take effect; however, we are much more resilient to interruptions:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PdnVZLRqwpDqMAHRFDGb.png", alt="Scheduling with long overlaps.", width="800", height="486" %}
+  <figcaption>
+  scheduling with long overlaps
+  </figcaption>
+</figure>
+
+
+In fact, you can tell in this example we had a setTimeout interruption in the middle - we should have had a setTimeout callback at approximately 270ms, but it was delayed for some reason until approximately 320ms - 50ms later than it should have been!  However, the large lookahead latency kept the timing going with no problem, and we didn’t miss a beat, even though we increased the tempo just before that to playing sixteenth notes at 240bpm (beyond even hardcore drum & bass tempos!)
+
+It’s also possible that each scheduler call might end up scheduling multiple notes - let’s take a look at what happens if we use a longer scheduling interval (250ms lookahead, spaced 200ms apart), and a tempo increase in the middle:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nWBTmc8SLQadveHqIt8D.png", alt="setTimeout() with long lookahead and long intervals.", width="800", height="247" %}
+  <figcaption>
+  setTimeout() with long lookahead and long intervals
+  </figcaption>
+</figure>
+
+This case demonstrates that each setTimeout() call may end up scheduling multiple audio events - in fact, this metronome is a simple one-note-at-a-time application, but you can easily see how this approach works for a drum machine (where there are frequently multiple simultaneous notes) or a sequencer (that may frequently have non-regular intervals between notes).
+
+In practice, you’ll want to tune your scheduling interval and the lookahead to see how affected it is by layout, garbage collection and other things going on in the main JavaScript execution thread, and to tune the granularity of control over tempo, etc.  If you have a very complex layout that happens frequently, for example, you’ll probably want to make the lookahead larger.  The main point is that we want the amount of “scheduling ahead” that we’re doing to be large enough to avoid any delays, but not so large as to be create noticeable delay when tweaking the tempo control.  Even the case above has a very small overlap, so it won’t be very resilient on a slow machine with a complex web application.  A good place to start is probably 100ms of “lookahead” time, with intervals set to 25ms.  This may still have problems in complex applications on machines with a lot of audio system latency, in which case you should up the lookahead time; or, if you need tighter control with the loss of some resilience, use a shorter lookahead.
+
+The core code of the scheduling process is in the scheduler() function -
+
+```js
+while (nextNoteTime < audioContext.currentTime + scheduleAheadTime ) {
+  scheduleNote( current16thNote, nextNoteTime );
+  nextNote();
+}
+```
+
+This function just gets the current audio hardware time, and compares it against the time for the next note in the sequence - most of the time* in this precise scenario this will do nothing (as there are no metronome “notes” waiting to be scheduled, but when it succeeds it will schedule that note using the Web Audio API, and advance to the next note.
+
+{% Aside %}
+The scheduler is called every 25ms.  At a standard tempo of 120 quarter-note beats per minute - in our case, playing eight sixteenth notes a second - a note will come up for scheduling every 125ms.  So, roughly 60% of the scheduling calls in this case will find no new notes to be scheduled.  Although you’d have to hit a tempo of 300 quarter-note beats per minute before our simple sixteenth-note pattern would start scheduling multiple notes in a single scheduler() pass, the “while” clause is important once you start supporting more complex rhythms - 32nd or shorter notes, flams, arbitrary sequences, etc. - and of course the first call, with a long lookahead and a fast tempo, will probably buffer up multiple notes.
+{% endAside %}
+
+The scheduleNote() function is responsible for actually scheduling the next Web Audio “note” to be played.  In this case, I used oscillators to make beeping sounds at different frequencies; you could just as easily create AudioBufferSource nodes and set their buffers to drum sounds, or any other sounds you wish.
+
+```js
+currentNoteStartTime = time;
+
+// create an oscillator
+var osc = audioContext.createOscillator();
+osc.connect( audioContext.destination );
+
+if (! (beatNumber % 16) )         // beat 0 == low pitch
+  osc.frequency.value = 220.0;
+else if (beatNumber % 4)          // quarter notes = medium pitch
+  osc.frequency.value = 440.0;
+else                              // other 16th notes = high pitch
+  osc.frequency.value = 880.0;
+osc.start( time );
+osc.stop( time + noteLength );
+```
+
+Once those oscillators are scheduled and connected, this code can forget about them entirely; they will start, then stop, then get garbage-collected automatically.
+
+The nextNote() method is responsible for advancing to the next sixteenth note - that is, setting the nextNoteTime and current16thNote variables to the next note:
+
+```js
+function nextNote() {
+  // Advance current note and time by a 16th note...
+  var secondsPerBeat = 60.0 / tempo;	// picks up the CURRENT tempo value!
+  nextNoteTime += 0.25 * secondsPerBeat;	// Add 1/4 of quarter-note beat length to time
+
+  current16thNote++;	// Advance the beat number, wrap to zero
+  if (current16thNote == 16) {
+    current16thNote = 0;
+  }
+}
+```
+
+This is pretty straightforward - although it’s important to understand that in this scheduling example, I’m not keeping track of “sequence time” - that is, time since the beginning of starting the metronome.  All we have to do is remember when we played the last note, and figure out when the next note is scheduled to play.  That way, we can change the tempo (or stop playing) very easily.
+
+This scheduling technique is used by a number of other audio applications on the web - for example, the  [Web Audio Drum Machine](http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html), the very fun [Acid Defender game](http://cappel-nord.de/webaudio/acid-defender/), and even more in-depth audio examples like the [Granular Effects demo](http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html).
+
+## Yet Another Timing System
+
+Now, as any good musician knows, what every audio application needs is more cowbell - er, more timers.  It’s worth mentioning that the right way to do visual display is making use of a THIRD timing system!
+
+Why, why, oh dear heavens why do we need another timing system?  Well, this one is synchronized to the visual display - that is, the graphics refresh rate - via the [requestAnimationFrame API](http://www.html5rocks.com/en/tutorials/speed/rendering/).  For drawing boxes in our metronome example, this may not seem like a really a big deal, but as your graphics get more and more complex, it becomes more and more critical to be using requestAnimationFrame() to sync with the visual refresh rate - and it’s actually just as easy to use from the beginning as using setTimeout()!  With very complex synced graphics (e.g. precise display of dense musical notes as they play in a musical notation package), requestAnimationFrame() will give you the smoothest, most precise graphic and audio synchronization.  
+
+We kept track of the beats in the queue in the scheduler:
+
+```js
+notesInQueue.push( { note: beatNumber, time: time } );
+```
+
+The interaction with our metronome’s current time can be found in the draw() method, which is called (using requestAnimationFrame) whenever the graphics system is ready for an update:
+
+```js
+var currentTime = audioContext.currentTime;
+
+while (notesInQueue.length && notesInQueue[0].time < currentTime) {
+  currentNote = notesInQueue[0].note;
+  notesInQueue.splice(0,1);   // remove note from queue
+}
+```
+
+Again, you’ll notice that we are checking the audio system’s clock - because that’s really the one we want to synchronize with, since it will actually play the notes - to see if we should be drawing a new box or not.  In fact, we’re not really using the requestAnimationFrame timestamps at all, since we’re using the audio system clock to figure out where we are in time.
+
+Of course, I could have just skipped using a setTimeout() callback altogether, and put my note scheduler into the requestAnimationFrame callback - then we’d be back down to two timers again.  That’s okay to do, too, but it’s important to understand that requestAnimationFrame is just a stand-in for setTimeout() in this case; you’ll still want the scheduling accuracy of Web Audio timing for the actual notes.
+
+## Conclusion
+
+I hope this tutorial has been helpful in explaining clocks, timers and how to build great timing into web audio applications.  These same techniques can be extrapolated easily to build sequence players, drum machines, and more.  Until next time…
diff --git a/src/site/content/en/blog/autowebperf/index.md b/src/site/content/en/blog/autowebperf/index.md
new file mode 100644
index 00000000000..8415b12f930
--- /dev/null
+++ b/src/site/content/en/blog/autowebperf/index.md
@@ -0,0 +1,196 @@
+---
+title: 'Automating audits with AutoWebPerf'
+subhead: >
+  A new modular tool that enables automatic gathering of performance data from multiple sources.
+description: >
+  A new modular tool that enables automatic gathering of performance data from multiple sources.
+date: 2020-12-09
+updated: 2022-07-18
+authors:
+  - jonchen
+  - gilbertococchi
+  - antoinebisch
+hero: image/admin/XEdZ5JBzgWLES21OvPjE.jpg
+thumbnail: image/admin/I9vVFD2ldSQc9vBfTc3i.jpg
+tags:
+  - blog
+  - performance
+  - tools
+---
+
+## What is AutoWebPerf (AWP)?
+
+[AutoWebPerf](https://github.com/GoogleChromeLabs/AutoWebPerf) (AWP) is a
+modular tool that enables automatic gathering of performance data from multiple
+sources. Currently there are [many tools
+available](/vitals-tools/) to measure website performance for
+different scopes ([lab and
+field](/how-to-measure-speed/#lab-data-vs-field-data)), such as
+Chrome UX Report, PageSpeed Insights, or WebPageTest. AWP offers integration
+with various audit tools with a simple setup so you can continuously monitor the
+site performance in one place.
+
+The release of [Web Vitals](/vitals/) guidance means that close
+and active monitoring of web pages is becoming increasingly important. The
+engineers behind this tool have been doing performance audits for years and they
+created AWP to automate a manual, recurring, and time consuming part of their
+daily activities. Today, AWP has reached a level of maturity and it's ready to
+be shared broadly so anyone can benefit from the automation it brings.
+
+The tool is accessible on the
+[AutoWebPerf](https://github.com/GoogleChromeLabs/AutoWebPerf) public repository
+on GitHub.
+
+## What is AWP for?
+
+Although several tools and APIs are available to monitor the performance of web
+pages, most of them expose data measured at a specific time. To adequately
+monitor a website and maintain good performance of key pages, it's recommended
+to continuously take measurements of [Core Web
+Vitals](/vitals/#core-web-vitals) over time and observe trends.
+
+AWP makes that easier by providing an engine and pre-built API integrations
+which can be programmatically configured to automate recurrent queries to
+various performance monitoring APIs.
+
+For example, with AWP, you can set a daily test on your home page to capture the
+field data from [CrUX API](https://developer.chrome.com/blog/chrome-ux-report-api/) and lab data
+from a
+[Lighthouse report from PageSpeed Insights](https://pagespeed.web.dev/).
+This data can be written and stored over time, for example, in [Google
+Sheets](https://www.google.co.uk/sheets/about/) and then visualised in the
+[Data Studio dashboard](https://datastudio.google.com/c/u/0/navigation/reporting).
+AWP automates the heavy-lifting part of the entire process, making it a great
+solution to follow lab and field trends over time. See [Visualising audit
+results in Data Studio](#data-studio) below for more details).
+
+## Architecture overview
+
+AWP is a modular-based library with three different types of modules:
+
+* the **engine**
+* **connector** modules
+* **gatherer** modules
+
+The engine takes a list of tests from a connector (for example, from a
+local CSV file), runs performance audits through selected gatherers (such as
+PageSpeed Insights), and writes results to the output connector (for example,
+Google Sheets).
+
+{% Img src="image/admin/GqufPfzbuslrT4st1FmP.png", alt="A diagram of AWP's architecture.", width="800", height="439" %}
+
+AWP comes with a number of pre-implemented gatherers and connectors:
+
+* Pre-implemented gatherers:
+  * [CrUX API](https://developer.chrome.com/blog/chrome-ux-report-api/)
+  * [CrUX BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery/)
+  * [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)
+  * [WebPageTest API](https://www.webpagetest.org/getkey.php)
+* Pre-implemented connectors:
+  * Google Sheets
+  * JSON
+  * CSV
+
+## Automating audits with AWP
+
+AWP automates the performance audits via your preferred audit platforms such as
+[PageSpeed Insights](https://pagespeed.web.dev/),
+[WebPageTest](https://webpagetest.org/), or
+[CrUX API](https://developer.chrome.com/docs/crux/api/).
+AWP offers the flexibility to choose where to load the list of tests, and where
+to write the results to.
+
+For example, you can run audits for a list of tests stored in a Google Sheet,
+and write the results to a CSV file, with the command below:
+
+```shell
+PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
+```
+
+### Recurring audits
+
+You can run recurring audits in daily, weekly, or monthly frequency. For
+example, you can run daily audits for a list of tests defined in a local JSON
+like below:
+
+```json
+{
+  "tests": [
+    {
+      "label": "web.dev",
+      "url": "https://web.dev",
+      "gatherer": "psi"
+    }
+  ]
+}
+```
+
+The command below reads the list of audit tests from the local JSON file, runs
+audits on a local machine, then outputs results to a local CSV file:
+
+```shell
+PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
+```
+
+To run audits every day as a background service continuously, you can use the
+command below instead:
+
+```shell
+PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
+```
+
+Alternatively, you can set up the
+[crontab](https://www.geeksforgeeks.org/how-to-setup-cron-jobs-in-ubuntu/) in a
+Unix-like environment to run AWP as a daily cron job:
+
+```shell
+0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
+```
+
+You can find more ways to automate daily audits and result collection in the
+[AWP GitHub repository](https://github.com/GoogleChromeLabs/AutoWebPerf).
+
+## Visualising audit results in Data Studio {: #data-studio }
+
+Along with continuously measuring Core Web Vitals, it is important to be able to
+evaluate the trends and discover potential regressions with real user metrics
+(RUM) or the Chrome UX Report (CrUX) data collected by AWP. Note that
+Chrome UX Report (CrUX) is a 28-day moving aggregation, hence it is recommended
+to also use your own RUM data along with CrUX so you can spot regressions
+sooner.
+
+Data Studio is a free visualization tool that you can easily load performance
+metrics into and draw trends as charts. For example, the time series charts
+below show Core Web Vitals based on Chrome UX Report data. One of the charts
+shows increasing Cumulative Layout Shift in recent weeks, which means
+regressions in the layout stability for certain pages. In this scenario, you
+would want to prioritize the efforts to analyze the underlying issues of these
+pages.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Cpi7NkLvKyvf2xYzFwAn.png", alt="A screenshot of Core Web Vitals results in Data Studio.", width="800", height="904" %}
+</figure>
+
+To simplify the end-to-end process from data collection to visualization, you
+can run AWP with a list of URLs to automatically export results to Google Sheets
+with the following command:
+
+```shell
+PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
+```
+
+After collecting daily metrics in a spreadsheet, you can create a Data Studio
+dashboard that loads the data directly from the spreadsheet, and plots the
+trends into a time series chart. Check out [Google Spreadsheets API
+Connector](https://github.com/GoogleChromeLabs/AutoWebPerf/blob/stable/docs/sheets-connector.md)
+for detailed steps about how to set up AWP with spreadsheets as a data source to
+visualize on Data Studio.
+
+## What's next?
+
+AWP provides a simple and integrated way to minimize the efforts to set up a
+continuous monitoring pipeline to measure Core Web Vitals and other performance
+metrics. As for now, AWP covers the most common use cases and will continue to
+provide more features to address other use cases in the future.
+
+Learn more in the [AutoWebPerf](https://github.com/GoogleChromeLabs/AutoWebPerf) repository.
diff --git a/src/site/content/en/blog/avif-updates-2023/index.md b/src/site/content/en/blog/avif-updates-2023/index.md
new file mode 100644
index 00000000000..9aaef79af0b
--- /dev/null
+++ b/src/site/content/en/blog/avif-updates-2023/index.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: Deploying AVIF for more responsive websites
+subhead: |
+  An update on how AVIF has been adopted in the ecosystem.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/VTbul8MN3pUxggkYsc6F.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/vnBIBHxxooLvRszJMG3b.jpg
+alt: A close-up photograph of pixels on an LCD display.
+authors:
+  - jhuoponen
+  - vignesh
+description: |
+  An overview of how AVIF is adopted in the ecosystem, and what kind of performance and quality benefits developers can expect from AVIF for still images and animations.
+date: 2023-05-24
+tags:
+  - blog
+  - performance
+  - images
+---
+
+[AVIF](https://aomedia.org/avif/) is a new image format that is quickly gaining popularity on the web because of its high compression rates, efficient performance, and broad adoption. AVIF is an open, royalty-free image format that is based on the AV1 video codec standardized by the Alliance for Open Media. This blog post will provide an overview of how AVIF is adopted in the ecosystem, and what kind of performance and quality benefits developers can expect from AVIF for still images and animations.
+
+## What’s new with the AVIF ecosystem?
+
+Since the introduction of AVIF in Chrome, Firefox and Safari, usage of AVIF on the web has been growing steadily; [almost all browsers](https://caniuse.com/avif) support AVIF today.
+
+In Chrome alone, AVIF usage grew to approximately one percent in a little over a year after Chrome added AVIF support in stable.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png", alt="A line graph of AVIF usage in Chrome from May 2021 to March 2023. Support has steadily grown from 0% to just beneath 1.4%.", width="800", height="367" %}
+</figure>
+
+A number of image CDNs, such as [Akamai](https://techdocs.akamai.com/ivm/changelog/apr-07-2021-new-policy-filters-and-avif-image-format), [Cloudflare](https://blog.cloudflare.com/images-avif-blur-bundle/), [Cloudinary](https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary) and [Imgix](https://blog.imgix.com/2021/10/27/avif-limited-availability) are serving AVIF images today. In a [blog post](https://blog.imgix.com/2021/10/27/avif-limited-availability) announcing AVIF support, Imgix reported 60% file size savings compared to JPEG and 35% savings compared to WebP. These file size savings lead to significant storage savings, but also help pages load faster, yielding faster [Largest Contentful Paint (LCP)](/lcp/) times. LCP is one of the [Core Web Vitals](/learn-core-web-vitals/), and represents how quickly the largest block of content on the page has loaded. Using modern codecs to compress images is one of the [key techniques](/optimize-lcp/) to reduce LCP. [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is a great Chrome developer tool for testing your web site and to see [how much savings AVIF would bring](https://developer.chrome.com/en/docs/lighthouse/performance/uses-webp-images/).
+
+WordPress is the [most popular](https://www.wpbeginner.com/beginners-guide/ultimate-list-of-wordpress-stats-facts-and-other-research/) website platform in the world, and there are number of plugins available for developers to convert their images to AVIF, such as:
+
+- [AutoOptimize](https://wordpress.org/plugins/autoptimize/)
+- [Converted for Media](https://wordpress.org/plugins/webp-converter-for-media/)
+- [EWWW Image Optimizer](https://ewww.io/)
+- [Optimole](https://optimole.com/)
+- [ShortPixel Image Optimizer](https://shortpixel.com/)
+
+For more hands-on developers, tools like [ImageMagick](https://imagemagick.org/index.php) and [FFmpeg](https://ffmpeg.org/) are a good starting point.
+
+## AVIF encode speed
+
+Fast encoding speed and high visual quality are critical for deploying image compression at scale. AVIF software encoding speed has improved significantly over the past two years. Compared to other modern still image formats, AVIF produces smaller files with similar visual quality (see the following graph, lower is better) but is also [faster to encode](https://storage.googleapis.com/avif-comparison/subset1.html).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png", alt="A bar chart comparing various image codec file sizes as a percentage of the output of TurboJPEG. AVIF is lowest, then JPEG XL, then WebP, and finally MozJPEG.", width="800", height="415" %}
+</figure>
+
+The chart below (higher is better) illustrates how AVIF encoding speed compares to other image formats. Previous generation codecs like WebP benefit from the less complex (but also less efficient) compression algorithms. With a multi-threaded encoding scheme, AVIF achieves similar performance for common use cases while delivering significant compression gains.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png", alt="A comparison of image codec encoding speed. The compared encoders are average AVIF, average JPEG XL, average WebP (one thread), and average MozJPEG (one thread). AVIF is generally one of the fastest image encoders in terms of best quality and default effort, but is the slowest of all encoders for on-the-fly performance.", width="800", height="433" %}
+</figure>
+
+For developers interested in more detailed encoding speed and visual quality comparisons, the [Image Coding Comparisons](https://storage.googleapis.com/avif-comparison/index.html) site contains reproducible benchmark results.
+
+While software implementations for modern image codecs like AVIF and WebP are optimized for x86 and ARM processors architectures, compressing vast amounts of images at scale can be computationally expensive. One alternative to reduce compression costs is to explore hardware acceleration. [Bluedot](https://www.blue-dot.io/) has developed a hardware accelerated Pulsar-AVIF encoder running on programmable FPGAs, such as AMD's Alveo U250. Compared to software based avifenc, Pulsar-AVIF delivers a 7 to 23 times speed improvement with similar [compression efficiency](https://www.blue-dot.io/avif-speed-quality-benchmark/).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Encoder</th>
+        <th>Encode time (ms)</th>
+        <th>Frames per second</th>
+        <th>CPU utilization</th>
+        <th>Hardware specification</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          Pulsar-AVIF<br>
+          (FPGA)
+        </td>
+        <td>60</td>
+        <td>409.85</td>
+        <td>305%</td>
+        <td>
+          AMD Alveo U250 1ea + Intel(R) Xeon(R)<br>
+          Platinum 8171 CPU at 2.6GHz, 10 cores
+        </td>
+      </tr>
+      <tr>
+        <td>
+          avifenc<br>
+          (libaom)
+        </td>
+        <td>405</td>
+        <td>59.26</td>
+        <td>3200%</td>
+        <td>
+          Intel(R) Xeon(R) Platinum 8370C CPU at<br>
+          2.8GHz, 32 cores
+        </td>
+      </tr>
+      <tr>
+        <td>
+          avifenc<br>
+          (SVT-AV1)
+        </td>
+        <td>1325</td>
+        <td>18.11</td>
+        <td>3200%</td>
+        <td>
+          Intel(R) Xeon(R) Platinum 8370C CPU at<br>
+          2.8GHz, 32 cores
+        </td>
+      </tr>
+    </tbody>
+    <caption>
+      AVIF encode speed comparison<br>
+      <ul>
+        <li>Test set: Kodak (24 images of 768x512)</li>
+        <li>Encoding 24 images simultaneously (24 processes)</li>
+        <li>Each software encoding process is executed with 4 threads. (-j 4)</li>
+      </ul>
+    </caption>
+  </table>
+</div>
+
+Developers can deploy Pulsar-AVIF encoder with cloud virtual machines, such as [Azure NP-Series](https://learn.microsoft.com/en-us/azure/virtual-machines/np-series).
+
+## AVIF features for responsive web pages
+
+AVIF has a few interesting features that will help to deliver more responsive web pages. This time we’ll dive a bit into animated AVIFs, which are by far the most efficient way of delivering cool animations on the web.
+
+### Animated AVIF
+
+Animated [GIF](https://en.wikipedia.org/wiki/GIF) is still [a popular format](https://almanac.httparchive.org/en/2022/media#gifs-animated-and-not) for animated images, despite being 35 years old. Biggest drawbacks of animated GIFs are the support for 256 colors only and poor compression leading to very large file sizes while also limiting the resolution or frame rate for practical use cases. In contrast, animated AVIF coding is actually the same as AV1 video coding scheme which provides significant file size savings compared to animated GIF.
+
+We ran a simple benchmark where we encoded a set of animated GIFs to both AVIF and JPEG XL. Over the test set, median file size savings percentage was approximately 86% compared to original GIF files and about 73% compared to animated JPEG XL files*.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png", alt="A comparison of animated image codec performance. AVIF outperforms GIF and JPEG XL in terms of both average and median file size.", width="600", height="371" %}
+  <figcaption>
+    * libavif and libjxl versions: libavif version 4cff6a3 (libaom version v3.5.0), libjxl version 176b1c03. Test set: 15 sample GIFs from <a href="https://commons.wikimedia.org/wiki/Category:Animated_GIF_files." rel="noopener">Wikipedia</a>.
+  </figcaption>
+</figure>
+
+Chrome, Firefox and Safari all support animated AVIF playbacks.
+
+FFmpeg is one tool to use for creating animated AVIF files, here’s a basic example of converting a GIF to AVIF using FFmpeg:
+
+```bash
+ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
+```
+
+`$CRF` is the desired output quality on a scale of `0` to `63`. Lower values mean better quality and greater file size. `0` uses [lossless compression](https://en.wikipedia.org/wiki/Lossless_compression). Start with a value of `23` for small animated AVIF files.
+
+FFmpeg uses libaom by default for encoding AVIF images, but it can also use [rav1e](https://github.com/xiph/rav1e) or [SVT-AV1](https://gitlab.com/AOMediaCodec/SVT-AV1) when available. More information about encoder choices, tuning the encoding parameters for speed/quality trade-offs can be found in [FFmpeg's AV1 encoding guide](https://trac.ffmpeg.org/wiki/Encode/AV1).
+
+Another use case is to repackage an AV1 video into AVIF without re-encoding the original file. This is significantly cheaper than decoding/encoding the original AV1 file and makes the AV1 video available for use with the `<img>` element. Passing `-c:v copy` to FFmpeg can do this.
+
+```bash
+ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
+```
+
+## Conclusions
+
+AVIF use on the web has been steadily increasing since launch and is widely supported by browsers, image CDNs, WordPress plugins and encoding tools. All in all, AVIF is a great choice for serving images on the web; AVIF is fast to encode and decode while providing the best quality or smallest file size, whichever you prefer for your website. AVIF is the most efficient way to deliver animations on the web. If you have questions, comments, or feature requests, please reach out on the [av1-discuss mailing list](https://groups.google.com/a/aomedia.org/g/av1-discuss), [AOM Github community](https://github.com/AOMediaCodec/community/wiki), and [AVIF wiki](https://github.com/AOMediaCodec/av1-avif/wiki).
+
+_Hero image from [Unsplash](https://unsplash.com/photos/oXlXu2qukGE), by [Amal S
+](https://unsplash.com/@amal_z7z)._
diff --git a/src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md b/src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md
new file mode 100644
index 00000000000..c2918674eb6
--- /dev/null
+++ b/src/site/content/en/blog/avoid-large-complex-layouts-and-layout-thrashing/index.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Avoid large, complex layouts and layout thrashing
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Yv6fjfgK4j51XHDWIkw1.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/l0vqWPN7MjFYtNw1rTkZ.jpg
+alt: A rough watercolor painting of a design layout. There are three boxes laid across the X-axis. The left one is primarily painted in the blue, the middle in purple, and the one at the right in green.
+subhead: |
+  Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
+authors:
+  - paullewis
+  - jlwagner
+date: 2015-03-20
+updated: 2023-05-09
+description: |
+  Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome (and derived browsers such as Edge), and Safari. In Firefox it's called Reflow, but the process is effectively the same.
+
+Similarly to style calculations, the immediate concerns for layout cost are:
+
+1. The number of elements that require layout, which is a byproduct of the page's [DOM size](/dom-size-and-interactivity/).
+1. The complexity of those layouts.
+
+## Summary
+
+* Layout has a direct effect on interaction latency
+* Layout is normally scoped to the whole document.
+* The number of DOM elements will affect performance; you should avoid triggering layout wherever possible.
+* Avoid forced synchronous layouts and layout thrashing; read style values then make style changes.
+
+## The effects of layout on interaction latency
+
+When a user interacts with the page, those interactions should be as fast as possible. The amount of time it takes for an interaction to complete—ending when the browser presents the next frame to show the results of the interaction—is known as _interaction latency_. This is an aspect of page performance that the [Interaction to Next Paint](/inp/) metric measures.
+
+The amount of time it takes for the browser to present the next frame in response to a user interaction is known as the interaction's _presentation delay_. The goal of an interaction is to provide visual feedback in order to signal to the user that something has occurred, and visual updates can involve some amount of layout work in order to achieve that goal.
+
+In order to keep your website's INP as low as possible, it's important to avoid layout when possible. If it's not possible to avoid layout entirely, it's important to limit that layout work so that the browser can present the next frame quickly.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Interaction to Next Paint (INP)](/inp/).
+{% endAside %}
+
+## Avoid layout wherever possible
+
+When you change styles the browser checks to see if any of the changes require layout to be calculated, and for that render tree to be updated. Changes to "geometric properties", such as widths, heights, left, or top all require layout.
+
+```css
+.box {
+  width: 20px;
+  height: 20px;
+}
+
+/**
+  * Changing width and height
+  * triggers layout.
+  */
+
+.box--expanded {
+  width: 200px;
+  height: 350px;
+}
+```
+
+Layout is almost always scoped to the entire document. If you have a lot of elements, it's going to take a long time to figure out the locations and dimensions of them all.
+
+If it's not possible to avoid layout then the key is to once again use Chrome DevTools to see how long it's taking, and determine if layout is the cause of a bottleneck. Firstly, open DevTools, go to the Timeline tab, hit record and interact with your site. When you stop recording you'll see a breakdown of how your site performed:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZK8uTy6hUd50CVY6hoMS.png", alt="DevTools showing a long time in Layout.", width="800", height="602" %}
+</figure>
+
+When digging into the trace in the above example, we see that over 28 milliseconds is spent inside layout for each frame, which, when we have 16 milliseconds to get a frame on screen in an animation, is far too high. You can also see that DevTools will tell you the tree size (1,618 elements in this case), and how many nodes were in need of layout (5 in this case).
+
+Keep in mind that the general advice here is to avoid layout _whenever possible_—but it isn't always possible to avoid layout. In cases where you can't avoid layout, know that the cost of layout has a relationship with the size of the DOM. Although the relationship between the two isn't tightly coupled, larger DOMs will generally incur higher layout costs.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[DOM size and interactivity](/dom-size-and-interactivity/).
+{% endAside %}
+
+## Avoid forced synchronous layouts
+
+Shipping a frame to screen has this order:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mSZbp9o13Mub4fq8PWzT.jpg", alt="Using flexbox as layout.", width="800", height="122" %}
+</figure>
+
+First the JavaScript runs, _then_ style calculations, _then_ layout. It is, however, possible to force a browser to perform layout earlier with JavaScript. This is called **forced synchronous layout**.
+
+The first thing to keep in mind is that as the JavaScript runs all the old layout values from the previous frame are known and available for you to query. So if, for example, you want to write out the height of an element (let's call it "box") at the start of the frame you may write some code like this:
+
+```js
+// Schedule our function to run at the start of the frame:
+requestAnimationFrame(logBoxHeight);
+
+function logBoxHeight () {
+  // Gets the height of the box in pixels and logs it out:
+  console.log(box.offsetHeight);
+}
+```
+
+Things get problematic if you've changed the styles of the box _before_ you ask for its height:
+
+```js
+function logBoxHeight () {
+  box.classList.add('super-big');
+
+  // Gets the height of the box in pixels and logs it out:
+  console.log(box.offsetHeight);
+}
+```
+
+Now, in order to answer the height question, the browser must _first_ apply the style change (because of adding the `super-big` class), and _then_ run layout. Only then will it be able to return the correct height. This is unnecessary and potentially expensive work.
+
+{% Aside 'important' %}
+While the example above uses the `offsetHeight` property, there are [many properties to be aware of](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) that can trigger forced synchronous layout.
+{% endAside %}
+
+Because of this, you should always batch your style reads and do them first (where the browser can use the previous frame's layout values) and then do any writes:
+
+Done correctly the above function would be:
+
+```js
+function logBoxHeight () {
+  // Gets the height of the box in pixels and logs it out:
+  console.log(box.offsetHeight);
+
+  box.classList.add('super-big');
+}
+```
+
+For the most part you shouldn't need to apply styles and then query values; using the last frame's values should be sufficient. Running the style calculations and layout synchronously and earlier than the browser would like are potential bottlenecks, and not something you will typically want to do.
+
+## Avoid layout thrashing
+
+There's a way to make forced synchronous layouts even worse: _do lots of them in quick succession_. Take a look at this code:
+
+```js
+function resizeAllParagraphsToMatchBlockWidth () {
+  // Puts the browser into a read-write-read-write cycle.
+  for (let i = 0; i < paragraphs.length; i++) {
+    paragraphs[i].style.width = `${box.offsetWidth}px`;
+  }
+}
+```
+
+This code loops over a group of paragraphs and sets each paragraph's width to match the width of an element called "box". It looks harmless enough, but the problem is that each iteration of the loop reads a style value (`box.offsetWidth`) and then immediately uses it to update the width of a paragraph (`paragraphs[i].style.width`). On the next iteration of the loop, the browser has to account for the fact that styles have changed since `offsetWidth` was last requested (in the previous iteration), and so it must apply the style changes, and run layout. This will happen on _every single iteration!_.
+
+The fix for this sample is to once again _read_ and then _write_ values:
+
+```js
+// Read.
+const width = box.offsetWidth;
+
+function resizeAllParagraphsToMatchBlockWidth () {
+  for (let i = 0; i < paragraphs.length; i++) {
+    // Now write.
+    paragraphs[i].style.width = `${width}px`;
+  }
+}
+```
+
+If you want to guarantee safety, consider using [FastDOM](https://github.com/wilsonpage/fastdom), which automatically batches your reads and writes for you, and should prevent you from triggering forced synchronous layouts or layout thrashing accidentally.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Hal Gatewood](https://unsplash.com/@halacious)._
diff --git a/src/site/content/en/blog/babe/index.md b/src/site/content/en/blog/babe/index.md
new file mode 100644
index 00000000000..ba5f3a51be7
--- /dev/null
+++ b/src/site/content/en/blog/babe/index.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: BaBe
+date: 2016-05-14
+updated: 2016-05-14
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jalFicttU5q4B9S88RJg.gif", alt="BaBe detail", width="582", height="1000" %}
+</figure>
+
+## Summary
+
+BaBe’s cross-browser Progressive Web App rivals performance of native app.
+
+### Results
+
+- Time spent on site comparable to native app: 3 minutes vs. 3 minutes per session
+- Articles read on site comparable to native app: 3 vs. 4 per session
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/a42kSkZvqIqyzhPQdKgz.pdf)
+
+## About BaBe
+
+Launched in 2013, BaBe is the largest news-aggregator app in Indonesia. It
+has been downloaded by more than a million people. This app-only business
+moved to the web for the first time in early 2016, building a cross-browser
+Progressive Web App with feature parity and a look and feel almost identical
+to their native app.
+
+## Challenge
+
+Getting users to download their app has always been a core challenge, and this
+problem only got more difficult as they expanded to target people outside the
+big cities. Several obstacles included poor internet connectivity and prevalent
+use of low-end devices. Together these hindered their inability to scale.
+
+## Solution
+
+They built a Progressive Web App ([https://app.babe.co.id](https://app.babe.co.id)) to combine the best
+of their app with the broad reach of the web. It leverages new, open web APIs
+to offer a mobile-web experience that loads quickly, uses less data, and
+re-engages users in multiple ways.
+
+After implementing their Progressive Web App, they saw it perform slightly
+faster than their native app in testing. They also noticed that engagement was
+comparable, with users spending 3 minutes on site vs. 3 minutes on the native
+app per session. Articles read per session on the new Progressive Web App was
+also comparable to that on the native app—3 articles vs. 4 articles,
+respectively. “I've started to consume BaBe more through the mobile web than
+through the native app. It's just faster and better. Why would I bother
+downloading an app anymore?” Weihan Liew, BaBe CEO.
diff --git a/src/site/content/en/blog/backdrop-filter/hero.jpg b/src/site/content/en/blog/backdrop-filter/hero.jpg
deleted file mode 100644
index 4c2b603c2ba..00000000000
Binary files a/src/site/content/en/blog/backdrop-filter/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/backdrop-filter/index.md b/src/site/content/en/blog/backdrop-filter/index.md
index 44a093c1689..6d91d65bb6c 100644
--- a/src/site/content/en/blog/backdrop-filter/index.md
+++ b/src/site/content/en/blog/backdrop-filter/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "Create OS-style backgrounds with backdrop-filter"
 subhead: |
   Blurring and color shifting behind an element.
@@ -7,7 +8,7 @@ updated: 2019-08-29
 authors:
   - adamargyle
   - joemedley
-hero: hero.jpg
+hero: image/admin/ltK4SNRultTnkbimOySm.jpg
 alt: A view through a rain-covered foggy window.
 description: |
   Learn how to add background effects like blurring and transparency to UI
@@ -15,29 +16,48 @@ description: |
 tags:
   - blog
   - css
-  - backdrop-filter
+  # - backdrop-filter
+feedback:
+  - api
 ---
 Translucence, blurring, and other effects are useful ways of creating depth while keeping the context of the background content. They support a host of use cases such as frosted glass, video overlays, translucent navigation headers, inappropriate image censoring, image loading, and so on. You may recognize these effects from two popular operating systems: [Windows 10](https://i.kinja-img.com/gawker-media/image/upload/s--9RLXARU4--/c_scale,dpr_2.0,f_auto,fl_progressive,q_80,w_800/trgz8yivyyqrpcnwscu5.png) and [iOS](https://static.businessinsider.com/image/51fd2822eab8eae16e00000b-750.jpg).
 
-<figure class="w-figure">
-  <img src="weather_app.jpg" alt="An example of a frosted glass effect.">
-  <figcaption class="w-figcaption">
-    An example of a frosted glass effect. <a href="https://dribbble.com/shots/733714-Weather-App?list=tags&tag=android" target="_blank" rel="noopener noreferrer">Source</a>.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/mEc6bdwB2ZX6VSXvyJEn.jpg", alt="An example of a frosted glass effect.", width="400", height="300" %}
+  <figcaption>An example of a frosted glass effect. <a href="https://dribbble.com/shots/733714-Weather-App?list=tags&tag=android" target="_blank" rel="noopener noreferrer">Source</a>.</figcaption>
 </figure>
 
 Historically, these techniques were difficult to implement on the web, requiring less than perfect [hacks or workarounds](https://stackoverflow.com/questions/38145368/css-workaround-to-backdrop-filter). In recent years both [Safari](https://webkit.org/blog/3632/introducing-backdrop-filters/) and Edge have provided these capabilities through the `background-filter` (and alternatively, the `-webkit-backdrop-filter`) property, which dynamically blends foreground and background colors based on filter functions. Now Chrome supports `background-filter`, starting in version 76.
 
-<figure class="w-figure w-figure--fullbleed">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure data-size="full">
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-kitchen_sink2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-kitchen_sink2.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+  <figcaption>
     A demonstration of the filter functions for <code>backdrop-filter</code>. Try the example on <a href="https://codepen.io/robinrendle/pen/LmzLEL" target="_blank" rel="noopener">CodePen</a>.
   </figcaption>
 </figure>
 
+## Browser support
+
+{% BrowserCompat 'css.properties.backdrop-filter' %}
+
+For performance reasons, fall back to an image instead of a polyfill when `backdrop-filter` isn't supported. The example below shows this.
+
+```css
+@supports (backdrop-filter: none) {
+	.background {
+		backdrop-filter: blur(10px);
+	}
+}
+
+@supports not (backdrop-filter: none) {
+  .background {
+    background-image: blurred-hero.png;
+  }
+}
+
 ## Basics
 
 - The `backdrop-filter` property applies one or more filters to an element, changing the appearance of anything behind the element.
@@ -50,9 +70,10 @@ Historically, these techniques were difficult to implement on the web, requiring
 
 CSS `backdrop-filter` applies one or more effects to an element that is translucent or transparent. To understand that, consider the images below.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse', 'No foreground transparency' %}
-![A triangle superimposed on a circle. The circle can't be seen through the triangle.](./transparency-off.png)
+{% Img src="image/admin/LOqxvB3qqVkbZBmxMmKS.png", alt="A triangle superimposed on a circle. The circle can't be seen through the triangle.", width="480", height="283" %}
+
 ```css
 .frosty-glass-pane {
   backdrop-filter: blur(2px);
@@ -61,7 +82,8 @@ CSS `backdrop-filter` applies one or more effects to an element that is transluc
 {% endCompare %}
 
 {% Compare 'better', 'Foreground transparency' %}
-![A triangle superimposed on a circle. The triangle is translucent, allowing the circle to be seen through it.](./transparency-on.png)
+{% Img src="image/admin/VbyjpS6Td39E4FudeiVg.png", alt="A triangle superimposed on a circle. The triangle is translucent, allowing the circle to be seen through it.", width="480", height="283" %}
+
 ```css/1
 .frosty-glass-pane {
   opacity: .9;
@@ -73,32 +95,15 @@ CSS `backdrop-filter` applies one or more effects to an element that is transluc
 
 The image on the left shows how overlapping elements would be rendered if `backdrop-filter` were not used or supported. The image on the right applies a blurring effect using `backdrop-filter`. Notice that it uses `opacity` in addition to `backdrop-filter`. Without `opacity`, there would be nothing to apply blurring to. It almost goes without saying that if `opacity` is set to `1` (fully opaque) there will be no effect on the background.
 
-The `backdrop-filter` property is like CSS [filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) in that all your favorite [filter functions](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Filter_functions) are supported: `blur()`, `brightness()`, `contrast()`, `opacity()`, `drop-shadow()`, and so on. It also supports the `url()` function if you want to use an external image as the filter, as well as the keywords `none`, `inherit`, `initial`, and `unset`. There are explanations for all of this on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter), including descriptions of syntax, filters, and values.
-
-When `backdrop-filter` is set to anything other than `none`, the browser creates a new [stacking context](https://www.w3.org/TR/CSS21/zindex.html). A [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) may also be created, but only if the element has absolute and fixed position descendants.
+The `backdrop-filter` property is like CSS [filters](https://developer.mozilla.org/docs/Web/CSS/filter) in that all your favorite [filter functions](https://developer.mozilla.org/docs/Web/CSS/filter#Filter_functions) are supported: `blur()`, `brightness()`, `contrast()`, `opacity()`, `drop-shadow()`, and so on. It also supports the `url()` function if you want to use an external image as the filter, as well as the keywords `none`, `inherit`, `initial`, and `unset`. There are explanations for all of this on [MDN](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter), including descriptions of syntax, filters, and values.
 
-You can combine filters for rich and clever effects, or use just one filter for more subtle or precise effects. You can even combine them with [SVG filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter).
+When `backdrop-filter` is set to anything other than `none`, the browser creates a new [stacking context](https://www.w3.org/TR/CSS21/zindex.html). A [containing block](https://developer.mozilla.org/docs/Web/CSS/Containing_block) may also be created, but only if the element has absolute and fixed position descendants.
 
-## Feature detection and fallback
+You can combine filters for rich and clever effects, or use just one filter for more subtle or precise effects. You can even combine them with [SVG filters](https://developer.mozilla.org/docs/Web/SVG/Element/filter).
 
-As with many features of the modern web, you'll want to know whether the user's browser supports `backdrop-filter` before using it. Do this with `@supports()`. For performance reasons, fall back to an image instead of a polyfill when `backdrop-image` isn't supported. The example below shows this.
-
-```css
-@supports (backdrop-filter: none) {
-	.background {
-		backdrop-filter: blur(10px);
-	}
-}
-
-@supports not (backdrop-filter: none) {
-  .background {
-    background-image: blurred-hero.png;
-  }
-}
-```
 ## Examples
 
-Design techniques and styles previously reserved for native operating systems are now performant and achievable with a single CSS declaration. Let's look at some examples.
+Design techniques and styles previously reserved for operating systems are now performant and achievable with a single CSS declaration. Let's look at some examples.
 
 ### Single filter
 
@@ -111,12 +116,12 @@ In the following example, the frosted effect is achieved by combining color and
 }
 ```
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-rgb2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-rgb2.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Try this example for yourself in <a href="https://codepen.io/netsi1964/pen/JqBLPK" target="_blank" rel="noopener">CodePen</a>.
   </figcaption>
 </figure>
@@ -133,12 +138,12 @@ Sometimes you'll need multiple filters to achieve the desired effect. To do this
 
 In the following example, each of the four panes has a different combination of backdrop filters while the same set of shapes are animated behind them.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-ambient_blur2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-ambient_blur2.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Try this example for yourself in <a href="https://codepen.io/pepf/pen/GqZkdj" target="_blank" rel="noopener">CodePen</a>.
   </figcaption>
 </figure>
@@ -154,19 +159,19 @@ This example shows how to blur a semi-transparent background to make text readab
 }
 ```
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-modal2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-modal2.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Try this <a href="https://mfreed7.github.io/backdrop-filter-feature/examples/scrollable.html" target="_blank" rel="noopener">example</a> for yourself.
   </figcaption>
 </figure>
 
 ### Text contrast on dynamic backgrounds
 
-As stated earlier, `backdrop-filter` allows performant effects that would be difficult or impossible on the web. An example of this is changing a background in respone to an animation. In this example, `backdrop-filter` maintains the high contrast between the text and its background in spite of what's going on behind the text. It starts with the default background color `darkslategray` and uses `backdrop-filter` to invert the colors after the transformation.
+As stated earlier, `backdrop-filter` allows performant effects that would be difficult or impossible on the web. An example of this is changing a background in response to an animation. In this example, `backdrop-filter` maintains the high contrast between the text and its background in spite of what's going on behind the text. It starts with the default background color `darkslategray` and uses `backdrop-filter` to invert the colors after the transformation.
 
 ```css
 .container::before {
@@ -181,22 +186,22 @@ As stated earlier, `backdrop-filter` allows performant effects that would be dif
 }
 ```
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-invert_color2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-invert_color2.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Try this example from <a href="https://www.chenhuijing.com/#%F0%9F%91%9F">Chen Hui Jing</a> in <a href="https://tympanus.net/codrops-playground/huijing/Qqpwg5Iy/editor" target="_blank" rel="noopener">Codrops</a>.
   </figcaption>
 </figure>
 
 ## Conclusion
-More than 560 of you have upvoted the [Chromium bug](https://crbug.com/497522) over the past few years, clearly marking this as a long awaited CSS feature. Chrome's release of `backdrop-filter` in version 76 brings the web a step closer to truly native-like UI presentation.
+More than 560 of you have upvoted the [Chromium bug](https://crbug.com/497522) over the past few years, clearly marking this as a long awaited CSS feature. Chrome's release of `backdrop-filter` in version 76 brings the web a step closer to truly OS-like UI presentation.
 
 ### Additional resources
 - [Specification](https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty)
 - [Chrome Platform Status](https://www.chromestatus.com/feature/5679432723333120)
-- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)
+- [MDN](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)
 - [`background-filter` at CSS Tricks](https://css-tricks.com/the-backdrop-filter-css-property/)
 - [Samples on Codepen](https://codepen.io/tag/backdrop-filter/#)
diff --git a/src/site/content/en/blog/backdrop-filter/translucent-chrome.png b/src/site/content/en/blog/backdrop-filter/translucent-chrome.png
deleted file mode 100644
index 93eef8f6cdc..00000000000
Binary files a/src/site/content/en/blog/backdrop-filter/translucent-chrome.png and /dev/null differ
diff --git a/src/site/content/en/blog/backdrop-filter/transparency-off.png b/src/site/content/en/blog/backdrop-filter/transparency-off.png
deleted file mode 100644
index ad4b0bc3c86..00000000000
Binary files a/src/site/content/en/blog/backdrop-filter/transparency-off.png and /dev/null differ
diff --git a/src/site/content/en/blog/backdrop-filter/transparency-on.png b/src/site/content/en/blog/backdrop-filter/transparency-on.png
deleted file mode 100644
index c7263ff6870..00000000000
Binary files a/src/site/content/en/blog/backdrop-filter/transparency-on.png and /dev/null differ
diff --git a/src/site/content/en/blog/backdrop-filter/weather_app.jpg b/src/site/content/en/blog/backdrop-filter/weather_app.jpg
deleted file mode 100644
index e1236a71330..00000000000
Binary files a/src/site/content/en/blog/backdrop-filter/weather_app.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/badging-api/badges-on-windows.jpg b/src/site/content/en/blog/badging-api/badges-on-windows.jpg
deleted file mode 100644
index 42702dafe1e..00000000000
Binary files a/src/site/content/en/blog/badging-api/badges-on-windows.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/badging-api/hero-2.jpg b/src/site/content/en/blog/badging-api/hero-2.jpg
deleted file mode 100644
index 99fab23ca92..00000000000
Binary files a/src/site/content/en/blog/badging-api/hero-2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/badging-api/index.md b/src/site/content/en/blog/badging-api/index.md
deleted file mode 100644
index f7bf77d4bb0..00000000000
--- a/src/site/content/en/blog/badging-api/index.md
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: Badging for app icons
-subhead: The App Badging API allows installed web apps to set an application-wide badge on the app icon.
-authors:
-  - petelepage
-description: The App Badging API allows installed web apps to set an application-wide badge, shown in an operating-system-specific place associated with the application, such as the shelf or home screen. Badging makes it easy to subtly notify the user that there is some new activity that might require their attention, or it can be used to indicate a small amount of information, such as an unread count.
-date: 2018-12-11
-updated: 2020-07-30
-tags:
-  - blog
-  - capabilities
-  - progressive-web-apps
-  - badging
-  - notifications
-hero: hero-2.jpg
-alt: Neon sign with heart and zero
----
-
-## What is the App Badging API? {: #what }
-
-<figure class="w-figure">
-  <img  src="badges-on-windows.jpg" class="w-screenshot"
-        alt="Example of Twitter with eight notifications and another app showing a flag type badge.">
-  <figcaption class="w-figcaption">
-    Example of Twitter with eight notifications and another app showing a flag
-    type badge.
-  </figcaption>
-</figure>
-
-The App Badging API allows installed web apps to set an application-wide badge,
-shown in an operating-system-specific place associated with the application
-(such as the shelf or home screen).
-
-Badging makes it easy to subtly notify the user that there is new activity
-that might require their attention, or to indicate a small amount of
-information, such as an unread count.
-
-Badges tend to be more user-friendly than notifications, and can be updated
-with a much higher frequency, since they don't interrupt the user. And,
-because they don't interrupt the user, they don't need the user's permission.
-
-### Possible use cases {: #use-cases }
-
-Examples of sites that may use this API include:
-
-* Chat, email, and social apps, to signal that new messages have arrived, or to
-  show the number of unread items.
-* Productivity apps, to signal that a long-running background task (such as
-  rendering an image or video) has completed.
-* Games, to signal that a player action is required (e.g., in Chess, when it
-  is the player's turn).
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [Complete][spec]             |
-| 3. Gather feedback & iterate on design     | Complete                     |
-| 4. Origin trial                            | Complete                     |
-| **5. Launch**                              | **Complete**                 |
-
-</div>
-
-The App Badging API works on Windows, and macOS, in Chrome 81 and later.
-Support for Chrome OS is in development and will be available in a future
-release of Chrome. On Android, the Badging API is not supported. Instead,
-Android automatically shows a badge on app icon for the installed web app
-when there is an unread notification, just as for native apps.
-
-## Try it
-
-1. Using Chrome 81 or later on Windows or Mac, open the
-   [App Badging API demo][demo].
-2. When prompted, click **Install** to install the app, or use the Chrome
-   menu to install it.
-3. Open it as an installed PWA. Note, it must be running as an installed PWA
-   (in your task bar or dock).
-4. Click the **Set** or **Clear** button to set or clear the badge from the app
-   icon. You can also provide a number for the *Badge value*.
-
-## How to use the App Badging API {: #use }
-
-To use the App Badging API, your web app needs to meet
-[Chrome's installability criteria](/install-criteria/#criteria),
-and users must add it to their home screens.
-
-The Badge API consists of two methods on `navigator`:
-
-* `setAppBadge(`*`number`*`)`: Sets the app's badge. If a value is provided, set the
-  badge to the provided value otherwise, display a plain white dot (or other
-  flag as appropriate to the platform). Setting *`number`* to `0` is the same as
-  calling `clearAppBadge()`.
-* `clearAppBadge()`: Removes app's badge.
-
-Both return empty promises you can use for error handling.
-
-The badge can either be set from the current page, or from the registered
-service worker. To set or clear the badge (in either the foreground page or
-the service worker), call:
-
-```js
-// Set the badge
-const unreadCount = 24;
-navigator.setAppBadge(unreadCount).catch((error) => {
-  //Do something with the error.
-});
-
-// Clear the badge
-navigator.clearAppBadge().catch((error) => {
-  // Do something with the error.
-});
-```
-
-In some cases, the OS may not allow the exact representation of the badge.
-In such cases, the browser will attempt to provide the best representation for
-that device. For example, because the Badging API isn't supported on Android,
-Android only ever shows a dot instead of a numeric value.
-
-Don't assume anything about how the user agent displays the badge.
-Some user agents may take a number like "4000" and rewrite it as
-"99+". If you saturate the badge yourself (for example by setting it to "99")
-then the "+" won't appear. No matter the actual number, just call
-`setAppBadge(unreadCount)` and let the user agent deal with
-displaying it accordingly.
-
-While the App Badging API *in Chrome* requires an installed app, you shouldn't
-make calls to the Badging API dependent on the install state. Just call the
-API when it exists, as other browsers may show the badge in other places.
-If it works, it works. If not, it simply doesn't.
-
-## Setting and clearing the badge in the background from a service worker
-
-You can also set the app badge in the background using the service worker,
-allowing them to be updated even when the app isn't open. Do this either
-through the Push API, periodic background sync, or a combination of both.
-
-### Periodic background sync
-
-[Periodic background sync](/periodic-background-sync/) allows a service worker
-to periodically poll the server, which could be used to get an updated status,
-and call `navigator.setAppBadge()`.
-
-However, the frequency at which the sync is called isn't perfectly reliable,
-and is called the at discretion of the browser.
-
-### Web Push API
-
-The [Push API][push-api] allows servers to send messages to service workers,
-which can run JavaScript code even when no foreground page is running. Thus,
-a server push could update the badge by calling `navigator.setAppBadge()`.
-
-However, most browsers, Chrome included, require a notification to be
-displayed whenever a push message is received. This is fine for some use
-cases (for example showing a notification when updating
-the badge) but makes it impossible to subtly update the badge without
-displaying a notification.
-
-In addition, users must grant your site notification permission in order to
-receive push messages.
-
-### A combination of both
-
-While not perfect, using Push API and periodic background sync together
-provide a good solution. High priority information is delivered via the Push
-API, showing a notification and updating the badge. And lower priority
-information is delivered by updating the badge, either when the page is open,
-or via periodic background sync.
-
-### The future
-
-The Chrome team is investigating ways to more reliably [update the app badge in
-the background](https://github.com/w3c/badging/blob/master/explainer.md#background-updates),
-and wants to hear from you. Let them know what works best for your
-use case by commenting on the
-[Notification Background Updates](https://github.com/w3c/badging/issues/28)
-issue.
-
-## Feedback {: #feedback }
-
-The Chrome team wants to hear about your experiences with the App Badging API.
-
-### Tell us about the API design
-
-Is there something in the API that doesn't work as you expected? Or are
-there missing methods or properties that you need to implement your idea?
-Do you have a question or comment on the security model?
-
-* File a spec issue on the [Badging API GitHub repo][issues], or add your
-  thoughts to an existing issue.
-
-### Report a problem with the implementation
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-* File a bug at <https://new.crbug.com>. Be sure to include as much detail as
-  you can, simple instructions for reproducing, and set **Components** to
-  `UI>Browser>WebAppInstalls`. [Glitch](https://glitch.com) works great for
-  sharing quick and easy reproductions.
-
-### Show support for the API
-
-Planning to use the App Badging API on your site? Your public support helps the
-Chrome team to prioritize features, and shows other browser vendors how critical
-it is to support them.
-
-* Send a Tweet to [@ChromiumDev](https://twitter.com/chromiumdev) tagged with
-  `#badgingapi` and let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [Badging API Demo][demo] | [Badging API Demo source][demo-source]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: `UI>Browser>WebAppInstalls`
-
-Hero [photo](https://unsplash.com/photos/xv7-GlvBLFw) by
-[Prateek Katyal](https://unsplash.com/@prateekkatyal) on
-[Unsplash](https://unsplash.com/)
-
-[spec]: https://wicg.github.io/badging/
-[issues]: https://github.com/WICG/badging/issues
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=719176
-[cr-status]: https://www.chromestatus.com/feature/6068482055602176
-[demo]: https://badging-api.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/badging-api?path=demo.js
-[explainer]: https://github.com/WICG/badging/blob/master/explainer.md
-[push-api]: https://www.w3.org/TR/push-api/
diff --git a/src/site/content/en/blog/baseline-features/index.md b/src/site/content/en/blog/baseline-features/index.md
new file mode 100644
index 00000000000..bc2053a542e
--- /dev/null
+++ b/src/site/content/en/blog/baseline-features/index.md
@@ -0,0 +1,133 @@
+---
+layout: post
+title: "Baseline features you can use today"
+subhead: >
+  Learn about just some of the features that are part of Baseline.
+description: >
+  Learn about just some of the features that are part of Baseline.
+date: 2023-05-10
+hero: 'image/kheDArv5csY6rvQUJDbWRscckLr1/Gv27TPZQF9EPSZIDmpHZ.png'
+alt: The Baseline supported icon and the wordmark.
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/j1MZvXQ8fY232Q1z5El0.png
+is_baseline: true
+authors:
+  - kosamari
+tags:
+  - blog
+---
+
+{% YouTube "x9rh0Du4Czg" %}
+
+The web is always evolving and browsers update constantly to give developers new tools to innovate on the platform. Things that previously required helper libraries become part of the web platform and supported on all browsers, along with shorter or easier ways to code design elements.
+
+While this constant evolution and adaptation is helpful, it can also bring confusion. It can be difficult to navigate all these updates. As developers, we have questions like, "When will all browser engines support this new feature?" "When can I actually start using those features in my production code?" "For how long should we support older browsers?" 
+
+The true answer is "it depends". What is needed and what is usable really depends on your user base, tech stack, your team structure, and supported devices. But, one thing we all agree, is that the current landscape of the web can make it difficult to make those decisions.
+
+The Chrome team is collaborating with other browser engines and the web community to bring more clarity. This includes our work on projects like [Interop 2023](https://wpt.fyi/interop-2023) which helps to improve interoperability of a set of key features. But what about features landed in the past few years? Are experimental features we learned about two years ago ready to use?
+
+In this post, I want to highlight some features that are now available to all major browser engines for the past two major versions. This is the cut-off point where we feel that the majority of developers will feel a feature is safe to use, and is the feature set we're calling Baseline. For more, please see the announcement [of Baseline here](/baseline). 
+
+## The dialog element
+
+The `<dialog>` element is a new HTML element to create dialog prompts such as popups and modals.
+
+{% BrowserCompat 'html.elements.dialog' %}
+
+To use it, define the modal element, then open the dialog by calling the `showModal()` method on the dialog element. 
+
+```html
+<dialog id="d">
+  <form method="dialog">
+    <p>Hi, I'm a dialog.</p>
+    <button>ok</button>
+  </form>
+</dialog>
+
+<button onclick="d.showModal()">
+  Open Dialog
+</button>
+```
+
+As a native HTML element, features like focus management, tab tracking, and keeping the stacking context are built in.  For more, read [Building a dialog component](/building-a-dialog-component/).
+
+## Individual CSS transform properties
+
+Using CSS transforms is a performant way to add a movement to your site.   
+You might be familiar with writing CSS transforms with three properties in one line.   
+With individual transform properties you can now specify transform properties individually. This comes in handy when you are writing complex keyframe animations. 
+
+```css
+.target {
+  translate: 50% 0;
+  rotate: 30deg;
+  scale: 1.2;
+}
+```
+
+{% BrowserCompat 'css.properties.scale' %}
+
+For an in-depth explanation of this change, read [Finer grained control over CSS transforms with individual transform properties](/css-individual-transform-properties/).
+
+## New viewport units
+
+On mobile, viewport size is influenced by the presence or absence of dynamic toolbars.   
+Sometimes you have a URL bar and navigation toolbar visible, but sometimes those toolbars are completely retracted.   
+The actual size of viewport will be different depending on whether the toolbars are visible or not.  
+New viewport units like `svh` and `lvh` give web developers finer control when designing for the mobile. You can learn more in the article [The large, small, and dynamic viewport units](/viewport-units/).
+
+{% BrowserCompat 'css.types.length.viewport_percentage_units_large' %}
+
+## Deep copy in JavaScript
+
+In the past, to create a deep copy of an object with no reference to the original object, a popular hack was `JSON.stringify` combined with `JSON.parse`. This was such a common hack that V8 (Chrome's javascript engine) aggressively improved the performance of this trick. But, you don't need this hack anymore with `structuredClone`.
+
+```js
+const original = {id: 0, prop: {name: "Tom"}}
+
+/* Old hack */ 
+const deepCopy = JSON.parse(JSON.stringify(original));
+
+/* New way */
+const deepCopy = structuredClone(original);
+```
+
+{% BrowserCompat 'api.structuredClone' %}
+
+Please refer to [Deep-copying in JavaScript using structuredClone](/structured-clone/) for more details.
+
+## The `:focus-visible` pseudo-class
+
+As web developers, we all are familiar with that "focus ring" that shows up when you are navigating a page with a keyboard or clicking on input elements. It is a necessary feature for accessibility but sometimes it gets in the way of the visual design for different users. The `:focus-visible` CSS pseudo-class checks if the browser believes that the focus should be visible.  You can now specify styles for only when focus should be visible. 
+
+```css
+/* focus with tab key */
+:focus-visible {
+    outline: 5px solid pink;
+}
+
+/* mouse click */
+:focus:not(:focus-visible) {
+    outline: none;
+}
+```
+
+{% BrowserCompat 'css.selectors.focus-visible' %}
+
+Check out the [Focus section on Learn CSS](/learn/css/focus/) for more information. 
+
+## The TransformStream interface
+
+The TransformStream interface of the Streams API makes it possible to pipe streams into one another. 
+
+For example you can stream data from one place, then compress the data stream to another location as the data gets passed. The article [Streaming requests with the fetch API](https://developer.chrome.com/articles/fetch-streaming-requests/) walks you through this sample use case. 
+
+{% BrowserCompat 'api.TransformStream' %}
+
+## Wrap up
+
+There are many more features that recently became interoperable and stable to use on the web platform. Going forward we will work with the [WebDX Community Group](https://www.w3.org/community/webdx/) to bring more clarity to these Baseline feature sets. Please check out [web.dev/baseline](/baseline/) for ongoing details. 
+
+If you want to stay up-to-date, our team is publishing articles [when a feature becomes interoperable](/tags/newly-interoperable/), and publish [monthly updates on what's going on the web platform](/tags/new-to-the-web/) from experimental features to newly interoperable.   
+  
+We are always curious if what we are doing helps you, or if you need different kinds of support, so please reach out to us at [WebDX Community Group](https://www.w3.org/community/webdx/).
diff --git a/src/site/content/en/blog/bbc-hsts/index.md b/src/site/content/en/blog/bbc-hsts/index.md
new file mode 100644
index 00000000000..2c218afa8bc
--- /dev/null
+++ b/src/site/content/en/blog/bbc-hsts/index.md
@@ -0,0 +1,78 @@
+---
+title: How the BBC is rolling out HSTS for better security and performance.
+subhead: |
+  The BBC is rolling out HSTS for their website to improve security and performance. Find out what it means, and how HSTS can help you.
+authors:
+  - jlwagner
+date: 2022-07-25
+description: |
+  The BBC is rolling out HSTS for their website to improve security and performance. Find out what it means, and how HSTS can help you.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/BbUZ7XxZ991yp4lpD5Tr.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ew6tI1HdAi2g3vxQwdfM.png
+alt: The BBC logo set on a black background.
+tags:
+  - blog
+  - security
+  - performance
+---
+
+HTTPS adoption has been steadily increasing in recent years. Per the HTTP Archive's 2021 Web Almanac, [around 91% of all requests for both desktop and mobile were served over HTTPS](https://almanac.httparchive.org/en/2021/security#transport-security). HTTPS isn't just here to stay, it's a necessary prerequisite to use features such as [Service Worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and modern protocols such as [HTTP/2](/performance-http2/) and [HTTP/3](https://www.cloudflare.com/learning/performance/what-is-http3/).
+
+Recently [Neil Craig](https://twitter.com/tdp_org)&mdash;a lead technical Architect at the BBC&mdash;[tweeted that HTTP Strict Transport Security (HSTS) is being slowly rolled out](https://twitter.com/tdp_org/status/1549028675328573440?s=20&t=S5mm1eEqGUbxZ4jfi-SvtA) for [bbc.com](https://www.bbc.com/). Let's find out what that means for the BBC, and what it could mean for you.
+
+## The problem
+
+Web servers often listen for requests on both ports 80 and 443. Port 80 is for insecure HTTP requests, whereas 443 is for secure HTTPS. This can create a problem, because when you enter an address into your address bar without the `https://` protocol prefix&mdash;like most users tend to do&mdash;some browsers will direct traffic to the insecure HTTP version of a site, for legacy reasons ([though this isn't always the case](https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html)).
+
+A common way to ensure users don't access an unsecured version of a website is to place an HTTP-to-HTTPS redirect for all requests. This certainly works, but it kicks off the following chain of events:
+
+1. The server receives a request via HTTP.
+2. The server issues a redirect to go to the HTTPS equivalent of the requested resource.
+3. The server via HTTPS must negotiate a secure connection with the browser.
+4. The content loads as usual.
+
+While redirects work fine, they can be misconfigured in ways that still allow access to the insecure version of a site. Even if everything _is_ configured properly, there is still a security issue in that the user will still connect over insecure HTTP during the redirect phase, which exposes users to the possibility of dangerous [man-in-the-middle attacks](https://en.wikipedia.org/wiki/Man-in-the-middle_attack).
+
+## Enter HSTS
+
+{% BrowserCompat 'http.headers.Strict-Transport-Security' %}
+
+[HSTS](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) is dictated by the `Strict-Transport-Security` HTTP response header for HTTPS requests. When set, return visits to a website will trigger a special redirect known as a "307 Internal Redirect", which is when the browser handles the redirect logic, rather than the server. This prevents the request being intercepted, since it never leaves the browser, so is more secure. As an added bonus, these types of redirect are extremely fast, so any noticeable latency during an HTTP-to-HTTPS hop is eliminated.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RCCZMoqNd4aLb91Uj1hx.png", alt="A 307 internal redirect from HTTP to HTTPS, triggered by an HSTS header. The 307 redirect only takes 2 milliseconds.", width="800", height="84" %}
+</figure>
+
+Similar in syntax to `Cache-Control`'s `max-age` directive, an HSTS header specifies a `max-age` directive. This directive takes a value in seconds that specifies how long the policy is effective for:
+
+```http
+Strict-Transport-Security: max-age=3600
+```
+
+In the above example, the policy should only take effect for an hour.
+
+## Deploying HSTS
+
+{% Aside 'caution' %}
+Take care to read the information in this section **very carefully** before you decide to deploy HSTS! Botching an HSTS deployment can result in serious problems for users!
+{% endAside %}
+
+The main drawback of deploying HSTS is if you're not ready to treat your origin as strictly secure. Let's say you have a number of subdomains you're serving resources from, but maybe not all of them are secure. In this scenario, **an HSTS header could break your website.**
+
+The BBC took the right approach to deploying HSTS. As [Neil Craig](https://twitter.com/tdp_org) mentioned in his tweet, the initial value that was set for bbc.com was `max-age=10`.
+
+This approach means that the policy was only initially effective for ten seconds. This doesn't provide much of a benefit, but the idea is to feel out whether there may be issues with applying HSTS at all. As time goes on, you can increase the policy incrementally and see if issues occur. At the time of this writing, bbc.com is specifying an HSTS policy of `max-age=86400`, and that will almost certainly increase over time.
+
+You certainly don't want to come out of the gate with a long `max-age` value when deploying HSTS. You could find yourself suddenly scrambling to fix issues while users experience problems. **Start small, and increment over time!** When you're confident all is well, you can set your `max-age` directive to a much longer period of time. It is [recommended to set `max-age` to one or two years](https://hstspreload.org/#deployment-recommendations) when it is fully rolled out.
+
+## Get safer and faster initial navigations with the HSTS preload list
+
+An HSTS policy only takes effect after the first visit to a website, so the benefits are not present for the first visit to the site. This will still require the insecure redirect. However, you can _preload_ your HSTS policy by submitting your website to the [HSTS preload list](https://hstspreload.org/), which is a hardcoded list of websites that the browser knows are strictly HTTPS. When your site is on the preload list, the first visit is also protected and HTTP-to-HTTPS redirect latency via HSTS will be instantaneous.
+
+{% Aside %}
+If you have a domain with a `.dev` top level domain (TLD), your website is already protected by HSTS as the whole `.dev` TLD has been included in preload list. It will already be assumed as strictly secure by the browser and is required to have a valid SSL certificate to function at all.
+{% endAside %}
+
+## Try it out for yourself
+
+If the BBC feels comfortable testing out HSTS, there's a good chance that you can do the same for your website. Give it a shot for your website, and&mdash;if you're looking to rev things up&mdash;add it to the HSTS preload list when you're confident there are no bugs to give your users a safer _and_ faster experience.
diff --git a/src/site/content/en/blog/bear71/index.md b/src/site/content/en/blog/bear71/index.md
new file mode 100644
index 00000000000..cce741d740e
--- /dev/null
+++ b/src/site/content/en/blog/bear71/index.md
@@ -0,0 +1,122 @@
+---
+layout: post
+title: Bear 71 and WebVR
+date: 2017-02-02
+updated: 2017-11-06
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FBL4BUBX7fnvrpwfJWSX.png", alt="Bear 71 screenshot", width="800", height="382" %}
+</figure>
+
+[View the documentary](https://bear71vr.nfb.ca/)
+
+[WebVR is an API](https://developer.chrome.com/blog/ar-for-the-web/) built into browsers that combines
+stereo rendering with real-time head tracking, enabling a quick and easy way to
+enjoy VR content online. With WebVR, content creators can create immersive VR
+content that lives online and runs on a wide range of VR hardware.
+
+## About Bear 71
+
+*Bear 71* is an interactive documentary produced by the National Film Board
+(NFB) of Canada. Originally built in Flash, *Bear 71* was released in 2011 to
+critical acclaim. The backbone of the experience is a 23 minute track of audio
+and video, highlighting the relationship between humans, nature, technology, and
+one particular brown bear. The viewer is a voyeur in a world of information
+represented as an abstract grid of symbols. Surprisingly, this doesn't hamper
+the emotional story within, and it should be experienced first-hand to be
+understood.
+
+## Challenge
+
+The original *Bear 71* was developed in Flash; arguably the best interactive
+storytelling medium of the time. A lot of care went into the technology and it
+was considered cutting edge. Five years later, the original vision holds up and
+the story is still relevant, but the technology behind it needs an update. Any
+technology, used creatively, can assist a good story, but virtual reality
+deserves special attention. VR has come and gone several times before, but it's
+finally arrived in the mainstream. This is a huge opportunity for storytelling.
+Stories which traditionally happened in front of you, can now happen around you
+in VR.
+
+When *Bear 71* was built, Adobe Flash was in its golden years. Each passing year,
+Flash's market share shrinks, and with that, previously accessible works are
+harder and harder to view. But with Flash's decline has come the maturation of
+HTML 5. Furthermore, VR is being taken more seriously than ever as a real
+platform for storytelling.
+
+To our eyes and ears, VR is naturally immersive, but VR has several barriers in
+its way. At first glance, the variety of headsets should suit many needs and
+budgets, and the variety of app stores involved in distribution is more choice.
+But users are known to prefer to do as much in a browser as possible. Users
+prefer to download and install as little as possible. For users and content
+creators alike, the appeal of HTML5 is the fact that rich experiences are just
+one URL away. This is where WebVR comes in.
+
+WebVR enables immersive and comfortable VR content in your browser, across a
+multitude of software and hardware.
+
+The NFB recognized this opportunity and considered giving *Bear 71* a new life in
+HTML5 and WebVR. This opportunity wouldn't be without a new challenge common to
+many VR projects: How do we achieve beautiful things, at good framerates, in
+stereo vision, on various platforms including mobile phones?
+
+
+## Solution
+
+During the start of development in late 2016, WebVR was not yet readily
+available. The WebVR API is evolving quickly, and the WebVR standard is
+currently being drafted. But that didn't stop the community from patching
+together a suitable stopgap: the
+[WebVR polyfill](https://github.com/googlevr/webvr-polyfill). It provided
+useable head tracking and stereo rendering via the gyroscope and WebGL. This
+polyfill, along with Google Cardboard, allowed us to start building and testing
+content. When Google Pixel and Daydream View became available, along with the
+first real builds of WebVR in Chrome, our content was ready to take advantage of
+it. For quick development, we still include and use the polyfill where WebVR is
+not yet available. For instance, we do much of our developing and debugging on
+Chrome 55's mobile emulator. Also, it was common to develop and debug on
+whatever was readily available, including but not limited to HTC One M9, iPhone
+5S, Samsung Galaxy and of course Pixel by Google. The versatility of the
+polyfill cannot be understated.
+
+Despite the polyfill's utility, some essential WebVR features simply cannot be
+emulated. It's worth noting that one of the biggest hurdles that VR faces is
+motion sickness. Motion sickness is tied to, among many things, frame rates and
+speed and accuracy of head tracking. WebVR has a few essential features like
+reprojection and high-speed orientation sensors. That said, maintaining high
+frame rates is still the responsibility of the content creators. Since WebVR
+requires rendering the scene twice (once for each eye) per frame, optimization
+is doubly important. Properly optimizing your WebGL content is outside the scope
+of this article, but here are a few key points:
+
+- Reduce your draw calls. A great way of doing this is merging elements that
+  share a material.
+- Keep your shaders simple. Standard materials and shaders do a great job of
+  optimizing out unused features, but sometimes writing brutally optimized
+  shaders by hand is the best way.
+- Keep your draw distance close and use fog effectively.
+- Prefer texture-based text, which reads better and renders faster than text
+  geometry.
+- Be sure your art style is economical to render. It's better to look like
+  *Super Mario 64* at 60fps than *Mario Galaxy* at 6 fps.
+- Treat the user as a solipsistic: find ways to only simulate the world around the
+  player.
+- Look for opportunities to cache results of expensive computations in typed
+  arrays. Memory is often cheaper than processing power.
+
+This is not an exhaustive list, but it covers most of the optimizations we
+used to run at good framerates across most devices.
+
+Creating, repurposing and optimizing the content spanned roughly 12 weeks for a
+small team of 8 merry contributors. The effort was both intense and painless.
+*Bear 71* VR has already made limited appearances at 2 film festivals, with
+positive feedback. For those of you not able to find it in the festival circuit,
+WebVR can bring the experience to you in the comfort of your browser. If you're
+considering a new creative project, remember: the Web is a delivery platform for
+rich content that we shouldn't take for granted. VR is here to transport us into
+new worlds of our invention. And WebVR is here to combine the best of both.
diff --git a/src/site/content/en/blog/better-layout-shift-metric/index.md b/src/site/content/en/blog/better-layout-shift-metric/index.md
new file mode 100644
index 00000000000..5144b3ebd7c
--- /dev/null
+++ b/src/site/content/en/blog/better-layout-shift-metric/index.md
@@ -0,0 +1,204 @@
+---
+title: "Feedback wanted: The road to a better layout shift metric for long-lived pages"
+subhead: Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback.
+description: |
+  Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback.
+authors:
+  - anniesullie
+  - mmocny
+date: 2021-01-25
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: An example windowing approach for measuring layout shift.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Cumulative Layout Shift](/cls) (CLS) is a metric that measures the visual stability of a web page. The metric is called cumulative layout shift because the score of every individual shift is summed throughout the lifespan of the page.
+
+While all layout shifts are poor user experiences, they do add up more on pages that are open longer. That's why the Chrome Speed Metrics Team set out to improve the CLS metric to be more neutral to the time spent on a page.
+
+It's important that the metric focuses on user experience through the full page lifetime, as we've found that users often have negative experiences after load, while scrolling or navigating through pages. But we've heard concerns about how this impacts long-lived pages—pages which the user generally has open for a long time. There are several different types of pages which tend to stay open longer; some of the most common are social media apps with infinite scroll and single-page applications. 
+
+An internal analysis of long-lived pages with high CLS scores found that most problems were caused by the following patterns:
+
+- [Infinite scrollers shifting content](https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/) as the user scrolls.
+- Input handlers taking longer than 500 ms to update the UI in response to a user interaction, without any kind of placeholder or skeleton pattern.
+
+While we encourage developers to improve those user experiences, we're also working towards improving the metric and looking for feedback on possible approaches.
+
+## How would we decide if a new metric is better?
+Before diving into metric design, we wanted to ensure that we evaluated our ideas on a wide variety of real-world web pages and use cases. To start, we designed a small user study.
+
+First, we recorded videos and [Chrome traces](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool) of 34 user journeys through various websites. In selecting the user journeys, we aimed for a few things:
+
+- A variety of different types of sites, such as news and shopping sites.
+- A variety of user journeys, such as initial page load, scrolling, single-page app navigations, and user interactions.
+- A variety of both number and intensity of individual layout shifts on the sites.
+- Few negative experiences on the sites apart from layout shifts.
+
+We asked 41 of our colleagues to watch two videos at a time, rating which of the pair was better in terms of layout shift. From these ratings, we created an idealized ranking order of the sites. The results of the user ranking confirmed our suspicions that our colleagues, like most users, are really frustrated by layout shifts after load, especially during scrolling and single-page app navigations. We saw that some sites have much better user experiences during these activities than others.
+
+Since we recorded Chrome traces along with the videos, we had all the details of the individual layout shifts in each user journey. We used those to compute metric values for each idea for each user journey. This allowed us to see how each metric variant ranked the user journeys, and how different each was from the ideal ranking.
+
+## What metric ideas did we test?
+
+### Windowing strategies
+
+Often pages have multiple layout shifts bunched closely together, because elements can shift multiple times as new content comes in piece by piece. This prompted us to try out techniques for grouping shifts together. To accomplish that, we looked at three windowing approaches:
+
+- Tumbling windows
+- Sliding windows
+- Session windows
+
+In each of these examples, the page has layout shifts of varying severity over time. Each blue bar represents a single layout shift, and the length represents the [score](/cls/#layout-shift-score) of that shift. The images illustrate the ways different windowing strategies group the layout shifts over time.
+
+#### Tumbling windows
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Example of a tumbling window.
+  </figcaption>
+</figure>
+
+The simplest approach is just to break the page into windows of equal-sized chunks. These are called tumbling windows. You'll notice above that the fourth bar really looks like it should be grouped into the second tumbling window, but because the windows are all a fixed size it is in the first window instead. If there are slight differences in timing of loads or user interactions on the page, the same layout shifts might fall on different sides of the tumbling window boundaries.
+
+#### Sliding windows
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Example of a sliding window.
+  </figcaption>
+</figure>
+
+An approach that lets us see more possible groupings of the same length is to continuously update the potential window over time. The image above shows one sliding window at a time, but we could look at all possible sliding windows or a subset of them to create a metric.
+
+#### Session windows
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Example of a session window.
+  </figcaption>
+</figure>
+
+If we wanted to focus on identifying areas of the page with bursts of layout shifts, we could start each window at a shift, and keep growing it until we encountered a gap of a given size between layout shifts. This approach groups the layout shifts together, and ignores most of the non-shifting user experience. One potential problem is that if there are no gaps in the layout shifts, a metric based on session windows could grow unbounded just like the current CLS metric. So we tried this out with a maximum window size as well.
+
+### Window sizes
+
+The metric might give very different results depending on how big the windows actually are, so we tried multiple different window sizes:
+
+- Each shift as its own window (no windows)
+- 100 ms
+- 300 ms
+- 1 second
+- 5 seconds
+
+### Summarization
+
+We tried out many ways to summarize the different windows.
+#### Percentiles
+
+We looked at the maximum window value, as well as the 95th percentile, 75th percentile, and median.
+
+#### Average
+
+We looked at the mean window value.
+
+#### Budgets
+
+We wondered if maybe there was some minimum layout shift score that users wouldn't notice, and we could just count layout shifts over that "budget" in the score. So for various potential "budget" values, we looked at the percentage of shifts over budget, and the total shift score over budget.
+
+### Other strategies
+
+We also looked at many strategies that didn't involve windows, like the total layout shift divided by time on page, and the average of the worst N individual shifts.
+
+## The initial results
+
+Overall, we tested **145 different metric definitions** based on permutations of the above ideas. For each metric, we ranked all the user journeys by their score on the metric, and then ranked the metrics by how close they were to the ideal ranking.
+
+To get a baseline, we also ranked all the sites by their current CLS score. CLS placed 32nd, tied with 13 other strategies, so it was better than most permutations of the strategies above. To ensure the results were meaningful, we also added in three random orderings. As expected, the random orderings did worse than every strategy tested.
+
+To understand if we might be overfitting for the data set, after our analysis we recorded some new layout shift videos and traces, manually ranked those, and saw that the metric rankings were very similar for the new data set and the original one. 
+
+A few different strategies stood out in the rankings.
+
+### Best strategies
+
+When we ranked the strategies, we found that three types of strategies topped the list. Each had roughly the same performance, so we plan to move forward with a deeper analysis on all three. We'd also like to hear developer feedback to understand if there are factors outside of user experience we should be considering when deciding between them. (See below for how to give feedback.)
+
+#### High percentiles of long windows
+
+A few windowing strategies worked well with long window sizes:
+
+- 1 second sliding windows
+- Session windows capped at 5 seconds with 1 second gap
+- Session windows uncapped with 1 second gap
+
+These all ranked really well at both the 95th percentile and the maximum.
+
+But for such large window sizes, we were concerned about using the 95th percentile—often we were looking at only 4-6 windows, and taking the 95th percentile of that is a lot of interpolation. It's unclear what the interpolation is doing in terms of the metric value. The maximum value is a lot clearer, so we decided to move forward with checking the maximum.
+
+#### Average of session windows with long gaps
+
+Averaging the scores of all uncapped session windows with 5 second gaps between them performed really well. This strategy has a few interesting characteristics:
+
+- If the page doesn't have gaps between layout shifts, it ends up being one long session window with the exact same score as the current CLS.
+- This metric didn't take idle time into account directly; it only looked at the shifts that happened on the page, and not at points in time when the page was not shifting.
+
+#### High percentiles of short windows
+
+The maximum 300 ms sliding window ranked very highly, as well as the 95th percentile. For the shorter window size, there is less percentile interpolation than larger window sizes, but we were also concerned about "repeat" sliding windows—if a set of layout shifts occurs over two frames, there are multiple 300 ms windows that include them. Taking the maximum is much clearer and simpler than taking the 95th percentile one. So again we decided to move forward with checking the maximum.
+
+### Strategies that didn't work out
+
+Strategies that tried to look at the "average" experience of time spent both without layout shifts and with layout shifts did very poorly. None of the median or 75th percentile summaries of any windowing strategy ranked the sites well. Neither did the sum of layout shifts over time.
+
+We evaluated a number of different "budgets" for acceptable layout shifts:
+- Percent of layout shifts above some budget. For various budgets, these all ranked quite poorly.
+- Average layout shift above some excess. Most variations on this strategy did poorly, but average excess over a long session with a large gap did almost as well as the average of session windows with long gaps. We decided to move forward with only the latter because it is simpler.
+
+## Next steps
+
+### Larger-scale analysis
+
+We've implemented the top strategies listed above in Chrome, so that we can get data on real-world usage for a much larger set of websites. We plan to use a similar approach of ranking sites based on their metric scores to do the larger-scale analysis:
+
+- Rank all the sites by CLS, and by each new metric candidate.
+  - Which sites are ranked most differently by CLS and each candidate? Do we find anything unexpected when we look at these sites?
+  - What are the largest differences between the new metric candidates? Do any of the differences stand out as advantages or disadvantages of a specific candidate?
+- Repeat the above analysis, but bucketing by time spent on each page load. Do we see an expected improvement for long-lived page loads with acceptable layout shift? Do we see any unexpected results for short-lived pages?
+
+### Feedback on our approach
+
+We'd love to get feedback from web developers on these approaches. Some things to keep in mind while considering the new approaches:
+
+#### What's not changing
+
+We do want to clarify that a lot of things will not be changing with a new approach:
+
+- None of our metric ideas change the way layout shift scores for [individual frames are calculated](/cls/#layout-shift-score), only the way we summarize multiple frames. This means that the [JavaScript API](/cls/#measure-cls-in-javascript) for layout shifts will stay the same, and the underlying events in Chrome traces that developer tools use will also stay the same, so layout shift rects in tools like WebPageTest and Chrome DevTools will continue to work the same way.
+- We'll continue to work hard on making the metrics easy for developers to adopt, including them in the [web-vitals library](https://github.com/GoogleChrome/web-vitals), documenting on [web.dev](/metrics), and reporting them in our developer tooling like Lighthouse.
+
+#### Trade-offs between metrics
+One of the top strategies summarizes the layout shift windows as an average, and the rest report the maximum window. For pages which are open a very long time, the average will likely report a more representative value, but in general it will likely be easier for developers to act on a single window—they can log when it occurred, the elements that shifted, and so on. We'd love feedback on which is more important to developers.
+
+Do you find sliding or session windows easier to understand? Are the differences important to you?
+
+#### How to give feedback
+
+You can try out the new layout shift metrics on any site using our [example JavaScript implementations](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) or our [fork of the Core Web Vitals extension](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Please email feedback to our **[web-vitals-feedback](https://groups.google.com/g/web-vitals-feedback)** Google group, with "[Layout Shift Metrics]" in the subject line. We're really looking forward to hearing what you think!
diff --git a/src/site/content/en/blog/better-responsiveness-metric/index.md b/src/site/content/en/blog/better-responsiveness-metric/index.md
new file mode 100644
index 00000000000..013a5710f83
--- /dev/null
+++ b/src/site/content/en/blog/better-responsiveness-metric/index.md
@@ -0,0 +1,514 @@
+---
+layou: post
+title: Towards a better responsiveness metric
+subhead: Learn about our thoughts on measuring responsiveness and give us feedback.
+description: Learn about our thoughts on measuring responsiveness and give us feedback.
+authors:
+  - npm
+  - anniesullie
+  - hbsong
+date: 2021-06-21
+updated: 2022-05-11
+hero: image/kns0INkO77RkiEStzHWYrugyWj32/TwRpOuLV9Z5GEZkGmAXi.jpeg
+alt: Hand about to press a key in a keyboard
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside 'important' %}
+This article was written during a period of time in which a new responsiveness metric was being developed to measure end-to-end latency on web pages. That new metric has been released, and is named [Interaction to Next Paint (INP)](/inp/).
+{% endAside %}
+
+On the Chrome Speed Metrics team, we're working on deepening our understanding of how quickly web
+pages respond to user input. We'd like to share some ideas for improving responsiveness metrics and
+hear your feedback.
+
+This post will cover two main topics:
+
+1. Review our current responsiveness metric, First Input Delay (FID), and explain why we chose FID
+   rather than some of the alternatives.
+2. Present some improvements we've been considering that should better capture the end-to-end
+   latency of individual events. These improvements also aim to capture a more
+   holistic picture of the overall responsiveness of a page throughout its lifetime.
+
+## What is First Input Delay?
+
+The [First Input Delay (FID)](/fid/) metric measures how long it takes the browser to begin
+processing the first user interaction on a page. In particular, it measures the difference between
+the time when the user interacts with the device and the time when the browser is actually able to
+begin processing event handlers. FID is just measured for taps and key presses, which means that it
+only considers the very first occurrence of the following events:
+
+* `click`
+* `keydown`
+* `mousedown`
+* `pointerdown` (only if it is followed by `pointerup`)
+
+The following diagram illustrates FID:
+
+{% Img src="image/kns0INkO77RkiEStzHWYrugyWj32/Jn1Xkxxf03O1llwutAq2.jpeg", alt="First Input Delay
+measures from when input occurs to when input can be handled", width="800", height="330" %}
+
+FID does not include the time spent running those event handlers, nor any work done by the browser
+afterwards to update the screen. It measures the amount of time the main thread was busy before
+having the chance to handle an input. This blocking time is usually caused by long JavaScript tasks,
+as these can't just be stopped at any time, so the current task must complete before the browser can
+start processing the input.
+
+### Why did we choose FID?
+
+We believe it is important to measure actual user experience in order to ensure that improvements on
+the metric result in real benefits to the user. We chose to measure FID because it represents the
+part of the user experience when the user decides to interact with a site that has just been loaded.
+FID captures some of the time that the user has to wait in order to see a response from their
+interaction with a site. In other words, FID is a lower bound on the amount of time a user waits
+after interacting.
+
+Other metrics like [Total Blocking Time (TBT)](/tbt/) and [Time To Interactive (TTI)](/tti/) are based
+on [long tasks](/optimize-long-tasks/) and, like FID, also
+measure main thread blocking time during load. Since these metrics can be measured in both the field
+and the lab, many developers have asked why we don't prefer one of these over FID.
+
+There are several reasons for this. Perhaps the most important reason is that these metrics do not
+measure the user experience directly. All of these metrics measure how much JavaScript runs on the
+page. While long running JavaScript does tend to cause problems to sites, these tasks don't
+necessarily impact the user experience if the user is not interacting with the page when they occur.
+A page can have a great score on TBT and TTI but feel slow or it can have a poor score while feeling
+fast for users. In our experience, these indirect measurements result in metrics that work great for
+some sites but not for most sites. In short, the fact that long tasks and TTI are not user-centric
+makes these weaker candidates.
+
+While [lab measurement](/user-centric-performance-metrics/#in-the-lab) is certainly important and an
+invaluable tool for diagnostics, what really matters is how users experience sites. By having a
+user-centric metric that reflects real-user conditions, you are guaranteed to capture something
+meaningful about the experience. We decided to start with a small portion of that experience, even
+though we know this portion is not representative of the full experience. This is why we're working
+on capturing a larger chunk of the time a user waits for their inputs to be handled.
+
+{% Aside %}If you're interested in a deeper dive into some of the metrics we looked into, here is a
+[study about
+TBT](https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit#heading=h.ypzsa9g2mv2g)
+and a [study about
+TTI](https://docs.google.com/document/d/1sHy6R58olikMTwk5hkJL4jd9S1jbksdMY5ve3Shdg-g/edit). {%
+endAside %}
+
+{% Details %}
+
+{% DetailsSummary 'h4' %} A note on measuring TTI in the field {% endDetailsSummary %}
+
+Measuring TTI on real users in the field is problematic because it occurs very late in the page
+load. A 5-second network quiet window is required before TTI can even be computed. In the lab, you
+can choose to unload the page whenever you have all the data that you need, but that's not the case
+with real-user monitoring in the field. A user may choose to leave the page or interact with it at
+any time. In particular, users may choose to leave pages that take a long time to load, and an
+accurate TTI will not be recorded in those cases. When we measured TTI for real users in Chrome, we
+found that only about half of page loads reached TTI. {% endDetails %}
+
+## What improvements are we considering?
+
+We would like to develop a new metric that extends what FID measures today yet still retains its
+strong connection to user experience.
+
+We want the new metric to:
+
+1. Consider the responsiveness of all user inputs (not just the first one)
+2. Capture each event's full duration (not just the delay).
+3. Group events together that occur as part of the same logical user interaction and define that
+   interaction's latency as the max duration of all its events.
+4. Create an aggregate score for all interactions that occur on a page, throughout its full
+   lifecycle.
+
+To be successful, we should be able to say with high confidence that if a site scores poorly on this
+new metric, it is not responding quickly to user interactions.
+
+### Capture the full event duration
+
+The first obvious improvement is to try to capture broader end-to-end latency of an event. As
+mentioned above, FID only captures the delay portion of the input event. It does not account for the
+time it takes the browser to actually process the event handlers.
+
+There are various stages in the lifecycle of an event, as illustrated in this diagram:
+
+{% Img src="image/kns0INkO77RkiEStzHWYrugyWj32/l9CfiUoTxQQ7KmOzzXWn.jpeg", alt="Five steps in the
+lifecycle of an event", width="610", height="383" %}
+
+The following are steps Chrome takes to process an input:
+
+1. The input from the user occurs. The time at which this occurs is the event's `timeStamp`.
+2. The browser performs hit testing to decide which HTML frame (main frame or some iframe) an event
+   belongs to. Then the browser sends the event to the appropriate renderer process in charge of
+   that HTML frame.
+3. The renderer receives the event and queues it so that it can process when it becomes available to
+   do so.
+4. The renderer processes the event by running its handlers. These handlers may queue additional
+   asynchronous work, such as `setTimeout` and fetches, that are part of the input handling. But at
+   this point, the synchronous work is complete.
+5. A frame is painted to the screen that reflects the result of event handlers running. Note that
+   any asynchronous tasks queued by the event handlers may still be unfinished.
+
+The time between steps (1) and (3) above is an event's _delay_, which is what FID measures.
+
+The time between steps (1) and (5) above is an event's _duration_. This is what our new metric will
+measure.
+
+The event's duration includes the delay, but it also includes the work occurring in event handlers
+and the work the browser needs to do to paint the next frame after those handlers have run. The
+duration of an event is currently available in the [Event Timing API](/custom-metrics/#event-timing-api) via the
+entry's [duration](https://w3c.github.io/performance-timeline/#dom-performanceentry-duration)
+attribute.
+
+{% Details %}
+
+{% DetailsSummary 'h4' %} A note on asynchronous tasks {% endDetailsSummary %}
+
+Ideally we would love to also capture asynchronous work triggered by the event. But the problem is
+that the definition of asynchronous work triggered by the event is extremely tricky to get right. As
+an example, a developer may choose to begin some animation on event handlers and use a `setTimeout`
+to begin such animation. If we captured all tasks posted on the handlers, the animation would delay
+the completion time for as long as the animation runs. We believe it is worthwhile to investigate
+options on how to use heuristics to capture work that is asynchronous and which should be completed
+ASAP. However, we want to be really careful when doing so because we don't want to penalize work
+that is meant to take a long time to be finished. Thus, our initial effort will look at step 5 as
+the end point: it will only consider synchronous work and the amount of time it takes to paint after
+such work is completed. That is, we're not going to apply heuristics to guess the work that would be
+kicked off asynchronously in step 4 in our initial effort.
+
+It's worth noting that, in many cases, work should be executed synchronously. In fact, this may be
+unavoidable because events are sometimes dispatched one after the other and the event handlers need
+to be executed in order. That said, we will still miss important work, like events which trigger
+fetching or which rely on important work to be done at the next `requestAnimationFrame` callback,
+for example. {% endDetails %}
+
+### Group events into interactions
+
+Extending the metric measurement from _delay_ to _duration_ is a good first step, but it still
+leaves a critical gap in the metric: it focuses on individual events and not the user experience of
+interacting with the page.
+
+Many different events can fire as a result of a single user interaction, and separately measuring
+each doesn't build a clear picture of what the user experiences. We want to make sure our metric
+captures the full amount of time a user has to wait for a response when tapping, pressing keys,
+scrolling, and dragging as accurately as possible. So we're introducing the concept of
+***interactions*** to measure the latency of each.
+
+#### Interaction types
+
+{% Aside 'important' %}
+This content in this section was written during a time when Interaction to Next Paint (INP) was still being developed. The [current metric](/inp/) _only_ considers keyboard, mouse, and touch events, and does _not_ consider hover or scrolling when calculating INP.
+{% endAside %}
+
+The following table lists the four interactions we want to define along with the DOM events that
+they're associated with. Note that this is not quite the same as the set of all events that are
+dispatched when such user interaction occurs. For instance, when a user scrolls, a scroll event is
+dispatched, but it happens after the screen has been updated to reflect the scrolling, so we don't
+consider it part of the interaction latency.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Interaction</th>
+        <th>Start / end</th>
+        <th>Desktop events</th>
+        <th>Mobile events</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="3">Keyboard</td>
+        <td rowspan="2">Key pressed</td>
+        <td><code>keydown</code></td>
+        <td><code>keydown</code></td>
+      </tr>
+      <tr>
+        <td><code>keypress</code></td>
+        <td><code>keypress</code></td>
+      </tr>
+      <tr>
+        <td>Key released</td>
+        <td><code>keyup</code></td>
+        <td><code>keyup</code></td>
+      </tr>
+      <tr>
+        <td rowspan="7">Tap or drag</td>
+        <td rowspan="2">Tap start or drag start</td>
+        <td><code>pointerdown</code></td>
+        <td><code>pointerdown</code></td>
+      </tr>
+      <tr>
+        <td><code>mousedown</code></td>
+        <td><code>touchstart</code></td>
+      </tr>
+      <tr>
+        <td rowspan="5">Tap up or drag end</td>
+        <td><code>pointerup</code></td>
+        <td><code>pointerup</code></td>
+      </tr>
+      <tr>
+        <td><code>mouseup</code></td>
+        <td><code>touchend</code></td>
+      </tr>
+      <tr>
+        <td><code>click</code></td>
+        <td><code>mousedown</code></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td><code>mouseup</code></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td><code>click</code></td>
+      </tr>
+      <tr>
+        <td>Scroll</td>
+        <td colspan="3">N/A</td>
+      </tr>
+    </tbody>
+    <caption>DOM events for each interaction type.</caption>
+  </table>
+</div>
+
+The first three interactions listed above (keyboard, tap, and drag) are currently covered by FID.
+For our new responsiveness metric, we want to include scrolling as well, since scrolling is
+extremely common on the web and is a critical aspect of how responsive a page feels to users.
+
+{% Details %}
+
+{% DetailsSummary 'h5' %} A note on start and end {% endDetailsSummary %}
+
+Note that each of these interactions has two parts: when the user presses the mouse, finger, or key
+down and when they lift it up. We need to ensure our metric doesn't count time the user spends
+holding the finger down between these two actions as part of the page's latency! {% endDetails %}
+
+##### Keyboard
+
+A keyboard interaction has two parts to it: when the user presses the key and when they release it.
+There are three associated events with this user interaction: `keydown`, `keyup`, and `keypress`.
+The following diagram illustrates the `keydown` and `keyup` delays and durations for a keyboard
+interaction:
+
+{% Img src="image/kns0INkO77RkiEStzHWYrugyWj32/zjRipPR9ioi551DUa3pj.jpeg", alt="Keyboard interaction
+with disjoint event durations", width="800", height="286" %}
+
+In the diagram above, the durations are disjoint because the frame from `keydown` updates is
+presented before the `keyup` occurs, but this does not need to be the case always. In addition, note
+that a frame can be presented in the middle of a task in the renderer process since the last steps
+required to produce the frame are done outside of the renderer process.
+
+The `keydown` and `keypress` occur when the user presses the key, while the `keyup` occurs when the
+user releases the key. Generally the main content update occurs when the key is pressed: text
+appears on the screen, or the modifier effect is applied. That said, we want to capture the more
+rare cases where `keyup` would also present interesting UI updates, so we want to look at the
+overall time taken.
+
+In order to capture the overall time taken by the keyboard interaction, we can compute the maximum
+of the duration of the `keydown` and the `keyup` events.
+
+{% Aside %}
+The `keypress` event is deprecated, and it should be fired in the same task as the `keydown` event,
+so its duration will always overlap with the duration of the`keydown`.
+{% endAside %}
+
+{% Details %}
+
+{% DetailsSummary 'h6' %} A note on repeating keypresses {% endDetailsSummary %}
+
+There is an edge case here worth mentioning: there may be cases where the user presses a key and
+takes a while to release it. In this case, the sequence of events dispatched can
+[vary](https://developer.mozilla.org/docs/Web/API/KeyboardEvent#auto-repeat_handling). In
+these cases, we would consider there to be one interaction per `keydown`, which may or may not have
+a corresponding `keyup`. {% endDetails %}
+
+##### Tap
+
+Another important user interaction is when the user taps or clicks on a website. Similar to
+`keypress`, some events are fired as the user presses down, and others as they release, as shown in
+the diagram above, Note the events associated with a tap are a little different on desktop vs
+mobile.
+
+For a tap or click, the release is generally the one which triggers the majority of reactions, but,
+as with keyboard interactions, we want to capture the full interaction. And in this case it's more
+important to do so because having some UI updates upon tap press is not actually that uncommon.
+
+We'd like to include the event durations for all of these events, but as many of them overlap
+completely, we need to measure just `pointerdown`, `pointerup`, and `click` to cover the full
+interaction.
+
+{% Details %}
+
+{% DetailsSummary 'h6' %} Can we narrow further to just `pointerdown` and `pointerup`? {%
+endDetailsSummary %}
+
+One initial thought would be to use the `pointerdown` and `pointerup` events and assume that they
+cover all of the durations that we're interested in. Sadly, this is not the case, as this [edge
+case](https://output.jsbin.com/buyiyew/quiet) shows. Try opening this site on mobile, or with mobile
+emulation, and tapping where it says "Click me". This site triggers the [browser tap
+delay](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/). It can be seen
+that the `pointerdown`, `pointerup`, and `touchend` are dispatched quickly, whereas the `mousedown`,
+`mouseup`, and `click` wait for the delay before being dispatched. This means that if we only looked
+at `pointerdown` and `pointerup` then we'd miss the duration from the synthetic events, which is
+large due to the browser tap delay and should be included. So we should measure `pointerdown`,
+`pointerup`, and `click` to cover the full interaction. {% endDetails %}
+
+##### Drag
+
+We decided to include dragging as well since it has similar associated events and since it generally
+causes important UI updates to sites. But for our metric we intend to only consider the drag start
+and the drag end - the initial and final parts of the drag. This is to make it easier to reason
+about as well as make the latencies comparable with the other interactions considered. This is
+consistent with our decision to exclude continuous events such as `mouseover`.
+
+We're also not considering drags implemented via the [Drag and Drop
+API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) because they only work
+on desktop.
+
+##### Scrolling
+
+One of the most common forms of interacting with a site is via scrolling. For our new metric, we'd
+like to measure the latency for the initial scrolling interaction of the user. In particular, we
+care about the initial reaction of the browser to the fact that the user requested a scroll. We will
+not cover the whole scrolling experience. That is, scrolling produces many frames, and we'll focus
+our attention on the initial frame produced as a reaction to the scroll.
+
+Why just the first one? For one, subsequent frames may be captured by a separate smoothness
+[proposal](https://docs.google.com/presentation/d/1VwGIzypntWNosCTXWMsUI6ifw4sEKSRQgnwx3P_wqVg/edit#slide=id.p).
+That is, once the user has been shown the first result of scrolling, the rest should be measured in
+terms of how smooth the scrolling experience feels. Therefore, we think that the smoothness effort
+could better capture this. So, as with FID, we choose to stick to discrete user experiences: user
+experiences that have clear points in time associated with them and for which we can easily compute
+their latency. Scrolling as a whole is a continuous experience, so we do not intend to measure all
+of it in this metric.
+
+So why measure scrolls? The scrolling performance we've gathered in Chrome shows that scrolling is
+generally very fast. That said, we still want to include initial scroll latencies in our new metric
+for various reasons. First, scrolling is fast only because it has been optimized so much, because it
+is so important. But there are still ways for a website to bypass some of the performance gains that
+the browser offers. The most common one in Chrome is to force scrolling to happen on the main
+thread. So our metric should be able to say when this happens and causes poor scrolling performance
+for users. Second, scrolling is just too important to ignore. We worry that if we exclude scrolling
+then we'll have a big blindspot, and scrolling performance could decrease over time without web
+developers properly noticing.
+
+There are several events that are dispatched when a user scrolls, such as `touchstart`, `touchmove`,
+and `scroll`. Except for the scroll event, this is largely dependent on the device used for
+scrolling: touch events are dispatched when scrolling with the finger on mobile devices, while wheel
+events occur when scrolling with a mouse wheel. The scroll events are fired after initial scrolling
+has completed. And in general, no DOM event blocks scrolling, unless the website uses [non-passive
+event listeners](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/). So we think of scrolling as decoupled from DOM
+Events altogether. What we want to measure is the time from when the user moves enough to produce a
+scroll gesture until the first frame that shows that scrolling happened.
+
+#### How to define the latency of an interaction?
+
+As we noted above, interactions that have a "down" and "up" component need to be considered
+separately in order to avoid attributing the time the user spent holding their finger down.
+
+For these types of interactions, we'd like the latency to involve the durations of all events
+associated with them. Since event durations for each "down" and "up" part of the interaction can
+overlap, the simplest definition of interaction latency that achieves this is the maximum duration
+of any event associated with it. Referring back to the keyboard diagram from earlier, this would be
+the `keydown` duration, as it is longer than the `keyup`:
+
+{% Img src="image/kns0INkO77RkiEStzHWYrugyWj32/WFPm4W86CqhFsNc1UZuW.jpeg", alt="Keyboard interaction
+with maximum duration highlighted", width="800", height="311" %}
+
+The `keydown` and `keyup` durations may overlap as well. This may happen for instance when the frame
+presented for both events is the same, as in the following diagram:
+
+{% Img src="image/kns0INkO77RkiEStzHWYrugyWj32/e7htYAZb44AW4UeplBwJ.jpeg", alt="Keyboard interaction
+where press and release occur in the same frame", width="800", height="311" %}
+
+There's are pros and cons to this approach of using the maximum, and we're interested in [hearing
+your feedback](#feedback):
+
+* **Pro**: It is aligned with how we intend to measure scroll in that it only measures a single
+  duration value.
+* **Pro**: It aims to reduce noise for cases like keyboard interactions, where the `keyup` usually
+  does nothing and where the user may execute the key press and release quickly or slowly.
+* **Con**: It does not capture the full wait time of the user. For instance, it will capture the
+  start or end of a drag, but not both.
+
+For scrolling (which just has a single associated event) we'd like to define its latency as the time
+it takes for the browser to produce the first frame as a result of scrolling. That is, the latency
+is the delta between the event `timeStamp` of the first DOM event (like `touchmove`, if using a
+finger) that is large enough to trigger a scroll and the first paint which reflects the scrolling
+taking place.
+
+### Aggregate all interactions per page
+
+Once we've defined what the latency of an interaction is, we'll need to compute an aggregate value
+for a page load, which may have many user interactions. Having an aggregated value enables us to:
+
+* Form correlations with business metrics.
+* Evaluate correlations with other performance metrics. Ideally, our new metric will be sufficiently
+  independent that it adds value to the existing metrics.
+* Easily expose values in tooling in ways that are easy to digest.
+
+In order to perform this aggregation we need to solve two questions:
+
+1. What numbers do we try to aggregate?
+2. How do we aggregate those numbers?
+
+We're exploring and evaluating several options. We welcome your thoughts on this aggregation.
+
+One option is to define a budget for the latency of an interaction, which may depend on the type
+(scroll, keyboard, tap, or drag). So for example if the budget for taps is 100&nbsp;ms and the
+latency of a tap is 150&nbsp;ms then the amount over budget for that interaction would be
+50&nbsp;ms. Then we could compute the maximum amount of latency that goes over the budget for any
+user interaction in the page.
+
+Another option is to compute the average or median latency of the interactions throughout the life
+of the page. So if we had latencies of 80&nbsp;ms, 90&nbsp;ms, and 100&nbsp;ms, then the average
+latency for the page would be 90&nbsp;ms. We could also consider the average or median "over budget"
+to account for different expectations depending on the type of interaction.
+
+## How does this look like on web performance APIs?
+
+### What's missing from Event Timing?
+
+Unfortunately not all of the ideas presented in this post can be captured using the Event Timing
+API. In particular, there's no simple way to know the events associated with a given user
+interaction with the API. In order to do this, we've [proposed adding an `interactionID` to the
+API](https://docs.google.com/presentation/d/1nxNFwsGqYy7WmIZ3uv_0HsSIQMSXQA9_PqlOD3V74Us/edit#slide=id.p).
+
+Another shortcoming of the Event Timing API is that there is no way to measure the scroll
+interaction, so we're [working on enabling these
+measurements](https://docs.google.com/presentation/d/1qVdMlqgi9uuyx9imCauzMjLGHQK6TGOIZV_RnlGBKis/edit)
+(via Event Timing or a separate API).
+
+### What can you try right now?
+
+Right now, it is still possible to compute the maximum latency for taps/drags and for keyboard
+interactions. The following code snippet would produce these two metrics.
+
+```js
+let maxTapOrDragDuration = 0;
+let maxKeyboardDuration = 0;
+const observer = new PerformanceObserver(list => {
+  list.getEntries().forEach(entry => {
+    switch(entry.name) {
+      case "keydown":
+      case "keyup":
+        maxKeyboardDuration = Math.max(maxKeyboardDuration,
+            entry.duration);
+        break;
+      case "pointerdown":
+      case "pointerup":
+      case "click":
+        maxTapOrDragDuration = Math.max(maxTapOrDragDuration,
+            entry.duration);
+        break;
+    }
+  });
+});
+observer.observe({type: "event", durationThreshold: 16, buffered: true});
+// We can report maxTapDragDuration and maxKeyboardDuration when sending
+// metrics to analytics.
+```
+
+## Feedback
+
+Let us know what you think about these ideas by emailing: web-vitals-feedback@googlegroups.com!
diff --git a/src/site/content/en/blog/better-youtube-web-part1/index.md b/src/site/content/en/blog/better-youtube-web-part1/index.md
new file mode 100644
index 00000000000..91524269fc8
--- /dev/null
+++ b/src/site/content/en/blog/better-youtube-web-part1/index.md
@@ -0,0 +1,179 @@
+---
+title: 'Building a Better Web - Part 1: A faster YouTube on web'
+subhead: >
+  A case study of changes the YouTube Web team made to improve performance, increase their Core Web Vitals pass rates and lift key business metrics.
+description: >
+  This is Part 1 of our new series on Building a Better YouTube Web called "Building a faster YouTube on web"
+layout: post
+date: 2022-10-20
+authors:
+  - addyosmani
+  - sriramkrishnan
+hero: 'image/1L2RBhCLSnXjCnSlevaDjy3vba73/CPrVgVl7t1MuwWpXzvCE.jpg'
+alt: >
+  A hero image of the YouTube mobile web loading experience.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+  - performance
+  - web-vitals
+---
+
+The Chrome team often talks about "building a *better* web", but what does that
+mean? Web experiences should be [fast](/why-speed-matters/),
+[accessible](/accessibility/), and use [device
+capabilities](/reliable/) in the moment when users need it most.
+[Dogfooding](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) is part of Google's culture, so the Chrome team has partnered with
+YouTube to share lessons learned along the way in a new series called, "Building
+a better web". The first part of the series will dive into how YouTube built a
+faster web experience.
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/hIcVf8Pob6DaLrmNjdNX.png", alt="PageSpeed Insights showing the Chrome UX Report data for YouTube Mobile Web passing the Core Web Vitals.", width="800", height="450" %}
+  <figcaption>
+    The YouTube for mobile web Watch page passing the <a href="/vitals">Core Web Vitals</a> thresholds.
+  </figcaption>
+</figure>
+
+## Building a faster web
+
+At YouTube, _performance_ relates to how fast videos and other content—such as
+recommendations and comments—load on web pages. Performance is also measured by how quickly YouTube
+responds to user interactions such as search, player control, likes, and shares.
+
+Growing developing markets, such as Brazil, India, and Indonesia are important
+for YouTube mobile web. Because many users in these regions have slower devices
+and limited network bandwidth, ensuring a fast and seamless experience is a
+critical goal.
+
+To provide an inclusive experience for all users, YouTube set out to improve
+performance metrics such as [Core Web Vitals](/vitals) through lazy-loading and code
+modernization.
+
+### Improving Core Web Vitals
+
+To identify areas of improvement, the YouTube team used the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/) to see how real users were experiencing video watch and search result pages on
+mobile in [the
+field](/lab-and-field-data-differences/#field-data). They
+realized their Core Web Vitals metrics had a lot of room for improvement, with
+their [Largest Contentful Paint (LCP)](/lcp/) metric clocking in
+at 4-6 seconds in some cases. This was substantially higher than their target of
+2.5 seconds.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/uy6hO7M60rRw3bTfXTCH.png", alt="Charts of FCP and LCP showing YouTube Watch page pass rates as well as the YouTube origin.", width="800", height="285" %}
+
+To identify areas for improvement, they turned to
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to audit
+the YouTube watch pages, revealing a low Lighthouse
+([lab](/lab-and-field-data-differences/#lab-data)) score with a
+First Contentful Paint (FCP) of 3.5 seconds and a LCP of 8.5 seconds.
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/PeCzGyBCTcY63B5Nft1a.jpg", alt="Lighthouse Report for YouTube Mobile.", width="800", height="518" %}
+
+  <figcaption>
+    Chrome sets a target of 1.8s for FCP and 2.5s for LCP as a gold standard. The FCP and LCP were clearly in the yellow and red at 3.5s and 8.5s, respectively.
+  </figcaption>
+</figure>
+
+To optimize FCP and LCP, the YouTube team dove into several experiments,
+resulting in two big discoveries.
+
+1. The first discovery was that they could improve performance by moving the HTML for the Video Player above the script that makes the Video Player interactive. Lab tests indicated that this could improve both FCP and LCP from 4.4 seconds to 1.1 seconds.
+
+1. The second discovery was that LCP only [considers](/lcp/#what-elements-are-considered) `<video>` element poster images and not frames from the video stream itself. YouTube has traditionally optimized for the fastest time until the video starts playing, so to improve LCP the team started also optimizing how quickly they could deliver their poster image. They experimented with a few variations of poster images and picked the one that scored the best in user testing. As a result of this work, both FCP and LCP showed marked improvement, with field LCP improving from 4.6 seconds to 2.0 seconds.
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/wJKAgsXRqrexp9yDJ4T1.jpg", alt="Watch Page LCP Experiment for mobile web showing control, experiment A (image thumbnail) and experiment B (black thumbnail)", width="800", height="514" %}
+  <figcaption>
+    In the lab, we observed an improvement in FCP and LCP from 4.4s to 1.1s after this change landed. Experiment A: Using the actual video thumbnail works well on pages where the video starts out paused, but for auto-play video pages like the watch page it performed poorly in user studies. It also resulted in a drop in active users. Experiment B: Using a solid black poster image showed the best results in user studies. Users found the transition from solid black to the first frame of the video to be a less-jarring experience for autoplay videos.
+  </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/wGjBH4sMWoZEbRon6gBS.png", alt="The black thumbnail was deployed in production for all mobile web users July 2021 showing marked improvement in FCP and LCP, as seen in the above RUM analysis.", width="800", height="408" %}
+  <figcaption>
+    Black thumbnail was deployed in production for all mobile web users July 2021 showing marked improvement in FCP and LCP, as seen in the above RUM analysis.
+  </figcaption>
+</figure>
+
+{% Aside%}
+While bringing these optimizations to all platforms, YouTube also took advantage of the new [`fetchpriority` attribute](/fetch-priority/), which we use with `<link rel=preload>` to prioritize discovering and loading the poster image early:
+
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poster.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">fetchpriority</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>high<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></code></pre>
+{% endAside %}
+
+While these optimizations did improve LCP, the team felt that the current definition of the LCP metric wasn't fully capturing, from the user's perspective, when the "main content" of the page had loaded—which is the goal of LCP.
+
+To address these concerns, members of the YouTube team partnered with members of the Chrome team to explore ways that the LCP metric could be improved to address their use case. After considering the feasibility and impact of a few options, the teams landed on a [proposal](https://github.com/w3c/largest-contentful-paint/issues/85) to consider the paint time of the first frame of a video element as an LCP candidate.
+
+Once this change lands in Chrome, the YouTube team is excited to continue their work optimizing for LCP. And the updated version of the metric will mean these optimizations will have a more direct impact on real-user experiences.
+
+### Modularization with lazy loading
+
+YouTube pages contained many modules that were eagerly loaded. To optimize how
+50+ components were rendered, the team built a component to JS module map that
+would tell the client which modules to load. By marking components as lazy, the
+JS modules would load later, reducing the initial load time of the page and the
+amount of unused Javascript sent to the client.
+
+However, after lazy loading was implemented, the team noticed a waterfall effect
+that lazy loaded components and their dependencies would load at suboptimal
+times.
+
+To solve this problem, the team determined the minimal set of components needed
+in a view and batched them in a single network request. The results were
+improved page speed, reduced JavaScript parse time, and, ultimately, better
+initial rendering times.
+
+### State-management across components
+
+YouTube was experiencing performance issues due to its player controls,
+especially on older devices. Code analysis showed that the player, which allows
+users to control features such as playback speed and progress, had become
+over-componentized over time.
+
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/qh9N7ZdkxylN1vYOOdUO.png", alt="YouTube player and controls visualized", width="800", height="300" %}
+  <figcaption>
+    The YouTube video player allows users to control playback speed, follow progress, skip sections, and others. When a user taps on a particular control, the change in the state must be communicated to other controls e.g. a user tap on the progress bar must be shared to controls such as play-head, subtitles etc.
+  </figcaption>
+</figure>
+
+Each progress bar touch-move event triggered two
+extra style recalculations and took 21.17 ms during performance test runs in the lab. As new controls were added over time, the pattern of decentralized control would often cause circular dependencies and memory leaks, negatively impacting watch page performance.
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/vCTMilflEoDnkw1p8EuU.png", alt="21.17 ms event shown on the Performance timeline.", width="800", height="202" %}
+  <figcaption>
+    Chrome DevTools with a 4 times CPU slow-down performance run.
+  </figcaption>
+</figure>
+
+To fix the issues due to decentralized control, the team updated the player UI
+to synchronize all updates, essentially refactoring the player to one top-level
+component that would pass down data to its children. This ensured only one UI
+update (render) cycle for any state change, eliminating chained updates. The new
+player progress bar touch-move event has no style recalculations during its
+JavaScript execution and now only requires 25% the time of the old player.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/E1EbOYuT2q7mDqfmR1zz.png", alt="Reduced time in events shown on the performance timeline.", width="800", height="90" %}
+
+This code modernization also resulted in additional performance improvements
+such as improved watch load times on old devices, fewer abandoned playbacks, and
+a reduced number of non-fatal errors.
+
+## Conclusion
+
+As a result of YouTube's investment in performance, watch pages load much faster with 76% of YouTube's mobile website URLs now passing Core Web Vitals metric thresholds in the field. On desktop, lab LCP for the watch page was reduced from approximately 4.6 seconds to 1.6 seconds. Interaction and rendering performance of the site, especially on the YouTube video player, are seeing up to 75% less time spent in JavaScript execution than before.
+
+{% Aside 'success' %}
+76% of YouTube's mobile web URLs now pass the Core Web Vitals metrics, with improvements to business metrics like watch time as a result.
+{% endAside %}
+
+Improvements to the performance of YouTube web over the last year have also improved business metrics, including watch time and daily active users. Based on the success of these efforts, we plan to continue exploring even more ways to optimize in the future.
+
+In part two of this series, "Building an accessible web", you’ll read how YouTube made their website more accessible for screen-reader users.
+
+_With special thanks to Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra and both the YouTube and Chrome teams for their contributions to this work._
diff --git a/src/site/content/en/blog/betty-crocker/doughy-fingers.jpg b/src/site/content/en/blog/betty-crocker/doughy-fingers.jpg
deleted file mode 100644
index a83d8b5a1b4..00000000000
Binary files a/src/site/content/en/blog/betty-crocker/doughy-fingers.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/betty-crocker/hero.jpg b/src/site/content/en/blog/betty-crocker/hero.jpg
deleted file mode 100644
index 9088c811bfc..00000000000
Binary files a/src/site/content/en/blog/betty-crocker/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/betty-crocker/index.md b/src/site/content/en/blog/betty-crocker/index.md
index c2061c17f5c..db7b13d3fdb 100644
--- a/src/site/content/en/blog/betty-crocker/index.md
+++ b/src/site/content/en/blog/betty-crocker/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: |
   Wake Lock API case study: 300% increase in purchase intent indicators on BettyCrocker.com
 subhead: |
@@ -10,14 +11,14 @@ authors:
   - phillipkriegel
 date: 2020-05-19
 updated: 2020-05-19
-hero: hero.jpg
+hero: image/admin/uWpEHKUQjInjnw4h1YIC.jpg
 alt: Betty Crocker Cake Mix—Coffee Cinnamon.
 description: |
   Case study of cooking site BettyCrocker.com's experiences with implementing the Wake Lock API.
 tags:
   - blog
   - case-study
-  - wake-lock
+  # - wake-lock
   - capabilities
 ---
 For nearly a century, Betty Crocker has been America's source for modern cooking instruction
@@ -32,17 +33,17 @@ were about 300% higher** for wake lock users compared to all users.
 ## The retired iOS and Android apps
 
 Released to [much fanfare](https://consumergoods.com/betty-crocker-launches-cookbook-app) in 2014,
-Betty Crocker recently took their native apps out of the Apple App Store and the Google Play Store
+Betty Crocker recently took their apps out of the Apple App Store and the Google Play Store
 after they had been deprioritized.
 For a long time, the Betty Crocker team has preferred adding new features to the mobile site
-instead of the native apps.
-The technical platform the native apps were created on was outdated,
+instead of the iOS/Android apps.
+The technical platform the iOS/Android apps were created on was outdated,
 and the business did not have the resources
 to support updating and maintaining the apps moving forward.
 The web app also was objectively way bigger traffic-wise,
 more modern, and easier to enhance.
 
-The native apps did have one *killer feature*, though, that their users loved:
+The iOS/Android apps did have one *killer feature*, though, that their users loved:
 
 > Millennial cooking pro tip: the [@BettyCrocker](https://twitter.com/BettyCrocker) mobile app
   doesn't dim or lock when you're following a recipe.
@@ -57,17 +58,17 @@ The native apps did have one *killer feature*, though, that their users loved:
 
 When cooking with a device, there is nothing more frustrating
 than having to touch the screen with messy hands or even your nose when the screen turns off.
-Betty Crocker asked themselves how they could port the killer feature of their native app
+Betty Crocker asked themselves how they could port the killer feature of their iOS/Android apps
 over to the web app.
 This is when they learned about
-[Project Fugu](https://developers.google.com/web/updates/capabilities) and the
-[Wake Lock API](https://web.dev/wakelock/).
+[Project Fugu](https://developer.chrome.com/blog/capabilities/) and the
+[Wake Lock API](/wakelock/).
 
-![A person kneading dough on a kitchen table covered in flour](doughy-fingers.jpg)
+{% Img src="image/admin/Yoj65m20XpoPdaL8ejAv.jpg", alt="A person kneading dough on a kitchen table covered in flour", width="800", height="533" %}
 
 The Wake Lock API provides a way to prevent the device
 from dimming or locking the screen.
-This capability enables new experiences that, until now, required a native app.
+This capability enables new experiences that, until now, required an iOS/Android app.
 The Wake Lock API reduces the need for hacky and potentially power-hungry workarounds.
 
 ### Requesting a wake lock
@@ -123,24 +124,24 @@ After the prototype proved useful, they designed a
 [Vue.js component](https://vuejs.org/v2/guide/components.html)
 that could be shared across all their brands ([BettyCrocker](https://www.bettycrocker.com/),
 [Pillsbury](https://www.pillsbury.com/), and [Tablespoon](https://www.tablespoon.com/)).
-Even though only Betty Crocker had a native app,
+Even though only Betty Crocker had iOS and Android apps,
 the three sites do have a shared code base,
 so they were able to implement the component once, and deploy it everywhere,
 as shown in the screenshots below.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="www.bettycrocker.com.png" alt="BettyCrocker.com wake lock toggle" width="600">
-  <figcaption class="w-figcaption">BettyCrocker.com wake lock toggle.</figcaption>
+<figure>
+  {% Img src="image/admin/I9y4AIPEK9P4V0JFn4y1.png", alt="BettyCrocker.com wake lock toggle", width="600", height="170" %}
+  <figcaption>BettyCrocker.com wake lock toggle.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="www.pillsbury.com.png" alt="Pillsbury.com wake lock toggle" width="600">
-  <figcaption class="w-figcaption">Pillsbury.com wake lock toggle.</figcaption>
+<figure>
+  {% Img src="image/admin/PXS7bnWxYiLKtmLekulr.png", alt="Pillsbury.com wake lock toggle", width="600", height="152" %}
+  <figcaption>Pillsbury.com wake lock toggle.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="www.tablespoon.com.png" alt="Tablespoon.com wake lock toggle" width="600">
-  <figcaption class="w-figcaption">Tablespoon.com wake lock toggle.</figcaption>
+<figure>
+  {% Img src="image/admin/S5NQabO9qJTwlidx2eZo.png", alt="Tablespoon.com wake lock toggle", width="600", height="152" %}
+  <figcaption>Tablespoon.com wake lock toggle.</figcaption>
 </figure>
 
 When developing the component based on the new site's modernized framework,
@@ -318,18 +319,18 @@ BettyCrocker.com reported the following metrics:
   than for those not using the wake lock feature.
 - Indicators of purchase intent were about 300% higher for wake lock users compared to all users.
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">3.1<sub class="w-stat__sub">×</sub></p>
-    <p class="w-stat__desc">Longer session duration</p>
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">3.1<sub>×</sub></p>
+    <p>Longer session duration</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">50<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower bounce rate</p>
+  <div class="stats__item">
+    <p class="stats__figure">50<sub>%</sub></p>
+    <p>Lower bounce rate</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">300<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher purchase intent indicators</p>
+  <div class="stats__item">
+    <p class="stats__figure">300<sub>%</sub></p>
+    <p>Higher purchase intent indicators</p>
   </div>
 </div>
 
@@ -346,7 +347,7 @@ Other examples are boarding pass or ticket apps that need to keep the screen on
 until the barcode has been scanned, kiosk-style apps that keep the screen on continuously,
 or web-based presentation apps that prevent the screen from sleeping during a presentation.
 
-We have compiled [everything you need to know about the Wake Lock API](https://web.dev/wakelock/)
+We have compiled [everything you need to know about the Wake Lock API](/wakelock/)
 in a comprehensive article on this very site.
 Happy reading, and happy cooking!
 
diff --git a/src/site/content/en/blog/betty-crocker/www.bettycrocker.com.png b/src/site/content/en/blog/betty-crocker/www.bettycrocker.com.png
deleted file mode 100644
index dccd23821f4..00000000000
Binary files a/src/site/content/en/blog/betty-crocker/www.bettycrocker.com.png and /dev/null differ
diff --git a/src/site/content/en/blog/betty-crocker/www.pillsbury.com.png b/src/site/content/en/blog/betty-crocker/www.pillsbury.com.png
deleted file mode 100644
index 4710f65cf0f..00000000000
Binary files a/src/site/content/en/blog/betty-crocker/www.pillsbury.com.png and /dev/null differ
diff --git a/src/site/content/en/blog/betty-crocker/www.tablespoon.com.png b/src/site/content/en/blog/betty-crocker/www.tablespoon.com.png
deleted file mode 100644
index 04cc09df7f2..00000000000
Binary files a/src/site/content/en/blog/betty-crocker/www.tablespoon.com.png and /dev/null differ
diff --git a/src/site/content/en/blog/beyond-the-rack/index.md b/src/site/content/en/blog/beyond-the-rack/index.md
new file mode 100644
index 00000000000..06dd8aa5369
--- /dev/null
+++ b/src/site/content/en/blog/beyond-the-rack/index.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Beyond the Rack
+description: |
+  Beyond the Rack re-engages users on the mobile web, increasing revenue per visit by 26% with push notifications.
+date: 2015-10-25
+updated: 2015-10-25
+authors:
+  - paulkinlan
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3odtSs9WBTjfum9Kw3vC.jpg", alt="Beyond the rack detail", width="800", height="1352" %}
+</figure>
+
+[Beyond the Rack](https://www.beyondtherack.com) re-engages users on the
+mobile web, increasing revenue per visit by 26% with push notifications.
+
+{% Blockquote 'Richard Cohene, VP Marketing, Beyond the Rack' %}
+Push notifications allowed us to bring one of the most compelling
+capabilities from our native app to our mobile site. We see a direct 20%
+click-through rate from push notifications—having another channel to reach
+our users is a game changer.
+{% endBlockquote %}
+
+### Key Insights
+
+- **52%** of total users are mobile web
+- **26%** is the average increase in spend that occurred by members who visited via push
+- **20%** click through rate from push notifications
+- **72%** more time spent on the site per visit from members who visited via push notifications
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/5PZRlkNq4l8Ey6swesdC.pdf)
+
+## About Beyond the Rack
+
+Beyond the Rack is a leading online retailer that runs sale events of designer products
+for its 14 million members globally. Until recently, the company primarily depended on
+targeted, daily emails to re-engage users. Recent internal research showed that **52%** of
+users were visiting their site via the mobile web, so they looked for ways to improve
+their mobile engagement and sales. At this point Beyond the Rack reached out to their
+mobile shopping platform partner Mobify. Working with Mobify, Beyond the Rack implemented
+push notifications on their mobile website and saw a **50%** increase in repeat visits within
+3 months. The company also found push notifications delivered higher value visits, with
+members spending **26%** more per visit on average.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4ZbI8Avq8Nhc4CZ7zQ85.jpg", alt="Three steps of Push: Ask, Register, Engage", width="800", height="600" %}
+</figure>
+
+## Timely, relevant notifications
+
+Every day, Beyond the Rack sends emails to their members about new and exclusive sales
+events. With limited sale periods—usually 48 hours—the company couldn’t rely solely on
+customers checking their email to generate sales. Beyond the Rack’s new push notifications
+provided a **20%** click through rate which worked perfectly for flash sales alerts. The
+notifications also provided Beyond the Rack with another touchpoint to interact with a
+highly-engaged and commercially-valuable audience.
+
+## High attention users arrive from push notifications
+
+Beyond the Rack members who visited the site via push notifications  spent **72%** more
+time on the site per visit and shopped more often than the average visitor. By creating
+timely pushes, Beyond the Rack increased the relevance and excitement of their pushes - and
+customers showed their love through higher sales.
+
+## The value of web-based push notifications for business
+
+More than **50%** of new members discover Beyond the Rack via the mobile web so having an
+avenue to re-engage them after this initial interaction in a personalized way makes it more
+than just a platform for discovery. Because push messages appear at the front of a customer’s
+mobile phone home screen, they prompt greater response and more immediate action.
+
+## About Push Notification
+
+Push notifications enable your mobile web users to choose to receive notifications on their
+device just like an installed native app. This lets you effectively re-engage them with customized,
+compelling content.
+
+## More Information
+
+For more information on Push Notifications on the web check out our resources:
+
+- [Getting Started with your first Push Notifications](https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/)
+- [Push and Notifications guide](/notifications/)
diff --git a/src/site/content/en/blog/bfcache/index.md b/src/site/content/en/blog/bfcache/index.md
new file mode 100644
index 00000000000..b41cc90085c
--- /dev/null
+++ b/src/site/content/en/blog/bfcache/index.md
@@ -0,0 +1,649 @@
+---
+layout: post
+title: Back/forward cache
+subhead: Optimize your pages for instant loads when using the browser's back and forward buttons.
+description: |
+  Learn how to optimize your pages for instant loads when using the browser's back and forward buttons.
+authors:
+  - philipwalton
+  - tunetheweb
+date: 2020-11-10
+updated: 2023-05-25
+hero: image/admin/Qoeb8x3a11BdGgRzYJbY.png
+alt: Back and forward buttons
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Back/forward cache (or bfcache) is a browser optimization that enables instant
+back and forward navigation. It significantly improves the browsing experience
+for users—especially those with slower networks or devices.
+
+As web developers, it's critical to understand how to [optimize your pages for
+bfcache](#optimize-your-pages-for-bfcache) across all browsers, so your users
+can reap the benefits.
+
+## Browser compatibility
+
+bfcache has been supported in both
+[Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching)
+and [Safari](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) for
+many years, across desktop and mobile.
+
+Starting in version 86, Chrome enabled bfcache for
+[cross-site](/same-site-same-origin/) navigations on Android for a small
+percentage of users. In subsequent releases, additional support slowly rolled
+out. Since version 96, bfcache is enabled for all Chrome users across desktop
+and mobile.
+
+## bfcache basics
+
+bfcache is an in-memory cache that stores a complete snapshot of a page
+(including the JavaScript heap) as the user is navigating away. With the entire
+page in memory, the browser can quickly and easily restore it if the user
+decides to return.
+
+How many times have you visited a website and clicked a link to go to another
+page, only to realize it's not what you wanted and click the back button? In
+that moment, bfcache can make a big difference in how fast the previous page
+loads:
+
+<div class="table-wrapper">
+  <table data-alignment="top">
+    <tr>
+      <td width="30%"><strong><em>Without</em> bfcache enabled</strong></td>
+      <td>
+        A new request is initiated to load the previous page, and, depending
+        on how well that page has been <a
+        href="/reliable/#the-options-in-your-caching-toolbox">
+        optimized</a> for repeat visits, the browser might have to re-download,
+        re-parse, and re-execute some (or all) of resources it just downloaded.
+      </td>
+    </tr>
+    <tr>
+      <td><strong><em>With</em> bfcache enabled</strong></td>
+      <td>
+        Loading the previous page is <em>essentially instant</em>, because the
+        entire page can be restored from memory, without having to go to the
+        network at all
+      </td>
+    </tr>
+  </table>
+</div>
+
+Check out this video of bfcache in action to understand the speed up it can
+bring to navigations:
+
+{% YouTube 'cuPsdRckkF0' %}
+
+In the video above, the example with bfcache is quite a bit faster than the
+example without it.
+
+bfcache not only speeds up navigation, it also reduces data usage, since
+resources do not have to be downloaded again.
+
+Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile
+are either back or forward. With bfcache enabled, browsers could eliminate the
+data transfer and time spent loading for billions of web pages every single day!
+
+### How the "cache" works
+
+The "cache" used by bfcache is different from the [HTTP cache](/http-cache/)
+(which is also useful in speeding up repeat navigations). The bfcache is a
+snapshot of the entire page in memory (including the JavaScript heap), whereas
+the HTTP cache contains only the responses for previously made requests. Since
+it's quite rare that all requests required to load a page can be fulfilled from
+the HTTP cache, repeat visits using bfcache restores are always faster than even
+the most well-optimized non-bfcache navigations.
+
+Creating a snapshot of a page in memory, however, involves some complexity in
+terms of how best to preserve in-progress code. For example, how do you handle
+`setTimeout()` calls where the timeout is reached while the page is in the
+bfcache?
+
+The answer is that browsers pause running any pending timers or unresolved
+promises—essentially all pending tasks in the [JavaScript task
+queues](https://html.spec.whatwg.org/multipage/webappapis.html#task-queue)—and
+resume processing tasks when (or if) the page is restored from the bfcache.
+
+In some cases this is fairly low-risk (for example, timeouts or promises), but
+in other cases it might lead to very confusing or unexpected behavior. For
+example, if the browser pauses a task that's required as part of an [IndexedDB
+transaction](https://developer.mozilla.org/docs/Web/API/IDBTransaction),
+it can affect other open tabs in the same origin (since the same IndexedDB
+databases can be accessed by multiple tabs simultaneously). As a result,
+browsers will generally not attempt to cache pages in the middle of an IndexedDB
+transaction or using APIs that might affect other pages.
+
+For more details on how various API usage affects a page's bfcache eligibility,
+see [Optimize your pages for bfcache](#optimize-your-pages-for-bfcache) below.
+
+### APIs to observe bfcache
+
+While bfcache is an optimization that browsers do automatically, it's still
+important for developers to know when it's happening so they can [optimize their
+pages for it](#optimize-your-pages-for-bfcache) and [adjust any metrics or
+performance
+measurement](#implications-for-analytics-and-performance-measurement)
+accordingly.
+
+The primary events used to observe bfcache are the [page transition
+events](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent)—`pageshow`
+and `pagehide`—which have been around as long as bfcache has and are supported
+in pretty much [all browsers in use
+today](https://caniuse.com/page-transition-events).
+
+The newer [Page
+Lifecycle](https://developer.chrome.com/blog/page-lifecycle-api/)
+events—`freeze` and `resume`—are also dispatched when pages go in or out of the
+bfcache, as well as in some other situations. For example when a background tab
+gets frozen to minimize CPU usage. Note, the Page Lifecycle events are currently
+only supported in Chromium-based browsers.
+
+#### Observe when a page is restored from bfcache
+
+The `pageshow` event fires right after the `load` event when the page is
+initially loading and any time the page is restored from bfcache. The `pageshow`
+event has a
+[`persisted`](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent/persisted)
+property which will be `true` if the page was restored from bfcache
+(and `false` if not). You can use the `persisted` property
+to distinguish regular page loads from bfcache restores. For example:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    console.log('This page was restored from the bfcache.');
+  } else {
+    console.log('This page was loaded normally.');
+  }
+});
+```
+
+In browsers that support the Page Lifecycle API, the `resume` event will also
+fire when pages are restored from bfcache (immediately before the `pageshow`
+event), though it will also fire when a user revisits a frozen background tab.
+If you want to restore a page's state after it's frozen (which includes pages in
+the bfcache), you can use the `resume` event, but if you want to measure your
+site's bfcache hit rate, you'd need to use the `pageshow` event. In some cases,
+you might need to use both.
+
+{% Aside %}
+  See [Implications for performance and
+  analytics](#how-bfcache-affects-analytics-and-performance-measurement) for
+  more details on bfcache measurement best practices.
+{% endAside %}
+
+#### Observe when a page is entering bfcache
+
+The `pagehide` event is the counterpart to the `pageshow` event. The `pageshow`
+event fires when a page is either loaded normally or restored from the bfcache.
+The `pagehide` event fires when the page is either unloaded normally or when the
+browser attempts to put it into the bfcache.
+
+The `pagehide` event also has a `persisted` property, and if it's `false` then
+you can be confident a page is not about to enter the bfcache. However, if the
+`persisted` property is `true`, it doesn't guarantee that a page will be cached.
+It means that the browser _intends_ to cache the page, but there may be factors
+that make it impossible to cache.
+
+```js
+window.addEventListener('pagehide', (event) => {
+  if (event.persisted) {
+    console.log('This page *might* be entering the bfcache.');
+  } else {
+    console.log('This page will unload normally and be discarded.');
+  }
+});
+```
+
+Similarly, the `freeze` event will fire immediately after the `pagehide` event
+(if the event's `persisted` property is `true`), but again that only means the
+browser _intends_ to cache the page. It may still have to discard it for a
+number of reasons explained below.
+
+## Optimize your pages for bfcache
+
+Not all pages get stored in bfcache, and even when a page does get stored there,
+it won't stay there indefinitely. It's critical that developers understand what
+makes pages eligible (and ineligible) for bfcache to maximize their cache-hit
+rates.
+
+The following sections outline the best practices to make it as likely as
+possible that the browser can cache your pages.
+
+### Never use the `unload` event
+
+The most important way to optimize for bfcache in all browsers is to never use
+the `unload` event. Ever!
+
+The `unload` event is problematic for browsers because it predates bfcache and
+many pages on the internet operate under the (reasonable) assumption that a page
+will not continue to exist after the `unload` event has fired. This presents a
+challenge because many of those pages were _also_ built with the assumption that
+the `unload` event would fire any time a user is navigating away, which is no
+longer true (and [hasn't been true for a long
+time](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event)).
+
+So browsers are faced with a dilemma, they have to choose between something that
+can improve the user experience—but might also risk breaking the page.
+
+On desktop, Chrome and Firefox have chosen to make pages ineligible for bfcache if they add an `unload`
+listener, which is less risky but also disqualifies _a lot_ of pages. Safari
+will attempt to cache some pages with an `unload` event listener, but to reduce
+potential breakage it will not run the `unload` event when a user is navigating
+away, which makes the event very unreliable.
+
+On mobile, Chrome and Safari will attempt to cache pages with an `unload` event listener since the risk of breakage is lower due to the fact that the `unload` event has always been extremely unreliable on mobile. Firefox treats pages that use `unload` as ineligible for the bfcache, except on iOS, which requires all browsers to use the WebKit rendering engine, and so it behaves like Safari.
+
+Instead of using the `unload` event, use the `pagehide` event. The `pagehide`
+event fires in all cases where the `unload` event currently fires, and it
+_also_ fires when a page is put in the bfcache.
+
+In fact, [Lighthouse](https://developer.chrome.com/docs/lighthouse/) has a [`no-unload-listeners` audit](https://github.com/GoogleChrome/lighthouse/pull/11085), which will warn developers if any JavaScript on their pages (including that from third-party libraries) adds an `unload` event listener.
+
+{% Aside 'warning' %}
+  Never add an `unload` event listener! Use the `pagehide` event instead.
+  Adding an `unload` event listener will make your site slower in Firefox, and
+  the code won't even run most of the time in Chrome and Safari.
+{% endAside %}
+
+#### Only add `beforeunload` listeners conditionally
+
+The `beforeunload` event will not make your pages ineligible for bfcache in
+Chrome or Safari, but it will make them ineligible in Firefox, so avoid using it
+unless absolutely necessary.
+
+Unlike the `unload` event, however, there are legitimate uses for
+`beforeunload`. For example, when you want to warn the user that they have
+unsaved changes they'll lose if they leave the page. In this case, it's
+recommended that you only add `beforeunload` listeners when a user has unsaved
+changes and then remove them immediately after the unsaved changes are saved.
+
+{% Compare 'worse' %}
+```js
+window.addEventListener('beforeunload', (event) => {
+  if (pageHasUnsavedChanges()) {
+    event.preventDefault();
+    return event.returnValue = 'Are you sure you want to exit?';
+  }
+});
+```
+{% CompareCaption %}
+  The code above adds a `beforeunload` listener unconditionally.
+{% endCompareCaption %}
+{% endCompare %}
+
+{% Compare 'better' %}
+```js
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  return event.returnValue = 'Are you sure you want to exit?';
+};
+
+// A function that invokes a callback when the page has unsaved changes.
+onPageHasUnsavedChanges(() => {
+  window.addEventListener('beforeunload', beforeUnloadListener);
+});
+
+// A function that invokes a callback when the page's unsaved changes are resolved.
+onAllChangesSaved(() => {
+  window.removeEventListener('beforeunload', beforeUnloadListener);
+});
+```
+{% CompareCaption %}
+  The code above only adds the `beforeunload` listener when it's needed (and
+  removes it when it's not).
+{% endCompareCaption %}
+{% endCompare %}
+
+### Minimize use of `Cache-Control: no-store`
+
+`Cache-Control: no-store` is an HTTP header web servers can set on responses that instructs the browser not to store the response in any HTTP cache. This should be used for resources containing sensitive user information, for example pages behind a login.
+
+Though bfcache is not an HTTP cache, historically, when `Cache-Control: no-store` is set on the page resource itself (as opposed to any subresource), browsers have chosen not to store the page in bfcache. There is [work currently underway to change this behavior for Chrome](https://github.com/fergald/explainer-bfcache-ccns/blob/main/README.md) in a privacy-preserving manner, but at present any pages using `Cache-Control: no-store` will not be eligible for bfcache.
+
+Since `Cache-Control: no-store` restricts a page's eligibility for bfcache, it should only be set on pages that contain sensitive information where caching of any sort is never appropriate.
+
+For pages that wish to always serve up-to-date content—and that content does not contain sensitive information—use `Cache-Control: no-cache` or `Cache-Control: max-age=0`. These directives instruct the browser to revalidate the content before serving it, and they do not affect a page's bfcache eligibility.
+
+Note that when a page is restored from bfcache, it is restored from memory, not from the HTTP cache. As a result, directives like `Cache-Control: no-cache` or `Cache-Control: max-age=0` are not taken into account, and no revalidation occurs before the content is displayed to the user.
+
+This is still likely a better user experience, however, as bfcache restores are instant and—since pages do not stay in the bfcache for very long—it's unlikely that the content is out of date. However, if your content does change minute-by-minute, you can fetch any updates using the `pageshow` event, as outlined in the next section.
+
+### Update stale or sensitive data after bfcache restore
+
+If your site keeps user state—especially any sensitive user information—that
+data needs to be updated or cleared after a page is restored from bfcache.
+
+For example, if a user navigates to a checkout page and then updates their
+shopping cart, a back navigation could potentially expose out-of-date
+information if a stale page is restored from bfcache.
+
+Another, more critical example is if a user signs out of a site on a public
+computer and the next user clicks the back button. This could potentially expose
+private data that the user assumed was cleared when they logged out.
+
+To avoid situations like this, it's good to always update the page after a
+`pageshow` event if `event.persisted` is `true`.
+
+The following code checks for the presence of a site-specific cookie in the
+`pageshow` event and reloads if the cookie is not found:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted && !document.cookie.match(/my-cookie/)) {
+    // Force a reload if the user has logged out.
+    location.reload();
+  }
+});
+```
+
+### Avoid `window.opener` references
+
+In some browsers (including Chromium-based browsers) if a page was opened using
+[`window.open()`](https://developer.mozilla.org/docs/Web/API/Window/open)
+or (in [Chromium-based browsers prior to version 88](https://crbug.com/898942)) from a link with
+[`target=_blank`](https://developer.mozilla.org/docs/Web/HTML/Element/a#target)—without
+specifying
+[`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener)—then
+the opening page will have a reference to the window object of the opened page.
+
+In addition to [being a security
+risk](https://mathiasbynens.github.io/rel-noopener/), a page with a non-null
+[`window.opener`](https://developer.mozilla.org/docs/Web/API/Window/opener)
+reference cannot safely be put into the bfcache because that could break any
+pages attempting to access it.
+
+As a result, it's best to avoid creating `window.opener` references. You can do this by using
+`rel="noopener"` whenever possible. If your site requires opening a window and
+controlling it through
+[`window.postMessage()`](https://developer.mozilla.org/docs/Web/API/Window/postMessage)
+or directly referencing the window object, neither the opened window nor the
+opener will be eligible for the bfcache.
+
+### Always close open connections before the user navigates away
+
+As mentioned above, when a page is put into the bfcache all scheduled JavaScript
+tasks are paused and then resumed when the page is taken out of the cache.
+
+If these scheduled JavaScript tasks are only accessing DOM APIs—or other APIs
+isolated to just the current page—then pausing these tasks while the page is not
+visible to the user is not going to cause any problems.
+
+However, if these tasks are connected to APIs that are also accessible from
+other pages in the same origin (for example: IndexedDB, Web Locks, WebSockets,
+etc.) this can be problematic because pausing these tasks may prevent code in
+other tabs from running.
+
+As a result, some browsers will not attempt to put a page in bfcache in the
+following scenarios:
+
+*   Pages with an open [IndexedDB
+    connection](https://developer.mozilla.org/docs/Web/API/IDBOpenDBRequest)
+*   Pages with in-progress
+    [fetch()](https://developer.mozilla.org/docs/Web/API/Fetch_API) or
+    [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)
+*   Pages with an open
+    [WebSocket](https://developer.mozilla.org/docs/Web/API/WebSocket) or
+    [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API)
+    connection
+
+If your page is using any of these APIs, it's best to always close connections
+and remove or disconnect observers during the `pagehide` or `freeze` event. That
+will allow the browser to safely cache the page without the risk of it affecting
+other open tabs.
+
+Then, if the page is restored from the bfcache, you can re-open or re-connect to
+those APIs (in the `pageshow` or `resume` event).
+
+The following example shows how to ensure your pages are eligible for bfcache
+when using IndexedDB by closing an open connection in the `pagehide` event
+listener:
+
+```js
+let dbPromise;
+function openDB() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open('my-db', 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
+      req.onerror = () => reject(req.error);
+      req.onsuccess = () => resolve(req.result);
+    });
+  }
+  return dbPromise;
+}
+
+// Close the connection to the database when the user is leaving.
+window.addEventListener('pagehide', () => {
+  if (dbPromise) {
+    dbPromise.then(db => db.close());
+    dbPromise = null;
+  }
+});
+
+// Open the connection when the page is loaded or restored from bfcache.
+window.addEventListener('pageshow', () => openDB());
+```
+
+### Test to ensure your pages are cacheable
+
+Chrome DevTools can help you test your pages to ensure they're optimized for
+bfcache, and identify any issues that may be preventing them from being
+eligible.
+
+To test a particular page, navigate to it in Chrome and then in DevTools go to
+**Application** > **Back-forward Cache**. Next click the **Run Test** button and
+DevTools will attempt to navigate away and back to determine whether the page
+could be restored from bfcache.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/QafTzULUNflaSh77zBgT.png",
+alt="Back-forward cache panel in DevTools", width="800", height="313" %}
+
+{% Aside %}
+  The Back/forward Cache feature in DevTools is currently in active development.
+  We strongly encourage developers to test their pages in Chrome Canary to
+  ensure they're running the latest version of DevTools and getting the most
+  up-to-date bfcache recommendations.
+{% endAside %}
+
+If successful, the panel will report "Restored from back-forward cache":
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vPwN0z95ZBTiwZIpdZT4.png",
+alt="DevTools reporting a page was successfully restored from bfcache",
+width="800", height="313" %}
+
+If unsuccessful, the panel will indicate the page was not restored and list the
+reason why. If the reason is something you as a developer can address, that
+will also be indicated:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/ji3ew4DoP6joKdJvtGwa.png",
+alt="DevTools reporting failure to restore a page from bfcache", width="800",
+height="313" %}
+
+In the screenshot above, the use of an `unload` event listener is
+[preventing](/bfcache/#never-use-the-unload-event) the page from being eligible
+for bfcache. You can fix that by switching from `unload` to using `pagehide` instead:
+
+{% Compare 'worse' %}
+```js
+window.addEventListener('unload', ...);
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```js
+window.addEventListener('pagehide', ...);
+```
+{% endCompare %}
+
+Lighthouse 10.0 also [added a bfcache audit](https://developer.chrome.com/blog/lighthouse-10-0/#bfcache), which performs a similar test to the one DevTools does, and also provides reasons why the page is ineligible if the audit fails. Take a look at the [bfcache audit's docs](https://developer.chrome.com/docs/lighthouse/performance/bf-cache/) for more information.
+
+## How bfcache affects analytics and performance measurement
+
+If you track visits to your site with an analytics tool, you will likely notice
+a decrease in the total number of pageviews reported as Chrome continues to
+enable bfcache for more users.
+
+In fact, you're likely _already_ underreporting pageviews from other browsers
+that implement bfcache since most of the popular analytics libraries do not
+track bfcache restores as new pageviews.
+
+If you don't want your pageview counts to go down due to Chrome enabling
+bfcache, you can report bfcache restores as pageviews (recommended) by listening
+to the `pageshow` event and checking the `persisted` property.
+
+The following example shows how to do this with Google Analytics; the logic
+should be similar for other analytics tools:
+
+```js
+// Send a pageview when the page is first loaded.
+gtag('event', 'page_view');
+
+window.addEventListener('pageshow', (event) => {
+  // Send another pageview if the page is restored from bfcache.
+  if (event.persisted) {
+    gtag('event', 'page_view');
+  }
+});
+```
+
+### Measuring your bfcache hit ratio
+
+You may also wish to track whether the bfcache was used, to help identify pages
+that are not utilizing the bfcache. For example, with an event:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  // You can measure bfcache hit rate by tracking all bfcache restores and
+  // other back/forward navigations via a separate event.
+  const navigationType = performance.getEntriesByType('navigation')[0].type;
+  if (event.persisted || navigationType == 'back_forward' ) {
+    gtag('event', 'back_forward_navigation', {
+      'isBFCache': event.persisted,
+    });
+  }
+});
+```
+
+It is important to realize that there are a number of scenarios, outside
+of the site owners control, when a Back/Forward navigation will not use
+the bfcache, including:
+- when the user quits the browser and starts it again
+- when the user duplicates a tab
+- when the user closes a tab and uncloses it
+
+Even without those exclusions the bfcache will be discarded after a period to conserve memory.
+
+So, website owners should not be expecting a 100% bfcache hit ratio for all
+`back_forward` navigations. However, measuring their ratio can be useful to
+identify pages where the page itself is preventing bfcache usage for a high
+proportion of back and forward navigations.
+
+The Chrome team is working on a
+[`NotRestoredReasons` API](https://github.com/rubberyuzu/bfcache-not-retored-reason/blob/main/NotRestoredReason.md)
+to help expose the reasons why the bfcache was not used to help developers
+understand the reasoning the cache was not used and if this is something they
+can work on to improve for their sites.
+
+### Performance measurement
+
+bfcache can also negatively affect performance metrics collected [in the
+field](/user-centric-performance-metrics/#in-the-field), specifically metrics
+that measure page load times.
+
+Since bfcache navigations restore an existing page rather than initiate a new
+page load, the total number of page loads collected will decrease when bfcache
+is enabled. What's critical, though, is that the page loads being replaced by
+bfcache restores would likely have been some of the fastest page loads in your
+dataset. This is because back and forward navigations, by definition, are repeat
+visits, and repeat page loads are generally faster than page loads from first
+time visitors (due to [HTTP caching](/http-cache/), as mentioned earlier).
+
+The result is fewer fast page loads in your dataset, which will likely skew the
+distribution slower—despite the fact that the performance experienced by the
+user has probably improved!
+
+There are a few ways to deal with this issue. One is to annotate all page load
+metrics with their respective [navigation
+type](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types):
+`navigate`, `reload`, `back_forward`, or `prerender`. This will allow you to
+continue to monitor your performance within these navigation types—even if the
+overall distribution skews negative. This approach is recommended for
+non-user-centric page load metrics like [Time to First Byte
+(TTFB)](/ttfb/).
+
+For user-centric metrics like the [Core Web Vitals](/vitals/), a better option
+is to report a value that more accurately represents what the user experiences.
+
+{% Aside 'caution' %}
+  The `back_forward` navigation type in the [Navigation Timing
+  API](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types)
+  is not to be confused with bfcache restores. The Navigation Timing API only
+  annotates page loads, whereas bfcache restores are re-using a page loaded from
+  a previous navigation.
+{% endAside %}
+
+### Impact on Core Web Vitals
+
+[Core Web Vitals](/vitals/) measure the user's experience of a web page across a
+variety of dimensions (loading speed, interactivity, visual stability), and
+since users experience bfcache restores as faster navigations than traditional
+page loads, it's important that the Core Web Vitals metrics reflect this. After
+all, a user doesn't care whether or not bfcache was enabled, they just care that
+the navigation was fast!
+
+Tools like the [Chrome User Experience
+Report](https://developer.chrome.com/docs/crux/),
+that collect and report on the Core Web Vitals metrics treat bfcache restores as
+separate page visits in their dataset.
+
+And while there aren't (yet) dedicated web performance APIs for measuring these
+metrics after bfcache restores, their values can be approximated using existing
+web APIs.
+
+*   For [Largest Contentful Paint (LCP)](/lcp/), you can use the delta between
+    the `pageshow` event's timestamp and the timestamp of the next painted frame
+    (since all elements in the frame will be painted at the same time). Note
+    that in the case of a bfcache restore, LCP and FCP will be the same.
+*   For [First Input Delay (FID)](/fid/), you can re-add the event listeners
+    (the same ones used by the [FID
+    polyfill](https://github.com/GoogleChromeLabs/first-input-delay)) in the
+    `pageshow` event, and report FID as the delay of the first input after the
+    bfcache restore.
+*   For [Cumulative Layout Shift (CLS)](/cls/), you can continue to keep using
+    your existing Performance Observer; all you have to do is reset the current
+    CLS value to 0.
+
+For more details on how bfcache affects each metric, refer to the individual
+Core Web Vitals [metric guides pages](/vitals/#core-web-vitals). And for a
+specific example of how to implement bfcache versions of these metrics in code,
+refer to the [PR adding them to the web-vitals JS
+library](https://github.com/GoogleChrome/web-vitals/pull/87).
+
+{% Aside %}
+  As of `v1`, the [web-vitals](https://github.com/GoogleChrome/web-vitals)
+  JavaScript library [supports bfcache
+  restores](https://github.com/GoogleChrome/web-vitals/pull/87) in the metrics
+  it reports. Developers using `v1` or greater should not need to update their
+  code.
+{% endAside %}
+
+## Additional Resources
+
+*   [Firefox
+    Caching](https://developer.mozilla.org/Firefox/Releases/1.5/Using_Firefox_1.5_caching)
+    _(bfcache in Firefox)_
+*   [Page Cache](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/)
+    _(bfcache in Safari)_
+*   [Back/forward cache: web exposed
+    behavior](https://docs.google.com/document/d/1JtDCN9A_1UBlDuwkjn1HWxdhQ1H2un9K4kyPLgBqJUc/edit?usp=sharing)
+    _(bfcache differences across browsers)_
+*   [bfcache
+    tester](https://back-forward-cache-tester.glitch.me/?persistent_logs=1)
+    _(test how different APIs and events affect bfcache in browsers)_
+*   [Performance Game Changer: Browser Back/Forward Cache](https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/)
+    _(a case study from Smashing Magazine showing dramatic Core Web Vitals improvements by enabling bfcache)_
diff --git a/src/site/content/en/blog/blibli/index.md b/src/site/content/en/blog/blibli/index.md
new file mode 100644
index 00000000000..dd60e852c15
--- /dev/null
+++ b/src/site/content/en/blog/blibli/index.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: "Blibli's PWA generates 10x more revenue per user than their previous mobile website"
+subhead: "How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in mobile conversion rate, and 2.5x more pages per session."
+authors:
+  - collindionagata
+  - swethagopalakrishnan
+date: 2021-06-15
+description: How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in mobile conversion rate, and 2.5x more pages per session.
+hero: image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png
+alt: |
+  Images of the BliBli app.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - case-study
+---
+
+[Blibli](https://www.blibli.com/) is a well known e-commerce marketplace in
+Indonesia. The company had over 29 million average monthly website visits in
+2019. In a recent study, Blibli's web team found that their mobile web platform
+is a significant visitor and user acquisition platform, with 70% of web
+users landing on mobile and 30% of web users landing on desktop.
+
+With that insight, Blibli embarked on a journey to develop a better web
+experience and improve conversions. As a result, they were able to achieve some
+exceptional results:
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">42<sub>%</sub></p>
+    <p>Reduction in bounce rates</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">8<sub>x</sub></p>
+    <p>Better mCVR in installed PWA compared to browser mobile web</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">2.5<sub>x</sub></p>
+    <p>More pages/sessions on installed PWA</p>
+  </div>
+</div>
+
+## Highlighting the opportunity
+
+Blibli identified the following areas of opportunities:
+
++   For Blibli, the mobile web platform was important for user
+    acquisition with many users on mid- to low-tier devices.
++   Indonesia's internet economy was [expanding rapidly beyond tier 1
+    cities](https://storage.googleapis.com/gweb-economy-sea.appspot.com/assets/pdf/Indonesia-e-Conomy_SEA_2020_Country_Insights.pdf).
+    Hence, PWA and fast pages were a good investment to support user needs like
+    limited storage and slow networks.
++   50% of users that are coming to the Blibli web platform are returning users.
+
+## The approach they used
+
+The team took a staged strategy of short- to medium-term improvements on the
+mobile web platform. This included:
+
++   A performance optimized website including a UX revamped [home
+    page](https://www.blibli.com).
++   A lite version of the home page for new users with a
+    [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+    to cache critical assets for subsequent navigation.
++   A [Progressive Web App](/progressive-web-apps/) (PWA) for
+    returning users.
+
+### User flow
+
+New visitors are presented with a lightweight page which is three times faster
+when compared to the old home page.
+
+<figure>
+{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/bfL1ZGsRjv3QcbACnRGu.png", alt="A lightweight page that is three times faster than the old.", width="800", height="1422", params={w: '400' } %}
+  <figcaption>
+    A lightweight page that is three times faster than the old.
+  </figcaption>
+</figure>
+
+On subsequent pages, Blibli prompts users to add the PWA shortcut
+to their home screen.
+
+<figure>
+  <video controls autoplay loop muted style="width:800px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/blibli/save-to-home-screen.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/blibli/save-to-home-screen.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    The add to home screen prompt.
+  </figcaption>
+</figure>
+
+If users lose the network connection, they are presented with an elegant offline
+fallback page.
+
+<figure>
+{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/biDb6f1owQWxmRNXUauu.png", alt="An elegent offline fallback page.", width="800", height="468" %}
+  <figcaption>
+    An elegent offline fallback page.
+  </figcaption>
+</figure>
+
+Blibli's lite page created a first impression that Blibli.com is fast and
+responsive. Moreover, the lite page streamlined the number of features by only
+focusing on those that deliver the value proposition of Blibli.
+
+<figure>
+  <video controls autoplay loop muted style="width:800px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/blibli/responsive-comparison.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/blibli/responsive-comparison.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Comparison of loading times before and after streamlining.
+  </figcaption>
+</figure>
+
+Blibli's PWA is installable, giving it an app-like look and feel. It is also
+fast and reliable which was achieved using service worker caching and graceful
+offline fallback.
+
+<figure>
+{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ONCtI6MryOS5wCLPd3Ep.jpeg", alt="The offline fallback", width="800", height="1778" %}
+  <figcaption>
+    The offline fallback.
+  </figcaption>
+</figure>
+
+This comes as a delight for web users, a large proportion of whom use mid-tier
+devices. Since Blibli's PWA is less than 1MB in size (that's a whopping 24 times
+lighter than their Android app!), there is much less friction for users to
+install it. It also makes it easier for Blibli to retain users while providing
+them with a seamless app-like experience.
+
+### Set performance budgets
+
+Blibli made performance budgeting a performance standard within the tech
+development and management, where the standard was reviewed on a regular basis.
+It's set as the KPI of internal tech development, with the guidance
+of top management to ensure the best platform for all of our users.
+
+## Overall business results
+
++   3x reduction in page load times.
++   42% reduction in bounce rates.
++   8x Better mobile conversion rates in installed PWA compared to browser
+    mobile web.
++   2.5x more pages/sessions on installed PWA.
++   10x more revenue per user compared to the previous mobile website.
+
+"Speed and PWA were a valuable investment for us to provide the best mobile
+experience and representing our mission, to deliver the best platform for our
+users"
+_—Collin Dion Agata, Lead Product Manager, Blibli_
+
+Photo by [Cristian Escobar](https://unsplash.com/@cristian1) on Unsplash.
diff --git a/src/site/content/en/blog/blog.11tydata.js b/src/site/content/en/blog/blog.11tydata.js
index cd4016023e7..6c3209a6562 100644
--- a/src/site/content/en/blog/blog.11tydata.js
+++ b/src/site/content/en/blog/blog.11tydata.js
@@ -2,12 +2,4 @@ module.exports = {
   // All blog posts will inherit this layout
   // which ensures they generate the right permalinks.
   layout: 'post',
-  // Create a path object so things like breadcrumbs can differentiate posts
-  // coming from the blog versus other learning paths.
-  path: {
-    slug: 'blog',
-    title: 'Blog',
-    titleVariation: 'All articles',
-    description: 'Our latest news, updates, and stories for developers',
-  },
 };
diff --git a/src/site/content/en/blog/bookmyshow/index.md b/src/site/content/en/blog/bookmyshow/index.md
new file mode 100644
index 00000000000..fcd6241b310
--- /dev/null
+++ b/src/site/content/en/blog/bookmyshow/index.md
@@ -0,0 +1,75 @@
+---
+layout: post
+title: BookMyShow’s new Progressive Web App drives an 80% increase in conversions
+description: |
+  BookMyShow is India’s largest ticketing firm, with 50+ million monthly visitors. They developed an improved version of their mobile website using a Progressive Web App (PWA), optimizing speed and removing data constraints, which resulted in an 80+% increase in conversions.
+date: 2017-10-18
+updated: 2017-10-18
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+<figure>
+{% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/Lqz8rWt3D2px2obyxvTa.mp4", autoplay="true", loop="true", muted="true" %}
+</figure>
+
+[BookMyShow](https://in.bookmyshow.com/) is India’s largest ticketing firm,
+with 50+ million monthly visitors. They developed an improved version of their
+mobile website using a Progressive Web App (PWA), delivering an **80+% increase
+in conversions, which means more users purchasing tickets.**
+
+{% Blockquote 'Sahil Tewari, Assistant General Manager, Mobile & Web '%}
+Since launching our PWA, we’ve seen an exponential increase in mobile
+conversion rates. The PWA helped us connect with more people on mobile — and
+it's mobile users who make up the majority of our overall audience.
+{% endBlockquote %}
+
+- BookMyShow's PWA drove an 80%+ increase in their conversion rates.
+- The size of the PWA is 54x smaller than the Android app and 180x smaller
+  than the iOS app.
+- The PWA takes less than 2.94 seconds to load and enables checkout within
+  30 seconds.
+
+## Challenges
+
+BookMyShow has a growing mobile audience. Over 85% of transactions happen
+on mobile, and the company’s mobile web traffic recently overtook their desktop
+web traffic. Even with this growth in traffic, the company still encountered
+high bounce rates because their mobile website's load speed and user experience
+weren’t optimal.
+
+Their native app also posed problems as it required heavy data and memory usage
+to be effective. “People were using the native app and were happy with it, but
+their main concerns were the data usage and the memory it consumes,” says Anish
+Tripathi, Vice President of Design. “And if they uninstalled the app and tried
+using the mobile browser, it didn’t work the same way.”
+
+## Solution
+
+Knowing that speed and efficiency are key to a good ticket-buying experience,
+BookMyShow launched a PWA to deliver the best mobile web experience possible
+to the majority of their users. A PWA would provide a smooth, seamless movie-
+booking experience that would optimize speed and remove data constraints for
+existing customers, without sacrificing the user experience.
+
+The shift to a PWA also gave BookMyShow the opportunity to simultaneously
+migrate away from their PHP backend stack, which involved redoing some core
+development work. They adopted cutting-edge solutions and built a truly
+powerful, technically-advanced web app that provides users with fast,
+reliable, and engaging experiences just like the native app.
+
+The PWA is optimized for speed. The goal for the app—which took only **10
+months** to build—was created to enable checkout within **30 seconds**. They
+were also excited to use the
+“[**add to home screen**](/customize-install/)” feature
+to provide a native-app like experience. Their PWA application is only about
+440KB — **54 times smaller** than the Android app and **180 times smaller**
+than the iOS app. BookMyShow also took advantage of service workers to deliver
+reliable performance on slow or unreliable networks. Data consumption is also
+substantially lower, thanks to optimization. When a user asks for a particular
+page, only assets required for that page are loaded, conserving data. On 2G
+networks, the initial load time is just **4 seconds**. Even for personalized
+movie suggestions, the PWA takes **less than 2.94 seconds** in subsequent
+loads. All of these changes resulted in an **80+% increase in conversion**
+rates, a huge difference in BookMyShow’s bottom line.
diff --git a/src/site/content/en/blog/box-dnd-download/index.md b/src/site/content/en/blog/box-dnd-download/index.md
new file mode 100644
index 00000000000..fbd697839d5
--- /dev/null
+++ b/src/site/content/en/blog/box-dnd-download/index.md
@@ -0,0 +1,314 @@
+---
+layout: post
+title: Case Study - Drag and Drop Download in Chrome
+authors:
+  - davidtong
+date: 2010-09-25
+tags:
+  - blog
+  - case-study
+---
+## Introduction
+
+Drag and Drop (DnD) is one of the many great features of HTML 5, and it is supported in Firefox 3.5, Safari, Chrome and IE.
+Google recently rolled out a [new feature](http://gmailblog.blogspot.com/2010/08/drag-and-drop-attachments-to-save-them.html)
+that allows Google Chrome users to drag and drop files from the browser to the desktop.
+It is an extremely convenient feature, but it was not widely known until Ryan Seddon posted an article on
+the [discoveries](http://www.thecssninja.com/javascript/gmail-dragout) of his reverse engineering on this new feature.
+
+At Box.net, we are very excited about how these new capabilities are enabling us to improve
+our cloud content management solution, as well as contribute more to the developer community.
+I am pleased to announce that DnD Download has been integrated into our product.
+Now, Box users can drag files directly from a Chrome browser to their desktop to download and save the file.
+
+I would like to share how I went through several iterations during the development of this new feature.
+
+## Check for Drag and Drop API Support
+
+The first thing to do is check that your browser fully supports HTML5 drag and drop.
+An easy way to do that is use a library called [Modernizr](http://www.modernizr.com/) 
+to check for a certain feature:
+
+```js
+if (Modernizr.draganddrop) {
+// Browser supports native HTML5 DnD.
+} else {
+// Fallback to a library solution.
+}
+``` 
+
+## Iteration 1
+
+I first tried the approach that Seddon found in Gmail. I added a new attribute
+called 'data-downloadurl' to anchor links of files. This process uses HTML5's [custom data attributes](http://ejohn.org/blog/html-5-data-attributes/).
+In data-downloadurl, you need to include the MIME type of the file, the destination file name
+(the desired file name of the downloaded file), and the download URL of the file.
+Thus, this is added to the HTML template:
+
+```html
+<a href="#" class="dnd"
+data-downloadurl="{$item.mime}:{$item.filename}:{$item.url}"></a>
+```
+
+which would create an output like the following:
+
+```html
+<a href="#" class="dnd" data-downloadurl=
+"image/jpeg:Penguins.jpg:https://www.box.net/box_download_file?file_id=f66690"></a>
+```
+
+Based on a jQuery [plugin](http://dev.blog.salesking.eu/coding/jquery-plugin-to-drag-files-from-browser-onto-desktop/)
+that von Schorsch created, which is based on Seddon's article,
+I added a jQuery plugin that does a bit of browser feature detection.
+Highlighted are the lines that I added to von Schorsch's version:
+
+```js
+(function($) {
+
+$.fn.extend({
+dragout: function() {
+var files = this;
+if (files.length > 0) {
+    $(files).each(function() {
+    var url = (this.dataset && this.dataset.downloadurl) ||
+                this.getAttribute("data-downloadurl");
+    if (this.addEventListener) {
+        this.addEventListener("dragstart", function(e) {
+        if (e.dataTransfer && e.dataTransfer.constructor == Clipboard &&
+            e.dataTransfer.setData('DownloadURL', 'http://www.box.net')) {
+            e.dataTransfer.setData("DownloadURL", url);
+        }
+        },false);
+    }
+    });
+}
+}
+});
+
+})(jQuery);
+```
+
+The reason I did this is because without prior browser detection, doing addEventListener()
+to a HTML element in IE will create a JavaScript error because IE uses its own attachEvent() method.
+e.dataTransfer is undefined in IE (as of now), e.dataTransfer.constructor returns DataTransfer
+in Firefox (Mozilla), while Webkit browsers (Chrome and Safari) implements the Clipboard constructor.
+In Safari, `e.dataTransfer.setData('DownloadURL','http://www.box.net')` returns false, and Chrome returns
+true for this statement. Doing all of the tests mentioned above leave the feature only available to Chrome.
+You may argue that I could simply do the following:
+
+```js
+/chrome/.test( navigator.userAgent.toLowerCase() )
+```
+
+But I prefer feature detection to browser detection, though this technically does not detect that DnD download will work.
+
+### Problems of iteration 1
+
+1) Because we currently have on-page DnD enabled for moving/copying files between folders,
+we need a way to distinguish DnD Download and on-page DnD. Technically, we cannot combine these
+two actions. We cannot predict whether the user wants to move a file to another folder within
+the Box.net account or drag it to their desktop. These two actions are completely different.
+Moreover, there is no easy way to detect if the cursor is outside the browser window.
+You could use window.onmouseout (IE) and document.onmouseout (other browsers) to attach mouseout
+event to the document, and check if `e.relatedTarget.nodeName == "HTML"` (e is the mouseout event
+or window.event, whichever is available). But this is quite difficult due to event bubbling.
+The event may trigger randomly when you are over an image or layer, especially in a complex web app like Box.net.
+
+2) We want the user to explicitly do something to prevent them from dragging something out
+to the desktop by mistake. Potentially, an editor of a Box folder can upload an executable file
+that does something undesirable on the computer of whoever downloads it. We want the user to know
+exactly when a file would be downloaded to the desktop.
+
+## Iteration 2
+
+We decided to experiment with control + drag (dragging a file when the Windows Ctrl key is pressed).
+This action is consistent with what people can do on a Windows desktop to duplicate a file.
+It also requires extra work (but not an extra step) from the user to prevent files from downloaded by mistake.
+
+The jQuery plugin in iteration 1 is abandoned now because we need to tightly integrate DnD Download
+with the on-page DnD. For those who are interested, we use a modified version of jQuery UI's [Draggable plugin](http://jqueryui.com/demos/draggable/).
+Inside the mousedown event of a target element, we put the following code:
+
+```js
+// DnD to desktop when the Ctrl key is pressed while dragging
+if (e.ctrlKey) {
+var that = $(e.target);
+// make sure it is not IE (attachEvent).
+if (that[0].addEventListener) {
+    that[0].addEventListener("dragstart",function(e) {
+        // e.dataTransfer in Firefox uses the DataTransfer constructor
+        // instead of Clipboard
+        // make sure it's Chrome and not Safari (both webkit-based).
+        // setData on DownloadURL returns true on Chrome, and false on Safari
+        if (e.dataTransfer && e.dataTransfer.constructor == Clipboard &&
+            e.dataTransfer.setData('DownloadURL','http://www.box.net')) {
+        var url = (this.dataset && this.dataset.downloadurl) ||
+                    this.getAttribute("data-downloadurl");
+        e.dataTransfer.setData("DownloadURL", url);
+        }
+    }, false);
+    return;
+}
+}
+```
+
+Other than enabling the Ctrl key, we also added a little toaster tooltip,
+which shows up when the user performs a regular on-page drag. It tells the user
+that files can be downloaded if the file icon is dragged to the desktop
+while the Ctrl key is being held.
+
+### Problems of iteration 2
+
+Due to security concerns, Box.net does not expose permanent URLs to directly access
+static files. This is not unique to Box.net. Any online storage service should not
+expose permanent URLs without an extra layer of security to check if the file is public
+and whether the intended download is requested by a user with appropriate permissions.
+
+When following the "download URL" (e.g. `https://www.box.net/box_download_file?file_id=f_60466690`)
+of an item, it returns a "302 Found" status code, and redirects to a random URL
+(e.g. `https://www.box.net/dl/6045?a=1f1207a084&m=168299,11211&t=2&b=aca15820d924e3b`) that is the temporary
+"actual URL" of the file. The challenge is that it expires every few minutes, and so placing it in
+the HTML output is impractical. It could return "404" when the user tries to download the file
+at the link in the HTML output generated several minutes ago.
+
+DnD Download only works on actual URLs that point directly to a resource.
+If redirection is involved, it is currently not smart enough to follow the chain
+(and it should never follow the chain due to security). Therefore, although the
+link [https://www.box.net/box_download_file?file_id=f_60466690](https://www.box.net/box_download_file?file_id=f_60466690) from above would let you download the file when you enter it in the browser location bar, it would not work with DnD.
+
+To better illustrate the differences between an "actual URL" and a "redirect URL", see the screenshots:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yEujETvFDmI4JgTCKo0Q.png", alt="302 redirect URL", width="800", height="360" %}
+<figcaption>302 redirect URL</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XVGQB738on1KpBgHHPiW.png", alt="Actual URL", width="656", height="304" %}
+<figcaption>Actual URL</figcaption>
+</figure>
+
+## Iteration 3
+
+Let's try Ajax.
+
+We slightly modified the code in the previous iteration and came up with the following:
+
+```js
+// DnD to desktop when the Ctrl key is pressed while dragging
+if (e.ctrlKey) {
+var that = $(e.target);
+// make sure it is not IE (attachEvent).
+if (that[0].addEventListener) {
+that[0].addEventListener("dragstart", function(e) {
+    // e.dataTransfer in Firefox uses the DataTransfer constructor
+    // instead of Clipboard
+    // make sure it's Chrome and not Safari (both webkit-based).
+    // setData on DownloadURL returns true on Chrome, and false on Safari
+    if (e.dataTransfer && e.dataTransfer.constructor == Clipboard &&
+        e.dataTransfer.setData('DownloadURL', 'http://www.box.net')) {
+    var url = (this.dataset && this.dataset.downloadurl) ||
+                this.getAttribute("data-downloadurl");
+    $.ajax({
+        complete: function(data) {
+        e.dataTransfer.setData("DownloadURL", data.responseText);
+        },
+        type:'GET',
+        url: url
+    });
+    }
+}, false);
+return;
+}
+}
+```
+
+This makes sense. Upon dragstart, it immediately makes an Ajax call to the server to
+retrieve the latest download URL of the file. However, it does not work.
+
+It turns out that it needs to be a synchronous call (or as I like to call it, Sjax).
+Seems like setData has to be done at the time when the event listener is attached.
+According to jQuery's API, the highlighted lines become:
+
+```js
+$.ajax({
+async: false,
+complete: function(data) {
+e.dataTransfer.setData("DownloadURL", data.responseText);
+},
+type: 'GET',
+url: url
+});
+```
+
+And it works fine until I unplugged the network connection. Because it does
+a synchronous call, the browser freezes until the call is successful.
+If the Ajax call fails (404, or if it does not respond at all), the browser would not
+defrost at all as if it had crashed.
+
+It is much safer to do something like the following:
+
+```js
+$.ajax({
+async: false,
+complete: function(data) {
+e.dataTransfer.setData("DownloadURL", data.responseText);
+},
+error: function(xhr) {
+if (xhr.status == 404) {
+    xhr.abort();
+}
+},
+type: 'GET',
+timeout: 3000,
+url: url
+});
+```
+
+For a demo of this feature, feel free to upload a static file to a Box.net account.
+Drag the file icon out to your desktop while holding the Ctrl key. If you do not have an account,
+it literally takes less than 30 seconds to create one.
+
+With this feature, you can be creative and make a lot of things possible.
+Dragging an image to a Windows printer dialog will immediately have the image printed.
+You can copy a song from Box to your mobile phone's drive, drag a file from Box
+to your IM client in order to transfer it directly to your friend…
+This opens up endless possibilities to increase your productivity.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/l3YZ7VpC3XPMuAfX1KCP.png", alt="ragging a file to the printer", width="800", height="552" %}
+<figcaption>Dragging a file to the printer.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/57Eup6Vy1s6JtZOUA87y.png", alt="Dragging a file to IM client", width="800", height="378" %}
+<figcaption>Dragging a file to IM client.</figcaption>
+</figure>
+
+## Thoughts, and future improvements
+
+This is still less than ideal, as a synchronous call could lock up the browser
+for a brief moment. The HTML 5 Web Worker does not help either, as a Web Worker has
+to be asynchronous. It does seem like setData has to be done at the time when
+the event listener is attached.
+
+In reality, the performance is pretty acceptable. The synchronous Ajax (Sjax)
+call merely retrieves an URL string, which should be pretty fast. It does come with big
+overhead in the HTTP header, which can possibly be addressed by WebSockets.
+However, until we see more usage of this kind of technology, it is not worth using WebSockets
+to send every little update down to the client.
+
+I also hope that the capability of multi-file download will be added to the API
+in the future. Combined with custom checkboxes to select multiple files on the user
+interface, this would be incredible. Furthermore, it would be even nicer if client-generated files,
+such as text files generated from the result of a form submitted, can be downloaded in this way.
+
+- Column dnd
+- Rearrange list
+- Creating an image gallery 
+- Exporting a canvas image 
+
+## References
+
+- [Drag and Drop](http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd) specification
+
diff --git a/src/site/content/en/blog/bridging-the-gap/index.md b/src/site/content/en/blog/bridging-the-gap/index.md
new file mode 100644
index 00000000000..5fef05de5d4
--- /dev/null
+++ b/src/site/content/en/blog/bridging-the-gap/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: "Bridging the gap"
+subhead: >
+  Making it easier to build for the web. 
+description: >
+  Making it easier to build for the web.
+date: 2022-05-11
+updated: 2022-05-12
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/Yh6JWjnkiMnPtXGZOAPE.jpg
+alt: A bridge stretching over a wide gap.
+authors:
+  - rachelandrew
+tags:
+  - blog
+---
+
+{% Aside %}
+  Watch the talk [Bridging the Gap](https://www.youtube.com/watch?v=fGlhRnp5M-g) from Google I/O '22:
+  {% YouTube "fGlhRnp5M-g" %}
+{% endAside %}
+
+When we talk to developers, be that individually or via surveys such as the [State of CSS](https://stateofcss.com/), we repeatedly hear the same things. Developers find it hard to make websites and applications that work well across browsers, and find it hard to know when exciting new features are safe to use.
+
+## Flexbox gap
+
+As an example of a problematic property, the [`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) property lets you make gaps between [grid](/learn/css/grid/) or [flex](/learn/css/flexbox/) items, or columns in a [multicol](https://developer.mozilla.org/docs/Web/CSS/CSS_Columns) container. While we have had `column-gap` in multicol for a long time, the property first appeared in grid layout as `grid-gap`, along with `grid-column-gap` and `grid-row-gap`.
+
+Just after grid layout landed in browsers, the property was renamed as `gap`, along with `row-gap` and `column-gap`. It was then specified to work in flex layout too. The renaming means that we don’t have multiple properties doing the same thing.
+
+```css
+.box {
+  display: flex;
+  gap: 1em;
+}
+```
+
+Firefox shipped the property for flex layouts in October 2018. It didn’t show up in Chrome until July 2020, followed by Safari in April 2021. This meant there was a gap of two years and six months before we could safely use `gap`. In reality, for most developers the wait was much longer, due to needing to support browser versions older than the latest one. Supporting `gap` in flex layout was made more problematic by the fact we can’t use [feature queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries) to detect gap support in flex layout. As the `gap` property is supported in grid, `@supports (gap:1em)` will return true.
+
+An additional problem is that when a new feature lands in one browser, people start to talk about it and share demos. This often begins long before the feature is in any stable browser at all. This can be confusing for developers, or at the least, frustrating. Repeatedly, shiny new features are being talked about everywhere, and then you discover you can’t actually use them due to lack of support.
+
+## Why are there gaps in support?
+
+This is not a post pointing the finger at one browser for being slow. If you look across different platform features, you’ll discover that different browsers take the lead on different features. 
+
+Most features will be prototyped in one browser. For example, the grid layout specification was first created by Microsoft and implemented in an initial form in Internet Explorer 10. An engineer at Mozilla did a lot of work to figure out how subgrid should behave, and so this feature landed in Firefox first. We’re seeing Safari take the lead on some exciting new color functions. 
+
+While one browser may take the lead on prototyping, representatives of all browsers (and other organizations) in the CSS Working Group discuss CSS features. It’s very important that a feature can be implemented in all browsers, and that it isn’t designed in such a way as to make it impossible to implement in one browser. That would lead to a permanent gap in support, and lack of adoption of the feature.
+
+When it comes to implementing a feature however, it needs to be prioritized alongside all the other possible features for that browser. And, sometimes things are held up behind other work that needs to be done to make the browser better. A great example of this is the [RenderingNG](https://developer.chrome.com/blog/renderingng/) work in Chromium. This has paved the way for the implementation of subgrid; however, the long gap between Firefox and Chromium shipping subgrid is due to the need for grid layout to be reimplemented in the new rendering engine first.
+
+## The problems
+
+We have two problems here. The first is the interoperability problem, the fact that it can take a long time from the point at which a feature lands in one browser to when it is available everywhere. 
+
+The second is a problem of messaging. How can we make it clear where the gaps in support are? How do we share new features without causing everyone to have to carefully research each thing to work out how well supported it is? 
+
+### Interoperability
+
+Browsers are already working together to solve the interoperability issue. Last year [Compat 2021](/compat2021/) helped to close the gap in support on a number of features, including the gap property in flex layout. This year the [Interop 2022](/interop-2022/) effort is focussing on 15 features, and there has already been movement on some of these.
+
+You can follow progress on the [Interop 2022 dashboard](https://wpt.fyi/interop-2022).
+
+### Messaging
+
+The second problem is something that I’m keen to help with when we talk about features here on web.dev and on [developer.chrome.com](https://developer.chrome.com/). I want the status of features to be really clear when you read our content, and for us to provide practical ways to navigate support issues. 
+
+We’ve launched a number of fundamental courses, with more to come. These courses help you to learn how to build for the modern web, using core web platform technologies. Check out:
+
+- [Learn CSS](/learn/css/)
+- [Learn Forms](/learn/forms/)
+- [Learn Design](/learn/design/)
+- [Learn PWA](/learn/pwa/)
+
+We’re working to focus our content on this site on those things that you can safely use. We’re not completely there yet; however, you should start to see a bit of a shift towards the practical over the coming months.
+
+We also contribute to open web documentation through our support of the [Open Web Docs](https://opencollective.com/open-web-docs) project. This ensures we have first-class documentation on [MDN](https://developer.mozilla.org/), along with up-to-date [browser compatibility data](https://github.com/mdn/browser-compat-data). We then use this data here on web.dev to show support for features. Here’s the current support of `gap` in flex layout.
+
+{% BrowserCompat 'css.properties.gap.flex_context' %}
+
+If you want to know more about Chrome’s vision for the web, the things we are experimenting with in Origin and Developer trials, then you’ll increasingly find that content on our sister site—[developer.chrome.com](https://developer.chrome.com/). The content there may well be experimental, or only supported in Chrome right now, but we’d love you to explore it and offer feedback.
+
+It really is an exciting time for the web right now. We hope we can help to bring key features to you more quickly, and be clear about the gaps that do exist, making web development more fun and less frustrating.
+
+_Photo by [Cristofer Maximilian](https://unsplash.com/es/@cristofer)._
+
+
+
+  
+  
\ No newline at end of file
diff --git a/src/site/content/en/blog/browser-level-lazy-loading-for-cmss/index.md b/src/site/content/en/blog/browser-level-lazy-loading-for-cmss/index.md
new file mode 100644
index 00000000000..e176d4c5f06
--- /dev/null
+++ b/src/site/content/en/blog/browser-level-lazy-loading-for-cmss/index.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: Browser-level lazy loading for CMSs
+subhead: Learnings for adopting the standardized loading attribute
+authors:
+  - felixarntz
+date: 2020-11-20
+updated: 2021-07-29
+hero: image/admin/Tx8vq8DMsflw49EHAa8Q.jpg
+alt: A lazy leopard relaxing on a tree
+description: |
+  This post provides guidance on how to adopt the loading
+  attribute in content management systems.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+---
+
+My goal with this post is to persuade CMS platform developers and contributors
+(i.e. the people who develop CMS cores) that
+[now is the time to implement support for the browser-level image lazy loading feature](#the-case-for-implementing-lazy-loading-now).
+I'll also share recommendations on how to [ensure high-quality user
+experiences](#user-experience-recommendations) and [enable customization by other
+developers](#technical-recommendations) while implementing lazy loading. These
+guidelines come from our experience adding support to WordPress as well as
+helping Joomla, Drupal, and TYPO3 implement the feature.
+
+Regardless of whether you're a CMS platform developer or a CMS user (i.e. a
+person who builds websites with a CMS), you can use this post to learn more
+about the benefits of browser-level lazy loading in your CMS. Check out the
+[Next steps](#next-steps) section for suggestions on how you can
+encourage your CMS platform to implement lazy loading.
+
+## Background
+
+Over the past year,
+[lazy loading images and iframes using the `loading` attribute](/browser-level-image-lazy-loading/)
+has
+[become part of the WHATWG HTML Standard](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes)
+and
+[seen growing adoption by various browsers](https://caniuse.com/#feat=loading-lazy-attr).
+These milestones however only lay the groundwork for a
+[faster and more resource-saving web](/browser-level-image-lazy-loading/#why-browser-level-lazy-loading).
+It is now on the distributed web ecosystem to make use of the `loading`
+attribute.
+
+Content management systems
+[power about 60% of websites](https://w3techs.com/technologies/overview/content_management),
+so these platforms play a vital role in bringing adoption of modern browser
+features to the web. With a few popular open-source CMSs such as
+[WordPress](https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/),
+[Joomla](https://github.com/joomla/joomla-cms/pull/28838), and
+[TYPO3](https://review.typo3.org/c/Packages/TYPO3.CMS/+/63317) having already
+implemented support for the `loading` attribute on images, let's have a look at
+their approaches and the takeaways which are relevant for adopting the feature
+in other CMS platforms as well. Lazy loading media is a key web performance
+feature that sites should benefit from at a large scale, which is why adopting
+it at the CMS core level is recommended.
+
+## The case for implementing lazy loading now
+
+### Standardization
+
+Adoption of non-standardized browser features in CMSs facilitates widespread
+testing and can surface potential areas of improvement. However, the general
+consensus across CMSs is that, as long as a browser feature is not standardized,
+it should preferably be implemented in the form of an extension or plugin for
+the respective platform. Only once standardized can a feature be considered for
+adoption in the platform core.
+
+{% Aside 'success' %}
+Browser-level lazy loading is now part of the WHATWG HTML Standard for
+both
+[`img`](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading)
+and
+[`iframe`](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-loading)
+elements.
+{% endAside %}
+
+### Browser support
+
+Browser support of the feature is a similar concern: The majority of CMS users
+should be able to benefit from the feature. If there is a considerable
+percentage of browsers where the feature is not yet supported, the feature has
+to ensure that it at least has no adverse effect for those.
+
+{% Aside 'success' %}
+[Browser-level lazy loading is widely supported by browsers](https://caniuse.com/#feat=loading-lazy-attr)
+and
+[the `loading` attribute is simply ignored](/browser-level-image-lazy-loading/#browser-compatibility)
+by those browsers that have not adopted it yet.
+{% endAside %}
+
+### Distance-from-viewport thresholds
+
+A common concern with lazy loading implementations is that they in principle
+increase the likelihood that an image will not be loaded once it becomes visible
+in the user's viewport because the loading cycle starts at a later stage.
+Contrary to previous JavaScript-based solutions,
+[browsers approach this conservatively](/browser-level-image-lazy-loading/#distance-from-viewport-thresholds)
+and furthermore can fine-tune their approach based on real-world user experience data,
+minimizing the impact, so browser-level lazy loading should be safe to adopt
+by CMS platforms.
+
+{% Aside 'success' %}
+Experiments using Chrome on Android indicated that on 4G networks, 97.5% of
+below-the-fold lazy-loaded images were fully loaded within 10ms of becoming
+visible, compared to 97.6% for non lazy-loaded images. In other words, there was
+virtually no difference (0.1%) in the user experience of eagerly-loaded images
+and lazy-loaded images.
+{% endAside %}
+
+## User experience recommendations
+
+### Require dimension attributes on elements
+
+In order to avoid [layout shifts](/cls/), it has been a
+long-standing recommendation that
+[embedded content such as images or iframes should always include the dimension attributes `width` and `height`](/optimize-cls/#images-without-dimensions),
+so that the browser can infer the aspect ratio of those elements before actually
+loading them. This recommendation is relevant regardless of whether an element
+is being lazy-loaded or not. However, due to the
+[0.1% greater likelihood of an image not being fully loaded once in the viewport](#distance-from-viewport-thresholds)
+it becomes slightly more applicable with lazy loading in place.
+
+CMSs should preferably provide dimension attributes on all images and iframes.
+If this is not possible for every such element, they are recommended to skip
+lazy loading images which do not provide both of these attributes.
+
+{% Aside 'caution' %}
+If the CMS is unable to provide `width` and `height` attributes on
+images and iframes on a large scale, you will have to weigh the trade-offs
+between saving additional network resources and a slightly higher chance for
+layout shifts to decide whether lazy loading is worth it.
+{% endAside %}
+
+### Avoid lazy loading above-the-fold elements
+
+At the moment CMSs are recommended to only add `loading="lazy"` attributes to
+images and iframes which are positioned below-the-fold, to avoid a delay
+in the [Largest Contentful Paint](/lcp/) metric, which in some cases can be
+significant [as discovered in July 2021](/lcp-lazy-loading/). However, it has
+to be acknowledged that it's complex to assess the position of an element
+relative to the viewport before the rendering process. This applies especially
+if the CMS uses an automated approach for adding `loading` attributes, but even
+based on manual intervention several factors such as the different viewport
+sizes and aspect ratios have to be considered. Still, it is strongly recommended to omit hero images and other images or iframes that are likely to appear above the fold from being lazy-loaded.
+
+{% Aside %}
+Depending on the capabilities and audience of the CMS, try to define reasonable
+estimates for whether an image or iframe is likely to be in the initial
+viewport, for example never lazy loading elements in a header template or the hero image of the main content. In
+addition, offer either a UI or API which allows modifying the existence of the
+`loading` attribute on elements.
+{% endAside %}
+
+### Avoid a JavaScript fallback
+
+While JavaScript can be used to
+[provide lazy loading to browsers which do not (yet) support the `loading` attribute](/browser-level-image-lazy-loading/#how-do-i-handle-browsers-that-dont-support-lazy-loading),
+such mechanisms always rely on initially removing the `src` attribute of an
+image or iframe, which causes a delay for the browsers that _do_ support the
+attribute. In addition, rolling out such a JavaScript-based solution in the
+frontends of a large-scale CMS increases the surface area for potential issues,
+which is part of why no major CMS had adopted lazy loading in its core prior to
+the standardized browser feature.
+
+{% Aside 'caution' %}
+Avoid providing a JavaScript-based fallback in the CMS. With
+growing adoption of the `loading` attribute and no adverse effects on browser
+versions that do not support it yet, it is safer to not provide the feature to
+those browsers and instead encourage updating to a newer browser version.
+{% endAside %}
+
+## Technical recommendations
+
+### Enable lazy loading by default
+
+The overall recommendation for CMSs implementing browser-level lazy loading is to
+enable it by default, i.e. `loading="lazy"` should be added to images and
+iframes, preferably
+[only for those elements that include dimension attributes](#require-dimension-attributes-on-elements).
+Having the feature enabled by default will result in greater network resource
+savings than if it had to be enabled manually, for example on a per-image
+basis.
+
+As much as possible, `loading="lazy"` should
+[only be added to elements which likely appear below-the-fold](#avoid-lazy-loading-above-the-fold-elements).
+While this requirement can be complex to implement for a CMS due to lack of client-side awareness and various viewport sizes, it is recommended to at least [use approximate heuristics to omit elements such as hero images that will likely appear above-the-fold from being lazy-loaded](/lcp-lazy-loading/#testing-a-fix).
+
+### Allow per-element modifications
+
+While `loading="lazy"` should be added to images and iframes by default, it is
+crucial to allow omitting the attribute on certain images, for example to
+optimize for [LCP](/lcp/). If the audience of the CMS is on
+average considered more tech-savvy, this could be a UI control exposed for every
+image and iframe allowing to opt out of lazy loading for that element.
+Alternatively or in addition, an API could be exposed to third-party developers
+so that they can make similar changes through code.
+
+WordPress for example allows to skip the `loading` attribute either for an
+[entire HTML tag or context](https://developer.wordpress.org/reference/hooks/wp_lazy_loading_enabled/)
+or for a
+[specific HTML element in the content](https://developer.wordpress.org/reference/hooks/wp_img_tag_add_loading_attr/).
+
+{% Aside 'caution' %}
+If an element should not be lazy-loaded, require or encourage
+skipping the `loading` attribute entirely. While using `loading="eager"` is a
+supported alternative, this would tell the browser explicitly to always load the
+image right away, which would prevent potential benefits if browsers implemented
+further mechanisms and heuristics to automatically decide which elements to
+lazy-load.
+{% endAside %}
+
+### Retrofit existing content
+
+At a high level, there are two approaches for adding the `loading` attribute to
+HTML elements in a CMS:
+
++   Either add the attribute from within the content editor in the
+    backend, persistently saving it in the database.
++   Add the attribute on the fly when rendering content from the database in
+    the frontend.
+
+It is recommended for CMS to opt for adding the attribute on the fly when
+rendering, in order to bring the lazy loading benefits to any existing content
+as well. If the attribute could solely be added through the editor, only new or
+recently modified pieces of content would receive the benefits, drastically
+reducing the CMS's impact on saving network resources. Furthermore, adding the
+attribute on the fly will easily allow for future modifications, should the
+capabilities of browser-level lazy loading be further expanded.
+
+Adding the attribute on the fly should cater for a potentially existing
+`loading` attribute on an element though and let such an attribute take
+precedence. This way, the CMS or an extension for it could also implement the
+editor-driven approach without causing a conflict with duplicate attributes.
+
+#### Optimize server-side performance
+
+When adding the `loading` attribute to content on the fly using (for example) a
+server-side middleware, speed is a consideration. Depending on the CMS, the
+attribute could be added either via DOM traversal or regular expressions, with
+the latter being recommended for performance.
+
+Regular expressions use should be kept to a minimum, for example a single regex
+which collects all `img` and `iframe` tags in the content including their
+attributes and then adds the `loading` attribute to each tag string as
+applicable. WordPress for example goes as far as
+[having a single general regular expression to perform various on-the-fly operations to certain elements](https://developer.wordpress.org/reference/functions/wp_filter_content_tags/),
+of which adding `loading="lazy"` is just one, using a single regular expression
+to facilitate multiple features. This form of optimization furthermore is
+another reason why adopting lazy loading in a CMS's core is recommended over an
+extension - it allows for better server-side performance optimization.
+
+## Next steps
+
+See if there is an existing feature request ticket to add support for the
+feature in your CMS, or open a new one if there is none yet. Use references to
+this post as needed to support your proposal.
+
+Tweet me ([felixarntz@](https://twitter.com/felixarntz)) for questions or
+comments, or to get your CMS listed on this page if support for browser-level
+lazy loading has been added. If you encounter other challenges, I am also
+curious to learn more about them to hopefully find a solution.
+
+If you're a CMS platform developer, study how other CMSs have implemented
+lazy loading:
+
++   [WordPress Core](https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/)
++   [Joomla](https://github.com/joomla/joomla-cms/pull/28838)
++   [TYPO3](https://review.typo3.org/c/Packages/TYPO3.CMS/+/63317)
+
+You can use the learnings from your research and the technical recommendations
+from this post to start contributing code to your CMS, for example in form of a
+patch or pull-request.
+
+Hero photo by [Colin Watts](https://unsplash.com/@imagefactory?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/lazy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText).
diff --git a/src/site/content/en/blog/browser-nativefs/caniuse.png b/src/site/content/en/blog/browser-nativefs/caniuse.png
deleted file mode 100644
index ef810f3b6e2..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/caniuse.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/chrome-modify.png b/src/site/content/en/blog/browser-nativefs/chrome-modify.png
deleted file mode 100644
index 4212b828ab8..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/chrome-modify.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/chrome-oversave.png b/src/site/content/en/blog/browser-nativefs/chrome-oversave.png
deleted file mode 100644
index 97e02542e61..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/chrome-oversave.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/chrome-save-as.png b/src/site/content/en/blog/browser-nativefs/chrome-save-as.png
deleted file mode 100644
index 1cf50c75716..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/chrome-save-as.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/hero.jpg b/src/site/content/en/blog/browser-nativefs/hero.jpg
deleted file mode 100644
index fd6e53d7395..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/index.md b/src/site/content/en/blog/browser-nativefs/index.md
deleted file mode 100644
index 788e7df6354..00000000000
--- a/src/site/content/en/blog/browser-nativefs/index.md
+++ /dev/null
@@ -1,376 +0,0 @@
----
-layout: post
-title: Reading and writing files and directories with the browser-nativefs library
-authors:
-  - thomassteiner
-description: |
-  All modern browsers can read native files and directories; however,
-  true write access, that is, more than just downloading files,
-  is limited to browsers that implement the Native File System API.
-  This post introduces a support library called browser-nativefs
-  that acts as an abstraction layer on top of the Native File System API
-  and that transparently falls back to legacy approaches for dealing with files.
-scheduled: true
-date: 2020-07-27
-# updated: 2020-06-30
-hero: hero.jpg
-tags:
-  - blog
-  - progressive-web-apps
-  - capabilities
----
-
-Browsers have been able to deal with files and directories for a long time.
-The [File API](https://w3c.github.io/FileAPI/)
-provides features for representing file objects in web applications,
-as well as programmatically selecting them and accessing their data.
-The moment you look closer, though, all that glitters is not gold.
-
-## The traditional way of dealing with files
-
-{% Aside %}
-  If you know how it used to work the old way, you can
-  [jump down straight to the new way](#the-native-file-system-api).
-{% endAside %}
-
-### Opening files
-
-As a developer, you can open and read files via the
-[`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
-element.
-In its simplest form, opening a file can look something like the code sample below.
-The `input` object gives you a [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList),
-which in the case below consists of just one
-[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
-A `File` is a specific kind of [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob),
-and can be used in any context that a Blob can.
-
-```js
-const openFile = async () => {
-  return new Promise((resolve) => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.addEventListener('change', () => {
-      resolve(input.files[0]);
-    });
-    input.click();
-  });
-};
-```
-
-### Opening directories
-
-For opening folders (or directories), you can set the
-[`<input webkitdirectory>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-webkitdirectory)
-attribute.
-Apart from that, everything else works the same as above.
-Despite its vendor-prefixed name,
-`webkitdirectory` is not only usable in Chromium and WebKit browsers, but also in the legacy EdgeHTML-based Edge as well as in Firefox.
-
-### Saving (rather: downloading) files
-
-For saving a file, traditionally, you are limited to *downloading* a file,
-which works thanks to the
-[`<a download>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download:~:text=download)
-attribute.
-Given a Blob, you can set the anchor's `href` attribute to a `blob:` URL that you can get from the
-[`URL.createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)
-method.
-{% Aside 'caution' %}
-To prevent memory leaks, always revoke the URL after the download.
-{% endAside %}
-
-```js
-const saveFile = async (blob) => {
-  const a = document.createElement('a');
-  a.download = 'my-file.txt';
-  a.href = URL.createObjectURL(blob);
-  a.addEventListener('click', (e) => {
-    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
-  });
-  a.click();
-};
-```
-
-### The problem
-
-A massive downside of the *download* approach is that there is no way to make a classic
-open→edit→save flow happen, that is, there is no way to *overwrite* the original file.
-Instead, you end up with a new *copy* of the original file
-in the operating system's default Downloads folder whenever you "save".
-
-## The Native File System API
-
-The Native File System API makes both operations, opening and saving, a lot simpler.
-It also enables *true saving*, that is, you can not only choose where to save a file,
-but also overwrite an existing file.
-
-{% Aside %}
-  For a more thorough introduction to the Native File System API, see the article
-  [The Native File System API: simplifying access to local files](https://web.dev/native-file-system/).
-{% endAside %}
-
-### Opening files
-
-With the [Native File System API](https://wicg.github.io/native-file-system/),
-opening a file is a matter of one call to the `window.showOpenFilePicker()` method.
-This call returns a file handle, from which you can get the actual `File` via the `getFile()` method.
-
-```js
-const openFile = async () => {
-  try {
-    // Always returns an array.
-    const [handle] = await window. showOpenFilePicker();
-    return handle.getFile();
-  } catch (err) {
-    console.error(err.name, err.message);
-  }
-};
-```
-
-### Opening directories
-
-Open a directory by calling
-`window.showDirectoryPicker()` that makes directories selectable in the file dialog box.
-
-### Saving files
-
-Saving files is similarly straightforward.
-From a file handle, you create a writable stream via `createWritable()`,
-then you write the Blob data by calling the stream's `write()` method,
-and finally you close the stream by calling its `close()` method.
-
-```js
-const saveFile = async (blob) => {
-  try {
-    const handle = await window.showSaveFilePicker({
-      types: [{
-        accept: {
-          // Omitted
-        },
-      }],
-    });
-    const writable = await handle.createWritable();
-    await writable.write(blob);
-    await writable.close();
-    return handle;
-  } catch (err) {
-    console.error(err.name, err.message);
-  }
-};
-```
-
-## Introducing browser-nativefs
-
-As perfectly fine as the Native File System API is,
-it's [not yet  widely available](https://caniuse.com/#feat=native-filesystem-api).
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="caniuse.png"
-       alt="Browser support table for the Native File System API. All browsers are marked as 'no support' or 'behind a flag'.">
-  <figcaption class="w-figcaption">
-    Browser support table for the Native File System API.
-    (<a href="https://caniuse.com/#feat=native-filesystem-api">Source</a>)
-  </figcaption>
-</figure>
-
-This is why I see the Native File System API as a [progressive enhancement](/progressively-enhance-your-pwa).
-As such, I want to use it when the browser supports it,
-and use the traditional approach if not;
-all while never punishing the user with unnecessary downloads of unsupported JavaScript code.
-The [browser-nativefs](https://github.com/GoogleChromeLabs/browser-nativefs)
-library is my answer to this challenge.
-
-### Design philosophy
-
-Since the Native File System API is still likely to change in the future,
-the browser-nativefs API is not modeled after it.
-That is, the library is not a [polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill),
-but rather a [ponyfill](https://github.com/sindresorhus/ponyfill).
-You can (statically or dynamically) exclusively import whatever functionality you need to keep your app as small as possible.
-The available methods are the aptly named
-[`fileOpen()`](https://github.com/GoogleChromeLabs/browser-nativefs#opening-files),
-[`directoryOpen()`](https://github.com/GoogleChromeLabs/browser-nativefs#opening-directories), and
-[`fileSave()`](https://github.com/GoogleChromeLabs/browser-nativefs#saving-files).
-Internally, the library feature-detects if the Native File System API is supported,
-and then imports the corresponding code path.
-
-### Using the browser-nativefs library
-
-The three methods are intuitive to use.
-You can specify your app's accepted `mimeTypes` or file `extensions`, and set a `multiple` flag
-to allow or disallow selection of multiple files or directories.
-For full details, see the
-[browser-nativefs API documentation](https://github.com/GoogleChromeLabs/browser-nativefs#api-documentation).
-The code sample below shows how you can open and save image files.
-
-```js
-// The imported methods will use the Native
-// File System API or a fallback implementation.
-import {
-  fileOpen,
-  directoryOpen,
-  fileSave,
-} from 'https://unpkg.com/browser-nativefs';
-
-(async () => {
-  // Open an image file.
-  const blob = await fileOpen({
-    mimeTypes: ['image/*'],
-  });
-
-  // Open multiple image files.
-  const blobs = await fileOpen({
-    mimeTypes: ['image/*'],
-    multiple: true,
-  });
-
-  // Open all files in a directory,
-  // recursively including subdirectories.
-  const blobsInDirectory = await directoryOpen({
-    recursive: true
-  });
-
-  // Save a file.
-  await fileSave(blob, {
-    fileName: 'Untitled.png',
-  });
-})();
-```
-
-### Demo
-
-You can see the above code in action in a [demo](https://browser-nativefs.glitch.me/) on Glitch.
-Its [source code](https://glitch.com/edit/#!/browser-nativefs) is likewise available there.
-Since for security reasons cross origin sub frames are not allowed to show a file picker,
-the demo cannot be embedded in this article.
-
-## The browser-nativefs library in the wild
-
-In my free time, I contribute a tiny bit to an
-[installable PWA](https://web.dev/progressive-web-apps/#installable)
-called [Excalidraw](https://excalidraw.com/),
-a whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel.
-It is fully responsive and works well on a range of devices from small mobile phones to computers with large screens.
-This means it needs to deal with files on all the various platforms
-whether or not they support the Native File System API.
-This makes it a great candidate for the browser-nativefs library.
-
-I can, for example, start a drawing on my iPhone,
-save it (technically: download it, since Safari does not support the Native File System API)
-to my iPhone Downloads folder, open the file on my desktop (after transferring it from my phone),
-modify the file, and overwrite it with my changes, or even save it as a new file.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="iphone-original.png" width="300" alt="An Excalidraw drawing on an iPhone.">
-  <figcaption class="w-figcaption">
-    Starting an Excalidraw drawing on an iPhone where the Native File System API is not supported,
-    but where a file can be saved (downloaded) to the Downloads folder.</a>)
-  </figcaption>
-</figure>
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="chrome-modify.png" alt="The modified Excalidraw drawing on Chrome on the desktop.">
-  <figcaption class="w-figcaption">
-    Opening and modifying the Excalidraw drawing on the desktop where the Native File System API is supported
-    and thus the file can be accessed via the API.
-  </figcaption>
-</figure>
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="chrome-oversave.png" alt="Overwriting the original file with the modifications.">
-  <figcaption class="w-figcaption">
-    Overwriting the original file with the modifications to the original Excalidraw drawing file.
-    The browser shows a dialog asking me whether this is fine.
-  </figcaption>
-</figure>
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="chrome-save-as.png" alt="Saving the modifications to a new Excalidraw drawing file.">
-  <figcaption class="w-figcaption">
-    Saving the modifications to a new Excalidraw file. The original file remains untouched.
-  </figcaption>
-</figure>
-
-### Real life code sample
-
-Below, you can see an actual example of browser-nativefs as it is used in Excalidraw.
-This excerpt is taken from
-[`/src/data/json.ts`](https://github.com/excalidraw/excalidraw/blob/cd87bd6901b47430a692a06a8928b0f732d77097/src/data/jsonts#L24-L52).
-Of special interest is how the `saveAsJSON()` method passes either a file handle or `null` to browser-nativefs'
-`fileSave()` method, which causes it to overwrite when a handle is given,
-or to save to a new file if not.
-
-```js
-export const saveAsJSON = async (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  fileHandle: any,
-) => {
-  const serialized = serializeAsJSON(elements, appState);
-  const blob = new Blob([serialized], {
-    type: "application/json",
-  });
-  const name = `${appState.name}.excalidraw`;
-  (window as any).handle = await fileSave(
-    blob,
-    {
-      fileName: name,
-      description: "Excalidraw file",
-      extensions: ["excalidraw"],
-    },
-    fileHandle || null,
-  );
-};
-
-export const loadFromJSON = async () => {
-  const blob = await fileOpen({
-    description: "Excalidraw files",
-    extensions: ["json", "excalidraw"],
-    mimeTypes: ["application/json"],
-  });
-  return loadFromBlob(blob);
-};
-```
-
-### UI considerations
-
-Whether in Excalidraw or your app,
-the UI should adapt to the browser's support situation.
-If the Native File System API is supported (`if ('showOpenFilePicker' in window) {}`)
-you can show a **Save As** button in addition to a **Save** button.
-The screenshots below show the difference between Excalidraw's responsive main app toolbar on iPhone and on Chrome desktop.
-Note how on iPhone the **Save As** button is missing.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="save.png" alt="Excalidraw app toolbar on iPhone with just a 'Save' button." width="300">
-  <figcaption class="w-figcaption">
-    Excalidraw app toolbar on iPhone with just a <strong>Save</strong> button.
-  </figcaption>
-</figure>
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="save-save-as.png" alt="Excalidraw app toolbar on Chrome desktop with a 'Save' and a 'Save As' button." width="300">
-  <figcaption class="w-figcaption">
-    Excalidraw app toolbar on Chrome  with a <strong>Save</strong> and a focused <strong>Save As</strong> button.
-  </figcaption>
-</figure>
-
-## Conclusions
-
-Working with native files technically works on all modern browsers.
-On browsers that support the Native File System API, you can make the experience better by allowing
-for true saving and overwriting (not just downloading) of files and
-by letting your users create new files wherever they want,
-all while remaining functional on browsers that do not support the Native File System API.
-The [browser-nativefs](https://github.com/GoogleChromeLabs/browser-nativefs) makes your life easier
-by dealing with the subtleties of progressive enhancement and making your code as simple as possible.
-
-## Acknowledgements
-
-This article was reviewed by [Joe Medley](https://github.com/jpmedley) and
-[Kayce Basques](https://github.com/kaycebasques).
-Thanks to the [contributors to Excalidraw](https://github.com/excalidraw/excalidraw/graphs/contributors)
-for their work on the project and for reviewing my Pull Requests.
-[Hero image](https://unsplash.com/photos/hXrPSgGFpqQ) by
-[Ilya Pavlov](https://unsplash.com/@ilyapavlov) on Unsplash.
diff --git a/src/site/content/en/blog/browser-nativefs/iphone-original.png b/src/site/content/en/blog/browser-nativefs/iphone-original.png
deleted file mode 100644
index 3fe5cb15491..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/iphone-original.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/save-save-as.png b/src/site/content/en/blog/browser-nativefs/save-save-as.png
deleted file mode 100644
index fb4009b4cfb..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/save-save-as.png and /dev/null differ
diff --git a/src/site/content/en/blog/browser-nativefs/save.png b/src/site/content/en/blog/browser-nativefs/save.png
deleted file mode 100644
index 3ce55572eea..00000000000
Binary files a/src/site/content/en/blog/browser-nativefs/save.png and /dev/null differ
diff --git a/src/site/content/en/blog/building-a-3d-game-menu-component/index.md b/src/site/content/en/blog/building-a-3d-game-menu-component/index.md
new file mode 100644
index 00000000000..80ac76119ef
--- /dev/null
+++ b/src/site/content/en/blog/building-a-3d-game-menu-component/index.md
@@ -0,0 +1,651 @@
+---
+layout: post
+title: Building a 3D game menu component
+subhead: A foundational overview of how to build a responsive, adaptive, and accessible 3D game menu.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive, adaptive, and accessible 3D game menu.
+date: 2021-11-10
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/IjOV7KRfEzEj7I1ZVJA5.png
+alt: A screenshot of the vibrant 3D game menu component, rotated in space, with the continue button focused which demonstrates the z-space effect.
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/1yLFCkKYvDtrJSepc7A0.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build a 3D game menu component. Try the
+[demo](https://gui-challenges.web.app/game-menu/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/q9gIXMmP2CcfutwyaK5F.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/game-menu/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'HCsV8u-KYUw' %}
+
+## Overview
+
+Video games often present users with a creative and unusual menu, animated
+and in 3D space. It's popular in new AR/VR games to make the menu appear to be
+floating in space. Today we'll be recreating the essentials of this effect but
+with the added flair of an adaptive color scheme and accommodations for users
+who prefer reduced motion.
+
+{% Aside %} This guide uses experimental CSS
+[@custom-media](https://www.w3.org/TR/mediaqueries-5/#custom-mq) and
+[@nest](https://www.w3.org/TR/css-nesting-1/) to prevent repeating media queries
+and to colocate media queries within component style blocks. The syntax proposed
+in those specs is enabled with PostCSS and these two plugins:
+[postcss-custom-media](https://github.com/postcss/postcss-custom-media) and
+[postcss-nesting](https://github.com/csstools/postcss-nesting). {% endAside %}
+
+## HTML
+
+A game menu is a list of buttons. The best way to represent this in HTML is as
+follows:
+
+```html
+<ul class="threeD-button-set">
+  <li><button>New Game</button></li>
+  <li><button>Continue</button></li>
+  <li><button>Online</button></li>
+  <li><button>Settings</button></li>
+  <li><button>Quit</button></li>
+</ul>
+```
+
+A list of buttons will announce itself well to screen reader technologies and
+works without JavaScript or CSS.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jYu9ioALV3d9jalDWSY1.png", alt="a
+very generic looking bullet list with regular buttons as items.", width="800",
+height="437" %}
+
+## CSS
+
+Styling the button list breaks down into the following high level steps:
+1. Setting up custom properties.
+1. A flexbox layout.
+1. A custom button with decorative pseudo-elements.
+1. Placing elements into 3D space.
+
+### Overview of custom properties
+
+Custom properties help disambiguate values by giving meaningful
+names to otherwise random-looking values, avoiding repeated code and sharing
+values amongst children.
+
+Below are media queries saved as CSS variables, also known as [custom
+media](https://www.w3.org/TR/mediaqueries-5/#custom-mq). These are global and
+will be used throughout various selectors to keep code concise and legible. The
+game menu component uses [motion
+preferences](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
+system [color
+scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme),
+and [color range
+capabilities](https://www.w3.org/TR/mediaqueries-5/#dynamic-range) of the
+display.
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+@custom-media --dark (prefers-color-scheme: dark);
+@custom-media --HDcolor (dynamic-range: high);
+```
+
+The following custom properties manage the color scheme and hold mouse
+positional values for making the game menu interactive to hover. Naming custom
+properties helps code legibility as it reveals the use case for the value or a
+friendly name for the result of the value.
+
+{% Aside %} The following variable naming convention uses strategies described in
+[this post](https://lea.verou.me/2021/10/custom-properties-with-defaults/) by
+[Lea Verou](https://twitter.com/LeaVerou). {% endAside %}
+
+```css
+.threeD-button-set {
+  --y:;
+  --x:;
+  --distance: 1px;
+  --theme: hsl(180 100% 50%);
+  --theme-bg: hsl(180 100% 50% / 25%);
+  --theme-bg-hover: hsl(180 100% 50% / 40%);
+  --theme-text: white;
+  --theme-shadow: hsl(180 100% 10% / 25%);
+
+  --_max-rotateY: 10deg;
+  --_max-rotateX: 15deg;
+  --_btn-bg: var(--theme-bg);
+  --_btn-bg-hover: var(--theme-bg-hover);
+  --_btn-text: var(--theme-text);
+  --_btn-text-shadow: var(--theme-shadow);
+  --_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);
+
+  @media (--dark) {
+    --theme: hsl(255 53% 50%);
+    --theme-bg: hsl(255 53% 71% / 25%);
+    --theme-bg-hover: hsl(255 53% 50% / 40%);
+    --theme-shadow: hsl(255 53% 10% / 25%);
+  }
+
+  @media (--HDcolor) {
+    @supports (color: color(display-p3 0 0 0)) {
+      --theme: color(display-p3 .4 0 .9);
+    }
+  }
+}
+```
+
+### Light and dark theme background conic backgrounds
+
+The light theme has a vibrant `cyan` to `deeppink` [conic
+gradient](https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient())
+while the dark theme has a dark subtle conic gradient. To see more about what
+can be done with conic gradients, see [conic.style](https://www.conic.style/).
+
+```css
+html {
+  background: conic-gradient(at -10% 50%, deeppink, cyan);
+
+  @media (--dark) {
+    background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);
+  }
+}
+```
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/7k1iwE7OaEKSpq4rDCBw.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Demonstration of background changing between light and dark color preferences.
+  </figcaption>
+</figure>
+
+### Enabling 3D perspective
+
+For elements to exist in the 3D space of a web page, a viewport with
+[perspective](https://developer.mozilla.org/docs/Web/CSS/perspective)
+needs to be initialized. I chose to put the perspective on the `body` element
+and used viewport units to create the style I liked.
+
+```css
+body {
+  perspective: 40vw;
+}
+```
+
+This is the type of impact perspective can have.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qDDlbrxpp7vNBkwv5gI7.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Styling the `<ul>` button list
+
+This element is responsible for the overall button list macro layout as well as
+being an interactive and 3D floating card. Here's a way to achieve that.
+
+#### Button group layout
+
+Flexbox can manage the container layout. Change the default direction of flex
+from rows to columns with `flex-direction` and ensure each item is the size of
+its contents by changing from `stretch` to `start` for `align-items`.
+
+```css
+.threeD-button-set {
+  /* remove <ul> margins */
+  margin: 0;
+
+  /* vertical rag-right layout */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2.5vh;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Y63ZFy5AEA4VS4yVirgv.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Next, establish the container as a 3D space context and set up CSS `clamp()`
+functions to ensure the card doesn't rotate beyond legible rotations. Notice
+that the middle value for the clamp is a custom property, these `--x` and `--y`
+values will be [set from JavaScript](#mouse-parallax-interaction) upon mouse
+interaction later.
+
+```css
+.threeD-button-set {
+  …
+
+  /* create 3D space context */
+  transform-style: preserve-3d;
+
+  /* clamped menu rotation to not be too extreme */
+  transform:
+    rotateY(
+      clamp(
+        calc(var(--_max-rotateY) * -1),
+        var(--y),
+        var(--_max-rotateY)
+      )
+    )
+    rotateX(
+      clamp(
+        calc(var(--_max-rotateX) * -1),
+        var(--x),
+        var(--_max-rotateX)
+      )
+    )
+  ;
+}
+```
+
+Next, if motion is OK with the visiting user, add a hint to the browser that
+this item's transform will be constantly changing with
+[`will-change`](https://developer.mozilla.org/docs/Web/CSS/will-change).
+Additionally, enable interpolation by setting a `transition` on transforms. This
+transition will occur when the mouse interacts with the card, enabling smooth
+transitions to rotation changes. The animation is a constant running animation
+that demonstrates the 3D space the card is within, even if a mouse can't or
+isn't interacting with the component.
+
+```css
+@media (--motionOK) {
+  .threeD-button-set {
+    /* browser hint so it can be prepared and optimized */
+    will-change: transform;
+
+    /* transition transform style changes and run an infinite animation */
+    transition: transform .1s ease;
+    animation: rotate-y 5s ease-in-out infinite;
+  }
+}
+```
+
+The `rotate-y` animation only sets the middle keyframe at `50%` since the
+browser will default `0%` and `100%` to the default style of the element. This
+is shorthand for animations that alternate, needing to begin and end at the same
+position. It's a great way to articulate infinite alternating animations.
+
+```css
+@keyframes rotate-y {
+  50% {
+    transform: rotateY(15deg) rotateX(-6deg);
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/EYqJVUyybb3VV4AX9dNE.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Styling the `<li>` elements
+
+Each list item (`<li>`) contains the button and its border elements. The
+`display` style is changed so the item doesn't show a
+[`::marker`](/css-marker-pseudo-element/). The `position` style
+is set to `relative` so the upcoming button pseudo-elements can position
+themselves within the full area the button consumes.
+
+```css
+.threeD-button-set > li {
+  /* change display type from list-item */
+  display: inline-flex;
+
+  /* create context for button pseudos */
+  position: relative;
+
+  /* create 3D space context */
+  transform-style: preserve-3d;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6KtslsfnZEhk4liXAlW7.png",
+alt="Screenshot of the list rotated in 3D space to show the perspective, and
+each list item no longer has a bullet.", width="800", height="691" %}
+
+### Styling the `<button>` elements
+
+Styling buttons can be tough work, there's a lot of states and interaction types
+to account for. These buttons get complex quickly due to balancing
+pseudo-elements, animations and interactions.
+
+#### Initial `<button>` styles
+
+Below are the foundational styles that will support the other states.
+
+```css
+.threeD-button-set button {
+  /* strip out default button styles */
+  appearance: none;
+  outline: none;
+  border: none;
+
+  /* bring in brand styles via props */
+  background-color: var(--_btn-bg);
+  color: var(--_btn-text);
+  text-shadow: 0 1px 1px var(--_btn-text-shadow);
+
+  /* large text rounded corner and padded*/
+  font-size: 5vmin;
+  font-family: Audiowide;
+  padding-block: .75ch;
+  padding-inline: 2ch;
+  border-radius: 5px 20px;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/mfv2DarGZ9woqmV2avMH.png",
+alt="Screenshot of the button list in 3D perspective, this time with styled
+buttons.", width="800", height="495" %}
+
+#### Button pseudo-elements
+
+The borders of the button aren't traditional borders, they're absolute position
+pseudo-elements with borders.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/iNeDRVIv7UK1hRxx8r2z.png",
+alt="Screenshot of Chrome Devtools Elements panel with a button shown having
+::before and ::after elements.", width="800", height="304" %}
+
+These elements are crucial in showcasing the 3D perspective that's been
+established. One of these pseudo-elements will be pushed away from the button,
+and one will be pulled closer to the user. The effect is most noticeable in the
+top and bottom buttons.
+
+```css
+.threeD-button button {
+  …
+
+  &::after,
+  &::before {
+    /* create empty element */
+    content: '';
+    opacity: .8;
+
+    /* cover the parent (button) */
+    position: absolute;
+    inset: 0;
+
+    /* style the element for border accents */
+    border: 1px solid var(--theme);
+    border-radius: 5px 20px;
+  }
+
+  /* exceptions for one of the pseudo elements */
+  /* this will be pushed back (3x) and have a thicker border */
+  &::before {
+    border-width: 3px;
+
+    /* in dark mode, it glows! */
+    @media (--dark) {
+      box-shadow:
+        0 0 25px var(--theme),
+        inset 0 0 25px var(--theme);
+    }
+  }
+}
+```
+
+#### 3D transform styles
+
+Below `transform-style` is set to `preserve-3d` so the children can space
+themselves out on the `z` axis. The `transform` is set to the `--distance`
+custom property, which will be increased on [hover and
+focus](#hover-and-focus-interaction-styles).
+
+```css
+.threeD-button-set button {
+  …
+
+  transform: translateZ(var(--distance));
+  transform-style: preserve-3d;
+
+  &::after {
+    /* pull forward in Z space with a 3x multiplier */
+    transform: translateZ(calc(var(--distance) / 3));
+  }
+
+  &::before {
+    /* push back in Z space with a 3x multiplier */
+    transform: translateZ(calc(var(--distance) / 3 * -1));
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/WQQvNTk8gy0dC7w54Q7w.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Conditional animation styles
+
+If the user is OK with motion, the button hints to the browser that the
+transform property should be ready for change and a transition is set for
+`transform` and `background-color` properties. Notice the difference in
+duration, I felt it made for a nice subtle staggered effect.
+
+```css
+.threeD-button-set button {
+  …
+
+  @media (--motionOK) {
+    will-change: transform;
+    transition:
+      transform .2s ease,
+      background-color .5s ease
+    ;
+
+    &::before,
+    &::after {
+      transition: transform .1s ease-out;
+    }
+
+    &::after    { transition-duration: .5s }
+    &::before { transition-duration: .3s }
+  }
+}
+```
+
+#### Hover and focus interaction styles
+
+The goal of the interaction animation is to spread the layers that made up the
+flat appearing button. Accomplish this by setting the `--distance` variable,
+initially to `1px`. The selector shown in the following code example checks to
+see if the button is being hovered or focused by a device that should see a
+focus indicator, and not being activated. If so it applies CSS to do the
+following:
+
+- Apply the hover background color.
+- Increase the distance .
+- Add a bounce ease effect.
+- Stagger the pseudo-element transitions.
+
+{% Aside %} The varying `transition-duration` values are only on hover,
+staggering the animation only for hover. When hover or focus are removed, each
+layer transitions in unison to the resting place. {% endAside %}
+
+```css
+.threeD-button-set button {
+  …
+
+  &:is(:hover, :focus-visible):not(:active) {
+    /* subtle distance plus bg color change on hover/focus */
+    --distance: 15px;
+    background-color: var(--_btn-bg-hover);
+
+    /* if motion is OK, setup transitions and increase distance */
+    @media (--motionOK) {
+      --distance: 3vmax;
+
+      transition-timing-function: var(--_bounce-ease);
+      transition-duration: .4s;
+
+      &::after  { transition-duration: .5s }
+      &::before { transition-duration: .3s }
+    }
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/ZR3M0MTBzBU3m0RoHpxp.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The 3D perspective was still really neat for the `reduced` motion preference.
+The top and bottom elements show the effect in a nice subtle way.
+
+### Small enhancements with JavaScript
+
+The interface is usable from keyboards, screen readers, gamepads, touch and a
+mouse already, but we can add some light touches of JavaScript to ease a couple
+of scenarios.
+
+#### Supporting arrow keys
+
+The tab key is a fine way to navigate the menu but I'd expect the directional
+pad or joysticks to move focus on a gamepad. The
+[roving-ux](https://github.com/argyleink/roving-ux) library often used for GUI
+Challenge interfaces will handle arrow keys for us. The below code tells the
+library to trap focus within `.threeD-button-set` and forward the focus to the
+button children.
+
+```js
+import {rovingIndex} from 'roving-ux'
+
+rovingIndex({
+  element: document.querySelector('.threeD-button-set'),
+  target: 'button',
+})
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/PSF8lpd2tcmj35WIQlKT.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Mouse parallax interaction
+
+Tracking the mouse and having it tilt the menu is intended to mimic AR and VR
+video game interfaces, where instead of a mouse you may have a virtual pointer.
+It can be fun when elements are hyper aware of the pointer.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/mNtHI14zZMoX250VIIZF.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Since this is a small extra feature, we'll put the interaction behind a query of
+the user's motion preference. Also, as part of setup, store the button list
+component into memory with `querySelector` and cache the element's bounds into
+`menuRect`. Use these bounds to determine the rotate offset applied to the card
+based on mouse position.
+
+```js
+const menu = document.querySelector('.threeD-button-set')
+const menuRect = menu.getBoundingClientRect()
+
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+```
+
+Next, we need a function that accepts the mouse `x` and `y` positions and return
+a value we can use to rotate the card. The following function uses the mouse
+position to detemine which side of the box it's inside of and by how much. The
+delta is returned from the function.
+
+```js
+const getAngles = (clientX, clientY) => {
+  const { x, y, width, height } = menuRect
+
+  const dx = clientX - (x + 0.5 * width)
+  const dy = clientY - (y + 0.5 * height)
+
+  return {dx,dy}
+}
+```
+
+Lastly, watch the mouse move, pass the position to our `getAngles()` function
+and use the delta values as custom property styles. I divided by 20 to pad the
+delta and make it less twitchy, there may be a better way to do that. If you
+remember from the beginning, we put the `--x` and `--y` props in the middle of a
+`clamp()` function, this prevents the mouse position from overly rotating the
+card into an illegible position.
+
+```js
+if (motionOK) {
+  window.addEventListener('mousemove', ({target, clientX, clientY}) => {
+    const {dx,dy} = getAngles(clientX, clientY)
+
+    menu.attributeStyleMap.set('--x', `${dy / 20}deg`)
+    menu.attributeStyleMap.set('--y', `${dx / 20}deg`)
+  })
+}
+```
+
+## Translations and directions
+
+There was one gotcha when testing out the game menu in other writing modes and
+languages.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/BtBRYNIILR1iirytTZP3.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+`<button>` elements have an `!important` style for `writing-mode` in the user
+agent stylesheet. This meant the game menu HTML needed to change to accommodate
+the desired design. Changing the button list to a list of links enables logical
+properties to change the menu direction, as `<a>` elements don't have a browser
+supplied `!important` style.
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂 Can you add accelerometer
+interaction to the menu, so tiling your phone rotates the menu? Can we improve
+the no motion experience?
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+*Nothing to see here yet!*
diff --git a/src/site/content/en/blog/building-a-breadcrumbs-component/index.md b/src/site/content/en/blog/building-a-breadcrumbs-component/index.md
new file mode 100644
index 00000000000..4f80ab02636
--- /dev/null
+++ b/src/site/content/en/blog/building-a-breadcrumbs-component/index.md
@@ -0,0 +1,499 @@
+---
+layout: post
+title: Building a breadcrumbs component
+subhead: A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.
+date: 2021-07-14
+updated: 2021-07-15
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/kCeb8N9YlMYsI5O5ChC9.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/dk9VreVtYiF3LBkRpZlg.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build breadcrumb components.
+[Try the demo](https://gui-challenges.web.app/breadcrumbs/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/90PkYJ8y9wi2U1w034gv.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/breadcrumbs/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'kHL3gxAlvK8' %}
+
+## Overview
+
+A [breadcrumbs](https://codepen.io/search/pens?q=breadcrumbs) component shows
+where in the site hierarchy the user is. The name is from [Hansel and
+Gretel](https://en.wikipedia.org/wiki/Hansel_and_Gretel), who dropped
+breadcrumbs behind them in some dark woods and were able to find their way home
+by tracing crumbs backwards.
+
+The breadcrumbs in this post are not [standard
+breadcrumbs](https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html),
+they're breadcrumb-like. They offer additional functionality by putting sibling
+pages right into the navigation with a `<select>`, making multi-tiered access
+possible.
+
+### Background UX
+
+In the component demo video above, the placeholder categories are genres of
+video games. This trail is created by navigating the following path:  `home »
+rpg » indie » on sale`, as shown below.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/u3nemRGC7g39sVvPnUBh.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+This breadcrumb component should enable users to move through this
+information hierarchy; jumping branches and selecting pages with speed and
+accuracy.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/69hQj4fuf6cJltEqGxDJ.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+## Information architecture
+
+I find it's helpful to think in terms of collections and items.
+
+### Collections
+
+A collection is an array of options to choose from. From the homepage of
+the breadcrumb prototype of this post, the collections are FPS, RPG, brawler,
+dungeon crawler, sports and puzzle.
+
+### Items
+
+A video game is an item, a specific collection could also be an item if it
+represents another collection. For example, RPG is an item and a valid
+collection. When it's an item, the user is on that collection page. For example,
+they are on  the RPG page, which displays a list of RPG games, including the
+additional subcategories AAA, Indie and Self Published.
+
+In computer science terms, this breadcrumbs component represents a
+[multidimensional
+array](https://www.javascripttutorial.net/javascript-multidimensional-array/):
+
+```js
+const rawBreadcrumbData = {
+  "FPS": {...},
+  "RPG": {
+    "AAA": {...},
+    "indie": {
+      "new": {...},
+      "on sale": {...},
+      "under 5": {...},
+    },
+    "self published": {...},
+  },
+  "brawler": {...},
+  "dungeon crawler": {...},
+  "sports": {...},
+  "puzzle": {...},
+}
+```
+
+Your app or website will have custom information architecture (IA) creating a
+different multidimensional array, but I hope the concept of collection landing
+pages and hierarchy traversal can make it into your breadcrumbs as well.
+
+## Layouts
+
+### Markup
+
+Good components begin with appropriate HTML. In this next section I'll cover my
+markup choices and how they impact the overall component.
+
+#### Dark and light scheme
+
+```html
+<meta name="color-scheme" content="dark light">
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/I8w6oe28ueaZsDiOFssl.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The [`color-scheme`](/color-scheme/) meta tag in the above
+snippet informs the browser that this page wants the light and dark browser
+styles. The example breadcrumbs don't include any CSS for these color schemes,
+and so the breadcrumbs will use the default colors provided by the browser.
+
+{% Aside %} Try removing all the styles from the demo page. The component works
+without them due to the well structured markup. {% endAside %}
+
+#### Navigation element
+
+```html
+<nav class="breadcrumbs" role="navigation"></nav>
+```
+
+It's appropriate to use the
+[`<nav>`](https://developer.mozilla.org/docs/Web/HTML/Element/nav) element
+for site navigation, which has an implicit ARIA [role of
+navigation](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/Navigation_Role).
+In testing, I noticed that having the `role` attribute changed the way a
+screen reader interacted with the element, it was actually announced as
+navigation, and so I've chosen to add it.
+
+#### Icons
+
+When an icon is repeated on a page, the SVG
+[`<use>`](https://developer.mozilla.org/docs/Web/SVG/Element/use) element
+means that you can define the `path` once, and use it for all instances of the
+icon. This prevents the same path information from being repeated, causing
+larger documents and the potential of path inconsistency.
+
+To use this technique, add a hidden SVG element to the page and wrap the icons
+in a `<symbol>` element with a unique ID:
+
+```html
+<svg style="display: none;">
+
+  <symbol id="icon-home">
+    <title>A home icon</title>
+    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+  </symbol>
+
+  <symbol id="icon-dropdown-arrow">
+    <title>A down arrow</title>
+    <path d="M19 9l-7 7-7-7"/>
+  </symbol>
+
+</svg>
+```
+
+The browser reads the SVG HTML, puts the icon information into memory, and
+continues with the rest of the page referencing the ID for additional uses of
+the icon, like this:
+
+```html
+<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+  <use href="#icon-home" />
+</svg>
+
+<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+  <use href="#icon-dropdown-arrow" />
+</svg>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BVkOZ3YnQBgF6K09sLTE.png",
+alt="DevTools showing a rendered `<use>` SVG element.", width="800", height="447"
+%}
+
+Define once, use as many times as you like, with minimal page performance impact
+and flexible styling. Notice `aria-hidden="true"` is added to the SVG element.
+The icons are not useful to someone browsing who only hears the content, hiding
+them from those users stops them adding unnecessary noise.
+
+#### Split-link `.crumb`
+
+This is where the traditional breadcrumb and those in this component diverge.
+Normally, this would only be an `<a>` link, but I've added traversal UX with a
+disguised select. The `.crumb` class is responsible for laying out the link and
+the icon, while the `.crumbicon` is responsible for stacking the icon and select
+element together. I've called it a split-link because its functions are very
+similar to a [split-button](https://www.nngroup.com/articles/split-buttons/),
+but for page navigation.
+
+```html
+<span class="crumb">
+  <a href="#sub-collection-b">Category B</a>
+  <span class="crumbicon">
+    <svg>...</svg>
+    <select class="disguised-select" title="Navigate to another category">
+      <option>Category A</option>
+      <option selected>Category B</option>
+      <option>Category C</option>
+    </select>
+  </span>
+</span>
+```
+
+A link and some options is nothing special but adds more functionality to a
+simple breadcrumb. Adding a `title` to the `<select>` element is helpful for screen
+reader users, giving them information about the action of the button. However it
+provides the same help to everyone else too, you'll see it's front and center on
+iPad. One attribute provides button context to many users.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/IbANGFRfyEC61P7ETlGp.png",
+alt="Screenshot with the invisible select element being hovered and its
+contextual tooltip showing.", width="271", height="83" %}
+
+#### Separator decorations
+
+```html
+<span class="crumb-separator" aria-hidden="true">→</span>
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/LASjAldbKTMivtF01aWo.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Separators are optional, adding just one works great too (see the third example in the video
+above). I then give each `aria-hidden="true"` since they are decorative and not
+something a screen reader needs to announce.
+
+The [`gap`](/flexbox-gap) property, covered next, makes the spacing of these straightforward.
+
+### Styles
+
+Since the color uses [system colors](https://www.w3.org/TR/css-color-4/#css-system-colors), it's mostly gaps and stacks for styles!
+
+#### Layout direction and flow
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uPs9kdqJgyaY5GWqdZHP.png",
+alt="DevTools showing breadcrumb nav alignment with a its flexbox overlay
+feature.", width="800", height="74" %}
+
+The primary navigation element `nav.breadcrumbs` sets a scoped custom property
+for children to use, and otherwise establishes a horizontal vertically aligned
+layout. This ensures that the crumbs, dividers, and icons align.
+
+```css
+.breadcrumbs {
+  --nav-gap: 2ch;
+
+  display: flex;
+  align-items: center;
+  gap: var(--nav-gap);
+  padding: calc(var(--nav-gap) / 2);
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/8JJyoerH462n22u0vD2R.png",
+alt="One breadcrumb shown vertically aligned with flexbox overlays.",
+width="167", height="66" %}
+
+Each `.crumb` also establishes a horizontal vertically aligned layout with some
+gap, but specially targets its link children and specifies the style
+`white-space: nowrap`. This is crucial for multi-word breadcrumbs as we dont
+want them to go multi-line. Later in this post we'll add styles to handle the
+horizontal overflow this `white-space` property caused.
+
+```css
+.crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--nav-gap) / 4);
+
+  & > a {
+    white-space: nowrap;
+
+    &[aria-current="page"] {
+      font-weight: bold;
+    }
+  }
+}
+```
+
+`aria-current="page"` is added to help the current page link stand out from the
+rest. Not only will screen reader users have a clear indicator that the link is
+for the current page, we've visually styled the element to help sighted users
+get a similar user experience.
+
+The `.crumbicon` component uses grid to stack an SVG icon with a "nearly
+invisible" `<select>` element.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jx2uAiFT8NEHD5AbuSp3.png",
+alt="Grid DevTools shown overlaying a button where the row and column are both
+named stack.", width="218", height="180" %}
+
+```css/8
+.crumbicon {
+  --crumbicon-size: 3ch;
+
+  display: grid;
+  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
+  place-items: center;
+
+  & > * {
+    grid-area: stack;
+  }
+}
+```
+
+The `<select>` element is last in the DOM, so it's on top of the stack,
+and interactive. Add a style of `opacity: .01` so the element is still usable,
+and the result is a select box that fits perfectly to the shape of the icon.
+This is a nice way to customize the look of a `<select>` element while
+maintaining the built-in functionality.
+
+```css
+.disguised-select {
+  inline-size: 100%;
+  block-size: 100%;
+  opacity: .01;
+  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
+}
+```
+
+{% Aside %}
+Try using this icon component from mobile!
+{% endAside %}
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/n3MsbELMwsvYn355hXdi.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Overflow
+
+Breadcrumbs should be able to represent a very long trail. I'm a fan of allowing
+things to go offscreen horizontally, when appropriate, and I felt this
+breadcrumbs component qualified well.
+
+```css
+.breadcrumbs {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  scroll-padding-inline: calc(var(--nav-gap) / 2);
+
+  & > .crumb:last-of-type {
+    scroll-snap-align: end;
+  }
+
+  @supports (-webkit-hyphens:none) { & {
+    scroll-snap-type: none;
+  }}
+}
+```
+
+The overflow styles set up the following UX:
+
+- Horizontal scroll with overscroll containment.
+- Horizontal scroll padding.
+- One snap point on the last crumb. This means that on page load the first
+   crumb loads snapped and in view.
+- Removes the snap point from Safari, which struggles with the horizontal
+   scrolling and snap effect combinations.
+
+#### Media queries
+
+One subtle adjustment for smaller viewports is to hide the "Home" label, leaving
+just the icon:
+
+```css
+@media (width <= 480px) {
+  .breadcrumbs .home-label {
+    display: none;
+  }
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/T47A7AUqFPuneqNK3GWa.png",
+alt="Side by side of the breadcrumbs with and without a home label, for
+comparison.", width="800", height="84" %}
+
+## Accessibility
+
+### Motion
+
+There isn't a whole lot of motion in this component, but by wrapping the
+transition in a `prefers-reduced-motion` check, we can prevent unwanted motion.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .crumbicon {
+    transition: box-shadow .2s ease;
+  }
+}
+```
+
+None of the other styles need to change, the hover and focus effects are great
+and meaningful without a `transition`, but if motion is okay, we'll add a subtle
+transition to the interaction.
+
+### JavaScript
+
+First, regardless of the type of router you use in your site or application,
+when a user changes the breadcrumbs, the URL needs to be updated and the user
+shown the appropriate page. Second, to normalize the user experience, make sure
+no unexpected navigations happen when users are just browsing `<select>`
+options.
+
+Two critical user experience measures to be handled by JavaScript: select has
+changed and eager `<select>` change event firing prevention.
+
+The eager event prevention is needed due to the use of a `<select>`
+element. On Windows Edge, and probably other browsers too, the select `changed`
+event fires as the user browses options with the keyboard. This is why I
+called it eager, as the user has only pseudo selected the option, like a hover
+or focus, yet hasn't confirmed the choice with `enter` or a `click`. The eager
+event makes this component category change feature inaccessible, because
+opening the select box and simply browsing an item will fire the event and
+change the page, before the user is ready.
+
+#### A better `<select>` changed event
+
+```js
+const crumbs = document.querySelectorAll('.breadcrumbs select')
+const allowedKeys = new Set(['Tab', 'Enter', ' '])
+const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])
+
+// watch crumbs for changes,
+// ensures it's a full value change, not a user exploring options via keyboard
+crumbs.forEach(nav => {
+  let ignoreChange = false
+
+  nav.addEventListener('change', e => {
+    if (ignoreChange) return
+    // it's actually changed!
+  })
+
+  nav.addEventListener('keydown', ({ key }) => {
+    if (preventedKeys.has(key))
+      ignoreChange = true
+    else if (allowedKeys.has(key))
+      ignoreChange = false
+  })
+})
+```
+
+The strategy for this is to watch for keyboard down events on each `<select>`
+element and determine if the key pressed was navigation confirmation (`Tab` or
+`Enter`) or spatial navigation (`ArrowUp` or `ArrowDown`). With this
+determination, the component can decide to wait or go, when the event for the
+`<select>` element fires.
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [Tux Solbakk](https://github.com/tux-/) as a web component: [demo and code](https://tux-.github.io/breadcrumbs/public/index.html)
diff --git a/src/site/content/en/blog/building-a-button-component/index.md b/src/site/content/en/blog/building-a-button-component/index.md
new file mode 100644
index 00000000000..94125263c9e
--- /dev/null
+++ b/src/site/content/en/blog/building-a-button-component/index.md
@@ -0,0 +1,1271 @@
+---
+layout: post
+title: Building a button component
+subhead: A foundational overview of how to build color-adaptive, responsive, and accessible <button> components.
+authors:
+  - adamargyle
+description: A foundational overview of how to build color-adaptive, responsive, and accessible <button> components.
+date: 2022-05-18
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/iuEz2Jhp037MApHestHL.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3ccvoSTPECxP9qMRwqWC.png
+alt: Preview of the mini and mega dialogs in both light and dark themes.
+tags:
+  - blog
+  - css
+  - html
+  - javascript
+---
+
+In this post I want to share my thoughts on how to build a color-adaptive,
+responsive, and accessible `<button>` element.
+[Try the demo](https://gui-challenges.web.app/buttons/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges)!
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/EU3ZVqNDtCZEmaLCmZFn.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Buttons are interacted with via keyboard and mouse in the light and dark themes.
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'aJNq-b1zlog' %}
+
+## Overview
+
+{% BrowserCompat 'html.elements.button' %}
+
+The
+[`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)
+element is built for user interaction. Its `click` event triggers from keyboard,
+mouse, touch, voice, and more, with [smart rules about its
+timing](https://css-tricks.com/when-a-click-is-not-just-a-click/). It also comes
+with some default styles in each browser, so you can use them directly without
+any customization. Use [`color-scheme`](/color-scheme/) to opt
+into browser-provided light and dark buttons too.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoQqQaW',
+  height: 500,
+  tab: 'result'
+} %}
+
+There are also [different types of
+buttons](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-type),
+each shown in the preceding Codepen embed. A `<button>` without a type will
+adapt to being within a `<form>`, changing to the submit type.
+
+```html
+<!-- buttons -->
+<button></button>
+<button type="submit"></button>
+<button type="button"></button>
+<button type="reset"></button>
+
+<!-- button state -->
+<button disabled></button>
+
+<!-- input buttons -->
+<input type="button" />
+<input type="file">
+```
+
+In this month's [GUI Challenge](https://github.com/argyleink/gui-challenges),
+each button will get styles to help visually differentiate their intent. [Reset
+buttons](https://developer.mozilla.org/docs/Web/HTML/Element/input/reset)
+will have warning colors since they're destructive, and [submit
+buttons](https://developer.mozilla.org/docs/Web/HTML/Element/input/submit)
+will get blue accent text so they appear slightly more promoted than regular
+buttons. 
+
+<figure>
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/RHjiEG4X1lAQiLtCA105.png", 
+    alt="Preview of the final set of all button types, shown in a form and not in a form, with nice additions for icon buttons and customized buttons.",
+    width="800", 
+    height="539" 
+  %}
+  <figcaption>
+    Preview of the final set of all button types, shown in a form and not in a form, 
+    with nice additions for icon buttons and customized buttons
+  </figcaption>
+</figure>
+
+{% Aside %}
+The buttons have always acted in their own distinct ways, 
+so why not style them to support their behavior?
+{% endAside %}
+
+Buttons also have [pseudo classes](/learn/css/pseudo-classes/)
+for CSS to use for styling. These classes provide CSS hooks into customizing the
+feel of the button: [`:hover`](/learn/css/pseudo-classes/#hover)
+for when a mouse is over the button,
+[`:active`](/learn/css/pseudo-classes/#active) for when a mouse
+or keyboard is pressing, and
+[`:focus`](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible) or 
+[`:focus-visible`](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible)
+for assisting in assistive technology styling. 
+
+```css
+button:hover {}
+button:active {}
+button:focus {}
+button:focus-visible {}
+```
+
+<figure>
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ip7GrYSsMo7dgEGpxUCg.png", 
+    alt="Preview of the final set of all button types in the dark theme.",
+    width="800", 
+    height="539" 
+  %}
+  <figcaption>
+    Preview of the final set of all button types in the dark theme
+  </figcaption>
+</figure>
+
+## Markup
+
+In addition to the button types provided by the HTML specification, I've added a
+button with an icon and a button with a custom class `btn-custom`.
+
+```html
+<button>Default</button>
+<input type="button" value="<input>"/>
+<button>
+  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+    <path d="..." />
+  </svg>
+  Icon
+</button>
+<button type="submit">Submit</button>
+<button type="button">Type Button</button>
+<button type="reset">Reset</button>
+<button disabled>Disabled</button>
+<button class="btn-custom">Custom</button>
+<input type="file">
+```
+
+Then, for testing, each button is placed inside of a form. This way I can ensure
+styles are updated appropriately for the default button, which behaves as a
+submit button. I also switch the icon strategy, from inline SVG to a masked SVG,
+to ensure both work equally well.
+
+```html
+<form>
+  <button>Default</button>
+  <input type="button" value="<input>"/>
+  <button>Icon <span data-icon="cloud"></span></button>
+  <button type="submit">Submit</button>
+  <button type="button">Type Button</button>
+  <button type="reset">Reset</button>
+  <button disabled>Disabled</button>
+  <button class="btn-custom btn-large" type="button">Large Custom</button>
+  <input type="file">
+</form>
+```
+
+The matrix of combinations is pretty overwhelming at this point. Between button
+types, pseudo-classes, and being in or out of a form, there are  over 20
+combinations of buttons. It’s a good thing CSS can help us articulate each of
+them clearly!
+
+## Accessibility
+
+Button elements are naturally accessible but there are a few common
+enhancements.
+
+### Hover and focus together
+
+I like to group `:hover` and `:focus` together with the `:is()` functional
+pseudo selector. This helps ensure my interfaces always consider keyboard
+and assistive technology styles.
+
+```css
+button:is(:hover, :focus) {
+  …
+}
+```
+
+<figure>
+  {% Video 
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/FwNnm4ExQWz2FO1GVa7j.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Try a <a href="https://codepen.io/argyleink/pen/powMQgx">demo</a>!
+  </figcaption>
+</figure>
+
+### Interactive focus ring
+
+I like to animate the focus ring for keyboard and assistive technology users. I
+accomplish this by animating the outline away from the button by 5px, but only
+when the button is not active. This creates an effect that makes the focus ring
+shrink back to the button size when pressed.
+
+```css
+:where(button, input):where(:not(:active)):focus-visible {
+  outline-offset: 5px;
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/iMI3C1a3ktt1f3vZGscB.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Ensuring passing color contrast
+
+There are at least four different color combinations across light and dark that
+need consideration of color contrast: button, submit button, reset button, and
+disabled button. [VisBug](https://a.nerdy.dev/gimme-visbug) is used here to
+inspect and show all their scores at once:
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Wg0EzKQgCHMJin5ujYus.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Hiding icons from folks who can't see
+
+When creating an icon button, the icon should provide visual support to the
+button text. This also means the icon is not valuable to someone with sight
+loss. Fortunately the browser provides a way to hide items from screen-reader
+technology so people with sight loss aren't bothered with decorative button
+images:
+
+```html
+<button>
+  <svg … aria-hidden="true">...</svg>
+  Icon Button
+</button>
+```
+
+<figure>
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WCww9HPVdcaoJNLQB8Sq.png", 
+    alt="Chrome DevTools showing the accessibility tree for the button. The tree ignores the button image because it has aria-hidden set to true.",
+    width="800", 
+    height="515" 
+  %}
+  <figcaption>
+    Chrome DevTools showing the accessibility tree for the button.
+    The tree ignores the button image because it has aria-hidden set to true
+  </figcaption>
+</figure>
+
+## Styles
+
+In this next section, I first establish a custom property system for managing
+the adaptive styles of the button. With those custom properties I can begin to
+select elements and customize their appearance.
+
+### An adaptive custom property strategy
+
+The custom property strategy used in this GUI Challenge is very similar to that
+used in [building a color scheme](/building-a-color-scheme/). For
+an adaptive light and dark color system, a custom property for each theme is
+defined and named accordingly. Then a single custom property is used to hold the
+current value of the theme and is assigned to a CSS property. Later, the single
+custom property can be updated to a different value, then updating the button
+style.
+
+```css
+button {
+  --_bg-light: white;
+  --_bg-dark: black;
+  --_bg: var(--_bg-light);
+
+  background-color: var(--_bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  button {
+    --_bg: var(--_bg-dark);
+  }
+}
+```
+
+{% Aside %}
+The underscore convention is from Lea Verou in this post 
+[Custom properties with defaults](https://lea.verou.me/2021/10/custom-properties-with-defaults/).
+{% endAside %}
+
+What I like is that the light and dark themes are declarative and clear. The
+indirection and abstraction are  offloaded into the `--_bg` custom property,
+which is now the only "reactive" property; `--_bg-light` and `--_bg-dark` are
+static. It's also clear to read that the light theme is the default theme and
+dark is only applied conditionally.
+
+### Preparing for design consistency
+
+#### The shared selector
+
+The following selector is used to target all the various types of buttons and is
+a bit overwhelming at first. [`:where()`](/css-is-and-where/) is
+used so customizing the button requires no specificity. Buttons are often
+adapted for alternative scenarios and the `:where()` selector ensures that task
+is easy. Inside `:where()`, each button type is selected, including the
+`::file-selector-button`, which [can't be
+used](https://developer.mozilla.org/docs/Web/CSS/:is#is_does_not_select_pseudo-elements)
+inside of `:is()` or `:where()`.
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="file"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+}
+```
+
+All the custom properties will be scoped inside this selector. Time to review
+all the custom properties! There are quite a few custom properties used in this
+button. I'll describe each group as we go, then share the dark and reduced
+motion contexts at the end of the section.
+
+#### Button accent color 
+
+Submit buttons and icons are a great place for a pop of color:
+
+```css
+--_accent-light: hsl(210 100% 40%);
+--_accent-dark: hsl(210 50% 70%);
+--_accent: var(--_accent-light);
+```
+
+#### Button text color
+
+Button text colors aren't white or black, they're darkened or lightened versions
+of `--_accent` using
+[`hsl()`](https://developer.mozilla.org/docs/Web/CSS/color_value/hsl) and
+sticking to the hue `210`:
+
+```css
+--_text-light: hsl(210 10% 30%);
+--_text-dark: hsl(210 5% 95%);
+--_text: var(--_text-light);
+```
+
+#### Button background color
+
+Button backgrounds follow the same `hsl()` pattern except for the light theme
+buttons—those are set to white so their surface makes them appear close to the
+user, or in front of other surfaces:
+
+```css
+--_bg-light: hsl(0 0% 100%);
+--_bg-dark: hsl(210 9% 31%);
+--_bg: var(--_bg-light);
+```
+
+#### Button background well
+
+This background color is for making a surface appear behind other surfaces,
+useful for the background of the file input:
+
+```css
+--_input-well-light: hsl(210 16% 87%);
+--_input-well-dark: hsl(204 10% 10%);
+--_input-well: var(--_input-well-light);
+```
+
+#### Button padding
+
+The spacing around the text in the button is done using the
+[`ch`](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+unit, a relative length to the font size. This becomes critical when large
+buttons are able to simply bump up the `font-size` and button scales
+proportionally:
+
+```css
+--_padding-inline: 1.75ch;
+--_padding-block: .75ch;
+```
+
+#### Button border
+
+The button border radius is stashed into a custom property so the file input can
+match the other buttons. The border colors follow the established adaptive color
+system:
+
+```css
+--_border-radius: .5ch;
+
+--_border-light: hsl(210 14% 89%);
+--_border-dark: var(--_bg-dark);
+--_border: var(--_border-light);
+```
+
+#### Button hover highlight effect
+
+These properties establish a size property for transitioning on interaction, and
+the highlight color follows the adaptive color system. We'll cover how these
+interact later in this post, but ultimately these are used for a `box-shadow`
+effect:
+
+```css
+--_highlight-size: 0;
+
+--_highlight-light: hsl(210 10% 71% / 25%);
+--_highlight-dark: hsl(210 10% 5% / 25%);
+--_highlight: var(--_highlight-light);
+```
+
+#### Button text shadow
+
+Each button has a subtle text shadow style. This helps the text sit on top of
+the button, improving legibility and adding a nice layer of presentation polish. 
+
+```css
+--_ink-shadow-light: 0 1px 0 var(--_border-light);
+--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
+--_ink-shadow: var(--_ink-shadow-light);
+```
+
+#### Button icon
+
+Icons are the size of two characters thanks to the relative length `ch` unit
+again, which will help the icon scale proportionally to the button text. The
+icon color leans on the `--_accent-color` for an adaptive and within-theme
+color. 
+
+```css
+--_icon-size: 2ch;
+--_icon-color: var(--_accent);
+```
+
+{% Aside %}
+By having its own property, customizing the icon color can be done 
+without changing the accent color.
+{% endAside %}
+
+#### Button shadow
+
+For shadows to properly adapt to light and dark, they need to both shift their
+color and opacity. Light theme shadows are best when they are subtle and tinted
+towards the surface color they overlay. Dark theme shadows need to be darker and
+more saturated so they can overlay darker surface colors.
+
+```css
+--_shadow-color-light: 220 3% 15%;
+--_shadow-color-dark: 220 40% 2%;
+--_shadow-color: var(--_shadow-color-light);
+
+--_shadow-strength-light: 1%;
+--_shadow-strength-dark: 25%;
+--_shadow-strength: var(--_shadow-strength-light);
+```
+
+With adaptive colors and strengths I can assemble two depths of shadows:
+
+```css
+--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
+
+--_shadow-2: 
+  0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
+  0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
+```
+
+Furthermore, to give the buttons a slightly 3D appearance, a `1px` box-shadow
+creates the illusion:
+
+```css
+--_shadow-depth-light: 0 1px var(--_border-light);
+--_shadow-depth-dark: 0 1px var(--_bg-dark);
+--_shadow-depth: var(--_shadow-depth-light);
+```
+
+#### Button transitions
+
+Following the pattern for adaptive colors, I create two static properties to
+hold the design system options:
+
+```css
+--_transition-motion-reduce: ;
+--_transition-motion-ok:
+  box-shadow 145ms ease,
+  outline-offset 145ms ease
+;
+--_transition: var(--_transition-motion-reduce);
+```
+
+{% Aside %}
+In early designs of the buttons, I animated `border-color`, which was in 
+the `--_transition-motion-reduce` property. I later removed it but left 
+the pattern in case I changed my mind again.
+{% endAside %}
+
+#### All properties together in the selector
+
+{% Details %}
+
+{% DetailsSummary %}
+All custom properties in a selector
+{% endDetailsSummary %}
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="file"]
+),
+:where(input[type="file"])::file-selector-button {
+  --_accent-light: hsl(210 100% 40%);
+  --_accent-dark: hsl(210 50% 70%);
+  --_accent: var(--_accent-light);
+
+  --_text-light: hsl(210 10% 30%);
+  --_text-dark: hsl(210 5% 95%);
+  --_text: var(--_text-light);
+  
+  --_bg-light: hsl(0 0% 100%);
+  --_bg-dark: hsl(210 9% 31%);
+  --_bg: var(--_bg-light);
+
+  --_input-well-light: hsl(210 16% 87%);
+  --_input-well-dark: hsl(204 10% 10%);
+  --_input-well: var(--_input-well-light);
+
+  --_padding-inline: 1.75ch;
+  --_padding-block: .75ch;
+  
+  --_border-radius: .5ch;
+  --_border-light: hsl(210 14% 89%);
+  --_border-dark: var(--_bg-dark);
+  --_border: var(--_border-light);
+  
+  --_highlight-size: 0;
+  --_highlight-light: hsl(210 10% 71% / 25%);
+  --_highlight-dark: hsl(210 10% 5% / 25%);
+  --_highlight: var(--_highlight-light);
+  
+  --_ink-shadow-light: 0 1px 0 hsl(210 14% 89%);
+  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
+  --_ink-shadow: var(--_ink-shadow-light);
+  
+  --_icon-size: 2ch;
+  --_icon-color-light: var(--_accent-light);
+  --_icon-color-dark: var(--_accent-dark);
+  --_icon-color: var(--accent, var(--_icon-color-light));
+
+  --_shadow-color-light: 220 3% 15%;
+  --_shadow-color-dark: 220 40% 2%;
+  --_shadow-color: var(--_shadow-color-light);
+  --_shadow-strength-light: 1%;
+  --_shadow-strength-dark: 25%;
+  --_shadow-strength: var(--_shadow-strength-light);
+  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
+  --_shadow-2: 
+    0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
+    0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%))
+  ;
+  
+  --_shadow-depth-light: hsl(210 14% 89%);
+  --_shadow-depth-dark: var(--_bg-dark);
+  --_shadow-depth: var(--_shadow-depth-light);
+
+  --_transition-motion-reduce: ;
+  --_transition-motion-ok:
+    box-shadow 145ms ease,
+    outline-offset 145ms ease
+  ;
+  --_transition: var(--_transition-motion-reduce);
+}
+```
+{% endDetails %}
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/0SBiYWtJkz5JvF78HFPI.png", 
+  alt="Default buttons show in light and dark theme side by side.", 
+  width="800", 
+  height="188" 
+%}
+
+#### Dark theme adaptations
+
+The value of the `-light` and `-dark` static props pattern becomes clear when
+the dark theme props are set:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+  ),
+  :where(input[type="file"])::file-selector-button {
+    --_bg: var(--_bg-dark);
+    --_text: var(--_text-dark);
+    --_border: var(--_border-dark);
+    --_accent: var(--_accent-dark);
+    --_highlight: var(--_highlight-dark);
+    --_input-well: var(--_input-well-dark);
+    --_ink-shadow: var(--_ink-shadow-dark);
+    --_shadow-depth: var(--_shadow-depth-dark);
+    --_shadow-color: var(--_shadow-color-dark);
+    --_shadow-strength: var(--_shadow-strength-dark);
+  }
+}
+```
+
+Not only does this read well, but consumers of these custom buttons can use the
+bare props with confidence that they'll adapt appropriately to user preferences.
+
+#### Reduced motion adaptations
+
+If motion is OK with this visiting user, assign `--_transition` to
+`var(--_transition-motion-ok)`:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  :where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+  ),
+  :where(input[type="file"])::file-selector-button {
+    --_transition: var(--_transition-motion-ok);
+  }
+}
+```
+
+#### A few shared styles
+
+Buttons and inputs need to have their fonts set to `inherit` so they match the
+rest of the page fonts; otherwise they'll be styled by the browser. This also
+applies to `letter-spacing`. Setting `line-height` to `1.5` sets the letter box
+size to give the text some space above and below:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="file"]
+),
+:where(input[type="file"])::file-selector-button {
+  /* …CSS variables */
+
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: 1.5;
+  border-radius: var(--_border-radius);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uEnOeiAMlwHeKNTAwAIs.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="190" 
+%}
+
+### Styling buttons
+
+#### Selector adjustment
+
+The selector `input[type="file"]` is not the button part of the input, the
+pseudo-element `::file-selector-button` is, so I've removed `input[type="file"]`
+from the list:
+
+```css//5
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="file"]
+),
+:where(input[type="file"])::file-selector-button {
+  
+}
+```
+
+#### Cursor and touch adjustments
+
+First I style the cursor to the `pointer` style, which helps the button indicate
+to mouse users that it's interactive. Then I add `touch-action: manipulation` to
+make clicks not need to wait and observe a potential double click, making the
+buttons feel faster:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+```
+
+{% Aside %} 
+`touch-action: manipulation` isn't required if the HTML document has
+`<meta name="viewport" content="width=device-width">`. Learn more on Chrome
+Developers [here](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).
+{% endAside %}
+
+#### Colors and borders
+
+Next I customize the font size, background, text, and border colors, using some
+of the adaptive custom properties established earlier:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  font-size: var(--_size, 1rem);
+  font-weight: 700;
+  background: var(--_bg);
+  color: var(--_text);
+  border: 2px solid var(--_border);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SO94x6BLMRdRKYOJs4VF.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="182" 
+%}
+
+#### Shadows
+
+The buttons have some great techniques applied. The
+[`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) is
+adaptive to light and dark, creating a pleasing subtle appearance of the button
+text sitting nicely on top of the background. For the
+[`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow),
+three shadows are assigned. The first, `--_shadow-2`, is a regular box shadow.
+The second shadow is a trick to the eye that makes the button appear to be
+beveled up a little bit. The last shadow is for the hover highlight, initially
+at a size of 0, but it will be given a size later and transitioned so it appears
+to grow from the button.
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  box-shadow: 
+    var(--_shadow-2),
+    var(--_shadow-depth),
+    0 0 0 var(--_highlight-size) var(--_highlight)
+  ;
+  text-shadow: var(--_ink-shadow);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/vVV9KIouLqJWM8Ya6UUf.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="173" 
+%}
+
+#### Layout
+
+I gave the button a [flexbox](/learn/css/flexbox/) layout,
+specifically an `inline-flex` layout that will fit its content. I then center
+the text, and vertically and horizontally align children to the
+[center](/centering-in-css/). This will help icons and other
+button elements to align properly.
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/X9C3JQdj8uPWJwsTYoYe.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="176" 
+%}
+
+#### Spacing
+
+For button spacing, I used
+[`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) to keep siblings
+from touching and [logical
+properties](/learn/css/logical-properties/) for padding so button
+spacing works for all text layouts. 
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  gap: 1ch;
+  padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/aS1xe07aOnpyCeJjVbxz.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="176" 
+%}
+
+#### Touch and mouse UX
+
+This next section is mostly for touch users on mobile devices. The first
+property,
+[`user-select`](https://developer.mozilla.org/docs/Web/CSS/user-select),
+is for all users; it prevents text highlighting the button text. This is mostly
+noticeable on touch devices when a button is tapped and held and the operating
+system highlights the text of the button. 
+
+I've generally found this is not the user experience with buttons in built-in
+apps, so I disable it by setting `user-select` to none. Tap highlight colors
+([`-webkit-tap-highlight-color`](https://developer.mozilla.org/docs/Web/CSS/-webkit-tap-highlight-color))
+and operating system context menus
+([`-webkit-touch-callout`](https://developer.mozilla.org/docs/Web/CSS/-webkit-touch-callout))
+are other very web-centric button features that aren't aligned with general
+button user expectations, so I remove them as well.
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+```
+
+#### Transitions
+
+The adaptive `--_transition` variable is assigned to the
+[transition](/learn/css/transitions/) property:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  …
+
+  transition: var(--_transition);
+}
+```
+
+Upon hover, while the user is not actively pressing, adjust the shadow highlight
+size to give it a nice focus appearance that appears to grow from within the
+button:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):where(:not(:active):hover) {
+  --_highlight-size: .5rem;
+}
+```
+
+<figure data-size="full">
+  <style style="display: none">
+    .adjusted-aspect-ratio {
+      aspect-ratio: 1922/434;
+    }
+  </style>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/3O4JtOXT7JTrg1HqfQcR.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="adjusted-aspect-ratio"
+  %}
+</figure>
+
+{% Aside %}
+The `::file-selector-button` is omitted from the selector 
+because the effect is not able to be seen on it.
+{% endAside %}
+
+Upon focus, increase the focus outline offset from the button, also giving it a
+nice focus appearance that appears to grow from within the button:
+
+```css
+:where(button, input):where(:not(:active)):focus-visible {
+  outline-offset: 5px;
+}
+```
+
+<figure data-size="full">
+  <style style="display: none">
+    .adjusted-aspect-ratio {
+      aspect-ratio: 1922/434;
+    }
+  </style>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/1mYWan5gC5tUjPdcmve3.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="adjusted-aspect-ratio"
+  %}
+</figure>
+
+#### Icons
+
+For handling icons, the selector has an added `:where()` selector for direct SVG
+children or elements with the custom attribute `data-icon`. The icon size is set
+with the custom property using inline and block logical properties. Stroke color
+is set, as well as a
+[`drop-shadow`](https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow)
+to match the `text-shadow`. `flex-shrink` is set to `0` so the icon is never
+squished. Lastly, I select lined icons and I assign those styles here with
+`fill: none` and `round` line caps and line joins:
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) > :where(svg, [data-icon]) {
+  block-size: var(--_icon-size);
+  inline-size: var(--_icon-size);
+  stroke: var(--_icon-color);
+  filter: drop-shadow(var(--_ink-shadow));
+
+  flex-shrink: 0;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DOIaznn8R8QS51aWhpjR.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="178" 
+%}
+
+#### Customizing submit buttons
+
+I wanted submit buttons to have a slightly promoted appearance, and I achieved
+this by making the text color of the buttons the accent color:
+
+```css
+:where(
+  [type="submit"], 
+  form button:not([type],[disabled])
+) {
+  --_text: var(--_accent);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/D7BQA4GSeFShH0sJTopK.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="180" 
+%}
+
+#### Customize reset buttons
+
+I wanted reset buttons to have some built-in warning signs to alert users of
+their potentially destructive behavior. I also chose to style the light theme
+button with more red accents than the dark theme. The customization is done by
+changing the appropriate light or dark underlying color, and the button will
+update the style:
+
+```css
+:where([type="reset"]) {
+  --_border-light: hsl(0 100% 83%);
+  --_highlight-light: hsl(0 100% 89% / 20%);
+  --_text-light: hsl(0 80% 50%);
+  --_text-dark: hsl(0 100% 89%);
+}
+```
+
+I also thought it'd be nice for the focus outline color to match the accent of
+red. The text color adapts a dark red to a light red. I make the outline color
+match this with the keyword
+[`currentColor`](/learn/css/color/#color-keywords):
+
+```css
+:where([type="reset"]):focus-visible {
+  outline-color: currentColor;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/8llBDdQhUSKaMsaqKl7t.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="179" 
+%}
+
+#### Customize disabled buttons
+
+It's all too common for disabled buttons to have poor color contrast during the
+attempt to subdue the disabled button so it appears less active. I tested each
+color set and made sure they passed, nudging the HSL lightness value until the
+score passed in DevTools or VisBug.
+
+```css
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+)[disabled] {
+  --_bg: none;
+  --_text-light: hsl(210 7% 40%);
+  --_text-dark: hsl(210 11% 71%);
+
+  cursor: not-allowed;
+  box-shadow: var(--_shadow-1);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/9hEOeFb5XrVV86iJATEq.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="176" 
+%}
+
+#### Customizing file input buttons
+
+The file input button is a container for a span and a button. CSS is able to
+style the input container a little bit, as well as the nested button, but not
+the span. The container is given `max-inline-size` so it won't grow larger than
+it needs to, while `inline-size: 100%` will allow itself to shrink and fit
+containers smaller than it is. The background color is set to an adaptive color
+that is darker than other surfaces, so it looks behind the file selector button.
+
+```css
+:where(input[type="file"]) {
+  inline-size: 100%;
+  max-inline-size: max-content;
+  background-color: var(--_input-well);
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/55vHgwPtOnXQlTY3Y9hz.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The file selector button and input type buttons are specifically given
+`appearance: none` to remove any browser-provided styles that weren't
+overwritten by the other button styles. 
+
+```css
+:where(input[type="button"]),
+:where(input[type="file"])::file-selector-button {
+  appearance: none;
+}
+```
+
+Lastly, margin is added to the `inline-end` of the button to push the span text
+away from the button, creating some space.
+
+```css
+:where(input[type="file"])::file-selector-button {
+  margin-inline-end: var(--_padding-inline);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KKy2Is3NsFjXAbltjrTW.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="180" 
+%}
+
+#### Special dark theme exceptions
+
+I gave the primary action buttons a darker background for higher contrasting
+text, giving them a slightly more promoted appearance.
+
+```css
+@media (prefers-color-scheme: dark) {
+  :where(
+    [type="submit"],
+    [type="reset"],
+    [disabled],
+    form button:not([type="button"])
+  ) {
+    --_bg: var(--_input-well);
+  }
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DyIfTEeirgpu1LvJFUCc.png", 
+  alt="Screenshot showing buttons after the preceding styles have been applied.", 
+  width="800", 
+  height="177" 
+%}
+
+### Creating variants
+
+For fun, and because it's practical, I chose to show how to create a few
+variants. One variant is very vibrant, similar to how primary buttons often
+look. Another variant is large. The last variant has a gradient-filled icon.
+
+#### Vibrant button
+
+To achieve this button style, I overwrote the base props directly with blue
+colors. While this was quick and easy, it removes the adaptive props and looks
+the same in both light and dark themes.
+
+```css
+.btn-custom {
+  --_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
+  --_border: hsl(228 89% 63%);
+  --_text: hsl(228 89% 100%);
+  --_ink-shadow: 0 1px 0 hsl(228 57% 50%);
+  --_highlight: hsl(228 94% 67% / 20%);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/2XDwuP22sO0HFzKrDzYA.png", 
+  alt="Custom button is shown in light and dark. It is very vibrant blue like typical primary action buttons tend to be.", 
+  width="800", 
+  height="177" 
+%}
+
+{% Aside %}
+If I wanted to build an adaptive primary action button, I would overwrite 
+`--_bg-light` and `--_bg-dark` instead of `--_bg`. Overwriting these variables 
+allows the base property to swap between the new defined light and dark props.
+{% endAside %}
+
+#### Large button
+
+This style of button is achieved by modifying the `--_size` custom property.
+Padding and other space elements are relative to this size, scaling along
+proportionally with the new size.
+
+```css
+.btn-large {
+  --_size: 1.5rem;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jw8Dl101A8qDRWzb2ZcN.png", 
+  alt="Large button is shown next to the custom button, about 150 times larger.", 
+  width="800", 
+  height="174" 
+%}
+
+#### Icon button
+
+This icon effect doesn't have anything to do with our button styles, but it does
+show how to achieve it with just a few CSS properties, and how well the button
+handles icons that aren't inline SVG.
+
+```css
+[data-icon="cloud"] {
+  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;
+
+  -webkit-mask: var(--icon-cloud);
+  mask: var(--icon-cloud);
+  background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Ti4EpUHGSLoCksVQHwmk.png", 
+  alt="A button with an icon is shown in light and dark themes.", 
+  width="800", 
+  height="173" 
+%}
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+*Nothing to see here yet.*
+
+### Resources
+
+- [Source code](https://github.com/argyleink/gui-challenges/tree/main/buttons) on Github
diff --git a/src/site/content/en/blog/building-a-color-scheme/index.md b/src/site/content/en/blog/building-a-color-scheme/index.md
new file mode 100644
index 00000000000..bdca878ff24
--- /dev/null
+++ b/src/site/content/en/blog/building-a-color-scheme/index.md
@@ -0,0 +1,606 @@
+---
+layout: post
+title: Building a color scheme
+subhead: A foundational overview of how to establish a dynamic and configurable color scheme
+authors:
+  - adamargyle
+description: A foundational overview of how to establish a dynamic and configurable color scheme
+date: 2021-06-09
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wURg4Z43zI5ge137BuaG.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uuUsTCsp9q1zdbN8Lsyw.png
+tags:
+  - blog
+  - css
+  # - color
+---
+
+In this post I want to share thinking on ways to manage multiple color schemes
+in CSS. [Try the demo](https://gui-challenges.web.app/color-schemes/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/b2EpUdydz61rRc11XdkH.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/color-schemes/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'oHcTn83M1ls' %}
+
+## Overview
+
+We'll build an accessible color system with custom properties and `calc()`, to
+make a webpage that's adaptive to user preferences while keeping the authoring
+experience minimal. We start with a base brand color and build a system of
+variants from it: 2 text colors, 4 surface colors and a matching shadow.
+
+This guide begins with defining all of the colors for each color scheme up
+front. Not until the very end are they used to change the page.
+
+### The Brand
+
+Often, a brand color has already been established and is delivered as
+[hex](/learn/css/color/#hex-colors) or
+[rgb](/learn/css/color/#rgb-(red-green-blue)). This GUI Challenge
+has a base brand color of `#0af`. Firstly, for this color system, the hex value
+needs converted to
+[hsl](/learn/css/color/#hsl-(hue-saturation-lightness)).
+
+```css/2
+* {
+  --brand: #0af;
+  --brand: hsl(200 100% 50%);
+}
+```
+
+In order to enable a concept of darkening or lightening the brand color, by say
+20%, the 3 channels of the hsl color value need extracted into their own custom
+properties, like this:
+
+```css
+* {
+  --brand-hue: 200;
+  --brand-saturation: 100%;
+  --brand-lightness: 50%;
+}
+```
+
+CSS can do math on those color properties, for example `calc(var(--brand-lightness) -
+20%)` to decrease the lightness value by 20%. This is foundational to building a
+color scheme as CSS can keep all colors in the same hue family by adjusting the
+hsl saturation and lightness amounts.
+
+## Light theme
+
+Each color variant will be marked with its matching scheme, in this case, each
+is appended with `-light`.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SS3ejtV78NsBGaNEjZhY.png",
+alt="preview of the light theme end results", width="800", height="480" %}
+
+### Brand
+
+Starting with the brand color, it's rebuilt by wrapping `--brand-hue`, `--brand-saturation`
+and `--brand-lightness` custom properties inside the hsl `()` function parenthesis,
+without any calculations:
+
+```css
+* {
+  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
+}
+```
+
+### Text colors
+
+Next, the essentials of a color scheme need text colors. In a light theme, text
+should be very dark. Notice how the lightness of the following colors is low,
+well under 50%.
+
+```css
+* {
+  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
+  --text2-light: hsl(var(--brand-hue) 30% 30%);
+}
+```
+
+`--text1-light`, since it's very dark at 10% lightness, keeps the heavy 100%
+saturation so the brand color can still peek through into the dark dark navy.
+
+{% Aside %}
+Most users wouldn't be able to tell you it's not black, but they
+will notice it feels harmonious somehow. **The secret** is to reserve black and
+white exclusively for brightest highlights and darkest shadows.
+{% endAside %}
+
+`--text2-light`, it's not quite as dark as the 1st color, which is good as it's
+a secondary color, and it's also much less saturated.
+
+### Surface colors
+
+Surface colors are the backgrounds, borders and other decorative surfaces that
+text sits upon or within. In a light theme, these are the light colors, as
+opposed to the text colors which were dark. To create light colors with hsl,
+we'll use higher percentage values in the third lightness value. We'll also lower
+the saturation, so the light greys don't look too tinted.
+
+```css
+* {
+  --surface1-light: hsl(var(--brand-hue) 25% 90%);
+  --surface2-light: hsl(var(--brand-hue) 20% 99%);
+  --surface3-light: hsl(var(--brand-hue) 20% 92%);
+  --surface4-light: hsl(var(--brand-hue) 20% 85%);
+}
+```
+
+4 surface colors were created since decorative colors tend to need more
+variants, for interactive moments like `:focus` or `:hover` or to create the
+appearance of paper layers. In these scenarios, it's nice to transition
+`--surface2-light` on hover to `--surface3-light`, so a hover results in an
+increase of contrast (99% lightness to 92% lightness; making it darker).
+
+### Shadows
+
+Shadows within a color scheme are above and beyond, but add a lifelike nature to
+the effect and help it stand out from unrealistic black based shadows. To do
+this, the color of the shadow will use the hue custom property, be slightly
+saturated with the hue but still very dark. Essentially building a very dark
+slightly blue shadow.
+
+```css
+* {
+  --surface-shadow-light: var(--brand-hue) 10% 20%;
+  --shadow-strength-light: .02;
+}
+```
+
+`--surface-shadow-light` is not wrapped in an hsl function. This is because the
+`--shadow-strength` value will be combined to create some opacity, and CSS needs
+the pieces in order to perform calculations. Skip to the [rad shadow
+section](#rad-shadow) to learn more.
+
+### Light colors all together
+
+No need to hunt around to find how any of the light colors are made, they are
+all in one place in the CSS.
+
+```css
+* {
+  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
+  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
+  --text2-light: hsl(var(--brand-hue) 30% 30%);
+  --surface1-light: hsl(var(--brand-hue) 25% 90%);
+  --surface2-light: hsl(var(--brand-hue) 20% 99%);
+  --surface3-light: hsl(var(--brand-hue) 20% 92%);
+  --surface4-light: hsl(var(--brand-hue) 20% 85%);
+  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
+  --shadow-strength-light: .02;
+}
+```
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/f0H9hh4Qi0aQ61hZwOlU.png",
+    alt="screenshot of the light colors all together",
+    width="800", height="144"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/argyleink/pen/WNpyypP">Sandbox on CodePen</a>
+  </figcaption>
+</figure>
+
+## Dark theme
+
+Most brands don't begin with a dark theme, it's a variant of their primary,
+usually lighter, theme. Users, on the other hand, often choose a dark theme for
+different contexts, like night time. These factors have led me to keeping two
+things in mind with dark themes:
+
+1. Users will generally be in the dark while using this theme, so test in the
+   dark.
+2. Colors should desaturate as to not vibrate on the screen due to being
+   over-intense.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SMSrhAcRyZFnaf34XA3g.png",
+alt="preview of the end result of the dark theme", width="800", height="486" %}
+
+### Brand
+
+The light theme used the 3 brand hsl color channels values without alteration,
+the dark theme does not. The saturation is cut in half and the lightness reduced
+a relative 50%.
+
+```css
+* {
+  --brand-dark: hsl(
+    var(--brand-hue)
+    calc(var(--brand-saturation) / 2)
+    calc(var(--brand-lightness) / 1.5)
+  );
+}
+```
+
+### Text colors
+
+In a dark theme, the text colors should be light. The following colors have high
+values for lightness, putting them closer to white.
+
+```css
+* {
+  --text1-dark: hsl(var(--brand-hue) 15% 85%);
+  --text2-dark: hsl(var(--brand-hue) 5% 65%);
+}
+```
+
+### Surface colors
+
+In a dark theme, the surface colors should be dark. The following colors have
+low lightness and saturation, with the 1st surface being the darkest at 10%.
+
+```css
+* {
+  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
+  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
+  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
+  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
+}
+```
+
+### Shadows
+
+In a dark theme, shadows can be very hard to see. Makes sense since it's hard to
+darken something that's already fairly dark. This is where
+`--shadow-strength-dark` comes in super handy as it allows us to darken the
+shadows by changing one variable.
+
+```css
+* {
+  --surface-shadow-dark: var(--brand-hue) 50% 3%;
+  --shadow-strength-dark: .8;
+}
+```
+
+Also, look at how much saturation is in that shadow. Can you notice the color
+when you're looking at the interface? Try removing the saturation from the
+devtools, which do you prefer?!
+
+### Dark colors all together
+
+```css
+* {
+  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
+  --text1-dark: hsl(var(--brand-hue) 15% 85%);
+  --text2-dark: hsl(var(--brand-hue) 5% 65%);
+  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
+  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
+  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
+  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
+  --surface-shadow-dark: var(--brand-hue) 50% 3%;
+  --shadow-strength-dark: .8;
+}
+```
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CHAQlRXJKvclpyaChVyv.png",
+alt="screenshot of the dark colors all together", width="800", height="160" %}
+  <figcaption>
+    <a href="https://codepen.io/argyleink/pen/WNpyypP">Sandbox on CodePen</a>
+  </figcaption>
+</figure>
+
+## Dim theme
+
+This color scheme is all about orchestrating lightness and saturation. There
+should be enough saturation present to still have a hue visible, but should also
+just barely pass [contrast scores](/color-contrast/) since it's
+intended to be dim and low contrast anyway.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/QjvjPLubdap7v7s9vAEh.png",
+alt="preview of the end results from the dim theme", width="800", height="485"
+%}
+
+### Brand
+
+```css
+* {
+  --brand-dim: hsl(
+    var(--brand-hue)
+    calc(var(--brand-saturation) / 1.25)
+    calc(var(--brand-lightness) / 1.25)
+  );
+}
+```
+
+### Text colors
+
+```css
+* {
+  --text1-dim: hsl(var(--brand-hue) 15% 75%);
+  --text2-dim: hsl(var(--brand-hue) 10% 61%);
+}
+```
+
+### Surface colors
+
+```css
+* {
+  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
+  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
+  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
+  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
+}
+```
+
+### Shadows
+
+```css
+* {
+  --surface-shadow-dim: var(--brand-hue) 30% 13%;
+  --shadow-strength-dim: .2;
+}
+```
+
+### Dim colors all together
+
+```css
+* {
+  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
+  --text1-dim: hsl(var(--brand-hue) 15% 75%);
+  --text2-dim: hsl(var(--brand-hue) 10% 61%);
+  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
+  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
+  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
+  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
+  --surface-shadow-dim: var(--brand-hue) 30% 13%;
+  --shadow-strength-dim: .2;
+}
+```
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/MCCNiyM5zQwnVlr86O8k.png",
+alt="screenshot of the dim colors all together", width="800", height="150" %}
+  <figcaption>
+    <a href="https://codepen.io/argyleink/pen/WNpyypP">Sandbox on CodePen</a>
+  </figcaption>
+</figure>
+
+## Accessible colors
+
+Notice how the lowest lightness in the dark text color set is 65% and the
+highlest lightness in the dark surfaces is 25%. That's 40% of lightness
+breathing room between them. In the light theme, there's 55% breathing room in
+the light theme. Keeping lightness differences between text and surface colors
+at around 40-50% can help keep color contrast ratios high, while also being a
+subtle lever to adjust in case scores are poor.
+
+I call it "bump bump til ya pass", which is the interaction of bumping the
+lightness value until a tool shows I'm passing.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/DQ0fOGl9Bg8Uy7ErdBPA.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    shift + down arrow is pressed to lower the lightness and increase contrast until passing
+  </figcaption>
+</figure>
+
+Each of the themes created in this challenge pass contrast scores. The dim color scheme has the lowest contrast of them, but still passes the minimum requirements. To help others on the team use good contrasting colors, it's a good idea to create a classname that pairs a surface color with an accessible text color.
+
+```css
+.surface1 {
+  background-color: var(--surface1);
+  color: var(--text2);
+}
+
+.surface2 {
+  background-color: var(--surface2);
+  color: var(--text2);
+}
+
+.surface3 {
+  background-color: var(--surface3);
+  color: var(--text1);
+}
+
+.surface4 {
+  background-color: var(--surface4);
+  color: var(--text1);
+}
+```
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zrOv3KCNHU8lXELRTkvF.png",
+    alt="Screenshot of the dim surface and text pairings",
+    width="800", height="560"
+  %}
+  <figcaption>
+    Screenshot of the dim surface and text pairings with <a href="https://a.nerdy.dev/gimme-visbug">VisBug</a>
+  </figcaption>
+</figure>
+
+## Rad Shadow
+
+The themes use a utility class called `.rad-shadow`. This shadow was generated
+at this [Smooth Shadow](https://shadows.brumm.af/) tool, which I appreciate very
+much. I took its generated snippet and customized it with my own colors and,
+opacity calculations. The reason for this was to create a shadow I could adjust
+within each color scheme.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/cAjKit2v0f5dOQnUebCK.png",
+alt="each shadow next to each other", width="800", height="477" %}
+
+To accomplish this, I created 2 variables for each color scheme to adjust, a
+shadow color and a shadow strength. The color is for saturation and darkness
+adjustments, while the strength is for an easy way to drive up the shadow
+intensity when it's a dark color scheme. End result was something like this.
+
+```css
+:root {
+  --surface-shadow-light: var(--brand-hue) 10% 20%;
+  --shadow-strength-light: .02;
+}
+
+.rad-shadow {
+  box-shadow:
+    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
+    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
+    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
+    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
+    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
+    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
+  ;
+}
+```
+
+If I were to go further with shadows in my color scheme, I'd make the shadow
+angles a design token constant too, as the light direction should be the same
+between all the shadows of the design.
+
+## Using of the color schemes
+
+With the predefining of colors complete, it's time to turn them into
+scheme agnostic properties. What I mean is, as a CSS
+author inside this color scheme project, one should rarely need to access a
+specific color scheme's value. I want to make it easy to stay within the theme.
+
+To accomplish this, usage of the color scheme should be exclusively done through
+the generic custom properties, which we'll be defining in a moment. This way,
+folks using the design variables never need to worry about which color scheme is
+currently set, they just need to use the surface and text colors. Instead of
+`color: var(--text1-light)` use `color: var(--text1)`. All adapting and pivoting
+of colors is done much higher level in the CSS.
+
+Diving in, the light theme's connective styles in the following code block,
+connect a generic custom property with the light theme specific color. Now all
+uses of `var(--brand)` will use the light brand color.
+
+### Light theme (auto)
+
+```css
+:root {
+  color-scheme: light;
+  --brand: var(--brand-light);
+  --text1: var(--text1-light);
+  --text2: var(--text2-light);
+  --surface1: var(--surface1-light);
+  --surface2: var(--surface2-light);
+  --surface3: var(--surface3-light);
+  --surface4: var(--surface4-light);
+  --surface-shadow: var(--surface-shadow-light);
+  --shadow-strength: var(--shadow-strength-light);
+}
+```
+
+The site is now using the light theme. This is a very fun successful moment!
+Let's have a few more of those moments as we use our predefined colors in other
+color scheme contexts.
+
+### Dark theme (auto)
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    --brand: var(--brand-dark);
+    --text1: var(--text1-dark);
+    --text2: var(--text2-dark);
+    --surface1: var(--surface1-dark);
+    --surface2: var(--surface2-dark);
+    --surface3: var(--surface3-dark);
+    --surface4: var(--surface4-dark);
+    --surface-shadow: var(--surface-shadow-dark);
+    --shadow-strength: var(--shadow-strength-dark);
+  }
+}
+```
+
+### Light theme
+
+```css
+[color-scheme="light"] {
+  color-scheme: light;
+
+  --brand: var(--brand-light);
+  --text1: var(--text1-light);
+  --text2: var(--text2-light);
+  --surface1: var(--surface1-light);
+  --surface2: var(--surface2-light);
+  --surface3: var(--surface3-light);
+  --surface4: var(--surface4-light);
+  --surface-shadow: var(--surface-shadow-light);
+  --shadow-strength: var(--shadow-strength-light);
+}
+```
+
+### Dark theme
+
+```css
+[color-scheme="dark"] {
+  color-scheme: dark;
+
+  --brand: var(--brand-dark);
+  --text1: var(--text1-dark);
+  --text2: var(--text2-dark);
+  --surface1: var(--surface1-dark);
+  --surface2: var(--surface2-dark);
+  --surface3: var(--surface3-dark);
+  --surface4: var(--surface4-dark);
+  --surface-shadow: var(--surface-shadow-dark);
+  --shadow-strength: var(--shadow-strength-dark);
+}
+```
+
+### Dim theme
+
+```css
+[color-scheme="dim"] {
+  color-scheme: dark;
+
+  --brand: var(--brand-dim);
+  --text1: var(--text1-dim);
+  --text2: var(--text2-dim);
+  --surface1: var(--surface1-dim);
+  --surface2: var(--surface2-dim);
+  --surface3: var(--surface3-dim);
+  --surface4: var(--surface4-dim);
+  --surface-shadow: var(--surface-shadow-dim);
+  --shadow-strength: var(--shadow-strength-dim);
+}
+```
+
+At this point, authors are free to use the provided color scheme generics as
+needed, and should never need to worry about themes again.
+
+{% Codepen {
+  user: 'argyleink',
+  id: 'vYxrrpd'
+} %}
+
+## Conclusion
+
+Now that you know how I did it, how would you?! 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a Codepen or host your own demo, tweet me with it, and I'll add it to the
+Community remixes section below.
+
+### Source
+
+- [GUI Challenges source on GitHub](https://github.com/argyleink/gui-challenges)
+- [Color scheme Codepen starter](https://codepen.io/argyleink/pen/vYxrrpd)
+
+Community remixes
+- [@chris-kruining](https://github.com/chris-kruining) added a hue slider,
+  status colors and contrast modes for `no-preference`, `more` and `less`:
+  [demo](https://unifyned.com/colors.html).
diff --git a/src/site/content/en/blog/building-a-crooked-grid-illusion/index.md b/src/site/content/en/blog/building-a-crooked-grid-illusion/index.md
new file mode 100644
index 00000000000..61f08cc8d27
--- /dev/null
+++ b/src/site/content/en/blog/building-a-crooked-grid-illusion/index.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: Building a crooked grid illusion
+subhead: A fun exploration of ways to recreate an optical illusion with CSS.
+authors:
+  - adamargyle
+description: A fun exploration of ways to recreate an optical illusion with CSS.
+date: 2022-08-24
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wn35IKyCSBIGPCLe5zNS.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/rNdAD4YjP4wKd2iHMBfg.png
+tags:
+  - blog
+  - css
+---
+
+In this post we're going to have a little bit of fun! There must be 100 ways to
+achieve this optical illusion, and I'm only going to share with you my thoughts,
+but encourage you to try your style. [Try the
+demo](https://gui-challenges.web.app/crooked-illusion/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges).
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube '71jpjr7syc4' %}
+
+## Overview
+
+The name of this illusion is the [Cafe Wall
+Illusion](https://en.wikipedia.org/wiki/Caf%C3%A9_wall_illusion). There's no
+crooked lines to be found anywhere, but our eyes perceive slants. It may be hard
+to believe, but rebuilding it will definitely help you see through the illusion.
+
+{% Aside %}
+To help you kick off this challenge, [here's a Codepen you can
+fork](https://codepen.io/web-dot-dev/pen/WNzmMvq) which has all the HTML ready
+for you to style your way.
+{% endAside %}
+
+## Markup
+
+The HTML for this is straightforward rows and columns. The `<body>` is the
+container with `<div class="row">` for children. Each row contains five `<div
+class="square">` elements.
+
+```html
+<div class="row">
+  <div class="square"></div>
+  <div class="square"></div>
+  <div class="square"></div>
+  <div class="square"></div>
+  <div class="square"></div>
+</div>
+…
+```
+
+## Styles
+
+I chose [CSS grid](https://developer.mozilla.org/docs/Web/CSS/grid)
+because it seemed fitting given the presentation style of rows, and it also
+features
+[`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content)
+which seemed like a good way to offset row children.
+
+### Body styles
+
+Starting with the body styles, I used `display: grid` and `grid-auto-rows` to
+provide the row layouts. The `calc()` you see for the row sizes takes into
+account the border on each row, and helps the effect fit the full viewport.
+
+```css
+body {
+  display: grid;
+  grid-auto-rows: calc(20vh - 4px);
+  gap: 4px;
+  background: gray;
+  margin: 0;
+}
+```
+
+### Row styles
+
+Here I chose grid again, but instead of creating rows with it I used
+`grid-auto-flow: column` to change the direction to columns. I then define
+column sizes and add a little inline padding to the row, so boxes don't run into
+the viewport edge. Then I target certain rows and justify the content to either
+`center` or `end`, creating that offset that fuels the illusion.
+
+```css
+.row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 9vw;
+  padding-inline: 4vw;
+  gap: 10vw;
+  background: white;
+}
+
+.row:nth-child(even) {
+  justify-content: center;
+}
+
+.row:nth-child(3n) {
+  justify-content: end;
+}
+```
+
+### Square styles
+
+All that's left now is to change the squares color and add a border:
+
+```css
+.square {
+  border-inline: 4px solid gray;
+  background: black;
+}
+```
+
+## Conclusion
+
+Now that you know how I did it, how would you?! 🙂 Floats? Flexbox? Gradient?!
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [Mark Boots](https://twitter.com/markboots) with gradients: [demo and code](https://codepen.io/MarkBoots/pen/VwXNRZG)
diff --git a/src/site/content/en/blog/building-a-dialog-component/index.md b/src/site/content/en/blog/building-a-dialog-component/index.md
new file mode 100644
index 00000000000..5df7a321f48
--- /dev/null
+++ b/src/site/content/en/blog/building-a-dialog-component/index.md
@@ -0,0 +1,1278 @@
+---
+layout: post
+title: Building a dialog component
+subhead: A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element.
+authors:
+  - adamargyle
+description: A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element.
+date: 2022-04-13
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/7l53GAQu1kmIuqOmTjRI.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/iVRNS1o7v27mmBPQiDdk.png
+alt: Preview of the mini and mega dialogs in both light and dark themes.
+tags:
+  - blog
+  - css
+  - html
+  - javascript
+---
+
+In this post I want to share my thoughts on how to build color-adaptive,
+responsive, and accessible mini and mega modals with the `<dialog>` element.
+[Try the demo](https://gui-challenges.web.app/dialog/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges)!
+
+<figure data-size="full">
+  <style style="display: none">
+    .adjusted-aspect-ratio {
+      aspect-ratio: 4/3;
+    }
+  </style>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/rx8k6w5iQnEOwqOoUNNG.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="adjusted-aspect-ratio"
+  %}
+  <figcaption>
+    Demonstration of the mega and mini dialogs in their light and dark themes.
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'GDzzIlRhEzM' %}
+
+## Overview
+
+The
+[`<dialog>`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog)
+element is great for in-page contextual information or action. Consider when the
+user experience can benefit from a same page action instead of multi-page
+action: perhaps because the form is small or the only action required from the
+user is confirm or cancel.
+
+The `<dialog>` element has recently become stable across browsers:
+
+{% BrowserCompat 'html.elements.dialog' %}
+
+I found the element was missing a few things, so in this [GUI
+Challenge](https://a.nerdy.dev/gui-challenges) I add the developer experience
+items I expect: additional events, light dismiss, custom animations, and a mini
+and mega type.
+
+## Markup
+
+The essentials of a `<dialog>` element are modest. The element will
+automatically be hidden and has styles built in to overlay your content.
+
+```html
+<dialog>
+  …
+</dialog>
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'popLbZB',
+  height: 300,
+  theme: 'auto',
+  tab: 'html,result'
+} %}
+
+We can improve this baseline.
+
+Traditionally, a dialog element shares a lot with a modal, and often the names
+are interchangeable. I took the liberty here of using the dialog element for
+both small dialog popups (mini), as well as full page dialogs (mega). I named
+them mega and mini, with both dialogs slightly adapted for different use cases.
+I added a `modal-mode` attribute to allow you to specify the type:
+
+```html
+<dialog id="MegaDialog" modal-mode="mega"></dialog>
+<dialog id="MiniDialog" modal-mode="mini"></dialog>
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/OoSjF29FsSO81nkImk7o.png", 
+  alt="Screenshot of both the mini and the mega dialogs in both light and dark themes.", 
+  width="800", 
+  height="900" 
+%}
+
+Not always, but generally dialog elements will be used to gather some
+interaction information. [Forms inside dialog elements are made to go
+together](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/returnValue).
+It's a good idea to have a form element wrap your dialog content so that
+JavaScript can access the data the user has entered. Furthermore, buttons inside
+a form using `method="dialog"` can close a dialog without JavaScript and pass
+data.
+
+```html
+<dialog id="MegaDialog" modal-mode="mega">
+  <form method="dialog">
+    …
+    <button value="cancel">Cancel</button>
+    <button value="confirm">Confirm</button>
+  </form>
+</dialog>
+```
+
+### Mega dialog
+
+A mega dialog has three elements inside the form:
+[`<header>`](https://developer.mozilla.org/docs/Web/HTML/Element/header),
+[`<article>`](https://developer.mozilla.org/docs/Web/HTML/Element/article),
+and
+[`<footer>`](https://developer.mozilla.org/docs/Web/HTML/Element/footer).
+These serve as semantic containers, as well as style targets for the
+presentation of the dialog. The header titles the modal and offers a close
+button. The article is for form inputs and information. The footer holds a
+[`<menu>`](https://developer.mozilla.org/docs/Web/HTML/Element/menu) of
+action buttons.
+
+```html
+<dialog id="MegaDialog" modal-mode="mega">
+  <form method="dialog">
+    <header>
+      <h3>Dialog title</h3>
+      <button onclick="this.closest('dialog').close('close')"></button>
+    </header>
+    <article>...</article>
+    <footer>
+      <menu>
+        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
+        <button type="submit" value="confirm">Confirm</button>
+      </menu>
+    </footer>
+  </form>
+</dialog>
+```
+
+The first menu button has
+[`autofocus`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus)
+and an `onclick` inline event handler. The `autofocus` attribute will receive
+focus when the dialog is opened, and I find it's best practice to put this on
+the cancel button, not the confirm button. This ensures that confirmation is
+deliberate and not accidental. 
+
+{% Aside %} 
+The `onclick` handler contains some JavaScript which will find its nearest
+parent dialog element and closes it, passing string data "cancel", so close
+event handlers can inform developers which button was clicked. 
+{% endAside %}
+
+### Mini dialog
+
+The mini dialog is very similar to the mega dialog, it's just missing a
+`<header>` element. This allows it to be smaller and more inline.
+
+```html
+<dialog id="MiniDialog" modal-mode="mini">
+  <form method="dialog">
+    <article>
+      <p>Are you sure you want to remove this user?</p>
+    </article>
+    <footer>
+      <menu>
+        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
+        <button type="submit" value="confirm">Confirm</button>
+      </menu>
+    </footer>
+  </form>
+</dialog>
+```
+
+The dialog element provides a strong foundation for a full viewport element that
+can collect data and user interaction. These essentials can make for some very
+interesting and powerful interactions in your site or app.
+
+## Accessibility
+
+The dialog element has very good built-in accessibility. Instead of adding these
+features like I usually do, many are already there. 
+
+### Restoring focus
+
+As we did by hand in [Building a sidenav
+component](/building-a-sidenav-component/), it's important that
+opening and closing something properly puts focus on the relevant open and close
+buttons. When that sidenav opens, focus is put on the close button. When the
+close button is pressed, focus is restored to the button that opened it.
+
+With the dialog element, this is built-in default behavior:
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/QJNfNwV4Nev5Ax4xKteM.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+Unfortunately, if you want to animate the dialog in and out, this functionality
+is lost. In the [JavaScript section](#javascript) I'll be restoring that
+functionality.
+
+### Trapping focus
+
+The dialog element manages
+[`inert`](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert)
+for you on the document. Before `inert`, JavaScript was used to watch for focus
+leaving an element, at which point it intercepts and puts it back.
+
+{% BrowserCompat 'api.HTMLElement.inert' %}
+
+After `inert`, any parts of the document can be "frozen" insomuch that they are
+no longer focus targets or are interactive with a mouse. Instead of trapping
+focus, focus is guided into the only interactive part of the document.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Cq08CQakxuwmUCR9r7c0.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Open and auto focus an element
+
+By default, the dialog element will assign focus to the first focusable element
+in the dialog markup. If this isn't the best element for the user to default to,
+use the `autofocus` attribute. As described earlier, I find it's best practice
+to put this on the cancel button and not the confirm button. This ensures that
+confirmation is deliberate and not accidental.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/GSNvEAOJh7nxO0IWkAer.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Closing with the escape key
+
+It's important to make it easy to close this potentially interruptive element.
+Fortunately, the dialog element will handle the escape key for you, freeing you
+from the orchestration burden.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/dH44OevxBNsEY8K9Q80G.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+## Styles
+
+There's an easy path to styling the dialog element and a hard path. The easy
+path is achieved by not changing the display property of the dialog and working
+with its limitations. I go down the hard path to provide custom animations for
+opening and closing the dialog, taking over the `display` property and more.
+
+### Styling with Open Props
+
+To accelerate adaptive colors and overall design consistency, I've shamelessly
+brought in my CSS variable library [Open Props](https://open-props.style/). In
+addition to the free provided variables, I also import a
+[normalize](https://codepen.io/argyleink/pen/KKvRORE) file and some
+[buttons](https://codepen.io/argyleink/pen/gOXbvjj), both of which Open Props
+provides as optional imports. These imports help me focus on customizing the
+dialog and demo while not needing a lot of styles to support it and make it look
+good.
+
+### Styling the `<dialog>` element
+
+#### Owning the display property
+
+The default show and hide behavior of a dialog element toggles the display
+property from `block` to `none`. This unfortunately means it can't be animated
+in and out, only in. I'd like to animate both in and out, and the first step is
+to set my own
+[display](https://developer.mozilla.org/docs/Web/CSS/display) property:
+
+```css
+dialog {
+  display: grid;
+}
+```
+
+By changing, and therefore owning, the display property value, as shown in the
+above CSS snippet, a considerable amount of styles needs managed in order to
+facilitate the proper user experience. First, the default state of a dialog is
+closed. You can represent this state visually and prevent the dialog from
+receiving interactions with the following styles:
+
+```css
+dialog:not([open]) {
+  pointer-events: none;
+  opacity: 0;
+}
+```
+
+Now the dialog is invisible and cannot be interacted with when not open. Later
+I'll add some JavaScript to manage the `inert` attribute on the dialog, ensuring
+that keyboard and screen-reader users also can't reach the hidden dialog.
+
+#### Giving the dialog an adaptive color theme
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/IUZ0U0gAcYU9NddPnzIL.png", 
+  alt="Mega dialog showing the light and dark theme, demonstrating the surface colors.", 
+  width="800", 
+  height="266" 
+%}
+
+While [`color-scheme`](/color-scheme) opts your document into a browser-provided
+adaptive color theme to light and dark system preferences, I wanted to customize
+the dialog element more than that. Open Props provides a few [surface
+colors](https://codepen.io/argyleink/pen/KKvRORE) that adapt automatically to
+light and dark system preferences, similar to using the `color-scheme`. These
+are great for creating layers in a design and I love using color to help
+visually support this appearance of layer surfaces. The background color is
+`var(--surface-1)`; to sit on top of that layer, use `var(--surface-2)`:
+
+```css
+dialog {
+  …
+  background: var(--surface-2);
+  color: var(--text-1);
+}
+
+@media (prefers-color-scheme: dark) {
+  dialog {
+    border-block-start: var(--border-size-1) solid var(--surface-3);
+  }
+}
+```
+
+More adaptive colors will be added later for child elements, such as the header
+and footer. I consider them extra for a dialog element, but really important in
+making a compelling and well designed dialog design.
+
+{% Aside %}
+For a deep dive on adaptive color systems, 
+see the [building a color scheme](/building-a-color-scheme/) GUI Challenge.
+{% endAside %}
+
+#### Responsive dialog sizing
+
+The dialog defaults to delegating its size to its contents, which is generally
+great. My goal here is to constrain the
+[`max-inline-size`](https://developer.mozilla.org/docs/Web/CSS/max-inline-size)
+to a readable size (`--size-content-3` = `60ch`) or 90% of the viewport width. This
+ensures the dialog won't go edge to edge on a mobile device, and won't be so
+wide on a desktop screen that it's hard to read. Then I add a
+[`max-block-size`](https://developer.mozilla.org/docs/Web/CSS/max-block-size)
+so the dialog won't exceed the height of the page. This also means that we'll
+need to specify where the scrollable area of the dialog is, in case it's a tall
+dialog element.
+
+```css
+dialog {
+  …
+  max-inline-size: min(90vw, var(--size-content-3));
+  max-block-size: min(80vh, 100%);
+  max-block-size: min(80dvb, 100%);
+  overflow: hidden;
+}
+```
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/lf2PL5E3VQjpteVhQMUl.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+Notice how I have `max-block-size` twice? The first uses `80vh`, a physical
+viewport unit. What I really want is to keep the dialog within relative flow,
+for international users, so I use the logical, newer, and only partially
+supported `dvb` unit in the second declaration for when it becomes more stable.
+
+{% BrowserCompat 'css.types.length.dvb' %}
+
+#### Mega dialog positioning
+
+To assist in positioning a dialog element, it's worth breaking down its two
+parts: the full screen backdrop and the dialog container. The backdrop must
+cover everything, providing a shade effect to help support that this dialog is
+in front and the content behind is inaccessible. The dialog container is free to
+center itself over this backdrop and take whatever shape its contents require.
+
+The following styles fix the dialog element to the window, stretching it to each
+corner, and uses `margin: auto` to center the content:
+
+```css
+dialog {
+  …
+  margin: auto;
+  padding: 0;
+  position: fixed;
+  inset: 0;
+  z-index: var(--layer-important);
+}
+```
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fsjCyaR7hwOKuSuL0jPk.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+##### Mobile mega dialog styles
+
+On small viewports, I style this full page mega modal a little differently. I
+set the bottom margin to `0`, which brings the dialog content to the bottom of
+the viewport. With a couple of style adjustments, I can turn the dialog into an
+actionsheet, closer to the user's thumbs:
+
+```css
+@media (max-width: 768px) {
+  dialog[modal-mode="mega"] {
+    margin-block-end: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/pmvxlxa2b3SnTnCow5gi.png", 
+  alt="Screenshot of devtools overlaying margin spacing 
+  on both the desktop and mobile mega dialog while open.", 
+  width="800", 
+  height="484" 
+%}
+
+##### Mini dialog positioning
+
+When using a larger viewport such as on a desktop computer, I chose to position the mini dialogs over
+the element that called them. To do this I need JavaScript. [You can find the
+technique I use
+here](https://github.com/argyleink/gui-challenges/blob/main/dialog/index.js#L92-L102),
+but I feel it is beyond the scope of this article. Without the JavaScript, the
+mini dialog appears in the center of the screen, just like mega dialog.
+
+#### Make it pop
+
+Last, add some flair to the dialog so it looks like a soft surface sitting far
+above the page. The softness is achieved by rounding the corners of the dialog.
+The depth is achieved with one of Open Props’ carefully crafted [shadow
+props](https://open-props.style/#shadows):
+
+```css
+dialog {
+  …
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-6);
+}
+```
+
+#### Customizing the backdrop pseudo element
+
+I chose to work very lightly with the backdrop, only adding a blur effect with
+[`backdrop-filter`](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)
+to the mega dialog:
+
+{% BrowserCompat 'css.properties.backdrop-filter' %}
+
+```css
+dialog[modal-mode="mega"]::backdrop {
+  backdrop-filter: blur(25px);
+}
+```
+
+I also chose to put a transition on `backdrop-filter`, in the hope that browsers
+will allow transitioning the backdrop element in the future:
+
+```css
+dialog::backdrop {
+  transition: backdrop-filter .5s ease;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lufi4kzHHbEnnEVbZoFD.png", 
+  alt="Screenshot of the mega dialog overlaying a blurred background of colorful avatars.", 
+  width="800", 
+  height="509" 
+%}
+
+### Styling extras
+
+I call this section "extras" because it has more to do with my dialog element
+demo than it does the dialog element in general. 
+
+#### Scroll containment
+
+When the dialog is shown, the user is still able to scroll the page behind it,
+which I do not want:
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/lapJyCRzEGbyrRyUBbRC.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+Normally,
+[`overscroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior)
+would be my usual solution, but [according to the
+spec](https://drafts.csswg.org/css-overscroll-1/#ref-for-scroll-container%E2%91%A0%E2%91%A1:~:text=An%20element%20that%20is%20not%20scroll,methods%20supported%20by%20the%20user%20agent),
+it has no effect on the dialog because it's not a scroll port, that is, it's not
+a scroller so there's nothing to prevent. I could use JavaScript to watch for
+the new events from this guide, such as "closed" and "opened", and toggle
+`overflow: hidden` on the document, or I could wait for `:has()` to be stable in
+all browsers:
+
+{% BrowserCompat 'css.selectors.has' %}
+
+```css
+html:has(dialog[open][modal-mode="mega"]) {
+  overflow: hidden;
+}
+```
+
+Now when a mega dialog is open, the html document has `overflow: hidden`.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/EUrleQ6ToGCZw4ttUOVO.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+#### The `<form>` layout
+
+Besides being a very important element for collecting the interaction
+information from the user, I use it here to lay out the header, footer and
+article elements. With this layout I intend to articulate the article child as a
+scrollable area. I achieve this with
+[`grid-template-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-template-rows).
+The article element is given `1fr` and the form itself has the same maximum
+height as the dialog element. Setting this firm height and firm row size is what
+allows the article element to be constrained and scroll when it overflows:
+
+```css
+dialog > form {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  align-items: start;
+  max-block-size: 80vh;
+  max-block-size: 80dvb;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hj2polE46D4rQJGW4yaZ.png", 
+  alt="Screenshot of devtools overlaying the grid layout information over the rows.", 
+  width="800", 
+  height="443" 
+%}
+
+#### Styling the dialog `<header>`
+
+The role of this element is to provide a title for the dialog content and offer
+an easy to find close button. It's also given a surface color to make it appear
+to be behind the dialog article content. These requirements lead to a flexbox
+container, vertically aligned items that are spaced to their edges, and some
+padding and gaps to give the title and close buttons some room:
+
+```css
+dialog > form > header {
+  display: flex;
+  gap: var(--size-3);
+  justify-content: space-between;
+  align-items: flex-start;
+  background: var(--surface-2);
+  padding-block: var(--size-3);
+  padding-inline: var(--size-5);
+}
+
+@media (prefers-color-scheme: dark) {
+  dialog > form > header {
+    background: var(--surface-1);
+  }
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/sL4DfytpIAeOWJP5Xr1i.png", 
+  alt="Screenshot of Chrome Devtools overlaying flexbox layout information on the dialog header.", 
+  width="800", 
+  height="525" 
+%}
+
+##### Styling the header close button
+
+Since the demo is using the Open Props buttons, the close button is customized
+into a round icon centric button like so:
+
+```css
+dialog > form > header > button {
+  border-radius: var(--radius-round);
+  padding: .75ch;
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  place-items: center;
+  stroke: currentColor;
+  stroke-width: 3px;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/gl0aIe6SaZ7a9jGIvzBi.png", 
+  alt="Screenshot of Chrome Devtools overlaying sizing and padding information for the header close button.", 
+  width="800", 
+  height="469" 
+%}
+
+#### Styling the dialog `<article>`
+
+The article element has a special role in this dialog: it's a space intended to
+be scrolled in the case of a tall or long dialog.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/cpxeed80hrPUPD0LB2M9.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+To accomplish this, the parent form element has established some maximums for
+itself which provide constraints for this article element to reach if it gets
+too tall. Set `overflow-y: auto` so scrollbars are only shown when needed,
+contain scrolling within it with `overscroll-behavior: contain`, and the rest
+will be custom presentation styles:
+
+```css
+dialog > form > article {
+  overflow-y: auto; 
+  max-block-size: 100%; /* safari */
+  overscroll-behavior-y: contain;
+  display: grid;
+  justify-items: flex-start;
+  gap: var(--size-3);
+  box-shadow: var(--shadow-2);
+  z-index: var(--layer-1);
+  padding-inline: var(--size-5);
+  padding-block: var(--size-3);
+}
+
+@media (prefers-color-scheme: light) {
+  dialog > form > article {
+    background: var(--surface-1);
+  }
+}
+```
+
+#### Styling the dialog `<footer>`
+
+The footer's role is to contain menus of action buttons. Flexbox is used to
+align the content to the end of the footer inline axis, then some spacing to
+give the buttons some room.
+
+```css
+dialog > form > footer {
+  background: var(--surface-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-3);
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-inline: var(--size-5);
+  padding-block: var(--size-3);
+}
+
+@media (prefers-color-scheme: dark) {
+  dialog > form > footer {
+    background: var(--surface-1);
+  }
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGKtn9rEwllUCtvqQkRi.png", 
+  alt="Screenshot of Chrome Devtools overlaying flexbox layout information on the footer element.", 
+  width="800", 
+  height="517" 
+%}
+
+##### Styling the dialog footer menu
+
+The [`menu`](https://developer.mozilla.org/docs/Web/HTML/Element/menu)
+element is used to contain the action buttons for the dialog. It uses a wrapping
+flexbox layout with `gap` to provide space between the buttons. Menu elements
+have padding such as a `<ul>`. I also remove that style since I don't need it.
+
+```css
+dialog > form > footer > menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-3);
+  padding-inline-start: 0;
+}
+
+dialog > form > footer > menu:only-child {
+  margin-inline-start: auto;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zUzkTtb0nGCeWtaJiue3.png", 
+  alt="Screenshot of Chrome Devtools overlaying flexbox information on the footer menu elements.", 
+  width="800", 
+  height="522" 
+%}
+
+## Animation
+
+Dialog elements are often animated because they enter and exit the window.
+Giving dialogs some supportive motion for this entrance and exit helps users
+orient themselves in the flow. 
+
+Normally the dialog element can only be animated in, not out. This is because
+the browser toggles the `display` property on the element. Earlier, the guide
+set display to grid, and never sets it to none. This unlocks the ability to
+animate in and out.
+
+Open Props comes with many [keyframe
+animations](https://open-props.style/#animations) for use, which makes
+orchestration easy and legible. Here are the animation goals and layered
+approach I took:
+
+1. Reduced motion is the default transition, a simple opacity fade in and out.
+1. If motion is ok, slide and scale animations are added.
+1. The responsive mobile layout for the mega dialog is adjusted to slide out.
+
+### A safe and meaningful default transition
+
+While Open Props comes with keyframes for fading in and out, I prefer this
+layered approach of transitions as the default with keyframe animations as
+potential upgrades. Earlier we already styled the dialog’s visibility with
+opacity, orchestrating `1` or `0` depending on the `[open]` attribute. To
+transition between 0% and 100%, tell the browser how long and what kind of
+easing you'd like:
+
+```css
+dialog {
+  transition: opacity .5s var(--ease-3);
+}
+```
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/UzlJyhu1WDqbJLw0327C.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Adding motion to the transition
+
+If the user is ok with motion, both the mega and the mini dialogs should slide
+up as their entrance, and scale out as their exit. You can achieve this with the
+`prefers-reduced-motion` media query and a few Open Props:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  dialog {
+    animation: var(--animation-scale-down) forwards;
+    animation-timing-function: var(--ease-squish-3);
+  }
+
+  dialog[open] {
+    animation: var(--animation-slide-in-up) forwards;
+  }
+}
+```
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/CD4Bmk1moLD2nWonMEwm.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+{% Aside %}
+The `animation-timing-function` is set to `var(--ease-squish-3)`, 
+an expressive [easing effect](https://open-props.style/#easing) 
+available from Open Props. 
+It gives the exit animation a nice playful pop.
+{% endAside %}
+
+#### Adapting the exit animation for mobile
+
+Earlier in the styling section, the mega dialog style is adapted for mobile
+devices to be more like an action sheet, as if a small piece of paper has slid
+up from the bottom of the screen and is still attached to the bottom. The scale
+out exit animation doesn't fit this new design well, and we can adapt this with
+a couple media queries and some Open Props:
+
+```css
+@media (prefers-reduced-motion: no-preference) and @media (max-width: 768px) {
+  dialog[modal-mode="mega"] {
+    animation: var(--animation-slide-out-down) forwards;
+    animation-timing-function: var(--ease-squish-2);
+  }
+}
+```
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/dpswjyPOJdnWUWlz0fUX.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+## JavaScript
+
+There are quite a few things to add with JavaScript:
+
+```js
+// dialog.js
+export default async function (dialog) {
+  // add light dismiss
+  // add closing and closed events
+  // add opening and opened events
+  // add removed event
+  // removing loading attribute
+}
+```
+
+These additions stem from the desire for light dismiss (clicking the dialog
+backdrop), animation, and some additional events for better timing on getting
+the form data.
+
+### Adding light dismiss
+
+This task is straightforward and a great addition to a dialog element that isn't
+being animated. The interaction is achieved by watching clicks on the dialog
+element and leveraging [event
+bubbling](https://developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)
+to assess what was clicked, and will only
+[`close()`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event)
+if it's the top-most element:
+
+```js
+export default async function (dialog) {
+  dialog.addEventListener('click', lightDismiss)
+}
+
+const lightDismiss = ({target:dialog}) => {
+  if (dialog.nodeName === 'DIALOG')
+    dialog.close('dismiss')
+}
+```
+
+Notice `dialog.close('dismiss')`. The event is called and a string is provided.
+This string can be retrieved by other JavaScript to get insights into how the
+dialog was closed. You'll find I've also provided close strings each time I call
+the function from various buttons, to provide context to my application about
+the user interaction.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/oXnc7zJCjzrlSejpjIUJ.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Adding closing and closed events
+
+The dialog element comes with a close event: it emits immediately when the
+dialog `close()` function is called. Since we're animating this element, it's
+nice to have events for before and after the animation, for a change to grab the
+data or reset the dialog form. I use it here to manage the addition of the
+`inert` attribute on the closed dialog, and in the demo I use these to modify
+the avatar list if the user has submitted a new image.
+
+To achieve this, create two new events called `closing` and `closed`. Then
+listen for the built-in close event on the dialog. From here, set the dialog to
+`inert` and dispatch the `closing` event. The next task is to wait for the
+animations and transitions to finish running on the dialog, then dispatch the
+`closed` event.
+
+```js
+const dialogClosingEvent = new Event('closing')
+const dialogClosedEvent  = new Event('closed')
+
+export default async function (dialog) {
+  …
+  dialog.addEventListener('close', dialogClose)
+}
+
+const dialogClose = async ({target:dialog}) => {
+  dialog.setAttribute('inert', '')
+  dialog.dispatchEvent(dialogClosingEvent)
+
+  await animationsComplete(dialog)
+
+  dialog.dispatchEvent(dialogClosedEvent)
+}
+
+const animationsComplete = element =>
+  Promise.allSettled(
+    element.getAnimations().map(animation => 
+      animation.finished))
+```
+
+The `animationsComplete` function, which is also used in the [Building a toast
+component](/building-a-toast-component/), returns a promise based on the
+completion of the animation and transition promises. This is why `dialogClose`
+is an [async
+function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function);
+it can then
+[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await)
+the promise returned and move forward confidently to the closed event.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/eLnkx3J99MwuDsTbbOHi.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Adding opening and opened events
+
+These events aren't as easy to add since the built-in dialog element doesn't
+provide an open event like it does with close. I use a
+[MutationObserver](https://developer.mozilla.org/docs/Web/API/MutationObserver)
+to provide insights into the dialog’s attributes changing. In this observer,
+I'll watch for changes to the open attribute and manage the custom events
+accordingly.
+
+Similar to how we started the closing and closed events, create two new events
+called `opening` and `opened`. Where we previously listened for the dialog close
+event, this time use a created mutation observer to watch the dialog's
+attributes.
+
+```js
+…
+const dialogOpeningEvent = new Event('opening')
+const dialogOpenedEvent  = new Event('opened')
+
+export default async function (dialog) {
+  …
+  dialogAttrObserver.observe(dialog, { 
+    attributes: true,
+  })
+}
+
+const dialogAttrObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(async mutation => {
+    if (mutation.attributeName === 'open') {
+      const dialog = mutation.target
+
+      const isOpen = dialog.hasAttribute('open')
+      if (!isOpen) return
+
+      dialog.removeAttribute('inert')
+
+      // set focus
+      const focusTarget = dialog.querySelector('[autofocus]')
+      focusTarget
+        ? focusTarget.focus()
+        : dialog.querySelector('button').focus()
+
+      dialog.dispatchEvent(dialogOpeningEvent)
+      await animationsComplete(dialog)
+      dialog.dispatchEvent(dialogOpenedEvent)
+    }
+  })
+})
+```
+
+The mutation observer callback function will be called when the dialog
+attributes are changed, providing the list of changes as an array. Iterate over
+the attribute changes, looking for the `attributeName` to be open. Next, check
+if the element has the attribute or not: this informs whether or not the dialog
+has become open. If it has been opened, remove the `inert` attribute, set focus
+to either an element requesting
+[`autofocus`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus)
+or the first `button` element found in the dialog. Last, similar to the closing
+and closed event, dispatch the opening event right away, wait for the animations
+to finish, then dispatch the opened event.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/hardcBSWvvpnrKtr8kX2.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Adding a removed event
+
+In single page applications, dialogs are often added and removed based on routes
+or other application needs and state. It can be useful to clean up events or
+data when a dialog is removed. 
+
+You can achieve this with another mutation observer. This time, instead of
+observing attributes on a dialog element, we'll observe the children of the body
+element and watch for dialog elements being removed.
+
+```js
+…
+const dialogRemovedEvent = new Event('removed')
+
+export default async function (dialog) {
+  …
+  dialogDeleteObserver.observe(document.body, {
+    attributes: false,
+    subtree: false,
+    childList: true,
+  })
+}
+
+const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(mutation => {
+    mutation.removedNodes.forEach(removedNode => {
+      if (removedNode.nodeName === 'DIALOG') {
+        removedNode.removeEventListener('click', lightDismiss)
+        removedNode.removeEventListener('close', dialogClose)
+        removedNode.dispatchEvent(dialogRemovedEvent)
+      }
+    })
+  })
+})
+```
+
+The mutation observer callback is called whenever children are added or removed
+from the body of the document. The specific mutations being watched are for
+`removedNodes` that have the
+[`nodeName`](https://developer.mozilla.org/docs/Web/API/Node/nodeName) of
+a dialog. If a dialog was removed, the click and close events are removed to
+free up memory, and the custom removed event is dispatched.
+
+### Removing the loading attribute
+
+To prevent the dialog animation from playing its exit animation when added to
+the page or on page load, a loading attribute has been added to the dialog. The
+following script waits for the dialog animations to finish running, then removes
+the attribute. Now the dialog is free to animate in and out, and we've
+effectively hidden an otherwise distracting animation. 
+
+```js
+export default async function (dialog) {
+  …
+  await animationsComplete(dialog)
+  dialog.removeAttribute('loading')
+}
+```
+
+Learn more about the problem of [preventing keyframe animations on page load
+here](https://stackoverflow.com/questions/27938900/how-to-prevent-a-css-keyframe-animation-from-running-on-page-load).
+
+### All together 
+
+Here is `dialog.js` in its entirety, now that we've explained each section
+individually:
+
+```js
+// custom events to be added to <dialog>
+const dialogClosingEvent = new Event('closing')
+const dialogClosedEvent  = new Event('closed')
+const dialogOpeningEvent = new Event('opening')
+const dialogOpenedEvent  = new Event('opened')
+const dialogRemovedEvent = new Event('removed')
+
+// track opening
+const dialogAttrObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(async mutation => {
+    if (mutation.attributeName === 'open') {
+      const dialog = mutation.target
+
+      const isOpen = dialog.hasAttribute('open')
+      if (!isOpen) return
+
+      dialog.removeAttribute('inert')
+
+      // set focus
+      const focusTarget = dialog.querySelector('[autofocus]')
+      focusTarget
+        ? focusTarget.focus()
+        : dialog.querySelector('button').focus()
+
+      dialog.dispatchEvent(dialogOpeningEvent)
+      await animationsComplete(dialog)
+      dialog.dispatchEvent(dialogOpenedEvent)
+    }
+  })
+})
+
+// track deletion
+const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(mutation => {
+    mutation.removedNodes.forEach(removedNode => {
+      if (removedNode.nodeName === 'DIALOG') {
+        removedNode.removeEventListener('click', lightDismiss)
+        removedNode.removeEventListener('close', dialogClose)
+        removedNode.dispatchEvent(dialogRemovedEvent)
+      }
+    })
+  })
+})
+
+// wait for all dialog animations to complete their promises
+const animationsComplete = element =>
+  Promise.allSettled(
+    element.getAnimations().map(animation => 
+      animation.finished))
+
+// click outside the dialog handler
+const lightDismiss = ({target:dialog}) => {
+  if (dialog.nodeName === 'DIALOG')
+    dialog.close('dismiss')
+}
+
+const dialogClose = async ({target:dialog}) => {
+  dialog.setAttribute('inert', '')
+  dialog.dispatchEvent(dialogClosingEvent)
+
+  await animationsComplete(dialog)
+
+  dialog.dispatchEvent(dialogClosedEvent)
+}
+
+// page load dialogs setup
+export default async function (dialog) {
+  dialog.addEventListener('click', lightDismiss)
+  dialog.addEventListener('close', dialogClose)
+
+  dialogAttrObserver.observe(dialog, { 
+    attributes: true,
+  })
+
+  dialogDeleteObserver.observe(document.body, {
+    attributes: false,
+    subtree: false,
+    childList: true,
+  })
+
+  // remove loading attribute
+  // prevent page load @keyframes playing
+  await animationsComplete(dialog)
+  dialog.removeAttribute('loading')
+}
+```
+
+### Using the `dialog.js` module
+
+The exported function from the module expects to be called and passed a dialog
+element that wants to have these new events and functionality added:
+
+```js
+import GuiDialog from './dialog.js'
+
+const MegaDialog = document.querySelector('#MegaDialog')
+const MiniDialog = document.querySelector('#MiniDialog')
+
+GuiDialog(MegaDialog)
+GuiDialog(MiniDialog)
+```
+
+Just like that, the two dialogs are upgraded with light dismiss, animation
+loading fixes, and more events to work with.
+
+#### Listening to the new custom events
+
+Each upgraded dialog element can now listen for five new events, like this:
+
+```js
+MegaDialog.addEventListener('closing', dialogClosing)
+MegaDialog.addEventListener('closed', dialogClosed)
+
+MegaDialog.addEventListener('opening', dialogOpening)
+MegaDialog.addEventListener('opened', dialogOpened)
+
+MegaDialog.addEventListener('removed', dialogRemoved)
+```
+
+Here are two examples of handling those events:
+
+```js
+const dialogOpening = ({target:dialog}) => {
+  console.log('Dialog opening', dialog)
+}
+
+const dialogClosed = ({target:dialog}) => {
+  console.log('Dialog closed', dialog)
+  console.info('Dialog user action:', dialog.returnValue)
+
+  if (dialog.returnValue === 'confirm') {
+    // do stuff with the form values
+    const dialogFormData = new FormData(dialog.querySelector('form'))
+    console.info('Dialog form data', Object.fromEntries(dialogFormData.entries()))
+
+    // then reset the form
+    dialog.querySelector('form')?.reset()
+  }
+}
+```
+
+In the demo that I built with the dialog element, I use that closed event and
+the form data to add a new avatar element to the list. The timing is good in
+that the dialog has completed its exit animation, and then some scripts animate
+in the new avatar. Thanks to the new events, orchestrating the user experience
+can be smoother.
+
+Notice `dialog.returnValue`: this contains the close string passed when the
+dialog `close()` event is called. It's critical in the `dialogClosed` event to
+know if the dialog was closed, canceled, or confirmed. If it's confirmed, the
+script then grabs the form values and resets the form. The reset is useful so
+that when the dialog is shown again, it's blank and ready for a new submission.
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [@GrimLink](https://twitter.com/GrimLink) with a [3-in-1
+  dialog](https://fylgja.dev/components/dialog/).
+- [@mikemai2awesome](https://twitter.com/mikemai2awesome) with [a nice
+  remix](https://codepen.io/mikemai2awesome/pen/dyJgPxX) that doesn't change the
+  `display` property.
+- [@geoffrich_](https://twitter.com/geoffrich_) with
+  [Svelte](https://github.com/geoffrich/dialog-gui-challenge-svelte) and nice
+  [Svelte FLIP](https://svelte.dev/docs#run-time-svelte-animate-flip) polish.
+
+### Resources
+
+- [Source code](https://github.com/argyleink/gui-challenges/tree/main/dialog) on Github
+- [Doodle Avatars](https://doodleipsum.com/)
+
diff --git a/src/site/content/en/blog/building-a-fab-component/index.md b/src/site/content/en/blog/building-a-fab-component/index.md
new file mode 100644
index 00000000000..1bcb7d0d85e
--- /dev/null
+++ b/src/site/content/en/blog/building-a-fab-component/index.md
@@ -0,0 +1,445 @@
+---
+layout: post
+title: Building a floating action button (FAB) component
+subhead: A foundational overview of how to build color-adaptive, responsive, and accessible FAB components.
+authors:
+  - adamargyle
+description: A foundational overview of how to build color-adaptive, responsive, and accessible FAB components.
+date: 2022-10-06
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/0mQ6NlDjbNGqdcjiJRaM.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/sGEdjhUpRkriI86wZctn.png
+alt: A tilted grid of hotpink FABs.
+tags:
+  - blog
+  - css
+  - html
+---
+
+In this post I want to share my thoughts on how to build color-adaptive,
+responsive, and accessible FAB components. [Try the
+demo](https://gui-challenges.web.app/FAB/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges)!
+
+<style>
+  .auto-aspect {
+    aspect-ratio: auto;
+  }
+</style>
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/g3TG5gGs3qmGxBfaUIXf.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'RXopH5t2Kww' %}
+
+## Overview
+
+FABs are more common on mobile than desktop, but they're prevalent in both
+scenarios. They keep primary actions in view, making them convenient and
+omnipresent. This user experience style was made famous by Material UI and their
+suggestions for usage and placement can be [found
+here](https://material.io/components/buttons-floating-action-button).
+
+## Elements and styles
+
+The HTML for these controls involves a container element and a set of one or
+more buttons. The container positions the FABs within the viewport and manages a
+gap between the buttons. The buttons can be mini or default, giving some nice
+variety between primary and secondary actions.
+
+### FAB container
+
+This element can be a regular `<div>` but let's do our unsighted users a favor
+and tag it with some helpful attributes to explain the purpose and contents of
+this container.
+
+#### FABs markup
+
+Start with a `.fabs` class for CSS to hook into for style, then add
+`role="group"` and `aria-label` so it's  not just a generic container, it's
+named and purposeful.
+
+```html
+<div class="fabs" role="group" aria-label="Floating action buttons">
+  <!-- buttons will go here -->
+</div>
+```
+
+#### FABs style
+
+In order for FABs to be convenient they stick within the viewport at all times.
+This is a great use case for position
+[`fixed`](https://developer.mozilla.org/docs/Web/CSS/position). Within this
+viewport position I chose to use
+[`inset-block`](https://developer.mozilla.org/docs/Web/CSS/inset-block) and
+[`inset-inline`](https://developer.mozilla.org/docs/Web/CSS/inset-inline) so the
+position will compliment the user's document mode, like right-to-left or
+left-to-right. Custom properties are also used to prevent repetition and ensure
+equal distance from the bottom and side edges of the viewport:
+
+```css
+.fabs {
+  --_viewport-margin: 2.5vmin;
+
+  position: fixed;
+  z-index: var(--layer-1);
+
+  inset-block: auto var(--_viewport-margin);
+  inset-inline: auto var(--_viewport-margin);
+}
+```
+
+Next I give the container display
+[`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) and change its
+layout direction to
+[`column-reverse`](https://developer.mozilla.org/docs/Web/CSS/flex-direction).
+This stacks the children on top of each other (column) and also reverses their
+visual order. This has the effect of making the first focusable element the
+bottom element instead of the top, which would be where focus goes normally per
+the HTML document. Reversing the visual order unites the experience for sighted
+users and keyboard users, as the styling of the primary action as larger than
+the mini buttons indicates to sighted users that it's a primary action, and
+keyboard users will focus it as the first item in the source.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PkRWiv4mtfCDXujti7lL.png", alt="Two fab buttons are shown with DevTools overlaying their grid layout. Shows the gap between them with a striped pattern and also shows their computed height and width.", width="800", height="501" %}
+
+```css
+.fabs {
+  …
+
+  display: flex;
+  flex-direction: column-reverse;
+  place-items: center;
+  gap: var(--_viewport-margin);
+}
+```
+
+Centering is handled with
+[`place-items`](https://developer.mozilla.org/docs/Web/CSS/place-items), and
+[`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) adds space between any
+FAB buttons placed in the container.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/2AKk0IQVDdvMDGnBVk6J.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+### FAB buttons
+
+Time to style some buttons to look like they're floating over top of everything.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/XFklV07Wsn7q82rEBYD6.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+#### Default FAB
+
+The first button to style is the default button. This will serve as the base for
+all the FAB buttons. Later we'll create a variant that achieves an alternative
+appearance while modifying as little of these base styles as possible.
+
+#### FAB markup
+
+The `<button>` element is the right choice. We'll start with this as the base
+because it comes with great mouse, touch, and keyboard user experience. The most
+crucial aspect of this markup is to hide the icon from screenreader users with
+`aria-hidden="true"` and add the necessary label text to the `<button>` markup
+itself. When adding labels in these cases I also like adding a `title` so mouse
+users can get information about what the icon is hoping to communicate.
+
+```html
+<button data-icon="plus" class="fab" title="Add new action" aria-label="Add new action">
+  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
+</button>
+```
+
+#### FAB style
+
+First let's turn the button into a padded round button with a strong shadow, as
+these are the first defining features of the button:
+
+```css
+.fab {
+  --_size: 2rem;
+
+  padding: calc(var(--_size) / 2);
+  border-radius: var(--radius-round);
+  aspect-ratio: 1;
+  box-shadow: var(--shadow-4);
+}
+```
+
+Next let's add color. We'll use a strategy we've used in GUI Challenges before.
+Create a clearly named set of custom properties that statically hold the light
+and dark colors, then an adaptive custom property that will be set to either the
+light or the dark variables depending on the user's system preference for
+colors:
+
+```css
+.fab {
+  …
+
+  /* light button and button hover */
+  --_light-bg: var(--pink-6);
+  --_light-bg-hover: var(--pink-7);
+
+  /* dark button and button hover */
+  --_dark-bg: var(--pink-4);
+  --_dark-bg-hover: var(--pink-3);
+
+  /* adaptive variables set to light by default */
+  --_bg: var(--_light-bg);
+
+  /* static icon colors set to the adaptive foreground variable */
+  --_light-fg: white;
+  --_dark-fg: black;
+  --_fg: var(--_light-fg);
+
+  /* use the adaptive properties on some styles */
+  background: var(--_bg);
+  color: var(--_fg);
+
+  &:is(:active, :hover, :focus-visible) {
+    --_bg: var(--_light-bg-hover);
+
+    @media (prefers-color-scheme: dark) {
+      --_bg: var(--_dark-bg-hover);
+    }
+  }
+
+  /* if users prefers dark, set adaptive props to dark */
+  @media (prefers-color-scheme: dark) {
+    --_bg: var(--_dark-bg);
+    --_fg: var(--_dark-fg);
+  }
+}
+```
+
+Next add some styles to help the SVG icons fit the space.
+
+```css
+.fab {
+  …
+
+  & > svg {
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    stroke-width: 3px;
+  }
+}
+```
+
+Last, remove the tap highlight from the button since we've added our own visual
+feedback for interaction:
+
+```css
+.fab {
+  -webkit-tap-highlight-color: transparent;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qjMTHfEqKa6o2zRRcvKg.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+#### Mini FAB
+
+The goal of this section is to create a variant for the FAB button. By making
+some of the FABs smaller than the default action, we can promote the action the
+user performs the most often.
+
+##### Mini FAB markup
+
+The HTML is the same as a FAB but we add a ".mini" class to give CSS a hook into
+the variant.
+
+```html
+<button data-icon="heart" class="fab mini" title="Like action" aria-label="Like action">
+  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
+</button>
+```
+
+##### Mini FAB style
+
+Thanks to usage of custom properties, the only change needed is an adjustment to
+the `--_size` variable.
+
+```css
+.fab.mini {
+  --_size: 1.25rem;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/bYhvGgYmV0OiztY7j58r.png", alt="A screenshot of the two fab buttons stacked and the top button is smaller than the one on the bottom.", width="664", height="410" %}
+
+## Accessibility
+
+The most important part to remember for accessibility with FABs is placement
+within the keyboard flow of the page. This demo only has the FABs, there's
+nothing to compete with in terms of keyboard order and flow, which means it
+doesn't have an opportunity to demonstrate a meaningful keyboard flow. In a
+scenario where there's competing elements for focus, I suggest thinking deeply
+about where in that flow should a user find themselves entering into the FAB
+button flow.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Sgr0PllZvJ9eDTP3LSf6.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="auto-aspect"
+  %}
+  <figcaption>
+    Keyboard interaction demonstration
+  </figcaption>
+</figure>
+
+Once the user has focused into the FAB container, we've already added
+`role="group"` and `aria-label="floating action buttons"` which inform screen
+reader users about the contents of what they have focused. Strategically I've
+placed the default FAB first, so that users find the primary action first. I
+then use `flex-direction: column-reverse;` to visually order the primary button
+on the bottom, close to the users fingers for easy access. This is a nice win
+because the default button is visually prominent and also first for keyboard
+users, giving them very similar experiences.
+
+Lastly, don't forget to hide your icons from screen reader users and ensure you
+provide them with a label for the button so it's not a mystery. This has been
+done in the HTML already with `aria-hidden="true"` on the `<svg>` and
+`aria-label="Some action"` on the `<button>`s.
+
+## Animation
+
+Various types of animation can be added to enhance the user experience. Like in
+other GUI Challenges, we'll set up a couple of custom properties to hold the
+intent of a reduced motion experience and a full motion experience. By default
+the styles will assume the user wants reduced motion, then using the
+`prefers-reduced-motion` media query swap the transition value to full motion.
+
+### A reduced motion strategy with custom properties
+
+Three custom properties are created in the following CSS: `--_motion-reduced`,
+`--_motion-ok`, and `--_transition`. The first two hold appropriate transitions
+given the user's preference, and the last variable `--_transition` will be set
+to either `--_motion-reduced` or `--_motion-ok` respectively.
+
+```css
+.fab {
+  /* box-shadow and background-color can safely be transitioned for reduced motion users */
+  --_motion-reduced:
+    box-shadow .2s var(--ease-3),
+    background-color .3s var(--ease-3);
+
+  /* add transform and outline-offset for users ok with motion */
+  --_motion-ok:
+    var(--_motion-reduced),
+    transform .2s var(--ease-3),
+    outline-offset 145ms var(--ease-2);
+
+  /* default the transition styles to reduced motion */
+  --_transition: var(--_motion-reduced);
+
+  /* set the transition to our adaptive transition custom property*/
+  transition: var(--_transition);
+
+  /* if motion is ok, update the adaptive prop to the respective transition prop */
+  @media (prefers-reduced-motion: no-preference) {
+    --_transition: var(--_motion-ok);
+  }
+}
+```
+
+With the above in place, changes to `box-shadow`, `background-color`,
+`transform` and `outline-offset` can be transitioned, giving the user nice UI
+feedback that their interaction has been received.
+
+Next, add a little bit more flair to the `:active` state by adjusting
+`translateY`a little bit, this gives the button a nice pressed effect:
+
+```css
+.fab {
+  …
+
+  &:active {
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(2%);
+    }
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/lc16x8xZb8SAjvn3j4nK.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+Then lastly, transition any changes to the SVG icons in the buttons:
+
+```css
+.fab {
+  …
+
+  &[data-icon="plus"]:hover > svg {
+    transform: rotateZ(.25turn);
+  }
+
+  & > svg {
+    @media (prefers-reduced-motion: no-preference) {
+      will-change: transform;
+      transition: transform .5s var(--ease-squish-3);
+    }
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fAZut0C45mYdXvcX1kz4.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+{% Aside %}
+The easing function `--ease-squish-3` is part of Open Props and is
+responsible for the elastic bouncy effect on the rotation. Find more props like
+it at the [Open Props document website](https://open-props.style/).
+{% endAside %}
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+*Nothing to see here yet.*
+
+### Resources
+
+- [Source code](https://github.com/argyleink/gui-challenges/tree/main/FAB) on Github
diff --git a/src/site/content/en/blog/building-a-loading-bar-component/index.md b/src/site/content/en/blog/building-a-loading-bar-component/index.md
new file mode 100644
index 00000000000..5f44f0dcc36
--- /dev/null
+++ b/src/site/content/en/blog/building-a-loading-bar-component/index.md
@@ -0,0 +1,771 @@
+---
+layout: post
+title: Building a loading bar component
+subhead: A foundational overview of how to build a color adaptive and accessible loading bar with the <progress> element.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a color adaptive and accessible loading bar with the <progress> element.
+date: 2022-03-16
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/LIq0Z4XYtFp7WLnZmmNO.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/LIq0Z4XYtFp7WLnZmmNO.png
+alt: Loading bars repeated and placed to create a pattern
+tags:
+  - blog
+  - css
+  - html
+  - javascript
+---
+
+In this post I want to share thinking on how to build a color adaptive and
+accessible loading bar with the `<progress>` element. [Try the
+demo](https://gui-challenges.web.app/progress/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges)!
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IT7KpbHsrr1SydvFBzTm.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Light and dark, indeterminate, increasing, and completion demoed on Chrome.
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'TD1QxlGgIPk' %}
+
+## Overview
+
+The
+[`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Element/progress)
+element provides visual and audible feedback to users about completion. This
+visual feedback is valuable for scenarios such as: progress through a form,
+displaying downloading or uploading information, or even showing that the
+progress amount is unknown but work is still active. 
+
+This [GUI Challenge](https://github.com/argyleink/gui-challenges) worked with
+the existing HTML `<progress>` element to save some effort in accessibility. The
+colors and layouts push the limits of customization for the built-in element, to
+modernize the component and have it fit better within design systems. 
+
+<figure>
+  {% 
+    Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/AXYPSsW7HQ21qfWgdlsy.png", 
+    alt="Light and dark tabs in each browser providing an 
+    overview of the adaptive icon from top to bottom: 
+    Safari, Firefox, Chrome.", 
+    width="800", 
+    height="449" 
+  %}
+  <figcaption>
+    Demo shown across Firefox, Safari, iOS Safari, 
+    Chrome, and Android Chrome in light and dark schemes.
+  </figcaption>
+</figure>
+
+## Markup
+
+I chose to wrap the `<progress>` element in a
+[`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label) so
+I could skip the [explicit relationship attributes in favor of an implicit
+relationship](https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input).
+I've also labeled a parent element affected by the loading state, so screen
+reader technologies can relay that information back to a user.
+
+```html
+<progress></progress>
+```
+
+If there is no `value`, then the element's progress is
+[indeterminate](https://developer.mozilla.org/docs/Web/CSS/:indeterminate).
+The `max` attribute defaults to 1, so progress is between 0 and 1. Setting `max`
+to 100, for example, would set the range to 0-100. I chose to stay within the 0
+and 1 limits, translating progress values to 0.5 or 50%.
+
+### Label-wrapped progress
+
+In an implicit relationship, a progress element is wrapped by a label like this:
+
+```html
+<label>Loading progress<progress></progress></label>
+```
+
+In my demo I chose to include the label for [screen readers
+only](https://webaim.org/techniques/css/invisiblecontent/).
+This is done by wrapping the label text in a `<span>` and applying some styles
+to it so that it's effectively off screen:
+
+```html
+<label>
+  <span class="sr-only">Loading progress</span>
+  <progress></progress>
+</label>
+```
+
+With the following accompanying CSS from [WebAIM](https://webaim.org/):
+
+```css
+.sr-only {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ejXKeSrFgAOBxXiuDcU1.png", 
+  alt="Screenshot of the devtools revealing the screen ready only element.", 
+  width="800", 
+  height="442" 
+%}
+
+### Area affected by loading progress
+
+If you have healthy vision, it can be easy to associate a progress indicator
+with related elements and page areas, but for visually impaired users, it's not
+so clear. Improve this by assigning the
+[`aria-busy`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-busy)
+attribute to the top-most element that will change when loading is complete.
+Furthermore, indicate a relationship between the progress and the loading zone
+with
+[`aria-describedby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
+
+```html
+<main id="loading-zone" aria-busy="true">
+  …
+  <progress aria-describedby="loading-zone"></progress>
+</main>
+```
+
+From JavaScript, toggle `aria-busy` to `true` at the start of the task, and to
+`false` once finished.
+
+### Aria attribute additions
+
+While the implicit role of a `<progress>` element is
+[`progressbar`](https://w3c.github.io/aria/#progressbar), I've made it explicit
+for browsers that lack that implicit role. I've also added the attribute
+`indeterminate` to explicitly put the element into a state of unknown, which is
+clearer than observing the element has no `value` set. 
+
+```html
+<label>
+  Loading 
+  <progress 
+    indeterminate 
+    role="progressbar" 
+    aria-describedby="loading-zone"
+    tabindex="-1"
+  >unknown</progress>
+</label>
+```
+
+Use
+[`tabindex="-1"`](https://css-tricks.com/focus-management-and-inert/#aa-do-use-tabindex-1-for-focusing-with-javascript)
+to make the progress element focusable from JavaScript. This is important for
+screen reader technology, since giving the progress focus as progress changes,
+will announce to the user how far the updated progress has reached.
+
+## Styles
+
+The progress element is a bit tricky when it comes to styling. Built-in HTML
+elements have special hidden parts that can be difficult to select and often
+only offer a limited set of properties to be set.
+
+### Layout
+
+The layout styles are intended to allow some flexibility in the progress
+element's size and label position. A special completion state is added that can
+be a useful, but not required, additional visual cue.
+
+#### `<progress>` Layout
+
+The width of the progress element is left untouched so it can shrink and grow
+with the space needed in the design. The built-in styles are stripped out by
+setting `appearance` and `border` to `none`. This is done so the element can be
+normalized across browsers, since each browser has its own styles for their
+element. 
+
+```css
+progress {
+  --_track-size: min(10px, 1ex);
+  --_radius: 1e3px;
+
+  /*  reset  */
+  appearance: none;
+  border: none;
+
+  position: relative;
+  height: var(--_track-size);
+  border-radius: var(--_radius);
+  overflow: hidden;
+}
+```
+
+The value of `1e3px` for `_radius` uses [scientific number
+notation](https://developer.mozilla.org/docs/Web/CSS/number) to express a
+large number so the `border-radius` is always rounded. It's equivalent to
+`1000px`. I like to use this because my aim is to use a value large enough that
+I can set it and forget it (and it's shorter to write than `1000px`). It is also
+easy to make it even larger if needed: just change the 3 to a 4, then `1e4px` is
+equivalent to `10000px`.
+
+`overflow: hidden` is used and has been a contentious style. It made a few
+things easy, such as not needing to pass `border-radius` values down to the
+track, and track fill elements; but it also meant no children of the progress
+could live outside of the element. Another iteration on this custom progress
+element could be done without `overflow: hidden` and it may open up some
+opportunities for animations or better completion states.
+
+#### Progress complete
+
+CSS selectors do the tough work here by comparing the maximum with the value, and if they match, then the progress is complete. When complete, a pseudo-element is generated and appended to the end of the progress element, providing a nice additional visual cue to the completion.
+
+```css
+progress:not([max])[value="1"]::before,
+progress[max="100"][value="100"]::before {
+  content: "✓";
+  
+  position: absolute;
+  inset-block: 0;
+  inset-inline: auto 0;
+  display: flex;
+  align-items: center;
+  padding-inline-end: max(calc(var(--_track-size) / 4), 3px);
+
+  color: white;
+  font-size: calc(var(--_track-size) / 1.25);
+}
+```
+
+{% Aside %} 
+These selectors only work if `max` is unset or is `100`. Selectors
+will need to be updated if your progress element has a different maximum. 
+{% endAside %}
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/TqbVcyeiGuwZKy7o9cnM.png", 
+  alt="Screenshot of the loading bar at 100% and showing a checkmark at the end.", 
+  width="800", 
+  height="438" 
+%}
+
+### Color
+
+The browser brings its own colors for the progress element, and is adaptive to
+light and dark with just one CSS property. This can be built upon with some
+special browser-specific selectors.
+
+#### Light and dark browser styles
+
+To opt your site into a dark and light adaptive `<progress>` element,
+[`color-scheme`](/color-scheme/) is all that is required.
+
+```css
+progress {
+  color-scheme: light dark;
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/rHdPhxGCLSndsMHrl9fv.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'KKZwoVy',
+ height: 250,
+ tab: 'result'
+} %}
+
+#### Single property progress filled color
+
+To tint a `<progress>` element, use [`accent-color`](/accent-color/).
+
+```css
+progress {
+  accent-color: rebeccapurple;
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q0OUWQXzkPe9El4pY8ft.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Notice the track background color changes from light to dark depending on the
+`accent-color`. The browser is ensuring proper contrast: pretty neat.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'mdpyxRP',
+ height: 250,
+ tab: 'result'
+} %}
+
+#### Fully custom light and dark colors
+
+Set two custom properties on the `<progress>` element, one for the track color
+and the other for the track progress color. Inside the
+[`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme)
+media query, provide new color values for the track and track progress.
+
+```css
+progress {
+  --_track: hsl(228 100% 90%);
+  --_progress: hsl(228 100% 50%);
+}
+
+@media (prefers-color-scheme: dark) {
+  progress {
+    --_track: hsl(228 20% 30%);
+    --_progress: hsl(228 100% 75%);
+  }
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/f5aa28tsX7nsvJakBBO4.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+{% Aside %}
+It's a good idea to be concerned about the 
+contrast between your track and progress colors.
+{% endAside %}
+
+#### Focus styles
+
+Earlier we gave the element a negative tab index so it could be programmatically
+focused. Use
+[`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible) to
+customize focus to opt into the smarter focus ring style. With this, a mouse
+click and focus won't show the focus ring, but keyboard clicks will. The
+[YouTube video](https://youtu.be/TD1QxlGgIPk) goes into this in more depth and
+is worth reviewing.
+
+```css
+progress:focus-visible {
+  outline-color: var(--_progress);
+  outline-offset: 5px;
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CTj58sbVohyhPRPltW6D.png", 
+  alt="Screenshot of the loading bar with a focus ring around it. Colors all match.", 
+  width="800", 
+  height="259" 
+%}
+
+#### Custom styles across browsers
+
+Customize the styles by selecting the parts of a `<progress>` element that each
+browser exposes. Using the progress element is a single tag, but it's made of a
+few child elements that are exposed via CSS pseudo selectors. Chrome DevTools
+will show these elements to you if you enable the setting:
+
+1. Right-click on your page and select **Inspect Element** to bring up DevTools.
+1. Click the Settings gear in the top-right corner of the DevTools window.
+1. Under the **Elements** heading, find and enable the **Show user agent shadow
+   DOM** checkbox.
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GBrWTQonKg4Z6e3yCZmJ.png", 
+  alt="Screenshot of where in DevTools to enable exposing the user agent shadow DOM.", 
+  width="800", 
+  height="584" 
+%}
+
+{% Aside 'gotcha' %} 
+`-moz-` and `-webkit-` pseudo selectors cannot be grouped,
+as one or the other will fail and invalidate the selector group. Furthermore,
+while `:is()` and `:where()` feature forgiving selector lists, they do not
+accept these pseudo selectors and will also fail. 
+{% endAside %}
+
+##### Safari and Chromium styles
+
+WebKit-based browsers such as Safari and Chromium expose
+`::-webkit-progress-bar` and `::-webkit-progress-value`, which allow a subset of
+CSS to be used. For now, set `background-color` using the custom properties
+created earlier, which adapt to light and dark.
+
+```css
+/*  Safari/Chromium  */
+progress[value]::-webkit-progress-bar {
+  background-color: var(--_track);
+}
+
+progress[value]::-webkit-progress-value {
+  background-color: var(--_progress);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/W2GJzB7tcznfvbAwHSwf.png", 
+  alt="Screenshot showing the inner elements of the progress element.", 
+  width="800", 
+  height="257" 
+%}
+
+##### Firefox styles
+
+Firefox only exposes the `::-moz-progress-bar` pseudo selector on the
+`<progress>` element. This also means we can't tint the track directly. 
+
+```css
+/*  Firefox  */
+progress[value]::-moz-progress-bar {
+  background-color: var(--_progress);
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/z584hF7H0TwmmU4rcjmC.png", 
+  alt="Screenshot of Firefox and where to find the progress element parts.", 
+  width="800", 
+  height="598" 
+%}
+
+{% Aside %}
+For Firefox, `color-scheme` does tint the `<progress>` track. 
+Custom colors cannot be provided to `color-scheme`, but I found 
+it to be workable in delivering an adaptive loading bar.
+{% endAside %}
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/AXYPSsW7HQ21qfWgdlsy.png", 
+  alt="Screenshot of the Debugging Corner where Safari, iOS Safari, 
+  Firefox, Chrome and Chrome on Android all have the loading bar shown working.", 
+  width="800", 
+  height="450" 
+%}
+
+Notice that Firefox has a track color set from `accent-color` while iOS Safari
+has a light blue track. It's the same in dark mode: Firefox has a dark track but
+not the custom color we've set, and it works in Webkit-based browsers.
+
+## Animation
+
+While working with browser built-in pseudo selectors, it's often with a limited
+set of permitted CSS properties.
+
+### Animating the track filling up
+
+Adding a transition to the
+[`inline-size`](https://developer.mozilla.org/docs/Web/CSS/inline-size) of
+the progress element works for Chromium but not for Safari. Firefox also does
+not use a transition property on it's `::-moz-progress-bar`.
+
+```css/3
+/*  Chromium Only 😢  */
+progress[value]::-webkit-progress-value {
+  background-color: var(--_progress);
+  transition: inline-size .25s ease-out;
+}
+```
+
+### Animating the `:indeterminate` state
+
+Here I get a bit more creative so I can provide an animation. A pseudo-element
+for Chromium is created and a gradient is applied that is animated back and
+forth for all three browsers.
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/VPkH1KWsvUyNrdmc13k1.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### The custom properties
+
+Custom properties are great for many things, but one of my favorites is simply
+giving a name to an otherwise magical looking CSS value. Following is a fairly
+complex
+[`linear-gradient`](https://developer.mozilla.org/docs/Web/CSS/gradient/linear-gradient()),
+but with a nice name. Its purpose and use cases can be clearly understood.
+
+```css
+progress {
+  --_indeterminate-track: linear-gradient(to right,
+    var(--_track) 45%,
+    var(--_progress) 0%,
+    var(--_progress) 55%,
+    var(--_track) 0%
+  );
+  --_indeterminate-track-size: 225% 100%;
+  --_indeterminate-track-animation: progress-loading 2s infinite ease;
+}
+```
+
+Custom properties will also help the code stay DRY since once again, we can't
+group these browser-specific selectors together. 
+
+#### The keyframes
+
+The goal is an infinite animation that goes back and forth. The start and end
+keyframes will be set in CSS. Only one keyframe is needed, the middle keyframe
+at `50%`, to create an animation that returns to where it started from, over and
+over again!
+
+```css
+@keyframes progress-loading {
+  50% {
+    background-position: left; 
+  }
+}
+```
+
+#### Targeting each browser
+
+Not every browser allows the creation of pseudo-elements on the `<progress>`
+element itself or allows animating the progress bar. More browsers support
+animating the track than a pseudo-element, so I upgrade from pseudo-elements as
+a base and into animating bars.
+
+##### Chromium pseudo-element
+
+Chromium does allow the pseudo-element: `::after` used with a position to cover
+the element. The indeterminate custom properties are used, and the back and
+forth animation works very well.
+
+```css
+progress:indeterminate::after {
+  content: "";
+  inset: 0;
+  position: absolute;
+  background: var(--_indeterminate-track);
+  background-size: var(--_indeterminate-track-size);
+  background-position: right; 
+  animation: var(--_indeterminate-track-animation);
+}
+```
+
+##### Safari progress bar
+
+For Safari, the custom properties and an animation are applied to the
+pseudo-element progress bar:
+
+```css
+progress:indeterminate::-webkit-progress-bar {
+  background: var(--_indeterminate-track);
+  background-size: var(--_indeterminate-track-size);
+  background-position: right; 
+  animation: var(--_indeterminate-track-animation);
+}
+```
+
+##### Firefox progress bar
+
+For Firefox, the custom properties and an animation are also applied to the
+pseudo-element progress bar:
+
+```css
+progress:indeterminate::-moz-progress-bar {
+  background: var(--_indeterminate-track);
+  background-size: var(--_indeterminate-track-size);
+  background-position: right; 
+  animation: var(--_indeterminate-track-animation);
+}
+```
+
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/FC444bSPndbT4FLC1Fg5.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+## JavaScript
+
+JavaScript plays an important role with the `<progress>` element. It controls
+the value sent to the element and ensures enough information is present in the
+document for screen readers.
+
+```js
+const state = {
+  val: null
+}
+```
+
+The demo offers buttons for controlling the progress; they update `state.val`
+and then call a function for updating the
+[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
+
+```js
+document.querySelector('#complete').addEventListener('click', e => {
+  state.val = 1
+  setProgress()
+})
+```
+
+### `setProgress()`
+
+This function is where the UI/UX orchestration occurs. Get started by creating a
+`setProgress()` function. No parameters are needed because it has access to the
+`state` object, progress element, and `<main>` zone.
+
+```js
+const setProgress = () => {
+  
+}
+```
+
+#### Setting the loading status on the `<main>` zone
+
+Depending on whether the progress is complete or not, the related `<main>`
+element needs an update to the
+[`aria-busy`](https://docs.google.com/document/d/1VM-4oMK-YklPR13eSkUdFJnB-PKQV5wmc-KmwBMJIMQ/edit#heading=h.gmjywafg0wji)
+attribute:
+
+```js/1
+const setProgress = () => {
+  zone.setAttribute('aria-busy', state.val < 1)
+}
+```
+
+#### Clear attributes if loading amount is unknown
+
+If the value is unknown or unset, `null` in this usage, remove the `value` and
+`aria-valuenow` attributes. This will turn the `<progress>` to indeterminate.
+
+```js/3-7
+const setProgress = () => {
+  zone.setAttribute('aria-busy', state.val < 1)
+
+  if (state.val === null) {
+    progress.removeAttribute('aria-valuenow')
+    progress.removeAttribute('value')
+    progress.focus()
+    return
+  }
+}
+```
+
+#### Fix JavaScript decimal math issues
+
+Since I chose to stick with the progress default maximum of 1, the demo
+increment and decrement functions use decimal math. JavaScript, and other
+languages, [are not always great at
+that](https://stackoverflow.com/questions/3439040/why-does-adding-two-decimals-in-javascript-produce-a-wrong-result).
+Here's a `roundDecimals()` function that will trim the excess off the math
+result:
+
+```js
+const roundDecimals = (val, places) =>
+  +(Math.round(val + "e+" + places)  + "e-" + places)
+```
+
+Round the value so it can be presented and is legible:
+
+```js/10-11
+const setProgress = () => {
+  zone.setAttribute('aria-busy', state.val < 1)
+
+  if (state.val === null) {
+    progress.removeAttribute('aria-valuenow')
+    progress.removeAttribute('value')
+    progress.focus()
+    return
+  }
+
+  const val = roundDecimals(state.val, 2)
+  const valPercent = val * 100 + "%"
+}
+```
+
+#### Set value for screen readers and browser state
+
+The value is used in three locations in the DOM:
+
+1. The `<progress>` element's `value` attribute.
+1. The `aria-valuenow` attribute.
+1. The `<progress>` inner text content.
+
+```js/13-15
+const setProgress = () => {
+  zone.setAttribute('aria-busy', state.val < 1)
+
+  if (state.val === null) {
+    progress.removeAttribute('aria-valuenow')
+    progress.removeAttribute('value')
+    progress.focus()
+    return
+  }
+
+  const val = roundDecimals(state.val, 2)
+  const valPercent = val * 100 + "%"
+
+  progress.value = val
+  progress.setAttribute('aria-valuenow', valPercent)
+  progress.innerText = valPercent
+}
+```
+
+#### Giving the progress focus
+
+With the values updated, sighted users will see the progress change, but screen
+reader users are not yet given the announcement of change. Focus the
+`<progress>` element and the browser will announce the update!
+
+```js/17
+const setProgress = () => {
+  zone.setAttribute('aria-busy', state.val < 1)
+
+  if (state.val === null) {
+    progress.removeAttribute('aria-valuenow')
+    progress.removeAttribute('value')
+    progress.focus()
+    return
+  }
+
+  const val = roundDecimals(state.val, 2)
+  const valPercent = val * 100 + "%"
+
+  progress.value = val
+  progress.setAttribute('aria-valuenow', valPercent)
+  progress.innerText = valPercent
+
+  progress.focus()
+}
+```
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/yy0Shiw8lPQWKs6L6kRr.png", 
+  alt="Screenshot of the Mac OS Voice Over app 
+  reading the progress of the loading bar to the user.", 
+  width="800", 
+  height="408" 
+%}
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+There are certainly a few changes I'd like to make if given another chance. I think there's room to clean up the current component, and room to try and build one without the `<progress>` element's pseudo-class style limitations. It's worth exploring!
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [Varun KS](https://twitter.com/VarunKS20161856) - [source](https://github.com/KSVarun/progress-loader-GUI-challenge) and [demo](https://ksvarun.github.io/progress-loader-GUI-challenge/)
diff --git a/src/site/content/en/blog/building-a-media-scroller-component/index.md b/src/site/content/en/blog/building-a-media-scroller-component/index.md
new file mode 100644
index 00000000000..7352851feee
--- /dev/null
+++ b/src/site/content/en/blog/building-a-media-scroller-component/index.md
@@ -0,0 +1,543 @@
+---
+layout: post
+title: Building a media scroller component
+subhead: A foundational overview of how to build a responsive horizontal scrollview for TVs, phones, desktops, etc.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive horizontal scrollview for TVs, phones, desktops, etc.
+date: 2021-05-12
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/I83Y9EaBPBXbE6TywvLg.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/HVZfHf7aq5ZqzmZ9xhhv.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  # - interaction
+---
+
+In this post I want to share thinking on ways to create horizontal scrolling
+experiences for the web that are minimal, responsive, accessible and work across
+browsers and platforms (like TVs!). Try the
+[demo](https://gui-challenges.web.app/media-scroller/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/kFXDbQeTKLcAX0ivOwdt.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/media-scroller/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'jmLdZY_Lo1k' %}
+
+## Overview
+
+We'll be building a horizontal scroll layout meant for hosting thumbnails of
+media or products. The component begins as a humble `<ul>` list but is
+transformed with CSS into a satisfying and smooth scroll experience, showcasing
+images and snapping them to a grid. JavaScript is added to facilitate
+roving-index interactions, helping keyboard users skip traversing 100+ items.
+Plus an experimental media query, `prefers-reduced-data`, is used to turn the
+media scroller into a lightweight title scroller experience.
+
+## Start with accessible markup
+
+A media scroller is made of just a couple of core components, a list with items. A
+list, in its simplest form, can travel all over the world and be clearly
+consumed by all. A user landing at this page can browse a list and click a link
+to view an item. This is our accessible base.
+
+Deliver a list with a `<ul>` element:
+
+```html
+<ul class="horizontal-media-scroller">
+  <li></li>
+  <li></li>
+  <li></li>
+  ...
+<ul>
+```
+
+Make the list items interactive with an `<a>` element:
+
+```html
+<li>
+  <a href="#">
+    ...
+  </a>
+</li>
+```
+
+Use a `<figure>` element to semantically represent an image and its caption:
+
+```html
+<figure>
+  <picture>
+    <img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
+  </picture>
+  <figcaption>Legends</figcaption>
+</figure>
+```
+
+Notice the `alt` and `loading` attributes on the `<img>`. Alt text for a media
+scroller is a **UX opportunity** to help bring the thumbnail extra context, or as
+fallback text if the image didn't load, or it provides a spoken UI for users
+relying on assistive technology like a screen reader. Learn more with [Five golden
+rules for compliant alt
+text](https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text).
+
+The `loading` attribute accepts the keyword `lazy` as a way to signal this image
+source should be fetched only when the image is within the viewport. This can be
+really nice for large lists, as users will only download images for items they
+scrolled into view.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/3YF8UackZ1Lan5ykXBvG.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Support the user's color scheme preference
+
+Use `color-scheme` as a `<meta>` tag to signal to the browser that your page
+wants both the light and dark provided user-agent styles. It's a free dark mode
+or light mode, depending on how you look at it:
+
+```html
+<meta name="color-scheme" content="dark light">
+```
+
+The meta tag provides the earliest signal possible, so the browser
+can select a dark default canvas color if the user has a dark theme preference.
+This means that navigations between pages of the site won't flash a white canvas
+background between loads. Seamless dark theme between loads, much nicer on the
+eyes.
+
+Learn much more from [Thomas Steiner](/authors/thomassteiner/) at
+[https://web.dev/color-scheme/](/color-scheme/).
+
+### Add content
+
+Given the above content structure of `ul > li > a > figure > picture > img`,
+the next task is to add images and titles to scroll through. I've packed the demo with
+static placeholder images and text, but feel free to power this from your
+favorite data source.
+
+## Add style with CSS
+
+Now it's time for CSS to take this generic list of content and turn it into an
+experience. Netflix, App stores and many more sites and apps use horizontal
+scrolling areas to pack the viewport with categories and options.
+
+### Creating the scroller layout
+
+It's important to avoid cutting off content in layouts or leaning on text
+truncation with ellipsis. Many television sets have media scrollers just like
+this one, but all too often resort to ellipsing content. This layout does not!
+It also lets the media content override the column size, making 1 layout
+flexible enough to handle many interesting combinations.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/VFIcWLB6bnyYAszFzoE8.png", alt="2
+scrolling rows shown. One has no ellipsis, which means it's taller and each
+title is fully legible. The other is shorter and many titles are cutoff with
+ellipsis.", width="800", height="501" %}
+
+The container allows overriding the column size by providing the default size as
+a custom property. This grid layout is opinionated about column size, it's
+managing spacing and direction only:
+
+```css/1-2
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
+  margin: 0;
+}
+```
+
+The custom property is then used by the `<picture>` element to create our base aspect ratio: a box:
+
+```css/8-10
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2);
+  margin: 0;
+
+  & picture {
+    inline-size: var(--size);
+    block-size: var(--size);
+  }
+}
+```
+
+With only a few more minor styles, complete the barebones of the media scroller:
+
+```css/8-9,11-12
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2);
+  margin: 0;
+
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+
+  & > li {
+    display: inline-block; /* removes the list-item bullet */
+  }
+
+  & picture {
+    inline-size: var(--size);
+    block-size: var(--size);
+  }
+}
+```
+
+Setting `overflow` sets the `<ul>` up to allow scrolling and keyboard navigation
+through its list, then each direct child `<li>` element has its `::marker` removed
+by getting a new display type of `inline-block`.
+
+The images aren't responsive yet though, and burst right out of the boxes
+they're inside. Tame them with some sizes, fit, and border styles, and
+a background gradient for when they're lazy loading:
+
+```css
+img {
+  /* smash into whatever box it's in */
+  inline-size: 100%;
+  block-size: 100%;
+
+  /* don't squish but do cover the space */
+  object-fit: cover;
+
+  /* soften the edges */
+  border-radius: 1ex;
+  overflow: hidden;
+
+  /* if empty, show a gradient placeholder */
+  background-image:
+    linear-gradient(
+      to bottom,
+      hsl(0 0% 40%),
+      hsl(0 0% 20%)
+    );
+}
+```
+
+### Scroll padding
+
+Alignment to page content, plus an edge-to-edge scrolling surface area, are
+critical to a harmonious and minimal component.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/hClUoh402H88dexfTpqS.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+To accomplish the edge-to-edge scroll layout which aligns with our typography
+and layout lines, use `padding` that matches the `scroll-padding`:
+
+```css/11-13
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2);
+  margin: 0;
+
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+
+  padding-inline: var(--gap);
+  scroll-padding-inline: var(--gap);
+  padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
+}
+```
+
+{% Aside %}
+I've simplified the example CSS here to only the logical properties.
+The hosted demo linked in this post has fallbacks for browsers
+without support for these logical shorthands.
+{%endAside%}
+
+**Horizontal scroll padding bug fix**
+The above shows how easy it should be to
+pad a scroll container, but there's outstanding compatibility issues with it
+(fixed in Chromium 91+ though!). See
+[here](https://bugs.chromium.org/p/chromium/issues/detail?id=1069614) for a bit
+of the history, but the short version is that padding wasn't always accounted
+for in a scroll view.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jpOZQeMvnHwqiH0jatl7.png", alt="A
+box is highlighted on the inline-end side of the last list item, showing the
+padding and element have the same width as to create the desired alignment.",
+width="800", height="272" %}
+
+To trick browsers into putting the padding at the end of the scroller I'll
+target the last figure in each list and append a pseudo element that's the
+amount of padding desired.
+
+```css
+.horizontal-media-scroller > li:last-of-type figure {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+
+    inline-size: var(--gap);
+    block-size: 100%;
+
+    inset-block-start: 0;
+    inset-inline-end: calc(var(--gap) * -1);
+  }
+}
+```
+
+Using logical properties enables the media scroller to work in any writing mode
+and document direction.
+
+### Scroll snapping
+
+A scrolling container with overflow can become a snapping viewport with one line of CSS, then it's on children to specify how they'd like to align with that viewport.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/hClUoh402H88dexfTpqS.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css/17-18
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2);
+  margin: 0;
+
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+
+  padding-inline: var(--gap);
+  scroll-padding-inline: var(--gap);
+  padding-block-end: calc(var(--gap) / 2);
+
+  scroll-snap-type: inline mandatory;
+
+  & figure {
+    scroll-snap-align: start;
+  }
+}
+```
+
+### Focus
+
+The inspiration for this component comes from its massive popularity on TVs,
+in App Stores, and more. Many video game platforms use a media scroller very
+similar to this one, as their primary home screen layout. Focus is a huge UX
+moment here, not just a small addition. Imagine using this media scroller from
+your couch with a remote, give that interaction some small enhancements:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/5i0or9qst3oRA5Dqe3rA.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+.horizontal-media-scroller a {
+  outline-offset: 12px;
+
+  &:focus {
+    outline-offset: 7px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    & {
+      transition: outline-offset .25s ease;
+    }
+  }
+}
+```
+
+This sets the focus outline style `7px` away from the box, giving it some nice
+space. If the user has no motion preferences around reducing motion, the offset
+is transitioned, giving subtle motion to the focus event.
+
+{% Aside %}
+This focus state is an opportunity for unique
+and brand defining micro-interaction UX
+{%endAside%}
+
+### Roving index
+
+Gamepad and keyboard users need special attention in these longs lists of
+scrolling content and options. The common pattern for solving this is called
+[roving index](/control-focus-with-tabindex/). It's when a
+container of items is keyboard focused but only 1 child is allowed to hold focus
+at a time. This single focusable item at a time experience is designed to allow
+bypassing the potentially long list of items, as opposed to pressing tab 50+
+times to reach the end.
+
+There's 300 items in that first scroller of the demo. We can do better than make
+them traverse all of them to reach the next section.
+
+To create this experience, JavaScript needs to observe keyboard events and focus
+events. I created [a small open source library on
+npm](https://github.com/argyleink/roving-ux) to help make this user
+experience easy to achieve. Here's how to use it for the 3 scrollers:
+
+```js
+import {rovingIndex} from 'roving-ux';
+
+rovingIndex({
+  element: someElement
+});
+```
+
+This demo queries the document for the scrollers and for each of them calls the
+`rovingIndex()` function. Pass the `rovingIndex()` the element to get the roving
+experience, like a list container, and a target query selector, in case the
+focus targets aren't direct descendants.
+
+```js/2-4
+document.querySelectorAll('.horizontal-media-scroller')
+  .forEach(scroller =>
+    rovingIndex({
+      element: scroller,
+      target: 'a',
+}))
+```
+
+To learn more about this effect, see the open source library
+[roving-ux](https://github.com/argyleink/roving-ux).
+
+### Aspect-ratio
+
+As of writing this post, the [support for
+`aspect-ratio`](https://caniuse.com/mdn-css_properties_aspect-ratio) is behind a
+flag in Firefox but available in Chromium browsers or set top boxes. Since the
+media scroller grid layout only specifies direction and spacing, the sizing can
+change inside a media query which feature checks for aspect-ratio support.
+Progressive enhancement into some more dynamic media scrollers.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ffm4hCXrnxKiLcBNNigP.png", alt="A
+box with 4:4 aspect ratio is shown next to the other design ratios used of 16:9
+and 4:3", width="800", height="324" %}
+
+```css/3,6,12
+@supports (aspect-ratio: 1) {
+  .horizontal-media-scroller figure > picture {
+    inline-size: auto; /* for a block-size driven ratio */
+    aspect-ratio: 1; /* boxes by default */
+
+    @nest section:nth-child(2) & {
+      aspect-ratio: 16/9;
+    }
+
+    @nest section:nth-child(3) & {
+      /* double the size of the others */
+      block-size: calc(var(--size) * 2);
+      aspect-ratio: 4/3;
+
+      /* adjust size to fit more items into the viewport */
+      @media (width <= 480px) {
+        block-size: calc(var(--size) * 1.5);
+      }
+    }
+  }
+}
+```
+
+If the browser supports `aspect-ratio` syntax, the media scroller pictures are
+upgraded to `aspect-ratio` sizing. Using the draft nesting syntax, each picture
+changes its aspect ratio depending if it's the first, second, or third rows. The
+[nest syntax](https://drafts.csswg.org/css-nesting-1/) also allows setting some small
+viewport adjustments, right there with the other sizing logic.
+
+With that CSS, as the feature is available in more browser engines, an easy to
+manage but more visually appealing layout will render.
+
+### Prefers reduced data
+
+While this next technique is only available
+[behind a flag](about://flags/#enable-experimental-web-platform-features) in
+[Canary](https://www.google.com/chrome/canary/),
+I wanted to share how I could save a considerable amount of page load time and
+data use with a few lines of CSS. The `prefers-reduced-data` media query from
+[level 5](https://drafts.csswg.org/mediaqueries-5/) allows asking if the device is in
+any reduced data states, like a data saver mode. If it is, I can modify the
+document, and in this case, hide the images.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PRhulaSe06O9XbM9V2hb.png",
+alt="ALT_TEXT_HERE", width="800", height="502" %}
+
+```css
+figure {
+  @media (prefers-reduced-data: reduce) {
+    & {
+      min-inline-size: var(--size);
+
+      & > picture {
+        display: none;
+      }
+    }
+  }
+}
+```
+
+The content is still navigable but without the cost of the heavy images being
+downloaded. Here's the site before adding the `prefers-reduced-data` CSS:
+
+(7 requests, 100kb of resources in 131ms)
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/63Zcpf05AN5sarJxTHE9.png",
+alt="ALT_TEXT_HERE", width="800", height="841" %}
+
+Here's the site performance after adding the `prefers-reduced-data` CSS:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/nhNncPluLqgEabbRkKaG.png",
+alt="ALT_TEXT_HERE", width="800", height="841" %}
+
+(71 requests, 1.2mb of resources in 1.07s)
+
+64 fewer requests, that would be the ~60 images within the viewport (tests taken
+on a wide screen display) of this browser tab, a page load boost of ~80%, and
+10% of the data over the wire. Pretty powerful CSS.
+
+## Conclusion
+
+Now that you know how I did it, how would you?! 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a Codepen or host your own demo, tweet me with it, and I'll add it to the
+Community remixes section below.
+
+**Source**
+- [GUI Challenges source on GitHub](https://github.com/argyleink/gui-challenges)
+- [Media scroller Codepen starter](https://codepen.io/argyleink/pen/bGgyOGP)
+
+## Community remixes
+
+*Nothing to see here yet!*
diff --git a/src/site/content/en/blog/building-a-multi-select-component/index.md b/src/site/content/en/blog/building-a-multi-select-component/index.md
new file mode 100644
index 00000000000..406bf9e7276
--- /dev/null
+++ b/src/site/content/en/blog/building-a-multi-select-component/index.md
@@ -0,0 +1,506 @@
+---
+layout: post
+title: Building a multi-select component
+subhead: A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
+date: 2021-10-13
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/MR7sBNM1PeMduYtNWkeg.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Tqo3cnDl6Kr44qXkFqIG.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build a multi-select component. Try the
+[demo](https://gui-challenges.web.app/multi-select/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nYQfioJpi2xziWrsMQ8Q.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/multi-select/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'x0aCdLDZ8BM' %}
+
+## Overview
+
+Users are often presented with items, sometimes **lots** of items, and in these
+cases it can be a good idea to provide a way to reduce the list to prevent
+[choice overload](https://www.nngroup.com/articles/simplicity-vs-choice/). This
+blog post explores filtering UI as a way to reduce choices. It does this by
+presenting item attributes that users can select or deselect, reducing results
+and therefore reducing choice overload.
+
+### Interactions
+
+The goal is to enable swift traversal of filter options for all users and their
+varying input types. This will be delivered with an adaptable and responsive
+pair of components. A traditional sidebar of checkboxes for desktop, keyboard
+and screen readers, and a [`<select
+multiple>`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple)
+for touch users.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/784yEixWzAhzh8GqUhLM.png",
+alt="Comparison screenshot showing desktop light and dark with a sidebar of
+checkboxes vs mobile iOS and Android with a multi-select element.", width="800",
+height="434" %}
+
+This decision to use built-in multiselect for touch, and not for desktop, saves work and creates work, but I believe delivers appropriate experiences with less code debt than building the entire responsive experience in one component.
+
+#### Touch
+
+The touch component saves on space and helps user interaction accuracy on
+mobile. It saves space by collapsing an entire sidebar of checkboxes into a
+`<select>` built-in overlay touch experience. It helps input accuracy by showing
+a large touch overlay experience provided by the system.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hox09QWcjlL9wemzO1EI.png", alt="A
+screenshot preview of the multi-select element in Chrome on Android, iPhone and
+iPad. The iPad and iPhone have the multi-select toggled open, and each get a
+unique experience optimized for the screen size.", width="800", height="483" %}
+
+#### Keyboard and gamepad
+
+Below is a demonstration of how to use a `<select multiple>` from the keyboard.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Ahh0DJ7upPdNox1hFjM0.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true",
+  width="640"
+%}
+
+This built-in multi-select can't be styled and is only offered in a compact
+layout not suitable for presenting a lot of options. See how you can't really
+see the breadth of options in that tiny box? While you can change its size, it's
+still not as usable as a sidebar of checkboxes.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/7FXTAv3VQ2xzJnLZDZWk.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+## Markup
+
+Both components will be contained in the same `<form>` element. The results of
+this form, whether checkboxes or a multi-select, will be observed and used to
+filter the grid, but could also be submitted to a server.
+
+```html
+<form>
+
+</form>
+```
+
+### Checkboxes component
+
+Groups of checkboxes should be wrapped in a
+[`<fieldset>`](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset)
+element and given a
+[`<legend>`](https://developer.mozilla.org/docs/Web/HTML/Element/legend).
+When HTML is structured this way, screen readers and
+[FormData](https://developer.mozilla.org/docs/Web/API/FormData) will
+automatically understand the relationship of the elements.
+
+```html
+<form>
+  <fieldset>
+    <legend>New</legend>
+    … checkboxes …
+  </fieldset>
+</form>
+```
+
+With the grouping in place, add a `<label>` and `<input type="checkbox">` for
+each of the filters. I chose to wrap mine in a `<div>` so the CSS `gap` property
+can space them evenly and maintain alignment when labels go multiline.
+
+```html
+<form>
+  <fieldset>
+    <legend>New</legend>
+    <div>
+      <input type="checkbox" id="last 30 days" name="new" value="last 30 days">
+      <label for="last 30 days">Last 30 Days</label>
+    </div>
+    <div>
+      <input type="checkbox" id="last 6 months" name="new" value="last 6 months">
+      <label for="last 6 months">Last 6 Months</label>
+    </div>
+   </fieldset>
+</form>
+```
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/vOw5gp1GmYtJ5JPSh7JI.png",
+   alt="A screenshot with an informative overlay for the legend and
+  fieldset elements, shows color and element name.",
+  width="800", height="616"
+%}
+
+### `<select multiple>` component
+
+A seldom used feature of the `<select>` element is
+[`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple).
+When the attribute is used with a `<select>` element, the user is allowed to
+choose many from the list. It's like changing the interaction from a radio list
+to a checkbox list.
+
+```html
+<form>
+  <select multiple="true" title="Filter results by category">
+    …
+  </select>
+</form>
+```
+
+To label and create groups inside of a `<select>`, use the
+[`<optgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/optgroup)
+element and give it a `label` attribute and value. This element and attribute
+value are akin to the `<fieldset>` and `<legend>` elements.
+
+```html
+<form>
+  <select multiple="true" title="Filter results by category">
+    <optgroup label="New">
+      …
+    </optgroup>
+  </select>
+</form>
+```
+
+Now add the
+[`<option>`](https://developer.mozilla.org/docs/Web/HTML/Element/option)
+elements for the filter.
+
+```html
+<form>
+  <select multiple="true" title="Filter results by category">
+    <optgroup label="New">
+      <option value="last 30 days">Last 30 Days</option>
+      <option value="last 6 months">Last 6 Months</option>
+    </optgroup>
+  </select>
+</form>
+```
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/pjCjCZAnNgHItIYSin1w.png",
+   alt="A screenshot of the desktop rendering of a multi-select element.",
+  width="554", height="320"
+%}
+
+### Tracking input with counters to inform assistive technology
+
+The [status
+role](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role)
+technique is used in this user experience, to track and maintain the tally of
+filters for screen readers and other assistive technologies. The YouTube video
+demonstrates the feature. The integration begins with HTML and the attribute
+`role="status"`.
+
+```html
+<div role="status" class="sr-only" id="applied-filters"></div>
+```
+
+This element will read aloud changes made to the contents. We can update the
+contents with [CSS
+counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+as users interact with the checkboxes. To do that we first need to create a
+counter with a name on a parent element of the inputs and state element.
+
+```css
+aside {
+  counter-reset: filters;
+}
+```
+
+By default, the count will be `0`, which is great, nothing is `:checked` by
+default in this design.
+
+Next, to increment our newly created counter, we'll target children of the
+`<aside>` element that are `:checked`. As the user changes the state of inputs,
+the `filters` counter will tally up.
+
+```css
+aside :checked {
+  counter-increment: filters;
+}
+```
+
+CSS is now aware of the general tally of the checkbox UI and the status role
+element is empty and awaiting values. Since CSS is maintaining the tally in
+memory, the
+[`counter()`](https://developer.mozilla.org/docs/Web/CSS/counter())
+function allows accessing the value from [pseudo
+element](/learn/css/pseudo-elements/) contents:
+
+```css
+aside #applied-filters::before {
+  content: counter(filters) " filters ";
+}
+```
+
+The HTML for the status role element will now announce "2 filters " to a screen
+reader. This is a good start, but we can do better, like share the tally of
+results the filters have updated. We'll do this work from JavaScript, as it's
+outside what counters can do.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ae97QeV86HFYr3xnmwrQ.png",
+   alt="A screenshot of the MacOS screen reader announcing number of active filters.",
+  width="800", height="177"
+%}
+
+#### Nesting excitement
+
+The counters algorithm felt great with [CSS
+nesting-1](https://www.w3.org/TR/css-nesting-1/), as I was able to put all the
+logic into one block. Feels portable and centralized for reading and updating.
+
+```css
+aside {
+  counter-reset: filters;
+
+  & :checked {
+    counter-increment: filters;
+  }
+
+  & #applied-filters::before {
+    content: counter(filters) " filters ";
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/abxqZy9rht1fypkWX39e.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+{% Aside %}
+I pass my nesting syntax through this [PostCSS Nesting
+plugin](https://github.com/csstools/postcss-nesting) so it works in browsers
+today.
+{% endAside %}
+
+## Layouts
+
+This section describes the layouts between the two components. Most of the
+layout styles are for the desktop checkbox component.
+
+### The form
+
+To optimize legibility and scannability for users, the form is given a maximum
+width of 30 characters, essentially setting an optical line width for each
+filter label. The form uses grid layout and the `gap` property to space out the
+fieldsets.
+
+```css
+form {
+  display: grid;
+  gap: 2ch;
+  max-inline-size: 30ch;
+}
+```
+
+### The `<select>` element
+
+The list of labels and checkboxes both consume too much space on mobile.
+Therefore, the layout checks to see the user’s primary pointing device to change
+the experience for touch.
+
+```css
+@media (pointer: coarse) {
+  select[multiple] {
+    display: block;
+  }
+}
+```
+
+A value of `coarse` indicates that the user will not be able to interact with
+the screen with high amounts of precision with their primary input device. On a
+mobile device, the pointer value is often `coarse`, as the primary interaction
+is touch. On a desktop device, the pointer value is often `fine` as it's common
+to have a mouse or other high precision input device connected.
+
+### The fieldsets
+
+The default styling and layout of a `<fieldset>` with a `<legend>` is unique:
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/YGuj5hH6ZuYW08YD1S1C.png",
+   alt="A screenshot of the default styles for a fieldset and legend.",
+  width="568", height="550"
+%}
+
+Normally, to space my child elements I'd use the `gap` property, but the unique
+positioning of the `<legend>` makes it difficult to create an evenly spaced set
+of children. Instead of `gap`, the [adjacent sibling
+selector](/learn/css/selectors/#next-sibling-combinator) and
+`margin-block-start` are used.
+
+```css
+fieldset {
+  padding: 2ch;
+
+  & > div + div {
+    margin-block-start: 2ch;
+  }
+}
+```
+
+This skips the `<legend>` from having it's space adjusted by targeting just the
+`<div>` children.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DwfZaTP6Yui32K0RKAZl.png",
+   alt="Screenshot showing the margin spacing between inputs but not the legend.",
+  width="768", height="602"
+%}
+
+### The filter label and checkbox
+
+As a direct child of a `<fieldset>` and within the max width of the form's
+`30ch`, label text may wrap if too long. Wrapping text is great, but
+misalignment between text and checkbox is not. Flexbox is ideal for this.
+
+```css
+fieldset > div {
+  display: flex;
+  gap: 2ch;
+  align-items: baseline;
+}
+```
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/29BmNgNWDGZjMz5gxqIY.png",
+       alt="Screenshot showing how the checkmark aligns to
+    the first line of text in a multi-line wrapping scenario.",
+    width="800", height="448"
+  %}
+  <figcaption>
+    Play more in this <a href="https://codepen.io/argyleink/pen/VwWqwqe">Codepen</a>
+  </figcaption>
+</figure>
+
+### The animated grid
+
+The layout animation is done by [Isotope](https://isotope.metafizzy.co/). A
+performant and powerful plugin for interactive sort and filter.
+
+## JavaScript
+
+In addition to helping orchestrate a neat animated, interactive grid, JavaScript
+is used to polish a couple of rough edges.
+
+### Normalizing the user input
+
+This design has one form with two different ways to provide input, and they
+don't
+[serialize](https://developer.mozilla.org/docs/Glossary/Serialization) the
+same. With some JavaScript though, we can
+[normalize](https://en.wikipedia.org/wiki/Database_normalization) the data.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uBPBUzFc45v13Effbz8P.png",
+   alt="Screenshot of the DevTools JavaScript console which
+  shows the goal, normalized data results.",
+  width="800", height="355"
+%}
+
+I chose to align the `<select>` element data structure to the grouped checkboxes
+structure. To do this, an
+[`input`](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event)
+event listener is added to the `<select>` element, at which point it's
+[`selectedOptions`](https://developer.mozilla.org/docs/Web/API/HTMLSelectElement/selectedOptions)
+are mapped.
+
+```js
+document.querySelector('select').addEventListener('input', event => {
+  // make selectedOptions iterable then reduce a new array object
+  let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
+    // parent optgroup label and option value are added to the reduce aggregator
+    data.push([opt.parentElement.label.toLowerCase(), opt.value])
+    return data
+  }, [])
+})
+```
+
+Now it's safe to submit the form, or in the case of this demo, instruct Isotope
+on what to filter by.
+
+### Finishing the status role element
+
+The element is only tallying and announcing filter count based on checkbox
+interaction but I felt it was a good idea to additionally share the number of
+results and ensure the `<select>` element choices are counted as well.
+
+#### `<select>` element choice reflected in the `counter()`
+
+In the data normalization section, a listener was already created on input. At
+the end of this function the number of chosen filters and the number of results
+for those filters are known. The values can be passed to the state role element
+like this.
+
+```js
+let statusRoleElement = document.querySelector('#applied-filters')
+statusRoleElement.style.counterSet = selectData.length
+```
+
+#### Results reflected in the `role="status"` element
+
+`:checked` provides a built-in way of passing the number of chosen filters to
+the status role element, but lacks visibility to the filtered number of results.
+JavaScript can watch for interaction with the checkboxes and after filtering the
+grid, add `textContent` like the `<select>` element did.
+
+```js
+document
+  .querySelector('aside form')
+  .addEventListener('input', e => {
+    // isotope demo code
+    let filterResults = IsotopeGrid.getFilteredItemElements().length
+    document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
+})
+```
+
+Altogether this work completes the announcement "2 filters giving 25 results".
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/RHqlVps5uIO9pg4SLVmu.png",
+   alt="A screenshot of the MacOS screen reader announcing results.",
+  width="800", height="177"
+%}
+
+Now our excellent assistive technology experience will be delivered to all the
+users, however they interact with it.
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+*Nothing to see here yet!*
diff --git a/src/site/content/en/blog/building-a-pwa-at-google-part-1/hero.jpg b/src/site/content/en/blog/building-a-pwa-at-google-part-1/hero.jpg
deleted file mode 100644
index c4959c47f01..00000000000
Binary files a/src/site/content/en/blog/building-a-pwa-at-google-part-1/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/building-a-pwa-at-google-part-1/index.md b/src/site/content/en/blog/building-a-pwa-at-google-part-1/index.md
index 599100f0285..a3caa578ce3 100644
--- a/src/site/content/en/blog/building-a-pwa-at-google-part-1/index.md
+++ b/src/site/content/en/blog/building-a-pwa-at-google-part-1/index.md
@@ -8,7 +8,7 @@ authors:
   - joelriley
   - douglasparker
   - msdikla
-hero: hero.jpg
+hero: image/admin/mgB3j6NZa6F1CkoD9YI4.jpg
 alt: A group of people working on their computers at a table.
 description: |
   What the Bulletin team learned about service workers while developing a PWA.
@@ -29,9 +29,9 @@ means a complete overview of PWAs. The aim is to share learnings from our team's
 For this first post we'll cover a little background information first and then dive into all the
 stuff we learned about service workers.
 
-{% Aside %}  
+{% Aside %}
 Bulletin was shut down in 2019 due to lack of product/market fit. We still learned a lot about PWAs
-along the way!  
+along the way!
 {% endAside %}
 
 ## Background {: #background }
@@ -44,7 +44,7 @@ Before we delve into the development process, let's examine why building a PWA w
 option for this project:
 
 * **Ability to iterate quickly**. Especially valuable since Bulletin would be piloted in
-  multiple markets. 
+  multiple markets.
 * **Single code base**. Our users were roughly evenly split between Android and iOS. A PWA meant
   we could build a single web app that would work on both platforms. This increased the velocity
   and impact of the team.
@@ -63,16 +63,16 @@ framework will work.
 ## What we learned about service workers {: #lessons-learned }
 
 You can't have a PWA without a [service
-worker](https://developers.google.com/web/fundamentals/primers/service-workers/). Service workers
+worker](https://developer.chrome.com/docs/workbox/service-worker-overview/). Service workers
 give you a lot of power, such as advanced caching strategies, offline capabilities, background sync,
 etc. While service workers do add some complexity, we found that their benefits outweighed the added
-complexity. 
+complexity.
 
 ### Generate it if you can {: #generate }
 
 Avoid writing a service worker script by hand. Writing service workers by hand requires manually
 managing cached resources and rewriting logic that is common to most service workers libraries, such
-as [Workbox](https://developers.google.com/web/tools/workbox/).
+as [Workbox](https://developer.chrome.com/docs/workbox/).
 
 Having said that, due to our internal tech stack we could not use a library to generate and manage
 our service worker. Our learnings below will at times reflect that. Go to [Pitfalls for
@@ -92,7 +92,7 @@ state](#global-state).
 
 ### Avoid accessing IndexedDB during initialization {: #idb }
 
-Don't read [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) when
+Don't read [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) when
 initializing your service worker script, or else you can get into this undesired situation:
 
 1. User has web app with IndexedDB (IDB) version N
@@ -125,7 +125,7 @@ Because service workers exist in a different context, many symbols you might exp
 present. A lot of our code ran in both a `window` context, as well as a service worker context (such
 as logging, flags, syncing, etc.). Code needs to be defensive about the services it uses, such as
 local storage or cookies. You can use
-[`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)
+[`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis)
 to refer to the global object in a manner which will work across all contexts. Also use data stored
 in global variables sparingly, as there is no guarantee as to when the script will be terminated and
 the state evicted.
@@ -142,13 +142,13 @@ disable the memory cache. In order to cover more browsers, we opted for a differ
 including a flag to disable caching in our service worker which is enabled by default on developer
 builds. This ensures that devs always get their most recent changes without any caching issues. It's
 important to include the `Cache-Control: no-cache` header as well to [prevent the browser from
-caching any assets](https://web.dev/http-cache/#unversioned-urls).
+caching any assets](/http-cache/#unversioned-urls).
 
 ### Lighthouse {: #lighthouse }
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) provides a number of debugging
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) provides a number of debugging
 tools useful for PWAs. It scans a site and generates reports covering PWAs, performance,
-accessibility, SEO, and other best practices.  
+accessibility, SEO, and other best practices.
 We recommend [running Lighthouse on continuous
 integration](https://github.com/GoogleChrome/lighthouse-ci) to alert you if you break one of the
 criteria to be a PWA. This actually happened to us once, where the service worker wasn't installing
@@ -163,7 +163,7 @@ the service worker would serve the old client while it lazily downloaded the new
 new client downloaded, it would prompt the user to refresh the page to access new features. Even if
 the user ignored this request, the next time they refreshed the page they would receive the new
 version of the client. As a result, it is quite difficult for a user to refuse updates in the same
-way they can for native apps.
+way they can for iOS/Android apps.
 
 We were able to push out breaking backend changes with a very short amount of migration time for
 clients. Typically, we would give a month for users to update to newer clients before making
@@ -173,7 +173,7 @@ to exist in the wild if the user had not opened the app for a long time. On iOS,
 so this case does not happen. For Android, this problem could be mitigated by not serving while
 stale, or manually expiring the content after a few weeks. In practice, we never encountered
 problems from stale clients. How strict a given team wants to be here is up to their specific use
-case, but PWAs provide significantly more flexibility than native apps.
+case, but PWAs provide significantly more flexibility than iOS/Android apps.
 
 ### Getting cookie values in a service worker {: #cookies }
 
@@ -187,7 +187,7 @@ frontend server that simply echoed the cookie value back to the client. The serv
 network request to this endpoint and read the response to get the cookie values.
 
 With the release of the
-[Cookie Store API](https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies),
+[Cookie Store API](https://developer.chrome.com/blog/asynchronous-access-to-http-cookies/),
 this workaround should no longer be necessary for browsers that support it, as it provides
 asynchronous access to browser cookies and can be used directly by the service worker.
 
@@ -202,7 +202,7 @@ worker script has changed in some way, so we had to ensure the service worker sc
 changed in some way when a cached file changed. We did this manually by embedding a hash of the
 static resource fileset within our service worker script, so every release produced a distinct
 service worker JavaScript file. Service worker libraries like
-[Workbox](https://developers.google.com/web/tools/workbox/) automate this process for you.
+[Workbox](https://developer.chrome.com/docs/workbox/) automate this process for you.
 
 ### Unit testing {: #unit-testing }
 
diff --git a/src/site/content/en/blog/building-a-settings-component/index.md b/src/site/content/en/blog/building-a-settings-component/index.md
new file mode 100644
index 00000000000..7628fe70d60
--- /dev/null
+++ b/src/site/content/en/blog/building-a-settings-component/index.md
@@ -0,0 +1,960 @@
+---
+layout: post
+title: Building a Settings component
+subhead: A foundational overview of how to build a settings component of sliders and checkboxes.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a settings component of sliders and checkboxes.
+date: 2021-03-17
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SUaxDTgOYvv2JXxaErBP.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zkv1FlI6dn82rJ104yBV.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+In this post I want to share thinking on building a Settings component for the
+web that is responsive, supports multiple device inputs, and works across
+browsers. Try the [demo](https://gui-challenges.web.app/settings/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/WuIwd9jPb30KmmnjJn75.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/settings/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, or want a UI/UX preview of what we're building, here's a
+shorter walkthrough on YouTube:
+
+{% YouTube 'dm7gnp6eh3Q' %}
+
+## Overview
+
+I've broken out the aspects of this component into the following sections:
+
+1. [Layouts](#layouts)
+1. [Color](#color)
+1. [Custom range input](#custom-range)
+1. [Custom checkbox input](#custom-checkbox)
+1. [Accessibility considerations](#accessibility)
+1. [JavaScript](#javascript)
+
+{% Aside 'gotchas' %}
+The CSS snippets below assume PostCSS with
+[PostCSS Preset Env](https://preset-env.cssdb.org/features).
+Intent is to practice early and often with syntax in early drafts or
+experimentally available in browsers. Or as the plugin likes to say,
+"Use tomorrow's CSS today".
+{% endAside %}
+
+## Layouts
+
+This is the first GUI Challenge demo to be **all CSS Grid**! Here's each grid
+highlighted with the [Chrome DevTools for grid](https://goo.gle/devtools-grid):
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/h6LZhScslprBcFol4gGp.png",
+  alt="Colorful outlines and gap spacing overlays that help show all the boxes that make up the settings layout",
+   width="800", height="563"
+%}
+
+{% Aside %}
+To highlight your grid layouts:
+1. Open Chrome DevTools with `cmd+opt+i` or `ctrl+alt+i`.
+1. Select the Layout tab next to the Styles tab.
+1. Under the Grid layouts section, check on all the layouts.
+1. Change the colors of all layouts.
+{% endAside %}
+
+### Just for gap
+
+The most common layout:
+
+```css
+foo {
+  display: grid;
+  gap: var(--something);
+}
+```
+
+I call this layout "just for gap" because it only uses grid to add gaps between blocks.
+
+Five layouts use this strategy, here's all of them displayed:
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zYWSVLzdtrh1K8p8yUuA.png",
+  alt="Vertical grid layouts highlighted with outlines and filled in gaps",
+  width="800",
+  height="568"
+%}
+
+The `fieldset` element, which contains each input group (`.fieldset-item`), is using `gap: 1px` to
+create the hairline borders between elements. No tricky border solution!
+
+<div class="switcher">
+{% Compare 'better', 'Filled gap' %}
+
+```css
+.grid {
+  display: grid;
+  gap: 1px;
+  background: var(--bg-surface-1);
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+  }
+}
+```
+
+{% endCompare %}
+
+{% Compare 'worse', 'Border trick' %}
+
+```css
+.grid {
+  display: grid;
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--bg-surface-1);
+    }
+  }
+}
+```
+{% endCompare %}
+</div>
+
+### Natural grid wrapping
+
+The most complex layout ended up being the macro layout, the logical layout
+system between `<main>` and `<form>`.
+
+#### Centering wrapping content
+
+Flexbox and grid both provide abilities to `align-items` or
+`align-content`, and when dealing with wrapping elements, `content` layout
+alignments will distribute space amongst the children as a group.
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+}
+```
+
+The main element is using `place-content: center` [alignment
+shorthand](https://developer.mozilla.org/docs/Web/CSS/place-content) so
+that the children are centered vertically and horizontally in both one and two column layouts.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IQI2PofA6gpNFUkDrvKo.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Watch in the above video how the "content" stays centered, even though wrapping
+has occurred.
+
+#### Repeat auto-fit minmax
+
+The `<form>` uses an adaptive grid layout for each section.
+This layout switches from one to two columns based on available space.
+
+```css
+form {
+  display: grid;
+  gap: var(--space-xl) var(--space-xxl);
+  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
+  align-items: flex-start;
+  max-width: 89vw;
+}
+```
+
+This grid has a different value for `row-gap` (--space-xl) than `column-gap` (--space-xxl)
+to put that custom touch on the responsive layout. When the columns stack, we
+want a large gap, but not as large as if we're on a wide screen.
+
+The `grid-template-columns` property uses 3 CSS functions: `repeat()`, `minmax()` and
+`min()`. [Una Kravets](#) has a [great layout blog
+post](/one-line-layouts/) about this, calling it
+[RAM](/one-line-layouts/#07-ram-repeat,-auto,-minmax-grid-template-columnsauto-fit,-minmaxlessbasegreater,-1fr).
+
+There's 3 special additions in our layout, if you compare it to Una's:
+
+- We pass an extra `min()` function.
+- We specify `align-items: flex-start`.
+- There's a `max-width: 89vw` style.
+
+The extra `min()` function is well described by Evan Minto on their blog in the
+post [Intrinsically Responsive CSS Grid with minmax() and
+min()](https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/).
+I recommend giving that a read. The `flex-start` alignment correction is to
+remove the default stretching effect, so that the children of this layout don't
+need to have equal heights, they can have natural, intrinsic heights. The
+YouTube video has a quick breakdown of this alignment addition.
+
+`max-width: 89vw` is worth a small breakdown in this post.
+Let me show you the layout with and without the style applied:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/gdldf7hyaBrHWwxQbSaT.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+What's happening? When `max-width` is specified, it's providing context,
+explicit sizing or [definite
+sizing](https://drafts.csswg.org/css-sizing-3/#definite) for the [`auto-fit`
+layout algorithm](https://drafts.csswg.org/css-grid/#auto-repeat) to know how
+many repetitions it can fit into the space. While it seems obvious that the
+space is "full width", per the CSS grid spec, a definite size or max-size must
+be provided. I've provided a max-size.
+
+So, why `89vw`? Because "it worked" for my layout.
+Me and a couple of other Chrome folks are investigating why a more reasonable value,
+like `100vw` isn't sufficient, and if this is in fact a bug.
+
+### Spacing
+
+A majority of the harmony of this layout is from a limited palette of spacing, 7
+to be exact.
+
+```css
+:root {
+  --space-xxs: .25rem;
+  --space-xs:  .5rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-xxl: 6rem;
+}
+```
+
+Usage of these flows really nicely with grid, [CSS @nest](https://drafts.csswg.org/css-nesting-1/), and [level 5 syntax
+of @media](https://drafts.csswg.org/mediaqueries-5/). Here's an example, the fully `<main>` layout set of styles.
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+  padding: var(--space-sm);
+
+  @media (width >= 540px) {
+    & {
+      padding: var(--space-lg);
+    }
+  }
+
+  @media (width >= 800px) {
+    & {
+      padding: var(--space-xl);
+    }
+  }
+}
+```
+
+A grid with centered content, moderately padded by default (like on mobile). But
+as more viewport space becomes available, it spreads out by increasing padding.
+2021 CSS is looking pretty good!
+
+Remember the earlier layout, "just for gap"? Here's a more complete version of
+how they look in this component:
+
+```css
+header {
+  display: grid;
+  gap: var(--space-xxs);
+}
+
+section {
+  display: grid;
+  gap: var(--space-md);
+}
+```
+
+## Color
+
+A controlled use of color helped this design stand out as expressive yet
+minimal. I do it like this:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --surface2: lch(15 0 0);
+  --surface3: lch(20 0 0);
+  --surface4: lch(25 0 0);
+
+  --text1: lch(95 0 0);
+  --text2: lch(75 0 0);
+}
+```
+
+{% Aside 'key-term' %}
+[PostCSS `lab()` and `lch()`
+plugin](https://github.com/csstools/postcss-lab-function) is part of [PostCSS
+Preset Env](https://preset-env.cssdb.org/features#lch-function), and will output
+`rgb()` colors.
+{% endAside %}
+
+I name my surface and text colors with numbers as opposed to names like
+`surface-dark` and `surface-darker` because in a media query, I'll be flipping
+them, and light and dark won't be meaningful.
+
+I flip them in a preference media query like this:
+
+```css
+:root {
+  ...
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --surface2: lch(100 0 0);
+      --surface3: lch(98 0 0);
+      --surface4: lch(85 0 0);
+
+      --text1: lch(20 0 0);
+      --text2: lch(40 0 0);
+    }
+  }
+}
+```
+
+{% Aside 'key-term' %}
+[PostCSS `@nest` plugin](https://github.com/csstools/postcss-nesting) is part of [PostCSS
+Preset Env](https://preset-env.cssdb.org/features), and will expand selectors to a syntax
+browsers support today.
+{% endAside %}
+
+It's important to get a quick glimpse at the overall picture and strategy before
+we dive into color syntax details. But, since I've gotten a bit ahead of myself,
+let me back up a bit.
+
+### LCH?
+
+Without getting too deep into color theory land, LCH is a human oriented syntax,
+that caters to how we percieve color, not how we measure color with math (like
+255). This gives it a distinct advantage as humans can write it more easily and other
+humans will be in tune with these adjustments.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/160dWLSrMhFISwWMVd4w.png",
+    alt="A screenshot of pod.link/csspodcast webpage, with Color 2: Perception episode pulled up",
+    width="800",
+    height="329"
+  %}
+  <figcaption>
+    Learn about perceptual color (and more!) on the <a href="https://pod.link/thecsspodcast">CSS Podcast</a>
+  </figcaption>
+</figure>
+
+For today, in this demo, let's focus on the syntax and the values I'm flipping
+to make light and dark. Let's look at 1 surface and 1 text color:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --text1:    lch(95 0 0);
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --text1:    lch(40 0 0);
+    }
+  }
+}
+```
+
+`--surface1: lch(10 0 0)` translates to `10%` lightness, 0 chroma and 0 hue: a
+very dark colorless gray. Then, in the media query for light mode, the lightness
+is flipped to `90%` with `--surface1: lch(90 0 0);`. And that's the gist of the
+strategy. Start by just changing lightness between the 2 themes, maintaining the
+contrast ratios the design calls for or what can maintain accessibility.
+
+The bonus with `lch()` here is that lightness is human oriented, and we can feel
+good about a `%` change to it, that it will be perceptually and consistently
+that `%` different. `hsl()` for example is [not as
+reliable](https://twitter.com/argyleink/status/1201908189257555968).
+
+There's [more to
+learn](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) about
+color spaces and `lch()` if you're interested. It's coming!
+
+{% Blockquote 'Lea Verou' %}
+CSS right now **cannot access these colors at all**.
+Let me repeat: **We have no access to one third of the colors in most modern
+monitors.** And these are not just any colors, but the **most vivid colors the
+screen can display**. Our websites are washed out because monitor hardware evolved
+faster than CSS specs and browser implementations.
+{% endBlockquote %}
+
+### Adaptive form controls with color-scheme
+
+Many browsers ship dark theme controls, currently Safari and Chromium, but you
+have to specify in CSS or HTML that your design uses them.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/0VVtEAWM6jHeIxahqnFy.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The above is demonstrating the effect of the property from the Styles panel of
+DevTools. The demo uses the HTML tag, which in my opinion is generally
+a better location:
+
+```html
+<meta name="color-scheme" content="dark light">
+```
+
+Learn all about it in this [`color-scheme`
+article](/color-scheme/) by [Thomas
+Steiner](/authors/thomassteiner/). There's a lot more to gain
+than dark checkbox inputs!
+
+### CSS `accent-color`
+
+There's been [recent
+activity](https://twitter.com/argyleink/status/1360022120810483715?s=20) around
+`accent-color` on form elements, being a single CSS style that can change the
+tint color used in the browsers input element. Read more about it [here on
+GitHub](https://github.com/w3c/csswg-drafts/issues/5187). I've included it in my
+styles for this component. As browsers support it, my checkboxes will be
+more on theme with the pink and purple color pops.
+
+```css
+input[type="checkbox"] {
+  accent-color: var(--brand);
+}
+```
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J9pbhB0ImoDzbsXkBGtG.png",
+  alt="A screenshot from Chromium on Linux of pink checkboxes",
+  width="800",
+  height="406"
+%}
+
+### Color pops with fixed gradients and focus-within
+
+Color pops most when it's used sparingly, and one of the ways I like to achieve
+that is through colorful UI interactions.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pm75QwVToKkiqedqPtmm.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true",
+  width="480px"
+%}
+
+There are many layers of UI feedback and interaction in the above video, which
+help give personality to the interaction by:
+- Highlighting context.
+- Providing UI feedback of "how full" the value is in the range.
+- Providing UI feedback that a field is accepting input.
+
+To provide feedback when an element is being interacted with, CSS is using the
+[`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
+pseudo class to change the appearance of various elements, let's break down the
+`.fieldset-item`, it's super interesting:
+
+```css
+.fieldset-item {
+  ...
+
+  &:focus-within {
+    background: var(--surface2);
+
+    & svg {
+      fill: white;
+    }
+
+    & picture {
+      clip-path: circle(50%);
+      background: var(--brand-bg-gradient) fixed;
+    }
+  }
+}
+```
+
+When one of the children of this element has focus-within:
+1. The `.fieldset-item` background is assigned a higher contrast surface color.
+1. The nested `svg` is filled white for higher contrast.
+1. The nested `<picture>` `clip-path` expands to a full circle and the
+   background is filled with the bright fixed gradient.
+
+## Custom range
+
+Given the following HTML input element, I'll show you how I customized its
+appearance:
+
+```html
+<input type="range">
+```
+
+There's 3 parts to this element we need to customize:
+1. [Range element / container](#range-element-styles)
+1. [Track](#track-styles)
+1. [Thumb](#thumb-styles)
+
+### Range element styles
+
+```css
+input[type="range"] {
+  /* style setting variables */
+  --track-height: .5ex;
+  --track-fill: 0%;
+  --thumb-size: 3ex;
+  --thumb-offset: -1.25ex;
+  --thumb-highlight-size: 0px;
+
+  appearance: none;         /* clear styles, make way for mine */
+  display: block;
+  inline-size: 100%;        /* fill container */
+  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
+  background: transparent;  /* bg is in the track */
+  outline-offset: 5px;      /* focus styles have space */
+}
+```
+
+The first few lines of CSS are the custom parts of the styles, and I hope that
+clearly labeling them helps. The rest of the styles are mostly reset styles, to
+provide a consistent foundation for building the tricky parts of the component.
+
+### Track styles
+
+```css
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none; /* clear styles, make way for mine */
+  block-size: var(--track-height);
+  border-radius: 5ex;
+  background:
+    /* hard stop gradient:
+        - half transparent (where colorful fill we be)
+        - half dark track fill
+        - 1st background image is on top
+    */
+    linear-gradient(
+      to right,
+      transparent var(--track-fill),
+      var(--surface1) 0%
+    ),
+    /* colorful fill effect, behind track surface fill */
+    var(--brand-bg-gradient) fixed;
+}
+```
+
+The trick to this is "revealing" the vibrant fill color. This is done with the
+hard stop gradient on top. The gradient is transparent up to the fill percentage, and after
+that uses the unfilled track surface color. Behind that unfilled surface, is a
+full width color, waiting for transparency to reveal it.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/aiAL28AkDRZvaAZNEbW8.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Track fill style
+
+My design **does require JavaScript** in order to maintain the fill style. There
+are CSS only strategies but they require the thumb element to be the same height
+as the track, and I wasn't able to find a harmony within those limits.
+
+```js
+/* grab sliders on page */
+const sliders = document.querySelectorAll('input[type="range"]')
+
+/* take a slider element, return a percentage string for use in CSS */
+const rangeToPercent = slider => {
+  const max = slider.getAttribute('max') || 10;
+  const percent = slider.value / max * 100;
+
+  return `${parseInt(percent)}%`;
+};
+
+/* on page load, set the fill amount */
+sliders.forEach(slider => {
+  slider.style.setProperty('--track-fill', rangeToPercent(slider));
+
+  /* when a slider changes, update the fill prop */
+  slider.addEventListener('input', e => {
+    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
+  })
+})
+```
+
+I think this makes for a nice visual upgrade. The slider works great without
+JavaScript, the `--track-fill` prop is not required, it simply will not have a
+fill style if not present. If JavaScript is available, populate the custom
+property while also observing any user changes, syncing the custom property with
+the value.
+
+[Here's a great
+post](https://css-tricks.com/sliding-nightmare-understanding-range-input/) on
+[CSS-Tricks](https://css-tricks.com/) by [Ana
+Tudor](https://twitter.com/anatudor), that demonstrates a CSS only solution for
+track fill. I also found this
+[`range` element](https://app.native-elements.dev/editor/elements/range) very inspiring.
+
+### Thumb styles
+
+```css
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none; /* clear styles, make way for mine */
+  cursor: ew-resize; /* cursor style to support drag direction */
+  border: 3px solid var(--surface3);
+  block-size: var(--thumb-size);
+  inline-size: var(--thumb-size);
+  margin-top: var(--thumb-offset);
+  border-radius: 50%;
+  background: var(--brand-bg-gradient) fixed;
+}
+```
+
+The majority of these styles are to make a nice circle.
+Again you see the fixed background gradient there that unifies the
+dynamic colors of the thumbs, tracks and associated SVG elements.
+I separated the styles for the interaction to help isolate the `box-shadow`
+technique being used for the hover highlight:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+::-webkit-slider-thumb {
+  …
+
+  /* shadow spread is initally 0 */
+  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
+
+  /* if motion is OK, transition the box-shadow change */
+  @media (--motionOK) {
+    & {
+      transition: box-shadow .1s ease;
+    }
+  }
+
+  /* on hover/active state of parent, increase size prop */
+  @nest input[type="range"]:is(:hover,:active) & {
+    --thumb-highlight-size: 10px;
+  }
+}
+```
+
+{% Aside 'key-term' %}
+[@custom-media](https://drafts.csswg.org/mediaqueries-5/#custom-mq)
+is a Level 5 spec addition that
+[PostCSS Custom Media](https://github.com/postcss/postcss-custom-media), part of
+[PostCSS Preset Env](https://preset-env.cssdb.org/features).
+{% endAside %}
+
+The goal was an easy to manage and animated visual highlight for user feedback.
+By using a box shadow I can avoid [triggering
+layout](/animations-guide/#triggers) with the effect. I do this
+by creating a shadow that's not blurred and matches the circular shape of the
+thumb element. Then I change and transition it's spread size on hover.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/s835RbH88L5bxjl5bMFl.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+If only the highlight effect was so easy on checkboxes…
+
+### Cross browser selectors
+
+I found I needed these `-webkit-` and `-moz-` selectors to achieve cross browser
+consistency:
+
+```css
+input[type="range"] {
+  &::-webkit-slider-runnable-track {}
+  &::-moz-range-track {}
+  &::-webkit-slider-thumb {}
+  &::-moz-range-thumb {}
+}
+```
+
+{% Aside 'gotchas' %}
+[Josh Comeau](https://twitter.com/JoshWComeau) outlines
+why the above examples don't simply use a comma between selectors for cross
+browser styling, see the [Twitter
+thread](https://twitter.com/JoshWComeau/status/1359213591602335752?s=20) for
+more information.
+{% endAside %}
+
+## Custom Checkbox
+
+Given the following HTML input element, I'll show you how I customized its
+appearance:
+
+```html
+<input type="checkbox">
+```
+
+There's 3 parts to this element we need to customize:
+1. [Checkbox element](#checkbox-element)
+1. [Associated labels](#checkbox-labels)
+1. [Highlight effect](#checkbox-highlight)
+
+### Checkbox element
+
+```css
+input[type="checkbox"] {
+  inline-size: var(--space-sm);   /* increase width */
+  block-size: var(--space-sm);    /* increase height */
+  outline-offset: 5px;            /* focus style enhancement */
+  accent-color: var(--brand);     /* tint the input */
+  position: relative;             /* prepare for an absolute pseudo element */
+  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
+  margin: 0;
+  cursor: pointer;
+}
+```
+
+The `transform-style` and `position` styles prepare for the pseudo-element we will introduce later
+to style the highlight. Otherwise, it's mostly
+minor opinionated style stuff from me. I like the cursor to be pointer, I like
+outline offsets, default checkboxes are too tiny, and if `accent-color` is
+[supported](https://drafts.csswg.org/css-ui-4/#widget-accent), bring these
+checkboxes into the brand color scheme.
+
+### Checkbox labels
+
+It's important to provide labels for checkboxes for 2 reasons. The first is to
+represent what the checkbox value is used for, to answer "on or off for what?"
+Second is for UX, web users have become accustomed to interacting with
+checkboxes via their associated labels.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/7GYIFNjNCBdj13juFO7S.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+<div class="switcher">
+{% Compare 'better', 'input' %}
+
+```html
+<input
+  type="checkbox"
+  id="text-notifications"
+  name="text-notifications"
+>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'label' %}
+
+```html
+<label for="text-notifications">
+  <h3>Text Messages</h3>
+  <small>Get notified about all text messages sent to your device</small>
+</label>
+```
+{% endCompare %}
+</div>
+
+On your label, put a `for` attribute that points to a checkbox by ID: `<label
+for="text-notifications">`. On your checkbox, double up both the name and id to
+ensure it's found with varying tools and tech, like a mouse or screenreader:
+`<input type="checkbox" id="text-notifications" name="text-notifications">`.
+`:hover`, `:active` and more come for free with the connection, increasing the
+ways your form can be interacted with.
+
+### Checkbox highlight
+
+I want to keep my interfaces consistent, and the slider element has a nice
+thumbnail highlight that I'd like to use with the checkbox. The thumbnail was
+able to use `box-shadow` and it's `spread` property to scale a shadow up and
+down. However, that effect doesn't work here because our checkboxes are, [and should
+be](https://twitter.com/argyleink/status/1329230409784291328?s=20), square.
+
+I was able to achieve the same visual effect with a pseudo element, and an
+unfortunate amount of tricky CSS:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+input[type="checkbox"]::before {
+  --thumb-scale: .01;                        /* initial scale of highlight */
+  --thumb-highlight-size: var(--space-xl);
+
+  content: "";
+  inline-size: var(--thumb-highlight-size);
+  block-size: var(--thumb-highlight-size);
+  clip-path: circle(50%);                     /* circle shape */
+  position: absolute;                         /* this is why position relative on parent */
+  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css/#5-pop-and-plop) */
+  left: 50%;
+  background: var(--thumb-highlight-color);
+  transform-origin: center center;            /* goal is a centered scaling circle */
+  transform:                                  /* order here matters!! */
+    translateX(-50%)                          /* counter balances left: 50% */
+    translateY(-50%)                          /* counter balances top: 50% */
+    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
+    scale(var(--thumb-scale))                 /* value we toggle for animation */
+  ;
+  will-change: transform;
+
+  @media (--motionOK) {                       /* transition only if motion is OK */
+    & {
+      transition: transform .2s ease;
+    }
+  }
+}
+
+/* on hover, set scale custom property to "in" state */
+input[type="checkbox"]:hover::before {
+  --thumb-scale: 1;
+}
+```
+
+Creating a circle psuedo-element is straightforward work, but **placing it
+behind the element it's attached to** was harder. Here's before and
+after I fixed it:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Spdpw5P1MD8ceazneRXo.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+It's definitely a micro interaction, but important to me to keep the visual
+consistency. The animation scaling technique is the same as we've been using in
+other places. We set a custom property to a new value and let CSS transition it
+based on motion preferences. The key feature here is `translateZ(-1px)`. The
+parent created a 3D space and this pseudo-element child tapped into it by
+placing itself slightly back in z-space.
+
+## Accessibility
+
+The YouTube video does a great demonstration of the mouse, keyboard and
+screenreader interactions for this settings component. I'll call out some of the
+details here.
+
+### HTML Element Choices
+
+```html
+<form>
+<header>
+<fieldset>
+<picture>
+<label>
+<input>
+```
+
+Each of these holds hints and tips to the user's browsing tool. Some elements
+provide interaction hints, some connect interactivity, and some help shape the
+acccessibility tree that a screenreader navigates.
+
+### HTML Attributes
+
+We can hide elements that are not needed by screenreaders,
+in this case the icon next to the slider:
+
+```html
+<picture aria-hidden="true">
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fVjqHRZHQixAaxjeAvDP.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true",
+  width="480px"
+%}
+
+The above video demonstrates the screenreader flow on Mac OS. Notice how input
+focus moves straight from one slider to the next. This is because we've hidden
+the icon that may have been a stop on the way to the next slider. Without this
+attribute, a user would need to stop, listen and move past the picture which
+they may not be able to see.
+
+{% Aside 'gotchas' %}
+Ensure to cross browser test screenreader interactions.
+The original demo included `<label>` in the list of elements with
+`aria-hidden="true"`, but it's been since removed after [Twitter
+conversation](https://twitter.com/rob_dodson/status/1371859386210029568)
+revealed cross browser differences.
+{% endAside %}
+
+The SVG is a bunch of math, let's add a `<title>` element for a free mouse hover
+title and a human readable comment about what the math is creating:
+
+```html
+<svg viewBox="0 0 24 24">
+  <title>A note icon</title>
+  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+</svg>
+```
+
+Other than that, we've used enough clearly marked HTML, that the form tests
+really well across mouse, keyboard, video game controllers and screenreaders.
+
+## JavaScript
+
+I've [already covered](#track-styles) how the track fill color was being managed from JavaScript,
+so let's look at the `<form>` related JavaScript now:
+
+```js
+const form = document.querySelector('form');
+
+form.addEventListener('input', event => {
+  const formData = Object.fromEntries(new FormData(form));
+  console.table(formData);
+})
+```
+
+Everytime the form is interacted with and changed, the console logs the form as
+an object into a table for easy review before submitting to a server.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hFAyIOpOSdiczdf4AtIj.png",
+  alt="A screenshot of the console.table() results, where the form data is shown in a table",
+   width="800", height="285"
+%}
+
+## Conclusion
+
+Now that you know how I did it, how would you?! This makes for some fun
+component architecture! Who's going to make the 1st version with slots in their
+favorite framework? 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the [Community remixes](#community-remixes) section below!
+
+## Community remixes
+
+- [@tomayac](https://twitter.com/tomayac) with their style regarding the
+  hover area for the checkbox labels! This version has no hover gap between
+  elements: [demo](https://tomayac.github.io/gui-challenges/settings/dist/) and
+  [source](https://github.com/tomayac/gui-challenges).
diff --git a/src/site/content/en/blog/building-a-sidenav-component/index.md b/src/site/content/en/blog/building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..08008475f76
--- /dev/null
+++ b/src/site/content/en/blog/building-a-sidenav-component/index.md
@@ -0,0 +1,347 @@
+---
+layout: post
+title: Building a sidenav component
+subhead: A foundational overview of how to build a responsive slide out sidenav
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive slide out sidenav
+date: 2021-01-21
+hero: image/admin/Zo1KkESK9CfEIYpbWzap.jpg
+thumbnail: image/admin/pVZO6FsC9tF3H6QIWpY2.png
+codelabs: codelab-building-a-sidenav-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+In this post I want to share with you how I prototyped a Sidenav component for the web that
+is responsive, stateful, supports keyboard navigation, works with and without JavaScript,
+and works across browsers. Try the [demo](https://gui-challenges.web.app/sidenav/dist/).
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## Overview
+
+It's tough building a responsive navigation system. Some users will be on a keyboard,
+some will have powerful desktops, and some will visit from a small mobile device.
+Everyone visiting should be able to open and close the menu.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/desktop-demo-1080p.mp4">
+  </video>
+  <figcaption>
+    Desktop to mobile responsive layout demo
+  </figcaption>
+</figure>
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/mobile-demo-1080p.mp4">
+  </video>
+  <figcaption>
+    Light and dark theme down on iOS and Android
+  </figcaption>
+</figure>
+
+## Web Tactics
+
+In this component exploration I had the joy of combining a few critical web platform features:
+
+1. CSS [`:target`](#target-psuedo-class)
+2. CSS [grid](#grid-stack)
+3. CSS [transforms](#transforms)
+4. CSS Media Queries for viewport and user preference
+5. JS for `focus` [UX enhancements](#ux-enhancements)
+
+My solution has one sidebar and toggles only when at a "mobile" viewport of `540px` or less.
+`540px` will be our breakpoint for switching between the mobile interactive layout and the static desktop layout.
+
+### CSS `:target` pseudo-class {: #target-psuedo-class }
+
+One `<a>` link sets the url hash to `#sidenav-open` and the other to empty (`''`).
+Lastly, an element has the `id` to match the hash:
+
+```html
+<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
+
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<aside id="sidenav-open">
+  …
+</aside>
+```
+
+Clicking each of these links changes the hash state of our page URL,
+then with a pseudo-class I show and hide the sidenav:
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+  }
+
+  #sidenav-open:target {
+    visibility: visible;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/hash-change.mp4">
+  </video>
+</figure>
+
+### CSS Grid {: #grid-stacks }
+
+In the past, I only used absolute or fixed position
+sidenav layouts and components. Grid though, with its `grid-area` syntax,
+lets us assign multiple elements to the same row or column.
+
+#### Stacks
+
+The primary layout element `#sidenav-container` is a grid that creates 1 row and 2 columns,
+1 of each are named `stack`. When space is constrained, CSS assigns all of the `<main>` element's
+children to the same grid name, placing all elements into the same space, creating a stack.
+
+```css
+#sidenav-container {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 540px) {
+  #sidenav-container > * {
+    grid-area: stack;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </video>
+</figure>
+
+#### Menu backdrop
+
+The `<aside>` is the animating element that contains the side navigation. It has
+2 children: the navigation container `<nav>` named `[nav]` and a backdrop `<a>`
+named `[escape]`, which is used to close the menu.
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+Adjust `2fr` & `1fr` to find the ratio you like for the menu overlay and its negative space close button.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </video>
+  <figcaption>
+    A demo of what happens when you change the ratio.
+  </figcaption>
+</figure>
+
+### CSS 3D transforms & transitions {: #transforms }
+
+Our layout is now stacked at a mobile viewport size. Until I add some new styles,
+it's overlaying our article by default. Here's some UX I'm shooting for in this next section:
+
+- Animate open and close
+- Only animate with motion if the user is OK with that
+- Animate `visibility` so keyboard focus doesn't enter the offscreen element
+
+As I begin to implement motion animations, I want to start with accessibility top of mind.
+
+#### Accessible motion
+
+Not everyone will want a slide out motion experience. In our solution this preference
+is applied by adjusting a `--duration` CSS variable inside a media query. This media query value represents
+a user's operating system preference for motion (if available).
+
+```css
+#sidenav-open {
+  --duration: .6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidenav-open {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </video>
+  <figcaption>
+    A demo of the interaction with and without duration applied.
+  </figcaption>
+</figure>
+
+Now when our sidenav is sliding open and closed, if a user prefers reduced motion,
+I instantly move the element into view, maintaining state without motion.
+
+#### Transition, transform, translate
+
+##### Sidenav out (default)
+
+To set the default state of our sidenav on mobile to an offscreen state,
+I position the element with `transform: translateX(-110vw)`.
+
+Note, I added another `10vw` to the typical offscreen code of `-100vw`,
+to ensure the `box-shadow` of the sidenav doesn't peek into the main viewport when it's hidden.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+  }
+}
+```
+
+##### Sidenav in
+
+When the `#sidenav` element matches as `:target`, set the `translateX()` position to homebase `0`,
+and watch as CSS slides the element from its out position of `-110vw`, to its "in"
+position of `0` over `var(--duration)` when the URL hash is changed.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open:target {
+    visibility: visible;
+    transform: translateX(0);
+    transition:
+      transform var(--duration) var(--easeOutExpo);
+  }
+}
+```
+
+#### Transition visibility
+
+The goal now is to hide the menu from screenreaders when it's out,
+so systems don't put focus into an offscreen menu. I accomplish this by setting a
+visibility transition when the `:target` changes.
+
+- When going in, don't transition visibility; be visible right away so I can see the element slide in and accept focus.
+- When going out, transition visibility but delay it, so it flips to `hidden` at the end of the transition out.
+
+### Accessibility UX enhancements {: #ux-enhancements }
+
+#### Links
+
+This solution relies on changing the URL in order for the state to be managed.
+Naturally, the `<a>` element should be used here, and it gets some nice accessibility
+features for free. Let's adorn our interactive elements with labels clearly articulating intent.
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+  <svg>...</svg>
+</a>
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/keyboard-voiceover.mp4">
+  </video>
+  <figcaption>
+    A demo of the voiceover and keyboard interaction UX.
+  </figcaption>
+</figure>
+
+Now our primary interaction buttons clearly state their intent for both mouse and keyboard.
+
+#### `:is(:hover, :focus)`
+
+This handy CSS functional pseudo-selector lets us swiftly be inclusive
+with our hover styles by sharing them with focus as well.
+
+```css
+.hamburger:is(:hover, :focus) svg > line {
+  stroke: hsl(var(--brandHSL));
+}
+```
+
+#### Sprinkle on JavaScript
+
+##### Press `escape` to close
+
+The `Escape` key on your keyboard should close the menu right? Let's wire that up.
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', event => {
+  if (event.code === 'Escape') document.location.hash = '';
+});
+```
+
+##### Browser history
+
+In order to prevent the open and close interaction from stacking multiple
+entries into the browser history, add the following JavaScript inline to
+the close button:
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+```
+
+This will remove the URL history entry on close, making it as if the menu was
+never opened.
+
+##### Focus UX
+
+The next snippet helps us put focus on the open and close buttons after
+they open or close. I want to make toggling easy.
+
+```js
+sidenav.addEventListener('transitionend', e => {
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+      ? document.querySelector('#sidenav-close').focus()
+      : document.querySelector('#sidenav-button').focus();
+})
+```
+
+When the sidenav opens, focus the close button. When the sidenav closes,
+focus the open button. I do this by calling `focus()` on the element in JavaScript.
+
+### Conclusion
+
+Now that you know how I did it, how would you?! This makes for some fun component architecture!
+Who's going to make the 1st version with slots? 🙂
+
+Let's diversify our
+approaches and learn all the ways to build on the web. Create a [Glitch](https://glitch.com),
+[tweet me](https://twitter.com/argyleink) your version, and I'll add it to the
+[Community remixes](#community-remixes) section below.
+
+## Community remixes
+
+- [@_developit](https://twitter.com/_developit) with custom elements: [demo & code](https://glitch.com/edit/#!/app-drawer)
+- [@mayeedwin1](https://twitter.com/mayeedwin1) with HTML/CSS/JS: [demo & code](https://glitch.com/edit/#!/maye-gui-challenge)
+- [@a_nurella](https://twitter.com/a_nurella) with a Glitch Remix: [demo & code](https://glitch.com/edit/#!/sidenav-with-adam)
+- [@EvroMalarkey](https://twitter.com/EvroMalarkey) with HTML/CSS/JS: [demo & code](https://evromalarkey.github.io/scrollsnap-drawer/index.html)
diff --git a/src/site/content/en/blog/building-a-split-button-component/index.md b/src/site/content/en/blog/building-a-split-button-component/index.md
new file mode 100644
index 00000000000..c152d99f60c
--- /dev/null
+++ b/src/site/content/en/blog/building-a-split-button-component/index.md
@@ -0,0 +1,785 @@
+---
+layout: post
+title: Building a split-button component
+subhead: A foundational overview of how to build an accessible split-button component.
+authors:
+  - adamargyle
+description: A foundational overview of how to build an accessible split-button component.
+date: 2021-09-01
+updated: 2021-09-01
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/rVSie6kSTSiw8msPeBCk.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/kg9adsqjPM2EpzVZ1mZu.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build a split button .
+[Try the demo](https://gui-challenges.web.app/split-buttons/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/hgKYrc5vFlj096ZLn1ZW.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/split-buttons/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'Qcpru-fIgwk' %}
+
+## Overview
+
+[Split buttons](https://www.nngroup.com/articles/split-buttons/) are buttons
+that conceal a primary button and a list of additional buttons. They're useful
+for exposing a common action while nesting secondary, less frequently used
+actions until needed. A split button can be crucial to helping a busy design
+feel minimal. An advanced split button may even remember the last user action
+and promote it into the primary position.
+
+A common split button can be found in your email application. The primary action
+is send, but perhaps you can send later or save a draft instead:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/7D9MI9GmPhYAtFs83DDI.png",
+alt="An example split button as seen in an email application.",
+width="800", height="517" %}
+
+The shared action area is nice, since the user doesn't need to look around. They
+know that essential email actions are contained in the split button.
+
+### Parts
+
+Let's break down the essential parts of a split button before discussing their
+overall orchestration and final user experience.
+[VisBug](https://github.com/GoogleChromeLabs/ProjectVisBug)'s accessibility
+inspect tool is used here to help show a macro view of the component, surfacing
+aspects of the HTML, style and accessibility for each major part.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/URCIaZV3gyMvTiMjRYmK.png",
+alt="The HTML elements that make up the split button.", width="800", height="581" %}
+
+#### Top level split button container
+
+The highest level component is an inline flexbox, with a class of
+`gui-split-button`, containing the [primary action](#the-primary-action-button)
+and the [`.gui-popup-button`](#the-popup-toggle-button).
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SLjXwBPvsrEXBb1vcm6L.png",
+alt="The gui-split-button class inspected and showing the CSS properties used in this class.", width="800", height="581" %}
+
+#### The primary action button
+
+The initially visible and focusable `<button>` fits within the container with
+two matching corner shapes for
+[focus](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible),
+[hover](/learn/css/pseudo-classes/#hover) and
+[active](/learn/css/pseudo-classes/#active) interactions to
+appear contained within `.gui-split-button`.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/69gvxF4AfQoNki4pBtVb.png",
+alt="The inspector showing the CSS rules for <button>.", width="800", height="644" %}
+
+#### The popup toggle button
+
+The "popup button" support element is for activating and alluding to the list of
+secondary buttons. Notice it's not a `<button>` and it's not focusable. However,
+it is the positioning anchor for [`.gui-popup`](#the-popup-card) and host for `:focus-within` used
+to present the popup.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/p2R7pHvID9XR9JoHHzth.png",
+alt="The inspector showing the CSS rules for the class gui-popup-button.", width="800", height="490" %}
+
+#### The popup card
+
+This is a floating card child to its anchor
+[`.gui-popup-button`](#the-popup-toggle-button), positioned absolute and
+semantically wrapping the button list.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/LSeLIFhe7yuG9QoR1VM9.png",
+alt="The inspector showing the CSS rules for the class gui-popup", width="800", height="629" %}
+
+#### The secondary action(s)
+
+A focusable `<button>` with a slightly smaller font size than the [primary
+action button](#the-primary-action-button) features an icon and a complimentary
+style to the primary button.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/5GBSno8pMaNVRZJT7yxd.png",
+alt="The inspector showing the CSS rules for <button>.", width="800", height="679" %}
+
+### Custom properties
+
+The following variables assist in creating color harmony and a central place to
+modify values used throughout the component.
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+@custom-media --dark (prefers-color-scheme: dark);
+@custom-media --light (prefers-color-scheme: light);
+
+.gui-split-button {
+  --theme:             hsl(220 75% 50%);
+  --theme-hover:  hsl(220 75% 45%);
+  --theme-active:  hsl(220 75% 40%);
+  --theme-text:      hsl(220 75% 25%);
+  --theme-border: hsl(220 50% 75%);
+  --ontheme:         hsl(220 90% 98%);
+  --popupbg:         hsl(220 0% 100%);
+
+  --border: 1px solid var(--theme-border);
+  --radius: 6px;
+  --in-speed: 50ms;
+  --out-speed: 300ms;
+
+  @media (--dark) {
+    --theme:             hsl(220 50% 60%);
+    --theme-hover:  hsl(220 50% 65%);
+    --theme-active:  hsl(220 75% 70%);
+    --theme-text:      hsl(220 10% 85%);
+    --theme-border: hsl(220 20% 70%);
+    --ontheme:         hsl(220 90% 5%);
+    --popupbg:         hsl(220 10% 30%);
+  }
+}
+```
+
+{% Aside %} CSS [nesting](https://drafts.csswg.org/css-nesting-1/) and [custom
+media queries](https://www.w3.org/TR/mediaqueries-5/#custom-mq) are used with
+[PostCSS](https://github.com/postcss/postcss) to enable author time usage of
+"future" CSS features. {% endAside %}
+
+## Layouts and color
+
+### Markup
+
+The element begins as a `<div>` with a custom class name.
+
+```html
+<div class="gui-split-button"></div>
+```
+
+Add the primary button and the `.gui-popup-button` elements.
+
+```html/1-2
+<div class="gui-split-button">
+  <button>Send</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions"></span>
+</div>
+```
+
+Notice the aria attributes `aria-haspopup` and `aria-expanded`. These cues are
+critical for screen readers to be aware of the capability and state of split
+button experience. The `title` attribute is helpful for everyone.
+
+Add an `<svg>` icon and the `.gui-popup` container element.
+
+```html/3-6
+<div class="gui-split-button">
+  <button>Send</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup"></ul>
+  </span>
+</div>
+```
+
+For straightforward popup placement, `.gui-popup` is a child to the button that
+expands it. The only catch with this strategy is the `.gui-split-button`
+container can't use `overflow: hidden`, as it will clip the popup from being
+visually present.
+
+A `<ul>` filled with `<li><button>` contents will announce itself as a "button
+list" to screen readers, which is precisely the interface being presented.
+
+```html/7-15
+<div class="gui-split-button">
+  <button>Send</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup">
+      <li>
+        <button>Schedule for later</button>
+      </li>
+      <li>
+        <button>Delete</button>
+      </li>
+      <li>
+        <button>Save draft</button>
+      </li>
+    </ul>
+  </span>
+</div>
+```
+
+For flair and to have fun with color, I've added icons to the secondary buttons
+from [https://heroicons.com](https://heroicons.com). Icons are optional for both
+the primary and secondary buttons.
+
+```html/8-10,14-16,20-22
+<div class="gui-split-button">
+  <button>Send</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup">
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        Schedule for later
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+        Delete
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+        </svg>
+        Save draft
+      </button></li>
+    </ul>
+  </span>
+</div>
+```
+
+### Styles
+
+With HTML and content in place, styles are ready to provide color and layout.
+
+#### Styling the split button container
+
+An `inline-flex` display type works well for this wrapping component as it
+should fit inline with other split buttons, actions or elements.
+
+```css
+.gui-split-button {
+  display: inline-flex;
+  border-radius: var(--radius);
+  background: var(--theme);
+  color: var(--ontheme);
+  fill: var(--ontheme);
+
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/a55qj9gU1qmoTlnbQvDe.png",
+alt="The split button.", width="800", height="241" %}
+
+#### The `<button>` styling
+
+Buttons are very good at disguising how much code is required. You might need to
+undo or replace browser default styles, but you'll also need to enforce some
+inheritance, add interaction states and adapt to various user preferences and
+input types. Button styles add up quickly.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/psxWs3LOw3uRceD2FzFi.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+These buttons are different from regular buttons because they share a background
+with a parent element. Usually, a button owns its background and text color.
+These, though, share it, and only apply their own background on interaction.
+
+```css
+.gui-split-button button {
+  cursor: pointer;
+  appearance: none;
+  background: none;
+  border: none;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 1ch;
+  white-space: nowrap;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+
+  padding-block: 1.25ch;
+  padding-inline: 2.5ch;
+
+  color: var(--ontheme);
+  outline-color: var(--theme);
+  outline-offset: -5px;
+}
+```
+
+Add interaction states with a few CSS
+[pseudo-classes](/learn/css/pseudo-classes/) and use of matching
+custom properties for the state:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/llQwSgee5Y2PtoiteLAx.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+.gui-split-button button {
+  …
+
+  &:is(:hover, :focus-visible) {
+    background: var(--theme-hover);
+    color: var(--ontheme);
+
+    & > svg {
+      stroke: currentColor;
+      fill: none;
+    }
+  }
+
+  &:active {
+    background: var(--theme-active);
+  }
+}
+```
+
+The primary button needs a few special styles to complete the design effect:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q05zCTFPNQ5QDCR6R1q2.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+.gui-split-button > button {
+  border-end-start-radius: var(--radius);
+  border-start-start-radius: var(--radius);
+
+  & > svg {
+    fill: none;
+    stroke: var(--ontheme);
+  }
+}
+```
+
+Lastly, for some flair, the light theme button and icon get a
+[shadow](/learn/css/shadows/):
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/8qkrdaVnJowC5Uvuqncw.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+.gui-split-button {
+  @media (--light) {
+    & > button,
+    & button:is(:focus-visible, :hover) {
+      text-shadow: 0 1px 0 var(--theme-active);
+    }
+    & > .gui-popup-button > svg,
+    & button:is(:focus-visible, :hover) > svg {
+      filter: drop-shadow(0 1px 0 var(--theme-active));
+    }
+  }
+}
+```
+
+A great button has paid attention to the microinteractions and tiny details.
+
+##### A note about `:focus-visible`
+
+Notice how the button styles use `:focus-visible` instead of `:focus`. `:focus`
+is a crucial touch to making an accessible user interface but it does have one
+downfall: it's not intelligent about whether or not the user needs to see it or
+not, it'll apply for any focus.
+
+The video below attempts to break this microinteraction down, to show how
+`:focus-visible` is an intelligent alternative.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D2AqjpvafPAPB3CMXkhd.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Styling the popup button
+
+A `4ch` flexbox for centering an icon and anchoring a popup button list. Like
+the primary button, it is transparent until otherwise hovered or interacted
+with, and stretched to fill.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/fiSlBJyM8x52b5msQBUY.png",
+alt="The arrow part of the split button used to trigger the popup.", width="800", height="241" %}
+
+```css
+.gui-popup-button {
+  inline-size: 4ch;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-inline-start: var(--border);
+  border-start-end-radius: var(--radius);
+  border-end-end-radius: var(--radius);
+}
+```
+
+Layer in hover, focus and active states with [CSS
+Nesting](https://drafts.csswg.org/css-nesting-1/) and the
+[`:is()`](/css-is-and-where/) functional selector:
+
+```css
+.gui-popup-button {
+  …
+
+  &:is(:hover,:focus-within) {
+    background: var(--theme-hover);
+  }
+
+  /* fixes iOS trying to be helpful */
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    background: var(--theme-active);
+  }
+}
+```
+
+**These styles are the primary hook for showing and hiding the popup.** When the
+`.gui-popup-button` has `focus` on any of its children, set `opacity`, position
+and `pointer-events`, on the icon and popup.
+
+```css
+.gui-popup-button {
+  …
+
+  &:focus-within {
+    & > svg {
+      transition-duration: var(--in-speed);
+      transform: rotateZ(.5turn);
+    }
+    & > .gui-popup {
+      transition-duration: var(--in-speed);
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+  }
+}
+```
+
+With the in and out styles complete, the last piece is to **conditionally
+transition transforms** depending on the user's motion preference:
+
+```css
+.gui-popup-button {
+  …
+
+  @media (--motionOK) {
+    & > svg {
+      transition: transform var(--out-speed) ease;
+    }
+    & > .gui-popup {
+      transform: translateY(5px);
+
+      transition:
+        opacity var(--out-speed) ease,
+        transform var(--out-speed) ease;
+    }
+  }
+}
+```
+
+A keen eye on the code would notice **opacity is still transitioned** for users
+who prefer reduced motion.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/bsOaOSHe8ZZl0vnZAtmr.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+{% Aside "caution" %}
+Reduced motion doesn't mean no motion.
+{% endAside %}
+
+#### Styling the popup
+
+The `.gui-popup` element is a floating card button list using custom properties
+and relative units to be subtly smaller, interactively matched with the primary
+button, and on brand with its use of color. Notice the icons have less contrast,
+are thinner, and the shadow has a hint of brand blue to it. Like with buttons,
+strong UI and UX is a result of these little details stacking up.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/D7RWfwJW25G3kuzPSnlz.png",
+alt="A floating card element.", width="448", height="422" %}
+
+```css
+.gui-popup {
+  --shadow: 220 70% 15%;
+  --shadow-strength: 1%;
+
+  opacity: 0;
+  pointer-events: none;
+
+  position: absolute;
+  bottom: 80%;
+  left: -1.5ch;
+
+  list-style-type: none;
+  background: var(--popupbg);
+  color: var(--theme-text);
+  padding-inline: 0;
+  padding-block: .5ch;
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-size: .9em;
+  transition: opacity var(--out-speed) ease;
+
+  box-shadow:
+    0 -2px 5px 0 hsl(var(--shadow) / calc(var(--shadow-strength) + 5%)),
+    0 1px 1px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 10%)),
+    0 2px 2px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 12%)),
+    0 5px 5px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 13%)),
+    0 9px 9px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 14%)),
+    0 16px 16px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 20%))
+  ;
+}
+```
+
+The icons and buttons are given brand colors to style nicely within each dark
+and light themed card:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ddCiS1PqDtjDRESUG4U1.png",
+alt="Links and icons for checkout, Quick Pay, and Save for later.", width="452", height="422" %}
+
+```css
+.gui-popup {
+  …
+
+  & svg {
+    fill: var(--popupbg);
+    stroke: var(--theme);
+
+    @media (prefers-color-scheme: dark) {
+      stroke: var(--theme-border);
+    }
+  }
+
+  & button {
+    color: var(--theme-text);
+    width: 100%;
+  }
+}
+```
+
+The dark theme popup has text and icon shadow additions, plus a slightly more
+intense box shadow:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/4vOdW4OD1i4uNRQdTWH5.png",
+alt="The popup in the dark theme.", width="434", height="412" %}
+
+```css
+.gui-popup {
+  …
+
+  @media (--dark) {
+    --shadow-strength: 5%;
+    --shadow: 220 3% 2%;
+
+    & button:not(:focus-visible, :hover) {
+      text-shadow: 0 1px 0 var(--ontheme);
+    }
+
+    & button:not(:focus-visible, :hover) > svg {
+      filter: drop-shadow(0 1px 0 var(--ontheme));
+    }
+  }
+}
+```
+
+#### Generic `<svg>` icon styles
+
+All icons are relatively sized to the button `font-size` they're used within by
+using the [`ch`](/learn/css/sizing/#relative-lengths) unit as the
+`inline-size`. Each is also given some styles to help outline icons soft and
+smooth.
+
+```css
+.gui-split-button svg {
+  inline-size: 2ch;
+  box-sizing: content-box;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2px;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/2vJRCeIhxVitT79q78RR.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Right-to-left layout
+
+[Logical properties](/learn/css/logical-properties/) do all the complex work.
+Here's the list of logical properties used:
+- `display: inline-flex` creates an inline flex element.
+- `padding-block` and `padding-inline` as a pair, instead of `padding`
+  shorthand, get the benefits of padding the logical sides.
+- `border-end-start-radius` and
+  [friends](https://drafts.csswg.org/css-logical/#border-radius-properties) will
+  round corners based on document direction.
+- `inline-size` rather than `width` ensures the size isn't tied to physical dimensions.
+- `border-inline-start` adds a border to the start, which might be on the right or the left depending on script direction.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/lNn1KXfw1GprPJa9RFHO.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+{% Aside 'gotchas' %}
+The popup element is positioned with `left` and `top` and
+would need to be adjusted for writing modes like
+[`vertical-rl`](https://developer.mozilla.org/docs/Web/CSS/writing-mode).
+{% endAside %}
+
+## JavaScript
+
+Nearly all of the following JavaScript is to enhance accessibility. Two of my
+helper libraries are used to make the tasks a little easier.
+[BlingBlingJS](https://www.npmjs.com/package/blingblingjs) is used for succinct
+DOM queries and easy event listener setup, while
+[roving-ux](https://www.npmjs.com/package/roving-ux) helps facilitate accessible
+keyboard and gamepad interactions for the popup.
+
+```js
+import $ from 'blingblingjs'
+import {rovingIndex} from 'roving-ux'
+
+const splitButtons = $('.gui-split-button')
+const popupButtons = $('.gui-popup-button')
+```
+
+With the above libraries imported and the elements selected and saved into
+variables, upgrading the experience is a few functions away from being complete.
+
+### Roving index
+
+When a keyboard or screen reader focuses the `.gui-popup-button`, we want to
+forward the focus into the first (or most recently focused) button in the
+`.gui-popup`. The library helps us do this with the `element` and `target`
+parameters.
+
+```js
+popupButtons.forEach(element =>
+  rovingIndex({
+    element,
+    target: 'button',
+  }))
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nlLgOPtwb4igmNEWxbg1.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The element now passes focus to the target `<button>` children and enables
+standard arrow key navigation to browse options.
+
+### Toggling `aria-expanded`
+
+While it's visually apparent that a popup is showing and hiding, a screen reader needs more than visual cues. JavaScript is used here to compliment the CSS driven `:focus-within` interaction by toggling a screen reader appropriate attribute.
+
+```js
+popupButtons.on('focusin', e => {
+  e.currentTarget.setAttribute('aria-expanded', true)
+})
+
+popupButtons.on('focusout', e => {
+  e.currentTarget.setAttribute('aria-expanded', false)
+})
+```
+
+### Enabling the `Escape` key
+
+The user's focus has been intentionally sent to a trap, which means we need to
+provide a way to leave. The most common way is to allow using the `Escape` key.
+To do so, watch for keypresses on the popup button, since any keyboard events on
+children will bubble up to this parent.
+
+```js
+popupButtons.on('keyup', e => {
+  if (e.code === 'Escape')
+    e.target.blur()
+})
+```
+
+If the popup button sees any `Escape` key presses, it removes focus from itself
+with
+[`blur()`](https://developer.mozilla.org/docs/Web/API/HTMLElement/blur).
+
+### Split button clicks
+
+Finally, if the user clicks, taps, or keyboard interacts with the buttons, the
+application needs to perform the appropriate action. Event bubbling is used
+again here, but this time on the `.gui-split-button` container, to catch button
+clicks from a child popup or the primary action.
+
+```js
+splitButtons.on('click', event => {
+  if (event.target.nodeName !== 'BUTTON') return
+  console.info(event.target.innerText)
+})
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/gpHoUsZLgIRlDBA2127n.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [Codepen](https://codepen.io/joosts/pen/BadJxXo) by [Joost van der Schee](https://twitter.com/jhvanderschee)
\ No newline at end of file
diff --git a/src/site/content/en/blog/building-a-stories-component/index.md b/src/site/content/en/blog/building-a-stories-component/index.md
new file mode 100644
index 00000000000..92d04d029e8
--- /dev/null
+++ b/src/site/content/en/blog/building-a-stories-component/index.md
@@ -0,0 +1,338 @@
+---
+layout: post
+title: Building a Stories component
+# TODO(kayce): Rename URL to match the title
+subhead: A foundational overview of how to build an experience similar to Instagram Stories on the web.
+authors:
+  - adamargyle
+description: A foundational overview of how to build an experience similar to Instagram Stories on the web.
+date: 2020-11-25
+hero: image/admin/OghwTxMrgwyEpzqQeuCa.jpg
+thumbnail: image/admin/7FsH2ngtBgEZsXVGSv0q.jpg
+codelabs: codelab-building-a-stories-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+In this post I want to share thinking on building a Stories component for
+the web that is responsive, supports keyboard navigation, and works across
+browsers.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <!-- <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.webm" type="video/webm"> -->
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/stories-desktop-demo.mp4">
+  </video>
+  <figcaption>
+    <a href="https://gui-challenges-stories.glitch.me/">Demo</a>
+  </figcaption>
+</figure>
+
+If you would prefer a hands-on demonstration of building this Stories component yourself,
+check out the [Stories component codelab](/codelab-building-a-stories-component).
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'PzvdREGR0Xw' %}
+
+## Overview
+
+Two popular examples of the Stories UX are Snapchat Stories and Instagram Stories (not to mention fleets).
+In general UX terms, Stories are usually a mobile-only, tap-centric pattern for navigating
+multiple subscriptions. For example, on Instagram, users open a friend's story
+and go through the pictures in it. They generally do this many friends at a
+time. By tapping on the right side of the device, a user skips ahead to that friend's
+next story. By swiping right, a user skips ahead to a different friend.
+A Story component is fairly similar to a carousel, but allows navigating a
+multi-dimensional array as opposed to a single-dimensional array. It's as if there's a carousel inside
+each carousel. 🤯
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yVm8NC0TiAsl6hcDxys.png", alt="Visualized multi-dimensional array using cards. Left to right is a stack of purple borders cards, and inside each card is 1-many cyan bordered cards. List in a list.", width="716", height="255" %}
+  <figcaption>
+    <span style="width: 1rem; height: 1rem; background: #EB00FF; display: inline-block; border-radius: 3px; position: relative; top: .2em;"></span> 1st carousel of friends
+    <br><span style="width: 1rem; height: 1rem; background: #00D8FF; display: inline-block; border-radius: 3px; position: relative; top: .2em;"></span> 2nd "stacked" carousel of stories
+    <br>👍 List in a list, aka: a multi-dimensional array
+  </figcaption>
+</figure>
+
+## Picking the right tools for the job {: #features }
+
+All in all I found this component pretty straightforward to build, thanks to a few
+critical web platform features. Let's cover them!
+
+### CSS Grid {: #grid }
+
+Our layout turned out to be no tall order for CSS Grid as it's equipped with some
+powerful ways to wrangle content.
+
+#### Friends layout
+
+Our primary `.stories` component wrapper is a mobile-first horizontal scrollview:
+
+```css/4-6
+.stories {
+  inline-size: 100vw;
+  block-size: 100vh;
+
+  display: grid;
+  grid: 1fr / auto-flow 100%;
+  gap: 1ch;
+
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  touch-action: pan-x;
+}
+
+/* desktop constraint */
+@media (hover: hover) and (min-width: 480px) {
+  max-inline-size: 480px;
+  max-block-size: 848px;
+}
+```
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/stories-overflow-columns.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/stories-overflow-columns.mp4">
+  </video>
+  <figcaption>
+    Using Chrome DevTools'
+    <a href="https://developer.chrome.com/docs/devtools/device-mode/">Device Mode</a>
+    to highlight the columns created by Grid
+  </figcaption>
+</figure>
+
+Let's breakdown that `grid` layout:
+
+* We explicitly fill the viewport on mobile with `100vh` and `100vw` and constrain the size on desktop
+* `/` separates our row and column templates
+* `auto-flow` translates to [`grid-auto-flow: column`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow)
+* The autoflow template is `100%`, which in this case is whatever the scroll window width is
+
+{% Aside %}
+  Note that the location of the `/` separator relative to `auto-flow` is important.
+  If `auto-flow` came before `/` it would be shorthand for `grid-auto-flow: row`.
+{% endAside %}
+
+On a mobile phone, think of this like the row size being the viewport height and
+each column being the viewport width. Continuing with the Snapchat Stories and
+Instagram Stories example, each column will be a friend's story. We want friends
+stories to continue outside of the viewport so we have somewhere to scroll to.
+Grid will make however many columns it needs to layout your HTML for each friend
+story, creating a dynamic and responsive scrolling container for us. Grid
+enabled us to centralize the whole effect.
+
+#### Stacking
+
+For each friend we need their stories in a pagination-ready state.
+In preparation for animation and other fun patterns, I chose a stack.
+When I say stack, I mean like you're looking down on a
+sandwich, not like you're looking from the side.
+
+With CSS grid, we can define a single-cell grid (i.e. a square), where the rows
+and columns share an alias (`[story]`), and then each child gets assigned to that
+aliased single-cell space:
+
+
+```css/1-2
+.user {
+  display: grid;
+  grid: [story] 1fr / [story] 1fr;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+```
+
+```css/1-1
+.story {
+  grid-area: story;
+  background-size: cover;
+  …
+}
+```
+
+This puts our HTML in control of the stacking order and also keeps all elements
+in flow. Notice how we didn't need to do anything with `absolute` positioning or `z-index` and
+we didn't need to box correct with `height: 100%` or `width: 100%`. The parent grid
+already defined the size of the story picture viewport, so none of these story components
+needed to be told to fill it!
+
+### CSS Scroll Snap Points {: #scroll-snap-points}
+
+The [CSS Scroll Snap Points spec](https://www.w3.org/TR/css-scroll-snap-1/) makes it
+a cinch to lock elements into the viewport on scroll. Before these CSS properties existed,
+you had to use JavaScript, and it was… tricky, to say the least. Check out
+[Introducing CSS Scroll Snap Points](https://css-tricks.com/introducing-css-scroll-snap-points/)
+by Sarah Drasner for a great breakdown of how to use them.
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <!-- <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.webm" type="video/webm"> -->
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/scroll-snap-example.mp4">
+  </video>
+  <figcaption>
+    Horizontal scrolling without and with <code>scroll-snap-points</code> styles.
+    Without it, users can free scroll as normal. With it, the browser rests gently on each item.
+  </figcaption>
+</figure>
+
+<div class="switcher">
+{% Compare 'better', 'parent' %}
+```css/4-5
+.stories {
+  display: grid;
+  grid: 1fr / auto-flow 100%;
+  gap: 1ch;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  touch-action: pan-x;
+}
+```
+
+{% CompareCaption %}
+  Parent with overscroll defines snap behavior.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'child' %}
+```css/3-4
+.user {
+  display: grid;
+  grid: [story] 1fr / [story] 1fr;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+```
+
+{% CompareCaption %}
+  Children opt into being a snap target.
+{% endCompareCaption %}
+
+{% endCompare %}
+</div>
+
+I chose Scroll Snap Points for a few reasons:
+
+* **Free accessibility**. The Scroll Snap Points spec states that pressing the
+  <kbd>Left Arrow</kbd> and <kbd>Right Arrow</kbd> keys should move through the snap points
+  by default.
+* **A growing spec**. The Scroll Snap Points spec is getting new features and improvements
+  all the time, which means that my Stories component will probably only get better from
+  here on out.
+* **Ease of implementation**. Scroll Snap Points are practically built for the
+  touch-centric horizontal-pagination use case.
+* **Free platform-style inertia**. Every platform will scroll and rest in its style, as opposed to
+  normalized inertia which can have an uncanny scrolling and resting style.
+
+## Cross-browser compatibility {: #compatibility }
+
+<!-- TODO(kayce): Clear up what browsers were tested on what operating systems. -->
+
+We tested on Opera, Firefox, Safari, and Chrome, plus Android and iOS. Here's
+a brief rundown of the web features where we found differences in capabilities and support.
+
+{% Aside 'success' %}
+  All of the features chosen were supported and none were buggy.
+{% endAside %}
+
+We did though have some CSS not apply, so some platforms are currently missing out on UX
+optimizations. I did enjoy not needing to manage these features and feel confident
+that they'll eventually reach other browsers and platforms.
+
+### `scroll-snap-stop`
+
+Carousels were one of the major UX use cases that prompted the creation of the
+CSS Scroll Snap Points spec. Unlike Stories, a carousel doesn't always need to stop
+on each image after a user interacts with it. It might be fine or encouraged to
+quickly cycle through the carousel. Stories, on the other hand, are best navigated one-by-one,
+and that's exactly what `scroll-snap-stop` provides.
+
+```css/2
+.user {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+```
+
+At the time of writing this post, `scroll-snap-stop` is only supported on Chromium-based
+browsers. Check out
+[Browser compatibility](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop#Browser_compatibility)
+for updates. It's not a blocker, though. It just means that on unsupported browsers
+users can accidentally skip a friend. So users will just have to be more careful, or
+we'll need to write JavaScript to ensure that a skipped friend isn't marked as viewed.
+
+Read more in [the
+spec](https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-stop) if you're
+interested.
+
+### `overscroll-behavior`
+
+<!-- TODO(kayce): Video would be helpful. -->
+
+Have you ever been scrolling through a modal when all of a sudden you
+start scrolling the content behind the modal?
+[`overscroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior)
+lets the developer trap that scroll and never let it
+leave. It's nice for all sorts of occasions. My Stories component uses it
+to prevent additional swipes and scrolling gestures from leaving the
+component.
+
+```css
+.stories {
+  overflow-x: auto;
+  overscroll-behavior: contain;
+}
+```
+
+Safari and Opera were the 2 browsers that didn't
+[support](https://caniuse.com/#search=overscroll-behavior) this, and that's
+totally OK. Those users will get an overscroll experience like they're used to
+and may never notice this enhancement. I'm personally a big fan and like
+including it as part of nearly every overscroll feature I implement. It's a
+harmless addition that can only lead to improved UX.
+
+<!-- TODO(kayce): Describe what Safari and Opera users will see. -->
+
+### `scrollIntoView({behavior: 'smooth'})` {: #scrollintoview }
+
+When a user taps or clicks and has reached the end of a friend's set of stories,
+it's time to move to the next friend in the scroll snap point set. With
+JavaScript, we were able to reference the next friend and request for it to be
+scrolled into view. The support for the basics of this are great; every browser
+scrolled it into view. But, not every browser did it `'smooth'`. This just means
+it's scrolled into view instead of snapped.
+
+```js
+element.scrollIntoView({
+  behavior: 'smooth'
+})
+```
+
+Safari was the only browser not to support `behavior: 'smooth'` here. Check out
+[Browser compatibility](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView#Browser_compatibility)
+for updates.
+
+## Hands-on
+
+Now that you know how I did it, how would you?! Let's diversify our
+approaches and learn all the ways to build on the web. Create a [Glitch](https://glitch.com),
+[tweet me](https://twitter.com/argyleink) your version, and I'll add it to
+the [Community remixes](#community-remixes) section below.
+
+## Community remixes {: #remixes }
+
+<!-- TODO(kayce): Add a warning that this is community content that may change over time. -->
+
+- [@geoffrich_](https://twitter.com/geoffrich_) with [Svelte](https://svelte.dev): [demo](https://svelte-stories.glitch.me) & [code](https://github.com/geoffrich/svelte-stories)
+- [@GauteMeekOlsen](https://twitter.com/GauteMeekOlsen) with [Vue](https://vuejs.org/): [demo + code](https://stackblitz.com/edit/stories)
+- [@AnaestheticsApp](https://twitter.com/AnaestheticsApp) with [Lit](https://lit-element.polymer-project.org/): [demo](https://lit-stories.glitch.me/) & [code](https://github.com/anaestheticsapp/web-stories)
diff --git a/src/site/content/en/blog/building-a-switch-component/index.md b/src/site/content/en/blog/building-a-switch-component/index.md
new file mode 100644
index 00000000000..a8cc7c2da0c
--- /dev/null
+++ b/src/site/content/en/blog/building-a-switch-component/index.md
@@ -0,0 +1,887 @@
+---
+layout: post
+title: Building a switch component
+subhead: A foundational overview of how to build a responsive and accessible switch component.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a responsive and accessible switch component.
+date: 2021-08-11
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/9enjDnqrgdzS6lUOWAGO.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/gNjyaiykXSBUPVhSOinL.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build switch components.
+[Try the demo](https://gui-challenges.web.app/switch/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nzABBfSBoy73cyYD60WR.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/switch/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube '_KqccADghcA' %}
+
+## Overview
+
+A [switch](https://w3c.github.io/aria/#switch) functions similar to a checkbox
+but explicitly represents boolean on and off states.
+
+This demo uses `<input type="checkbox" role="switch">` for the majority of its
+functionality, which has the advantage of not needing CSS or JavaScript to be
+fully functional and accessible. Loading CSS brings support for right-to-left
+languages, verticality, animation and more. Loading JavaScript makes the switch
+draggable and tangible.
+
+### Custom properties
+
+The following variables represent the various parts of the switch and their
+options. As the top-level class, `.gui-switch` contains custom properties used
+throughout the component children, and entry points for centralized
+customization.
+
+#### Track
+The length (`--track-size`), padding, and two colors:
+
+```css
+.gui-switch {
+  --track-size: calc(var(--thumb-size) * 2);
+  --track-padding: 2px;
+
+  --track-inactive: hsl(80 0% 80%);
+  --track-active: hsl(80 60% 45%);
+
+  --track-color-inactive: var(--track-inactive);
+  --track-color-active: var(--track-active);
+
+  @media (prefers-color-scheme: dark) {
+    --track-inactive: hsl(80 0% 35%);
+    --track-active: hsl(80 60% 60%);
+  }
+}
+```
+#### Thumb
+
+The size, background color, and interaction highlight colors:
+
+```css
+.gui-switch {
+  --thumb-size: 2rem;
+  --thumb: hsl(0 0% 100%);
+  --thumb-highlight: hsl(0 0% 0% / 25%);
+
+  --thumb-color: var(--thumb);
+  --thumb-color-highlight: var(--thumb-highlight);
+
+  @media (prefers-color-scheme: dark) {
+    --thumb: hsl(0 0% 5%);
+    --thumb-highlight: hsl(0 0% 100% / 25%);
+  }
+}
+```
+
+#### Reduced motion
+
+To add a clear alias and reduce repetition, a reduced motion preference user
+media query can be put into a custom property with the [PostCSS
+plugin](https://github.com/postcss/postcss-custom-media) based on this [draft
+spec in Media Queries
+5](https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media):
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+```
+
+### Markup
+
+I chose to wrap my `<input type="checkbox" role="switch">` element with a
+`<label>`, bundling their relationship to avoid checkbox and label association
+ambiguity, while giving the user the ability to interact with the label to
+toggle the input.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hRnaoi1lcNmpzizuUUzm.png", alt="A
+natural, unstyled label and checkbox.", width="216",
+height="80" %}
+
+```html
+<label for="switch" class="gui-switch">
+  Label text
+  <input type="checkbox" role="switch" id="switch">
+</label>
+```
+
+`<input type="checkbox">` comes prebuilt with an
+[API](https://developer.mozilla.org/docs/Web/HTML/Element/input/checkbox)
+and [state](https://developer.mozilla.org/docs/Web/CSS/:checked). The
+browser manages the
+[`checked`](https://developer.mozilla.org/docs/Web/HTML/Element/input/checkbox#checked)
+property and [input
+events](https://developer.mozilla.org/docs/Web/API/HTMLElement#input_events)
+such as `oninput`and `onchanged`.
+
+## Layouts
+
+[Flexbox](/learn/css/flexbox/),
+[grid](/learn/css/grid/), and [custom
+properties](https://developer.mozilla.org/docs/Web/CSS/--*) are critical
+in maintaining the styles of this component. They centralize values, give names
+to otherwise ambiguous calculations or areas, and enable a small custom property
+API for easy component customizations.
+
+### `.gui-switch`
+
+The top-level layout for the switch is flexbox. The class `.gui-switch` contains
+the private and public custom properties the children use to compute their
+layouts.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/aIpui6HjdmtoELmVX59U.png",
+alt="Flexbox DevTools overlaying a horizontal label and switch, showing their layout
+distribution of space.", width="746", height="218" %}
+
+```css
+.gui-switch {
+  display: flex;
+  align-items: center;
+  gap: 2ch;
+  justify-content: space-between;
+}
+```
+
+Extending and modifying the flexbox layout is like changing any flexbox layout.
+For example, to put labels above or below a switch, or to change the
+`flex-direction`:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q9ouS16fND5xcqY14YVh.png",
+alt="Flexbox DevTools overlaying a vertical label and switch.", width="486",
+height="254" %}
+
+```html
+<label for="light-switch" class="gui-switch" style="flex-direction: column">
+  Default
+  <input type="checkbox" role="switch" id="light-switch">
+</label>
+```
+
+### Track
+
+The checkbox input is styled as a switch track by removing its normal
+`appearance: checkbox` and supplying its own size instead:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Ai9vbILT66rxmVsKgmoJ.png",
+alt="Grid DevTools overlaying the switch track, showing the named grid track
+areas with the name 'track'.", width="272", height="182" %}
+
+```css
+.gui-switch > input {
+  appearance: none;
+
+  inline-size: var(--track-size);
+  block-size: var(--thumb-size);
+  padding: var(--track-padding);
+
+  flex-shrink: 0;
+  display: grid;
+  align-items: center;
+  grid: [track] 1fr / [track] 1fr;
+}
+```
+
+The track also creates a one by one single cell grid track area for a thumb to
+claim.
+
+### Thumb
+
+The style `appearance: none` also removes the visual checkmark supplied by the
+browser. This component uses a
+[pseudo-element](/learn/css/pseudo-elements/) and the `:checked`
+[pseudo-class](/learn/css/pseudo-classes/) on the input to
+replace this visual indicator.
+
+The thumb is a pseudo-element child attached to the `input[type="checkbox"]` and
+stacks on top of the track instead of below it by claiming the grid area
+`track`:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/THV6KoJTUIBfSFntzcG1.png",
+alt="DevTools showing the pseudo-element thumb as positioned inside a CSS grid.",
+width="554", height="196" %}
+
+```css
+.gui-switch > input::before {
+  content: "";
+  grid-area: track;
+  inline-size: var(--thumb-size);
+  block-size: var(--thumb-size);
+}
+```
+
+{% Aside 'warning' %}
+Not all inputs can have pseudo-elements,
+[learn more here](https://webplatform.news/issues/2020-08-26).
+{% endAside %}
+
+## Styles
+
+Custom properties enable a versatile switch component that adapts to color
+schemes, right-to-left languages and motion preferences.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/kct3QcQiOyY618trAkYl.png",
+alt="A side by side comparison of the light and dark theme for the switch and its
+states.", width="800", height="425" %}
+
+### Touch interaction styles
+
+On mobile, browsers add tap highlights and text selection features to labels and
+inputs. These negatively affected the style and visual interaction feedback that
+this switch needed. With a few lines of CSS I can remove those effects and add
+my own `cursor: pointer` style:
+
+```css
+.gui-switch {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/bc6ocZIoezgR9tGXaLuC.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+It's not always advisable to remove those styles, as they can be valuable visual
+interaction feedback. Be sure to provide custom alternatives if you remove them.
+
+### Track
+
+This element's styles are mostly about its shape and color, which it accesses
+from the parent `.gui-switch` via the
+[cascade](/learn/css/the-cascade/).
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DlRcU2fRFUNykS8mtIgZ.png",
+alt="The switch variants with custom track sizes and colors.",
+width="768", height="630" %}
+
+```css
+.gui-switch > input {
+  appearance: none;
+  border: none;
+  outline-offset: 5px;
+  box-sizing: content-box;
+
+  padding: var(--track-padding);
+  background: var(--track-color-inactive);
+  inline-size: var(--track-size);
+  block-size: var(--thumb-size);
+  border-radius: var(--track-size);
+}
+```
+
+A wide variety of customization options for the switch track come from four
+custom properties. `border: none` is added since `appearance: none` doesn't
+remove the borders from the checkbox on all browsers.
+
+### Thumb
+The thumb element is already on the right `track` but needs circle styles:
+
+```css
+.gui-switch > input::before {
+  background: var(--thumb-color);
+  border-radius: 50%;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/2XLIMU0IzH9oHLfUso65.png",
+alt="DevTools shown highlighting the circle thumb pseudo-element.", width="504",
+height="208" %}
+
+#### Interaction
+
+Use custom properties to prepare for interactions which will show hover
+highlights and thumb position changes. The [user's preference is also
+checked](/prefers-reduced-motion/) before transitioning the
+motion or hover highlight styles.
+
+```css
+.gui-switch > input::before {
+  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
+
+  @media (--motionOK) { & {
+    transition:
+      transform var(--thumb-transition-duration) ease,
+      box-shadow .25s ease;
+  }}
+}
+```
+
+### Thumb position
+
+Custom properties provide a single source mechanism for positioning the thumb in
+the track. At our disposal are the track and thumb sizes which we'll use in
+calculations to keep the thumb properly offset and between within the track:
+`0%` and `100%`.
+
+The `input` element owns the position variable `--thumb-position`, and the thumb
+pseudo element uses it as a `translateX` position:
+
+```css
+.gui-switch > input {
+  --thumb-position: 0%;
+}
+
+.gui-switch > input::before {
+  transform: translateX(var(--thumb-position));
+}
+```
+
+We're now free to change `--thumb-position` from CSS and the pseudo-classes
+provided on checkbox elements. Since we conditionally set `transition: transform
+var(--thumb-transition-duration) ease` earlier on this element, these changes
+may animate when changed:
+
+```css
+/* positioned at the end of the track: track length - 100% (thumb width) */
+.gui-switch > input:checked {
+  --thumb-position: calc(var(--track-size) - 100%);
+}
+
+/* positioned in the center of the track: half the track - half the thumb */
+.gui-switch > input:indeterminate {
+  --thumb-position: calc(
+    (var(--track-size) / 2) - (var(--thumb-size) / 2)
+  );
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/2ECSW2OFiI4Fj4bSdGRF.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+I thought this decoupled orchestration worked out well. The thumb element is
+only concerned with one style, a `translateX` position. The input can manage all
+the complexity and calculations.
+
+{% Aside %} This reminds me of [reactive state
+stores](https://css-tricks.com/build-a-state-management-system-with-vanilla-javascript/),
+where the store centralizes all the computing, actions and side effects (parent
+track element). Subscribers (thumb pseudo element) can observe dynamic values
+without worrying about owning or duplicating logic. One store, lots of
+subscribers all with the correct values. {% endAside %}
+
+### Vertical
+
+Supporting was done with a modifier class `-vertical` which adds a rotation with
+CSS transforms to the `input` element.
+
+A 3D rotated element does not change the overall height of the component though,
+which can throw off block layout. Account for this using the `--track-size` and
+`--track-padding` variables. Calculate the minimum amount of space required for
+a vertical button to flow in layout as expected:
+
+```css
+.gui-switch.-vertical {
+  min-block-size: calc(var(--track-size) + calc(var(--track-padding) * 2));
+
+  & > input {
+    transform: rotate(-90deg);
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D9kVn8ESM6SPI3GaDsEm.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### (RTL) right-to-left
+
+A CSS friend, [Elad Schecter](https://twitter.com/eladsc), and I prototyped
+together a [slide out side menu using CSS transforms that handled right-to-left
+languages](https://codepen.io/argyleink/pen/LYbjZJv) by flipping a single
+variable. We did this because there are no logical property transforms in CSS,
+and there may never be. Elad had the great idea of using a custom property value
+to invert percentages, to allow single location management of our own custom
+logic for logical transforms. I used this same technique in this switch and I
+think it worked out great:
+
+```css
+.gui-switch {
+  --isLTR: 1;
+
+  &:dir(rtl) {
+    --isLTR: -1;
+  }
+}
+```
+
+A custom property called `--isLTR` initially holds a value of `1`, meaning it's
+`true` since our layout is left-to-right by default. Then, using the CSS
+pseudo class [`:dir()`](https://developer.mozilla.org/docs/Web/CSS/:dir),
+the value is set to `-1` when the component is within a right-to-left layout.
+
+Put `--isLTR` into action by using it within a `calc()` inside of a transform:
+
+```css/2/1
+.gui-switch.-vertical > input {
+  transform: rotate(-90deg);
+  transform: rotate(calc(90deg * var(--isLTR) * -1));
+}
+```
+
+Now the rotation of the vertical switch accounts for the opposite side position
+required by the right-to-left layout.
+
+The `translateX` transforms on the thumb pseudo-element also need updated to
+account for the opposite side requirement:
+
+```css/2,9-12/1,6-8
+.gui-switch > input:checked {
+  --thumb-position: calc(var(--track-size) - 100%);
+  --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
+}
+
+.gui-switch > input:indeterminate {
+  --thumb-position: calc(
+    (var(--track-size) / 2) - (var(--thumb-size) / 2)
+  );
+  --thumb-position: calc(
+   ((var(--track-size) / 2) - (var(--thumb-size) / 2))
+    * var(--isLTR)
+  );
+}
+```
+
+While this approach won't work to solve all needs regarding a concept like logical CSS
+transforms, it does offer some
+[DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) principles for many
+use cases.
+
+## States
+
+Using the built in `input[type="checkbox"]` wouldn't be complete without
+handling the various states it can be in: `:checked`, `:disabled`,
+`:indeterminate` and `:hover`. `:focus` was intentionally left alone, with an
+adjustment only made to its offset; the focus ring looked great on Firefox and
+Safari:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/T1UPB5mimpmIVc3BAOP9.png",
+alt="A screenshot of focus ring focused on a switch in Firefox and Safari.",
+width="800", height="363" %}
+
+{% Aside 'gotchas' %} Chromium will be catching up to the rounded focus ring styles seen
+in Firefox and Safari. Follow along
+[here](https://bugs.chromium.org/p/chromium/issues/detail?id=81556#c63). {%
+endAside %}
+
+### Checked
+
+```html
+<label for="switch-checked" class="gui-switch">
+  Default
+  <input type="checkbox" role="switch" id="switch-checked" checked="true">
+</label>
+```
+
+This state represents the `on` state. In this state, the input "track"
+background is set to the active color and the thumb position is set to "the
+end".
+
+```css
+.gui-switch > input:checked {
+  background: var(--track-color-active);
+  --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/2m9wDtYGtPsboZHxphpJ.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Disabled
+
+```html
+<label for="switch-disabled" class="gui-switch">
+  Default
+  <input type="checkbox" role="switch" id="switch-disabled" disabled="true">
+</label>
+```
+
+A `:disabled` button not only visually looks different, but also should make the
+element immutable.Interaction immutability is free from the browser, but the
+visual states need styles due to the use of `appearance: none`.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/RFjFhIJ8hKL9ktLMfP2X.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+.gui-switch > input:disabled {
+  cursor: not-allowed;
+  --thumb-color: transparent;
+
+  &::before {
+    cursor: not-allowed;
+    box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 50%);
+
+    @media (prefers-color-scheme: dark) { & {
+      box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
+    }}
+  }
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/2Zfw8KIHH7cpmnTDafm6.png",
+alt="The dark styled switch in disabled, checked, and unchecked
+states.", width="740", height="250" %}
+
+This state is tricky since it needs dark and light themes with both disabled and
+checked states. I stylistically chose minimal styles for these states to ease
+the maintenance burden of the combinations of styles.
+
+### Indeterminate
+
+An often forgotten state is `:indeterminate`, where a checkbox is neither
+checked or unchecked. This is a fun state, it's inviting and unassuming. A good
+reminder that boolean states can have sneaky in between states.
+
+It is tricky to set a checkbox to indeterminate, only JavaScript can set it:
+
+```html
+<label for="switch-indeterminate" class="gui-switch">
+  Indeterminate
+  <input type="checkbox" role="switch" id="switch-indeterminate">
+  <script>document.getElementById('switch-indeterminate').indeterminate = true</script>
+</label>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BEZ0OZaMPG74RGImkmCh.png",
+alt="The indeterminate state which has the track thumb in the
+middle, to indicate undecided.", width="196", height="130" %}
+
+Since the state, to me, is unassuming and inviting, it felt appropriate to put
+the switch thumb position in the middle:
+
+```css
+.gui-switch > input:indeterminate {
+  --thumb-position: calc(
+    calc(calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2))
+    * var(--isLTR)
+  );
+}
+```
+
+### Hover
+
+Hover interactions should provide visual support for connected UI and also
+provide direction towards interactive UI. This switch highlights the thumb with
+a semi-transparent ring when the label or the input are hovered. This hover
+animation then provides direction towards the interactive thumb element.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/9LytLmt8m8f1QyxUCwQs.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The "highlight" effect is done with `box-shadow`. On hover, of an non-disabled input, increase the size of `--highlight-size`. If the user is OK with motion, we transition the `box-shadow` and see it grow, if they're not ok with motion, the highlight appears instantly:
+
+```css/10-12
+.gui-switch > input::before {
+  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
+
+  @media (--motionOK) { & {
+    transition:
+      transform var(--thumb-transition-duration) ease,
+      box-shadow .25s ease;
+  }}
+}
+
+.gui-switch > input:not(:disabled):hover::before {
+  --highlight-size: .5rem;
+}
+```
+
+## JavaScript
+
+{% Aside %} This script is optional {% endAside %}
+
+To me, a switch interface can feel uncanny in its attempt to emulate a physical
+interface, especially this kind with a circle inside a track. iOS got this right
+with their switch, you can drag them side to side, and it's very satisfying to
+have the option. Conversely, a UI element can feel inactive if a drag gesture is
+attempted and nothing happens.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/03YLvDcirYLYWE3dVx1z.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Draggable thumbs
+
+The thumb pseudo-element receives its position from the `.gui-switch > input`
+scoped `var(--thumb-position)`, JavaScript can supply an inline style value on
+the input to dynamically update the thumb position making it appear to follow
+the pointer gesture. When the pointer is released, remove the inline styles and
+determine if the drag was closer to off or on by using the custom property
+`--thumb-position`. This is the backbone of the solution; pointer events
+conditionally tracking pointer positions to modify CSS custom properties.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/8oAG1issZLIZ6G6hRbAX.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Since the component was already 100% functional before this script is showing
+up, it does take quite a bit of work to maintain the existing behavior, like
+clicking a label to toggle the input. Our JavaScript shouldn't add features at
+the expense of existing features.
+
+### `touch-action`
+
+Dragging is a gesture, a custom one, which makes it a great candidate for
+`touch-action` benefits. In the case of this switch, a horizontal gesture should
+be handled by our script, or a vertical gesture captured for the vertical switch
+variant. With `touch-action` we can tell the browser what gestures to handle on
+this element, so a script can handle a gesture without competition.
+
+The following CSS instructs the browser that when a pointer gesture starts from
+within this switch track, handle vertical gestures, do nothing with horizontal
+ones:
+
+```css
+.gui-switch > input {
+  touch-action: pan-y;
+}
+```
+
+The desired result is a horizontal gesture that doesn't also pan or scroll the
+page. A pointer can vertically scroll start from within the input and scroll the
+page, but horizontal ones are custom handled.
+
+### Pixel value style utilities
+
+On setup and during drag, various computed number values will need to be grabbed
+from elements. The following JavaScript functions return computed pixel values
+given a CSS property. It's used in the setup script like this
+`getStyle(checkbox, 'padding-left')`.
+
+```js
+​​const getStyle = (element, prop) => {
+  return parseInt(window.getComputedStyle(element).getPropertyValue(prop));
+}
+
+const getPseudoStyle = (element, prop) => {
+  return parseInt(window.getComputedStyle(element, ':before').getPropertyValue(prop));
+}
+
+export {
+  getStyle,
+  getPseudoStyle,
+}
+```
+
+Notice how `window.getComputedStyle()` accepts a second argument, a target pseudo element. Pretty neat that JavaScript can read so many values from elements, even from pseudo elements.
+
+{% Aside 'warning' %}
+These functions use `parseInt()` which is making an
+assumption that you are querying a value that returns a pixel value. This means
+that you cannot use these functions with `getStyle(element, "display")`, for
+example.
+{% endAside %}
+
+### `dragging`
+
+This is a core moment for the drag logic and there are a few things with noting
+from the function event handler:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/ytciNZidPZg12i8OZStU.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```js
+const dragging = event => {
+  if (!state.activethumb) return
+
+  let {thumbsize, bounds, padding} = switches.get(state.activethumb.parentElement)
+  let directionality = getStyle(state.activethumb, '--isLTR')
+
+  let track = (directionality === -1)
+    ? (state.activethumb.clientWidth * -1) + thumbsize + padding
+    : 0
+
+  let pos = Math.round(event.offsetX - thumbsize / 2)
+
+  if (pos < bounds.lower) pos = 0
+  if (pos > bounds.upper) pos = bounds.upper
+
+  state.activethumb.style.setProperty('--thumb-position', `${track + pos}px`)
+}
+```
+
+The script hero is `state.activethumb`, the little circle this script is
+positioning along with a pointer. The `switches` object is a `Map()` where the
+keys are `.gui-switch`'s and the values are cached bounds and sizes that keep
+the script efficient. Right-to-left is handled using the same custom property
+that CSS is `--isLTR`, and is able to use it to invert logic and continue
+supporting RTL. The `event.offsetX` is valuable as well, as it contains a delta
+value useful for positioning the thumb.
+
+```js
+state.activethumb.style.setProperty('--thumb-position', `${track + pos}px`)
+```
+
+This final line of CSS sets the custom property used by the thumb element. This
+value assignment would otherwise transition over time, but a previous pointer
+event has temporarily set `--thumb-transition-duration` to `0s`, removing what
+would have been a sluggish interaction.
+
+### `dragEnd`
+
+In order for the user to be allowed to drag far outside the switch and let go, a
+global window event needed registered:
+
+```js
+window.addEventListener('pointerup', event => {
+  if (!state.activethumb) return
+
+  dragEnd(event)
+})
+```
+
+I think it's very important that a user has freedom to drag loosely and have the
+interface be smart enough to account for it. It didn't take much to handle it
+with this switch, but it did need careful consideration during the development
+process.
+
+```js
+const dragEnd = event => {
+  if (!state.activethumb) return
+
+  state.activethumb.checked = determineChecked()
+
+  if (state.activethumb.indeterminate)
+    state.activethumb.indeterminate = false
+
+  state.activethumb.style.removeProperty('--thumb-transition-duration')
+  state.activethumb.style.removeProperty('--thumb-position')
+  state.activethumb.removeEventListener('pointermove', dragging)
+  state.activethumb = null
+
+  padRelease()
+}
+```
+
+Interaction with the element has completed, time to set the input checked
+property and remove all the gesture events. The checkbox is changed with
+`state.activethumb.checked = determineChecked()`.
+
+### `determineChecked()`
+
+This function, called by `dragEnd`, determines where the thumb current lies
+within the bounds of its track and returns true if it is equal to or over
+halfway along the track:
+
+```js
+const determineChecked = () => {
+  let {bounds} = switches.get(state.activethumb.parentElement)
+
+  let curpos =
+    Math.abs(
+      parseInt(
+        state.activethumb.style.getPropertyValue('--thumb-position')))
+
+  if (!curpos) {
+    curpos = state.activethumb.checked
+      ? bounds.lower
+      : bounds.upper
+  }
+
+  return curpos >= bounds.middle
+}
+```
+
+### Extra thoughts
+
+The drag gesture incurred a bit of code debt due to the initial HTML structure
+chosen, mostly notably wrapping the input in a label. The label, being a parent
+element, would receive click interactions after the input. At the end of the
+`dragEnd` event, you may have noticed `padRelease()` as an odd sounding
+function.
+
+```js
+const padRelease = () => {
+  state.recentlyDragged = true
+
+  setTimeout(_ => {
+    state.recentlyDragged = false
+  }, 300)
+}
+```
+
+This is to account for the label getting this later click, as it would uncheck,
+or check, the interaction a user performed.
+
+If I was to do this again, I _might_ consider adjusting DOM with JavaScript
+during the UX upgrade, as to create an element that handles label clicks itself
+and doesn't fight with built-in behavior.
+
+This kind of JavaScript is my least favorite to write, I don't want to manage
+conditional event bubbling:
+
+```js
+const preventBubbles = event => {
+  if (state.recentlyDragged)
+    event.preventDefault() && event.stopPropagation()
+}
+```
+
+## Conclusion
+
+This teeny switch component ended up being the most work of all GUI Challenges
+so far! Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+### Community remixes
+
+- [@KonstantinRouda](https://twitter.com/KonstantinRouda) with a custom element: [demo](https://konrud.github.io/switch-web-component/Index.html) and [code](https://github.com/Konrud/switch-web-component).
+- [@jhvanderschee](https://twitter.com/jhvanderschee) with a button: [Codepen](https://codepen.io/joosts/pen/MWvXxKm).
+
+### Resources
+
+Find the `.gui-switch` [source code on
+  GitHub](https://github.com/argyleink/gui-challenges).
diff --git a/src/site/content/en/blog/building-a-tabs-component/index.md b/src/site/content/en/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..f0ec4190c45
--- /dev/null
+++ b/src/site/content/en/blog/building-a-tabs-component/index.md
@@ -0,0 +1,928 @@
+---
+layout: post
+title: Building a Tabs component
+subhead: A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+In this post I want to share thinking on building a Tabs component for the web
+that is responsive, supports multiple device inputs, and works across browsers.
+Try the [demo](https://gui-challenges.web.app/tabs/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/tabs/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## Overview
+
+Tabs are a common component of design systems but can take many shapes and
+forms. First there were desktop tabs built on `<frame>` element, and now we have
+buttery mobile components that animate content based on physics properties.
+They're all trying to do the same thing: save space.
+
+Today, the essentials of a tabs user experience is a button navigation area
+which toggles the visibility of content in a display frame. Many different
+content areas share the same space, but are conditionally presented based on the
+button selected in the navigation.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png",
+    alt="the collage is quite chaotic due to the huge diversity of styles the web has applied to the component concept",
+       width="800", height="500"
+  %}
+  <figcaption>
+    A collage of tab component web design styles from over the past 10 years
+  </figcaption>
+</figure>
+
+## Web Tactics
+
+All in all I found this component pretty straightforward to build, thanks to a
+few critical web platform features:
+- `scroll-snap-points` for elegant swipe and keyboard interactions with
+  appropriate scroll stop positions
+- [Deep links](https://en.wikipedia.org/wiki/Deep_linking) via URL hashes for
+  browser handled in-page scroll anchoring and sharing support
+- Screen reader support with `<a>` and `id="#hash"` element markup
+- `prefers-reduced-motion` for enabling crossfade transitions and instant
+  in-page scrolling
+- The in-draft `@scroll-timeline` web feature for dynamically underlining and
+  color changing the selected tab
+
+### The HTML {: #markup }
+
+Fundamentally, the UX here is: click a link, have the URL represent the nested
+page state, and then see the content area update as the browser scrolls to the
+matching element.
+
+There are some structural content members in there: links and `:target`s. We
+need a list of links, which a `<nav>` is great for, and a list of `<article>`
+elements, which a `<section>` is great for. Each link hash will match a section,
+letting the browser scroll things via anchoring.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    A link button is clicked, sliding in focused content
+  </figcaption>
+</figure>
+
+For example, clicking a link automatically focuses the `:target` article in
+Chrome 89, no JS required. The user can then scroll the article content with
+their input device as always. It's complimentary content, as indicated in the
+markup.
+
+I used the following markup to organize the tabs:
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+I can establish connections between the `<a>` and `<article>` elements with
+`href` and `id` properties like this:
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+I next filled the articles with mixed amounts of lorem, and the links with a
+mixed length and image set of titles. With content to work with, we can begin
+layout.
+
+### Scrolling layouts {: #overscroll }
+
+There are 3 different types of scroll areas in this component:
+- The navigation <b style="color: #FF00E2;">(pink)</b> is horizontally
+  scrollable
+- The content area <b style="color: #008CFF;">(blue)</b> is horizontally
+  scrollable
+- Each article item <b style="color: #2FD800;">(green)</b> is vertically
+  scrollable.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png",
+    alt="3 colorful boxes with color matching directional arrows which outline the scroll areas and show the direction they'll scroll.",
+       width="800", height="450"
+  %}
+</figure>
+
+There's 2 different types of elements involved with scrolling:
+1. **A window** <br>A box with defined dimensions that has the `overflow`
+   property style.
+1. **An oversized surface** <br>In this layout, it's the list containers: nav
+   links, section articles, and article contents.
+
+#### `<snap-tabs>` layout {: #tabs-layout }
+
+The top level layout I chose was flex (Flexbox). I set the direction to
+`column`, so the header and section are vertically ordered. This is our first
+scroll window, and it hides everything with overflow hidden. The header and
+section will employ overscroll soon, as individual zones.
+
+{% Compare 'better', 'HTML' %}
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* establish primary containing box */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* be pushy about consuming all space */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* defend against <section> needing 100% */
+    flex-shrink: 0;
+    /* fixes cross browser quarks */
+    min-block-size: fit-content;
+  }
+}
+```
+{% endCompare %}
+
+Pointing back to the colorful 3-scroll diagram:
+- `<header>` is now prepared to be the <b style="color: #FF00E2;">(pink)</b>
+  scroll container.
+- `<section>` is prepared to be the <b style="color: #008CFF;">(blue)</b> scroll
+  container.
+
+The frames I've highlighted below with
+[VisBug](https://a.nerdy.dev/gimme-visbug) help us see the **windows** the
+scroll containers have created.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png",
+    alt="the header and section elements have hotpink overlays on them, outlining the space they take up in the component",
+       width="800", height="620"
+  %}
+</figure>
+
+#### Tabs `<header>` layout {: #tabs-header }
+
+The next layout is nearly the same: I use flex to create vertical ordering.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<snap-tabs>
+  <header>
+    <nav></nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css/1-2
+header {
+  display: flex;
+  flex-direction: column;
+}
+```
+{% endCompare %}
+</div>
+
+The `.snap-indicator` should travel horizontally with the group of links, and
+this header layout helps set that stage. No absolute positioned elements here!
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png",
+    alt="the nav and span.indicator elements have hotpink overlays on them, outlining the space they take up in the component",
+       width="800", height="368"
+  %}
+</figure>
+
+Next, the scroll styles. It turns out that we can share the scroll styles
+between our 2 horizontal scroll areas (header and section), so I made a utility
+class, `.scroll-snap-x`.
+
+```css
+.scroll-snap-x {
+  /* browser decide if x is ok to scroll and show bars on, y hidden */
+  overflow: auto hidden;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  /* scrolling should snap children on x */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+Each needs overflow on the x axis, scroll containment to trap overscroll, hidden
+scrollbars for touch devices and lastly scroll-snap for locking content
+presentation areas. Our keyboard tab order is accessible and any interactions guide
+focus naturally. Scroll snap containers also get a nice carousel style
+interaction from their keyboard.
+
+#### Tabs header `<nav>` layout {: #tabs-header-nav }
+
+The nav links need to be laid out in a line, with no line breaks, vertically
+centered, and each link item should snap to the scroll-snap container. Swift
+work for 2021 CSS!
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+nav {
+  display: flex;
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+```
+{% endCompare %}
+</div>
+
+Each link styles and sizes itself, so the nav layout only needs to specify
+direction and flow. Unique widths on nav items makes the transition between tabs
+fun as the indicator adjusts its width to the new target. Depending on how many
+elements are in here, the browser will render a scrollbar or not.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png",
+    alt="the a elements of the nav have hotpink overlays on them, outlining the space they take up in the component as well as where they overflow",
+       width="800", height="327"
+  %}
+</figure>
+
+#### Tabs `<section>` layout {: #tabs-section }
+
+This section is a flex item and needs to be the dominant consumer of space. It
+also needs to create columns for the articles to be placed into. Again, swift
+work for CSS 2021! The `block-size: 100%` stretches this element to fill the
+parent as much as possible, then for its own layout, it creates a series of
+columns that are `100%` the width of the parent. Percentages work great here
+because we've written strong constraints on the parent.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<section>
+  <article></article>
+  <article></article>
+  <article></article>
+  <article></article>
+</section>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+```
+{% endCompare %}
+</div>
+
+It's as if we're saying "expand vertically as much as possible, in a pushy way"
+(remember the header we set to `flex-shrink: 0`: it is a defense against this
+expansion push), which sets the row height for a set of full height columns. The
+`auto-flow` style tells the grid to always lay children out in a horizontal
+line, no wrapping, exactly what we want; to overflow the parent window.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png",
+    alt="the article elements have hotpink overlays on them, outlining the space they take up in the component and where they overflow",
+       width="800", height="512"
+  %}
+</figure>
+
+I find these difficult to wrap my head around sometimes! This section element is
+fitting into a box, but also created a set of boxes. I hope the visuals and
+explanations are helping.
+
+#### Tabs `<article>` layout {: #tabs-article }
+
+The user should be able to scroll the article content, and the scrollbars should
+only show up if there is overflow. These article elements are in a neat
+position. They are simultaneously a scroll parent and a scroll child. The
+browser is really handling some tricky touch, mouse, and keyboard interactions
+for us here.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html
+<article>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  ...
+</article>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+```
+{% endCompare %}
+</div>
+
+I chose to have the articles snap within their parent scroller. I really like
+how the navigation link items and the article elements snap to the inline-start
+of their respective scroll containers. It looks and feels like a harmonious
+relationship.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png",
+    alt="the article element and it's child elements have hotpink overlays on them, outlining the space they take up in the component and the direction they overflow",
+       width="800", height="808"
+  %}
+</figure>
+
+The article is a grid child, and it's size is predetermined to be the viewport
+area we want to provide scroll UX. This means I don't need any height or width
+styles here, I just need to define how it overflows. I set overflow-y to auto,
+and then also trap the scroll interactions with the handy overscroll-behavior
+property.
+
+#### 3 scroll areas recap {: #scroll-areas-recap }
+
+Below I've chosen in my system settings to "always show scrollbars". I think
+it's doubly important for the layout to work with this setting turned on, as it
+is for me to review the layout and the scroll orchestration.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png",
+    alt="the 3 scrollbars are set to show, now consuming layout space, and our component still looks great",
+       width="500", height="607"
+  %}
+</figure>
+
+I think seeing the scrollbar gutter in this component helps clearly show where
+the scroll areas are, the direction they support, and how they interact with
+each other. Consider how each of these scroll window frames also are flex or
+grid parents to a layout.
+
+DevTools can help us visualize this:
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png",
+    alt="the scroll areas have grid and flexbox tool overlays, outlining the space they take up in the component and the direction they overflow",
+       width="800", height="455"
+  %}
+  <figcaption>
+    Chromium Devtools, showing the flexbox nav element layout full of anchor elements,
+    the grid section layout full of article elements, and the article
+    elements full of paragraphs and a heading element.
+  </figcaption>
+</figure>
+
+The scroll layouts are complete: snapping, deep linkable, and keyboard
+accessible. Strong foundation for UX enhancements, style and delight.
+
+#### Feature highlight
+
+Scroll snapped children maintain their locked position during resize. This means
+JavaScript won't need to bring anything into view on device rotate or browser
+resize. Try it out in Chromium DevTools [Device
+Mode](https://developer.chrome.com/docs/devtools/device-mode/) by
+selecting any mode other than **Responsive**, and then resizing the device frame.
+Notice the element stays in view and locked with its content. This has been
+available since Chromium updated their implementation to match the spec. Here's
+a [blog post](/snap-after-layout/) about it.
+
+### Animation {: #animation }
+
+The goal of the animation work here is to clearly link interactions with UI
+feedback. This helps guide or assist the user through to their (hopefully)
+seamless discovery of all the content. I'll be adding motion with purpose and
+conditionally. Users can now specify [their motion
+preferences](/prefers-reduced-motion/) in their operating system,
+and I thoroughly enjoy responding to their preferences in my interfaces.
+
+I'll be linking a tab underline with the article scroll position. Snapping isn't
+only pretty alignment, it's also anchoring the start and end of an animation.
+This keeps the `<nav>`, which acts like a
+[mini-map](https://en.wikipedia.org/wiki/Mini-map), connected to the content.
+We'll be checking the user's motion preference from both CSS and JS. There's a
+few great places to be considerate!
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+#### Scroll behavior {: #scroll-behavior }
+
+There's an opportunity to enhance the motion behavior of both `:target` and
+`element.scrollIntoView()`. By default, it's instant. The browser just sets the
+scroll position. Well, what if we want to transition to that scroll position,
+instead of blink there?
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+Since we're introducing motion here, and motion that the user doesn't control
+(like scrolling), we only apply this style if the user has no preference in
+their operating system around reduced motion. This way, we only introduce scroll
+motion for folks who are OK with it.
+
+#### Tabs indicator {: #tabs-indicator }
+
+The purpose of this animation is to help associate the indicator with the state
+of the content. I decided to color crossfade `border-bottom` styles for users
+who prefer reduced motion, and a scroll linked sliding + color fade animation
+for users who are OK with motion.
+
+In Chromium Devtools, I can toggle the preference and demonstrate the 2
+different transition styles. I had a ton of fun building this.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+I hide the `.snap-indicator` when the user prefers reduced motion since I don't
+need it anymore. Then I replace it with `border-block-end` styles and a
+`transition`. Also notice in the tabs interaction that the active nav item not
+only has a brand underline highlight, but it's text color also is darker. The
+active element has higher text color contrast and a bright underlight accent.
+
+Just a few extra lines of CSS will make someone feel seen (in the sense that
+we're thoughtfully respecting their motion preferences). I love it.
+
+#### `@scroll-timeline` {: #scroll-timeline }
+
+In the above section I showed you how I handle the reduced motion crossfade
+styles, and in this section I'll show you how I linked the indicator and a
+scroll area together. This is some fun experimental stuff up next. I hope you're
+as excited as me.
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+I first check the user's motion preference from JavaScript. If the result of
+this is `false`, meaning the user prefers reduced motion, then we'll not run any
+of the scroll linking motion effects.
+
+```js
+if (motionOK) {
+  // motion based animation code
+}
+```
+
+At the time of writing this, the [browser support for
+`@scroll-timeline`](https://caniuse.com/css-scroll-timeline) is none. It's a
+[draft spec](https://drafts.csswg.org/scroll-animations-1/) with only
+experimental implementations. It has a polyfill though, which I use in this
+demo.
+
+##### ` ScrollTimeline`
+
+While CSS and JavaScript can both create scroll timelines, I opted into
+JavaScript so I could use live element measurements in the animation.
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // scroll in the direction letters flow
+  fill: 'both',              // bi-directional linking
+});
+```
+
+I want 1 thing to follow another's scroll position, and by creating a
+`ScrollTimeline` I define the driver of the scroll link, the `scrollSource`.
+Normally an animation on the web runs against a global time frame tick, but with
+a custom `sectionScrollTimeline` in memory, I can change all that.
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+Before I get into the keyframes of the animation, I think it's important to
+point out the follower of the scrolling, `tabindicator`, will be animated based
+on a custom timeline, our section's scroll. This completes the linkage, but is
+missing the final ingredient, stateful points to animate between, also known as
+keyframes.
+
+#### Dynamic keyframes
+
+There's a really powerful pure declarative CSS way to animate with
+`@scroll-timeline`, but the animation I chose to do was too dynamic. There's no
+way to transition between `auto` width, and there's no way to dynamically create
+a number of keyframes based on children length.
+
+JavaScript knows how to get that information though, so we'll iterate over the
+children ourselves and grab the computed values at runtime:
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+For each `tabnavitem`, destructure the `offsetLeft` position and return a string
+that uses it as a `translateX` value. This creates 4 transform keyframes for the
+animation. The same is done for width, each is asked what its dynamic width is
+and then it's used as a keyframe value.
+
+Here's example output, based on my fonts and browser preferences:
+
+TranslateX Keyframes:
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+Width Keyframes:
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["121px", "117px", "226px", "67px"]
+```
+
+To summarize the strategy, the tab indicator will now animate across 4 keyframes
+depending on the scroll snap position of the section scroller. The snap points
+create clear delineation between our keyframes and really add to the
+synchronized feel of the animation.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png",
+    alt="active tab and inactive tab are shown with VisBug overlays which show passing contrast scores for both",
+       width="540", height="400"
+  %}
+</figure>
+
+The user drives the animation with their interaction, seeing the width and
+position of the indicator change from one section to the next, tracking
+perfectly with scroll.
+
+You may not have noticed, but I'm very proud of the transition of color as the
+highlighted navigation item becomes selected.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+The unselected lighter grey appears even more pushed back when the highlighted
+item has more contrast. It's common to transition color for text, like on hover
+and when selected, but it's next-level to transition that color on scroll,
+synchronized with the underline indicator.
+
+Here's how I did it:
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+Each tab nav link needs this new color animation, tracking the same scroll
+timeline as the underline indicator. I use the same timeline as before: since
+it's role is to emit a tick on scroll, we can use that tick in any type of
+animation we want. As I did before, I create 4 keyframes in the loop, and return
+colors.
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+The keyframe with the color `var(--text-active-color)` highlights the link, and
+it's otherwise a standard text color. The nested loop there makes it relatively
+straightforward, as the outer loop is each nav item, and the inner loop is each
+navitem's personal keyframes. I check if the outer loop element is the same as
+the inner loop one, and use that to know when it's selected.
+
+I had a lot of fun writing this. So much.
+
+### Even more JavaScript enhancements {: #js }
+
+It's worth a reminder that the core of what I'm showing you here works without
+JavaScript. With that said, let's see how we can enhance it when JS is
+available.
+
+#### Deep links
+
+Deep links are more of a mobile term, but I think the intent of the deep link is
+met here with tabs in that you can share a URL directly to a tab's contents. The
+browser will in-page navigate to the ID that is matched in the URL hash. I found
+this `onload` handler made the effect across platforms.
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### Scroll end synchronization
+
+Our users aren't always clicking or using a keyboard, sometimes they're just
+free scrolling, as they should be able to. When the section scroller stops
+scrolling, wherever it lands needs to be matched in the top navigation bar.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+Here's how I wait for scroll end:
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+Whenever the sections are being scrolled, clear the section timeout if there,
+and start a new one. When sections stop being scrolled, don't clear the timeout,
+and fire 100ms after resting. When it fires, call function that seeks to figure
+out where the user stopped.
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+Assuming the scroll snapped, dividing the current scroll position from the width
+of the scroll area should result in an integer and not a decimal. I then try to
+grab a navitem from our cache via this calculated index, and if it finds
+something, I send the match to be set active.
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+Setting the active tab starts by clearing any currently active tab, then giving
+the incoming nav item the active state attribute. The call to `scrollIntoView()`
+has a fun interaction with CSS that is worth noting.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+In the horizontal scroll snap utility CSS, we've
+[nested](https://drafts.csswg.org/css-nesting-1/) a media query which applies
+`smooth` scrolling if the user is motion tolerant. JavaScript can freely make
+calls to scroll elements into view, and CSS can manage the UX declaratively.
+Quite the delightful little match they make sometimes.
+
+### Conclusion
+
+Now that you know how I did it, how would you?! This makes for some fun
+component architecture! Who's going to make the 1st version with slots in their
+favorite framework? 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a [Glitch](https://glitch.com), [tweet me](https://twitter.com/argyleink)
+your version, and I'll add it to the [Community remixes](#community-remixes)
+section below.
+
+## Community remixes
+
+- [@devnook](https://twitter.com/devnook), [@rob_dodson](https://twitter.com/rob_dodson), and [@DasSurma](https://twitter.com/DasSurma) with Web Components: [article](/components-howto-tabs/).
+- [@jhvanderschee](https://twitter.com/jhvanderschee) with buttons: [Codepen](https://codepen.io/joosts/pen/PoKdZYP).
diff --git a/src/site/content/en/blog/building-a-theme-switch-component/index.md b/src/site/content/en/blog/building-a-theme-switch-component/index.md
new file mode 100644
index 00000000000..8c73e71830b
--- /dev/null
+++ b/src/site/content/en/blog/building-a-theme-switch-component/index.md
@@ -0,0 +1,811 @@
+---
+layout: post
+title: Building a theme switch component
+subhead: A foundational overview of how to build an adaptive and accessible theme switch component.
+authors:
+  - adamargyle
+description: A foundational overview of how to build an adaptive and accessible theme switch component.
+date: 2022-01-19
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Us7qjkapii7sZurl0glF.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/skKcjSv1gMQRYk1AdEp7.png
+alt: The sun and the word light and the moon next to the word dark.
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on a way to build a dark and light theme switch component.
+[Try the demo](https://gui-challenges.web.app/theme-switch/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/vLZNIPTNEXLl9rxxlirg.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/theme-switch/dist/">Demo</a> button size increased for easy visibility
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'kZiS1QStIWc' %}
+
+## Overview
+
+A website may provide settings for controlling the color scheme instead of
+relying entirely on the system preference. This means that users may browse in a
+mode other than their system preferences. For example, a user's system is in a
+light theme, but the user prefers the website to display in the dark theme. 
+
+There are several web engineering considerations when building this feature. For
+example, the browser should be made aware of the preference as soon as possible
+to prevent page color flashes, and the control needs to first sync with the
+system then allow client-side stored exceptions.
+
+<figure data-size="full">
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/5v5M1n6bOtSBaVXbkcon.png", 
+    alt="", 
+    width="800", 
+    height="687" 
+  %}
+  <figcaption>
+    Diagram shows a preview of JavaScript page load and document 
+    interaction events to overall show there's 4 paths to setting the theme
+  </figcaption>
+</figure>
+
+## Markup
+
+A [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)
+should be used for the toggle, as you then benefit from browser-provided
+interaction events and features, such as click events and focusability.
+
+### The button
+
+The button needs a class for use from CSS and an ID for use from JavaScript.
+Additionally, since the button content is an icon rather than text, add a
+[title](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/title)
+attribute to provide information about the button's purpose. Last, add an
+[`[aria-label]`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)
+to hold the state of the icon button, so screen readers can share the state of
+the theme to folks who are visually impaired.
+
+```html
+<button 
+  class="theme-toggle" 
+  id="theme-toggle" 
+  title="Toggles light & dark" 
+  aria-label="auto"
+>
+  …
+</button>
+```
+
+#### `aria-label` and `aria-live` polite
+
+To indicate to screen readers that changes to `aria-label` should be announced,
+add
+[`aria-live="polite"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-live#:~:text=on%20that%20region.-,polite,-Indicates%20that%20updates)
+to the button. 
+
+```html/5/
+<button 
+  class="theme-toggle" 
+  id="theme-toggle" 
+  title="Toggles light & dark" 
+  aria-label="auto" 
+  aria-live="polite"
+>
+  …
+</button>
+```
+
+This markup addition signals to screen readers to politely, instead of
+[`aria-live="assertive"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#:~:text=aria%2Dlive%3D%22assertive%22%20should%20only%20be%20used%20for%20time%2Dsensitive/critical%20notifications%20that%20absolutely%20require%20the%20user%27s%20immediate%20attention.),
+tell the user what changed. In the case of this button, it will announce "light"
+or "dark" depending on what the `aria-label` has become.
+
+### The scalable vector graphic (SVG) icon
+
+[SVG](https://developer.mozilla.org/docs/Web/SVG) provides a way to create
+high-quality, scalable shapes with minimal markup. Interacting with the button
+can trigger new visual states for the vectors, making SVG great for icons.
+
+The following SVG markup goes inside the `<button>`:
+
+```html
+<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+  …
+</svg>
+```
+
+[`aria-hidden`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute)
+has been added to the SVG element so screen readers know to ignore it as it's
+marked presentational. This is great to do for visual decorations, like the icon
+inside a button. In addition to the required `viewBox` attribute on the element,
+add height and width for [similar reasons that images should get inline
+sizes](/learn/design/responsive-images/).
+
+#### The sun
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pt2FGFpSH7StPlNYPbU0.png",
+  alt="The sun icon shown with the sunbeams faded out and a hotpink arrow
+  pointing to the circle in the center.", width="720", height="450" 
+%}
+
+The sun graphic consists of a circle and lines which SVG conveniently has shapes
+for. The `<circle>` is centered by setting the `cx` and `cy` properties to 12,
+which is half of the viewport size (24), and then given a radius (`r`) of `6`
+which sets the size.
+
+```html/1/
+<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+  <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+</svg>
+```
+
+Additionally, the mask property points to an [SVG element's
+ID](https://developer.mozilla.org/docs/Web/CSS/url()#:~:text=url(myFont.woff)%3B-,url(%23IDofSVGpath),-%3B%0A%0A/*%20associated%20properties%20*/%0Abackground),
+which you will create next, and finally given a fill color that matches the
+page's text color with
+[`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentcolor_keyword).
+
+#### The sun beams
+
+{% Img 
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hd7EDnsqE1ubV63IJGp5.png", 
+  alt="The sun icon shown with the sun center faded out and a hotpink arrow
+  pointing to the sunbeams.", 
+  width="720", 
+  height="450" 
+%}
+
+Next, the sunbeam lines are added just below the circle, inside of a group
+element [`<g>`](https://developer.mozilla.org/docs/Web/SVG/Element/g)
+group.
+
+```html/2-11/
+<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+  <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+  <g class="sun-beams" stroke="currentColor">
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </g>
+</svg>
+```
+
+This time, instead of the value of
+[fill](https://developer.mozilla.org/docs/Web/SVG/Attribute/fill) being
+`currentColor`, each line's
+[stroke](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke) is
+set. The lines plus the circle shapes create a nice sun with beams.
+
+{% Aside %} 
+Icon SVG sourced from
+[https://feathericons.com/?query=sun](https://feathericons.com/?query=sun) with
+minor adjustments made. 
+{% endAside %}
+
+#### The moon
+
+To create the illusion of a seamless transition between light (sun) and dark
+(moon), the moon is an augmentation of the sun icon, using an SVG mask.
+
+```html/5-8/
+<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+  <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+  <g class="sun-beams" stroke="currentColor">
+    …
+  </g>
+  <mask class="moon" id="moon-mask">
+    <rect x="0" y="0" width="100%" height="100%" fill="white" />
+    <circle cx="24" cy="10" r="6" fill="black" />
+  </mask>
+</svg>
+```
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zZD0vHrGfUaZg5N8NFNV.png",
+alt="Graphic with three vertical layers to help show how masking works. The top
+layer is a white square with a black circle. The middle layer is the sun icon.
+The bottom layer is labeled as the result and it shows the sun icon with a
+cutout where the top layer black circle is.", width="800", height="708" %}
+</figure>
+
+[Masks](https://developer.mozilla.org/docs/Web/SVG/Element/mask) with SVG
+are powerful, allowing the colors white and black to either remove or include
+parts of another graphic. The sun icon will be eclipsed by a moon
+[`<circle>`](https://developer.mozilla.org/docs/Web/SVG/Element/circle)
+shape with an SVG mask, simply by moving a circle shape in and out of a mask
+area.
+
+#### What happens if CSS doesn’t load?
+
+<figure style="max-inline-size: 116px">
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wJQaRpllUVFFoNHxbDfK.png",
+alt="Screenshot of a plain browser button with the sun icon inside.",
+width="116", height="103" %}
+</figure>
+
+It can be nice to test your SVG as if CSS didn't load to ensure the result isn't
+super large or causing layout issues. The inline height and width attributes on
+the SVG plus the use of `currentColor` give minimal style rules for the browser
+to use if CSS doesn't load. This makes for nice defensive styles against network
+turbulence.
+
+## Layout
+
+The theme switch component has little surface area, so you don’t need grid or
+flexbox for layout. Instead, SVG positioning and CSS transforms are used. 
+
+## Styles
+
+### `.theme-toggle` styles
+
+The `<button>` element is the container for the icon shapes and styles. This
+parent context will hold adaptive colors and sizes to pass down to SVG. 
+
+The first task is to make the button a circle and remove the default button
+styles: 
+
+```css
+.theme-toggle {
+  --size: 2rem;
+  
+  background: none;
+  border: none;
+  padding: 0;
+
+  inline-size: var(--size);
+  block-size: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+```
+
+Next, add some interaction styles. Add a cursor style for mouse users. Add
+`touch-action: manipulation` for a [fast reacting touch
+experience](https://twitter.com/argyleink/status/1405881231695302659?s=20).
+Remove the semi-transparent highlight iOS applies to buttons. Last, give the
+focus state outline some breathing room from the edge of the element:
+
+```css/12-15/
+.theme-toggle {
+  --size: 2rem;
+
+  background: none;
+  border: none;
+  padding: 0;
+
+  inline-size: var(--size);
+  block-size: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  outline-offset: 5px;
+}
+```
+
+The SVG inside of the button needs some styles as well. The SVG should fit the size of the button and, for visual softness, round out the line ends:
+
+```css/16-20/
+.theme-toggle {
+  --size: 2rem;
+
+  background: none;
+  border: none;
+  padding: 0;
+
+  inline-size: var(--size);
+  block-size: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  outline-offset: 5px;
+
+  & > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    stroke-linecap: round;
+  }
+}
+```
+
+{% Aside %} 
+The [CSS @nest](https://www.w3.org/TR/css-nesting-1/)
+feature, used with [PostCSS
+Nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting),
+allows authoring new styles without leaving a selectors context. The above
+nested selector creates `.theme-toggle > svg` because the `&` character is
+dynamically represented as `.theme-toggle`. 
+{% endAside %}
+
+#### Adaptive sizing with the `hover` media query
+
+The icon button size is a bit small at `2rem`, which is fine for mouse users but
+can be a struggle for a coarse pointer like a finger. Make the button meet many
+[touch size
+guidelines](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/#:~:text=buttons%20that%20measure%2044x44%20pt)
+by using a [hover media
+query](https://developer.mozilla.org/docs/Web/CSS/@media/hover) to specify
+a size increase. 
+
+```css/4-6/
+.theme-toggle {
+  --size: 2rem;
+  …
+  
+  @media (hover: none) {
+    --size: 48px;
+  }
+}
+```
+
+### Sun and moon SVG styles
+
+The button holds the interactive aspects of the theme switch component while SVG
+inside will hold the visual and animated aspects. This is where the icon can be
+made beautiful and brought to life.
+
+#### Light theme
+
+<figure>
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Lswkub5NhuBJ016OeSO1.png",
+alt="ALT_TEXT_HERE", width="800", height="551" %}
+</figure>
+
+For scale and rotate animations to happen from the center of SVG shapes, set
+their `transform-origin: center center`. The adaptive colors provided by the
+button are used here by the shapes. The moon and sun use the button provided
+`var(--icon-fill)` and `var(--icon-fill-hover)` for their fill, while the
+sunbeams use the variables for stroke.
+
+```css
+.sun-and-moon {
+  & > :is(.moon, .sun, .sun-beams) {
+    transform-origin: center center;
+  }
+
+  & > :is(.moon, .sun) {
+    fill: var(--icon-fill);
+
+    @nest .theme-toggle:is(:hover, :focus-visible) > & {
+      fill: var(--icon-fill-hover);
+    }
+  }
+
+  & > .sun-beams {
+    stroke: var(--icon-fill);
+    stroke-width: 2px;
+
+    @nest .theme-toggle:is(:hover, :focus-visible) & {
+      stroke: var(--icon-fill-hover);
+    }
+  }
+}
+```
+
+{% Aside %} 
+`@nest` is used again, this time to make a new selector that targets
+a parent button being hovered or focused. `@nest .theme-toggle:is(:hover,
+:focus-visible) &` in this usage is the same as `@nest .theme-toggle:is(:hover,
+:focus-visible) .sun-and-moon > .sun-beams`. 
+{% endAside %}
+
+#### Dark theme
+
+<figure>
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qNMkCQzYCuBK0EjrJHjk.png",
+alt="ALT_TEXT_HERE", width="800", height="556" %}
+</figure>
+
+The moon styles need to remove the sunbeams, scale up the sun circle and move
+the circle mask. 
+
+```css
+.sun-and-moon {
+  @nest [data-theme="dark"] & {
+    & > .sun {
+      transform: scale(1.75);
+    }
+
+    & > .sun-beams {
+      opacity: 0;
+    }
+
+    & > .moon > circle {
+      transform: translateX(-7px);
+
+      @supports (cx: 1) {
+        transform: translateX(0);
+        cx: 17;
+      }
+    }
+  }
+}
+```
+
+Notice the dark theme has no color changes or transitions. The parent button
+component owns the colors, where they're already adaptive within a dark and
+light context. The transition information should be behind a user's motion
+preference media query.
+
+## Animation
+
+The button should be functional and stateful but without transitions at this
+point. The following sections are all about defining **how** and **what**
+transitions.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/47Di3gA4139lDULJJY2y.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" 
+%}
+</figure>
+
+### Sharing media queries and importing easings
+
+To make it easy to put transitions and animations behind a user's operating
+system motion preferences, the [PostCSS](https://postcss.org/) plugin [Custom
+Media](https://github.com/postcss/postcss-custom-media) enables usage of the
+[drafted CSS specification for media query
+variables](https://drafts.csswg.org/mediaqueries-5/#custom-mq) syntax:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+/* usage example */
+@media (--motionOK) {
+  .sun {
+    transition: transform .5s var(--ease-elastic-3);
+  }
+}
+```
+
+For unique and easy to use CSS easings, import the
+[easings](https://open-props.style/#easing) portion of [Open
+Props](https://open-props.style/):
+
+```css
+@import "https://unpkg.com/open-props/easings.min.css";
+
+/* usage example */
+.sun {
+  transition: transform .5s var(--ease-elastic-3);
+}
+```
+
+### The sun
+
+The sun transitions will be more playful than the moon, achieving this effect
+with bouncy easings. The sunbeams should bounce a small amount as they rotate
+and the center of the sun should bounce a small amount as it scales.
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/47Di3gA4139lDULJJY2y.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+</figure>
+
+The default (light theme) styles define the transitions and the dark theme
+styles define customizations for the transition to light:
+
+```css/3,7-10,16-17,22/
+​​.sun-and-moon {
+  @media (--motionOK) {
+    & > .sun {
+      transition: transform .5s var(--ease-elastic-3);
+    }
+
+    & > .sun-beams {
+      transition: 
+        transform .5s var(--ease-elastic-4),
+        opacity .5s var(--ease-3)
+      ;
+    }
+
+    @nest [data-theme="dark"] & {
+      & > .sun {
+        transform: scale(1.75);
+        transition-timing-function: var(--ease-3);
+        transition-duration: .25s;
+      }
+
+      & > .sun-beams {
+        transform: rotateZ(-25deg);
+        transition-duration: .15s;
+      }
+    }
+  }
+}
+```
+
+In the [Animation](https://developer.chrome.com/docs/devtools/css/animations/)
+panel in Chrome DevTools, you can find a timeline for animation transitions. The
+duration of the total animation, the elements, and the easing timing can be
+inspected.
+
+<figure data-size="full">
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/5KYAhwMgxZf9nnKvlDxn.png", 
+    alt="",
+    width="800", 
+    height="334" 
+  %}
+  <figcaption>
+    Light to dark transition
+  </figcaption>
+</figure>
+
+<figure data-size="full">
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SO9IRLvOXSVeyl3TCjPu.png", 
+    alt="",
+    width="800", 
+    height="203" 
+  %}
+  <figcaption>
+    Dark to light transition
+  </figcaption>
+</figure>
+
+### The moon
+
+The moon light and dark positions are already set, add transition styles inside
+of the `--motionOK` media query to bring it to life while respecting the user's
+motion preferences. 
+
+<figure>
+{% Video 
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/47Di3gA4139lDULJJY2y.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+</figure>
+
+The timing with delay and duration are critical in making this transition clean.
+If the sun is eclipsed too early, for example, the transition doesn't feel
+orchestrated or playful, it feels chaotic.
+
+```css/4,9,15-16/
+​​.sun-and-moon {
+  @media (--motionOK) {
+    & .moon > circle {
+      transform: translateX(-7px);
+      transition: transform .25s var(--ease-out-5);
+
+      @supports (cx: 1) {
+        transform: translateX(0);
+        cx: 17;
+        transition: cx .25s var(--ease-out-5);
+      }
+    }
+
+    @nest [data-theme="dark"] & {
+      & > .moon > circle {
+        transition-delay: .25s;
+        transition-duration: .5s;
+      }
+    }
+  }
+}
+```
+
+<figure data-size="full">
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fd6K4IVMe4XaOF12ngXY.png", 
+    alt="",
+    width="800", 
+    height="334" 
+  %}
+  <figcaption>
+    Light to dark transition
+  </figcaption>
+</figure>
+
+<figure data-size="full">
+  {% Img 
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Bw0oBqpFw1mZ0OXHGeAU.png", 
+    alt="",
+    width="800", 
+    height="203" 
+  %}
+  <figcaption>
+    Dark to light transition
+  </figcaption>
+</figure>
+
+### Prefers reduced motion
+
+In most [GUI Challenges](/shows/gui-challenges/) I try to keep
+some animation, like opacity cross fades, for users who prefer reduced motion.
+This component felt better with instant state changes however. 
+
+## JavaScript
+
+There's a lot of work for JavaScript in this component, from managing ARIA
+information for screen readers to getting and setting values from [local
+storage](https://developer.mozilla.org/docs/Web/API/Window/localStorage).
+
+
+### The page load experience
+
+It was important that no color flashing occurs on page load. If a user with a
+dark color scheme indicates they preferred light with this component, then
+reloaded the page, at first the page would be dark then it would flash to light.
+Preventing this meant running a small amount of blocking JavaScript with the
+goal to set the HTML attribute `data-theme` as early as possible. 
+
+```html
+<script src="./theme-toggle.js"></script>
+```
+
+To achieve this, a plain `<script>` tag in the document `<head>` is loaded
+first, before any CSS or `<body>` markup. When the browser encounters an
+unmarked script like this, it runs the code and executes it before the rest of
+the HTML. Using this blocking moment sparingly, it's possible to set the HTML
+attribute before the main CSS paints the page, thus preventing a flash or
+colors.
+
+The JavaScript first checks for the user's preference in local storage and
+fallback to check the system preference if nothing is found in storage:
+
+```js
+const storageKey = 'theme-preference'
+
+const getColorPreference = () => {
+  if (localStorage.getItem(storageKey))
+    return localStorage.getItem(storageKey)
+  else
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+}
+```
+
+A function to set the user's preference in local storage is parsed next:
+
+```js
+const setPreference = () => {
+  localStorage.setItem(storageKey, theme.value)
+  reflectPreference()
+}
+```
+
+Followed by a function to modify the document with the preferences. 
+
+```js
+const reflectPreference = () => {
+  document.firstElementChild
+    .setAttribute('data-theme', theme.value)
+
+  document
+    .querySelector('#theme-toggle')
+    ?.setAttribute('aria-label', theme.value)
+}
+```
+
+An important thing to note at this point is the HTML
+document parsing state. The browser doesn't know about the "#theme-toggle"
+button yet, as the `<head>` tag hasn't been completely parsed. However, the
+browser does have a
+[`document.firstElementChild`](https://developer.mozilla.org/docs/Web/API/Element/firstElementChild)
+, aka the `<html>` tag. The function attempts to set both to keep them in sync,
+but on first run will only be able to set the HTML tag. The
+[`querySelector`](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
+won't find anything at first and the [optional chaining
+operator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
+ensures no syntax errors when it's not found and the setAttribute function is
+attempted to be invoked. 
+
+Next, that function `reflectPreference()` is immediately called so the HTML
+document has its `data-theme` attribute set:
+
+```js
+reflectPreference()
+```
+
+The button still needs the attribute, so wait for the page load event, then it
+will be safe to query, add listeners and set attributes on:
+
+```js
+window.onload = () => {
+  // set on load so screen readers can get the latest value on the button
+  reflectPreference()
+
+  // now this script can find and listen for clicks on the control
+  document
+    .querySelector('#theme-toggle')
+    .addEventListener('click', onClick)
+}
+```
+
+### The toggling experience
+
+When the button is clicked, the theme needs to be swapped, in JavaScript memory
+and in the document. The current theme value will need to be inspected and a
+decision made about its new state. Once the new state is set, save it and update
+the document:
+
+```js
+const onClick = () => {
+  theme.value = theme.value === 'light'
+    ? 'dark'
+    : 'light'
+
+  setPreference()
+}
+```
+
+### Synchronizing with the system
+
+Unique to this theme switch is synchronization with the system preference as it
+changes. If a user changes their system preference while a page and this
+component are visible, the theme switch will change to match the new user
+preference, as if the user had interacted with the theme switch at the same time
+it did the system switch. 
+
+Achieve this with JavaScript and a
+[`matchMedia`](https://developer.mozilla.org/docs/Web/API/Window/matchMedia)
+event listening for changes to a media query:
+
+```js
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', ({matches:isDark}) => {
+    theme.value = isDark ? 'dark' : 'light'
+    setPreference()
+  })
+```
+
+<figure>
+  {% Video 
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/0QqWAZuInaTPysj2BYCq.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Changing the MacOS system preference changes the theme switch state
+  </figcaption>
+</figure>
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [@NathanG](https://twitter.com/NathanG) on [Codepen with Vue](https://codepen.io/nathangath/pen/qYeOJJ)
+- [@ShadowShahriar](https://twitter.com/ShadowShahriar) on [Codepen](https://codepen.io/ShadowShahriar/pen/ZEQPvMP)
+- [@tomayac](https://twitter.com/tomayac) as a [custom element](https://github.com/GoogleChromeLabs/dark-mode-toggle)
+- [@bramus](https://twitter.com/bramus) with [vanilla JavaScript](https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/)
+- [@JoshWComeau](https://twitter.com/JoshWComeau) with [react](https://www.joshwcomeau.com/react/dark-mode/)
diff --git a/src/site/content/en/blog/building-a-toast-component/index.md b/src/site/content/en/blog/building-a-toast-component/index.md
new file mode 100644
index 00000000000..c223219b45d
--- /dev/null
+++ b/src/site/content/en/blog/building-a-toast-component/index.md
@@ -0,0 +1,473 @@
+---
+title: Building a toast component
+subhead: A foundational overview of how to build an adaptive and accessible toast component.
+authors:
+  - adamargyle
+description: A foundational overview of how to build an adaptive and accessible toast component.
+date: 2021-12-08
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/kVA6GT6GamdvCskUpLme.png
+alt: A few toast examples like 'In cart' and 'Added to Playlist'.
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KvDOz8UzG3yLfDkkqqsI.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+---
+
+In this post I want to share thinking on how to build a toast component. Try the
+[demo](https://gui-challenges.web.app/toast/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/HuT5ZhOBd9ZPMcxR8W92.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/toast/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'R75ZVW4LW5o' %}
+
+## Overview
+
+Toasts are non-interactive, passive, and asynchronous short messages for users.
+Generally they are used as an interface feedback pattern for informing the user
+about the results of an action.
+
+{% Aside %} [Toast
+component](https://developer.android.com/guide/topics/ui/notifiers/toasts) on
+Android {% endAside %}
+
+### Interactions
+
+Toasts are unlike notifications,
+[alerts](https://developer.mozilla.org/docs/Web/API/Window/alert) and
+[prompts](https://developer.mozilla.org/docs/Web/API/Window/prompt) because
+they're not interactive; they're not meant to be dismissed or persist.
+Notifications are for more important information, synchronous messaging that
+requires interaction, or system level messages (as opposed to page level).
+Toasts are more passive than other notice strategies.
+
+## Markup
+
+The
+[`<output>`](https://html.spec.whatwg.org/multipage/form-elements.html#the-output-element)
+element is a good choice for the toast because it is announced to screen
+readers. Correct HTML provides a safe base for us to enhance with JavaScript and
+CSS, and there will be lots of JavaScript. 
+
+### A toast
+
+```html
+<output class="gui-toast">Item added to cart</output>
+```
+
+It can be [more
+inclusive](https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html#:~:text=WCAG%20success%20criteria.-,Inclusive%20UX%20of%20a%20toast,-A%20toast%20component)
+by adding [`role="status"`](https://w3c.github.io/aria/#status). This provides a
+fallback if the browser doesn't give `<output>` elements the [implicit
+role](https://developer.mozilla.org/docs/Web/HTML/Element/output#:~:text=accepts%20phrasing%20content.-,Implicit%20ARIA%20role,-status)
+per the spec. 
+
+```html
+<output role="status" class="gui-toast">Item added to cart</output>
+```
+
+### A toast container
+
+More than one toast can be shown at a time. In order to orchestrate multiple
+toasts, a container is used. This container also handles the position of the
+toasts on the screen.
+
+```html
+<section class="gui-toast-group">
+  <output role="status">Wizard Rose added to cart</output>
+  <output role="status">Self Watering Pot added to cart</output>
+</section>
+```
+
+## Layouts
+
+I chose to pin toasts to the
+[`inset-block-end`](https://developer.mozilla.org/docs/Web/CSS/inset-block-end)
+of the viewport, and if more toasts are added, they stack from that screen edge.
+
+### GUI container 
+
+The toasts container does all the layout work for presenting toasts. It's
+`fixed` to the viewport and uses the logical property
+[`inset`](https://developer.mozilla.org/docs/Web/CSS/inset) to specify which
+edges to pin to, plus a little bit of `padding` from the same `block-end` edge.
+
+```css
+.gui-toast-group {
+  position: fixed;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  padding-block-end: 5vh;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/yJfP9FLqpngoR9zIm35J.png", alt="Screenshot with DevTools box size and padding overlayed on a .gui-toast-container element.", width="800", height="248" %}
+
+In addition to positioning itself within the viewport, the toast container is a
+grid container that can align and distribute toasts. Items are centered as a
+group with `justify-content` and individually centered with `justify-items`.
+Throw in a little bit of `gap` so toasts don't touch.
+
+```css
+.gui-toast-group {
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+  gap: 1vh;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/kaTSVr7KToPBYqDXKE4T.png",
+alt="Screenshot with the CSS grid overlay on the toast group, this time
+highlighting the space and gaps between toast child elements.", width="800",
+height="292" %}
+
+### GUI Toast
+
+An individual toast has some `padding`, some softer corners with
+[`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius),
+and a [`min()`](https://developer.mozilla.org/docs/Web/CSS/min()) function to
+aid in mobile and desktop sizing. The responsive size in the following CSS
+prevents toasts growing wider than 90% of the viewport or
+[`25ch`](https://developer.mozilla.org/docs/Web/CSS/length).
+
+```css
+.gui-toast {
+  max-inline-size: min(25ch, 90vw);
+  padding-block: .5ch;
+  padding-inline: 1ch;
+  border-radius: 3px;
+  font-size: 1rem;
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/fxZbpWDiuZCfpY2Cxq6A.png",
+alt="Screenshot of a single .gui-toast element, with the padding and border
+radius shown.", width="800", height="223" %}
+
+## Styles
+
+With layout and positioning set, add CSS that helps with adapting to user
+settings and interactions.
+
+### Toast container
+
+Toasts are not interactive, tapping or swiping on them doesn't do anything, but
+they do currently consume pointer events. Prevent the toasts from stealing
+clicks with the following CSS.
+
+```css
+.gui-toast-group {
+  pointer-events: none;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/3uDub8eM8qYAepz6lbX0.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" %}
+
+### GUI Toast
+
+Give the toasts a light or dark adaptive theme with custom properties, HSL and a
+preference media query.
+
+```css
+.gui-toast {
+  --_bg-lightness: 90%;
+
+  color: black;
+  background: hsl(0 0% var(--_bg-lightness) / 90%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .gui-toast {
+    color: white;
+    --_bg-lightness: 20%;
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/AUzcAPLccQdvIL2bR3pd.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" %}
+
+### Animation
+
+A new toast should present itself with an animation as it enters the screen.
+Accommodating reduced motion is done by setting `translate` values to `0` by
+default, but updating the motion value to a length in a motion preference media
+query . Everyone gets some animation, but only some users have the toast travel
+a distance.
+
+Here are the keyframes used for the toast animation. CSS will be controlling the
+entrance, the wait, and the exit of the toast, all in one animation. 
+
+```css
+@keyframes fade-in {
+  from { opacity: 0 }
+}
+
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+
+@keyframes slide-in {
+  from { transform: translateY(var(--_travel-distance, 10px)) }
+}
+```
+
+The toast element then sets up the variables and orchestrates the keyframes.
+
+```css
+.gui-toast {
+  --_duration: 3s;
+  --_travel-distance: 0;
+
+  will-change: transform;
+  animation: 
+    fade-in .3s ease,
+    slide-in .3s ease,
+    fade-out .3s ease var(--_duration);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .gui-toast {
+    --_travel-distance: 5vh;
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/QeeF8vZ5gbXrxfp7EjRf.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" %}
+
+## JavaScript
+
+With the styles and screen reader accessible HTML ready, JavaScript is needed to
+orchestrate the creation, addition, and destruction of toasts based on user
+events. The developer experience of the toast component should be minimal and
+easy to get started with, like this:
+
+```js
+import Toast from './toast.js'
+
+Toast('My first toast')
+```
+
+### Creating the toast group and toasts
+
+When the toast module loads from JavaScript, it must create a toast container
+and add it to the page. I chose to add the element before `body`, this will make
+`z-index` stacking issues unlikely as the container is above the container for
+all the body elements. 
+
+```js
+const init = () => {
+  const node = document.createElement('section')
+  node.classList.add('gui-toast-group')
+
+  document.firstElementChild.insertBefore(node, document.body)
+  return node
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3O34m8U5Z6BsLUwzcKDx.png",
+alt="Screenshot of the toast group between the head and body tags.",
+width="800", height="308" %}
+
+The `init()` function is called internally to the module, stashing the element
+as `Toaster`:
+
+```js
+const Toaster = init()
+```
+
+Toast HTML element creation is done with the `createToast()` function. The
+function requires some text for the toast, creates an `<output>` element, adorns
+it with some classes and attributes, sets the text, and returns the node.
+
+```js
+const createToast = text => {
+  const node = document.createElement('output')
+  
+  node.innerText = text
+  node.classList.add('gui-toast')
+  node.setAttribute('role', 'status')
+
+  return node
+}
+```
+
+### Managing one or many toasts
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/3slAqrQiWDmnBnEgSPYz.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true" %}
+
+JavaScript now adds a container to the document for containing toasts and is
+ready to add created toasts. The `addToast()` function orchestrates handling one
+or many toasts. First checking the number of toasts, and whether motion is ok,
+then using this information to either append the toast or do some fancy
+animation so the other toasts appear to "make room" for the new toast.
+
+```js
+const addToast = toast => {
+  const { matches:motionOK } = window.matchMedia(
+    '(prefers-reduced-motion: no-preference)'
+  )
+
+  Toaster.children.length && motionOK
+    ? flipToast(toast)
+    : Toaster.appendChild(toast)
+}
+```
+
+When adding the first toast, `Toaster.appendChild(toast)` adds a toast to the
+page triggering the CSS animations: animate in, wait `3s`, animate out.
+`flipToast()` is called when there are existing toasts, employing a technique
+called [FLIP](https://aerotwist.com/blog/flip-your-animations/) by [Paul
+Lewis](https://twitter.com/aerotwist). The idea is to calculate the difference
+in positions of the container, before and after the new toast has been added.
+Think of it like marking where the Toaster is now, where it's going to be, then
+animating from where it was to where it is. 
+
+{% Aside 'key-term' %}
+FLIP stands for: First, Last, Invert, and Play. A handy acronym to assist in understanding the animation concept.
+{% endAside %}
+
+```js
+const flipToast = toast => {
+  // FIRST
+  const first = Toaster.offsetHeight
+
+  // add new child to change container size
+  Toaster.appendChild(toast)
+
+  // LAST
+  const last = Toaster.offsetHeight
+
+  // INVERT
+  const invert = last - first
+
+  // PLAY
+  const animation = Toaster.animate([
+    { transform: `translateY(${invert}px)` },
+    { transform: 'translateY(0)' }
+  ], {
+    duration: 150,
+    easing: 'ease-out',
+  })
+}
+```
+
+CSS grid does the lifting of the layout. When a new toast is added, grid puts it
+at the start and spaces it with the others. Meanwhile, a [web
+animation](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) is
+used to animate the container from the old position. 
+
+### Putting all the JavaScript together 
+
+When `Toast('my first toast')` is called, a toast is created, added to the page
+(maybe even the container is animated to accommodate the new toast), a
+[promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+is returned and the created toast is
+[watched](https://developer.mozilla.org/docs/Web/API/Element/getAnimations) for
+CSS animation completion (the three keyframe animations) for promise resolution.
+
+
+```js
+const Toast = text => {
+  let toast = createToast(text)
+  addToast(toast)
+
+  return new Promise(async (resolve, reject) => {
+    await Promise.allSettled(
+      toast.getAnimations().map(animation => 
+        animation.finished
+      )
+    )
+    Toaster.removeChild(toast)
+    resolve() 
+  })
+}
+```
+
+I felt the confusing part of this code is in the `Promise.allSettled()` function
+and `toast.getAnimations()` mapping. Since I used multiple keyframe animations
+for the toast, to confidently know all of them have finished, each must be
+requested from JavaScript and each of their
+[`finished`](https://developer.mozilla.org/docs/Web/API/Animation/finished)
+promises observed for completion.
+[`allSettled`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)
+does that work for us, resolving itself as complete once all of its promises
+have been fulfilled. Using `await Promise.allSettled()` means the next line of
+code can confidently remove the element and assume the toast has completed its
+lifecycle. Finally, calling `resolve()` fulfills the high level Toast promise so
+developers can clean up or do other work once the toast has shown.
+
+```js
+export default Toast
+```
+
+Last, the `Toast` function is exported from the module, for other scripts to
+import and use.
+
+### Using the Toast component
+
+Using the toast, or the toast's developer experience, is done by importing the
+`Toast` function and calling it with a message string.
+
+```js
+import Toast from './toast.js'
+
+Toast('Wizard Rose added to cart')
+```
+
+If the developer wants to do clean up work or whatever, after the toast has
+shown, they can use async and
+[await](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await).
+
+
+```js
+import Toast from './toast.js'
+
+async function example() {
+  await Toast('Wizard Rose added to cart')
+  console.log('toast finished')
+}
+```
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂 
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- [@_developit](https://twitter.com/_developit) with HTML/CSS/JS: [demo & code](https://jsfiddle.net/developit/v293tnaj/)
+- [Joost van der Schee](https://twitter.com/jhvanderschee) with HTML/CSS/JS: [demo & code](https://codepen.io/joosts/pen/PoJzGpm)
diff --git a/src/site/content/en/blog/building-a-tooltip-component/index.md b/src/site/content/en/blog/building-a-tooltip-component/index.md
new file mode 100644
index 00000000000..a2e96fb790a
--- /dev/null
+++ b/src/site/content/en/blog/building-a-tooltip-component/index.md
@@ -0,0 +1,722 @@
+---
+layout: post
+title: Building a tooltip component
+subhead: A foundational overview of how to build a color-adaptive and accessible tooltip custom element.
+authors:
+  - adamargyle
+description: A foundational overview of how to build a color-adaptive and accessible tooltip custom element.
+date: 2022-10-25
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Mx5dDmELgbJottijzfwF.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/5XgqLJdeI33MDjvJu2te.png
+alt: A tiled grid of tooltips.
+tags:
+  - blog
+  - css
+  - html
+---
+
+In this post I want to share my thoughts on how to build a color-adaptive and accessible `<tool-tip>` custom element. [Try the
+demo](https://gui-challenges.web.app/tooltips/dist/) and [view the
+source](https://github.com/argyleink/gui-challenges)!
+
+<style>
+  .auto-aspect {
+    aspect-ratio: auto;
+  }
+</style>
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/pLo4ykDKsCiyDexUb208.mp4",
+    autoplay="true",
+    controls="true", 
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    A tooltip is shown working across a variety of examples and color schemes
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'Y5EIC_UyPME' %}
+
+## Overview
+
+A tooltip is a non-modal, non-blocking, non-interactive overlay containing
+supplemental information to user interfaces. It is hidden by default and becomes
+unhidden when an associated element is hovered or focused. A tooltip can't be
+selected or interacted with directly. Tooltips are not replacements for labels
+or other high value information, a user should be able to fully complete their
+task without a tooltip.
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/b2K0zdHds4yQQNST7DUj.png", width="800", height="245", alt="" %}
+  <figcaption>
+    Do: always label your inputs.<br>
+    Don't: rely on tooltips instead of labels
+  </figcaption>
+</figure>
+
+### Toggletip vs Tooltip
+
+Like many components, there are varying descriptions of what a tooltip is, for
+example in
+[MDN](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/tooltip_role),
+[WAI ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/), [Sarah
+Higley](https://sarahmhigley.com/writing/tooltips-in-wcag-21/), and [Inclusive
+Components](https://inclusive-components.design/tooltips-toggletips/). I like
+the separation between tooltips and toggletips. A tooltip should contain
+non-interactive supplemental information, while a toggletip can contain
+interactivity and important information. The primary reason for the divide is
+accessibility, how are users expected to navigate to the popup and have access
+to the information and buttons within. Toggletips get complex quickly.
+
+Here's a video of a toggletip from the [Designcember](https://designcember.com/)
+site; an overlay with interactivity that a user can pin open and explore, then
+close with light dismiss or the escape key:
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/DM7qi0GUBZQGpR2qvMst.mp4",
+  autoplay="true",
+  controls="true", 
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+This GUI Challenge went the route of a tooltip, looking to do almost everything
+with CSS, and here's how to build it.
+
+## Markup
+
+I chose to use a custom element `<tool-tip>`. Authors don't need to make custom
+elements into web components if they don't want to. The browser will treat
+`<foo-bar>` just like a `<div>`. You could think of a custom element like a
+classname with less specificity. There's no JavaScript involved.
+
+```html
+<tool-tip>A tooltip</tool-tip>
+```
+
+This is like a div with some text inside. We can tie into the accessibility tree
+of capable screen readers by adding `[role="tooltip"]`.
+
+```html
+<tool-tip role="tooltip">A tooltip</tool-tip>
+```
+
+Now, to screen readers, it's recognized as a tooltip. See in the following
+example how the first link element has a recognized tooltip element in its tree
+and the second does not? The second one doesn't have the role. In the styles
+section we'll improve upon this tree view.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/yFjZc6VXnJhXPBKk6nGA.png", alt="A
+screenshot of Chrome DevTools Accessibility Tree representing the HTML. Shows a
+link with text 'top ; Has tooltip: Hey, a tooltip!' that's focusable. Inside of
+it is static text of 'top' and a tooltip element.", width="800", height="268" %}
+
+Next we need the tooltip to not be focusable. If a screen reader doesn't
+understand the tooltip role it will allow users to focus the `<tool-tip>` to
+read the contents, and the user experience doesn't need this. Screen readers
+will append the content to the parent element and as such, it doesn't need focus
+to be made accessible. Here we can use `inert` to ensure no users will
+accidentally find this tooltip content in their tab flow:
+
+```html
+<tool-tip inert role="tooltip">A tooltip</tool-tip>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/sNBvSvyOyfJQdu2viQHs.png",
+alt="Another screenshot of Chrome DevTools Accessibility Tree, this time the
+tooltip element is missing.", width="800", height="77" %}
+
+I then chose to use attributes as the interface to specify the position of the
+tooltip. By default all the `<tool-tip>`s will assume a "top" position, but the
+position can be customized on an element by adding `tip-position`:
+
+```html
+<tool-tip role="tooltip" tip-position="right ">A tooltip</tool-tip>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/TMXICYtLqsuCEUrOROOn.png", alt="A
+screenshot of a link with a tooltip to the right saying 'A tooltip'.",
+width="800", height="155" %}
+
+I tend to use attributes instead of classes for things like this so that the
+`<tool-tip>` can't have multiple positions assigned to it at the same time.
+There can be only one or none.
+
+Finally, place `<tool-tip>` elements inside of the element you wish to provide a
+tooltip for. Here I share the `alt` text with sighted users by placing an image
+and a `<tool-tip>` inside of a
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture)
+element:
+
+```html
+<picture>
+  <img alt="The GUI Challenges skull logo" width="100" src="...">
+  <tool-tip role="tooltip" tip-position="bottom">
+    The <b>GUI Challenges</b> skull logo
+  </tool-tip>
+</picture>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/JeKL6O5gpZTaqdAdY20w.png", alt="A
+screenshot of an image with a tooltip that says 'The GUI Challenges skull
+logo'.", width="800", height="552" %}
+
+Here I place a `<tool-tip>` inside of an
+[`<abbr>`](https://developer.mozilla.org/docs/Web/HTML/Element/abbr)
+element:
+
+```html
+<p>
+  The <abbr>HTML <tool-tip role="tooltip" tip-position="top">Hyper Text Markup Language</tool-tip></abbr> abbr element.
+</p>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/AfXJazViIAf8ONlI3AxF.png", alt="A
+screenshot of a paragraph with the acronym HTML underlined and a tooltip above
+it saying 'Hyper Text Markup Language'.", width="512", height="250" %}
+
+## Accessibility
+
+Since I've chosen to build tooltips and not toggletips, this section is much
+simpler. First, let me outline what our desired user experience:
+
+1. In constrained spaces or cluttered interfaces, hide supplemental messages.
+1. When a user hovers, focuses or uses touch to interact with an element, reveal
+   the message.
+1. When hover, focus or touch ends, hide the message again.
+1. Lastly, ensure any motion is reduced if a user has specified a preference for
+   reduced motion.
+
+Our goal is on demand supplemental messaging. A sighted mouse or keyboard user can hover to reveal the message, reading it with their eyes. A non-sighted screen reader user can focus to reveal the message, audibly receiving it through their tool.
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/UysCSNx4AhGBPeStZ3CU.png", width="800", height="189", alt="" %}
+  <figcaption>
+    Screenshot of MacOS VoiceOver reading a link with a tooltip
+  </figcaption>
+</figure>
+
+In the previous section we covered the accessibility tree, the tooltip role and
+inert, what's left is to test it and verify the user experience appropriately
+reveals the tooltip message to the user. Upon testing, it's unclear as to which
+part of the audible message is a tooltip. It can be seen while debugging in the
+accessibility tree too, the link text of "top" is run together, without
+hesitation, with "Look, tooltips!". The screen reader doesn't break or identify
+the text as tooltip content.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wfn1xsgRMUuQxG4SXfT4.png", alt="A
+screenshot of the Chrome DevTools Accessibility Tree where the link text says
+'top Hey, a tooltip!'.", width="800", height="106" %}
+
+Add a screen reader only pseudo-element to the `<tool-tip>` and we can add our
+own prompt text for non-sighted users.
+
+```css
+&::before {
+  content: "; Has tooltip: ";
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+```
+
+Below you can see the updated accessibility tree, which now has a semicolon
+after the link text and a prompt for the tooltip "Has tooltip: ".
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/cLTxacpxlsqNQtO2fTi4.png",
+alt="An updated screenshot of the Chrome DevTools Accessibility Tree where the
+link text has improved phrasing, 'top ; Has tooltip: Hey, a tooltip!'.",
+width="800", height="82" %}
+
+Now, when a screen reader user focuses the link, it says "top" and takes a small
+pause, then announces "has tooltip: look, tooltips". This gives a screen reader
+user a couple nice UX hints. The hesitation gives a nice separation between the
+link text and the tooltip. Plus, when "has tooltip" is announced, a screen
+reader user can easily cancel it if they've already heard it before. It's very
+reminiscent to hovering and unhovering quickly, as you've already seen the
+supplemental message. This felt like nice UX parity.
+
+## Styles
+
+The `<tool-tip>` element will be a child of the element it's representing
+supplemental messaging for, so let's first start with the essentials for the
+overlay effect. Take it out of document flow with `position absolute`:
+
+```css
+tool-tip {
+  position: absolute;
+  z-index: 1;
+}
+```
+
+If the parent is not a stacking context, the tooltip will position itself to the
+nearest one that is, which isn't what we want. There's a new selector on the
+block that can help, [`:has()`](https://developer.chrome.com/blog/has-m105/):
+
+{% BrowserCompat 'css.selectors.has' %}
+
+```css
+:has(> tool-tip) {
+  position: relative;
+}
+```
+
+Don't worry too much about the browser support. First, remember these tooltips
+are supplementary. If they don't work it should be fine. Second, in the
+JavaScript section we'll deploy a script to polyfill the functionality we need
+for browsers without `:has()` support.
+
+Next, let's make the tooltips non-interactive so they don’t steal pointer events
+from their parent element:
+
+```css
+tool-tip {
+  …
+  pointer-events: none;
+  user-select: none;
+}
+```
+
+Then, hide the tooltip with opacity so we can transition the tooltip with a
+crossfade:
+
+```css
+tool-tip {
+  opacity: 0;
+}
+
+:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
+  opacity: 1;
+}
+```
+
+[`:is()`](https://developer.mozilla.org/docs/Web/CSS/:is) and `:has()` do
+the heavy lifting here, making `tool-tip` containing parent elements aware of
+user interactivity as to toggle the visibility of a child tooltip. Mouse users
+can hover, keyboard and screen reader users can focus, and touch users can tap.
+
+{% Aside %}
+I think the reality of this tooltip solution is that touch users get
+the worst experience, as they need to hold their finger over the element to see
+the tooltip. Really ensure these tooltips are supplemental information.
+{% endAside %}
+
+With the show and hide overlay working for sighted users, it's time to add some
+styles for theming, positioning and adding the triangle shape to the bubble. The
+following styles begin using custom properties, building upon where we are so
+far but also adding shadows, typography and colors so it looks like a floating
+tooltip:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ofzjTXNlID2kGJsL4MYo.png", alt="A
+screenshot of the tooltip in dark mode, floating over the link 'block-start'.",
+width="796", height="272" %}
+
+```css
+tool-tip {
+  --_p-inline: 1.5ch;
+  --_p-block: .75ch;
+  --_triangle-size: 7px;
+  --_bg: hsl(0 0% 20%);
+  --_shadow-alpha: 50%;
+
+  --_bottom-tip: conic-gradient(from -30deg at bottom, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) bottom / 100% 50% no-repeat;
+  --_top-tip: conic-gradient(from 150deg at top, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) top / 100% 50% no-repeat;
+  --_right-tip: conic-gradient(from -120deg at right, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
+  --_left-tip: conic-gradient(from 60deg at left, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;
+
+  pointer-events: none;
+  user-select: none;
+
+  opacity: 0;
+  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
+  transition: opacity .2s ease, transform .2s ease;
+
+  position: absolute;
+  z-index: 1;
+  inline-size: max-content;
+  max-inline-size: 25ch;
+  text-align: start;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: normal;
+  line-height: initial;
+  padding: var(--_p-block) var(--_p-inline);
+  margin: 0;
+  border-radius: 5px;
+  background: var(--_bg);
+  color: CanvasText;
+  will-change: filter;
+  filter:
+    drop-shadow(0 3px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
+    drop-shadow(0 12px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
+}
+
+/* create a stacking context for elements with > tool-tips */
+:has(> tool-tip) {
+  position: relative;
+}
+
+/* when those parent elements have focus, hover, etc */
+:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
+  opacity: 1;
+  transition-delay: 200ms;
+}
+
+/* prepend some prose for screen readers only */
+tool-tip::before {
+  content: "; Has tooltip: ";
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+/* tooltip shape is a pseudo element so we can cast a shadow */
+tool-tip::after {
+  content: "";
+  background: var(--_bg);
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  mask: var(--_tip);
+}
+
+/* top tooltip styles */
+tool-tip:is(
+  [tip-position="top"],
+  [tip-position="block-start"],
+  :not([tip-position]),
+  [tip-position="bottom"],
+  [tip-position="block-end"]
+) {
+  text-align: center;
+}
+```
+
+### Theme adjustments
+
+The tooltip only has a few colors to manage as the text color is inherited from
+the page via the system keyword `CanvasText`. Also, since we've made custom
+properties to store the values, we can update only those custom properties and
+let the theme handle the rest:
+
+```css
+@media (prefers-color-scheme: light) {
+  tool-tip {
+    --_bg: white;
+    --_shadow-alpha: 15%;
+  }
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/mdoUK4pOHiyf4jcgpACG.png", alt="A
+side by side screenshot of the light and dark versions of the tooltip.",
+width="800", height="153" %}
+
+For the light theme, we adapt the background to white and make the shadows much
+less strong by adjusting their opacity.
+
+### Right to left
+
+In order to support right to left reading modes, a custom property will store
+the value of the document direction into a value of -1 or 1 respectively.
+
+```css
+tool-tip {
+  --isRTL: -1;
+}
+
+tool-tip:dir(rtl) {
+  --isRTL: 1;
+}
+```
+
+This can be used to assist in positioning the tooltip:
+
+```css
+tool-tip[tip-position="top"]) {
+  --_x: calc(50% * var(--isRTL));
+}
+```
+
+As well as assist in where the triangle is:
+
+```css
+tool-tip[tip-position="right"]::after {
+  --_tip: var(--_left-tip);
+}
+
+tool-tip[tip-position="right"]:dir(rtl)::after {
+  --_tip: var(--_right-tip);
+}
+```
+
+Lastly, can also be used for logical transforms on `translateX()`:
+
+```css
+--_x: calc(var(--isRTL) * -3px * -1);
+```
+
+### Tooltip positioning
+
+Position the tooltip logically with the `inset-block` or `inset-inline`
+properties to handle both the physical and logical tooltip positions. The
+following code shows how each of the four positions are styled for both
+left-to-right and right-to-left directions.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Qi9AZrjpX4s9Nzoe1yZX.mp4",
+  autoplay="true",
+  controls="true", 
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+#### Top and block-start alignment
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/XPtm4jrENpk3wt7p1e4V.png", alt="A
+screenshot showing the placement difference between left-to-right top position
+and right-to-left top position.", width="800", height="191" %}
+
+```css
+tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position])) {
+  inset-inline-start: 50%;
+  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
+  --_x: calc(50% * var(--isRTL));
+}
+
+tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))::after {
+  --_tip: var(--_bottom-tip);
+  inset-block-end: calc(var(--_triangle-size) * -1);
+  border-block-end: var(--_triangle-size) solid transparent;
+}
+```
+
+#### Right and inline-end alignment
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/HyTs2tuKcPbmHnH3BVor.png", alt="A
+screenshot showing the placement difference between left-to-right right position
+and right-to-left inline-end position.", width="800", height="421" %}
+
+```css
+tool-tip:is([tip-position="right"], [tip-position="inline-end"]) {
+  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
+  inset-block-end: 50%;
+  --_y: 50%;
+}
+
+tool-tip:is([tip-position="right"], [tip-position="inline-end"])::after {
+  --_tip: var(--_left-tip);
+  inset-inline-start: calc(var(--_triangle-size) * -1);
+  border-inline-start: var(--_triangle-size) solid transparent;
+}
+
+tool-tip:is([tip-position="right"], [tip-position="inline-end"]):dir(rtl)::after {
+  --_tip: var(--_right-tip);
+}
+```
+
+#### Bottom and block-end alignment
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CgSlkA2Styscf9rDRAnf.png", alt="A
+screenshot showing the placement difference between left-to-right bottom
+position and right-to-left block-end position.", width="800", height="216" %}
+
+```css
+tool-tip:is([tip-position="bottom"], [tip-position="block-end"]) {
+  inset-inline-start: 50%;
+  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
+  --_x: calc(50% * var(--isRTL));
+}
+
+tool-tip:is([tip-position="bottom"], [tip-position="block-end"])::after {
+  --_tip: var(--_top-tip);
+  inset-block-start: calc(var(--_triangle-size) * -1);
+  border-block-start: var(--_triangle-size) solid transparent;
+}
+```
+
+#### Left and inline-start alignment
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ASyNnVtZ8bp9VuwFgfH2.png", alt="A
+screenshot showing the placement difference between left-to-right left position
+and right-to-left inline-start position.", width="800", height="486" %}
+
+```css
+tool-tip:is([tip-position="left"], [tip-position="inline-start"]) {
+  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
+  inset-block-end: 50%;
+  --_y: 50%;
+}
+
+tool-tip:is([tip-position="left"], [tip-position="inline-start"])::after {
+  --_tip: var(--_right-tip);
+  inset-inline-end: calc(var(--_triangle-size) * -1);
+  border-inline-end: var(--_triangle-size) solid transparent;
+}
+
+tool-tip:is([tip-position="left"], [tip-position="inline-start"]):dir(rtl)::after {
+  --_tip: var(--_left-tip);
+}
+```
+
+## Animation
+
+So far we've only toggled the visibility of the tooltip. In this section we'll
+first animate opacity for all users, as it's a generally safe reduced motion
+transition. Then we'll animate the transform position so the tooltip appears to
+slide out from the parent element.
+
+### A safe and meaningful default transition
+
+Style the tooltip element to transition opacity and transform, like this:
+
+```css
+tool-tip {
+  opacity: 0;
+  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
+  transition: opacity .2s ease, transform .2s ease;
+}
+
+:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
+  opacity: 1;
+  transition-delay: 200ms;
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/zCibybxd4947z1qLnGEP.mp4",
+  autoplay="true",
+  controls="true", 
+  loop="true",
+  muted="true"
+%}
+
+### Adding motion to the transition
+
+For each of the sides a tooltip can appear on, if the user is ok with motion,
+slightly position the translateX property by giving it a small distance to
+travel from:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  :has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:focus-visible):not(:active) tool-tip {
+    --_y: 3px;
+  }
+
+  :has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
+    --_x: -3px;
+  }
+
+  :has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
+    --_y: -3px;
+  }
+
+  :has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
+    --_x: 3px;
+  }
+}
+```
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/OUglbz54FT80hEZY5ouw.mp4",
+  autoplay="true",
+  controls="true", 
+  loop="true",
+  muted="true"
+%}
+
+Notice this is setting the "out" state, as the "in" state is at `translateX(0)`.
+
+## JavaScript
+
+In my opinion, the JavaScript is optional. This is because none of these
+tooltips should be required reading to accomplish a task in your UI. So if the
+tooltips completely fail, it should be no big deal. This also means we can treat
+the tooltips as progressively enhanced. Eventually all browsers will support
+`:has()` and this script can completely go away.
+
+The polyfill script does two things, and does so only if the browser doesn't
+support `:has()`. First, check for `:has()` support:
+
+```js
+if (!CSS.supports('selector(:has(*))')) {
+  // do work
+}
+```
+
+Next, find the parent elements of `<tool-tip>`s and give them a classname to
+work with:
+
+```js
+if (!CSS.supports('selector(:has(*))')) {
+  document.querySelectorAll('tool-tip').forEach(tooltip =>
+    tooltip.parentNode.classList.add('has_tool-tip'))
+}
+```
+
+Next, inject a set of styles that use that classname, simulating the `:has()`
+selector for the exact same behavior:
+
+```js
+if (!CSS.supports('selector(:has(*))')) {
+  document.querySelectorAll('tool-tip').forEach(tooltip =>
+    tooltip.parentNode.classList.add('has_tool-tip'))
+
+  let styles = document.createElement('style')
+  styles.textContent = `
+    .has_tool-tip {
+      position: relative;
+    }
+    .has_tool-tip:is(:hover, :focus-visible, :active) > tool-tip {
+      opacity: 1;
+      transition-delay: 200ms;
+    }
+  `
+  document.head.appendChild(styles)
+}
+```
+
+That's it, now all browsers will happily show the tooltips if `:has()` is not
+supported.
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂 I'm really looking forward to
+the
+[`popup`](https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/)
+API for making toggletips easier, [top
+layer](https://developer.chrome.com/blog/what-is-the-top-layer/) for no z-index
+battles, and the
+[`anchor`](https://twitter.com/jh3yy/status/1563206768049926144?s=20&t=MiEcoMGyRHr5eS_CtWLsmg)
+API for positioning things in the window better. Until then, I'll be making
+tooltips.
+
+Let's diversify our approaches and learn all the ways to build on the web.
+
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+*Nothing to see here yet.*
+
+### Resources
+
+- [Source code](https://github.com/argyleink/gui-challenges/tree/main/tooltips) on Github
diff --git a/src/site/content/en/blog/building-an-adaptive-favicon/index.md b/src/site/content/en/blog/building-an-adaptive-favicon/index.md
new file mode 100644
index 00000000000..e1651f6c6de
--- /dev/null
+++ b/src/site/content/en/blog/building-an-adaptive-favicon/index.md
@@ -0,0 +1,265 @@
+---
+title: Building an adaptive favicon
+subhead: A foundational overview of how to build an adaptive favicon.
+authors:
+  - adamargyle
+description: A foundational overview of how to build an adaptive favicon.
+date: 2022-02-09
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/UGZpusKrxwNKE15Cm2lV.png
+alt: Chrome, Firefox and Safari shown, in light and dark themes, showcasing the favicon.
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/on4LayLT6bZOGcfyPIYa.png
+tags:
+  - blog
+  - css
+  - svg
+---
+
+In this post I want to share thinking on how to build an adaptive favicon with
+SVG. Try the [demo](https://gui-challenges.web.app/svg-favicon/dist/).
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/SfYwSCUREc4XrS0ZAiZN.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Browser tabs shown adapting to MacOS system light and dark theme changes. 
+    <a href="https://gui-challenges.web.app/svg-favicon/dist/">Try the Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube '4pJahmCR8kQ' %}
+
+## Overview
+
+A custom [favicon](https://developer.mozilla.org/docs/Glossary/Favicon) is
+a great way to polish a web project. It displays on desktop browser tabs, and
+also inside "save for later" readers, other blog posts linking to your site, and
+more. Traditionally this has been done with the `.ico` file type, but recently
+browsers have allowed use of
+[SVG](https://developer.mozilla.org/docs/Web/SVG), a vector format. Using
+[progressive
+enhancement](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement)
+you can  serve well supported `.ico` favicons, and upgrade to an `.svg` if
+available.
+
+<!-- {% BrowserCompat 'api.linkIconSVG' %} -->
+
+{% Aside %}
+As of writing this, [SVG favicons](https://caniuse.com/link-icon-svg) 
+allowing inline media queries are supported in Firefox and Chromium based browsers.
+{% endAside %}
+
+[SVG is able](https://css-tricks.com/lodge/svg/) to scale up and down without
+quality loss, and can potentially be very small in size, they can also have
+embedded CSS, even embedded media queries. This means if an SVG favicon is used
+in a reader app or bookmarks bars, there's a chance the user could get a theme
+relevant (light or dark) icon due to dark preference styles provided inside the
+SVG. The SVG then adapts using its embedded styling for light and dark user
+preferences.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/c8pUK6HOlCuehgtqzFci.png",
+alt="Large and easy to distinguish light and dark favicon examples.",
+width="800", height="450" %}
+
+<figure>
+  {% 
+    Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FAQmbKaraEnMyAeQEUOP.png", 
+    alt="Light and dark tabs in each browser providing an 
+    overview of the adaptive icon from top to bottom: 
+    Safari, Firefox, Chrome.", 
+    width="508", 
+    height="477" 
+  %}
+  <figcaption>
+    Light and dark tabs in each browser providing an 
+    overview of the adaptive icon from top to bottom: 
+    Safari, Firefox, Chrome.
+  </figcaption>
+</figure>
+
+## Markup
+
+SVG markup is
+[XML](https://developer.mozilla.org/docs/Web/XML/XML_introduction) using
+an `.svg` file type extension which allows it to hold more dynamic types of
+code. 
+
+### Start by making `favicon.svg`
+
+Make a new file called `favicon.svg` and add the following:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+
+</svg>
+```
+
+{% Aside %}
+This wrapping tag is similar to the `<html>` tag don't you think?
+{% endAside %}
+
+Here's my SVG file, I've sized the `viewBox` relevant to my artwork:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+
+</svg>
+```
+
+### Adding shapes and paths
+
+Next, add SVG path code. Often this means opening the SVG in a code editor, but
+that code is generally not human friendly. Here's a [great guide that guides you
+through exporting and optimizing SVG](https://css-tricks.com/using-svg/) from
+design tools.
+
+The artwork for this [GUI Challenge](/shows/gui-challenges/) came
+from a designer who made it in [Adobe
+Illustrator](https://www.adobe.com/products/illustrator.html). I heavily
+optimized it. I ran it through [SVGOMG](https://jakearchibald.github.io/svgomg/)
+and then hand-edited the cruft away.
+
+Here's an example of the `skull` artwork path group from mine, after cleaning
+it:
+
+```xml/1-5/
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+  <g id="skull">
+    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
+    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
+    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
+  </g>
+</svg>
+```
+
+Notice the human readable [ID
+selectors](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) like
+`#eyes-and-nose` and
+[classes](https://developer.mozilla.org/docs/Web/CSS/Class_selectors) like
+`.favicon-stroke`. These are from my hand editing, in preparation for CSS.
+Adding classes and ID's is not required for your SVG to be an adaptive favicon.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/McyYsaCZieXjS6SbD12v.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+### Link the favicon SVG from HTML
+
+In the `<head>` tag of your HTML, after the `.ico` favicon, add the following:
+
+```html/1/
+<link rel="icon" href="/favicon.ico" sizes="any">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+```
+
+As the new icon may look identical to the `.ico` version verify that it is being
+used. Open the Network panel of DevTools. Filter by images and search for
+favicon:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CkaevEiBqvQcnFouuJfX.png",
+alt="Screenshot of the Network pane from DevTools with a filter searched for
+favicon and the favicon.svg resource highlighted.", width="800", height="409" %}
+
+## Styles
+
+Like HTML, you can add a `<style>` tag to the markup for use against that
+document scope:
+
+```html/1-3/
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+  <style>
+    
+  </style>
+  …
+</svg>
+```
+
+The light theme version will be the default coloring of my favicon SVG. The
+styles I wrote for that were mostly stroke and fill colors:
+
+```html/2-8/
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+  <style>
+    .favicon-stroke {
+      stroke-width: 8px;
+      stroke: #8929ff;
+    }
+    #skull-outline { fill: white }
+    #eyes-and-nose, #hat-outline { fill: #8929ff }
+    #hat-fill, #hat-bill { fill: #e662e6 }
+  </style>
+  …
+</svg>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/L7VkSaYGIxnCnqU8NbCG.png",
+alt="Example light theme favicon preview.", width="720", height="720" %}
+
+Next, the most fun part, styling the dark theme version of your favicon. The
+styles for that will go into a media query within the style tag:
+
+```html/3-5/
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+  <style>
+    …
+    @media (prefers-color-scheme: dark) {
+      /* dark theme styles */
+    }
+  </style>
+  …
+</svg>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BhZE3VlQBrNtOW6yrLFZ.png",
+alt="Screenshot of DevTools showing the dark theme media query overwriting the
+fill color of the eyes and nose of the SVG.", width="800", height="662" %}
+
+Mine ended up like this:
+
+```html/3-8/
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
+  <style>
+    …
+    @media (prefers-color-scheme: dark) {
+      .favicon-stroke { stroke: #343a40 }
+      #skull-outline { fill: #adb5bd }
+      #hat-outline { fill: #343a40 }
+      #eyes-and-nose { fill: #343a40 }
+    }
+  </style>
+  …
+</svg>
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KAOmqplghJT2PrJlOgZ5.png",
+alt="Example dark theme favicon preview.", width="720", height="720" %}
+
+I chose to swap the bright purple borders for a nice cool dark gray (`#343a40`),
+changed the skull bone color from white to a light cool gray (`#adb5bd`), but
+left the pink accent hat.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/c8pUK6HOlCuehgtqzFci.png",
+alt="Preview of both light and dark favicons side by side.", width="800",
+height="450" %}
+
+## Conclusion
+
+Now that you know how I did it, how would you‽ 🙂 
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a demo, [tweet me](https://twitter.com/argyleink) links, and I'll add it
+to the community remixes section below!
+
+## Community remixes
+
+- Where I learned of this technique: [@tomayac](https://twitter.com/tomayac) on
+  his
+  [blog](https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/)
\ No newline at end of file
diff --git a/src/site/content/en/blog/building-chrometober/index.md b/src/site/content/en/blog/building-chrometober/index.md
new file mode 100644
index 00000000000..15d33fccfe3
--- /dev/null
+++ b/src/site/content/en/blog/building-chrometober/index.md
@@ -0,0 +1,1013 @@
+---
+layout: post
+title: Building Chrometober!
+subhead: How the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
+authors:
+  - jheyy
+description: How the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
+date: 2022-10-31
+thumbnail: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/yVQU4QE9veU6WuA8MCRq.jpg
+hero: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/yVQU4QE9veU6WuA8MCRq.jpg
+alt: Two carved Halloween pumpkins sit on a surface in the dark. They are glowing from being lit within presumably by candle light. Their reflections are shown in the surface.
+tags:
+  - engineering-blog
+  - blog
+  - css
+  - ux
+---
+Following on from [Designcember](https://designcember.com), we wanted to build Chrometober for you this year as a way to highlight and share web content from the community and Chrome team. Designcember showcased the use of Container Queries, but this year we're showcasing the CSS scroll-linked animations API.
+
+Check out the scrolling book experience at [web.dev/chrometober-2022](/chrometober-2022).
+
+{% Video
+  controls="true",
+  loop="true",
+  src="video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/nIBMYSqI5NRCFoLSbeNh.mp4"
+%}
+
+## Overview
+
+The goal of the project was to deliver a whimsical experience highlighting the scroll-linked animations API. But, whilst being whimsical, the experience needed to be responsive and accessible too. The project has also been a great way to test drive the API polyfill that is in active development; that, as well as trying different techniques and tools in combination. And all with a festive Halloween theme!
+
+Our team structure looked like this:
+
+- [Tyler Reed](https://twitter.com/intent/follow?screen_name=rudepetsclub): Illustration and design
+- [Jhey Tompkins](https://twitter.com/intent/follow?screen_name=jh3yy): Architectural and creative lead
+- [Una Kravets](https://twitter.com/intent/follow?screen_name=una): Project lead
+- [Bramus Van Damme](https://twitter.com/intent/follow?screen_name=bramus): Site contributor
+- [Adam Argyle](https://twitter.com/intent/follow?screen_name=argyleink): Accessibility review
+- Aaron Forinton: Copywriting
+
+## Drafting a scrollytelling experience
+
+The ideas for Chrometober started flowing at our first team offsite back in May 2022. A collection of scribbles had us thinking of ways in which a user could scroll their way along some form of storyboard. Inspired by video games, we considered a scrolling experience through scenes such as graveyards and a haunted house.
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/5teCNthBhFithDxWLXMv.jpg", alt="A notebook lies on a desk with various doodles and scribbles related to the project.", width="800", height="600" %}
+
+It was exciting to have the creative freedom to take my first Google project in an unexpected direction. This was an early prototype of how a user might navigate through the content.
+
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/MlfvDw4pl0NqRaRnu2rC.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "gOKbBVz",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+
+As the user scrolls sideways, the blocks rotate and scale in. But I decided to move away from this idea out of concern for how we could make this experience great for users on devices of all sizes. Instead, I leaned towards the design of something I'd made in the past. In 2020, I was fortunate to have access to [GreenSock's ScrollTrigger](https://greensock.com/scrolltrigger/) to build release demos.
+
+One of the demos I’d built was a 3D-CSS book where the pages turned as you scrolled, and this felt much more appropriate for what we wanted for Chrometober. The scroll-linked animations API is a perfect swap for that functionality. It also works well with `scroll-snap`, as you'll see!
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/FlOQAUsk6Md9Rya04Gkm.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "WNybYeP",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+Our illustrator for the project, [Tyler Reed](https://www.rudepets.club/), was great at altering the design as we changed ideas. Tyler did a fantastic job of taking all the creative ideas thrown at him and bringing them to life. It was a lot of fun brainstorming ideas together. A big part of how we wanted this to work was having features broken up into isolated blocks. That way, we could compose them into scenes and then pick and choose what we brought to life.
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/j4ecLHXusYXPiPJxlPtB.png", alt="One of the composition scenes featuring a snake, a coffin with arms coming out, a fox with a wand at a cauldron, a tree with a spooky face, and a gargoyle holding a pumpkin lantern.", width="800", height="564" %}
+
+The main idea was that, as the user made their way through the book, they could access blocks of content. They could also interact with dashes of whimsy, including the Easter eggs we had built into the experience; for example, a portrait in a haunted house, whose eyes followed your pointer, or subtle animations triggered by media queries. These ideas and features would be animated on scroll. An early idea was a zombie bunny that would rise and translate along the x-axis on user scroll.
+
+## Getting familiar with the API
+
+Before we could start playing with individual features and Easter eggs, we needed a book. So we decided to turn this into a chance to test the featureset for the emerging, [CSS scroll-linked animations API](https://drafts.csswg.org/scroll-animations-1/). The scroll-linked animations API is not currently supported in any browsers. However, while developing the API, the engineers on the interactions team have been working on a [polyfill](https://github.com/flackr/scroll-timeline). This provides a way to test out the shape of the API as it develops. That means we could use this API today, and fun projects like this are often a great place to try out experimental features, and to provide feedback. Find out what we learned and the feedback we were able to provide, [later in the article](#what-we-learned).
+
+At a high level, you can use this API to link animations to scroll. It's important to note that you can't trigger an animation on scroll—this is something that could come later. Scroll-linked animations also fall into two main categories:
+
+1. Those that react to scroll position.
+2. Those that react to an element's position in its scrolling container.
+
+To create the latter, we use a `ViewTimeline` applied via an `animation-timeline` property.
+
+Here's an example of what using `ViewTimeline` looks like in CSS:
+
+```css
+.element-moving-in-viewport {
+  view-timeline-name: foo;
+  view-timeline-axis: block;
+}
+
+.element-scroll-linked {
+  animation: rotate both linear;
+  animation-timeline: foo;
+  animation-delay: enter 0%;
+  animation-end-delay: cover 50%;
+}
+
+@keyframes rotate {
+ to {
+   rotate: 360deg;
+ }
+}
+```
+
+We create a `ViewTimeline` with `view-timeline-name` and define the axis for it. In this example, `block` refers to [logical `block`](/learn/css/logical-properties/). The animation gets linked to scroll with the `animation-timeline` property. `animation-delay` and `animation-end-delay` (at the time of writing) are how we define phases.
+
+These phases define the points at which the animation should get linked in relation to an element's position in its scrolling container. In our example, we're saying start the animation when the element enters (`enter 0%`) the scrolling container. And finish when it has covered 50% (`cover 50%`) of the scrolling container.
+
+Here's our demo in action:
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/xVK0tJ70MsfN6ZYmtsaS.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "jOKEQWj",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+You could also link an animation to the element that is moving in the viewport. You can do this by setting the `animation-timeline` to be the element's `view-timeline`. This is good for scenarios such as list animations. The behavior is similar to how you might animate elements [upon entry using `IntersectionObserver`](https://twitter.com/jh3yy/status/1558551933064884225?s=20&t=A1hdziw2Oz5MgkEjTZS-2Q).
+
+```css
+element-moving-in-viewport {
+  view-timeline-name: foo;
+  view-timeline-axis: block;
+  animation: scale both linear;
+  animation-delay: enter 0%;
+  animation-end-delay: cover 50%;
+  animation-timeline: foo;
+}
+
+@keyframes scale {
+  0% {
+    scale: 0;
+  }
+}
+```
+
+With this,"Mover" scales up as it enters the viewport, triggering the rotation of "Spinner".
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/FnxZiRz1i8NevSCcxeag.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "MWXYzeY",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+{% Aside %}
+Do check out [the spec](https://drafts.csswg.org/scroll-animations-1/) for more in-depth details about the API. Also look out for an article dedicated to scroll-linked animations coming soon!
+{% endAside %}
+
+What I found from experimenting was that the API works very well with [scroll-snap](/css-scroll-snap/). Scroll-snap combined with `ViewTimeline` would be a great fit for snapping page turns in a book.
+
+{% Aside %}
+Feel free to check out my [scroll-linked animations API collection](https://codepen.io/collection/qOPdLq) over on CodePen.
+{% endAside %}
+
+## Prototyping the mechanics
+
+After some experimenting, I was able to get a book prototype working. You scroll horizontally to turn the pages of the book. 
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/JZJZyFvVruWFy50EYBb8.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "JjZoeEN",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+In the demo, you can see the different triggers highlighted with dashed borders.
+
+The markup looks a little like this:
+
+```html
+<body>
+  <div class="book-placeholder">
+    <ul class="book" style="--count: 7;">
+      <li
+        class="page page--cover page--cover-front"
+        data-scroll-target="1"
+        style="--index: 0;"
+      >
+        <div class="page__paper">
+          <div class="page__side page__side--front"></div>
+          <div class="page__side page__side--back"></div>
+        </div>
+      </li>
+      <!-- Markup for other pages here -->
+    </ul>
+  </div>
+  <div>
+    <p>intro spacer</p>
+  </div>
+  <div data-scroll-intro>
+    <p>scale trigger</p>
+  </div>
+  <div data-scroll-trigger="1">
+    <p>page trigger</p>
+  </div>
+  <!-- Markup for other triggers here -->
+</body>
+```
+
+As you scroll, the pages of the book turn, but snap open or closed. This is dependent on the scroll-snap alignment of the triggers.
+
+```css
+html {
+  scroll-snap-type: x mandatory;
+}
+
+body {
+  grid-template-columns: repeat(var(--trigger-count), auto);
+  overflow-y: hidden;
+  overflow-x: scroll;
+  display: grid;
+}
+
+body > [data-scroll-trigger] {
+  height: 100vh;
+  width: clamp(10rem, 10vw, 300px);
+}
+
+body > [data-scroll-trigger] {
+  scroll-snap-align: end;
+}
+```
+
+This time, we do not connect the `ViewTimeline` in CSS, but use the [Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) in JavaScript. This has the added benefit of being able to loop over a set of elements and generate the `ViewTimeline` we need, instead of creating them each by hand.
+
+```js
+const triggers = document.querySelectorAll("[data-scroll-trigger]")
+
+const commonProps = {
+  delay: { phase: "enter", percent: CSS.percent(0) },
+  endDelay: { phase: "enter", percent: CSS.percent(100) },
+  fill: "both"
+}
+
+const setupPage = (trigger, index) => {
+  const target = document.querySelector(
+    `[data-scroll-target="${trigger.getAttribute("data-scroll-trigger")}"]`
+  );
+
+  const viewTimeline = new ViewTimeline({
+    subject: trigger,
+    axis: 'inline',
+  });
+
+  target.animate(
+    [
+      {
+        transform: `translateZ(${(triggers.length - index) * 2}px)`
+      },
+      {
+        transform: `translateZ(${(triggers.length - index) * 2}px)`,
+        offset: 0.75
+      },
+      {
+        transform: `translateZ(${(triggers.length - index) * -1}px)`
+      }
+    ],
+    {
+      timeline: viewTimeline,
+      …commonProps,
+    }
+  );
+  target.querySelector(".page__paper").animate(
+    [
+      {
+        transform: "rotateY(0deg)"
+      },
+      {
+        transform: "rotateY(-180deg)"
+      }
+    ],
+    {
+      timeline: viewTimeline,
+      …commonProps,
+    }
+  );
+};
+
+const triggers = document.querySelectorAll('[data-scroll-trigger]')
+triggers.forEach(setupPage);
+```
+
+For each trigger, we generate a `ViewTimeline`. Then we animate the trigger's associated page using that `ViewTimeline`. That links the page's animation to scroll. For our animation, we are rotating an element of the page on the y-axis to turn the page. We also translate the page itself on the z-axis so it behaves like a book.
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/up1PL47mHnpZLbOfMJoX.mp4"
+  }
+%}
+
+## Putting it all together
+
+Once I'd worked out the mechanism for the book, I could focus on bringing Tyler's illustrations to life.
+
+### Astro
+
+The team [used Astro for Designcember](/how-we-built-designcember/) in 2021 and I was keen to use it again for Chrometober. The developer experience of being able to break things up into components is well suited to this project.
+
+The book itself is a component. It is also a collection of page components. Each page has two sides and they have backdrops. The children of a page side are components which can be added, removed, and positioned with ease.
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/6k7eoCK4ObUg9VMvWg0x.mp4"
+  }
+%}
+
+### Building a book
+
+It was important for me to make the blocks easy to manage. I also wanted to make it easy for the rest of the team to make contributions.
+
+The pages at a high level are defined by a configuration array. Each page object in the array defines the content, backdrop, and other metadata for a page.
+
+```js
+const pages = [
+  {
+    front: {
+      marked: true,
+      content: PageTwo,
+      backdrop: spreadOne,
+      darkBackdrop: spreadOneDark
+    },
+    back: {
+      content: PageThree,
+      backdrop: spreadTwo,
+      darkBackdrop: spreadTwoDark
+    },
+    aria: `page 1`
+  },
+  /* Obfuscated page objects */
+]
+```
+
+These get passed to the `Book` component.
+
+```html
+<Book pages={pages} />
+```
+
+The `Book` component is where the scrolling mechanism is applied and the pages of the book are created. The same mechanism from the prototype is used; but we share multiple instances of  `ViewTimeline` that are created globally.
+
+```js
+window.CHROMETOBER_TIMELINES.push(viewTimeline);
+```
+This way, we can share the timelines to be used elsewhere instead of recreating them. More on this later.
+
+### Page composition
+Each page is a list item inside a list:
+
+```js
+<ul class="book">
+  {
+    pages.map((page, index) => {
+      const FrontSlot = page.front.content
+      const BackSlot = page.back.content
+      return (
+        <Page
+          index={index}
+          cover={page.cover}
+          aria={page.aria}
+          backdrop={
+            {
+              front: {
+                light: page.front.backdrop,
+                dark: page.front.darkBackdrop
+              },
+              back: {
+                light: page.back.backdrop,
+                dark: page.back.darkBackdrop
+              }
+            }
+          }>
+          {page.front.content && <FrontSlot slot="front" />}    
+          {page.back.content && <BackSlot slot="back" />}    
+        </Page>
+      )
+    })
+  }
+</ul>
+```
+
+And the defined configuration gets passed to each `Page` instance. The pages use Astro's [slot feature](https://docs.astro.build/en/core-concepts/astro-components/#slots) to insert content into each page.
+
+```html
+<li
+  class={className}
+  data-scroll-target={target}
+  style={`--index:${index};`}
+  aria-label={aria}
+>
+  <div class="page__paper">
+    <div
+      class="page__side page__side--front"
+      aria-label={`Right page of ${index}`}
+    >
+      <picture>
+        <source
+          srcset={darkFront}
+          media="(prefers-color-scheme: dark)"
+          height="214"
+          width="150"
+        >
+        <img
+          src={lightFront}
+          class="page__background page__background--right"
+          alt=""
+          aria-hidden="true"
+          height="214"
+          width="150"
+        >
+      </picture>
+      <div class="page__content">
+        <slot name="front" />
+      </div>
+    </div>
+    <!-- Markup for back page -->
+  </div>
+</li>
+```
+
+This code is mostly for setting up structure. Contributors can work on the book’s content for the most part without having to touch this code.
+
+### Backdrops
+
+The creative shift towards a book made splitting up the sections much easier, and each spread of the book is a scene taken from the original design.
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/N3UtScgJr16t0Xp4vDN7.png", alt="Page spread illustration from the book which features an apple tree in a graveyard. The graveyard has multiple headstones and there is a bat in the sky in front of a large moon.", width="800", height="560" %}
+
+As we had decided on an aspect ratio for the book, the backdrop for each page could have a picture element. Setting that element to 200% width and using `object-position` based on page side does the trick.
+
+```css
+.page__background {
+  height: 100%;
+  width: 200%;
+  object-fit: cover;
+  object-position: 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.page__background--right {
+  object-position: 100% 0;
+}
+
+```
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/koKQdPSVpa7uARGLmcXL.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "RwJNOrO",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+### Page content
+
+Let's look at building out one of the pages. Page three features an owl that pops up in a tree.
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/GYZvp3dT9l57lIfjO2wE.mp4"
+  }
+%}
+
+It gets populated with a `PageThree` component, as defined in the configuration. It’s an [Astro component](https://docs.astro.build/en/core-concepts/astro-components/) (`PageThree.astro`). These components look like HTML files but they have a code fence at the top similar to frontmatter. This enables us to do things like import other components. The component for page three looks like this:
+
+```jsx
+---
+import TreeOwl from '../TreeOwl/TreeOwl.astro'
+import { contentBlocks } from '../../assets/content-blocks.json'
+import ContentBlock from '../ContentBlock/ContentBlock.astro'
+---
+<TreeOwl/>
+<ContentBlock {...contentBlocks[3]} id="four" />
+
+<style is:global>
+  .content-block--four {
+    left: 30%;
+    bottom: 10%;
+  }
+</style>
+```
+
+Again, pages are atomic in nature. They are built from a collection of features. Page three features a content block and the interactive owl, so there is a component for each.
+
+Content blocks are the links to content seen within the book. These are also driven by a configuration object.
+
+```json
+{
+ "contentBlocks": [
+    {
+      "id": "one",
+      "title": "New in Chrome",
+      "blurb": "Lift your spirits with a round up of all the tools and features in Chrome.",
+      "link": "https://www.youtube.com/watch?v=qwdN1fJA_d8&list=PLNYkxOF6rcIDfz8XEA3loxY32tYh7CI3m"
+    },
+    …otherBlocks
+  ]
+}
+```
+
+This configuration gets imported where content blocks are required. Then the relevant block configuration gets passed to the `ContentBlock` component.
+
+```jsx
+<ContentBlock {...contentBlocks[3]} id="four" />
+```
+
+There is also an example here of how we use the page's component as a place to position the content. Here, a content block gets positioned.
+
+```html
+<style is:global>
+  .content-block--four {
+    left: 30%;
+    bottom: 10%;
+  }
+</style>
+```
+
+But, the general styles for a content block are co-located with the component code.
+
+```css
+.content-block {
+  background: hsl(0deg 0% 0% / 70%);
+  color: var(--gray-0);
+  border-radius:  min(3vh, var(--size-4));
+  padding: clamp(0.75rem, 2vw, 1.25rem);
+  display: grid;
+  gap: var(--size-2);
+  position: absolute;
+  cursor: pointer;
+  width: 50%;
+}
+```
+
+As for our owl, it's an interactive feature—one of many in this project. This is a nice small example to go through that shows how we used the shared ViewTimeline that we created.
+
+At a high level, our owl component imports some SVG and inlines it using Astro's Fragment.
+
+```jsx
+---
+import { default as Owl } from '../Features/Owl.svg?raw'
+---
+<Fragment set:html={Owl} />
+```
+
+And the styles for positioning our owl are co-located with the component code.
+
+```css
+.owl {
+  width: 34%;
+  left: 10%;
+  bottom: 34%;
+}
+```
+
+There is one extra piece of styling that defines the `transform` behavior for the owl.
+
+```css
+.owl__owl {
+  transform-origin: 50% 100%;
+  transform-box: fill-box;
+}
+```
+
+The use of `transform-box` affects the `transform-origin`. It makes it relative to the object’s bounding box within the SVG. The owl scales up from the bottom center, hence the use of `transform-origin: 50% 100%`.
+
+The fun part is when we link the owl up to one of our generated `ViewTimeline`s:
+
+```js
+const setUpOwl = () => {
+   const owl = document.querySelector('.owl__owl');
+
+   owl.animate([
+     {
+       translate: '0% 110%',
+     },
+     {
+       translate: '0% 10%',
+     },
+   ], {
+     timeline: CHROMETOBER_TIMELINES[1],
+     delay: { phase: "enter", percent: CSS.percent(80) },
+     endDelay: { phase: "enter", percent: CSS.percent(90) },
+     fill: 'both' 
+   });
+ }
+
+ if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches)
+   setUpOwl()
+```
+
+In this block of code, we do two things:
+
+1. Check for the user’s motion preferences.
+2. If they have no preference, link an animation of the owl to scroll.
+
+For the second part, the owl animates on the y-axis using the Web Animations API. Individual transform property `translate` is used, and is linked to one `ViewTimeline`. It's linked to `CHROMETOBER_TIMELINES[1]` via the `timeline` property. This is a `ViewTimeline` that is generated for the page turns. This links the owl's animation to the page turn using the `enter` phase. It defines that, when the page is 80% turned, start moving the owl. At 90%, the owl should finish its translation.
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/GYZvp3dT9l57lIfjO2wE.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "KKewLKo",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+## Book features
+
+Now you've seen the approach for building a page and how the project architecture works. You can see how it allows contributors to jump in and work on a page or feature of their choosing. Various features in the book have their animations linked to the book's page turning; for example, the bat that flies in and out on page turns.
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/D9wLvoj1f8Ieddu9MGUm.mp4"
+  }
+%}
+
+It also has elements that are powered by [CSS animations](https://developer.mozilla.org/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
+
+Once the content blocks were in the book, there was time to get creative with other features. This provided an opportunity to generate some different interactions, and try different ways to implement things.
+
+### Keeping things responsive
+
+Responsive viewport units size the book and its features. However, keeping fonts responsive was an interesting challenge. Container query units are a good fit here. They aren't supported everywhere yet, though. The size of the book is set, so we don't need a container query. An inline container query unit can be generated with [CSS `calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) and used for font sizing.
+
+```css
+
+.book-placeholder {
+  --size: clamp(12rem, 72vw, 80vmin);
+  --aspect-ratio: 360 / 504;
+  --cqi: calc(0.01 * (var(--size) * (var(--aspect-ratio))));
+}
+
+.content-block h2 {
+  color: var(--gray-0);
+  font-size: clamp(0.6rem, var(--cqi) * 4, 1.5rem);
+}
+
+.content-block :is(p, a) {
+  font-size: clamp(0.6rem, var(--cqi) * 3, 1.5rem);
+}
+```
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/kXldZFb8uwtGdIBV6xY6.mp4"
+  }
+%}
+
+### Pumpkins shine at night
+
+Those with a keen eye may have noticed the use of `<source>` elements when discussing the page backdrops earlier. [Una](https://twitter.com/una) was keen to have an interaction that reacted to color scheme preference. As a result, the backdrops support both light and dark modes with different variants. Because you can use media queries with the `<picture>` element, it's a great way to provide two backdrop styles. The `<source>` element queries for color scheme preference, and shows the appropriate backdrop.
+
+```html
+<picture>
+  <source srcset={darkFront} media="(prefers-color-scheme: dark)" height="214" width="150">
+  <img src={lightFront} class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150">
+</picture>
+```
+You could introduce other changes based on that color scheme preference. The pumpkins on page two react to a user's color scheme preference. The SVG used has circles that represent flames, which scale up and animate in dark mode.
+
+```css
+.pumpkin__flame,
+ .pumpkin__flame circle {
+   transform-box: fill-box;
+   transform-origin: 50% 100%;
+ }
+
+ .pumpkin__flame {
+   scale: 0.8;
+ }
+
+ .pumpkin__flame circle {
+   transition: scale 0.2s;
+   scale: 0;
+ }
+
+@media(prefers-color-scheme: dark) {
+   .pumpkin__flame {
+     animation: pumpkin-flicker 3s calc(var(--index, 0) * -1s) infinite linear;
+   }
+
+   .pumpkin__flame circle {
+     scale: 1;
+   }
+
+   @keyframes pumpkin-flicker {
+     50% {
+       scale: 1;
+     }
+   }
+ }
+```
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/PYuFOFPEG5RjwVySed3J.mp4"
+  }
+%}
+
+### Is this portrait watching you?
+
+If you check out page 10, you might notice something. You're being watched! The eyes of the portrait will follow your pointer as you move around the page. The trick here is to map the pointer location to a translate value, and pass it through to CSS.
+
+```js
+const mapRange = (inputLower, inputUpper, outputLower, outputUpper, value) => {
+   const INPUT_RANGE = inputUpper - inputLower
+   const OUTPUT_RANGE = outputUpper - outputLower
+   return outputLower + (((value - inputLower) / INPUT_RANGE) * OUTPUT_RANGE || 0)
+ }
+```
+
+This code takes input and output ranges, and maps the given values. For example, this usage would give the value 625.
+
+```js
+mapRange(0, 100, 250, 1000, 50) // 625
+```
+
+For the portrait, the input value is the center point of each eye, plus or minus some pixel distance. The output range is how much the eyes can translate in pixels. And then the pointer position on the x or y axis gets passed as the value. To get the center point of the eyes while moving them, the eyes are duplicated. The originals don't move, are transparent, and used for reference.
+
+Then it's a case of tying it together and updating the CSS custom property values on the eyes so the eyes can move. A function is bound to the `pointermove` event against the `window`. As this fires, the bounds of each eye get used to calculate the center points. Then the pointer position is mapped to values that are set as custom property values on the eyes.
+
+```js
+const RANGE = 15
+const LIMIT = 80
+const interact = ({ x, y }) => {
+   // map a range against the eyes and pass in via custom properties
+   const LEFT_EYE_BOUNDS = LEFT_EYE.getBoundingClientRect()
+   const RIGHT_EYE_BOUNDS = RIGHT_EYE.getBoundingClientRect()
+
+   const CENTERS = {
+     lx: LEFT_EYE_BOUNDS.left + LEFT_EYE_BOUNDS.width * 0.5,
+     rx: RIGHT_EYE_BOUNDS.left + RIGHT_EYE_BOUNDS.width * 0.5,
+     ly: LEFT_EYE_BOUNDS.top + LEFT_EYE_BOUNDS.height * 0.5,
+     ry: RIGHT_EYE_BOUNDS.top + RIGHT_EYE_BOUNDS.height * 0.5,
+   }
+
+   Object.entries(CENTERS)
+     .forEach(([key, value]) => {
+       const result = mapRange(value - LIMIT, value + LIMIT, -RANGE, RANGE)(key.indexOf('x') !== -1 ? x : y)
+       EYES.style.setProperty(`--${key}`, result)
+     })
+ }
+```
+
+Once the values are passed to CSS, the styles can do what they want with them. The great part here is using [CSS `clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp) to make the behavior different for each eye, so you can make each eye behave differently without touching the JavaScript again.
+
+```css
+.portrait__eye--mover {
+   transition: translate 0.2s;
+ }
+
+ .portrait__eye--mover.portrait__eye--left {
+   translate:
+     clamp(-10px, var(--lx, 0) * 1px, 4px)
+     clamp(-4px, var(--ly, 0) * 0.5px, 10px);
+ }
+
+ .portrait__eye--mover.portrait__eye--right {
+   translate:
+     clamp(-4px, var(--rx, 0) * 1px, 10px)
+     clamp(-4px, var(--ry, 0) * 0.5px, 10px);
+ }
+```
+
+
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/ciul3m4cJLWEy9vD6CVx.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "vYrOOGG",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+### Casting spells
+
+If you check out page six, do you feel spellbound? This page embraces the design of our fantastic magical fox. If you move your pointer around, you may see a custom cursor trail effect. This uses canvas animation. A `<canvas>` element sits above the rest of the page content with `pointer-events: none`. This means users can still click the content blocks underneath.
+
+```css
+.wand-canvas {
+  height: 100%;
+  width: 200%;
+  pointer-events: none;
+  right: 0;
+  position: fixed;
+}
+```
+
+Much like how our portrait listens for a `pointermove` event on `window`, so does our `<canvas>` element. Yet each time the event fires, we're creating an object to animate on the `<canvas>` element. These objects represent shapes used in the cursor trail. They have coordinates and a random hue.
+
+Our `mapRange` function from earlier is used again, as we can use it to map the pointer delta to `size` and `rate`. The objects are stored in an array that gets looped over when the objects are drawn to the `<canvas>` element. The properties for each object tell our `<canvas>` element where things should be drawn.
+
+```js
+const blocks = []
+  const createBlock = ({ x, y, movementX, movementY }) => {
+    const LOWER_SIZE = CANVAS.height * 0.05
+    const UPPER_SIZE = CANVAS.height * 0.25
+    const size = mapRange(0, 100, LOWER_SIZE, UPPER_SIZE, Math.max(Math.abs(movementX), Math.abs(movementY)))
+    const rate = mapRange(LOWER_SIZE, UPPER_SIZE, 1, 5, size)
+    const { left, top, width, height } = CANVAS.getBoundingClientRect()
+    
+    const block = {
+      hue: Math.random() * 359,
+      x: x - left,
+      y: y - top,
+      size,
+      rate,
+    }
+    
+    blocks.push(block)
+  }
+window.addEventListener('pointermove', createBlock)
+```
+
+For drawing to the canvas, a loop is created with `requestAnimationFrame`. The cursor trail should only render when the page is in view. We have an `IntersectionObserver` that updates and determines which pages are in view. If a page is in view, the objects are rendered as circles on the canvas.
+
+We then loop over the `blocks` array and draw each part of the trail. Each frame reduces the size and alters the position of the object by the `rate`. This produces that falling and scaling effect. If the object shrinks completely, the object is removed from the `blocks` array.
+
+```js
+let wandFrame
+const drawBlocks = () => {
+   ctx.clearRect(0, 0, CANVAS.width, CANVAS.height)
+  
+   if (PAGE_SIX.className.indexOf('in-view') === -1 && wandFrame) {
+     blocks.length = 0
+     cancelAnimationFrame(wandFrame)
+     document.body.removeEventListener('pointermove', createBlock)
+     document.removeEventListener('resize', init)
+   }
+  
+   for (let b = 0; b < blocks.length; b++) {
+     const block = blocks[b]
+     ctx.strokeStyle = ctx.fillStyle = `hsla(${block.hue}, 80%, 80%, 0.5)`
+     ctx.beginPath()
+     ctx.arc(block.x, block.y, block.size * 0.5, 0, 2 * Math.PI)
+     ctx.stroke()
+     ctx.fill()
+
+     block.size -= block.rate
+     block.y += block.rate
+
+     if (block.size <= 0) {
+       blocks.splice(b, 1)
+     }
+
+   }
+   wandFrame = requestAnimationFrame(drawBlocks)
+ }
+```
+
+If the page goes out of view, event listeners are removed and the animation frame loop is canceled. The `blocks` array is also cleared.
+
+Here's the cursor trail in action!
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/1v5SAuZIIC0fpxNzfVX1.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "QWxbbQB",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+
+## Accessibility review
+
+It's all good creating a fun experience to explore, but it's no good if it isn't accessible to users. [Adam](https://twitter.com/argyleink)'s expertise in this area proved invaluable in getting Chrometober prepared for an accessibility review before release.
+
+Some of the notable areas covered:
+
+- Ensuring that the HTML used was semantic. This included things like appropriate landmark elements such as `<main>` for the book; aso the use of the `<article>` element for each content block, and `<abbr>` elements where acronyms are introduced. Thinking ahead as the book was built made things more accessible. The use of headings and links makes it easier for a user to navigate. The use of a list for the pages also means the number of pages is announced by assistive technology.
+- Ensuring that all images use appropriate `alt` attributes. For inline SVGs, the `title` element is present where necessary.
+- Using `aria` attributes where they improve the experience. The use of `aria-label` for pages and their sides communicates to the user which page they are on. The use of `aria-describedBy` on the "Read more" links communicates the text of the content block. This removes ambiguity about where the link will take the user.
+- On the subject of content blocks, the ability to click the whole card and not only the "Read more" link is available.
+- The use of an `IntersectionObserver` to track which pages are in view came up earlier. This has many benefits that aren't just performance related. Pages not in view will have any animation or interaction paused. But these pages also have the `inert` attribute applied. This means that users using a screen reader can explore the same content as sighted users. Focus remains within the page that's in view and users can't tab to another page.
+- Last but not least, we make use of media queries to respect a user's preference for motion.
+
+Here's a screenshot from the review highlighting some of the measures in place.
+
+
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/BtC3lPDyNj9DqIg7uT9s.jpg", alt="Screenshot of the front page of the Chrometober book. Green outlined boxes are provided around various aspects of the UI, describing the intended accessibility functionality and the user experience outcomes that the page will deliver. For example, header elements have a green box around them, indicating they can be navigated via headline landmarks. Another example is the <main> element is identified as around the whole book, indicating it should be the main landmark for assistive technology users to find. More is outlined in the screenshot.", width="800", height="465" %}
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/ecmrk7v25vNJJC9ENukj.jpg", alt="Screenshot of the Chrometober book open. Green outlined boxes are provided around various aspects of the UI, describing the intended accessibility functionality and the user experience outcomes that the page will deliver. For example, images have alt text. Another example is an accessibility label declaring that pages out of view are inert. More is outlined in the screenshot.", width="800", height="463" %}
+
+
+## What we learned
+
+The motivation behind Chrometober was not only to highlight web content from the community, but was also a way for us to test drive the scroll-linked animations API polyfill that's in development.
+
+We set aside a session while on our team summit in New York to test the project and tackle issues that arose. The team's contribution was invaluable. It was also a great opportunity to list all the things that needed tackling before we could go live.
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/XZUlK54695r51ACoMRFr.png", alt="CSS, UI, and DevTools team sit around the table in a conference room. Una stands at a whiteboard which is covered in sticky notes. Other team members sit around the table with refreshments and laptops.", width="800", height="450" %}
+
+For example, testing out the book on devices raised a rendering issue. Our book wouldn't render as expected on iOS devices. Viewport units size the page, but when a notch was present, it affected the book. The solution was to use `viewport-fit=cover` in the `meta` viewport:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+```
+
+This session also raised some issues with the API polyfill. [Bramus](https://twitter.com/bramus) raised these issues in the polyfill repository. He subsequently found solutions to those issues and got them merged into the polyfill. For example, [this pull request](https://github.com/flackr/scroll-timeline/pull/84) made a performance gain by adding caching to part of the polyfill.
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/KqWtVBOnDI4irqSg75fy.png", alt="A screenshot of a demo open in Chrome. The Developer Tools are open and show a baseline performance measurement.", width="800", height="392" %}
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/KtNfXA8JbaP3embdPPxK.png", alt="A screenshot of a demo open in Chrome. The Developer Tools are open and show an improved performance measurement.", width="800", height="392" %}
+
+## That's it!
+
+This has been a real fun project to work on, resulting in a whimsical scrolling experience that highlights amazing content from the community. Not only that, it's been great for testing the polyfill, as well as providing feedback to the engineering team to help improve the polyfill.
+
+
+
+{% Video {
+    controls: true,
+    loop: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/fNQYmEUY2CSbhPJ8fEnz.mp4"
+  }
+%}
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: "PoaqYrR",
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+[Chrometober 2022](/chrometober-2022) is a wrap.
+
+We hope you enjoyed it! What's your favorite feature? [Tweet me](https://twitter.com/jh3yy) and let us know!
+
+{% Img src="image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/RjZRcgYXbrBiUuI9q2iB.jpg", alt="Jhey holding a sticker sheet of the characters from Chrometober.", width="800", height="601" %}
+
+You might even be able to grab some stickers from one of the team if you [see us at an event](https://developer.chrome.com/meet-the-team/).
+
+_Hero Photo by [David Menidrey](https://unsplash.com/@cazault) on [Unsplash](https://unsplash.com/s/photos/pumpkins)_
\ No newline at end of file
diff --git a/src/site/content/en/blog/building-multiple-pwas-on-the-same-domain/index.md b/src/site/content/en/blog/building-multiple-pwas-on-the-same-domain/index.md
new file mode 100644
index 00000000000..90913d6b310
--- /dev/null
+++ b/src/site/content/en/blog/building-multiple-pwas-on-the-same-domain/index.md
@@ -0,0 +1,269 @@
+---
+layout: post
+title: Building multiple Progressive Web Apps on the same domain
+subhead: How to build multiple PWAs, taking advantage of the same domain name, to make the user aware that they belong to the same organization or service.
+authors:
+  - demianrenzulli
+  - mgiuca
+  - cmp
+date: 2021-06-02
+scheduled: true
+hero: image/26V1DWN36MZr3mUo8ChSBlCpzp43/RvAJGCLAmeyRSHKn5Nwc.jpeg
+alt: Multiple Shifting Gears.
+description: Explore the recommended and not recommended ways of building multiple PWAs reusing the same domain with their pros and cons.
+tags:
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - storage
+---
+
+In the [Progressive Web Apps in multi-origin sites blog
+post](/multi-origin-pwas/), Demian discussed the challenges that
+sites built on multiple origins face when trying to build a single Progressive
+Web App that encompasses all of them.
+
+An example of this type of site architecture is a ecommerce site where:
+
+- The home page is at `https://www.example.com`.
+- The category pages are hosted at `https://category.example.com`.
+- The product detail pages at `https://product.example.com`.
+
+As discussed in the article, the [same-origin
+policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)
+imposes several restrictions, preventing the sharing of service workers, caches,
+and permissions across origins. For that reason, we strongly recommend
+avoiding this type of configuration and for those that already have sites
+built in this way, to consider migrating to a single origin site architecture
+whenever possible.
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/QnwgUcEBv8o8k2XiAYbm.png", alt="Diagram showing a site divded into multiple origins and showing that technique is discouraged when building PWAs.", width="800", height="461" %}
+  <figcaption>Avoid using different origins for site sections of the same site when trying to build a unified Progresive Web App.</figcaption>
+</figure>
+
+In this post, we take a look at the opposite case: instead of a single PWA
+across different origins we'll analyze the case of companies that want to
+provide **multiple PWAs**, taking advantage of the same **domain name**, and make
+the user aware that those PWAs belong to the same organization or service.
+
+As you might have noticed, we are using different, but interrelated terms, like
+domains and origins. Before moving forward, let's review these concepts.
+
+## Technical terms
+
+- **Domain:** Any sequence of labels as defined in the Domain Name System (DNS).
+  For example: `com` and `example.com` are domains.
+- **Hostname:** A DNS entry that resolves to at least one IP address. For
+  example: `www.example.com` would be a hostname, `example.com` could be a
+  hostname if it had an IP address, and `com` would never resolve to an IP
+  address and so it could never be a hostname.
+- **Origin:** A combination of a scheme, hostname and (optionally) port. For
+  example, `https://www.example.com:443` is an origin.
+
+As its name implies, [same-origin
+policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)
+imposes restrictions on origins, so we'll mostly refer to the term throughout
+the article. Nevertheless, we'll use "domains" or "subdomains" from time to
+time, to describe the technique being used, in order to create the different
+"origins".
+
+## The case for multiple, related PWAs
+
+In some cases, you might want to build independent apps, but still identify them
+as belonging to the same organization or "brand". Reusing the same **domain
+name** is a good way of establishing that relationship. For example:
+
+- An ecommerce site wants to create a standalone experience to let sellers
+  manage their inventory, while making sure they understand that it belongs to
+  the main website where the users buy products.
+- A sports news site wants to build a specific app for a major sporting event,
+  to let users receive stats about their favorite competitions via
+  notifications, and install it as a Progressive Web App, while making sure that
+  users recognize it as an app built by the news company.
+- A company wants to build separate chat, mail, and calendar apps and wants them
+  to work as individual apps, tied to the company's name.
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/XEwhGkkV9Bz7Z2KEJWjm.png", alt="Avoid using different origins for site sections of the same site when trying to build a unified Progresive Web App.", width="800", height="475" %}
+  <figcaption>Company that owns example.com wants to provide three independent apps or PWAs, using the same domain name to establish the relationship between them.</figcaption>
+</figure>
+
+## Using separate origins
+
+The recommended approach in cases like these is for each conceptually
+distinct app live on its own origin.
+
+If you want to use the same domain name inside all of them, you can do that by
+using subdomains. For example, a company that provides multiple internet apps or
+services can host a mail app at `https://mail.example.com` and a calendar app at
+`https://calendar.example.com`, while offering the main service of their
+business at `https://www.example.com`. Another example is a sports site that
+wants to create an independent app completely dedicated to an important sports
+event, like a football championship at `https://footballcup.example.com`, that
+users can install and use independently of the main sport site, hosted at
+`https://www.example.com`. This approach might also be useful for platforms that
+let customers create independent apps of their own under the company's brand.
+For example, an app that lets merchants create their own PWAs at
+`https://merchant1.example.com`, `https://merchant2.example.com`, etc.
+
+Using different origins ensures isolation between the apps, which means that
+each of them can manage different browser features independently, including:
+
+- **Installability:** Each app has its own Manifest and provides its own
+  installable experience.
+- **Storage:** Each app has its own caches, local storage, and basically all
+  forms of device-local storage, without sharing them with the others.
+- **Service Workers:** Each app has its own service worker for the registered
+  scopes.
+- **Permissions:** Permissions are also scoped by origins. Thanks to that, users
+  will know exactly which service they are giving permissions for, and
+  features like notifications will be properly attributed to each app.
+
+Creating such a degree of isolation is the most desirable in the use case of
+multiple, independent PWAs, so **we strongly recommend this approach**.
+
+If apps on subdomains want to share local data with each other they will still
+be able to do it via cookies, or for more advanced scenarios they could
+consider synchronizing the storage through a server.
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/FfuseK64y4PRqXYEGEt9.png", alt="ALT_TEXT_HERE", width="800", height="421" %}
+  <figcaption>Building different PWAs in distinct origins, by using subdomains is a good practice.</figcaption>
+</figure>
+
+## Using the same origin
+
+The second approach is building the different PWAs on the same origin. This
+includes the following scenarios:
+
+### Non-overlapping paths
+
+Multiple PWAs or conceptual "web apps", hosted on the same origin, with
+non-overlapping paths. For example:
+
+- `https://example.com/app1/`
+- `https://example.com/app2/`
+
+### Overlapping/nested paths
+
+Multiple PWAs on the same origin, one of whose scope is nested inside the other:
+
+- `https://example.com/` (the "outer app")
+- `https://example.com/app/` (the "inner app")
+
+The service worker API and manifest format allow you to do either of the above,
+using path-level scoping. However, in both cases, using the same origin presents
+many problems and limitations, the root of which stems from the fact that the
+browser won't fully consider these to be distinct "apps", therefore **this
+approach is discouraged**.
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/6HX5zEb58sEEWQoJt82m.png", alt="ALT_TEXT_HERE", width="800", height="420" %}
+  <figcaption>Using paths (overlapping or not) to provide two independent PWAs (“app1”, “app2”) under the same origin is discouraged.</figcaption>
+</figure>
+
+In the next section, we analyze these challenges in more detail, and what can be
+done, if using separate origins is not an option.
+
+## Challenges for multiple, same-origin PWAs
+
+Here are some practical issues common to both same-origin approaches:
+
+- **Storage:** Cookies, local storage, and all forms of device-local storage are
+  shared between apps. For that reason, if the user decides to wipe local data
+  for one app, it will wipe all the data from the origin; there's no way
+ to do this for a single app. Note that Chrome and some other
+  browsers will actively prompt users to wipe local data when uninstalling one
+  of the apps, and this will affect data for the other apps on the origin as
+  well. Another issue is that apps will also have to share their [storage
+  quota](/storage-for-the-web/#how-much) which means if either of
+  them takes up too much space, the other will be negatively impacted.
+- **Permissions:** Permissions are tied to the origin. That means if the user
+  grants a permission to one app, it will apply to all apps on that origin
+  simultaneously. That may sound like a good thing (not having to ask for a
+  permission multiple times), but remember: if the user blocks permission to one
+  app, it will prevent the others from requesting that permission or using that
+  feature.
+- **User settings:** Settings are also set per-origin. For example, if two apps
+  have different font sizes, and the user wants to adjust the zoom in only one
+  of them to compensate for it, they won't be able to do it without applying the
+  setting to the other apps as well.
+
+These challenges make it difficult to encourage this approach. Nevertheless, if
+you can't use a separate origin (e.g. a subdomain), as discussed in the [Using
+separate origins](#using-separate-origins) section, from the two same-origin options we presented,
+using non-overlapping paths is strongly recommended, over
+overlapping/nested paths.
+
+As mentioned, the challenges discussed in this section are common to both
+same-origin approaches. In the next section we'll go deeper into the details
+of why using overlapping/nested paths is the least recommended strategy.
+
+## Additional challenges for overlapping/nested paths
+
+The additional issue with overlapping/nested paths approach (where
+`https://example.com/` is the outer app and  `https://example.com/app/` is the
+inner app), is that all URLs in the inner app will actually be considered
+part of both the outer app and the inner app.
+
+In practice this presents the following issues:
+
+- **Installation Promotion:** If the user visits the inner app (for example,
+  in a web browser), when the outer app is already installed in the user's
+  device, the browser won't show the install promotional banners, and the
+  [BeforeInstallPrompt event](/customize-install/) won't be
+  triggered. The reason is that the browser will check and see whether the
+  current page belongs to an app that's already installed, and it will conclude
+  that it is. The workaround for this is to install the inner app manually
+  (via "Create Shortcut" browser menu option), or to install the inner app
+  first, before the outer app.
+- **[Notification](https://developer.mozilla.org/docs/Web/API/notification)
+  and the [Badging API](/badging-api/)**: If the outer app is
+  installed but the inner app is not, notifications and badges coming from the
+  inner app will be erroneously attributed to the outer app (which is the
+  nearest enclosing scope of an installed app). This feature works properly in
+  the case where both apps are installed on the user's device.
+- **[Link
+  Capturing](https://github.com/WICG/sw-launch/blob/main/declarative_link_capturing.md)**:
+  The outer app may capture URLs that belong to the inner app. This is
+  especially likely if the outer app is installed but the inner app isn't.
+  Similarly, links within the outer app that link to the inner app will not
+  link capture into the inner app, since they are considered to be within the
+  outer app's scope. Additionally, on ChromeOS and Android, if these apps are
+  added to the Play Store (as [Trusted Web
+  Activities](https://developer.chrome.com/docs/android/trusted-web-activity/overview/)),
+  the outer app will capture all links. Even if the inner app is installed,
+  the OS will still offer the user the choice of opening them in the outer
+  app.
+
+## Conclusion
+
+In this article we looked at different ways in which developers can build
+multiple Progressive Web Apps related to each other within the same **domain**.
+
+In summary, we strongly recommend using a different origin (e.g. by using
+subdomains) to host independent PWAs. Hosting them in the same origin presents
+many challenges, mainly because the browser won't fully consider
+these to be distinct apps.
+
+- Separate origins: **Recommended**
+- Same origin, non-overlapping paths: **Not recommended**
+- Same origin, overlapping/nested paths: **Strongly not recommended**
+
+If it's not possible to use different origins, using non-overlapping paths (e.g.
+`https://example.com/app1/` and `https://example.com/app2/` it's strongly
+recommended over using overlapping or nested paths, like `https://example.com/`
+(for the outer app) and `https://example.com/app/` (for the inner app).
+
+## Additional resources
+
+- [Progressive Web Apps in multi-origin
+  sites](/multi-origin-pwas/)
+
+With many thanks for their technical reviews and suggestions: _Joe Medley,
+Dominick Ng, Alan Cutter, Daniel Murphy, Penny McLachlan, Thomas Steiner and
+Darwin Huang_
+
+_Photo by [Tim Mossholder](https://unsplash.com/@timmossholder) on
+[Unsplash](https://unsplash.com/photos/GmvH5v9l3K4)_
diff --git a/src/site/content/en/blog/building-split-text-animations/index.md b/src/site/content/en/blog/building-split-text-animations/index.md
new file mode 100644
index 00000000000..7db075ecbc8
--- /dev/null
+++ b/src/site/content/en/blog/building-split-text-animations/index.md
@@ -0,0 +1,554 @@
+---
+layout: post
+title: Building split text animations
+subhead: A foundational overview of how to build split letter and word animations.
+authors:
+  - adamargyle
+description: A foundational overview of how to build split letter and word animations.
+date: 2021-04-20
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/XHfyVzz2S49XK7jRl9Xx.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/VgfJpMKN2a5p0dKRFxse.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - animations
+---
+
+In this post I want to share thinking on ways to solve split text animations and
+interactions for the web that are minimal, accessible, and work across browsers.
+Try the [demo](https://gui-challenges.web.app/split-text/dist/).
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/H9NpmghPMDoJzJLNjk2V.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    <a href="https://gui-challenges.web.app/split-text/dist/">Demo</a>
+  </figcaption>
+</figure>
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube '3hvN7bkjZBk' %}
+
+## Overview
+
+Split text animations can be amazing. We'll be barely scratching the surface of
+animation potential in this post, but it does provide a foundation to build
+upon. The goal is to animate progressively. The text should be readable by
+default, with the animation built on top. Split text motion effects can
+get extravagant and potentially disruptive, so we will only manipulate HTML, or
+apply motion styles if the user is OK with motion.
+
+Here's a general overview of the workflow and results:
+1. [Prepare](#preparing-motion-conditionals) reduced motion conditional
+   variables for CSS and JS.
+1. [Prepare](#splitting-letters-utility-function) split text utilities in
+   JavaScript.
+1. [Orchestrate](#split-orchestration) the conditionals and utilities on page
+   load.
+1. [Write](#splitting-animations-and-transitions) CSS transitions and animations
+   for letters and words (the rad part!).
+
+Here's a preview of the conditional results we're going for:
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/TIrcTqDDX0tQiRyIuin1.png",
+    alt="screenshot of the Chrome devtools with the Elements panel open and reduced motion set to 'reduce' and the h1 is shown unsplit",
+       width="800", height="517"
+  %}
+  <figcaption>
+    User prefers reduced motion: text is legible / unsplit
+  </figcaption>
+</figure>
+
+If a user prefers reduced motion, we leave the HTML document alone and do no
+animation. If motion is OK, we go ahead and chop it up into pieces. Here's a
+preview of the HTML after JavaScript has split the text by letter.
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/prwDis2IMcZxFD39mnWF.png",
+    alt="screenshot of the Chrome devtools with the Elements panel open and reduced motion set to 'reduce' and the h1 is shown unsplit",
+       width="800", height="517"
+  %}
+  <figcaption>
+    User is OK with motion; text split into multiple &lt;span&gt; elements
+  </figcaption>
+</figure>
+
+### Preparing motion conditionals
+
+The conveniently [available](https://caniuse.com/prefers-reduced-motion) `@media
+(prefers-reduced-motion: reduce)` media query will be used from CSS and
+JavaScript in this project. This media query is our primary conditional for
+deciding to split text or not. The CSS media query will be used to withhold
+transitions and animations, while the JavaScript media query will be used to
+withhold the HTML manipulation.
+
+{% Aside %} **Question:** What else should be used to withhold split
+text animations?{% endAside %}
+
+
+#### Preparing the CSS conditional
+
+I used PostCSS to enable the syntax of [Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/), where I can store
+a media query boolean into a variable:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+```
+
+#### Preparing the JS conditional
+
+In JavaScript, the browser provides a way to check media queries, I used
+[destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+to extract and rename the boolean result from the media query check:
+
+```js
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+```
+
+I can then test for `motionOK`, and only change the document if the user has not
+requested to reduce motion.
+
+```js
+if (motionOK) {
+  // document split manipulations
+}
+```
+
+I can check the same value by using PostCSS to enable the `@nest` syntax from
+[Nesting Draft 1](https://drafts.csswg.org/css-nesting-1/). This allows me to
+store all the logic about the animation and it's style requirements for the
+parent and children, in one place:
+
+```css
+letter-animation {
+  @media (--motionOK) {
+    /* animation styles */
+  }
+}
+```
+
+With the PostCSS custom property and a JavaScript boolean, we're ready to
+conditionally upgrade the effect. That rolls us into the next section where I
+break down the JavaScript for transforming strings into elements.
+
+## Splitting Text
+
+Text letters, words, lines, etc., cannot be individually animated with CSS or JS.
+To achieve the effect, we need boxes. If we want to animate each letter, then
+each letter needs to be an element. If we want to animate each word, then each
+word needs to be an element.
+
+1. Create JavaScript utility functions for splitting strings into elements
+1. Orchestrate the usage of these utilities
+
+{% Aside %} In this demo I'll be splitting the text from JavaScript on the DOM
+of the page. If you're in a framework or on the server, you could split the text
+into elements from there, but do so respectfully.{% endAside %}
+
+### Splitting letters utility function
+
+A fun place to start is with a function which takes a string and returns each
+letter in an array.
+
+```js
+export const byLetter = text =>
+  [...text].map(span)
+```
+
+The
+[spread](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+syntax from ES6 really helped make that a swift task.
+
+### Splitting words utility function
+
+Similar to splitting letters, this function takes a string and returns each word
+in an array.
+
+```js
+export const byWord = text =>
+  text.split(' ').map(span)
+```
+
+The
+[`split()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/split)
+method on JavaScript strings allows us to specify which characters to slice at.
+I passed an empty space, indicating a split between words.
+
+### Making boxes utility function
+
+The effect requires boxes for each letter, and we see in those functions, that
+[`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+is being called with a `span()` function. Here is the `span()` function.
+
+```js
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+
+  return node
+}
+```
+
+It's crucial to note that a custom property called `--index` is being set with
+the array position. Having the boxes for the letter animations is great, but
+having an index to use in CSS is a seemingly small addition with a large impact.
+Most notable in this large impact is
+[staggering](https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/).
+We'll be able to use `--index` as a way of offsetting animations for a staggered
+look.
+
+### Utilities conclusion
+
+The `splitting.js` module in completion:
+
+```js
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+
+  return node
+}
+
+export const byLetter = text =>
+  [...text].map(span)
+
+export const byWord = text =>
+  text.split(' ').map(span)
+```
+
+Next is importing and using these `byLetter()` and `byWord()` functions.
+
+## Split orchestration
+
+With the splitting utilities ready to use, putting it all together means:
+1. **Finding** which elements to split
+1. **Splitting** them and **replacing** text with HTML
+
+After that, CSS takes over and will animate the elements / boxes.
+
+### Finding Elements
+
+I chose to use attributes and values to store information about the desired
+animation and how to split the text. I liked putting these declarative options
+into the HTML. The attribute `split-by` is used from JavaScript, to find
+elements and create boxes for either letters or words. The attribute
+`letter-animation` or `word-animation` is used from CSS, to target element
+children and apply transforms and animations.
+
+Here's a sample of HTML that demonstrates the two attributes:
+
+```html
+<h1 split-by="letter" letter-animation="breath">animated letters</h1>
+<h1 split-by="word" word-animation="trampoline">hover the words</h1>
+```
+
+### Finding elements from JavaScript
+
+I used the CSS selector syntax for attribute presence to gather the list of
+elements which want their text split:
+
+```js
+const splitTargets = document.querySelectorAll('[split-by]')
+```
+
+### Finding elements from CSS
+
+I also used the attribute presence selector in CSS to give all letter animations
+the same base styles. Later, we'll use the attribute value to add more specific
+styles to achieve an effect.
+
+```css
+letter-animation {
+  @media (--motionOK) {
+    /* animation styles */
+  }
+}
+```
+
+### Splitting text in place
+
+For each of the split targets we find in JavaScript, we'll split their text
+based on the value of the attribute and map each string to a `<span>`. We can
+then replace the text of the element with the boxes we made:
+
+```js
+splitTargets.forEach(node => {
+  const type = node.getAttribute('split-by')
+  let nodes = null
+
+  if (type === 'letter') {
+    nodes = byLetter(node.innerText)
+  }
+  else if (type === 'word') {
+    nodes = byWord(node.innerText)
+  }
+
+  if (nodes) {
+    node.firstChild.replaceWith(...nodes)
+  }
+})
+```
+
+#### Orchestration conclusion
+
+`index.js` in completion:
+
+```js
+import {byLetter, byWord} from './splitting.js'
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+if (motionOK) {
+  const splitTargets = document.querySelectorAll('[split-by]')
+
+  splitTargets.forEach(node => {
+    const type = node.getAttribute('split-by')
+    let nodes = null
+
+    if (type === 'letter')
+      nodes = byLetter(node.innerText)
+    else if (type === 'word')
+      nodes = byWord(node.innerText)
+
+    if (nodes)
+      node.firstChild.replaceWith(...nodes)
+  })
+}
+```
+
+The JavaScript could be read in the following English:
+1. Import some helper utility functions.
+1. Check if motion is ok for this user, if not do nothing.
+1. For each element that wants to be split.
+    1. Split them based on how they want to be split.
+    1. Replace text with elements.
+
+## Splitting animations and transitions
+
+The above splitting document manipulation has just unlocked a multitude of
+potential animations and effects with CSS or JavaScript. There are a few links
+at the bottom of this article to help inspire your splitting potential.
+
+Time to show what you can do with this! I'll share 4 CSS driven animations and
+transitions. 🤓
+
+### Split letters
+
+As a foundation for the split letter effects, I found the following CSS to be
+helpful. I put all transitions and animations behind the motion media query and
+then give each new child letter `span` a display property plus a style for what
+to do with white spaces:
+
+```css
+[letter-animation] > span {
+  display: inline-block;
+  white-space: break-spaces;
+}
+```
+
+The white spaces style is important so that the spans which are only a space,
+aren't collapsed by the layout engine. Now onto the stateful fun stuff.
+
+#### Transition split letters example
+
+This example uses CSS transitions to the split text effect. With transitions we
+need states for the engine to animate between, and I chose three states: no
+hover, hover in sentence, hover on a letter.
+
+When the user hovers the sentence, aka the container, I scale back all the
+children as if the user pushed them further away. Then, as the user hovers a
+letter, I bring it forward.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/TTG7vmfEJRAlRISqqIIA.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+@media (--motionOK) {
+  [letter-animation="hover"] {
+    &:hover > span {
+      transform: scale(.75);
+    }
+
+    & > span {
+      transition: transform .3s ease;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.25);
+      }
+    }
+  }
+}
+```
+
+#### Animate split letters example
+
+This example uses a predefined `@keyframe` animation to infinitely animated each
+letter, and leverages the inline custom property index to create a stagger
+effect.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Y9wcyj9AMwjn2XDASL2u.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+@media (--motionOK) {
+  [letter-animation="breath"] > span {
+    animation:
+      breath 1200ms ease
+      calc(var(--index) * 100 * 1ms)
+      infinite alternate;
+  }
+}
+
+@keyframes breath {
+  from {
+    animation-timing-function: ease-out;
+  }
+  to {
+    transform: translateY(-5px) scale(1.25);
+    text-shadow: 0 0 25px var(--glow-color);
+    animation-timing-function: ease-in-out;
+  }
+}
+```
+
+{% Aside 'objective' %} CSS `calc()` will use the unit type from the last item
+in the calculation. In the above case, that's 1ms. It's used strategically to
+convert the otherwise unitless number, into a value of `<time>` for the
+animation. {% endAside %}
+
+### Split words
+
+Flexbox worked as a container type for me here in these examples, nicely
+leveraging the `ch` unit as a healthy gap length.
+
+```css
+word-animation {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
+```
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qgTmqbho48bH9VE35HYj.mp4",
+       autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Flexbox devtools showing the gap between words
+  </figcaption>
+</figure>
+
+#### Transition split words example
+
+In this transition example I use hover again. As the effect initially hides the
+content until hover, I ensured that the interaction and styles were only applied
+if the device had the capability to hover.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/2oIFqmTm8QIoNAhRiJQl.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+@media (hover) {
+  [word-animation="hover"] {
+    overflow: hidden;
+    overflow: clip;
+
+    & > span {
+      transition: transform .3s ease;
+      cursor: pointer;
+
+      &:not(:hover) {
+        transform: translateY(50%);
+      }
+    }
+  }
+}
+```
+
+#### Animate split words example
+
+In this animation example I use CSS `@keyframes` again to create a staggered
+infinite animation on a regular paragraph of text.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fXANvKVQB8wiIYfaSp56.mp4",
+   autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+[word-animation="trampoline"] > span {
+  display: inline-block;
+  transform: translateY(100%);
+  animation:
+    trampoline 3s ease
+    calc(var(--index) * 150 * 1ms)
+    infinite alternate;
+}
+
+@keyframes trampoline {
+  0% {
+    transform: translateY(100%);
+    animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: ease-in;
+  }
+}
+```
+
+## Conclusion
+
+Now that you know how I did it, how would you?! 🙂
+
+Let's diversify our approaches and learn all the ways to build on the web.
+Create a Codepen or host your own demo, tweet me with it, and I'll add it to the
+Community remixes section below.
+
+Source
+- [GUI Challenges source on GitHub](https://github.com/argyleink/gui-challenges)
+- [Splitting text Codepen starter](https://codepen.io/argyleink/pen/poRLyOM)
+
+More demos and inspiration
+- [Splitting text Codepen collection](https://codepen.io/collection/XpROaV/)
+- [Splitting.js](https://splitting.js.org/)
+
+## Community remixes
+
+- `<text-hover>` web component by [gnehcwu](https://twitter.com/gnehcwu) on [CodeSandbox](https://codesandbox.io/s/texthover-webcomponent-gkpm2)
diff --git a/src/site/content/en/blog/buildwithchrome/index.md b/src/site/content/en/blog/buildwithchrome/index.md
new file mode 100644
index 00000000000..e2d71547cdd
--- /dev/null
+++ b/src/site/content/en/blog/buildwithchrome/index.md
@@ -0,0 +1,393 @@
+---
+layout: post
+title: Build with Chrome
+subhead: Bringing LEGO® bricks to the Multi-Device Web
+authors:
+  - hanseklund
+date: 2014-03-06
+tags:
+  - blog
+  - case-study
+---
+
+Build with Chrome, a fun experiment for desktop Chrome users [originally launched in Australia](http://google-au.blogspot.com/2012/06/build-bringing-lego-bricks-to-chrome.html), was re-released in 2014 featuring global availability, tie-ins with THE LEGO® MOVIE™, and newly added support for mobile devices. In this article we will share some learnings from the project, especially regarding the move from desktop-only experience to a multi-screen solution that supports both mouse and touch input.
+
+## The History of Build with Chrome
+
+The first version of Build with Chrome was launched in Australia in 2012. We wanted to demonstrate the power of the web in a whole new way and bring Chrome to a whole new audience.
+
+The site had two major parts: "Build" mode where users can build creations using LEGO bricks, and "Explore" mode for browsing the creations on a LEGO-ified version of Google Maps.
+
+Interactive 3D was essential to give users the best LEGO building experience. In 2012, WebGL was only publicly available in desktop browsers, so Build was targeted as a desktop-only experience. Explore used Google Maps to display the creations, but when zooming close enough it switched to a WebGL implementation of the map showing the creations in 3D, still using Google maps as the baseplate texture. We hoped to build an environment where LEGO enthusiasts of all ages could easily and intuitively express their creativity and explore each other's creations.
+
+In 2013, we decided to expand Build with Chrome to new web technologies. Among those technologies was WebGL in Chrome for Android, which naturally would allow Build with Chrome to evolve into a mobile experience. To get started, we first developed touch prototypes before questioning the hardware for the "Builder Tool" to understand the gesture behaviour and tactile responsiveness that we may face through a browser in comparison to a mobile app.
+
+## A Responsive Front-end
+
+We needed to support devices with both touch and mouse input. However, using the same UI on small touch screens turned out to a suboptimal solution because of space constraints.
+
+In Build there is a lot of interactivity going on: zooming in and out, changing brick colors, and of course selecting, rotating, and placing bricks. It's a tool where users often spend a lot of time, so it's important that they have quick access to everything they use frequently, and they should feel comfortable interacting with it.
+
+When designing a highly interactive touch application, you will discover that the screen quickly feels small and the user's fingers tend to cover a lot of the screen while interacting. This became obvious for us when working with the Builder. You really have to consider the physical screen size rather than the pixels in the graphics when doing the design. It becomes important to minimize the number of buttons and controls to get as much screen real estate as possible dedicated to the actual content.
+
+Our goal was to make Build feel natural on touch devices, not just adding touch input to the original desktop implementation, but make it feel as it was really intended for touch. We ended up with two variations of the UI, one for desktops and tablets with large screens and one for mobile devices with smaller screens. When possible, it's best to use a single implementation and have a fluid transition between modes. In our case, we determined that there was such a significant difference in experience between these two modes that we decided to rely on a specific breakpoint. The two versions have a lot of features in common and we tried to do most things with just one code implementation, but some aspects of the UI work differently between the two.
+
+We use user-agent data to detect mobile devices and then we check the viewport size to decide if the small screen mobile UI should be used. It's a bit hard to choose a breakpoint for what a "large screen" should be, because it's hard to get a reliable value of the physical screen size.  Fortunately, in our case, it doesn't really matter if we display the small screen UI on a touch device with a large screen, because the tool will still work fine, just that some of the buttons may feel a little bit too large.  In the end, we set the breakpoint to 1000 pixels; if you load the site from a window wider than 1000 pixels (in landscape mode), you'll get the large screen version.
+
+Let's talk a little bit about the two screen sizes and experiences:
+
+### Large screen, with mouse and touch support
+
+The large screen version is served to all desktop computers with mouse support and to touch devices with large screens (such as the Google Nexus 10).  This version is close to the original desktop solution in what kind of navigation controls are available, but we added touch support and some gestures.  We adjust the UI depending on the window size, so when a user resizes the window, it may remove or resize some of the UI.  We do this using CSS [media queries](http://www.w3.org/TR/css3-mediaqueries/).
+
+Example: When the available height is less than 730 pixels, the zoom-slider control in Explore mode is hidden:
+
+```css
+@media only screen and (max-height: 730px) {
+    .zoom-slider {
+        display: none;
+    }
+}
+```
+
+### Small screen, touch support only
+
+This version is served to mobile devices and small tablets (target devices Nexus 4 and Nexus 7). This version requires multi-touch support.
+
+On the small screen devices, we need to give the content as much screen real estate as possible, so we did a few tweaks to maximize space, mostly by moving infrequently-used elements out of sight:
+
+- The Build brick chooser minimizes into a color selector while building.
+- We replaced the zoom and orientation controls with multi-touch gestures.
+- The Chrome fullscreen functionality is also helpful to get some extra screen real estate.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/D03S44cGQsA3QHhhCM0M.png", alt="Build on a large screen", width="800", height="482" %}
+<figcaption>Build on a large screen. Brick chooser is always visible and there are a couple of controls on the right side.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MbHjuAHmyBMJ7Qzj59Mf.png", alt="Build on a small screen", width="800", height="534" %}
+<figcaption>Build on a small screen. Brick chooser is minimized and some buttons have been removed.</figcaption>
+</figure>
+
+## WebGL Performance and Support
+
+Modern touch devices have quite powerful GPUs, but they are still far from their desktop counterparts, so we knew we would have some challenges with performance, especially in the Explore 3D mode where we need to render a lot of creations at the same time.
+
+Creatively, we wanted to add a couple of new types of bricks with complex shapes and even transparency -- features that are typically very heavy on the GPU. However, we had to be backwards-compatible and continue supporting creations from the first version, so we couldn't set any new restrictions, such as significantly reducing the total number of bricks in the creations.
+
+In the first version of Build we had a maximum limit of bricks that could be used in one creation. There was a "brick-meter" indicating how many bricks that were left. In the new implementation we had some of the new bricks to affect the brick-meter more than the standard bricks, thus slightly reducing the total maximum number of bricks. This was one way to include new bricks while still maintaining decent performance.
+
+In Explore 3D mode there is quite a lot going on at the same time; loading of base plate textures, loading creations, animating and rendering creations, and so on.  This requires a lot from both GPU and CPU, so we did a lot of [frame profiling](https://developer.chrome.com/docs/devtools/evaluate-performance/performance-reference/#scripting_events) in Chrome DevTools to optimize these parts as much as possible. On mobile devices we decided to zoom a bit closer to the creations so that we don't have to render as many creations at the same time.
+
+Some devices had us revisit and simplify some of the WebGL shaders, but we always found a way to solve it and move forward.
+
+### Supporting non-WebGL devices
+
+We wanted the site to be somewhat usable even if the visitor's device doesn't support WebGL. Sometimes there are ways to represent the 3D in a simplified way using a canvas solution or CSS3D features. Unfortunately we didn't find a good enough solution to replicate Build and Explore 3D features without using WebGL.
+
+For consistency, the visual style of the creations must be the same across all platforms.  We could have potentially tried for a [2.5D](http://en.wikipedia.org/wiki/2.5D) solution, but this would ave made the creations look different in some ways. We also had to consider how to make sure creations built with the first version of Build with Chrome would look the same and run as smoothly in the new version of the site as they did in the first one.
+
+Explore 2D mode is still accessible to non-WebGL devices, even though you can't build new creations or explore in 3D.  So users can still get an idea of the depth of the project and what they could create using this tool if they were on a WebGL-enabled device.  The site might not be as valuable to users without WebGL support, but it should at least act as a teaser and get them involved in trying it out.
+
+Keeping fallback versions for WebGL solutions is sometimes just not possible.  There are many possible reasons; performance, visual style, development and maintenance costs, and so on.  However, when you decide not to implement a fallback, you should at least take care of the non-WebGL-enabled visitors, explain why they can't access the site fully, and give instructions for how they can solve the problem by using a browser supporting WebGL.
+
+## Asset Management
+
+In 2013, Google introduced a new version of Google Maps with the most significant UI changes since its launch. So we decided to redesign Build with Chrome to fit in with the new Google Maps UI, and in doing so took other factors into the redesign. The new design is relatively flat with clean solid colors and simple shapes. This enabled us to use pure CSS on a lot of the UI elements, minimizing the use of images.
+
+In Explore we need to load a lot of images; thumbnail images for the creations, map textures for the baseplates and finally the actual 3d creations. We take extra care to make sure that there is no memory leakage when we're constantly loading new images.
+
+The 3D creations are stored in a custom file format packaged as a PNG image. Keeping the 3D creations data stored as an image enabled us to basically pass the data directly to the shaders rendering the creations.
+
+For all user generated images the design allowed us to use the same image sizes to all platforms, thus minimizing storage and bandwidth usage.
+
+
+## Managing Screen Orientation
+
+It is easy to forget how much the screen aspect ratio changes when moving from portrait to landscape mode or the other way around. You need to consider this from the start when adapting for mobile devices.
+
+On a traditional website with scroll enabled, you may apply CSS rules to get a responsive site that re-arranges content and menus. As long as you may use scroll functionality this is fairly manageable.
+
+We used this method with Build too, but we were a bit limited in how we could solve the layout, because we needed to have the content visible at all time and still have quick access to a number of controls and buttons. For pure content sites like news sites, a fluid layout makes a lot of sense, but for a game app like ours it was a struggle. It became a challenge to find a layout that worked in both landscape and portrait orientation while still keeping a good overview of the content and a comfortable way of interacting. In the end we decided to keep Build in landscape only and we tell the user to rotate their device.
+
+Explore was a lot easier to solve in both orientations. We just needed to adjust the zoom level of the 3D depending of orientation to get a consistent experience.
+
+Most of the content layout is controlled by CSS, but some orientation-related stuff needed to be implemented in JavaScript. We found that there was no good cross-device solution to use window.orientation to identify the orientation, so in the end we were just comparing window.innerWidth and window.innerHeight to identify the orientation of the device.
+
+```js
+if( window.innerWidth > window.innerHeight ){
+  //landscape
+} else {
+  //portrait
+}
+```
+
+## Adding Touch Support
+
+Adding touch support to web content is reasonably straightforward. Basic interactivity, such as the click event, works the same on desktop and touch-enabled devices, but when it comes to more advanced interactions you also need to handle the touch events: touchstart, touchmove and touchend. [This article](http://www.html5rocks.com/en/mobile/touch/) covers the basics of how to use these events. Internet Explorer does not support touch events, but instead uses [Pointer Events](http://www.w3.org/TR/pointerevents/) (pointerdown, pointermove, pointerup). Pointer Events have been submitted to W3C for standardization but for now are only implemented in Internet Explorer.
+
+In the Explore 3D mode we wanted the same navigation as the standard Google Maps implementation; using one finger to pan around the map and two finger pinch to zoom. Because the creations are in 3D we also added the two finger rotate gesture. This is typically something that will require the use of touch-events.
+
+A good practice is to avoid heavy computing, such as updating or rendering the 3D in the event handlers. Instead, store the touch input in a variable and react on the input in the requestAnimationFrame render loop. This also makes it easier to have a mouse implementation at the same time, you just store the corresponding mouse values in the same variables.
+
+Start by initializing an object to store the input in and add the touchstart event listener. In each event handler we call event.preventDefault(). This is to keep the browser from continuing to process the touch event, which could cause some unexpected behaviour such as scrolling or scaling the entire page.
+
+```js
+var input = {dragStartX:0, dragStartY:0, dragX:0, dragY:0, dragDX:0, dragDY:0, dragging:false};
+plateContainer.addEventListener('touchstart', onTouchStart);
+
+function onTouchStart(event) {
+  event.preventDefault();
+  if( event.touches.length === 1){
+    handleDragStart(event.touches[0].clientX , event.touches[0].clientY);
+    //start listening to all needed touchevents to implement the dragging
+    document.addEventListener('touchmove', onTouchMove);
+    document.addEventListener('touchend', onTouchEnd);
+    document.addEventListener('touchcancel', onTouchEnd);
+  }
+}
+
+function onTouchMove(event) {
+  event.preventDefault();
+  if( event.touches.length === 1){
+    handleDragging(event.touches[0].clientX, event.touches[0].clientY);
+  }
+}
+
+function onTouchEnd(event) {
+  event.preventDefault();
+  if( event.touches.length === 0){
+    handleDragStop();
+    //remove all eventlisteners but touchstart to minimize number of eventlisteners
+    document.removeEventListener('touchmove', onTouchMove);
+    document.removeEventListener('touchend', onTouchEnd);
+    //also listen to touchcancel event to avoid unexpected behavior when switching tabs and some other situations
+    document.removeEventListener('touchcancel', onTouchEnd);
+  }
+}
+```
+
+We are not doing the actual storage of the input in the event handlers but instead in separate handlers:  handleDragStart, handleDragging and handleDragStop. This is because we want to be able to call these from the mouse event handlers too. Keep in mind that although unlikely, the user may use touch and mouse at the same time. Rather than handle that case directly, we just make sure nothing blows up.
+
+```js
+function handleDragStart(x ,y ){
+  input.dragging = true;
+  input.dragStartX = input.dragX = x;
+  input.dragStartY = input.dragY = y;
+}
+
+function handleDragging(x ,y ){
+  if(input.dragging) {
+    input.dragDX = x - input.dragX;
+    input.dragDY = y - input.dragY;
+    input.dragX = x;
+    input.dragY = y;
+  }
+}
+
+function handleDragStop(){
+  if(input.dragging) {
+    input.dragging = false;
+    input.dragDX = 0;
+    input.dragDY = 0;
+  }
+}
+```
+
+When doing animations based on touchmove it is often useful to also store the delta move since last event. For example, we used this as a parameter for the velocity of the camera when moving across all the base plates in Explore, since you are not dragging the base plates but instead you are actually moving the camera.
+
+```js
+function onAnimationFrame() {
+  requestAnimationFrame( onAnimationFrame );
+
+  //execute animation based on input.dragDX, input.dragDY, input.dragX or input.dragY
+ /*
+  /
+  */
+
+  //because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
+  input.dragDX=0;
+  input.dragDY=0;
+}
+```
+
+**Embedded example:**
+Dragging an object using touch events. Similar implementation as when dragging the Explore 3D map in Build with Chrome: [http://cdpn.io/qDxvo](http://cdpn.io/qDxvo)
+
+### Multi-touch Gestures
+
+There are several frameworks or libraries, such as [Hammer](http://eightmedia.github.io/hammer.js/) or [QuoJS](http://quojs.tapquo.com/), that can take care of simplifying the management of multi-touch gestures, but if you want to combine several gestures and get full control, it is sometimes best to do it from scratch.
+
+To manage the pinch and rotate gestures we store the distance and angle between two fingers when the second finger is put on screen:
+
+```js
+//variables representing the actual scale/rotation of the object we are affecting
+var currentScale = 1;
+var currentRotation = 0;
+
+function onTouchStart(event) {
+  event.preventDefault();
+  if( event.touches.length === 1){
+    handleDragStart(event.touches[0].clientX , event.touches[0].clientY);
+  }else if( event.touches.length === 2 ){
+    handleGestureStart(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY );
+  }
+}
+
+function handleGestureStart(x1, y1, x2, y2){
+  input.isGesture = true;
+  //calculate distance and angle between fingers
+  var dx = x2 - x1;
+  var dy = y2 - y1;
+  input.touchStartDistance=Math.sqrt(dx*dx+dy*dy);
+  input.touchStartAngle=Math.atan2(dy,dx);
+  //we also store the current scale and rotation of the actual object we are affecting. This is needed to support incremental rotation/scaling. We can't assume that an object is always the same scale when gesture starts.
+  input.startScale=currentScale;
+  input.startAngle=currentRotation;
+}
+```
+
+In the touchmove event, we then continuously measure the distance and angle between those two fingers. The difference between the start distance and the current distance is then used to set the scale, and the difference between the start angle and the current angle is used to set the angle.
+
+```js
+function onTouchMove(event) {
+  event.preventDefault();
+  if( event.touches.length  === 1){
+    handleDragging(event.touches[0].clientX, event.touches[0].clientY);
+  }else if( event.touches.length === 2 ){
+    handleGesture(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY );
+  }
+}
+
+function handleGesture(x1, y1, x2, y2){
+  if(input.isGesture){
+    //calculate distance and angle between fingers
+    var dx = x2 - x1;
+    var dy = y2 - y1;
+    var touchDistance = Math.sqrt(dx*dx+dy*dy);
+    var touchAngle = Math.atan2(dy,dx);
+    //calculate the difference between current touch values and the start values
+    var scalePixelChange = touchDistance - input.touchStartDistance;
+    var angleChange = touchAngle - input.touchStartAngle;
+    //calculate how much this should affect the actual object
+    currentScale = input.startScale + scalePixelChange*0.01;
+    currentRotation = input.startAngle+(angleChange*180/Math.PI);
+    //upper and lower limit of scaling
+    if(currentScale<0.5) currentScale = 0.5;
+    if(currentScale>3) currentScale = 3;
+  }
+}
+```
+
+You could potentially use the distance change between each touchmove event in a similar way as the example with dragging, but that approach is often more useful when you want a continuous movement.
+
+```js
+function onAnimationFrame() {
+  requestAnimationFrame( onAnimationFrame );
+  //execute transform based on currentScale and currentRotation
+  /*
+  /
+  */
+
+  //because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
+  input.dragDX=0;
+  input.dragDY=0;
+}
+```
+
+You could also enable dragging of the object while doing the pinch and rotate gestures if you want to. In that case you would use the center point between the two fingers as the input to the dragging handler.
+
+**Embedded example:**
+Rotating and scaling an object in 2D.  Similar to how the map in Explore is implemented: [http://cdpn.io/izloq](http://cdpn.io/izloq)
+
+### Mouse and Touch Support on the Same Hardware
+
+Today there are several laptop computers, like the Chromebook Pixel, that support both mouse and touch input. This may cause some unexpected behaviors if you are not careful.
+
+One important thing is that you should not just detect touch support and then ignore mouse input, but instead support both at the same time.
+
+If you are not using `event.preventDefault()` in your touch event handlers there will also be some emulated mouse events fired, in order to keep most non-touch optimized sites still working. As an example, for a single tap on the screen these events may be fired in a rapid sequence and in this order:
+
+1. touchstart
+1. touchmove
+1. touchend
+1. mouseover
+1. mousemove
+1. mousedown
+1. mouseup
+1. click
+
+If you have a bit more complex interactions, these mouse events may cause some unexpected behavior, and mess up your implementation. It is often best to use `event.preventDefault()` in the touch event handlers and manage the mouse input in separate event handlers. You need to be aware that using `event.preventDefault()` in touch event handlers will also prevent some default behavior, such as scrolling and the click event.
+
+"In Build with Chrome we didn't want zooming to occur when someone double-taps on the site, even though that is standard in most browsers.  So we use the viewport meta tag to tell the browser not to zoom when a user double-taps.  This also removes the 300ms click delay, which improves the site's responsiveness.  (The click delay is there to make the distinction between a single tap and a double tap when double-tap zooming is enabled.)
+
+```html
+<meta name="viewport" content="width=device-width,user-scalable=no">
+```
+
+Remember that when using this feature it is up to you to make the site readable on all screen sizes, because the user will not be able to zoom closer.
+
+### Mouse, Touch and Keyboard Input
+
+In Explore 3D mode we wanted there to be three ways to navigate the map: mouse (dragging), touch (dragging, pinch to zoom and rotate) and keyboard (navigate with arrow keys). All of these navigation methods work slightly differently, but we used the same approach on all of them; setting variables in event handlers and act on that in the requestAnimationFrame loop.
+The requestAnimationFrame loop doesn't have to know which method is used to navigate.
+
+As an example, we could set the movement of the map (dragDX and dragDY) with all three input methods. Here is the keyboard implementation:
+
+```js
+document.addEventListener('keydown', onKeyDown );
+document.addEventListener('keyup', onKeyUp );
+
+function onKeyDown( event ) {
+  input.keyCodes[ "k" + event.keyCode ] = true;
+  input.shiftKey = event.shiftKey;
+}
+
+function onKeyUp( event ) {
+  input.keyCodes[ "k" + event.keyCode ] = false;
+  input.shiftKey = event.shiftKey;
+}
+
+//this needs to be called every frame before animation is executed
+function handleKeyInput(){
+  if(input.keyCodes.k37){
+    input.dragDX = -5; //37 arrow left
+  } else if(input.keyCodes.k39){
+    input.dragDX = 5; //39 arrow right
+  }
+  if(input.keyCodes.k38){
+    input.dragDY = -5; //38 arrow up
+  } else if(input.keyCodes.k40){
+    input.dragDY = 5; //40 arrow down
+  }
+}
+
+function onAnimationFrame() {
+  requestAnimationFrame( onAnimationFrame );
+  //because keydown events are not fired every frame we need to process the keyboard state first
+  handleKeyInput();
+  //implement animations based on what is stored in input
+   /*
+  /
+  */
+
+  //because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
+  input.dragDX = 0;
+  input.dragDY = 0;
+}
+```
+
+**Embedded example:**
+Using mouse, touch and keyboard to navigate: [http://cdpn.io/catlf](http://cdpn.io/catlf)
+
+## Summary
+
+Adapting Build with Chrome to support touch devices with many different screen sizes has been a learning experience. The team didn't have very much experience doing this level of interactivity on touch devices and we learned a lot along the way.
+
+The biggest challenge turned out to be how to solve the user experience and design. The technical challenges were to manage many screen sizes, touch events and performance issues.
+
+Even though there were some challenges with the WebGL shaders on touch devices, this is something that worked almost better than expected. Devices are becoming more and more powerful and WebGL implementations are improving rapidly. We feel that we will be using WebGL on devices a lot more in the near future.
+
+Now, if you haven't already, go and [build something awesome](http://www.buildwithchrome.com)!
+
diff --git a/src/site/content/en/blog/bundling-non-js-resources/index.md b/src/site/content/en/blog/bundling-non-js-resources/index.md
new file mode 100644
index 00000000000..89bdda993ac
--- /dev/null
+++ b/src/site/content/en/blog/bundling-non-js-resources/index.md
@@ -0,0 +1,196 @@
+---
+title: Bundling non-JavaScript resources
+subhead: Learn how to import and bundle various types of assets from JavaScript.
+description: Learn how to import and bundle various types of assets from JavaScript in a way that works both in browsers and bundlers.
+date: 2021-09-08
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/YxAYawQMtf7CTsT58dXD.jpg
+alt: Long rows of containers at a port.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - modules
+  - javascript
+---
+
+Suppose you're working on a web app. In that case, it's likely that you have to deal not only with JavaScript modules, but also with all sorts of other resources—Web Workers (which are also JavaScript, but not part of the regular module graph), images, stylesheets, fonts, WebAssembly modules and others.
+
+It's possible to include references to some of those resources directly in the HTML, but often they're logically coupled to reusable components. For example, a stylesheet for a custom dropdown tied to its JavaScript part, icon images tied to a toolbar component, or WebAssembly module tied to its JavaScript glue. In those cases, it's more convenient to reference the resources directly from their JavaScript modules and load them dynamically when (or if) the corresponding component is loaded.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/QBZDTToXECua2ixAZf9U.png", alt="Graph visualising various types of asssets imported into JS.", width="800", height="496" %}
+
+However, most large projects have build systems that perform additional optimizations and reorganization of content—for example, bundling and minification. They can't execute the code and predict what the result of execution will be, nor can they traverse every possible string literal in JavaScript and make guesses about whether it's a resource URL or not. So how can you make them "see" those dynamic assets loaded by JavaScript components, and include them in the build?
+
+### Custom imports in bundlers
+
+One common approach is to reuse the static import syntax. In some bundlers it might auto-detect format by the file extension, while others allow plugins to use a custom URL scheme like in the following example:
+
+```js
+// regular JavaScript import
+import { loadImg } from './utils.js';
+
+// special "URL imports" for assets
+import imageUrl from 'asset-url:./image.png';
+import wasmUrl from 'asset-url:./module.wasm';
+import workerUrl from 'js-url:./worker.js';
+
+loadImg(imageUrl);
+WebAssembly.instantiateStreaming(fetch(wasmUrl));
+new Worker(workerUrl);
+```
+
+When a bundler plugin finds an import with either an extension it recognizes or such an explicit custom scheme (`asset-url:` and `js-url:` in the example above), it adds the referenced asset to the build graph, copies it to the final destination, performs optimizations applicable for the asset's type and returns the final URL to be used during runtime.
+
+The benefits of this approach: reusing the JavaScript import syntax guarantees that all URLs are static and relative to the current file, which makes locating such dependencies easy for the build system.
+
+However, it has one significant drawback: such code can't work directly in the browser, as the browser doesn't know how to handle those custom import schemes or extensions. This might be fine if you control all the code and rely on a bundler for development anyway, but it's increasingly common to use JavaScript modules directly in the browser, at least during development, to reduce the friction. Someone working on a small demo might not even need a bundler at all, even in production.
+
+### Universal pattern for browsers and bundlers
+
+If you're working on a reusable component, you'd want it to function in either environment, whether it's used directly in the browser or pre-built as part of a larger app. Most modern bundlers allow for this by accepting the following pattern in JavaScript modules:
+
+```js
+new URL('./relative-path', import.meta.url)
+```
+
+This pattern can be detected statically by tools, almost as if it was a special syntax, yet it's a valid JavaScript expression that works directly in the browser, too.
+
+When using this pattern, the example above can be rewritten as:
+
+```js
+// regular JavaScript import
+import { loadImg } from './utils.js';
+
+loadImg(new URL('./image.png', import.meta.url));
+WebAssembly.instantiateStreaming(
+  fetch(new URL('./module.wasm', import.meta.url)),
+  { /* … */ }
+);
+new Worker(new URL('./worker.js', import.meta.url));
+```
+
+How does it work? Let's break it up. The `new URL(...)` constructor takes a relative URL as the first argument and resolves it against an absolute URL provided as the second argument. In our case, the second argument is [`import.meta.url`](https://v8.dev/features/modules#import-meta) which gives the URL of the current JavaScript module, so the first argument can be any path relative to it.
+
+It has similar tradeoffs to the [dynamic import](https://v8.dev/features/dynamic-import). While it's possible to use `import(...)` with arbitrary expressions like `import(someUrl)`, the bundlers give special treatment to a pattern with static URL `import('./some-static-url.js')` as a way to preprocess a dependency known at compile-time, yet [split it out into its own chunk](/reduce-javascript-payloads-with-code-splitting/) that's loaded dynamically.
+
+Similarly, you can use `new URL(...)` with arbitrary expressions like `new URL(relativeUrl, customAbsoluteBase)`, yet the `new URL('...', import.meta.url)` pattern is a clear signal for bundlers to preprocess and include a dependency alongside the main JavaScript.
+
+### Ambiguous relative URLs
+
+You might be wondering, why can't bundlers detect other common patterns—for example, `fetch('./module.wasm')` without the `new URL` wrappers?
+
+The reason is that, unlike import statements, any dynamic requests are resolved relatively to the document itself, and not to the current JavaScript file. Let's say you have the following structure:
+
+- `index.html`:  
+  ```html
+  <script src="src/main.js" type="module"></script>
+  ```
+- `src/`
+  -  `main.js`
+  -  `module.wasm`
+
+If you want to load `module.wasm` from `main.js`, it might be tempting to use a relative path like `fetch('./module.wasm')`.
+
+However, `fetch` does not know the URL of the JavaScript file it's executed in, instead, it resolves URLs relatively to the document. As a result, `fetch('./module.wasm')` would end up trying to load `http://example.com/module.wasm` instead of the intended `http://example.com/src/module.wasm` and fail (or, worse, silently load a different resource than you intended).
+
+By wrapping the relative URL into `new URL('...', import.meta.url)` you can avoid this problem and guarantee that any provided URL is resolved relative to the URL of the current JavaScript module (`import.meta.url`) before it's passed on to any loaders.
+
+Replace `fetch('./module.wasm')` with `fetch(new URL('./module.wasm', import.meta.url))` and it will successfully load the expected WebAssembly module, as well as give bundlers a way to find those relative paths during the build time too.
+
+### Tooling support
+
+#### Bundlers
+
+Following bundlers support the `new URL` scheme already:
+
+-  [Webpack v5](https://webpack.js.org/guides/asset-modules/#url-assets)
+-  [Rollup](https://rollupjs.org/) (Achieved via plugins—[@web/rollup-plugin-import-meta-assets](https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/) for generic assets and [@surma/rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread) for Workers specifically.)
+-  [Parcel v2 (beta)](https://v2.parceljs.org/languages/javascript/#url-dependencies)
+-  [Vite](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+
+#### WebAssembly
+
+When working with WebAssembly, you will commonly not load the Wasm module by hand, but instead import the JavaScript glue emitted by the toolchain. The following toolchains can emit the described `new URL(...)` pattern under the hood for you.
+
+##### C/C++ via Emscripten
+
+When using Emscripten, you can ask it to emit JavaScript glue as an ES6 module instead of a regular script via one of the following options:
+
+```shell
+$ emcc input.cpp -o output.mjs
+## or, if you don't want to use .mjs extension
+$ emcc input.cpp -o output.js -s EXPORT_ES6
+```
+
+When using this option, the output will use the `new URL(..., import.meta.url)` pattern under the hood, so that bundlers can find the associated Wasm file automatically.
+
+You can also use this option with [WebAssembly threads](/webassembly-threads/#c) by adding a `-pthread` flag:
+
+```shell
+$ emcc input.cpp -o output.mjs -pthread
+## or, if you don't want to use .mjs extension
+$ emcc input.cpp -o output.js -s EXPORT_ES6 -pthread
+```
+
+In this case, the generated Web Worker will be included in the same fashion and will also be discoverable by bundlers and browsers alike.
+
+##### Rust via wasm-pack / wasm-bindgen
+
+[wasm-pack](https://github.com/rustwasm/wasm-pack)—the primary Rust toolchain for WebAssembly—also has several output modes.
+
+By default, it will emit a JavaScript module that relies on the [WebAssembly ESM integration proposal](https://github.com/WebAssembly/esm-integration). At the moment of writing, this proposal is still experimental, and the output will work only when bundled with Webpack.
+
+Instead, you can ask wasm-pack to emit a browser-compatible ES6 module via `--target web`:
+
+```shell
+$ wasm-pack build --target web
+```
+
+The output will use the described `new URL(..., import.meta.url)` pattern, and the Wasm file will be automatically discovered by bundlers as well.
+
+If you want to use WebAssembly threads with Rust, the story is a bit more complicated. Check out the [corresponding section of the guide](/webassembly-threads/#rust) to learn more.
+
+Short version is that you can't use arbitrary thread APIs, but if you use [Rayon](https://github.com/rayon-rs/rayon), you can combine it with the [wasm-bindgen-rayon](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon) adapter so that it can spawn Workers on the Web. The JavaScript glue used by wasm-bindgen-rayon [also includes](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/4cd0666d2089886d6e8731de2371e7210f848c5d/demo/index.js#L26) the `new URL(...)` pattern under the hood, and so the Workers will be discoverable and included by bundlers as well.
+
+## Future features
+
+### import.meta.resolve
+
+A dedicated `import.meta.resolve(...)` call is a potential future improvement. It would allow resolving specifiers relatively to the current module in a more straightforward fashion, without extra params:
+
+```js/1/0
+new URL('...', import.meta.url)
+await import.meta.resolve('...')
+```
+
+It would also integrate better with import maps and custom resolvers as it would go through the same module resolution system as `import`. It would be a stronger signal for bundlers too as it's a static syntax that doesn't depend on runtime APIs like `URL`.
+
+`import.meta.resolve` is already implemented [as an experiment in Node.js](https://nodejs.org/api/esm.html#esm_import_meta_resolve_specifier_parent) but there are still some [unresolved questions](https://github.com/WICG/import-maps/issues/79) about how it should work on the web.
+
+### Import assertions
+
+Import assertions are a new feature that allows to import types other than ECMAScript modules. For now they're limited to JSON:
+
+{% Label%}foo.json:{% endLabel %}
+
+```json
+{ "answer": 42 }
+```
+
+{% Label %}main.mjs:{% endLabel %}
+
+```js
+import json from './foo.json' assert { type: 'json' };
+console.log(json.answer); // 42
+```
+
+They might also be used by bundlers and replace the use-cases currently covered by the `new URL` pattern, but types in import assertions are added on a per-case basis. For now they only cover JSON, with CSS modules coming up soon, but other kinds of assets will still require a more generic solution.
+
+Check out the [v8.dev feature explainer](https://v8.dev/features/import-assertions) to learn more about this feature.
+
+## Conclusion
+
+As you can see, there are various ways to include non-JavaScript resources on the web, but they have various drawbacks and don't work across various toolchains. Future proposals might let us import such assets with specialized syntax, but we're not quite there yet.
+
+Until then, the `new URL(..., import.meta.url)` pattern is the most promising solution that already works in browsers, various bundlers and WebAssembly toolchains today.
diff --git a/src/site/content/en/blog/cache-api-quick-guide/index.md b/src/site/content/en/blog/cache-api-quick-guide/index.md
index 018a0e6e815..d31722d3360 100644
--- a/src/site/content/en/blog/cache-api-quick-guide/index.md
+++ b/src/site/content/en/blog/cache-api-quick-guide/index.md
@@ -1,4 +1,5 @@
 ---
+layou: post
 title: "The Cache API: A quick guide"
 subhead: Learn how to use the Cache API to make your application data available offline.
 authors:
@@ -9,6 +10,8 @@ updated: 2020-04-27
 tags:
   - blog
   - progressive-web-apps
+feedback:
+  - api
 ---
 
 The [Cache API][mdn-cache] is a system for storing and retrieving network
@@ -18,7 +21,7 @@ be created solely for the purpose of storing data for later use.
 
 The Cache API was created to enable service workers to cache network requests
 so that they can provide fast responses, regardless of network speed or
-availablity. However, the API can also be used as a general storage mechanism.
+availability. However, the API can also be used as a general storage mechanism.
 
 ## Where is it available?
 
@@ -30,6 +33,8 @@ the API with a simple feature detection:
 const cacheAvailable = 'caches' in self;
 ```
 
+{% BrowserCompat 'api.Cache' %}
+
 The Cache API can be accessed from a window, iframe, worker, or service worker.
 
 ## What can be stored
@@ -105,13 +110,13 @@ The second must be a `Response`, either from the network, or generated by your
 code.
 
 ```js
-// Retreive data.json from the server and store the response.
+// Retrieve data.json from the server and store the response.
 cache.put('/data.json');
 
 // Create a new entry for test.json and store the newly created response.
 cache.put('/test.json', new Response('{"foo": "bar"}'));
 
-// Retreive data.json from the 3rd party site and store the response.
+// Retrieve data.json from the 3rd party site and store the response.
 cache.put('https://example.com/data.json');
 ```
 
@@ -196,14 +201,14 @@ with a value of a different type.
         Interprets the bytes of the body as an HTML form, encoded either as
         <code>multipart/form-data</code> or
         <code>application/x-www-form-urlencoded</code>. Returns a
-        <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</a>
+        <a href="https://developer.mozilla.org/docs/Web/API/FormData">FormData</a>
         object, or throws a <code>TypeError</code> if the data cannot be parsed.
       </td>
     </tr>
     <tr>
       <td><code>body</code></td>
       <td>
-        Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream">ReadableStream</a>
+        Returns a <a href="https://developer.mozilla.org/docs/Web/API/ReadableStream">ReadableStream</a>
         for the body data.
       </td>
     </tr>
@@ -344,7 +349,7 @@ To delete a cache, call `caches.delete(name)`. This function returns a
 Thanks to Mat Scales who wrote the original version of this article, which
 first appeared on WebFundamentals.
 
-[mdn-cache]: https://developer.mozilla.org/en-US/docs/Web/API/Cache
+[mdn-cache]: https://developer.mozilla.org/docs/Web/API/Cache
 [caniuse-cache]: https://caniuse.com/#feat=mdn-api_cache
-[mdn-request]: https://developer.mozilla.org/en-US/docs/Web/API/Request
-[mdn-response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
+[mdn-request]: https://developer.mozilla.org/docs/Web/API/Request
+[mdn-response]: https://developer.mozilla.org/docs/Web/API/Response
diff --git a/src/site/content/en/blog/camera-pan-tilt-zoom/index.md b/src/site/content/en/blog/camera-pan-tilt-zoom/index.md
new file mode 100644
index 00000000000..f735feb9af3
--- /dev/null
+++ b/src/site/content/en/blog/camera-pan-tilt-zoom/index.md
@@ -0,0 +1,276 @@
+---
+title: Control camera pan, tilt, and zoom
+subhead:
+  Pan, tilt, and zoom features on cameras are finally controllable on the web.
+authors:
+  - beaufortfrancois
+date: 2020-10-05
+updated: 2021-03-22
+hero: image/admin/wbcUb7ooaR1nCeYnSiCV.jpg
+thumbnail: image/admin/eBugU3Spjq9df1qb5l0b.jpg
+alt: Five persons in a conference room photo.
+description: |
+  Pan, tilt, and zoom features on cameras are finally controllable on the web.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - media
+feedback:
+  - api
+---
+
+Room-scale video conferencing solutions deploy cameras with pan, tilt, and zoom
+(PTZ) capabilities so that software can point the camera at meeting
+participants. Starting in Chrome&nbsp;87, the pan, tilt, and zoom features on
+cameras are available to websites using media track constraints in
+`MediaDevices.getUserMedia()` and `MediaStreamTrack.applyConstraints()`.
+
+## Using the API {: #use }
+
+### Feature detection {: #feature-detection }
+
+Feature detection for hardware is different from what you're probably used to.
+The presence of `"pan"`, `"tilt"`, and `"zoom"` constraint names in
+`navigator.mediaDevices.getSupportedConstraints()` tells you that the browser
+supports the API to control camera PTZ, but not whether the camera hardware
+supports it. As of Chrome&nbsp;87, controlling camera PTZ is supported on
+desktop, while Android still supports zoom only.
+
+```js
+const supports = navigator.mediaDevices.getSupportedConstraints();
+if (supports.pan && supports.tilt && supports.zoom) {
+  // Browser supports camera PTZ.
+}
+```
+
+### Request camera PTZ access {: #request }
+
+A website is allowed to control camera PTZ only if the user has explicitly
+granted the camera with PTZ permission through a prompt.
+
+To request camera PTZ access, call `navigator.mediaDevices.getUserMedia()` with
+the PTZ constraints as shown below. This will prompt the user to grant both
+regular camera and camera with PTZ permissions.
+
+<figure>
+  {% Img src="image/admin/WmkzmVeiplCoh3HesJS5.jpg", alt="Screenshot of a camera PTZ user prompt in Chrome for macOS.", width="800", height="382" %}
+  <figcaption>Camera PTZ user prompt.</figcaption>
+</figure>
+
+The returned promise will resolve with a [`MediaStream`] object used to show the
+camera video stream to the user. If the camera does not support PTZ, the user
+will get a regular camera prompt.
+
+```js
+try {
+  // User is prompted to grant both camera and PTZ access in a single call.
+  // If camera doesn't support PTZ, it falls back to a regular camera prompt.
+  const stream = await navigator.mediaDevices.getUserMedia({
+    // Website asks to control camera PTZ as well without altering the
+    // current pan, tilt, and zoom settings.
+    video: { pan: true, tilt: true, zoom: true }
+  });
+
+  // Show camera video stream to user.
+  document.querySelector("video").srcObject = stream;
+} catch (error) {
+  // User denies prompt or matching media is not available.
+  console.log(error);
+}
+```
+
+A previously-granted camera permission, specifically one without PTZ access,
+does not automatically gain PTZ access if it becomes available. This is true
+even when the camera itself supports PTZ. The permission must be requested
+again. Fortunately, you can use the [Permissions API] to query and monitor the
+status of PTZ permission.
+
+```js
+try {
+  const panTiltZoomPermissionStatus = await navigator.permissions.query({
+    name: "camera",
+    panTiltZoom: true
+  });
+
+  if (panTiltZoomPermissionStatus.state == "granted") {
+    // User has granted access to the website to control camera PTZ.
+  }
+
+  panTiltZoomPermissionStatus.addEventListener("change", () => {
+    // User has changed PTZ permission status.
+  });
+} catch (error) {
+  console.log(error);
+}
+```
+
+To know whether a Chromium-based browser supports PTZ for a camera, go to the
+internal `about://media-internals` page and check out the "Pan-Tilt-Zoom" column
+in the "Video Capture" tab; "pan tilt" and "zoom" respectively mean the camera supports
+the "PanTilt (Absolute)" and "Zoom (Absolute)" [UVC controls]. The "PanTilt (Relative)"
+and "Zoom (Relative)" UVC controls are not supported in Chromium-based browsers.
+
+<figure>
+  {% Img
+    src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/4EDS8fYYifXAUY6SBaiV.png",
+    alt="Screenshot of the internal page in ChromeOS to debug PTZ camera support.",
+    width="800",
+    height="481" %}
+  <figcaption>Internal page to debug PTZ camera support.</figcaption>
+</figure>
+
+### Control camera PTZ {: #control }
+
+Manipulate camera PTZ capabilities and settings using the preview
+`MediaStreamTrack` from the `stream` object obtained earlier.
+`MediaStreamTrack.getCapabilities()` returns a dictionary with the supported
+capabilities and the ranges or allowed values. Correspondingly,
+`MediaStreamTrack.getSettings()` returns the current settings.
+
+Pan, tilt, and zoom capabilities and settings are available only if supported by
+the camera and the user has granted PTZ permission to the camera.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/camera-pan-tilt-zoom/ptz_h264.mp4" type="video/mp4">
+  </video>
+  <figcaption>Controlling Camera PTZ.</figcaption>
+</figure>
+
+Call `videoTrack.applyConstraints()` with the appropriate [PTZ advanced
+constraints] to control camera pan, tilt, and zoom as shown in the example below.
+The returned promise will resolve if successful. Otherwise it will reject if
+either:
+- the camera with PTZ permission is not granted.
+- the camera hardware does not support the PTZ constraint.
+- the page is not visible to the user. Use the [Page Visibility API] to detect
+  page visibility changes.
+
+```js
+// Get video track capabilities and settings.
+const [videoTrack] = stream.getVideoTracks();
+const capabilities = videoTrack.getCapabilities();
+const settings = videoTrack.getSettings();
+
+// Let the user control the camera pan motion if the camera supports it
+// and PTZ access is granted.
+if ("pan" in settings) {
+  const input = document.querySelector("input[type=range]");
+  input.min = capabilities.pan.min;
+  input.max = capabilities.pan.max;
+  input.step = capabilities.pan.step;
+  input.value = settings.pan;
+
+  input.addEventListener("input", async () => {
+    await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
+  });
+}
+
+if ("tilt" in settings) {
+  // similar for tilt...
+}
+if ("zoom" in settings) {
+  // similar for zoom...
+}
+```
+
+It is also possible to configure camera pan, tilt, and zoom by calling
+`navigator.mediaDevices.getUserMedia()` with some camera PTZ ideal constraint
+values. This is handy when camera PTZ capabilities are known in advance. Note
+that [mandatory constraints] (min, max, exact) are not allowed here.
+
+```js
+const stream = await navigator.mediaDevices.getUserMedia({
+  // Website asks to reset known camera pan.
+  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
+});
+```
+
+## Playground  {: #playground }
+
+You can play with the API by running the [demo] on Glitch. Be sure to [check out
+the source code].
+
+Tip: If you don't have a camera that supports PTZ, you can [run Chrome with the
+switch] `--use-fake-device-for-media-stream` to simulate one on your machine.
+Enjoy!
+
+{% Glitch {
+  id: 'ptz',
+  path: 'script.js'
+} %}
+
+## Security Considerations  {: #security }
+
+The spec authors have designed and implemented this API using the core
+including user control, transparency, and ergonomics. The ability to use this
+API is primarily gated by the same permission model as the [Media Capture and
+Streams API]. In response to a user prompt, the website is allowed to control
+camera PTZ only when the page is visible to the user.
+
+## Browser compatibility
+
+### MediaStream API
+
+{% BrowserCompat 'api.MediaStream' %}
+
+### Permissions API
+
+{% BrowserCompat 'api.Permissions' %}
+
+### Page Visibility API
+
+{% BrowserCompat 'api.Document.visibilityState' %}
+
+### `MediaDevices.getUserMedia()`
+
+{% BrowserCompat 'api.MediaDevices.getUserMedia' %}
+
+### `MediaDevices.getSupportedConstraints()`
+
+{% BrowserCompat 'api.MediaDevices.getSupportedConstraints' %}
+
+### `MediaStreamTrack.applyConstraints()`
+
+{% BrowserCompat 'api.MediaStreamTrack.applyConstraints' %}
+
+### `MediaStreamTrack.getCapabilities()`
+
+{% BrowserCompat 'api.MediaStreamTrack.getCapabilities' %}
+
+### `MediaStreamTrack.getSettings()`
+
+{% BrowserCompat 'api.MediaStreamTrack.getSettings' %}
+
+## Helpful links {: #helpful }
+
+- [PTZ Explainer](https://github.com/w3c/mediacapture-image/blob/master/ptz-explainer.md)
+- [Specification draft](https://w3c.github.io/mediacapture-image/)
+- [GitHub repository](https://github.com/w3c/mediacapture-image)
+- [ChromeStatus entry](https://www.chromestatus.com/feature/5570717087170560)
+- [Chrome tracking bug](https://bugs.chromium.org/p/chromium/issues/detail?id=934063)
+
+## Acknowledgements
+
+This article was reviewed by [Joe Medley] and [Thomas Steiner].
+Thanks to [Rijubrata Bhaumik] and [Eero Häkkinen] at Intel for their work on the
+spec and the implementation.
+Hero image by [Christina @ wocintechchat.com] on [Unsplash].
+
+[mandatory constraints]: https://developer.mozilla.org/docs/Web/API/Media_Streams_API/Constraints#Specifying_a_range_of_values:~:text=mandatory
+[`MediaStream`]: https://developer.mozilla.org/docs/Web/API/MediaStream
+[Permissions API]: https://developer.mozilla.org/docs/Web/API/Permissions_API
+[UVC controls]: https://www.usb.org/document-library/video-class-v15-document-set
+[PTZ advanced constraints]: https://bugs.chromium.org/p/chromium/issues/detail?id=1126045
+[Page Visibility API]: https://developer.mozilla.org/docs/Web/API/Page_Visibility_API
+[demo]: https://ptz.glitch.me/
+[check out the source code]: https://glitch.com/edit/#!/ptz?path=public%2Fscript.js
+[run Chrome with the switch]: https://www.chromium.org/developers/how-tos/run-chromium-with-flags
+[Media Capture and Streams API]: https://w3c.github.io/mediacapture-main
+[Controlling Access to Powerful Web Platform Features]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
+[Joe Medley]: https://github.com/jpmedley
+[Thomas Steiner]: https://github.com/tomayac
+[Eero Häkkinen]: https://github.com/eehakkin
+[Rijubrata Bhaumik]: https://github.com/riju
+[Christina @ wocintechchat.com]: https://unsplash.com/@wocintechchat
+[Unsplash]: https://unsplash.com/photos/lqPLmYD_MO8
diff --git a/src/site/content/en/blog/canvas-hidipi/index.md b/src/site/content/en/blog/canvas-hidipi/index.md
new file mode 100644
index 00000000000..cd9a009df71
--- /dev/null
+++ b/src/site/content/en/blog/canvas-hidipi/index.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: High DPI Canvas
+authors:
+  - paullewis
+date: 2012-08-25
+tags:
+  - blog
+---
+
+## Introduction
+
+HiDPI screens are lovely, they make everything look smoother and cleaner. But they also present a new set of challenges to developers. In this article we are going to take a look into the unique challenges of drawing images in the canvas in the context of HiDPI screens.
+
+## The devicePixelRatio property
+
+Let's start at the beginning. Back before we had HiDPI screens a pixel was a pixel (if we ignore zooming and scaling for a bit) and that was it, you didn't really need to change anything around. If you set something to be 100px wide that was all there was to it. Then the first few HiDPI mobile handsets started popping up with the slightly enigmatic devicePixelRatio property on the window object and available for use in media queries. What this property allowed us to do was understand the ratio of how pixel values (which we call the logical pixel value) in - say - CSS would translate to the __actual__ number of pixels the device would use when it came to rendering. In the case of an iPhone 4S, which has a devicePixelRatio of 2, you will see that a 100px logical value equates to a 200px device value.
+
+That's interesting, but what does that mean for us developers? Well in the early days we all started to notice that our images were being upscaled by these devices. We were creating images at the logical pixel width of our elements and, when they were drawn out, they would be upscaled by the devicePixelRatio and they'd be blurry.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1TY8FIbQ4pLaiSsWlxbm.png", alt="An image being upscaled and blurred due to the devicePixelRatio", width="600", height="180" %}
+    <figcaption>Figure 1 - An image being upscaled and blurred due to the devicePixelRatio</figcaption>
+</figure>
+
+The de facto solution to this has been to create images scaled up by the devicePixelRatio and then use CSS to scale it down by the same amount, and the same is true for canvas!
+
+```js
+function setupCanvas(canvas) {
+  // Get the device pixel ratio, falling back to 1.
+  var dpr = window.devicePixelRatio || 1;
+  // Get the size of the canvas in CSS pixels.
+  var rect = canvas.getBoundingClientRect();
+  // Give the canvas pixel dimensions of their CSS
+  // size * the device pixel ratio.
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  var ctx = canvas.getContext('2d');
+  // Scale all drawing operations by the dpr, so you
+  // don't have to worry about the difference.
+  ctx.scale(dpr, dpr);
+  return ctx;
+}
+
+// Now this line will be the same size on the page
+// but will look sharper on high-DPI devices!
+var ctx = setupCanvas(document.querySelector('.my-canvas'));
+ctx.lineWidth = 5;
+ctx.beginPath();
+ctx.moveTo(100, 100);
+ctx.lineTo(200, 200);
+ctx.stroke();
+```
diff --git a/src/site/content/en/blog/canvas-imagefilters/index.md b/src/site/content/en/blog/canvas-imagefilters/index.md
new file mode 100644
index 00000000000..df33f2292d1
--- /dev/null
+++ b/src/site/content/en/blog/canvas-imagefilters/index.md
@@ -0,0 +1,255 @@
+---
+layout: post
+title: Image filters with canvas
+date: 2011-05-25
+authors:
+  - ilmariheikkinen
+tags:
+  - blog
+---
+
+## Introduction
+
+The HTML5 canvas element can be used to write image filters. What you
+need to do is draw an image onto a canvas, read back the canvas pixels,
+and run your filter on them. You can then write the result onto a new
+canvas (or heck, just reuse the old one.)
+
+Sounds simple? Good. Let's get cracking!
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZyDo02gmIzf8LOpnofJ4.png", alt="The original test image", width="600", height="337" %}
+  <figcaption>The original test image</figcaption>
+</figure>
+
+## Processing pixels
+
+First, retrieve the image pixels:
+
+```js
+Filters = {};
+Filters.getPixels = function(img) {
+var c = this.getCanvas(img.width, img.height);
+var ctx = c.getContext('2d');
+ctx.drawImage(img);
+return ctx.getImageData(0,0,c.width,c.height);
+};
+
+Filters.getCanvas = function(w,h) {
+var c = document.createElement('canvas');
+c.width = w;
+c.height = h;
+return c;
+};
+```
+
+Next, we need a way to filter images. How about a `filterImage`
+method that takes a filter and an image and returns the filtered pixels?
+
+```js
+Filters.filterImage = function(filter, image, var_args) {
+var args = [this.getPixels(image)];
+for (var i=2; i&lt;arguments.length; i++) {
+args.push(arguments[i]);
+}
+return filter.apply(null, args);
+};
+```
+
+## Running simple filters
+
+Now that we have the pixel processing pipeline put together, it's time to
+write some simple filters. To start off, let's convert the image to grayscale.
+
+```js
+Filters.grayscale = function(pixels, args) {
+var d = pixels.data;
+for (var i=0; i&lt;d.length; i+=4) {
+var r = d[i];
+var g = d[i+1];
+var b = d[i+2];
+// CIE luminance for the RGB
+// The human eye is bad at seeing red and blue, so we de-emphasize them.
+var v = 0.2126*r + 0.7152*g + 0.0722*b;
+d[i] = d[i+1] = d[i+2] = v
+}
+return pixels;
+};
+```
+
+Adjusting brightness can be done by adding a fixed value to the pixels:
+
+```js
+Filters.brightness = function(pixels, adjustment) {
+var d = pixels.data;
+for (var i=0; i&lt;d.length; i+=4) {
+d[i] += adjustment;
+d[i+1] += adjustment;
+d[i+2] += adjustment;
+}
+return pixels;
+};
+```
+Thresholding an image is also quite simple. You just compare the grayscale
+value of a  pixel to the threshold value and set the color based on that:
+
+```js
+Filters.threshold = function(pixels, threshold) {
+var d = pixels.data;
+for (var i=0; i&lt;d.length; i+=4) {
+var r = d[i];
+var g = d[i+1];
+var b = d[i+2];
+var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
+d[i] = d[i+1] = d[i+2] = v
+}
+return pixels;
+};
+```
+
+## Convolving images
+
+[Convolution filters](http://en.wikipedia.org/wiki/Convolution) are very useful generic filters for image processing.
+The basic idea is that you take the weighed sum of a
+rectangle of pixels from the source image and use that as the output value.
+Convolution filters can be used for blurring, sharpening, embossing,
+edge detection and a whole bunch of other things.
+
+```js
+Filters.tmpCanvas = document.createElement('canvas');
+Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
+
+Filters.createImageData = function(w,h) {
+return this.tmpCtx.createImageData(w,h);
+};
+
+Filters.convolute = function(pixels, weights, opaque) {
+var side = Math.round(Math.sqrt(weights.length));
+var halfSide = Math.floor(side/2);
+var src = pixels.data;
+var sw = pixels.width;
+var sh = pixels.height;
+// pad output by the convolution matrix
+var w = sw;
+var h = sh;
+var output = Filters.createImageData(w, h);
+var dst = output.data;
+// go through the destination image pixels
+var alphaFac = opaque ? 1 : 0;
+for (var y=0; y&lt;h; y++) {
+for (var x=0; x&lt;w; x++) {
+  var sy = y;
+  var sx = x;
+  var dstOff = (y*w+x)*4;
+  // calculate the weighed sum of the source image pixels that
+  // fall under the convolution matrix
+  var r=0, g=0, b=0, a=0;
+  for (var cy=0; cy&lt;side; cy++) {
+    for (var cx=0; cx&lt;side; cx++) {
+      var scy = sy + cy - halfSide;
+      var scx = sx + cx - halfSide;
+      if (scy >= 0 && scy &lt; sh && scx >= 0 && scx &lt; sw) {
+        var srcOff = (scy*sw+scx)*4;
+        var wt = weights[cy*side+cx];
+        r += src[srcOff] * wt;
+        g += src[srcOff+1] * wt;
+        b += src[srcOff+2] * wt;
+        a += src[srcOff+3] * wt;
+      }
+    }
+  }
+  dst[dstOff] = r;
+  dst[dstOff+1] = g;
+  dst[dstOff+2] = b;
+  dst[dstOff+3] = a + alphaFac*(255-a);
+}
+}
+return output;
+};
+```
+
+Here's a 3x3 sharpen filter. See how it focuses the weight on the center pixel.
+To maintain the brightness of the image, the sum of the matrix values should
+be one.
+
+```js
+Filters.filterImage(Filters.convolute, image,
+[  0, -1,  0,
+-1,  5, -1,
+  0, -1,  0 ]
+);
+```
+
+Here's an another example of a convolution filter, the box blur. The box
+blur outputs the average of the pixel values inside the convolution matrix.
+The way to do that is to create a convolution matrix of size NxN where
+each of the weights is 1 / (NxN). That way each of the pixels inside the
+matrix contributes an equal amount to the output image and the sum of the
+weights is one.
+
+```js
+Filters.filterImage(Filters.convolute, image,
+[ 1/9, 1/9, 1/9,
+1/9, 1/9, 1/9,
+1/9, 1/9, 1/9 ]
+);
+```
+
+We can make more complex image filters by combining existing filters. For
+example, let's write a [Sobel filter](http://en.wikipedia.org/wiki/Sobel_filter). A Sobel filter computes the vertical
+and horizontal gradients of the image and combines the computed images to
+find edges in the image.
+The way we implement the Sobel filter here is by first grayscaling the image,
+then taking the horizontal and vertical gradients and finally
+combining the gradient images to make up the final image.
+
+
+Regarding terminology, "gradient" here means the change
+in pixel value at an image position. If a pixel has a left neighbour with
+value 20 and a right neighbour with value 50, the horizontal gradient at
+the pixel would be 30. The vertical gradient has the same idea but
+uses the above and below neighbours.
+
+```js
+var grayscale = Filters.filterImage(Filter.grayscale, image);
+// Note that ImageData values are clamped between 0 and 255, so we need
+// to use a Float32Array for the gradient values because they
+// range between -255 and 255.
+var vertical = Filters.convoluteFloat32(grayscale,
+[ -1, 0, 1,
+-2, 0, 2,
+-1, 0, 1 ]);
+var horizontal = Filters.convoluteFloat32(grayscale,
+[ -1, -2, -1,
+  0,  0,  0,
+  1,  2,  1 ]);
+var final_image = Filters.createImageData(vertical.width, vertical.height);
+for (var i=0; i&lt;final_image.data.length; i+=4) {
+// make the vertical gradient red
+var v = Math.abs(vertical.data[i]);
+final_image.data[i] = v;
+// make the horizontal gradient green
+var h = Math.abs(horizontal.data[i]);
+final_image.data[i+1] = h;
+// and mix in some blue for aesthetics
+final_image.data[i+2] = (v+h)/4;
+final_image.data[i+3] = 255; // opaque alpha
+}
+```
+
+And there's a whole bunch of other cool convolution filters out there
+just waiting for you to discover them.
+For instance, try implementing a [Laplace filter](http://en.wikipedia.org/wiki/Discrete_Laplace_operator#Implementation_in_Image_Processing)
+in the convolution toy above and see what it does.
+
+## Conclusion
+
+I hope this small article was useful in introducing the basic concepts
+of writing image filters in JavaScript using the HTML canvas tag. I
+encourage you to go and implement some more image filters, it's quite
+fun!
+
+If you need better performance from your filters, you can usually
+port them to use WebGL fragment shaders to do the image processing.
+With shaders, you can run most simple filters in realtime, which allows
+you to use them for post-processing video and animations.
diff --git a/src/site/content/en/blog/canvas-inspection/index.md b/src/site/content/en/blog/canvas-inspection/index.md
new file mode 100644
index 00000000000..d004044d552
--- /dev/null
+++ b/src/site/content/en/blog/canvas-inspection/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Canvas inspection using Chrome DevTools
+date: 2013-09-16
+authors:
+  - paullewis
+tags:
+  - blog
+---
+
+## Introduction
+
+It doesn’t matter if you’re using a 2D or WebGL context, anyone who has ever worked with the `<canvas>` element knows that it can be extremely difficult to debug. Working with a canvas usually involves a long and difficult-to-follow list of calls:
+
+```js
+function draw() {
+
+  context.clearRect(0, 0, 258, 258);
+  context.fillStyle = "#EEEEEE";
+  context.beginPath();
+  context.arc(129, 129, 127, 0, 6.28, true);
+  context.closePath();
+  context.fill();
+
+  // … and on and on
+}
+```
+
+Sometimes you want to capture the instructions sent to a canvas context and step through them one by one. Fortunately there is a new Canvas Inspection feature in Chrome’s DevTools that lets us do just that!
+
+In this article I will be showing you how to use this feature to start debugging your canvas work. The inspector supports both 2D and WebGL contexts, so no matter which one you're using, you should be able to get useful debugging information straight away.
+
+## Getting Started
+
+To get started, go to `about:flags` in Chrome and toggle on **“Enable Developer Tools experiments”**
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Z0FUMLVzTh4wRU68tTdb.png", alt="Enabling Developer Tools Experiments in about:flags.", width="800", height="72" %}
+  <figcaption>Figure 1 - Enabling Developer Tools Experiments in about:flags</figcaption>
+</figure>
+
+Next, head over to DevTools and hit the cog {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RwBtZbOHKdOeubytuJVl.png", alt="Cog icon", width="20", height="19" %} in the lower right corner. From there you can go to **Experiments** and enable **Canvas inspection**:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Tg8sR7fQ2mRCrSSc8WuV.png", alt="Enabling Canvas inspection in DevTools’ experiments", width="618", height="264" %}
+  <figcaption>Figure 2 - Enabling Canvas inspection in DevTools’ experiments</figcaption>
+</figure>
+
+For the changes to take effect, you need to __close and reopen DevTools__ (you can use `Alt+R` or `Option+R`, a handy alternative).
+
+When DevTools reopens, go to the Profiles section and you'll see a new Canvas Profiler option.
+
+To begin with you will notice that the Canvas Profiler is disabled. Once you have a page that contains a canvas you want to debug simply press **Enable** and the page will reload ready to capture the `<canvas>` calls:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Uh7W5j55HPS32VWYup3F.png", alt="Switching on the Canvas Profiler", width="434", height="95" %}
+  <figcaption>Figure 3 - Switching on the Canvas Profiler</figcaption>
+</figure>
+
+You’ll need to decide whether you would like to capture a single frame, or consecutive frames, where a frame is exactly the same as you would see in the DevTools Timeline.
+
+{% Aside 'key-term' %}
+A frame represents a single pass through the your page's event loop. This involves running JavaScript, handling events, updating the DOM, style changes, performing layout and painting & compositing the page. For smooth animation, you want each frame to take less than 1/60th of a second, or 16.6 ms.
+{% endAside %}
+
+**Single frame** captures the calls until the end of the current frame then stops. **Consecutive frames**, on the other hand, captures all frames of all `<canvas>` elements until you tell it to stop. Which mode you choose depends on how you're using the `<canvas>` element. For an ongoing animation, you might want to capture a single frame. For a brief animation that occurs in response to a user event, you may need to capture consecutive frames.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qihFJ7P7tDl2iRrAkwxm.png", alt="Choosing how many frames to capture", width="800", height="216" %}
+  <figcaption>Figure 4 - Choosing how many frames to capture</figcaption>
+</figure>
+
+With that we’re all set up and ready to start capturing!
+
+## Capturing frames
+
+To capture you simply press **Start** and then interact with your application as you normally would. After some time head back over to DevTools and, if you’re capturing consecutively, press **Stop**.
+
+Now you have a shiny new profile in the list on the left, complete with the number of captured context calls across all `<canvas>` elements. Click on the profile and you’ll see a screen that looks something like this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ltHy97bB0vhQPVv9gFYR.png", alt="A canvas profile in DevTools.", width="800", height="529" %}
+  <figcaption>Figure 5 - A canvas profile in DevTools</figcaption>
+</figure>
+
+In the lower pane you’ll see a list of all the captured frames you can step through and, as you click on each, the screenshot at the top will show you the `<canvas>` element’s state at the end of that frame. If you have multiple `<canvas>` elements you can choose which one is shown using the menu just below the screenshot.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LlTEUUpnLQmB5fu4sTbB.png", alt="Choosing your canvas context.", width="254", height="77" %}
+  <figcaption>Figure 6 - Choosing your canvas context</figcaption>
+</figure>
+
+Inside the frame you will see draw call groups. Each draw call group contains a single draw call, which will be the last call in the group. So what’s a draw call? For a 2D context that would be things like `clearRect()`, `drawImage()`, `fill()`, `stroke()`, `putImageData()` or any text rendering functions, and for WebGL it would be `clear()`, `drawArrays()` or `drawElements()`. It’s essentially __anything__ that would change the current drawing buffer’s contents. (If you’re not into graphics you can think of a buffer as a bitmap with pixels that we're manipulating.)
+
+Now all you do is step through the list. You can do that at the frame, draw call group or call level. Whichever way you choose to step through the list (and there are buttons just below the screenshot that help you navigate quickly) you’ll see the context at that point, meaning you can quickly find and fix bugs as they crop up.
+
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/g0HxUetrcruphUlD1JGP.png", alt="Navigation buttons for convenient list hopping.", width="800", height="135" %}
+  <figcaption>Figure 7 - navigation buttons for convenient list hopping</figcaption>
+</figure>
+
+## Spot the difference
+Another useful feature is the ability to see which properties and variables have changed between two calls.
+
+To see that you simply click on the sidebar button ({% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EXwoN9oit2uww4ASy1yR.png", alt="Sidebar icon.", width="20", height="19" %}) and a new view will pop out. As you step through the draw calls you will see the properties that have been updated. Any buffers or arrays will display their contents if you hover over them.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Yq8pY9qSV56EG6bPmd0d.gif", alt="Spot the difference", width="602", height="422" %}
+</figure>
+
+## Be heard!
+
+So now you know how to debug your canvas work in Chrome’s DevTools. If you have feedback on the Canvas Profiler tool, please do [file a bug](http://crbug.com/new) or post to the [Chrome DevTools Group](https://groups.google.com/forum/#!forum/google-chrome-developer-tools). Let us know if you find any bugs or if there’s anything else you would like to see when inspecting a `<canvas>`, because it’s really only through developer use and feedback that Chrome’s tools get better.
diff --git a/src/site/content/en/blog/canvas-integrating/index.md b/src/site/content/en/blog/canvas-integrating/index.md
new file mode 100644
index 00000000000..55f1cecabae
--- /dev/null
+++ b/src/site/content/en/blog/canvas-integrating/index.md
@@ -0,0 +1,208 @@
+---
+layout: post
+title: Integrating Canvas into your Web App
+date: 2011-08-05
+updated: 2013-10-29
+authors:
+  - davidtong
+tags:
+  - blog
+---
+
+## Introduction
+
+In this article, I am going to discuss how to use the HTML5  [canvas](https://developer.mozilla.org/docs/HTML/Canvas) element to create, edit, open and export images. I will also introduce several open-source tools that are relevant to this technology, and provide some tips on how these techniques can be applied to an existing web application. 
+
+## Check for canvas support
+
+The first thing to do is check that your browser fully supports HTML5 canvas. An easy way to do that is to use [Modernizr](http://www.modernizr.com) to check for a certain feature:
+
+```js
+if (Modernizr.canvas) {
+  // Browser supports native HTML5 canvas.
+} else {
+  // Fallback to another solution, such as Flash, static image, download link, and so on.
+}
+```
+
+## Creating a canvas element and importing an image as binary or data URI
+
+First, you will need to have a canvas element in your page. 
+Using JavaScript, you do the following: 
+
+```js
+var ctx = document.getElementById('new_canvas').getContext('2d');
+var img = new Image();
+img.src = "html5.gif"
+img.onload = function () {
+   ctx.drawImage(img,0,0);
+}
+```
+
+In this code, the first step is to get the 2D context, which gives us access to the [API](http://dev.w3.org/html5/2dcontext/) that defines all the drawing methods and properties. Next, we create an image object and set the src property to the location of the binary image. When the image is loaded, we then use the drawImage() method to import the image into the canvas element. 
+You can also use a data URI instead of the URL of an image. So instead of the URL above, you can do the following: 
+
+```js
+img.src="data:image/gif;base64,R0lGODlhyAD3APcAAAAAAAoKChISEhsbGyAcHSMjIyomJysrKzMvMDMzMzk2Nzw8PEJCQklFRkpHSExMTFJSUltbW2NjY2hmZmpnaGtra3BtbXNzc3x8fOJHIOJLJeNOKOVRJuhWJ+lZJ+NQK+xdKONVMuRYNeRdOu5iJe5iKPBlKfBoLeVgP/BrMvFyPIF+f+VkQ+dpQ+RnSOVqS+hsTfF2QfJ5RvF9S+RuUehuUORwUuhyVOR0WOl2WeV5Xul5XOV9Yup9YvKAT/KDU/KGWPKJXOWAZ+qBZuWFbOuEa+yIb/OMYPSQZPSUauaJcuyLc+aOeO2PeOaRfO2Se/WZcvWeePWhfISEhIuLi5KSkpqamqOjo6urq7Kysrm3uLu7u+aWgu6WgeaYhO6ahOecie+difCeieegjvWlgvaoh/Chjfari+emlueqm+qrmfCkkfGolfGsm/exk/e1mfi1mfi5nuevoeiuoOizpei1qei4rfKzo/a7ovi9o/O3qPO5q+i9svS+sfnDrOjAtujEuunIv/XBtPnGsPnKtfXFufbJvfrOu8PDw8jGx8vLy9TU1Nvb2+nLw+nPyPbMwunSzPfQxvrTwvfRyPjUy/rZzOnV0OrZ1erd2vnb0vne2Org3vzh1vri2+Pj4+rk4+ro5+vr6/vl4Pvq5Pvt6fzx7evv8O7x8vPz8/318v349gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUAAKsALAQABgDAAO4AAAj+AFcJHEiwoMGDCBMqsnKlocNFBhM5nAhxlScsEzNqzKhI4CmMGhkhRKVFo5WOAiVqrJiwpcuXMGPKlFkhgM2bAaoUVGUB502dq7QI8Em0qM0LqFYxGko0QlKDWJj6vCBQlYSiVmZq3cq1q0sJAMKKBQB0oKoKY8UCxRIgrdu3YS0IXCTgbYArBj0tgFthINi0Ob0KHkz469uyVdG6BZqlLtzHYfuuWtT2bQKRZlc8lrwqwuHCoEMP/psW8SpUiksLbAwZstzJjt9eUDVQ0YDNAz0vFs27d0zSY02vSh1cINvWj2dPrvx2ACKBqHTz9es2sO/r2AkCV2uQOPdVUZH+w6UKG/KDUKuuMH8rWZX04tnj+94e1jTqz6uyrBcv1gJtypAFYAUjCbTGGX3WyacgaPQBAAEVEEa4126rKBIBBA9AoOEBzWmYIYZZKbWfWwi8N51ACAq34IpbNSjWiKpBh4oqqNRIxVsS0DZjjQPRxZ+BueHH4pAt/iikQVXgmBCARp5oVXUqEillQi7yF+UqSbolwZIwNgkAZybWN+WYL1Up3pVZprUlQkx6mdaBR5Ipp3ZufndQmmOteRAjIw7A4VsCTPhmkIBdOeeUZiKHppJsjriAeuxNwR51FB5qaaKtLaplQny6xQAq9F12o1tgQrkKbbSZZSmRDS4gwav+Fbz6Z4x3MnpQm2ItUOGsANy1yqiDntogAxhcYOwFxSKLwRarrtigcN6JiRCeYulpUKdpLUCbFcw59eukAoWJ3BTNLvhsQfdViqStBuEalq6rhKLbARUBOxacTZJbrnznFhQtWQlRG5a1BWE7lrYpEZBTqvaKVWq++/IbZ7q0rrspm7HlShAVEaAnUMOREWqkvhFj169Z/2qqJpeepnqaxx+D25mXJJc8X5xnxUmQwAAQTJDBGicE8pdVYepWzTbzdnJiOg/Es889OuqyQUPj+2MASCcdWhYYdO01BigRxPXXXSeiENldZ5FQKFOgHSJCiaCNgRYDYeH1CnLL/Zz+1nz37fffgAcu+OCEF2744YgnrvjijDfu+OOQR87V1JJXblAqheyh+eac76GHHp2HLvropJdOeh+mi25H6qyX/gjlfY8CwwYbfGD7B7XXjjvtvOuu++63A3977sPb/jvuxv9OvPG7065B8cgXzzv0x/e+fPTCM097EakITsoOGoQv/vjkl2/++einr/767LfvvgYZNAE736n08P79+Oef/gb665/BF4NTRRP6R0D98a+A5ztgAdlAuC9kwHwKRCD7IijBCr5vA3cgnBn6R0HxdVADCvygBUc4wfB9QBCEo8MHRbg/CK6PhSwkIQJD8AjC9eEDLRxfB1eIvxjKsIT+5BPhCDJBuEeIAIhBLCAPf1jBD46gE4TLxAg4WD4f6pAD7uMAFrW4RfFpUQNfxCIYx9jFLpJxi2IkIxjTaD4WdG9wnZhiDnUYvhhS0Ip0DB8HQECCEvixBCD4oyAHSUg/9vGPh0RkCRJJyA5UMXw1eKP3WOBCJCYwj/fjgAk2yclOnuCPnQylKEdZglCW4ASd9KMjz9eD+fUtFTVAoBWXyD8RcqCUo9zkJ3GZy1720o+mXKX5luBK+tmvkiBMIjLx6MH03dKX0IymNDdZAjaS7wvF1JoqlvDAHjZThmLkAAmmSc5ycrKa6GNg4b7wzXYms4nve6Y55xlNdNaxmRn+LBwb9GdNTL7znnP0Ii/pSVBRluCR4UNh4e6AUPWFkIC1VCYYB1rQipoABOjbQA0LJwiIZlSimaSoRQmK0fOJgBKGMwQOX9i+h/5Toh/cokhHOs+StlEThqPEETPqvJdS8ZLkkydNC+oBTGbgBaIwnCZQANQLNvV+GRDnUCsqzPLdgBSG68QLusnEPD5UjBHkXwfGOVWCVnV8GWil4UiRA/fh8Y4EFOc4yUrWTdLVrtTMqwnuas4SnFV8GSjC4VIBvpfisZsZeKBi4Qe/xDq2sZB97GIdG1USWPaymM2sZjG7yM1eFpi5tKf5noC4InDVfSHwAhpWy9rWuhYNbGD+w2tn+9o04AEPecitbnfL29769rdSSMFMRVu+MCBugE9t5ggaYYrmOjcUzo2udKEr3eqagrrNXRAhhGtQ4pIvn4YLQ/5CwIdQmPe8oDBvetV73va2d73uha8pshmaPJhguBndA+La8FQKfoAO7g3wewU8YPi2d74KcsNML4q+D2zUcHtYaXJNiIbrEvjCGGave+kLmjLUNZQgEGEIiHi4R0i4oeUDA3ovbOAVh6LFAQYFguOjCil8uJM2LZ8IoHg4SpzYfU4g8HoNPGQXpxfG1zXFU7CjilQg4caczDH5WJDUw3Vip+5EHxE8cV4uvzjGYMZwer3MYcKUIghQ9mP+Uc93VcSNgpIBFR8PNpHhMNd5w/IZhQ+Gu+YO9qAUbo4lM8WXA0ZcF8YwHrCQA6ygUcQgtP0UnxEkWThS9OC0IoygCyyh6EWb18ufNrJ7FcQJ7prSu8nMwBPKrLVUFAHF50OBJRLdZTt7+rxKlk8lUNldNiowA2tInCqe8MBBP88Rd0YvrTOsoEN8UpSfjHT42qA4M5w2y+T7ACDcC+pQgLrbAm6xgVktGD8826AN1m/i9gnr8n2gDsmOd3zNS26vwOG+3W1wIRS3h1kGcQ7xBoXAQcHlgg/cEwM/OL1PpQpUMdzhDYc4qiLe8Ic/vAygPScg0TeCBx+uDyEAqMj+faoBMyR7E0yggcpXzvKWsxwGNgCCzGdO8x/QHAg2r3nNg/ADnvv8Bz9QwXClPL4hKs6I+WuCiwm8CR4kNnyI5arUx+fZqle9s5ldJL5JueagaoDKipNiNwdNhHl7u9afIAI/S0lRKJf1nF0v3wsonVU4w/rXPPjyss3rhGvjsQNsf/s0/Yq+G9Q7aal4QbvLhwNwh9sUY2hpUBcseK6jbwiHt5kqanDtMaIvAzS4hNkDnIbySXvyeq38L/8qvlUrThVDiLP4WAAJFzveFHT4cftuSXnVn/P0xn09cj9KvgwsN9l/CDm2Y5px30MafWpgHDtF7lLPa4C8zQ0wuAP+geX3jdX50DxoltWtODU4FIJ2sPCFuQwJOS5efIAHvy+lHEFDME4PQFSgHNS/7E0wNX/yN38NhlKLUwhexz5ocHI00HkgFT7fF4CjRHTiIwIkdnS6504R5AXJ5gk6UGzx5HYQSHQH1AI8pjiV4H7vwwTw5XifBgpqB1VS1Uu8pnqsBz81MAqM0wl21047pAE8wIJfhl59B3VZNFd7tUidBUxsB1pMeF8DJUi+tEphlQE7gFWLIwowgD8ZgAOfwG3hRgc4EIZiGIY2QIY4YANlKIY7EARHcARs2IZw2IZvOIduSIduKId1eAQ/cG6idHqYxzilsAMe6D4uAITqNWT+m7AJnpCIntCImOAJn4AJjxiJkQiJqXCJmJiJmriJnMiJlaACoVWDGbAEjZMKTid54YMCl3BknYZe6mdeprB3C4cdnzhcp9cFjsNNyORTIwAJY0ZgrxiEuLZ3mTcTh2BqpnR6ZuA4T1BJH5QBItAIsBhfsZhesSiM2Hhh8TEIfJhK0rYBeuA4G+RW4UNe7wVfMoZhwdhp8REH3XhODaZQjHMHYcU+HyAHdcaKK1ZkendgS9YbqqBgpCSBJuRxitMHPZg+H5CAYSZwGnZg2RiEMpYdNQaCBHl9ONU4j6B8xHdPGaCB62UK4BaM6NiK7VWMMaEKUGCRHFdljJMJHOn+PhnABSwWixaGjtcYkSeJHaWABEMnQi+Ag43TCcrXU9gGdTzgkA8pkdC1lOm4lOaVHaUABCKlSoVnhYwzClvFUoDFA4xQk/x4aPLFj+eVHZ0wA6F4eXSXOKRwA/ljA5gwei/WXCX5irSWa9fRCUJHSv10QE2wlohTP82ERyzAaZ4Wki2WkznZXtlRasMlitjkOKmgix05PihQe9goX+p1k5y5mdiIkjAhCTOYjOeTAerUOKrQBVw5Ph8gjQinlK/5mgk3m7QpcKCWKrhZFbrpcMY4mtTkR6cHXo3DBp3nQx/AA1zABUygnMrpBE7ABc4ZndI5ndQpnWVwndiZndr+iZ14AJgHEQekBJzn8wF9ADn8tZqlSYQIdEuctVfntFdzRQJIkApl5gaj9EkXKQL29zgR1oDkqD6nNz7sOU2WBQWsZmO5dJEjMAmQUwgx6U9dZT5CJU0kQAasBgVbB2IjFz4skJGOo1NH+U3Glj/xR04k4AYpeQQsaT4ZwAJC6TiasIMRmkW9Z1BxEBNTmWaEx6I1AJpa82bn51OTBXVRx1iyN6HhdwJ+EBN65nY7aj474KOIBwMMqD4jwARekJxesKVc2qVegANB6kUgmEspcAgx0Qky4KQ1qAGCBTmqUFjn05cZ4AKid4hH5pACZwppcIHoI041ek4qUAkx8Yn+aoo+pBU5rwZCEUVy74QCyKaT6GUHDwqgfwqonBATkpACaXk+wRY5wzdLDxSN6xhgpvAHWGZFJUqhMvCiLkEIv5RGFCScjiNebsU/IWAHAtZt6dUIKMg+lUpNPsBqfuCk9Dc+5Pc45+l1/ZQB/PNuJClglvB//umAYzpKQMBqb+Ck4qdMBtk4+DetAJUB+FhrodZenuACzOpBsDp5v2oCSVBmqnAGILit7iaokfMIYQpCijUGG7iA7gN41ZpKUgCvCGpQcUc+I+ChjqMKlMBMtbQBH1muQgYKPLB4BxSwqXQGKZkEfAaUJfg4UvR+dZQBSmCIm+kJSuB9GHtOeBD+E6mAZrl0sONzA6zqODrIqBDaA12Yj1wQT+1aAoOAozKwqSPXA96pOKPAeSILSXR2Z5FHo5VaSmYKE6OwlwYlikUgpVpTCsdEjiwQl17YYqVXhAFrSClgry+RCVYbTKXZBJVTPx5YfeYzAnUqsQ/pCETgApMqoVrXXeNUAioABGdQswkhCaDIl+gTfJJDmYMmApAwqrl6CX8wBjyAAnvrgEy4hCWQAj4QBXlQCYAmE9tli+lkOdN3P+Yoby/mCZBQB1yAA92nR1p3WSmgAkngBodACpmnCuaGX+N5rJDDBkt0PiEAb17YikSGCY0gB0RAAxwJTCoQBGVwCJ0gpff+Flr6Zjl6MKLPkwa2dmcWhgl/gAY80AIzIAV+kAndo7Wr4GEzdZEhQICSA3LKdEAfxK9Lp2jLxmXr5QmYoLu8UZEJij4h8LGQs5H5wwQZ9pTfO2oAybG5tKYjQLiOkwmxa3rmowQNvI935htntmAyKz41gJWRMwrdx0w/eLwmeWuhwL4FMQo/0EtVxUY7ELqSQwpZiLPn84NExsJdto6n8I+ggaZEWz7cYznfg57wE3qqi2t25hucsLapJGERpGpHuziudnfFJ2uHOG+O94va2BuZgIwap4wujHhL8J/XhwaQgHCkusJQOYugUQqcYJ/P507UZjmrcLr3swEjwAP+YMAHYHtoG3iT0KW1qjAKh3AGQaACvqlxEAq8kUOcu6g+IeACRDAHjaAJDCxjJXlhuysQpVAJcQAFM5AClpWhpxaPerwKd4Bp/gRX6jkCOcAFdmAJngC5n3zIWpEKnUAIUgAEmpp68ydtIhAJrSwIfLq06vkBKEAEYwAIjXhnQQwTqlAKkuAGSeDIltV89cRxaFs5hnCqIYo/IkADTFAHjrCzwNgSTZYJfhAFPiB0h0RQIcyhBhw5lNCrmeY/qcgDXsAHl8DO7CXEp9IJi3wEoAhKFnXPR0XCknOzlkRAH/ACS5AGjdC0UVkVo1zKMqCpSDhUJXDPGmB4rSwKipf+r5VpjyNgA1zAB7WXCpxACGQQdN48VU9afGqlx5s3YfUrSywgBEiw0N3sezkNUKTYym9apfDEPn7arhV11OMTma2cqJWsxNTnTFBdUGwHVuVzmnrcBVVqlD7FvemTqs73R+kjyZJDq+XcVD4UQ0gqeLxEr+Ujj3q8BxtqQszMg1bEe5WHS34EAh5wehvAoK28CgipRPuDR4BdVoLkAWs6PhSY2KsQCbI8oyL32DQ12IX9PiigsJZDCXtbj2Haz4w614M3SCbw2SodPjDgknqsCb2qxlmEPmhdTxoHSKw3aBmQAxBdOSj9UxKk2qfUXZ4doPfzh4k9CjfA1GX9Q6r+3Y1/1AEdoNxwXXzEZNmu9nQWZL9Qm0qBp2bXvdL5g4uWvQqVsAY9wAIQ29cTTUGc7YSDXd59vNeA9TwsUARskM9KrQl90AU1IALvzUQdxHuRbd/g2se0HAaGUL3pnRClMAltsATubaQQhEXgjVCnB3i8PdkE9EAV3QR3oL4RLhOq0AmG8AU7IEfQvbTWBOJ2lGXFxgI9sAaPMApnrMepkAl70AQvUNqarT8jUANdIAiacMUnvhWJ/AhrMAQjwD+wvOBmrT7F1gJLwAaTQJ9Lnh2+3AdPcANH9OJvbdviMwI7IAYPruRd3hukQAltYAQXXuYI9EAh8AJPoAcm3ub+ZJIKo1AIYbADBO7dqGjlIGTjOE4KbM7nQ0IKmaAHRgADl6vDLKoBRX7knbDojC4npPAIbNADI6B7ePQBLLAEdzAJNrzpf+PLe9AFYm7ofrwDYVAIOq7qiPPmce4COHRad94Ee5AJqW7rrycKhWAGgo4C/P0IACzslUMKmpDpzB7t0j7t1F7t1n7t2J7t2r7t3N7t3v7t4B7u4j7u5F7u5n7u6J7u6n7iT9HuOgIdunkaA5EUSVFx9S7v+N7u8P7u8K7v8s7v+c5w/x7wpwLv/S7wS+bvqXLvPHIa787v/q7vAE/vBs/w877vD0/wCw8dibAFHv/xIB/yIj/yJF/+8iZ/8iif8iq/8izf8i7f8mZzKvVeIzoy8zZP7ztCI//OIzYv8zpP8w7PIzQyIz8/I0Fv8z8v8xQ/9EqP8zSS9Ew/9Dz/9ERP8ULP80rv805/9ErfcFu/I0i/9Fgf9TWC8+t+9mif9mq/9mzf9m4/JWU57+Zl0KhwYQY97zt+7qdQAQsQAZixCojAAAwgHFSwAILPAAtg+IhPBbVhARKQBUmRBSzx9jCBFgGABQPBCAUAAAwAM/FSIOMhEIjwJwGwAp7wAHhB+TFxHBawZBAAAAMQNquQCHUxAILvAH9yAB0BChNyExGQIKrvEpoPAAkAM1YgLTEDMKpwCrrB+Fj+chRZYAUFQgCTH/wJASoAIAB7kx9hAQEL//oDUBGswQCgcBoQEABUkCqLkABIYf0wUQVtsQIDcQFhUQCYsQib/wCnsAq8n/2p7wkAcYBBqFUFVyFaZFDhQoYNHT6EGFHiRIoVLUpE9VDRAAAPMoZaAABAgCsFrQQAMKUgFZQRMq5aVKDKRYUvaRZUdVPnTomqFmVRlBOjIoSLECZKtCgRIkYFT2nJ8hAVAwADEibiKNLCKlQVAAjYArPASCwGFRVIeDORBSo2I4Y6VRAUlkSnsmQRylOvTkYYqiS60hbjFQVZtBS2QsVTlSmgCjJSUPLhFJFXVFEZOTZBKE8JAGz+XnVBJAAEVjIqYuCY5pYtWMpODGVBUUEtCxQtYiB5726LniAIRgXhdURPBbZ4OnDlSqhQVlSvSvTgecMtKCWcggBgAWUBiBChrJBTggCUX2cyukDw4iIMbiOiojKg6aorEqBDUM9bv0QMD/JDuAAVRUzxJJGMPNkiP1QSMO2ACBLCYpFQECFoCgxuewgUzxLYggAAMMDqQ8oAeC2UnyIQiYBFUKkiP4rgSw+VAgkyMZREXFQFkSoO8GQVVSQoaQWV9iPyIUYSoMKgUxi4IAsGrFhBgUUYuSKC4VCJoD0mV1FkC0asiMCKUB64QAL8HFLFKwEiCCCALKbSzjO0FgL+JbuUoHMRoy2Y3EILCwLzhIoHMGBguFVYs2IBghSBwJNQIEikSEkZQuSASAtS5AAsskAyiwf6yqKC2Qy6IAJQFrjAkyxCWQGLCxDJ4gCgIshToStQQonHVTAYSSQI3KMPpV+BlYgRCBjx5IEsGHlAkSkSYCo/9sB8IC4L6ZOA2En3QySBtHb1yIoEGBFyiwWqCEohKwqDIIIsCmSACkW6mkIVK6yAiJGxRLLvoPICSJKhED26SZEITrni14RDkSBAhah0tFRUQonAwAp023bSR6NSBYtmsbSC2cA+TdegLAbIYgoFZrPi2NuORWSKWmtCsbKCOhNJgFEXQoQj2xz+mvghLDC4TGYIrljkgW9XWWy+CCo41IEstnDgih4z3tbZK6zAICFGJABlzywQWaCCpbnEwK6AcZMgEWOpEFOiKkSyqqCuRBooRyzywgKlB6qYzqAq8HUIg5KcnaIKVLCo125ELghQlS0eqNgKBlhbwDSsMw6FEUZeQsWxUzzJCFmGUMkIdYM86VEVTz6faGCbbv3Q3gGMs9tODFJ272QMHrIgLVAYyYk5hYYnfZXOGWGuR1SI3zx66YGmasjHBnDzUAEA0JQ9lAZQ5JSGP1cllCsGECCqhVAZXbDp34efNwwCQKQmCHRFRbSRyvvwtAQKaBgD2tQehmwBSFeLXwL+FXiRPeWJCtkqSCgqwD8BVCA/5hqNABx2uuMs0IMffMsW8lIQo9REC2XCwBbc44krTIEKiNAWCGU4Q57EkIY3xGEOdbhDHvbQhz8EYhCFOEQiFtGIRxyiKj4xMyQ2MX6JoEADyHQ2J1YxeopYAAEQgAACQAATVqwhThSSk7xkJC9kNIgZDZITm6jRR2O0GxzL+EYxzvGMXEmjKlCBAQMgYAUUQIABrEDGO9pxjXTE4x3bSMcRCsUtaIxjIdOISDZOcoSoSARrNLlJTnbSk58EZShFOcpRasEBCrCCJxZBBQdpgZSvhGUsZfnKRJARFXpE3S1zeUtc7rKXquhlLnFkCUzUEVOXxfQlMoUZTGXycpfKNCYxTSEBAkjgE4xoAAGmcMxgGjOZxWQmN4c5TGF+s5vh/CU6wbnOY4LxJlcgQAQmYAEHHCAs7sSnxjDARQIoQHH5BGiRUKGFKlQBESMMKEQCAgA7"
+```
+
+
+
+You may ask, "Why would we use data URI instead of the binary image?" There are many [advantages](http://en.wikipedia.org/wiki/Data_URI_scheme#Advantages). And later in this article, you will see how easily we can export a canvas image as data URI. 
+Here is [a tool to convert a binary image file to a data URI](http://boazsender.github.com/datauri/).
+
+## Manipulating the canvas image
+
+If you have ever done any sort of [Logo programming](http://en.wikipedia.org/wiki/Logo_(programming_language)), drawing on a canvas uses the same concept. 
+Mark Pilgrim has a [chapter on canvas](http://diveintohtml5.info/canvas.html) in his book, Dive Into HTML5. Based on an example in the chapter, we can add a grid diagram to the image that we imported above by using the following:. 
+
+```js
+var img2 = new Image();
+img2.onload = function () {
+  var context2 = document.getElementById('new_canvas2').getContext('2d');
+  /* vertical lines then horizontal ones */
+  for (var x = 0.5; x < 800; x += 10) { context2.moveTo(x, 0); context2.lineTo(x, 500); } 
+  for (var y = 0.5; y < 500; y += 10) { context2.moveTo(0, y); context2.lineTo(800, y); }
+  context2.strokeStyle = "#bbb";
+  context2.stroke();
+  context2.drawImage(img2,0,0);
+}
+img2.src = "html5.gif";
+```
+
+You can be more creative than this, but I leave it to the other tutorials listed in the appendix of this article for additional instructions on that subject. 
+We haven't seen anything very exciting yet, but the next section will change that.
+
+## Exporting the canvas image as data URI
+
+The canvas element has a `toDataURL()` method, which takes a MIME type as the parameter. With this, we can export the canvas we used above. 
+
+```js
+window.open(document.getElementById('ctx').toDataURL("image/png"));
+```
+
+This exports the canvas as a PNG image into a new browser window. The image, however, is not an ordinary binary image, but is instead a base64-encoded data URI that can be rendered by a browser. Thus, from the user's standpoint, there is no difference between that and the binary equivalent. 
+Note that the line of code above needs to be run on a web server. Running `toDataURL()` on a local file would fail. See [this ticket](http://code.google.com/p/chromium/issues/detail?id=21847) for the status of this issue in Chrome. 
+
+## Integrating into your web app
+Canvas can be a very powerful add-on to any web applications that store user-uploaded images. 
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Xm0Z35ZmkZRdxNswrrAP.png", alt="Box canvas", width="460", height="155" %}
+</figure>
+
+For example, we have an online file storage application that stores user-uploaded images. We can add an edit button to open the image file in a canvas-based picture editor. 
+If you don't want to write your own canvas editor, [Harmony](http://mrdoob.com/projects/harmony/) is one of the few canvas editors openly [available](https://github.com/mrdoob/harmony). It features easy addition of brushes, which can satisfy your artistic tastes. 
+When you choose "edit image" in the menu illustrated above, a canvas editor should open, and it would make a call to a custom `read_file()` function in the editor's init() function as follows: 
+
+```js
+function read_file() {
+   var url = file_id;
+   // hide a copy of the original image if it is needed to load
+   document.getElementById('editableImage').src = url; 
+   image = new Image();
+   image.src = url;
+   image.onload = function() {
+      context.drawImage(image,0,0); // context, defined above, as canvas.getContext('2d')
+   }
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hWOLKp6PgSNkOXkxt0XT.png", alt="Harmony", width="448", height="323" %}
+</figure>
+
+## Adding HTML5 LocalStorage
+
+A little touchup that you should always consider--if you care about user experience--is applying LocalStorage. For example, if you have a big text area that requires the user to input a lot of information. When the user is about to submit the form, he accidentally closes the browser (or the browser crashes). The user might be frustrated and not bother rewriting the message again.
+In the demo below, instead of saving the data onto the server, simply save the image onto LocalStorage as data URI:
+
+```js
+// Save Image
+function saveToLocalStorage() {
+    localStorage.setItem('canvas', canvas.toDataURL('image/png'));
+}
+
+// Load Image
+function init() {
+        // for demo purpose, all variables are declared in the parent scope
+        canvas = document.createElement('canvas');
+        context = canvas.getContext('2d');
+
+        // Use Modernizr to detect whether localstorage is supported by the browser
+        if (Modernizr.localstorage && localStorage.getItem('canvas'))
+        {
+            localStorageImage = new Image();
+            localStorageImage.addEventListener("load", function (event) {
+                //...
+                context.drawImage(localStorageImage, 0, 0);
+            }, false);
+            localStorageImage.src = localStorage.getItem('canvas');
+        }
+//...
+}
+```
+
+
+## Saving canvas as a binary file onto the server
+You may want to save the canvas image as a binary file. There are many ways to do that. For example, you can perform a POST action to pass the data URI to your backend code. Using jQuery, it would look like this: 
+
+```js
+var url = '/api/write/' + file_id + '?data_url_to_binary=1';
+var data_url = flattenCanvas.toDataURL('image/png');
+var params = { contents: data_url };
+
+$j.post(url, params, function(json){
+   if (json.status == 'upload_ok')
+   {
+      //ok
+   }
+}, 'json');
+```
+
+This creates a XHR call with the content being the data URI. 
+You then need to decode the base64 data URI on the server. In [PHP](http://ch2.php.net/base64_decode), for example, you can do the following: 
+
+```js
+if ($_GET['data_url_to_binary'])
+{
+   $contents_split = explode(',', $contents);
+   $encoded = $contents_split[count($contents_split)-1];
+   $decoded = "";
+   for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
+      $decoded = $decoded . base64_decode(substr($encoded,$i*256,256)); 
+   }
+   $contents = $decoded; // output
+}
+```
+
+In the first two lines, the data URI ($contents) is split into two parts. `'data:image/png;base64'`, and `'VBORw0KGgoAAAANSUhEUgAAAWwAAAB+CAIAAACPlLzKAAAACXBIWXMAAC4jAAAuIwF4pT92...'` We will then use `base64_decode()` to decode the data URI string. The trick here is that there are issues decoding string greater than 5K, and this "divide-and-conquer" approach will be able to decode the string. 
+Finally, using [fwrite()](http://php.net/manual/en/function.fwrite.php), you can save the binary file, $contents, onto your server. 
+
+## Enabling "save image" in browser
+
+Canvas is a HTML element. It looks pretty much like an image, but your browser does not provide a "Save Image As" option for it because it is not really an image element. 
+To enable "Save Image As," you may dynamically create an Img element, and set the src to the data URI of the canvas element. 
+You can also use the [canvas2image utility](http://www.nihilogic.dk/labs/canvas2image/).
+
+## A more advanced canvas editor
+
+If you are looking for a more advanced canvas editor, [PaintWeb](http://code.google.com/p/paintweb/) is probably worth a try. It was written by Mihai Sucan, a Romanian student, during the Google Summer of Code 2009. He also authored a few [tutorials](http://dev.opera.com/articles/view/html5-canvas-painting/) on writing your own online paint application. 
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d8JqwEwFx7QMi8Bg1lZe.png", alt="Paint Web", width="771", height="706" %}
+</figure>
+
+For a more professional library, be sure to check out [Pixati](http://www.pixastic.com/lib/).
+
+## More fun with canvas? 
+Paul Irish combined Harmony and $1 Unistroke [Recognizer](http://depts.washington.edu/aimgroup/proj/dollar) to create a little [Easter Egg](http://paulirish.com/2010/my-harmonious-background-canvas/) on his website. 
+
+You can also learn how to [inspect canvas](http://www.html5rocks.com/en/tutorials/canvas/inspection/) with the Chrome DevTools using our recent inspection features.
+
+## Go deeper with additional tutorials on canvas
+
+- [MDN: Canvas Tutorial](https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial?redirectlocale=en-US&redirectslug=Canvas_tutorial)
+- [Dive into HTML5: Canvas](http://diveintohtml5.info/canvas.html)
+- [HTML5 canvas - the basics](http://dev.opera.com/articles/view/html-5-canvas-the-basics/) on Dev.Opera covers the basic drawing primitives
+- [Building a Breakout clone in canvas](http://billmill.org/static/canvastutorial/ball.html) includes basic motion, physics and interactivity
\ No newline at end of file
diff --git a/src/site/content/en/blog/canvas-notearsgame/index.md b/src/site/content/en/blog/canvas-notearsgame/index.md
new file mode 100644
index 00000000000..39241125649
--- /dev/null
+++ b/src/site/content/en/blog/canvas-notearsgame/index.md
@@ -0,0 +1,536 @@
+---
+layout: post
+title: No tears guide to HTML5 games
+date: 2011-02-01
+authors:
+  - danielmoore
+tags:
+  - blog
+---
+
+## Introduction
+
+So you want to make a game using Canvas and HTML5? Follow along with this
+tutorial and you'll be on your way in no time.
+
+The tutorial assumes at least an intermediate level of knowledge of JavaScript.
+
+You can first [play the game](http://strd6.com/space_demo/) or jump directly to the article and [view the source code for the game](http://strd6.com/wp-content/uploads/2010/12/space_demo.zip).
+
+## Creating the canvas
+
+In order to draw things, we'll need to create a canvas.  Because this is a
+No Tears guide we'll be using jQuery.
+
+```js
+var CANVAS_WIDTH = 480;
+var CANVAS_HEIGHT = 320;
+
+var canvasElement = $("&lt;canvas width='" + CANVAS_WIDTH + 
+                      "' height='" + CANVAS_HEIGHT + "'&gt;&lt;/canvas&gt;");
+var canvas = canvasElement.get(0).getContext("2d");
+canvasElement.appendTo('body');
+```
+
+## Game loop
+
+In order to simulate the appearance of smooth and continuous gameplay, we
+want to update the game and redraw the screen just faster than the human mind
+and eye can perceive.
+
+```js
+var FPS = 30;
+setInterval(function() {
+  update();
+  draw();
+}, 1000/FPS);
+```
+
+For now we can leave the update and draw methods blank. The important thing
+to know is that `setInterval()` takes care of calling them periodically.
+
+```js
+function update() { ... }
+function draw() { ... }
+```
+
+## Hello world
+
+Now that we have a game loop going, let's update our draw method to actually
+draw some text on the screen.
+
+```js
+function draw() {
+  canvas.fillStyle = "#000"; // Set color to black
+  canvas.fillText("Sup Bro!", 50, 50);
+}
+```
+
+{% Aside 'gotchas' %}
+Be sure to run your app after making changes. If something breaks
+it's a lot easier to track down when there's only a few lines of changes to look at.
+{% endAside %}
+
+That's pretty cool for stationary text, but because we have a game loop
+already set up, we should be able to make it move quite easily.
+
+```js
+var textX = 50;
+var textY = 50;
+
+function update() {
+  textX += 1;
+  textY += 1;
+}
+
+function draw() {
+  canvas.fillStyle = "#000";
+  canvas.fillText("Sup Bro!", textX, textY);
+}
+```
+
+Now give that a whirl. If you're following along, it should be moving, but
+also leaving the previous times it was drawn on the screen. Take a moment to
+guess why that may be the case. This is because we are not clearing the screen.
+So let's add some screen clearing code to the draw method.
+
+```js
+function draw() {
+  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+  canvas.fillStyle = "#000";
+  canvas.fillText("Sup Bro!", textX, textY);
+}
+```
+
+Now that you've got some text moving around on the screen, you're halfway to
+having a real game. Just tighten up the controls, improve the gameplay, touch
+up the graphics. Ok maybe 1/7th of the way to having a real game, but the
+good news is that there's much more to the tutorial.
+
+## Creating the player
+
+Create an object to hold the player data and be responsible for things like
+drawing. Here we create a player object using a simple object literal to hold
+all the info.
+
+```js
+var player = {
+  color: "#00A",
+  x: 220,
+  y: 270,
+  width: 32,
+  height: 32,
+  draw: function() {
+    canvas.fillStyle = this.color;
+    canvas.fillRect(this.x, this.y, this.width, this.height);
+  }
+};
+```
+
+We're using a simple colored rectangle to represent the player for now.
+When we draw the game, we'll clear the canvas and draw the player.
+
+```js
+function draw() {
+  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+  player.draw();
+}
+```
+
+## Keyboard controls
+
+### Using jQuery Hotkeys
+
+The [jQuery Hotkeys plugin](https://github.com/tzuryby/jquery.hotkeys) makes key handling across browsers much much easier.
+Rather than crying over indecipherable cross-browser `keyCode` and
+`charCode` issues, we can bind events like so:
+
+```js
+$(document).bind("keydown", "left", function() { ... });
+```
+
+Not having to worry about the details of which keys have which codes is a
+big win. We just want to be able to say things like "when the player presse
+the up button, do something." jQuery Hotkeys allows that nicely.
+
+### Player movement
+
+The way JavaScript handles keyboard events is completely event driven. That
+means that there is no built in query for checking whether a key is down, so
+we'll have to use our own.
+
+You may be asking, "Why not just use an event-driven way of handling keys?"
+Well, it's because the keyboard repeat rate varies across systems and is not
+bound to the timing of the game loop, so gameplay could vary greatly from system
+to system. To create a consistent experience, it is important to have the keyboard
+event detection tightly integrated with the game loop.
+
+The good news is that I've included a 16-line JS wrapper that will make event
+querying available. It's called key_status.js and you can query the status of a
+key at any time by checking `keydown.left`, etc.
+
+Now that we have the ability to query whether keys are down, we can use this
+simple update method to move the player around.
+
+```js
+function update() {
+  if (keydown.left) {
+    player.x -= 2;
+  }
+
+  if (keydown.right) {
+    player.x += 2;
+  }
+}
+```
+
+Go ahead and give it a whirl.
+
+You might notice that the player is able to be moved off of the screen.
+Let's clamp the player's position to keep them within the bounds. Additionally,
+the player seems kind of slow, so let's bump up the speed, too.
+
+```js
+function update() {
+  if (keydown.left) {
+    player.x -= 5;
+  }
+
+  if (keydown.right) {
+    player.x += 5;
+  }
+
+  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
+}
+```
+
+Adding more inputs will be just as easy, so let's add some sort of projectiles.
+
+```js
+function update() {
+  if (keydown.space) {
+    player.shoot();
+  }
+
+  if (keydown.left) {
+    player.x -= 5;
+  }
+
+  if (keydown.right) {
+    player.x += 5;
+  }
+
+  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
+}
+
+player.shoot = function() {
+  console.log("Pew pew");
+  // :) Well at least adding the key binding was easy...
+};
+```
+
+## Adding more game objects
+
+### Projectiles
+
+Let's now add the projectiles for real. First, we need a collection to store them all in:
+
+```js
+var playerBullets = [];
+```
+
+Next, we need a constructor to create bullet instances.
+
+```js
+function Bullet(I) {
+  I.active = true;
+
+  I.xVelocity = 0;
+  I.yVelocity = -I.speed;
+  I.width = 3;
+  I.height = 3;
+  I.color = "#000";
+
+  I.inBounds = function() {
+    return I.x >= 0 &amp;&amp; I.x &lt;= CANVAS_WIDTH &amp;&amp;
+      I.y &gt;= 0 &amp;&amp; I.y &lt;= CANVAS_HEIGHT;
+  };
+
+  I.draw = function() {
+    canvas.fillStyle = this.color;
+    canvas.fillRect(this.x, this.y, this.width, this.height);
+  };
+
+  I.update = function() {
+    I.x += I.xVelocity;
+    I.y += I.yVelocity;
+
+    I.active = I.active &amp;&amp; I.inBounds();
+  };
+
+  return I;
+}
+```
+
+When the player shoots, we should create a bullet instance and add
+it to the collection of bullets.
+
+```js
+player.shoot = function() {
+  var bulletPosition = this.midpoint();
+
+  playerBullets.push(Bullet({
+    speed: 5,
+    x: bulletPosition.x,
+    y: bulletPosition.y
+  }));
+};
+
+player.midpoint = function() {
+  return {
+    x: this.x + this.width/2,
+    y: this.y + this.height/2
+  };
+};
+```
+
+We now need to add the updating of the bullets to the update step function.
+To prevent the collection of bullets from filling up indefinitely, we filter
+the list of bullets to only include the active bullets. This also allows us to
+remove bullets that have collided with an enemy.
+
+```js
+function update() {
+  ...
+  playerBullets.forEach(function(bullet) {
+    bullet.update();
+  });
+
+  playerBullets = playerBullets.filter(function(bullet) {
+    return bullet.active;
+  });
+}
+```
+
+The final step is to draw the bullets:
+
+```js
+function draw() {
+  ...
+  playerBullets.forEach(function(bullet) {
+    bullet.draw();
+  });
+}
+```
+
+### Enemies
+
+Now it's time to add enemies in much the same way as we added the bullets.
+
+```js
+  enemies = [];
+
+function Enemy(I) {
+  I = I || {};
+
+  I.active = true;
+  I.age = Math.floor(Math.random() * 128);
+
+  I.color = "#A2B";
+
+  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
+  I.y = 0;
+  I.xVelocity = 0
+  I.yVelocity = 2;
+
+  I.width = 32;
+  I.height = 32;
+
+  I.inBounds = function() {
+    return I.x &gt;= 0 &amp;&amp; I.x &lt;= CANVAS_WIDTH &amp;&amp;
+      I.y &gt;= 0 &amp;&amp; I.y &lt;= CANVAS_HEIGHT;
+  };
+
+  I.draw = function() {
+    canvas.fillStyle = this.color;
+    canvas.fillRect(this.x, this.y, this.width, this.height);
+  };
+
+  I.update = function() {
+    I.x += I.xVelocity;
+    I.y += I.yVelocity;
+
+    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
+
+    I.age++;
+
+    I.active = I.active &amp;&amp; I.inBounds();
+  };
+
+  return I;
+};
+
+function update() {
+  ...
+
+  enemies.forEach(function(enemy) {
+    enemy.update();
+  });
+
+  enemies = enemies.filter(function(enemy) {
+    return enemy.active;
+  });
+
+  if(Math.random() &lt; 0.1) {
+    enemies.push(Enemy());
+  }
+};
+
+function draw() {
+  ...
+
+  enemies.forEach(function(enemy) {
+    enemy.draw();
+  });
+}
+```
+
+## Loading and drawing images
+
+It's cool watching all those boxes flying around, but having images for them
+would be even cooler. Loading and drawing images on canvas is usually a tearful
+experience. To prevent that pain and misery, we can use a simple utility class.
+
+```js
+player.sprite = Sprite("player");
+
+player.draw = function() {
+  this.sprite.draw(canvas, this.x, this.y);
+};
+
+function Enemy(I) {
+  ...
+
+  I.sprite = Sprite("enemy");
+
+  I.draw = function() {
+    this.sprite.draw(canvas, this.x, this.y);
+  };
+
+  ...
+}
+```
+
+## Collision detection
+
+We've got all these dealies flying around on the screen, but they're not
+interacting with each other. In order to let everything know when to blow up,
+we'll need to add some sort of collision detection.
+
+Let's use a simple rectangular collision detection algorithm:
+
+```js
+function collides(a, b) {
+  return a.x &lt; b.x + b.width &amp;&amp;
+         a.x + a.width &gt; b.x &amp;&amp;
+         a.y &lt; b.y + b.height &amp;&amp;
+         a.y + a.height &gt; b.y;
+}
+```
+
+There are a couple collisions we want to check:
+
+1. Player Bullets => Enemy Ships
+1. Player => Enemy Ships
+
+
+Let's make a method to handle the collisions which we can call from the update method.
+
+```js
+function handleCollisions() {
+  playerBullets.forEach(function(bullet) {
+    enemies.forEach(function(enemy) {
+      if (collides(bullet, enemy)) {
+        enemy.explode();
+        bullet.active = false;
+      }
+    });
+  });
+
+  enemies.forEach(function(enemy) {
+    if (collides(enemy, player)) {
+      enemy.explode();
+      player.explode();
+    }
+  });
+}
+
+function update() {
+  ...
+  handleCollisions();
+}
+```
+
+Now we need to add the explode methods to the player and the enemies.
+This will flag them for removal and add an explosion.
+
+```js
+function Enemy(I) {
+  ...
+
+  I.explode = function() {
+    this.active = false;
+    // Extra Credit: Add an explosion graphic
+  };
+
+  return I;
+};
+
+player.explode = function() {
+  this.active = false;
+  // Extra Credit: Add an explosion graphic and then end the game
+};
+```
+
+## Sound
+
+To round out the experience, we're going to add some sweet sound effects.
+Sounds, like images, can be somewhat of a pain to use in HTML5, but thanks to
+our magic no-tears formula sound.js, sound can be made super-simple.
+
+```js
+player.shoot = function() {
+  Sound.play("shoot");
+  ...
+}
+
+function Enemy(I) {
+  ...
+
+  I.explode = function() {
+    Sound.play("explode");
+    ...
+  }
+}
+```
+
+Though the API is now tear-free, adding sounds is currently the quickest way
+to crash your application. It's not uncommon for sounds to cut-out or take down
+the entire browser tab, so get your tissues ready.
+
+## Farewell
+
+
+Again, here is the [full working game demo](http://strd6.com/space_demo/). You can download
+[the source code as a zip](http://strd6.com/wp-content/uploads/2010/12/space_demo.zip), too.
+
+
+Well, I hope you enjoyed learning the basics of making a simple game in
+JavaScript and HTML5. By programming at the right level of abstraction, we can
+insulate ourselves from the more difficult parts of the APIs, as well as be
+resilient in the face of future changes.
+
+## References
+
+- [HTML5 Canvas Cheat Sheet](http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html)
+- [HTML5 Game Engines](https://gist.github.com/768272)
diff --git a/src/site/content/en/blog/canvas-performance/index.md b/src/site/content/en/blog/canvas-performance/index.md
new file mode 100644
index 00000000000..97115a837b0
--- /dev/null
+++ b/src/site/content/en/blog/canvas-performance/index.md
@@ -0,0 +1,390 @@
+---
+layout: post
+title: Improving HTML5 Canvas performance
+date: 2011-08-16
+updated: 2013-10-29
+authors:
+  - smus
+tags:
+  - blog
+---
+
+## Introduction
+
+HTML5 canvas, which started as an experiment from Apple, is the most
+widely supported standard for 2D [immediate mode graphics](http://en.wikipedia.org/wiki/Immediate_mode) on
+the web.  Many developers now rely on it for a wide variety of
+multimedia projects, visualizations, and games. However, as the
+applications we build increase in complexity, developers inadvertently
+hit the performance wall. 
+There’s a lot of disconnected wisdom about optimizing canvas
+performance. This article aims to consolidate some of this body into a
+more readily digestible resource for developers. This article includes
+fundamental optimizations that apply to all computer graphics
+environments as well as canvas-specific techniques that are subject to
+change as canvas implementations improve. In particular, as browser
+vendors implement canvas GPU acceleration, some of the outlined
+performance techniques discussed will likely become less impactful. This
+will be noted where appropriate.
+Note that this article does not go into usage of HTML5 canvas. For that,
+check out these [canvas related articles](http://www.html5rocks.com/en/tutorials/#canvas) on HTML5Rocks,
+this [chapter on the Dive into HTML5 site](http://diveintohtml5.info/canvas.html) or the [MDN Canvas](https://developer.mozilla.org/canvas_tutorial).
+tutorial.
+
+## Performance testing
+
+To address the quickly changing world of HTML5 canvas, [JSPerf](http://jsperf.com/)
+([jsperf.com](http://jsperf.com/)) tests verify that every proposed optimization
+still works.  JSPerf is a web application that allows developers to
+write JavaScript performance tests. Each test focuses on a result that
+you’re trying to achieve (for example, clearing the canvas), and
+includes multiple approaches that achieve the same result. JSPerf runs
+each approach as many times as possible over a short time period and
+gives a statistically meaningful number of iterations per second. Higher
+scores are always better!
+Visitors to a JSPerf performance test page can run the test on their
+browser, and let JSPerf store the normalized test results on
+[Browserscope](http://www.browserscope.org/) ([browserscope.org](http://www.browserscope.org/)). Because the optimization
+techniques in this article are backed up by a JSPerf result, you can
+return to see up-to-date information about whether or not the technique
+still applies. I’ve written a small [helper application](https://github.com/borismus/jsperfview) that
+renders these results as graphs, embedded throughout this article.
+
+All of the performance results in this article are keyed on the
+browser version. This turns out to be a limitation, since we don't know what OS
+the browser was running on, or even more importantly, whether or not HTML5
+canvas was hardware accelerated when the performance test ran. You can find out
+if Chrome's HTML5 canvas is hardware accelerated by visiting
+`about:gpu` in the address bar.
+
+## Pre-render to an off-screen canvas
+
+If you’re re-drawing similar primitives to the screen across multiple
+frames, as is often the case when writing a game, you can make large
+performance gains by pre-rendering large parts of the scene.
+Pre-rendering means using a separate off-screen canvas (or canvases) on
+which to render temporary images, and then rendering the off-screen
+canvases back onto the visible one. 
+For example, suppose you’re redrawing Mario running at 60 frames a
+second. You could either redraw his hat, moustache, and “M” at each
+frame, or pre-render Mario before running the animation. 
+no pre-rendering:
+
+```js
+// canvas, context are defined
+function render() {
+  drawMario(context);
+  requestAnimationFrame(render);
+}
+```
+
+pre-rendering:
+
+```js
+var m_canvas = document.createElement('canvas');
+m_canvas.width = 64;
+m_canvas.height = 64;
+var m_context = m_canvas.getContext('2d');
+drawMario(m_context);
+
+function render() {
+  context.drawImage(m_canvas, 0, 0);
+  requestAnimationFrame(render);
+}
+```
+
+Note the use of `requestAnimationFrame`, which is discussed in more detail
+in a later section. 
+
+This technique is especially effective when the rendering operation
+(`drawMario` in the above example) is expensive. A good example of this is
+text rendering, which is a very expensive operation. 
+
+However, the poor performance of the
+“pre-rendered loose” test case. When pre-rendering, it’s important to
+make sure that your temporary canvas fits snugly around the image you
+are drawing, otherwise the performance gain of off-screen rendering is
+counterweighted by the performance loss of copying one large canvas onto
+another (which varies as a function of source target size). A snug
+canvas in the above test is simply smaller:
+
+```js
+can2.width = 100;
+can2.height = 40;
+```
+
+Compared to the loose one that yields poorer performance:
+
+```js
+can3.width = 300;
+can3.height = 100;
+```
+
+## Batch canvas calls together
+
+Since drawing is an expensive operation, it’s more efficient to load the
+drawing state machine with a long set of commands, and then have it dump
+them all onto the video buffer.
+
+For example, when drawing multiple lines, it's more efficient to create one
+path with all the lines in it and draw it with a single draw call. In other
+words, rather than drawing separate lines:
+
+```js
+for (var i = 0; i < points.length - 1; i++) {
+  var p1 = points[i];
+  var p2 = points[i+1];
+  context.beginPath();
+  context.moveTo(p1.x, p1.y);
+  context.lineTo(p2.x, p2.y);
+  context.stroke();
+}
+```
+
+We get better performance from drawing a single polyline:
+
+```js
+context.beginPath();
+for (var i = 0; i < points.length - 1; i++) {
+  var p1 = points[i];
+  var p2 = points[i+1];
+  context.moveTo(p1.x, p1.y);
+  context.lineTo(p2.x, p2.y);
+}
+context.stroke();
+```
+
+This applies to the world of HTML5 canvas as well. When drawing a
+complex path, for example, it’s better to put all of the points into the
+path, rather than rendering the segments separately ([jsperf](http://jsperf.com/batching-line-drawing-calls/2)).
+
+Note, however, that with Canvas, there’s an important exception to this
+rule: if the primitives involved in drawing the desired object have
+small bounding boxes (for example, horizontal and vertical lines), it
+may actually be more efficient to render them separately
+([jsperf](http://jsperf.com/batching-line-drawing-calls)).
+
+## Avoid unnecessary canvas state changes
+
+The HTML5 canvas element is implemented on top of a state machine that
+tracks things like fill and stroke styles, as well as previous points
+that make up the current path. When trying to optimize graphics
+performance, it’s tempting to focus solely on the graphics rendering.
+However, manipulating the state machine can also incur a performance
+overhead.
+If you use multiple fill colors to render a scene, for example, it’s
+cheaper to render by color rather than by placement on the canvas. To
+render a pinstripe pattern, you could render a stripe, change colors,
+render the next stripe, etc:
+
+```js
+for (var i = 0; i < STRIPES; i++) {
+  context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
+  context.fillRect(i * GAP, 0, GAP, 480);
+}
+```
+
+Or render all odd stripes and then all even stripes:
+
+```js
+context.fillStyle = COLOR1;
+for (var i = 0; i < STRIPES/2; i++) {
+  context.fillRect((i*2) * GAP, 0, GAP, 480);
+}
+context.fillStyle = COLOR2;
+for (var i = 0; i < STRIPES/2; i++) {
+  context.fillRect((i*2+1) * GAP, 0, GAP, 480);
+}
+```
+
+As expected, the interlaced approach is slower because changing the
+state machine is expensive.
+
+## Render screen differences only, not the whole new state
+
+As one would expect, rendering less on the screen is cheaper than
+rendering more. If you have only incremental differences between
+redraws, you can get a significant performance boost by just drawing the
+difference. In other words, rather than clearing the whole screen before
+drawing:
+
+```js
+context.fillRect(0, 0, canvas.width, canvas.height);
+```
+
+Keep track of the drawn bounding box, and only clear that.
+
+```js
+context.fillRect(last.x, last.y, last.width, last.height);
+```
+
+If you are familiar with computer graphics, you might also know this
+technique as “redraw regions”, where the previously rendered bounding
+box is saved, and then cleared on each rendering.
+This technique also applies to pixel-based rendering contexts, as is
+illustrated by this JavaScript [Nintendo emulator talk](http://jsconf.eu/2010/speaker/lessons_learnt_pushing_browser.html).
+
+## Use multiple layered canvases for complex scenes
+
+As mentioned before, drawing large images is expensive and should be
+avoided if possible. In addition to using another canvas for rendering
+off screen, as illustrated in the pre-rendering section, we can also use
+canvases layered on top of one another. By using transparency in the
+foreground canvas, we can rely on the GPU to composite the alphas
+together at render time. You might set this up as follows, with two
+absolutely positioned canvases one on top of the other.
+
+```html
+<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
+</canvas>
+<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
+</canvas>
+```
+
+The advantage over having just one canvas here, is that when we draw or
+clear the foreground canvas, we don’t ever modify the background. If
+your game or multimedia app can be split up into a foreground and
+background, consider rendering these on separate canvases to get a
+significant performance boost. 
+
+You can often take advantage of imperfect human perception and render
+the background just once or at a slower speed compared to the foreground
+(which is likely to occupy most of your user’s attention). For example,
+you can render the foreground every time you render, but render the
+background only every Nth frame.
+Also note that this approach generalizes well for any number of
+composite canvases if your application works better with a this sort of
+structure.
+
+## Avoid shadowBlur
+
+Like many other graphics environments, HTML5 canvas allows developers to
+blur primitives, but this operation can be very expensive:
+
+```js 
+context.shadowOffsetX = 5;
+context.shadowOffsetY = 5;
+context.shadowBlur = 4;
+context.shadowColor = 'rgba(255, 0, 0, 0.5)';
+context.fillRect(20, 20, 150, 100);
+```
+
+
+## Know various ways to clear the canvas
+
+Since HTML5 canvas is an [immediate mode](http://en.wikipedia.org/wiki/Immediate_mode) drawing paradigm,
+the scene needs to be redrawn explicitly at each frame. Because of this,
+clearing the canvas is a fundamentally important operation for HTML5
+canvas apps and games.
+As mentioned in the __Avoid canvas state changes__ section,
+clearing the entire canvas is often undesirable, but if you __must__ do
+it, there are two options: calling `context.clearRect(0, 0, width, height)` or using a canvas-specific hack to do it:
+`canvas.width = canvas.width`;.At the time of writing, `clearRect` generally outperforms the width
+reset version, but in some cases using the `canvas.width` resetting hack
+is significantly faster in Chrome 14
+
+Be careful with this tip, since it depends heavily on the underlying
+canvas implementation and is very much subject to change. For more
+information, see [Simon Sarris' article on clearing the canvas](http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters).
+
+## Avoid floating point coordinates
+
+HTML5 canvas supports sub-pixel rendering, and there’s no way to turn it
+off. If you draw with coordinates that are not integers, it
+automatically uses anti-aliasing to try to to smooth out the lines.
+Here’s the visual effect, taken from
+[this sub-pixel canvas performance article by Seb Lee-Delisle](http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8hVJtN0JP4ePNtD3XZWQ.png", alt="Sub-pixel", width="350", height="250" %}
+</figure>
+
+If the smoothed sprite is not the effect you seek, it can be much faster
+to convert your coordinates to integers using `Math.floor` or
+`Math.round` ([jsperf](http://jsperf.com/drawimage-whole-pixels)):
+
+To convert your floating point coordinates to integers, you can use
+several clever techniques, the most performant of which involve adding
+one half to the target number, and then performing bitwise operations on
+the result to eliminate the fractional part.
+
+```js
+// With a bitwise or.
+rounded = (0.5 + somenum) | 0;
+// A double bitwise not.
+rounded = ~~ (0.5 + somenum);
+// Finally, a left bitwise shift.
+rounded = (0.5 + somenum) << 0;
+```
+
+The full performance breakdown is here
+([jsperf](http://jsperf.com/math-round-vs-hack/3)).
+
+Note that this sort of optimization should no longer matter once canvas
+implementations are GPU accelerated which will be able to quickly
+render non-integer coordinates.
+
+## Optimize your animations with `requestAnimationFrame`
+
+The relatively new `requestAnimationFrame` API is the recommended way of
+implementing interactive applications in the browser. Rather than
+command the browser to render at a particular fixed tick rate, you
+politely ask the browser to call your rendering routine and get called
+when the browser is available. As a nice side effect, if the page is not
+in the foreground, the browser is smart enough not to render.
+The `requestAnimationFrame` callback aims for a 60 FPS callback rate but
+doesn’t guarantee it, so you need to keep track of how much time passed
+since the last render. This can look something like the following:
+
+```js
+var x = 100;
+var y = 100;
+var lastRender = Date.now();
+function render() {
+  var delta = Date.now() - lastRender;
+  x += delta;
+  y += delta;
+  context.fillRect(x, y, W, H);
+  requestAnimationFrame(render);
+}
+render();
+```
+
+Note that this use of `requestAnimationFrame` applies to canvas as well as
+other rendering technologies such as WebGL.
+At the time of writing, this API is only available in Chrome, Safari and
+Firefox, so you should use [this shim](http://paulirish.com/2011/requestanimationframe-for-smart-animating/).
+
+## Most mobile canvas implementations are slow
+
+Let’s talk about mobile. ~~Unfortunately at the time of writing, only iOS
+5.0 beta running Safari 5.1 has GPU accelerated mobile canvas
+implementation. Without GPU acceleration, mobile browsers don’t
+generally have powerful enough CPUs for modern canvas-based
+applications.~~  A number of the JSPerf tests described above perform an
+order of magnitude worse on mobile compared to desktop, greatly
+restricting the kinds of cross-device apps you can expect to
+successfully run.
+
+## Conclusion
+
+To recap, this article covered a comprehensive set of useful
+optimization techniques that will help you develop performant HTML5
+canvas-based projects. Now that you’ve learned something new here, go
+forth and optimize your awesome creations. Or, if you don’t currently
+have a game or application to optimize, check out
+[Chrome Experiments](http://www.chromeexperiments.com/) and [Creative JS](http://creativejs.com/) for inspiration.
+
+## References
+
+- [Immediate](http://en.wikipedia.org/wiki/Immediate_mode) mode vs. [retained](http://en.wikipedia.org/wiki/Retained_mode) mode.
+- Other HTML5Rocks [canvas articles](http://www.html5rocks.com/tutorials/#canvas).
+- The [Canvas section](http://diveintohtml5.info/canvas.html) of Dive into HTML5.
+- [JSPerf](http://jsperf.com/) lets developers create JS performance tests.
+- [Browserscope](http://www.browserscope.org) stores browser performance data.
+- [JSPerfView](https://github.com/borismus/jsperfview), which renders JSPerf tests as charts.
+- Simon's [blog post](http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters) on clearing the canvas, and his book, [HTML5 Unleashed](http://www.amazon.com/gp/product/0672336278?tag=simonsarris-20) which includes chapters on Canvas performance.
+- Sebastian's [blog post](http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation) on sub-pixel rendering performance.
+- Ben's [talk](http://jsconf.eu/2010/speaker/lessons_learnt_pushing_browser.html) about optimizing a JS NES emulator.
+- The new [canvas profiler](http://www.html5rocks.com/en/tutorials/canvas/inspection/) in the Chrome DevTools.
+
diff --git a/src/site/content/en/blog/canvas-texteffects/index.md b/src/site/content/en/blog/canvas-texteffects/index.md
new file mode 100644
index 00000000000..d6c935ccaf8
--- /dev/null
+++ b/src/site/content/en/blog/canvas-texteffects/index.md
@@ -0,0 +1,733 @@
+---
+layout: post
+title: Typographic effects in canvas
+date: 2011-03-01
+authors:
+  - mdeal
+tags:
+  - blog
+---
+
+## My Background
+
+`<canvas>` entered my awareness in 2006 when Firefox v2.0 was released. An article on [Ajaxian](http://ajaxian.com/), describing the transformation matrix, inspired me to create my first `<canvas>` web-app; [Color Sphere](http://www.colorjack.com/sphere/) (2007). Which immersed me into the world of colors, and graphic primitives; inspiring the creation of [Sketchpad](http://mugtug.com/sketchpad/) (2007-2008) in an effort to put together an application "better than Paint" in the browser.
+These experiments eventually led to the creation of the startup Mugtug with
+my long-time friend Charles Pritchard. We're developing [Darkroom](http://mugtug.com/darkroom/) in HTML5 `<canvas>`. Darkroom
+is a non-destructive photo-sharing app, combining the powers of pixel-based filters with
+vector-based typography and drawing.
+
+## Introduction
+
+<figure >
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d7xs9eowhsOMYFFYcryx.png", alt="Canvas banner graphic.", width="730", height="202" %}
+</figure>
+
+`<canvas>` brings Javascript programmers full-control of the __colors__,
+__vectors__ and __pixels__ on their screens - the visual makeup of the monitor.
+
+
+The following examples deal with one area in `<canvas>` that hasnt gotten
+much attention;  creating __text-effects__.  The variety of text-effects
+that can be created in `<canvas>` are as vast as you can imagine - these demos
+cover a sub-section of what is possible.  Although we 're dealing with
+"text" in this article, the methods can be applied to __any vector objects__;
+creating exciting visuals in games, and other applications:
+
+Text-Shadows in `<canvas>`.
+: __CSS-like__ text-effects in `<canvas>` creating clipping masks, finding metrics in `<canvas>`, and using the shadow property.
+
+Neon-rainbow, zebra-reflection - chaining effects.
+: __Photoshop-like__ text-effects in `<canvas>` examples of using globalCompositeOperation, createLinearGradient, createPattern.
+
+Inner and outer shadows in `<canvas>`
+: Revealing a __little known feature__; using clockwise vs. anti-clockwise winding to create the inverse of a drop-shadow (the __inner-shadow__).
+
+Spaceage - generative effect.
+: __Generative based__ text-effect in `<canvas>` using hsl() color-cycling and `window.requestAnimationFrame` to create the feeling of motion.
+
+
+## Text-Shadows in Canvas
+
+One of my favorite additions to CSS3 specs (along with border-radius, web-gradients, and others)
+is the ability to create shadows. It 's important to realize the differences
+between CSS and `<canvas>` shadows, specifically:
+
+ CSS uses two methods; __box-shadow__ for box-elements, such as div, span,
+and so on; and __text-shadow__ for text content.
+
+ `<canvas>` has one type of shadow; it 's used for all the vector
+objects; ctx.moveTo, ctx.lineTo, ctx.bezierCurveTo, ctx.quadradicCurveTo, ctx.arc, ctx.rect, ctx.fillText, ctx.strokeText, and so on.
+To create a shadow in `<canvas>`, tap into these four properties:
+
+
+**ctx.shadowColor** = "red" // string
+: Color of the shadow;  RGB, RGBA, HSL, HEX, and other inputs are valid.
+
+**ctx.shadowOffsetX** = 0; // integer
+: Horizontal distance of the shadow, in relation to the text.
+
+**ctx.shadowOffsetY** = 0; // integer
+: Vertical distance of the shadow, in relation to the text.
+
+**ctx.shadowBlur** = 10; // integer
+: Blurring effect to the shadow, the larger the value, the greater the blur.
+
+To get things started, let 's see how `<canvas>` can emulate CSS effects.
+Searching through Google images for "css text-shadow" led to a few great
+demos for us to emulate; [Line25](http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects),
+and [Stereoscopic](http://lab.simurai.com/css/css3d/), and
+[Shadow 3D](http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4B2cPb5kd0ueCx19URBI.png", alt="CSS 3D Graphic", width="300", height="162" %}
+</figure>
+
+The stereoscopic 3D effect (see [Anaglyph image](http://en.wikipedia.org/wiki/Anaglyph_image)
+for more) is an example of a simple line of code, put to great use. With the following line of CSS,
+we can create the illusion of depth when viewed with 3D red/cyan glasses (the kind they give you at 3D movies):
+
+```css
+text-shadow: -0.06em 0 0 red, 0.06em 0 0 cyan;
+```
+
+There are two things to notice when converting this string to `<canvas>`:
+
+1. There is no shadow-blur (the third value), so there is no reason to actually run shadow, as fillText would create the same results:
+
+```js
+var text = "Hello world!"
+ctx.fillStyle = "#000"
+ctx.fillText(text, -7, 0);
+ctx.fillStyle = "red"
+ctx.fillText(text, 0, 0);
+ctx.fillStyle = "cyan"
+ctx.fillText(text, 7, 0);</pre>
+```
+
+1. EM 's aren 't supported in `<canvas>` so they 'll have
+to be converted to PX 's. We can find the conversion ratio for converting
+between PT, PC, EM, EX, PX and so-forth by creating an element with the same
+font-properties in DOM, and setting the width to the format to be measured; 
+or instance, to capture the EM -> PX conversion, we 'd measure the DOM
+element with a "height: 1em", the resulting offsetHeight would be
+how many PX 's are in each EM.
+
+```js
+var font = "20px sans-serif"
+var d = document.createElement("span");
+d.style.cssText = "font: " + font + " height: 1em; display: block"
+// the value to multiply PX 's by to convert to EM 's
+var EM2PX = 1 / d.offsetHeight;</pre>
+```
+
+### Preventing alpha-multiplication
+
+In a more complex example, such as the Neon effect found on Line25, the
+shadowBlur property must be used to emulate the effect properly. Since the
+Neon effect relies on multiple shadows, we run into a problem; in `<canvas>`
+each vector object can only have one shadow. So, in order to draw multiple
+shadows, you must draw multiple versions of the text on top of itself. 
+This results in alpha multiplication, and ultimately jagged edges.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9mSVKCcRckyEIazPFJ2O.png", alt="Neon graphic", width="500", height="194" %}
+</figure>
+
+I tried running `ctx.fillStyle = "rgba(0,0,0,0)"` or `"transparent"`
+to hide the text, while displaying the shadow… however, this attempt was futile;
+since the shadow is a multiplication of the fillStyle alpha, the shadow can never
+be more opaque than the fillStyle.
+
+Luckily, there is a way around this, we can draw the shadow offset from
+the text, keeping them separated (so they 're not overlapping), and thereby
+hiding the text off the side of the screen:
+
+```js
+var text = "Hello world!"
+var blur = 10;
+var width = ctx.measureText(text).width + blur * 2;
+ctx.textBaseline = "top"
+ctx.shadowColor = "#000"
+ctx.shadowOffsetX = width;
+ctx.shadowOffsetY = 0;
+ctx.shadowBlur = blur;
+ctx.fillText(text, -width, 0);
+```
+
+### Clipping around a text block
+
+To clean this up a bit we can prevent the fillText from being drawn in the
+first place (while allowing the shadow to be drawn) by adding a clipping path.
+In order to create a clipping path surrounding the text, we need to know the
+height of the text (called the "em-height" historically the height
+of the letter "M" on a printing press), and the width of the text.
+We can get the width using `ctx.measureText().width`, however,
+`ctx.measureText().height` doesn 't exist.
+
+Luckily, through CSS hack-ardry (__see [Typographic Metrics](http://mudcu.be/journal/html5-typographic-metrics/)
+for more ways to fix older implementations of `<canvas>` using CSS measurements__),
+we can find the height of the text through measuring the `offsetHeight` of a `<span>`
+with the same font-properties:
+
+```js
+var d = document.createElement("span");
+d.font = "20px arial"
+d.textContent = "Hello world!"
+var emHeight = d.offsetHeight;
+```
+
+From there, we can create a rectangle to use as a clipping path; enclosing the "shadow" while removing the dummy-shape.
+
+```js
+ctx.rect(0, 0, width, emHeight);
+ctx.clip();
+```
+
+Tying it all together, and optimizing as we go - if a shadow has no blur, fillText can be used to the same effect, saving us from setting up the clipping mask:
+
+```js
+var width = ctx.measureText(text).width;
+var style = shadowStyles[text];
+// add a background to the current effect
+ctx.fillStyle = style.background;
+ctx.fillRect(0, offsetY, ctx.canvas.width, textHeight - 1)
+// parse text-shadows from css
+var shadows = parseShadow(style.shadow);
+// loop through the shadow collection
+var n = shadows.length; while(n--) {
+var shadow = shadows[n];
+var totalWidth = width + shadow.blur * 2;
+ctx.save();
+ctx.beginPath();
+ctx.rect(offsetX - shadow.blur, offsetY, offsetX + totalWidth, textHeight);
+ctx.clip();
+if (shadow.blur) { // just run shadow (clip text)
+    ctx.shadowColor = shadow.color;
+    ctx.shadowOffsetX = shadow.x + totalWidth;
+    ctx.shadowOffsetY = shadow.y;
+    ctx.shadowBlur = shadow.blur;
+    ctx.fillText(text, -totalWidth + offsetX, offsetY + metrics.top);
+} else { // just run pseudo-shadow
+    ctx.fillStyle = shadow.color;
+    ctx.fillText(text, offsetX + (shadow.x||0), offsetY - (shadow.y||0) + metrics.top);
+}
+ctx.restore();
+}
+// drawing the text in the foreground
+if (style.color) {
+ctx.fillStyle = style.color;
+ctx.fillText(text, offsetX, offsetY + metrics.top);
+}
+// jump to next em-line
+ctx.translate(0, textHeight);
+```
+
+Since you're not going to want to enter all these `<canvas>` commands
+manually, I 've included a simple text-shadow parser in the demo source;
+this way you can feed it CSS commands and have it generate `<canvas>` commands.
+Now, our `<canvas>` elements have a whole range of styles it can tie into.
+These same shadow-effects can be used on any vector object, from WebFonts to
+complex shapes imported from SVGs, to generative vector shapes, and so on!
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OYIx6atDClMFriFDdbA1.png", alt="Text shadow in canvas effects", width="599", height="168" %}
+</figure>
+
+### Intermission (tangent on pixel-pushing)
+
+In writing this section of the article, the Stereoscopic example made me curious.  How hard it would be to create a 3D-movie-screen effect using `<canvas>` and two images taken from slightly different perspectives?  Apparently, not too hard.  The following kernel combines the red channel of the first image (data) w/ the cyan channel of the second image (data2):
+
+```js
+data[i] = data[i] * 255 / 0xFF;
+data[i+1] = 255 * data2[i+1] / 0xFF;
+data[i+2] = 255 * data2[i+2] / 0xFF;
+```
+
+Now, someone just needs to duct-tape two iPhones to their forehead, click "record video" at the same time, and we could make our own 3D movies in HTML5.  Any volunteers?
+    
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WFdfYOArz9cBunrWBSuN.png", alt="3d glasses", width="200", height="52" %}
+</figure>
+
+## Neon-rainbow, zebra-reflection—chaining effects
+
+Chaining multiple effects in `<canvas>` can be simple, but a basic
+knowledge of the globalCompositeOperation (GCO) is required. To compare the
+operations to GIMP (or Photoshop): there are 12 GCO 's in `<canvas>`
+__darker__, and __lighter__ can be thought of as layer blend-modes;
+the other 10 operations are applied to the layers as alpha masks (one layer
+removes the pixels of the other layer). The globalCompositeOperation ties "layers"
+(or in our case, strings of code) together, combining them in new and exciting ways:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iz7Cvp2zPp59O7AprtMX.png", alt="Chaining effects graphics", width="512", height="403" %}
+</figure>
+
+The globalCompositeOperation chart shows
+GCO modes at work; this chart uses a large portion of the color-spectrum and multiple
+levels of alpha transparency in order to see in detail what to expect.
+I would recommend checking out Mozilla 's [globalCompositeOperation reference](https://developer.mozilla.org/Canvas_tutorial/Compositing)
+for textual descriptions. For further research, you can learn how the operation
+work in Porter Duff 's __[Compositing Digital Images](http://keithp.com/~keithp/porterduff/)__.
+
+ My favorite mode is globalCompositeOperation="lighter".  Lighter mixes
+the appended pixels similar to how light mixes; when red, green and white light are at
+full-intensity, we see white-light. It 's a exciting feature to play around
+with, especially when the `<canvas>` is set to a low globalAlpha; enabling finer control,
+and smoother edges.  Lighter has been put to many uses, my recent favorite being a
+HTML5 desktop background creator found at [http://weavesilk.com/](http://weavesilk.com/).
+One of my demos, [Breathing Galaxies](http://mudcu.be/labs/JS1k/BreathingGalaxies.html) (JS1k),
+also uses the lighter mode - drawing patterns from these two examples you start to
+see what effect this mode yields.
+
+{% Aside %}
+There is some missing support for some of the GCO modes across the
+browsers that needs to be sorted out. There are six-modes that work across browsers
+(in Chrome, Safari, Firefox, and Opera): **source-over, source-atop, destination-over,
+destination-out, lighter, and xor**. Hopefully this will be sorted out in coming
+releases, for more information visit
+{% endAside %}
+
+[globalCompositeOperation browser handling](http://www.rekim.com/tag/globalcompositeoperation/).
+
+### Neon-Rainbow Jitter Effect
+
+In the following demo, we 're going to achieve a __Photoshop-like__
+neon-rainbow-glow with a jittered outline, by chaining effects together using the
+globalCompositeOperation (source-in, lighter, and darker).
+This demo is a progression of the "Text-Shadows in `<canvas>`" demo,
+using the same strategy in separating the shadow from the text (see previous section):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/w3oTGfBBhMwD7zjhvdNE.png", alt="Rainbow Jitter", width="555", height="185" %}
+</figure>
+
+```js
+function neonLightEffect() {
+var text = "alert('"+String.fromCharCode(0x2665)+"')";
+var font = "120px Futura, Helvetica, sans-serif";
+var jitter = 25; // the distance of the maximum jitter
+var offsetX = 30;
+var offsetY = 70;
+var blur = getBlurValue(100);
+// save state
+ctx.save();
+ctx.font = font;
+// calculate width + height of text-block
+var metrics = getMetrics(text, font);
+// create clipping mask around text-effect
+ctx.rect(offsetX - blur/2, offsetY - blur/2,
+        offsetX + metrics.width + blur, metrics.height + blur);
+ctx.clip();
+// create shadow-blur to mask rainbow onto (since shadowColor doesn't accept gradients)
+ctx.save();
+ctx.fillStyle = "#fff";
+ctx.shadowColor = "rgba(0,0,0,1)";
+ctx.shadowOffsetX = metrics.width + blur;
+ctx.shadowOffsetY = 0;
+ctx.shadowBlur = blur;
+ctx.fillText(text, -metrics.width + offsetX - blur, offsetY + metrics.top);
+ctx.restore();
+// create the rainbow linear-gradient
+var gradient = ctx.createLinearGradient(0, 0, metrics.width, 0);
+gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
+gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)");
+gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)");
+gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)");
+gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)");
+gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)");
+gradient.addColorStop(1, "rgba(255, 0, 0, 1)");
+// change composite so source is applied within the shadow-blur
+ctx.globalCompositeOperation = "source-atop";
+// apply gradient to shadow-blur
+ctx.fillStyle = gradient;
+ctx.fillRect(offsetX - jitter/2, offsetY,
+            metrics.width + offsetX, metrics.height + offsetY);
+// change composite to mix as light
+ctx.globalCompositeOperation = "lighter";
+// multiply the layer
+ctx.globalAlpha = 0.7
+ctx.drawImage(ctx.canvas, 0, 0);
+ctx.drawImage(ctx.canvas, 0, 0);
+ctx.globalAlpha = 1
+// draw white-text ontop of glow
+ctx.fillStyle = "rgba(255,255,255,0.95)";
+ctx.fillText(text, offsetX, offsetY + metrics.top);
+// created jittered stroke
+ctx.lineWidth = 0.80;
+ctx.strokeStyle = "rgba(255,255,255,0.25)";
+var i = 10; while(i--) { 
+    var left = jitter / 2 - Math.random() * jitter;
+    var top = jitter / 2 - Math.random() * jitter;
+    ctx.strokeText(text, left + offsetX, top + offsetY + metrics.top);
+}    
+ctx.strokeStyle = "rgba(0,0,0,0.20)";
+ctx.strokeText(text, offsetX, offsetY + metrics.top);
+ctx.restore();
+};
+```
+
+### Zebra Reflection Effect
+
+The Zebra Reflection effect was inspired by
+[WebDesignerWall](http://www.webdesignerwall.com/demo/css-gradient-text) 's
+excellent resource on how to spice up your page with CSS. This takes the idea a
+little bit further, creating a "reflection" for the text - such as what
+you might see in iTunes.  The effect combines the fillColor (white), createPattern (zebra.png),
+and linearGradient (shine);  this illustrates the ability to apply multiple fill
+types to each vector object:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pN2lZkfjGiqbmoNZZg94.png", alt="Zebra effect", width="652", height="217" %}
+</figure>
+
+```js
+function sleekZebraEffect() {
+// inspired by - http://www.webdesignerwall.com/demo/css-gradient-text/
+var text = "Sleek Zebra...";
+var font = "100px Futura, Helvetica, sans-serif";
+
+// save state
+ctx.save();
+ctx.font = font;
+
+// getMetrics calculates:
+// width + height of text-block
+// top + middle + bottom baseline
+var metrics = getMetrics(text, font);
+var offsetRefectionY = -20;
+var offsetY = 70;
+var offsetX = 60;
+
+// throwing a linear-gradient in to shine up the text
+var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY);
+gradient.addColorStop(0.1, '#000');
+gradient.addColorStop(0.35, '#fff');
+gradient.addColorStop(0.65, '#fff');
+gradient.addColorStop(1.0, '#000');
+ctx.fillStyle = gradient
+ctx.fillText(text, offsetX, offsetY + metrics.top);
+
+// draw reflected text
+ctx.save();
+ctx.globalCompositeOperation = "source-over";
+ctx.translate(0, metrics.height + offsetRefectionY)
+ctx.scale(1, -1);
+ctx.font = font;
+ctx.fillStyle = "#fff";
+ctx.fillText(text, offsetX, -metrics.height - offsetY + metrics.top);
+ctx.scale(1, -1);
+
+// cut the gradient out of the reflected text 
+ctx.globalCompositeOperation = "destination-out";
+var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY);
+gradient.addColorStop(0.0, 'rgba(0,0,0,0.65)');
+gradient.addColorStop(1.0, '#000');
+ctx.fillStyle = gradient;
+ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height);
+
+// restore back to original transform state
+ctx.restore();
+
+// using source-atop to allow the transparent .png to show through to the gradient
+ctx.globalCompositeOperation = "source-atop";
+
+// creating pattern from <image> sourced.
+ctx.fillStyle = ctx.createPattern(image, 'repeat');
+
+// fill the height of two em-boxes, to encompass both normal and reflected state
+ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height * 2);
+ctx.restore();
+};
+```
+
+## Inner/outer shadows in Canvas
+
+The `<canvas>` specs doesn 't touch on the subject of "inner"
+vs. "outer" shadows. In fact, at first appearance, you may expect
+"inner" shadow isn 't supported. This is not the case.
+It 's just a bit tricker to enable ;) As proposed in a recent post
+from [F1LT3R](http://weblog.bocoup.com/can-i-draw-an-inset-shadow-with-the-html5-canvas-api),
+you can create inner-shadows using the unique properties of clockwise vs. anti-clockwise
+winding rules. To do this, you create an "inner-shadow" by drawing container
+rectangle, and then, using opposite winding rules, draw a cutout shape - creating
+the inverse of the shape.
+
+The following example allows for the inner-shadow and fillStyle to be stylized
+with color+gradient+pattern simultaneously. You can specify pattern rotation
+individually; notice the zebra stripes are now perpendicular to each-other.
+A clipping mask the size of the bounding-box is used removing the need for a
+super-large container to enclose the cutout shape - improving the speed by
+preventing the unnecessary parts of the shadow from being processed.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0XOpHHMgFMFRcxXmBPgj.png", alt="Inner/outer shadows", width="241", height="234" %}
+</figure>
+
+```js
+function innerShadow() {
+
+function drawShape() { // draw anti-clockwise
+ctx.arc(0, 0, 100, 0, Math.PI * 2, true); // Outer circle
+ctx.moveTo(70, 0);
+ctx.arc(0, 0, 70, 0, Math.PI, false); // Mouth
+ctx.moveTo(-20, -20);
+ctx.arc(30, -30, 10, 0, Math.PI * 2, false); // Left eye
+ctx.moveTo(140, 70);
+ctx.arc(-20, -30, 10, 0, Math.PI * 2, false); // Right eye
+};
+
+var width = 200;
+var offset = width + 50;
+var innerColor = "rgba(0,0,0,1)";
+var outerColor = "rgba(0,0,0,1)";
+
+ctx.translate(150, 170);
+
+// apply inner-shadow
+ctx.save();
+ctx.fillStyle = "#000";
+ctx.shadowColor = innerColor;
+ctx.shadowBlur = getBlurValue(120);
+ctx.shadowOffsetX = -15;
+ctx.shadowOffsetY = 15;
+
+// create clipping path (around blur + shape, preventing outer-rect blurring)
+ctx.beginPath();
+ctx.rect(-offset/2, -offset/2, offset, offset);
+ctx.clip();
+
+// apply inner-shadow (w/ clockwise vs. anti-clockwise cutout)
+ctx.beginPath();
+ctx.rect(-offset/2, -offset/2, offset, offset);
+drawShape();
+ctx.fill();
+ctx.restore();
+
+// cutout temporary rectangle used to create inner-shadow
+ctx.globalCompositeOperation = "destination-out";
+ctx.fill();
+
+// prepare vector paths
+ctx.beginPath();
+drawShape();
+
+// apply fill-gradient to inner-shadow
+ctx.save();
+ctx.globalCompositeOperation = "source-in";
+var gradient = ctx.createLinearGradient(-offset/2, 0, offset/2, 0);
+gradient.addColorStop(0.3, '#ff0');
+gradient.addColorStop(0.7, '#f00');
+ctx.fillStyle = gradient;
+ctx.fill();
+
+// apply fill-pattern to inner-shadow
+ctx.globalCompositeOperation = "source-atop";
+ctx.globalAlpha = 1;
+ctx.rotate(0.9);
+ctx.fillStyle = ctx.createPattern(image, 'repeat');
+ctx.fill();
+ctx.restore();
+
+// apply fill-gradient
+ctx.save();
+ctx.globalCompositeOperation = "destination-over";
+var gradient = ctx.createLinearGradient(-offset/2, -offset/2, offset/2, offset/2);
+gradient.addColorStop(0.1, '#f00');
+gradient.addColorStop(0.5, 'rgba(255,255,0,1)');
+gradient.addColorStop(1.0, '#00f');
+ctx.fillStyle = gradient
+ctx.fill();
+
+// apply fill-pattern
+ctx.globalCompositeOperation = "source-atop";
+ctx.globalAlpha = 0.2;
+ctx.rotate(-0.4);
+ctx.fillStyle = ctx.createPattern(image, 'repeat');
+ctx.fill();
+ctx.restore();
+
+// apply outer-shadow (color-only without temporary layer)
+ctx.globalCompositeOperation = "destination-over";
+ctx.shadowColor = outerColor;
+ctx.shadowBlur = 40;
+ctx.shadowOffsetX = 15;
+ctx.shadowOffsetY = 10;
+ctx.fillStyle = "#fff";
+ctx.fill();
+};
+```
+
+From these examples you can see, using globalCompositeOperation, we can
+chain-effects together, producing more elaborate effects (utilizing masking
+and blending). The screen is your oyster ;)
+
+## Spaceage—generative effects
+
+In `<canvas>`, going from the unicode character 0x2708:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TeGf5Gzxaq2VEDkiB54O.png", alt="Unicode gfaphic", width="270", height="258" %}
+</figure>
+
+…to this shaded example:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Woj2vfpfT8X6feFfAue4.png", alt="Shaded example", width="270", height="200" %}
+</figure>
+
+…can be achieved by multiple calls to `ctx.strokeText()` with a thin lineWidth (0.25),
+while slowly decreasing the x-offset and alpha; giving our vector elements the feeling of motion.
+
+By mapping the elements XY position to a sine/cosine wave, and cycling through
+colors using the HSL property, we can create more interesting effects, such as this
+"biohazard" example:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hTj61l44xoKOrGnlZBZP.png", alt="HSL cycling effect", width="646", height="129" %}
+</figure>
+
+### HSL: Hue, Saturation, Lightness (1978)
+
+HSL is a newly supported format in the CSS3 specs.  Where HEX was designed
+for computers, HSL is designed to be human readable.
+
+Illustrating the ease of HSL; to cycle through the color-spectrum, we 'd simply
+increment the "hue" from 360; the hue is mapped to the spectrum in
+cylindric fashion. Lightness controls how how dark/light the color is;
+0% indicates a black pixel, whereas 100% indicates a white pixel.
+Saturation controls how bright or vivid a color is; grey 's are created
+with a saturation of 0%, and vivid colors are created using a value of 100%.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vRr2pXKNVbdYZ9rQ2i27.png", alt="HSL Graphic", width="281", height="283" %}
+</figure>
+
+Since HSL is a recent standard, you may wish to continue supporting older
+browsers, which is possible via color-space conversion. The following code accepts
+an HSL object { H: 360, S: 100, L: 100} and outputs a RGB object { R: 255, G: 255, B: 255 }.
+From there, you can use those values to create your rgb or rgba string.
+For more in depth information see Wikipedia 's insightful article on
+[HSL](http://en.wikipedia.org/wiki/HSL_and_HSV).
+
+```js
+// HSL (1978) = H: Hue / S: Saturation / L: Lightness
+HSL_RGB = function (o) { // { H: 0-360, S: 0-100, L: 0-100 }
+var H = o.H / 360,
+    S = o.S / 100,
+    L = o.L / 100,
+    R, G, B, _1, _2;
+
+function Hue_2_RGB(v1, v2, vH) {
+if (vH < 0) vH += 1;
+if (vH > 1) vH -= 1;
+if ((6 * vH) < 1) return v1 + (v2 - v1) * 6 * vH;
+if ((2 * vH) < 1) return v2;
+if ((3 * vH) < 2) return v1 + (v2 - v1) * ((2 / 3) - vH) * 6;
+return v1;
+}
+
+if (S == 0) { // HSL from 0 to 1
+R = L * 255;
+G = L * 255;
+B = L * 255;
+} else {
+if (L < 0.5) {
+    _2 = L * (1 + S);
+} else {
+    _2 = (L + S) - (S * L);
+}
+_1 = 2 * L - _2;
+
+R = 255 * Hue_2_RGB(_1, _2, H + (1 / 3));
+G = 255 * Hue_2_RGB(_1, _2, H);
+B = 255 * Hue_2_RGB(_1, _2, H - (1 / 3));
+}
+
+return {
+R: R,
+G: G,
+B: B
+};
+};
+```
+
+### Creating animations with requestAnimationFrame
+
+In the past, to create animations in Javascript, there was two choices; `setTimeout`,
+and `setInterval`.
+
+`window.requestAnimationFrame`, is the new standard here to replace
+both; saving the world electricity (and your computer a few heartbeats) by
+allowing the browser to regulate animations based on available resources.
+Some important features include:
+
+- When a user exists the frame, the animation can slow down or stop
+completely, to prevent the use of unneeded resources.
+- There is a limit cap to the frame-rate at 60FPS. The reason for this is
+it 's well above the level humans can notice (most humans by 30FPS
+see animation being "fluid").
+
+At the time of writing, vender specific prefixes are required to use `requestAnimationFrame`.
+Paul Irish created a shim layer that has cross-vender support, in [requestAnimationFrame for
+smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/):
+
+```js
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+return  window.requestAnimationFrame       || 
+        window.webkitRequestAnimationFrame || 
+        window.mozRequestAnimationFrame    || 
+        window.oRequestAnimationFrame      || 
+        window.msRequestAnimationFrame     || 
+        function(/* function */ callback, /* DOMElement */ element){
+        window.setTimeout(callback, 1000 / 60);
+        };
+})();
+```
+
+Taking that a bit further, the more ambitious might tie this together with a
+poly-fill such as [requestAnimationFrame.js](https://github.com/neonux/requestAnimationFrame.js)
+(there are a few features to be worked out) that would support older browsers
+to a further extent, while switching to this new standard.
+
+```js
+(function animate() {
+var i = 50;
+while(i--) {
+    if (n > endpos) return;
+
+    n += definition;
+    ctx.globalAlpha = (0.5 - (n + startpos) / endpos) * alpha;
+    if (doColorCycle) {
+        hue = n + color;
+        ctx.strokeStyle = "hsl(" + (hue % 360) + ",99%,50%)"; // iterate hue
+    }
+    var x = cos(n / cosdiv) * n * cosmult; // cosine
+    var y = sin(n / sindiv) * n * sinmult; // sin
+    ctx.strokeText(text, x + xoffset, y + yoffset); // draw rainbow text
+}
+timeout = window.requestAnimationFrame(animate, 0);
+})();
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CeCJwubmXdTgzVhpyXoy.png", alt="Notes Blur Graphic", width="512", height="280" %}
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QkaDTVmX9fkhloJjC2FL.png", alt="Animation Graphic", width="528", height="176" %}
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ouNSXDIYdXLC24jjL0q7.png", alt="Matrix Graphic", width="512", height="153" %}
+</figure>
+
+## Source-code
+
+With support from across browser vendor-sphere, there is no question about the
+future of `<canvas>` it can be ported to the iPhone/Android/Desktop executables
+using [PhoneGap](http://www.phonegap.com/), or
+
+[Titanium](http://www.appcelerator.com/products/titanium-cross-platform-application-development/).
+
diff --git a/src/site/content/en/blog/carnival/index.md b/src/site/content/en/blog/carnival/index.md
new file mode 100644
index 00000000000..199126cd1d9
--- /dev/null
+++ b/src/site/content/en/blog/carnival/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Carnival Cruise Line
+date: 2016-11-09
+updated: 2016-11-09
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/P3Ur4zVpuoycct8dKsRy.png", alt="Carnival detail", width="800", height="450" %}
+</figure>
+
+### Summary
+
+**Carnival Cruise Line provides personalized, engaging communication service for
+its customers with push notifications.**
+
+### Results
+
+- 24% opt-in to push notifications (16% on desktop, 32% on mobile)
+- 42% open rate
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/V4APAsCurLCOS7miv9C4.pdf)
+
+## About Carnival Cruise Line
+
+Carnival Cruise Line, one of the world’s largest leisure-travel companies,
+wanted to enhance how it re-engaged its customers. The objective was to send
+timely, customized information that did not have to compete for attention in a
+customer’s inbox, worked on all devices and was easy to act on. Working with
+Mobify, Carnival implemented push notifications for mobile web users on Android
+and for desktop users on Chrome. The new strategy delivered a 42% engagement
+rate from customers who receive notifications.
+
+## Challenge
+
+Until late 2016, Carnival primarily depended on targeted emails to re-engage
+customers who had placed a hold on cruise bookings. Internal research showed
+there was an opportunity to motivate more users to return to the site to
+complete their bookings. With a significant amount of its web traffic on mobile
+browsers, Carnival looked to innovative technologies such as push notifications
+on the mobile web as well as desktop to re-engage customers who had created
+their holds and wanted to receive highly relevant communication beyond the
+standard email.
+
+## Solution
+
+Carnival and Mobify implemented push notifications, which let customers receive
+realtime updates on their “courtesy holds” including when the free hold on their
+vacation was set to expire. The information was critical in driving users back
+to the site to complete payment. On mobile, the notifications look the same as
+those from native apps, and arrive even when the browser isn’t running. The new
+push notifications resulted in a 16 percent opt-in rate on desktop and 32
+percent on mobile.
+
+Carnival can now reach customers on multiple types of devices without having to
+wait for the user to check their email and miss the opportunity to book their
+vacation before the hold expires. The company is already seeing a high opt-in
+rate, which is a valuable difference to its bottom line.
+
+>We see an improvement of our conversion rate supported by this new, innovative
+way of engaging our customers across different devices,’ says Steven Frier,
+Carnival’s director of e-commerce. ‘There is a direct 42 percent click through
+rate from push notifications. Having another channel to reach our users is a
+game changer.
diff --git a/src/site/content/en/blog/carousel-best-practices/index.md b/src/site/content/en/blog/carousel-best-practices/index.md
new file mode 100644
index 00000000000..b48c1fceb2b
--- /dev/null
+++ b/src/site/content/en/blog/carousel-best-practices/index.md
@@ -0,0 +1,358 @@
+---
+layout: post
+title: Best practices for carousels
+subhead: Optimize carousels for performance and usability.
+authors:
+  - katiehempenius
+description:  Learn how to optimize carousels for performance and usability.
+date: 2021-01-26
+hero: image/admin/i7tjE04MYo7xJOZKkyQI.jpg
+tags:
+  - blog
+  # - fast
+  - performance
+  - web-vitals
+---
+
+A carousel is a UX component that displays content in slideshow-like manner.
+Carousels can "autoplay" or be navigated manually by users. Although carousels
+can be used elsewhere, they are most frequently used to display images,
+products, and promotions on homepages.
+
+This article discusses performance and UX best practices for carousels.
+
+<figure>
+  {% Img src="image/admin/u2FlXalClwBeDOBBiwxu.png", alt="Image showing a carousel", width="629", height="420" %}
+</figure>
+
+## Performance
+
+A well-implemented carousel, in and of itself, should have very minimal or no
+impact on performance. However, carousels often contain large media assets.
+Large assets can impact performance regardless of whether they are displayed in
+a carousel or elsewhere.
+
+
+*   **LCP (Largest Contentful Paint)**
+
+    Large, above-the-fold carousels often contain the page's LCP element, and
+    therefore can have a significant impact on LCP. In these scenarios,
+    optimizing the carousel may significantly improve LCP. For an in-depth
+    explanation of how LCP measurement works on pages containing carousels,
+    refer to the [LCP measurement for carousels](#lcp-measurement-for-carousels)
+    section.
+
+*   **FID (First Input Delay)**
+
+    Carousels have minimal JavaScript requirements and therefore should not
+    impact page interactivity. If you discover that your site's carousel has
+    long-running scripts, you should consider replacing your carousel tooling.
+
+*   **CLS (Cumulative Layout Shift)**
+
+    A surprising number of carousels use janky, non-composited animations that
+    can contribute to CLS. On pages with autoplaying carousels, this has the
+    potential to cause infinite CLS. This type of CLS typically isn't apparent
+    to the human eye, which makes the issue easy to overlook. To avoid this
+    issue, [avoid using non-composited animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)
+    in your carousel (for example, during slide transitions).
+
+
+## Performance best practices
+
+### Load carousel content using HTML
+
+Carousel content should be loaded via the page's HTML markup so that it is
+discoverable by the browser early in the page load process. Using JavaScript to
+initiate the loading of carousel content is probably the single biggest
+performance mistake to avoid when using carousels. This delays image loading and
+can negatively impact LCP.
+
+
+{% Compare 'better' %}
+```html
+<div class="slides">
+  <img src="https://example.com/cat1.jpg">
+  <img src="https://example.com/cat2.jpg">
+  <img src="https://example.com/cat3.jpg">
+</div>
+```
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+```javascript
+const slides = document.querySelector(".slides");
+const newSlide = document.createElement("img");
+newSlide.src = "htttp://example.com/cat1.jpg";
+slides.appendChild(newSlide);
+```
+
+{% endCompare %}
+
+For advanced carousel optimization, consider loading the first slide statically,
+then progressively enhancing it to include navigation controls and additional
+content. This technique is most applicable to environments where you have a
+user's prolonged attention—this gives the additional content time to load. In
+environments like home pages, where users may only stick around for a second or
+two, only loading a single image may be similarly effective.
+
+
+### Avoid layout shifts
+
+{% Aside %}
+
+Chrome 88-90 shipped a variety of [bug
+fixes](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md)
+related to how layout shifts are calculated. Many of these bug fixes are
+relevant to carousels. As a result of these fixes, sites should expect to see
+lower carousel-related layout shift scores in later versions of Chrome.
+
+{% endAside %}
+
+
+Slide transitions and navigation controls are the two most common sources of
+layout shifts in carousels:
+
+
+- **Slide transitions:** Layout shifts that occur during slide transitions are
+  usually caused by updating the layout-inducing properties of DOM elements.
+  Examples of some of these properties include: `left`, `top`, `width`, and
+  `marginTop`. To avoid layout shifts, instead use the CSS
+  [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)
+  property to transition these elements. This
+  [demo](https://glitch.com/~basic-carousel) shows how to use `transform` to
+  build a basic carousel.
+
+- **Navigation controls:** Moving or adding/removing carousel navigation
+  controls from the DOM can cause layout shifts depending on how these changes
+  are implemented. Carousels that exhibit this behavior typically do so in
+  response to user hover.
+
+These are some of the common points of confusion regarding CLS measurement for
+carousels:
+
+- **Autoplay carousels:** Slide transitions are the most common source of
+  carousel-related layout shifts. In a non-autoplay carousel these layout shifts
+  typically occur within 500ms of a user interaction and [therefore do not count
+  towards Cumulative Layout Shift
+  (CLS)](/cls/#expected-vs-unexpected-layout-shifts). However,
+  for autoplay carousels, not only can these layout shifts potentially count
+  towards CLS - but they can also repeat indefinitely. Thus, it is particularly
+  important to verify that an autoplay carousel is not a source of layout
+  shifts.
+
+- **Scrolling:** Some carousels allow users to use scrolling to navigate through
+  carousel slides. If an element's start position changes but its scroll offset
+  (that is,
+  [`scrollLeft`](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft)
+  or
+  [`scrollTop`](https://developer.mozilla.org/docs/Web/API/Element/scrollTop))
+  changes by the same amount (but in the opposite direction) this is not
+  considered a layout shift provided that they occur in the same frame.
+
+For more information on layout shifts, see [Debug layout
+shifts](/debug-layout-shifts/#identifying-the-cause-of-a-layout-shift).
+
+
+### Use modern technology
+
+Many sites use [third-party JavaScript](/third-party-javascript) libraries to
+implement carousels. If you currently use older carousel tooling, you may be
+able to improve performance by switching to newer tooling. Newer tools tend to
+use more efficient APIs and are less likely to require additional dependencies
+like jQuery.
+
+
+However, depending on the type of carousel you are building, you may not need
+JavaScript at all. The new [Scroll
+Snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) API
+makes it possible to implement carousel-like transitions using only HTML and
+CSS.
+
+Here are some resources on using `scroll-snap` that you may find helpful:
+
+*   [Building a Stories component (web.dev)](/building-a-stories-component/)
+*   [Next-generation web styling: scroll snap (web.dev)](/next-gen-css-2019/#scroll-snap)
+*   [CSS-Only Carousel (CSS Tricks)](https://css-tricks.com/css-only-carousel/)
+*   [How to Make a CSS-Only Carousel (CSS Tricks)](https://css-tricks.com/how-to-make-a-css-only-carousel/)
+
+
+### Optimize carousel content
+
+Carousels often contain some of a site's largest images, so it can be worth your
+time to make sure that these images are fully optimized. Choosing the right
+image format and compression level, [using an image CDN](/image-cdns), and
+[using srcset to serve multiple image
+versions](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) are
+all techniques that can reduce the transfer size of images.
+
+
+## Performance measurement
+
+This section discusses LCP measurement as it relates to carousels. Although
+carousels are treated no differently than any other UX element during LCP
+calculation, the mechanics of calculating LCP for autoplaying carousels is a
+common point of confusion.
+
+
+### LCP measurement for carousels
+
+These are the key points to understanding how LCP calculation works for carousels:
+
+
+*   LCP considers page elements as they are painted to the frame. New candidates
+    for the LCP element are no longer considered once the user interacts (taps,
+    scrolls, or keypresses) with the page. Thus, any slide in an autoplaying
+    carousel has the potential to be the final LCP element—whereas in a static
+    carousel only the first slide would be a potential LCP candidate.
+*   If two equally sized images are rendered, the first image will be considered
+    the LCP element. The LCP element is only updated when the LCP candidate is
+    larger than the current LCP element. Thus, if all carousel elements are
+    equally sized, the LCP element should be the first image that is displayed.
+*   When evaluating LCP candidates, LCP considers the "[visible size or the
+    intrinsic size, whichever is smaller](/lcp)." Thus, if an autoplaying
+    carousel displays images at a consistent size, but contains images of
+    varying [intrinsic
+    sizes](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)
+    that are smaller than the display size, the LCP element may change as new
+    slides are displayed. In this case, if all images are displayed at the same
+    size, the image with the largest intrinsic size will be considered the LCP
+    element. To keep LCP low, you should ensure that all items in an autoplaying
+    carousel are the same intrinsic size.
+
+
+### Changes to LCP calculation for carousels in Chrome 88
+
+As of [Chrome
+88](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md),
+images that are later removed from the DOM are considered as potential largest
+contentful paints. Prior to Chrome 88, these images were excluded from
+consideration. For sites that use autoplaying carousels, this definition change
+will either have a neutral or positive impact on LCP scores.
+
+This change was made in response to the
+[observation](https://github.com/anniesullie/LCP_Examples/tree/master/removed_from_dom)
+that many sites implement carousel transitions by removing the previously
+displayed image from the DOM tree. Prior to Chrome 88, each time that a new
+slide was presented, the removal of the previous element would trigger an LCP
+update. This change only affects autoplaying carousels-by definition, potential
+largest contentful paints can only occur before a user first interacts with the
+page.
+
+
+## Other considerations
+
+This section discusses UX and product best practices that you should keep in
+mind when implementing carousels. Carousels should advance your business goals
+and present content in a way that is easy to navigate and read.
+
+
+### Navigation best practices
+
+
+#### Provide prominent navigation controls
+
+Carousel navigation controls should be easy to click and highly visible. This is
+something that is rarely done well-most carousels have navigation controls that
+are both small and subtle. Keep in mind that a single color or style of
+navigation control will rarely work in all situations. For example, an arrow
+that is clearly visible against a dark background might be difficult to see
+against a light background.
+
+
+#### Indicate navigation progress
+
+Carousel navigation controls should provide context about the total number of
+slides and the user's progress through them. This information makes it easier
+for the user to navigate to a particular slide and understand which content has
+already been viewed. In some situations providing a preview of upcoming
+content—whether it be an excerpt of the next slide or a list of thumbnails-can
+also be helpful and increase engagement.
+
+
+#### Support mobile gestures
+
+On mobile, swipe gestures should be supported in addition to traditional
+navigation controls (such as on screen buttons).
+
+
+#### Provide alternate navigation paths
+
+Because it's unlikely that most users will engage with all carousel content, the
+content that carousel slides link to should be accessible from other navigation
+paths.
+
+
+### Readability best practices
+
+
+#### Don't use autoplay
+
+The use of autoplay creates two almost paradoxical problems: on-screen
+animations tend to distract users and move the eyes away from more important
+content; simultaneously, because users often associate animations with ads, they
+will ignore carousels that autoplay.
+
+Thus, it's rare that autoplay is a good choice. If content is important, not
+using autoplay will maximize its exposure; if carousel content is not important,
+then the use of autoplay will detract from more important content. In addition,
+autoplaying carousels can be difficult to read (and annoying, too). People read
+at different speeds, so it's rare that a carousel consistently transitions at
+the "right" time for different users.
+
+
+Ideally, slide navigation should be user-directed via navigation controls. If
+you must use autoplay, autoplay should be disabled on user hover. In addition,
+the slide transition rate should take slide content into account-the more text
+that a slide contains, the longer it should be displayed on screen.
+
+
+#### Keep text and images separate
+
+Carousel text content is often "baked into" the corresponding image file, rather
+than displayed separately using HTML markup. This approach is bad for
+accessibility, localization, and compression rates. It also encourages a
+one-size-fits-all approach to asset creation. However, the same image and text
+formatting is rarely equally readable across desktop and mobile formats.
+
+
+#### Be concise
+
+You only have a fraction of a second to catch a user's attention. Short,
+to-the-point copy will increase the odds that your message gets across.
+
+
+### Product best practices
+
+Carousels work well in situations where using additional vertical space to
+display additional content is not an option. Carousels on product pages are
+often a good example of this use case.
+
+However, carousels are not always used effectively.
+
+
+*   Carousels, particularly if they contain promotions or advance automatically,
+    are easily [mistaken](https://www.nngroup.com/articles/auto-forwarding/) for
+    advertisements by users. Users tend to ignore advertisements—a phenomenon
+    known as [banner
+    blindness](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/).
+*   Carousels are often used to placate multiple departments and avoid making
+    decisions about business priorities. As a result, carousels can easily turn
+    into a dumping ground for ineffective content.
+
+
+#### Test your assumptions
+
+The business impact of carousels, particularly those on homepages, should be
+evaluated and tested. Carousel clickthrough rates can help you determine whether
+a carousel and its content is effective.
+
+
+#### Be relevant
+
+Carousels work best when they contain interesting and relevant content that is
+presented with a clear context. If content wouldn't engage a user outside of a
+carousel—placing it in a carousel won't make it perform any better. If you must
+use a carousel, prioritize content and ensure that each slide is sufficiently
+relevant that a user would want to click through to the subsequent slide.
diff --git a/src/site/content/en/blog/cds2021-updates/index.md b/src/site/content/en/blog/cds2021-updates/index.md
new file mode 100644
index 00000000000..2265d4ce4f8
--- /dev/null
+++ b/src/site/content/en/blog/cds2021-updates/index.md
@@ -0,0 +1,111 @@
+---
+layout: post
+title: Everything announced at Chrome Dev Summit 2021
+subhead: A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/gK7MVviHglsjJNEDG6Au.png
+alt: Chrome Dev Summit 2021
+authors:
+  - rachelandrew
+description: >
+  A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
+date: 2021-11-03
+tags:
+  - blog
+---
+
+{% YouTube "n57U2_-3NLQ" %}
+
+This post rounds up all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
+
+## Make the web more interoperable
+
+Web compatibility is one of the biggest challenges for web developers,
+and so Google has been working with other browser vendors to fix the top five compatibility pain points:
+[flexbox](/learn/css/flexbox/),
+[grid](/learn/css/grid/),
+`position: sticky`,
+[`aspect-ratio`](/aspect-ratio/),
+and [transforms](/learn/css/transitions/#transform).
+
+The work has already led to improvements in these key areas.
+You can read about those in the [Compat 2021 mid-year update](/compat2021-midyear/).
+
+{% Aside %}
+The Microsoft Edge team took on the work of rewriting CSS grid layout as part of the Compat 2021 effort.
+You can read about their work in the post
+[Compat2021: Improving CSS Grid compatibility with GridNG](https://blogs.windows.com/msedgedev/2021/08/10/compat2021-css-grid-gridng/).
+{% endAside %}
+
+## Allow new classes of applications to run on the web
+
+[Project Fugu](https://developer.chrome.com/blog/fugu-status/) is an effort that aims to allow new classes of applications to the web.
+You can keep up to date with progress on the Fugu APIs at [fugu-tracker.web.app](https://fugu-tracker.web.app/).
+
+Adobe recently announced that they are bringing Photoshop to the web,
+a feat made possible by collaboration between Adobe, Google, and web standards organizations.
+Find out more in the post [Photoshop's journey to the web](/ps-on-the-web/).
+
+## Ensure privacy
+
+Many common web functions rely on third-party cookies and other cross-site tracking mechanisms that weren’t designed with privacy in mind, making it difficult for developers to meet the growing need for privacy.
+
+We are working with the web community and industry stakeholders to develop new privacy-preserving technologies to support the ecosystem,
+with the aim to phase out third-party cookies and reduce covert tracking and browser fingerprinting.
+
+Find out about this work on the [Privacy Sandbox](https://privacysandbox.com/) site.
+We also have [information and guides to the proposals for developers](https://developer.chrome.com/docs/privacy-sandbox/),
+a [monthly update or changes and progress](https://developer.chrome.com/tags/progress-in-the-privacy-sandbox/),
+and information on the timeline and testing details for [changes to the user-agent string](https://goo.gle/user-agent-reduction).
+
+## Improve Core Web Vitals
+
+We've been working with the developers of popular JavaScript frameworks to improve Core Web Vitals,
+and as part of that work have identified two new metrics that we'd love your feedback on.
+Read about [overall responsiveness](/responsiveness/) and
+[smoothness](/smoothness/), then let us know what you think.
+
+{% Aside %}
+You can find out more on our collaboration with JavaScript frameworks in our post
+[Introducing Aurora](/introducing-aurora/).
+{% endAside %}
+
+Also announced is an updated version of [PageSpeed Insights](/whats-new-pagespeed-insights/),
+a new [Recorder Panel for Chrome DevTools](https://developer.chrome.com/docs/devtools/recorder/), currently available in Canary,
+and a new [user flow API for Lighthouse](/lighthouse-user-flows/).
+
+
+## Enable new web platform features
+
+RenderingNG is an ambitious refactoring of Chromium's rendering engine,
+a project that is fixing long standing bugs in Chrome, and also unlocking new features.
+This includes one feature that has been the top request from web developers for many years—[container queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries).
+
+Container queries look familiar to anyone who has ever used a media query to create a responsive design.
+However, inside of querying the viewport size, they allow you to query the size of the container your component is in.
+Google has been working on a trial implementation of the emerging specification, behind the `#enable-container-queries` flag in Chrome.
+
+Read a blog post covering
+[RenderingNG in detail](https://developer.chrome.com/blog/renderingng/),
+or watch [this video](https://www.youtube.com/watch?v=sUbJPHYKZkU)
+to get all the key details of how this work unlocks implementation of features that were once thought impossible to land.
+
+## Help you to create beautiful and responsive sites
+
+The [new responsive design](/new-responsive/) is so much more than just screen—or container—size.
+You can learn how to create modern responsive sites in our course
+[Learn Design](/learn/design/).
+The first five modules launch today, the rest will be posted over the coming weeks.
+
+New CSS properties have landed in Chrome and other browsers this year to make creating beautiful experiences easier.
+Find out more about [`accent-color`](/accent-color/) and [`size-adjust`](/css-size-adjust/).
+
+To help you quickly take advantage of new CSS, we have launched a set of [layout patterns](/patterns/layout/).
+These will give you a robust starting point for many common interface patterns.
+
+## Provide courses to help you learn web technology
+
+In addition to Learn Design, we are launching new modules for [Learn CSS](/learn/css/),
+our comprehensive CSS course launched earlier this year.
+
+We have also developed a complete course helping you to design functional and accessible forms—[Learn Forms](/learn/forms/).
+Along with these courses, you can find the first few modules of [Learn PWA](/learn/pwa/).
diff --git a/src/site/content/en/blog/centering-in-css/index.md b/src/site/content/en/blog/centering-in-css/index.md
new file mode 100644
index 00000000000..961e1e161c6
--- /dev/null
+++ b/src/site/content/en/blog/centering-in-css/index.md
@@ -0,0 +1,363 @@
+---
+layout: post
+title: Centering in CSS
+subhead: Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.
+authors:
+  - adamargyle
+description: Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.
+date: 2020-12-16
+hero: image/admin/uz0bDoJvK4kbtjozekGA.png
+alt: An element centered on a page.
+thumbnail: image/admin/4NFENgpVrXHi2O42mv0K.png
+codelabs: codelab-centering-in-css
+tags:
+  - blog
+  - css
+  - layout
+  - intl
+---
+
+Centering in CSS is a notorious challenge, fraught with jokes and mockery. 2020
+CSS is all grown up and now we can laugh at those jokes honestly, not through
+clenched teeth.
+
+If you prefer video, here's a YouTube version of this post:
+
+{% YouTube 'ncYzTvEMCyE' %}
+
+## The challenge
+
+**There are different types of centering.** From differing use cases, number of things
+to center, etc. In order to demonstrate a rationale behind "a winning" centering technique, I
+created The Resilience Ringer. It's a series of stress tests for each centering
+strategy to balance within and you to observe their performance.
+At the end, I reveal the highest scoring technique, as well as a "most valuable."
+Hopefully you walk away with new centering techniques and solutions.
+
+### The Resilience Ringer
+
+The Resilience Ringer is a representation of my beliefs that a centering
+strategy should be resilient to international layouts, variable sized viewports, text edits and dynamic
+content. These tenets helped shape the following resilience tests for the
+centering techniques to endure:
+
+1. **Squished:**
+centering should be able to handle changes to width
+1. **Squashed:**
+centering should be able to handle changes to height
+1. **Duplicate:**
+centering should be dynamic to number of items
+1. **Edit:**
+centering should be dynamic to length and language of content
+1. **Flow:**
+centering should be document direction and writing mode agnostic
+
+The winning solution should demonstrate its resilience by keeping contents in
+ center while being squished, squashed, duplicated, edited, and swapped to
+various language modes and directions. Trustworthy and resilient center, a safe center.
+
+#### Legend
+
+I've provided some visual color hinting to help you keep some meta information
+in context:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4K35cL1tVpEsGqb4FgKp.png", alt="", width="800", height="438" %}
+  <figcaption></figcaption>
+</figure>
+
+- A pink border indicates ownership of centering styles
+- The grey box is the background on the container which seeks to have centered
+   items
+- Each child has a white background color so you can see any effects the
+   centering technique has on child box sizes (if any)
+
+## The 5 Contestants
+5 centering techniques enter the Resilience Ringer, only one will receive the
+Resilience Crown 👸.
+
+### 1. Content Center
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/content-center-ringer-cycle.mp4">
+  </video>
+  <figcaption>
+    Editing and duplicating content with
+    <a href="https://github.com/GoogleChromeLabs/ProjectVisBug#visbug">VisBug</a>
+  </figcaption>
+</figure>
+
+1. **Squish**: great!
+2. **Squash**: great!
+3. **Duplicate**: great!
+4. **Edit**: great!
+5. **Flow**: great!
+
+It's going to be hard to beat the conciseness of `display: grid` and the
+`place-content` shorthand. Since it centers and justifies children collectively,
+it's a solid centering technique for groups of elements meant to be read.
+
+```css
+.content-center {
+  display: grid;
+  place-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">
+{% Compare 'better', 'Pros' %}
+- Content is centered even under constrained space and overflow
+- Centering edits and maintenance are all in one spot
+- Gap guarantees equal spacing amongst _n_ children
+- Grid creates rows by default
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+- The widest child (`max-content`) sets the width for all the rest. This will be
+  discussed more in [Gentle Flex](#gentle-flex).
+
+{% endCompare %}
+</div>
+
+**Great for** macro layouts containing paragraphs and headlines, prototypes, or
+generally things that need legible centering.
+
+{% Aside %} `place-content` is not exclusive to `display: grid`. `display: flex`
+can also benefit from `place-content` and `place-item`
+[shorthands](https://codepen.io/argyleink/pen/PoqWOPZ). {% endAside %}
+
+### 2. Gentle Flex
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gentle-flex-ringer-cycle.mp4">
+  </video>
+</figure>
+
+1. **Squish:** great!
+2. **Squash:** great!
+3. **Duplicate:** great!
+4. **Edit:** great!
+5. **Flow:** great!
+
+Gentle Flex is a truer centering-*only* strategy. It's soft and gentle, because
+unlike `place-content: center`, no children's box sizes are changed during the
+centering. As gently as possible, all items are stacked, centered, and spaced.
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">
+{% Compare 'better', 'Pros' %}
+- Only handles alignment, direction, and distribution
+- Edits and maintenance are all in one spot
+- Gap guarantees equal spacing amongst _n_ children
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+- Most lines of code
+
+{% endCompare %}
+</div>
+
+**Great for** both macro and micro layouts.
+
+{% Aside "key-term" %} **Macro layouts** are like states or territories of a
+  country: very high-level, large coverage zones. The zones created by macro
+  layouts tend to contain more layouts. The less surface the layout covers, the
+  less of a macro layout it becomes. As a layout covers less surface area or
+  contains less layouts, it becomes more of a micro layout. {% endAside %}
+
+### 3. Autobot
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/autobot-ringer-cycle.mp4">
+  </video>
+</figure>
+
+1. **Squish:** great
+2. **Squash:** great
+3. **Duplicate:** fine
+4. **Edit:** great
+5. **Flow:** great
+
+The container is set to flex with no alignment styles, while the direct children
+are styled with auto margins. There's something nostalgic and wonderful about
+`margin: auto` working on all sides of the element.
+
+```css
+.autobot {
+  display: flex;
+}
+.autobot > * {
+  margin: auto;
+}
+```
+
+<div class="switcher">
+{% Compare 'better', 'Pros' %}
+- Fun trick
+- Quick and dirty
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+- Awkward results when overflowing
+- Reliance on distribution instead of gap means layouts can occur with children
+  touching sides
+- Being "pushed" into position doesn't seem optimal and can result in a change
+  to the child's box size
+
+{% endCompare %}
+</div>
+
+**Great for** centering icons or pseudo-elements.
+
+### 4. Fluffy Center
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/fluffy-center-ringer-cycle.mp4">
+  </video>
+</figure>
+
+1. **Squish:** bad
+2. **Squash:** bad
+3. **Duplicate:** bad
+4. **Edit:** great!
+5. **Flow:** great! (so long as you use logical properties)
+
+Contestant "fluffy center" is by far our tastiest sounding contender, and is the only
+centering technique that's entirely element/child owned. See our solo inner pink
+border!?
+
+```css
+.fluffy-center {
+  padding: 10ch;
+}
+```
+
+<div class="switcher">
+{% Compare 'better', 'Pros' %}
+- Protects content
+- Atomic
+- Every test is secretly containing this centering strategy
+- Word space is gap
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+- Illusion of not being useful
+- There's a clash between the container and the items, naturally since each are
+  being very firm about their sizing
+
+{% endCompare %}
+</div>
+
+**Great for** word or phrase-centric centering, tags, pills, buttons, chips, and
+more.
+
+### 5. Pop & Plop
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/popnplop-ringer-cycle.mp4">
+  </video>
+</figure>
+
+1. **Squish:** okay
+2. **Squash:** okay
+3. **Duplicate:** bad
+4. **Edit:** fine
+5. **Flow:** fine
+
+This "pops" because the absolute positioning pops the element out of normal
+flow. The "plop" part of the names comes from when I find it most useful:
+plopping it on top of other stuff. It's a classic and handy overlay centering
+technique that's flexible and dynamic to content size. Sometimes you just need
+to plop UI on top of other UI.
+
+<div class="switcher">
+{% Compare 'better', 'Pros' %}
+- Useful
+- Reliable
+- When you need it, it’s invaluable
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+- Code with negative percentage values
+- Requires `position: relative` to force a containing block
+- Early and awkward line breaks
+- There can be only 1 per containing block without additional effort
+
+{% endCompare %}
+</div>
+
+**Great for** modals, toasts and messages, stacks and depth effects, popovers.
+
+## The winner
+
+If I was on an island and could only have 1 centering technique, it would be…
+
+[drum roll]
+
+**Gentle Flex** 🎉
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+You can always find it in my stylesheets because it's useful for both macro and
+micro layouts. It's an all-around reliable solution with results that match my
+expectations. Also, because I'm an intrinsic sizing junkie, I tend to graduate
+into this solution. True, it's a lot to type out, but the benefits it provides
+outweighs the extra code.
+
+### MVP
+
+**Fluffy Center**
+
+```css
+.fluffy-center {
+  padding: 2ch;
+}
+```
+
+Fluffy Center is so micro that it's easy to overlook as a centering technique,
+but it's a staple of my centering strategies. It's so atomic that sometimes I
+forget I'm using it.
+
+### Conclusion
+
+What types of things break your centering strategies? What other challenges
+could be added to the resilience ringer? I considered translation and an
+auto-height switch on the container… what else!?
+
+Now that you know how I did it, how would you?! Let's diversify our approaches
+and learn all the ways to build on the web. Follow the codelab with this post to
+create your own centering example, just like the ones in this post. [Tweet
+me](https://twitter.com/argyleink) your version, and I'll add it to the
+[Community remixes](#community-remixes) section below.
+
+## Community remixes
+
+- [CSS Tricks](https://css-tricks.com/) with a [blog post](https://css-tricks.com/centering-in-css/)
diff --git a/src/site/content/en/blog/choosing-the-right-easing/index.md b/src/site/content/en/blog/choosing-the-right-easing/index.md
new file mode 100644
index 00000000000..1d3bd5ac292
--- /dev/null
+++ b/src/site/content/en/blog/choosing-the-right-easing/index.md
@@ -0,0 +1,43 @@
+---
+layout: post
+title: Choosing the right easing
+subhead: Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
+authors:
+  - paullewis
+date: 2014-08-08
+updated: 2018-09-20
+description: Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+Having discussed the various options available for easing in animations, what kind should you use in your projects, and what kind of durations should your animations have?
+
+### Summary
+* Use ease-out animations for UI elements; a Quintic ease-out is a very nice, albeit quick, ease.
+* Be sure to use the animation duration; ease-outs and ease-ins should be 200ms-500ms, whereas bounces and elastic eases should clock in a longer duration of 800ms-1200ms.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dnk1t7HFI8g3zNiZw2gC.png", alt="A Quintic ease-out animation curve.", width="640", height="600" %}
+</figure>
+
+Generally speaking, an **ease-out** will be the right call, and certainly a good default. It is quick to start, giving your animations a feeling of responsiveness, which is desirable, but with a nice slowdown at the end.
+
+There is a group of well-known ease-out equations beyond the one specified with the `ease-out` keyword in CSS, which range in their "aggressiveness." For a fast ease-out effect, consider a [Quintic ease-out](http://easings.net/#easeOutQuint).
+
+
+[See a Quintic ease-out animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-quintic-ease-out.html)
+
+Other easing equations, particularly bounces or elastic eases, should be used sparingly, and only when it’s appropriate to your project. There are few things that bring a user out of an experience like a jarring animation. If your project isn’t intended to be fun, then don’t have elements bouncing around the UI. Conversely, if you’re creating a site that is supposed to be lighthearted, then by all means use bounces!
+
+Play around with eases, see which ones match your project’s personality, and go from there. For a full list of easing types, along with demos, see [easings.net](http://easings.net).
+
+## Pick the right animation duration
+
+It is important that any animation added to your project has the correct duration. Too short and the animation will feel aggressive and sharp; too long and it will be obstructive and annoying.
+
+* **Ease-outs: around 200ms-500ms**. This gives the eye a chance to see the animation, but it doesn’t feel obstructive.
+* **Ease-ins: around 200ms-500ms**. Bear in mind that it will jolt at the end, and no amount of timing changes will soften that impact.
+* **Bounce or elastic effects: around 800ms-1200ms**. You need to allow time for the elastic or bounce effect to "settle." Without this extra time, the elastic bouncing part of the animation will be aggressive and unpleasant to the eye.
+
+Of course, these are just guidelines. Experiment with your own eases and choose what feels right for your projects.
diff --git a/src/site/content/en/blog/chrome-dev-summit/index.md b/src/site/content/en/blog/chrome-dev-summit/index.md
new file mode 100644
index 00000000000..eb2b0f27e9f
--- /dev/null
+++ b/src/site/content/en/blog/chrome-dev-summit/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Chrome Dev Summit 2014
+description: |
+  The Chrome Dev Summit 2014 website was built in-house by our own Paul Lewis, the CDS website showed how to build a great mobile web experience for conference visitors.
+date: 2015-03-27
+updated: 2020-07-24
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bY2BFji9mpdAGR9WysUK.png", alt="Chrome Dev Summit 2014 website screenshot", width="800", height="1570" %}
+</figure>
+
+Built in-house by our own Paul Lewis, the CDS website showed how to build a
+great mobile web experience for conference visitors.
+
+### Behind the scenes
+
+Remarkable is the smoothness at which the site runs in various mobile browsers.
+It's utilizing the layout and paint cycles of the browser in the best way
+possible.
+
+New web platform features used
+
+- Service Worker
+- Manifest
+- Theme Color
+
+Patterns
+
+- Expending cards
+- Responsive grid
+- Material Design
+
+Source Code
+
+- [GitHub](https://github.com/GoogleChrome/devsummit)
+
+## The Interview
+
+{% YouTube id="VjCCwplpLAo" %}
+
+## Development
+
+When Paul set out to built the site, a key priority was to embrace
+[Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement).
+Instead of designing for desktop, he built it for for small screens first,
+then build up to larger screens – progressively enhancing, instead of
+gracefully degrading. That required a bunch of media queries, but but also a
+fair bit of freedom to eyeball small changes between the key breakpoints.
+Tracking back and forth between screen sizes gave him a sense of where content
+would break, so he could quickly fix it.
+
+Another important aspect of PE is being as backwards-compatible as possible.
+Paul chose to use floats over Flexbox because he felt it would increase the
+number of browsers that the site would work on. For the specific layout of the
+site, this turned out to be no problem at all. If he needed Flexbox he would’ve
+used PE to add it on.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/A8NGX89GXm6fQ8TZX52K.jpg", alt="FLIP is taking advantage of user's perception by prioritizing the animation.", width="600", height="338" %}
+  <figcaption>
+    FLIP is taking advantage of user's perception by prioritizing the animation.
+  </figcaption>
+</figure>
+
+A major challenge of the site was the card expand and collapse feature, which
+required thinking up a whole new way to do the animations work. Paul came up
+with a strategy he calls [FLIP](https://aerotwist.com/blog/flip-your-animations),
+which involves **setting animating elements to their final state**. From there,
+you apply compositor-friendly properties like transforms and opacity to invert
+the changes and return the element to its start position. Finally, with that
+done, enable transitions on transforms and opacity, and remove those changes.
+This causes the elements to move to their final positions once more! Paul
+admits it’s a little unexpected, but it works super well and gives you a
+performance boost.
+
+## Performance
+
+Knowing Paul Lewis as the performance guru he is, I wasn't surprised to
+find out that powerformance was a super important consideration when building
+the site. He heavily relied on [WebPageTest](https://webpagetest.org) to get
+the *Speed Index* value as low as he could. Without the YouTube embed, Paul
+managed to get it to **less than 1,000 on a cable connection**, which meant
+that most of the users would get an initial render in **under a second**.
+
+Most of the work to achieve this was done in Grunt tasks to concatenate,
+minify, and compress images as much as possible. The site also defers
+non-essential images to after page load so that actual content is rendered
+to screen more quickly.
+
+To make the page load time even better, Paul dropped in a
+[service worker](http://www.html5rocks.com/tutorials/service-worker/introduction).
+With it, whether you are online or not, a page visit can be served up from
+cache, ensuring that you get to the content even on spotty connectivity
+(extremely important when on conference WiFi!). The CDS site is one of the
+first production sites to use the new feature, which had Paul run into a bunch
+of “early adopter issues”, but the huge performance boost, he told me, made
+up for it. In fact, he's now taking it to every site he builds!
+
+Performance, of course, isn’t just how well a site loads, but also how well it
+runs. Paul knew the animations were going to be a challenge, which is why he
+came up with [FLIP](https://aerotwist.com/blog/flip-your-animations). Besides
+that, he went out of his way to ensure that nothing got in the way of touch
+input or scrolling. Despite the fact that the site isn’t a hugely complex one,
+he adopted a modified [RAIL methodology](https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail)
+for the build (he didn’t really need much Idle time), and it helped a bunch!
+
+## Design
+
+Since the site was forged by a single person, it meant that Paul was both the
+designer and developer on the project, resulting in unprecedented levels of
+understanding regarding each others’ concerns in the two 'teams'. He likes to
+design desktop down (the opposite of progressive enhancement, which he used
+during development), because it gives him a sense of what needs to go into
+the project. Afterwards Paul drops down to the mobile view, which allows him
+to refine things significantly, and make sure that the most important things
+are getting the most attention. That then informs the Desktop version, because
+invariably information architecture and priority will need updating.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NL3K3cUNWktvbi10qV3P.jpg", alt="Design problem", width="800", height="1353" %}
+</figure>
+
+Not all of it went smoothly. The [Material Design guidelines](https://www.google.com/design/spec/material-design/introduction.html)
+at the time weren’t clear about how to make a content site, so there were areas
+where he fell short. The design also failed to account for the schedule and
+session information being related, and in the end, the UX meant that people
+would go to the schedule and be frustrated that they couldn’t get straight to
+the session information.
+
+That being said said, I think Paul did a tremendous job of transporting the
+Material Design spec to a content site. and I’m really pleased with the visuals
+and motion. It has that unique Material Design feel to it, and the information
+and look encourages interaction and hierarchy.
+
+## Success
+
+- Successfully released the entire site on
+[Github](https://github.com/googlechrome/devsummit) (**&gt; 200 stars**) to
+serve as **boilerplate and inspiration to web developers**.
+- Incorporated the latest and greatest of the web platform: **service worker,
+web manifest and dynamic theme colors**. The net effect is something that feels
+really integrated with the platform when run on Android devices. If added to
+the user’s home screen, it feels very much like an app they would use, and
+that’s really cool.
+- **~73.7k** page views, **180k** clicks to site subsections meant that people
+actually used and engaged with it, much more than expected.
+
+All in all, a great inspiration for today's web developers and a very
+successful conference website.
diff --git a/src/site/content/en/blog/chrome-firefox-100/index.md b/src/site/content/en/blog/chrome-firefox-100/index.md
new file mode 100644
index 00000000000..8e7d9819d73
--- /dev/null
+++ b/src/site/content/en/blog/chrome-firefox-100/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Chrome and Firefox soon to reach major version 100
+subhead: User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.
+authors:
+ - abeyad
+ - karldubost
+ - mihajlija
+date: 2022-02-15
+hero: "image/VbsHyyQopiec0718rMq2kTE1hke2/5NqnziyOJnb5h5NWNY1a.jpg"
+alt: Chrome and Firefox logos.
+description: |
+ User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.
+tags:
+ - blog # blog is a required tag for the article to show up in the blog.
+---
+ 
+[Chrome](https://developer.chrome.com/blog/force-major-version-to-100/)
+and [Firefox](https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready)
+will reach version 100 in a couple of months. This has the potential to cause breakage
+on sites that rely on identifying the browser version to perform business logic.
+This post covers the timeline of events, the strategies that Chrome and Firefox are
+taking to mitigate the impact, and how you can help.
+ 
+## User-Agent string
+ 
+User-Agent (UA) is a string that browsers send in HTTP headers, so servers can
+identify the browser.  The string is also accessible through JavaScript with
+[`navigator.userAgent`](https://developer.mozilla.org/docs/Web/API/Navigator/userAgent).
+It's usually formatted as follows:
+ 
+`<browser_name>/<major_version>.<minor_version>`
+ 
+For example, the latest release versions of browsers at the time of publishing
+this post are:
+ 
++   Chrome: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
+   (KHTML, like Gecko) Chrome/94.0.4606.54 Safari/537.36`
++   Firefox: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0)
+   Gecko/20100101 Firefox/96.0`
++   Safari: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
+   AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15`
+ 
+## Major version 100—three-digit version number
+ 
+Major version 100 is a big milestone for both Chrome and Firefox. It also has
+the potential to cause breakage on websites as we move from a two-digit to a
+_three-digit version number_.  Web developers use all kinds of techniques for
+parsing these strings, from custom code to using User-Agent parsing libraries,
+which can then be used to determine the corresponding processing logic. The
+User-Agent and any other version reporting mechanisms will soon report a
+three-digit version number.
+ 
+### Version 100 timelines
+ 
+Version 100 browsers will be first released in experimental versions (Chrome
+Canary, Firefox Nightly), then beta versions, and then finally on the stable
+channel.
+ 
+<table>
+<thead>
+<tr>
+<th>Browser</th>
+<th>Timeline</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Chrome (<a href="https://chromiumdash.appspot.com/schedule">release
+schedule</a>)</td>
+<td>March 29, 2022</td>
+</tr>
+<tr>
+<td>Firefox (<a
+href="https://wiki.mozilla.org/Release_Management/Calendar">release
+schedule</a>)</td>
+<td>May 3, 2022</td>
+</tr>
+</tbody>
+</table>
+ 
+## Why can a three-digit version number be problematic?
+ 
+When browsers first reached version 10 a little over 12 years ago,
+[many issues were discovered](https://maqentaer.com/devopera-static-backup/http/dev.opera.com/articles/view/opera-ua-string-changes/index.html)
+with User-Agent parsing libraries as the major version number went from one
+digit to two. 
+ 
+Without a single specification to follow,
+[different browsers have different formats](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent)
+for the User-Agent string, and site-specific User-Agent parsing. It's
+possible that some parsing libraries may have hard-coded assumptions or bugs
+that don't take into account three-digit major version numbers.  Many libraries
+improved the parsing logic when browsers moved to two-digit version numbers, so
+hitting the three-digit milestone is expected to cause fewer problems. [Mike
+Taylor](https://miketaylr.com/posts/2021/09/chrome-version-100-testing.html),
+an engineer on the Chrome team, has done a survey of common UA parsing
+libraries which didn't uncover any issues. Running Chrome experiments in the
+field has surfaced some issues, which are being worked on.
+ 
+## What are browsers doing about it?
+ 
+Both Firefox and Chrome have been running experiments where current versions of
+the browser report being at major version 100 in order to detect possible
+website breakage. This has led to a few [reported issues](https://github.com/webcompat/web-bugs/labels/version100),
+some of which have already been [fixed](https://bugs.chromium.org/p/chromium/issues/detail?id=1273958).
+These experiments will continue to run until the release of version 100.
+ 
+There are also backup mitigation strategies in place, in case version 100
+release to stable channels causes more damage to websites than anticipated.
+ 
+### Chrome mitigation
+ 
+In Chrome, the backup plan is to use a flag to freeze the major version at 99
+and report the real major version number in the minor version part of the
+User-Agent string (the code has already
+[landed](https://chromium-review.googlesource.com/c/chromium/src/+/3341658)). 
+ 
+The Chrome version as reported in the User-Agent string follows the pattern
+`<major_version>.<minor_version>.<build_number>.<patch_number>`. 
+ 
+If the backup plan is employed, then the User-Agent string would look like
+this:
+ 
+`99.101.4988.0`
+ 
+Chrome is also running experiments to ensure that reporting a three-digit value
+in the minor version part of the string does not result in breakage, since the
+minor version in the Chrome User-Agent string has reported 0 for a very long
+time. The Chrome team will decide on whether to resort to the backup option
+based on the number and severity of the issues reported.
+ 
+### Firefox mitigation
+ 
+In Firefox, the strategy will depend on how important the breakage is. Firefox
+has a
+[site interventions mechanism](https://wiki.mozilla.org/Compatibility/Interventions_Releases).
+Mozilla webcompat team can hot fix broken websites in Firefox using this
+mechanism. If you type ``about:compat`` in the Firefox URL bar, you can see what
+is currently being fixed. If a site breaks with the major version being 100 on a
+specific domain, it is possible to fix it by sending version 99 instead.
+ 
+If the breakage is widespread, it is possible to freeze the major version
+number. There are then different possible strategies, each of them with their
+pros and cons. Mozilla can send the real version number as a minor version
+number, freeze the string entirely as-is, or send the real version number
+through other parameters.
+ 
+Every strategy that adds complexity to the User-Agent string has a strong
+impact on the ecosystem. Let's work together to avoid yet another quirky
+behavior.
+ 
+## What can you do to help?
+ 
+In Chrome and Firefox Nightly, you can configure the browser to report the
+version as 100 right now and report any issues you come across.
+ 
+### Configure Chrome to report the major version as 100
+ 
+1.  Go to `chrome://flags/#force-major-version-to-100`.
+1.  Set the option to `Enabled`.
+ 
+### Configure Firefox Nightly to report the major version as 100
+ 
+1.  Open Firefox Nightly's Settings menu.
+1.  Search for "Firefox 100" and then check the "Firefox 100 User-Agent
+   String" option.
+ 
+### Test and file reports
+ 
++   **If you are a website maintainer**, test your website with Chrome
+   and Firefox 100. Review your User-Agent parsing code and libraries, and
+   ensure they are able to handle three-digit version numbers. We have
+   compiled some of the
+   [patterns that are currently breaking](https://www.otsukare.info/2022/01/14/broken-ua-detection).
++   **If you develop a User-Agent parsing library**, add tests to parse
+   versions greater than and equal to 100. Our early tests show that recent
+   versions of libraries can handle it correctly. However, the web has a long legacy,
+   so if you have old versions of parsing libraries, it's
+   time to check for issues and eventually upgrade.
++   **If you are browsing the web** and notice any issues with the major
+   version 100,
+   [file a report on webcompat.com](https://webcompat.com/issues/new?label=version100).
\ No newline at end of file
diff --git a/src/site/content/en/blog/click-to-call/index.md b/src/site/content/en/blog/click-to-call/index.md
new file mode 100644
index 00000000000..34debde43f5
--- /dev/null
+++ b/src/site/content/en/blog/click-to-call/index.md
@@ -0,0 +1,86 @@
+---
+layout: post
+title: Click to Call
+description: >
+  On devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a phone number, more commonly known as click to call.
+authors:
+  - petelepage
+date: 2014-06-17
+updated: 2019-07-26
+---
+
+On devices with phone capabilities, make it easy for users to directly connect
+with you by simply tapping a phone number, more commonly known as click to call.
+
+## Summary
+
+- Wrap all phone numbers in hyperlinks with the <code>tel:</code> schema.
+- Always use the international dialing format.
+
+## Link telephone numbers for click to call
+
+While many modern mobile browsers automatically detect phone numbers
+and convert them to links, it’s a good idea to do this directly in your code.
+By manually tagging each phone number, you can ensure that phone numbers are always
+enabled for click to call and that they will be styled to match your site.
+
+To mark a phone number as a link, use the `tel:` scheme. The syntax is
+simple:
+
+```html
+NIST Telephone Time-of-Day Service
+<a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>
+```
+
+Your browser displays this syntax as follows:
+
+NIST Telephone Time-of-Day Service <a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/SzyqOLvdN3jeZkRHJjai.jpeg", alt="Click to call example", width="320", height="600" %}
+  <figcaption>Click to call example</figcaption>
+</figure>
+
+On most devices with telephone capabilities, the user receives a
+confirmation before the number is dialed, to ensure that the user isn't being
+tricked into calling an expensive long distance or premium phone number.
+When the device doesn’t support phone calls, users may be presented with a
+menu allowing them to choose how the browser should handle the number.
+
+Desktop browsers that don’t support voice calls open the default
+telephony app on the computer; for example Google Voice or Microsoft
+Communicator.
+
+## Use the international dialing format
+
+Always supply the phone number using the international dialing format:
+the plus sign (`+`), country code, area code, and number. While not absolutely
+necessary, it’s a good idea to separate each segment of the number with a
+hyphen (`-`) for easier reading and better auto-detection.
+
+Using a hyphenated international dialing format ensures that no matter where
+the user is calling from, whether a few hundred meters away or thousands
+of kilometers, their call will be connected.
+
+## Disable auto-detection when necessary
+
+Modern mobile browsers automatically detect phone numbers and enable
+click to call. Mobile Safari automatically converts phone numbers to links
+with the associated hyperlink styles. Chrome for Android automatically
+detects phone numbers and allows users to click to call, but does not wrap
+the phone numbers in hyperlinks or apply any special styles.
+
+To prevent Mobile Safari from automatically detecting phone numbers, add the
+following meta tag to your page:
+
+```html
+<meta name="format-detection" content="telephone=no" />
+```
+
+## Other click to call features
+
+In addition to the `tel:` schema, some modern browsers also support the `sms:`
+and `mms:` schemas, though support is not as consistent, and some
+features like setting the message body don't always work.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/clipchamp/index.md b/src/site/content/en/blog/clipchamp/index.md
new file mode 100644
index 00000000000..236b55217a8
--- /dev/null
+++ b/src/site/content/en/blog/clipchamp/index.md
@@ -0,0 +1,149 @@
+---
+layout: post
+title: Clipchamp's video editor PWA installs see a 97% monthly growth
+subhead: >
+  How PWAs, WebAssembly, and ChromeOS are helping a web-based video editor
+  deliver better performance and a more engaging experience to 12M users.
+date: 2020-12-08
+updated: 2022-02-10
+hero: image/admin/i9GBgCAOS5eWVBXvOT84.jpg
+thumbnail: image/admin/1tHJ6FI8tOIIgRocFkCm.jpg
+alt: Clipchamp's logo.
+description: >
+  How PWAs, WebAssembly, and ChromeOS are helping a web-based video editor
+  deliver better performance and a more engaging experience to 12M users.
+tags:
+  - blog
+  - case-study
+  - progressive-web-apps
+authors:
+  - sorenbalko
+---
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">97<sub>%</sub></p>
+    <p>Monthly growth in PWA installations</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">2.3<sub>x</sub></p>
+    <p>Performance improvement</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">9<sub>%</sub></p>
+    <p>Higher retention in PWA users</p>
+  </div>
+</div>
+
+Clipchamp is the in-browser online [video
+editor](https://clipchamp.com/en/video-editor/) that empowers anyone to tell
+stories worth sharing through video. Around the world, over 12 million creators
+use Clipchamp to easily edit videos. We offer simple solutions for making videos,
+from intuitive tools like crop and trim, to practical features like our screen
+recorder, and even a [meme maker](https://clipchamp.com/en/video-meme-generator/).
+
+## Who uses Clipchamp?
+
+Our users (or everyday editors as we call them) are diverse. No expertise is
+necessary to be a video editor with Clipchamp. Specifically, we're currently
+noticing sales, support training, and product marketing teams using our webcam
+and screen recorder for quick explainer content with added text and GIFs to make
+it engaging. We're also observing a lot of small businesses edit and post social
+videos while on the move.
+
+### What challenges do they face?
+
+We recognise that video editing can be intimidating at first. The assumption is
+that it's hard, probably due to previous frustrating experiences with complex
+editing software. In contrast, Clipchamp focuses on ease and simplicity,
+providing support with text overlays, stock video and music, templates, and
+more.
+
+We find most everyday editors aren't wanting to create motion picture
+masterpieces. We talk to our users a lot and are continually reminded that
+they're busy and just want to get their story out to the world as quickly and
+easily as possible, so this is a focus for us.
+
+## Developing a Clipchamp PWA
+
+At Clipchamp, we're all about empowering people to tell their stories through
+video. To live up to this vision, we soon realised that allowing our users to
+use their own footage when putting together a video project is important.
+
+That insight put the pressure on Clipchamp's engineering team to come up with a
+technology that can efficiently process Gigabyte-scale media files in a web
+application. Having network bandwidth constraints in mind, we were quick to rule
+out a traditional cloud-based solution. Uploading large media files from a
+retail internet connection would invariably introduce massive wait times
+before editing could even begin, effectively resulting in a poor user
+experience.
+
+That made us switch to a fully in-browser solution, where all the "heavy
+lifting" of video processing is done locally using hardware resources available
+on the end user's device. We strategically bet on the Chrome browser and, by
+extension, the ChromeOS platform to help us overcome the inevitable challenges
+of building an in-browser video creation platform.
+
+Video processing is enormously resource hungry, affecting computer and storage
+resources alike. We started out building the first version of Clipchamp on top
+of Google's (Portable) Native Client (PNaCl). While eventually phased out, PNaCl
+was a great confirmation for our team that web apps can be fast and low latency,
+while still running on end user hardware.
+
+When later switching to WebAssembly, we were glad to see Chrome taking the lead
+in incorporating post-MVP features such as bulk memory operations, threading,
+and most recently: fixed-width vector operations. The latter has been hotly
+anticipated by our engineering team, offering us the ability to optimize our
+video processing stack to take advantage of [SIMD](https://v8.dev/features/simd)
+operations, prevalent on contemporary CPUs. Taking advantage of Chrome's
+WebAssembly SIMD support, we were able to speed up some particularly demanding
+workloads such as 4K video decoding and video encoding.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9NFi12YDG360SlfMl1OP.png", alt="Encoder performance (1080p, 8.33 sec @ 30 fps). Default preset without SIMD: 25 seconds. Default preset with SIMD: ~13 seconds. Compression preset without SIMD: ~83 seconds. Compression preset with SIMD: ~33 seconds. Quality preset (new!) without SIMD: ~75 seconds. Quality preset with SIMD: ~30 seconds.", width="800", height="495" %}
+
+With little prior experience and in less than a month of effort for one of our
+engineers, we managed to improve performance by 2.3x. While still limited to a
+Chrome origin trial, we were already able to roll out these SIMD enhancements to
+the majority of our users. While our users run wildly different hardware setups,
+we were able to confirm a matching performance uplift in production without
+seeing any detrimental effects in failure rates.
+
+More recently, we integrated the emerging WebCodecs API, currently available
+under another Chrome origin trial. Using this new capability, we will be able to
+further improve performance of video decoding on low-spec hardware as found
+in many popular Chromebooks.
+
+With a PWA created, it's important to encourage its adoption. As with many web
+apps, we've focused on ease of access which includes things like social logins
+including Google, quickly getting the user into a place where they can edit
+video and then making it easy to export the video. Additionally, we promoted
+our PWA install prompts in the toolbar and as a pop-up notice in our menu
+navigation.
+
+## Results
+
+Our installable Chrome PWA has been doing really well. We've been so pleased to
+see 9% higher retention with PWA users than with our standard desktop users.
+Installation of the PWA has been massive, increasing at a rate of 97% a month
+since we launched five months ago. And, as mentioned before, the WebAssembly
+SIMD enhancements improved performance 2.3x.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MR7YUGQ4r99r3oG4w0Jx.png", alt="June 2020: ~1K installs. July 2020: ~5K installs. August 2020: ~12K installs. September 2020: ~20K installs. October 2020: ~30K installs.", width="800", height="266" %}
+  <figcaption>
+    Clipchamp PWA installs over the last 6 months.
+  </figcaption>
+</figure>
+
+## Future
+
+We're pleasantly surprised by the engagement and uptake of our PWA. We think
+Clipchamp user retention benefited because the PWA is installed and easier to
+get to. We also noted the PWA performs better for the editor, which makes it
+more compelling and keeps people coming back.
+
+Looking to the future, we're excited about the opportunity ChromeOS provides
+for even more users to get more done with less fuss. Specifically, we're excited
+about some of the convenience integrations with the local OS when working with
+files. We think this will help speed up workflows for our busy everyday editors,
+and that's one of our highest priorities.
diff --git a/src/site/content/en/blog/cls-web-tooling/index.md b/src/site/content/en/blog/cls-web-tooling/index.md
new file mode 100644
index 00000000000..cdc707a73d7
--- /dev/null
+++ b/src/site/content/en/blog/cls-web-tooling/index.md
@@ -0,0 +1,255 @@
+---
+layou: post
+title: Evolving Cumulative Layout Shift in web tooling
+subhead: >
+  Starting today,
+  a change to CLS has been rolled out across a number of Chrome's web tooling surfaces including
+  Lighthouse, PageSpeed Insights, and Chrome UX Report.
+date: 2021-06-02
+updated: 2022-07-18
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/ENrTmCSZl69N9gmf0twL.jpeg
+alt: The Lighthouse Scoring Calculator
+description: >
+  Starting today,
+  a change to CLS has been rolled out across a number of Chrome's web tooling surfaces including
+  Lighthouse, PageSpeed Insights, and Chrome UX Report.
+tags:
+  - blog
+  - web-vitals
+  - lighthouse
+  - chrome-ux-report
+authors:
+  - addyosmani
+  - egsweeny
+---
+
+Today we would like to share how we are evolving measurement of the
+[Cumulative Layout Shift](/cls) (CLS)
+metric across a number of Chrome's web tooling surfaces.
+For developers, these changes will better reflect the user-experience for
+[long-lived pages](/evolving-cls/)
+(such as those with infinite scroll or single-page apps).
+These updates to CLS will be rolling out to tools including Lighthouse,
+PageSpeed Insights, and Chrome UX Report.
+
+We all wish we saw fewer layout shifts on the web.
+This is where the CLS metric has proved useful in measuring the visual stability of a web page.
+It helps to encourage sites to better set dimensions for content,
+such as images or ads,
+that may contribute to surprising jumps of content for their users.
+
+The metric is named "cumulative"
+because the score of each individual shift is summed throughout the lifespan of a page.
+While all layout shifts on the web cause poor user experiences,
+long-lived pages like Single-Page Apps (SPAs) or infinite scroll apps naturally accumulate more CLS over time.
+By capping the aggregation to the worst 'window' of shifts,
+CLS can now be more consistently measured regardless of session duration.
+
+As we announced in [Evolving the CLS metric](/evolving-cls/), we are adjusting the CLS metric to a
+[maximum session window with a 1 second gap, capped at 5 seconds](/evolving-cls/),
+this update better reflects the user experience for long lived pages.
+With this change in place,
+70% of origins should not expect to see any CLS change at the 75th percentile,
+and the remaining 30% of origins will see an improvement.
+
+## Rolling out the windowing adjustment to CLS
+
+We've talked about the updated CLS definition being a max session window with a 1 second gap,
+capped at 5 seconds. What does that mean for tools?
+
+Starting today,
+this change to CLS has been rolled out across a number of Chrome's web tooling surfaces including
+Lighthouse, PageSpeed Insights, and Chrome UX Report.
+Below you can see a summary of the CLS windowing adjustment rollout,
+as well as which tools still provide the ability to benchmark against the original implementation.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Tool</th>
+        <th>CLS windowing adjustment  'live'</th>
+        <th>"Old" CLS Availability</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Lighthouse DevTools Panel</td>
+        <td>Canary channel, 2 June 2021</td>
+        <td>N/A</td>
+      </tr>
+      <tr>
+        <td><a href="https://developers.google.com/web/tools/lighthouse#cli">
+        Lighthouse CLI</a></td>
+        <td>v8, released 1 June 2021</td>
+        <td>Available as totalCumulativeLayoutShift in Lighthouse v8</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/lighthouse-ci">Lighthouse CI</a></td>
+        <td>v0.7.3, 3 June 2021</td>
+        <td>N/A</td>
+      </tr>
+      <tr>
+        <td><a href="https://developers.google.com/speed/pagespeed/insights/">
+        PageSpeed Insights</a> (PSI)</td>
+        <td>1 June 2021</td>
+        <td>NA</td>
+      </tr>
+      <tr>
+        <td><a href="https://developers.google.com/speed/docs/insights/v5/get-started">
+        PSI API</a></td>
+        <td>1 June 2021</td>
+        <td>Available in the <code>lighthouseResult</code> as <code>totalCumulativeLayoutShift</code>. Not available in the field <code>loadingExperience</code> data</td>
+      </tr>
+      <tr>
+        <td><a href="/chrome-ux-report-bigquery/">
+        Chrome UX Report (CrUX) - BigQuery</a></td>
+        <td>202105 dataset, published 8 June 2021</td>
+        <td>Available as <code>experimental.uncapped_cumulative_layout_shift</code> through 202111</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/crux/api/">
+        Chrome UX Report (CrUX) - API</a></td>
+        <td>1 June 2021</td>
+        <td>After 1 June 2021, available as
+        <code>experimental_uncapped_cumulative_layout_shift</code>
+        December 14th, 2021</td>
+      </tr>
+      <tr>
+    </tbody>
+  </table>
+</div>
+
+Chrome DevTools will also be updated to support the windowing adjustment shortly. The update to CLS has also been made to [Search Console](https://search.google.com/search-console/about) and will be reflective from 1 June, 2021.
+
+For most developers,
+this change is expected to happen seamlessly with no action needed to take advantage of data from the fix.
+
+
+## "Old" CLS
+
+As a reminder, the "old" CLS measures layout shift over the entire lifespan of the page. As some developers may wish to monitor the older definition of CLS alongside the windowing-adjustment,
+we have good news to share: we are exposing "old CLS" in Lighthouse and CrUX.
+
+In Lighthouse v8,
+it's available in the JSON as
+`audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift`.
+
+You'll find it as
+`experimental_uncapped_cumulative_layout_shift`
+in the CrUX API and as
+`experimental.uncapped_cumulative_layout_shift` in CrUX BigQuery.
+
+After June 1st, CrUX API requests will return the "old CLS" metric:
+
+```js
+{
+  "origin": "https://web.dev",
+  "metrics": [
+    "experimental_uncapped_cumulative_layout_shift"
+  ]
+}
+```
+
+After June 8, the following
+[CrUX BigQuery](https://developer.chrome.com/docs/crux/bigquery/)
+will compare old and new CLS:
+
+```sql
+WITH
+  new_data AS (
+  SELECT
+    cls
+  FROM
+    `chrome-ux-report.all.202105`,
+    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
+  WHERE
+    origin = 'https://web.dev'
+    AND effective_connection_type.name = '4G'
+    AND form_factor.name = 'phone'),
+  old_data AS (
+  SELECT
+    uncapped_cls
+  FROM
+    `chrome-ux-report.all.202105`,
+    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
+  WHERE
+    origin = 'https://web.dev'
+    AND effective_connection_type.name = '4G'
+    AND form_factor.name = 'phone')
+SELECT
+  cls.start AS start,
+  cls.`END` AS `end`,
+  cls.density AS cls_density,
+  uncapped_cls.density AS uncapped_cls_density
+FROM
+  new_data
+INNER JOIN
+  old_data
+ON
+  new_data.cls.start = old_data.uncapped_cls.start
+```
+
+You will be able to continue relying on this data to be present for a period of up to 6 months,
+with "old CLS" being retired on December 14th, 2021.
+
+## Updating the CLS weighting in Lighthouse
+
+When CLS was first introduced in Lighthouse,
+it was a brand new sparkly metric.
+As such, in order to make sure developers had time to test, benchmark,
+and optimize against it, CLS was weighed less heavily in the performance score.
+
+Now, after having had some time in the hands of developers,
+the Lighthouse score has increased the weight of CLS from 5% to 15%,
+consistent with the methodology of having Core Web Vitals
+be the most heavily weighted metrics in the Lighthouse score.
+
+You can find the updated weightings of metrics in Lighthouse v8 in the
+[scoring calculator](https://googlechrome.github.io/lighthouse/scorecalc/).
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/UAslFmRMON2y5qtY1TZE.png",
+alt="Lighthouse scoring calculator",
+width="800", height="405" %}
+
+Lighthouse 8.0's CLS implementation includes both windowing and CLS contribution from subframes. Prior to 8.0, CLS in Lighthouse didn't include subframes' CLS in the metric calculation, but now does. And just for confirmation, field CLS measured by CrUX also handles windowing and subframes similarly.
+
+Still, the primary difference between lab and field CLS is that lab CLS's window of observation ends at "fully loaded" as determined under lab conditions, whereas in the field, the window of observation extends to the entire page lifetime, including post-load activity. That said, the windowing adjustment does mitigate this difference substantially.
+
+## Measuring in the field yourself
+
+Should you wish to measure the latest CLS implementation,
+you can also record this for your field data via RUM using the [following](/cls/#measure-cls-in-javascript) PerformanceObserver snippet.
+
+Or by relying directly on the
+[Web Vitals JavaScript library](https://github.com/GoogleChrome/web-vitals),
+which has also been updated with this change.
+
+## Additional updates
+
+Outside of the updates to Cumulative Layout Shift,
+the following metrics-related updates have also been made to our web tooling:
+
+- We're updating to
+[the most recent definition of the Largest Contentful Paint metric](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2020_11_lcp.md).
+CrUX API, PSI, PSI API, Search Console will update on June 1, 2021. CrUX BigQuery will update on June 8, 2021.
+- In CrUX, First Contentful Paint tri-binning thresholds have been updated to be,
+Good: [0-1.8s], Needs Improvement: (1.8s-3s), Poor: [3s-∞]
+
+## Conclusions
+
+We expect this change to reflect a smooth transition for most sites and encourage you to check out
+[Web Vitals](/vitals/) and
+[Optimize CLS](/optimize-cls)
+for tips and tricks on how to measure and optimize your layout shifts away.
+As always, feel free to reach out on the
+[web-vitals-feedback group](https://groups.google.com/g/web-vitals-feedback)
+for feedback about the metrics and our tooling specific feedback forums for
+[Lighthouse](https://github.com/GoogleChrome/lighthouse), and
+[Chrome UX Report](https://groups.google.com/a/chromium.org/g/chrome-ux-report)
+for tooling issues. Cheers!
+
+_With thanks to Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose and Paul Irish for their feedback._
+
+_Hero image by Barn Images / @barnimages on [Unsplash](https://unsplash.com/photos/t5YUoHW6zRo)_
diff --git a/src/site/content/en/blog/codelab-address-form-best-practices/index.md b/src/site/content/en/blog/codelab-address-form-best-practices/index.md
new file mode 100644
index 00000000000..e153657b641
--- /dev/null
+++ b/src/site/content/en/blog/codelab-address-form-best-practices/index.md
@@ -0,0 +1,293 @@
+---
+layout: codelab
+title: Address form best practices codelab
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2020-12-09
+description: Learn best practices for address forms.
+tags:
+  # - ecommerce
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+glitch: address-form-codelab-0
+glitch_path: index.html
+related_post: payment-and-address-form-best-practices
+---
+
+How can you design a form that works well for a variety of names and address formats? Minor form
+glitches irritate users and can cause them to leave your site or give up on completing a purchase
+or sign-up.
+
+This codelab shows you how to build an easy-to-use, accessible form that works well for most users.
+
+
+## Step 1: Make the most of HTML elements and attributes
+
+You'll start this part of the codelab with an empty form, just a heading and a button all on
+their own. Then you'll begin adding inputs. (CSS and a little bit of JavaScript are already
+included.)
+
+{% Glitch {
+  id: 'address-form-codelab-0',
+  path: 'css/main.css',
+  height: 300
+} %}
+
+{% Instruction 'remix' %}
+
+* Add a name field to your `<form>` element with the following code:
+
+```html
+<section>
+  <label for="name">Name</label>
+  <input id="name" name="name">
+</section>
+```
+
+That may look complicated and repetitive for just one name field, but it already does a lot.
+
+You associated the `label` with the `input` by matching the `label`'s `for` attribute with the
+`input`'s `name` or `id`. A tap or click on a label moves focus to its input, making a much bigger
+target than the input on its own—which is good for fingers, thumbs and mouse clicks! Screenreaders
+announce label text when the label or the label's input gets focus.
+
+What about `name="name"`? This is the name (which happens to be 'name'!) associated with the data
+from this input which is sent to the server when the form is submitted. Including a `name` attribute
+also means that the data from this element can be accessed by the [FormData API](https://developer.mozilla.org/docs/Web/API/FormData/Using_FormData_Objects).
+
+## Step 2: Add attributes to help users enter data
+
+What happens when you tap or click in the **Name** input in Chrome? You should see autofill
+suggestions that the browser has stored and guesses are appropriate for this input, given its
+`name` and `id` values.
+
+Now add `autocomplete="name"` to your input code so it looks like this:
+
+```html/2
+<section>
+  <label for="name">Name</label>
+  <input id="name" name="name" autocomplete="name">
+</section>
+```
+Reload the page in Chrome and tap or click in the **Name** input. What differences do you see?
+
+{% Aside %}
+Ever wondered how to delete autofill suggestions in Chrome?
+* Windows: `Shift` + `delete`
+* Mac: `Shift` + `fn` + `delete`
+{% endAside %}
+
+You should notice a subtle change: with `autocomplete="name"`, the suggestions are now specific
+values that were used previously in form inputs that also had `autocomplete="name"`. The browser
+isn't just guessing what might be appropriate: you have control. You'll also see the **Manage…**
+option to view and edit the names and addresses stored by your browser.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uSc6aqRgHoL2qIDyj803.jpg", alt="Two screenshots of Chrome on an Android phone showing a form with a single input, with and without an autocomplete value. One shows browser UI heuristicically suggestions values; the other shows UI when there are stored autocomplete values.", width="800", height="684" %}
+  <figcaption>UI for autofill with guessed values, versus autocomplete.</figcaption>
+</figure>
+
+{% Aside %}
+If an [appropriate autocomplete value](/payment-and-address-form-best-practices/#autocomplete-attribute)
+is available for an `input`, `select` or `textarea`, you should use it!
+{% endAside %}
+
+Now add [constraint validation attributes](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+`maxlength`, `pattern` and `required` so your input code looks like this:
+
+```html/2
+<section>
+  <label for="name">Name</label>
+  <input id="name" name="name" autocomplete="name"
+    maxlength="100" pattern="[\p{L} \-\.]+" required>
+</section>
+```
+
+* `maxlength="100"` means the browser won't allow any input longer than 100 characters.
+
+* `pattern="[\p{L} \-\.]+"` uses a regular expression that allows [Unicode letter characters](https://javascript.info/regexp-unicode),
+hyphens and periods (full stops). That means names such as Françoise or Jörg aren't classed as
+'invalid'. That isn't the case if you use the value `\w` which [only allows characters from the
+[Latin alphabet](/payment-and-address-form-best-practices/#unicode-matching).
+
+* `required` means… required! The browser will not allow the form to be submitted without data for
+this field, and will warn and highlight the input if you attempt to submit it. No extra code
+required!
+
+{% Aside 'caution' %}
+This codelab doesn't address (😜) localization or internationalization. Depending on where your users
+are located, you need to consider address *formats* as well as the different *names* used for
+address components, even within the same language: ZIP, postal code, Eircode or PIN? It may be
+necessary for your site to [customize for multiple locales](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region),
+but the address form in this codelab is designed for flexibility, and should work "well enough" for
+a range of addresses.
+{% endAside %}
+
+To test how the form works with and without these attributes, try entering data:
+
+* Try entering values that don't fit the `pattern` attribute.
+* Try submitting the form with an empty input. You'll see built-in browser functionality warning of
+the empty required field and setting focus on it.
+
+## Step 3: Add a flexible address field to your form
+
+To add an address field, add the following code to your form:
+
+```html
+<section>
+  <label for="address">Address</label>
+  <textarea id="address" name="address" autocomplete="address"
+    maxlength="300" required></textarea>
+</section>
+```
+
+A `textarea` is the most flexible way for your users to enter their address, and it's great for
+cutting and pasting.
+
+You should avoid splitting your address form into components such as street name and number unless
+you really need to. Don't force users to try to fit their address into fields that don't make sense.
+
+{% Aside %}
+Consider the way that address data from your form is being used. What's it for? Make sure to
+understand data requirements and who sets them.
+{% endAside %}
+
+Now add fields for **ZIP or postal code**, and **Country or region**. For simplicity,
+only the first five countries are included here. A full list is included in the [completed address form](https://address-form.glitch.me).
+
+```html
+<section>
+  <label for="postal-code">ZIP or postal code (optional)</label>
+  <input id="postal-code" name="postal-code"
+    autocomplete="postal-code" maxlength="20">
+</section>
+
+<section id="country-region">
+  <label for="">Country or region</label>
+  <select id="country" name="country" autocomplete="country"
+    required>
+      <option selected value="SPACER"> </option>
+      <option value="AF">Afghanistan</option>
+      <option value="AX">Åland Islands</option>
+      <option value="AL">Albania</option>
+      <option value="DZ">Algeria</option>
+      <option value="AS">American Samoa</option>
+  </select>
+</section>
+```
+
+You'll see that **Postal code** is optional: that's because [many countries don't use postal codes](https://hellowahab.wordpress.com/2011/05/24/list-of-countries-without-postal-codes/).
+([Global Sourcebook](https://www.grcdi.nl/gsb/global%20sourcebook.html) provides information about
+address formats for 194 different countries, including sample addresses.) The label **Country or
+region**  is used instead of **Country**, because some options from the full list (such as the
+United Kingdom) are not single countries (despite the `autocomplete` value).
+
+## Step 4: Enable customers to easily enter shipping and billing addresses
+
+You've built a highly functional address form, but what if your site requires more than one
+address, for shipping and billing, for example? Try updating your form to enable customers to enter
+shipping and billing addresses. How can you make data entry as quick and easy as possible,
+especially if the two addresses are the same? The article that goes with this codelab explains
+[techniques for handling multiple addresses](/payment-and-address-form-best-practices#billing-address).
+Whatever you do, make sure to use the correct `autocomplete` values!
+
+## Step 5: Add a telephone number field
+
+To add a telephone number input, add the following code to the form:
+
+```html
+<section>
+  <label for="tel">Telephone</label>
+  <input id="tel" name="tel" autocomplete="tel" type="tel"
+    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
+    required>
+</section>
+```
+
+For phone numbers use a single input: don't split the number into parts. That makes it easier for
+users to enter data or copy and paste, makes validation simpler, and enables browsers to autofill.
+
+There are two attributes that can improve the user experience of entering a telephone number:
+* `type="tel"` ensures mobile users get the right keyboard.
+* `enterkeyhint="done"` sets the mobile keyboard enter key label to show that this is the last
+field and the form can now be submitted (the default is `next`).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vReqMRQjLSI7e6UQ5WwX.png", alt="Two screenshots of a form on Android showing how the enterkeyhint input attribute changes the enter key button icon.", width="800", height="684" %}
+  <figcaption>Use the enterkeyhint attribute to set the Enter button label:
+    'next' and 'done'.</figcaption>
+</figure>
+
+{% Aside 'gotchas' %}
+Using `type="number"` adds an up/down arrow to increment numbers, which makes no sense for data such
+as telephone, payment card, or account numbers. Instead, you should use `type="tel"` for telephone
+numbers. For other numbers, use `type="text"` (or leave off the attribute, since `text` is the
+default) and add `inputmode="numeric"` to get a numeric keyboard on mobile.
+{% endAside %}
+
+{% Aside %}
+Can you see any problems with using a single input for telephone number? Do you store phone
+number parts (country and area code) separately? If so, why?
+{% endAside %}
+
+Your complete address form should now look like this:
+
+{% Glitch {
+  id: 'address-form',
+  path: 'index.html',
+  height: 970
+} %}
+
+* Try out your form on different devices. What devices and browsers are you targeting? How could
+the form be improved?
+
+There are several ways to test your form on different devices: {: #different-devices}
+
+* [Use Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)
+to simulate mobile devices.
+* [Send the URL from your computer to your phone](https://support.google.com/chrome/answer/9430554).
+* Use a service such as [BrowserStack](https://www.browserstack.com/open-source) to test on a range
+of devices and browsers.
+
+
+{% Aside %}
+Before you start building forms, make sure to understand what data is required and if that data is
+strictly necessary. Don't ask for data you don't need! The simplest way to reduce form complexity
+and improve privacy is to remove unnecessary fields. Storing less data also reduces back-end data
+cost and liability.
+{% endAside %}
+
+## Going further
+
+* [Analytics and Real User Monitoring](/payment-and-address-form-best-practices#analytics-rum):
+enable the performance and usability of your form design to be tested and monitored for real users,
+and to check if changes are successful. You should monitor load performance and other [Web Vitals](/vitals),
+as well as page analytics (what proportion of users bounce from your address form without completing
+it? how long do users spend on your address form pages?) and interaction analytics (which page
+components do users interact with, or not?)
+
+* Where are your users located? How do they format their address? What names do they use for address
+components, such as ZIP or postal code? [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/)
+provides useful links and extensive guidance detailing address formats in over 200 countries.
+
+* Country selectors are notorious for [poor usability](https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/).
+It's [best to avoid select elements for a long list of items](https://baymard.com/blog/drop-down-usability#in-general-avoid-drop-downs-when-there-are-more-than-10-or-fewer-than-5-options)
+and the ISO 3166 country-code standard [currently lists 249 countries](https://www.iso.org/obp/ui/#search/code/)!
+Instead of a `<select>` you may want to consider an alternative such as the
+  [Baymard Institute country selector](https://baymard.com/labs/country-selector).
+
+  Can you design a better selector for lists with a lot of items? How would you ensure your design is
+accessible across a range of devices and platforms? (The `<select>` element doesn't work well for a
+  large number of items, but at least it's usable on virtually all browsers and assistive devices!)
+
+  The blog post
+  [&lt;input type="country" /&gt;](https://shkspr.mobi/blog/2017/11/input-type-country/) discusses
+  the complexity of standardizing a country selector. Localization of country names can also be
+  problematic. [Countries Lists](http://www.countries-list.info/Download-List) has a tool for
+  downloading country codes and names in multiple languages, in multiple formats.
diff --git a/src/site/content/en/blog/codelab-building-a-sidenav-component/index.md b/src/site/content/en/blog/codelab-building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..8bc2e8772c6
--- /dev/null
+++ b/src/site/content/en/blog/codelab-building-a-sidenav-component/index.md
@@ -0,0 +1,408 @@
+---
+layout: codelab
+title: "Codelab: Building a Sidenav component"
+authors:
+  - adamargyle
+description: |
+  Learn how to build a responsive slide out side navigation layout component.
+date: 2021-01-21
+hero: image/admin/x4Mq5JQd3PjBnenub8mG.jpg
+thumbnail: image/admin/fcOUKcozhK7lw6f78NPp.png
+glitch: gui-challenges-sidenav-lab
+glitch_path: app/index.html
+related_post: building-a-sidenav-component
+tags:
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+This codelab teaches you how to build a responsive slide out side navigation layout component
+on the web. We'll build the component as we go, starting with HTML, then CSS,
+then JavaScript.
+
+Check out my blog post [Building a Sidenav component](/building-a-sidenav-component)
+to learn about the CSS web platform features chosen for building this component.
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## Setup
+
+{% Instruction 'remix', 'ol' %}
+1. Open `app/index.html`.
+
+## HTML
+
+First, get the essentials of the HTML setup so there's content and some boxes to work with.
+
+Drop the following HTML into the `<body>` tag.
+
+```html
+<aside></aside>
+<main></main>
+```
+
+The `<aside>` holds the navigation menu as a complimentary element to `<main>`, which
+holds the primary page content.
+
+Next we'll fill in those semantic elements with the rest of the page content.
+
+Add a navigation element, some navigation links and a close link inside the `<aside>` element.
+
+```html/1-14
+<aside>
+  <nav>
+    <h4>My</h4>
+    <a href="#">Dashboard</a>
+    <a href="#">Profile</a>
+    <a href="#">Preferences</a>
+    <a href="#">Archive</a>
+
+    <h4>Settings</h4>
+    <a href="#">Accessibility</a>
+    <a href="#">Theme</a>
+    <a href="#">Admin</a>
+  </nav>
+
+  <a href="#"></a>
+</aside>
+```
+
+Links go great inside `<nav>` elements, and `<nav>` elements go great in `<aside>` sidebars.
+Still, there's more we can do to improve.
+
+In the main content element, add a header and an article to semantically hold the layout content.
+
+```html/1-14
+<main>
+  <header>
+    <a href="#sidenav-open" class="hamburger">
+      <svg viewBox="0 0 50 40">
+        <line x1="0" x2="100%" y1="10%" y2="10%" />
+        <line x1="0" x2="100%" y1="50%" y2="50%" />
+        <line x1="0" x2="100%" y1="90%" y2="90%" />
+      </svg>
+    </a>
+    <h1>Site Title</h1>
+  </header>
+
+  <article>
+    {put some placeholder content here}
+  </article>
+</main>
+```
+
+{% Aside %}
+  You can ignore the `The attribute name of [ viewBox ] must be in lowercase` lint error from Glitch.
+{% endAside %}
+
+The header has the menu open link. The aside has the close button.
+We'll show and hide elements based on viewport size soon.
+
+In the `<article>` element, we pasted a placeholder sentence. Replace `` with your own stuff, or paste the lorem provided below:
+
+```html
+<h2>Totam Header</h2>
+<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+
+<h3>Subhead Totam Odit</h3>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+
+<h3>Subhead</h3>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+```
+
+This content, and it's length, are what will cause the page to be scrollable when it exceeds your viewport height.
+
+So far you've added an aside element, with a nav, links and a way to close the sidenav.
+You also added a header, a way to open the sidenav, and an article to the main element.
+This is clean, semantic and pretty timeless already,
+but we can make it cleaner and clearer for everyone. The open link in the sidenav
+could be more clearly marked.
+
+Add attributes `title` and `aria-label` to the header open link element:
+
+```html//0
+<a href="#sidenav-open" class="hamburger">
+<a href="#sidenav-open" title="Open Menu" aria-label="Open Menu" class="hamburger">
+```
+
+The open SVG icon could be more clearly marked as well.
+Add the following attributes to the SVG inside the open link element:
+
+```html//0
+<svg viewBox="0 0 50 40">
+<svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
+```
+
+The close link in the sidenav could be more clearly marked.
+Add attributes `title` and `aria-label` to the sidenav close link element:
+
+```html//0
+<a href="#"></a>
+<a href="#" title="Close Menu" aria-label="Close Menu"></a>
+```
+
+{% Aside 'gotchas' %}
+While all links do not require titles or special labels, I believe these to be an exception
+since they're being used to change the URL, like a link does, but they don't have any text content of their own.
+{% endAside %}
+
+## CSS
+
+Time to layout the elements. The main content
+and sidenav are direct children of the `<body>` tag, so that's a good place to start.
+
+Add the following CSS into `css/sidenav.css` so the `<body>` element lays out the children.
+
+```css
+body {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+
+  @media (max-width: 540px) {
+    & > :matches(aside, main) {
+      grid-area: stack;
+    }
+  }
+}
+```
+
+This layout essentially says: Create a named row `stack` with everything in it,
+and 2 columns in that row, the 2nd of which is named `stack` also. The 1st column
+should be sized by its minimal content needs, and the 2nd column can take up the rest.
+Then, if in a constrained viewport of `540px` or less, put the sidenav and main content elements
+into the same row and column, resulting in them being on top of each other in a 1x1 grid.
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </video>
+</figure>
+
+With this responsive stacking functionality as a base, we can now leverage the state of the URL bar to toggle the
+visibility and transition style of the sidenav.
+
+Update the `<aside>` element back in `app/index.html`:
+
+```html//0
+<aside>
+<aside id="sidenav-open">
+```
+
+This enables CSS to match an element and the URL hash together. This is important for `:target` usage.
+Now the element's ID can match the URL hash we'll be setting with `<a>` tags.
+
+In addition, for easier JavaScript targeting,
+add IDs for key elements that control the sidenav. First, add an ID to the sidenav open link:
+
+```html//0
+<a href="#sidenav-open" class="hamburger" title="Open Menu" aria-label="Open Menu">
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+```
+
+Next, add an ID to the sidenav close link:
+
+```html//0
+<a href="#" title="Close Menu" aria-label="Close Menu"></a>
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+```
+
+That wraps up the macro `<body>` responsive stacking layout, plus ties us into the URL bar.
+Let's keep going!
+
+The `<aside>` has a neat layout too. It has 2 children, a `<nav>` which is the paper-like looking
+component that slides out, and a closing `<a>` link element that sets the url has to `#`.
+The link is invisible to the right of the paper slide out nav; it's so folks can "click off" the visual
+component to dismiss it.
+
+Add the following CSS to `css/sidenav.css`:
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+I thought the ratio and names were a really nice touch here,
+where grid could shine and give a designer a lot of control.
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </video>
+</figure>
+
+Next I need to conditionally overlay the main content and persist my position
+through any document scrolling. This is a great job for `position: sticky` and
+some `overscroll-behavior`.
+
+Add the following styles for the sidenav:
+
+```css/4-12
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+
+  @media (max-width: 540px) {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+
+    visibility: hidden; /* not keyboard accessible when closed */
+  }
+}
+```
+
+Those styles ensure the sidenav is the viewport height, scrolls vertically
+and contains the scroll. Very importantly, it hides the element. By default,
+when the viewport is `540px` or smaller, hide that sidenav. Unless!
+
+Add a `:target` pseudo-selector to the `#sidenav-open` element:
+
+```css/4-6
+#sidenav-open {
+
+  @media (max-width: 540px) {
+
+    &:target {
+      visibility: visible;
+    }
+  }
+}
+```
+
+When the ID of that element and the URL bar are the same,
+set `visibility` to `visible`. Go ahead and open the side menu after scrolling the page,
+or try scrolling the page while the sidenav is open. What do you think?
+
+Add the following CSS to the bottom of `app/sidenav.css`:
+
+```css
+#sidenav-button,
+#sidenav-close {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  touch-action: manipulation;
+
+  @media (min-width: 540px) {
+    display: none;
+  }
+}
+```
+
+These styles target our open and close buttons, specifies their tap and touch styles,
+and also hides them when viewports are `540px` or larger.
+
+For some flair, let's add CSS transforms with respectful accessibility.
+Add the following CSS to `css/sidenav.css`:
+
+```css/1-2,9-13,17-18,21-24
+#sidenav-open {
+  --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration: .6s;
+
+  ...
+
+  @media (max-width: 540px) {
+    ...
+
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+
+    &:target {
+      visibility: visible;
+      transform: translateX(0);
+      transition: transform var(--duration) var(--easeOutExpo);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </video>
+  <figcaption>
+    A demo of the interaction with and without duration applied
+    based on the `prefers-reduced-motion` media query.
+  </figcaption>
+</figure>
+
+### Sprinkle in some JavaScript
+
+The `Escape` key should close the menu. Add this JS to `js/index.js`:
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', e => {
+  if (e.code === 'Escape') {
+    document.location.hash = '';
+  }
+});
+```
+
+This listens for a key event on the sidenav element.
+If it's `Escape`, it sets the URL hash to empty, making the sidenav transition out.
+
+This next piece of UX JS is focus management. I want to make opening and closing easy, so I wait
+until the sidenav has finished a transition of some kind, then cross check it against the
+URL hash to determine if it's in or out. I then use JavaScript to set the focus on the button
+complimentary to the one they just pressed.
+
+Add the following JavaScript to `js/index.js`:
+
+```js
+const closenav = document.querySelector('#sidenav-close');
+const opennav = document.querySelector('#sidenav-button');
+
+sidenav.addEventListener('transitionend', e => {
+  if (e.propertyName !== 'transform') {
+    return;
+  }
+
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+    ? closenav.focus()
+    : opennav.focus();
+});
+```
+
+## Try it out
+
+{% Instruction 'preview' %}
+
+## Conclusion
+
+That's a wrap up for the needs I had with the component. Feel free to build upon
+it, drive it with JavaScript state instead of the URL, and in general make it yours! There's always more to add
+or more use cases to cover.
+
+Open up `css/brandnav.css` to check out the non-layout related styles that I applied to
+this component. I didn't feel it was important to the feature set I was focusing on, and I
+hoped that separating styles from layout would encourage copy and paste. There could
+be more learning for you there!
+
+How do you make slide out responsive sidenav components?
+Do you ever have more than 1, like one on both sides? I'd love to feature your solution
+in a YouTube video, make sure to [tweet at me](https://twitter.com/argyleink) or comment in YouTube with your code, it'll help everyone
+out!
diff --git a/src/site/content/en/blog/codelab-building-a-stories-component/index.md b/src/site/content/en/blog/codelab-building-a-stories-component/index.md
new file mode 100644
index 00000000000..efd455b10e9
--- /dev/null
+++ b/src/site/content/en/blog/codelab-building-a-stories-component/index.md
@@ -0,0 +1,535 @@
+---
+layout: codelab
+title: "Codelab: Building a Stories component"
+authors:
+  - adamargyle
+description: |
+  Learn how to build an experience similar to Instagram Stories on the web.
+date: 2020-11-25
+hero: hero.jpg
+thumbnail: image/admin/0nRwu5FF7f5tHsgT9PgE.jpg
+glitch: gui-challenges-stories-codelab
+glitch_path: app/index.html
+related_post: building-a-stories-component
+tags:
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+This codelab teaches you how to build an experience like Instagram Stories
+on the web. We'll build the component as we go, starting with HTML, then CSS,
+then JavaScript.
+
+Check out my blog post [Building a Stories component](/building-a-stories-component)
+to learn about the progressive enhancements made while building this component.
+
+{% YouTube 'PzvdREGR0Xw' %}
+
+{% Aside %}
+This post assumes that you're familiar with the Instagram Stories UX
+and will use terminology from that experience (e.g. a "friend's story").
+{% endAside %}
+
+## Setup
+
+{% Instruction 'remix', 'ol' %}
+1. Open `app/index.html`.
+
+## HTML
+
+I always aim to use [semantic HTML](https://en.wikipedia.org/wiki/Semantic_HTML).
+Since each friend can have any number of stories, I thought it was meaningful to use a
+`<section>` element for each friend and an `<article>` element for each story.
+Let's start from the beginning though. First, we need a container for our
+stories component.
+
+Add a `<div>` element to your `<body>`:
+
+```html/0,2
+<div class="stories">
+
+</div>
+```
+
+<!-- TODO(kayce): Why not use "friend" instead of "user"? -->
+
+Add some `<section>` elements to represent friends:
+
+```html/1-4
+<div class="stories">
+  <section class="user"></section>
+  <section class="user"></section>
+  <section class="user"></section>
+  <section class="user"></section>
+</div>
+```
+
+Add some `<article>` elements to represent stories:
+
+<!--
+
+Each friend has some pictures. We'll call each picture a `.story`.
+Next, let's dig into how and where we'll put pictures in this component.
+
+### Placeholder loading technique
+
+Let's use a placeholder loading technique for each `.story`. We'll use CSS's
+`background-image` property, which allows us to specify more than one background
+image. We can put them in an order so that our user picture is on top and will
+show up automatically when it's done loading. To enable this, we'll put
+our image URL into a custom property (`--bg`), and use it within our CSS to
+layer with the loading placeholder.
+
+-->
+
+```html/2-3,6,9,12-14
+<div class="stories">
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>
+    <article class="story" style="--bg: url(https://picsum.photos/480/841);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/481/840);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/481/841);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/482/840);"></article>
+    <article class="story" style="--bg: url(https://picsum.photos/482/843);"></article>
+    <article class="story" style="--bg: url(https://picsum.photos/482/844);"></article>
+  </section>
+</div>
+```
+
+* We're using an image service (`picsum.com`) to help prototype stories.
+* The `style` attribute on each `<article>` is part of a placeholder loading
+  technique, which you'll learn more about in the next section.
+
+## CSS
+
+Our content is ready for style. Let's turn those bones into something folks will
+want to interact with. We'll be working mobile-first today.
+
+### `.stories`
+
+For our `<div class="stories">` container we want a horizontal scrolling container.
+We can achieve this by:
+
+* Making the container a [Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+* Setting each child to fill the row track
+* Making the width of each child the width of a mobile device viewport
+
+Grid will continue placing new `100vw`-wide columns to the right of the previous
+one, until it's placed all the HTML elements in your markup.
+
+<!-- TODO(kayce): Resize this screenshot so there's less whitespace -->
+
+<figure>
+  {% Img src="image/admin/oLbxOrfO2rUqmxnnleXw.png", alt="Chrome and DevTools open with a grid visual showing the full width layout", width="800", height="465" %}
+  <figcaption>Chrome DevTools showing grid column overflow, making a horizontal scroller.</figcaption>
+</figure>
+
+Add the following CSS to the bottom of `app/css/index.css`:
+
+```css
+.stories {
+  display: grid;
+  grid: 1fr / auto-flow 100%;
+  gap: 1ch;
+}
+```
+
+{% Aside %}
+Feel free to stop and study the `body` styles if you like!
+They're handling the responsive nature of our Stories component.
+You can also collapse the `body` styles by clicking the **&or;**
+symbol next to `body` on line 1.
+{% endAside %}
+
+Now that we have content extending beyond the viewport, it's time to tell that
+container how to handle it. Add the highlighted lines of code to your `.stories` ruleset:
+
+```css/4-6
+.stories {
+  display: grid;
+  grid: 1fr / auto-flow 100%;
+  gap: 1ch;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  touch-action: pan-x;
+}
+```
+
+We want horizontal scrolling, so we'll set `overflow-x` to
+`auto`. When the user scrolls we want the component to gently rest on the next story,
+so we'll use `scroll-snap-type: x mandatory`. Read more about this
+CSS in the [CSS Scroll Snap Points](/building-a-stories-component/#scroll-snap-points)
+and [overscroll-behavior](/building-a-stories-component/#overscroll-behavior)
+sections of my blog post.
+
+It takes both the parent container and the children to agree to scroll snapping, so
+let's handle that now. Add the following code to the bottom of `app/css/index.css`:
+
+```css
+.user {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+```
+
+Your app doesn't work yet, but the video below shows what happens when
+`scroll-snap-type` is enabled and disabled. When enabled, each horizontal
+scroll snaps to the next story. When disabled, the browser uses its
+default scrolling behavior.
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <!-- <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.webm" type="video/webm"> -->
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/scroll-snap-example.mp4">
+  </video>
+</figure>
+
+That will get you scrolling through your friends, but we still have an issue
+with the stories to solve.
+
+### `.user`
+
+Let's create a layout in the `.user` section that wrangles those child story
+elements into place. We're going to use a handy stacking trick to solve this.
+We're essentially creating a 1x1 grid where the row and column have the same Grid
+alias of `[story]`, and each story grid item is going to try and claim that space,
+resulting in a stack.
+
+Add the highlighted code to your `.user` ruleset:
+
+```css/3-4
+.user {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  display: grid;
+  grid: [story] 1fr / [story] 1fr;
+}
+```
+
+Add the following ruleset to the bottom of `app/css/index.css`:
+
+```css
+.story {
+  grid-area: story;
+}
+```
+
+Now, without absolute positioning, floats, or other layout directives that take
+an element out of flow, we're still in flow. Plus, it's like barely any code,
+look at that! This gets broken down in the video and the blog post in more detail.
+
+### `.story`
+
+Now we just need to style the story item itself.
+
+Earlier we mentioned that the `style` attribute on each `<article>` element is part of a
+placeholder loading technique:
+
+```html
+<article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>
+```
+
+We're going to use CSS's `background-image` property, which allows us to specify
+more than one background image. We can put them in an order so that our user
+picture is on top and will show up automatically when it's done loading. To
+enable this, we'll put our image URL into a custom property (`--bg`), and use it
+within our CSS to layer with the loading placeholder.
+
+First, let's update the `.story` ruleset to replace a gradient with a background image
+once it's done loading. Add the highlighted code to your `.story` ruleset:
+
+```css/3-6
+.story {
+  grid-area: story;
+
+  background-size: cover;
+  background-image:
+    var(--bg),
+    linear-gradient(to top, lch(98 0 0), lch(90 0 0));
+}
+```
+
+Setting `background-size` to `cover` ensures there's no empty space in the
+viewport because our image will be filling it up. Defining 2 background images
+enables us to pull a neat CSS web trick called the *loading tombstone*:
+
+- Background image 1 (`var(--bg)`) is the URL we passed inline in the HTML
+- Background image 2 (`linear-gradient(to top, lch(98 0 0), lch(90 0 0))` is a gradient
+  to show while the URL is loading
+
+CSS will automatically replace the gradient with the image, once the image is done downloading.
+
+Next we'll add some CSS to remove some behavior, freeing up the browser to move faster.
+Add the highlighted code to your `.story` ruleset:
+
+```css/8-9
+.story {
+  grid-area: story;
+
+  background-size: cover;
+  background-image:
+    var(--bg),
+    linear-gradient(to top, lch(98 0 0), lch(90 0 0));
+
+  user-select: none;
+  touch-action: manipulation;
+}
+```
+
+* `user-select: none` prevents users from accidentally selecting text
+* `touch-action: manipulation` instructs the browser that these interactions
+  should be treated as touch events, which frees up the browser from trying to
+  decide whether you're clicking a URL or not
+
+Last, let's add a little CSS to animate the transition between stories. Add the
+highlighted code to your `.story` ruleset:
+
+```scss/11-16
+.story {
+  grid-area: story;
+
+  background-size: cover;
+  background-image:
+    var(--bg),
+    linear-gradient(to top, lch(98 0 0), lch(90 0 0));
+
+  user-select: none;
+  touch-action: manipulation;
+
+  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);
+
+  &.seen {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+```
+
+The `.seen` class will be added to a story that needs an exit.
+I got the custom easing function (`cubic-bezier(0.4, 0.0, 1,1)`)
+from Material Design's [Easing](https://material.io/design/motion/speed.html#easing)
+guide (scroll to the *Accerlerated easing* section).
+
+{% Aside %}
+  Check out [Nesting Selector: the `&` selector](https://drafts.csswg.org/css-nesting-1/#nest-selector)
+  for an explanation of `&.seen`.
+{% endAside %}
+
+If you've got a keen eye you probably noticed the `pointer-events: none`
+declaration and are scratching your head right now. I'd say this is the only
+downside of the solution so far. We need this because a `.seen.story` element
+will be on top and will receive taps, even though it's invisible. By setting the
+`pointer-events` to `none`, we turn the glass story into a window, and steal no
+more user interactions. Not too bad of a trade off, not too hard to manage here
+in our CSS right now. We're not juggling `z-index`. I'm feeling good about this
+still.
+
+
+## JavaScript
+
+The interactions of a Stories component are quite simple to the user: tap on the
+right to go forward, tap on the left to go back. Simple things for users tends
+to be hard work for developers. We'll take care of lots of it, though.
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <!-- <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.webm" type="video/webm"> -->
+    <source src="https://storage.googleapis.com/web-dev-assets/gui-challenges/stories-desktop-demo.mp4">
+  </video>
+</figure>
+
+### Setup
+
+To start out, let's compute and store as much information as we can.
+Add the following code to `app/js/index.js`:
+
+```js
+const stories = document.querySelector('.stories')
+const median = stories.offsetLeft + (stories.clientWidth / 2)
+```
+
+Our first line of JavaScript grabs and stores a reference to our primary HTML
+element root. The next line calculates where the middle of our element is, so we
+can decide if a tap is to go forward or backward.
+
+### State
+
+Next we make a small object with some state relevant to our logic. In this
+case, we're only interested in the current story. In our HTML markup, we can
+access it by grabbing the 1st friend and their most recent story. Add the highlighted code
+to your `app/js/index.js`:
+
+```js/3-5
+const stories = document.querySelector('.stories')
+const median = stories.offsetLeft + (stories.clientWidth / 2)
+
+const state = {
+  current_story: stories.firstElementChild.lastElementChild
+}
+```
+
+<!-- TODO(kayce): All JS code needs semicolons: https://google.github.io/styleguide/jsguide.html#formatting-semicolons-are-required -->
+
+### Listeners
+
+We have enough logic now to start listening for user events and directing them.
+
+#### Mouse
+
+Let's start by listening to the `'click'` event on our stories container.
+Add the highlighted code to `app/js/index.js`:
+
+```js/7-15
+const stories = document.querySelector('.stories')
+const median = stories.offsetLeft + (stories.clientWidth / 2)
+
+const state = {
+  current_story: stories.firstElementChild.lastElementChild
+}
+
+stories.addEventListener('click', e => {
+  if (e.target.nodeName !== 'ARTICLE')
+    return
+
+  navigateStories(
+    e.clientX > median
+      ? 'next'
+      : 'prev')
+})
+```
+
+If a click happens and it's not on a `<article>` element we bail and do nothing.
+If it is an article, we grab the horizontal position of the mouse or finger with
+`clientX`. We haven't implemented `navigateStories` yet, but the argument that
+it takes specifies what direction we need to go. If that user position is
+greater than the median, we know we need to navigate to `next`, otherwise
+`prev` (previous).
+
+#### Keyboard
+
+Now, let's listen for keyboard presses. If the <kbd>Down Arrow</kbd> is pressed we navigate
+to `next`. If it's the <kbd>Up Arrow</kbd>, we go to `prev`.
+
+Add the highlighted code to `app/js/index.js`:
+
+```js/17-23
+const stories = document.querySelector('.stories')
+const median = stories.offsetLeft + (stories.clientWidth / 2)
+
+const state = {
+  current_story: stories.firstElementChild.lastElementChild
+}
+
+stories.addEventListener('click', e => {
+  if (e.target.nodeName !== 'ARTICLE')
+    return
+
+  navigateStories(
+    e.clientX > median
+      ? 'next'
+      : 'prev')
+})
+
+document.addEventListener('keydown', ({key}) => {
+  if (key !== 'ArrowDown' || key !== 'ArrowUp')
+    navigateStories(
+      key === 'ArrowDown'
+        ? 'next'
+        : 'prev')
+})
+```
+
+### Stories navigation
+
+Time to tackle the unique business logic of stories and the UX they've become
+famous for. This looks chunky and tricky, but I think if you take it line by
+line, you'll find it's quite digestible.
+
+Upfront, we stash some selectors that help us decide whether to scroll to a
+friend or show/hide a story. Since the HTML is where we're working, we'll be
+querying it for presence of friends (users) or stories (story).
+
+These variables will help us answer questions like, "given story x, does "next"
+mean move to another story from this same friend or to a different friend?" I did it by using the tree
+structure we built, reaching into parents and their children.
+
+Add the following code to the bottom of `app/js/index.js`:
+
+```js
+const navigateStories = direction => {
+  const story = state.current_story
+  const lastItemInUserStory = story.parentNode.firstElementChild
+  const firstItemInUserStory = story.parentNode.lastElementChild
+  const hasNextUserStory = story.parentElement.nextElementSibling
+  const hasPrevUserStory = story.parentElement.previousElementSibling
+}
+```
+
+Here's our business logic goal, as close to natural language as possible:
+
+* Decide how to handle the tap
+  * If there's a next/previous story: show that story
+  * If it's the last/first story of the friend: show a new friend
+  * If there's no story to go to in that direction: do nothing
+* Stash the new current story into `state`
+
+Add the highlighted code to your `navigateStories` function:
+
+```js/7-36
+const navigateStories = direction => {
+  const story = state.current_story
+  const lastItemInUserStory = story.parentNode.firstElementChild
+  const firstItemInUserStory = story.parentNode.lastElementChild
+  const hasNextUserStory = story.parentElement.nextElementSibling
+  const hasPrevUserStory = story.parentElement.previousElementSibling
+
+  if (direction === 'next') {
+    if (lastItemInUserStory === story && !hasNextUserStory)
+      return
+    else if (lastItemInUserStory === story && hasNextUserStory) {
+      state.current_story = story.parentElement.nextElementSibling.lastElementChild
+      story.parentElement.nextElementSibling.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+    else {
+      story.classList.add('seen')
+      state.current_story = story.previousElementSibling
+    }
+  }
+  else if(direction === 'prev') {
+    if (firstItemInUserStory === story && !hasPrevUserStory)
+      return
+    else if (firstItemInUserStory === story && hasPrevUserStory) {
+      state.current_story = story.parentElement.previousElementSibling.firstElementChild
+      story.parentElement.previousElementSibling.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+    else {
+      story.nextElementSibling.classList.remove('seen')
+      state.current_story = story.nextElementSibling
+    }
+  }
+}
+```
+
+## Try it out
+
+{% Instruction 'preview' %}
+
+## Conclusion
+
+That's a wrap up for the needs I had with the component. Feel free to build upon
+it, drive it with data, and in general make it yours!
diff --git a/src/site/content/en/blog/codelab-centering-in-css/index.md b/src/site/content/en/blog/codelab-centering-in-css/index.md
new file mode 100644
index 00000000000..08717e8a631
--- /dev/null
+++ b/src/site/content/en/blog/codelab-centering-in-css/index.md
@@ -0,0 +1,49 @@
+---
+layout: codelab
+title: "Codelab: Centering in CSS"
+authors:
+  - adamargyle
+description: |
+  Learn 5 different centering techniques with CSS.
+date: 2020-12-16
+hero: image/admin/wKAhovrYm23nFtqFqYbE.png
+thumbnail: image/admin/tYvAWgtTaUOxXe9Pxacm.png
+glitch: gui-challenges-centering-codelab
+glitch_path: app/index.html
+related_post: centering-in-css
+tags:
+  - css
+  - layout
+---
+
+This codelab sets you up to share and showcase your favorite way of centering in
+CSS.
+
+Check out my blog post [Centering in CSS](/centering-in-css) to learn about 5 of
+my favorite ways to center in CSS. Or watch this video!
+
+{% YouTube 'ncYzTvEMCyE' %}
+
+## Setup
+
+{% Instruction 'remix', 'ol' %}
+1. Open `app/index.html`
+1. At `line 23`, replace `/* your centering CSS here /*` with your CSS
+1. (optional) Name your centering technique and replace the text in the `<h1>`
+
+### Styles
+1. Create a new file in the `app/css/` folder
+1. Create a selector to hold your centering solution, like `.turbo-center` or
+   `[floaty-mcfloat]`
+1. Within that new selector, write your centering technique (feel free to look
+   at the other's in `app/css/` as examples)
+1. (optional) write some "support styles" so we can see which children need
+   styles to support the centering
+1. Open `app/css/index.css` and import your new file at the bottom
+
+### Tie it all up
+1. Open `app/index.html` again
+1. Find the `<article>` and give it your custom selector you made in step #2 of
+   the previous section. 
+1. [Tweet me](https://twitter.com/argyleink) your Glitch and I'll feature it on
+   the blog post!
diff --git a/src/site/content/en/blog/codelab-payment-form-best-practices/index.md b/src/site/content/en/blog/codelab-payment-form-best-practices/index.md
new file mode 100644
index 00000000000..bc92c076ca3
--- /dev/null
+++ b/src/site/content/en/blog/codelab-payment-form-best-practices/index.md
@@ -0,0 +1,337 @@
+---
+layout: codelab
+title: Payment form best practices codelab
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2020-12-09
+description: Learn best practices for payment forms.
+tags:
+  # - ecommerce
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+glitch: payment-form-codelab-1
+glitch_path: index.html
+related_post: payment-and-address-form-best-practices
+---
+
+This codelab shows you how to build a payment form that is secure, accessible and easy to use.
+
+{% Aside 'caution' %}
+This article is about frontend best practices for payment forms. It does not explain how to
+implement transactions on your site. To find out more about adding payment functionality to your
+website, see [Web Payments](/payments).
+{% endAside %}
+
+## Step 1: Use HTML as intended
+
+Use elements built for the job:
+* `<form>`
+* `<section>`
+* `<label>`
+* `<input>`, `<select>`, `<textarea>`
+* `<button>`
+
+As you'll see, these elements enable built-in browser functionality, improve accessibility, and
+add meaning to your markup.
+
+{% Instruction 'remix' %}
+
+Take a look at the HTML for your form in `index.html`.
+
+```html
+<form action="#" method="post">
+
+  <h1>Payment form</h1>
+
+  <section>
+    <label>Card number</label>
+    <input>
+  </section>
+
+  <section>
+    <label>Name on card</label>
+    <input>
+  </section>
+
+  <section id="cc-exp-csc">
+    <div>
+      <label>Expiry date</label>
+      <input>
+    </div>
+    <div>
+      <label>Security code</label>
+      <input>
+      <div class="explanation">Last 3 digits on back of card</div>
+    </div>
+  </section>
+
+  <button id="complete-payment">Complete payment</button>
+
+</form>
+```
+
+There are `<input>` elements for card number, name on card, expiry date and security code. They're all
+wrapped in `<section>` elements, and each has a label. The **Complete Payment** button is an HTML
+`<button>`. Later in this codelab you'll learn about the browser features you can access by using
+  these elements.
+
+{% Aside %}
+`<input>` elements don't have closing tags. That's because they are [void](https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements) (empty) elements: they don't have any
+content in themselves. A "/" character at the end of a void element is optional: either `<input>`
+or `<input />` is OK.
+{% endAside %}
+
+Click **View App** to preview your payment form.
+
+* Does the form work well enough as it is?
+* Is there anything you would change to make it work better?
+* How about on mobile?
+
+Click **View Source** to return to your source code.
+
+
+## Step 2: Design for mobile and desktop
+
+The HTML you added is valid, but the default browser styling makes the form hard to use, especially
+on mobile. It doesn't look too good, either.
+
+You need to ensure your forms work well on a range of devices by adjusting padding, margins, and
+font sizes.
+
+Copy all the CSS below and paste it into your own `css/main.css` file.
+
+{% Glitch {
+  id: 'payment-form-codelab-2',
+  path: 'css/main.css',
+  height: 400,
+  previewSize: 0
+} %}
+
+That's a lot of CSS! The main things to be aware of are the changes to sizes:
+
+* `padding` and `margin` are added to inputs.
+* `font-size` and other values are different for different viewport sizes.
+
+When you're ready, click **View App** to see the styled form.  You'll also notice that borders have
+been adjusted, and `display: block;` is used for labels so they go on a line on their own, and
+inputs can be full width. [Sign-in form best practices](/sign-in-form-best-practices/#label:~:text=put%20your%20labels%20above%20your%20inputs)
+explains the benefits of this approach in more detail.
+
+The `:invalid` selector is used to indicate when an input has an invalid value. (You'll use this
+later in the codelab.)
+
+The CSS is mobile-first:
+
+* The default CSS is for viewports less than `400px` wide.
+* [Media queries](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries) are
+used to override the default for viewports that are at least `400px` wide, and then again for
+viewports that are at least `500px` wide. This should work well for smaller phones, mobile devices
+with larger screens, and on desktop.
+
+Whenever you build for the web, you need to test on different devices and viewport sizes. That's
+especially true for forms, because one small glitch can make them unusable. You should always adjust
+[CSS breakpoints](/responsive-web-design-basics/#breakpoints) to ensure they work well with your
+content and your target devices.
+
+* Is the whole form visible?
+* Are the form inputs big enough?
+* Is all the text readable?
+* Did you notice any differences between using a real mobile device, and viewing the form in
+Device Mode in Chrome DevTools?
+* Did you need to adjust breakpoints?
+
+There are several ways to test your form on different devices: {: #different-devices}
+
+* [Use Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)
+to simulate mobile devices.
+* [Send the URL from your computer to your phone](https://support.google.com/chrome/answer/9430554).
+* Use a service such as [BrowserStack](https://www.browserstack.com/open-source) to test on a range
+of devices and browsers.
+
+## Step 3: Add attributes to help users enter data
+
+Enable the browser to store and autofill input values, and provide access to secure built-in
+payment and validation features.
+
+Add attributes to the form in your `index.html` file so it looks like this:
+
+```html/5,6,10,11,16,17,20,21
+<form action="#" method="post">
+
+  <h1>Payment form</h1>
+
+  <section>
+    <label for="cc-number">Card number</label>
+    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
+  </section>
+
+  <section>
+    <label for="cc-name">Name on card</label>
+    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
+  </section>
+
+  <section id="cc-exp-csc">
+    <div>
+      <label for="cc-exp">Expiry date</label>
+      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
+    </div>
+    <div>
+      <label for="cc-csc">Security code</label>
+      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
+      <div class="explanation">Back of card, last 3 digits</div>
+    </div>
+  </section>
+
+  <button id="complete-payment">Complete payment</button>
+
+</form>
+```
+
+View your app again and then tap or click in the **Card number** field. Depending on the device and
+platform, you may see a chooser showing payment methods stored for the browser, like the one below.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yPPoZYFMeSILBjgyjcFI.png", alt="Two screenshots of a payment form in Chrome on an Android phone. One shows the built-in browser payment card selector; the other shows placeholder autofilled values.", width="800", height="684" %}
+  <figcaption>Built-in browser payment chooser and autofill.</figcaption>
+</figure>
+
+Once you select a payment method and enter your security code, the browser autofills the form using
+the payment card `autocomplete` values you added to the form:
+
+* `cc-number`
+* `cc-name`
+* `cc-exp`
+* `cc-csc`
+
+Many browsers also check and confirm the validity of credit card numbers and security codes.
+
+{% Aside %}
+Don't be alarmed! Your browser may be able to autofill the form with stored payment card data, but
+no payment can be made, and no data is transferred or saved.
+{% endAside %}
+
+On a mobile device you'll also notice that you get a numeric keyboard as soon as you tap into the
+**Card number** field. That's because you used `inputmode="numeric"`. For numeric fields this makes
+it easier to enter numbers and impossible to enter non-numeric characters, and nudges users to
+remember the type of data they're entering.
+
+It's extremely important to correctly add all available `autocomplete` values to payment forms. It's
+quite common for sites to miss out the `autocomplete` value for the card expiry date and other
+fields. If a single `autofill` value is wrong or missing, users will need to retrieve their actual
+card to manually enter card data, and you may lose out on a sale. If autofill on payment forms
+doesn't work properly, users may also decide to keep a record of payment card details on their phone
+or computer, which is highly insecure.
+
+{% Aside %}
+Research shows that [it may be better to use separate select elements for month and year](https://baymard.com/blog/how-to-format-expiration-date-fields) rather than a single input. It's up to you which you think is
+best. Test this out by remixing and editing the HTML from our complete
+[payment form demo](https://glitch.com/~payment-form), which includes code for both types of expiry
+date field.
+{% endAside %}
+
+Try submitting the payment form with an empty field. The browser prompts to complete missing
+data. Now add a letter to the value in the **Card number** field and try submitting the form. The
+browser warns that value is invalid. This happens because you used the `pattern` attribute to
+specify valid values for a field. The same works for `maxlength` and other
+[validation constraints](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+No JavaScript required.
+
+Your payment form should now look this:
+
+{% Glitch {
+  id: 'payment-form-codelab-3',
+  path: 'index.html',
+  height: 750
+} %}
+
+* Try removing `autocomplete` values and filling in the payment form. What difficulties do you
+encounter?
+* Try out payment forms on online stores. Consider what works well and what goes wrong. Are there
+any common problems or best practices you should follow?
+
+## Step 4: Disable the payment button once the form is submitted
+
+You should consider disabling a submit button once the user has tapped or clicked it—especially when
+the user is making payment. [Many users tap or click buttons repeatedly](https://baymard.com/blog/users-double-click-online),
+even if they're working fine. That can cause problems with payment processing and add to server load.
+
+Add the following JavaScript to your `js/main.js` file:
+
+``` js
+const form = document.querySelector('form');
+const completePaymentButton = document.querySelector('button#complete-payment');
+
+form.addEventListener('submit', handleFormSubmission);
+
+function handleFormSubmission(event) {
+  event.preventDefault();
+  if (form.checkValidity() === false) {
+    // Handle invalid form data.
+  } else {
+    completePaymentButton.textContent = 'Making payment...';
+    completePaymentButton.disabled = 'true';
+    setTimeout(() => {alert('Made payment!');}, 500);
+  }
+}
+```
+
+Try submitting the payment form and see what happens.
+
+{% Aside 'caution' %}
+Some sites leave form submit buttons disabled until the user has correctly completed all form
+fields. It's best not to do that, since users may accidentally leave out a required value, or use an
+invalid value, then tap or click the disabled submit button and assume your site is broken! Even if
+you mark form values as invalid or missing, the user may not see the warnings (especially for longer
+forms, and on mobile). Better to validate inline while the user is entering data–*and* when they
+try to submit the form.
+{% endAside %}
+
+Here is how your code should look at this point, with the addition of some comments and a
+`validate()` function:
+
+{% Glitch {
+  id: 'payment-form-codelab-4',
+  path: 'js/main.js',
+  height: 500,
+  previewSize: 0
+} %}
+
+* You'll notice that the JavaScript includes commented-out code for data validation. This code uses
+the [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints)
+(which is [widely supported](https://caniuse.com/#search=constraint%20validation)) to add custom
+validation, accessing built-in browser UI to set focus and display prompts. Un-comment the code and
+try it out. You'll need to set appropriate values for `someregex` and `message`, and set a value for
+`someField`.
+
+* What [analytics and Real User Monitoring data](/payment-and-address-form-best-practices#analytics-rum)
+would you monitor in order to identify ways to improve your forms?
+
+Your complete payment form should now look like this:
+
+{% Glitch {
+  id: 'payment-form',
+  path: 'index.html',
+  height: 750
+} %}
+
+* [Try out your form on different devices](#different-devices). What devices and browsers are you
+targeting? How could the form be improved?
+
+## Going further
+
+Consider the following crucial form features that are not covered in this codelab:
+
+* Link to your Terms of Service and privacy policy documents: make it clear to users how you
+safeguard their data.
+
+* Style and branding: make sure these match the rest of your site. When entering names and addresses
+and making payment, users need to feel comfortable, trusting that they're still in the right place.
+
+* [Analytics and Real User Monitoring](/payment-and-address-form-best-practices#analytics-rum):
+enable the performance and usability of your form design to be tested and monitored for real users.
diff --git a/src/site/content/en/blog/codelab-sign-in-form-best-practices/email-keyboard.png b/src/site/content/en/blog/codelab-sign-in-form-best-practices/email-keyboard.png
deleted file mode 100644
index 06e7d8dd366..00000000000
Binary files a/src/site/content/en/blog/codelab-sign-in-form-best-practices/email-keyboard.png and /dev/null differ
diff --git a/src/site/content/en/blog/codelab-sign-in-form-best-practices/index.md b/src/site/content/en/blog/codelab-sign-in-form-best-practices/index.md
index f29d67e9596..0eb6ec76a7f 100644
--- a/src/site/content/en/blog/codelab-sign-in-form-best-practices/index.md
+++ b/src/site/content/en/blog/codelab-sign-in-form-best-practices/index.md
@@ -1,12 +1,12 @@
 ---
 layout: codelab
-title: Sign-in form best practices codelab
+title: Use cross-platform browser features to build a sign-in form
 authors:
   - samdutton
 scheduled: true
 date: 2020-06-29
 updated: 2020-08-05
-description: Use cross-platform browser features to build a simple email/password sign-in form that's secure, accessible and easy to use.
+description: Use cross-platform browser features to build a simple sign-in form that's secure, accessible, and easy to use.
 tags:
   - forms
   - identity
@@ -19,11 +19,11 @@ glitch_path: index.html
 related_post: sign-in-form-best-practices
 ---
 
-This codelab shows you how to build a sign-in form that is secure, accessible, and easy to use.
+This codelab teaches you how to build a sign-in form that's secure, accessible, and easy to use.
 
-## Step 1: Use meaningful HTML
+## 1. Use meaningful HTML
 
-Use elements built for the job: 
+Use these elements built for the job: 
 * `<form>`
 * `<section>`
 * `<label>`
@@ -32,52 +32,55 @@ Use elements built for the job:
 As you'll see, these elements enable built-in browser functionality, improve 
 accessibility, and add meaning to your markup.
 
-{% Instruction 'remix' %}
-* Add the following code inside the `<body>` element:
+1. Click Remix to edit to make the project editable.
 
-```html
-<form action="#" method="post">
-  <h1>Sign in</h1>
-  <section>
-    <label>Email</label>
-    <input>
-  </section>
-  <section>
-    <label>Password</label>
-    <input>
-  </section>
-  <button>Sign in</button>
-</form>
-```
+2. Add the following code to the `<body>` element:
 
-Here's how your `index.html` should look at this point:
+  ```html
+  <form action="#" method="post">
+    <h1>Sign in</h1>
+    <section>
+      <label>Email</label>
+      <input>
+    </section>
+    <section>
+      <label>Password</label>
+      <input>
+    </section>
+    <button>Sign in</button>
+  </form>
+  ```
 
-{% Glitch {
-  id: 'sign-in-form-codelab-1',
-  path: 'index.html',
-  height: 480
-} %}
+   Here's how your `index.html` file should look at this point:
 
-Click **View App** to preview your sign-in form.
-The HTML you just added is valid and correct, but the default browser styling
-means it looks terrible and it's hard to use, especially on mobile.
+  {% Glitch {
+    id: 'sign-in-form-codelab-1',
+    path: 'index.html',
+    previewSize: 0,
+    height: 480
+  } %}
 
-Click **View Source** to return to your source code.
+3. Click **View App** to preview your sign-in form.
+The HTML that you added is valid and correct, but the default browser styling
+makes it looks terrible and hard to use, especially on mobile devices.
 
-## Step 2: Design for fingers and thumbs
+4. Click **View Source** to return to your source code.
 
-Ensure your inputs work well on mobile by adjusting padding, margins, and 
-font sizes. 
+## 2. Design for fingers and thumbs
 
-Copy and paste the following CSS into your own `style.css` file:
+Adjust padding, margins, and font sizes to ensure that your inputs work well on mobile. 
 
-{% Glitch {
-  id: 'sign-in-form-codelab-2',
-  path: 'style.css'
-} %}
+1. Copy the following CSS and paste it into your `style.css` file:
+
+  {% Glitch {
+    id: 'sign-in-form-codelab-2',
+    previewSize: 0,
+    path: 'style.css'
+  } %}
+
+2. Click **View App** to see your freshly styled sign-in form. 
 
-Click **View App** to check out your freshly styled sign-in form. Then
-click **View Source** to return to `style.css`.
+3. Click **View Source** to return to your `style.css` file.
 
 That's quite a lot of code! The main things to be aware of are the changes to sizes:
 
@@ -89,73 +92,71 @@ This doesn't work yet.
 
 The CSS layout is mobile-first:
 
-* The default CSS is for viewports less than `450px` wide.
-* The media query section sets overrides for viewports that are at least `450px` wide.
+* The default CSS is for viewports less than 450 pixels wide.
+* The media query section sets overrides for viewports that are at least 450 pixels wide.
 
-When building your own form like this, it's very important at this point to
+When building your own form like this, it's very important at this point in the process to
 test your code on real devices on desktop and mobile:
 
 * Is label and input text readable, especially for people with low vision?
 * Are the inputs and **Sign in** button large enough to use as touch targets for thumbs?
 
-## Step 3: Add input attributes to enable built-in browser features
+## 3. Add input attributes to enable built-in browser features
 
 Enable the browser to store and autofill input values, and provide access to 
-built-in password management features.
+built-in password-management features.
 
-Add attributes to your form HTML so it looks like this:
+1. Add attributes to your form HTML so it looks like this:
+
+  ```html/3,4,7,8,10
+  <form action="#" method="post">
+    <h1>Sign in</h1>
+    <section>        
+      <label for="email">Email</label>
+      <input id="email" name="email" type="email" autocomplete="username" required autofocus>
+    </section>
+    <section>        
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" autocomplete="current-password" required>
+    </section>
+    <button id="sign-in">Sign in</button>
+  </form>
+  ```
+
+2. View your app again and then click **Email**.
+
+   Notice how focus moves to the email input. This is because the label is associated with the input through the `for="email"` attribute. Screenreaders also 
+   announce the label text when the label or the label's associated input gets focus.
+
+3. Focus the email input on a mobile device. 
+
+   Notice how the keyboard is optimized for typing an email address. For example, the `@` and `.` characters might be shown on the primary keyboard, and the 
+   operating system might show stored emails above the keyboard. All of this happens because the `type="email"` attribute is applied to an `<input>` element.
+
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dUtDcvYy1RMzEYBi7Ce0.png", alt="The default email keyboard on iOS.", width="800", height="1504" %}
+  </figure>
+
+4. Type some text into the password input. 
+
+   The text is hidden by default because the `type="password"` attribute has been applied to the element.
 
-```html/3,4,7,8,10
-<form action="#" method="post">
-  <h1>Sign in</h1>
-  <section>        
-    <label for="email">Email</label>
-    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
-  </section>
-  <section>        
-    <label for="current-password">Password</label>
-    <input id="password" name="password" type="password" autocomplete="new-password" required>
-  </section>
-  <button id="sign-in">Sign in</button>
-</form>
-```
-
-View your app again and then click the label that says **Email**.
-Notice how focus moves to the email input.
-This is because the label is associated with the input via the `for="email"` attribute.
-Screenreaders also announce the label text when the label or the label's associated
-input gets focus.
-
-Try focusing the email input on a mobile device. Notice how the keyboard is optimized
-for typing an email address. For example, the `@` and `.` characters might be shown on
-the primary keyboard, and the operating system might show stored emails above the keyboard.
-All of this happens because the `type="email"` attribute is applied to an `<input>` element.
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="email-keyboard.png" 
-       alt="The default email keyboard on iOS.">
-</figure>
-
-Try typing some text into the password input. The text is hidden by default because the
-`type="password"` attribute has been applied to the element.
 
 * The `autocomplete`, `name`, `id`, and `type` attributes help browsers understand 
-the role of inputs in order to store data that can later be used for autofill. 
+the role of inputs in order to store data that can be used later for autofill. 
+
+5. Focus the email input on a desktop device and type some text. 
 
-Try focusing the email input on a desktop device and start typing.
-You can find the URL of your app by clicking **Fullscreen**
-![The Fullscreen icon](/images/glitch/fullscreen.svg). 
-If you've stored any email addresses in your browser, you'll probably see a popup that 
-allows you to select from those stored emails. This happens because the 
-`autocomplete="username"` attribute was applied to the email input.
+   You can see the URL of your app when you click **Fullscreen** ![The Fullscreen icon](/images/glitch/fullscreen.svg). If you stored any email addresses in your 
+   browser, you probably see a dialog that lets you select from those stored emails. This happens because the `autocomplete="username"` attribute applied to the 
+   email input.
 
 * `autocomplete="username"` and `autocomplete="current-password"` help browsers use 
 stored values to autofill the inputs.
 
 {% Aside %}
-For email inputs use `autocomplete="username"`, since `username` is recognized 
-by password managers in modern browsers—even though you should use `type="email"` 
+For email inputs, use `autocomplete="username"` because `username` is recognized 
+by password managers in modern browsers, even though you should use `type="email"`, 
 and you may want to use `id="email"` and `name="email"`.
 {% endAside %}
 
@@ -163,14 +164,14 @@ Different browsers use [different techniques](/sign-in-form-best-practices/#pass
 to work out the role of form inputs and provide autofill for a range of 
 different websites. 
 
-Try this out for yourself by adding and removing attributes.
+Add and remove attributes to try this yourself.
 
-It's extremely important to test behaviour across platforms. Try entering values 
-and submitting the form in different browsers on different devices. It's easy to 
-test on a range of platforms using BrowserStack, which is [free for open source 
-projects](https://www.browserstack.com/open-source). Try it out!
+It's extremely important to test behavior across platforms. You should enter values 
+and submit the form in different browsers on different devices. It's easy to 
+test on a range of platforms with BrowserStack, which is [free for open source 
+projects](https://www.browserstack.com/open-source). Try it!
 
-Here's how your `index.html` should look at this point:
+Here's how your `index.html` file should look at this point:
 
 {% Glitch {
   id: 'sign-in-form-codelab-3',
@@ -178,82 +179,80 @@ Here's how your `index.html` should look at this point:
   height: 480
 } %}
 
-## Step 4: Add UI to toggle password display
-
-Enable users to see the password they entered.
-
-Usability experts [strongly recommend](https://www.nngroup.com/articles/stop-password-masking/) adding a **Show password** icon or button to enable users to check the text they've entered. There's currently [no built-in way to do this](https://twitter.com/sw12/status/1251191795377156099), so you'll need to implement it yourself with JavaScript.  
-
-Code to add **Show password** functionality is straightforward—this example uses text, not an icon.
-
-Update [index.html](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=index.html:22:2), [style.css](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=style.css:34:0) and [script.js](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=script.js) as follows.
-
-Add the toggle button to the password section in the HTML:
-
-```html/2
-<section>
-  <label for="password">Password</label>
-  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
-  <input id="password" name="password" type="password" autocomplete="current-password" required>
-</section>
-```
-
-Add the following CSS to the bottom of `style.css`.
-This makes the **Show password** button actually
-looks like plain text, and displays it at the top right of the password section:
-
-```css
-button#toggle-password {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-weight: 300;
-  padding: 0;
-  position: absolute;
-  top: -4px;
-  right: -2px;
-}
-```
-
-Add the following JavaScript to `script.js` to toggle password display and set the appropriate `aria-label`:
-
-```javascript
-const passwordInput = document.getElementById('password');
-const togglePasswordButton = document.getElementById('toggle-password');
-
-togglePasswordButton.addEventListener('click', togglePassword);
-
-function togglePassword() {
-  if (passwordInput.type === 'password') {
-    passwordInput.type = 'text';
-    togglePasswordButton.textContent = 'Hide password';
-    togglePasswordButton.setAttribute('aria-label',
-      'Hide password.');
-  } else {
-    passwordInput.type = 'password';
-    togglePasswordButton.textContent = 'Show password';
-    togglePasswordButton.setAttribute('aria-label',
-      'Show password as plain text. ' +
-      'Warning: this will display your password on the screen.');
+## 4. Add UI to toggle password display
+
+Usability experts [strongly recommend](https://www.nngroup.com/articles/stop-password-masking/) the addition of an icon or button that lets users see the text that they enter in the **Password** field. There's [no built-in way to do this](https://twitter.com/sw12/status/1251191795377156099), so you need to implement it yourself with JavaScript. 
+
+The code to add this functionality is straightforward. This example uses text, not an icon.
+
+Update the [`index.html`](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=index.html:22:2), [`style.css`](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=style.css:34:0), and [`script.js`](https://glitch.com/edit/#!/sign-in-form-codelab-4?path=script.js) files as follows.
+
+1. Add a toggle to the password section in the `index.html` file:
+
+  ```html/2
+  <section>
+    <label for="password">Password</label>
+    <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+    <input id="password" name="password" type="password" autocomplete="current-password" required>
+  </section>
+  ```
+
+2. Add the following CSS to the bottom of the `style.css` file:
+
+  ```css
+  button#toggle-password {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-weight: 300;
+    padding: 0;
+    position: absolute;
+    top: -4px;
+    right: -2px;
   }
-}
-```
+  ```
+
+   This makes the **Show password** button look like plain text and displays it in the top-right corner of the password section.
+
+3. Add the following JavaScript to the `script.js` file to toggle password display and set the appropriate `aria-label`:
+
+  ```javascript
+  const passwordInput = document.getElementById('password');
+  const togglePasswordButton = document.getElementById('toggle-password');
+
+  togglePasswordButton.addEventListener('click', togglePassword);
+
+  function togglePassword() {
+    if (passwordInput.type === 'password') {
+      passwordInput.type = 'text';
+      togglePasswordButton.textContent = 'Hide password';
+      togglePasswordButton.setAttribute('aria-label',
+        'Hide password.');
+    } else {
+      passwordInput.type = 'password';
+      togglePasswordButton.textContent = 'Show password';
+      togglePasswordButton.setAttribute('aria-label',
+        'Show password as plain text. ' +
+        'Warning: this will display your password on the screen.');
+    }
+  }
+  ```
+
+4. Try the show password logic now. 
+
+   a. View your app. 
+   b. Enter some text in the password field.
+   c. Click **Show password**.
 
-Try out the show password logic now. View your app, enter some text into the
-password field, and then click the **Show password** button.
-Try out your new feature on multiple browsers on different operating systems.
+5. Repeat the fourth step on multiple browsers on different operating systems.
 
-Try it out! Think about UX design: will users notice the **Show password** 
-button and understand it? Is there a better way to provide this functionality? 
-This is a good moment to try out [Discount Usability Testing](https://www.nngroup.com/articles/discount-usability-20-years/) with a small group of friends or colleagues.
+Think about UX design: will users notice **Show password** and understand it? Is there a better way to provide this functionality? This is a good moment to try [discount usability testing](https://www.nngroup.com/articles/discount-usability-20-years/) with a small group of friends or colleagues.
 
-To understand how this site works for screenreaders, install the [ChromeVox extension](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) and navigate through the form. Do the 
-`aria-label` values work as intended?
+To understand how this functionality works for screenreaders, install the [ChromeVox Classic Extension](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) and navigate through the form. Do the `aria-label` values work as intended?
 
-**Bonus points**: Sites such as [Gmail](https://mail.google.com) use icons, not 
-text, to toggle password display. When you're done with this codelab, try implementing this using SVG images: 
-the [Material Design site](https://material.io/resources/icons/?icon=visibility)
-has high quality free icons available for download. 
+Some websites, such as [Gmail](https://mail.google.com), use icons, not 
+text, to toggle password display. When you're done with this codelab, implement this with SVG images. 
+[Material Design](https://material.io/resources/icons/?icon=visibility) offers high-quality icons that you can download for free. 
 
 Here's how your code should look at this point:
 
@@ -264,125 +263,121 @@ Here's how your code should look at this point:
 } %}
 
 
-## Step 5: Add form validation
+## 5. Add form validation
 
-Help users enter data correctly: validate data before form submission, and show 
-users what they need to change.
+You can help users enter their data correctly when you let them validate their data before form submission and show them what they need to change.
 
 HTML form elements and attributes have built-in features for basic validation, 
-but you should also use JavaScript to do more robust validation while users are 
-entering data and when they attempt to submit the form.
+but you should also use JavaScript to do more robust validation while users enter data and when they attempt to submit the form.
 
 {% Aside 'warning' %}
 Client-side validation helps users enter data and can avoid unnecessary server load, 
-but you must always validate and sanitize data on your back-end.
+but you must always validate and sanitize data on your backend.
 {% endAside %}
 
 This step uses the [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) 
 (which is [widely supported](https://caniuse.com/#search=constraint%20validation)) 
-to add custom validation, using built-in browser UI to set focus and display prompts. 
+to add custom validation with built-in browser UI that sets focus and displays prompts. 
 
 Tell users the constraints for passwords and any other inputs. Don't make them guess!
 
-Update the password section of `index.html`:
+1. Update the password section of the `index.html` file:
 
-```html
-<section>
-  <label for="password">Password</label>
-  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
-  <input id="password" name="password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required>
-	<div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
-</section>
-```
+  ```html
+  <section>
+    <label for="password">Password</label>
+    <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+    <input id="password" name="password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required>
+    <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
+  </section>
+  ```
 
 This adds two new features:
-* Information about password constraints.
-* An `aria-describedby` attribute for the password input. Screenreaders read the label text, the input type (password), and then the description. 
-
-Add the following CSS to the bottom of `style.css`:
-
-```css
-div#password-constraints {
-  margin: 5px 0 0 0;
-  font-size: 16px;
-}
-```
-
-Add the following JavaScript to `script.js`:
-
-```javascript
-passwordInput.addEventListener('input', resetCustomValidity); 
-function resetCustomValidity() {
-  passwordInput.setCustomValidity('');
-}
-
-// A production site would use more stringent password testing. 
-function validatePassword() {
-  let message= '';
-  if (!/.{8,}/.test(passwordInput.value)) {
-		message = 'At least eight characters. ';
+* Information about password constraints
+* An `aria-describedby` attribute for the password input (Screenreaders read the label text, the input type (password), and then the description.) 
+
+2. Add the following CSS to the bottom of the `style.css` file:
+
+  ```css
+  div#password-constraints {
+    margin: 5px 0 0 0;
+    font-size: 16px;
   }
-	if (!/.*[A-Z].*/.test(passwordInput.value)) {
-		message += 'At least one uppercase letter. ';
+  ```
+
+3. Add the following JavaScript to `script.js` file:
+
+  ```javascript
+  passwordInput.addEventListener('input', resetCustomValidity); 
+  function resetCustomValidity() {
+    passwordInput.setCustomValidity('');
   }
-	if (!/.*[a-z].*/.test(passwordInput.value)) {
-		message += 'At least one lowercase letter.';
+
+  // A production site would use more stringent password testing. 
+  function validatePassword() {
+    let message= '';
+    if (!/.{8,}/.test(passwordInput.value)) {
+      message = 'At least eight characters. ';
+    }
+    if (!/.*[A-Z].*/.test(passwordInput.value)) {
+      message += 'At least one uppercase letter. ';
+    }
+    if (!/.*[a-z].*/.test(passwordInput.value)) {
+      message += 'At least one lowercase letter.';
+    }
+    passwordInput.setCustomValidity(message);
   }
-  passwordInput.setCustomValidity(message);
-}
-
-const form = document.querySelector('form');
-const signinButton = document.querySelector('button#sign-in');
-
-form.addEventListener('submit', handleFormSubmission);                       
-
-function handleFormSubmission(event) {
-  event.preventDefault();
-  validatePassword();
-  form.reportValidity();
-  if (form.checkValidity() === false) {
-  } else {
-    // On a production site do form submission.
-    alert('Logging in!')
-    signinButton.disabled = 'true';
+
+  const form = document.querySelector('form');
+  const signinButton = document.querySelector('button#sign-in');
+
+  form.addEventListener('submit', handleFormSubmission);                       
+
+  function handleFormSubmission(event) {
+    event.preventDefault();
+    validatePassword();
+    form.reportValidity();
+    if (form.checkValidity() === false) {
+    } else {
+      // On a production site do form submission.
+      alert('Logging in!')
+      signinButton.disabled = 'true';
+    }
   }
-}
-```
+  ```
 
-Try it out! All recent browsers have built-in features for form validation and 
-support validation with JavaScript.
+4. Try it! 
 
-* Enter an invalid email address and press **Sign in**. The browser will 
-display a warning—no JavaScript required!
+   All recent browsers have built-in features for form validation and 
+   support validation with JavaScript.
 
-* Enter a valid email but then press **Sign in** without entering a password value. The browser warns that 
-you missed a required value and sets focus on the password input.
+   a. Enter an invalid email address and click **Sign in**. The browser displays a warning—no JavaScript required!
 
-* Enter an invalid password and press **Sign in**. Now you'll see different 
-messages, depending on what's wrong. 
+   b. Enter a valid email address, but then click **Sign in** without a password value. The browser warns that you missed a required value and sets focus on the 
+      password input.
 
-**For bonus points:** try out different ways to help users enter email addresses 
-and passwords. [Better password form fields](https://aerotwist.com/blog/better-password-form-fields/) has some clever suggestions.
+   c. Enter an invalid password and click **Sign in**. Now you see different messages depending on what's wrong. 
 
-Here's how your code should look at this point:
+5. Try different ways to help users enter email addresses and passwords. [Better password form fields](https://aerotwist.com/blog/better-password-form-fields/) 
+   offers some clever suggestions.
 
-{% Glitch {
-  id: 'sign-in-form-codelab-5',
-  path: 'style.css',
-  height: 480
-} %}
+   Here's how your code should look at this point:
+
+  {% Glitch {
+    id: 'sign-in-form-codelab-5',
+    path: 'style.css',
+    previewSize: 0,
+    height: 480
+  } %}
 
-## Going further
+## Go further
 
-We won't show them here, but four crucial sign-in form features are still missing:
+They're not shown in this codelab, but you still need these four crucial sign-in form features:
 
-* Add a **Forgot your password?** link: make it easy for users to reset their password.
+* Add **Forgot your password?**, a button that makes it easy for users to reset their passwords.
 
-* Link to your Terms of Service and privacy policy documents: make it clear to 
-users from the start how you safeguard their data.
+* Link to your terms of service and privacy policy documents so that your users know how you safeguard their data.
 
-* Consider style and branding: make sure these match the rest of your site. 
+* Consider style and branding, and ensure that these additional features match the rest of your website. 
 
-* Add [Analytics and RUM](/sign-in-form-best-practices#analytics): enable the 
-performance and usability of your form design to be tested and monitored for 
-real users. 
+* Add [Analytics and RUM](/sign-in-form-best-practices#analytics) so that you can test and monitor the performance and usability of your form design.
diff --git a/src/site/content/en/blog/codelab-sign-up-form-best-practices/index.md b/src/site/content/en/blog/codelab-sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..fdd63609ac0
--- /dev/null
+++ b/src/site/content/en/blog/codelab-sign-up-form-best-practices/index.md
@@ -0,0 +1,281 @@
+---
+layout: codelab
+title: Sign-up form best practices codelab
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2020-12-09
+description: Use cross-platform browser features to build a simple sign-up form that's secure, accessible, and easy to use.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+glitch: sign-up-form-codelab-1
+glitch_path: index.html
+related_post: sign-up-form-best-practices
+---
+
+This codelab shows you how to build a sign-up form that's secure, accessible, and easy to use.
+
+## Step 1: Use meaningful HTML
+
+In this step you'll learn how to use form elements to make the most of built-in browser features.
+
+{% Instruction 'remix' %}
+
+Take a look at the HTML for your form in `index.html`. You'll see there are inputs for name, email 
+and password. Each is in a section, and each has a label. The **Sign up** button is… a `<button>`! 
+  Later in this codelab, you'll learn the special powers of all these elements.
+
+{% Aside %}
+`<input>` elements don't have closing tags. That's because they are [void](https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements) (empty) elements: they don't have any
+content in themselves. A "/" character at the end of a void element is optional: either `<input>` 
+or `<input />` is OK.
+{% endAside %}
+
+```html
+<form action="#" method="post">
+        
+  <h1>Sign up</h1>
+  
+  <section>
+    <label>Full name</label>
+    <input>
+  </section>
+  
+  <section>
+    <label>Email</label>
+    <input>
+  </section>
+  
+  <section>
+    <label>Password</label>
+    <input>
+  </section>
+  
+  <button id="sign-up">Sign up</button>
+  
+</form>
+```
+
+Click **View App** to preview your sign-up form. This shows you what a form looks like with no CSS other than the 
+[default browser styles](https://bitsofco.de/a-look-at-css-resets-in-2018). 
+
+* Do the default styles *look* OK? What would you change to make the form look better?
+* Do the default styles *work* OK? What problems might be encountered using your form as it is? What 
+about on mobile? What about for screenreaders or other [assistive technologies](/a11y-tips-for-web-dev)?
+* Who are your users, and what devices and browsers are you targeting? 
+
+{% Aside %}
+[Browser Default Styles](https://browserdefaultstyles.com) lists default CSS for HTML elements.
+{% endAside %}
+
+### Test your form
+
+You could acquire a lot of hardware and set up a 
+[device lab](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/), but there are 
+cheaper and simpler ways to try out your form on a range of browsers, platforms and devices:
+
+* [Use Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/) 
+to simulate mobile devices. 
+* [Send the URL from your computer to your phone](https://support.google.com/chrome/answer/9430554).
+* Use a service such as [BrowserStack](https://www.browserstack.com/open-source) to test on a range 
+of devices and browsers. 
+* Try out the form using a screenreader tool such as the [ChromeVox](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) Chrome extension.
+
+{% Aside 'warning' %}
+Testing your site on a range of devices and browsers is especially important for forms, because 
+[small problems can cause high bounce rates](https://baymard.com/checkout-usability) and cause users 
+to give up on creating an account or completing a purchase.
+{% endAside %}
+
+Click **View App** to preview your sign-up form. 
+
+* Try out your form on different devices using Chrome DevTools Device Mode.
+* Now open the form on a phone or other real devices. What differences do you see?
+
+## Step 2: Add CSS to make the form work better
+
+Click **View Source** to return to your source code.
+
+There's nothing wrong with the HTML so far, but you need to make sure your form works well for a 
+range of users on mobile and desktop.
+
+In this step you'll add CSS to make the form easier to use.
+
+Copy and paste all the following CSS into `css/main.css` file:
+
+{% Glitch {
+  id: 'sign-up-form-codelab-2',
+  path: 'css/main.css',
+  height: 400,
+  previewSize: 0
+} %}
+
+Click **View App** to see your styled sign-up form. Then click **View Source** to return to 
+`css/main.css`.
+
+* Does this CSS work for a variety of browsers and screen sizes?
+
+* Try adjusting `padding`, `margin`, and `font-size` to suit your test devices.
+
+* The CSS is mobile-first. [Media queries](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries) 
+are used to apply CSS rules for viewports that are at least `400px` wide, and then again for 
+viewports that are at least `500px` wide. Are these [breakpoints](https://www.browserstack.com/guide/responsive-design-breakpoints) 
+adequate? How should you choose breakpoints for forms?
+
+{% Aside %}
+**Viewport** in this context means the display area available for your page. Mobile phones have a 
+smaller viewport than laptops, and a small browser window on a desktop monitor has a smaller 
+viewport than a maximized browser window.
+{% endAside %}
+
+
+## Step 3: Add attributes to help users enter data
+
+In this step you add attributes to your input elements to enable the browser to store and autofill 
+form field values, and warn of fields with missing or invalid data.
+
+Update your `index.html` file so the form code looks like this:
+
+```html
+<form action="#" method="post">
+        
+  <h1>Sign up</h1>
+  
+  <section>        
+    <label for="name">Full name</label>
+    <input id="name" name="name" autocomplete="name" 
+           pattern="[\p{L}\.\- ]+" required>
+  </section>
+
+  <section>        
+    <label for="email">Email</label>
+    <input id="email" name="email" autocomplete="username"
+           type="email" required>
+  </section>
+  
+  <section>
+    <label for="password">Password</label>
+    <input id="password" name="password" autocomplete="new-password" 
+           type="password" minlength="8" required>
+  </section>
+  
+  <button id="sign-up">Sign up</button>
+  
+</form>
+```
+
+The `type` values do a lot:
+* `type="password"` obscures text as it's entered and enables the browser's 
+[password manager](https://passwords.google.com/) to suggest a strong password. 
+* `type="email"` provides basic validation and ensures mobile users get an appropriate keyboard. Try 
+it out!
+
+Click **View App** and then click the **Email** label. What happens? Focus moves to the email 
+input because the label has a `for` value that matches the email input's `id`. The other labels and 
+inputs work the same way. Screenreaders also announce label text when the label (or the label's 
+associated input) gets focus. You can try that using the [ChromeVox extension](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en).
+
+Try submitting the form with an empty field. The browser won't submit the form, and it prompts to 
+complete missing data and sets focus. That's because you added the `require` attribute to all the 
+inputs. Now try submitting with a password that has less than eight characters. The browser warns that 
+the password isn't long enough and sets focus on the password input because of the `minlength="8"` 
+attribute. The same works for `pattern` (used for the name input) and other 
+[validation constraints](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation). 
+The browser does all this automatically, without needing any extra code.
+
+Using the `autocomplete` value `name` for the **Full name** input makes sense, but what about the 
+other inputs? 
+* `autocomplete="username"` for the **Email** input means the browser's password manager will store 
+the email address as the 'name' for this user (the username!) to go with the password.
+* `autocomplete="new-password"` for **Password** is a hint to the password manager that it should 
+offer to store this value as the password for the current site. You can then use 
+`autocomplete="current-password"` to enable autofill in a sign-in form (remember, this is 
+*sign-up* form). 
+
+{% Aside %}
+[Sign-in form best practices](/sign-in-form-best-practices) has more tips for improving form design, 
+layout, and accessibility.
+{% endAside %}
+
+
+## Step 4: Help users enter secure passwords 
+
+With the form as it is, did you notice anything wrong with the password input?
+
+There are two issues:
+* There's no way to know if there are constraints on the password value.
+* You can't see the password to check if you got it right.
+
+Don't make users guess!
+
+Update the password section of `index.html` with the following code:
+
+```html
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
+          Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="new-password" 
+         minlength="8" aria-describedby="password-constraints" required>
+  <div id="password-constraints">Eight or more characters.</div>
+</section>
+```
+
+This adds new features to help users enter passwords:
+
+* A button (actually just text) to toggle password display. (The 
+  button functionality will be added with JavaScript.)
+* An `aria-label` attribute for the password-toggle button. 
+* An `aria-describedby` attribute for the password input. Screenreaders 
+  read the label text, the input type (password), and then the description. 
+
+To enable the password-toggle button and show users information about password constraints, copy all the JavaScript below and paste it into your own `js/main.js` file.
+
+{% Glitch {
+  id: 'sign-up-form-codelab-4',
+  path: 'js/main.js',
+  height: 400,
+  previewSize: 0
+} %}
+
+
+(The CSS is already in place from step 2. Take a look, to see how the password-toggle button is 
+styled and positioned.)
+
+* Would an [icon](https://material.io/resources/icons/?icon=visibility) work better than text to 
+toggle password display? Try [Discount Usability Testing](https://www.nngroup.com/articles/discount-usability-20-years/) 
+with a small group of friends or colleagues.
+
+* To experience how screenreaders work with forms, install the [ChromeVox extension](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) and navigate through the form. 
+Could you complete the form using ChromeVox only? If not, what would you change?
+
+Here's how your form should look at this point:
+
+{% Glitch {
+  id: 'sign-up-form-codelab-4',
+  height: 690
+} %}
+
+## Going further
+
+This codelab doesn't cover several important features:
+
+* Checking for compromised passwords. You should never allow passwords that have been compromised. 
+You can (and should) [use a password-checking service to catch compromised passwords](/sign-up-form-best-practices/#no-compromised-passwords). 
+You can use an existing service or run one yourself on your own servers. Try it out! Add password 
+checking to your form.
+
+* Link to your Terms of Service and privacy policy documents: make it clear to users how you 
+safeguard their data.
+
+* Style and branding: make sure these match the rest of your site. When entering names and addresses 
+and making payment, users need to feel comfortable, trusting that they're still in the right place.
+
+* [Analytics and Real User Monitoring](/payment-and-address-form-best-practices#analytics-rum): 
+enable the performance and usability of your form design to be tested and monitored for real users. 
diff --git a/src/site/content/en/blog/color-scheme/dark-computed.png b/src/site/content/en/blog/color-scheme/dark-computed.png
deleted file mode 100644
index c1c357eb0aa..00000000000
Binary files a/src/site/content/en/blog/color-scheme/dark-computed.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/dark-styles.png b/src/site/content/en/blog/color-scheme/dark-styles.png
deleted file mode 100644
index 5c31ce44ab1..00000000000
Binary files a/src/site/content/en/blog/color-scheme/dark-styles.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/demo-dark.png b/src/site/content/en/blog/color-scheme/demo-dark.png
deleted file mode 100644
index 32a7fa21b14..00000000000
Binary files a/src/site/content/en/blog/color-scheme/demo-dark.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/demo-light.png b/src/site/content/en/blog/color-scheme/demo-light.png
deleted file mode 100644
index 21c3e521624..00000000000
Binary files a/src/site/content/en/blog/color-scheme/demo-light.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/hero.jpg b/src/site/content/en/blog/color-scheme/hero.jpg
deleted file mode 100644
index 06e20a1c9b0..00000000000
Binary files a/src/site/content/en/blog/color-scheme/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/index.md b/src/site/content/en/blog/color-scheme/index.md
index 846d41980ac..a721b88b74c 100644
--- a/src/site/content/en/blog/color-scheme/index.md
+++ b/src/site/content/en/blog/color-scheme/index.md
@@ -6,8 +6,8 @@ subhead: |
 authors:
   - thomassteiner
 date: 2020-04-08
-updated: 2020-06-16
-hero: hero.jpg
+updated: 2021-10-19
+hero: image/admin/rOe3wxcy28m5DCKcHv7E.jpg
 alt: Pigeons on a wall with a sharp black and white contrast in the background.
 description: |
   The color-scheme CSS property and the corresponding meta tag
@@ -17,17 +17,19 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - css
-  - dark-mode
-  - dark-theme
-  - prefers-color-scheme
-  - color-scheme
+  # - dark-mode
+  # - dark-theme
+  # - prefers-color-scheme
+  # - color-scheme
+feedback:
+  - api
 ---
 ## Background
 
 ### The `prefers-color-scheme` user preference media feature
 
 The
-[`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+[`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme)
 user preference media feature gives developers full control over their pages' appearances.
 If you are unfamiliar with it, please read my article
 [`prefers-color-scheme`: Hello darkness, my old friend](/prefers-color-scheme/),
@@ -40,6 +42,16 @@ by allowing you to opt your page in to theme-specific defaults of the user agent
 such as, for example, form controls, scroll bars, as well as CSS system colors.
 At the same time, this feature prevents browsers from applying any transformations on their own.
 
+### Browser support
+
+#### `prefers-color-scheme`
+
+{% BrowserCompat 'css.at-rules.media.prefers-color-scheme' %}
+
+#### `color-scheme`
+
+{% BrowserCompat 'css.properties.color-scheme' %}
+
 ### The user agent stylesheet
 
 Before I continue, let me briefly describe what a user agent stylesheet is.
@@ -147,14 +159,6 @@ In this list, `light` represents a light color scheme,
 with light background colors and dark foreground colors,
 whereas `dark` represents the opposite, with dark background colors and light foreground colors.
 
-{% Aside 'warning' %}
-  Previously, the specification allowed an additional value `light only`
-  that indicated that the element had to be rendered with a light color scheme if possible,
-  even if the user's preference is for a different color scheme.
-  Authors *should not* use this value, and should instead ensure their page renders well
-  with whatever color scheme the user prefers.
-{% endAside %}
-
 For all elements, rendering with a color scheme should cause the colors used
 in all browser-provided UI for the element to match with the intent of the color scheme.
 Examples are scroll bars, spellcheck underlines, form controls, etc.
@@ -185,7 +189,7 @@ Honoring the `color-scheme` CSS property requires the CSS to be first downloaded
 (if it is referenced via `<link rel="stylesheet">`) and to be parsed.
 To aid user agents in rendering the page background with the desired color scheme *immediately*,
 a `color-scheme` value can also be provided in a
-[`<meta name="color-scheme">`](https://drafts.csswg.org/css-color-adjust/#color-scheme-meta)
+[`<meta name="color-scheme">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme)
 element.
 
 ```html
@@ -273,10 +277,9 @@ based on whether dark mode is enabled, following the rules
 in the developer-provided inline stylesheet on the page.
 It is either `gainsboro` or `darkslategray`.
 
-<figure class="w-figure">
-  <img src="light-styles.png" class="w-screenshot w-screenshot-filled"
-       alt="A page in light mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSgOIiGRqjw2PvRlVCaV.png", alt="A page in light mode.", width="800", height="322" %}
+  <figcaption>
     <strong>Light mode:</strong> Styles specified by the developer and the user agent.
     The text is black and the background is white as per the user agent stylesheet.
     The <code>&lt;fieldset&gt;</code> element's <code>background-color</code> is <code>gainsboro</code>
@@ -284,10 +287,9 @@ It is either `gainsboro` or `darkslategray`.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="dark-styles.png" class="w-screenshot w-screenshot-filled"
-       alt="A page in dark mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qqkHz83kerktbDIGCJeG.png", alt="A page in dark mode.", width="800", height="322" %}
+  <figcaption>
     <strong>Dark mode:</strong> Styles specified by the developer and the user agent.
     The text is white and the background is black as per the user agent stylesheet.
     The <code>&lt;fieldset&gt;</code> element's <code>background-color</code> is <code>darkslategray</code>
@@ -301,10 +303,9 @@ Its `color` is set to the
 system color, and its `background-color` and the four `border-color`s are set to the system color
 [`ButtonFace`](https://drafts.csswg.org/css-color/#valdef-system-color-buttonface).
 
-<figure class="w-figure">
-  <img src="light-buttonface.png" class="w-screenshot w-screenshot-filled"
-       alt="A light mode page that uses the ButtonFace property.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lSNFROIe1P94DlhoVtoV.png", alt="A light mode page that uses the ButtonFace property.", width="800", height="322" %}
+  <figcaption>
     <strong>Light mode:</strong> The <code>background-color</code> and the various
     <code>border-color</code>s are set to the <a href="https://drafts.csswg.org/css-color/#valdef-system-color-buttonface">ButtonFace</a>
     system color.
@@ -318,20 +319,18 @@ since the user agent updates `ButtonFace` dynamically based on the color scheme.
 The same applies for the `<button>` element's `color`
 that is set to the corresponding system color `ButtonText`.
 
-<figure class="w-figure">
-  <img src="light-computed.png" class="w-screenshot w-screenshot-filled"
-       alt="Showing that the computed color values match ButtonFace.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IogmyIzUhokJgnnxUkPi.png", alt="Showing that the computed color values match ButtonFace.", width="800", height="322" %}
+  <figcaption>
     <strong>Light mode:</strong> The computed values of the <code>border-top-color</code>
     and the <code>border-bottom-color</code> that are both set to <code>ButtonFace</code>
     in the user agent stylesheet are now <code>rgba(0, 0, 0, 0.847)</code>.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="dark-computed.png" class="w-screenshot w-screenshot-filled"
-       alt="Showing that the computed color values still match ButtonFace while in dark mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3sU1uZyt3zNhEgw3gpZJ.png", alt="Showing that the computed color values still match ButtonFace while in dark mode.", width="800", height="322" %}
+  <figcaption>
     <strong>Dark mode:</strong> The computed values of the <code>border-top-color</code>
     and the <code>border-bottom-color</code> that are both set to <code>ButtonFace</code>
     in the user agent stylesheet are now <code>rgba(255, 255, 255, 0.847)</code>.
@@ -347,19 +346,17 @@ The demo *deliberately* shows the WCAG&nbsp;AA and WCAG&nbsp;AAA
 with the link colors mentioned in the
 [warning above](#using-color-scheme-in-practice).
 
-<figure class="w-figure">
-  <img src="demo-light.png" class="w-screenshot w-screenshot-filled"
-       alt="The demo while in light mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqXapQKcNbyE3uwEOELO.png", alt="The demo while in light mode.", width="800", height="982" %}
+  <figcaption>
     The <a href="https://color-scheme-demo.glitch.me/">demo</a>
     toggled to <code>color-scheme: light</code>.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="demo-dark.png" class="w-screenshot w-screenshot-filled"
-       alt="The demo while in dark mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9G4hFdtSSwPLOm57zedD.png", alt="The demo while in dark mode.", width="800", height="982" %}
+  <figcaption>
     The <a href="https://color-scheme-demo.glitch.me/">demo</a>
     toggled to <code>color-scheme: dark</code>.
     Note the WCAG&nbsp;AA and WCAG&nbsp;AAA
diff --git a/src/site/content/en/blog/color-scheme/light-buttonface.png b/src/site/content/en/blog/color-scheme/light-buttonface.png
deleted file mode 100644
index c1cfe6b9a21..00000000000
Binary files a/src/site/content/en/blog/color-scheme/light-buttonface.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/light-computed.png b/src/site/content/en/blog/color-scheme/light-computed.png
deleted file mode 100644
index ad01a43aba2..00000000000
Binary files a/src/site/content/en/blog/color-scheme/light-computed.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-scheme/light-styles.png b/src/site/content/en/blog/color-scheme/light-styles.png
deleted file mode 100644
index 4e5efbd5f54..00000000000
Binary files a/src/site/content/en/blog/color-scheme/light-styles.png and /dev/null differ
diff --git a/src/site/content/en/blog/color-spaces-and-functions/index.md b/src/site/content/en/blog/color-spaces-and-functions/index.md
new file mode 100644
index 00000000000..869c7e0152b
--- /dev/null
+++ b/src/site/content/en/blog/color-spaces-and-functions/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: New CSS color spaces and functions in all major engines
+subhead: All major engines now support the new CSS color spaces and functions. Find out how they can bring vibrancy to your designs. 
+authors:
+  - rachelandrew
+description: Start using HD color to bring vibrancy to your designs.
+date: 2023-06-02
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/Kp4WW9nvbo5JexN1MMuN.jpg
+alt: ""
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three major browser engines!
+{% endAside %}
+
+CSS now supports color spaces that allow us to access colors outside of the sRGB [gamut](https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-gamut). This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.
+
+## Accessing color spaces from CSS
+
+We already have a number of functions that allow us to access colors within the sRGB gamut—`rgb()`, `hsl()`, and `hwb()`. Now supported in browsers is the `color()` function, a normalized way to access colors within any RGB color space. This includes sRGB, Display P3, and Rec2020. You can see some examples in the following CSS:
+
+```css
+.valid-css-color-function-colors {
+  --srgb: color(srgb 1 1 1);
+  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
+  --display-p3: color(display-p3 1 1 1);
+  --rec2020: color(rec2020 0 0 0);
+  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
+  --prophoto: color(prophoto-rgb 0% 0% 0%);
+  --xyz: color(xyz 1 1 1);
+}
+```
+
+{% BrowserCompat 'css.types.color.color' %}
+
+Also supported are several functions allowing access to color spaces other than sRGB using `lch()`, `lab()`, `oklch()`, and `oklab()`.
+
+{% BrowserCompat 'css.types.color.lch' %}
+
+You can learn about all of these different color spaces in the [High definition CSS color guide](https://developer.chrome.com/articles/high-definition-css-color-guide/).
+
+
+## The `color-mix()` function
+
+As well as these new color spaces, all engines now support the `color-mix()` function. This function enables mixing of one color into another, in any of the color spaces. In the following CSS, 25% of blue is mixed into white, in the srgb color space.
+
+```css
+.example {
+  background-color: color-mix(in srgb, blue 25%, white);
+}
+```
+
+{% BrowserCompat 'css.types.color.color-mix' %}
+
+[Learn more about `color-mix()`](https://developer.chrome.com/blog/css-color-mix/)
+
+These new functions and color spaces promise to bring vibrant HD color to the web. For inspiration, make a start by creating some beautiful gradients using the HD gradient generator at [gradient.style](https://gradient.style/).
+
+_Hero image by [Daniele Levis Pelusi](https://unsplash.com/fr/@yogidan2012)_
diff --git a/src/site/content/en/blog/commonjs-larger-bundles/hero.jpg b/src/site/content/en/blog/commonjs-larger-bundles/hero.jpg
deleted file mode 100644
index 13fd4f62021..00000000000
Binary files a/src/site/content/en/blog/commonjs-larger-bundles/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/commonjs-larger-bundles/index.md b/src/site/content/en/blog/commonjs-larger-bundles/index.md
index 0f5af1a9dd4..074bd59bf47 100644
--- a/src/site/content/en/blog/commonjs-larger-bundles/index.md
+++ b/src/site/content/en/blog/commonjs-larger-bundles/index.md
@@ -5,7 +5,7 @@ authors:
   - mgechev
 date: 2020-05-08
 updated: 2020-05-26
-hero: hero.jpg
+hero: image/admin/S5JWmwRRW3rEXKwJR0JA.jpg
 alt: How CommonJS is making your bundles larger
 description:
   CommonJS modules are very dynamic, which prevents JavaScript
@@ -14,8 +14,8 @@ tags:
   - blog
   - javascript
   - modules
-  - commonjs
-  - tree-shaking
+  # - commonjs
+  # - tree-shaking
 ---
 
 In this post, we'll look into what CommonJS is and why it's making your JavaScript bundles larger than necessary.
@@ -47,7 +47,7 @@ Later on, another module can import and use some or all of these functions:
 
 ```javascript
 // index.js
-const { add } = require(‘./utils');
+const { add } = require('./utils.js');
 console.log(add(1, 2));
 ```
 
@@ -87,7 +87,7 @@ $ cd dist && ls -lah
 
 Notice that **the bundle is 625KB**. If we look into the output, we'll find all the functions from `utils.js` plus a lot of modules from [`lodash`](https://lodash.com/)**. Although we do not use `lodash` in `index.js` it's part of the output**, which adds a lot of extra weight to our production assets.
 
-Now let us change the module format to [ECMAScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and try again. This time, `utils.js` would look like this:
+Now let us change the module format to [ECMAScript modules](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) and try again. This time, `utils.js` would look like this:
 
 ```javascript
 export const add = (a, b) => a + b;
@@ -103,7 +103,7 @@ export const max = arr => maxBy(arr);
 And `index.js` would import from `utils.js` using ECMAScript module syntax:
 
 ```javascript
-import { add } from './utils';
+import { add } from './utils.js';
 
 console.log(add(1, 2));
 ```
@@ -135,7 +135,7 @@ export const subtract = (a, b) => a - b;
 
 ```javascript
 // index.js
-import { add } from ‘./utils';
+import { add } from './utils.js';
 const subtract = (a, b) => a - b;
 
 console.log(add(1, 2));
diff --git a/src/site/content/en/blog/community-highlight-albert-kim/index.md b/src/site/content/en/blog/community-highlight-albert-kim/index.md
new file mode 100644
index 00000000000..15193e4f76a
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-albert-kim/index.md
@@ -0,0 +1,345 @@
+---
+layout: post
+title: 'Community highlight: Albert Kim'
+authors: 
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+alt: 'Learn Accessibility! Community highlight.'
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+subhead: >
+  Albert Kim is a multi-faceted accessibility expert, leading the
+  conversation around mental health and digital accessibility.
+description: >
+  Albert Kim is a multi-faceted accessibility expert, leading the
+  conversation around mental health and digital accessibility.
+date: 2022-11-17
+tags:
+  - blog
+  - accessibility
+  - community
+---
+
+_This post highlights a community expert, as a part of [Learn Accessibility!](/learn/accessibility/)_
+
+**Alexandra White**: How would you introduce yourself? You do so much accessibility work.
+
+**Albert Kim**: I'm a digital accessibility subject matter expert (SME), a UX
+design consultant, and a public speaker and coach, raising mental health
+awareness in the tech community.
+
+<figure data-float="right">
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/oXT7rUXWYTEXaDfIabUf.jpg",
+    alt="Albert Kim is an accessibility SME.", width="350", height="314"
+  %}
+</figure>
+
+I founded [Accessibility NextGen](https://twitter.com/a11ynextgen), a community
+for people interested in learning more about accessibility. I'm a
+[Disability:IN NextGen Leader](https://disabilityin.org/what-we-do/nextgen-leaders-initiatives/).
+And currently, I'm a W3C invited expert for the
+[Cognitive and Learning Disabilities Task Force](https://www.w3.org/WAI/GL/task-forces/coga/)
+and Mental Health Sub-Group. Lately, I've been researching how to include
+people with OCD, ADHD, dyslexia, and PTSD into the product development
+process.
+
+Offline, I'm a DEI community leader, blogger, huge foodie, photographer, and I
+love traveling—I travel a lot. I'm the first generation in my family to live
+abroad, the first generation to get any formal education. I was raised by a
+single mother in a low-income household. I'm a military veteran. 
+
+I identify myself as someone who can empathize with a lot of different
+struggles and life stories.
+
+**Alexandra**: Did you always think you'd be someone who would have a career or
+work in accessibility?
+
+**Albert**: I always wanted my profession to be not just a job, but one with
+social impact. I've switched careers several times. In college, I tried
+different majors. I've founded startups, I was a business development manager,
+I worked in telecommunications in the military. I was an interpreter. I've had
+many different jobs.
+
+It's important to mention all of these different experiences, as all of the
+dots began to connect in their own way. I eventually got into digital
+accessibility because of my personal experience as someone with a disability,
+but also with a love for digital products. I really, really love a good
+product. Useful, functional products.
+
+We often use the phrase "[assistive technology](/learn/accessibility/glossary/#at),"
+but all technologies are assistive. I'm passionate about digital products that
+help improve my life, that make my life easier. I want to connect consumers
+with the producers of digital products, and digital accessibility is
+fundamental to that connection.
+
+**Alexandra**: Can you expand more on how you create opportunities for direct
+communication between users and product creators?
+
+**Albert**: Often, when developers build digital products, they don't make full
+use of their own product. They aren't aware of how useful their product
+is for users, especially those with disabilities. That means that they're not
+thinking about those use cases in the design process. Because of this, they
+often miss an opportunity to discover disabled users who could become loyal
+customers.
+
+Designers and developers may or may not find out later that what they built is
+useful to disabled users.
+
+Connecting product owners and developers to their users with disabilities
+early in the product development process can lead to full realization of
+a product's potential. This is in addition to products designed with accessibility as an intentional feature.
+
+As a metaphor, I love sharing good food with my loved ones. The joy is doubled
+when I can share it. Just like that, I want to share really good products with
+my friends, but I cannot always share them if they're not accessible. A blog
+post alone, without a screen reader or other interventions, is not accessible
+to my blind friend. If digital product makers hear these stories from users,
+then hopefully they'll make accessible design choices so the users can fully
+utilize their products.
+
+## Build for "invisible" disabilities
+
+**Alexandra**: I appreciate that you mentioned your blind friend specifically,
+because often the first thing that comes to mind when developers and designers
+_do_ think about disability are the "obvious" ones: visible and often permanent
+disabilities. But there are [so many people impacted by accessible
+design](/learn/accessibility/why/#additional-beneficiaries-of-accessibility),
+such as those with temporary and invisible disabilities, like psychological
+disabilities.
+
+You're an invited expert to the W3C group, ​​the
+[Cognitive and Learning Disabilities Task Force](https://www.w3.org/WAI/GL/task-forces/coga/)
+and Mental Health subgroup. What is COGA?
+
+**Albert**: The COGA task force is a joint commitment of the Accessible
+Platform Architecture (APA) Working Group and the Web Content Accessibility
+Guidelines (WCAG) Working Group. COGA assists these other groups in creating
+guidance documents, as well as updates to existing W3C accessibility
+guidelines. For example, we further developed proposed success criteria for WCAG 2.1.
+
+We've built a repository of [user research](https://w3c.github.io/coga/user-research/)
+to serve as supplemental guidance and have published
+[issue papers](https://w3c.github.io/coga/issue-papers/).
+
+Often, companies and developers look at WCAG guidelines as their standard for
+web accessibility. But, there's supplemental guidance in the form of issue
+papers. COGA has written some of these papers on different use cases to help
+describe cognitive disabilities and scenarios where persons with atypical
+profiles use technology successfully and unsuccessfully. We help these working
+groups think about cognitive disabilities and learning disabilities.
+
+**Alexandra**: Have you been with COGA from the start?
+
+**Albert**: I joined a few years after the group was developed; but after I
+joined, I strongly advocated for a mental health subgroup. COGA's focus was
+primarily on cognitive and learning disabilities, but I wanted to start a
+conversation about mental health.
+
+I happened to know someone in that community who reached out on Twitter.
+I got in through that connections, and I'm very passionate about bringing
+invisible disabilities into web accessibility spaces.
+
+## Participate in COGA and other W3C initiatives
+
+**Alexandra**: Can anyone participate in such a group, and do people attend
+regularly?
+
+**Albert**: It's an open group! [Anyone can join](https://www.w3.org/WAI/GL/task-forces/coga/#participation),
+as participants of either the APA Working Group or the WCAG Working Group. If
+your company sponsors the W3C, you can join, or as an independent invited
+expert. I'm an independent invited expert.
+
+**Alexandra**: For most of my career, I didn't know that. I didn't realize how
+much power an individual could have in influencing and even creating standards
+that make up the web.
+
+**Albert**: It's definitely a big time commitment and a lot of
+responsibilities. For some, that may not be feasible.
+
+The easiest way to participate is to join the
+[COGA Accessibility Community Group](https://www.w3.org/community/coga-community/).
+The community groups are more flexible and don't have as much responsibility or
+commitments. This group supplies user needs and feedback to the COGA Task Force.
+
+**Alexandra**: Here's where I confess my own stakes in this work, in your
+subgroup. I suffer from anxiety and depression, and have for most of my life.
+There are times I'm overwhelmed by certain sites and apps, even those which are
+meant to help us be "productive," as some tasks have long checklist steps
+before you can move to the next task. Tools which are helpful on my best days
+can be overwhelming the next day.
+
+In your [Accessibility Rules interview](https://a11yrules.com/podcast/albert-kim-talks-about-ocd-ptsd-and-web-accessibility/),
+you mentioned the ways in which endless scroll can be traumatic, and how that
+affects you as a person with OCD and PTSD. Is there guidance out there or sites
+that are doing a good job of giving people a way to opt-out of an experience
+that may be triggering.
+
+**Albert**: There is a [COGA issue paper](https://www.w3.org/TR/coga-usable/#make-the-relationship-clear-between-controls-and-the-content-they-affect-pattern),
+that has supplemental guidance. As far as websites or
+resources acting as a good example… that might be hard to find! Addressing
+mental health in web development is still very new. But I do have a lot of
+advice and specific best practices that I can recommend as a user with
+disabilities and as an accessibility SME.
+
+{% Aside %}
+
+The [COGA issue paper](https://www.w3.org/TR/coga-usable/#make-the-relationship-clear-between-controls-and-the-content-they-affect-pattern)
+doesn't directly consult on endless scroll. This advice comes from both
+Albert's experience as a neurodivergent user and common best practices.
+Preventing endless scroll is a widely accepted and understood as an
+accessibility best practice.
+
+{% endAside %}
+
+First thing, follow the WCAG guidelines, though most of them were written prior
+to the mental health subgroup existing, so much of that guidance is helpful
+beyond those with physical disabilities. It's helpful for users with invisible
+disabilities and mental health disabilities. Following this, that has to be the
+beginning. If websites were following these guidelines and did a really good
+job, even if they didn't think about mental health at all, we probably wouldn't
+experience many of these problems.
+
+One of the most important design choices that would be helpful is clear,
+semantic structure. Clear headings can be very helpful for users with OCD,
+ADHD, or dyslexia. Even for me, and my anxiety as well. All of these illnesses
+share some pain points, they're interconnected. 
+
+## Stop creating bad user experiences
+
+**Alexandra**: Okay, what about the opposite? What are people building that is
+against WCAG recommendations that is causing problems for those with mental
+health issues?
+
+**Albert**: So many things:
+
+* Complex navigation and page layouts that are difficult to navigate and use.
+* Multi-stage forms that have a lot of imposed requirements, rather than
+  communicating with users why something is important or needed.
+* Long passages of complex text with a lot of jargon or metaphors that are
+  difficult to understand, which require additional context.
+* Flickering content or background images that are moving or blinking.
+  Notifications that you can't turn off easily.
+* Timeouts on complex activities, especially without options to save, such as
+  when you're filling out a form and you're given a warning or a timeout after
+  30 seconds.
+* Search on websites that doesn't work well. This may mean there's a lack of
+  filters, and that leads to an endless set of results.
+* Unexpected behavior, like when you click a button and the page jumps back to
+  the top so you have to figure out where you were and scroll back down.
+* Hidden actions, like when a cookie popup requires multiple steps in really
+  small print to decline the cookies. Or deliberately making subscriptions that
+  are really hard to cancel.
+
+These aren't just accessibility issues, these are usability issues.
+
+**Alexandra**: Good product design is accessible design.
+
+**Albert**:  There are so many examples. Make a good product and users will
+come back. These are just some examples.
+
+## Include content warnings
+
+**Alexandra**: Something often politicized, at least in the United States, is
+the idea of content warnings (colloquially known as "trigger warnings").
+
+These warnings may be related to a design choice—flashing images may cause seizures. Those are less controversial, and fairly commonplace. However, content
+warnings for certain subjects is also critical for many.
+
+**Albert**: If your content has something sensitive, such as violence or
+mentions of sexual assault, having warnings can be very helpful for users with
+PTSD, depression, and anxiety, especially as it may stem from personal
+experience of traumatic events. Allow for customization and personalization
+that is obvious, so people can choose what information they are ready to read,
+see, or hear.
+
+The core meaning of the web is to relay information. Rather than imposing our
+information, we should be communicating it. We should think about how others
+will perceive what we have to share. I may write something one way, but it may
+be interpreted by someone else in a different way. Clear structure helps to
+avoid some of these miscommunications.
+
+Summaries and tables of content are also very helpful in allowing a user to
+prepare themselves for what they'll be learning.
+
+{% Aside %}
+
+If you include a content warning in a video, it's critical to let this warning
+play for long enough that people can read the message, especially in contexts
+where the video may not be paused.
+
+{% endAside %}
+
+**Alexandra**: I'm personally grateful for these content trigger warnings, so I
+can decide if I'm in a place where I feel comfortable reading or seeing content
+which may lead to an emotional reaction. For those who are worried that there
+may be pushback on including trigger warnings in their content, do you have any
+advice?
+
+**Albert**: We must think of it as a public health issue, not a political
+issue. Trigger warnings are not about censorship, at all. It's about giving
+users freedom to choose. When we don't provide the option, then we don't give
+users freedom to protect themselves from something that may cause harm to their
+mental health.
+
+We shouldn't arbitrarily impose or force information on users. The most common
+reaction for people with PTSD who encounter trigger content is to leave and
+never come back. You lose those people. It's a health issue.
+
+{% Aside %}
+
+If you get pushback on adding space for trigger warnings, you could argue it's
+a business issue. When you lose those users forever, you lose that revenue or
+potential revenue. 
+
+Learn more about the
+[business impact of accessibility](/learn/accessibility/why/#business-impact).
+
+{% endAside %}
+
+**Albert**: There's some similarity between a trigger warning and a parental
+control. We don't have any political concerns about letting parents choose what
+is acceptable to be seen by their children. It's very conventionally
+understood. This is exactly the same. People deserve to have control for
+themselves.
+
+**Alexandra**: Seems reasonable to me!
+
+## Do one more thing: communicate clearly
+
+**Alexandra**: If you asked developers to change one thing about the way they
+design and build websites to make them more accessible, what would you ask for?
+
+**Albert**: Don't forget that the fundamental purpose of a website is to
+clearly communicate information to the user. To do this, you must think about
+what information you want to share with your users, and more importantly, how
+to frame that information so the content and your intentions are understood.
+
+{% Aside 'codelab' %}
+Take the Learn Accessibility module on
+[Content structure](/learn/accessibility/structure) to read about semantic HTML,
+landmarks, data tables, and more.
+{% endAside %}
+
+You can succeed by building each page with semantic HTML, use a clear
+structure and layout of content. Clear structure and layouts help you
+communicate better with your users, and are more scalable, usable, and
+accessible. Ensure labels are consistent and instructions are provided
+correctly. This helps users more easily find the information they seek and
+better understand the relationships between different parts of the content.
+
+This advice touches upon three WCAG success criteria:
+
+* [2.4.6. Headings and Labels](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)
+* [1.3.1. Info and Relationships](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+* [3.3.2. Labels or Instructions](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)
+
+Missing these success criteria is among the most common accessibility issues
+found on websites. This affects people who use assistive technologies (such as
+screen readers), but also neurodivergent people who may have cognitive and/or
+learning disabilities or mental health conditions.
+
+<hr />
+
+Keep up with Albert's work on Twitter as
+[@djkalbert](https://twitter.com/djkalbert). Check out
+[Accessibility NextGen](https://www.meetup.com/a11ynextgen/).
diff --git a/src/site/content/en/blog/community-highlight-bramus/index.md b/src/site/content/en/blog/community-highlight-bramus/index.md
new file mode 100644
index 00000000000..d05640b4264
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-bramus/index.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: 'Community highlight: Bramus Van Damme'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  Bramus Van Damme is a web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since. I caught up with him to learn about his journey in web development, and to find out what he thinks is exciting in CSS today.
+description: >
+  One of a series of interviews with people from the web development community who are doing interesting things with CSS. This time I speak to prolific writer Bramus Van Damme.
+date: 2021-12-04
+tags:
+  - blog
+  - css
+  - community
+---
+
+_This post is part of [Designcember](https://designcember.com/). A celebration of web design, brought to you by web.dev._
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/6tkSbZYOqxtgJM9s5ovw.jpg", alt="Bramus on stage in from of a large screen showing slides.", width="800", height="533" %}
+    <figcaption>Bramus speaking at Frontend United.</figcaption>
+</figure>
+
+{% Aside %}
+Read some recent articles by Bramus on [Cascade Layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/), 
+[Scroll-Linked Animations](https://css-tricks.com/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline/), 
+and [Container Relative Lengths](https://www.bram.us/2021/09/21/css-container-queries-container-relative-lengths/).
+{% endAside %}
+
+**Rachel:** What was your route into web development?
+
+**Bramus:** As a kid, I always liked to tinker with things. I would spend days playing with my LEGO® bricks, building my own fantasy world and objects from scratch.
+
+When we got a computer at home—an unusual device to own in the 1990s—I soon traded in the physical toys with computer games. I wasn't an avid gamer though; I don't think I ever finished a game entirely. Instead of finishing the games, I found myself modding them. 
+
+In 1997, while looking up information about those games and tools, I also discovered [`view-source`](https://www.bram.us/#view-source). Curious to know how things were built, I started collecting HTML-snippets of the sites that I visited. Combining those snippets with Frontpage Express (an application that came with Internet Explorer 4 and 5), I soon created my very first web pages with info about myself. Those pages never got published, they only existed on one of the floppy disks I carried around.
+
+From that time on I continued to become more interested in computers and the web. This interest led me to flunk a year in high school on purpose, so that I could switch major from economics to IT—I knew I wanted to pursue a career in IT. By 2002 I was in college, where I properly learned HTML and took my first steps into CSS and JavaScript. During those three years I realized that the web was my true passion, and in 2005, fresh out of college, I took on my first job as a professional web developer.
+
+## On being a front and backend developer
+
+**Rachel:** I spotted on your site that you are both a front and backend developer, I followed a similar path being originally a Perl, then a PHP and MySQL developer. Do you feel more excited by one side or the other? Do you think the possibility of being a hybrid developer is vanishing given the complexity of learning just one part of the stack?
+
+**Bramus:** Throughout my career I've constantly been floating between backend and frontend. One year I would find myself elbow-deep into JavaScript and React (and even React Native), only to be creating Terraform scripts and Docker containers the year after. I like mixing the two, yet my passion always lay with the frontend, and CSS specifically.
+
+In the early days of tinkering with the web, one simply was the "webmaster" and did it all. As the scope of the work was pretty limited back then, it was quite easy to keep up. Having seen both frontend and backend explode over the past 20 years, it became harder and harder to maintain expertise across the field. That's why I decided to mainly focus on frontend again in 2020.
+
+**Rachel:** Why did you start writing about CSS in particular?
+
+**Bramus** The content on my blog has always been a reflection of the projects that I'm working on. Therefore a mix of front and backend posts.
+
+Attending conferences such as [Fronteers Conference](https://fronteers.nl/congres) and [CSS Day](https://cssday.nl/) helped me to write in-depth frontend posts. For example, seeing [Tab Atkins-Bittner talk about CSS Custom Properties in 2013](https://vimeo.com/69531455)—years before they even were an official thing—or [you (Rachel Andrew) explaining Grid to us in 2015](https://rachelandrew.co.uk/archives/2015/07/17/css-grid-layout-at-css-day/) were events that directly led me to write about them. At the time, I was a lecturer in web and mobile development at a technical university, so I had a very good reason to pay attention, as later on I'd be teaching my own students about those subjects.
+
+In 2019, I started to closely monitor the CSSWG and [participate in discussions](https://github.com/w3c/csswg-drafts/issues). Browsers working on features behind feature flags meant that I was able to experiment with the things I read about, even before they shipped. This was then reflected through the contents of my blog.
+
+## Advice for new writers
+
+**Rachel:** What would be your advice to someone who wants to start writing about tech?
+
+**Bramus:** Don't hesitate and simply do it. Even when it's about a single line of CSS, or if it's 1 post per year, or if you "only" have 5 subscribers: do it. Scratch your own itch, and write the article you wanted to find yourself. Through writing on my blog I not only challenged myself to learn about technologies in finer detail, but also opened doors along the way—both personally and professionally.
+
+Don't overly rely on external services such as Medium or Twitter, but try and have your own place on the web. In the long run it'll pay off. You don't need any fancy CMS, build pipelines, or comments system, to get started. All you need is a text editor and some time to spare. HTML, combined with a simple stylesheet, can get you a long way.
+
+## New features in CSS
+
+**Rachel:** You have written about lots of the new features that are being developed in the CSSWG and in browsers, what do you think is the most exciting for the future of the web? Which do you think will have the most immediate impact in your own professional work?
+
+**Bramus:** Along with many developers I'm pretty excited about CSS Container Queries. Other upcoming features—such as [Cascade Layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) and [Scroll-linked Animations](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/)—also excite me, but Container Queries will definitely have the biggest impact. They will allow us to transition from responsive pages to responsive components.
+
+{% Aside %}
+Learn about container queries in this [Designing in the Browser](https://www.youtube.com/watch?v=gCNMyYr7F6w) episode.
+{% endAside %}
+
+**Rachel:** What feature or functionality would you love to see added to CSS?
+
+**Bramus:** Scroll-linked Animations is one of the features that I would like to see move forward. Right now it's only an Editor's Draft. Being able to define hardware-accelerated scrolling without relying on JavaScript is something that totally fits into my mental model of progressive enhancement and the [rule of least power](https://en.wikipedia.org/wiki/Rule_of_least_power).
+
+CSS Nesting is also my radar. It took more than two years since its first Editor's Draft, but I was very glad to see its First Public Working Draft get released last summer.
+
+Apart from these bigger features, I can definitely appreciate smaller tweaks and additions. Things like [accent-color](/accent-color/) definitely put a smile on my face, as they make my life as a developer easier.
+
+## Recommendations for inspiring web people to follow
+
+**Rachel:** Who else is doing really interesting, fun, or creative work on the web right now?
+
+**Bramus:** That's a very difficult question to answer, so many people are producing content that amazes and inspires me. For example, [Adam Argyle](https://twitter.com/argyleink) and his GUI challenges, the projects from [Stephanie Eckles](https://twitter.com/5t3ph), blog posts by [Michelle Barker](https://twitter.com/michebarks), videos from [Kevin J. Powell](https://twitter.com/KevinJPowell), the work [Miriam Suzanne](https://twitter.com/TerribleMia) is doing in the CSS Working Group, podcasts from [Una Kravets](https://twitter.com/Una), articles by [Jake Archibald](https://twitter.com/jaffathecake), Jake and Surma's [HTTP 203](https://http203.libsyn.com/), [George Francis](https://twitter.com/georgedoescode)' Houdini work, and [Temani Afif](https://twitter.com/ChallengesCss)'s posts. These people and their projects, and the many others that I'm forgetting right now, have my respect and admiration.
+
+I think the most influential person throughout my career was [Jeremy Keith](https://adactio.com/). His teaching us about semantic HTML, progressive enhancement, and resilience were eye-opening moments to me. It's a message I gave to my own students, and still like to spread today. In times where JavaScript is eating the world and junior developers somehow seem to have skipped out on the fundamentals of the web, his posts and talks are more relevant than they ever were before.
+
+{% Aside %}
+Jeremy Keith has created our new [responsive design course](/learn/design/) here on web.dev.
+{% endAside %}
+
+**Rachel:** You can [follow Bramus on Twitter](https://twitter.com/bramus), and on his blog at [bram.us](https://www.bram.us/).
diff --git a/src/site/content/en/blog/community-highlight-chen-hui-jing/index.md b/src/site/content/en/blog/community-highlight-chen-hui-jing/index.md
new file mode 100644
index 00000000000..ea7ab7e0fa0
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-chen-hui-jing/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: 'Community highlight: Chen Hui Jing'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  Chen Hui Jing  is a self-taught designer and developer living in Singapore, I talked to her about CSS, and in particular non-English writing systems.
+description: >
+  One of a series of interviews with people from the web development community who are doing interesting things with CSS. This time I speak to Chen Hui Jing.
+date: 2021-12-10
+tags:
+  - blog
+  - css
+  - community
+---
+
+_This post is part of [Designcember](https://designcember.com/). A celebration of web design, brought to you by web.dev._
+
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/8tTxEc4ZW29AKRkpwjoP.jpg", alt="Chen Hui Jing speaking on stage on front of a large screen showing slides.", width="800", height="533" %}
+
+Chen Hui Jing is a self-taught designer and developer living in Singapore, with an inordinate love for CSS, as evidenced by her blog (which is mostly about CSS) and her tweets (which are largely about typography and the web). She used to play basketball full-time and launched her web career during downtime between training sessions, and hopes to be able to climb outdoors one day. I talked to her about CSS, and in particular non-English writing systems.
+
+**Rachel:** What was your route into web design and development?
+
+**Hui Jing:** When I was living in the dorms while playing basketball full-time, I had a bit more experience with computers than my peers, and my coach (bless him) thought that I could do something about our association website that hadn't been updated in years. I had zero idea what web development was, but I thought I had enough spare time to figure it out. It was more enjoyable than I expected and many years later, I'm still here.
+
+**Rachel:** And how did you get into CSS in particular?
+
+**Hui Jing:** I'm a very visual person by nature, and there's something about being able to give "instructions" to the browser and immediately see that reflected on the screen that really appealed to me. It felt much more intuitive to me than programming logic for applications. I got serious about the web at a time when developments in the world of CSS were starting to pick up speed, so there were a lot of experimental properties that were not widely used. It felt very exciting to discover new features that few people knew about.
+
+## Working with vertical writing modes
+
+**Rachel:** You've written a lot about vertical writing modes in CSS, and the fun bugs you find when working with vertical writing. Do you have any favorite bugs we should all go and star?
+
+**Hui Jing:** There were a few [when I checked back in May this year](https://chenhuijing.com/blog/debugging-vertical-layouts-in-2021/#%F0%9F%92%BB), but, most of them have been resolved except one: Chromium has an issue with the [Devtools overlay in vertical writing mode](https://bugs.chromium.org/p/chromium/issues/detail?id=1203251&q=devtools%20grid&can=2). I think this is a testament to how this evergreen browser update cycle is really pushing web development forward.
+
+**Rachel:** It’s great to hear that these issues are being fixed. Do you think playing with writing-mode has more use cases than simply typesetting vertical text?
+
+**Hui Jing:** Oh yes, definitely. Even though typesetting East Asian scripts is the primary use-case of writing mode, I think other writing systems can make use of writing-mode to implement vertical layouts, like the style we often see in print magazines. To me, combinations of CSS properties are what makes CSS so powerful, so writing-mode together with flexbox and grid give us a fairly large number of permutations for layout directions, from a page level boxes down to individual characters in the text. I think this unlocks possibilities and more creativity as folks realize the scope of what is possible for web design moving forward. I hope to see layouts and designs on the web that I couldn't have imagined just a few years ago.
+
+{% Aside %}
+Hui Jing often speaks about typography and writing systems on the web. Watch her speak on [Web Typography: a non-English perspective](https://www.youtube.com/watch?v=yLQHDGRLOwQ) and [The web is not just left to right](https://www.youtube.com/watch?v=yLQHDGRLOwQ) to learn more
+{% endAside %}
+
+**Rachel:** I'm often asked whether I think everyone should use logical properties and values now, or if it will become the default. How would you answer that?
+
+**Hui Jing:** Personally, I hope it would become the default, because from a practical perspective, it would make multi-script website development much easier. As to whether it WILL become the default, that's much harder to answer. 
+
+A challenge for logical properties is that it is "replacing" an established syntax that has been in use for many years, plus the fact that support for scripts that are not the default, horizontal top-to-bottom only got much better in recent years. Content on the web is still predominantly in English, so the case for using logical properties is less strong in this context. I think a larger push for non-English speakers to create content in their respective languages for the web would forward this cause. Also, if supporting multiple languages becomes a greater priority, the value of using logical properties would become even more apparent.
+
+{% Aside %}
+Find out about logical properties and values in the Learn CSS module on [Logical Properties](/learn/css/logical-properties/).
+{% endAside %}
+
+## New features in CSS
+
+**Rachel:** What feature or functionality would you love to see added to CSS?
+
+**Hui Jing:** I've been following Miriam Suzanne's work on container queries for a while, and the parts of the specification that haven't been developed yet for Style and State container features are quite exciting, because they really expand the concept of responsive design. We can potentially get our designs and layouts to respond to more than just the size of our viewport. So I hope the containment module is something the different browser vendors can agree on and we can get wider support for this in the near future.
+
+## Inspiring people to follow
+
+**Rachel:** Who else is doing really interesting, fun, or creative work on the web right now?
+
+**Hui Jing:** I'm always drawn to people who do CSS art. And there are folks whom I have been a fan of for years, like [Yuan Chuan](https://twitter.com/yuanchuan23) and his generative CSS creations, [Ben Evans](https://codepen.io/ivorjetski) who does mind blowing CSS artwork and [Ana Tudor](https://www.patreon.com/anatudor) with her deep dives into really clever techniques.
+Recently I've come across Codepens by [Julia Miocene](https://codepen.io/miocene/pens/public) and [Jackie Zen](https://codepen.io/jackiezen) that have beautiful CSS animations as well.
+
+**Rachel:** You can read more from Chen Hui Jing on her site at [chenhuijing.com](https://chenhuijing.com).
diff --git a/src/site/content/en/blog/community-highlight-elisa/index.md b/src/site/content/en/blog/community-highlight-elisa/index.md
new file mode 100644
index 00000000000..bcedb904b9c
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-elisa/index.md
@@ -0,0 +1,383 @@
+---
+layout: post
+title: 'Community highlight: Elisa Bandy'
+authors:
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+alt: 'Learn Accessibility! Community highlight.'
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+subhead: >
+  Elisa Bandy is a Googler working on web accessibility and documentation
+  for our internal tools.
+description: >
+  One of a series of interviews with people working in accessibility.
+  This time, we spoke with accessibility expert, Elisa Bandy.
+date: 2022-12-13
+tags:
+  - blog
+  - accessibility
+  - community
+---
+
+_This post highlights a community expert, as a part of
+[Learn Accessibility!](/learn/accessibility/) Learn more about
+[Google's accessibility initiatives and research](https://www.google.com/accessibility/initiatives-research/)._
+
+**Alexandra White**: I'm lucky to call you a colleague. How would you introduce yourself and your job here?
+
+<figure data-float="right">
+{% Img
+src="image/VbsHyyQopiec0718rMq2kTE1hke2/3wmp0figIYM6Y7IIvMhu.png",
+alt="Elisa Bandy, Google technical writer.",
+width="300", height="426"
+%}
+</figure>
+
+**Elisa Bandy**: My name is Elisa, and I write documentation for Google's
+internal tooling and infrastructure.
+
+**Alexandra**: That's such cool job. How many people do you work with?
+
+**Elisa**: Our broader team is about 40 people, and that includes technical
+writers, instructional designers, and program managers. When I started, six
+years ago, there were only four people on the team.
+
+**Alexandra**: What were you up to before Google?
+
+**Elisa**: During the week, I worked in video game development. And then on the
+weekends, I worked in shoe repair.
+
+**Alexandra**: Did you start working in web accessibility once you got to
+Google? 
+
+**Elisa**: Yes, but not until about a year and a half into it, on the side. I
+work on accessibility engineering for Google's internal documentation. Before
+this work, the docs were not designed with accessibility in mind. Any doc
+feature that was accessible was a happy accident.
+
+There were huge issues, starting with color contrast being entirely
+inappropriate for links. The tables were an absolute mess&mdash;if you zoomed in,
+everything stayed the same size because it was defined in pixels instead of
+`rem`. I volunteered to fix all of those things. And then, I just kept fixing
+more things. Here we are five years later, and I'm still at it.
+
+**Alexandra**: You've built yourself to be a person with accessibility
+expertise and skills, and you've got the resolve to fix the problems that need
+to be fixed.
+
+**Elisa**: Yeah, I guess we can say that [laughs]. As a disabled person myself,
+I know how difficult it is to ask for accessibility considerations. So the fact
+that we didn't have these accessibility considerations for my co-workers and my
+colleagues really angered me. And no one else was fixing them. So I went in and
+I fixed them.
+
+I don't think anyone should have to ask for accessibility. It should be built
+in from the start.
+
+## Prioritize your accessibility use cases
+
+**Alexandra**: When you think about web accessibility, there are so many
+different layers to it, right? There are different, sometimes conflicting needs
+for various disabilities. How do you prioritize what should be done?
+
+**Elisa**: A lot of what I do is prioritization. For example, how important is
+it that some specific use case be 100% totally accessible? I look at a lot of
+data: what percentage of our population is disabled? How many people have a
+specific accessibility issue?
+
+For example, there's a subset of users who use
+[ChromeVox](https://support.google.com/chromebook/answer/7031755), the built-in
+screen reader for Chromebooks. If something is an issue in ChromeVox, I have to
+take a look at how many people are using ChromeVox versus
+[Jaws](https://www.freedomscientific.com/products/software/jaws/) versus
+[NVDA](https://www.nvaccess.org/about-nvda/) versus
+[VoiceOver](https://support.apple.com/guide/voiceover/voiceover-keyboard-help-mchlp2683/10/mac/12.0).
+
+Externally, not a lot of people use ChromeVox. Because we're Google, a lot of
+people use Chromebooks as their primary work device, which means ChromeVox is
+very important for internal documentation. Maybe a ChromeVox bug gets bumped up
+a little higher than a VoiceOver bug or a NVDA bug.
+
+{% Aside 'codelab' %}
+
+<figure data-float="right">
+  <a href="/learn/accessibility/design-ux/" alt="Take the Design and user experience module.">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/iJa4aaLGjRE7bN5A9CeX.png", alt="", width="198", height="132" %}
+</a>
+</figure>
+
+Personas also offer a quick and inexpensive way to test and prioritize the
+features your users rely on in your development process. Take the Learn
+Accessibility module [Design and user experience](/learn/accessibility/design-ux/).
+
+{% endAside %}
+
+Generally speaking, I try to fix things for the major screen readers first.
+Coloration tends to be sort of hit or miss because there's a bunch of
+extensions that circumnavigate coloration issues, especially for high contrast
+modes.
+
+**Alexandra**: You mentioned data, which is incredibly important at Google (of
+course). We always hear, "Back up your idea with data." How do you collect data
+for accessibility at Google?
+
+**Elisa**: I rely a lot on data that's been collected by
+[Google's Disability Alliance](https://careers.google.com/stories/googles-disability-alliance/).
+And I'll often cross-check with [WebAIM](https://webaim.org/)'s surveys.
+
+## Culture of accessibility
+
+**Alexandra**: Tell me about the culture of accessibility at Google.
+
+**Elisa**: It's grown very, very rapidly into something which has funding and
+broad-reaching concern. And I have found that almost everyone wants to do the
+right thing. Our colleagues want educational resources on how to do the right
+thing, how to prioritize accessibility.
+
+Restructuring an app or a website or anything to be accessible after you've
+already implemented it incorrectly is _hard_. So part of my job is getting our
+engineers to think about incorporating accessibility into the initial designs,
+before the products are built. People are very receptive to that, even
+enthusiastic about it!
+
+{% Aside 'codelab' %}
+
+With component-driven development, you can establish accessibility into the
+base structure of your website or web app. Take the Learn Accessibility module
+[Patterns, components, and design systems](/learn/accessibility/patterns/).
+
+{% endAside %}
+
+I've only ever had real resistance to incorporating accessibility once, and
+even that was fairly easy to resolve.
+
+**Alexandra**: Can you tell me more about that?
+
+**Elisa**: When I first joined accessibility engineering, it was only 20% of my
+time. Some people didn't understand why we were focusing on accessibility.
+Someone said, "Only 1% of the population is disabled." I stood my
+ground&mdash;we needed to do it because it was the right thing to do. And, it
+was my time, I'll dedicate it how I see fit.
+
+Of course, it's hard to hear from anyone that disabled people don't matter,
+that it's too small a group.
+
+**Alexandra**: Especially when you are a member of that population. Know your
+audience!
+
+**Elisa**: I never like to hear, "Oh, this is only 1%." The "only" makes it
+sound insignificant. But when you think about the global population, that's a
+_lot_ of people. And that's a lot of people who work at Google. _And_ so many
+disabilities are
+[under-reported](https://hbr.org/2019/06/why-people-hide-their-disabilities-at-work).
+
+**Alexandra**: We know that far more than 1% of the population are affected by
+disabilities. [WHO reports](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)
+that over 1 billion people have a disability; and 2.2 billion people have
+[some kind of vision impairment](https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment)!
+There's varying severity, of course, and some people with visual impairments
+wouldn't consider themselves disabled. But these impairments do affect
+interaction on the web.
+
+**Elisa**: Exactly.
+
+## Build your own set of expertise
+
+**Alexandra**: Is there any advice that you wish you had had before you started
+working in accessibility?
+
+**Elisa**: It's ok not to know every single thing. Accessibility is a huge,
+wide expanse of space. I know that there's a lot of stuff that I don't know. I
+have a very specific set of skills. It just so happens that I know where to
+find information on what the accessibility best practices are. 
+
+Even within my own specialty, screen readers and
+[color contrast](/learn/accessibility/color-contrast/), I'm learning new things
+every day. And I'm deaf, but I'm not an accessibility expert for Closed
+Captions. I know what works for me, but I don't know what works for everyone
+else. I'd have to look up best practices if asked.
+
+{% Aside 'codelab' %}
+
+Get a head start on best practices for
+[Video and audio](/learn/accessibility/video-audio/). Closed Captions,
+transcripts, and other alternative media types support equal access to media.
+
+{% endAside %}
+
+**Alexandra**: It's reasonable not to be the absolute expert of every kind of
+accessibility. How would you help engineers learn accessibility patterns?
+
+**Elisa**: I work closely with an engineer who's interested in accessibility.
+I'll hand her a bug and show her how I would fix it. Then, I walk her through
+the best practice. She may look at other docs and see they recommended one
+approach, but it doesn't work for XYZ reasons.
+
+The thing about web accessibility is that there's not a lot of concrete code
+examples, because no two people build the same feature in the same way. So you
+might jury-rig solutions. Many people don't think about accessibility until
+everything's been put together. What are you going to do at that point? Are you
+going to tear it down and put it back together and rewrite all of your tests?
+No, you're not. You're going to staple something on.
+
+That means you need to understand how a disabled user would expect the
+application to function, then model your code so it performs that function. It
+might not look like the perfect code samples or inclusive components, but
+ultimately, as long as it performs the same function reliably, it's going to be
+fine.
+
+**Alexandra**: It sounds to me like you're saying it's more important to get a
+positive result than to worry too much about how we get there.
+
+**Elisa**: Yes. Because honestly the ends do justify the means of this case.
+It's super important to understand how a screen reader user or any other
+disabled user would expect this to work. 
+
+There are a billion ARIA roles, and you cannot possibly know every single one.
+Further, some don't work with all screen readers! So you need to know the needs
+of your users to build for them. 
+
+**Alexandra**: Are there common external resources that you rely on when
+creating internal documentation or offering support to Google engineers?
+
+**Elisa**: I do rely a lot on the [W3C guidelines](https://www.w3.org/). They
+are very good for getting an idea of what you need to do. WebAIM is another
+extremely good resource that I find to be a little bit better with respect to
+technical implementation. I also really like the Mozilla docs&mdash;nine times out
+of ten, if I search for something, there's an answer in the
+[MDN Web Docs](https://developer.mozilla.org/docs/Web/Accessibility).
+
+I love [inclusive-components.design](https://inclusive-components.design/),
+which is great if you want a library of accessible components.
+
+[Deque University](https://dequeuniversity.com/) has a lot of best practices. I
+use it for reference materials, when I'm filing bugs or teaching someone how to
+follow a specific pattern. 
+
+## Experience accessibility tools first-hand
+
+**Alexandra**: How does one go about learning how a user is affected? Since
+your expertise is in supporting people who are colorblind and screen readers, let's start there.
+
+**Elisa**: For color vision deficiency and colorblindness, there are
+simulators and [emulators](/blog/new-in-devtools-83/#vision-deficiencies). You
+really can't understand how someone else can see until you see it for yourself.
+If I notice really bad saturation, as soon as I run it through the simulator, I
+can confirm that it isn't discernible at all.
+
+To support screen reader users, there's no better way to understand it than to
+actually use a screen reader. Read tutorials first, that's key. Some people get
+frustrated when they just turn it on and try messing around with
+it&mdash;that's a bad way to learn how to use them. You need more than 5 or 10
+or 20 minutes. Use it for an hour at minimum to reveal some of the frustrations
+users face who rely on this technology.
+
+{% Aside %}
+
+Some external tutorials you may find useful:
+
+<ul>
+<li>[Dragon getting started](https://www.nuance.com/dragon/support/dragon-naturallyspeaking.html#getting-started) and [demo videos](https://www.nuance.com/dragon/dragon-for-pc/how-to-videos.html)</li>
+<li>[JAWS training](https://www.freedomscientific.com/training/jaws/additional-jaws-training-downloads/)</li>
+<li>[NaturalReader software demos](https://www.naturalreaders.com/software.html#FeaturesforWindows)</li>
+<li>[ChromeVox help documentation](https://support.google.com/chromebook/answer/7031755)</li>
+</ul>
+
+{% endAside %}
+
+I'm a firm believer that everyone is going to need accessibility technology at
+some point in their life. For example, I recently hurt my wrist and couldn't
+use my mouse, so I used a keyboard for multiple weeks. It was so frustrating.
+These sorts of exercises can really help put you in the position of a disabled
+person trying to navigate a world of able-bodied people.
+
+### Simulators, while useful, are not equivalent to a disability
+
+**Alexandra**: Obviously the experience that I have, or any developer would
+have, using simulators is not the same as someone with a visual impairment. 
+
+**Elisa**: You can always talk to someone who is disabled, to learn about their
+experience. And when you're building that empathy, it's important to remember
+that a person who frequently uses these tools is always going to be better at
+it than you. Disabled people are always going to be better at navigating their
+own spaces, because that's the body that that person lives with.
+
+My fear is that people who go through these empathy exercises, for lack of a
+better term, think that they know precisely what people go through. They
+suddenly think they're the expert on that experience. You're not the expert on
+that experience. If you're able-bodied, you're fundamentally not the expert on
+screen readers. I'm not an expert on being colorblind, even though I work in
+this space. I'm not an expert on screen readers.
+
+I am an expert in my experience of being hard of hearing. I am an expert on
+needing a hearing aid and navigating my own experiences every day. But that
+doesn't mean I'm an expert in other people's experience with deafness 
+
+The worst thing you can do in accessibility engineering is have an ego. No
+matter what you do, you're going to mess something up. That's not something to
+get discouraged about because no two people have the same disability needs. No
+two people have the same viewpoint on accessibility and disabilities. You
+cannot do everything 100%&mdash;but that doesn't mean you shouldn't try. You
+won't ever be perfect, but strive for it anyway.
+
+You may get critical feedback, someone may say, "Hey, your product is not
+accessible!"
+
+**Alexandra**: Simulators support a different learning style, demonstrating
+your product while facing some of the problems that disabled people may
+experience. But, that's not the same as experiencing your product with the
+accessibility tools they use every day.
+
+**Elisa**: Do I get mildly annoyed when people turn the sound off and read
+captions and then suddenly realize, oh, these automatically generated
+captions are terrible? Yeah. That's not how I experience captions. Some
+disabled people see a person emulate their experience and complain
+about the tools, without actively needing those tools. That's frustrating,
+I really get that.
+
+But I also don't want to be the person who has to sit there and describe my
+experience as a deaf person over and over and over and over and over again.
+Every single time. If we want able-bodied people to understand our experiences,
+we're going to have to put up with their reaction to the experiences.
+
+That said, the "experiences" like blind restaurant dining and wine tasting,
+those make me mad. That's like cosplaying a disability. But in the interests of
+trying to understand how your users use a feature or how readers read the page?
+That's fine. In fact, that's the minimum. Put yourself in their shoes for an
+hour and figure out how these things actually work. It really does matter.
+
+Figure out how people navigate on your site. You may wonder, "Why can't I just
+put a banner warning at the top that all the links open in a new tab?" Well,
+because someone might not be reading the page starting with the banner. Build
+your design with disabled people in mind.
+
+## Do one thing: stop building infinite scroll
+
+**Alexandra**: Is there one thing you wish that engineers would just start
+doing to make their sites more accessible?
+
+**Elisa**: Infinite scroll is a blight and no one should ever use it. I can't
+find things, I need to be able to find things! And, it's so bad for performance.
+
+Also, moving things around visually and within the DOM is really annoying. The
+tab order matters, especially for keyboard users.
+
+{% Aside 'codelab' %}
+
+​​Take the Learn Accessibility module on
+[Keyboard focus](/learn/accessibility/focus/) to discover how to ensure all
+users can navigate your content.
+
+{% endAside %}
+
+<hr />
+
+Learn more about [Google's accessibility initiatives and research](https://www.google.com/accessibility/initiatives-research/).
+In addition to the web development resources at
+[Learn Accessibility](/learn/accessibility/), Google has created an accessible
+documentation course:
+[Tech Writing for Accessibility](https://developers.google.com/tech-writing/accessibility). 
+
+Follow Google's Accessibility team on Twitter at
+[@GoogleAccess](https://twitter.com/googleaccess) and the Chrome team at
+[@ChromiumDev](https://twitter.com/ChromiumDev).
diff --git a/src/site/content/en/blog/community-highlight-lynn-fisher/index.md b/src/site/content/en/blog/community-highlight-lynn-fisher/index.md
new file mode 100644
index 00000000000..ce3a42dcc7d
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-lynn-fisher/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: 'Community highlight: Lynn Fisher'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  Lynn Fisher is an American artist known for her many creative projects and yearly portfolio refresh.
+description: >
+  One of a series of interviews with people from the web development community who are doing interesting things with CSS. This time I speak to Lynn Fisher.
+date: 2021-12-30
+tags:
+  - blog
+  - css
+  - community
+---
+
+_This post is part of [Designcember](https://designcember.com/). A celebration of web design, brought to you by web.dev._
+
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/tKe0NESCAhvU0SCaOBSb.jpg", alt="Lynn Fisher", width="800", height="474" %}
+
+Lynn Fisher is an American artist known for her work on the web. After attending art school in Arizona, she began working as a designer and CSS developer in software consulting. She has spent her career pursuing cross-discipline endeavors, experimenting with the web as a creative medium, and creating fun, niche web projects. She currently works with the creative folks at [Netlify](https://netlify.com). I talked to her about her many fun projects.
+
+**Rachel** What was your route into web design and development?
+
+**Lynn:** In high school, a friend of mine introduced me to GeoCities. I remember having such a "my eyes are finally open" moment realizing I could make websites. My first site was a fansite for a local band in Phoenix that I was obsessed with. Over the next few years I learned HTML and CSS via the LiveJournal to MySpace pipeline and made lots of sites for local bands and artists. I learned just enough to get my first job as an "HTML Production Assistant" at a web agency after college.
+
+After that, I learned on the job and via the design and dev community sharing knowledge and resources. I studied fine art in school which did help me develop confidence in my creative voice and introduced me to critique, but it wasn't formal design training. I was able to improve over time with practice and learning from coworkers and folks in the industry.
+
+**Rachel:** How did you get started creating [single div CSS artworks](https://a.singlediv.com)?
+
+**Lynn:** At CSSConf 2013, I saw Lea Verou give her [Humble Border-radius](https://youtu.be/b9HGzJIcfDE) talk and it was another eye-opening moment. There was this whole world of artistic potential in CSS properties I was already using and I was so excited to explore and experiment. I went home and made [WhyAZ](https://why.az) and drew all the illustrations with CSS. At the time, each illustration was made of two HTML elements (which followed a lot of icon system markup that was floating around). So it looked something like:
+
+```html
+<div class="icon">
+  <span class="clock"></span>
+</div>
+```
+
+I then wanted to see how complex I could make illustrations with only one HTML element. Turned out to be a really fun, super-constrained challenge that I could do with a couple hours here or there. So I bought a domain and started adding them to a site and now it‘s been almost eight years! It's still really fun to try and stretch the medium and to work on my illustration skills at the same time.
+
+**Rachel:** You have so many cool projects! Do you always have something in your mind that you would like to build?
+
+**Lynn:** Thank you! I keep a backlog of rough ideas that might make fun projects: things I'm interested in, patterns I start noticing, shows and movies I'm obsessing over. Sometimes it takes a long time for an idea to turn into a clear project. I had "fake movies in real movies" in my backlog for a few years before the [Nestflix](https://nestflix.fun) fake streaming service developed into an executable project. I don't keep a schedule, but I usually have an idea that feels ready once I'm looking for something new to work on.
+
+{% Aside %}
+Some other projects that Lynn has created are:
+
+- [Airport Codes](https://airportcod.es)
+- [Top Chef Stats](https://topchefstats.com)
+- [Dress David Rose](https://davidrose.style)
+- [Hollywood Age Gap](https://hollywoodagegap.com)
+- [The Food Place](https://thefoodplace.cafe)
+- [US Flags [dot] Design](https://usflags.design)
+
+{% endAside %}
+
+**Rachel:** Your yearly refreshes have become something of an event. Do you feel a pressure to do these now, or is it still a lot of fun?
+
+<figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/aVuPAt9P1MnVV2UVEfHG.png", alt="The portfolio archive on lynnandtonic.com.", width="800", height="407" %}
+    <figcaption>You can see an <a href="https://lynnandtonic.com/archive/">archive of all the designs</a></figcaption>
+</figure>
+
+**Lynn:** It's still really fun and a project I look forward to. It's the one project I know I can make as weird as I want. It's always a good opportunity to experiment, try something new, and learn whatever new techniques gained traction that year. And because it gets replaced each year, it's really helped me to strengthen my ability to deal with change. It forces me to move on, even if I feel a particular affinity for any one version.
+
+I do feel pressure though! It's easy to feel like each version needs to be more creative, more innovative than the previous ones. It can be stressful! It does push me to be ambitious though and I appreciate that. While I have the time and energy, I'm happy to try and keep raising the bar.
+
+**Rachel:** You've recently started working at Netlify, how has the shift from client work to working on a product been?
+
+**Lynn:** So I'm working on the marketing design team at Netlify, so in a lot of ways the work is really similar to the agency work we would do for product teams. The biggest difference is being able to see so much more of the big picture. Sometimes when you're hired as an outside agency to work on a project, your view can be limited to those specific goals and timelines. Not that that's a bad thing, though. Focus is super valuable! Being inside the product company opens up so much information and you get to see how different parts of the business work together, how competing goals are prioritized, and how individual projects effectively contribute (or don't) to long term revenue and growth goals. 
+
+I guess maybe my experience has been more like going from an outside agency to an in-house team. I do love the variety client work offers, but it's been fun digging into deeply understanding Netlify as a platform and the Jamstack ecosystem.
+
+**Rachel:** What feature or functionality would you love to see added to CSS?
+
+**Lynn:** A lot of things I've always wanted are being actively worked on which is really cool. Container queries and the `:has()` pseudo-class are at the top of the list.
+
+[Interpolation timelines](https://wiki.csswg.org/ideas/timelines) feel like they could be super useful. [Scott Kellum](https://twitter.com/ScottKellum) recently talked me through how they might help with some issues I've been running into with my responsive experiments and it's super cool.
+
+I often reach for JS to give me the height of an element when it's not explicitly set, so it might be cool if CSS could do that on its own. I'm sure that's complicated though!
+
+**Rachel:** Who else is doing really interesting, fun, or creative work on the web right now?
+
+**Lynn:** So many people are doing fun work! Some I'm loving lately:
+
+- [Neal Agarwal's](https://nealagarwal.me/) [neal.fun](https://neal.fun) is a treasure trove of delightful web projects.
+- I love the fun and creative SVG work from [Cassie Evans](https://twitter.com/cassiecodes). 
+- [Jhey Tompkins](https://jhey.dev/) does really fun CSS demos.
+- I love the project [Style Stage](https://stylestage.dev/) (a next generation CSS Zen Garden) from [Stephanie Eckles](https://thinkdobecreate.com/). 
+- Mind-blowing CSS artwork from [Ben Evans](https://www.tinydesign.co.uk/ben-evans-portfolio/) and [Diana Smith](https://diana-adrianne.com/).
+- Charlie Gerard is making extremely cool hands-free and motion-controlled demos.
+- [George Francis](https://georgefrancis.dev/) is creating beautiful generative artwork.  
+
+You can find out what Lynn creates next via her portfolio website at [lynnandtonic.com](https://lynnandtonic.com), or by following her on [Twitter](https://twitter.com/lynnandtonic).
diff --git a/src/site/content/en/blog/community-highlight-melanie/index.md b/src/site/content/en/blog/community-highlight-melanie/index.md
new file mode 100644
index 00000000000..e29c0f5416d
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-melanie/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: 'Community highlight: Melanie Sumner'
+authors: 
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+alt: 'Learn Accessibility! Community highlight.'
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+subhead: >
+  Melanie Sumner is a software engineer, specializing in digital accessibility. We talked about her path to engineering, accessible design, Ember.js, and the importance of funding these efforts.
+description: >
+  One of a series of interviews with people working in accessibility. This time, we spoke with accessibility expert, Melanie Sumner.
+date: 2022-10-06
+tags:
+  - blog
+  - accessibility
+  - community
+---
+
+_This post highlights a community expert, as a part of [Learn Accessibility!](/learn/accessibility/)_
+
+{% Aside %}
+Read some recent articles by Melanie on
+[her process for accessibility testing](https://melsumner.github.io/accessibility-testing)
+and [getting started with accessibility](https://melsumner.github.io/getting-started-with-accessibility).
+{% endAside %}
+
+**Alexandra White**: Thanks for joining me! Who you are and what you do?
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/j1ZYEFXC0JsAlpQsswJX.png", alt="Melanie Sumner's headshot.",
+  width="350", height="350"
+%}
+</figure>
+
+**Melanie Sumner**: My name is Melanie Sumner and I am a software engineer
+specializing in digital accessibility. I've been writing code for the web for
+25 years. My first career was… kind of a spy. I was an intelligence analyst in
+the US Navy, and coding was my hobby. 
+
+I didn't really like being a spy. I wasn't fond of death, it turns out. As most
+people are not, when they have to be closer to it. I had to decide what I
+wanted to do next, and it was time to turn my hobby into my career. In the last
+10 years, I've really focused on software engineering in the accessibility
+space, specifically. 
+
+**Alexandra**: You don't often hear, "Oh first I was a spy." No big deal. What
+brought you into accessibility work? 
+
+**Melanie**:  I was working at the University of North Carolina [UNC] Chapel
+Hill at the time, in the Department of Development. They don't mean development
+like web development, they mean development like fundraising.
+
+My direct manager had a vision impairment, and he had to zoom everything to
+400% to see it. He was a fantastic software engineer. Probably the best manager
+I've ever had, actually. But he was always breaking my stuff, because he would
+zoom in to look at my work. If I hadn't thought about building things
+responsively, they would break.
+
+My manager's boss was blue colorblind. I don't know if you know what UNC blue
+looks like, but it's this [light sky blue color](https://identity.unc.edu/brand/color-palette/).
+And they _loved_ using it on white.
+
+**Alexandra**: (laughs) Oh no.
+
+**Melanie**: His boss was always complaining that he could never see my work! I
+had to develop a set of complementary colors and a color scheme for our sites.
+That got me thinking about color contrast and thinking about how people who are
+colorblind (or otherwise visually impaired) use the web.
+
+Because UNC is a state university, there's a
+[US federal requirement](https://www.section508.gov/develop/applicability-conformance/)
+to conform with WCAG accessibility level AA. We aimed for level AAA because
+it's an education institution.
+
+{% Aside 'codelab' %}
+Take the Learn Accessibility module
+[How is digital accessibility measured?](/learn/accessibility/measure/) to read
+more about WCAG conformance levels.
+{% endAside %}
+
+As I learned more about the state and federal requirements and began reading
+the [W3C Accessibility spec](https://www.w3.org/TR/WCAG21/), I thought, "All of
+this makes sense." Most of the web wasn't compliant, from what I could see. Of
+course, people have been working on web accessibility for as long as the web
+has existed. Sometimes JavaScript engineers (in particular) are a little slow
+on the uptake when it comes to digital accessibility.
+
+I call accessibility the final frontier of the web. Lots of good people work on
+automation for accessibility&mdash;and we need to work on solutions the same
+way that we've approached other hard problems, such as performance and security.
+
+**Alexandra**: You've probably read a lot of long complex documents, in the
+Navy and at UNC. Did you find it was challenging to understand the spec?
+
+**Melanie**: I had to read it about five times before I understood it&mdash;and
+I'd read other specs before. I always tell people, don't feel bad if you don't
+understand it, because I had to read the spec five times! I'm not even joking. 
+
+It takes a lot of time to get used to spec language. And if you don't interpret
+it correctly, you might do the wrong thing. Also it's important to understand
+that a lot of the spec language is meant for browser developers. Look for
+"authors should," because that's a reference to web developers.
+
+**Alexandra**: A lot on the web could be better if more developers knew how to
+decipher the specs.
+
+**Melanie**: There's a lot to be said for sites that do that interpretation for
+you. I built [a11y-automation.dev](https://a11y-automation.dev/) and that site
+is kind of like my baby, my side project. I try to itemize every accessibility
+violation and link it to the WCAG success criteria in question. If there's
+automation to prevent the error, I'll offer that solution.
+
+You could familiarize yourself with the list of potential violations, but more
+important is learning how to fix it. For automated fixes that don't exist,
+maybe you're inspired to write a linter or a template&mdash;maybe you get
+inspired to write some kind of test.
+
+I prefer to work in open source, because you get to kind of riff off each
+other, offer an improvement (sometimes an improvement, sometimes not, but we
+all try our best). We build on each other's stuff, and then we end up with this
+really great outcome for the web.
+
+## How to fund accessibility
+
+{% Aside 'codelab' %}
+Learn about the [business impact](/learn/accessibility/why/#business-impact) of
+building accessible websites.
+{% endAside %}
+
+**Alexandra**: I was really drawn to
+[pleasefunda11y.com](http://pleasefunda11y.com). It's really important to get
+developers to learn how to build accessible sites, but they won't always have
+the resources without having executive leadership funding and approval. Why did
+you decide to build this site?
+
+**Melanie**:  I was frustrated because accessibility is so underfunded. All of
+the open source funding  seems to keep going to CSS. And I love CSS, we can do
+so much with it.
+
+I built the site because [Addy Osmani](https://twitter.com/addyosmani)&mdash;a
+Chrome software engineering manager&mdash;reached out and said he saw I was
+asking for accessibility funding, but he wanted advice on what specific work
+could be funded. That's a big problem: open source funders want to give money
+to specific projects, not general ideas that have no determined outcome. I took
+some time to write down some specific initiatives, what's needed and how
+they'll help make sites accessible.
+
+Even if companies build towards these efforts without me, we could move
+accessibility on the web forward in a really significant way. It's a very small
+spend by comparison to other web efforts, and it would have a huge impact on
+people's lives.
+
+The current way of thinking is often, "Well, how many people have a
+disability?" It should be: "What is any person's relationship to their
+technology?"
+
+And some folks have told me, "Well, I don't think color blindness is a
+disability." You may not identify yourself as having a disability if you're
+colorblind, but it does affect your relationship with technology. 
+
+<figure>
+<ul class="stats bg-state-info-bg color-state-info-text">
+  <div class="stats__item">
+    <p class="stats__figure">
+      15
+      <sub>%</sub>
+    </p>
+    <p>people self-identify as disabled.</p>
+    <p><sub><a href="https://www.who.int/teams/noncommunicable-diseases/sensory-functions-disability-and-rehabilitation/world-report-on-disability" aria-label="View the statistic source, WHO.">Source</a></sub></p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure" style="white-space: nowrap">
+      253 
+      <sub>m</sub>
+    </p>
+    <p>people with visual impairments.</p>
+    <p><sub><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5820628/" aria-label="View the statistic source, National Library of Medicine.">Source</a></sub></p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      39
+    </p>
+    <p>countries with web accessibility law.</p>
+    <p><sub><a href="https://www.w3.org/WAI/policies/" aria-label="View the statistic source, Web Accessibility Intiative.">Source</a></sub></p>
+  </div>
+</ul>
+<figcaption>
+  Learn more about the statistics in Learn Accessibility's first module:
+  <a href="/learn/accessibility/why/">What is digital accessibility, and why does it matter?</a>
+</figcaption>
+</figure>
+
+**Alexandra**: Tell me more about understanding your relationship with
+technology. How does that relate to accessibility?
+
+**Melanie**: For example, if you are neurodiverse, maybe you need really simple
+language and very clear directions. You may be better served navigating through
+three or four screens in a flow, making a few choices at a time until you get
+to the end. There's not good guidance for modern technical applications.
+
+We have whole companies that do devops, and if you try to use some of those
+websites, you're like, "Oh my god," you know? We try to pack the kitchen sink
+into all of our interfaces these days.
+
+**Alexandra**: Can you share an example?
+
+**Melanie**: For example, GitHub has dropdowns with nested tabs. And
+[exasperated sigh]. I can't get upset (even if I'm frustrated). The modern web
+has to grow to meet new demands. But we also have a responsibility to build in
+a way that doesn't leave people behind.
+
+That's what drives me, that's my passion. I don't want somebody to not be able
+to get a job because the tools they'd have to use at the job are not accessible.
+
+**Alexandra**: One hundred percent. And people often think about building
+accessible products for their external users, but not necessarily thinking
+about their employees.
+
+**Melanie**: I thought, you know what, this funding advice would probably
+benefit everyone.
+
+I hear from engineers all the time that they'd love to do accessibility but "my
+company doesn't care." I bet they do care! You just need to bridge the business
+logic gap. Show them the beneficial outcome for the business. The [site is open
+source](https://github.com/MelSumner/please-fund-a11y), of course, and I love
+contributions and edits.
+
+**Alexandra**: Accessibility is often left to the end of the process, like, "Oh
+we can just make this accessible later." But it's going to take a lot more time
+to add it later than it would to integrate accessible practices throughout the
+project.
+
+**Melanie**: I often say, "Do you want to pay to build it once or do you want
+to pay to build it twice?"
+
+## Ember.js and the core accessibility team
+
+**Alexandra**: I know you're also involved in the Ember.js framework core team.
+How did you get involved?
+
+**Melanie**: I was hired to work at JPMorgan Chase, on their corporate
+investment banking platforms. Ember is a heavy duty JavaScript framework used
+when you need a really stable (maybe even kind of boring) base, that can help
+you avoid writing code that loses a lot of bank dollars. Ember has a backwards
+compatibility guarantee&mdash;you can upgrade every time, even if you hit a
+major version. We really try to do things incrementally, so it doesn't break
+your app.
+
+Anyway, I showed up to an Ember conference, and I met a bunch of people in the
+community. Ember folks were so kind. And there's
+[a really strong code of conduct](https://emberjs.com/guidelines/) that I just
+hadn't seen yet in other places.
+
+When I got out of the military, I wanted to go into security. I went to an
+infosec meetup, and didn't see any other woman there. One of the older guys
+looked at me and said, "Are you sure you're in the right room, sweetheart?"
+
+**Alexandra**: [Groans] It hurts. And it's completely unsurprising. I've
+experienced something similar.
+
+**Melanie**: I want to say this was 2011, maybe 2012? The landscape has changed
+a lot. I stayed that night, through that meetup, to prove a point. I wasn't
+gonna let that comment shut me down. I cracked jokes, took good notes, and
+participated in the conversation, so people knew I was there. I feel like a lot
+of my career has been proving men wrong. 
+
+But, I don't want women to become software engineers just to prove men wrong. I
+wanted to be a software engineer to build amazing things, because it's fun to
+do. Women should have that career option.
+
+**Alexandra**: Absolutely. 
+
+**Melanie**: I shared what I knew about accessibility with the Ember community,
+because obviously as a banking platform, you have to conform to the US federal
+requirements. Yehuda Katz and Tom Dale said, "We have a gap on the team. We
+have a lot of JavaScript experts, performance experts, people out-of-this-world
+smart, and we need someone with accessibility knowledge." And they invited me
+to join the core team.
+
+I'm working on initiatives to help make Ember accessible by default. That means
+when you say `ember new <my-app-name>`, you should immediately pass WCAG
+success criteria.
+
+**Alexandra**: I saw a long list of accessibility tools for Ember on GitHub.
+Have you found that people in the Ember community are excited to contribute to
+those tools? 
+
+**Melanie**: That's been a really exciting part of this work. I wrote
+accessibility linting rules for Ember while working at LinkedIn. Then I left
+LinkedIn to work for Hashicorp, and other folks are still contributing to the
+linter because it's useful for them. That's the part of this work that gives me
+chills and gets me excited.
+
+We accept that, as a baseline, accessibility is a civil right. That's not up
+for discussion.
+
+What we discuss is: What can we implement? When? How do we make it? How do we
+teach this and make it backwards compatible? How do we help developers provide
+accessibility support without a huge extra feature that they have to build or
+plan for?
+
+**Alexandra**: Accessibility is a civil right. That gives me chills! It
+should just be a thing we all know as truth.
+
+**Melanie**: I've had people say uninformed things to me, like "I wouldn't use
+the internet if I was blind." Or, "Why do I have to think about disabilities
+when it's only 5% of my users, when it's working for 90% of my users?" I won't
+have those discussions, because they're often used to distract from the work.
+
+When you write accessible code, you're going to get performance boosts because
+you're thinking about building sites informed by W3C specs. You'll use the
+semantic HTML instead of just divs, and you'll use headings. You'll choose a
+`<button>` instead of adding a click event to a `<div>`, and you'll get
+performance enhancements.
+
+## Do one thing: automate accessibility
+
+**Alexandra**: What's one thing web developers should do to build accessible
+websites?
+
+**Melanie**: Add automation. Start with an existing linter for whatever
+framework you have, whatever kind of code you're using. I don't care which one
+you use! Your build should break if one of those rules is broken.
+
+Some things can't be automated, because AI can't yet decipher intent. For
+example, an image's alt text value should be _meaningful_, but what does that
+actually mean? Right now, a human needs to discern that, and not automation.
+
+But an automated tool can tell you, "You're not passing
+[color contrast](/learn/accessibility/color-contrast/)." Just
+fix it. Don't fight it, don't say, "But I don't want to, I prefer it this way."
+This is not about you. It's about making what we do available for everyone in
+the world every day.
+
+Accessibility is a journey, and you're always going to be learning. I've been
+specializing in accessibility for over a decade, and I'm still learning new
+things all the time!  Don't be defensive, just do it.
+
+<hr />
+
+Keep up with Melanie's work on her website at
+[melanie.codes](https://melanie.codes) and Twitter
+[@a11yMel](https://twitter.com/a11yMel). Check out her accessibility resources
+on [pleasefunda11y.com](https://pleasefunda11y.com),
+[a11y-info.com](https://a11y-info.com), and
+[a11y-automation.dev](https://a11y-automation.dev).
diff --git a/src/site/content/en/blog/community-highlight-miriam-suzanne/index.md b/src/site/content/en/blog/community-highlight-miriam-suzanne/index.md
new file mode 100644
index 00000000000..f89e2aed629
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-miriam-suzanne/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: 'Community highlight: Miriam Suzanne'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  Miriam Suzanne is an author, artist, and web developer in Denver, Colorado, and is currently working on exciting CSS specs like Container Queries and Cascade Layers.
+description: >
+  One of a series of interviews with people from the web development community who are doing interesting things with CSS. This time I speak to Miriam Suzanne.
+date: 2021-12-24
+tags:
+  - blog
+  - css
+  - community
+---
+
+_This post is part of [Designcember](https://designcember.com/). A celebration of web design, brought to you by web.dev._
+
+
+Miriam Suzanne is an author, artist, and web developer in Denver, Colorado. She’s a co-founder of [OddBird](https://oddbird.net ) (a web agency), staff writer for CSS Tricks, member of the Sass core team, and W3C Invited Expert on the CSS Working Group. Lately she's been focused on [developing new CSS features](css.oddbird.net) like Cascade Layers, Container Queries, and Scope. Offline, Miriam is a published novelist, playwright, and musician. We talked about her work with Sass and CSS.
+
+<figure>
+  {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/waVF92Q2nGF3zqWcRkLc.jpeg", alt="Miriam onstage, smiling, lit by a spotlight.", width="800", height="534" %}
+  <figcaption>Photo credit <a href="https://fromthehipphoto.com">From the Hip Photo</a></figcaption>
+</figure>
+
+**Rachel:** I first learned about your work due to your grid framework [Susy](https://www.oddbird.net/susy/), what led you to create that?
+
+**Miriam:** Back in 2008, layout on the web was a very different experience. Developers had moved away from table layout to more semantic (but still hacky) floated grids. There was a boom in one-size-fits-all 12-column "grid frameworks"–providing a pre-defined (usually static) grid with a set of pre-defined CSS classes. If you needed anything more customizable, you were on your own. It was clear that websites needed to become more responsive, but media-queries weren't available yet, and there were a load of browser compatibility issues around fluid floats. 
+
+I was using Natalie Downe's [CSS Systems](https://blog.natbat.net/post/46614243624/css-systems) approach, which was clever about responding to both font and viewport sizes, but I was frustrated by all the repetitive math and browser hacks required. At the same time, Sass was starting to get some attention, and it fit perfectly for what I needed. The first draft of Susy was very simple: just a couple mixins to do the math and add the hacks I needed. The goal was to be minimal, and only output the essential code. Totally customizable grids, without any predefined classes.
+
+**Rachel:** How did you make the shift from working on a CSS preprocessor to working on CSS specifications? Do you think working on the preprocessor was a good background for specification writing?
+
+**Miriam:** In my experience there is a lot of overlap, and I'm still very active on both sides of that divide. But I think that's largely thanks to the Sass team in particular, led by [Natalie Weizenbaum](https://twitter.com/nex3), which takes a very long-term view&mdash;trying to develop tools that integrate smoothly with developing web standards. Pushing beyond one-size-fits-all "opinionated" solutions and building for long-term flexibility is essential when you are thinking about the future of core web standards. 
+
+How can we build tools that respect the diversity of developer needs and approaches, while still encouraging and facilitating accessibility and other important considerations?
+
+**Rachel:** We’ve got a bunch of stuff coming into CSS that essentially replaces functionality that was traditionally part of Sass. Are there strong reasons to still use something like Sass?
+
+**Miriam:** Yes, for some people&mdash;but there's no universal answer here. Take variables for example. Sass variables are lexically scoped, and compiled on the server, with organized data structures like lists and objects, color manipulation, etc. That's great for design system logic that doesn't need to run in the browser. 
+
+CSS variables have some overlap, they can also store values, but they provide an entirely different set of cascade-based strengths and weaknesses. Sass can't handle custom properties, and CSS can't really handle structured data. Both are useful, and both are powerful&mdash;but your specific needs may vary. 
+
+I think it's great when people can eliminate tools that they no longer need, and some projects might not require both server- and client-side variables. Wonderful! But it's too simple to assume that means they are identical, and one simply replaces the other. There will always be use-cases for some design logic to happen server-side, and some to happen client-side&mdash;even if we get to the point where the languages provide essentially the same features. Pre-processors are with us for the long term.
+
+**Rachel:** Is there anything that has surprised you as you’ve got more involved in the work of creating standards, or anything that you think folk generally might not be aware of about the process?
+
+**Miriam:** Before getting involved, the standards process felt like a mysterious and magical black box, and I wasn't sure what to expect. I was scared that I might not have enough knowledge of browser-internals to contribute, but the reality is they don't need more browser engineers. They need more developers and designers who are building websites and applications in the wild. 
+
+I was surprised to find that very few of the people involved are primarily focused on standards, but also very few of them are primarily developing or designing websites. The W3C is made up of 'volunteers' from member organizations (often paid by those orgs, but not as their primary job) and membership isn't cheap. That skews the participants away from day-to-day designers and developers, especially those of us doing client work at small agencies, or freelance. My role as an Invited Expert would be totally volunteer, an expensive hobby, if I hadn't found outside funding for that work.
+
+In reality, the process is quite open and public and needs developer involvement–but there are always so many conversations happening at once, it can be hard to find your place. Especially if it's not your day job.
+
+{% Aside %}
+To find out how to contribute to the web platform, check out the [Web Platform Contribution Guide](https://wpc.guide/).
+{% endAside %}
+
+**Rachel:** Container queries have been the holy grail for a lot of web developers for many years. I’m very excited about the fact that we’re getting them. I feel as if a lot of folk are thinking about the utility of container queries&mdash;do you feel they have potential to unlock more creativity too?
+
+**Miriam:** Absolutely, though I don't see those as entirely separate. We all have limited time, and we're trying to write maintainable and performant code. When something is hard to do practically, we are less likely to get creative with what's possible.
+
+Still, the web industry is now dominated by large corporate interests, and so those business concerns always get more airtime than web artists. And I think we lose a lot if we ignore web creativity as a primary use-case for features. I've been very excited to see some of the CSS art folks playing with the container query prototype. [Jhey Tompkins](https://jhey.dev/) built a particularly clever and interactive demo of [CSS venetian blinds](https://jh3y.medium.com/can-we-create-a-resize-hack-with-css-container-queries-e9fc32501293) as commentary on the old anti-CSS meme. I think there's a lot more to explore in that space, and I can't wait to see what else people come up with.
+
+The conversation has also focused on size-based queries, as the original use-case, but I'm excited to see what people do with style queries–the ability to write conditional styles based on the value of a CSS property or variable. It's an extremely powerful feature, and so far mostly unexplored. I think it opens up even more creative opportunities!
+
+**Rachel:** Is there anything that we can’t do (or have an upcoming way to do) in CSS that you think would be useful?
+
+**Miriam:** I'm very excited about some other specs I've been working on. [Cascade layers](https://developer.mozilla.org/docs/Web/CSS/@layer) will give authors more control over specificity issues, and Scope should help with more precise selector targeting. But both of those are high-level architectural concerns. The artist in me is more excited for things like CSS toggles, a declarative way to create interactive styles, or container 'timelines', allowing us to smoothly transition values between media or container breakpoints. That has very practical implications for responsive typography, but would also open up a lot of creative opportunities for responsive art and animation. 
+
+**Rachel:** Who else is doing really interesting, fun, or creative work on the web right now?
+
+**Miriam:** Oh, I'm not even sure how to answer that, there are so many people doing creative work in such different areas. There's a lot of exciting standards work in progress from both the CSSWG and Open-UI, including some of your work on fragmentation. But I often find the most inspiration from web artists, and how people are putting these tools into production, in ways that aren't directly tied to commerce. People like [Jhey](https://jhey.dev/), or [Lynn Fisher](https://lynnandtonic.com/), or [Yuan Chuan](https://twitter.com/yuanchuan23), or many others who are pushing the boundaries of what web technologies can do visually and interactively. Even people doing more business-driven work can learn a lot from their artistic techniques.
+
+I also appreciate the more conceptual web art of people like [Ben Grosser](https://bengrosser.com/), who keeps pushing us to reconsider what we want from the web, and social media in particular. Check out his new [minus.social](https://minus.social), for example.
+
+**Rachel:** Keep up with Miriam’s work on CSS at [css.oddbird.net](https://css.oddbird.net) and find out what else she is up to via her website at [miriam.codes](https://miriam.codes) and Twitter [@TerribleMia](https://twitter.com/TerribleMia).
diff --git a/src/site/content/en/blog/community-highlight-shuyi/index.md b/src/site/content/en/blog/community-highlight-shuyi/index.md
new file mode 100644
index 00000000000..2a346ee528e
--- /dev/null
+++ b/src/site/content/en/blog/community-highlight-shuyi/index.md
@@ -0,0 +1,320 @@
+---
+layout: post
+title: 'Community highlight: Olutimilehin Olushuyi'
+authors: 
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+alt: 'Learn Accessibility! Community highlight.'
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/8nibxhPpYh7CcJmZubSa.png
+subhead: >
+  Olutimilehin Olushuyi is a lawyer, new to accessibility. We talked about
+  his battle with JavaScript, international standards, and the importance
+  of reading a website's contents.
+description: >
+  One of a series of interviews with people from the web development
+  community who work in web accessibility. This time we spoke with
+  Olutimilehin Olushuyi.
+date: 2022-11-09
+tags:
+  - blog
+  - accessibility
+  - community
+---
+
+_This post highlights a community expert, as a part of [Learn Accessibility!](/learn/accessibility/)_
+
+**Alexandra White**: How'd you get started with web accessibility?
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/gAeaexQOr9TO1FaNvpqb.jpeg", alt="Olutimilehin Olushuyi's headshot.",
+  width="350", height="334"
+%}
+</figure>
+
+**Olutimilehin Olushuyi (Shuyi)**: Okay, so, it's a funny story. I'm a lawyer.
+I realized in my final year of school, I didn't want to practice law for the
+rest of my life. So, I tried to drop out of school, but my dean and "school
+mother," [Professor Ayodele Atsenuwa](https://www.iclrs.org/ayodele-atsenuwa/),
+said, "Let's talk about this. You're in your final year&mdash;just finish it." 
+
+Ultimately, I'm happy she said that, and I'm happy I finished, because it's
+been helping me in my accessibility work. Professor Atsenuwa asked me what I
+wanted to do instead, and I had no idea.
+
+I started to look up new career opportunities, and got in touch with some
+people who wanted to build a startup and needed a lawyer. That opportunity
+wasn't the right fit, but that was the first time I knew people wrote code for
+all of the products we use. I thought, "I can pick this up." I started to teach
+myself HTML and CSS. Then, I got to JavaScript and … [laughs] JavaScript did
+JavaScript things, so I went back to focus on my front-end semantic languages.
+
+I came across the work of [Andy Bell](https://piccalil.li/) and
+[Heydon Pickering](https://heydonworks.com/). I purchased
+[Every Layout](https://every-layout.dev/), and it changed my life. Andy kept
+mentioning accessibility, but I didn't know what that meant in this context. I
+realized I may be able to work in web development without needing to know how
+to write JavaScript! 
+
+I reached out to Heydon and he was very receptive, very responsive. It seems
+everyone in the accessibility field is that way, and I'm grateful for that. 
+
+**Alexandra**: I'd definitely agree, everyone I've spoken with has been so kind
+and so helpful.
+
+**Shuyi**: Absolutely. Currently, I do a lot more work in advocacy. I'm based
+in Nigeria, a country where web accessibility is not mandated by law. The
+Discrimination Against Persons with Disabilities Act passed sometime in 2018.
+But there's no web accessibility law, only law about physical accessibility.
+It's like the USA's Americans with Disabilities Act (ADA). Our law is poorly
+structured, but better than nothing. 
+
+I realized if I'm going to have any chance to make a difference and become an
+accessibility focused developer, first I have to make the ecosystem aware of
+accessibility needs. I started tweeting about accessibility advocacy. I talked
+to companies and brands, whose buy-in is needed to get accessibility to work.
+
+**Alexandra**: I bet your legal background is incredibly useful in working with
+accessibility. You can actually read the new legislation and understand it in a
+way that the average person won't. That includes an average developer.
+
+**Shuyi**: I think one of the biggest gifts from my legal background is that I
+can sit through unending pages of background materials, really lengthy
+documents, without getting tired. I just fold my legs, put my laptop up, and
+start to read. And read. And read. It's got advantages,
+
+**Alexandra**: I mean … I'm jealous, that's a great skill to have. Do you think
+you'd ever work with the government to get a digital accessibility law passed?
+
+**Shuyi**: I'll be honest, I don't think so. Engaging with the government is a
+different ball game. It takes too long to get our government to do something,
+especially as an individual. That kind of work is better for NGOs and other
+organizations with staffing and resources to bring about change.
+
+The physical law took so much time to pass, and accessibility needs moved far
+beyond what ended up in the law years ago. It's like the first draft was passed
+even though the world has changed.
+
+Ultimately, we're happy there's something to rely on, no matter how outdated it
+ended up being. There is a law to enforce.
+
+## Create accessible layouts
+
+**Alexandra**: I read your article,  [`<article>` vs. `<section>`: How To Choose The Right One](https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/)
+in Smashing Magazine and the [Twitter thread](https://twitter.com/ShuyiOlutimi/status/1455244970345082884?s=20&t=msdrhIBdSXGiEkc2pg0mOA)
+that inspired it. What would you say is one big takeaway, what's the one thing
+you want from web developers?
+
+**Shuyi**: Developers must read the content before they begin building layouts. 
+
+Originally, for my site design, I had just counted the number of paragraphs and
+put them in sections and articles, without much thought. But,
+[someone drew my attention to the misuse of sections](https://twitter.com/gracesnow/status/1455297078297518085)&mdash;it
+was the first time I thought about it. Reading the content is one thing you can
+do to make a better product.
+
+**Alexandra**: When I was a developer, I often had freelance clients say, "Oh,
+just build something for us and we'll fill the content in later." And sure,
+there are some pages that have automatic context, like a contact page. But
+knowing how many pages to build, and what kind of custom support was needed,
+that could only be answered when I got the content.
+
+**Shuyi**: Before knowing what I know, my best client would give me general
+design ideas, and I'd built out a site with a bunch of lorem ipsum. I'll figure
+all that stuff out. But, when you realize how much the content infrastructure
+affects users on the web, you realize just how much of the standard process for
+building things on the web is actually flawed. You must be intentional when you
+build things.
+
+So much accessibility infrastructure work doesn't get attention at all, and it
+breaks my heart.
+
+{% Aside 'codelab' %}
+Take the Learn Accessibility module on
+[Content structure](/learn/accessibility/structure) to read about semantic HTML,
+landmarks, data tables, and more.
+{% endAside %}
+
+**Alexandra**: How did you do your research to make sure the advice you gave in
+the article was correct?
+
+**Shuyi**: First, I separated the sources of information&mdash;that's something
+you do in law, separating primary and secondary sources. The primary sources
+are the actual law (like the ADA and Nigeria's laws) and the secondary sources
+are what experts interpret from the law.
+
+I decided to refer only to the primary sources: the HTML, WCAG, and WAI-ARIA
+specs. I read other people's works, a lot of good work. But, at the end of the
+day, the opinions were so divergent, I decided I could only take them as useful
+context but not rely on them as having the right answers.
+
+## Build an accessible community
+
+**Alexandra**: You mentioned trying to shape your Twitter feed into a place for
+accessibility. Have you had many other conversations on Twitter since the
+Smashing Magazine article's publication about what you learned?
+
+**Shuyi**: For the first couple of days, I couldn't make good sense of Twitter.
+So many people followed me, like 200+ people. At first I was excited, but then
+I was scared. Like, I'm just starting out, don't follow me for a bunch of sage
+wisdom. I was added to a lot of Twitter lists.
+
+But like, I'm a person. I tweet about a lot of vague, non-accessibility,
+non-web developer stuff. I don't want to let people down. Don't follow me just
+because of accessibility! I'll feel like I'll let you down.
+
+**Alexandra**: [laughs] I mean, I think a lot of people think that. I certainly
+do about my Twitter persona.
+
+**Shuyi**: Most responses to the article itself were positive. I got one
+response to the article which was a bit controversial. [Vitaly](https://www.smashingmagazine.com/author/vitaly-friedman/) was my
+editor, and he reached out directly to share
+[the comment](https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/#1659357715965608590)
+and asked me to investigate. Turns out, the person was referencing the MDN docs
+which said that all [articles should have a heading element](https://developer.mozilla.org/docs/Web/HTML/Element/article#usage_notes).
+I recommended that the section should have a heading element based on the specs.
+
+The MDN docs recommend including the header but don't really explain what the
+benefit is.
+
+The spec changes less frequently than user needs, of course, so as long as you
+can back up your decision to change the way you build something, it's probably
+okay.
+
+So, let me give an example. Let's say you're building a card component called
+"Prices," with three elements in it. Hayden Pickering would suggest putting
+each card into a list element. That way, when someone using assistive
+technology (AT) gets to that section, it's announced to them that there are
+three items in the price list. You can style the list so that there are no
+bullet points, make it look however you want, but it helps AT users get the
+useful information first. If you wrapped each item in a div, you'd just be
+focused on the visual aspects, which doesn't help visually impaired users.
+Think of people before design. 
+
+I took that idea, and transposed it for a blog page. The blog posts are actually within a list element. That way, on entry to the page, the user is alerted that they are at one of some number of posts on the page.
+
+So, I stood by my recommendations in the article, and I will until I understand
+why MDN makes the recommendation.
+
+**Alexandra**: Since the MDN docs are open source, will you suggest changes and
+make updates there?
+
+**Shuyi**: I'll be honest, I haven't yet made any open source
+contributions. But, this is the kind of work I would like to be doing,
+certainly more than working with the government.
+
+## Spec versus implementation
+
+**Alexandra**: It sounds like one big takeaway is that sometimes the spec says
+one thing, but implementation and other external docs may suggest doing
+something different. How does someone decide whose advice to follow?
+
+**Shuyi**: I think about this a lot. I'm not sure I have the required
+experience to answer that question. We're always trying to future-proof. It's
+good to make continuous enhancements as the web changes. That way, when the
+spec is updated, you don't need to retrofit your site. What are the chances
+that you make a choice and three years from now the spec changes.
+
+Every choice we make now is our best guess of what we think the future of the
+web will look like, what direction we think the spec writers will go.
+
+**Alexandra**: The web is constantly changing, one person can't have all of the
+answers! Did the specs go through changes while you were writing?
+
+**Shuyi**: I started writing my article before the
+[document outline model](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements#multiple_h1_elements_on_one_page)
+was removed from the spec. This model suggested that heading levels should be
+automatically calculated based on how deep the nesting was. But it was never
+really implemented and that created a lot of issues for developers. The advice
+to developers was to manually fix their headings.
+
+If the article had been published before the spec change, I probably would have
+gone back and made that edit&mdash;it is in Smashing Magazine after all. But if
+it had lived on my personal blog, would I have? Probably not. And that's just
+talking about updating an article, not updating an entire website that's built
+based on a changing spec.
+
+Do we expect developers to immediately change their websites when the spec
+changes? Of course not. They make calculations as to what's best when they're
+building their sites and live with those choices. The specs will change, the
+specs may not have the answer.
+
+## Accessibility as a career
+
+**Alexandra**: How much of your time do you spend thinking about global
+accessibility standards? Standards and laws are different around the world. I'm
+sure you've read a lot of them, and I'm sure some laws tell you to do the
+opposite things. What would you do in those cases?
+
+**Shuyi**: I thought about launching a business for freelance accessibility
+work. I went into a global web accessibility chat channel and asked for tips on
+how to get started. [Adrian Roselli](https://adrianroselli.com/) reached out
+and said, "Your clients will be relying on you to keep them compliant with laws
+which could have major consequences. Before you offer your services, know what
+region you have expertise in. Know what laws you're familiar with so that,
+while you're making a living for yourself, you don't leave clients with huge
+liabilities. They trust you to know the law."
+
+Of course, so many businesses are seeking accessibility help because they are
+legally required, and not just because it's the right thing. Capitalism is the
+reason accessibility is being implemented. At the end of the day, it doesn't
+matter why it happened, it matters that the product is accessible.
+
+{% Aside 'codelab' %}
+Learn more about the [business impact of digital accessibility](/learn/accessibility/why/#business-impact).
+{% endAside %}
+
+I put a pause on freelancing until I have full confidence that I can help
+clients with the laws of their region. Standardization is critical, the efforts
+and impact of WCAG cannot be overstated. Having a central framework of how the
+web should work makes it easier for governments to rely on the same standard.
+But of course, not every government will accept those standards.
+
+**Alexandra**: You've gotten a lot of great advice from great people in your
+journey into accessibility. Is there any other advice you wish you'd gotten
+before you decided to pursue this as a career?
+
+**Shuyi**: While it wouldn't have changed my career path, it would have been
+nice to know that as noble as accessibility work is, it's greatly affected by
+capitalism. 
+
+**Alexandra**: [laughs] Oh yes.
+
+**Shuyi**: And I'm a junior. I have a year of experience in accessibility.
+Especially if you're based in Africa, like I am, there's a limited availability
+of positions in accessibility. Companies are hiring managers, one person to
+meet whatever legal requirements are needed. But I want to work on a team,
+where I can learn and build skills.
+
+I was so excited to get to work without learning JavaScript&mdash;that I could
+just learn the rules and help my team apply them. But the developer positions
+at agencies require that I have JavaScript experience. I moved to a new city
+and joined a JavaScript bootcamp so I can meet those requirements. For anyone
+else on their accessibility journey, know that you must focus on building your
+development skills first.
+
+I'm not going to lie, I still don't like JavaScript. 
+
+## Do one thing: add keyboard focus
+
+**Alexandra**: [laughs] Is JavaScript the reason I'm now a tech writer instead of a developer? Yes. Yes, it is. I hate it so much. I wish you the best of luck in your boot camp.
+
+What's one thing you want developers to do to make their site accessible?
+
+**Shuyi**: Keyboard focus. I am begging from the bottom of my heart. My
+trackpad currently doesn't work, so when I'm on the go, I rely on my keyboard
+to navigate the web, and almost every website is horrible. Keyboard focus
+doesn't just benefit disabled people.
+
+Building accessible platforms benefits everyone.
+
+{% Aside 'codelab' %}
+Take the Learn Accessibility module on
+[Keyboard focus](/learn/accessibility/focus/) to discover how to
+ensure all users can navigate your content.
+{% endAside %}
+
+<hr />
+
+Keep up with Shuyi's work on Twitter
+[@shuyiolutimi](https://twitter.com/shuyiolutimi).
diff --git a/src/site/content/en/blog/compat2021-holiday-update/index.md b/src/site/content/en/blog/compat2021-holiday-update/index.md
new file mode 100644
index 00000000000..ef99d0f04c1
--- /dev/null
+++ b/src/site/content/en/blog/compat2021-holiday-update/index.md
@@ -0,0 +1,159 @@
+---
+layout: post
+title: "Compat 2021 Holiday Update: presents for developers before the end of the year"
+subhead:
+    "End of the year update on Compat 2021—an effort to eliminate browser compatibility problems in five key focus areas: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms."
+authors:
+  - foolip
+  - kosamari
+hero: "image/Wd2sVnt4VLho4jgp7UtIyWFceE02/T4gzpGXXQ9sud6CEbHno.jpg"
+alt: "A hand holding a small box of presents with red ribbon."
+date: 2021-12-13
+tags:
+  - blog
+  - css
+---
+
+The end of the year is near, and it's time for a final update on Compat 2021—an effort to eliminate
+browser compatibility problems in five key focus areas.
+
+{% Aside %}
+This effort is also known as Interop 2021, matching the name of
+[Interop 2022](https://github.com/web-platform-tests/interop-2022), which is the continuation of
+this effort.
+{% endAside %}
+
+<div class="stats">
+ <div class="stats__item">
+   <p class="stats__figure">>90<sub>%</sub></p>
+   <p>score in all browsers</p>
+ </div>
+</div>
+
+Since our [last update](/compat2021-midyear/), we’ve continued to see improvements
+in all browsers. All browsers started with much lower test scores at the beginning of the year, but
+now all browsers have surpassed 90%! This means the web platform has significantly improved
+interoperability of the five focus areas.
+
+<figure>
+{% Img src="image/Wd2sVnt4VLho4jgp7UtIyWFceE02/Kaz3ye7gFfow8ia7lWYW.png", alt="A snapshot of Compat
+2021 Dashboard (experimental browsers)", width="800", height="727" %}
+  <figcaption>
+    A snapshot of <a href="https://wpt.fyi/compat2021">Compat 2021 Dashboard</a> (experimental
+    browsers).
+  </figcaption>
+</figure>
+
+{% Aside 'caution' %}
+The graph does not correctly show the improvements in Safari Technology Preview between May and
+November, as the version tested was [stuck](https://github.com/web-platform-tests/wpt/issues/31147)
+at an older version. This is now resolved but the data between May and November remains incorrect.
+{% endAside %}
+
+Contributions to browser engines are made not only by browser vendors, but also others in the web
+community. For this project, we particularly want to thank Igalia for
+[their involvement](https://www.igalia.com/2021/11/12/New-Interoperability-Milestones.html) and
+continued work to improve the scores. Igalia has contributed to improving all five focus
+areas of Compat 2021.
+
+On [wpt.fyi](https://wpt.fyi/), the test results dashboard, there’s now a
+[filtered test results view](https://wpt.fyi/results/?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=label%3Ainterop-2021)
+showing all of the tests included in Compat 2021, and also views for
+[Chrome](https://wpt.fyi/results/?diff&filter=ADC&q=label%3Ainterop-2021&run_id=5738932147847168&run_id=5682110523244544),
+[Firefox](https://wpt.fyi/results/?diff&filter=ADC&q=label%3Ainterop-2021&run_id=5644039006191616&run_id=5717852704210944),
+and [Safari](https://wpt.fyi/results/?diff&filter=ADC&q=label%3Ainterop-2021&run_id=5739124314079232&run_id=5759777691926528)
+comparing the results to our last update in July.
+
+Let’s take a look at the improvements in each area!
+
+{% Aside %}
+This post uses browser engine names when referencing specific improvements or bug fixes.
+**Chromium** is the engine used by Chrome and Edge, **Gecko** is used by Firefox, and
+**WebKit** is used by Safari.
+{% endAside %}
+
+
+## CSS flexbox
+
+`flex-basis: content` is now on its way to all browsers, with implementations landing in
+[Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=470421) and
+[WebKit](https://trac.webkit.org/changeset/284440/webkit). (The `content` value was already
+supported by Gecko.)
+
+In Chromium, an [issue with flexbox sizing](https://bugs.chromium.org/p/chromium/issues/detail?id=961902)
+is fixed, matching the spec and Gecko’s behavior. And in Gecko, several
+[issues affecting Compat 2021](https://bugzilla.mozilla.org/show_bug.cgi?id=1700745) are fixed,
+including an [issue with percentage height on flex items](https://bugzilla.mozilla.org/show_bug.cgi?id=1611303).
+Finally, in WebKit, support for more alignment property values ([left, right](https://trac.webkit.org/changeset/282078/webkit),
+[self-start, self-end](https://trac.webkit.org/changeset/282267/webkit), [start, end](https://trac.webkit.org/changeset/281840/webkit))
+is now added, and a lot of improvements were made for [absolute positioning](https://trac.webkit.org/changeset/281995/webkit),
+also improving the flexbox test results in Compat 2021.
+
+
+## CSS Grid
+
+The use of CSS Grid on the web continues to grow, as can be seen in both the
+[2021 Web Almanac](https://almanac.httparchive.org/en/2021/css#flexbox-and-grid-adoption) and
+Chrome’s [usage metrics](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693).
+
+The [launch of GridNG](https://blogs.windows.com/msedgedev/2021/08/10/compat2021-css-grid-gridng/)
+in Chrome and Edge 93 resolved many long standing issues with Grid, closing an impressive 38 issues
+in Chromium’s bug tracker. Together with many smaller improvements that followed, the Compat 2021
+score for Grid in Chromium improved by 3% to 97%. This work was led by the Edge team at Microsoft.
+
+An [absolute positioning bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1707643) affecting Grid
+was fixed in Gecko, and [many fixes](https://bugs.webkit.org/buglist.cgi?bug_status=RESOLVED&chfield=resolution&chfieldfrom=2021-01-01&chfieldto=2021-12-31&component=Accessibility&component=CSS&component=Layout%20and%20Rendering&component=New%20Bugs&f1=short_desc&f2=short_desc&f3=short_desc&list_id=7744283&o1=notsubstring&o2=notsubstring&o3=substring&query_format=advanced&resolution=FIXED&v1=Web%20Inspector&v2=%5BLFC%5D&v3=grid)
+have landed in WebKit, leading to a 1% improvement for Firefox and 3% improvement for Safari on
+the Grid tests.
+
+
+## CSS `position: sticky`
+
+In our last update, we noted that `position: sticky` was the first area where any browser (in this
+case Chrome and Edge) reached 100% passing tests. Now, following a [number of fixes](https://bugs.webkit.org/buglist.cgi?bug_status=RESOLVED&chfield=resolution&chfieldfrom=2021-01-01&chfieldto=2021-12-31&f1=short_desc&f2=short_desc&f3=short_desc&list_id=7744291&o1=notsubstring&o2=notsubstring&o3=substring&query_format=advanced&resolution=FIXED&v1=Web%20Inspector&v2=%5BLFC%5D&v3=sticky)
+in WebKit’s implementation, Safari also scores 100% for these tests.  Most of these improvements
+were included in Safari 15.
+
+
+## CSS `aspect-ratio` property
+
+Cross-browser support for defining the aspect ratio (width-to-height ratio) of elements has
+continued to improve, with Compat 2021 scores reaching 99%, 97% and 95% for Chrome/Edge, Firefox
+and Safari respectively. Most of the improvements are not with the `aspect-ratio` property itself,
+but rather with how `width` and `height` attributes are [mapped to a default `aspect-ratio` value](https://developer.mozilla.org/docs/Web/Media/images/aspect_ratio_mapping)
+for elements. This was implemented for multiple elements in [WebKit](https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images?diff&filter=ADC&q=label%3Ainterop-2021&run_id=5739124314079232&run_id=6290692121821184),
+and `<canvas>` for [Chromium](https://chromium-review.googlesource.com/c/chromium/src/+/3109968).
+
+
+## CSS transforms
+
+Support for `transform: perspective(none)` is now supported in
+[Chromium](https://chromestatus.com/feature/5687325523705856),
+[Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=1725207) and
+[WebKit](https://trac.webkit.org/changeset/285255/webkit). This will make it easier to
+animate between a perspective and no perspective.
+
+In Chromium, `transform-style: preserve-3d` (which allows child elements to participate in the same
+3D scene) and the `perspective` property (which applies a perspective transform to child elements)
+are now [aligned with the spec](https://chromestatus.com/feature/5640541339385856) by making them
+apply only to child elements.
+
+The big increase in the [scores](https://wpt.fyi/compat2021?feature=css-transforms) for CSS
+transforms for all browsers is mainly due to improvements to the test suite, where incorrect
+tests have been fixed or removed. This makes it easier to understand the remaining interoperability
+problems and avoid regressions in the future.
+
+
+## Conclusion
+
+We are grateful for the work that everyone has put in to end the year with many improvements to the
+score as well as better testing infrastructure. `aspect-ratio` was a long requested feature from
+web developers and it is now supported in all browsers. Use of flexbox, grid and `position: sticky`
+are all growing, and these features are now better supported across browsers thanks to many
+improvements made during 2021.
+
+What's next? We are excited to continue collaborating with other browser vendors and the wider
+community in the next iteration of this effort. We have started to research and discuss the focus
+areas for 2022. Please look out for an announcement coming soon.
+
+If you have any feedback or questions please reach out to us on Twitter at [@ChromiumDev](https://twitter.com/ChromiumDev).
diff --git a/src/site/content/en/blog/compat2021-midyear/index.md b/src/site/content/en/blog/compat2021-midyear/index.md
new file mode 100644
index 00000000000..aef20cf1c0c
--- /dev/null
+++ b/src/site/content/en/blog/compat2021-midyear/index.md
@@ -0,0 +1,158 @@
+---
+title: "Compat 2021 mid-year update: Flex gap everywhere"
+subhead:
+    "Mid-year update on Compat 2021—an effort to eliminate browser compatibility problems in five
+    key focus areas: CSS flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms."
+authors:
+  - foolip
+  - kosamari
+hero: "image/Wd2sVnt4VLho4jgp7UtIyWFceE02/94aWUQEFQTPIQnn2zOoN.jpg"
+alt: "A puzzle with a missing piece."
+date: 2021-07-23
+updated: 2021-07-23
+tags:
+  - blog
+  - css
+---
+
+It's time for the mid-year update on Compat 2021—an effort to eliminate browser compatibility
+problems in five key focus areas. For more details about the
+[#compat2021](https://twitter.com/search?q=%23compat2021) work and how we decided on the
+areas of focus, check out the [March announcement](/compat2021).
+
+Improvements to Chromium discussed in this post will reach Chrome, Edge and all Chromium-based
+browsers.
+
+## How we measure progress
+
+You can check the [Compat 2021 dashboard](https://wpt.fyi/compat2021?feature=summary) for
+[web-platform-tests](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project)
+to see the number of passing tests and the trending graphs for different browsers.
+
+{% Aside 'key-term' %}
+The web-platform-tests project is a cross-browser test suite for the web platform. The tests are
+run periodically across multiple browsers and results are available on the
+[wpt.fyi](https://wpt.fyi/) dashboard.
+{% endAside %}
+
+ A simple "passed tests" number doesn't tell the entire story of browser compatibility, however it
+ is one of the signals we use to see the progress of our effort. Fewer differences between browsers
+ in test results means greater interoperability of a web feature across multiple browsers.
+
+<figure>
+{% Img src="image/Wd2sVnt4VLho4jgp7UtIyWFceE02/CFL9C7UHKSrAgI5rLrvv.jpg", alt="Caption: a snapshot of Compat 2021 Dashboard (experimental browsers)", width="800", height="538" %}
+  <figcaption>
+    A snapshot of <a href="https://wpt.fyi/compat2021">Compat 2021 Dashboard</a> (experimental browsers).
+  </figcaption>
+</figure>
+
+
+## CSS flexbox
+
+All three browser engines saw
+[improvements on flexbox](https://wpt.fyi/compat2021?feature=css-flexbox).
+
+Safari 14.1 shipped the
+[`gap` property for flexbox](https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/)
+. The `gap` property is a convenient way to set spacing between items. This property is often used
+in Grid layout, and support in flexbox layout was one of the most requested features in the
+[MDN Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+. With this update, the `gap` property in flex layouts is available in all major browsers and a top
+compatibility challenge is resolved. Safari 14.1 also included many fixes for
+[images in flexbox](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/), removing the need for old workarounds.
+
+Firefox resolved rendering of
+[tables as flex items](https://bugzilla.mozilla.org/show_bug.cgi?id=1674302), bumping Firefox
+closer to 100% passing tests (currently at 98.5%).
+
+Chromium fixed
+[tables as flex items](https://bugs.chromium.org/p/chromium/issues/detail?id=1181403) as well. In
+Chromium 88, there was also a
+[rewrite of images as flex items](https://bugs.chromium.org/p/chromium/issues/detail?id=1132627),
+resolving a number of long-standing bugs. Finally, Chromium recently added
+[support for new alignment keywords](https://bugs.chromium.org/p/chromium/issues/detail?id=1011718)
+: `start`, `end`, `self-start`, `self-end`, `left`, and `right`. These keywords are available to
+try in [Chrome Canary](https://www.google.com/chrome/canary/) and
+[Edge Canary](https://www.microsoftedgeinsider.com/en-us/download/canary).
+
+
+## CSS Grid
+
+CSS Grid usage is
+[growing steadily](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693),
+currently at 9% of page views.  All three major browser engines implement CSS Grid and are passing
+more than 89% of related web-platform-tests already. Closing the compatibility gap is important to
+support steady growth of this feature.
+
+So far in 2021, Safari has improved from 89% to 93% passing tests, and Chromium is working on a new
+architecture to resolve more CSS Grid issues, called GridNG. This is an effort led by the Microsoft
+team, and led to the recent increase from 94% to 97% in the
+[targeted Grid tests](https://wpt.fyi/compat2021?feature=css-grid). You can expect an update on
+GridNG on the [Edge blog](https://blogs.windows.com/msedgedev/) soon.
+
+## CSS `position: sticky`
+
+In Chromium,
+[`position: sticky` for table headers](https://bugs.chromium.org/p/chromium/issues/detail?id=702927)
+ got fixed with the launch of TablesNG—a multi-year effort to re-architect rendering of tables.
+This change, together with a few
+[final](https://bugs.chromium.org/p/chromium/issues/detail?id=841432)
+[fixes](https://bugs.chromium.org/p/chromium/issues/detail?id=752022), pushed the Chrome and Edge 93
+developer channel to pass 100% of the
+[targeted tests](https://wpt.fyi/compat2021?feature=position-sticky).
+
+Beyond `position: sticky`,
+[TablesNG resolved 72 Chromium bugs](https://developer.chrome.com/blog/tablesng/)!
+
+## CSS `aspect-ratio` property
+
+The `aspect-ratio` property, which makes it straightforward to set width-to-height ratio, is crucial
+to responsive web design. It is also a solution to prevent
+[cumulative layout shifts](/cls/).
+
+The `aspect-ratio` property is now supported in stable versions of Chrome, Edge, and Firefox, and
+in
+[Safari 15 beta](https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes)
+. As cross-browser support improves,
+[usage](https://www.chromestatus.com/metrics/css/timeline/popularity/657) is increasing.
+
+Although no browser has 100% passing tests, the compatibility gap for `aspect-ratio` is the smallest
+of all five focus areas for Compat 2021. It has
+[more than 90% passing tests for all major browsers](https://wpt.fyi/compat2021?feature=aspect-ratio)
+. Moving forward, we'll keep monitoring the progress using this test suite to make it a rock-solid
+feature.
+
+Learn more about the usage and benefits of the
+[`aspect-ratio` property on web.dev](/aspect-ratio/).
+
+## CSS transforms
+
+There has been a slow and steady improvement in the results of the [targeted tests for CSS
+transforms](https://wpt.fyi/compat2021?feature=css-transforms), due to both bug fixes, and
+improvements to the tests themselves.
+
+The Chromium team is also working on improving the interoperability of `transform-style:
+preserve-3d` and `transform :perspective()`. We hope to have more progress to share in the next
+update.
+
+## Overall score improvements
+
+Since the announcement in March, all three browser engines have improved their Compat 2021 scores:
+
+* Chrome and Edge Dev went from 86 to 92.
+* Firefox went from 83 to 86.
+* Safari went from 64 to 82.
+
+Notably, Safari has pushed to close the compatibility gap by 18 points, thanks to a lot of work from
+WebKit contributors. In particular the team at
+[Igalia contributed](https://www.igalia.com/2021/06/29/Igalia-Developments-in-WebKit-and-Safari-15.html)
+to the `aspect-ratio` property and many improvements to Flexbox and Grid, such as `gap` for flexbox
+and various bug fixes.
+
+## Follow the Compat 2021 progress
+
+To follow the progress of Compat 2021, keep an eye on the
+[dashboard](https://wpt.fyi/compat2021?feature=summary), subscribe to
+[our mailing list](https://groups.google.com/g/compat2021), or reach out to usat
+[@chromiumdev](https://twitter.com/chromiumdev). If you experience any issues make sure to
+[file a bug](/how-to-file-a-good-bug/) for the affected browser.
diff --git a/src/site/content/en/blog/compat2021/index.md b/src/site/content/en/blog/compat2021/index.md
new file mode 100644
index 00000000000..126d1ec17c2
--- /dev/null
+++ b/src/site/content/en/blog/compat2021/index.md
@@ -0,0 +1,333 @@
+---
+layout: post
+title: "Compat 2021: Eliminating five top compatibility pain points on the web"
+subhead:
+    "Google is working with other browser vendors and industry partners to fix the
+    top five browser compatibility pain points for web developers: CSS flexbox,
+    CSS Grid, `position: sticky`, `aspect-ratio`, and CSS transforms."
+description:
+    "Learn more about how Google is working with other browser vendors and
+    industry partners to fix the top five browser compatibility pain points for
+    web developers: CSS flexbox, CSS Grid, position: sticky, aspect-ratio,
+    and CSS transforms."
+authors:
+  - robertnyman
+  - foolip
+hero: "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/KQ5oNcLGKdBSuUM8pFPx.jpeg"
+alt: "A puzzle with a missing piece."
+date: 2021-03-22
+updated: 2021-11-16
+tags:
+  - blog
+  - css
+---
+
+
+Google is working with other browser vendors and industry partners to fix the
+top five browser compatibility pain points for web developers. The areas of focus
+are CSS flexbox, CSS Grid, `position: sticky`, `aspect-ratio`, and CSS
+transforms. Check out [How you can contribute and follow along](#contribute) to
+learn how to get involved.
+
+## Background
+
+Compatibility on the web has always been a big challenge for developers. In the
+last couple of years, Google and other partners, including Mozilla and
+Microsoft, have set out to learn more about the top pain points for web
+developers, to drive our work and prioritization to make the situation better.
+This project is connected to [Google's Developer
+Satisfaction](/developer-satisfaction) (DevSAT) work, and it
+started on a larger scale with the creation of the
+[MDN DNA (Developer Needs Assessment) surveys](https://insights.developer.mozilla.org/)
+in 2019 and 2020, and a deep-dive research effort presented in the
+[MDN Browser Compatibility Report 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html).
+Additional research has been done in various channels, such as the [State of
+CSS](https://stateofcss.com/) and [State of JS](https://stateofjs.com/)
+surveys.
+
+The goal in 2021 is to eliminate browser compatibility problems in five key focus
+areas so developers can confidently build on them as reliable foundations. This
+effort is called [**#Compat 2021**](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live).
+
+## Choosing what to focus on
+
+While there are browser compatibility issues in basically all of the web
+platform, the focus of this project is on a small number of the most problematic
+areas which can be made significantly better, thus removing them as top issues
+for developers.
+
+The compatibility project uses multiple criteria influencing which areas to
+prioritize, and some are:
+
++   Feature usage. For example, flexbox is used in
+    [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)
+    of all page views, and adoption is growing strongly in [HTTP
+    Archive](https://almanac.httparchive.org/en/2020/css#layout).
++   Number of bugs
+    (in [Chromium](https://bugs.chromium.org/p/chromium/issues/list),
+    [Gecko](https://bugzilla.mozilla.org/describecomponents.cgi),
+    [WebKit](https://bugs.webkit.org/)), and for Chromium, how many stars those
+    bugs have.
++   Survey results:
+
+    +   [MDN DNA surveys](https://insights.developer.mozilla.org/)
+    +   [MDN Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+    +   [State of CSS](https://2020.stateofcss.com/en-US/features/)
+        most known and used features
+
++   Test results from [web-platform-tests](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project). For example, [flexbox on
+    wpt.fyi](https://wpt.fyi/results/css/css-flexbox).
++   [Can I use](https://caniuse.com/)'s most-searched-for features.
+
+## The five top focus areas in 2021
+
+In 2020, Chromium started work addressing the top areas outlined in
+[Improving Chromium's browser compatibility in 2020](https://blog.chromium.org/2020/06/improving-chromiums-browser.html).
+In 2021, we are beginning a dedicated effort to go even further. Google and
+[Microsoft are working together on addressing top issues in Chromium](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/), along with [Igalia](https://www.igalia.com/). Igalia, who are regular contributors
+to Chromium and WebKit, and maintainers of the official WebKit port for embedded devices,
+have been very supportive and engaged in these compatibility efforts, and will be
+helping tackle and track the identified issues.
+
+Here are the areas which are committed to being fixed in 2021.
+
+### CSS flexbox
+
+[CSS flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)
+is
+[widely used](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)
+on the web and there are still some major challenges for developers. For example,
+both [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=721123) and
+[WebKit](https://bugs.webkit.org/show_bug.cgi?id=209983)
+have had issues with `auto-height` flex containers leading to incorrectly sized images.
+
+<div class="switcher">
+    <figure style="display: flex; flex-direction: column;">
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qmKoKHkZga5hgBeiHuBz.png", alt="Stretched photo of a chessboard.", width="800", height="400" %}
+        <figcaption style="margin-top: auto">
+            Incorrectly sized image due to bugs.
+        </figcaption>
+    </figure>
+    <figure style="display: flex; flex-direction: column;">
+        {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/0ruhCiZKRP9jBhnN70Xh.png", alt="Chessboard.", width="800", height="800" %}
+        <figcaption style="margin-top: auto">
+            Correctly sized image. <br>
+            Photo by <a href="https://unsplash.com/photos/ab5OK9mx8do">Alireza
+            Mahmoudi.</a>
+        </figcaption>
+    </figure>
+</div>
+
+
+[Igalia's flexbox Cats](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/)
+blog post dives deeper into these issues with many more examples.
+
+#### Why it is prioritized
+
++   Surveys: Top issue in
+    [MDN Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html),
+    most known and used in [State of
+    CSS](https://2020.stateofcss.com/en-US/features/)
++   Tests: [85% pass](https://wpt.fyi/results/css/css-flexbox) in all browsers
++   Usage:
+    [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)
+    of page views, growing strongly in [HTTP
+    Archive](https://almanac.httparchive.org/en/2020/css#layout)
+
+### CSS Grid
+
+[CSS Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) is
+a core building block for modern web layouts, replacing many older techniques
+and workarounds. As adoption is growing, it needs to be rock solid, so that
+differences between browsers is never a reason to avoid it. One area that's
+lacking is the ability to animate grid layouts, supported in Gecko but not
+[Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=759665) or
+[WebKit](https://bugs.webkit.org/show_bug.cgi?id=204580). When supported,
+effects like this are made possible:
+
+<figure>
+{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Ovs6wg9o5AJUG4IIoVvj.mp4",
+  height="400",
+  controls=false,
+  autoplay=true,
+  loop=true,
+  muted=true,
+  playsinline=true
+%}
+  <figcaption>
+    Animated chess demo by <a
+    href="https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/">Chen
+    Hui Jing</a>.
+  </figcaption>
+</figure>
+
+#### Why it is prioritized
+
++   Surveys: Runner-up in
+    [MDN Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html),
+    well known but less often used in [State of
+    CSS](https://2020.stateofcss.com/en-US/features/)
++   Tests: [75% pass](https://wpt.fyi/results/css/css-grid) in all browsers
++   Usage:
+    [8% and growing steady](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693),
+    slight growth in [HTTP
+    Archive](https://almanac.httparchive.org/en/2020/css#layout)
+
+{% Aside %}
+While a newer feature like
+[subgrid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+is important for developers, it isn't a part of this specific effort. To follow
+along, see
+[Subgrid compat on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid#browser_compatibility).
+{% endAside %}
+
+### CSS position: sticky
+
+[Sticky positioning](https://developer.mozilla.org/docs/Web/CSS/position#sticky_positioning)
+allows content to stick to the edge of the viewport and is commonly used
+for headers that are always visible at the top of the viewport. While supported
+in all browsers, there are common use cases where it doesn't work as intended.
+For example,
+[sticky table headers](https://bugs.chromium.org/p/chromium/issues/detail?id=702927)
+aren't supported in Chromium, and although now
+[supported behind a flag](https://bugs.chromium.org/p/chromium/issues/detail?id=958381),
+the results are inconsistent across browsers:
+
+<div class="switcher">
+    <figure>
+        {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/DtNtuWCZUNwi7GGSBPvA.png", alt="", width="250", height="350" %}
+        <figcaption>
+            Chromium with "TablesNG"
+        </figcaption>
+    </figure>
+    <figure>
+        {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/hJwLpLeJNfG6kVBUK9Yn.png", alt="", width="250", height="350" %}
+        <figcaption>
+            Gecko
+        </figcaption>
+    </figure>
+    <figure>
+        {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/od1YyD2BoBqfrnkzynUK.png", alt="", width="250", height="350" %}
+        <figcaption>
+            WebKit
+        </figcaption>
+    </figure>
+</div>
+
+
+Check out the <a href="https://output.jsbin.com/xunosud">sticky table headers
+demo</a> by Rob Flack.
+
+#### Why it is prioritized
+
++   Surveys: Highly known/used in [State of
+    CSS](https://2020.stateofcss.com/en-US/features/) and was brought up
+    multiple times in
+    [MDN Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
++   Tests:
+    [66% pass](https://wpt.fyi/results/css/css-position/sticky?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=%28status%3A%21missing%26status%3A%21pass%26status%3A%21ok%29)
+    in all browsers
++   Usage:
+    [8%](https://www.chromestatus.com/metrics/feature/timeline/popularity/3354)
+
+### CSS aspect-ratio property
+
+The new
+[`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio)
+CSS property makes it easy to maintain a consistent width-to-height ratio for
+elements, removing the need for the well-known
+[`padding-top` hack](/aspect-ratio/#the-old-hack-maintaining-aspect-ratio-with-padding-top):
+
+<div class="switcher">
+{% Compare 'worse', 'Using padding-top' %}
+```css
+.container {
+  width: 100%;
+  padding-top: 56.25%;
+}
+```
+{% endCompare %}
+
+{% Compare 'better', 'Using aspect-ratio' %}
+```css
+.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+{% endCompare %}
+</div>
+
+Because it is such a common use case this is expected to become widely used, and
+we want to make sure it's solid in all common scenarios and across browsers.
+
+#### Why it is prioritized
+
++   Surveys: Already well known but not yet widely used in [State of
+    CSS](https://2020.stateofcss.com/en-US/features/)
++   Tests: [27% pass](https://wpt.fyi/results/css/css-sizing/aspect-ratio)
+    in all browsers
++   Usage:
+    [3%](https://www.chromestatus.com/metrics/css/timeline/popularity/657) and
+    expected to grow
+
+### CSS transforms
+
+[CSS transforms](https://developer.mozilla.org/docs/Web/CSS/transform)
+have been supported in all browsers for many years and are widely used on the
+web. However, there still remain many areas where they don't work the same
+across browsers, notably with animations and 3D transforms. For example, a card
+flip effect can be very inconsistent across browsers:
+
+<figure>
+{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/RhyPpk7dUooEobKZ3VOC.mp4",
+   controls=false,
+  autoplay=true,
+  loop=true,
+  muted=true,
+  playsinline=true
+%}
+  <figcaption>
+    Card flip effect in Chromium (left), Gecko (middle) and WebKit (right).
+    Demo by David Baron from <a
+    href="https://bugs.chromium.org/p/chromium/issues/detail?id=1008483#c42">bug
+    comment</a>.
+  </figcaption>
+</figure>
+
+
+#### Why it is prioritized
+
++   Surveys: Very well known and used in [State of
+    CSS](https://2020.stateofcss.com/en-US/features/)
++   Tests: [55% pass](https://wpt.fyi/results/css/css-transforms) in all
+    browsers
++   Usage:
+    [80%](https://www.chromestatus.com/metrics/css/timeline/popularity/446)
+
+## How you can contribute and follow along {: #contribute }
+
+Follow and share any updates we post on
+[@ChromiumDev](https://twitter.com/ChromiumDev) or the [public mailing list,
+Compat 2021](https://groups.google.com/g/compat2021). Make sure bugs exist, or
+[file them](/how-to-file-a-good-bug/) for issues you have been
+experiencing, and if there's anything missing, reach out through the above
+channels.
+
+There will be regular updates about the progress here on web.dev and you can
+also follow the progress for each focus area in the [Compat 2021
+Dashboard](https://wpt.fyi/compat2021).
+
+<figure>
+<a href="https://wpt.fyi/compat2021">
+{% Img
+src="image/kheDArv5csY6rvQUJDbWRscckLr1/BgX0dnesIhLaFAKyILzk.png",
+alt="Compat 2021 Dashboard",
+width="800",
+height="942" %}
+</a>
+<figcaption>The Compat 2021 Dashboard (screenshot taken 16 November, 2021).</figcaption>
+</figure>
+
+We hope this concerted effort among browser vendors to improve reliability and
+interoperability will help you go build amazing things on the web!
diff --git a/src/site/content/en/blog/components-examples-overview/index.md b/src/site/content/en/blog/components-examples-overview/index.md
new file mode 100644
index 00000000000..812d8bedb9a
--- /dev/null
+++ b/src/site/content/en/blog/components-examples-overview/index.md
@@ -0,0 +1,92 @@
+---
+title: HowTo Components – Overview
+subhead: HowTo Components
+description: |
+  HowTo Components
+authors:
+  - ewagasperowicz
+  - robdodson
+  - surma
+date: 2017-04-06
+updated: 2017-08-14
+---
+
+
+"HowTo: Components" are a collection of web components that implement common UI
+patterns. The purpose of these implementations is to be an educational resource.
+You can read through the densely commented implementation of different
+components and hopefully learn from them. Note that they are explicitly **NOT**
+a UI library and should **NOT** be used in production.
+
+## Components
+
+* [`<howto-checkbox>`](/components-howto-checkbox/): represents a boolean option in a form. The most common type of
+  checkbox is a dual-type which allows the user to toggle between two choices—checked and unchecked.
+* [`<howto-tabs>`](/components-howto-tabs/): limits visible content by separating it into multiple panels.
+* [`<howto-tooltip>`](/components-howto-tooltip/): a popup that displays information related to an element when the element
+  receives keyboard focus or the mouse hovers over it.
+
+## Goals
+
+Our aim is to demonstrate best practices for writing robust components that are
+accessible, performant, maintainable, and easy to style. Each component is
+completely self-contained so it can serve as a reference implementation.
+
+### Accessibility
+
+The components closely follow the [WAI ARIA Authoring
+Practices](https://www.w3.org/TR/wai-aria-practices-1.1/), which is a guide to
+explain and show ARIA, the [Accessible Rich Internet Application
+standard](https://www.w3.org/TR/wai-aria-1.1/). If you are unfamiliar with ARIA,
+[check out our introduction on
+WebFundamentals](/semantics-aria/).
+Each component links to the relevant section of the Authoring Practices. While
+not strictly necessary, we do recommend reading the section of the Authoring
+Practices before diving into the code.
+
+### Performance
+
+In web development the term "performance" can be applied to a multitude of
+things. In the context of `<howto>`, performance mostly refers to animations
+consistently running at 60fps, even on mobile devices.
+
+### Visual Flexibility
+
+As much as possible, components are not styled, except for layout or to indicate
+a selected or active state. This is to keep the implementation visually flexible
+and focused. By not spending time on decoration, we limit the code to only what
+is absolutely necessary to make the component function. If any style is required
+for the component to function, the style will be marked with a comment
+explaining why that is.
+
+### Maintainable code
+
+As HowTo: Components is a reference
+implementation, we spent extra time on writing readable and easily
+comprehensible code that is densely commented.
+
+## Non-Goals
+
+### Be a library / framework / toolkit
+
+`<howto>` components are not published on npm, bower or any other platform
+because they are not meant to be used in production. For the sake of terse,
+readable code, we are using modern JavaScript APIs and are supporting modern
+browsers which implement the Web Components standards. You
+will be able to adapt the code to fit your own needs after reading these
+implementations.
+
+### Be backwards compatible
+
+The code should not be relied on directly. We might, and very likely *will*,
+drastically change the implementation and API of any element if a better
+implementation is discovered. This is a living resource where we can share,
+explore, and discuss best practices for building web UIs.
+
+### Be complete
+
+We currently don't (and probably won't) implement **all* *components that can be
+found in the WAI ARIA Authoring Practices. However, re-using the principles used
+in other `<howto>` components should enable readers to implement any components
+that are missing.
+
diff --git a/src/site/content/en/blog/components-howto-checkbox/index.md b/src/site/content/en/blog/components-howto-checkbox/index.md
new file mode 100644
index 00000000000..1dc0b2b38aa
--- /dev/null
+++ b/src/site/content/en/blog/components-howto-checkbox/index.md
@@ -0,0 +1,299 @@
+---
+title: HowTo Components – howto-checkbox
+authors:
+ - ewagasperowicz
+ - robdodson
+ - surma
+date: 2017-10-02
+updated: 2017-10-11
+tags:
+  - blog
+---
+
+## Summary
+
+A `<howto-checkbox>` represents a boolean option in a form. The most common type
+of checkbox is a dual-type which allows the user to toggle between two
+choices -- checked and unchecked.
+
+The element attempts to self apply the attributes `role="checkbox"` and
+`tabindex="0"` when it is first created. The `role` attribute helps assistive
+technology like a screen reader tell the user what kind of control this is.
+The `tabindex` attribute opts the element into the tab order, making it keyboard
+focusable and operable. To learn more about these two topics, check out
+[What can ARIA do?][what-aria] and [Using tabindex][using-tabindex].
+
+When the checkbox is checked, it adds a `checked` boolean attribute, and sets
+a corresponding `checked` property to `true`. In addition, the element sets an
+`aria-checked` attribute to either `"true"` or `"false"`, depending on its
+state. Clicking on the checkbox with a mouse, or space bar, toggles these
+checked states.
+
+The checkbox also supports a `disabled` state. If either the `disabled` property
+is set to true or the `disabled` attribute is applied, the checkbox sets
+`aria-disabled="true"`, removes the `tabindex` attribute, and returns focus
+to the document if the checkbox is the current `activeElement`.
+
+The checkbox is paired with a `howto-label` element to ensure it has an
+[accessible name](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree#semantics_in_native_html).
+
+{% Aside 'warning' %}
+Just because you _can_ build a custom element checkbox, doesn't
+necessarily mean that you _should_. As this example shows, you will need to add
+your own keyboard, labeling, and ARIA support. It's also important to note that
+the native `<form>` element will NOT submit values from a custom element. You
+will need to wire that up yourself using AJAX or a hidden `<input>` field. For
+these reasons it can often be preferable to use the built-in `<input
+type="checkbox">` instead.
+{% endAside%}
+
+
+## Reference
+
+- [HowTo: Components on GitHub][howto-github]
+- [Checkbox Pattern in ARIA Authoring Practices 1.1][checkbox-pattern]
+- [What can ARIA Do?][what-aria]
+- [Using tabindex][using-tabindex]
+
+
+
+## Demo
+
+[View live demo on GitHub](https://googlechromelabs.github.io/howto-components/howto-checkbox/#demo)
+
+## Example usage
+
+```html
+<style>
+  howto-checkbox {
+    vertical-align: middle;
+  }
+  howto-label {
+    vertical-align: middle;
+    display: inline-block;
+    font-weight: bold;
+    font-family: sans-serif;
+    font-size: 20px;
+    margin-left: 8px;
+  }
+</style>
+
+<howto-checkbox id="join-checkbox"></howto-checkbox>
+<howto-label for="join-checkbox">Join Newsletter</howto-label>
+```
+
+## Code
+
+```js
+(function() {
+```
+
+Define key codes to help with handling keyboard events.
+
+```js
+  const KEYCODE = {
+    SPACE: 32,
+  };
+```
+
+Cloning contents from a `<template>` element is more performant than using innerHTML because it avoids additional HTML parse costs.
+
+```js
+  const template = document.createElement('template');
+
+  template.innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        background: url('../images/unchecked-checkbox.svg') no-repeat;
+        background-size: contain;
+        width: 24px;
+        height: 24px;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      :host([checked]) {
+        background: url('../images/checked-checkbox.svg') no-repeat;
+        background-size: contain;
+      }
+      :host([disabled]) {
+        background:
+          url('../images/unchecked-checkbox-disabled.svg') no-repeat;
+        background-size: contain;
+      }
+      :host([checked][disabled]) {
+        background:
+          url('../images/checked-checkbox-disabled.svg') no-repeat;
+        background-size: contain;
+      }
+    </style>
+  `;
+
+
+  class HowToCheckbox extends HTMLElement {
+    static get observedAttributes() {
+      return ['checked', 'disabled'];
+    }
+```
+
+The element's constructor is run anytime a new instance is created. Instances are created either by parsing HTML, calling document.createElement('howto-checkbox'), or calling new HowToCheckbox(); The constructor is a good place to create shadow DOM, though you should avoid touching any attributes or light DOM children as they may not be available yet.
+
+```js
+    constructor() {
+      super();
+      this.attachShadow({mode: 'open'});
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+```
+
+`connectedCallback()` fires when the element is inserted into the DOM. It's a good place to set the initial `role`, `tabindex`, internal state, and install event listeners.
+
+```js
+    connectedCallback() {
+      if (!this.hasAttribute('role'))
+        this.setAttribute('role', 'checkbox');
+      if (!this.hasAttribute('tabindex'))
+        this.setAttribute('tabindex', 0);
+```
+
+A user may set a property on an instance of an element, before its prototype has been connected to this class. The `_upgradeProperty()` method will check for any instance properties and run them through the proper class setters. See the [lazy properties](/custom-elements-best-practices/#make-properties-lazy) section for more details.
+
+```js
+      this._upgradeProperty('checked');
+      this._upgradeProperty('disabled');
+
+      this.addEventListener('keyup', this._onKeyUp);
+      this.addEventListener('click', this._onClick);
+    }
+
+    _upgradeProperty(prop) {
+      if (this.hasOwnProperty(prop)) {
+        let value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
+```
+
+`disconnectedCallback()` fires when the element is removed from the DOM. It's a good place to do clean up work like releasing references and removing event listeners.
+
+```js
+    disconnectedCallback() {
+      this.removeEventListener('keyup', this._onKeyUp);
+      this.removeEventListener('click', this._onClick);
+    }
+```
+
+Properties and their corresponding attributes should mirror one another. The property setter for checked handles truthy/falsy values and reflects those to the state of the attribute. See the [avoid reentrancy](/custom-elements-best-practices/#avoid-reentrancy-issues) section for more details.
+
+```js
+    set checked(value) {
+      const isChecked = Boolean(value);
+      if (isChecked)
+        this.setAttribute('checked', '');
+      else
+        this.removeAttribute('checked');
+    }
+
+    get checked() {
+      return this.hasAttribute('checked');
+    }
+
+    set disabled(value) {
+      const isDisabled = Boolean(value);
+      if (isDisabled)
+        this.setAttribute('disabled', '');
+      else
+        this.removeAttribute('disabled');
+    }
+
+    get disabled() {
+      return this.hasAttribute('disabled');
+    }
+```
+
+`attributeChangedCallback()` is called when any of the attributes in the observedAttributes array are changed. It's a good place to handle side effects, like setting ARIA attributes.
+
+```js
+    attributeChangedCallback(name, oldValue, newValue) {
+      const hasValue = newValue !== null;
+      switch (name) {
+        case 'checked':
+          this.setAttribute('aria-checked', hasValue);
+          break;
+        case 'disabled':
+          this.setAttribute('aria-disabled', hasValue);
+```
+
+The `tabindex` attribute does not provide a way to fully remove focusability from an element. Elements with `tabindex=-1` can still be focused with a mouse or by calling `focus()`. To make sure an element is disabled and not focusable, remove the `tabindex` attribute.
+
+```js
+          if (hasValue) {
+            this.removeAttribute('tabindex');
+```
+
+If the focus is currently on this element, unfocus it by calling the `HTMLElement.blur()` method
+
+```js
+            this.blur();
+          } else {
+            this.setAttribute('tabindex', '0');
+          }
+          break;
+      }
+    }
+
+    _onKeyUp(event) {
+```
+
+Don’t handle modifier shortcuts typically used by assistive technology.
+
+```js
+      if (event.altKey)
+        return;
+
+      switch (event.keyCode) {
+        case KEYCODE.SPACE:
+          event.preventDefault();
+          this._toggleChecked();
+          break;
+```
+
+Any other key press is ignored and passed back to the browser.
+
+```js
+        default:
+          return;
+      }
+    }
+
+    _onClick(event) {
+      this._toggleChecked();
+    }
+```
+
+`_toggleChecked()` calls the checked setter and flips its state. Because `_toggleChecked()` is only caused by a user action, it will also dispatch a change event. This event bubbles in order to mimic the native behavior of `<input type=checkbox>`.
+
+```js
+    _toggleChecked() {
+      if (this.disabled)
+        return;
+      this.checked = !this.checked;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          checked: this.checked,
+        },
+        bubbles: true,
+      }));
+    }
+  }
+
+  customElements.define('howto-checkbox', HowToCheckbox);
+})();
+```
+
+[howto-github]: https://github.com/GoogleChromeLabs/howto-components
+[checkbox-pattern]: https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox
+[what-aria]: /semantics-aria/#what-can-aria-do
+[using-tabindex]: /using-tabindex/
diff --git a/src/site/content/en/blog/components-howto-tabs/index.md b/src/site/content/en/blog/components-howto-tabs/index.md
new file mode 100644
index 00000000000..d8684dceebb
--- /dev/null
+++ b/src/site/content/en/blog/components-howto-tabs/index.md
@@ -0,0 +1,535 @@
+---
+title: HowTo Components – howto-tabs
+authors:
+ - ewagasperowicz
+ - robdodson
+ - surma
+date: 2017-04-06
+updated: 2017-10-11
+tags:
+  - blog
+---
+
+## Summary
+
+`<howto-tabs>` limit visible content by separating it into multiple panels. Only
+one panel is visible at a time, while _all_ corresponding tabs are always
+visible. To switch from one panel to another, the corresponding tab has to be
+selected.
+
+By either clicking or by using the arrow keys the user can change the
+selection of the active tab.
+
+If JavaScript is disabled, all panels are shown interleaved with the
+respective tabs. The tabs now function as headings.
+
+## Reference
+
+- [HowTo: Components on GitHub][howto-github]
+- [Tabs pattern in ARIA Authoring Practices 1.1][tabs-pattern]
+
+## Demo
+
+[View live demo on GitHub](https://googlechromelabs.github.io/howto-components/howto-tabs/#demo)
+
+## Example usage
+
+```html
+<style>
+  howto-tab {
+    border: 1px solid black;
+    padding: 20px;
+  }
+  howto-panel {
+    padding: 20px;
+    background-color: lightgray;
+  }
+  howto-tab[selected] {
+    background-color: bisque;
+  }
+```
+
+If JavaScript does not run, the element will not match `:defined`. In that case this style adds spacing between tabs and previous panel.
+
+```html
+  howto-tabs:not(:defined), howto-tab:not(:defined), howto-panel:not(:defined) {
+    display: block;
+  }
+</style>
+
+<howto-tabs>
+  <howto-tab role="heading" slot="tab">Tab 1</howto-tab>
+  <howto-panel role="region" slot="panel">Content 1</howto-panel>
+  <howto-tab role="heading" slot="tab">Tab 2</howto-tab>
+  <howto-panel role="region" slot="panel">Content 2</howto-panel>
+  <howto-tab role="heading" slot="tab">Tab 3</howto-tab>
+  <howto-panel role="region" slot="panel">Content 3</howto-panel>
+</howto-tabs>
+```
+
+## Code
+
+```js
+(function() {
+```
+
+Define key codes to help with handling keyboard events.
+
+```js
+  const KEYCODE = {
+    DOWN: 40,
+    LEFT: 37,
+    RIGHT: 39,
+    UP: 38,
+    HOME: 36,
+    END: 35,
+  };
+```
+
+To avoid invoking the parser with `.innerHTML` for every new instance, a template for the contents of the shadow DOM is shared by all `<howto-tabs>` instances.
+
+```js
+  const template = document.createElement('template');
+  template.innerHTML = `
+    <style>
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      ::slotted(howto-panel) {
+        flex-basis: 100%;
+      }
+    </style>
+    <slot name="tab"></slot>
+    <slot name="panel"></slot>
+  `;
+```
+
+HowtoTabs is a container element for tabs and panels.
+
+All children of `<howto-tabs>` should be either `<howto-tab>` or `<howto-tabpanel>`. This element is stateless, meaning that no values are cached and therefore, changes during runtime work.
+
+```js
+  class HowtoTabs extends HTMLElement {
+    constructor() {
+      super();
+```
+
+Event handlers that are not attached to this element need to be bound if they need access to `this`.
+
+```js
+      this._onSlotChange = this._onSlotChange.bind(this);
+```
+
+For progressive enhancement, the markup should alternate between tabs and panels. Elements that reorder their children tend to not work well with frameworks. Instead shadow DOM is used to reorder the elements by using slots.
+
+```js
+      this.attachShadow({ mode: 'open' });
+```
+
+Import the shared template to create the slots for tabs and panels.
+
+```js
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+      this._tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
+      this._panelSlot = this.shadowRoot.querySelector('slot[name=panel]');
+```
+
+This element needs to react to new children as it links up tabs and panel semantically using `aria-labelledby` and `aria-controls`. New children will get slotted automatically and cause slotchange to fire, so not MutationObserver is needed.
+
+```js
+      this._tabSlot.addEventListener('slotchange', this._onSlotChange);
+      this._panelSlot.addEventListener('slotchange', this._onSlotChange);
+    }
+```
+
+`connectedCallback()` groups tabs and panels by reordering and makes sure exactly one tab is active.
+
+```js
+    connectedCallback() {
+```
+
+The element needs to do some manual input event handling to allow switching with arrow keys and <kbd>Home</kbd> / <kbd>End</kbd>.
+
+```js
+      this.addEventListener('keydown', this._onKeyDown);
+      this.addEventListener('click', this._onClick);
+
+      if (!this.hasAttribute('role'))
+        this.setAttribute('role', 'tablist');
+```
+
+Up until recently, `slotchange` events did not fire when an element was upgraded by the parser. For this reason, the element invokes the handler manually. Once the new behavior lands in all browsers, the code below can be removed.
+
+```js
+      Promise.all([
+        customElements.whenDefined('howto-tab'),
+        customElements.whenDefined('howto-panel'),
+      ])
+        .then(() => this._linkPanels());
+    }
+```
+
+`disconnectedCallback()` removes the event listeners that `connectedCallback()` added.
+
+```js
+    disconnectedCallback() {
+      this.removeEventListener('keydown', this._onKeyDown);
+      this.removeEventListener('click', this._onClick);
+    }
+```
+
+`_onSlotChange()` is called whenever an element is added or removed from one of the shadow DOM slots.
+
+```js
+    _onSlotChange() {
+      this._linkPanels();
+    }
+```
+
+`_linkPanels()` links up tabs with their adjacent panels using aria-controls and `aria-labelledby`. Additionally, the method makes sure only one tab is active.
+
+```js
+    _linkPanels() {
+      const tabs = this._allTabs();
+```
+
+Give each panel a `aria-labelledby` attribute that refers to the tab that controls it.
+
+```js
+      tabs.forEach((tab) => {
+        const panel = tab.nextElementSibling;
+        if (panel.tagName.toLowerCase() !== 'howto-panel') {
+          console.error(`Tab #${tab.id} is not a` +
+            `sibling of a <howto-panel>`);
+          return;
+        }
+
+        tab.setAttribute('aria-controls', panel.id);
+        panel.setAttribute('aria-labelledby', tab.id);
+      });
+```
+
+The element checks if any of the tabs have been marked as selected. If not, the first tab is now selected.
+
+```js
+      const selectedTab =
+        tabs.find((tab) => tab.selected) || tabs[0];
+```
+
+Next, switch to the selected tab. `_selectTab()` takes care of marking all other tabs as deselected and hiding all other panels.
+
+```js
+      this._selectTab(selectedTab);
+    }
+```
+
+`_allPanels()` returns all the panels in the tab panel. This function could memorize the result if the DOM queries ever become a performance issue. The downside of memorization is that dynamically added tabs and panels will not be handled.
+
+This is a method and not a getter, because a getter implies that it is cheap to read.
+
+```js
+    _allPanels() {
+      return Array.from(this.querySelectorAll('howto-panel'));
+    }
+```
+
+`_allTabs()` returns all the tabs in the tab panel.
+
+```js
+    _allTabs() {
+      return Array.from(this.querySelectorAll('howto-tab'));
+    }
+```
+
+`_panelForTab()` returns the panel that the given tab controls.
+
+```js
+    _panelForTab(tab) {
+      const panelId = tab.getAttribute('aria-controls');
+      return this.querySelector(`#${panelId}`);
+    }
+```
+
+`_prevTab()` returns the tab that comes before the currently selected one, wrapping around when reaching the first one.
+
+```js
+    _prevTab() {
+      const tabs = this._allTabs();
+```
+
+Use `findIndex()` to find the index of the currently selected element and subtracts one to get the index of the previous element.
+
+```js
+      let newIdx = tabs.findIndex((tab) => tab.selected) - 1;
+```
+
+Add `tabs.length` to make sure the index is a positive number and get the modulus to wrap around if necessary.
+
+```js
+      return tabs[(newIdx + tabs.length) % tabs.length];
+    }
+```
+
+`_firstTab()` returns the first tab.
+
+```js
+    _firstTab() {
+      const tabs = this._allTabs();
+      return tabs[0];
+    }
+```
+
+`_lastTab()` returns the last tab.
+
+```js
+    _lastTab() {
+      const tabs = this._allTabs();
+      return tabs[tabs.length - 1];
+    }
+```
+
+`_nextTab()` gets the tab that comes after the currently selected one, wrapping around when reaching the last tab.
+
+```js
+    _nextTab() {
+      const tabs = this._allTabs();
+      let newIdx = tabs.findIndex((tab) => tab.selected) + 1;
+      return tabs[newIdx % tabs.length];
+    }
+```
+
+`reset()` marks all tabs as deselected and hides all the panels.
+
+```js
+    reset() {
+      const tabs = this._allTabs();
+      const panels = this._allPanels();
+
+      tabs.forEach((tab) => tab.selected = false);
+      panels.forEach((panel) => panel.hidden = true);
+    }
+```
+
+`_selectTab()` marks the given tab as selected. Additionally, it unhides the panel corresponding to the given tab.
+
+```js
+    _selectTab(newTab) {
+```
+
+Deselect all tabs and hide all panels.
+
+```js
+      this.reset();
+```
+
+Get the panel that the `newTab` is associated with.
+
+```js
+      const newPanel = this._panelForTab(newTab);
+```
+
+If that panel doesn’t exist, abort.
+
+```js
+      if (!newPanel)
+        throw new Error(`No panel with id ${newPanelId}`);
+      newTab.selected = true;
+      newPanel.hidden = false;
+      newTab.focus();
+    }
+```
+
+`_onKeyDown()` handles key presses inside the tab panel.
+
+```js
+    _onKeyDown(event) {
+```
+
+If the keypress did not originate from a tab element itself, it was a keypress inside the a panel or on empty space. Nothing to do.
+
+```js
+      if (event.target.getAttribute('role') !== 'tab')
+        return;
+```
+
+Don’t handle modifier shortcuts typically used by assistive technology.
+
+```js
+      if (event.altKey)
+        return;
+```
+
+The switch-case will determine which tab should be marked as active depending on the key that was pressed.
+
+```js
+      let newTab;
+      switch (event.keyCode) {
+        case KEYCODE.LEFT:
+        case KEYCODE.UP:
+          newTab = this._prevTab();
+          break;
+
+        case KEYCODE.RIGHT:
+        case KEYCODE.DOWN:
+          newTab = this._nextTab();
+          break;
+
+        case KEYCODE.HOME:
+          newTab = this._firstTab();
+          break;
+
+        case KEYCODE.END:
+          newTab = this._lastTab();
+          break;
+```
+
+Any other key press is ignored and passed back to the browser.
+
+```js
+        default:
+          return;
+      }
+```
+
+The browser might have some native functionality bound to the arrow keys, home or end. The element calls `preventDefault()` to prevent the browser from taking any actions.
+
+```js
+      event.preventDefault();
+```
+
+Select the new tab, that has been determined in the switch-case.
+
+```js
+      this._selectTab(newTab);
+    }
+```
+
+`_onClick()` handles clicks inside the tab panel.
+
+```js
+    _onClick(event) {
+```
+
+If the click was not targeted on a tab element itself, it was a click inside the a panel or on empty space. Nothing to do.
+
+```js
+      if (event.target.getAttribute('role') !== 'tab')
+        return;
+```
+
+If it was on a tab element, though, select that tab.
+
+```js
+      this._selectTab(event.target);
+    }
+  }
+
+  customElements.define('howto-tabs', HowtoTabs);
+```
+
+`howtoTabCounter` counts the number of `<howto-tab>` instances created. The number is used to generated new, unique IDs.
+
+```js
+  let howtoTabCounter = 0;
+```
+
+`HowtoTab` is a tab for a `<howto-tabs>` tab panel. `<howto-tab>` should always be used with `role="heading"` in the markup so that the semantics remain useable when JavaScript is failing.
+
+A `<howto-tab>` declares which `<howto-panel>` it belongs to by using that panel’s ID as the value for the aria-controls attribute.
+
+A `<howto-tab>` will automatically generate a unique ID if none is specified.
+
+```js
+  class HowtoTab extends HTMLElement {
+
+    static get observedAttributes() {
+      return ['selected'];
+    }
+
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+```
+
+If this is executed, JavaScript is working and the element changes its role to `tab`.
+
+```js
+      this.setAttribute('role', 'tab');
+      if (!this.id)
+        this.id = `howto-tab-generated-${howtoTabCounter++}`;
+```
+
+Set a well-defined initial state.
+
+```js
+      this.setAttribute('aria-selected', 'false');
+      this.setAttribute('tabindex', -1);
+      this._upgradeProperty('selected');
+    }
+```
+
+Check if a property has an instance value. If so, copy the value, and delete the instance property so it doesn't shadow the class property setter. Finally, pass the value to the class property setter so it can trigger any side effects. This is to safe guard against cases where, for instance, a framework may have added the element to the page and set a value on one of its properties, but lazy loaded its definition. Without this guard, the upgraded element would miss that property and the instance property would prevent the class property setter from ever being called.
+
+```js
+    _upgradeProperty(prop) {
+      if (this.hasOwnProperty(prop)) {
+        let value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
+```
+
+Properties and their corresponding attributes should mirror one another. To this effect, the property setter for `selected` handles truthy/falsy values and reflects those to the state of the attribute. It’s important to note that there are no side effects taking place in the property setter. For example, the setter does not set `aria-selected`. Instead, that work happens in the `attributeChangedCallback`. As a general rule, make property setters very dumb, and if setting a property or attribute should cause a side effect (like setting a corresponding ARIA attribute) do that work in the `attributeChangedCallback()`. This will avoid having to manage complex attribute/property reentrancy scenarios.
+
+```js
+    attributeChangedCallback() {
+      const value = this.hasAttribute('selected');
+      this.setAttribute('aria-selected', value);
+      this.setAttribute('tabindex', value ? 0 : -1);
+    }
+
+    set selected(value) {
+      value = Boolean(value);
+      if (value)
+        this.setAttribute('selected', '');
+      else
+        this.removeAttribute('selected');
+    }
+
+    get selected() {
+      return this.hasAttribute('selected');
+    }
+  }
+
+  customElements.define('howto-tab', HowtoTab);
+
+  let howtoPanelCounter = 0;
+  ```
+
+  `HowtoPanel` is a panel for a `<howto-tabs>` tab panel.
+
+  ```js
+  class HowtoPanel extends HTMLElement {
+
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.setAttribute('role', 'tabpanel');
+      if (!this.id)
+        this.id = `howto-panel-generated-${howtoPanelCounter++}`;
+    }
+  }
+
+  customElements.define('howto-panel', HowtoPanel);
+})();
+```
+
+[howto-github]: https://github.com/GoogleChromeLabs/howto-components
+[tabs-pattern]: https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
diff --git a/src/site/content/en/blog/components-howto-tooltip/index.md b/src/site/content/en/blog/components-howto-tooltip/index.md
new file mode 100644
index 00000000000..f95fa88e66c
--- /dev/null
+++ b/src/site/content/en/blog/components-howto-tooltip/index.md
@@ -0,0 +1,129 @@
+---
+title: HowTo Components – howto-tooltip
+authors:
+ - ewagasperowicz
+ - robdodson
+ - surma
+date: 2017-04-06
+updated: 2017-10-11
+tags:
+  - blog
+---
+
+## Summary
+
+A `<howto-tooltip>` is a popup that displays information related to an element
+when the element receives keyboard focus or the mouse hovers over it.
+The element that triggers the tooltip references the tooltip element with
+`aria-describedby`.
+
+The element self-applies the role `tooltip` and sets `tabindex` to -1, as the
+tooltip itself can never be focused.
+
+## Reference
+
+- [HowTo: Components on GitHub][howto-github]
+- [Tooltip pattern in ARIA Authoring Practices 1.1][tooltip-pattern]
+
+## Demo
+
+[View live demo on GitHub](https://googlechromelabs.github.io/howto-components/howto-tooltip/#demo)
+
+## Example usage
+
+
+```html
+<div class="text">
+<label for="name">Your name:</label>
+<input id="name" aria-describedby="tp1"/>
+<howto-tooltip id="tp1">Ideally your name is Batman</howto-tooltip>
+<br>
+<label for="cheese">Favourite type of cheese: </label>
+<input id="cheese" aria-describedby="tp2"/>
+<howto-tooltip id="tp2">Help I am trapped inside a tooltip message</howto-tooltip>
+```
+
+## Code
+
+```js
+class HowtoTooltip extends HTMLElement {
+```
+
+The constructor does work that needs to be executed exactly once.
+
+```js
+  constructor() {
+    super();
+```
+
+These functions are used in a bunch of places, and always need to bind the correct this reference, so do it once.
+
+```js
+    this._show = this._show.bind(this);
+    this._hide = this._hide.bind(this);
+}
+```
+
+`connectedCallback()` fires when the element is inserted into the DOM. It's a good place to set the initial role, tabindex, internal state, and install event listeners.
+
+```js
+  connectedCallback() {
+    if (!this.hasAttribute('role'))
+      this.setAttribute('role', 'tooltip');
+
+    if (!this.hasAttribute('tabindex'))
+      this.setAttribute('tabindex', -1);
+
+    this._hide();
+```
+
+The element that triggers the tooltip references the tooltip element with `aria-describedby`.
+
+```js
+    this._target = document.querySelector('[aria-describedby=' + this.id + ']');
+    if (!this._target)
+      return;
+```
+
+The tooltip needs to listen to focus/blur events from the target, as well as hover events over the target.
+
+```js
+    this._target.addEventListener('focus', this._show);
+    this._target.addEventListener('blur', this._hide);
+    this._target.addEventListener('mouseenter', this._show);
+    this._target.addEventListener('mouseleave', this._hide);
+  }
+```
+
+`disconnectedCallback()` unregisters the event listeners that were set up in `connectedCallback()`.
+
+```js
+  disconnectedCallback() {
+    if (!this._target)
+      return;
+```
+
+Remove the existing listeners, so that they don't trigger even though there's no tooltip to show.
+
+```js
+    this._target.removeEventListener('focus', this._show);
+    this._target.removeEventListener('blur', this._hide);
+    this._target.removeEventListener('mouseenter', this._show);
+    this._target.removeEventListener('mouseleave', this._hide);
+    this._target = null;
+  }
+
+  _show() {
+    this.hidden = false;
+  }
+
+  _hide() {
+    this.hidden = true;
+  }
+}
+
+customElements.define('howto-tooltip', HowtoTooltip);
+```
+
+[howto-github]: https://github.com/GoogleChromeLabs/howto-components
+[tooltip-pattern]: https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip
diff --git a/src/site/content/en/blog/compress-images-avif/index.md b/src/site/content/en/blog/compress-images-avif/index.md
new file mode 100644
index 00000000000..82764deef12
--- /dev/null
+++ b/src/site/content/en/blog/compress-images-avif/index.md
@@ -0,0 +1,370 @@
+---
+layout: post
+title: Using AVIF to compress images on your site
+authors:
+  - jaikk
+  - wtc
+  - jlwagner
+hero: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/0jtMLyN4T7C7UazJCYEH.jpg
+alt: The AVIF logo
+description: |
+  Serving desktop-sized images to mobile devices can use 2–4x more data than
+  needed. Instead of a "one-size-fits-all" approach to images, serve different
+  image sizes to different devices.
+date: 2021-06-07
+updated: 2023-08-31
+tags:
+  - performance
+  - blog
+---
+
+We
+[frequently write](/fast/#optimize-your-images)
+about the bloat on websites from images,
+and tools like
+[Lighthouse](/optimize-vitals-lighthouse/)
+highlight when image loading is having a negative impact on user experience,
+such as increasing load time,
+or taking bandwidth away from more important resources.
+One way to fix this is to use modern compression to reduce the file size of images,
+and a new option for web developers is the
+[AVIF image format](https://aomediacodec.github.io/av1-avif/).
+This blog post talks about recent updates to open source tooling for AVIF,
+introduces the libaom and libavif encoding libraries,
+and includes a tutorial for using these libraries to encode AVIF images efficiently.
+
+AVIF is an image format based on the AV1 video codec,
+and standardized by the
+[Alliance for Open Media](https://aomedia.org).
+AVIF offers significant compression gains over other image formats like JPEG and WebP.
+While the exact savings will depend on the content, encoding settings, and quality target,
+[we](https://jakearchibald.com/2020/avif-has-landed/) and
+[others](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4)
+have seen greater than 50% savings vs. JPEG.
+
+<div class="switcher">
+<figure>
+  <a href="https://storage.googleapis.com/web-dev-uploads/image/foR0vJZKULb5AGJExlazy1xYDgI2/kVqh1xli2O6mqKF3fQNx.avif" target="_blank">
+    <img src="https://storage.googleapis.com/web-dev-uploads/image/foR0vJZKULb5AGJExlazy1xYDgI2/kVqh1xli2O6mqKF3fQNx.avif" width="1120" height="840" alt="The image using AVIF">
+  </a>
+  <figcaption>
+  1120 by 840 AVIF at 18,769 bytes (click to enlarge)
+  </figcaption>
+</figure>
+<figure>
+  <a href="https://storage.googleapis.com/web-dev-uploads/image/foR0vJZKULb5AGJExlazy1xYDgI2/Jy0O0q0mLXl668HAo43n.jpeg" target="_blank">
+    <img src="https://storage.googleapis.com/web-dev-uploads/image/foR0vJZKULb5AGJExlazy1xYDgI2/Jy0O0q0mLXl668HAo43n.jpeg" width="1120" height="840" alt="The image using JPEG">
+  </a>
+  <figcaption>
+  1120 by 840 JPEG at 20,036 bytes (click to enlarge)
+  </figcaption>
+</figure>
+</div>
+
+Additionally, AVIF adds codec and container support for new image features such as
+[High Dynamic Range and Wide Color Gamut](https://w3c.github.io/ColorWeb-CG/),
+[film grain synthesis](https://norkin.org/research/film_grain/),
+and progressive decoding.
+
+{% Aside %}
+AVIF supports two types of progressive decoding.
+Spatial scalability can be used to offer a lower resolution image for network constrained users
+and 'progressively' provide a higher resolution image by sending just
+the additional data required to fill in the high frequency details.
+Quality scalability offers a similar progression by steadily improving visual quality with each render.
+{% endAside %}
+
+## What's New
+
+Since landing AVIF support in Chrome M85,
+AVIF support in the open source ecosystem has improved on a number of fronts.
+
+### Libaom
+
+[Libaom](https://aomedia.googlesource.com/aom/)
+is an open source AV1 encoder and decoder maintained by the companies in the Alliance for Open Media,
+and used in many production services at Google and other member companies.
+Between the libaom 2.0.0 release—around the same time Chrome added AVIF support—and the recent 3.1.0 release,
+there have been significant still image encoding optimizations added to the codebase.
+These include:
+
+- Optimizations for multi-threading and tiled encoding.
+- 5x reduction in memory usage.
+- 6.5x reduction in CPU usage, as shown in the chart below.
+
+<figure>
+  {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/mJJfiNsC7Qgl98IJ1LNi.png",
+  alt="",
+  width="800",
+  height="467" %}
+
+  <figcaption>Using speed=6, cq-level=18, for 8.1 MP images</figcaption>
+</figure>
+
+These changes massively reduce the cost of encoding AVIF—
+particularly the most frequently loaded,
+or highest priority images on your site.
+As [hardware-accelerated encoding](https://www.cnet.com/news/google-supercharges-youtube-with-a-custom-video-chip/)
+of AV1 becomes more available on servers and cloud services,
+the cost to create AVIF images will continue to drop.
+
+### Libavif
+
+[Libavif](https://github.com/AOMediaCodec/libavif),
+the reference implementation of AVIF,
+is an open source AVIF muxer and parser which is used in Chrome for decoding AVIF images.
+It can also be used with libaom for creating AVIF images from your existing uncompressed images,
+or transcoding from existing web images (JPEG, PNG, etc).
+
+Libavif recently added support for a wider range of encoder settings,
+including integration with more advanced libaom encoder settings.
+Optimizations in the processing pipeline like fast YUV-to-RGB conversion using libyuv
+and premultiplied alpha support further speed up the decoding process.
+And finally, support for the all-intra encoding mode newly added in libaom 3.1.0
+brings all the libaom improvements mentioned in the above.
+
+Note: [libheif](https://github.com/strukturag/libheif)
+is another popular open source AVIF muxer and parser,
+used in
+[ImageMagick](https://imagemagick.org/),
+[libvips](https://github.com/libvips/libvips), and the
+[sharp](https://sharp.pixelplumbing.com/) Node.js module.
+
+## Encoding AVIF images with avifenc
+
+A quick way to experiment with AVIF is
+[Squoosh.app](https://squoosh.app/).
+Squoosh runs a WebAssembly version of libavif,
+and exposes many of the same features as the command line tools.
+It's an easy way to compare AVIF to other formats old and new.
+There's also a
+[CLI version](https://www.npmjs.com/package/@squoosh/cli)
+of Squoosh aimed at Node apps.
+
+However, WebAssembly doesn't yet have access to all the performance primitives of CPUs,
+so if you want to run libavif at its fastest,
+we recommend the command line encoder, avifenc.
+
+To understand how to encode AVIF images,
+we will present a tutorial using the
+[same source image](https://codelabs.developers.google.com/codelabs/avif/images/happy_dog.jpg)
+used in our example above.  To start, you will need:
+
+* [Chrome](https://www.google.com/chrome/) version 85 or later
+* [cmake](https://cmake.org/)
+* [git](https://git-scm.com/)
+* [ninja](https://ninja-build.org/)
+
+You will also need to install the development packages for zlib, libpng, and libjpeg.
+The commands for the Debian and Ubuntu Linux distributions are:
+
+```shell
+sudo apt-get install zlib1g-dev
+sudo apt-get install libpng-dev
+sudo apt-get install libjpeg-dev
+```
+
+### Building command line encoder avifenc
+
+#### 1. Get the code
+
+Check out a release tag of libavif.
+
+```shell
+git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
+```
+
+#### 2. Change directory to libavif
+
+```shell
+cd libavif
+```
+
+There are many different ways you can configure avifenc and libavif to build.
+You can find more information at [libavif](https://github.com/AOMediaCodec/libavif).
+We are going to build avifenc so that it is statically linked to the
+AV1 encoder and decoder library, [libaom](https://aomedia.googlesource.com/aom).
+
+#### 3. Get and build libaom
+
+Change to the libavif external dependencies directory.
+
+```shell
+cd ext
+```
+
+The next command will pull the libaom source code
+and build libaom statically.
+
+```shell
+./aom.cmd
+```
+
+Change directory to libavif.
+
+```shell
+cd ..
+```
+
+#### 4. Build the command line encoding tool, avifenc
+
+It is a good idea to create a build directory for avifenc.
+
+```shell
+mkdir build
+```
+
+Change to the build directory.
+
+```shell
+cd build
+```
+
+Create the build files for avifenc.
+
+```shell
+cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
+```
+
+Build avifenc.
+
+```shell
+make
+```
+
+You have successfully built avifenc!
+
+### Understanding the avifenc command line parameters
+
+avifenc uses the command-line structure:
+
+```shell
+./avifenc [options] input.file output.avif
+```
+
+The basic parameters for avifenc used in this tutorial are:
+
+<table>
+  <thead>
+    <tr>
+      <th>avifenc</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>--min 0</td><td>Set min quantizer for color to 0</td>
+    </tr>
+    <tr>
+      <td>--max 63</td><td>Set max quantizer for color to 63</td>
+    </tr>
+    <tr>
+      <td>--minalpha 0</td><td>Set min quantizer for alpha to 0</td>
+    </tr>
+    <tr>
+      <td>--maxalpha 63</td><td>Set max quantizer for alpha to 63</td>
+    </tr>
+    <tr>
+      <td>-a end-usage=q</td><td>Set the rate control mode to Constant Quality (Q) mode</td>
+    </tr>
+    <tr>
+      <td>-a cq-level=Q</td><td>Set quantize level for both color and alpha to Q</td>
+    </tr>
+    <tr>
+      <td>-a color:cq-level=Q</td><td>Set quantize level for color to Q</td>
+    </tr>
+    <tr>
+      <td>-a alpha:cq-level=Q</td><td>Set quantize level for alpha to Q</td>
+    </tr>
+    <tr>
+      <td>-a tune=ssim</td><td>Tune for SSIM (default is to tune for PSNR)</td>
+    </tr>
+    <tr>
+      <td>--jobs J</td><td>Use J worker threads (default: 1)</td>
+    </tr>
+    <tr>
+      <td>--speed S</td><td>Set encoder speed from 0-10 (slowest-fastest. default: 6)</td>
+    </tr>
+  </tbody>
+</table>
+
+The cq-level option sets the quantize level (0-63) to control the quality for color or alpha.
+
+{% Aside %}
+You can think of cq-level as the "amount" of quantization, so a lower value yields higher quality
+{% endAside %}
+
+{% Aside %}
+Higher speed settings will run faster,
+but produce worse compression efficiency and quality.
+This tutorial uses the default setting of Speed 6,
+which we recommend as a balance of encode speed, compression efficiency, and quality.
+{% endAside%}
+
+### Create an AVIF image with default settings
+
+The most basic parameters for avifenc to run, are setting the input and output files.
+
+```shell
+./avifenc happy_dog.jpg happy_dog.avif
+```
+
+We recommend the following command line to encode an image, say at quantize level 18:
+
+```shell
+./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
+```
+
+{% Aside %}
+<code>"--min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim"</code>
+are the recommended settings for AVIF images.
+If the image has an alpha channel,
+add <code>"--minalpha 0 --maxalpha 63"</code>.
+To specify different quantize levels for color and alpha,
+replace <code>"-a cq-level=18"</code> with, say,
+<code>"-a color:cq-level=18 -a alpha:cq-level=10"</code>.
+{% endAside %}
+
+
+Avifenc has a lot of options that will affect both quality and speed.
+If you want to see the options and learn more about them just run <code>./avifenc</code>
+
+You now have your very own AVIF image!
+
+### Speeding up the encoder
+
+One parameter that may be good to change
+depending on how many cores you have on your machine is the <code>--jobs</code> parameter.
+This parameter sets how many threads avifenc will use to create AVIF images.
+Try running this at the command line.
+
+```shell
+./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
+```
+
+This tells avifenc to use 8 threads when creating the AVIF image,
+which speeds up AVIF encoding by roughly 5x.
+
+## Effects on Largest Contentful Paint (LCP)
+
+Images are a common candidate for the [Largest Contentful Paint (LCP) metric](/lcp/). One common recommendation for improving the loading speed of LCP images is to ensure that an image is optimized. By reducing a resource's transfer size, you're improving its _resource load time_, which is [one of the four key phases](/optimize-lcp/#3-reduce-resource-load-time) to target when dealing with LCP candidates that are images.
+
+[Using an image CDN](/image-cdns/) is strongly recommended when optimizing images, as it requires much less effort than setting up image optimization pipelines in your website's build process or manually using encoder binaries to optimize images by hand. However, image CDNs may be cost-prohibitive for some projects. If this is the case for you, consider the following when optimizing with the avifenc encoder:
+
+- Familiarize yourself with [the options the encoder offers](https://github.com/AOMediaCodec/libavif/blob/main/doc/avifenc.1.md). You may find additional savings while still retaining sufficient image quality by experimenting with some of AVIF's available encoding features.
+- AVIF provides both lossy and lossless encoding. Depending on an image's contents, one type of encoding may perform better than another. For example, photographs which are normally served as JPEGs will probably do best with lossy encoding, whereas lossless encoding is likely best for images containing simple details or line art normally served as PNG.
+- If using a bundler with community support for imagemin, consider using the [imagemin-avif](https://www.npmjs.com/package/imagemin-avif) package to enable your bundler to output AVIF image variants.
+
+By experimenting with AVIF, you may be able to realize an improvement for your website's LCP times in cases where the LCP candidate is an image. For more information on optimizing LCP, read [the guide on optimizing LCP](/optimize-lcp/).
+
+## Conclusion
+
+Using libaom, libavif and other open source tooling,
+you can get the best image quality and performance for your website using AVIF.
+The format is still relatively new,
+and optimizations and tooling integrations are actively being developed.
+If you have questions, comments, or feature requests,
+reach out on the
+[av1-discuss mailing list](https://groups.google.com/a/aomedia.org/g/av1-discuss),
+[AOM GitHub community](https://github.com/AOMediaCodec/community/wiki), and
+[AVIF wiki](https://github.com/AOMediaCodec/av1-avif/wiki).
diff --git a/src/site/content/en/blog/conic-gradient-border/index.md b/src/site/content/en/blog/conic-gradient-border/index.md
new file mode 100644
index 00000000000..393ad742640
--- /dev/null
+++ b/src/site/content/en/blog/conic-gradient-border/index.md
@@ -0,0 +1,60 @@
+---
+title: Use conic gradients to create a cool border
+subhead: >
+  Conic gradients can be used to create some interesting effects, such as this nice border example.
+date: 2022-05-27
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xK2kXKqAmfaofSEN5XJ3.jpg
+author: rachelandrew
+is_baseline: true
+tags:
+  - blog
+  - css
+---
+
+This [CodePen](https://codepen.io/argyleink/pen/pogZxaZ) created by [Adam
+Argyle](/authors/adamargyle/), originally shared via this
+[tweet](https://twitter.com/argyleink/status/1282889809782927360) on Twitter,
+shows how to use a [conic
+gradient](https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient) to
+create a border.
+
+```css
+.conic-gradient-border {
+  border: 25px solid;
+  border-image-slice: 1;
+  border-image-source: conic-gradient(
+    hsl(100 100% 60%),
+    hsl(200 100% 60%),
+    hsl(100 100% 60%)
+  );
+}
+```
+
+[Terry Mun](https://twitter.com/teddyrised) creatively
+[forked](https://twitter.com/teddyrised/status/1283326930717114370?s=20&t=S-qpKkaAetTCgPmQ6HNjxQ)
+Adam's codepen and created this
+[CodePen](https://codepen.io/terrymun/pen/mdVGjMB). Move your mouse over the
+element and you'll see the gradient change, thanks to a little bit of JavaScript
+updating a CSS custom property that stores the rotation angle.
+
+{% Codepen {
+  user: 'terrymun',
+  id: 'mdVGjMB',
+  height: 500,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+These examples uses the
+[`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source)
+property. This property sets the source image used to create an element's
+border. As with other properties that accept an image value, any CSS gradient
+type is valid too.
+
+### `border-image-source`
+
+{% BrowserCompat 'css.properties.border-image-source' %}
+
+### Conic gradient
+
+{% BrowserCompat 'css.types.image.gradient.conic-gradient' %}
diff --git a/src/site/content/en/blog/constraintvalidation/index.md b/src/site/content/en/blog/constraintvalidation/index.md
new file mode 100644
index 00000000000..4bcbe21623d
--- /dev/null
+++ b/src/site/content/en/blog/constraintvalidation/index.md
@@ -0,0 +1,821 @@
+---
+layout: post
+title: Constraint validation
+subhead: Native client side validation for web forms
+authors:
+  - tjvantoll
+date: 2012-10-17
+tags:
+  - blog
+---
+
+## Introduction
+
+Validating forms has notoriously been a painful development experience.  Implementing client side validation in a user-friendly, developer-friendly, and accessible way is hard.  Before HTML5 there was no means of implementing validation natively; therefore, developers have resorted to a variety of JavaScript based solutions.
+
+To help ease the burden on developers, HTML5 introduced a concept known as [constraint validation](http://www.whatwg.org/specs/web-apps/current-work/#constraint-validation) - a native means of implementing client side validation on web forms.
+
+Yet, despite being available in the latest version of all major browsers, constraint validation is a topic largely relegated to presentations and demos.  My goal in writing this is to shed some light on the new APIs to help developers make better web forms for everyone.
+
+In this tutorial I will:
+
+- Present a comprehensive overview of what constraint validation is.
+- Dig into the current limitations of the spec and browser implementations.
+- Discuss how you can use HTML5 constraint validation in your forms now.
+
+## What is Constraint Validation?
+
+The core of constraint validation is an algorithm browsers run when a form is submitted to determine its validity.  To make this determination, the algorithm utilizes new HTML5 attributes [`min`](http://www.whatwg.org/specs/web-apps/current-work/#attr-input-min), [`max`](http://www.whatwg.org/specs/web-apps/current-work/#attr-input-max), [`step`](http://www.whatwg.org/specs/web-apps/current-work/#attr-input-step), [`pattern`](http://www.whatwg.org/specs/web-apps/current-work/#the-pattern-attribute), and [`required`](http://www.whatwg.org/specs/web-apps/current-work/#attr-input-required) as well as existing attributes [`maxlength`](http://www.whatwg.org/specs/web-apps/current-work/#attr-fe-maxlength) and [type](http://www.whatwg.org/specs/web-apps/current-work/#attr-input-type).
+
+As an example take this form with an empty `required` text input:
+
+```html
+<form>
+    <input type="text" required value="" />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/HdSqt/)
+
+If you attempt to submit this form as is, [supporting browsers](http://caniuse.com/#feat=form-validation) will prevent the submission and display the following:
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ekp28U4piwCMR0PGkbHG.png", alt="Chrome 21 display", width="217", height="102" %}
+    <figcaption>
+      Chrome 21
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/q4gt3tHHFcmHPsi3pu34.png", alt="Firefox 15 display", width="266", height="116" %}
+    <figcaption>
+      Firefox 15
+    </figcaption>
+  </figure>
+</div>
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xlIqApbAwTJkg4hzwB4C.png", alt="IE10 display", width="235", height="106" %}
+    <figcaption>
+      Internet Explorer 10
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oPwZBCPKHkoDQ9cFphDi.png", alt="Opera 12 display", width="216", height="90" %}
+    <figcaption>
+      Opera 12
+    </figcaption>
+  </figure>
+</div>
+
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zGA5baPJ7dY8EwZ0z2Kn.png", alt="Opera Mobile display", width="330", height="119" %}
+    <figcaption>
+      Opera Mobile
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Fry6WD1dsy9RHtnJgWUn.png", alt="Chrome for Android display", width="430", height="160" %}
+    <figcaption>
+      Chrome for Android
+    </figcaption>
+  </figure>
+</div>
+
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/X12SZPt4gXHC3KokWrOm.png", alt="Firefox for Android display", width="391", height="134" %}
+    <figcaption>
+      Firefox for Android
+    </figcaption>
+  </figure>
+</div>
+
+Per the spec how errors are presented to the user is left up to the browser itself.  However, the spec does provide a full DOM API, new HTML attributes, and CSS hooks authors can use to customize the experience.
+
+## DOM API
+
+The [constraint validation API](http://www.whatwg.org/specs/web-apps/current-work/#constraint-validation-api) adds the following properties / methods to DOM nodes.
+
+### willValidate
+
+{% BrowserCompat 'api.ElementInternals.willValidate' %}
+
+The `willValidate` property indicates whether the node is a candidate for constraint validation.  For [submittable elements](http://www.whatwg.org/specs/web-apps/current-work/#category-submit) this will be set to `true` unless for some reason the node is [barred from constraint validation](http://www.whatwg.org/specs/web-apps/current-work/#barred-from-constraint-validation), such as possessing the `disabled` attribute.
+
+```html
+<div id="one"></div>
+<input type="text" id="two" />
+<input type="text" id="three" disabled />
+<script>
+    document.getElementById('one').willValidate; //undefined
+    document.getElementById('two').willValidate; //true
+    document.getElementById('three').willValidate; //false
+</script>
+```
+
+### validity
+
+{% BrowserCompat 'api.ElementInternals.validationMessage' %}
+
+The [`validity`](http://www.whatwg.org/specs/web-apps/current-work/#dom-cva-validity) property of a DOM node returns a [`ValidityState`](http://www.whatwg.org/specs/web-apps/current-work/#validitystate) object containing a number of boolean properties related to the validity of the data in the node.
+
+
+- `customError`: `true` if a custom validity message has been set per a call to `setCustomValidity()`.
+    ```html
+    <input id="foo" />
+    <input id="bar" />
+    <script>
+        document.getElementById('foo').validity.customError; //false
+        document.getElementById('bar').setCustomValidity('Invalid');
+        document.getElementById('bar').validity.customError; //true
+    </script>
+    </pre>
+    ```
+- `patternMismatch`: `true` if the node's `value` does not match its `pattern` attribute.
+    ```html
+    <input id="foo" pattern="[0-9]{4}" value="1234" />
+    <input id="bar" pattern="[0-9]{4}" value="ABCD" />
+    <script>
+        document.getElementById('foo').validity.patternMismatch; //false
+        document.getElementById('bar').validity.patternMismatch; //true
+    </script>
+    ```
+- `rangeOverflow`: `true` if the node's `value` is greater than its `max` attribute.
+    ```html
+    <input id="foo" type="number" max="2" value="1" />
+    <input id="bar" type="number" max="2" value="3" />
+    <script>
+        document.getElementById('foo').validity.rangeOverflow; //false
+        document.getElementById('bar').validity.rangeOverflow; //true
+    </script>
+    ```
+- `rangeUnderflow`: `true` if the node's `value` is less than its `min` attribute.
+    ```html
+    <input id="foo" type="number" min="2" value="3" />
+    <input id="bar" type="number" min="2" value="1" />
+    <script>
+        document.getElementById('foo').validity.rangeUnderflow; //false
+        document.getElementById('bar').validity.rangeUnderflow; //true
+    </script>
+    ```
+-  `stepMismatch`: `true` if the node's `value` is invalid per its `step` attribute.
+    ```html
+    <input id="foo" type="number" step="2" value="4" />
+    <input id="bar" type="number" step="2" value="3" />
+    <script>
+        document.getElementById('foo').validity.stepMismatch; //false
+        document.getElementById('bar').validity.stepMismatch; //true
+    </script>
+    ```
+- `tooLong`: `true` if the node's `value` exceeds its `maxlength` attribute.  All browsers prevent this from realistically occurring by preventing users from inputting values that exceed the maxlength.  Although rare it is possible to have this property be `true` in some browsers; I've written about how that's possible [here](http://tjvantoll.com/2012/10/17/maxlength-constraint-validation-oddities/).
+- `typeMismatch`: `true` if an input node's `value` is invalid per its `type` attribute.
+    ```html
+    <input id="foo" type="url" value="http://foo.com" />
+    <input id="bar" type="url" value="foo" />
+
+    <input id="foo2" type="email" value="foo@foo.com" />
+    <input id="bar2" type="email" value="bar" />
+
+    <script>
+        document.getElementById('foo').validity.typeMismatch; //false
+        document.getElementById('bar').validity.typeMismatch; //true
+
+        document.getElementById('foo2').validity.typeMismatch; //false
+        document.getElementById('bar2').validity.typeMismatch; //true
+    </script>
+    ```
+- `valueMissing`: `true` if the node has a `required` attribute but has no value.
+    ```html
+    <input id="foo" type="text" required value="foo" />
+    <input id="bar" type="text" required value="" />
+    <script>
+        document.getElementById('foo').validity.valueMissing; //false
+        document.getElementById('bar').validity.valueMissing; //true
+    </script>
+    ```
+-  `valid`: `true` if all of the validity conditions listed above are `false`.
+    ```html
+    <input id="valid-1" type="text" required value="foo" />
+    <input id="valid-2" type="text" required value="" />
+    <script>
+        document.getElementById('valid-1').validity.valid; //true
+        document.getElementById('valid-2').validity.valid; //false
+    </script>
+    ```
+
+### validationMessage
+
+{% BrowserCompat 'api.ElementInternals.validationMessage' %}
+
+The `validationMessage` property of a DOM node contains the message the browser displays to the user when a node's validity is checked and fails.
+
+The browser provides a default localized message for this property.  If the DOM node is not a candidate for constraint validation or if the node contains valid data `validationMessage` will be set to an empty string.
+
+{% Aside %}
+As of this writing Opera does not fill in this property by default.  It will show the user a correct error message, it just doesn't fill in the property.
+{% endAside %}
+
+
+```html
+<input type="text" id="foo" required />
+<script>
+    document.getElementById('foo').validationMessage;
+    //Chrome  --> 'Please fill out this field.'
+    //Firefox --> 'Please fill out this field.'
+    //Safari  --> 'value missing'
+    //IE10    --> 'This is a required field.'
+    //Opera   --> ''
+</script>
+```
+
+### checkValidity()
+
+{% BrowserCompat 'api.ElementInternals.checkValidity' %}
+
+The `checkValidity` method on a form element node (e.g. input, select, textarea) returns `true` if the element contains valid data.
+
+On form nodes it returns `true` if all of the form's children contain valid data.
+
+```html
+<form id="form-1">
+    <input id="input-1" type="text" required />
+</form>
+<form id="form-2">
+    <input id="input-2" type="text" />
+</form>
+<script>
+    document.getElementById('form-1').checkValidity();  //false
+    document.getElementById('input-1').checkValidity(); //false
+
+    document.getElementById('form-2').checkValidity();  //true
+    document.getElementById('input-2').checkValidity(); //true
+</script>
+```
+
+Additionally, every time a form element's validity is checked via `checkValidity` and fails, an `invalid` event is fired for that node.  Using the example code above if you wanted to run something whenever the node with id `input-1` was checked and contained invalid data you could use the following:
+
+```js
+document.getElementById('input-1').addEventListener('invalid', function() {
+    //...
+}, false);
+```
+
+There is no valid event, however, you can use the `change` event for notifications of when a field's validity changes.
+
+```js
+document.getElementById('input-1').addEventListener('change', function(event) {
+    if (event.target.validity.valid) {
+        //Field contains valid data.
+    } else {
+        //Field contains invalid data.
+    }
+}, false);
+```
+
+### setCustomValidity()
+
+{% BrowserCompat 'api.HTMLObjectElement.setCustomValidity' %}
+
+The `setCustomValidity` method changes the `validationMessage` property as well as allows you to add custom validation rules.
+
+Because it is setting the `validationMessage` passing in an empty string marks the field as valid and passing any other string marks the field as invalid.  Unfortunately there is no way of setting the `validationMessage` without also changing the validity of a field.
+
+For example, if you had two password fields you wanted to enforce be equal you could use the following:
+
+```js
+if (document.getElementById('password1').value != document.getElementById('password2').value) {
+    document.getElementById('password1').setCustomValidity('Passwords must match.');
+} else {
+    document.getElementById('password1').setCustomValidity('');
+}
+```
+
+## HTML Attributes
+
+We've already seen that the `maxlength`, `min`, `max`, `step`, `pattern`, and `type` attributes are used by the browser to constrain data.  For constraint validation there are two additional relevant attributes - `novalidate` and `formnovalidate`.
+
+### novalidate
+
+The boolean `novalidate` attribute can be applied to form nodes.  When present this attribute indicates that the form's data should not be validated when it is submitted.
+
+```html
+<form novalidate>
+    <input type="text" required />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+Because the above form has the `novalidate` attribute it will submit even though it contains an empty required input.
+
+### formnovalidate
+
+The boolean `formnovalidate` attribute can be applied to button and input nodes to prevent form validation.  For example:
+
+```html
+<form>
+    <input type="text" required />
+    <input type="submit" value="Validate" />
+    <input type="submit" value="Do NOT Validate" formnovalidate />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/5nD83/)
+
+When the "Validate" button is clicked form submission will be prevented because of the empty input.  However, when the "Do NOT Validate" button is clicked the form will submit despite the invalid data because of the `formnovalidate` attribute.
+
+## CSS Hooks
+
+Writing effective form validation is not just about the errors themselves; it's equally important to show the errors to the user in a usable way, and supporting browsers give you CSS hooks to do just that.
+
+### :invalid and :valid
+
+In supporting browsers the `:valid` pseudo-classes will match form elements that meet their specified constraints and the `:invalid` pseudo-classes will match those that do not.
+
+```html
+<form>
+    <input type="text" id="foo" required />
+    <input type="text" id="bar" />
+</form>
+<script>
+    document.querySelectorAll('input[type="text"]:invalid'); //Matches input#foo
+    document.querySelectorAll('input[type="text"]:valid');   //Matches input#bar
+</script>
+```
+
+### Resetting Default Styling
+
+By default Firefox places a red `box-shadow` and IE10 places a red `outline` on `:invalid` fields.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/q4gt3tHHFcmHPsi3pu34.png", alt="Firefox default erred field display", width="266", height="116" %}
+    <figcaption>
+      Firefox 15
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xlIqApbAwTJkg4hzwB4C.png", alt="IE10 default erred field display", width="235", height="106" %}
+    <figcaption>
+      Internet Explorer 10
+    </figcaption>
+  </figure>
+</div>
+
+WebKit based browsers and Opera do nothing by default.  If you would like a consistent starting point you can use the following to suppress the defaults.
+
+```css
+:invalid {
+    box-shadow: none; /* FF */
+    outline: 0;       /* IE 10 */
+}
+```
+
+I have a pending [pull request](https://github.com/necolas/normalize.css/pull/124) to discuss whether this normalization belongs in [normalize.css](https://github.com/necolas/normalize.css).
+
+## Inline Bubbles
+
+A larger display discrepancy is the look of the inline validation bubbles the browser displays on invalid fields.  However, WebKit is the only rendering engine that gives you any means of customizing the bubble.  In WebKit you can experiment with the following 4 pseduoclasses in order to get a more custom look.
+
+```css
+::-webkit-validation-bubble {}
+::-webkit-validation-bubble-message {}
+::-webkit-validation-bubble-arrow {}
+::-webkit-validation-bubble-arrow-clipper {}
+```
+
+### Removing the Default Bubble
+
+Because you can only customize the look of the bubbles in WebKit, if you want a custom look across all supporting browsers your only option is to suppress the default bubble and implement your own. The following will disable the default inline validation bubbles from all forms on a page.
+
+```js
+var forms = document.getElementsByTagName('form');
+for (var i = 0; i < forms.length; i++) {
+    forms[i].addEventListener('invalid', function(e) {
+        e.preventDefault();
+        //Possibly implement your own here.
+    }, true);
+}
+```
+
+If you do suppress the default bubbles make sure that you do something to show errors to users after invalid form submissions.  Currently the bubbles are the only means by which browsers indicate something went wrong.
+
+## Current Implementation Issues and Limitations
+
+While these new APIs bring a lot of power to client side form validation, there are some limitations to what you are able to do.
+
+### setCustomValidity
+
+For simply setting the `validationMessage` of a field `setCustomValidity` works, but as forms get more complex a number of limitations of the `setCustomValidity` method become apparent.
+
+**Problem #1**: Handling multiple errors on one field
+
+Calling `setCustomValidity` on a node simply overrides its `validationMessage`.  Therefore, if you call `setCustomValidity` on the same node twice the second call will simply overwrite the first.  There is no mechanism to handle for an array of error messages or a way of displaying multiple error messages to the user.
+
+One way of handling this is to append additional messages to the node's `validationMessage` as such.
+
+```js
+var foo = document.getElementById('foo');
+foo.setCustomValidity(foo.validationMessage + ' An error occurred');
+```
+
+You cannot pass in HTML or formatting characters so unfortunately concatenating strings can leave you with something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/wjOeoy8ZyTSurFyYAueX.png", alt="Chrome display of an error message with concatenated strings", width="345", height="107" %}
+</figure>
+
+**Problem #2**: Knowing when to check the validity of a field
+
+To illustrate this issue consider the example of a form with two password input fields that must match:
+
+```html
+<form>
+    <fieldset>
+        <legend>Change Your Password</legend>
+        <ul>
+            <li>
+                <label for="password1">Password 1:</label>
+                <input type="password" required id="password1" />
+            </li>
+            <li>
+                <label for="password2">Password 2:</label>
+                <input type="password" required id="password2" />
+            </li>
+        </ul>
+        <input type="submit" />
+    </fieldset>
+</form>
+```
+
+My suggestion earlier was to use the `change` event to implement the validation, which looks something like this:
+
+```js
+var password1 = document.getElementById('password1');
+var password2 = document.getElementById('password2');
+
+var checkPasswordValidity = function() {
+    if (password1.value != password2.value) {
+        password1.setCustomValidity('Passwords must match.');
+    } else {
+        password1.setCustomValidity('');
+    }
+};
+
+password1.addEventListener('change', checkPasswordValidity, false);
+password2.addEventListener('change', checkPasswordValidity, false);
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/8g8Nz/0/)
+
+Now, whenever the value of either password field is changed by the user the validity will be reevaluated.  However, consider a script that automatically fills in the passwords, or even a script that changes a constraint attribute such as `pattern`, `required`, `min`, `max`, or `step`.  This could absolutely affect the validity of the password fields, yet, there is no event to know that this has happened.
+
+Bottom Line: We need a means of running code whenever a field's validity __might have__ changed.
+
+**Problem #3**: Knowing when a user attempts to submit a form
+
+Why not use the form's `submit` event for the problem described above?  The `submit` event is not fired until after the browser has determined a form contains valid data given all of its specified constraints.  Therefore, there is no way of knowing when a user attempts to submit a form and it is prevented by the browser.
+
+It can be very useful to know when a submission attempt occurs.  You may want to show the user a list of error messages, change focus, or display help text of some sort.  Unfortunately, you'll need a workaround to make this happen.
+
+One way to accomplish this is by adding the `novalidate` attribute to the form and use its `submit` event.  Because of the `novalidate` attribute the form submission will not be prevented regardless of the validity of the data.  Therefore, the client script will have to explicitly check whether the form contains valid data in a `submit` event and prevent submission accordingly.  Here's an extension of the password match example that enforces that the validation logic will run before the form is submitted.
+
+```html
+<form id="passwordForm" novalidate>
+    <fieldset>
+        <legend>Change Your Password</legend>
+        <ul>
+            <li>
+                <label for="password1">Password 1:</label>
+                <input type="password" required id="password1" />
+            </li>
+            <li>
+                <label for="password2">Password 2:</label>
+                <input type="password" required id="password2" />
+            </li>
+        </ul>
+        <input type="submit" />
+    </fieldset>
+</form>
+<script>
+    var password1 = document.getElementById('password1');
+    var password2 = document.getElementById('password2');
+
+    var checkPasswordValidity = function() {
+        if (password1.value != password2.value) {
+            password1.setCustomValidity('Passwords must match.');
+        } else {
+            password1.setCustomValidity('');
+        }
+    };
+
+    password1.addEventListener('change', checkPasswordValidity, false);
+    password2.addEventListener('change', checkPasswordValidity, false);
+
+    var form = document.getElementById('passwordForm');
+    form.addEventListener('submit', function() {
+        checkPasswordValidity();
+        if (!this.checkValidity()) {
+            event.preventDefault();
+            //Implement you own means of displaying error messages to the user here.
+            password1.focus();
+        }
+    }, false);
+</script>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/8g8Nz/)
+
+The major disadvantage of this approach is that adding the `novalidate` attribute to a form prevents the browser from displaying the inline validation bubble to the user.  Therefore, if you use this technique you must implement your own means of presenting error messages to the user. [Here is a simple example](http://jsfiddle.net/tj_vantoll/a533m/) showing one way of accomplishing this.
+
+Bottom Line: We need a `forminvalid` event that would be fired whenever a form submission was prevented due to invalid data.
+
+### Safari
+
+Even though Safari supports the constraint validation API, as of this writing (version 6), Safari will not prevent submission of a form with constraint validation issues.  To the user Safari will behave no differently than a browser that doesn't support constraint validation at all.
+
+The easiest way around this is to use the same approach as the workaround described above, give all forms the `novalidate` attribute and manually prevent form submissions using `preventDefault`.  The following code adds this behavior to all forms.
+
+```js
+var forms = document.getElementsByTagName('form');
+for (var i = 0; i < forms.length; i++) {
+    forms[i].noValidate = true;
+
+    forms[i].addEventListener('submit', function(event) {
+        //Prevent submission if checkValidity on the form returns false.
+        if (!event.target.checkValidity()) {
+            event.preventDefault();
+            //Implement you own means of displaying error messages to the user here.
+        }
+    }, false);
+}
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/rFLxt/)
+
+Note: There are several documented bugs where the `checkValidity` method returns false positives (see [here](https://bugs.webkit.org/show_bug.cgi?id=48491) and [here](https://github.com/aFarkas/webshim/issues/134) for examples).  False positives are especially dangerous with the above workaround because the user will be stuck on a form with valid data, so use caution.
+
+### Declarative Error Messages
+
+While you have the ability to change a field's error message by setting its `validationMessage` through `setCustomValidity`, it can be a nuisance to continuously setup the JavaScript boilerplate to make this happen, especially on large forms.
+
+To help make this process easier, Firefox introduced a custom `x-moz-errormessage` attribute that can be used to automatically set a field's `validationMessage`.
+
+```html
+<form>
+    <input type="text" required x-moz-errormessage="Fill this out." />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/CCZNp/)
+
+When the above form is submitted in Firefox the user will see the custom message instead of the browser's default.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Vnin4jQbl61uVOG5Vapd.png", alt="Firefox display of the x-moz-errormessage attribute", width="255", height="115" %}
+</figure>
+
+This feature was [proposed to the W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=10923) but was rejected.  Therefore, at the moment Firefox is the only browser where you can declaratively specify error messages.
+
+<h4>Title Attribute</h4>
+
+While it doesn't change the `validationMessage`, in the case of a `patternMismatch` browsers do display the contents of the `title` attribute in the inline bubble if it's provided.
+
+{% Aside %}
+Chrome will actually display the `title` attribute when provided for any type of error, not just `patternMismatch`es.
+{% endAside %}
+
+For example if you try to submit the following form:
+
+```html
+<form>
+    <label for="price">Price: $</label>
+    <input type="text" pattern="[0-9].[0-9][0-9]"
+        title="Please enter the price in x.xx format (e.g. 3.99)"
+        id="price" value="3" />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/SVWXw/)
+
+Here's a sampling of what browsers will display:
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qapvv9VvWsFoBTmTgjsW.png", alt="Chrome display of the title attribute", width="368", height="105" %}
+    <figcaption>
+       Chrome 21
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rIGul4TiLn77trfgON81.png", alt="Firefox display of the title attribute", width="373", height="134" %}
+    <figcaption>
+      Firefox 15
+    </figcaption>
+  </figure>
+</div>
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JHOes0YwOkUugwiF5PNE.png", alt="Opera display of the title attribute", width="271", height="114" %}
+    <figcaption>
+      Opera 12
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/r53BkiDvxravU1sLH4C3.png", alt="IE10 display of the title attribute", width="391", height="135" %}
+    <figcaption>
+      IE 10
+    </figcaption>
+  </figure>
+</div>
+
+### :invalid and :valid
+
+As discussed earlier the `:valid` pseudo-class will match form elements that meet all specified constraints and the `:invalid` pseudo-class will match those that do not.  Unfortunately these pseudo-classes will be matched immediately, before the form is submitted and before the form is interacted with.  Consider the following example:
+
+```html
+<style>
+    :invalid {
+        border: 1px solid red;
+    }
+    :valid {
+        border: 1px solid green;
+    }
+</style>
+<form>
+    <input type="text" required />
+    <input type="text" />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/6sygE/)
+
+The goal here is to simply place a red border around invalid fields and a green border around valid ones, which it does immediately as the form is rendered.  However, [usability tests of inline form validation](http://www.alistapart.com/articles/inline-validation-in-web-forms/) have shown that the best time to give user feedback is immediately **after** they interact with  a field, not before.
+
+One way to accomplish this with the example above is to add a class to the inputs after they have been interacted with and only apply the borders when the class is present.
+
+```html
+<style>
+    .interacted:invalid {
+        border: 1px solid red;
+    }
+    .interacted:valid {
+        border: 1px solid green;
+    }
+</style>
+<form>
+    <input type="text" required />
+    <input type="text" />
+    <input type="submit" />
+</form>
+<script>
+    var inputs = document.querySelectorAll('input[type=text]');
+    for (var i = 0; i < inputs.length; i++) {
+        inputs[i].addEventListener('blur', function(event) {
+            event.target.classList.add('interacted');
+        }, false);
+    }
+</script>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/WLHDY/)
+
+Firefox has seen these issues and [implemented two additional pseudo-classes](http://blog.oldworld.fr/index.php?post/2011/05/Improving-HTML5-Forms-user-experience-with-moz-ui-invalid-and-moz-ui-valid-pseudo-classes) - `:-moz-ui-invalid` and `:-moz-ui-valid`.  Unlike `:invalid` and `:valid`, `:-moz-ui-invalid` and `:-moz-ui-valid` will not match a field until the field is modified or the user tries to submit the form with invalid input.
+
+Based on this work the [CSS selectors level 4 specification](http://www.w3.org/TR/selectors4/#user-pseudos) contains a `:user-error` pseudo-class that functions much like `:-moz-ui-invalid`.  It has yet to be implemented by any browsers.
+
+One final note.  Be aware that `:valid` and `:invalid` should match `<form>` nodes in addition to form elements.  Currently this has only been implemented in Firefox, but be careful when applying global rules to `:valid` and `:invalid`.
+
+### Unsupported Browsers
+
+While browser support for constraint validation is quite good, there are still some major players in which it is not present, most notably IE <= 9, iOS Safari, and the default Android browser.
+
+## Dealing with Unsupported Browsers
+
+If you intend to use the new constraint validation APIs in a production web form you have to do __something__ about unsupported browsers.  In my experience there are two primary options:
+
+**Option 1** - Rely on Server Side Validation Alone
+
+It's important to remember that even with these new APIs client side validation does not remove the need for server side validation.  Malicious users can easily workaround any client side constraints, and, HTTP requests don't have to originate from a browser.
+
+Therefore client side validation should always be treated as a progressive enhancement to the user experience; all forms should be usable even if client side validation is not present.
+
+Since you have to have server side validation anyways, if you simply have your server side code return reasonable error messages and display them to the end user you have a built in fallback for browsers that don't support any form of client side validation.
+
+**Option 2** - Polyfill
+
+While relying on server side validation is reasonable for some applications, for many throwing away the usability advantages of client side validation for users in non-supporting browsers is simply not an option.
+
+If you want to write code with the new APIs and want it to work anywhere the best way to accomplish this is with a [polyfill](http://remysharp.com/2010/10/08/what-is-a-polyfill/).  In addition to making the APIs work in non-supporting browsers, many polyfills take an extra step and workaround some of the issues in the native implementations.
+
+## Polyfilling
+
+There are a [number of polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) that allow use of the constraint validation API in any browser.  I will discuss two of the more popular options available.
+
+### Webshims
+
+[Webshims](http://afarkas.github.com/webshim/demos/index.html) is collection of polyfills including one for HTML5 forms and the constraint validation API.
+
+To show how to use Webshims let's return to our original example of a form with a single `required` text input.
+
+```html
+<form>
+    <input type="text" required value="" />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+To make this work consistently across all browsers you need to include Webshims and its dependencies then call `$.webshims.polyfill('forms')`.
+
+```html
+<!-- Webshims' dependencies -->
+<script src="js/jquery-1.8.2.js"></script>
+<script src="js/modernizr-yepnope-custom.js"></script>
+
+<!-- Webshims base -->
+<script src="js-webshim/minified/polyfiller.js"></script>
+
+<script>jQuery.webshims.polyfill('forms');</script>
+
+<form>
+    <input type="text" required value="" />
+    <input type="submit" value="Submit" />
+</form>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/YsBNt/)
+
+In supporting browsers there will be no difference in the result.  However, browsers that don't support constraint validation natively will now prevent invalid form submissions and display an error message in a custom bubble.  For example here's what the user will see in Safari and IE8.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/udGyHe7JX62xxr0Zj8he.png", alt="Display of an invalid form submission in Safari using Webshims", width="248", height="133" %}
+    <figcaption>
+      Safari 6
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jnM7KzmdgPJkOs88JZH1.png", alt="Display of an invalid form submission in IE8 using Webshims", width="244", height="116" %}
+    <figcaption>
+      Internet Explorer 8
+    </figcaption>
+  </figure>
+</div>
+
+In addition to polyfilling, Webshims also provides solutions for many of the limitations of constraint validation discussed earlier.
+
+- Declaratively specify error messages through a `data-errormessage` attribute.
+- Provides classes `form-ui-valid` and `form-ui-invalid` which work similarly to `:-moz-ui-valid` and `:-moz-ui-invalid`.
+- Provides custom events `firstinvalid`, `lastinvalid`, `changedvalid`, and `changedinvalid`.
+- Includes workarounds for WebKit false positives on form submission.
+
+For more information on what Webshims provides refer to its [HTML5 forms docs](http://afarkas.github.com/webshim/demos/demos/webforms.html).
+
+### H5F
+
+H5F is a lightweight, dependency free polyfill that implements the full constraint validation API as well as a number of the new attributes.
+
+To see how to use H5F let's add it to our basic example of a form with a single `required` text input.
+
+```html
+<script src="H5F.js"></script>
+
+<form>
+    <input type="text" required value="" />
+    <input type="submit" value="Submit" />
+</form>
+<script>
+    H5F.setup(document.getElementsByTagName('form'));
+</script>
+```
+
+[Try It](http://jsfiddle.net/tj_vantoll/63YAy/)
+
+H5F will prevent the submission of the form in all browsers, but the user will only see an inline validation bubble in browsers that support it natively.  Since H5F polyfills the full constraint validation API you can use it to implement your own UI to do whatever you'd like.
+
+If you're looking for some examples of how to leverage the API, [H5F's demo page](http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html) has an implementation that shows the messages in a bubble on the right hand side of the inputs.  I also have an example that shows how you can [show all error messages in a list](http://tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/) at the top of forms.
+
+In addition to polyfilling the constraint validation API, H5F also provides classes to mimic `:-moz-ui-valid` and `:-moz-ui-invalid`.  By default these classes are `valid` and `error` although they can be customized by passing in a second parameter to `H5F.setup`.
+
+```js
+H5F.setup(document.getElementById('foo'), {
+    validClass: 'valid',
+    invalidClass: 'invalid'
+});
+```
+
+For more information on H5F [check it out on Github](https://github.com/ryanseddon/H5F).
+
+## Conclusion
+
+HTML5's constraint validation APIs make adding client side validation to forms quick while providing a JavaScript API and CSS hooks for customization.
+
+While there are still some issues with the implementations and old browsers to deal with, with a good polyfill or server-side fallback you can utilize these APIs in your forms today.
diff --git a/src/site/content/en/blog/constructable-stylesheets/index.md b/src/site/content/en/blog/constructable-stylesheets/index.md
new file mode 100644
index 00000000000..d86a868065f
--- /dev/null
+++ b/src/site/content/en/blog/constructable-stylesheets/index.md
@@ -0,0 +1,177 @@
+---
+layout: post
+title: Constructable Stylesheets
+subhead: Seamless reusable styles.
+authors:
+  - developit
+date: 2019-02-08
+updated: 2022-12-14
+description: Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
+tags:
+  - blog
+  - css
+---
+
+[Constructable Stylesheets](https://wicg.github.io/construct-stylesheets) are a
+way to create and distribute reusable styles when using [Shadow
+DOM](/shadowdom-v1/).
+
+{% BrowserCompat 'api.CSSStyleSheet.CSSStyleSheet' %}
+
+It has always been possible to create stylesheets using JavaScript. However, the
+process has historically been to create a `<style>` element using
+`document.createElement('style')`, and then access its sheet property to obtain
+a reference to the underlying
+[CSSStyleSheet](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet)
+instance. This method can produce duplicate CSS code and its attendant bloat,
+and the act of attaching leads to a flash of unstyled content whether there is
+bloat or not. The `CSSStyleSheet` interface is the root of a collection of CSS
+representation interfaces referred to as the
+[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model),
+offering a programmatic way to manipulate stylesheets as well as eliminating the
+problems associated with the old method.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/ZGONaG0tsbRHWzCZpAlo.png",
+alt="Diagram showing preparation and application of CSS.",
+width="800", height="610" %}
+
+Constructable Stylesheets make it possible to define and prepare shared CSS
+styles, and then apply those styles to multiple Shadow Roots or the Document
+easily and without duplication. Updates to a shared CSSStyleSheet are applied to
+all roots into which it has been adopted, and [adopting a
+stylesheet](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets)
+is fast and synchronous once the sheet has been loaded.
+
+The association set up by Constructable Stylesheets lends itself well to a
+number of different applications. It can be used to provide a centralized theme
+used by many components: the theme can be a `CSSStyleSheet` instance passed to
+components, with updates to the theme propagating out to components
+automatically. It can be used to distribute [CSS Custom
+Property](https://developer.mozilla.org/docs/Web/CSS/--*) values to
+specific DOM subtrees without relying on the
+[cascade](https://developer.mozilla.org/docs/Web/CSS/Cascade). It can even
+be used as a direct interface to the browser's CSS parser, making it easy to
+preload stylesheets without injecting them into the DOM.
+
+## Constructing a stylesheet
+
+Rather than introducing a new API to accomplish this, the [Constructable
+StyleSheets](https://www.w3.org/TR/cssom-1/#dom-cssstylesheet-cssstylesheet)
+specification makes it possible to create stylesheets imperatively by invoking
+the `CSSStyleSheet()` constructor. The resulting CSSStyleSheet object has two
+new methods that make it safer to add and update stylesheet rules without
+triggering [Flash of Unstyled
+Content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) (FOUC).
+The
+[`replace()`](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/replace)
+and
+[`replaceSync()`](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/replaceSync)
+methods both replace the stylesheet with a string of CSS, and `replace()`
+returns a Promise. In both cases, external stylesheet references are not
+supported—any `@import` rules are ignored and will produce a warning.
+
+```js
+const sheet = new CSSStyleSheet();
+
+// replace all styles synchronously:
+sheet.replaceSync('a { color: red; }');
+
+// replace all styles:
+sheet.replace('a { color: blue; }')
+  .then(() => {
+    console.log('Styles replaced');
+  })
+  .catch(err => {
+    console.error('Failed to replace styles:', err);
+  });
+
+// Any @import rules are ignored.
+// Both of these still apply the a{} style:
+sheet.replaceSync('@import url("styles.css"); a { color: red; }');
+sheet.replace('@import url("styles.css"); a { color: red; }');
+// Console warning: "@import rules are not allowed here..."
+```
+
+{% Aside 'gotchas' %}
+In earlier versions of the specification,
+`replace()` allowed `@import` rules and returned
+a Promise that resolved when these were finished loading. This feature was
+[removed from the specification](https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-642300024)
+and `@import` rules are
+ignored with a warning as of Chrome 84.
+{% endAside %}
+
+## Using constructed stylesheets
+
+The second new feature introduced by Constructable StyleSheets is an
+[adoptedStyleSheets](https://www.w3.org/TR/cssom-1/#extensions-to-the-document-or-shadow-root-interface)
+property available on [Shadow
+Roots](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)
+and [Documents](https://developer.mozilla.org/en/docs/Web/API/Document). This
+lets us explicitly apply the styles defined by a `CSSStyleSheet` to a given DOM
+subtree. To do so, we set the property to an array of one or more stylesheets to
+apply to that element.
+
+```js
+// Create our shared stylesheet:
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('a { color: red; }');
+
+// Apply the stylesheet to a document:
+document.adoptedStyleSheets = [sheet];
+
+// Apply the stylesheet to a Shadow Root:
+const node = document.createElement('div');
+const shadow = node.attachShadow({ mode: 'open' });
+shadow.adoptedStyleSheets = [sheet];
+```
+
+Notice that we're overriding the value of `adoptedStyleSheets` instead of
+changing the array in place. This is required because the array is frozen;
+in-place mutations like `push()` throw an exception, so we have to assign a new
+array. To preserve any existing StyleSheets added via `adoptedStyleSheets`, we
+can use concat to create a new array that includes the existing sheets as well
+as additional ones to add:
+
+```js
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('a { color: red; }');
+
+// Combine existing sheets with our new one:
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+```
+
+## Putting it all together
+
+With Constructable StyleSheets, web developers now have an explicit solution for
+creating CSS StyleSheets and applying them to DOM trees. We have a new
+Promise-based API for loading StyleSheets from a string of CSS source that uses
+the browser's built-in parser and loading semantics. Finally, we have a
+mechanism for applying stylesheet updates to all usages of a StyleSheet,
+simplifying things like theme changes and color preferences.
+
+{% Video src="video/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/0wKHfcRTB7tn9vWkrqcU.mp4",
+autoplay=true,
+playsinline=true %}
+
+**[View Demo](https://construct-stylesheets.glitch.me/)**
+
+## Looking ahead
+
+The initial version of Constructable Stylesheets shipped with the API
+described here, but there's work underway to make things easier to use. There's
+a [proposal](https://github.com/WICG/construct-stylesheets/issues/45) to extend
+the `adoptedStyleSheets` FrozenArray with dedicated methods for inserting and
+removing stylesheets, which would obviate the need for array cloning and avoid
+potential duplicate stylesheet references.
+
+## More information
+
+* [Chrome Platform Status](https://www.chromestatus.com/feature/5394843094220800)
+* [Example](https://construct-stylesheets.glitch.me/)
+* [API](https://wicg.github.io/construct-stylesheets/)
+* [Explainer](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)
+* [Intent to Implement](https://groups.google.com/a/chromium.org/d/topic/blink-dev/irhrlr6n5YQ/discussion)
+* [Intent to Ship](https://groups.google.com/a/chromium.org/d/topic/blink-dev/gL2EVBzO5og/discussion)
+* [Discourse](https://discourse.wicg.io/t/proposal-constructable-stylesheet-objects/2572)
diff --git a/src/site/content/en/blog/contact-picker/contact-picker-demo.jpg b/src/site/content/en/blog/contact-picker/contact-picker-demo.jpg
deleted file mode 100644
index f74eb5888df..00000000000
Binary files a/src/site/content/en/blog/contact-picker/contact-picker-demo.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/contact-picker-left.jpg b/src/site/content/en/blog/contact-picker/contact-picker-left.jpg
deleted file mode 100644
index 26476522881..00000000000
Binary files a/src/site/content/en/blog/contact-picker/contact-picker-left.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/contact-picker-long-press.jpg b/src/site/content/en/blog/contact-picker/contact-picker-long-press.jpg
deleted file mode 100644
index b2abeb8b465..00000000000
Binary files a/src/site/content/en/blog/contact-picker/contact-picker-long-press.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/contact-picker-right.jpg b/src/site/content/en/blog/contact-picker/contact-picker-right.jpg
deleted file mode 100644
index dc1e2bafe26..00000000000
Binary files a/src/site/content/en/blog/contact-picker/contact-picker-right.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/contact-picker-user-choice.jpg b/src/site/content/en/blog/contact-picker/contact-picker-user-choice.jpg
deleted file mode 100644
index 24cff419ad9..00000000000
Binary files a/src/site/content/en/blog/contact-picker/contact-picker-user-choice.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/hero.jpg b/src/site/content/en/blog/contact-picker/hero.jpg
deleted file mode 100644
index 7f31537d8bb..00000000000
Binary files a/src/site/content/en/blog/contact-picker/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/contact-picker/index.md b/src/site/content/en/blog/contact-picker/index.md
deleted file mode 100644
index 80ac9161f7f..00000000000
--- a/src/site/content/en/blog/contact-picker/index.md
+++ /dev/null
@@ -1,301 +0,0 @@
----
-title: A contact picker for the web
-subhead: The Contact Picker API provides an easy way for users to share contacts from their contact list.
-authors:
-  - petelepage
-description: Access to the user's contacts has been a feature of native apps since (almost) the dawn of time. The Contact Picker API is an on-demand API  that allows users to select an entry or entries from their contact list and share limited details of the selected contact(s) with a website. It allows users to share only what they want, when they want, and makes it easier for users to reach and connect with their friends and family.
-date: 2019-08-07
-updated: 2020-07-30
-tags:
-  - blog
-  - capabilities
-  - contacts
-hero: hero.jpg
-alt: Telephone on yellow background.
----
-
-## What is the Contact Picker API? {: #what }
-
-<style>
-  #video-demo { max-height: 600px; }
-</style>
-
-<figure class="w-figure w-figure--inline-right">
-  <a href="https://storage.googleapis.com/webfundamentals-assets/contact-picker/contact-picker.mp4">
-    <video id="video-demo" loop autoplay muted
-          poster="contact-picker-demo.jpg"
-          class="w-screenshot">
-      <source type="video/webm"
-              src="https://storage.googleapis.com/webfundamentals-assets/contact-picker/contact-picker.webm">
-      <source type="video/mp4"
-              src="https://storage.googleapis.com/webfundamentals-assets/contact-picker/contact-picker.mp4">
-    </video>
-  </a>
-</figure>
-
-Access to the user's contacts on a mobile device has been a feature of native apps since
-(almost) the dawn of time. It's one of the most common feature requests
-I hear from web developers, and is often the key reason they build a native
-app.
-
-Available in Chrome 80 on Android, the [Contact Picker API][spec] is an
-on-demand API that allows users to select entries from their contact list and
-share limited details of the selected entries with a website. It allows users to
-share only what they want, when they want, and makes it easier for users to
-reach and connect with their friends and family.
-
-For example, a web-based email client could use the Contact Picker API to
-select the recipient(s) of an email. A voice-over-IP app could look up
-which phone number to call. Or a social network could help a user discover
-which friends have already joined.
-
-{% Aside 'caution' %}
-  The Chrome team has put a lot of thought into the design and implementation
-  of the Contact Picker API to ensure that the browser will only share exactly
-  what people choose. See the [Security and Privacy](#security-considerations)
-  section below.
-{% endAside %}
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [Complete][spec]             |
-| 3. Gather feedback & iterate on design     | [Complete][spec]             |
-| 4. Origin trial                            | Complete                     |
-| **5. Launch**                              | **Chrome 80**<br>Available on Android only.        |
-
-</div>
-
-## Using the Contact Picker API {: #how-to-use }
-
-The Contact Picker API requires a method call with an options parameter that
-specifies the types of contact information you want. A second method tells you
-what information the underlying system will provide.
-
-{% Aside %}
-  Check out the [Contact Picker API demo](https://contact-picker.glitch.me)
-  and view the
-  [source](https://glitch.com/edit/#!/contact-picker?path=demo.js:20:0).
-{% endAside %}
-
-### Feature detection
-
-To check if the Contact Picker API is supported, use:
-
-```js
-const supported = ('contacts' in navigator && 'ContactsManager' in window);
-```
-
-In addition, on Android, the Contact Picker requires Android M or later.
-
-### Opening the Contact Picker
-
-The entry point to the Contact Picker API is `navigator.contacts.select()`.
-When called, it returns a promise and shows the contact picker, allowing the
-user to select the contact(s) they want to share with the site. After
-selecting what to share and clicking **Done**, the promise resolves with an
-array of contacts selected by the user.
-
-When calling `select()` you must provide an array of properties you'd like
-returned as the first parameter (with the allowed values being any of
-`'name'`, `'email'`, `'tel'`, `'address'`, or `'icon'`),
-and optionally whether multiple contacts can be
-selected as a second parameter.
-
-```js
-const props = ['name', 'email', 'tel', 'address', 'icon'];
-const opts = {multiple: true};
-
-try {
-  const contacts = await navigator.contacts.select(props, opts);
-  handleResults(contacts);
-} catch (ex) {
-  // Handle any errors here.
-}
-```
-
-{% Aside 'caution' %}
-  Support for `'address'` and `'icon'` requires Chrome 84 or later.
-{% endAside %}
-
-The Contacts Picker API can only be called from a [secure][secure-contexts],
-top-level browsing context, and like other powerful APIs, it requires a
-user gesture.
-
-### Detecting available properties
-
-To detect which properties are available, call `navigator.contacts.getProperties()`.
-It returns a promise that resolves with an array of strings indicating which
-properties are available. For example: `['name', 'email', 'tel', 'address']`.
-You can pass these values to `select()`.
-
-Remember, properties are not always available, and new properties may be
-added. In the future, other platforms and contact sources may restrict 
-which properties are be shared.
-
-### Handling the results
-
-The Contact Picker API returns an array of contacts, and each contact includes
-an array of the requested properties. If a contact doesn't have data for the
-requested property, or the user chooses to opt-out of sharing a particular
-property, the API returns an empty array. (I describe how the user chooses properties
-in the [User control](#security-control) section.)
-
-For example, if a site requests `name`, `email`, and `tel`, and a user
-selects a single contact that has data in the name field, provides two
-phone numbers, but does not have an email address, the response returned will be:
-
-```json
-[{
-  "email": [],
-  "name": ["Queen O'Hearts"],
-  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
-}]
-```
-
-{% Aside 'caution' %}
-  Labels and other semantic information on contact fields are dropped.
-{% endAside %}
-
-## Security and permissions {: #security-considerations }
-
-The Chrome team designed and implemented the Contact Picker API using the core
-principles defined in
-[Controlling Access to Powerful Web Platform Features][powerful-apis],
-including user control, transparency, and ergonomics. I'll explain each.
-
-### User control {: #security-control }
-
-Access to the users' contacts is via the picker, and it can only be called with
-a user gesture, on a [secure][secure-contexts], top-level browsing context.
-This ensures that a site can't show the picker on page load, or randomly show
-the picker without any context.
-
-<figure class="w-figure w-figure--inline-right">
-  <img src="contact-picker-user-choice.jpg" class="w-screenshot"
-       alt="Screen shot, users can choose which properties to share."
-       width="550">
-  <figcaption class="w-figcaption">
-    Users can choose not to share some properties. In this screenshot, the
-    user has unchecked the 'Phone numbers' button. Even though the site
-    asked for phone numbers, they will not be shared with the site.
-  </figcaption>
-</figure>
-
-There's no option to bulk-select all contacts so that users are encouraged
-to select only the contacts that they need to share for that particular
-website. Users can also control which properties are shared with the site
-by toggling the property button at the top of the picker.
-
-<div class="w-clearfix"></div>
-
-### Transparency {: #security-transparency }
-
-To clarify which contact details are being shared, the picker always
-shows the contact's name and icon, plus any properties that the site has
-requested. For example, if a site requests `name`, `email`, and `tel`,
-all three properties will be shown in the picker. Alternatively,
-if a site only requests `tel`, the picker will show only the name, and
-telephone numbers.
-
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="contact-picker-left.jpg" class="w-screenshot"
-        alt="Screen shot of picker for site requesting all properties.">
-    <figcaption class="w-figcaption">
-      Picker, site requesting <code>name</code>, <code>email</code>, and
-      <code>tel</code>, one contact selected.
-    </figcaption>
-  </figure>
-  <figure class="w-figure">
-    <img src="contact-picker-right.jpg" class="w-screenshot"
-        alt="Screen shot of picker for site requesting only phone numbers.">
-    <figcaption class="w-figcaption">
-      Picker, site requesting only <code>tel</code>, one contact selected.
-    </figcaption>
-  </figure>
-</div>
-
-<div class="w-clearfix"></div>
-
-<figure class="w-figure w-figure--inline-right">
-  <img src="contact-picker-long-press.jpg" class="w-screenshot"
-       alt="Screen shot of picker when a contact is long-pressed."
-       width="550">
-  <figcaption class="w-figcaption">
-    The result of a long press on a contact.
-  </figcaption>
-</figure>
-
-A long press on a contact will show all of the information that will be
-shared if the contact is selected. (See the Cheshire Cat contact image.)
-
-<div class="w-clearfix"></div>
-
-### No permission persistence {: #security-persistence }
-
-Access to contacts is on-demand, and not persisted. Each time a site wants
-access, it must call `navigator.contacts.select()` with a user gesture,
-and the user must individually choose the contact(s) they want to share
-with the site.
-
-## Feedback {: #feedback }
-
-The Chrome team wants to hear about your experiences with the Contact Picker
-API.
-
-### Problem with the implementation?
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-* File a bug at [https://new.crbug.com][new-bug]. Be sure to include as much
-  detail as you can, provide simple instructions for reproducing the bug, and
-  set *Components* to `Blink>Contacts`. [Glitch](https://glitch.com) works great
-  for sharing quick and easy problem reproductions.
-
-### Planning to use the API?
-
-Are you planning to use the Contact Picker API? Your public support helps the
-Chrome team to prioritize features, and shows other browser vendors how
-critical it is to support them.
-
-* Share how you plan to use it on the [WICG Discourse thread][wicg-discourse]
-* Send a Tweet to [@ChromiumDev][cr-dev-twitter] with `#contactpicker` and
-  let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [Contact Picker Specification][spec]
-* [Contact Picker API Demo][demo] and [Contact Picker API demo source][demo-source]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: `Blink>Contacts`
-
-### Thanks
-
-Big shout out and thanks to Finnur Thorarinsson and Rayan Kanso who are
-implementing the feature and Peter Beverloo whose
-[code](https://tests.peter.sh/contact-api/) I shamelessly
-<strike>stole and</strike> refactored for the demo.
-
-PS: The names in my contact picker are characters from Alice in Wonderland.
-
-[spec]: https://wicg.github.io/contact-api/spec/
-[spec-select]: https://wicg.github.io/contact-api/spec/#contacts-manager-select
-[spec-security]: https://wicg.github.io/contact-api/spec/#privacy
-[demo]: https://contact-picker.glitch.me
-[demo-source]: https://glitch.com/edit/#!/contact-picker?path=demo.js:20:0
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=860467
-[cr-status]: https://www.chromestatus.com/feature/6511327140904960
-[explainer]: https://github.com/WICG/contact-api/
-[wicg-discourse]: https://discourse.wicg.io/t/proposal-contact-picker-api/3507
-[new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EContacts
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[secure-contexts]: https://w3c.github.io/webappsec-secure-contexts/
-[cr-dev-twitter]: https://twitter.com/chromiumdev
diff --git a/src/site/content/en/blog/content-indexing-api/articles-for-you.png b/src/site/content/en/blog/content-indexing-api/articles-for-you.png
deleted file mode 100644
index b7ce11e071c..00000000000
Binary files a/src/site/content/en/blog/content-indexing-api/articles-for-you.png and /dev/null differ
diff --git a/src/site/content/en/blog/content-indexing-api/delete-menu.png b/src/site/content/en/blog/content-indexing-api/delete-menu.png
deleted file mode 100644
index e208d738f3c..00000000000
Binary files a/src/site/content/en/blog/content-indexing-api/delete-menu.png and /dev/null differ
diff --git a/src/site/content/en/blog/content-indexing-api/downloads-menu.png b/src/site/content/en/blog/content-indexing-api/downloads-menu.png
deleted file mode 100644
index b0e29c17728..00000000000
Binary files a/src/site/content/en/blog/content-indexing-api/downloads-menu.png and /dev/null differ
diff --git a/src/site/content/en/blog/content-indexing-api/hero.jpg b/src/site/content/en/blog/content-indexing-api/hero.jpg
deleted file mode 100644
index 6e59024af68..00000000000
Binary files a/src/site/content/en/blog/content-indexing-api/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/content-indexing-api/index.md b/src/site/content/en/blog/content-indexing-api/index.md
deleted file mode 100644
index 9556312fed4..00000000000
--- a/src/site/content/en/blog/content-indexing-api/index.md
+++ /dev/null
@@ -1,317 +0,0 @@
----
-title: Indexing your offline-capable pages with the Content Indexing API
-subhead: Enabling service workers to tell browsers which pages work offline
-authors:
-  - jeffposnick
-description: Your PWA might cache articles and media files, but how will your users know that your pages work while offline? The Content Indexing API is one answer to this question currently in an origin trial. Once the index is populated with content from your PWA, as well as any other installed PWAs, it will show up in dedicated areas of supported browsers.
-date: 2019-12-12
-updated: 2020-05-26
-tags:
-  - blog
-  - capabilities
-  - service-worker
-  - chrome80
-  - index
-  - caching
-hero: hero.jpg
-alt: Index cards in a filing cabinet.
----
-
-## What is the Content Indexing API? {: #what }
-
-Using a [progressive web
-app](https://developers.google.com/web/progressive-web-apps) means having access
-to information people care about—images, videos, articles, and more—regardless
-of the current state of your network connection. Technologies like [service
-workers](https://developers.google.com/web/fundamentals/primers/service-workers),
-the [Cache Storage
-API](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api),
-and [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
-provide you with the building blocks for storing and serving data when folks
-interact directly with a PWA. But building a high-quality, offline-first PWA is
-only part of the story. If folks don't realize that a web app's content is
-available while they're offline, they won't take full advantage of the work you
-put into implementing that functionality.
-
-This is a **discovery** problem; how can your PWA make users aware of its
-offline-capable content so that they can discover and view what's available? The
-Content Indexing API is a solution to this problem. The developer-facing portion
-of this solution is an extension to service workers, which allows developers to
-add URLs and metadata of offline-capable pages to a local index maintained by
-the browser. That enhancement is available in Chrome 84 and later.
-
-Once the index is populated with content from your PWA, as well as any other
-installed PWAs, it will be surfaced by the browser as shown below.
-
-<div class="w-columns">
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled"
-         src="downloads-menu.png"
-         alt="A screenshot of the Downloads menu item on Chrome's new tab page.">
-    <figcaption class="w-figcaption">
-      First, select the <b>Downloads</b> menu item on Chrome's new tab page.
-    </figcaption>
-  </figure>
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled"
-         src="articles-for-you.png"
-         alt="Media and articles that have been added to the index.">
-    <figcaption class="w-figcaption">
-      Media and articles that have been added to the index will be shown in the
-      <b>Articles for You</b> section.
-    </figcaption>
-  </figure>
-</div>
-
-Additionally, Chrome can proactively recommend content when it detects that a
-user is offline.
-
-The Content Indexing API **is not an alternative way of caching content**. It's
-a way of providing metadata about pages that are already cached by your service
-worker, so that the browser can surface those pages when folks are likely to
-want to view them. The Content Indexing API helps with **discoverability** of
-cached pages.
-
-{% Aside 'note' %}
-  The Content Indexing API is not a searchable index. While you can get a list
-  of all indexed entries, there's no way to query against indexed metadata
-  directly.
-{% endAside %}
-
-## See it in action {: #see-it-in-action }
-
-The best way to get a feel for the Content Indexing API is to try a sample
-application.
-
-1. Make sure that you're using a supported browser and platform. Currently,
-   that's limited to **Chrome 84 or later on Android**. Go to `chrome://version` to see
-   what version of Chrome you're running.
-1. Visit [https://contentindex.dev](https://contentindex.dev)
-1. Click the `+` button next to one or more of the items on the list.
-1. (Optional) Disable your device's Wi-Fi and cellular data connection, or enable
-   airplane mode to simulate taking your browser offline.
-1. Choose **Downloads** from Chrome's menu, and switch to the **Articles for You** tab.
-1. Browse through the content that you previously saved.
-
-You can view [the source of the sample application on
-GitHub](https://github.com/rayankans/contentindex.dev).
-
-Another sample application, a [Scrapbook PWA](https://scrapbook-pwa.web.app/),
-illustrates the use of the Content Indexing API with the [Web
-Share Target API](/web-share-target/). The [code demonstrates a
-technique](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/src/js/contentIndexing.js)
-for keeping the Content Indexing API in sync with items stored by a web app
-using the [Cache Storage API](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api).
-
-## Using the API {: #using-the-api }
-
-To use the API your app must have a service worker and URLs that are navigable
-offline. If your web app does not currently have a service worker, the [Workbox
-libraries](https://developers.google.com/web/tools/workbox/) can simplify
-creating one.
-
-### What type of URLs can be indexed as offline-capable? {: #offline-capable-urls }
-
-The API supports indexing URLs corresponding to HTML documents. A URL for a cached
-media file, for example, can't be indexed directly. Instead, you need to provide
-a URL for a page that displays media, and which works offline.
-
-A recommended pattern is to create a "viewer" HTML page that could accept the
-underlying media URL as a query parameter and then display the contents of the
-file, potentially with additional controls or content on the page.
-
-Web apps can only add URLs to the content index that are under the
-[scope](https://developers.google.com/web/ilt/pwa/introduction-to-service-worker)
-of the current service worker. In other words, a web app could not add a URL
-belonging to a completely different domain into the content index.
-
-### Overview {: #api-overview }
-
-The Content Indexing API supports three operations: adding, listing, and
-removing metadata. These methods are exposed from a new property, `index`, that
-has been added to the
-<code>[ServiceWorkerRegistration](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration)</code>
-interface.
-
-The first step in indexing content is getting a reference to the current
-[`ServiceWorkerRegistration`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration). Using <code>[navigator.serviceWorker.ready](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/ready)</code> is the most straightforward way:
-
-```js
-const registration = await navigator.serviceWorker.ready;
-
-// Remember to feature-detect before using the API:
-if ('index' in registration) {
-  // Your Content Indexing API code goes here!
-}
-```
-
-If you're making calls to the Content Indexing API from within a service worker,
-rather than inside a web page, you can refer to the `ServiceWorkerRegistration`
-directly via `registration`. It will [already be
-defined](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/registration)
-as part of the `ServiceWorkerGlobalScope.`
-
-### Adding to the index {: #adding-items }
-
-Use the `add()` method to index URLs and their associated metadata. It's up to
-you to choose when items are added to the index. You might want to add to the
-index in response to an input, like clicking a "save offline" button. Or you
-might add items automatically each time cached data is updated via a mechanism
-like [periodic background
-sync](https://developers.google.com/web/updates/2019/08/periodic-background-sync).
-
-```js
-await registration.index.add({
-  // Required; set to something unique within your web app.
-  id: 'article-123',
-
-  // Required; url needs to be an offline-capable HTML page.
-  // For compatibility during the Origin Trial, include launchUrl as well.
-  url: '/articles/123',
-  launchUrl: '/articles/123',
-
-  // Required; used in user-visible lists of content.
-  title: 'Article title',
-
-  // Required; used in user-visible lists of content.
-  description: 'Amazing article about things!',
-
-  // Required; used in user-visible lists of content.
-  icons: [{
-    src: '/img/article-123.png',
-    sizes: '64x64',
-    type: 'image/png',
-  }],
-
-  // Optional; valid categories are currently:
-  // 'homepage', 'article', 'video', 'audio', or '' (default).
-  category: 'article',
-});
-```
-
-Adding an entry only affects the content index; it does not add anything to the
-[cache](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api).
-
-#### Edge case: Call `add()` from `window` context if your icons rely on a `fetch` handler
-
-When you call `add()`, Chrome will make a request for
-each icon's URL to ensure that it has a copy of the icon to use when
-displaying a list of indexed content.
-
-* If you call `add()` from the `window` context (in other words, from your web
-  page), this request will trigger a `fetch` event on your service worker.
-
-* If you call `add()` within your service worker (perhaps inside another event
-  handler), the request will **not** trigger the service worker's `fetch` handler.
-  The icons will be fetched directly, without any service worker involvement. Keep
-  this in mind if your icons rely on your `fetch` handler, perhaps because they
-  only exist in the local cache and not on the network. If they do, make sure that
-  you only call `add()` from the `window` context.
-
-### Listing the index's contents {: #listing-items }
-
-The `getAll()` method returns a promise for an iterable list of indexed entries
-and their metadata. Returned entries will contain all of the data saved with
-`add()`.
-
-```js
-const entries = await registration.index.getAll();
-for (const entry of entries) {
-  // entry.id, entry.launchUrl, etc. are all exposed.
-}
-```
-
-### Removing items from the index {: #removing-items }
-
-To remove an item from the index, call `delete()` with the `id` of the item to
-remove:
-
-```js
-await registration.index.delete('article-123');
-```
-
-Calling `delete()` only affects the index. It does not delete anything from the
-[cache](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api).
-
-{% Aside 'warning' %}
-  Once indexed, entries do not automatically expire. It's
-  up to you to either present an interface in your web app for clearing out
-  entries, or periodically remove older entries that you know should no longer be
-  available offline.
-{% endAside %}
-
-### Handling a user delete event {: #handling-contentdelete }
-
-When the browser displays the indexed content, it may include its own user
-interface with a **Delete** menu item, giving people a chance to indicate that
-they're done viewing previously indexed content. This is how the deletion
-interface looks in Chrome 80:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="delete-menu.png" alt="The delete menu item." width="550">
-</figure>
-
-When someone selects that menu item, your web app's service worker will receive
-a `contentdelete` event. While handling this event is optional, it provides a
-chance for your service worker to "clean up" content, like locally cached media
-files, that someone has indicated they are done with.
-
-You do not need to call `registration.index.delete()` inside your
-`contentdelete` handler; if the event has been fired, the relevant index
-deletion has already been performed by the browser.
-
-```js
-self.addEventListener('contentdelete', (event) => {
-  // event.id will correspond to the id value used
-  // when the indexed content was added.
-  // Use that value to determine what content, if any,
-  // to delete from wherever your app stores it—usually
-  // the Cache Storage API or perhaps IndexedDB.
-});
-```
-
-{% Aside 'note' %}
-  The `contentdelete` event is only fired when the deletion happens due to
-  interaction with the browser's built-in user interface. It is _not_ fired when
-  `registration.index.delete()` is called. If your web app triggers the index
-  deletion using that API method, it should also [clean up cached
-  content](https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete) at the
-  same time.
-{% endAside %}
-
-### Feedback about the API design {: #feedback-design }
-
-Is there something about the API that's awkward or doesn't work as expected? Or
-are there missing pieces that you need to implement your idea?
-
-File an issue on the [Content Indexing API explainer GitHub
-repo](https://github.com/wicg/content-index/issues), or add your thoughts
-to an existing issue.
-
-### Problem with the implementation? {: #feedback-implementation }
-
-Did you find a bug with Chrome's implementation?
-
-File a bug at [https://new.crbug.com](https://new.crbug.com). Include as much
-detail as you can, simple instructions for reproducing, and set **Components**
-to `Blink>ContentIndexing`.
-
-### Planning to use the API? {: #planning-to-use }
-
-Planning to use the Content Indexing API in your web app? Your public support
-helps Chrome prioritize features, and shows other browser vendors how critical it is
-to support them.
-
-- Send a Tweet to [@ChromiumDev](https://twitter.com/chromiumdev) with
-  `#ContentIndexingAPI` and details on where and how you're using it.
-
-## What are some security and privacy implications of content indexing? {: #security-privacy }
-
-Check out [the
-answers](https://github.com/wicg/content-index/blob/master/SECURITY_AND_PRIVACY.md)
-provided in response to the W3C's [Security and Privacy
-questionnaire](https://www.w3.org/TR/security-privacy-questionnaire/). If you
-have further questions, please start a discussion via the project's [GitHub
-repo](https://github.com/wicg/content-index/issues).
-
-_Hero image by Maksym Kaharlytskyi on [Unsplash](https://unsplash.com/photos/Q9y3LRuuxmg)._
diff --git a/src/site/content/en/blog/content-visibility/demo.jpg b/src/site/content/en/blog/content-visibility/demo.jpg
deleted file mode 100644
index 81820d58a37..00000000000
Binary files a/src/site/content/en/blog/content-visibility/demo.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/content-visibility/hero.jpg b/src/site/content/en/blog/content-visibility/hero.jpg
deleted file mode 100644
index edc7bc78eed..00000000000
Binary files a/src/site/content/en/blog/content-visibility/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/content-visibility/index.md b/src/site/content/en/blog/content-visibility/index.md
index 072ae961c59..91551c71dc2 100644
--- a/src/site/content/en/blog/content-visibility/index.md
+++ b/src/site/content/en/blog/content-visibility/index.md
@@ -4,8 +4,10 @@ subhead: Improve initial load time by skipping the rendering of offscreen conten
 authors:
   - una
   - vladimirlevin
+  - jlwagner
 date: 2020-08-05
-hero: hero.jpg
+updated: 2022-12-05
+hero: image/admin/lrAkOWYTyGkK2BKXoF9y.jpg
 alt: Stylized photo of a half-hidden person.
 description: >
     The CSS content-visibility property enables web content rendering
@@ -19,6 +21,8 @@ tags:
   - css
   - layout
   - performance
+feedback:
+  - api
 ---
 
 The
@@ -31,15 +35,15 @@ content is off-screen, leveraging the `content-visibility` property makes the
 initial user load much faster. It also allows for faster interactions with the
 on-screen content. Pretty neat.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="demo.jpg" alt="demo with figures representing network results">
-  <figcaption class="w-figcaption">
-    In our article demo, applying <code>content-visibility: auto</code> to chunked content areas gives a <b>7x</b> rendering performance boost on initial load. Read on to learn more.</a>
-  </figcaption>
+<figure>
+  {% Img src="image/admin/v6WcSx9Fq76lCD0iqFCQ.jpg", alt="demo with figures representing network results", width="800", height="554" %}
+  <figcaption>In our article demo, applying <code>content-visibility: auto</code> to chunked content areas gives a <b>7x</b> rendering performance boost on initial load. Read on to learn more.</figcaption>
 </figure>
 
 ## Browser support {: #support }
 
+{% BrowserCompat 'css.properties.content-visibility' %}
+
 `content-visibility` relies on primitives within the [the CSS Containment
 Spec](http://drafts.csswg.org/css-contain/). While `content-visibility` is only
 supported in Chromium 85 for now (and deemed ["worth
@@ -60,9 +64,9 @@ needing to consider state outside of the subtree. Knowing which bits of content
 decisions for page rendering.
 
 There are four types of [CSS
-containment](https://developers.google.com/web/updates/2016/06/css-containment),
+containment](/css-containment/),
 each a potential value for the `contain` CSS property, which can be combined
-together in a space-separated list of values:
+in a space-separated list of values:
 
 - `size`: Size containment on an element ensures that the element's box can be
   laid out without needing to examine its descendants. This means we can
@@ -86,11 +90,11 @@ together in a space-separated list of values:
 It may be hard to figure out which containment values to use, since browser
 optimizations may only kick in when an appropriate set is specified. You can
 play around with the values to see [what works
-best](https://developers.google.com/web/updates/2016/06/css-containment), or you
+best](/css-containment/), or you
 can use another CSS property called `content-visibility` to apply the needed
 containment automatically. `content-visibility` ensures that you get the largest
 performance gains the browser can provide with minimal effort from you as a
-developer. 
+developer.
 
 The content-visibility property accepts several values, but `auto` is the one
 that provides immediate performance improvements. An element that has
@@ -98,9 +102,9 @@ that provides immediate performance improvements. An element that has
 the element is off-screen (and not otherwise relevant to the user—relevant
 elements would be the ones that have focus or selection in their subtree), it
 also gains `size` containment (and it stops
-[painting](https://developers.google.com/web/updates/2018/09/inside-browser-part3#paint)
+[painting](https://developer.chrome.com/blog/inside-browser-part3/#paint)
 and
-[hit-testing](https://developers.google.com/web/updates/2018/09/inside-browser-part4#finding_the_event_target)
+[hit-testing](https://developer.chrome.com/blog/inside-browser-part4/#finding-the-event-target)
 its contents).
 
 What does this mean? In short, if the element is off-screen its descendants are
@@ -112,10 +116,29 @@ As the element approaches the viewport, the browser no longer adds the `size`
 containment and starts painting and hit-testing the element's content. This
 enables the rendering work to be done just in time to be seen by the user.
 
+{% Aside 'caution' %}
+The browser is only able to skip rendering work if you are also careful not to call any DOM API that [forces some of rendering
+to occur](https://gist.github.com/paulirish/5d52fb081b3570c81e3a#file-what-forces-layout-md) on one of the skipped subtrees.
+If you're using `content-visibility` to improve performance, audit your code to make sure these APIs are not getting called.
+To help find them, Chromium will print console messages if you call one of these APIs for a subtree of an
+element with `content-visibility:hidden`. To see the messages, [turn on verbose logging](https://developer.chrome.com/docs/devtools/console/log/).
+{% endAside %}
+
+
+## A note on accessibility
+
+One of the features of `content-visibility: auto` is that the off-screen content remains available in the document object model and therefore, the accessibility tree (unlike with `visibility: hidden`). This means, that content can be searched for on the page, and navigated to, without waiting for it to load or sacrificing rendering performance.
+
+The flip-side of this, however, is that [landmark](https://www.w3.org/TR/wai-aria-1.1/#landmark_roles) elements with style features such as `display: none` or `visibility: hidden` will also appear in the accessibility tree when off-screen, since the browser will not render these styles until they enter the viewport. To prevent these from being visible in the accessibility tree, potentially causing clutter, be sure to also add `aria-hidden="true"`.
+
+{% Aside 'caution' %}
+In Chromium 85-89, off-screen children within `content-visibility: auto` were marked as invisible. In particular, [headings](https://marcysutton.com/content-visibility-accessible-semantics) and landmark roles were not exposed to accessibility tools. In Chromium 90 this was updated so that they are exposed.
+{% endAside %}
+
 ## Example: a travel blog {: #example }
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/content-visibility/travel_blog.mp4'>
   </video>
   <figcaption>In this example, we baseline our travel blog on the right, and apply <code>content-visibility: auto</code> to chunked areas on the left. The results show rendering times going from <b>232ms</b> to <b>30ms</b> on initial page load.</figcaption>
@@ -137,11 +160,9 @@ have changed. It updates the style and layout of any new elements, along with
 the elements that may have shifted as a result of new updates. This is rendering
 work. This takes time.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="travelblog.jpg" alt="A screenshot of a travel blog.">
-  <figcaption class="w-figcaption">
-    An example of a travel blog. See <a href="https://codepen.io/una/pen/rNxEWLo">Demo on Codepen</a>
-  </figcaption>
+<figure>
+  {% Img src="image/admin/57Zh2hjcXJjJIBSE648j.jpg", alt="A screenshot of a travel blog.", width="800", height="563" %}
+  <figcaption>An example of a travel blog. See <a href="https://codepen.io/una/pen/rNxEWLo">Demo on Codepen</a></figcaption>
 </figure>
 
 Now consider what happens if you put `content-visibility: auto` on each of the
@@ -163,11 +184,9 @@ loading. In our example, we see a boost from a **232ms** rendering time to a
 What is the work that you need to do in order to reap these benefits? First, we
 chunk the content into sections:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="travelblog-chunked.jpg" alt="An annotated screenshot of chunking content into sections with a CSS class.">
-  <figcaption class="w-figcaption">
-    Example of chunking content into sections with the <code>story</code> class applied, to receive <code>content-visibility: auto</code>. See <a href="https://codepen.io/vmpstr/pen/xxZoyMb">Demo on Codepen</a>
-  </figcaption>
+<figure>
+  {% Img src="image/admin/29uexe2kBwIsrAuILPnp.jpg", alt="An annotated screenshot of chunking content into sections with a CSS class.", width="800", height="563" %}
+  <figcaption>Example of chunking content into sections with the <code>story</code> class applied, to receive <code>content-visibility: auto</code>. See <a href="https://codepen.io/vmpstr/pen/xxZoyMb">Demo on Codepen</a></figcaption>
 </figure>
 
 Then, we apply the following style rule to the sections:
@@ -190,7 +209,7 @@ In order to realize the potential benefits of `content-visibility`, the browser
 needs to apply size containment to ensure that the rendering results of contents
 do not affect the size of the element in any way. This means that the element
 will lay out as if it was empty. If the element does not have a height specified
-in a regular block layout, then it will be of 0 height. 
+in a regular block layout, then it will be of 0 height.
 
 This might not be ideal, since the size of the scrollbar will shift, being
 reliant on each story having a non-zero height.
@@ -204,6 +223,25 @@ This means it will lay out as if it had a single child of "intrinsic-size"
 dimensions, ensuring that your unsized divs still occupy space.
 `contain-intrinsic-size` acts as a placeholder size in lieu of rendered content.
 
+In Chromium 98 and onward, there is a new [`auto`](https://drafts.csswg.org/css-sizing-4/#valdef-contain-intrinsic-width-auto-length)
+keyword for `contain-intrinsic-size`. When specified, the browser will remember
+the last-rendered size, if any, and use that instead of the developer-provided placeholder
+size. For example, if you specified `contain-intrinsic-size: auto 300px`, the
+element will start out with a `300px` intrinsic sizing in each dimension, but once
+the element's contents are rendered, it will retain the rendered intrinsic size.
+Any subsequent rendering size changes will also be remembered. In practice, this means that if you
+scroll an element with `content-visibility: auto` applied, and then scroll it back
+offscreen, it will automatically retain its ideal width and height, and not revert
+to the placeholder sizing. This feature is especially useful for infinite scrollers,
+which can now automatically improve sizing estimation over time as the user
+explores the page.
+
+{% Aside %}
+We can use `IntersectionObserver` and `MutationObserver` to set
+the correct sizes inline for each element. [Alex Russell](https://twitter.com/slightlylate) explains
+how this works in [`content-visibility` without jittery scrollbars](https://infrequently.org/2020/12/content-visibility-scroll-fix/), and [Resize-Resilient `content-visibility` Fixes](https://infrequently.org/2020/12/resize-resilient-deferred-rendering/).
+{% endAside %}
+
 ## Hiding content with `content-visibility: hidden`
 
 What if you want to keep the content unrendered regardless of whether or not it
@@ -213,10 +251,10 @@ is on-screen, while leveraging the benefits of cached rendering state? Enter:
 The `content-visibility: hidden` property gives you all of the same benefits of
 unrendered content and cached rendering state as `content-visibility: auto` does
 off-screen. However, unlike with `auto`, it does not automatically start to
-render on-screen. 
+render on-screen.
 
 This gives you more control, allowing you to hide an element's contents and
-later unhide them quickly. 
+later unhide them quickly.
 
 Compare it to other common ways of hiding element's contents:
 
@@ -234,7 +272,23 @@ happen, they only happen when the element is shown again (i.e. the
 `content-visibility: hidden` property is removed).
 
 Some great use cases for `content-visibility: hidden` are when implementing
-advanced virtual scrollers, and measuring layout.
+advanced virtual scrollers, and measuring layout. They're also great for
+single-page applications (SPA's). Inactive app views can be left in the DOM with
+`content-visibility: hidden` applied to prevent their display but maintain their
+cached state. This makes the view quick to render when it becomes active again.
+
+{% Aside 'note' %}
+In an experiment, Facebook engineers observed an up to 250ms improvement in
+navigation times when going back to previously cached views.
+{% endAside %}
+
+## Effects on Interaction to Next Paint (INP)
+
+[INP](/inp/) is a metric that evaluates a page's ability to be reliably responsive to user input. Responsiveness can be affected by any excessive amount of work that occurs on the main thread, including rendering work.
+
+Whenever you can reduce rendering work on any given page, you're giving the main thread an opportunity to respond to user inputs more quickly. This includes rendering work, and using the `content-visiblity` CSS property where appropriate can reduce rendering work—especially during startup, when most rendering and layout work is done.
+
+Reducing rendering work has a direct effect on INP. When users attempt to interact with a page that uses the `content-visibility` property properly to defer layout and rendering of offscreen elements, you're giving the main thread a chance to respond to critical user-visible work. This can improve your page's INP in some situations.
 
 ## Conclusion
 
@@ -244,5 +298,5 @@ properties, check out:
 
 - [The CSS Containment Spec](http://drafts.csswg.org/css-contain/)
 - [MDN Docs on CSS
-  Containment](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment)
+  Containment](https://developer.mozilla.org/docs/Web/CSS/CSS_Containment)
 - [CSSWG Drafts](https://github.com/w3c/csswg-drafts)
diff --git a/src/site/content/en/blog/content-visibility/travelblog-chunked.jpg b/src/site/content/en/blog/content-visibility/travelblog-chunked.jpg
deleted file mode 100644
index 4cee387b5e4..00000000000
Binary files a/src/site/content/en/blog/content-visibility/travelblog-chunked.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/content-visibility/travelblog.jpg b/src/site/content/en/blog/content-visibility/travelblog.jpg
deleted file mode 100644
index 739e5c084e2..00000000000
Binary files a/src/site/content/en/blog/content-visibility/travelblog.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/controlling-third-party-scripts/index.md b/src/site/content/en/blog/controlling-third-party-scripts/index.md
new file mode 100644
index 00000000000..3e9810b260b
--- /dev/null
+++ b/src/site/content/en/blog/controlling-third-party-scripts/index.md
@@ -0,0 +1,185 @@
+---
+title: 'Keeping third-party scripts under control'
+subhead: |
+  Before optimizing third party tags, make sure that these scripts are still needed on your site.
+authors:
+  - ansteychris
+  - antoinebisch
+date: 2021-04-22
+hero: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/TqyTENFItXjxfEDHLsad.png
+alt: Stylized photo of a half-hidden person.
+description: >
+    Third-party scripts, or "tags" can be a source of performance problems on your site,
+    and therefore a target for optimization.
+    However, before you start optimizing the tags you have added,
+    make sure that you are not optimizing tags you don't even need.
+    This article shows you how to assess requests for new tags,
+    and manage and review existing ones.
+tags:
+  - blog
+  - performance
+---
+
+Third-party scripts, or "tags" can be a source of performance problems on your site,
+and therefore a target for optimization.
+However, before you start optimizing the tags you have added,
+make sure that you are not optimizing tags you don't even need.
+This article shows you how to assess requests for new tags,
+and manage and review existing ones.
+
+When discussing third-party tags,
+the conversation often quickly moves to performance problems,
+losing sight of the foundations of what the "core" role of these tags are.
+They provide a wide range of useful functionality,
+making the web
+[more dynamic, interactive, and interconnected](/optimizing-content-efficiency-loading-third-party-javascript/).
+However, third-party tags can be added by different teams across the organization
+and are often forgotten about over time.
+People move on, contracts expire, or the results are yielded,
+but the teams never get back in touch to have the scripts removed.
+
+{% Aside %}
+In the article
+[Improving Third-Party Web Performance](https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5),
+the web team at The Telegraph removed old tags where they could not identify the requester,
+deciding that if the tags were missed the responsible party would get in touch.
+However, no one ever did.
+{% endAside %}
+
+Before you start to think about third-party tag script execution,
+or which tags can be
+[deferred, lazy-loaded or preconnected](/codelab-optimize-third-party-javascript/)
+from a technical lens,
+there's an opportunity to govern which tags are added to a site/page from an organizational point of view.
+A common theme with websites that are being slowed down due to vast amounts of third-party tags,
+is this part of the website is not owned by a single person or team,
+and therefore falls between the cracks.
+There's nothing more frustrating than optimizing your website,
+being happy with the performance in a staging environment,
+only for the speed to regress in production because of tags that are being added.
+Implementing a "vetting process" for third-party tags can help prevent this,
+by building a workflow that creates cross-functional accountability and responsibility for these tags.
+
+The manner in which you vet third-party tags depends solely on the organisation,
+its structure and its current processes.
+It could be as basic as having a single team who govern and act as the gatekeeper
+for analysing tags before they are added.
+Or more advanced and formal,
+for example by providing a form to teams to submit requests for a tag.
+This might ask for context in terms of why it needs to be on the website,
+for how long it should be present,
+and what benefit it would bring to the business.
+
+## Tag governance process
+
+However you choose to vet tags within your organization,
+the following stages should be considered as part of the lifecycle of a tag.
+
+### Compliance
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/33aRnqMUCnbTSvaw5h0m.png",
+alt="Five arrows, with the first step of 'Compliance' completed.",
+width="800",
+height="67" %}
+
+Before any tag is added onto a page,
+check that it has been thoroughly vetted by a legal team to ensure it passes all compliance requirements for it to be present.
+This might include checking that the tag is compliant with the [EU General Data Protection Regulation (GDPR),
+and California Consumer Privacy Act (CCPA)](https://iapp.org/news/a/what-you-must-know-about-third-parties-under-the-gdpr-ccpa/).
+
+This is critical,
+if there is any doubt with this step it needs to be addressed
+before assessing the tag from a performance point of view.
+
+### Required
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/kX91VwuEJzBBdf76HIm9.png",
+alt="Five arrows, with the first two steps of 'Compliance' and 'Required' completed.",
+width="800",
+height="60" %}
+
+The second step is to question whether a specific tag is needed on the page.
+Consider the following discussion points:
+
+- Is the tag actively being used? If not, can it be removed?
+- If the tag is loading sitewide,
+is this necessary?
+For example, if we're analysing an A/B testing suite and you are currently only testing on Landing Pages,
+can we only drop the tag on this page type?
+- Can we add further logic to this, can we detect if there is a live A/B test?
+If so, allow the tag to be added, but if not ensure that it is not present.
+
+### Ownership
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/VsE2wzqT56RJ7Yl7wx2P.png",
+alt="Five arrows, with the first three steps of 'Compliance', 'Required', and 'Ownership' completed.",
+width="800",
+height="62" %}
+
+Having a  clear person or team as an owner of a tag,
+helps to proactively keep track of tags.
+Usually this would be whomever has added the tag. By having an assignee next to the tag,
+this will ensure reviews and audits in the future can be conducted to re-visit whether the tag is required.
+
+### Purpose
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/kKJCySoXMCTPjrID1CVg.png",
+alt="Five arrows, with the first four steps of 'Compliance', 'Required', 'Ownership', and 'Purpose' completed.",
+width="800",
+height="58" %}
+
+The fourth step begins to create cross-functional accountability and responsibility
+by ensuring people understand why the tag is added to the page.
+It's important for there to be a cross-functional understanding of what each tag is bringing to the website,
+and why it is being used.
+For example, if the tag is recording user session actions to allow personalization,
+do all teams know why this should be present?
+
+Furthermore, have there been any commercial vs performance trade-off discussions?
+If there is a tag that is deemed as "required" because it brings in revenue,
+has there been an analysis to the potential revenue lost through speed regression
+
+### Review
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/txmJbO1xdLzfo3PYsDgZ.png",
+alt="Five arrows, with all five steps of 'Compliance', 'Required', 'Ownership', 'Purpose', and 'Review' completed.",
+width="800",
+height="61" %}
+
+The fifth, final and arguably most important step is to ensure tags are being reviewed on a regular basis.
+This should be dependent on the size of the website,
+the number of tags that are on the site,
+and their turnaround time (e.g. weekly, monthly, quarterly).
+This should be treated in the same manner as optimizing other website assets (JS, CSS, images, etc.)
+and proactively checked on a regular basis.
+Failure to review could lead to a "bloated" tag manager,
+which slows down the pages.
+It can be a complex task to revert back to being performant,
+while not regressing the required functionality on the page
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/TqyTENFItXjxfEDHLsad.png",
+alt="Five arrows, with all five steps of 'Compliance', 'Required', 'Ownership', 'Purpose', and 'Review' completed. Indicating that these are all steps in the performance vetting process.",
+width="800",
+height="305" %}
+
+The vetting process should leave you with a final list
+of tags which are classified as needed for a specific page.
+At this stage, you can then delve into
+[technical optimisation approaches](/codelab-optimize-third-party-javascript/).
+This also opens up the opportunity to define the number of tags in this final list within a
+[performance budget](/your-first-performance-budget/),
+which can be monitored within
+[Lighthouse CI](/lighthouse-ci/#overview)
+and incorporated into performance-specific goal setting.
+For example:
+
+> If we stick to <5 tags on our Landing Pages along with our own optimized JS,
+we're confident the
+[Total Blocking Time (TBT)](/tbt/) can hit 'good' in the
+[Core Web Vitals](/vitals/).
diff --git a/src/site/content/en/blog/coop-coep/browsing-context-group.png b/src/site/content/en/blog/coop-coep/browsing-context-group.png
deleted file mode 100644
index 3cb42212261..00000000000
Binary files a/src/site/content/en/blog/coop-coep/browsing-context-group.png and /dev/null differ
diff --git a/src/site/content/en/blog/coop-coep/devtools1.jpg b/src/site/content/en/blog/coop-coep/devtools1.jpg
deleted file mode 100644
index 0aa633d2320..00000000000
Binary files a/src/site/content/en/blog/coop-coep/devtools1.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/coop-coep/devtools2.jpg b/src/site/content/en/blog/coop-coep/devtools2.jpg
deleted file mode 100644
index d5f017e50da..00000000000
Binary files a/src/site/content/en/blog/coop-coep/devtools2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/coop-coep/hero.jpg b/src/site/content/en/blog/coop-coep/hero.jpg
deleted file mode 100644
index 701a7d3e988..00000000000
Binary files a/src/site/content/en/blog/coop-coep/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/coop-coep/index.md b/src/site/content/en/blog/coop-coep/index.md
index 5b8dee1c80a..a72552c7784 100644
--- a/src/site/content/en/blog/coop-coep/index.md
+++ b/src/site/content/en/blog/coop-coep/index.md
@@ -1,45 +1,133 @@
 ---
+layout: post
 title: Making your website "cross-origin isolated" using COOP and COEP
 subhead: >
   Use COOP and COEP to set up a cross-origin isolated environment and enable
-  powerful features like `SharedArrayBuffer`, `performance.measureMemory()`, and
-  the JS Self-Profiling API.
+  powerful features like `SharedArrayBuffer`,
+  `performance.measureUserAgentSpecificMemory()` and high resolution timer with
+  better precision.
 description: >
   Some web APIs increase the risk of side-channel attacks like Spectre. To
   mitigate that risk, browsers offer an opt-in-based isolated environment called
   cross-origin isolated. Use COOP and COEP to set up such an environment and
   enable powerful features like `SharedArrayBuffer`,
-  `performance.measureMemory()` or the JS Self-Profiling API.
+  `performance.measureUserAgentSpecificMemory()` or high resolution timer with
+  better precision.
 authors:
   - agektmr
-hero: hero.jpg
+hero: image/admin/Rv8gOTwZwxr2Z7b13Ize.jpg
+alt: An illustration of a person browsing a website that has a popup, an iframe, and an image.
 date: 2020-04-13
-updated: 2020-05-05
+updated: 2022-06-27
 tags:
   - blog
   - security
+origin_trial:
+  url: https://developers.chrome.com/origintrials/#/register_trial/2780972769901281281
+feedback:
+  - api
 ---
+
+{% Aside 'caution' %}
+
+`SharedArrayBuffer` on Chrome desktop requires cross-origin isolation starting
+from Chrome 92. Learn more at [SharedArrayBuffer updates in Android Chrome 88
+and Desktop Chrome
+92](https://developer.chrome.com/blog/enabling-shared-array-buffer/).
+
+{% endAside %}
+
+**Updates**
+
+- **June 21, 2022**: Worker scripts also need care when cross-origin isolation
+  is enabled. Added some explanations.
+- **Aug 5, 2021**: JS Self-Profiling API has been mentioned as one of APIs that
+  require cross-origin isolation, but reflecting [recent change of the
+  direction](https://github.com/shhnjk/shhnjk.github.io/tree/main/investigations/js-self-profiling#conclusion),
+  it's removed.
+- **May 6, 2021**: Based on feedback and issues reported we've decided to adjust
+  the timeline for `SharedArrayBuffer` usage in none cross-origin isolated sites
+  to be restricted in Chrome M92.
+- **April 16, 2021**: Added notes about [a new COEP credentialless
+  mode](https://github.com/mikewest/credentiallessness/) and [COOP
+  same-origin-allow-popups to be a relaxed
+  condition](https://github.com/whatwg/html/issues/6364) for cross-origin
+  isolation.
+- **March 5, 2021**: Removed limitations for `SharedArrayBuffer`,
+  `performance.measureUserAgentSpecificMemory()`, and debugging functionalities,
+  which are now fully enabled in Chrome 89. Added upcoming capabilities,
+  `performance.now()` and `performance.timeOrigin`, that will have higher
+  precision.
+- **February 19, 2021**: Added a note about feature policy
+  `allow="cross-origin-isolated"` and debugging functionality on DevTools.
+- **October 15, 2020**: `self.crossOriginIsolated` is available from Chrome 87.
+  Reflecting that, `document.domain` is immutable when
+  `self.crossOriginIsolated` returns `true`.
+  `performance.measureUserAgentSpecificMemory()` is ending its origin trial and
+  is enabled by default in Chrome 89. Shared Array Buffer on Android Chrome will
+  be available from Chrome 88.
+
+{% YouTube 'XLNJYhjA-0c' %}
+
 Some web APIs increase the risk of side-channel attacks like Spectre. To
 mitigate that risk, browsers offer an opt-in-based isolated environment called
 cross-origin isolated. With a cross-origin isolated state, the webpage will be
 able to use privileged features including:
 
-* [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)
-  (required for WebAssembly Threads)
-* [`performance.measureMemory()`](/monitor-total-page-memory-usage/)
-* [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/)
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">
+          <code>SharedArrayBuffer</code></a>
+        </td>
+        <td>
+          Required for WebAssembly threads. This is available from Android
+          Chrome 88. Desktop version is currently enabled by default with the
+          help of <a href="https://www.chromium.org/Home/chromium-security/site-isolation">
+          Site Isolation</a>, but will require the cross-origin isolated state
+          and <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/">
+          will be disabled by default in Chrome 92</a>.
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="/monitor-total-page-memory-usage/">
+          <code>performance.measureUserAgentSpecificMemory()</code></a>
+        </td>
+        <td>
+          Available from Chrome 89.
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="https://crbug.com/1180178">
+          <code>performance.now()</code>, <code>performance.timeOrigin</code></a>
+        </td>
+        <td>
+          Currently available in many browsers with the resolution limited to
+          100 microseconds or higher. With cross-origin isolation, the
+          resolution can be 5 microseconds or higher.
+        </td>
+      </tr>
+    </tbody>
+    <caption>Features that will be available behind cross-origin isolated
+    state.</caption>
+  </table>
+</div>
 
 The cross-origin isolated state also prevents modifications of
 `document.domain`. (Being able to alter `document.domain` allows communication
 between same-site documents and has been considered a loophole in the
 same-origin policy.)
 
-{% Aside 'caution' %}
-These powerful features and the prevention of `document.domain` modification
-are not yet enabled in Chrome as of version 83. We'll update this post as they
-become available.
-{% endAside %}
-
 To opt in to a cross-origin isolated state, you need to send the following
 HTTP headers on the main document:
 
@@ -56,16 +144,17 @@ means those resources being loaded cross-origin require opt-ins.
 You can determine whether a web page is in a cross-origin isolated state by
 examining
 [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated).
-(This works on Firefox but has yet to be implemented in Chrome).
 
 This article shows how to use these new headers. In [a follow-up
 article](/why-coop-coep) I will provide more background and context.
 
 {% Aside %}
+
 This article is aimed at those who would like to get their websites ready for
-using `SharedArrayBuffer`, WebAssembly Threads, `performance.measureMemory()`
-or the JS Self-Profiling API in a more robust manner across browser
-platforms.
+using `SharedArrayBuffer`, WebAssembly threads,
+`performance.measureUserAgentSpecificMemory()` or high resolution timer with
+better precision in a more robust manner across browser platforms.
+
 {% endAside %}
 
 {% Aside 'key-term' %}
@@ -85,37 +174,58 @@ clearer, let's define them first:
 {% endAside %}
 
 ## Deploy COOP and COEP to make your website cross-origin isolated
+
+{% Aside %}
+Learn practical steps to enable cross-origin isolation at [A guide to
+enable cross-origin isolation](/cross-origin-isolation-guide/).
+{% endAside %}
+
 ### Integrate COOP and COEP
+
 #### 1. Set the `Cross-Origin-Opener-Policy: same-origin` header on the top-level document
 
-By enabling COOP on a top-level document, windows
-with the same origin, and windows opened from the document, will have a separate
-browsing context group unless they are in the same origin with the same COOP
-setting. Thus, isolation is enforced for opened windows.
+By enabling `COOP: same-origin` on a top-level document, windows with the same
+origin, and windows opened from the document, will have a separate browsing
+context group unless they are in the same origin with the same COOP setting.
+Thus, isolation is enforced for opened windows and mutual communication between
+both windows is disabled.
+
+{% Aside 'caution' %}
+
+This will break integrations that require cross-origin window interactions such
+as OAuth and payments. To mitigate this problem, we are [exploring relaxing the
+condition](https://github.com/whatwg/html/issues/6364) to enable cross-origin
+isolation to `Cross-Origin-Opener-Policy: same-origin-allow-popups`. This way
+the communication with the window opened by itself will be possible.
+
+If you want to enable cross-origin isolation but are blocked by this issue, we
+recommend [registering for an origin
+trial](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)
+and waiting until the new condition is available. We are not planning to
+terminate the origin trial until this issue is safely resolved.
+
+{% endAside %}
 
-A browsing context group is a group of tabs, windows or iframes which share the
-same context. For example, if a website (`https://a.example`) opens a popup
-window (`https://b.example`), the opener window and the popup window share the
-same browsing context and they have access to each other via DOM APIs such as
-`window.opener`.
+A browsing context group is a set of windows that can reference each other. For
+example, a top-level document and its child documents embedded via `<iframe>`.
+If a website (`https://a.example`) opens a popup window (`https://b.example`),
+the opener window and the popup window share the same browsing context, therefore
+they have access to each other via DOM APIs such as `window.opener`.
 
-![Browsing Context Group](browsing-context-group.png)
+{% Img src="image/admin/g42eZMpIKNbUL0cN6yjC.png", alt="Browsing Context Group", width="470", height="469" %}
 
-As of Chrome 83, dedicated DevTools support is not yet available for COOP.
-However, you can examine `window.opener === null` from the opened window, or
-`openedWindow.closed === true` from the opener window to determine if they are
-in separate browsing context groups.
+You can check if the window opener and its openee are in separate browsing
+context groups [from DevTools](#devtools-coop).
 
 {% Aside 'codelab' %}
 [See the impact of different COOP
-params](https://first-party-test.glitch.me/coop).
+parameters](https://cross-origin-isolation.glitch.me/coop).
 {% endAside %}
 
 #### 2. Ensure resources have CORP or CORS enabled
 
-Make sure that all resources in the page are loaded with CORP or CORS
-HTTP headers. This step
-is required for [step four, enabling COEP](#enable-coep).
+Make sure that all resources in the page are loaded with CORP or CORS HTTP
+headers. This step is required for [step four, enabling COEP](#enable-coep).
 
 Here is what you need to do depending on the nature of the resource:
 
@@ -127,11 +237,27 @@ Here is what you need to do depending on the nature of the resource:
   `Cross-Origin-Resource-Policy: cross-origin` header if possible.
 * For cross origin resources that you have no control over:
     * Use the `crossorigin` attribute in the loading HTML tag if the resource is
-      served with CORS.
+      served with CORS. (For example, `<img src="***" crossorigin>`.)
     * Ask the owner of the resource to support either CORS or CORP.
-* For iframes, use CORP and COEP headers as follows:
-  `Cross-Origin-Resource-Policy: same-origin` and `Cross-Origin-Embedder-Policy:
-  require-corp`.
+* For iframes, follow the same principles above and set the
+  `Cross-Origin-Resource-Policy: cross-origin` (or `same-site`, `same-origin`
+  depending on the context).
+* Scripts loaded with a `WebWorker` must be served from same-origin,
+  so you don't need a CORP or CORS headers.
+* For a document or a worker served with `COEP: require-corp`, cross-origin
+  subresources loaded without CORS must set the `Cross-Origin-Resource-Policy:
+  cross-origin` header to opt into being embedded. For example, this applies to
+  `<script>`, `importScripts`, `<link>`, `<video>`, `<iframe>`, etc.
+
+{% Aside 'gotchas' %}
+
+You can enable cross-origin isolation on a document embedded within an iframe by
+applying `allow="cross-origin-isolated"` permissions policy to the `<iframe>` tag
+and meeting the same conditions described in this document. Note that entire
+chain of the documents including parent frames and child frames must be
+cross-origin isolated as well.
+
+{% endAside %}
 
 {% Aside 'key-term' %}
 It's important that you understand the difference between "same-site" and
@@ -144,19 +270,49 @@ same-origin](/same-site-same-origin).
 Before fully enabling COEP, you can do a dry run by using the
 `Cross-Origin-Embedder-Policy-Report-Only` header to examine whether the policy
 actually works. You will receive reports without blocking embedded content.
-Recursively apply this to all documents. For information on the Report-Only HTTP
-header, see [Observe issues using the Reporting
+
+Recursively apply this to **all** documents including the top-level document,
+iframes and worker scripts. For information on the Report-Only HTTP header, see
+[Observe issues using the Reporting
 API](#observe-issues-using-the-reporting-api).
 
 #### 4. Enable COEP {: #enable-coep }
 
 Once you've confirmed that everything works, and that all resources can be
-successfully loaded, apply the `Cross-Origin-Embedder-Policy: require-corp` HTTP
-header to all documents including those that are embedded via iframes.
+successfully loaded, switch the `Cross-Origin-Embedder-Policy-Report-Only`
+header to the `Cross-Origin-Embedder-Policy` header with the same value to all
+documents including those that are embedded via iframes and worker scripts.
 
 {% Aside 'codelab' %}
 [See the impact of different COEP / CORP
-parameters](https://first-party-test.glitch.me/coep).
+parameters](https://cross-origin-isolation.glitch.me/coep).
+{% endAside %}
+
+{% Aside %}
+[Squoosh](https://squoosh.app) (an image optimization PWA) [now uses COOP /
+COEP](https://github.com/GoogleChromeLabs/squoosh/pull/829/files#diff-316f969413f2d9a065fcc08c7a5589c088dd1e21deebadccfc5a4372ac5e0cbbR22-R23)
+to gain access to Wasm Threads (and Shared Array Buffer) as well on Android
+Chrome.
+{% endAside %}
+
+{% Aside 'caution' %}
+
+We've been exploring ways to deploy `Cross-Origin-Resource-Policy` at scale, as
+cross-origin isolation requires all subresources to explicitly opt-in. And we
+have come up with the idea of going in the opposite direction: [a new COEP
+"credentialless"
+mode](https://developer.chrome.com/blog/coep-credentialless-origin-trial/) that
+allows loading resources without the CORP header by stripping all their
+credentials. We hope this will lighten your burden of making sure the
+subresources are sending the `Cross-Origin-Resource-Policy` header.
+
+However, since `credentialless` mode is available on Chrome from version 96 but
+not supported by any other browsers yet, some developers might find it
+challenging to deploy COOP or COEP. If you prefer not to enable cross-origin
+isolation yet, we recommend [registering for an origin
+trial](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)
+and waiting until `credentialless` is available in more browsers.
+
 {% endAside %}
 
 ### Determine whether isolation succeeded with `self.crossOriginIsolated`
@@ -165,17 +321,12 @@ The `self.crossOriginIsolated` property returns `true` when the web page is in a
 cross-origin isolated state and all resources and windows are isolated within
 the same browsing context group. You can use this API to determine whether you
 have successfully isolated the browsing context group and gained access to
-powerful features like `performance.measureMemory()`.
-
-{% Aside 'caution' %}
-The
-[`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated.)
-property is [still under development and not available yet in Chrome as of
-version 83](https://www.chromestatus.com/feature/5953286387531776).
-{% endAside %}
+powerful features like `performance.measureUserAgentSpecificMemory()`.
 
 ### Debug issues using Chrome DevTools
 
+{% YouTube 'D5DLVo_TlEA' %}
+
 For resources that are rendered on the screen such as images, it's fairly easy
 to detect COEP issues because the request will be blocked and the page will
 indicate a missing image. However, for resources that don't
@@ -185,105 +336,138 @@ there's an issue with COEP, you should see
 `(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)` in the **Status**
 column.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot-filled" src="devtools1.jpg" alt="COEP issues in the Status column of the Network panel.">
+<figure>
+  {% Img src="image/admin/iGwe4M1EgHzKb2Tvt5bl.jpg", alt="COEP issues in the Status column of the Network panel.", width="800", height="444" %}
 </figure>
 
 You can then click the entry to see more details.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot-filled" src="devtools2.jpg" alt="Details of the COEP issue are shown in the Headers tab after clicking a network resource in the Network panel.">
+<figure>
+  {% Img src="image/admin/1oTBjS9q8KGHWsWYGq1N.jpg", alt="Details of the COEP issue are shown in the Headers tab after clicking a network resource in the Network panel.", width="800", height="241" %}
 </figure>
 
-{% Aside %}
-While COEP debugging is already available, COOP debugging in Chrome
-DevTools is still [being worked
-on](https://bugs.chromium.org/p/chromium/issues/detail?id=1051466).
-{% endAside %}
+You can also determine the status of iframes and popup windows through the
+**Application** panel. Go to the "Frames" section on the left hand side and
+expand "top" to see the breakdown of the resource structure.
 
-### Observe issues using the Reporting API
+<span id="devtools-coep-iframe">
+You can check the iframe's status such as availability of `SharedArrayBuffer`,
+etc.
+</span>
 
-The [Reporting
-API](https://developers.google.com/web/updates/2018/09/reportingapi) is another
-mechanism through which you can detect various issues. You can configure the
-Reporting API to instruct your users' browser to send a report whenever COEP
-blocks the loading of a resource. Chrome has supported the `Report-To` header since
-version 69 for a variety of uses including COEP.
+<figure>
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9titfaieIs0gwSKnkL3S.png", alt="Chrome DevTools iframe inspector", width="800", height="480" %}
+</figure>
 
-{% Aside %}
-The Reporting API is undergoing transition to [a new
-](https://w3c.github.io/reporting/)version. Chrome is planning to release it
-soon, but will leave the older API in place for some time.
-Firefox is also [considering the new
-API](https://bugzilla.mozilla.org/show_bug.cgi?id=1620573). You may want to use
-both APIs during the transition.
-{% endAside %}
+<span id="devtools-coop">
+You can also check the popup windows's status such as whether it's cross-origin
+isolated.
+</span>
 
-To specify where the browser should send reports, append the `Report-To`
-HTTP header to any document that is served with a COEP HTTP header. The
-`Report-To` header also supports a few extra parameters to configure the
-reports. For example:
+<figure>
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kKvPUo2ZODZu8byK7gTB.png", alt="Chrome DevTools popup window inspector", width="800", height="480" %}
+</figure>
 
-```http
-Report-To: { group: 'coep_rollout_1', max_age: 86400, endpoints: [{ url: 'https://first-party-test.glitch.me/report'}]}
-```
+### Observe issues using the Reporting API
 
-The parameters object has three properties:
+The [Reporting API](/reporting-api) is another mechanism through which you can
+detect various issues. You can configure the Reporting API to instruct your
+users' browser to send a report whenever COEP blocks the loading of a resource
+or COOP isolates a pop-up window. Chrome has supported the Reporting API since
+version 69 for a variety of uses including COEP and COOP.
 
-#### `group`
+{% Aside %}
 
-The `group` property names your various reporting endpoints. Use these names to
-direct a subset of your reports. For instance, in the
-`Cross-Origin-Embedder-Policy` directive you can specify the relevant endpoint
-by providing the group name to `report-to=`. For example:
+Are you already using the Reporting API with the `Report-To` header? Chrome is
+transitioning to a new version of the Reporting API, which replaces `Report-To` with
+`Reporting-Endpoints`; consider migrating to the new version. Check out
+[Migrate to Reporting API v1](/reporting-api-migration) for details.
 
-```http
-Cross-Origin-Embedder-Policy: require-corp; report-to="coep_rollout_1"
-```
-When the browser encounters this, it will cross reference the `report-to` value
-with the `group` property on the `Report-To` header to look up the endpoint.
-This example cross references on `coep_rollout_1` to find the endpoint
-`https://first-party-test.glitch.me/report`.
+{% endAside %}
 
-If you prefer to receive reports without blocking any embedded content, use
-`Cross-Origin-Embedder-Policy-Report-Only` instead of
-`Cross-Origin-Embedder-Policy`. For example:
+To learn how to configure the Reporting API and set up a server to receive
+reports, head over to [Using the Reporting
+API](/reporting-api/#using-the-reporting-api).
 
-```http
-Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="coep_rollout_1"
-```
+#### Example COEP report
 
-By doing this, when the browser detects cross origin resources that don't have
-CORP or CORS, it sends a report using the Reporting API without actually
-blocking those resources.
+An example [COEP
+report](https://html.spec.whatwg.org/multipage/origin.html#coep-report-type)
+payload when cross-origin resource is blocked looks like this:
 
-#### `max_age`
+```json
+[{
+  "age": 25101,
+  "body": {
+    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
+    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
+    "destination": "image",
+    "disposition": "enforce",
+    "type": "corp"
+  },
+  "type": "coep",
+  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
+}]
+```
 
-The `max_age` property specifies the time in seconds after which unsent reports
-are to be dropped. The browser doesn't send the reports right away.
-Instead, it transmits them out-of-band whenever there aren't any other higher
-priority tasks. The `max_age` prevents the browser from sending reports that are
-too stale to be useful. For example, `max_age: 86400` means that reports older
-than twenty-four hours will not be sent.
+{% Aside 'caution' %}
+`blocked-url` is there for backward compatibility only and [will be removed
+eventually](https://github.com/whatwg/html/pull/5848).
+{% endAside %}
 
-#### `endpoints`
+#### Example COOP report
 
-The `endpoints` property specifies the URLs of one or more reporting endpoints.
-The endpoint must accept CORS if it's hosted on a different origin. The browser
-will send reports with a Content-Type of `application/reports+json`.
+An example [COOP
+report](https://html.spec.whatwg.org/multipage/origin.html#reporting) payload
+when a pop-up window is opened isolated looks like this:
+
+```json
+[{
+  "age": 7,
+  "body": {
+    "disposition": "enforce",
+    "effectivePolicy": "same-origin",
+    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
+    "type": "navigation-from-response"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
 
-An example payload looks like this:
+When different browsing context groups try to access each other (only on
+"report-only" mode), COOP also sends a report. For example, a report when
+`postMessage()` is attempted would look like this:
 
 ```json
 [{
-  age: 0,
-  body: {
-    'blocked-url': 'https://third-party-test.glitch.me/check.svg',
-    type: 'corp'
+  "age": 51785,
+  "body": {
+    "columnNumber": 18,
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "lineNumber": 83,
+    "property": "postMessage",
+    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
+    "type": "access-from-coop-page-to-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+},
+{
+  "age": 51785,
+  "body": {
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "property": "postMessage",
+    "type": "access-to-coop-page-from-openee"
   },
-  type: 'coep',
-  url: 'https://first-party-test.glitch.me/?coep=require-corp',
-  …
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
 }]
 ```
 
@@ -291,17 +475,18 @@ An example payload looks like this:
 
 Use a combination of COOP and COEP HTTP headers to opt a web page into a special
 cross-origin isolated state. You will be able to examine
-`self.crossOriginIsolated` to determine whether a web page is in a
-cross-origin isolated state.
-
-In upcoming releases of Chrome, this cross-origin isolated state will prevent
-[altering
-`document.domain`](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin)
-and will give access to powerful features such as:
-
-* [`performance.measureMemory`](/monitor-total-page-memory-usage/)
-* [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/) and more.
+`self.crossOriginIsolated` to determine whether a web page is in a cross-origin
+isolated state.
 
 We'll keep this post updated as new features are made available to this
 cross-origin isolated state, and further improvements are made to DevTools
 around COOP and COEP.
+
+## Resources
+
+* [Why you need "cross-origin isolated" for powerful features](/why-coop-coep/)
+* [A guide to enable cross-origin isolation](/cross-origin-isolation-guide/)
+* [SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome
+  92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
+* [Monitor your web page's total memory usage with
+  `measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/)
diff --git a/src/site/content/en/blog/covid19/banner.jpg b/src/site/content/en/blog/covid19/banner.jpg
deleted file mode 100644
index f1f3d2f4122..00000000000
Binary files a/src/site/content/en/blog/covid19/banner.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/covid19/hero.jpg b/src/site/content/en/blog/covid19/hero.jpg
deleted file mode 100644
index fd99ae11d7f..00000000000
Binary files a/src/site/content/en/blog/covid19/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/covid19/index.md b/src/site/content/en/blog/covid19/index.md
index b018d861619..e2a2a1edfc2 100644
--- a/src/site/content/en/blog/covid19/index.md
+++ b/src/site/content/en/blog/covid19/index.md
@@ -8,7 +8,7 @@ description: >
   available, accessible, secure, usable, discoverable, and fast.
 date: 2020-04-03
 updated: 2020-04-06
-hero: hero.jpg
+hero: image/admin/LH3VwpI4GW1lW51Ns5ab.jpg
 tags:
   - blog
   - accessibility
@@ -84,7 +84,7 @@ before they become major issues.
   and [Caching best
   practices](https://jakearchibald.com/2016/caching-best-practices/) for
   specific recommendations. The [Serve static assets with an efficient cache
-  policy](/uses-long-cache-ttl/) audit in Lighthouse can help you
+  policy](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/) audit in Lighthouse can help you
   quickly detect resources that aren't being cached. Keep in mind that different
   types of resources will have different freshness requirements and will
   therefore require different caching strategies.
@@ -124,7 +124,7 @@ everyone.
   team member (product managers, engineers, designers, QA, and so on) can
   contribute.
 * Do an [Accessibility
-  Review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)
+  Review](/how-to-review/)
   to determine what's working well, and what needs improvement.
   The [WAVE browser extensions](https://wave.webaim.org/extension/) can help
   guide you through a manual accessibility audit of your site.
@@ -158,7 +158,7 @@ protect this sensitive user data at all costs and convince people that their
 information](https://en.wikipedia.org/wiki/Personal_data) (PII) is safe.
 
 * Understand [why all websites should be protected with
-  HTTPS](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https),
+  HTTPS](/why-https-matters/),
   not just those that handle sensitive PII data.
 * Switch to a hosting provider that uses HTTPS by default, or use [Let's
   Encrypt](https://letsencrypt.org/getting-started/) or similar services to
@@ -201,13 +201,13 @@ possible.
 * Ensure that your forms are
   [efficient](https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/)
   and
-  [well-designed](https://developers.google.com/web/fundamentals/design-and-ux/input/forms).
+  [well-designed](/learn/forms/).
 
 ### SEO {: #seo }
 
 People are looking for critical health- and job-related information. It's
 important to ensure that your sites are discoverable by all search engines.
-The [Lighthouse SEO audits](/lighthouse-seo/) can help you detect basic problems.
+The [Lighthouse SEO audits](https://developer.chrome.com/docs/lighthouse/seo/) can help you detect basic problems.
 Follow the official blogs of search engines for the latest guidance and updates:
 [Google](https://webmasters.googleblog.com/),
 [Bing](https://blogs.bing.com/webmaster/),
@@ -253,17 +253,17 @@ performance impact of reduced bandwidth.
 * Run [WebPageTest](https://webpagetest.org/easy) or
   [Lighthouse](https://developers.google.com/web/tools/lighthouse/#get-started)
   to discover your top performance improvement opportunities.
-* [Enable text compression](/uses-text-compression/) to reduce
+* [Enable text compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/) to reduce
   the network size of text resources. This is often an easy performance win that
   requires minimal technical investment.
 * Read [Fixing website speed
   cross-functionally](/fixing-website-speed-cross-functionally/)
   to learn how to collaborate with and get buy-in from other departments.
-* [Use native lazy-loading for images](/native-lazy-loading/) to
+* [Use standardized lazy-loading for images](/browser-level-image-lazy-loading/) to
   minimize requests for images that people may never actually see. [Browser
-  compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility)
+  compatibility](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility)
   is not 100% but the feature can be treated as a progressive enhancement. In
-  other words, if a certain browser doesn't support native lazy-loading, the
+  other words, if a certain browser doesn't support standardized lazy-loading, the
   image should load as it normally does.
 * Check if your site has any A/B testing or personalization scripts that can be
   loaded more asynchronously or if there's any non-critical functionality in the
@@ -284,7 +284,7 @@ performance impact of reduced bandwidth.
 * If feature releases are deprioritized, this might be the perfect time to clean
   up. Remove tags from your tag managers, clean up bloated CSS and JS, and
   remove deprecated features or code. The
-  [Coverage tab](https://developers.google.com/web/tools/chrome-devtools/coverage)
+  [Coverage tab](https://developer.chrome.com/docs/devtools/coverage/)
   in Chrome DevTools and the
   [`Coverage`](https://pptr.dev/#?product=Puppeteer&version=v2.1.1&show=api-class-coverage) class
   in Puppeteer can help you detect unused code.
diff --git a/src/site/content/en/blog/cq-stable/index.md b/src/site/content/en/blog/cq-stable/index.md
new file mode 100644
index 00000000000..8858250c2ce
--- /dev/null
+++ b/src/site/content/en/blog/cq-stable/index.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Container queries land in stable browsers
+subhead: >
+  This Valentine's day, we're celebrating size container queries and container query units landing in all stable browsers.
+description: >
+  This week size container queries and container query units are landing in all stable browsers.
+date: 2023-02-14
+authors:
+  - una
+hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/CIEGE8v8IvH4MDgI7EfO.jpg
+alt: 'TBD'
+thumbnail: image/HodOHWjMnbNw56hvNASHWSgZyAf2/CIEGE8v8IvH4MDgI7EfO.jpg
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three major browser engines!
+{% endAside %}
+
+Container query love is in the air! This Valentine’s day, size container queries and container query units are stable in all modern browsers.
+
+{% BrowserCompat 'css.at-rules.container' %}
+
+With container queries you can query  the styling information of a parent element, such as its `inline-size`. With media queries, you could query the size of the viewport,  container queries enable components that can change based on where they are in the UI.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/hmzfwE5nyg017bX0GEeP.png", alt="Media queries vs container queries.", width="800", height="388" %}
+
+Container queries are especially handy for responsive design and reusable components. For example, enabling a card component that can lay out in one way when placed in a sidebar, and in a different configuration within a product grid.
+
+## Using container queries
+
+To use container queries, first set containment on a parent element. Do this by setting a `container-type` on the parent container, or use the `container` shorthand to give it both a type and name simultaneously:
+
+
+```css
+.card-container {
+  container: card / inline-size;
+}
+```
+
+Setting the `container-type` to `inline-size` queries the inline-direction size of the parent. In latin languages like English, this would be the width of the card, as the text flows inline from left to right.
+
+
+Now, you can use that container to apply styles to any of its children using `@container`:
+
+
+```css
+.card-child {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@container (max-width: 400px) {
+ .card-child {
+  grid-template-columns: 1fr;
+ }
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZEMzNGj',
+  height: 600,
+  tab: 'result'
+} %}
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/2MWkjhnK2TLqZ3S63NfK.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+
+Additionally, you can use [container query length unit values](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries#container_query_length_units) in the same way that you would viewport-based unit values. The difference being that the container units correspond to the container rather than the viewport. The following example demonstrates responsive typography using container query units and the `clamp()` function to give a minimum and maximum size value:
+
+```css
+.card-child h2 {
+  font-size: clamp(2rem, 15cqi, 4rem);
+}
+```
+
+The `15cqi` above refers to 15% of the container’s inline size. The `clamp()` function gives this a minimum value of 2rem, and a maximum of 4rem. In the meantime, if `15cqi` is between these values, the text will shrink and grow correspondingly.
+
+## A container query Valentine
+To celebrate the container query love this holiday, we’ve made a Valentine for you all to enjoy, regardless of what (latest version) stable browser you’re viewing this in!
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNrbPQw',
+  height: 700,
+  tab: 'result'
+} %}
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ge0SICG5Hoyy6EEm4zpv.mp4", controls=true, loop=true, muted=true %}
diff --git a/src/site/content/en/blog/creative-list-styling/index.md b/src/site/content/en/blog/creative-list-styling/index.md
new file mode 100644
index 00000000000..aadb51adc11
--- /dev/null
+++ b/src/site/content/en/blog/creative-list-styling/index.md
@@ -0,0 +1,387 @@
+---
+title: Creative list styling
+subhead: >
+  A look at some useful and creative ways to style a list.
+description: >
+  A look at some useful and creative ways to style a list.
+date: 2022-08-24
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/NqMw5qZ6sdS1UEG2Wx5u.png
+alt: A list showing two items with different color decorations. 
+is_baseline: true
+tags:
+  - blog
+  - css
+authors:
+  - michellebarker
+---
+
+What comes to mind when you think of a list? The most obvious example is a shopping list—the most simple of lists, a collection of items in no particular order. But we use lists in all sorts of ways on the web. A collection of upcoming concerts at a venue? Very likely a list. A multi-step booking process? Quite possibly a list. A gallery of images? Even that could be considered a list of images with captions.
+
+In this article we'll dive into the different HTML list types available to us on the web and when to use them, including some attributes you might not be familiar with. We'll also take a look at some useful and creative ways to style them with CSS.
+
+## When to use a list
+
+An HTML list element should be used when items need to be semantically grouped. Assistive technologies (such as screen readers) will notify the user that there is a list, and the number of items. If you think about, say, a grid of products on a shopping site, knowing this information would be very helpful. Therefore, using a list element might be a good choice.
+
+## List types
+
+When it comes to markup, we have a choice of three different list elements available to us: 
+
+-  Unordered list
+-  Ordered list
+-  Description list
+
+Which one to pick depends on the use case.
+
+### Unordered list (ul)
+
+The unordered list element (`<ul>`) is most useful when the items in the list don't correspond to any particular order. By default this will display as a bulleted list. An example is a shopping list, where the order doesn't matter.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/59pGr3TkE9oBx4QDCiUM.png", alt="A shopping list of items such as bread, milk, apples.", width="800", height="387" %}
+
+A more common example on the web is a navigation menu. When building a menu, it is good practice to wrap the `ul` in a `nav` element and to identify the menu with a label, to aid assistive technologies. We should also identify the current page in the menu, which we can do using the `aria-current` attribute:
+
+```html  
+<nav aria-label="Main">  
+  <ul>  
+    <li>  
+      <a href="/page-1" aria-current="page">Menu item 1</a>  
+    </li>  
+    <li>  
+      <a href="/page-2">Menu item 2</a>  
+    </li>  
+    <li>  
+      <a href="/page-2">Menu item 2</a>  
+    </li>  
+      …  
+    </ul>  
+</nav>  
+```
+
+[This article on menu structure](https://www.w3.org/WAI/tutorials/menus/structure/) outlines a number of recommendations to ensure our navigation menus are accessible to all.
+
+### Ordered list (ol)
+
+An ordered list element (`<ol>`) is the best choice when the order of items is important, such as a multi-step process. By default, list items are numbered. An example could be a set of instructions, where steps must be completed in order.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/MtcTt0l6WlxVFhZyVvaN.png", alt="A list detailing the steps required to make tea with milk.", width="800", height="620" %}
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdxjLEd',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+Both `<ol>` and `<ul>` elements may only contain `<li>` elements as their direct children.
+
+### Description list (dl)
+
+A description list contains terms (`<dt>` elements) and descriptions (`<dd>`). Each term can be accompanied by more than one description. Possible use cases could include a glossary of terms, or perhaps a restaurant menu. Description lists are not displayed with any markers by default, although browsers tend to indent the `<dd>` element.
+
+In HTML it is permitted to group terms with their accompanying descriptions using a `<div>`. This can be useful for styling purposes, as we'll see later on.
+
+```html  
+<!-- This is valid --> 
+<dl>  
+    <dt>Term 1</dt>  
+    <dd>This is the first description of the first term in the list</dd>  
+    <dd>This is the second description of the first term in the list</dd>  
+    <dt>Term 2</dt>  
+    <dd>This is the description of the second term in the list</dd>  
+</dl>
+
+<!-- This is also valid --> 
+<dl>  
+    <div>  
+        <dt>Term 1</dt>  
+        <dd>This is the first description of the first term in the list</dd>  
+        <dd>This is the second description of the first term in the list</dd>  
+    </div>  
+    <div>  
+        <dt>Term 2</dt>  
+        <dd>This is the description of the second term in the list</dd>  
+    </div>  
+</dl>  
+```
+
+## Simple list styling
+
+One of the simplest uses of a list is within a block of body text. Quite often these simple lists don't need elaborate styling, but we might want to customize the markers of an ordered or unordered list to some extent, such as with a brand color, or by using a custom image for our bullets. We can do quite a lot with `list-style` and the `::marker` pseudo-element! 
+
+{% Aside %}
+For a refresher on the basics of list styling, check out the [Learn CSS tutorial](/learn/css/lists/), as well as a deep-dive into using `::marker` in this [custom bullets](/css-marker-pseudo-element/) guide. Read on for some things you might not already know!
+{% endAside %}
+
+## ::marker
+
+In addition to giving our list markers some basic styling, we can create cyclical bullets. Here we're using three different image URLs for the `content` value of the `::marker` pseudo-element, which adds to the hand-written feel of our shopping list example (as opposed to just using a single image for all):
+
+```css  
+::marker {  
+    content: url("/marker-1.svg") ' ';  
+}
+
+li:nth-child(3n)::marker {  
+    content: url("/marker-2.svg") ' ';  
+}
+
+li:nth-child(3n - 1)::marker {  
+    content: url("/marker-3.svg") ' ';  
+}  
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poLZVbr',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+### Custom counters
+
+For some ordered lists we might want to use the counter value, but append another value to it. We can use the `list-item` counter as a value for our marker's `content` property and append any other content:
+
+```css  
+::marker {  
+    content: counter(list-item) '🐈 ';  
+}  
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYWLjBa',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+Our counters automatically increment by one, but we can permit them to increment by a different value if we choose, by setting the `counter-increment` property on the list item. For example, this will increment our counters by three each time:
+
+```css  
+li {  
+    counter-increment: list-item 3;  
+}  
+```
+
+There's a lot more we could delve into with counters. The article [CSS Lists, Markers and Counters](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/) explains some of the possibilities in greater detail.
+
+### Limitations of ::marker styling
+
+There are times when we might want more control over the position and style of our markers. It's not possible to position the marker using flexbox or grid, for example, which can sometimes be a drawback if you require some other alignment. `::marker` exposes a limited number of CSS properties for styling. If our design requires anything other than basic styling, we might be better off using another pseudo-element.
+
+## Styling lists that don't look like lists
+
+Sometimes we might want to style our lists in a way that is totally different from the default styling. [This is often the case with a navigation menu](https://codepen.io/michellebarker/pen/vYRXNXX), for example, where we usually want to remove all markers, and might display our list horizontally, using flexbox. A common practice is to set the `list-style` property to `none`. This will mean the marker pseudo-element will no longer be accessible in the DOM.
+
+{% Aside 'caution' %}
+A word of warning: `list-style: none` will cause Safari to no longer recognise an unordered list in the accessibility tree—meaning that a screen reader would no longer announce helpful information such as the number of items. A simple fix (assuming your list should be read as such) is to use `role="list"` on the `<ul>` or `<ol>` element in your HTML, as [recommended by accessibility expert Scott O'Hara](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).
+{% endAside %}
+
+## Custom markers with ::before
+
+Styling the `::before` pseudo-element was a common way to create custom list markers before `::marker` came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.
+
+Like `::marker`, we can add our own custom bullet styles using the `content` attribute. Unlike using `::marker`, we need to do some manual positioning, as we don't get the automatic benefits offered by `list-style-position`. But we can position it relatively easily with flexbox, and it does open up a greater number of possibilities for alignment. For instance, we could alternate the position of the marker:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJvwZRM',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+If we're styling an ordered list using the `::before` element, we might also wish to use counters to add our numerical markers.
+
+```css  
+li::before {  
+  counter-increment: list-item;  
+  content: counter(list-item);  
+}  
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWYBMRb',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+Using `::before` instead of `::marker` allows us full access to CSS properties for custom styling, as well as permitting animations and transitions—for which support is limited for `::marker`.
+
+## List attributes
+
+Ordered lists elements accept some optional attributes, which can help us in a variety of use cases. 
+
+### Reversed lists
+
+If we have a list of the top 10 albums of the past year, we might want to count down from 10 to 1. We _could_ use custom counters for that, and increment them negatively. Or we could simply use the `reversed` attribute in the HTML. I would argue that it generally makes semantic sense to use the `reversed` attribute rather than negatively incrementing the counter in CSS, unless the counters are purely presentational. If the CSS failed to load, you would still see the numbers counting down correctly in the HTML. Plus we need to consider how a screen reader would interpret the list. 
+
+Take this demo of the top 10 albums from 2021. If the counters were incremented purely with CSS, someone accessing the page using a screen reader might conclude that the numbers counted upwards, so that number 10 was actually number one.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBoyYaL',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+You can see in the demo that by using the `reversed` attribute, our markers already have the correct value, without any extra effort on our part! But if we're creating custom list markers using the `::before` pseudo-element, we need to adjust our counters. We just need to instruct our list-item counter to increment negatively:
+
+```css  
+li::before {  
+  counter-increment: list-item -1;  
+  content: counter(list-item);  
+}  
+```
+
+This will be sufficient in Firefox, but in Chrome and Safari the markers will count down from zero to -10. We can fix that by adding the `start` attribute to the list.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWmBrGp',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+### Split lists
+
+The `start` attribute allows us to specify the numeric value the list should start from. One way this can be useful is in cases where you want to split a list into groups.
+
+Let's build on our top 10 albums example. Perhaps we actually want to count down the top 20 albums, but in groups of 10. In between the two groups there is some other page content.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/4hyszzTz5iao3h4SKpmT.png", alt="A wireframed list in columns with an element spanning the columns midway.", width="800", height="776" %}
+
+We'll need to create two separate lists in our HTML, but how can we ensure that the counters will be correct? As our markup currently stands, both lists will count down from 10 to 1, which is not what we want. However, in our HTML we can specify a `start` attribute value. If we add a `start` value of 20 to our first list, the markers will once again be updated automatically!
+
+```html  
+<ol reversed start="20">  
+  <li>...</li>  
+  <li>...</li>  
+  <li>...</li>  
+</ol>  
+```
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjLBvbw',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzajLpm',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+## Multi-column list layout
+
+Multi-column layout can sometimes lend itself well to our lists, as you can see from the previous demos. By setting a column width, we can ensure our list is automatically responsive, laying itself over two or more columns only when there is sufficient space. We can also set a gap between the columns, and for additional flourish, add a styled [column-rule](https://developer.mozilla.org/docs/Web/CSS/column-rule) (using a shorthand similar to the `border` property):
+
+```css  
+ol {  
+    columns: 25rem;  
+    column-gap: 7rem;  
+    column-rule: 4px dotted turquoise;  
+}  
+```
+
+Using columns, we can sometimes end up with unsightly breaks in our list items—not always the effect we want.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/bKGN5c3qaE4dnVUYOORr.png", alt="A demonstration of how the content is split between two columns.", width="800", height="325" %}
+
+We can prevent these forced breaks using `break-inside: avoid` on our list items:
+
+```css  
+li {  
+    break-inside: avoid;  
+}  
+```
+
+## Custom properties
+
+CSS custom properties open up a whole range of possibilities for styling lists. If we know the index of the list item, we can use it to calculate property values. Unfortunately at present there isn't a way to determine the element's index (in a usable way, at any rate) in CSS alone. Counters only permit us to use their value in the `content` property, and don't allow calculations.
+
+But we _can_ set the element's index within the `style` attribute in our HTML, which can make calculations more feasible, especially if we're using a templating language. This example shows how we would set that using [Nunjucks](https://mozilla.github.io/nunjucks/):
+
+{% raw %}
+```js
+<ol style="--length: items|length">  
+  {% for item in items %}  
+  <li style="--i: {{ loop.index }}">...</li>  
+  {% endfor %}
+</ol>  
+```
+{% endraw %}
+
+[Splitting.js](https://splitting.js.org/) is a library that performs a similar function on the client side.
+
+Using the custom property value we can show progression through a list in various ways. One way could be a progress bar for a list of steps. In this example, we're using a pseudo-element with a linear gradient to create a bar for each item that shows how far through the list the user is.
+
+```css  
+li::before {  
+    --stop: calc(100% / var(--length) * var(--i));  
+    --color1: deeppink;  
+    --color2: pink;  
+
+    content: '';  
+    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
+}  
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BarPxpz',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+We could also adjust the hue as the list progresses, by using the `hsl()` color function. We can calculate the `hue` value using our custom property.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOzpxyw',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+## Description list styling
+
+As mentioned earlier, we can choose to wrap terms and their definitions within a `div` in a `dl`, to give us more styling options. For example, we might want to display our list as a grid. Setting `display: grid` on the list without a wrapper `div` around each group would mean our terms and descriptions are placed in different grid cells. Sometimes this is useful, as in the following example, showing a menu of pies with their descriptions.
+
+We can define a grid on the list itself and ensure that the terms and descriptions will always align in columns, with the column width determined by the longest term.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYRajmB',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+On the other hand, if we want to distinctly group terms with their descriptions card-style, a wrapper `<div>` is very helpful.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJvwZmN',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+## Resources
+
+- [Lists](/learn/css/lists/) An introduction to lists and ::marker  
+- [Custom markers using ::marker](/css-marker-pseudo-element)  
+- [CSS lists with counters](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/)
diff --git a/src/site/content/en/blog/critical-rendering-path-adding-interactivity-with-javascript/index.md b/src/site/content/en/blog/critical-rendering-path-adding-interactivity-with-javascript/index.md
new file mode 100644
index 00000000000..f31653a3676
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-adding-interactivity-with-javascript/index.md
@@ -0,0 +1,149 @@
+---
+layout: post
+title: Adding Interactivity with JavaScript
+authors:
+  - ilyagrigorik
+date: 2013-12-31
+updated: 2018-08-17
+description: >
+  JavaScript allows us to modify just about every aspect of the page: content, styling, and its response to user interaction. However, JavaScript can also block DOM construction and delay when the page is rendered. To deliver optimal performance, make your JavaScript async and eliminate any unnecessary JavaScript from the critical rendering path.
+---
+
+JavaScript allows us to modify just about every aspect of the page: content,
+styling, and its response to user interaction. However, JavaScript can also
+block DOM construction and delay when the page is rendered. To deliver optimal
+performance, make your JavaScript async and eliminate any unnecessary JavaScript
+from the critical rendering path.
+
+### Summary {: .hide-from-toc }
+
+- JavaScript can query and modify the DOM and the CSSOM.
+- JavaScript execution blocks on the CSSOM.
+- JavaScript blocks DOM construction unless explicitly declared as async.
+
+JavaScript is a dynamic language that runs in a browser and allows us to alter just about every aspect of how the page behaves: we can modify content by adding and removing elements from the DOM tree; we can modify the CSSOM properties of each element; we can handle user input; and much more. To illustrate this, let's augment our previous "Hello World" example with a simple inline script:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+    <title>Critical Path: Script</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script>
+      var span = document.getElementsByTagName('span')[0];
+      span.textContent = 'interactive'; // change DOM text content
+      span.style.display = 'inline'; // change CSSOM property
+      // create a new element, style it, and append it to the DOM
+      var loadTime = document.createElement('div');
+      loadTime.textContent = 'You loaded this page on: ' + new Date();
+      loadTime.style.color = 'blue';
+      document.body.appendChild(loadTime);
+    </script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/script.html)
+
+- JavaScript allows us to reach into the DOM and pull out the reference to the hidden span node; the node may not be visible in the render tree, but it's still there in the DOM. Then, when we have the reference, we can change its text (via .textContent), and even override its calculated display style property from "none" to "inline." Now our page displays "**Hello interactive students!**".
+
+- JavaScript also allows us to create, style, append, and remove new elements in the DOM. Technically, our entire page could be just one big JavaScript file that creates and styles the elements one by one. Although that would work, in practice using HTML and CSS is much easier. In the second part of our JavaScript function we create a new div element, set its text content, style it, and append it to the body.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/AjyzdxcNFYaEYYgNBBWh.png", alt="page preview", width="717", height="370" %}
+
+With that, we've modified the content and the CSS style of an existing DOM node, and added an entirely new node to the document. Our page won't win any design awards, but it illustrates the power and flexibility that JavaScript affords us.
+
+However, while JavaScript affords us lots of power, it creates lots of additional limitations on how and when the page is rendered.
+
+First, notice that in the above example our inline script is near the bottom of the page. Why? Well, you should try it yourself, but if we move the script above the _span_ element, you'll notice that the script fails and complains that it cannot find a reference to any _span_ elements in the document; that is, _getElementsByTagName(‘span')_ returns _null_. This demonstrates an important property: our script is executed at the exact point where it is inserted in the document. When the HTML parser encounters a script tag, it pauses its process of constructing the DOM and yields control to the JavaScript engine; after the JavaScript engine finishes running, the browser then picks up where it left off and resumes DOM construction.
+
+In other words, our script block can't find any elements later in the page because they haven't been processed yet! Or, put slightly differently: **executing our inline script blocks DOM construction, which also delays the initial render.**
+
+Another subtle property of introducing scripts into our page is that they can read and modify not just the DOM, but also the CSSOM properties. In fact, that's exactly what we're doing in our example when we change the display property of the span element from none to inline. The end result? We now have a race condition.
+
+What if the browser hasn't finished downloading and building the CSSOM when we want to run our script? The answer is simple and not very good for performance: **the browser delays script execution and DOM construction until it has finished downloading and constructing the CSSOM.**
+
+In short, JavaScript introduces a lot of new dependencies between the DOM, the CSSOM, and JavaScript execution. This can cause the browser significant delays in processing and rendering the page on the screen:
+
+- The location of the script in the document is significant.
+- When the browser encounters a script tag, DOM construction pauses until the script finishes executing.
+- JavaScript can query and modify the DOM and the CSSOM.
+- JavaScript execution pauses until the CSSOM is ready.
+
+To a large degree, "optimizing the critical rendering path" refers to understanding and optimizing the dependency graph between HTML, CSS, and JavaScript.
+
+## Parser blocking versus asynchronous JavaScript
+
+By default, JavaScript execution is "parser blocking": when the browser encounters a script in the document it must pause DOM construction, hand over control to the JavaScript runtime, and let the script execute before proceeding with DOM construction. We saw this in action with an inline script in our earlier example. In fact, inline scripts are always parser blocking unless you write additional code to defer their execution.
+
+What about scripts included via a script tag? Let's take our previous example and extract the code into a separate file:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+    <title>Critical Path: Script External</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
+**app.js**
+
+```js
+var span = document.getElementsByTagName('span')[0];
+span.textContent = 'interactive'; // change DOM text content
+span.style.display = 'inline'; // change CSSOM property
+// create a new element, style it, and append it to the DOM
+var loadTime = document.createElement('div');
+loadTime.textContent = 'You loaded this page on: ' + new Date();
+loadTime.style.color = 'blue';
+document.body.appendChild(loadTime);
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/split_script.html)
+
+Whether we use a &lt;script&gt; tag or an inline JavaScript snippet, you'd
+expect both to behave the same way. In both cases, the browser pauses and
+executes the script before it can process the remainder of the document.
+However, **in the case of an external JavaScript file the browser must pause to
+wait for the script to be fetched from disk, cache, or a remote server, which
+can add tens to thousands of milliseconds of delay to the critical rendering
+path.**
+
+By default all JavaScript is parser blocking. Because the browser does not know what the script is planning to do on the page, it assumes the worst case scenario and blocks the parser. A signal to the browser that the script does not need to be executed at the exact point where it's referenced allows the browser to continue to construct the DOM and let the script execute when it is ready; for example, after the file is fetched from cache or a remote server.
+
+To achieve this, we mark our script as _async_:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+    <title>Critical Path: Script Async</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="app.js" async></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/split_script_async.html)
+
+Adding the async keyword to the script tag tells the browser not to block DOM construction while it waits for the script to become available, which can significantly improve performance.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-analyzing-crp/index.md b/src/site/content/en/blog/critical-rendering-path-analyzing-crp/index.md
new file mode 100644
index 00000000000..7b2b5fb84f8
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-analyzing-crp/index.md
@@ -0,0 +1,336 @@
+---
+layout: post
+title: Analyzing Critical Rendering Path Performance
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+description: >
+  Learn to identify and resolve critical rendering path performance bottlenecks.
+---
+
+Identifying and resolving critical rendering path performance bottlenecks requires good knowledge of the common pitfalls. Let's take a hands-on tour and extract common performance patterns that will help you optimize your pages.
+
+Optimizing the critical rendering path allows the browser to paint the page as quickly as possible: faster pages translate into higher engagement, more pages viewed, and [improved conversion](https://www.google.com/think/multiscreen/success.html). To minimize the amount of time a visitor spends viewing a blank screen, we need to optimize which resources are loaded and in which order.
+
+To help illustrate this process, let's start with the simplest possible case and incrementally build up our page to include additional resources, styles, and application logic. In the process, we'll optimize each case; we'll also see where things can go wrong.
+
+So far we've focused exclusively on what happens in the browser after the resource (CSS, JS, or HTML file) is available to process. We've ignored the time it takes to fetch the resource either from cache or from the network. We'll assume the following:
+
+- A network roundtrip (propagation latency) to the server costs 100ms.
+- Server response time is 100ms for the HTML document and 10ms for all other files.
+
+## The hello world experience
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Critical Path: No Style</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html)
+
+We'll start with basic HTML markup and a single image; no CSS or JavaScript. Let's open up our Network timeline in Chrome DevTools and inspect the resulting resource waterfall:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Ymt4xfqjkmbXWcf0QpO1.png", alt="CRP", width="800", height="82" %}
+
+{% Aside %}
+Although this doc uses DevTools to illustrate CRP concepts, DevTools is
+currently not well-suited for CRP analysis. See [What about
+DevTools?](measure-crp#devtools) for more information.
+{% endAside %}
+
+As expected, the HTML file took approximately 200ms to download. Note that the transparent portion of the blue line represents the length of time that the browser waits on the network without receiving any response bytes whereas the solid portion shows the time to finish the download after the first response bytes have been received. The HTML download is tiny (<4K), so all we need is a single roundtrip to fetch the full file. As a result, the HTML document takes approximately 200ms to fetch, with half the time spent waiting on the network and the other half waiting on the server response.
+
+When the HTML content becomes available, the browser parses the bytes, converts them into tokens, and builds the DOM tree. Notice that DevTools conveniently reports the time for the DOMContentLoaded event at the bottom (216ms), which also corresponds to the blue vertical line. The gap between the end of the HTML download and the blue vertical line (DOMContentLoaded) is the time it takes the browser to build the DOM tree&mdash;in this case, just a few milliseconds.
+
+Notice that our "awesome photo" did not block the `domContentLoaded` event. Turns out, we can construct the render tree and even paint the page without waiting for each asset on the page: **not all resources are critical to deliver the fast first paint**. In fact, when we talk about the critical rendering path we are typically talking about the HTML markup, CSS, and JavaScript. Images do not block the initial render of the page&mdash;although we should also try to get the images painted as soon as possible.
+
+That said, the `load` event (also known as `onload`), is blocked on the image: DevTools reports the `onload` event at 335ms. Recall that the `onload` event marks the point at which **all resources** that the page requires have been downloaded and processed; at this point, the loading spinner can stop spinning in the browser (the red vertical line in the waterfall).
+
+## Adding JavaScript and CSS into the mix
+
+Our "Hello World experience" page seems simple but a lot goes on under the hood. In practice we'll need more than just the HTML: chances are, we'll have a CSS stylesheet and one or more scripts to add some interactivity to our page. Let's add both to the mix and see what happens:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Critical Path: Measure Script</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body onload="measureCRP()">
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="timing.js"></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/measure_crp_timing.html)
+
+_Before adding JavaScript and CSS:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Ymt4xfqjkmbXWcf0QpO1.png", alt="DOM CRP", width="800", height="82" %}
+
+_With JavaScript and CSS:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/TB6qP0gGOlo83Pb3qIQ4.png", alt="DOM, CSSOM, JS", width="800", height="117" %}
+
+Adding external CSS and JavaScript files adds two extra requests to our waterfall, all of which the browser dispatches at about the same time. However, **note that there is now a much smaller timing difference between the `domContentLoaded` and `onload` events.**
+
+What happened?
+
+- Unlike our plain HTML example, we also need to fetch and parse the CSS file to construct the CSSOM, and we need both the DOM and CSSOM to build the render tree.
+- Because the page also contains a parser blocking JavaScript file, the `domContentLoaded` event is blocked until the CSS file is downloaded and parsed: because the JavaScript might query the CSSOM, we must block the CSS file until it downloads before we can execute JavaScript.
+
+**What if we replace our external script with an inline script?** Even if the script is inlined directly into the page, the browser can't execute it until the CSSOM is constructed. In short, inlined JavaScript is also parser blocking.
+
+That said, despite blocking on CSS, does inlining the script make the page render faster? Let's try it and see what happens.
+
+_External JavaScript:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/TB6qP0gGOlo83Pb3qIQ4.png", alt="DOM, CSSOM, JS", width="800", height="117" %}
+
+_Inlined JavaScript:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/tz6KtBAhG51MAhMT3xFV.png", alt="DOM, CSSOM, and inlined JS", width="800", height="95" %}
+
+We are making one less request, but both our `onload` and `domContentLoaded` times are effectively the same. Why? Well, we know that it doesn't matter if the JavaScript is inlined or external, because as soon as the browser hits the script tag it blocks and waits until the CSSOM is constructed. Further, in our first example, the browser downloads both CSS and JavaScript in parallel and they finish downloading at about the same time. In this instance, inlining the JavaScript code doesn't help us much. But there are several strategies that can make our page render faster.
+
+First, recall that all inline scripts are parser blocking, but for external scripts we can add the "async" keyword to unblock the parser. Let's undo our inlining and give that a try:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Critical Path: Measure Async</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body onload="measureCRP()">
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script async src="timing.js"></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/measure_crp_async.html)
+
+_Parser-blocking (external) JavaScript:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/TB6qP0gGOlo83Pb3qIQ4.png", alt="DOM, CSSOM, JS", width="800", height="117" %}
+
+_Async (external) JavaScript:_
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/FrwY2zgpS7Om2xvol89u.png", alt="DOM, CSSOM, async JS", width="800", height="122" %}
+
+Much better! The `domContentLoaded` event fires shortly after the HTML is parsed; the browser knows not to block on JavaScript and since there are no other parser blocking scripts the CSSOM construction can also proceed in parallel.
+
+Alternatively, we could have inlined both the CSS and JavaScript:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Critical Path: Measure Inlined</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style>
+      p {
+        font-weight: bold;
+      }
+      span {
+        color: red;
+      }
+      p span {
+        display: none;
+      }
+      img {
+        float: right;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script>
+      var span = document.getElementsByTagName('span')[0];
+      span.textContent = 'interactive'; // change DOM text content
+      span.style.display = 'inline'; // change CSSOM property
+      // create a new element, style it, and append it to the DOM
+      var loadTime = document.createElement('div');
+      loadTime.textContent = 'You loaded this page on: ' + new Date();
+      loadTime.style.color = 'blue';
+      document.body.appendChild(loadTime);
+    </script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/measure_crp_inlined.html)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/CMfwg0nJdKpr0uo1kXvn.png", alt="DOM, inline CSS, inline JS", width="800", height="80" %}
+
+Notice that the `domContentLoaded` time is effectively the same as in the previous example; instead of marking our JavaScript as async, we've inlined both the CSS and JS into the page itself. This makes our HTML page much larger, but the upside is that the browser doesn't have to wait to fetch any external resources; everything is right there in the page.
+
+As you can see, even with a very simple page, optimizing the critical rendering path is a non-trivial exercise: we need to understand the dependency graph between different resources, we need to identify which resources are "critical," and we must choose among different strategies for how to include those resources on the page. There is no one solution to this problem; each page is different. You need to follow a similar process on your own to figure out the optimal strategy.
+
+That said, let's see if we can step back and identify some general performance patterns.
+
+## Performance patterns
+
+The simplest possible page consists of just the HTML markup; no CSS, no JavaScript, or other types of resources. To render this page the browser has to initiate the request, wait for the HTML document to arrive, parse it, build the DOM, and then finally render it on the screen:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Critical Path: No Style</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/CWG98NTczRE0lu8w5jBw.png", alt="Hello world CRP", width="617", height="171" %}
+
+**The time between T<sub>0</sub> and T<sub>1</sub> captures the network and server processing times.** In the best case (if the HTML file is small), just one network roundtrip fetches the entire document. Due to how the TCP transports protocols work, larger files may require more roundtrips. **As a result, in the best case the above page has a one roundtrip (minimum) critical rendering path.**
+
+Now, let's consider the same page but with an external CSS file:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/analysis_with_css.html)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/KsgmVrOFWvTyTOydAbeP.png", alt="DOM + CSSOM CRP", width="800", height="199" %}
+
+Once again, we incur a network roundtrip to fetch the HTML document, and then the retrieved markup tells us that we also need the CSS file; this means that the browser has to go back to the server and get the CSS before it can render the page on the screen. **As a result, this page incurs a minimum of two roundtrips before it can be displayed.** Once again, the CSS file may take multiple roundtrips, hence the emphasis on "minimum".
+
+Let's define the vocabulary we use to describe the critical rendering path:
+
+- **Critical Resource:** Resource that could block initial rendering of the page.
+- **Critical Path Length:** Number of roundtrips, or the total time required to fetch all of the critical resources.
+- **Critical Bytes:** Total number of bytes required to get to first render of the page, which is the sum of the transfer filesizes of all critical resources.
+  Our first example, with a single HTML page, contained a single critical resource (the HTML document); the critical path length was also equal to one network roundtrip (assuming file was small), and the total critical bytes was just the transfer size of the HTML document itself.
+
+Now let's compare that to the critical path characteristics of the HTML + CSS example above:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/KsgmVrOFWvTyTOydAbeP.png", alt="DOM + CSSOM CRP", width="800", height="199" %}
+
+- **2** critical resources
+- **2** or more roundtrips for the minimum critical path length
+- **9** KB of critical bytes
+
+We need both the HTML and CSS to construct the render tree. As a result, both HTML and CSS are critical resources: the CSS is fetched only after the browser gets the HTML document, hence the critical path length is at minimum two roundtrips. Both resources add up to a total of 9KB of critical bytes.
+
+Now let's add an extra JavaScript file into the mix.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/analysis_with_css_js.html)
+
+We added `app.js`, which is both an external JavaScript asset on the page and a parser blocking (that is, critical) resource. Worse, in order to execute the JavaScript file we have to block and wait for CSSOM; recall that JavaScript can query the CSSOM and hence the browser pauses until `style.css` is downloaded and CSSOM is constructed.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/TB6qP0gGOlo83Pb3qIQ4.png", alt="DOM, CSSOM, JavaScript CRP", width="800", height="117" %}
+
+That said, in practice if we look at this page's "network waterfall," you'll see that both the CSS and JavaScript requests are initiated at about the same time; the browser gets the HTML, discovers both resources, and initiates both requests. As a result, the above page has the following critical path characteristics:
+
+- **3** critical resources
+- **2** or more roundtrips for the minimum critical path length
+- **11** KB of critical bytes
+
+We now have three critical resources that add up to 11KB of critical bytes, but our critical path length is still two roundtrips because we can transfer the CSS and JavaScript in parallel. **Figuring out the characteristics of your critical rendering path means being able to identify the critical resources and also understanding how the browser will schedule their fetches.** Let's continue with our example.
+
+After chatting with our site developers, we realize that the JavaScript we included on our page doesn't need to be blocking; we have some analytics and other code in there that doesn't need to block the rendering of our page. With that knowledge, we can add the "async" attribute to the script tag to unblock the parser:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="app.js" async></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/analysis_with_css_js_async.html)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/8rsf6hqutn9YbVKRLroK.png", alt="DOM, CSSOM, async JavaScript CRP", width="800", height="223" %}
+
+An asynchronous script has several advantages:
+
+- The script is no longer parser blocking and is not part of the critical rendering path.
+- Because there are no other critical scripts, the CSS doesn't need to block the `domContentLoaded` event.
+- The sooner the `domContentLoaded` event fires, the sooner other application logic can begin executing.
+
+As a result, our optimized page is now back to two critical resources (HTML and CSS), with a minimum critical path length of two roundtrips, and a total of 9KB of critical bytes.
+
+Finally, if the CSS stylesheet were only needed for print, how would that look?
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" media="print" />
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+    <script src="app.js" async></script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/analysis_with_css_nb_js_async.html)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/k3OsnpbIYbBGaGTAHB8e.png", alt="DOM, non-blocking CSS, and async JavaScript CRP", width="796", height="273" %}
+
+Because the style.css resource is only used for print, the browser doesn't need to block on it to render the page. Hence, as soon as DOM construction is complete, the browser has enough information to render the page. As a result, this page has only a single critical resource (the HTML document), and the minimum critical rendering path length is one roundtrip.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-constructing-the-object-model/index.md b/src/site/content/en/blog/critical-rendering-path-constructing-the-object-model/index.md
new file mode 100644
index 00000000000..f27f9f2a2d4
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-constructing-the-object-model/index.md
@@ -0,0 +1,175 @@
+---
+layout: post
+title: Constructing the Object Model
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2019-03-15
+description: >
+  Learn how the browser constructs the DOM and CSSOM trees.
+---
+
+Before the browser can render the page, it needs to construct the DOM and
+CSSOM trees. As a result, we need to ensure that we deliver both the HTML and
+CSS to the browser as quickly as possible.
+
+### Summary {: .hide-from-toc }
+
+- Bytes → characters → tokens → nodes → object model.
+- HTML markup is transformed into a Document Object Model (DOM); CSS markup is
+  transformed into a CSS Object Model (CSSOM).
+- DOM and CSSOM are independent data structures.
+- Chrome DevTools Performance panel allows us to capture and inspect the construction
+  and processing costs of DOM and CSSOM.
+
+## Document Object Model (DOM)
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+    <title>Critical Path</title>
+  </head>
+  <body>
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/basic_dom.html)
+
+Let’s start with the simplest possible case: a plain HTML page with some text
+and a single image. How does the browser process this page?
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/cSL20piziX7XLekCPCuD.png", alt="DOM construction process", width="800", height="443" %}
+
+1. **Conversion:** The browser reads the raw bytes of HTML off the disk or
+   network, and translates them to individual characters based on specified
+   encoding of the file (for example, UTF-8).
+1. **Tokenizing:** The browser converts strings of characters into distinct
+   tokens&mdash;as specified by the [W3C HTML5 standard](http://www.w3.org/TR/html5/)
+   for example, "&lt;html&gt;", "&lt;body&gt;"&mdash;and other strings within
+   angle brackets. Each token has a special meaning and its own set of rules.
+1. **Lexing:** The emitted tokens are converted into "objects," which define
+   their properties and rules.
+1. **DOM construction:** Finally, because the HTML markup defines relationships
+   between different tags (some tags are contained within other tags) the
+   created objects are linked in a tree data structure that also captures
+   the parent-child relationships defined in the original markup: the _HTML_
+   object is a parent of the _body_ object, the _body_ is a parent of the
+   _paragraph_ object, and so on.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/keK3wDv9k2KzJA9QubFx.png", alt="DOM tree", width="582", height="299" %}
+
+**The final output of this entire process is the Document Object Model (DOM)
+of our simple page, which the browser uses for all further processing of the
+page.**
+
+Every time the browser processes HTML markup, it goes through all of the steps
+above: convert bytes to characters, identify tokens, convert tokens to nodes,
+and build the DOM tree. This entire process can take some time, especially if
+we have a large amount of HTML to process.
+
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/RHpJTxB4gBYuhzILaB7Y.png", alt="Tracing DOM construction in DevTools", width="766", height="180" %}
+
+{% Aside %}
+We're assuming that you have basic familiarity with Chrome DevTools - that
+is, you know how to capture a network waterfall or record a timeline. If you
+need a quick refresher, check out the
+[Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/overview/); if you're new to
+DevTools, check out [DevTools for Beginners](https://developer.chrome.com/docs/devtools/open/)
+in our DevTools documentation.
+{% endAside %}
+
+If you open up Chrome DevTools and record a timeline while the page is loaded,
+you can see the actual time taken to perform this step&mdash;in the example
+above, it took us ~5ms to convert a chunk of HTML into a DOM tree. For a
+larger page, this process could take significantly longer. When creating
+smooth animations, this can easily become a bottleneck if the browser has to
+process large amounts of HTML.
+
+The DOM tree captures the properties and relationships of the document markup,
+but it doesn't tell us how the element will look when rendered. That’s the
+responsibility of the CSSOM.
+
+## CSS Object Model (CSSOM)
+
+While the browser was constructing the DOM of our simple page, it encountered
+a link tag in the head section of the document referencing an external CSS
+stylesheet: `style.css`. Anticipating that it needs this resource to render the
+page, it immediately dispatches a request for this resource, which comes back
+with the following content:
+
+```css
+body {
+  font-size: 16px;
+}
+p {
+  font-weight: bold;
+}
+span {
+  color: red;
+}
+p span {
+  display: none;
+}
+img {
+  float: right;
+}
+```
+
+We could have declared our styles directly within the HTML markup (inline), but
+keeping our CSS independent of HTML allows us to treat content and design as
+separate concerns: designers can work on CSS, developers can focus on HTML,
+and so on.
+
+As with HTML, we need to convert the received CSS rules into something that
+the browser can understand and work with. Hence, we repeat the HTML process,
+but for CSS instead of HTML:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/yb5YfU0vx6vHvB7c0fyD.png", alt="CSSOM construction steps", width="800", height="51" %}
+
+The CSS bytes are converted into characters, then tokens, then nodes, and
+finally they are linked into a tree structure known as the "CSS Object Model"
+(CSSOM):
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/keK3wDv9k2KzJA9QubFx.png", alt="CSSOM tree", width="582", height="299" %}
+
+Why does the CSSOM have a tree structure? When computing the final set of
+styles for any object on the page, the browser starts with the most general
+rule applicable to that node (for example, if it is a child of a body element,
+then all body styles apply) and then recursively refines the computed styles
+by applying more specific rules; that is, the rules "cascade down."
+
+To make it more concrete, consider the CSSOM tree above. Any text contained
+within the `<span>` tag that is placed within the body element, has a font
+size of 16 pixels and has red text&mdash;the `font-size` directive cascades
+down from the `body` to the `span`. However, if a `span` tag is child of a
+paragraph (`p`) tag, then its contents are not displayed.
+
+Also, note that the above tree is not the complete CSSOM tree and only shows
+the styles we decided to override in our stylesheet. Every browser provides
+a default set of styles also known as "user agent styles"&mdash;that’s what
+we see when we don’t provide any of our own&mdash;and our styles simply
+override these defaults.
+
+To find out how long the CSS processing takes you can record a timeline in
+DevTools and look for "Recalculate Style" event: unlike DOM parsing, the
+timeline doesn’t show a separate "Parse CSS" entry, and instead captures
+parsing and CSSOM tree construction, plus the recursive calculation of
+computed styles under this one event.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/nAI6iO8vsAf03EUs4nWZ.png", alt="Tracing CSSOM construction in DevTools", width="766", height="180" %}
+
+Our trivial stylesheet takes ~0.6ms to process and affects eight elements on
+the page&mdash;not much, but once again, not free. However, where did the
+eight elements come from? The CSSOM and DOM are independent data structures!
+Turns out, the browser is hiding an important step. Next, lets talk about the
+[render tree](/critical-rendering-path-render-tree-construction)
+that links the DOM and CSSOM together.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-measure-crp/index.md b/src/site/content/en/blog/critical-rendering-path-measure-crp/index.md
new file mode 100644
index 00000000000..1187bfa82ec
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-measure-crp/index.md
@@ -0,0 +1,132 @@
+---
+title: Measuring the Critical Rendering Path
+description: >
+  Learn to measure the critical rendering path.
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+The foundation of every solid performance strategy is good measurement and
+instrumentation. You can't optimize what you can't measure. This doc
+explains different approaches for measuring CRP performance.
+
+- The Lighthouse approach runs a series of automated tests against a page,
+  and then generates a report on the page's CRP performance. This approach
+  provides a quick and easy high-level overview of CRP performance of a
+  particular page loaded in your browser, allowing you to rapidly test,
+  iterate, and improve its performance.
+- The Navigation Timing API approach captures [Real User
+  Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring)
+  metrics. As the name implies, these metrics are captured from real user
+  interactions with your site and provide an accurate view into
+  real-world CRP performance, as experienced by your users across a variety
+  of devices and network conditions.
+
+In general, a good approach is to use Lighthouse to identify obvious CRP
+optimization opportunities, and then to instrument your code with the
+Navigation Timing API to monitor how your app performs out in the wild.
+
+## Auditing a page with Lighthouse {: #lighthouse }
+
+Lighthouse is a web app auditing tool that runs a series of tests against a
+given page, and then displays the page's results in a consolidated report. You
+can run Lighthouse as a Chrome Extension or NPM module, which is
+useful for integrating Lighthouse with continuous integration systems.
+
+See [Auditing Web Apps With Lighthouse](/web/tools/lighthouse/) to get started.
+
+When you run Lighthouse as a Chrome Extension, your page's CRP results look
+like the screenshot below.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/2qSS5tw7Ne5V8qwWqNnb.png", alt="Lighthouse's CRP audits", width="681", height="466" %}
+
+See [Critical Request Chains][crc] for more information on this audit's
+results.
+
+## Instrumenting your code with the Navigation Timing API {: #navigation-timing }
+
+The combination of the Navigation Timing API and other browser events emitted
+as the page loads allows you to capture and record the real-world CRP
+performance of any page.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ZHMDYNtYGV3IwkTlRirS.png", alt="Navigation Timing", width="347", height="318" %}
+
+Each of the labels in the above diagram corresponds to a high resolution timestamp that the browser tracks for each and every page it loads. In fact, in this specific case we're only showing a fraction of all the different timestamps &mdash; for now we're skipping all network related timestamps, but we'll come back to them in a future lesson.
+
+So, what do these timestamps mean?
+
+- `domLoading`: this is the starting timestamp of the entire process, the
+  browser is about to start parsing the first received bytes of the HTML
+  document.
+- `domInteractive`: marks the point when the browser has finished parsing all
+  of the HTML and DOM construction is complete.
+- `domContentLoaded`: marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution - meaning we can now (potentially) construct the render tree.
+  - Many JavaScript frameworks wait for this event before they start executing their own logic. For this reason the browser captures the `EventStart` and `EventEnd` timestamps to allow us to track how long this execution took.
+- `domComplete`: as the name implies, all of the processing is complete and
+  all of the resources on the page (images, etc.) have finished downloading -
+  in other words, the loading spinner has stopped spinning.
+- `loadEvent`: as a final step in every page load the browser fires an
+  `onload` event which can trigger additional application logic.
+
+The HTML specification dictates specific conditions for each and every event: when it should be fired, which conditions should be met, and so on. For our purposes, we'll focus on a few key milestones related to the critical rendering path:
+
+- `domInteractive` marks when DOM is ready.
+- `domContentLoaded` typically marks when [both the DOM and CSSOM are ready](http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/).
+  - If there is no parser blocking JavaScript then `DOMContentLoaded` will fire immediately after `domInteractive`.
+- `domComplete` marks when the page and all of its subresources are ready.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Critical Path: Measure</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="style.css" rel="stylesheet" />
+    <script>
+      function measureCRP() {
+        var t = window.performance.timing,
+          interactive = t.domInteractive - t.domLoading,
+          dcl = t.domContentLoadedEventStart - t.domLoading,
+          complete = t.domComplete - t.domLoading;
+        var stats = document.createElement('p');
+        stats.textContent =
+          'interactive: ' +
+          interactive +
+          'ms, ' +
+          'dcl: ' +
+          dcl +
+          'ms, complete: ' +
+          complete +
+          'ms';
+        document.body.appendChild(stats);
+      }
+    </script>
+  </head>
+  <body onload="measureCRP()">
+    <p>Hello <span>web performance</span> students!</p>
+    <div><img src="awesome-photo.jpg" /></div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/measure_crp.html)
+
+The above example may seem a little daunting on first sight, but in reality it is actually pretty simple. The Navigation Timing API captures all the relevant timestamps and our code simply waits for the `onload` event to fire &mdash; recall that `onload` event fires after `domInteractive`, `domContentLoaded` and `domComplete` &mdash; and computes the difference between the various timestamps.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/tu3s8ythdotqqoxQDoEd.png", alt="NavTiming demo", width="717", height="370" %}
+
+All said and done, we now have some specific milestones to track and a simple function to output these measurements. Note that instead of printing these metrics on the page you can also modify the code to send these metrics to an analytics server ([Google Analytics does this automatically](https://support.google.com/analytics/answer/1205784)), which is a great way to keep tabs on performance of your pages and identify candidate pages that can benefit from some optimization work.
+
+## What about DevTools? {: #devtools }
+
+Although these docs sometimes use the Chrome DevTools Network panel to
+illustrate CRP concepts, DevTools is currently not well-suited for CRP
+measurements because it does not have a built-in mechanism for isolating
+critical resources. Run a [Lighthouse](#lighthouse) audit to help
+identify such resources.
+
+## Feedback {: #feedback }
+
+[crc]: /web/tools/lighthouse/audits/critical-request-chains
diff --git a/src/site/content/en/blog/critical-rendering-path-optimizing-critical-rendering-path/index.md b/src/site/content/en/blog/critical-rendering-path-optimizing-critical-rendering-path/index.md
new file mode 100644
index 00000000000..a5637c85c67
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-optimizing-critical-rendering-path/index.md
@@ -0,0 +1,31 @@
+---
+title: Optimizing the Critical Rendering Path
+description: >
+  Learn the key factors in optimizing the critical rendering path.
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+To deliver the fastest possible time to first render, we need
+to minimize three variables:
+
+- The number of critical resources.
+- The critical path length.
+- The number of critical bytes.
+
+A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.
+
+Similarly, the critical path length is a function of the dependency graph between the critical resources and their bytesize: some resource downloads can only be initiated after a previous resource has been processed, and the larger the resource the more roundtrips it takes to download.
+
+Finally, the fewer critical bytes the browser has to download, the faster it can process content and render it visible on the screen. To reduce the number of bytes, we can reduce the number of resources (eliminate them or make them non-critical) and ensure that we minimize the transfer size by compressing and optimizing each resource.
+
+**The general sequence of steps to optimize the critical rendering path is:**
+
+1. Analyze and characterize your critical path: number of resources, bytes, length.
+1. Minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on.
+1. Optimize the number of critical bytes to reduce the download time (number of roundtrips).
+1. Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-page-speed-rules-and-recommendations/index.md b/src/site/content/en/blog/critical-rendering-path-page-speed-rules-and-recommendations/index.md
new file mode 100644
index 00000000000..d742d677f88
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-page-speed-rules-and-recommendations/index.md
@@ -0,0 +1,107 @@
+---
+title: PageSpeed Rules and Recommendations
+description: >
+  This guide examines PageSpeed Insights rules in context: what to pay attention to when optimizing the critical rendering path, and why.
+authors:
+  - ilyagrigorik
+date: 2018-08-17
+updated: 2014-03-31
+---
+
+This guide examines PageSpeed Insights rules in context: what to pay attention to when optimizing the critical rendering path, and why.
+
+## Eliminate render-blocking JavaScript and CSS
+
+To deliver the fastest time to first render, minimize and (where possible) eliminate the number of critical resources on the page, minimize the number of downloaded critical bytes, and optimize the critical path length.
+
+## Optimize JavaScript use
+
+JavaScript resources are parser blocking by default unless marked as `async` or added via a special JavaScript snippet. Parser blocking JavaScript forces the browser to wait for the CSSOM and pauses construction of the DOM, which in turn can significantly delay the time to first render.
+
+### Prefer asynchronous JavaScript resources
+
+Asynchronous resources unblock the document parser and allow the browser to avoid blocking on CSSOM prior to executing the script. Often, if the script can use the `async` attribute, it also means it is not essential for the first render. Consider loading scripts asynchronously after the initial render.
+
+### Avoid synchronous server calls
+
+Use the `navigator.sendBeacon()` method to limit data sent by XMLHttpRequests in
+`unload` handlers. Because many browsers require such requests to be
+synchronous, they can slow page transitions, sometimes noticeably. The following
+code shows how to use `navigator.sendBeacon()` to send data to the server in the
+`pagehide` handler instead of in the `unload` handler.
+
+```js
+    <script>
+      function() {
+        window.addEventListener('pagehide', logData, false);
+        function logData() {
+          navigator.sendBeacon(
+            'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
+            'Sent by a beacon!');
+        }
+      }();
+    </script>
+```
+
+The new `fetch()` method provides an easy way to asynchronously request data. Because it is not available everywhere yet, you should use feature detection to test for its presence before use. This method processes responses with Promises rather than multiple event handlers. Unlike the response to an XMLHttpRequest, a fetch response is a stream object starting in Chrome 43. This means that a call to `json()` also returns a Promise.
+
+```js
+    <script>
+    fetch('./api/some.json')
+      .then(
+        function(response) {
+          if (response.status !== 200) {
+            console.log('Looks like there was a problem. Status Code: ' +  response.status);
+            return;
+          }
+          // Examine the text in the response
+          response.json().then(function(data) {
+            console.log(data);
+          });
+        }
+      )
+      .catch(function(err) {
+        console.log('Fetch Error :-S', err);
+      });
+    </script>
+```
+
+The `fetch()` method can also handle POST requests.
+
+```js
+    <script>
+    fetch(url, {
+      method: 'post',
+      headers: {
+        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+      },
+      body: 'foo=bar&lorem=ipsum'
+    }).then(function() { // Additional code });
+    </script>
+```
+
+### Defer parsing JavaScript
+
+To minimize the amount of work the browser has to perform to render the page, defer any non-essential scripts that are not critical to constructing the visible content for the initial render.
+
+### Avoid long running JavaScript
+
+Long running JavaScript blocks the browser from constructing the DOM, CSSOM, and rendering the page, so defer until later any initialization logic and functionality that is non-essential for the first render. If a long initialization sequence needs to run, consider splitting it into several stages to allow the browser to process other events in between.
+
+## Optimize CSS Use
+
+CSS is required to construct the render tree and JavaScript often blocks on CSS during initial construction of the page. Ensure that any non-essential CSS is marked as non-critical (for example, print and other media queries), and that the amount of critical CSS and the time to deliver it is as small as possible.
+
+### Put CSS in the document head
+
+Specify all CSS resources as early as possible within the HTML document so that the browser can discover the `<link>` tags and dispatch the request for the CSS as soon as possible.
+
+### Avoid CSS imports
+
+The CSS import (`@import`) directive enables one stylesheet to import rules from another stylesheet file. However, avoid these directives because they introduce additional roundtrips into the critical path: the imported CSS resources are discovered only after the CSS stylesheet with the `@import` rule itself is received and parsed.
+
+### Inline render-blocking CSS
+
+For best performance, you may want to consider inlining the critical CSS directly into the HTML document. This eliminates additional roundtrips in the critical path and if done correctly can deliver a "one roundtrip" critical path length where only the HTML is a blocking resource.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-render-blocking-css/index.md b/src/site/content/en/blog/critical-rendering-path-render-blocking-css/index.md
new file mode 100644
index 00000000000..c5a8269f0b3
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-render-blocking-css/index.md
@@ -0,0 +1,69 @@
+---
+title: Render Blocking CSS
+description: >
+  By default CSS is treated as a render blocking resource. Learn how to prevent it from blocking rendering.
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+By default, CSS is treated as a render blocking resource, which means that the
+browser won't render any processed content until the CSSOM is
+constructed. Make sure to keep your CSS lean, deliver it as quickly as
+possible, and use media types and queries to unblock rendering.
+
+In the [render tree construction](/critical-rendering-path-render-tree-construction/) we saw that the critical rendering path requires both the DOM and the CSSOM to construct the render tree. This creates an important performance implication: **both HTML and CSS are render blocking resources.** The HTML is obvious, since without the DOM we would not have anything to render, but the CSS requirement may be less obvious. What would happen if we try to render a typical page without blocking rendering on CSS?
+
+### Summary {: .hide-from-toc }
+
+- By default, CSS is treated as a render blocking resource.
+- Media types and media queries allow us to mark some CSS resources as non-render blocking.
+- The browser downloads all CSS resources, regardless of blocking or non-blocking behavior.
+
+<div class="switcher">
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/c3ZTThABrj7JQu5Xajaf.png", alt="NYTimes with CSS", width="300", height="552" %}
+  <figcaption>The New York Times with CSS</figcaption>
+</figure>
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/PYuJaMw0VGOq4im1LsCO.png", alt="NYTimes without CSS", width="300", height="552" %}
+  <figcaption>The New York Times without CSS (FOUC)</figcaption>
+</figure>
+</div>
+
+The above example, showing the NYTimes website with and without CSS, demonstrates why rendering is blocked until CSS is available---without CSS the page is relatively unusable. The experience on the right is often referred to as a "Flash of Unstyled Content" (FOUC). The browser blocks rendering until it has both the DOM and the CSSOM.
+
+> **_CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render._**
+
+However, what if we have some CSS styles that are only used under certain conditions, for example, when the page is being printed or being projected onto a large monitor? It would be nice if we didn’t have to block rendering on these resources.
+
+CSS "media types" and "media queries" allow us to address these use cases:
+
+```html
+<link href="style.css" rel="stylesheet" />
+<link href="print.css" rel="stylesheet" media="print" />
+<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
+```
+
+A [media query](../../design-and-ux/responsive/#use-css-media-queries-for-responsiveness) consists of a media type and zero or more expressions that check for the conditions of particular media features. For example, our first stylesheet declaration doesn't provide a media type or query, so it applies in all cases; that is to say, it is always render blocking. On the other hand, the second stylesheet declaration applies only when the content is being printed---perhaps you want to rearrange the layout, change the fonts, and so on, and hence this stylesheet declaration doesn't need to block the rendering of the page when it is first loaded. Finally, the last stylesheet declaration provides a "media query," which is executed by the browser: if the conditions match, the browser blocks rendering until the style sheet is downloaded and processed.
+
+By using media queries, we can tailor our presentation to specific use cases, such as display versus print, and also to dynamic conditions such as changes in screen orientation, resize events, and more. **When declaring your style sheet assets, pay close attention to the media type and queries; they greatly impact critical rendering path performance.**
+
+Let's consider some hands-on examples:
+
+```html
+<link href="style.css" rel="stylesheet" />
+<link href="style.css" rel="stylesheet" media="all" />
+<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
+<link href="print.css" rel="stylesheet" media="print" />
+```
+
+- The first declaration is render blocking and matches in all conditions.
+- The second declaration is also render blocking: "all" is the default type so if you don’t specify any type, it’s implicitly set to "all". Hence, the first and second declarations are actually equivalent.
+- The third declaration has a dynamic media query, which is evaluated when the page is loaded. Depending on the orientation of the device while the page is loading, portrait.css may or may not be render blocking.
+- The last declaration is only applied when the page is being printed so it is not render blocking when the page is first loaded in the browser.
+
+Finally, note that "render blocking" only refers to whether the browser has to hold the initial rendering of the page on that resource. In either case, the browser still downloads the CSS asset, albeit with a lower priority for non-blocking resources.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path-render-tree-construction/index.md b/src/site/content/en/blog/critical-rendering-path-render-tree-construction/index.md
new file mode 100644
index 00000000000..38326ca759e
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path-render-tree-construction/index.md
@@ -0,0 +1,104 @@
+---
+title: Render-tree Construction, Layout, and Paint
+description: >
+  TODO
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+The CSSOM and DOM trees are combined into a render tree, which is then used
+to compute the layout of each visible element and serves as an input to the
+paint process that renders the pixels to screen. Optimizing each of these
+steps is critical to achieving optimal rendering performance.
+
+In the previous section on constructing the object model, we built the DOM and
+the CSSOM trees based on the HTML and CSS input. However, both of these are
+independent objects that capture different aspects of the document: one
+describes the content, and the other describes the style rules that need to be
+applied to the document. How do we merge the two and get the browser to render
+pixels on the screen?
+
+### Summary {: .hide-from-toc }
+
+- The DOM and CSSOM trees combine to form the render tree.
+- Render tree contains only the nodes required to render the page.
+- Layout computes the exact position and size of each object.
+- The last step is paint, which takes in the final render tree and renders the pixels to the screen.
+
+First, the browser combines the DOM and CSSOM into a "render tree," which captures all the visible DOM content on the page and all the CSSOM style information for each node.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/b6Z2Gu6UD1x1imOu1tJV.png", alt="DOM and CSSOM are combined to create the render tree", width="800", height="374" %}
+
+To construct the render tree, the browser roughly does the following:
+
+1. Starting at the root of the DOM tree, traverse each visible node.
+
+   - Some nodes are not visible (for example, script tags, meta tags, and so on), and are omitted since they are not reflected in the rendered output.
+   - Some nodes are hidden via CSS and are also omitted from the render tree; for example, the span node---in the example above---is missing from the render tree because we have an explicit rule that sets the "display: none" property on it.
+
+1. For each visible node, find the appropriate matching CSSOM rules and apply them.
+1. Emit visible nodes with content and their computed styles.
+
+{% Aside %}
+As a brief aside, note that `visibility: hidden` is different from `display: none`. The former makes the element invisible, but the element still occupies space in the layout (that is, it's rendered as an empty box), whereas the latter (`display: none`) removes the element entirely from the render tree such that the element is invisible and is not part of the layout.
+{% endAside %}
+
+The final output is a render tree that contains both the content and style information of all the visible content on the screen. **With the render tree in place, we can proceed to the "layout" stage.**
+
+Up to this point we've calculated which nodes should be visible and their computed styles, but we have not calculated their exact position and size within the [viewport](/web/fundamentals/design-and-ux/responsive/#set-the-viewport) of the device---that's the "layout" stage, also known as "reflow."
+
+To figure out the exact size and position of each object on the page, the browser begins at the root of the render tree and traverses it. Let's consider a simple, hands-on example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Critial Path: Hello world!</title>
+  </head>
+  <body>
+    <div style="width: 50%">
+      <div style="width: 50%">Hello world!</div>
+    </div>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/critical-rendering-path/nested.html)
+
+The body of the above page contains two nested div's: the first (parent) div sets the display size of the node to 50% of the viewport width, and the second div---contained by the parent---sets its width to be 50% of its parent; that is, 25% of the viewport width.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/IIr281DuPwRi9fiXhNg4.png", alt="Calculating layout information", width="616", height="281" %}
+
+The output of the layout process is a "box model," which precisely captures the exact position and size of each element within the viewport: all of the relative measurements are converted to absolute pixels on the screen.
+
+Finally, now that we know which nodes are visible, and their computed styles and geometry, we can pass this information to the final stage, which converts each node in the render tree to actual pixels on the screen. This step is often referred to as "painting" or "rasterizing."
+
+This can take some time because the browser has to do quite a bit of work. However, Chrome DevTools can provide some insight into all three of the stages described above. Let's examine the layout stage for our original "hello world" example:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/OHEypUdtsMQ9raPnW116.png", alt="Measuring layout in DevTools", width="766", height="180" %}
+
+- The "Layout" event captures the render tree construction, position, and size calculation in the Timeline.
+- When layout is complete, the browser issues "Paint Setup" and "Paint" events, which convert the render tree to pixels on the screen.
+
+The time required to perform render tree construction, layout and paint varies based on the size of the document, the applied styles, and the device it is running on: the larger the document, the more work the browser has; the more complicated the styles, the more time taken for painting also (for example, a solid color is "cheap" to paint, while a drop shadow is "expensive" to compute and render).
+
+The page is finally visible in the viewport:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/H9mc9hE33imsdh7TfCgm.png", alt="Rendered Hello World page", width="717", height="370" %}
+
+Here's a quick recap of the browser's steps:
+
+1. Process HTML markup and build the DOM tree.
+1. Process CSS markup and build the CSSOM tree.
+1. Combine the DOM and CSSOM into a render tree.
+1. Run layout on the render tree to compute geometry of each node.
+1. Paint the individual nodes to the screen.
+
+Our demo page may look simple, but it requires quite a bit of work. If either the DOM or CSSOM were modified, you would have to repeat the process in order to figure out which pixels would need to be re-rendered on the screen.
+
+**_Optimizing the critical rendering path_ is the process of minimizing the total amount of time spent performing steps 1 through 5 in the above sequence.** Doing so renders content to the screen as quickly as possible and also reduces the amount of time between screen updates after the initial render; that is, achieve higher refresh rates for interactive content.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/critical-rendering-path/index.md b/src/site/content/en/blog/critical-rendering-path/index.md
new file mode 100644
index 00000000000..eac550d4560
--- /dev/null
+++ b/src/site/content/en/blog/critical-rendering-path/index.md
@@ -0,0 +1,54 @@
+---
+layout: post
+title: Critical Rendering Path
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+description: >
+  Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
+---
+
+_Optimizing the critical rendering path_ refers to prioritizing the display of
+content that relates to the current user action.
+
+Delivering a fast web experience requires a lot of work by the browser. Most of
+this work is hidden from us as web developers: we write the markup, and a nice
+looking page comes out on the screen. But how exactly does the browser go from
+consuming our HTML, CSS, and JavaScript to rendered pixels on the screen?
+
+Optimizing for performance is all about understanding what happens in these
+intermediate steps between receiving the HTML, CSS, and JavaScript bytes and
+the required processing to turn them into rendered pixels - that's
+the **critical rendering path**.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/yIiIUEYItai4zX07ZJda.png", alt="progressive page rendering", width="611", height="300" %}
+
+By optimizing the critical rendering path we can significantly improve the
+time to first render of our pages. Further, understanding the critical
+rendering path also serves as a foundation for building well-performing
+interactive applications. The interactive updates process is the same, just done in a continuous loop and ideally at 60 frames per second!
+But first, an overview of how the browser displays a simple page.
+
+## Critical Rendering Path
+
+You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.
+You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living,
+breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first
+pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer
+Tools to find the data you need to achieve immediate performance boosts!
+
+This is a free course offered through [Udacity](https://www.udacity.com/course/website-performance-optimization--ud884).
+
+## Additional resources
+
+- [Constructing the Object Model](/critical-rendering-path-constructing-the-object-model/)
+- [Render-tree Construction, Layout, and Paint](/critical-rendering-path-render-tree-construction/)
+- [Render Blocking CSS](/critical-rendering-path-render-blocking-css/)
+- [Adding Interactivity with JavaScript](/critical-rendering-path-adding-interactivity-with-javascript/)
+- [Measuring the Critical Rendering Path](/critical-rendering-path-measure-crp/)
+- [Analyzing Critical Rendering Path Performance](/critical-rendering-path-analyzing-crp/)
+- [Optimizing the Critical Rendering Path](/critical-rendering-path-optimizing-critical-rendering-path/)
+- [PageSpeed Rules and Recommendations](/critical-rendering-path-page-speed-rules-and-recommendations/)
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/csp/index.md b/src/site/content/en/blog/csp/index.md
new file mode 100644
index 00000000000..3963f5767c3
--- /dev/null
+++ b/src/site/content/en/blog/csp/index.md
@@ -0,0 +1,552 @@
+---
+title: Content security policy
+subhead: Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.
+date: 2012-06-15
+updated: 2020-06-19
+authors:
+  - mikewest
+  - joemedley
+description: Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.
+tags:
+  - blog
+---
+
+The web's security model is rooted in the
+[_same-origin policy_](//en.wikipedia.org/wiki/Same-origin_policy). Code
+from `https://mybank.com` should only have access to `https://mybank.com`'s
+data, and `https://evil.example.com` should certainly never be allowed access.
+Each origin is kept isolated from the rest of the web, giving developers a safe
+sandbox in which to build and play. In theory, this is perfectly brilliant. In
+practice, attackers have found clever ways to subvert the system.
+
+[Cross-site scripting (XSS)](//en.wikipedia.org/wiki/Cross-site_scripting)
+attacks, for example, bypass the same origin policy by tricking a site into
+delivering malicious code along with the intended content. This is a huge
+problem, as browsers trust all of the code that shows up on a page as being
+legitimately part of that page's security origin. The
+[XSS Cheat Sheet](https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet)
+is an old but representative cross-section of the methods an attacker might use
+to violate this trust by injecting malicious code. If an attacker successfully
+injects _any_ code at all, it's pretty much game over: user session data is
+compromised and information that should be kept secret is exfiltrated to The Bad
+Guys. We'd obviously like to prevent that if possible.
+
+This overview highlights a defense that can significantly reduce the risk and
+impact of XSS attacks in modern browsers: Content Security Policy (CSP).
+
+## Summary
+* Use allowlists to tell the client what's allowed and what isn't.
+* Learn what directives are available.
+* Learn the keywords they take.
+* Inline code and `eval()` are considered harmful.
+* Report policy violations to your server before enforcing them.
+
+## Source allowlists
+
+The issue exploited by XSS attacks is the browser's inability to distinguish
+between script that's part of your application and script that's been
+maliciously injected by a third-party. For example, the Google +1 button at the
+bottom of this page loads and executes code from
+`https://apis.google.com/js/plusone.js` in the context of this page's origin. We
+trust that code, but we can't expect the browser to figure out on its own that code
+from `apis.google.com` is awesome, while code from `apis.evil.example.com`
+probably isn't. The browser happily downloads and executes any code a page
+requests, regardless of source.
+
+Instead of blindly trusting _everything_ that a server delivers, CSP defines the
+`Content-Security-Policy` HTTP header, which allows you to create an allowlist of
+sources of trusted content, and instructs the browser to only execute or render
+resources from those sources. Even if an attacker can find a hole through which
+to inject script, the script won't match the allowlist, and therefore won't be
+executed.
+
+Since we trust `apis.google.com` to deliver valid code, and we trust ourselves
+to do the same, let's define a policy that only allows script to execute when it
+comes from one of those two sources:
+
+```http
+Content-Security-Policy: script-src 'self' https://apis.google.com
+```
+
+Simple, right? As you probably guessed, `script-src` is a directive that
+controls a set of script-related privileges for a specific page. We've specified
+`'self'` as one valid source of script, and `https://apis.google.com` as
+another. The browser dutifully downloads and executes JavaScript from
+`apis.google.com` over HTTPS, as well as from the current page's origin.
+
+<div class="attempt-right">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RSnKHpls9RiDnnSGxMlE.png", alt="Console error: Refused to load the script 'http://evil.example.com/evil.js' because it violates the following Content Security Policy directive: script-src 'self' https://apis.google.com", width="709", height="173" %}
+  </figure>
+</div>
+
+With this policy defined, the browser simply throws an error instead of
+loading script from any other source. When a clever attacker manages to
+inject code into your site, they'll run headlong into an error message rather
+than the success they were expecting.
+
+### Policy applies to a wide variety of resources
+
+While script resources are the most obvious security risks, CSP provides a rich
+set of policy directives that enable fairly granular control over the resources
+that a page is allowed to load. You've already seen `script-src`, so the concept
+should be clear.
+
+Let's quickly walk through the rest of the resource directives. The list below
+represents the state of the directives as of level 2. A [level 3
+spec](https://www.w3.org/TR/CSP3/) has been published, but is [largely
+unimplemented](https://www.chromestatus.com/features#csp3) in the major
+browsers.
+
+* **`base-uri`** restricts the URLs that can appear in a page's `<base>` element.
+* **`child-src`** lists the URLs for workers and embedded frame contents. For
+  example: `child-src https://youtube.com` would enable embedding videos from
+  YouTube but not from other origins.
+* **`connect-src`** limits the origins that you can connect to (via XHR,
+  WebSockets, and EventSource).
+* **`font-src`** specifies the origins that can serve web fonts. Google's web
+fonts could be enabled via `font-src https://themes.googleusercontent.com`.
+* **`form-action`** lists valid endpoints for submission from `<form>` tags.
+* **`frame-ancestors`**  specifies the sources that can embed the current page.
+This directive applies to `<frame>`, `<iframe>`, `<embed>`, and `<applet>` tags.
+This directive can't be used in `<meta>` tags and applies only to non-HTML
+resources.
+* **`frame-src`** was deprecated in level 2, but is restored in level 3. If not
+present it still falls back to  `child-src` as before.
+* **`img-src`** defines the origins from which images can be loaded.
+* **`media-src`** restricts the origins allowed to deliver video and audio.
+* **`object-src`** allows control over Flash and other plugins.
+* **`plugin-types`** limits the kinds of plugins a page may invoke.
+* **`report-uri`** specifies a URL where a browser will send reports when a
+content security policy is violated. This directive can't be used in `<meta>`
+tags.
+* **`style-src`** is `script-src`'s counterpart for stylesheets.
+* **`upgrade-insecure-requests`** instructs user agents to rewrite URL schemes,
+changing HTTP to HTTPS. This directive is for websites with large numbers of
+old    URL's that need to be rewritten.
+* **`worker-src`** is a CSP Level 3 directive that restricts the URLs that may
+be loaded as a worker, shared worker, or service worker. As of July 2017, this
+directive has
+[limited implementations](https://www.chromestatus.com/features/5922594955984896).
+
+By default, directives are wide open. If you don't set a specific policy for a
+directive, let's say `font-src`, then that directive behaves by default as
+though you'd specified `*` as the valid source (for example, you could load fonts from
+anywhere, without restriction).
+
+You can override this default behavior by specifying a **`default-src`**
+directive. This directive defines the defaults for most
+directives that you leave unspecified. Generally, this applies to any directive that
+ends with `-src`. If `default-src` is set to `https://example.com`, and you fail
+to specify a `font-src` directive, then you can load fonts from
+`https://example.com`, and nowhere else. We specified only `script-src` in our
+earlier examples, which means that images, fonts, and so on can be loaded from
+any origin.
+
+The following directives don't use `default-src` as a fallback. Remember that
+failing to set them is the same as allowing anything.
+
+* `base-uri`
+* `form-action`
+* `frame-ancestors`
+* `plugin-types`
+* `report-uri`
+* `sandbox`
+
+You can use as many or as few of these directives as makes sense for your
+specific application, simply listing each in the HTTP header, separating
+directives with semicolons. Make sure that you list _all_
+required resources of a specific type in a _single_ directive. If you wrote
+something like `script-src https://host1.com; script-src https://host2.com` the
+second directive would simply be ignored. Something like the following would
+correctly specify both origins as valid:
+
+```http
+script-src https://host1.com https://host2.com
+```
+
+If, for example, you have an application that loads all of its resources from a
+content delivery network (say, `https://cdn.example.net`), and know that you
+don't need any framed content or plugins, then your policy might look something
+like the following:
+
+```http
+Content-Security-Policy: default-src https://cdn.example.net; child-src 'none'; object-src 'none'
+```
+
+### Implementation details
+
+You will see `X-WebKit-CSP` and `X-Content-Security-Policy` headers in various
+tutorials on the web. Going forward, you should ignore these prefixed
+headers. Modern browsers (with the exception of IE) support the unprefixed
+`Content-Security-Policy` header. That's the header you should use.
+
+Regardless of the header you use, policy is defined on a page-by-page basis:
+you'll need to send the HTTP header along with every response that you'd like to
+ensure is protected. This provides a lot of flexibility, as you can fine-tune
+the policy for specific pages based on their specific needs. Perhaps one set of
+pages in your site has a +1 button, while others don't: you could allow the
+button code to be loaded only when necessary.
+
+The source list in each directive is flexible. You can specify sources by
+scheme (`data:`, `https:`), or ranging in specificity from hostname-only
+(`example.com`, which matches any origin on that host: any scheme, any port) to
+a fully qualified URI (`https://example.com:443`, which matches only HTTPS, only
+`example.com`, and only port 443). Wildcards are accepted, but only as a scheme,
+a port, or in the leftmost position of the hostname: `*://*.example.com:*` would
+match all subdomains of `example.com` (but _not_ `example.com` itself), using
+any scheme, on any port.
+
+The source list also accepts four keywords:
+
+* **`'none'`**, as you might expect, matches nothing.
+* **`'self'`** matches the current origin, but not its subdomains.
+* **`'unsafe-inline'`** allows inline JavaScript and CSS. (We'll touch on this in
+  more detail in a bit.)
+* **`'unsafe-eval'`** allows text-to-JavaScript mechanisms like `eval`. (We'll get
+  to this too.)
+
+These keywords require single-quotes. For example, `script-src 'self'` (with quotes)
+authorizes the execution of JavaScript from the current host; `script-src self`
+(no quotes) allows JavaScript from a server named "`self`" (and _not_ from the
+current host), which probably isn't what you meant.
+
+### Sandboxing
+
+There's one more directive worth talking about: `sandbox`. It's a bit
+different from the others we've looked at, as it places restrictions on actions that
+the page can take rather than on resources that the page can load. If the
+`sandbox` directive is present, the page is treated as though it was loaded
+inside of an `<iframe>` with a `sandbox` attribute. This can have a wide range of
+effects on the page: forcing the page into a unique origin, and preventing form
+submission, among others. It's a bit beyond the scope of this article, but you
+can find full details on valid sandboxing attributes in the
+["Sandboxing" section of the HTML5 spec](https://html.spec.whatwg.org/dev/origin.html#sandboxing).
+
+### The meta tag
+
+CSPs preferred delivery mechanism is an HTTP header. It can be useful, however,
+to set a policy on a page directly in the markup. Do that using a `<meta>` tag with
+an `http-equiv` attribute:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">
+```
+
+This can't be used for `frame-ancestors`, `report-uri`, or `sandbox`.
+
+## Inline code is considered harmful
+
+It should be clear that CSP is based on allowlist origins, as that's an
+unambiguous way of instructing the browser to treat specific sets of resources
+as acceptable and to reject the rest. Origin-based allowlists don't,
+however, solve the biggest threat posed by XSS attacks: inline script injection.
+If an attacker can inject a script tag that directly contains some malicious
+payload (`<script>sendMyDataToEvilDotCom()</script>`),
+the browser has no mechanism by which to distinguish it from a legitimate
+inline script tag. CSP solves this problem by banning inline script entirely:
+it's the only way to be sure.
+
+
+This ban includes not only scripts embedded directly in `script` tags, but also
+inline event handlers and `javascript:` URLs. You'll need to move the content of
+`script` tags into an external file, and replace `javascript:` URLs and `<a ...
+onclick="[JAVASCRIPT]">` with appropriate `addEventListener()` calls. For example,
+you might rewrite the following from:
+
+```html
+<script>
+    function doAmazingThings() {
+    alert('YOU AM AMAZING!');
+    }
+</script>
+<button onclick='doAmazingThings();'>Am I amazing?</button>
+```
+
+to something more like:
+
+```html
+<!-- amazing.html -->
+<script src='amazing.js'></script>
+<button id='amazing'>Am I amazing?</button>
+```
+
+```js
+// amazing.js
+function doAmazingThings() {
+    alert('YOU AM AMAZING!');
+}
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('amazing')
+    .addEventListener('click', doAmazingThings);
+});
+```
+
+The rewritten code has a number of advantages above and beyond working well with
+CSP; it's already best practice, regardless of your use of CSP. Inline
+JavaScript mixes structure and behavior in exactly the way you shouldn't.
+External resources are easier for browsers to cache, more understandable for
+developers, and conducive to compilation and minification. You'll write better
+code if you do the work to move code into external resources.
+
+Inline style is treated in the same way: both the `style` attribute and `style`
+tags should be consolidated into external stylesheets to protect against a
+variety of [surprisingly
+clever](https://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html)
+data exfiltration methods that CSS enables.
+
+If you must have inline script and style, you can enable it
+by adding `'unsafe-inline'` as an allowed source in a `script-src` or `style-src`
+directive. You can also use a nonce or a hash (see below), but you really shouldn't.
+Banning inline script is the biggest security win CSP provides, and
+banning inline style likewise hardens your application. It's a little bit of
+effort up front to ensure that things work correctly after moving all the code
+out-of-line, but that's a tradeoff that's well worth making.
+
+### If you absolutely must use it
+
+CSP Level 2 offers backward compatibility for inline scripts by allowing you to
+add specific inline scripts to the allowlist using either a cryptographic nonce (number
+used once) or a hash. Although this may be cumbersome, it is useful
+in a pinch.
+
+To use a nonce, give your script tag a nonce attribute. Its value must match one
+in the list of trusted sources. For example:
+
+```html
+<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
+    // Some inline code I can't remove yet, but need to asap.
+</script>
+```
+
+Now, add the nonce to your `script-src` directive appended to the `nonce-` keyword.
+
+```http
+Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
+```
+
+Remember that nonces must be regenerated for every page request and they must be
+unguessable.
+
+Hashes work in much the same way. Instead of adding code to the script tag,
+create a SHA hash of the script itself and add it to the `script-src` directive.
+For example, let's say your page contained this:
+
+```html
+<script>alert('Hello, world.');</script>
+```
+
+Your policy would contain this:
+
+```http
+Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
+```
+
+There are a few things to note here. The `sha*-` prefix specifies the algorithm
+that generates the hash. In the example above, `sha256-` is used. CSP also
+supports `sha384-` and `sha512-`. When generating the hash, do not include the
+`<script>` tags. Also capitalization and whitespace matter, including leading or
+trailing whitespace.
+
+A Google search on generating SHA hashes will lead you to solutions in any
+number of languages. Using Chrome 40 or later, you can open DevTools and then
+reload your page. The Console tab will contain error messages with the correct
+sha256 hash for each of your inline scripts.
+
+## Eval too
+
+Even when an attacker can't inject script directly, they might be able to trick
+your application into converting otherwise inert text into executable JavaScript
+and executing it on their behalf. `eval()`, `new Function()`, `setTimeout([string], …)`, and
+`setInterval([string], ...)` are all vectors through which injected
+text might end up executing something unexpectedly malicious. CSP's default
+response to this risk is to completely block all of these vectors.
+
+
+This has more than a few impacts on the way you build applications:
+
+*   You must parse JSON via the built-in `JSON.parse`, rather than relying on
+    `eval`. Native JSON operations are available in
+    [every browser since IE8](https://caniuse.com/#feat=json), and they're
+    completely safe.
+*   Rewrite any `setTimeout` or `setInterval` calls you're currently making
+    with inline functions rather than strings. For example:
+
+```js
+setTimeout("document.querySelector('a').style.display = 'none';", 10);
+```
+
+would be better written as:
+
+```js
+setTimeout(function () {
+    document.querySelector('a').style.display = 'none';
+}, 10);
+```
+
+*   Avoid inline templating at runtime: Many templating libraries use `new
+    Function()` liberally to speed up template generation at runtime. It's a
+    nifty application of dynamic programming, but comes at the risk of
+    evaluating malicious text. Some frameworks support CSP out of the box,
+    falling back to a robust parser in the absence of `eval`.
+    [AngularJS's ng-csp directive](https://docs.angularjs.org/api/ng/directive/ngCsp)
+    is a good example of this.
+
+However, a better choice would be a templating language that offers
+precompilation ([Handlebars does](https://handlebarsjs.com/installation/precompilation.html),
+for instance). Precompiling your templates can make the user experience even
+faster than the fastest runtime implementation, and it's safer too.  If eval and
+its text-to-JavaScript brethren are essential to your application, you can
+enable them by adding `'unsafe-eval'` as an allowed source in a `script-src`
+directive, but we strongly discourage this. Banning the ability to execute
+strings makes it much more difficult for an attacker to execute unauthorized
+code on your site.
+
+## Reporting
+
+
+CSP's ability to block untrusted resources client-side is a huge win for your
+users, but it would be quite helpful to have some sort of notification
+sent back to the server so that you can identify and squash any bugs that allow
+malicious injection in the first place. To this end, you can instruct the
+browser to `POST` JSON-formatted violation reports to a location
+specified in a `report-uri` directive.
+
+```http
+Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
+```
+
+Those reports will look something like the following:
+
+```json
+{
+    "csp-report": {
+    "document-uri": "http://example.org/page.html",
+    "referrer": "http://evil.example.com/",
+    "blocked-uri": "http://evil.example.com/evil.js",
+    "violated-directive": "script-src 'self' https://apis.google.com",
+    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
+    }
+}
+```
+
+
+This contains a good chunk of information that will help you track down the
+specific cause of the violation, including the page on which the violation
+occurred (`document-uri`), that page's referrer (note that unlike the HTTP
+header field, the key is _not_ misspelled), the resource that violated the
+page's policy (`blocked-uri`), the specific directive it violated
+(`violated-directive`), and the page's complete policy (`original-policy`).
+
+### Report-Only
+
+If you're just starting out with CSP, it makes sense to evaluate the current
+state of your application before rolling out a draconian policy to your users.
+As a stepping stone to a complete deployment, you can ask the browser to monitor
+a policy, reporting violations but not enforcing the restrictions. Instead of
+sending a `Content-Security-Policy` header, send a
+`Content-Security-Policy-Report-Only` header.
+
+```http
+Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
+```
+
+The policy specified in report-only mode won't block restricted resources, but
+it will send violation reports to the location you specify. You can even send
+_both_ headers, enforcing one policy while monitoring another. This is a great
+way to evaluate the effect of changes to your application's CSP: turn on
+reporting for a new policy, monitor the violation reports and fix any bugs that
+turn up; when you're satisfied with its effect, start enforcing the new policy.
+
+
+## Real World Usage
+
+CSP 1 is quite usable in Chrome, Safari, and Firefox, but has very limited
+support in IE 10. You can [view specifics at caniuse.com](https://caniuse.com/#feat=contentsecuritypolicy). CSP Level 2 has been available in Chrome since
+version 40. Massive sites like Twitter and Facebook have deployed the header
+([Twitter's
+case study](https://blog.twitter.com/engineering/en_us/a/2011/improving-browser-security-with-csp.html) is worth a read), and the standard is very much ready
+for you to start deploying on your own sites.
+
+The first step towards crafting a policy for your application is to evaluate the
+resources you're actually loading. Once you think you have a handle on how
+things are put together in your app, set up a policy based on those
+requirements. Let's walk through a few common use cases and determine how we'd
+best be able to support them within the protective confines of CSP.
+
+### Use case #1: social media widgets
+
+* Facebook's [Like button](//developers.facebook.com/docs/plugins/like-button){: .external }
+has a number of implementation options. We recommend sticking with the
+`<iframe>` version as it's safely sandboxed from the rest of your site. It
+requires a `child-src https://facebook.com` directive to function properly. Note
+that, by default, the `<iframe>` code that Facebook provides loads a relative
+URL, `//facebook.com`. Change that to explicitly specify HTTPS:
+`https://facebook.com`. There's no reason to use HTTP if you don't have to.
+
+* Twitter's [Tweet button](https://publish.twitter.com/#)
+relies on access to a script and a frame, both hosted at
+`https://platform.twitter.com`. (Twitter likewise provides a relative URL by
+default; edit the code to specify HTTPS when copy/pasting it locally.)
+You'll be all set with `script-src https://platform.twitter.com; child-src
+https://platform.twitter.com`, as long as you move the JavaScript snippet
+that Twitter provides out into an external JavaScript file.
+
+* Other platforms have similar requirements, and can be addressed similarly.
+We suggest just setting a `default-src` of `'none'`, and watching your console to
+determine which resources you'll need to enable to make the widgets work.
+
+Including multiple widgets is straightforward: simply combine the policy
+directives, remembering to merge all resources of a single type into a single
+directive. If you wanted all three social media widgets, the policy would look
+like this:
+
+```http
+script-src https://apis.google.com https://platform.twitter.com; child-src https://plusone.google.com https://facebook.com https://platform.twitter.com
+```
+
+### Use case #2: lockdown
+
+Assume for a moment that you run a banking site and want to make sure that
+only those resources you've written yourself can be loaded. In this scenario,
+start with a default policy that blocks absolutely everything (`default-src
+'none'`), and build up from there.
+
+Let's say the bank loads all images, style, and script from a CDN at
+`https://cdn.mybank.net`, and connects via XHR to `https://api.mybank.com/` to
+pull various bits of data down. Frames are used, but only for pages local to the
+site (no third-party origins). There's no Flash on the site, no fonts, no
+extras. The most restrictive CSP header that we could send is this:
+
+```http
+Content-Security-Policy: default-src 'none'; script-src https://cdn.mybank.net; style-src https://cdn.mybank.net; img-src https://cdn.mybank.net; connect-src https://api.mybank.com; child-src 'self'
+```
+
+### Use case #3: SSL only
+
+A wedding-ring discussion forum admin wants to ensure that all resources are
+only loaded via secure channels, but doesn't really write much code; rewriting
+large chunks of the third-party forum software that's filled to the brim with
+inline script and style is beyond his abilities. The following policy would be
+effective:
+
+```http
+Content-Security-Policy: default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'
+```
+
+Even though `https:` is specified in `default-src`, the script and style
+directives don't automatically inherit that source. Each directive completely
+overwrites the default for that specific type of resource.
+
+## The future
+
+
+Content Security Policy Level 2 is a
+[Candidate Recommendation](https://www.w3.org/TR/CSP2/). The W3C's Web Application Security Working Group
+has already begun work on the specification's next iteration,
+[Content Security Policy Level 3](https://www.w3.org/TR/CSP3/).
+
+
+If you're interested in the discussion around these upcoming features,
+[skim the public-webappsec@ mailing list archives](http://lists.w3.org/Archives/Public/public-webappsec/),
+or join in yourself.
diff --git a/src/site/content/en/blog/css-animated-grid-layouts/index.md b/src/site/content/en/blog/css-animated-grid-layouts/index.md
new file mode 100644
index 00000000000..a9a29cba684
--- /dev/null
+++ b/src/site/content/en/blog/css-animated-grid-layouts/index.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: CSS Animated Grid Layouts
+authors:
+  - bramus
+subhead: >
+  In CSS Grid, the `grid-template-columns` and `grid-template-rows` properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
+description: >
+  In CSS Grid, the `grid-template-columns` and `grid-template-rows` properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
+date: 2022-10-25
+hero: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/DBUXaF63Cw1X5wMlI7Jh.jpg
+alt: Two people in a museum watching a Mondrian painting.
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% endAside %}
+
+{% BrowserCompat 'css.properties.grid-template-columns.animation' %}
+
+## Value Interpolation in CSS
+
+In CSS you can smoothly transition properties from one value to the other using the `transition` property.
+
+```css
+#target {
+  opacity: 0.5;
+  transition: opacity ease-in-out 0.25s;
+}
+
+#target:hover {
+  opacity: 1;
+}
+```
+
+The rendering engine will automatically detect the type of the targeted property’s value, and use that information to smoothly transition to the new value.
+
+For example:
+
+- Transitioning `opacity` from `0` to `1`?
+  That’s a numerical interpolation.
+- Transitioning `background-color` from `white` to `black`?
+  Fade between the source and target colors.
+- Transitioning `width`?
+  Interpolate numerically, converting units along the way if needed.
+
+The same applies to CSS animations, where the browser will do value interpolation between keyframes.
+
+{% Aside %}
+When using Custom Properties, [use `@property`](/at-property) to indicate which type they are. That way the browser knows how to transition from one value to the other.
+{% endAside %}
+
+## Interpolating `grid-template-columns` and `grid-template-rows`
+
+Thanks to our contributors at Microsoft, Chrome–as of version 107–is able to interpolate `grid-template-columns` and `grid-template-rows` values.
+
+Grid layouts can smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
+
+In the demo below a grid is showing several avatars. To conserve space, the avatars are laid out on top of each other by limiting the width of each column using `grid-template-columns`. On hover, each column is given more space.
+
+```css
+.avatars {
+  display: grid;
+  gap: 0.35em;
+
+  grid-auto-flow: column;
+  grid-template-columns: repeat(4, 2em);
+  transition: all ease-in-out 0.25s;
+}
+
+.avatars:hover {
+  grid-template-columns: repeat(4, 4em);
+}
+```
+
+With the `transition` property in place, the grid smoothly interpolates between values.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWqVowx',
+  height: 480,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+The effect also applies to animations that change the `grid-template-columns` or `grid-template-rows` values.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOxRdzw',
+  height: 780,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+Photo by [Ernest Ojeh](https://unsplash.com/@namzo) on [Unsplash](https://unsplash.com/photos/rTpPZD9PAk4)
diff --git a/src/site/content/en/blog/css-border-animations/index.md b/src/site/content/en/blog/css-border-animations/index.md
new file mode 100644
index 00000000000..d2d5349296f
--- /dev/null
+++ b/src/site/content/en/blog/css-border-animations/index.md
@@ -0,0 +1,231 @@
+---
+layout: post
+title: CSS border animations
+subhead: >
+  Looking at several ways to animate a border in CSS
+description: >
+  Looking at several ways to animate a border in CSS
+authors:
+  - bramus
+tags:
+  - blog
+hero: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/kVAIT4nxP83ePx2QhEgW.png
+date: 2022-08-01
+---
+
+## Setting borders
+
+There are a few methods available to set a border on an element: `border`, `outline`, and `box-shadow`. As detailed in [The 3 CSS Methods for Adding Element Borders](https://moderncss.dev/the-3-css-methods-for-adding-element-borders/) by Stephanie Eckles, each approach comes with its own advantages and disadvantages–especially when it comes to animating the borders. The main reason to not use a proper CSS `border` is for animation purposes.
+
+<figure>
+  {% Codepen {
+    user: 'kevinpowell',
+    id: 'LYRBxQQ',
+    height: 585,
+    tab: 'result'
+  } %}
+  <figcaption>Border Animations using <code>outline-offset</code> by Kevin J. Powell</figcaption>
+</figure>
+
+An article that recently caught my attention is [Fantastic CSS border animation](https://dev.to/chokcoco/fantastic-css-border-animation-5166), where author Coco explored more options. By injecting [generated content](https://developer.mozilla.org/docs/Web/CSS/CSS_Generated_Content) using `::before` and `::after` they create a faux border which is then animated.
+
+What stands out the most to me are the supporting animated visualizations used in the article. They really help explain what exactly is being done to achieve the desired effect.
+
+<figure>
+{% Codepen {
+  user: 'Chokcoco',
+  id: 'YzGdEMZ',
+  height: 485,
+  tab: 'result'
+} %}
+  <figcaption>Border Animations using generated content by Coco</figcaption>
+</figure>
+
+Both the white layer and colored lines are generated content. By fading the white layer in and out, it becomes clear how they stack and how the animation works.
+
+## Retaining the box model
+
+A disadvantage of using Generated Content to imitate a border is that you end up with a broken [box model](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/The_box_model): the content can now obscure the faux border because said “border” is painted underneath. To mitigate, you have to apply the desired `border-width` as the `padding`.
+
+To have a true border–and thus retain the workings of the box model–you can use [multiple backgrounds](https://developer.mozilla.org/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) which you then stretch out into the border area.
+
+### The basics
+
+Let’s start by creating a dotted border and adding the multiple backgrounds.
+
+```css
+/* Size of the border */
+--border-size: 0.5rem;
+
+/* Create a dotted border */
+border: var(--border-size) dotted lime;
+
+/* Create two background layers:
+   1. A white semi-transparent
+   2. A layer with the colored boxes
+ */
+background-image:
+  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),
+
+  conic-gradient(
+    from 45deg,
+    #d53e33 0deg 90deg,
+    #fbb300 90deg 180deg,
+    #377af5 180deg 270deg,
+    #399953 270deg 360deg
+  )
+;
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dymZzyZ',
+  height: 485,
+  tab: 'result'
+} %}
+
+### Sizing the backgrounds with `background-origin`
+
+As you can see there is something funny going on with the backgrounds here: they are painted into the border, but the `conic-gradient` seems to be all wrong. This is actually intended behavior: by default background images do not draw into the border as their origin is the `padding-box` of the element. To create a border after all, the set background images are repeated in the border itself, yielding the weird visual effect.
+
+To solve this problem, you need to stretch out the background so it also occupies the size of the border. You could do this manually by stretching and repositioning the background, but best is to use the [`background-origin`](https://developer.mozilla.org/docs/Web/CSS/background-origin) property to size the background against the `border-box`.
+
+{% BrowserCompat 'css.properties.background-origin' %}
+
+{% Compare 'worse' %}
+```css
+/* Manually add or offset the size of the border where needed */
+background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
+background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+background-origin: border-box;
+```
+{% endCompare %}
+
+This one addition makes everything look much better:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWVOvYa',
+  height: 485,
+  tab: 'result'
+} %}
+
+### Shrinking the white background layer with `background-clip`
+
+With the backgrounds taking up all the space now, the semi-transparent layer needs to be shrunk down again. Instead of fiddling with `background-size` again, there is an easier way to do so: use [`background-clip`](https://developer.mozilla.org/docs/Web/CSS/background-clip) and set it to `padding-box`. That way the background is no longer drawn underneath the area of the border.
+
+{% BrowserCompat 'css.properties.background-clip' %}
+
+```css
+background-clip:
+  padding-box, /* Clip white semi-transparent to the padding-box */
+  border-box /* Clip colored boxes to the border-box (default) */
+;
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjLOyoJ',
+  height: 785,
+  tab: 'result'
+} %}
+
+Finally, make the border `transparent` to have the full effect.
+
+```css
+border: 0.3rem dotted transparent;
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdxqMyj',
+  height: 485,
+  tab: 'result'
+} %}
+
+### Animation
+
+To restore animation of the border, you can manipulate the start angle of the `conic-gradient`.
+
+```css
+--angle: 0deg;
+conic-gradient(
+  from var(--angle),
+  #d53e33 0deg 90deg,
+  #fbb300 90deg 180deg,
+  #377af5 180deg 270deg,
+  #399953 270deg 360deg
+);
+```
+
+Thanks to [@property](/at-property) this becomes a breeze in browsers that support it:
+
+{% BrowserCompat 'css.at-rules.property' %}
+
+```css
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}
+```
+
+All combined, the code becomes this:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BarmdyM',
+  height: 485,
+  tab: 'result'
+} %}
+
+## Bonus Content: `border-image`
+
+A [previously covered](/conic-gradient-border/) approach to draw a gradient border is to use CSS [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image).
+
+{% BrowserCompat 'css.properties.border-image' %}
+
+It allows for more simplified code as you do not need to deal with overlapping backgrounds. Animation can be applied in the same manner as before.
+
+```css
+/* Create a border */
+border: 0.5rem solid transparent;
+
+/* Paint an image in the border */
+border-image:
+  conic-gradient(
+    from var(--angle),
+    #d53e33 0deg 90deg,
+    #fbb300 90deg 180deg,
+    #377af5 180deg 270deg,
+    #399953 270deg 360deg
+  ) 1
+;
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNqoeXo',
+  height: 485,
+  tab: 'result'
+} %}
+
+However, you’ll notice a few things no longer work with this approach:
+
+- The `border-image` does not follow the `border-radius`; it will always remain rectangular.
+- When setting `border-image-slice` to fill, the `border-image` is not painted underneath the set `background` but on top. This can be troublesome if you want the background to be semi-transparent.
+
+## In closing
+
+There’s a multitude of possibilities to animate borders in CSS. Depending on the use-case, you might lean into one or the other.
diff --git a/src/site/content/en/blog/css-clipping/index.md b/src/site/content/en/blog/css-clipping/index.md
new file mode 100644
index 00000000000..931fe689d0c
--- /dev/null
+++ b/src/site/content/en/blog/css-clipping/index.md
@@ -0,0 +1,230 @@
+---
+title: Create interesting image shapes with CSS's clip-path property
+subhead: >
+  Using clipping in CSS can help us move away from everything in our designs looking like a box.
+  By using various basic shapes, or an SVG, you can create a clip path.
+  Then cut away the parts of an element you don't want to show.
+description: >
+  Using clipping in CSS can help us move away from everything in our designs looking like a box.
+  By using various basic shapes, or an SVG, you can create a clip path.
+  Then cut away the parts of an element you don't want to show.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/Pl4AScfj5y8ovHD1pi64.jpg
+alt: Scissors hanging on a wall.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+Elements on web pages are all defined inside a rectangular box.
+However that doesn't mean that we have to make everything look like a box.
+You can use the CSS `clip-path` property to clip away parts of an image or other element,
+to create interesting effects.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path?path=README.md&previewSize=100"
+    title="clip-path on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+In the example above, the balloon image is square ([source](https://cdn.glitch.com/5984697d-c5e8-4a63-a765-7e7ac3916fc0%2Fround-balloon.jpg?v=1597216988521)).
+Using `clip-path` and the basic shape value of `circle()`
+the additional sky around the balloon is clipped away leaving a circular image on the page.
+
+As the image is a link you can see something else about the `clip-path` property.
+Only the visible area of the image can be clicked on,
+as events do not fire on the hidden parts of the image.
+
+Clipping can be applied to any HTML element, not just images.
+There are a few different ways to create a `clip-path`, in this post we will take a look at them.
+
+## Browser compatibility
+
+{% BrowserCompat 'css.properties.clip-path' %}
+
+For legacy browsers a fallback may be to allow the browser to ignore the `clip-path` property and show the unclipped image.
+If this is a problem you could test for `clip-path` in a feature query and offer an alternate layout for unsupporting browsers.
+
+```css
+@supports(clip-path: circle(45%)) {
+  /* code that requires clip-path here. */
+}
+```
+
+## Basic shapes
+
+The `clip-path` property can take a number of values.
+The value used in the initial example was `circle()`.
+This is one of the basic shape values, which are defined in the
+[CSS Shapes specification](https://www.w3.org/TR/css-shapes-1/#basic-shape-functions).
+This means that you can clip an area,
+and also use the same value for `shape-outside` to cause text to wrap around that shape.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-with-shape?path=README.md&previewSize=100"
+    title="clip-path-with-shape on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+{% Aside %}
+Note that CSS Shapes can only be applied to floated elements.
+The `clip-path` property does not require the element to be floated.
+{% endAside %}
+
+The full list of basic shapes is:
+
+- [`inset()`](https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset)
+- [`circle()`](https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle)
+- [`ellipse()`](https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse)
+- [`polygon()`](https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon)
+
+### `inset()`
+
+The `inset()` value insets the clipped area from the edge of the element,
+and can be passed values for the top, right, bottom, and left edges.
+A `border-radius` can also be added to curve the corners of the clipped area,
+by using the `round` keyword.
+
+In my example I have two boxes both with a class of `.box`.
+The first box has no clipping, the second is clipped using `inset()` values.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-inset?path=README.md&previewSize=100"
+    title="clip-path-inset on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### `circle()`
+
+As you have seen, the `circle()` value creates a circular clipped area.
+The first value is a length or a percentage and is the radius of the circle.
+A second optional value allows you to set the center of the circle.
+In the example below I am using keyword values to set my clipped circle top right.
+You could also use lengths or percentages.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-circle?path=README.md&previewSize=100"
+    title="clip-path-circle on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+#### Watch out for flat edges!
+
+Be aware with all of these values that the shape will be clipped by the margin box on the element.
+If you create a circle on an image,
+and that shape would extend outside of the natural size of the image, you will get a flat edge.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sQPOF6oaR31kjSVGzztu.jpg", alt="A clipped circle with flat edges", width="800", height="427",style="max-inline-size: 480px" %}
+  <figcaption>The image used earlier now has <code>circle(50%)</code> applied. As the image is not square, we hit the margin box at the top and bottom and the circle is clipped.</figcaption>
+</figure>
+
+### `ellipse()`
+
+An ellipse is essentially a squashed circle,
+and so acts very much like `circle()` but accepts a radius for x and a radius for y,
+plus the value for the center of the ellipse.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-ellipse?path=README.md&previewSize=100"
+    title="clip-path-ellipse on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### `polygon()`
+
+The `polygon()` value can help you create fairly complex shapes,
+defining as many points as you need,
+by setting the coordinates of each point.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-polygon?path=README.md&previewSize=100"
+    title="clip-path-polygon on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+To help you create polygons and see what is possible check out [Clippy](https://bennettfeely.com/clippy/),
+a `clip-path` generator,
+then copy and paste the code into your own project.
+
+## Shapes from box values
+
+Also defined in CSS Shapes are shapes from [box values](https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/From_box_values).
+These relate to the CSS Box Model -- the content box, padding box, border box,
+and margin box with keyword values of `content-box`, `border-box`, `padding-box`, and `margin-box`.
+
+These values can be used alone, or alongside a basic shape to define the reference box used by the shape.
+For example, the following would clip the shape to the edge of the content.
+
+```css
+.box {
+  clip-path: content-box;
+}
+```
+
+In this example the circle would use the `content-box` as the reference box rather than the `margin-box` (which is the default).
+
+```css
+.box {
+  clip-path: circle(45%) content-box;
+}
+```
+
+Currently browsers do not support the use of box values for the `clip-path` property.
+They are supported for `shape-outside` however.
+
+## Using an SVG element
+
+For more control over your clipped area than is possible with basic shapes,
+use an SVG `clipPath` element.
+Then reference that ID, using `url()` as the value for `clip-path`.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-svg?path=README.md&previewSize=100"
+    title="clip-path-svg on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+## Animating the clipped area
+
+CSS transitions and animations can be applied to the `clip-path` to create some interesting effects.
+In this next example I am animating a circle on hover by transitioning between two circles with a different radius value.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/clip-path-animated?path=README.md&previewSize=100"
+    title="clip-path-animated on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+There are lots of creative ways in which animation can be used with clipping.
+[Animating with clip-path](https://css-tricks.com/animating-with-clip-path/) on CSS Tricks runs through some ideas.
+
+_Photo by [Matthew Henry](https://burst.shopify.com/@matthew_henry) on Burst._
diff --git a/src/site/content/en/blog/css-gradient-generator/index.md b/src/site/content/en/blog/css-gradient-generator/index.md
new file mode 100644
index 00000000000..d0e5fce93ef
--- /dev/null
+++ b/src/site/content/en/blog/css-gradient-generator/index.md
@@ -0,0 +1,29 @@
+---
+title: Quickly create nice CSS gradients with the CSS Gradient Creator
+subhead: >
+  This tool by Josh W Comeau makes it super simple to create nice looking gradients.
+date: 2022-05-04
+scheduled: true
+hero: image/rq1kLlxRBubsZSyX0gs2nghLSZc2/k2mYKB7AKDJdRjCbsc09.png
+alt: "A subtle orange linear gradient."
+authors: 
+  - paulkinlan
+description: >
+  This tool by Josh W Comeau makes it super simple to create nice looking gradients.
+tags:
+  - blog
+  - css
+---
+
+This [CSS Gradient Generator](https://www.joshwcomeau.com/gradient-generator/) by Josh W Comeau is a very good, simple Web App that helps you to create "Beautiful, lush gradients".
+
+{% Img src="image/rq1kLlxRBubsZSyX0gs2nghLSZc2/CGKiSTSDSv30GLu7JuQR.png", alt="A screenshot of the Gradient Editor with a simple linear gradient.", width="800", height="693" %}
+
+I personally struggle mapping the syntax to a visual so this tool has been a great help for me. It focuses on creating [linear gradients](https://developer.mozilla.org/docs/Web/CSS/gradient/linear-gradient) and it allows you to configure them using a number of different color modes (like HCL) even though they aren't directly supported on the `linear-gradient` CSS function. [Josh's supporting blog post](https://www.joshwcomeau.com/css/make-beautiful-gradients/) goes into more detail about how the color interpolation is calculated and applied to something the browser can render&mdash;it's a fascinating read into some of the theory behind how it works.
+
+### Linear gradient
+
+{% BrowserCompat 'css.types.image.gradient.linear-gradient' %}
+
+Hero image by [Luke Chesser](https://unsplash.com/@lukechesser?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/linear-gradient?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+  
\ No newline at end of file
diff --git a/src/site/content/en/blog/css-individual-transform-properties/index.md b/src/site/content/en/blog/css-individual-transform-properties/index.md
new file mode 100644
index 00000000000..c73b891ae55
--- /dev/null
+++ b/src/site/content/en/blog/css-individual-transform-properties/index.md
@@ -0,0 +1,212 @@
+---
+layout: post
+title: Finer grained control over CSS transforms with individual transform properties
+subhead: >
+  Transform elements with the `translate`, `rotate`, and `scale` properties
+authors:
+  - bramus
+  - dbaron
+description: >
+  Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.
+thumbnail: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/4KSYYba8wDbfZsycAV23.svg
+hero: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/AtVvxkLmxdp0Mso8Mnnc.svg
+is_baseline: true
+date: 2022-08-02
+updated: 2023-05-10
+tags:
+  - blog
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% BrowserCompat 'css.properties.rotate' %}
+{% endAside %}
+
+{% YouTube id="oDcb3fvtETs", startTime="844" %}
+
+## The CSS `transform` property
+
+To apply transforms to an element, use the [CSS `transform` Property](https://developer.mozilla.org/docs/Web/CSS/transform). The property accepts one or more `<transform-function>`s which get applied one after the other.
+
+```css
+.target {
+  transform: translateX(50%) rotate(30deg) scale(1.2);
+}
+```
+
+The targeted element is translated by 50% on the X-axis, rotated by 30 degrees, and finally scaled up to 120%.
+
+While the `transform` property does its work just fine, it becomes a bit tedious when you want to alter any of those values individually.
+
+To change the scale on hover, you must duplicate all functions in the transform property, even though their values remain unchanged.
+
+```css
+.target:hover {
+  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
+}
+```
+
+## The individual transform properties
+
+Shipping with Chrome 104 are individual properties for CSS transforms. The properties are `scale`, `rotate`, and `translate`, which you can use to individually define those parts of a transformation.
+
+By doing so, Chrome joins Firefox and Safari which already support these properties.
+
+{% BrowserCompat 'css.properties.scale' %}
+
+{% Aside %}
+Not all transformation functions have a matching individual property, for example `skewX()` and `matrix()`.
+{% endAside %}
+
+Rewriting the preceding `transform` example with the individual properties, your snippet becomes this:
+
+```css
+.target {
+  translate: 50% 0;
+  rotate: 30deg;
+  scale: 1.2;
+}
+```
+
+## Order matters
+
+One key difference between the original CSS `transform` property and the new properties is the order in which the declared transformations get applied.
+
+With `transform`, the transformation functions get applied in the order they’re written–from left (outside) to right (inside).
+
+With the individual transformation properties, the order is not the order in which they are declared.  The order is always the same: first `translate` (outside), then `rotate`, and then `scale` (inside).
+
+That means both of the following code snippets give the same result:
+
+```css
+.transform--individual {
+  translate: 50% 0;
+  rotate: 30deg;
+  scale: 1.2;
+}
+
+.transform--individual-alt {
+  rotate: 30deg;
+  translate: 50% 0;
+  scale: 1.2;
+}
+```
+
+In both cases the targeted elements will first be translated by `50%` on the X-axis, then rotated by `30deg`, and finally scaled by `1.2`.
+
+If one of the individual transform properties are declared along with a `transform` property, then the individual transforms get applied first (`translate`, `rotate`, and then `scale`) with the `transform` last (inside). More details are in the spec that defines [how the transformation matrix should be calculated](https://www.w3.org/TR/css-transforms-2/#ctm).
+
+## Animations
+
+The main reason these properties were added is to make animations easier. Say you want to animate an element as follows:
+
+{% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/Pn0t3nrqfBg6JhmYFslm.svg", alt="Keyframes graph.", width="800", height="745" %}
+
+### Using `transform`
+
+To implement this animation using `transform`, you’d have to calculate all in-between values for all defined transformations, and include those in each keyframe. For example, to do a rotation at the 10% mark, the values for the other transformations must be calculated as well, because the `transform` property needs all of them.
+
+{% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/AF5n6UlhcuQ5UNKemX8M.svg", alt="Keyframes graph with intermediate values calculated.", width="800", height="745" %}
+
+The resulting CSS code becomes this:
+
+```css
+@keyframes anim {
+  0% { transform: translateX(0%); }
+  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
+  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
+  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
+  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
+  100% { transform: translateX(100%) rotate(360deg); }
+}
+
+.target {
+  animation: anim 2s;
+  animation-fill-mode: forwards;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gOeRMZV',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+### Using individual transform properties
+
+With individual transform properties this becomes much easier to write. Instead of dragging all transformations from keyframe to keyframe, you can target each transform individually. You also no longer need to calculate all those in-between values.
+
+```css
+@keyframes anim {
+  0% { translate: 0% 0; }
+  100% { translate: 100% 0; }
+
+  0%, 100% { scale: 1; }
+  5%, 95% { scale: 1.2; }
+
+  0% { rotate: 0deg; }
+  10%, 90% { rotate: 180deg; }
+  100% { rotate: 360deg; }
+}
+
+.target {
+  animation: anim 2s;
+  animation-fill-mode: forwards;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWYgrox',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+### Using individual transform properties and several keyframes
+
+To make your code modular you can split up each sub-animation into its own set of keyframes.
+
+```css
+@keyframes move {
+  0% { translate: 0% 0; }
+  100% { translate: 100% 0; }
+}
+
+@keyframes scale {
+  0%, 100% { scale: 1; }
+  5%, 95% { scale: 1.2; }
+}
+
+@keyframes rotate {
+  0% { rotate: 0deg; }
+  10%, 90% { rotate: 180deg; }
+  100% { rotate: 360deg; }
+}
+
+.target {
+  animation: move 2s, scale 2s, rotate 2s;
+  animation-fill-mode: forwards;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poLwbGR',
+  height: 360,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+Thanks to this split you can apply each separate set of keyframes as you like because the `transform` properties–which now have become individual properties–no longer overwrite each other. Above that you can give each transformation a different timing without needing to rewrite the whole lot.
+
+## Performance
+
+Animations using these new properties are just as efficient as animations of the existing `transform` property.
+
+Animations of `translate`, `rotate`, and `scale` run on the compositor the same way that animations of `transform` do, so they’re good for animation performance in [the same way that `transform` is](/animations-guide/).
+
+These new properties also work with the [`will-change`](https://developer.mozilla.org/docs/Web/CSS/will-change) property. In general, it’s best to avoid overusing `will-change` by using it on the minimum number of elements needed, and for as short an amount of time as reasonably possible. But it’s also good to be as specific as possible. For example, if you’re using `will-change` to optimize an animation with the `rotate` and `filter` properties, you should declare this using `will-change: rotate, filter`. This is slightly better than using `will-change: transform, filter` in a case where you’re animating `rotate` and `filter`, because some of the data structures that Chrome creates in advance when you use `will-change` are different for `transform` versus `rotate`.
diff --git a/src/site/content/en/blog/css-is-and-where/index.md b/src/site/content/en/blog/css-is-and-where/index.md
new file mode 100644
index 00000000000..7528b05edaf
--- /dev/null
+++ b/src/site/content/en/blog/css-is-and-where/index.md
@@ -0,0 +1,182 @@
+---
+title: New CSS functional pseudo-class selectors `:is()` and `:where()`
+subhead: These seemingly small additions to CSS selector syntax are going to have a big impact.
+authors:
+  - adamargyle
+description: These seemingly small additions to CSS selector syntax are going to have a big impact.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/bFO3SPdt1bPIB8EylsB7.jpg
+alt: A bright and white library, rows and rows of books, with a single person in the middle reaching for a single book.
+tags:
+  - blog
+  - css
+date: 2021-05-27
+updated: 2022-07-25
+---
+
+When writing CSS, you can sometimes end up with long selector lists to target
+multiple elements with the same style rules. For example, if you want to color
+adjust any `<b>` tags found inside a heading element, you could write:
+
+```css
+h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
+  color: hotpink;
+}
+```
+
+Instead, you could use `:is()` and improve legibility while avoiding a long
+selector:
+
+```css
+:is(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+```
+
+Legibility and shorter selector conveniences are only a piece of the value that
+`:is()` and `:where()` bring to CSS. In this post, you'll discover the syntax
+and value of these two functional pseudo selectors.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/mkyjox1HJNL0AgtX25bi.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    An infinite visual of before and after using <code>:is()</code>
+  </figcaption>
+</figure>
+
+### Browser compatibility
+
+#### `:is()`
+
+{% BrowserCompat 'css.selectors.is' %}
+
+#### `:where()`
+
+{% BrowserCompat 'css.selectors.where' %}
+
+## Meet `:is()` and `:where()`
+
+These are functional pseudo-class selectors, notice the `()` at the end and the
+way they start with `:`. Think of these as runtime dynamic function calls that
+match elements. When writing CSS, they give you a way to group elements together
+in the middle, beginning or end of a selector. They also can change specificity,
+giving you power to nullify or increase specificity. 
+
+### Selector grouping 
+
+Anything that `:is()` can do regarding grouping, so can `:where()`. This
+includes being used anywhere in the selector, nesting, and stacking them. Full
+CSS flexibility you know and love. Here's a few examples:
+
+```css
+/* at the beginning */
+:where(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+
+/* in the middle */
+article :is(header,footer) > p {
+  color: gray;
+}
+
+/* at the end */
+.dark-theme :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* multiple */
+:is(.dark-theme, .dim-theme) :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* stacked */
+:is(h1,h2):where(.hero,.subtitle) {
+  text-transform: uppercase;
+}
+
+/* nested */
+.hero:is(h1,h2,:is(.header,.boldest)) {
+  font-weight: 900;
+}
+```
+
+Each of the above selector examples demonstrates the flexibility of these two
+functional pseudo-classes. To find areas of your code that could benefit from
+`:is()` or `:where()`, look for selectors with multiple commas and selector
+repetition.
+
+### Using simple and complex selectors with `:is()`
+
+For a brush up on selectors, check out the [selectors module on Learn
+CSS](/learn/css/selectors/#complex-selectors). Here's a few
+examples of simple and complex selectors to help illustrate the ability:
+
+```css
+article > :is(p,blockquote) {
+  color: black;
+}
+
+:is(.dark-theme.hero > h1) {
+  font-weight: bold;
+}
+
+article:is(.dark-theme:not(main .hero)) {
+  font-size: 2rem;
+}
+```
+
+{% Aside 'gotchas' %} 
+Normally, when using a `,` to create a list of selectors,
+if any of the selectors are invalid, all of the selectors are invalidated and
+the list will fail to match elements. That is to say they are not forgiving of
+errors. `:is()` and `:where()` though [are
+forgiving](https://developer.mozilla.org/docs/Web/CSS/:is#forgiving_selector_parsing),
+and can [get you out of a
+bind](https://css-tricks.com/almanac/selectors/i/is/#forgiving-selector-lists)!
+{% endAside %}
+
+So far, `:is()` and `:where()` are syntactically interchangeable. It's time to
+look at how they're different.
+
+### The difference between `:is()` and `:where()`
+
+When it comes to specificity, `:is()` and `:where()` strongly diverge. For a
+brush up on specificity, see the [specificity module on Learn
+CSS](/learn/css/specificity/).
+
+In short
+- `:where()` has no specificity.<br>`:where()` squashes all the specificity in
+  the selector list passed as functional parameters. This is a first of its
+  kind selector feature. 
+- `:is()` takes the specificity of its most specific
+  selector.<br>`:is(a,div,#id)` has a specificity score of an ID, 100 points.
+
+Taking on the highest specificity selector from the list has only been a gotcha
+for me when I was getting too excited about grouping. I was always able to
+improve legibility by moving the high specificity selector to it's own selector
+where it wouldn't have so much impact. Here's an example of what I mean:
+
+```css
+article > :is(header, #nav) {
+  background: white;
+}
+
+/* better as */
+article > header,
+article > #nav {
+  background: white;
+}
+```
+
+With `:where()`, I'm waiting to see libraries offer versions with no
+specificity. The specificity competition between author styles and library
+styles could come to an end. There would be no specificity to compete with when writing CSS. 
+CSS has been working on a grouping feature like this for quite some
+time, it's here, and it's still largely unexplored territory. Have fun making
+smaller stylesheets and removing commas.
+
+*Photo by [Markus Winkler](https://unsplash.com/@markuswinkler) on [Unsplash](https://unsplash.com/photos/afW1hht0NSs)*
diff --git a/src/site/content/en/blog/css-marker-pseudo-element/index.md b/src/site/content/en/blog/css-marker-pseudo-element/index.md
new file mode 100644
index 00000000000..935bd08756a
--- /dev/null
+++ b/src/site/content/en/blog/css-marker-pseudo-element/index.md
@@ -0,0 +1,331 @@
+---
+layout: post
+title: Custom bullets with CSS ::marker
+subhead: It is now trivial to customize the color, size or type of number or bullet when using a <ul> or <ol>.
+authors:
+  - adamargyle
+  - loirooriol
+description: It is now trivial to customize the color, size or type of number or bullet when using a <ul> or <ol>.
+tags:
+  - blog
+  - css
+date: 2020-09-02
+updated: 2020-09-02
+scheduled: true
+is_baseline: true
+hero: image/admin/GPGTyXJOh0cH0wa1PvXH.png
+thumbnail: image/admin/jbdOq0tGGzobMtaBsajn.png
+alt: Showing the anatomy of a single list item by putting separate boxes around the bullet and the text
+feedback:
+  - api
+---
+
+Thanks to Igalia, sponsored by Bloomberg, we can finally put our hacks away for styling lists. See!
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOmqXrog0YoriZqqIzEZ.png", alt="", width="665", height="384" %}
+  <figcaption>
+    <a href="https://glitch.com/edit/#!/marker-fun-example">View Source</a>
+  </figcaption>
+</figure>
+
+Thanks to [CSS `::marker`](https://www.w3.org/TR/css-lists-3/#marker-pseudo) we can change the content and some of the styles of bullets and numbers.
+
+## Browser compatibility
+
+`::marker` is supported in Firefox for desktop and Android, desktop Safari and iOS Safari (but only the `color` and `font-*` properties, see [Bug 204163](https://bugs.webkit.org/show_bug.cgi?id=204163)), and Chromium-based desktop and Android browsers.
+
+{% BrowserCompat 'css.selectors.marker' %}
+
+## Pseudo-elements
+Consider the following essential HTML unordered list:
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
+  <li>Dolores quaerat illo totam porro</li>
+  <li>Quidem aliquid perferendis voluptates</li>
+  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
+  <li>Fuga</li>
+</ul>
+```
+
+Which results in the following unsurprising rendering:
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-plain-list?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+The dot at the beginning of each `<li>` item is free! The browser is drawing and creating a generated marker box for you.
+
+Today we're excited to talk about the `::marker` pseudo-element, which gives the ability to style the bullet element that browsers create for you.
+
+{% Aside 'key-term' %}
+A pseudo-element represents an element in the document other than those which exist in the document tree. For example, you can select the first line of a paragraph using the pseudo-element `p::first-line`, even though there is no HTML element wrapping that line of text.
+{% endAside %}
+
+### Creating a marker
+
+The `::marker` pseudo-element marker box is automatically generated inside every list item element, preceding the actual contents and the `::before` pseudo-element.
+
+```css
+li::before {
+  content: "::before";
+  background: lightgray;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  margin-inline-end: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 340px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-before-example?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+Typically, list items are `<li>` HTML elements, but other elements can also become list items with `display: list-item`.
+
+```html
+<dl>
+  <dt>Lorem</dt>
+  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
+  <dd>Dolores quaerat illo totam porro</dd>
+
+  <dt>Ipsum</dt>
+  <dd>Quidem aliquid perferendis voluptates</dd>
+</dl>
+```
+
+```css/1
+dd {
+  display: list-item;
+  list-style-type: "🤯";
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-definition-list?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### Styling a marker
+Until `::marker`, lists could be styled using `list-style-type` and `list-style-image` to change the list item symbol with 1 line of CSS:
+
+```css
+li {
+  list-style-image: url(/right-arrow.svg);
+  /* OR */
+  list-style-type: '👉';
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-list-style-type?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+That's handy but we need more. What about changing the color, size, spacing, etc!? That's where `::marker` comes to the rescue. It allows individual and global targeting of these pseudo-elements from CSS:
+
+```css
+li::marker {
+  color: hotpink;
+}
+
+li:first-child::marker {
+  font-size: 5rem;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-style-introduction?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+{% Aside 'caution' %}
+If the above list does not have pink bullets, then `::marker` is not supported in your browser.
+{% endAside %}
+
+The `list-style-type` property gives very limited styling possibilities. The `::marker` pseudo-element means that you can target the marker itself and apply styles directly to it. This allows for far more control.
+
+That said, you can't use every CSS property on a `::marker`. The list of which properties are allowed and not allowed are clearly indicated in the spec. If you try something interesting with this pseudo-element and it doesn't work, the list below is your guide into what can and can't be done with CSS:
+
+#### Allowed CSS `::marker` Properties
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+Changing the contents of a `::marker` is done with `content` as opposed to `list-style-type`. In this next example the first item is styled using `list-style-type` and the second with `::marker`. The properties in the first case apply to the entire list item, not just the marker, which means that the text is animating as well as the marker. When using `::marker` we can target just the marker box and not the text.
+
+Also, note how the disallowed `background` property has no effect.
+
+<div class="switcher">
+{% Compare 'worse', 'List Styles' %}
+```css
+li:nth-child(1) {
+  list-style-type: '?';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+```
+
+{% CompareCaption %}
+Mixed results between the marker and the list item
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Marker Styles' %}
+```css
+li:nth-child(2)::marker {
+  content: '!';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+```
+
+{% CompareCaption %}
+Focused results between marker and list item
+{% endCompareCaption %}
+
+{% endCompare %}
+</div>
+
+<br>
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-style-vs-list-style-type?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+{% Aside 'gotchas' %}
+In Chromium, `white-space` only works for inside positioned markers. For outside positioned markers, the style adjuster always forces `white-space: pre` in order to preserve the trailing space.
+{% endAside %}
+
+
+#### Changing the content of a marker
+Here are some of the ways you could style your markers.
+
+**Changing all list items**
+```css
+li {
+  list-style-type: "😍";
+}
+
+/* OR */
+
+li::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-change-all?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+**Changing just one list item**
+```css
+li:last-child::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-change-one?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+**Changing a list item to SVG**
+```css
+li::marker {
+  content: url(/heart.svg);
+  content: url(#heart);
+  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-inline-svg?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+**Changing numbered lists**
+What about an `<ol>` though? The marker on an ordered list item is a number and not a bullet by default. In CSS these are called [Counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters), and they're quite powerful. They even have properties to set and reset where the number starts and ends, or switching them to roman numerals. Can we style that? Yep, and we can even use the marker content value to build our own numbering presentation.
+
+```css
+li::marker {
+  content: counter(list-item) "› ";
+  color: hotpink;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-numbered-lists?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    loading="lazy"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### Debugging
+Chrome DevTools is ready to help you inspect, debug and modify the styles applying to `::marker` pseudo elements.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PYKVXEzycrMhQujXsNxQ.png", alt="DevTools open and showing styles from the user agent and the user styles", width="776", height="574", style="max-inline-size: 480px" %}
+</figure>
+
+### Future Pseudo-element styling
+You can find out more about ::marker from:
+
+- [CSS Lists, Markers and Counters](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/) from [Smashing Magazine](https://www.smashingmagazine.com/)
+- [Counting With CSS Counters and CSS Grid](https://css-tricks.com/counting-css-counters-css-grid/) from [CSS-Tricks](https://css-tricks.com/)
+- [Using CSS Counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) from [MDN](https://developer.mozilla.org/)
+
+It's great to get access to something which has been hard to style. You might wish that you could style other automatically generated elements. You might be frustrated with `<details>` or the search input autocomplete indicator, things that are not implemented in the same way across browsers. One way to share what you need is by creating a want at [https://webwewant.fyi](https://webwewant.fyi).
diff --git a/src/site/content/en/blog/css-masking/index.md b/src/site/content/en/blog/css-masking/index.md
new file mode 100644
index 00000000000..67d1467fa4c
--- /dev/null
+++ b/src/site/content/en/blog/css-masking/index.md
@@ -0,0 +1,204 @@
+---
+title: Apply effects to images with CSS's mask-image property
+subhead: >
+  CSS masking gives you the option of using an image as a mask layer.
+  This means that you can use an image, an SVG, or a gradient as your mask,
+  to create interesting effects without an image editor.
+description: >
+  CSS masking gives you the option of using an image as a mask layer.
+  This means that you can use an image, an SVG, or a gradient as your mask,
+  to create interesting effects without an image editor.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: A teddy bear wearing a facemask.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+When you [clip an element](/css-clipping) using the `clip-path` property the clipped area becomes invisible.
+If instead you want to make part of the image opaque or apply some other effect to it, then you need to use masking.
+This post explains how to use the [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) property in CSS,
+which lets you specify an image to use as a mask layer.
+This gives you three options. You can use an image file as your mask, an SVG, or a gradient.
+
+## Browser compatibility
+
+Most browsers only have partial support for the standard CSS masking property.
+You will need to use the `-webkit-` prefix in addition to the standard property in order to achieve the best browser compatibility.
+See [Can I use CSS Masks?](https://caniuse.com/#feat=css-masks) for full browser support information.
+
+{% BrowserCompat 'css.properties.mask-image' %}
+
+While browser support using the prefixed property is good,
+when using masking to make text on top of an image visible take care of what will happen if masking is unavailable.
+It may be worth using feature queries to detect support for `mask-image` or `-webkit-mask-image`
+and providing a readable fallback before adding your masked version.
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* code that requires mask-image here. */
+}
+```
+
+## Masking with an image
+
+The `mask-image` property works in a similar way to the `background-image` property.
+Use a `url()` value to pass in an image.
+Your mask image needs to have a transparent or semi-transparent area.
+
+A fully transparent area will cause the part of the image under that area to be invisible.
+Using an area which is semi-transparent however will allow some of the original image to show through.
+You can see the difference in the Glitch below.
+The first image is the original image of balloons with no mask.
+The second image has a mask applied which has a white star on a fully transparent background.
+The third image has a white star on a background with a gradient transparency.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&previewSize=100"
+    title="mask-image on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+In this example I am also using the `mask-size` property with a value of `cover`.
+This property works in the same way as [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size).
+You can use the keywords `cover` and `contain` or you can give the background a size using any valid length unit, or a percentage.
+
+You can also repeat your mask just as you might repeat a background image,
+in order to use a small image as a repeating pattern.
+
+## Masking with SVG
+
+Rather than using an image file as the mask, you could use SVG.
+There are a couple of ways this can be achieved.
+The first is to have a `<mask>` element inside the SVG and reference the ID of that element in the `mask-image` property.
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balloons">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="An example of using an SVG mask", width="699", height="490" %}
+</figure>
+
+The advantage of this approach is that the mask could be applied to any HTML element, not just an image.
+Unfortunately Firefox is the only browser that supports this approach.
+
+All is not lost however, as for the most common scenario of masking an image,
+we can include the image in the SVG.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&previewSize=100"
+    title="mask-image-svg-image on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+## Masking with a gradient
+
+Using a CSS gradient as your mask is an elegant way of achieving a masked area without needing to go to the trouble of creating an image or SVG.
+
+A simple linear gradient used as a mask could ensure that the bottom part of an image will not be too dark underneath a caption, for example.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&previewSize=100"
+    title="mask-linear-gradient on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+You can use any of the supported gradient types, and get as creative as you like.
+This next example uses a radial gradient to create a circular mask to illuminate behind the caption.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&previewSize=100"
+    title="mask-radial-gradient on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+## Using multiple masks
+
+As with background images you can specify multiple mask sources,
+combining them to get the effect that you want.
+This is particularly useful if you want to use a pattern generated with CSS gradients as your mask.
+These typically will use multiple background images and so can be translated easily into a mask.
+
+As an example, I found a nice checkerboard pattern in [this article](https://cssgradient.io/blog/gradient-patterns/).
+The code, using background images, looks like this:
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+To turn this, or any other pattern designed for background images, into a mask,
+you will need to replace the `background-*` properties with the relevant `mask` properties,
+including the `-webkit` prefixed ones.
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+There are some really nice effects to be made by applying gradient patterns to images.
+Try remixing the Glitch and testing out some other variations.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&previewSize=100"
+    title="mask-checkers on Glitch"
+    allow="encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+Along with clipping,
+CSS masks are a way to add interest to images and other HTML elements without needing to use a graphics application.
+
+_<span>Photo by <a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a> on Unsplash</span>._
diff --git a/src/site/content/en/blog/css-module-scripts/index.md b/src/site/content/en/blog/css-module-scripts/index.md
new file mode 100644
index 00000000000..8eda6fb4e70
--- /dev/null
+++ b/src/site/content/en/blog/css-module-scripts/index.md
@@ -0,0 +1,139 @@
+---
+title: Using CSS Module Scripts to import stylesheets
+subhead: >
+  Learn how to use CSS module scripts to import CSS stylesheets using the same syntax as JavaScript
+  modules.
+description: >
+  Learn how to use CSS module scripts to import CSS stylesheets using the same syntax as JavaScript
+  modules.
+authors:
+  - dandclark
+date: 2021-08-17
+hero: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Hu0ljomDqgb0y7h7REp6.jpg
+alt: A stack of multicolored shipping containers.
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - modules
+---
+
+With the new CSS module scripts feature, you can load CSS style sheets with `import` statements,
+just like [JavaScript
+modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules). The style sheets
+can then be applied to documents or [shadow
+roots](https://developer.mozilla.org/docs/Web/API/ShadowRoot) in the same manner as
+[constructable
+stylesheets](/constructable-stylesheets/). This can
+be more convenient and [more
+performant](https://dandclark.github.io/json-css-module-notes/#css-module-performancememory-examples)
+than other ways of importing and applying CSS.
+
+## Browser Support
+
+CSS module scripts are available by default in Chrome and Edge in version 93.
+
+Support in Firefox and Safari is not yet available. Implementation progress can be tracked at the
+[Gecko bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1720570) and [WebKit
+bug](https://bugs.webkit.org/show_bug.cgi?id=227967), respectively.
+
+## Prerequisites
+
+- Familiarity with [JavaScript
+  modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules).
+- Familiarity with [constructable
+  stylesheets](/constructable-stylesheets/).
+
+## Using CSS module scripts
+
+Import a CSS module script and apply it to a document or a shadow root like this:
+
+```js
+import sheet from './styles.css' assert { type: 'css' };
+document.adoptedStyleSheets = [sheet];
+shadowRoot.adoptedStyleSheets = [sheet];
+```
+
+The default export of a CSS module script is a [constructable
+stylesheet](/constructable-stylesheets/) whose
+contents are those of the imported file. Like any other constructable stylesheet, it is applied to
+documents or shadow roots using
+[`adoptedStyleSheets`](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
+
+Unlike other ways of applying CSS from JavaScript, there is no need to create `<style>` elements or
+mess with JavaScript strings of CSS text.
+
+CSS modules also have some of the same benefits as JavaScript modules.
+- **Deduplication:** if the same CSS file is imported from multiple places in an application, it will
+  still only be fetched, instantiated, and parsed a single time.
+- **Consistent order of evaluation:** when the importing JavaScript is running, it can rely on the
+  stylesheet it imports having already been fetched and parsed.
+- **Security:** modules are fetched with [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+  and use strict MIME-type checking.
+
+## Import Assertions (what's with the '`assert`'?)
+
+The `assert { type: 'css' }` part of the `import` statement is an [import
+assertion](https://v8.dev/features/import-assertions). This is required; without it, the `import` is
+treated as a normal JavaScript module import, and will fail if the imported file has a
+non-JavaScript MIME type.
+
+```js
+import sheet from './styles.css'; // Failed to load module script:
+                                  // Expected a JavaScript module
+                                  // script but the server responded
+                                  // with a MIME type of "text/css".
+```
+
+## Dynamically imported stylesheets
+
+You can also import a CSS module using [dynamic
+import](https://v8.dev/features/dynamic-import#dynamic), with a new second parameter for the `type:
+'css'` import assertion:
+
+```js
+const cssModule = await import('./style.css', {
+  assert: { type: 'css' }
+});
+document.adoptedStyleSheets = [cssModule.default];
+```
+
+{% Aside 'gotchas' %}
+Note that it's `cssModule.default` (not `cssModule` itself) that is added to `adoptedStyleSheets`.
+This is because the object returned from dynamic `import()` is a module namespace object. The
+CSSStyleSheet is the default export of the module, so it's accessed at `cssModule.default`.
+{% endAside %}
+
+## `@import` rules not yet allowed
+
+Currently CSS [`@import` rules](https://developer.mozilla.org/docs/web/css/@import) don't work
+in constructable stylesheets, including CSS module scripts. If `@import` rules are present in a
+constructable stylesheet, those rules will be ignored.
+
+```css
+/* atImported.css */
+div {
+    background-color: blue;
+}
+```
+
+```css
+/* styles.css */
+@import url('./atImported.css'); /* Ignored in CSS module */
+div {
+    border: 1em solid green;
+}
+```
+
+```html
+<!-- index.html -->
+<script type="module">
+    import styles from './styles.css' assert { type: "css" };
+    document.adoptedStyleSheets = [styles];
+</script>
+<div>This div will have a green border but no background color.</div>
+```
+
+Support for `@import` in CSS module scripts may be added to the specification. Track this
+specification discussion in [the GitHub issue](https://github.com/WICG/webcomponents/issues/870).
diff --git a/src/site/content/en/blog/css-paint-times/index.md b/src/site/content/en/blog/css-paint-times/index.md
new file mode 100644
index 00000000000..0d159aebc09
--- /dev/null
+++ b/src/site/content/en/blog/css-paint-times/index.md
@@ -0,0 +1,154 @@
+---
+title: CSS paint times and page render weight
+authors:
+  - coltmcanlis
+date: 2013-04-12
+tags:
+  - blog
+---
+{% Aside 'warning' %}
+This article contains numeric evaluation from a specific build of a browser. Over time, these numbers will change, as will the data provided here.
+{% endAside %}
+
+## Introduction
+
+If you’re the type of person who keeps up with things like [how browsers work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/), then you already know that there’s been some amazing articles lately detailing Chrome’s GPU accelerated renderer/composite operation. Firstly [Accelerated Rendering in Chrome: The Layer Model](http://www.html5rocks.com/en/tutorials/speed/layers/) is a great introduction to how Chrome uses the concept of layers to draw their page; and for a deeper dive [GPU Accelerated Compositing in Chrome](http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome) discusses how Chrome uses these layers, alongside the GPU for rendering your page.
+
+{% Aside %}
+The quick version of these articles is that the hardware accelerated path in Chrome will **Paint** your page by rasterizing the page visuals into tiles. These tiles are then passed off to the GPU, where the hardware will do the final drawing of tiles to the screen, a process known as **Compositing**. Chrome will move the tiles in and out of memory based upon need and performance heuristics that can change between platforms.
+{% endAside %}
+
+## The philosophical question
+
+Having spent a great deal of time writing [software rasterizers](http://en.wikipedia.org/wiki/Software_rendering) for 3D purposes, it became apparent in my mind that some [CSS properties](http://docs.webplatform.org/wiki/css/properties) should have varied performance when drawing your page. For example, rasterizing a small image to the screen is a completely different algorithmic operation that drawing a drop shadow on an arbitrary shape. So the question became: **How do different CSS properties affect the render-weight of your page?**
+
+My goal was to categorize a large set of CSS properties/values by their paint times, so that we can create an understanding of what types of CSS properties are more performant than others. To do this, I wrote some automation with duct-tape and bubble gum to attempt to add numerical visibility to CSS paint times, which worked like this:
+
+- Generate a suite of individual HTML pages; each one with a single DOM element and some permutation of CSS properties attached to it.
+- Run some automation script that, for each page, will:
+    - Launch Chrome
+    - Load a page
+    - Produce a [Skia Picture](https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger) for the page
+    - Run each Skia Picture taken through [Skia Benchmark](https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger) to obtain timings 
+- Dump out all the timings, and marvel at the numbers. (This part is important…)
+
+{% Aside %}
+Chrome’s software rasterizer package is called [SKIA](http://www.chromium.org/developers/design-documents/graphics-and-skia), and it not only handles rasterization of your web page, but also all your HTML5 Canvas API needs (Boxes, lines, bitmap fills, drop shadows, blurs, all the calls Chrome needs to turn your DOM into pixels). In order to help debugging the rendering of a page, SKIA allows you save out [Skia Picture (*.SKP)](https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger) files which record all the commands used to paint the page.
+{% endAside %}
+
+With this setup, we generate a suite of  HTML pages, where each page contains a unique permutation of CSS properties and values; for instance, here’s two html files:
+
+
+```html
+<style>
+#example1 {
+    background: url(foo.png) top left / 50% 60%;
+    padding: 20px; 
+    margin-top: 10px;
+    margin-right: 20px; 
+    text-align: center;
+}
+</style>
+<div id="example1">WOAH</div>
+```
+
+And another, that’s more complex
+
+```html
+<style>
+#example1 {
+    background-color:#eee;
+    box-shadow: 1px 2px 3px 4px black;
+    border-radius: 50%;
+    background: radial-gradient(circle closest-corner, white, black);
+    padding: 20px; 
+    margin-top: 10px;
+    margin-right: 20px; 
+    text-align: center;
+}
+</style>
+<div id="example1">WOAH</div>
+```
+
+Below, as a variant of the last example, where we only change the radial-gradient value:
+
+```html
+<style>
+#example1 
+{
+    background-color:#eee;
+    box-shadow: 1px 2px 3px 4px black;
+    border-radius: 50%;
+    background: radial-gradient(farthest-side, white, black);
+    padding: 20px; 
+    margin-top: 10px;
+    margin-right: 20px; 
+    text-align: center;
+}
+</style>
+<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
+```
+
+Each page is then loaded into a **fresh** instance of Chrome (to ensure that timings weren’t somehow biased by any stale states in page reloads), and a [Skia Picture (*.SKP)](https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger) is taken to evaluate what Skia commands are used to paint the page. Once SKP files have been generated for each HTML file, we run another batch to push the *.SKP files through the Skia Benchmark application (built from the [Skia source code](https://code.google.com/p/skia/)) which dumps out the average time taken to render that page.
+
+### Evaluating the data
+
+From this, we now have some rough ability to chart how much a suite of CSS properties take to paint. Or rather, we can start stack-ranking CSS properties by their paint performance. Here’s a large graph taken with [Chrome 27 beta](https://www.google.com/intl/en/chrome/browser/beta.html)showing off all the full set of timing data from this process. Note that all data is subject to change as Chrome becomes faster and faster with time.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MNzI5WIQyIlDKm11nlK2.jpg", alt="Timings for all permutations in the test", width="800", height="417" %}
+</figure>
+
+Each vertical bar represents the paint-time of a page with a single combination of CSS properties, (magnified by 100x; True-scale value of this graph is 0,1.56ms). Lots of pretty lines, but in this form it’s somewhat useless; we need to do some data mining to find useful trends.
+
+Firstly we find proof that **some CSS properties are just plain more expensive to render than others**. For example, drawing a drop-shadow on a DOM element involves a multi-pass operation with splines and other sorts of nasty things, as opposed to opacity which should be easier to render.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/itmfP4UqdMNLZbtpErlH.jpg", alt="Time taken to paint an element that has only 1 CSS property on it", width="800", height="378" %}
+</figure>
+
+Secondly, and more interestingly, **combinations of CSS Properties can have a greater paint time than the sum of their parts**. From an observer’s perspective, this is a bit odd, we’d expect that A+B = C, not 2.2C. For example adding `box-shadow` and `border-radius-stroke` : 
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/10tVfwX1pZYNgJQjQRhm.jpg", alt="Timings for all permutations in the test", width="306", height="294" %}
+</figure>
+
+**What’s really interesting about this, is that it’s not just the `box-shadow` property itself, but rather <i>that specific value permutation</i>.** For example, below shows a grouping of `box-shadow : 50%` and `border-radius` with value variations.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GKt6hjihzXM31TA7UHBG.jpg", alt="Timings for all permutations in the test", width="505", height="304" %}
+</figure>
+
+Looking at the data, this goes on for a while. There’s lots of various odd combinations, and my test suite hardly touches them all; there’s still tons of tests and combinations that could yield interesting results
+
+## Finding your page render-weight
+
+Armed with the ability to track the render times for each element on your page, developers have the ability to start evaluating their page-render-weight, and how it affects the responsiveness of your site; Here’s a couple tips to get started
+
+1. Use Chrome’s [Continuous Paint mode](http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode) in Chrome Dev Tools to get an understanding of what CSS properties are costing you.
+1. Incorporate CSS reviews into your existing code review process to catch performance issues
+Look for places in your CSS where you are using things that are known to be more expensive, like gradients and shadows. Ask yourself, do I really need these here?
+1. When in doubt, always err on the side of better performance. Your users may not remember what the padding width is on your columns, but they will remember how it feels to visit your site.
+
+{% Aside %}
+Unfortunately, without a custom timing setup like the one built, it’s currently difficult to automate the process of finding page render-weight, which makes it difficult to embrace continuous integration for your page builds across platforms. 
+{% endAside %}
+
+## Final Thoughts
+
+
+One of the most interesting things about this experiment is that the timings will continue to change with each [version of Chrome](https://www.google.com/intl/en/chrome/browser/beta.html) (hopefully getting faster ;) browser software is an ever-changing surface area. What’s slow today, could be fast tomorrow. You could take away from this article to avoid putting `box-shadow: 1px 2px 3px 4px` an an element that already has `border-radius:5`. **However the more valuable takeaway should be that CSS properties directly affect your page paint times.**
+
+{% Aside %}
+As with any software, make sure to test all design choices against your performance targets and platforms to determine validity in your own applications before making design decisions. 
+{% endAside %}
+
+## References
+
+- [How browsers work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
+- [Accelerated Rendering in Chrome: The Layer Model](http://www.html5rocks.com/en/tutorials/speed/layers/)
+- [GPU Accelerated Compositing in Chrome](http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome)
+- [Skia source code](https://code.google.com/p/skia/) 
+- [Skia Debugger](https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger)
+- [GPU Accelerated Compositing in Chrome](http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome)
+- [Chrome DevTools : Continuous Paint mode](http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode)
diff --git a/src/site/content/en/blog/css-props-and-vals/hero.jpg b/src/site/content/en/blog/css-props-and-vals/hero.jpg
deleted file mode 100644
index 2e9002d8d92..00000000000
Binary files a/src/site/content/en/blog/css-props-and-vals/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/css-props-and-vals/hero@2x.jpg b/src/site/content/en/blog/css-props-and-vals/hero@2x.jpg
deleted file mode 100644
index 8f80321cb44..00000000000
Binary files a/src/site/content/en/blog/css-props-and-vals/hero@2x.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/css-props-and-vals/index.md b/src/site/content/en/blog/css-props-and-vals/index.md
index c1fc6cdecb4..725430ab512 100644
--- a/src/site/content/en/blog/css-props-and-vals/index.md
+++ b/src/site/content/en/blog/css-props-and-vals/index.md
@@ -6,7 +6,7 @@ authors:
 date: 2019-09-19
 # Add an updated date to your post if you edit in the future.
 # updated: 2019-06-27
-hero: hero.jpg
+hero: image/admin/H6F7W8nUez3vaOv8hD8i.jpg
 alt: A black screen shows development work..
 
 description:
@@ -17,11 +17,13 @@ tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - houdini
   - css
-  - Chrome78
+  - chrome-78
+feedback:
+  - api
 ---
 
 CSS custom properties, also known as [CSS
-variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care),
+variables](https://developer.chrome.com/blog/css-variables-why-should-you-care/),
 let you define your own properties in CSS and use their values throughout your
 CSS. While incredibly useful today, they have shortcomings that can make them
 hard to work with: they can take any value so they may be accidentally
@@ -105,7 +107,7 @@ Initial value of the custom property.
 Taking a closer look at `syntax`. There are a number of [valid
 options](https://drafts.css-houdini.org/css-properties-values-api/#supported-names)
 ranging from numbers to colors to
-[`<custom-ident>`](https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident)
+[`<custom-ident>`](https://developer.mozilla.org/docs/Web/CSS/custom-ident)
 types. These syntaxes can also be modified by using the following values
 
 * Appending `+` signifies that it accepts a space-separated list of values of
@@ -150,7 +152,7 @@ CSS.registerProperty({
 <style>
 button {
   --stop-color: red;
-  transition: --stop-color: 1s;
+  transition: --stop-color 1s;
 }
 
 button:hover {
@@ -191,9 +193,9 @@ in action and play around with it yourself.
 
 ## Conclusion
 
-Houdini [is on its way](http://ishoudinireadyyet.com/) to browsers, and with it,
+Houdini [is on its way](http://ishoudinireadyyet.com) to browsers, and with it,
 entirely new ways of working with and extending CSS. With the [Paint
-API](https://developers.google.com/web/updates/2018/01/paintapi) already shipped
+API](https://developer.chrome.com/blog/paintapi) already shipped
 and now Custom Props and Vals, our creative toolbox is expanding, allowing us to
 define typed CSS properties and use them to create and animate new and exciting
 designs. There's more on the way, too, in the [Houdini issue
diff --git a/src/site/content/en/blog/css-scroll-snap/index.md b/src/site/content/en/blog/css-scroll-snap/index.md
new file mode 100644
index 00000000000..83ba34dc0c6
--- /dev/null
+++ b/src/site/content/en/blog/css-scroll-snap/index.md
@@ -0,0 +1,333 @@
+---
+title: Well-controlled scrolling with CSS Scroll Snap
+subhead: Create well-controlled scroll experiences by declaring scroll snapping positions.
+authors:
+  - flackr
+  - majido
+date: 2018-07-24
+updated: 2021-08-13
+description: >
+  CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. This enables common UX scroll patterns without the need for JavaScript.
+tags:
+  - blog
+  - css
+---
+
+The [CSS Scroll Snap](https://drafts.csswg.org/css-scroll-snap/) feature allows web
+developers to create well-controlled scroll experiences by declaring scroll
+snapping positions. Paginated articles and image carousels are two commonly used
+examples of this. CSS Scroll Snap provides an easy-to-use and consistent API for
+building these popular UX patterns.
+
+{% Aside %}
+CSS Scroll Snap
+[is supported in all major browsers](https://caniuse.com/css-snappoints).
+A previous version of the specification was implemented in some browsers,
+and may appear in tutorials and articles.
+If material includes the deprecated
+`scroll-snap-points-x` and `scroll-snap-points-y` properties,
+it should be considered outdated.
+{% endAside %}
+
+## Background
+
+### The case for scroll snapping
+
+Scrolling is a popular and natural way to interact with content on the web. It
+is the platform's native means of providing access to more information than is
+visible on the screen at once, becoming especially vital on mobile platforms
+with limited screen real estate. So it is no surprise that web authors
+increasingly prefer to organize content into scrollable flat lists as opposed to
+deep hierarchies.
+
+Scrolling's main drawback is its lack of precision. Rarely does a scroll end up
+aligned to a paragraph or sentence. This is even more pronounced for paginated
+or itemized content with meaningful boundaries when the scroll finishes at the
+middle of the page or image, leaving it partially visible. These use cases
+benefit from a well-controlled scrolling experience.
+
+Web developers have long relied on JavaScript-based solutions for controlling
+the scroll to help address this shortcoming. However, JavaScript-based solutions
+fail to provide a full fidelity solution due to lack of scroll
+customization primitives or access to composited scrolling. CSS Scroll Snap
+ensures a fast, high fidelity, and easy-to-use solution that works
+consistently across browsers.
+
+CSS Scroll Snap allows web authors to mark each scroll container with boundaries
+for scroll operations at which to finish. Browsers then choose the most
+appropriate end position depending on the particulars of the scroll operation,
+scroll container's layout and visibility, and details of the snap positions,
+then smoothly animate to it. Going back to our earlier example, as the user
+finishes scrolling the carousel, its visible image snaps into place. No scroll
+adjustments needed by JavaScript.
+
+
+<figure>
+    {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/b2Zbw03FzAth5NvBM2Cb.png",
+    alt="Example of using css scroll snap with an image carousel.",
+    width="800", height="356" %}
+  <figcaption>Example of using css scroll snap with an image carousel.
+    Here scroll snapping ensures at the end of scrolling an image horizontal
+    center is aligned with the horizontal center of the scroll container.
+  </figcaption>
+</figure>
+
+## CSS Scroll Snap
+
+Scroll snapping is the act of adjusting the scroll offset of a scroll container
+to be at a preferred **snap position** once the scroll operation finishes.
+
+A scroll container may be opted into scroll snapping by using the
+[`scroll-snap-type`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type)
+property. This tells the browser that it should consider snapping this scroll
+container to the snap positions produced by its descendants.  `scroll-snap-type`
+determines the axis on which scrolling occurs: `x`, `y`, or `both`, and the
+snapping strictness: `mandatory`, `proximity`. More on these later.
+
+A snap position can be produced by declaring a desired alignment on an element.
+This position is the scroll offset at which the nearest ancestor scroll
+container and the element are aligned as specified for the given axis. The
+following alignments are possible on each axis: `start`, `end`, `center`.
+
+A `start` alignment means that the scroll container snapport start edge should
+be flushed with the element snap area start edge. Similarly, the `end` and
+`center` alignments mean that the scroll container snapport end edge or center
+should be flushed with the element snap area end edge or center.
+
+{% Aside 'key-term' %}
+The [snapport](https://drafts.csswg.org/css-scroll-snap/#scroll-padding) is the area
+of the scroll container to which the snap areas are aligned. By default, it is
+the same as the visual viewport of the scroll container, but it can be adjusted
+using the `scroll-padding` property.
+{% endAside %}
+
+<figure>
+    {% Video src="video/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/U9rWoMBMwhKMo6dJZE8v.mp4",
+    autoplay=true,
+    playsinline=true,
+    muted=true,
+    loop=true %}
+  <figcaption>
+    Example of a various alignments on horizontal scrolling axis.
+ </figcaption>
+</figure>
+
+The following examples illustrate how to use these concepts.
+
+### Example: A horizontal gallery
+
+A common use case for scroll snapping is an image carousel. For example, to
+create a horizontal image carousel that snaps to each image as you scroll, we
+can specify the scroll container to have a mandatory `scroll-snap-type`
+on the horizontal axis.
+set each image to `scroll-snap-align: center` to ensure that
+the snapping centers the image within the carousel.
+
+
+```css
+#gallery {
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+  display: flex;
+}
+
+#gallery img {
+   scroll-snap-align: center;
+}
+```
+
+```html
+<div id="gallery">
+  <img src="cat.jpg">
+  <img src="dog.jpg">
+  <img src="another_cute_animal.jpg">
+</div>
+```
+
+Because snap positions are associated with an element, the snapping algorithm
+can be smart about when and how it snaps given the element and the scroll
+container size. For example, consider the case where one image is larger than
+the carousel. A naïve snapping algorithm may prevent the user from panning
+around to see the full image. But the
+[specification](https://drafts.csswg.org/css-scroll-snap/#snap-overflow)
+requires implementations to detect this case and allow the user to freely scroll
+around within that image only snapping at its edges.
+
+
+<figure>
+  {% Video src="video/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/yKrUtFVhZLR9ekaws8o3.mp4",
+    autoplay=true,
+    playsinline=true,
+    muted=true,
+    loop=true %}
+  <figcaption>
+    <a href="https://snap.glitch.me/carousel.html"
+       target="_blank">View demo</a> |
+    <a href="https://glitch.com/edit/#!/snap?path=carousel.html:1:0"
+       target="_blank">Source</a>
+  </figcaption>
+</figure>
+
+
+### Example: a journeyed product page
+
+Another common case that can benefit from scroll snapping are pages with
+multiple logical sections to vertically scroll through, for example, a typical
+product page. `scroll-snap-type: y proximity;` is a more natural fit for cases
+like this. It does not interfere when a user scrolls to the middle of a particular
+section but also snaps and brings attention to a new section when they scroll
+close enough.
+
+Here is how this can be achieved:
+
+```css
+article {
+  scroll-snap-type: y proximity;
+  /* Reserve space for header plus some extra space for sneak peeking. */
+  scroll-padding-top: 15vh;
+  overflow-y: scroll;
+}
+section {
+  /* Snap align start. */
+  scroll-snap-align: start;
+}
+header {
+  position: fixed;
+  height: 10vh;
+}
+```
+```html
+<article>
+  <header> Header </header>
+  <section> Section One </section>
+  <section> Section Two </section>
+  <section> Section Three </section>
+</article>
+```
+
+#### Scroll padding and margin
+
+The product page has a fixed position top header. The design also asked for some
+of the top section to remain visible when the scroll container is snapped in order
+to provide a design cue to users about the content above.
+
+The [`scroll-padding`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding)
+property is a new css property that can be used to adjust the effective
+viewable region of the scroll container, or snapport, which
+is used when calculating scroll snap alignments. The property defines an inset
+against the scroll container's padding box. In our example, `15vh` additional inset
+was added to the top, which instructs the browser to consider a lower position,
+`15vh` below the top edge of the scroll container, as its vertical start edge for
+scroll snapping. When snapping, the start edge of the snap target element will
+become flushed with this new position, thus leaving space above.
+
+The [`scroll-margin`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding)
+property defines the outset amount used to adjust the snap target
+effective box similar to how `scroll-padding` functions on the snap scroll
+container.
+
+You may have noticed that these two properties do not have the word "`snap`" in
+them. This is intentional as they actually modify the box for all relevant
+scroll operations and are not just scroll snapping. For example, Chrome takes
+them into account when calculating page size for paging scroll operations such
+as PageDown and PageUp, and also when calculating scroll amount for the
+`Element.scrollIntoView()` operation.
+
+
+<figure>
+{% Video src="video/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/vJ4o1a537JsKzgkiAVd6.mp4",
+    autoplay=true,
+    playsinline=true,
+    muted=true,
+    loop=true %}
+  <figcaption>
+    <a href="https://snap.glitch.me/product.html"
+       target="_blank">View demo</a> |
+    <a href="https://glitch.com/edit/#!/snap?path=product.html:1:0"
+       target="_blank">Source</a>
+  </figcaption>
+</figure>
+
+## Interaction with other scrolling APIs
+
+### DOM Scrolling API
+
+Scroll snapping happens **after** all scroll operations including those
+initiated by script. When you are using APIs like `Element.scrollTo`, the
+browser will calculate the intended scroll position of the operation, then apply
+appropriate snapping logic to find the final snapped location. Thus, there is
+no need for user script to do any manual calculations for snapping.
+
+### Smooth scrolling
+
+Smooth scrolling controls the behavior of a programmatic scroll operation while
+scroll snap determines its destination. Since they control orthogonal aspects of
+scrolling, they can be used together and complement each other.
+
+### Overscroll behavior
+
+[Overscroll behavior API](https://developer.chrome.com/blog/overscroll-behavior/) controls how
+scroll is chained across multiple elements and it is not affected by scroll
+snap.
+
+## Caveats and best practices
+
+Avoid using mandatory snapping when target elements are widely spaced apart.
+This can cause content in between the snap positions to become inaccessible.
+
+In many cases scroll-snapping can be added as an enhancement
+without needing to feature detect.
+If required, use `@supports` or `CSS.supports` to detect support for CSS Scroll Snap.
+Avoid using `scroll-snap-type` which is also present in the deprecated specification.
+
+### Feature detection in CSS
+
+```css
+@supports (scroll-snap-align: start) {
+  article {
+    scroll-snap-type: y proximity;
+    scroll-padding-top: 15vh;
+    overflow-y: scroll;
+  }
+}
+```
+
+### Feature detection in JavaScript
+
+```js
+if (CSS.supports('scroll-snap-align: start')) {
+  // use css scroll snap
+} else {
+  // use fallback
+}
+```
+
+Do not assume that programmatically scrolling APIs such as `Element.scrollTo`
+always finish at the requested scroll offset. Scroll snapping may adjust the
+scroll offset after programmatic scrolling is complete. Note that this was not a
+good assumption even before scroll snap since scrolling may have been
+interrupted for other reasons, but it is especially the case with scroll
+snapping.
+
+{% Aside %}
+There is an <a href="https://github.com/w3c/csswg-drafts/issues/1562#issuecomment-389586317">
+upcoming proposal</a> to change various scrolling APIs to return a promise.
+This promise is resolved when the user agent either completes or aborts that
+scrolling operation. Once this is standardized and implemented, it provides an
+ergonomic and efficient way for following up a user script initiated scroll
+with other actions.
+{% endAside %}
+
+## Future work
+
+Scroll experience was the focus of
+[a recent survey by the Chrome team](/2021-scroll-survey-report/).
+The survey results identified several areas that need additional work
+to shrink the gap between plugin libraries and CSS.
+Upcoming work will focus on `scroll-snap`, including:
+
+1. API availability and compatibility across browsers.
+1. Work on
+[new CSS APIs](https://github.com/argyleink/ScrollSnapExplainers) like `scroll-start`.
+1. Work on
+[new JS events](https://github.com/argyleink/ScrollSnapExplainers) like `snapChanged()`.
diff --git a/src/site/content/en/blog/css-size-adjust/index.md b/src/site/content/en/blog/css-size-adjust/index.md
new file mode 100644
index 00000000000..b3d3db3abbf
--- /dev/null
+++ b/src/site/content/en/blog/css-size-adjust/index.md
@@ -0,0 +1,401 @@
+---
+title: CSS `size-adjust` for `@font-face`
+subhead: As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts
+authors:
+  - adamargyle
+description: As a web font loads, you can now adjust its scale to normalize the document font sizes and prevent layout shift when switching between fonts
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/fL3dWSY7YBfagFP0ikMW.jpg
+alt: Well used letters from a letterpress, set into rows
+tags:
+  - blog
+  - css
+date: 2021-06-09
+updated: 2022-07-25
+---
+
+Consider the following
+[demo](https://codepen.io/argyleink/pen/8ace843980e2fd24bf15c8bd1bd072e4?editors=1100)
+where the `font-size` is a consistent `64px`, and the only difference between each of these headers is the `font-family`. The examples on the left have not been adjusted and
+have an inconsistent final size. The examples on the right use `size-adjust` to
+ensure `64px` is the consistent final size.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/6xhatUhszn7M6pDFcVgV.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+   In this example Chrome DevTools CSS grid layout debug tools are used to show heights.
+  </figcaption>
+</figure>
+
+This post explores a [new CSS font-face
+descriptor](https://drafts.csswg.org/css-fonts-5/#size-adjust-desc) called
+`size-adjust`. It also demonstrates a few ways to correct and normalize font sizes
+for smoother user experience, consistent design systems and more predictable
+page layout. One important use case is optimizing web font rendering to prevent
+[cumulative layout shift](/cls/) (CLS).
+
+{% BrowserCompat 'css.at-rules.font-face.size-adjust' %}
+
+Here's an interactive [demo](https://codepen.io/argyleink/pen/rNyMjxR) of the
+problem space. Try changing the typeface with the dropdown and observe:
+1. The height differences in the results.
+1. Visually jarring content shifts.
+1. Moving interactive target areas (the dropdown jumps around!).
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNpzRKd'
+} %}
+
+{% Aside 'key-term' %}
+Font family vs Typeface: A **typeface** is referred to by
+its family name plus its font face. `Helvetica Bold` is referring to the
+specific bold typeface while `Helvetica` is generically referring to the entire
+family of 8+ typefaces (normal, bold, italic, etc). With CSS `@font-face` you'll be dealing with typefaces, even
+though to use them you need to write `font-family`.
+{% endAside %}
+
+## How to scale fonts with `size-adjust`
+
+An introduction to the syntax:
+
+```css/2
+@font-face {
+  font-family: "Adjusted Typeface";
+  size-adjust: 150%;
+  src: url(some/path/to/typeface.woff2) format('woff2');
+}
+```
+
+1. Creates a custom typeface named `Adjusted Typeface`.
+1. Uses `size-adjust` to scale up each glyph to 150% their default size.
+1. Affects only the single imported typeface.
+
+Use the above custom typeface like this:
+
+```css
+h1 {
+  font-family: "Adjusted Typeface";
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLMKgRx'
+} %}
+
+{% Aside 'warning' %}
+If the second headline in the above demo is not larger than the
+first one, your browser does not support `size-adjust`.
+{% endAside %}
+
+### Mitigating CLS with seamless font swapping
+
+In the following gif, watch the examples on the left and how there's a shift
+when the font is changed. This is just a small example with a single headline
+element and the issue is very noticeable.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/6xhatUhszn7M6pDFcVgV.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    The example on the left has layout shift, the one on the right does not.
+  </figcaption>
+</figure>
+
+To improve font rendering, a great technique is [font
+swapping](https://developer.chrome.com/docs/lighthouse/performance/font-display/). Render a quick-loading
+system font to show the content first, then swap that with a web font when
+the web font finishes loading. This gives you the best of both worlds: the
+content is visible as soon as possible, and you get a nicely styled page without
+sacrificing your user's time to content. The problem however, is that sometimes
+when the web font loads, it shifts the entire page around since it presents at a
+slightly different box height size.
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/F7CwbZuMHaapGTeXRfSJ.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    more content equals more potential layout shift when font swaps
+  </figcaption>
+</figure>
+
+By putting `size-adjust` in the `@font-face` rule, it sets a global glyph
+adjustment for the font face. Timing this right will lead to minimal visual
+change, a seamless swap. To create a seamless swap, hand adjust or try this
+[size-adjust
+calculator](https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback)
+by [Malte Ubl](https://twitter.com/cramforce).
+
+<figure>
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Tw8J2e0ymyGogeA7NJjY.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Choose a <a href="https://fonts.google.com/">Google Web Font</a>, get back a pre-adjusted <code>@font-face</code> snippet.
+  </figcaption>
+</figure>
+
+At the beginning of this post, fixing the font size issue was done by trial and
+error. `size-adjust` was nudged in the source code until the same header in
+`Cookie` and `Arial` rendered the same `64px` as `Press Start 2P` did naturally.
+I aligned two fonts to a target font size.
+
+```css
+@font-face {
+  font-family: 'Adjusted Arial';
+  size-adjust: 86%;
+  src: local(Arial);
+}
+
+@font-face {
+  font-family: 'Cookie';
+  size-adjust: 90.25%;
+  src: url(...woff2) format('woff2');
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOBzyop'
+} %}
+
+### Calibrating fonts
+
+You as the author determine the calibration target(s) for normalizing font
+scale. You might normalize on Times, Arial, or a system font, then adjust custom
+fonts to match. Or, you might adjust local fonts to match what you download.
+
+Strategies for `size-adjust` calibration:
+1. **Remote target:**<br>Adjust local fonts towards downloaded fonts.
+1. **Local target:**<br>Adjust downloaded fonts towards local target fonts.
+
+#### Example 1: Remote target
+
+Consider the following snippet which adjusts a locally available font to size
+match a remote src custom font. A remote custom font is the target for
+calibration, a brand font perhaps:
+
+```css/2-3
+@font-face {
+  font-family: "Adjusted Regular Arial For Brand";
+  src: local(Arial);
+  size-adjust: 90%;
+}
+
+@font-face {
+  font-family: "Rad Brand";
+  src: url(some/path/to/a.woff2) format('woff2');
+}
+
+html {
+  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
+}
+```
+
+In this example, local font Arial is adjusting in anticipation of a loaded custom font, for a
+seamless swap.
+
+This strategy has an advantage of offering designers and developers the same
+font for sizing and typography. **The brand is the calibration target.** This is
+great news for design systems.
+
+Having a brand typeface as the target is also how Malte's calculator works.
+Choose a Google Font and it will calculate how to adjust Arial to seamlessly
+swap with it. Here's an example of Roboto CSS from [the
+calculator](https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback),
+where Arial is loaded and named "Roboto-fallback":
+
+```css
+@font-face {
+    font-family: "Roboto-fallback";
+    size-adjust: 100.06%;
+    src: local("Arial");
+}
+```
+
+{% Aside "warning" %}
+The order of `font-family` is critical. It's where order
+and priority go. Ensure the typeface you want the most, is first. Furthermore,
+`local(Arial)` may not be available on all your user's devices, therefore it's
+important to provide multiple fallbacks in the font-family.
+{% endAside %}
+
+To create a fully cross platform adjustment, see the following example which provides 2 adjusted local fallback fonts in anticipation of a brand font.
+
+```css
+@font-face {
+    font-family: "Roboto-fallback-1";
+    size-adjust: 100.06%;
+    src: local("Arial");
+}
+
+@font-face {
+    font-family: "Roboto-fallback-2";
+    size-adjust: 99.94%;
+    src: local("Arimo");
+}
+
+@font-face {
+  font-family: "Roboto Regular";
+  src: url(some/path/to/roboto.woff2) format('woff2');
+}
+
+html {
+  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
+}
+```
+
+#### Example 2: Local target
+
+Consider the following snippet which adjusts a brand custom font to match Arial:
+
+```css/3
+@font-face {
+  font-family: "Rad Brand - Adjusted For Arial";
+  src: url(some/path/to/a.woff2) format('woff2');
+  size-adjust: 110%;
+}
+
+html {
+  font-family: "Rad Brand - Adjusted For Arial", Arial;
+}
+```
+
+
+This strategy has the advantage of rendering without any adjustments, then
+adjusting any incoming fonts to match.
+
+## Finer tuning with `ascent-override`, `descent-override` and `line-gap-override`
+
+If generic scaling of glyphs isn't enough adjustment for your design or loading
+strategies, here are some finer tuning options that work along with
+`size-adjust`. The
+[`ascent-override`](https://developer.mozilla.org/docs/Web/CSS/@font-face/ascent-override),
+[`descent-override`](https://developer.mozilla.org/docs/Web/CSS/@font-face/descent-override),
+and
+[`line-gap-override`](https://developer.mozilla.org/docs/Web/CSS/@font-face/line-gap-override)
+properties are currently implemented in Chromium 87+, and Firefox 89+.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/R0VZLOdnHUWpAomfMK3g.png",
+alt="scissors above and blow the word overrides, demonstrating the areas the
+features can trim to", width="800", height="136" %}
+
+### `ascent-override`
+
+{% BrowserCompat 'css.at-rules.font-face.ascent-override' %}
+
+The `ascent-override` descriptor defines the height above the baseline of a
+font.
+
+```css/3
+@font-face {
+  font-family: "Ascent Adjusted Arial Bold";
+  src: local(Arial Bold);
+  ascent-override: 71%;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZEexebZ'
+} %}
+
+The red headline (unadjusted) has space above it's capital letter A and O, while
+the blue headline has been adjusted so it's [cap
+height](https://en.wikipedia.org/wiki/Cap_height) fits snug against the overall
+bounding box.
+
+### `descent-override`
+
+{% BrowserCompat 'css.at-rules.font-face.descent-override' %}
+
+The `descent-override` descriptor defines the height below the baseline of the
+font.
+
+```css/3
+@font-face {
+  font-family: "Ascent Adjusted Arial Bold";
+  src: local(Arial Bold);
+  descent-override: 0%;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJpvpNQ'
+} %}
+
+The red headline (unadjusted) has space below it's D and O
+[baselines](https://en.wikipedia.org/wiki/Baseline_(typography)), while the blue
+headline has been adjusted so it's letters rest snug on the baseline.
+
+### `line-gap-override`
+
+{% BrowserCompat 'css.at-rules.font-face.line-gap-override' %}
+
+ The `line-gap-override` descriptor defines the line-gap metric for the font.
+ This is the font recommended line-gap or external leading.
+
+```css/3
+@font-face {
+  font-family: "Line Gap Adjusted Arial";
+  src: local(Arial);
+  line-gap-override: 50%;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxqWqOw'
+} %}
+
+The red headline (unadjusted) has no `line-gap-override`, essentially it's at
+`0%`, while the blue headline has been adjusted up by 50%, creating space above
+and below the letters accordingly.
+
+### Putting it all together
+
+Each of these overrides offer an additional way to trim excess from the web's
+safe text bounding box. You can tailor the text box for precise presentation.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poeLebG'
+} %}
+
+{% Aside 'warning' %} If any of the above demos aren't showing differences, your
+browser does not support the overrides. {% endAside %}
+
+## Conclusion
+
+The `@font-face` `size-adjust` CSS feature is an exciting way to customize the
+text bounding box of your web layouts to improve the font swapping experience
+thus avoiding layout shift for your users. To learn more, check out these
+resources:
+- [CSS Fonts Level 5
+  Spec](https://drafts.csswg.org/css-fonts-5/#size-adjust-desc)
+- [Size Adjust on
+  MDN](https://developer.mozilla.org/docs/Web/CSS/@font-face/size-adjust)
+- [Seamless swap @font-face
+  generator](https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat)
+- [Cumulative Layout Shift (CLS) on web.dev](/cls/)
+- [A New Way To Reduce Font Loading Impact: CSS Font Descriptors
+  ](https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/)
+
+*Photo by [Kristian Strand](https://unsplash.com/@kristianstrand) on [Unsplash](https://unsplash.com/photos/p8gzCnZf39k)*
diff --git a/src/site/content/en/blog/css-subgrid/index.md b/src/site/content/en/blog/css-subgrid/index.md
new file mode 100644
index 00000000000..d77b1a15173
--- /dev/null
+++ b/src/site/content/en/blog/css-subgrid/index.md
@@ -0,0 +1,298 @@
+---
+layout: post
+title: CSS Subgrid
+subhead: Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.
+authors:
+  - adamargyle
+description: Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.
+date: 2023-09-28
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/rDnxcd4Rfi3IshxgycTI.jpg
+thumbthumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/YBHDDJ4JLX0Z72aHNu0i.png
+alt: A grid of grids but done with vegetables. It is three columns and each column has a varying amount of rows to show its vegetables.
+tags:
+  - blog
+  - css
+---
+
+<style>
+  .auto-aspect {
+    aspect-ratio: auto;
+  }
+
+  figcaption {
+    text-wrap: balance;
+  }
+</style>
+
+[CSS grid](/learn/css/grid/) is a very powerful layout engine,
+but the row and column tracks created on a parent grid can only be used to
+position direct children of the grid container. Any author defined [named grid
+areas and lines](/learn/css/grid/#named-grid-lines) were lost on
+any other element than a direct child. With `subgrid`, track sizing, templates
+and names can be shared with nested grids. This article explains how it works.
+
+{% Aside 'celebration' %}
+Special thanks to Microsoft Edge's Web Platform
+engineers for their contribution of subgrid to Chromium! This CSS feature was
+made available thanks to their great work: Alison Maher, Ethan Jimenez, Kurt
+Catti-Schmidt, Ana Sollano Kim and Daniel Libby. An additional special thanks to
+Ian Kilpatrick from the Google Chromium team for helping this land as well.
+Shout outs and kudos all around!
+{% endAside %}
+
+**Before** subgrid, content was often hand tailored to avoid ragged layouts like
+this one.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/UnomSiV22ITeHGkI8aFV.png",
+  alt="Three cards are shown side by side, each with three bits of content:
+header, paragraph and link. Each are of a different text length, creating some
+awkward alignments in the cards as they sit next to each other.",
+  width="800",
+  height="412"
+%}
+
+**After** subgrid, aligning the variably sized content is possible.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Dq1MzAIwsk8AJFtSJbWZ.png",
+  alt="Three cards are shown side by side, each with three bits of content:
+header, paragraph and link. Each are of a different text length, but subgrid has
+fixed the alignments by allowing the tallest of each content item to set the row
+height, fixing any alignment issues.",
+  width="800",
+  height="412"
+%}
+
+{% BrowserCompat 'css.properties.grid-template-columns.subgrid' %}
+
+## Subgrid basics
+
+Here is a straightforward use case introducing the basics of CSS `subgrid`. A
+grid is defined with two named columns, the first is `20ch` wide and the second
+is "the rest" of the space `1fr`. The column names aren't required but they're
+great for illustrative and educational purposes.
+
+```css
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: [column-1] 20ch [column-2] 1fr;
+}
+```
+
+Then, a child of that grid, spans those two columns, is set as a grid container,
+and adopts the columns of its parent by setting `grid-template-columns` to
+`subgrid`.
+
+```css
+.grid > .subgrid {
+  grid-column: span 2;
+
+  display: grid;
+  grid-template-columns: subgrid; /* 20ch 1fr */
+}
+```
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BS5avtsMBdfLsPFACRwO.png", alt="A screenshot of the CSS grid DevTools, showing two columns side by side with a name at the start of their column line.", width="800", height="278" %}
+  <figcaption>
+    <a href="https://codepen.io/web-dot-dev/pen/NWezjXv">https://codepen.io/web-dot-dev/pen/NWezjXv</a>
+  </figcaption>
+</figure>
+
+That's it, a parent grid's columns have been effectively passed down a level to
+a subgrid. This subgrid can now assign children to either of those columns.
+
+**Challenge!** Repeat the same demo but do it for `grid-template-rows`.
+
+## Sharing a page level "macro" grid
+
+Designers often work with shared grids, drawing lines over an entire design,
+aligning any element they want to it. Now web developers can too! This exact
+workflow can now be achieved, plus many more.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/dGp49ObaTqFrp7eNADZx.mp4",
+    controls="true",
+    loop="true",
+    muted="true",
+    autoplay="true",
+    class="auto-aspect"
+  %}
+  <figcaption>From macro grid to finished design.
+  Grid named areas are created upfront
+  and later components are placed as desired.
+  </figcaption>
+</figure>
+
+Implementing the most common designer grid workflow can provide excellent
+insights into the capabilities, workflows, and potentials of `subgrid`.
+
+Here's a screenshot taken from Chrome DevTools of a mobile page layout macro
+grid. The lines have names and there are clear areas for component placement.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/8DcaxQKfWCUTYvM0jX5W.png", alt="A
+screenshot from Chrome CSS grid DevTools showing a mobile sized grid layout
+where rows and columns are named for quick identification: fullbleed,
+system-status, primary-nav, primary-header, main, footer and system-gestures.",
+width="800", height="625" %}
+
+The following CSS creates this grid, with named rows and columns for the device
+layout. Each row and column has a size.
+
+```css
+.device {
+    display: grid;
+    grid-template-rows:
+      [system-status] 3.5rem
+      [primary-nav] 3rem
+      [primary-header] 4rem
+      [main] auto
+      [footer] 4rem
+      [system-gestures] 2rem
+    ;
+    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
+}
+```
+
+Some additional styles give the following design.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3ApdWnQMSsdHp4HxLFiU.png",
+alt="Same CSS DevTools grid overlay as before, but this time with some of the
+mobile system UI present, some shadows and a little color. Helps see where the
+design is going.", width="800", height="625" %}
+
+Inside this parent, are various nested elements. The design requires a full
+width image under the nav and header rows. The furthest left and right column
+line names are `fullbleed-start` and `fullbleed-end`. Naming grid lines this way
+enables children to align to each simultaneously with the [placement
+shorthand](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/)
+of `fullbleed`. It’s very convenient as you’ll soon see.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/8Og87j0has0wdFnSWjt4.png", alt="A
+zoomed in screenshot of the grid overlay from DevTools, focusing specifically on
+the fullbleed-start and fullbleed-end column names.", width="800", height="207"
+%}
+
+With the overall device layout created with nice named rows and columns, use
+`subgrid` to pass the well named rows and columns to nested grid layouts. This
+is that `subgrid` magic moment. The device layout passes the named rows and
+columns to the app container, which then passes it on to every one of its
+children.
+
+```css
+.device > .app,
+.app > * {
+    display: grid;
+    grid: subgrid / subgrid;
+
+    /* same as */
+    grid-template-rows: subgrid;
+    grid-template-columns: subgrid;
+}
+```
+
+**CSS subgrid is a value used in place of a list of grid tracks.** The rows and
+columns the element is spanning from its parent, are now the same rows and
+columns it offers. This makes the line names from the `.device` grid available
+to children of `.app`, instead of only `.app`. Elements inside of `.app` were
+not able to reference the grid tracks created by `.device` before subgrid.
+
+{% Aside 'gotcha' %}
+`display: grid` is required on every element that wishes to
+subscribe or pass on rows and columns.
+{% endAside %}
+
+With this all defined, the nested image is now able to go full bleed in the
+layout thanks to `subgrid`. No negative values or tricks, instead a nice
+one-liner that says “my layout spans from `fullbleed-start` to `fullbleed-end`.”
+
+```css
+.app > main img {
+    grid-area: fullbleed;
+}
+```
+
+<figure>
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6QIh2ogOS21KjBwcfFuf.png",
+    alt="The finished macro layout, complete with a full width nested image sitting properly undeath the primary nav and header rows and extending to each of the fullbleed named column lines.",
+    width="800",
+    height="625"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/web-dot-dev/pen/WNLyjzX">https://codepen.io/web-dot-dev/pen/WNLyjzX</a>
+  </figcaption>
+</figure>
+
+There you have it, a macro grid like designers use, implemented in CSS. This
+concept can scale and grow with you as needed.
+
+## Checking for support
+
+Progressive enhancement with CSS and subgrid is familiar and straightforward.
+Use `@supports` and inside the parenthesis ask the browser if it understands
+subgrid as a value for template columns or rows. The following example checks if
+the `grid-template-columns` property supports the `subgrid` keyword, which if
+true, means that subgrid can be used
+
+```css
+@supports (grid-template-columns: subgrid) {
+  /* safe to enhance to */
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKrJPZQ',
+  tab: 'css,result'
+} %}
+
+## Devtools
+
+Chrome, Edge, Firefox and Safari all have great CSS grid DevTools, and Chrome,
+Edge and Firefox have specific tools for helping with subgrid. [Chrome
+announced their tools in
+115](https://developer.chrome.com/blog/new-in-devtools-115/#subgrid) while
+Firefox has had them for a year or more.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/stbBs4EgwIRBfmkLHN9x.png",
+alt="Screenshot preview of the subgrid badge found on elements in the Elements
+panel.", width="800", height="201" %}
+
+The subgrid badge acts like the grid badge but visually distinguishes which
+grids are subgrids and which aren’t.
+
+## Resources
+
+This list is a compilation of subgrid articles, demos and overall inspiration
+for getting started. If you’re looking for the next step for your subgrid
+education, have fun exploring all these great resources!
+
+- <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid">MDN</a>
+- <a href="https://codepen.io/rachelandrew/pen/VVGZVW">Rachel Andrew with aligned captions</a>
+- <a href="https://12daysofweb.dev/2022/css-subgrid/">Rachel Andrew with 10 great examples</a>
+- <a href="https://gridbyexample.com/examples/#css-grid-level-2-examples">Rachel Andrew with a site of examples</a>
+- <a href="https://ishadeed.com/article/learn-css-subgrid/">Ahmad Shadeed article</a>
+- <a href="https://youtu.be/tueTFd2TQUA?t=2266">Michelle Barker at CSS Day 2022</a>
+- Cards
+  - <a href="https://codepen.io/jh3y/pen/abKaYqO">Codepen by Jhey</a>
+  - <a href="https://codepen.io/shadeed/pen/qBpQNQY">Codepen by Ahmad Shadeed</a>
+  - <a href="https://codepen.io/tonkotsuboy/pen/LYexpZp">Codepen by Takeshi Kano</a>
+  - <a href="https://codepen.io/ArvidW/pen/rNrGjvW">Codepen by Arvid</a>
+  - <a href="https://codepen.io/chriscoyier/pen/bGRXmEe">Codepen by Chris Coyier</a>
+  - <a href="https://codepen.io/miriamsuzanne/pen/xxKRpmq">Codepen by Miriam Suzanne</a>
+- <a href="https://codepen.io/chriscoyier/pen/YzxqJap">Chris Coyier with forms</a>
+- <a href="https://codepen.io/facundocorradini/pen/wvBBpJM">Facundo Corradini with form alignment</a>
+- <a href="https://codepen.io/chriscoyier/pen/mdemZaw">Chris Coyier with aligning list item markers</a>
+- <a href="https://codepen.io/michellebarker/pen/wvyBjOz">Michelle Barker popping out of container to align with parent grid</a>
+- <a href="https://codepen.io/miriamsuzanne/pen/ZEEbxro">Miriam Suzanne showing named line names and subgrid interactions</a>
+- <a href="https://codepen.io/kevinpowell/pen/RwgvMMb">Kevin Powell with named area basics</a>
+- <a href="https://codepen.io/kevinpowell/pen/XWgoWRx">Kevin Powell with aligned lists</a>
+- <a href="https://codepen.io/shannonmoeller/pen/poLQLoO">Shannon Moeller with aligned lists</a>
+- <a href="https://codepen.io/kevinpowell/pen/LYVmpqY">Kevin Powell with a page level grid passed down to components</a>
+- <a href="https://codepen.io/elad2412/pen/KKaXOPG">Elad Shechter with a devtool overlay and fallback</a>
+- <a href="https://codepen.io/aaroniker/pen/OeyayK">Aaron Iker with a nice typographic use of subgrid for baseline alignment of footnotes</a>
+- <a href="https://codepen.io/argyleink/pen/ExbzqWp">Adam Argyle with a fullbleed image inside an article</a>
diff --git a/src/site/content/en/blog/css-trig-functions/index.md b/src/site/content/en/blog/css-trig-functions/index.md
new file mode 100644
index 00000000000..7816d791a8b
--- /dev/null
+++ b/src/site/content/en/blog/css-trig-functions/index.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Trigonometric functions in CSS
+authors:
+  - bramus
+subhead: >
+  Calculate the sine, cosine, tangent, and more in CSS.
+description: >
+  Calculate the sine, cosine, tangent, and more in CSS.
+date: 2023-03-08
+hero: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/dG0sJst2uPCE6Z1g4AZm.jpg
+alt: Colorful triangles.
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% endAside %}
+
+## Trigonometric functions
+
+In CSS it’s possible to write [mathematical expressions](/learn/css/functions/#mathematical-expressions). At the base sits the `calc()` function to do calculations, but most likely you’ve also heard of [`min()`, `max()`, and `clamp()`](/min-max-clamp/) as well.
+
+Joining these functions in Chrome 111 are the trigonometric functions `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()`. These functions are [defined in the CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/#trig-funcs) and are available in all browsers.
+
+{% BrowserCompat 'css.types.cos' %}
+
+### `sin()`, `cos()`, and `tan()`
+
+The core three “trig functions” are:
+
+
+- `cos()`: Returns the cosine of an angle, which is a value between `-1` and `1`.
+- `sin()`: Returns the sine of an angle, which is a value between `-1` and `1`.
+- `tan()`: Returns the tangent of an angle, which is a value between `−∞` and `+∞`.
+
+Unlike their JavaScript counterparts, these functions accept both angles and radians as their argument.
+
+In the demo below, these functions are used to draw the lines that make up the triangle surrounding the set `--angle`:
+
+- The “hypotenuse” _(yellow line)_ is a line from the center of the circle to the position of the dot. Its length is equal to the `--radius` of the circle.
+- The “adjacent” _(red line)_ is a line from the center of the circle along the X-axis. Its length is equal to the `--radius` multiplied by the cosine of the `--angle`.
+- The “opposite” _(blue line)_ is a line from the center of the circle along the Y-axis. Its length is equal to the `--radius` multiplied by the sine of the `--angle`.
+- The `tan()` function of the `--angle` is used to draw the green line from the dot towards the X-axis.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWLxROo',
+  height: 740,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+{% Aside %}
+For a good introduction on Trigonometry go check [Math is Fun](https://www.mathsisfun.com/sine-cosine-tangent.html)
+{% endAside %}
+
+### `asin()`, `acos()`, `atan()`, and `atan2()`
+
+The “arc” or “inverse” counterparts to `sin()`, `cos()`, and `tan()` are `asin()`, `acos()`, and `atan()` respectively. These functions do the calculation in the opposite direction: they take a numeric value as their argument and return the corresponding angle for it.
+
+Finally there’s `atan2()` which accepts two arguments `A` and `B`. The function returns the angle between the positive X-axis and the point `(B,A)`.
+
+## Examples
+
+There are various use-cases for these functions. What follows is a small selection.
+
+### Move items on a circular path around a central point
+
+In the demo below, the dots revolve around a central point. Instead of rotating each dot around its own center and then moving it outwards, each dot is translated on the X and Y axes. The distances on the X and Y axes are determined by taking the `cos()` and, respectively, the `sin()` of the `--angle` into account.
+
+```css
+:root {
+  --radius: 20vmin;
+}
+
+.dot {
+  --angle: 30deg;
+  translate: /* Translation on X-axis */
+             calc(cos(var(--angle)) * var(--radius))
+
+             /* Translation on Y-axis */
+             calc(sin(var(--angle)) * var(--radius) * -1)
+  ;
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExePgOg',
+  height: 600,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+To distribute the dots evenly around the central point, each dot is given an additional offset based on its `nth-child` index. For example, if there are three dots, there’s a distance of `120deg` (= `360deg / 3`) between each dot.
+
+- The first child element out of three gets offset by `0 x 120deg` = `0deg`.
+- The second child element out of three gets offset by `1 x 120deg` = `120deg`.
+- The third child element out of three gets offset by `2 x 120deg` = `240deg`.
+
+### Rotate an element to face its origin
+
+The `atan2()` function calculates the relative angle from one point to another. The function accepts two comma-separated values as its parameters: the `y` and `x` position of the other point, relative to the originating point which sits at origin `0,0`.
+
+With the calculated value it’s possible to rotate elements so that they face each other, by using the [Individual Transform Properties](/css-individual-transform-properties/).
+
+In the example below, the boxes are rotated so that they face the location of the mouse. The mouse position is synced to a custom property through JavaScript.
+
+```css
+div.box {
+  --my-x: 200;
+  --my-y: 300;
+
+  /* Position the box inside its parent */
+  position: absolute;
+  width: 50px;
+  aspect-ratio: 1;
+  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);
+
+  /* Rotate so that the box faces the mouse position */
+  /* For this, take the box its own position and size (25 = half the width) into account */
+  rotate: atan2(
+            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
+            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
+          );
+}
+```
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyqGpQV',
+  height: 720,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+### Community highlight
+
+As demonstrated in this [Animated Möbius strip by Ana Tudor](https://codepen.io/thebabydino/pen/wvybyMo), `cos()` and `sin()` can be used for more than just translations. Here their outcome is used to manipulate the the `s` and `l` components of [the `hsl()` color function](https://developer.chrome.com/articles/high-definition-css-color-guide/#hsl).
+
+{% Codepen {
+  user: 'thebabydino',
+  id: 'wvybyMo',
+  height: 600,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+_Cover photo by [Tamanna Rumee](https://unsplash.com/@tamanna_rumee) on [Unsplash](https://unsplash.com/photos/7OCUyev2M9E)_
diff --git a/src/site/content/en/blog/css-vs-javascript/index.md b/src/site/content/en/blog/css-vs-javascript/index.md
new file mode 100644
index 00000000000..de8738bd08c
--- /dev/null
+++ b/src/site/content/en/blog/css-vs-javascript/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: CSS versus JavaScript animations
+subhead: You can animate with CSS or JavaScript. Which should you use, and why?
+authors:
+  - paullewis
+  - samthorogood
+date: 2014-08-08
+updated: 2019-08-03
+description: You can animate with CSS or JavaScript. Which should you use, and why?
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+There are two primary ways to create animations on the web: with CSS and with JavaScript. Which one you choose really depends on the other dependencies of your project, and what kinds of effects you're trying to achieve.
+
+## Summary
+* Use CSS animations for simpler "one-shot" transitions, like toggling UI element states.
+* Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.
+* If you choose to animate with JavaScript, use the Web Animations API or a modern framework that you're comfortable with.
+
+
+Most basic animations can be created with either CSS or JavaScript, but the amount of effort and time differs (see also [CSS vs JavaScript Performance](/animations-and-performance/#css-vs-javascript-performance)). Each has its pros and cons, but these are good guidelines:
+
+* **Use CSS when you have smaller, self-contained states for UI elements.** CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS.
+* **Use JavaScript when you need significant control over your animations.** The Web Animations API is the standards-based approach, available today in most modern browsers. This provides real objects, ideal for complex object-oriented applications. JavaScript is also useful when you need to stop, pause, slow down, or reverse your animations.
+* **Use `requestAnimationFrame` directly when you want to orchestrate an entire scene by hand.** This is an advanced JavaScript approach, but can be useful if you're building a game or drawing to an HTML canvas.
+
+
+{% YouTube id="WaNoqBAp8NI" %}
+
+
+Alternatively, if you're already using a JavaScript framework that includes animation functionality, such as via jQuery's [`.animate()`](https://api.jquery.com/animate/) method or [GreenSock's TweenMax](https://github.com/greensock/GreenSock-JS/tree/master/src/minified), then you may find it more convenient overall to stick with that for your animations.
+
+
+## Animate with CSS
+
+Animating with CSS is the simplest way to get something moving on screen. This approach is described as *declarative*, because you specify what you'd like to happen.
+
+Below is some CSS that moves an element `100px` in both the X and Y axes. It's done by using a CSS transition that's set to take `500ms`. When the `move` class is added, the `transform` value is changed and the transition begins.
+
+```css
+.box {
+  transform: translate(0, 0);
+  transition: transform 500ms;
+}
+
+.box.move {
+  transform: translate(100px, 100px);
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-simple.html)
+
+Besides the transition's duration, there are options for the *easing*, which is essentially how the animation feels. For more information about easing, see [The Basics of Easing](/the-basics-of-easing/) guide.
+
+If, as in the above snippet, you create separate CSS classes to manage your animations, you can then use JavaScript to toggle each animation on and off:
+
+```js
+box.classList.add('move');
+```
+
+
+Doing this provides a nice balance to your apps. You can focus on managing state with JavaScript, and simply set the appropriate classes on the target elements, leaving the browser to handle the animations. If you go down this route, you can listen to `transitionend` events on the element, but only if you’re able to forego support for older versions of Internet Explorer; version 10 was the first version to support these events. All other browsers have supported the event for some time.
+
+The JavaScript required to listen for the end of a transition looks like this:
+
+```js
+var box = document.querySelector('.box');
+box.addEventListener('transitionend', onTransitionEnd, false);
+
+function onTransitionEnd() {
+    // Handle the transition finishing.
+}
+```
+
+In addition to using CSS transitions, you can also use CSS animations, which allow you to have much more control over individual animation keyframes, durations, and iterations.
+
+{% Aside %}
+If you’re new to animations, keyframes are an old term from hand-drawn animations. Animators would create specific frames for a piece of action, called key frames, which would capture things like the most extreme part of some motion, and then they would set about drawing all the individual frames in between the keyframes. We have a similar process today with CSS animations, where we instruct the browser what values CSS properties need to have at given points, and it fills in the gaps.
+{% endAside %}
+
+You can, for example, animate the box in the same way with transitions, but have it animate without any user interactions like clicking, and with infinite repetitions. You can also change multiple properties at the same time.
+
+
+```css
+.box {
+  animation-name: movingBox;
+
+  animation-duration: 1300ms;
+
+  animation-iteration-count: infinite;
+
+  animation-direction: alternate;
+}
+
+@keyframes movingBox {
+  0% {
+    transform: translate(0, 0);
+    opacity: 0.3;
+  }
+
+  25% {
+    opacity: 0.9;
+  }
+
+  50% {
+    transform: translate(100px, 100px);
+    opacity: 0.2;
+  }
+
+  100% {
+    transform: translate(30px, 30px);
+    opacity: 0.8;
+  }
+}
+```
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-keyframes.html)
+
+With CSS animations you define the animation itself independently of the target element, and use the `animation-name` property to choose the required animation.
+
+If you want your CSS animations to work on older browsers, you will need to add vendor prefixes. Many tools can help you create the prefixed versions of the CSS you need, allowing you to write the unprefixed version in your source files.
+
+## Animate with JavaScript and the Web Animations API
+
+Creating animations with JavaScript is, by comparison, more complex than writing CSS transitions or animations, but it typically provides developers significantly more power. You can use the [Web Animations API](https://w3c.github.io/web-animations/) to either animate specific CSS properties or build composable effect objects.
+
+JavaScript animations are *imperative*, as you write them inline as part of your code. You can also encapsulate them inside other objects. Below is the JavaScript that you would need to write to re-create the CSS transition described earlier:
+
+```js
+var target = document.querySelector('.box');
+var player = target.animate([
+    {transform: 'translate(0)'},
+    {transform: 'translate(100px, 100px)'}
+], 500);
+player.addEventListener('finish', function() {
+    target.style.transform = 'translate(100px, 100px)';
+});
+```
+
+By default, Web Animations only modify the presentation of an element. If you'd like to have your object remain at the location it has moved to, then you should modify its underlying styles when the animation has finished, as per our sample.
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-wa.html)
+
+The Web Animations API is a relatively new standard from the W3C. It is supported natively in most modern browsers. For non-supporting modern browsers, [a polyfill is available](https://github.com/web-animations/web-animations-js).
+
+With JavaScript animations, you're in total control of an element's styles at every step. This means you can slow down animations, pause them, stop them, reverse them, and manipulate elements as you see fit. This is especially useful if you're building complex, object-oriented applications, because you can properly encapsulate your behavior.
diff --git a/src/site/content/en/blog/css-web-vitals/index.md b/src/site/content/en/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..1352826c512
--- /dev/null
+++ b/src/site/content/en/blog/css-web-vitals/index.md
@@ -0,0 +1,485 @@
+---
+title: CSS for Web Vitals
+subhead: CSS-related techniques for optimizing Web Vitals
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: Multi-colored gradient
+
+description:
+  This article covers CSS-related techniques for optimizing Web Vitals.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - css
+---
+
+The way you write your styles and build layouts can have a major impact on [Core
+Web Vitals](/learn-core-web-vitals/). This is particularly true for
+[Cumulative Layout Shift (CLS)](/cls) and [Largest Contentful
+Paint (LCP)](/lcp).
+
+This article covers CSS-related techniques for optimizing Web Vitals. These
+optimizations are broken down by different aspects of a page: layout, images,
+fonts, animations, and loading. Along the way, we'll explore improving an
+[example page](https://codepen.io/una/pen/vYyLKvY):
+
+
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png",
+  alt="Screenshot of example site",
+  width="800",
+  height="646"
+%}
+
+
+## Layout
+
+
+### Inserting content into the DOM
+
+Inserting content into a page after the surrounding content has already loaded
+pushes everything else on the page down. This causes [layout
+shifts](/cls/#layout-shifts-in-detail).
+
+[Cookie notices](/cookie-notice-best-practices/), particularly
+those placed at the top of the page, are a common example of this problem. Other
+page elements that often cause this type of layout shift when they load include
+ads and embeds.
+
+
+#### Identify
+
+The Lighthouse "Avoid large layout shifts" audit identifies page elements that
+have shifted. For this demo, the results look like this:
+
+
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png",
+    alt="Lighthouse's 'Avoid large layout shifts' audit",
+    width="800",
+    height="500"
+%}
+
+
+The cookie notice is not listed in these findings because the cookie notice
+itself isn't shifting when it loads. Rather, it causes the items below it on the
+page (that is, `div.hero` and `article`) to shift. For more information on
+identifying and fixing layout shifts, see [Debugging Layout
+Shifts](/debugging-layout-shifts).
+
+{% Aside %}
+
+Lighthouse only analyzes a page's performance up until the "page load" event.
+Cookie banners, ads, and other widgets sometimes do not load until after page
+load. These layout shifts still affect users—even if they are not flagged by
+Lighthouse.
+
+{% endAside %}
+
+
+#### Fix
+
+Place the cookie notice at the bottom of the page using absolute or fixed
+positioning.
+
+
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png",
+    alt="Cookie notice displayed at bottom of page",
+    width="800",
+    height="656"
+%}
+
+
+Before:
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+After:
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+Another way to fix this layout shift would be to reserve space for the cookie
+notice at the top of the screen. This approach is equally effective. For more
+information, see [Cookie notice best
+practices](/cookie-notice-best-practices/).
+
+{% Aside %}
+
+The cookie notice is one of multiple page elements that are triggering layout
+shifts when it loads. To help us get a closer look at these page elements,
+subsequent demo steps will not include the cookie notice.
+
+{% endAside %}
+
+
+## Images
+
+
+### Images and Largest Contentful Paint (LCP)
+
+Images are commonly the Largest Contentful Paint (LCP) element on a page. Other
+[page elements that can be the LCP
+element](/lcp/#what-elements-are-considered) include text blocks
+and video poster images. The time at which the LCP element loads determines LCP.
+
+It's important to note that a page's LCP element can vary from page load to page
+load depending on the content that is visible to the user when the page is first
+displayed. For example, in this demo, the background of the cookie notice, the
+hero image, and the article text are some of the potential LCP elements.
+
+
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png",
+    alt="Diagram highlighting the page's LCP element in different scenarios.",
+    width="800",
+    height="498"
+%}
+
+
+In the example site, the background image of the cookie notice is actually a
+large image. To improve LCP, you could instead paint the gradient in CSS, rather
+than load an image to create the effect.
+
+
+#### Fix
+
+
+
+Change the `.banner` CSS to use a CSS gradient rather than an image:
+
+Before:
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+After:
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+
+### Images and layout shifts
+
+Browsers can only determine the size of an image once the image loads. If the
+image load occurs after the page has been rendered, but no space has been
+reserved for the image, a layout shift occurs when the image appears. In the
+demo, the hero image is causing a layout shift when it loads.
+
+{% Aside %}
+The phenomenon of images causing layout shifts is more obvious in
+situations where images are slow to load - for example, on a slow connection or
+when loading an image with a particularly large file size.
+{% endAside %}
+
+#### Identify
+
+To identify images without explicit `width` and `height`, use Lighthouse's
+"Image elements have explicit width and height" audit.
+
+
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png",
+    alt="Lighthouse's 'Image elements have explicit width and height' audit",
+    width="800",
+    height="274"
+%}
+
+
+In this example, both the hero image and article image are missing `width` and
+`height` attributes.
+
+
+#### Fix
+
+Set the `width` and `height` attributes on these images to avoid layout shifts.
+
+Before:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
+```
+
+After:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
+```
+
+
+<figure>
+  {% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4" %}
+  <figcaption>
+    The image now loads without causing a layout shift.
+  </figcaption>
+</figure>
+
+
+{% Aside %}
+Another approach to loading images is to use the
+[`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)
+and
+[`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes)
+attributes in conjunction with specifying `width` and `height` attributes. This
+has the additional performance advantage of allowing you to serve different
+sized images to different devices. For more information, see [Serve responsive
+images](/serve-responsive-images/).
+{% endAside %}
+
+
+## Fonts
+
+Fonts can delay text rendering and cause layout shifts. As a result, it is
+important to deliver fonts quickly.
+
+### Delayed text rendering
+
+By default, a browser will not immediately render a text element if its
+associated web fonts have not loaded yet. This is done to prevent a ["flash of
+unstyled text" (FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
+In many situations, this delays [First Contentful Paint
+(FCP)](/fcp). In some situations, this delays Largest Contentful
+Paint (LCP).
+
+{% Aside %}
+
+By default, Chromium-based and Firefox browsers will [block text rendering for
+up to 3 seconds](https://developer.chrome.com/blog/font-display/)
+if the associated web font has not loaded; Safari will block text rendering
+indefinitely. The [block
+period](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline)
+begins when the browser requests a web font. If the font has still not loaded by
+the end of the block period, the browser will render the text using a fallback
+font and swap in the web font once available.
+
+{% endAside %}
+
+### Layout shifts
+
+Font swapping, while excellent for displaying content to the user quickly, has
+the potential to cause layout shifts. These layout shifts occur when a web font
+and its fallback font take up different amounts of space on the page. Using
+similarly proportioned fonts will minimize the size of these layout shifts.
+
+<figure>
+  {% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png",
+    alt="Diagram showing a layout shift caused by a font swap",
+    width="800",
+    height="452"
+  %}
+  <figcaption>
+    In this example, font swapping caused page elements to shift upwards by five pixels.
+  </figcaption>
+</figure>
+
+#### Identify
+
+To see the fonts that are being loaded on a particular page, open the
+**Network** tab in DevTools and filter by **Font**. Fonts can be large files, so
+only using fewer fonts is generally better for performance.
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png",
+    alt="Screenshot of a font displayed in DevTools",
+    width="800",
+    height="252"
+%}
+
+
+To see how long it takes for the font to be requested, click on the **Timing**
+tab. The sooner that a font is requested, the sooner it can be loaded and used.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png",
+  alt="Screenshot of 'Timing' tab in DevTools",
+  width="800",
+  height="340"
+%}
+
+
+To see the request chain for a font, click on the  **Initiator** tab.
+Generally speaking, the shorter the request chain, the sooner the font can be
+requested.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png",
+  alt="Screenshot of 'Initiator' tab in DevTools",
+  width="800",
+  height="189"
+%}
+
+#### Fix
+
+This demo uses the Google Fonts API. Google Fonts provides the option to load
+fonts via `<link>` tags or an `@import` statement. The `<link>` code snippet
+includes a `preconnect` resource hint. This should result in faster
+stylesheet delivery than using the `@import` version.
+
+At a very high-level, you can think of [resource
+hints](https://www.w3.org/TR/resource-hints/#resource-hints) as a way to hint
+to the browser that it will need to set up a particular connection or download a
+particular resource. As a result, the browser will prioritize these actions.
+When using resource hints, keep in mind that prioritizing a particular action
+takes away browser resources from other actions. Thus, resource hints should be
+used thoughtfully and not for everything. For more information, see [Establish
+network connections early to improve perceived page
+speed](/preconnect-and-dns-prefetch/).
+
+Remove the following `@import` statement from your stylesheet:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+Add the following `<link>` tags to the `<head>` of the document:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+These link tags instruct the browser to establish an early connection to
+the origins used by Google Fonts and to load the stylesheet that
+contains the font declaration for Montserrat and Roboto. These `<link>` tags
+should be placed as early in the `<head>` as possible.
+
+
+{% Aside %}
+
+To only load a subset of a font from Google Fonts, add the
+[`?text=`](https://developers.google.com/fonts/docs/getting_started) API
+parameter. For example, `?text=ABC` loads only the characters necessary to
+render "ABC". This is a good way to reduce the file size of a font.
+
+{% endAside %}
+
+
+## Animations
+
+The primary way that animations affect Web Vitals is when they cause layout
+shifts. There are two types of animations that you should avoid using:
+[animations that trigger layout](/animations-guide/#triggers) and
+"animation-like" effects that move page elements. Typically these animations can
+be replaced with more performant equivalents by using CSS properties like
+[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform),
+[`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity), and
+[`filter`](https://developer.mozilla.org/docs/Web/CSS/filter). For more
+information, see [How to create high-performance CSS
+animations](/animations/).
+
+
+### Identify
+
+The Lighthouse "Avoid non-composited animations" audit may be helpful for
+identifying non-performant animations.
+
+
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png",
+    alt="Lighthouse's 'Avoid non-composited animations' audit",
+    width="512",
+    height="132"
+%}
+
+
+{% Aside 'caution' %}
+
+The Lighthouse "Avoid non-composited animations" audit only identifies
+non-performant _CSS animations_; JavaScript-driven animations (for example,
+using
+[`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+to "animate" an element) are bad for performance but will not be flagged by this
+audit.
+
+{% endAside %}
+
+
+### Fix
+
+Change the `slideIn` animation sequence to use `transform: translateX()` rather
+than transitioning the`margin-left` property.
+
+Before:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+After:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+
+## Critical CSS
+
+Stylesheets are render-blocking. This means that the browser encounters a
+stylesheet, it will stop downloading other resources until the browser has
+downloaded and parsed the stylesheet. This may delay LCP. To improve
+performance, consider [removing unused
+CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/),
+[inlining critical CSS](/extract-critical-css/), and [deferring
+non-critical CSS](/defer-non-critical-css/#optimize).
+
+
+## Conclusion
+
+Although there is still room for further improvements (for example, using [image
+compression](/use-imagemin-to-compress-images/) to deliver images
+more quickly), these changes have significantly improved the Web Vitals of this
+site. If this were a real site, the next step would be to [collect performance
+data from real
+users](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data)
+to assess whether it is [meeting the Web Vitals thresholds for most
+users](/vitals-measurement-getting-started/#data-interpretation).
+For more information about Web Vitals, see [Learn Web
+Vitals](/learn-core-web-vitals/).
diff --git a/src/site/content/en/blog/custom-easing/index.md b/src/site/content/en/blog/custom-easing/index.md
new file mode 100644
index 00000000000..700f34e4d87
--- /dev/null
+++ b/src/site/content/en/blog/custom-easing/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: Custom easing
+subhead: Go offroad and create totally custom animations for your projects.
+authors:
+  - paullewis
+  - samthorogood
+date: 2014-08-08
+updated: 2019-08-05
+description: Go offroad and create totally custom animations for your projects.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+
+Sometimes you won't want to use the easing keywords that are included with CSS, or you will be using Web Animations or a JavaScript framework. In these cases, you can typically define your own curves (or equations), and this provides a lot of control over the feel of your project's animations.
+
+## Summary
+* Custom easing allows you to give more personality to your projects.
+* You can create cubic Bézier curves that resemble the default animation curves (ease-out, ease-in, etc.), but with emphasis in different places.
+* Use JavaScript when you need more control over the animation timing and behavior, for example, elastic or bounce animations.
+
+
+If you're animating with CSS, you'll find that you can define cubic Bézier curves to define the timing. In fact, the keywords `ease`, `ease-in`, `ease-out`, and `linear` map to predefined Bézier curves, which are detailed in the [CSS transitions specification](https://www.w3.org/TR/css3-transitions/) and the [Web Animations specification](https://w3c.github.io/web-animations/#scaling-using-a-cubic-bezier-curve).
+
+These Bézier curves take four values, or two pairs of numbers, with each pair describing the X and Y coordinates of a cubic Bézier curve’s control points. The starting point of the Bézier curve has coordinates (0, 0) and the ending point has coordinates (1, 1); you get to set the X and Y values of the two control points. The X values for the two control points must be between 0 and 1, and each control point’s Y value can exceed the [0, 1] limit, although the spec isn’t clear by how much.
+
+Changing the X and Y value of each control point gives you a vastly different curve, and therefore a vastly different feel to your animation. For example, if the first control point is in the lower right area, the animation will be slow to start. If it’s in the top left area, it’s going to be fast to start. Conversely, if the second control point is in the bottom right area of the grid, it’s going to be fast at the end; if it’s in the top left, it will be slow to end.
+
+For comparison, here are two curves: a typical ease-in-out curve and a custom curve:
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/b6nf4Ki4PzKFxEDMIFnX.png", alt="Ease-in-out animation curve.", width="640", height="600" %}
+  </figure>
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/37zeBdZRC3cZGORp151r.png", alt="Custom animation curve.", width="640", height="600" %}
+  </figure>
+
+[See an animation with custom easing](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-custom-curve.html)
+
+The CSS for the custom curve is:
+
+
+```css
+transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
+```
+
+The first two numbers are the X and Y coordinates of the first control point, and the second two numbers are the X and Y coordinates of the second control point.
+
+Making a custom curve is a lot of fun, and it gives you significant control over the feel of the animation. For example, given the above curve, you can see that the curve resembles a classic ease-in-out curve, but with a shortened ease-in, or "getting started," portion, and an elongated slowdown at the end.
+
+Experiment with this [animation curve tool](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/curve-playground.html) and see how the curve affects the feel of an animation.
+
+## Use JavaScript frameworks for more control
+
+Sometimes you need even more control than a cubic Bézier curve can provide. If you wanted an elastic bounce feel, you might consider using a JavaScript framework, because this is a difficult effect to achieve with either CSS or Web Animations.
+
+### TweenMax
+
+One powerful framework is [GreenSock’s TweenMax](https://github.com/greensock/GreenSock-JS/tree/master/src/minified) (or TweenLite if you want to keep things really lightweight), because you get a lot of control from it in a small JavaScript library, and it’s a very mature codebase.
+
+[See an elastic ease animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-elastic.html)
+
+To use TweenMax, include this script in your page:
+
+
+
+```html
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
+```
+
+
+After the script is in place, you can call TweenMax against your element and tell it which properties you’d like, along with any easing you’d like. There are many easing options that you can use; the code below uses an elastic ease-out:
+
+
+```js
+    var box = document.getElementById('my-box');
+    var animationDurationInSeconds = 1.5;
+
+    TweenMax.to(box, animationDurationInSeconds, {
+      x: '100%',
+      ease: 'Elastic.easeOut'
+    });
+```
+
+
+
+The [TweenMax documentation](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/) highlights all the options you have here, so it's well worth a read.
diff --git a/src/site/content/en/blog/custom-elements-best-practices/index.md b/src/site/content/en/blog/custom-elements-best-practices/index.md
new file mode 100644
index 00000000000..f83fa0beb03
--- /dev/null
+++ b/src/site/content/en/blog/custom-elements-best-practices/index.md
@@ -0,0 +1,557 @@
+---
+title: Custom Element Best Practices
+subhead: Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements.
+description: |
+  Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements.
+date: 2017-08-14
+updated: 2019-09-05
+---
+
+
+Custom elements allow you to extend HTML and define your own tags. They're an
+incredibly powerful feature, but they're also low-level, which means it's not
+always clear how best to implement your own element.
+
+To help you create the best possible experiences we've put together this
+checklist. It breaks down all the things we think it takes to be a
+well behaved custom element.
+
+## Checklist
+
+### Shadow DOM 
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2><h3>Create a shadow root to encapsulate styles.</h3></th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Encapsulating styles in your element's shadow root ensures that it will work
+  regardless of where it is used. This is especially important if a developer
+  wishes to place your element inside of another element's shadow root. This
+  applies to even simple elements like a checkbox or radio button. It might be
+  the case that the only content inside of your shadow root will be the styles
+  themselves.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>Create your shadow root in the constructor.</h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  The constructor is when you have <b>exclusive knowledge</b> of your element.
+  It's a great time to setup implementation details that you don't want other
+  elements messing around with. Doing this work in a later callback, like the
+  <code>connectedCallback</code>, means you will need to guard against
+  situations where your element is detached and then reattached to the document.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>Place any children the element creates into its shadow root.</h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Children created by your element are part of its implementation and should be
+  private. Without the protection of a shadow root, outside JavaScript may
+  inadvertently interfere with these children.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="https://web.dev/components-howto-tabs/">
+  <code>&lt;howto-tabs&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>Use &lt;slot&gt; to project light DOM children into your shadow DOM</h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+        Allow users of your component to specify content in your component as HTML children makes your component more composable. When a browser does not support custom elements, the nested content remains available, visible and accessible.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-tabs/">
+  <code>&lt;howto-tabs&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Set a <code>:host</code> display style (e.g. <code>block</code>,
+  <code>inline-block</code>, <code>flex</code>) unless you prefer the default of
+  <code>inline</code>.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Custom elements are <code>display: inline</code> by default, so setting their
+  <code>width</code> or <code>height</code> will have no effect. This often
+  comes as a surprise to developers and may cause issues related to
+  laying out the page. Unless you prefer an <code>inline</code> display, you
+  should always set a default <code>display</code> value.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Add a <code>:host</code> display style that respects the hidden attribute.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  A custom element with a default <code>display</code> style, e.g.
+  <code>:host { display: block }</code>, will override the lower specificity
+  built-in
+  <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden">
+  <code>hidden</code> attribute</a>.
+  This may surprise you if you expect setting the <code>hidden</code>
+  attribute on your element to render it <code>display: none</code>. In addition
+  to a default <code>display</code> style, add support for <code>hidden</code>
+  with <code>:host([hidden]) { display: none }</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Attributes and properties
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Do not override author-set, global attributes.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Global attributes are those that are present on all HTML elements. Some
+  examples include <code>tabindex</code> and <code>role</code>. A custom element
+  may wish to set its initial <code>tabindex</code> to 0 so it will be keyboard
+  focusable. But you should always check first to see if the developer using
+  your element has set this to another value. If, for example, they've set
+  <code>tabindex</code> to -1, it's a signal that they don't wish for the
+  element to be interactive.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element. This is further explained in
+  <a href="#dont-override-the-page-author">Don't override the page author.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Always accept primitive data (strings, numbers, booleans) as either attributes
+  or properties.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Custom elements, like their built-in counterparts, should be configurable.
+  Configuration can be passed in declaratively, via attributes, or imperatively
+  via JavaScript properties. Ideally every attribute should also be linked to
+  a corresponding property.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Aim to keep primitive data attributes and properties in sync, reflecting from
+  property to attribute, and vice versa.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  You never know how a user will interact with your element. They might
+  set a property in JavaScript, and then expect to read that value
+  using an API like <code>getAttribute()</code>. If every attribute has a
+  corresponding property, and both of them reflect, it will make it easier for
+  users to work with your element. In other words, calling
+  <code>setAttribute('foo', value)</code> should also set a corresponding
+  <code>foo</code> property and vice versa. There are, of course, exceptions to
+  this rule. You shouldn't reflect high frequency properties, e.g.
+  <code>currentTime</code> in a video player. Use your best judgment. If it
+  seems like a user will interact with a property or attribute, and
+  it's not burdensome to reflect it, then do so.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element. This is further explained in
+  <a href="#avoid-reentrancy-issues">Avoid reentrancy issues</a>.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Aim to only accept rich data (objects, arrays) as properties.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Generally speaking, there are no examples of built-in HTML elements that
+  accept rich data (plain JavaScript objects and arrays) through their
+  attributes. Rich data is instead accepted either through method calls or
+  properties. There are a couple obvious downsides to accepting rich data as
+  attributes: it can be expensive to serialize a large object to a string, and
+  any object references will be lost in this stringification process. For
+  example, if you stringify an object which has a reference to another object,
+  or perhaps a DOM node, those references will be lost.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Do not reflect rich data properties to attributes.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Reflecting rich data properties to attributes is needlessly expensive,
+  requiring serializing and deserializing the same JavaScript objects. Unless
+  you have a use case that can only be solved with this feature, it's probably
+  best to avoid it.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Consider checking for properties that may have been set before the element
+  upgraded.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  A developer using your element may attempt to set a property on the element
+  before its definition has been loaded. This is especially true if the
+  developer is using a framework which handles loading components, stamping them
+  to the page, and binding their properties to a model.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element. Further explained in
+  <a href="#make-properties-lazy">Make properties lazy</a>.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Do not self-apply classes.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Elements that need to express their state should do so using attributes. The
+  <code>class</code> attribute is generally considered to be owned by the
+  developer using your element, and writing to it yourself may inadvertently
+  stomp on developer classes.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Dispatch events in response to internal component activity.
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Your component may have properties that change in response to activity that
+  only your component knows about, for example, if a timer or animation
+  completes, or a resource finishes loading. It's helpful to dispatch events
+  in response to these changes to notify the host that the component's state is
+  different.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table class="responsive ce-cl">
+  <tbody>
+    <tr>
+      <th colspan=2>
+        <h3>
+  Do not dispatch events in response to the host setting a property (downward
+  data flow).
+        </h3>
+      </th>
+    </tr>
+    <tr>
+      <td><b>Why?</b></td>
+      <td>
+  Dispatching an event in response to a host setting a property is superfluous
+  (the host knows the current state because it just set it). Dispatching events
+  in response to a host setting a property may cause infinite loops with data
+  binding systems.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Example</b></td>
+      <td>
+  The <a href="/components-howto-checkbox/">
+  <code>&lt;howto-checkbox&gt;</code></a> element.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Explainers
+
+### Don't override the page author
+
+It's possible that a developer using your element might want to override some of
+its initial state. For example, changing its ARIA `role` or focusability with
+`tabindex`. Check to see if these and any other global attributes have been set,
+before applying your own values.
+
+```js
+connectedCallback() {
+  if (!this.hasAttribute('role'))
+    this.setAttribute('role', 'checkbox');
+  if (!this.hasAttribute('tabindex'))
+    this.setAttribute('tabindex', 0);
+```
+
+### Make properties lazy
+
+A developer might attempt to set a property on your element before its
+definition has been loaded. This is especially true if the developer is using a
+framework which handles loading components, inserting them into to the page, and
+binding their properties to a model.
+
+In the following example, Angular is declaratively binding its model's
+`isChecked` property to the checkbox's `checked` property. If the definition for
+howto-checkbox was lazy loaded it's possible that Angular might attempt to set
+the checked property before the element has upgraded.
+
+```html
+<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>
+```
+
+A custom element should handle this scenario by checking if any properties have
+already been set on its instance. The [`<howto-checkbox>`](/components-howto-checkbox/)
+demonstrates this pattern using a method called `_upgradeProperty()`.
+
+```js
+connectedCallback() {
+  ...
+  this._upgradeProperty('checked');
+}
+
+_upgradeProperty(prop) {
+  if (this.hasOwnProperty(prop)) {
+    let value = this[prop];
+    delete this[prop];
+    this[prop] = value;
+  }
+}
+```
+
+`_upgradeProperty()` captures the value from the unupgraded instance and deletes
+the property so it does not shadow the custom element's own property setter.
+This way, when the element's definition does finally load, it can immediately
+reflect the correct state.
+
+### Avoid reentrancy issues
+
+It's tempting to use the `attributeChangedCallback()` to reflect state to an
+underlying property, for example:
+
+```js
+// When the [checked] attribute changes, set the checked property to match.
+attributeChangedCallback(name, oldValue, newValue) {
+  if (name === 'checked')
+    this.checked = newValue;
+}
+```
+
+But this can create an infinite loop if the property setter also reflects to
+the attribute.
+
+```js
+set checked(value) {
+  const isChecked = Boolean(value);
+  if (isChecked)
+    // OOPS! This will cause an infinite loop because it triggers the
+    // attributeChangedCallback() which then sets this property again.
+    this.setAttribute('checked', '');
+  else
+    this.removeAttribute('checked');
+}
+```
+
+An alternative is to allow the property setter to reflect to the attribute, and
+have the getter determine its value based on the attribute.
+
+```js
+set checked(value) {
+  const isChecked = Boolean(value);
+  if (isChecked)
+    this.setAttribute('checked', '');
+  else
+    this.removeAttribute('checked');
+}
+
+get checked() {
+  return this.hasAttribute('checked');
+}
+```
+
+In this example, adding or removing the attribute will also set the property.
+
+Finally, the `attributeChangedCallback()` can be used to handle side effects
+like applying ARIA states.
+
+```js
+attributeChangedCallback(name, oldValue, newValue) {
+  const hasValue = newValue !== null;
+  switch (name) {
+    case 'checked':
+      // Note the attributeChangedCallback is only handling the *side effects*
+      // of setting the attribute.
+      this.setAttribute('aria-checked', hasValue);
+      break;
+    ...
+  }
+}
+```
diff --git a/src/site/content/en/blog/custom-elements-v1/index.md b/src/site/content/en/blog/custom-elements-v1/index.md
new file mode 100644
index 00000000000..dd265058dc7
--- /dev/null
+++ b/src/site/content/en/blog/custom-elements-v1/index.md
@@ -0,0 +1,1090 @@
+---
+title: Custom Elements v1 - Reusable Web Components
+subhead: Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.
+description: |
+  Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.
+authors:
+  - ericbidelman
+date: 2017-08-14
+updated: 2019-09-05
+---
+
+With [Custom Elements][spec], web developers can **create new HTML tags**,
+beef-up existing HTML tags, or extend the components other developers have
+authored. The API is the foundation of [web
+components](http://webcomponents.org/). It brings a web
+standards-based way to create reusable components using nothing more than
+vanilla JS/HTML/CSS. The result is less code, modular code, and more reuse in
+our apps.
+
+## Introduction
+
+{% Aside %}
+This article describes the new [Custom Elements spec](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements). If you've been using custom elements,
+chances are you're familiar with the [version 0 that shipped in Chrome 33](https://www.chromestatus.com/features/4642138092470272). The concepts are the same, but the version 1 spec has
+important API differences. Keep reading to see what's new or check out the
+section on [History and browser support](#historysupport) for more
+info.
+{% endAside %}
+
+The browser gives us an excellent tool for structuring web applications. It's
+called HTML.  You may have heard of it! It's declarative, portable, well
+supported, and easy to work with. Great as HTML may be, its vocabulary and
+extensibility are limited. The [HTML living
+standard](https://html.spec.whatwg.org/multipage/) has always lacked a way to
+automatically associate JS behavior with your markup… until now.
+
+Custom elements are the answer to modernizing HTML, filling in the missing
+pieces, and bundling structure with behavior. If HTML doesn't provide the
+solution to a problem, we can create a custom element that does. **Custom
+elements teach the browser new tricks while preserving the benefits of HTML**.
+
+## Defining a new element
+
+To define a new HTML element we need the power of JavaScript!
+
+The `customElements` global is used for defining a custom element and teaching
+the browser about a new tag. Call `customElements.define()` with the tag name
+you want to create and a JavaScript `class` that extends the base `HTMLElement`.
+
+**Example** - defining a mobile drawer panel, `<app-drawer>`:
+
+```js
+class AppDrawer extends HTMLElement {...}
+window.customElements.define('app-drawer', AppDrawer);
+
+// Or use an anonymous class if you don't want a named constructor in current scope.
+window.customElements.define('app-drawer', class extends HTMLElement {...});
+```
+
+Example usage:
+
+```html
+<app-drawer></app-drawer>
+```
+
+It's important to remember that using a custom element is no different than
+using a `<div>` or any other element. Instances can be declared on the page,
+created dynamically in JavaScript, event listeners can be attached, etc. Keep
+reading for more examples.
+
+### Defining an element's JavaScript API
+
+The functionality of a custom element is defined using an ES2015
+[`class`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes)
+which extends `HTMLElement`. Extending `HTMLElement` ensures the custom element
+inherits the entire DOM API and means any properties/methods that you add to the
+class become part of the element's DOM interface. Essentially, use the class to
+create a **public JavaScript API** for your tag.
+
+**Example** - defining the DOM interface of `<app-drawer>`:
+
+```js
+class AppDrawer extends HTMLElement {
+
+  // A getter/setter for an open property.
+  get open() {
+    return this.hasAttribute('open');
+  }
+
+  set open(val) {
+    // Reflect the value of the open property as an HTML attribute.
+    if (val) {
+      this.setAttribute('open', '');
+    } else {
+      this.removeAttribute('open');
+    }
+    this.toggleDrawer();
+  }
+
+  // A getter/setter for a disabled property.
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    // Reflect the value of the disabled property as an HTML attribute.
+    if (val) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  // Can define constructor arguments if you wish.
+  constructor() {
+    // If you define a constructor, always call super() first!
+    // This is specific to CE and required by the spec.
+    super();
+
+    // Setup a click listener on <app-drawer> itself.
+    this.addEventListener('click', e => {
+      // Don't toggle the drawer if it's disabled.
+      if (this.disabled) {
+        return;
+      }
+      this.toggleDrawer();
+    });
+  }
+
+  toggleDrawer() {
+    // ...
+  }
+}
+
+customElements.define('app-drawer', AppDrawer);
+```
+
+In this example, we're creating a drawer that has an `open` property, `disabled`
+property, and a `toggleDrawer()` method. It also [reflects properties as HTML
+attributes](#reflectattr).
+
+A neat feature of custom elements is that **`this` inside a class definition
+refers to the DOM element itself** i.e. the instance of the class. In our
+example, `this` refers to `<app-drawer>`. This (😉) is how the element can
+attach a `click` listener to itself! And you're not limited to event listeners.
+The entire DOM API is available inside element code. Use `this` to access the
+element's properties, inspect its children (`this.children`), query nodes
+(`this.querySelectorAll('.items')`), etc.
+
+## Rules on creating custom elements
+
+1. The name of a custom element **must contain a dash (-)**. So `<x-tags>`,
+   `<my-element>`, and `<my-awesome-app>` are all valid names, while `<tabs>`
+   and `<foo_bar>` are not. This requirement is so the HTML parser can
+   distinguish custom elements from regular elements. It also ensures forward
+   compatibility when new tags are added to HTML.
+2. You can't register the same tag more than once. Attempting to do so will
+   throw a `DOMException`. Once you've told the browser about a new tag, that's
+   it. No take backs.
+3. Custom elements cannot be self-closing because HTML only allows [a few
+   elements](https://html.spec.whatwg.org/multipage/syntax.html#void-elements)
+   to be self-closing. Always write a closing tag
+   (`<app-drawer></app-drawer>`).
+
+## Custom element reactions
+
+A custom element can define special lifecycle hooks for running code during
+interesting times of its existence. These are called **custom element
+reactions**.
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Called when</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>constructor</code></td>
+      <td>An instance of the element is
+        created or <a href="#upgrades">upgraded</a>. Useful for initializing
+        state, setting up event listeners, or
+        <a href="#shadowdom">creating a shadow dom</a>.
+        See the
+        <a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance">
+        spec
+        </a>
+        for restrictions on what you can do in the <code>constructor</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>connectedCallback</code></td>
+      <td>Called every time the
+        element is inserted into the DOM. Useful for running setup code, such as
+        fetching resources or rendering. Generally, you should try to delay work
+        until this time.
+      </td>
+    </tr>
+    <tr>
+      <td><code>disconnectedCallback</code></td>
+      <td>Called every time the element is removed from the DOM. Useful for
+        running clean up code.
+      </td>
+    </tr>
+    <tr>
+      <td><code>attributeChangedCallback(attrName, oldVal, newVal)</code></td>
+      <td>Called when an <a href="#attrchanges">observed attribute</a> has been
+        added, removed, updated, or replaced. Also called for initial values
+        when an element is created by the parser, or
+        <a href="#upgrades">upgraded</a>. <b>Note:</b> only
+        attributes listed in the <code>observedAttributes</code> property will
+        receive this callback.
+      </td>
+    </tr>
+    <tr>
+      <td><code>adoptedCallback</code></td>
+      <td>The
+        custom element has been moved into a new <code>document</code> (e.g.
+        someone called <code>document.adoptNode(el)</code>).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Note: The browser calls the `attributeChangedCallback()` for any attributes
+listed in the `observedAttributes` array (see [Observing changes to
+attributes](#attrchanges)). Essentially, this is a performance optimization.
+When users change a common attribute like `style` or `class`, you don't want to
+be spammed with tons of callbacks.
+
+**Reaction callbacks are synchronous**. If someone calls `el.setAttribute()`
+on your element, the browser will immediately call `attributeChangedCallback()`.
+Similarly, you'll receive a `disconnectedCallback()` right after your element is
+removed from the DOM (e.g. the user calls `el.remove()`).
+
+**Example:** adding custom element reactions to `<app-drawer>`:
+
+```js
+class AppDrawer extends HTMLElement {
+  constructor() {
+    super(); // always call super() first in the constructor.
+    // ...
+  }
+
+  connectedCallback() {
+    // ...
+  }
+
+  disconnectedCallback() {
+    // ...
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    // ...
+  }
+}
+```
+
+Define reactions if/when it make senses. If your element is sufficiently complex
+and opens a connection to IndexedDB in `connectedCallback()`, do the necessary
+cleanup work in `disconnectedCallback()`. But be careful! You can't rely on your
+element being removed from the DOM in all circumstances. For example,
+`disconnectedCallback()` will never be called if the user closes the tab.
+
+## Properties and attributes
+
+### Reflecting properties to attributes {: #reflectattr}
+
+It's common for HTML properties to reflect their value back to the DOM as an
+HTML attribute. For example, when the values of `hidden` or `id` are changed in
+JS:
+
+```js
+div.id = 'my-id';
+div.hidden = true;
+```
+
+the values are applied to the live DOM as attributes:
+
+```js
+<div id="my-id" hidden>
+```
+
+This is called "[reflecting properties to
+attributes](https://html.spec.whatwg.org/multipage/infrastructure.html#reflecting-content-attributes-in-idl-attributes)".
+Almost every property in HTML does this. Why? Attributes are also useful for
+configuring an element declaratively and certain APIs like accessibility and CSS
+selectors rely on attributes to work.
+
+Reflecting a property is useful anywhere you want to **keep the element's DOM
+representation in sync with its JavaScript state**. One reason you might want to
+reflect a property is so user-defined styling applies when JS state changes.
+
+Recall our `<app-drawer>`. A consumer of this component may want to fade it out
+and/or prevent user interaction when it's disabled:
+
+```css
+app-drawer[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+```
+
+When the `disabled` property is changed in JS, we want that attribute to be
+added to the DOM so the user's selector matches. The element can provide that
+behavior by reflecting the value to an attribute of the same name:
+
+
+```js
+get disabled() {
+  return this.hasAttribute('disabled');
+}
+
+set disabled(val) {
+  // Reflect the value of `disabled` as an attribute.
+  if (val) {
+    this.setAttribute('disabled', '');
+  } else {
+    this.removeAttribute('disabled');
+  }
+  this.toggleDrawer();
+}
+```
+
+### Observing changes to attributes
+
+HTML attributes are a convenient way for users to declare initial state:
+
+```html
+<app-drawer open disabled></app-drawer>
+```
+
+Elements can react to attribute changes by defining a
+`attributeChangedCallback`. The browser will call this method for every change
+to attributes listed in the `observedAttributes` array.
+
+
+```js
+class AppDrawer extends HTMLElement {
+  // ...
+
+  static get observedAttributes() {
+    return ['disabled', 'open'];
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    if (val) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  // Only called for the disabled and open attributes due to observedAttributes
+  attributeChangedCallback(name, oldValue, newValue) {
+    // When the drawer is disabled, update keyboard/screen reader behavior.
+    if (this.disabled) {
+      this.setAttribute('tabindex', '-1');
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.setAttribute('tabindex', '0');
+      this.setAttribute('aria-disabled', 'false');
+    }
+    // TODO: also react to the open attribute changing.
+  }
+}
+```
+
+
+In the example, we're setting additional attributes on the `<app-drawer>` when a
+`disabled` attribute is changed. Although we're not doing it here, you could
+also **use the `attributeChangedCallback` to keep a JS property in sync with its
+attribute**.
+
+## Element upgrades
+
+### Progressively enhanced HTML
+
+We've already learned that custom elements are defined by calling
+`customElements.define()`. But this doesn't mean you have to define + register a
+custom element all in one go.
+
+**Custom elements can be used _before_ their definition is registered**.
+
+Progressive enhancement is a feature of custom elements. In other words, you can
+declare a bunch of `<app-drawer>` elements on the page and never invoke
+`customElements.define('app-drawer', ...)` until much later. This is because the
+browser treats potential custom elements differently thanks to [unknown
+tags](#unknown). The process of calling `define()` and endowing an existing
+element with a class definition is called "element upgrades".
+
+To know when a tag name becomes defined, you can use
+`window.customElements.whenDefined()`. It returns a Promise that resolves when the
+element becomes defined.
+
+```js
+customElements.whenDefined('app-drawer').then(() => {
+  console.log('app-drawer defined');
+});
+```
+
+
+**Example** - delay work until a set of child elements are upgraded
+
+
+```html
+<share-buttons>
+  <social-button type="twitter"><a href="...">Twitter</a></social-button>
+  <social-button type="fb"><a href="...">Facebook</a></social-button>
+  <social-button type="plus"><a href="...">G+</a></social-button>
+</share-buttons>
+```
+
+```js
+// Fetch all the children of <share-buttons> that are not defined yet.
+let undefinedButtons = buttons.querySelectorAll(':not(:defined)');
+
+let promises = [...undefinedButtons].map((socialButton) => {
+  return customElements.whenDefined(socialButton.localName);
+});
+
+// Wait for all the social-buttons to be upgraded.
+Promise.all(promises).then(() => {
+  // All social-button children are ready.
+});
+```
+
+
+{% Aside %}
+I think of custom elements as being in a state of limbo before they're
+defined. The
+[spec](https://dom.spec.whatwg.org/#concept-element-custom-element-state)
+defines an element's state as `undefined`, `uncustomized`, or `custom`. Built-in
+elements like `<div>` are always `defined`.
+{% endAside %}
+
+## Element-defined content
+
+Custom elements can manage their own content by using the DOM APIs inside
+element code. [Reactions](#reactions) come in handy for this.
+
+**Example** - create an element with some default HTML:
+
+```js
+customElements.define('x-foo-with-markup', class extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
+  }
+  // ...
+});
+```
+
+Declaring this tag will produce:
+
+```html
+<x-foo-with-markup>
+  <b>I'm an x-foo-with-markup!</b>
+</x-foo-with-markup>
+```
+
+
+<style>
+  .demoarea {
+    padding: 8px; border: 1px dashed #ccc;
+  }
+  .demoarea::before {
+    display: block; content: 'DEMO';
+  }
+</style>
+
+<div class="demoarea">
+  <x-foo-with-markup></x-foo-with-markup>
+</div>
+
+<script>
+  const supportsCustomElementsV1 = 'customElements' in window;
+
+  if (supportsCustomElementsV1) {
+    customElements.define('x-foo-with-markup', class extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
+      }
+    });
+  } else {
+    if (self.frameElement) {
+      self.frameElement.style.display = 'none';
+    }
+  }
+</script>
+
+{% Aside %}
+Overwriting an element's children with new content is generally not a good
+idea because it's unexpected. Users would be surprised to have their markup
+thrown out. A better way to add element-defined content is to use shadow DOM,
+which we'll talk about next.
+{% endAside %}
+
+### Creating an element that uses Shadow DOM
+
+Note: I'm not going to cover the features of [Shadow DOM][sd_spec] in this
+article, but it's a powerful API to combine with custom elements. By itself,
+Shadow DOM is composition tool. When it's used in conjunction with custom
+elements, magical things happen.
+
+
+Shadow DOM provides a way for an element to own, render, and style a chunk of
+DOM that's separate from the rest of the page. Heck, you could even hide away an
+entire app within a single tag:
+
+```html
+<!-- chat-app's implementation details are hidden away in Shadow DOM. -->
+<chat-app></chat-app>
+```
+
+To use Shadow DOM in a custom element, call `this.attachShadow` inside your
+`constructor`:
+
+```js
+let tmpl = document.createElement('template');
+tmpl.innerHTML = `
+  <style>:host { ... }</style> <!-- look ma, scoped styles -->
+  <b>I'm in shadow dom!</b>
+  <slot></slot>
+`;
+
+customElements.define('x-foo-shadowdom', class extends HTMLElement {
+  constructor() {
+    super(); // always call super() first in the constructor.
+
+    // Attach a shadow root to the element.
+    let shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.appendChild(tmpl.content.cloneNode(true));
+  }
+  // ...
+});
+```
+
+{% Aside %}
+In the above snippet we use a `template` element to clone DOM, instead of
+setting the `innerHTML` of the `shadowRoot`. This technique cuts down on HTML
+parse costs because the content of the template is only parsed once, whereas
+calling `innerHTML` on the `shadowRoot` will parse the HTML for each instance.
+We'll talk more about templates in the next section.
+{% endAside %}
+
+Example usage:
+
+```html
+<x-foo-shadowdom>
+  <p><b>User's</b> custom text</p>
+</x-foo-shadowdom>
+
+<!-- renders as -->
+<x-foo-shadowdom>
+  #shadow-root
+  <b>I'm in shadow dom!</b>
+  <slot></slot> <!-- slotted content appears here -->
+</x-foo-shadowdom>
+```
+
+
+<style>
+  .demoarea {
+    padding: 8px; border: 1px dashed #ccc;
+  }
+
+  .demoarea::before {
+    content: 'DEMO'; display: block;
+  }
+</style>
+
+<div class="demoarea">
+  <x-foo-shadowdom>
+    <p><b>User's</b> custom text</p>
+  </x-foo-shadowdom>
+</div>
+
+<script>
+  const supportsCustomElementsV1 = 'customElements' in window;
+
+  if(supportsCustomElementsV1) {
+    let tmpl = document.createElement('template');
+    tmpl.innerHTML = `
+      <b>I'm in shadow dom!</b>
+      <slot></slot>
+    `;
+
+    customElements.define('x-foo-shadowdom', class extends HTMLElement {
+      constructor() {
+        super(); // always call super() first in the constructor.
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.appendChild(tmpl.content.cloneNode(true));
+      }
+    });
+  } else {
+    if (self.frameElement) {
+      self.frameElement.style.display = 'none';
+    }
+  }
+</script>
+
+### Creating elements from a `<template>`
+For those unfamiliar, the [`<template>`
+element](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
+allows you to declare fragments of the DOM which are parsed, inert at page load, and
+can be activated later at runtime. It's another API primitive in the web
+components family. **Templates are an ideal placeholder for declaring the
+structure of a custom element**.
+
+**Example:** registering an element with Shadow DOM content created from a
+`<template>`:
+
+```html
+<template id="x-foo-from-template">
+  <style>
+    p { color: green; }
+  </style>
+  <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
+</template>
+
+<script>
+  let tmpl = document.querySelector('#x-foo-from-template');
+  // If your code is inside of an HTML Import you'll need to change the above line to:
+  // let tmpl = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');
+
+  customElements.define('x-foo-from-template', class extends HTMLElement {
+    constructor() {
+      super(); // always call super() first in the constructor.
+      let shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(tmpl.content.cloneNode(true));
+    }
+    // ...
+  });
+</script>
+```
+
+These few lines of code pack a punch. Let's understand the key things going
+on:
+
+1. We're defining a new element in HTML: `<x-foo-from-template>`
+2. The element's Shadow DOM is created from a `<template>`
+3. The element's DOM is local to the element thanks to the Shadow DOM
+4. The element's internal CSS is scoped to the element thanks to the Shadow DOM
+
+<style>
+.demoarea {
+  padding: 8px; border: 1px dashed #ccc;
+}
+
+.demoarea::before {
+  content: 'DEMO'; display: block;
+}
+</style>
+
+<div class="demoarea">
+  <x-foo-from-template></x-foo-from-template>
+</div>
+
+<template id="x-foo-from-template">
+  <style>:host p { color: green; }</style>
+  <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
+</template>
+
+<script>
+  const supportsCustomElementsV1 = 'customElements' in window;
+
+  if (supportsCustomElementsV1) {
+    customElements.define('x-foo-from-template', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        const t = document.querySelector('#x-foo-from-template');
+        shadowRoot.appendChild(t.content.cloneNode(true));
+      }
+    });
+  } else {
+    if (self.frameElement) {
+      self.frameElement.style.display = 'none';
+    }
+  }
+</script>
+
+## Styling a custom element
+
+Even if your element defines its own styling using Shadow DOM, users can style
+your custom element from their page. These are called "user-defined styles".
+
+
+```html
+<!-- user-defined styling -->
+<style>
+  app-drawer {
+    display: flex;
+  }
+  panel-item {
+    transition: opacity 400ms ease-in-out;
+    opacity: 0.3;
+    flex: 1;
+    text-align: center;
+    border-radius: 50%;
+  }
+  panel-item:hover {
+    opacity: 1.0;
+    background: rgb(255, 0, 255);
+    color: white;
+  }
+  app-panel > panel-item {
+    padding: 5px;
+    list-style: none;
+    margin: 0 7px;
+  }
+</style>
+
+<app-drawer>
+  <panel-item>Do</panel-item>
+  <panel-item>Re</panel-item>
+  <panel-item>Mi</panel-item>
+</app-drawer>
+```
+
+You might be asking yourself how CSS specificity works if the element has styles
+defined within Shadow DOM. In terms of specificity, user styles win. They'll
+always override element-defined styling. See the section on [Creating an element
+that uses Shadow DOM](#shadowdom).
+
+### Pre-styling unregistered elements
+
+Before an element is [upgraded](#upgrades) you can target it in CSS using the
+`:defined` pseudo-class. This is useful for pre-styling a component. For
+example, you may wish to prevent layout or other visual FOUC by hiding undefined
+components and fading them in when they become defined.
+
+**Example** - hide `<app-drawer>` before it's defined:
+
+```css
+app-drawer:not(:defined) {
+  /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
+  display: inline-block;
+  height: 100vh;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+```
+
+After `<app-drawer>` becomes defined, the selector (`app-drawer:not(:defined)`)
+no longer matches.
+
+## Extending elements
+
+The Custom Elements API is useful for creating new HTML elements, but it's also
+useful for extending other custom elements or even the browser's built-in HTML.
+
+### Extending a custom element
+
+Extending another custom element is done by extending its class definition.
+
+**Example** - create `<fancy-app-drawer>` that extends `<app-drawer>`:
+
+```js
+class FancyDrawer extends AppDrawer {
+  constructor() {
+    super(); // always call super() first in the constructor. This also calls the extended class' constructor.
+    // ...
+  }
+
+  toggleDrawer() {
+    // Possibly different toggle implementation?
+    // Use ES2015 if you need to call the parent method.
+    // super.toggleDrawer()
+  }
+
+  anotherMethod() {
+    // ...
+  }
+}
+
+customElements.define('fancy-app-drawer', FancyDrawer);
+```
+
+### Extending native HTML elements
+
+Let's say you wanted to create a fancier `<button>`. Instead of replicating the
+behavior and functionality of `<button>`, a better option is to progressively
+enhance the existing element using custom elements.
+
+A **customized built-in element** is a custom element that extends one of the
+browser's built-in HTML tags. The primary benefit of extending an existing
+element is to gain all of its features (DOM properties, methods, accessibility).
+There's no better way to write a [progressive web
+app](/progressive-web-apps/) than to **progressively enhance existing HTML
+elements**.
+
+Note: Only Chrome 67 supports customized built-in elements
+([status](https://www.chromestatus.com/feature/4670146924773376))
+right now. Edge and Firefox will implement it, but Safari
+has chosen not to implement it. This is unfortunate for accessibility and
+progressive enhancement. If you think extending native HTML elements is
+useful, voice your thoughts on
+<a href='https://github.com/w3c/webcomponents/issues/509'>509</a> and <a href='https://github.com/w3c/webcomponents/issues/662'>662</a> on Github.
+
+To extend an element, you'll need to create a class definition that inherits
+from the correct DOM interface. For example, a custom element that extends
+`<button>` needs to inherit from `HTMLButtonElement` instead of `HTMLElement`.
+Similarly, an element that extends `<img>` needs to extend `HTMLImageElement`.
+
+**Example** - extending `<button>`:
+
+```js
+// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
+// for the list of other DOM interfaces.
+class FancyButton extends HTMLButtonElement {
+  constructor() {
+    super(); // always call super() first in the constructor.
+    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
+  }
+
+  // Material design ripple animation.
+  drawRipple(x, y) {
+    let div = document.createElement('div');
+    div.classList.add('ripple');
+    this.appendChild(div);
+    div.style.top = `${y - div.clientHeight/2}px`;
+    div.style.left = `${x - div.clientWidth/2}px`;
+    div.style.backgroundColor = 'currentColor';
+    div.classList.add('run');
+    div.addEventListener('transitionend', (e) => div.remove());
+  }
+}
+
+customElements.define('fancy-button', FancyButton, {extends: 'button'});
+```
+
+Notice that the call to `define()` changes slightly when extending a native
+element. The required third parameter tells the browser which tag you're
+extending. This is necessary because many HTML tags share the same DOM
+interface. `<section>`, `<address>`, and `<em>` (among others) all share
+`HTMLElement`; both `<q>` and `<blockquote>` share `HTMLQuoteElement`; etc…
+Specifying `{extends: 'blockquote'}` lets the browser know you're creating a
+souped-up `<blockquote>` instead of a `<q>`. See [the HTML
+spec](https://html.spec.whatwg.org/multipage/indices.html#element-interfaces)
+for the full list of HTML's DOM interfaces.
+
+Note: Extending `HTMLButtonElement` endows our fancy button with all the DOM
+properties/methods of `<button>`. That checks off a bunch of stuff we don't have
+to implement ourselves: `disabled` property, `click()` method, `keydown`
+listeners, `tabindex` management. Instead, our focus can be progressively
+enhancing `<button>` with custom functionality, namely, the `drawRipple()`
+method. Less code, more reuse!
+
+Consumers of a customized built-in element can use it in several ways. They can
+declare it by adding the `is=""` attribute on the native tag:
+
+
+```html
+<!-- This <button> is a fancy button. -->
+<button is="fancy-button" disabled>Fancy button!</button>
+```
+
+
+create an instance in JavaScript:
+
+
+```js
+// Custom elements overload createElement() to support the is="" attribute.
+let button = document.createElement('button', {is: 'fancy-button'});
+button.textContent = 'Fancy button!';
+button.disabled = true;
+document.body.appendChild(button);
+```
+
+
+or use the `new` operator:
+
+```js
+let button = new FancyButton();
+button.textContent = 'Fancy button!';
+button.disabled = true;
+```
+
+Here's another example that extends `<img>`.
+
+**Example** - extending `<img>`:
+
+
+```js
+customElements.define('bigger-img', class extends Image {
+  // Give img default size if users don't specify.
+  constructor(width=50, height=50) {
+    super(width * 10, height * 10);
+  }
+}, {extends: 'img'});
+```
+
+Users declare this component as:
+
+
+```html
+<!-- This <img> is a bigger img. -->
+<img is="bigger-img" width="15" height="20">
+```
+
+or create an instance in JavaScript:
+
+```js
+const BiggerImage = customElements.get('bigger-img');
+const image = new BiggerImage(15, 20); // pass constructor values like so.
+console.assert(image.width === 150);
+console.assert(image.height === 200);
+```
+
+## Misc details
+
+### Unknown elements vs. undefined custom elements
+
+HTML is lenient and flexible to work with. For example, declare
+`<randomtagthatdoesntexist>` on a page and the browser is perfectly happy
+accepting it. Why do non-standard tags work? The answer is the [HTML
+specification](https://html.spec.whatwg.org/multipage/dom.html#htmlunknownelement)
+allows it. Elements that are not defined by the specification get parsed as
+`HTMLUnknownElement`.
+
+The same is not true for custom elements. Potential custom elements are parsed
+as an `HTMLElement` if they're created with a valid name (includes a "-"). You
+can check this in a browser that supports custom elements. Fire up the Console:
+<span class="kbd">Ctrl</span>+<span class="kbd">Shift</span>+<span
+class="kbd">J</span> (or <span class="kbd">Cmd</span>+<span
+class="kbd">Opt</span>+<span class="kbd">J</span> on Mac) and paste in the
+following lines of code:
+
+
+```js
+// "tabs" is not a valid custom element name
+document.createElement('tabs') instanceof HTMLUnknownElement === true
+
+// "x-tabs" is a valid custom element name
+document.createElement('x-tabs') instanceof HTMLElement === true
+```
+
+## API reference
+
+The `customElements` global defines useful methods for working with custom
+elements.
+
+**`define(tagName, constructor, options)`**
+
+Defines a new custom element in the browser.
+
+Example
+
+```js
+customElements.define('my-app', class extends HTMLElement { ... });
+customElements.define(
+    'fancy-button', class extends HTMLButtonElement { ... }, {extends: 'button'});
+```
+
+
+**`get(tagName)`**
+
+Given a valid custom element tag name, returns the element's constructor.
+Returns `undefined` if no element definition has been registered.
+
+Example
+
+```js
+let Drawer = customElements.get('app-drawer');
+let drawer = new Drawer();
+```
+
+**`whenDefined(tagName)`**
+
+Returns a Promise that resolves when the custom element is defined. If the
+element is already defined, resolve immediately. Rejects if the tag name is not
+a valid custom element name.
+
+Example
+
+```js
+customElements.whenDefined('app-drawer').then(() => {
+  console.log('ready!');
+});
+```
+
+## History and browser support
+
+If you've been following web components for the last couple of years, you'll
+know that Chrome 36+ implemented a version of the Custom Elements API that uses
+`document.registerElement()` instead of `customElements.define()`. That's now
+considered a deprecated version of the standard, called v0.
+`customElements.define()` is the new hotness and what browser vendors are
+starting to implement. It's called Custom Elements v1.
+
+If you happen to be interested in the old v0 spec, check out the [html5rocks
+article](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/).
+
+### Browser support
+
+Chrome 54 ([status](https://www.chromestatus.com/features/4696261944934400)),
+Safari 10.1 ([status](https://webkit.org/status/#feature-custom-elements)), and
+Firefox 63 ([status](https://mozilla.github.io/standards-positions/#custom-elements)) have
+Custom Elements v1. Edge has [begun
+development](https://developer.microsoft.com/microsoft-edge/platform/status/customelements/).
+
+To feature detect custom elements, check for the existence of
+`window.customElements`:
+
+```js
+const supportsCustomElementsV1 = 'customElements' in window;
+```
+
+#### Polyfill
+
+Until browser support is widely available, there's a
+[standalone polyfill](https://github.com/webcomponents/custom-elements/)
+available for Custom Elements v1. However, we recommend using the [webcomponents.js
+loader](https://github.com/webcomponents/webcomponentsjs#using-webcomponents-loaderjs)
+to optimally load the web components polyfills. The loader
+uses feature detection to asynchronously load only the necessary pollyfills
+required by the browser.
+
+{% Aside %}
+If your project transpiles to or uses ES5, be sure to see
+the notes on including [custom-elements-es5-adapter.js](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) in addition to the polyfills.
+{% endAside %}
+
+Install it:
+
+```shell
+npm install --save @webcomponents/webcomponentsjs
+```
+
+Usage:
+
+
+```html
+<!-- Use the custom element on the page. -->
+<my-element></my-element>
+
+<!-- Load polyfills; note that "loader" will load these async -->
+<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
+
+<!-- Load a custom element definitions in `waitFor` and return a promise -->
+<script type="module">
+  function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  WebComponents.waitFor(() => {
+    // At this point we are guaranteed that all required polyfills have
+    // loaded, and can use web components APIs.
+    // Next, load element definitions that call `customElements.define`.
+    // Note: returning a promise causes the custom elements
+    // polyfill to wait until all definitions are loaded and then upgrade
+    // the document in one batch, for better performance.
+    return loadScript('my-element.js');
+  });
+</script>
+```
+{% Aside %}
+The `:defined` CSS pseudo-class cannot be polyfilled.
+{% endAside %}
+
+## Conclusion
+
+Custom elements give us a new tool for defining new HTML tags in the browser and
+creating reusable components. Combine them with the other new platform
+primitives like Shadow DOM and `<template>`, and we start to realize the grand
+picture of Web Components:
+
+- Cross-browser (web standard) for creating and extending reusable components.
+- Requires no library or framework to get started. Vanilla JS/HTML FTW!
+- Provides a familiar programming model. It's just DOM/CSS/HTML.
+- Works well with other new web platform features (Shadow DOM, `<template>`, CSS
+  custom properties, etc.)
+- Tightly integrated with the browser's DevTools.
+- Leverage existing accessibility features.
+
+[spec]: https://html.spec.whatwg.org/multipage/scripting.html#custom-elements
+[sd_spec]: http://w3c.github.io/webcomponents/spec/shadow/
+
diff --git a/src/site/content/en/blog/custom-properties-web-components/index.md b/src/site/content/en/blog/custom-properties-web-components/index.md
new file mode 100644
index 00000000000..8453f9ea609
--- /dev/null
+++ b/src/site/content/en/blog/custom-properties-web-components/index.md
@@ -0,0 +1,313 @@
+---
+layout: post
+title: How Nordhealth uses Custom Properties in Web Components
+subhead: The benefits of using Custom Properties in design systems and component libraries.
+authors:
+  - daviddarnes
+description: The benefits of using Custom Properties in design systems and component libraries.
+date: 2022-08-17
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/iuFKGqZPtsuMKZSAPwMw.jpg
+alt: 'Computer components'
+tags:
+  - blog
+  - css
+---
+
+I'm Dave and I'm a Senior Front-end Developer at [Nordhealth](https://nordhealth.com/). I work on the design and development of our [design system Nord](https://nordhealth.design/), which includes building Web Components for our component library. I wanted to share how we solved the problems around styling [Web Components](https://developer.mozilla.org/docs/Web/Web_Components) by using [CSS Custom Properties](https://developer.mozilla.org/docs/Web/CSS/--*), and some of the other benefits of using Custom Properties in design systems and component libraries.
+
+## How we build Web Components
+
+To build [our Web Components](https://nordhealth.design/components/) we use [Lit](https://lit.dev/), a library that provides a lot of boilerplate code such as state, scoped styles, templating, and more. Not only is Lit lightweight but it's also built on native JavaScript APIs, meaning we can deliver a lean bundle of code that takes advantage of  features the browser already has.
+
+<figure>
+
+```js
+import {html, css, LitElement} from 'lit';
+
+export class SimpleGreeting extends LitElement {
+  static styles = css`:host { color: blue; font-family: sans-serif; }`;
+
+  static properties = {
+    name: {type: String},
+  };
+
+  constructor() {
+    super();
+    this.name = 'there';
+  }
+
+  render() {
+    return html`<p>Hey ${this.name}, welcome to Web Components!</p>`;
+  }
+}
+customElements.define('simple-greeting', SimpleGreeting);
+```
+
+<figcaption>A Web Component written with Lit.</figcaption>
+</figure>
+
+But the most appealing thing about Web Components is that they work with almost any existing JavaScript framework, or even no framework at all. Once the main JavaScript package is referenced in the page, using a Web Component is very much like using a native HTML element. The only real tell-tale sign that it isn't a native HTML element is the consistent hyphen within the tags, which is a standard to signify to the browser that this is a Web Component.
+
+<figure>
+
+```html
+<head>
+  <script type="module" src="./simple-greeting.js"></script>
+</head>
+<body>
+  <simple-greeting name="Dave"></simple-greeting>
+</body>
+```
+
+<figcaption>Using the Web Component created above on a page.</figcaption>
+</figure>
+
+## Shadow DOM style encapsulation
+
+Much in the same way native HTML elements have a [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM), so do Web Components. Shadow DOM is a hidden tree of nodes within an element. The best way to visualise this is by opening up your web inspector and turning on the option to "Show Shadow DOM tree". Once you've done this, try looking at a native input element in the inspector—you'll now have the option to open up that input and see all the elements within it. You can even try this with one of our Web Components—try inspecting [our custom input component](https://nordhealth.design/components/input/) to see its Shadow DOM.
+
+<figure>
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/KH3KfdprFwtC5XRINZgB.png", alt="The shadow DOM inspected in DevTools.", width="800", height="369" %}
+
+<figcaption>  
+Example of the Shadow DOM in a regular text input element and in our Nord input Web Component.</figcaption>
+</figure>
+
+One of the advantages (or drawbacks, depending on your outlook) to Shadow DOM is style encapsulation. If you write CSS within your Web Component, those styles can't leak out and affect the main page or other elements; they are completely contained within the component. In addition, CSS written for the main page or a parent Web Component can't leak into your Web Component.  
+
+This encapsulation of styles is a benefit in our component library. It gives us more of a guarantee that when someone uses one of our components, it will look as we intended, regardless of the styles applied to the parent page. And to further make sure, we add `all: unset;` to the root, or "host", of all our Web Components.
+
+<figure>
+
+```css
+:host {
+  all: unset;
+  display: block;
+  box-sizing: border-box;
+  text-align: start;
+  /* ... */
+}
+```
+
+<figcaption>Some component boilerplate code being applied to the shadow root, or host selector.</figcaption>
+</figure>
+
+However, what if someone using your Web Component has a legitimate reason to change certain styles? Maybe there's a line of text that needs more contrast due to its context, or a border needs to be thicker? If no styles can get into your component, how can you unlock those styling options? 
+
+That's where CSS Custom Properties come in. 
+
+## CSS Custom Properties
+
+[Custom Properties](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties) are very appropriately named—they are CSS properties that you can entirely name yourself and apply whatever value is needed. The only requirement is that you prefix them with two hyphens. Once you've declared your custom property, the value can be used in your CSS using the `var()` function.
+
+<figure>
+
+```css
+:root {
+  --n-color-accent: rgb(53, 89, 199);
+  /* ... */
+}
+
+.n-color-accent-text {
+  color: var(--n-color-accent);
+}
+```
+
+<figcaption>Example from our CSS Framework of a design token as a Custom Property and it being used on a helper class.</figcaption>
+</figure>
+
+When it comes to inheritance, all Custom Properties are inherited, which follows the typical behaviour of regular CSS properties and values. Any custom property applied to a parent element, or the element itself, can be used as a value on other properties. We make heavy use of Custom Properties for our design tokens by applying them to the root element via our CSS Framework, which means that all elements on the page can use these token values, whether that be a Web Component, CSS helper class, or a developer wanting to pluck a value from our list of tokens.  
+
+This ability to inherit Custom Properties, with the use of the `var()` function, is how we pierce through our Web Components' Shadow DOM and let developers have more finegrained control when styling our components.
+
+## Custom Properties in a Nord Web Component
+
+Whenever we're developing a component for our design system, we take a thoughtful approach to its CSS—we like to aim for lean but very maintainable code. The design tokens we have are defined as Custom Properties within our main CSS Framework on the root element.
+
+<figure>
+
+```css
+:root {
+  --n-space-m: 16px;
+  --n-space-l: 24px;
+  /* ... */
+  --n-color-background: rgb(255, 255, 255);
+  --n-color-border: rgb(216, 222, 228);
+  /* ... */
+}
+```
+
+<figcaption>CSS Custom Properties being defined on the root selector.</figcaption>
+</figure>
+
+
+These token values are then referenced within our components. In some cases, we'll apply the value directly on the CSS property, but for others, we'll actually define a new contextual Custom Property and apply the value to that.
+
+<figure>
+
+```css
+:host {
+  --n-tab-group-padding: 0;
+  --n-tab-list-background: var(--n-color-background);
+  --n-tab-list-border: inset 0 -1px 0 0 var(--n-color-border);
+  /* ... */
+}
+
+.n-tab-group-list {
+  box-shadow: var(--n-tab-list-border);
+  background-color: var(--n-tab-list-background);
+  gap: var(--n-space-s);
+  /* ... */
+}
+```
+
+<figcaption>Custom Properties being defined on the shadow root of the component and then being used in the component styles. Custom Properties from the list of design tokens are also being used.</figcaption>
+</figure>
+
+We'll also abstract some values that are specific to the component but not in our tokens and turn them into a contextual Custom Property. Custom Properties that are contextual to the component provide us with two key benefits. First, it means we can be more "dry" with our CSS as that value can be applied to multiple properties inside the component.
+
+<figure>
+
+```css
+.n-tab-group-list::before {
+  /* ... */
+  padding-inline-start: var(--n-tab-group-padding);
+}
+
+.n-tab-group-list::after {
+  /* ... */
+  padding-inline-end: var(--n-tab-group-padding);
+}
+```
+
+<figcaption>The tab group padding contextual Custom Property being used in multiple places within the component code.</figcaption>
+</figure>
+  
+And second, it makes component state and variation changes really clean—it's only the custom property that needs to be changed to update all those properties when, say, you're styling a hover or active state or, in this case, a variation.
+
+<figure>
+
+```css
+:host([padding="l"]) {
+  --n-tab-group-padding: var(--n-space-l);
+}
+```
+
+<figcaption>A variation of the tab component where the padding is being changed using a single Custom Property update rather than multiple updates.</figcaption>
+</figure>
+
+But the most powerful benefit is that when we define these contextual Custom Properties on a component, we create a sort of custom CSS API for each of our components, which can be tapped into by the user of that component.
+
+<figure>
+
+```css
+<nord-tab-group label="Title">
+  <!-- ... -->
+</nord-tab-group>
+
+<style>
+  nord-tab-group {
+    --n-tab-group-padding: var(--n-space-xl);
+  }
+</style>
+```
+
+<figcaption>Using the tab group component on the page and updating the padding Custom Property to a larger size.</figcaption>
+</figure>
+
+The preceding example shows one of our Web Components with a contextual Custom Property changed via a selector. The result of this entire approach is a component that provides enough styling flexibility to the user while still keeping most of the actual styles in check. Plus, as a bonus, we as component developers have the ability to intercept those styles applied by the user. If we wish to adjust or extend one of those properties, we can without the user needing to change any of their code.  
+
+We find this approach extremely powerful, not only for us as creators of our design system components, but also for our development team when they use these components in our products. 
+
+## Taking Custom Properties further
+
+At the time of writing we don't actually reveal these contextual Custom Properties in [our documentation](https://nordhealth.design/); however, we plan to so that our wider development team can understand and leverage these properties. Our components are packaged on npm with [a manifest file](https://github.com/webcomponents/custom-elements-manifest), which contains everything there is to know about them. We then consume the manifest file as data when our documentation site is deployed, which is done using [Eleventy](https://www.11ty.dev/) and its [Global Data feature](https://www.11ty.dev/docs/data-global-custom/). We plan to include these contextual Custom Properties in this manifest data file.  
+
+Another area we wish to improve on is how these contextual Custom Properties inherit values. Currently, for example, if you wanted to adjust the colour of two divider components, you'd need to target both of those components specifically with selectors, or apply the custom property directly on the element with the style attribute. This might seem fine, but it would be more helpful if the developer could define those styles on a containing element or even at the root level.
+
+<figure>
+
+```html
+<nord-divider></nord-divider>
+
+<section>
+  <nord-divider></nord-divider>
+   <!-- ... -->
+</section>  
+
+<style>
+  nord-divider {
+    --n-divider-color: var(--n-color-status-danger);
+  }
+
+  section {
+    padding: var(--n-space-s);
+    background: var(--n-color-surface-raised);
+  }
+  
+  section nord-divider {
+    --n-divider-color: var(--n-color-status-success);
+  }
+</style>
+```
+
+<figcaption>Two instances of our divider component which need two different colour treatments. One is nested inside a section which we can utilise for a more specific selector, but we have to target the divider specifically.</figcaption>
+</figure>  
+
+The reason you have to set the Custom Property value directly on the component is because we're defining them on the same element via the component host selector. The global design tokens that we use directly in the component pass straight through, unaffected by this issue, and can even be intercepted on parent elements. How can we get the best of both worlds?
+
+## Private and public Custom Properties
+
+[Private custom properties is something that has been put together by Lea Verou](https://lea.verou.me/2021/10/custom-properties-with-defaults/), which is a contextual "private" Custom Property on the component itself but set to a "public" Custom Property with a fallback.
+
+<figure>
+
+```css
+:host {
+  --_n-divider-color: var(--n-divider-color, var(--n-color-border));
+  --_n-divider-size: var(--n-divider-size, 1px);
+}
+
+.n-divider {
+  border-block-start: solid var(--_n-divider-size) var(--_n-divider-color);
+  /* ... */
+}
+```
+
+<figcaption>The divider Web Component CSS with the contextual Custom Properties adjusted so that the internal CSS relies on a private Custom Property, which has been set to a public Custom Property with a fallback.</figcaption> 
+</figure>
+
+Defining our contextual Custom Properties in this fashion means we can still do all the things we were doing before, such as inheriting global token values and reusing values throughout our component code; but the component will also gracefully inherit new definitions of that property on itself or any parent element.
+
+<figure>
+
+```html
+<nord-divider></nord-divider>
+
+<section>
+  <nord-divider></nord-divider>
+   <!-- ... -->
+</section>  
+
+<style>
+  nord-divider {
+    --n-divider-color: var(--n-color-status-danger);
+  }
+
+  section {
+    padding: var(--n-space-s);
+    background: var(--n-color-surface-raised);
+    --n-divider-color: var(--n-color-status-success);
+  }
+</style>
+```
+
+<figcaption>The two dividers again but this time the divider can be recolored by adding the divider's contextual Custom Property to the section selector. The divider will inherit it, producing a cleaner and more flexible piece of code.</figcaption>
+</figure>
+
+While it may be argued that this method isn't truly "private" we still think this is a rather elegant solution to a problem we were worried about. When we have the opportunity, we'll be tackling this in our components so our development team has more control over component usage while still benefiting from the guardrails we have in place. 
+
+I hope you found this insight into how we use Web Components with CSS Custom Properties useful. Let us know what you think and if you decide to use any of these methods in your own work, you can find me on Twitter [@DavidDarnes](https://twitter.com/DavidDarnes?ref_src=twsrc%5Etfw). You can also find Nordhealth [@NordhealthHQ](https://twitter.com/nordhealthhq?lang=en) on Twitter, as well as the rest of my team, who have worked hard on bringing this design system together and executing the features mentioned in this article: [@Viljamis](https://twitter.com/viljamis?lang=en), [@WickyNilliams](https://twitter.com/wickynilliams?lang=en) and [@eric_habich](https://twitter.com/eric_habich).
+
+_Hero image by [Dan Cristian Pădureț](https://unsplash.com/@dancristianpaduret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/customelements/index.md b/src/site/content/en/blog/customelements/index.md
new file mode 100644
index 00000000000..ce928b64f7d
--- /dev/null
+++ b/src/site/content/en/blog/customelements/index.md
@@ -0,0 +1,649 @@
+---
+layout: post
+title: Working with Custom Elements
+authors:
+  - smus
+date: 2011-10-14
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+This article describes an old version of Custom Elements (v0). If you're interested in using Custom Elements, check out our new article, "[Custom Elements v1 - Reusable Web Components](/custom-elements-v1/)." It covers everything in the newer Custom Elements v1 spec shipped in Chrome 53, Safari 10, and Firefox 63.
+{% endAside %}
+
+## Introduction
+
+The web severely lacks expression. To see what I mean, take a peek at a "modern" web app like GMail:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xDJlKi0xvNl9gqZ6tDGB.png", alt="Gmail", width="800", height="470" %}
+</figure>
+
+There's nothing modern about `<div>` soup. And yet, this is how we build web apps. It's sad.
+Shouldn't we demand more from our platform?
+
+### Sexy markup. Let's make it a thing
+
+HTML gives us an excellent tool for structuring a document but its vocabulary is limited to elements
+the [HTML standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/) defines.
+
+What if the markup for GMail wasn't atrocious? What if it was beautiful:
+
+```html
+<hangout-module>
+    <hangout-chat from="Paul, Addy">
+    <hangout-discussion>
+        <hangout-message from="Paul" profile="profile.png"
+            profile="118075919496626375791" datetime="2013-07-17T12:02">
+        <p>Feelin' this Web Components thing.
+        <p>Heard of it?
+        </hangout-message>
+    </hangout-discussion>
+    </hangout-chat>
+    <hangout-chat>...</hangout-chat>
+</hangout-module>
+```
+
+How refreshing! This app totally makes sense too. It's **meaningful**, **easy to understand**,
+and best of all, it's **maintainable**. Future me/you will know exactly what it does
+just by examining its declarative backbone.
+
+## Getting started
+
+[Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html)
+**allow web developers to define new types of HTML elements**. The spec is one of several new API primitives landing under the [Web Components](https://www.w3.org/TR/2012/WD-components-intro-20120522/) umbrella, but it's quite possibly the most important. Web Components don't exist
+without the features unlocked by custom elements:
+
+1. Define new HTML/DOM elements
+1. Create elements that extend from other elements
+1. Logically bundle together custom functionality into a single tag
+1. Extend the API of existing DOM elements
+
+### Registering new elements
+
+Custom elements are created using `document.registerElement()`:
+
+```js
+var XFoo = document.registerElement('x-foo');
+document.body.appendChild(new XFoo());
+```
+
+The first argument to `document.registerElement()` is the element's tag name.
+The name **must contain a dash (-)**. So for example, `<x-tags>`, `<my-element>`, and `<my-awesome-app>` are all valid names, while `<tabs>` and `<foo_bar>` are not. This restriction allows the parser
+to distinguish custom elements from regular elements but also ensures forward
+compatibility when new tags are added to HTML.
+
+The second argument is an (optional) object describing the element's `prototype`.
+This is the place to add custom functionality (e.g. public properties and methods) to your elements.
+[More on that](#adding-js-properties-and-methods) later.
+
+By default, custom elements inherit from `HTMLElement`. Thus, the previous example is equivalent to:
+
+```js
+var XFoo = document.registerElement('x-foo', {
+    prototype: Object.create(HTMLElement.prototype)
+});
+```
+
+A call to `document.registerElement('x-foo')` teaches the browser about the new element,
+and returns a constructor that you can use to create instances of `<x-foo>`.
+Alternatively, you can use the other [techniques of instantiating elements](#instantiating-elements)
+if you don't want to use the constructor.
+
+{% Aside %}
+If it's undesirable that the constructor ends up on the global `window`
+object, put it in a namespace (`var myapp = {}; myapp.XFoo = document.registerElement('x-foo');`) or drop it on the floor.
+{% endAside %}
+
+### Extending elements
+
+Custom elements allows you to extend existing (native) HTML elements as well as other
+custom elements. To extend an element, you need to pass `registerElement()` the name
+and `prototype` of the element to inherit from.
+
+#### Extending native elements
+
+Say you aren't happy with Regular Joe `<button>`. You'd like to
+supercharge its capabilities to be a "Mega Button". To extend the `<button>` element,
+create a new element that inherits the `prototype` of `HTMLButtonElement` and `extends`
+the name of the element. In this case, "button":
+
+```js
+var MegaButton = document.registerElement('mega-button', {
+    prototype: Object.create(HTMLButtonElement.prototype),
+    extends: 'button'
+});
+```
+
+{% Aside %}
+To create **element A** that extends **element B**, **element A**
+must inherit the `prototype` of **element B**.
+{% endAside %}
+
+Custom elements that inherit from native elements are called _type extension custom elements_.
+They inherit from a specialized version of `HTMLElement` as a way to say, "element X is a Y".
+
+Example:
+
+```html
+<button is="mega-button">
+```
+
+#### Extending a custom element
+
+To create an `<x-foo-extended>` element that extends the `<x-foo>` custom element, simply inherit its prototype
+and say what tag you're inheriting from:
+
+```js
+var XFooProto = Object.create(HTMLElement.prototype);
+...
+
+var XFooExtended = document.registerElement('x-foo-extended', {
+    prototype: XFooProto,
+    extends: 'x-foo'
+});
+```
+
+See [Adding JS properties and methods](#adding-js-properties-and-methods) below for more information on creating element prototypes.
+
+### How elements are upgraded
+
+Have you ever wondered why the HTML parser doesn't throw a fit on non-standard tags?
+For example, it's perfectly happy if we declare `<randomtag>` on the page. According to the [HTML specification](https://html.spec.whatwg.org/multipage/dom.html#htmlunknownelement):
+
+{% Aside %}
+The `HTMLUnknownElement` interface must be used for HTML elements that are not defined by this specification.
+{% endAside %}
+
+Sorry `<randomtag>`! You're non-standard and inherit from `HTMLUnknownElement`.
+
+The same is not true for custom elements. **Elements with valid custom element names inherit from `HTMLElement`.** You can verify this fact by firing up the Console: `Ctrl + Shift + J` (or `Cmd + Opt + J` on Mac), and paste in the following lines of code; they return `true`:
+
+```js
+// "tabs" is not a valid custom element name
+document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype
+
+// "x-tabs" is a valid custom element name
+document.createElement('x-tabs').__proto__ == HTMLElement.prototype
+```
+
+{% Aside %}
+`<x-tabs>` will still be an `HTMLUnknownElement` in browsers that don't support `document.registerElement()`.
+{% endAside %}
+
+#### Unresolved elements
+
+Because custom elements are registered by script using `document.registerElement()`, **they can be
+declared or created _before_ their definition is registered** by the browser. For example,
+you can declare `<x-tabs>` on the page but end up invoking `document.registerElement('x-tabs')` much later.
+
+Before elements are upgraded to their definition, they're called **unresolved elements**.
+These are HTML elements that have a valid custom element name but haven't been registered.
+
+This table might help keep things straight:
+
+| Name                | Inherits from        | Examples                   |
+| ------------------- | -------------------- | -------------------------- |
+| Unresolved element  | `HTMLElement`        | `<x-tabs>`, `<my-element>` |
+| Unknown element     | `HTMLUnknownElement` | `<tabs>`, `<foo_bar>`      |
+
+{% Aside %}
+Think of unresolved elements as in limbo.
+They're potential candidates for the browser to upgrade later on. The browser says, "You have all the right qualities I'm looking for in a new element. I promise to upgrade you when I'm given your definition".
+{% endAside %}
+
+## Instantiating elements
+
+The common techniques of creating elements still apply to custom elements.
+As with any standard element, they can be declared in HTML or created in DOM
+using JavaScript.
+
+### Instantiating custom tags
+
+**Declare** them:
+
+```html
+<x-foo></x-foo>
+```
+
+**Create DOM** in JS:
+
+```js
+var xFoo = document.createElement('x-foo');
+xFoo.addEventListener('click', function(e) {
+    alert('Thanks!');
+});
+```
+
+Use the **`new` operator**:
+
+```js
+var xFoo = new XFoo();
+document.body.appendChild(xFoo);
+```
+
+### Instantiating type extension elements
+
+Instantiating type extension-style custom elements is strikingly close to custom tags.
+
+**Declare** them:
+
+```html
+<!-- <button> "is a" mega button -->
+<button is="mega-button">
+```
+
+**Create DOM** in JS:
+
+```js
+var megaButton = document.createElement('button', 'mega-button');
+// megaButton instanceof MegaButton === true
+```
+
+As you can see, there's now an overloaded version of `document.createElement()`
+that takes the `is=""` attribute as its second parameter.
+
+Use the **`new` operator**:
+
+```js
+var megaButton = new MegaButton();
+document.body.appendChild(megaButton);
+```
+
+So far, we've learned how to use `document.registerElement()` to tell the browser about a new tag…but
+it doesn't do much. Let's add properties and methods.
+
+## Adding JS properties and methods
+
+The powerful thing about custom elements is that you can bundle tailored functionality
+with the element by defining properties and methods on the element definition.
+Think of this as a way to create a public API for your element.
+
+Here's a full example:
+
+```js
+var XFooProto = Object.create(HTMLElement.prototype);
+
+// 1. Give x-foo a foo() method.
+XFooProto.foo = function() {
+    alert('foo() called');
+};
+
+// 2. Define a property read-only "bar".
+Object.defineProperty(XFooProto, "bar", {value: 5});
+
+// 3. Register x-foo's definition.
+var XFoo = document.registerElement('x-foo', {prototype: XFooProto});
+
+// 4. Instantiate an x-foo.
+var xfoo = document.createElement('x-foo');
+
+// 5. Add it to the page.
+document.body.appendChild(xfoo);
+```
+
+Of course there are umpteen thousand ways to construct a `prototype`. If you're not
+a fan of creating prototypes like this, here's a more condensed version of the same thing:
+
+```js
+var XFoo = document.registerElement('x-foo', {
+  prototype: Object.create(HTMLElement.prototype, {
+    bar: {
+      get: function () {
+        return 5;
+      }
+    },
+    foo: {
+      value: function () {
+        alert('foo() called');
+      }
+    }
+  })
+});
+```
+
+The first format allows for the use of ES5 [`Object.defineProperty`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). The second allows the use of [get/set](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/get).
+
+### Lifecycle callback methods
+
+Elements can define special methods for tapping into interesting times of their existence.
+These methods are appropriately named the **lifecycle callbacks**. Each has a specific name and purpose:
+
+<table>
+  <thead>
+    <tr>
+      <th>Callback name</th>
+      <th>Called when</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>createdCallback</td>
+      <td>an instance of the element is created</td>
+    </tr>
+    <tr>
+      <td>attachedCallback</td>
+      <td>an instance was inserted into the document</td>
+    </tr>
+    <tr>
+      <td>detachedCallback</td>
+      <td>an instance was removed from the document</td>
+    </tr>
+    <tr>
+      <td>attributeChangedCallback(attrName, oldVal, newVal)</td>
+      <td>an attribute was added, removed, or updated</td>
+    </tr>
+  </tbody>
+</table>
+
+**Example:** defining `createdCallback()` and `attachedCallback()` on `<x-foo>`:
+
+```js
+var proto = Object.create(HTMLElement.prototype);
+
+proto.createdCallback = function() {...};
+proto.attachedCallback = function() {...};
+
+var XFoo = document.registerElement('x-foo', {prototype: proto});
+```
+
+**All of the lifecycle callbacks are optional**, but define them if/when it makes sense.
+For example, say your element is sufficiently complex and opens a connection to IndexedDB
+in `createdCallback()`. Before it gets removed from the DOM, do the necessary
+cleanup work in `detachedCallback()`. **Note:** you shouldn't rely on this,
+for example, if the user closes the tab, but think of it as a possible optimization hook.
+
+Another use case lifecycle callbacks is for setting up default event listeners
+on the element:
+
+```js
+proto.createdCallback = function() {
+  this.addEventListener('click', function(e) {
+    alert('Thanks!');
+  });
+};
+```
+
+{% Aside %}
+People won't use your elements if
+they're clunky. The lifecycle callbacks can help you be a good citizen!
+{% endAside %}
+
+## Adding markup
+
+We've created `<x-foo>`, given it a JavaScript API, but it's blank! Shall we
+give it some HTML to render?
+
+[Lifecycle callbacks](#lifecycle) come in handy here. Particularly, we can use
+`createdCallback()` to endow an element with some default HTML:
+
+```js
+var XFooProto = Object.create(HTMLElement.prototype);
+
+XFooProto.createdCallback = function() {
+    this.innerHTML = "**I'm an x-foo-with-markup!**";
+};
+
+var XFoo = document.registerElement('x-foo-with-markup', {prototype: XFooProto});
+```
+
+Instantiating this tag and inspecting in the DevTools (right-click, select Inspect Element) should show:
+
+```html
+▾<x-foo-with-markup>
+  **I'm an x-foo-with-markup!**
+</x-foo-with-markup>
+```
+
+### Encapsulating the internals in Shadow DOM
+
+By itself, [Shadow DOM](/shadowdom/) is a powerful tool for
+encapsulating content. Use it in conjunction with custom elements and things get magical!
+
+Shadow DOM gives custom elements:
+
+1. A way to hide their guts, thus shielding users from gory implementation details.
+1. [Style encapsulation](/shadowdom-201/)…fo' free.
+
+Creating an element from Shadow DOM is like creating one that
+renders basic markup. The difference is in `createdCallback()`:
+
+```js
+var XFooProto = Object.create(HTMLElement.prototype);
+
+XFooProto.createdCallback = function() {
+    // 1. Attach a shadow root on the element.
+    var shadow = this.createShadowRoot();
+
+    // 2. Fill it with markup goodness.
+    shadow.innerHTML = "**I'm in the element's Shadow DOM!**";
+};
+
+var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});
+```
+
+Instead of setting the element's `.innerHTML`, I've created a
+Shadow Root for `<x-foo-shadowdom>` and then filled it with markup.
+With the "Show Shadow DOM" setting enabled in the DevTools, you'll see a
+`#shadow-root` that can be expanded:
+
+```js
+▾<x-foo-shadowdom>
+  ▾#shadow-root
+    **I'm in the element's Shadow DOM!**
+</x-foo-shadowdom>
+```
+
+That's the Shadow Root!
+
+### Creating elements from a template
+
+[HTML Templates](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element) are another new API primitive that fits nicely into the world of custom elements.
+
+**Example:** registering an element created from a `<template>` and Shadow DOM:
+
+```js
+<template id="sdtemplate">
+  <style>
+    p { color: orange; }
+  </style>
+  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
+</template>
+
+<script>
+  var proto = Object.create(HTMLElement.prototype, {
+    createdCallback: {
+      value: function() {
+        var t = document.querySelector('#sdtemplate');
+        var clone = document.importNode(t.content, true);
+        this.createShadowRoot().appendChild(clone);
+      }
+    }
+  });
+  document.registerElement('x-foo-from-template', {prototype: proto});
+</script>
+
+<template id="sdtemplate">
+  <style>:host p { color: orange; }</style>
+  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
+</template>
+
+<div class="demoarea">
+  <x-foo-from-template></x-foo-from-template>
+</div>
+```
+
+These few lines of code pack a lot of punch. Let's understanding everything that is happening:
+
+1. We've registered a new element in HTML: `<x-foo-from-template>`
+- The element's DOM was created from a `<template>`
+- The element's scary details are hidden away using Shadow DOM
+- Shadow DOM gives the element style encapsulation (e.g. `p {color: orange;}` isn't
+turning the entire page orange)
+
+So good!
+
+## Styling custom elements
+
+As with any HTML tag, users of your custom tag can style it with selectors:
+
+```html
+<style>
+  app-panel {
+    display: flex;
+  }
+  [is="x-item"] {
+    transition: opacity 400ms ease-in-out;
+    opacity: 0.3;
+    flex: 1;
+    text-align: center;
+    border-radius: 50%;
+  }
+  [is="x-item"]:hover {
+    opacity: 1.0;
+    background: rgb(255, 0, 255);
+    color: white;
+  }
+  app-panel > [is="x-item"] {
+    padding: 5px;
+    list-style: none;
+    margin: 0 7px;
+  }
+</style>
+
+<app-panel>
+    <li is="x-item">Do</li>
+    <li is="x-item">Re</li>
+    <li is="x-item">Mi</li>
+</app-panel>
+```
+
+### Styling elements that use Shadow DOM
+
+The rabbit hole goes much _much_ deeper when you bring Shadow DOM into the mix.
+[Custom elements that use Shadow DOM](#encapsulating-the-internals-in-shadow-dom) inherit its great benefits.
+
+Shadow DOM infuses an element with style encapsulation. Styles defined in a Shadow Root don't
+leak out of the host and don't bleed in from the page. **In the case of a custom element, the element itself is the host.** The properties of style encapsulation also allow custom elements to
+define default styles for themselves.
+
+Shadow DOM styling is a huge topic! If you want to learn more about it, I recommend a few of my other articles:
+
+- "[A Guide to Styling Elements](http://www.polymer-project.org/articles/styling-elements.html)" on [Polymer](http://www.polymer-project.org)'s documentation.
+- "[Shadow DOM 201: CSS & Styling](/shadowdom-201/)" here.
+
+### FOUC prevention using :unresolved
+
+To mitigate [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content), custom elements spec
+out a new CSS pseudo class, `:unresolved`. Use it to target [unresolved elements](#unresolved-elements),
+right up until the point where the browser invokes your `createdCallback()` (see [lifecycle methods](#lifecycle-callback-methods)).
+Once that happens, the element is no longer an unresolved element. The upgrade process is
+complete and the element has transformed into its definition.
+
+{% Aside %}
+CSS `:unresolved` is supported natively in Chrome 29.
+{% endAside %}
+
+**Example**: fade in "x-foo" tags when they're registered:
+
+```html
+<style>
+  x-foo {
+    opacity: 1;
+    transition: opacity 300ms;
+  }
+  x-foo:unresolved {
+    opacity: 0;
+  }
+</style>
+```
+
+Keep in mind that `:unresolved` only applies to [unresolved elements](#unresolved-elements),
+not to elements that inherit from `HTMLUnknownElement` (see [How elements are upgraded](#how-elements-are-upgraded)).
+
+```html
+<style>
+  /* apply a dashed border to all unresolved elements */
+  :unresolved {
+    border: 1px dashed red;
+    display: inline-block;
+  }
+  /* x-panel's that are unresolved are red */
+  x-panel:unresolved {
+    color: red;
+  }
+  /* once the definition of x-panel is registered, it becomes green */
+  x-panel {
+    color: green;
+    display: block;
+    padding: 5px;
+    display: block;
+  }
+</style>
+
+<panel>
+    I'm black because :unresolved doesn't apply to "panel".
+    It's not a valid custom element name.
+</panel>
+
+<x-panel>I'm red because I match x-panel:unresolved.</x-panel>
+```
+
+## History and browser support
+
+### Feature detection
+
+Feature detecting is a matter of checking if `document.registerElement()` exists:
+
+```js
+function supportsCustomElements() {
+    return 'registerElement' in document;
+}
+
+if (supportsCustomElements()) {
+    // Good to go!
+} else {
+    // Use other libraries to create components.
+}
+```
+
+### Browser support
+
+`document.registerElement()` first started landing behind a flag in Chrome 27 and Firefox ~23. However, the specification has evolved quite a bit since then. Chrome 31 is the first to have
+true support for the updated spec.
+
+{% Aside %}
+Custom elements can be enabled in Chrome 31 under "Experimental Web Platform features" in `about:flags`.
+{% endAside %}
+
+Until browser support is stellar, there's a [polyfill](http://www.polymer-project.org/platform/custom-elements.html) which is used by Google's [Polymer](http://polymer-project.org) and Mozilla's [X-Tag](http://www.x-tags.org/).
+
+### What happened to HTMLElementElement?
+
+For those that have followed the standardization work, you know there was once `<element>`.
+It was the bees knees. You could use it to declaratively register new elements:
+
+```html
+<element name="my-element">
+    ...
+</element>
+```
+
+Unfortunately, there were too many timing issues with the [upgrade process](#how-elements-are-upgraded),
+corner cases, and Armageddon-like scenarios to work it all out. `<element>` had to be shelved. In August 2013, Dimitri Glazkov posted to [public-webapps](http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html) announcing its removal, at least for now.
+
+It's worth noting that Polymer implements a declarative form of element registration
+with `<polymer-element>`. How? It uses `document.registerElement('polymer-element')` and
+the techniques I described in [Creating elements from a template](#creating-elements-from-a-template).
+
+## Conclusion
+
+Custom elements give us the tool to extend HTML's vocabulary, teach it new tricks,
+and jump through the wormholes of the web platform. Combine them with the other
+new platform primitives like Shadow DOM and `<template>`, and we start to realize
+the picture of Web Components. Markup can be sexy again!
+
+If you're interested in getting started with web components, I recommend checking
+out [Polymer](http://polymer-project.org). It's got more than enough to get you going.
diff --git a/src/site/content/en/blog/dance-tonite/index.md b/src/site/content/en/blog/dance-tonite/index.md
new file mode 100644
index 00000000000..f1ed0a470bf
--- /dev/null
+++ b/src/site/content/en/blog/dance-tonite/index.md
@@ -0,0 +1,594 @@
+---
+layout: post
+title: Dance Tonite in WebVR
+description: |
+    Dance Tonite is an ever-changing VR collaboration with the band LCD Soundsystem and their fans. Built in WebVR, the project works across platforms–with and without VR–giving users a different role into the experience depending on their device. Project creators Jonathan Puckey, Moniker and Google’s Data Arts Team’s creative decisions and advanced optimization techniques enabled high-quality performance–close to 60FPS for 3DoF and 90FPS for 6DoF–and a compelling user experience across all platforms using a single codebase.
+date: 2017-08-22
+updated: 2017-08-22
+tags:
+  - blog
+  - case-study
+
+---
+
+I was excited when the Google Data Arts team approached Moniker and myself about
+working together to explore the possibilities introduced by WebVR. I have
+watched the work coming from their team over the years and their projects have
+always struck a chord with me. Our collaboration resulted in
+[Dance Tonite](https://tonite.dance), an ever-changing VR dance experience
+with [LCD Soundsystem](https://lcdsoundsystem.com/) and their fans. Here is
+how we did it.
+
+## The concept
+
+We began with developing a series of prototypes using WebVR, an open standard
+that makes it possible to enter VR by visiting a website using your browser. The
+goal is to make it easier for everyone to get into VR experiences, no matter
+what device you have.
+
+We took this to heart. Whatever we came up with should work on all types of VR,
+from the  VR headsets that work with mobile phones such as Google’s Daydream
+View, Cardboard and Samsung’s Gear VR to room-scale systems such as the HTC VIVE
+and Oculus Rift which reflect your physical movements in your virtual
+environment. Perhaps most importantly, we felt it would be in the spirit of the
+web to make something that also works for everyone who does not own a VR device.
+
+### 1. DIY motion capture
+
+Because we wanted to involve users creatively, we started looking into the
+possibilities for participation and self expression using VR. We were impressed
+by how finely you could move and look around in VR, and how much fidelity there
+was. This gave us an idea. Instead of having users look at or create something,
+how about recording their movements?
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VqH12TIfbJvouo7epCL7.jpg", alt="Someone recording themselves on Dance Tonite. The screen behind them
+  shows what they are seeing in their headset", width="800", height="600" %}
+</figure>
+
+We cooked up a prototype where we recorded the positions of our VR goggles and
+controllers while dancing. We replaced the recorded positions with abstract
+shapes and marveled at the results. The results were so human and contained so
+much personality! We quickly realized that we could use WebVR to do cheap motion
+capture at home.
+
+With WebVR, the developer has access to the user’s head position and orientation
+via the [VRPose](https://developer.mozilla.org/docs/Web/API/VRPose)
+object. This value is updated every frame by the VR hardware so that your code
+can render new frames from the correct point of view. Through the [GamePad API
+with WebVR](https://developer.mozilla.org/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR), we also can access the position/orientation of the users
+controllers via the
+[GamepadPose](https://developer.mozilla.org/docs/Web/API/GamepadPose)
+object. We simply store all these position and orientation values every frame,
+thus creating a “recording” of the user’s movements.
+
+### 2. Minimalism & costumes
+
+With today’s room scale VR equipment, we can track three points of the user’s
+body: their head and two hands. In Dance Tonite, we wanted to keep the focus on
+the humanity in the movement of these 3 points in space. To achieve this, we
+pushed the aesthetic as minimal as we possibly could in order to focus on the
+movement. We liked the idea of putting people’s brains to work.
+
+{% YouTube id="1F5ICP9SYLU" %}
+
+This video demonstrating the work of the Swedish Psychologist Gunnar Johansson
+was one of the examples we referred to when considering stripping things down as
+much as possible. It shows how floating white dots are instantly recognizable as
+bodies when seen in motion.
+
+Visually, we were inspired by the colored rooms and geometric costumes in this
+recording of Margarete Hastings’s 1970 restaging of Oskar Schlemmer’s Triadic
+Ballet.
+
+{% YouTube id="rlIiT80dqHE" %}
+
+Whereas Schlemmer’s reason for choosing abstract geometric costumes was to limit
+the movements of his dancers to that of puppets & marionettes, we had the
+opposite goal for Dance Tonite.
+
+We ended up basing our choice of shapes on how much information they conveyed by
+rotation. An orb looks the same no matter how it is rotated, but a cone really
+points in the direction that it is looking and looks different from the front
+than the back.
+
+### 3. Loop pedal for movement
+
+We wanted to show large groups of recorded people dancing and moving with each
+other. To do so live wouldn’t be feasible, since VR devices aren’t out in large
+enough numbers. But we still wanted to have groups of people reacting to each
+other through movement. Our minds went to Norman McClaren’s recursive
+performance in his 1964 video piece “Canon.”
+
+{% YouTube id="2VrnXw9waJI" %}
+
+McClaren’s performance features a series of highly choreographed movements that
+start to interact with one another after every loop. Much like a loop pedal in
+music, where musicians jam with themselves by layering different pieces of live
+music, we were interested in seeing if we could create an environment where
+users could improvise looser versions of performances freely.
+
+### 4. Interconnected rooms
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KVsSb3pto90MxgI9dxjc.jpg", alt="Interconnected rooms", width="800", height="502" %}
+</figure>
+
+Like a lot of music, the tracks of LCD Soundsystem are built up using precisely
+timed measures. Their track, Tonite, which is featured in our project, features
+measures that are exactly 8 seconds long. We wanted to have users make a
+performance for each 8-second loop in the track. Even though the rhythm of these
+measures does not change, their musical content does. As the song progresses,
+there are moments with different instruments and vocals to which the performers
+can react in different ways. Each of these measures are expressed as a room, in
+which people can make a performance that fits to it.
+
+## Optimizations for performance: don't drop frames
+
+Creating a multi-platform VR experience that runs on a single codebase with
+optimal performance for each device or platform is not a simple feat.
+
+When in VR, one the most nauseating things you can experience is caused by the
+frame rate doesn’t keep up with your movement. If you turn your head but the
+visuals your eyes see don’t match the motion your inner ear feels, it causes
+instant stomach churn. For this reason, we needed to avoid any large frame rate
+delay. Here are some optimizations we implemented.
+
+### 1. Instanced buffer geometry
+
+Since our entire project uses only a handful of 3d objects, we were able to get
+a huge performance boost by using Instanced Buffer Geometry. Basically, it
+allows you to upload your object to the GPU once and draw as many “instances” of
+that object as you like in a single draw call. In Dance Tonite, we only have 3
+different objects (a cone, a cylinder, and room with a hole), but potentially
+hundreds of copies of those objects. Instance Buffer Geometry is [a part of
+ThreeJS](https://threejs.org/examples/?q=inst#webgl_buffergeometry_instancing),
+but we used [Dusan Bosnjak’s experimental and in-progress
+fork](https://github.com/pailhead/three-instanced-mesh) that implements
+`THREE.InstanceMesh`, which makes working with Instanced Buffer Geometry much
+easier.
+
+### 2. Avoiding the garbage collector
+
+As with many other scripting languages, JavaScript automatically frees memory by
+finding out which objects that were allocated are not used anymore. This process
+is called garbage collection.
+
+Developers have no control over when this happens. The garbage collector could
+show up at our doors at any moment and start emptying the garbage, resulting in
+dropped frames as they take their sweet time.
+
+The solution for this is to produce as little garbage as we can by recycling our
+objects. Instead of creating a new vector object for every calculation, we
+marked scratch objects for reuse. Because we hold on to them by moving our
+reference to them outside of our scope, they weren’t marked for removal.
+
+For instance, here’s our code to convert the location matrix of the user’s head
+and hands into the array of position/rotation values we store each frame. By
+reusing `SERIALIZE_POSITION`, `SERIALIZE_ROTATION`, and `SERIALIZE_SCALE`, we
+avoid the memory allocation and garbage collection that would take place if we
+created new objects each time the function is called.
+
+```js
+const SERIALIZE_POSITION = new THREE.Vector3();
+const SERIALIZE_ROTATION = new THREE.Quaternion();
+const SERIALIZE_SCALE = new THREE.Vector3();
+export const serializeMatrix = (matrix) => {
+    matrix.decompose(SERIALIZE_POSITION, SERIALIZE_ROTATION, SERIALIZE_SCALE);
+    return SERIALIZE_POSITION.toArray()
+    .concat(SERIALIZE_ROTATION.toArray())
+    .map(compressNumber);
+};
+```
+
+### 3. Serializing motion & progressive playback
+
+In order to capture the movements of users in VR, we needed to serialize the
+position and rotation of their headset and controllers and upload this data to
+our servers. We started out capturing the full transformation matrices for every
+frame. This performed well, but with 16 numbers multiplied by 3 positions each
+at 90 frames per second, it led to very large files and therefore long waits
+while uploading and downloading the data. By extracting just the positional and
+rotational data from the transformation matrices we were able to bring down
+these values from 16 to 7.
+
+Since visitors on the web often click on a link without knowing exactly what to
+expect, we need to show visual content quickly or they will leave within
+seconds.
+
+For this reason, we wanted to make sure our project could start playing as soon
+as possible. Initially, we were using JSON as a format to load our movement
+data. The problem is that we have to load the complete JSON file before we are
+able to parse it. Not very progressive.
+
+In order to keep a project like Dance Tonite displaying at the highest possible
+frame rate, the browser only has a small amount of time each frame for
+JavaScript calculations. If you take too long, the animations start to stutter.
+At first, we were experiencing stutters as these huge JSON files were decoded by
+the browser.
+
+We came across a convenient streaming data format based called
+[**NDJSON**](http://specs.okfnlabs.org/ndjson/) or Newline delimited JSON. The
+trick here is to make a file with a series of valid JSON strings, each on their
+own line. This allows you to parse the file while it is loading, allowing us to
+display performances before they are fully loaded.
+
+Here is what a section of
+[one of our recordings](https://storage.googleapis.com/you-move-me.appspot.com/recordings/ceB8CA/15FPS.json)
+looks like:
+
+```json
+{"fps":15,"count":1,"loopIndex":"1","hideHead":false}
+[-464,17111,-6568,-235,-315,-44,9992,-3509,7823,-7074, ... ]
+[-583,17146,-6574,-215,-361,-38,9991,-3743,7821,-7092, ... ]
+[-693,17158,-6580,-117,-341,64,9993,-3977,7874,-7171, ... ]
+[-772,17134,-6591,-93,-273,205,9994,-4125,7889,-7319, ... ]
+[-814,17135,-6620,-123,-248,408,9988,-4196,7882,-7376, ... ]
+[-840,17125,-6644,-173,-227,530,9982,-4174,7815,-7356, ... ]
+[-868,17120,-6670,-148,-183,564,9981,-4069,7732,-7366, ... ]
+...
+```
+
+Using NDJSON let us keep the data representation of the individual frames of the
+performances as strings. We could wait until we reached the necessary time,
+before decoding them into positional data, thus spreading out the processing
+needed over time.
+
+### 4. Interpolating movement
+
+Because we were hoping to display between 30 to 60 performances running at the
+same time, we needed to bring our data rate down even further than we already
+had. The Data Arts Team tackled the same problem in their [Virtual Art
+Sessions](https://virtualart.chromeexperiments.com/) project, where they play
+back recordings of artists painting in VR using Tilt Brush. They solved it by
+making intermediate versions of the user data with lower frame rates and
+interpolating between the frames while playing them back. We were surprised to
+find that we could hardly spot the difference between an interpolated recording
+running at 15 FPS versus the original 90 FPS recording.
+
+To see for yourself, you can force Dance Tonite to play back the data at various
+rates using the `?dataRate=` query string. You can use this to compare the
+recorded motion at [90 frames a second](https://tonite.dance/?dataRate=90), [45
+frames a second](https://tonite.dance/?dataRate=45), or [15 frames a
+second](https://tonite.dance/?dataRate=15).
+
+For position, we do a linear interpolation between the previous keyframe and the
+next, based on how close we are in time between the keyframes (ratio):
+
+```js
+const { x: x1, y: y1, z: z1 } = getPosition(previous, performanceIndex, limbIndex);
+const { x: x2, y: y2, z: z2 } = getPosition(next, performanceIndex, limbIndex);
+interpolatedPosition = new THREE.Vector3();
+interpolatedPosition.set(
+    x1 + (x2 - x1) * ratio,
+    y1 + (y2 - y1) * ratio,
+    z1 + (z2 - z1) * ratio
+    );
+```
+
+For orientation, we do a spherical linear interpolation (slerp) between
+keyframes. Orientation is stored as
+[Quaternions](https://en.wikipedia.org/wiki/Quaternion).
+
+```js
+const quaternion = getQuaternion(previous, performanceIndex, limbIndex);
+quaternion.slerp(
+    getQuaternion(next, performanceIndex, limbIndex),
+    ratio
+    );
+```
+
+### 5. Syncing movements to music
+
+In order to know which frame of the recorded animations to playback, we need to
+know the current time of the music down to the millisecond. It turns out that
+although the [HTML Audio
+element](https://developer.mozilla.org/docs/Web/HTML/Element/audio) is
+perfect for progressively loading and playing back sound, the time property it
+provides does not change in sync with the frame loop of the browser. It is
+always a bit off. Sometimes a fraction of a ms too early, sometimes a fraction
+too late.
+
+This leads to stutters in our beautiful dance recordings, which we want to avoid
+at all costs. To remedy this, we implemented our
+[own timer in JavaScript](https://github.com/puckey/dance-tonite/blob/master/src/audio.js#L89).
+This way we can be certain that the amount of time changing between frames is
+exactly the amount of time that has passed since the last frame. Whenever our
+timer goes more than 10 ms out of sync with the music, we synchronize it back
+again.
+
+### 6. Culling and fog
+
+Every story needs a good ending and we wanted to do something surprising for the
+users that made it to the end of our experience. As you leave the last room, you
+enter what feels like a quiet landscape of cones and cylinders. “Is this the
+end?”, you wonder. As you move further into the field, suddenly the tones of the
+music cause different groups of cones and cylinders to form into dancers. You
+find yourself in the middle of a huge party! Then as the music stops abruptly,
+everything falls to the ground.
+
+While this felt great as a viewer, it introduced some performance hurdles to
+solve. Room scale VR devices and their high end gaming rigs performed perfectly
+with the 40 odd extra performances needed for our new ending. But frame rates on
+certain mobile devices were halved.
+
+To counteract this, we introduced fog. After a certain distance everything
+slowly becomes black. Since we don’t need to calculate or draw that which is not
+visible, we cull performances in rooms that aren’t visible and this allows us to
+save work for both the CPU & GPU. But how to decide on the right distance?
+
+Some devices can handle anything you throw at them and others are more
+constricted. We chose to implement a sliding scale. By continually measuring the
+amount of frames per second, we can adjust the distance of our fog accordingly.
+As long as our frame rate is running smoothly, we try taking on more render work
+by pushing out the fog. If the framerate isn’t running smooth enough, we bring
+the fog closer allowing us to skip rendering performances in the darkness.
+
+```js
+// this is called every frame
+// the FPS calculation is based on stats.js by @mrdoob
+tick: (interval = 3000) => {
+    frames++;
+    const time = (performance || Date).now();
+    if (prevTime == null) prevTime = time;
+    if (time > prevTime + interval) {
+    fps = Math.round((frames * 1000) / (time - prevTime));
+    frames = 0;
+    prevTime = time;
+    const lastCullDistance = settings.cullDistance;
+
+    // if the fps is lower than 52 reduce the cull distance
+    if (fps <= 52) {
+        settings.cullDistance = Math.max(
+        settings.minCullDistance,
+        settings.cullDistance - settings.roomDepth
+        );
+    }
+    // if the FPS is higher than 56, increase the cull distance
+    else if (fps > 56) {
+        settings.cullDistance = Math.min(
+        settings.maxCullDistance,
+        settings.cullDistance + settings.roomDepth
+        );
+    }
+    }
+
+    // gradually increase the cull distance to the new setting
+    cullDistance = cullDistance * 0.95 + settings.cullDistance * 0.05;
+
+    // mask the edge of the cull distance with fog
+    viewer.fog.near = cullDistance - settings.roomDepth;
+    viewer.fog.far = cullDistance;
+}
+```
+
+## Something for everyone: building VR for the web
+
+Designing and developing multi-platform, asymmetric experiences means accounting
+for each user’s needs depending on their device. And with every design decision,
+we needed to see how that might impact other users. How do you ensure that what
+you see in VR is equally as exciting as without VR, and visa versa?
+
+### 1. The yellow orb
+
+So our room-scale VR users would be making the performances, but how would the
+users of mobile VR devices (such as Cardboard, Daydream View or Samsung Gear)
+experience the project? For this, we introduced a new element to our
+environment: the yellow orb.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YJT8jlOz1afgZzvjYrPJ.png", alt="The yellow orb", width="800", height="450" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uYlzo75YTbxRUZLnKyoh.jpg", alt="The yellow orb", width="800", height="450" %}</figure>
+
+When you watch the project in VR, you are doing so from the point of view of the
+yellow orb. As you float from room to room, the dancers react to your presence.
+They gesture to you, dance around you, make funny motions behind your back and
+move quickly out of your way so they don’t bump into you. The yellow orb is
+always the center of attention.
+
+The reason for this is that while recording a performance, the yellow orb moves
+through the center of the room in sync with the music and loops back around. The
+position of the orb gives the performer an idea where they are in time and how
+much time they have left in their loop. It provides a natural focus for them to
+build a performance around.
+
+### 2. Another point of view
+
+{% YouTube id="ul2vX8-dmTA" %}
+
+We didn’t want to leave out users without VR, especially as they would likely be
+our biggest audience. Instead of making a faux VR experience, we wanted to give
+screen-based devices their very own experience. We had the idea of showing the
+performances from above from an isometric perspective. This perspective has a
+rich history in computer games. It was first used in Zaxxon, a space shooter
+game from 1982. Whereas VR users are in the thick of it, the isometric
+perspective gives a god-like view on the action. We chose to scale up the models
+slightly, giving a touch of doll-house aesthetic.
+
+### 3. Shadows: fake it 'till you make it
+
+We found that some our users were having a hard time seeing depth in our
+isometric point of view. I am quite sure it is for this reason that Zaxxon was
+also one of the first computer games in history to project a dynamic shadow
+under its flying objects.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/47zPmMlPuWOmgUl3HCvR.png", alt="Shadows", width="800", height="450" %}
+</figure>
+
+It turns out that making shadows in 3D is hard. Especially for constricted
+devices like mobile phones. Initially we had to make the difficult decision to
+cut them out of the equation, but after asking the author of Three.js and
+experienced demo hacker [Mr doob](http://github.com/mrdoob) for advice, he came
+up with the novel idea of… faking them.
+
+
+Instead of having to calculate how each of our floating objects is obscuring our
+lights and therefore throwing shadows of different shapes, we draw the same
+circular blurred texture image under each of them. Since our visuals are not
+trying to mimic reality in the first place, we found we could get away with it
+quite easily with just a few tweaks. When the objects come closer to the ground,
+we have the textures become darker and smaller. When they move up, we make the
+textures more transparent and larger.
+
+To create them, we used
+[this texture](https://github.com/puckey/dance-tonite/blob/master/src/props/shadow.png)
+with a soft white to black gradient (with no alpha transparency). We set the
+material as transparent and use subtractive blending. This helps them blend
+nicely when they overlap:
+
+```js
+function createShadow() {
+    const texture = new THREE.TextureLoader().load(shadowTextureUrl);
+    const material = new THREE.MeshLambertMaterial({
+        map: texture,
+        transparent: true,
+        side: THREE.BackSide,
+        depthWrite: false,
+        blending: THREE.SubtractiveBlending,
+    });
+    const geometry = new THREE.PlaneBufferGeometry(0.5, 0.5, 1, 1);
+    const plane = new THREE.Mesh(geometry, material);
+    return plane;
+    }
+```
+
+### 4. Being there
+
+<figure>
+{% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/4W8jujiJ90M5PYMaW0Bx.mp4", autoplay="true", loop="true", muted="true" %}
+</figure>
+
+By clicking on the heads of a performer, visitors without VR are able to watch
+things from the dancer’s point of view. From this angle, lots of little details
+become apparent. Trying to keep their performances in step, dancers quickly
+glance at each other. As the orb enter the room, you see them nervously looking
+in its direction. While as a viewer, you cannot influence these movements, it
+does convey the feeling of immersion surprisingly well. Again, we preferred
+doing this over presenting our users with a bland mouse-controlled faux VR
+version.
+
+### 5. Sharing recordings
+
+We know how proud you can be when pulling off an intricately choreographed
+recording of 20 layers of performers reacting to each other. We knew our users
+would probably want to show it to their friends. But a still image of this feat
+doesn’t communicate enough. Instead, we wanted to allow our users to share video
+of their performances. Actually, why not a GIF? Our animations are flat shaded,
+perfect for the format’s limited color palettes.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y04fEOdmkM6kMQxWKiyB.gif", alt="Sharing recordings", width="270", height="270" %}
+</figure>
+
+We turned to [GIF.js](https://jnordberg.github.io/gif.js/), a JavaScript library
+that allows you to encode animated gifs from within the browser. It offloads the
+encoding of frames to
+[web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers)
+which are able to run in the background as separate processes, thus being able
+to take advantage of multiple processors working side-by-side.
+
+Sadly, with the amount of frames we needed for the animations, the encoding
+process was still too slow. The GIF is able to make small files by using a
+limited color palette. We found that most time was being spent finding the
+closest color for each pixel. We were able to optimize this process tenfold by
+hacking in a small short cut: if the color of the pixel is the same as the last
+one, use the same color from the palette as before.
+
+Now we had fast encodes, but the resulting GIF files were too large in size. The
+GIF format allows you to indicate how each frame is to be displayed on top of
+the last by defining its dispose method. To get smaller files, instead of
+updating each pixel each frame, we only update the pixels that changed. While
+slowing down the encoding process again, this did bring down our file sizes
+nicely.
+
+### 6. Solid ground: Google Cloud & Firebase
+
+The backend of a “user-generated content” site can often be complicated and
+fragile, but we came up with a system that is simple and robust thanks to Google
+Cloud and Firebase. When a performer uploads a new dance to the system, they are
+authenticated anonymously by
+[Firebase Authentication](https://firebase.google.com/docs/auth/). They are
+given permission to upload their recording to a temporary space using
+[Cloud Storage for Firebase](https://firebase.google.com/docs/storage/). When
+the upload is completed, the client machine calls a
+[Cloud Functions for Firebase](https://firebase.google.com/docs/functions/)
+HTTP trigger using their Firebase token. This triggers a server process that
+validates the submission, creates a database record, and moves the recording
+to a public directory on Google Cloud Storage.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2eo7xridrLwVFX1fry7r.jpg", alt="Solid ground", width="800", height="488" %}
+</figure>
+
+All of our public content is stored in a series of flat files in a Cloud Storage
+Bucket. This means our data is quickly accessible around the world and we don’t
+need to worry about high traffic loads affecting data availability in any way.
+
+We used a
+[Firebase Realtime Database](https://firebase.google.com/docs/database/) and
+Cloud Function endpoints to build a simple moderation/curation tool that lets
+us watch each new submission in VR and publish new playlists from any device.
+
+### 7. Service Workers
+
+[Service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
+are a fairly recent innovation that help manage the caching of website
+assets. In our case, service workers load our content lightning fast for
+return visitors and even allow the site to work offline. These are important
+features since many of our visitors will be on mobile connections of varying
+quality.
+
+Adding a service workers to the project was easy thanks to a
+[handy webpack plugin](https://github.com/goldhand/sw-precache-webpack-plugin)
+that handles most of the heavy lifting for you. In the configuration below,
+we generate a service worker that will automatically cache all our static
+files. It will pull the latest playlist file from the network, if available,
+since the playlist will be updating all the time. All the recording json
+files should pull from the cache if available, because these will never change.
+
+```js
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+config.plugins.push(
+    new SWPrecacheWebpackPlugin({
+    dontCacheBustUrlsMatching: /\.\w{8}\./,
+    filename: 'service-worker.js',
+    minify: true,
+    navigateFallback: 'index.html',
+    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+    runtimeCaching: [{
+        urlPattern: /playlist\.json$/,
+        handler: 'networkFirst',
+    }, {
+        urlPattern: /\/recordings\//,
+        handler: 'cacheFirst',
+        options: {
+        cache: {
+            maxEntries: 120,
+            name: 'recordings',
+        },
+        },
+    }],
+    })
+);
+```
+
+Currently, the plugin doesn’t handle progressively loaded media assets like our
+music files, so we worked around that by setting the Cloud Storage
+`Cache-Control` header on these files to `public, max-age=31536000` so
+that the browser will cache the file for up to one year.
+
+## Conclusion
+
+We’re excited to see how performers will add to this experience and use it as a
+tool for creative expression using motion. We’ve released all the code open
+source, which you can find at
+[https://github.com/puckey/dance-tonite](https://github.com/puckey/dance-tonite).
+In these early days of VR and especially WebVR, we look forward to seeing
+what new creative and unexpected directions this new medium will take.
+[Dance on](https://tonite.dance).
+
+
+
diff --git a/src/site/content/en/blog/datatransfer/index.md b/src/site/content/en/blog/datatransfer/index.md
new file mode 100644
index 00000000000..c916f9c8fe2
--- /dev/null
+++ b/src/site/content/en/blog/datatransfer/index.md
@@ -0,0 +1,292 @@
+---
+layout: post
+title: Breaking down barriers using the DataTransfer API
+subhead: "Enable the user to share data beyond the browser window."
+authors:
+  - joriktangelder
+  - thomassteiner
+description: >
+  The DataTransfer object holds data that is being dragged during a drag and drop
+  operation. It may hold one or more data items, each of one or more data types. This article
+  explains what you can do with the DataTransfer API.
+date: 2021-04-21
+updated: 2022-04-05
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/QDbWuORGDrUkKquHEeAU.jpeg
+thumbnail: image/Fu4piJdkAKgtrxhf0aLliUyaEXt1/oUzqAGoZ709h6duNSOUo.webp
+tags:
+  - blog
+  - progressive-web-apps
+---
+
+You might have heard about the
+[DataTransfer API](https://developer.mozilla.org/docs/Web/API/DataTransfer), which is
+part of the
+[HTML5 Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+and [Clipboard events](https://developer.mozilla.org/docs/Web/API/Element/copy_event). It can
+be used to transfer data between source and receiving targets.
+
+{% BrowserCompat 'api.DataTransfer' %}
+
+The drag-drop and copy-paste interactions are often used for interactions within a page
+to transfer simple text from A to B. But what is oftentimes overlooked is the ability to use
+these same interactions to go beyond the browser window.
+
+Both the browser's built-in drag-and-drop and the copy-paste interactions can communicate
+with other applications, web or otherwise, and are not tied to any origin. The API supports multiple
+data entries with different behaviors based on where data is transferred to. Your
+web application can send and receive the transferred data when listening to incoming events.
+
+This capability can change the way we think about sharing and interoperability in web
+applications on desktop. Transferring data between applications doesn't need to rely on
+tightly coupled integrations anymore. Instead you can give users full control to transfer
+data to wherever they like.
+
+<figure>
+  {% YouTube 'EYMgUhn_Zdo' %}
+  <figcaption>An example of interactions that are possible with the DataTransfer API. (Video does not include sound.)</figcaption>
+</figure>
+
+## Transferring data
+
+To get started, you'll need to implement drag-drop or copy-paste. The examples
+below show drag-drop interactions, but the process for copy-paste is similar. If
+you are unfamiliar with the Drag and Drop API, there's a great article
+[explaining HTML5 Drag and Drop](/drag-and-drop/), which explains the ins and outs.
+
+By providing [MIME-type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) keyed data,
+you are able to freely interact with external applications.
+Most WYSIWYG editors, text editors, and browsers respond to the "primitive" mime-types used in the
+example below.
+
+```js
+document.querySelector('#dragSource')
+.addEventListener('dragstart', (event) => {
+  event.dataTransfer.setData('text/plain', 'Foo bar');
+  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
+  event.dataTransfer.setData('text/uri-list', 'https://example.com');
+});
+```
+
+Notice the `event.dataTransfer` property. This returns an instance of
+[`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer). As
+you'll see, this object is sometimes returned by properties with other names.
+
+Receiving the data transfer works almost the same as providing it. Listen to the receiving events
+(`drop`, or `paste`) and read the keys. When dragging over an element, the browser only has access
+to the `type` keys of the data. The data itself can only be accessed after a drop.
+
+```js
+document.querySelector('#dropTarget')
+.addEventListener('dragover', (event) => {
+  console.log(event.dataTransfer.types);
+  // Without this, the drop event won't fire.
+  event.preventDefault();
+});
+
+document.querySelector('#dropTarget')
+.addEventListener('drop', (event) => {
+  // Log all the transferred data items to the console.
+  for (let type of event.dataTransfer.types) {
+    console.log({ type, data: event.dataTransfer.getData(type) });
+  }
+  event.preventDefault();
+});
+```
+
+Three MIME-types are widely supported across applications:
+- **`text/html`:** Renders the HTML payload in `contentEditable` elements and rich
+  text (WYSIWYG) editors like Google Docs, Microsoft Word, and others.
+- **`text/plain:`** Sets the value of input elements, content of code editors, and the fallback
+  from `text/html`.
+- **`text/uri-list`:** Navigates to the URL when dropping on the URL bar or browser page. A URL
+  shortcut will be created when dropping on a directory or the desktop.
+
+The widespread adoption of `text/html` by WYSIWYG editors makes it very useful. As in HTML
+documents, you can embed resources by using
+[Data URLs](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) or publicly
+accessible URLs. This works well with exporting visuals (for example from a canvas) to editors like
+Google Docs.
+
+```js
+const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
+const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
+event.dataTransfer.setData('text/html', html);
+```
+
+### Transfer using copy and paste
+
+Using the DataTransfer API with copy-paste interactions is shown below. Notice that
+the `DataTransfer` object is returned by a property called `clipboardData` for clipboard events.
+
+```js
+// Listen to copy-paste events on the document.
+document.addEventListener('copy', (event) => {
+  const copySource = document.querySelector('#copySource');
+  // Only copy when the `activeElement` (i.e., focused element) is,
+  // or is within, the `copySource` element.
+  if (copySource.contains(document.activeElement)) {
+    event.clipboardData.setData('text/plain', 'Foo bar');
+    event.preventDefault();
+  }
+});
+
+document.addEventListener('paste', (event) => {
+  const pasteTarget = document.querySelector('#pasteTarget');
+  if (pasteTarget.contains(document.activeElement)) {
+    const data = event.clipboardData.getData('text/plain');
+    console.log(data);
+  }
+});
+```
+
+## Custom data formats
+
+You are not limited to the primitive MIME types, but can use any key to identify the transferred
+data. This can be useful for cross-browser interactions within your application. As shown below, you
+can transfer more complex data using the `JSON.stringify()` and `JSON.parse()` functions.
+
+```js
+document.querySelector('#dragSource')
+.addEventListener('dragstart', (event) => {
+  const data = { foo: 'bar' };
+  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
+});
+
+document.querySelector('#dropTarget')
+.addEventListener('dragover', (event) => {
+  // Only allow dropping when our custom data is available.
+  if (event.dataTransfer.types.includes('my-custom-type')) {
+    event.preventDefault();
+  }
+});
+
+document.querySelector('#dropTarget')
+.addEventListener('drop', (event) => {
+  if (event.dataTransfer.types.includes('my-custom-type')) {
+    event.preventDefault();
+    const dataString = event.dataTransfer.getData('my-custom-type');
+    const data = JSON.parse(dataString);
+    console.log(data);
+  }
+});
+```
+
+## Connecting the web
+
+While custom formats are great for communication between applications you have in your control, it
+also limits the user when transferring data to applications that aren't using your format. If you want to
+connect with third-party applications across the web, you need a universal data format.
+
+The [JSON-LD](https://json-ld.org/) (Linked Data) standard is a great candidate for this. It is
+lightweight and easy to read from and write to in JavaScript. [Schema.org](https://schema.org) contains many
+predefined types that can be used, and custom schema definitions are an option as well.
+
+```js
+const data = {
+  '@context': 'https://schema.org',
+  '@type': 'ImageObject',
+  contentLocation: 'Venice, Italy',
+  contentUrl: 'venice.jpg',
+  datePublished: '2010-08-08',
+  description: 'I took this picture during our honey moon.',
+  name: 'Canal in Venice',
+};
+event.dataTransfer.setData('application/ld+json', JSON.stringify(data));
+```
+
+When using the Schema.org types, you can start with the generic [Thing](https://schema.org/Thing) type,
+or use something closer to your use case like [Event](https://schema.org/Event), [Person](https://schema.org/Person),
+[MediaObject](https://schema.org/MediaObject), [Place](https://schema.org/Place), or even highly-specific types like
+[MedicalEntity](https://schema.org/MedicalEntity) if need be. When you use TypeScript, you can use the
+interface definitions from the [schema-dts](https://github.com/google/schema-dts) type definitions.
+
+By transmitting and receiving JSON-LD data, you will support a more connected and open web. With
+applications speaking the same language, you can create deep integrations with external
+applications. There's no need for complicated API integrations; all the information that's needed is
+included in the transferred data.
+
+Think of all the possibilities for transferring data between any (web) application with no
+restrictions: sharing events from a calendar to your favorite ToDo app, attaching virtual files to
+emails, sharing contacts. That would be great, right? This starts with you! 🙌
+
+## Concerns
+
+While the DataTransfer API is available today, there are some things to be aware of before integrating.
+
+### Browser compatibility
+
+Desktop browsers all have great support for the technique described above, while mobile devices do
+not. The technique has been tested on all major browsers (Chrome, Edge, Firefox, Safari) and
+operating systems (Android, ChromeOS, iOS, macOS, Ubuntu Linux, and Windows), but unfortunately Android
+and iOS didn't pass the test. While browsers continue to develop, for now the technique is limited
+to desktop browsers only.
+
+### Discoverability
+
+Drag-drop and copy-paste are system-level interactions when working on a desktop computer, with
+roots back to the first GUIs more than 40 years ago. Think about how many times you have
+used these interactions for organizing files. This isn't yet very common on the web.
+
+You will need to educate users about this new interaction, and come up with UX patterns to make this
+recognizable, especially for people whose experience with computers so far has been confined to mobile devices.
+
+### Accessibility
+
+Drag-drop is not a very accessible interaction, but the DataTransfer API works with copy-paste, too.
+Make sure you listen to copy-paste events. It doesn't take much extra work, and your users
+will be grateful to you for adding it.
+
+### Security and privacy
+
+There are some security and privacy considerations you should be aware of when using the technique.
+
+- Clipboard data is available to other applications on the user's device.
+- Web applications you are dragging over have access to the type keys, not the data. The data only
+  becomes available on drop or paste.
+- The received data should be treated like any other user input; sanitize and validate before using.
+
+## Getting started with the Transmat helper library
+
+Are you excited about using the DataTransfer API in your application? Consider taking a look at the
+[Transmat library on GitHub](https://google.github.io/transmat). This open-source library aligns browser
+differences, provides JSON-LD utilities, contains an observer to respond to transfer events for
+highlighting drop-areas, and lets you integrate the data transfer operations among existing drag and drop
+implementations.
+
+```js
+import { Transmat, TransmatObserver, addListeners } from 'transmat';
+
+// Send data on drag/copy.
+addListeners(myElement, 'transmit', (event) => {
+  const transmat = new Transmat(event);
+  transmat.setData({
+    'text/plain': 'Foobar',
+    'application/json': { foo: 'bar' },
+  });
+});
+
+// Receive data on drop/paste.
+addListeners(myElement, 'receive', (event) => {
+  const transmat = new Transmat(event);
+  if (transmat.hasType('application/json') && transmat.accept()) {
+    const data = JSON.parse(transmat.getData('application/json'));
+  }
+});
+
+// Observe transfer events and highlight drop areas.
+const obs = new TransmatObserver((entries) => {
+  for (const entry of entries) {
+    const transmat = new Transmat(entry.event);
+    if (transmat.hasMimeType('application/json')) {
+      entry.target.classList.toggle('drag-over', entry.isTarget);
+      entry.target.classList.toggle('drag-active', entry.isActive);
+    }
+  }
+});
+obs.observe(myElement);
+```
+
+## Acknowledgements
+
+Hero image by [Luba Ertel](https://unsplash.com/@ertelier) on
+[Unsplash](https://unsplash.com/photos/WlL8aHeMcVM).
diff --git a/src/site/content/en/blog/debounce-your-input-handlers/index.md b/src/site/content/en/blog/debounce-your-input-handlers/index.md
new file mode 100644
index 00000000000..b7c86378e42
--- /dev/null
+++ b/src/site/content/en/blog/debounce-your-input-handlers/index.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Debounce your input handlers
+subhead: |
+  Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
+authors:
+  - paullewis
+date: 2015-03-20
+updated: 2018-08-17
+description: |
+  Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Input handlers are a potential cause of performance problems in your apps, as
+they can block frames from completing, and can cause additional and unnecessary
+layout work.
+
+## Summary
+
+* Avoid long-running input handlers; they can block scrolling.
+* Do not make style changes in input handlers.
+* Debounce your handlers; store event values and deal with style changes in the next requestAnimationFrame callback.
+
+## Avoid long-running input handlers
+
+In the fastest possible case, when a user interacts with the page, the page’s compositor thread can take the user’s touch input and simply move the content around. This requires no work by the main thread, where JavaScript, layout, styles, or paint are done.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3gVWdQyhrcRbaCge89hX.jpg", alt="Lightweight scrolling; compositor only.", width="800", height="600" %}
+</figure>
+
+If, however, you attach an input handler, like `touchstart`, `touchmove`, or `touchend`, the compositor thread must wait for this handler to finish executing because you may choose to call `preventDefault()` and stop the touch scroll from taking place. Even if you don’t call `preventDefault()` the compositor must wait, and as such the user’s scroll is blocked, which can result in stuttering and missed frames.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hPl1pZ4w1M5d7HJ7ZeQO.jpg", alt="Heavy scrolling; compositor is blocked on JavaScript.", width="800", height="600" %}
+</figure>
+
+In short, you should make sure that any input handlers you run should execute quickly and allow the compositor to do its job.
+
+## Avoid style changes in input handlers
+
+Input handlers, like those for scroll and touch, are scheduled to run just before any `requestAnimationFrame` callbacks.
+
+If you make a visual change inside one of those handlers, then at the start of the `requestAnimationFrame`, there will be style changes pending. If you _then_ read visual properties at the start of the requestAnimationFrame callback, as the advice in “[Avoid large, complex layouts and layout thrashing](/avoid-large-complex-layouts-and-layout-thrashing/)” suggests, you will trigger a forced synchronous layout!
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qQ2ymRuMt1rdAhhIXyLy.jpg", alt="Heavy scrolling; compositor is blocked on JavaScript.", width="800", height="324" %}
+</figure>
+
+## Debounce your scroll handlers
+
+The solution to both of the problems above is the same: you should always debounce visual changes to the next `requestAnimationFrame` callback:
+
+```js
+function onScroll (evt) {
+
+    // Store the scroll value for laterz.
+    lastScrollY = window.scrollY;
+
+    // Prevent multiple rAF callbacks.
+    if (scheduledAnimationFrame)
+    return;
+
+    scheduledAnimationFrame = true;
+    requestAnimationFrame(readAndUpdatePage);
+}
+
+window.addEventListener('scroll', onScroll);
+```
+
+Doing this also has the added benefit of keeping your input handlers light, which is awesome because now you’re not blocking things like scrolling or touch on computationally expensive code!
diff --git a/src/site/content/en/blog/debug-cwvs-with-web-vitals-extension/index.md b/src/site/content/en/blog/debug-cwvs-with-web-vitals-extension/index.md
new file mode 100644
index 00000000000..822ebba2cdb
--- /dev/null
+++ b/src/site/content/en/blog/debug-cwvs-with-web-vitals-extension/index.md
@@ -0,0 +1,145 @@
+---
+layout: post
+title: Using the Web Vitals extension to debug Core Web Vitals issues
+subhead: |
+  The Web Vitals extension now shows you more debugging information to help you identify the root causes of Core Web Vitals issues.
+description: |
+  The Web Vitals extension now shows you more debugging information to help you identify the root causes of Core Web Vitals issues.
+authors:
+  - tunetheweb
+  - mmocny
+  - rviscomi
+  - bckenny
+date: 2023-05-04
+#updated: 2023-05-04
+hero: image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/6PedRBQITkNfllCwbNnR.jpg
+alt: Developer's desk setup
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+The [Web Vitals extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) provides easy access to Core Web Vitals diagnostic information to help developers measure, and address Core Web Vitals issues. It supplements the other tools provided by the Chrome team to aid developers in improving the experiences on their websites.
+
+We have updated the extension to provide additional debug information to developers to make it easier to understand and address their performance problems.
+
+## Showing debug information in the console
+
+The Web Vitals extension has had a "Console Logging" debug option for some time now. It can be enabled in the Options screen:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png", alt="Web Vitals Extension Options screen", width="800", height="434" %}
+
+Prior to the this last upgrade, this logged the outputs from the [`web-vitals library`](https://github.com/GoogleChrome/web-vitals) (that underpins the extension) in a JSON object:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png", alt="Web Vitals Extension old console logging", width="800", height="458" %}
+
+This object could then be expanded to get the full details, and elements such as the LCP image, could be hovered over to highlight them in the main panel:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png", alt="Web Vitals Extension old console logging with element highlighting", width="800", height="514" %}
+
+This was helpful, but the output format was not particularly user friendly, and we thought we could provide a better developer experience. So we have improved the extension to make the most important information more visible—while still including the full object for those wanting more details.
+
+## New debug information for each metric
+
+With the new release, we have added new debug information in a more readable format to help you find and address issues. Different information is provided for each of the metrics, as each one is different.
+
+### LCP debug information
+
+For [Largest Contentful Paint (LCP)](/lcp/), we show both the element, and the breakdown of the 4 phases detailed in our [Optimize LCP](/optimize-lcp/#lcp-breakdown) guide:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png", alt="Web Vitals Extension new console logging showing LCP elements and sub-parts", width="800", height="535" %}
+
+The LCP time (2,876 milliseconds—or about 2.9 seconds) is highlighted in amber as it is in the "Needs Improvement" category.
+
+In this example, we see the `Resource load time` is the longest time, so to improve your LCP time you would look to optimize that - perhaps by avoiding hosting them on a separate domain, or by using smaller images or more efficient formats. In this case it's due to being artificially slowed down to demonstrate the output—web.dev is a fast site 😀
+
+The element can also be hovered over to highlight the image:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png", alt="Web Vitals Extension new console logging retains element highlighting on hover", width="800", height="535" %}
+
+Right clicking on the element also allows you to reveal it in the elements panel.
+
+Here the LCP element is an image, and hovering over that in the console on the right, also highlights that element on the site on the left.
+
+### CLS debug information
+
+Shifts contributing to [Cumulative Layout Shift (CLS)](/cls/) are now also listed, and can be hovered over to highlight the relevant element:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png", alt="Web Vitals Extension new console logging showing each CLS element shift", width="800", height="448" %}
+
+The above screenshot shows 2 shifts, the first made up of two elements (when the banner image is loaded and the content beneath it is shifted downloaded), and the second of 4 elements (when the dynamic ad is loaded and most of the page is shifted downwards).
+
+The `h2` element is being hovered over in this screenshot in the console on the right, and you can see this highlights the element on the site on the left.
+
+{% Aside 'important' %}
+<p>
+  Note that the shifted elements are not the elements _causing_ the shift, but the ones that were _impacted_ by any shifts.
+</p>
+<p>
+  However, as per the above example, this should usually be enough to help you identify the cause of the shift by looking at the element which is either above the first shifted element (for inserted elements) or the first element itself (if this is expanded and so shifts itself).
+</p>
+{% endAside %}
+
+### FID debug information
+
+For [First Input Delay (FID)](/fid/) we show the affected element (which again, can be hovered over to highlight it on the page) and the interaction type, along with the full JSON object as usual:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png", alt="Web Vitals Extension new console logging showing FID target and type", width="800", height="448" %}
+
+### INP debug information
+
+For [Interaction to Next Paint (INP)](/inp/), we have added two new logs:
+
+- INP - the longest interaction
+- Interactions - all interactions
+
+#### INP metric
+
+First up, we highlight the INP metric when it changes:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png", alt="Web Vitals Extension new console logging showing INP target, event type, and breakdown", width="800", height="448" %}
+
+Similar to LCP, the extension breaks down the INP time to show three phases:
+
+1. Input delay
+2. Processing time
+3. Presentation delay
+
+This helps you identify if the event was slow due to being held up by other events (**input delay**), as the event handler itself was slow due to your code (**processing time**), if the post-processing render delay was the reason (**presentation delay**), or a combination of two or more of these.
+
+#### Interactions
+
+INP can be slow due to previous interactions blocking the main thread, and thus causing a high input delay. For this reason, we list all interactions in a similar format to the INP logging:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png", alt="Web Vitals Extension new console logging showing all interactions", width="800", height="448" %}
+
+This allows you to "live trace" a website by interacting with it and seeing in the console which interactions, in which combinations, are likely to cause an INP problem.
+
+This also allows you to identify multiple slow interactions, rather than just the largest INP interaction to help you avoid the feeling of chasing your tail when improving your responsiveness.
+
+## Filtering the console logs
+
+All this extra information, while useful, can be distracting if you are doing other development unrelated to Core Web Vitals, or are only interested in one particular Core Web Vital at that time.
+
+You can use the [Console filtering options in DevTools](https://developer.chrome.com/docs/devtools/console/reference/#filter) to filter out some or all of the messages:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png", alt="Using console filtering options", width="800", height="448" %}
+
+- To remove all the extension messages, you can either turn this off in the options or use the `-Extension` filter.
+- To look at just LCP you can use the `Web Vitals Extension LCP` filter.
+- To look at just INP and interactions you can use the `Web Vitals Extension -LCP -CLS -FID` filter.
+
+We're trying to keep the number of options for this extension down, but do let us know by raising a [GitHub issue](https://github.com/GoogleChrome/web-vitals-extension/issues) if DevTools filtering is not sufficient and you would prefer options here.
+
+## Conclusion
+
+We hope you find the new debug options in the latest version of the extension useful and that they make it easier to identify and resolve Core Web Vitals issues, improving the  user experiences on your website.
+
+Do remember that your experiences, on your developer computer, may not be representative of what your real users are experiencing. Check out our [previous blog post on how you can view the CrUX field data for your site in the extension](/field-data-in-the-web-vitals-extension/) to get a sense of how aligned your experiences are with your users.
+
+We would be grateful to hear any feedback on these improvements, or any other suggestions on our [GitHub issues tracker](https://github.com/GoogleChrome/web-vitals-extension/issues).
+
+## Acknowledgements
+
+_Hero image by [Farzad](https://unsplash.com/@euwars?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/p-xSl33Wxyc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/debug-performance-in-the-field/index.md b/src/site/content/en/blog/debug-performance-in-the-field/index.md
new file mode 100644
index 00000000000..4da868753cb
--- /dev/null
+++ b/src/site/content/en/blog/debug-performance-in-the-field/index.md
@@ -0,0 +1,506 @@
+---
+layout: post
+title: Debug performance in the field
+subhead: |
+  Learn how to attribute your performance data with debug information
+  to help you identify and fix real-user issues with analytics
+description: |
+  Learn how to attribute your performance data with debug information
+  to help you identify and fix real-user issues with analytics
+authors:
+  - philipwalton
+date: 2021-04-01
+updated: 2022-09-13
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/pOHexwZOflz5RGf6FT4P.jpg
+alt: Laptop screen showing an analytics interface
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Google currently provides two categories of tools to measure and debug performance:
+
+- **Lab tools:** Tools such as Lighthouse, where your page is loaded in a
+  simulated environment that can mimic various conditions (for example, a slow
+  network and a low-end mobile device).
+- **Field tools:** Tools such as [Chrome User Experience
+  Report](https://developer.chrome.com/docs/crux/)
+  (CrUX), which is based on aggregate, real-user data from Chrome. (Note that the
+  field data reported by tools such as [PageSpeed
+  Insights](https://pagespeed.web.dev/) and [Search
+  Console](https://support.google.com/webmasters/answer/9205520) is sourced from
+  CrUX data.)
+
+While field tools offer more accurate data—data which actually represents what
+real users experience—lab tools are often better at helping you identify and fix
+issues.
+
+CrUX data is more representative of your page's real performance, but knowing
+your CrUX scores is unlikely to help you figure out _how_ to improve your
+performance.
+
+Lighthouse, on the other hand, will identify issues and make specific
+suggestions for how to improve. However, Lighthouse will only make suggestions
+for performance issues it discovers at page load time. It does not detect issues
+that only manifest as a result of user interaction such as scrolling or clicking
+buttons on the page.
+
+This raises an important question: **how can you capture debug information for
+Core Web Vitals or other performance metrics from real users in the field?**
+
+This post will explain in detail what APIs you can use to collect additional
+debugging information for each of the current Core Web Vitals metrics and give
+you ideas for how to capture this data in your existing analytics tool.
+
+## APIs for attribution and debugging
+
+### CLS
+
+Of all the Core Web Vitals metrics, [CLS](/cls/) is perhaps the one for which
+collecting debug information in the field is the most important. CLS is measured
+throughout the entire lifespan of the page, so the way a user interacts with the
+page—how far they scroll, what they click on, and so on—can have a significant
+impact on whether there are layout shifts and which elements are shifting.
+
+Consider the following report from PageSpeed Insights for the URL:
+[web.dev/measure](/measure/)
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/nZjd6rXrOgW5VUsm5fyx.png",
+   alt="A PageSpeed Insights Report with different CLS values",
+   width="800",
+   height="587" %}
+
+The value reported for CLS from the lab (Lighthouse) compared to the CLS from
+the field (CrUX data) are quite different, and this makes sense if you consider
+that the [web.dev/measure](/measure/) page has a lot of interactive content that
+is not being used when tested in Lighthouse.
+
+But even if you understand that user interaction affects field data, you still
+need to know what elements on the page are shifting to result in a score of 0.45
+at the 75th percentile.
+
+The [LayoutShiftAttribution](/debug-layout-shifts/#layoutshiftattribution)
+interface makes that possible.
+
+#### Get layout shift attribution
+
+The [LayoutShiftAttribution](/debug-layout-shifts/#layoutshiftattribution)
+interface is exposed on each `layout-shift` entry that [Layout Instability
+API](https://wicg.github.io/layout-instability) emits.
+
+For a detailed explanation of both of these interfaces, see [Debug layout
+shifts](/debug-layout-shifts/#layoutshiftattribution). For the purposes of
+this post, the main thing you need to know is that, as a developer, you are able
+to observe every layout shift that happens on the page as well as what elements
+are shifting.
+
+Here's some example code that logs each layout shift as well as the elements
+that shifted:
+
+```js
+new PerformanceObserver((list) => {
+  for (const {value, startTime, sources} of list.getEntries()) {
+    // Log the shift amount and other entry info.
+    console.log('Layout shift:', {value, startTime});
+    if (sources) {
+      for (const {node, curRect, prevRect} of sources) {
+        // Log the elements that shifted.
+        console.log('  Shift source:', node, {curRect, prevRect});
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+It's probably not practical to measure and send data to your analytics tool for
+every single layout shift that occurs; however, by monitoring all shifts, you
+can keep track of the worst shifts and just report information about those.
+
+The goal isn't to identify and fix every single layout shift that occurs for
+every user; the goal is to identify the shifts that affect the largest number of
+users and thus contribute the most to your page's CLS at the 75th percentile.
+
+Also, you don't need to compute the largest source element every time there's a
+shift, you only need to do so when you're ready to send the CLS value to your
+analytics tool.
+
+The following code takes a list of `layout-shift` entries that have contributed
+to CLS and returns the largest source element from the largest shift:
+
+```js
+function getCLSDebugTarget(entries) {
+  const largestEntry = entries.reduce((a, b) => {
+    return a && a.value > b.value ? a : b;
+  });
+  if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
+    const largestSource = largestEntry.sources.reduce((a, b) => {
+      return a.node && a.previousRect.width * a.previousRect.height >
+          b.previousRect.width * b.previousRect.height ? a : b;
+    });
+    if (largestSource) {
+      return largestSource.node;
+    }
+  }
+}
+```
+
+Once you've identified the largest element contributing to the largest shift,
+you can report that to your analytics tool.
+
+The element contributing the most to CLS for a given page will likely vary from
+user to user, but if you aggregate those elements across all users, you'll be
+able to generate a list of shifting elements affecting the most number of users.
+
+After you've identified and fixed the root cause of the shifts for those
+elements, your analytics code will start reporting smaller shifts as the "worst"
+shifts for your pages. Eventually, all reported shifts will be small enough that
+your pages are well within [the "good" threshold of
+0.1](/cls/#what-is-a-good-cls-score)!
+
+Some other metadata that may be useful to capture along with the largest shift
+source element is:
+
+- The time of the largest shift
+- The URL path at the time of the largest shift (for sites that dynamically
+  update the URL, such as Single Page Applications).
+
+### LCP
+
+To debug LCP in the field, the primary information you need is which particular
+element was the largest element (the LCP candidate element) for that particular
+page load.
+
+Note that it's entirely possible—in fact, it's quite common—that the LCP
+candidate element will be different from user to user, even for the exact same
+page.
+
+This can happen for several reasons:
+
+- User devices have different screen resolutions, which results in different
+  page layouts and thus different elements being visible within the viewport.
+- Users don't always load pages scrolled to the very top. Oftentimes links will
+  contain [fragment identifiers](/text-fragments/#fragment-identifiers) or even
+  [text fragments](/text-fragments/#text-fragments), which means it's possible
+  for your pages to be loaded and displayed at any scroll position on the page.
+- Content may be personalized for the current user, so the LCP candidate element
+  could vary wildly from user to user.
+
+This means you cannot make assumptions about which element or set of elements
+will be the most common LCP candidate element for a particular page. You have to
+measure it based on real-user behavior.
+
+{% Aside %}
+For more details on these differences, see: [Why lab and field data can be
+different (and what to do about it)](/lab-and-field-data-differences/)
+{% endAside %}
+
+#### Identify the LCP candidate element
+
+To determine the LCP candidate element in JavaScript you can use the [Largest
+Contentful Paint API](https://wicg.github.io/largest-contentful-paint/), the
+same API you use to determine the LCP time value.
+
+When observing `largest-contentful-paint` entries, you can determine the
+current LCP candidate element by looking at the `element` property of the last entry:
+
+```js
+new PerformanceObserver((list) => {
+  const entries = list.getEntries();
+  const lastEntry = entries[entries.length - 1];
+
+  console.log('LCP element:', lastEntry.element);
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'caution' %}
+  As explained in the [LCP metric documentation](/lcp/), the LCP candidate
+  element can change through the page load, so more work is required to identify
+  the "final" LCP candidate element. The easiest way to identify and measure the
+  "final" LCP candidate element is to use the
+  [web-vitals](https://github.com/GoogleChrome/web-vitals/) JavaScript library,
+  as shown in the [example
+  below](#usage-with-the-web-vitals-javascript-library).
+{% endAside %}
+
+Once you know the LCP candidate element, you can send it to your analytics tool
+along with the metric value. As with CLS, this will help you identify which
+elements are most important to optimize first.
+
+In addition to the LCP candidate element, it may also be useful to measure the
+[LCP sub-part times](/optimize-lcp/#optimal-sub-part-times), which can be useful
+in determining what specific optimization steps are relevant for your site.
+
+### FID
+
+To debug FID in the field, it's important to remember that FID measures [only
+the delay portion](/fid/#fid-in-detail) of the overall first input event
+latency. That means that what the user interacted with is not really as
+important as what else was happening on the main thread at the time they
+interacted.
+
+For example, many JavaScript applications that support server-side rendering
+(SSR) will deliver static HTML that can be rendered to the screen before it's
+interactive to user input—that is, before the JavaScript required to make the
+content interactive has finished loading.
+
+For these types of applications, it can be very important to know whether the
+first input occurred before or after
+[hydration](https://en.wikipedia.org/wiki/Hydration_(web_development)). If it
+turns out that many people are attempting to interact with the page before
+hydration completes, consider rendering your pages in a disabled or loading
+state rather than in a state that looks interactive.
+
+If your application framework exposes the hydration timestamp, you can easily
+compare that with the timestamp of the `first-input` entry to determine whether
+the first input happened before or after hydration. If your framework doesn't
+expose that timestamp, or doesn't use hydration at all, another useful signal
+may be whether input occurred before or after JavaScript finished loading.
+
+The `DOMContentLoaded` event fires after the page's HTML has completely loaded
+and parsed, which includes waiting for any synchronous, deferred, or module
+scripts (including all statically imported modules) to load. So you can use the
+timing of that event and compare it to when FID occurred.
+
+The following code observes `first-input` entries and logs whether or not the
+first input occurred prior to the end of the `DOMContentLoaded` event:
+
+```js
+new PerformanceObserver((list) => {
+  const fidEntry = list.getEntries()[0];
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  const wasFIDBeforeDCL =
+    fidEntry.startTime < navEntry.domContentLoadedEventStart;
+
+  console.log('FID occurred before DOMContentLoaded:', wasFIDBeforeDCL);
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside %}
+  If your page uses `async` scripts or dynamic `import()` to load JavaScript,
+  the `DOMContentLoaded` event may not be a useful signal. Instead, you can
+  consider using the `load` event or—if there's a particular script you know
+  takes a while to execute—you can use the [Resource
+  Timing](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)
+  entry for that script.
+{% endAside %}
+
+#### Identify the FID target element and event type
+
+Additional potentially-useful debug signals are the element that was interacted
+with as well as the type of interaction it was (such as `mousedown`, `keydown`,
+`pointerdown`). While the interaction with the element itself does not
+contribute to FID (remember FID is just the delay portion of the total event
+latency), knowing which elements your users are interacting with may be useful
+in determining how best to improve FID.
+
+For example, if the vast majority of your user's first interactions are with a
+particular element, consider inlining the JavaScript code needed for that
+element in the HTML, and lazy loading the rest.
+
+To get the interaction type and element associated with the first input event,
+you can reference the `first-input` entry's `target` and `name` properties:
+
+```js
+new PerformanceObserver((list) => {
+  const fidEntry = list.getEntries()[0];
+
+  console.log('FID target element:', fidEntry.target);
+  console.log('FID interaction type:', fidEntry.name);
+}).observe({type: 'first-input', buffered: true});
+```
+
+### INP
+
+INP is very similar to FID in that the most useful bits of information to
+capture in the field are:
+
+1. What element was interacted with
+2. Why type of interaction it was
+3. When that interaction took place
+
+Like FID, a major cause of slow interactions is a blocked main thread, which can
+be common while JavaScript is loading. Knowing whether most slow interactions
+occur during page load is helpful in determining what needs to be done to fix
+the problem.
+
+Unlike FID, the INP metric considers the full latency of an
+interaction—including the time it takes to run any registered event listeners as
+well as the time it takes to paint the next frame after all events listeners
+have run. This means that for INP it's even more useful to know which target
+elements tend to result in slow interactions, and what types of interactions
+those are.
+
+Since INP and FID are both based on the Event Timing API, the way you determine
+this information in JavaScript is very similar to the previous example. The
+following code logs the target element and time (relative to `DOMContentLoaded`)
+of the INP entry.
+
+```js
+function logINPDebugInfo(inpEntry) {
+  console.log('INP target element:', inpEntry.target);
+  console.log('INP interaction type:', inpEntry.name);
+
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  const wasINPBeforeDCL =
+    inpEntry.startTime < navEntry.domContentLoadedEventStart;
+
+  console.log('INP occurred before DCL:', wasINPBeforeDCL);
+}
+```
+
+Note that this code doesn't show how to determine which `event` entry is the INP
+entry, as that logic is more involved. However, the following section explains
+how to get this information using the
+[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript library.
+
+## Usage with the web-vitals JavaScript library
+
+The sections above offer some general suggestions and code examples to capture
+debug info to include in the data you send to your analytics tool.
+
+Since version 3, the [web-vitals](https://github.com/GoogleChrome/web-vitals/)
+JavaScript library includes an [attribution
+build](https://github.com/GoogleChrome/web-vitals#attribution-build) that
+surfaces all of this information, and a few [additional
+signals](https://github.com/GoogleChrome/web-vitals#attribution) as well.
+
+The following code example shows how you could set an additional [event
+parameter](https://support.google.com/analytics/answer/11396839) (or [custom
+dimension](https://support.google.com/analytics/answer/2709828)) containing a
+debug string useful for helping to identify the root cause of performance
+issues.
+
+```js
+import {onCLS, onFID, onINP, onLCP} from 'web-vitals/attribution';
+
+function sendToGoogleAnalytics({name, value, id, attribution}) {
+  const eventParams = {
+    metric_value: value,
+    metric_id: id,
+  }
+
+  switch (name) {
+    case 'CLS':
+      eventParams.debug_string = attribution.largestShiftTarget;
+      break;
+    case 'LCP':
+      eventParams.debug_string = attribution.element;
+      break;
+    case 'FID':
+    case 'INP':
+      eventParams.debug_string = attribution.eventTarget;
+      break;
+  }
+
+  // Assumes the global `gtag()` function exists, see:
+  // https://developers.google.com/analytics/devguides/collection/ga4
+  gtag('event', name, eventParams);
+}
+
+onCLS(sendToGoogleAnalytics);
+onLCP(sendToGoogleAnalytics);
+onFID(sendToGoogleAnalytics);
+onINP(sendToGoogleAnalytics);
+```
+
+This code is specific to Google Analytics, but the general idea should easily
+translate to other analytics tools as well.
+
+This code also just shows how to report on a single debug signal, but it may be
+useful to be able to collect and report on multiple different signals per
+metric. For example, to debug INP you might want to collect the interaction
+type, time, and also the element being interacted with. The `web-vitals`
+attribution build exposes all of this information, as show in the following
+example:
+
+```js
+import {onCLS, onFID, onINP, onLCP} from 'web-vitals/attribution';
+
+function sendToGoogleAnalytics({name, value, id, attribution}) {
+  const eventParams = {
+    metric_value: value,
+    metric_id: id,
+  }
+
+  switch (name) {
+    case 'INP':
+      eventParams.inp_target = attribution.eventTarget;
+      eventParams.inp_type = attribution.eventType;
+      eventParams.inp_time = attribution.eventTime;
+      eventParams.inp_load_state = attribution.loadState;
+      break;
+
+    // Additional metric logic...
+  }
+
+  // Assumes the global `gtag()` function exists, see:
+  // https://developers.google.com/analytics/devguides/collection/ga4
+  gtag('event', name, eventParams);
+}
+
+onCLS(sendToGoogleAnalytics);
+onLCP(sendToGoogleAnalytics);
+onFID(sendToGoogleAnalytics);
+onINP(sendToGoogleAnalytics);
+```
+
+Refer to the [web-vitals attribution
+documentation](https://github.com/GoogleChrome/web-vitals#attribution) for the
+complete list of debug signals exposed.
+
+## Report and visualize the data
+
+Once you've started collecting debug information along with the metric values,
+the next step is aggregating the data across all your users to start looking for
+patterns and trends.
+
+As mentioned above, you don't necessarily need to address every single issue
+your users are encountering, you want to address—especially at first—the issues
+that are affecting the largest number of users, which should also be the issues
+that have the largest negative impact on your Core Web Vitals scores.
+
+### The Web Vitals Report tool
+
+If you're using the [Web Vitals
+Report](https://github.com/GoogleChromeLabs/web-vitals-report) tool, it allows
+you to additionally report on [a single debug
+dimension](https://github.com/GoogleChromeLabs/web-vitals-report#debug-dimension)
+for each of the Core Web Vitals metrics.
+
+Here's a screenshot from the Web Vitals Report debug info section, showing data
+for the Web Vitals Report tool website itself:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/Y49u3cmRD6RfAaZGCSmx.png",
+   alt="Web Vitals Report showing debug information",
+   width="800",
+   height="535" %}
+
+Using the data above, you can see that whatever is causing the `section.Intro`
+element to shift is contributing the most to CLS on this page, so identifying
+and fixing the cause of that shift will yield the greatest improvement to the
+score.
+
+## Summary
+
+Hopefully this post has helped outline the specific ways you can use the
+existing performance APIs and the `web-vitals` library to get debug information
+to help diagnose performance based on real users visits in the field. While this
+guide is focused on the Core Web Vitals, the concepts also apply to debugging
+any performance metric that's measurable in JavaScript.
+
+If you're just getting started measuring performance, and you're already a
+Google Analytics user, the Web Vitals Report tool may be a good place to start
+because it already supports reporting debug information for the Core Web
+Vitals metrics.
+
+If you're an analytics vendor and you're looking to improve your products and
+provide more debugging information to your users, consider some of the
+techniques described here but don't limit yourself to _just_ the ideas presented
+here. This post is intended to be generally applicable to all analytics tools;
+however, individual analytics tools likely can (and should) capture and report
+even more debug information.
+
+Lastly, if you feel there are gaps in your ability to debug these metrics due to
+missing features or information in the APIs themselves send your feedback to
+[web-vitals-feedback@googlegroups.com](mailto:web-vitals-feedback@googlegroups.com).
diff --git a/src/site/content/en/blog/decrease-frontend-size/index.md b/src/site/content/en/blog/decrease-frontend-size/index.md
new file mode 100644
index 00000000000..9937a219e75
--- /dev/null
+++ b/src/site/content/en/blog/decrease-frontend-size/index.md
@@ -0,0 +1,763 @@
+---
+title: Decrease front-end size
+subhead: |
+  How to use webpack to make your app as small as possible
+date: 2017-12-18
+updated: 2018-08-17
+authors:
+  - iamakulov
+description: |
+  How to use webpack to make your app as small as possible
+tags:
+  - blog
+---
+
+One of the first things to do when you’re optimizing an application is to make it as small as
+possible. Here’s how to do this with webpack.
+
+## Use the production mode (webpack 4 only)
+
+Webpack 4 introduced [the new `mode` flag](https://webpack.js.org/concepts/mode/). You could set
+this flag to `'development'` or `'production'` to hint webpack that you’re building
+the application for a specific environment:
+
+```js
+// webpack.config.js
+module.exports = {
+  mode: 'production',
+};
+```
+
+Make sure to enable the `production` mode when you’re building your app for production.
+This will make webpack apply optimizations like minification, removal of development-only code
+in libraries, [and more](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a).
+
+### Further reading
+
+* [What specific things the `mode` flag configures](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a)
+
+## Enable minification
+
+{% Aside %}
+Most of this is webpack 3 only. If you use
+[webpack 4 with the production mode](#enable-the-production-mode), the bundle-level minification
+is already enabled – you’ll only need to enable
+[loader-specific options](#loader-specific-options).
+{% endAside %}
+
+Minification is when you compress the code by removing extra spaces, shortening variable names and
+so on. Like this:
+
+
+```js
+// Original code
+function map(array, iteratee) {
+  let index = -1;
+  const length = array == null ? 0 : array.length;
+  const result = new Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+```
+
+↓
+
+```js
+// Minified code
+function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}
+```
+
+
+Webpack supports two ways to minify the code: _the bundle-level minification_ and
+_loader-specific options_. They should be used simultaneously.
+
+### Bundle-level minification 
+
+The bundle-level minification compresses the whole bundle after compilation. Here’s how it works:
+
+
+1. You write code like this:
+
+    ```js
+    // comments.js
+    import './comments.css';
+    export function render(data, target) {
+      console.log('Rendered!');
+    }
+    ```
+
+
+1. Webpack compiles it into approximately the following:
+
+    ```js
+    // bundle.js (part of)
+    "use strict";
+    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+    /* harmony export (immutable) */ __webpack_exports__["render"] = render;
+    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1);
+    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default =
+    __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__);
+
+    function render(data, target) {
+    console.log('Rendered!');
+    }
+    ```
+
+1. A minifier compresses it into approximately the following:
+
+    ```js
+    // minified bundle.js (part of)
+    "use strict";function t(e,n){console.log("Rendered!")}
+    Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)
+    ```
+
+**In webpack 4,** the bundle-level minification is enabled automatically – both in the production
+mode and without one. It uses [the UglifyJS minifier](https://github.com/mishoo/UglifyJS2)
+under the hood. (If you ever need to disable minification, just use the development mode
+or pass `false` to the `optimization.minimize` option.)
+
+**In webpack 3,** you need to use [the UglifyJS plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin)
+directly. The plugin comes bundled with webpack; to enable it, add it to the `plugins`
+section of the config:
+
+```js
+// webpack.config.js
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+  ],
+};
+```
+
+{% Aside %}
+In webpack 3, the UglifyJS plugin can’t compile the ES2015+ (ES6+) code. This means
+that if your code uses classes, arrow functions or other new language features,
+and you don’t compile them into ES5, the plugin will throw an error. <br><br>
+If you need to compile the new syntax, use the
+[uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) package. This
+is the same plugin that’s bundled with webpack, but newer, and it’s able to compile the ES2015+
+code.
+{% endAside %}
+
+### Loader-specific options
+
+The second way to minify the code is loader-specific options ([what a loader
+is](https://webpack.js.org/concepts/loaders/)). With loader options, you can compress things that
+the minifier can’t minify. For example, when you import a CSS file with
+[`css-loader`](https://github.com/webpack-contrib/css-loader), the file is compiled into a string:
+
+
+```css
+/* comments.css */
+.comment {
+  color: black;
+}
+```
+
+```js
+// minified bundle.js (part of)
+exports=module.exports=__webpack_require__(1)(),
+exports.push([module.i,".comment {\r\n  color: black;\r\n}",""]);
+```
+
+The minifier can’t compress this code because it’s a string. To minify the file content, we need to
+configure the loader to do this:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { minimize: true } },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### Further reading
+
+* [The UglifyJsPlugin docs](https://github.com/webpack-contrib/uglifyjs-webpack-plugin)
+* Other popular minifiers: [Babel
+  Minify](https://github.com/webpack-contrib/babel-minify-webpack-plugin), [Google Closure
+  Compiler](https://github.com/roman01la/webpack-closure-compiler)
+
+## Specify `NODE_ENV=production`
+
+{% Aside %}
+This is webpack 3 only. If you use
+[webpack 4 with the production mode](#enable-the-production-mode), the `NODE_ENV=production`
+optimization is already enabled – feel free to skip the section.
+{% endAside %}
+
+Another way to decrease the front-end size is to set the `NODE_ENV`
+[environmental variable](https://superuser.com/questions/284342/what-are-path-and-other-environment-variables-and-how-can-i-set-or-use-them)
+in your code to the value `production`.
+
+Libraries read the `NODE_ENV` variable to detect in which mode they should work – in the
+development or the production one. Some libraries behave differently based on this variable. For
+example, when `NODE_ENV` is not set to `production`, Vue.js does additional checks and prints
+warnings:
+
+```js
+// vue/dist/vue.runtime.esm.js
+// …
+if (process.env.NODE_ENV !== 'production') {
+  warn('props must be strings when using array syntax.');
+}
+// …
+```
+
+React works similarly – it loads a development build that includes the warnings:
+
+```js
+// react/index.js
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.production.min.js');
+} else {
+  module.exports = require('./cjs/react.development.js');
+}
+
+// react/cjs/react.development.js
+// …
+warning$3(
+    componentClass.getDefaultProps.isReactClassApproved,
+    'getDefaultProps is only used on classic React.createClass ' +
+    'definitions. Use a static property named `defaultProps` instead.'
+);
+// …
+```
+
+Such checks and warnings are usually unnecessary in production, but they remain in the code and
+increase the library size. **In webpack 4,** remove them by adding
+the `optimization.nodeEnv: 'production'` option:
+
+```js
+// webpack.config.js (for webpack 4)
+module.exports = {
+  optimization: {
+    nodeEnv: 'production',
+    minimize: true,
+  },
+};
+```
+
+**In webpack 3,** use the [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) instead:
+
+```js
+// webpack.config.js (for webpack 3)
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    }),
+    new webpack.optimize.UglifyJsPlugin()
+  ]
+};
+```
+
+Both the `optimization.nodeEnv` option and the `DefinePlugin` work the same way –
+they replace all occurrences of `process.env.NODE_ENV` with the specified value. With the
+config from above:
+
+1. Webpack will replace all occurrences of `process.env.NODE_ENV` with
+    `"production"`:
+
+    ```js
+    // vue/dist/vue.runtime.esm.js
+    if (typeof val === 'string') {
+      name = camelize(val);
+      res[name] = { type: null };
+    } else if (process.env.NODE_ENV !== 'production') {
+      warn('props must be strings when using array syntax.');
+    }
+    ```
+
+    ↓
+
+    ```js
+    // vue/dist/vue.runtime.esm.js
+    if (typeof val === 'string') {
+      name = camelize(val);
+      res[name] = { type: null };
+    } else if ("production" !== 'production') {
+      warn('props must be strings when using array syntax.');
+    }
+    ```
+
+1. And then [the minifier](#enable-minification) will remove all such
+    `if` branches – because `"production" !== 'production'` is always false,
+    and the plugin understands that the code inside these branches will never execute:
+
+    ```js
+    // vue/dist/vue.runtime.esm.js
+    if (typeof val === 'string') {
+      name = camelize(val);
+      res[name] = { type: null };
+    } else if ("production" !== 'production') {
+      warn('props must be strings when using array syntax.');
+    }
+    ```
+
+    ↓
+
+    ```js
+    // vue/dist/vue.runtime.esm.js (without minification)
+    if (typeof val === 'string') {
+      name = camelize(val);
+      res[name] = { type: null };
+    }
+    ```
+
+### Further reading
+
+* [What “environment variables” are](https://superuser.com/questions/284342/what-are-path-and-other-environment-variables-and-how-can-i-set-or-use-them)
+* Webpack docs about: [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/),
+  [`EnvironmentPlugin`](https://webpack.js.org/plugins/environment-plugin/)
+
+## Use ES modules
+
+The next way to decrease the front-end size is to use [ES
+modules](https://ponyfoo.com/articles/es6-modules-in-depth).
+
+When you use ES modules, webpack becomes able to do tree-shaking. Tree-shaking is when a bundler
+traverses the whole dependency tree, checks what dependencies are used, and removes unused ones. So,
+if you use the ES module syntax, webpack can eliminate the unused code:
+
+1. You write a file with multiple exports, but the app uses only one of them:
+
+    ```js
+    // comments.js
+    export const render = () => { return 'Rendered!'; };
+    export const commentRestEndpoint = '/rest/comments';
+
+    // index.js
+    import { render } from './comments.js';
+    render();
+    ```
+
+1. Webpack understands that `commentRestEndpoint` is not used and doesn’t generate a
+    separate export point in the bundle:
+
+    ```js
+    // bundle.js (part that corresponds to comments.js)
+    (function(module, __webpack_exports__, __webpack_require__) {
+    "use strict";
+    const render = () => { return 'Rendered!'; };
+    /* harmony export (immutable) */ __webpack_exports__["a"] = render;
+
+    const commentRestEndpoint = '/rest/comments';
+    /* unused harmony export commentRestEndpoint */
+    })
+    ```
+
+1. [The minifier](#enable-minification) removes the unused variable:
+
+    ```js
+    // bundle.js (part that corresponds to comments.js)
+    (function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})
+    ```
+
+This works even with libraries if they are written with ES modules.
+
+{% Aside %}
+In webpack, tree-shaking doesn’t work without a minifier. Webpack just removes export
+statements for exports that aren’t used; it’s the minifier that removes unused code.
+Therefore, if you compile the bundle without the minifier, it won’t get smaller.
+{% endAside %}
+
+You aren’t required to use precisely webpack’s built-in minifier (`UglifyJsPlugin`) though.
+Any minifier that supports dead code removal
+(e.g. [Babel Minify plugin](https://github.com/webpack-contrib/babel-minify-webpack-plugin)
+or [Google Closure Compiler plugin](https://github.com/roman01la/webpack-closure-compiler))
+will do the trick.
+
+{% Aside 'warning' %}
+Don’t accidentally compile ES modules into CommonJS ones.
+
+If you use Babel with `babel-preset-env` or `babel-preset-es2015`, check the settings of these
+presets. By default, they transpile ES’ `import` and `export` to CommonJS’ `require` and
+`module.exports`. [Pass the `{ modules: false }`
+option](https://github.com/GoogleChrome/puppeteer/blob/main/packages/babel-preset-env) to disable this.
+
+The same with TypeScript: remember to set `{ "compilerOptions": { "module": "es2015" } }`
+in your `tsconfig.json`.
+{% endAside %}
+
+### Further reading
+
+* [“ES6 Modules in depth”](https://ponyfoo.com/articles/es6-modules-in-depth)
+
+* Webpack docs [about tree shaking](https://webpack.js.org/guides/tree-shaking/)
+
+## Optimize images
+
+Images account for [more than a
+half](http://httparchive.org/interesting.php?a=All&l=Oct%2016%202017) of the page size. While they
+are not as critical as JavaScript (e.g., they don’t block rendering), they still eat a large part of
+the bandwidth. Use `url-loader`, `svg-url-loader` and `image-webpack-loader` to optimize them in
+webpack.
+
+[`url-loader`](https://github.com/webpack-contrib/url-loader) inlines small static files into the
+app. Without configuration, it takes a passed file, puts it next to the compiled bundle and returns
+an url of that file. However, if we specify the `limit` option, it will encode files smaller than
+this limit as [a Base64 data url](https://css-tricks.com/data-uris/) and return this url. This
+inlines the image into the JavaScript code and saves an HTTP request:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif)$/,
+        loader: 'url-loader',
+        options: {
+          // Inline files smaller than 10 kB (10240 bytes)
+          limit: 10 * 1024,
+        },
+      },
+    ],
+  }
+};
+```
+
+```js
+// index.js
+import imageUrl from './image.png';
+// → If image.png is smaller than 10 kB, `imageUrl` will include
+// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
+// → If image.png is larger than 10 kB, the loader will create a new file,
+// and `imageUrl` will include its url: `/2fcd56a1920be.png`
+```
+
+{% Aside %}
+Inlined images reduce the number of separate requests, which is good ([even with
+HTTP/2](https://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/)), but increase the
+download/parse time of your bundle and memory consumption. Make sure to not embed large images or a
+lot of them – or increased bundle time would outweigh the benefit of inlining.
+{% endAside %}
+
+[`svg-url-loader`](https://github.com/bhovhannes/svg-url-loader) works just like `url-loader` –
+except that it encodes files with the [URL
+encoding](https://developer.mozilla.org/docs/Glossary/percent-encoding) instead of the Base64
+one. This is useful for SVG images – because SVG files are just a plain text, this encoding is
+more size-effective.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        loader: "svg-url-loader",
+        options: {
+          limit: 10 * 1024,
+          noquotes: true
+        }
+      }
+    ]
+  }
+};
+```
+
+{% Aside %}
+svg-url-loader has options that improve Internet Explorer support, but worsen inlining for
+other browsers. If you need to support this browser, [apply the `iesafe: true`
+option](https://github.com/bhovhannes/svg-url-loader#iesafe).
+{% endAside %}
+
+[`image-webpack-loader`](https://github.com/tcoopman/image-webpack-loader) compresses images that go
+through it. It supports JPG, PNG, GIF and SVG images, so we’re going to use it for all these types.
+
+This loader doesn’t embed images into the app, so it must work in pair with `url-loader` and
+`svg-url-loader`. To avoid copy-pasting it into both rules (one for JPG/PNG/GIF images, and another
+one for SVG ones), we’ll include this loader as a separate rule with [`enforce: 'pre'`](https://webpack.js.org/configuration/module/#rule-enforce):
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif|svg)$/,
+        loader: 'image-webpack-loader',
+        // This will apply the loader before the other ones
+        enforce: 'pre'
+      }
+    ]
+  }
+};
+```
+
+The default settings of the loader are already good to go – but if you want to configure it
+further, see [the plugin options](https://github.com/tcoopman/image-webpack-loader#options). To
+choose what options to specify, check out Addy Osmani’s excellent [guide on image
+optimization](https://images.guide/).
+
+### Further reading
+
+* ["What is base64 encoding used
+  for?"](https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for)
+* Addy Osmani’s [guide on image optimization](https://images.guide/)
+
+## Optimize dependencies
+
+More than a half of average JavaScript size comes from dependencies, and a part of that size might
+be just unnecessary.
+
+For example, Lodash (as of v4.17.4) adds 72 KB of minified code to the bundle. But if you use only,
+like, 20 of its methods, then approximately 65 KB of minified code does just nothing.
+
+Another example is Moment.js. Its 2.19.1 version takes 223 KB of minified code, which is huge –
+the average size of JavaScript on a page [was 452 KB in October
+2017](http://httparchive.org/interesting.php?a=All&l=Oct%2016%202017). However, 170 KB of that size
+is [localization
+files](https://github.com/moment/moment/tree/4caa268356434f3ae9b5041985d62a0e8c246c78/locale). If
+you don’t use Moment.js with multiple languages, these files will bloat the bundle without a
+purpose.
+
+All these dependencies can be easily optimized. We’ve collected optimization approaches in
+a GitHub repo – [check it out](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)!
+
+## Enable module concatenation for ES modules (aka scope hoisting)
+
+{% Aside %}
+If you’re using [webpack 4 with the production mode](#enable-the-production-mode),
+module concatenation is already enabled. Feel free to skip this section.
+{% endAside %}
+
+When you are building a bundle, webpack is wrapping each module into a function:
+
+```js
+// index.js
+import {render} from './comments.js';
+render();
+
+// comments.js
+export function render(data, target) {
+  console.log('Rendered!');
+}
+```
+↓
+
+```js
+// bundle.js (part  of)
+/* 0 */
+(function(module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+  var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
+  Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
+}),
+/* 1 */
+(function(module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  __webpack_exports__["a"] = render;
+  function render(data, target) {
+    console.log('Rendered!');
+  }
+})
+```
+In the past, this was required to isolate CommonJS/AMD modules from each other. However, this added
+a size and performance overhead for each module.
+
+Webpack 2 introduced support for ES modules which, unlike CommonJS and AMD modules, can be bundled
+without wrapping each with a function. And webpack 3 made such bundling possible – with
+[module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/). Here’s
+what module concatenation does:
+
+```js
+// index.js
+import {render} from './comments.js';
+render();
+
+// comments.js
+export function render(data, target) {
+  console.log('Rendered!');
+}
+```
+
+↓
+
+```js
+// Unlike the previous snippet, this bundle has only one module
+// which includes the code from both files
+
+// bundle.js (part of; compiled with ModuleConcatenationPlugin)
+/* 0 */
+(function(module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+
+  // CONCATENATED MODULE: ./comments.js
+    function render(data, target) {
+    console.log('Rendered!');
+  }
+
+  // CONCATENATED MODULE: ./index.js
+  render();
+})
+```
+
+See the difference? In the plain bundle, module 0 was requiring `render` from module 1. With
+module concatenation, `require` is simply replaced with required function, and module 1 is
+removed. The bundle has fewer modules – and less module overhead!
+
+To turn on this behavior, **in webpack 4**, enable the `optimization.concatenateModules` option:
+
+
+```js
+// webpack.config.js (for webpack 4)
+module.exports = {
+  optimization: {
+    concatenateModules: true
+  }
+};
+```
+
+**In webpack 3,** use the `ModuleConcatenationPlugin`:
+
+```js
+// webpack.config.js (for webpack 3)
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin()
+  ]
+};
+```
+
+{% Aside %}
+Wonder why this behavior is not enabled by default? Concatenating modules is cool, [but it
+comes with increased build time and breaks hot module
+replacement](https://twitter.com/TheLarkInn/status/925800563144454144). That’s why it should only be
+enabled in production.
+{% endAside %}
+
+### Further reading
+
+* Webpack docs [for the
+  ModuleConcatenationPlugin](https://webpack.js.org/plugins/module-concatenation-plugin/)
+* [“Brief introduction to scope
+  hoisting”](https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f)
+* Detailed description of [what this plugin
+  does](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)
+
+## Use `externals` if you have both webpack and non-webpack code
+
+You might have a large project where some code is compiled with webpack, and some code is not. Like
+a video hosting site, where the player widget might be built with webpack, and the surrounding page
+might be not:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/E1OVN1Y29AmpiQ2fq2o7.png", alt="A screenshot of a video hosting site", width="800", height="444" %}
+  <figcaption>(A completely random video hosting site)</figcaption>
+</figure>
+
+If both pieces of code have common dependencies, you can share them to avoid downloading their code
+multiple times. This is done with [the webpack’s `externals`
+option](https://webpack.js.org/configuration/externals/) – it replaces modules with variables or
+other external imports.
+
+### If dependencies are available in `window`
+
+If your non-webpack code relies on dependencies that are available as variables in `window`, alias
+dependency names to variable names:
+
+```js
+// webpack.config.js
+module.exports = {
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM'
+  }
+};
+```
+
+With this config, webpack won’t bundle `react` and `react-dom` packages. Instead, they will be
+replaced with something like this:
+
+```js
+// bundle.js (part of)
+(function(module, exports) {
+  // A module that exports `window.React`. Without `externals`,
+  // this module would include the whole React bundle
+  module.exports = React;
+}),
+(function(module, exports) {
+  // A module that exports `window.ReactDOM`. Without `externals`,
+  // this module would include the whole ReactDOM bundle
+  module.exports = ReactDOM;
+})
+```
+
+### If dependencies are loaded as AMD packages
+
+If your non-webpack code doesn’t expose dependencies into `window`, things are more complicated.
+However, you can still avoid loading the same code twice if the non-webpack code consumes these
+dependencies as [AMD packages](http://requirejs.org/docs/whyamd.html#amd).
+
+To do this, compile the webpack code as an AMD bundle and alias modules to library URLs:
+
+```js
+// webpack.config.js
+module.exports = {
+  output: {
+    libraryTarget: 'amd'
+  },
+  externals: {
+    'react': {
+      amd: '/libraries/react.min.js'
+    },
+    'react-dom': {
+      amd: '/libraries/react-dom.min.js'
+    }
+  }
+};
+```
+
+Webpack will wrap the bundle into `define()` and make it depend on these URLs:
+
+```js
+// bundle.js (beginning)
+define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });
+```
+
+If non-webpack code uses the same URLs to load its dependencies, then these files will be loaded
+only once – additional requests will use the loader cache.
+
+{% Aside %}
+Webpack replaces only those imports that exactly match keys of the `externals` object. This
+means that if you write `import React from 'react/umd/react.production.min.js'`, this library won’t
+be excluded from the bundle. This is reasonable – webpack doesn’t know if `import 'react'` and
+`import 'react/umd/react.production.min.js'` are the same things – so stay careful.
+{% endAside%}
+
+### Further reading
+
+* Webpack docs [on `externals`](https://webpack.js.org/configuration/externals/)
+
+## Summing up
+
+* Enable the production mode if you use webpack 4
+* Minimize your code with the bundle-level minifier and loader options
+* Remove the development-only code by replacing `NODE_ENV` with `production`
+* Use ES modules to enable tree shaking
+* Compress images
+* Apply dependency-specific optimizations
+* Enable module concatenation
+* Use `externals` if this makes sense for you
diff --git a/src/site/content/en/blog/deep-dive-into-developer-pain-points/index.md b/src/site/content/en/blog/deep-dive-into-developer-pain-points/index.md
new file mode 100644
index 00000000000..f1660ff7c90
--- /dev/null
+++ b/src/site/content/en/blog/deep-dive-into-developer-pain-points/index.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: Deep dive into top web developer pain points
+subhead: A collection of insights on the top developer pain points, collected from a number of one to one conversations.
+authors:
+  - andreban
+date: 2022-04-25
+hero: image/Vww75TFpThOgTNuASFM6UYfBAp53/PUmvOTjDHLGbbZAds3pZ.jpg
+alt: under the ocean, with a sandy ocean floor illuminated by sun rays from the surface.
+description: |
+  A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.
+tags:
+  - blog
+feedback:
+---
+
+A few months ago, [Paul Kinlan][2] posted about the [top developer pain points in 2021][1], so it feels appropriate to start this article with an update on the last 2 quarters. The numbers have moved around a bit, but the ranking hasn't changed. 
+
+|Challenge|Q1 2021|Q2 2021|Q3 2021|Q4 2021|
+|:-------:|:-----:|:-----:|:-----:|:-----:|
+Keeping up with changes to the web platform or web standards.|27%|26%|27%|22%|
+Keeping up with a large number of new and existing tools or frameworks.|26%|26%|25%|21%|
+Making a design or experience work the same across browsers.|26%|28%|24%|21%|
+Testing across browsers.|23%|24%|20%|20%|
+Understanding and implementing security measures.|23%|25%|20%|19%|
+
+As mentioned in Paul's blog post we need to address these pain points. As part of a larger effort to do so, my colleague [Kadir Topal][3] and I have interviewed over 18 developers. Our aim is to investigate and start making sense of the path to fixing top developer pain points.
+
+## Developer Discussions
+
+**Disclaimer:** *those insights are based on a small number of conversations with developers. When using "all" or "some", this refers to the developers interviewed, not the entire community. More research is needed to extrapolate those insights more widely.*
+
+These conversations were a great reminder of how amazing and diverse the web developer community is, and I'd like to thank all the developers who talked to us. Some developers had over 25 years of experience, while others started as recently as 2020. Some developers started their careers via a formal computer science degree, while others started their careers independently. Some developers actively seek what is new and keep up by reading browser release notes, while others learn about new things via colleagues and friends. Some think complexity is part of the job and enjoy being challenged, while others just want to get their job done. When thinking about solving those pain points, it's important to keep this diversity in our minds!
+
+One of the common things amongst all developers is that all of them are using a CMS or a framework to do their work. Wordpress, React, Bootstrap, Angular, and Tailwind were all mentioned, none of the developers were using the vanilla web platform in production. Choosing a framework when starting a project is a challenge, and developers frequently take into account non-technical requirements. For example, whether it will be easy to hire a developer to work with that framework. We cannot improve developer pain points if frameworks and CMSs are not included in the solution.  
+
+Speaking of the web platform, most developers understand the platform as the thing they are developing on top of. This includes not only the [classical definition][4] of the web platform, but also the CMSs, framework, tools, and polyfills. In many cases, keeping up to date with those is where the biggest difficulties are. This changed our interpretation of that question, and we now know we need to update our survey to break it down into different parts that are less ambiguous. 
+
+Another area of ambiguity is the definition of [web standards][5]. When asked about examples around keeping up with standards, many developers pointed out difficulties with keeping up with best practices instead. This is another area we need to clarify on the survey. 
+
+Developers look for best practices when implementing specific use-cases and patterns. Blog posts and StackOverflow are mentioned as sources for best practices, but developers often wonder if the information they are reading is indeed the best practice and if it is up to date with the latest features and APIs. They would like a more official source to read those. 
+
+Keeping up with features and APIs that enable new use-cases is a smaller problem. Developers struggle more with features, APIs, and changes to the platform that result in a change in best practices.
+
+Most developers agree that compatibility is one of the biggest challenges. Things are improving via efforts like [Compat 2021][7] and [Interop 2022][6], but it's clear that developers don't see it as a solved problem yet.
+
+Most developers use polyfills in one way or another. In many cases, however, usage is transparent to developers, since the polyfill can be automatically added by a tool like Babel or a framework. For those who are managing their polyfills themselves, figuring out if a polyfill is "good" can be a problem. Developers mentioned using the number of installs on NPM and the creator of the polyfill as signals. A couple of developers mentioned doing work to remove polyfills that became unnecessary due to dropping support for IE 11.
+
+Frameworks introduce fragmentation issues. We heard reports where developers were "stuck" into an older version of a framework, and limited on the features they could use because of that, but that migrating to a newer version of the same framework could be costly and hard to justify.
+
+## Conclusion
+
+Modern web development has many moving pieces including, standards, browsers, libraries, polyfills, CMSs, frameworks, best practices, and tooling. This diversity is one of the great things about the web but, right now, it's up to each developer individually to make sense of each piece and how they are compatible with each other.
+
+I wonder if there's a way to bring more clarity to developers on how everything ties together and more alignment between all the pieces, without compromising on the diversity. It's a large, complex problem, and hard to do all at once. But where to even start?
+
+If you have views and opinions you'd like to share. I'd love to talk to you too. I'll set up a way for booking conversations directly but, in the meantime, my DMs are open [on Twitter][8]. Reach out and we can grab the time to chat!
+
+[1]: https://paul.kinlan.me/top-web-developer-pain-points-in-2021/
+[2]: https://twitter.com/Paul_Kinlan
+[3]: https://twitter.com/atopal
+[4]: https://en.wikipedia.org/wiki/Web_platform
+[5]: https://www.w3.org/standards/
+[6]: https://web.dev/interop-2022/
+[7]: https://web.dev/compat2021/
+[8]: https://twitter.com/andreban
diff --git a/src/site/content/en/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/en/blog/defining-core-web-vitals-thresholds/index.md
index 20c588197c8..f9c519de5fe 100644
--- a/src/site/content/en/blog/defining-core-web-vitals-thresholds/index.md
+++ b/src/site/content/en/blog/defining-core-web-vitals-thresholds/index.md
@@ -1,12 +1,13 @@
 ---
+layout: post
 title: Defining the Core Web Vitals metrics thresholds
 subhead: The research and methodology behind Core Web Vitals thresholds
 authors:
   - bmcquade
 description: The research and methodology behind Core Web Vitals thresholds
 date: 2020-05-21
-updated: 2020-05-27
-hero: /vitals/web-vitals-hero.png
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
 alt: The research and methodology behind Core Web Vitals thresholds
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -36,16 +37,18 @@ content.
 Each Core Web Vitals metric has associated thresholds, which categorize
 performance as either "good", "needs improvement", or "poor":
 
-<div class="w-stack w-stack--center w-stack--md">
-  <img src="/vitals/lcp_ux.svg" width="400px" height="350px"
-       alt="Largest Contentful Paint threshold recommendations">
-  <img src="/vitals/fid_ux.svg" width="400px" height="350px"
-       alt="First Input Delay threshold recommendations">
-  <img src="/vitals/cls_ux.svg" width="400px" height="350px"
-       alt="Cumulative Layout Shift threshold recommendations">
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Largest Contentful Paint threshold recommendations", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="First Input Delay threshold recommendations", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Cumulative Layout Shift threshold recommendations", width="400", height="350" %}
 </div>
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>&nbsp;</th>
@@ -71,7 +74,8 @@ performance as either "good", "needs improvement", or "poor":
       <td>>0.25</td>
       <td>75</td>
     </tr>
-</table>
+  </table>
+</div>
 
 Additionally, to classify the overall performance of a page or site, we use the
 75th percentile value of all page views to that page or site. In other words, if
@@ -133,7 +137,7 @@ reasonable LCP "good" threshold for Core Web Vitals.
 
 When evaluating candidate Core Web Vitals "good" thresholds, we verify that
 those thresholds are achievable, based on data from the [Chrome User Experience
-Report](https://developers.google.com/web/tools/chrome-user-experience-report)
+Report](https://developer.chrome.com/docs/crux/)
 (CrUX). To confirm that a threshold is achievable, we require that at least 10%
 of [origins](/same-site-same-origin/#origin) currently meet the "good"
 threshold. Additionally, to ensure that well-optimized sites are not
@@ -229,7 +233,7 @@ meet our candidate LCP "good" thresholds.
 
 **% of CrUX origins classified as "good" (for candidate LCP thresholds)**
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>&nbsp;</th>
@@ -275,7 +279,7 @@ met by most origins:
 
 **% of CrUX origins classified as "poor" (for candidate LCP thresholds)**
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>&nbsp;</th>
@@ -368,7 +372,7 @@ the 100ms FID "good" threshold at the 75th percentile:
 
 **% of CrUX origins classified as "good" for FID 100ms threshold**
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th></th>
@@ -415,7 +419,7 @@ below.
 
 **% of CrUX origins classified as "good" (for candidate CLS thresholds)**
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>&nbsp;</th>
@@ -456,7 +460,7 @@ identify a threshold met by most origins:
 
 **% of CrUX origins classified as "poor" (for candidate CLS thresholds)**
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>&nbsp;</th>
diff --git a/src/site/content/en/blog/deprecating-excalidraw-electron/index.md b/src/site/content/en/blog/deprecating-excalidraw-electron/index.md
new file mode 100644
index 00000000000..18633ac7161
--- /dev/null
+++ b/src/site/content/en/blog/deprecating-excalidraw-electron/index.md
@@ -0,0 +1,273 @@
+---
+title: Deprecating Excalidraw Electron in favor of the web version
+subhead: |
+  Learn why the Excalidraw project decided to deprecate their Electron wrapper in favor of the web
+  version.
+description: |
+  Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that
+  feel hand-drawn. On the Excalidraw project, we decided to deprecate Excalidraw
+  Desktop, an Electron wrapper for Excalidraw, in favor of the web version that you can—and always
+  could—find at excalidraw.com. After a careful analysis, we decided that Progressive Web App
+  (PWA) is the future we want to build upon.
+authors:
+  - thomassteiner
+date: 2021-01-07
+updated: 2021-11-30
+canonical: https://blog.excalidraw.com/deprecating-excalidraw-electron/
+hero: image/admin/qfK9zbKBQalqq5zdr1P1.jpg
+alt: |
+  Excalidraw drawing with a stylized Electron logo.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - case-study
+---
+
+{% Aside %}
+  [Excalidraw](https://excalidraw.com/) is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn.
+  This article was cross-posted to and first appeared on the [Excalidraw blog](https://blog.excalidraw.com/deprecating-excalidraw-electron/).
+{% endAside %}
+
+On the [Excalidraw project](https://github.com/excalidraw), we have decided to
+deprecate [Excalidraw Desktop](https://github.com/excalidraw/excalidraw-desktop), an
+[Electron](https://www.electronjs.org/) wrapper for Excalidraw, in favor of the web version that you
+can—and always could—find at [excalidraw.com](https://excalidraw.com/). After a careful analysis, we
+have decided that [Progressive Web App](/pwa/) (PWA) is the future we want to build
+upon. Read on to learn why.
+
+## How Excalidraw Desktop came into being
+
+Soon after [@vjeux](https://twitter.com/vjeux) created the initial version of Excalidraw in
+January 2020 and [blogged about it](https://blog.excalidraw.com/reflections-on-excalidraw/), he proposed the following in
+[Issue #561](https://github.com/excalidraw/excalidraw/issues/561#issue-555138343):
+
+> Would be great to wrap Excalidraw within Electron (or equivalent) and publish it as a [platform-specific]
+> application to the various app stores.
+
+The immediate reaction by [@voluntadpear](https://github.com/voluntadpear) was to suggest:
+
+> What about making it a PWA instead? Android currently supports adding them to the Play Store as
+> Trusted Web Activities and hopefully iOS will do the same soon. On Desktop, Chrome lets you
+> download a desktop shortcut to a PWA.
+
+The decision that [@vjeux](https://github.com/vjeux) took in the end was simple:
+
+> We should do both :)
+
+While work on converting the version of Excalidraw into a PWA was started by
+[@voluntadpear](https://github.com/voluntadpear) and later others,
+[@lipis](https://github.com/lipis) independently
+[went ahead](https://github.com/excalidraw/excalidraw/issues/561#issuecomment-579573783) and created
+a [separate repo](https://github.com/excalidraw/excalidraw-desktop) for Excalidraw Desktop.
+
+To this day, the initial goal set by [@vjeux](https://github.com/vjeux), that is, to submit
+Excalidraw to the various app stores, has not been reached yet. Honestly, no one has even started
+the submission process to any of the stores. But why is that? Before I answer, let's
+look at Electron, the platform.
+
+## What is Electron?
+
+The unique selling point of [Electron](https://www.electronjs.org/) is that it allows you to _"build
+cross-platform desktop apps with JavaScript, HTML, and CSS"_. Apps built with Electron are
+_"compatible with Mac, Windows, and Linux"_, that is, _"Electron apps build and run on three
+platforms"_. According to the homepage, the hard parts that Electron makes easy are
+[automatic updates](https://www.electronjs.org/docs/api/auto-updater),
+[system-level menus and notifications](https://www.electronjs.org/docs/api/menu),
+[crash reporting](https://www.electronjs.org/docs/api/crash-reporter),
+[debugging and profiling](https://www.electronjs.org/docs/api/content-tracing), and
+[Windows installers](https://www.electronjs.org/docs/api/auto-updater#windows). Turns out, some of
+the promised features need a detailed look at the small print.
+
+- For example, automatic updates _"are [currently] only [supported] on macOS and Windows. There is
+  no built-in support for auto-updater on Linux, so it is recommended to use the distribution's
+  package manager to update your app"_.
+
+- Developers can create system-level menus by calling `Menu.setApplicationMenu(menu)`. On Windows and
+  Linux, the menu will be set as each window's top menu, while on macOS there are many
+  system-defined standard menus, like the
+  [Services](https://developer.apple.com/documentation/appkit/nsapplication/1428608-servicesmenu?language=objc)
+  menu. To make one's menus a standard menu, developers should set their menu's `role` accordingly,
+  and Electron will recognize them and make them become standard menus. This means that a lot of
+  menu-related code will use the following platform check:
+  `const isMac = process.platform === 'darwin'`.
+
+- Windows installers can be made with
+  [windows-installer](https://github.com/electron/windows-installer). The README of the project
+  highlights that _"for a production app you need to sign your application. Internet Explorer's
+  SmartScreen filter will block your app from being downloaded, and many anti-virus vendors will
+  consider your app as malware unless you obtain a valid cert"_ [sic].
+
+Looking at just these three examples, it is clear that Electron is far from "write once, run
+everywhere". Distributing an app on app stores requires
+[code signing](https://www.electronjs.org/docs/tutorial/code-signing), a security technology for
+certifying app ownership. Packaging an app requires using tools like
+[electron-forge](https://github.com/electron-userland/electron-forge) and thinking about where to
+host packages for app updates. It gets complex relatively quickly, especially when the objective
+truly is cross platform support. I want to note that it is _absolutely_ possible to create stunning
+Electron apps with enough effort and dedication. For Excalidraw Desktop, we were not there.
+
+## Where Excalidraw Desktop left off
+
+Excalidraw Desktop so far is basically the Excalidraw web app bundled as an
+[`.asar`](https://github.com/electron/asar) file with an added **About Excalidraw** window. The look
+and feel of the application is almost identical to the web version.
+
+<figure>
+  {% Img src="image/admin/oR9usELiRYTSu8V7i7vj.png", alt="The Excalidraw Desktop application running in an Electron wrapper.", width="800", height="601" %}
+  <figcaption>Excalidraw Desktop is almost indistinguishable from the web version</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/admin/y9d4nWR3p0VjvHcnP0iq.png", alt="The Excalidraw Desktop 'About' window displaying the version of the Electron wrapper and the web app.", width="400", height="330" %}
+  <figcaption>The <strong>About Excalibur</strong> menu providing insights into the versions</figcaption>
+</figure>
+
+On macOS, there is now a system-level menu at the top of the application, but since none of the menu
+actions—apart from **Close Window** and **About Excalidraw**—are hooked up to anything, the menu
+is, in its current state, pretty useless. Meanwhile, all actions can of course be performed via the
+regular Excalidraw toolbars and the context menu.
+
+<figure>
+  {% Img src="image/admin/akQQgmMKo66quqeVDdAH.png", alt="The Excalidraw Desktop menu bar on macOS with the 'File', 'Close Window' menu item selected.", width="736", height="138" %}
+  <figcaption>The menu bar of Excalidraw Desktop on macOS</figcaption>
+</figure>
+
+We use [electron-builder](https://github.com/electron-userland/electron-builder), which supports
+[file type associations](https://www.electron.build/configuration/configuration#PlatformSpecificBuildOptions-fileAssociations).
+By double-clicking an `.excalidraw` file, ideally the Excalidraw Desktop app should open. The
+relevant excerpt of our `electron-builder.json` file looks like this:
+
+```json
+{
+  "fileAssociations": [
+    {
+      "ext": "excalidraw",
+      "name": "Excalidraw",
+      "description": "Excalidraw file",
+      "role": "Editor",
+      "mimeType": "application/json"
+    }
+  ]
+}
+```
+
+Unfortunately, in practice, this does not always work as intended, since, depending on the
+installation type (for the current user, for all users), apps on Windows&nbsp;10 do not have the
+rights to associate a file type to themselves.
+
+These shortcomings and the pending work to make the experience truly app-like on _all_ platforms
+(which, again, with enough effort _is_ possible) were a strong argument for us to reconsider our
+investment in Excalidraw Desktop. The way bigger argument for us, though, was that we foresee that
+for _our_ use case, we do not need all the features Electron offers. The grown and still growing set
+of capabilities of the web serves us equally well, if not better.
+
+## How the web serves us today and in the future
+
+Even in 2020, [jQuery](https://jquery.com/) is still
+[incredibly popular](https://almanac.httparchive.org/en/2020/javascript#libraries). For many
+developers it has become a habit to use it, despite the fact that today they
+[might not need jQuery](http://youmightnotneedjquery.com/). There is a similar resource for
+Electron, aptly called [You Might Not Need Electron](https://youmightnotneedelectron.com/). Let me
+outline why we think we do not need Electron.
+
+### Installable Progressive Web App
+
+Excalidraw today is an [installable](/installable/) Progressive Web App with a
+[service worker](https://excalidraw.com/service-worker.js) and a
+[web app manifest](https://excalidraw.com/manifest.json). It caches all its resources in two caches,
+one for fonts and font-related CSS, and one for everything else.
+
+<figure>
+  {% Img src="image/admin/tTo7miHIREZRySv8aoBd.png", alt="Chrome DevTools Application tab showing the two Excalidraw caches.", width="800", height="569" %}
+  <figcaption>Excalidraw's cache contents</figcaption>
+</figure>
+
+This means the application is fully offline-capable and can run without a network connection.
+Chromium-based browsers on both desktop and mobile prompt the user to install the app.
+You can see the installation prompt in the screenshot below.
+
+<figure>
+  {% Img src="image/admin/be3EQLezj3776w6SHLPi.png", alt="Excalidraw prompting the user to install the app in Chrome on macOS.", width="400", height="258" %}
+  <figcaption>The Excalidraw install dialog in Chrome</figcaption>
+</figure>
+
+Excalidraw is configured to run as a standalone application, so when you install it, you get an app
+that runs in its own window. It is fully integrated in the operating system's multitasking UI and
+gets its own app icon on the home screen, Dock, or task bar; depending on the platform where you install
+it.
+
+<figure>
+  {% Img src="image/admin/MbMgQlGSBeNcX7Y362jV.png", alt="Excalidraw running in its own window.", width="800", height="584" %}
+  <figcaption>The Excalidraw PWA in a standalone window</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/admin/7ncf98ZQZcg4g3UP2s7F.png", alt="Excalidraw icon on the macOS Dock.", width="400", height="167" %}
+  <figcaption>The Excalidraw icon on the macOS Dock</figcaption>
+</figure>
+
+### File system access
+
+Excalidraw uses [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) for
+accessing the file system of the operating system. On supporting browsers, this allows for a true
+open→edit→save workflow and actual over-saving and "save as", with a transparent fallback for
+other browsers. You can learn more about this feature in my blog post
+[Reading and writing files and directories with the browser-fs-access library](/browser-fs-access/).
+
+### Drag and drop support
+
+Files can be dragged and dropped onto the Excalidraw window just as in platform-specific applications. On a
+browser that supports the [File System Access API](/file-system-access/), a dropped
+file can be immediately edited and the modifications be saved to the original file. This is so
+intuitive that you sometimes forget that you are dealing with a web app.
+
+### Clipboard access
+
+Excalidraw works well with the operating system's clipboard. Entire Excalidraw drawings or also just
+individual objects can be copied and pasted in `image/png` and `image/svg+xml` formats, allowing for
+an easy integration with other platform-specific tools like [Inkscape](https://inkscape.org/) or web-based
+tools like [SVGOMG](https://jakearchibald.github.io/svgomg/).
+
+<figure>
+  {% Img src="image/admin/90gLbYTtkKtDfun4fiRM.png", alt="Excalidraw context menu showing the 'copy to clipboard as SVG' and 'copy to clipboard as PNG' menu items.", width="800", height="746" %}
+  <figcaption>The Excalidraw context menu offering clipboard actions</figcaption>
+</figure>
+
+### File handling
+
+Excalidraw already supports the experimental [File Handling API](/file-handling/),
+which means `.excalidraw` files can be double-clicked in the operating system's file manager and
+open directly in the Excalidraw app, since Excalidraw registers as a file handler for `.excalidraw`
+files in the operating system.
+
+### Declarative link capturing
+
+Excalidraw drawings can be shared by link. Here is an
+[example](https://excalidraw.com/#json=4646308765761536,jwZJW8JsOM75vdhqG2nBgA). In the future, if
+people have Excalidraw installed as a PWA, such links will not open in a browser tab, but launch a
+new standalone window. Pending implementation, this will work thanks to
+[declarative link capturing](https://github.com/WICG/sw-launch/blob/master/declarative_link_capturing.md),
+an, at the time of writing, bleeding-edge proposal for a new web platform feature.
+
+## Conclusion
+
+The web has come a long way, with more and more features landing in browsers that only a couple of
+years or even months ago were unthinkable on the web and exclusive to platform-specific applications.
+Excalidraw is at the forefront of what is possible in the browser, all while acknowledging that not
+all browsers on all platforms support each feature we use. By betting on a progressive
+enhancement strategy, we enjoy the latest and greatest wherever possible, but without leaving anyone
+behind. Best viewed in _any_ browser.
+
+Electron has served us well, but in 2020 and beyond, we can live without it. Oh, and for that
+objective of [@vjeux](https://github.com/vjeux): since the Android Play Store now accepts PWAs in a
+container format called [Trusted Web Activity](/using-a-pwa-in-your-android-app/) and
+since the
+[Microsoft Store supports PWAs](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-edgehtml/microsoft-store),
+too, you can expect Excalidraw in these stores in the not too distant future. Meanwhile, you can
+always use and install [Excalidraw in and from the browser](https://excalidraw.com/).
+
+## Acknowledgements
+
+This article was reviewed by [@lipis](https://github.com/lipis),
+[@dwelle](https://github.com/dwelle), and
+[Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/designcember-calculator/index.md b/src/site/content/en/blog/designcember-calculator/index.md
new file mode 100644
index 00000000000..99051176cca
--- /dev/null
+++ b/src/site/content/en/blog/designcember-calculator/index.md
@@ -0,0 +1,300 @@
+---
+layout: post
+title: 'Designcember Calculator'
+authors:
+  - thomassteiner
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  A skeuomorphic attempt at recreating a solar calculator on the web with the Window Controls
+  Overlay API and the Ambient Light Sensor API.
+description: >
+  A skeuomorphic attempt at recreating a solar calculator on the web that makes use of the ambient
+  light sensor and the window controls overlay feature.
+date: 2021-12-26
+tags:
+  - blog
+  - capabilities
+  - css
+---
+
+## The challenge
+
+I'm a kid of the 1980s. A thing that was all the rage back when I was in high school were solar
+calculators. We were all given a
+[TI-30X SOLAR](https://en.wikipedia.org/wiki/TI-30#/media/File:TI-30X_SOLAR,_2.jpg) by the school,
+and I have fond memories of us benchmarking our calculators against each other by calculating the
+factorial of 69, the highest number the TI-30X could handle. (The speed variance was very
+measurable, I have still no idea why.)
+
+Now, almost 28 years later, I thought it would be a fun Designcember challenge to recreate the
+calculator in HTML, CSS, and JavaScript. Being not much of a designer, I did not start from scratch,
+but with a [CodePen](https://codepen.io/sassjajc/pen/zNJgKg) by
+[Sassja Ceballos](https://codepen.io/sassjajc).
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/DvhjfNHAYtSgJ6jK8uoI.png", alt="CodePen view with stacked HTML, CSS, and JS panels on the left and the calculator preview on the right.", width="800", height="470" %}
+
+## Make it installable
+
+While not a bad start, I decided to pump it up for full skeuomorphic awesomeness. The first step was
+to make it a PWA so it could be installed. I maintain a
+[baseline PWA template on Glitch](https://glitch.com/edit/#!/baseline-pwa) that I remix whenever I
+need a quick demo. Its service worker will not win you any coding award and it is definitely _not_
+production-ready, but it is sufficient to trigger Chromium's mini infobar so the app can be
+installed.
+
+```js
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
+```
+
+## Blending with mobile
+
+Now that the app is installable, the next step is to make it blend in with the operating system apps as much as possible. On
+mobile, I can do this by setting the display mode to `fullscreen` in the Web App Manifest.
+
+```json
+{
+  "display": "fullscreen"
+}
+```
+
+On devices with a camera hole or notch,
+[tweaking the viewport](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) so that the
+content covers the whole screen makes the app look gorgeous.
+
+```html
+<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/kEOrYPiDbg6DSTGHeB0C.jpg", alt="Designcember Calculator running fullscreen on a Pixel 6 Pro phone.", width="800", height="773" %}
+
+## Blending with desktop
+
+On desktop, there is a cool feature I can use:
+[Window Controls Overlay](/window-controls-overlay/), which allows me to put content in the title
+bar of the app window. The first step is to override the display mode fallback sequence so it tries
+to use `window-controls-overlay` first when it is available.
+
+```json
+{
+  "display_override": ["window-controls-overlay"]
+}
+```
+
+This makes the title bar effectively go away and the content moves up into the title bar area as if
+the title bar were not there. My idea is to move the skeuomorphic solar cell up into the title bar
+and the rest of the calculator UI down accordingly, which I can do with some CSS that uses
+the `titlebar-area-*` environment variables. You will notice that all the selectors carry a `wco`
+class, which will be relevant a couple of paragraphs down.
+
+```css
+#calc_solar_cell.wco {
+  position: fixed;
+  left: calc(0.25rem + env(titlebar-area-x, 0));
+  top: calc(0.75rem + env(titlebar-area-y, 0));
+  width: calc(env(titlebar-area-width, 100%) - 0.5rem);
+  height: calc(env(titlebar-area-height, 33px) - 0.5rem);
+}
+
+#calc_display_surface.wco {
+  margin-top: calc(env(titlebar-area-height, 33px) - 0.5rem);
+}
+```
+
+Next, I need to decide which elements to make draggable, since the title bar that I would usually
+use for dragging is not available. In the style of a classic widget, I can even make the
+entire calculator draggable by applying `(-webkit-)app-region: drag`, apart from the buttons, which
+get `(-webkit-)app-region: no-drag` so they cannot be used to drag.
+
+```css
+#calc_inside.wco,
+#calc_solar_cell.wco {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+button {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+```
+
+The final step is to make the app reactive to window controls overlay changes. In a true progressive
+enhancement approach, I only load the code for this feature when the browser supports it.
+
+```js
+if ('windowControlsOverlay' in navigator) {
+  import('/wco.js');
+}
+```
+
+Whenever the window controls overlay geometry changes, I modify the app to make
+it look as natural as possible. It is a good idea to debounce this event, since it can be triggered
+frequently when the user resizes the window. Namely, I apply the `wco` class to some elements, so my
+CSS from above kicks in, and I also change the theme color. I can detect if the window controls
+overlay is visible by checking the `navigator.windowControlsOverlay.visible` property.
+
+```js
+const meta = document.querySelector('meta[name="theme-color"]');
+const nodes = document.querySelectorAll(
+  '#calc_display_surface, #calc_solar_cell, #calc_outside, #calc_inside',
+);
+
+const toggleWCO = () => {
+  if (!navigator.windowControlsOverlay.visible) {
+    meta.content = '';
+  } else {
+    meta.content = '#385975';
+  }
+  nodes.forEach((node) => {
+    node.classList.toggle('wco', navigator.windowControlsOverlay.visible);
+  });
+};
+
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
+  toggleWCO();
+}, 250);
+
+toggleWCO();
+```
+
+Now with all this in place, I get a calculator widget that feels almost like the classic
+[Winamp](https://en.wikipedia.org/wiki/Winamp) with one of the oldschool
+[Winamp&nbsp; themes](https://en.wikipedia.org/wiki/Winamp#/media/File:Winamp5.png). I can now
+freely place the calculator on my desktop and activate the window controls feature by clicking the
+chevron in the upper right corner.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/9iqLIfTrHYv0O8J1tBrr.png", alt="Designcember Calculator running in standalone mode with the Window Controls Overlay feature active. The display spells 'Google' in the calculator alphabet.", width="267", height="430" %}
+
+## An actually working solar cell
+
+For the ultimate geekery, I of course needed to make the solar cell actually work. The calculator
+should only be functioning if there is enough light. The way I modeled this is through setting the
+CSS `opacity` of the digits on the display via a CSS variable `--opacity` that I control via
+JavaScript.
+
+```css
+:root {
+  --opacity: 0.75;
+}
+
+#calc_expression,
+#calc_result {
+  opacity: var(--opacity);
+}
+```
+
+To detect if enough light is available for the calculator to work, I use the
+[`AmbientLightSensor`](https://developer.mozilla.org/docs/Web/API/AmbientLightSensor) API. For
+this API to be available, I needed to set the `#enable-generic-sensor-extra-classes` flag in
+`about:flags` and request the `'ambient-light-sensor'` permission. As before, I use progressive
+enhancement to only load the relevant code when the API is supported.
+
+```js
+if ('AmbientLightSensor' in window) {
+  import('/als.js');
+}
+```
+
+The sensor returns the ambient light in [lux](https://en.wikipedia.org/wiki/Lux) units whenever a
+new reading is available. Based on a
+[table of values](https://en.wikipedia.org/wiki/Lux#Illuminance) of typical light situations, I came
+up with a very simple formula to convert the lux value to a value between 0 and 1 that I
+programmatically assign to the `--opacity` variable.
+
+```js
+const luxToOpacity = (lux) => {
+  if (lux > 250) {
+    return 1;
+  }
+  return lux / 250;
+};
+
+const sensor = new window.AmbientLightSensor();
+sensor.onreading = () => {
+  console.log('Current light level:', sensor.illuminance);
+  document.documentElement.style.setProperty(
+    '--opacity',
+    luxToOpacity(sensor.illuminance),
+  );
+};
+sensor.onerror = (event) => {
+  console.log(event.error.name, event.error.message);
+};
+
+(async () => {
+  const {state} = await navigator.permissions.query({
+    name: 'ambient-light-sensor',
+  });
+  if (state === 'granted') {
+    sensor.start();
+  }
+})();
+```
+
+In the video below you can see how the calculator starts working once I turn the room light up
+enough. And there you have it: a skeuomorphic solar calculator that actually works. My good old
+time-tested TI-30X SOLAR has come a long way indeed.
+
+{% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/lXUTb872NtCdw7fqrQY3.mp4" %}
+
+## Demo
+
+Be sure to play with the [Designcember Calculator demo](https://designcember-calculator.glitch.me/)
+and check out the [source code on Glitch](https://glitch.com/edit/#!/designcember-calculator). (To
+install the app, you need to open it in its own window. The embedded version below will not trigger
+the mini infobar.)
+
+<!-- Copy and Paste Me -->
+<div class="glitch-embed-wrap" style="height: 750px; width: 400px;">
+  <iframe
+    src="https://designcember-calculator.glitch.me/"
+    title="designcember-calculator on Glitch"
+    allow="geolocation; microphone; camera; midi; vr; encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+Happy [Designcember](https://designcember.com)!
diff --git a/src/site/content/en/blog/detached-window-memory-leaks/index.md b/src/site/content/en/blog/detached-window-memory-leaks/index.md
new file mode 100644
index 00000000000..93c8cb6ba9f
--- /dev/null
+++ b/src/site/content/en/blog/detached-window-memory-leaks/index.md
@@ -0,0 +1,541 @@
+---
+title: Detached window memory leaks
+subhead: |
+  Find and fix tricky memory leaks caused by detached windows.
+date: 2020-09-29
+hero: image/admin/Dnk2j14tUTNqqSYN8FHj.jpg
+alt: Cat contemplating how to fix a leak
+authors:
+  - developit
+  - bartekn
+description: |
+  Detached windows are a common type of memory leak that is particularly difficult to find and fix.
+tags:
+  - blog
+  - memory
+  - dom
+  - javascript
+  - performance
+---
+
+## What's a memory leak in JavaScript? {: #whats-a-memory-leak }
+
+A memory leak is an unintentional increase in the amount of memory used by an application over time.
+In JavaScript, memory leaks happen when objects are no longer needed, but are still referenced by
+functions or other objects. These references prevent the unneeded objects from being reclaimed by
+the garbage collector.
+
+The job of the garbage collector is to identify and reclaim objects that are no longer reachable
+from the application. This works even when objects reference themselves, or cyclically reference
+each other–once there are no remaining references through which an application could access a
+group of objects, it can be garbage collected.
+
+```js
+let A = {};
+console.log(A); // local variable reference
+
+let B = {A}; // B.A is a second reference to A
+
+A = null; // unset local variable reference
+
+console.log(B.A); // A can still be referenced by B
+
+B.A = null; // unset B's reference to A
+
+// No references to A are left. It can be garbage collected.
+```
+
+A particularly tricky class of memory leak occurs when an application references objects that have
+their own lifecycle, like DOM elements or popup windows. It's possible for these types of objects
+to become unused without the application knowing, which means application code may have the only
+remaining references to an object that could otherwise be garbage collected.
+
+## What's a detached window? {: #whats-a-detached-window }
+
+In the following example, a slideshow viewer application includes buttons to open and close a
+presenter notes popup. Imagine a user clicks **Show Notes**, then closes the popup window directly
+instead of clicking the **Hide Notes** button–the `notesWindow` variable still holds a reference
+to the popup that could be accessed, even though the popup is no longer in use.
+
+```html
+<button id="show">Show Notes</button>
+<button id="hide">Hide Notes</button>
+<script type="module">
+  let notesWindow;
+  document.getElementById('show').onclick = () => {
+    notesWindow = window.open('/presenter-notes.html');
+  };
+  document.getElementById('hide').onclick = () => {
+    if (notesWindow) notesWindow.close();
+  };
+</script>
+```
+
+This is an example of a detached window. The popup window was closed, but our code has a reference
+to it that prevents the browser from being able to destroy it and reclaim that memory.
+
+When a page calls `window.open()` to create a new browser window or tab, a
+[`Window`](https://developer.mozilla.org/docs/Web/API/Window) object is returned that
+represents the window or tab. Even after such a window has been closed or the user has navigated it
+away, the `Window` object returned from `window.open()` can still be used to access information
+about it. This is one type of detached window: because JavaScript code can still potentially access
+properties on the closed `Window` object, it must be kept in memory. If the window included a lot of
+JavaScript objects or iframes, that memory can't be reclaimed until there are no remaining
+JavaScript references to the window's properties.
+
+<figure>
+  <video controls autoplay loop muted playsinline width="878">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/example-detached-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/example-detached-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Using Chrome DevTools to demonstrate how it's possible to retain a document after a window has
+    been closed.
+  </figcaption>
+</figure>
+
+The same issue can also occur when using `<iframe>` elements. Iframes behave like nested windows
+that contain documents, and their `contentWindow` property provides access to the contained `Window`
+object, much like the value returned by `window.open()`. JavaScript code can keep a reference to an
+iframe's `contentWindow` or `contentDocument` even if the iframe is removed from the DOM or its URL
+changes, which prevents the document from being garbage collected since its properties can still be
+accessed.
+
+<figure>
+  <video controls autoplay loop muted playsinline width="615">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/example-detached-iframe.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/example-detached-iframe.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Demonstration of how an event handler can retain an iframe's document, even after navigating the
+    iframe to a different URL.
+  </figcaption>
+</figure>
+
+In cases where a reference to the `document` within a window or iframe is retained from JavaScript,
+that document will be kept in-memory even if the containing window or iframe navigates to a new
+URL. This can be particularly troublesome when the JavaScript holding that reference doesn't detect
+that the window/frame has navigated to a new URL, since it doesn't know when it becomes the last
+reference keeping a document in memory.
+
+## How detached windows cause memory leaks {: #how-detached-windows-cause-leaks }
+
+When working with windows and iframes on the same domain as the primary page, it's common to listen
+for events or access properties across document boundaries. For example, let's revisit a variation
+on the presentation viewer example from the beginning of this guide. The viewer opens a second
+window for displaying speaker notes. The speaker notes window listens for`click` events as its cue
+to move to the next slide. If the user closes this notes window, the JavaScript running in the
+original parent window still has full access to the speaker notes document:
+
+```html
+<button id="notes">Show Presenter Notes</button>
+<script type="module">
+  let notesWindow;
+  function showNotes() {
+    notesWindow = window.open('/presenter-notes.html');
+    notesWindow.document.addEventListener('click', nextSlide);
+  }
+  document.getElementById('notes').onclick = showNotes;
+
+  let slide = 1;
+  function nextSlide() {
+    slide += 1;
+    notesWindow.document.title = `Slide  ${slide}`;
+  }
+  document.body.onclick = nextSlide;
+</script>
+```
+
+Imagine we close the browser window created by `showNotes()` above. There's no event handler
+listening to detect that the window has been closed, so nothing is informing our code that it should
+clean up any references to the document. The `nextSlide()` function is still "live" because it is
+bound as a click handler in our main page, and the fact that `nextSlide` contains a reference to
+`notesWindow` means the window is still referenced and can't be garbage collected.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/animation.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/animation.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Illustration of how references to a window prevent it from being garbage collected once closed.
+  </figcaption>
+</figure>
+
+{% Aside %}
+See [Solution: communicate over postMessage](#solution-communicate-over-postmessage) to
+learn how to fix this particular memory leak.
+{% endAside %}
+
+There are a number of other scenarios where references are accidentally retained that prevent
+detached windows from being eligible for garbage collection:
+
+- Event handlers can be registered on an iframe's initial document prior to the frame
+  navigating to its intended URL, resulting in accidental references to the document and the
+  iframe persisting after other references have been cleaned up.
+
+- A memory-heavy document loaded in a window or iframe can be accidentally kept in-memory long
+  after navigating to a new URL. This is often caused by the parent page retaining references to
+  the document in order to allow for listener removal.
+
+- When passing a JavaScript object to another window or iframe, the Object's prototype chain
+  includes references to the environment it was created in, including the window that created it.
+  This means it's just as important to avoid holding references to objects from other windows as
+  it is to avoid holding references to the windows themselves.
+
+  {% Label %}index.html:{% endLabel %}
+
+  ```html
+  <script>
+    let currentFiles;
+    function load(files) {
+      // this retains the popup:
+      currentFiles = files;
+    }
+    window.open('upload.html');
+  </script>
+  ```
+
+  {% Label %}upload.html:{% endLabel %}
+
+  ```html
+  <input type="file" id="file" />
+  <script>
+    file.onchange = () => {
+      parent.load(file.files);
+    };
+  </script>
+  ```
+
+## Detecting memory leaks caused by detached windows {: #detect-leaks }
+
+Tracking down memory leaks can be tricky. It is often difficult to construct isolated reproductions
+of these issues, particularly when multiple documents or windows are involved. To make things more
+complicated, inspecting potential leaked references can end up creating additional references that
+prevent the inspected objects from being garbage collected. To that end, it's useful to start with
+tools that specifically avoid introducing this possibility.
+
+A great place to start debugging memory problems is to
+[take a heap snapshot](https://developer.chrome.com/docs/devtools/memory-problems/#discover_detached_dom_tree_memory_leaks_with_heap_snapshots).
+This provides a point-in-time view into the memory currently used by an application - all the
+objects that have been created but not yet garbage-collected. Heap snapshots contain useful
+information about objects, including their size and a list of the variables and closures that
+reference them.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4tBcZ7lZEqkmonijrOGa.png", alt="A screenshot of a heap snapshot in Chrome DevTools showing the references that retain a large object.", width="762", height="419" %}
+  <figcaption>
+    A heap snapshot showing the references that retain a large object.
+  </figcaption>
+</figure>
+
+To record a heap snapshot, head over to the **Memory** tab in Chrome DevTools and select **Heap
+Snapshot** in the list of available profiling types. Once the recording has finished, the
+**Summary** view shows current objects in-memory, grouped by constructor.
+
+<figure>
+  <video controls autoplay loop muted playsinline width="640">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/take-heap-snapshot.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/detached-window-memory-leaks/take-heap-snapshot.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Demonstration of taking a heap snapshot in Chrome DevTools.
+  </figcaption>
+</figure>
+
+{% Aside 'codelab' %}
+Open this [step-by-step walk through](https://detached-windows-test.glitch.me) in a new window.
+{% endAside %}
+
+Analyzing heap dumps can be a daunting task, and it can be quite difficult to find the right
+information as part of debugging. To help with this, Chromium engineers
+[yossik@](https://github.com/ykahlon) and [peledni@](https://github.com/peledni) developed a
+standalone [Heap Cleaner](https://github.com/ykahlon/heap-cleaner) tool that can help highlight a
+specific node like a detached window. Running Heap Cleaner on a trace removes other unnecessary
+information from the retention graph, which makes the trace cleaner and much easier to read.
+
+### Measure memory programmatically {: #measure-memory }
+
+Heap snapshots provide a high level of detail and are excellent for figuring out where leaks occur,
+but taking a heap snapshot is a manual process. Another way to check for memory leaks is to obtain
+the currently used JavaScript heap size from the [`performance.memory` API][performance-memory-api]:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIypz58ucRgAnnNu1LwR.png", alt="A screenshot of a section of the Chrome DevTools user interface.", width="621", height="394" %}
+  <figcaption>
+    Checking the used JS heap size in DevTools as a popup is created, closed and unreferenced.
+  </figcaption>
+</figure>
+
+The `performance.memory` API only provides information about the JavaScript heap size, which means
+it doesn't include memory used by the popup's document and resources. To get the full picture, we'd
+need to use the new [`performance.measureUserAgentSpecificMemory()` API][performance-measurememory] currently being
+trialled in Chrome.
+
+## Solutions for avoiding detached window leaks {: #solutions }
+
+The two most common cases where detached windows cause memory leaks are when the parent document
+retains references to a closed popup or removed iframe, and when unexpected navigation of a window
+or iframe results in event handlers never being unregistered.
+
+### Example: Closing a popup {: #solution-example }
+
+{% Aside %}
+The [unset references](#solution-unset-references),
+[monitor and dispose](#solution-monitor-dispose), and [WeakRef](#solution-weakref) solutions are
+all based off of this example.
+{% endAside %}
+
+In the following example, two buttons are used to open and close a popup window. In order for the
+**Close Popup** button to work, a reference to the opened popup window is stored in a variable:
+
+```html
+<button id="open">Open Popup</button>
+<button id="close">Close Popup</button>
+<script>
+  let popup;
+  open.onclick = () => {
+    popup = window.open('/login.html');
+  };
+  close.onclick = () => {
+    popup.close();
+  };
+</script>
+```
+
+At first glance, it seems like the above code avoids common pitfalls: no references to the popup's
+document are retained, and no event handlers are registered on the popup window. However, once the
+**Open Popup** button is clicked the `popup` variable now references the opened window, and that
+variable is accessible from the scope of the **Close Popup** button click handler. Unless `popup` is
+reassigned or the click handler removed, that handler's enclosed reference to `popup` means it can't
+be garbage-collected.
+
+### Solution: Unset references {: #solution-unset-references }
+
+Variables that reference another window or its document cause it to be retained in memory. Since
+objects in JavaScript are always references, assigning a new value to variables removes their
+reference to the original object. To "unset" references to an object, we can reassign those
+variables to the value `null`.
+
+Applying this to the previous [popup example](#solution-example), we can modify the close button
+handler to make it "unset" its reference to the popup window:
+
+```js/6/
+let popup;
+open.onclick = () => {
+  popup = window.open('/login.html');
+};
+close.onclick = () => {
+  popup.close();
+  popup = null;
+};
+```
+
+This helps, but reveals a further problem specific to windows created using `open()`: what if the
+user closes the window instead of clicking our custom close button? Further still, what if the user
+starts browsing to other websites in the window we opened? While it originally seemed sufficient to
+unset the `popup` reference when clicking our close button, there is still a memory leak when users
+don't use that particular button to close the window. Solving this requires detecting these cases in
+order to unset lingering references when they occur.
+
+### Solution: Monitor and dispose {: #solution-monitor-dispose }
+
+In many situations, the JavaScript responsible for opening windows or creating frames does not have
+exclusive control over their lifecycle. Popups can be closed by the user, or navigation to a new
+document can cause the document previously contained by a window or frame to become detached. In
+both cases, the browser fires an `pagehide` event to signal that the document is being unloaded.
+
+{% Aside 'caution' %}
+There's another event called`unload` which is similar to`pagehide` but is considered harmful and
+should be avoided as much as possible. See
+[Legacy lifecycle APIs to avoid: the unload event](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event)
+for details.
+{% endAside %}
+
+The `pagehide` event can be used to detect closed windows and navigation away from the current
+document. However, there is one important caveat: all newly-created windows and iframes contain an
+empty document, then asynchronously navigate to the given URL if provided. As a result, an initial
+`pagehide` event is fired shortly after creating the window or frame, just before the target
+document has loaded. Since our reference cleanup code needs to run when the _target_ document is
+unloaded, we need to ignore this first `pagehide` event. There are a number of techniques for doing
+so, the simplest of which is to ignore pagehide events originating from the initial document's
+`about:blank` URL. Here's how it would look in our [popup example](#solution-example):
+
+```js
+let popup;
+open.onclick = () => {
+  popup = window.open('/login.html');
+
+  // listen for the popup being closed/exited:
+  popup.addEventListener('pagehide', () => {
+    // ignore initial event fired on "about:blank":
+    if (!popup.location.host) return;
+
+    // remove our reference to the popup window:
+    popup = null;
+  });
+};
+```
+
+It's important to note that this technique only works for windows and frames that have the same
+effective origin as the parent page where our code is running. When loading content from a different
+origin, both `location.host` and the `pagehide` event are unavailable for security reasons. While
+it's generally best to avoid keeping references to other origins, in the rare cases where this is
+required it is possible to monitor the `window.closed` or `frame.isConnected` properties. When these
+properties change to indicate a closed window or removed iframe, it's a good idea to unset any
+references to it.
+
+```js
+let popup = window.open('https://example.com');
+let timer = setInterval(() => {
+  if (popup.closed) {
+    popup = null;
+    clearInterval(timer);
+  }
+}, 1000);
+```
+
+### Solution: Use WeakRef {: #solution-weakref }
+
+{% Aside %}
+`WeakRef` is a new feature of the JavaScript language,
+[available in desktop Firefox since version 79](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#Browser_compatibility)
+and
+[Chromium-based browsers since version 84](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#Browser_compatibility).
+Since it's not yet widely-supported, this solution is better suited to tracking down and debugging
+issues rather than fixing them for production.
+{% endAside %}
+
+JavaScript recently gained support for a new way to reference objects that allows garbage collection
+to take place, called [`WeakRef`][weakref]. A `WeakRef` created for an object is not a direct
+reference, but rather a separate object that provides a special `.deref()` method that returns a
+reference to the object as long as it has not been garbage-collected. With `WeakRef`, it is
+possible to access the current value of a window or document while still allowing it to be garbage
+collected. Instead of retaining a reference to the window that must be manually unset in response
+to events like `pagehide` or properties like `window.closed`, access to the window is obtained
+as-needed. When the window is closed, it can be garbage collected, causing the `.deref()` method
+to begin returning `undefined`.
+
+```html
+<button id="open">Open Popup</button>
+<button id="close">Close Popup</button>
+<script>
+  let popup;
+  open.onclick = () => {
+    popup = new WeakRef(window.open('/login.html'));
+  };
+  close.onclick = () => {
+    const win = popup.deref();
+    if (win) win.close();
+  };
+</script>
+```
+
+One interesting detail to consider when using `WeakRef` to access windows or documents is that the
+reference generally remains available for a short period of time after the window is closed or
+iframe removed. This is because `WeakRef` continues returning a value until its associated object
+has been garbage-collected, which happens asynchronously in JavaScript and generally during idle
+time. Thankfully, when checking for detached windows in the Chrome DevTools **Memory** panel, taking
+a heap snapshot actually triggers garbage collection and disposes the weakly-referenced window. It's
+also possible to check that an object referenced via `WeakRef` has been disposed from JavaScript,
+either by detecting when `deref()` returns `undefined` or using the new
+[`FinalizationRegistry` API][finalizationregistry]:
+
+```js
+let popup = new WeakRef(window.open('/login.html'));
+
+// Polling deref():
+let timer = setInterval(() => {
+  if (popup.deref() === undefined) {
+    console.log('popup was garbage-collected');
+    clearInterval(timer);
+  }
+}, 20);
+
+// FinalizationRegistry API:
+let finalizers = new FinalizationRegistry(() => {
+  console.log('popup was garbage-collected');
+});
+finalizers.register(popup.deref());
+```
+
+### Solution: Communicate over `postMessage` {: #solution-postmessage }
+
+Detecting when windows are closed or navigation unloads a document gives us a way to remove
+handlers and unset references so that detached windows can be garbage collected. However, these
+changes are specific fixes for what can sometimes be a more fundamental concern: direct coupling
+between pages.
+
+A more holistic alternative approach is available that avoids stale references between windows and
+documents: establishing separation by limiting cross-document communication to
+[`postMessage()`][postmessage]. Thinking back to our original presenter notes example, functions
+like `nextSlide()` updated the notes window directly by referencing it and manipulating its
+content. Instead, the primary page could pass the necessary information to the notes window
+asynchronously and indirectly over `postMessage()`.
+
+```js
+let updateNotes;
+function showNotes() {
+  // keep the popup reference in a closure to prevent outside references:
+  let win = window.open('/presenter-view.html');
+  win.addEventListener('pagehide', () => {
+    if (!win || !win.location.host) return; // ignore initial "about:blank"
+    win = null;
+  });
+  // other functions must interact with the popup through this API:
+  updateNotes = (data) => {
+    if (!win) return;
+    win.postMessage(data, location.origin);
+  };
+  // listen for messages from the notes window:
+  addEventListener('message', (event) => {
+    if (event.source !== win) return;
+    if (event.data[0] === 'nextSlide') nextSlide();
+  });
+}
+let slide = 1;
+function nextSlide() {
+  slide += 1;
+  // if the popup is open, tell it to update without referencing it:
+  if (updateNotes) {
+    updateNotes(['setSlide', slide]);
+  }
+}
+document.body.onclick = nextSlide;
+```
+
+While this still requires the windows to reference each other, neither retains a reference to the
+current _document_ from another window. A message-passing approach also encourages designs where
+window references are held in a single place, meaning only a single reference needs to be unset when
+windows are closed or navigate away. In the above example, only `showNotes()` retains a reference to
+the notes window, and it uses the `pagehide` event to ensure that reference is cleaned up.
+
+### Solution: Avoid references using `noopener` {: #solution-noopener }
+
+In cases where a popup window is opened that your page doesn't need to communicate with or control,
+you may be able to avoid ever obtaining a reference to the window. This is particularly useful
+when creating windows or iframes that will load content from another site. For these cases,
+`window.open()` accepts a [`"noopener"` option][noopener] that works just like the
+[`rel="noopener"` attribute][rel-noopener] for HTML links:
+
+```js
+window.open('https://example.com/share', null, 'noopener');
+```
+
+The `"noopener"` option causes `window.open()` to return `null`, making it impossible to
+accidentally store a reference to the popup. It also prevents the popup window from getting a
+reference to its parent window, since the `window.opener` property will be `null`.
+
+## Feedback
+
+Hopefully some of the suggestions in this article help with finding and fixing memory leaks. If you
+have another technique for debugging detached windows or this article helped uncover leaks in your
+app, I'd love to know! You can find me on Twitter [@\_developit](https://twitter.com/_developit).
+
+[performance-memory-api]: https://developer.mozilla.org/docs/Web/API/Performance/memory
+[performance-measurememory]: /monitor-total-page-memory-usage/
+[postmessage]: https://developer.mozilla.org/docs/Web/API/Window/postMessage
+[finalizationregistry]: https://v8.dev/features/weak-references#:~:text=FinalizationRegistry
+[weakref]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakRef
+[noopener]: https://developer.mozilla.org/docs/Web/API/Window/open#noopener
+[rel-noopener]: https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/
diff --git a/src/site/content/en/blog/device-orientation/index.md b/src/site/content/en/blog/device-orientation/index.md
new file mode 100644
index 00000000000..029f3a5b221
--- /dev/null
+++ b/src/site/content/en/blog/device-orientation/index.md
@@ -0,0 +1,329 @@
+---
+layout: post
+title: Device Orientation & Motion
+description: >
+  Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass in mobile devices.
+authors:
+  - petelepage
+date: 2014-06-17
+updated: 2018-09-20
+---
+
+Device motion and orientation events provide access to the built-in
+accelerometer, gyroscope, and compass in mobile devices.
+
+These events can be used for many purposes; in gaming, for example, to control
+the direction or action of a character. When used with geolocation, they can
+help create more accurate turn-by-turn navigation or provide information about
+a specific location.
+
+{% Aside 'caution' %}
+Not all browsers use the same coordinate system, and they may report different values under identical situations. This has improved over time, but be sure to test your situation.
+{% endAside %}
+
+## Summary
+
+- Detect which side of the device is up and how the device is rotating.
+- Learn when and how to respond to motion and orientation events.
+
+## Which end is up?
+
+To use the data that the device orientation and motion events return,
+it is important to understand the values provided.
+
+### Earth coordinate frame
+
+The Earth coordinate frame, described by the values `X`, `Y`, and `Z`, is aligned
+based on gravity and standard magnetic orientation.
+
+<table>
+<tr><th colspan="2">Coordinate system</th></tr>
+<tr>
+  <td><code>X</code></td>
+  <td>Represents the east-west direction (where east is positive).</td>
+</tr>
+<tr>
+  <td><code>Y</code></td>
+  <td>Represents the north-south direction (where north is positive).</td>
+</tr>
+<tr>
+  <td><code>Z</code></td>
+  <td>Represents the up-down direction, perpendicular to the ground
+      (where up is positive).
+  </td>
+</tr>
+</table>
+
+### Device coordinate frame
+
+<figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/yyBk2geW7lIKqULH5ZIT.png", alt="Illustration of device coordinate frame", width="400", height="250" %}
+    <figcaption>
+        Illustration of device coordinate frame
+    </figcaption>
+</figure>
+
+<!-- Special thanks to Sheppy (https://developer.mozilla.org/en-US/profiles/Sheppy)
+  for his images which are in the public domain. -->
+
+The device coordinate frame, described by the values `x`, `y`, and `z`, is aligned
+based on the center of the device.
+
+<table>
+    <tr><th colspan="2">Coordinate system</th></tr>
+    <tr>
+    <td><code>X</code></td>
+    <td>In the plane of the screen, positive to the right.</td>
+    </tr>
+    <tr>
+    <td><code>Y</code></td>
+    <td>In the plane of the screen, positive towards the top.</td>
+    </tr>
+    <tr>
+    <td><code>Z</code></td>
+    <td>Perpendicular to the screen or keyboard, positive extending
+        away.
+    </td>
+    </tr>
+</table>
+
+On a phone or tablet, the orientation of the device is based on the typical
+orientation of the screen. For phones and tablets, it is based on the device
+being in portrait mode. For desktop or laptop computers, the orientation is
+considered in relation to the keyboard.
+
+### Rotation data
+
+Rotation data is returned as a [Euler angle](https://en.wikipedia.org/wiki/Euler_angles),
+representing the number of degrees of difference between the device coordinate
+frame and the Earth coordinate frame.
+
+#### Alpha
+
+  <figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/PoeibnLAXFFzDOoPNLzJ.png", alt="Illustration of alpha in the device coordinate frame", width="400", height="250" %}
+    <figcaption>
+      Illustration of alpha in the device coordinate frame
+    </figcaption>
+  </figure>
+
+The rotation around the z axis. The `alpha` value is 0&deg; when the top of
+the device is pointed directly north. As the device is rotated counter-clockwise,
+the `alpha` value increases.
+
+#### Beta
+
+<figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/1h9NxeN7yae1Yp4h3xj1.png", alt="illustration of device coordinate frame", width="400", height="250" %}
+    <figcaption>
+        Illustration of beta in the device coordinate frame
+    </figcaption>
+</figure>
+
+The rotation around the x axis. The `beta` value is 0&deg; when the top and
+bottom of the device are equidistant from the surface of the earth. The value
+increases as the top of the device is tipped toward the surface of the earth.
+
+#### Gamma
+
+  <figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/kqDO9oumteoknSlF6lGq.png", alt="illustration of device coordinate frame", width="415", height="388" %}
+    <figcaption>
+      Illustration of gamma in the device coordinate frame
+    </figcaption>
+  </figure>
+
+The rotation around the y axis. The `gamma` value is 0&deg; when the left and
+right edges of the device are equidistant from the surface of the earth. The value
+increases as the right side is tipped towards the surface of the earth.
+
+<div style="clear:both;"></div>
+
+## Device orientation
+
+The device orientation event returns rotation data, which includes how much
+the device is leaning front-to-back, side-to-side, and, if the phone or laptop
+has a compass, the direction the device is facing.
+
+Use sparingly.
+Test for support.
+Don't update the UI on every orientation event; instead, sync to `requestAnimationFrame`.
+
+### When to use device orientation events
+
+There are several uses for device orientation events. Examples include the following:
+
+- Update a map as the user moves.
+- Subtle UI tweaks, for example, adding parallax effects.
+- Combined with geolocation, can be used for turn-by-turn navigation.
+
+### Check for support and listen for events
+
+To listen for `DeviceOrientationEvent`, first check to see if the browser supports the events. Then, attach an event listener to the `window` object listening for `deviceorientation` events.
+
+```js
+if (window.DeviceOrientationEvent) {
+  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
+  document.getElementById('doeSupported').innerText = 'Supported!';
+}
+```
+
+### Handle the device orientation events
+
+The device orientation event fires when the device moves or changes
+orientation. It returns data about the difference between the device in
+its current position in relation to the
+[Earth coordinate frame](#earth-coordinate-frame).
+
+The event typically returns three properties: [`alpha`](#alpha),
+[`beta`](#beta), and [`gamma`](#gamma). On Mobile Safari, an additional parameter
+[`webkitCompassHeading`](https://developer.apple.com/library/ios/documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/){: .external }
+is returned with the compass heading.
+
+#### Device motion
+
+The device orientation event returns rotation data, which includes how much
+the device is leaning front-to-back, side-to-side, and, if the phone or laptop
+has a compass, the direction the device is facing.
+
+Use device motion for when the current motion of the device is needed.
+`rotationRate` is provided in &deg;/sec.
+`acceleration` and `accelerationWithGravity` are provided in m/sec<sup>2</sup>.
+Be aware of differences between browser implementations.
+
+#### When to use device motion events
+
+There are several uses for device motion events. Examples include the following:
+
+- Shake gesture to refresh data.
+- In games, to cause characters to jump or move.
+- For health and fitness apps.
+
+#### Check for support and listen for events
+
+To listen for `DeviceMotionEvent`, first check to see if the events are
+supported in the browser. Then attach an event listener to the `window`
+object listening for `devicemotion` events.
+
+```js
+if (window.DeviceMotionEvent) {
+  window.addEventListener('devicemotion', deviceMotionHandler);
+  setTimeout(stopJump, 3 * 1000);
+}
+```
+
+#### Handle the device motion events
+
+The device motion event fires on a regular interval and returns data about the
+rotation (in &deg;/second) and acceleration (in m/second<sup>2</sup>)
+of the device, at that moment in time. Some devices do not have the hardware
+to exclude the effect of gravity.
+
+The event returns four properties,
+[`accelerationIncludingGravity`](#device-coordinate-frame),
+[`acceleration`](#device-coordinate-frame), which excludes the effects of
+gravity, [`rotationRate`](#rotation-data), and `interval`.
+
+For example, let's take a look at a phone, lying on a flat table, with its
+screen facing up.
+
+<table>
+  <thead>
+    <tr>
+      <th data-th="State">State</th>
+      <th data-th="Rotation">Rotation</th>
+      <th data-th="Acceleration (m/s<sup>2</sup>)">Acceleration (m/s<sup>2</sup>)</th>
+      <th data-th="Acceleration with gravity (m/s<sup>2</sup>)">Acceleration with gravity (m/s<sup>2</sup>)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="State">Not moving</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[0, 0, 0]</td>
+      <td data-th="Acceleration with gravity">[0, 0, 9.8]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving up towards the sky</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[0, 0, 5]</td>
+      <td data-th="Acceleration with gravity">[0, 0, 14.81]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving only to the right</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[3, 0, 0]</td>
+      <td data-th="Acceleration with gravity">[3, 0, 9.81]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving up and to the right</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[5, 0, 5]</td>
+      <td data-th="Acceleration with gravity">[5, 0, 14.81]</td>
+    </tr>
+  </tbody>
+</table>
+
+Conversely, if the phone were held so the screen was perpendicular to the
+ground, and was directly visible to the viewer:
+
+<table>
+  <thead>
+    <tr>
+      <th data-th="State">State</th>
+      <th data-th="Rotation">Rotation</th>
+      <th data-th="Acceleration (m/s<sup>2</sup>)">Acceleration (m/s<sup>2</sup>)</th>
+      <th data-th="Acceleration with gravity (m/s<sup>2</sup>)">Acceleration with gravity (m/s<sup>2</sup>)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="State">Not moving</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[0, 0, 0]</td>
+      <td data-th="Acceleration with gravity">[0, 9.81, 0]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving up towards the sky</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[0, 5, 0]</td>
+      <td data-th="Acceleration with gravity">[0, 14.81, 0]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving only to the right</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[3, 0, 0]</td>
+      <td data-th="Acceleration with gravity">[3, 9.81, 0]</td>
+    </tr>
+    <tr>
+      <td data-th="State">Moving up and to the right</td>
+      <td data-th="Rotation">[0, 0, 0]</td>
+      <td data-th="Acceleration">[5, 5, 0]</td>
+      <td data-th="Acceleration with gravity">[5, 14.81, 0]</td>
+    </tr>
+  </tbody>
+</table>
+
+#### Sample: Calculating the maximum acceleration of an object
+
+One way to use device motion events is to calculate the maximum acceleration
+of an object. For example, what's the maximum acceleration of a person
+jumping?
+
+```js
+if (evt.acceleration.x > jumpMax.x) {
+  jumpMax.x = evt.acceleration.x;
+}
+if (evt.acceleration.y > jumpMax.y) {
+  jumpMax.y = evt.acceleration.y;
+}
+if (evt.acceleration.z > jumpMax.z) {
+  jumpMax.z = evt.acceleration.z;
+}
+```
+
+After tapping the Go! button, the user is told to jump. During that time,
+the page stores the maximum (and minimum) acceleration values, and after the
+jump, tells the user their maximum acceleration.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/device-pixel-content-box/dprs.png b/src/site/content/en/blog/device-pixel-content-box/dprs.png
deleted file mode 100644
index 64a53893e8e..00000000000
Binary files a/src/site/content/en/blog/device-pixel-content-box/dprs.png and /dev/null differ
diff --git a/src/site/content/en/blog/device-pixel-content-box/fractional-pixels.png b/src/site/content/en/blog/device-pixel-content-box/fractional-pixels.png
deleted file mode 100644
index 734a6184b33..00000000000
Binary files a/src/site/content/en/blog/device-pixel-content-box/fractional-pixels.png and /dev/null differ
diff --git a/src/site/content/en/blog/device-pixel-content-box/index.md b/src/site/content/en/blog/device-pixel-content-box/index.md
index fac3e7d9115..6503aa13e07 100644
--- a/src/site/content/en/blog/device-pixel-content-box/index.md
+++ b/src/site/content/en/blog/device-pixel-content-box/index.md
@@ -5,7 +5,7 @@ authors:
   - surma
 date: 2020-07-07
 # updated: 2020-06-24
-hero: pixels.jpg
+hero: image/admin/t9UnR0miKBlEuPbvPdPH.jpg
 alt: A closeup image of a computer screen.
 description: Since Chrome 84, ResizeObserver supports a new box measurement called device-pixel-content-box, that measures the element's dimension in physical pixels. This is crucial for rendering pixel-perfect graphics, especially in the context of high-density screens.
 tags:
@@ -14,9 +14,13 @@ tags:
   - javascript
   - layout
   - rendering
+feedback:
+  - api
 ---
 
-Since Chrome 84, [ResizeObserver] supports a new box measurement called `device-pixel-content-box`, that measures the element's dimension in _physical_ pixels. This enables rendering pixel-perfect graphics, especially in the context of high-density screens.
+Since Chrome 84, [ResizeObserver] supports a new box measurement called `devicePixelContentBox`, that measures the element's dimension in _physical_ pixels. This enables rendering pixel-perfect graphics, especially in the context of high-density screens.
+
+{% BrowserCompat 'api.ResizeObserverEntry.devicePixelContentBoxSize' %}
 
 ## Background: CSS pixels, canvas pixels, and physical pixels
 
@@ -40,9 +44,9 @@ will not exactly measure 1cm in size on most displays.
 
 Finally, dPR can also be affected by your browser's zoom feature. If you zoom in, the browser increases the reported dPR, causing everything to render bigger. If you check `devicePixelRatio` in a DevTools Console while zooming, you can see fractional values appear.
 
-<figure class="w-figure">
-  <img src="dprs.png" alt="" class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">DevTools showing a variety of fractional <code>devicePixelRatio</code> due to zooming.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ko6ehWmACBrUcPrl4AGO.png", alt="", width="600", height="314" %}
+  <figcaption>DevTools showing a variety of fractional <code>devicePixelRatio</code> due to zooming.</figcaption>
 </figure>
 
 Let's add the `<canvas>` element to the mix. You can specify how many pixels you want the canvas to have using the `width` and `height` attributes. So `<canvas width=40 height=30>` would be a canvas with 40 by 30 pixels. However, this does not mean that it will be _displayed_ at 40 by 30 pixels. By default, the canvas will use the `width` and `height` attribute to define its intrinsic size, but you can arbitrarily resize the canvas using all the CSS properties you know and love. With everything we have learned so far, it might occur to you that this will not be ideal in every scenario. One pixel on the canvas might end up covering multiple physical pixels, or just a fraction of a physical pixel. This can lead to unpleasing visual artifacts.
@@ -73,9 +77,9 @@ To achieve something as close to a pixel-perfect canvas as possible on the web,
 
 The astute reader might be wondering what happens when dPR is not an integer value. That is a good question and exactly where the crux of this entire problem lies. In addition, if you specify an element's position or size using percentages, `vh`, or other indirect values, it is possible that they will resolve to fractional CSS pixel values. An element with `margin-left: 33%` can end up with a rectangle like this:
 
-<figure class="w-figure">
-  <img src="fractional-pixels.png" alt="" class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">DevTools showing fractional pixel values as a result of a <code>getBoundingClientRect()</code> call.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gWP1lVOw8ITEJhziaKnU.png", alt="", width="800", height="409" %}
+  <figcaption>DevTools showing fractional pixel values as a result of a <code>getBoundingClientRect()</code> call.</figcaption>
 </figure>
 
 CSS pixels are purely virtual, so having fractions of a pixel is okay in theory, but how does the browser figure out the mapping to physical pixels? Because fractional _physical_ pixels are not a thing.
@@ -84,9 +88,9 @@ CSS pixels are purely virtual, so having fractions of a pixel is okay in theory,
 
 The part of the unit conversion process that takes care of aligning elements with physical pixels is called "pixel snapping", and it does what it says on the tin: It snaps fractional pixel values to integer, physical pixel values. How exactly this happens is different from browser to browser. If we have an element with a width of `791.984px` on a display where dPR is 1, one browser might render the element at `792px` physical pixels, while another browser might render it at `791px`. That's just a single pixel off, but a single pixel can be detrimental to renderings that need to be pixel-perfect. This can lead to blurriness or even more visible artifacts like the [Moiré effect].
 
-<figure class="w-figure">
-  <img src="side-by-side.png" alt="" class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">The top image is a raster of differently colored pixels. The bottom image is the same as above, but the width and height have been reduced by one pixel using bilinear scaling. The emerging pattern is called the Moiré effect.<br>(You might have to open this image in a new tab to see it without any scaling applied to it.)</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/11FeCvp9aKLnDk05vYwY.png", alt="", width="600", height="802" %}
+  <figcaption>The top image is a raster of differently colored pixels. The bottom image is the same as above, but the width and height have been reduced by one pixel using bilinear scaling. The emerging pattern is called the Moiré effect.<br>(You might have to open this image in a new tab to see it without any scaling applied to it.)</figcaption>
 </figure>
 
 ## `devicePixelContentBox`
@@ -138,7 +142,7 @@ if (!(await hasDevicePixelContentBox())) {
 
 Pixels are a surprisingly complex topic on the web and up until now there was no way for you to know the exact number of physical pixels an element occupies on the user's screen. The new `devicePixelContentBox` property on a `ResizeObserverEntry` gives you that piece of information and allows you to do pixel-perfect renderings with `<canvas>`. `devicePixelContentBox` is supported in Chrome 84+.
 
-[resizeobserver]: https://web.dev/resize-observer/
+[resizeobserver]: /resize-observer/
 [subpixel rendering]: https://en.wikipedia.org/wiki/Subpixel_rendering
 [moiré effect]: https://en.wikipedia.org/wiki/Moir%C3%A9_pattern
 [ro support]: https://caniuse.com/#feat=resizeobserver
diff --git a/src/site/content/en/blog/device-pixel-content-box/pixels.jpg b/src/site/content/en/blog/device-pixel-content-box/pixels.jpg
deleted file mode 100644
index 63e1eaa93e1..00000000000
Binary files a/src/site/content/en/blog/device-pixel-content-box/pixels.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/device-pixel-content-box/side-by-side.png b/src/site/content/en/blog/device-pixel-content-box/side-by-side.png
deleted file mode 100644
index d4ab7386136..00000000000
Binary files a/src/site/content/en/blog/device-pixel-content-box/side-by-side.png and /dev/null differ
diff --git a/src/site/content/en/blog/devices-introduction/index.md b/src/site/content/en/blog/devices-introduction/index.md
new file mode 100644
index 00000000000..01b525b15cd
--- /dev/null
+++ b/src/site/content/en/blog/devices-introduction/index.md
@@ -0,0 +1,222 @@
+---
+title: Accessing hardware devices on the web
+subhead: |
+  Pick the appropriate API to communicate with a hardware device of your choice.
+description: |
+  This article helps Web developers pick the right hardware API based on a given device.
+authors:
+  - beaufortfrancois
+date: 2021-02-12
+updated: 2022-01-20
+hero: image/admin/vAnNpGQruw5EUXxob47V.jpg
+alt: A woman sitting in front of a wooden desk photo.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - devices
+---
+
+The goal of this guide is to help you pick the best API to communicate with a
+hardware device (e.g. webcam, microphone, etc.) on the web. By "best" I mean it
+gives you everything you need with the shortest amount of work. In other words,
+you know the general use case you want to solve (e.g. accessing video) but you
+don't know what API to use or wonder if there's another way to achieve it.
+
+One problem that I commonly see web developers fall into is jumping into
+low-level APIs without learning about the higher-level APIs that are easier to
+implement and provide a better UX. Therefore, this guide starts by recommending
+higher-level APIs first, but also mentions lower-level APIs in case you have
+determined that the higher-level API doesn't meet your needs.
+
+## 🕹 Receive input events from this device {: #input }
+
+Try listening for [Keyboard] and [Pointer] events. If this device is a game
+controller, use the [Gamepad API] to know which buttons are being pressed and
+which axes moved.
+
+If none of these options work for you, a low-level API may be the solution.
+Check out [Discover how to communicate with your device] to start your journey.
+
+## 📸 Access audio and video from this device {: #audio-video }
+
+Use [MediaDevices.getUserMedia()] to get live audio and video streams from this
+device and learn about [capturing audio and video]. You can also [control the
+camera's pan, tilt, and zoom], and other camera settings such as [brightness and
+contrast], and even [take still images]. [Web Audio] can be used to add effects
+to audio, create audio visualizations, or apply spatial effects (such as
+panning). Check out [how to profile the performance of Web Audio apps] in Chrome
+as well.
+
+If none of these options work for you, a low-level API may be the solution.
+Check out [Discover how to communicate with your device] to start your journey.
+
+## 🖨 Print to this device {: #print }
+
+Use [window.print()] to open a browser dialog that lets the user pick this
+device as a destination to print the current document.
+
+If this doesn't work for you, a low-level API may be the solution. Check out
+[Discover how to communicate with your device] to start your journey.
+
+## 🔐 Authenticate with this device {: #auth }
+
+Use [WebAuthn] to create a strong, attested, and origin-scoped public-key
+credential with this hardware security device to authenticate users. It supports
+the use of Bluetooth, NFC, and USB-roaming U2F or FIDO2 authenticators —also
+known as security keys— as well as a platform authenticator, which lets users
+authenticate with their fingerprints or screen locks. Check out [Build your
+first WebAuthn app].
+
+If this device is another type of hardware security device (e.g. a
+cryptocurrency wallet), a low-level API may be the solution. Check out [Discover
+how to communicate with your device] to start your journey.
+
+## 🗄 Access files on this device {: #files }
+
+Use the [File System Access API] to read from and save changes directly to files
+and folders on the user's device. If not available, use the [File API] to ask
+the user to select local files from a browser dialog and then read the contents
+of those files.
+
+If none of these options work for you, a low-level API may be the solution.
+Check out [Discover how to communicate with your device] to start your journey.
+
+## 🧲 Access sensors on this device {: #sensors }
+
+Use the [Generic Sensor API] to read raw sensor values from motion sensors (e.g.
+accelerometer or gyroscope) and environmental sensors (e.g. ambient light,
+magnetometer). If not available, use the [DeviceMotion and DeviceOrientation]
+events to get access to the built-in accelerometer, gyroscope, and compass in
+mobile devices.
+
+If it doesn't work for you, a low-level API may be the solution. Check out
+[Discover how to communicate with your device] to start your journey.
+
+## 🛰 Access GPS coordinates on this device {: #gps }
+
+Use the [Geolocation API] to get the latitude and longitude of the user's
+current position on this device.
+
+If it doesn't work for you, a low-level API may be the solution. Check out
+[Discover how to communicate with your device] to start your journey.
+
+## 🔋 Check the battery on this device {: #battery }
+
+Use the [Battery API] to get host information about the battery charge level and
+be notified when the battery level or charging status change.
+
+If it doesn't work for you, a low-level API may be the solution. Check out
+[Discover how to communicate with your device] to start your journey.
+
+## 📞 Communicate with this device over the network {: #network }
+
+In the local network, use the [Remote Playback API] to broadcast audio and/or
+video on a remote playback device (e.g. a smart TV or a wireless speaker) or use
+the [Presentation API] to render a web page on a second screen (e.g. a secondary
+display connected with an HDMI cable or a smart TV connected wirelessly).
+
+If this device exposes a web server, use the [Fetch API] and/or [WebSockets] to
+fetch some data from this device by hitting appropriate endpoints. While TCP and
+UDP sockets are not available on the web, check out [WebTransport] to handle
+interactive, bidirectional, and multiplexed network connections. Note that
+[WebRTC] can also be used to communicate data in real-time with other browsers
+using a peer-to-peer protocol.
+
+## 🧱 Discover how to communicate with your device {: #discover }
+
+The decision of what low-level API you should use is determined by the nature of
+your physical connection to the device. If it is wireless, check out Web NFC for
+very short-range wireless connections and Web Bluetooth for nearby wireless
+devices.
+
+- With [Web NFC], read and write to this device when it's in close proximity to
+  the user's device (usually 5–10 cm, 2–4 inches). Tools like [NFC TagInfo by
+  NXP] allow you to browse the content of this device for reverse-engineering
+  purposes.
+
+- With [Web Bluetooth], connect to this device over a Bluetooth Low Energy
+  connection. It should be pretty easy to communicate with when it uses
+  standardized Bluetooth GATT services (such as the battery service) as their
+  behavior is [well-documented]. If not, at this point, you either have to find
+  some hardware documentation for this device or reverse-engineer it. You can
+  use external tools like [nRF Connect for Mobile] and built-in browser tools
+  such as the internal page `about://bluetooth-internals` in Chromium-based
+  browsers for that. Check out [Reverse-Engineering a Bluetooth Lightbulb] from
+  Uri Shaked. Note that Bluetooth devices may also speak the HID or serial
+  protocols.
+
+If wired, check out these APIs in this specific order:
+
+1. With [WebHID], understanding HID reports and report descriptors through
+   [collections] is key to your comprehension of this device. This can be
+   challenging without vendor documentation for this device. Tools like
+   [Wireshark] can help you reverse-engineer it. You can also use the [HID
+   Explorer web app] for dumping HID devices info into a human-readable format.
+
+2. With [Web Serial], without vendor documentation for this device and what
+   commands this device supports, it's hard but still possible with lucky
+   guessing. Reverse-engineering this device can be done by capturing raw USB
+   traffic with tools like [Wireshark]. You can also use the [Serial Terminal
+   web app] to experiment with this device if it uses a human-readable protocol.
+
+3. With [WebUSB], without clear documentation for this device and what USB
+   commands this device supports, it's hard but still possible with lucky
+   guessing. Watch [Exploring WebUSB and its exciting potential] from Suz
+   Hinton. You can also reverse-engineer this device by capturing raw USB
+   traffic and inspecting [USB descriptors] with external tools like Wireshark
+   and built-in browser tools such as the internal page `about://usb-internals`
+   in Chromium-based browsers.
+
+## Acknowledgements {: #acknowledgements }
+
+Thanks to [Reilly Grant], [Thomas Steiner], and [Kayce Basques] for reviewing this article.
+
+Photo by [Darya Tryfanava] on [Unsplash].
+
+
+[Keyboard]: https://developer.mozilla.org/docs/Web/API/KeyboardEvent
+[Pointer]: https://developer.mozilla.org/docs/Web/API/Pointer_events
+[Gamepad API]: /gamepad/
+[MediaDevices.getUserMedia()]: https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
+[capturing audio and video]: https://www.html5rocks.com/en/tutorials/getusermedia/intro/
+[control the camera's pan, tilt, and zoom]: /camera-pan-tilt-zoom/
+[brightness and contrast]: https://developer.chrome.com/blog/imagecapture/
+[take still images]: https://beaufortfrancois.github.io/sandbox/image-capture/playground
+[Web Audio]: https://developer.mozilla.org/docs/Web/API/Web_Audio_API
+[how to profile the performance of Web Audio apps]: /profiling-web-audio-apps-in-chrome/
+[window.print()]: https://developer.mozilla.org/docs/Web/API/Window/print
+[WebAuthn]: https://webauthn.io/
+[Build your first WebAuthn app]: https://developers.google.com/codelabs/webauthn-reauth
+[File System Access API]: /file-system-access/
+[File API]: https://developer.mozilla.org/docs/Web/API/File/Using_files_from_web_applications
+[Generic Sensor API]: /generic-sensor/
+[DeviceMotion and DeviceOrientation]: /device-orientation/
+[Geolocation API]: https://developers.google.com/web/fundamentals/native-hardware/user-location
+[Battery API]: https://developer.mozilla.org/docs/Web/API/Battery_Status_API
+[Remote Playback API]: https://www.chromestatus.com/feature/5778318691401728
+[Presentation API]: https://developer.chrome.com/blog/present-web-pages-to-secondary-attached-displays/
+[Fetch API]: https://developer.mozilla.org/docs/Web/API/Fetch_API
+[WebSockets]: https://developer.mozilla.org/docs/Web/API/WebSockets_API
+[WebTransport]: /webtransport/
+[WebRTC]: /webrtc-standard-announcement/
+[Web NFC]: /nfc
+[NFC TagInfo by NXP]: https://play.google.com/store/apps/details?id=com.nxp.taginfolite
+[Web Bluetooth]: /bluetooth/
+[well-documented]: https://www.bluetooth.com/specifications/gatt/
+[nRF Connect for Mobile]: https://play.google.com/store/apps/details?id=no.nordicsemi.android.mcp
+[Reverse-Engineering a Bluetooth Lightbulb]: https://urish.medium.com/reverse-engineering-a-bluetooth-lightbulb-56580fcb7546
+[WebHID]: /hid/
+[collections]: https://webhid-collections.glitch.me/
+[Wireshark]: https://gitlab.com/wireshark/wireshark/-/wikis/CaptureSetup/USB
+[HID Explorer web app]: https://nondebug.github.io/webhid-explorer/
+[Web Serial]: /serial/
+[Serial Terminal web app]: https://googlechromelabs.github.io/serial-terminal/
+[WebUSB]: /usb/
+[Exploring WebUSB and its exciting potential]: https://www.youtube.com/watch?v=IpfZ8Nj3uiE
+[USB descriptors]: https://www.beyondlogic.org/usbnutshell/usb5.shtml
+[Reilly Grant]: https://github.com/reillyeon
+[Thomas Steiner]: /authors/thomassteiner/
+[Kayce Basques]: /authors/kaycebasques/
+[Darya Tryfanava]: https://unsplash.com/@darya_tryfanava
+[Unsplash]: https://unsplash.com/photos/uZBGDkYkvhM
+[Discover how to communicate with your device]: #discover
diff --git a/src/site/content/en/blog/digging-into-the-privacy-sandbox/hero.jpg b/src/site/content/en/blog/digging-into-the-privacy-sandbox/hero.jpg
deleted file mode 100644
index a0869a3c7b8..00000000000
Binary files a/src/site/content/en/blog/digging-into-the-privacy-sandbox/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/digging-into-the-privacy-sandbox/index.md b/src/site/content/en/blog/digging-into-the-privacy-sandbox/index.md
index 6b819a97d5c..34646933cb0 100644
--- a/src/site/content/en/blog/digging-into-the-privacy-sandbox/index.md
+++ b/src/site/content/en/blog/digging-into-the-privacy-sandbox/index.md
@@ -4,15 +4,16 @@ subhead: The Privacy Sandbox is a series of proposals to satisfy third-party use
 authors:
   - samdutton
 date: 2020-04-08
-updated: 2020-07-30
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+updated: 2022-01-25
+hero: image/admin/5F89q0kLUOLWvYtNJeWZ.jpg
 alt: A black-on-white printed sign saying Private, on a wooden wall.
 description: The Privacy Sandbox is a series of proposals to satisfy third-party use cases without third-party cookies or other tracking mechanisms. The proposals need your feedback.
 tags:
   - blog
   - privacy
   - security
+feedback:
+  - api
 ---
 
 {% YouTube 'WnCKlNE52tc' %}
@@ -20,7 +21,7 @@ tags:
 ## Summary
 
 * This post outlines APIs and concepts from the [Privacy Sandbox](https://www.chromium.org/Home/chromium-privacy/privacy-sandbox) proposals.
-* The proposals are looking for feedback from the community, particularly from those in the advertising space (publishers, advertisers, and ad tech companies), to suggest missing use cases and share information about how to support your business use cases. 
+* The proposal authors are inviting feedback from the community, particularly from those in the advertising space (publishers, advertisers, and ad tech companies), to suggest missing use cases and share information about how to support your business use cases.
 * You can comment on the proposals by filing issues on [the repositories linked to below](#proposals).
 * There's a [glossary](#glossary) for the proposals at the end of this post.
 
@@ -28,37 +29,37 @@ tags:
 
 ## The current state of privacy on the web {: #background }
 
-Websites use services from other companies to provide analytics, serve video and do lots of other useful stuff. Composability is one of the web's [superpowers](https://youtu.be/WnCKlNE52tc?t=930). Most notably, ads are included in web pages via third-party JavaScript and iframes. Ad views, clicks and conversions are tracked via third-party cookies and scripts. 
+Websites use services from other companies to provide analytics, serve video and do lots of other useful stuff. Composability is one of the web's [superpowers](https://youtu.be/WnCKlNE52tc?t=930). Most notably, ads are included in web pages via third-party JavaScript and iframes. Ad views, clicks and conversions are tracked via third-party cookies and scripts.
 
 However, when you visit a website you may not be aware of the third parties involved and what they're doing with your data. Even publishers and web developers may not understand the entire third-party supply chain.
 
-Ad selection, conversion measurement, and other use cases currently rely on establishing stable cross-site user identity. Historically this has been done with [third-party cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Third-party_cookies), but browsers have begun to restrict access to these cookies. There has also been an [increase in the use of other mechanisms](https://github.com/bslassey/privacy-budget/issues/6) for cross-site user tracking, such as covert browser storage, device fingerprinting, and requests for personal information such as email addresses.
+Ad selection, conversion measurement, and other use cases currently rely on establishing stable cross-site user identity. Historically this has been done with [third-party cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies), but browsers have begun to restrict access to these cookies. There has also been an [increase in the use of other mechanisms](https://github.com/bslassey/privacy-budget/issues/6) for cross-site user tracking, such as covert browser storage, device fingerprinting, and requests for personal information such as email addresses.
 
 This is a dilemma for the web. How can legitimate third-party use cases be supported without enabling users to be tracked across sites?
 
 In particular, how can websites fund content by enabling third parties to show ads and measure ad performance—but not allow individual users to be profiled? How can advertisers and site owners evaluate a user's authenticity without resorting to dark patterns such as device fingerprinting?
 
-The way things work at the moment can be problematic for the entire web ecosystem, not just users. For publishers and advertisers, tracking identity and using a variety of non-standard third-party solutions can add to technical debt, code complexity, and data risk. Users, developers, publishers, and advertisers should be confident that the web is protecting user privacy choices. 
+The way things work at the moment can be problematic for the entire web ecosystem, not just users. For publishers and advertisers, tracking identity and using a variety of non-standard third-party solutions can add to technical debt, code complexity, and data risk. Users, developers, publishers, and advertisers should be confident that the web is protecting user privacy choices.
 
 Advertising is a core web business model for the internet, but advertising has to work for everyone. Which brings us to the Privacy Sandbox's mission: to create a thriving web ecosystem that is respectful of users and private by default.
 
 
 ## Introducing the Privacy Sandbox {: #introduction }
 
-The [Privacy Sandbox](https://www.blog.google/products/chrome/building-a-more-private-web/) introduces a set of privacy-preserving APIs to support business models that fund the open web in the absence of tracking mechanisms like third-party cookies. 
+The [Privacy Sandbox](https://www.blog.google/products/chrome/building-a-more-private-web/) introduces a set of privacy-preserving APIs to support business models that fund the open web in the absence of tracking mechanisms like third-party cookies.
 
 The Privacy Sandbox APIs require web browsers to take on a new role. Rather than working with limited tools and protections, the APIs enable the user's browser to act on the user's behalf—locally, on their device—to protect the user's identifying information as they navigate the web. The APIs enable use cases such as ad selection and conversion measurement, without revealing individual private and personal information. In engineering terms a [sandbox](/browser-sandbox) is a protected environment; a key principle of the Privacy Sandbox is that a user's personal information should be protected and not shared in a way that lets the user be identified across sites.
 
 This is a shift in direction for browsers. The Privacy Sandbox's vision of the future has browsers providing specific tools to satisfy specific use cases, while preserving user privacy. [A Potential Privacy Model for the Web](https://github.com/michaelkleber/privacy-model) sets out core principles behind the APIs:
 
-* To establish the range of web activity across which the user's browser can let websites treat a person as having a single identity. 
+* To establish the range of web activity across which the user's browser can let websites treat a person as having a single identity.
 * To identify the ways in which information can move across identity boundaries without compromising that separation.
 
 
 
 ### The Privacy Sandbox proposals {: #proposals }
 
-In order to successfully transition away from third-party cookies the Privacy Sandbox initiative needs your support. The proposal [explainers](https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html) need feedback from developers as well as publishers, advertisers, and ad technology companies, to suggest missing use cases and share information about how to accomplish their goals in a privacy-safe way. 
+In order to successfully transition away from third-party cookies the Privacy Sandbox initiative needs your support. The proposal [explainers](https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html) need feedback from developers as well as publishers, advertisers, and ad technology companies, to suggest missing use cases and share information about how to accomplish their goals in a privacy-safe way.
 
 You can comment on the proposal explainers by filing issues against each repository:
 
@@ -66,35 +67,53 @@ You can comment on the proposal explainers by filing issues against each reposit
 Establish the range of web activity across which the user's browser can let websites treat a person as having a single identity. Identify the ways in which information can move across identity boundaries without compromising that separation.
 * [Privacy Budget](https://github.com/bslassey/privacy-budget)<br>
 Limit the total amount of potentially identifiable data that sites can access. Update APIs to reduce the amount of potentially identifiable data revealed. Make access to potentially identifiable data measurable.
-* [Willful IP Blindness](https://github.com/bslassey/ip-blindness)<br>
-Enable sites to 'blind' themselves to IP addresses so they can avoid consuming privacy budget.
+* [Gnatcatcher](https://github.com/bslassey/ip-blindness)<br>
+Limit the ability to identify individual users by accessing their IP address. 
 * [Trust Token API](https://github.com/dvorak42/trust-token-api)<br>
 Enable an origin that trusts a user to issue them with cryptographic tokens which are stored by the user's browser so they can be used in other contexts to evaluate the user's authenticity.
 * [First-Party Sets](https://github.com/krgovind/first-party-sets/)<br>
 Allow related domain names owned by the same entity to declare themselves as belonging to the same first party.
 * [Aggregated Reporting](https://github.com/csharrison/aggregate-reporting-api)<br>
 Provide privacy preserving mechanisms to support a variety of use cases such as view-through-conversion, brand, lift, and reach measurement.
-* [Click Through Conversion Measurement Event-Level](https://github.com/csharrison/conversion-measurement-api)<br>
-Provide privacy preserving [click-through-conversion](#glossary-ctc) measurement.
-* [Federated Learning of Cohorts](https://github.com/jkarlin/floc)<br>
-The browser groups together many users with similar browsing histories into a group (or "flock"). Advertisers can select ads for this large group based on mass observations, but cannot recognize individual people in it.
-* [TURTLEDOVE](https://github.com/michaelkleber/turtledove)<br>
-Enable some form of on-device 'auction' to choose the most relevant ads which would include ads that remarket an advertiser based on a prior expression of interest by the user.
+* [Attribution Reporting](https://github.com/WICG/conversion-measurement-api)<br>
+Provide privacy preserving measurement of clicks and views with event-level and aggregate reports.
+* [Topics API](https://github.com/jkarlin/topics)<br>
+Enable interest-based advertising, without having to resort to tracking the sites a user visits. The design of the API was informed by community feedback from our earlier FLoC trials, and supersedes the [FLoC proposal](https://github.com/WICG/floc).
+* [FLEDGE](https://github.com/WICG/turtledove/blob/main/FLEDGE.md)<br>
+Provides a solution for remarketing use cases, designed so it cannot be used by third parties to track user browsing behaviour across sites.
 
 You can dive into the API proposal explainers right away, and over the coming months we'll be publishing posts about each proposal individually.
 
+We'll also be adding to our playlist of five-minute videos that give a simple explanation of each API.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv" 
+  title="YouTube video player" frameborder="0" 
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+  allowfullscreen style="max-width: 100% !important"></iframe>
+
 ## Use cases and goals
 
 ### Measure conversion
 
 **Goal:** Enable advertisers to measure ad performance.
 
-There are two proposals for APIs where information about ad impressions and conversions stays inside the browser, and which only offer carefully controlled, privacy-safe ways for that information to get back to advertisers. This controlled, privacy-safe reporting is done in a way that does not enable linking of identities across sites or collection of user browsing history:
+The [Attribution Reporting](https://github.com/csharrison/conversion-measurement-api) API enables the measurement of two events that are linked together: 
+1. An event on a publisher's website, such as a user viewing or clicking an ad. 
+1. A subsequent conversion on an advertiser site.
+
+This API supports **click-through** and **view-through** measurement.
+
+Other features in this API include cross-device attribution reporting and app-to-web attribution reporting. 
+
+The API also offers two types of **attribution reports**:
+
+* **Event-level reports** associate a particular ad click or view (on the ad side) with data on the conversion side. To preserve user privacy, by preventing the joining of user identity across sites, conversion-side data is very limited, and the data is 'noised' (meaning that for a small percentage of cases, random data is sent). As an extra privacy protection, reports are not sent immediately.
+
+* **Aggregate reports** are not tied to a specific event on the ad side. These reports provide richer, higher-fidelity conversion data than event-level reports. A combination of privacy techniques across cryptography, distribution of trust, and differential privacy help reduce the risk of identity joining across sites. 
 
-* [Click Through Conversion Measurement Event-Level](https://github.com/csharrison/conversion-measurement-api) allows advertisers to determine which ad clicks later turned into conversions. (API name suggestions welcome!)
-* [Aggregated Reporting](https://github.com/csharrison/aggregate-reporting-api) aggregates browsing data for multiple sites and multiple users in a single report, while preserving privacy by only allowing aggregate reporting on things that a lot of different people did.
+Both report types can be used simultaneously: they're complementary. 
 
-Other companies have been investigating similar ideas, such as Facebook's [Cross-Browser Anonymous Conversion Reporting](https://github.com/w3c/web-advertising/blob/master/cross-browser-anonymous-conversion-reporting.md), Apple's [Ad Click Attribution API](https://webkit.org/blog/8943/privacy-preserving-ad-click-attribution-for-the-web/) and Brave's [ad conversion attribution](https://github.com/brave/brave-browser/issues/6536).
+[Introduction to Attribution Reporting](https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting-introduction/#status) explains more about the status of these features and how to try this API.
 
 ### Select ads
 
@@ -109,15 +128,17 @@ There are many ways to make ads relevant to the user, including the following:
 + **Remarketing**: Advertise to people who've already visited your site, while they are not on your site. For example, 'Show this ad for discount wool to people who visited your store and left knitting items in their shopping cart—while they're visiting craft sites.'
 + **Interest-based**: Select ads based on a user's browsing history. For example, 'Show this ad to users whose browsing behaviour indicates they might be interested in knitting'.
 
-First-party-data and contextual ad selection can be achieved without knowing anything about the user other than their activity within a site. These techniques don't require cross-site tracking. 
+First-party-data and contextual ad selection can be achieved without knowing anything about the user other than their activity within a site. These techniques don't require cross-site tracking.
 
 [Remarketing](#remarketing) is usually done by using cookies or some other way to recognize people across websites: adding users to lists and then selecting specific ads to show them.
 
 Interest-based ad selection currently uses cookies to track user behaviour across as many sites as possible. Many people are concerned about the privacy implications of ad selection. The Privacy Sandbox proposes two alternatives, for remarketing and for interest-based selection:
 
-* [TURTLEDOVE](https://github.com/michaelkleber/turtledove): **for remarketing**.<br>The API enables the final ad "auction" to choose the most relevant ads to be moved to the browser. The API leverages information which is only stored in the user's browser itself, about advertisers the user had previously expressed an interest in, along with information about the current page. Two requests are sent for ads: one to retrieve an ad based on contextual data, and one to retrieve an ad based on an advertiser-defined interest. The browser has the responsibility of ensuring these requests are independent and *uncorrelated* so they can't be linked together to let an ad network know that the requests are from the same person. An "auction" is then conducted by the browser to choose the most relevant ad, using JavaScript code provided by the advertiser. This code *can only be used to choose between ads*: it cannot make network requests, or access the DOM or external state.
+* [FLEDGE](https://github.com/WICG/turtledove/blob/main/FLEDGE.md): for **remarketing use cases**.<br> 
+The API is designed so it cannot be used by third parties to track user browsing behaviour: the user's browser, not the advertiser or ad tech platform, stores advertiser-defined interest groups that the user's browser is associated with. The user's browser combines interest group data with ad buyer/seller data and business logic to conduct an "auction" locally on the user's device to select an ad, rather than sharing data with a third party.
 
-* [FLoC](https://github.com/jkarlin/floc): **for interest-based audiences**.<br>The API generates clusters of similar people, known as cohorts or "flocks". Data is generated locally on the user's browser, not by a third party. The browser shares the generated flock data, but this cannot be used to identify or track individual users. This enables companies to select ads based on the behavior of people with similar browsing behaviour, while preserving privacy.
+* [Topics API](https://github.com/jkarlin/topics): for **interest-based audiences**.<br>
+Enable interest-based advertising, without having to resort to tracking the sites a user visits. The API proposes using machine learning to infer topics from hostnames, and a JavaScript API that returns coarse-grained topics a user might currently be interested in, based on the hostnames of sites recently visited.
 
 
 ### Combat fingerprinting
@@ -126,7 +147,7 @@ Interest-based ad selection currently uses cookies to track user behaviour acros
 
 Browsers have taken steps to [deprecate third-party cookies](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html), but techniques to identify and track the behaviour of individual users, known as fingerprinting, have continued to evolve. Fingerprinting uses mechanisms that users aren't aware of and can't control.
 
-* The [Privacy Budget](https://github.com/bslassey/privacy-budget) proposal aims to limit the potential for fingerprinting by identifying how much fingerprint data is exposed by JavaScript APIs or other 'surfaces' (such as HTTP request headers) and setting a limit on how much of this data can be accessed. 
+* The [Privacy Budget](https://github.com/bslassey/privacy-budget) proposal aims to limit the potential for fingerprinting by identifying how much fingerprint data is exposed by JavaScript APIs or other 'surfaces' (such as HTTP request headers) and setting a limit on how much of this data can be accessed.
 
 * Fingerprinting surfaces such as the [User-Agent](https://github.com/WICG/ua-client-hints) header will be reduced in scope, and the data made available by alternative mechanisms such as [Client Hints](https://wicg.github.io/ua-client-hints/) will be subject to Privacy Budget limits. Other surfaces, such as the [device orientation](https://bugs.chromium.org/p/chromium/issues/detail?id=1018180) and [battery-level](https://bugs.chromium.org/p/chromium/issues/detail?id=661792) APIs, will be updated to keep the information exposed to a minimum.
 
@@ -134,15 +155,25 @@ Browsers have taken steps to [deprecate third-party cookies](https://blog.chromi
 
 **Goal:** Control access to IP addresses to reduce covert fingerprinting, and allow sites to opt out of seeing IP addresses in order to not consume [privacy budget](https://github.com/bslassey/privacy-budget).
 
-A user's IP address is the public 'address' of their computer on the internet, which in most cases is dynamically assigned by the network through which they connect to the internet. However, even dynamic IP addresses may remain stable over a significant period of time. Not surprisingly, this means that IP addresses are a significant source of fingerprint data. 
+A user's IP address is the public 'address' of their computer on the internet, which in most cases is dynamically assigned by the network through which they connect to the internet. However, even dynamic IP addresses may remain stable over a significant period of time. Not surprisingly, this means that IP addresses are a significant source of fingerprint data.
 
-* The [Willful IP Blindness](https://github.com/bslassey/ip-blindness) proposal is an attempt to provide a privacy-preserving approach that avoids consuming privacy budget.
+The [Gnatcatcher](https://github.com/bslassey/ip-blindness) proposal is an attempt to provide a 
+privacy-preserving approach that avoids consuming privacy budget, while ensuring that sites 
+requiring access to IP addresses for legitimate purposes such as abuse prevention can do so, subject 
+to certification and auditing.
+
+There are two parts to the proposal: 
+* [**Willful IP Blindness**](https://github.com/bslassey/ip-blindness/blob/master/willful_ip_blindness.md) 
+provides a way for websites to let browsers know they are not connecting IP addresses with users. 
+* [**Near-path NAT**](https://github.com/bslassey/ip-blindness/blob/master/near_path_nat.md) allows 
+groups of users to send their traffic through the same privatizing server, effectively hiding their 
+IP addresses from a site host. 
 
 ### Combat spam, fraud and denial-of-service attacks
 
 **Goal:** Verify user authenticity without fingerprinting.
 
-Anti-fraud protection is crucial for keeping users safe, and to ensure that advertisers and site owners can get accurate ad performance measurements. Advertisers and site owners must be able to distinguish between malicious bots and authentic users. If advertisers can't reliably tell which ad clicks are from real humans, they spend less, so site publishers get less revenue. Many third party services currently use techniques such as [device fingerprinting](#fingerprinting) to combat fraud. 
+Anti-fraud protection is crucial for keeping users safe, and to ensure that advertisers and site owners can get accurate ad performance measurements. Advertisers and site owners must be able to distinguish between malicious bots and authentic users. If advertisers can't reliably tell which ad clicks are from real humans, they spend less, so site publishers get less revenue. Many third party services currently use techniques such as [device fingerprinting](#glossary-fingerprinting) to combat fraud.
 
 Unfortunately, the techniques used to identify legitimate users and block spammers, fraudsters, and bots work in ways similar to [fingerprinting](#glossary-fingerprinting) techniques that damage privacy.
 
@@ -165,22 +196,29 @@ The Privacy Sandbox initiative needs your support. The API proposal [explainers]
 
 * [Privacy Budget](https://github.com/bslassey/privacy-budget)
 * [Trust Token API](https://github.com/dvorak42/trust-token-api)
-* [Willful IP Blindness](https://github.com/bslassey/ip-blindness)
+* [Gnatcatcher](https://github.com/bslassey/ip-blindness)
 * [Aggregated Reporting API](https://github.com/csharrison/aggregate-reporting-api)
 * [Conversion measurement](https://github.com/csharrison/conversion-measurement-api)
-* [Federated Learning of Cohorts](https://github.com/jkarlin/floc)
-* [TURTLEDOVE](https://github.com/michaelkleber/turtledove)
+* [Topics API](https://github.com/jkarlin/topics)
+* [FLEDGE](https://github.com/WICG/turtledove/blob/main/FLEDGE.md)
 
 [A Potential Privacy Model for the Web](https://github.com/michaelkleber/privacy-model) sets out the core principles underlying the APIs.
 
 
 ### The Privacy Sandbox
 
-* [The Privacy Sandbox](https://www.chromium.org/Home/chromium-privacy/privacy-sandbox)
-* Privacy Sandbox overview: [Building a more private web](https://www.blog.google/products/chrome/building-a-more-private-web/)
-* Google AI Blog: [Federated Learning: Collaborative Machine Learning without Centralized Training Data](https://ai.googleblog.com/2017/04/federated-learning-collaborative.html)
+* Technical overview: [The Privacy Sandbox](https://www.chromium.org/Home/chromium-privacy/privacy-sandbox)
+* Non-technical overview: [privacysandbox.com](https://www.privacysandbox.com)
+* Project principles: [Building a more private web](https://www.blog.google/products/chrome/building-a-more-private-web/)
 * [The future of third-party cookies](https://blog.chromium.org/2019/10/developers-get-ready-for-new.html)
 
+
+### Discussion and participation
+
+* [How to participate in the Privacy Sandbox initiative](https://developer.chrome.com/blog/privacy-sandbox-participate/)  
+* [Progress update on the Privacy Sandbox initiative](https://developer.chrome.com/blog/privacy-sandbox-update-2021-jan/)  
+* [Privacy Sandbox Developer Support](https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support): join discussions or ask questions. 
+
 ### Use cases, policies, and requirements {: #use-cases-policies-requirements }
 
 * [Advertising Use Cases](https://github.com/w3c/web-advertising/blob/master/support_for_advertising_use_cases.md)
@@ -255,9 +293,11 @@ View of an ad. (See also [click-through rate](#glossary-ctr).)
 A measure of anonymity within a data set. If you have _k_ anonymity, you can't be distinguished from _k-1_ other individuals in the data set. In other words, _k_ individuals have the same information (including you).
 
 ### Nonce
+
 Arbitrary number used once only in cryptographic communication.
 
 ### Origin
+
 The origin of a request, including the server name but no path information. For example: `https://web.dev`.
 
 ### Passive surface {: #glossary-passive-surface }
diff --git a/src/site/content/en/blog/disable-mouse-acceleration/index.md b/src/site/content/en/blog/disable-mouse-acceleration/index.md
new file mode 100644
index 00000000000..d2823eecd4f
--- /dev/null
+++ b/src/site/content/en/blog/disable-mouse-acceleration/index.md
@@ -0,0 +1,182 @@
+---
+title: Disable mouse acceleration to provide a better FPS gaming experience
+subhead: |
+  Web apps can now disable mouse acceleration when capturing pointer events.
+authors:
+  - beaufortfrancois
+date: 2020-11-26
+hero: image/admin/8cpTXMJGUfcdNXLc6obE.jpg
+thumbnail: image/admin/kA7qbVPt0ovuNzReFanO.jpg
+alt: Gamer girl is playing FPS online video game on her computer
+description: |
+  Web apps can now disable mouse acceleration when capturing pointer events.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - games
+  - devices
+feedback:
+  - api
+---
+
+Accelerated movement is an ergonomic feature when using a mouse or trackpad to
+move the pointer on screen. It allows precise movement by moving slowly while
+also allowing the pointer to cross the entire screen with a quick short motion.
+Specifically, for the same physical distance that you move the mouse, the
+pointer on screen travels further if the distance was traveled faster.
+
+Operating systems enable mouse acceleration by default. For some [first-party
+perspective] games, commonly first-person shooters (FPS), raw mouse input data
+is used to control camera rotation without an acceleration adjustment. The same
+physical motion, slow or fast, results in the same rotation. This results in a
+better gaming experience and higher accuracy according to professional gamers.
+
+<figure>
+  {% Img src="image/admin/4x9YZ7nC3SJMN9FI46zN.png", alt="Screenshot of the pointer motion control in Windows 10 settings.", width="800", height="260" %}
+  <figcaption>Pointer motion control in Windows 10 settings.</figcaption>
+</figure>
+
+Starting in Chrome 88, web apps can switch back and forth between accelerated
+and non-accelerated mouse movement data thanks to the [updated Pointer Lock
+API].
+
+Web-based gaming platforms such as [Google Stadia] and [Nvidia GeForce Now]
+already use these new capabilities to please FPS gamers.
+
+{% BrowserCompat 'api.Element.requestPointerLock' %}
+
+## Using the API {: #use }
+
+### Request a pointer lock {: #request }
+
+A pointer lock is the canonical term for when a desktop application hides the
+pointer icon and interprets mouse motion for something else, e.g. looking around
+in a 3D world.
+
+The  `movementX` and `movementY` attributes from the `mousemove` document events
+tell you how much the mouse pointer moved since the last move event. However,
+those are not updated when the pointer moves outside of the web page.
+
+```js
+document.addEventListener("mousemove", (event) => {
+  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
+});
+```
+
+Capturing the mouse pointer (or requesting a pointer lock) allows you to not
+worry about the pointer moving outside anymore. This is especially useful for
+immersive web games. When the pointer is locked, all mouse events go to the
+target element of the pointer lock.
+
+Call `requestPointerLock()` on the target element to request a pointer lock, and
+listen to `pointerlockchange` and `pointerlockerror` events to monitor pointer
+lock changes.
+
+```js
+const myTargetElement = document.body;
+
+// Call this function to request a pointer lock.
+function requestPointerLock() {
+  myTargetElement.requestPointerLock();
+}
+
+document.addEventListener("pointerlockchange", () => {
+  if (document.pointerLockElement) {
+    console.log(`pointer is locked on ${document.pointerLockElement}`);
+  } else {
+    console.log("pointer is unlocked");
+  }
+});
+
+document.addEventListener("pointerlockerror", () => {
+  console.log("pointer lock error");
+});
+```
+
+### Disable mouse acceleration {: #disable-mouse-acceleration }
+
+Call `requestPointerLock()` with  `{ unadjustedMovement: true }` to disable
+OS-level adjustment for mouse acceleration, and access raw mouse input.
+This way, mouse movement data from `mousemove` events won't include mouse
+acceleration when the pointer is locked.
+
+Use the new returned promise from `requestPointerLock()` to know if the request
+was successful.
+
+```js
+function requestPointerLockWithUnadjustedMovement() {
+  const promise = myTargetElement.requestPointerLock({
+    unadjustedMovement: true,
+  });
+
+  if (!promise) {
+    console.log("disabling mouse acceleration is not supported");
+    return;
+  }
+
+  return promise
+    .then(() => console.log("pointer is locked"))
+    .catch((error) => {
+      if (error.name === "NotSupportedError") {
+        // Some platforms may not support unadjusted movement.
+        // You can request again a regular pointer lock.
+        return myTargetElement.requestPointerLock();
+      }
+    });
+}
+```
+
+It is possible to toggle between accelerated and non-accelerated mouse movement
+data without releasing the pointer lock. Simply request the pointer lock again
+with the desired option. If that request fails, the original lock will remain
+intact and the returned promise will reject. No pointer lock events will fire
+for a failed change request.
+
+### Browser support {: #browser-support }
+
+The Pointer Lock API is [well supported across browsers]. However Chromium-based
+browsers (e.g. Chrome, Edge, etc.) are the only ones to support disabling
+OS-level adjustment for mouse acceleration as of October 2020.
+See MDN's [Browser compatibility] table for updates.
+
+### Operating system support {: #os-support }
+
+Disabling OS-level adjustment for mouse acceleration is supported on ChromeOS,
+macOS Catalina 10.15.1, and Windows. Linux will follow.
+
+## Sample  {: #sample }
+
+You can play with the Pointer Lock API by running the [sample] on Glitch. Be
+sure to [check out the source code].
+
+{% Glitch { id: 'unadjusted-movement', path: 'script.js' } %}
+
+## Helpful links {: #helpful }
+
+- [Explainer](https://github.com/slightlyoff/unadjusted_pointer_lock_explainer)
+- [Specification PR](https://github.com/w3c/pointerlock/pull/49)
+- [GitHub repository](https://github.com/w3c/pointerlock)
+- [ChromeStatus entry](https://www.chromestatus.com/feature/5723553087356928)
+- [Chrome tracking bug](https://bugs.chromium.org/p/chromium/issues/detail?id=982379)
+- [Intent to ship](https://groups.google.com/a/chromium.org/d/msg/blink-dev/cQn7OwcMQ64/OWmA9KMKBQAJ)
+- [Mozilla's position](https://github.com/mozilla/standards-positions/issues/448)
+- [WebKit's position](https://lists.webkit.org/pipermail/webkit-dev/2020-October/031473.html)
+
+## Acknowledgements
+
+Thanks to [James Hollyer], [Thomas Steiner], [Joe Medley], [Kayce Basques], and
+[Vincent Scheib] for their reviews of this article.
+
+[first-party perspective]: https://en.wikipedia.org/wiki/First-person_(video_games)
+[updated Pointer Lock API]: https://github.com/w3c/pointerlock/pull/49
+[Google Stadia]: https://en.wikipedia.org/wiki/Google_Stadia
+[Nvidia GeForce Now]: https://en.wikipedia.org/wiki/GeForce_Now
+[well supported across browsers]: https://caniuse.com/?search=pointerlock
+[Browser compatibility]: https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API#Browser_compatibility
+[sample]: https://unadjusted-movement.glitch.me/
+[check out the source code]: https://glitch.com/edit/#!/unadjusted-movement?path=script.js
+[James Hollyer]: https://github.com/jameshollyergoogle
+[Thomas Steiner]: https://github.com/tomayac
+[Joe Medley]: https://github.com/jpmedley
+[Kayce Basques]: https://github.com/kaycebasques
+[Vincent Scheib]: https://github.com/scheib
diff --git a/src/site/content/en/blog/disallow-synchronous-xhr/hero.jpg b/src/site/content/en/blog/disallow-synchronous-xhr/hero.jpg
deleted file mode 100644
index 1b68df35b33..00000000000
Binary files a/src/site/content/en/blog/disallow-synchronous-xhr/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/disallow-synchronous-xhr/index.md b/src/site/content/en/blog/disallow-synchronous-xhr/index.md
index 5b012e323ce..4c88887438c 100644
--- a/src/site/content/en/blog/disallow-synchronous-xhr/index.md
+++ b/src/site/content/en/blog/disallow-synchronous-xhr/index.md
@@ -11,11 +11,11 @@ authors:
   - joemedley
 date: 2019-12-18
 updated: 2020-07-17
-hero: hero.jpg
+hero: image/admin/DF5rqLYGcuCpQZv1vXKS.jpg
 alt: Roadblock barricades
 tags:
   - blog
-  - deprecation
+  # - deprecation
 ---
 
 It's common for a page or app to have unsubmitted analytics or other data at the
@@ -50,19 +50,19 @@ use the  `AllowSyncXHRInPageDismissal` policy flag, which ends at the same time.
 
 Regardless of how you send data back to the server, it's best to avoid waiting
 until page unload to send all the data at once. Aside from creating a bad user
-experience, you risk data loss if something goes wrong.  Unload events [often
-don't fire on mobile
+experience, unload is unreliable on modern browsers and risks data loss if
+something goes wrong. Specifically, unload events [often don't fire on mobile
 browsers](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/)
 because there are [many ways to
-close](https://developers.google.com/web/updates/2018/07/page-lifecycle-api) a
-tab or browser on mobile operating systems without the `unload` event firing. With
-`XMLHttpRequest()`, using small payloads was a choice. Now it's a requirement. Both of
-its alternatives have an upload limit of 64&nbsp;KB per context, as required
-by the specification.
+close](https://developer.chrome.com/blog/page-lifecycle-api/) a
+tab or browser on mobile operating systems without the `unload` event firing.
+With `XMLHttpRequest()`, using small payloads was a choice. Now it's a
+requirement. Both of its alternatives have an upload limit of 64&nbsp;KB per
+context, as required by the specification.
 
 ### Fetch keepalive
 
-The [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+The [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API)
 provides a robust means of dealing with server interactions and [a consistent
 interface](https://fetch.spec.whatwg.org/#preface) for use across different
 platform APIs. Among its options is `keepalive`, which ensures that a request
@@ -85,7 +85,7 @@ way of the page's unloading, I chose not to do anything with it.
 
 ### SendBeacon()
 
-[`SendBeacon()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)
+[`SendBeacon()`](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)
 actually uses the Fetch API under the hood, which is why it has the same
 64&nbsp;KB payload limitation and why it also ensures that a request continues
 after a page unload. Its primary advantage is its simplicity. It lets you
@@ -100,7 +100,7 @@ window.addEventListener('unload', {
 ## Conclusion
 
 With the [increased availability of
-`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Browser_compatibility)
+`fetch()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Browser_compatibility)
 across browsers, `XMLHttpRequest()` will hopefully be removed
 from the web platform at some point. Browser vendors agree it should be removed, but it will
 take time. Deprecating one of its worst use cases is a first step that improves
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-1.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-1.png
deleted file mode 100755
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-1.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-2.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-2.png
deleted file mode 100755
index 4defa4c6d8d..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-2.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-3.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-3.png
deleted file mode 100755
index 3d22a513038..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-3.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-4.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-4.png
deleted file mode 100755
index bf07e754349..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-4.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-5.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-5.png
deleted file mode 100755
index 2331df9b1fa..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-5.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-6.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-6.png
deleted file mode 100755
index 5d79b78b9d5..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-6.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-7.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-7.png
deleted file mode 100755
index 76456fb9ed0..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-7.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-8.png b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-8.png
deleted file mode 100755
index 336d329887a..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/discover-performance-opportunities-with-lighthouse-8.png and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/hero.jpg b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/hero.jpg
deleted file mode 100644
index 5984586d3cb..00000000000
Binary files a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/index.md b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/index.md
index 53f2ee063b4..4cee7a04602 100644
--- a/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/index.md
+++ b/src/site/content/en/blog/discover-performance-opportunities-with-lighthouse/index.md
@@ -9,13 +9,14 @@ description: |
   performance. Lighthouse gives you a report on how the page did. The report
   provides a score for each metric and a list of opportunities which, if you
   implement them, should make the page load faster.
+alt: Chrome DevTools showing completed Lighthouse performance audit.
 tags:
     - blog
     - performance
     - devtools
 ---
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) is a tool that
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is a tool that
 helps you measure and find ways to improve a page's performance. Here's the
 general workflow for how you use Lighthouse:
 
@@ -50,14 +51,14 @@ If you have Chrome, then you have DevTools.
 1. In Chrome, go to the page that you want to audit.
 {% Instruction 'devtools', 'ol' %}
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-1.png" alt="DevTools opened and docked to the right hand side of the screen.">
+{% Img src="image/admin/yfEKnxDJWT3JY6FWNiOZ.png", alt="DevTools opened and docked to the right hand side of the screen.", width="800", height="475" %}
 
 Click the **Audits** tab. If you don't see this tab, click the &raquo; symbol
 and then select **Audits** from the list. Lighthouse is the
 engine that powers the **Audits** panel. That's why you see an image of a
 lighthouse.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-2.png" alt="DevTools opened to the Lighthouse audits panel.">
+{% Img src="image/admin/ugJI2r5k9y3puAuCX66f.png", alt="DevTools opened to the Lighthouse audits panel.", width="800", height="475" %}
 
 1. Make sure the **Mobile** radio button is selected. When Lighthouse
     audits your page, it will simulate a mobile device's viewport and user
@@ -76,7 +77,7 @@ lighthouse.
     how first-time visitors experience the page.
 1. Click **Run Audits**. After 5 to 10 seconds, Lighthouse shows you a report.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-3.png" alt="DevTools showing a Lighthouse audit results report.">
+{% Img src="image/admin/wy0Zq7fFXXSBeGwK8OgP.png", alt="DevTools showing a Lighthouse audit results report.", width="800", height="475" %}
 
 {% Aside %}
 You can set the configuration options to whatever makes the most sense for
@@ -97,29 +98,29 @@ configuration.
 
 The top-right of your report lists your overall performance score. 100 is a
 perfect score. Below the overall score are the metrics scores.
-[Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
+[Lighthouse v3 Scoring Guide](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/)
 explains how each metric score contributes to the overall score.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-4.png" alt="Lighthouse metrics scores showing green, passing scores, and yellow, warning scores.">
+{% Img src="image/admin/3kKMRoc1EY2kHDy8NIHi.png", alt="Lighthouse metrics scores showing green, passing scores, and yellow, warning scores.", width="800", height="504" %}
 
 Hover over a metric to learn more about it. Click **Learn more** to read
 documentation about it.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-5.png" alt="">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jnSx7PT4NXRW6c88vVjj.png", alt="", width="800", height="504" %}
 
 Below your metrics scores you see screenshots of how the page looked while it
 loaded.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-6.png" alt="DevTools' filmstrip view of a page loading.">
+{% Img src="image/admin/hDyQRm4B1K1dRciNTvC1.png", alt="DevTools' filmstrip view of a page loading.", width="800", height="504" %}
 
 Below the screenshots you see opportunities for improving the page's
 performance.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-7.png" alt="">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xn9EDUNnxVhdD5FcfAMA.png", alt="", width="800", height="504" %}
 
 Click an opportunity to learn more about it.
 
-<img class="w-screenshot w-screenshot--filled" src="./discover-performance-opportunities-with-lighthouse-8.png" alt="An expanded audit titled Defer offscreen images shows a number of image paths that can be optimized.">
+{% Img src="image/admin/5dHwPPWIho3SckhvsGHt.png", alt="An expanded audit titled Defer offscreen images shows a number of image paths that can be optimized.", width="800", height="652" %}
 
 ## Next steps
 
diff --git a/src/site/content/en/blog/dom-order-matters/index.md b/src/site/content/en/blog/dom-order-matters/index.md
new file mode 100644
index 00000000000..681cf463719
--- /dev/null
+++ b/src/site/content/en/blog/dom-order-matters/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: DOM Order Matters
+subhead: The importance of the default DOM order
+description: |
+  The importance of the default DOM order
+authors:
+  - megginkearney
+  - dgash
+  - robdodson
+date: 2016-10-04
+updated: 2019-06-08
+---
+
+Working with native elements is a great way to learn about focus behavior
+because they are automatically inserted into the tab order based on their
+position in the DOM.
+
+For example, you might have three button elements, one after the other in the
+DOM. Pressing `Tab` focuses each button in order. Try clicking the code block
+below to move the focus navigation start point, then press `Tab` to move focus
+through the buttons.
+
+```html
+<button>I Should</button>
+<button>Be Focused</button>
+<button>Last!</button>
+```
+
+<button>I Should</button>
+<button>Be Focused</button>
+<button>Last!</button>
+
+However, it's important to note that, using CSS, it's possible to have things
+exist in one order in the DOM but appear in a different order on screen. For
+example, if you use a CSS property like `float` to move one button to the right,
+the buttons appear in a different order on screen. But, because their order in
+the DOM remains the same, so does their tab order. When the user tabs through
+the page, the buttons gain focus in a non-intuitive order. Try clicking on the
+code block below to move the focus navigation start point, then press `Tab` to
+move focus through the buttons.
+
+```html
+<button style="float: right">I Should</button>
+<button>Be Focused</button>
+<button>Last!</button>
+```
+
+<button style="float: right;">I Should</button>
+<button>Be Focused</button>
+<button>Last!</button>
+
+Be careful when changing the visual position of elements on screen using CSS.
+This can cause the tab order to jump around, seemingly at random, confusing
+users who rely on the keyboard. For this reason, the Web AIM checklist states
+[in section 1.3.2](https://webaim.org/standards/wcag/checklist#sc1.3.2)
+that the reading and navigation order, as determined by code order, should be
+logical and intuitive.
+
+As a rule, try tabbing through your pages every so often just to make sure you
+haven't accidentally messed up the tab order. It's a good habit to adopt, and
+one that doesn't require much effort.
+
+## Offscreen content
+What if you have content that isn't currently displayed, yet still needs to be
+in the DOM, such as a responsive side-nav? When you have elements like this that
+receive focus when they're off screen, it can seem as if the focus is
+disappearing and reappearing as the user tabs through the page &mdash; clearly
+an undesirable effect. Ideally, we should prevent the panel from gaining focus
+when it's off screen, and only allow it to be focused when the user can interact
+with it.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rFoyZjpWlErRqMfCuDed.png", alt="An offscreen slide-in panel can steal focus.", width="640", height="358" %}
+</figure>
+
+Sometimes you need to do a bit of detective work to figure out where focus has
+gone. You can use `document.activeElement` from the console to figure out which
+element is currently focused.
+
+Once you know which off screen element is being focused, you can set it to
+`display: none` or `visibility: hidden`, and then set it back to `display:
+block` or `visibility: visible` before showing it to the user.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TN3xE2fdhhhGReCgKeoD.png", alt="A slide-in panel set to display none.", width="640", height="358" %}
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hckTc1M9mB618hduv4yy.png", alt="A slide-in panel set to display block.", width="640", height="359" %}
+</figure>
+
+In general, we encourage developers to tab through their sites before each
+publish to see that the tab order doesn't disappear or jump out of a logical
+sequence. If it does, you should make sure you are appropriately hiding
+offscreen content with `display: none` or `visibility: hidden`, or that you
+rearrange elements' physical positions in the DOM so they are in a logical
+order.
+
diff --git a/src/site/content/en/blog/doodles-gamepad/index.md b/src/site/content/en/blog/doodles-gamepad/index.md
new file mode 100644
index 00000000000..270410b031b
--- /dev/null
+++ b/src/site/content/en/blog/doodles-gamepad/index.md
@@ -0,0 +1,407 @@
+---
+layout: post
+title: Jumping the hurdles with the Gamepad API
+date: 2012-08-06
+authors:
+  - marcinwichary
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+## Introduction
+
+Let the novices keep their keyboards for adventure games, their precious multi-touchy-feely fingertips for fruit cutting, and their fancy newfangled motion sensors for pretending they can dance like Michael Jackson. (Newsflash: They can't.) But you're different. You're better. You're a pro. For you, the games begin and end with a gamepad in your hands.
+
+But wait. Aren't you out of luck if you want to support a gamepad in your web app? Not anymore. The brand new [Gamepad API](http://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html) comes to the rescue, allowing you to use JavaScript to read the state of any gamepad controller attached to your computer. It's so fresh off the presses, that it only landed in Chrome 21 last week – and it's also on the verge of being supported in Firefox (currently available in a [special build](http://people.mozilla.com/~tmielczarek/gamepad/)).
+
+That turned out to be pretty great timing, because we get a chance to use it recently in the [Hurdles 2012 Google doodle](http://www.google.com/doodles/hurdles-2012). This article will briefly explain how we added Gamepad API to the doodle, and what we learned during the process.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/T4oshCTuLhNguN14Vuht.png", alt="Hurdles 2012 Google doodle", width="522", height="207" %}
+<figcaption>Hurdles 2012 Google doodle</figcaption>
+</figure>
+
+## Gamepad tester
+
+Ephemeral as they are, interactive doodles tend to be pretty complex under the hood. So that it's easier to demonstrate what we're talking about, we took the gamepad code from the doodle, and put together a simple gamepad tester. You can use it to see whether your USB gamepad works correctly – and also look under the hood to examine how it's done.
+
+## What browsers support it today?
+
+{% BrowserCompat 'api.Gamepad' %}
+
+## What gamepads can be used?
+
+Generally, any modern gamepad that is supported by your system natively should work. We tested various gamepads from off-brand USB controllers on a PC, through PlayStation 2 gamepads connected via a dongle to a Mac, all the way to Bluetooth controllers paired with a Chrome OS notebook.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/DZxDnKUwgi5p28CJTX5x.jpg", alt="Gamepads", width="300", height="400" %}
+<figcaption>Gamepads</figcaption>
+</figure>
+
+This is a photo of some controllers we used for testing our doodle – "Yes, mom, that really is what I do at work." If your controller doesn't work, or if the controls are mapped incorrectly, please [file a bug against Chrome](https://code.google.com/p/chromium/issues/entry?template=Defect%20report%20from%20user&cc=scottmg@chromium.org&labels=Type-Feature,Pri-2,Area-Internals,Feature-Gamepad) or [Firefox](https://bugzilla.mozilla.org/) . (Please test in the absolutely newest version of each browser to make sure it's not already fixed.)
+
+{% Aside %}
+Some gamepads have a switch at the back telling them to use a different mode of operation. Toggling that might make them work better.
+{% endAside %}
+
+{% Aside %}
+Some gamepads have a compatibility mode switch up front that makes four-axis d-pad and the left analogue stick switch places (logically).
+{% endAside %}
+
+## Feature Detecting the Gamepad API<
+
+Easy enough in Chrome:
+
+```js
+var gamepadSupportAvailable = !!navigator.webkitGetGamepads || !!navigator.webkitGamepads;
+```
+
+It does not seem possible to detect this in Firefox just yet – everything is event-based, and all the event handlers need to be attached to window, which prevents a typical technique of detecting event handlers from working.
+
+But we're sure that is temporary. The ever-so-awesome [Modernizr](http://modernizr.com/) already tells you about the Gamepad API, so we recommend this for all your current and future detecting needs:
+
+```js
+var gamepadSupportAvailable = Modernizr.gamepads;
+```
+
+## Finding out about connected gamepads
+
+Even if you connect the gamepad, it won't manifest itself in any way unless the user presses any of its buttons first. This is to prevent fingerprinting, although proves to be a bit of a challenge for user experience: you can't ask the user to press the button or provide gamepad-specific instructions because you have no idea whether they connected their controller.
+
+Once you clear that hurdle (sorry…), however, more await.
+
+### Polling
+
+Chrome's implementation of the API exposes a function – `navigator.webkitGetGamepads()` – you can use to get a list of all the gamepads currently plugged into to the system, alongside with their current state (buttons + sticks). The first connected gamepad will be returned as the first entry in the array, and so on.
+
+(This function call just recently replaced an array you could access directly – `navigator.webkitGamepads[]`. As of early August 2012, accessing this array is still necessary in Chrome 21, while the function call works in Chrome 22 and newer. Moving forward, the function call is the recommended way to use the API, and will slowly trickle to all the installed Chrome browsers.)
+
+The so-far-implemented part of the spec requires you to continuously check the state of connected gamepads (and compare it to the previous one if necessary), instead of firing events when things change. We relied on [requestAnimationFrame()](http://www.html5rocks.com/tutorials/speed/animations/) to set up polling in the most efficient and battery-friendly way. For our doodle, even though we already have a `requestAnimationFrame()` loop to support animations, we created a second completely separate one – it was simpler to code and shouldn't affect performance in any way.
+
+Here is the code from the tester:
+
+```js
+/**
+ * Starts a polling loop to check for gamepad state.
+ */
+startPolling: function() {
+    // Don't accidentally start a second loop, man.
+    if (!gamepadSupport.ticking) {
+    gamepadSupport.ticking = true;
+    gamepadSupport.tick();
+    }
+},
+
+/**
+ * Stops a polling loop by setting a flag which will prevent the next
+ * requestAnimationFrame() from being scheduled.
+ */
+stopPolling: function() {
+    gamepadSupport.ticking = false;
+},
+
+/**
+ * A function called with each requestAnimationFrame(). Polls the gamepad
+ * status and schedules another poll.
+ */
+tick: function() {
+    gamepadSupport.pollStatus();
+    gamepadSupport.scheduleNextTick();
+},
+
+scheduleNextTick: function() {
+    // Only schedule the next frame if we haven't decided to stop via
+    // stopPolling() before.
+    if (gamepadSupport.ticking) {
+    if (window.requestAnimationFrame) {
+        window.requestAnimationFrame(gamepadSupport.tick);
+    } else if (window.mozRequestAnimationFrame) {
+        window.mozRequestAnimationFrame(gamepadSupport.tick);
+    } else if (window.webkitRequestAnimationFrame) {
+        window.webkitRequestAnimationFrame(gamepadSupport.tick);
+    }
+    // Note lack of setTimeout since all the browsers that support
+    // Gamepad API are already supporting requestAnimationFrame().
+    }
+},
+
+/**
+ * Checks for the gamepad status. Monitors the necessary data and notices
+ * the differences from previous state (buttons for Chrome/Firefox,
+ * new connects/disconnects for Chrome). If differences are noticed, asks
+ * to update the display accordingly. Should run as close to 60 frames per
+ * second as possible.
+ */
+pollStatus: function() {
+    // (Code goes here.)
+},
+```
+
+If you only care about one gamepad, getting its data might be as simple as:
+
+```js
+var gamepad = navigator.webkitGetGamepads && navigator.webkitGetGamepads()[0];
+```
+/
+If you want to be a bit more clever, or support more than one player simultaneously, you will need to add a few more lines of code to react to more complex scenarious (two or more gamepads connected, some of them getting disconnected mid-way, etc.). You can look at the [source code](https://github.com/html5rocks/www.html5rocks.com/blob/master/content/tutorials/doodles/gamepad/static/gamepad-tester/gamepad.js#L187) of our tester, function `pollGamepads()`, for one approach on how to solve this.
+
+### Events
+
+Firefox uses an alternative, better way described in the Gamepad API spec. Instead of asking you to poll, it exposes two events – `MozGamepadConnected` and `MozGamepadDisconnected` – which are fired whenever a gamepad gets plugged in (or, more precisely, plugged in and "announced" by pressing any of its buttons) or unplugged. The gamepad object that will continue to reflect its future state is passed as the `.gamepad` parameter of the event object.
+
+From the tester source code:
+
+```js
+/**
+ * React to the gamepad being connected. Today, this will only be executed
+ * on Firefox.
+ */
+onGamepadConnect: function(event) {
+    // Add the new gamepad on the list of gamepads to look after.
+    gamepadSupport.gamepads.push(event.gamepad);
+
+    // Start the polling loop to monitor button changes.
+    gamepadSupport.startPolling();
+
+    // Ask the tester to update the screen to show more gamepads.
+    tester.updateGamepads(gamepadSupport.gamepads);
+},
+```
+
+### Summary
+
+In the end, our initialization function in the tester, supporting both approaches, looks like this:
+
+```js
+/**
+ * Initialize support for Gamepad API.
+ */
+init: function() {
+    // As of writing, it seems impossible to detect Gamepad API support
+    // in Firefox, hence we need to hardcode it in the third clause.
+    // (The preceding two clauses are for Chrome.)
+    var gamepadSupportAvailable = !!navigator.webkitGetGamepads ||
+        !!navigator.webkitGamepads ||
+        (navigator.userAgent.indexOf('Firefox/') != -1);
+
+    if (!gamepadSupportAvailable) {
+    // It doesn't seem Gamepad API is available – show a message telling
+    // the visitor about it.
+    tester.showNotSupported();
+    } else {
+    // Firefox supports the connect/disconnect event, so we attach event
+    // handlers to those.
+    window.addEventListener('MozGamepadConnected',
+                            gamepadSupport.onGamepadConnect, false);
+    window.addEventListener('MozGamepadDisconnected',
+                            gamepadSupport.onGamepadDisconnect, false);
+
+    // Since Chrome only supports polling, we initiate polling loop straight
+    // away. For Firefox, we will only do it if we get a connect event.
+    if (!!navigator.webkitGamepads || !!navigator.webkitGetGamepads) {
+        gamepadSupport.startPolling();
+    }
+    }
+},
+```
+
+## Gamepad info
+
+Every gamepad connected to the system will be represented by an object looking something like this:
+
+```js
+id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vendor: 054c Product: 0268)"
+index: 1
+timestamp: 18395424738498
+buttons: Array[8]
+    0: 0
+    1: 0
+    2: 1
+    3: 0
+    4: 0
+    5: 0
+    6: 0.03291
+    7: 0
+axes: Array[4]
+    0: -0.01176
+    1: 0.01961
+    2: -0.00392
+    3: -0.01176
+```
+
+### Basic info
+
+The top few fields are simple metadata:
+
+- `id`: a textual description of the gamepad
+- `index`: an integer useful to tell different gamepads attached to one computer apart
+- `timestamp`: the timestamp of the last update of the button/axes state (currently only supported in Chrome)
+
+### Buttons and sticks
+
+Today's gamepads are not exactly what your grandpa might have used to save the princess in the wrong castle – they typically have at least sixteen separate buttons (some discrete, some analogue), in addition to two analogue sticks. Gamepad API will tell you about all the buttons and analogue sticks that are reported by the operating system.
+
+Once you get the current state in the gamepad object, you can access the buttons via `.buttons[]` and sticks via `.axes[]` arrays. Here's a visual summary of what they correspond to:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/e0FBSNiQGkWsx45BgIMA.png", alt="Gamepad Diagram", width="800", height="503" %}
+<figcaption>Gamepad Diagram</figcaption>
+</figure>
+
+The spec asks the browser to map first sixteen buttons and four axes to:
+
+```js
+gamepad.BUTTONS = {
+    FACE_1: 0, // Face (main) buttons
+    FACE_2: 1,
+    FACE_3: 2,
+    FACE_4: 3,
+    LEFT_SHOULDER: 4, // Top shoulder buttons
+    RIGHT_SHOULDER: 5,
+    LEFT_SHOULDER_BOTTOM: 6, // Bottom shoulder buttons
+    RIGHT_SHOULDER_BOTTOM: 7,
+    SELECT: 8,
+    START: 9,
+    LEFT_ANALOGUE_STICK: 10, // Analogue sticks (if depressible)
+    RIGHT_ANALOGUE_STICK: 11,
+    PAD_TOP: 12, // Directional (discrete) pad
+    PAD_BOTTOM: 13,
+    PAD_LEFT: 14,
+    PAD_RIGHT: 15
+};
+
+gamepad.AXES = {
+    LEFT_ANALOGUE_HOR: 0,
+    LEFT_ANALOGUE_VERT: 1,
+    RIGHT_ANALOGUE_HOR: 2,
+    RIGHT_ANALOGUE_VERT: 3
+};
+```
+
+The extra buttons and axes will be appended to the ones above. Please note that neither sixteen buttons nor four axes are guaranteed, though – be ready for some of them to simply be undefined.
+
+The buttons can take values from 0.0 (not pressed) to 1.0 (pressed completely). The axes go from -1.0 (completely left or up) through 0.0 (center) to 1.0 (completely right or down).
+
+### Analogue or discrete?
+
+Ostensibly, every button could be an analogue one – this is somewhat common for shoulder buttons, for example. Therefore, it is best to set a threshold rather than just compare it bluntly to 1.00 (what if an analogue button happens to be slightly dirty? It might never reach 1.00). In our doodle we do it this way:
+
+```js
+gamepad.ANALOGUE_BUTTON_THRESHOLD = .5;
+
+gamepad.buttonPressed_ = function(pad, buttonId) {
+    return pad.buttons[buttonId] &&
+            (pad.buttons[buttonId] > gamepad.ANALOGUE_BUTTON_THRESHOLD);
+};
+```
+
+You can do the same to turn analogue sticks into digital joysticks. Sure, there is always the digital pad (d-pad), but your gamepad might not have one. Here's our code to handle that:
+
+```js
+gamepad.AXIS_THRESHOLD = .75;
+
+gamepad.stickMoved_ = function(pad, axisId, negativeDirection) {
+    if (typeof pad.axes[axisId] == 'undefined') {
+    return false;
+    } else if (negativeDirection) {
+    return pad.axes[axisId] < -gamepad.AXIS_THRESHOLD;
+    } else {
+    return pad.axes[axisId] > gamepad.AXIS_THRESHOLD;
+    }
+};
+```
+
+## Button presses and stick movements
+
+### Events
+
+In some cases, like a flight simulator game, continuously checking and reacting to stick positions or button presses makes more sense… but for things like Hurdles 2012 doodle? You might wonder: Why do I need to check for buttons every single frame? Why can't I get events like I do for keyboard or mouse up/down?
+
+Good news is, you can. Bad news is – in the future. It's in the spec, but not implemented in any browser yet.
+
+### Polling
+
+In the meantime, your way out is comparing the current and previous state, and calling functions if you see any difference. For example:
+
+```js
+if (buttonPressed(pad, 0) != buttonPressed(oldPad, 0)) {
+    buttonEvent(0, buttonPressed(pad, 0) ? 'down' : 'up');
+}
+```
+
+{% Aside %}
+Compare timestamps of the current and previously polled gamepad data (the timestamp field). If they're defined (Firefox doesn't support it yet) and identical, it means the state didn't change from the last time you looked at it, and no further work is necessary. From the tester source code:
+{% endAside %}
+
+```js
+for (var i in gamepadSupport.gamepads) {
+    var gamepad = gamepadSupport.gamepads[i];
+
+    // Don't do anything if the current timestamp is the same as previous
+    // one, which means that the state of the gamepad hasn't changed.
+    // This is only supported by Chrome right now, so the first check
+    // makes sure we're not doing anything if the timestamps are empty
+    // or undefined.
+    if (gamepadSupport.prevTimestamps[i] &&
+        (gamepad.timestamp == gamepadSupport.prevTimestamps[i])) {
+    continue;
+    }
+    gamepadSupport.prevTimestamps[i] = gamepad.timestamp;
+
+    gamepadSupport.updateDisplay(i);
+}
+```
+
+### The keyboard-first approach in the Hurdles 2012 doodle
+
+Since without a gamepad, our today's doodle's preferred input method is the keyboard, we decided for the gamepad to emulate it rather closely. This meant three decisions:
+
+1. The doodle only needs three buttons – two for running, and one for jumping – but the gamepad is likely to have many more. We therefore mapped all the sixteen known buttons and two known sticks onto those three logical functions in a way we thought made most sense, so that people could run by: alternating A/B buttons, alternating shoulder buttons, pressing left/right on the d-pad, or swinging either stick violently left and right (some of those will, of course, be more efficient than the others). For example:
+    ```js
+    newState[gamepad.STATES.LEFT] =
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.PAD_LEFT) ||
+        gamepad.stickMoved_(pad, gamepad.AXES.LEFT_ANALOGUE_HOR, true) ||
+        gamepad.stickMoved_(pad, gamepad.AXES.RIGHT_ANALOGUE_HOR, true),
+
+    newState[gamepad.STATES.PRIMARY_BUTTON] =
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.FACE_1) ||
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER) ||
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER_BOTTOM) ||
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.SELECT) ||
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.START) ||
+        gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_ANALOGUE_STICK),
+    ```
+
+1. We treated each analogue input as a discrete one, using the threshold functions described previously.
+
+1. We went as far as bolting the gamepad input onto the doodle, instead of baking it in – our polling loop actually synthesizes necessary keydown and keyup events (with a proper keyCode) and sends them back to DOM:
+    ```js
+    // Create and dispatch a corresponding key event.
+    var event = document.createEvent('Event');
+    var eventName = down ? 'keydown' : 'keyup';
+    event.initEvent(eventName, true, true);
+    event.keyCode = gamepad.stateToKeyCodeMap_[state];
+    gamepad.containerElement_.dispatchEvent(event);
+    ```
+
+And that's all there is to it!
+
+## Tips and tricks
+
+- Remember that the gamepad won't be visible in your browser at all before a button is pressed.
+- If you are testing the gamepad in different browsers simultaneously, note that only one of them can sense the controller. If you're not receiving any events, make sure to close the other pages that might be using it. Plus, from our experience, sometimes a browser can "hold onto" the gamepad even if you close the tab or quit the browser itself. Restarting the system is sometimes the only way to fix things.
+- As always, use [Chrome Canary](https://tools.google.com/dlpage/chromesxs/) and the equivalents for other browsers to make sure you're experiencing the best support – and then act appropriately if you see older versions behaving differently.
+
+## The Future
+
+We hope this helps to shed some light on this new API – still a bit precarious, but already a lot of fun.
+
+In addition to the missing pieces of the API (e.g. events) and broader browser support, we're also hoping to eventually see things like rumble control, access to built-in gyroscopes, etc. And, more support for different types of gamepads – please [file a bug against Chrome](https://code.google.com/p/chromium/issues/entry?template=Defect%20report%20from%20user&cc=scottmg@chromium.org&labels=Type-Feature,Pri-2,Area-Internals,Feature-Gamepad) and/or [file a bug against Firefox](https://bugzilla.mozilla.org/) if you see find one that works incorrectly or not at all.
+
+But before that, go and play with our [Hurdles 2012 doodle](http://www.google.com/doodles/hurdles-2012) and see how much more fun it is on the gamepad. Oh, did you just say you could do better than 10.7 seconds? Bring it.
+
+## Further reading
+
+- [W3C Gamepad API specification](http://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html)
+- [MDN Gamepad API Docs](https://developer.mozilla.org/API/Gamepad/Using_Gamepad_API)
diff --git a/src/site/content/en/blog/doodles-lem/index.md b/src/site/content/en/blog/doodles-lem/index.md
new file mode 100644
index 00000000000..072945237cd
--- /dev/null
+++ b/src/site/content/en/blog/doodles-lem/index.md
@@ -0,0 +1,522 @@
+---
+layout: post
+title: Case Study - Building the Stanisław Lem Google doodle
+date: 2011-08-06
+authors:
+  - marcinwichary
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+
+---
+## Hello, (strange) world
+
+The Google homepage is a fascinating environment to code within. It comes
+with many challenging restrictions: particular focus on speed and latency,
+having to cater to all sorts of browsers and work under various
+circumstances, and… yes, surprise and delight.
+  
+I’m talking about [Google doodles](http://www.google.com/doodles/), the special illustrations that occasionally replace our logo.
+And while my relationship with pens and brushes has long had that
+distinctive flavour of a restraining order, I often contribute to the
+interactive ones.
+  
+Every interactive doodle I coded ([Pac-Man](http://www.google.com/doodles/30th-anniversary-of-pac-man), [Jules Verne](http://www.google.com/doodles/jules-vernes-183rd-birthday), [World’s Fair](http://www.google.com/doodles/160th-anniversary-of-the-first-worlds-fair))– and many I helped with – were in equal parts futuristic and anachronistic: great opportunities for pie-in-the-sky applications of cutting-edge Web features… and gritty pragmatism of cross-browser
+compatibility.
+
+We learn a lot from each interactive doodle, and the recent Stanisław Lem mini-game was no exception, with its 17,000 lines of JavaScript code
+trying many things for the first time in doodle history. Today, I want to share that code with you – perhaps you'll find something interesting
+there, or point out my mistakes – and talk a bit about it.
+
+[View Stanisław Lem doodle code »](https://code.google.com/p/stanislaw-lem-google-doodle/)
+
+A thing worth keeping in mind is that Google's homepage is not a place for
+tech demos. With our doodles, we want to celebrate specific people and
+events, and we want to do that using the best art and the best
+technologies we can summon – but never celebrate technology for
+technology's sake. This means carefully looking at whatever part of
+broadly understood HTML5 is available, and whether it helps us make the
+doodle better without distracting from it or overshadowing it.
+
+So, let's go through some of the modern Web technologies that found their
+place – and some that didn't – in the Stanisław Lem doodle.
+
+## Graphics via DOM and canvas
+
+[Canvas](https://developer.mozilla.org/HTML/Canvas) is
+powerful and created for exactly the kind of things we wanted to do in
+this doodle. However, some of the older browsers we cared about didn't
+support it – and even though I am literally sharing an office with the
+person who put together an otherwise excellent [excanvas](http://excanvas.sourceforge.net/), I decided to choose
+a different way.
+
+I put together a
+graphic engine that abstracts away
+graphic primitives called “rects,” and then renders them using either
+canvas, DOM if canvas is unavailable.
+
+This approach comes with some interesting challenges – for example, moving
+or changing an object in DOM has immediate consequences, whereas
+for canvas there’s a specific moment when everything’s drawn at the same
+time. (I decided to have just one canvas, and clear it and draw from
+scratch with every frame. Too many, literally, moving parts on one hand –
+and on the other not enough complexity to warrant splitting into multiple
+overlapping canvases and updating them selectively.)
+
+Unfortunately, switching to canvas is not as simple as just mirroring CSS
+backgrounds with `drawImage()`: you lose a number of things
+that come for free when putting things together
+via DOM – most importantly layering with z-indexes, and mouse events.
+
+I already abstracted away the z-index with a concept called “planes.” The
+doodle defined a number of plane – from the sky far behind, to the mouse
+pointer in front of everything – and every actor within the doodle had to
+decide which one it belonged to (small plus/minus corrections within a
+plane were possible by using `planeCorrection`).
+
+Rendering through DOM, the planes are simply translated into z-index.
+But if we render via canvas, we need to sort rects based on
+their planes before drawing them. Since it’s
+costly to do this every time, the order is recalculated only when an actor
+is added or when it moves to another plane.
+
+For mouse events, I abstracted that too… sort of. For both DOM and canvas,
+I used additional completely transparent floating DOM elements with high z-index, whose function is only to react to mouse over/out, clicks and
+taps. 
+
+One of the things we wanted to try with this doodle was breaking the
+fourth wall. The above engine allowed us to combine canvas-based actors
+with DOM-based actors. For example, the explosions in the finale are both
+in canvas for in-universe objects and in DOM for the rest of the Google homepage. The bird, normally flying around and clipped by our
+jagged mask like any other actor, decides to stay out of trouble during
+the shooting level, and sits on the I’m Feeling Lucky button. The way it’s
+done is for the bird to leave canvas and become a DOM
+element (and vice versa later), which I hoped to be completely
+transparent to our visitors.
+
+## The frame rate
+
+Knowing the current frame rate, and reacting to when it's too slow (and
+too fast!) was an important part of our engine. Since the browsers don't
+report back the frame rate, we have to calculate it ourselves.
+
+I started with using [requestAnimationFrame](https://developer.mozilla.org/en/DOM/window.requestAnimationFrame),
+falling back to the
+old-fashioned `setTimeout` if the former was not available.
+`requestAnimationFrame` cleverly saves the CPU in
+some situations – although we are doing some of that ourselves, as will be
+explained below – but also simply allows us to get a higher frame rate
+than `setTimeout`.
+
+{% Aside %}
+Why a repeated `setTimeout` and not simply
+`setInterval`? We found out before that when the system is
+lagging, `setInterval`s become slightly unpredictable and can hog the CPU
+when the browser tries to catch up. If you’re using `setTimeout`, there’s
+only one timer event scheduled at any given time, so there is no danger of this
+happening.
+{% endAside %}
+
+Calculating the current frame rate is simple, but is
+subject to drastic changes – for example it can drop quickly when another
+application hogs the computer for a while. Therefore, we calculate a
+“rolling” (averaged) frame rate only across every 100 physical ticks
+and make decisions based on that.
+
+What kind of decisions?
+
+- If the frame rate is higher than 60fps, we throttle it.
+Currently, `requestAnimationFrame` on some versions of Firefox has no
+upper cap on the frame rate, and there's no point in wasting the CPU.
+Note that we actually cap at 65fps, because of the rounding errors that
+make the frame rate just a bit higher than 60fps on other browsers – we
+don't want do start throttling that by mistake.
+
+- If the frame rate is lower than 10fps, we simply slow
+down the engine instead of dropping frames.
+It’s a lose-lose proposition, but I felt that skipping frames
+excessively would be more confusing than simply having a slower (but still
+coherent) game. There’s another nice side effect of that –
+if the system gets slow temporarily, the user won’t experience a weird
+jump ahead as the engine is desperately catching up. (I did it slightly
+differently for Pac-Man, but the minimum frame rate is a better
+approach.)
+
+- Lastly, we can think of simplifying graphics when the frame rate gets
+dangerously low. We're not doing it for Lem doodle with the exception of
+mouse pointer (more on that below), but hypothetically we could lose some of the extraneous
+animations just so that the doodle feels fluid even on slower computers.
+
+We also have a concept of a physical tick and a logical tick. The former comes from
+`requestAnimationFrame`/`setTimeout`. The ratio in
+normal gameplay is 1:1, but for fast-forwarding, we just add more logical
+ticks per a physical tick (up to 1:5). This allows us to do all the
+necessary calculations for every logical tick, but only designate the last
+one to be the one updating things on the screen.
+
+## Benchmarking 
+
+An assumption can be (and indeed, early on, was) made that canvas will be
+faster than DOM whenever it's available. That is not always true. While
+testing, we found out that Opera 10.0–10.1 on a Mac, and Firefox on Linux
+are actually faster when moving DOM elements.
+
+In the perfect world, the doodle would silently benchmark different
+graphic techniques – DOM elements moved using `style.left`
+and `style.top`,
+drawing on canvas, and maybe even DOM elements moved using CSS3 transforms
+
+– and then switch to whichever one gave the highest frame rate. I started
+writing code for that, but found that at least my way of benchmarking was
+pretty unreliable and required a lot of time. Time that we don't have on
+our homepage – we care a lot about speed and we want the doodle to show up
+instantly and the gameplay to begin as soon as you click or tap.
+
+In the end, Web development sometimes boils down to having to do what you
+gotta do. I looked behind my shoulder to make sure no one was looking, and
+then I just hard-coded Opera 10
+and Firefox out of canvas. In the next life, I will come back as a
+`<marquee>` tag.
+
+## Conserving CPU
+
+You know that friend who comes to your house, watches the season finale of
+Breaking Bad, spoils it for you and then
+deletes it from your DVR? You don't want to be that guy, do you?
+
+So, yes, the worst analogy ever. But we don't want our doodle to be that
+guy either – the fact we're allowed into someone's browser tab is a
+privilege, and hoarding CPU cycles or distracting the user
+would make us an unpleasant guest. Therefore, if no one’s playing with the doodle
+(no taps, mouse clicks, mouse movements, or key presses), we want it to
+eventually go to sleep.
+
+When?
+
+- after 18 seconds on the homepage (arcade games called this [the attract mode](http://en.wikipedia.org/wiki/Attract_mode))
+- after 180 seconds if the tab has focus
+- after 30 seconds if the tab doesn’t have focus (e.g. the user switched to another window, but perhaps is still watching the doodle now in an inactive tab)
+- __immediately__ if the tab becomes invisible (e.g. the user switched to
+another tab in the same window – no point in wasting cycles if we can't
+be seen)
+
+How do we know the tab currently has focus? We attach ourselves to `window.focus` and `window.blur` How
+do we know the tab is visible? We’re using the new [Page Visibility API](http://code.google.com/chrome/whitepapers/pagevisibility.html) and
+react to the appropriate event.
+
+The time outs above are more forgiving than usual for us. I adapted them
+to this particular doodle, which has a lot of ambient animations (chiefly the
+sky and the bird). Ideally, the time outs would be gated on in-game
+interaction – e.g. right after landing, the bird could report back to the
+doodle that it can go to sleep now – but I didn't implement
+that in the end.
+
+Since the sky is always in motion, when falling asleep and waking up the
+doodle doesn’t just stop or start – it slows down before pausing, and vice
+versa for resuming, increasing or decreasing the number logical ticks per a physical tick as necessary.
+
+## Transitions, transforms, events
+
+One of the powers of HTML has always been the fact you can make it better
+yourself: if something is not good enough in the regular portfolio of HTML
+and CSS, you can wrangle JavaScript into extending it. Unfortunately, it
+oftentimes means having to start from scratch. CSS3 transitions are great,
+but you cannot add a new transition type or use transitions to do anything
+else than styling elements. Another example: CSS3 transforms are great for
+DOM, but when you move to canvas, you're suddenly on your own.
+
+These issues, and more, are why Lem doodle has its own transition and
+transform engine. Yeah, I know, 2000s called, etc. – the capabilities I
+built in are nowhere near as powerful as CSS3, but whatever the engine
+does, it does consistently and gives us much more control.
+
+I started with a simple action
+(event) system – a timeline that fires events in the future without
+using `setTimeout`, since at any given point doodle time can
+become divorced from physical time as it gets faster (fast forward), slower
+(low frame rate or falling asleep to save CPU), or stops altogether
+(waiting for images to finish loading).
+
+Transitions are just another
+type of actions. In addition to basic movements and rotation, we also
+support relative movements (e.g. move something 10 pixels to the right),
+custom things like shivering, and also keyframe image animations.
+
+I mentioned rotations, and those are done manually too: we have sprites
+for various angles for the objects that need to be rotated.
+The main reason is that both CSS3 and canvas
+rotations were introducing visual artifacts that we found unacceptable –
+and on top of that, those artifacts varied per platform.
+
+Given that some objects which rotate are attached to other rotating
+objects – one example is a robot's hand connected to the lower arm, which
+itself is attached to a rotating upper arm – this meant I also needed to
+create a poor man’s transform-origin in form of pivots.
+
+All of this is a solid amount of work that ultimately covers the ground
+already taken care of by HTML5 – but sometimes native support is not good
+enough and it's that time for wheel reinvention.
+
+## Dealing with images and sprites
+
+An engine is not just for running the doodle – it's also for working on
+it. I shared some debug parameters above: you can find the rest in
+`engine.readDebugParams`.
+
+[Spriting](http://www.alistapart.com/articles/sprites)
+is a well-known technique that we too use for doodles. It allows us to
+save bytes and decrease load times, plus it makes pre-loading easier.
+However, it also makes development harder – every change to imagery would
+require re-spriting (largely automated, but still cumbersome). Therefore,
+the engine supports running on raw images for development as well as
+sprites for production via `engine.useSprites` – both are
+included with the source code.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3DQCbA7qIdPRtxP5KhYe.png", alt="Pac-Man doodle", width="786", height="280" %}
+<figcaption>
+    Sprites used by the
+    <a href='http://www.google.com/pacman/'>Pac-Man doodle</a>.
+</figcaption>
+</figure>
+
+We also support pre-loading images
+as we go along and halting the doodle if the images didn’t load in time
+– complete with a faux progress bar! (Faux because, unfortunately, not even HTML5
+can tell us how much of an image file has already been loaded.)
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xCxoSewh2txsVbYlaV7w.png", alt="A screenshot of loading graphic with the rigged progress bar.", width="438", height="604" %}
+<figcaption>
+    A screenshot of loading graphic with the rigged progress bar.
+</figcaption>
+</figure>
+
+For some scenes, we use more than one sprite not as much to speed up
+loading using parallel connections, but simply because of [3/5 million pixel limitation for images on iOS](http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15).
+
+Where does HTML5 fit into all this? There's not much of it above, but the
+tool I wrote for spriting/cropping was all new Web tech: canvas, [blobs](https://developer.mozilla.org//DOM/Blob),
+[a[download]](http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download).
+One of the exciting things about HTML is that it
+slowly subsumes things that previously had to be done outside of the
+browser; the only part we needed do there was
+optimizing PNG files.
+
+## Saving state in between games
+
+Lem's worlds always felt big and alive and realistic. His stories
+typically started without much in terms of explanation, the first page
+starting in medias res, with the reader having to find her or his way
+around.
+
+The Cyberiad was no exception and we wanted to replicate that feeling for
+the doodle. We start with trying not to over-explain the story. Another
+large part is randomization which we felt befitted the mechanic nature of
+the universe of the book; we have a number of helper functions dealing with randomness
+that we use in many, many places.
+
+We also wanted to increase replayability in other ways. For that, we
+needed to know how many times the doodle was finished before. The
+historically correct technological solution to that is a cookie, but that
+doesn't work for Google homepage – every cookie increases every page's
+payload, and again, we care quite a lot about speed and latency.
+
+Fortunately, HTML5 gives us [Web Storage](https://developer.mozilla.org/DOM/Storage), trivial in use, allowing us to save and recall the
+general play count and the last scene played by the user – with much more
+grace than cookies would ever allow for.
+
+What do we do with this information?
+
+- we show a fast-forward button, allowing to zip through the cutscenes the user already saw before
+- we show different N items during the finale
+- we slightly increase the difficulty of the shooting level
+- we show a little easter egg probability dragon from a different story on your third and subsequent plays
+
+There is a number of debug parameters controlling this:
+
+- `?doodle-debug&doodle-first-run` – pretend it’s a first run
+- `?doodle-debug&doodle-second-run` – pretend it’s a second run
+- `?doodle-debug&doodle-old-run` – pretend it’s an old run
+
+## Touch devices
+
+We wanted the doodle to feel right at home on touch devices – the most
+modern ones are powerful enough so that the doodle runs really well, and
+experiencing the game via tapping is so
+much more fun than with clicking.
+
+Some upfront changes to the user experience needed to be made. Originally, our
+mouse pointer was the only place that communicated a
+cutscene/non-interactive part is taking place. We later added a little
+indicator in the lower-right corner, so we didn't have to rely on mouse
+pointer alone (given that those don't exist on touch devices).
+
+<figure>
+<table>
+    <thead>
+        <tr>
+            <th></th>
+            <th>Normal</th>
+            <th>Busy</th>
+            <th>Clickable</th>
+            <th>Clicked</th>
+        </tr>
+    <tbody>
+        <tr>
+            <td>Work-in-progress</td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hZgE7oLpWwvEfIkWPqb0.png", alt="Work-in-progress normal pointer", width="32", height="43" %}</figure></td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tws1jNd1hvUjjqOWa1zC.png", alt="Work-in-progress busy pointer", width="32", height="42" %}</figure></td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Yha8mb7Q31upUtHRhskW.png", alt="Work-in-progress clickable pointer", width="32", height="43" %}</figure></td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1VWNZcqj8ApJQOhQZiAP.png", alt="Work-in-progress clicked pointer", width="32", height="43" %}</figure></td>
+        </tr>
+        <tr>
+            <td>Final</td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Vq3EgAkFzGls8fjlKZUr.png", alt="Final normal pointer", width="32", height="36" %}v</td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5MKryf69dmSOEUQEY57x.png", alt="Final busy pointer", width="32", height="37" %}</figure></td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cdxKyJoAQJvVBnqq8vwj.png", alt="Final clickable pointer", width="32", height="43" %}</figure></td>
+            <td><figure>{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7fOZa4xdr234Z0CAZlK8.png", alt="Final clicked pointer", width="32", height="43" %}</figure></td>
+        </tr>
+    </tbody>
+</table>
+<figcaption>
+    Mouse pointers during development, and final equivalents.
+</figcaption>
+</figure>
+
+Most of the stuff worked out of the box. However, quick impromptu
+usability tests of our touch experience showed two problems: some of the
+targets were too hard to press, and quick taps were ignored since we just
+overrode mouse click events.
+
+Having separate clickable transparent DOM elements helped a lot here, as I
+could resize them independently of the visuals. I introduced extra
+15-pixel padding for touch devices and used it whenever clickable elements were created.
+(I added 5-pixel padding for mouse environments too, just
+to make Mr. Fitts happy.)
+
+As for the other problem, I just made sure to attach and test proper touch
+start and end handlers, instead of relying on mouse click.
+
+We’re also using more modern style properties to remove some touch
+features that WebKit browsers add by default (tap highlight, tap callout).
+
+And how do we detect whether a given device running the doodle supports
+touch? Lazily. Instead of figuring it out a
+priori, we just used our combined IQs to deduct that the device
+supports touch… after we get the first touch start event.
+
+## Customizing the mouse pointer
+
+But not everything is touch-based. One of our guiding principles was to
+put as many things as we could within the universe of the doodle. The
+little sidebar UI (fast-forward, question mark), the tooltip, and even,
+yes, the mouse pointer.
+
+How to customize a mouse pointer? Some browsers allow changing the
+mouse cursor by linking to a bespoke image file. However, this is not
+supported well and it’s also somewhat restrictive.
+
+If not this, then what? Well, why not making a mouse pointer just another
+actor in the doodle? This works, but comes with a number of
+caveats, chiefly:
+
+- you need to be able to remove the native mouse pointer
+- you need to be pretty good at keeping your mouse pointer in sync with
+the “real” one
+
+The former is tricky. CSS3 allows for `cursor: none`, but it
+too is not supported in some browsers. We needed to resort to some
+gymnastics: using empty `.cur`
+file as a fallback, specifying concrete
+behavior for some browsers, and even hard-coding others out of the
+experience whatsoever.
+
+The other is relatively trivial on its face, but
+with the mouse pointer being just another part of the universe of the
+doodle, it will inherit all its problems too. The biggest one? If the
+frame rate of the doodle is low, the frame rate of the mouse pointer will
+be low too – and that has dire consequences since the mouse pointer, being
+a natural extension of your hand, needs to feel responsive no matter what.
+(People who used Commodore Amiga in their past are now nodding
+vigorously.)
+
+One somewhat complex solution to that problem is decoupling the mouse
+pointer from the regular update loop. We did just that – in an alternate
+universe where I don't need to sleep. A simpler solution for this one?
+Just reverting to the native mouse pointer
+if the rolling frame rate drops
+below 20fps. (This is where the rolling
+frame rate comes in handy. If we reacted to the current frame rate, and if
+it happened to oscillate around 20fps, the user would see the custom mouse
+pointer hiding and showing all the time.) This brings us to:
+
+<figure>
+<table>
+    <thead>
+        <tr>
+            <th>Frame rate range</th>
+            <th>Behaviour</th>
+        </tr>
+    <tbody>
+        <tr>
+            <td> >10fps</td>
+            <td> Slow down the game so that more frames are not dropped.</td>
+        </tr>
+        <tr>
+            <td>10–20fps</td>
+            <td>Use native mouse pointer instead of custom one.</td>
+        </tr>
+        <tr>
+            <td>20–60fps</td>
+            <td>Normal operation.</td>
+        </tr>
+        <tr>
+            <td>>60fps</td>
+            <td>Throttle so that the frame rate doesn't exceed this value.</td>
+        </tr>
+    </tbody>
+</table>
+<figcaption>
+    Summary of frame rate-dependent behaviour.
+</figcaption>
+</figure>
+
+Oh, and our mouse pointer is dark on a Mac, but white on a PC. Why? Because platform wars need fuel even in
+fictional universes.
+
+## Conclusion
+
+This is not a perfect engine, but it doesn't try to be one. It was
+developed alongside the Lem doodle, and is very specific to it. That's
+okay. “Premature optimization is the root of all evil,” as Don Knuth
+famously said, and I don't believe writing an engine in isolation first,
+and only applying it later makes sense – the practice informs theory just
+as much as theory informs practice. In my case, code was thrown away,
+several parts rewritten over and over again, and many common pieces
+noticed post, rather than ante factum. But in the end, what we have here
+allowed us to do what we wanted – celebrate the career of Stanisław Lem
+and the drawings by Daniel Mróz in the best way we could think of.
+
+I hope the above sheds light on some of the design choices and trade-offs
+that we needed to make – and how we used HTML5 in a specific, real-life
+scenario. Now, play with the source code, take it for the spin, and let us
+know what you think.
+
+I did that myself – this below was live in the last days, counting down to
+the early hours of the 23th of November 2011 in Russia, which was the
+first time zone that saw the Lem doodle. A goofy thing, perhaps, but just
+like doodles, things that appear insignificant sometimes have a deeper
+meaning – this counter was really a nice “stress test” for the engine.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OBjGBgmdt7UmytyNhTOp.png", alt="A screenshot of Lem doodle in-universe countdown clock.", width="800", height="300" %}
+<figcaption>
+    A screenshot of Lem doodle in-universe countdown clock.
+</figcaption>
+</figure>
+
+And that's one way of looking at the life of a Google doodle – months of
+work, weeks of testing, 48 hours of baking it in, all for something that
+people play for five minutes. Every one of those thousands of JavaScript
+lines is hoping that those 5 minutes will be time well spent. Enjoy.
diff --git a/src/site/content/en/blog/downloading-resources-in-html5-a-download/index.md b/src/site/content/en/blog/downloading-resources-in-html5-a-download/index.md
new file mode 100644
index 00000000000..bd8f98b4e05
--- /dev/null
+++ b/src/site/content/en/blog/downloading-resources-in-html5-a-download/index.md
@@ -0,0 +1,36 @@
+---
+title: Downloading resources in HTML5 - a[download]
+date: 2011-08-01
+updated: 2022-03-19 
+authors:
+  - ericbidelman
+description: |
+  Chrome now supports the HTML spec's new `download` attribute to `a` elements.
+tags:
+  - blog
+---
+
+Chrome now supports the HTML spec's new `download` attribute to `a` elements. When used, this attribute signifies that the resource it points to should be downloaded by the browser rather than navigating to it.
+
+From [Downloading Resources](https://html.spec.whatwg.org/dev/links.html#downloading-resources):
+
+{% Aside %}
+The `download` attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default filename that the author recommends for use in labeling the resource in a local file system. There are no restrictions on allowed values, but authors are cautioned that most file systems have limitations with regard to what punctuation is supported in file names, and user agents are likely to adjust file names accordingly.
+
+The attribute can furthermore be given a value, to specify the filename that user agents are to use when storing the resource in a file system. This value can be overridden by the `Content-Disposition` HTTP header's `filename` parameter.
+{% endAside %}
+
+For example, clicking the following link downloads the .png as "MyGoogleLogo.png" instead of navigating to its `href` value: <a href="https://web-central.appspot.com/web/images/web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>. The markup for this is as follows:
+
+```html
+<a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>
+```
+
+The real benefit of `a[download]` will be when working with [blob: URLs](//www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis) and [filesystem: URLs](http://html5-demos.appspot.com/static/filesystem/generatingResourceURIs.html) URLs.
+It'll give users a way to download content created/modified within your app.
+
+[Full Demo](http://html5-demos.appspot.com/static/a.download.html)
+
+One thing to note is that in the above example, the image has same origin with respect to website. If you try to use a link of image from different origin the link may not work as a navigating link rather than a downloading link. This is because many versions of browser does not support the download policy on cross-origin files. For example Chrome versions prior to 65 did allow downloading cross origin files and it was deprecated in later versions. Read [this](https://developer.chrome.com/blog/chrome-65-deprecations/) for more detail. You can use `Content-Disposition` header to force a download from other origin.
+
+Browser support: only the current Chrome dev channel release (14.0.835.15+) supports this attribute.
diff --git a/src/site/content/en/blog/drag-and-drop/index.md b/src/site/content/en/blog/drag-and-drop/index.md
index 09d9494718a..631294331f4 100644
--- a/src/site/content/en/blog/drag-and-drop/index.md
+++ b/src/site/content/en/blog/drag-and-drop/index.md
@@ -4,11 +4,10 @@ authors:
   - ericbidelman
   - rachelandrew
 date: 2010-09-30
-updated: 2020-07-29
+updated: 2022-04-05
 description: >
-  The HTML5 Drag and Drop (DnD) API means that we can make
-  almost any element on our page draggable. In this post we’ll explain
-  the basics of Drag and Drop.
+  The HTML5 Drag and Drop API means that we can make almost any element on our page draggable.
+  In this post we’ll explain the basics of drag and drop.
 tags:
   - blog
   - html
@@ -16,23 +15,23 @@ tags:
   - file-system
 ---
 
-The HTML5 Drag and Drop (DnD) API means that we can make almost any element on our page draggable.
-In this post we'll explain the basics of Drag and Drop.
+The HTML5 Drag and Drop API means that we can make almost any element on our page draggable.
+In this post we'll explain the basics of drag and drop.
 
 ## Creating draggable content
 
-It's worth noting that in most browsers, text selections, images, and links are draggable by default.
-For example, if you drag the Google logo on [Google Search](https://google.com) you will see the ghost image.
-The image can then be dropped in the address bar, an `<input type="file" />` element, or even the desktop.
-To make other types of content draggable you need to use the HTML5 DnD APIs.
+It's worth noting that in most browsers, text selections, images, and links are
+draggable by default. For example, if you drag a link on a web page you will see
+a small box with a title and URL. You can drop this box on the address bar or
+the desktop to create a shortcut or to navigate to the link. To make other types
+of content draggable you need to use the HTML5 Drag and Drop APIs.
 
-To make an object draggable set `draggable=true` on that element.
-Just about anything can be drag-enabled, images, files, links, files, or any markup on your page.
+To make an object draggable set `draggable=true` on that element. Just about anything can be
+drag-enabled: images, files, links, files, or any markup on your page.
 
-In our example we're creating an interface to rearrange some columns,
-which have been laid out with CSS Grid.
-The basic markup for my columns looks like this,
-with each column having the `draggable` attribute set to `true`.
+Our example creates an interface to rearrange columns that have been laid out with
+CSS Grid. The basic markup for the columns looks like this, with each column having the `draggable`
+attribute set to `true`.
 
 ```html
 <div class="container">
@@ -42,8 +41,8 @@ with each column having the `draggable` attribute set to `true`.
 </div>
 ```
 
-Here's the CSS for my container and box elements.
-Note that the only CSS related to DnD functionality is the [`cursor: move`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) property.
+Here's the CSS for the container and box elements. Note that the only CSS related to drag and drop
+functionality is the [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor) property.
 The rest of the code just controls the layout and styling of the container and box elements.
 
 ```css/11
@@ -62,59 +61,55 @@ The rest of the code just controls the layout and styling of the container and b
 }
 ```
 
-At this point you will find that you can drag the items,
-however nothing else will happen.
-To add the DnD functionality we need to use the JavaScript API.
+At this point you will find that you can drag the items, however nothing else will happen. To add
+the drag and drop functionality we need to use the JavaScript API.
 
 ## Listening for dragging events
 
 There are a number of different events to attach to for monitoring the entire drag and drop process.
 
-* [`dragstart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event)
-* [`drag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event)
-* [`dragenter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event)
-* [`dragleave`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event)
-* [`dragover`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event)
-* [`drop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event)
-* [`dragend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event)
-
-To handle the DnD flow, you need some kind of source element (where the drag originates),
-the data payload (what you're trying to drop),
-and a target (an area to catch the drop).
-The source element can be an image, list, link, file object, block of HTML, etc.
-The target is the drop zone (or set of drop zones) that accepts the data the user is trying to drop.
-Keep in mind that not all elements can be targets, for example an image can't be a target.
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+To handle the drag and drop flow, you need some kind of source element (where the drag originates), the data
+payload (what you're trying to drop), and a target (an area to catch the drop). The source element
+can be an image, list, link, file object, block of HTML, etc. The target is the drop zone (or set of
+drop zones) that accepts the data the user is trying to drop. Keep in mind that not all elements can
+be targets, for example an image can't be a target.
 
 ## Starting and ending a drag and drop sequence
 
-Once you have `draggable="true"` attributes defined on your content,
-attach a `dragstart` event handler to kick off the DnD sequence for each column.
+Once you have `draggable="true"` attributes defined on your content, attach a `dragstart` event
+handler to kick off the drag and drop sequence for each column.
 
-This code will set the column's opacity to 40% when the user begins dragging it,
-then return it to 100% when the dragging event ends.
+This code will set the column's opacity to 40% when the user begins dragging it, then return it to
+100% when the dragging event ends.
 
 ```js
 function handleDragStart(e) {
-    this.style.opacity = '0.4';
-  }
+  this.style.opacity = '0.4';
+}
 
-  function handleDragEnd(e) {
-    this.style.opacity = '1';
-  }
+function handleDragEnd(e) {
+  this.style.opacity = '1';
+}
 
-  let items = document.querySelectorAll('.container .box');
-  items.forEach(function(item) {
-    item.addEventListener('dragstart', handleDragStart, false);
-    item.addEventListener('dragend', handleDragEnd, false);
-  });
+let items = document.querySelectorAll('.container .box');
+items.forEach(function (item) {
+  item.addEventListener('dragstart', handleDragStart);
+  item.addEventListener('dragend', handleDragEnd);
+});
 ```
 
-The result can be seen in the Glitch demo below. Drag an item and it becomes opaque.
-As the `dragstart` event's target is the source element,
-setting `this.style.opacity` to 40% gives the user visual feedback that the element is the current selection being moved.
-Once you drop the item,
-although the drop functionality is not in place,
- the source element returns to 100% opacity.
+The result can be seen in the Glitch demo below. Drag an item and it becomes opaque. As the
+`dragstart` event's target is the source element, setting `this.style.opacity` to 40% gives the user
+visual feedback that the element is the current selection being moved. Once you drop the item,
+although the drop functionality is not in place, the source element returns to 100% opacity.
 
 {% Glitch {
   id: 'simple-drag-and-drop-1',
@@ -123,11 +118,11 @@ although the drop functionality is not in place,
 
 ## Add additional visual cues with `dragenter`, `dragover`, and `dragleave`
 
-To help the user understand how to interact with your interface,
-use the `dragenter`, `dragover` and `dragleave` event handlers.
-In this example the columns are drop targets in addition to being draggable.
-Help the user to understand this by making the border dashed as they hold a dragged item over a column.
-For example, in your CSS you might create an `over` class to represent elements that are drop targets:
+To help the user understand how to interact with your interface, use the `dragenter`, `dragover` and
+`dragleave` event handlers. In this example the columns are drop targets in addition to being
+draggable. Help the user to understand this by making the border dashed as they hold a dragged item
+over a column. For example, in your CSS you might create an `over` class to represent elements that
+are drop targets:
 
 ```css
 .box.over {
@@ -135,10 +130,9 @@ For example, in your CSS you might create an `over` class to represent elements
 }
 ```
 
-Then, in your JavaScript set up the event handlers,
-add the `over` class when the column is dragged over,
-and remove it when we leave.
-In the `dragend` handler we also make sure to remove the classes at the end of the drag.
+Then, in your JavaScript set up the event handlers, add the `over` class when the column is dragged
+over, and remove it when we leave. In the `dragend` handler we also make sure to remove the classes
+at the end of the drag.
 
 ```js/9-11,14-28,34-36
 document.addEventListener('DOMContentLoaded', (event) => {
@@ -156,10 +150,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
   }
 
   function handleDragOver(e) {
-    if (e.preventDefault) {
-      e.preventDefault();
-    }
-
+    e.preventDefault();
     return false;
   }
 
@@ -173,11 +164,12 @@ document.addEventListener('DOMContentLoaded', (event) => {
 
   let items = document.querySelectorAll('.container .box');
   items.forEach(function(item) {
-    item.addEventListener('dragstart', handleDragStart, false);
-    item.addEventListener('dragover', handleDragOver, false);
-    item.addEventListener('dragenter', handleDragEnter, false);
-    item.addEventListener('dragleave', handleDragLeave, false);
-    item.addEventListener('dragend', handleDragEnd, false);
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
   });
 });
 ```
@@ -189,27 +181,27 @@ document.addEventListener('DOMContentLoaded', (event) => {
 
 There are a couple of points worth covering in this code:
 
-* In the case of dragging something like a link,
-you need to prevent the browser's default behavior,
-which is to navigate to that link.
-To do this, call `e.preventDefault()` in the `dragover` event.
-Another good practice is to return `false` in that same handler.
-* The `dragenter` event handler is used to toggle the `over` class instead of `dragover`.
-If you use `dragover`,
-the CSS class would be toggled many times as the event `dragover` continued to fire on a column hover.
-Ultimately, that would cause the browser's renderer to do a large amount of unnecessary work.
-Keeping redraws to a minimum is always a good idea.
-If you need to use the `dragover` event for something,
-consider [throttling or debouncing your event listener](https://css-tricks.com/debouncing-throttling-explained-examples/).
+- The [default
+  action](https://developer.mozilla.org/docs/Web/API/Document/dragover_event#browser_compatibility)
+  for `dragover` event is to set the `dataTransfer.dropEffect` property to
+  `"none"`. The `dropEffect` property is covered later in this article. For now,
+  just know that it prevents the `drop` event from being fired. To override this
+  behavior, call `e.preventDefault()`. Another good practice is to return
+  `false` in that same handler.
+
+- The `dragenter` event handler is used to toggle the `over` class instead of `dragover`. If you use
+  `dragover`, the CSS class would be toggled many times as the event `dragover` continued to fire on
+  a column hover. Ultimately, that would cause the browser's renderer to do a large amount of
+  unnecessary work. Keeping redraws to a minimum is always a good idea. If you need to use the
+  `dragover` event for something, consider
+  [throttling or debouncing your event listener](https://css-tricks.com/debouncing-throttling-explained-examples/).
 
 ## Completing the drop
 
-To process the actual drop,
-add an event listener for the `drop` event.
-In the `drop` handler,
-you'll need to prevent the browser's default behavior for drops,
-which is typically some sort of annoying redirect.
-You can prevent the event from bubbling up the DOM by calling `e.stopPropagation()`.
+To process the actual drop, add an event listener for the `drop` event. In the `drop` handler,
+you'll need to prevent the browser's default behavior for drops, which is typically some sort of
+annoying redirect. You can prevent the event from bubbling up the DOM by calling
+`e.stopPropagation()`.
 
 ```js
 function handleDrop(e) {
@@ -218,55 +210,68 @@ function handleDrop(e) {
 }
 ```
 
-If you run the code at this point,
-the item will not drop to the new location.
-To achieve this you need to use the [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object.
+Be sure to register the new handler in amongst the other handlers:
 
-The `dataTransfer` property is where all the DnD magic happens.
-It holds the piece of data sent in a drag action.
-`dataTransfer` is set in the `dragstart` event and read/handled in the drop event.
-Calling `e.dataTransfer.setData(mimeType, dataPayload)` lets you set the object's MIME type and data payload.
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+If you run the code at this point, the item will not drop to the new location. To achieve this you
+need to use the [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer) object.
 
-In this example, we're going to allow users to rearrange the order of the columns.
-To do that, first you need to store the source element's HTML when the drag starts:
+The `dataTransfer` property is where all the drag and drop magic happens. It holds the piece of data sent in a
+drag action. `dataTransfer` is set in the `dragstart` event and read/handled in the drop event.
+Calling `e.dataTransfer.setData(mimeType, dataPayload)` lets you set the object's MIME type and data
+payload.
 
-  <figure class="w-figure">
-    <video controls autoplay loop muted class="w-screenshot">
+In this example, we're going to allow users to rearrange the order of the columns. To do that, first
+you need to store the source element's HTML when the drag starts:
+
+  <figure>
+    <video controls autoplay loop muted>
       <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
     </video>
   </figure>
 
 ```js/3-6
 function handleDragStart(e) {
-    this.style.opacity = '0.4';
+  this.style.opacity = '0.4';
 
-    dragSrcEl = this;
+  dragSrcEl = this;
 
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', this.innerHTML);
-  }
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
 ```
 
-In the `drop` event you process the column drop,
-setting the source column's HTML to the HTML of the target column that you dropped on,
-first checking that the user is not dropping back onto the same column they dragged from.
+In the `drop` event you process the column drop, setting the source column's HTML to the HTML of the
+target column that you dropped on, first checking that the user is not dropping back onto the same
+column they dragged from.
 
 ```js/5-8
 function handleDrop(e) {
   e.stopPropagation();
 
-    if (dragSrcEl !== this) {
-      dragSrcEl.innerHTML = this.innerHTML;
-      this.innerHTML = e.dataTransfer.getData('text/html');
-    }
-
-    return false;
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
   }
 
+  return false;
+}
 ```
 
-You can see the result in the following demo.
-Drag and release the A column on top of the B column and notice how they change places:
+You can see the result in the following demo. For this to work, you'll need a
+desktop browser. The Drag and Drop API isn't supported on mobile. Drag and
+release the A column on top of the B column and notice how they change places:
 
 {% Glitch {
   id: 'simple-drag-drop',
@@ -275,31 +280,35 @@ Drag and release the A column on top of the B column and notice how they change
 
 ## More dragging properties
 
-The `dataTransfer` object exposes properties to provide visual feedback to the user during the drag process.
-These properties can also be used to control how each drop target responds to a particular data type.
-
-* [`dataTransfer.effectAllowed`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed) restricts what 'type of drag' the user can perform on the element.
-It is used in the drag-and-drop processing model to initialize the `dropEffect` during the `dragenter` and `dragover` events.
-The property can be set to the following values: `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all`, and `uninitialized`.
-* [`dataTransfer.dropEffect`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect) controls the feedback that the user is given during the `dragenter` and `dragover` events.
-When the user hovers over a target element,
-the browser's cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.).
-The effect can take on one of the following values:  `none`, `copy`, `link`, `move`.
-* [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage)
-means that instead of using the browser's default 'ghost image' feedback,
-you can optionally set a drag icon.
+The `dataTransfer` object exposes properties to provide visual feedback to the user during the drag
+process. These properties can also be used to control how each drop target responds to a particular
+data type.
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed)
+  restricts what 'type of drag' the user can perform on the element. It is used in the drag-and-drop
+  processing model to initialize the `dropEffect` during the `dragenter` and `dragover` events. The
+  property can be set to the following values: `none`, `copy`, `copyLink`, `copyMove`, `link`,
+  `linkMove`, `move`, `all`, and `uninitialized`.
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect)
+  controls the feedback that the user is given during the `dragenter` and `dragover` events. When
+  the user hovers over a target element, the browser's cursor indicates what type of operation
+  is going to take place (e.g. a copy, a move, etc.). The effect can take one of the following
+  values: `none`, `copy`, `link`, `move`.
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage)
+  means that instead of using the browser's default 'ghost image' feedback, you can optionally set a
+  drag icon.
 
 ## File upload with drag and drop
 
-This simple example uses a column as both the drag source and drag target.
-This might be seen in a UI where the user is asked to rearrange the items.
-In some situations the drag target and source may be different,
-such as an interface where the user needs to select one image to be the main image for a product by dragging the selected image onto a target.
+This simple example uses a column as both the drag source and drag target. This might be seen in a
+UI where the user is asked to rearrange the items. In some situations the drag target and source may
+be different, such as an interface where the user needs to select one image to be the main image for
+a product by dragging the selected image onto a target.
 
-Drag and Drop is frequently used to allow users to drag items from their desktop into an application.
-The main difference is in your `drop` handler.
-Instead of using `dataTransfer.getData()` to access the files,
-their data will be contained in the `dataTransfer.files` property:
+Drag and Drop is frequently used to allow users to drag items from their desktop into an
+application. The main difference is in your `drop` handler. Instead of using
+`dataTransfer.getData()` to access the files, their data will be contained in the
+`dataTransfer.files` property:
 
 ```js
 function handleDrop(e) {
@@ -307,18 +316,18 @@ function handleDrop(e) {
   e.preventDefault();
 
   var files = e.dataTransfer.files;
-  for (var i = 0, f; f = files[i]; i++) {
+  for (var i = 0, f; (f = files[i]); i++) {
     // Read the File objects in this FileList.
   }
 }
 ```
 
-You can find more information about this in [Custom drag-and-drop](https://web.dev/read-files/#select-dnd).
+You can find more information about this in [Custom drag-and-drop](/read-files/#select-dnd).
 
 ## More resources
 
-* [The Drag and Drop Specification](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
-* [MDN HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
-* [How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
-* [Creating a Parking Game With the HTML Drag and Drop API](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
-* [How To Use The HTML Drag-and-Drop API In React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
+- [The Drag and Drop Specification](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [MDN HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [Creating a Parking Game With the HTML Drag and Drop API](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [How To Use The HTML Drag-and-Drop API In React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/en/blog/drawing-to-canvas-in-emscripten/index.md b/src/site/content/en/blog/drawing-to-canvas-in-emscripten/index.md
new file mode 100644
index 00000000000..edfa85a2fbc
--- /dev/null
+++ b/src/site/content/en/blog/drawing-to-canvas-in-emscripten/index.md
@@ -0,0 +1,510 @@
+---
+title: 'Drawing to canvas in Emscripten'
+subhead: Learn how to render 2D graphics on the web from WebAssembly with Emscripten.
+description: Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.
+date: 2022-02-07
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/eZw4ZHWkzOl09Eds8mQP.jpg
+alt: Brown paint brushes on assorted-color paint palette.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - rendering
+---
+
+Different operating systems have different APIs for drawing graphics. The differences become even more confusing when writing a cross-platform code, or porting graphics from one system to another, including when porting native code to WebAssembly.
+
+In this post you will learn a couple of methods for drawing 2D graphics to the canvas element on the web from C or C++ code compiled with Emscripten.
+
+## Canvas via Embind
+
+If you're starting a new project rather than trying to port an existing one, it might be easiest to use the HTML [Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) via Emscripten's binding system [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html). Embind allows you to operate directly on arbitrary JavaScript values.
+
+To understand how to use Embind, first take a look at the following [example from MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API#javascript) that finds a &lt;canvas> element, and draws some shapes on it
+
+```js
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+```
+
+Here's how it can be transliterated to C++ with Embind:
+
+```cpp
+#include <emscripten/val.h>
+
+using emscripten::val;
+
+// Use thread_local when you want to retrieve & cache a global JS variable once per thread.
+thread_local const val document = val::global("document");
+
+// …
+
+int main() {
+  val canvas = document.call<val>("getElementById", "canvas");
+  val ctx = canvas.call<val>("getContext", "2d");
+  ctx.set("fillStyle", "green");
+  ctx.call<void>("fillRect", 10, 10, 150, 100);
+}
+```
+
+When linking this code, make sure to pass `--bind` to enable Embind:
+
+```bash
+emcc --bind example.cpp -o example.html
+```
+
+Then you can serve the compiled assets with a static server and load the example in a browser:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/19fVztVUElvJ3gKfFn4f.png", alt="Emscripten-generated HTML page showing a green rectangle on a black canvas.", width="800", height="370" %}
+
+### Choosing the canvas element
+
+When using the Emscripten-generated HTML shell with the preceding shell command, the canvas is included and set up for you. It makes it easier to build simple demos and examples, but in larger applications you'd want to include the Emscripten-generated JavaScript and WebAssembly in an HTML page of your own design.
+
+The generated JavaScript code expects to find the canvas element stored in the `Module.canvas` property. Like [other Module properties](https://emscripten.org/docs/api_reference/module.html), it can be set during initialization.
+
+If you're using ES6 mode (setting output to a path with an extension `.mjs` or using the `-s EXPORT_ES6` setting), you can pass the canvas like this:
+
+```js
+import initModule from './emscripten-generated.mjs';
+
+const Module = await initModule({
+  canvas: document.getElementById('my-canvas')
+});
+```
+
+If you're using regular script output, you need to declare the `Module` object before loading the Emscripten-generated JavaScript file:
+
+```html
+<script>
+var Module = {
+  canvas: document.getElementById('my-canvas')
+};
+</script>
+<script src="emscripten-generated.js"></script>
+```
+
+## OpenGL and SDL2
+
+[OpenGL](https://www.opengl.org/) is a popular cross-platform API for computer graphics. When used in Emscripten, it will take care of converting the supported subset of OpenGL operations to [WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API). If your application relies on features supported in OpenGL ES 2.0 or 3.0, but not in WebGL, Emscripten can take care of emulating those too, but you need to opt-in via the [corresponding settings](https://emscripten.org/docs/porting/multimedia_and_graphics/OpenGL-support.html?highlight=sdl#opengl-es-2-0-3-0-emulation).
+
+You can use OpenGL either directly or via higher-level 2D and 3D graphics libraries. A couple of those have been ported to the web with Emscripten. In this post, I'm focusing on 2D graphics, and for that [SDL2](https://www.libsdl.org/) is currently the preferred library because it's been well-tested and supports the Emscripten backend officially upstream.
+
+### Drawing a rectangle
+
+"About SDL" section on the [official website](https://www.libsdl.org/) says:
+
+> Simple DirectMedia Layer is a cross-platform development library designed to provide low level access to audio, keyboard, mouse, joystick, and graphics hardware via OpenGL and Direct3D.
+
+All those features - controlling audio, keyboard, mouse and graphics - have been ported and work with Emscripten on the web too so you can port entire games built with SDL2 without much hassle. If you're porting an existing project, check out the ["Integrating with a build system"](https://emscripten.org/docs/compiling/Building-Projects.html#integrating-with-a-build-system) section of Emscripten docs.
+
+For simplicity, in this post I'll focus on a single-file case and translate the earlier rectangle example to SDL2:
+
+```cpp
+#include <SDL2/SDL.h>
+
+int main() {
+  // Initialize SDL graphics subsystem.
+  SDL_Init(SDL_INIT_VIDEO);
+
+  // Initialize a 300x300 window and a renderer.
+  SDL_Window *window;
+  SDL_Renderer *renderer;
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  // Set a color for drawing matching the earlier `ctx.fillStyle = "green"`.
+  SDL_SetRenderDrawColor(renderer, /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  // Create and draw a rectangle like in the earlier `ctx.fillRect()`.
+  SDL_Rect rect = {.x = 10, .y = 10, .w = 150, .h = 100};
+  SDL_RenderFillRect(renderer, &rect);
+
+  // Render everything from a buffer to the actual screen.
+  SDL_RenderPresent(renderer);
+
+  // TODO: cleanup
+}
+```
+
+When linking with Emscripten, you need to use `-s USE_SDL=2`. This will tell Emscripten to fetch the SDL2 library, already precompiled to WebAssembly, and link it with your main application.
+
+```bash
+emcc example.cpp -o example.html -s USE_SDL=2
+```
+
+When the example is loaded in the browser, you'll see the familiar green rectangle:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/34ztXnZ2OZvWLwYdBzJd.png", alt="Emscripten-generated HTML page showing a green rectangle on a black square canvas.", width="800", height="581" %}
+
+This code has a couple of problems though. First, it lacks proper cleanup of allocated resources. Second, on the web, pages don't get closed automatically when an application has finished its execution, so the image on the canvas gets preserved. However, when the same code is recompiled natively with
+
+```bash
+clang example.cpp -o example -lSDL2
+```
+
+and executed, the created window will only blink briefly and immediately close upon exit, so the user doesn't have a chance to see the image.
+
+### Integrating an event loop
+
+A more complete and idiomatic example would look need to wait in an event loop until the user chooses to quit the application:
+
+```cpp/14-20
+#include <SDL2/SDL.h>
+
+int main() {
+  SDL_Init(SDL_INIT_VIDEO);
+
+  SDL_Window *window;
+  SDL_Renderer *renderer;
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  SDL_SetRenderDrawColor(renderer, /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  SDL_Rect rect = {.x = 10, .y = 10, .w = 150, .h = 100};
+  SDL_RenderFillRect(renderer, &rect);
+  SDL_RenderPresent(renderer);
+
+  while (1) {
+    SDL_Event event;
+    SDL_PollEvent(&event);
+    if (event.type == SDL_QUIT) {
+      break;
+    }
+  }
+
+  SDL_DestroyRenderer(renderer);
+  SDL_DestroyWindow(window);
+
+  SDL_Quit();
+}
+```
+
+After the image has been drawn to a window, the application now waits in a loop, where it can process keyboard, mouse and other user events. When the user closes the window, they'll trigger an `SDL_QUIT` event, which will be intercepted to exit the loop. After the loop is exited, the application will do the cleanup and then exit itself.
+
+Now compiling this example on Linux works as expected and shows a 300 by 300 window with a green rectangle:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/nUxwRMyWVmdK5zy2Kct6.png", alt="A square Linux window with black background and a green rectangle.", width="400", height="440",  style="max-width: 400px; margin: 0 auto" %}
+
+However, the example no longer works on the web. The Emscripten-generated page freezes immediately during the load and never shows the rendered image:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/lirjGAIzCSy3ivxyySnA.png", alt="Emscripten-generated HTML page overlaid with a 'Page Unresponsive' error dialogue suggesting to either wait for the page to become responsible or exit the page", width="800", height="397" %}
+
+What happened? I'll quote the answer from the article ["Using asynchronous web APIs from WebAssembly"](/asyncify/#asynchronous-model-of-the-web):
+
+> The short version is that the browser runs all the pieces of code in sort of an infinite loop, by taking them from the queue one by one. When some event is triggered, the browser queues the corresponding handler, and on the next loop iteration it's taken out from the queue and executed. This mechanism allows simulating concurrency and running lots of parallel operations while using only a single thread.
+>
+> The important thing to remember about this mechanism is that, while your custom JavaScript (or WebAssembly) code executes, the event loop is blocked […]
+
+The preceding example executes an infinite event loop, while the code itself runs inside another infinite event loop, implicitly provided by the browser. The inner loop never relinquishes control to the outer one, so the browser doesn't get a chance to process external events or draw things onto the page.
+
+There are two ways to fix this problem.
+
+#### Unblocking event loop with Asyncify
+
+First, as described in the [linked article](/asyncify/), you can use [Asyncify](https://emscripten.org/docs/porting/asyncify.html). It's an Emscripten feature that allows to "pause" the C or C++ program, give control back to the event loop, and wake up the program when some asynchronous operation has finished.
+
+Such asynchronous operation can be even "sleep for the minimum possible time", expressed via [`emscripten_sleep(0)`](https://emscripten.org/docs/api_reference/emscripten.h.html?highlight=emscripten_sleep#c.emscripten_sleep) API. By embedding it in the middle of the loop, I can ensure that the control is returned to browser's event loop on each iteration, and the page remains responsive and can handle any events:
+
+```cpp/23-25
+#include <SDL2/SDL.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
+
+int main() {
+  SDL_Init(SDL_INIT_VIDEO);
+
+  SDL_Window *window;
+  SDL_Renderer *renderer;
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  SDL_SetRenderDrawColor(renderer, /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  SDL_Rect rect = {.x = 10, .y = 10, .w = 150, .h = 100};
+  SDL_RenderFillRect(renderer, &rect);
+  SDL_RenderPresent(renderer);
+
+  while (1) {
+    SDL_Event event;
+    SDL_PollEvent(&event);
+    if (event.type == SDL_QUIT) {
+      break;
+    }
+#ifdef __EMSCRIPTEN__
+    emscripten_sleep(0);
+#endif
+  }
+
+  SDL_DestroyRenderer(renderer);
+  SDL_DestroyWindow(window);
+
+  SDL_Quit();
+}
+```
+
+This code now needs to be compiled with Asyncify enabled:
+
+```bash
+emcc example.cpp -o example.html -s USE_SDL=2 -s ASYNCIFY
+```
+
+And the application works as expected on the web again:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/34ztXnZ2OZvWLwYdBzJd.png", alt="Emscripten-generated HTML page showing a green rectangle on a black square canvas.", width="800", height="581" %}
+
+However, Asyncify can have non-trivial code size overhead. If it's only used for a top-level event loop in the application, a better option can be to use the [`emscripten_set_main_loop`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.emscripten_set_main_loop) function.
+
+#### Unblocking event loop with "main loop" APIs
+
+[`emscripten_set_main_loop`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.emscripten_set_main_loop) doesn't require any compiler transformations for unwinding and rewinding the call stack, and that way avoids the code size overhead. However, in exchange, it requires a lot more manual modifications to the code.
+
+First, the body of the event loop needs to be extracted into a separate function. Then, `emscripten_set_main_loop` needs to be called with that function as a callback in the first argument, an FPS in the second argument (`0` for the native refresh interval), and a boolean indicating whether to simulate infinite loop (`true`) in the third:
+
+```cpp
+emscripten_set_main_loop(callback, 0, true);
+```
+
+The newly created callback won't have any access to the stack variables in the `main` function, so variables like `window` and `renderer` need to be either extracted into a heap-allocated struct and its pointer passed via [`emscripten_set_main_loop_arg`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.emscripten_set_main_loop_arg) variant of the API, or extracted into global `static` variables (I went with the latter for simplicity). The result is slightly harder to follow, but it draws the same rectangle as the last example:
+
+```cpp/20
+#include <SDL2/SDL.h>
+#include <stdio.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
+
+SDL_Window *window;
+SDL_Renderer *renderer;
+
+bool handle_events() {
+  SDL_Event event;
+  SDL_PollEvent(&event);
+  if (event.type == SDL_QUIT) {
+    return false;
+  }
+  return true;
+}
+
+void run_main_loop() {
+#ifdef __EMSCRIPTEN__
+  emscripten_set_main_loop([]() { handle_events(); }, 0, true);
+#else
+  while (handle_events())
+    ;
+#endif
+}
+
+int main() {
+  SDL_Init(SDL_INIT_VIDEO);
+
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  SDL_SetRenderDrawColor(renderer, /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  SDL_Rect rect = {.x = 10, .y = 10, .w = 150, .h = 100};
+  SDL_RenderFillRect(renderer, &rect);
+  SDL_RenderPresent(renderer);
+
+  run_main_loop();
+
+  SDL_DestroyRenderer(renderer);
+  SDL_DestroyWindow(window);
+
+  SDL_Quit();
+}
+```
+
+Since all the control flow changes are manual and reflected in the source code, it can be compiled without the Asyncify feature again:
+
+```bash
+emcc example.cpp -o example.html -s USE_SDL=2
+```
+
+This example might seem useless, because it works no differently from the first version, where the rectangle was drawn on canvas successfully despite the code being a lot simpler, and the `SDL_QUIT` event&mdash;the only one handled in the `handle_events` function&mdash;is ignored on the web anyway.
+
+However, proper event loop integration - either via Asyncify or via `emscripten_set_main_loop` - pays off if you decide to add any kind of animation or interactivity.
+
+#### Handling user interactions
+
+For example, with a few changes to the last example you can make the rectangle move in response to keyboard events:
+
+```cpp/26
+#include <SDL2/SDL.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
+
+SDL_Window *window;
+SDL_Renderer *renderer;
+
+SDL_Rect rect = {.x = 10, .y = 10, .w = 150, .h = 100};
+
+void redraw() {
+  SDL_SetRenderDrawColor(renderer, /* RGBA: black */ 0x00, 0x00, 0x00, 0xFF);
+  SDL_RenderClear(renderer);
+  SDL_SetRenderDrawColor(renderer, /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  SDL_RenderFillRect(renderer, &rect);
+  SDL_RenderPresent(renderer);
+}
+
+uint32_t ticksForNextKeyDown = 0;
+
+bool handle_events() {
+  SDL_Event event;
+  SDL_PollEvent(&event);
+  if (event.type == SDL_QUIT) {
+    return false;
+  }
+  if (event.type == SDL_KEYDOWN) {
+    uint32_t ticksNow = SDL_GetTicks();
+    if (SDL_TICKS_PASSED(ticksNow, ticksForNextKeyDown)) {
+      // Throttle keydown events for 10ms.
+      ticksForNextKeyDown = ticksNow + 10;
+      switch (event.key.keysym.sym) {
+        case SDLK_UP:
+          rect.y -= 1;
+          break;
+        case SDLK_DOWN:
+          rect.y += 1;
+          break;
+        case SDLK_RIGHT:
+          rect.x += 1;
+          break;
+        case SDLK_LEFT:
+          rect.x -= 1;
+          break;
+      }
+      redraw();
+    }
+  }
+  return true;
+}
+
+void run_main_loop() {
+#ifdef __EMSCRIPTEN__
+  emscripten_set_main_loop([]() { handle_events(); }, 0, true);
+#else
+  while (handle_events())
+    ;
+#endif
+}
+
+int main() {
+  SDL_Init(SDL_INIT_VIDEO);
+
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  redraw();
+  run_main_loop();
+
+  SDL_DestroyRenderer(renderer);
+  SDL_DestroyWindow(window);
+
+  SDL_Quit();
+}
+```
+
+{% Video src="video/9oK23mr86lhFOwKaoYZ4EySNFp02/EahORFoNjTjwRhdtuKer.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}
+
+### Drawing other shapes with SDL2\_gfx
+
+SDL2 abstracts away cross-platform differences and various types of media devices in a single API, but it's still a pretty low-level library. In particular for graphics, while it provides APIs for drawing points, lines and rectangles, implementation of any more complex shapes and transformations is left to the user.
+
+[SDL2\_gfx](https://www.ferzkopp.net/Software/SDL2_gfx/Docs/html/index.html) is a separate library that fills that gap. For example, it can be used to replace a rectangle in the example above with a circle:
+
+```cpp/15
+#include <SDL2/SDL.h>
+#include <SDL2/SDL2_gfxPrimitives.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
+
+SDL_Window *window;
+SDL_Renderer *renderer;
+
+SDL_Point center = {.x = 100, .y = 100};
+const int radius = 100;
+
+void redraw() {
+  SDL_SetRenderDrawColor(renderer, /* RGBA: black */ 0x00, 0x00, 0x00, 0xFF);
+  SDL_RenderClear(renderer);
+  filledCircleRGBA(renderer, center.x, center.y, radius,
+                   /* RGBA: green */ 0x00, 0x80, 0x00, 0xFF);
+  SDL_RenderPresent(renderer);
+}
+
+uint32_t ticksForNextKeyDown = 0;
+
+bool handle_events() {
+  SDL_Event event;
+  SDL_PollEvent(&event);
+  if (event.type == SDL_QUIT) {
+    return false;
+  }
+  if (event.type == SDL_KEYDOWN) {
+    uint32_t ticksNow = SDL_GetTicks();
+    if (SDL_TICKS_PASSED(ticksNow, ticksForNextKeyDown)) {
+      // Throttle keydown events for 10ms.
+      ticksForNextKeyDown = ticksNow + 10;
+      switch (event.key.keysym.sym) {
+        case SDLK_UP:
+          center.y -= 1;
+          break;
+        case SDLK_DOWN:
+          center.y += 1;
+          break;
+        case SDLK_RIGHT:
+          center.x += 1;
+          break;
+        case SDLK_LEFT:
+          center.x -= 1;
+          break;
+      }
+      redraw();
+    }
+  }
+  return true;
+}
+
+void run_main_loop() {
+#ifdef __EMSCRIPTEN__
+  emscripten_set_main_loop([]() { handle_events(); }, 0, true);
+#else
+  while (handle_events())
+    ;
+#endif
+}
+
+int main() {
+  SDL_Init(SDL_INIT_VIDEO);
+
+  SDL_CreateWindowAndRenderer(300, 300, 0, &window, &renderer);
+
+  redraw();
+  run_main_loop();
+
+  SDL_DestroyRenderer(renderer);
+  SDL_DestroyWindow(window);
+
+  SDL_Quit();
+}
+```
+
+Now the SDL2\_gfx library also needs to be linked into the application. It's done similarly to SDL2:
+
+```cpp
+# Native version
+$ clang example.cpp -o example -lSDL2 -lSDL2_gfx
+# Web version
+$ emcc --bind foo.cpp -o foo.html -s USE_SDL=2 -s USE_SDL_GFX=2
+```
+
+And here are the results running on Linux:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/ERTe7Nt9z5m4WnrlH5ya.png", alt="A square Linux window with black background and a green circle.", width="400", height="440", style="max-width:400px; margin: 0 auto;" %}
+
+And on the web:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/92Aj9foNpDh1UWfBAnIU.png", alt="Emscripten-generated HTML page showing a green circle on a black square canvas.", width="800", height="580" %}
+
+For more graphics primitives, check out the [auto-generated docs](https://www.ferzkopp.net/Software/SDL2_gfx/Docs/html/index.html).
diff --git a/src/site/content/en/blog/earth-webassembly/earth-wasm-big.webp b/src/site/content/en/blog/earth-webassembly/earth-wasm-big.webp
deleted file mode 100644
index ddb82b6ba63..00000000000
Binary files a/src/site/content/en/blog/earth-webassembly/earth-wasm-big.webp and /dev/null differ
diff --git a/src/site/content/en/blog/earth-webassembly/eiffeltower.jpg b/src/site/content/en/blog/earth-webassembly/eiffeltower.jpg
deleted file mode 100644
index 4cd548e1f70..00000000000
Binary files a/src/site/content/en/blog/earth-webassembly/eiffeltower.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/earth-webassembly/eiffeltower.png b/src/site/content/en/blog/earth-webassembly/eiffeltower.png
deleted file mode 100644
index c622b229f51..00000000000
Binary files a/src/site/content/en/blog/earth-webassembly/eiffeltower.png and /dev/null differ
diff --git a/src/site/content/en/blog/earth-webassembly/eiffeltower.webp b/src/site/content/en/blog/earth-webassembly/eiffeltower.webp
deleted file mode 100644
index 67a724ae16d..00000000000
Binary files a/src/site/content/en/blog/earth-webassembly/eiffeltower.webp and /dev/null differ
diff --git a/src/site/content/en/blog/earth-webassembly/hero.jpg b/src/site/content/en/blog/earth-webassembly/hero.jpg
deleted file mode 100644
index 1fae42e2ff8..00000000000
Binary files a/src/site/content/en/blog/earth-webassembly/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/earth-webassembly/index.md b/src/site/content/en/blog/earth-webassembly/index.md
index 71aabe04455..e3d4b9718b1 100644
--- a/src/site/content/en/blog/earth-webassembly/index.md
+++ b/src/site/content/en/blog/earth-webassembly/index.md
@@ -5,31 +5,31 @@ subhead: |
 date: 2019-06-20
 authors:
   - jormears
-hero: hero.jpg
+hero: image/admin/W2buTZDHpZeTqiO1pbCQ.jpg
 alt: A globe with code overlaid
 description: |
   Improving cross-browser access to Google Earth with WebAssembly
 tags:
   - blog
-  - web-assembly
-  - Earth
-  - Web App
+  - webassembly
+  # - Earth
+  # - Web App
   - case-study
 ---
 
 In an ideal world, every application that developers build, regardless of technology, would be available in the browser. But there are barriers to bringing projects to the web, depending on the technology they were built with and how well that technology is supported by the various browser vendors. [WebAssembly](https://webassembly.org/) (Wasm) is a compile target standardized by the [W3C](https://www.w3.org/) that helps us solve this problem by allowing us to run codebases from languages other than JavaScript on the web.
 
 
-We've done just that with Google Earth, available today in [preview beta](https://g.co/earth/beta) on WebAssembly. Keep in mind that this is still a beta of Google Earth and may not be as smooth as you're used to (try out regular [Earth for web](https://earth.google.com/web/)). You can experiment with this beta in Chrome and other Chromium-based browsers, including Edge (Canary version) and Opera, as well as Firefox. Consider this beta your inspiration if you too are looking for better cross-browser support for your native applications.
+We've done just that with Google Earth, available today in [preview beta](https://g.co/earth/beta) on WebAssembly. Keep in mind that this is still a beta of Google Earth and may not be as smooth as you're used to (try out regular [Earth for web](https://earth.google.com/web/)). You can experiment with this beta in Chrome and other Chromium-based browsers, including Edge (Canary version) and Opera, as well as Firefox. Consider this beta your inspiration if you too are looking for better cross-browser support for your platform-specific applications.
 
 
 ## Why we chose WebAssembly for Google Earth
 
-We originally wrote most of Google Earth in C++ because it was a native application intended for desktop install. Then we were able to port it to Android and iOS as smartphones took hold, retaining most of our C++ codebase using [NDK](https://developer.android.com/ndk) and [Objective-C++](https://www.wikipedia.org/wiki/Objective-C#Objective-C++). In 2017, when we brought Earth to the web, we used [Native Client](https://developer.chrome.com/native-client) (NaCl) to compile the C++ code and run it in the Chrome browser.
+We originally wrote most of Google Earth in C++ because it was a desktop application intended for install. Then we were able to port it to Android and iOS as smartphones took hold, retaining most of our C++ codebase using [NDK](https://developer.android.com/ndk) and [Objective-C++](https://www.wikipedia.org/wiki/Objective-C#Objective-C++). In 2017, when we brought Earth to the web, we used [Native Client](https://developer.chrome.com/native-client) (NaCl) to compile the C++ code and run it in the Chrome browser.
 
  At the time, NaCl was the only browser technology that allowed us to port our C++ code to the browser and give us the kind of performance Earth needed. Unfortunately, NaCl was a Chrome-only technology that never saw adoption across browsers. Now we're starting to switch to WebAssembly, which lets us take that same code and run it across browsers. This means Earth will be available to more people across the web.
 
- <img class="w-screenshot" src="earth-wasm-big.webp" alt="A screenshot of Earth showing Eiffel Tower">
+ {% Img src="image/admin/xZ614l31AdC5L8qd44Kq.webp", alt="A screenshot of Earth showing Eiffel Tower", width="800", height="447" %}
 
 ## A thread on threading
 
@@ -61,6 +61,6 @@ Safari has a strong implementation of WebAssembly, but it lacks full support for
 ## Looking forward to more adoption of WebAssembly features
 It's been a long road to make Earth available on the web. About six years ago, we started with an initial [asm.js](http://asmjs.org/)-based internal demo that was maintained and expanded over the years. It was then converted into a WebAssembly build of Earth, as WebAssembly became the W3C adopted standard.
 
-We still have a ways to go for WebAssembly and Earth. Specifically, we'd like to move to the LLVM backend using Emscripten (the toolchain to generate WebAssembly out of C++ code). This change will enable future SIMD support, as well as stronger debugging tools like source maps for native code. Other things we hope to see are adoption of [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) and full support for dynamic memory allocation in WebAssembly. But we know we're on the right track: WebAssembly is the long-term future for Earth on the web.
+We still have a ways to go for WebAssembly and Earth. Specifically, we'd like to move to the LLVM backend using Emscripten (the toolchain to generate WebAssembly out of C++ code). This change will enable future SIMD support, as well as stronger debugging tools like source maps for source-language code. Other things we hope to see are adoption of [OffscreenCanvas](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas) and full support for dynamic memory allocation in WebAssembly. But we know we're on the right track: WebAssembly is the long-term future for Earth on the web.
 
 Please take a moment to try our [beta](https://g.co/earth/beta). Let us know how it works for you by leaving feedback directly in Earth.
diff --git a/src/site/content/en/blog/easy-high-dpi-images/index.md b/src/site/content/en/blog/easy-high-dpi-images/index.md
new file mode 100644
index 00000000000..a1b6b16f795
--- /dev/null
+++ b/src/site/content/en/blog/easy-high-dpi-images/index.md
@@ -0,0 +1,260 @@
+---
+layout: post
+title: Easy high DPI images
+authors:
+  - smus
+date: 2013-03-28
+tags:
+  - blog
+---
+
+Displays with high pixel density are quickly becoming the norm. Content
+creators need to adapt to this fact. This is a short guide on how to
+serve high quality images on the web today, without polyfills,
+JavaScript, CSS hacks, and browser features that aren't quite implemented
+yet. In a word: without drastic changes to your workflow.
+
+There are many responsive image proposals today, many of which involve
+significant changes for the web developer. The standards-track `srcset`
+`<img>` attribute is difficult to implement, especially with the
+complexity of `srcset`'s additional viewport-based selection:
+
+```html
+banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
+```
+
+Even though the `image-set` CSS property only uses `devicePixelRatio` to
+decide which image to load, it still forces developers to write a lot
+of extra markup for every image.
+
+Other proposals, like the `<picture>` element are even more verbose.
+Furthermore, they are not standards-track, so their ubiquitous
+availability is even further out than the srcset attribute. JavaScript
+and server side solutions are the only other alternative, but these
+approaches have their own drawbacks as covered in [other
+articles][h5r-hidpi].
+
+This article will go through several uses of images commonly found on
+the web and propose simple solutions that work on screens with high
+pixel densities as well as ordinary ones. For the purposes of this
+discussion, any device that reports `window.devicePixelRatio` greater
+than 1 can be considered high DPI, since that means that CSS pixels
+aren't the same as device pixels, and that images are being scaled up.
+
+Here's a summary:
+
+- Use CSS/SVG rather than raster imagery if possible.
+- Use images optimized for high density displays by default.
+- Use PNGs for simple drawings and pixel art (eg. logos).
+- Use compressed JPEGs for images with a variety of colors (eg. photos).
+- Always set explicit sizes (using CSS or HTML) on all image elements.
+
+## Simple drawings and pixel art
+
+Small images can often be avoided entirely by using CSS features or SVG.
+There is no need to use images for rounded corners, for example, since
+the `border-radius` CSS property is widely supported. Similarly, custom
+fonts are widely supported, so using "imaged" text is unadvisable.
+
+However, in some cases, like logos, an image may be the only way
+forward. For example, this Chrome logo has a natural size of 256x256. On
+a Retina display, you can see the line aliasing at diagonals and curves,
+which looks chunky and bad, especially when compared to crisply rendered
+text:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uBEYI93uReLt091i15rF.png", alt="Chrome 1x", width="256", height="256" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vbPPnlqHU5Z4sWmhDhi2.png", alt="Png 1x", width="200", height="200" %}
+</figure>
+
+**Natural dimensions: `256x256px`, asset size: `31 kB`, format: `PNG`**
+
+Convinced? Good. Now let's use a high density image. You might be tempted to
+save space by storing your logo as a JPEG, but this may not be a good
+idea, since saving logos and other graphics in a lossy format tends to
+introduce artifacts. In this case, I've exaggerated the problem by using
+a very high compression, but notice the banding on the gradients, the
+speckles on white backgrounds and the messy lines:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/z3iHBrCE5ZsRql3OlKan.jpg", alt="Chrome 2x", width="512", height="512" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eAwgjoCGKNcwH8aHin4j.png", alt="Jpeg 2x", width="200", height="200" %}
+</figure>
+
+**Natural dimensions: `512x512px`, asset size: `13 kB`, format: `JPEG`**
+
+The thing to do for relatively small images is to use 2x PNGs. Be aware
+that the difference in size between a 1x and 2x PNG is generally quite
+high (52 kB in this case). However, in the case of a logo, it is your
+website's face and the first thing your visitors will see. By skimping
+too much on quality in exchange for size, it will also be the last thing
+your visitors will see!
+
+Here is the Chrome logo in all its glory, sized down to half its natural
+dimensions for 2x displays:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TJwyZv7LQiRJdo1WkY1q.png", alt="Chrome 2x", width="512", height="512" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aZtUA4p757tG4DkipCQd.png", alt="Png 2x", width="200", height="200" %}
+</figure>
+
+**Natural dimensions: `512x512px`, asset size: `83 kB`, format: `PNG`**
+
+The markup to make the above render is the following:
+
+```html
+<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
+```
+
+Note that I have specified a width and height on the image. This is
+necessary because the natural size of the image is 512px. It's also good
+for performance because the rendering engine has a good grasp on the
+size of the element and won't need to work too hard to compute it.
+
+One possible optimization that might work is to reduce the 24-bit PNG to
+a paletted 8-bit one. This works for images with a small number of
+colors, the Chrome logo included. To do this optimization, you can use a
+tool such as <http://pngquant.org/>. You can see a bit of banding here,
+but this file is just 13 kB, which is a whopping 6x size saving
+compared to the original 512x512 PNG.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s1yYo71Yl7hOIxEB2YHB.png", alt="Chrome 2x 8bit", width="512", height="512" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gvXG52EdAlv7L5ZvNiae.png", alt="Png 2x 8bit", width="191", height="183" %}
+</figure>
+
+
+**Natural dimensions: `512x512px`, asset size: `13 kB`, format: `PNG,
+8-bit palette`**
+
+## Images with a variety of colors
+
+I wrote an HTML5Rocks article [surveying a number of different responsive
+image techniques][h5r-hidpi], and did some research around compressing
+1x and 2x JPEG and comparing resulting sizes and visual quality. Here's
+one such tile from the above article:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/y4mvARiiIIC5IrBU12Zf.jpg", alt="Tile.", width="800", height="453" %}
+</figure>
+
+I've labeled the images with their compression level (indicated by JPEG
+quality), their size (in bytes), and my subjective opinion on their
+comparative visual fidelity (ranked by numbers). The interesting bit
+here is that the highly compressed 2x image (labeled 3) is **smaller in
+size** and **looks better** than the uncompressed 1x image (labeled 4).
+In other words, between images 4 and 3, we've managed to improve the
+quality of the image by doubling each dimension and significantly
+increasing the compression, while at the same time, reducing the size by
+2 kB.
+
+## Compression, dimensions and visual quality
+
+I wanted to get a bit more insight into tradeoffs between compression
+level, image dimensions, visual quality and image size. I ran a study
+with the following hypothesis based on the study above:
+
+### Hypothesis
+
+With enough compression, a 2x image will look equivalent to the same
+image in 1x size at some other (lower) compression. However, in this
+case, the highly compressed 2x image will be smaller in size than the 1x
+image.
+
+### Process
+
+- Given a 2x image, generate the 1x one.
+- Compress both images at various levels.
+- Create a test page that shows both image sets side-by-side.
+- Find the place in the two sets where the images are equivalent.
+- Note equivalent image sizes and compression levels.
+- Try it on both a 1x and a 2x display.
+
+I built a side-by-side image comparison app similar to [Lightroom's
+compare view][lightroom-compare]. The intention is to show a 1x and a 2x
+images side-by-side, but also allow you to zoom into any section of the
+image to get more detail. You can also select between JPEG and WebP
+formats and change compression quality to see file size and image
+quality comparisons. The idea is to tweak settings over several images,
+figure out what compression quality, scaling and format vs. image
+quality tradeoff you are comfortable with, and use that setting for all
+of your images.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AJNGdL37Eurh9VCAOIBJ.png", alt="Comparison screenshot", width="800", height="409" %}
+</figure>
+
+The tool itself is [available for you to play with][image-zoom]. You can
+**zoom into the image** by selecting a sub-area to zoom into.
+
+### Analysis
+
+I'll say up front that image quality is a subjective thing. Also, your
+particular use case will likely dictate where your priorities lie in the
+visual fidelity vs. filesize spectrum. Additionally, different kinds of
+image features react differently to scaling and compression quality, so
+a one-size-fits-all solution may not necessarily work here. The point of
+the tool is to help you build up an intuition for image quality
+compressions, scales and formats.
+
+From playing with the image zoomer, a few things quickly became apparent
+to me. Firstly, I prefer `quality=30 dpr=2x` images to `quality=90
+dpr=1x` images for the increase in detail. These images are comparable
+in file size as well (in the plane case, the compressed 2x image is 76
+kB whereas the uncompressed 1x is 80 kB).
+
+Exceptions to this rule are highly compressed (`quality<30`) images with
+gradients. These tend to suffer from color banding, which is equally bad
+regardless of image scale. The bird and car samples found in the tool
+are examples of this.
+
+WebP images look way cleaner than JPEG, especially at low compression
+levels. This color banding seems to be much less of an issue. Lastly,
+WebP images are much more compact.
+
+## Caveats and fin
+
+Making images look good on high density displays is only half of the
+image related problems caused by a huge variation in screens. In some
+cases, you might want to serve entirely different images depending on
+viewport size. For example, Obama's headshot might be appropriate for a
+phone-sized screen, but the stand in front of him and flag behind him
+and some might be a better fit for a laptop display.
+
+I deliberately avoided this "art direction" topic to focus on high DPI
+images only. This problem can be solved by a number of different
+approaches: using media queries and background images, via JavaScript,
+via some new features like `image-set`, or on the server. This topic is
+covered in [High DPI Images for Variable Pixel Densities][h5r-hidpi].
+
+I'll sign off with a few open issues:
+
+- Effects of high compression on performance. What are the penalties of
+  decoding highly compressed images?
+- What are the performance penalties of having to resize the image down
+  when a 2x image is loaded on a 1x display?
+
+To summarize, opt for CSS and SVG instead of using raster images. If
+raster images are strictly required, use PNGs for images with a limited
+palettes and many solid colors, and use JPEGs for images with many
+colors and gradients. The great thing about this approach is that your
+markup is virtually unchanged. All that is required of the web developer
+is to generate 2x assets and size your images properly in the DOM.
+
+For further reading, check out [Scott Jehl's article][compressive] on a
+similar topic.  May your images look sharp and your cell data usage be
+low!
+
+
+[h5r-hidpi]: http://www.html5rocks.com/en/mobile/high-dpi/
+[lightroom-compare]: http://laurashoe.com/2011/10/21/lightroom-quick-tip-of-the-week-viewing-and-zooming-in-on-two-photos-side-by-side/
+[image-zoom]: http://borismus.github.com/image-zoom
+[compressive]: http://filamentgroup.com/lab/rwd_img_compression/
diff --git a/src/site/content/en/blog/economic-times-cwv/index.md b/src/site/content/en/blog/economic-times-cwv/index.md
new file mode 100644
index 00000000000..f30e4515b55
--- /dev/null
+++ b/src/site/content/en/blog/economic-times-cwv/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate
+subhead: |
+  Optimizing Core Web Vitals on The Economic Times website significantly improved the user experience and substantially reduced bounce rate across the entire website.
+description: |
+  Optimizing Core Web Vitals on The Economic Times website significantly improved the user experience and substantially reduced bounce rate across the entire website.
+authors:
+  - anshusharma
+  - sumitgugnani
+  - prashantmishra
+date: 2021-12-21
+alt: Google Core Web Vitals + Mail.ru Home Page.
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+With internet speeds improving day-by-day, users expect websites to respond and behave faster than ever. [The Economic Times](https://m.economictimes.com/) handles over 45 million monthly active users. By optimizing for Core Web Vitals across the domain, on AMP and non-AMP pages, we managed to significantly reduce bounce rates and improve the reading experience.
+
+## Measuring the Impact
+
+We focused on [Largest Contentful Paint (LCP)](/lcp/) and [Cumulative Layout Shift (CLS)](/cls/), as they matter the most when it comes to providing a great reading experience to our users. After implementing various performance fixes as described below, The Economic Times managed to improve Chrome User Experiments (CrUX) report metrics significantly within a few months.
+
+**Overall, CLS improved** by 250% from 0.25 to 0.09.
+**Overall, LCP improved** by 80% from 4.5 seconds to 2.5 seconds.
+
+Further, LCP values in the "Poor" range were reduced by 33% from October 2020 to July 2021:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/1mrpePbYaQeKbIDJKo8b.png", alt="LCP distributions grouped by month, starting from October 2020 and ending in July 2021. The amount of LCP values classified as 'Poor' was reduced from 15.03% to 10.08%.", width="800", height="477" %}
+</figure>
+
+Additionally, CLS values in the "Poor" range were reduced by 65%, and CLS values in the "Good" range increased by 20% in the same timeframe:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/NK3g38biuTH12zGzncHK.png", alt="CLS distributions grouped by month, starting from October 2020 and ending in July 2021. The amount of CLS values classified as 'Poor' was reduced from 25.92% to 9%, and the amount of CLS values classified as 'Good' increased from 62.62% to 76.5%.", width="800", height="463" %}
+</figure>
+
+The result was that The Economic Times&mdash;which was previously not meeting CWV thresholds&mdash;now passed CWV thresholds across its entire origin and **reduced bounce rates by 43% overall**.
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6C1gW9oQu7Njds1Gdpmv.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}
+  <figcaption>
+    A before and after animation of The Economic Times's Article page.
+  </figcaption>
+</figure>
+
+## What is LCP and how did we improve it?
+
+The largest element is the most relevant one for improving user experience and recognizing load speed. Performance metrics like [First Contentful Paint (FCP)](/fcp/) only capture the very initial experience of page loading. On the other hand, LCP reports the render time of the largest image, text or video section visible to the user.
+
+In addition to switching to a faster DNS provider and optimizing images, here are some of the techniques we applied we covered to improve LCP.
+
+### Critical requests first
+
+As all modern browsers limit the concurrent number of requests, developers need to prioritize loading the critical content first. To load a complex web page we need to download assets such as header elements, CSS, JavaScript resources, hero image, article body, comments, other related news, footer, and ads. We evaluated what elements were required for LCP, and provided the preference to load those items first to improve LCP. We also deferred the calls that were not part of the initial page rendering.
+
+### Text appearance
+
+We experimented with the [`font-display` property](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) as this impacts both LCP and CLS. We tried `font-display: auto;` and then switched to `font-display: swap;`. This renders the text initially in the best matching and available font, then switches to the font when it has been downloaded. This resulted in our text rendering quickly, independent of network speed.
+
+### Better Compression
+
+[Brotli](http://github.com/google/brotli/) is an alternative compression algorithm to Gzip and Deflate developed by Google. We replaced our fonts and assets and changed server compression from Gzip to Brotli to achieve a smaller footprint:
+
+- Javascript files are 15% smaller than with Gzip.
+- HTML files are 18% smaller than with Gzip.
+- CSS and font files are 17% smaller than with Gzip.
+
+### Preconnect to third-party domains
+
+[`preconnect`](/preconnect-and-dns-prefetch/#establish-early-connections-with-relpreconnect) should be used carefully as it can still take up valuable CPU time, and delay other important resources, especially on secure connections.
+
+However, if it's known that a fetch for a resource on a third-party domain will occur, `preconnect` is good. If it only happens occasionally on a high traffic website, `preconnect` might trigger unnecessary TCP and TLS work. Thus [`dns-prefetch`](/preconnect-and-dns-prefetch/#resolve-domain-name-early-with-reldns-prefetch) was a better fit for third-party resources&mdash;for example, social media, analytics, etc.&mdash;to perform DNS lookups ahead of time.
+
+### Break up code into chunks
+
+In the site's head, we only loaded those resources which contain either an essential part of the business logic or were [critical](https://github.com/addyosmani/critical) for above the fold page rendering. Furthermore, we split our code into chunks with [code splitting](https://loadable-components.com/docs/code-splitting/). This helped us to further improve page LCP.
+
+### Better caching
+
+For all the front-end routes, we added a [Redis](https://en.wikipedia.org/wiki/Redis) layer which served templates from the cache. This reduces the computation time on the server and builds the whole UI in each request, thus decreasing LCP in subsequent requests.
+
+### Summarizing LCP Goals and achievements
+
+Before beginning the optimization project, the team benchmarked their LCP score at **4.5 seconds** (for the 75th percentile of their users, based on CrUX report field data). After the optimization project, it was reduced to **2.5 seconds**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/DsNmTCU3JTpWAam7a3df.png", alt="LCP distributions from September 2020 to June 2021. Overall, the 75th percentile of LCP values observed in the Chrome User Experience report showed an 8.97% reduction in 'Poor' LCP values. The overall decrease in LCP time at the 75th percentile was 200 milliseconds, with 77.63% of LCP values falling in the 'Good' range.", width="800", height="596" %}
+  <figcaption>
+    Source: CrUX Report of The Economic Times overall LCP
+  </figcaption>
+</figure>
+
+## What is CLS and how did we improve it?
+
+Have you ever noticed any unexpected movement of page content while browsing a website? One cause of this is asynchronous loading of media (images, videos, ads, etc.) on the page with unknown dimensions. As soon as media resources load, they shift the layout of the page.
+
+{% Aside %}
+For more information on CLS, read the [CLS metric page](/cls/).
+{% endAside %}
+
+We're going to cover the measures we took to improve CLS on the The Economic Times website.
+
+### Use placeholders
+
+We used a styled placeholder for ad units and media elements of known dimensions to avoid layout shifts when the ad library loads and renders page ads. This ensures layout shifts are eliminated by reserving space for the ad.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ujvqcVK7usp89zn6njAN.jpg", alt="A side-by-side comparison of The Economic Times website as shown on a mobile phone. At left, a gray placeholder is reserved for the article hero image. At right, the placeholder is replaced with the loaded image.", width="800", height="647" %}
+</figure>
+
+### Defined container dimensions
+
+We specified explicit dimensions for all images and containers so that the browser engine doesn't need to calculate the DOM elements' width and height once they are available. This avoided unnecessary layout shifts and extra painting work.
+
+### Summarizing CLS goals and achievements
+
+Before beginning the optimization project, the team benchmarked their CLS score at **0.25**. We were able to reduce it significantly by **90%** to **0.09**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PvfZtgjSaShtmRASx5Mw.png", alt="CLS distributions shown in the Chrome User Experience Report. 76% of CLS values are 'Good', 15% are 'Fair', and 9% are 'Poor'. The 75th percentile of user experiences on The Economic Times website overall experienced a CLS of 0.09.", width="694", height="160" %}
+</figure>
+
+## What is First Input Delay (FID) and how did we improve it?
+
+[First Input Delay](/fid/) is the metric that tracks a website's responsiveness to user input. The primary cause of a poor FID score is heavy JavaScript work that keeps the browser's main thread busy, which can delay user interactions. We improved FID in several ways.
+
+### Break up long JavaScript tasks
+
+Long tasks are tasks that are 50 milliseconds or longer. Long tasks occupy the browser's main thread and prevent it from responding to user input. We broke up long running tasks into smaller tasks where possible on user request, which helped to reduce the Javascript bloat.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/rfFVGpifiTIaiMIFpTOv.png", alt="CPU time broken down by activity type in the performance panel of Chrome's DevTools. 143 milliseconds was spent scheduling the loading of resources. 4553 milliseconds was spent on JavaScript. 961 milliseconds was spent on rendering work. 191 milliseconds was spent on painting operations. 1488 milliseconds on system tasks, with 3877 milliseconds of idle time. The total timeframe was 11212 milliseconds.", width="800", height="501" %}
+</figure>
+
+### Defer unused JavaScript
+
+We prioritized page content over third-party scripts such as analytics to keep the page more responsive. However, there are certain limitations on some libraries since they need to be loaded in the document `<head>` in order to accurately track the user journey.
+
+### Reduce polyfills
+
+We reduced our dependency on certain polyfills and libraries, since browsers provide support for modern APIs, and less users are using legacy browsers, such as Internet Explorer.
+
+### Lazy load ads
+
+Lazily loading below-the-fold ads helped cut down main thread blocking time and thereby improved FID.
+
+### Summarizing FID goals and achievements
+
+From routine experiments, we were able to reduce our FID from 200 ms to under 50 ms today.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bqZP6cbsJhryp5E17dPV.png", alt="FID distributions shown in the Chrome User Experience Report. 86% of CLS values are 'Good', 10% are 'Fair', and 4% are 'Poor'. The 75th percentile of user experiences on The Economic Times website overall experienced a FID of 44 milliseconds.", width="720", height="190" %}
+</figure>
+
+## Preventing regressions
+
+The Economics Times plans to introduce automated performance checks in production to avoid page performance regressions. They plan to evaluate Lighthouse-CI to automate lab tests, which can prevent regressions on their production branch.
diff --git a/src/site/content/en/blog/economic-times-inp/index.md b/src/site/content/en/blog/economic-times-inp/index.md
new file mode 100644
index 00000000000..da622795d07
--- /dev/null
+++ b/src/site/content/en/blog/economic-times-inp/index.md
@@ -0,0 +1,166 @@
+---
+layout: post
+title: Economic Times quest for fixing INP
+subhead: |
+  Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews.
+description: |
+  Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews.
+authors:
+  - saurabhrajpal
+  - daya
+  - barunkumar
+date: 2023-05-10
+updated: 2023-05-15
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+[Interaction to Next Paint (INP)](/inp/) is a metric that assesses a website's responsiveness to user input. Good responsiveness means that a page is quick to respond to user interactions. The lower a page's INP is, the better it is able to respond to user interactions.
+
+<style>
+  .inp-mobile {
+    display: inline;
+  }
+
+  .inp-desktop {
+    display: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .inp-mobile {
+      display: none;
+    }
+
+    .inp-desktop {
+      display: inline;
+    }
+  }
+</style>
+<figure>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-mobile" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 296.6 220.2" style="enable-background:new 0 0 296.6 220.2" xml:space="preserve"><style>.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}</style><path class="st0" d="M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z"/><path class="st1" d="M0 137.1h96v38.4H0v-38.4z"/><path class="st2" d="M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z"/><path class="st3" d="M96 137.1h105.6v38.4H96v-38.4z"/><path class="st2" d="M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z"/><path class="st4" d="M200.6 137.1h96v38.4h-96v-38.4z"/><path class="st2" d="M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z"/></svg>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-desktop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 658.4 113.6" style="enable-background:new 0 0 658.4 113.6" xml:space="preserve"><style>.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}</style><path class="st0" d="M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z"/><path class="st1" d="M303.2 14.9h115.2v43.2H303.2V14.9z"/><path class="st2" d="M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z"/><path class="st3" d="M418.4 14.9h124.8v43.2H418.4V14.9z"/><path class="st2" d="M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z"/><path class="st4" d="M543.2 14.9h115.2v43.2H543.2V14.9z"/><path class="st2" d="M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z"/></svg>
+</figure>
+
+## The fuzzy beginning
+
+When Google initially introduced INP as an experimental metric with the potential to evolve into one of the Core Web Vitals metrics, the Economic Times team took up the challenge to fix it before it graduates into one, since providing a world class user experience is crucial to our core business values.
+
+INP has been one of the most difficult metrics to solve thus far. In the beginning, it was unclear on how to measure INP effectively. What made it more difficult was the lack of community support—including most Real User Monitoring (RUM) providers not supporting it yet. However, we had Google RUM tools like [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/about/), the [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals), and others supporting it, which gave us a sense of where we stood while we were evaluating the path ahead. Our INP was close to 1,000 milliseconds at the origin level when we started.
+
+One thing that emerged while fixing INP in [the field](/find-slow-interactions-in-the-field/) was that one of the lab metrics to target could be [Total Blocking Time (TBT)](/tbt/). TBT was already well documented and supported by the community. Despite already meeting the thresholds for Core Web Vitals, however, we weren't doing as well on the TBT front, as it was over 3 seconds when we began. 
+
+## What is TBT, and what steps did we take to improve it?
+
+TBT is a lab metric that measures the responsiveness of a web page to user input during page load. Any task that takes more than 50 milliseconds to execute is considered a long task, and the time after the 50 millisecond threshold is known as the **blocking time**.
+
+TBT is calculated by taking the sum of the blocking time of all long tasks during page load. For example, if there are two long tasks during load, the blocking time is determined as follows:
+
+- Task A takes 80 milliseconds (30 milliseconds more than 50 milliseconds).
+- Task B takes 100 milliseconds (50 milliseconds more than 50 milliseconds).
+
+The page's TBT will be: 80 milliseconds (30 + 50). The lower the TBT, the better, and TBT also [correlates well with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt).
+
+Here’s a quick lab comparison of our TBT before and after taking steps to improve it:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png", alt="A composite image of long tasks during startup as shown in the performance panel of Chrome DevTools, and a report of page metrics. The main thread is blocked during page load for 3,260 milliseconds.", width="800", height="502" %}
+  <figcaption>
+    The main thread during startup before optimizing TBT. The TBT is 3,260 milliseconds.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png", alt="A composite image of long tasks during startup as shown in the performance panel of Chrome DevTools, and a report of page metrics. The main thread is blocked during page load for 120 milliseconds.", width="800", height="701" %}
+  <figcaption>
+    The main thread during startup after optimizing TBT. The TBT is 120 milliseconds.
+  </figcaption>
+</figure>
+
+### Minimize main thread work
+
+The browser’s main thread handles everything from parsing HTML, building the DOM, to parsing CSS and applying styles, as well as evaluating and executing JavaScript. The main thread also handles user interactions—that is, click, tap, and keypresses. If the main thread is occupied with doing other work, it may not respond to user inputs efficiently, and may lead to a janky user experience.
+
+This was the most difficult task for us, since we have our own algorithms to detect user identity for serving ads based on subscription status and third party scripts for A/B testing, analytics, and more.
+
+We took small steps at first, such as de-prioritizing loading of less critical business assets. Second, we used [`requestIdleCallback`](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback) for non-critical work, which can help to reduce TBT.
+
+```js
+if ('requestIdleCallback' in window) {
+  this.requestIdleCallbackId = requestIdleCallback(fetchMarketsData.bind(this), {timeout: 3000});
+} else {
+  fetchMarketsData(); // Fallback in case requestIdleCallback is not supported
+}
+```
+
+Specifying a timeout is recommended when using `requestIdleCallback`, since it makes sure that if the given time is elapsed and the callback is not already been called, it executes the callback immediately after the timeout.
+
+### Minimize script evaluation time
+
+We also lazy loaded third party libraries using [Loadable components](https://loadable-components.com/). We also removed unused JavaScript and CSS by profiling the page with the [coverage tool](https://developer.chrome.com/docs/devtools/coverage/) in Chrome DevTools. It helped us to identify areas where [tree shaking](https://webpack.js.org/guides/tree-shaking/) was needed to ship less code during page load, and therefore reduce the initial bundle size of the application.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png", alt="A screenshot of the coverage tool in Chrome DevTools. Here, the tool displays unused portions of JavaScript and CSS files during page load.", width="800", height="100" %}
+</figure>
+
+### Reduce DOM size
+
+Per Lighthouse, large DOM sizes increase memory usage, causes longer [style recalculations](reduce-the-scope-and-complexity-of-style-calculations/), and produces costly [layout reflows](https://developers.google.com/speed/docs/insights/browser-reflow).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png", alt="A screenshot of the DOM size audit in Lighthouse. The number of DOM elements reported is 2,706 elements.", width="712", height="86" %}
+</figure>
+
+We reduced the number of DOM nodes in two ways:
+
+- First, we rendered our menu items at the user’s request (on click). It decreased the DOM size by around 1,200 nodes.
+- Second, we lazy loaded less important widgets.
+
+Because of all these efforts, we reduced TBT significantly, and our INP was reduced accordingly by almost 50%:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png", alt="A screenshot of the INP audit in CrUX. The INP for the page is 539 milliseconds, which exceeds the 'poor' threshold.", width="574", height="216" %}
+</figure>
+
+At this point, we nearly ran out of easy wins to further reduce TBT (and INP by proxy), but we knew we had a lot of room for improvement. This is when we decided to upgrade our custom-built UI boilerplate to the latest version of React along with [Next.js](https://nextjs.org/) to make better use of [hooks](https://react.dev/reference/react) to avoid unnecessary re-rendering of components.
+
+Due to more frequent updates and comparatively lesser traffic as compared to the other portions of the website, we began to migrate our [topic pages](https://economictimes.indiatimes.com/topic/home) to Next.js. We also used [PartyTown](https://partytown.builder.io/) for offloading additional heavy main thread work to web workers, along with techniques like `requestIdleCallBack` for deferring non-critical tasks.
+
+## How has improving INP helped The Economic Times?
+
+### Current TBT and INP on origin
+
+At the time of publishing this post, the TBT for our origin was 120 milliseconds, down from 3,260 milliseconds when we began our optimization efforts. Similarly, the INP for our origin was 257 milliseconds after our optimization efforts, down from over 1,000 milliseconds.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png", alt="A screenshot of the INP audit in CrUX. The INP for the page is 257 milliseconds, which is within the 'needs improvement' thresholds.", width="582", height="218" %}
+</figure>
+
+### INP CrUX trend
+
+The traffic received on topic pages represents a significantly smaller portion of overall traffic. Hence, it was an ideal place for experimentation. The CrUX results along with the business outcomes were very encouraging, and led us to expand our efforts across the entire website to reap further benefits.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png", alt="A screenshot of INP distributions as visualized in CrUX over a period of four months, starting in July 2022 and ending in October 2022. Values within the 'poor' and 'needs improvement' thresholds declined somewhat, while the values within the 'good' threshold increased.", width="800", height="190" %}
+</figure>
+
+### Akamai mPulse TBT Analysis
+
+We use [Akamai mPulse](https://www.akamai.com/products/mpulse-real-user-monitoring) as our RUM solution, which measures TBT in the field. We observed a consistent decrease in TBT, clearly mapping to the outcomes of our efforts to reduce INP. As can be seen in the screenshot below, TBT values eventually dropped from approximately 5 seconds in to around 200 milliseconds in the field.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png", alt="A screenshot of a chart in Akamai mPulse, showing a decline in TBT over the course of roughly a month.", width="800", height="118" %}
+</figure>
+
+## Business outcome
+
+Overall, our efforts to bring down TBT by 30 times, along with migrating to Next.js helped us reduce INP nearly by 4 times, which eventually led to a **50% decrease in bounce rate and 43% uplift in pageviews** on topic pages.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png", alt="A screenshot of Google Analytics comparing pageviews versus bounce rate. Because of the optimizations made to INP on The Economic Times website, a 50% decrease in bounce rate and a 43% increase in pageviews was realized.", width="800", height="288" %}
+</figure>
+
+## Conclusion
+
+To summarize, INP extensively helped to determine runtime performance issues on parts of the Economic Times website. It has proven to be one of the most effective metrics to positively impact business outcomes. Due to the very encouraging numbers we've observed as the result of this effort, we are motivated to scale our optimization efforts to other areas of our website and reap additional benefits.
diff --git a/src/site/content/en/blog/effectivemanagement/index.md b/src/site/content/en/blog/effectivemanagement/index.md
new file mode 100644
index 00000000000..5d6d68b8ffd
--- /dev/null
+++ b/src/site/content/en/blog/effectivemanagement/index.md
@@ -0,0 +1,209 @@
+---
+layout: post
+title: Effectively managing memory at Gmail scale
+authors:
+  - johnmccutchan
+  - loreenalee
+date: 2013-06-12
+tags:
+  - blog
+---
+
+
+## Introduction
+
+While JavaScript employs garbage collection for automatic memory management, it is not a substitute for effective memory management in applications. JavaScript applications suffer from the same memory related problems that native applications do, such as memory leaks and bloat, yet they must also deal with garbage collection pauses. Large-scale applications like Gmail encounter the same problems facing your smaller applications. Read on to learn how the Gmail team used Chrome DevTools to identify, isolate, and fix their memory problems.
+
+## Google I/O 2013 Session
+
+We presented this material at Google I/O 2013. Check out the video below:
+
+{% YouTube id="x9Jlu_h_Lyw" %}
+
+## Gmail, we have a problem…
+
+The Gmail team was facing a serious problem. Anecdotes of Gmail tabs consuming multiple gigabytes of memory on resource-constrained laptops and desktops were being heard increasingly frequently, often with a conclusion of bringing the entire browser down. Stories of CPUs being pinned at 100%, unresponsive apps, and Chrome sad tabs ("He's dead, Jim."). The team was at a loss as to how to even begin diagnosing the problem, let alone fix it. They had no idea how widespread the problem was and the available tools didn't scale up to large applications. The team joined forces with the Chrome teams, and together they developed new techniques to triage memory problems, improved existing tools, and enabled the collection of memory data from the field. But, before getting to the tools, let's cover the basics of JavaScript memory management.
+
+## Memory Management Basics
+
+Before you can effectively manage memory in JavaScript you must understand the fundamentals. This section will cover primitive types, the object graph, and provide definitions for memory bloat in general and a memory leak in JavaScript. Memory in JavaScript can be conceptualized as a graph and because of this [Graph theory](http://en.wikipedia.org/wiki/Graph_theory) plays a part in JavaScript memory management and the [Heap Profiler](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots/)</a>.
+
+### Primitive Types
+
+JavaScript has three primitive types:
+
+1. Number (e.g. 4, 3.14159)
+1. Boolean (true or false)
+1. String ("Hello World")
+
+These primitive types cannot reference any other values. In the object graph these values are always leaf or terminating nodes, meaning they never have an outgoing edge.
+
+There is only one container type: the Object. In JavaScript the Object is an <a  href="http://en.wikipedia.org/wiki/Associative_array">associative array</a>. A non-empty object is an inner node with outgoing edges to other values (nodes).
+
+### What About Arrays?
+
+An Array in JavaScript is actually an Object that has numeric keys. This is a simplification, because JavaScript runtimes will optimize Array-like Objects and represent them under the hood as arrays.
+
+#### Terminology
+
+1. Value - An instance of a primitive type, Object, Array, etc.
+1. Variable - A name that references a value.
+1. Property - A name in an Object that references a value.
+
+### Object Graph
+
+All values in JavaScript are part of the object graph. The graph begins with roots, for example, the [window object](https://developer.mozilla.org/docs/DOM/window). Managing the lifetime of GC roots is not in your control, as they are created by the browser and destroyed when the page is unloaded. Global variables are actually properties on window.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Jfzt0p3AgPh36QYiKoy7.png", alt="Object graph", width="800", height="376" %}
+</figure>
+
+### When Does a Value Become Garbage?
+
+A value becomes garbage when there is no path from a root to the value. In other words, starting at the roots and exhaustively searching all Object properties and variables that are alive in the [stack frame](http://en.wikipedia.org/wiki/Call_stack), a value cannot be reached, it has become garbage.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/obCcXCpk9znOJlkNYo3P.png", alt="Garbage graph", width="566", height="290" %}
+</figure>
+
+### What is a Memory Leak in JavaScript?
+
+A memory leak in JavaScript most commonly occurs when there are DOM nodes that are not reachable from the page's DOM tree, but are still referenced by a JavaScript object. While modern browsers are making it increasingly difficult to inadvertently create leaks, it's still easier than one might think. Let's say you append an element to the DOM tree like this:
+
+```js
+email.message = document.createElement("div");
+displayList.appendChild(email.message);
+```
+
+And later, you remove the element from the display list:
+
+```js
+displayList.removeAllChildren();
+```
+
+As long as `email` exists, the DOM element referenced by message will not be removed, even though it is now detached from the page's DOM tree.
+
+### What is Bloat?
+
+Your page is [bloated](http://en.wikipedia.org/wiki/Software_bloat) when you're using more memory than necessary for optimal page speed. Indirectly, memory leaks also cause bloat but that is not by design. An application cache that does not have any size bound is a common source of memory bloat. Also, your page can be bloated by host data, for example, pixel data loaded from images.
+
+### What is Garbage Collection?
+
+Garbage collection is how memory is reclaimed in JavaScript. The browser decides when this happens. During a collection, all script execution on your page is suspended while live values are discovered by a traversal of the object graph starting at the GC roots. All the values which are not [reachable](http://en.wikipedia.org/wiki/Reachability) are classified as garbage. Memory for garbage values is reclaimed by the memory manager.
+
+## V8 Garbage Collector in Detail
+
+To help further understand how garbage collection happens, let's take a look at the V8 garbage collector in detail. V8 uses a generational collector. Memory is divided into two generations: the young and the old. Allocation and collection within the young generation is fast and frequent. Allocation and collection within the old generation is slower and less frequent.
+
+### Generational Collector
+
+V8 uses a two generation collector. The age of an value is defined as the number of bytes allocated since it was allocated. In practice, the age of an value is often approximated by the number of young generation collections that it survived. After a value is sufficiently old it is tenured into the old generation.
+
+In practice, freshly allocated values do not live long. A study of Smalltalk programs, showed that only 7% of values survive after a young generation collection. Similar studies across runtimes found that on average between, 90% and 70%  of freshly allocated values are never tenured into the old generation.
+
+### Young Generation
+
+The young generation heap in V8 is split into two spaces, named from and to. Memory is allocated from the to space. Allocating is very fast, until, the  to space is full at which point a young generation collection is triggered. Young generation collection first swaps the from and to space, the old to space (now the from space) is scanned and all live values are copied into the to space or tenured into the old generation. A typical young generation collection will take on the order of 10 milliseconds (ms).
+
+Intuitively, you should understand that each allocation your application makes brings you closer exhausting the to space and incurring a GC pause. Game developers, take note: to ensure a 16ms frame time (required to achieve 60 frames per second), your application must make zero allocations, because a single young generation collection will eat up most of the frame time.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vTvyvQYDtjgTpXNaHEuC.png", alt="Young generation heap", width="637", height="381" %}
+</figure>
+
+### Old Generation
+
+The old generation heap in V8 uses a [mark-compact algorithm](http://en.wikipedia.org/wiki/Mark-compact_algorithm) for collection. Old generation allocations occur whenever a value is tenured from the young generation to the old generation. Whenever an old generation collection occurs a young generation collection is done as well. Your application will paused on the order of seconds. In practice this is acceptable because old generation collections are infrequent.
+
+### V8 GC Summary
+
+Automatic memory management with garbage collection is great for developer productivity, but, each time you allocate a value, you move ever closer to a garbage collection pause. Garbage collection pauses can ruin the feel of your application by introducing jank. Now that you understand how JavaScript manages memory, you can make the right choices for your application.
+
+## Fixing Gmail
+
+Over the past year, numerous features and bug fixes have made their way into the Chrome DevTools making them more powerful than ever. In addition, the browser itself made a key change to the performance.memory API making it possible for Gmail and any other application to collect memory statistics from the field. Armed with these awesome tools, what once seemed like an impossible task soon became an exciting game of tracking down culprits.
+
+### Tools and Techniques
+
+#### Field Data and performance.memory API
+
+As of Chrome 22, the [performance.memory API](http://docs.webplatform.org/wiki/apis/timing/properties/memory) is enabled by default.  For long-running applications like Gmail, data from real users is invaluable. This information allows us to distinguish between power users-- those who spend 8-16 hours a day on Gmail, receiving hundreds of messages a day-- from more average users who spend a few minutes a day in Gmail, receiving a dozen or so messages a week.
+
+This API returns three pieces of data:
+
+1. jsHeapSizeLimit - The amount of memory (in bytes) that the JavaScript heap is limited to.
+1. totalJSHeapSize - The amount of memory (in bytes) that the JavaScript heap has allocated including free space.
+1. usedJSHeapSize - The amount of memory (in bytes) currently being used.
+
+One thing to keep in mind is that the API returns memory values for the entire Chrome process. Although it is not the default mode, under certain circumstances, Chrome may open multiple tabs in the same renderer process. This means that the values returned by performance.memory may contain the memory footprint of other browser tabs in addition to the one containing your app.
+
+#### Measuring Memory At Scale
+
+Gmail instrumented their JavaScript to use the performance.memory API to collect memory information approximately once every 30 minutes.  Because many Gmail users leave the app up for days at a time, the team was able to track memory growth over time as well as overall memory footprint statistics. Within a few days of instrumenting Gmail to collect memory information from a random sampling of users, the team had enough data to understand how widespread the memory problems were among average users. They set a baseline and used the stream of incoming data to track progress toward the goal of reducing memory consumption. Eventually this data would also be used to catch any memory regressions.
+
+Beyond tracking purposes, the field measurements also provide a keen insight into the correlation between memory footprint and application performance.  Contrary to the popular belief that "more memory results in better performance", the Gmail team found that the larger the memory footprint, the longer latencies were for common Gmail actions. Armed with this revelation, they were more motivated than ever to rein in their memory consumption.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/kEqrgQ3eeXVke53FRBwK.png", alt="Measuring Memory At Scale", width="562", height="186" %}
+</figure>
+
+#### Identifying a Memory Problem with the DevTools Timeline
+
+The first step in solving any performance problem is to prove that the problem exists, create a reproducible test, and take a baseline measurement of the problem. Without a reproducible program, you cannot reliably measure the problem. Without a baseline measurement you don't know by how much you've improved performance.
+
+The DevTools Timeline panel is an ideal candidate for proving that the problem exists. It gives a complete overview of where time is spent when loading and interacting with your web app or page. All events, from loading resources to parsing JavaScript, calculating styles, garbage collection pauses, and repainting are plotted on a timeline. For the purposes of investigating memory issues, the Timeline panel also has a Memory mode which tracks total allocated memory, number of DOM nodes, number of window objects, and the number of event listeners allocated.
+
+#### Proving a problem exists
+
+Start by identifying a sequence of actions you suspect to be leaking memory. Start recording the timeline, and perform the sequence of actions.  Use the trash can button at the bottom to force a full garbage collection.  If, after a few iterations, you see a [sawtooth](http://en.wikipedia.org/wiki/Sawtooth_wave) shaped graph, you are allocating lots of shortly lived objects. But if the sequence of actions is not expected to result in any retained memory, and the DOM node count does not drop down back to the baseline where you began, you have good reason to suspect there is a leak.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eSh0rNSTOPQOiz9jadTw.png", alt="Sawtooth shaped graph", width="565", height="347" %}
+</figure>
+
+Once you've confirmed that the problem exists, you can get help identifying the source of the problem from the DevTools Heap Profiler.
+
+#### Finding Memory Leaks with the DevTools Heap Profiler
+
+The Profiler panel provides both a CPU profiler and a Heap profiler. Heap profiling works by taking a snapshot of the object graph. Before a snapshot is taken both the young and old generations are garbage collected. In other words, you will only see values which were alive when the snapshot was taken.
+
+There is too much functionality in the Heap profiler to cover sufficiently in this article, but [detailed documentation](https://developer.chrome.com/devtools/docs/javascript-memory-profiling) can be found on the Chrome Developers site. We'll focus here on the Heap Allocation profiler.
+
+#### Using the Heap Allocation Profiler
+
+The Heap Allocation profiler combines the detailed snapshot information of the Heap Profiler with the incremental updating and tracking of the Timeline panel. Open the Profiles panel, start a __Record Heap Allocations__ profile, perform a sequence of actions, then stop the recording for analysis. The allocation profiler takes heap snapshots periodically throughout the recording (as frequently as every 50 ms!) and one final snapshot at the end of the recording.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4oCSZ0RNIBiSKYh9KvVo.png", alt="Heap allocation profiler", width="616", height="321" %}
+</figure>
+
+The bars at the top indicate when new objects are found in the heap.  The height of each bar corresponds to the size of the recently allocated objects, and the color of the bars indicate whether or not those objects are still live in the final heap snapshot: blue bars indicate objects that are still live at the end of the timeline, gray bars indicate objects that were allocated during the timeline, but have since been garbage collected.
+
+In the example above, an action was performed 10 times.  The sample program caches five objects, so the last five blue bars are expected.  But the leftmost blue bar indicates a potential problem. You can then use the sliders in the timeline above to zoom in on that particular snapshot and see the objects that were recently allocated at that point.  Clicking on a specific object in the heap will show its retaining tree in the bottom portion of the heap snapshot. Examining the retaining path to the object should give you enough information to understand why the object was not collected, and you can make the necessary code changes to remove the unnecessary reference.
+
+## Resolving Gmail's Memory Crisis
+
+By using the tools and techniques discussed above, the Gmail team was able to identify a few categories of bugs:  unbounded caches, infinitely growing arrays of callbacks waiting for something to happen that never actually happens, and event listeners unintentionally retaining their targets. By fixing these issues, the overall memory usage of Gmail was dramatically reduced. Users in the 99% percent used 80% less memory than before and the memory consumption of the median users dropped by nearly 50%.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/r90bVuT8hhy4GiHeRBZd.png", alt="Gmail memory usage", width="800", height="420" %}
+</figure>
+
+Because Gmail used less memory the GC pause latency was reduced, increasing the overall user experience.
+
+Also of note, with the Gmail team collecting statistics on memory usage, they were able to uncover garbage collection regressions inside Chrome. Specifically, two fragmentation bugs were discovered when Gmail's memory data began showing a dramatic increase in the gap between total memory allocated and live memory.
+
+## Call to Action
+
+Ask yourself these questions:
+
+1. How much memory is my app using?
+    It's possible that you are using too much memory which contrary to popular belief has a net negative on overall application performance. It's hard to know exactly what the right number is, but, be sure to verify that any extra caching your page is using has a measurable performance impact.
+1. Is my page leak free?
+    If your page has memory leaks it can not only impact your page's performance but other tabs as well. Use the object tracker to help narrow in on any leaks.
+1. How frequently is my page GCing?
+    You can see any GC pause using [Timeline panel](https://developer.chrome.com/docs/devtools/evaluate-performance/performance-reference/) in [Chrome Developer Tools](https://developer.chrome.com/docs/devtools/). If your page is GCing frequently, chances are you are allocating too frequently, churning through your young generation memory.
+
+## Conclusion
+
+We started off in a crisis. Covered the core basics of memory management in JavaScript and V8 in particular. You learned how to use the tools, including the new object tracker feature available in the latest builds of Chrome. The Gmail team, armed with this knowledge, solved their memory usage problem and saw improved performance. You can do the same with your web apps!
diff --git a/src/site/content/en/blog/eleme/index.md b/src/site/content/en/blog/eleme/index.md
new file mode 100644
index 00000000000..e94d310dfb5
--- /dev/null
+++ b/src/site/content/en/blog/eleme/index.md
@@ -0,0 +1,120 @@
+---
+layout: post
+title: Ele.me improves performance load times with a multi-page Progressive Web App
+description: |
+    Ele.me is the biggest food ordering and delivery company in mainland China. They built their Progressive Web App (PWA) as a multi-page app to improve its mobile web experience, making it faster and more reliable in flaky connections, while accommodating their operational needs to best serve their customers.
+date: 2017-09-27
+updated: 2018-01-12
+tags:
+  - blog
+  - case-study
+
+---
+
+[Ele.me](https://ele.me) is the biggest food ordering and delivery company
+in mainland China. It serves 260 million registered users from over 200
+cities all around China, and has over 1.3 million restaurant listings.
+With 99% of its users ordering food on mobile, Ele.me set out to improve its
+mobile web experience, making it faster and more reliable in flaky connections,
+all while relying on the core technical model of a multi-page app to
+accommodate their operational needs.
+
+- Loading time decreased by 11.6% across all pre-cached pages
+- Loading time decreased on average by 6.35% across all pages.
+- Time-to-consistently-interactive dropped to 4.93 seconds on a 3G network on
+  first load
+
+{% Blockquote 'Spencer Yang, Product Manager of Ele.me PWA' %}
+After we released the ele.me PWA, our loading times have dropped
+significantly, transforming our mobile web experience into one of the
+fastest food reservation sites in China.
+{% endBlockquote %}
+
+## Choosing between multi-page app and single page app
+
+In a multi-page app (MPA), every route that a user navigates to triggers
+a full request of the page, along with associated scripts and styles needed,
+to the server. This is in contrast to a single-page app (SPA) model, where
+every route navigation triggers a fetch just for the content and data
+relevant to that route, and the UI is then constructed by Javascript code
+running on the client app.
+
+The explosive growth of Ele.me in recent years has led to the growth of
+distinct business units within the company, each in charge of running its
+micro-service under the main [https://ele.me](https://ele.me) domain. The
+Ele.me team concluded that the decoupling of these individual services is
+best served by a multi-page app (MPA) model, with each team running and
+maintaining its own service.
+
+## Applying PRPL to a MPA
+
+The [PRPL pattern](/apply-instant-loading-with-prpl/) (**Preload**
+critical resources, **Render** initial route, **Pre-cache** remaining routes,
+**Lazy-load** remaining routes) provides web developers with a set of rails to
+guide the structure of a PWA, with a particular emphasis on a quick time to
+interactivity and maximizing caching to reduce network round trips. While PRPL
+has been well-tested on SPAs, it was less clear how one would actually apply it
+on a MPA. Ele.me decided to take on the PRPL mindset when thinking about a
+rebuild of their MPA as a PWA. To do that, they make sure that when a user
+navigates to a page, that they are **preloading** critical resources for that
+page by including `<link rel="preload">` as needed, or surfacing those scripts
+at a sufficiently shallow level so that the browser’s preloader can do its work
+without needing additional hints. They also progressively enhance their PWA by
+installing a service worker whenever it is supported by the browser, which they
+then use to fetch and **pre-cache** other top-level navigation routes so that
+the user gets a faster loading and rendering experience as they click around the
+PWA. Each page in a MPA is its own route, so speeding up the **rendering of the
+initial route** is equivalent to implementing best practices to optimize the
+critical rendering path for each route. With these changes, the overall loading
+time decreased on average by 6.35% across all pages.
+
+## Serving the transition skeleton screens ASAP
+
+Ele.me wanted to apply the idea of
+[skeleton screens](https://medium.com/@owencm/reactive-web-design-the-secret-to-building-web-apps-that-feel-amazing-b5cbfe9b7c50)
+into the UX, which is a way to ensure that whenever the user taps any button
+or link, the page reacts as soon as possible by transitioning the user to that
+new page, and then loading in content to that page as the content becomes
+available; this is also the key to improving the perceived performance of
+the PWA. However, since each page in a MPA is its own initial route, each
+navigation requires redoing all the necessary loading, parsing, and evaluation
+work every single time.
+
+To work around this, Ele.me built the skeleton screen as an actual UI
+component, and then used Vue.js’ Server Side Rendering stack to build and
+then pre-render the Vue components to strings before injecting them into
+HTML templates. This allows them to render the skeleton screen directly and
+achieve a more fluid transition when navigating between pages.
+
+<figure class="attempt-left">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/D34sIVjYodxw0yDo96N6.png", alt="Skeleton screen during page transition", width="274", height="487" %}
+  <figcaption>Skeleton screen during page transition</figcaption>
+</figure>
+<figure class="attempt-right">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aQhQ4MhlvdCeemZWZgET.png", alt="Page fully rendered after page transition", width="273", height="484" %}
+  <figcaption>Page fully rendered after page transition</figcaption>
+</figure>
+
+
+
+## Caching shared resources with service worker
+
+Different routes are loaded as a user browses around the PWA, and it would be a
+waste to load these routes from the network over and over again. To tackle this,
+Ele.me analyzed the critical routes that users care about most, created a
+webpack plugin to collect the dependencies of these critical routes, and then
+precached these routes when they install a service worker on the user’s client
+browser. These critical routes include the Javascript, CSS, and images that form
+the typical UI shell of the PWA.
+
+Routes that are considered important, but not critical, are incrementally cached
+by the service worker at runtime instead as the user continues to navigate
+through the PWA. This allows Ele.me to serve the PWA to users directly from
+cache under all network conditions. The result: loading time decreased by 11.6%
+across all pre-cached pages.
+
+
+## Further reading
+
+- [Upgrading Ele.me to a Progressive Web App](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509)
+- [Building a PWA at Ele.me](https://zhuanlan.zhihu.com/p/25800461) (Chinese)
diff --git a/src/site/content/en/blog/embed-best-practices/index.md b/src/site/content/en/blog/embed-best-practices/index.md
new file mode 100644
index 00000000000..4e7bad159a4
--- /dev/null
+++ b/src/site/content/en/blog/embed-best-practices/index.md
@@ -0,0 +1,321 @@
+---
+layout: post
+title: Best practices for using third-party embeds
+subhead: An overview of techniques to load popular third-party embeds efficiently.
+date: 2021-10-05
+updated: 2021-10-05
+authors:
+  - leenasohoni
+  - addyosmani
+  - katiehempenius
+description: |
+  This article discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/aeToz7Hb1mx63bHBXTDx.jpeg
+alt: A phone with a YouTube play button
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Many sites use third-party embeds to create an engaging user experience by delegating some sections of a web page to another content provider. The most common examples of third-party content embeds are video players, social-media feeds, maps, and advertisements.
+
+Third-party content can impact the performance of a page in many ways. It can be render-blocking, contend with other critical resources for network and bandwidth, or affect the Core Web Vitals metrics. Third-party embeds may also cause layout shifts as they load. This article discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques, and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
+
+{% Aside %}
+It's best to use the techniques described in this post to load only offscreen or non-primary page content. This ensures that all the critical content gets indexed by [search engines](https://developers.google.com/search/docs/advanced/javascript/lazy-loading).
+{% endAside %}
+
+## What is an embed
+
+A third-party embed is any content displayed on your site that is:
+* Not authored by you
+* Served from third-party servers
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/QfPvNJo9yN6IcxvWqYWI.jpeg", alt="Multiple offscreen embeds are shown, which could be lazy-loaded", width="800", height="450" %}
+
+Embeds are frequently used in the following:
+* Websites related to sports, news, entertainment, and fashion use videos to augment textual content.
+* Organizations with active Twitter or social media accounts embed feeds from these accounts to their web pages to engage and reach out to more people.
+* Restaurant, park, and event venue pages often embed maps.
+
+Third-party embeds are typically loaded in [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe) elements on the page. Third-party providers offer HTML snippets often consisting of an `<iframe>` that pulls in a page composed of markup, scripts, and stylesheets. Some providers also use a script snippet that dynamically injects an `<iframe>` to pull other content in. This can make the third-party embeds heavy and affect the performance of the page by delaying its first-party content.
+
+## Performance impact of third-party embeds
+
+Many popular embeds include over 100&nbsp;KB of JavaScript, sometimes even going up to 2&nbsp;MB. They take more time to load and keep the main thread busy when executing. Performance monitoring tools such as [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and [Chrome DevTools](https://developer.chrome.com/docs/devtools/) help to [measure the impact of third-party embeds on performance](/identify-slow-third-party-javascript/).
+
+[Reduce the impact of third-party code](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/) Lighthouse audit shows the list of third-party providers a page uses, with size and main-thread blocking time. The audit is available through Chrome DevTools under the Lighthouse tab.
+
+It is a good practice to periodically audit the performance impact of your embeds and third-party code because embed source code may change. You can use this opportunity to remove any redundant code.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/WektrXQsgQPMWy2hxQ4E.png", alt="Reduce the impact of third-party code", width="800", height="738" %}
+
+## Loading best practices
+
+Third-party embeds can negatively impact performance, but they also offer important functionalities. To efficiently use third-party embeds and reduce their performance impact, follow the guidelines below.
+
+### Script ordering
+
+In a well-designed page, the key first-party content will be the focus of the page, while the third-party embeds will occupy side-bars or appear after the first-party content.
+
+For the best user experience, the main content should load quickly and before any other supporting content. For example, the news text on a news page should load before embeds for a Twitter feed or advertisements.
+
+Requests for third-party embeds can get in the way of loading first-party content, so the position of a third-party script tag is important. Scripts can affect the loading sequence because the DOM construction pauses while scripts are executed. Place third-party script tags after the key first-party tags and [use `async` or `defer`](/efficiently-load-third-party-javascript/#use-async-or-defer) attributes to load them asynchronously.
+
+
+```html
+<head>
+   <title>Order of Things</title>
+   <link rel="stylesheet" media="screen" href="/assets/application.css">
+   <script src="index.js"></script>
+   <script src="https://example.com/3p-library.js" async></script>
+</head>
+```
+
+### Lazy-loading
+
+Since third-party content usually comes after the primary content, it may not be visible in the viewport when the page loads. In that case, downloading third-party resources may be deferred until the user scrolls down to that part of the page. This not only helps optimize the initial page load but also reduces the download costs for users on fixed data plans and slow network connections.
+
+Delaying the download of content until it is actually needed is called [lazy-loading](/lazy-loading-best-practices/). Depending on the requirements and the type of embed, you can use different lazy-loading techniques explained below.
+
+
+#### Native lazy-loading for `<iframe>`
+
+For third-party embeds loaded through `<iframe>` elements, you can use browser-level lazy-loading to defer loading offscreen iframes until users scroll near them. The [loading attribute for `<iframe>` is available in Chrome 77](/iframe-lazy-loading/) and above and has [also been introduced](https://caniuse.com/loading-lazy-attr) to other Chromium-based browsers.
+
+```html
+<iframe src="https://example.com"
+       loading="lazy"
+       width="600"
+       height="400">
+</iframe>
+```
+
+The loading attribute supports the following values:
+
+* `lazy`: Indicates that the browser should defer loading the iframe. The browser will load the iframe when it is nearing the viewport. Use if the iframe is a good candidate for lazy-loading.
+* `eager`: Loads the iframe immediately. Use if the iframe is not a good candidate for lazy-loading. If the `loading` attribute has not been specified, this is the default behavior—except in [Lite mode](https://support.google.com/chrome/answer/2392284?hl=en&co=GENIE.Platform%3DAndroid).
+* `auto`: The browser determines whether to lazy-load this frame.
+
+Browsers that don’t support the `loading` attribute ignore it, so you can apply native lazy-loading as a progressive enhancement. Browsers that support the attribute may have different implementations for the [distance-from-viewport](/browser-level-image-lazy-loading/#distance-from-viewport-thresholds) threshold (the distance at which the iframe starts loading).
+
+Following are some ways in which you can lazy load iframes for different types of embeds.
+
+* YouTube videos: To lazy-load a YouTube video player iframe,  include the `loading` attribute to the embed code provided by YouTube. Lazy loading the YouTube embed can save approximately 500&nbsp;KB on the initial page load.
+
+```html
+<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
+   width="560" height="315"
+   loading="lazy"
+   title="YouTube video player"
+   frameborder="0"
+   allow="accelerometer; autoplay; clipboard-write;
+            encrypted-media; gyroscope; picture-in-picture"
+   allowfullscreen>
+</iframe>
+```
+
+* Google Maps: To lazy-load a Google Map iframe, include the `loading` attribute in the code for the iframe embed generated by the [Google Maps Embed API](https://developers.google.com/maps/documentation/embed/get-started). Following is an example of the code with a placeholder for the Google Cloud API key.
+
+```html
+<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
+   width="600" height="450"
+   style="border:0;"
+   allowfullscreen=""
+   loading="lazy">
+</iframe>
+```
+
+#### lazysizes library
+
+Because browsers use an embed’s distance-from-viewport, in addition to signals like [effective connection type](https://googlechrome.github.io/samples/network-information/) and Lite-mode, to decide when an iframe should be loaded, native lazy-loading can be inconsistent. If you need better control on the distance thresholds or you want to provide a consistent lazy-loading experience across browsers, you can use the [lazysizes](https://github.com/aFarkas/lazysizes) library.
+
+[lazysizes](https://github.com/aFarkas/lazysizes) is a fast, SEO-friendly lazy loader for both images and iframes. Once you have downloaded the component, it can be used with an iframe for a YouTube embed as follows.
+
+
+```html
+<script src="lazysizes.min.js" async></script>
+
+<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
+   width="560" height="315"
+   class="lazyload"
+   title="YouTube video player"
+   frameborder="0"
+   allow="accelerometer; autoplay; clipboard-write;
+        encrypted-media; gyroscope; picture-in-picture"
+   allowfullscreen>
+</iframe>
+```
+Similarly, lazysizes may be used with iframes for other third-party embeds.
+
+Note that lazysizes uses the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) to detect when an element becomes visible.
+
+
+#### Using data-lazy in Facebook
+
+Facebook provides different types of [social plugins](https://developers.facebook.com/docs/plugins) that can be embedded. This includes posts, comments, videos, and the most popular _Like_ button. All plugins include a setting for `data-lazy`. Setting it to `true` ensures that the plugin will use the browser's lazy-loading mechanism by setting the `loading="lazy"` iframe attribute.
+
+
+#### Lazy-loading Instagram feeds
+
+Instagram provides a block of markup and a script as part of the embed. The script injects an `<iframe>` into the page. Lazy-loading this `<iframe>` can improve performance as the embed can be over 100&nbsp;KB gzipped in size. Many Instagram plugins for WordPress sites like [WPZoom](https://wordpress.org/plugins/instagram-widget-by-wpzoom/) and [Elfsight](https://www.mapledesign.co.uk/tech-blog/elfsight-instagram-feed-performance/) provide the lazy-loading option.
+
+
+### Replace embeds with facades
+
+While interactive embeds add value to the page, many users may not interact with them. For example, not every user browsing a restaurant page will click, expand, scroll, and navigate the map embed. Similarly, not every user to a telecom service providers page will interact with the chatbot. In these cases, you can avoid loading or lazy-loading the embed altogether by displaying a facade in its place.
+
+<div class="switcher">
+  <figure>
+    <figcaption>
+      A map embed with a zoom in and out feature.
+    </figcaption>
+    {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/Cn0x7aeqCw7M0X5b4L1P.png", alt="A map embed", width="800", height="725" %}
+  </figure>
+  <figure>
+    <figcaption>
+      A map facade that is an image.
+    </figcaption>
+    {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/f8z9MfvgIFiBkCLA1Qud.png", alt="A map facade", width="800", height="541" %}
+  </figure>
+</div>
+
+A [facade](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/) is a static element that looks similar to the actual embedded third-party but is not functional and, therefore, much less taxing on the page load. Following are a few strategies to load such embeds optimally while still providing some value to the user.
+
+#### Use static images as facades
+
+Static images can be used instead of map embeds where you might not need to make the map interactive. You can zoom in on the area of interest on the map, capture an image, and use this instead of the interactive map embed. You can also use DevTools **Capture node screenshot** functionality to capture a screenshot of the embedded `iframe` element, as shown below.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/EJvMAEUmF3QNUDGBgfNR.png", alt="Capture node screenshot", width="400", height="500" %}
+
+DevTools captures the image as a  `png`, but you can also consider converting it to <code>[WebP format for better performance](/serve-images-webp/)</code>.
+
+
+#### Use dynamic images as facades
+
+This technique allows you to generate images corresponding to an interactive embed at run time. Following are some of the tools that allow you to generate static versions of embeds on your pages.
+
+- **Maps Static API**: The Google [Maps Static API](https://developers.google.com/maps/documentation/maps-static/overview) service generates a map based on the URL parameters included in a standard HTTP request and returns the map as an image you can display on your web page. The URL needs to include the Google Maps API key and must be placed in the `<img>` tag on the page as the `src` attribute.
+
+    The [Static map maker](https://staticmapmaker.com/google/) tool helps to configure the parameters required for the URL and gives you the code for the image element in real-time.
+
+    The following snippet shows code for an image with the source set to a Maps Static API URL. It has been included in a link tag that ensures that the actual map can be accessed by clicking on the image. (Note: API key attribute is not included in the url)
+
+    ```html
+    <a href="https://www.google.com/maps/place/Albany,+NY/">
+    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
+    </a>
+    ```
+
+- **Twitter screenshots**: Similar to map screenshots, this concept allows you to dynamically embed a Twitter screenshot instead of the live feed. [Tweetpik](https://tweetpik.com/) is one of the tools that can be used to take screenshots of tweets. Tweetpik API accepts the URL of the tweet and returns an image with its contents. The API also accepts parameters to customize the background, colors, borders, and dimensions of the image.
+
+#### Use click-to-load to enhance facades
+
+The click-to-load concept combines lazy-loading and facades. The page initially loads with the facade. When the user interacts with the static placeholder by clicking on it, the third-party embed is loaded. This is also known as the [import on interaction](https://addyosmani.com/blog/import-on-interaction/) pattern and can be implemented using the following steps.
+
+1. On page load: Facade or static element is included on the page.
+2. On mouseover: Facade preconnects to the third-party embed provider.
+3. On click: The facade is replaced by the third-party product.
+
+Facades may be used with third-party embeds for video players, chat widgets, authentication services, and social media widgets. YouTube video embeds that are just images with a play button are facades that we come across frequently. The actual video loads only when you click on the image.
+
+You can build a custom click-to-load facade using the _import on interaction_ pattern or use one of the following open source facades available for different types of embeds.
+
++ YouTube facade
+
+    [Lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) is a recommended facade for the YouTube player, which looks like the real player but is 224 times faster. It can be used by downloading the script and stylesheet and then using the `<lite-youtube>` tag in HTML or JavaScript. Custom player parameters supported by YouTube may be included through the `params` attribute.
+
+    ```html
+    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+    ```
+	Following is a comparison between the lite-youtube-embed and the actual embed.
+
+  <div class="switcher">
+    <figure>
+      {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/EcTxjLs9SUb1ofALN8rA.png", alt="Lite YouTube embed", width="800", height="521" %}
+      <figcaption>
+        A lite-YouTube embed
+      </figcaption>
+    </figure>
+    <figure>
+      {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/cYG1NJqM8ZoLkYOi6xFJ.png", alt="Actual YouTube embed", width="800", height="502" %}
+      <figcaption>
+        A YouTube embed
+      </figcaption>
+    </figure>
+  </div>
+
+    Other similar facades available for YouTube and Vimeo players are [lite-youtube](https://github.com/justinribeiro/lite-youtube), [lite-vimeo-embed](https://github.com/luwes/lite-vimeo-embed), and [lite-vimeo](https://github.com/slightlyoff/lite-vimeo).
+
++ Chat widget facade
+
+    [React-live-chat-loader](https://github.com/calibreapp/react-live-chat-loader) loads a button that looks like a chat embed instead of the embed itself. It can be used with various chat provider platforms such as Intercom, Help Scout, Messenger, and so on. The look-alike widget is much lighter than the chat-widget and loads faster. It can be replaced by the actual chat widget when the user hovers or clicks on the button or if the page has been idle for a long time. The [Postmark case study](https://wildbit.com/blog/2020/09/30/getting-postmark-lighthouse-performance-score-to-100) explains how they implemented react-live-chat-loader and performance improvements they achieved.
+
+   {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/XyJON43TV8h1qWNZV1Ev.png", alt="Postmark chat widget", width="800", height="389" %}
+
+### Remove or replace embeds with links
+
+If you find that some third-party embeds result in poor loading performance and using any of the techniques above is not an option, the simplest thing that you can do is remove the embed entirely. If you still want your users to be able to access the content in the embed, you can provide a link to it with `target="_blank"` so that the user can click and view it in another tab.
+
+
+## Layout stability
+
+While dynamically loading embedded content can improve the loading performance of a page, it can sometimes cause unexpected movement of page content. This is known as layout shift.
+
+Since visual stability is important to guarantee a smooth user experience, [Cumulative Layout Shift (CLS)](/cls/) measures how often those shifts happen and how disruptive they are.
+
+Layout shifts can be avoided by reserving space during page load for elements that are going to be dynamically loaded later. The browser can determine the space to be reserved if it knows the width and height of the elements. You can ensure this by specifying the `width` and `height` attributes of iframes or by setting a fixed size for static elements where the third-party embed will be loaded. For example, an iframe for a YouTube embed should have width and height specified as follows.
+
+```html
+<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
+</iframe>
+```
+Popular embeds like YouTube, Google Maps, and Facebook provide the embed code with size attributes specified. However, there may be providers who do not include this. For example, this code snippet does not indicate the dimensions of the resulting embed.
+
+```html
+<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+```
+
+You can use DevTools to inspect the injected `iframe `after this page is rendered. As seen in the following snippet, the height of the injected iframe is fixed while the width is specified in percentage.
+
+```html
+<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
+</iframe>
+```
+
+This information can be used to set the size of the containing element to ensure that the container does not expand on loading the feed and there is no layout shift. Following snippet may be used to fix the size of the embed included previously.
+
+```html
+<style>
+    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
+    .twitter-timeline {height: 400px !important; }
+</style>
+<div class=twitterfeed>
+       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
+       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</div>
+```
+
+### Layout Shift Terminator
+
+Since third-party embeds often omit the dimensions (width, height) for the final content they render, they can cause significant layout shifts on a page. This problem can be tricky to address without manually inspecting the final sizes using DevTools at a variety of different viewport sizes.
+
+Now there’s an automated tool, [Layout Shift Terminator](https://googlechromelabs.github.io/layout-shift-terminator/), that can help you reduce layout shifts from popular embeds, such as from Twitter, Facebook, and other providers.
+
+Layout Shift Terminator:
+
+* Loads the embed client-side in an iframe.
+* Resizes the iframe to various popular viewport sizes.
+* For each popular viewport, captures the dimensions of the embed to later generate media queries and container queries.
+* Sizes a min-height wrapper around the embed markup using media queries (and container queries) until the embed initializes (after which the min-height styles are removed).
+* Generates an optimized embed snippet that can be copy/pasted where you would otherwise be including the embed in your page.
+
+ {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/lJrW6vxuf1G80XUmvXBT.png", alt="Layour shift Terminal", width="800", height="740" %}
+
+Try out the Layout Shift Terminator, and feel free to leave any feedback on [GitHub](https://github.com/GoogleChromeLabs/layout-shift-terminator). The tool is in a beta state and aims to improve over time with further refinements.
+
+## Conclusion
+
+Third-party embeds can provide a lot of value to users, but as the number and size of embeds on a page increases, performance can suffer. That’s why it is necessary to measure, judge, and use appropriate loading strategies for embeds based on their position, relevance, and potential users' needs.
diff --git a/src/site/content/en/blog/embind/index.md b/src/site/content/en/blog/embind/index.md
new file mode 100644
index 00000000000..7765fbb68cb
--- /dev/null
+++ b/src/site/content/en/blog/embind/index.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: Emscripten’s embind
+subhead: It binds JS to your wasm!
+date: 2018-08-20
+updated: 2019-09-23
+authors:
+  - surma
+
+description: |
+  Emscripten’s embind
+tags:
+  - blog
+  - webassembly
+
+---
+
+In my last [wasm article](/emscripting-a-c-library/), I talked
+about how to compile a C library to wasm so that you can use it on the web. One thing
+that stood out to me (and to many readers) is the crude and slightly awkward way
+you have to manually declare which functions of your wasm module you are using.
+To refresh your mind, this is the code snippet I am talking about:
+
+```js
+const api = {
+    version: Module.cwrap('version', 'number', []),
+    create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
+    destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
+};
+```
+
+Here we declare the names of the functions that we marked with
+`EMSCRIPTEN_KEEPALIVE`, what their return types are, and what the types of their
+arguments are. Afterwards, we can use the methods on the `api` object to invoke
+these functions. However, using wasm this way doesn't support strings and
+requires you to manually move chunks of memory around which makes many library
+APIs very tedious to use. Isn't there a better way? Why yes there is, otherwise
+what would this article be about?
+
+## C++ name mangling
+
+While the developer experience would be reason enough to build a tool that helps
+with these bindings, there's actually a more pressing reason: When you compile C
+or C++ code, each file is compiled separately. Then, a linker takes care of
+munging all these so-called object files together and turning them into a wasm
+file. With C, the names of the functions are still available in the object file
+for the linker to use. All you need to be able to call a C function is the name,
+which we are providing as a string to `cwrap()`.
+
+C++ on the other hand supports function overloading, meaning you can implement
+the same function multiple times as long as the signature is different (e.g.
+differently typed parameters). At the compiler level, a nice name like `add`
+would get _mangled_ into something that encodes the signature in the function
+name for the linker. As a result, we wouldn't be able to look up our function
+with its name anymore.
+
+{% Aside %}
+You can prevent the compiler from mangling your functions' names by annotating it with `extern "C"`.
+{% endAside %}
+
+## Enter embind
+
+[embind](https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html)
+is part of the Emscripten toolchain and provides you with a bunch of C++ macros
+that allow you to annotate C++ code. You can declare which functions, enums,
+classes or value types you are planning to use from JavaScript. Let's start
+simple with some plain functions:
+
+```cpp
+#include <emscripten/bind.h>
+
+using namespace emscripten;
+
+double add(double a, double b) {
+    return a + b;
+}
+
+std::string exclaim(std::string message) {
+    return message + "!";
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+    function("add", &add);
+    function("exclaim", &exclaim);
+}
+```
+
+
+Compared to my previous article, we are not including `emscripten.h` anymore, as
+we don't have to annotate our functions with `EMSCRIPTEN_KEEPALIVE` anymore.
+Instead, we have an `EMSCRIPTEN_BINDINGS` section in which we list the names under
+which we want to expose our functions to JavaScript.
+
+{% Aside %}
+The parameter for the `EMSCRIPTEN_BINDINGS` macro is mostly used to avoid
+name conflicts in bigger projects.
+{% endAside %}
+
+To compile this file, we can use the same setup (or, if you want, the same
+Docker image) as in the [previous
+article](/emscripting-a-c-library). To use embind,
+we add the `--bind` flag:
+
+
+```shell
+$ emcc --bind -O3 add.cpp
+```
+
+Now all that's left is whipping up an HTML file that loads our freshly
+created wasm module:
+
+```html
+<script src="/a.out.js"></script>
+<script>
+Module.onRuntimeInitialized = _ => {
+    console.log(Module.add(1, 2.3));
+    console.log(Module.exclaim("hello world"));
+};
+</script>
+```
+
+{% Aside %}
+If you are curious, [I wrote up the
+same](https://gist.github.com/surma/d04cd0fd896610575126d30de36d7eb6) C++ module
+_without_ embind to give you a feel for how much work it is doing for you.
+{% endAside %}
+
+As you can see, we aren't using `cwrap()` anymore. This just works straight out
+of the box. But more importantly, we don't have to worry about manually copying
+chunks of memory to make strings work! embind gives you that for free, along
+with type checks:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/j2YpEGF6Itd8ITPTqfvT.png", alt="DevTools errors when you invoke a function with the wrong number of arguments
+or the arguments have the wrong
+type", width="800", height="570" %}
+</figure>
+
+This is pretty great as we can catch some errors early instead of dealing with
+the occasionally quite unwieldy wasm errors.
+
+### Objects
+
+Many JavaScript constructors and functions use options objects. It's a nice
+pattern in JavaScript, but extremely tedious to realize in wasm manually. embind
+can help here, too!
+
+For example, I came up with this _incredibly_ useful C++ function that processes my
+strings, and I urgently want to use it on the web. Here is how I did that:
+
+  ```cpp
+#include <emscripten/bind.h>
+#include <algorithm>
+
+using namespace emscripten;
+
+struct ProcessMessageOpts {
+    bool reverse;
+    bool exclaim;
+    int repeat;
+};
+
+std::string processMessage(std::string message, ProcessMessageOpts opts) {
+    std::string copy = std::string(message);
+    if(opts.reverse) {
+    std::reverse(copy.begin(), copy.end());
+    }
+    if(opts.exclaim) {
+    copy += "!";
+    }
+    std::string acc = std::string("");
+    for(int i = 0; i < opts.repeat; i++) {
+    acc += copy;
+    }
+    return acc;
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+    value_object<ProcessMessageOpts>("ProcessMessageOpts")
+    .field("reverse", &ProcessMessageOpts::reverse)
+    .field("exclaim", &ProcessMessageOpts::exclaim)
+    .field("repeat", &ProcessMessageOpts::repeat);
+
+    function("processMessage", &processMessage);
+}
+```
+
+I am defining a struct for the options of my `processMessage()` function. In the
+`EMSCRIPTEN_BINDINGS` block, I can use `value_object` to make JavaScript see
+this C++ value as an object. I could also use `value_array` if I preferred to
+use this C++ value as an array. I also bind the `processMessage()` function, and
+the rest is embind _magic_. I can now call the `processMessage()` function from
+JavaScript without any boilerplate code:
+
+```js
+console.log(Module.processMessage(
+    "hello world",
+    {
+    reverse: false,
+    exclaim: true,
+    repeat: 3
+    }
+)); // Prints "hello world!hello world!hello world!"
+```
+
+### Classes
+
+For completeness sake, I should also show you how embind allows you to expose
+entire classes, which brings a lot of synergy with ES6 classes. You can probably
+start to see a pattern by now:
+
+```cpp
+#include <emscripten/bind.h>
+#include <algorithm>
+
+using namespace emscripten;
+
+class Counter {
+public:
+    int counter;
+
+    Counter(int init) :
+    counter(init) {
+    }
+
+    void increase() {
+    counter++;
+    }
+
+    int squareCounter() {
+    return counter * counter;
+    }
+};
+
+EMSCRIPTEN_BINDINGS(my_module) {
+    class_<Counter>("Counter")
+    .constructor<int>()
+    .function("increase", &Counter::increase)
+    .function("squareCounter", &Counter::squareCounter)
+    .property("counter", &Counter::counter);
+}
+```
+
+On the JavaScript side, this almost feels like a native class:
+
+```js
+<script src="/a.out.js"></script>
+<script>
+Module.onRuntimeInitialized = _ => {
+    const c = new Module.Counter(22);
+    console.log(c.counter); // prints 22
+    c.increase();
+    console.log(c.counter); // prints 23
+    console.log(c.squareCounter()); // prints 529
+};
+</script>
+```
+
+## What about C?
+
+embind was written for C++ and can only be used in C++ files, but that doesn't
+mean that you can't link against C files! To mix C and C++, you only need to
+separate your input files into two groups: One for C and one for C++ files and
+augment the CLI flags for `emcc` as follows:
+
+```shell
+$ emcc --bind -O3 --std=c++11 a_c_file.c another_c_file.c -x c++ your_cpp_file.cpp
+```
+
+## Conclusion
+
+embind gives you great improvements in the developer experience when working
+with wasm and C/C++. This article does not cover all the options embind offers.
+If you are interested, I recommend continuing with [embind's
+documentation](https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/embind.html).
+Keep in mind that using embind can make both your wasm module and your
+JavaScript glue code bigger by up to 11k when gzip'd — most notably on small
+modules. If you only have a very small wasm surface, embind might cost more than
+it's worth in a production environment! Nonetheless, you should definitely give
+it a try.
+
+
diff --git a/src/site/content/en/blog/eme-basics/index.md b/src/site/content/en/blog/eme-basics/index.md
new file mode 100644
index 00000000000..6bcb29f0594
--- /dev/null
+++ b/src/site/content/en/blog/eme-basics/index.md
@@ -0,0 +1,380 @@
+---
+layout: post
+title: EME WTF?
+subhead: An introduction to Encrypted Media Extensions
+date: 2014-01-16
+updated: 2016-03-17
+authors:
+  - samdutton
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Encrypted Media Extensions provides an API that enables web applications to interact with content protection systems, to allow playback of encrypted audio and video.
+
+EME is designed to enable the same app and encrypted files to be used in any browser, regardless of the underlying protection system. The former is made possible by the standardized APIs and flow while the latter is made possible by the concept of Common Encryption.
+
+EME is an extension to the `HTMLMediaElement` specification - hence the name. Being an 'extension' means that browser support for EME is optional: if a browser does not support encrypted media, it will not be able to play encrypted media, but EME is not required for HTML spec compliance. From [the EME spec](https://w3c.github.io/encrypted-media/):
+
+{% Aside %}
+
+This proposal extends [HTMLMediaElement](http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement) providing APIs to control playback of protected content.
+
+The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.
+
+This specification does not define a content protection or Digital Rights Management system. Rather, it defines a common API that may be used to discover, select and interact with such systems as well as with simpler content encryption systems. Implementation of Digital Rights Management is not required for compliance with this specification: only the Clear Key system is required to be implemented as a common baseline.
+
+The common API supports a simple set of content encryption capabilities, leaving application functions such as authentication and authorization to page authors. This is achieved by requiring content protection system-specific messaging to be mediated by the page rather than assuming out-of-band communication between the encryption system and a license or other server.
+
+{% endAside %}
+
+EME implementations use the following external components:
+
+- **Key System:** A content protection (DRM) mechanism. EME doesn't define Key Systems themselves, apart from Clear Key (more about that below).
+- **Content Decryption Module (CDM):** A client-side software or hardware mechanism that enables playback of encrypted media. As with Key Systems, EME doesn't define any CDMs, but provides an interface for applications to interact with CDMs that are available.
+- **License (Key) server:** Interacts with a CDM to provide keys to decrypt media. Negotiation with the license server is the responsibility of the application.
+- **Packaging service:** Encodes and encrypts media for distribution/consumption.
+
+Note that an application using EME interacts with a license server to get keys to enable decryption, but user identity and authentication are not part of EME. Retrieval of keys to enable media playback happens after (optionally) authenticating a user. Services such as Netflix must authenticate users within their web application: when a user signs into the application, the application determines the user's identity and privileges.
+
+## How does EME work?
+
+Here's how the components of EME interact, corresponding to the code example below:
+
+{% Aside %}
+If multiple formats or codecs are available, [`MediaSource.isTypeSupported()`](http://www.w3.org/TR/media-source/#widl-MediaSource-isTypeSupported-boolean-DOMString-type) or [`HTMLMediaElement.canPlayType()`](http://dev.w3.org/html5/spec-preview/media-elements.html#dom-navigator-canplaytype) can both be used to select the right one. However, the CDM may only support a subset of what the browser supports for unencrypted content. It's best to negotiate a [`MediaKeys`](https://w3c.github.io/encrypted-media/#mediakeys-interface) configuration before selecting a format and codec. If the application waits for the `encrypted` event but then `MediaKeys` shows it can't handle the chosen format/codec, it may be too late to switch without interrupting playback.
+
+The recommended flow is to negotiate `MediaKeys` first, using [`MediaKeysSystemAccess.getConfiguration()`](https://w3c.github.io/encrypted-media/#widl-MediaKeySystemAccess-getConfiguration-MediaKeySystemConfiguration) to find out the negotiated configuration.
+If there is only one format/codec to choose from, then there's no need for `getConfiguration()`. However, it's still preferable to set up `MediaKeys` first. The only reason to wait for the `encrypted` event is if there is no way of knowing whether the content is encrypted or not, but in practice that's unlikely.
+{% endAside %}
+
+1. A web application attempts to play audio or video that has one or more encrypted streams.
+1. The browser recognizes that the media is encrypted (see box below for how that happens) and fires an `encrypted` event with metadata (`initData`) obtained from the media about the encryption.
+1. The application handles the `encrypted` event:
+    1. If no `MediaKeys` object has been associated with the media element, first select an available Key System by using [`navigator.requestMediaKeySystemAccess()`](https://w3c.github.io/encrypted-media/#navigator-extension-requestmediakeysystemaccess) to check what Key Systems are available, then create a `MediaKeys` object for an available Key System via a `MediaKeySystemAccess` object. Note that initialization of the MediaKeys object should happen before the first `encrypted` event. Getting a license server URL is done by the app independently of selecting an available key system. A `MediaKeys` object represents all the keys available to decrypt the media for an audio or video element. It represents a CDM instance and provides access to the CDM, specifically for creating key sessions, which are used to obtain keys from a license server.
+    1. Once the `MediaKeys` object has been created, assign it to the media element: [`setMediaKeys()`](https://w3c.github.io/encrypted-media/#widl-HTMLMediaElement-setMediaKeys-Promise-void--MediaKeys-mediaKeys) associates the `MediaKeys` object with an HTMLMediaElement, so that its keys can be used during playback, i.e. during decoding.
+1. The app creates a `MediaKeySession` by calling `createSession()` on the `MediaKeys`. This creates a `MediaKeySession`, which represents the lifetime of a license and its key(s).
+1. The app generates a license request by passing the media data obtained in the `encrypted` handler to the CDM, by calling `generateRequest()` on the `MediaKeySession`.
+1. The CDM fires a `message` event: a request to acquire a key from a license server.
+1. The `MediaKeySession` object receives the `message` event and the application sends a message to the license server (via XHR, for example).
+1. The application receives a response from the license server and passes the data to the CDM using the `update()` method of the `MediaKeySession`.
+1. The CDM decrypts the media using the keys in the license. A valid key may be used, from any session within the `MediaKey`s associated with the media element. The CDM will access the key and policy, indexed by Key ID.
+1. Media playback resumes.
+
+Phew…
+
+{% Aside %}
+How does the browser know that media is encrypted?
+
+This information is in the metadata of the media container file, which will be in a format such as [ISO BMFF](https://en.wikipedia.org/wiki/ISO_base_media_file_format) or  [WebM](https://en.wikipedia.org/wiki/WebM). For ISO BMFF this means header metadata, called the __protection scheme information box__. WebM uses the Matroska [ContentEncryption element](http://matroska.org/technical/specs/notes.html), with some [WebM-specific additions](http://www.webmproject.org/docs/webm-encryption/). Guidelines are provided for each container [in an EME-specific registry](http://w3c.github.io/encrypted-media/initdata-format-registry.html).
+{% endAside %}
+
+Note that there may be multiple messages between the CDM and the license server, and all communication in this process is opaque to the browser and application: messages are only understood by the CDM and license server, although the app layer can see [what type of message](//w3c.github.io/encrypted-media/#idl-def-MediaKeyMessageType) the CDM is sending. The license request contains proof of the CDM's validity (and trust relationship) as well as a key to use when encrypting the content key(s) in the resulting license.
+
+## …but what do CDMs actually do?
+
+An EME implementation does not in itself provide a way to decrypt media: it simply provides an API for a web application to interact with Content Decryption Modules.
+
+What CDMs actually do is not defined by the EME spec, and a CDM may handle decoding (decompression) of media as well as decryption. From least to most robust, there are several potential options for CDM functionality:
+
+- Decryption only, enabling playback using the normal media pipeline, for example via a `<video>` element.
+- Decryption and decoding, passing video frames to the browser for rendering.
+- Decryption and decoding, rendering directly in the hardware (for example, the GPU).
+
+There are multiple ways to make a CDM available to a web app:
+
+- Bundle a CDM with the browser.
+- Distribute a CDM separately.
+- Build a CDM into the operating system.
+- Include a CDM in firmware.
+- Embed a CDM in hardware.
+
+How a CDM is made available is not defined by the EME spec, but in all cases the browser is responsible for vetting and exposing the CDM.
+
+EME doesn't mandate a particular Key System; among current desktop and mobile browsers, Chrome supports Widevine and IE11 supports PlayReady.
+
+## Getting a key from a license server
+
+In typical commercial use, content will be encrypted and encoded using a packaging service or tool. Once the encrypted media is made available online, a web client can obtain a key (contained within a license) from a license server and use the key to enable decryption and playback of the content.
+
+The following code (adapted from the [spec examples](http://w3c.github.io/encrypted-media/#examples)) shows how an application can select an appropriate key system and obtain a key from a license server.
+
+```js
+var video = document.querySelector('video');
+
+var config = [{initDataTypes: ['webm'],
+  videoCapabilities: [{contentType: 'video/webm; codecs="vp9"'}]}];
+
+if (!video.mediaKeys) {
+  navigator.requestMediaKeySystemAccess('org.w3.clearkey',
+      config).then(
+    function(keySystemAccess) {
+      var promise = keySystemAccess.createMediaKeys();
+      promise.catch(
+        console.error.bind(console, 'Unable to create MediaKeys')
+      );
+      promise.then(
+        function(createdMediaKeys) {
+          return video.setMediaKeys(createdMediaKeys);
+        }
+      ).catch(
+        console.error.bind(console, 'Unable to set MediaKeys')
+      );
+      promise.then(
+        function(createdMediaKeys) {
+          var initData = new Uint8Array([...]);
+          var keySession = createdMediaKeys.createSession();
+          keySession.addEventListener('message', handleMessage,
+              false);
+          return keySession.generateRequest('webm', initData);
+        }
+      ).catch(
+        console.error.bind(console,
+          'Unable to create or initialize key session')
+      );
+    }
+  );
+}
+
+function handleMessage(event) {
+  var keySession = event.target;
+  var license = new Uint8Array([...]);
+  keySession.update(license).catch(
+    console.error.bind(console, 'update() failed')
+  );
+}
+```
+
+## Common Encryption
+
+Common Encryption solutions allow content providers to encrypt and package their content once per container/codec and use it with a variety of Key Systems, CDMs and clients: that is, any CDM that supports Common Encryption. For example, a video packaged using Playready could be played back in a browser using a Widevine CDM obtaining a key from a Widevine license server.
+
+This is in contrast to legacy solutions that would only work with a complete vertical stack, including a single client that often also included an application runtime.
+
+[Common Encryption](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397) (CENC) is an [ISO standard](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397) defining a protection scheme for ISO BMFF; a similar concept applies to WebM.
+
+## Clear Key
+
+Although EME does not define DRM functionality, the spec currently mandates that all browsers supporting EME must implement Clear Key. Using this system, media can be encrypted with a key and then played back simply by providing that key. Clear Key can be built into the browser: it does not require the use of a separate decryption module.
+
+While not likely to be used for many types of commercial content, Clear Key is fully interoperable across all browsers that support EME. It is also handy for testing EME implementations, and applications using EME, without the need to request a content key from a license server. There is a simple Clear Key example at [simpl.info/ck](http://simpl.info/eme/clearkey). Below is a walkthrough of the code, which parallels the steps described above, though without license server interaction.
+
+```js
+// Define a key: hardcoded in this example
+// – this corresponds to the key used for encryption
+var KEY = new Uint8Array([
+  0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b,
+  0x68, 0xef, 0x12, 0x2a, 0xfc, 0xe4, 0xae, 0x3c
+]);
+
+var config = [{
+  initDataTypes: ['webm'],
+  videoCapabilities: [{
+    contentType: 'video/webm; codecs="vp8"'
+  }]
+}];
+
+var video = document.querySelector('video');
+video.addEventListener('encrypted', handleEncrypted, false);
+
+navigator.requestMediaKeySystemAccess('org.w3.clearkey', config).then(
+  function(keySystemAccess) {
+    return keySystemAccess.createMediaKeys();
+  }
+).then(
+  function(createdMediaKeys) {
+    return video.setMediaKeys(createdMediaKeys);
+  }
+).catch(
+  function(error) {
+    console.error('Failed to set up MediaKeys', error);
+  }
+);
+
+function handleEncrypted(event) {
+  var session = video.mediaKeys.createSession();
+  session.addEventListener('message', handleMessage, false);
+  session.generateRequest(event.initDataType, event.initData).catch(
+    function(error) {
+      console.error('Failed to generate a license request', error);
+    }
+  );
+}
+
+function handleMessage(event) {
+  // If you had a license server, you would make an asynchronous XMLHttpRequest
+  // with event.message as the body.  The response from the server, as a
+  // Uint8Array, would then be passed to session.update().
+  // Instead, we will generate the license synchronously on the client, using
+  // the hard-coded KEY at the top.
+  var license = generateLicense(event.message);
+
+  var session = event.target;
+  session.update(license).catch(
+    function(error) {
+      console.error('Failed to update the session', error);
+    }
+  );
+}
+
+// Convert Uint8Array into base64 using base64url alphabet, without padding.
+function toBase64(u8arr) {
+  return btoa(String.fromCharCode.apply(null, u8arr)).
+      replace(/\+/g, '-').replace(/\//g, '_').replace(/=*$/, '');
+}
+
+// This takes the place of a license server.
+// kids is an array of base64-encoded key IDs
+// keys is an array of base64-encoded keys
+function generateLicense(message) {
+  // Parse the clearkey license request.
+  var request = JSON.parse(new TextDecoder().decode(message));
+  // We only know one key, so there should only be one key ID.
+  // A real license server could easily serve multiple keys.
+  console.assert(request.kids.length === 1);
+
+  var keyObj = {
+    kty: 'oct',
+    alg: 'A128KW',
+    kid: request.kids[0],
+    k: toBase64(KEY)
+  };
+  return new TextEncoder().encode(JSON.stringify({
+    keys: [keyObj]
+  }));
+}
+```
+
+To test this code, you need an encrypted video to play. Encrypting a video for use with Clear Key can be done for WebM as per the [webm_crypt instructions](https://docs.google.com/document/d/17d6_KX5jX0gY1ygYbjqOEdVzuUGkPO53wL8t40dMGeQ/edit?usp=sharing). Commercial services are also available (for ISO BMFF/MP4 at least) and other solutions are being developed.
+
+## Related technology #1
+
+### Media Source Extensions (MSE)
+
+The [HTMLMediaElement](https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement) is a creature of simple beauty.
+
+We can load, decode and play media simply by providing a src URL:
+
+```html
+<video src='foo.webm'></video>
+```
+
+The Media Source API is an extension to HTMLMediaElement enabling more fine-grained control over the source of media, by allowing JavaScript to build streams for playback from 'chunks' of video. This in turn enables techniques such as adaptive streaming and time shifting.
+
+Why is MSE important to EME? Because in addition to distributing protected content, commercial content providers must be able to adapt content delivery to network conditions and other requirements. Netflix, for example, dynamically changes stream bitrate as network conditions change. EME works with playback of media streams provided by an MSE implementation, just as it would with media provided via a `src` attribute.
+
+How to chunk and play back media encoded at different bitrates? See the DASH section below.
+
+You can see MSE in action at [simpl.info/mse](http://simpl.info/mse); for the purposes of this example, a WebM video is split into five chunks using the File APIs. In a production application, chunks of video would be retrieved via Ajax.
+
+First a SourceBuffer is created:
+
+```js
+var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
+```
+
+The entire movie is then 'streamed' to a video element by appending each chunk using the appendBuffer() method:
+
+```js
+reader.onload = function (e) {
+  sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
+  if (i === NUM_CHUNKS - 1) {
+    mediaSource.endOfStream();
+  } else {
+    if (video.paused) {
+      // start playing after first chunk is appended
+      video.play();
+    }
+    readChunk_(++i);
+  }
+};
+```
+
+Find out more about MSE in the [HTML5 Rocks article](http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API).
+
+## Related technology #2
+
+### Dynamic Adaptive Streaming over HTTP (DASH)
+
+Multi-device, multi-platform, mobile - whatever you call it, the web is often experienced under conditions of changeable connectivity. Dynamic, adaptive delivery is crucial for coping with bandwidth constraints and variability in the multi-device world.
+
+DASH (aka MPEG-DASH) is designed to enable the best possible media delivery in a flaky world, for both streaming and download. Several other technologies do something similar - such as Apple's [HTTP Live Streaming](https://en.wikipedia.org/wiki/HTTP_Live_Streaming) (HLS) and Microsoft's [Smooth Streaming](https://en.wikipedia.org/wiki/Adaptive_bitrate_streaming#Microsoft_Smooth_Streaming) - but DASH is the only method of adaptive bitrate streaming via HTTP that is based on an open standard. DASH is already in use by sites such as YouTube.
+
+What does this have to do with EME and MSE? MSE-based DASH implementations can parse a manifest, download segments of video at an appropriate bitrate, and feed them to a video element when it gets hungry - using existing HTTP infrastructure.
+
+In other words, DASH enables commercial content providers to do adaptive streaming of protected content.
+
+DASH does what it says on the tin:
+
+- **Dynamic:** responds to changing conditions.
+- **Adaptive:** adapts to provide an appropriate audio or video bitrate.
+- **Streaming:** allows for streaming as well as download.
+- **HTTP:** enables content delivery with the advantage of HTTP, without the disadvantages of a traditional streaming server.
+
+The BBC has begun [providing test streams using DASH](http://bbc.co.uk/rd/blog/2013/09/mpeg-dash-test-streams):
+
+{% Aside %}
+The media is encoded a number of times at different bitrates. Each encoding is called a Representation. These are split into a number of Media Segments. The client plays a programme by requesting segments, in order, from a representation over HTTP. Representations can be grouped into Adaptation Sets of representations containing equivalent content. If the client wishes to change bitrate it can pick an alternative from the current adaption set and start requesting segments from that representation. Content is encoded in such a way to make this switching easy for the client to do. In addition to a number of media segments, a representation generally also has an Initialisation Segment. This can be thought of as a header, containing information about the encoding, frame sizes, etc. A client needs to obtain this for a given representation before consuming media segments from that representation.
+{% endAside %}
+
+To summarize:
+
+1. Media is encoded at different bitrates.
+1. The different bitrate files are made available from an HTTP server.
+1. A client web app chooses which bitrate to retrieve and play back with DASH.
+
+As part of the video segmentation process, an XML manifest known as a Media Presentation Description (MPD) is built programmatically. This describes Adaptation Sets and Representations, with durations and URLs. An MPD looks like this:
+
+```xml
+<MPD xmlns="urn:mpeg:DASH:schema:MPD:2011" mediaPresentationDuration="PT0H3M1.63S" minBufferTime="PT1.5S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"
+type="static">
+  <Period duration="PT0H3M1.63S" start="PT0S">
+    <AdaptationSet>
+      <ContentComponent contentType="video" id="1" />
+      <Representation bandwidth="4190760" codecs="avc1.640028" height="1080" id="1" mimeType="video/mp4" width="1920">
+        <BaseURL>car-20120827-89.mp4</BaseURL>
+        <SegmentBase indexRange="674-1149">
+          <Initialization range="0-673" />
+        </SegmentBase>
+      </Representation>
+      <Representation bandwidth="2073921" codecs="avc1.4d401f" height="720" id="2" mimeType="video/mp4" width="1280">
+        <BaseURL>car-20120827-88.mp4</BaseURL>
+        <SegmentBase indexRange="708-1183">
+          <Initialization range="0-707" />
+        </SegmentBase>
+      </Representation>
+
+      …
+
+    </AdaptationSet>
+  </Period>
+</MPD>
+```
+
+(This XML is taken from [the .mpd file](http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) used for the [YouTube DASH demo player](http://dash-mse-test.appspot.com/dash-player.html?url=http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd))
+
+According to the DASH spec, an MPD file could in theory be used as the `src` for a video. However, to give more flexibility to web developers, browser vendors have chosen instead to leave DASH support up to JavaScript libraries using MSE such as [dash.js](http://www-itec.uni-klu.ac.at/dash/?p=792). Implementing DASH in JavaScript allows the adaptation algorithm to evolve without requiring browser updates. Using MSE also allows experimentation with alternative manifest formats and delivery mechanisms without requiring browser changes. Google's [Shaka Player](https://github.com/google/shaka-player) implements a DASH client with EME support.
+
+[Mozilla Developer Network has instructions](https://developer.mozilla.org/docs/DASH_Adaptive_Streaming_for_HTML_5_Video) on how to use WebM tools and FFmpeg to segment video and build an MPD.
+
+## Conclusion
+
+Use of the web to deliver paid-for video and audio is growing at a [huge rate](http://www.cmo.com/content/dam/CMO_Other/ADI/Video_Benchmark_Q2_2014/video_benchmark_report-2014.pdf). It seems that every new device, whether it's a tablet, game console, connected TV, or set-top box, is able to stream media from the major content providers over HTTP. [Over 85%](http://longtailvideo.com/html5) of mobile and desktop browsers now support `<video>` and `<audio>`, and Cisco estimates that [video will be 80 to 90 percent of global consumer internet traffic](http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-481360_ns827_Networking_Solutions_White_Paper.html) by 2017.  In this context, browser support for protected content distribution is likely to be become increasingly significant, as [browser vendors](https://blog.mozilla.org/security/2013/01/29/putting-users-in-control-of-plugins/) [curtail support](https://sites.google.com/a/chromium.org/dev/developers/npapi-deprecation) for APIs that most media plugins rely on.
+
+## Further reading
+
+### Specs and standards
+
+- [EME spec](https://w3c.github.io/encrypted-media/): latest Editor's Draft<
+- [Common Encryption (CENC)](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397)
+- [Media Source Extensions](http://www.w3.org/TR/media-source/)
+- [DASH standard](http://standards.iso.org/ittf/PubliclyAvailableStandards/c057623_ISO_IEC_23009-1_2012.zip) (yes, it's a PDF)
+- [Overview of the DASH standard](http://dashif.org/mpeg-dash/)
+
+### Articles
+
+- [DTG Webinar](http://vimeo.com/62269279) (partially obsolete)
+- [What is EME?](https://hsivonen.fi/eme/), by Henri Sivonen
+- [HTML5 Rocks Media Source Extensions article](http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API)
+- MPEG-DASH Test Streams: [BBC R&D blog post](http://bbc.co.uk/rd/blog/2013/09/mpeg-dash-test-streams)
diff --git a/src/site/content/en/blog/emscripten-embedding-js-snippets/index.md b/src/site/content/en/blog/emscripten-embedding-js-snippets/index.md
new file mode 100644
index 00000000000..1fd97b6e868
--- /dev/null
+++ b/src/site/content/en/blog/emscripten-embedding-js-snippets/index.md
@@ -0,0 +1,225 @@
+---
+title: Embedding JavaScript snippets in C++ with Emscripten
+subhead: Learn how to embed JavaScript code in your WebAssembly library to communicate with the outside world.
+description: Learn how to embed JavaScript code in your WebAssembly library to communicate with the outside world.
+date: 2022-01-18
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/InR77BkPIakxD8X1rADr.jpg
+alt: A man putting sticky notes on a whiteboard.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - javascript
+---
+
+When working on WebAssembly integration with the web, you need a way to call out to external APIs such as web APIs and third-party libraries. You then need a way to store the values and object instances those APIs return, and a way to pass those stored values to other APIs later. For asynchronous APIs, you might also need to await promises in your synchronous C/C++ code with [Asyncify](/asyncify/) and read the result once the operation is finished.
+
+Emscripten provides several tools for such interactions:
+
+* `emscripten::val` for storing and operating on JavaScript values in C++.
+* `EM_JS` for embedding JavaScript snippets and binding them as C/C++ functions.
+* `EM_ASYNC_JS` that's similar to `EM_JS`, but makes it easier to embed asynchronous JavaScript snippets.
+* `EM_ASM` for embedding short snippets and executing them inline, without declaring a function.
+* `--js-library` for advanced scenarios where you want to declare lots of JavaScript functions together as a single library.
+
+In this post you’ll learn how to use all of them for similar tasks.
+
+## emscripten::val class
+
+The `emcripten::val` class is provided by Embind. It can invoke global APIs, bind JavaScript values to C++ instances, and convert values between C++ and JavaScript types.
+
+Here's how to use it with Asyncify's [`.await()`](https://emscripten.org/docs/api_reference/val.h.html#_CPPv4NK10emscripten10emscripten3val5awaitEv) to fetch and parse some JSON:
+
+```cpp
+#include <emscripten/val.h>
+
+using namespace emscripten;
+
+val fetch_json(const char *url) {
+  // Get and cache a binding to the global `fetch` API in each thread.
+  thread_local const val fetch = val::global("fetch");
+  // Invoke fetch and await the returned `Promise<Response>`.
+  val response = fetch(url).await();
+  // Ask to read the response body as JSON and await the returned `Promise<any>`.
+  val json = response.call<val>("json").await();
+  // Return the JSON object.
+  return json;
+}
+
+// Example URL.
+val example_json = fetch_json("https://httpbin.org/json");
+
+// Now we can extract fields, e.g.
+std::string author = json["slideshow"]["author"].as<std::string>();
+```
+
+This code works well, but it performs lots of intermediate steps. Each operation on `val` needs to perform the following steps:
+
+1. Convert C++ values passed as arguments into some intermediate format.
+2. Go to JavaScript, read and convert arguments into JavaScript values.
+3. Execute the function
+4. Convert the result from JavaScript to intermediate format.
+5. Return the converted result to C++, and C++ finally reads it back.
+
+Each `await()` also has to pause the C++ side by unwinding the entire call stack of the WebAssembly module, returning to JavaScript, waiting, and restoring the WebAssembly stack when the operation is complete.
+
+Such code doesn't need anything from C++. C++ code is acting only as a driver for a series of JavaScript operations. What if you could move `fetch_json` to JavaScript and reduce the overhead of intermediate steps at the same time?
+
+## EM_JS macro
+
+The [`EM_JS macro`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.EM_JS) lets you move `fetch_json` to JavaScript. `EM_JS` in Emscripten lets you declare a C/C++ function that is implemented by a JavaScript snippet.
+
+Like WebAssembly itself, it has a limitation of supporting only numeric arguments and return values. In order to pass any other values, you need to convert them manually via corresponding APIs. Here are some examples.
+
+Passing numbers doesn't need any conversion:
+
+```cpp
+// Passing numbers, doesn't need any conversion.
+EM_JS(int, add_one, (int x), {
+  return x + 1;
+});
+
+int x = add_one(41);
+```
+
+When passing strings to and from JavaScript you need to use the corresponding conversion and allocation functions from [preamble.js](https://emscripten.org/docs/api_reference/preamble.js.html):
+
+```cpp
+EM_JS(void, log_string, (const char *msg), {
+  console.log(UTF8ToString(msg));
+});
+
+EM_JS(const char *, get_input, (), {
+  let str = document.getElementById('myinput').value;
+  // Returns heap-allocated string.
+  // C/C++ code is responsible for calling `free` once unused.
+  return allocate(intArrayFromString(str), 'i8', ALLOC_NORMAL);
+});
+```
+
+Finally, for more complex, arbitrary, value types, you can use the JavaScript API for the earlier mentioned `val` class. Using it, you can convert JavaScript values and C++ classes into intermediate handles and back:
+
+```cpp
+EM_JS(void, log_value, (EM_VAL val_handle), {
+  let value = Emval.toValue(val_handle);
+  console.log(value);
+});
+
+EM_JS(EM_VAL, find_myinput, (), {
+  let input = document.getElementById('myinput');
+  return Emval.toHandle(input);
+});
+
+val obj = val::object();
+obj.set("x", 1);
+obj.set("y", 2);
+log_value(obj.as_handle()); // logs { x: 1, y: 2 }
+
+val myinput = val::take_ownership(find_input());
+// Now you can store the `find_myinput` DOM element for as long as you like, and access it later like:
+std::string value = input["value"].as<std::string>();
+```
+
+With those APIs in mind, the `fetch_json` example could be rewritten to do most work without leaving JavaScript:
+
+```cpp
+EM_JS(EM_VAL, fetch_json, (const char *url), {
+  return Asyncify.handleAsync(async () => {
+    url = UTF8ToString(url);
+    // Invoke fetch and await the returned `Promise<Response>`.
+    let response = await fetch(url);
+    // Ask to read the response body as JSON and await the returned `Promise<any>`.
+    let json = await response.json();
+    // Convert JSON into a handle and return it.
+    return Emval.toHandle(json);
+  });
+});
+
+// Example URL.
+val example_json = val::take_ownership(fetch_json("https://httpbin.org/json"));
+
+// Now we can extract fields, e.g.
+std::string author = json["slideshow"]["author"].as<std::string>();
+```
+
+We still have a couple of explicit conversions at the entry and exit points of the function, but the rest is now regular JavaScript code. Unlike `val` equivalent, it can now be optimized by the JavaScript engine and only requires pausing the C++ side once for all async operations.
+
+## EM_ASYNC_JS macro
+
+The only bit left that does not look pretty is the `Asyncify.handleAsync` wrapper—its only purpose is to allow executing `async` JavaScript functions with Asyncify. In fact, this use case is so common that there is now a specialized `EM_ASYNC_JS` macro that combines them together.
+
+Here's how you could use it to produce the final version of the `fetch` example:
+
+```cpp
+EM_ASYNC_JS(EM_VAL, fetch_json, (const char *url), {
+  url = UTF8ToString(url);
+  // Invoke fetch and await the returned `Promise<Response>`.
+  let response = await fetch(url);
+  // Ask to read the response body as JSON and await the returned `Promise<any>`.
+  let json = await response.json();
+  // Convert JSON into a handle and return it.
+  return Emval.toHandle(json);
+});
+
+// Example URL.
+val example_json = val::take_ownership(fetch_json("https://httpbin.org/json"));
+
+// Now we can extract fields, e.g.
+std::string author = json["slideshow"]["author"].as<std::string>();
+```
+
+## EM_ASM
+
+`EM_JS` is the recommended way to declare JavaScript snippets. It's efficient because it binds the declared snippets directly like any other JavaScript function imports. It also provides good ergonomics by enabling you to explicitly declare all parameter types and names.
+
+In some cases, however, you want to insert a quick snippet for [`console.log`](https://developer.mozilla.org/docs/Web/API/Console/log) call, a [`debugger;`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger) statement or something similar and don't want to bother with declaring a whole separate function. In those rare cases, an [`EM_ASM macros family`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.EM_ASM) (`EM_ASM`, `EM_ASM_INT` and `EM_ASM_DOUBLE`) might be a simpler choice. Those macros are similar to the `EM_JS` macro, but they execute code inline where they're inserted, instead of defining a function.
+
+Since they don't declare a function prototype, they need a different way of specifying the return type and accessing arguments.
+
+You need to use the right macro name to choose the return type. `EM_ASM` blocks are expected to act like `void` functions, `EM_ASM_INT` blocks can return an integer value, and `EM_ASM_DOUBLE` blocks return floating-point numbers correspondingly.
+
+Any passed arguments will be available under names `$0`, `$1`, and so on in the JavaScript body. As with `EM_JS` or WebAssembly in general, the arguments are limited only to numeric values—integers, floating-point numbers, pointers and handles.
+
+Here's an example of how you could use an `EM_ASM` macro to log an arbitrary JS value to the console:
+
+```cpp
+val obj = val::object();
+obj.set("x", 1);
+obj.set("y", 2);
+// executes inline immediately
+EM_ASM({
+  // convert handle passed under $0 into a JavaScript value
+  let obj = Emval.fromHandle($0);
+  console.log(obj); // logs { x: 1, y: 2 }
+}, obj.as_handle());
+```
+
+## --js-library
+
+Finally, Emscripten supports declaring JavaScript code in a separate file in a customits own [library format](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript):
+
+```js
+mergeInto(LibraryManager.library, {
+  log_value: function (val_handle) {
+    let value = Emval.toValue(val_handle);
+    console.log(value);
+  }
+});
+```
+
+Then you need to declare corresponding prototypes manually on the C++ side:
+
+```cpp
+extern "C" void log_value(EM_VAL val_handle);
+```
+
+Once declared on both sides, the JavaScript library can be linked together with the main code via the [`--js-library option`](https://emscripten.org/docs/tools_reference/emcc.html#emcc-js-library), connecting prototypes with corresponding JavaScript implementations.
+
+However, this module format is non-standard and requires careful dependency annotations. As such, it's mostly reserved for advanced scenarios.
+
+## Conclusion
+
+In this post we've looked at various ways to integrate JavaScript code into C++ when working with WebAssembly.
+
+Including such snippets allows you to express long sequences of operations in a cleaner and more efficient way, and to tap into third-party libraries, new JavaScript APIs, and even JavaScript syntax features that are not yet expressible via C++ or Embind.
diff --git a/src/site/content/en/blog/emscripten-npm/index.md b/src/site/content/en/blog/emscripten-npm/index.md
new file mode 100644
index 00000000000..bad0a6dddf4
--- /dev/null
+++ b/src/site/content/en/blog/emscripten-npm/index.md
@@ -0,0 +1,530 @@
+---
+layout: post
+title: Emscripten and npm
+subhead: How do you integrate WebAssembly into this setup? In this article we are going to work this out with C/C++ and Emscripten as an example.
+date: 2019-01-15
+updated: 2019-09-22
+authors:
+  - surma
+description: |
+  How do you integrate WebAssembly into this setup? In this article we are going to work this out with C/C++ and Emscripten as an example.
+tags:
+  - blog
+  - webassembly
+
+---
+
+[WebAssembly](/emscripting-a-c-library/) (wasm) is often
+framed as either a performance primitive or a way to run your existing C++
+codebase on the web. With [squoosh.app](https://squoosh.app), we wanted to show
+that there is at least a third perspective for wasm: making use of the huge
+ecosystems of other programming languages. With
+[Emscripten](https://kripken.github.io/emscripten-site/), you can use C/C++ code,
+[Rust has wasm support](https://rustwasm.github.io/book/) built in, and the [Go
+team is working on it](https://github.com/golang/go/wiki/WebAssembly), too. I'm
+sure many other languages will follow.
+
+In these scenarios, wasm is not the centerpiece of your app, but rather a puzzle
+piece: yet another module. Your app already has JavaScript, CSS, image assets, a
+web-centric build system and maybe even a framework like React. How do you
+integrate WebAssembly into this setup? In this article we are going to work this
+out with C/C++ and Emscripten as an example.
+
+## Docker
+
+Note: While I will be using Docker, you don't need a deep understanding of
+Docker to follow this article. If you have Docker installed on your machine, you
+are good to go!
+
+I have found Docker to be invaluable when working with Emscripten. C/C++
+libraries are often written to work with the operating system they are built on.
+It is incredibly helpful to have a consistent environment. With Docker you get a
+virtualized Linux system that is already set up to work with Emscripten and has
+all the tools and dependencies installed. If something is missing, you can just
+install it without having to worry about how it affects your own machine or your
+other projects. If something goes wrong, throw the container away and start
+over. If it works once, you can be sure that it will continue to work and
+produce identical results.
+
+The [Docker Registry](https://hub.docker.com) has an [Emscripten
+image](https://hub.docker.com/r/trzeci/emscripten/) by
+[trzeci](https://github.com/trzecieu/) that I have been using extensively.
+
+## Integration with npm
+
+In the majority of cases, the entry point to a web project is npm's
+`package.json`. By convention, most projects can be built with `npm install &&
+npm run build`.
+
+In general, the build artifacts produced by Emscripten (a `.js` and a `.wasm`
+file) should be treated as just another JavaScript module and just another
+asset. The JavaScript file can be handled by a bundler like webpack or rollup,
+and the wasm file should be treated like any other bigger binary asset, like
+images.
+
+As such, the Emscripten build artifacts need to be built before your "normal"
+build process kicks in:
+
+```json
+{
+    "name": "my-worldchanging-project",
+    "scripts": {
+    "build:emscripten": "docker run --rm -v $(pwd):/src trzeci/emscripten
+./build.sh",
+    "build:app": "<the old build command>",
+    "build": "npm run build:emscripten && npm run build:app",
+    // ...
+    },
+    // ...
+}
+```
+
+The new `build:emscripten` task could invoke Emscripten directly, but as
+mentioned before, I recommend using Docker to make sure the build environment is
+consistent.
+
+`docker run ... trzeci/emscripten ./build.sh` tells Docker to spin up a new
+container using the `trzeci/emscripten` image and run the `./build.sh` command.
+`build.sh` is a shell script that you are going to write next! `--rm` tells
+Docker to delete the container after it's done running. This way, you don't build
+up a collection of stale machine images over time. `-v $(pwd):/src` means that
+you want Docker to "mirror" the current directory (`$(pwd)`) to `/src` inside
+the container. Any changes you make to files in the `/src` directory inside the
+container will be mirrored to your actual project. These mirrored directories
+are called "bind mounts".
+
+Let's take a look at `build.sh`:
+
+```bash
+#!/bin/bash
+
+set -e
+
+export OPTIMIZE="-Os"
+export LDFLAGS="${OPTIMIZE}"
+export CFLAGS="${OPTIMIZE}"
+export CXXFLAGS="${OPTIMIZE}"
+
+echo "============================================="
+echo "Compiling wasm bindings"
+echo "============================================="
+(
+    # Compile C/C++ code
+    emcc \
+    ${OPTIMIZE} \
+    --bind \
+    -s STRICT=1 \
+    -s ALLOW_MEMORY_GROWTH=1 \
+    -s MALLOC=emmalloc \
+    -s MODULARIZE=1 \
+    -s EXPORT_ES6=1 \
+    -o ./my-module.js \
+    src/my-module.cpp
+
+    # Create output folder
+    mkdir -p dist
+    # Move artifacts
+    mv my-module.{js,wasm} dist
+)
+echo "============================================="
+echo "Compiling wasm bindings done"
+echo "============================================="
+```
+
+There's a lot to dissect here!
+
+`set -e` puts the shell into "fail fast" mode. If any commands in the script
+return an error, the entire script gets aborted immediately. This can be
+incredibly helpful as the last output of the script will always be a success
+message or the error that caused the build to fail.
+
+With the `export` statements, you define the values of a couple of environment
+variables. They allow you to pass additional command-line parameters to the C
+compiler (`CFLAGS`), the C++ compiler (`CXXFLAGS`), and the linker (`LDFLAGS`).
+They all receive the optimizer settings via `OPTIMIZE` to make sure that
+everything gets optimized the same way. There are a couple of possible values
+for the `OPTIMIZE` variable:
+
+* `-O0`: Don't do any optimization. No dead code is eliminated, and Emscripten
+  does not minify the JavaScript code it emits, either. Good for debugging.
+* `-O3`: Optimize aggressively for performance.
+* `-Os`: Optimize aggressively for performance and size as a secondary
+  criterion.
+* `-Oz`: Optimize aggressively for size, sacrificing performance if necessary.
+
+For the web, I mostly recommend `-Os`.
+
+The `emcc` command has a myriad of options of its own. Note that emcc is
+supposed to be a  "drop-in replacement for compilers like GCC or clang". So all
+flags that you might know from GCC will most likely be implemented by emcc as
+well. The `-s` flag is special in that it allows us to configure Emscripten
+specifically. All available options can be found in Emscripten's
+[`settings.js`](https://github.com/kripken/emscripten/blob/incoming/src/settings.js),
+but that file can be quite overwhelming. Here's a list of the Emscripten flags
+that I think are most important for web developers:
+
+* `--bind` enables
+  [embind](/embind/).
+* `-s STRICT=1` drops support for all deprecated build options. This ensures
+  that your code builds in a forward compatible manner.
+* `-s ALLOW_MEMORY_GROWTH=1` allows memory to be automatically grown if
+  necessary. At the time of writing, Emscripten will allocate 16MB of memory
+  initially. As your code allocates chunks of memory, this option decides if
+  these operations will make the entire wasm module fail when memory is
+  exhausted, or if the glue code is allowed to expand the total memory to
+  accommodate the allocation.
+* `-s MALLOC=...` chooses which `malloc()` implementation to use. `emmalloc` is
+  a small and fast `malloc()` implementation specifically for Emscripten. The
+  alternative is `dlmalloc`, a fully-fledged `malloc()` implementation. You only
+  need to switch to `dlmalloc` if you are allocating a lot of small objects
+  frequently or if you want to use threading.
+* `-s EXPORT_ES6=1` will turn the JavaScript code into an ES6 module with a
+  default export that works with any bundler. Also requires `-s MODULARIZE=1` to
+  be set.
+
+The following flags are not always necessary or are only helpful for debugging
+purposes:
+
+* `-s FILESYSTEM=0` is a flag that relates to Emscripten and it's ability to
+  emulate a filesystem for you when your C/C++ code uses filesystem operations.
+  It does some analysis on the code it compiles to decide whether to include the
+  filesystem emulation in the glue code or not. Sometimes, however, this
+  analysis can get it wrong and you pay a rather hefty 70kB in additional glue
+  code for a filesystem emulation that you might not need. With `-s
+  FILESYSTEM=0` you can force Emscripten to not include this code.
+* `-g4` will make Emscripten include debugging information in the `.wasm` and
+  also emit a source maps file for the wasm module. You can read more on
+  debugging with Emscripten in their [debugging
+  section](https://kripken.github.io/emscripten-site/docs/porting/Debugging.html).
+
+And there you go! To test this setup, let's whip up a tiny `my-module.cpp`:
+
+
+```cpp
+    #include <emscripten/bind.h>
+
+    using namespace emscripten;
+
+    int say_hello() {
+      printf("Hello from your wasm module\n");
+      return 0;
+    }
+
+    EMSCRIPTEN_BINDINGS(my_module) {
+      function("sayHello", &say_hello);
+    }
+```
+
+And an `index.html`:
+
+```html
+    <!doctype html>
+    <title>Emscripten + npm example</title>
+    Open the console to see the output from the wasm module.
+    <script type="module">
+    import wasmModule from "./my-module.js";
+
+    const instance = wasmModule({
+      onRuntimeInitialized() {
+        instance.sayHello();
+      }
+    });
+    </script>
+```
+
+(Here is a
+[gist](https://gist.github.com/surma/9899231095ada390b2b178a72ff57aa3)
+containing all files.)
+
+To build everything, run
+
+```shell
+$ npm install
+$ npm run build
+$ npm run serve
+```
+
+Navigating to localhost:8080 should show you the following output in the
+DevTools console:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/F93NAa7jgyEBkpHGm6Og.png", alt="DevTools showing a message printed via C++ and Emscripten.", width="800", height="254" %}
+</figure>
+
+
+## Adding C/C++ code as a dependency
+
+If you want to build a C/C++ library for your web app, you need its code to be
+part of your project. You can add the code to your project's repository manually
+or you can use npm to manage these kind of dependencies as well. Let's say I
+want to use [libvpx](https://github.com/webmproject/libvpx) in my webapp. libvpx
+is a C++ library to encode images with VP8, the codec used in `.webm` files.
+However, libvpx is not on npm and doesn't have a `package.json`, so I can't
+install it using npm directly.
+
+To get out of this conundrum, there is
+[napa](https://www.npmjs.com/package/napa). napa allows you to install any git
+repository URL as a dependency into your `node_modules` folder.
+
+Note: If you dislike using napa, please take a look at the appendix for a more
+Docker-centric solution that doesn't require napa.
+
+Install napa as a dependency:
+
+```shell
+$ npm install --save napa
+```
+
+and make sure to run `napa` as an install script:
+
+```json
+{
+// ...
+"scripts": {
+    "install": "napa",
+    // ...
+},
+"napa": {
+    "libvpx": "git+https://github.com/webmproject/libvpx"
+}
+// ...
+}
+```
+
+When you run `npm install`, napa takes care of cloning the libvpx GitHub
+repository into your `node_modules` under the name `libvpx`.
+
+You can now extend your build script to build libvpx. libvpx uses `configure`
+and `make` to be built. Luckily, Emscripten can help ensure that `configure` and
+`make` use Emscripten's compiler. For this purpose there are the wrapper
+commands `emconfigure` and `emmake`:
+
+```cpp
+# ... above is unchanged ...
+echo "============================================="
+echo "Compiling libvpx"
+echo "============================================="
+(
+    rm -rf build-vpx || true
+    mkdir build-vpx
+    cd build-vpx
+    emconfigure ../node_modules/libvpx/configure \
+    --target=generic-gnu
+    emmake make
+)
+echo "============================================="
+echo "Compiling libvpx done"
+echo "============================================="
+
+echo "============================================="
+echo "Compiling wasm bindings"
+echo "============================================="
+# ... below is unchanged ...
+```
+
+{% Aside %}
+Some projects provide a `--host` flag (or similar; libvpx uses non-standard
+`--target`) to build for a specific processor architecture. This will often pull
+in assembler code that takes advantage of features specific to that architecture
+and can't be compiled to WebAssembly. If a flag like that is present (check with
+`./configure --help`), make sure to set it to a generic target.
+{% endAside %}
+
+
+A C/C++ library is split into two parts: the headers (traditionally `.h` or
+`.hpp` files) that define the data structures, classes, constants etc. that a
+library exposes and the actual library (traditionally `.so` or `.a` files). To
+use the `VPX_CODEC_ABI_VERSION` constant of the library in your code, you have
+to include the library's header files using a `#include` statement:
+
+```cpp
+#include "vpxenc.h"
+#include <emscripten/bind.h>
+
+int say_hello() {
+    printf("Hello from your wasm module with libvpx %d\n", VPX_CODEC_ABI_VERSION);
+    return 0;
+}
+```
+
+The problem is that the compiler doesn't know _where_ to look for `vpxenc.h`.
+This is what the `-I` flag is for. It tells the compiler which directories to
+check for header files. Additionally, you also need to give the compiler the
+actual library file:
+
+```cpp
+# ... above is unchanged ...
+echo "============================================="
+echo "Compiling wasm bindings"
+echo "============================================="
+(
+    # Compile C/C++ code
+    emcc \
+    ${OPTIMIZE} \
+    --bind \
+    -s STRICT=1 \
+    -s ALLOW_MEMORY_GROWTH=1 \
+    -s ASSERTIONS=0 \
+    -s MALLOC=emmalloc \
+    -s MODULARIZE=1 \
+    -s EXPORT_ES6=1 \
+    -o ./my-module.js \
+    -I ./node_modules/libvpx \
+    src/my-module.cpp \
+    build-vpx/libvpx.a
+
+# ... below is unchanged ...
+```
+
+If you run `npm run build` now, you will see that the process builds a new `.js`
+and a new `.wasm` file and that the demo page will indeed output the constant:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yGjXdGrEinLlydSXUnu0.png", alt="DevTools
+showing a the ABI version of libvpx printed via emscripten.", width="800", height="205" %}
+</figure>
+
+You will also notice that the build process takes a long time. The reason for
+long build times can vary. In the case of libvpx, it takes a long time because
+it compiles an encoder and a decoder for both VP8 and VP9 every time you run
+your build command, even though the source files haven't changed. Even a small
+change to your `my-module.cpp` will take a long time to build. It would be very
+beneficial to keep the build artifacts of libvpx around once they have been
+built the first time.
+
+One way to achieve this is using environment variables.
+
+{% Aside %}
+If you dislike this solution, please take a look at the appendix for a
+more Docker-centric solution.
+{% endAside %}
+
+```cpp
+# ... above is unchanged ...
+eval $@
+
+echo "============================================="
+echo "Compiling libvpx"
+echo "============================================="
+test -n "$SKIP_LIBVPX" || (
+    rm -rf build-vpx || true
+    mkdir build-vpx
+    cd build-vpx
+    emconfigure ../node_modules/libvpx/configure \
+    --target=generic-gnu
+    emmake make
+)
+echo "============================================="
+echo "Compiling libvpx done"
+echo "============================================="
+# ... below is unchanged ...
+```
+
+
+(Here's a [gist](https://gist.github.com/surma/8884a1e66b006c48e1ecc57bd1f36011)
+containing all the files.)
+
+The `eval` command allows us to set environment variables by passing parameters
+to the build script. The `test` command will skip building libvpx if
+`$SKIP_LIBVPX` is set (to any value).
+
+Now you can compile your module but skip rebuilding libvpx:
+
+```shell
+$ npm run build:emscripten -- SKIP_LIBVPX=1
+```
+
+## Customizing the build environment
+
+Sometimes libraries depend on additional tools to build. If these dependencies
+are missing in the build environment provided by the Docker image, you need to
+add them yourself. As an example, let's say you also want to build the
+documentation of libvpx using [doxygen](http://www.doxygen.nl/). Doxygen is not
+available inside your Docker container, but you can install it using `apt`.
+
+If you were to do that in your `build.sh`, you would re-download and re-install
+doxygen everytime you want to build your library. Not only would that be
+wasteful, but it would also stop you from working on your project while offline.
+
+Here it makes sense to build your own Docker image. Docker images are built by
+writing a `Dockerfile` that describes the build steps. Dockerfiles are quite
+powerful and have [a lot of
+commands](https://docs.docker.com/engine/reference/builder/), but most of the
+time you can get away with just using `FROM`, `RUN` and `ADD`. In this case:
+
+```docker
+FROM trzeci/emscripten
+
+RUN apt-get update && \
+    apt-get install -qqy doxygen
+```
+
+With `FROM`, you can declare which Docker image you want to use as a starting
+point. I chose `trzeci/emscripten` as a basis — the image you have been using
+all along. With `RUN`, you instruct Docker to run shell commands inside the
+container. Whatever changes these commands make to the container is now part of
+the Docker image. To make sure that your Docker image has been built and is
+available before you run `build.sh`, you have to adjust your `package.json` a
+bit:
+
+```json
+{
+    // ...
+    "scripts": {
+    "build:dockerimage": "docker image inspect -f '.' mydockerimage || docker build -t mydockerimage .",
+    "build:emscripten": "docker run --rm -v $(pwd):/src mydockerimage ./build.sh",
+    "build": "npm run build:dockerimage && npm run build:emscripten && npm run build:app",
+    // ...
+    },
+    // ...
+}
+```
+
+(Here's a [gist](https://gist.github.com/surma/71d42a1c0c553d7a63ad8d4cddd61972)
+containing all the files.)
+
+This will build your Docker image, but only if it has not been built yet. Then
+everything runs as before, but now the build environment has the `doxygen`
+command available, which will cause the documentation of libvpx to be built as
+well.
+
+## Conclusion
+
+It is not surprising that C/C++ code and npm are not a natural fit, but you can
+make it work quite comfortably with some additional tooling and the isolation
+that Docker provides. This setup will not work for every project, but it's a
+decent starting point that you can adjust for your needs. If you have
+improvements, please share.
+
+## Appendix: Making use of Docker image layers
+
+An alternative solution is to encapsulate more of these problems with Docker and
+Docker's smart approach to caching. Docker executes Dockerfiles step-by-step and
+assigns the result of each step an image of it's own. These intermediate images
+are often called "layers". If a command in a Dockerfile hasn't changed, Docker
+won't actually re-run that step when you are re-building the Dockerfile. Instead
+it reuses the layer from the last time the image was built.
+
+Previously, you had to go through some effort to not rebuild libvpx every time
+you build your app. Instead you can move the building instructions for libvpx
+from your `build.sh` into the `Dockerfile` to make use of Docker's caching
+mechanism:
+
+```docker
+FROM trzeci/emscripten
+
+RUN apt-get update && \
+    apt-get install -qqy doxygen git && \
+    mkdir -p /opt/libvpx/build && \
+    git clone https://github.com/webmproject/libvpx /opt/libvpx/src
+RUN cd /opt/libvpx/build && \
+    emconfigure ../src/configure --target=generic-gnu && \
+    emmake make
+```
+(Here's a [gist](https://gist.github.com/surma/c1b69df0aa168eee6ef08812123e0bbd)
+containing all the files.)
+
+Note that you need to manually install git and clone libvpx as you don't have
+bind mounts when running `docker build`. As a side-effect, there is no need for
+napa anymore.
+
diff --git a/src/site/content/en/blog/emscripting-a-c-library/index.md b/src/site/content/en/blog/emscripting-a-c-library/index.md
new file mode 100644
index 00000000000..7ad7fbec1ab
--- /dev/null
+++ b/src/site/content/en/blog/emscripting-a-c-library/index.md
@@ -0,0 +1,443 @@
+---
+layout: post
+title: Emscripting a C library to Wasm
+authors:
+  - surma
+description: Emscripting a C library to Wasm
+hero: image/C47gYyWYVMMhDmtYSLOWazuyePF2/g993gDcXLa9R2pH8ceCA.png
+alt: wasmcode
+date: 2018-03-05
+updated: 2020-06-27
+---
+
+Sometimes you want to use a library that is only available as C or C++ code.
+Traditionally, this is where you give up. Well, not anymore, because now we have
+[Emscripten](http://emscripten.org/) and [WebAssembly](http://webassembly.org/)
+(or Wasm)!
+
+{% Aside %} In this article, I will describe my journey of compiling
+[libwebp](https://github.com/webmproject/libwebp) to Wasm. To make use of this
+article as well as Wasm in general, you will need knowledge of C, especially
+pointers, memory management and compiler options. {% endAside %}
+
+## The toolchain
+
+I set myself the goal of working out how to compile some existing C code to
+Wasm. There's been some noise around [LLVM](http://llvm.org/)'s Wasm backend, so
+I started digging into that. While
+[you can get simple programs to compile](https://twitter.com/dassurma/status/752621241886990337?lang=en)
+this way, the second you want to use C's standard library or even compile
+multiple files, you will probably run into problems. This led me to the major
+lesson I learned:
+
+While Emscripten _used_ to be a C-to-asm.js compiler, it has since matured to
+target Wasm and is
+[in the process](https://github.com/kripken/emscripten/issues/6168) of switching
+to the official LLVM backend internally. Emscripten also provides a
+Wasm-compatible implementation of C's standard library. **Use Emscripten**. It
+[carries a lot of hidden work](https://kripken.github.io/emscripten-site/docs/porting/emscripten-runtime-environment.html),
+emulates a file system, provides memory management, wraps OpenGL with WebGL — a
+lot of things that you really don't need to experience developing for yourself.
+
+While that might sound like you have to worry about bloat — I certainly worried
+— the Emscripten compiler removes everything that's not needed. In my
+experiments, the resulting Wasm modules are appropriately sized for the logic
+that they contain and the Emscripten and WebAssembly teams are working on making
+them even smaller in the future.
+
+You can get Emscripten by following the instructions on their
+[website](http://emscripten.org) or using Homebrew. If you are a fan of
+dockerized commands like me and don't want to install things on your system just
+to have a play with WebAssembly, there is a well-maintained
+[Docker image](https://hub.docker.com/r/trzeci/emscripten/) that you can use
+instead:
+
+```docker
+    $ docker pull trzeci/emscripten
+    $ docker run --rm -v $(pwd):/src trzeci/emscripten emcc <emcc options here>
+```
+
+## Compiling something simple
+
+Let's take the almost canonical example of writing a function in C that
+calculates the n<sup>th</sup> fibonacci number:
+
+```wasm
+    #include <emscripten.h>
+
+    EMSCRIPTEN_KEEPALIVE
+    int fib(int n) {
+      if(n <= 0){
+        return 0;
+      }
+      int i, t, a = 0, b = 1;
+      for (i = 1; i < n; i++) {
+        t = a + b;
+        a = b;
+        b = t;
+      }
+      return b;
+    }
+```
+
+If you know C, the function itself shouldn't be too surprising. Even if you
+don't know C but know JavaScript, you will hopefully be able to understand
+what's going on here.
+
+`emscripten.h` is a header file provided by Emscripten. We only need it so we
+have access to the `EMSCRIPTEN_KEEPALIVE` macro, but it
+[provides much more functionality](https://kripken.github.io/emscripten-site/docs/api_reference/emscripten.h.html).
+This macro tells the compiler to not remove a function even if it appears
+unused. If we omitted that macro, the compiler would optimize the function away
+— nobody is using it after all.
+
+Let's save all that in a file called `fib.c`. To turn it into a `.wasm` file we
+need to turn to Emscripten's compiler command `emcc`:
+
+```wasm
+    $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' fib.c
+```
+
+Let's dissect this command. `emcc` is Emscripten's compiler. `fib.c` is our C
+file. So far, so good. `-s WASM=1` tells Emscripten to give us a Wasm file
+instead of an [asm.js](http://asmjs.org/) file.
+`-s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'` tells the compiler to leave the
+`cwrap()` function available in the JavaScript file — more on this function
+later. `-O3` tells the compiler to optimize aggressively. You can choose lower
+numbers to decrease build time, but that will also make the resulting bundles
+bigger as the compiler might not remove unused code.
+
+After running the command, you should end up with a JavaScript file called
+`a.out.js` and a WebAssembly file called `a.out.wasm`. The Wasm file (or
+"module") contains our compiled C code and should be fairly small. The
+JavaScript file takes care of loading and initializing our Wasm module and
+providing a nicer API. If needed, it will also take care of setting up the
+stack, the heap, and other functionality usually expected to be provided by the
+operating system when writing C code. As such, the JavaScript file is a bit
+bigger, weighing in at 19KB (~5KB gzip'd).
+
+## Running something simple
+
+The easiest way to load and run your module is to use the generated JavaScript
+file. Once you load that file, you will have a
+[`Module` global](https://kripken.github.io/emscripten-site/docs/api_reference/module.html)
+at your disposal. Use
+[`cwrap`](https://kripken.github.io/emscripten-site/docs/api_reference/preamble.js.html#cwrap)
+to create a JavaScript native function that takes care of converting parameters
+to something C-friendly and invoking the wrapped function. `cwrap` takes the
+function name, return type and argument types as arguments, in that order:
+
+```js
+    <script src="a.out.js"></script>
+    <script>
+      Module.onRuntimeInitialized = _ => {
+        const fib = Module.cwrap('fib', 'number', ['number']);
+        console.log(fib(12));
+      };
+    </script>
+```
+
+If you
+[run this code](https://googlechrome.github.io/samples/webassembly/index.html),
+you should see the "144" in the console, which is the 12th Fibonacci number.
+
+{% Aside %} Emscripten offers a couple of options to handle loading multiple
+modules. More about that in their
+[documentation](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#how-can-i-tell-when-the-page-is-fully-loaded-and-it-is-safe-to-call-compiled-functions).
+{% endAside %}
+
+## The holy grail: Compiling a C library
+
+Up until now, the C code we have written was written with Wasm in mind. A core
+use-case for WebAssembly, however, is to take the existing ecosystem of C
+libraries and allow developers to use them on the web. These libraries often
+rely on C's standard library, an operating system, a file system and other
+things. Emscripten provides most of these features, although there are some
+[limitations](https://kripken.github.io/emscripten-site/docs/porting/guidelines/api_limitations.html).
+
+Let's go back to my original goal: compiling an encoder for WebP to Wasm. The
+source for the WebP codec is written in C and available on
+[GitHub](https://github.com/webmproject/libwebp) as well as some extensive
+[API documentation](https://developers.google.com/speed/webp/docs/api). That's a pretty good starting point.
+
+```bash
+    $ git clone https://github.com/webmproject/libwebp
+```
+
+To start off simple, let's try to expose `WebPGetEncoderVersion()` from
+`encode.h` to JavaScript by writing a C file called `webp.c`:
+
+```c
+    #include "emscripten.h"
+    #include "src/webp/encode.h"
+
+    EMSCRIPTEN_KEEPALIVE
+    int version() {
+      return WebPGetEncoderVersion();
+    }
+```
+
+This is a good simple program to test if we can get the source code of libwebp
+to compile, as we don't require any parameters or complex data structures to
+invoke this function.
+
+To compile this program, we need to tell the compiler where it can find
+libwebp's header files using the `-I` flag and also pass it all the C files of
+libwebp that it needs. I'm going to be honest: I just gave it **all** the C
+files I could find and relied on the compiler to strip out everything that was
+unnecessary. It seemed to work brilliantly!
+
+```bash
+    $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
+        -I libwebp \
+        webp.c \
+        libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c
+```
+
+{% Aside %} This strategy will not work with every C project out there. Many
+projects rely on autoconf/automake to generate system-specific code before
+compilation. Emscripten provides `emconfigure` and `emmake` to wrap these
+commands and inject the appropriate parameters. You can find more in the
+[Emscripten documentation](https://kripken.github.io/emscripten-site/docs/compiling/Building-Projects.html).
+{% endAside %}
+
+Now we only need some HTML and JavaScript to load our shiny new module:
+
+```html
+<script src="/a.out.js"></script>
+<script>
+  Module.onRuntimeInitialized = async (_) => {
+    const api = {
+      version: Module.cwrap('version', 'number', []),
+    };
+    console.log(api.version());
+  };
+</script>
+```
+
+And we will see the correction version number in the
+[output](https://googlechrome.github.io/samples/webassembly/version.html):
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/CeKJztdJOom78OH2UrXx.png", alt="Screenshot of the DevTools console showing the correct version
+number.", width="800", height="389" %}
+
+{% Aside %} libwebp returns the current version a.b.c as a hexadecimal number
+0xabc. So v0.6.1 is encoded as 0x000601 = 1537. {% endAside %}
+
+### Get an image from JavaScript into Wasm
+
+Getting the encoder's version number is great and all, but encoding an actual
+image would be more impressive, right? Let's do that, then.
+
+The first question we have to answer is: How do we get the image into Wasm land?
+Looking at the
+[encoding API of libwebp](https://developers.google.com/speed/webp/docs/api#simple_encoding_api), it expects
+an array of bytes in RGB, RGBA, BGR or BGRA. Luckily, the Canvas API has
+[`getImageData()`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData),
+that gives us an
+[Uint8ClampedArray](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)
+containing the image data in RGBA:
+
+```js
+async function loadImage(src) {
+  // Load image
+  const imgBlob = await fetch(src).then((resp) => resp.blob());
+  const img = await createImageBitmap(imgBlob);
+  // Make canvas same size as image
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  // Draw image onto canvas
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  return ctx.getImageData(0, 0, img.width, img.height);
+}
+```
+
+Now it's "only" a matter of copying the data from JavaScript land into Wasm
+land. For that, we need to expose two additional functions. One that allocates
+memory for the image inside Wasm land and one that frees it up again:
+
+```wasm
+    EMSCRIPTEN_KEEPALIVE
+    uint8_t* create_buffer(int width, int height) {
+      return malloc(width * height * 4 * sizeof(uint8_t));
+    }
+
+    EMSCRIPTEN_KEEPALIVE
+    void destroy_buffer(uint8_t* p) {
+      free(p);
+    }
+```
+
+`create_buffer` allocates a buffer for the RGBA image — hence 4 bytes per pixel.
+The pointer returned by `malloc()` is the address of the first memory cell of
+that buffer. When the pointer is returned to JavaScript land, it is treated as
+just a number. After exposing the function to JavaScript using `cwrap`, we can
+use that number to find the start of our buffer and copy the image data.
+
+```js
+const api = {
+  version: Module.cwrap('version', 'number', []),
+  create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
+  destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
+};
+```
+
+```js
+const image = await loadImage('/image.jpg');
+const p = api.create_buffer(image.width, image.height);
+Module.HEAP8.set(image.data, p);
+// ... call encoder ...
+api.destroy_buffer(p);
+```
+
+### Grand Finale: Encode the image
+
+The image is now available in Wasm land. It is time to call the WebP encoder to
+do its job! Looking at the
+[WebP documentation](https://developers.google.com/speed/webp/docs/api#simple_encoding_api), `WebPEncodeRGBA`
+seems like a perfect fit. The function takes a pointer to the input image and
+its dimensions, as well as a quality option between 0 and 100. It also allocates
+an output buffer for us, that we need to free using `WebPFree()` once we are
+done with the WebP image.
+
+The result of the encoding operation is an output buffer and its length. Because
+functions in C can't have arrays as return types (unless we allocate memory
+dynamically), I resorted to a static global array. I know, not clean C (in fact,
+it relies on the fact that Wasm pointers are 32bit wide), but to keep things
+simple I think this is a fair shortcut.
+
+```wasm
+    int result[2];
+    EMSCRIPTEN_KEEPALIVE
+    void encode(uint8_t* img_in, int width, int height, float quality) {
+      uint8_t* img_out;
+      size_t size;
+
+      size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);
+
+      result[0] = (int)img_out;
+      result[1] = size;
+    }
+
+    EMSCRIPTEN_KEEPALIVE
+    void free_result(uint8_t* result) {
+      WebPFree(result);
+    }
+
+    EMSCRIPTEN_KEEPALIVE
+    int get_result_pointer() {
+      return result[0];
+    }
+
+    EMSCRIPTEN_KEEPALIVE
+    int get_result_size() {
+      return result[1];
+    }
+```
+
+Now with all of that in place, we can call the encoding function, grab the
+pointer and image size, put it in a JavaScript-land buffer of our own, and
+release all the Wasm-land buffers we have allocated in the process.
+
+```wasm
+    api.encode(p, image.width, image.height, 100);
+    const resultPointer = api.get_result_pointer();
+    const resultSize = api.get_result_size();
+    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+    const result = new Uint8Array(resultView);
+    api.free_result(resultPointer);
+```
+
+{% Aside %} `new Uint8Array(someBuffer)` will create a new view onto the same
+memory chunk, while `new Uint8Array(someTypedArray)` will copy the data.
+{% endAside %}
+
+Depending on the size of your image, you might run into an error where Wasm
+can't grow the memory enough to accommodate both the input and the output image:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/tUQKJR5CE9D6wav70siO.png", alt="Screenshot of the DevTools console showing an error.", width="800", height="103" %}
+
+Luckily, the solution to this problem is in the error message! We just need to
+add `-s ALLOW_MEMORY_GROWTH=1` to our compilation command.
+
+And there you have it! We compiled a WebP encoder and transcoded a JPEG image to
+WebP. To prove that it worked, we can turn our result buffer into a blob and use
+it on an `<img>` element:
+
+```js
+const blob = new Blob([result], { type: 'image/webp' });
+const blobURL = URL.createObjectURL(blob);
+const img = document.createElement('img');
+img.src = blobURL;
+document.body.appendChild(img);
+```
+
+[Behold, the glory of a new WebP image](https://googlechrome.github.io/samples/webassembly/image.html)!
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/eqKkzJ4MzO5T14py1wNb.jpeg", alt="DevTools’ network panel and the generated image.", width="800", height="422" %}
+
+## Conclusion
+
+It's not a walk in the park to get a C library to work in the browser, but once
+you understand the overall process and how the data flow works, it becomes
+easier and the results can be mind-blowing.
+
+WebAssembly opens many new possibilities on the web for processing, number
+crunching and gaming. Keep in mind that Wasm is not a silver bullet that should
+be applied to everything, but when you hit one of those bottlenecks, Wasm can be
+an incredibly helpful tool.
+
+## Bonus content: Running something simple the hard way
+
+If you want to try and avoid the generated JavaScript file, you might be able
+to. Let's go back to the Fibonacci example. To load and run it ourselves, we can
+do the following:
+
+```html
+<!DOCTYPE html>
+<script>
+  (async function () {
+    const imports = {
+      env: {
+        memory: new WebAssembly.Memory({ initial: 1 }),
+        STACKTOP: 0,
+      },
+    };
+    const { instance } = await WebAssembly.instantiateStreaming(
+      fetch('/a.out.wasm'),
+      imports,
+    );
+    console.log(instance.exports._fib(12));
+  })();
+</script>
+```
+
+{% Aside %} Make sure that your `.wasm` files have
+`Content-Type: application/wasm`. Otherwise they will be rejected by
+WebAssembly. {% endAside %}
+
+WebAssembly modules that have been created by Emscripten have no memory to work
+with unless you provide them with memory. The way you provide a Wasm module with
+_anything_ is by using the `imports` object — the second parameter of the
+`instantiateStreaming` function. The Wasm module can access everything inside
+the imports object, but nothing else outside of it. By convention, modules
+compiled by Emscripting expect a couple of things from the loading JavaScript
+environment:
+
+- Firstly, there is `env.memory`. The Wasm module is unaware of the outside
+  world so to speak, so it needs to get some memory to work with. Enter
+  [`WebAssembly.Memory`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory).
+  It represents a (optionally growable) piece of linear memory. The sizing
+  parameters are in "in units of WebAssembly pages", meaning the code above
+  allocates 1 page of memory, with each page having a size of 64
+  [KiB](https://en.wikipedia.org/wiki/Kibibyte). Without providing a `maximum`
+  option, the memory is theoretically unbounded in growth (Chrome currently has
+  a hard limit of 2GB). Most WebAssembly modules shouldn't need to set a
+  maximum.
+- `env.STACKTOP` defines where the stack is supposed to start growing. The stack
+  is needed to make function calls and to allocate memory for local variables.
+  Since we don't do any dynamic memory management shenanigans in our little
+  Fibonacci program, we can just use the entire memory as a stack, hence
+  `STACKTOP = 0`.
diff --git a/src/site/content/en/blog/entanglement/index.md b/src/site/content/en/blog/entanglement/index.md
new file mode 100644
index 00000000000..2bd622876b4
--- /dev/null
+++ b/src/site/content/en/blog/entanglement/index.md
@@ -0,0 +1,394 @@
+---
+layout: post
+title: Case Study - Getting Entangled with HTML5 Canvas
+authors:
+  - derekdetweiler
+date: 2010-12-14
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+This past spring (2010) I took interest in the rapidly increasing support
+for HTML5 and related technologies. At the time, a friend and I had been
+challenging each other in two-week game development competitions to hone
+our programming and development skills as well as bring to life the game
+ideas we were constantly tossing at each other. So, I naturally began
+incorporating HTML5 elements into my competition entries to gain a better
+understanding for how they worked and be able to do things that were nearly
+impossible using earlier HTML specs.
+
+Of the many new features in HTML5, the increasing support for the canvas
+tag offered me an exciting opportunity to implement interactive art using
+JavaScript, which led me to try implementing a puzzle game now called
+[Entanglement](https://chrome.google.com/webstore/detail/aciahcmjmecflokailenpkdchphgkefd).
+I had already created a prototype using the back of Settlers
+of Catan tiles, so using this as a blueprint of sorts, there are three
+essential parts to fashioning the hexagonal tile on the HTML5 canvas for
+web play: drawing the hexagon, drawing the paths, and rotating the tile.
+The following goes into detail outlining how I accomplished each of these
+in their current form.
+
+## Drawing the Hexagon
+
+In the original version of Entanglement, I used several canvas draw methods
+to draw the hexagon, but the current form of the game uses `drawImage()` to
+draw textures clipped from a sprite sheet.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/t1iTaeYuMWQPWf9jK5uU.png", alt="Tiles sprite sheet", width="800", height="277" %}
+<figcaption>Tiles sprite sheet</figcaption>
+</figure>
+
+I combined the images together into a single file so it's only one request
+to the server instead of, in this case, ten. To draw a chosen hexagon to the
+canvas, we first must gather our tools together: canvas, context, and the image.
+
+To create a canvas, all we need is the canvas tag in our html document like so:
+
+```html
+<canvas id="myCanvas"></canvas>
+```
+
+I give it an id so we can pull it into our script:
+
+```js
+var cvs = document.getElementById('myCanvas');
+```
+
+Secondly, we need to grab the 2d context for the canvas so we can begin drawing:
+
+```js
+var ctx = cvs.getContext('2d');
+```
+
+Lastly, we need the image. If it's named "tiles.png" in the same folder as
+our web page, we can get it by:
+
+```js
+var img = new Image();
+img.src = 'tiles.png';
+```
+
+Now that we have the three components, we can use ctx.drawImage() to draw
+the single hexagon we want from the sprite sheet to the canvas:
+
+```js
+ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight,
+            destinationX, destinationY, destinationWidth, destinationHeight);
+```
+
+In this case, we're using the fourth hexagon from the left on the top row.
+Also, we will draw it to the canvas in the top left corner, keeping it the
+same size as the original. Assuming the hexagons are 400 pixels wide and
+346 pixels high, altogether it will look something like this:
+
+```js
+var cvs = document.getElementById('myCanvas');
+var ctx = cvs.getContext('2d');
+var img = new Image();
+img.src = 'tiles.png';
+var sourceX = 1200;
+var sourceY = 0;
+var sourceWidth = 400;
+var sourceHeight = 346;
+var destinationX = 0;
+var destinationY = 0;
+var destinationWidth = 400;
+var destinationHeight = 346;
+ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight,
+            destinationX, destinationY, destinationWidth, destinationHeight);
+```
+
+We have successfully copied part of the image to the canvas with this as the result:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zQtWIfcf71EweH1lXkK4.png", alt="Hexagonal tile", width="400", height="346" %}
+<figcaption>Hexagonal tile</figcaption>
+</figure>
+
+## Drawing Paths
+
+Now that we have our hexagon drawn to the canvas, we want to draw a few lines
+on it. First, we will look at some geometry regarding the hexagon tile. We want
+two line ends per side with each ending 1/4 from the ends along the each edge and
+1/2 of the edge apart from one another, like so:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/J4GtTt1no2PJBX4OiNyX.png", alt="Line endpoints on hexagonal tile", width="400", height="346" %}
+<figcaption>Line endpoints on hexagonal tile</figcaption>
+</figure>
+
+We also want a nice curve, so, using a little trial and error, I found that,
+if I make a perpendicular line from the edge at each endpoint, the intersection
+from each pair of endpoints around a given angle of the hexagon makes a nice
+bezier control point for the given endpoints:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dfN1YEBYCSl2HoeAup1P.png", alt="Control points on hexagonal tile", width="400", height="346" %}
+<figcaption>Control points on hexagonal tile</figcaption>
+</figure>
+
+Now, we map both the endpoints and the control points to a Cartesian plane
+corresponding with our canvas image and we're ready to get back to the code.
+To keep it simple, we will start with one line. We will begin by drawing a path
+from the top left endpoint to the bottom right endpoint. With our earlier hexagon
+image being 400x346, that will make our top endpoint 150 pixels across and 0 pixels
+down, shorthand (150, 0). It's control point will be (150, 86). The bottom edge
+endpoint is (250, 346) with a control point of (250, 260):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ei1Xkikji0VI0lVwjCLw.png", alt="Coordinates for first bezier curve", width="400", height="346" %}
+<figcaption>Coordinates for first bezier curve</figcaption>
+</figure>
+
+With our coordinates in hand, we are now prepared to begin drawing. We will
+start fresh with ctx.beginPath() and then move to the first endpoint using:
+
+```js
+ctx.moveTo(pointX1,pointY1);
+```
+
+We can then draw the line itself using ctx.bezierCurveTo() as follows:
+
+```js
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+```
+
+Since we want the line to have a nice border, we will stroke this path twice
+using a different width and color each time. Color will be set using the
+ctx.strokeStyle property and width will be set using ctx.lineWidth. Altogether,
+drawing the first line will look like this:
+
+```js
+var pointX1 = 150;
+var pointY1 = 0;
+var controlX1 = 150;
+var controlY1 = 86;
+var controlX2 = 250;
+var controlY2 = 260;
+var pointX2 = 250;
+var pointY2 = 346;
+ctx.beginPath();
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+```
+
+We now have a hexagonal tile with the first line meandering across:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bj8npGlCEUpr89gptyfB.png", alt="Solitary line on hexagonal tile", width="400", height="346" %}
+<figcaption>Solitary line on hexagonal tile</figcaption>
+</figure>
+
+Entering coordinates for the other 10 endpoints as well as the corresponding
+bezier curve control points, we can repeat the steps above and might create a
+tile something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yLoqwPI8l699Bv6u5MqH.png", alt="Completed hexagonal tile.", width="400", height="346" %}
+<figcaption>Completed hexagonal tile</figcaption>
+</figure>
+
+### Rotating the Canvas
+
+Once we have our tile, we want to be able to turn it so different paths can
+be taken in the game. To accomplish this using canvas, we use `ctx.translate()`
+and `ctx.rotate()`. We want the tile to rotate about it's center, so our first
+step is to move the canvas reference point to the center of the hexagonal tile.
+To do this we use:
+
+```js
+ctx.translate(originX, originY);
+```
+
+Where originX will be half of the hexagonal tile's width and originY will be
+half of the height, giving us:
+
+```js
+var originX = 200;
+var originY = 173;
+ctx.translate(originX, originY);
+```
+
+Now we are able to rotate the tile with our new center point. Since a hexagon
+has six sides, we will want to rotate it by some multiple of Math.PI divided by 3.
+We will keep it simple and go with a single turn clockwise using:
+
+```js
+ctx.rotate(Math.PI / 3);
+```
+
+However, since our hexagon and lines are using the old (0,0) coordinates as
+the origin, once we are finished rotating, we will want to translate back before
+drawing. So, altogether we now have:
+
+```js
+var originX = 200;
+var originY = 173;
+ctx.translate(originX, originY);
+ctx.rotate(Math.PI / 3);
+ctx.translate(-originX, -originY);
+```
+
+Putting the above translation and rotation before our rendering code causes
+it to now render the rotated tile:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hfqXpRmtwS9eRgXgb0Xk.png", alt="Rotated hexagonal tile", width="400", height="346" %}
+<figcaption>Rotated hexagonal tile</figcaption>
+</figure>
+
+## Summary
+
+Above I have highlighted a few of the capabilities that HTML5 has to offer
+using the canvas tag, including rendering images, drawing bezier curves, and
+rotating the canvas. Using the HTML5 canvas tag and its JavaScript drawing tools
+for Entanglement proved to be an enjoyable experience, and I look forward to
+the many new applications and games that others create with this open and
+emerging technology.
+
+## Code Reference
+
+All code examples provided above are combined below as a reference:
+
+```js
+var cvs = document.getElementById('myCanvas');
+var ctx = cvs.getContext('2d');
+var img = new Image();
+img.src = 'tiles.png';
+
+var originX = 200;
+var originY = 173;
+ctx.translate(originX, originY);
+ctx.rotate(Math.PI / 3);
+ctx.translate(-originX, -originY);
+
+var sourceX = 1200;
+var sourceY = 0;
+var sourceWidth = 400;
+var sourceHeight = 346;
+var destinationX = 0;
+var destinationY = 0;
+var destinationWidth = 400;
+var destinationHeight = 346;
+ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight,
+            destinationX, destinationY, destinationWidth, destinationHeight);
+
+ctx.beginPath();
+var pointX1 = 150;
+var pointY1 = 0;
+var controlX1 = 150;
+var controlY1 = 86;
+var controlX2 = 250;
+var controlY2 = 260;
+var pointX2 = 250;
+var pointY2 = 346;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+
+ctx.beginPath();
+pointX1 = 250;
+pointY1 = 0;
+controlX1 = 250;
+controlY1 = 86;
+controlX2 = 150;
+controlY2 = 86;
+pointX2 = 75;
+pointY2 = 43;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+
+ctx.beginPath();
+pointX1 = 150;
+pointY1 = 346;
+controlX1 = 150;
+controlY1 = 260;
+controlX2 = 300;
+controlY2 = 173;
+pointX2 = 375;
+pointY2 = 213;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+
+ctx.beginPath();
+pointX1 = 325;
+pointY1 = 43;
+controlX1 = 250;
+controlY1 = 86;
+controlX2 = 300;
+controlY2 = 173;
+pointX2 = 375;
+pointY2 = 130;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+
+ctx.beginPath();
+pointX1 = 25;
+pointY1 = 130;
+controlX1 = 100;
+controlY1 = 173;
+controlX2 = 100;
+controlY2 = 173;
+pointX2 = 25;
+pointY2 = 213;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+
+ctx.beginPath();
+pointX1 = 325;
+pointY1 = 303;
+controlX1 = 250;
+controlY1 = 260;
+controlX2 = 150;
+controlY2 = 260;
+pointX2 = 75;
+pointY2 = 303;
+ctx.moveTo(pointX1, pointY1);
+ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, pointX2, pointY2);
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#ffffff';
+ctx.stroke();
+ctx.lineWidth = 10;
+ctx.strokeStyle = '#786c44';
+ctx.stroke();
+```
+
diff --git a/src/site/content/en/blog/es-modules-in-sw/index.md b/src/site/content/en/blog/es-modules-in-sw/index.md
new file mode 100644
index 00000000000..063383a129e
--- /dev/null
+++ b/src/site/content/en/blog/es-modules-in-sw/index.md
@@ -0,0 +1,177 @@
+---
+title: "ES modules in service workers"
+subhead: "A modern alternative to importScripts()."
+description: "Service workers can use static imports of ES modules to bring in extra code, as an alternative to importScripts()."
+authors:
+  - jeffposnick
+date: 2021-05-13
+hero: image/FNkVSAX8UDTTQWQkKftSgGe9clO2/JobkNOB1V5C9bp7x4Jur.jpg
+alt: Modular, abstract architecture.
+tags:
+  - blog
+  - service-worker
+---
+
+## Background
+
+[ES modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)
+have been a developer favorite for a while now. In addition to a
+[number of other benefits](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/),
+they offer the promise of a universal module format where shared code can be
+released once and run in browsers and in alternative runtimes like
+[Node.js](https://nodejs.org/en/). While
+[all modern browsers](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules#import)
+offer some ES module support, they don't all offer support _everywhere_ that
+code can be run. Specifically, support for importing ES modules inside of a
+browser's
+[service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+is just starting to become more widely available.
+
+This article details the current state of ES module support in service workers
+across common browsers, along with some gotchas to avoid, and best practices for
+shipping backwards-compatible service worker code.
+
+## Use cases
+
+The ideal use case for ES modules inside of service workers is for loading a
+modern library or configuration code that's shared with other runtimes that
+support ES modules.
+
+Attempting to share code in this way prior to ES modules entailed using older
+"universal" module formats like [UMD](https://github.com/umdjs/umd) that include
+unneeded boilerplate, and writing code that made changes to globally exposed
+variables.
+
+Scripts imported via ES modules can trigger the service worker
+[update](/service-worker-lifecycle/#updates)
+flow if their contents change, matching the
+[behavior](https://developer.chrome.com/blog/fresher-sw/#checks-for-updates-to-imported-scripts)
+of
+<code>[importScripts()](https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts)</code>.
+
+## Current limitations
+
+### Static imports only
+
+ES modules can be imported in one of two ways: either
+[statically](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import),
+using the `import ... from '...'` syntax, or
+[dynamically](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports),
+using the `import()` method. Inside of a service worker, only the static
+syntax is currently supported.
+
+This limitation is analogous to a
+[similar restriction](https://developer.chrome.com/blog/tweeks-to-addAll-importScripts/)
+placed on `importScripts()` usage. Dynamic calls to `importScripts()` do not
+work inside of a service worker, and all `importScripts()` calls, which are
+inherently synchronous, must complete before the service worker completes its
+`install` phase. This restriction ensures that the browser knows about, and is
+able to implicitly cache, all JavaScript code needed for a service worker's
+implementation during installation.
+
+Eventually, this restriction might be lifted, and dynamic ES
+module imports
+[may be allowed](https://github.com/w3c/ServiceWorker/issues/1356#issuecomment-783220858).
+For now, ensure that you only use the static syntax inside of
+a service worker.
+
+#### What about other workers?
+
+Support for
+[ES modules in "dedicated" workers](/module-workers/)—those
+constructed with `new Worker('...', {type: 'module'})`—is more widespread, and
+has been supported in Chrome and Edge since
+[version 80](https://chromestatus.com/feature/5761300827209728), as well as
+[recent versions](https://bugs.webkit.org/show_bug.cgi?id=164860) of Safari.
+Both static and dynamic ES module imports are supported in dedicated workers.
+
+Chrome and Edge have supported ES modules in
+[shared workers](https://developer.mozilla.org/docs/Web/API/SharedWorker)
+since [version 83](https://chromestatus.com/feature/5169440012369920), but no
+other browser offers support at this time.
+
+### No support for import maps
+
+[Import maps](https://github.com/WICG/import-maps/blob/main/README.md) allow
+runtime environments to rewrite module specifiers, to, for example, prepend the
+URL of a preferred CDN from which the ES modules can be loaded.
+
+While Chrome and Edge
+[version 89](https://www.chromestatus.com/feature/5315286962012160) and above
+support import maps, they currently
+[cannot be used](https://github.com/WICG/import-maps/issues/2) with service
+workers.
+
+## Browser support
+
+{% BrowserCompat 'javascript.statements.import' %}
+
+ES modules in service workers are supported in Chrome and Edge starting with
+[version 91](https://chromestatus.com/feature/4609574738853888).
+
+Safari added support in the
+[Technology Preview 122 Release](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/#:~:text=Added%20support%20for%20modules%20in%20Service%20Workers),
+and developers should expect to see this functionality released in the stable
+version of Safari in the future.
+
+## Example code
+
+This is a basic example of using a shared ES module in a web app's `window`
+context, while also registering a service worker that uses the same ES module:
+
+```javascript
+// Inside config.js:
+export const cacheName = 'my-cache';
+```
+
+```javascript
+// Inside your web app:
+<script type="module">
+  import {cacheName} from './config.js';
+  // Do something with cacheName.
+
+  await navigator.serviceWorker.register('es-module-sw.js', {
+    type: 'module',
+  });
+</script>
+```
+
+```javascript
+// Inside es-module-sw.js:
+import {cacheName} from './config.js';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(cacheName);
+    // ...
+  })());
+});
+```
+
+### Backwards compatibility
+
+The above example would work fine if all browsers supported ES modules in
+service workers, but as of this writing, that's not the case.
+
+To accommodate browsers that don't have built-in support, you can run your
+service worker script through an
+[ES module-compatible bundler](https://bundlers.tooling.report/) to create a
+service worker that includes all of the module code inline, and will work in
+older browsers. Alternatively, if the modules you're attempting to import are
+already available bundled in
+[IIFE](https://developer.mozilla.org/docs/Glossary/IIFE) or
+[UMD](https://github.com/umdjs/umd) formats, you can import them using
+`importScripts()`.
+
+Once you have two versions of your service worker available—one that uses ES
+modules, and the other that doesn't—you'll need to detect what the current
+browser supports, and register the corresponding service worker script. The best
+practices for detecting support are currently in flux, but you can follow the
+discussion in this
+[GitHub issue](https://github.com/w3c/ServiceWorker/issues/1582) for
+recommendations.
+
+_Photo by <a
+href="https://unsplash.com/@vlado?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Vlado
+Paunovic</a> on <a
+href="https://unsplash.com/@vlado?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_
diff --git a/src/site/content/en/blog/es7-observe/index.md b/src/site/content/en/blog/es7-observe/index.md
new file mode 100644
index 00000000000..04e45a7c1ae
--- /dev/null
+++ b/src/site/content/en/blog/es7-observe/index.md
@@ -0,0 +1,716 @@
+---
+layout: post
+title: Data-binding revolutions with Object.observe()
+date: 2014-05-20
+authors:
+  - addyosmani
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+{% Aside 'warning' %}
+In November 2015, it was [announced on esdiscuss](https://esdiscuss.org/topic/an-update-on-object-observe) 
+that the `Object.observe()` proposal is being withdrawn from TC39.
+{% endAside %}
+
+## Introduction
+
+A revolution is coming. There’s a new addition to JavaScript that’s going to change __everything__ you think you know about data-binding. It’s also going to change how many of your MVC libraries approach observing models for edits and updates. Are you ready for some sweet performance boosts to apps that care about property observation?
+
+Okay. Okay. Without further delay, I’m happy to announce [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe) has landed in [Chrome 36](http://www.chromestatus.com/features/6147094632988672) stable. __[WOOOO. THE CROWD GOES WILD]__.
+
+`Object.observe()`, part of a future ECMAScript standard, is a method for asynchronously observing changes to JavaScript objects… without the need for a separate library. It allows an observer to receive a time-ordered sequence of change records which describe the set of changes which took place to a set of observed objects.
+
+```js
+// Let's say we have a model with data
+var model = {};
+
+// Which we then observe
+Object.observe(model, function(changes){
+
+    // This asynchronous callback runs
+    changes.forEach(function(change) {
+
+        // Letting us know what changed
+        console.log(change.type, change.name, change.oldValue);
+    });
+
+});
+```
+
+Anytime a change is made, it gets reported:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AyTEBW6MUiau9OXMaVOG.png", alt="Change reported.", width="686", height="257" %}
+</figure>
+
+With `Object.observe()` (I like to call it O.o() or Oooooooo), you can implement two-way data-binding [without the need for a framework](http://bitworking.org/news/2014/05/zero_framework_manifesto).
+
+That’s not to say you shouldn’t use one. For large projects with complicated business logic, opinionated frameworks are invaluable and you should continue to use them. They simplify the orientation of new developers, require less code maintenance and impose patterns on how to achieve common tasks. When you don’t need one, you can use smaller, more focused libraries like [Polymer](http://polymer-project.org) (which already take advantage of O.o()).
+
+Even if you find yourself heavily using a framework or MV* library, O.o() has the potential to provide them with some healthy performance improvements, with a faster, simpler implementation whilst keeping the same API. For example, [last year Angular found](https://mail.mozilla.org/pipermail/es-discuss/2012-September/024978.html) that in a benchmark where changes were being made to a model, dirty-checking took 40ms per update and O.o() took 1-2ms per update (an improvement of 20-40x faster).
+
+Data-binding without the need for tons of complicated code also means you no longer have to poll for changes, so longer battery life!
+
+If you're already sold on O.o(), skip-ahead to the feature introduction, or read ahead for more on the problems it solves.
+
+## What do we want to observe?
+
+When we’re talking about data observation, we’re usually referring to keeping an eye out for some specific types of changes:
+
+- Changes to raw JavaScript objects
+- When properties get added, changed, deleted
+- When arrays have elements spliced in and out of them
+- Changes to the prototype of the object
+
+## The importance of data-binding
+
+Data-binding starts to become important when you care about model-view control separation. HTML is a great declarative mechanism, but it’s completely static. Ideally, you just want to declare the relationship between your data and the DOM and keep the DOM up to date. This creates leverage and saves you a lot of time writing really repetitive code that just sends data to and from the DOM between your application’s internal state or the server.
+
+Data-binding is particularly useful when you have a complex user-interface where you need to wire up relationships between multiple properties in your data models with multiple elements in your views. This is pretty common in the single-page applications we’re building today.
+
+By baking a way to natively observe data in the browser, we give JavaScript frameworks (and small utility libraries you write) a way to observe changes to model data without relying on some of the slow hacks the world uses today.
+
+## What the world looks like today
+
+**Dirty-checking**
+
+Where have you seen data-binding before? Well, if you use a modern MV* library for building your webapps (e.g Angular, Knockout) you’re probably used to binding model data to the DOM. As a refresher, here’s an example of a Phone list app where we’re binding the value of each phone in a `phones` array (defined in JavaScript) to a list item so that our data and UI are always in sync:
+
+```js
+<html ng-app>
+  <head>
+    ...
+    <script src='angular.js'></script>
+    <script src='controller.js'></script>
+  </head>
+  <body ng-controller='PhoneListCtrl'>
+    <ul>
+      <li ng-repeat='phone in phones'>
+        {{phone.name}}
+        <p>{{phone.snippet}}</p>
+      </li>
+    </ul>
+  </body>
+</html>
+```
+
+and the JavaScript for the controller:
+
+```js
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', function($scope) {
+  $scope.phones = [
+    {'name': 'Nexus S',
+     'snippet': 'Fast just got faster with Nexus S.'},
+    {'name': 'Motorola XOOM with Wi-Fi',
+     'snippet': 'The Next, Next Generation tablet.'},
+    {'name': 'MOTOROLA XOOM',
+     'snippet': 'The Next, Next Generation tablet.'}
+  ];
+});
+```
+
+Anytime the underlying model data changes, our list in the DOM gets updated. How does Angular achieve this? Well, behind the scenes it’s doing something called dirty-checking.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8NhwcWyZJiLZS5k4EEru.png", alt="Dirty checking", width="800", height="446" %}
+</figure>
+ 
+The basic idea with dirty-checking is that anytime data could have changed, the library has to go and check if it did change via a digest or change cycle. In Angular’s case, a digest cycle identifies all expressions registered to be watched to see if there’s a change. It [knows](http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933) about a model’s previous values and if they have changed, a change event is fired. For a developer, the main benefit here is that you get to use raw JavaScript object data which is pleasant to use and composes fairly well. The downside is that it has bad algorithmic behavior and is potentially very expensive.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RjWKA54O8RSUxYjEZ13M.png", alt="Dirty checking.", width="800", height="431" %}
+</figure>
+
+The expense of this operation is proportional to the total number of observed objects. I may need to do a lot of dirty checking. Also may need a way to trigger dirty-checking when data *might* have changed. There are lots of clever tricks frameworks use for this. It's unclear if this is ever going to be perfect.
+
+The web ecosystem should have more ability to innovate and evolve its own declarative mechanisms, e.g.
+
+- Constraint-based model systems
+-  Auto-persistence systems (e.g persisting changes to IndexedDB or localStorage)
+- Container objects (Ember, Backbone)
+
+[Container](http://www.slideshare.net/mixonic/containers-di) objects are where a framework creates objects which on the inside hold the data. They have accessors to the data and they can capture what you set or get and internally broadcast. This works well. It's relatively performant and has good algorithmic behavior. An example of container objects using Ember can be found below:
+
+```js
+// Container objects
+MyApp.president = Ember.Object.create({
+  name: "Barack Obama"
+});
+ 
+MyApp.country = Ember.Object.create({
+  // ending a property with "Binding" tells Ember to
+  // create a binding to the presidentName property
+  presidentNameBinding: "MyApp.president.name"
+});
+ 
+// Later, after Ember has resolved bindings
+MyApp.country.get("presidentName");
+// "Barack Obama"
+ 
+// Data from the server needs to be converted
+// Composes poorly with existing code
+```
+
+The expense of discovering what changed here is proportional to the number of things that changed. Another problem is now you're using this different kind of object. Generally speaking you have to convert from data you're getting from the server to these objects so they're observable.
+
+This doesn't compose particularly well with existing JS code because most code assumes it can operate on raw data. Not for these these specialized kinds of objects.
+
+## `Introducing Object.observe()`
+
+Ideally what we want is the best of both worlds - a way to observe data with support for raw data objects (regular JavaScript objects) if we choose to AND without the need to dirty-check everything all the time. Something with good algorithmic behavior. Something that composes well and is baked into the platform. This is the beauty of what `Object.observe()` brings to the table.
+
+It allows us to observe an object, mutate properties and see the change report of what has changed. But enough about the theory, let’s look at some code!
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mZEHsJKa7hgENbT7btX3.png", alt="Object.observe()", width="800", height="448" %}
+</figure>
+
+### Object.observe() and Object.unobserve()
+
+Let’s imagine that we have a simple vanilla JavaScript object representing a model:
+
+```js
+// A model can be a simple vanilla object
+var todoModel = {
+  label: 'Default',
+  completed: false
+};
+```
+
+We can then specify a callback for whenever mutations (changes) are made to the object:
+
+```js
+function observer(changes){
+  changes.forEach(function(change, i){
+      console.log('what property changed? ' + change.name);
+      console.log('how did it change? ' + change.type);
+      console.log('whats the current value? ' + change.object[change.name]);
+      console.log(change); // all changes
+  });
+}
+```
+
+{% Aside %}
+When the observer callback is invoked, the observed objects may have been changed multiple times, so for each change, the new value (the value following each change) and the current value (the final value) aren't necessarily the same thing.
+{% endAside %}
+
+We can then observe these changes using O.o(), passing in the object as our first argument and the callback as our second:
+
+```js
+Object.observe(todoModel, observer);
+```
+
+Let’s start making some changes to our Todos model object:
+
+```js
+todoModel.label = 'Buy some more milk';
+```
+
+Looking at the console, we get back some useful information! We know what property changed, how it was changed and what the new value is.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/SuipCSKRhKasAwoLxssX.png", alt="Console report", width="685", height="259" %}
+</figure>
+
+Woo! Goodbye, dirty-checking! Your tombstone should be carved in Comic Sans. Let’s change another property. This time `completeBy`:
+
+```js
+todoModel.completeBy = '01/01/2014';
+```
+
+As we can see we once again successfully get back a change report:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HYrWbPQDDPyZo9mxdZA1.png", alt="Change report.", width="689", height="253" %}
+</figure>
+
+Great. What if we now decided to delete the ‘completed’ property from our object:
+
+```js
+delete todoModel.completed;
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Rw7ym71bRXj07vQWgPEx.png", alt="Completed", width="686", height="261" %}
+</figure>
+
+As we can see, the report of changes returned includes information about the deletion. As expected, the new value of the property is now undefined. So, we now know you can find out when properties have been added. When they've been deleted. Basically, the __set__ of properties on an object ("new", "deleted", "reconfigured") and it's prototype changing (_proto_).
+
+As in any observation system, a method also exists to stop listening out for changes. In this case, it’s `Object.unobserve()`, which has the same signature as O.o() but can be called as follows:
+
+```js
+Object.unobserve(todoModel, observer);
+```
+
+As we can see below, any mutations made to the object after this has been run no longer result in a list of change records being returned.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oznJVQJ0gVHuAlsHhY86.png", alt="Mutations", width="684", height="259" %}
+</figure>
+
+### Specifying changes of interest
+
+So we’ve looked at the basics behind how to get back a list of changes to an observed object. What if you’re interested in only a subset of changes that were made to an object rather than all of them?. Everyone needs a spam filter. Well, observers can specify only those types of changes they wish to hear about through an accept list. This can be specified using the third argument to O.o() as follows:
+
+```js
+Object.observe(obj, callback, optAcceptList)
+```
+
+Let’s walk through an example of how this can be used:
+
+```js
+// Like earlier, a model can be a simple vanilla object
+
+var todoModel = {
+  label: 'Default',
+  completed: false
+
+};
+
+
+// We then specify a callback for whenever mutations 
+// are made to the object
+function observer(changes){
+  changes.forEach(function(change, i){
+    console.log(change);
+  })
+
+};
+
+// Which we then observe, specifying an array of change 
+// types we're interested in
+
+Object.observe(todoModel, observer, ['delete']);
+
+// without this third option, the change types provided 
+// default to intrinsic types
+
+todoModel.label = 'Buy some milk'; 
+
+// note that no changes were reported
+```
+
+If however we now delete the label, notice that this type of change does get reported:
+
+```js
+delete todoModel.label;
+```
+
+If you don’t specify a list of accept types to O.o(), it defaults to the "intrinsic" object change types (`add`, `update`, `delete`, `reconfigure`, `preventExtensions` (for when an object becoming non-extensible isn’t observable)).
+
+## Notifications
+
+O.o() also comes with the notion of notifications. They’re nothing like those annoying things you get on a phone, but rather useful. Notifications are similar to [Mutation Observers](https://developer.mozilla.org/docs/Web/API/MutationObserver). They happen at the end of the micro-task. In the browser context, this is almost always going to be at the end of the current event handler.
+
+The timing is nice because generally one unit of work is finished and now observers get to do their work. It’s a nice turn-based processing model.
+
+The workflow for using a notifier looks a little like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NX0q4MKDAHCyacZ1lvoJ.png", alt="Notifications", width="800", height="448" %}
+</figure>
+
+Let’s look at an example of how notifiers might be used in practice to define custom notifications for when properties on an object are get or set. Keep an eye on the comments here:
+
+```js
+// Define a simple model
+var model = {
+    a: {}
+};
+
+// And a separate variable we'll be using for our model's 
+// getter in just a moment
+var _b = 2;
+
+// Define a new property 'b' under 'a' with a custom
+// getter and setter
+
+Object.defineProperty(model.a, 'b', {
+    get: function () {
+        return _b;
+    },
+    set: function (b) {
+
+        // Whenever 'b' is set on the model
+        // notify the world about a specific type
+        // of change being made. This gives you a huge
+        // amount of control over notifications
+        Object.getNotifier(this).notify({
+            type: 'update',
+            name: 'b',
+            oldValue: _b
+        });
+
+        // Let's also log out the value anytime it gets
+        // set for kicks
+        console.log('set', b);
+
+        _b = b;
+    }
+});
+
+// Set up our observer
+function observer(changes) {
+    changes.forEach(function (change, i) {
+        console.log(change);
+    })
+}
+
+// Begin observing model.a for changes
+Object.observe(model.a, observer);
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Hw9MxpD9bTYK98aq6JrL.png", alt="Notifications console", width="686", height="271" %}
+</figure>
+
+Here we report when the value of the data properties change ("update"). Anything else the object’s implementation chooses to report (`notifier.notifyChange()`).
+
+Years of experience on the web platform have taught us that a synchronous approach is the first thing you try because its the easiest to wrap your head around. The problem is it creates a fundamentally dangerous processing model. If you're writing code and say, update the property of an object, you don't really want a situation having update the property of that object could have invited some arbitrary code to go do whatever it wanted. It's not ideal to have your assumptions invalidated as you're running through the middle of a function.
+
+If you're an observer, you ideally don't want to be called if someone is in the middle of something. You don't want to be asked to go to do work on an inconsistent state of the world. End up doing a lot more error checking. Trying to tolerate a lot more bad situations and generally, its a hard model to work with. Async is harder to deal with but its a better model at the end of the day.
+
+The solution to this problem is synthetic change records.
+
+## Synthetic change records
+
+Basically, if you want to have accessors or computed properties it is your responsibility to notify when these values change. It’s a little extra work but it is designed as a sort of first-class feature of this mechanism and these notifications will be delivered with the rest of the notifications from underlying data objects. From data properties.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/U2yz4qnKJrPd5DmiePoL.png", alt="Synthetic change records", width="800", height="444" %}
+</figure>
+
+Observing accessors and computed properties can be solved with notifier.notify - another part of O.o(). Most observation systems want some form of observing derived values. There are lots of ways to do this. O.o makes no judgement as to the "right" way. Computed properties should be accessors which *notify* when the internal (private) state changes.
+
+Again, webdevs should expect libraries to help make notifying and various approaches to computed properties easy (and reduce boilerplate). 
+
+Let’s set up the next example, which is a circle class. The idea here is that we have this circle and there’s a radius property. In this case the radius is an accessor and when its value changes it’s actually going to notify for itself that the value changed. This will be delivered with all other changes to this object or any other object. Essentially, if you’re implementing an object you want to have synthetic or computed properties or you have to pick a strategy for how this is going to work. Once you do, this will fit into your system as a whole.
+
+Skip past the code to see this working in DevTools.
+
+```js
+function Circle(r) {
+  var radius = r;
+ 
+  var notifier = Object.getNotifier(this);
+  function notifyAreaAndRadius(radius) {
+    notifier.notify({
+      type: 'update',
+      name: 'radius',
+      oldValue: radius
+    })
+    notifier.notify({
+      type: 'update',
+      name: 'area',
+      oldValue: Math.pow(radius * Math.PI, 2)
+    });
+  }
+ 
+  Object.defineProperty(this, 'radius', {
+    get: function() {
+      return radius;
+    },
+    set: function(r) {
+      if (radius === r)
+        return;
+      notifyAreaAndRadius(radius);
+      radius = r;
+    }
+  });
+ 
+  Object.defineProperty(this, 'area', {
+    get: function() {
+      return Math.pow(radius, 2) * Math.PI;
+    },
+    set: function(a) {
+      r = Math.sqrt(a/Math.PI);
+      notifyAreaAndRadius(radius);
+      radius = r;
+    }
+  });
+}
+ 
+function observer(changes){
+  changes.forEach(function(change, i){
+    console.log(change);
+  })
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9VeNfFdGdgZaBj8sf6rr.png", alt="Synthetic change records console", width="690", height="355" %}
+</figure>
+
+## Accessor properties
+
+A quick note on accessor properties. We mentioned earlier that only the value changes are observable for data properties. Not for computed properties or accessors. The reason is that JavaScript doesn't really have the notion of changes in value to accessors. An accessor is just a collection of functions.
+
+If you assign to an accessor JavaScript just invokes the function there and from its point of view nothing has changed. It just gave some code the opportunity to run.
+
+The problem is semantically we can look at our above assignment to the value - 5 to it. We ought to be able to know what happened here. This is actually an unsolvable problem. The example demonstrates why. There is really no way for any system to know what is meant by this because this can be arbitrary code. It can do whatever it wants in this case. It’s updating the value every time it is accessed and so asking whether it changed doesn’t make much sense.
+
+## Observing multiple objects with one callback
+
+Another pattern possible with O.o() is the notion of a single callback observer. This allows a single callback to be used as an "observer" for lots of different objects. The callback will be delivered the full set of changes to all objects it observes at the “end of the microtask” (Note the similarity to Mutation Observers).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ecy0DdsooKMHqHfoAzl0.png", alt="Observing multiple objects with one callback", width="800", height="440" %}
+</figure>
+
+## Large-scale changes
+
+Maybe you’re working on a reaaaally big app and regularly have to work with large-scale changes. Objects may wish to describe larger semantic changes which will affect lots of properties in a more compact way (instead of broadcasting tons of property changes).
+
+O.o() helps with this in the form of two specific utilities: `notifier.performChange()` and `notifier.notify()`, which we’ve already introduced.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/h9YEPzJj6eEkoWhYTOwn.png", alt="Large-scale changes", width="800", height="453" %}
+</figure>
+
+Let’s look at this in an example of how large-scale changes can be described where we define a Thingy object with some math utilities (multiply, increment, incrementAndMultiply). Any time a utility is used, it tells the system that a collection of work comprises a specific type of change.
+
+For example: `notifier.performChange('foo', performFooChangeFn);`
+
+```js
+function Thingy(a, b, c) {
+  this.a = a;
+  this.b = b;
+}
+
+Thingy.MULTIPLY = 'multiply';
+Thingy.INCREMENT = 'increment';
+Thingy.INCREMENT_AND_MULTIPLY = 'incrementAndMultiply';
+
+
+Thingy.prototype = {
+  increment: function(amount) {
+    var notifier = Object.getNotifier(this);
+
+    // Tell the system that a collection of work comprises 
+    // a given changeType. e.g
+    // notifier.performChange('foo', performFooChangeFn);
+    // notifier.notify('foo', 'fooChangeRecord');
+    notifier.performChange(Thingy.INCREMENT, function() {
+      this.a += amount;
+      this.b += amount;
+    }, this);
+
+    notifier.notify({
+      object: this,
+      type: Thingy.INCREMENT,
+      incremented: amount
+    });
+  },
+
+  multiply: function(amount) {
+    var notifier = Object.getNotifier(this);
+
+    notifier.performChange(Thingy.MULTIPLY, function() {
+      this.a *= amount;
+      this.b *= amount;
+    }, this);
+
+    notifier.notify({
+      object: this,
+      type: Thingy.MULTIPLY,
+      multiplied: amount
+    });
+  },
+
+  incrementAndMultiply: function(incAmount, multAmount) {
+    var notifier = Object.getNotifier(this);
+
+    notifier.performChange(Thingy.INCREMENT_AND_MULTIPLY, function() {
+      this.increment(incAmount);
+      this.multiply(multAmount);
+    }, this);
+
+    notifier.notify({
+      object: this,
+      type: Thingy.INCREMENT_AND_MULTIPLY,
+      incremented: incAmount,
+      multiplied: multAmount
+    });
+  }
+}
+```
+
+We then define two observers for our object: one which is a catch-all for changes and another which will only report back on specific accept types we’ve defined (Thingy.INCREMENT, Thingy.MULTIPLY, Thingy.INCREMENT_AND_MULTIPLY).
+
+```js
+var observer, observer2 = {
+    records: undefined,
+    callbackCount: 0,
+    reset: function() {
+      this.records = undefined;
+      this.callbackCount = 0;
+    },
+};
+
+observer.callback = function(r) {
+    console.log(r);
+    observer.records = r;
+    observer.callbackCount++;
+};
+
+observer2.callback = function(r){
+	console.log('Observer 2', r);
+}
+
+
+Thingy.observe = function(thingy, callback) {
+  // Object.observe(obj, callback, optAcceptList)
+  Object.observe(thingy, callback, [Thingy.INCREMENT,
+                                    Thingy.MULTIPLY,
+                                    Thingy.INCREMENT_AND_MULTIPLY,
+                                    'update']);
+}
+
+Thingy.unobserve = function(thingy, callback) {
+  Object.unobserve(thingy);
+}
+```
+
+We can now start playing with this code. Let's define a new Thingy:
+
+```js
+var thingy = new Thingy(2, 4);
+```
+Observe it and then make some changes. OMG, so fun. SO many thingies!
+
+```js
+// Observe thingy
+Object.observe(thingy, observer.callback);
+Thingy.observe(thingy, observer2.callback);
+
+// Play with the methods thingy exposes
+thingy.increment(3);               // { a: 5, b: 7 }
+thingy.b++;                        // { a: 5, b: 8 }
+thingy.multiply(2);                // { a: 10, b: 16 }
+thingy.a++;                        // { a: 11, b: 16 }
+thingy.incrementAndMultiply(2, 2); // { a: 26, b: 36 }
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QSJ7imhSFnzjxdAVa1ji.png", alt="Large-scale changes", width="688", height="356" %}
+</figure>
+
+Everything inside of the "perform function" is considered to be the work of “big-change”. Observers which accept “big-change” will only receive the “big-change” record. Observers which do not will receive the underlying changes resulting from the work which “perform function” did.
+
+## Observing arrays
+
+We’ve talked for a while about observing changes to objects but what about arrays?! Great question. When someone tells me, "Great question." I never hear their answer because I'm busy congratulating myself for asking such a great question, but I digress. We have new methods for working with arrays too!
+
+`Array.observe()` is a method that treats large-scale changes to itself - for example - splice, unshift or anything which implicitly changes it length - as a "splice" change record. Internally it uses `notifier.performChange("splice",...)`. 
+
+Here’s an example where we observe a model "array" and similarly get back a list of changes when there are any changes to the underlying data:
+
+```js
+var model = ['Buy some milk', 'Learn to code', 'Wear some plaid'];
+var count = 0;
+
+Array.observe(model, function(changeRecords) {
+  count++;
+  console.log('Array observe', changeRecords, count);
+});
+
+model[0] = 'Teach Paul Lewis to code';
+model[1] = 'Channel your inner Paul Irish';
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/W259zu0LSyKmcSOv9DBl.png", alt="Observing arrays", width="689", height="357" %}
+</figure>
+
+## Performance
+
+The way to think about the computational performance impact of O.o() is to think about it like a read cache. Generally speaking, a cache is a great choice when (in order of importance):
+
+1. The frequency of reads dominates the frequency of writes.
+1. You're able to create a cache which trades the constant amount of work involved during writes for algorithmically better performance during reads.
+1. The constant time slowdown of writes is acceptable.
+
+O.o() is designed for use-cases like 1).
+
+Dirty-checking requires keeping a copy of all the data you're observing. This means you incur a structural memory cost to dirty-checking you just don't get with O.o(). Dirty-checking, whilst a decent stop-gap solution, is also a fundamentally leaky abstraction which can create unnecessary complexity for applications. 
+
+Why? Well, dirty-checking has to run any time data *may* have changed. There simply isn't a very robust way to do this and any approach to it has significant downsides (e.g checking on a polling interval risks visual artifacts and race conditions between code concerns). Dirty-checking also requires a global registry of observers, creating memory-leak hazards and tear-down costs O.o() avoids.
+
+Let’s take a look at some numbers. 
+
+The below benchmark tests (available on [GitHub](https://github.com/Polymer/observe-js/tree/master/benchmark)) allow us to compare dirty-checking vs O.o(). They're structured as graphs of Observed-Object-Set-Size vs Number-Of-Mutations.
+The general result is that dirty-checking performance is algorithmically proportional to the number of observed objects while O.o() performance is proportional to the number of mutations which were made. 
+
+**Dirty-checking**
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/u0YA16bZphwvi61IzqR9.png", alt="Dirty checking performance", width="800", height="355" %}
+</figure>
+
+**Chrome with Object.observe() switched on**
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Bu4TUrPE5juVVZDUlmis.png", alt="Observe performance", width="800", height="359" %}
+</figure>
+
+## Polyfilling Object.observe()
+
+Great - so O.o() can be used in Chrome 36, but what about using it in other browsers? We’ve got you covered. Polymer’s [Observe-JS](https://github.com/Polymer/observe-js) is a polyfill for O.o() which will use the native implementation if it’s present, but otherwise polyfills it and includes some useful sugaring on top. It offers an aggregate view of the world that sums up changes and delivers a report of what has changed. Two really powerful things it exposes are:
+
+1. You can observe paths. This means you can say, I would like to observe "foo.bar.baz" from a given object and they’ll tell you when the value at that path changed. If the path is unreachable, it considers the value undefined.
+
+Example of observing a value at a path from a given object:
+
+```js
+var obj = { foo: { bar: 'baz' } };
+
+var observer = new PathObserver(obj, 'foo.bar');
+observer.open(function(newValue, oldValue) {
+  // respond to obj.foo.bar having changed value.
+});
+```
+
+2. It will tell you about array splices. Array splices are basically the minimal set of splice operations you will have to perform on an array in order to transform the old version of the array into the new version of the array. This is a type of transform or different view of the array. It’s the minimum amount of work you need to do to move from the old state to the new state.
+
+Example of reporting changes to an array as a minimal set of splices:
+
+```js
+var arr = [0, 1, 2, 4];
+
+var observer = new ArrayObserver(arr);
+observer.open(function(splices) {
+  // respond to changes to the elements of arr.
+  splices.forEach(function(splice) {
+    splice.index; // index position that the change occurred.
+    splice.removed; // an array of values representing the sequence of elements which were removed
+    splice.addedCount; // the number of elements which were inserted.
+  });
+});
+```
+
+## Frameworks and Object.observe()
+
+As mentioned, O.o() will give frameworks and libraries a huge opportunity to improve the performance of their data-binding in browsers that support the feature.
+
+Yehuda Katz and Erik Bryn from Ember confirmed that adding support for O.o() is in Ember's near-term roadmap. Angular's Misko Hervy wrote a [design doc](https://docs.google.com/document/d/10W46qDNO8Dl0Uye3QX0oUDPYAwaPl0qNy73TVLjd1WI/edit) on Angular 2.0's improved change detection. Their long term approach will be to take advantage of Object.observe() when it lands in Chrome stable, opting for [Watchtower.js](https://github.com/angular/watchtower.js/), their own change detection approach until then. Suuuuper exciting.
+
+## Conclusions
+
+O.o() is a powerful addition to the web platform which you can go out and use today.
+
+We’re hopeful that in time the feature will land in more browsers, allowing JavaScript frameworks to get performance boosts from access to native object observation capabilities. Those targeting Chrome should be able to use O.o() in Chrome 36 (and above) and the feature should also be available in a future Opera release.
+
+So, go forth and talk to the authors of JavaScript frameworks about `Object.observe()` and how they’re planning on using it to improve the performance of data-binding in your apps. There are most definitely exciting times ahead!
+
+## Resources
+
+- [Object.observe() on the Harmony wiki](http://wiki.ecmascript.org/doku.php?id=harmony:observe)>
+- [Databinding with Object.observe() by Rick Waldron](http://bocoup.com/weblog/javascript-object-observe/)
+- [Everything you wanted to know about Object.observe() - JSConf](http://addyosmani.com/blog/the-future-of-data-binding-is-object-observe/)
+- [Why Object.observe() is the best ES7 feature](http://georgestefanis.com/blog/2014/03/25/object-observe-ES7.html)
+
+__With thanks to Rafael Weinstein, Jake Archibald, Eric Bidelman, Paul Kinlan and Vivian Cromwell for their input and reviews.__
diff --git a/src/site/content/en/blog/eventing-deepdive/index.md b/src/site/content/en/blog/eventing-deepdive/index.md
new file mode 100644
index 00000000000..69530140caf
--- /dev/null
+++ b/src/site/content/en/blog/eventing-deepdive/index.md
@@ -0,0 +1,585 @@
+---
+title: JavaScript eventing deep dive
+subhead:
+  '`preventDefault` and `stopPropagation`: when to use which and what exactly each method does.'
+authors:
+  - stephenstchur
+  - thomassteiner
+Description: |
+  preventDefault and stopPropagationEvent handling in JavaScript is usually fairly
+  straightforward. Occasionally though, people get a little tripped up between
+  preventDefault and stopPropagation, when to use which one and what exactly each
+  method does. This article explains both with the goal of ending your confusion
+  once and for all.
+date: 2021-09-10
+# updated: 2021-09-10
+tags:
+  - blog
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/tPQ30G1QPF3ETAVf1Q40.jpg
+alt: Binders in many colors.
+---
+
+## Event.stopPropagation() and Event.preventDefault()
+
+JavaScript event handling is often straightforward. This is especially true when dealing with a
+simple (relatively flat) HTML structure. Things get a bit more involved though when events are
+traveling (or propagating) through a hierarchy of elements. This is typically when developers reach
+for `stopPropagation()` and/or `preventDefault()` to solve the problems they're experiencing. If
+you've ever thought to yourself "I'll just try `preventDefault()` and if that doesn't work I'll try
+`stopPropagation()` and if that doesn't work, I'll try both," then this article is for you! I will
+explain exactly what each method does, when to use which one, and provide you with a variety of
+working examples for you to explore. My goal is to end your confusion once and for all.
+
+Before we dive too deeply though, it's important to briefly touch on the two kinds of event handling
+possible in JavaScript (in all modern browsers that is—Internet Explorer prior to version 9 did not
+support event capturing at all).
+
+## Eventing styles (capturing and bubbling)
+
+All modern browsers support event capturing, but it is very rarely used by developers.
+Interestingly, it was the only form of eventing that Netscape originally supported. Netscape's
+biggest rival, Microsoft Internet Explorer, did not support event capturing at all, but rather, only
+supported another style of eventing called event bubbling. When the W3C was formed, they found merit
+in both styles of eventing and declared that browsers should support both, via a third parameter to
+the `addEventListener` method. Originally, that parameter was just a boolean, but all modern
+browsers support an `options` object as the third parameter, which you can use to specify (among
+other things) if you want to use event capturing or not:
+
+```js
+someElement.addEventListener('click', myClickHandler, { capture: true | false });
+```
+
+Note that the `options` object is optional, as is its `capture` property. If either is omitted, the
+default value for `capture` is `false`, meaning event bubbling will be used.
+
+{% Aside %} For more details about `addEventListener`, including its legacy syntax, see
+[`EventTarget.addEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener).
+{% endAside %}
+
+### Event capturing
+
+What does it mean if your event handler is "listening in the capturing phase?" To understand this,
+we need to know how events originate and how they travel. The following is true of _all_ events,
+even if you, as the developer, don't leverage it, care about it, or think about it.
+
+All events begin at the window and first go through the capturing phase. This means that when an
+event is dispatched, it starts the window and travels "downwards" towards its target element
+_first_. This happens even if you are only listening in the bubbling phase. Consider the following
+example markup and JavaScript:
+
+```html
+<html>
+  <body>
+    <div id="A">
+      <div id="B">
+        <div id="C"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```js
+document.getElementById('C').addEventListener(
+  'click',
+  function (e) {
+    console.log('#C was clicked');
+  },
+  true,
+);
+```
+
+When a user clicks on element `#C`, an event, originating at the `window`, is dispatched. This event
+will then propagate through its descendants as follows:
+
+`window` => `document` => `<html>` => `<body>` => and so on, until it reaches the target.
+
+It does not matter if nothing is listening for a click event at the `window` or `document` or
+`<html>` element or `<body>` element (or any other element on the way to its target). An event still
+originates at the `window` and begins its journey as just described.
+
+In our example, the click event will then _propagate_ (this is an important word as it will tie
+directly into how the `stopPropagation()` method works and will be explained later in this document)
+_from the `window`_ to its target element (in this case, `#C`) by way of every element between the
+`window` and `#C`.
+
+This means that the click event will begin at `window` and the browser will ask the following
+questions:
+
+"Is anything listening for a click event on the `window` in the capturing phase?" If so, the
+appropriate event handlers will fire. In our example, nothing is, so no handlers will fire.
+
+Next, the event will _propagate_ to the `document` and the browser will ask: "Is anything listening
+for a click event on the `document` in the capturing phase?" If so, the appropriate event handlers
+will fire.
+
+Next, the event will _propagate_ to the `<html>` element and the browser will ask: "Is anything
+listening for a click on the `<html>` element in the capturing phase?" If so, the appropriate event
+handlers will fire.
+
+Next, the event will _propagate_ to the `<body>` element and the browser will ask: "Is anything
+listening for a click event on the `<body>` element in the capturing phase?" If so, the appropriate
+event handlers will fire.
+
+Next, the event will _propagate_ to the `#A` element. Again, the browser will ask: "Is anything
+listening for a click event on `#A` in the capturing phase and if so, the appropriate event handlers
+will fire.
+
+Next, the event will _propagate_ to the `#B` element (and the same question will be asked).
+
+Finally, the event will reach its target and the browser will ask: "Is anything listening for a
+click event on the `#C` element in the capturing phase?" The answer this time is "yes!" This brief
+period of time when the event is _at_ the target, is known as the "target phase." At this point, the
+event handler will fire, the browser will console.log "#C was clicked" and then we're done, right?
+_Wrong!_ We're not done at all. The process continues, but now it changes to the bubbling phase.
+
+### Event bubbling
+
+The browser will ask:
+
+"Is anything listening for a click event on `#C` in the bubbling phase?" Pay close attention here.
+It is completely possible to listen for clicks (or any event type) in _both_ the capturing _and_
+bubbling phases. And if you had wired up event handlers in both phases (e.g. by calling
+`.addEventListener()` twice, once with `capture = true` and once with `capture = false`), then yes,
+both event handlers would absolutely fire for the same element. But it's also important to note that
+they fire in different phases (one in the capturing phase and one in the bubbling phase).
+
+Next, the event will _propagate_ (more commonly stated as "bubble" because it seems as though the
+event is traveling "up" the DOM tree) to its parent element, `#B`, and the browser will ask: "Is
+anything listening for click events on `#B` in the bubbling phase?" In our example, nothing is, so
+no handlers will fire.
+
+Next, the event will bubble to `#A` and the browser will ask: "Is anything listening for click
+events on `#A` in the bubbling phase?"
+
+Next, the event will bubble to `<body>`: "Is anything listening for click events on the `<body>`
+element in the bubbling phase?"
+
+Next, the `<html>` element: "Is anything listening for click events on the `<html>` element in the
+bubbling phase?
+
+Next, the `document`: "Is anything listening for click events on the `document` in the bubbling
+phase?"
+
+Finally, the `window`: "Is anything listening for click events on the window in the bubbling phase?"
+
+Phew! That was a long journey, and our event is probably very tired by now, but believe it or not,
+that is the journey every event goes through! Most of the time, this is never noticed because
+developers are typically only interested in one event phase or the other (and it is usually the
+bubbling phase).
+
+It's worth spending some time playing around with event capturing and event bubbling and logging
+some notes to the console as handlers fire. It's very insightful to see the path that an event
+takes. Here is an example that listens to every element in both phases.
+
+```html
+<html>
+  <body>
+    <div id="A">
+      <div id="B">
+        <div id="C"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```js
+document.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on document in capturing phase');
+  },
+  true,
+);
+// document.documentElement == <html>
+document.documentElement.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on <html> in capturing phase');
+  },
+  true,
+);
+document.body.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on <body> in capturing phase');
+  },
+  true,
+);
+document.getElementById('A').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #A in capturing phase');
+  },
+  true,
+);
+document.getElementById('B').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #B in capturing phase');
+  },
+  true,
+);
+document.getElementById('C').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #C in capturing phase');
+  },
+  true,
+);
+
+document.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on document in bubbling phase');
+  },
+  false,
+);
+// document.documentElement == <html>
+document.documentElement.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on <html> in bubbling phase');
+  },
+  false,
+);
+document.body.addEventListener(
+  'click',
+  function (e) {
+    console.log('click on <body> in bubbling phase');
+  },
+  false,
+);
+document.getElementById('A').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #A in bubbling phase');
+  },
+  false,
+);
+document.getElementById('B').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #B in bubbling phase');
+  },
+  false,
+);
+document.getElementById('C').addEventListener(
+  'click',
+  function (e) {
+    console.log('click on #C in bubbling phase');
+  },
+  false,
+);
+```
+
+The console output will depend on which element you click. If you were to click on the "deepest"
+element in the DOM tree (the `#C` element), you will see every single one of these event handlers
+fire. With a bit of CSS styling to make it more obvious which element is which, here is the console
+output `#C` element (with a screenshot as well):
+
+```bash
+"click on document in capturing phase"
+"click on <html> in capturing phase"
+"click on <body> in capturing phase"
+"click on #A in capturing phase"
+"click on #B in capturing phase"
+"click on #C in capturing phase"
+"click on #C in bubbling phase"
+"click on #B in bubbling phase"
+"click on #A in bubbling phase"
+"click on <body> in bubbling phase"
+"click on <html> in bubbling phase"
+"click on document in bubbling phase"
+```
+
+You can interactively play with this in the live demo below. Click on the `#C` element and observe the console output.
+
+<div style="height: 680px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/event-capturing-and-bubbling.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+## `event.stopPropagation()`
+
+With an understanding of where events originate and how they travel (i.e. propagate) through the DOM
+in both the capturing phase and the bubbling phase, we can now turn our attention to
+`event.stopPropagation()`.
+
+The `stopPropagation()` method can be called on (most) native DOM events. I say "most" because there
+are a few on which calling this method won't do anything (because the event doesn't propagate to
+begin with). Events like `focus`, `blur`, `load`, `scroll`, and a few others fall into this
+category. You can call `stopPropagation()` but nothing interesting will happen, since these events
+don't propagate.
+
+## But what does `stopPropagation` do?
+
+It does, pretty much, just what it says. When you call it, the event will, from that point, cease
+propagating to any elements it would otherwise travel to. This is true of _both_ directions
+(capturing and bubbling). So if you call `stopPropagation()` anywhere in the capturing phase, the
+event will never make it to the target phase or bubbling phase. If you call it in the bubbling
+phase, it will have already gone through the capturing phase, but it will cease "bubbling up" from
+the point at which you called it.
+
+Returning to our same example markup, what do you think would happen, if we called
+`stopPropagation()` in the capturing phase at the `#B` element?
+
+It would result in the following output:
+
+```bash
+"click on document in capturing phase"
+"click on <html> in capturing phase"
+"click on <body> in capturing phase"
+"click on #A in capturing phase"
+"click on #B in capturing phase"
+```
+
+You can interactively play with this in the live demo below. Click on the `#C` element in the live demo and observe the console output.
+
+<div style="height: 680px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/stop-propagation-capturing-B.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+How about stopping propagation at `#A` in the bubbling phase? That would result in the following
+output:
+
+```bash
+"click on document in capturing phase"
+"click on <html> in capturing phase"
+"click on <body> in capturing phase"
+"click on #A in capturing phase"
+"click on #B in capturing phase"
+"click on #C in capturing phase"
+"click on #C in bubbling phase"
+"click on #B in bubbling phase"
+"click on #A in bubbling phase"
+```
+
+You can interactively play with this in the live demo below. Click on the `#C` element in the live demo and observe the console output.
+
+<div style="height: 680px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/stop-propagation-bubbling-A.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+One more, just for fun. What happens if we call `stopPropagation()` in the _target phase_ for `#C`?
+Recall that the "target phase" is the name given to the period of time when the event is _at_ its
+target. It would result in the following output:
+
+```bash
+"click on document in capturing phase"
+"click on <html> in capturing phase"
+"click on <body> in capturing phase"
+"click on #A in capturing phase"
+"click on #B in capturing phase"
+"click on #C in capturing phase"
+```
+
+{% Aside %} It would be technically more accurate if I had logged "click on #C in target phase".
+However, I chose to use the term "capturing" and "bubbling" for both of `#C`'s event handlers to
+make it clear that handlers can be executed in both phases of the event's lifecycle. Just know that
+technically, the time when the event is at `#C` is officially known as the "target phase".
+{% endAside %}
+
+Note that the event handler for `#C` in which we log "click on #C in the capturing phase" _still_
+executes, but the one in which we log "click on #C in the bubbling phase" does not. This should make
+perfect sense. We called `stopPropagation()` _from_ the former, so that is the point at which the
+event's propagation will cease.
+
+You can interactively play with this in the live demo below. Click on the `#C` element in the live demo and observe the console output.
+
+<div style="height: 680px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/stop-propagation-capturing-C.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+In any of these live demos, I encourage you to play around. Try clicking on the `#A` element only or
+the `body` element only. Try to predict what will happen and then observe if you are correct. At
+this point, you should be able to predict pretty accurately.
+
+## `event.stopImmediatePropagation()`
+
+What is this strange, and not oft-used method? It's similar to `stopPropagation`, but rather than
+stopping an event from traveling to descendents (capturing) or ancestors (bubbling), this method
+only applies when you have more than one event handler wired up to a single element. Since
+`addEventListener()` supports a multicast style of eventing, it's completely possible to wire up an
+event handler to a single element more than once. When this happens, (in most browsers), event
+handlers are executed in the order they were wired up. Calling `stopImmediatePropagation()` prevents
+any subsequent handlers from firing. Consider the following example:
+
+```html
+<html>
+  <body>
+    <div id="A">I am the #A element</div>
+  </body>
+</html>
+```
+
+```js
+document.getElementById('A').addEventListener(
+  'click',
+  function (e) {
+    console.log('When #A is clicked, I shall run first!');
+  },
+  false,
+);
+
+document.getElementById('A').addEventListener(
+  'click',
+  function (e) {
+    console.log('When #A is clicked, I shall run second!');
+    e.stopImmediatePropagation();
+  },
+  false,
+);
+
+document.getElementById('A').addEventListener(
+  'click',
+  function (e) {
+    console.log('When #A is clicked, I would have run third, if not for stopImmediatePropagation');
+  },
+  false,
+);
+```
+
+The above example will result in the following console output:
+
+```bash
+"When #A is clicked, I shall run first!"
+"When #A is clicked, I shall run second!"
+```
+
+Note that the third event handler never runs due to the fact that the second event handler calls
+`e.stopImmediatePropagation()`. If we had instead called `e.stopPropagation()`, the third handler
+would still run.
+
+<div style="height: 680px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/stop-immediate-propagation.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+## `event.preventDefault()`
+
+If `stopPropagation()` prevents an event from traveling "downwards" (capturing) or "upwards"
+(bubbling), what then, does `preventDefault()` do? It sounds like it does something similar. Does
+it?
+
+Not really. While the two are often confused, they actually don't have much to do with each other.
+When you see `preventDefault()`, in your head, add the word "action." Think "prevent the default
+action."
+
+And what is the default action you may ask? Unfortunately, the answer to that isn't quite as clear
+because it's highly dependent on the element + event combination in question. And to make matters
+even more confusing, sometimes there is no default action at all!
+
+Let's begin with a very simple example to understand. What do you expect to happen when you click a
+link on a web page? Obviously, you expect the browser to navigate to the URL specified by that link.
+In this case, the element is an anchor tag and the event is a click event. That combination (`<a>` +
+`click`) has a "default action" of navigating to the link's href. What if you wanted to _prevent_
+the browser from performing that default action? That is, suppose you want to prevent the browser
+from navigating to the URL specified by the `<a>` element's `href` attribute? This is what
+`preventDefault()` will do for you. Consider this example:
+
+```html
+<a id="avett" href="https://www.theavettbrothers.com/welcome">The Avett Brothers</a>
+```
+
+```js
+document.getElementById('avett').addEventListener(
+  'click',
+  function (e) {
+    e.preventDefault();
+    console.log('Maybe we should just play some of their music right here instead?');
+  },
+  false,
+);
+```
+
+You can interactively play with this in the live demo below. Click the link _The Avett Brothers_
+and observe the console output (and the fact that you are not redirected to the Avett Brothers website).
+
+<div style="height: 620px; width: 100%;">
+  <iframe src="https://silicon-brawny-cardinal.glitch.me/prevent-default.html" loading="lazy" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+Normally, clicking the link labelled The Avett Brothers would result in browsing to
+`www.theavettbrothers.com`. In this case though, we've wired up a click event handler to the `<a>`
+element and specified that the default action should be prevented. Thus, when a user clicks this
+link, they won't be navigated anywhere, and instead the console will simply log "Maybe we should
+just play some of their music right here instead?"
+
+What other element/event combinations allow you to prevent the default action? I cannot possibly
+list them all, and sometimes you have to just experiment to see. But briefly, here are a few:
+
+- `<form>` element + "submit" event: `preventDefault()` for this combination will prevent a form
+  from submitting. This is useful if you want to perform validation and should something fail, you
+  can conditionally call preventDefault to stop the form from submitting.
+
+- `<a>` element + "click" event: `preventDefault()` for this combination prevents the browser from
+  navigating to the URL specified in the `<a>` element's href attribute.
+
+- `document` + "mousewheel" event: `preventDefault()` for this combination prevents page scrolling
+  with the mousewheel (scrolling with keyboard would still work though). <br> <small>↜ This requires
+  calling `addEventListener()` with `{ passive: false }`</small>.
+
+- `document` + "keydown" event: `preventDefault()` for this combination is lethal. It renders the
+  page largely useless, preventing keyboard scrolling, tabbing, and keyboard highlighting.
+
+- `document` + "mousedown" event: `preventDefault()` for this combination will prevent text
+  highlighting with the mouse and any other "default" action that one would invoke with a mouse
+  down.
+
+- `<input>` element + "keypress" event: `preventDefault()` for this combination will prevent
+  characters typed by the user from reaching the input element (but don't do this; there is
+  rarely, if ever, a valid reason for it).
+
+- `document` + "contextmenu" event: `preventDefault()` for this combination prevents the native
+  browser context menu from appearing when a user right-clicks or long-presses (or any other way in
+  which a context menu might appear).
+
+This is not an exhaustive list by any means, but hopefully it gives you a good idea of how
+`preventDefault()` can be used.
+
+## A fun practical joke?
+
+What happens if you `stopPropagation()` _and_ `preventDefault()` in the capturing phase, starting at
+the document? Hilarity ensues! The following code snippet will render any web page just about
+completely useless:
+
+```js
+function preventEverything(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+}
+
+document.addEventListener('click', preventEverything, true);
+document.addEventListener('keydown', preventEverything, true);
+document.addEventListener('mousedown', preventEverything, true);
+document.addEventListener('contextmenu', preventEverything, true);
+document.addEventListener('mousewheel', preventEverything, { capture: true, passive: false });
+```
+
+I don't really know why you'd ever want to do this (except maybe to play a joke on someone), but it
+is useful to think about what's happening here, and realize why it creates the situation it does.
+
+All events originate at `window`, so in this snippet, we're stopping, dead in their tracks, all
+`click`, `keydown`, `mousedown`, `contextmenu`, and `mousewheel` events from ever getting to any
+elements that might be listening for them. We also call `stopImmediatePropagation` so that any
+handlers wired up to the document after this one, will be thwarted as well.
+
+Note that `stopPropagation()` and `stopImmediatePropagation()` aren't (at least not mostly) what
+render the page useless. They simply prevent events from getting where they would otherwise go.
+
+But we also call `preventDefault()`, which you'll recall prevents the default _action_. So any
+default actions (like mousewheel scroll, keyboard scroll or highlight or tabbing, link clicking,
+context menu display, etc.) are all prevented, thus leaving the page in a fairly useless state.
+
+## Live demos
+
+To explore all the examples from this article again in one place, check out the embedded demo
+below.
+
+{% Glitch 'silicon-brawny-cardinal' %}
+
+## Acknowledgements
+
+Hero image by [Tom Wilson](https://unsplash.com/@pastorthomasbwilson) on
+[Unsplash](https://unsplash.com/photos/Em2hPK55o8g).
diff --git a/src/site/content/en/blog/eventsource-basics/index.md b/src/site/content/en/blog/eventsource-basics/index.md
new file mode 100644
index 00000000000..0662e2eefbf
--- /dev/null
+++ b/src/site/content/en/blog/eventsource-basics/index.md
@@ -0,0 +1,376 @@
+---
+title: Stream Updates with Server-Sent Events
+authors:
+  - ericbidelman
+date: 2010-11-30
+tags:
+  - blog
+---
+
+## Introduction
+
+I wouldn't be surprised if you've stumbled on this article wondering, "What the heck are [Server-Sent Events](http://dev.w3.org/html5/eventsource/) (SSEs)?" Many people
+have never heard of them, and rightfully so. Over the years, the specification has seen significant
+changes, and the API has taken somewhat of a backseat to newer, sexier communication
+protocols such as the [WebSocket API](https://www.html5rocks.com//tutorials/#websockets). The idea behind
+SSEs may be familiar: a web app "subscribes" to a
+stream of updates generated by a server and, whenever a new event occurs, a notification is sent to
+the client. But to really understand Server-Sent Events, we need to understand the limitations
+of its AJAX predecessors, which includes:
+
+**Polling** is a traditional technique used by the vast majority of AJAX applications.
+The basic idea is that the application repeatedly polls a server for data.
+If you're familiar with the HTTP protocol, you know that fetching data revolves around a request/response format.
+The client makes a request and waits for the server to respond with data. If none is available, an empty response
+is returned. So what's the big deal with polling? Extra polling creates greater HTTP overhead.
+
+**Long polling (Hanging GET / COMET)** is a slight variation on polling.
+In long polling, if the server does not have data available, the server holds the request
+open until new data is made available. Hence, this technique is often referred to as a "Hanging GET".
+When information becomes available, the server responds, closes the connection, and the process is repeated.
+The effect is that the server is constantly responding with new data as it becomes available.
+The shortcoming is that the implementation of such a procedure typically involves hacks such
+as appending script tags to an 'infinite' iframe. We can do better than hacks!
+
+Server-Sent Events on the other hand, have been designed from the ground up to be efficient.
+When communicating using SSEs, a server can push data to your
+app whenever it wants, without the need to make an initial request. In other words,
+updates can be streamed from server to client as they happen. SSEs
+open a single unidirectional channel between server and client.
+
+The main difference between Server-Sent Events and long-polling is that SSEs
+are handled directly by the browser and the user simply has to listen for messages.
+
+## Server-Sent Events vs. WebSockets
+
+Why would you choose Server-Sent Events over WebSockets? Good question.
+
+One reason SSEs have been kept in the shadow is because
+later APIs like [WebSockets](https://www.html5rocks.com//tutorials/#websockets) provide a richer protocol to perform bi-directional,
+full-duplex communication. Having a two-way channel is more attractive for things like games, messaging apps, and for
+cases where you need near real-time updates in both
+directions. However, in some scenarios __data doesn't need to be sent from the client__. You simply
+need updates from some server action. A few examples would be friends' status updates, stock tickers,
+news feeds, or other automated data push mechanisms (e.g. updating a client-side
+Web SQL Database or IndexedDB object store). If you'll need to send data to a server,
+`XMLHttpRequest` is always a friend.
+
+SSEs are sent over traditional HTTP. That means they __do not require a special protocol or server
+implementation__ to get working. WebSockets on the other hand, require full-duplex connections
+and new Web Socket servers to handle the protocol. In addition, Server-Sent Events  have a variety
+of features that WebSockets lack by design such as __automatic reconnection__, __event IDs__,
+and the ability to __send arbitrary events__.
+
+## JavaScript API
+
+To subscribe to an event stream, create an `EventSource` object and pass it the
+URL of your stream:
+
+```javascript
+if (!!window.EventSource) {
+var source = new EventSource('stream.php');
+} else {
+// Result to xhr polling :(
+}
+```
+
+{% Aside %}
+If the URL passed to the `EventSource` constructor
+is an absolute URL, its origin (scheme, domain, port) must match that of the calling page.
+{% endAside %}
+
+Next, set up a handler for the `message` event. You can optionally
+listen for `open` and `error`:
+
+```javascript
+source.addEventListener('message', function(e) {
+console.log(e.data);
+}, false);
+
+source.addEventListener('open', function(e) {
+// Connection was opened.
+}, false);
+
+source.addEventListener('error', function(e) {
+if (e.readyState == EventSource.CLOSED) {
+// Connection was closed.
+}
+}, false);
+```
+
+When updates are pushed from the server, the `onmessage` handler fires
+and new data is be available in its `e.data` property. The magical part is
+that whenever the connection is closed, the browser will automatically reconnect to the
+source after ~3 seconds. Your server implementation can even have control over
+this reconnection timeout. See Controlling the reconnection-timeout
+in the next section.
+
+That's it. Your client is now ready to process events from `stream.php`.
+
+## Event stream format
+
+Sending an event stream from the source is a matter of constructing a
+plaintext response, served with a `text/event-stream` Content-Type,
+that follows the SSE format.
+In its basic form, the response should contain a `data:` line, followed by your message, followed by
+two "\n" characters to end the stream:
+
+```javascript
+data: My message\n\n
+```
+
+## Multiline data
+
+If your message is longer, you can break it up by using multiple `data:` lines. Two
+or more consecutive lines beginning with `data:` will be treated as a
+single piece of data, meaning only one `message` event will be fired.
+Each line should end in a single "\n" (except for the last, which should end with two).
+The result passed to your `message` handler is a single string concatenated by newline characters. For example:
+
+```javascript
+data: first line\n
+data: second line\n\n</pre>
+```
+
+will produce "first line\nsecond line" in `e.data`. One could then use `e.data.split('\n').join('')`
+to reconstruct the message sans "\n" characters.
+
+### Send JSON data
+
+Using multiple lines makes it easy to send JSON without breaking syntax:
+
+```javascript
+data: {\n
+data: "msg": "hello world",\n
+data: "id": 12345\n
+data: }\n\n
+```
+
+and possible client-side code to handle that stream:
+
+```javascript
+source.addEventListener('message', function(e) {
+var data = JSON.parse(e.data);
+console.log(data.id, data.msg);
+}, false);
+```
+
+### Associating an ID with an event
+
+You can send a unique id with an stream event by including a line starting with `id:`:
+
+```javascript
+id: 12345\n
+data: GOOG\n
+data: 556\n\n
+```
+
+Setting an ID lets the browser keep track of the last event fired so that if, the
+connection to the server is dropped, a special HTTP header (`Last-Event-ID`) is
+set with the new request. This lets the browser determine which event is appropriate to fire.
+The `message` event contains a `e.lastEventId` property.
+
+### Controlling the reconnection-timeout
+
+The browser attempts to reconnect to the source roughly 3 seconds
+after each connection is closed. You can change that timeout by including a
+line beginning with `retry:`, followed by the number of milliseconds
+to wait before trying to reconnect.
+
+The following example attempts a reconnect after 10 seconds:
+
+```javascript
+retry: 10000\n
+data: hello world\n\n
+```
+
+### Specifying an event name
+
+A single event source can generate different types events by including an
+event name. If a line beginning with `event:` is present,
+followed by a unique name for the event, the event is associated with that name.
+On the client, an event listener can be setup to listen to that particular event. 
+
+For example, the following server output sends three types of events,
+a generic 'message' event, 'userlogon', and 'update' event:
+
+```javascript
+data: {"msg": "First message"}\n\n
+event: userlogon\n
+data: {"username": "John123"}\n\n
+event: update\n
+data: {"username": "John123", "emotion": "happy"}\n\n
+```
+
+With event listeners setup on the client:
+
+```javascript
+source.addEventListener('message', function(e) {
+var data = JSON.parse(e.data);
+console.log(data.msg);
+}, false);
+
+source.addEventListener('userlogon', function(e) {
+var data = JSON.parse(e.data);
+console.log('User login:' + data.username);
+}, false);
+
+source.addEventListener('update', function(e) {
+var data = JSON.parse(e.data);
+console.log(data.username + ' is now ' + data.emotion);
+}, false);
+```
+
+## Server examples
+
+A basic server implementation in PHP:
+
+```php
+<?php
+header('Content-Type: text/event-stream');
+header('Cache-Control: no-cache'); // recommended to prevent caching of event data.
+
+/**
+* Constructs the SSE data format and flushes that data to the client.
+*
+* @param string $id Timestamp/id of this connection.
+* @param string $msg Line of text that should be transmitted.
+**/
+
+function sendMsg($id, $msg) {
+  echo "id: $id" . PHP_EOL;
+  echo "data: $msg" . PHP_EOL;
+  echo PHP_EOL;
+  ob_flush();
+  flush();
+}
+
+$serverTime = time();
+
+sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
+?>
+```
+
+Here's a similiar implementation using [Node JS](http://nodejs.org):
+
+```javascript
+var http = require('http');
+var sys = require('sys');
+var fs = require('fs');
+
+http.createServer(function(req, res) {
+//debugHeaders(req);
+
+if (req.headers.accept && req.headers.accept == 'text/event-stream') {
+if (req.url == '/events') {
+    sendSSE(req, res);
+} else {
+    res.writeHead(404);
+    res.end();
+}
+} else {
+res.writeHead(200, {'Content-Type': 'text/html'});
+res.write(fs.readFileSync(__dirname + '/sse-node.html'));
+res.end();
+}
+}).listen(8000);
+
+function sendSSE(req, res) {
+res.writeHead(200, {
+'Content-Type': 'text/event-stream',
+'Cache-Control': 'no-cache',
+'Connection': 'keep-alive'
+});
+
+var id = (new Date()).toLocaleTimeString();
+
+// Sends a SSE every 5 seconds on a single connection.
+setInterval(function() {
+constructSSE(res, id, (new Date()).toLocaleTimeString());
+}, 5000);
+
+constructSSE(res, id, (new Date()).toLocaleTimeString());
+}
+
+function constructSSE(res, id, data) {
+res.write('id: ' + id + '\n');
+res.write("data: " + data + '\n\n');
+}
+
+function debugHeaders(req) {
+sys.puts('URL: ' + req.url);
+for (var key in req.headers) {
+sys.puts(key + ': ' + req.headers[key]);
+}
+sys.puts('\n\n');
+}
+```
+
+### sse-node.html
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset=&quot;utf-8&quot; />
+    </head>
+    <body>
+        <script>
+        var source = new EventSource('/events');
+        source.onmessage = function(e) {
+            document.body.innerHTML += e.data + '<br>';
+        };
+        </script>
+    </body>
+</html>
+```
+
+## Cancel an event stream
+
+Normally, the browser auto-reconnects to the event source when the connection
+is closed, but that behavior can be canceled from either the client or server.
+
+To cancel a stream from the client, simply call:
+
+```javascript
+source.close();
+```
+
+To cancel a stream from the server, respond with a non `text/event-stream`
+`Content-Type` or return an HTTP status other than `200 OK`
+(e.g. `404 Not Found`).
+
+Both methods will prevent the browser from re-establishing the connection.
+
+## A word on security
+
+From the WHATWG's section on [Cross-document messaging security](http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#authors):
+
+{% Aside %}
+Authors should check the origin attribute to ensure that messages are only
+accepted from domains that they expect to receive messages from. Otherwise,
+bugs in the author's message handling code could be exploited by hostile sites.
+{% endAside %}
+
+So, as an extra level of precaution, be sure to verify `e.origin` in
+your `message` handler matches your app's origin:
+
+```javascript
+source.addEventListener('message', function(e) {
+if (e.origin != 'http://example.com') {
+alert('Origin was not http://example.com');
+return;
+}
+...
+}, false);
+```
+
+Another good idea is to check the integrity of the data you receive.
+
+Even after checking the origin attribute, authors should also check that the
+data in question is of the expected format.
+
+## References
+
+- [Server-Sent Events specification](http://dev.w3.org/html5/eventsource/)
+- [Cross-document messaging security](http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#authors)
diff --git a/src/site/content/en/blog/evolving-cls/index.md b/src/site/content/en/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..6d674cf5d96
--- /dev/null
+++ b/src/site/content/en/blog/evolving-cls/index.md
@@ -0,0 +1,165 @@
+---
+title: "Evolving the CLS metric"
+subhead: "Plans for improving the CLS metric to be more fair to long-lived pages."
+description: "Plans for improving the CLS metric to be more fair to long-lived pages."
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: An example windowing approach for measuring layout shift.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %}
+  **Jun 2, 2021:** The update to CLS described in this
+  post is now available across Chrome's web tooling surfaces. See [Evolving
+  Cumulative Layout Shift in web tooling](/cls-web-tooling/) for details.
+{% endAside %}
+
+We (the Chrome Speed Metrics Team) recently outlined our initial research into
+[options for making the CLS metric more fair to pages that are open for a long
+time](/better-layout-shift-metric/). We've received a lot of very
+helpful feedback and after completing the large-scale analysis, we've finalized
+the change we plan to make to the metric: **maximum session window with 1 second
+gap, capped at 5 seconds**.
+
+Read on for the details!
+
+## How did we evaluate the options?
+
+We reviewed all the feedback received from the developer community and took it
+into account.
+
+We also implemented the [top
+options](/better-layout-shift-metric/#best-strategies) in Chrome
+and did a large-scale analysis of the metrics over millions of web pages. We
+checked what types of sites each option improved, and how the options compared,
+especially looking into the sites which were scored differently by different
+options. Overall, we found that:
+
+* **All** the options reduced the correlation between time spent on page and
+  layout shift score.
+* **None** of the options resulted in a worse score for any page. So there is no
+  need to be concerned that this change will worsen the scores for your site.
+
+## Decision points
+
+### Why a session window?
+
+In our [earlier post](/better-layout-shift-metric/), we covered
+[a few different windowing
+strategies](/better-layout-shift-metric/#windowing-strategies)
+for grouping together layout shifts while ensuring the score doesn't grow
+unbounded. The feedback we received from developers overwhelmingly favored the
+session window strategy because it groups the layout shifts together most
+intuitively.
+
+To review session windows, here's an example:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Example of a session window.
+  </figcaption>
+</figure>
+
+In the example above, many layout shifts occur over time as the user views the
+page. Each is represented by a blue bar. You'll notice above that the blue bars
+have different heights; those represent the [score](/cls/#layout-shift-score) of
+each individual layout shift. A session window starts with the first layout shift
+and continues to expand until there is a gap with no layout shifts. When the next
+layout shift occurs, a new session window starts. Since there are three gaps with
+no layout shifts, there are three session windows in the example. Similar to the
+current definition of CLS, the scores of each shift are added up, so that each
+window's score is the sum of its individual layout shifts.
+
+Based on the [initial
+research](/better-layout-shift-metric/#best-strategies), we chose
+a 1 second gap between session windows, and that gap worked well in our
+large-scale analysis. So the "Session Gap" shown in the example above is 1
+second.
+
+### Why the maximum session window?
+
+We narrowed the [summarization
+strategies](/better-layout-shift-metric/#summarization) down to
+two options in our initial research:
+
+* The **average** score of all the session windows, for very large session
+  windows (uncapped windows with 5 second gaps between them).
+* The **maximum** score of all the session windows, for smaller session windows
+  (capped at 5 seconds, with 1 second gaps between them).
+
+After the initial research, we added each metric to Chrome so that we could do a
+large-scale analysis over millions of URLs. In the large-scale analysis, we
+found a lot of URLs with layout shift patterns like this:
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png",
+alt="Example of a small layout shift pulling down the average", width="800",
+height="550" %}
+
+On the bottom right, you can see there is only a single, tiny layout shift in
+Session Window 2, giving it a very low score. That means that the average score
+is pretty low. But what if the developer fixes that tiny layout shift? Then the
+score is calculated just on Session Window 1, which means that the page's score
+*nearly doubles*. It would be really confusing and discouraging to developers
+to improve their layout shifts only to find that the score got worse. And
+removing this small layout shift is obviously slightly better for the user
+experience, so it shouldn't worsen the score.
+
+Because of this problem with averages, we decided to move forward with the
+smaller, capped, maximum windows. So in the example above, Session Window 2
+would be ignored and only the sum of the layout shifts in Session Window 1 would
+be reported.
+
+### Why 5 seconds?
+
+We evaluated multiple window sizes and found two things:
+
+* For short windows, slower page loads and slower responses to user interactions
+  could break layout shifts into multiple windows and improve the score. We
+  wanted to keep the window large enough so it doesn't reward slowdowns!
+* There are some pages with a continual stream of small layout shifts. For
+  example, a sports score page that shifts a bit with each score update. These
+  shifts are annoying, but they don't get more annoying as time passes. So we
+  wanted to ensure that the window was capped for these types of layout shifts.
+
+With these two things in mind, comparing a variety of window sizes on many
+real-world web pages, we concluded that 5 seconds would be a good limit to the
+window size.
+
+## How will this affect my page's CLS score?
+
+Since this update caps the CLS of a page, **no page will have a worse score**
+as a result of this change.
+
+And based on our analysis, **55% of origins will not see a change in CLS at all
+at the 75th percentile**. This is because their pages either do not currently
+have any layout shifts or the shifts they do have are already confined to a
+single session window.
+
+**The rest of the origins will see improved scores at the 75th percentile with
+this change.** Most will only see a slight improvement, but about 3% will see
+their scores improve from having a "needs improvement" or "poor" rating to
+having a "good" rating. These pages tend to use infinite scrollers or have many
+slow UI updates, as described in our [earlier
+post](/better-layout-shift-metric/).
+
+## How can I try it out?
+
+We'll be updating our tools to use the new metric definition soon! Until then,
+you can try out the updated version of CLS on any site using the [example
+JavaScript
+implementations](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver)
+or the [fork of the Web Vitals
+extension](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Thanks to everyone who took the time to read the previous post and give their
+feedback!
diff --git a/src/site/content/en/blog/excalidraw-and-fugu/index.md b/src/site/content/en/blog/excalidraw-and-fugu/index.md
new file mode 100644
index 00000000000..69b18e5e0fb
--- /dev/null
+++ b/src/site/content/en/blog/excalidraw-and-fugu/index.md
@@ -0,0 +1,544 @@
+---
+layout: post
+title: |
+  Excalidraw and Fugu: Improving Core User Journeys
+subhead: |
+  Any sufficiently advanced technology is indistinguishable from magic. Unless you understand it. My name is Thomas Steiner, I work in Developer Relations at Google and in this write-up of my Google I/O talk, I will look at some of the new Fugu APIs and how they improve core user journeys in the Excalidraw PWA, so you can take inspiration from these ideas and apply them to your own apps.
+authors:
+  - thomassteiner
+date: 2021-05-18
+updated: 2021-12-06
+scheduled: true
+description: |
+  A write-up of Thomas Steiner's Google I/O 2021 talk titled Excalidraw and Fugu: Improving Core User Journeys
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/FcDeDjh1bW8zAHIzA2BF.png
+alt: Dropping a file from the macOS Finder onto the Excalidraw application.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+---
+
+{% Aside %}
+This is a write-up of my Google I/O talk. If you prefer watching it, see the video below.
+{% endAside %}
+
+{% YouTube 'EK1AkxgQwro' %}
+
+## How I came to Excalidraw
+
+I want to start with a story. On January 1st, 2020,
+[Christopher Chedeau](https://twitter.com/vjeux), a software engineer at Facebook,
+[tweeted](https://twitter.com/Vjeux/status/1212503324982792193) about a small drawing app he had
+started to work on. With this tool, you could draw boxes and arrows that feel cartoony and
+hand-drawn. The next day, you could also draw ellipses and text, as well as select objects and move
+them around. On January 3, the app had gotten its name, Excalidraw, and, like with every good side
+project, buying the [domain name](https://excalidraw.com/) was one of Christopher's first acts. By
+now, you could use colors and export the whole drawing as a PNG.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/VbicbA7xj5azVcDUBSKt.png", alt="Screenshot of the Excalidraw prototype application showing that it supported rectangles, arrows, ellipses, and text.", width="800", height="600" %}
+
+On January 15, Christopher put out a
+[blog post](https://blog.vjeux.com/2020/uncategorized/reflections-on-excalidraw.html) that drew a
+lot of attention on Twitter, including mine. The post started with some impressive stats:
+
+- 12K unique active users
+- 1.5K stars on GitHub
+- 26 contributors
+
+For a project that started a mere two weeks ago, that's not bad at all. But the thing that truly
+spiked my interest was further down in the post. Christopher wrote that he tried something new this
+time: _giving everyone who landed a pull request unconditional commit access._ The same day of
+reading the blog post, I had a [pull request](https://github.com/excalidraw/excalidraw/pull/388) up
+that added File System Access API support to Excalidraw, fixing a
+[feature request](https://github.com/excalidraw/excalidraw/issues/169) that someone had filed.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/9VJ9EqPzKdzUpxFeM5wH.png", alt="Screenshot of the tweet where I announce my PR.", width="550", height="424" %}
+
+My pull request was merged a day later and from thereon, I had full commit access. Needless to say,
+I didn't abuse my power. And nor did anybody else from the 149 contributors so far.
+
+Today, [Excalidraw](https://excalidraw.com/) is a full-fledged installable progressive web app with
+offline support, a stunning dark mode, and yes, the ability to open and save files thanks to the
+File System Access API.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/Wzz6UELRpcvkKZQtmVmc.png", alt="Screenshot of the Excalidraw PWA in today's state.", width="800", height="537" %}
+
+## Lipis on why he dedicates so much of his time to Excalidraw
+
+So this marks the end of my "how I came to Excalidraw" story, but before I dive into some of
+Excalidraw's amazing features, I have the pleasure to introduce Panayiotis. Panayiotis Lipiridis, on
+the Internet simply known as [lipis](https://github.com/lipis), is the most prolific contributor to
+Excalidraw. I asked lipis what motivates him to dedicate so much of his time to Excalidraw:
+
+> Like everyone else I learned about this project from Christopher's tweet. My first contribution
+> was to add the [Open Color library](https://yeun.github.io/open-color/), the colors that are still
+> part of Excalidraw today. As the project grew and we had quite many requests, my next big
+> contribution was to build a backend for storing drawings so users could share them. But what
+> really drives me to contribute is that whoever tried Excalidraw is looking to find excuses to use
+> it again.
+
+I fully agree with lipis. Whoever tried Excalidraw is looking to find excuses to use it again.
+
+## Excalidraw in action
+
+I want to show you now how you can use Excalidraw in practice. I'm not a great artist, but the
+Google I/O logo is simple enough, so let me give it a try. A box is the "i", a line can be the
+slash, and the "o" is a circle. I hold down <kbd>shift</kbd>, so I get a perfect circle. Let me move
+the slash a little, so it looks better. Now some color for the "i" and the "o". Blue is good. Maybe
+a different fill style? All solid, or cross-hatch? Nah, hachure looks great. It's not perfect, but
+that's the idea of Excalidraw, so let me save it.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/wK9jDdHG7A7qT5ViOuEQ.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+I click the save icon and enter a file name in the file save dialog. In Chrome, a browser that
+supports the File System Access API, this is not a download, but a true save operation, where I can
+choose the location and name of the file, and where, if I make edits, I can just save them to the
+same file.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/HvKcKNk8Q3bbaVe36E3T.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+Let me change the logo and make the "i" red. If I now click save again, my modification is saved to
+the same file as before. As a proof, let me clear the canvas and reopen the file. As you can see,
+the modified red-blue logo is there again.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/XzlUi88cPDYl8YFAH1J8.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+## Working with files
+
+On browsers that currently don't support the File System Access API, each save operation is a
+download, so when I make changes, I end up with multiple files with an incrementing number in the
+filename that fill up my Downloads folder. But despite this downside, I can still save the file.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/1oVPIESBNhoL4AhOSNli.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+### Opening files
+
+So what's the secret? How can opening and saving work on different browsers that may or may not
+support the File System Access API? Opening a file in Excalidraw happens in a function called
+`loadFromJSON)(`), which in turn calls a function called `fileOpen()`.
+
+```js
+export const loadFromJSON = async (localAppState: AppState) => {
+  const blob = await fileOpen({
+    description: 'Excalidraw files',
+    extensions: ['.json', '.excalidraw', '.png', '.svg'],
+    mimeTypes: ['application/json', 'image/png', 'image/svg+xml'],
+  });
+  return loadFromBlob(blob, localAppState);
+};
+```
+
+The `fileOpen()` function that comes from a small library I wrote called
+[browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) that we use in
+Excalidraw. This library provides file system access through the
+[File System Access API](/file-system-access/) with a legacy fallback, so it can be used in any
+browser.
+
+Let me first show you the implementation for when the API is supported. After negotiating the
+accepted MIME types and file extensions, the central piece is calling the File System Access API's
+function `showOpenFilePicker()`. This function returns an array of files or a single file, dependent
+on whether multiple files are selected. All that's left then is to put the file handle on the file
+object, so it can be retrieved again.
+
+```js
+export default async (options = {}) => {
+  const accept = {};
+  // Not shown: deal with extensions and MIME types.
+  const handleOrHandles = await window.showOpenFilePicker({
+    types: [
+      {
+        description: options.description || '',
+        accept: accept,
+      },
+    ],
+    multiple: options.multiple || false,
+  });
+  const files = await Promise.all(handleOrHandles.map(getFileWithHandle));
+  if (options.multiple) return files;
+  return files[0];
+  const getFileWithHandle = async (handle) => {
+    const file = await handle.getFile();
+    file.handle = handle;
+    return file;
+  };
+};
+```
+
+The fallback implementation relies on an `input` element of type `"file"`. After the negotiation of
+the to-be-accepted MIME types and extensions, the next step is to programmatically click the input
+element so the file open dialog shows. On change, that is, when the user has selected one or
+multiple files, the promise resolves.
+
+```js
+export default async (options = {}) => {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    const accept = [
+      ...(options.mimeTypes ? options.mimeTypes : []),
+      options.extensions ? options.extensions : [],
+    ].join();
+    input.multiple = options.multiple || false;
+    input.accept = accept || '*/*';
+    input.addEventListener('change', () => {
+      resolve(input.multiple ? Array.from(input.files) : input.files[0]);
+    });
+    input.click();
+  });
+};
+```
+
+### Saving files
+
+Now to saving. In Excalidraw, saving happens in a function called `saveAsJSON()`. It first
+serializes the Excalidraw elements array to JSON, converts the JSON to a blob, and then calls a
+function called `fileSave()`. This function is likewise provided by the
+[browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) library.
+
+```js
+export const saveAsJSON = async (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) => {
+  const serialized = serializeAsJSON(elements, appState);
+  const blob = new Blob([serialized], {
+    type: 'application/vnd.excalidraw+json',
+  });
+  const fileHandle = await fileSave(
+    blob,
+    {
+      fileName: appState.name,
+      description: 'Excalidraw file',
+      extensions: ['.excalidraw'],
+    },
+    appState.fileHandle,
+  );
+  return { fileHandle };
+};
+```
+
+Again let me first look at the implementation for browsers with File System Access API support. The
+first couple of lines look a little involved, but all they do is negotiate the MIME types and file
+extensions. When I have saved before and already have a file handle, no save dialog needs to be
+shown. But if this is the first save, a file dialog gets displayed and the app gets a file handle
+back for future use. The rest is then just writing to the file, which happens through a
+[writable stream](/streams/).
+
+```js
+export default async (blob, options = {}, handle = null) => {
+  options.fileName = options.fileName || 'Untitled';
+  const accept = {};
+  // Not shown: deal with extensions and MIME types.
+  handle =
+    handle ||
+    (await window.showSaveFilePicker({
+      suggestedName: options.fileName,
+      types: [
+        {
+          description: options.description || '',
+          accept: accept,
+        },
+      ],
+    }));
+  const writable = await handle.createWritable();
+  await writable.write(blob);
+  await writable.close();
+  return handle;
+};
+```
+
+#### The "save as" feature
+
+If I decide to ignore an already existing file handle, I can implement a "save as" feature to create
+a new file based on an existing file. To show this, let me open an existing file, make some
+modification, and then not overwrite the existing file, but create a new file by using the save-as
+feature. This leaves the original file intact.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/oTNuosQmoMBP2G7XR8Wb.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+The implementation for browsers that don't support the File System Access API is short, since all it
+does is create an anchor element with a `download` attribute whose value is the desired filename and
+a blob URL as its `href` attribute value.
+
+```js
+export default async (blob, options = {}) => {
+  const a = document.createElement('a');
+  a.download = options.fileName || 'Untitled';
+  a.href = URL.createObjectURL(blob);
+  a.addEventListener('click', () => {
+    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
+  });
+  a.click();
+};
+```
+
+The anchor element then gets clicked programmatically. To prevent memory leaks, the blob URL needs
+to be revoked after use. As this is just a download, no file save dialog gets shown ever, and all
+files land in the default `Downloads` folder.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/1oVPIESBNhoL4AhOSNli.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+## Drag and drop
+
+One of my favorite system integrations on desktop is drag and drop. In Excalidraw, when I drop an
+`.excalidraw` file onto the application, it opens right away and I can start editing. On browsers
+that support the File System Access API, I can then even immediately save my changes. No need to go
+through a file save dialog since the required file handle has been obtained from the drag and drop
+operation.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/aOPKhOOe20od8uOzehdy.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+The secret for making this happen is by calling `getAsFileSystemHandle()` on the
+[data transfer](/datatransfer/) item when the File System Access API is supported. I then pass this
+file handle to `loadFromBlob()`, which you may remember from a couple paragraphs above. So many
+things you can do with files: opening, saving, over-saving, dragging, dropping. My colleague Pete
+and I have documented all these tricks and more in [our article](/file-system-access/) so you can
+catch up in case all this went a little too fast.
+
+```js
+const file = event.dataTransfer?.files[0];
+if (file?.type === 'application/json' || file?.name.endsWith('.excalidraw')) {
+  this.setState({ isLoading: true });
+  // Provided by browser-fs-access.
+  if (supported) {
+    try {
+      const item = event.dataTransfer.items[0];
+      file as any.handle = await item as any
+        .getAsFileSystemHandle();
+    } catch (error) {
+      console.warn(error.name, error.message);
+    }
+  }
+  loadFromBlob(file, this.state).then(({ elements, appState }) =>
+    // Load from blob
+  ).catch((error) => {
+    this.setState({ isLoading: false, errorMessage: error.message });
+  });
+}
+```
+
+## Sharing files
+
+Another system integration currently on Android, ChromeOS, and Windows is through the
+[Web Share Target API](/web-share-target/). Here I am in the Files app in my `Downloads` folder. I
+can see two files, one of them with the non-descript name `untitled` and a timestamp. To check what
+it contains, I click on the three dots, then share, and one of the options that appears is
+Excalidraw. When I tap the icon, I can then see that the file just contains the I/O logo again.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/x93JgKGcp1o8at5P7exv.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+## Lipis on the deprecated Electron version
+
+One thing you can do with files that I haven't talked about yet is doubleclick them. What typically
+happens when you doubleclick a file is that the app that's associated with the file's MIME type
+opens. For example for `.docx` this would be Microsoft Word.
+
+Excalidraw [used to have an Electron version](/deprecating-excalidraw-electron/) of the app that
+supported such file type associations, so when you double-clicked an `.excalidraw` file, the
+Excalidraw Electron app would open. Lipis, whom you have already met before, was both the creator
+and the deprecator of Excalidraw Electron. I asked him why he felt it was possible to deprecate the
+Electron version:
+
+> People have been asking for an Electron app since the beginning, mainly because they wanted to
+> open files by double-clicking. We also intended to put the app in app stores. In parallel, someone
+> suggested creating a PWA instead, so we just did both. Luckily we were introduced to Project Fugu
+> APIs like file system access, clipboard access, file handling, and more. With a sole click you can
+> install the app on your desktop or mobile, without the extra weight of Electron. It was an easy
+> decision to deprecate the Electron version, concentrate just on the web app, and make it the
+> best-possible PWA. On top, we're now able to publish PWAs to the Play Store and the Microsoft
+> Store! That's huge!
+
+One could say Excalidraw for Electron was not deprecated because Electron is bad, not at all, but
+because the web has become good enough. I like this!
+
+## File handling
+
+When I say "the web has become good enough", it's because of features like the upcoming File
+Handling.
+
+This is a regular macOS Big Sur installation. Now check out what happens when I right-click an
+Excalidraw file. I can choose to open it with Excalidraw, the installed PWA. Of course
+double-clicking would work, too, it's just less dramatic to demonstrate in a screencast.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/Gz1w0Gey1XerN86sIF01.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+So how does this work? The first step is to make the file types my application can handle known to
+the operating system. I do this in a new field called `file_handlers` in the web app manifest. Its
+value is an array of objects with an action and an `accept` property. The action determines the URL
+path the operating system launches your app at and the accept object are key value pairs of MIME
+types and the associated file extensions.
+
+```json
+{
+  "name": "Excalidraw",
+  "description": "Excalidraw is a whiteboard tool...",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "file_handlers": [
+    {
+      "action": "/",
+      "accept": {
+        "application/vnd.excalidraw+json": [".excalidraw"]
+      }
+    }
+  ]
+}
+```
+
+The next step is to handle the file when the application launches. This happens in the `launchQueue`
+interface where I need to set a consumer by calling, well, `setConsumer()`. The parameter to this
+function is an asynchronous function that receives the `launchParams`. This `launchParams` object
+has a field called files that gets me an array of file handles to work with. I only care for the
+first one and from this file handle I get a blob that I then pass to our old friend
+`loadFromBlob()`.
+
+```js
+if ('launchQueue' in window && 'LaunchParams' in window) {
+  window as any.launchQueue
+    .setConsumer(async (launchParams: { files: any[] }) => {
+      if (!launchParams.files.length) return;
+      const fileHandle = launchParams.files[0];
+      const blob: Blob = await fileHandle.getFile();
+      blob.handle = fileHandle;
+      loadFromBlob(blob, this.state).then(({ elements, appState }) =>
+        // Initialize app state.
+      ).catch((error) => {
+        this.setState({ isLoading: false, errorMessage: error.message });
+      });
+    });
+}
+```
+
+Again, if this went too fast, you can read more about the File Handling API in
+[my article](/file-handling/). You can enable file handling by setting the experimental web platform
+features flag. It's scheduled to land in Chrome later this year.
+
+## Clipboard integration
+
+Another cool feature of Excalidraw is the clipboard integration. I can copy my entire drawing or
+just parts of it into the clipboard, maybe adding a watermark if I feel like, and then paste it into
+another app. This is a web version of the Windows 95 Paint app by the way.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/EHHQS78y6RJf21J1wD7y.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+The way this works is surprisingly simple. All I need is the canvas as a blob, which I then write
+onto the clipboard by passing a one-element array with a `ClipboardItem` with the blob to the
+`navigator.clipboard.write()` function. For more information on what you can do with the clipboard
+API, See Jason's and [my article](/async-clipboard/).
+
+```js
+export const copyCanvasToClipboardAsPng = async (canvas: HTMLCanvasElement) => {
+  const blob = await canvasToBlob(canvas);
+  await navigator.clipboard.write([
+    new window.ClipboardItem({
+      'image/png': blob,
+    }),
+  ]);
+};
+
+export const canvasToBlob = async (canvas: HTMLCanvasElement): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    try {
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          return reject(new CanvasError(t('canvasError.canvasTooBig'), 'CANVAS_POSSIBLY_TOO_BIG'));
+        }
+        resolve(blob);
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+```
+
+## Collaborating with others
+
+### Sharing a session URL
+
+Did you know that Excalidraw also has a collaborative mode? Different people can work together on
+the same document. To start a new session, I click on the live collaboration button and then start a
+session. I can share the session URL with my collaborators easily thanks to the
+[Web Share API](/web-share/) that Excalidraw has integrated.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/7tbl5j0jrVZd3ffxhpoX.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+### Live collaboration
+
+I have simulated a collaboration session locally by working on the Google I/O logo on my Pixelbook,
+my Pixel 3a phone, and my iPad Pro. You can see that changes I make on one device are reflected on
+all other devices.
+
+I can even see all cursors move around. The Pixelbook's cursor moves steadily, since it's controlled
+by a trackpad, but the Pixel 3a phone's cursor and the iPad Pro's tablet cursor jump around, since I
+control these devices by tapping with my finger.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/7muh13F0CjvKBntVrUTp.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+### Seeing collaborator statuses
+
+To improve the realtime collaboration experience, there is even an idle detection system running.
+The cursor of the iPad Pro shows a green dot when I use it. The dot turns black when I switch to a
+different browser tab or app. And when I'm in the Excalidraw app, but just not doing anything, the
+cursor shows me as idle, symbolized by the three zZZs.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/Y7vEI1qHTDJpHNdXjteS.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+Avid readers of our publications might be inclined to think that idle detection is realized through
+the [Idle Detection API](/idle-detection/), an early stage proposal that's been worked on in the
+context of Project Fugu. Spoiler alert: it's not. While we had an implementation based on this API
+in Excalidraw, in the end, we decided to go for a more traditional approach based on measuring
+pointer movement and page visibility.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/SudM7tqa3ZooUJYx7aBB.png", alt="Screenshot of the Idle Detection feedback filed on the WICG Idle Detection repo.", width="800", height="685" %}
+
+We filed [feedback](https://github.com/WICG/idle-detection/issues/36) on why the Idle Detection API
+wasn't solving the use case we had. All Project Fugu APIs are being developed in the open, so
+everyone can chime in and have their voice heard!
+
+## Lipis on what is holding back Excalidraw
+
+Talking of which, I asked lipis one last question regarding what he thinks is missing from the web
+platform that holds back Excalidraw:
+
+> The File System Access API is great, but you know what? Most files that I care about these days
+> live in my Dropbox or Google Drive, not on my hard disk. I wish the File System Access API would
+> include an abstraction layer for remote file systems providers like Dropbox or Google to integrate
+> with and that developers could code against. Users could then relax and know their files are safe
+> with the cloud provider they trust.
+
+I fully agree with lipis, I live in the cloud, too. Here's hoping that this will be implemented
+soon.
+
+## Tabbed application mode
+
+Wow! We have seen a lot of really great API integrations in Excalidraw.
+[File system](/file-system-access/), [file handling](/file-handling/),
+[clipboard](\async-clipboard/), [web share](\web-share/), and
+[web share target](/web-share-target/). But here is one more thing. Up until now, I could only ever
+edit one document at a given time. Not anymore. Please enjoy for the first time an early version of
+tabbed application mode in Excalidraw. This is how it looks.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/h8zrwaB8jBXVnQuxglpS.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+
+I have an existing file open in the installed Excalidraw PWA that's running in standalone mode. Now
+I open a new tab in the standalone window. This is not a regular browser tab, but a PWA tab. In this
+new tab I can then open a secondary file, and work on them independently from the same app window.
+
+Tabbed application mode is in its early stages and not everything is set in stone. If you're
+interested, be sure to read up on the current status of this feature in
+[my article](/tabbed-application-mode/).
+
+## Closing
+
+To stay in the loop on this and other features, be sure to watch our
+[Fugu API tracker](https://fugu-tracker.web.app/). We're super excited to push the web forward and
+allow you to do more on the platform. Here's to an ever improving Excalidraw, and here's to all the
+amazing applications that you will build. Go start creating at
+[excalidraw.com](https://excalidraw.com/).
+
+I can't wait to see some of the APIs that I have shown today pop up in your apps. My name is Tom,
+you can find me as [@tomayac](https://twitter.com/tomayac) on Twitter and the internet in general.
+Thank you very much for watching, and enjoy the rest of Google I/O.
diff --git a/src/site/content/en/blog/extra/index.md b/src/site/content/en/blog/extra/index.md
new file mode 100644
index 00000000000..70e25407fc9
--- /dev/null
+++ b/src/site/content/en/blog/extra/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: eXtra Electronics
+date: 2016-05-16
+updated: 2016-05-16
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZHSG0xBO6pjC1TJeuWeY.gif", alt="eXtra detail.", width="582", height="1000" %}
+</figure>
+
+United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications
+
+## Results
+
+- 12% click-through rate
+- 100% more sales from users arriving via web push
+- 4x increase in re-engagement
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/8ZcMd9ZdZEpPjpysgohv.pdf)
+
+## About COMPANY
+
+eXtra is Saudi Arabia’s leading and fastest-growing consumer electronics
+and home appliance retailer. They serve over 12 million shoppers at 40+
+stores across Saudi Arabia, Oman, and Bahrain.
+
+## Challenge
+
+Saudi Arabia is one of the largest smartphone markets in the world. With over
+2.5 million shoppers discovering, researching, and purchasing via eXtra.com every
+month, eXtra’s 100% year-on-year mobile growth is driven by the mobile web.
+Until 2016, the company depended primarily on targeted emails to re-engage with
+mobile web users, which required customers to sign up and register. Re-engaging
+with their mobile web shoppers became a constant area of focus.
+
+## Solution
+
+eXtra worked with Mobify, their mobile shopping platform partner, to implement
+Push Notifications for Android web users visiting their mobile website. These
+Push Notifications sent via the mobile web look and feel exactly like native app
+notifications, and work even if the browser isn’t currently running on a device.
+
+eXtra saw an incredible, instant customer reaction. Within six weeks, they noticed
+that those who had opted into receiving Push Notifications were returning
+4X more often and spending twice as much time on the site. eXtra’s new web
+Push Notifications provided a 12% click-through rate, which worked perfectly for
+sales alerts. The return on investment was substantial and eXtra saw a 100%
+increase in sales from those arriving via web push. Web Push Notifications now
+exceed email as eXtra.com’s best-performing retention-marketing channel.
+
+Plus, the notifications provide eXtra with another touchpoint to interact with
+shoppers. Imagine tapping into a highly engaged and commercially valuable
+audience instantly, with just a few simple enhancements. “Push Notifications
+are a huge part of our mobile engagement strategy,” says Mujeeb Hazzaa, chief
+business development officer. “It’s a more personal way to communicate with our
+customers. That’s incredibly valuable to our bottom line.”
diff --git a/src/site/content/en/blog/farewell-html5rocks/index.md b/src/site/content/en/blog/farewell-html5rocks/index.md
new file mode 100644
index 00000000000..30d047e9360
--- /dev/null
+++ b/src/site/content/en/blog/farewell-html5rocks/index.md
@@ -0,0 +1,65 @@
+---
+title: Farewell to HTML5Rocks
+subhead: >
+  So long HTML5Rocks, it's been nice knowing you.
+date: 2022-06-29
+hero: image/rq1kLlxRBubsZSyX0gs2nghLSZc2/Mf8f01NYUBJBs9AwrJYe.jpg
+alt: A picture of rocks.
+authors: 
+  - paulkinlan
+description: >
+    So long HTML5Rocks, it's been nice knowing you.
+tags:
+  - blog
+---
+
+After 10 years and 100 million pageviews this 
+[commit](https://github.com/html5rocks/www.html5rocks.com/pull/1548) completes 
+our transition of content of HTML5Rocks to homes that are maintained on 
+[developer.chrome.com](https://developer.chrome.com/) and 
+[web.dev](/). It feels like a bit of an end of an era.
+
+I was around for the founding of HTML5Rocks. We had so much fun building the 
+serving infrastructure (several times) and creating a lot of the content—from 
+walkthroughs of WebSQL and AppCache, the first introductions to new APIs such as 
+IndexedDB, and explainers for How the Browser works.
+
+Our most popular article was about CORS (Cross Origin Resource Sharing), 
+followed by dragging and dropping files, and then one of the first introductions 
+to getUserMedia and WebRTC. Contrasting the popularity of core "simple" tasks 
+against the new and shiny capabilities is something that impacts developers 
+today just as much as it did in 2012.
+
+One thing I will miss the most is the community that developed around the site. 
+HTML5Rocks was the first public site I helped to create that managed to build a 
+huge community around it. It was one of the quickest ways to get feedback from 
+developers that could be fed right back into the browser engineering teams. 
+However, over the last couple of years as our priorities changed, "HTML5" became 
+"HTML", and we slowly stopped creating new content and engaging with the 
+community on the site. As the founders of our team moved on, I was left as the 
+only person who could deploy the site and so I felt it was time to ensure that 
+we had a permanent home that has a dedicated team supporting both the content 
+and the infrastructure.
+
+With this transition it was important for us to maintain the content (it's still 
+valuable), but more importantly maintain the in-bound links. People found our 
+content interesting enough for them to share with their audiences, so I'd like 
+to maintain that trust given to us and ensure that all the links will still 
+resolve to the content. If you do see an issue with any of the content, reach out
+to us and file an issue on 
+[web.dev](https://github.com/googlechrome/web.dev/issues) or 
+[developer.chrome.com](https://github.com/googlechrome/developer.chrome.com/issues) 
+issue trackers.
+
+Thank you to everyone who wrote content for the site, for the people who 
+translated the content so that it could be read everywhere, and all the readers 
+and commenters who made the site the place to go and learn about what's new on 
+the web.
+
+I'm off to register HTMLLivingStandardRocks.com…
+
+♥️ Paul
+
+--- 
+Photo by [Oliver Paaske](https://unsplash.com/@photolli?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 
+on [Unsplash](https://unsplash.com/s/photos/rocks?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/en/blog/farfetch/index.md b/src/site/content/en/blog/farfetch/index.md
new file mode 100644
index 00000000000..a25974bf1e2
--- /dev/null
+++ b/src/site/content/en/blog/farfetch/index.md
@@ -0,0 +1,137 @@
+---
+layout: post
+title: Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals
+subhead: |
+  How the e-commerce fashion retailer correlated Core Web Vitals and performance metrics with business metrics, saw an increase in KPIs and built a "Performance Business Case Calculator" to drive product decisions and a performance culture.
+description: |
+  How luxury retailer Farfetch's investment in improving Core Web Vitals led to better business outcomes.
+hero: image/OcYv93SYnIg1kfTihK6xqRDebvB2/h3mza3j8moM7N9lGGg15.png
+alt: An image of a phone displaying a Farfetch web page.
+authors:
+  - ruisantos
+  - manuelgarcia
+  - patriciacoutoneto
+  - msdikla
+date: 2022-07-12
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+Inside many companies, website speed performance and Core Web Vitals are still mostly seen as the responsibility of the engineering teams. Site speed can become invisible to other areas of the business if the business and customer experience worth is not understood. This can cause performance to be overlooked when key decisions are made and roadmaps are defined.
+
+To improve the performance culture across teams and drive significant improvements to their web experience, luxury e-commerce fashion retailer Farfetch launched a project to define and use true customer-centric performance metrics. They aimed to correlate these to business metrics as a way of illuminating how performance affects the company's KPIs.
+
+Their ambitions didn't end there, though. Ultimately, the project's objective was cultural change at scale&mdash;breaking down silos within the organization and introducing a new business-oriented language to give everyone a shared way to talk about what used to be considered technical topics. Farfetch wanted to have website speed performance as a shared responsibility, facilitate informed decision making and establish it as a main pillar of what makes a good web experience.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pRj3pK9qy1w3HRDNtcSE.png", alt="A diagram contrasting speed as a developer's responsibility versus speed as a shared responsibility. In the former case, each phase is siloed, whereas in the latter, each phase occurs within the same silo.", width="800", height="477" %}
+</figure>
+
+To kick off, Farfetch realized a single department couldn't achieve this as before and assembled a core team of experts from various areas in the company&mdash;engineering, infrastructure, architecture, and product&mdash;that put in place a step-by-step strategy to revamp how the company looked at this topic.
+
+## Step 1: Defining, measuring and monitoring metrics
+
+First of all, Farfetch needed to have the right monitoring tools in place to understand current state and deviations across journey touchpoints and applications. 
+
+They used both lab data and real user monitoring (field data) to track Core Web Vitals and additional [user-centric performance metrics](/user-centric-performance-metrics/) to analyze the current state of speed performance. They used JavaScript and the [`web-vitals.js` library](https://github.com/GoogleChrome/web-vitals) to capture the data, which allowed the product analytics team to gain visibility of performance metrics alongside business metrics in the same session and thereby start examining how one affects the other.
+
+The multidisciplinary group set out to understand which metrics mattered most for the business. To do so, they looked at the critical journey path of Farfetch users and tried to link that journey with performance markers. In addition to the Core Web Vitals metrics that Google has outlined, each representing a distinct facet of the user experience, they also used custom JavaScript to track [Time to First Byte (TTFB)](/ttfb/), [First Contentful Paint (FCP)](/fcp/), First Paint and [Time to Interactive (TTI)](/tti/).
+
+The metrics are collected using several methods of the [Performance API](https://developer.mozilla.org/docs/Web/API/Performance), [Long Tasks API](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API) and Google's polyfills. More details can be found in [this mid 2020 Farfetch Tech Blog post](https://www.farfetchtechblog.com/en/blog/post/one-less-second-for-the-page-one-giant-leap-for-the-business/) by Manuel Garcia, Senior Principal Engineer for the Web.
+
+On the data analytics side, Farfetch have their own multi-channel tracking solution used by front end applications called Omnitracking. It tracks the events generated by page views, user actions and system actions. The Omnitracking Data Model is Farfetch's solution for analytical, data exploration and reporting cases, made on the top of the events generated by trackers. The data model's objective is to help and support anyone who needs to understand:
+
+- User behavior
+- User experience on Farfetch applications
+- Applications usage
+- Macro and micro conversions
+- Cross channel and funnel analysis
+
+The idea was then to add the performance data of each pageview on farfetch.com, captured by JavaScript, to this data layer. Following this model guaranteed a match between performance data and the main conversion funnel metrics for each session and the base for an analytical exploration on the topic.
+
+Finally, Farfetch established time-based [performance budgets](/performance-budgets-101/) for each metric across the main journey pages and a governance process to handle budget breaches. They've also started incorporating performance metrics on CI pipelines to understand budget deviations as soon as possible in the development flow.
+
+## Step 2: Communicating via business language
+
+With performance data now available in Farfetch's internal business intelligence datasets, the analytics team started exploring mathematical models and patterns in the data that could indicate a correlation between performance metrics and business KPIs (for example, conversion rate and percentage of single-page visits), allowing a new view of the financial impact of site speed and UX for the business. This enabled performance to be discussed in a common language with the business decision makers. The analysis included all Core Web Vitals and the other metrics Farfetch deemed valuable. It revealed truly impactful insights.
+
+Having in mind that Google recommends [Largest Contentful Paint (LCP)](/lcp/) to stay below 2.5 seconds to provide an optimal user experience, Farfetch studied this threshold carefully and found meaningful results.
+
+Farfetch statistical correlation analysis showed that beyond that point, the conversion rate starts to drop, as well as the exit rate rises. This shows that users really start to feel the downside of a slow page load perception and conversion rate decreases on average -1.3% with each 100ms more of LCP.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bdmOd1MUc6Wt4EUFRzUG.png", alt="A graph of LCP, where the Y-axis is conversion rate and percentage of page visits and the X-axis is LCP time. As LCP is faster, percentage of single page visits decreases, and conversion rate increases.", width="800", height="386" %}
+</figure>
+
+Farfetch also verified an exit rate decrease of -3.1% for each 0.01 less on the [Cumulative Layout Shift (CLS)](/cls/) score, reaffirming the impact of page stability to keep users on a website.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ijjXV4FFD5lyBYVFEBH2.png", alt="A graph of CLS, where the Y-axis is conversion rate and percentage of page visits, and the X-axis is the CLS score. The lowest CLS scores show the highest percentage of single page visits, whereas conversions raise at lower CLS scores.", width="800", height="357" %}
+</figure>
+
+Regarding page interactivity and fluidity, although [First Input Delay (FID)](/fid/) is tracked and analyzed continuously, Farfetch also measures TTI, which proved to be a considerably impactful metric for the Farfetch business conversion funnel. 
+
+For this, they injected [Google's TTI polyfill](https://github.com/GoogleChromeLabs/tti-polyfill) into the website to store this metric. Using the Long Tasks API to report long tasks (tasks taking longer than 50 milliseconds on the browser's main thread).
+
+{% Aside 'caution' %}
+It's no longer recommended to measure TTI in the field, as user interaction can affect your page's TTI in ways that lead to variance in your reports!
+{% endAside %}
+
+The analytics team was then able to find that the conversion rate increased 2.8% for each second reduction on TTI, making a strong case for better code efficiency and unclogging the browser's main thread.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/p9tLq7SN6rGmJpvnoaoT.png", alt="A graph of TTI, where the Y-axis is conversion rate and percentage of single page visits, and the X-axis is TTI time. As the TTI time goes up, conversion rate decreases and percentage of single page visits increases.", width="800", height="381" %}
+</figure>
+
+In the end, this analysis was also able to show that some metrics didn't have a significant impact on business KPIs, or some would be more relevant at different stages of the user journey. This allowed for a complete understanding of the opportunities at hand on each point of the conversion funnel.
+
+## Step 3: Embedding cultural change 
+
+Showcasing the insights above alongside qualitative user research on user perception of site speed was paramount to establish alignment with company goals, secure executive-level awareness and buy-in for performance based decision making across product roadmaps. It was now possible to prove how much performance was worth for Farfetch.
+
+To streamline prioritization, Farfetch created a self-service tool they named the Site Speed Business Case Calculator, taking inspiration from [Google's Speed Impact Calculator](https://www.thinkwithgoogle.com/feature/testmysite/). It allows any product manager to create a business case out of performance improvements by calculating the business impact on the fly. With a data model using the correlation between conversion rate and user experience metrics, it's flexible to adapt to different product scopes, devices and user journey touch points.
+
+<figure>
+  {% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/23elcWwZJW50ZSB9s5CB.png", alt="A screenshot of Farfetch's Site Speed Business Case Calculator.", width="800", height="779" %}
+</figure>
+
+Meanwhile, a set of self-service analytical dashboards have created business-wide visibility of real-time performance indicators and their impact on the business. Performance is now becoming fully embedded in product development, and product teams enjoy easy access to metrics, auditing tools, and performance budget monitoring. Furthermore, because of the data layer integration, performance metrics are also available on Farfetch A/B testing tooling, giving product managers yet another powerful vector of insights.
+
+In recent months, the core team is also on track to establish this culture not only on front-end development teams but also within the platform domain, using similar methodologies to monitor and prove the impact of the main micro services and transactions.
+
+There have been a number of [Farfetch driven presentations](https://www.youtube.com/watch?v=GD3tUD0Vm88) on this topic but also external mentions. For example, a mention on [a 2021 Google I/O talk on the business impact of Core Web Vitals](https://www.youtube.com/watch?v=nPmAE0YjGK0). This also contributed to giving continuous relevance to the theme and solidified the team's strategy on culture.
+
+## Step 4: Improving metrics
+
+In the end, all of this work needed to contribute to Farfetch objectively improving their website speed metrics, and guaranteeing that their teams would follow best in class practices and pursue enhancement opportunities.
+
+One of the main opportunities detected in 2021 was the need to improve LCP on the two main page types of Farfetch&mdash;product pages and product listing pages.
+
+The teams addressed how they were loading the main content of those pages. Armed with a business case that showed the impact of chasing this opportunity, they were able to:
+
+- Adapt the product image loading component from a JavaScript-based solution to a native implementation.
+- Define the priority of the images and divide them into critical and non-critical assets.
+- Load critical images early, with the source already inline in the HTML and using `<link rel="preload">` so they download as soon as possible.
+- Use the `<img loading="lazy">` attribute for non-critical images, with a polyfill using Intersection Observer on unsupported browsers, such as Safari.
+
+With this, they were able to move the needle and prove through A/B testing the hypothesis and business impact. On product pages for example, this effort shaved off more than 600ms, and the A/B test showed an uplift on conversion rate in the range of 1-5% with the company's defined confidence level.
+
+Below are the improvements the team were able to make in terms of the percentage of pageviews that are considered "good", "needs improvement" and "poor", based on [Google's definition for LCP score](/lcp/#what-is-a-good-lcp-score).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/4qkZjdGJDHNlQbKJtmkJ.png", alt="A stacked bar graph of median LCP across Core Web Vitals thresholds for Farfetch listing pages. Pages at the 'good' threshold increased from 37% to 53%.", width="800", height="494" %}
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/hUjnQ4CNtyEhHBUFeuEa.png", alt="A stacked bar graph of median LCP across Core Web Vitals thresholds for Farfetch listing pages. Pages at the 'good' threshold increased from 36% to 48%.", width="800", height="494" %}
+</figure>
+
+## The rewards of a faster site and better working practices
+
+Building a culture around performance and tools like the business case calculator allowed everyone to begin speaking a shared language that can be understood by product managers, stakeholders, and engineers alike. This has precipitated ongoing discussions around how to prioritize new initiatives and performance enhancements. 
+
+"We wanted to break the cycle of performance being a tech-only concern, something owned only by the engineering team to deal with and fix," explains Farfetch's Web Channels Senior Principal Product Manager, Rui Santos. "Connecting performance metrics with business metrics was surprisingly effective to pass the message across very, very quickly. Business drives the company, and connecting its success to speed metrics encouraged a broader set of stakeholders to understand and navigate the trade-off decisions."
+
+In the luxury e-commerce segment, whether your site is fast or slow can dictate how consumers see your brand and your service quality as a whole. For users, quality equates to luxury&mdash;and this applies to every aspect of their experience, including how your website performs. With site speed producing a proven effect on conversion rate, performance now occupies a safe position in forward planning at Farfetch. 
diff --git a/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-impressions-change.svg b/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-impressions-change.svg
deleted file mode 100644
index b1aace00df4..00000000000
--- a/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-impressions-change.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" style="" viewBox="0 0 800 600"><rect x="0" y="0" width="800" height="600" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-6e05cc"><g class="clips"><clipPath id="clip6e05ccxyplot" class="plotclip"><rect width="601" height="420"/></clipPath><clipPath class="axesclip" id="clip6e05ccx"><rect x="80" y="0" width="601" height="600"/></clipPath><clipPath class="axesclip" id="clip6e05ccy"><rect x="0" y="100" width="800" height="420"/></clipPath><clipPath class="axesclip" id="clip6e05ccxy"><rect x="80" y="100" width="601" height="420"/></clipPath></g><g class="gradients"/></defs><g class="bglayer"/><g class="layer-below"><g class="imagelayer"/><g class="shapelayer"/></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"/><g class="imagelayer"/></g><g class="gridlayer"><g class="x"><path class="xgrid crisp" transform="translate(113.8,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(194.69,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(275.57,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(356.46,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(437.34,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(599.11,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g><g class="y"><path class="ygrid crisp" transform="translate(0,489.16)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,418.84)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,348.52)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,278.2)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,137.57)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g></g><g class="zerolinelayer"><path class="xzl zl crisp" transform="translate(518.23,0)" d="M0,100v420" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/><path class="yzl zl crisp" transform="translate(0,207.88)" d="M80,0h601" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/></g><path class="xlines-below"/><path class="ylines-below"/><g class="overlines-below"/><g class="xaxislayer-below"/><g class="yaxislayer-below"/><g class="overaxes-below"/><g class="plot" transform="translate(80, 100)" clip-path="url('#clip6e05ccxyplot')"><g class="scatterlayer mlayer"><g class="trace scatter trace6def53" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"><g class="errorbar"><path class="yerror" d="M393.79,134.6h8m-4,0V165.54m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M353.34,144.45h8m-4,0V192.27m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M312.9,154.29h8m-4,0V207.73m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M272.46,195.08h8m-4,0V248.52m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M232.01,244.3h8m-4,0V292.12m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M191.57,265.4h8m-4,0V307.59m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M151.13,285.08h8m-4,0V338.53m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M110.69,327.28h8m-4,0V375.09m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M70.24,327.28h8m-4,0V375.09m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M29.799999999999997,354h8m-4,0V399m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g></g><g class="lines"><path class="js-line" d="M397.79,150.07L357.34,168.36L316.9,181.01L276.46,221.8L236.01,268.21L195.57,286.49L155.13,311.81L114.69,351.18L74.24,351.18L33.8,376.5" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"><path class="point" transform="translate(397.79,150.07)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(357.34,168.36)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(316.9,181.01)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(276.46,221.8)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(236.01,268.21)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(195.57,286.49)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(155.13,311.81)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(114.69,351.18)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(74.24,351.18)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(33.8,376.5)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="text"/></g><g class="trace scatter traceaeb2ca" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"><g class="errorbar"><path class="yerror" d="M393.79,106.48h8m-4,0V134.6m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M353.34,133.2h8m-4,0V155.7m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M312.9,143.04h8m-4,0V176.8m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M272.46,168.36h8m-4,0V185.23m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M232.01,172.58h8m-4,0V197.89m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M191.57,196.48h8m-4,0V218.99m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M151.13,195.08h8m-4,0V226.02m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M110.69,217.58h8m-4,0V245.71m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M70.24,245.71h8m-4,0V265.4m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M29.799999999999997,252.74h8m-4,0V275.24m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g></g><g class="lines"><path class="js-line" d="M397.79,120.54L357.34,144.45L316.9,159.92L276.46,176.8L236.01,185.23L195.57,207.73L155.13,210.55L114.69,231.64L74.24,255.55L33.8,263.99" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"><path class="point" transform="translate(397.79,120.54)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(357.34,144.45)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(316.9,159.92)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(276.46,176.8)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(236.01,185.23)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(195.57,207.73)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(155.13,210.55)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(114.69,231.64)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(74.24,255.55)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(33.8,263.99)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/></g><g class="text"/></g></g></g><g class="overplot"/><path class="xlines-above crisp" d="M0,0" style="fill: none;"/><path class="ylines-above crisp" d="M0,0" style="fill: none;"/><g class="overlines-above"/><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(113.8,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−1</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(194.69,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.8</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(275.57,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.6</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(356.46,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.4</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(437.34,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(518.23,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(599.11,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(680,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.4</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,489.16)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−2</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,418.84)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−1.5</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,348.52)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−1</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,278.2)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.5</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,207.88)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,137.57)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.5</text></g></g><g class="overaxes-above"/></g></g><g class="polarlayer"/><g class="ternarylayer"/><g class="geolayer"/><g class="funnelarealayer"/><g class="pielayer"/><g class="treemaplayer"/><g class="sunburstlayer"/><g class="glimages"/><defs id="topdefs-6e05cc"><g class="clips"/><clipPath id="legend6e05cc"><rect width="95" height="48" x="0" y="0"/></clipPath></defs><g class="layer-above"><g class="imagelayer"/><g class="shapelayer"><path data-index="0" fill-rule="evenodd" d="M477.79,250.07L680,158.66" clip-path="url('#clip6e05ccxy')" style="opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-dasharray: 3px, 3px; stroke-width: 2px;"/><path data-index="1" fill-rule="evenodd" d="M477.79,220.54000000000002L680,101" clip-path="url('#clip6e05ccxy')" style="opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-dasharray: 3px, 3px; stroke-width: 2px;"/></g></g><g class="infolayer"><g class="legend" pointer-events="all" transform="translate(693.02, 100)"><rect class="bg" shape-rendering="crispEdges" width="95" height="48" x="0" y="0" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; fill: rgb(255, 255, 255); fill-opacity: 1; stroke-width: 0px;"/><g class="scrollbox" transform="translate(0, 0)" clip-path="url('#legend6e05cc')"><g class="groups"><g class="traces" transform="translate(0, 14.5)" style="opacity: 1;"><text class="legendtext user-select-none" text-anchor="start" x="40" y="4.680000000000001" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">Desktop</text><g class="layers" style="opacity: 1;"><g class="legendfill"/><g class="legendlines"><path class="js-line" d="M5,0h30" style="fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px;"/></g><g class="legendsymbols"><g class="legendpoints"><path class="scatterpts" transform="translate(20,0)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g></g></g><rect class="legendtoggle" pointer-events="all" x="0" y="-9.5" width="89.25" height="19" style="cursor: pointer; fill: rgb(0, 0, 0); fill-opacity: 0;"/></g><g class="traces" transform="translate(0, 33.5)" style="opacity: 1;"><text class="legendtext user-select-none" text-anchor="start" x="40" y="4.680000000000001" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">Mobile</text><g class="layers" style="opacity: 1;"><g class="legendfill"/><g class="legendlines"><path class="js-line" d="M5,0h30" style="fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 1; stroke-width: 2px;"/></g><g class="legendsymbols"><g class="legendpoints"><path class="scatterpts" transform="translate(20,0)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/></g></g></g><rect class="legendtoggle" pointer-events="all" x="0" y="-9.5" width="89.25" height="19" style="cursor: pointer; fill: rgb(0, 0, 0); fill-opacity: 0;"/></g></g></g><rect class="scrollbar" rx="20" ry="3" width="0" height="0" x="0" y="0" style="fill: rgb(128, 139, 164); fill-opacity: 1;"/></g><g class="g-gtitle"><text class="gtitle" x="400" y="50" text-anchor="middle" dy="0em" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;"><tspan class="line" dy="0em" x="400" y="50"><tspan style="font-weight:bold">Ad latency injected vs. impressions change</tspan></tspan><tspan class="line" dy="1.3em" x="400" y="50">(95% confidence interval error bars)</tspan></text></g><g class="g-xtitle"><text class="xtitle" x="380.5" y="572" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Ad latency injected (sec)</text></g><g class="g-ytitle"><text class="ytitle" transform="rotate(-90,42,310)" x="42" y="310" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Impressions change (%)</text></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-viewability-rate-change.svg b/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-viewability-rate-change.svg
deleted file mode 100644
index 2a97126f68e..00000000000
--- a/src/site/content/en/blog/fast-ads-matter/ad-latency-injected-vs-viewability-rate-change.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" style="" viewBox="0 0 800 600"><rect x="0" y="0" width="800" height="600" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-465192"><g class="clips"><clipPath id="clip465192xyplot" class="plotclip"><rect width="601" height="420"/></clipPath><clipPath class="axesclip" id="clip465192x"><rect x="80" y="0" width="601" height="600"/></clipPath><clipPath class="axesclip" id="clip465192y"><rect x="0" y="100" width="800" height="420"/></clipPath><clipPath class="axesclip" id="clip465192xy"><rect x="80" y="100" width="601" height="420"/></clipPath></g><g class="gradients"/></defs><g class="bglayer"/><g class="layer-below"><g class="imagelayer"/><g class="shapelayer"/></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"/><g class="imagelayer"/></g><g class="gridlayer"><g class="x"><path class="xgrid crisp" transform="translate(113.8,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(194.69,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(275.57,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(356.46,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(437.34,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="xgrid crisp" transform="translate(599.11,0)" d="M0,100v420" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g><g class="y"><path class="ygrid crisp" transform="translate(0,445.48)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,370.1)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,294.72)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" transform="translate(0,143.97)" d="M80,0h601" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g></g><g class="zerolinelayer"><path class="xzl zl crisp" transform="translate(518.23,0)" d="M0,100v420" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/><path class="yzl zl crisp" transform="translate(0,219.34)" d="M80,0h601" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/></g><path class="xlines-below"/><path class="ylines-below"/><g class="overlines-below"/><g class="xaxislayer-below"/><g class="yaxislayer-below"/><g class="overaxes-below"/><g class="plot" transform="translate(80, 100)" clip-path="url('#clip465192xyplot')"><g class="scatterlayer mlayer"><g class="trace scatter tracedbe790" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"><g class="errorbar"><path class="yerror" d="M393.79,132.16h8m-4,0V148.74m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M353.34,147.23h8m-4,0V165.33m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M312.9,174.37h8m-4,0V196.98m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M272.46,196.23h8m-4,0V212.81m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M232.01,209.05h8m-4,0V228.64m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M191.57,230.15h8m-4,0V252.77m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M151.13,249h8m-4,0V273.12m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M110.69,261.81h8m-4,0V290.45m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M70.24,297.99h8m-4,0V319.1m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M29.799999999999997,324.38h8m-4,0V350m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(31, 119, 180); stroke-opacity: 1;"/></g></g><g class="lines"><path class="js-line" d="M397.79,140.45L357.34,156.28L316.9,185.68L276.46,204.52L236.01,218.84L195.57,241.46L155.13,261.06L114.69,276.13L74.24,308.55L33.8,337.19" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"><path class="point" transform="translate(397.79,140.45)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(357.34,156.28)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(316.9,185.68)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(276.46,204.52)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(236.01,218.84)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(195.57,241.46)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(155.13,261.06)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(114.69,276.13)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(74.24,308.55)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/><path class="point" transform="translate(33.8,337.19)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g><g class="text"/></g><g class="trace scatter trace3b5ef6" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"/><g class="errorbars"><g class="errorbar"><path class="yerror" d="M393.79,138.94h8m-4,0V149.5m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M353.34,165.33h8m-4,0V180.4m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M312.9,194.72h8m-4,0V205.28m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M272.46,222.61h8m-4,0V231.66m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M232.01,246.73h8m-4,0V258.8m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M191.57,276.89h8m-4,0V285.93m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M151.13,304.02h8m-4,0V316.08m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M110.69,331.16h8m-4,0V343.22m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M70.24,361.31h8m-4,0V371.86m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g><g class="errorbar"><path class="yerror" d="M29.799999999999997,388.45h8m-4,0V399m-4,0h8" style="vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(255, 127, 14); stroke-opacity: 1;"/></g></g><g class="lines"><path class="js-line" d="M397.79,144.22L357.34,172.86L316.9,200L276.46,227.14L236.01,252.77L155.13,310.05L114.69,337.19L74.24,366.59L33.8,393.72" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"/></g><g class="points"><path class="point" transform="translate(397.79,144.22)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(357.34,172.86)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(316.9,200)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(276.46,227.14)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(236.01,252.77)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(195.57,281.41)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(155.13,310.05)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(114.69,337.19)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(74.24,366.59)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/><path class="point" transform="translate(33.8,393.72)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/></g><g class="text"/></g></g></g><g class="overplot"/><path class="xlines-above crisp" d="M0,0" style="fill: none;"/><path class="ylines-above crisp" d="M0,0" style="fill: none;"/><g class="overlines-above"/><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(113.8,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−1</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(194.69,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.8</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(275.57,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.6</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(356.46,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.4</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(437.34,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−0.2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(518.23,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(599.11,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="533" transform="translate(680,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0.4</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,445.48)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−3</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,370.1)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−2</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,294.72)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">−1</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,219.34)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">0</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" transform="translate(0,143.97)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1</text></g></g><g class="overaxes-above"/></g></g><g class="polarlayer"/><g class="ternarylayer"/><g class="geolayer"/><g class="funnelarealayer"/><g class="pielayer"/><g class="treemaplayer"/><g class="sunburstlayer"/><g class="glimages"/><defs id="topdefs-465192"><g class="clips"/><clipPath id="legend465192"><rect width="95" height="48" x="0" y="0"/></clipPath></defs><g class="layer-above"><g class="imagelayer"/><g class="shapelayer"><path data-index="0" fill-rule="evenodd" d="M477.79,240.45L680,161.3" clip-path="url('#clip465192xy')" style="opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-dasharray: 3px, 3px; stroke-width: 2px;"/><path data-index="1" fill-rule="evenodd" d="M477.79,244.22L680,101" clip-path="url('#clip465192xy')" style="opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-dasharray: 3px, 3px; stroke-width: 2px;"/></g></g><g class="infolayer"><g class="legend" pointer-events="all" transform="translate(693.02, 100)"><rect class="bg" shape-rendering="crispEdges" width="95" height="48" x="0" y="0" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; fill: rgb(255, 255, 255); fill-opacity: 1; stroke-width: 0px;"/><g class="scrollbox" transform="translate(0, 0)" clip-path="url('#legend465192')"><g class="groups"><g class="traces" transform="translate(0, 14.5)" style="opacity: 1;"><text class="legendtext user-select-none" text-anchor="start" x="40" y="4.680000000000001" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">Desktop</text><g class="layers" style="opacity: 1;"><g class="legendfill"/><g class="legendlines"><path class="js-line" d="M5,0h30" style="fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px;"/></g><g class="legendsymbols"><g class="legendpoints"><path class="scatterpts" transform="translate(20,0)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"/></g></g></g><rect class="legendtoggle" pointer-events="all" x="0" y="-9.5" width="89.25" height="19" style="cursor: pointer; fill: rgb(0, 0, 0); fill-opacity: 0;"/></g><g class="traces" transform="translate(0, 33.5)" style="opacity: 1;"><text class="legendtext user-select-none" text-anchor="start" x="40" y="4.680000000000001" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">Mobile</text><g class="layers" style="opacity: 1;"><g class="legendfill"/><g class="legendlines"><path class="js-line" d="M5,0h30" style="fill: none; stroke: rgb(255, 127, 14); stroke-opacity: 1; stroke-width: 2px;"/></g><g class="legendsymbols"><g class="legendpoints"><path class="scatterpts" transform="translate(20,0)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(255, 127, 14); fill-opacity: 1;"/></g></g></g><rect class="legendtoggle" pointer-events="all" x="0" y="-9.5" width="89.25" height="19" style="cursor: pointer; fill: rgb(0, 0, 0); fill-opacity: 0;"/></g></g></g><rect class="scrollbar" rx="20" ry="3" width="0" height="0" x="0" y="0" style="fill: rgb(128, 139, 164); fill-opacity: 1;"/></g><g class="g-gtitle"><text class="gtitle" x="400" y="50" text-anchor="middle" dy="0em" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;"><tspan class="line" dy="0em" x="400" y="50"><tspan style="font-weight:bold">Ad latency injected vs. viewability rate change</tspan></tspan><tspan class="line" dy="1.3em" x="400" y="50">(95% confidence interval error bars)</tspan></text></g><g class="g-xtitle"><text class="xtitle" x="380.5" y="572" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Ad latency injected (sec)</text></g><g class="g-ytitle"><text class="ytitle" transform="rotate(-90,42,310)" x="42" y="310" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 14px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;">Viewability rate change (%)</text></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/fast-ads-matter/desktop-leaderboard.svg b/src/site/content/en/blog/fast-ads-matter/desktop-leaderboard.svg
deleted file mode 100644
index 9681c20043f..00000000000
--- a/src/site/content/en/blog/fast-ads-matter/desktop-leaderboard.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:lucid="lucid" width="1040" height="120"><g transform="translate(0 0)" lucid:page-tab-id="0_0"><path d="M128 20c17.67 0 32 17.9 32 40s-14.33 40-32 40H32C14.33 100 0 82.1 0 60s14.33-40 32-40z" stroke="#000" stroke-opacity="0" fill="#83bbe5"/><use xlink:href="#a" transform="matrix(1,0,0,1,5,25) translate(32.980000000000004 41.24)"/><use xlink:href="#b" transform="matrix(1,0,0,1,5,25) translate(79.7 41.24)"/><path d="M220 8c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H228c-4.42 0-8-3.58-8-8z" stroke="#fff" fill="#0c7cba"/><use xlink:href="#c" transform="matrix(1,0,0,1,225,5) translate(41.21 37.720000000000006)"/><use xlink:href="#d" transform="matrix(1,0,0,1,225,5) translate(19.57 61.24000000000001)"/><use xlink:href="#e" transform="matrix(1,0,0,1,225,5) translate(42.11 84.76)"/><path d="M440 8c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H448c-4.42 0-8-3.58-8-8z" stroke="#fff" fill="#0c7cba"/><use xlink:href="#f" transform="matrix(1,0,0,1,445,5) translate(0.6899999999999977 61.24)"/><use xlink:href="#g" transform="matrix(1,0,0,1,445,5) translate(84.31 61.24)"/><use xlink:href="#h" transform="matrix(1,0,0,1,445,5) translate(136.65 61.24)"/><path d="M660 8c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H668c-4.42 0-8-3.58-8-8z" stroke="#fff" fill="#0c7cba"/><use xlink:href="#i" transform="matrix(1,0,0,1,665,5) translate(9.609999999999985 49.480000000000004)"/><use xlink:href="#j" transform="matrix(1,0,0,1,665,5) translate(75.72999999999999 49.480000000000004)"/><use xlink:href="#k" transform="matrix(1,0,0,1,665,5) translate(42.78 73)"/><use xlink:href="#l" transform="matrix(1,0,0,1,665,5) translate(95.12 73)"/><path d="M1008 20c17.67 0 32 17.9 32 40s-14.33 40-32 40h-96c-17.67 0-32-17.9-32-40s14.33-40 32-40z" stroke="#fff" fill="#83bbe5"/><use xlink:href="#m" transform="matrix(1,0,0,1,885,25) translate(28.96 41.24)"/><use xlink:href="#n" transform="matrix(1,0,0,1,885,25) translate(56.9 41.24)"/><path d="M160.5 60h42.62" stroke="#666" fill="none"/><path d="M160.5 60.5h-.53l.03-.5-.02-.5h.53z" fill="#666"/><path d="M217.88 60l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M381 60h42.12" stroke="#666" fill="none"/><path d="M381 60.5h-.5v-1h.5z" fill="#666"/><path d="M437.88 60l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M601 60h42.12" stroke="#666" fill="none"/><path d="M601 60.5h-.5v-1h.5z" fill="#666"/><path d="M657.88 60l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M821 60h42.12" stroke="#666" fill="none"/><path d="M821 60.5h-.5v-1h.5z" fill="#666"/><path d="M877.88 60l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><defs><path fill="#fff" d="M547-478c0 191-151 258-350 237V0H60v-693c55-11 127-17 193-17 172 0 294 58 294 232zm-144-2c0-106-104-123-206-107v227c108 15 206-7 206-120" id="o"/><path fill="#fff" d="M306-378c-38-49-172-17-221 4l-31-97c53-24 132-39 210-39 122 0 181 55 180 175-1 112-20 242 11 336H349l-21-69h-5c-28 41-74 78-147 76C81 5 23-45 23-138c0-142 140-164 291-160 5-37 4-65-8-80zM157-158c-3 37 24 59 62 59 49 0 79-27 96-55v-65c-71-4-153-3-158 61" id="p"/><path fill="#fff" d="M283-512c75-1 146 12 197 30V0c1 145-82 211-224 212-78 1-132-10-176-31l27-103c36 13 74 27 129 27 98 0 121-48 117-144h-4C326-8 284 8 225 8 81 8 33-84 33-240c-1-172 82-272 250-272zM167-245c0 83 22 149 93 149 55 0 75-25 90-68v-225c-21-9-46-13-77-13-80 0-107 63-106 157" id="q"/><path fill="#fff" d="M291-90c49 0 97-19 123-38l43 85c-40 32-117 57-191 57C103 14 34-89 33-250c-2-167 81-264 240-264 129 0 199 68 200 202 0 33-4 65-10 95H163c5 84 39 127 128 127zm61-208c5-67-19-112-81-112-71-1-98 47-105 112h186" id="r"/><g id="a"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#o"/><use transform="matrix(0.02,0,0,0.02,10.86,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,20.78,0)" xlink:href="#q"/><use transform="matrix(0.02,0,0,0.02,31.5,0)" xlink:href="#r"/></g><path fill="#fff" d="M178 14C100 13 61-20 61-100v-600h130v532c1 39 5 67 38 67 22 0 33-3 52-11l14 102c-24 12-77 25-117 24" id="s"/><path fill="#fff" d="M269 14C107 14 36-88 33-250c-2-161 81-264 236-264 162 0 233 102 235 264 2 161-80 264-235 264zm0-418c-78 0-104 61-102 154 1 82 21 154 102 154 80 0 101-62 101-154 0-83-21-154-101-154" id="t"/><path fill="#fff" d="M261-512c41 0 62 4 91 15v-203h130v524c0 66 0 116 10 177h-93l-18-65h-4c-25 45-77 80-146 78C90 11 33-84 33-242c0-161 72-270 228-270zm-94 274c0 76 22 141 94 142 54 0 79-28 91-72v-212c-20-15-39-23-75-22-89 3-110 60-110 164" id="u"/><g id="b"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#s"/><use transform="matrix(0.02,0,0,0.02,5.88,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,16.62,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,26.54,0)" xlink:href="#u"/></g><path fill="#fff" d="M376-109c57 1 96-12 130-32l28 112C494 1 420 14 351 14 136 14 41-127 38-350c-3-258 153-398 418-356 28 4 50 12 68 19l-27 116c-35-16-76-21-131-21-127 0-187 96-184 242 2 141 56 237 194 241" id="v"/><path fill="#fff" d="M338-514c121 0 155 79 155 203V0H363v-284c-1-72-12-113-77-115-52-1-86 36-99 75V0H57v-500h103l15 66h4c32-43 81-80 159-80" id="w"/><path fill="#fff" d="M200-90c53 9 88-53 47-80-80-53-213-55-211-192 2-102 65-152 171-152 67 0 135 17 175 39l-29 94c-31-11-84-29-129-29-54 0-78 51-41 74 81 50 213 53 211 187-2 110-75 163-194 163C133 14 65-7 25-31l36-97c31 17 89 40 139 38" id="x"/><path fill="#fff" d="M208 14C110 12 74-35 74-138v-252H5v-110h69v-94l130-37v131h122v110H204v192c2 58 2 97 50 97 30 0 44-6 67-16l23 100c-34 16-86 31-136 31" id="y"/><g id="c"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,10.459999999999997,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,21.2,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,32.1,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,40.54,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,50.7,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,61.6,0)" xlink:href="#y"/></g><path fill="#fff" d="M557-399c-51 0-73 31-86 71V0H341v-272c-3-78 0-124-67-127-48-2-73 31-87 66V0H57v-500h101l15 66h4c32-41 75-82 150-80 72 1 105 28 126 85 29-48 73-83 146-85 130-3 157 84 156 214V0H625v-281c-3-70-2-118-68-118" id="z"/><g id="d"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#z"/><use transform="matrix(0.02,0,0,0.02,16.1,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,26.020000000000007,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,36.92,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,46.84,0)" xlink:href="#q"/><use transform="matrix(0.02,0,0,0.02,57.56,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,67.72,0)" xlink:href="#z"/><use transform="matrix(0.02,0,0,0.02,83.82000000000001,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,93.97999999999999,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,104.88,0)" xlink:href="#y"/></g><path fill="#fff" d="M278 14c-42 0-63-5-91-19v205H57v-700h95l15 60h4c33-47 73-74 148-74 142 0 188 93 188 251 0 164-68 277-229 277zm95-280c0-79-20-138-93-138-57 0-77 30-93 76v208c20 15 38 25 74 24 90-3 112-66 112-170" id="A"/><path fill="#fff" d="M344-585c-48-18-132-27-132 43 0 12-2 26-2 42h110v110H210V0H80v-390H11v-110h69c-6-133 36-207 156-208 53 0 98 6 133 19" id="B"/><path fill="#fff" d="M177-434c23-61 95-96 173-66l-17 122c-64-28-134-1-146 55V0H57v-500h101l15 66h4" id="C"/><g id="e"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,10.8,0)" xlink:href="#s"/><use transform="matrix(0.02,0,0,0.02,16.68,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,26.6,0)" xlink:href="#B"/><use transform="matrix(0.02,0,0,0.02,32.92,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,43.660000000000004,0)" xlink:href="#C"/><use transform="matrix(0.02,0,0,0.02,50.68000000000001,0)" xlink:href="#z"/></g><path fill="#fff" d="M405-155H190L137 0H0l252-705h101L605 0H461zM225-265h150c-28-85-59-167-73-266h-5c-14 99-44 182-72 266" id="D"/><path fill="#fff" d="M211 14C88 14 52-63 52-189v-311h130v284c2 72 6 113 71 115 52 1 83-37 98-76v-323h130c6 167-14 358 16 500h-98l-23-74h-4c-29 48-84 88-161 88" id="E"/><path fill="#fff" d="M68-500h130V0H68v-500zm62-73c-46 0-81-26-81-68s35-70 81-70c45 0 85 29 85 70 0 42-40 68-85 68" id="F"/><path fill="#fff" d="M284-101c43 1 72-13 97-29l30 99c-37 28-97 45-160 45C91 14 37-90 33-250c-5-193 117-299 311-255 22 6 43 14 61 23l-31 106c-30-14-55-23-97-23-82 0-111 56-110 149 1 86 32 146 117 149" id="G"/><g id="f"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#D"/><use transform="matrix(0.02,0,0,0.02,12.1,0)" xlink:href="#E"/><use transform="matrix(0.02,0,0,0.02,22.86,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,33.64,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,39.02,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,49.18000000000001,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,60.08,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,68.4,0)" xlink:href="#r"/></g><g id="g"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,8.44,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,17.1,0)" xlink:href="#C"/><use transform="matrix(0.02,0,0,0.02,24.12,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,29.5,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,40.3,0)" xlink:href="#y"/></g><path fill="#fff" d="M225-356L30-700h165c44 91 102 168 132 273l23-71 113-202h149L410-363 622 0H459L336-216l-27-74-26 74L159 0H10" id="H"/><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#H" id="h"/><path fill="#fff" d="M453-293H197V0H60v-700h137v285h256v-285h137V0H453v-293" id="I"/><g id="i"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#I"/><use transform="matrix(0.02,0,0,0.02,13.02,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,23.18,0)" xlink:href="#p"/><use transform="matrix(0.02,0,0,0.02,33.1,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,43.88,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,54.04000000000001,0)" xlink:href="#C"/></g><path fill="#fff" d="M254 12C182 13 102-2 57-22v-678h130v240h4c26-30 72-53 127-52 135 3 185 99 185 249 0 170-87 274-249 275zm7-110c84 0 108-64 108-161 0-95-30-143-89-143-53 1-78 30-93 72v218c20 10 44 14 74 14" id="J"/><g id="j"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,10.72,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,16.1,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,26.88,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,37.660000000000004,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,43.04000000000001,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,53.94,0)" xlink:href="#q"/></g><g id="k"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,8.44,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,17.1,0)" xlink:href="#C"/><use transform="matrix(0.02,0,0,0.02,24.12,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,29.5,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,40.3,0)" xlink:href="#y"/></g><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#D" id="l"/><g id="m"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#D"/><use transform="matrix(0.02,0,0,0.02,12.1,0)" xlink:href="#u"/></g><path fill="#fff" d="M294-512c70 0 134 13 186 30v682H350V-43h-4c-24 35-61 58-121 57C86 11 33-87 33-240c0-174 90-272 261-272zM167-245c0 83 22 149 93 149 55 0 75-25 90-68v-225c-20-11-45-13-77-13-81 0-106 67-106 157" id="K"/><g id="n"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#C"/><use transform="matrix(0.02,0,0,0.02,7.0200000000000005,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,17.080000000000002,0)" xlink:href="#K"/><use transform="matrix(0.02,0,0,0.02,27.800000000000004,0)" xlink:href="#E"/><use transform="matrix(0.02,0,0,0.02,38.56,0)" xlink:href="#r"/><use transform="matrix(0.02,0,0,0.02,48.72,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,57.15999999999999,0)" xlink:href="#y"/></g></defs></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/fast-ads-matter/hero.jpg b/src/site/content/en/blog/fast-ads-matter/hero.jpg
deleted file mode 100644
index dd217b4a6ed..00000000000
Binary files a/src/site/content/en/blog/fast-ads-matter/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/fast-ads-matter/index.md b/src/site/content/en/blog/fast-ads-matter/index.md
index 4cd86f2f584..b186cc6698e 100644
--- a/src/site/content/en/blog/fast-ads-matter/index.md
+++ b/src/site/content/en/blog/fast-ads-matter/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Fast ads matter
 subhead: |
     Learn how improving ad speed can increase revenue and makes users happy, and
@@ -9,8 +10,8 @@ authors:
   - jimper
   - robhazan
   - thebengeu
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+hero: image/admin/xw8W0H84I776HdSNR1NJ.jpg
+thumbnail: image/admin/qcam8u4RQMmc8rod7UXm.jpg
 alt: |
     A long-exposure shot of a moving subway train and advertisement posters at
     the station photo.
@@ -19,7 +20,7 @@ description: |
 tags:
   - blog
   - performance
-  - ads
+  # - ads
 ---
 
 If you're like most publishers on the web, your business offers a simple value
@@ -42,7 +43,7 @@ tension with the user's purpose.
 
 The browser has limited resources to work with—memory, CPU, and network
 bandwidth. The more of these resources your ads consume, the longer it takes for
-your page to become visually complete and [interactive](/interactive/). This can
+your page to become visually complete and [interactive](/tti/). This can
 be a drag on user experience metrics like [session
 length](https://en.wikipedia.org/wiki/Session_(web_analytics)) and [bounce
 rate](https://en.wikipedia.org/wiki/Bounce_rate). You can improve these metrics
@@ -84,21 +85,17 @@ rate.
 With 1&nbsp;s of added delay, impressions decreased by 1.1% for mobile traffic
 and 1.9% for desktop traffic:
 
-<figure class="w-figure">
-  <img src="./ad-latency-injected-vs-impressions-change.svg" alt="Chart showing latency injected vs. impressions change">
-  <figcaption class="w-figcaption">
-    Source: Google Internal Data, December 2016 to January 2017.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/upKhjFZogtlvQGtTfwrX.svg", alt="Chart showing latency injected vs. impressions change", width="800", height="600" %}
+  <figcaption>Source: Google Internal Data, December 2016 to January 2017.</figcaption>
 </figure>
 
 With 1&nbsp;s of added delay, viewability rate decreased by 3.6% for mobile
 traffic and 2.9% for desktop traffic:
 
-<figure class="w-figure">
-  <img src="./ad-latency-injected-vs-viewability-rate-change.svg" alt="Chart showing latency injected vs. viewability rate change">
-  <figcaption class="w-figcaption">
-    Source: Google Internal Data, December 2016 to January 2017.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/PeyZqzqs99y5kklrE2XK.svg", alt="Chart showing latency injected vs. viewability rate change", width="800", height="600" %}
+  <figcaption>Source: Google Internal Data, December 2016 to January 2017.</figcaption>
 </figure>
 
 ## A framework for thinking about ad speed
@@ -146,18 +143,16 @@ First, create a flowchart for each inventory type to visualize how the various
 dependencies interact in order to load and display an ad. Desktop leaderboard
 inventory may look like this:
 
-![An example workflow for the desktop leaderboard inventory
-type.](./desktop-leaderboard.svg)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Kj5Vv9SffxhrfWmNtptm.svg", alt="An example workflow for the desktop leaderboard inventory type.", width="800", height="92" %}
 
 While a more complex inventory type, such as mobile banner, may look like this:
 
-![An example workflow for the mobile banner inventory
-type.](./mobile-banner.svg)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lzFgP8eaVWqLIlpBibyX.svg", alt="An example workflow for the mobile banner inventory type.", width="800", height="287" %}
 
 Then, use this information to create a simple table like the one below, which
 maps each inventory type to its dependencies in an easily digestible format.
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <thead>
       <tr>
diff --git a/src/site/content/en/blog/fast-ads-matter/mobile-banner.svg b/src/site/content/en/blog/fast-ads-matter/mobile-banner.svg
deleted file mode 100644
index f09f9e00f83..00000000000
--- a/src/site/content/en/blog/fast-ads-matter/mobile-banner.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:lucid="lucid" width="1340" height="480"><g transform="translate(0 0)" lucid:page-tab-id="0_0"><path d="M128 200c17.67 0 32 17.9 32 40s-14.33 40-32 40H32c-17.67 0-32-17.9-32-40s14.33-40 32-40z" stroke="#666" fill="#83bbe5"/><use xlink:href="#a" transform="matrix(1,0,0,1,5,205) translate(32.980000000000004 42.0625)"/><use xlink:href="#b" transform="matrix(1,0,0,1,5,205) translate(79.7 42.0625)"/><path d="M220 188c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H228c-4.42 0-8-3.58-8-8z" stroke="#666" fill="#0c7cba"/><use xlink:href="#c" transform="matrix(1,0,0,1,225,185) translate(41.21 38.625)"/><use xlink:href="#d" transform="matrix(1,0,0,1,225,185) translate(19.57 62.144999999999996)"/><use xlink:href="#e" transform="matrix(1,0,0,1,225,185) translate(42.11 85.66499999999999)"/><path d="M480 188c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H488c-4.42 0-8-3.58-8-8z" stroke="#666" fill="#0c7cba"/><use xlink:href="#f" transform="matrix(1,0,0,1,485,185) translate(0.6899999999999977 62.6875)"/><use xlink:href="#g" transform="matrix(1,0,0,1,485,185) translate(84.31 62.6875)"/><use xlink:href="#h" transform="matrix(1,0,0,1,485,185) translate(136.65 62.6875)"/><path d="M700 188c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H708c-4.42 0-8-3.58-8-8z" stroke="#666" fill="#0c7cba"/><use xlink:href="#i" transform="matrix(1,0,0,1,705,185) translate(9.609999999999985 48.9375)"/><use xlink:href="#j" transform="matrix(1,0,0,1,705,185) translate(75.72999999999999 48.9375)"/><use xlink:href="#k" transform="matrix(1,0,0,1,705,185) translate(42.78 72.4575)"/><use xlink:href="#l" transform="matrix(1,0,0,1,705,185) translate(95.12 72.4575)"/><path d="M1088 200c17.67 0 32 17.9 32 40s-14.33 40-32 40h-96c-17.67 0-32-17.9-32-40s14.33-40 32-40z" stroke="#666" fill="#83bbe5"/><use xlink:href="#m" transform="matrix(1,0,0,1,965,205) translate(28.96 42.0625)"/><use xlink:href="#n" transform="matrix(1,0,0,1,965,205) translate(56.9 42.0625)"/><path d="M161 240h42.12" stroke="#666" fill="none"/><path d="M161 240.5h-.53l.03-.5-.02-.5h.53z" fill="#666"/><path d="M217.88 240l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M381 240h82.12" stroke="#666" fill="none"/><path d="M381 240.5h-.5v-1h.5z" fill="#666"/><path d="M477.88 240l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M641 240h42.12" stroke="#666" fill="none"/><path d="M641 240.5h-.5v-1h.5z" fill="#666"/><path d="M697.88 240l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M580 8c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H588c-4.42 0-8-3.58-8-8z" stroke="#666" fill="#0c7cba"/><use xlink:href="#f" transform="matrix(1,0,0,1,585,5) translate(1.0999999999999943 62.6875)"/><use xlink:href="#g" transform="matrix(1,0,0,1,585,5) translate(84.72 62.6875)"/><use xlink:href="#o" transform="matrix(1,0,0,1,585,5) translate(137.06 62.6875)"/><path d="M580 368c0-4.42 3.58-8 8-8h144c4.42 0 8 3.58 8 8v104c0 4.42-3.58 8-8 8H588c-4.42 0-8-3.58-8-8z" stroke="#666" fill="#0c7cba"/><use xlink:href="#i" transform="matrix(1,0,0,1,585,365) translate(9.609999999999985 48.9375)"/><use xlink:href="#j" transform="matrix(1,0,0,1,585,365) translate(75.72999999999999 48.9375)"/><use xlink:href="#k" transform="matrix(1,0,0,1,585,365) translate(42.92 72.4575)"/><use xlink:href="#p" transform="matrix(1,0,0,1,585,365) translate(95.26 72.4575)"/><path d="M381 240l2.88-.07 3.25-.2 3.12-.33 3.03-.45 2.95-.56 2.88-.7 2.84-.78 2.8-.9 2.76-1.03 2.75-1.17 2.76-1.3 2.77-1.45 2.8-1.6 2.84-1.8 2.9-2.03 2.98-2.26 3.1-2.56 3.2-2.9 3.4-3.32 3.6-3.86 3.94-4.55 4.34-5.48 5-6.88 6.1-9.22 8.97-14.88 31.1-54.36 6.12-9.22 5-6.88 4.33-5.5 3.93-4.54 3.62-3.86 3.4-3.32 3.2-2.9 3.1-2.55 2.98-2.25 2.9-2.02 2.83-1.8 2.8-1.6 2.76-1.46 2.75-1.3L552.5 65l2.77-1 2.8-.92 2.82-.8 2.34-.54" stroke="#666" fill="none"/><path d="M381.03 240.5h-.53v-1h.5z" fill="#666"/><path d="M577.9 60.17l-13.7 6.13-1-9.22z" stroke="#666" fill="#666"/><path d="M741 60l3.6.1 3.9.23 3.74.4 3.6.53 3.52.67 3.42.8 3.34.93 3.3 1.07 3.25 1.2 3.23 1.37 3.22 1.52 3.24 1.7 3.27 1.88 3.3 2.1 3.4 2.35 3.48 2.65 3.62 3 3.78 3.4 4 3.93 4.34 4.6 4.76 5.53 5.44 6.87 6.62 9.13 9.62 14.56 33.66 53.52 6.62 9.13 5.44 6.87 4.76 5.52 4.33 4.6 4 3.94 3.78 3.4 3.6 3 3.5 2.65 3.38 2.35 3.3 2.1 3.28 1.9 3.24 1.68 3.22 1.52 3.23 1.36 3.26 1.2 3.28 1.08 3.34.93 3.42.8 2.56.5" stroke="#666" fill="none"/><path d="M741.03 59.5l-.02 1h-.5v-1z" fill="#666"/><path d="M957.9 239.86l-14.63 3.36.8-9.23z" stroke="#666" fill="#666"/><path d="M741 420l3.6-.1 3.9-.23 3.74-.4 3.6-.53 3.52-.67 3.42-.8 3.34-.93 3.3-1.07 3.25-1.2 3.23-1.37 3.22-1.52 3.24-1.7 3.27-1.88 3.3-2.1 3.4-2.35 3.48-2.65 3.62-3 3.78-3.4 4-3.93 4.34-4.6 4.76-5.53 5.44-6.87 6.62-9.13 9.62-14.56 33.66-53.52 6.62-9.13 5.44-6.87 4.76-5.52 4.33-4.6 4-3.94 3.78-3.4 3.6-3 3.5-2.65 3.38-2.35 3.3-2.1 3.28-1.9 3.24-1.68 3.22-1.52 3.23-1.36 3.26-1.2 3.28-1.08 3.34-.93 3.42-.8 2.56-.5" stroke="#666" fill="none"/><path d="M741.03 420.5h-.53v-1h.5z" fill="#666"/><path d="M957.9 240.14L944.07 246l-.8-9.22z" stroke="#666" fill="#666"/><path d="M861 240h82.12" stroke="#666" fill="none"/><path d="M861 240.5h-.5v-1h.5z" fill="#666"/><path d="M957.88 240l-14.26 4.64v-9.28z" stroke="#666" fill="#666"/><path d="M381 240l2.88.07 3.25.2 3.12.33 3.03.45 2.95.56 2.88.7 2.84.78 2.8.9 2.76 1.03 2.75 1.17 2.76 1.3 2.77 1.45 2.8 1.6 2.84 1.8 2.9 2.03 2.98 2.26 3.1 2.56 3.2 2.9 3.4 3.32 3.6 3.86 3.94 4.55 4.34 5.48 5 6.88 6.1 9.22 8.97 14.88 31.1 54.36 6.12 9.22 5 6.88 4.33 5.5 3.93 4.54 3.62 3.86 3.4 3.32 3.2 2.9 3.1 2.55 2.98 2.25 2.9 2.02 2.83 1.8 2.8 1.6 2.76 1.46 2.75 1.3 2.75 1.16 2.77 1 2.8.92 2.82.8 2.34.54" stroke="#666" fill="none"/><path d="M381.03 239.5l-.02 1h-.5v-1z" fill="#666"/><path d="M577.9 419.83l-14.7 3.1 1-9.23z" stroke="#666" fill="#666"/><path d="M1212 180h112c8.84 0 16 26.86 16 60s-7.16 60-16 60h-112l-32-60z" stroke="#666" fill="#0c7cba"/><g><use xlink:href="#q" transform="matrix(1,0,0,1,1185,185) translate(35.45499999999999 48.9375)"/><use xlink:href="#r" transform="matrix(1,0,0,1,1185,185) translate(32.834999999999994 72.4575)"/></g><path d="M1121.5 240h39.43" stroke="#000" stroke-width="2" fill="none"/><path d="M1121.53 241h-1.1l.07-1-.03-1h1.06z"/><path d="M1176.2 240l-14.27 4.64v-9.28z" stroke="#000" stroke-width="2"/><defs><path fill="#fff" d="M547-478c0 191-151 258-350 237V0H60v-693c55-11 127-17 193-17 172 0 294 58 294 232zm-144-2c0-106-104-123-206-107v227c108 15 206-7 206-120" id="s"/><path fill="#fff" d="M306-378c-38-49-172-17-221 4l-31-97c53-24 132-39 210-39 122 0 181 55 180 175-1 112-20 242 11 336H349l-21-69h-5c-28 41-74 78-147 76C81 5 23-45 23-138c0-142 140-164 291-160 5-37 4-65-8-80zM157-158c-3 37 24 59 62 59 49 0 79-27 96-55v-65c-71-4-153-3-158 61" id="t"/><path fill="#fff" d="M283-512c75-1 146 12 197 30V0c1 145-82 211-224 212-78 1-132-10-176-31l27-103c36 13 74 27 129 27 98 0 121-48 117-144h-4C326-8 284 8 225 8 81 8 33-84 33-240c-1-172 82-272 250-272zM167-245c0 83 22 149 93 149 55 0 75-25 90-68v-225c-21-9-46-13-77-13-80 0-107 63-106 157" id="u"/><path fill="#fff" d="M291-90c49 0 97-19 123-38l43 85c-40 32-117 57-191 57C103 14 34-89 33-250c-2-167 81-264 240-264 129 0 199 68 200 202 0 33-4 65-10 95H163c5 84 39 127 128 127zm61-208c5-67-19-112-81-112-71-1-98 47-105 112h186" id="v"/><g id="a"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#s"/><use transform="matrix(0.02,0,0,0.02,10.86,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,20.78,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,31.5,0)" xlink:href="#v"/></g><path fill="#fff" d="M178 14C100 13 61-20 61-100v-600h130v532c1 39 5 67 38 67 22 0 33-3 52-11l14 102c-24 12-77 25-117 24" id="w"/><path fill="#fff" d="M269 14C107 14 36-88 33-250c-2-161 81-264 236-264 162 0 233 102 235 264 2 161-80 264-235 264zm0-418c-78 0-104 61-102 154 1 82 21 154 102 154 80 0 101-62 101-154 0-83-21-154-101-154" id="x"/><path fill="#fff" d="M261-512c41 0 62 4 91 15v-203h130v524c0 66 0 116 10 177h-93l-18-65h-4c-25 45-77 80-146 78C90 11 33-84 33-242c0-161 72-270 228-270zm-94 274c0 76 22 141 94 142 54 0 79-28 91-72v-212c-20-15-39-23-75-22-89 3-110 60-110 164" id="y"/><g id="b"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,5.88,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,16.62,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,26.54,0)" xlink:href="#y"/></g><path fill="#fff" d="M376-109c57 1 96-12 130-32l28 112C494 1 420 14 351 14 136 14 41-127 38-350c-3-258 153-398 418-356 28 4 50 12 68 19l-27 116c-35-16-76-21-131-21-127 0-187 96-184 242 2 141 56 237 194 241" id="z"/><path fill="#fff" d="M338-514c121 0 155 79 155 203V0H363v-284c-1-72-12-113-77-115-52-1-86 36-99 75V0H57v-500h103l15 66h4c32-43 81-80 159-80" id="A"/><path fill="#fff" d="M200-90c53 9 88-53 47-80-80-53-213-55-211-192 2-102 65-152 171-152 67 0 135 17 175 39l-29 94c-31-11-84-29-129-29-54 0-78 51-41 74 81 50 213 53 211 187-2 110-75 163-194 163C133 14 65-7 25-31l36-97c31 17 89 40 139 38" id="B"/><path fill="#fff" d="M208 14C110 12 74-35 74-138v-252H5v-110h69v-94l130-37v131h122v110H204v192c2 58 2 97 50 97 30 0 44-6 67-16l23 100c-34 16-86 31-136 31" id="C"/><g id="c"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#z"/><use transform="matrix(0.02,0,0,0.02,10.459999999999997,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,21.2,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,32.1,0)" xlink:href="#B"/><use transform="matrix(0.02,0,0,0.02,40.54,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,50.7,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,61.6,0)" xlink:href="#C"/></g><path fill="#fff" d="M557-399c-51 0-73 31-86 71V0H341v-272c-3-78 0-124-67-127-48-2-73 31-87 66V0H57v-500h101l15 66h4c32-41 75-82 150-80 72 1 105 28 126 85 29-48 73-83 146-85 130-3 157 84 156 214V0H625v-281c-3-70-2-118-68-118" id="D"/><g id="d"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#D"/><use transform="matrix(0.02,0,0,0.02,16.1,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,26.020000000000007,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,36.92,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,46.84,0)" xlink:href="#u"/><use transform="matrix(0.02,0,0,0.02,57.56,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,67.72,0)" xlink:href="#D"/><use transform="matrix(0.02,0,0,0.02,83.82000000000001,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,93.97999999999999,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,104.88,0)" xlink:href="#C"/></g><path fill="#fff" d="M278 14c-42 0-63-5-91-19v205H57v-700h95l15 60h4c33-47 73-74 148-74 142 0 188 93 188 251 0 164-68 277-229 277zm95-280c0-79-20-138-93-138-57 0-77 30-93 76v208c20 15 38 25 74 24 90-3 112-66 112-170" id="E"/><path fill="#fff" d="M344-585c-48-18-132-27-132 43 0 12-2 26-2 42h110v110H210V0H80v-390H11v-110h69c-6-133 36-207 156-208 53 0 98 6 133 19" id="F"/><path fill="#fff" d="M177-434c23-61 95-96 173-66l-17 122c-64-28-134-1-146 55V0H57v-500h101l15 66h4" id="G"/><g id="e"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#E"/><use transform="matrix(0.02,0,0,0.02,10.8,0)" xlink:href="#w"/><use transform="matrix(0.02,0,0,0.02,16.68,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,26.6,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,32.92,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,43.660000000000004,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,50.68000000000001,0)" xlink:href="#D"/></g><path fill="#fff" d="M405-155H190L137 0H0l252-705h101L605 0H461zM225-265h150c-28-85-59-167-73-266h-5c-14 99-44 182-72 266" id="H"/><path fill="#fff" d="M211 14C88 14 52-63 52-189v-311h130v284c2 72 6 113 71 115 52 1 83-37 98-76v-323h130c6 167-14 358 16 500h-98l-23-74h-4c-29 48-84 88-161 88" id="I"/><path fill="#fff" d="M68-500h130V0H68v-500zm62-73c-46 0-81-26-81-68s35-70 81-70c45 0 85 29 85 70 0 42-40 68-85 68" id="J"/><path fill="#fff" d="M284-101c43 1 72-13 97-29l30 99c-37 28-97 45-160 45C91 14 37-90 33-250c-5-193 117-299 311-255 22 6 43 14 61 23l-31 106c-30-14-55-23-97-23-82 0-111 56-110 149 1 86 32 146 117 149" id="K"/><g id="f"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#H"/><use transform="matrix(0.02,0,0,0.02,12.1,0)" xlink:href="#I"/><use transform="matrix(0.02,0,0,0.02,22.86,0)" xlink:href="#y"/><use transform="matrix(0.02,0,0,0.02,33.64,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,39.02,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,49.18000000000001,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,60.08,0)" xlink:href="#K"/><use transform="matrix(0.02,0,0,0.02,68.4,0)" xlink:href="#v"/></g><g id="g"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#B"/><use transform="matrix(0.02,0,0,0.02,8.44,0)" xlink:href="#K"/><use transform="matrix(0.02,0,0,0.02,17.1,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,24.12,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,29.5,0)" xlink:href="#E"/><use transform="matrix(0.02,0,0,0.02,40.3,0)" xlink:href="#C"/></g><path fill="#fff" d="M225-356L30-700h165c44 91 102 168 132 273l23-71 113-202h149L410-363 622 0H459L336-216l-27-74-26 74L159 0H10" id="L"/><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#L" id="h"/><path fill="#fff" d="M453-293H197V0H60v-700h137v285h256v-285h137V0H453v-293" id="M"/><g id="i"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#M"/><use transform="matrix(0.02,0,0,0.02,13.02,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,23.18,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,33.1,0)" xlink:href="#y"/><use transform="matrix(0.02,0,0,0.02,43.88,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,54.04000000000001,0)" xlink:href="#G"/></g><path fill="#fff" d="M254 12C182 13 102-2 57-22v-678h130v240h4c26-30 72-53 127-52 135 3 185 99 185 249 0 170-87 274-249 275zm7-110c84 0 108-64 108-161 0-95-30-143-89-143-53 1-78 30-93 72v218c20 10 44 14 74 14" id="N"/><g id="j"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#N"/><use transform="matrix(0.02,0,0,0.02,10.72,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,16.1,0)" xlink:href="#y"/><use transform="matrix(0.02,0,0,0.02,26.88,0)" xlink:href="#y"/><use transform="matrix(0.02,0,0,0.02,37.660000000000004,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,43.04000000000001,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,53.94,0)" xlink:href="#u"/></g><g id="k"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#B"/><use transform="matrix(0.02,0,0,0.02,8.44,0)" xlink:href="#K"/><use transform="matrix(0.02,0,0,0.02,17.1,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,24.12,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,29.5,0)" xlink:href="#E"/><use transform="matrix(0.02,0,0,0.02,40.3,0)" xlink:href="#C"/></g><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#H" id="l"/><g id="m"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#H"/><use transform="matrix(0.02,0,0,0.02,12.1,0)" xlink:href="#y"/></g><path fill="#fff" d="M294-512c70 0 134 13 186 30v682H350V-43h-4c-24 35-61 58-121 57C86 11 33-87 33-240c0-174 90-272 261-272zM167-245c0 83 22 149 93 149 55 0 75-25 90-68v-225c-20-11-45-13-77-13-81 0-106 67-106 157" id="O"/><g id="n"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,7.0200000000000005,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,17.080000000000002,0)" xlink:href="#O"/><use transform="matrix(0.02,0,0,0.02,27.800000000000004,0)" xlink:href="#I"/><use transform="matrix(0.02,0,0,0.02,38.56,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,48.72,0)" xlink:href="#B"/><use transform="matrix(0.02,0,0,0.02,57.15999999999999,0)" xlink:href="#C"/></g><path fill="#fff" d="M228-260L-2-700h163l128 263 14 74h5l15-76 124-261h147L365-261V0H228v-260" id="P"/><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#P" id="o"/><path fill="#fff" d="M60-695c185-21 473-52 471 158-1 92-49 143-125 162v6c89 16 147 67 147 172C553-34 410 14 236 10 176 9 111 6 60-5v-690zm132 586c98 16 219 8 219-95 1-107-113-99-219-98v193zm200-400c5-96-111-93-200-84v187c105 7 195-13 200-103" id="Q"/><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#Q" id="p"/><path fill="#fff" d="M524-513c0 116-60 187-147 215l49 31L586 0H428L269-274l-72-13V0H60v-693c195-32 464-42 464 180zm-144 21c0-92-93-108-183-91v203c104 6 183-11 183-112" id="R"/><g id="q"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#R"/><use transform="matrix(0.02,0,0,0.02,11.080000000000002,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,21.240000000000002,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,32.14,0)" xlink:href="#y"/><use transform="matrix(0.02,0,0,0.02,42.92,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,53.08,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,60.1,0)" xlink:href="#J"/><use transform="matrix(0.02,0,0,0.02,65.48,0)" xlink:href="#A"/><use transform="matrix(0.02,0,0,0.02,76.38000000000001,0)" xlink:href="#u"/></g><path fill="#fff" d="M419-500c36 113 86 213 109 339h4c18-121 52-226 78-339h119L575 5h-96L378-275l-13-63h-5l-12 64L252 5h-99L-8-500h141c29 113 73 211 85 340h5c19-127 66-227 100-340h96" id="S"/><path fill="#fff" d="M222-207h-35V0H57v-700h130v413l30-14 114-199h143L354-310l-51 38 55 39L493 0H344" id="T"/><g id="r"><use transform="matrix(0.02,0,0,0.02,0,0)" xlink:href="#F"/><use transform="matrix(0.02,0,0,0.02,6.42,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,13.44,0)" xlink:href="#t"/><use transform="matrix(0.02,0,0,0.02,23.36,0)" xlink:href="#D"/><use transform="matrix(0.02,0,0,0.02,39.46,0)" xlink:href="#v"/><use transform="matrix(0.02,0,0,0.02,49.51999999999999,0)" xlink:href="#S"/><use transform="matrix(0.02,0,0,0.02,63.76,0)" xlink:href="#x"/><use transform="matrix(0.02,0,0,0.02,74.5,0)" xlink:href="#G"/><use transform="matrix(0.02,0,0,0.02,81.52,0)" xlink:href="#T"/></g></defs></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/fast-ads-matter/thumbnail.jpg b/src/site/content/en/blog/fast-ads-matter/thumbnail.jpg
deleted file mode 100644
index 844137002ee..00000000000
Binary files a/src/site/content/en/blog/fast-ads-matter/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/fast-playback-with-preload/index.md b/src/site/content/en/blog/fast-playback-with-preload/index.md
new file mode 100644
index 00000000000..07875152758
--- /dev/null
+++ b/src/site/content/en/blog/fast-playback-with-preload/index.md
@@ -0,0 +1,607 @@
+---
+layout: post
+title: Fast playback with audio and video preload
+subhead: How to accelerate your media playback by actively preloading resources.
+authors:
+  - beaufortfrancois
+description: |
+  Faster playback start means more people watching your video or listening to
+  your audio. That's a known fact. In this article I'll explore techniques you
+  can use to accelerate your media playback by actively preloading resources
+  depending on your use case.
+date: 2017-08-17
+updated: 2020-11-16
+tags:
+  - media
+  # - video
+  - performance
+  - network
+---
+
+Faster playback start means more people watching your video or listening to your
+audio. [That's a known fact][thats-a-known-fact]. In this article I'll explore
+techniques you can use to accelerate your audio and video playback by actively
+preloading resources depending on your use case.
+
+<figure>
+  <video controls muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.webm#t=1.1"
+            type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.mp4#t=1.1"
+            type="video/mp4">
+  </video>
+  <figcaption>
+    <p>Credits: copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org </a>.</p>
+  </figcaption>
+</figure>
+
+I'll describe three methods of preloading media files, starting with their pros
+and cons.
+
+<table>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>
+It's great...
+      </th>
+      <th>
+But...
+      </th>
+    </tr>
+    <tr>
+      <td rowspan=3 style="white-space: nowrap">
+<a href="#video_preload_attribute">Video preload attribute</a>
+      </td>
+      <td rowspan=3>
+Simple to use for a unique file hosted on a web server.
+      </td>
+      <td>
+Browsers may completely ignore the attribute.
+      </td>
+    <tr>
+      <td>
+Resource fetching starts when the HTML document has been completely loaded and
+parsed.
+      </td>
+    </tr>
+    <tr>
+      <td>
+Media Source Extensions (MSE) ignore the <code>preload</code> attribute on media elements because the app is responsible for
+providing media to MSE.
+      </td>
+    </tr>
+    <tr>
+      <td rowspan=2 style="white-space: nowrap">
+<a href="#link_preload">Link preload</a>
+      </td>
+      <td>
+Forces the browser to make a request for a video resource without blocking
+the document's <code>onload</code> event.
+      </td>
+      <td>
+HTTP Range requests are not compatible.
+      </td>
+    <tr>
+      <td>
+Compatible with MSE and file segments.
+      </td>
+      <td>
+Should be used only for small media files (&lt;5 MB) when fetching full resources.
+      </td>
+    </tr>
+    <tr>
+      <td>
+<a href="#manual_buffering">Manual buffering</a>
+      </td>
+      <td>
+Full control
+      </td>
+      <td>
+Complex error handling is the website's responsibility.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Video preload attribute
+
+If the video source is a unique file hosted on a web server, you may want to
+use the video `preload` attribute to provide a hint to the browser as to [how
+much information or content to preload][preload]. This means [Media Source Extensions
+(MSE)][mse-basics] is not compatible with `preload`.
+
+Resource fetching will start only when the initial HTML document has been
+completely loaded and parsed (e.g. the `DOMContentLoaded` event has fired)
+while the very different `load` event will be fired when resource
+has actually been fetched.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/De8tMHJUn3XyzFfosVLb.svg", alt="", width="800", height="234" %}
+</figure>
+
+Setting the `preload` attribute to `metadata` indicates that the user is not
+expected to need the video, but that fetching its metadata (dimensions, track
+list, duration, and so on) is desirable. Note that starting in [Chrome
+64][chrome64], the default value for `preload` is `metadata`. (It was `auto`
+previously).
+
+
+```html
+<video id="video" preload="metadata" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+Setting the `preload` attribute to `auto` indicates that the browser may cache
+enough data that complete playback is possible without requiring a stop for
+further buffering.
+
+```html
+<video id="video" preload="auto" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+There are some caveats though. As this is just a hint, the browser may completely
+ignore the `preload` attribute. At the time of writing, here are some rules
+applied in Chrome:
+
+- When [Data Saver][datasaver] is enabled, Chrome forces the `preload` value to
+  `none`.
+- In Android 4.3, Chrome forces the `preload` value to `none` due to an [Android
+  Bug][android-bug].
+- On a cellular connection (2G, 3G, and 4G), Chrome forces the `preload` value to
+  `metadata`.
+
+### Tips
+
+If your website contains many video resources on the same domain, I would
+recommend you set the `preload` value to `metadata` or define the `poster`
+attribute and set `preload` to `none`. That way, you would avoid hitting
+the maximum number of HTTP connections to the same domain (6 according to the
+HTTP 1.1 spec) which can hang loading of resources. Note that this may also
+improve page speed if videos aren't part of your core user experience.
+
+## Link preload
+
+As [covered] in other [articles], [link preload] is a declarative fetch that
+allows you to force the browser to make a request for a resource without
+blocking the `load` event and while the page is downloading. Resources
+loaded via `<link rel="preload">` are stored locally in the browser, and are
+effectively inert until they're explicitly referenced in the DOM, JavaScript,
+or CSS.
+
+Preload is different from prefetch in that it focuses on current navigation and
+fetches resources with priority based on their type (script, style, font,
+video, audio, etc.). It should be used to warm up the browser cache for current
+sessions.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/g5fQKJMivvcsHajmMmi2.svg", alt="", width="800", height="234" %}
+</figure>
+
+### Preload full video
+
+Here's how to preload a full video on your website so that when your
+JavaScript asks to fetch video content, it is read from cache as the resource
+may have already been cached by the browser. If the preload request hasn't
+finished yet, a regular network fetch will happen.
+
+```js
+<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">
+
+<video id="video" controls></video>
+
+<script>
+  // Later on, after some condition has been met, set video source to the
+  // preloaded video URL.
+  video.src = 'https://cdn.com/small-file.mp4';
+  video.play().then(() => {
+    // If preloaded video URL was already cached, playback started immediately.
+  });
+</script>
+```
+
+{% Aside %}
+  I would recommend using this only for small media files (less than 5MB).
+{% endAside %}
+
+Because the preloaded resource is going to be consumed by a video element in
+the example, the `as` preload link value is `video`. If it were an audio
+element, it would be `as="audio"`.
+
+### Preload the first segment
+
+The example below shows how to preload the first segment of a video with `<link
+rel="preload">` and use it with Media Source Extensions. If you're not familiar
+with the MSE JavaScript API, see [MSE basics][mse-basics].
+
+For the sake of simplicity, let's assume the entire video has been split into
+smaller files like `file_1.webm`, `file_2.webm`, `file_3.webm`, etc.
+
+```html
+<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">
+
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // If video is preloaded already, fetch will return immediately a response
+    // from the browser cache (memory cache). Otherwise, it will perform a
+    // regular network fetch.
+    fetch('https://cdn.com/file_1.webm')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      // Append the data into the new sourceBuffer.
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch file_2.webm when user starts playing video.
+    })
+    .catch(error => {
+      // TODO: Show "Video is not available" message to user.
+    });
+  }
+</script>
+```
+
+{% Aside 'warning' %}
+  For cross-origin resources, make sure your CORS headers are set properly. As
+  we can't create an array buffer from an opaque response retrieved with
+  `fetch(videoFileUrl, { mode: 'no-cors' })`, we won't be able to feed any video
+  or audio element.
+{% endAside %}
+
+
+
+### Support
+
+See MDN's [Browser compatibility][browser-compatibility] table to see which
+browsers support preload. You may want to detect its availability with the
+snippets below to adjust your performance metrics.
+
+```js
+function preloadFullVideoSupported() {
+  const link = document.createElement('link');
+  link.as = 'video';
+  return (link.as === 'video');
+}
+
+function preloadFirstSegmentSupported() {
+  const link = document.createElement('link');
+  link.as = 'fetch';
+  return (link.as === 'fetch');
+}
+```
+
+## Manual buffering
+
+Before we dive into the [Cache API][cache-api] and service workers, let's see
+how to manually buffer a video with MSE. The example below assumes that your web
+server supports HTTP [`Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range)
+requests but this would be pretty similar with file
+segments. Note that some middleware libraries such as [Google's Shaka
+Player][shaka-player], [JW Player][jw-player], and [Video.js][video-js] are
+built to handle this for you.
+
+```html
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // Fetch beginning of the video by setting the Range HTTP request header.
+    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
+    });
+  }
+
+  function updateEnd() {
+    // Video is now ready to play!
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+
+    // Fetch the next segment of video when user starts playing the video.
+    video.addEventListener('playing', fetchNextSegment, { once: true });
+  }
+
+  function fetchNextSegment() {
+    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      const sourceBuffer = mediaSource.sourceBuffers[0];
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch further segment and append it.
+    });
+  }
+</script>
+```
+
+### Considerations
+
+As you're now in control of the entire media buffering experience, I suggest you
+consider the device's battery level, the "Data-Saver Mode" user preference and
+network information when thinking about preloading.
+
+#### Battery awareness
+
+Take into account the battery level of users' devices before thinking
+about preloading a video. This will preserve battery life when the power level
+is low.
+
+Disable preload or at least preload a lower resolution video when the
+device is running out of battery.
+
+```js
+if ('getBattery' in navigator) {
+  navigator.getBattery()
+  .then(battery => {
+    // If battery is charging or battery level is high enough
+    if (battery.charging || battery.level > 0.15) {
+      // TODO: Preload the first segment of a video.
+    }
+  });
+}
+```
+
+#### Detect "Data-Saver"
+
+Use the `Save-Data` client hint request header to deliver fast and light
+applications to users who have opted-in to "data savings" mode in their
+browser. By identifying this request header, your application can customize and
+deliver an optimized user experience to cost- and performance-constrained
+users.
+
+See [Delivering Fast and Light Applications with Save-Data][fast-light] to learn more.
+
+#### Smart loading based on network information
+
+You may want to check `navigator.connection.type` prior to preloading. When
+it's set to `cellular`, you could prevent preloading and advise users that
+their mobile network operator might be charging for the bandwidth, and only start
+automatic playback of previously cached content.
+
+```js
+if ('connection' in navigator) {
+  if (navigator.connection.type == 'cellular') {
+    // TODO: Prompt user before preloading video
+  } else {
+    // TODO: Preload the first segment of a video.
+  }
+}
+```
+
+Check out the [Network Information sample][network-info-sample] to learn how to react to network
+changes as well.
+
+### Pre-cache multiple first segments
+
+Now what if I want to speculatively pre-load some media content without
+knowing which piece of media the user will eventually pick? If the user is on a
+web page that contains 10 videos, we probably have enough memory to fetch one
+segment file from each but we should definitely not create 10 hidden `<video>`
+elements and 10 `MediaSource` objects and start feeding that data.
+
+The two-part example below shows you how to pre-cache multiple first segments of
+video using the powerful and easy-to-use [Cache API](/cache-api-quick-guide/). Note that something similar
+can be achieved with IndexedDB as well. We're not using service workers yet as
+the Cache API is also accessible from the `window` object.
+
+#### Fetch and cache
+
+```js
+const videoFileUrls = [
+  'bat_video_file_1.webm',
+  'cow_video_file_1.webm',
+  'dog_video_file_1.webm',
+  'fox_video_file_1.webm',
+];
+
+// Let's create a video pre-cache and store all first segments of videos inside.
+window.caches.open('video-pre-cache')
+.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));
+
+function fetchAndCache(videoFileUrl, cache) {
+  // Check first if video is in the cache.
+  return cache.match(videoFileUrl)
+  .then(cacheResponse => {
+    // Let's return cached response if video is already in the cache.
+    if (cacheResponse) {
+      return cacheResponse;
+    }
+    // Otherwise, fetch the video from the network.
+    return fetch(videoFileUrl)
+    .then(networkResponse => {
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, networkResponse.clone());
+      return networkResponse;
+    });
+  });
+}
+```
+
+Note that if I were to use HTTP `Range` requests, I would have to manually recreate
+a `Response` object as the Cache API doesn't support `Range` responses [yet]. Be
+mindful that calling `networkResponse.arrayBuffer()` fetches the whole content
+of the response at once into renderer memory, which is why you may want to use
+small ranges.
+
+For reference, I've modified part of the example above to save HTTP Range
+requests to the video precache.
+
+```js
+    ...
+    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
+    .then(networkResponse => networkResponse.arrayBuffer())
+    .then(data => {
+      const response = new Response(data);
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, response.clone());
+      return response;
+    });
+```
+
+#### Play video
+
+When a user clicks a play button, we'll fetch the first segment of video
+available in the Cache API so that playback starts immediately if available.
+Otherwise, we'll simply fetch it from the network. Keep in mind that browsers
+and users may decide to clear the [Cache][cache].
+
+As seen before, we use MSE to feed that first segment of video to the video
+element.
+
+```js
+function onPlayButtonClick(videoFileUrl) {
+  video.load(); // Used to be able to play video later.
+
+  window.caches.open('video-pre-cache')
+  .then(cache => fetchAndCache(videoFileUrl, cache)) // Defined above.
+  .then(response => response.arrayBuffer())
+  .then(data => {
+    const mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+    function sourceOpen() {
+      URL.revokeObjectURL(video.src);
+
+      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+      sourceBuffer.appendBuffer(data);
+
+      video.play().then(() => {
+        // TODO: Fetch the rest of the video when user starts playing video.
+      });
+    }
+  });
+}
+```
+
+{% Aside 'warning' %}
+  For cross-origin resources, make sure your CORS headers are set properly. As
+  we can't create an array buffer from an opaque response retrieved with
+  `fetch(videoFileUrl, { mode: 'no-cors' })`, we won't be able to feed any video
+  or audio element.
+{% endAside %}
+
+### Create Range responses with a service worker
+
+Now what if you have fetched an entire video file and saved it in
+the Cache API? When the browser sends an HTTP `Range` request, you certainly don't
+want to bring the entire video into renderer memory as the Cache API doesn't
+support `Range` responses [yet].
+
+So let me show how to intercept these requests and return a customized `Range`
+response from a service worker.
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(loadFromCacheOrFetch(event.request));
+});
+
+function loadFromCacheOrFetch(request) {
+  // Search through all available caches for this request.
+  return caches.match(request)
+  .then(response => {
+
+    // Fetch from network if it's not already in the cache.
+    if (!response) {
+      return fetch(request);
+      // Note that we may want to add the response to the cache and return
+      // network response in parallel as well.
+    }
+
+    // Browser sends a HTTP Range request. Let's provide one reconstructed
+    // manually from the cache.
+    if (request.headers.has('range')) {
+      return response.blob()
+      .then(data => {
+
+        // Get start position from Range request header.
+        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
+        const options = {
+          status: 206,
+          statusText: 'Partial Content',
+          headers: response.headers
+        }
+        const slicedResponse = new Response(data.slice(pos), options);
+        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
+            (data.size - 1) + '/' + data.size);
+        slicedResponse.setHeaders('X-From-Cache': 'true');
+
+        return slicedResponse;
+      });
+    }
+
+    return response;
+  }
+}
+```
+
+It is important to note that I used `response.blob()` to recreate this sliced
+response as this simply gives me a handle to the file while
+`response.arrayBuffer()` brings the entire file into renderer memory.
+
+My custom `X-From-Cache` HTTP header can be used to know whether this request
+came from the cache or from the network. It can be used by a player such as
+[ShakaPlayer][shakaplayer] to ignore the response time as an indicator of
+network speed.
+
+{% YouTube 'f8EGZa32Mts' %}
+
+Have a look at the official [Sample Media App][sample-media-app] and in particular its
+[ranged-response.js] file for a complete solution for how to handle `Range`
+requests.
+
+[how much information or content to preload]: /video-and-source-tags/#preload
+[video preload attribute]: /video-and-source-tags/#preload
+[chrome64]: https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#media-preload-defaults-metadata
+[datasaver]: https://support.google.com/chrome/answer/2392284
+[covered]: https://developer.chrome.com/blog/link-rel-preload/
+[articles]: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
+[link preload]: https://w3c.github.io/preload/
+[cache]: /storage-for-the-web/#eviction
+[shakaplayer]: https://github.com/google/shaka-player/blob/master/docs/tutorials/service-worker.md
+[sample-media-app]: https://github.com/GoogleChrome/sample-media-pwa
+[ranged-response.js]: https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/scripts/ranged-response.js
+[cache-api]: https://developer.mozilla.org/docs/Web/API/Cache
+[yet]: https://github.com/whatwg/fetch/issues/144
+[shaka-player]: https://github.com/google/shaka-player
+[jw-player]: https://developer.jwplayer.com/
+[video-js]: http://videojs.com/
+[network-info-sample]: https://googlechrome.github.io/samples/network-information/
+[fast-light]: /optimizing-content-efficiency-save-data/
+[mse-basics]: https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API
+[preload]: /video-and-source-tags/#preload
+[thats-a-known-fact]: https://www.digitaltrends.com/web/buffer-rage/
+[browser-compatibility]: https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility
+[android-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=612909
diff --git a/src/site/content/en/blog/fetch-metadata/cross-origin-request.png b/src/site/content/en/blog/fetch-metadata/cross-origin-request.png
deleted file mode 100644
index 9f0581100ec..00000000000
Binary files a/src/site/content/en/blog/fetch-metadata/cross-origin-request.png and /dev/null differ
diff --git a/src/site/content/en/blog/fetch-metadata/hero.jpg b/src/site/content/en/blog/fetch-metadata/hero.jpg
deleted file mode 100644
index ed54d731269..00000000000
Binary files a/src/site/content/en/blog/fetch-metadata/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/fetch-metadata/index.md b/src/site/content/en/blog/fetch-metadata/index.md
index a7efb9eac9b..b9456f14960 100644
--- a/src/site/content/en/blog/fetch-metadata/index.md
+++ b/src/site/content/en/blog/fetch-metadata/index.md
@@ -1,23 +1,25 @@
 ---
-title: Protect your resources from web attacks with Fetch Metadata 
+title: Protect your resources from web attacks with Fetch Metadata
 subhead: Prevent CSRF, XSSI, and cross-origin information leaks.
 authors:
   - lwe
 date: 2020-06-04
-updated: 2020-06-10
-hero: hero.jpg
+updated: 2023-06-10
+hero: image/admin/El8ytnIgMDWVzdsglcfv.jpg
 alt: A screenshot of Python code related to Resource Isolation Policy.
 description: |
   Fetch Metadata is a new web platform feature designed to allow servers to protect themselves from cross-origin attacks.
 tags:
   - blog
   - security
-  - fetch-metadata
+  # - fetch-metadata
+feedback:
+  - api
 ---
 
 ## Why should you care about isolating your web resources?
 
-Many web applications are vulnerable to [cross-origin](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22) attacks like [cross-site request forgery](https://portswigger.net/web-security/csrf) (CSRF), [cross-site script inclusion](https://portswigger.net/research/json-hijacking-for-the-modern-web) (XSSI), timing attacks, [cross-origin information leaks](https://arxiv.org/pdf/1908.02204.pdf) or speculative execution side-channel ([Spectre](https://developers.google.com/web/updates/2018/02/meltdown-spectre)) attacks.
+Many web applications are vulnerable to [cross-origin](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22) attacks like [cross-site request forgery](https://portswigger.net/web-security/csrf) (CSRF), [cross-site script inclusion](https://portswigger.net/research/json-hijacking-for-the-modern-web) (XSSI), timing attacks, [cross-origin information leaks](https://arxiv.org/pdf/1908.02204.pdf) or speculative execution side-channel ([Spectre](https://developer.chrome.com/blog/meltdown-spectre/)) attacks.
 
 [Fetch Metadata](https://www.w3.org/TR/fetch-metadata/) request headers allow you to deploy a strong defense-in-depth mechanism—a Resource Isolation Policy—to protect your application against these common cross-origin attacks.
 
@@ -25,19 +27,20 @@ It is common for resources exposed by a given web application to only be loaded
 
 ## Browser compatibility {: #compatibility }
 
-Fetch Metadata request headers are supported as of Chrome 76 and in other Chromium-based browsers, and are under development in Firefox.
-See [Browser compatibility](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site#Browser_compatibility) for up-to-date browser support information.
+Fetch Metadata request headers are supported in all modern browser engines.
+
+{% BrowserCompat 'http.headers.Sec-Fetch-Site' %}
 
 ## Background
 
-Many cross-site attacks are possible because the web is open by default and your application server cannot easily protect itself from communication originating from external applications. 
+Many cross-site attacks are possible because the web is open by default and your application server cannot easily protect itself from communication originating from external applications.
 A typical cross-origin attack is cross-site request forgery (CSRF) where an attacker lures a user onto a site they control and then submits a form to the server the user is logged in to. Since the server cannot tell if the request originated from another domain (cross-site) and the browser automatically attaches cookies to cross-site requests, the server will execute the action requested by the attacker on behalf of the user.
 
 Other cross-site attacks like cross-site script inclusion (XSSI) or cross-origin information leaks are similar in nature to CSRF and rely on loading resources from a victim application in an attacker-controlled document and leaking information about the victim applications. Since applications cannot easily distinguish trusted requests from untrusted ones, they cannot discard malicious cross-site traffic.
 
 {% Aside 'gotchas' %}
 Apart from attacks on resources as described above, *window references* can also lead to cross-origin information leaks and Spectre attacks. You can prevent them by setting the `Cross-Origin-Opener-Policy` response header to `same-origin`.
-{% endAside %} 
+{% endAside %}
 
 ## Introducing Fetch Metadata {: #introduction }
 
@@ -48,7 +51,9 @@ Fetch Metadata request headers are a new web platform security feature designed
 Requests originating from sites served by your own server (same-origin) will continue to work.
 {% endCompareCaption %}
 
-![A fetch request from https://site.example for the resource https://site.example/foo.json in JavaScript causes the browser to send the HTTP request header "Sec Fetch-Site: same-origin".](same-origin-request.png)
+<!--lint disable no-literal-urls-->
+{% Img src="image/admin/aRsy2xULTR4TM2sMMsbQ.png", alt="A fetch request from https://site.example for the resource https://site.example/foo.json in JavaScript causes the browser to send the HTTP request header 'Sec Fetch-Site: same-origin'.", width="800", height="176" %}
+<!--lint enable no-literal-urls-->
 
 {% endCompare %}
 
@@ -58,7 +63,9 @@ Requests originating from sites served by your own server (same-origin) will con
 Malicious cross-site requests can be rejected by the server because of the additional context in the HTTP request provided by `Sec-Fetch-*` headers.
 {% endCompareCaption %}
 
-![An image on https://evil.example that has set the src attribute of an img element to "//site.example/foo.json" causes the browser to send the HTTP request header "Sec-Fetch-Site: cross-site".](cross-origin-request.png)
+<!--lint disable no-literal-urls-->
+{% Img src="image/admin/xY4yB36JqsVw62wNMIWt.png", alt="An image on https://evil.example that has set the src attribute of an img element to 'https://site.example/foo.json' causes the browser to send the HTTP request header 'Sec-Fetch-Site: cross-site'.", width="800", height="171" %}
+<!--lint enable no-literal-urls-->
 
 {% endCompare %}
 
@@ -66,7 +73,9 @@ Malicious cross-site requests can be rejected by the server because of the addit
 
 ### `Sec-Fetch-Site`
 
-`Sec-Fetch-Site` tells the server which [site](https://web.dev/same-site-same-origin) sent the request. The browser sets this value to one of the following:
+{% BrowserCompat 'http.headers.Sec-Fetch-Site' %}
+
+`Sec-Fetch-Site` tells the server which [site](/same-site-same-origin) sent the request. The browser sets this value to one of the following:
 
  - `same-origin`, if the request was made by your own application (e.g. `site.example`)
  - `same-site`, if the request was made by a subdomain of your site (e.g. `bar.site.example`)
@@ -75,10 +84,14 @@ Malicious cross-site requests can be rejected by the server because of the addit
 
 ### `Sec-Fetch-Mode`
 
+{% BrowserCompat 'http.headers.Sec-Fetch-Mode' %}
+
 `Sec-Fetch-Mode` indicates the [mode](https://developer.mozilla.org/docs/Web/API/Request/mode) of the request. This roughly corresponds to the type of the request and allows you to distinguish resource loads from navigation requests. For example, a destination of `navigate` indicates a top-level navigation request while `no-cors` indicates resource requests like loading an image.
 
 ### `Sec-Fetch-Dest`
 
+{% BrowserCompat 'http.headers.Sec-Fetch-Dest' %}
+
 `Sec-Fetch-Dest` exposes a request's [destination](https://developer.mozilla.org/docs/Web/API/Request/destination) (e.g. if a `script` or an `img` tag caused a resource to be requested by the browser).
 
 ## How to use Fetch Metadata to protect against cross-origin attacks
@@ -102,11 +115,6 @@ if not req['sec-fetch-site']:
   return True  # Allow this request
  ```
 
-{% Aside 'caution' %}
-Since Fetch Metadata is only supported in modern browsers, it should be used as a [defense-in-depth protection](https://static.googleusercontent.com/media/landing.google.com/en//sre/static/pdf/Building_Secure_and_Reliable_Systems.pdf#page=181) and not as your primary line of defense.
-{% endAside %}
-
-
 #### Step 2: Allow same-site and browser-initiated requests
 
 Any requests that do not originate from a cross-origin context (like `evil.example`) will be allowed. In particular, these are requests that:
@@ -121,12 +129,12 @@ if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
 ```
 
 {% Aside 'gotchas' %}
-In case your subdomains are not fully trusted, you can make the policy stricter by blocking requests from subdomains by removing the `same-site` value. 
-{% endAside %} 
+In case your subdomains are not fully trusted, you can make the policy stricter by blocking requests from subdomains by removing the `same-site` value.
+{% endAside %}
 
 #### Step 3: Allow simple top-level navigation and iframing
 
-To ensure that your site can still be linked from other sites, you have to allow simple (`HTTP GET`) top-level navigation.  
+To ensure that your site can still be linked from other sites, you have to allow simple (`HTTP GET`) top-level navigation.
 
 ```python
 if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
@@ -135,11 +143,11 @@ if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
     return True  # Allow this request
 ```
 {% Aside 'gotchas' %}
-The logic above protects your application's endpoints from being used as resources by other websites, but will permit top-level navigation and embedding (e.g. loading in an <iframe>). To further improve security, you can use Fetch Metadata headers to restrict cross-site navigations to only an allowed set of pages.
-{% endAside %} 
+The logic above protects your application's endpoints from being used as resources by other websites, but will permit top-level navigation and embedding (e.g. loading in an `<iframe>`). To further improve security, you can use Fetch Metadata headers to restrict cross-site navigations to only an allowed set of pages.
+{% endAside %}
 
 
-#### Step 4: Opt out endpoints that are meant to serve cross-site traffic (Optional) 
+#### Step 4: Opt out endpoints that are meant to serve cross-site traffic (Optional)
 
 In some cases, your application might provide resources which are meant to be loaded cross-site. These resources need to be exempted on a per-path or per-endpoint basis. Examples of such endpoints are:
 
@@ -201,14 +209,15 @@ def allow_request(req):
 ### Identifying and fixing policy violations
 
 It's recommended that you test your policy in a side-effect free way by first enabling it in reporting mode in your server-side code. Alternatively, you can implement this logic in middleware, or in a reverse proxy which logs any violations that your policy might produce when applied to production traffic.
- 
+
 From our experience of rolling out a Fetch Metadata Resource Isolation Policy at Google, most applications are by default compatible with such a policy and rarely require exempting endpoints to allow cross-site traffic.
 
 ### Enforcing a Resource Isolation Policy
+
 After you've checked that your policy doesn't impact legitimate production traffic, you're ready to enforce restrictions, guaranteeing that other sites will not be able to request your resources and protecting your users from cross-site attacks.
 
 {% Aside 'caution' %}
-Make sure that you reject invalid requests before running authentication checks or any other processing of the request to prevent revealing sensitive timing information. 
+Make sure that you reject invalid requests before running authentication checks or any other processing of the request to prevent revealing sensitive timing information.
 {% endAside %}
 
 
@@ -218,4 +227,4 @@ Make sure that you reject invalid requests before running authentication checks
 - [Fetch Metadata Playground](https://secmetadata.appspot.com/)
 - [Google I/O talk: Securing Web Apps with Modern Platform Features](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf) (Slides)
 
-{% YouTube 'DDtM9caQ97I', '1856' %} 
+{% YouTube id='DDtM9caQ97I', startTime='1856' %}
diff --git a/src/site/content/en/blog/fetch-metadata/same-origin-request.png b/src/site/content/en/blog/fetch-metadata/same-origin-request.png
deleted file mode 100644
index 4c80dd0cb33..00000000000
Binary files a/src/site/content/en/blog/fetch-metadata/same-origin-request.png and /dev/null differ
diff --git a/src/site/content/en/blog/fetch-upload-streaming/hero.jpg b/src/site/content/en/blog/fetch-upload-streaming/hero.jpg
deleted file mode 100644
index 08e1980527d..00000000000
Binary files a/src/site/content/en/blog/fetch-upload-streaming/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/fetch-upload-streaming/index.md b/src/site/content/en/blog/fetch-upload-streaming/index.md
deleted file mode 100644
index f5f5d6c38a8..00000000000
--- a/src/site/content/en/blog/fetch-upload-streaming/index.md
+++ /dev/null
@@ -1,361 +0,0 @@
----
-layout: post
-title: Streaming requests with the fetch API
-authors:
-  - jakearchibald
-description: >
-  Chrome 85 has an experimental implementation of streaming uploads, which you
-  can use on live sites using the origin trial.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/-7680889164480380927
-date: 2020-07-22
-updated: 2020-07-22
-hero: hero.jpg
-alt: A canoe pointed up stream.
-tags:
-  - blog
-  - network
-  - service-worker
----
-
-Chrome 85 has an experimental implementation of request streams, meaning you can
-start making a request before you have the whole body available.
-
-You could use this to:
-
-- Warm up the server. In other words, you could start the request once the user
-  focuses a text input field, and get all of the headers out of the way, then
-  wait until the user presses 'send' before sending the data they entered.
-- Gradually send data generated on the client, such as audio, video, or input data.
-- Recreate web sockets over HTTP.
-
-But since this is a low-level web platform feature, don't be limited by _my_ ideas.
-Maybe you can think of a much more exciting use-case for request streaming.
-
-## Try out request streams
-
-### Enabling support during the origin trial phase
-
-Fetch request streams are available in an origin trial as of Chrome 85. The
-origin trial is expected to end in Chrome 87.
-
-{% include 'content/origin-trials.njk' %}
-
-### Register for the origin trial {: #register-for-ot }
-
-{% include 'content/origin-trial-register.njk' %}
-
-### Enabling via chrome://flags {: #enable-flags }
-
-Try out request streams in Chrome 85 by flipping an experimental flag:
-`enable-experimental-web-platform-features`.
-
-## Demo {: #demo }
-
-{% Glitch {
-  id: 'fetch-request-stream',
-  path: 'index.html',
-  height: 480
-} %}
-
-This shows how you can stream data from the user to the server, and send data
-back that can be processed in real time.
-
-Yeah ok it isn't the most imaginative example, I just wanted to keep it simple,
-okay?
-
-Anyway, how does this work?
-
-## Previously on the exciting adventures of fetch streams
-
-_Response_ streams have been available in all modern browsers for a while now.
-They allow you to access parts of a response as they arrive from the server:
-
-```js
-const response = await fetch(url);
-const reader = response.body.getReader();
-
-while (true) {
-  const { value, done } = await reader.read();
-  if (done) break;
-  console.log('Received', value);
-}
-
-console.log('Response fully received');
-```
-
-Each `value` is a `Uint8Array` of bytes. The number of arrays you get and the
-size of the arrays depends on the speed of the network. If you're on a fast
-connection, you'll get fewer, larger 'chunks' of data. If you're on a slow
-connection, you'll get more, smaller chunks.
-
-If you want to convert the bytes into text, you can use
-[`TextDecoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/decode),
-or the newer transform stream if your [target browsers support
-it](https://caniuse.com/#feat=mdn-api_textdecoderstream):
-
-```js
-const response = await fetch(url);
-const reader = response.body
-  .pipeThrough(new TextDecoderStream())
-  .getReader();
-```
-
-`TextDecoderStream` is a transform stream that grabs all those `Uint8Array`
-chunks and converts them to strings.
-
-Streams are great, as you can start acting on the data as it arrives. For
-instance, if you're receiving a list of 100 'results', you can display the first
-result as soon as you receive it, rather than waiting for all 100.
-
-Anyway, that's response streams, the exciting new thing I wanted to talk about
-is request streams.
-
-## Streaming request bodies
-
-Requests can have bodies:
-
-```js
-await fetch(url, {
-  method: 'POST',
-  body: requestBody,
-});
-```
-
-Previously, you needed the whole body ready to go before you could start the
-request, but now in Chrome 85 you can provide your own `ReadableStream` of data:
-
-```js
-function wait(milliseconds) {
-  return new Promise((resolve) => setTimeout(resolve, milliseconds));
-}
-
-const stream = new ReadableStream({
-  async start(controller) {
-    await wait(1000);
-    controller.enqueue('This ');
-    await wait(1000);
-    controller.enqueue('is ');
-    await wait(1000);
-    controller.enqueue('a ');
-    await wait(1000);
-    controller.enqueue('slow ');
-    await wait(1000);
-    controller.enqueue('request.');
-    controller.close();
-  },
-}).pipeThrough(new TextEncoderStream());
-
-fetch(url, {
-  method: 'POST',
-  headers: { 'Content-Type': 'text/plain' },
-  body: stream,
-});
-```
-
-The above will send "This is a slow request" to the server, one word at a time,
-with a one second pause between each word.
-
-Each chunk of a request body needs to be a `Uint8Array` of bytes, so I'm using
-`pipeThrough(new TextEncoderStream())` to do the conversion for me.
-
-### Writable streams
-
-Sometimes it's easier to work with streams when you have a `WritableStream`. You can do this using an 'identity' stream, which is a readable/writable pair that takes anything that's passed to its writable end, and sends it to the readable end. You can create one of these by creating a `TransformStream` without any arguments:
-
-```js
-const { readable, writable } = new TransformStream();
-
-const responsePromise = fetch(url, {
-  method: 'POST',
-  body: readable,
-});
-```
-
-Now, anything you send to the writable stream will be part of the request. This
-lets you compose streams together. For instance, here's a silly example where
-data is fetched from one URL, compressed, and sent to another URL:
-
-```js
-// Get from url1:
-const response = await fetch(url1);
-const { readable, writable } = new TransformStream();
-
-// Compress the data from url1:
-response.body
-  .pipeThrough(new CompressionStream('gzip'))
-  .pipeTo(writable);
-
-// Post to url2:
-await fetch(url2, {
-  method: 'POST',
-  body: readable,
-});
-```
-
-The above example uses [compression
-streams](https://chromestatus.com/feature/5855937971617792) to compress
-arbitrary data using gzip.
-
-### Feature detection
-
-If you provide a body object that the browser doesn't specifically handle, it
-will call `toString()` on the object and use the result as the body. If the
-browser doesn't support request streams, that means the request body becomes
-`"[object ReadableStream]"` – probably not what you want to send to the server.
-To avoid this, use feature detection:
-
-```js
-const supportsRequestStreams = !new Request('', {
-  body: new ReadableStream(),
-  method: 'POST',
-}).headers.has('Content-Type');
-
-if (supportsRequestStreams) {
-  // …
-} else {
-  // …
-}
-```
-
-{% Aside %}
-This works because the browser adds a `Content-Type` header of
-`text/plain;charset=UTF-8` to the request if the body is text. The browser only
-treats the body as text if it _doesn't_ support request streams, otherwise it
-won't add a `Content-Type` header at all.
-{% endAside %}
-
-## Restrictions
-
-Streaming requests are a new power for the web, so they come with a few
-restrictions:
-
-### Restricted redirects
-
-Some forms of HTTP redirect require the browser to resend the body of the
-request to another URL. To support this, the browser would have to buffer the
-contents of the stream, which sort-of defeats the point, so it doesn't do that.
-
-Instead, if the request has a streaming body, and the response is an HTTP
-redirect other than 303, the fetch will reject and the redirect will _not_ be
-followed.
-
-303 redirects are allowed, since they explicitly change the method to `GET` and
-discard the request body.
-
-### HTTP/2 only by default
-
-By default, the fetch will be rejected if the connection isn't HTTP/2. If you
-want to use streaming requests over HTTP/1.1, you need to opt in:
-
-```js/3-3
-await fetch(url, {
-  method: 'POST',
-  body: stream,
-  allowHTTP1ForStreamingUpload: true,
-});
-```
-
-{% Aside 'caution' %}
-`allowHTTP1ForStreamingUpload` is non-standard and will only be used as part of
-Chrome's experimental implementation.
-{% endAside %}
-
-According to HTTP/1.1 rules, request and response bodies either need to send a
-`Content-Length` header, so the other side knows how much data it'll receive, or
-change the format of the message to use [chunked
-encoding](https://en.wikipedia.org/wiki/Chunked_transfer_encoding). With chunked
-encoding, the body is split into parts, each with their own content length.
-
-Chunked encoding is pretty common when it comes to HTTP/1.1 _responses_, but
-very rare when it comes to _requests_. Because of this, Chrome is a little worried
-about compatibility, so it's opt-in for now.
-
-{% Aside %}
-This isn't an issue for HTTP/2, as HTTP/2 data is always 'chunked', although it
-calls the chunks
-[frames](https://developers.google.com/web/fundamentals/performance/http2#streams_messages_and_frames).
-Chunked encoding wasn't introduced until HTTP/1.1, so requests with streaming
-bodies will always fail on HTTP/1 connections.
-{% endAside %}
-
-Depending on how this trial goes, the spec will either restrict streaming
-responses to HTTP/2, or always allow it for both HTTP/1.1 and HTTP/2.
-
-### No duplex communication
-
-A little-known feature of HTTP (although, whether this is standard behaviour
-depends on who you ask) is that you can start receiving the response while
-you're still sending the request. However, it's so little-known, that it isn't
-well supported by servers, and, well, browsers.
-
-In Chrome's current implementation, you won't get the response until the body
-has been fully sent. In the following example `responsePromise` won't resolve
-until the readable stream has been closed. Anything the server sends before that
-point will be buffered.
-
-```js
-const responsePromise = fetch(url, {
-  method: 'POST',
-  body: readableStream,
-});
-```
-
-The next best thing to duplex communication is to make one fetch with a
-streaming request, then make another fetch to receive the streaming response.
-The server will need some way to associate these two requests, like an ID in the
-URL. That's how the [demo](#demo) works.
-
-## Potential issues
-
-Yeah, so… this is a new feature, and one that's underused on the internet today.
-Here are some issues to look out for:
-
-### Incompatibility on the server side
-
-Some app servers don't support streaming requests, and instead wait for the full
-request to be received before letting you see any of it, which kinda defeats the
-point. Instead, use an app server that supports streaming, like
-[NodeJS](https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_class_http_incomingmessage).
-
-But, you're not out of the woods yet! The application server, such as NodeJS,
-usually sits behind another server, often called a "front-end server", which may
-in turn sit behind a CDN. If any of those decide to buffer the request before
-giving it to the next server in the chain, you lose the benefit of request
-streaming.
-
-Also, if you're using HTTP/1.1, one of the servers may not be prepared for
-chunked encoding, and may fail with an error. But hey, at least you can test
-that and try to change servers if needed.
-
-_…long sigh…_
-
-### Incompatibility outside of your control
-
-If you're using HTTPS you don't need to worry about proxies between you and the
-user, but the user may be running a proxy on their machine. Some internet
-protection software does this to allow it to monitor everything that goes
-between the browser and network.
-
-There may be cases where this software buffers request bodies, or in the case of
-HTTP/1.1, doesn't expect chunked encoding, and breaks in some exciting way.
-
-Right now, it's not clear how often this will happen, if at all.
-
-If you want to protect against this, you can create a 'feature test' similar to
-the [demo above](#demo), where you try to stream some data without closing the
-stream. If the server receives the data, it can respond via a different fetch.
-Once this happens, you know the client supports streaming requests end-to-end.
-
-## Feedback welcome
-
-Feedback from the community is crucial to the design of new APIs, so please try
-it out and tell us what you think! If you encounter any bugs, please [report
-them](https://bugs.chromium.org/p/chromium/issues/list), but if you have general
-feedback, please send it to the [blink-network-dev Google
-Group](https://groups.google.com/a/chromium.org/forum/#!forum/blink-network-dev).
-
-Photo by [Laura
-Lefurgey-Smith](https://unsplash.com/@lauralefurgeysmith?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
-on
-[Unsplash](https://unsplash.com/s/photos/canoe-stream?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
diff --git a/src/site/content/en/blog/field-data-in-the-web-vitals-extension/index.md b/src/site/content/en/blog/field-data-in-the-web-vitals-extension/index.md
new file mode 100644
index 00000000000..1835e098d64
--- /dev/null
+++ b/src/site/content/en/blog/field-data-in-the-web-vitals-extension/index.md
@@ -0,0 +1,171 @@
+---
+title: Find your way with field data in the Web Vitals extension update
+subhead: The Web Vitals extension now shows you where your local experiences are in relation to
+  real user experiences in the field.
+description: The Web Vitals extension now shows you where your local experiences are in relation
+  to real user experiences in the field.
+authors:
+  - rviscomi
+date: 2021-07-02
+hero: image/STd8eW8CSiNp5B1bX0R6Dww2eH32/KwcWeCZ6LoIfTLRgVxp4.png
+alt: The Milky Way galaxy with a pin labeled You Are Here.
+tags:
+  - blog
+  - web-vitals
+  - chrome-ux-report
+  - tools
+---
+
+[Core Web Vitals](/vitals) are the most important metrics to measure to
+understand your users' experiences, because when users have good experiences,
+[good things happen](https://wpostats.com/)! The [Web Vitals extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)
+for Chrome is one tool in the [Web Vitals toolbox](/vitals-tools/) that shows you
+performance data about the pages you visit as you browse the web.
+
+Page performance depends on many factors, including hardware and network quality. How
+you experience a page on your machine may be very different from how the majority of users
+experience it. That's why version 1.0 of the Web Vitals extension includes a new feature
+that integrates real-user data from the [Chrome UX Report](/chrome-ux-report/) (CrUX)
+with your local Core Web Vitals measurements. This feature displays your local measurements
+in the context of how other users have experienced the same pages. It comes with
+a sparkly new UI and I'm excited to show you how it works.
+
+{% Video
+  src="video/STd8eW8CSiNp5B1bX0R6Dww2eH32/EFeVK6dAwBZWzKhqBd1Y.mp4",
+  height="493",
+  width="800",
+  controls="true",
+  loop="true",
+  muted="true",
+  preload="auto" %}
+
+## Field data from CrUX
+
+CrUX is a public dataset of real-user experiences in Chrome. It powers some of the critical tools
+in the Core Web Vitals workflow like [Search Console](https://support.google.com/webmasters/answer/9205520#about_data)
+and [PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/about#crux).
+The raw data for millions of websites is also publicly queryable in the [CrUX dataset on BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery)
+and the [CrUX API](https://developer.chrome.com/blog/chrome-ux-report-api). This Web Vitals extension update
+integrates the page and origin-level desktop data from the CrUX API.
+
+User experience data is broken down into three qualitative ratings: good, needs improvement, and poor.
+The thresholds used for each rating are documented in the guides for each of the Core Web Vitals
+metrics: [LCP](/lcp/#what-is-lcp), [FID](/fid/#what-is-fid), and
+[CLS](/cls/#what-is-a-good-cls-score). So for example, the CrUX API can tell you that
+16% of real-user experiences on a given page are evaluated as having good
+<span style="white-space: nowrap;">LCP under 2.5</span> seconds.
+
+## New extension UI
+
+<figure>
+{% Img src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/EaVNEuQ6gxVLtHYNkSZj.png", alt="Screenshot of the
+Web Vitals extension showing an explanation of how the local LCP experience relates to real-user
+desktop data from the field.", width="800", height="549" %}
+  <figcaption>
+    Screenshot of the Web Vitals extension showing an explanation of how the local LCP experience
+    relates to real-user desktop data from the field.
+  </figcaption>
+</figure>
+
+In the new Web Vitals extension interface, your local experience is layered on
+top of the broader distribution of real-user experiences. It's like when you're in an expansive
+place like a shopping mall and there's a big map with all of the stores and a pin labeled
+"YOU ARE HERE" to help you orient yourself and find where you're going.
+
+The distributions of real-user data from CrUX are laid out on a horizontal bar for each metric.
+Your local experiences are displayed as single points on those horizontal bars. The position of
+your local experience on the horizontal bar indicates where that experience falls relative to the
+real-user distributions. This should make it immediately apparent when your local
+experience is very different from other users'. For example, if you have a slow LCP experience and
+only 1% of users have similar experiences, something unusual must have happened.
+
+## Falling back to origin-level data
+
+<figure>
+{% Img src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/t5SmXUJqJadNsyOi26bb.png", alt="Screenshot of the
+Web Vitals extension showing origin-level desktop field data with \"Waiting for input…\" for the
+FID results.", width="800", height="552" %}
+  <figcaption>
+    Screenshot of the Web Vitals extension showing origin-level desktop field data with
+    "Waiting for input…" for the FID results.
+  </figcaption>
+</figure>
+
+Some pages don't have URL-level data in the CrUX dataset. This can happen
+because the page is so new that it hasn't been picked up yet or because the page has insufficient
+traffic to be included in the dataset. In cases like these, Web Vitals extension falls back to more
+granular origin-level data whenever possible. This data represents the aggregate user experiences
+on all pages of the website, so while it may not be immediately relevant to your particular page
+experience, it should still offer some insight into how users experience the site as a whole.
+
+Another common case is to see a "Waiting for input&hellip;" message. This is because FID is the only
+Core Web Vital that requires user interaction to be measured, so the extension won't have any local FID data
+to show until you interact with the page.
+
+## Edge cases
+
+<figure>
+{% Img src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/qt6fmKIjPNrUsckKiUfS.png", alt="Screenshot of the
+Web Vitals extension showing only local data; field data is unavailable.",
+width="800", height="548" %}
+  <figcaption>
+    Screenshot of the Web Vitals extension showing only local data; field data is unavailable.
+  </figcaption>
+</figure>
+
+There are some less common edge cases that you may run into while using the extension.
+
+It can happen that entire origins have insufficient data. In that case, the extension will just show you
+how your local experiences performed.
+
+How you interact with the page may also affect the relevance of the data. For example, loading the
+page in a background tab will count against the LCP metric the entire time until you foreground the page.
+If it takes you 90 seconds to switch to the tab, the LCP might appear as 91.5 seconds. When this happens, a little
+warning icon will appear next to your LCP value to warn you of the artificial inflation. Note that
+these kinds of irrelevant LCP values are ignored in the CrUX dataset.
+
+One last edge case to be aware of is specific to FID. Because it depends on user interactions, that makes it
+less likely to be available in the dataset for pages and websites with fewer page views. So if you're
+visiting a page like that, you may only see field data for LCP and CLS. It's worth noting for the
+sake of completeness that the same could happen for LCP or CLS in extremely rare situations, but
+this issue is predominantly affected by FID.
+
+## Comparing field data from phones
+
+<figure>
+{% Img src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/0K0g0TD22jdNZpSe3s3p.png", alt="Screenshot of the
+Web Vitals extension showing local metrics compared to phone field data.",
+width="800", height="556" %}
+  <figcaption>
+    Screenshot of the Web Vitals extension showing local metrics compared to phone field data.
+  </figcaption>
+</figure>
+
+By default, all of the data in the Web Vitals extension corresponds to real desktop users'
+experiences from the field. After all, this extension is only available on desktop versions of
+Chrome, so it'd be most relevant to see how users under similar conditions experience the
+page or origin.
+
+It's important to understand phone users' experiences too, so the extension has an advanced setting on
+the Options page that lets you see how your local experience compares to phone data from the field.
+
+To enable phone data in the extension, follow these steps:
+
+1. Right click on the extension icon in the toolbar and select **Options**.
+2. Check the **Compare local experiences to phone field data** option.
+
+The UI will update in a few places to indicate which mode you're in. Be aware that real phone
+users' experiences can be _very different_ from that of desktop users, so use this feature with discretion.
+
+## Get the Web Vitals extension
+
+To start using the latest version of the Web Vitals extension, head over to the
+[Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)
+to install it. Or if you're an existing user of the extension, you should be upgraded to
+version 1.0 automatically. If you have any feedback about your experience with the extension
+(feature requests, bug reports, anything), let us know in the
+[open-source repository](https://github.com/GoogleChrome/web-vitals-extension) on GitHub.
+I hope it helps you better understand where your local experiences are in relation to other
+real users from the field!
+
+_Image credit: Mark Garlick/Science Photo Library/Getty Images_
diff --git a/src/site/content/en/blog/filesystem-sync/index.md b/src/site/content/en/blog/filesystem-sync/index.md
new file mode 100644
index 00000000000..daebb335b81
--- /dev/null
+++ b/src/site/content/en/blog/filesystem-sync/index.md
@@ -0,0 +1,461 @@
+---
+title: The synchronous FileSystem API for workers
+authors:
+  - ericbidelman
+date: 2011-10-25
+updated: 2013-07-30
+tags:
+  - blog
+---
+
+## Introduction
+
+The HTML5 [FileSystem API][fs-spec] and [Web Workers][workers-spec] are massively
+powerful in their own regard. The FileSystem API finally brings hierarchical storage and
+file I/O to web applications and Workers bring true asynchronous 'multi-threading'
+to JavaScript. However, when you use these APIs together, you can build some truly interesting apps.
+
+This tutorial provides a guide and code examples for leveraging the HTML5
+FileSystem inside of a Web Worker. It assumes a working knowledge of
+both APIs. If you're not quite ready to dive in or are interested in learning
+more about those APIs, read two great tutorials that discuss the basics:
+[Exploring the FileSystem APIs](https://www.html5rocks.com/tutorials/file/filesystem/) and
+[Basics of Web Workers](https://www.html5rocks.com/tutorials/workers/basics/).
+
+## Synchronous vs. Asynchronous APIs
+
+Asynchronous JavaScript APIs can be tough to use. They're large. They're complex.
+But what's most frustrating is that they offer plenty of opportunities for things to go wrong.
+The last thing you want to deal with is layering on a complex asynchronous API (FileSystem)
+in an already asynchronous world (Workers)! The good news is that the
+[FileSystem API][fs-spec] defines a synchronous version to ease the pain in Web Workers.
+
+For the most part, the synchronous API is exactly the same as its asynchronous cousin.
+The methods, properties, features, and functionality will be familiar. The major deviations are:
+
+* The synchronous API can only be used within a Web Worker context, whereas the
+asynchronous API can be used in and out of a Worker.
+* Callbacks are out. API methods now return values.
+* The global methods on the window object (`requestFileSystem()` and
+`resolveLocalFileSystemURL()`) become `requestFileSystemSync()` and
+`resolveLocalFileSystemSyncURL()`.
+
+{% Aside %}
+These methods are members of the
+worker's global scope, not the `window` object.
+{% endAside %}
+
+Apart from these exceptions, the APIs are the same. OK, we're good to go!
+
+## Requesting a filesystem
+
+A web application obtains access to the synchronous filesystem by requesting a
+`LocalFileSystemSync` object from within a Web Worker. The `requestFileSystemSync()`
+is exposed to the Worker's global scope:
+
+```js
+var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);
+```
+
+Notice the new return value now that we're using the synchronous API as well as
+the absence of success and error callbacks.
+
+As with the normal FileSystem API, methods are prefixed at the moment:
+
+```js
+self.requestFileSystemSync = self.webkitRequestFileSystemSync ||
+                                 self.requestFileSystemSync;
+```
+
+### Dealing with quota
+
+Currently, it's not possible to [request `PERSISTENT` quota](https://www.html5rocks.com/tutorials/file/filesystem/#toc-requesting-quota) in a Worker context. I recommend taking care of quota issues outside of Workers.
+The process could look like something this:
+
+1.  worker.js: Wrap any FileSystem API code in a `try/catch` so any
+`QUOTA_EXCEED_ERR` errors are caught.
+1. worker.js: If you catch a `QUOTA_EXCEED_ERR`, send a `postMessage('get me more quota')` back to the main app.
+1. main app: Go through the `window.webkitStorageInfo.requestQuota()` dance when #2 is received.
+1. main app: After the user grants more quota, send `postMessage('resume writes')` back
+to the worker to inform it of additional storage space.
+
+That's a fairly involved workaround, but it should work. See [requesting quota](https://www.html5rocks.com/tutorials/file/filesystem/#toc-requesting-quota) for more information on using `PERSISTENT` storage with the FileSystem API.
+
+## Working with files and directories
+
+The synchronous version of `getFile()` and `getDirectory()` return a `FileEntrySync`
+and `DirectoryEntrySync`, respectively.
+
+For example, the following code creates an empty file called "log.txt" in the
+root directory.
+
+```js
+var fileEntry = fs.root.getFile('log.txt', {create: true});
+```
+
+The following creates a new directory in the root folder.
+
+```js
+var dirEntry = fs.root.getDirectory('mydir', {create: true});
+```
+
+## Handling errors
+
+If you've never had to debug Web Worker code, I envy you! It can be a real pain
+to figure out what is going wrong.
+
+The lack of error callbacks in the synchronous world makes dealing with problems
+trickier than they should be. If we add the general complexity of debugging Web Worker code,
+you'll be frustrated in no time. One thing that can make life easier is to wrap all
+of your relevant Worker code in a try/catch. Then, if any errors occur, forward
+the error to the main app using `postMessage()`:
+
+```js
+function onError(e) {
+    postMessage('ERROR: ' + e.toString());
+}
+
+try {
+    // Error thrown if "log.txt" already exists.
+    var fileEntry = fs.root.getFile('log.txt', {create: true, exclusive: true});
+} catch (e) {
+    onError(e);
+}
+```
+
+## Passing around Files, Blobs, and ArrayBuffers
+
+When Web Workers first came on the scene, they only allowed string data to be
+sent in `postMessage()`. Later, browsers began accepting serializable data, which
+meant passing a JSON object was possible. Recently however, some browsers like Chrome
+accept more complex data types to be passed through `postMessage()` using the
+[structured clone algorithm][structuredclone].
+
+What does this really mean? It means that it's a heck of a lot easier to pass
+binary data between main app and the Worker thread. Browsers that support structured cloning
+for Workers allow you to pass Typed Arrays, `ArrayBuffer`s, `File`s, or `Blob`s
+into Workers. Although the data is still a copy, being able to pass a `File` means
+a performance benefit over the former approach, which involved base64ing the file
+before passing it into `postMessage()`.
+
+The following example passes a user-selected list of files to an dedicated Worker.
+The Worker simply passes through the file list (simple to show the returned data
+is actually a `FileList`) and the main app reads each file as an `ArrayBuffer`.
+
+The sample also uses an improved version of the [inline Web Worker technique](https://www.html5rocks.com/tutorials/workers/basics/#toc-inlineworkers)
+described in [Basics of Web Workers](https://www.html5rocks.com/tutorials/workers/basics/).
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>Passing a FileList to a Worker</title>
+    <script type="javascript/worker" id="fileListWorker">
+    self.onmessage = function(e) {
+    // TODO: do something interesting with the files.
+    postMessage(e.data); // Pass through.
+    };
+    </script>
+</head>
+<body>
+</body>
+
+<input type="file" multiple>
+
+<script>
+document.querySelector('input[type="file"]').addEventListener('change', function(e) {
+    var files = this.files;
+    loadInlineWorker('#fileListWorker', function(worker) {
+
+    // Setup handler to process messages from the worker.
+    worker.onmessage = function(e) {
+
+        // Read each file aysnc. as an array buffer.
+        for (var i = 0, file; file = files[i]; ++i) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            console.log(this.result); // this.result is the read file as an ArrayBuffer.
+        };
+        reader.onerror = function(e) {
+            console.log(e);
+        };
+        reader.readAsArrayBuffer(file);
+        }
+
+    };
+
+    worker.postMessage(files);
+    });
+}, false);
+
+
+function loadInlineWorker(selector, callback) {
+    window.URL = window.URL || window.webkitURL || null;
+
+    var script = document.querySelector(selector);
+    if (script.type === 'javascript/worker') {
+    var blob = new Blob([script.textContent]);
+    callback(new Worker(window.URL.createObjectURL(blob));
+    }
+}
+</script>
+</html>
+```
+
+## Reading files in a Worker
+
+It's perfectly acceptable to use the asynchronous [`FileReader` API to read files](https://www.html5rocks.com/tutorials/file/dndfiles/#toc-reading-files) in a Worker. However, there's a better way. In Workers, there's a
+synchronous API (`FileReaderSync`) that streamlines reading files:
+
+*Main app:*
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Using FileReaderSync Example</title>
+    <style>
+    #error { color: red; }
+    </style>
+</head>
+<body>
+<input type="file" multiple />
+<output id="error"></output>
+<script>
+    var worker = new Worker('worker.js');
+
+    worker.onmessage = function(e) {
+    console.log(e.data); // e.data should be an array of ArrayBuffers.
+    };
+
+    worker.onerror = function(e) {
+    document.querySelector('#error').textContent = [
+        'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message].join('');
+    };
+
+    document.querySelector('input[type="file"]').addEventListener('change', function(e) {
+    worker.postMessage(this.files);
+    }, false);
+</script>
+</body>
+</html>
+```
+
+*worker.js*
+
+```js
+self.addEventListener('message', function(e) {
+    var files = e.data;
+    var buffers = [];
+
+    // Read each file synchronously as an ArrayBuffer and
+    // stash it in a global array to return to the main app.
+    [].forEach.call(files, function(file) {
+    var reader = new FileReaderSync();
+    buffers.push(reader.readAsArrayBuffer(file));
+    });
+
+    postMessage(buffers);
+}, false);
+```
+
+As expected, callbacks are gone with the synchronous `FileReader`. This simplifies
+the amount of callback nesting when reading files. Instead, the readAs* methods
+returns the read file.
+
+## Example: Fetching all entries
+
+In some cases, the synchronous API is much cleaner for certain tasks. Fewer callbacks
+are nice and certainly make things more readable. The real downside of the
+synchronous API stems from the limitations of Workers.
+
+For security reasons, data between the calling app and a Web Worker thread is
+never shared. Data is always copied to and from the Worker when `postMessage()` is called.
+As a result, not every data type can be passed.
+
+Unfortunately, `FileEntrySync` and `DirectoryEntrySync` don't currently fall
+into the accepted types. So how can you get entries back to the calling app?
+One way to circumvent the limitation is to return a list of [filesystem: URLs](https://www.html5rocks.com/tutorials/file/filesystem/#toc-filesystemurls) instead of a list of entries. `filesystem:` URLs are just strings,
+so they're super easy to pass around. Furthermore, they can be resolved to 
+entries in the main app using `resolveLocalFileSystemURL()`. That gets you back
+to a `FileEntrySync`/`DirectoryEntrySync` object.
+
+*Main app:*
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="chrome=1">
+<title>Listing filesystem entries using the synchronous API</title>
+</head>
+<body>
+<script>
+    window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||
+                                        window.webkitResolveLocalFileSystemURL;
+
+    var worker = new Worker('worker.js');
+    worker.onmessage = function(e) {
+    var urls = e.data.entries;
+    urls.forEach(function(url, i) {
+        window.resolveLocalFileSystemURL(url, function(fileEntry) {
+        console.log(fileEntry.name); // Print out file's name.
+        });
+    });
+    };
+
+    worker.postMessage({'cmd': 'list'});
+</script>
+</body>
+</html>
+```
+
+*worker.js*
+
+```js
+self.requestFileSystemSync = self.webkitRequestFileSystemSync ||
+                                self.requestFileSystemSync;
+
+var paths = []; // Global to hold the list of entry filesystem URLs.
+
+function getAllEntries(dirReader) {
+    var entries = dirReader.readEntries();
+
+    for (var i = 0, entry; entry = entries[i]; ++i) {
+    paths.push(entry.toURL()); // Stash this entry's filesystem: URL.
+
+    // If this is a directory, we have more traversing to do.
+    if (entry.isDirectory) {
+        getAllEntries(entry.createReader());
+    }
+    }
+}
+
+function onError(e) {
+    postMessage('ERROR: ' + e.toString()); // Forward the error to main app.
+}
+
+self.onmessage = function(e) {
+    var data = e.data;
+
+    // Ignore everything else except our 'list' command.
+    if (!data.cmd || data.cmd != 'list') {
+    return;
+    }
+
+    try {
+    var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);
+
+    getAllEntries(fs.root.createReader());
+
+    self.postMessage({entries: paths});
+    } catch (e) {
+    onError(e);
+    }
+};
+```
+
+## Example: Downloading files using XHR2
+
+A common use case for Workers is to download a bunch of files using [XHR2](https://www.html5rocks.com/tutorials/file/xhr2/),
+and write those files to the HTML5 FileSystem. This is a perfect task for a Worker thread!
+
+The following example only fetches and writes one file, but you can image
+expanding it to download a set of files.
+
+*Main app:*
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="chrome=1">
+<title>Download files using a XHR2, a Worker, and saving to filesystem</title>
+</head>
+<body>
+<script>
+    var worker = new Worker('downloader.js');
+    worker.onmessage = function(e) {
+    console.log(e.data);
+    };
+    worker.postMessage({fileName: 'GoogleLogo',
+                        url: 'googlelogo.png', type: 'image/png'});
+</script>
+</body>
+</html>
+```
+
+*downloader.js:*
+
+```js
+self.requestFileSystemSync = self.webkitRequestFileSystemSync ||
+                                self.requestFileSystemSync;
+
+function makeRequest(url) {
+    try {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false); // Note: synchronous
+    xhr.responseType = 'arraybuffer';
+    xhr.send();
+    return xhr.response;
+    } catch(e) {
+    return "XHR Error " + e.toString();
+    }
+}
+
+function onError(e) {
+    postMessage('ERROR: ' + e.toString());
+}
+
+onmessage = function(e) {
+    var data = e.data;
+
+    // Make sure we have the right parameters.
+    if (!data.fileName || !data.url || !data.type) {
+    return;
+    }
+    
+    try {
+    var fs = requestFileSystemSync(TEMPORARY, 1024 * 1024 /*1MB*/);
+
+    postMessage('Got file system.');
+
+    var fileEntry = fs.root.getFile(data.fileName, {create: true});
+
+    postMessage('Got file entry.');
+
+    var arrayBuffer = makeRequest(data.url);
+    var blob = new Blob([new Uint8Array(arrayBuffer)], {type: data.type});
+
+    try {
+        postMessage('Begin writing');
+        fileEntry.createWriter().write(blob);
+        postMessage('Writing complete');
+        postMessage(fileEntry.toURL());
+    } catch (e) {
+        onError(e);
+    }
+
+    } catch (e) {
+    onError(e);
+    }
+};
+```
+
+## Conclusion
+
+Web Workers are an underutilized and under-appreciated feature
+of HTML5. Most developers I talk to don't need the extra computational benefits, 
+but they can be used for more than just pure computation.
+If you're skeptical (as I was), I hope this article has helped change your mind.
+Offloading things like disc operations (Filesystem API calls) or HTTP requests to a Worker
+are a natural fit and also help compartmentalize your code. The HTML5 File APIs
+inside of Workers opens a whole new can of awesomeness for web apps that a lot of folks haven't explored.
+
+[fs-spec]: http://dev.w3.org/2009/dap/file-system/file-dir-sys.html
+[workers-spec]: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
+[structuredclone]: https://developer.mozilla.org/DOM/The_structured_clone_algorithm
\ No newline at end of file
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/airshift_visual.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/airshift_visual.png
deleted file mode 100755
index 508cacae5bf..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/airshift_visual.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hackathon.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hackathon.png
deleted file mode 100755
index b402cb8f6f1..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hackathon.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hero.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hero.png
deleted file mode 100644
index cb21258e277..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/index.md b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/index.md
index f66a5910083..0db6cc80265 100755
--- a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/index.md
+++ b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Five ways AirSHIFT improved their React app's runtime performance
 subhead: |
   A real-world case study of React SPA performance optimization.
@@ -8,9 +9,9 @@ authors:
   - yosuke_furukawa
   - satoshi_arai
   - kento_tsuji
-hero: hero.png
+hero: image/admin/LD0Xn6rMjbIo8nCziZhK.png
 alt: AirSHIFT's logo.
-thumbnail: thumbnail.png
+thumbnail: image/admin/hXPZqAroVuGdFYQd9RFZ.png
 description: |
   How the AirSHIFT team used table virtualization, RUM data, lazy loading, web workers,
   performance budgets, and hackathons to optimize their React app's runtime performance.
@@ -26,28 +27,29 @@ Website performance is not just about load time. It is critical to provide a fas
 
 AirSHIFT is a desktop web application that helps store owners, like restaurants and cafes, to manage the shift work of their staff members. Built with React, the single page application provides rich client features including various grid tables of shift schedules organized by day, week, month and more.
 
-<img class="w-screenshot" src="airshift_visual.png" alt="A screenshot of the AirSHIFT web app.">
+{% Img src="image/admin/q7g5sY2ix1oTwoPJX7qX.png", alt="A screenshot of the AirSHIFT web app.", width="800", height="626" %}
 
 As the Recruit Technologies engineering team added new features to the
 AirSHIFT app, they started seeing more feedback around slow performance.
 The engineering manager of AirSHIFT, Yosuke Furukawa, said:
 
-<blockquote class="w-blockquote">
-  In a user research study, we were shocked when one of the store owners said she
+<blockquote>
+  <p>In a user research study, we were shocked when one of the store owners said she
   would leave her seat to brew coffee after clicking a button, just to kill time waiting
-  for the shift table to load.
+  for the shift table to load.</p>
+  <cite></cite>
 </blockquote>
 
 After going through the research, the engineering team realized that many of their users were trying to load massive shift tables on low spec computers, such as a 1 GHz Celeron M laptop from 10 years ago.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/airshift-perf-optimization/endless_spinner_vp9.webm"
             type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/airshift-perf-optimization/endless_spinner_h264.mp4"
             type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     Endless spinner on low end devices.
   </figcaption>
 </figure>
@@ -56,10 +58,9 @@ The AirSHIFT app was blocking the main thread with expensive scripts,
 but the engineering team didn't realize how expensive the scripts were because they
 were developing and testing on rich spec computers with fast Wi-Fi connections.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="main-thread-break-down.png"
-       alt="A chart that shows the app's runtime activity.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/RAi3zG4JngSi0UlSMi0a.png", alt="A chart that shows the app's runtime activity.", width="800", height="476" %}
+  <figcaption>
     When loading the shift table, around 80% of the load time was consumed by running scripts.
   </figcaption>
 </figure>
@@ -76,20 +77,16 @@ Displaying the shift table required multiple expensive steps: constructing the v
 
 To reduce the cost of this operation, AirSHIFT virtualized the shift table. The app now only mounts the components within the viewport and unmounts the off-screen components.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="virtualize_before.png"
-       alt="An annotated screenshot that demonstrates that AirSHIFT used to render
-            content outside of the viewport.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QOVmOQa0Jryhg8tKPBFs.png", alt="An annotated screenshot that demonstrates that AirSHIFT used to render content outside of the viewport.", width="800", height="306" %}
+  <figcaption>
     Before: Rendering all the shift table cells.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="virtualize_after.png"
-       alt="An annotated screenshot that demonstrates that AirSHIFT now only renders content
-            that's visible in the viewport.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NLSdFKj1gpGBO82pfNNO.png", alt="An annotated screenshot that demonstrates that AirSHIFT now only renders content that's visible in the viewport.", width="800", height="307" %}
+  <figcaption>
     After: Only rendering the cells within the viewport.
   </figcaption>
 </figure>
@@ -100,18 +97,16 @@ In this case, AirSHIFT used [react-virtualized](https://github.com/bvaughn/react
 
 Virtualizing the table alone reduced scripting time by 6 seconds (on a 4x CPU slowdown + Fast 3G throttled Macbook Pro environment). This was the most impactful performance improvement in the refactoring project.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="virtualize_results_before.png"
-       alt="An annotated screenshot of a Chrome DevTools Performance panel recording.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pRX1ap7tVOdAoTo35MWj.png", alt="An annotated screenshot of a Chrome DevTools Performance panel recording.", width="800", height="289" %}
+  <figcaption>
     Before: Around 10 seconds of scripting after user input.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="virtualize_results_after.png"
-       alt="Another annotated screenshot of a Chrome DevTools Performance panel recording.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCy17DjlhMWXSsN1cFAZ.png", alt="Another annotated screenshot of a Chrome DevTools Performance panel recording.", width="800", height="358" %}
+  <figcaption>
     After: 4 seconds of scripting after user input.
   </figcaption>
 </figure>
@@ -120,23 +115,22 @@ Virtualizing the table alone reduced scripting time by 6 seconds (on a 4x CPU sl
 ## 2. Audit with User Timing API
 
 Next, the AirSHIFT team refactored the scripts that run on user input.
-The [flame chart](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#main)
-of [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
+The [flame chart](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main)
+of [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
 makes it possible to analyze what's actually happening in the main thread.
 But the AirSHIFT team found it easier to analyze application activity based
 on React's lifecycle.
 
 React 16 provides its performance trace via the
-[User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API),
+[User Timing API](https://developer.mozilla.org/docs/Web/API/User_Timing_API),
 which you can visualize from the
-[Timings section](https://developers.google.com/web/updates/2018/04/devtools#tabs)
+[Timings section](https://developer.chrome.com/blog/new-in-devtools-67/#tabs)
 of Chrome DevTools. AirSHIFT used the Timings section to find
 unnecessary logic running in React lifecycle events.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="user_timing.png" style="max-width: 75%;"
-       alt="The Timings section of the Performance panel of Chrome DevTools.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zTvUhCKRSCvZzo9mlkte.png", alt="The Timings section of the Performance panel of Chrome DevTools.", width="800", height="388", style="max-width: 75%;" %}
+  <figcaption>
     React's User Timing events.
   </figcaption>
 </figure>
@@ -160,11 +154,11 @@ a 1 second total reduction in scripting time.
 
 AirSHIFT has a built-in chat application. Many store owners communicate with their staff members via the chat while looking at the shift table, which means that a user might be typing a message while the table is loading. If the main thread is occupied with scripts that are rendering the table, user input could be janky.
 
-To improve this experience, AirSHIFT now uses [React.lazy and Suspense](https://web.dev/code-splitting-suspense/) to show placeholders for table contents while lazily loading the actual components.
+To improve this experience, AirSHIFT now uses [React.lazy and Suspense](/code-splitting-suspense/) to show placeholders for table contents while lazily loading the actual components.
 
 The AirSHIFT team also migrated some of the expensive business logic
 within the lazily loaded components to
-[web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).
+[web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers).
 This solved the user input jank problem by freeing up the main thread
 so that it could focus on responding to user input.
 
@@ -202,7 +196,7 @@ import { proxy } from 'comlink';
 
 // import the workerlized calc function with comlink
 const WorkerlizedCostCalc = proxy(new Worker('./WorkerlizedCostCalc.js'));
-export default function Cost({ userInfo }) {
+export default async function Cost({ userInfo }) {
   // execute the calculation in the worker
   const instance = await new WorkerlizedCostCalc();
   const cost = await instance.calc(userInfo);
@@ -234,9 +228,7 @@ Related article: [React + Redux + Comlink = Off-main-thread](https://dassur.ma/t
 Despite the limited amount of logic they workerized as a trial, AirSHIFT shifted around 100 ms of
 their JavaScript from the main thread to the worker thread (simulated with 4x CPU throttling).
 
-<img class="w-screenshot" src="worker.png"
-     alt="A screenshot of a Chrome DevTools Performance panel recording that shows that
-          scripting is now occurring on a web worker rather than the main thread.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cFIFNeEKqbyWGBEuPCy2.png", alt="A screenshot of a Chrome DevTools Performance panel recording that shows that scripting is now occurring on a web worker rather than the main thread.", width="800", height="99" %}
 
 AirSHIFT is currently exploring whether they can lazy load other components
 and offload more logic to web workers to further reduce jank.
@@ -258,18 +250,15 @@ AirSHIFT is now monitoring the shift table loading event to make sure it complet
 the 75th percentile users. This is an unenforced budget for now but they are considering auto-notifications
 via Elasticsearch when they exceed their budget.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="kibana.png"
-       alt="A chart showing that the 75th percentile completes in around 2500 ms,
-            the 50th percentile in around 1250 ms, the 25th percentile in around 750 ms,
-            and the 10th percentile in around 500 ms.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pSRqSKpmHKYGg8jalEr7.png", alt="A chart showing that the 75th percentile completes in around 2500 ms, the 50th percentile in around 1250 ms, the 25th percentile in around 750 ms, and the 10th percentile in around 500 ms.", width="800", height="549" %}
+  <figcaption>
     The Kibana dashboard showing daily performance data by percentiles.
   </figcaption>
 </figure>
 
 {% Aside %}
-Related article: [Performance budgets 101](https://web.dev/performance-budgets-101)
+Related article: [Performance budgets 101](/performance-budgets-101)
 {% endAside %}
 
 ### Results
@@ -283,10 +272,10 @@ it's not always easy to get engineering and business teams to prioritize non-fun
 development. Part of the challenge is that some of these performance optimizations
 can't be planned. They require experimentation and a trial-and-error mindset.
 
-AirSHIFT is now conducting internal 1-day performance hackathons to let engineers focus only on performance related work. In these hackathons they remove all constraints and respect the engineers' creativity, meaning any implementation that contributes to speed is worth considering. To accelerate the hackathon, AirSHIFT splits the group into small teams and each team competes to see who can get the biggest [Lighthouse](https://developers.google.com/web/tools/lighthouse) performance score improvement.
+AirSHIFT is now conducting internal 1-day performance hackathons to let engineers focus only on performance related work. In these hackathons they remove all constraints and respect the engineers' creativity, meaning any implementation that contributes to speed is worth considering. To accelerate the hackathon, AirSHIFT splits the group into small teams and each team competes to see who can get the biggest [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) performance score improvement.
 The teams get very competitive! 🔥
 
-<img class="w-screenshot" src="hackathon.png" alt="Photos of the hackathon.">
+{% Img src="image/admin/A1nus9lmROXOGm9rpCsO.png", alt="Photos of the hackathon.", width="800", height="462" %}
 
 ### Results
 
@@ -304,8 +293,8 @@ A good side effect was that many other engineering teams within Recruit got inte
 It was definitely not the easiest journey for AirSHIFT to work on these optimizations but it certainly paid off. Now AirSHIFT is loading the shift table within 1.5 sec in median which is a 6x improvement from their performance
 before the project.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/airshift-perf-optimization/compare_speed_vp9.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/airshift-perf-optimization/compare_speed_h264.mp4" type="video/mp4; codecs=h264">
   </video>
@@ -313,7 +302,8 @@ before the project.
 
 After the performance optimizations launched, one user said:
 
-<blockquote class="w-blockquote">
+<blockquote class="blockquote">
   Thank you so much for making the shift table load fast.
   Arranging the shift work is so much more efficient now.
+  <cite></cite>
 </blockquote>
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/kibana.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/kibana.png
deleted file mode 100755
index 8dd81449cff..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/kibana.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/main-thread-break-down.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/main-thread-break-down.png
deleted file mode 100755
index 8e3f4524e66..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/main-thread-break-down.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/thumbnail.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/thumbnail.png
deleted file mode 100644
index 3b3cecf45a7..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/user_timing.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/user_timing.png
deleted file mode 100755
index e24d881e6f0..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/user_timing.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_after.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_after.png
deleted file mode 100755
index 20bb5095cf1..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_after.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_before.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_before.png
deleted file mode 100755
index c994a099da1..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_before.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_after.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_after.png
deleted file mode 100755
index 0251a850d04..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_after.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_before.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_before.png
deleted file mode 100755
index 365e6423053..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/virtualize_results_before.png and /dev/null differ
diff --git a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/worker.png b/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/worker.png
deleted file mode 100644
index d1681f1d854..00000000000
Binary files a/src/site/content/en/blog/five-ways-airshift-improved-their-react-app/worker.png and /dev/null differ
diff --git a/src/site/content/en/blog/fixing-layout-instability/index.md b/src/site/content/en/blog/fixing-layout-instability/index.md
index c1fbce3d5c6..2eaea9c8b94 100644
--- a/src/site/content/en/blog/fixing-layout-instability/index.md
+++ b/src/site/content/en/blog/fixing-layout-instability/index.md
@@ -8,8 +8,8 @@ description: |
   A walkthrough of using WebPageTest to identify and fix layout instability issues.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - webdev
-  - webpagetest
+  # - webdev
+  # - webpagetest
   - ux
 ---
 
@@ -86,16 +86,16 @@ In the [results](http://webpagetest.org/custom_metrics.php?test=190918_6E_ef3c16
 
 To summarize, there is a single layout shift of 34.2% happening at 3087ms. To help identify the culprit, let's use WebPageTest's [filmstrip view](http://webpagetest.org/video/compare.php?tests=190918_6E_ef3c166b4a34033171d47e389cf82939-r%3A5-c%3A0&thumbSize=200&ival=100&end=visual).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="layout-shift1.png" alt="Two cells in the filmstrip, showing screenshots before and after the layout shift.">
-  <figcaption class="w-figcaption">Two cells in the filmstrip, showing screenshots before and after the layout shift.</figcaption>
+<figure>
+  {% Img src="image/admin/h1QidJnqWmFsk25yq1iu.png", alt="Two cells in the filmstrip, showing screenshots before and after the layout shift.", width="800", height="341" %}
+  <figcaption>Two cells in the filmstrip, showing screenshots before and after the layout shift.</figcaption>
 </figure>
 
 Scrolling to the ~3 second mark in the filmstrip shows us exactly what the cause of the 34% layout shift is: the colorful table. The website asynchronously fetches a JSON file, then renders it to a table. The table is initially empty, so waiting to fill it up when the results are loaded is causing the shift.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="layout-shift2.png" alt="Web font header appearing out of nowhere.">
-  <figcaption class="w-figcaption">Web font header appearing out of nowhere.</figcaption>
+<figure>
+  {% Img src="image/admin/hlbsiYTsFfVjpNk18ii4.png", alt="Web font header appearing out of nowhere.", width="800", height="336" %}
+  <figcaption>Web font header appearing out of nowhere.</figcaption>
 </figure>
 
 But that's not all. When the page is visually complete at ~4.3 seconds, we can see that the `<h1>` of the page "Is my host fast yet?" appears out of nowhere. This happens because the site uses a web font and hasn't taken any steps to optimize rendering. The layout doesn't actually appear to shift when this happens, but it's still a poor user experience to have to wait so long to read the title.
@@ -142,9 +142,9 @@ The appearance of the placeholders you use don't matter for layout stability. Th
 
 Here's what the placeholders look like while the JSON data is loading:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="layout-placeholder.png" alt="The data table is rendered with placeholder data.">
-  <figcaption class="w-figcaption">The data table is rendered with placeholder data.</figcaption>
+<figure>
+  {% Img src="image/admin/hF2EmHSpJArXA6TQ6Cm7.png", alt="The data table is rendered with placeholder data.", width="800", height="486" %}
+  <figcaption>The data table is rendered with placeholder data.</figcaption>
 </figure>
 
 Addressing the web font issue is much simpler. Because the site is using Google Fonts, we just need to pass in the `display=swap` property in the CSS request. That's all. The Fonts API will add the `font-display: swap` style in the font declaration, enabling the browser to render text in a fallback font immediately. Here's the corresponding markup with the fix included:
@@ -157,9 +157,9 @@ Addressing the web font issue is much simpler. Because the site is using Google
 
 After rerunning the page through WebPageTest, we can generate a before and after [comparison](http://webpagetest.org/video/compare.php?tests=190918_6E_ef3c166b4a34033171d47e389cf82939%2C190918_WF_60f9c9a1c669b20039860c09ca27df7c&thumbSize=200&ival=100&end=visual) to visualize the difference and measure the new degree of layout instability:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="layout-comparison.png" alt="WebPageTest filmstrip showing both sites loading side-by-side with and without layout optimizations.">
-  <figcaption class="w-figcaption">WebPageTest filmstrip showing both sites loading side-by-side with and without layout optimizations.</figcaption>
+<figure>
+  {% Img src="image/admin/1BJlP3HxeynRw0gRt52H.png", alt="WebPageTest filmstrip showing both sites loading side-by-side with and without layout optimizations.", width="800", height="288" %}
+  <figcaption>WebPageTest filmstrip showing both sites loading side-by-side with and without layout optimizations.</figcaption>
 </figure>
 
 
diff --git a/src/site/content/en/blog/fixing-layout-instability/layout-comparison.png b/src/site/content/en/blog/fixing-layout-instability/layout-comparison.png
deleted file mode 100644
index ebff6d3c030..00000000000
Binary files a/src/site/content/en/blog/fixing-layout-instability/layout-comparison.png and /dev/null differ
diff --git a/src/site/content/en/blog/fixing-layout-instability/layout-placeholder.png b/src/site/content/en/blog/fixing-layout-instability/layout-placeholder.png
deleted file mode 100644
index 25aa075cda1..00000000000
Binary files a/src/site/content/en/blog/fixing-layout-instability/layout-placeholder.png and /dev/null differ
diff --git a/src/site/content/en/blog/fixing-layout-instability/layout-shift1.png b/src/site/content/en/blog/fixing-layout-instability/layout-shift1.png
deleted file mode 100644
index 63ec31117f6..00000000000
Binary files a/src/site/content/en/blog/fixing-layout-instability/layout-shift1.png and /dev/null differ
diff --git a/src/site/content/en/blog/fixing-layout-instability/layout-shift2.png b/src/site/content/en/blog/fixing-layout-instability/layout-shift2.png
deleted file mode 100644
index bda484dc283..00000000000
Binary files a/src/site/content/en/blog/fixing-layout-instability/layout-shift2.png and /dev/null differ
diff --git a/src/site/content/en/blog/flexbox-gap/devtools-gap.png b/src/site/content/en/blog/flexbox-gap/devtools-gap.png
deleted file mode 100644
index 85b0bfb95ed..00000000000
Binary files a/src/site/content/en/blog/flexbox-gap/devtools-gap.png and /dev/null differ
diff --git a/src/site/content/en/blog/flexbox-gap/hero.jpg b/src/site/content/en/blog/flexbox-gap/hero.jpg
deleted file mode 100644
index d344e62ff8f..00000000000
Binary files a/src/site/content/en/blog/flexbox-gap/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/flexbox-gap/index.md b/src/site/content/en/blog/flexbox-gap/index.md
index afe6ebd2ba7..6dcc551dcb4 100644
--- a/src/site/content/en/blog/flexbox-gap/index.md
+++ b/src/site/content/en/blog/flexbox-gap/index.md
@@ -1,51 +1,51 @@
 ---
+layout: post
 title: Chromium lands Flexbox `gap`
-subhead: The CSS `gap` property is here for Chromium's CSS Flexbox and Multi-Column layout engines. 
+subhead: The CSS `gap` property is here for Chromium's CSS Flexbox and Multi-Column layout engines.
 authors:
   - adamargyle
   - dgrogan
-description: The CSS `gap` property is here for Chromium's CSS Flexbox and Multi-Column layout engines. 
+description: The CSS `gap` property is here for Chromium's CSS Flexbox and Multi-Column layout engines.
 date: 2020-05-07
 updated: 2020-06-19
-hero: hero.jpg
+hero: image/admin/arR9d29YxN1N5Rak6OH6.jpg
 alt: A brick wall with gaps.
+feedback:
+  - api
 ---
 
-### Browser compatibility
-
-At the time of writing `gap` is supported in desktop Firefox 63, Firefox for Android 63, 
-and Chromium 84 (desktop and Android). See
-[Browser compatibility](https://developer.mozilla.org/docs/Web/CSS/gap#Browser_compatibility) 
-for updates.
-
 ## CSS Gap
 
 {% Aside 'key-term' %}
-`gap` is the spacing *between children*. You may have heard of this type of spacing being 
+`gap` is the spacing *between children*. You may have heard of this type of spacing being
 called "gutters" or "alleys". It's space only where the children box edges touch.
 {% endAside %}
 
-`gap` is [flow relative](https://www.w3.org/TR/css-logical-1/#intro), meaning it changes 
-dynamically based on the direction of content flow. For example, `gap` will automatically 
-adjust for the different `writing-mode` or `direction` values that you set for your 
-international users. This significantly eases the burden of spacing challenges for 
+`gap` is [flow relative](https://www.w3.org/TR/css-logical-1/#intro), meaning it changes
+dynamically based on the direction of content flow. For example, `gap` will automatically
+adjust for the different `writing-mode` or `direction` values that you set for your
+international users. This significantly eases the burden of spacing challenges for
 the component and CSS author. **Less code scaling further.**
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/flexbox-gap/gap-i18n.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/flexbox-gap/gap-i18n.mp4">
   </video>
-  <figcaption class="w-figcaption">
-    Gap demonstrating localization support, as it handles changes to direction and writing-mode: 
-    <a href="https://codepen.io/argyleink/pen/MWaoZJM">Codepen</a> | 
+  <figcaption>
+    Gap demonstrating localization support, as it handles changes to direction and writing-mode:
+    <a href="https://codepen.io/argyleink/pen/MWaoZJM">Codepen</a> |
     <a href="https://twitter.com/argyleink/status/1254794309263491072?s=20">Tweet</a>
   </figcaption>
 </figure>
 
+### Browser compatibility
+
+{% BrowserCompat 'css.properties.gap' %}
+
 ### Usage
-`gap` accepts any CSS [length](https://drafts.csswg.org/css-values-4/#lengths) 
-or [percentage](https://www.w3.org/TR/css-values-3/#percentages) as a value. 
+`gap` accepts any CSS [length](https://drafts.csswg.org/css-values-4/#lengths)
+or [percentage](https://www.w3.org/TR/css-values-3/#percentages) as a value.
 
 ```css
 .gap-example {
@@ -62,7 +62,7 @@ or [percentage](https://www.w3.org/TR/css-values-3/#percentages) as a value.
 
 Gap can be passed 1 length, which will be used for both row and column.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'better', 'Shorthand' %}
 ```css
 .grid {
@@ -93,7 +93,7 @@ Set both rows and columns **together** at once
 
 Gap can be passed 2 lengths, which will be used for row and column.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'better', 'Shorthand' %}
 ```css
 .grid {
@@ -123,14 +123,14 @@ Set both rows and columns **separately** at once
 
 ## Flexbox `gap`
 
-Before `gap` was in Flexbox, strategies involved negative margins, complex selectors, 
-`:last` or `:first` type pseudo-class selectors, or other means to manage the space 
+Before `gap` was in Flexbox, strategies involved negative margins, complex selectors,
+`:last` or `:first` type pseudo-class selectors, or other means to manage the space
 of a dynamically layed-out and wrapping set of children.
 
 ### Previous Attempts
 The following are patterns that folks have used to get gap-like spacing.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse', 'pseudo-class selectors' %}
 ```css
 .layout > :not(:last-child) {
@@ -144,8 +144,8 @@ The following are patterns that folks have used to get gap-like spacing.
 {% Compare 'worse', 'lobotomized owl' %}
 ```css
 .layout > * + * {
-  margin-bottom: 10px; 
-  margin-right: 10px; 
+  margin-bottom: 10px;
+  margin-right: 10px;
 }
 ```
 
@@ -156,12 +156,12 @@ The following are patterns that folks have used to get gap-like spacing.
 {% endCompare %}
 </div>
 
-The above are not a full replacement for `gap` though, and often need `@media` 
-or `:lang()` adjustments to account for wrapping scenarios, writing modes or direction. 
-Adding one or two media queries doesn't seem so bad, but they can add up and 
+The above are not a full replacement for `gap` though, and often need `@media`
+or `:lang()` adjustments to account for wrapping scenarios, writing modes or direction.
+Adding one or two media queries doesn't seem so bad, but they can add up and
 lead to complicated layout logic.
 
-What the above author really intended was to have none of the child items touch. 
+What the above author really intended was to have none of the child items touch.
 ### The Antidote: gap
 
 ```css
@@ -175,53 +175,51 @@ What the above author really intended was to have none of the child items touch.
 The ownership of the spacing shifts from the child to the parent
 {% endAside %}
 
-In the first 2 examples (without Flexbox `gap`), the children are targeted and 
-assigned spacing from other elements. In the antidote gap example, the container 
-owns the spacing. Each child can relieve itself of the burden, while also 
-centralizing the spacing ownership. Simplifying consistency. Reorder, 
-change viewports, remove elements, append new elements, etc. and spacing remains 
+In the first 2 examples (without Flexbox `gap`), the children are targeted and
+assigned spacing from other elements. In the antidote gap example, the container
+owns the spacing. Each child can relieve itself of the burden, while also
+centralizing the spacing ownership. Simplifying consistency. Reorder,
+change viewports, remove elements, append new elements, etc. and spacing remains
 consistent. No new selectors, no new media queries, just space.
 
 ## Chromium DevTools updates
 
-With these updates come changes to Chromium DevTools, notice how the **Styles** 
+With these updates come changes to Chromium DevTools, notice how the **Styles**
 pane handles `grid-gap` and `gap` now 👍
 
-<figure class="w-figure">
-  <img src="./devtools-gap.png" alt="An office with two people working at a table." style="border-radius: 10px;" width="400">
-  <figcaption class="w-figcaption">Devtools shows the both <code>grid-gap</code> and <code>gap</code>, with 
-  <code>gap</code> shown used below <code>grid-gap</code> as to let the cascade use the latest syntax.</figcaption>
+<figure>
+  {% Img src="image/admin/7ZxgySczxUR1qxuD8cbC.png", alt="An office with two people working at a table.", width="400", height="273" %}
+  <figcaption>Devtools shows the both <code>grid-gap<code> and <code>gap</code>, with <code>gap</code> shown used below <code>grid-gap</code> as to let the cascade use the latest syntax.</figcaption>
 </figure>
 
-DevTools supports both `grid-gap` and `gap`, this is because `gap` is essentially 
-an alias to the previous syntaxes. 
-
+DevTools supports both `grid-gap` and `gap`, this is because `gap` is essentially
+an alias to the previous syntaxes.
 
 ## New layout potential
 
-With Flexbox `gap`, we unlock more than convenience. We unlock powerful, perfectly 
-spaced, intrinsic layouts. In the video and following code sample below, Grid 
-cannot achieve the layout that Flexbox can. Grid must have equal rows and columns, 
-even if they're intrinsically assigned. 
+With Flexbox `gap`, we unlock more than convenience. We unlock powerful, perfectly
+spaced, intrinsic layouts. In the video and following code sample below, Grid
+cannot achieve the layout that Flexbox can. Grid must have equal rows and columns,
+even if they're intrinsically assigned.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/flexbox-gap/flex-gap-v1.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/flexbox-gap/flex-gap-v1.mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     <a href="https://twitter.com/argyleink/status/1255201934241198081?s=20">Tweet</a>
   </figcaption>
 </figure>
 
-Also, notice how dynamic the spacing between children is when they wrap intrinsically 
-like that. Media queries can't detect wrapping like that to make intelligent adjustments. 
+Also, notice how dynamic the spacing between children is when they wrap intrinsically
+like that. Media queries can't detect wrapping like that to make intelligent adjustments.
 Flexbox `gap` can, and will, do it for you across all internationalizations.
 
 
 ## Multi-column `gap`
 
-In addition to Flexbox supporting the `gap` syntax, multi-column layouts also support 
+In addition to Flexbox supporting the `gap` syntax, multi-column layouts also support
 the shorter `gap` syntax.
 
 ```css/3/2
diff --git a/src/site/content/en/blog/flipkart/index.md b/src/site/content/en/blog/flipkart/index.md
new file mode 100644
index 00000000000..d855459562c
--- /dev/null
+++ b/src/site/content/en/blog/flipkart/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: Flipkart triples time-on-site with Progressive Web App
+description: |
+  In 2015, Flipkart, India’s largest e-commerce site, adopted an app-only strategy and temporarily shut down their mobile website. The company found it harder and harder to provide a user experience that was as fast and engaging as that of their mobile app. But then, Flipkart decided to rethink their development approach. They were drawn back to the mobile web by the introduction of features that made the mobile web run instantly, work offline, and re-engage users.
+date: 2016-03-28
+updated: 2016-03-28
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dfJkZa3kECiS8vVo5u4i.png", alt="Flipkart site", width="800", height="1428" %}
+</figure>
+
+Flipkart, India’s largest e-commerce site, decided to combine their web
+presence and native app into a Progressive Web Application that has resulted
+in a 70% increase in conversions.
+
+In 2015, Flipkart, India’s largest e-commerce site, adopted an app-only
+strategy and temporarily shut down their mobile website. The company found it
+harder and harder to provide a user experience that was as fast and engaging
+as that of their mobile app. But then, Flipkart decided to rethink their
+development approach. They were drawn back to the mobile web by the
+introduction of features that made the mobile web run instantly, work offline,
+and re-engage users.
+
+### Key insights
+
+- Users time on site with Flipkart lite vs. previous mobile experience:
+  **3.5 minutes vs 70 seconds**.
+- **3x** more time spent on site
+- **40%** higher re-engagement rate
+- **70%** greater conversion rate among those arriving via Add to Homescreen
+- **3x** lower data usage
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/0pvDQZfZHbgEti8ct8gH.pdf)
+
+## Flipkart Lite
+
+They soon began building Flipkart Lite, a Progressive Web App that
+combines the best of the web and the best of the Flipkart native app.
+It leverages new, open web APIs to offer a mobile web experience
+that loads fast, uses less data than before, and re-engages users in
+multiple ways. Users visit via their browser and find a fast app-like user
+experience. When they come back, it loads nearly instantly, even on flaky
+networks. Users can choose to add the site to their homescreen with
+just two taps, making it easier for them to come back. Amar Nagaram,
+an Engineering Director at Flipkart shares, "We know that everyone needs
+to build mobile-first experiences. With Flipkart Lite, we've developed a
+powerful, technically-advanced web app that performs as well as our
+native app. We now feel we have the best of both worlds."
+
+## A fast and streamlined site
+
+With **63%** of Flipkart Lite users reaching the site via a 2G network, a fast
+user experience was essential. To decrease load times, Flipkart added
+service workers and streamlined the site to help consumers quickly reach
+the product they are looking for. Users can even continue to browse
+categories, review previous searches, and view product pages—all
+while offline.
+
+## Taking advantage of the web's low friction
+
+Reaching a broad set of users is important for Flipkart. With Flipkart Lite,
+users are one click away from accessing content and many new users are
+first-time internet users. In addition to easy access, Flipkart Lite requires
+less data. A key metric for Flipkart is tracking data usage to complete first
+transaction: when comparing Flipkart Lite to the native app, Flipkart Lite
+uses **3x** less data. Nagaram continues, "Having a strong and engaging
+mobile website means we’re no longer turning away potential shoppers
+who don’t want to use data or space to download an app."
+
+## Bringing users back with home screen icon
+
+Flipkart wanted to be able to re-engage with mobile web users just as they
+would with mobile app users.
+
+The company implemented an "Add to Home Screen" prompt. Now, **60%**
+of all visits to Flipkart Lite come from people launching the site from the
+homescreen icon. Add to Home Screen also delivers high-quality visits,
+with customers converting **70%** more than average users.
+
+These two activities alone resulted in engagement numbers that were **40%**
+higher than before.
+
+## Building for future success for the evolving online shopper
+
+Flipkart will continue using progressive web technology to reach their
+evolving online shoppers. Nagaram concludes, "Flipkart Lite has enabled
+us to find some of our highest-value customers. We will continue to expand
+progressive web app technology across all of our platforms, investing
+significant resources to maximize the potential scale. We truly believe that
+this is a new way to experience mobile and we’re just getting started."
+
+
+
diff --git a/src/site/content/en/blog/floc/index.md b/src/site/content/en/blog/floc/index.md
new file mode 100644
index 00000000000..12137c1f912
--- /dev/null
+++ b/src/site/content/en/blog/floc/index.md
@@ -0,0 +1,363 @@
+---
+title: What is FLoC?
+subhead: FLoC enables ad selection without sharing the browsing behaviour of individual users.
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2022-07-08
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: Murmuration of starlings over Brighton pier
+tags:
+  - blog
+  # - privacy
+  # - privacy-sandbox
+  # - security
+feedback:
+  - api
+---
+
+{% Aside %}
+This post outlined the API design implemented in Chrome for the first origin trial of FLoC. The development of FLoC stopped in 2021.
+
+In January 2022, the Privacy Sandbox released the [Topics API
+proposal](https://github.com/jkarlin/topics) to address interest-based
+advertising, without having to resort to tracking the sites a user visits. The
+design of the API was informed by community feedback from our earlier FLoC
+trials, and supersedes the FLoC proposal.
+{% endAside %}
+
+FLoC provides a privacy-preserving mechanism for interest-based ad selection.
+
+As a user moves around the web, their browser uses the FLoC algorithm to work out its "interest
+cohort", which will be the same for thousands of browsers with a similar recent browsing history.
+The browser recalculates its cohort periodically, on the user's device, without sharing
+individual browsing data with the browser vendor or anyone else.
+
+{% Aside %}
+During the initial FLoC trial, a page visit was only included in the browser's FLoC computation
+for one of two reasons:
+* The FLoC API (`document.interestCohort()`) is used on the page.
+* Chrome detects that the page [loads ads or ads-related resources](https://github.com/WICG/floc/issues/82).
+
+For other clustering algorithms, the trial may experiment with different inclusion criteria: that's
+part of the origin trial experiment process.
+
+The origin trial for the initial version of FLoC, which ran from Chrome 89 to 91,
+[is now closed](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561).
+{% endAside %}
+
+Advertisers (sites that pay for advertisements) can include code on their own websites in order to
+gather and provide cohort data to their adtech platforms (companies that provide software and tools
+to deliver advertising). For example, an adtech platform might learn from an online shoe store that
+browsers from cohorts 1101 and 1354 seem interested in the store's hiking gear. From other
+advertisers, the adtech platform learns about other interests of those cohorts.
+
+Subsequently, the ad platform can use this data to select relevant ads (such as an ad for hiking
+boots from the shoe store) when a browser from one of those cohorts requests a page from a site that
+displays ads, such as a news website.
+
+The Privacy Sandbox is a series of proposals to satisfy third-party use cases without third-party
+cookies or other tracking mechanisms. See [Digging into the Privacy Sandbox](/digging-into-the-privacy-sandbox)
+for an overview of all the proposals.
+
+If you have comments on this proposal, [create an
+issue](https://github.com/WICG/floc/issues/new) on the [FLoC Explainer](https://github.com/WICG/floc)
+repository.  If you have feedback on Chrome's experiment with this proposal,
+post a reply on the [Intent to Experiment](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs).
+
+## Why do we need FLoC?
+
+Many businesses rely on advertising to drive traffic to their sites, and many publisher websites
+fund content by selling advertising inventory. People generally prefer to see ads that are
+relevant and useful to them, and relevant ads also bring more business to advertisers and
+[more revenue to the websites that host them](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf). In other words, ad space is more valuable when
+it displays relevant ads. Thus, selecting relevant ads increases revenue for ad-supported websites.
+That, in turn, means that relevant ads help fund content creation that benefits users.
+
+However, people are concerned about the privacy implications of tailored advertising, which
+currently relies on techniques such as tracking cookies and device fingerprinting which can reveal
+your browsing history across sites to advertisers or ad platforms. The FLoC proposal aims to allow
+ad selection in a way that better protects privacy.
+
+
+## What can FLoC be used for?
+
+* Show ads to people whose browsers belong to a cohort that has been observed to frequently visit an
+advertiser's site or shows interest in relevant topics.
+* Use machine learning models to predict the probability a user will convert based on their cohort,
+in order to inform ad auction bidding behavior.
+* Recommend content to users. For example, suppose a news site observes that their sports podcast
+page has become especially popular with visitors from cohorts 1234 and 7. They can recommend that
+content to other visitors from those cohorts.
+
+## How does FLoC work?
+
+The example below describes the different roles in selecting an ad using FLoC.
+
+* The **advertiser** (a company that pays for advertising) in this example is an online shoe
+retailer: <br>
+**<u>shoestore.example</u>**
+
+* The **publisher** (a site that sells ad space) in the example is a news site: <br>
+**<u>dailynews.example</u>**
+
+* The **adtech platform** (which provides software and tools to deliver advertising) is: <br>
+**<u>adnetwork.example</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png",
+  alt="Diagram showing, step by step, the different roles in selecting and delivering an ad using
+  FLoC: FLoC service, Browser, Advertisers, Publisher (to observe cohorts), Adtech,
+  Publisher (to display ads)", width="800", height="359" %}
+
+In this example we've called the users **Yoshi** and **Alex**. Initially their browsers both belong
+to the same cohort, 1354.
+
+{% Aside %}
+We've called the users here Yoshi and Alex, but this is only for the purpose of the example. Names
+and individual identities are not revealed to the advertiser, publisher, or adtech platform with
+FLoC.
+
+Don't think of a cohort as a collection of people. Instead, think of a cohort as a grouping of
+browsing activity.
+{% endAside %}
+
+### 1. FLoC service
+1. The FLoC service used by the browser creates a mathematical model with thousands of "cohorts",
+each of which will correspond to thousands of web browsers with similar recent browsing histories.
+More about how this works [below](#floc-server).
+1. Each cohort is given a number.
+
+### 2. Browser
+1. From the FLoC service, Yoshi's browser gets data describing the FLoC model.
+1. Yoshi's browser works out its cohort [by using the FLoC model's algorithm](#floc-algorithm)
+to calculate which cohort corresponds most closely to its own browsing history. In this example,
+that will be the cohort 1354. Note that Yoshi's browser does not share any data with the FLoC
+service.
+1. In the same way, Alex's browser calculates its cohort ID. Alex's browsing history is
+different from Yoshi's, but similar enough that their browsers both belong to cohort 1354.
+
+### 3. Advertiser: <span style="font-weight:normal">shoestore.example</span>
+1. Yoshi visits <u>shoestore.example</u>.
+1. The site asks Yoshi's browser for its cohort: 1354.
+1. Yoshi looks at hiking boots.
+1. The site records that a browser from cohort 1354 showed interest in hiking boots.
+1. The site later records additional interest in its products from cohort 1354, as well as from other
+cohorts.
+1. The site periodically aggregates and shares information about cohorts and product interests with
+its adtech platform <u>adnetwork.example</u>.
+
+Now it's Alex's turn.
+
+### 4. Publisher: <span style="font-weight:normal">dailynews.example</span>
+1. Alex visits <u>dailynews.example</u>.
+1. The site asks Alex's browser for its cohort.
+1. The site then makes a request for an ad to its adtech platform, <u>adnetwork.example</u>, including
+Alex's browser's cohort: 1354.
+
+### 5. Adtech platform: <span style="font-weight:normal">adnetwork.example</span>
+1. <u>adnetwork.example</u> can select an ad suitable for Alex by combining the data it has from
+the publisher <u>dailynews.example</u> and the advertiser <u>shoestore.example</u>:
+  - Alex's browser's cohort (1354) provided by <u>dailynews.example</u>.
+  - Data about cohorts and product interests from <u>shoestore.example</u>: "Browsers from cohort 1354
+  might be interested in hiking boots."
+1. <u>adnetwork.example</u> selects an ad appropriate to Alex: an ad for hiking boots on
+<u>shoestore.example</u>.
+1. <u>dailynews.example</u> displays the ad 🥾.
+
+{% Aside %}
+Current approaches for ad selection rely on techniques such as tracking cookies and device
+fingerprinting, which are used by third parties such as advertisers to track individual browsing
+behavior.
+
+With FLoC, the browser **does not share** its browsing history with the FLoC service or anyone else.
+The browser, on the user's device, works out which cohort it belongs to. The user's browsing history
+never leaves the device.
+{% endAside %}
+
+## Who runs the back-end service that creates the FLoC model?
+
+Every browser vendor will need to make their own choice of how to group browsers into cohorts.
+Chrome is running its own FLoC service; other browsers might choose to implement FLoC with a
+different clustering approach, and would run their own service to do so.
+
+## How does the FLoC service enable the browser to work out its cohort? {: #floc-server }
+
+1. The FLoC service used by the browser creates a multi-dimensional mathematical representation
+of all potential web browsing histories. We'll call this model "cohort space".
+1. The service divides up this space into thousands of segments. Each segment represents a
+cluster of thousands of similar browsing histories. These groupings aren't based on knowing
+any actual browsing histories; they're simply based on picking random centers in "cohort space" or
+cutting up the space with random lines.
+1. Each segment is given a cohort number.
+1. The web browser gets this data describing "cohort space" from its FLoC service.
+1. As a user moves around the web, their browser [uses an algorithm](#floc-algorithm) to
+periodically calculate the region in "cohort space" that corresponds most closely to its own
+browsing history.
+
+<figure style="text-align: center">
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="Diagram of the
+'browsing history space' created by a FLoC server, showing multiple segments, each with a cohort
+number.", width="400", height="359" %}
+<figcaption>The FLoC service divides up "cohort space" into
+thousands of segments (only a few are shown here).</figcaption>
+</figure>
+
+{% Aside %}
+At no point in this process is the user's browsing history shared with the FLoC service, or
+any third party. The browser's cohort is calculated by the browser, on the user's device. No
+user data is acquired or stored by the FLoC service.
+{% endAside %}
+
+## Can a browser's cohort change?
+
+_Yes_! A browser's cohort definitely can change! You probably don't visit the same websites every
+week, and your browser's cohort will reflect that.
+
+A cohort represents a cluster of browsing activity, not a collection of people. The activity
+characteristics of a cohort are generally consistent over time, and cohorts are useful for ad selection
+because they group similar recent browsing behavior. Individual people's browsers will float in and
+out of a cohort as their browsing behavior changes. Initially, we expect the browser to recalculate
+its cohort every seven days.
+
+In the example above, both Yoshi and Alex's browser's cohort is 1354. In the future, Yoshi's
+browser and Alex's browser may move to a different cohort if their interests change. In the
+example below, Yoshi's browser moves to cohort 1101 and Alex's browser moves to cohort 1378. Other
+people's browsers will move into and out of cohorts as their browsing interests change.
+
+<figure style="text-align: center">
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="Diagram of the
+'browsing history space' created by a FLoC server, showing multiple segments, each with a cohort
+number. The diagram shows browsers belonging to users Yoshi and Alex moving from one cohort to
+another as their browsing interests change over time.", width="800", height="533" %}
+<figcaption>Yoshi's and Alex's browser cohort may change if their interests
+change.</figcaption>
+</figure>
+
+{% Aside %}
+A cohort defines a grouping of browsing activity, not a group of people. Browsers will move in and out of a cohort as their activity changes.
+{% endAside %}
+
+## How does the browser work out its cohort? {: #floc-algorithm }
+
+As described above, the user's browser gets data from its FLoC service that describes the
+mathematical model for cohorts: a multi-dimensional space that represents the browsing activity of
+all users. The browser then uses an algorithm to work out which region of this "cohort space" (that
+is, which cohort) most closely matches its own recent browsing behavior.
+
+## How does FLoC work out the right size of cohort?
+
+There will be thousands of browsers in each cohort.
+
+A smaller cohort size might be more useful for personalizing ads, but is less likely to stop user
+tracking—and vice versa. A mechanism for assigning browsers to cohorts needs to make a trade off
+between privacy and utility. The Privacy Sandbox uses [k-anonymity](https://en.wikipedia.org/wiki/K-anonymity)
+to allow a user to "hide in a crowd". A cohort is k-anonymous if it is shared by at least k users. The higher the k
+number, the more privacy-preserving the cohort.
+
+## Can FLoC be used to group people based on sensitive categories?
+
+The clustering algorithm used to construct the FLoC cohort model is designed to evaluate whether a
+cohort may be correlated with sensitive categories, without learning why a category is sensitive.
+Cohorts that might reveal sensitive categories such as race, sexuality, or medical history will be
+blocked. In other words, when working out its cohort, a browser will only be choosing between
+cohorts that won't reveal sensitive categories.
+
+## Is FLoC just another way of categorizing people online?
+
+With FLoC, a user's browser will belong to one of thousands of cohorts, along with thousands of
+other users' browsers. Unlike with third-party cookies and other targeting mechanisms, FLoC only
+reveals the cohort a user's browser is in, and not an individual user ID. It does not enable others
+to distinguish an individual within a cohort. In addition, the information about browsing activity
+that is used to work out a browser's cohort is kept local on the browser or device, and is not
+uploaded elsewhere. The browser may further leverage other anonymization methods, such as
+[differential privacy](https://en.wikipedia.org/wiki/Differential_privacy).
+
+## Do websites have to participate and share information?
+
+Websites will have the ability to opt in or out of FLoC, so sites about sensitive topics will be
+able to prevent visits to their site from being included in the FLoC calculation. As additional
+protection, analysis by the FLoC service will evaluate whether a cohort may reveal sensitive
+information about users without learning why that cohort is sensitive. If a cohort might represent a
+greater-than-typical number of people who visit sites in a sensitive category, that entire cohort is
+removed. Negative financial status and mental health are among the sensitive categories covered by
+this analysis.
+
+Websites [can exclude a page from the FLoC calculation](https://github.com/WICG/floc#opting-out-of-computation)
+by setting a [Permissions-Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) header
+`interest-cohort=()` for that page. For pages that haven't been excluded, a page visit will be included
+in the browser's FLoC calculation if `document.interestCohort()` is used on the page. During the current
+[FLoC origin trial](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561), a
+page will also be included in the calculation if Chrome detects that the page
+[loads ads or ads-related resources](https://github.com/WICG/floc/issues/82).
+([Ad Tagging in Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md)
+explains how Chrome's ad detection mechanism works.)
+
+Pages served from private IP addresses, such as intranet pages, won't be part of the FLoC
+computation.
+
+## How does the FLoC JavaScript API work?
+
+{% Aside %}
+The origin trial for the initial version of FLoC, which ran from Chrome 89 to 91,
+[is now closed](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561).
+{% endAside %}
+
+The FLoC API is very simple: just a single method that returns a promise that resolves to an object
+providing the cohort `id` and `version`:
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+The cohort data made available looks like this:
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+The `version` value enables sites using FLoC to know which browser and which FLoC model the cohort
+ID refers to. As described below, the promise returned by `document.interestCohort()` will reject
+for any frame that is not allowed the `interest-cohort` permission.
+
+## Can websites opt out of being included in the FLoC computation?
+
+The `interest-cohort` permissions policy enables a site to declare that it does not want to be
+included in the user's list of sites for cohort calculation. The policy will be `allow` by default.
+The promise returned by `document.interestCohort()` will reject for any frame that is not allowed
+`interest-cohort` permission. If the main frame does not have the `interest-cohort` permission, then the
+page visit will not be included in the interest cohort calculation.
+
+For example, a site can opt out of all FLoC cohort calculation by sending the following HTTP
+response header:
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## Can a user stop sites from getting their browser's FLoC cohort?
+
+If a user disables Privacy Sandbox in `chrome://settings/privacySandbox`, the browser will not provide
+the user's cohort when asked for it via JavaScript: the promise returned by
+`document.interestCohort()` will reject.
+
+## How can I make suggestions or provide feedback?
+
+If you have comments on the API, [create an issue](https://github.com/WICG/floc/issues/new)
+on the [FLoC Explainer](https://github.com/WICG/floc) repository.
+
+## Find out more
+
+* [Digging in to the Privacy Sandbox](/digging-into-the-privacy-sandbox/)
+* [FLoC Explainer](https://github.com/WICG/floc)
+* [FLoC Origin Trial & Clustering](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+* [Evaluation of cohort Algorithms for the FLoC API](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+Photo by [Rhys Kentish](https://unsplash.com/@rhyskentish) on [Unsplash](https://unsplash.com/photos/I5AYxsxSuVA).
diff --git a/src/site/content/en/blog/focus/index.md b/src/site/content/en/blog/focus/index.md
new file mode 100644
index 00000000000..54a570d6299
--- /dev/null
+++ b/src/site/content/en/blog/focus/index.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: Introduction to Focus
+subhead: Overview of screen focus in accessibility
+description: |
+  Overview of screen focus in accessibility
+authors:
+  - megginkearney
+  - dgash
+  - robdodson
+date: 2016-10-04
+updated: 2019-06-08
+---
+
+In this lesson we'll talk about *focus* and how you can manage it in your
+application. Focus refers to which control on the screen (an input item such as
+a field, checkbox, button, or link) currently receives input from the keyboard,
+and from the clipboard when you paste content.
+
+This is a great place to start learning about accessibility because we all know
+how to use a keyboard, it's easy to relate to and test, and it benefits
+virtually all users.
+
+Users with motor impairments, which could be anything from permanent paralysis
+to a sprained wrist, may rely on a keyboard or switch device to navigate your
+page, so a good focus strategy is critical to providing a good experience for
+them.
+
+And for the power users who know every keyboard shortcut on their machine, being
+able to quickly navigate your site with the keyboard alone will certainly make
+them more productive.
+
+Thus, a well implemented focus strategy ensures that everyone using your
+application has a better experience. We'll see in the upcoming lessons that the
+effort you put into focus is an important basis for supporting assistive
+technology users and, indeed, all users.
+
+## What is focus?
+
+Focus determines where keyboard events go in the page at any given moment. For
+instance, if you focus a text input field and begin typing, the input field
+receives the keyboard events and displays the characters you type. While it has
+focus, it will also receive pasted input from the clipboard.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CSqLPOjucmboi2mskmLR.png", alt="Keyboard focus in a text field.", width="238", height="68" %}
+</figure>
+
+The currently focused item is often indicated by a *focus ring*, the style of
+which depends on both the browser and on any styling the page author has
+applied. Chrome, for instance, typically highlights focused elements with a blue
+border, whereas Firefox uses a dashed border.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6AGj7kGYsWlSjCGCK5je.png", alt="Sign up button.", width="198", height="94" %}
+</figure>
+
+Some users operate their computer almost entirely with the keyboard or other
+input device. For those users, focus is critical; it's their primary means of
+reaching everything on the screen. For that reason, the Web AIM checklist states
+in section 2.1.1 that [all page functionality should be available using the
+keyboard](https://webaim.org/standards/wcag/checklist#sc2.1.1){: .external },
+unless it's something you cannot do with a keyboard, such as freehand drawing.
+
+As a user, you can control which element is currently focused using `Tab`,
+`Shift+Tab`, or the arrow keys. On Mac OSX this works a little differently:
+while Chrome always lets you navigate with `Tab`, you need to press `Option+Tab`
+to change focus in other browsers like Safari. (You can change this setting in
+the Keyboard section of System Preferences.)
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EJuYSrFk9YK1sP2Mx0ap.png", alt="Keyboard preferences dialog.", width="547", height="426" %}
+</figure>
+
+The order in which focus proceeds forward and backward through interactive
+elements via `Tab` is called, not surprisingly, the *tab order*. Ensuring that
+you design your page with a logical tab order is an important step that we'll
+cover later.
+
+## What is focusable?
+
+Built-in interactive HTML elements like text fields, buttons, and select lists
+are *implicitly focusable*, meaning they are automatically inserted into the tab
+order and have built-in keyboard event handling without developer intervention.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QrwBWUKleKcvVtbzKlhh.png", alt="Implicitly focusable fields.", width="526", height="190" %}
+</figure>
+
+But not all elements are focusable; paragraphs, divs, and various other page
+elements are not focused as you tab through the page, and that's by design.
+There's generally no need to focus something if the user can't interact with it.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/flJvC3AboT9pMnS8fJAc.png", alt="Not all elements are focusable,", width="609", height="253" %}
+</figure>
+
+## Experiencing focus
+
+Let's try some of the focus techniques we just discussed. Using Chrome, go to
+this [airline site mockup
+page](http://udacity.github.io/ud891/lesson2-focus/01-basic-form/)
+and search for a specific ticket **using only keyboard input**. The page doesn't
+accept mouse input, so you can't fudge the exercise (not that we don't trust you
+;-).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KB2dPuBGEeORUQwi6dM6.png", alt="Airline site mockup.", width="679", height="544" %}
+</figure>
+
+The ticket parameters you should specify are:
+
+ - one way
+ - to Melbourne
+ - leaving on 12 October 2017 (10/12/2017)
+ - returning on 23 October 2017 (10/23/2017)
+ - window seat
+ - do not want to receive promotional offers
+
+When you successfully complete the form with no input errors and activate the
+Search button, the form will simply clear and reset. Go ahead and complete the
+form, then come back.
+
+Let's examine how the form uses your keyboard input. Starting with your first
+few `Tab` presses, the browser highlights the navigation items for Flights,
+Hotels, and Rental Cars. As you continue to press `Tab` you proceed to the
+radiobutton group where you can choose from Round Trip, One Way, or Multi City
+using the arrow keys.
+
+Continue through the name and address fields, filling in the required
+information. When you arrive at the destination select element, you can use the
+arrow keys to choose a city, or you can start typing to autocomplete the field.
+Similarly, in the date fields, you can use the arrow keys or just type a date.
+
+Selecting a seat type also relies on the arrow keys, or you can type "w", "a",
+or "n" to jump to a seat option. Then you can disable the promotional offers
+default by pressing the spacebar while the checkbox is focused. Finally, focus
+the Search button and press `Enter` to submit the form.
+
+It's very handy to interact with a form using just the keyboard and to not have
+to switch to the mouse and back to complete a task. Because all of the elements
+used in the form are native HTML tags with implicit focus, the form works fine
+with the keyboard, and you don't have to write any code to add or manage focus
+behavior.
+
diff --git a/src/site/content/en/blog/forbes/index.md b/src/site/content/en/blog/forbes/index.md
new file mode 100644
index 00000000000..75a217a055c
--- /dev/null
+++ b/src/site/content/en/blog/forbes/index.md
@@ -0,0 +1,16 @@
+---
+layout: post
+title: Forbes
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+Forbes is re-defining modern web development with Progressive Web App
+technology.
+
+{% YouTube id="JmC0xkCMFCE" %}
+
diff --git a/src/site/content/en/blog/fugu-status/index.md b/src/site/content/en/blog/fugu-status/index.md
deleted file mode 100644
index 8267738fa95..00000000000
--- a/src/site/content/en/blog/fugu-status/index.md
+++ /dev/null
@@ -1,325 +0,0 @@
----
-title: New capabilities status
-subhead: Web apps should be able to do anything native apps can. Google wants to make it possible for you to build and deliver apps on the open web that have never been possible before.
-date: 2018-11-12
-updated: 2020-06-24
-tags:
-  - blog
-  - capabilities
----
-
-{% Aside %}
-This is a living document and will be updated as features move between
-states.
-{% endAside %}
-
-The [capabilities project][capabilities-project] is a cross-company effort at Google
-to make it possible for web apps to do anything native apps can, by exposing the
-capabilities of native platforms to the web platform, while maintaining user
-security, privacy, trust, and other core tenets of the web.
-
-You can see the full list of new and potential capabilities at
-the [Fugu API Tracker](https://goo.gle/fugu-api-tracker).
-
-## Capabilities available behind a flag {: #flag }
-
-These APIs are only available behind a flag. They're experimental and still
-under development. They are not ready for use in production. There's a good
-chance there are bugs, that these APIs will break, or the API surface will
-change.<a name="shape-face-text"></a>
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Capability</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <a href="/shape-detection/">Shape&nbsp;Detection (Face and Text)</a>
-        </td>
-        <td>
-          Shape detection opens up native
-          implementations of shape detection services and exposes them through
-          a set of JavaScript interfaces. In additon to the APIs below, the
-          Barcode Detection API is available in stable. For more information,
-          <a href="#shape-barcode">Shape Detection (Barcode)</a>.
-          <ul>
-            <li><a href="https://www.chromestatus.com/feature/5678216012365824">Face Detection API</a></li>
-            <li><a href="https://www.chromestatus.com/feature/5644087665360896">Text Detection API</a></li>
-          </ul>
-          <em>Updated April 14, 2020</em>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-## Capabilities available as an origin trial {: #origin-trial }
-
-These APIs are available as an [origin trial][ot-dashboard] in Chrome. Origin
-trials provide an opportunity for Chrome to validate experimental features and
-APIs, and make it possible for you to provide feedback on their usability
-and effectiveness in broader deployment.
-
-Opting into an origin trial allows you to build demos and prototypes that
-your beta testing users can try for the duration of the trial without requiring
-them to flip any special flags in their browser. There's more info on origin
-trials in the [Origin Trials Guide for Web Developers][ot-guide].
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Capability</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <a href="/content-indexing-api/">Content Indexing API</a>
-        </td>
-        <td>
-          Your PWA might cache articles and media files, but how will your users
-          know that your pages work while offline? The Content Indexing API is
-          one answer to this question currently in an origin trial. Once the
-          index is populated with content from your PWA, as well as any other
-          installed PWAs, it will show up in dedicated areas of supported
-          browsers.<br>
-          <em>Updated December 12, 2019</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/native-file-system/">
-            Native File System API
-          </a>
-        </td>
-        <td>
-          The Native File System API (formerly known as the Writable Files API)
-          enables developers to build powerful web apps that interact with files
-          on the user's local device, like IDEs, photo and video editors, text
-          editors, and more. After a user grants a web app access, this API
-          allows web apps to read or save changes directly to files and folders
-          on the user's device.<br>
-          <em>Updated April 13, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/notification-triggers/">
-            Notification Triggers
-          </a>
-        </td>
-        <td>
-          Notification Triggers let you schedule notifications in advance, so
-          that the operating system will deliver the notification at the right
-          time - even if there is no network connectivity, or the device is in
-          battery saver mode.<br>
-          <em>Updated December 12, 2019</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="https://codelabs.developers.google.com/codelabs/web-serial/">
-            Serial API
-          </a>
-        </td>
-        <td>
-          The Web Serial API provides a way for websites to read from and
-          write to a serial device with scripts. The API bridges the web and
-          the physical world by allowing websites to communicate with serial
-          devices, such as microcontrollers and 3D printers.<br>
-          <em>Updated March 1, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/nfc/">Web NFC</a>
-        </td>
-        <td>
-          Web NFC provides sites the ability to read and write to NFC tags when
-          they are in close proximity to the user's device.
-          For example, museums and art galleries could display additional
-          information about a display when the user touches their device to an
-          NFC card near the exhibit; or an inventory management web app could
-          read or write data to an NFC tag on a container to update information
-          on its contents.<br>
-          <em>Updated December 12, 2019</em>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-## Capabilities available in stable {: #in-stable }
-
-The following APIs have graduated from origin trial and are available in the
-latest version of Chrome, and in many cases other Chromium based browsers.
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Capability</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <a href="/wakelock/">Wake Lock API</a>
-        </td>
-        <td>
-          To avoid draining the battery, most devices will quickly fall asleep
-          when left idle. While this is fine most of the time, there are
-          some applications that need to keep the screen or the device awake in
-          order to complete some work. The Wake Lock API provides a way to
-          prevent the device from dimming or locking the screen or prevent
-          the device from going to sleep when an application needs to keep
-          running.<br>
-          <em>Updated June 24, 2020</em>
-        </td>
-      </tr>     
-      <tr>
-        <td>
-          <a href="/badging-api/">Badging API</a>
-        </td>
-        <td>
-          The Badging API allows web apps to set an application-wide badge,
-          shown in an operating-system-specific place associated with the
-          application, such as the shelf or home screen. Badging makes it easy
-          to subtly notify the user that there is some new activity that might
-          require their attention, or it can be used to indicate a small
-          amount of information, such as an unread count.<br/>
-          <div class="w-aside w-aside--note">
-          Despite a stable version of the spec shipping in Chrome 81, an origin
-          trial is running in Chrome 79 and Chrome 81 until September 15, 2020.
-          </div>
-          <em>Updated March 16, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/image-support-for-async-clipboard/">
-            Async&nbsp;Clipboard API (images)
-          </a>
-        </td>
-        <td>
-          The Asynchronous Clipboard API makes it possible to read and write
-          text or image data to the clipboard, without blocking the main
-          thread.<br>
-          <em>Updated February 26, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/contact-picker/">Contact Picker API</a>
-        </td>
-        <td>
-          The Contact Picker API is an on-demand picker that allows users to
-          select entries from their contact list and share limited details of
-          the selected entries with a website. It allows users to share only
-          what they want, when they want, and makes it easier for users to
-          reach and connect with their friends and family.<br>
-          <em>Updated January 10, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/get-installed-related-apps/">
-            Get Installed Related Apps API
-          </a>
-        </td>
-        <td>
-          The Get Installed Related Apps API is a web platform API
-          that allows your web app to check to see if your native app is
-          installed on the users device, and vice versa.<br>
-          <em>Updated December 18, 2019</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/periodic-background-sync/">Periodic Background Sync API</a>
-        </td>
-        <td>
-          Periodic Background Sync enables web applications to periodically
-          synchronize data in the background, bringing web apps closer to
-          the behavior of a native app.<br>
-          <em>Updated December 18, 2019</em><a name="shape-barcode"></a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/shape-detection/">Shape&nbsp;Detection (Barcode)</a>
-        </td>
-        <td>
-          Shape detection opens up native
-          implementations of shape detection services and exposes them through
-          a set of JavaScript interfaces. Shape detection has three separate
-          APIs, of which the Barcode API is only one. See
-          <a href="#shape-face-text">Shape Detection (Face and Text)</a>
-          for information on other shape detection APIs that are under
-          development.<br>
-          <em>Updated April 14, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/sms-receiver-api-announcement/">Web OTP API</a>
-        </td>
-        <td>
-          Finding, memorizing, and typing OTPs sent via SMS is cumbersome.
-          The Web OTP API (formerly the SMS Receiver API) simplifies the OTP
-          workflow for users.<br>
-          <em>Updated March 26, 2020</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/web-share/">Web Share</a>
-        </td>
-        <td>
-          With the Web Share API, web apps are able to use the same
-          system-provided share capabilities as native apps. The Web Share API
-          makes it possible for web apps to share links, text, and files to
-          other apps installed on the device in the same way as native apps.<br>
-          <em>Updated November 8, 2019</em>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="/web-share-target/">Web Share Target</a>
-        </td>
-        <td>
-          The Web Share Target API allows installed web apps to register with
-          the underlying OS as a share target to receive shared content from
-          either the Web Share API or system events, like the OS-level share
-          button.<br>
-          <em>Updated November 8, 2019</em>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-## Suggest a new capability {: #suggest-new }
-
-Do you have a suggestion for a capability you think Chrome should consider?
-Tell us about it by filing a [new feature request](https://goo.gl/qWhHXU).
-Please be sure to include as much detail as you can, such as
-the problem you're trying to solve, suggested use cases, and anything else
-that might be helpful.
-
-{% Aside %}
-  Want to try some of these new capabilities? Check out the
-  [Web Capabilities Codelab](https://codelabs.developers.google.com/codelabs/web-capabilities/).
-{% endAside %}
-
-[ot-dashboard]: https://developers.chrome.com/origintrials/#/trials/active
-[ot-guide]: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
-[capabilities-project]: https://developers.google.com/web/updates/capabilities
diff --git a/src/site/content/en/blog/fullscreen/index.md b/src/site/content/en/blog/fullscreen/index.md
new file mode 100644
index 00000000000..64aac9b576f
--- /dev/null
+++ b/src/site/content/en/blog/fullscreen/index.md
@@ -0,0 +1,569 @@
+---
+layout: post
+title: Making Fullscreen Experiences
+description: >
+  Going fullscreen.
+date: 2016-10-01
+updated: 2018-09-20
+---
+
+{% YouTube "ZRqr5x73-ng" %}
+
+We have the ability to easily make immersive fullscreen websites and
+applications, but like anything on the web there are a couple of ways to do it.
+This is especially important now that more browsers are supporting an "installed
+web app" experience which launch fullscreen.
+
+## Getting your app or site fullscreen
+
+There are several ways that a user or developer can get a web app fullscreen.
+
+- Request the browser go fullscreen in response to a user gesture.
+- Install the app to the home screen.
+- Fake it: auto-hide the address bar.
+
+### Request the browser go fullscreen in response to a user gesture
+
+<a href="http://caniuse.com/#feat=fullscreen">Not all platforms are equal</a>.
+iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android,
+Firefox, and IE 11+. Most applications you build will use a combination of the
+JS API and the CSS selectors provided by the fullscreen specification. The main
+JS API's that you need to care about when building a fullscreen experience are:
+
+- `element.requestFullscreen()` (currently prefixed in Chrome, Firefox, and IE)
+  displays the element in fullscreen mode.
+- `document.exitFullscreen()` (currently prefixed in Chrome, Firefox and IE.
+  Firefox uses `cancelFullScreen()` instead) cancels fullscreen mode.
+- `document.fullscreenElement` (currently prefixed in Chrome, Firefox, and IE)
+  returns true if any of the elements are in fullscreen mode.
+
+{% Aside %}
+You will notice that in the prefixed versions there is a lot of
+inconsistency between the casing of the 'S' in screen. This is awkward, but
+this is the problem with specs that are in flight.
+{% endAside %}
+
+When your app is fullscreen you no longer have the browser's UI controls
+available to you. This changes the way that users interact with your
+experience. They don't have the standard navigation controls such as Forwards
+and Backwards; they don't have their escape hatch that is the Refresh button. It's
+important to cater for this scenario. You can use some CSS selectors to help
+you change the style and presentation of your site when the browser enters
+fullscreen mode.
+
+```html
+<button id="goFS">Go fullscreen</button>
+<script>
+  var goFS = document.getElementById('goFS');
+  goFS.addEventListener(
+    'click',
+    function () {
+      document.body.requestFullscreen();
+    },
+    false,
+  );
+</script>
+```
+
+The above example is a little contrived; I've hidden all the complexity around
+the use of vendor prefixes.
+
+The actual code is a lot more complex. <a
+href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Mozilla
+has created</a> a very useful script that you can use to toggle fullscreen. As
+you can see, the vendor prefix situation it is complex and
+cumbersome compared to the specified API. Even with the slightly simplified code
+below, it is still complex.
+
+```js
+function toggleFullScreen() {
+  var doc = window.document;
+  var docEl = doc.documentElement;
+
+  var requestFullScreen =
+    docEl.requestFullscreen ||
+    docEl.mozRequestFullScreen ||
+    docEl.webkitRequestFullScreen ||
+    docEl.msRequestFullscreen;
+  var cancelFullScreen =
+    doc.exitFullscreen ||
+    doc.mozCancelFullScreen ||
+    doc.webkitExitFullscreen ||
+    doc.msExitFullscreen;
+
+  if (
+    !doc.fullscreenElement &&
+    !doc.mozFullScreenElement &&
+    !doc.webkitFullscreenElement &&
+    !doc.msFullscreenElement
+  ) {
+    requestFullScreen.call(docEl);
+  } else {
+    cancelFullScreen.call(doc);
+  }
+}
+```
+
+We web developers hate complexity. A nice high-level abstract API you can use
+is <a href="http://sindresorhus.com/screenfull.js"/>Sindre Sorhus'</a> <a
+href="https://github.com/sindresorhus/screenfull.js">Screenfull.js</a> module
+which unifies the two slightly different JS API's and vendor prefixes into one
+consistent API.
+
+#### Fullscreen API Tips
+
+##### Making the document fullscreen
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/r3tGdLoXAX3U0hAZlQyx.png", alt="Fullscreen on the body element", width="768", height="1280" %}
+  <figcaption>Figure 1: Fullscreen on the body element.</figcaption>
+</figure>
+
+It is natural to think that you take the body element fullscreen, but if you are
+on a WebKit or Blink based rendering engine you will see it has an odd effect of
+shrinking the body width to the smallest possible size that will contain all the
+content. (Mozilla Gecko is fine.)
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/UkTVbXdrYFyvPFCO3UYv.png", alt="Fullscreen on the document element", width="768", height="1280" %}
+<figcaption>Figure 2: Fullscreen on the document element.</figcaption>
+</figure>
+
+To fix this, use the document element instead of the body element:
+
+```js
+document.documentElement.requestFullscreen();
+```
+
+##### Making a video element fullscreen
+
+To make a video element fullscreen is exactly the same as making any other
+element fullscreen. You call the `requestFullscreen` method on the video
+element.
+
+```html
+<video id="videoElement"></video>
+<button id="goFS">Go Fullscreen</button>
+<script>
+  var goFS = document.getElementById('goFS');
+  goFS.addEventListener(
+    'click',
+    function () {
+      var videoElement = document.getElementById('videoElement');
+      videoElement.requestFullscreen();
+    },
+    false,
+  );
+</script>
+```
+
+If your `<video>` element doesn't have the controls attribute defined,
+there's no way for the user to control the video once they are fullscreen. The
+recommended way to do this is to have a basic container that wraps the video and
+the controls that you want the user to see.
+
+```html
+<div id="container">
+  <video></video>
+  <div>
+    <button>Play</button>
+    <button>Stop</button>
+    <button id="goFS">Go fullscreen</button>
+  </div>
+</div>
+<script>
+  var goFS = document.getElementById('goFS');
+  goFS.addEventListener(
+    'click',
+    function () {
+      var container = document.getElementById('container');
+      container.requestFullscreen();
+    },
+    false,
+  );
+</script>
+```
+
+This gives you a lot more flexibility because you can combine the container
+object with the CSS pseudo selector (for example to hide the "goFS" button.)
+
+```html
+<style>
+  #goFS:-webkit-full-screen #goFS {
+    display: none;
+  }
+  #goFS:-moz-full-screen #goFS {
+    display: none;
+  }
+  #goFS:-ms-fullscreen #goFS {
+    display: none;
+  }
+  #goFS:fullscreen #goFS {
+    display: none;
+  }
+</style>
+```
+
+Using these patterns, you can detect when fullscreen is running and adapt your
+user interface appropriately, for example:
+
+- By providing a link back to the start page
+- By Providing a mechanism to close dialogs or travel backwards
+
+### Launching a page fullscreen from home screen
+
+Launching a fullscreen web page when the user navigates to it is not possible.
+Browser vendors are very aware that a fullscreen experience on every page load
+is a huge annoyance, therefore a user gesture is required to enter fullscreen.
+Vendors do allow users to "install" apps though, and the act of installing is a
+signal to the operating system that the user wants to launch as an app on the
+platform.
+
+Across the major mobile platforms it is pretty easy to implement using either
+meta tags, or manifest files as follows.
+
+#### iOS
+
+Since the launch of the iPhone, users have been able to install Web Apps to
+the home screen and have them launch as full-screen web apps.
+
+```html
+<meta name="apple-mobile-web-app-capable" content="yes" />
+```
+
+<blockquote>
+<p>If content is set to yes, the web application runs in full-screen mode;
+otherwise, it does not. The default behavior is to use Safari to display web
+content. You can determine whether a webpage is displayed in full-screen mode
+using the window.navigator.standalone read-only Boolean JavaScript property.</p>
+<cite>
+<a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Apple</a>
+</cite>
+</blockquote>
+
+#### Chrome for Android
+
+The Chrome team has recently implemented a feature that tells the browser to
+launch the page fullscreen when the user has added it to the home screen. It is
+similar to the iOS Safari model.
+
+```html
+<meta name="mobile-web-app-capable" content="yes" />
+```
+
+<blockquote>
+<p>You can set up your web app to have an application shortcut icon added to a
+device's home screen, and have the app launch in full-screen "app mode" using
+Chrome for Android's "Add to Home screen" menu item.</p>
+<cite>
+<a href="https://developers.chrome.com/multidevice/android/installtohomescreen">Google Chrome</a>
+</cite>
+</blockquote>
+
+A better option is to use the Web App Manifest.
+
+#### Web App Manifest (Chrome, Opera, Firefox, Samsung)
+
+The [Manifest for Web applications](/web/fundamentals/web-app-manifest)
+is a simple JSON file that gives you, the
+developer, the ability to control how your app appears to the user in the areas
+that they would expect to see apps (for example the mobile home screen), direct
+what the user can launch and, more importantly, how they can launch it. In the
+future the manifest will give you even more control over your app, but right now
+we are just focusing on how your app can be launched. Specifically:
+
+1. Telling the browser about your manifest
+2. Describing how to launch
+
+Once you have the manifest created and it is hosted on your site, all you need
+to do is add a link tag from all your pages that encompass your app, as follows:
+
+```html
+<link rel="manifest" href="/manifest.json" />
+```
+
+Chrome has supported Manifests since version 38 for Android (October 2014)
+and it gives you the control over how your web app appears when it is installed
+to the home screen (via the `short_name`, `name` and `icons` properties) and how it
+should be launched when the user clicks on the launch icon (via `start_url`,
+`display` and `orientation`).
+
+An example manifest is shown below. It doesn't show everything that can be in a
+manifest.
+
+```json
+{
+  "short_name": "Kinlan's Amaze App",
+  "name": "Kinlan's Amazing Application ++",
+  "icons": [
+    {
+      "src": "launcher-icon-4x.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "landscape"
+}
+```
+
+This feature is entirely progressive and allows you create better, more
+integrated experiences for users of a browser that supports the feature.
+
+When a user adds your site or app to the home screen, there is an intent by the
+user to treat it like an app. This means you should aim to direct the user to
+the functionality of your app rather than a product landing page. For example,
+if the user is required to sign-in to your app, then that is a good page to
+launch.
+
+##### Utility apps
+
+The majority of utility apps will benefit from this immediately. For those
+apps you'll likely want them launched standalone just alike every other app
+on a mobile platform. To tell an app to launch standalone, add this the Web
+App Manifest:
+
+```json
+    "display": "standalone"
+```
+
+##### Games
+
+The majority of games will benefit from a manifest immediately. The vast
+majority of games will want to launch full-screen and forced a specific
+orientation.
+
+If you are developing a vertical scroller or a game like Flappy Birds then you
+will most likely want your game to always be in portrait mode.
+
+```json
+    "display": "fullscreen",
+    "orientation": "portrait"
+```
+
+If on the other hand you are building a puzzler or a game like X-Com, then you
+will probably want the game to always use the landscape orientation.
+
+```json
+    "display": "fullscreen",
+    "orientation": "landscape"
+```
+
+##### News sites
+
+News sites in most cases are pure content-based experiences. Most developers
+naturally wouldn't think of adding a manifest to a news site. The manifest
+will let you define what to launch (the front page of your news site) and
+how to launch it (fullscreen or as a normal browser tab).
+
+The choice is up to you and how you think your users will like to access your
+experience. If you want your site to have all the browser chrome that you would
+expect a site to have, you can set the display to `browser`.
+
+```json
+    "display": "browser"
+```
+
+If you want your news site to feel like the majority of news-centric apps treat
+their experiences as apps and remove all web-like chrome from the UI, you can
+do this by setting display to `standalone`.
+
+```json
+    "display": "standalone"
+```
+
+### Fake it: auto-hide the address bar
+
+You can "fake fullscreen" by auto-hiding the address bar as follows:
+
+```js
+window.scrollTo(0, 1);
+```
+
+{% Aside 'caution' %}
+Caution: I am telling you this as a friend. It exists. It is a thing, but it
+is a hack. Please don't use it. &mdash; Paul
+{% endAside %}
+
+This is a pretty simple method, the page loads and the browser bar is told to
+get out of the way. Unfortunately it is not standardized and not well
+supported. You also have to work around a bunch of quirks.
+
+For example browsers often restore the position on the page when the user
+navigates back to it. Using `window.scrollTo` overrides this, which annoys
+the user. To work around this you have to store the last position in
+localStorage, and deal with the edge cases (for example, if the user has the
+page open in multiple windows).
+
+## UX guidelines
+
+When you are building a site that takes advantage of full screen there are a
+number of potential user experience changes that you need to be aware of to
+be able to build a service your users will love.
+
+### Don't rely on navigation controls
+
+iOS does not have a hardware back button or refresh gesture. Therefore you must
+ensure that users can navigate throughout the app without getting locked in.
+
+You can detect if you are running in a fullscreen mode or an installed mode
+easily on all the major platforms.
+
+#### iOS
+
+On iOS you can use the `navigator.standalone` boolean to see if the user has
+launched from the home screen or not.
+
+```js
+if (navigator.standalone == true) {
+  // My app is installed and therefore fullscreen
+}
+```
+
+#### Web App Manifest (Chrome, Opera, Samsung)
+
+When launching as an installed app, Chrome is not running in true fullscreen
+experience so `document.fullscreenElement` returns null and the CSS selectors
+don't work.
+
+When the user requests fullscreen via a gesture on your site, the standard
+fullscreen API's are available including the CSS pseudo selector that lets you
+adapt your UI to react to the fullscreen state like the following
+
+```css
+selector:-webkit-full-screen {
+  display: block; // displays the element only when in fullscreen
+}
+
+selector {
+  display: none; // hides the element when not in fullscreen mode
+}
+```
+
+If the users launches your site from the home screen the `display-mode` media
+query will be set to what was defined in the Web App Manifest. In the case of
+pure fullscreen it will be:
+
+```css
+@media (display-mode: fullscreen) {
+}
+```
+
+If the user launches the application in standalone mode, the `display-mode`
+media query will be `standalone`:
+
+```css
+@media (display-mode: standalone) {
+}
+```
+
+#### Firefox
+
+When the user requests fullscreen via your site or the user launches the app in
+fullscreen mode all the standard fullscreen API's are available, including the
+CSS pseudo selector, which lets you adapt your UI to react to the fullscreen state
+like the following:
+
+```css
+selector:-moz-full-screen {
+  display: block; // hides the element when not in fullscreen mode
+}
+
+selector {
+  display: none; // hides the element when not in fullscreen mode
+}
+```
+
+#### Internet Explorer
+
+In IE the CSS pseudo class lacks a hyphen, but otherwise works similarly to
+Chrome and Firefox.
+
+```css
+selector:-ms-fullscreen {
+  display: block;
+}
+
+selector {
+  display: none; // hides the element when not in fullscreen mode
+}
+```
+
+#### Specification
+
+The spelling in the specification matches the syntax used by IE.
+
+```css
+selector:fullscreen {
+  display: block;
+}
+
+selector {
+  display: none; // hides the element when not in fullscreen mode
+}
+```
+
+### Keep the user in the fullscreen experience
+
+The fullscreen API can be a little finicky sometimes. Browser vendors don't want
+to lock users in a fullscreen page so they have developed mechanisms to break
+out of fullscreen as soon as they possibly can. This means you can't build a
+fullscreen website that spans multiple pages because:
+
+- Changing the URL programmatically by using `window.location = "http://example.com"` breaks out of fullscreen.
+- A user clicking on an external link inside your page will exit fullscreen.
+- Changing the URL via the `navigator.pushState` API will also break out of the
+  fullscreen experience.
+
+You have two options if you want to keep the user in a fullscreen experience:
+
+1. Use the installable web app mechanisms to go fullscreen.
+2. Manage your UI and app state using the # fragment.
+
+By using the #syntax to update the url (window.location = "#somestate"), and
+listening to the `window.onhashchange` event you can use the browser's own
+history stack to manage changes in the application state, allow the user to use
+their hardware back buttons, or offer a simple programmatic back button
+experience by using the history API as follows:
+
+```js
+window.history.go(-1);
+```
+
+### Let the user choose when to go fullscreen
+
+There is nothing more annoying to the user than a website doing something
+unexpected. When a user navigates to your site don't try and trick them into
+fullscreen.
+
+Don't intercept the first touch event and call `requestFullscreen()`.
+
+1. It is annoying.
+2. Browsers may decided to prompt the user at some point in the future about
+   allowing the app to take up the fullscreen.
+
+If you want to launch apps fullscreen think about using the install
+experiences for each platform.
+
+### Don't spam the user to install your app to a home screen
+
+If you plan on offering a fullscreen experience via the installed app mechanisms
+be considerate to the user.
+
+- Be discreet. Use a banner or footer to let them know they can install the
+  app.
+- If they dismiss the prompt, don't show it again.
+- On a users first visit they are unlikely to want to install the app unless
+  they are happy with your service. Consider prompting them to install after
+  a positive interaction on your site.
+- If a user visits your site regularly and they don't install the app, they are
+  unlikely to install your app in the future. Don't keep spamming them.
+
+## Conclusion
+
+While we don't have a fully standardized and implemented API, using some of the
+guidance presented in this article you can easily build experiences that take
+advantage of the user's entire screen, irrespective of the client.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/gamepad/index.md b/src/site/content/en/blog/gamepad/index.md
new file mode 100644
index 00000000000..0b314861bdf
--- /dev/null
+++ b/src/site/content/en/blog/gamepad/index.md
@@ -0,0 +1,300 @@
+---
+title: Play the Chrome dino game with your gamepad
+subhead: Learn how to use the Gamepad API to push your web games to the next level.
+description: |
+  Learn to control web games with the Gamepad API.
+authors:
+  - thomassteiner
+date: 2020-11-03
+updated: 2023-02-02
+hero: image/admin/nnmBquEmUtTIh89pkhvp.jpg
+alt: The hands of a person playing the Chrome dino game on a game console.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  # - gamepad
+  - devices
+---
+
+Chrome's offline page easter egg is one of the worst-kept secrets in history (`[citation needed]`,
+but claim made for the dramatic effect). If you press the <kbd>space</kbd> key or, on mobile
+devices, tap the dinosaur, the offline page becomes a playable arcade game. You might be aware that
+you do not actually have to go offline when you feel like playing: in Chrome, you can just navigate
+to `about://dino`, or, for the geek in you, browse to `about://network-error/-106`. But did you know
+that there are currently
+[270 million Chrome dino games played every month](https://www.blog.google/products/chrome/chrome-dino#jump-content:~:text=There%20are%20currently%20270%20million%20games%20played%20every%20month)?
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BQ9zVNGfI0PjH6LTwxj5.png", alt="Chrome's offline page with the Chrome dino game.", width="800", height="647" %}
+  <figcaption>
+    Press the space bar to play!
+  </figcaption>
+</figure>
+
+Another fact that arguably is more useful to know and that you might not be aware of is that in
+arcade mode you can play the game with a gamepad. Gamepad support was added roughly one year ago as
+of the time of this writing in a
+[commit](https://github.com/chromium/chromium/commit/fcafd36b23c535e307da4213b7d639f8c13b8da2) by
+[Reilly Grant](https://github.com/reillyeon). As you can see, the game, just like the rest of the
+Chromium project, is fully
+[open source](https://github.com/chromium/chromium/tree/master/components/neterror/resources). In
+this post, I want to show you how to use the Gamepad API.
+
+## Using the Gamepad API
+
+{% Aside %} The [Gamepad API](https://w3c.github.io/gamepad/) has been around for a long time. This
+post disregards all the legacy features and vendor prefixes. {% endAside %}
+
+### Feature detection and browser support
+
+The Gamepad API has universally great [browser support](https://caniuse.com/gamepad) across both
+desktop and mobile. You can detect if the Gamepad API is supported using the snippet below:
+
+```js
+if ('getGamepads' in navigator) {
+  // The API is supported!
+}
+```
+
+### How the browser represents a gamepad
+
+The browser represents gamepads as [`Gamepad`](https://developer.mozilla.org/docs/Web/API/Gamepad)
+objects. A `Gamepad` has the following properties:
+
+- `id`: An identification string for the gamepad. This string identifies the brand or style of
+  connected gamepad device.
+- `displayId`: The
+  [`VRDisplay.displayId`](https://developer.mozilla.org/docs/Web/API/VRDisplay/displayId) of an
+  associated [`VRDisplay`](https://developer.mozilla.org/docs/Web/API/VRDisplay) (if relevant).
+- `index`: The index of the gamepad in the navigator.
+- `connected`: Indicates whether the gamepad is still connected to the system.
+- `hand`: An enum defining what hand the controller is being held in, or is most likely to be held
+  in.
+- `timestamp`: The last time the data for this gamepad was updated.
+- `mapping`: The button and axes mapping in use for this device, either `"standard"` or
+  `"xr-standard"`.
+- `pose`: A [`GamepadPose`](https://developer.mozilla.org/docs/Web/API/GamepadPose) object
+  representing the pose information associated with a WebVR controller.
+- `axes`: An array of values for all axes of the gamepad, linearly normalized to the range of
+  `-1.0`–`1.0`.
+- `buttons`: An array of button states for all buttons of the gamepad.
+
+Note that buttons can be digital (pressed or not pressed) or analog (for example, 78% pressed). This
+is why buttons are reported as `GamepadButton` objects, with the following attributes:
+
+- `pressed`: The pressed state of the button (`true` if the button is currently pressed, and `false`
+  if it is not pressed.
+- `touched`: The touched state of the button. If the button is capable of detecting touch, this
+  property is `true` if the button is currently being touched, and `false` otherwise.
+- `value`: For buttons that have an analog sensor, this property represents the amount by which the
+  button has been pressed, linearly normalized to the range of `0.0`–`1.0`.
+- `hapticActuators`: An array containing
+  [`GamepadHapticActuator`](https://developer.mozilla.org/docs/Web/API/GamepadHapticActuator)
+  objects, each of which represents haptic feedback hardware available on the controller.
+
+One additional thing that you might encounter, depending on your browser and the gamepad you have,
+is a `vibrationActuator` property. This field is currently implemented in Chrome and earmarked for
+[merging](https://github.com/w3c/gamepad/pull/68) into the
+[Gamepad Extensions](https://w3c.github.io/gamepad/extensions.html) spec.
+
+The schematic overview below, taken
+[straight from the spec](https://w3c.github.io/gamepad/#fig-visual-representation-of-a-standard-gamepad-layout:~:text=Figure%201%20Visual%20representation%20of%20a%20standard%20gamepad%20layout.),
+shows the mapping and the arrangement of the buttons and axes on a generic gamepad.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qy6OxKmPAE5dpfLCMhZt.svg", alt="Schematic overview of the button and axes mappings of a common gamepad.", width="800", height="566" %}
+  <figcaption>
+    Visual representation of a standard gamepad layout
+    (<a href="https://w3c.github.io/gamepad/#fig-visual-representation-of-a-standard-gamepad-layout:~:text=Figure%201%20Visual%20representation%20of%20a%20standard%20gamepad%20layout.">Source</a>).
+  </figcaption>
+</figure>
+
+### Being notified when a gamepad gets connected
+
+To learn when a gamepad is connected, listen for the `gamepadconnected` event that triggers on the
+`window` object. When the user connects a gamepad, which can either happen via USB or via Bluetooth,
+a `GamepadEvent` is fired that has the gamepad's details in an aptly named `gamepad` property.
+Below, you can see an example from an Xbox 360 controller that I had lying around (yes, I am into
+retro gaming).
+
+```js
+window.addEventListener('gamepadconnected', (event) => {
+  console.log('✅ 🎮 A gamepad was connected:', event.gamepad);
+  /*
+    gamepad: Gamepad
+    axes: (4) [0, 0, 0, 0]
+    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
+    connected: true
+    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
+    index: 0
+    mapping: "standard"
+    timestamp: 6563054.284999998
+    vibrationActuator: GamepadHapticActuator {type: "dual-rumble"}
+  */
+});
+```
+
+### Being notified when a gamepad gets disconnected
+
+Being notified of gamepad disconnections happens analogously to the way connections are detected.
+This time the app listens for the `gamepaddisconnected` event. Note how in the example below
+`connected` is now `false` when I unplug the Xbox 360 controller.
+
+```js/6
+window.addEventListener('gamepaddisconnected', (event) => {
+  console.log('❌ 🎮 A gamepad was disconnected:', event.gamepad);
+  /*
+    gamepad: Gamepad
+    axes: (4) [0, 0, 0, 0]
+    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
+    connected: false
+    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
+    index: 0
+    mapping: "standard"
+    timestamp: 6563054.284999998
+    vibrationActuator: null
+  */
+});
+```
+
+### The gamepad in your game loop
+
+Getting ahold of a gamepad starts with a call to `navigator.getGamepads()`, which returns an array
+with `Gamepad` items. The array in Chrome _always_ has a fixed length of four items. If zero or less
+than four gamepads are connected, an item may just be `null`. Always be sure to check all items of
+the array and be aware that gamepads "remember" their slot and may not always be present at the
+first available slot.
+
+```js
+// When no gamepads are connected:
+navigator.getGamepads();
+// (4) [null, null, null, null]
+```
+
+If one or several gamepads are connected, but `navigator.getGamepads()` still reports `null` items,
+you may need to "wake" each gamepad by pressing any of its buttons. You can then poll the gamepad
+states in your game loop as shown below.
+
+```js
+const pollGamepads = () => {
+  // Always call `navigator.getGamepads()` inside of
+  // the game loop, not outside.
+  const gamepads = navigator.getGamepads();
+  for (const gamepad of gamepads) {
+    // Disregard empty slots.
+    if (!gamepad) {
+      continue;
+    }
+    // Process the gamepad state.
+    console.log(gamepad);
+  }
+  // Call yourself upon the next animation frame.
+  // (Typically this happens every 60 times per second.)
+  window.requestAnimationFrame(pollGamepads);
+};
+// Kick off the initial game loop iteration.
+pollGamepads();
+```
+
+{% Aside 'gotchas' %} Do not store a lasting reference to the `navigator.getGamepads()` array
+_outside_ of the game loop, since the method returns a static snapshot, not a live object. Call
+`navigator.getGamepads()` each time anew _in your game loop_. {% endAside %}
+
+### Using the vibration actuator
+
+The `vibrationActuator` property returns a `GamepadHapticActuator` object, which corresponds to a
+configuration of motors or other actuators that can apply a force for the purposes of haptic
+feedback. Haptic effects can be played by calling `Gamepad.vibrationActuator.playEffect()`. The only
+currently valid effect type is `'dual-rumble'`. Dual-rumble describes a haptic configuration with an
+eccentric rotating mass vibration motor in each handle of a standard gamepad. In this configuration,
+either motor is capable of vibrating the whole gamepad. The two masses are unequal so that the
+effects of each can be combined to create more complex haptic effects. Dual-rumble effects are
+defined by four parameters:
+
+- `duration`: Sets the duration of the vibration effect in milliseconds.
+- `startDelay`: Sets the duration of the delay until the vibration is started.
+- `strongMagnitude` and `weakMagnitude`: Set the vibration intensity levels for the heavier and
+  lighter eccentric rotating mass motors, normalized to the range `0.0`–`1.0`.
+
+```js
+// This assumes a `Gamepad` as the value of the `gamepad` variable.
+const vibrate = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
+  if (!('vibrationActuator' in gamepad)) {
+    return;
+  }
+  gamepad.vibrationActuator.playEffect('dual-rumble', {
+    // Start delay in ms.
+    startDelay: delay,
+    // Duration is ms.
+    duration: duration,
+    // The magnitude of the weak actuator (between 0 and 1).
+    weakMagnitude: weak,
+    // The magnitude of the strong actuator (between 0 and 1).
+    strongMagnitude: strong,
+  });
+};
+```
+
+### Integration with Permissions Policy
+
+The Gamepad API spec defines a
+[policy-controlled feature](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) identified by the
+string `"gamepad"`. Its default `allowlist` is `"self"`. A document's permissions policy determines
+whether any content in that document is allowed to access `navigator.getGamepads()`. If disabled in
+any document, no content in the document will be allowed to use `navigator.getGamepads()`, nor will
+the `gamepadconnected` and `gamepaddisconnected` events fire.
+
+```html
+<iframe src="index.html" allow="gamepad"></iframe>
+```
+
+## Demo
+
+A simple [gamepad tester demo](https://gamepad-demo.glitch.me/) is embedded below. The source code
+is available [on Glitch](https://glitch.com/edit/#!/gamepad-demo). Try the demo by connecting a
+gamepad via USB or Bluetooth and pressing any of its buttons or moving any of its axis.
+
+{% Glitch { id: 'gamepad-demo', path: 'script.js', height: 1000, allow: 'gamepad' } %}
+
+## Bonus: play Chrome dino on web.dev
+
+You can play [Chrome dino](https://tomayac.github.io/chrome-dino-gamepad/) with your gamepad on this
+very site. The source code is available [on GitHub](https://github.com/tomayac/chrome-dino-gamepad).
+Check out the gamepad polling implementation in
+[`trex-runner.js`](https://github.com/tomayac/chrome-dino-gamepad/blob/885eb6134805345bf31eeb9971830adeb84747ab/trex-runner.js#L529-L571)
+and note how it is emulating key presses.
+
+<div style="height: 420px; width: 100%;">
+  <iframe
+    src="https://tomayac.github.io/chrome-dino-gamepad/"
+    title="Chrome dino gamepad"
+    allow="gamepad; fullscreen"
+    style="height: 100%; width: 100%; border: 0;"
+    loading="lazy">
+  </iframe>
+</div>
+
+For the [Chrome dino gamepad](https://tomayac.github.io/chrome-dino-gamepad/) demo to work, I have
+ripped out the Chrome dino game from the core Chromium project (updating an
+[earlier effort](https://github.com/arnellebalane/trex-runner) by
+[Arnelle Ballane](https://arnellebalane.com/)), placed it on a standalone site, extended the
+existing gamepad API implementation by adding ducking and vibration effects, created a full screen
+mode, and [Mehul Satardekar](https://github.com/mehulsatardekar) contributed a dark mode
+implementation. Happy gaming!
+
+## Useful links
+
+- [Gamepad API spec](https://w3c.github.io/gamepad/)
+- [Gamepad API extensions spec](https://w3c.github.io/gamepad/extensions.html)
+- [GitHub repository](https://github.com/w3c/gamepad/)
+
+## Acknowledgements
+
+This article was reviewed by [François Beaufort](https://github.com/beaufortfrancois) and
+[Joe Medley](https://github.com/jpmedley). The Gamepad API spec is currently edited by
+[Steve Agoston](https://github.com/sagoston),
+[James Hollyer](https://www.linkedin.com/in/james-hollyer-981110a3/), and
+[Matt Reynolds](https://github.com/nondebug). The former spec editors are
+[Brandon Jones](https://blog.tojicode.com/), [Scott Graham](https://h4ck3r.net/), and
+[Ted Mielczarek](http://ted.mielczarek.org/). The Gamepad Extensions spec is edited by
+[Brandon Jones](https://blog.tojicode.com/). Hero image by Laura Torrent Puig.
diff --git a/src/site/content/en/blog/gde-focus-alba-silvente-fuentes/index.md b/src/site/content/en/blog/gde-focus-alba-silvente-fuentes/index.md
new file mode 100644
index 00000000000..95daec7f37f
--- /dev/null
+++ b/src/site/content/en/blog/gde-focus-alba-silvente-fuentes/index.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: 'GDE community highlight: Alba Silvente Fuentes'
+authors: 
+  - monikajanota
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5bk29uMufFZlPD09mRxV.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KH1ttCJSLsVcgdkmJiTx.png
+alt: 'Community highlights'
+subhead: >
+  Alba Silvente Fuentes is a Google Developer Expert, we talked to her about making coding and community-building human.
+description: >
+  One of a series of interviews with members of the Google Developers Experts (GDE) program.
+date: 2022-09-22
+tags:
+  - blog
+  - community
+---
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/TorTqrnIdn5WAXwPKLgS.jpeg", alt="Alba with a speaker lanyard.", width="800", height="598" %}
+</figure>
+
+**Monika:** What products are you working with? What's your professional focus, and what tools make your day-to-day work easy and efficient? 
+
+**Alba:** Most of my work on the frontend is done in Vue 3, with the new Webpack for the ecosystem called [Vite](https://vitejs.dev/), with semantic HTML, [Tailwind CSS](https://tailwindcss.com/), and sometimes with [Nuxt.js](https://nuxtjs.org/)—depending on the specifics of the project. Most of the time I'm creating web applications, although recently I also worked on creating Chrome extensions.
+
+I usually focus on the frontend part—building components—but I also like to keep in mind the project architecture, especially taking into account maintainability, performance, and scalability. That's why the content I'm creating in the community includes topics like Atomic Design, Jamstack, and design systems—I like to learn about new architectures that catch on. 
+
+And if there are tools that can't be missed in my day-to-day, these are: VS Code synchronized with my account to add extensions such as [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar), Eslint, and Prettier; Notion to document my work and for content creation; Chrome extensions like Toby, Web Vitals metrics, and Axe; and [Fig.io](https://fig.io/) for the terminal.
+
+**Monika:** How did you get here? When did you decide to focus on web development and frontend?
+
+**Alba:** I studied image and sound engineering in telecommunications, so nothing directly related to web development. During my studies, I learned the basics of coding with C and C++. When I realized I had a knack for programming, I decided to follow that path and dive deeper into web development. During my third year of college, we were required to do an internship, and since I wasn't sure what I wanted to do, I chose a web agency—there I was taught PHP, HTML, CSS, and jQuery, working as a full-stack developer.
+
+This made me realize that I actually prefer frontend development, I really liked what I was doing and wanted to focus just on that. So I started learning about frontend frameworks—Vue, React, and Angular. I tried all of them to finally fall in love with Vue.
+
+**Monika:** What do you think is the next big thing for web technologies?
+
+**Alba:** For me, the next big thing is about the changes going on with browsers like Chrome. The way we're improving CSS, the use of WebGL, and other JavaScript APIs, the accessibility standards, and so on. We can create a world inside a browser, just like in video games, or focus on making it accessible for everyone, inclusive.
+
+The future is to improve the way we use the web, so that performance is no longer a problem because we have it covered by all the emerging technologies. And so we can focus on creating value, digitizing our daily tasks and automating what wastes our time.
+
+**Monika:** What's the idea behind your podcast "No me da la vida"?
+
+**Alba:** When I became a content creator, I started writing articles in English. At that time, I moved to the Netherlands and thought it would also help me learn the language to use it professionally.
+
+My first language is Spanish, but back then I did not think about creating anything specifically for the community in Spain. The idea emerged when I met my co-host—I thought it would be good to create something together. So we joined forces and decided to give the podcast format a try. 
+
+One idea led to another—we wanted to create a space where less well-known people could talk about their experiences in the industry, but decided to focus on women. It was also an opportunity for us to meet great professionals. Thanks to the podcast, we got to know them and establish relationships.
+
+Of course, the ultimate goal was to exchange knowledge and learn from our guests. It's rarely about the frontend; the co-host and I are both frontend developers, so we liked the idea of being able to bring in people with other roles in the tech industry to tell us more about themselves. So far, we've had a chance to chat about AI, product management, and much more. It's fascinating.
+
+**Monika:** How do you keep your audience engaged?
+
+**Alba:** That's an interesting question! Actually, I'm lucky to be working with an expert. My co-host, Miriam, is creating content for social media, so we have this part covered. We shoot many short clips and share those on TikTok and Instagram, but also on our LinkedIn profile. The idea is to get people interested in the topic—only reveal a bit of the conversation and encourage them to find out what's next.
+
+We also agreed that we should invite the truly engaged followers—people who know us and our work. We decided to build a community on Discord to have everything in one place, this way it's easier for our audience to follow the podcast. It also creates an opportunity to interact, and exchange thoughts. 
+
+We're planning to organize live coding sessions or events at Twitch, Discord and such. It'll give us an opportunity to actually interact with our community, chat in real time and have fun together. We want to get to know our audience and with podcasts, the options are limited.
+
+Our podcast also has a section called "Cuéntame tus Penurias" ("Tell me about your hardships")—the guests tell stories of how they failed or suffered in their jobs working in the tech industry. The stories are not necessarily tech-related, they may tackle mental health, legal issues and so on. The audience can relate, but also offer some advice or help find a solution to the problem. This type of engagement is important because it shows that we're all just humans. 
+
+**Monika:** Do you see the industry changing, becoming more inclusive?
+
+**Alba:** As a content creator and blogger I have met many people in the community, most of them inclusive and always reflecting on their actions, but I could say I live in a sort of bubble.
+
+People who listen to our podcast and form a community around it are very inclusive and open-minded, but the thing is I don't really leave that circle that often. My closest environment is extremely friendly and inclusive. But on the other hand, I think we need to start somewhere. We can start to improve some things with a certain group of people, and they would later spread the word.
+
+**Monika:** What's important while building a community?
+
+**Alba:** I believe that it's crucial to have the right people organizing the events. Whenever I attend a meetup here in Amsterdam, I can feel that the organizers are relatable and human—going through difficulties, optimizing the way they work and talking about it openly. They would admit they feel nervous before a speech, and it makes the audience feel better around them. 
+
+For example, watching prepared tutorials on YouTube won't give you the same feeling.The creators of those don't make mistakes, unless it's a livestream, you don't see their real reactions, they have scripts prepared for that.
+
+Communities—for example, Google Developer Groups—are great, because you feel that you can fail live, and they'll still love you. It's amazing to feel that people around are just the same as me, and we can grow together. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/D2nOKPybx9AqsrkKC7KF.jpeg", alt="Alba and other attendees in front of a Google sign.", width="800", height="600" %}
+</figure>
+
+**Monika:** What's your story as a Google Developer Expert in web technologies? Would you recommend the program to a friend?
+
+**Alba:** My story as a GDE goes back to the beginning of the pandemic, when I was creating a lot of content. I met a few community members, one of them was Debbie O'Brien, who's also a GDE and an amazing supporter of women in tech. She appreciated my work and encouraged me to apply to the GDE program. Only problem—back then I did not know what it was! I was just starting my adventure with the dev community. It never occurred to me that I could be called an Expert. 
+
+I followed Debbie's advice and created a portfolio of all my contributions. The application process went really well, and I believed my knowledge and experience are truly valuable to the community. 
+
+Being a GDE is really cool. I'm learning so much from the community! I now spread the word about the program and hope some of my friends and colleagues will give it a try soon. 
+
+**Monika:** What are your activities in the community besides blogging and podcasting? Do you do open source?
+
+**Alba:** When I first got involved in open source projects, I created more documentation than actual code. Now I'm working on some boilerplates and demo projects for the new and upcoming technologies, for example, [Nuxt 3](https://v3.nuxtjs.org/). My goal is to help people who want to start building an app quickly—they can just use those pieces of code. I've never created a library of my own, I just contribute to and try to improve those that exist.
+
+I was also quite engaged in hackathons—contests where organizers ask you to build an app, make it open source, and prepare documentation for it. You would not get the prize if any of those were missing. And I won one of those! I created a [Potato Mood Generator](https://potatizer.dawntraoz.com/). [You can read all about it here](https://www.dawntraoz.com/blog/random-potato-mood-generator-do-app-platform/).
+
+I also host workshops where I teach people how to code  a website from scratch using Jamstack technologies, a headless CMS, and a Static Site Generator. I really prefer hosting those workshops over delivering speeches. I love seeing how people are learning as we go—you don't have that during a talk. After a speech, you may receive some feedback, but you won't see someone's finalized project. I love how everyone is typing together during a workshop. 
+
+**Monika:** And what makes a good workshop?
+
+**Alba:** You need to always explain the basics to make sure everyone understands. I try to explain each step in detail — the attendees need to know the process. I also always create a little glossary of new terms to be looked up during the class.
+
+During the workshop, it's crucial to set time to debrief and check the different projects' status after completing each step. I encourage the attendees to ask questions as often as they need. 
+
+So to sum up—it's all about communication. Ask the right questions, try not to lose people's attention, just be there for them. That's the best way to teach someone something new. 
diff --git a/src/site/content/en/blog/gde-focus-helpdev/index.md b/src/site/content/en/blog/gde-focus-helpdev/index.md
new file mode 100644
index 00000000000..f4fd32d981e
--- /dev/null
+++ b/src/site/content/en/blog/gde-focus-helpdev/index.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: 'A win-win situation'
+authors: 
+  - monikajanota
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5bk29uMufFZlPD09mRxV.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KH1ttCJSLsVcgdkmJiTx.png
+alt: 'Community highlights'
+subhead: >
+  GDE Enrique Fernandez Guerra on open sourcing his NGO HelpDev.
+description: >
+  GDE Enrique Fernandez Guerra on open sourcing his NGO HelpDev.
+date: 2022-07-14
+tags:
+  - blog
+  - community
+---
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/PD45CkrdOsFz3xyB5gJ8.jpeg", alt="Enrique on stage wearing a headset mic.", width="800", height="558" %}
+</figure>
+
+**Monika:** Let's start by learning a bit about you. What was your journey as a developer? What are you up to now?
+
+**Enrique:** I'm [Enrique](https://twitter.com/CKGrafico), but everyone calls me Quique. I've been a developer ever since I can remember. I was probably around 13 years old when me and my friend started to program very basic websites, we called them [Homer Simpson-like websites](https://simpsons.fandom.com/wiki/Homer%27s_Web_Page#:~:text=Homer%27s%20Web%20Page%20is%20a,didn%27t%20gain%20many%20hits.)—just for fun and for the sake of learning. Step by step, I continued programming on my own. In the end I decided to study engineering, but instead of computer science, I chose telecommunication.   
+
+I've been working as a front-end developer for as long as I can remember. I worked with many frameworks, including Angular, Vue, and React. Nowadays I'm based in Romania, working as a country director of engineering at my company. We're hiring truly outstanding professionals and I'm happy I get to share with them our work culture and help them along the way. I still consider myself a frontend specialist, but I'm more focused on managing people and projects. 
+
+**Monika:** Have you always been an active member of the community?
+
+**Enrique:** All this time I've been involved in various communities, I love this kind of networking. I started speaking at events and conferences, sharing content, and creating open-source libraries.   
+
+Nine years ago I decided to put my skills into use and fund [HelpDev](https://helpdev.org/)—an NGO focused on helping other NGOs with website development. It runs in my family—everyone is involved in NGOs, we love giving back to the community.  
+
+With HelpDev, the initial idea was to combine two kinds of activity—helping NGOs without resources and supporting young developers without any professional experience who wanted to improve their resumes. If you don't have any experience, it may be hard for you to secure a job since every company now asks for experience. We only work with NGOs that don't have any financial resources; if they're able to pay, we make sure they hire a contractor who'll be able to carry out what they need. 
+
+We started as a huge group of 50 people, which turned out to be impossible to manage properly. We needed to change the way of operating and continued for the next three to four years in a small group of five. At that point we were creating simple websites with Wordpress for our NGOs. When the pandemic started, we needed to rethink our activity and find better ways to make things happen. 
+
+**Monika:** And what did you change?
+
+**Enrique:** At the beginning of 2022, we moved all the content from Wordpress to [GitHub](https://github.com/helpdev), making the websites open-source. All the code is public now. We're using [Storyblok](https://www.storyblok.com/)—a headless CMS which offers an API with all the content and is easy to manage for non-technical users. Some people we're working with are very engaged volunteers but have limited technical knowledge. The tool needs to be really easy to allow them to operate on their own without problems.   
+
+For the frontend, we're using a technology called [Nuxt](https://nuxtjs.org/) based on [Vue](https://vuejs.org/). Combining those tools makes it easy for us to create more websites, only having to change color, branding, and content. We can use the same components for different websites.   
+
+Hopefully this year we'll finish the migration of the websites to the new platform. Now the NGOs don't have to pay anything for maintaining a website, just the domain, but other than that we ensure that the hosting is free. [Storyblok](https://www.storyblok.com/) is actually sponsoring us, and thanks to that, we have a free license. The companies we're partnering with usually help our NGOs with some assets they might need, for example, providing them with new branding.   
+
+Sometimes NGOs are founded in times of need—that happened after a devastating earthquake in Nepal, when organizations didn't have time to set everything up properly. We came to help.   
+
+Our goal is to make volunteering for NGOs as easy as possible—accessible anytime, from any place on earth. Open-sourcing our work was a way to do that. Now anyone can answer a request and fix a bug, or improve a website in some way. It allows more people to be engaged, but spend less time working on something. 
+
+**Monika:** While creating HelpDev, after the initial hype, did you work with anyone? Did anyone help you?
+
+**Enrique:** In the beginning, when there were 50 of us, the meetings were chaotic and we were not able to reach an agreement. In the end, four founders stayed to help me turn the HelpDev project into an official, registered NGO. They're still with the organization, working as vice presidents or advisors, and tackling financial and legal issues. Now, since we operate in an open-source model, we don't need that many people to be engaged all the time. It works really well. 
+
+**Monika:** HelpDev is an NGO helping other NGOs. Do you have a particular focus while choosing your partners?
+
+**Enrique:** Before becoming an open-source NGO we were only working with Spanish NGOs. Everything was done in a traditional way—face-to-face meetings, planning, phone calls, legal actions, and so on. Nowadays we're no longer limited to that, we can work with anyone around the world. We're also no longer  focussed on offering each of our partners an individual solution anymore—their websites are currently unified, which makes it easier to maintain and further develop. Whenever I create a new component, I can use it for all the websites. What is more, with [Storyblok](https://www.storyblok.com/), the NGOs will be able to implement most of the changes on their own.   
+
+The Spanish NGOs we previously worked with are really diverse, each having a different focus and different priorities. [NeedU](https://need-u.org/) works with homeless people in Barcelona, [Asocciación APISF](https://apisf.org/) supports doctors in Africa—the scope is really wide. In Spain, we have many NGOs for different causes and people frequently volunteer. It's quite popular. 
+
+**Monika:** What's next for HelpDev? What's going to change after moving to GitHub?
+
+**Enrique:** The challenge I'm currently facing is transforming an NGO into a [GitHub project](https://github.com/helpdev). Every community member knows how GitHub works—you have templates for issues and people helping with your request. It's not just libraries—I believe we can have much more than that. I'd love the whole project to be maintained entirely by the community—obviously our core team would still coordinate the main library and implement all changes if needed. Nonetheless,  all the bugs, new components, and small issues will eventually be fixed by volunteers around the world. I'm 100% sure community members would be eager to help us with that. And it's also beneficial for them—many of our requests are tagged as ‘Good First Issue' on GitHub, meaning that they're not technically challenging and would be a good fit for beginners who are just starting to build their portfolio. For example, right now we don't have a component for Carousel, but it's super easy to do.  Everyone is welcome to join and help.   
+
+For us, it's just as we planned from the beginning—helping both NGOs in need and young developers. 
+
+**Monika:** Are you involved in any other community activity right now?
+
+**Enrique:** Oh yes! I also created a web app called [Talento para tu evento](https://talentoparatuevento.tech/) (Talent for your event). Again, its goal is to help organizers looking for a speaker who can deliver a presentation on JavaScript and connect them with tech professionals searching for opportunities to share their knowledge. The whole idea is to be free of unconscious bias when  choosing a speaker. That's why all the personal info about the person is anonymized; an organizer will be choosing based on experience and proposed topics. I hope this will help underrepresented groups, for example, women, get the opportunities they deserve. 
+
+**Monika:** What motivated you to join the [Google Developer Experts](https://developers.google.com/community/experts) community?
+
+**Enrique:** I've always been involved in community activities. One day a friend of mine who is also a GDE—[Jorge del Casar](https://twitter.com/JorgeCasar)—invited me to the program. Our paths actually crossed 12 years ago—at that point we were both engaged in dev communities in our area. I thought it would be a great idea to join the GDE community. I even told the team during the interview that I'm not here for the swag (which is, of course, nice), but because I love interacting with people and chatting about technology, especially directly, during conferences and workshops. Being a Google Developer Expert also lets me exchange ideas and knowledge with the brightest minds in the industry, people who know a hundred times more than me—I appreciate their experience and expertise.   
+
+After joining the program, I also took part in Women Developer Academy as a mentor in 2021. It was a unique and inspiring experience—being able to mentor someone and put my knowledge into good use.   
+
+I also discovered new ways of sharing with a community. Last year I created a podcast and invited ten people from the industry to talk, not about technology but about themselves, to learn who they really are.   
+
+All of this wouldn't be possible without the GDE community. We're in touch on Slack, we see each other during different meet-ups and conferences, we have a chance to inspire each other. 
+
+**Monika:** Would you say that developers have the resources and ability to change the world for good?
+
+**Enrique:** I'm sure they do. In fact, not only developers, but all the professions out there have a lot to offer. The problem is often the people—we grow up in a society that pressures us to pursue perfection, do more than others, try harder. I believe sometimes it's good to stop for a moment and think that doing something for free, even though it doesn't bring you money, will bring you other kinds of benefits that money cannot buy.  
+
+We're now very well paid, it's a good moment for our profession. We can spare a moment to help others by mentoring, sharing knowledge, or teaching. 
+
+**Monika:** What would you say to someone who wants to follow in your footsteps?
+
+**Enrique:** I think that for me, one of the most important learnings of my professional career was not to be too specialized, not to focus on just one technology. It's better to enjoy what the industry has to offer. Even though I'm working on frontend, I've also tried a bit of DevOps, backend, IoT, and apps. I don't really care about being the best in Angular or any other framework. My goal is rather to be a good professional than just a good developer. As a hiring manager, I prefer a professional who maybe needs to improve their technical skills, but who is a well-organized, effective communicator. 
diff --git a/src/site/content/en/blog/gde-focus-lars-knudsen/index.md b/src/site/content/en/blog/gde-focus-lars-knudsen/index.md
new file mode 100644
index 00000000000..4787a3a7b3a
--- /dev/null
+++ b/src/site/content/en/blog/gde-focus-lars-knudsen/index.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: 'GDE community highlight: Lars Knudsen'
+authors:
+  - monikajanota
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5bk29uMufFZlPD09mRxV.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KH1ttCJSLsVcgdkmJiTx.png
+alt: 'Community highlights'
+subhead: >
+  Lars Knudsen is a Google Developer Expert, we talked to him about how a $10 device can make computers more accessible for people with disabilities.
+description: >
+  One of a series of interviews with members of the Google Developers Experts (GDE) program.
+date: 2022-11-09
+tags:
+  - blog
+  - community
+---
+
+<figure>
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/roVI1kelp323efzmIs7X.jpeg", alt="Lars presenting on stage with two other speakers.", width="800", height="600" %}
+</figure>
+
+**Monika:** What inspired you to become a developer? What’s your current professional focus?
+
+**Lars:** I got my MSc in engineering, but in fact my interest in tech started much earlier. When I was a kid in the 80s, my father owned a computing company working with graphic design. Sometimes, especially during the summer holidays, he would take me to work with him. At times, some of his employees would keep an eye on me. There was this really smart guy who once said to me, “Lars, I need to get some work done, but here's a C manual, and there’s a computer over there. Here’s how you start a C compiler. If you have any questions, come and ask me.” I started to write short texts that were translated into something the computer could understand. It seemed magical to me. I was 11 years old when I started and around seventh grade, I was able to create small applications for my classmates or to be used at school. That’s how it started.
+
+Over the years, I’ve worked for many companies, including Nokia,  Maersk, and Openwave. At the beginning, like in many other professions, because you know a little, you feel like you can do everything, but with time you learn each company has a certain way of doing things.
+
+After a few years of working for a medical company, I started my own business in 1999. I worked as a freelance contractor and, thanks to that, had the chance to get to know multiple organizations quickly. After completing the first five contracts, I found out that every company thinks they’ve found the perfect setup, but all of them are completely different. At that time, I was also exposed to a lot of different technologies, operating systems etc. Around my early twenties, my mindset changed. At the beginning, I was strictly focused on one technology and wanted to learn all about it. With time, I started to think about combining technologies as a way of improving our lives. I have a particular interest in narrowing the gap between what we call the A and the B team in the world. I try to transfer as much knowledge as possible to regions where people don’t have the luxury of owning a computer or studying at university free of charge.
+
+I continue to work as a contractor for external partners but, whenever possible, I try to choose projects that have some kind of positive impact on the environment or society. I’m currently working on embedded software for a hearing-aid company called [Oticon](https://www.oticon.com/). Software-wise, I’ve been working on everything from the tiniest microcontrollers to the cloud; a lot of what I do revolves around the web. I’m trying to combine technologies whenever it makes sense.
+
+**Monika**: Were you involved in developer communities before joining the Google Developer Experts program?
+
+**Lars:** Yes, I was engaged in meetups and conferences. I first connected with the community while working for Nokia. Around 2010, I met [Kenneth Rohde Christiansen](https://twitter.com/kennethrohde?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor), who became a GDE before me. He inspired me to see how web technologies can be useful for aspiring tech professionals in developing countries. Developing and deploying solutions using C++, C# or Java requires some years of experience, but everyone who has access to a computer, browser, and notepad can start developing  web-based applications and learn really fast. It’s possible to build a fully functional application with limited resources, and ramp up from nothing. That’s why I call the web a very democratizing technology stack.
+
+But back to the community—after a while I got interested in web standardization and what problems bleeding edge web technologies could solve. I experimented with new capabilities in a browser before release. I was working for Nokia at the time, developing for a Linux-based flagship device, the N9. The browser we built was WebKit based and I got some great experience developing features for a large open source project. In the years after leaving Nokia, I got involved in web conferences and meetups, so it made sense to join the GDE community in 2017.
+
+I really enjoy the community work and everything we’re doing together, especially the pre-pandemic Chrome Developer Summits, where I got to help with booth duty alongside a bunch of awesome Google Engineers and other GDEs.
+
+
+**Monika:** What advice would you give to a young developer who’s just starting their professional career and is not sure which path to take?
+
+**Lars**: I’d say from my own experience—if you can afford it—consider freelancing for a couple of different companies. This way, you’ll be exposed to code in many different forms and stages of development. You’ll get to know a multitude of operating systems and languages, and learn how to resolve problems in many ways. This helped me a lotI gained experience as senior developer in my twenties. This approach will help you achieve your professional goals faster.
+
+Besides that, have fun, explore, play with the hardware and software. Consider building something that solves a real problem—maybe for your friends, family, or a local business. Don’t be afraid to jump into something you’ve never done before.
+
+**Monika:** What does the future hold for web technologies?
+
+**Lars:** I think that for a couple of years now the web has been fully capable of providing a platform for large field applications, both for the consumer and for business. On the server side of things, web technologies offer a seamless experience, especially for frontend developers who want to build a backend component. It’s easier for them to get started now. I know people who were using both Firebase and Heroku to get the job done. And this trend will grow—web technologies will be enough to build complex solutions of any kind. I believe that the [Web Capabilities - Project Fugu 🐡](https://www.chromium.org/teams/web-capabilities-fugu/) really unlocks that potential.
+
+Looking at it from a slightly different point of view, I also think that if we provide full documentation and in-depth articles not only in English but also in other languages (for example, Spanish and Portuguese), we would unlock a lot of potential in Latin America—and other regions, of course. Developers there often don’t know English well enough to fully understand all the relevant articles. We should also give them the opportunity to learn as early as possible, even before they start university, while still in their hometowns. They may use those skills to help local communities and businesses before they leave home and maybe never come back.
+
+**Thomas:** You came a long way from doing C development on a random computer to hacking on hardware. How did you do that?
+
+**Lars:** I started taking apart a lot of hardware I had at home. My dad was not always happy when I couldn’t put it back together. With time, I learned how to build some small devices, but it really took off much later, around the time I joined Nokia, where I got my embedded experience. I had the chance to build small screensavers, components for the Series 30 phones. I was really passionate about it and could really think outside the box. They assigned me a task to build a Snake game for those devices. It was a very interesting experience. The main difference between building embedded systems and most other things (including web) is that you leave a small footprint—you don’t have much space or memory to use. While building Snake, the RAM that I had available was less than one-third of the frame buffer (around 120 x 120 pixels). I had to come up with ways to algorithmically rejoin components on screen so they’d look static, as if they were tiles. I learned a lot—that was the move from larger systems to small, embedded solutions.
+
+**Thomas:** The skill set of a typical frontend developer is very different from the skill set of someone who builds embedded hardware. How would you encourage a frontend developer to look into hardware and to start thinking in binary?
+
+**Lars:** I think that the first step is to look at some of the [Fugu APIs](https://fugu-tracker.web.app/) that work in Chrome and Edge, and are built into all the major systems today. That’s all you need at the start.
+
+Another thing is that the toolchains for building embedded solutions have a steep learning curve. If you want to build your own custom hardware, start with [Arduino](https://www.arduino.cc/) or [ESP32](http://esp32.net/)—something that is easy to buy and fairly cheap. With the right development environment, you can get your project up and running in no time.
+
+You could also buy a heart rate monitor or a multisensor unit, which are already using Bluetooth GATT services, so you don’t have to build your own hardware or firmware—you can use what’s already there and start experimenting with the Web Bluetooth API to start communicating with it.
+
+There are also devices that use a serial protocol—for these, you can use the [Web Serial API](https://developer.mozilla.org/docs/Web/API/Web_Serial_API) ([also Fugu](https://fugu-tracker.web.app/)). Recently I’ve been looking into using the [WebHID API](https://developer.mozilla.org/docs/Web/API/WebHID_API), which enables you to talk to all the human interface devices that everyone has access to. I found some old ones in my basement that had not been supported by any operating system for years, but thanks to reverse engineering it took me a few hours to re-enable them.
+
+There are different approaches depending on what you want to build, but to a web developer I would say, get a solid sensor unit, maybe a Thingy 52 from Nordic Semiconductor; it has a lot of sensors, and you can hook up to your web application with very little effort.
+
+**Thomas:** Connecting to the device is the first step, but then speaking to it effectively—that’s a whole other thing. How come you did not give up after facing obstacles? What kept you motivated to continue working?
+
+**Lars:** For me personally the social aspect of solving a problem was the most important. When I started working on my own embedded projects, I had a vision and a desire to build a science lab in a box for developing regions. My wife is from Mexico and I saw some of the schools there; some that are located outside of the big cities are pretty shabby, without access to the materials and equipment that we have in our part of the world.
+
+The passion for building something that can potentially be used to help others—that’s what kept me going. I also really enjoyed the community support. I reached out to some people at Google and all were extremely helpful and patiently answered all of my questions.
+
+**Thomas:** A lot of people have some sort of hardware at home, but don’t know what to do with it. How do you find inspiration for all your amazing projects, in particular the one under the working name [SimpleMouse](https://dev.to/denladeside/zephyr-web-bluetooth-and-accessibility-4ddm)?
+
+**Lars:** Well, recently I have been in fact reviving a lot of old hardware, but for this particular project—the name has not been set yet, but let’s call it SimpleMouse—I used my experience. I worked with some accessibility solutions earlier and I saw how some of them just don’t work anymore; you’d need to have an old Windows XP with certain software installed to run them. You can’t really update those, you can only use those at home because you can’t move your setup.
+
+Because of that, I wondered how to combine my skills from the embedded world with project Fugu and what is now possible on the web to create cheap, affordable hardware combined with easy-to-understand software on both sides, so people can build on that.
+
+For that particular project, I took a small USB dongle with a reflexive chip, the nRF52840. It communicates with Bluetooth on one side and USB on the other. You can basically program it to be anything on both sides. And then I thought about the devices that control a computer—a mouse and a keyboard. Some people with disabilities may find it difficult to operate those devices, and I wanted to help them.
+
+The first thing I did was to make sure that any operating system would see the USB dongle as a mouse. You can control it from a native application or a web application—directly into Bluetooth. After that, I built a web application—a simple template that people can extend the way they want using web components. Thanks to that, everyone can control their computer with a web app that I made in just a couple of hours on an Android phone.
+
+Having that set up will enable anyone in the world with some web experience to build, in a matter of days, a very customized solution for anyone with a disability who wants to control their computer. The cool thing is that you can take it with you anywhere you go and use it with other devices as well. It will be the exact same experience. To me, the portability and affordability of the device are very important because people are no longer confined to using their own devices, and are no longer limited to one location.
+
+**Thomas:** Did you have a chance to test the device in real life?
+
+**Lars:** Actually during my last trip to Mexico I discussed it with a web professional living there; he’s now looking into the possibilities of using the device locally. Over there the equipment is really expensive, but a USB dongle normally costs around ten US dollars. He’s now checking if we could build local setups there to try it out. But I haven’t done official trials yet here in Denmark.
+
+**Thomas:** Many devices designed to assist people with disabilities are really expensive. Are you planning on cooperating with any particular company and putting it into production for a fraction of the price of that expensive equipment?
+
+**Lars:** Yes, definitely! I’ve already been talking to a local hardware manufacturer about that. Of course, the device won’t replace all those highly specialized solutions, but it can be the first step to building something bigger—for example, using voice recognition, already available for web technologies. It’ll be an easy way of controlling devices using your Android phone; it can work with a device of any kind.
+
+Just being able to build whatever you want on the web and to use that to control any host computer opens up a lot of possibilities.
+
+**Thomas:** Are you releasing your Zephyr project as open source? What kind of license do you use? Are there plans to monetize the project?
+
+**Lars:** Yes, the solution is open source. I did not put a specific license on it, but I think Apache 2.0 would be the way to go. Many major companies use this license, including Google. When I worked on SimpleMouse, I did not think about monetizing the project—that was not my goal. But I also think it would make sense to try to put it into production in some way, and with this comes cost. The ultimate goal is to make it available. I’d love to see it being implemented at a low cost and on a large scale.
diff --git a/src/site/content/en/blog/gde-focus-nishu-goel/index.md b/src/site/content/en/blog/gde-focus-nishu-goel/index.md
new file mode 100644
index 00000000000..392164b5835
--- /dev/null
+++ b/src/site/content/en/blog/gde-focus-nishu-goel/index.md
@@ -0,0 +1,75 @@
+---
+layout: post
+title: 'GDE community highlight: Nishu Goel'
+authors: 
+  - monikajanota
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5bk29uMufFZlPD09mRxV.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KH1ttCJSLsVcgdkmJiTx.png
+alt: 'Community highlights'
+subhead: >
+  Nishu Goel is a renowned web engineer from India, Google Developer Expert for Angular and web technologies. She told us about her community involvement, career plans and the best ways to learn web development.
+description: >
+  One of a series of interviews with members of the Google Developers Experts (GDE) program.
+date: 2022-04-05
+tags:
+  - blog
+  - community
+---
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/YcD8pQOpwfcHv2iCw5lW.jpeg", alt="Nishu on stage.", width="800", height="533" %}
+</figure>
+
+Nishu Goel is a renowned web engineer from India, Google Developer Expert for Angular and web technologies, Microsoft Most Valuable Professional. She's the author of [Step by Step Angular Routing](https://www.amazon.com/Step-Angular-Routing-Nishu-Goel/dp/9388511662) (BPB, 2019) and [A Hands-on Guide to Angular](https://www.educative.io/courses/a-hands-on-guide-to-angular) (Educative, 2021) as well as the author of Web Almanac 2021 JavaScript chapter. Nishu currently works at epilot GmbH as a full stack engineer.  She told us about her community involvement, career plans and the best ways to learn web development.
+
+**Monika**: Let's start with your story. What inspired you to become a developer and take on an active role within dev communities?
+
+**Nishu**: I got my bachelor's degree in computer science, we studied data structures, and that's where the interest in programming started. During the third year of engineering, a connection with the developer community was established through my participation in the Microsoft Imagine Cup Nationals competition where we presented solutions through code. The idea of the application we built was to bring educational opportunities to local students, especially girls. I met some very inspiring people, both contestants and organizers in this journey. 
+
+In 2018, my professional career took off, and I started working with Angular. Angular became the primary technology that connected me to the GDE program. Around the same time, I started writing blog posts and creating content around the subject I was working on and learning . Dhananjay Kumar helped me get started on this journey and ensured to keep me on track. My first articles tackled the basics of Angular. Soon after I started speaking at events-the first one being ngNepal, Nepal's Angular Conference. This led to more speaking invitations about Angular and web technologies. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/ujceg3BgclYOgIwDjtt7.jpeg", alt="Nishu and other people from ng-india.", width="800", height="533" %}
+</figure>
+
+**Monika**: What's your professional experience technology-wise?
+
+**Nishu**: It was all about Angular and web components for the first two years. I was using Angular for building the web, but soon I decided to go beyond that and explore other fields. I didn't want to limit myself in case I'd have to switch projects. That's how I started creating web components in Angular to use in other frameworks. 
+
+The first thing I did was to create web components using Angular. I published it to npm and used it as a demo in a React project. I've discussed this during some of my talks and presentations later. My next job required using React and Typescript. Now, because I was working with React, I wasn't just using one framework anymore, but the web in general. At that moment I learned a lot about the web, especially web performance. That's when I had to start thinking about the [Largest Contenful Paint (LCP)](/lcp/) or [First Contentful Paint (FCP)](/fcp/), which means how much time it will take your application to load or what's going to be the maximum time for the page to render. I have been working towards choosing best practices and an improved performance of the applications. 
+
+Because of this interest in web performance, I got involved in the Web Almanac and wrote [the JavaScript chapter](https://almanac.httparchive.org/en/2021/javascript). Web Almanac is an annual report on the state of the web in general&mdash;it tells us how people are using different features. Last year 8.6 million websites were screened, the data was analyzed and presented in the report. The report includes statistics like the usage of the `async` and `defer` attributes in a `<script>` element. How many websites are using them correctly, how many are not using that at all, and how many improved those compared to 2020. The last Web Almanac report mentioned that around [35% of websites used two attributes on the same script](https://almanac.httparchive.org/en/2021/javascript#fig-9), which was an anti-pattern, decreasing the performance. This was pointed out last year, and this year we tried to see if the situation improved. I also spoke at ngConf and Reliable Dev Summit, where I focused on the performance of the web. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/2jhiM4MDkLxZP0FzxjN0.png", alt="Print edition of the Web Almanac.", width="800", height="454" %}
+</figure>
+
+**Monika**: You're also very much involved in giving back to the community. Lately you've been volunteering with a Ugandan NGO YIYA&mdash;how did it start and what was the main point of that cooperation?
+
+**Nishu**: It started with the GDE team informing us about the volunteering opportunity with YIYA. The Ugandan NGO was looking for engineers to help them with either the content preparation or technical features. The program aims to empower school-aged children in Uganda and offer them education opportunities using the technologies available locally&mdash;not computers or textbooks, but rather basic keypad phones and radios. The children would dial a certain number and receive a set of information, dial another one for more insights, and so on. It became even more useful during the pandemic.
+
+Since I've always been involved with the community and sustainable development goals, I decided to reach out. After a meeting with the YIYA team, I offered my help with the Python scripts or any bugs they came up with, any issues with the portal. We worked together for a brief amount of time. 
+
+**Monika**: What are your plans for 2022? Is there anything you're focusing on in particular?
+
+**Nishu**: I'm switching jobs and moving to another country. I'll be working on the web in general, improving the site performance, and also on the backend, using Golang. I'll continue to zero in on the web performance area since it's very interesting and complex, and there's a lot to understand and optimize. Even now, after dedicating a lot of my time to that, there's still so much to learn. For example, I'd love to understand how using a CDN for my image resources would help me make my app even faster. I want to become THE expert of web performance&mdash;I'm gradually getting there, I like to believe :)
+
+**Monika**: You've mentioned starting to write at a point when you were not an expert, you were just writing what you were learning. What would your advice be to new developers coming through and feeling they don't have anything to share? 
+
+**Nishu**: That's exactly how I felt when I started writing. I thought that maybe I should not put this out? Maybe it's just wrong? I was worried my writing was not going to help the readers. But the important thing was that my writing was helping me. I would forget things after some time and then come back to something I wrote earlier. Writing things down is a great idea. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/1Cs78KYoGM3NzL9VzdZH.jpeg", alt="The book Angular Routing on a table.", width="800", height="600" %}
+</figure>
+
+So I would suggest everyone&mdash;just write, at whatever stage. Even if you've only finished one part of a course you're going through&mdash;you're learning by writing it down. A piece of information that you got to know at some point may be useful to others who don't know that yet. You don't need to be an expert. Writing will help you. And anyone, at any stage of their career. 
+
+**Monika**: It's best to follow people who just learned something because they know all the things they had to figure out. Once you're an expert, it's hard to remember what it was like when you were new. And any advice for someone who's just getting into web development? 
+
+**Nishu**: Many people ask which framework they should choose when they're starting, but I think that's not the right question. Whatever we are learning at any point should be useful at a later stage as well. I would advise anyone to drop the limitations and start with HTML or JavaScript&mdash;that's going to be profitable in the future.
+
+And then take any opportunity that comes your way. This happened to me when I stumbled upon information about the Web Almanac looking for authors. I just thought, "oh, this is interesting, this may help everyone with the performance side of things". That's how I became a content lead for the JavaScript chapter, and I've spent six months writing it. So I think it's just about grabbing the opportunities and working hard. 
+
+**Monika**: Do you have any predictions or ideas about the future of web technology in general? What's going to be the next hot topic? What's going to be growing fast? 
+
+**Nishu**: I love the fact that we're able to run servers within browsers now, this is a great advancement. For example, running Node.js from the browser has been introduced lately, meanwhile in the past we could not run anything without having Node.js installed in our systems. Now we can do anything from the browser. This is a huge step further in the web ecosystem. And the OMT&mdash;Off the Main Thread. Working on the threads is going to be much improved as well. Web Assembly is advancing and enables developers to do that, and I think that is the future of the web ecosystem. 
diff --git a/src/site/content/en/blog/gde-mentoring/index.md b/src/site/content/en/blog/gde-mentoring/index.md
new file mode 100644
index 00000000000..58e3ff9680f
--- /dev/null
+++ b/src/site/content/en/blog/gde-mentoring/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: 'Finding courage and inspiration in the developer community'
+authors: 
+  - monikajanota
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5bk29uMufFZlPD09mRxV.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KH1ttCJSLsVcgdkmJiTx.png
+alt: 'Community highlights'
+subhead: >
+  Web Google Developers Experts on how mentoring programs empowered them to become leaders.
+description: >
+  Web Google Developers Experts on how mentoring programs empowered them to become leaders.
+date: 2022-05-09
+tags:
+  - blog
+  - community
+---
+
+
+How do we empower women in tech and equip them with the skills to help them become true leaders? One way is learning from others' successes and failures. Web GDEs—[Debbie O'Brien](https://developers.google.com/community/experts/directory/profile/profile-debbie-o-brien), [Julia Miocene](https://developers.google.com/community/experts/directory/profile/profile-julia-miocene), and [Glafira Zhur](https://developers.google.com/community/experts/directory/profile/profile-glafira-zhur)—discuss the value of one to one mentoring and the impact it has made on their own professional and personal development.
+
+[A 2019 study](https://www.ensono.com/company/news-press/ensono-launches-women-in-tech-study/) showed that only 25% of keynote speakers at tech events are women, meanwhile 70% of female speakers mentioned being the only woman on a conference panel. One way of changing that is by running programs and workshops with the aim of empowering women and providing them with the relevant soft skills training, including public speaking, content creation, and leadership. Among such programs are the [Women Developer Academy](https://events.withgoogle.com/women-developer-academy-europe/) (WDA) and the [Road to GDE](https://events.withgoogle.com/road-to-gde/), both run by Google's developer communities. 
+
+With more than 1000 graduates around the world, WDA is a program run by [Women Techmakers](https://www.womentechmakers.com/) for professional IT practitioners. To equip women in tech with speaking and presentation skills, along with confidence and courage, training sessions, workshops, and mentoring meetings are organized. Road to GDE, on the other hand, is a three-month mentoring program created to support people from historically underrepresented groups in tech on their path to becoming experts. What makes both programs special is the fact that they're based on a unique connection between mentor and mentee, direct knowledge sharing, and an individualized approach. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/qs69cyfMqlAqbdOLQLJL.jpeg", alt="A speaker in front of a bright colored screen.", width="800", height="534" %}
+  <figcaption>Julia Miocene</figcaption>
+</figure>
+
+Some Web GDE community members have had a chance to be part of the mentoring programs for women as both mentors and mentees. Frontend developers Julia Miocene and Glafira Zhur are relatively new to the GDE program. They became Google Developers Experts in October 2021 and January 2022 respectively, after graduating from the first edition of both the Women Developer Academy and the Road to GDE; whilst Debbie O'Brien has been a member of the community and an active mentor for both programs for several years. They have all shared their experiences with the programs in order to encourage other women in tech to believe in themselves, take a chance, and to become true leaders.
+
+## Different paths, one goal 
+
+Although all three share an interest in frontend development, each has followed a very different path. Glafira Zhur, now a team leader with 12 years of professional experience, originally planned to become a musician, but decided to follow her other passion instead. A technology fan thanks to her father, she was able to reinstall Windows at the age of 11. Julia Miocene, after more than ten years in product design, was really passionate about CSS. She became a GDE because she wanted to work with Chrome and DevTools. Debbie is a Developer Advocate working in the frontend area, with a strong passion for user experience and performance. For her, mentoring is a way of giving back to the community, helping other people achieve their dreams, and become the programmers they want to be. At one point while learning JavaScript, she was so discouraged she wanted to give it up, but her mentor convinced her she could be successful. Now she's returning the favor. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/XvxCXzf2uuSjx4znwoUN.jpeg", alt="Two people taking a selfie in front of a room set up for a workshop.", width="800", height="534" %}
+  <figcaption>Debbie O'Brien</figcaption>
+</figure>
+
+As GDEs, Debbie, Glafira, and Julia all mention that the most valuable part of becoming experts is the chance to meet people with similar interests in technology, to network, and to provide early feedback for the web team. Mentoring, on the other hand, enables them to create, it boosts their confidence and empowers them to share their skills and knowledge—regardless of whether they're a mentor or a mentee. 
+
+## Sharing knowledge
+
+A huge part of being a mentee in Google's programs is learning how to share knowledge with other developers and help them in the most effective way. Many WDA and Road to GDE participants become mentors themselves. According to Julia, it's important to remember that a mentor is not a teacher—they are much more. The aim of mentoring, she says, is to create something together, whether it's an idea, a lasting connection, a piece of knowledge, or a plan for the future. 
+
+Glafira mentioned that she learned to perceive social media in a new way—as a hub for sharing knowledge, no matter how small the piece of advice might seem. It's because, she says, even the shortest Tweet may help someone who's stuck on a technical issue that they might not be able to resolve without such content being available online. Every piece of knowledge is valuable. Glafira adds that, "Social media is now my tool, I can use it to inspire people, invite them to join the activities I organize. It's not only about sharing rough knowledge, but also my energy." 
+
+Working with mentors who have successfully built an audience for their own channels allows the participants to learn more about the technical aspects of content creation—how to choose topics that might be interesting for readers, set up the lighting in the studio, or prepare an engaging conference speech. 
+
+## Learning while teaching 
+
+From the other side of the mentor—mentee relationship, Debbie O'Brien says the best thing about mentoring is seeing the mentees grow and succeed: "We see in them something they can't see in themselves, we believe in them, and help guide them to achieve their goals. The funny thing is that sometimes the advice we give them is also useful for ourselves, so as mentors we end up learning a lot from the experience too." 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/zY4aDIspm31q0C9vGogv.jpeg", alt="A speaker presenting remotely with a headset.", width="800", height="534" %}
+  <figcaption>Glafira Zhur</figcaption>
+</figure>
+
+Both Glafira and Julia state that they're willing to mentor other women on their way to success. Asked what is the most important learning from a mentorship program, they mention confidence—believing in yourself is something they want for every female developer out there.  
+
+## Growing as a part of the community
+
+Both Glafira and Julia mentioned that during the programs they met  many inspiring people from their local developer communities. Being able to ask others for help, share insights and doubts, and get feedback was a valuable lesson for both women. 
+
+Mentors may become role models for the programs' participants. Julia mentioned how important it was for her to see someone else succeed and follow in their footsteps, to map out exactly where you want to be professionally, and how you can get there. This means learning not just from someone else's failures, but also from their victories and achievements. 
+
+Networking within the developer community is also a great opportunity to grow your audience by visiting other contributors' podcasts and YouTube channels. Glafira recalls that during the Academy, she received multiple invites and had an opportunity to share her knowledge on different channels. 
+
+Overall, what's even more important than growing your audience is finding your own voice. As Debbie states: "We need more women speaking at conferences, sharing knowledge online, and being part of the community. So I encourage you all to be brave and follow your dreams. I believe in you, so now it's time to start believing in yourself."
diff --git a/src/site/content/en/blog/get-installed-related-apps/getinstalled-cropped.jpg b/src/site/content/en/blog/get-installed-related-apps/getinstalled-cropped.jpg
deleted file mode 100644
index 4973c211881..00000000000
Binary files a/src/site/content/en/blog/get-installed-related-apps/getinstalled-cropped.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/get-installed-related-apps/hero.jpg b/src/site/content/en/blog/get-installed-related-apps/hero.jpg
deleted file mode 100644
index 2765f02e91e..00000000000
Binary files a/src/site/content/en/blog/get-installed-related-apps/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/get-installed-related-apps/index.md b/src/site/content/en/blog/get-installed-related-apps/index.md
index e1b870cf63b..a7d0a8e5580 100644
--- a/src/site/content/en/blog/get-installed-related-apps/index.md
+++ b/src/site/content/en/blog/get-installed-related-apps/index.md
@@ -1,56 +1,97 @@
 ---
+layout: post
 title: "Is your app installed? getInstalledRelatedApps() will tell you!"
 subhead: |
   The `getInstalledRelatedApps()` method allows your website to check whether
-  your native app or PWA is installed on a user's device.
+  your iOS/Android/desktop app or PWA is installed on a user's device.
 authors:
   - petelepage
 description: |
   The getInstalledRelatedApps() API is a web platform API that allows you
-  to check whether your native app or PWA is installed on the user's device.
+  to check whether your iOS/Android/desktop app or PWA is installed on the
+  user's device.
 date: 2018-12-20
-updated: 2020-08-06
+updated: 2021-09-16
 tags:
   - blog
   - capabilities
-hero: hero.jpg
+hero: image/admin/v9t93rXITPqFe3L0qlTN.jpg
 alt: mobile device with app panel open
+feedback:
+  - api
 ---
 
 ## What is the getInstalledRelatedApps() API? {: #what }
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="getinstalled-cropped.jpg" class="w-screenshot" width="550">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486" %}
+  <figcaption>
     A website using <code>getInstalledRelatedApps()</code> to determine if its
     Android app is already installed.
   </figcaption>
 </figure>
 
 The [`getInstalledRelatedApps()`][spec] makes it possible for *your* page to
-check if *your* native app, or Progressive Web App (PWA) is already installed
-on a user's device, and allows you to customize the user experience if your
-app is already installed.
+check if *your* mobile or desktop app, or in some cases, if your Progressive
+Web App (PWA) is already installed on a user's device, and allows you to
+customize the user experience if it is.
 
 For example, if your app is already installed:
 
 * Redirecting the user from a product marketing page directly into your app.
-* Centralizing some functionality like notifications in the native app to
+* Centralizing some functionality like notifications in the other app to
   prevent duplicate notifications.
 * Not [promoting the installation](/customize-install/) of your PWA if your
-  native app is already installed.
+  other app is already installed.
 
-<div class="w-clearfix"></div>
+To use the `getInstalledRelatedApps()` API, you need to tell your app about
+your site, then tell your site about your app. Once you've defined the
+relationship between the two, you can check if the app is installed.
 
 ### Supported app types you can check
 
-Your website can check if your:
-
-* [Android app](#check-android) is installed
-* [Windows (UWP) app](#check-windows) is installed
-* Progressive Web App is installed, if it's running in the
-  [same scope](#check-pwa-in-scope) or in a
-  [different scope](#check-pwa-out-of-scope)
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>App type</th>
+        <th>Checkable from</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="#check-android">Android app</a>
+        </td>
+        <td>
+          Android only<br>
+          Chrome 80 or later
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#check-windows">Windows (UWP) app</a>
+        </td>
+        <td>
+          Windows only<br>
+          Chrome 85 or later<br>
+          Edge 85 or later
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Progressive Web App<br>
+          Installed in the <a href="#check-pwa-in-scope">same scope</a> or a
+          <a href="#check-pwa-out-of-scope">different scope</a>.
+        </td>
+        <td>
+          Android only<br>
+          Chrome 84 or later
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 {% Aside %}
   The `getInstalledRelatedApps()` API only allows you to check if *your* apps
@@ -64,7 +105,9 @@ Your website can check if your:
 
 Your website can check if your Android app is installed.
 
-* Android: Chrome 80 or later
+{% Compare 'better', 'Supported on' %}
+Android: Chrome 80 or later
+{% endCompare %}
 
 ### Tell your Android app about your website
 
@@ -135,7 +178,9 @@ Try the [demo](https://get-installed-apps.glitch.me/)
 
 Your website can check if your Windows app (built using UWP) is installed.
 
-* Windows: Chrome 85 or later, Edge 85 or later
+{% Compare 'better', 'Supported on' %}
+Windows: Chrome 85 or later, Edge 85 or later
+{% endCompare %}
 
 ### Tell your Windows app about your website
 
@@ -214,7 +259,9 @@ Your PWA can check to see if it is already installed. In this case, the page
 making the request must be on the same domain, and within the [scope][scope]
 of your PWA, as defined by the scope in the web app manifest.
 
-* Android: Chrome 84 or later
+{% Compare 'better', 'Supported on' %}
+Android: Chrome 84 or later
+{% endCompare %}
 
 ### Tell your PWA about itself
 
@@ -256,7 +303,9 @@ the [scope][scope] of your PWA. For example, a landing page served from
 landing page is served from `www.example.com` and your PWA is served from
 `app.example.com`.
 
-* Android: Chrome 84 or later
+{% Compare 'better', 'Supported on' %}
+Android: Chrome 84 or later
+{% endCompare %}
 
 ### Tell your PWA about your website
 
@@ -264,7 +313,8 @@ First, you'll need to add digital asset links to the server where your PWA is
 served from. This will help define the relationship between your website and
 your PWA, and ensures that only your website can check if your PWA is installed.
 
-Add an `assetlinks.json` file to the [`/.well-known/`][well-known] directory
+Add an [`assetlinks.json`](https://developers.google.com/digital-asset-links/v1/getting-started)
+file to the [`/.well-known/`][well-known] directory
 of the domain where the PWA lives, for example `app.example.com`. In the `site`
 property, provide the full path to the web app manifest that will perform
 the check (not the web app manifest of your PWA).
@@ -335,6 +385,14 @@ taken into account.
 Like most other powerful web APIs, the `getInstalledRelatedApps()` API is
 only available when served over **HTTPS**.
 
+## Still have questions? {: #questions }
+
+Still have questions? Check the [`getInstalledRelatedApps` tag on StackOverflow][so-gira]
+to see if anyone else has had similar questions. If not, ask your
+[question][so-ask-question] there, and be sure to tag it with the
+[`progressive-web-apps`][so-tagged-pwa] tag. Our team frequently monitors
+that tag and tries to answer your questions.
+
 ## Feedback {: #feedback }
 
 Did you find a bug with Chrome's implementation? Or is the implementation
@@ -352,15 +410,16 @@ support helps the Chrome team to prioritize features and shows other
 browser vendors how critical it is to support them.
 
 * Share how you plan to use the API on the [WICG Discourse thread][wicg-discourse].
-* Send a Tweet to [@ChromiumDev][cr-dev-twitter] with the `#getInstalledRelatedApps`
-  hashtag and let us know where and how you're using it.
+* Send a tweet to [@ChromiumDev][cr-dev-twitter] using the hashtag
+  [`#getInstalledRelatedApps`](https://twitter.com/search?q=%23getInstalledRelatedApps&src=typed_query&f=live)
+  and let us know where and how you're using it.
 
 ## Helpful links {: #helpful }
 
 * [Public explainer for `getInstalledRelatedApps()` API][explainer]
+* [Spec draft][spec]
 * [Tracking bug][cr-bug]
 * [ChromeStatus.com entry][cr-status]
-* [Request an origin trial token]({{origin_trial.url}})
 * Blink Component: [`Mobile>WebAPKs`](https://chromestatus.com/features#component%3A%20Mobile%3EWebAPKs)
 
 ## Thanks
@@ -371,7 +430,8 @@ for testing Windows apps, and Rayan Kanso for help with the Chrome details.
 [spec]: https://wicg.github.io/get-installed-related-apps/spec/
 [cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=895854
 [cr-status]: https://www.chromestatus.com/feature/5695378309513216
-[explainer]: https://github.com/WICG/get-installed-related-apps/blob/master/EXPLAINER.md
+[explainer]: https://github.com/WICG/get-installed-related-apps/blob/main/EXPLAINER.md
+[spec]: https://wicg.github.io/get-installed-related-apps/spec/
 [wicg-discourse]: https://discourse.wicg.io/t/proposal-get-installed-related-apps-api/1602
 [new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Mobile%3EWebAPKs
 [cr-dev-twitter]: https://twitter.com/chromiumdev
@@ -380,3 +440,6 @@ for testing Windows apps, and Rayan Kanso for help with the Chrome details.
 [scope]: /add-manifest/#scope
 [win-uri-handlers]: https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking
 [uap3-namespace]: https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/uapmanifestschema/element-uap3-extension-manual#examples
+[so-gira]: https://stackoverflow.com/search?q=getinstalledrelatedapps
+[so-ask-question]: https://stackoverflow.com/questions/tagged/progressive-web-apps
+[so-tagged-pwa]: https://stackoverflow.com/questions/tagged/progressive-web-apps
diff --git a/src/site/content/en/blog/getusermedia-intro/index.md b/src/site/content/en/blog/getusermedia-intro/index.md
new file mode 100644
index 00000000000..95d935ee34a
--- /dev/null
+++ b/src/site/content/en/blog/getusermedia-intro/index.md
@@ -0,0 +1,336 @@
+---
+layout: post
+title: Capture audio and video in HTML5
+authors:
+  - ericbidelman
+  - samdutton
+date: 2012-02-22
+updated: 2020-11-24
+tags:
+  - blog
+---
+
+## Introduction
+
+Audio/Video capture has been *the* "Holy Grail" of web development for a long time.
+For many years we've had to rely on browser plugins ([Flash](http://www.kevinmusselman.com/2009/02/access-webcam-with-flash/) or
+[Silverlight](http://www.silverlightshow.net/items/Capturing-the-Webcam-in-Silverlight-4.aspx))
+to get the job done. [Come on!](https://www.youtube.com/watch?v=SP_9zH9Q44o)
+
+HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought
+a surge of access to device hardware. [Geolocation](https://www.html5rocks.com/entutorials/geolocation/trip_meter/) (GPS),
+the [Orientation API](https://www.html5rocks.com/entutorials/device/orientation/) (accelerometer), [WebGL](https://www.html5rocks.com/entutorials/webgl/shaders/) (GPU),
+and the [Web Audio API](https://www.html5rocks.com/entutorials/webaudio/intro/) (audio hardware) are perfect examples. These features
+are ridiculously powerful, exposing high level JavaScript APIs that sit
+on top of the system's underlying hardware capabilities.
+
+This tutorial introduces a new API, [`navigator.getUserMedia()`][getusermedia-spec], which allows
+web apps to access a user's camera and microphone.
+
+## The road to getUserMedia()
+
+If you're not aware of its history, the way we arrived at the `getUserMedia()` API is an interesting tale.
+
+Several variants of "Media Capture APIs" have evolved over the past few years.
+Many folks recognized the need to be able to access native devices on the web, but
+that led everyone and their mom to put together a new spec. Things got
+so messy that the W3C finally decided to form a working group. Their sole purpose?
+Make sense of the madness! The [Device APIs Policy (DAP) Working Group](http://www.w3.org/2009/dap/)
+has been tasked to consolidate + standardize the plethora of proposals.
+
+I'll try to summarize what happened in 2011…
+
+### Round 1: HTML Media Capture
+
+[HTML Media Capture](http://dev.w3.org/2009/dap/camera/) was the DAP's first go at
+standardizing media capture on the web. It works by overloading the `<input type="file">`
+and adding new values for the `accept` parameter.
+
+If you wanted to let users take a snapshot of themselves with the webcam,
+that's possible with `capture=camera`:
+
+```html
+<input type="file" accept="image/*;capture=camera">
+```
+
+Recording a video or audio is similar:
+
+```html
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+```
+
+Kinda nice right? I particularly like that it reuses a file input. Semantically,
+it makes a lot of sense. Where this particular "API" falls short is the ability to do realtime effects
+(e.g. render live webcam data to a `<canvas>` and apply WebGL filters).
+HTML Media Capture only allows you to record a media file or take a snapshot in time.
+
+**Support:**
+
+- [Android 3.0 browser](http://developer.android.com/sdk/android-3.0.html) -
+one of the first implementations. Check out [this video](http://davidbcalhoun.com/2011/android-3-0-honeycomb-is-first-to-implement-the-device-api) to see it in action.
+- Chrome for Android (0.16)
+- Firefox Mobile 10.0
+- iOS6 Safari and Chrome (partial support)
+
+### Round 2: device element
+
+Many thought HTML Media Capture was too limiting, so a new spec
+emerged that supported any type of (future) device. Not surprisingly, the design called
+for a new element, the [`<device>` element](http://dev.w3.org/html5/html-device/),
+which became the predecessor to `getUserMedia()`.
+
+Opera was among the first browsers to create [initial implementations](http://my.opera.com/core/blog/2011/03/14/web-meet-device)
+of video capture based on the `<device>` element. Soon after
+([the same day](http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview) to be precise),
+the WhatWG decided to scrap the `<device>` tag in favor of another up and comer, this time a JavaScript API called
+`navigator.getUserMedia()`. A week later, Opera put out new builds that included
+support for the updated `getUserMedia()` spec. Later that year,
+Microsoft joined the party by releasing a [Lab for IE9](http://blogs.msdn.com/b/ie/archive/2011/12/09/media-capture-api-helping-web-developers-directly-import-image-video-and-sound-data-into-web-apps.aspx)
+supporting the new spec.
+
+Here's what `<device>` would have looked like:
+
+```html
+<device type="media" onchange="update(this.data)"></device>
+<video autoplay></video>
+<script>
+    function update(stream) {
+    document.querySelector('video').src = stream.url;
+    }
+</script>
+```
+
+**Support:**
+
+Unfortunately, no released browser ever included `<device>`.
+One less API to worry about I guess :) `<device>` did have two great things going
+for it though: 1.) it was semantic, and 2.) it was easily extendible to support
+more than just audio/video devices.
+
+Take a breath. This stuff moves fast!
+
+### Round 3: WebRTC
+
+The `<device>` element eventually went the way of the Dodo.
+
+The pace to find a suitable capture API accelerated thanks to the larger [WebRTC][webrtc-spec] (Web Real Time Communications) effort. That spec is overseen by the [W3C WebRTC Working Group](http://www.w3.org/2011/04/webrtc/). Google, Opera, Mozilla, and [a few others](http://webrtc.org) have
+implementations.
+
+`getUserMedia()` is related to WebRTC because it's the gateway into that set of APIs.
+It provides the means to access the user's local camera/microphone stream.
+
+**Support:**
+
+`getUserMedia()` has been supported since Chrome 21, Opera 18, and Firefox 17.
+
+## Getting started
+
+With `navigator.getUserMedia()`, we can finally tap into webcam and microphone input without a plugin.
+Camera access is now a call away, not an install away. It's baked directly into the browser. Excited yet?
+
+### Feature detection
+
+Feature detecting is a simple check for the existence of `navigator.getUserMedia`:
+
+
+```js
+function hasGetUserMedia() {
+    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
+            navigator.mozGetUserMedia || navigator.msGetUserMedia);
+}
+
+if (hasGetUserMedia()) {
+    // Good to go!
+} else {
+    alert('getUserMedia() is not supported in your browser');
+}
+```
+
+You can also [use Modernizr](http://modernizr.com/) to detect `getUserMedia` to avoid the vendor prefix dance yourself:
+
+```js
+if (Modernizr.getusermedia){
+    var gUM = Modernizr.prefixed('getUserMedia', navigator);
+    gUM({video: true}, function( //...
+    //...
+}
+```
+
+### Gaining access to an input device
+
+To use the webcam or microphone, we need to request permission.
+The first parameter to `getUserMedia()` is an object specifying the details and
+requirements for each type of media you want to access. For example, if you want to access the webcam, the first parameter should be `{video: true}`. To use both the microphone and camera,
+pass `{video: true, audio: true}`:
+
+```html
+<video autoplay></video>
+
+<script>
+    var errorCallback = function(e) {
+    console.log('Reeeejected!', e);
+    };
+
+    // Not showing vendor prefixes.
+    navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
+    var video = document.querySelector('video');
+    video.src = window.URL.createObjectURL(localMediaStream);
+
+    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
+    // See crbug.com/110938.
+    video.onloadedmetadata = function(e) {
+        // Ready to go. Do some stuff.
+    };
+    }, errorCallback);
+</script>
+```
+
+OK. So what's going on here? Media capture is a perfect example of new HTML5 APIs
+working together. It works in conjunction with our other HTML5 buddies, `<audio>` and `<video>`.
+Notice that we're not setting a `src` attribute or including `<source>` elements
+on the `<video>` element. Instead of feeding the video a URL to a media file, we're feeding
+it a [Blob URL](/tutorials/workers/basics/#toc-inlineworkers-bloburis) obtained
+from a `LocalMediaStream` object representing the webcam.
+
+I'm also telling the `<video>` to `autoplay`, otherwise it would be frozen on
+the first frame. Adding `controls` also works as you'd expected.
+
+If you want something that works cross-browser, try this:
+
+```js
+navigator.getUserMedia  = navigator.getUserMedia ||
+                            navigator.webkitGetUserMedia ||
+                            navigator.mozGetUserMedia ||
+                            navigator.msGetUserMedia;
+
+var video = document.querySelector('video');
+
+if (navigator.getUserMedia) {
+    navigator.getUserMedia({audio: true, video: true}, function(stream) {
+    video.src = window.URL.createObjectURL(stream);
+    }, errorCallback);
+} else {
+    video.src = 'somevideo.webm'; // fallback.
+}
+```
+
+### Setting media constraints (resolution, height, width)
+
+The first parameter to `getUserMedia()` can also be used to specify more requirements
+(or constraints) on the returned media stream. For example, instead of just indicating you want basic access to video (e.g. `{vide: true}`), you can additionally require the stream
+to be HD:
+
+```js
+var hdConstraints = {
+    video: {
+    mandatory: {
+        minWidth: 1280,
+        minHeight: 720
+    }
+    }
+};
+
+navigator.getUserMedia(hdConstraints, successCallback, errorCallback);
+
+...
+
+var vgaConstraints = {
+    video: {
+    mandatory: {
+        maxWidth: 640,
+        maxHeight: 360
+    }
+    }
+};
+
+navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);
+```
+
+For more configurations, see the [constraints API](http://dev.w3.org/2011/webrtc/editor/getusermedia.html#idl-def-MediaTrackConstraints)
+
+### Selecting a media source
+
+In Chrome 30 or later, `getUserMedia()` also supports selecting the video/audio source
+using the `MediaStreamTrack.getSources()` API.
+
+In this example, the last microphone and camera that's found is selected as the
+media stream source:
+
+```js
+MediaStreamTrack.getSources(function(sourceInfos) {
+    var audioSource = null;
+    var videoSource = null;
+
+    for (var i = 0; i != sourceInfos.length; ++i) {
+    var sourceInfo = sourceInfos[i];
+    if (sourceInfo.kind === 'audio') {
+        console.log(sourceInfo.id, sourceInfo.label || 'microphone');
+
+        audioSource = sourceInfo.id;
+    } else if (sourceInfo.kind === 'video') {
+        console.log(sourceInfo.id, sourceInfo.label || 'camera');
+
+        videoSource = sourceInfo.id;
+    } else {
+        console.log('Some other kind of source: ', sourceInfo);
+    }
+    }
+
+    sourceSelected(audioSource, videoSource);
+});
+
+function sourceSelected(audioSource, videoSource) {
+    var constraints = {
+    audio: {
+        optional: [{sourceId: audioSource}]
+    },
+    video: {
+        optional: [{sourceId: videoSource}]
+    }
+    };
+
+    navigator.getUserMedia(constraints, successCallback, errorCallback);
+}
+```
+
+Check out Sam Dutton's [great demo](https://simpl.info/getusermedia/sources/) of how
+to let users select the media source.
+
+### Security
+
+Some browsers throw up an infobar upon calling `getUserMedia()`,
+which gives users the option to grant or deny access to their camera/mic.
+The spec unfortunately is very quiet when it comes to security. For example, here
+is Chrome's permission dialog:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Z5cVe361mrgghnmWMVw1.png", alt="Permission dialog in Chrome", width="800", height="231" %}
+<figcaption>Permission dialog in Chrome</figcaption>
+</figure>
+
+If your app is running from SSL (`https://`), this permission will be persistent.
+That is, users won't have to grant/deny access every time.
+
+### Providing fallback
+
+For users that don't have support for `getUserMedia()`, one option is to fallback
+to an existing video file if the API isn't supported and/or the call fails for some reason:
+
+```js
+// Not showing vendor prefixes or code that works cross-browser:
+
+function fallback(e) {
+    video.src = 'fallbackvideo.webm';
+}
+
+function success(stream) {
+    video.src = window.URL.createObjectURL(stream);
+}
+
+if (!navigator.getUserMedia) {
+    fallback();
+} else {
+    navigator.getUserMedia({video: true}, success, fallback);
+}
+```
\ No newline at end of file
diff --git a/src/site/content/en/blog/godaddy/index.md b/src/site/content/en/blog/godaddy/index.md
new file mode 100644
index 00000000000..fe93e09d243
--- /dev/null
+++ b/src/site/content/en/blog/godaddy/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: How GoDaddy's Websites + Marketing service improved customer Core Web Vitals by 75%
+authors:
+  - simonleparc
+subhead: >
+  A case study of changes GoDaddy implemented to improve website performance for millions of sites, helping them to achieve good PageSpeed Insights and Core Web Vitals scores.
+description: >
+  A case study of changes GoDaddy implemented to improve website performance for millions of sites, helping them to achieve good PageSpeed Insights and Core Web Vitals scores.
+date: 2022-07-14
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/v5DPan0l6c9gOercxr3p.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dUBhcdiLqE1OCDUV7ZYm.jpg
+alt: A time-lapse photo of a highway at night.
+tags:
+  - blog
+  - case-study
+  - web-vitals
+  - performance
+---
+
+GoDaddy is the world's largest services platform for entrepreneurs around the globe. We're on a mission to empower our worldwide community of over 20 million customers—and entrepreneurs everywhere—by giving them all the help and tools they need to grow online.
+
+In 2019 GoDaddy launched Websites + Marketing with a commitment to deliver tools and services that are easy to use and help business owners achieve their goals. Websites + Marketing integrates website building with marketing and eCommerce tools and pairs them with best-in-class guidance to help customers achieve success with their new ventures.
+
+Since the launch of Websites + Marketing, performance has been an important part of the product and something that has been monitored and worked on actively. In this article, we will review GoDaddy's journey from using lab performance testing to using real world data with Core Web Vitals, and the series of improvements made to the product to get a very high pass rate for our customer's sites.
+
+## Tracking performance with Lighthouse
+
+We have relied on Lighthouse data for performance tracking. Every time a website is published on the platform, we measure its performance using our internal tool named "Lighthouse4u", which provides [Google Lighthouse](https://github.com/GoogleChrome/lighthouse) as a service [https://github.com/godaddy/lighthouse4u](https://github.com/godaddy/lighthouse4u). This gave us a good indication of how sites were generally performing in a [lab setting](/lab-and-field-data-differences/#lab-data).
+
+Because the millions of sites we host on our platform have a wide range of features and content, it was important to combine performance data with metadata about each site being tested (such as template used, type of widgets rendered, and so on). This allowed us to draw conclusions on what website features had lower performance, while also providing insight for where to look for improvements. 
+
+For example, this helped us identify that the "popup modal" was having a negative impact on page speed; sites with the feature performed 12 points lower than without. After making updates to the code to defer loading of JavaScript, we improved our Lighthouse score by 2 points. We were able to apply this learning to other features such as the "cookie banner" that renders soon after page load. 
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pmoSmUIy1fYtxHOdBWvs.png", alt="A chart depicting Lighthouse scores for sites with and without a pop-up modal. The sites without a pop-up modal are consistently faster.", width="800", height="466" %}
+  <figcaption>Chart showing performance score for sites with and without a "pop up modal"  (blue and green lines respectively) before and after performance improvement.</figcaption>
+</figure>
+
+Along with looking at problematic sites based on features, we conducted an analysis of our JavaScript bundle and saw that a large portion of its size came from external dependencies (immutable.js and draft.js). We reduced the bundle size by restructuring consumers to lazy load dependencies on demand. This resulted in over a 50% drop in common JavaScript bundle size, which went from over 200&nbsp;KB to around 90&nbsp;KB (minified). The smaller bundle size allowed the browser to load external assets and execute critical scripts earlier in the initial site loading lifecycle, leading to gains in [Largest Contentful Paint (LCP)](/lcp/) and [First Input Delay (FID)](/fid/).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/HCEA1M9s2S3xOOZFFoCc.jpg", alt="A chart showing average Lighthouse scores over time. The average score improves after events such as reducing the JavaScript bundle, deferring JavaScript components, and image optimizations.", width="800", height="831" %}
+  <figcaption>Average Lighthouse score for newly published sites over time. Major optimizations are overlaid on the graph to show impact.</figcaption>
+</figure>
+
+Thanks to our continued efforts, the average customer site Lighthouse score moved from around 40 points in November 2020 to above 70 points in May 2021. However, not all our attempts worked and we were sometimes surprised when the results were not always consistent between what was tested in local test environments and the results we got in the field. Lab results had been really helpful, but it was time to focus on real user experiences observed in the field.
+
+## Tracking real user data with Core Web Vitals 
+
+After adding the [`web-vitals` library](https://github.com/GoogleChrome/web-vitals) to our customer's sites, we were able to measure data on actual devices from real visitors, where hardware, network speed, user interaction (such as scrolling or clicking) are not at a consistent baseline as in a lab setting using Lighthouse. This was a big step in the right direction, as we now had data that was representative of what our website visitors were experiencing.
+
+### Focusing on our weakest link: Cumulative Layout Shift (CLS)
+
+Analyzing new data gave us a new perspective on what had to be done to improve website speed. Because of work done to improve the Lighthouse score, our 75th percentile LCP was 860 ms and our FID at the same threshold was below 10 ms, so we enjoyed a high pass rate for these metrics on our customer's sites: 78% and 98%, respectively. However, the [Cumulative Layout Shift (CLS)](/cls/) numbers look _quite different_ from what we were used to with Lighthouse. Our CLS at the 75th percentile was 0.17–above the 0.1 threshold to "pass"–and our pass rate was thus only 47% over all of our sites.
+
+That metric dragged down our overall pass rate to 40%, so we decided to set an ambitious goal to move that number to above 60% by the end of August 2021. To do that, we would **have to focus on CLS**.
+
+In real life, users interact with the page and scroll past the "above the fold" content, which is something Core Web Vitals captures better. Due to the variability in how users interact with the site while it initially loads, CLS differed from lab and field data.
+
+## The road to passing all Core Web Vitals
+
+Improving performance takes trial and error, and every attempt doesn't always work as expected. However, here are a few improvements that helped us achieve our goals.
+
+Reserving space for loading images drastically improved our CLS score as it prevents the content below the images from shifting. We used the [CSS `aspect-ratio` property](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) to address this on browsers which support it. For those that do not, we loaded a transparent placeholder image that was cached and just a few bytes in size, thus loading almost instantaneously.
+
+This generic image behavior allowed us to pre-calculate the final image height during server-side rendering, based on viewport width and image aspect ratio. This resulted in HTML markup with vertical space appropriately reserved for the final image. The improvement was particularly observable on mobile devices, since images are rendered to the full span of mobile viewports.
+
+Certain components on our customers sites have dynamic content (for example, a list of external customer reviews) and could not be converted to pure CSS to leverage performance benefits of server side rendering. These are difficult areas to improve layout shifts because content (thus height) will vary. In those cases, we wrapped the component in a container with a `min-height` applied, predetermined based on observation of the average height for each of the specific components. The `min-height` is removed once the inner dynamic component is done rendering. While not perfect, this solution allowed us to reduce layout shift by a lot.
+
+While focusing on CLS improvements, we continued to work on LCP. On many websites, images are the biggest culprit contributing to LCP and for us it was an obvious area of improvement. We had made improvements to lazy load images using [`IntersectionObserver`](https://developer.mozilla.org/docs/Web/API/IntersectionObserver) but realized that image sizes were not set in the most optimal way for each breakpoint (mobile, tablet, desktop, large desktop), so we updated our image generation code to clamp and scale images per breakpoint and then again scale resolution based on pixel density. As an example, this reduced the size of a specific large image from 192&nbsp;KB to 102&nbsp;KB.
+
+To quickly render websites on devices with poor network connections, we added code to dynamically scale down image quality based on connection speed. This can be done using the `downlink` property returned by [`navigator.connection`](https://developer.mozilla.org/docs/Web/API/Navigator/connection). We apply URL-based query parameters to reduce image quality through our asset API based on those network conditions.
+
+A number of sections of our customer sites are dynamically loaded. Since we know what sections will be rendered on a given site when it's published, we used the [`rel=preconnect` resource hint](https://www.w3.org/TR/resource-hints/#preconnect) to initialize the connection and necessary handshakes ahead of time. We also use resource hints to load fonts and other important resources quickly.
+
+When building their sites, customers add various sections which might have inline scripts to allow different functionalities. Having these scripts inline throughout the HTML page isn't always optimal for performance. We decided to externalize these scripts to allow the browser to load and parse script content asynchronously. Newly externalized scripts could also be shared across pages. This allowed for additional performance gains in the form of browser and CDN caching. We kept critical scripts in-line in order for the browser to parse and execute them faster.
+
+## Results 
+
+Focusing our effort on CLS paid off, our Core Web Vitals pass rate went from around 40% to almost 70%: an improvement of 75%!
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6hnztHWgtUPHI6fwPqq6.jpg", alt="A chart depicting Core Web Vitals over time. All Core Web Vitals (except for FID) consistently improve over time.", width="800", height="660" %}
+  <figcaption>Percentage of live Website+Marketing websites with "passing Core Web Vitals" over time (overall and sub-metric).</figcaption>
+</figure>
+
+As users come back to our platform to make updates and republish their sites, they get the latest performance improvements and as a result the number of sites with "passing Core Web Vitals" has been steadily growing as shown on the chart below:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/TYq98NlFCurWFDjfWpsN.png", alt="A chart depicting Good Core Web Vitals over time segmented into mobile and desktop segments. The trend improves over time.", width="800", height="360" %}
+  <figcaption>Chart representing GoDaddy Website Builder sites with "good Core Web Vitals". Source: <a href="https://datastudio.google.com/s/jo34JdqzrRU" rel="noopener">cwvtech.report</a></figcaption>
+</figure>
+
+## Conclusions
+
+Finding areas for performance improvements and successfully tracking progress is highly dependent on what tools are used for measurement. While Lighthouse was useful for measuring above-the-fold performance in a "lab setting", it did not accurately capture performance issues that only occurred from user interactions (such as scrolling through the page). 
+
+Tracking real world Core Web Vitals with metadata allowed us to visualize, target, and measure the impact of our improvements. The journey to improve Core Web Vitals scores allowed the team to identify and replace non-performant patterns found throughout our codebase. Sometimes promising changes didn't have nearly the impact we expected, other times the opposite happened. It's not a pristine world out there, so you have to keep trying.
diff --git a/src/site/content/en/blog/goibibo/index.md b/src/site/content/en/blog/goibibo/index.md
new file mode 100644
index 00000000000..4ca486a628c
--- /dev/null
+++ b/src/site/content/en/blog/goibibo/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: How Goibibo's PWA improved conversions by 60%
+subhead: Bridging the gap between web and iOS/Android experiences to delight users.
+date: 2020-09-29
+hero: image/admin/373gEGS1WasAvqbvVoH9.png
+thumbnail: image/admin/i2nyfqyVr4XWqilOxPrY.png
+alt: An illustration of a smartphone next to the text "Scale on web"
+description: >
+  Learn how Goibibo, India’s top online travel company, achieved a 60% increase in
+  conversions by building reliable user experiences between their PWA and iOS/Android apps.
+authors:
+  - saurabhrajpal
+tags:
+  - blog
+  - case-study
+  - capabilities
+  - progressive-web-apps
+  - scale-on-web
+---
+
+[Goibibo](https://goibibo.com) is India's leading online travel booking portal. By building a full-featured
+and reliable [Progressive Web App](/pwa) that matched the capabilities of their iOS and Android
+apps, Goibibo achieved a 60% increase in conversions (compared to their previous web flow).
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">60<sub>%</sub></p>
+    <p>Increase in conversions</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">20<sub>%</sub></p>
+    <p>Increase in logged-in users</p>
+  </div>
+</div>
+
+## Highlighting the opportunity {: #opportunity }
+
+In their journey to improve user experience, Goibibo noticed a few trends:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0dmwrJViuhgA3I4IDCkj.png", alt="Goibibo's PWA.", width="800", height="1624" %}
+</figure>
+
+* With users either already shifted or quickly shifting to mobile, their initial strategy
+  towards mobile web was to build a lightweight and functional application. This worked, with
+  search-to-details-page conversions equalizing on web and iOS/Android, but the iOS/Android apps
+  won in all further steps of the conversion funnel.
+
+* There were significant drop offs at the payment stage of the PWA compared to their
+  iOS/Android apps. This was when they decided to invest in their PWA with the goal of letting
+  users experience the same UX on their PWA as on their iOS/Android apps.
+
+* They also noticed nearly 20% of their users were starting a session on the web and
+  converting on the app. This reiterated their belief that a chunk of users will go untapped
+  without an aligned PWA and iOS/Android app strategy.
+
+## The tools they used {: #tools }
+
+### Contact Picker API {: #contact-picker }
+
+<div class="switcher">
+  <p>
+    Nearly 15% of Goibibo's logged-in users make bookings for family or friends on the mobile web.
+    Goibibo used the <a href="/contact-picker/">Contact Picker API</a> to enable PWA users to fill
+    in forms on behalf of others hassle-free.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Pdqx8qyXbwzzS8ivNS3l.png", alt="Impact: 20% of users chose the seamless Goibibo experience.", width="800", height="360" %}
+  </figure>
+</div>
+
+### WebOTP {: #web-otp }
+
+<div class="switcher">
+  <p>
+    Because secure authentication is a big challenge in India, Goibibo
+    used the <a href="/web-otp/">WebOTP (One-Time Password) API</a>
+    to reduce sign-in friction on their PWA.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Nf0NeE3sSFOrYleAsxVd.png", alt="Impact: 20% increase in their mobile web logged-in users; 25% drop in OTP retry API calls during sign up.", width="800", height="526" %}
+  </figure>
+</div>
+
+### Web Share API {: #web-share }
+
+<div class="switcher">
+  <p>
+    To bridge the gap between their web and iOS/Android experiences,  Goibibo adopted the
+    <a href="/web-share/">Web Share API</a> to make it easier to share  links, text, or files around hotel
+    details, train availability, and so on.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u5pl2i6MHBkDZESQRHXR.png", alt="Impact: 5% of new sessions came from Web Share API.", width="800", height="356" %}
+  </figure>
+</div>
+
+### Push notifications {: #notifications}
+
+<div class="switcher">
+  <p>
+    Goibibo used <a href="https://developers.google.com/web/fundamentals/push-notifications">web push
+    notifications</a> to retarget bounced users with relevant updates like flight fare alerts and other
+    customized content.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/baFHO5RXsOVdE6qiT0AR.png", alt="Impact: Retargeted users converted 4x more compared to normal user base.", width="800", height="414" %}
+  </figure>
+</div>
+
+## How new web capabilities improved Goibibo's funnel {: #funnel }
+
+<style>
+@media (min-width: 865px) {
+  #funnel {
+    max-width: 75%;
+  }
+}
+</style>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rsENPcTITCviudxIhPU1.png", alt="1. Web Share improved returning user percentage 2. Contact Picker enhanced user experience, making it easier for guests to book 3. WebOTP reduced friction during transactions, resulting in less time spent on OTP screen and less retry API calls 4. Push notifications improved conversions of retargeted users", width="711", height="627" %}
+</figure>
+
+## Overall business results {: #results }
+
++   Iterations to PWA interfaces resulted in a 60% jump in conversion rate (compared to the
+    previous mobile web flow) and delighted users.
++   [New web capabilities](https://developer.chrome.com/blog/fugu-status/) improved UX and caused a 20% increase
+    in logged-in users (who convert 6x more).
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    We always strive for seamless user experience and in turn better  conversion rates. We saw
+    improved user engagement and better conversion rates on PWA than on the original mobile web flow.
+    Hence,  investing in PWA is critical to our success and if we had not, it would have cost us a
+    fortune.
+  </p>
+  <cite>Rithish Saralaya, VP Engineering, Goibibo</cite>
+</blockquote>
+
+Check out the [Scale on web case studies](/tags/scale-on-web) page for more
+success stories from India and Southeast Asia.
diff --git a/src/site/content/en/blog/google-chrome-frame/index.md b/src/site/content/en/blog/google-chrome-frame/index.md
new file mode 100644
index 00000000000..adf262f1c9c
--- /dev/null
+++ b/src/site/content/en/blog/google-chrome-frame/index.md
@@ -0,0 +1,154 @@
+---
+layout: post
+title: Rendering HTML5 in older browsers with Google Chrome Frame
+authors:
+  - malteubl
+date: 2011-05-30
+tags:
+  - blog
+---
+
+{% Aside %}
+**Update June 2013:** Google is winding down Chrome Frame, and plans to cease support and updates to it in January 2014. Please read the [Chromium blog post](http://blog.chromium.org/2013/06/retiring-chrome-frame.html) for more information. For guidance on what you need to know as a developer, please read the [developer FAQ for Chrome Frame](https://developers.google.com/chrome/chrome-frame/).
+{% endAside %}
+
+## Introduction
+HTML5 adds a multitude of new awesome tools to the web developer toolbox, including the following:
+
+- New, more powerful JavaScript APIs
+- SVG for vector graphics
+- Canvas for 2D and with WebGL 3D graphics
+- CSS3 for rounded corners, gradients, etc.
+- More expressive markup
+
+This list is, of course, not comprehensive; the web platform
+has moved forward massively, and the gap between old browsers and modern ones is widening every day.<br>
+Every major desktop browser now supports significant parts of HTML5 in the latest version but old browsers sticking around create a challenge for adopting the latest and greatest features today.
+
+[Google Chrome Frame](http://www.google.com/chromeframe) can help you build state-of-the-art HTML5 pages today while still enabling people using
+older browsers to see your content. 
+
+## What is Google Chrome Frame
+
+Google Chrome Frame is a plugin for Internet Explorer that enables rendering the full browser canvas
+using Google Chrome’s rendering engine. It supports all the HTML5 features that you find in Chrome
+seamlessly integrated into the Internet Explorer user experience. Chrome Frame is available for
+Internet Explorer 6, 7, 8, and 9. Chrome Frame is certainly more useful when supporting old browser such as
+IE6-to-IE8 but if you, for example, require WebGL for your application, requiring Chrome Frame for IE9 users might
+be useful as well.
+
+HTML5 polyfills provide another way to smooth out the transition to newer browsers. Unfortunately,
+they cannot emulate every feature, and they slow down your page in old browsers, which are already
+slower that the new generation, even more.
+
+
+Even if your site does not need HTML5 features, using Chrome Frame could still provide a better
+user experience. For users who already have it installed, rendering is generally faster and they can
+get access to features that are not supported in older browsers. You
+can, of course, still decide to support old browsers for  users who do not have Chrome Frame on
+their machine.
+
+## Opting in
+
+You can enable Chrome Frame to render a page by adding an HTML metatag or using an HTTP header. This is very important. It means no site will break
+if a user has Chrome Frame installed, because the site is in full control of using the plugin or default
+rendering. The following code snippets show how a site can opt into being rendered by Chrome Frame.
+
+Option 1: HTTP-Header (you can add this to your [HTTP server (e.g. Apache) configuration)](http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Making-Your-Pages-Work-With-Google-): 
+
+```http
+X-UA-Compatible: chrome=1
+```
+
+Option 2: Meta-tag (Just paste this into your HTML `<head>` section)
+
+```html
+<meta http-equiv="X-UA-Compatible" content="chrome=1">
+```
+
+Once you have added either one of these to your site, pages are rendered using Chrome Frame if it is
+installed on the user’s machine.
+
+## Prompting for Google Chrome Frame
+
+You may decide to fully deprecate support for old browsers for many reasons including the following:
+
+- Your site requires modern features such as HTML5 video, canvas, WebGL, or CSS3
+- Development time spent on old browsers is too high
+- Speed up development time for new features
+
+Chrome Frame might provide a strategy to continue giving users of old browsers a way to still use
+your site.
+
+Chrome Frame transmits that it is available by extending the host's User-Agent header with the string "chromeframe".
+For more information see [Chrome Frame User Agent.](http://www.google.com/url?q=http%3A%2F%2Fwww.chromium.org%2Fdevelopers%2Fhow-tos%2Fchrome-frame-getting-started%2Funderstanding-chrome-frame-user-agent)
+
+Use server-side detection to look for this token and determine whether Chrome Frame can be used for a page. If Chrome Frame is present, you can insert the required meta tag; if not, you can redirect users to a page that explains how to install Chrome Frame. As an alternative to server-side sniffing, you can use the CFInstall.js script to detect Chrome Frame and prompt users to install the plug-in without restarting their browsers. Using the script is straightforward. Just add the script tags and optional styles to your page as in the following example:
+
+```html
+<html>
+<body>
+<script type="text/javascript"
+src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
+
+<style>
+/*
+CSS rules to use for styling the overlay:
+    .chromeFrameOverlayContent
+    .chromeFrameOverlayContent iframe
+    .chromeFrameOverlayCloseBar
+    .chromeFrameOverlayUnderlay
+*/
+</style>
+
+<script>
+// You may want to place these lines inside an onload handler
+CFInstall.check({
+mode: "overlay",
+destination: "http://www.waikiki.com"
+});
+</script>
+</body>
+</html>
+```
+
+### Prompt yourself
+
+You might also decide to build a landing page or layer yourself. Send users to this URL
+
+[http://www.google.com/chromeframe/](http://www.google.com/chromeframe/)
+
+which can be put in an IFRAME.
+
+Append a redirect parameter to send users back to your site after installation is complete:
+
+[http://www.google.com/chromeframe/?redirect=http://www.google.com/](http://www.google.com/chromeframe/?redirect=http://www.google.com/)
+Instead of going to the Chrome Frame landing page, you could also send the users directly to the EULA thus saving one step in the installation process.
+[http://www.google.com/chromeframe/eula.html](http://www.google.com/chromeframe/eula.html)
+
+### No admin-rights needed
+
+Users can install Chrome Frame without having administrative privileges on their machines.
+
+Append the `user=true` parameter to enable user level installation of Chrome Frame, as in the following:
+
+[http://www.google.com/chromeframe/?user=true](http://www.google.com/chromeframe/?user=true)
+
+### Enterprise installation
+
+Enterprises can deploy Chrome Frame company wide using the MSI installer which can be downloaded here:
+[http://www.google.com/chromeframe/eula.html?msi=true](http://www.google.com/chromeframe/eula.html?msi=true).
+
+For more information on Chrome and enterprise deployments see [http://www.chromium.org/administrators](http://www.chromium.org/administrators).
+
+## Adoption
+
+Many major websites such as [yahoo.com](http://yahoo.com), [wordpress.com](http://wordpress.com) and several Google properties have adopted Google
+Chrome Frame. Besides giving their users access to a more modern web experience for many sites, Chrome Frame
+also presents a significant improvement in initial load time. You can check whether Chrome Frame helps your
+site get faster rendering by going to [webpagetest.org](http://webpagetest.org) and selecting Chrome Frame as the browser.
+
+## More info
+
+For more Information see the [Getting Started Guide](http://www.google.com/url?q=http%3A%2F%2Fwww.chromium.org%2Fdevelopers%2Fhow-tos%2Fchrome-frame-getting-started) or watch this video from Google IO 2011
+{% YouTube id="3YkEUpJQP3o" %}
diff --git a/src/site/content/en/blog/google-io-2013/index.md b/src/site/content/en/blog/google-io-2013/index.md
new file mode 100644
index 00000000000..12f9a7f56f5
--- /dev/null
+++ b/src/site/content/en/blog/google-io-2013/index.md
@@ -0,0 +1,218 @@
+---
+layout: post
+title: Case Study - Google I/O 2013 Experiment
+date: 2013-04-12
+updated: 2013-04-17
+authors:
+  - thomasreynolds
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+To build developer interest on the Google I/O 2013 website before conference registration opened, we developed a series of mobile-first experiments and games focusing on touch interactions, generative audio and the joy of discovery. Inspired by the potential of code and the power of play, this interactive experience begins with the simple sounds of "I" and "O" when you tap the new I/O logo.
+
+## Organic Motion
+
+We decided to implement the I and O animations in a wobbly, organic effect that isn't often seen in HTML5 interactions. Dialing in the options to make it feel fun and reactive took a little time. 
+
+### Bouncy Physics Code Example
+
+To accomplish this effect, we used a simple physics simulation on a series of points representing the edges of the two shapes. When either shape is tapped, all the points are accelerated out from the location of the tap. They stretch out and away before they are pulled back in.
+
+On instantiation, each point gets a random acceleration amount and rebound "bounciness" so they do not animate uniformly, as you can see in this code:
+
+```js
+this.paperO_['vectors'] = [];
+
+// Add an array of vector points and properties to the object.
+for (var i = 0; i < this.paperO_['segments'].length; i++) {
+  var point = this.paperO_['segments'][i]['point']['clone']();
+  point = point['subtract'](this.oCenter);
+
+  point['velocity'] = 0;
+  point['acceleration'] = Math.random() * 5 + 10;
+  point['bounce'] = Math.random() * 0.1 + 1.05;
+
+  this.paperO_['vectors'].push(point);
+}
+```
+
+Then, when tapped, they are accelerated outwards from the position of the tap using the code here:
+
+```js
+for (var i = 0; i < path['vectors'].length; i++) {
+  var point = path['vectors'][i];
+  var vector;
+  var distance;
+
+  if (path === this.paperO_) {
+    vector = point['add'](this.oCenter);
+    vector = vector['subtract'](clickPoint);
+    distance = Math.max(0, this.oRad - vector['length']);
+  } else {
+    vector = point['add'](this.iCenter);
+    vector = vector['subtract'](clickPoint);
+    distance = Math.max(0, this.iWidth - vector['length']);
+  }
+
+  point['length'] += Math.max(distance, 20);
+  point['velocity'] += speed;
+}
+```
+
+Finally, every particle is decelerated on every frame and slowly returns to equilibrium with this approach in code:
+
+```js
+for (var i = 0; i < path['segments'].length; i++) {
+  var point = path['vectors'][i];
+  var tempPoint = new paper['Point'](this.iX, this.iY);
+
+  if (path === this.paperO_) {
+    point['velocity'] = ((this.oRad - point['length']) /
+      point['acceleration'] + point['velocity']) / point['bounce'];
+  } else {
+    point['velocity'] = ((tempPoint['getDistance'](this.iCenter) -
+      point['length']) / point['acceleration'] + point['velocity']) /
+      point['bounce'];
+  }
+
+  point['length'] = Math.max(0, point['length'] + point['velocity']);
+}
+```
+
+### Organic Motion Demo
+
+Here is the I/O home mode for you to play with. We've also exposed a bunch of additional options in this implementation. If you turn on "show points" you will see the individual points that the physics simulation and forces are acting on. 
+
+## Reskinning
+
+Once we were happy with the home mode motion, we wanted to use that same effect for two retro modes: Eightbit and Ascii.
+
+To accomplish this reskinning, we used the same canvas from the home mode and use the pixel data to generate each of the two effects. This approach is reminiscent of an OpenGL fragment shader where each pixel of the scene is inspected and manipulated. Let's dive into this more.
+
+### Canvas "Shader" Code Example
+
+Pixels on a Canvas can be read using the `getImageData` method. The returned array contains 4 values per-pixel representing each pixels RGBA value. These pixels are strung together in a massive array-like structure. For example, a 2x2 canvas would have 4 pixels and 16 entries in its imageData array.
+
+Our canvas is full screen, so if we pretend the screen is 1024x768 (like on an iPad), then the array has 3,145,728 entries. Because this is an animation, this entire array is updated 60 times a second. Modern javascript engines can handle looping and acting on this much data quickly enough to keep the framerate consistent. (Tip: don't try logging that data to the developer console, as it will slow your browser to a crawl or crash it entirely.)
+
+Here's how our Eightbit mode reads the home mode canvas and blows up the pixels to have a blockier effect:
+
+```js
+var pixelData = pctx.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height);
+
+// tctx is the Target Context for the output Canvas element
+tctx.clearRect(0, 0, targetCanvas.width + 1, targetCanvas.height + 1);
+
+var size = ~~(this.width_ * 0.0625);
+
+if (this.height_ * 6 < this.width_) {
+ size /= 8;
+}
+
+var increment = Math.min(Math.round(size * 80) / 4, 980);
+
+for (i = 0; i < pixelData.data.length; i += increment) {
+  if (pixelData.data[i + 3] !== 0) {
+    var r = pixelData.data[i];
+    var g = pixelData.data[i + 1];
+    var b = pixelData.data[i + 2];
+    var pixel = Math.ceil(i / 4);
+    var x = pixel % this.width_;
+    var y = Math.floor(pixel / this.width_);
+
+    var color = 'rgba(' + r + ', ' + g + ', ' + b + ', 1)';
+
+    tctx.fillStyle = color;
+
+    /**
+     * The ~~ operator is a micro-optimization to round a number down
+     * without using Math.floor. Math.floor has to look up the prototype
+     * tree on every invocation, but ~~ is a direct bitwise operation.
+     */
+    tctx.fillRect(x - ~~(size / 2), y - ~~(size / 2), size, size);
+  }
+}
+```
+
+### Eightbit Shader Demo
+
+Below, we strip away the Eightbit overlay and see the original animation beneath. The "kill screen" option will show you a strange effect we stumbled upon by incorrectly sampling the source pixels. We ended up using it as a "responsive" easter egg when the Eightbit mode is resized to unlikely aspect ratios. Happy accident!
+
+## Canvas Compositing
+
+It's pretty amazing what you can accomplish by combining multiple render steps and masks. We built a [2D metaball](http://en.wikipedia.org/wiki/Metaballs) which requires that each ball have its own radial gradient and those gradients be blended together where the balls overlap. (You can see this in the demo below.)
+
+To accomplish this, we used two separate canvases. The first canvas calculates and draws the metaball shape. A second canvas draws radial gradients at each ball position. Then the shape masks the gradients and we render the final output.
+
+### Compositing Code Example
+
+Here's the code that makes everything happen:
+
+```js
+// Loop through every ball and draw it and its gradient.
+for (var i = 0; i < this.ballCount_; i++) {
+  var target = this.world_.particles[i];
+
+  // Set the size of the ball radial gradients.
+  this.gradSize_ = target.radius * 4;
+
+  this.gctx_.translate(target.pos.x - this.gradSize_,
+    target.pos.y - this.gradSize_);
+
+  var radGrad = this.gctx_.createRadialGradient(this.gradSize_,
+    this.gradSize_, 0, this.gradSize_, this.gradSize_, this.gradSize_);
+
+  radGrad.addColorStop(0, target['color'] + '1)');
+  radGrad.addColorStop(1, target['color'] + '0)');
+
+  this.gctx_.fillStyle = radGrad;
+  this.gctx_.fillRect(0, 0, this.gradSize_ * 4, this.gradSize_ * 4);
+};
+```
+
+Then, set up the canvas for masking and draw:
+
+```js
+// Make the ball canvas the source of the mask.
+this.pctx_.globalCompositeOperation = 'source-atop';
+
+// Draw the ball canvas onto the gradient canvas to complete the mask.
+this.pctx_.drawImage(this.gcanvas_, 0, 0);
+this.ctx_.drawImage(this.paperCanvas_, 0, 0);
+```
+
+## Conclusion
+
+The variety of techniques we got to use and technologies we implemented (such as Canvas, SVG, CSS Animation, JS Animation, Web Audio, etc.) made the project incredibly fun to develop.
+
+There is way more to explore than what you see here, even. Keep tapping at the I/O logo and the correct sequences will unlock more mini-experiments, games, trippy visuals and perhaps even some breakfast foods. We suggest you try it on your smartphone or tablet for the best experience.
+
+Here's a combination to get your started: O-I-I-I-I-I-I-I. Try it now: [google.com/io](http://google.com/io)
+
+## Open Source
+
+We've open sourced our code Apache 2.0 license. You can find it on our Github at: [http://github.com/Instrument/google-io-2013](http://github.com/Instrument/google-io-2013).
+
+## Credits
+
+Developers:
+
+- Thomas Reynolds
+- Brian Hefter
+- Stefanie Hatcher
+- Paul Farning
+
+Designers:
+
+- Dan Schechter
+- Sage Brown
+- Kyle Beck
+
+Producers:
+
+- Amie Pascal
+- Andrea Nelson
diff --git a/src/site/content/en/blog/google-search-sw/hero.jpg b/src/site/content/en/blog/google-search-sw/hero.jpg
deleted file mode 100644
index 27e72ce290f..00000000000
Binary files a/src/site/content/en/blog/google-search-sw/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-sw/index.md b/src/site/content/en/blog/google-search-sw/index.md
index 84cb110b918..4583266a3b7 100644
--- a/src/site/content/en/blog/google-search-sw/index.md
+++ b/src/site/content/en/blog/google-search-sw/index.md
@@ -4,7 +4,8 @@ subhead: The story of what shipped, how the impact was measured, and the tradeof
 authors:
   - jeffposnick
 date: 2019-06-20
-hero: hero.jpg
+updated: 2021-10-29
+hero: image/admin/SEsw9jtfge6PSYNqTkUl.jpg
 alt: An illustration of a service worker interacting with a cache.
 description: |
   Search for just about any topic on Google, and you're presented with a page of meaningful, relevant results. What you probably didn't realize is that this search results page may be served by a powerful piece of web technology called a service worker.
@@ -74,12 +75,12 @@ remember to come back and try again once their connection returned. With a
 service worker, it's possible to serve a custom offline HTML response, and allow
 users to enter their search query immediately.
 
-![A screenshot of the background retry interface.](offline-screenshot.png)
+{% Img src="image/admin/Q60UfWp6FNp0b9vbqJXc.png", alt="A screenshot of the background retry interface.", width="343", height="634" %}
 
 The results won't be available until there's an Internet connection, but the
 service worker allows the search to be deferred and sent to Google's servers as
 soon as the device goes back online using the
-[background sync API](https://developers.google.com/web/updates/2015/12/background-sync).
+[background sync API](https://developer.chrome.com/blog/background-sync/).
 
 ### Smarter JavaScript caching and serving
 
@@ -142,7 +143,7 @@ even when there's no chance those fetch handlers will do anything other than go
 to the network. The amount of time that it takes to start up and run the service
 worker code is pure overhead added on top of every navigation:
 
-![An illustration of the SW startup blocking the navigation request.](no-preload.png)
+{% Img src="image/admin/W9v9DmCDOo6VJp7gOXPB.png", alt="An illustration of the SW startup blocking the navigation request.", width="768", height="96" %}
 
 This puts the service worker implementation at too much of a latency
 disadvantage to justify any other benefits. Additionally, the team found that,
@@ -155,13 +156,13 @@ network request for the results page's HTML.
 
 The single, most crucial feature that allowed the Google Search team to move
 ahead with their service worker launch is
-[navigation preload](https://developers.google.com/web/updates/2017/02/navigation-preload).
+[navigation preload](https://developer.chrome.com/blog/navigation-preload/).
 Using navigation preload is a key performance win for any service worker that
 needs to use a response from the network to satisfy navigation requests. It
 provides a hint to the browser to start making the navigation request
 immediately, at the same time as the service worker starts up:
 
-![An illustration of the SW startup done in parallel with the navigation request.](with-preload.png)
+{% Img src="image/admin/rFkXhIK4xLREiROkxITA.png", alt="An illustration of the SW startup done in parallel with the navigation request.", width="614", height="179" %}
 
 As long as the amount of time it takes for the service worker to start up is
 less than the amount of time it takes to get a response back from the network,
@@ -171,7 +172,7 @@ The Search team also needed to avoid using a service worker on low-end mobile
 devices where the service worker boot time could exceed the navigation request.
 Since there's no hard-and-fast rule for what constitutes a "low-end" device,
 they came up with the heuristic of
-[checking the total RAM](https://developers.google.com/web/updates/2017/12/device-memory)
+[checking the total RAM](https://developer.chrome.com/blog/device-memory/)
 installed on the device. Anything less than 2 gigabytes of memory fell into
 their low-end device category, where service worker startup time would be unacceptable.
 
@@ -185,7 +186,7 @@ This left the Search team with multiple pieces of criteria that they could use
 to determine whether or not to use a service worker: if a user comes to the
 Google Search page using a browser that supports navigation preload, and has at
 least 2 gigabytes of RAM, and enough free storage space, then a
-[service worker is registered](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#the_first_service_worker).
+[service worker is registered](/service-worker-lifecycle/#the-first-service-worker).
 Browsers or devices that don't meet that criteria won't end up with a service
 worker, but they'll still see the same Google Search experience as they always
 have.
@@ -250,7 +251,7 @@ all of whom live under a common URL.
 
 Users can sign in to Google Search using their Google Accounts, and their search
 results experience may be customized based on their particular account data.
-Logged in users are identified by specific [browser cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies),
+Logged in users are identified by specific [browser cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies),
 which is a venerable and widely-supported standard.
 
 One downside of using browser cookies, though, is that they are not exposed
@@ -274,7 +275,7 @@ Rather than wait for experimental APIs to launch and provide direct access to
 the browser's cookies inside of a service worker, the Google Search team went
 with a stop-gap solution: whenever a page controlled by the service worker is
 loaded, the page reads the relevant cookies and uses
-[`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage)
+[`postMessage()`](https://developer.mozilla.org/docs/Web/API/Worker/postMessage)
 to send them to the service worker.
 
 The service worker then checks the current cookie value against the value
@@ -363,20 +364,20 @@ received by the endpoint that dynamically generates the service worker script.
 
 Additionally, an ETag header is set on the service worker script's HTTP
 response, ensuring that when an update check is made after 25 minutes has
-passed, the server can respond efficiently with an [HTTP 304](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304)
+passed, the server can respond efficiently with an [HTTP 304](https://developer.mozilla.org/docs/Web/HTTP/Status/304)
 response if there haven't been any updates to the service worker deployed in the
 interim.
 
 While some interactions within the Google Search web app use single page
 app-style navigations (i.e. via the
-[History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)),
+[History API](https://developer.mozilla.org/docs/Web/API/History_API#Adding_and_modifying_history_entries)),
 for the most part, Google Search is a traditional web app that uses "real"
 navigations. This comes into play when the team decided that it would be
 effective to use two options that accelerate the service worker update
 lifecycle:
-[`clients.claim()`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim)
+[`clients.claim()`](/service-worker-lifecycle/#clientsclaim)
 and
-[`skipWaiting()`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase).
+[`skipWaiting()`](/service-worker-lifecycle/#skip-the-waiting-phase).
 Clicking around Google Search's interface generally ends up navigating to new
 HTML documents. Calling `skipWaiting` ensures that an updated service worker
 gets a chance to handle those new navigation requests immediately after
@@ -394,7 +395,7 @@ as frequently as possible, by
 If you're building a single page app that users will might keep open for a long
 period of time, using `skipWaiting()` is probably not the right choice for
 you—you
-[risk running into cache inconsistencies](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase)
+[risk running into cache inconsistencies](/service-worker-lifecycle/#skip-the-waiting-phase)
 if you allow the new service worker to activate while there are long-lived
 clients.
 
@@ -446,10 +447,10 @@ based on the experience using service workers in the Google I/O web app.
 
 ## Non-goals
 
-While many in the web development community associate service workers with [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/),
+While many in the web development community associate service workers with [Progressive Web Apps](/progressive-web-apps/),
 building a "Google Search PWA" was not an initial goal of the team. The Google
 Search web app doesn't currently provide metadata via a
-[web app manifest](https://developers.google.com/web/fundamentals/web-app-manifest/),
+[web app manifest](/add-manifest/),
 nor does it encourage users to go through the
 [Add to Home Screen flow](https://developers.google.com/web/fundamentals/app-install-banners/).
 The Search team is currently satisfied with users coming to their web app via
@@ -466,3 +467,5 @@ service worker implementation, and for sharing the background material that went
 into writing this article. Particular thanks goes to Philippe Golle, Rajesh
 Jagannathan, R. Samuel Klatchko, Andy Martone, Leonardo Peña, Rachel Shearer,
 Greg Terrono, and Clay Woolam.
+
+_Update (Oct. 2021): Since this article was originally published, the Google Search team has reevaluated the benefits and tradeoffs of their current service worker architecture. The service worker described above is being retired. As the Google Search web infrastructure evolves, the team may revisit their service worker design._
diff --git a/src/site/content/en/blog/google-search-sw/no-preload.png b/src/site/content/en/blog/google-search-sw/no-preload.png
deleted file mode 100644
index 9c3d29174c6..00000000000
Binary files a/src/site/content/en/blog/google-search-sw/no-preload.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-sw/offline-screenshot.png b/src/site/content/en/blog/google-search-sw/offline-screenshot.png
deleted file mode 100644
index 326d06e3cc2..00000000000
Binary files a/src/site/content/en/blog/google-search-sw/offline-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-sw/with-preload.png b/src/site/content/en/blog/google-search-sw/with-preload.png
deleted file mode 100644
index 981078e904b..00000000000
Binary files a/src/site/content/en/blog/google-search-sw/with-preload.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/core-web-vitals.png b/src/site/content/en/blog/google-search-tools/core-web-vitals.png
deleted file mode 100644
index da06399450f..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/core-web-vitals.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/coverage.png b/src/site/content/en/blog/google-search-tools/coverage.png
deleted file mode 100644
index 23581ac162a..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/coverage.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/hero.png b/src/site/content/en/blog/google-search-tools/hero.png
deleted file mode 100644
index 5dc093db485..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/index.md b/src/site/content/en/blog/google-search-tools/index.md
index 581be7f7c86..1310495b1fc 100644
--- a/src/site/content/en/blog/google-search-tools/index.md
+++ b/src/site/content/en/blog/google-search-tools/index.md
@@ -5,8 +5,8 @@ subhead: >
 authors:
   - martinsplitt
 date: 2020-06-25
-hero: hero.png
-thumbnail: thumbnail.png
+hero: image/admin/yUVYFuA1d5E33nfvT0fs.png
+thumbnail: image/admin/AsANZF0n2e4eNv11AwJH.png
 alt: A screenshot of the Core Web Vitals report.
 description: >
   How to debug SEO issues on individual pages or across an entire site.
@@ -24,12 +24,11 @@ gives you an overview of the available tools and suggestions on when to use each
 
 ## Find basic SEO issues with Lighthouse
 
-Use [Lighthouse](https://developers.google.com/web/tools/lighthouse) for your first investigation.
+Use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) for your first investigation.
 It comes with a bunch of [SEO audits](/pass-lighthouse-seo-audit/).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lighthouse.png" 
-       alt="A screenshot of SEO audits in Lighthouse.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/c6SfL83IXMmBArczs9Le.png", alt="A screenshot of SEO audits in Lighthouse.", width="800", height="74" %}
 </figure>
 
 The Lighthouse SEO audits are very basic first checks for a single page of your website. They catch
@@ -65,18 +64,16 @@ These testing tools provide you with multiple helpful pieces of information, lik
 +   An overview of the resources loaded and explanations of why resources can't be loaded
 +   Console log messages and JavaScript errors with stack traces
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="mobile-friendly-test.png" 
-       alt="A screenshot of the Mobile-Friendly Test.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HxpuDusVnyVm21QSD20b.png", alt="A screenshot of the Mobile-Friendly Test.", width="800", height="492" %}
 </figure>
 
 The Google Search Console [URL Inspection
 Tool](https://support.google.com/webmasters/answer/9012289) can also give you detailed
 information about the status of a page.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="url-inspection-tool.png" 
-       alt="A screenshot of the URL Inspection Tool.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jyUDvp0zvkpUEgDjEULN.png", alt="A screenshot of the URL Inspection Tool.", width="800", height="590" %}
 </figure>
 
 Here you can find out:
@@ -106,9 +103,8 @@ Console](https://search.google.com/search-console/about) is where you need to go
 The [Coverage report](https://support.google.com/webmasters/answer/7440203) shows you which
 pages of your website are indexed and which ones have problems.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="coverage.png" 
-       alt="A screenshot of the Coverage report.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A1KZQbjh96n9uv48fBCT.png", alt="A screenshot of the Coverage report.", width="754", height="567" %}
 </figure>
 
 ### Core Web Vitals report
@@ -117,9 +113,8 @@ The [Core Web Vitals report](https://support.google.com/webmasters/answer/920552
 get an overview of how the pages of your website are performing in terms of the [Core Web
 Vitals](/vitals/#core-web-vitals).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="core-web-vitals.png" 
-       alt="A screenshot of the Core Web Vitals report.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LL7U1EcPCyuDcmjPD13c.png", alt="A screenshot of the Core Web Vitals report.", width="744", height="596" %}
 </figure>
 
 ## Make these tools part of your developer tooling
diff --git a/src/site/content/en/blog/google-search-tools/lighthouse.png b/src/site/content/en/blog/google-search-tools/lighthouse.png
deleted file mode 100644
index 223283682f8..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/lighthouse.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/mobile-friendly-test.png b/src/site/content/en/blog/google-search-tools/mobile-friendly-test.png
deleted file mode 100644
index d7bdf71a686..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/mobile-friendly-test.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/thumbnail.png b/src/site/content/en/blog/google-search-tools/thumbnail.png
deleted file mode 100644
index cba171b82e4..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/google-search-tools/url-inspection-tool.png b/src/site/content/en/blog/google-search-tools/url-inspection-tool.png
deleted file mode 100644
index 45cf9eb50a4..00000000000
Binary files a/src/site/content/en/blog/google-search-tools/url-inspection-tool.png and /dev/null differ
diff --git a/src/site/content/en/blog/googleio22-recap/index.md b/src/site/content/en/blog/googleio22-recap/index.md
new file mode 100644
index 00000000000..194a8f5d59b
--- /dev/null
+++ b/src/site/content/en/blog/googleio22-recap/index.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: "Google I/O 2022: That's a wrap!"
+subhead: >
+  A roundup of the announcements from Google I/O this year. 
+description: >
+  A roundup of the announcements from Google I/O this year.
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/spDtq47VLuwNmSKB19tl.jpg
+alt: A bike in front of a large tent.
+date: 2022-05-13
+authors:
+  - paulkinlan
+tags:
+  - blog
+---
+
+At [Google IO 2022](https://io.google/2022/products/web/) we shared updates on our progress to help create a web that is instant, and connects people, no matter their device or bandwidth. A powerful platform that delivers experiences that we once never thought possible in a browser. And one that people can trust to keep their data safe. Here's a recap on how we're making it easy for you to build experiences that people will love.
+
+## An instant web
+
+Great web performance is a partnership between the browser and web developers. That's why we've made it easy for you to measure how well your website performs with the three Core Web Vitals. Optimizing your Vitals results in a better user experience, and better discoverability through Google Search. Be sure to check out our session, [Core Web Vitals in the real world](https://io.google/2022/program/7cb6e1ad-504b-42d8-9ab6-105c48a65b80/) to learn how websites around the world are optimizing their scores to achieve better user experiences.
+
+[Largest Contentful Paint (LCP)](/lcp/) is an important, user-centric metric for measuring perceived load speed. A fast LCP helps reassure the user that the page is useful, because it marks the point in the page load timeline when the main content has loaded. To learn more about this complex metric, check out our session, [A deep dive into optimizing LCP](https://io.google/2022/program/3d49f700-4e86-4a50-9f8a-1a2742bc4c22/).
+
+<figure>
+<a href="https://io.google/2022/program/3d49f700-4e86-4a50-9f8a-1a2742bc4c22/">
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/DzsyLVvbTlGL6MT3cHcW.png", alt="A still from a talk with the speaker sharing an LCP value of 52.7%", width="800", height="442" %}
+</a></figure>
+
+Another new performance metric is something we are calling [Interaction to Next Paint](http://web.dev/inp/) (INP). Unlike First Input Delay, it considers not just the first interaction, but all interactions on a page. INP therefore does a better job of capturing the interaction latency as experienced by the user. Learn more by checking out [The State of Responsiveness on the Web](https://io.google/2022/program/62e33209-bd18-48c5-801f-d6d1cc442e4b/) session. For help with your performance journey, be sure to [check out the new Performance Insights panel in Chrome DevTools along with many more updates](https://io.google/2022/program/6213f6fd-c940-4e80-b011-beec59d610f8/) based on your feedback.
+
+## Powerful capabilities
+
+Since last I/O, an array of new APIs have landed in stable Chrome. These unlock powerful new web experiences for the user. One of my favorite examples is how [Adobe brought Creative Cloud to the web, starting with Photoshop and Illustrator.](https://io.google/2022/program/b235121c-8e48-4cfb-89a6-1481c220fce1/)
+
+We're also continuing to expand on the ways websites can integrate with the underlying operating system and hardware. Advanced apps now have the capability to seamlessly integrate with the operating system, so users can find the app on their desktop or homescreen, or easily access their files. We've also continued to improve installability, so be sure to [check out how to make a richer install experience](https://io.google/2022/program/a8a9892b-ae1d-4078-a818-2ff0b674a12b/).
+
+<figure>
+<a href="https://io.google/2022/program/a8a9892b-ae1d-4078-a818-2ff0b674a12b/">
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/bA4Q4h2lp1ZkBws5N5hi.png", alt="A still from a talk with the speaker showing examples of a richer install UI.", width="800", height="441" %}
+</a></figure>
+
+## Safe and secure
+
+Chrome innovation extends to our work on user privacy and security. That's why we're taking a different approach by providing a path for developers to maintain functionality, while keeping the user safe. This is our [Privacy Sandbox vision](https://developer.chrome.com/docs/privacy-sandbox/). Learn more about the [progress we've made to phase out third-party cookies and land new APIs without cross-site tracking](https://io.google/2022/program/fd566197-8194-4989-91dc-6fd0173faa7e/). We have a number of new origin trials that you can participate in today that will help you preserve web functionality, while safeguarding user privacy. 
+
+<figure>
+<a href="https://io.google/2022/program/fd566197-8194-4989-91dc-6fd0173faa7e/">
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/Y2CyrX6t1IeG014OKBsn.png", alt="A still from a talk showing set-cookie code along with the speaker.", width="800", height="441" %}
+</a></figure>
+
+And to keep users safe from phishing, we need better authentication methods. We're removing the friction of sign on and passwords with passkeys, which you can learn more in our session, [A path to a world without passwords](https://io.google/2022/program/e3bb37a4-2723-4d72-a5b3-1a23abb94ac0/).
+
+## Beautiful and delightful
+
+This last year has seen huge improvements across all browsers in CSS and layout primitives. For Chrome, [RenderingNG](https://developer.chrome.com/blog/renderingng/) has made it possible to deliver a number of features that have been long hoped for by developers. Watch our [State of CSS](https://io.google/2022/program/9f58d739-87b1-42f0-b715-32584508a69b/) and explore new styling APIs available today and tomorrow: container queries, subgrid, color functions, or check out our [Shared Element Transitions](https://io.google/2022/program/81ed353d-20e4-4e9a-9b4d-d65b103cfc71/) talk to learn how we are working to bring seamless transitions between pages.
+
+<figure>
+<a href="https://io.google/2022/program/9f58d739-87b1-42f0-b715-32584508a69b/">
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/883tzmfbbcALNf8itivk.png", alt="A still from a talk featuring a speaker and a slide showing the CSS accent-color property.", width="800", height="440" %}
+</a></figure>
+
+## Simplifying web development
+
+We share our innovation through Chromium, our open-source browser project that brings the web to Android apps, TVs and VR headsets, and is the engine powering other browsers. 
+
+We're mindful that your priorities are for building features that work across many browsers. [Learn about how we, along with other browsers, are working together to make it easier to develop for the web](https://io.google/2022/program/6c749c36-e85f-470f-a981-49b1ddbe9d20/) by ensuring features are interoperable so you can focus on building rich web experiences for users.
+
+Finally, be sure to check out our [What's new for the web platform](https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/) keynote where we'll walk you through the latest web platform features and their availability across browsers so you know when you can rely on them in your sites and apps.
+
+<figure>
+<a href="https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/">
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/QuNDlrtCHpe5kbgmnsXT.png", alt="A still from the What's new for the web platform talk.", width="800", height="440" %}
+</a></figure>
\ No newline at end of file
diff --git a/src/site/content/en/blog/googleplus/index.md b/src/site/content/en/blog/googleplus/index.md
new file mode 100644
index 00000000000..74dfd23d437
--- /dev/null
+++ b/src/site/content/en/blog/googleplus/index.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: Google+
+description: |
+    We hit our goal of never downloading more than 60k of HTML, 60k of JavaScript and 60k of CSS at any one time!
+date: 2015-11-17
+updated: 2019-03-04
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+## Summary
+
+Google+ goes completely responsive.
+
+{% Aside %}
+We hit our goal of never downloading more than 60k of HTML, 60k of
+JavaScript and 60k of CSS at any one time!
+{% endAside %}
+
+## Going Responsive
+
+Google+ is where people come together around shared interests, from
+Zombie Cats to Vintage Calculators. Until recently,
+Google+ had two different versions of their website - one for desktop,
+and one for the mobile web that was designed for older browsers.
+
+## Challenges
+
+Maintaining two sites brought with it a unique set of challenges. Having
+separate versions of the site meant that each feature had to be implemented
+twice. This resulted in a lot of duplicate code and additional effort optimizing
+two experiences for desktop and mobile web. And as the lines between devices
+became increasingly blurry - with desktops that support touch and
+powerful mobile devices with ever larger screens - having different
+designs for desktop and mobile made less and less sense.
+
+As we added features, our legacy desktop site also became slow and bloated.
+Earlier this year our homepage weighed around 5MB and produced around 250 HTTP
+requests. It just wasn’t performing well. Images on the site were heavy and
+unoptimized, slowing the page down further. As a result, our stream was almost
+inaccessible on slow and unstable networks and the experience for these users
+was disappointing at best. In addition, the requirement to support legacy
+browsers on the mobile web kept us from relying on JavaScript throughout the
+site and prevented us from implementing highly interactive features. We
+could not rely on the advances in mobile web browsers.
+
+## Solution
+
+We started with a focus on responsive design: one implementation that would
+work across mobile, tablet, desktop, and beyond. We looked thoroughly at every
+single feature, page, JavaScript library and CSS class. We wanted to build a
+system that would ensure that the site would only download what was absolutely
+necessary to be functional unless the user requested more. The challenge was
+building a website that functioned properly on a slower mobile phone with a
+cellular connection, but still gave a great immersive experience on faster
+browsers and larger screens.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6R8AHhuRMx8X9AMS7OwL.jpg", alt="Evolution of Google+ site", width="800", height="292" %}
+</figure>
+
+This set of constraints meant that we had to scrutinize each and every code
+change going forward. To achieve this we established a 6^5 rule to ensure that
+on initial page load we didn’t download more than 60K of HTML, 60K of
+JavaScript, 60K of CSS, our animations were always 60fps, and we had an average
+latency of 0.6s.
+
+To achieve this, we chose JavaScript and CSS frameworks that built modularity
+and lazy loading in from the beginning. We therefore ensure that users only
+download JavaScript and CSS when they actually use the feature that requires it.
+This is done through a template driven approach that combined with our build and
+module system so that things work with almost no effort from developers.
+
+With this new framework, we started prototyping a reimplementation of Google+ on
+the web. We began disallowing “bad” things and setting strict rules for
+development. One of our major rules was that all our pages needed to be both
+server-side and client-side rendered. With server-side rendering we make sure
+that the user can begin reading as soon as the HTML is loaded, and no
+JavaScript needs to run in order to update the contents of the page. Once the
+page is loaded and the user clicks on a link, we do not want to perform a full
+round-trip to render everything again. This is where client-side rendering
+becomes important - we just need to fetch the data and the templates,
+and render the new page on the client. This involves lots of tradeoffs; so we
+used a framework that makes server-side and client-side rendering easy without
+the downside of having to implement everything twice - on the server
+and on the client.
+
+Other rules included disallowing height and width animation that would cause
+browser re-layouts and have negative effects on performance. For DOM
+manipulations and animations we scheduled tasks to be done in-sync with the
+render refresh rate of the browser. We also group all measure tasks together
+so that we can avoid expensive repeated style calculations. We also relied
+heavily on Chrome profiler tools to ensure everything was working as intended
+as we went along. In addition, we created tools that calculate the effect of
+code changes on JS-footprint to make sure we do not drastically increase
+our page size.
+
+This took some time, but it would have been much more difficult if we hadn’t
+had the ability to identify and eliminate problems as we built.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nMRBNFZqPRJjDDaGv9Vf.jpg", alt="The finished Google+ responsive site.", width="800", height="510" %}
+</figure>
+
+We launched our mobile-web version of this responsive implementation in
+February, 2015. This allowed us to vet the new designs and our new process.
+We used data from this launch to validate what worked and what did not. We
+iterated on the design and started expanding to support more devices. In
+November, 2015 we launched this new implementation across all devices.
+
+## Results
+
+Without sacrificing performance, Google+ were able to build a complex web app
+with rich UI. The site is now faster and leaner than ever before.
+
+{% YouTube id="MaQcCQQTs6E" %}
+
+{% Aside %}
+We hit our goal of never downloading more than 60k of HTML, 60k of
+JavaScript and 60k of CSS at any one time!
+{% endAside %}
+
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Before</th>
+      <th>After</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Total home page weight, gzipped (with images)</td>
+      <td>22,600 KB</td>
+      <td>327 KB</td>
+    </tr>
+    <tr>
+      <td>Request count</td>
+      <td>251</td>
+      <td>45</td>
+    </tr>
+    <tr>
+      <td>HTML (not gzipped)</td>
+      <td>1,100 KB</td>
+      <td>362 KB</td>
+    </tr>
+    <tr>
+      <td>JavaScript & CSS (gzipped)</td>
+      <td>2,768 KB</td>
+      <td>111KB</td>
+    </tr>
+    <tr>
+      <td>Average complete page load time (latency)</td>
+      <td>12 seconds<br>0.7 seconds to first byte</td>
+      <td>3 seconds<br>0.1 seconds to first byte</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/site/content/en/blog/gopherwoord-studios-resizing-html5-games/index.md b/src/site/content/en/blog/gopherwoord-studios-resizing-html5-games/index.md
new file mode 100644
index 00000000000..5928f3cfd76
--- /dev/null
+++ b/src/site/content/en/blog/gopherwoord-studios-resizing-html5-games/index.md
@@ -0,0 +1,206 @@
+---
+layout: post
+title: Case Study - Auto-Resizing HTML5 Games
+date: 2013-04-12
+updated: 2013-04-17
+authors:
+  - derekdetweiler
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/omUaDtNoIzHeg4TLyM72.png", alt="Screenshot of thwack fullscreen", width="288", height="216" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AoR5pTI6giAQ0PwYVZo0.png", alt="screenshot of thwack smaller in browser window", width="288", height="185" %}
+</figure>
+
+This approach worked well for Sand Trap, so we used the same method on our latest game, Thwack!. The game automatically adjusts screen resolutions to fit both full-screen and custom-sized windows, as shown in the screenshots below.
+
+Implementing this required taking advantage of both CSS and JavaScript. Using CSS to fill the whole screen is trivial, but CSS does not allow you to maintain the same width-to-height ratio to prevent stretching of the canvas and game area. That's where JavaScript comes in. You can rescale document elements with JavaScript and trigger the resize on window events.
+
+## Preparing the Page
+
+The first step is to designate the area on the page where the game will take place. If you include this as a div block, you can place other tags or a canvas element within it. By setting it up correctly, these child elements will inherit the scaling of the parent div block.
+
+If you have two parts to your game area, a play area and a score-keeping area, it might look like this:
+
+```html
+<div id="gameArea">
+  <canvas id="gameCanvas"></canvas>
+  <div id="statsPanel"></div>
+</div>
+```
+
+Once you have a basic document structure, you can give these elements a few CSS properties to prepare them for resizing. Many of the CSS properties for “gameArea” are manipulated directly by JavaScript, but in order for them to work, set up a few other CSS properties starting with the parent gameArea div block:
+
+```css
+#gameArea {
+  position: absolute;
+  left:     50%;
+  top:      50%;
+}
+```
+
+This puts the top left corner of the canvas in the center of the screen. The JavaScript auto-resize function described in the next section manipulates additional CSS properties to resize the game area and center it in the window.
+
+Since the game area is automatically resized according to the dimensions of the window, you do not want the dimensions in pixels for the gameArea div block’s child elements; instead, you want it in percentages. Pixel values do not allow inner elements to scale with the parent div as it changes. However, it may be helpful to start with pixels and then convert them to percentages once you have a layout that you like.
+
+For this example, start with the game area being 300 pixels tall and 400 pixels wide. The canvas covers the entire game area, and a semitransparent stats panel runs along the bottom at 24 pixels tall, as shown in Figure 1.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d5llSwfbQQvkdfihlJaD.png", alt="Dimensions of gameArea child elements in pixels", width="482", height="325" %}
+    <figcaption>
+    Figure 1: Dimensions of gameArea child elements in pixels
+    </figcaption>
+</figure>
+
+Translating these values to percentages makes the canvas 100% in width and 100% in height (of gameArea, not the window). Dividing 24 by 300 gives the height of the stats panel at 8%, and, since it will cover the bottom of the game area, it’s width will also be 100%, as seen in Figure 2.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TKp9j0WvjzGHfXLGJ1eQ.png", alt="Dimensions of gameArea child elements in percentages", width="482", height="325" %}
+  <figcaption>Figure 2: Dimensions of gameArea child elements in percentages</figcaption>
+</figure>
+
+Now that you have determined the dimensions of the game area and its child elements, you can put together the CSS properties for the two inside elements as follows:
+
+```css
+#gameCanvas {
+  width: 100%;
+  height: 100%;
+}
+```
+
+```css
+#statsPanel {
+  position: absolute;
+  width: 100%;
+  height: 8%;
+  bottom: 0;
+  opacity: 0.8;
+}
+```
+
+## Resizing the Game
+
+Now you are ready to create a function to handle the window being resized. First, grab a reference to the parent gameArea document element.
+
+```js
+var gameArea = document.getElementById('gameArea');
+```
+
+Since you are not concerned about the exact width or height, the next piece of information you need to set is the ratio of width to height. Using your earlier reference of a game area of 400 pixels wide and 300 pixels high, you know that you want to set the aspect ratio at 4 units wide and 3 units high.
+
+```js
+var widthToHeight = 4 / 3;
+```
+
+Since this function is called whenever the window is resized, you also want to grab the window’s new dimensions so you are able to adjust your game’s dimensions to match. Find this by using the window’s innerWidth and innerHeight properties.
+
+```js
+var newWidth = window.innerWidth;
+var newHeight = window.innerHeight;
+```
+
+Just as you determined the ratio of width to height you want, now you can determine the window’s current width to height ratio:
+
+```js
+var newWidthToHeight = newWidth / newHeight;
+```
+
+This allows you to decide whether to make the game fill the screen vertically or horizontally, as shown in Figure 3.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1WG3mkiIUb1agvOADpYP.png", alt="Fitting the gameArea element to the window while maintaining aspect ratio", width="592", height="283" %}
+  <figcaption>
+Figure 3: Fitting the gameArea element to the window while maintaining aspect ratio
+  </figcaption>
+</figure>
+
+
+If the desired game area shape is wider than the window’s shape (and height is shorter), you need to fill up the window horizontally and leave margins along the top and bottom. Likewise, if the desired game area shape is higher than the window’s shape (and the width is narrower), you need to fill up the window vertically and leave margins along the left and right.
+
+To do this, test your desired ratio of width to height with the current window’s ratio of width to height and make the appropriate adjustments as follows:
+
+```js
+if (newWidthToHeight > widthToHeight) {
+  // window width is too wide relative to desired game width
+  newWidth = newHeight * widthToHeight;
+  gameArea.style.height = newHeight + 'px';
+  gameArea.style.width = newWidth + 'px';
+} else { // window height is too high relative to desired game height
+  newHeight = newWidth / widthToHeight;
+  gameArea.style.width = newWidth + 'px';
+  gameArea.style.height = newHeight + 'px';
+}
+```
+
+Now that you have adjusted the width and height of the game area, you need to center things up by placing a negative margin on the top that is half of the height and on the left that is half of the width. Remember that CSS is already placing the top-left corner of the gameArea div at the exact center of the window, so this centers the game area in the window:
+
+```js
+gameArea.style.marginTop = (-newHeight / 2) + 'px';
+gameArea.style.marginLeft = (-newWidth / 2) + 'px';
+```
+
+You would also want to automatically adjust the font size. If you have all of the child elements using em, you can simply set the fontSize CSS property of the gameArea div block to a value determined by its size.
+
+```js
+gameArea.style.fontSize = (newWidth / 400) + 'em';
+```
+
+Lastly, you want to make the canvas drawing dimensions match its new width and height. Note that the rest of the game code must keep game engine dimensions separate from the canvas drawing dimensions to accommodate for a dynamic canvas resolution.
+
+```js
+var gameCanvas = document.getElementById('gameCanvas');
+gameCanvas.width = newWidth;
+gameCanvas.height = newHeight;
+```
+
+So the completed resize function might look something like this:
+
+```js
+function resizeGame() {
+    var gameArea = document.getElementById('gameArea');
+    var widthToHeight = 4 / 3;
+    var newWidth = window.innerWidth;
+    var newHeight = window.innerHeight;
+    var newWidthToHeight = newWidth / newHeight;
+    
+    if (newWidthToHeight > widthToHeight) {
+        newWidth = newHeight * widthToHeight;
+        gameArea.style.height = newHeight + 'px';
+        gameArea.style.width = newWidth + 'px';
+    } else {
+        newHeight = newWidth / widthToHeight;
+        gameArea.style.width = newWidth + 'px';
+        gameArea.style.height = newHeight + 'px';
+    }
+    
+    gameArea.style.marginTop = (-newHeight / 2) + 'px';
+    gameArea.style.marginLeft = (-newWidth / 2) + 'px';
+    
+    var gameCanvas = document.getElementById('gameCanvas');
+    gameCanvas.width = newWidth;
+    gameCanvas.height = newHeight;
+}
+```
+
+Now, you want these adjustments to be made automatically whenever the window is resized or, in the case of mobile devices, the screen orientation is changed. Handle these events by having them call your resizeGame() function like so:
+
+```js
+window.addEventListener('resize', resizeGame, false);
+window.addEventListener('orientationchange', resizeGame, false);
+```
+
+If the window is resized too high or the screen’s orientation is vertical, you are making width 100% of the window, and if the window is resized too wide or the screen’s orientation is horizontal, you are making height 100% of the window. The remaining dimension is sized according to the predetermined width-to-height aspect ratio.
+
+## Summary
+
+Gopherwood Studios has used versions of this structure for all of our HTML5 games and it has proved very useful for accommodating multiple screen resolutions and various mobile devices. Additionally, with the aid of a full screen browser, this gives our web games an immersive experience more akin to traditional desktop gaming than many browser-based games. We look forward to more innovations in web games as HTML5 and web technologies continue to evolve.
diff --git a/src/site/content/en/blog/gov-uk-drops-jquery/index.md b/src/site/content/en/blog/gov-uk-drops-jquery/index.md
new file mode 100644
index 00000000000..af31f031f21
--- /dev/null
+++ b/src/site/content/en/blog/gov-uk-drops-jquery/index.md
@@ -0,0 +1,40 @@
+---
+title: GOV.UK drops jQuery from their front end.
+subhead: |
+  GOV.UK dropped their jQuery dependency from their front end. You'll never
+  guess what happened. (Yes, you will.)
+authors:
+  - jlwagner
+date: 2022-05-19
+description: |
+  GOV.UK dropped their jQuery dependency from their front end. You'll never
+  guess what happened. (Yes, you will.)
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/hQPjpsIlOA26Y8PVulAo.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/LA52Yr53TgZCizpkOLJo.png
+alt: The GOV.UK crown logo set on a black background.
+tags:
+  - blog
+  - performance
+  - javascript
+---
+
+[jQuery](https://jquery.com/) is a [roughly 30 KiB dependency](https://bundlephobia.com/package/jquery@3.6.0) that nearly [84% of mobile pages used in 2021](https://almanac.httparchive.org/en/2021/javascript#libraries-usage)&mdash;and for good reason. jQuery was an instrumental tool in a time when we really needed a way to script interactivity in a way that smoothed over the differing implementations of stuff like event handling, selecting elements, animating elements, and so on.
+
+The web is better because of jQuery&mdash;not just because it has such incredible utility, but because its ubiquity led to making what it provided part of the web platform itself. Nowadays, we can do just about anything jQuery can do in vanilla JavaScript:
+
+- We can select elements using a CSS selector syntax with [`querySelector`](https://developer.mozilla.org/docs/Web/API/Document/querySelector) and [`querySelectorAll`](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll).
+- We can add, remove, and toggle classes on elements with the [`classList API`](https://developer.mozilla.org/docs/Web/API/Element/classList).
+- We can attach event handlers to DOM elements and the `window` using [`addEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener).
+- And so, so, much more.
+
+It really begs the question: [Do we _really_ need jQuery today?](https://youmightnotneedjquery.com/) That's a question that [GOV.UK](https://www.gov.uk/) has answered with a resounding "no". In March of 2022, [Matt Hobbs](https://twitter.com/TheRealNooshu) announced that GOV.UK removed their jQuery dependency. This is a big deal when it comes to the user experience, because GOV.UK provides services and information online for The United Kingdom at scale. Not everyone is tapping away on their 2022 MacBook Pro on a rip-roarin' broadband connection. GOV.UK has to be accessible to everyone, and that means keepin' it _lean_.
+
+Here's a few of the greatest hits from Matt Hobbs on what GOV.UK noticed in removing jQuery:
+
+- [Less front end processing time overall](https://twitter.com/TheRealNooshu/status/1509487061300039681).
+- [11% less blocking time](https://twitter.com/TheRealNooshu/status/1509487066941374466/photo/1) at the 75th percentile.
+- [10% less blocking time](https://twitter.com/TheRealNooshu/status/1509487072721125376/photo/1) for users at the 95th percentile. These are users who experience seriously adverse network and device conditions, and every performance gain matters _especially_ for them.
+
+For the full story, check out [Matt's informative Twitter thread](https://twitter.com/TheRealNooshu/status/1509487050122276864). It's great stuff for web performance geeks, and drives home the point that _dependencies matter_ when it comes to performance. Don't shortchange your users if the web platform can easily do the job a framework can.
+
+This level of commitment to the user experience from a institution that works at the scale GOV.UK does is commendable. I can only hope others follow in their footsteps.
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/commons-pattern-diagram.png b/src/site/content/en/blog/granular-chunking-nextjs/commons-pattern-diagram.png
deleted file mode 100755
index 8b25dc1612d..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/commons-pattern-diagram.png and /dev/null differ
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/hero.png b/src/site/content/en/blog/granular-chunking-nextjs/hero.png
deleted file mode 100644
index 7b40553d688..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/index.md b/src/site/content/en/blog/granular-chunking-nextjs/index.md
index 0824f2f3571..2dbdb257a9b 100644
--- a/src/site/content/en/blog/granular-chunking-nextjs/index.md
+++ b/src/site/content/en/blog/granular-chunking-nextjs/index.md
@@ -1,17 +1,18 @@
 ---
+layout: post
 title: Improved Next.js and Gatsby page load performance with granular chunking
 subhead: A newer webpack chunking strategy in Next.js and Gatsby minimizes duplicate code to improve page load performance.
 authors:
   - houssein
 date: 2020-04-29
-hero: hero.png
-alt: Jigsaw pieces connecting 
-description: | 
+hero: image/admin/G5NYXIUQZ3hUfbyOnt0r.png
+alt: Jigsaw pieces connecting
+description: |
   Learn how both Next.js and Gatsby have improved their build output to minimize duplicate code and improve page load performance
 tags:
   - blog
   - performance
-  - frameworks
+  # - frameworks
 ---
 
 Chrome is [collaborating](/advancing-framework-ecosystem-cds-2019/) with tooling and
@@ -32,7 +33,7 @@ result in a better loading performance.
 This pattern became popular with many single-page application frameworks adopting an entrypoint and
 bundle configuration that looked like this:
 
-<img class="w-screenshot w-screenshot--filled" src="./commons-pattern-diagram.png" alt="Common entrypoint and bundle configuration">
+{% Img src="image/admin/r4QB67AXzmPMgxcxgbQF.png", alt="Common entrypoint and bundle configuration", width="800", height="569" %}
 
 Although practical, the concept of bundling all shared module code into a single chunk has its
 limitations. Modules not shared in every entry point can be downloaded for routes that do not use it
@@ -45,7 +46,7 @@ one: [`SplitChunksPlugin`](https://webpack.js.org/plugins/split-chunks-plugin/).
 
 The default settings for `SplitChunksPlugin`  works well for most users. Multiple split chunks are
 created depending on a number of [conditions](https://webpack.js.org/plugins/split-chunks-plugin/#defaults)
-to prevent fetching duplicated code across multiple routes. 
+to prevent fetching duplicated code across multiple routes.
 
 However, many web frameworks that use this plugin still follow a "single-commons" approach to chunk
 splitting. Next.js, for example, would generate a `commons` bundle that contained any module that is
@@ -81,7 +82,7 @@ _half of pages_ isn't very effective. Modifying this ratio would only result in
 
 To solve this problem, Next.js adopted a [different
 configuration](https://github.com/zeit/next.js/pull/7696) for`SplitChunksPlugin` that reduces
-unecessary code for any route.
+unnecessary code for any route.
 
 +   Any sufficiently large third-party module (greater than 160 KB) is split into its own individual
     chunk
@@ -129,26 +130,26 @@ performance of a single site while modifying the maximum number of parallel requ
 [`maxInitialRequests`](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksmaxinitialrequests)
 property.
 
-![Page load performance with increased number of requests](./performance-num-requests-1.png)
+{% Img src="image/admin/Psq42HGvyk1hiaCdEJxc.png", alt="Page load performance with increased number of requests", width="800", height="495" %}
 
 In an average of three runs of multiple trials on a single web page, the
 [`load`](https://developer.mozilla.org/docs/Web/API/Window/load_event),
-[start-render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:)
+[start-render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render)
 and [First Contentful Paint](/fcp) times all remained about the same when varying the max initial
 request count (from 5 to 15). Interestingly enough, we noticed a slight performance overhead only
 after splitting aggressively to hundreds of requests.
 
-![Page load performance with hundreds of requests](./performance-num-requests-2.png)
+{% Img src="image/admin/Ykz3Zm35JUVmtqX1U6cI.png", alt="Page load performance with hundreds of requests", width="800", height="495" %}
 
 This showed that staying under a reliable threshold (20~25 requests) struck the right balance
 between loading performance and caching efficiency. After some baseline testing, 25 was selected as
-the `maxInitialRequest` count. 
+the `maxInitialRequest` count.
 
 Modifying the maximum number of requests that happen in parallel resulted in more than a single
 shared bundle, and separating them appropriately for each entry point significantly reduced the
 amount of unneeded code for the same page.
 
-![JavaScript payload reductions with increased chunking](./js-payload-num-requests.png)
+{% Img src="image/admin/z2yOSP2fpfu51OEpyTGS.png", alt="JavaScript payload reductions with increased chunking", width="800", height="495" %}
 
 This experiment was only about modifying the number of requests to see if there would be any
 negative effect on page load performance. The results suggest that setting `maxInitialRequests` to
@@ -178,16 +179,15 @@ getDependencies (route) {
 }
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot-filled" src="outputted-chunks.png" 
-       alt="Output of multiple shared chunks in a Next.js application.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3XG4VlLQEQ724fvhynvM.png", alt="Output of multiple shared chunks in a Next.js application.", width="800", height="488" %}
 </figure>
 
 This newer granular chunking strategy was first rolled out in Next.js behind a flag, where it was tested on a
 number of early adopters. Many saw significant reductions to the total JavaScript used for their
 entire site:
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <thead>
       <tr>
@@ -250,7 +250,7 @@ config.optimization = {
 By optimizing their webpack configuration to adopt a similar granular chunking strategy, they also
 noticed sizeable JavaScript reductions in many large sites:
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <thead>
       <tr>
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/js-payload-num-requests.png b/src/site/content/en/blog/granular-chunking-nextjs/js-payload-num-requests.png
deleted file mode 100755
index 82a923f455d..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/js-payload-num-requests.png and /dev/null differ
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/outputted-chunks.png b/src/site/content/en/blog/granular-chunking-nextjs/outputted-chunks.png
deleted file mode 100644
index d852f3b4532..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/outputted-chunks.png and /dev/null differ
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-1.png b/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-1.png
deleted file mode 100755
index 1f0463bfa44..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-1.png and /dev/null differ
diff --git a/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-2.png b/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-2.png
deleted file mode 100755
index a07b02bf892..00000000000
Binary files a/src/site/content/en/blog/granular-chunking-nextjs/performance-num-requests-2.png and /dev/null differ
diff --git a/src/site/content/en/blog/gravit-designer/index.md b/src/site/content/en/blog/gravit-designer/index.md
new file mode 100644
index 00000000000..635a6b10227
--- /dev/null
+++ b/src/site/content/en/blog/gravit-designer/index.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: PWA users are 2.5x more likely to purchase Gravit Designer PRO
+subhead: >
+  PWA users are also 24% more active than all other install types,
+  become repeats users 31% more than all other platforms, and more.
+date: 2020-12-08
+hero: image/admin/KSsQ4GA6JGIIQom1sSFl.png
+thumbnail: image/admin/RctR9tZPmHeBUrsuMFCh.png
+alt: Gravit Designer's logo.
+description: >
+  PWA users are also 24% more active than all other install types,
+  become repeat users 31% more than all other platforms, and more.
+tags:
+  - blog
+  - case-study
+  - progressive-web-apps
+authors:
+  - rezakazemi
+---
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">+24<sub>%</sub></p>
+    <p>PWA users have 24% more active sessions than all other platforms</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">+31<sub>%</sub></p>
+    <p>PWA accounts for 31% more repeat users than all other platforms</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">2.5<sub>x</sub></p>
+    <p>PWA users are 2.5x more likely to purchase Gravit Designer PRO</p>
+  </div>
+</div>
+
+{% Aside %}
+  Reza is a product manager at Corel.
+{% endAside %}
+
+Corel Corporation's [Gravit Designer](https://www.designer.io/en/) is a powerful
+vector design tool. With roots as a startup, Gravit Designer joined Corel's
+extensive product portfolio in 2018, and serves tens of thousands of daily
+active users demanding rich, affordable, and accessible vector illustration
+software. Corel builds a host of creative and productivity software including
+[CorelDRAW](https://www.coreldraw.com/), [Corel
+PHOTO-PAINT](https://www.coreldraw.com/en/pages/photo-paint/), [Corel
+Painter](https://www.painterartist.com/),
+[Parallels](https://www.parallels.com), and more.
+
+Gravit Designer's target audience is creators of all stripes - from students
+learning about vector illustration to seasoned designers looking for a
+fully-functional solution. Corel has always wanted to meet
+designers and creatives where they are, on their platform of choice, and Gravit
+Designer allows us to deliver powerful vector illustration tools via the web.
+
+Progressive web apps (PWAs) are of particular interest to Gravit Designer and
+Corel's Online Graphics initiatives, as they help bridge the gap between web
+apps and traditional desktop applications. Progressive web apps are quickly
+becoming the
+[preferred way to deliver desktop experiences](https://chromeos.dev/en/web/desktop-progressive-web-apps)
+for traditional web apps. ChromeOS and the Play Store also present a great
+opportunity to Corel by offering secure in-app payments, PWA support for
+bringing the web app experience to the desktop in a seamless manner ([local
+font](/local-fonts/) and [file system
+access](/file-system-access/) are particularly relevant for us),
+and most importantly, greater visibility to our web apps for more users.
+Students and educators can install the ChromeOS version of Gravit Designer with
+ease, and enjoy the same powerful features regardless of platform.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CPOALQnJw0G03EHczYIh.png", alt="A screenshot of Gravit Designer.", width="800", height="476" %}
+</figure>
+
+## Engineering challenges
+
+There are a great many engineering challenges with supporting multiple
+platforms, particularly web and desktop. In our case, we take great care when
+deciding to support a new platform, as our app began its life on the web. When
+supporting desktop platforms, we typically have to wrap our application in a
+supporting container, which brings its own set of challenges depending on the
+host platform.
+
+Our users want an experience that carries over seamlessly from one platform to
+another. This is vital to many of our customers who might switch from web, to
+desktop, to Chromebooks, and back to web in the course of a design. Furthermore,
+our users want their work to travel with them, unencumbered by their situation.
+Whether on-the-go, offline, or connected to the internet, they want their
+documents accessible in the Gravit Cloud, for example.
+
+At Corel, we have decades of experience porting software to many platforms and
+navigating the challenges therein. There is a balancing act in ensuring proper
+performance, feature parity, and platform-specific UI support. Gravit Designer
+is no stranger to these challenges.
+
+## Gravit Designer's desktop PWA
+
+With some platforms, the answer will be wrapping a web app in a
+platform-specific container application for the foreseeable future (e.g.
+Electron). However, with PWAs and ChromeOS we can start to deliver on the
+promise of a web app ported to a desktop experience with minimal disruption.
+
+For Gravit Designer, our team could see the growing value of PWAs, and made
+great strides to support it as an enabling technology going forward. The
+potential of several major platforms supporting PWA (namely ChromeOS, iOS,
+Windows, and more) could usher in a new era of cross-platform support for
+certain applications. Since Chrome was the clear leader in browsers among our
+users, and provided the best user experience for PWA, we decided to investigate
+the work involved in building out a PWA version of Gravit Designer.
+
+The team began by first creating a proof-of-concept to understand the effort
+required. Next came the development effort associated with local font and local
+file system support. In the end, we had to stage our support for local fonts.
+Once improvements were made to file loading times, installation, and
+performance, we felt more comfortable moving past the proof-of-concept phase and
+targeting PWA support for a major release.
+
+## Impact
+
+Since launching our desktop PWA, we've seen a steady increase in installations,
+and we're excited by the prospect of releasing the PWA version with enhanced
+platform-specific features for ChromeOS and other platforms. In fact, the
+standard PWA version of Gravit Designer now leads downloads from the Microsoft
+Store and Linux installations, so we're looking forward to even more
+growth.
+
+### Key figures
+
+* 18% of total ChromeOS users have installed our PWA (PWA installs across all
+  operating systems account for ~5% of our total).
+* PWA users are 24% more active than all other install types (more
+  sessions per user).
+* PWA accounts for 31% more repeat users than all other platforms.
+* PWA users are 2.5x more likely to purchase Gravit Designer PRO.
+* PWA makes up about 5% of all new user accounts, and growing.
+
+## Summary
+
+The growth of PWA installations in general-past other more established
+platforms-points to a future where we could offer a satisfying desktop
+experience without the need for platform-specific wrappers on a multitude of
+platforms. Our work with Google on PWAs and ChromeOS is vital to this aim, as
+more and more features are supported.
diff --git a/src/site/content/en/blog/guardian-smart-lock/index.md b/src/site/content/en/blog/guardian-smart-lock/index.md
new file mode 100644
index 00000000000..0f2ec1a4838
--- /dev/null
+++ b/src/site/content/en/blog/guardian-smart-lock/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Smart Lock for the Guardian
+date: 2016-09-30
+updated: 2016-09-30
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ptu1Kad5UFx2gZNf09pT.png", alt="Guardian smart lock screenshot", width="800", height="1422" %}
+</figure>
+
+### Results
+
+- 44% increase cross-platform signed-in users
+- 69% growth in app sign-ins after Smart Lock
+- 7.9% increase in desktop sign-ins
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/unhQhlpUkEAugIMgGO7M.pdf)
+
+## Company
+
+Guardian News & Media (GNM) publishes
+[theguardian.com](https://theguardian.com), one of the largest English-speaking
+quality newswebsites in the world. Since launching its US and Australia digital
+editions in 2011 and 2013 respectively, traffic from outside of the UK now
+represents over two-thirds of the Guardian’s total digital audience. In the UK,
+GNM publishes the Guardian newspaper six days a week, first published in 1821,
+and the world’s oldest Sunday newspaper, The Observer.
+
+## Challenges
+
+Signed-in users are critical to the Guardian’s future plans and features. For
+example, hyper-tailored push, re-engagement via email, preservation of
+personalization between hardware upgrades, or even effectively tracking users
+between different platforms all rely on consistently identifying real people.
+All of these directly influence engagement and monetization potential.
+
+## Solution
+
+In the 35 weeks since launching Smart Lock, the Guardian has seen a 44% increase
+in cross-platform signed-in users, compared to 10% the 35 weeks leading up to
+the launch. The overall rate of apps sign-ins have increased as well: from 51%
+growth in the 35 weeks prior to launch, to 69% post-launch. Smart Lock has also
+turned around desktop sign-ins; three months before implementing Smart Lock,
+desktop sign-ins declined by 8.4%. Now, they’ve increased by 7.9%.
+
+Smart Lock amplifies the work the Guardian does on apps and other platforms,
+like Chrome, by converting newly signed-in app users to signed-in users
+elsewhere. This increases the Guardian’s ability to have a joined-up portfolio-
+wide view of its audiences and thereby, improves opportunities to deepen its
+relationships, offer next-generation services like its unified history service,
+and develop better reader recommendations.
+
+It took two days to implement from first dev to app release.
+
+{% Blockquote 'Tom Grinsted, Product Manager, the Guardian'%}
+Being able to identify real people as individuals across our platforms
+is a cornerstone for our analytics fidelity and insight, relationship
+strategy, and future features. The substantial positive impact that
+Smart Lock has had directly helps and amplifies our efforts.
+{% endBlockquote %}
+
+## Learn more about Smart Lock
+
+Users save passwords to Google from Chrome or Android and passwords are made
+available across platforms.
+
+Find out more at: [g.co/smartlock#for-passwords](https://g.co/smartlock#for-passwords)
diff --git a/src/site/content/en/blog/hands-on-portals/HTMLPortalElement.png b/src/site/content/en/blog/hands-on-portals/HTMLPortalElement.png
deleted file mode 100644
index f5bca294d28..00000000000
Binary files a/src/site/content/en/blog/hands-on-portals/HTMLPortalElement.png and /dev/null differ
diff --git a/src/site/content/en/blog/hands-on-portals/glitch.gif b/src/site/content/en/blog/hands-on-portals/glitch.gif
deleted file mode 100644
index 26eb576cb66..00000000000
Binary files a/src/site/content/en/blog/hands-on-portals/glitch.gif and /dev/null differ
diff --git a/src/site/content/en/blog/hands-on-portals/hero.gif b/src/site/content/en/blog/hands-on-portals/hero.gif
deleted file mode 100644
index 54ce6bcc0f4..00000000000
Binary files a/src/site/content/en/blog/hands-on-portals/hero.gif and /dev/null differ
diff --git a/src/site/content/en/blog/hands-on-portals/hero.png b/src/site/content/en/blog/hands-on-portals/hero.png
deleted file mode 100644
index 282366ba1e9..00000000000
Binary files a/src/site/content/en/blog/hands-on-portals/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/hands-on-portals/index.md b/src/site/content/en/blog/hands-on-portals/index.md
index 764b3ea9007..f357f3dfcae 100644
--- a/src/site/content/en/blog/hands-on-portals/index.md
+++ b/src/site/content/en/blog/hands-on-portals/index.md
@@ -3,21 +3,21 @@ title: 'Hands-on with Portals: seamless navigation on the web'
 subhead: |
   Learn how the proposed Portals API can improve your navigation UX.
 date: 2019-05-06
-updated: 2020-07-13
+updated: 2021-02-15
 authors:
   - uskay
-hero: hero.png
+hero: image/admin/7hJbSWnhhE1lRVHJOWI9.png
 alt: A logo of Portals
 description: |
   The newly proposed Portals API helps keep your front-end simple while allowing seamless navigations
   with custom transitions. In this article, get hands-on experience using
   Portals to improve user experience across your site.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/-7680889164480380927
 tags:
   - blog
-  - portals
+  # - portals
   - ux
+feedback:
+  - api
 ---
 
 Making sure your pages load fast is key to delivering a good user experience.
@@ -28,17 +28,14 @@ A new web platform API proposal called [Portals](https://github.com/WICG/portals
 help with this by streamlining the experience as users navigate _across_ your
 site.
 
-Portals are currently experimental, but you can use them on your site today by
-taking part in the [origin trial]({{origin_trial.url}}).
-
 See Portals in action:
 
-<figure class="w-figure w-figure--fullbleed">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure data-size="full">
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_vp9.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_h264.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption w-figcaption--fullbleed">
+ <figcaption>
     Seamless embeds and navigation with Portals. Created by <a href="https://twitter.com/argyleink">Adam Argyle</a>.
   </figcaption>
 </figure>
@@ -57,9 +54,9 @@ but unlike an `<iframe>`,
 they also come with features to navigate to their content.
 
 Seeing is believing:
-please first check out what we showcased at Chrome Dev Summit last year:
+please first check out what we showcased at Chrome Dev Summit 2018:
 
-{% YouTube 'Ai4aZ9Jbsys', '1081' %}
+{% YouTube id='Ai4aZ9Jbsys', startTime='1081' %}
 
 With classic navigations, users have to wait with a blank screen
 until the browser finishes rendering the destination.
@@ -70,21 +67,12 @@ Before Portals, we could have rendered another page using an `<iframe>`. We coul
 
 ## Try out Portals
 
-### Enabling support during the origin trial phase
-
-Portals will be available an origin trial in Chrome 85. The origin trial is
-expected to end in Chrome 86.
-
-{% include 'content/origin-trials.njk' %}
+### Enabling via about://flags {: #enable-flags }
 
-### Register for the origin trial {: #register-for-ot }
+Try out Portals in Chrome 85 and later versions by flipping an experimental flag:
+- Enable the `about://flags/#enable-portals` flag for same-origin navigations.
+- For testing out cross-origin navigations, enable the `about://flags/#enable-portals-cross-origin` flag in addition.
 
-{% include 'content/origin-trial-register.njk' %}
-
-### Enabling via chrome://flags {: #enable-flags }
-
-Try out Portals in Chrome 85 or 86 by flipping an experimental flag:
-`chrome://flags/#enable-portals`.
 During this early phase of the Portals experiment,
 we also recommend using a completely separate user data directory for your tests
 by setting the
@@ -92,7 +80,7 @@ by setting the
 command line flag.
 Once Portals are enabled, confirm in DevTools that you have the new shiny `HTMLPortalElement`.
 
-<img class="w-screenshot" src="HTMLPortalElement.png" alt="A screenshot of the DevTools console showing the HTMLPortalElement">
+{% Img src="image/admin/aUrrqhzMxaEX865Fk5zX.png", alt="A screenshot of the DevTools console showing the HTMLPortalElement", width="800", height="252" %}
 
 ## Implement Portals
 
@@ -108,13 +96,17 @@ document.body.appendChild(portal);
 
 // When the user touches the preview (embedded portal):
 // do fancy animation, e.g. expand …
-// and finish by doing the actual transition
-portal.activate();
+// and finish by doing the actual transition.
+// For the sake of simplicity, this snippet will navigate
+// on the `onload` event of the Portals element.
+portal.addEventListener('load', (evt) => {
+   portal.activate();
+});
 ```
 
 It's that simple. Try this code in the DevTools console, the wikipedia page should open up.
 
-<img class="w-screenshot" src="portal-preview-demo.gif" alt="A gif of preview portal style demo">
+{% Img src="image/admin/rp6i8ngGJkvooXJ9WmLK.gif", alt="A gif of preview portal style demo", width="800", height="557" %}
 
 If you wanted to build something like we showed at Chrome Dev Summit which works just like the demo above,
 the following snippet will be of interest.
@@ -186,21 +178,21 @@ if ('HTMLPortalElement' in window) {
 
 If you want to quickly experience what Portals feel like, try using
 [uskay-portals-demo.glitch.me](https://uskay-portals-demo.glitch.me).
-Be sure you access it with Chrome 85 or 86 and turn on the [experimental flag](#enable-flags)!
+Be sure you access it with Chrome 85 or later versions and turn on the [experimental flag](#enable-flags)!
 
 1. Enter a URL you want to preview.
 1. The page will then be embedded as a `<portal>` element.
 1. Click on the preview.
 1. The preview will be activated after an animation.
 
-<img class="w-screenshot" src="glitch.gif" alt="A gif of using the glitch demo of using Portals">
+{% Img src="image/admin/Y4Vv6v3DAAC32IsiWS7g.gif", alt="A gif of using the glitch demo of using Portals", width="800", height="547" %}
 
 ## Check out the spec
 
 We are actively discussing
 [the Portals spec](https://wicg.github.io/portals/) in the Web Incubation Community Group (WICG).
-To quickly get up to speed, take a look at
-[the explainer](https://github.com/WICG/portals/blob/master/explainer.md).
+To quickly get up to speed, take a look at some of the
+[key scenarios](https://github.com/WICG/portals/blob/master/key-scenarios.md).
 These are the three important features to familiarize yourself with:
 
 - [The `<portal>` element:](https://wicg.github.io/portals/#the-portal-element) The HTML element itself. The API is very simple. It consists of the `src` attribute, the `activate` function and an interface for messaging (`postMessage`). `activate` takes an optional argument to pass data to the `<portal>` upon activation.
@@ -296,4 +288,4 @@ Another important thing to know is that Portals can be used in cross-origin navi
 
 ## Feedback welcome
 
-Portals are ready for experimentation in Chrome 85 and 86 and via the [origin trial]({{origin_trial.url}}). Feedback from the community is crucial to the design of new APIs, so please try it out and tell us what you think! If you have any feature requests or feedback, please head over to the [WICG GitHub repo](https://github.com/WICG/portals/issues).
+Portals are ready for experimentation in Chrome 85 and later versions. Feedback from the community is crucial to the design of new APIs, so please try it out and tell us what you think! If you have any feature requests or feedback, please head over to the [WICG GitHub repo](https://github.com/WICG/portals/issues).
diff --git a/src/site/content/en/blog/hands-on-portals/portal-preview-demo.gif b/src/site/content/en/blog/hands-on-portals/portal-preview-demo.gif
deleted file mode 100644
index 41d3d059d7f..00000000000
Binary files a/src/site/content/en/blog/hands-on-portals/portal-preview-demo.gif and /dev/null differ
diff --git a/src/site/content/en/blog/hid-examples/game-controller.jpg b/src/site/content/en/blog/hid-examples/game-controller.jpg
deleted file mode 100644
index d32a7809823..00000000000
Binary files a/src/site/content/en/blog/hid-examples/game-controller.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/hid-examples/index.md b/src/site/content/en/blog/hid-examples/index.md
deleted file mode 100644
index c9485c63dae..00000000000
--- a/src/site/content/en/blog/hid-examples/index.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: 'Human interface devices on the web: a few quick examples'
-subhead: Connecting to uncommon devices from your app.
-authors:
-  - joemedley
-  - mattreynolds
-description: |
-  There is a long tale of human interface devices (HID) that are too new, too
-  old, or too uncommon to be accessible by systems' device drivers. The WebHID
-  API solves this by providing a way to implement device-specific logic in
-  JavaScript.
-date: 2020-07-22
-updated: 2020-07-22
-tags:
-  - blog
-  - capabilities
-  - hid
-  - games
-hero: game-controller.jpg
-alt: A generic game controller
----
-
-
-{% Aside %}
-The WebHID API is part of the [capabilities
-project](https://developers.google.com/web/updates/capabilities) and is
-currently in development. This post will be updated as the implementation
-progresses.
-{% endAside %}
-
-## What is the WebHID API? {: #what }
-
-There is a long tail of human interface devices (HIDs) that are too new, too
-old, or too uncommon to be accessible by systems' device drivers. The WebHID API
-solves this by providing a way to implement device-specific logic in JavaScript.
-
-### Suggested use cases for the WebHID API {: #use-cases }
-
-An HID takes input from or provides output to humans. Examples of devices
-include keyboards, pointing devices (mice, touchscreens, etc.), and gamepads.
-The [HID protocol](https://www.usb.org/hid) makes it possible to access these
-devices on desktop computers using operating system drivers. The web platform
-supports HIDs by relying on these drivers.
-
-The inability to access uncommon HID devices is particularly painful when it
-comes to gamepad support. Gamepads designed for PC often use HID for gamepad
-inputs (buttons, joysticks, triggers) and outputs (LEDs, rumble). However,
-gamepad inputs and outputs are not well standardized and web browsers often
-require custom logic for specific devices. This is unsustainable and results in
-poor support for the long tail of older and uncommon devices. It also causes the
-browser to depend on quirks present in the behavior of specific devices.
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [In Progress][spec]          |
-| 3. Gather feedback & iterate on design     | [In progress](#feedback)     |
-| 4. Origin trial                            | Starts in Chrome 85          |
-| 5. Launch                                  | Not started                  |
-
-</div>
-
-## Demos, demos, demos {: #demos }
-
-One of my team members is currently working on a how-to article. Since WebHID is
-starting an origin trial in Chrome 85, some of us wanted to give you a heads up
-and share a few demos to play with. If you're curious about how any of these
-samples work, the source code for all of them is available on GitHub. [There's a
-barebones code example][example] in the explainer.
-
-To use the demos, enable the `#enable-experimental-web-platform-features` flag
-in `chrome://flags`.
-
-### MacBook Pro keyboard backlight
-
-The biggest barrier to trying out any of these demos is lack of access to the
-device. Fortunately, if you have a MacBook Pro with a TouchBar, you don't need
-to buy anything. This demo lets you use the API right from your laptop. It also
-shows how WebHID can be used to unlock functionality of built-in devices, not
-just peripherals.
-
-**Author:** FWeinb<br/>
-**Demo/Source:** [Keyboard Backlight](https://codesandbox.io/s/webhid-demo-keyboard-backlight-qlq95)
-
-## Game controllers
-
-Next up is something fewer of you are likely to have. Sony's DualShock 4 is a
-wireless controller for PlayStation 4 game consoles.
-
-The DualShock 4 Demo uses WebHID to receive the raw input reports from the
-DualShock 4 and provides a high-level API to access the controller's gyroscope,
-accelerometer, touchpad, button, and thumbstick inputs. It also supports rumble
-and setting the color of an RGB LED housed within the controller.
-
-**Author:** TheBITLINK<br/>
-**Demo:** [DualShock 4 Demo](https://thebitlink.github.io/WebHID-DS4/) ([Source](https://github.com/TheBITLINK/WebHID-DS4))
-
-### The BlinkStick Strip
-
-BlinkStick Strip is a HID-compliant light strip with 8 RGB LEDs. The demo allows
-the user to select from several blink patterns including chase, blink, and
-Larson scanner (aka Cylon).
-
-**Author:** Robat Williams<br/>
-**Demo:** [blinkstick-strip](https://robatwilliams.github.io/webhid-demos/blinkstick-strip/) ([source](https://github.com/robatwilliams/webhid-demos))
-
-### Blink, blink, blink
-
-What does this demo do? (Wait for it.) It blinks. Actually it's three demos that
-use the blink(1) USB notification light.
-
-blink(1) is simple and well-documented, which makes it a great option for
-getting started with HID.
-
-**Author:** Tod E. Kurt<br/>
-**Demos:** [blink(1)](https://blink1.thingm.com/) ([source](https://github.com/todbot/blink1-webhid))
-
-## Conclusion
-
-I hope I've piqued your interest in the WebHID API. Watch this space in the
-coming weeks for updates and for Part II of the introduction which will show you
-how to use the API yourself.
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [Chromium tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: [`Blink>HID`][blink-component]
-
-### Wanna go deeper? {: #deeper-links }
-
-* [TAG Review](https://github.com/w3ctag/design-reviews/issues/370)
-* [Intent to Prototype](https://groups.google.com/a/chromium.org/g/blink-dev/c/LoyzK8xTRME/m/yLR-K-siBQAJ)
-
-## Acknowledgements {: #helpful }
-
-Thank you to [Pete LePage](https://web.dev/authors/petelepage/) and [Kayce
-Basques](https://github.com/kaycebasques) for reviews of this article.
-
-<span>Photo by <a
-href="https://unsplash.com/@ugur?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ugur
-Akdemir</a> on <a
-href="https://unsplash.com/s/photos/game-controllers?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
-
-[spec]: https://wicg.github.io/webhid/
-[issues]: https://github.com/WICG/webhid/issues
-[explainer]: https://github.com/WICG/webhid/blob/master/EXPLAINER.md
-[wicg-discourse]: https://discourse.wicg.io/t/human-interface-device-hid-api/3070
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=890096
-[cr-status]: https://chromestatus.com/feature/5172464636133376
-[blink-component]: https://chromestatus.com/features#component%3A%20Blink%3EHID
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[example]: https://github.com/WICG/webhid/blob/master/EXPLAINER.md#example
diff --git a/src/site/content/en/blog/hiding-and-updating-content/index.md b/src/site/content/en/blog/hiding-and-updating-content/index.md
new file mode 100644
index 00000000000..01b51830a3d
--- /dev/null
+++ b/src/site/content/en/blog/hiding-and-updating-content/index.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: Hiding and updating content
+subhead: Hiding content from assistive technology
+description: Hiding content from assistive technology
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2020-03-22
+#tags:
+
+---
+
+## aria-hidden
+
+Another important technique in fine-tuning the experience for assistive
+technology users involves ensuring that only relevant parts of the page are
+exposed to assistive technology. There are several ways to ensure that a section
+of the DOM does not get exposed to accessibility APIs.
+
+First, anything that is explicitly hidden from the DOM will also not be included
+in the accessibility tree. So anything that has a CSS style of `visibility:
+hidden` or `display: none` or uses the HTML5 `hidden` attribute will also be
+hidden from assistive technology users.
+
+However, an element that is not visually rendered but not explicitly hidden is
+still included in the accessibility tree. One common technique is to include
+"screen reader only text" in an element that is absolute positioned offscreen.
+
+
+```css
+.sr-only {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+```
+
+Also, as we have seen, it's possible to provide screen reader only text via an
+`aria-label`, `aria-labelledby`, or `aria-describedby` attribute referencing an
+element that is otherwise hidden.
+
+See this WebAIM article on [Techniques for hiding
+text](https://webaim.org/techniques/css/invisiblecontent/#techniques)
+for more information on creating "screen reader only" text.
+
+Finally, ARIA provides a mechanism for excluding content from assistive
+technology that is not visually hidden, using the `aria-hidden` attribute.
+Applying this attribute to an element effectively removes it *and all of its
+descendants* from the accessibility tree. The only exceptions are elements
+referred to by an `aria-labelledby` or `aria-describedby` attribute.
+
+```html
+<div class="deck">
+    <div class="slide" aria-hidden="true">
+    Sales Targets
+    </div>
+    <div class="slide">
+    Quarterly Sales
+    </div>
+    <div class="slide" aria-hidden="true">
+    Action Items
+    </div>
+</div>
+```
+
+For example, you might use `aria-hidden` if you're creating some modal UI that
+blocks access to the main page. In this case, a sighted user might see some kind
+of semi-transparent overlay indicating that most of the page can't currently be
+used, but a screen reader user may still be able to explore to the other parts
+of the page. In this case, as well as creating the keyboard trap [explained
+earlier](/using-tabindex/#modals-and-keyboard-traps/),
+you need to make sure that the parts of the page that are currently out of scope
+are `aria-hidden` as well.
+
+Now that you understand the basics of ARIA, how it plays with native HTML
+semantics, and how it can be used to perform fairly major surgery on the
+accessibility tree as well as changing the semantics of a single element, let's
+look at how we can use it to convey time-sensitive information.
+
+## aria-live
+
+`aria-live` lets developers mark a part of the page as "live" in the sense that
+updates should be communicated to users immediately regardless of the page
+position, rather than if they just happen to explore that part of the page. When
+an element has an `aria-live` attribute, the part of the page containing it and
+its descendants is called a *live region*.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hhZJxeHAdDC9JxNi6wxh.jpg", alt="ARIA live establishes a live region.", width="800", height="354" %}
+</figure>
+
+For example, a live region might be a status message that appears as a result of
+a user action. If the message is important enough to grab a sighted user's
+attention, it is important enough to direct an assistive technology user's
+attention to it by setting its `aria-live` attribute. Compare this plain `div`
+
+```html
+<div class="status">Your message has been sent.</div>
+```
+
+with its "live" counterpart.
+
+```html
+<div class="status" aria-live="polite">Your message has been sent.</div>
+```
+
+`aria-live` has three allowable values: `polite`, `assertive`, and `off`.
+
+ - `aria-live="polite"` tells assistive technology to alert the user to this
+   change when it has finished whatever it is currently doing. It's great to use
+   if something is important but not urgent, and accounts for the majority of
+   `aria-live` use.
+ - `aria-live="assertive"` tells assistive technology to interrupt whatever it's
+   doing and alert the user to this change immediately. This is only for
+   important and urgent updates, such as a status message like "There has been a
+   server error and your changes are not saved; please refresh the page", or
+   updates to an input field as a direct result of a user action, such as
+   buttons on a stepper widget.
+ - `aria-live="off"` tells assistive technology to temporarily suspend
+   `aria-live` interruptions.
+
+There are some tricks to making sure your live regions work correctly.
+
+First, your `aria-live` region should probably be set in the initial page load.
+This is not a hard-and-fast rule, but if you're having difficulty with an
+`aria-live` region, this might be the issue.
+
+Second, different screen readers react differently to different types of
+changes. For example, it's possible to trigger an alert on some screen readers
+by toggling a descendant element's `hidden` style from true to false.
+
+Other attributes that work with `aria-live` help you fine-tune what is
+communicated to the user when the live region changes.
+
+`aria-atomic` indicates whether the entire region should be considered as a
+whole when communicating updates. For example, if a date widget consisting of a
+day, month, and year has `aria-live=true` and `aria-atomic=true`, and the user
+uses a stepper control to change the value of just the month, the full contents
+of the date widget would be read out again. `aria-atomic`'s value may be `true`
+or `false` (the default).
+
+`aria-relevant` indicates what types of changes should be presented to the user.
+There are some options that may be used separately or as a token list.
+
+ - *additions*, meaning that any element being added to the live region is
+   significant. For example, appending a span to an existing log of status
+   messages would mean that the span would be announced to the user (assuming
+   that `aria-atomic` was `false`).
+ - *text*, meaning that text content being added to any descendant node is
+   relevant. For example, modifying a custom text field's `textContent` property
+   would read the modified text to the user.
+ - *removals*, meaning that the removal of any text or descendant nodes should
+   be conveyed to the user.
+ - *all*, meaning that all changes are relevant. However, the default value for
+   `aria-relevant` is `additions text`, meaning that if you don't specify
+   `aria-relevant` it will update the user for any addition to the element,
+   which is what you are most likely to want.
+
+Finally, `aria-busy` lets you notify assistive technology that it should
+temporarily ignore changes to an element, such as when things are loading. Once
+everything is in place, `aria-busy` should be set to false to normalize the
+reader's operation.
+
diff --git a/src/site/content/en/blog/high-dpi/index.md b/src/site/content/en/blog/high-dpi/index.md
new file mode 100644
index 00000000000..aa9ecff0d41
--- /dev/null
+++ b/src/site/content/en/blog/high-dpi/index.md
@@ -0,0 +1,570 @@
+---
+layout: post
+title: High DPI images for variable pixel densities
+authors:
+  - smus
+date: 2012-08-22
+tags:
+  - blog
+---
+
+
+One of the features of today's complex device landscape is that there's
+a [very wide range of screen pixel densities][variety-dpi] available.
+Some devices feature very high resolution displays, while others
+straggle behind. Application developers need to support a range of
+pixel densities, which can be quite challenging. On the mobile web, the
+challenges are compounded by several factors:
+
+- Large variety of devices with different form factors.
+- Constrained network bandwidth and battery life.
+
+In terms of images, the goal of web app developers is to **serve the
+best quality images as efficiently as possible**. This article will
+cover some useful techniques for doing this today and in the near
+future.
+
+### Avoid images if possible
+
+Before opening this can of worms, remember that the web has many
+powerful technologies that are largely resolution- and DPI-independent.
+Specifically, text, SVG and much of CSS will "just work" because of the
+automatic pixel scaling feature of the web (via
+[devicePixelRatio][dpr-intro]).
+
+That said, you can't always avoid raster images. For example, you may be
+given assets that would be quite hard to replicate in pure SVG/CSS, or
+you are dealing with a photograph. While you could convert the image
+into SVG automatically, vectorizing photographs makes little sense
+because scaled-up versions usually don't look good.
+
+## Background
+
+### A very short history of display density
+
+In the early days, computer displays had a pixel density of 72 or 96dpi
+([dots per inch][dpi]).
+
+Displays gradually improved in pixel density, largely driven by the
+mobile use case, in which users generally hold their phones closer to
+their faces, making pixels more visible. By 2008, 150dpi phones were the
+new norm. The trend in increased display density continued, and today's
+new phones sport 300dpi displays (branded "Retina" by Apple).
+
+The holy grail, of course, is a display in which pixels are completely
+invisible. For the phone form factor, the current generation of
+Retina/HiDPI displays may be close to that ideal. But new classes of
+hardware and wearables like [Project Glass][glass] will likely continue
+to drive increased pixel density.
+
+In practice, low density images should look the same on new screens as
+they did on old ones, but compared to the crisp imagery high density
+users are used to seeing, the low density images look jarring and
+pixelated. The following is a rough simulation of how a 1x image will
+look on a 2x display. In contrast, the 2x image looks quite good.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rWMbSX4iWVoRx5ctDu1H.jpg", alt="Baboon 1x", width="200", height="200" %}
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Xoh9FkidCXhfjID6ZMrM.jpg", alt="Baboon 2x", width="400", height="400" %}
+<figcaption>Baboons! at differing pixel densities.</figcaption>
+</figure>
+
+### Pixels on the web
+
+When the web was designed, 99% of displays were 96dpi (or [pretended to
+be][pretend-96dpi]), and few provisions were made for variation on this
+front. Because of a large variation in screen sizes and densities, we
+needed a standard way to make images look good across a variety of
+screen densities and dimensions.
+
+The [HTML specification][html-px] recently tackled this problem by
+defining a reference pixel that manufacturers use to determine the size
+of a CSS pixel.
+
+{% Aside %}
+It is recommended that the reference pixel be the visual angle of one
+pixel on a device with a pixel density of 96dpi and a distance from
+the reader of an arm's length. For a nominal arm's length of 28
+inches, the visual angle is therefore about 0.0213 degrees.
+{% endAside %}
+
+Using the reference pixel, a manufacturer can determine the size of the
+device’s physical pixel relative to the standard or ideal pixel. This
+ratio is called the device pixel ratio.
+
+
+### Calculating the device pixel ratio
+
+Suppose a smart phone has a screen with a physical pixel size of 180
+pixels per inch (ppi). Calculating the device pixel ratio takes three
+steps:
+
+1. Compare the actual distance at which the device is held to the
+   distance for the reference pixel.
+
+    Per the spec, we know that at 28 inches, the ideal is 96 pixels per
+    inch. However, since it's a smart phone, people hold the device closer
+    to their faces than they hold a laptop. Let's estimate that distance to
+    be 18 inches.
+
+1. Multiply the distance ratio against the standard density (96ppi) to
+   get the ideal pixel density for the given distance.
+
+    idealPixelDensity = (28/18) * 96 = 150 pixels per inch (approximately)
+
+1. Take the ratio of the physical pixel density to the ideal pixel
+   density to get the device pixel ratio.
+
+    `devicePixelRatio` = 180/150 = 1.2
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6UE7CKkGhk9TPzNicgRr.png", alt="How devicePixelRatio is calculated.", width="465", height="282" %}
+<figcaption>A diagram showing one reference angular pixel, to help
+illustrate how devicePixelRatio is calculated.</figcaption>
+</figure>
+
+So now when a browser needs to know how to resize an image to fit the
+screen according to the ideal or standard resolution, the browser refers
+to the device pixel ratio of 1.2 - which says, for every ideal pixel,
+this device has 1.2 physical pixels. The formula to go between ideal
+(as defined by the web spec) and physical (dots on device screen) pixels
+is the following:
+
+```js
+physicalPixels = window.devicePixelRatio * idealPixels
+```
+
+Historically, device vendors have tended to round `devicePixelRatios`
+(DPRs). Apple's iPhone and iPad report DPR of 1, and their Retina
+equivalents report 2. The [CSS specification][round-dpr] recommends that
+
+> the pixel unit refer to the whole number of device pixels that best
+> approximates the reference pixel.
+
+One reason why round ratios can be better is because they may lead to
+fewer [sub-pixel artifacts][sub-pixel].
+
+However, the reality of the device landscape is much more varied, and
+Android phones often have DPRs of 1.5. The Nexus 7 tablet has a DPR of
+~1.33, which was arrived at by a calculation similar to the one above.
+Expect to see more devices with variable DPRs in the future. Because of
+this, you should never assume that your clients will have integer DPRs.
+
+## Overview of HiDPI image techniques
+
+There are many techniques for solving the problem of showing the best
+quality images as fast as possible, broadly falling into two categories:
+
+1. Optimizing single images, and 
+1. Optimizing selection between multiple images.
+
+Single image approaches: use one image, but do something clever with it.
+These approaches have the drawback that you will inevitably sacrifice
+performance, since you will be downloading HiDPI images even on older
+devices with lower DPI. Here are some approaches for the single image
+case:
+
+- Heavily compressed HiDPI image
+- Totally awesome image format
+- Progressive image format
+
+Multiple image approaches: use multiple images, but do something clever
+to pick which to load. These approaches have inherent overhead for the
+developer to create multiple versions of the same asset and then figure
+out a decision strategy. Here are the options:
+
+- JavaScript
+- Server side delivery
+- CSS media queries
+- Built-in browser features (`image-set()`, `<img srcset>`)
+
+### Heavily compressed HiDPI image
+
+Images already [comprise a whopping 60% of bandwidth][60%] spent downloading an
+average website. By serving HiDPI images to all clients, we will
+increase this number. How much bigger will it grow?
+
+I ran some tests which generated 1x and 2x image fragments with JPEG
+quality at 90, 50 and 20. Here is [shell script][shell] I used
+(employing [ImageMagick][imagick]) to generate them:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vJ1hpZkLBBYVxUISlnAm.jpg", alt="Tiles example 1.", width="800", height="453" %}
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BrgoLVJZkKZe9EfRShim.jpg", alt="Tiles example 2.", width="800", height="453" %}
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/p8Te0ieLtme11wN9xt6s.jpg", alt="Tiles example 3.", width="800", height="453" %}
+<figcaption>Samples of images at different compressions and pixel
+densities.</figcaption>
+</figure>
+
+From this small, unscientific sampling, it seems that compressing large
+images provides a good quality-to-size tradeoff. For my eye, heavily
+compressed 2x imagery actually looks better than uncompressed 1x
+pictures.
+
+Of course, serving low quality, highly compressed 2x imagery to 2x
+devices is worse than serving higher quality ones, and the above
+approach incurs image quality penalties. If you compare quality: 90
+images to quality: 20 images, you will see a drop in crispness and
+increased graininess. These artifacts may not be acceptable in cases
+where high quality images are key (for example, a photo viewer
+application), or for app developers that are not willing to compromise.
+
+The above comparison was made entirely with compressed JPEGs. It's worth
+noting that there are [many tradeoffs][tradeoffs] between the widely
+implemented image formats (JPEG, PNG, GIF), which brings us to…
+
+### Totally awesome image format
+
+WebP is a pretty [compelling image format][webp-good] that compresses
+very well while keeping high image fidelity. Of course, it's [not
+implemented everywhere][webp-support] yet!
+
+One way is to check for WebP support is via JavaScript. You load a 1px
+image via data-uri, wait for either loaded or error events fired, and
+then verify that the size is correct. [Modernizr][modernizr] ships with
+such a [feature detection script][modernizr-webp], which is available
+via `Modernizr.webp`.
+
+A better way of doing this, however, is directly
+in CSS using the [image() function][css-image]. So if you have a WebP
+image and JPEG fallback, you can write the following:
+
+```css    
+#pic {
+  background: image("foo.webp", "foo.jpg");
+}
+```
+
+There are a few problems with this approach. Firstly, `image()` is not
+at all widely implemented. Secondly, while WebP compression blows JPEG
+out of the water, it's still a relatively incremental improvement –
+about 30% smaller based on this [WebP gallery][webp-gallery]. Thus, WebP
+alone isn't enough to address the high DPI problem.
+
+### Progressive image formats
+
+Progressive image formats like JPEG 2000, Progressive JPEG, Progressive
+PNG and GIF have the (somewhat debated) benefit of seeing the image come
+into place before it's fully loaded. They may incur some size overhead,
+though there is conflicting evidence about this. [Jeff Atwood
+claimed][jeff] that progressive mode "adds about 20% to the size of PNG images, and
+about 10% to the size of JPEG and GIF images". However, [Stoyan Stefanov
+claimed][stoyan] that for large files, progressive mode is more efficient (in
+most cases).
+
+At first glance, progressive images look very promising in the context
+of serving the best quality images as fast as possible. The idea is
+that the browser can stop downloading and decoding an image once it
+knows that additional data won't increase the image quality (ie. all of
+the fidelity improvements are sub-pixel).
+
+While connections are easy to terminate, they are often expensive to
+restart. For a site with many images, the most efficient approach is to
+keep a single HTTP connection alive, reusing it for as long as possible.
+If the connection is terminated prematurely because one image has been
+downloaded enough, the browser then needs to create a new connection,
+which can be really [slow in low latency][latency] environments.
+
+One workaround to this is to use the [HTTP Range][range] request, which lets
+browsers specify a range of bytes to fetch. A smart browser could make a
+HEAD request to get at the header, process it, decide how much of the
+image is actually needed, and then fetch. Unfortunately HTTP Range is
+poorly supported in web servers, making this approach impractical.
+
+Finally, an obvious limitation of this approach is that you don't get to
+choose which image to load, only varying fidelities of the same image.
+As a result, this doesn't address the "[art direction][art]" use case.
+
+### Use JavaScript to decide which image to load
+
+The first, and most obvious approach to deciding which image to load is
+to use JavaScript in the client. This approach lets you find out
+everything about your user agent and do the right thing. You can
+determine device pixel ratio via `window.devicePixelRatio`, get screen
+width and height, and even potentially do some network connection
+sniffing via navigator.connection or issuing a fake request, like the
+[foresight.js library][foresight.js] does. Once you've collected all of
+this information, you can decide which image to load.
+
+There are approximately [one million JavaScript libraries][js-libs] that
+do something like the above, and unfortunately none of them are
+particularly outstanding.
+
+One big drawback to this approach is that using JavaScript means that
+you will delay image loading until after the look-ahead parser has
+finished. This essentially means that images won't even start
+downloading until after the `pageload` event fires.  More on this in
+[Jason Grigsby's article][jason].
+
+### Decide what image to load on the server
+
+You can defer the decision to the server-side by writing custom request
+handlers for each image you serve. Such a handler would check for Retina
+support based on User-Agent (the only piece of information relayed to
+the server). Then, based on whether the server-side logic wants to serve
+HiDPI assets, you load the appropriate asset (named according to some
+known convention).
+
+Unfortunately, the User-Agent doesn't necessarily provide enough
+information to decide whether a device should receive high or low
+quality images. Also, it goes without saying that anything related to
+User-Agent is a hack and should be avoided if possible.
+
+### Use CSS media queries
+
+Being declarative, CSS media queries let you state your intention, and
+let the browser do the right thing on your behalf. In addition to the most
+common use of media queries &mdash; matching device size &mdash; you can
+also match `devicePixelRatio`. The associated media query is
+device-pixel-ratio, and has associated min and max variants, as you
+might expect. If you want to load high DPI images and the device pixel
+ratio exceeds a threshold, here's what you might do:
+
+```css
+#my-image { background: (low.png); }
+
+@media only screen and (min-device-pixel-ratio: 1.5) {
+  #my-image { background: (high.png); }
+}
+```
+
+It gets a little more complicated with all of the vendor prefixes mixed
+in, especially because of insane [differences in placement][moz-wtf] of
+"min" and "max" prefixes:
+
+```css
+@media only screen and (min--moz-device-pixel-ratio: 1.5),
+    (-o-min-device-pixel-ratio: 3/2),
+    (-webkit-min-device-pixel-ratio: 1.5),
+    (min-device-pixel-ratio: 1.5) {
+
+  #my-image {
+    background:url(high.png);
+  }
+}
+```
+
+With this approach, you regain the benefits of look-ahead parsing, which
+was lost with the JS solution. You also gain the flexibility of choosing
+your responsive breakpoints (for example, you can have low, mid and high
+DPI images), which was lost with the server-side approach.
+
+Unfortunately it's still a little unwieldy, and leads to strange looking
+CSS (or requires preprocessing). Also, this approach is restricted to
+CSS properties, so there's no way to set an `<img src>`, and your images
+must all be elements with a background. Finally, by relying strictly on
+device pixel ratio, you can end up in situations where your High-DPI
+smart phone ends up downloading a massive 2x image asset while on an
+[EDGE connection][edge]. This isn't the best user experience.
+
+### Use new browser features
+
+There's been a lot of recent discussion around web platform support for
+the high DPI image problem. Apple recently broke into the space,
+bringing the [image-set()][image-set-spec] CSS function to WebKit. As a result, both
+Safari and Chrome support it. Since it's a CSS function, `image-set()`
+doesn't address the problem for `<img>` tags. Enter
+[@srcset][srcset-spec], which addresses this issue but (at the time of
+this writing) has no reference implementations (yet!). The next section
+goes deeper into `image-set` and `srcset`.
+
+## Browser features for high DPI support
+
+Ultimately, the decision about which approach you take depends on your
+particular requirements. That said, keep in mind that all of the
+aforementioned approaches have drawbacks. Looking forward, however, once
+`image-set` and srcset are widely supported, they will be the
+appropriate solutions to this problem. For the time being, let's talk
+about some best practices that can bring us as close to that ideal
+future as possible.
+
+Firstly, how are these two different? Well, `image-set()` is a CSS
+function, appropriate for use as a value of the background CSS property.
+srcset is an attribute specific to `<img>` elements, with similar syntax.
+Both of these tags let you specify image declarations, but the srcset
+attribute lets you also configure which image to load based on viewport
+size.
+
+### Best practices for image-set
+
+The `image-set()` CSS function is available prefixed as
+`-webkit-image-set()`. The syntax is quite simple, taking a one or more
+comma separated image declarations, which consist of a URL string or
+`url()` function followed by the associated resolution. For example:
+
+```css
+background-image:  -webkit-image-set(
+  url(icon1x.jpg) 1x,
+  url(icon2x.jpg) 2x
+);
+```
+
+What this tells the browser is that there are two images to choose from.
+One of them is optimized for 1x displays, and the other for 2x displays.
+The browser then gets to choose which one to load, based on a variety of
+factors, which might even include network speed, if the browser is smart
+enough (not currently implemented as far as I know).
+
+In addition to loading the correct image, the browser will also scale it
+accordingly. In other words, the browser assumes that 2 images are
+twice as large as 1x images, and so will scale the 2x image down by a
+factor of 2, so that the image appears to be the same size on the page.
+
+Instead of specifying 1x, 1.5x or Nx, you can also specify a certain
+device pixel density in dpi.
+
+This works well, except in browsers that don't support the `image-set`
+property, which will show no image at all! This is clearly bad, so you
+**must** use a fallback (or series of fallbacks) to address that issue:
+
+```css
+background-image: url(icon1x.jpg);
+background-image: -webkit-image-set(
+  url(icon1x.jpg) 1x,
+  url(icon2x.jpg) 2x
+);
+/* This will be useful if image-set gets into the platform, unprefixed.
+    Also include other prefixed versions of this */
+background-image: image-set(
+  url(icon1x.jpg) 1x,
+  url(icon2x.jpg) 2x
+);
+```
+
+The above will load the appropriate asset in browsers that support
+image-set, and fall back to the 1x asset otherwise. The obvious caveat
+is that while `image-set()` browser support is low, most user agents will
+get the 1x asset.
+
+[This demo][image-set-demo] uses the `image-set()` to load the correct
+image, falling back to the 1x asset if this CSS function isn't
+supported.
+
+At this point, you may be wondering why not just polyfill (that is,
+build a JavaScript shim for) `image-set()` and call it a day? As it
+turns out, it's quite difficult to implement efficient polyfills for CSS
+functions. (For a detailed explanation why, see this [www-style
+discussion][www-style]).
+
+### Image srcset
+
+Here is an example of srcset:
+
+```html
+<img alt="my awesome image"
+  src="banner.jpeg"
+  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
+```
+
+As you can see, in addition to x declarations that `image-set` provides,
+the srcset element also takes w and h values which correspond to the
+size of the viewport, attempting to serve the most relevant version. The
+above would serve banner-phone.jpeg to devices with viewport width under
+640px, banner-phone-HD.jpeg to small screen high DPI devices,
+banner-HD.jpeg to high DPI devices with screens greater than 640px, and
+banner.jpeg to everything else.
+
+### Using image-set for image elements
+
+Because the srcset attribute on img elements is not implemented in most
+browsers, it may be tempting to replace your img elements with `<div>`s
+with backgrounds and use the image-set approach. This will work, with
+caveats. The drawback here is that the `<img>` tag has long-time
+semantic value. In practice, this is important mostly for web crawlers
+and accessibility reasons.
+
+If you end up using `-webkit-image-set`, you might be tempted to use the
+background CSS property. The drawback of this approach is that you need
+to specify image size, which is unknown if you are using a non-1x image.
+Rather than doing this, you can use the content CSS property as follows:
+
+```html
+<div id="my-content-image"
+  style="content: -webkit-image-set(
+    url(icon1x.jpg) 1x,
+    url(icon2x.jpg) 2x);">
+</div>
+```
+
+This will automatically scale the image based on devicePixelRatio. See
+[this example][srcset-as-image-set] of the above technique in action,
+with an additional fallback to `url()` for browsers that don't support
+`image-set`.
+
+### Polyfilling srcset
+
+One handy feature of `srcset` is that it comes with a natural fallback.
+In the case where the srcset attribute is not implemented, all browsers
+know to process the src attribute. Also, since it's just an HTML
+attribute, it's possible to create [polyfills with
+JavaScript][srcset-polyfill].
+
+This polyfill comes with [unit tests][srcset-tests] to ensure that it's
+as close to the [specification][srcset-spec] as possible. In addition, there
+are checks in place that prevent the polyfill from executing any code if
+srcset is implemented natively.
+
+Here is a [demo of the polyfill][srcset-poly-demo] in action.
+
+## Conclusion
+
+There is no magic bullet for solving the problem of high DPI images.
+
+The easiest solution is to avoid images entirely, opting for SVG and CSS
+instead. However, this isn't always realistic, especially if you have
+high quality imagery on your site.
+
+Approaches in JS, CSS and using the server-side all have their strengths
+and weaknesses. The most promising approach, however, is to leverage new
+browser features. Though browser support for `image-set` and `srcset` is
+still incomplete, there are reasonable fallbacks to use today.
+
+To summarize, my recommendations are as follows:
+
+- For background images, use [image-set](#toc-image-set) with the
+  appropriate fallbacks for browsers that don't support it.
+- For content images, use a [srcset polyfill](#toc-polyfill), or
+  fallback to [using image-set](#toc-image-set-srcset) (see above).
+- For situations where you're willing to sacrifice image quality,
+  consider using heavily [compressed 2x images](#toc-compress).
+
+
+[variety-dpi]: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
+[dpr-intro]: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
+[dpi]: http://en.wikipedia.org/wiki/Dots_per_inch
+[glass]: http://en.wikipedia.org/wiki/Project_Glass
+[pretend-96dpi]: http://blogs.msdn.com/b/fontblog/archive/2005/11/08/490490.aspx
+[html-px]: http://inamidst.com/stuff/notes/csspx
+[sub-pixel]: http://ejohn.org/blog/sub-pixel-problems-in-css/
+[round-dpr]: http://www.w3.org/TR/CSS21/syndata.html#length-units
+[60%]: http://httparchive.org/interesting.php#bytesperpage
+[shell]: https://www.html5rocks.com/static/demos/high-dpi/process_images.sh
+[imagick]: http://www.imagemagick.org/script/index.php
+[images-variety]: https://www.html5rocks.com/static/demos/high-dpi/tile3.jpg
+[tradeoffs]: http://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/
+[images]: #
+[webp-good]: https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study
+[webp-support]: http://caniuse.com/#search=webp
+[webp-gallery]: https://developers.google.com/speed/webp/gallery1
+[detect-webp]: http://stackoverflow.com/questions/5573096/detecting-webp-support
+[css-image]: http://www.w3.org/TR/css3-images/#image-notation
+[modernizr]: http://modernizr.github.com/Modernizr/test/
+[modernizr-webp]: https://github.com/Modernizr/Modernizr/commit/d1fa2a62d7912d5f253ac1ab9ae2ce9430c3ef92
+[jeff]: http://www.codinghorror.com/blog/2005/12/progressive-image-rendering.html
+[stoyan]: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/
+[latency]: http://serverfault.com/questions/387627/why-do-mobile-networks-have-high-latencies-how-can-they-be-reduced
+[art]: http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
+[range]: http://stackoverflow.com/questions/1434647/using-the-http-range-header-with-a-range-specifier-other-than-bytes
+[foresight.js]: https://github.com/adamdbradley/foresight.js
+[js-libs]: https://docs.google.com/a/google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
+[jason]: http://blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset/
+[moz-wtf]: https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
+[edge]: http://en.wikipedia.org/wiki/Enhanced_Data_Rates_for_GSM_Evolution
+[image-set-spec]: http://dev.w3.org/csswg/css4-images/#image-set-notation
+[srcset-spec]: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset
+[www-style]: http://lists.w3.org/Archives/Public/www-style/2012Jul/0023.html
+[image-set-demo]: https://www.html5rocks.com/static/demos/high-dpi/image-set/index.html
+[srcset-as-image-set]: https://www.html5rocks.com/static/demos/high-dpi/image-set/as-content.html
+[srcset-polyfill]: https://github.com/borismus/srcset-polyfill
+[srcset-poly-demo]: https://www.html5rocks.com/static/demos/high-dpi/srcset-polyfill/demo/index.html
+[srcset-tests]: https://github.com/borismus/srcset-polyfill/blob/master/tests/srcset-tests.js
diff --git a/src/site/content/en/blog/hn-premii/index.md b/src/site/content/en/blog/hn-premii/index.md
new file mode 100644
index 00000000000..fb434cd1c75
--- /dev/null
+++ b/src/site/content/en/blog/hn-premii/index.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: Hacker News Reader
+date: 2015-04-01
+updated: 2015-04-01
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hS4ACHeICoiD8BKEw9vM.png", alt="Hacker news reader screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[Hacker News Reader](http://hn.premii.com/): An amazing optimized reader
+for Hacker News.
+
+### What we like?
+
+A beautiful and highly optimized reading experience for Hacker News, this
+app works well and looks great across mobile, tablet and desktop. It's fast
+and testing it on mobile you will see some silky smooth transitions. It has
+a really nice use of theme-color for integration into Android and it's
+installable as it uses the
+[Web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/simplified-app-installs).
+Once installed it looks and feels like a native HN newsreader app.
+
+### Possible Improvements
+
+The app does a huge number of things very well. It loads quickly and is fast
+and smooth to use. If there were one thing the app could do it would be to add
+support for offline experiences. This could be a simple error page or a more
+complex view of cached content.
+
+## Q & A with Dharmesh Patel
+
+### Why the web?
+
+I prefer to use technology that I am most comfortable in. I created my first
+webpage long before I wrote "hello world" in c++.
+
+Open web is the only platform that allows me to reach all kinds of users. I can
+easily develop and deploy new features and fixes for my app without depending
+on third party. It allows me to push new features and bug fixes anytime.
+
+User can try my app without downloading, and can use same app on different
+platforms. As of today, my app works on latest HTML5 capable browsers
+including but not limited to Firefox OS, Windows Phone, blackberry, iOS and
+Android; and its available to download on different app stores. This app is
+also available on the Chrome Web Store. I am a sole developer and I work on
+this few hours per week. I don't think that any other technology would have
+allowed me to support different platforms.
+
+### What worked really well during development?
+
+I was surprised how well all latest browsers support major HTML5 features.
+I started my web app as a prototype to see what I can build using Open Web
+(HTML5, CSS, JavaScript). I only tested my app on iOS Safari and Android
+browser during development, and it worked on Firefox and with little changes,
+I was able to support IE mobile.
+
+Like everyone else, I thought 60FPS was not possible on mobile web app,
+specially gestures. I was able to implement pull to refresh, and swipe to
+go back with little learning; and was able to make it work on all major
+browsers. With that knowledge, I was able to implement Flipboard web app
+style story navigation in few hours.
+
+### If you could have any API to improve your app, what would it be?
+
+**Intent**: Should be able to launch Android native share intent or iOS
+share from my web app. This will allow user to choose the service of their
+choice instead of my app's limited options.
+
+**Persistent local storage**: Like to see better support for localstorage.
+5MB/2.5MB is not enough. Not only that, there is no way to figure out how
+much space is available. My app can manage storage properly if I knew how
+much space is left.
+
+**Native/standalone web app**: Better option to deploy/install my web app on
+iOS, Android and WP as a standalone app. I use Cordova but its painful to
+update to the latest version. Chrome on Android is moving in right direction,
+but iOS and Windows Phone is not providing enough support for standalone app.
diff --git a/src/site/content/en/blog/hobbit-front-end/index.md b/src/site/content/en/blog/hobbit-front-end/index.md
new file mode 100644
index 00000000000..996b2832071
--- /dev/null
+++ b/src/site/content/en/blog/hobbit-front-end/index.md
@@ -0,0 +1,230 @@
+---
+layout: post
+title: The Front-end of Middle-earth
+subhead: A walkthrough of multi-device development
+date: 2013-12-11
+updated: 2013-12-12
+authors:
+  - einaroberg
+  - danielisaksson
+tags:
+  - blog
+  - case-study
+---
+
+In [our first article](http://www.html5rocks.com/en/tutorials/casestudies/hobbit/) about the development of the Chrome Experiment [A Journey Through Middle-earth](http://middle-earth.thehobbit.com/) we focused on WebGL development for mobile devices. In this article we discuss the challenges, problems and solutions we encountered when creating the rest of the HTML5 front-end.
+
+## Three versions of the same site
+
+Let’s start by talking a bit about adapting this experiment to work on both desktop computers and mobile devices from a screen-size and device-capabilities perspective.
+
+The whole project is based on a very “cinematic” style, where we design-wise wanted to keep the experience within a landscape-oriented fixed frame to keep the magic from the movie. Since a large chunk of the project consists of interactive mini “games” it wouldn’t make sense to let them overflow the frame either.
+
+We can take the landing page as an example of how we adapt the design for different sizes.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AxrZEfU6BKgkNRmkTznh.png", alt="The eagles just dropped us at the landing page.", width="800", height="424" %}
+<figcaption>The eagles just dropped us at the landing page.</figcaption>
+</figure>
+
+The site has three different modes: desktop, tablet and mobile. Not just to handle layout, but because we need to handle runtime-loaded assets and add various performance optimizations. With devices that have a higher resolution than desktop computers and laptops but have worse performance than phones, it's not an easy task to define the ultimate set of rules.
+
+We’re using user-agent data to detect mobile devices and a viewport-size test to target tablets among those (645px and higher). Each different mode can in fact render all resolutions, because the layout is based on media queries or relative/percentage positioning with JavaScript.
+
+Since the designs in this case aren’t based on grids or rules and are quite unique between the different sections it really depends on the specific element and scenario as to what breakpoints or styles to use. It happened more than once that we had set up the perfect layout with nice sass-mixins and media-queries, and then we needed to add an effect based on the mouse position or dynamic objects, and ended up rewriting everything in JavaScript.
+
+We also add a class with the current mode in the head tag so we can use that info in our styles, like in this example (in SCSS):
+
+```css
+.loc-hobbit-logo {
+
+  // Default values here.
+
+  .desktop & {
+     // Applies only in desktop mode.
+  }
+
+ .tablet &, .mobile & {
+   
+   // Different asset for mobile and tablets perhaps.
+
+   @media screen and (max-height: 760px), (max-width: 760px) {
+     // Breakpoint-specific styles.
+   }
+
+   @media screen and (max-height: 570px), (max-width: 400px) {
+     // Breakpoint-specific styles.
+   }
+ }
+}
+```
+
+We support all sizes down to about 360x320, which has been pretty challenging when making a immersive web experience. On desktop we have a minimum size before we show scrollbars because we want you to experience the site in a larger viewport if possible. On mobile devices we decided to allow both landscape and portrait mode all the way up to the interactive experiences, where we ask you to turn the device to landscape. The argument against this was that it’s not as immersive in portrait as in landscape; but the site scaled pretty well so we kept it.
+
+{% Aside %}
+**DeviceOrientation events** The content layout is controlled by breakpoints and CSS but we also need to handle the event in JavaScript to pause game-loop and keep the correct state. It turns out you can’t rely on the value in window.orientation because it’s not standard and varies across devices. Instead, listen to the event, but look for `window.innerWidth` and `window.innerHeight` to determine the orientation.
+{% endAside %}
+
+It’s important to note that layout shouldn’t be mixed up with feature detection like input type, device orientation, sensors etc. Those features can exist in all of these modes and should span across all. Supporting mouse and touch at the same time is one example. Retina compensation for quality but most of all performance is another, sometimes lesser quality is better. As an example the canvas is half the resolution in the WebGL experiences on retina displays, which would otherwise have to render four times the number of pixels
+
+{% Aside %}
+You can easily try out all sizes right in your browser by [emulating](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) a device in Chrome DevTools. When switching between mobile, tablet and desktop versions you have to reload the site to use the correct dependencies and settings.
+{% endAside %}
+
+We frequently used the emulator tool in DevTools during development, especially in Chrome Canary which has new improved features and lots of presets. It is a good way of quickly validating design. We still needed to test on real devices regularly. One reason was because the site is adapting to fullscreen. Pages with vertical scroll hide the browser UI when scrolling in most cases (Safari on iOS7 has problems with this currently) but we had to fit everything independent of the that. We also used a preset in the emulator and changed the screen size setting to simulate the loss of available space. Testing on real devices is also important for monitoring memory-consumption and performance
+
+## Handling the state
+
+After the [landing page](http://middle-earth.thehobbit.com/) we land at the map of Middle-earth. Did you notice the URL changing? The site is a single page application that uses the [History API](http://diveintohtml5.info/history.html) to handle [routing](http://visionmedia.github.io/page.js/).
+
+Each section of the site is its own object inheriting a boilerplate of functionality such as DOM-elements, transitions, loading of assets, disposing etc. When you explore different parts of the site, sections are initiated, elements are added to and removed from the DOM and assets for the current section are loaded.
+
+Since the user can hit the browser’s back button or navigate via the menu at any time, everything that is created needs to be disposed of at some point. Timeouts and animations need to be stopped and discarded or they will cause unwanted behaviour, errors, and memory leaks. This is not always an easy task, especially when deadlines are approaching and you need to get everything in there as fast as possible.
+
+{% Aside %}
+Keep calm and add those event listeners. Make a practice of adding a dispose function to every object. Watch out for leaving timers and tweens behind. If tweening, use the equivalent of `TweenMax.killTweensOf(foo)` or save references and stop them from triggering callbacks. Remove runtime added DOM elements. Use profiling tools regulary to keep an eye on the memory consumption and leaks.
+{% endAside %}
+
+## Showing off the locations
+
+To show off the beautiful settings and the characters of Middle-earth we built a modular system of image and text components that you can drag or swipe horizontally. We haven’t enabled a scrollbar here since we want to have different speeds on different ranges, like in image sequences where you stop the motion sideways until the clip has played out.
+
+{% Aside %}
+A scrollbar sets expectations about the behavior of your site. It can be a bad user experience when a website hijacks this control.
+{% endAside %}
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ebf9JxwetAeDmWbqofcW.jpg", alt="Thranduil's Hall", width="800", height="71" %}
+<figcaption><a href="http://middle-earth.thehobbit.com/thranduils-hall">Thranduil's Hall</a> timeline</figcaption>
+</figure>
+
+### The timeline
+
+When development started we didn’t know the content of the modules for each location. What we knew was that we wanted a templated way of showing different types of media and information in a horizontal timeline that would give us the freedom to have six different location presentations without having to rebuild everything six times. To manage this we created a timeline controller that handle the panning of its modules based on settings and the modules’ behaviours. 
+
+### Modules and behaviour components
+
+The different modules we added support for are image-sequence, still image, parallax scene, focus-shift scene and text. 
+
+The parallax scene module has an opaque background with a custom number of layers that listens to the viewport progress for exact positions. 
+
+The focus-shift scene is a variant of the parallax bucket, with the addition that we use two images for each layer which fades in and out to simulate a focus change. We tried to use the blur filter, but it’s still to expensive, so we’ll wait for CSS shaders for this.
+
+The content in the text module is drag-enabled with the TweenMax plugin [Draggable](http://www.greensock.com/draggable/). You can also use the scrollwheel or two-finger swipe to scroll vertically. Note the [throw-props-plugin](http://www.greensock.com/throwprops/) that adds the fling-style physics when you swipe and release.
+
+The modules can also have different behaviours that are added as a set of components. They all have their own target selectors and settings. Translate to move an element, scale to zoom, hotspots for info overlay, debug metrics for testing visually, a start-title overlay, a flare layer, and some more. These will be appended to the DOM or controlling their target element inside the module.
+
+With this in place we can create the different locations with just a [config file](https://gist.github.com/inear/7626665) that defines what 
+assets to load and setup the different kinds of modules and components.
+
+### Image sequences
+
+The most challenging of the modules from a performance and a download-size aspect is the image sequence. There’s a bunch to read about this [topic](http://awardwinningfjords.com/2012/03/08/image-sequences.html). On mobile and tablets we replace this with a still image. It’s too much data to decode and store in memory if we want decent quality on mobile. We tried multiple alternative solutions; using a background image and a spritesheet first, but it led to memory problems and lag when the GPU needed to swap between spritesheets. Then we tried swapping img elements, but it was also too slow. Drawing a frame from a spritesheet to a canvas was the most performant, so we began optimizing that. To save computation time each frame, the image data to write into the canvas is pre-processed via a temporary canvas and saved with putImageData() to an array, decoded and ready to use. The original spritesheet can then be garbage collected, and we store only the minimum amount of data needed in memory. Maybe it’s actually less to store undecoded images, but we get better performance while scrubbing the sequence this way. The frames are pretty small, just 640x400, but those will just be visible during scrubbing. When you stop, a high-res image loads and quickly fades in.
+
+```js
+var canvas = document.createElement('canvas');
+canvas.width = imageWidth;
+canvas.height = imageHeight;
+
+var ctx = canvas.getContext('2d');
+ctx.drawImage(sheet, 0, 0);
+
+var tilesX = imageWidth / tileWidth;
+var tilesY = imageHeight / tileHeight;
+
+var canvasPaste = canvas.cloneNode(false);
+canvasPaste.width = tileWidth;
+canvasPaste.height = tileHeight;
+
+var i, j, canvasPasteTemp, imgData, 
+var currentIndex = 0;
+var startIndex = index * 16;
+for (i = 0; i < tilesY; i++) {
+  for (j = 0; j < tilesX; j++) {
+    // Store the image data of each tile in the array.
+    canvasPasteTemp = canvasPaste.cloneNode(false);
+    imgData = ctx.getImageData(j * tileWidth, i * tileHeight, tileWidth, tileHeight);
+    canvasPasteTemp.getContext('2d').putImageData(imgData, 0, 0);
+
+    list[ startIndex + currentIndex ] = imgData;
+
+    currentIndex++;
+  }
+}
+```
+
+The sprite-sheets are generated with [Imagemagick](http://www.imagemagick.org/script/index.php). Here is a simple [example on GitHub](https://gist.github.com/inear/7616849) that shows how to create a spritesheet of all images inside a folder.
+
+### Animating the modules
+
+To place the modules on the timeline, a hidden representation of the timeline, displayed offscreen, keeps track on the ‘playhead’ and the width of the timeline. This can be done with just code, but it was good with a visual representation when developing and debugging. When running for real it’s just updated on resize to set dimensions. Some modules fills the viewport and some have their own ratio, so it was a little tricky to scale and position everything in all resolutions so everything is visible and not cropped too much. Each module has two progress indicators, one for the visible position on screen and one for the duration of the module itself. When making parallax movement it’s often hard to calculate start- and end-position of objects to sync with the expected position when it’s in view. It’s good to know exactly when a module enters the view, plays its internal timeline and when it animates out of view again.
+
+Each module has a subtle black layer on top that adjusts its opacity so it’s fully transparent when it’s in the center position. This helps you to focus on one module at a time, which enhances the experience.
+
+### Page performance
+
+Moving from a functioning prototype to a jank-free release version means going from guessing to knowing of what happens in the browser. This is where Chrome DevTools is your best friend.
+
+We have spent quite a lot of time optimising the site. Forcing hardware-acceleration is one of the most important tools of course to get smooth animations. But also hunting [colorful columns](https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#timeline-frames-mode) and red rectangles in Chrome DevTools. There are many good articles about the topics, and you should read them [all](http://jankfree.org/). The reward for removing skipping frames is instant, but so is the frustration when they return again. And they will. It's an ongoing process that needs iterations.
+
+{% Aside %}
+Watch the layers panel (only in Canary) and the “paint rectangles” in Chrome DevTools. If, for example, child elements need to be updated per frame and be painted you should investigate if it’s faster to rearrange the layers to minimize the areas that need to be painted as much as possible.
+{% endAside %}
+
+I like to use TweenMax from Greensock for tweening properties, transforms and CSS. Think in containers, visualise your structure as you add new layers. Keep in mind that existing transforms can be overwritten by new transforms. The translateZ(0) that forced hardware acceleration in your CSS class is replaced by a 2D matrix if you tween 2D values only. To keep the layer in acceleration mode in those cases, use the property “force3D:true” in the tween to make a 3D matrix instead of a 2D matrix. It’s easy to forget when you combine CSS and JavaScript tweens to set styles.
+
+Don’t force hardware acceleration where it’s not needed. GPU memory can quickly fill up and cause unwanted results when you want to hardware-accelerate many containers, especially on iOS where memory have more constraints. To load smaller assets and scale them up with css and disable some of the effects in mobile mode made huge improvements.
+
+[Memory leaks](http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/) was another field we needed to improve our skills in. When navigating between the different WebGL experiences a lot of objects, materials, textures and geometry are created. If those are not ready for garbage collection when you navigate away and remove the section they will probably cause the device to crash after a while when it runs out of memory.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LgHLhBoc1xsHi8j3PuP0.png", alt="Exiting a section with a failing dispose function.", width="667", height="61" %}
+<figcaption>Exiting a section with a failing dispose function.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/wV383MdysOSfWvrtxDl0.png", alt="Much better!", width="679", height="62" %}
+<figcaption>Much better!</figcaption>
+</figure>
+
+To find the leak it was pretty straight forward workflow in DevTools, recording the timeline and capturing heap snapshots. It’s easier if there are specific objects, like 3D geometry or a specific library, that you can filter out. In the example above it turned out that the 3D scene was still around and also an array that stored geometry was not cleared. If you find it hard to locate where the object lives, there is a nice feature that let you view this called [retaining paths](https://developers.google.com/chrome-developer-tools/docs/heap-profiling?hl=sv&csw=1#views_paths). Just click the object you want to inspect in the heap snapshot and you get the information in a panel below. Using a good structure with smaller objects helps when locating your references.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rPmywWW0dm3GoCrS2qPk.png", alt="The scene was referenced in the EffectComposer.", width="593", height="334" %}
+<figcaption>The scene was referenced in the EffectComposer.</figcaption>
+</figure>
+
+In general, it's healthy to think twice before you manipulate the DOM. When you do, think about efficiency. Don't manipulate the DOM inside a game loop if you can help it. Store references in variables for reuse. If you need to search for an element, use the shortest route by storing references to strategic containers and searching inside the nearest ancestor element.
+
+Delay reading dimensions of newly added elements or when removing/adding classes if you experience layout bugs. Or make sure [Layout is triggered](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-animating-layout-properties). Sometimes the browser batch changes to styles, and will not update after the next layout trigger. This can really be a big problem sometimes, but it’s there for a reason, so try to learn how it’s working behind the scenes and you will gain a lot.
+
+### Fullscreen
+
+When available, you have the option to put the site in fullscreen-mode in the menu via the Fullscreen API. But on devices there is also the browsers decision to put it into fullscreen. Safari on iOS had previously a hack to let you control that, but that is not available anymore so you have to prepare your design to work without it when making a non-scrolling page. We can probably expect updates on this in future updates, since it has broke a lot of web-apps.
+
+## Assets
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FIinD7TN05e0D5UO6BXb.jpg", alt="Animated instructions for the experiments.", width="800", height="222" %}
+<figcaption>Animated instructions for the experiments.</figcaption>
+</figure>
+
+Throughout the site we have a lot of different types of assets, we use images (PNG and JPEG), SVG (inline and background), spritesheets (PNG), custom icon fonts and Adobe Edge animations. We use PNGs for assets and animations (spritesheets) where the element can't be vector based, otherwise we try to use SVGs as much as possible.
+
+The vector format means no loss of quality, even if we scale it. 1 file for all devices.
+
+- Small file size.
+- We can animate each part separately (perfect for advanced animations). As an example we hide the "subtitle" of the Hobbit logo (the desolation of Smaug) when it's scaled down.
+- It can be embedded as an SVG HTML tag or used as a background-image with no extra loading (it’s loaded the same time as the html page).
+
+Icon typefaces have the same advantages as SVG when it comes to scalability and are used instead of SVG for small elements like icons on which we only need to be able to change the colour (hover, active, etc.). The icons are also very easy to reuse, you just need to set the CSS "content" property of an element.
+
+## Animations
+
+In some cases animating SVG elements with code can be very time consuming, especially when the animation needs to be changed a lot during the design process. To improve the workflow between designers and developers we use Adobe Edge for some animations (the instructions before the games). The animation workflow is really close to Flash and that helped the team but there are a few drawbacks, especially with integrating the Edge animations in our asset loading process since it comes with it’s own loaders and implementation logic.
+
+I still feel we have a long way to go before we have a perfect workflow for handling assets and handmade animations on the web. We’re looking forward to seeing how tools like Edge will evolve. Feel free to add suggestions on other animation tools and workflows in the comments.
+
+## Conclusion
+
+Now when all the parts of the project are released and we look at the final result I must say we are quite impressed with the state of modern mobile browsers. When we started off this project we had much lower expectations on how seamless, integrated and performant we would be able to make it. It's been a great learning experience for us and all the time spent iterating and testing (a lot) has improved our understanding of how modern browsers work. And that's what it will take if we want to shorten the production time on these types of projects, going from guessing to knowing.
diff --git a/src/site/content/en/blog/hobbit/index.md b/src/site/content/en/blog/hobbit/index.md
new file mode 100644
index 00000000000..e4d0ef428eb
--- /dev/null
+++ b/src/site/content/en/blog/hobbit/index.md
@@ -0,0 +1,151 @@
+---
+layout: post
+title: The Hobbit Experience
+subhead: Bringing Middle-Earth to Life with Mobile WebGL
+date: 2013-11-20
+updated: 2013-11-26
+authors:
+  - danielisaksson
+tags:
+  - blog
+  - case-study
+---
+
+Historically, bringing interactive, web-based, multimedia-heavy experiences to mobiles and tablets has been a challenge. The main constraints have been performance, API availability, limitations in HTML5 audio on devices and the lack of seamless inline video playback.
+
+Earlier this year we started a project with friends from Google and Warner Bros. to make a mobile-first web experience for the new Hobbit movie, __The Hobbit: The Desolation of Smaug__. Building a multimedia-heavy mobile Chrome Experiment has been a really inspiring and challenging task.
+
+The experience is optimized for Chrome for Android on the new Nexus devices where we now have access to WebGL and Web Audio. However a large portion of the experience is accessible on non-WebGL devices and browsers as well thanks to hardware-accelerated compositing and CSS animations.
+
+The whole experience is based on a map of Middle-earth and the locations and characters from the Hobbit movies. Using WebGL made it possible for us to dramatize and explore the rich world of the Hobbit trilogy and let the users control the experience.
+
+## Challenges of WebGL on mobile devices
+
+First, the term "mobile devices" is very broad. The specs for devices vary a lot. So as a developer you need to decide if you want to support more devices with a less complex experience or, as we did in this case, limit the supported devices to those able to display a more realistic 3D world. For “Journey through Middle-earth” we focused on Nexus devices and five popular Android smartphones. 
+
+In the experiment, we used [three.js](http://threejs.org/) as we’ve done for some of our previous WebGL projects. We started implementation by building an initial version of the [Trollshaw game](http://middle-earth.thehobbit.com/trollshaw/experience) that would run well on the Nexus 10 tablet. After some initial testing on the device, we had a list of optimizations in mind that looked much like what we normally would use for a low-spec laptop:
+
+- Use low-poly models
+- Use low-res textures
+- Reduce the number of drawcalls as much as possible by [merging geometry](http://www.google.com/url?q=http%3A%2F%2Flearningthreejs.com%2Fblog%2F2011%2F10%2F05%2Fperformance-merging-geometry%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEekldEIRJOLOTgexpMUFPq6Obtvg)
+- Simplify materials and lighting
+- Remove post effects and turn off antialiasing
+- Optimise Javascript performance
+- Render the WebGL canvas at half size and scale up with CSS
+
+After applying these optimizations to our first rough version of the game, we had a steady frame rate of 30FPS that we were happy with. At that point our goal was to improve the visuals without negatively impacting frame rate. We tried many tricks: some turned out to really have an impact on performance; a few didn’t have as big an effect as we’d hoped.
+
+### Use low-poly models
+
+Let’s start with the models. Using low-poly models certainly helps download time, as well as the time it takes to initialize the scene. We found that we could increase the complexity quite a lot without affecting performance much. The troll models we use in this game are about 5K faces and the scene is around 40K faces and that works fine.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/atliubYSO7t5PZmmsQWa.jpg", alt="One of the trolls of Trollshaw forest", width="800", height="732" %}
+<figcaption>One of the trolls of Trollshaw forest</figcaption>
+</figure>
+
+For another (not yet released) location in the experience we saw more impact on performance from reducing polygons. In that case we loaded lower-polygon objects for mobile devices than the objects we loaded for desktop. Creating different sets of 3D models requires some extra work and isn’t always required. It really depends on how complex your models are to begin with. 
+
+When working on big scenes with a lot of objects, we tried to be strategic on how we divide the geometry. This enabled us to switch less important meshes on and off quickly, to find a setting that worked for all mobile devices. Then, we could choose to merge the geometry in JavaScript at runtime for dynamic optimization or to merge it in pre-production to save requests.
+
+### Use low-res textures
+
+To reduce load time on mobile devices, we chose to load different textures that were half the size of the textures on desktop. It turns out that all devices can [handle texture sizes](http://webglstats.com/#h_texsize) up to 2048x2048px and most can handle 4096x4096px. Texture lookup on the individual textures doesn’t seem to be a problem once they are uploaded to GPU. The total size of the textures must fit in the GPU memory to avoid having textures constantly up- and downloaded, but this is probably not a big problem for most web-experiences. However, combining textures into as few spritesheets as possible is important to reduce the number of drawcalls  -  this is something that has a big impact on performance on mobile devices.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OpVvRIIqlQUQOlJprLhV.jpg", alt="Texture for one of the trolls of Trollshaw forest", width="512", height="512" %}
+<figcaption>Texture for one of the trolls of Trollshaw forest<br>
+(original size 512x512px)</figcaption>
+</figure>
+
+### Simplify materials and lighting
+
+The choice of materials can also greatly affect performance and must be managed wisely on mobile. Using ` MeshLambertMaterial`  (per vertex light calculation) in three.js instead of ` MeshPhongMaterial`  (per texel light calculation) is one thing we used to optimise performance. Basically we tried to use as simple shaders with as few lighting calculations as possible.
+
+To see how the materials you use affect a scene’s performance, you can override the materials of the scene with a ` MeshBasicMaterial` . This will give you a good comparison.
+
+```js
+scene.overrideMaterial = new THREE.MeshBasicMaterial({color:0x333333, wireframe:true});
+```
+
+### Optimise JavaScript performance
+
+When building games for mobile, the GPU isn’t always the biggest hurdle. A lot of time is spent on the CPU, especially physics and skeletal animations. One trick that helps sometimes, depending on the simulation, is to only run these expensive calculations every other frame. You can also use available JavaScript optimisation techniques when it comes to object pooling, [garbage collection and object creation](http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/). 
+
+Updating pre-allocated objects in loops instead of creating new objects is an important step to avoid garbage collection "hiccups" during the game.
+
+For example, consider code like this:
+
+```js
+var currentPos = new THREE.Vector3();
+
+function gameLoop() {
+  currentPos = new THREE.Vector3(0+offsetX,100,0);
+}
+```
+
+An improved version of this loop avoids creating new objects that must be garbage collected:
+
+```js
+var originPos = new THREE.Vector3(0,100,0);
+var currentPos = new THREE.Vector3();
+function gameLoop() {
+  currentPos.copy(originPos).x += offsetX;
+  //or
+  currentPos.set(originPos.x+offsetX,originPos.y,originPos.z);
+}
+```
+As much as possible, event handlers should only update properties, and let the ` requestAnimationFrame`  render-loop handle updating the stage.
+
+Another tip is to optimise and/or pre-calculate ray-casting operations. For example, if you need to attach an object to a mesh during a static path movement, you can "record" the positions during one loop and then read from this data instead of ray-casting against the mesh. Or as we do in the [Rivendell experience](http://middle-earth.thehobbit.com/rivendell/experience), ray-cast to look for mouse interactions with a simpler low-poly invisible mesh. Searching for collisions on a high-poly mesh is very slow and should be avoided in a game-loop in general.
+
+### Render the WebGL canvas at half size and scale up with CSS
+
+The size of the WebGL canvas is probably the single most effective parameter you can tweak to optimise performance. The bigger the canvas you use to draw your 3D scene, the more pixels have to be drawn on every frame. This of course affects performance.The Nexus 10 with its high-density 2560x1600 pixel display has to push 4 times the number of pixels as a low-density tablet. To optimise this for mobile we use a [trick](http://blog.tojicode.com/2011/07/dirty-full-frame-webgl-performance-hack.html) where we set the canvas to half the size (50%) and then scale it up to its intended size (100%) with hardware-accelerated CSS 3D transforms. The downside of this is a pixelated image where thin lines can become a problem but on a high-res screen the effect isn’t that bad. It’s absolutely worth the extra performance.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qrYKVjMtRVRg9vIHFxY6.jpg", alt="The same scene without canvas scaling on the Nexus 10 (16FPS) and scaled to 50% (33FPS)", width="800", height="400" %}
+<figcaption>The same scene without canvas scaling on the Nexus 10 (16FPS) and scaled to 50% (33FPS).</figcaption>
+</figure>
+
+### Objects as building blocks
+
+To be able to create the big maze of the [Dol Guldur](http://middle-earth.thehobbit.com/dolguldur/experience) castle and the never ending valley of Rivendell we made a set of building block 3D models that we re-use. Re-using objects lets us ensure that objects are instantiated and uploaded at the start of the experience, and not in the middle of it.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uo2fKSut8TWsmFns7TlR.jpg", alt="3D object building blocks used in the maze of Dol Guldur.", width="800", height="450" %}
+<figcaption>3D object building blocks used in the maze of Dol Guldur.</figcaption>
+</figure>
+
+In Rivendell we have a number of ground sections that we constantly reposition in Z-depth as the user’s journey progresses. As the user passes sections, these are repositioned in the far distance.
+
+For the Dol Guldur castle we wanted the maze to be regenerated for every game.  To do this we created a script that regenerates the maze.
+
+Merging the whole structure into one big mesh from the beginning results in a very big scene and poor performance. To address this, we decided to hide and show the building blocks depending on whether they are in view. Right from the start, we had an idea about using a 2D raycaster script but in the end we used the [built-in three.js frustrum culling](https://github.com/mrdoob/three.js/blob/master/src/math/Frustum.js). We reused the raycaster script to zoom in on the "danger" the player is facing.
+
+The next big thing to handle is user interaction. On desktop you have mouse and keyboard input; on mobile devices your users interact with touch, swipe, pinch, device orientation etc.
+
+## Using touch interaction in mobile web experiences
+
+Adding touch support isn’t difficult. There are [great articles](http://www.html5rocks.com/en/mobile/touch/) to read about the topic. But there are some small things that can make it more complicated. 
+
+You can have __both__ touch and mouse. The Chromebook Pixel and other touch enabled laptops have both mouse and touch support. One common mistake is to check if the device is touch enabled and then only add touch event listeners and none for mouse.
+
+Don’t update rendering in event listeners. Save the touch events to variables instead and react to them in the requestAnimationFrame render loop. This improves performance and also coalesce conflicting events. Make sure that you re-use objects instead of creating new objects in the event listeners.
+
+Remember that it’s multitouch: event.touches is an array of all touches. In some cases it’s more interesting to look at event.targetTouches or event.changedTouches instead and just react to the touches you are interested in. To separate taps from swipes we use a delay before we check if the touch has moved (swipe) or if it’s still (tap). To get a pinch we measure the distance between the two initial touches and how that changes over time.
+
+In a 3D world you have to decide how your camera reacts to mouse vs. swipe actions. One common way of adding camera movement is to follow the mouse movement. This can be done with either direct control using mouse position or with a delta movement (position change). You don’t always want the same behaviour on a mobile device as a desktop browser. We tested extensively to decide what felt right for each version.
+
+When dealing with smaller screens and touchscreens you’ll find that the user’s fingers and UI interaction graphics are often in the way of what you want to show. This is something we are used to when designing native apps but haven’t really had to think about before with web experiences. This is a real challenge for designers and UX designers.
+
+## Summary
+
+Our overall experience from this project is that WebGL on mobile works really well, especially on newer, high-end devices. When it comes to performance it seems like polygon count and texture size mostly affect download and initialization times and that materials, shaders and the size of the WebGL canvas are the most important parts to optimise for mobile performance. However, it’s the sum of the parts that affects the performance so everything you can do to optimise counts.
+
+Targeting mobile devices also means that you have to get used to thinking about touch interactions and that it’s not only about the pixel size  -  it’s the physical size of the screen as well. In some cases we had to move the 3D camera closer to actually see what was going on.
+
+The experiment is launched and it’s been a fantastic journey. Hope you enjoy it!
+
+Want to try it out? Take your own [Journey to Middle-Earth](http://middle-earth.thehobbit.com).
+
diff --git a/src/site/content/en/blog/hobbit2014/index.md b/src/site/content/en/blog/hobbit2014/index.md
new file mode 100644
index 00000000000..fd038e55c11
--- /dev/null
+++ b/src/site/content/en/blog/hobbit2014/index.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: The Hobbit Experience 2014
+subhead: Adding WebRTC gameplay to the Hobbit Experience
+date: 2014-11-18
+authors:
+  - danielisaksson
+tags:
+  - blog
+  - case-study
+---
+
+In time for the new Hobbit movie “The Hobbit: The Battle of the Five Armies” we have worked on extending last year’s Chrome Experiment, [A Journey through Middle-earth](http://middle-earth.thehobbit.com/) with some new content. The main focus this time has been to widen the use of WebGL as more browsers and devices can view the content and to work with the WebRTC capabilities in Chrome and Firefox. We had three goals with this years experiment:
+
+- P2P gameplay using WebRTC and WebGL on Chrome for Android
+- Make a multi-player game that is easy to play and that is based on touch input
+- Host on Google Cloud Platform
+
+## Defining the game
+
+The game logic is built on a grid-based setup with troops moving on a game board. This made it easy for us to try out the gameplay on paper as we were defining the rules. Using a grid-based setup also helps with collision detection in the game to keep a good performance since you only have to check for collisions with objects in the same or neighbouring tiles.
+We knew from the beginning that we wanted to focus the new game around a battle between the four main forces of Middle-earth, Humans, Dwarves, Elves and Orcs. It also had to be casual enough to be played within a Chrome Experiment and not have too many interactions to learn.
+We started by defining five Battlegrounds on the Middle-earth map that serve as game-rooms where multiple players can compete in a peer-to-peer battle.
+Showing multiple players in the room on a mobile screen, and allowing users to select who to challenge was a challenge in itself. To make the interaction and the scene easier we decided to only have one button to challenge and accept and only use the room to show events and who is the current king of the hill. This direction also resolved a few issues on the match-making side and allowed us to match the best candidates for a battle.
+In our previous Chrome experiment [Cube Slam](https://cubeslam.com/) we learned that it takes a lot of work to handle latency in a multi-player game if the game’s result is relying on it. You constantly have to make assumptions of where the opponent’s state will be, where the opponent thinks that you are and sync that with animations on different devices. [This article](http://www.gamasutra.com/blogs/MarkMennell/20140929/226628/Making_FastPaced_Multiplayer_Networked_Games_is_Hard.php) explains these challenges in more detail. To make it a bit easier we made this game turn-based.
+
+The game logic is built on a grid-based setup with troops moving on a game board. This made it easy for us to try out the gameplay on paper as we were defining the rules. Using a grid-based setup also helps with collision detection in the game to keep a good performance since you only have to check for collisions with objects in the same or neighboring tiles.
+
+
+## Parts of the game
+
+To make this multi-player game there are a few key parts that we had to build:
+
+- A server side player management API handles users, match-making, sessions and game statistics.
+- Servers to help establishing the connection between the players.
+- An API for handling the AppEngine Channels API signaling used to connect and communicate with all the players in the game rooms.
+- A JavaScript Game engine that handles the syncing of the state and the RTC messaging between the two players/peers.
+- The WebGL game view.
+
+## Player management
+
+To support a large number of players we use many parallel game-rooms per Battleground. The main reason to limiting the number of players per game-room is to allow new players to reach the top of the leaderboard in reasonable time. The limit is also connected to the size of the json object describing the game-room sent through the Channel API that has a limit of 32kb.
+We have to store players, rooms, scores, sessions and their relationships in the game. To do this, first we used [NDB](https://cloud.google.com/appengine/docs/python/ndb/) for entities and used the query interface to deal with relationships. NDB is an interface to the Google Cloud Datastore. Using NDB worked great in the beginning but we soon ran into a problem with how we needed to use it. The query was run against the "committed" version of the database (NDB Writes is explained at great length [in this in-depth article](https://cloud.google.com/appengine/docs/python/ndb/#writes)) which can have a delay of several seconds. But the entities themselves didn't have that delay as they respond directly from the cache. It might be a bit easier to explain with some example code:
+
+```js
+// example code to explain our issue with eventual consistency
+def join_room(player_id, room_id):
+    room = Room.get_by_id(room_id)
+    
+    player = Player.get_by_id(player_id)
+    player.room = room.key
+    player.put()
+    
+    // the player Entity is updated directly in the cache
+    // so calling this will return the room key as expected
+    player.room // = Key(Room, room_id)
+
+    // Fetch all the players with room set to 'room.key'
+    players_in_room = Player.query(Player.room == room.key).fetch()
+    // = [] (an empty list of players)
+    // even though the saved player above may be expected to be in the
+    // list it may not be there because the query api is being run against the 
+    // "committed" version and may still be empty for a few seconds
+
+    return {
+        room: room,
+        players: players_in_room,
+    }
+```
+
+After adding unit tests we could see the issue clearly and we moved away from the queries to instead keep the relationships in a comma separated list in [memcache](https://cloud.google.com/appengine/docs/python/memcache/). This felt like a bit of a hack but it worked and the AppEngine memcache has a transaction-like system for the keys using the excellent “compare and set”-feature so now the tests passed again.
+
+Unfortunately memcache is not all rainbows and unicorns but comes with [a few limits](https://cloud.google.com/appengine/docs/python/memcache/#Python_Limits), the most notable ones being the 1MB value size (can’t have too many rooms related to a battleground) and key expiration, or as [the docs](https://cloud.google.com/appengine/docs/python/memcache/#Python_How_cached_data_expires) explains it:
+
+{% Aside %}
+In general, an application should not expect a cached value to always be available.
+{% endAside %}
+
+We did consider using another great key-value store, Redis. But at the time setting up a scalable cluster was a bit daunting and since we’d rather focus on building the experience than maintaining servers we didn’t go down that path. On the other hand the Google Cloud Platform recently released a simple [Click-to-deploy](https://cloud.google.com/solutions/redis/click-to-deploy) feature, with one of the options being a Redis Cluster so that would have been a very interesting option.
+
+Finally we found [Google Cloud SQL](https://cloud.google.com/appengine/docs/python/cloud-sql/) and moved the relationships into MySQL. It was a lot of work but eventually it worked great, the updates are now fully atomic and the tests still pass. It also made implementing the match-making and score-keeping a lot more reliable.
+
+Over time more of the data slowly has moved over from NDB and memcache to SQL but in general the player, battleground and room entities are still stored in NDB while the sessions and relationships between them all are stored in SQL.
+
+We also had to keep track on who was playing who and pair up players against each other using a matching mechanism that took into consideration the players skill level and experience. We based the match-making on the open-source library [Glicko2](https://github.com/sublee/glicko2).
+
+Since this is a multi-player game we want to inform the other players in the room about events like “who entered or left”, “who won or lost” and if there is a challenge to accept. To handle this we built in the ability to receive notifications into the Player Management API.
+
+## Setting up WebRTC
+
+When two players are matched up for a battle a signaling service is used to get the two matched peers talking to each other and to help start a peer connection.
+
+There are several third-party libraries you can use for the signaling service and that also simplifies setting up WebRTC. Some options are  [PeerJS](http://peerjs.com/), [SimpleWebRTC](http://simplewebrtc.com/), and [PubNub WebRTC SDK](https://github.com/pubnub/webrtc). PubNub uses a hosted server solution and for this project we wanted to host on the Google Cloud Platform. The other two libraries use node.js servers that we could have installed on Google Compute Engine but we would also have to make sure it could handle thousands of concurrent users, something we already knew the Channel API can do.
+
+One of the main advantages of using the Google Cloud Platform in this case is scaling. Scaling the resources needed for an AppEngine project is easily handled through the Google Developers Console and no extra work is needed to scale the signaling service when using  the Channels API. 
+
+There were some concerns about latency and how robust the Channels API is but we had previously used it for the CubeSlam project and it had proven to work for millions of users in that project so we decided to use it again.
+
+Since we didn’t choose to use a third-party library to help with WebRTC we had to build our own. Luckily we could re-use a lot of the work we did for the CubeSlam project. When both players have joined a session the session is set to “active”, and both players will then use that active session id to initiate the peer-to-peer connection through the Channel API. After that all communication between the two players will be handled over a [RTCDataChannel](http://www.html5rocks.com/en/tutorials/webrtc/datachannels/).
+
+We also need STUN and TURN servers to help establishing the connection and cope with NATs and firewalls. Read more in depth about setting up WebRTC in the HTML5 Rocks article [WebRTC in the real world: STUN, TURN, and signaling](http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/).
+
+The number of TURN servers used also need to be able to scale depending on the traffic. To handle this we tested the [Google Deployment manager](https://cloud.google.com/deployment-manager/overview). It allows us to dynamically deploy resources on Google Compute Engine and install TURN servers using a [template](https://gist.github.com/danielisaksson/5eb9680fb3c9e3166a33). It’s still in alpha but for our purposes it’s worked flawlessly. For TURN server we use [coturn](https://code.google.com/p/coturn), which is a very fast, efficient and seemingly reliable implementation of STUN/TURN.
+
+## The Channel API
+
+The Channel API is used to send all communication to and from the game room on the client side. Our player Management API is using the Channel API for its notifications about game events.
+
+Working with the Channels API had a few speedbumps. One example is that since the messages can come unordered we had to wrap all messages in an object and sort them. Here’s some example code on how it works:
+
+```js
+var que = [];  // [seq, packet...]
+var seq = 0;
+var rcv = -1;
+
+function send(message) {
+  var packet = JSON.stringify({
+    seq: seq++,
+    msg: message
+  });
+  channel.send(packet);
+}
+
+function recv(packet) {
+  var data = JSON.parse(packet);
+
+  if (data.seq &lt;= rcv) {
+    // ignoring message, older or already received
+  } else if (data.seq > rcv + 1) {
+    // message from the future. queue it up.
+    que.push(data.seq, packet);
+  } else {
+    // message in order! update the rcv index and emit the message
+    rcv = data.seq;
+    emit('message', data.message);
+
+    // and now that we have updated the `rcv` index we 
+    // will check the que for any other we can send
+    setTimeout(flush, 10);
+  }
+}
+
+function flush() {
+  for (var i=0; i&lt;que.length; i++) {
+    var seq = que[i];
+    var packet = que[i+1];
+    if (data.seq == rcv + 1) {
+      recv(packet);
+      return; // wait for next flush
+    }
+  }
+}
+```
+
+
+We also wanted to keep the different APIs of the site modular and separated from the hosting of the site and started up with using the [modules](https://cloud.google.com/appengine/docs/python/modules/) built into GAE. Unfortunately after getting it all to work in dev we realized that the Channel API [does not work](http://stackoverflow.com/questions/19163056/app-engine-python-modules-and-channel-service) with modules at all in production. Instead we moved to using separate GAE instances and ran into CORS problems that forced us to use an iframe [postMessage bridge](https://gist.github.com/danielisaksson/f3a1afefdfaffdb4d22f).
+
+## Game engine
+
+To make the game-engine as dynamic as possible we built the front end application using the [entity-component-system (ECS)](http://en.m.wikipedia.org/wiki/Entity_component_system) approach. When we started the development the wireframes and functional specification was not set, so it was very helpful to be able to add features and logic as the development progressed. For example, the [first prototype](http://demo.northkingdom.com/hobbit/battle/entity/) used a simple canvas-render-system to display the entities in a grid. A couple of [iterations later](http://demo.northkingdom.com/hobbit/battle/ai/), a system for collisions was added, and one for AI-controlled players. In the middle of the project we could switch to a 3d-renderer-system without changing the rest of the code. When the networking parts was up and running the ai-system could be modified to use remote commands.
+
+So the basic logic of the multiplayer is to send the configuration of the action-command to the other peer through DataChannels and let the simulation act as if it’s an AI-player. On top of that there’s logic to decide which turn it is, if the player presses pass/attack-buttons, queue commands if they come in while the player still looking at the previous animation etc.
+
+If it was just two users switching turns, both peers could share the responsibility to pass the turn to the opponent when they were done, but there is a third player involved. The AI-system became handy again (not just for testing), when we needed to add enemies like spiders and trolls. To make them fit into the turn-based flow it had to be spawned and executed exactly the same on both sides. This was solved by letting one peer control the turn-system and send the current status to the remote peer. Then when it’s the spiders turn, the turn manager let the ai-system create a command which is sent to the remote user. Since the game-engine is just acting on commands and entity-id:s the game will be simulated just the same on both sides. All units can also have the ai-component which enables easy automated testing.
+
+It was optimal to have a simpler canvas-renderer in the beginning of development while focusing on the game logic. But the real fun started when the 3d version was implemented and the scenes came to life with environments and animations. We use [three.js](http://threejs.org) as 3d-engine, and it was easy to get to a playable state because of the architecture.
+
+The mouse position is sent more frequently to the remote user and a 3d-light subtle hints about where the cursor is at the moment.
diff --git a/src/site/content/en/blog/houdini-how/index.md b/src/site/content/en/blog/houdini-how/index.md
new file mode 100644
index 00000000000..6aa77207d38
--- /dev/null
+++ b/src/site/content/en/blog/houdini-how/index.md
@@ -0,0 +1,196 @@
+---
+title: 'Cross-browser paint worklets and Houdini.how'
+subhead: 'Supercharging your CSS with Houdini paint worklets is just a few clicks away.'
+authors:
+  - una
+date: 2020-12-10
+hero: image/admin/qphHgunn2LamPL1qODh5.jpg
+alt: A sparkler.
+description: Learn how to implement cross-browser Houdini Paint API's and explore a world of Houdini worklets with Houdini.how.
+tags:
+  - blog
+  - css
+  - houdini
+---
+
+{% YouTube '5eBar5TI71M' %}
+
+CSS [Houdini](https://developer.mozilla.org/docs/Web/Houdini) is an umbrella term that
+describes a series of low-level browser APIs that give developers much more control and power over
+the styles they write.
+
+<figure>
+  {% Img src="image/admin/KgTxiRodgp6kFwHGHvqA.jpg", alt="Houdini layer", width="800", height="599" %}
+</figure>
+
+Houdini enables more semantic CSS with the [Typed Object
+Model](https://developer.mozilla.org/docs/Web/API/CSS_Typed_OM_API/Guide). Developers can
+define advanced CSS custom properties with syntax, default values, and inheritance through the
+[Properties and Values API](/at-property/).
+
+It also introduces paint, layout, and animation
+[worklets](https://developer.chrome.com/blog/animation-worklet), which open up a
+world of possibilities, by making it easier for authors to hook into the styling and layout process
+of the browser's rendering engine.
+
+## Understanding Houdini worklets
+
+Houdini worklets are browser instructions that run off the main thread and can be called when
+needed. Worklets enable you to write modular CSS to accomplish specific tasks, and require a single
+line of JavaScript to import and register. Much like service workers for CSS style, Houdini worklets
+are registered to your application, and once registered can be used in your CSS by name.
+
+Write worklet file Register worklet module (`CSS.paintWorklet.addModule(workletURL)`) Use worklet
+(`background: paint(confetti)`)
+
+## Implementing your own features with the CSS Painting API
+
+The [CSS Painting API](https://drafts.css-houdini.org/css-paint-api/) is an example of such a
+worklet (the Paint worklet), and enables developers to define canvas-like custom painting functions
+that can be used directly in CSS as backgrounds, borders, masks, and more. There is a whole world of
+possibilities for how you can use CSS Paint in your own user interfaces.
+
+For example, instead of waiting for a browser to implement an angled borders feature, you can write
+your own Paint worklet, or use an existing published worklet. Then, rather than using border-radius
+apply this worklet to borders and clipping.
+
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LNMysDPgN7nSgyT1p1Fl.mp4",
+       autoplay=true,
+    loop=true,
+    muted=true,
+    playsinline=true
+  %}
+  <figcaption>
+    The example above uses the same paint worklet with different arguments (see code below) to accomplish this result. Demo on <a href="https://glitch.com/~angled-corners">Glitch</a>.</a>
+  </figcaption>
+</figure>
+
+```css
+.angled {
+  --corner-radius: 15 0 0 0;
+  --paint-color: #6200ee;
+  --stroke-weight: 0;
+
+  /* Mask every angled button with fill mode */
+  -webkit-mask: paint(angled-corners, filled);
+}
+
+.outline {
+  --stroke-weight: 1;
+
+  /* Paint outline */
+  border-image: paint(angled-corners, outlined) 0 fill !important;
+}
+```
+
+The CSS Painting API is currently one of the best-supported Houdini APIs, its spec being a W3C
+candidate recommendation. It is currently enabled in all Chromium-based browsers, partially
+supported in Safari, and is under consideration for Firefox.
+
+<figure>
+  {% Img src="image/admin/vL8Z5YEwk2g2QJ6T6IWp.png", alt="Caniuse support", width="800", height="176" %}
+  <figcaption>The CSS Painting API is currently supported on Chromium-based browsers.</figcaption>
+</figure>
+
+But even without full browser support, you can still get creative with the Houdini Paint API and see
+your styles work across all modern browsers with the [CSS Paint
+Polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill). And to showcase a few unique
+implementations, as well as to provide a resource and worklet library, my team built
+[houdini.how](https://houdini.how).
+
+## Houdini.how
+
+<figure>
+  {% Img src="image/admin/UKenhKMvDWI9PvWGcTG4.png", alt="Worklet page screenshot.", width="800", height="833" %}
+  <figcaption>Screenshot from the <a href="https://houdini.how">Houdini.how</a> homepage.</figcaption>
+</figure>
+
+[Houdini.how](https://houdini.how) is a library and reference for Houdini worklets and resources. It
+provides everything you need to know about CSS Houdini: browser support, an
+[overview](https://houdini.how/about) of its various APIs, [usage](https://houdini.how/usage)
+information, additional [resources](https://houdini.how/resources), and live paint worklet
+[samples](https://houdini.how/). Each sample on Houdini.how is backed by the CSS Paint API, meaning
+they each work on all modern browsers. Give it a whirl!
+
+## Using Houdini
+
+Houdini worklets must either be run via a server locally, or on HTTPS in production. In order to
+work with a Houdini worklet, you will need to either install it locally or use a content delivery
+network (CDN) like [unpkg](https://unpkg.com) to serve the files. You will then need to register the
+worklet locally.
+
+There are a few ways to include the Houdini.how showcase worklets in your own web projects. They can
+either be used via a CDN in a prototyping capacity, or you can manage the worklets on your own using
+npm modules. Either way, you'll want to also include the CSS Paint Polyfill to ensure they are
+cross-browser compatible.
+
+### 1. Prototyping with a CDN
+
+When registering from unpkg, you can link directly to the worklet.js file without needing to locally
+install the worklet. Unpkg will resolve to the worklet.js as the main script, or you can specify it
+yourself. Unpkg will not cause CORS issues, as it is served over HTTPS.
+
+```html
+CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
+```
+
+Note that this does not register the custom properties for syntax and fallback values. Instead, they
+each have fallback values embedded into the worklet.
+
+To optionally register the custom properties, include the properties.js file as well.
+
+```html
+<script src="https://unpkg.com/<package-name>/properties.js"></script>
+```
+
+To include the CSS Paint Polyfill with unpkg:
+
+```html
+<script src="https://unpkg.com/css-paint-polyfill"></script>
+```
+
+### 2. Managing worklets via NPM
+
+Install your worklet from npm:
+
+```bash
+npm install <package-name>
+npm install css-paint-polyfill
+```
+
+Importing this package does not automatically inject the paint worklet. To install the worklet,
+you'll need to generate a URL that resolves to the package's worklet.js, and register that. You do
+so with:
+
+```js
+CSS.paintWorklet.addModule(..file-path/worklet.js)
+```
+
+The npm package name and link can be found on each worklet card.
+
+You will also need to include the CSS Paint Polyfill via script or import it directly, as you would
+with a framework or bundler.
+
+Here is an example of how to use Houdini with the paint polyfill in modern bundlers:
+
+```js
+import 'css-paint-polyfill';
+import '<package-name>/properties.js'; // optionally register properties
+import workletURL from 'url:<package-name>/worklet.js';
+
+CSS.paintWorklet.addModule(workletURL);
+```
+
+{% Aside 'note' %}
+For more specific instruction per-bundler, check out the [usage page](https://houdini.how/usage) on Houdini.how.
+{% endAside %}
+
+## Contribute
+
+Now that you've played around with some Houdini samples, it's your turn to contribute your own!
+Houdini.how does not host any worklets itself, and instead showcases the work of the community. If
+you have a worklet or resource you would like to submit, check out the [github
+repo](https://github.com/GoogleChromeLabs/houdini.how/blob/main/CONTRIBUTING.md) with contribution guidelines.
+We'd love to see what you come up with!
diff --git a/src/site/content/en/blog/housing/index.md b/src/site/content/en/blog/housing/index.md
new file mode 100644
index 00000000000..b38a391b7de
--- /dev/null
+++ b/src/site/content/en/blog/housing/index.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Housing.com increases conversions and lowers bounce rate by 40% with new PWA
+date: 2016-09-26
+updated: 2017-10-11
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Lfb2Xrg1c6fBFrVPigDQ.png", alt="Search result listing pace", width="544", height="1088" %}
+</figure>
+
+### Results
+
+- 38% more conversions
+- 40% lower bounce rate
+- 10% longer average session
+- 30% faster page load
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/KzT4DVFAETm4kblAcbjY.pdf)
+
+## Company
+Housing.com is one of India’s top startups. On track to receive 50 million
+visits this year, it has become one of the leading online real estate
+platforms in India. After building [Housing Go](https://housing.com/), a
+Progressive Web App (PWA), they saw a 38% increase in total conversions
+across browsers. The new PWA also delivered higher-value users, with
+visitors spending 10% longer per session and returning more often.
+
+## Challenges
+Housing.com knew their mobile users wouldn't tolerate slow load times, which
+significantly affect conversions. They measured the impact of users’ average
+page-load time and found that even a one-second improvement brought a
+significant boost in the conversion rate.
+
+Poor connectivity and the prevalence of low-end devices also hindered
+Housing.com’s growth. They developed a native app so that mobile users
+could work offline and re-engage. But current and potential customers were
+very data-sensitive, because the cost of Internet access was still high, and
+many consumers hesitated to use data or space to download the native app.
+
+## Solution
+Relying on technological advancements and the improved capabilities of modern
+web browsers and web applications such as Service Workers, IndexedDB, Add to
+Home Screen, and Push Notifications, Housing.com set out to create a PWA that
+was fast, efficient, and reliable. The result was a mobile web experience
+that is fast, uses less data, and re-engages users in multiple ways. With the
+new PWA, Housing.com saw conversion rates rise 38% and the bounce rate fall
+by over 40%.
+
+Most Indian users reach the Internet via 2G and 3G networks, so a fast user
+experience is essential. To decrease load times, Housing.com added Service
+Workers and streamlined their site to help consumers quickly find what
+they’re looking for. Users can continue browsing properties and reviewing
+previous searches, all while offline. “High-end smartphones are not that
+prevalent in our target user base,” says Vivek Jain, Housing.com CPTO.
+“With our new PWA, we could get past our users’ hesitance to download
+our app in their low-end devices, yet give them a wonderful experience.”
+
+The new strategy proved effective. Page-load performance increased by
+over 30%, and average time-per-session increased 10% across all browsers.
+“Understanding the network limitations of our users and the importance
+of a great user experience led us to build a PWA,” Jain says. “User
+experience is something that defines state-of-the-art applications.”
+
+
+## Related resources
+
+* [Service Workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
+* [Add to Home Screen](/customize-install/)
+* [Push Notifications](/notifications/)
+
+### Codelabs
+
+[Your First Progressive Web App](https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/)
+Learn how to use the app shell model, service workers and more to build a Progressive Web App.
+
+### Udacity courses
+
+[Intro to Progressive Web Apps](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811)
+In this course you’ll get started working on your very first Progressive
+Web App - a web app that can take advantage of many of the features native
+applications have enjoyed. You’ll also get more experience in creating a
+web app that works offline using Service Workers. Finally, you’ll make your
+app installable to the user’s home screen with the Web App Manifest file.
diff --git a/src/site/content/en/blog/how-mercadolibre-optimized-web-vitals/index.md b/src/site/content/en/blog/how-mercadolibre-optimized-web-vitals/index.md
new file mode 100644
index 00000000000..3cdcb78c773
--- /dev/null
+++ b/src/site/content/en/blog/how-mercadolibre-optimized-web-vitals/index.md
@@ -0,0 +1,286 @@
+---
+layout: post
+title: How Mercado Libre optimized for Web Vitals (TBT/FID)
+subhead: Optimizing interactivity of product details pages for a 90% reduction in Max Potential FID in Lighthouse and a 9% improvement in FID in Chrome User Experience Report.
+authors:
+  - demianrenzulli
+  - aranhacarlos
+  - joanbaca
+date: 2020-09-21
+updated: 2022-07-18
+hero: image/admin/YTkCg2CmNZVG1djjVnvu.jpg
+thumbnail: image/admin/dSiMshQ9MRT9zgDybdmJ.jpg
+description: Summary of the work done by Mercado Libre's frontend architecture team to optimize FID, using TBT as a proxy metric.
+tags:
+  - blog
+  - performance
+  - web-vitals
+  - case-study
+  - lighthouse
+  - chrome-ux-report
+  - javascript
+---
+
+Mercado Libre is the largest e-commerce and payments ecosystem in Latin America. It is present in 18
+countries and is a market leader in Brazil, Mexico, and Argentina (based on unique visitors and
+pageviews).
+
+Web performance has been a focus for the company for a long time, but they recently formed a team to
+monitor performance and apply optimizations across different parts of the site.
+
+This article summarizes the work done by [Guille Paz](https://twitter.com/pazguille), [Pablo
+Carminatti](https://www.linkedin.com/in/pcarminatti/), and [Oleh
+Burkhay](https://twitter.com/oburkhay) from Mercado Libre's frontend architecture team to optimize
+one of the Core Web Vitals: [First Input Delay (FID)](/fid/) and its lab proxy,
+[Total Blocking Time (TBT)](/tbt/).
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">90<sub>%</sub></p>
+    <p>Reduction in Max Potential FID in Lighthouse</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">9<sub>%</sub></p>
+    <p>More users perceiving FID as "Fast" in CrUX</p>
+  </div>
+</div>
+
+## Long tasks, First Input Delay, and Total Blocking Time
+
+Running expensive JavaScript code can lead to [long tasks](/long-tasks-devtools/),
+which are those that run for more than **50ms** in the browser's main thread.
+
+FID (First Input Delay) measures the time from when a user first interacts with a page (e.g. when
+they click on a link) to the time when the browser is actually able to begin processing event
+handlers in response to that interaction. A site that executes expensive JavaScript code will likely
+have several long tasks, which will end up negatively impacting FID.
+
+To provide a good user experience, sites should strive to have a First Input Delay of less than 100
+milliseconds:
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Good fid values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement", width="384", height="96" %}
+</picture>
+
+While Mercado Libre's site was performing well in most sections, they found in the [Chrome User
+Experience Report](https://developer.chrome.com/docs/crux/) that
+product detail pages had a poor FID. Based on that information, they decided to focus their efforts
+on improving the interactivity for product pages in the site.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gg8ohXTbFgr6Msacklt0.png", alt="Mobile and Desktop versions of a Mercado Libre product detail page.", width="800", height="346" %}
+   <figcaption>
+      Mobile and Desktop versions of a Mercado Libre product detail page.
+  </figcaption>
+</figure>
+
+These pages allow the user to perform complex interactions, so the goal was interactivity
+optimization, without interfering with valuable functionality.
+
+## Measure interactivity of product detail pages
+
+FID requires a real user and thus cannot be measured in the lab. However, the [Total Blocking Time
+(TBT)](/tbt/) metric is lab-measurable, correlates well with FID in the field, and
+also captures issues that affect interactivity.
+
+In the following trace, for example, while the **total time** spent running tasks on the main thread
+is 560 ms, only 345 ms of that time is considered **total blocking time** (the sum of the portions
+of each task that exceeds 50ms):
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/us8USZRiCh9sg1X2zEpN.svg", alt="A tasks timeline on the main thread showing blocking time", width="800", height="156", linkTo=true %}
+
+Mercado Libre took TBT as a proxy metric in the lab, in order to measure and improve the
+interactivity of product detail pages in the real world.
+
+Here's the general approach they took:
+
+- Use [WebPageTest](https://www.webpagetest.org/) to determine exactly which scripts were keeping
+  the main thread busy on a real device.
+- Use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to determine the impact of
+  the changes in [Max Potential First Input Delay (Max Potential
+  FID)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/).
+
+{% Aside %} During this project Mercado Libre used [Max Potential
+FID](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/) in Lighthouse because that was the tool's main
+metric for measuring interactivity at that time. Lighthouse now recommends using [Total Blocking
+Time](/tbt/) instead. {% endAside %}
+
+## Use WebPageTest to visualize long tasks
+
+WebPageTest (WPT) is a web performance tool that allows you to run tests on real devices in
+different locations around the world.
+
+Mercado Libre used WPT to reproduce the experience of their users by choosing a device type and
+location similar to real users. Specifically, they chose a **Moto 4G device** and **Dulles,
+Virginia**, because they wanted to approximate the experience of Mercado Libre users in Mexico. By
+observing the main thread view of WPT, Mercado Libre found that there were several consecutive long
+tasks blocking the main thread for 2 seconds:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NbVmhDK9MLvyvEBbBYAZ.png", alt="Main thread view of Mercado Libre's product detail pages.", width="800", height="188" %}
+   <figcaption>
+      Main thread view of Mercado Libre's product detail pages.
+  </figcaption>
+</figure>
+
+Analyzing the corresponding waterfall they found that a considerable part of those two seconds came
+from their analytics module. The main bundle size of the application was large (950KB) and took a
+long time to parse, compile, and execute.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7QHKOutyGzfXN52hPOOz.png", alt="Waterfall view of product detail pages.", width="800", height="363" %}
+   <figcaption>
+      Waterfall view of Mercado Libre's product detail pages.
+  </figcaption>
+</figure>
+
+## Use Lighthouse to determine Max Potential FID
+
+Lighthouse doesn't allow you to choose between different devices and locations, but it's a very
+useful tool for diagnosing sites and obtaining performance recommendations.
+
+When running Lighthouse on product detail pages, Mercado Libre found that the **Max Potential FID**
+was the only metric marked in red, with a value of **1710ms**.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rufTQY4scq1V3ghVIQPy.png", alt="Lighthouse metrics in a PSI report for Mercado Libre's product detail pages.", width="800", height="235" %}
+</figure>
+
+Based on this, Mercado Libre set a goal to improve their Max Potential FID score in a laboratory
+tool like Lighthouse and WebPageTest, under the assumption that these improvements would affect
+their real users, and therefore, show up in real user monitoring tools like the Chrome User
+Experience Report.
+
+## Optimize long tasks
+
+### First iteration
+
+Based on the main thread trace, Mercado Libre set the goal of optimizing the two modules that were
+running expensive code.
+
+They started optimizing the performance of the internal tracking module. This module contained a
+CPU-heavy task that wasn't critical for the module to work, and therefore could be safely removed.
+This led to a 2% reduction in JavaScript for the whole site.
+
+After that they started to work on **improving the general bundle size**:
+
+Mercado Libre used
+[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to detect
+opportunities for optimization:
+
+- Initially they were requiring the full [Lodash module](https://lodash.com/). This was replaced
+  with a [per-method require](https://lodash.com/per-method-packages) to load only a subset of
+  Lodash instead of the whole library, and used in conjunction with
+  [lodash-webpack-plugin](https://github.com/lodash/lodash-webpack-plugin) to shrink Lodash even
+  further.
+
+They also applied the following [Babel](https://babeljs.io/) optimizations:
+
+- Using [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime)
+  to reuse Babel's helpers throughout the code, and reduce the size of the bundle considerably.
+- Using
+  [babel-plugin-search-and-replace](https://github.com/jean-smaug/babel-plugin-search-and-replace#readme)
+  to replace tokens at build time, in order to remove a large configuration file inside the main
+  bundle.
+- Adding
+  [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#readme)
+  to save some extra bytes by removing the prop types.
+
+As a result of these optimizations, the bundle size was reduced **by approximately 16%**.
+
+## Measure impact
+
+The changes lowered Mercado Libre's consecutive long tasks **from two seconds to one second**:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/17At96aKcPrvNTWgb3FU.png", alt="Main thread view of Mercado Libre's product detail pages after first round of optimizations.", width="800", height="315" %}
+   <figcaption>
+      In the top waterfall of WPT there’s a long red bar (in the <b>Page is Interactive</b> row) between seconds 3 and 5. In the bottom waterfall, the bar has been broken into smaller pieces, occupying the main thread for shorter periods of time.
+  </figcaption>
+</figure>
+
+Lighthouse showed a **57% reduction** in Max Potential First Input Delay:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Sxa1wKCXVfsHZNbfQ1ZZ.png", alt="Lighthouse metrics in a PSI report for Mercado Libre's product detail pages after first round of optimizations.", width="800", height="252" %}
+</figure>
+
+## Second iteration
+
+The team continued digging into long tasks in order to find subsequent improvements.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tlMIQRWDAeEY7UV4cFQo.png", alt="Detailed view of main thread view of Mercado Libre's product detail pages after first round of optimizations.", width="800", height="259" %}
+   <figcaption>
+      The Waterfall (not pictured) helped Mercado Libre identify which libraries were using the main thread heavily (<b>Browser Main Thread</b> row) and the <b>Page is Interactive</b> row clearly shows that this main thread activity is blocking interactivity.
+  </figcaption>
+</figure>
+
+Based on that information they decided to implement the following changes:
+
+- Continue reducing the main bundle size to optimize compile and parse time (e.g. by removing
+  duplicate dependencies throughout the different modules).
+- Apply [code splitting](/reduce-javascript-payloads-with-code-splitting/) at
+  component level, to divide JavaScript in smaller chunks and allow for smarter loading of the
+  different components.
+- Defer [component
+  hydration](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#rehydration) to
+  allow for a smarter use of the main thread. This technique is commonly referred to as [partial
+  hydration](https://addyosmani.com/blog/rehydration/).
+
+## Measure impact
+
+The resulting WebPageTest trace showed even smaller chunks of JS execution:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gAvo2VXimablQ8OhFDdn.png", alt="Main thread view of Mercado Libre's product detail pages after secoond round of optimizations.", width="800", height="150" %}
+</figure>
+
+And their Max Potential FID time in Lighthouse was reduced **by an additional 60%**:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7W672LOor2SgqZsmK3BL.png", alt="Lighthouse metrics in a PSI report for Mercado Libre's product detail pages after first round of optimizations.", width="800", height="345" %}
+</figure>
+
+## Visualize progress for real users
+
+While laboratory testing tools like WebPageTest and Lighthouse are great for iterating on solutions
+during development, the true goal is to improve the experience for real users.
+
+The [Chrome User Experience
+Report](https://developer.chrome.com/docs/crux/) provides user
+experience metrics for how real-world Chrome users experience popular destinations on the web. The
+data from the report can be obtained by [running queries in
+BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery/),
+[PageSpeedInsights](https://pagespeed.web.dev/), or the [CrUX
+API](https://developer.chrome.com/blog/chrome-ux-report-api/).
+
+The [CrUX
+dashboard](https://datastudio.google.com/c/datasources/create?connectorId=AKfycbxk7u2UtsqzgaA7I0bvkaJbBPannEx0_zmeCsGh9bBZy7wFMLrQ8x24WxpBzk_ln2i7)
+is an easy way to visualize the progress of core metrics:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3bUj9l2ISMr3mojaUG4o.png", alt=".", width="800", height="163" %}
+    <figcaption>
+      Mercado Libre's FID progress between Jan 2020 and April 2020. Before the optimization project, 82% of the users were perceiving FID as fast (below 100ms). After, more than 91% of the users were perceiving the metric as fast.
+    </figcaption>
+</figure>
+
+## Next steps
+
+Web performance is never a finished task, and Mercado Libre understands the value these
+optimizations bring to their users. While they continue applying several optimizations across the
+site, including [prefetching](/instant-navigation-experiences/#production-cases) in
+product listing pages, image optimizations, and others, they continue adding improvements to product
+listing pages to reduce Total Blocking Time (TBT), and by proxy FID, even more. These optimizations
+include:
+
+- Iterating on the code splitting solution.
+- Improving the execution of third-party scripts.
+- Continuing improvements in asset bundling at the bundler level
+  ([webpack](https://webpack.js.org/)).
+
+Mercado Libre has a holistic view of performance, so while they continue optimizing interactivity in
+the site, they have also started assessing opportunities for improvement on the other two current
+[Core Web Vitals](/vitals/): [LCP (Largest Contentful Paint)](/lcp/)
+and [CLS (Cumulative Layout Shift)](/cls/) even more.
diff --git a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/anchor.png b/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/anchor.png
deleted file mode 100644
index d8c9033306a..00000000000
Binary files a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/anchor.png and /dev/null differ
diff --git a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/index.md b/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/index.md
index 85f77d53bef..e45a550e63e 100644
--- a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/index.md
+++ b/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/index.md
@@ -1,18 +1,20 @@
 ---
 layout: post
-title: How to distribute Signed HTTP Exchanges (SXG)
-subhead: How to get and serve SXG files, and the challenges of subresource prefetching.
+title: How to distribute Signed HTTP Exchanges (SXG) using nginx
+subhead: How to get and serve SXG files using nginx, and the challenges of subresource prefetching.
 authors:
   - kumagi
 date: 2020-03-11
-description: How to get and serve SXG files, and the challenges of subresource prefetching.
+description: How to get and serve SXG files using nginx, and the challenges of subresource prefetching.
 tags:
   - blog
-  - SXG
-  - nginx
+  # - SXG
+  # - nginx
+feedback:
+  - api
 ---
 
-As a [Signed HTTP Exchanges (SXG)](https://developers.google.com/web/updates/2018/11/signed-exchanges) distributor, you can deliver SXG files on behalf of the original content creators. Web browsers that support SXG will display such SXG files as if they were delivered from the original content creators. This enables you to implement cross-site preloading without violating privacy. This guide shows you how to distribute SXG properly.
+As a [Signed HTTP Exchanges (SXG)](https://developer.chrome.com/blog/signed-exchanges) distributor, you can deliver SXG files on behalf of the original content creators. Web browsers that support SXG will display such SXG files as if they were delivered from the original content creators. This enables you to implement cross-site preloading without violating privacy. This guide shows you how to distribute SXG properly.
 
 ## Cross-browser support
 
@@ -75,20 +77,20 @@ For example, suppose `index.html.sxg` from `https://website.test/index.html` has
 The browser can fetch `https://website.test/app.js` directly on actual access, but it should not be done in the preload phase to preserve privacy.
 If the resource was fetched during the preload phase, it would be possible for the content creator (`website.test`) to be able to detect which content distributor (`distributor.test`) is requesting the resource.
 
-![The link to app.js in distributor.test/index.html.sxg points to website.test/app.js.](linking.png)
+{% Img src="image/admin/1wbVnJkocJ9cv3lR2wZv.png", alt="The link to app.js in distributor.test/index.html.sxg points to website.test/app.js.", width="800", height="214" %}
 
 If the distributor wants to serve `app.js.sxg` from their own service and tries to modify `https://website.test/app.js` to be the distributor's version of that subresource (such as `https://distributor.test/website.test/app.js.sxg`), it will cause a signature mismatch and make the SXG invalid.
 
-![An attempt to link the reference to app.js in distributor.test/index.html.sxg to distributor.test/app.js causes a signature mismatch.](rewritten.png)
+{% Img src="image/admin/IRRFoXyhnmwVXwiDgeny.png", alt="An attempt to link the reference to app.js in distributor.test/index.html.sxg to distributor.test/app.js causes a signature mismatch.", width="592", height="258" %}
 
 To solve this problem, there's an experimental SXG subresource prefetching feature in Chrome now.
-You can enable it at: `chrome://flags/#enable-sxg-subresource-prefetching`.
+You can enable it at: `about://flags/#enable-sxg-subresource-prefetching`.
 To use subresource prefetching the following conditions must be met:
 
 - The publisher must embed a response header entry in SXG, such as: `link: <https://website.test/app.js>;rel="preload";as="script",<https://website.test/app.js>;rel="allowed-alt-sxg";header-integrity="sha256-h6GuCtTXe2nITIHHpJM+xCxcKrYDpOFcIXjihE4asxk="`. This specifies the subresource that can be substituted with the SXG's specific integrity hash.
 - The distributor must attach a response header when serving the SXG, such as: `link: <https://distributor.test/website.test/app.js.sxg>;rel="alternate";type="application/signed-exchange;v=b3";anchor="https://website.test/app.js"`. This specifies the path of `app.js` and corresponds to the subresource.
 
-![anchor](anchor.png)
+{% Img src="image/admin/zsSl4DBys5jv8i5bQ6AT.png", alt="anchor", width="800", height="244" %}
 
 The first one is relatively easy because [`nginx-sxg-module`](https://github.com/google/nginx-sxg-module) can calculate integrity hashes and embed them into link headers from upstream responses. But the second one is more difficult because the content distributor must be aware of the specified subresources in the SXG.
 
diff --git a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/linking.png b/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/linking.png
deleted file mode 100644
index ae34aac3af1..00000000000
Binary files a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/linking.png and /dev/null differ
diff --git a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/rewritten.png b/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/rewritten.png
deleted file mode 100644
index 6e5ef85a735..00000000000
Binary files a/src/site/content/en/blog/how-to-distribute-signed-http-exchanges/rewritten.png and /dev/null differ
diff --git a/src/site/content/en/blog/how-to-file-a-good-bug/index.md b/src/site/content/en/blog/how-to-file-a-good-bug/index.md
index 3f2f260a2d1..fc7d9ca5000 100644
--- a/src/site/content/en/blog/how-to-file-a-good-bug/index.md
+++ b/src/site/content/en/blog/how-to-file-a-good-bug/index.md
@@ -8,7 +8,7 @@ authors:
   - robertnyman
   - petelepage
 date: 2020-06-15
-updated: 2020-06-15
+updated: 2022-02-22
 description: |
   Telling browser vendors about issues you find in their browser,
   on a specific device or platform is an integral part of making
@@ -41,7 +41,7 @@ Edge, possibly using a tool like [BrowserStack](https://www.browserstack.com/).
 
 If possible, check that the page isn't intentionally behaving differently due to
 user agent sniffing. In Chrome DevTools, try [setting the `User-Agent` string
-to another browser](https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent).
+to another browser](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/).
 
 ### Did it break in a recent release?
 
@@ -49,7 +49,8 @@ Did this work as expected in the past, but broke in a recent browser release?
 Such "regressions" can be acted upon much quicker, especially if you supply a
 version number where it worked and a version where it failed. Tools like
 [BrowserStack](https://www.browserstack.com/) can make it easy to check old
-browser versions.
+browser versions and the [bisect-builds tool](https://www.chromium.org/developers/bisect-builds-py)
+(for Chromium) allows searching for the change very efficiently.
 
 If an issue is a regression and can be reproduced, the root cause can usually be
 found and fixed quickly.
@@ -96,8 +97,8 @@ bug getting fixed.
 
 Here are a few tips for minimizing a test case:
 
-* Download the web page, add 
-  [`<base href="https://original.url">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
+* Download the web page, add
+  [`<base href="https://original.url">`](https://developer.mozilla.org/docs/Web/HTML/Element/base)
   and verify that the bug exists locally. This may require a live HTTPS server if the
   URL uses HTTPS.
 * Test the local files on the latest builds of as many browsers as you can.
@@ -151,20 +152,20 @@ What steps will reproduce the problem?
 3. Click Install on the browser modal install confirmation.
 ```
 
-And finally, describe the *actual*, and *expected* result.
+And finally, describe the *expected*, and *actual* result.
 
 ```text
-What is the actual result? In the console:
-0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
-1. INSTALL: Success (logged when `appinstalled` event fired)
-2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
-   (logged when beforeinstallprompt.prompt()` resolves)
-
 What is the expected result? In the console:
 0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
 1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
    (logged when beforeinstallprompt.prompt()` resolves)
 2. INSTALL: Success (logged when `appinstalled` event fired)
+
+What is the actual result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL: Success (logged when `appinstalled` event fired)
+2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
 ```
 
 For more information, check out [Bug report writing guidelines][mdn-bug-report]
@@ -193,5 +194,5 @@ reproducing the issue, they may reach out.
 [cr-bug]: https://crbug.com/
 [moz-bug]: https://bugzilla.mozilla.org/
 [wk-bug]: https://bugs.webkit.org/
-[mdn-bug-report]: https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines
-[mdn-reduced-testcase]: https://developer.mozilla.org/en-US/docs/Mozilla/QA/Reducing_testcases
+[mdn-bug-report]: https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines
+[mdn-reduced-testcase]: https://developer.mozilla.org/docs/Mozilla/QA/Reducing_testcases
diff --git a/src/site/content/en/blog/how-to-review/index.md b/src/site/content/en/blog/how-to-review/index.md
new file mode 100644
index 00000000000..bcd176588e7
--- /dev/null
+++ b/src/site/content/en/blog/how-to-review/index.md
@@ -0,0 +1,300 @@
+---
+layout: post
+title: How To Do an Accessibility Review
+subhead: How to review your site for accessibility issues.
+description: |
+  How to review your site for accessibility issues.
+authors:
+  - robdodson
+date: 2017-03-12
+updated: 2018-09-20
+---
+
+{% YouTube id="cOmehxAU_4s" %}
+
+Determining if your web site or application is accessible can seem like an
+overwhelming task. If you are approaching accessibility for the first time, the
+sheer breadth of the topic can leave you wondering where to start - after all,
+working to accommodate a diverse range of abilities means there are a
+correspondingly diverse range of issues to consider.
+
+In this post, I'm going to break down these issues into a logical, step by step
+process for reviewing an existing site for accessibility.
+
+
+## Start with the keyboard
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VTpzSPKYo1nyBxd0aR8n.svg", alt="Keyboard icon.", width="24", height="24", class="float-right" %}
+</figure>
+
+For users who either cannot or choose not to use a mouse, keyboard navigation is
+their primary means of reaching everything on screen. This audience includes
+users with motor impairments, such as Repetitive Stress Injury (RSI) or
+paralysis, as well as screen reader users. For a good keyboarding experience
+aim to have a logical tab order and easily discernable focus styles.
+
+### Key points
+
+- Start by tabbing through your site. The order in which elements are focused
+should aim to follow the DOM order. If you’re unsure which elements should
+receive focus, see [Focus
+Fundamentals](/focus/)
+for a refresher. The general rule of thumb is that any control a user can
+interact with or provide input to should aim to be focusable and display a focus
+indicator (e.g., a focus ring). It’s common practice to disable focus styles
+without providing an alternative by using `outline: none` in CSS, but this is an
+anti-pattern. If a keyboard user can’t see what’s focused, they have no way of
+interacting with the page. If you need to differentiate between mouse and
+keyboard focus for styling, consider adding a library like
+[what-input](https://github.com/ten1seven/what-input).
+
+- Custom interactive controls should aim to be focusable. If you use JavaScript
+to turn a `<div>` into a fancy dropdown, it will not automatically be inserted
+into the tab order. To make a custom control focusable, give it a
+`tabindex="0"`.
+
+- Avoid controls with a `tabindex` > 0. These controls will jump ahead of
+everything else in the tab order, regardless of their position in the DOM. This
+can be confusing for screen reader users as they tend to navigate the DOM in a
+linear fashion.
+
+- Non-interactive content (e.g., headings) should avoid being focusable.
+Sometimes developers add a `tabindex` to headings because they think they’re
+important. This is also an anti-pattern because it makes keyboard users who can
+see the screen less efficient. For screen reader users, the screen reader will
+already announce these headings, so there’s no need to make them focusable.
+
+- If new content is added to the page, try to make sure that the user’s focus is
+directed to that content so they can take action on it. See [Managing Focus at
+the Page
+Level](/using-tabindex/#managing-focus-at-the-page-level)
+for examples.
+
+- Beware of completely trapping focus at any point. Watch out for autocomplete
+widgets, where keyboard focus may get stuck. Focus can be temporarily trapped in
+specific situations, such as displaying a modal, when you don't want the user
+interacting with the rest of the page - but you should aim to provide a
+keyboard-accessible method of escaping the modal as well. See the guide on
+[Modals and Keyboard
+Traps](/using-tabindex/#modals-and-keyboard-traps)
+for an example.
+
+### Just because something is focusable doesn’t mean it’s usable
+
+If you’ve built a custom control, then aim for a user to be able to reach _all_
+of its functionality using only the keyboard. See [Managing Focus In
+Components](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex#managing_focus_in_components)
+for techniques on improving keyboard access.
+
+### Don’t forget offscreen content
+
+Many sites have offscreen content that is present in the DOM but not visible,
+for example, links inside a responsive drawer menu or a button inside a modal
+window that has yet to be displayed. Leaving these elements in the DOM can lead
+to a confusing keyboarding experience, especially for screen readers which will
+announce the offscreen content as if it’s part of the page. See [Handling
+Offscreen
+Content](/dom-order-matters/#offscreen-content)
+for tips on how to deal with these elements.
+
+## Try it with a screen reader
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/whIpvsv1QBgp1YfGIrwy.svg", alt="speaker notes icon", width="24", height="24", class="float-right" %}
+</figure>
+
+Improving general keyboard support lays some groundwork for the next step, which
+is to check the page for proper labeling and semantics and any obstructions to
+screen reader navigation. If you’re unfamiliar with how semantic markup gets
+interpreted by assistive technology, see the [Introduction to
+Semantics](/semantics-builtin/)
+for a refresher.
+
+### Key points
+
+- Check all images for proper `alt` text. The exception to this practice is when
+images are primarily for presentation purposes and are not essential pieces of
+content. To signify that an image should be skipped by a screen reader, set the
+value of the `alt` attribute to an empty string, e.g., `alt=""`.
+
+- Check all controls for a label. For custom controls this may require the use
+of `aria-label` or `aria-labelledby`. See [ARIA Labels and
+Relationships](/aria-labels-and-relationships/)
+for examples.
+
+- Check all custom controls for an appropriate `role` and any required ARIA
+attributes that confer their state. For example, a custom checkbox will need a
+`role="checkbox"` and `aria-checked="true|false"` to properly convey its state.
+See the [Introduction to
+ARIA](/semantics-aria/)
+for a general overview of how ARIA can provide missing semantics for custom
+controls.
+
+- The flow of information should make sense. Because screen readers navigate the
+page in DOM order, if you’ve used CSS to visually reposition elements, they may
+be announced in a nonsensical sequence. If you need something to appear earlier
+in the page, try to physically move it earlier in the DOM.
+
+- Aim to support a screen reader’s navigation to all content on the page. Avoid
+letting any sections of the site be permanently hidden or blocked from screen
+reader access.
+
+- If content _should_ be hidden from a screen reader, for instance, if it’s
+offscreen or just presentational, make sure that content is set to
+`aria-hidden="true"`. Take a look at the guide on [Hiding
+content](/hiding-and-updating-content/#aria-hidden)
+for further explanation.
+
+### Familiarity with even one screen reader goes a long way
+
+Though it might seem daunting to learn a screen reader, they’re actually pretty
+easy to pick up. In general, most developers can get by with just a few simple
+key commands.
+
+If you’re on a Mac check out [this video on using
+VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6),
+the screen reader that comes with Mac OS. If you’re on a PC check out [this
+video on using
+NVDA](https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=4),
+a donation supported, open source screen reader for Windows.
+
+### `aria-hidden` does not prevent keyboard focus
+
+It’s important to understand that ARIA can only affect the _semantics_ of an
+element; it has no effect on the _behavior_ of the element. While you can make
+an element hidden to screen readers with `aria-hidden="true"`, that does not
+change the focus behavior for that element. For offscreen interactive content,
+you will often need to combine `aria-hidden="true"` and `tabindex="-1"` to make
+sure it’s truly removed from the keyboard flow. The proposed [inert
+attribute](https://github.com/WICG/inert) aims to make this easier by combining
+the behavior of both attributes.
+
+## Interactive elements like links and buttons should indicate their purpose and state
+
+Providing visual hints about what a control will do helps people operate and navigate
+your site. These hints are called affordances. Providing affordances makes it possible
+for people to use your site on a wide variety of devices.
+
+### Key points
+
+- Interactive elements, like links and buttons, should be distinguishable from
+  non-interactive elements. It is difficult for users to navigate a site or app
+  when they cannot tell if an element is clickable. There are many valid methods to
+  accomplish this goal. One common practice is underlining links to differentiate them
+  from their surrounding text.
+
+- Similar to the focus requirement, interactive elements like links and buttons require
+  a hover state for mouse users so they know if they are hovering over something clickable.
+  However, the interactive element still must be distinguishable on its own. Relying on a
+  hover state alone to indicate clickable elements does not help touch screen devices.
+
+## Take advantage of headings and landmarks
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IXa3zFYhxyfzaNYn7ism.svg", alt="map icon", width="24", height="24", class="float-right" %}
+</figure>
+
+Headings and landmark elements imbue your page with semantic structure, and
+greatly increase the navigating efficiency of assistive technology users. Many
+screen reader users report that, when they first land on an unfamiliar page,
+they typically try to [navigate by
+headings](http://www.heydonworks.com/article/responses-to-the-screen-reader-strategy-survey).
+Similarly, screen readers also offer the ability to jump to important landmarks
+like `<main>` and `<nav>`. For these reasons it’s important to consider how the
+structure of your page can be used to guide the user’s experience.
+
+### Key points
+
+- Make proper use of `h1-h6` hierarchy. Think of headings as tools to create an
+outline for your page. Don’t rely on the built-in styling of headings; instead,
+consider all headings as if they were the same size and use the semantically
+appropriate level for primary, secondary, and tertiary content. Then use CSS to
+make the headings match your design.
+
+- Use landmark elements and roles so users can bypass repetitive content. Many
+assistive technologies provide shortcuts to jump to specific parts of the page,
+such as those defined by `<main>` or `<nav>` elements. These elements have
+implicit landmark roles. You can also use the ARIA `role` attribute to
+explicitly define regions on the page, e.g., `<div role="search">`. See [the
+guide on headings and
+landmarks](/navigating-content/)
+for more examples.
+
+- Avoid `role="application"` unless you have prior experience working with it.
+The `application` landmark role will tell assistive technology to disable its
+shortcuts and pass through all key presses to the page. This means that the keys
+screen reader users typically use to move around the page will no longer work,
+and you will need to implement _all_ keyboard handling yourself.
+
+### Quickly review headings and landmarks with a screen reader
+
+Screen readers like VoiceOver and NVDA provide a context menu for skipping to
+important regions on the page. If you’re doing an accessibility check, you can
+use these menus to get a quick overview of the page and determine if heading
+levels are appropriate and which landmarks are in use. To learn more check out
+these instructional videos on the basics of
+[VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&index=6&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
+and
+[NVDA](https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=4).
+
+## Automate the process
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xZuiMwQPghjN1XUilhn2.svg", alt="wrench icon", width="24", height="24", class="float-right" %}
+</figure>
+
+Manually testing a site for accessibility can be tedious and error prone.
+Eventually you’ll want to automate the process as much as possible. This can be
+done through the use of browser extensions, and command line accessibility test
+suites.
+
+### Key points
+
+- Does the page pass all the tests from either the
+[aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
+or
+[WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
+browser extensions? These extensions are just two available options and can be a
+useful addition to any manual test process as they can quickly pick up on subtle
+issues like failing contrast ratios and missing ARIA attributes. If you prefer
+to do things from the command line,
+[axe-cli](https://github.com/dequelabs/axe-cli) provides the same functionality
+as the aXe browser extension, but can be easily run from your terminal.
+
+- To avoid regressions, especially in a continuous integration environment,
+incorporate a library like [axe-core](https://github.com/dequelabs/axe-core)
+into your automated test suite. axe-core is the same engine that powers the aXe
+chrome extension, but in an easy-to-run command line utility.
+
+- If you’re using a framework or library, does it provide its own accessibility
+tools? Some examples include
+[protractor-accessibility-plugin](https://github.com/angular/protractor-accessibility-plugin/)
+for Angular, and
+[a11ysuite](https://github.com/Polymer/web-component-tester#a11ysuite) for
+Polymer and Web Components. Take advantage of available tools whenever possible
+to avoid reinventing the wheel.
+
+### If you’re building a Progressive Web App consider giving Lighthouse a shot
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RDyW10Rdfl0xyMiaBUzB.png", alt="Lighthouse logo.", width="260", height="146", class="float-right" %}
+</figure>
+
+Lighthouse is a tool to help measure the performance of your progressive web
+app, but it also uses the axe-core library to power a set of accessibility
+tests. If you’re already using Lighthouse, keep an eye out for failing
+accessibility tests in your report. Fixing these will help improve the overall
+user experience of your site.
+
+## Wrapping Up
+
+Making accessibility reviews a regular part of your team process, and doing
+these checks early and often, can help improve the overall experience of using
+your site. Remember, good accessibility equals good UX!
+
+### Additional Resources
+
+- [Web Accessibility by Google](https://bit.ly/web-a11y)
+- [Accessibility Fundamentals](/accessibility/)
+- [A11ycasts](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
diff --git a/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/index.md b/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/index.md
index 8df47eee203..c877eb229cc 100644
--- a/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/index.md
+++ b/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/index.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: How to set up Signed HTTP Exchanges (SXG)
+title: How to set up Signed HTTP Exchanges (SXG) using nginx
 subhead: How to generate a TLS certificate with SXG extensions, install tools for generating SXG files, and configure nginx to serve SXG files.
 authors:
   - kumagi
@@ -8,11 +8,13 @@ description: How to generate a TLS certificate with SXG extensions, install tool
 date: 2020-03-11
 tags:
   - blog
-  - SXG
-  - nginx
+  # - SXG
+  # - nginx
+feedback:
+  - api
 ---
 
-[Signed HTTP Exchanges (SXG)](https://developers.google.com/web/updates/2018/11/signed-exchanges) is a new web technology that makes it easier for users to tell content creators apart from content distributors. This guide shows you how to set up SXG.
+[Signed HTTP Exchanges (SXG)](https://developer.chrome.com/blog/signed-exchanges/) is a new web technology that makes it easier for users to tell content creators apart from content distributors. This guide shows you how to set up SXG.
 
 ## Cross-browser support
 
@@ -70,9 +72,9 @@ Make sure that:
 - The **Include the CanSignHttpExchanges extension in the certificate** checkbox is enabled,
   which is found under Additional Certificate Options.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="sxg-check.png"/>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kFWTZFXNvwkHnwRu7y8Q.png", alt="", width="718", height="133" %}
+  <figcaption>
     The <b>Include the CanSignHttpExchanges extension in the certificate</b> checkbox.
   </figcaption>
 </figure>
@@ -85,7 +87,7 @@ This guide assumes that the filename of the certificate you got from DigiCert is
 The SXG format is complex and hard to generate without using tools.
 You can use one of the following options to generate SXG:
 
-- The [gen-signedexchange](https://github.com/WICG/webpackage/tree/master/go/signedexchange) tool written in Go.
+- The [gen-signedexchange](https://github.com/WICG/webpackage/tree/main/go/signedexchange) tool written in Go.
 - The [`libsxg` library](https://github.com/google/libsxg) written in C.
 
 This guide uses `libsxg`.
@@ -117,15 +119,16 @@ sudo make install
 ```
 
 ## Step 3: Install `nginx` plugin
+
 The `nginx` plugin allows you to generate SXG dynamically instead of statically generating them prior to serving.
 
 ### Option 1: Install the plugin from a Debian package {: #step-3-option-1 }
 
-The [SXG module for `nginx`](https://github.com/kumagi/nginx-sxg-module) is distributed on GitHub.
+The [SXG module for `nginx`](https://github.com/google/nginx-sxg-module) is distributed on GitHub.
 On Debian-based systems, you can install it as a binary package:
 
 ```bash
-sudo apt install -y nginx
+sudo apt install -y nginx=1.15.9-0
 wget https://github.com/google/nginx-sxg-module/releases/download/v0.1/libnginx-mod-http-sxg-filter_1.15.9-0ubuntu1.1_amd64.deb
 sudo dpkg -i libnginx-mod-http-sxg-filter_1.15.9-0ubuntu1.1_amd64.deb
 ```
@@ -152,6 +155,7 @@ This guide assumes that you install it to `/opt/nginx`.
 ## Step 4: Configure the `nginx` plugin to work with SXG
 
 ### Option 1: Configure an installed-from-Debian `nginx` module
+
 Follow these instructions if you used [Step 3, Option 1](#step-3-option-1) earlier.
 
 Delivering SXG content requires HTTPS. You can get an SSL/TLS certificate from DigiCert, Let's Encrypt, and other services. Note that you CANNOT use an SXG certificate for SSL or vice versa, therefore you will need two certificates. The configuration file in `/etc/nginx/nginx.conf` should look similar to the following, assuming that you put the SSL key/certificate pair in `/path/to/ssl/` and the SXG key/certificate pair in `/path/to/sxg/`:
@@ -263,7 +267,7 @@ server {
 
 ## Step 6: Test
 
-Use the [dump-signedexchange tool](https://github.com/WICG/webpackage/tree/master/go/signedexchange)
+Use the [dump-signedexchange tool](https://github.com/WICG/webpackage/tree/main/go/signedexchange)
 to test that the SXGs being served are correct, ensure that no errors are reported, and verify that the headers
 and body are as expected.
 
diff --git a/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/sxg-check.png b/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/sxg-check.png
deleted file mode 100644
index 5e77bb83a23..00000000000
Binary files a/src/site/content/en/blog/how-to-set-up-signed-http-exchanges/sxg-check.png and /dev/null differ
diff --git a/src/site/content/en/blog/how-to-use-local-https/index.md b/src/site/content/en/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..748d19b7c83
--- /dev/null
+++ b/src/site/content/en/blog/how-to-use-local-https/index.md
@@ -0,0 +1,316 @@
+---
+title: How to use HTTPS for local development
+subhead: Sometimes, you need to run your local development site with HTTPS. Tools and tips to do this safely and quickly.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %}
+Most of the time, `http://localhost` does what you need: in browsers, it mostly behaves like HTTPS 🔒. That's why some APIs that won't work on a deployed HTTP site, will work on `http://localhost`.
+
+What this means is that you need to use HTTPS locally **only in special cases** (see [When to use HTTPS for local development](/when-to-use-local-https)), like custom hostnames or Secure cookies across browsers. Keep reading if that's you!
+{% endAside %}
+
+_In this post, statements about `localhost` are valid for `127.0.0.1` and `[::1]` as well, since they both describe the local computer address, also called "loopback address". Also, to keep things simple, the port number isn't specified._
+_So when you see `http://localhost`, read it as `http://localhost:{PORT}` or `http://127.0.0.1:{PORT}`._
+
+If your production website uses HTTPS, you want your local development site to behave **like an
+HTTPS site** (if your production website doesn't use HTTPS, [make it a priority to switch to HTTPS](/why-https-matters/)).
+Most of the time, you can trust `http://localhost` to behave **like an HTTPS site**. But [in some
+cases](/when-to-use-local-https), you need to run your site locally with HTTPS. Let's take a look
+at how to do this.
+
+**⏩ Are you looking for quick instructions, or have you been here before?
+Skip to the [Cheatsheet](#using-mkcert-cheatsheet).**
+
+## Running your site locally with HTTPS using mkcert (recommended)
+
+To use HTTPS with your local development site and access `https://localhost` or
+`https://mysite.example` (custom hostname), you need a [TLS
+certificate](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate). But
+browsers won't consider just any certificate valid: your certificate needs to be **signed** by an entity that
+is trusted by your browser, called a trusted **[certificate authority (CA)](https://en.wikipedia.org/wiki/Certificate_authority)**.
+
+What you need to do is to create a certificate and sign it with a CA that is **trusted locally** by your device
+and browser. [mkcert](https://github.com/FiloSottile/mkcert) is a tool that helps you do this in a few commands. Here's how it works:
+
+- If you open your locally running site in your browser using HTTPS, your browser will
+  check the certificate of your local development server.
+- Upon seeing that the certificate has been signed by the mkcert-generated certificate
+  authority, the browser checks whether it's registered as a trusted certificate authority.
+- mkcert is listed as a trusted authority, so your browser trusts the
+  certificate and creates an HTTPS connection.
+
+<figure>
+  {% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="A diagram of how mkcert works.", width="800", height="787" %}
+  <figcaption>A diagram of how mkcert works.</figcaption>
+</figure>
+
+mkcert (and similar tools) provide several benefits:
+
+- mkcert is specialized in creating certificates that are **compliant with what browsers consider
+  valid certificates**. It stays updated to match requirements and best practices. This is why you
+  won't have to run mkcert commands with complex configurations or arguments to generate the right
+  certificates!
+- mkcert is a cross-platform tool. Anyone on your team can use it.
+
+mkcert is the tool we recommend for creating a TLS certificate for local development. You can check out [other options](#running-your-site-locally-with-https-other-options) too.
+
+Many operating systems may include libraries to produce certificates, such as [openssl](https://www.openssl.org/). Unlike mkcert
+and similar tools, such libraries may not consistently produce correct certificates, may require
+complex commands to be run, and are not necessarily cross-platform.
+
+{% Aside 'gotchas' %}
+The mkcert we're interested in in this post is [this one](https://github.com/FiloSottile/mkcert), not [this one](https://www.npmjs.com/package/mkcert).
+{% endAside %}
+
+### Caution
+
+{% Aside 'caution' %}
+
+- Never export or share the file `rootCA-key.pem` mkcert creates automatically when you run `mkcert -install`. **An attacker getting hold of this file can create on-path attacks for any site you may be visiting**. They could intercept secure requests from your machine to any site—your bank, healthcare provider, or social networks. If you need to know where `rootCA-key.pem` is located to make sure it's safe, run `mkcert -CAROOT`.
+- Only use mkcert for **development purposes**—and by extension, never ask end-users to run mkcert commands.
+- Development teams: all members of your team should install and run mkcert **separately** (not store and share the CA and certificate).
+
+{% endAside %}
+
+### Setup
+
+1.  Install mkcert (only once).
+
+    Follow the [instructions](https://github.com/FiloSottile/mkcert#installation) for installing mkcert on your operating system.
+    For example, on macOS:
+
+    ```bash
+    brew install mkcert
+    brew install nss # if you use Firefox
+    ```
+
+1.  Add mkcert to your local root CAs.
+
+    In your terminal, run the following command:
+
+    ```bash
+    mkcert -install
+    ```
+
+    This generates a local certificate authority (CA).
+    Your mkcert-generated local CA is only trusted **locally**, on your device.
+
+1.  Generate a certificate for your site, signed by mkcert.
+
+    In your terminal, navigate to your site's root directory or whichever directory you'd like the certificates to be located at.
+
+    Then, run:
+
+    ```bash
+    mkcert localhost
+    ```
+
+    If you're using a custom hostname like `mysite.example`, run:
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    The command above does two things:
+
+    - Generates a certificate for the hostname you've specified
+    - Lets mkcert (that you've added as a local CA in Step 2) sign this certificate.
+
+    Now, your certificate is ready and signed by a certificate authority your browser trusts locally. You're almost done, but your server doesn't know about your certificate yet!
+
+1.  Configure your server.
+
+    You now need to tell your server to use HTTPS (since development servers tend to use HTTP by default) and to use the TLS certificate you've just created.
+
+    How to do this exactly depends on your server. A few examples:
+
+    **👩🏻‍💻 With node:**
+
+    `server.js` (replace `{PATH/TO/CERTIFICATE...}` and `{PORT}`):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻 With [http-server](https://www.npmjs.com/package/http-server):**
+
+    Start your server as follows (replace `{PATH/TO/CERTIFICATE...}`):
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S` runs your server with HTTPS, while `-C` sets the certificate and `-K` sets the key.
+
+    **👩🏻‍💻 With a React development server:**
+
+    Edit your `package.json` as follows, and replace `{PATH/TO/CERTIFICATE...}`:
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    For example, if you've created a certificate for `localhost` that is located in your site's root directory as follows:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    Then your `start` script should look like this:
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 Other examples:**
+
+    - [Angular development server](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+1.  ✨ You're done!
+    Open `https://localhost` or `https://mysite.example` in your browser: you're running your site locally with HTTPS.
+    You won't see any browser warnings, because your browser trusts mkcert as a local certificate authority.
+
+{% Aside %}
+Your server may use a different port for HTTPS.
+{% endAside %}
+
+### Using mkcert: cheatsheet
+
+{% Details %}
+{% DetailsSummary %}
+mkcert in short
+{% endDetailsSummary %}
+
+To run your local development site with HTTPS:
+
+1.  Set up mkcert.
+
+    If you haven't yet, install mkcert, for example on macOS:
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    Check [install mkcert](https://github.com/FiloSottile/mkcert#installation) for Windows and Linux instructions.
+
+    Then, create a local certificate authority:
+
+    ```bash
+    mkcert -install
+    ```
+
+2.  Create a trusted certificate.
+
+    ```bash
+    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
+    ```
+
+    This create a valid certificate (that will be signed by `mkcert` automatically).
+
+3.  Configure your development server to use HTTPS and the certificate you've created in Step 2.
+4.  ✨ You're done! You can now access `https://{YOUR HOSTNAME}` in your browser, without warnings
+
+{% Aside 'caution' %}
+
+Do this only for **development purposes** and **never export or share** the file `rootCA-key.pem` (if you need to know where this file is located to make sure it's safe, run `mkcert -CAROOT`).
+
+{% endAside %}
+
+{% endDetails %}
+
+## Running your site locally with HTTPS: other options
+
+### Self-signed certificate
+
+You may also decide to not use a local certificate authority like mkcert, and instead **sign your certificate yourself**.
+
+Beware of a few pitfalls with this approach:
+
+- Browsers don't trust you as a certificate authority and they'll show warnings you'll need to bypass manually. In Chrome, you may use the flag `#allow-insecure-localhost` to bypass this warning automatically on `localhost`. It feels a bit hacky, because it is.
+- This is unsafe if you're working in an insecure network.
+- Self-signed certificates won't behave in exactly the same way as trusted certificates.
+- It's not necessarily easier or faster than using a local CA like mkcert.
+- If you're not using this technique in a browser context, you may need to disable certificate verification for your server. Omitting to re-enable it in production would be dangerous.
+
+<figure>
+  {% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="Screenshots of the warnings browsers show when a self-signed certificate is used.", width="800", height="598" %}
+  <figcaption>The warnings browsers show when a self-signed certificate is used.</figcaption>
+</figure>
+
+{% Aside %}
+If you don't specify any certificate, [React's](https://create-react-app.dev/docs/using-https-in-development/) and [Vue's](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve) development server HTTPS options create a self-signed certificate under the hood. This is quick, but you'll get browser warnings and encounter other pitfalls related to self-signed certificates that are listed above. Luckily you can use frontend frameworks' built-in HTTPS option **and** specify a locally trusted certificate created via mkcert or similar. See how to do this in the [mkcert with React example](/#setup:~:text=a%20React%20development%20server).
+{% endAside %}
+
+{% Details %}
+{% DetailsSummary %}
+Why don't browsers trust self-signed certificates?
+{% endDetailsSummary %}
+
+If you open your locally running site in your browser using HTTPS, your browser will check the certificate of your local development server. When it sees that the certificate has been signed by yourself, it checks whether you're registered as a trusted certificate authority. Because you're not, your browser can't trust the certificate; it displays a warning telling you that your connection is not secure. You may proceed at your own risk—if you do, an HTTPS connection will be created.
+
+<figure>
+  {% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="Why browsers don't trust self-signed certificates: a diagram.", width="800", height="833" %}
+  <figcaption>Why browsers don't trust self-signed certificates.</figcaption>
+</figure>
+
+{% endDetails %}
+
+### Certificate signed by a regular certificate authority
+
+You may also find techniques based on having an actual certificate authority—not a local one—sign your certificate.
+
+A few things to keep in mind if you're considering using these techniques:
+
+- You'll have more setup work to do than when using a local CA technique like mkcert.
+- You need to use a domain name that you control and that is valid. This means that you **can't** use actual certificate authorities for:
+  - `localhost` and other domain names that are [reserved](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml), such as `example` or `test`.
+  - Any domain name that you don't control.
+  - Top-level domains that are not valid. See the [list of valid top-level domains](https://www.iana.org/domains/root/db).
+
+### Reverse proxy
+
+Another option to access a locally running site with HTTPS is to use a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy) such as [ngrok](https://ngrok.com/).
+
+A few points to consider:
+
+- Anyone can access your local development site once you share with them a URL created with a reverse proxy. This can be very handy when demoing your project to clients! Or this can be a downside, if your project is sensitive.
+- You may need to consider pricing.
+- New [security measures](/cors-rfc1918-feedback/) in browsers may affect the way these tools work.
+
+### Flag (not recommended)
+
+If you're using a custom hostname like `mysite.example`, you can use a flag in Chrome to forcefully consider `mysite.example` secure. **Avoid doing this**, because:
+
+- You would need to be 100% sure that `mysite.example` always resolves to a local address, otherwise you could leak production credentials.
+- You won't be able to debug across browsers with this trick 🙀.
+
+_With many thanks for contributions and feedback to all reviewers and contributors—especially Ryan Sleevi,
+Filippo Valsorda, Milica Mihajlija and Rowan Merewood. 🙌_
+
+_Hero image background by [@anandu](https://unsplash.com/@anandu) on [Unsplash](https://unsplash.com/photos/pbxwxwfI0B4), edited._
diff --git a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/hero.jpg b/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/hero.jpg
deleted file mode 100644
index e121b62fbb2..00000000000
Binary files a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/index.md b/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/index.md
index d8ade433d19..9db3f69b160 100644
--- a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/index.md
+++ b/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/index.md
@@ -7,7 +7,7 @@ authors:
 description: |
   In this first post from the web.dev engineering team, learn about how we build the site—including
   our use of Eleventy and Web Components.
-hero: hero.jpg
+hero: image/admin/TzR3470Au1W5XGK2BH5M.jpg
 alt: Wind turbines on a hill
 tags:
 - blog # to show up in blog
@@ -19,7 +19,7 @@ Over the coming months, we hope to share actionable insights from our work—so
 Here we'll be covering the build process for our static site and the (optional!) JavaScript behind our web components.
 
 web.dev provides content about building modern web experiences and allows you to [measure](/measure/) your site's performance.
-Savvy users may have realized that [our Measure page](/measure/) is just an interface for [Lighthouse](https://developers.google.com/web/tools/lighthouse), which is also available in Chrome's DevTools.
+Savvy users may have realized that [our Measure page](/measure/) is just an interface for [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), which is also available in Chrome's DevTools.
 Signing in to web.dev lets you run regular Lighthouse audits on your site so you can see how its score changes over time.
 I'll be revisiting the Measure page a bit later, as we think it's fairly special. 🎊
 
@@ -80,7 +80,7 @@ Eleventy provides a programmatic way to build arbitrary collections of content.
 This has let us build pagination support and generate virtual pages (pages that don't have a matching Markdown file on disk) for post authors.
 For example, we construct our authors pages using a template containing [an expression for its permalink](https://github.com/GoogleChrome/web.dev/blob/2050fe6352e024943195a438841dc99217f34e63/src/site/content/en/authors/index.njk#L4) (so the template is re-rendered for every author) and a backing [collection](https://github.com/GoogleChrome/web.dev/blob/2050fe6352e024943195a438841dc99217f34e63/src/site/_collections/paginated-posts-by-author.js#L23).
 
-This results in, for example, a simple page containing [all of Addy's posts](https://web.dev/authors/addyosmani/)!
+This results in, for example, a simple page containing [all of Addy's posts](/authors/addyosmani/)!
 
 ### Limitations
 
@@ -111,7 +111,7 @@ It will end up looking like this:
 But it's actually creating HTML that looks like this:
 
 ```html
-<div class="w-aside w-aside--note">
+<div class="aside color-state-info-text">
 <p><a href="/handbook/web-dev-components/#asides">See how Asides work in the web.dev codebase</a></p>
 </div>
 ```
@@ -138,15 +138,15 @@ This cuts down on the number of bytes our users need before the site is enhanced
 
 ### Web Components
 
-[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+[Web Components](https://developer.mozilla.org/docs/Web/Web_Components)
 are custom elements which encapsulate runtime functionality provided in JavaScript, and are identified by custom names like `<web-codelab>`.
 The design lends itself well to largely static sites like web.dev: your browser manages an element's lifecycle as a site's HTML is updated, correctly informing any elements when they are attached or detached from the page.
 And antiquated browsers just ignore Web Components altogether and render whatever is left in the DOM.
 
 Each Web Component is a class with methods including `connectedCallback()`, `disconnectedCallback()`, and `attributeChangedCallback()`.
-web.dev's custom elements mostly inherit from [LitElement](https://lit-element.polymer-project.org/), which provides a simple base for complex components.
+web.dev's custom elements mostly inherit from [LitElement](https://lit.dev/), which provides a simple base for complex components.
 
-While web.dev uses Web Components on many pages, nowhere is it more necessary than on the [Measure](https://web.dev/measure) page.
+While web.dev uses Web Components on many pages, nowhere is it more necessary than on the [Measure](/measure) page.
 Two elements provide the bulk of the functionality you see on this page:
 
 ```html
@@ -160,9 +160,9 @@ Importantly, these elements are just part of [our regular Markdown source code](
 Our Web Components most commonly utilize the [Container Component](https://flaviocopes.com/react-presentational-vs-container-components/) model, made popular by React, although this model [is now a bit passé](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
 Each `-container` element connects to our global state (provided by [unistore](https://github.com/developit/unistore)), and then renders a visual element, which in turn goes on to render actual DOM nodes that have styling or other built-in functionality.
 
-<figure class="w-figure">
-  <img src="./state-and-elements.png" alt="A diagram that shows the relationship between global state and HTML elements that use it.">
-  <figcaption class="w-figcaption">Global state and a Web Component</figcaption>
+<figure>
+  {% Img src="image/admin/0vvvEFtKSNNvD79QS2i2.png", alt="A diagram that shows the relationship between global state and HTML elements that use it.", width="640", height="220" %}
+  <figcaption>Global state and a Web Component</figcaption>
 </figure>
 
 Our most complex Web Components exist to visualize global actions and state.
@@ -178,4 +178,4 @@ The web.dev engineering team ([Rob](https://twitter.com/rob_dodson), [Ewa](https
 We hope hearing about how we do things gave you some ideas for your own projects.
 Hit us up on Twitter if you've got questions or topic requests for this blog!
 
-<!-- Test content change --> 
+<!-- Test content change -->
diff --git a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/state-and-elements.png b/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/state-and-elements.png
deleted file mode 100644
index 71d370a8d07..00000000000
Binary files a/src/site/content/en/blog/how-we-build-webdev-and-use-web-components/state-and-elements.png and /dev/null differ
diff --git a/src/site/content/en/blog/how-we-built-designcember/index.md b/src/site/content/en/blog/how-we-built-designcember/index.md
new file mode 100644
index 00000000000..f920d476268
--- /dev/null
+++ b/src/site/content/en/blog/how-we-built-designcember/index.md
@@ -0,0 +1,286 @@
+---
+layout: post
+title: 'Building Designcember'
+authors: 
+  - adamargyle
+  - una
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/kKhOZkehYIQ49GQOXrsw.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/qRLa7xFsolDUbEfyugoW.png
+subhead: >
+  A peek into the process and tools used to build the holiday-calendar-style experience of Designcember. 
+description: >
+  A peek into the process and tools used to build the holiday-calendar-style experience of Designcember. 
+date: 2021-12-28
+tags:
+  - blog
+  - css
+---
+
+In the spirit of December and the many calendars that folks use to countdown and celebrate, we wanted to highlight web content from the community and the Chrome team. Every day, we highlighted one piece of UI-development and design-related content, totaling 31 highlights, among which were 26 new demo sites, tools, announcements, podcasts, videos, articles, and case studies.
+
+See the full experience at [designcember.com](https://designcember.com).
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/v8kOpJVC6fygzllNjUpC.png", alt="The Designcember site.", width="800", height="1034" %}
+
+## Overview
+
+Our goal was to deliver an accessible, whimsical, modern, and responsive web experience in as few bytes as possible. We wanted to highlight new responsive APIs like container queries, and include a beautiful example of a dark mode in a design-focused and asset-heavy website. To achieve this, we compressed files, offered multiple formats, used build tools optimized for static site generation, shipped a new polyfill, and more.
+
+## Starting with whimsy
+
+The idea around the Designcember calendar site was to function as a showcase for all the work we wanted to spotlight throughout the month of December, while acting like a demo site itself. We decided to build a responsive apartment building that could get taller and more narrow, or shorter and wider, with windows that rearranged themselves within the frame. Each window represented one day (and thus, one piece of content). 
+We worked with illustrator [Alice Lee](https://www.byalicelee.com/) to bring our vision to life.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/rO328nH0xEtVpwbXeYSi.jpg", alt="Sketches of the Designcember page skeleton.", width="800", height="618" %}
+
+Alice was inspiring, sharing processes and sketches that were exciting even in their early concepts. While she worked on the art, we hacked on the architecture. Early discussions were around the macro layout, the building, and its windows. How would the windows adapt to one, two, or three columns as more viewport space became available? How far could they shrink or stretch? What would the maximum size of the building be? How much would the windows shift?
+
+Here's a preview of a responsive prototype using [`grid-auto-flow: dense`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow) showing how windows could be auto placed by the grid algorithm. We quickly realized that while aspect-ratio grids performed beautifully to showcase art, they didn’t provide an opportunity to let the windows grow and shrink into non-uniform available space and showcase the power of container queries.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/Ktw3eAZCo6p5avjO6xdm.gif", alt="Animation that shows how this wireframe responds to different screen sizes.", width="800", height="552" %}
+
+<figcaption>
+   <a href="https://codepen.io/argyleink/pen/189adacf9be3eb2348308d904d493143?editors=1100">Check out this demo on CodePen.</a>
+</figcaption>
+
+</figure>
+
+Once the general grid was relatively stable and communicated a sense of direction for the responsiveness of the building and its windows, we could focus on a single window. Some windows stretched, shrank, squeezed, grew, and re-composed themselves more than others in the grid.
+
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/iJWU8JYwUhpeXafZ434y.png", alt="Wireframes showing how the windows display at different breakpoints.", width="800", height="812" %}
+
+Each window would need to handle a certain amount of resize turbulence. Below is a prototype of a window demonstrating its responsiveness to turbulence, showing how much we could expect each interactive window to adjust.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/2F6S98FvsNhviuBvtJcI.mov", autoplay="true", loop="true", muted="true" %}
+
+## Window animation with spritesheets
+
+Some windows have animations to bring extra interaction to the experience. The animations are hand-drawn, frame by frame, in Photoshop. Each frame is exported, turned into a spritesheet with this 
+[spritesheet generator](https://www.toptal.com/developers/css/sprite-generator/), then optimized with Squoosh. The CSS animation then uses `background-position-x` and 
+[`animation-timing-function`](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function) as shown in the following example.
+
+```css
+.una
+  background: url("/day1/una_sprite.webp") 0% 0%;
+  background-size: 400% auto;
+}
+
+.day:is(:hover, :focus-within) .una {
+  animation: una-wave .5s steps(1) alternate infinite;
+}
+
+@keyframes una-wave {
+  0%  { background-position-x: 0%; }
+  25% { background-position-x: 300%; }
+  50% { background-position-x: 200%; }
+  75% { background-position-x: 100%; }
+}
+```
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/wQurazNt80vsmII3rdnT.gif", alt="Animation showing the window for day one.", width="800", height="933", style="max-width: 400px; margin: 1em auto;" %}
+
+Some animations, such as the [piggy bank of day six](https://designcember.com/#6th), were step-based CSS animations. 
+We achieved this effect with a similar technique, using `steps()`, with the difference being that the keyframes were CSS transform positions instead of background positions.
+
+## CSS masking
+
+Some windows had unique shapes. We used 
+[masks](https://developer.mozilla.org/docs/Web/CSS/mask) and 
+[`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) to help make a scalable, uniquely shaped, and adaptive window. 
+
+To create a mask, such as this one for window eight, some classic Photoshop skills were needed, 
+plus a little bit of knowledge about how masks on the web work. Let's look at the window for day eight.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/ZFET81EyIUsVEofkYDIt.png", alt="The window for day eight.", width="800", height="655", style="max-width: 400px; margin: 1em auto;" %}
+
+To become a mask, the inner four leaf clover type shape has to be isolated as its own shape and filled in the color white. White tells the CSS what content stays, and everything outside the white won't. In Photoshop, the inside of the window was selected, feathered 1px (to remove aliasing issues), then filled white and exported at the same height and width as the window frame. This way the frame and the mask could be layered directly on top of each other, showing the inner content within the frame as expected.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/Jm6F9q8T41Sf6riwNYS7.png", alt="Clover mask image", width="776", height="774", style="max-width: 400px; margin: 1em auto;" %}
+
+Once complete, the contents of the window could be modified and would always appear to stay within the custom frame. The following image shows the dark mode version of the window, with a different background gradient and a glow CSS filter applied to the light.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/5F1DOOOGToYyQ8lv6wjW.png", alt="The window for day eight in dark mode.", width="800", height="634", style="max-width: 400px; margin: 1em auto;" %}
+
+Masking also supports responsive container-query based windows. In window nine, there’s a character who is hidden behind a mask until the window is in a more narrow size. To make sure the user can’t adjust the image out of frame, Alice completed the full character for us. The character is masked within the window, but the plants are not, so another challenge we dealt with was layering masked elements with unmasked layers, and ensuring that they all scaled well together.
+
+The following image shows what it looks like without the mask on the window and character.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/jWEL8nIl454zzKMnhyEo.png", alt="The image for window nine without the mask.", width="512", height="319" %}
+
+## Squooshing the art
+
+To maintain the fidelity of the illustration and ensure high definition screens wouldn't get a blurry user experience, Alice worked at a 3x pixel ratio. The plan was to use imgix and serve optimized images and formats on their server, but we found that manual tweaking with the Squoosh tool could save us 50% or more.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/MSHzLyoiZdAZyy0oVHwo.png", alt="Using Squoosh to compress images.", width="800", height="490" %}
+
+Illustration has unique challenges for compression, especially the brush stroke and transparent rough edge style Alice used. We chose to Squoosh each 3x Photoshop exported png image, to a smaller png, webp, and avif. Each file type has its own special compression abilities, and it took compressing more than 50 images to find some common optimization settings.
+
+The [Squoosh CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) became crucial with over 200 images to optimize&mdash;doing all those manually would have taken days. Once we had the common optimization settings, we provided them as command line instructions and batch processed entire folders of PNG images into their WebP and AVIF compressed counterparts. 
+
+Here's an example AVIF CLI squoosh command used:
+
+```bash
+npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
+```
+
+With optimized artwork checked into the repo, we could start loading them from HTML:
+
+```html
+<picture>
+  <source srcset="/day1/inner-frame.avif" type="image/avif">
+  <source srcset="/day1/inner-frame.webp" type="image/webp">
+  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
+</picture>
+```
+
+It was repetitive to write the picture source code, so we made an 
+[Astro component](https://github.com/GoogleChromeLabs/designcember/blob/main/src/components/Pic/Pic.astro) to embed images with one line of code.
+
+```html
+<Pic filename="day1/inner-frame" role="presentation" />
+```
+
+## Screen reader and keyboard users
+
+Much of the experience of Designcember is through the art and interactive windows. It was important to us that a keyboard user could use the site and peek into windows, and that screen reader users get a nice narrated experience. 
+
+For example, when embedding the images we used `role="presentation"` to mark the image as presentational for screen readers. We felt that a user experience of between 5 and 12 fractured `alt` descriptions was going to be a poor experience. So, we marked the images as presentational and provided an overall window narration. Moving through the windows on a screen reader then has a nice narrative feeling, which we hoped would help deliver the whimsy and fun the site wants to share.
+
+The following video shows a demo of the keyboard experience. Tab, enter, spacebar, and escape keys are all used to orchestrate focus to and from the window popups and the windows.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/UYNJSy92FLABrsLgz0lz.mp4", autoplay="true", loop="true", muted="true" %}
+
+The screen reader experience has special ARIA attributes that bring clarity to the content. For example, the links for the days only say "one" or "two", but with some added ARIA, they are announced as "Day one" and "Day two." Furthermore, all the images are summarized in a single label so each window has a description.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/bKYH0xxOJkwh0RTMGuAG.mp4", autoplay="true", loop="true", muted="true" %}
+
+## Astro, static first, component-driven site generator
+
+[Astro](https://astro.build/) made it easy for the team to work together on the site. The component model was familiar to both Angular and React developers, while the scoped classname style system helped each developer know their work on a window wouldn't conflict with anyone else. 
+
+### Days as components
+
+[Each day was a component](https://github.com/GoogleChromeLabs/designcember/blob/main/src/components/Days/Day1.astro) that fetched status from a 
+[build time data store](https://github.com/GoogleChromeLabs/designcember/blob/main/src/components/Days/day.store.js). This let us run template logic before the HTML reached the browser. The logic would determine if the day should show its tooltip or not, as inactive days don't have pop ups. 
+
+Builds are run every hour and the build time data store would unlock a new day when the build server was past midnight. These self-updating and self-sufficient little systems keep the site up to date.
+
+### Scoped styles and Open Props
+
+Astro [scopes styles written inside its component model](https://docs.astro.build/guides/styling/), which made distributing the workload amongst many team members easier, and also made using [Open Props](https://open-props.style/) fun. The [Open Props normalize.css](https://unpkg.com/open-props/normalize.min.css) styles came in handy with the adaptive (light and dark) theme, as well as helping wrangle content like paragraphs and headers. 
+
+As early adopters of Astro, we ran into a few snags with PostCSS. For example, we weren't able to update to the 
+[latest Astro version](https://astro.build/blog/astro-021-release/) due to too many build issues. More time could be spent here, optimizing the build and developer workflows. 
+
+## Flexible containers
+
+Some windows grow and shrink, maintaining [aspect ratio](/aspect-ratio) to preserve their art. We used some other windows to showcase the power of component-based architecture with container queries. Container queries meant windows could own their individual responsive styling information and readjust based on their own sizes. Some windows went from narrow to wide and needed to adjust the size of the media within them, as well as the placement of that media.
+
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/ssFflPRQrTum3fbwkAWZ.png", alt="A demonstration of how the windows change as they have more space.", width="800", height="383" %}
+
+As more space becomes available for a window, we could adapt the size or child elements of the window to fit. Turned out that in order to fulfill the adaptive windows, container queries wouldn't just be fun to showcase, they'd be required and drastically simplify orchestrating certain layouts. 
+
+```css
+.day {
+  container: inline-size;
+}
+
+.day > .pane {
+  min-block-size: 250px;
+
+  @container (min-width: 220px) {
+    min-block-size: 300px;
+  }
+
+  @container (min-width: 260px) {
+    min-block-size: 310px;
+  }
+
+  @container (min-width: 360px) {
+    min-block-size: 450px;
+  }
+}
+```
+
+{% Aside 'warning' %}
+The container query spec has since added a required `size()` wrapper around width and height queries. This syntax language is still a work in progress, but the polyfill described later in this article supports both syntaxes.
+{% endAside %}
+
+This approach is different from maintaining an aspect ratio. It offers more control and more opportunities. At a certain size, many children shift around to adapt to a new layout. 
+
+Container queries also allowed us to support block-direction (vertical) containment, so as a window grew in length, we could adjust its styles to fit appropriately. This is seen in the height-based queries, which we used standalone, and in addition to width-based queries:
+
+```css
+.person {
+  place-self: flex-end;
+  margin-block: 25% 50%;
+  margin-inline-start: -15%;
+  z-index: var(--layer-1);
+
+  @container (max-height: 350px) and (max-width: 425px) {
+    place-self: center flex-end;
+    inline-size: 50%;
+    inset-block-end: -15%;
+    margin-block-start: -2%;
+    margin-block-end: -25%;
+    z-index: var(--layer-2);
+  }
+}
+```
+
+We also used container queries to show and hide detail as the art became increasingly crowded at smaller sizes, and emptier at wider sizes. Window nine is a great example of where this came into play:
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/rXfci0RECfk5six1UTGv.mov", autoplay="true", loop="true", muted="true" %}
+
+
+## Cross-browser support
+
+To create a great modern cross-browser experience, especially for experimental APIs like container queries, we need a great polyfill. We sent a call out to our team, and Surma spearheaded a build for a new [container query polyfill](https://www.npmjs.com/package/container-query-polyfill). The polyfill relies on [ResizeObserver](https://caniuse.com/resizeobserver), [MutationObserver](https://caniuse.com/mutationobserver) and the CSS [:is() function](https://caniuse.com/css-matches-pseudo). Therefore, all modern browsers support the polyfill, specifically Chrome and Edgefrom version 88, Firefox from version 78, and Safari from version 14. Using the polyfill allows any of the following syntaxes:
+
+```css
+/* These are all equivalent */
+@container (min-width: 200px) {
+  /* ... */
+}
+@container (width >= 200px) {
+  /* ... */
+}
+@container size(width >= 200px) {
+  /* ... */
+}
+```
+
+## Dark mode
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/KKWJFNWYiKBiOkpg1fBK.jpg", alt="The light and dark mode versions of the Designcember site, side-by-side.", width="800", height="401" %}
+
+One last touch that was essential for the Designcember website was a beautiful dark theme. We wanted to show how you could use art itself to be an active participant in creating a great dark mode experience. For this, we adjusted the background styles of each window itself programmatically, and used as much CSS as made sense when creating the window art. Most of the backgrounds were CSS gradients, so that it would be easier to adjust their color values. We then layered the art on top of these.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/gBrdHzLwdDckE9pgxK5L.mp4", autoplay="true", loop="true", muted="true" %}
+
+## Other Easter eggs
+
+### Personal touches
+
+We added a few personal touches to the page to give the site more personality. The first was the cast of characters, drawn from inspiration from our team. We also included a throwback-style cursor on inactive days and played around with the favicon style.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/qjXfDOxsGXIIE57cXnyr.jpg", alt="Custom cursor styles and favicon options", width="800", height="408" %}
+
+### Functional touches
+
+One of the additional functional touches is a "Jump to Today" functionality, with a bird that sits on top of the building. Clicking or hitting enter on this bird jumps you down on the page to the current day of the month, so you can quickly get to the latest launches.
+
+Designcember.com also has a special print stylesheet where we're essentially serving a specific image that works best on 8.5" x 11" paper so you can print the calendar out yourself and stay festive all year long. 
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/FQ1XPh1UbVvlvNzn7PtC.jpg", alt="Poster-sized print of the calendar design.", width="800", height="1066" %}
+<figcaption>Una holding a large print of the calendar.</figcaption>
+</figure>
+
+All in all, a ton of work went into creating a fun, whimsical modern web experience to celebrate UI development all month long in December. We hope you enjoyed it!
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/aNlNdEYdk4t9yteQm8GK.jpg", alt="Parts of the calendar with annotations and visual notes", width="800", height="957" %}
\ No newline at end of file
diff --git a/src/site/content/en/blog/howbrowserswork/index.md b/src/site/content/en/blog/howbrowserswork/index.md
new file mode 100644
index 00000000000..d9adc2f0de0
--- /dev/null
+++ b/src/site/content/en/blog/howbrowserswork/index.md
@@ -0,0 +1,1546 @@
+---
+layout: post
+title: How browsers work
+subhead: Behind the scenes of modern web browsers
+authors:
+  - taligarsiel
+  - paulirish
+date: 2011-08-05
+tags:
+  - blog
+---
+
+## Preface
+
+This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code.
+She wrote:
+
+{% Aside %}
+In the years of IE 90% dominance there was nothing much to do but regard the browser as a "black box", but now, with open source browsers having [more than half of the usage share](http://techcrunch.com/2011/08/01/open-web-browsers/), it's a good time to take a peek under the engine's hood and see what's inside a web browser. Well, what's inside are millions of C++ lines…
+{% endAside %}
+
+Tali published her research on [her site](http://taligarsiel.com/), but we knew it deserved a larger audience, so we've cleaned it up and republished it here.
+
+{% Blockquote 'Paul Irish, Chrome Developer Relations' %}
+As a web developer, **learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices**. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you'll be glad you did.
+{% endBlockquote %}
+
+## Introduction
+
+Web browsers are the most widely used software.
+In this primer, I will explain how they work behind the scenes.
+We will see what happens when you type `google.com` in the address bar until you see the Google page on the browser screen.
+
+## The browsers we will talk about
+
+There are five major browsers used on desktop today: Chrome, Internet Explorer, Firefox, Safari and Opera. On mobile, the main browsers are Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers and Chrome, all of which, except for the Opera browsers, are based on WebKit. I will give examples from the open source browsers Firefox and Chrome, and Safari (which is partly open source). According to [StatCounter statistics](http://gs.statcounter.com/) (as of June 2013) Chrome, Firefox and Safari make up around 71% of global desktop browser usage. On mobile, Android Browser, iPhone and Chrome constitute around 54% of usage.
+
+## The browser's main functionality
+
+The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window.
+The resource is usually an HTML document, but may also be a PDF, image, or some other type of content.
+The location of the resource is specified by the user using a URI (Uniform Resource Identifier).
+
+The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications.
+These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web. For years browsers conformed to only a part of the specifications and developed their own extensions. That caused serious compatibility issues for web authors. Today most of the browsers more or less conform to the specifications.
+
+Browser user interfaces have a lot in common with each other. Among the common user interface elements are:
+
+1. Address bar for inserting a URI
+1. Back and forward buttons
+1. Bookmarking options
+1. Refresh and stop buttons for refreshing or stopping the loading of current documents
+1. Home button that takes you to your home page
+
+Strangely enough, the browser's user interface is not specified in any formal specification, it just comes from good practices shaped over years of experience and by browsers imitating each other.
+The HTML5 specification doesn't define UI elements a browser must have, but lists some common elements. Among those are the address bar, status bar and tool bar.
+There are, of course, features unique to a specific browser like Firefox's downloads manager.
+
+## The browser's high level structure
+
+The browser's main components are:
+
+  1. **The user interface**: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
+  1. **The browser engine**: marshals actions between the UI and the rendering engine.
+  1. **The rendering engine**: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
+  1. **Networking**: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
+  1. **UI backend**: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
+  1. **JavaScript interpreter**. Used to parse and execute JavaScript code.
+  1. **Data storage**. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PgPX6ZMyKSwF6kB8zIhB.png", alt="Browser components", width="500", height="339" %}
+  <figcaption>Figure 1: Browser components</figcaption>
+</figure>
+
+It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process.
+
+## The rendering engine
+
+The responsibility of the rendering engine is well… Rendering, that is display of the requested contents on the browser screen.
+
+By default the rendering engine can display HTML and XML documents and images.
+It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.
+
+## Rendering engines
+
+Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.
+
+WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows.
+See [webkit.org](http://webkit.org/) for more details.
+
+## The main flow
+
+The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
+
+After that, this is the basic flow of the rendering engine:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bPlYx9xODQH4X1KuUNpc.png", alt="Rendering engine basic flow", width="600", height="66" %}
+  <figcaption>Figure 2: Rendering engine basic flow</figcaption>
+</figure>
+
+The rendering engine will start parsing the HTML document and convert elements to [DOM](#dom) nodes in a tree called the "content tree". The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the [render tree](#render-tree-construction).
+
+The render tree contains rectangles with visual attributes like color and dimensions.
+The rectangles are in the right order to be displayed on the screen.
+
+After the construction of the render tree it goes through a "[layout](#layout)" process.
+This means giving each node the exact coordinates where it should appear on the screen.
+The next stage is [painting](#painting) - the render tree will be traversed and each node will be painted using the UI backend layer.
+
+It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible.
+It will not wait until all HTML is parsed before starting to build and layout the render tree.
+Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
+
+### Main flow examples
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/S9TJhnMX1cu1vrYuQRqM.png", alt="WebKit main flow.", width="624", height="289" %}
+  <figcaption>Figure 3: WebKit main flow</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Tbif2mUJCUVyPdyXntZk.jpg", alt="Mozilla's Gecko rendering engine main flow.", width="624", height="290" %}
+  <figcaption>Figure 4: Mozilla's Gecko rendering engine main flow</figcaption>
+</figure>
+
+From figures 3 and 4 you can see that although WebKit and Gecko use slightly different terminology, the flow is basically the same.
+
+Gecko calls the tree of visually formatted elements a "Frame tree". Each element is a frame.
+WebKit uses the term "Render Tree" and it consists of "Render Objects".
+WebKit uses the term "layout" for the placing of elements, while Gecko calls it "Reflow".
+"Attachment" is WebKit's term for connecting DOM nodes and visual information to create the render tree.
+A minor non-semantic difference is that Gecko has an extra layer between the HTML and the DOM tree. It is called the "content sink" and is a factory for making DOM elements.
+We will talk about each part of the flow:
+
+### Parsing - general
+
+Since parsing is a very significant process within the rendering engine, we will go into it a little more deeply.
+Let's begin with a little introduction about parsing.
+
+Parsing a document means translating it to a structure the code can use. The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree.
+
+For example, parsing the expression `2 + 3 - 1` could return this tree:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xNQUG9emGd8FzuOpumP7.png", alt="Mathematical expression tree node.", width="400", height="155" %}
+  <figcaption>Figure 5: mathematical expression tree node</figcaption>
+</figure>
+
+### Grammars
+
+Parsing is based on the syntax rules the document obeys: the language or format it was written in.
+Every format you can parse must have deterministic grammar consisting of vocabulary and syntax rules. It is called a
+[context free grammar](#context_free_grammar). Human languages are not such languages and therefore cannot be parsed with conventional parsing techniques.
+
+### Parser - Lexer combination
+
+Parsing can be separated into two sub processes: lexical analysis and syntax analysis.
+
+Lexical analysis is the process of breaking the input into tokens.
+Tokens are the language vocabulary: the collection of valid building blocks. In human language it will consist of all the words that appear in the dictionary for that language.
+
+Syntax analysis is the applying of the language syntax rules.
+
+Parsers usually divide the work between two components: the **lexer** (sometimes called tokenizer) that is responsible for breaking the input into valid tokens, and the **parser** that is responsible for constructing the parse tree by analyzing the document structure according to the language syntax rules.
+
+The lexer knows how to strip irrelevant characters like white spaces and line breaks.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TfY1qPDNbZS8iBnlAO4b.png", alt="From source document to parse trees", width="101", height="300" %}
+  <figcaption>Figure 6: from source document to parse trees</figcaption>
+</figure>
+
+The parsing process is iterative. The parser will usually ask the lexer for a new token and try to match the token with one of the syntax rules.  If a rule is matched, a node corresponding to the token will be added to the parse tree and the parser will ask for another token.
+
+If no rule matches, the parser will store the token internally, and keep asking for tokens until a rule matching all the internally stored tokens is found. If no rule is found then the parser will raise an exception.  This means the document was not valid and contained syntax errors.
+
+### Translation
+
+In many cases the parse tree is not the final product. Parsing is often used in translation: transforming the input document to another format. An example is compilation. The compiler that compiles source code into machine code first parses it into a parse tree and then translates the tree into a machine code document.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VhoUBTyHWNnnZJiIfRAo.png", alt="Compilation flow", width="104", height="400" %}
+  <figcaption>Figure 7: compilation flow</figcaption>
+</figure>
+
+### Parsing example
+
+In figure 5 we built a parse tree from a mathematical expression.
+Let's try to define a simple mathematical language and see the parse process.
+
+{% Aside 'key-term' %}
+Our language can include integers, plus signs and minus signs.
+{% endAside %}
+
+Syntax:
+1. The language syntax building blocks are expressions, terms and operations.
+1. Our language can include any number of expressions.
+1. An expression is defined as a "term" followed by an "operation" followed by another term
+1. An operation is a plus token or a minus token
+1. A term is an integer token or an expression
+
+Let's analyze the input `2 + 3 - 1`.
+
+The first substring that matches a rule is `2`: according to rule #5 it is a term.
+The second match is `2  + 3`: this matches the third rule: a term followed by an operation followed by another term.
+The next match will only be hit at the end of the input.
+`2 + 3 - 1` is an expression because we already know that `2 + 3`is a term, so we have a term followed by an operation followed by another term.
+`2 + +` will not match any rule and therefore is an invalid input.
+
+### Formal definitions for vocabulary and syntax
+
+Vocabulary is usually expressed by [regular expressions](http://www.regular-expressions.info/).
+
+For example our language will be defined as:
+```js
+INTEGER: 0|[1-9][0-9]*
+PLUS: +
+MINUS: -
+```
+
+As you see, integers are defined by a regular expression.
+
+Syntax is usually defined in a format called [BNF](http://en.wikipedia.org/wiki/Backus%E2%80%93Naur_Form).
+Our language will be defined as:
+
+```js
+expression :=  term  operation  term
+operation :=  PLUS | MINUS
+term := INTEGER | expression
+```
+
+We said that a language can be parsed by regular parsers if its grammar is a context free grammar.
+An intuitive definition of a context free grammar is a grammar that can be entirely expressed in BNF.
+For a formal definition see
+[Wikipedia's article on Context-free grammar](http://en.wikipedia.org/wiki/Context-free_grammar)
+
+### Types of parsers
+
+There are two types of parsers: top down parsers and bottom up parsers. An intuitive explanation is that top down parsers examine the high level structure of the syntax and try to find a rule match. Bottom up parsers start with the input and gradually transform it into the syntax rules, starting from the low level rules until high level rules are met.
+
+Let's see how the two types of parsers will parse our example.
+
+The top down parser will start from the higher level rule: it will identify `2 + 3` as an expression. It will then identify `2 + 3 - 1` as an expression (the process of identifying the expression evolves, matching the other rules, but the start point is the highest level rule).
+
+The bottom up parser will scan the input until a rule is matched. It will then replace the matching input with the rule. This will go on until the end of the input.
+The partly matched expression is placed on the parser's stack.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Stack</th>
+        <th>Input</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td></td>
+        <td>2 + 3 - 1</td>
+      </tr>
+      <tr>
+        <td>term</td>
+        <td>+ 3 - 1</td>
+      </tr>
+      <tr>
+        <td>term operation</td>
+        <td>3 - 1</td>
+      </tr>
+      <tr>
+        <td>expression</td>
+        <td>- 1</td>
+      </tr>
+      <tr>
+        <td>expression operation</td>
+        <td>1</td>
+      </tr>
+      <tr>
+        <td>expression</td>
+        <td>-</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+This type of bottom up parser is called a shift-reduce parser, because the input is shifted to the right (imagine a pointer pointing first at the input start and moving to the right) and is gradually reduced to syntax rules.
+
+### Generating parsers automatically
+
+There are tools that can generate a parser. You feed them the grammar of your language - its vocabulary and syntax rules - and they generate a working parser.
+Creating a parser requires a deep understanding of parsing and it's not easy to create an optimized parser by hand, so parser generators can be very useful.
+
+WebKit uses two well known parser generators: [Flex](http://en.wikipedia.org/wiki/Flex_lexical_analyser) for creating a lexer and [Bison](http://www.gnu.org/software/bison/) for creating a parser (you might run into them with the names Lex and Yacc).
+Flex input is a file containing regular expression definitions of the tokens.
+Bison's input is the language syntax rules in BNF format.
+
+## HTML Parser
+
+The job of the HTML parser is to parse the HTML markup into a parse tree.
+
+### The HTML grammar definition
+
+The vocabulary and syntax of HTML are defined in specifications created by the W3C organization.
+
+### Not a context free grammar
+
+As we have seen in the parsing introduction, grammar syntax can be defined formally using formats like BNF.
+
+Unfortunately all the conventional parser topics do not apply to HTML (I didn't  bring them up just for fun - they will be used in parsing CSS and JavaScript).
+HTML cannot easily be defined by a context free grammar that parsers need.
+
+There is a formal format for defining HTML - DTD (Document Type Definition) - but it is not a context free grammar.
+
+This appears strange at first sight; HTML is rather close to XML. There are lots of available XML parsers.
+There is an XML variation of HTML - XHTML - so what's the big difference?
+
+The difference is that the HTML approach is more "forgiving": it lets you omit certain tags (which are then added implicitly), or sometimes omit start or end tags, and so on.
+On the whole it's a "soft" syntax, as opposed to XML's stiff and demanding syntax.
+
+This seemingly small detail makes a world of a difference.
+On one hand this is the main reason why HTML is so popular: it forgives your mistakes and makes life easy for the web author.
+On the other hand, it makes it difficult to write a formal grammar. So to summarize, HTML cannot be parsed easily by conventional parsers, since its grammar is not context free. HTML cannot be parsed by XML parsers.
+
+### HTML DTD
+
+HTML definition is in a DTD format. This format is used to define languages of the [SGML](http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language) family. The format contains definitions for all allowed elements, their attributes and hierarchy. As we saw earlier, the HTML DTD doesn't form a context free grammar.
+
+There are a few variations of the DTD. The strict mode conforms solely to the specifications but other modes contain support for markup used by browsers in the past. The purpose is backwards compatibility with older content.
+The current strict DTD is here:
+[www.w3.org/TR/html4/strict.dtd](http://www.w3.org/TR/html4/strict.dtd)
+
+### DOM
+
+The output tree (the "parse tree") is a tree of DOM element and attribute nodes.
+DOM is short for Document Object Model.
+It is the object presentation of the HTML document and the interface of HTML elements to the outside world like JavaScript.
+
+The root of the tree is the "[Document](http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Document)" object.
+
+
+The DOM has an almost one-to-one relation to the markup.
+For example:
+
+```html
+<html>
+  <body>
+    <p>
+      Hello World
+    </p>
+    <div> <img src="example.png"/></div>
+  </body>
+</html>
+```
+
+This markup would be translated to the following DOM tree:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/DNtfwOq9UaC3TrEj3D9h.png", alt="DOM tree of the example markup", width="400", height="219" %}
+  <figcaption>Figure 8: DOM tree of the example markup</figcaption>
+</figure>
+
+
+Like HTML, DOM is specified by the W3C organization.
+See [www.w3.org/DOM/DOMTR](http://www.w3.org/DOM/DOMTR).
+It is a generic specification for manipulating documents. A specific module describes HTML specific elements. The HTML definitions can be found here:
+[www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html](http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html).
+
+When I say the tree contains DOM nodes, I mean the tree is constructed of elements that implement one of the DOM interfaces. Browsers use concrete implementations that have other attributes used by the browser internally.
+
+#### The parsing algorithm
+
+As we saw in the previous sections, HTML cannot be parsed using the regular top down or bottom up parsers.
+
+The reasons are:
+
+1. The forgiving nature of the language.
+1. The fact that browsers have traditional error tolerance to support well known cases of invalid HTML.
+1. The parsing process is reentrant. For other languages, the source doesn't change during parsing, but in HTML, dynamic code (such as script elements containing `document.write()` calls) can add extra tokens, so the parsing process actually modifies the input.
+
+Unable to use the regular parsing techniques, browsers create custom parsers for parsing HTML.
+
+The[parsing algorithm is described in detail by the HTML5 specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html).
+The algorithm consists of two stages: tokenization and tree construction.
+
+Tokenization is the lexical analysis, parsing the input into tokens.
+Among HTML tokens are start tags, end tags, attribute names and attribute values.
+
+The tokenizer recognizes the token, gives it to the tree constructor, and consumes the next character for recognizing the next token, and so on until the end of the input.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YYYp1GgcD0riUliWJdiX.png", alt="HTML parsing flow (taken from HTML5 spec)", width="308", height="400" %}
+  <figcaption>Figure 9: HTML parsing flow (taken from HTML5 spec)</figcaption>
+</figure>
+
+### The tokenization algorithm
+
+The algorithm's output is an HTML token.
+The algorithm is expressed as a state machine.
+Each state consumes one or more characters of the input stream and updates the next state according to those characters.
+The decision is influenced by the current tokenization state and by the tree construction state. This means the same consumed character will yield different results for the correct next state, depending on the current state.
+The algorithm is too complex to describe fully, so let's see a simple example that will help us understand the principle.
+
+Basic example - tokenizing the following HTML:
+
+```html
+<html>
+  <body>
+    Hello world
+  </body>
+</html>
+```
+
+The initial state is the "Data state".
+When the `<` character is encountered, the state is changed to **"Tag open state"**.
+Consuming an `a-z` character causes creation of a "Start tag token", the state is changed to **"Tag name state"**.
+We stay in this state until the `>` character is consumed. Each character is appended to the new token name. In our case the created token is an `html` token.
+
+When the `>` tag is reached, the current token is emitted and the state changes back to the **"Data state"**.
+The `<body>` tag will be treated by the same steps.
+So far the `html` and `body` tags were emitted. We are now back at the **"Data state"**.
+Consuming the `H` character of `Hello world` will cause creation and emitting of a character token, this goes on until the `<` of `</body>` is reached. We will emit a character token for each character of `Hello world`.
+
+We are now back at the **"Tag open state"**.
+Consuming the next input `/` will cause creation of an `end tag token` and a move to the **"Tag name state"**. Again we stay in this state until we reach `>`.Then the new tag token will be emitted and we go back to the **"Data state"**.
+The `</html>` input will be treated like the previous case.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/52SA8fqorIKP6h22JHUR.png", alt="Tokenizing the example input", width="627", height="387" %}
+  <figcaption>Figure 10: Tokenizing the example input</figcaption>
+</figure>
+
+#### Tree construction algorithm
+
+When the parser is created the Document object is created. During the tree construction stage the DOM tree with the Document in its root will be modified and elements will be added to it.
+Each node emitted by the tokenizer will be processed by the tree constructor.
+For each token the specification defines which DOM element is relevant to it and will be created for this token.
+The element is added to the DOM tree, and also the stack of open elements.
+This stack is used to correct nesting mismatches and unclosed tags.
+The algorithm is also described as a state machine.  The states are called "insertion modes".
+
+Let's see the tree construction process for the example input:
+
+```html
+<html>
+  <body>
+    Hello world
+  </body>
+</html>
+```
+
+The input to the tree construction stage is a sequence of tokens from the tokenization stage.
+The first mode is the **"initial mode"**. Receiving the "html" token will cause a move to the **"before html"** mode and a reprocessing of the token in that mode.
+This will cause creation of the HTMLHtmlElement element, which will be appended to the root Document object.
+
+The state will be changed to **"before head"**. The "body" token is then received. An HTMLHeadElement will be created implicitly although we don't have a "head" token and it will be added to the tree.
+
+We now move to the **"in head"** mode and then to **"after head"**. The body token is reprocessed, an HTMLBodyElement is created and inserted and the mode is transferred to **"in body"**.
+
+The character tokens of the "Hello world" string are now received. The first one will cause creation and insertion of a "Text" node and the other characters will be appended to that node.
+
+The receiving of the body end token will cause a transfer to **"after body"** mode.
+We will now receive the html end tag which will move us to **"after after body"** mode.
+Receiving the end of file token will end the parsing.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Q8vtwKMnnvYf48eeY95Y.gif", alt="Tree construction of example HTML.", width="532", height="769" %}
+  <figcaption>Figure 11: tree construction of example html</figcaption>
+</figure>
+
+### Actions when the parsing is finished
+
+At this stage the browser will mark the document as interactive and start parsing scripts that are in "deferred" mode: those that should be executed after the document is parsed.
+The document state will be then set to "complete" and a "load" event will be fired.
+
+You can see [the full algorithms for tokenization and tree construction in the HTML5 specification](http://www.w3.org/TR/html5/syntax.html#html-parser).
+
+### Browsers' error tolerance
+
+You never get an "Invalid Syntax" error on an HTML page.
+Browsers fix any invalid content and go on.
+
+Take this HTML for example:
+
+```html
+<html>
+  <mytag>
+  </mytag>
+  <div>
+  <p>
+  </div>
+    Really lousy HTML
+  </p>
+</html>
+```
+
+I must have violated about a million rules ("mytag" is not a standard tag, wrong nesting of the "p" and "div" elements and more) but the browser still shows it correctly and doesn't complain.
+So a lot of the parser code is fixing the HTML author mistakes.
+
+Error handling is quite consistent in browsers, but amazingly enough it hasn't been part of HTML specifications.
+Like bookmarking and back/forward buttons it's just something that developed in browsers over the years. There are known invalid HTML constructs repeated on many sites, and the browsers try to fix them in a way conformant with other browsers.
+
+The HTML5 specification does define some of these requirements. (WebKit summarizes this nicely in the comment at the beginning of the HTML parser class.)
+
+The parser parses tokenized input into the document, building up the document tree. If the document is well-formed, parsing it is straightforward.
+
+Unfortunately, we have to handle many HTML documents that are not well-formed, so the parser has to be tolerant about errors.
+
+We have to take care of at least the following error conditions:
+
+1. The element being added is explicitly forbidden inside some outer tag. In this case we should close all tags up to the one which forbids the element, and add it afterwards.
+1. We are not allowed to add the element directly. It could be that the person writing the document forgot some tag in between (or that the tag in between is optional). This could be the case with the following tags: HTML HEAD BODY TBODY TR TD LI (did I forget any?).
+1. We want to add a block element inside an inline element. Close all inline elements up to the next higher block element.
+1. If this doesn't help, close elements until we are allowed to add the element - or ignore the tag.
+
+Let's see some WebKit error tolerance examples:
+
+#### `</br>` instead of `<br>`
+
+Some sites use `</br>` instead of `<br>`. In order to be compatible with IE and Firefox, WebKit treats this like `<br>`.
+
+The code:
+```js
+if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
+     reportError(MalformedBRError);
+     t->beginTag = true;
+}
+```
+
+Note that the error handling is internal: it won't be presented to the user.
+
+#### A stray table
+
+A stray table is a table inside another table, but not inside a table cell.
+
+For example:
+
+```html
+<table>
+  <table>
+    <tr><td>inner table</td></tr>
+  </table>
+  <tr><td>outer table</td></tr>
+</table>
+```
+
+WebKit will change the hierarchy to two sibling tables:
+
+```html
+<table>
+  <tr><td>outer table</td></tr>
+</table>
+<table>
+  <tr><td>inner table</td></tr>
+</table>
+```
+
+The code:
+
+```js
+if (m_inStrayTableContent && localName == tableTag)
+        popBlock(tableTag);
+```
+
+WebKit uses a stack for the current element contents: it will pop the inner table out of the outer table stack. The tables will now be siblings.
+
+#### Nested form elements
+
+In case the user puts a form inside another form, the second form is ignored.
+
+The code:
+
+```js
+if (!m_currentFormElement) {
+        m_currentFormElement = new HTMLFormElement(formTag,    m_document);
+}
+```
+
+#### A too deep tag hierarchy
+
+The comment speaks for itself.
+
+{% Aside %}
+www.liceo.edu.mx is an example of a site that achieves a level of nesting of about 1500 tags, all from a bunch of `<b>`s.
+We will only allow at most 20 nested tags of the same type before just ignoring them all together.
+{% endAside %}
+
+```js
+bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName)
+{
+
+unsigned i = 0;
+for (HTMLStackElem* curr = m_blockStack;
+         i < cMaxRedundantTagDepth && curr && curr->tagName == tagName;
+     curr = curr->next, i++) { }
+return i != cMaxRedundantTagDepth;
+}
+```
+
+#### Misplaced html or body end tags
+
+Again - the comment speaks for itself.
+
+{% Aside %}
+Support for really broken HTML.
+We never close the body tag, since some stupid web pages close it before the actual end of the doc.
+Let's rely on the end() call to close things.
+{% endAside %}
+
+```js
+if (t->tagName == htmlTag || t->tagName == bodyTag )
+        return;
+```
+
+So web authors beware - unless you want to appear as an example in a WebKit error tolerance code snippet - write well formed HTML.
+
+## CSS parsing
+
+Remember the parsing concepts in the introduction?  Well, unlike HTML, CSS is a context free grammar and can be parsed using the types of parsers described in the introduction.
+In fact [the CSS specification defines CSS lexical and syntax grammar](http://www.w3.org/TR/CSS2/grammar.html).
+
+Let's see some examples:
+
+The lexical grammar (vocabulary) is defined by regular expressions for each token:
+
+```markup
+comment   \/\*[^*]*\*+([^/*][^*]*\*+)*\/
+num       [0-9]+|[0-9]*"."[0-9]+
+nonascii  [\200-\377]
+nmstart   [_a-z]|{nonascii}|{escape}
+nmchar    [_a-z0-9-]|{nonascii}|{escape}
+name      {nmchar}+
+ident     {nmstart}{nmchar}*
+```
+
+"ident" is short for identifier, like a class name.
+"name" is an element id (that is referred by "#" )
+
+The syntax grammar is described in BNF.
+
+```css
+ruleset
+  : selector [ ',' S* selector ]*
+    '{' S* declaration [ ';' S* declaration ]* '}' S*
+  ;
+selector
+  : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
+  ;
+simple_selector
+  : element_name [ HASH | class | attrib | pseudo ]*
+  | [ HASH | class | attrib | pseudo ]+
+  ;
+class
+  : '.' IDENT
+  ;
+element_name
+  : IDENT | '*'
+  ;
+attrib
+  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
+    [ IDENT | STRING ] S* ] ']'
+  ;
+pseudo
+  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
+  ;
+```
+
+Explanation:
+
+A ruleset is this structure:
+
+```css
+div.error, a.error {
+  color:red;
+  font-weight:bold;
+}
+```
+
+`div.error` and `a.error` are selectors. The part inside the curly braces contains the rules that are applied by this ruleset.
+This structure is defined formally in this definition:
+
+```css
+ruleset
+  : selector [ ',' S* selector ]*
+    '{' S* declaration [ ';' S* declaration ]* '}' S*
+  ;
+```
+
+This means a ruleset is a selector or optionally a number of selectors separated by a comma and spaces (S stands for white space).
+A ruleset contains curly braces and inside them a declaration or optionally a number of declarations separated by a semicolon.
+"declaration" and "selector" will be defined in the following BNF definitions.
+
+### WebKit CSS parser
+
+WebKit uses [Flex and Bison](#parser_generators) parser generators to create parsers automatically from the CSS grammar files.
+As you recall from the parser introduction, Bison creates a bottom up shift-reduce parser.
+Firefox uses a top down parser written manually.
+In both cases each CSS file is parsed into a StyleSheet object. Each object contains CSS rules. The CSS rule objects contain selector and declaration objects and other objects corresponding to CSS grammar.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vBMlouM57RHDG29Ukzhi.png", alt="Parsing CSS.", width="500", height="393" %}
+  <figcaption>Figure 12: parsing CSS</figcaption>
+</figure>
+
+## The order of processing scripts and style sheets
+
+### Scripts
+
+The model of the web is synchronous. Authors expect scripts to be parsed and executed immediately when the parser reaches a `<script>` tag.
+The parsing of the document halts until the script has been executed.
+If the script is external then the resource must first be fetched from the network - this is also done synchronously, and parsing halts until the resource is fetched.
+This was the model for many years and is also specified in HTML4 and 5 specifications.
+Authors can add the "defer" attribute to a script, in which case it will not halt document parsing and will execute after the document is parsed. HTML5 adds an option to mark the script as asynchronous so it will be parsed and executed by a different thread.
+
+### Speculative parsing
+
+Both WebKit and Firefox do this optimization. While executing scripts, another thread parses the rest of the document and finds out what other resources need to be loaded from the network and loads them. In this way, resources can be loaded on parallel connections and overall speed is improved. Note: the speculative parser only parses references to external resources like external scripts, style sheets and images: it doesn't modify the DOM tree - that is left to the main parser.
+
+### Style sheets
+
+Style sheets on the other hand have a different model.
+Conceptually it seems that since style sheets don't change the DOM tree, there is no reason to wait for them and stop the document parsing. There is an issue, though, of scripts asking for style information during the document parsing stage.
+If the style is not loaded and parsed yet, the script will get wrong answers and apparently this caused lots of problems.
+It seems to be an edge case but is quite common.
+Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed.
+WebKit blocks scripts only when they try to access certain style properties that may be affected by unloaded style sheets.
+
+## Render tree construction
+
+While the DOM tree is being constructed, the browser constructs another tree, the render tree.
+This tree is of visual elements in the order in which they will be displayed.
+It is the visual representation of the document.
+The purpose of this tree is to enable painting the contents in their correct order.
+
+
+Firefox calls the elements in the render tree "frames". WebKit uses the term renderer or render object.
+
+A renderer knows how to lay out and paint itself and its children.
+
+WebKit's RenderObject class, the base class of the renderers, has the following definition:
+
+```js
+class RenderObject{
+  virtual void layout();
+  virtual void paint(PaintInfo);
+  virtual void rect repaintRect();
+  Node* node;  //the DOM node
+  RenderStyle* style;  // the computed style
+  RenderLayer* containgLayer; //the containing z-index layer
+}
+```
+
+Each renderer represents a rectangular area usually corresponding to a node's CSS box, as described by the CSS2 spec.
+It includes geometric information like width, height and position.
+
+The box type is affected by the "display" value of the style attribute that is relevant to the node (see the <a href="#style_computation">style computation</a> section).
+Here is WebKit code for deciding what type of renderer should be created for a DOM node, according to the display attribute:
+
+```js
+RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
+{
+    Document* doc = node->document();
+    RenderArena* arena = doc->renderArena();
+    ...
+    RenderObject* o = 0;
+
+    switch (style->display()) {
+        case NONE:
+            break;
+        case INLINE:
+            o = new (arena) RenderInline(node);
+            break;
+        case BLOCK:
+            o = new (arena) RenderBlock(node);
+            break;
+        case INLINE_BLOCK:
+            o = new (arena) RenderBlock(node);
+            break;
+        case LIST_ITEM:
+            o = new (arena) RenderListItem(node);
+            break;
+       ...
+    }
+
+    return o;
+}
+```
+
+The element type is also considered: for example, form controls and tables have special frames.
+
+In WebKit if an element wants to create a special renderer, it will override the `createRenderer()` method.
+The renderers point to style objects that contains non geometric information.
+
+### The render tree relation to the DOM tree
+
+The renderers correspond to DOM elements, but the relation is not one to one.
+Non-visual DOM elements will not be inserted in the render tree. An example is the "head" element. Also elements whose display value was assigned to "none" will not appear in the tree (whereas elements with "hidden" visibility will appear in the tree).
+
+There are DOM elements which correspond to several visual objects. These are usually elements with complex structure that cannot be described by a single rectangle. For example, the "select" element has three renderers: one for the display area, one for the drop down list box and one for the button.
+Also when text is broken into multiple lines because the width is not sufficient for one line, the new lines will be added as extra renderers.
+
+Another example of multiple renderers is broken HTML.
+According to the CSS spec an inline element must contain either only block elements or only inline elements.
+In the case of mixed content, anonymous block renderers will be created to wrap the inline elements.
+
+Some render objects correspond to a DOM node but not in the same place in the tree.
+Floats and absolutely positioned elements are out of flow, placed in a different part of the tree, and mapped to the real frame.
+A placeholder frame is where they should have been.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/937hKTBHU2FAEyMRdi5z.png", alt="The render tree and the corresponding DOM tree.", width="731", height="396" %}
+  <figcaption>Figure 13: The render tree and the corresponding DOM tree. The "Viewport" is the initial containing block. In WebKit it will be the "RenderView" object</figcaption>
+</figure>
+
+#### The flow of constructing the tree
+
+In Firefox, the presentation is registered as a listener for DOM updates.
+The presentation delegates frame creation to the `FrameConstructor` and the constructor resolves style (see [style computation](#style)) and creates a frame.
+
+In WebKit the process of resolving the style and creating a renderer is called "attachment".
+Every DOM node has an "attach" method.
+Attachment is synchronous, node insertion to the DOM tree calls the new node "attach" method.
+
+Processing the html and body tags results in the construction of the render tree root.
+The root render object corresponds to what the CSS spec calls the containing block: the top most block that contains all other blocks. Its dimensions are the viewport: the browser window display area dimensions.
+Firefox calls it `ViewPortFrame` and WebKit calls it `RenderView`.
+This is the render object that the document points to.
+The rest of the tree is constructed as a DOM nodes insertion.
+
+See [the CSS2 spec on the processing model](http://www.w3.org/TR/CSS21/intro.html#processing-model).
+
+### Style Computation
+
+Building the render tree requires calculating the visual properties of each render object.
+This is done by calculating the style properties of each element.
+
+The style includes style sheets of various origins, inline style elements and visual properties in the HTML (like the "bgcolor" property).The later is translated to matching CSS style properties.
+
+The origins of style sheets are the browser's default style sheets, the style sheets provided by the page author and user style sheets - these are style sheets provided by the browser user (browsers let you define your favorite styles. In Firefox, for instance, this is done by placing a style sheet in the "Firefox Profile" folder).
+
+Style computation brings up a few difficulties:
+
+1. Style data is a very large construct, holding the numerous style properties, this can cause memory problems.
+1. Finding the matching rules for each element can cause performance issues if it's not optimized. Traversing the entire rule list for each element to find matches is a heavy task.  Selectors can have complex structure that can cause the matching process to start on a seemingly promising path that is proven to be futile and another path has to be tried.
+
+    For example - this compound selector:
+
+    ```css
+    div div div div{
+    ...
+    }
+    ```
+
+    Means the rules apply to a `<div>` who is the descendant of 3 divs. Suppose you want to check if the rule applies for a given `<div>` element. You choose a certain path up the tree for checking. You may need to traverse the node tree up just to find out there are only two divs and the rule does not apply. You then need to try other paths in the tree.
+
+1. Applying the rules involves quite complex cascade rules that define the hierarchy of the rules.
+
+Let's see how the browsers face these issues:
+
+### Sharing style data
+
+WebKit nodes references style objects (RenderStyle).
+These objects can be shared by nodes in some conditions.
+The nodes are siblings or cousins and:
+
+1. The elements must be in the same mouse state (e.g., one can't be in :hover while the other isn't)
+1. Neither element should have an id
+1. The tag names should match
+1. The class attributes should match
+1. The set of mapped attributes must be identical
+1. The link states must match
+1. The focus states must match
+1. Neither element should be affected by attribute selectors, where affected is defined as having any selector match that uses an attribute selector in any position within the selector at all
+1. There must be no inline style attribute on the elements
+1. There must be no sibling selectors in use at all. WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.
+
+### Firefox rule tree
+
+Firefox has two extra trees for easier style computation: the rule tree and style context tree.
+WebKit also has style objects but they are not stored in a tree like the style context tree, only the DOM node points to its relevant style.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qnms42muTKM1KVUarpVH.png", alt="Firefox style context tree.", width="640", height="407" %}
+  <figcaption>Figure 14: Firefox style context tree.</figcaption>
+</figure>
+
+The style contexts contain end values. The values are computed by applying all the matching rules in the correct order and performing manipulations that transform them from logical to concrete values. For example, if the logical value is a percentage of the screen it will be calculated and transformed to absolute units.
+The rule tree idea is really clever.  It enables sharing these values between nodes to avoid computing them again.  This also saves space.
+
+All the matched rules are stored in a tree. The bottom nodes in a path have higher priority.
+The tree contains all the paths for rule matches that were found.
+Storing the rules is done lazily. The tree isn't calculated at the beginning for every node, but whenever a node style needs to be computed the computed paths are added to the tree.
+
+The idea is to see the tree paths as words in a lexicon.
+Lets say we already computed this rule tree:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RwZNIJLCLZqbH2c9eXXg.png", alt="Computed rule tree", width="400", height="261" %}
+  <figcaption>Figure 15: Computed rule tree.</figcaption>
+</figure>
+
+Suppose we need to match rules for another element in the content tree, and find out the matched rules (in the correct order) are B-E-I. We already have this path in the tree because we already computed path  A-B-E-I-L. We will now have less work to do.
+
+Let's see how the tree saves us work.
+
+### Division into structs
+
+The style contexts are divided into structs. Those structs contain style information for a certain category like border or color. All the properties in a struct are either inherited or non inherited. Inherited properties are properties that unless defined by the element, are inherited from its parent. Non inherited properties (called "reset" properties) use default values if not defined.
+
+The tree helps us by caching entire structs (containing the computed end values) in the tree. The idea is that if the bottom node didn't supply a definition for a struct, a cached struct in an upper node can be used.
+
+### Computing the style contexts using the rule tree
+
+When computing the style context for a certain element, we first compute a path in the rule tree or use an existing one.
+We then begin to apply the rules in the path to fill the structs in our new style context. We start at the bottom node of the path - the one with the highest precedence (usually the most specific selector) and traverse the tree up until our struct is full.
+If there is no specification for the struct in that rule node, then we can greatly optimize - we go up the tree until we find a node that specifies it fully and simply point to it - that's the best optimization - the entire struct is shared.
+This saves computation of end values and memory.
+
+If we find partial definitions we go up the tree until the struct is filled.
+
+If we didn't find any definitions for our struct then, in case the struct is an "inherited" type, we point to the struct of our parent in the **context tree**. In this case we also succeeded in sharing structs.
+If it's a reset struct then default values will be used.
+
+If the most specific node does add values then we need to do some extra calculations for transforming it to actual values.
+We then cache the result in the tree node so it can be used by children.
+
+In case an element has a sibling or a brother that points to the same tree node then the **entire style context** can be shared between them.
+
+Lets see an example:
+Suppose we have this HTML
+
+```html
+<html>
+  <body>
+    <div class="err" id="div1">
+      <p>
+        this is a <span class="big"> big error </span>
+        this is also a
+        <span class="big"> very  big  error</span> error
+      </p>
+    </div>
+    <div class="err" id="div2">another error</div>
+  </body>
+</html>
+```
+
+And the following rules:
+
+```css
+div {margin: 5px; color:black}
+.err {color:red}
+.big {margin-top:3px}
+div span {margin-bottom:4px}
+#div1 {color:blue}
+#div2 {color:green}
+```
+
+To simplify things let's say we need to fill out only two structs: the color struct and the margin struct.
+The color struct contains only one member: the color
+The margin struct contains the four sides.
+
+The resulting rule tree will look like this (the nodes are marked with the node name: the number of the rule they point at):
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zJM11a5O0t2C91bXl8wS.png", alt="The rule tree", width="500", height="294" %}
+  <figcaption>Figure 16: The rule tree</figcaption>
+</figure>
+
+The context tree will look like this (node name: rule node they point to):
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3QoZ4kD7dDBR6HYobs4w.png", alt="The context tree.", width="400", height="305" %}
+  <figcaption>Figure 17: The context tree</figcaption>
+</figure>
+
+Suppose we parse the HTML and get to the second `<div>` tag. We need to create a style context for this node and fill its style structs.
+
+We will match the rules and discover that the matching rules for the `<div>` are 1, 2 and 6.
+This means there is already an existing path in the tree that our element can use and we just need to add another node to it for rule 6 (node F in the rule tree).
+
+We will create a style context and put it in the context tree.  The new style context will point to node F in the rule tree.
+
+We now need to fill the style structs. We will begin by filling out the margin struct.
+Since the last rule node (F) doesn't add to the margin struct, we can go up the tree until we find a cached struct computed in a previous node insertion and use it.
+We will find it on node B, which is the uppermost node that specified margin rules.
+
+We do have a definition for the color struct, so we can't use a cached struct.
+Since color has one attribute we don't need to go up the tree to fill other attributes.
+We will compute the end value (convert string to RGB etc) and cache the computed struct on this node.
+
+The work on the second `<span>` element is even easier. We will match the rules and come to the conclusion that it points to rule G, like the previous span.
+Since we have siblings that point to the same node, we can share the entire style context and just point to the context of the previous span.
+
+For structs that contain rules that are inherited from the parent, caching is done on the context tree (the color property is actually inherited, but Firefox treats it as reset and caches it on the rule tree).
+
+For instance if we added rules for fonts in a paragraph:
+
+```css
+p {font-family: Verdana; font size: 10px; font-weight: bold}
+```
+
+Then the paragraph element, which is a child of the div in the context tree, could have shared the same font struct as his parent. This is if no font rules were specified for the paragraph.
+
+In WebKit, who does not have a rule tree, the matched declarations are traversed four times. First non-important high priority properties are applied (properties that should be applied first because others depend on them, such as display), then high priority important, then normal priority non-important, then normal priority important rules.
+This means that properties that appear multiple times will be resolved according to the correct cascade order. The last wins.
+
+So to summarize: sharing the style objects (entirely or some of the structs inside them) solves issues 1 and 3. The Firefox rule tree also helps in applying the properties in the correct order.
+
+### Manipulating the rules for an easy match
+
+There are several sources for style rules:
+
+1. CSS rules, either in external style sheets or in style elements.
+    ```css
+    p {color: blue}
+    ```
+1. Inline style attributes like
+    ```html
+    <p style="color: blue" />
+    ```
+1. HTML visual attributes (which are mapped to relevant style rules)
+    ```html
+    <p bgcolor="blue" />
+    ```
+The last two are easily matched to the element since he owns the style attributes and HTML attributes can be mapped using the element as the key.
+
+As noted previously in issue #2, the CSS rule matching can be trickier.
+To solve the difficulty, the rules are manipulated for easier access.
+
+After parsing the style sheet, the rules are added to one of several hash maps, according to the selector.
+There are maps by id, by class name, by tag name and a general map for anything that doesn't fit into those categories.
+If the selector is an id, the rule will be added to the id map, if it's a class it will be added to the class map etc.
+
+This manipulation makes it much easier to match rules. There is no need to look in every declaration: we can extract the relevant rules for an element from the maps.
+This optimization eliminates 95+% of the rules, so that they need not even be considered during the matching process(4.1).
+
+Let's see for example the following style rules:
+
+```css
+p.error {color: red}
+#messageDiv {height: 50px}
+div {margin: 5px}
+```
+
+The first rule will be inserted into the class map. The second into the id map and the third into the tag map.
+
+For the following HTML fragment;
+
+```html
+<p class="error">an error occurred</p>
+<div id=" messageDiv">this is a message</div>
+```
+
+We will first try to find rules for the p element. The class map will contain an "error" key under which the rule for "p.error" is found.
+The div element will have relevant rules in the id map (the key is the id) and the tag map.
+So the only work left is finding out which of the rules that were extracted by the keys really match.
+
+For example if the rule for the div was
+
+```css
+table div {margin: 5px}
+```
+
+it will still be extracted from the tag map, because the key is the rightmost selector, but it would not match our div element, who does not have a table ancestor.
+
+Both WebKit and Firefox do this manipulation.
+
+### Applying the rules in the correct cascade order
+
+The style object has properties corresponding to every visual attribute (all CSS attributes but more generic).
+If the property is not defined by any of the matched rules, then some properties can be inherited by the parent element style object. Other properties have default values.
+
+The problem begins when there is more than one definition - here comes the cascade order to solve the issue.
+
+### Style sheet cascade order
+
+A declaration for a style property can appear in several style sheets, and several times inside a style sheet.
+This means the order of applying the rules is very important. This is called the "cascade" order.
+According to CSS2 spec, the cascade order is (from low to high):
+
+1. Browser declarations
+1. User normal declarations
+1. Author normal declarations
+1. Author important declarations
+1. User important declarations
+
+The browser declarations are least important and the user overrides the author only if the declaration was marked as important.
+Declarations with the same order will be sorted by [specificity](#specificity) and then the order they are specified.
+The HTML visual attributes are translated to matching CSS declarations . They are treated as author rules with low priority.
+
+### Specificity
+
+The selector specificity is defined by the [CSS2 specification](http://www.w3.org/TR/CSS2/cascade.html#specificity) as follows:
+
+1. count 1 if the declaration it is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
+1. count the number of ID attributes in the selector (= b)
+1. count the number of other attributes and pseudo-classes in the selector (= c)
+1. count the number of element names and pseudo-elements in the selector (= d) 
+
+Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
+
+The number base you need to use is defined by the highest count you have in one of the categories.
+
+For example, if a=14 you can use hexadecimal base.  In the unlikely case where a=17 you will need a 17 digits number base.
+The later situation can happen with a selector like this:
+html body div div p… (17 tags in your selector… not very likely).
+
+Some examples:
+```css
+ *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
+ li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
+ li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
+ ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
+ ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
+ h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
+ ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
+ li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
+ #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
+ style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
+```
+
+### Sorting the rules
+
+After the rules are matched, they are sorted according to the cascade rules.
+WebKit uses bubble sort for small lists and merge sort for big ones.
+WebKit implements sorting by overriding the ">" operator for the rules:
+
+```css
+static bool operator >(CSSRuleData& r1, CSSRuleData& r2)
+{
+    int spec1 = r1.selector()->specificity();
+    int spec2 = r2.selector()->specificity();
+    return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2;
+}
+```
+
+### Gradual process
+
+WebKit uses a flag  that marks if all top level style sheets (including @imports) have been loaded.
+If the style is not fully loaded when attaching, place holders are used and it is marked in the document, and they will be recalculated once the style sheets were loaded.
+
+## Layout
+
+When the renderer is created and added to the tree, it does not have a position and size. Calculating these values is called layout or reflow.
+
+HTML uses a flow based layout model, meaning that most of the time it is possible to compute the geometry in a single pass. Elements later "in the flow" typically do not affect the geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document. There are exceptions: for example, HTML tables may require more than one pass.
+
+The coordinate system is relative to the root frame.  Top and left coordinates are used.
+
+Layout is a recursive process.  It begins at the root renderer, which corresponds to the `<html>` element of the HTML document. Layout continues recursively through some or all of the frame hierarchy, computing geometric information for each renderer that requires it.
+
+The position of the root renderer is 0,0 and its dimensions are the viewport - the visible part of the browser window.
+
+All renderers have a "layout" or "reflow" method, each renderer invokes the layout method of its children that need layout.
+
+### Dirty bit system
+
+In order not to do a full layout for every small change, browsers use a "dirty bit" system.
+A renderer that is changed or added marks itself and its children as "dirty": needing layout.
+
+There are two flags: "dirty", and "children are dirty" which means that although the renderer itself may be OK, it has at least one child that needs a layout.
+
+### Global and incremental layout
+
+Layout can be triggered on the entire render tree - this is "global" layout.
+This can happen as a result of:
+
+1. A global style change that affects all renderers, like a font size change.
+1. As a result of a screen being resized
+
+Layout can be incremental, only the dirty renderers will be laid out (this can cause some damage which will require extra layouts).
+
+Incremental layout is triggered (asynchronously) when renderers are dirty. For example when new renderers are appended to the render tree after extra content came from the network and was added to the DOM tree.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pjIcQqbVvJPryLtHpefc.png", alt="Incremental layout.", width="326", height="341" %}
+  <figcaption>Figure 18: Incremental layout - only dirty renderers and their children are laid out (<a href="#3_6">3.6</a>)</figcaption>
+</figure>
+
+### Asynchronous and Synchronous layout
+
+Incremental layout is done asynchronously. Firefox queues "reflow commands" for incremental layouts and a scheduler triggers batch execution of these commands.
+WebKit also has a timer that executes an incremental layout - the tree is traversed and "dirty" renderers are layout out.
+
+Scripts asking for style information, like "offsetHeight" can trigger incremental layout synchronously.
+
+Global layout will usually be triggered synchronously.
+
+Sometimes layout is triggered as a callback after an initial layout because some attributes, like the scrolling position changed.
+
+### Optimizations
+
+When a layout is triggered by a "resize" or a change in the renderer position(and not size), the renders sizes are taken from a cache and not recalculated…
+
+In some cases only a sub tree is modified and layout does not start from the root. This can happen in cases where the change is local and does not affect its surroundings - like text inserted into text fields (otherwise every keystroke would trigger a layout starting from the root).
+
+### The layout process
+
+The layout usually has the following pattern:
+
+1. Parent renderer determines its own width.
+1. Parent goes over children and:
+    1. Place the child renderer (sets its x and y).
+    1. Calls child layout if needed - they are dirty or we are in a global layout, or for some other reason - which calculates the child's height.
+1. Parent uses children's accumulative heights and the heights of margins and padding to set its own height - this will be used by the parent renderer's parent.
+1. Sets its dirty bit to false.
+
+Firefox uses a "state" object(nsHTMLReflowState) as a parameter to layout (termed "reflow"). Among others the state includes the parents width.
+
+The output of the Firefox layout is a "metrics" object(nsHTMLReflowMetrics). It will contain the renderer computed height.
+
+### Width calculation
+
+The renderer's width is calculated using the container block's width, the renderer's style "width" property, the margins and borders.
+
+For example the width of the following div:
+
+```html
+<div style="width: 30%"/>
+```
+Would be calculated by WebKit as the following(class RenderBox method calcWidth):
+
+- The container width is the maximum of the containers availableWidth and 0.
+The availableWidth in this case is the contentWidth which is calculated as:
+
+```css
+clientWidth() - paddingLeft() - paddingRight()
+```
+
+clientWidth and clientHeight represent the interior of an object
+excluding border and scrollbar.
+
+- The elements width is the "width" style attribute.
+It will be calculated as an absolute value by computing the percentage of the container width.
+
+- The horizontal borders and paddings are now added.
+
+So far this was the calculation of the "preferred width".
+Now the minimum and maximum widths will be calculated.
+
+If the preferred width is greater then the maximum width, the maximum width is used.
+If it is less then the minimum width (the smallest unbreakable unit) then the minimum width is used.
+
+The values are cached in case a layout is needed, but the width does not change.
+
+### Line Breaking
+
+When a renderer in the middle of a layout decides that it needs to break, the renderer stops and propagates to the layout's parent that it needs to be broken.
+The parent creates the extra renderers and calls layout on them.
+
+## Painting
+
+In the painting stage, the render tree is traversed and the renderer's "paint()" method is called to display content on the screen.
+Painting uses the UI infrastructure component.
+
+### Global and Incremental
+
+Like layout, painting can also be global - the entire tree is painted - or incremental.
+In incremental painting, some of the renderers change in a way that does not affect the entire tree.
+The changed renderer invalidates its rectangle on the screen.
+This causes the OS to see it as a "dirty region" and generate a "paint" event.
+The OS does it cleverly and coalesces several regions into one.
+In Chrome it is more complicated because the renderer is in a different process then the main process. Chrome simulates the OS behavior to some extent.
+The presentation listens to these events and delegates the message to the render root.  The tree is traversed until the relevant renderer is reached. It will repaint itself (and usually its children).
+
+### The painting order
+
+[CSS2 defines the order of the painting process](http://www.w3.org/TR/CSS21/zindex.html).
+This is actually the order in which the elements are stacked in the [stacking contexts](#stackingcontext). This order affects painting since the stacks are painted from back to front.
+The stacking order of a block renderer is:
+
+1. background color
+1. background image
+1. border
+1. children
+1. outline
+
+### Firefox display list
+
+Firefox goes over the render tree and builds a display list for the painted rectangular.
+It contains the renderers relevant for the rectangular, in the right painting order (backgrounds of the renderers, then borders etc).
+
+That way the tree needs to be traversed only once for a repaint instead of several times - painting all backgrounds, then all images, then all borders etc.
+
+Firefox optimizes the process by not adding elements that will be hidden, like elements completely beneath other opaque elements.
+
+#### WebKit rectangle storage
+Before repainting, WebKit saves the old rectangle as a bitmap.
+It then paints only the delta between the new and old rectangles.
+
+### Dynamic changes
+
+The browsers try to do the minimal possible actions in response to a change.
+So changes to an element's color will cause only repaint of the element.
+Changes to the element position will cause layout and repaint of the element, its children and possibly siblings.
+Adding a DOM node will cause layout and repaint of the node.
+Major changes, like increasing font size of the "html" element, will cause invalidation of caches, relayout and repaint of the entire tree.
+
+### The rendering engine's threads
+
+The rendering engine is single threaded. Almost everything, except network operations, happens in a single thread.
+In Firefox and Safari this is the main thread of the browser. In Chrome it's the tab process main thread.
+
+Network operations can be performed by several parallel threads. The number of parallel connections is limited (usually 2 - 6 connections).
+
+### Event loop
+
+The browser main thread is an event loop.
+It's an infinite loop that keeps the process alive. It waits for events (like layout and paint events) and processes them.
+This is Firefox code for the main event loop:
+
+```js
+while (!mExiting)
+    NS_ProcessNextEvent(thread);
+```
+
+## CSS2 visual model
+
+### The canvas
+
+According to the [CSS2 specification](http://www.w3.org/TR/CSS21/intro.html#processing-model),
+the term canvas describes "the space where the formatting structure is rendered": where the browser paints the content.
+
+The canvas is infinite for each dimension of the space but browsers choose an initial width based on the dimensions of the viewport.
+
+According to [www.w3.org/TR/CSS2/zindex.html](http://www.w3.org/TR/CSS2/zindex.html),
+the canvas is transparent if contained within another, and given a browser defined color if it is not.
+
+### CSS Box model
+
+The [CSS box model](http://www.w3.org/TR/CSS2/box.html) describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
+
+Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KbqHxGe3HMLM5BbXMcP8.jpg", alt="CSS2 box model", width="509", height="348" %}
+  <figcaption>Figure 19: CSS2 box model</figcaption>
+</figure>
+
+Each  node generates 0…n such boxes.
+
+All elements have a "display" property that determines the type of box that will be generated.
+
+Examples:
+
+```markup
+block: generates a block box.
+inline: generates one or more inline boxes.
+none: no box is generated.
+```
+
+The default is inline but the browser style sheet may set other defaults.
+For example: the default display for the "div" element is block.
+
+You can find a default style sheet example here: [www.w3.org/TR/CSS2/sample.html](http://www.w3.org/TR/CSS2/sample.html).
+
+### Positioning scheme
+
+There are three schemes:
+
+1. Normal: the object is positioned according to its place in the document. This means its place in the render tree is like its place in the DOM tree and laid out according to its box type and dimensions
+1. Float: the object is first laid out like normal flow, then moved as far left or right as possible
+1. Absolute: the object is put in the render tree in a different place than in the DOM tree
+
+The positioning scheme is set by the "position" property and the "float" attribute.
+
+- static and relative cause a normal flow
+- absolute and fixed cause absolute positioning
+
+In static positioning no position is defined and the default positioning is used.
+In the other schemes, the author specifies the position: top, bottom, left, right.
+
+The way the box is laid out is determined by:
+
+- Box type
+- Box dimensions
+- Positioning scheme
+- External information such as image size and the size of the screen
+
+### Box types
+
+Block box: forms a block - has its own rectangle in the browser window.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fvhwoy1W1Se7IY4XyiXp.png", alt="Block box.", width="150", height="127" %}
+  <figcaption>Figure 20: Block box</figcaption>
+</figure>
+
+Inline box: does not have its own block, but is inside a containing block.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/srPz5klZnpr6j5edpV45.png", alt="Inline boxes.", width="300", height="233" %}
+  <figcaption>Figure 21: Inline boxes</figcaption>
+</figure>
+
+Blocks are formatted vertically one after the other.
+Inlines are formatted horizontally.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8i6bZtuslRR3kJdsST6p.png", alt="Block and Inline formatting.", width="350", height="324" %}
+  <figcaption>Figure 22: Block and Inline formatting</figcaption>
+</figure>
+
+Inline boxes are put inside lines or "line boxes".
+The lines are at least as tall as the tallest box but can be taller, when the boxes are aligned "baseline" - meaning the bottom part of an element is aligned at a point of another box other then the bottom.
+If the container width is not enough, the inlines will be put on several lines.
+This is usually what happens in a paragraph.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xChsrrYLPU7MfekdR7zS.png", alt="Lines.", width="400", height="277" %}
+  <figcaption>Figure 23: Lines</figcaption>
+</figure>
+
+### Positioning
+
+#### Relative
+
+Relative positioning - positioned like usual and then moved by the required delta.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/C1rUmDaOa8kGRx1PSdUu.png", alt="Relative positioning.", width="500", height="261" %}
+  <figcaption>Figure 24: Relative positioning</figcaption>
+</figure>
+
+#### Floats
+
+A float box is shifted to the left or right of a line. The interesting feature is that the other boxes flow around it.
+The HTML:
+
+```html
+<p>
+  <img style="float: right" src="images/image.gif" width="100" height="100">
+  Lorem ipsum dolor sit amet, consectetuer...
+</p>
+```
+
+Will look like:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ozqqfqboQ0IJJWlv5xXx.png", alt="Float.", width="444", height="203" %}
+  <figcaption>Figure 25: Float</figcaption>
+</figure>
+
+#### Absolute and fixed
+
+The layout is defined exactly regardless of the normal flow. The element does not participate in the normal flow.
+The dimensions are relative to the container.
+In fixed, the container is the viewport.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0xwOrAiWm2kpuCecsRv1.png", alt="Fixed positioning.", width="500", height="343" %}
+  <figcaption>Figure 26: Fixed positioning</figcaption>
+</figure>
+
+{% Aside %}
+The fixed box will not move even when the document is scrolled!
+{% endAside %}
+
+### Layered representation
+
+This is specified by the z-index CSS property.
+It represents the third dimension of the box: its position along the "z axis".
+
+The boxes are divided into stacks (called stacking contexts).
+In each stack the back elements will be painted first and the forward elements on top, closer to the user.  In case of overlap the foremost element will hide the former element.
+
+The stacks are ordered according to the z-index property.
+Boxes with "z-index" property form a local stack.
+The viewport has the outer stack.
+
+Example:
+
+```html
+<style type="text/css">
+  div {
+    position: absolute;
+    left: 2in;
+    top: 2in;
+  }
+</style>
+
+<p>
+  <div
+    style="z-index: 3;background-color:red; width: 1in; height: 1in; ">
+  </div>
+  <div
+    style="z-index: 1;background-color:green;width: 2in; height: 2in;">
+  </div>
+</p>
+```
+
+The result will be this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EXneyo5lwaJ6g09BuCo6.png", alt="Fixed positioning.", width="254", height="227" %}
+  <figcaption>Figure 27: Fixed positioning</figcaption>
+</figure>
+
+Although the red div precedes the green one in the markup, and would have been painted before in the regular flow, the z-index property is higher, so it is more forward in the stack held by the root box.
+
+## Resources
+
+1. Browser architecture
+    1. Grosskurth, Alan.  [A Reference Architecture for Web Browsers (pdf)](http://grosskurth.ca/papers/browser-refarch.pdf)
+    1. Gupta, Vineet. [How Browsers Work - Part 1 - Architecture](http://www.vineetgupta.com/2010/11/how-browsers-work-part-1-architecture/)
+
+1. Parsing
+    1. Aho, Sethi, Ullman, Compilers: Principles, Techniques, and Tools (aka the "Dragon book"), Addison-Wesley, 1986
+    1. Rick Jelliffe. [The Bold and the Beautiful: two new drafts for HTML 5.](http://broadcast.oreilly.com/2009/05/the-bold-and-the-beautiful-two.html)
+
+1. Firefox
+    1. L. David Baron, [Faster HTML and CSS: Layout Engine Internals for Web Developers.](http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtml)
+    1. L. David Baron, [Faster HTML and CSS: Layout Engine Internals for Web Developers (Google tech talk video)](https://www.youtube.com/watch?v=a2_6bGNZ7bA)
+    1. L. David Baron, [Mozilla's Layout Engine](http://www.mozilla.org/newlayout/doc/layout-2006-07-12/slide-6.xhtml)
+    1. L. David Baron, [Mozilla Style System Documentation](http://www.mozilla.org/newlayout/doc/style-system.html)
+    1. Chris Waterson, [Notes on HTML Reflow](http://www.mozilla.org/newlayout/doc/reflow.html)
+    1. Chris Waterson, [Gecko Overview](http://www.mozilla.org/newlayout/doc/gecko-overview.htm)
+    1. Alexander Larsson, [The life of an HTML HTTP request](https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request)
+
+1. WebKit
+    1. David Hyatt, [Implementing CSS(part 1)](http://weblogs.mozillazine.org/hyatt/archives/cat_safari.html)
+    1. David Hyatt, [An Overview of WebCore](http://weblogs.mozillazine.org/hyatt/WebCore/chapter2.html)
+    1. David Hyatt, [WebCore Rendering](http://webkit.org/blog/114/)
+    1. David Hyatt, [The FOUC Problem](http://webkit.org/blog/66/the-fouc-problem/)
+
+1. W3C Specifications
+    1. [HTML 4.01 Specification](http://www.w3.org/TR/html4/)
+    1. [W3C HTML5 Specification](http://dev.w3.org/html5/spec/Overview.html)
+    1. [Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification](http://www.w3.org/TR/CSS2/)
+
+1. Browsers build instructions
+    1. Firefox. [https://developer.mozilla.org/Build_Documentation](https://developer.mozilla.org/Build_Documentation)
+    1. WebKit. [http://webkit.org/building/build.html](http://webkit.org/building/build.html)
+
+{% Aside %}
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4qf836sZm1a8OOEUeUdK.png", alt="Tali Garsiel", width="200", height="200", class="float-left" %}
+[Tali Garsiel](http://taligarsiel.com/) is a developer in Israel. She started as a web developer in 2000, and became aquainted with Netscape's "evil" layer model. Just like Richard Feynmann, she had a fascination for figuring out how things work so she began digging into browser internals and documenting what she found. Tali also has published a short [guide on client-side performance](http://taligarsiel.com/ClientSidePerformance.html). 
+{% endAside %}
+
+### Translations
+
+This page has been translated into Japanese, twice! [How Browsers Work - Behind the Scenes of Modern Web Browsers (ja)](http://cou929.nu/docs/how-browsers-work/) by [@_kosei_](https://twitter.com/#!/_kosei_) and also [ブラウザってどうやって動いてるの？（モダンWEBブラウザシーンの裏側](http://shanon-tech.blogspot.com/2011/09/web.html) by [@ikeike443](https://twitter.com/#!/ikeike443) and [@kiyoto01](https://twitter.com/#!/kiyoto01).
+
+You can view the externally hosted translations of [Korean](http://helloworld.naver.com/helloworld/59361) and [Turkish](http://sonsuzdongu.com/blog/tarayicilar-nasil-calisir-modern-web-tarayicilarin-perde-arkasi-cevirisi) as well.
+
+Thanks everyone!
diff --git a/src/site/content/en/blog/html5-in-deviantart-muro/index.md b/src/site/content/en/blog/html5-in-deviantart-muro/index.md
new file mode 100644
index 00000000000..35f0aaeedec
--- /dev/null
+++ b/src/site/content/en/blog/html5-in-deviantart-muro/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Case Study - HTML5 in deviantART muro
+authors:
+  - michaeldewey
+date: 2010-09-28
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+ 
+On August 7, 2010, deviantART celebrated its 10th birthday.
+We celebrated our birthday by launching an HTML5 drawing tool called deviantART muro.
+The tool can be used as a stand-alone web application as well as a lightweight drawing
+tool for adding pictures to forum comments.
+
+The deviantART community greeted this new drawing tool with great enthusiasm,
+and the tool itself now sees as much traffic as some decent-sized web properties.
+Since its launch, a new drawing is submitted using deviantART muro about once every 5 seconds.
+These are just the numbers of drawings that are completed; many more had been started and not saved.
+
+The following article gives some background on how we are using HTML5,
+why we chose to use the technologies that we did, and things I discovered while writing
+one of the first full-blown HTML5 applications for a major website.
+
+## My Background
+
+In late 2005, I was one of the developers responsible for the drawing tool used by
+[Draw Here](http://drawhere.com/).  The tool was a 'web graffiti' tool launched by a bookmarklet.
+It was used to draw pictures on any webpages.  Draw Here was initially created using
+[SVG](http://www.w3.org/Graphics/SVG/) (Firefox 1.5 beta had just come out; it was one of the first browsers to support SVG).
+
+On Internet Explorer, we were creating SVG in the background, but were rendering the drawing
+using [VML](http://www.w3.org/TR/NOTE-VML).
+WebKit did not support SVG at the time, so I ported our code to render the SVG using canvas
+(which was a new technology seen only in WebKit at the time). At one point, I even made a port
+so that our SVG code could be rendered on older browsers using a bunch of div elements pasted together.
+(This, of course, was more of a joke to show it could be done and was painfully slow to use).
+
+In its heyday, Draw Here was being used to make about 100 drawings per day.
+It was complete enough to be called more than just an experiment, although it did not have
+the final polish of a major web application. In mid-2006, the project was abandoned,
+though the site is still limping along today - mostly just for grins.
+
+## Technologies Used by deviantART muro
+
+Because of my background using various HTML5 technologies in their early days,
+I was asked to be the lead developer on deviantART muro. Anybody who is reading this article
+can probably understand why we decided to go with HTML5, rather than a plug-in based technology
+like Silverlight or Flash.  We wanted something that was robust and also something that used open standards.
+
+### Deciding Between Canvas and SVG
+
+We decided to do the drawing layer using canvas. Some people may wonder when they should use
+canvas and when they should use SVG.  There is a lot of overlap in what can be done with the two
+technologies - as Draw Here proved, both technologies can be used to create a drawing application.
+
+I have found that SVG is great if you want to keep handles to objects you had drawn.
+For example, if you want the user to be able to draw a line, and then be able to drag bits of
+the line to change its shape, that would be fairly trivial using SVG. But the same thing is very awkward using canvas.
+
+When you use canvas, you fire stuff onto the canvas, and then you forget about it.
+A blank canvas and one that had been drawn on for an hour act exactly like the same in code,
+and they have about the same memory footprint. While a raster drawing program usually works really well
+with the fire and forgets technology, it does make certain things hard. For example, creating a fast undo
+function is much harder in canvas than in SVG. In SVG, you can just keep a handle to the last several
+lines that you placed, and undoing is just a matter of plucking those objects off.
+With canvas, once a line has been painted, you don't know what was underneath it,
+so removing the line requires redrawing the area that it was in.
+
+Once we bit the bullet and decided that this was going to use HTML5 for canvas,
+we decided to make use of little bits of other HTML5 goodies here and there.
+An example of this is how we used localStorage to keep track of user's brush settings.
+This way, once they have their various brushes set up just the way they like them,
+they can come back to those settings the next time they use our tool.
+localStorage means that we don't have to use up our cookie or make any server trips in order to get those preferences. 
+
+### Using Canvas
+
+Canvas has come a long way in the past five years. With Draw Here, we actually did not publish my canvas port,
+because the performance was not good. Now, I think, it is safe to say that it probably performs better than you imagine.
+Clearing a large section of canvas and redrawing complicated shapes can usually happen at speeds faster than human perception.
+The only thing that I found to be occasionally too slow is using getImageData() to sample pixels.
+The speed of the operation obviously depends on canvas size, but, on a large canvas,
+doing a getImageData() at the wrong time can take long enough for a user to feel like the application is slow to respond.
+
+After reading various canvas tutorials, I originally had the impression that it was a heavyweight thing
+that should be used sparingly, maybe once or twice on a page. I don't know if everybody gets this sense, but I did,
+so I was using it sparingly when we first started coding deviantART muro. After a while though,
+I found that there are lots of little places where a canvas can save you a lot of effort.
+For example, the mock-ups for our app specified that there should be a color picker that was
+two overlapping triangles showing primary and secondary colors:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/x5MFLCTcD1P3j5Ra0S3w.png", alt="Color picker", width="93", height="92" %}
+<figcaption>Color picker</figcaption>
+</figure>
+
+My first instinct was to start thinking of a way to create this little UI gizmo with traditional HTML and CSS.
+People who are great at hacking CSS might point out how all this could be done over CSS,
+but the triangle shape of the two parts that change color makes it not so obvious.
+
+When it occurred to me to just use a canvas, I made the widget with a single DOM element and a couple lines of JavaScript.
+deviantART muro uses canvas nodes all over the place. Each layer is a canvas, and changing layer ordering is
+just a matter of switching z-index. The zoom 'navigator' palette that shows a reduced view of the drawing area
+is just another canvas that occasionally calls drawImage() using the layer canvases as source images.
+Even the drawing area cursor (a two-toned circle that adjusts size depending on brush size and zoom)
+is a canvas that floats underneath the mouse.
+
+The reason that we were more liberal with canvas than other HTML5 technologies is that
+Google's [ExplorerCanvas](http://code.google.com/p/explorercanvas) library makes it
+possible to simulate canvas in Internet Explorer. That leads me to my next section.
+
+## Internet Explorer (IE)
+
+The major reason that more major websites are not using HTML5 yet is that
+they don't want to lose their Internet Explorer users. I am sure that the first question in most
+developer's minds when they hear that deviantART made an HTML5 drawing application is,
+'What was done about IE?' 
+
+We decided at the beginning that we would make a best effort when it came to
+making things work in Internet Explorer, but that we were through doing the least
+common denominator style of web development.  Because the web community has taken the approach
+that a site can't launch until it looks the same on every known browser, users cannot
+tell when their browser is lacking. To the average user, speed issues are blamed on
+their internet connection and every page renders more or less the same.
+So they decide on their favorite browser based on arbitrary little user interface things,
+like the color of their back button.
+
+We decided that we would create any cool feature that came to mind using the HTML5 spec,
+try to make it work in Internet Explorer, and if it could not work, we would just pop up
+a modal explaining that the feature was not available because their browser did not yet implement a web standard.
+
+We initially tried to make things work with Google's
+[ExplorerCanvas](http://code.google.com/p/explorercanvas/) (exCanvas).
+It is surprisingly good at mimicking canvas for most things. It does have one downside, though.
+Every stroke made on the canvas is a DOM object in the underlying VML translation.
+For most things that you might attempt with canvas, this is fine, but some of deviantART muro's brushes
+create shapes from layering lots of strokes together. When Internet Explorer is faced with VML that has
+thousands of nodes in it - even on a fast machine - it falls over and dies.
+Because of this, for a lot of the drawing calls, we actually had to go in and code in actual VML,
+and use tricks where we concatenated the nodes together and use the move command to specify where there should be gaps.
+A lot of the little controls and whatnots in the interface use a canvas tag,
+as those small little uses generally worked fine with exCanvas.
+
+In addition to making some things work with exCanvas, we suggested to users that
+they could continue using their version of Internet Explorer if they installed the
+[Google Chrome Frame plug-in](http://code.google.com/chrome/chromeframe/).
+Google Chrome Frame is a plug-in that embeds Google Chrome's rendering engine in Internet Explorer.
+From the user's perspective, they are still using the browser that they are familiar with;
+but, underneath the covers, our page gets rendered with Chrome's HTML5 capabilities and faster JavaScript.
+
+I knew that it was supposed to be easy to port things to work with Chrome Frame,
+but I didn't realize just how simple. You just put in an extra meta tag and… and that's it,
+things start working in IE. 
+
+## Summary
+
+It is such a joy to work with the new technologies in the HTML5 specification,
+and I would say that everything that I used is definitely ready for prime time.
+Even if you need things to work flawlessly on IE, there is a surprising amount of stuff
+you can do combining canvas and exCanvas. And writing a translation layer between SVG and VML
+is surprisingly doable as well. Once you start using the technology, it is like stepping into a whole new world.
+
+## References
+
+- [deviantART muro](http://muro.deviantart.com)
+- [deviantART's forum](http://forum.deviantart.com/devart/drawplz/) where you can draw (requires login) 
+- [ExplorerCanvas](http://excanvas.sourceforge.net/)
+- [Google Chrome Frame](http://code.google.com/chrome/chromeframe/)
diff --git a/src/site/content/en/blog/http-cache-security/index.md b/src/site/content/en/blog/http-cache-security/index.md
new file mode 100644
index 00000000000..2681c838285
--- /dev/null
+++ b/src/site/content/en/blog/http-cache-security/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Improve security and privacy by updating HTTP Cache
+subhead: Forgetting or misusing the Cache-Control header may negatively impact the security of your website and your users' privacy.
+authors:
+  - arthursonzogni
+description: Forgetting or misusing the Cache-Control header might negatively impact the security of your website and your users' privacy. Get recommendations for high-value websites.
+date: 2022-02-07
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/3MnHBfutFgu2ai1F2mUH.jpg
+alt: Two ducks move through the water, creating a rippling wave.
+tags:
+  - blog
+  - security
+---
+
+By default, resources are always allowed to be cached by any type of cache.
+Not using or misusing the `Cache-Control` header might negatively impact the
+security of your website and your users' privacy.
+
+For personalized responses you want to keep private, we recommend you either:
+
+*  Prevent intermediaries from caching the resource. Set
+   `Cache-Control: private`.
+*  Set an appropriate [secondary cache
+   key](https://datatracker.ietf.org/doc/html/rfc7234#section-4.1).
+   If the response varies due to cookies&mdash;which can happen when the
+   cookie stores credentials&mdash;set `Vary: Cookie`.
+
+Read on to learn why this matters and discover:
+
+1. Security and privacy problems you might be unaware of
+2. Different types of HTTP caches and common misconceptions
+3. Recommended actions for high-value websites
+
+## Cache-related security and privacy risks
+
+### Leaky resources from Spectre vulnerabilities
+
+The [Spectre
+vulnerability](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability))
+allows a page to read an OS process's memory. This means an attacker can
+gain unauthorized access to cross-origin data. As a consequence, modern web
+browsers have restricted usage of some of their features&mdash;such as
+[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)
+or [high resolution timer](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/)&mdash;to
+pages with [cross-origin
+isolation](/cross-origin-isolation-guide/).
+
+Modern web browsers enforce [Cross-Origin Embedder Policy
+(COEP)](https://developer.chrome.com/blog/coep-credentialless-origin-trial/). This ensures cross-origin
+resources are either:
+
+*  Public resources, requested without cookies
+*  Resources explicitly allowed to be shared cross-origin, via CORS or the
+   [CORP](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+   header
+
+The COEP setup doesn't prevent an attacker from exploiting Spectre. However, it
+ensures cross-origin resources are not valuable to the attacker (when loaded
+by the browser as public resource) or allowed to be shared with the attacker (when shared with
+[`CORP: cross-origin`](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))).
+
+### How does HTTP caching affect Spectre?
+
+If the `Cache-Control` header isn't properly set, an attacker could execute an
+attack. For example:
+
+1.  The credentialed resource is cached.
+1.  The attacker loads a cross-origin isolated page.
+1.  The attacker requests the resource again.
+1.  [`COEP:credentialless` is set by the browser](https://developer.chrome.com/blog/coep-credentialless-origin-trial/),
+    so the resource is fetched without cookies. However, a cache may return
+    the credentialled response instead.
+1.  The attacker can then read the personalized resource using a Spectre
+    attack.
+
+Although a web browser's HTTP cache doesn't allow this type of attack to
+happen in practice, additional caches exist outside of the browser's immediate
+control. This may lead to this attack's success.
+
+## Common misconceptions about HTTP caches
+
+### 1. Resources are cached by the browser only
+
+There are often multiple layers of cache. Some caches are dedicated to a
+single user, some to multiple users. Some are controlled by the server, some
+by the user, and some by intermediaries.
+
+*  **Browser caches**. These caches are owned by and dedicated to a single
+   user, implemented in their web browser. They improve performance by
+   avoiding fetching the same response multiple times.
+*  **Local proxy**. This might have been installed by the user, but can also
+   be managed by intermediaries: their company, their organization, or their
+   internet provider. Local proxies often cache a single response for multiple
+   users, which constitutes a "public" cache. Local proxies have multiple
+   roles.
+*  **Origin server cache / CDN**. This is controlled by the server. The Origin
+   server cache's goal is to reduce the load on the origin server by caching
+   the same response for multiple users. A CDN's goals are similar, but spread
+   across the globe and assigned to the closest set of users to reduce latency.
+
+<figure data-size="full">
+  {% Img
+     class="screenshot",
+     src="image/VbsHyyQopiec0718rMq2kTE1hke2/8yvhAw0SiJi62V5yIrT3.png",
+     alt="There are often multiple layers of cache between the browser and server.",
+     width="800", height="712"
+  %}
+  <figcaption>
+     There may be various layers of cache between the browser and server. For example, you may encounter a server cache, followed by a CDN and the browser cache. There may also be a local proxy setup between the CDN and browser cache.
+  </figcaption>
+</figure>
+
+### 2. SSL prevents intermediaries from caching HTTPS resources
+
+Many users regularly use locally-configured proxies, whether for access
+purposes (such as sharing a metered connection), virus inspection, or for data
+loss prevention (DLP) purposes. The intermediary cache is performing [TLS
+interception](https://en.wikipedia.org/wiki/Transport_Layer_Security#TLS_interception).
+
+An intermediary cache is often installed on a company employee's workstations.
+Web browsers are configured to trust the local proxy's certificates.
+
+Ultimately, some HTTPS resources may be cached by these local proxies.
+
+## How HTTP cache works
+
+*  Resources are
+   [implicitly](https://datatracker.ietf.org/doc/html/rfc7234) allowed
+   to be cached by default.
+*  The [primary cache
+   key](https://datatracker.ietf.org/doc/html/rfc7234#section-2) consists of the
+   URL and the method. (URL, method)
+*  The [secondary cache
+   key](https://datatracker.ietf.org/doc/html/rfc7234#section-4.1) is
+   the headers included in the `Vary` header. `Vary: Cookie` indicates the
+   response depends on the `Cookie`.
+*  The `Cache-Control` header gives more fine grained control.
+
+## Take these recommended actions for your website
+
+Developers of high-value websites, which include websites with high traffic
+and websites which interact with personal identifying information, should act
+now to improve security.
+
+The greatest risk occurs when access to a resource varies depending on
+cookies. An intermediary cache may return a response that was requested with
+cookies for a request that wasn't if no preventative action was taken.
+
+We recommend you take one of the following steps:
+
+*  Prevent intermediaries from caching the resource. Set
+   `Cache-Control: private`.
+*  Set an appropriate [secondary cache
+   key](https://datatracker.ietf.org/doc/html/rfc7234#section-4.1).
+   If the response varies due to cookies&mdash;which can happen when the
+   cookie stores credentials&mdash;set `Vary: Cookie`.
+
+In particular, change the default behavior: always define `Cache-Control` or
+`Vary`.
+
+## Additional considerations
+
+There are other, similar types of attacks using the HTTP cache, but those rely
+on a different mechanism than cross-origin-isolation. For instance, Jake
+Archibald describes some attacks in [How to win at
+CORS](https://jakearchibald.com/2021/cors/#conditionally-serving-cors-headers).
+
+These attacks are mitigated by some web browsers which split their HTTP cache
+depending on whether the resource response was requested with credentials or
+not. As of 2022, Firefox does split the cache, while Chrome and Safari don't.
+Chrome  [may split the
+cache](https://docs.google.com/document/d/1lvbiy4n-GM5I56Ncw304sgvY5Td32R6KHitjRXvkZ6U/edit#) in the future. Note that these attacks are different and
+complementary to [splitting it per the top-level
+origin](https://developer.chrome.com/blog/http-cache-partitioning).
+
+Even if this problem can be mitigated for web browsers, the problem will
+remain in local proxy caches. Therefore, we still suggest you follow the
+recommendations above.
+
+<hr />
+
+_Header photo by [Ben Pattinson](https://unsplash.com/@benpattinson) on [Unsplash](https://unsplash.com/photos/_Wo1Oq38tVU)._
diff --git a/src/site/content/en/blog/hummingbirdlibrary/index.md b/src/site/content/en/blog/hummingbirdlibrary/index.md
new file mode 100644
index 00000000000..dbeb90437cf
--- /dev/null
+++ b/src/site/content/en/blog/hummingbirdlibrary/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Hummingbird Library
+date: 2015-08-14
+updated: 2017-10-06
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0kLA0cAAnqvRRct6qNHc.png", alt="Layout screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[Hummingbird Library](http://hummingbirdlibrary.com/): A refreshingly new
+frontend to Hummingbird, a popular anime watch-tracker and discovery site.
+
+### What we like?
+
+Anime fans (like me – that view count on the screenshot is real!) have long
+been obsessed with keeping track of what they watched. Popular sites in this
+space include AniDB and MyAnimeList, but [Hummingbird](https://hummingbird.me)
+is the by far best-looking of them all.
+
+Yet, [Hummingbird Library](http://hummingbirdlibrary.com/), which sits on top
+of the existing Hummingbird API, goes one step further, built from scratch
+with Angular and Material Design.
+[Theme color](/icons-and-browser-colors/)
+and [manifest](/customize-install/) make
+it look super integrated and installable on the home screen, and the whole
+experience feels very snappy, focussing on the core functionality of the main
+site.
+
+### Possible Improvements
+
+**Performance**: The app would benefit greatly from utilizing a service
+worker to offline cache results and UI after initial page load, enabling gzip
+compression would dramatically improve load time and having a static, initial
+barebone layout in the HTML would improve perceived performance.
+
+**UX**: The flex box model used to display the list of shows works well
+with bigger screens but loses its appeal on smaller ones. A non centered,
+tighter version of the tiles would work much better on mobile devices.
+
+## Q & A with Leif Thomas
+
+### Why the web?
+
+Developing for the web allows you to reach virtually every platform with a
+single codebase, which is a huge advantage when you're the sole developer. And
+thanks to great features like
+[Add to Homescreen](/customize-install/),
+it's easy to give users an experience that is nearly identical to what they
+would get in a native application.
+
+### What worked really well during development?
+
+The [angular/material project](https://github.com/angular/material) on GitHub
+worked perfectly. It gave me everything I needed to start a project with
+AngularJS and Material Design.
+
+### If you could have any API to improve your app, what would it be?
+
+At the browser level, I think an API for performing voice searches within my
+web app could really help it. Android has added a lot of voice commands lately
+and the ability to use that sort of input on the mobile web would make for a
+great experience.
+
+> Good news, we actually have that already :) Check out the Web Speech API.
+
+### Finally, how did you market your app?
+
+I used Facebook, Google+, and Twitter to drive traffic to
+www.hummingbirdlibrary.com, but my biggest traffic spike happened after
+posting a link to it on reddit. It's a great way to target an audience that
+may have a genuine interest in what you're developing.
+
diff --git a/src/site/content/en/blog/icons-and-browser-colors/index.md b/src/site/content/en/blog/icons-and-browser-colors/index.md
new file mode 100644
index 00000000000..5b99a055cb3
--- /dev/null
+++ b/src/site/content/en/blog/icons-and-browser-colors/index.md
@@ -0,0 +1,159 @@
+---
+layout: post
+title: Icons and browser colors
+subhead: 
+  Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
+authors:
+  - pbakaus
+date: 2015-09-21
+updated: 2019-08-31
+description: |
+  Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
+
+
+## Provide great icons and tiles 
+
+When a user visits your webpage, the browser tries to fetch an icon from the HTML. The icon may show up in many places, including the browser tab, recent app switch, the new (or recently visited) tab page, and more.
+
+Providing a high quality image will make your site more recognizable, making it
+easier for users to find your site. 
+
+To fully support all browsers, you'll need to add a few tags to the `<head>`
+element of each page.
+
+```html
+<!-- icon in the highest resolution we need it for -->
+<link rel="icon" sizes="192x192" href="icon.png">
+
+<!-- reuse same icon for Safari -->
+<link rel="apple-touch-icon" href="ios-icon.png">
+
+<!-- multiple icons for IE -->
+<meta name="msapplication-square310x310logo" content="icon_largetile.png">
+```
+
+
+### Chrome and Opera
+
+Chrome and Opera uses `icon.png`, which is scaled to the necessary size by 
+the device. To prevent automatic scaling, you can also provide additional 
+sizes by specifying the `sizes` attribute.
+
+
+{% Aside %}
+Icons sizes should be based on 48px, for example 48px, 96px, 144px and 192px.
+{% endAside %}
+
+### Safari
+
+Safari also uses the `<link>` tag with the `rel` attribute: `apple-touch-icon` to 
+indicate the home screen icon.
+
+```html
+<link rel="apple-touch-icon" href="touch-icon-iphone.png">
+```
+
+A non-transparent PNG that's 180px or 192px square is ideal for the apple-touch-icon.
+
+Including multiple versions via the `sizes` attribute is not recommended. 
+Previously, Safari for iOS would consider the `-precomposed` keyword to avoid
+adding visual effects, but it hasn't been necessary since iOS 7. 
+    
+
+### Internet Explorer and Windows Phone
+
+Windows 8's new home screen experience supports four different layouts for 
+pinned sites, and requires four icons. You can leave out the relevant meta 
+tags if you don't want to support a specific size.
+
+
+```html
+<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
+<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
+<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
+```
+
+
+### Tiles in Internet Explorer
+
+Microsoft’s "Pinned Sites" and rotating "Live Tiles" go far beyond other
+implementations and are beyond the scope of this guide. You can learn more
+at MSDN's
+[how to create live tiles](//msdn.microsoft.com/library/ie/dn455115(v=vs.85).aspx).
+
+
+## Color browser elements
+
+Using different `meta` elements, you can customize the browser and 
+even elements of the platform. Keep in mind that some may only work on certain
+platforms or browsers, but they can greatly enhance the experience. 
+
+Chrome, Firefox OS, Safari, Internet Explorer and Opera Coast allow you to define 
+colors for elements of the browser, and even the platform using meta tags.
+
+### Meta Theme Color for Chrome and Opera
+
+To specify the theme color for Chrome on Android, use the meta theme color.
+
+```html  
+<!-- Chrome, Firefox OS and Opera -->
+<meta name="theme-color" content="#4285f4">
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TjmJNR9LC84mh8LX2zxE.png", alt="Theme colors styling the address bar in Chrome.", width="800", height="614" %}
+</figure>
+
+### Safari specific styling
+
+Safari allows you to style the status bar and specify a startup image.
+
+#### Specify a startup image
+
+By default, Safari shows a blank screen during load time and after multiple
+loads a screenshot of the previous state of the app. You can prevent this by
+telling Safari to show an explicit startup image, by adding a link tag, with
+`rel=apple-touch-startup-image`. For example:
+
+```html
+<link rel="apple-touch-startup-image" href="icon.png">
+```    
+
+
+The image has to be in the specific size of the target device's screen or it
+won't be used. Refer to
+[Safari Web Content Guidelines](//developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
+for further details.
+
+While Apple's documentation is sparse on this topic, the developer community
+has figured out a way to target all devices by using advanced media queries to
+select the appropriate device and then specify the correct image. Here's a
+working solution, courtesy of [tfausak's gist](//gist.github.com/tfausak/2222823)
+
+#### Change the status bar appearance
+
+You can change the appearance of the default status bar to either `black` or
+`black-translucent`. With `black-translucent`, the status bar floats on top
+of the full screen content, rather than pushing it down. This gives the layout
+more height, but obstructs the top.  Here’s the code required:
+
+```html
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+```
+
+
+  <figure class="float-left">
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bIbzhcWA4st4dZNGhInp.png", alt="Screenshot using black-translucent.", width="328", height="258", class="screenshot" %}
+    <figcaption>Screenshot using <code>black-translucent</code></figcaption>
+  </figure>
+
+  <figure class="float-right">
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZHhtEoITFZ1LakJTYruY.png", alt="Screenshot using black", width="328", height="258", class="screenshot" %}
+    <figcaption>Screenshot using <code>black</code></figcaption>
+  </figure>
+
diff --git a/src/site/content/en/blog/idle-detection/demo.png b/src/site/content/en/blog/idle-detection/demo.png
deleted file mode 100644
index dedafb5f23c..00000000000
Binary files a/src/site/content/en/blog/idle-detection/demo.png and /dev/null differ
diff --git a/src/site/content/en/blog/idle-detection/devtools.mp4 b/src/site/content/en/blog/idle-detection/devtools.mp4
deleted file mode 100644
index 2d11b7ecbdb..00000000000
Binary files a/src/site/content/en/blog/idle-detection/devtools.mp4 and /dev/null differ
diff --git a/src/site/content/en/blog/idle-detection/hero.jpg b/src/site/content/en/blog/idle-detection/hero.jpg
deleted file mode 100644
index efdecbe1ea4..00000000000
Binary files a/src/site/content/en/blog/idle-detection/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/idle-detection/index.md b/src/site/content/en/blog/idle-detection/index.md
deleted file mode 100644
index 86e79b9160c..00000000000
--- a/src/site/content/en/blog/idle-detection/index.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: Detect inactive users with the Idle Detection API
-subhead: Use the Idle Detection API to find out when the user isn't actively using their device.
-authors:
-  - thomassteiner
-description: |
-  The Idle Detection API notifies developers when a user is idle, indicating such things as lack of
-  interaction with the keyboard, mouse, screen, activation of a screensaver, locking of the screen,
-  or moving to a different screen. A developer-defined threshold triggers the notification.
-date: 2020-05-18
-updated: 2020-08-05
-tags:
-  - blog
-  - idle-detection
-  - capabilities
-hero: hero.jpg #https://images.unsplash.com/photo-1544239265-ee5eedde5469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1900&q=80
-alt: Abandoned computer on a bed with someone's leg next to it.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/551690954352885761
----
-{% Aside %}
-The Idle Detection API is part of the
-[capabilities project](https://developers.google.com/web/updates/capabilities)
-and is currently in development. This post will be updated as the implementation progresses.
-{% endAside %}
-
-## What is the Idle Detection API? {: #what }
-
-The Idle Detection API notifies developers when a user is idle, indicating such things as lack of
-interaction with the keyboard, mouse, screen, activation of a screensaver, locking of the screen,
-or moving to a different screen. A developer-defined threshold triggers the notification.
-
-### Suggested use cases for the Idle Detection API {: #use-cases }
-
-Examples of sites that may use this API include:
-
-- Chat applications or online social networking sites can use this API to let the user know if
-their contacts are currently reachable.
-- Publicly exposed kiosk apps, for example in museums, can use this API to return to the "home"
-view if no one interacts with the kiosk anymore.
-- Apps that require expensive calculations, for example to draw charts,
-can limit these calculations to moments when the user interacts with their device.
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                     | Status                   |
-| ---------------------------------------- | ------------------------ |
-| 1. Create explainer                      | [Complete][explainer]    |
-| 2. Create initial draft of specification | Not started              |
-| 3. Gather feedback & iterate on design   | [In progress](#feedback) |
-| 4. Origin trial                          | [In progress][ot]        |
-| 5. Launch                                | Not started              |
-
-</div>
-
-## How to use the Idle Detection API {: #use }
-
-### Enabling via chrome://flags
-
-To experiment with the Idle Detection API locally, without an origin trial token, enable the
-`#enable-experimental-web-platform-features` flag in `chrome://flags`.
-
-### Enabling support during the origin trial phase
-
-Starting with Chrome&nbsp;84, the Idle Detection API will be available as an origin trial.
-The origin trial is expected to end in Chrome&nbsp;86.
-
-{% include 'content/origin-trials.njk' %}
-
-### Register for the origin trial {: #register-for-ot }
-
-{% include 'content/origin-trial-register.njk' %}
-
-### Feature detection
-
-To check if the Idle Detection API is supported, use:
-
-```javascript
-if ('IdleDetector' in window) {
-  // Idle Detector API supported
-}
-```
-
-### Idle Detection API concepts
-
-The Idle Detection API assumes that there is some level of engagement between the user,
-the user agent (that is, the browser), and the operating system of the device in use.
-This is represented in two dimensions:
-
-- **The user idle state:**
-  `active` or `idle`: the user has or has not
-interacted with the user agent for some period of time.
-- **The screen idle state:**
-  `locked` or `unlocked`: the system has an active screen lock (like a screensaver) preventing
-  interaction with the user agent.
-
-Distinguishing `active` from `idle` requires heuristics that may differ across user, user agent,
-and operating system. It should also be a reasonably coarse threshold
-(see [Security and Permissions](#security-and-permissions)).
-
-The model intentionally does not formally distinguish between interaction with particular content
-(that is, the webpage in a tab using the API), the user agent as a whole, or the operating system;
-this definition is left to the user agent.
-
-### Using the Idle Detection API
-
-The first step when using the Idle Detection API is
-to ensure the `'notifications'` permission is granted.
-If the permission is not granted, you need to
-[request it](https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user#requesting_permission).
-
-```js
-// Check if notifications permission is granted.
-const hasPermission = await navigator.permissions.query({name: 'notifications'});
-if (hasPermission.state !== 'granted') {
-  // Need to request permission first.
-  return console.log('Notifications permission not granted.');
-}
-```
-
-The second step is then to instantiate the `IdleDetector`.
-The minimum `threshold` is 60,000 milliseconds (1 minute).
-You can finally start the idle detection by calling the
-`IdleDetector`'s `start()` method.
-It takes an object with the desired idle `threshold` in milliseconds
-and an optional `signal` with an
-[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)
-to abort idle detection as parameters.
-
-```js
-try {
-  const controller = new AbortController();
-  const signal = controller.signal;
-
-  const idleDetector = new IdleDetector();
-  idleDetector.addEventListener('change', () => {
-    const userState = idleDetector.userState;
-    const screenState = idleDetector.screenState;
-    console.log(`Idle change: ${userState}, ${screenState}.`);
-  });
-
-  await idleDetector.start({
-    threshold: 60000,
-    signal,
-  });
-  console.log('IdleDetector is active.');
-} catch (err) {
-  // Deal with initialization errors like permission denied,
-  // running outside of top-level frame, etc.
-  console.error(err.name, err.message);
-}
-```
-
-You can abort the idle detection by calling the
-[`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)'s
-[`abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
-method.
-
-```js
-controller.abort();
-console.log('IdleDetector is stopped.');
-```
-
-### DevTools support
-
-Starting in Chrome&nbsp;86, you can emulate idle events in Chrome DevTools without actually being idle.
-In DevTools, open the **Sensors** tab and look for **Emulate Idle Detector state**.
-You can see the various options in the video below.
-
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="./devtools.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
-    Idle Detector state emulation in DevTools.
-  </figcaption>
-</figure>
-
-### Demo
-
-You can see the Idle Detection API in action with the [Ephemeral Canvas demo][demo] that erases its
-contents after 60 seconds of inactivity. You could imagine this being deployed in a department
-store for kids to doodle on.
-
-![Ephemeral Canvas demo](demo.png)
-
-### Polyfilling
-
-Some aspects of the Idle Detection API are polyfillable
-and idle detection libraries like [idle.ts](https://github.com/dropbox/idle.ts) exist,
-but these approaches are constrained to a web app's own content area:
-The library running in the context of the web app
-needs to expensively poll for input events or listen to visibility changes.
-More restrictively, though, libraries cannot tell today when a user goes idle
-outside of its content area (e.g., when a user is on a different tab
-or logged out of their computer altogether).
-
-## Security and permissions {: #security-and-permissions }
-
-The Chrome team has designed and implemented the Idle Detection API using the core principles
-defined in [Controlling Access to Powerful Web Platform Features][powerful-apis],
-including user control, transparency, and ergonomics.
-The ability to use this API is controlled by the
-[`'notifications'` permission](https://w3c.github.io/permissions/#notifications).
-In order to use the API, an app also must be running in a
-[top-level secure context](https://www.w3.org/TR/secure-contexts/#examples-top-level).
-We are starting with this permission since it matches the needs we have currently heard,
-but we are open to expanding this in the future and would be happy to
-[hear from you](#feedback) if it does not meet your use case of the API.
-
-### User control and privacy
-
-We always want to prevent malicious actors from misusing new APIs. Seemingly independent websites,
-but that in fact are controlled by the same entity, might obtain user idle information and
-correlate the data to identify unique users across origins. To mitigate these sort of attacks,
-the Idle Detection API limits the granularity of the reported idle events and user agents
-may choose to fuzz the reported data. In Chrome,
-we plan to do this as to render the attack vector useless.
-Our security team's threat analysis also motivated gating this API behind the `'notifications'`
-permission. This relatively high bar prevents websites from attempting to abuse
-either of their two powers: sending notifications or detecting the user's idle state.
-
-## Feedback {: #feedback }
-
-The Chrome team wants to hear about your experiences with the Idle Detection API.
-
-### Tell us about the API design
-
-Is there something about the API that doesn't work like you expected? Or are there missing methods
-or properties that you need to implement your idea?
-Have a question or comment on the security model?
-File a spec issue on the corresponding [GitHub repo][issues],
-or add your thoughts to an existing issue.
-
-### Report a problem with the implementation
-
-Did you find a bug with Chrome's implementation? Or is the implementation different from the spec?
-File a bug at [new.crbug.com](https://new.crbug.com). Be sure to include as much detail as you can,
-simple instructions for reproducing, and enter `Blink>Input` in the **Components** box.
-[Glitch](https://glitch.com/) works great for sharing quick and easy repros.
-
-### Show support for the API
-
-Are you planning to use the Idle Detection API? Your public support helps the Chrome team to
-prioritize features and shows other browser vendors how critical it is to support them.
-
-Share how you plan to use it on the [WICG Discourse thread][wicg-discourse]
-Send a Tweet to [@ChromiumDev][cr-dev-twitter] with the `#idledetection` hashtag
-and let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-- [Public explainer][explainer]
-- [Idle Detection API Demo][demo] | [Idle Detection API Demo source][demo-source]
-- [Tracking bug][cr-bug]
-- [ChromeStatus.com entry][cr-status]
-- Blink Component: [`Blink>Input`][blink-component]
-
-## Acknowledgements
-
-The Idle Detection API was implemented by [Sam Goto](https://twitter.com/samuelgoto).
-DevTools support was added by [Maksim Sadym](https://www.linkedin.com/in/sadym/).
-Thanks to [Joe Medley](https://github.com/jpmedley),
-[Kayce Basques](https://github.com/kaycebasques), and
-[Reilly Grant](https://github.com/reillyeon) for their reviews of this article.
-The hero image is by [Fernando Hernandez](https://unsplash.com/@_ferh97) on
-[Unsplash](https://unsplash.com/photos/8Facxtxqojc).
-
-[issues]: https://github.com/samuelgoto/idle-detection/issues
-[demo]: https://idle-detection.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/idle-detection
-[explainer]: https://github.com/samuelgoto/idle-detection/blob/master/README.md
-[wicg-discourse]: https://discourse.wicg.io/t/idle-detection-api/2959
-[cr-bug]: https://crbug.com/878979
-[cr-status]: https://chromestatus.com/feature/4590256452009984
-[blink-component]: https://chromestatus.com/features#component%3ABlink%3EInput
-[cr-dev-twitter]: https://twitter.com/ChromiumDev
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[ot]: https://developers.chrome.com/origintrials/#/view_trial/551690954352885761
diff --git a/src/site/content/en/blog/iframe-lazy-loading/fblike.png b/src/site/content/en/blog/iframe-lazy-loading/fblike.png
deleted file mode 100644
index e589c93d544..00000000000
Binary files a/src/site/content/en/blog/iframe-lazy-loading/fblike.png and /dev/null differ
diff --git a/src/site/content/en/blog/iframe-lazy-loading/hero.png b/src/site/content/en/blog/iframe-lazy-loading/hero.png
deleted file mode 100644
index aa144f42969..00000000000
Binary files a/src/site/content/en/blog/iframe-lazy-loading/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/iframe-lazy-loading/iframe-chromecom.png b/src/site/content/en/blog/iframe-lazy-loading/iframe-chromecom.png
deleted file mode 100644
index 98c5071c1fc..00000000000
Binary files a/src/site/content/en/blog/iframe-lazy-loading/iframe-chromecom.png and /dev/null differ
diff --git a/src/site/content/en/blog/iframe-lazy-loading/iframe-lazyloading.png b/src/site/content/en/blog/iframe-lazy-loading/iframe-lazyloading.png
deleted file mode 100644
index eeee1829609..00000000000
Binary files a/src/site/content/en/blog/iframe-lazy-loading/iframe-lazyloading.png and /dev/null differ
diff --git a/src/site/content/en/blog/iframe-lazy-loading/index.md b/src/site/content/en/blog/iframe-lazy-loading/index.md
index 185a361c630..51291f2809c 100644
--- a/src/site/content/en/blog/iframe-lazy-loading/index.md
+++ b/src/site/content/en/blog/iframe-lazy-loading/index.md
@@ -1,12 +1,12 @@
 ---
 layout: post
 title: It's time to lazy-load offscreen iframes!
-subhead: Browser-level native lazy-loading for iframes is here
+subhead: Browser-level built-in lazy-loading for iframes is here
 authors:
   - addyosmani
 date: 2020-07-24
-#updated: 2020-07-21
-hero: hero.png
+updated: 2022-11-29
+hero: image/admin/dMCW2Qqi5Qp2DB3w4DyE.png
 alt: Phone outline with loading image and assets
 description: |
   This post covers the loading attribute and how it can be used
@@ -14,12 +14,15 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
+  - memory
+feedback:
+  - api
 ---
 
-[Native lazy-loading for images](/native-lazy-loading) landed in Chrome 76 via
+[Standardized lazy-loading for images](/browser-level-image-lazy-loading/) landed in Chrome 76 via
 the `loading` attribute and later came to Firefox. We are happy to share that
-**native lazy-loading for iframes** is now
-[standardized](https://github.com/whatwg/html/pull/5579) and is also 
+**browser-level lazy-loading for iframes** is now
+[standardized](https://github.com/whatwg/html/pull/5579) and is also
 supported in Chrome and Chromium-based browsers.
 
 ```html/1
@@ -29,15 +32,15 @@ supported in Chrome and Chromium-based browsers.
         height="400"></iframe>
 ```
 
-Native lazy-loading of iframes defers offscreen iframes from being loaded
+Standardized lazy-loading of iframes defers offscreen iframes from being loaded
 until the user scrolls near them. This saves data, speeds up the loading of
 other parts of the page, and reduces memory usage.
 
 This [demo](https://lazy-load.netlify.app/iframes/) of `<iframe loading=lazy>`
 shows lazy-loading video embeds:
 
-<figure class="w-figure w-figure--fullbleed">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure data-size="full">
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.mp4" type="video/mp4">
   </video>
@@ -52,11 +55,8 @@ the user's viewport. Rather, it's only seen once they scroll further down the
 page. Despite this, users pay the cost of downloading data and costly
 JavaScript for each frame, even if they don't scroll to it.
 
-<figure class="w-figure">
-<img src="./iframe-lazyloading.png" alt="Data-savings from using iframe
-lazy-loading for an iframe. Eager loading pulls in 3MB in this example, while
-lazy-loading does not pull in this code until the user scrolls closer to the
-iframe.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqZMRuULxbz6DVXNP8ea.png", alt="Data-savings from using iframe lazy-loading for an iframe. Eager loading pulls in 3MB in this example, while lazy-loading does not pull in this code until the user scrolls closer to the iframe.", width="800", height="460" %}
 </figure>
 
 Based off Chrome's research into [automatically lazy-loading offscreen iframes
@@ -66,47 +66,38 @@ lazy-loading iframes could lead to 2-3% median data savings, 1-2% [First
 Contentful Paint](/fcp/) reductions at the median, and 2% [First Input
 Delay](/fid/) (FID) improvements at the 95th percentile.
 
-### How does native lazy-loading for iframes work?
+Additionally, lazy-loading off-screen iframes can impart benefits to [Largest Contentful Paint (LCP)](/lcp/).
+[LCP candidates](/lcp/#what-elements-are-considered), such as images or text dependent on web fonts
+in order to render. Because iframes can often require a significant amount of bandwidth in
+order to load all of their subresources, lazy-loading offscreen iframes can significantly
+reduce bandwidth contention on network-constrained devices, leaving more bandwidth to load
+resources which contribute to a page's LCP.
+
+### How does built-in lazy-loading for iframes work?
 
 The `loading` attribute allows a browser to defer loading offscreen iframes and
-images until users scroll near them. `loading` supports three values:
+images until users scroll near them. `loading` supports two values:
 
 *   `lazy`: is a good candidate for lazy-loading.
 *   `eager`: is not a good candidate for lazy-loading. Load right away.
-*   `auto`: browser will determine whether or not to lazily load.
-
-{% Aside %}
-`auto` is currently a non-standard value, but is the default in Chrome today.
-Chrome intends on bringing a proposal for this value to the standards table.
-{% endAside %}
 
 Using the `loading` attribute on iframes works as follows:
 
 ```html
 <!-- Lazy-load the iframe -->
-<iframe src="https://example.com" 
-        loading="lazy" 
-        width="600" 
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
         height="400"></iframe>
 
 <!-- Eagerly load the iframe -->
-<iframe src="https://example.com" 
-        width="600" 
-        height="400"></iframe>
-
-<!-- or use loading="eager" to opt out of automatic 
-lazy-loading in Lite Mode -->
-<iframe src="https://example.com" 
-        loading="eager" 
-        width="600" 
+<iframe src="https://example.com"
+        width="600"
         height="400"></iframe>
 ```
 
 Not specifying the attribute at all will have the same impact as explicitly
-eagerly loading the resource, except for [Lite
-Mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html)
-users, where Chrome will use the `auto` value to decide whether it should be
-lazy-loaded.
+eagerly loading the resource.
 
 If you need to _dynamically_ create iframes via JavaScript, setting
 `iframe.loading = 'lazy'` on the element is also
@@ -134,7 +125,7 @@ whether an iframe is hidden:
 If an iframe meets any of these conditions, Chrome considers it hidden and
 won't lazy-load it in most cases. iframes that aren't hidden will only load
 when they're within the [load-in distance
-threshold](/native-lazy-loading/#load-in-distance-threshold). Chrome shows a
+threshold](/browser-level-image-lazy-loading/#load-in-distance-threshold). Chrome shows a
 placeholder for lazy-loaded iframes that are still being fetched.
 
 ### What impact might we see from lazy-loading popular iframe embeds?
@@ -146,13 +137,13 @@ Lazy-loading YouTube video embeds (saves ~500KB on initial page load):
 
 ```html/1
 <iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
-        loading="lazy" 
-        width="560" 
-        height="315" 
-        frameborder="0" 
-        allow="accelerometer; autoplay; 
-        encrypted-media; gyroscope; 
-        picture-in-picture" 
+        loading="lazy"
+        width="560"
+        height="315"
+        frameborder="0"
+        allow="accelerometer; autoplay;
+        encrypted-media; gyroscope;
+        picture-in-picture"
         allowfullscreen></iframe>
 ```
 
@@ -161,10 +152,8 @@ we saved 10 seconds off of how soon our pages could be interactive on mobile
 devices. I have opened an internal bug with YouTube to discuss adding
 `loading=lazy` to its embed code.
 
-<figure class="w-figure">
-<img src="./iframe-chromecom.png" alt="Chrome.com achieved a 10 second
-reduction in Time To Interactive by lazy-loading offscreen iframes for their
-YouTube video embed">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt="Chrome.com achieved a 10 second reduction in Time To Interactive by lazy-loading offscreen iframes for their YouTube video embed", width="800", height="460" %}
 </figure>
 
 {% Aside %}
@@ -179,25 +168,25 @@ Instagram embeds provide a block of markup and a script, which injects an
 iframe into your page. Lazy-loading this iframe avoids having to load all of
 the script necessary for the embed. Given such embeds are often displayed below
 the viewport in most articles, this seems like a reasonable candidate for
-native lazy-loading of their iframe.
+lazy-loading of their iframe.
 
 **Lazy-loading Spotify embeds (saves 514KB on initial load):**
 
 ```html
-<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" 
+<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
         loading="lazy"
-        width="300" 
-        height="380" 
-        frameborder="0" 
-        allowtransparency="true" 
+        width="300"
+        height="380"
+        frameborder="0"
+        allowtransparency="true"
         allow="encrypted-media"></iframe>
 ```
 
 Although the above embeds illustrate the potential benefits to lazy-loading
 iframes for media content, there's the potential to also see these benefits for
-ads.  
+ads.
 
-### Case study: Natively lazy-loading the Facebook's social plugins
+### Case study: Lazy-loading the Facebook's social plugins
 
 Facebook's _social plugins_ allow developers to embed Facebook content in their
 web pages. There's a number of these plugins offered, such as embedded posts,
@@ -209,44 +198,28 @@ which is JavaScript. In many cases, the plugin may appear at the end of an
 article or near the end of a page, so loading it eagerly when it's offscreen
 may be suboptimal.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./fblike.png" alt="Facebook Like Button">
+<figure>
+  {% Img src="image/admin/fdy8o61jxPN560IkF2Ne.png", alt="Facebook Like Button", width="800", height="71" %}
 </figure>
 
 Thanks to engineer Stoyan Stefanov, [all of Facebook's social plugins now
-support native iframe
+support standardized iframe
 lazy-loading](https://developers.facebook.com/docs/plugins/like-button#settings).
 Developers who opt in to lazy-loading via the plugins' `data-lazy`
 configuration will now be able to avoid it loading until the user scrolls
 nearby. This enables the embed to still fully function for users that need it,
 while offering data-savings for those who are not scrolling all the way down a
-page. We are hopeful this is the first of many embeds to explore native iframe
+page. We are hopeful this is the first of many embeds to explore standardized iframe
 lazy-loading in production.
 
-### Wait, can't browsers just automatically lazy-load offscreen iframes?
-
-They certainly can. In Chrome 77, Chrome added support for automatically
-natively lazy-loading offscreen images and iframes when a user has opted into
-[Lite Mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html)
-(Data Saver mode) in Chrome for Android. 
-
-Lite Mode is commonly used in regions of the world where network connection
-quality and data plans are not the greatest. Every byte matters and so
-lazy-loading iframes has the potential to make a meaningful difference for
-these users.
-
-Origins can detect what percentage of their traffic is coming from Lite Mode
-users by checking the `navigator.connection.saveData` property,
-which is part of the [`NetworkInformation` API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation).
-
 ### Can I lazy-load iframes cross-browser? Yes
 
-Native iframe lazy-loading can be applied as a progressive enhancement. Browsers which support `loading=lazy` on iframes will lazy-load the iframe, while the `loading` attribute will be safely ignored in browsers which do not support it yet.
+iframe lazy-loading can be applied as a progressive enhancement. Browsers which support `loading=lazy` on iframes will lazy-load the iframe, while the `loading` attribute will be safely ignored in browsers which do not support it yet.
 
 It is also possible to lazy-load offscreen iframes using the
 [lazysizes](/use-lazysizes-to-lazyload-images/) JavaScript library. This may be desirable if you:
 
-*   require more custom lazy-loading thresholds than what native lazy-loading
+*   require more custom lazy-loading thresholds than what standardized lazy-loading
 currently offers
 *   wish to offer users a consistent iframe lazy-loading experience across browsers
 
@@ -295,11 +268,39 @@ lazysizes when it's not available:
 </script>
 ```
 
+### An option for WordPress users {: #wordpress }
+
+You might have many iframes scattered across years worth of post content
+in a WordPress site. You can optionally add the following code to your WordPress
+theme's `functions.php` file to automatically insert `loading="lazy"` to your
+existing iframes without having to manually update them each individually.
+
+Note that [browser-level support for lazy-loading iframes is also being worked on in WordPress core](https://core.trac.wordpress.org/ticket/50756).
+The following snippet will check for the relevant flags so that, once WordPress has the
+functionality built-in, it will no longer manually add the `loading="lazy"` attribute,
+ensuring it is interoperable with those changes and will not result in a duplicate attribute.
+
+```php
+// TODO: Remove once https://core.trac.wordpress.org/ticket/50756 lands.
+function wp_lazy_load_iframes_polyfill( $content ) {
+	// If WP core lazy-loads iframes, skip this manual implementation.
+	if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
+		return $content;
+	}
+
+	return str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+}
+add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );
+```
+
+If your WordPress site utilizes caching (hint: it should), don't forget to rebuild
+your site's cache afterwards.
+
 ### Conclusion
 
-Baking in native support for lazy-loading iframes makes it significantly
+Baking in standardized support for lazy-loading iframes makes it significantly
 easier for you to improve the performance of your web pages. If you have any
-feedback on native iframe lazy-loading, please feel free to submit an issue to
+feedback, please feel free to submit an issue to
 the [Chromium Bug
 Tracker](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad).
 
@@ -307,4 +308,4 @@ And, in case you missed it, check out web.dev's [image and video lazy-loading
 collection](/fast/#lazy-load-images-and-video) for more lazy-loading ideas.
 
 _With thanks to Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley and Stoyan
-Stefanov for their reviews._ 
+Stefanov for their reviews._
diff --git a/src/site/content/en/blog/image-optimization-survey-2019/index.md b/src/site/content/en/blog/image-optimization-survey-2019/index.md
index 9a44ffe4263..af42e6580e4 100644
--- a/src/site/content/en/blog/image-optimization-survey-2019/index.md
+++ b/src/site/content/en/blog/image-optimization-survey-2019/index.md
@@ -86,7 +86,6 @@ the images for a page as soon as it loads, can improve performance and reduce da
 
 + "Please keep the user in mind when considering features such as lazy load, because for many it's annoying."
 + "Make the lazy load attribute work with background-image please."
-+ "We love that lazy loading of images is finally becoming a native feature."
 + "Frameworks should do better asset processing out of the box."
 + "We have converted from lazy loading a long time ago.  User reports of millions of images and sites "NOT LOADING".  That was understanding our team summarized it as.  It's hard for a non-technical users to describe issues."
 + "I'm keen to get a better understanding of using Intersection Observer API for lazy loading rather than using traditional techniques."
@@ -131,7 +130,7 @@ The [`srcset`](/use-srcset-to-automatically-choose-the-right-image) attribute pr
 
 ### Browser capability
 
-+ "Auto responsive src crop from browser as native feature would be very useful as it is time consuming to crop all images to 4 sizes and writing all the markup. If we can upload one large photo and writing a simple picture tag that browsers will automatically create the multiple src attributes that would be a winning feature."
++ "Auto responsive src crop from browser as [built-in] feature would be very useful as it is time consuming to crop all images to 4 sizes and writing all the markup. If we can upload one large photo and writing a simple picture tag that browsers will automatically create the multiple src attributes that would be a winning feature."
 + "Personally I'm having a hard time avoiding page reflows when image with is set by CSS for responsive images (max-width: 100%; height auto or height: width: 100%; height auto), especially in combination with art direction from adaptive images/picture tag. Best way to avoid seems to use the "negative padding hack" for a fixed image ratio and then position the image inside this ratio box. Better browser support/responsive image handling would be a really great help!"
 + "Please disable GIF "autoplay" by fetching just the first frame."
 
diff --git a/src/site/content/en/blog/image-policies/default-100x100.png b/src/site/content/en/blog/image-policies/default-100x100.png
deleted file mode 100755
index 7f5bf760316..00000000000
Binary files a/src/site/content/en/blog/image-policies/default-100x100.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/index.md b/src/site/content/en/blog/image-policies/index.md
index b50b7273296..1eb498aae26 100644
--- a/src/site/content/en/blog/image-policies/index.md
+++ b/src/site/content/en/blog/image-policies/index.md
@@ -6,7 +6,7 @@ authors:
 date: 2019-05-31
 codelabs:
   - codelab-serve-images-webp
-hero: pankaj-patel-721645-unsplash.jpg
+hero: image/admin/OHtpn2oJuumNzReNNI6f.jpg
 alt: A description of the hero image for screen reader users.
 description: |
   Images take up a significant amount of visual space and make up the
@@ -17,6 +17,7 @@ tags:
   - images
   - origin-trials
 ---
+
 Images often take up a significant amount of visual space and make up the
 majority of the downloaded bytes on a website. Optimizing images can improve
 loading performance and reduce network traffic.
@@ -34,7 +35,7 @@ trials](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-gui
 
 ## Optimized image policies
 
-Feature policy is introducing a new set restrictions on images that can be
+Permissions policy is introducing a new set restrictions on images that can be
 applied with development-time enforcement. Images violating any of the
 restrictions will be rendered as placeholder images, which are easy to identify
 and fix. These policies can be specified in report-only mode where images will
@@ -43,14 +44,14 @@ reports. (See [Report-only mode in the wild](#report-only-mode-in-the-wild),
 below for details.)
 
 ### oversized-images
-The `oversized-images` feature policy restricts the intrinsic dimensions
+
+The `oversized-images` permissions policy restricts the intrinsic dimensions
 of an image in relation to its container size.
 
 When a document uses the `oversized-images` policy, any `<img>` element
 whose intrinsic resolution is more than X times larger than the container size
 in either dimension will be replaced with a placeholder image.
 
-
 #### Why?
 
 Serving images larger than what the viewing device can render&mdash;for example,
@@ -64,30 +65,26 @@ for information on optimizing your images.
 
 A few examples illustrate this. The following shows the default behavior when cutting an image's display size in half.
 
-<figure class="w-figure">
-  <img src="./default-100x100.png" alt="The default resizing behavior" style="max-width: 326px;">
-  <figcaption class="w-figcaption">
-    The default resizing behavior.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/QR01OUN3VXTbOhhSOZBz.png", alt="The default resizing behavior.", width="326", height="401" %}
+  <figcaption>The default resizing behavior.</figcaption>
 </figure>
 
-If I apply the following feature policy, I get a placeholder image instead.
+If I apply the following permissions policy, I get a placeholder image instead.
 
-`Feature-Policy: oversized-images *(2);`
+`Permissions-Policy: oversized-images *(2);`
 
-<figure class="w-figure">
-  <img src="./resize-both-dimensions.png" alt="When the image is too large for the container" style="max-width: 326px;">
-  <figcaption class="w-figcaption">
-    When the image is too large for the container.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/NErIMVS4qsSVHek2UtDZ.png", alt="When the image is too large for the container.", width="326", height="401" %}
+  <figcaption>When the image is too large for the container.</figcaption>
 </figure>
 
 I get similar results if I lower only the width or the height.
 
-<figure class="w-figure">
-  <img src="./resize-width.png" alt="Resized width" style="max-width: 326px;">
-  <img src="./resize-height.png" alt="Resized height" style="max-width: 326px;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/S11HV1w6uqkXq6GDRKVx.png", alt="Resized width", width="326", height="401" %}
+  {% Img src="image/admin/dMPfyFsJ5qexNSj0Q8Ia.png", alt="Resized height", width="326", height="401" %}
+  <figcaption>
     Resize width and height.
   </figcaption>
 </figure>
@@ -96,14 +93,14 @@ I get similar results if I lower only the width or the height.
 
 To summarize, `oversized-images` policy can be specified through either:
 
-* `Feature-Policy` HTTP header
-* `<iframe>` `allow` attribute
+- `Permissions-Policy` HTTP header
+- `<iframe>` `allow` attribute
 
 To declare the `oversized-images` policy, you need to provide:
 
-* The feature name, `oversized-images` (Required)
-* A list of origins (Optional)
-* The threshold values (i.e., the downscaling ratio X) for the origins, specified in
+- The feature name, `oversized-images` (Required)
+- A list of origins (Optional)
+- The threshold values (i.e., the downscaling ratio X) for the origins, specified in
   parenthesis (Optional)
 
 We recommend a downscaling ratio of 2.0 or lower. Consider using
@@ -112,13 +109,13 @@ best serve images on various screen sizes, resolutions, and so on.
 
 #### More examples
 
-`Feature-Policy: oversized-images *(2.0)`
+`Permissions-Policy: oversized-images *(2.0)`
 
 The policy is enforced on all origins with a threshold value of 2.0. Any
 `<img>` element with an image whose downscaling ratio that is greater than
 2.0 is disallowed and will be replaced with a placeholder image.
 
-`Feature-Policy: oversized-images *(inf) 'self'(1.5)`
+`Permissions-Policy: oversized-images *(inf) 'self'(1.5)`
 
 The policy is enforced on the site's origin with a threshold value of 1.5.
 `<img>` elements in top-level browsing contexts and same origin nested
@@ -126,6 +123,7 @@ browsing contexts will only render normally if the downscaling ratio is less
 than or equal to 1.5. `<img>` elements everywhere else will render normally.
 
 ### unoptimized-{lossy,lossless}-images
+
 The `unoptimized-lossy-images`, `unoptimized-lossless-images`,
 `unoptimized-lossless-images-strict` feature policies restrict the file
 size of an image in relation to its intrinsic resolution:
@@ -153,44 +151,40 @@ optimizing your images.
 
 #### Example
 
-The following shows the default browser behavior. Without the feature policy an unoptimized lossy image can be displayed just the same as an optimized image.
+The following shows the default browser behavior. Without the permissions policy an unoptimized lossy image can be displayed just the same as an optimized image.
 
-<figure class="w-figure">
-  <img src="./unoptimized-lossy.png" alt="Comparing an optimized image with an unoptimized image" style="max-width: 326px;">
-  <figcaption class="w-figcaption">
-    Comparing an optimized image with an unoptimized image.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/kxabc5874fW5IvPnqR9E.png", alt="Comparing an optimized image with an unoptimized image.", width="326", height="401" %}
+  <figcaption>Comparing an optimized image with an unoptimized image.</figcaption>
 </figure>
 
-If I apply the following feature policy, I get a placeholder image instead.
+If I apply the following permissions policy, I get a placeholder image instead.
 
-`Feature-Policy: unoptimized-lossy-images *(0.5);`
+`Permissions-Policy: unoptimized-lossy-images *(0.5);`
 
-<figure class="w-figure">
-  <img src="./lossy-image-excluded.png" alt="When the image is not optimized" style="max-width: 326px;">
-  <figcaption class="w-figcaption">
-    When the image is not optimized.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/Y0cCIEuFI1M3DaKfxBkI.png", alt="When the image is not optimized.", width="326", height="401" %}
+  <figcaption>When the image is not optimized.</figcaption>
 </figure>
 
 #### How to use
 
-If you are new to feature policy, please check out [Introduction to Feature
-Policy](https://developers.google.com/web/updates/2018/06/feature-policy) for
+If you are new to permissions policy, please check out [Introduction to Permissions
+Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) for
 more details.
 
 To summarize, `unoptimized-{lossy,lossless}-images` policies can be either
 specified through:
 
-* `Feature-Policy` HTTP header
-* `<iframe>` `allow` attribute
+- `Permissions-Policy` HTTP header
+- `<iframe>` `allow` attribute
 
 To declare an `unoptimized-{lossy,lossless}-images` policy, you will need to
 provide:
 
-* The feature name, for example, `unoptimized-lossy-images` (Required)
-* A list of origins (Optional)
-* The threshold values (i.e., byte-per-pixel ratio X) for the origins, specified
+- The feature name, for example, `unoptimized-lossy-images` (Required)
+- A list of origins (Optional)
+- The threshold values (i.e., byte-per-pixel ratio X) for the origins, specified
   in parenthesis (Optional)
 
 We recommend a byte-per-pixel ratio of 0.5 or lower for
@@ -204,8 +198,8 @@ if none of thes formats work.
 
 If you are using WebP formats, try with stricter thresholds:
 
-* 0.2 for WEBPV8
-* 0.5 for WEBPL
+- 0.2 for WEBPV8
+- 0.5 for WEBPL
 
 #### More examples
 
@@ -237,10 +231,10 @@ everywhere else will render normally.
 Publishing a site with placeholder images may not be what you want. You can use
 the policies in enforcement mode (with unoptimized images rendered as
 placeholder images) during development and staging, and use report-only mode in
-production. (Check out [Feature Policy
-Reporting](https://github.com/w3c/webappsec-feature-policy/blob/master/reporting.md)
-for more details.) Similar to `Feature-Policy` HTTP header, the
-`Feature-Policy-Report-Only` header lets you observe violation reports in the
+production. (Check out [Permissions Policy
+Reporting](https://github.com/w3c/webappsec-permissions-policy/blob/master/reporting.md)
+for more details.) Similar to `Permissions-Policy` HTTP header, the
+`Permissions-Policy-Report-Only` header lets you observe violation reports in the
 wild without any enforcement.
 
 ### Limitations
@@ -253,29 +247,8 @@ would like to have policies supported on broader contents, please let us know.
 
 I've talked quite a bit about optimizing your images, but haven't said how to do it. That topic is out of scope for this article, but you can learn more from the links below and from the codelabs listed at the end of the article.
 
-* [Optimizing images](/fast#optimize-your-images)
-* [Serve images with correct dimensions](/serve-images-with-correct-dimensions/)
-
-## Experiment with the policies in origin trials
-
-Image policies are available in Chrome 75 via an origin trial.
-
-To participate:
-
-1. [request a token](https://developers.chrome.com/origintrials/#/view_trial/2562548187973812225)
-
-1. Add the token on any pages in your origin using an `Origin-Trial` HTTP
-  header:<br/>
-  <br/>
-  `Origin-Trial: **token as provided in the developer console**`
-
-1. Specify an image policy via HTTP header Feature-Policy header:<br/>
-   <br/>
-  `Feature-Policy: **image policies specified here**`
-
-Check out  [Origin Trials Guide for Web
-Developers](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)
-for more details.
+- [Optimizing images](/fast#optimize-your-images)
+- [Serve images with correct dimensions](/serve-images-with-correct-dimensions/)
 
 ## Please give us feedback
 
diff --git a/src/site/content/en/blog/image-policies/lossy-image-excluded.png b/src/site/content/en/blog/image-policies/lossy-image-excluded.png
deleted file mode 100755
index 6cb46424e92..00000000000
Binary files a/src/site/content/en/blog/image-policies/lossy-image-excluded.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/pankaj-patel-721645-unsplash.jpg b/src/site/content/en/blog/image-policies/pankaj-patel-721645-unsplash.jpg
deleted file mode 100644
index b4412d66c1c..00000000000
Binary files a/src/site/content/en/blog/image-policies/pankaj-patel-721645-unsplash.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/resize-both-dimensions.png b/src/site/content/en/blog/image-policies/resize-both-dimensions.png
deleted file mode 100755
index 6cd48ff594f..00000000000
Binary files a/src/site/content/en/blog/image-policies/resize-both-dimensions.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/resize-height.png b/src/site/content/en/blog/image-policies/resize-height.png
deleted file mode 100755
index 679527b6016..00000000000
Binary files a/src/site/content/en/blog/image-policies/resize-height.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/resize-width.png b/src/site/content/en/blog/image-policies/resize-width.png
deleted file mode 100755
index 075e6a4d76a..00000000000
Binary files a/src/site/content/en/blog/image-policies/resize-width.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-policies/unoptimized-lossy.png b/src/site/content/en/blog/image-policies/unoptimized-lossy.png
deleted file mode 100755
index 316a6bb39e6..00000000000
Binary files a/src/site/content/en/blog/image-policies/unoptimized-lossy.png and /dev/null differ
diff --git a/src/site/content/en/blog/image-support-for-async-clipboard/hero.jpg b/src/site/content/en/blog/image-support-for-async-clipboard/hero.jpg
deleted file mode 100644
index 89690ae0f7b..00000000000
Binary files a/src/site/content/en/blog/image-support-for-async-clipboard/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/image-support-for-async-clipboard/index.md b/src/site/content/en/blog/image-support-for-async-clipboard/index.md
deleted file mode 100644
index 8bb265ce83b..00000000000
--- a/src/site/content/en/blog/image-support-for-async-clipboard/index.md
+++ /dev/null
@@ -1,313 +0,0 @@
----
-title: Image support for the async clipboard API
-subhead: The Asynchronous Clipboard API now handles some images, in addition to text.
-authors:
-  - thomassteiner
-description: Chrome 76 adds expands the functionality of the Async Clipboard API to add support for png images. Copying and pasting images to the clipboard has never been easier.
-date: 2019-07-03
-updated: 2020-06-04
-tags:
-  - blog
-  - capabilities
-  - chrome76
-  - cutandcopy
-  - execcommand
-  - input
-  - clipboard
-hero: hero.jpg
-alt: Clipboard with shopping list
----
-
-Chrome 66 added support for the
-[text portion](https://developers.google.com/web/updates/2018/03/clipboardapi)
-of the [Asynchronous Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).
-Chrome 76 has added support for images, making it easier to programmatically
-copy and paste **PNG** images.
-
-{% Aside 'caution' %}
-  At the time of writing, only PNG files are supported. Support for other
-  images and file formats will be added in the future.
-{% endAside %}
-
-## Recap of the Asynchronous Clipboard API {: #recap }
-
-Before describing image support, I want to review how the Asynchronous Clipboard
-API works. Feel free to [skip ahead](#images) if you're already comfortable with it.
-
-### Copy: writing text to the clipboard {: #copy-text }
-
-To copy text to the clipboard, call `navigator.clipboard.writeText()`.
-Since this API is asynchronous, the `writeText()` function returns a promise
-that resolves or rejects depending on whether the passed text is
-copied successfully. For example:
-
-```js
-async function copyPageURL() {
-  try {
-    await navigator.clipboard.writeText(location.href);
-    console.log('Page URL copied to clipboard');
-  } catch (err) {
-    console.error('Failed to copy: ', err);
-  }
-}
-```
-
-### Paste: reading text from the clipboard {: #reading-text }
-
-Functioning similarly to copying, calling `navigator.clipboard.readText()`
-returns a promise that resolves with text:
-
-```js
-async function getClipboardText() {
-  try {
-    let text = await navigator.clipboard.readText();
-    console.log('Clipboard contents: ', text);
-  } catch (err) {
-    console.error('Failed to read clipboard contents: ', err);
-  }
-}
-```
-
-### Handling paste events
-
-Handle paste events by listening for the (surprise) `paste` event. Note that you
-need to call `preventDefault()` in order to modify the to-be-pasted data, such
-as for example, converting it to uppercase before pasting. It works nicely with
-the new asynchronous methods for reading clipboard text:
-
-```js
-document.addEventListener('paste', async (e) => {
-  e.preventDefault();
-  try {
-    let text = await navigator.clipboard.readText();
-    text = text.toUpperCase();
-    console.log('Pasted UPPERCASE text: ', text);
-  } catch (err) {
-    console.error('Failed to read clipboard contents: ', err);
-  }
-});
-```
-
-### Security and permissions {: #security-permission }
-
-The `navigator.clipboard` property is only allowed on pages served over HTTPS,
-and to help prevent abuse, only when a page is the active tab. Pages in active
-tabs can write to the clipboard without requesting permission, but reading from
-the clipboard always requires permission.
-
-When the Asynchronous Clipboard API was introduced,
-two new permissions for copy and paste were added to the
-[Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API):
-
-* The `clipboard-write` permission is granted automatically to pages when they
-  are in the active tab.
-* The `clipboard-read` permission must be requested, which you can do by
-  trying to read data from the clipboard.
-
-The code below shows the latter:
-
-```js
-const queryOpts = { name: 'clipboard-read' };
-const permissionStatus = await navigator.permissions.query(queryOpts);
-// Will be 'granted', 'denied' or 'prompt':
-console.log(permissionStatus.state);
-
-// Listen for changes to the permission state
-permissionStatus.onchange = () => {
-  console.log(permissionStatus.state);
-};
-```
-
-## Images in the Asynchronous Clipboard API {: #images }
-
-### Copy: writing an image to the clipboard {: #copy-image }
-
-The new `navigator.clipboard.write()` copies images to the clipboard. Like
-[`writeText()`](#copy-text), it is asynchronous, and Promise-based. Actually,
-`writeText()` is just a convenience method for the generic `write()` method.
-
-To write an image to the clipboard, you need the image as a [`Blob`][blob].
-One way to do this is by requesting the image from an server by calling
-`fetch()` (or `XMLHTTPRequest()`). The `response` object returned by `fetch()`
-has a [`blob()` method][blob-method] and `XMLHTTPRequest()` let's you set
-`"blob"` as the [`responseType`][blob-response-type].
-
-Calling the server may not be desireable or possible for a variety of reasons.
-Fortunately, you can also write the image to a canvas, then call
-[`HTMLCanvasElement.toBlob()`][to-blob].
-
-Next, pass an array of `ClipboardItem` objects as a parameter to the `write()`
-method. Currently you can only pass one image at a time, but we plan to add
-support for multiple images in the future.
-
-The `ClipboardItem` takes an object with the MIME type of the image as the key,
-and the actual blob as the value. The sample code below shows a flexible way
-to do this by using the new dynamic property keys syntax.
-The MIME type used as the key is retrieved from `blob.type`. This approach ensures
-that your code will be ready for future image types as well as other MIME types
-that may be supported in the future.
-
-```js
-try {
-  const imgURL = '/images/generic/file.png';
-  const data = await fetch(imgURL);
-  const blob = await data.blob();
-  await navigator.clipboard.write([
-    new ClipboardItem({
-      [blob.type]: blob
-    })
-  ]);
-  console.log('Image copied.');
-} catch(err) {
-  console.error(err.name, err.message);
-}
-```
-
-### Paste: reading an image from the clipboard {: #paste-image }
-
-The `navigator.clipboard.read()` method, which reads data from the clipboard, is
-also asynchronous, and Promise-based.
-
-To read an image from the clipboard, obtain a list of `ClipboardItem` objects,
-then iterate over them. Since everything is asynchronous, use the
-[`for...of`][for-of] iterator, since it handles async/await code nicely.
-
-Each `ClipboardItem` can hold its contents in different types, so you'll
-need to iterate over the list of types, again using a `for...of` loop.
-For each type, call the `getType()` method with the current type as an argument
-to obtain the corresponding image `Blob`. As before, this code is not tied
-to images, and will work with other future file types.
-
-```js
-async function getClipboardContents() {
-  try {
-    const clipboardItems = await navigator.clipboard.read();
-    for (const clipboardItem of clipboardItems) {
-      for (const type of clipboardItem.types) {
-        const blob = await clipboardItem.getType(type);
-        console.log(URL.createObjectURL(blob));
-      }
-    }
-  } catch (err) {
-    console.error(err.name, err.message);
-  }
-}
-```
-
-### Custom paste handler {: #custom-paste-handler }
-
-To dynamically handle paste events, listen for the `paste` event, call
-[`preventDefault()`][prevent-default] to prevent the default behavior in favor
-of your own logic, then read the contents from the clipboard, handling it in
-whatever way your app needs. In the example below, I accomplish the last step by
-calling the function I created above.
-
-```js
-document.addEventListener('paste', async (e) => {
-  e.preventDefault();
-  getClipboardContents();
-});
-```
-
-### Custom copy handler {: #custom-copy-handler }
-
-The [`copy` event][copy-event] includes a [`clipboardData`][clipboard-data]
-property with the items already in the right format, eliminating the need to
-manually create a blob. As before, don't forget to call `preventDefault()`.
-
-```js
-document.addEventListener('copy', async (e) => {
-  e.preventDefault();
-  try {
-    for (const item of e.clipboardData.items) {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          [blob.type]: blob
-        })
-      ]);
-    }
-    console.log('Image copied.');
-  } catch(err) {
-    console.error(err.name, err.message);
-  }
-});
-```
-
-### Demo
-
-You can play with the Async Clipboard API in the demo below.
-You might get a `NotAllowedError` that is caused by a not yet
-implemented Feature Policy (see
-[this issue](https://github.com/w3c/webappsec-feature-policy/issues/322) for details).
-In this case just run the demo
-[directly on Glitch](https://async-clipboard-api.glitch.me/).
-
-{% Glitch {
-  id: 'async-clipboard-api',
-  path: 'README.md',
-  height: 500
-} %}
-
-### Security
-
-Opening the Asynchronous Clipboard API for images comes with
-[risks](https://w3c.github.io/clipboard-apis/#security) that need to be
-carefully evaluated. One new challenge are so-called
-[image compression bombs](https://bomb.codes/bombs#images), that is, image
-files that appear to be innocent, but—once decompressed—turn out to be huge.
-Even more serious than large images are specifically crafted malicious images
-that are designed to exploit known vulnerabilities in the native operating
-system. This is why Chrome can't just copy the image directly to the native
-clipboard, and why in Chrome we require that the image be transcoded.
-
-The [specification](https://w3c.github.io/clipboard-apis/#image-transcode)
-therefore also explicitly mentions transcoding as a mitigation method:
-
-> To prevent malicious image data from being placed on the clipboard, the
-> image data may be transcoded to produce a safe version of the image.
-
-There is ongoing discussion happening in the
-[W3C Technical Architecture Group review](https://github.com/w3ctag/design-reviews/issues/350)
-on whether, and how the transcoding details should be specified.
-
-## Next Steps
-
-Chrome is actively working on expanding the Asynchronous Clipboard API to add
-support a larger number of data types. Due to the potential risks Chrome is
-treading carefully. To stay up to date on Chrome's progress, you can star the
-[bug][cr-bug] to be notified about changes.
-
-For now, image support can be used in Chrome 76 or later.
-
-Happy copying and pasting!
-
-## Related links
-
-* [Explainer](https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc)
-* [Raw Clipboard Access Design Doc](https://docs.google.com/document/d/1XDOtTv8DtwTi4GaszwRFIJCOuzAEA4g9Tk0HrasQAdE/edit?usp=sharing)
-* [Chromium bug](https://crbug.com/150835)
-* [Chrome Platform Status entry](https://www.chromestatus.com/feature/5074658793619456)
-* [Technical Architecture Group (TAG) Review](https://github.com/w3ctag/design-reviews/issues/350)
-
-## Acknowledgements
-
-The Asynchronous Clipboard API was implemented by
-[Darwin Huang](https://www.linkedin.com/in/darwinhuang/)
-and [Gary Kačmarčík](https://www.linkedin.com/in/garykac/).
-Darwin also provided the [demo](https://jsfiddle.net/0794oysr/2/).
-My introduction of this article is inspired by
-[Jason Miller](https://twitter.com/_developit?lang=en)'s
-original [text](https://developers.google.com/web/updates/2018/03/clipboardapi).
-Thanks to [Kyarik](https://github.com/kyarik) and again Gary Kačmarčík for
-reviewing this article.
-
-[blob]: https://developer.mozilla.org/en-US/docs/Web/API/blob
-[blob-method]: https://developer.mozilla.org/en-US/docs/Web/API/Body/blob
-[to-blob]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
-[blob-response-type]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType#Value
-[object-define-prop]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
-[for-of]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
-[prevent-default]: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
-[copy-event]: https://developer.mozilla.org/en-US/docs/Web/API/Document/copy_event
-[clipboard-data]: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=897289
diff --git a/src/site/content/en/blog/images-tooling-report/index.md b/src/site/content/en/blog/images-tooling-report/index.md
new file mode 100644
index 00000000000..9a07c58db51
--- /dev/null
+++ b/src/site/content/en/blog/images-tooling-report/index.md
@@ -0,0 +1,49 @@
+---
+layout: post
+title: "Make your site picture perfect with images.tooling.report"
+subhead: Check out the state of image tooling.
+authors:
+  - patrickkettner
+date: 2022-04-20
+description: Check out the state of image tooling.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/cBgayncaj3dc3gtQreAK.jpg
+alt: A zoomed-in photograph of the individual pixels on an LCD display. The photograph is so close that the individual red, blue, and green components of each pixel are distinguishable.
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZFDRpDGW5pb5tJAQshdw.jpg
+tags:
+  - blog
+  - images
+  - performance
+---
+
+It is one thing to put an image on the web&mdash;but it is hard to do it well. Picking the right format, compression, dots per inch (DPI), and hundreds of other settings can otherwise easily be forgotten when we do all this ourselves.
+
+The great news is that nowadays we have an abundance of tools and services that can do all of that for us. The not-so-great news is that, well, there is an abundance. It can be hard to pick which tool or service is right for you. That's why we are launching [images.tooling.report](https://images.tooling.report), a site where we list what we think are the most important when shipping images in production, and to compare some of the most popular software and services, be they paid or free, hosted or self-hosted.
+
+## Why is it?
+
+Images [make up a huge part of a site's bytes transferred](https://httparchive.org/reports/state-of-images)&mdash;and those bytes add up! In fact, we found that unoptimized images made up [nearly 75% of a page's total size](https://almanac.httparchive.org/en/2019/page-weight#what-types-of-assets-does-the-http-archive-track-and-how-much-do-they-matter). All of those wasted bytes come at a cost. That is why in a study of millions of real user sessions, pages that converted had 38% fewer images than those that did not convert. So should you just delete all your images? Of course not. But you _should_ make sure that the images you send out are optimized for all users, regardless of the devices they use.
+
+## What is it?
+
+Serving optimized images is more than just clicking “Save for Web”. That is why images.tooling.report checks for a wide variety of features. We cover the basics, like how much compression the different tools and services provide, and network optimizations such as long-lived cache headers.
+
+We don't stop there, though. We searched out more advanced options, like support for [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data), [`ECT`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ECT), and other [client hints](https://developer.mozilla.org/docs/Web/HTTP/Client_hints), to look for automated psychovisual analysis that can use data models to repeatedly compress images, to find the version that takes the fewest bytes without changing the way our eyes perceive it. Are you squeezing every last non-visual bit from your images before sending down the wire?
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bVeDRKAcBBCcZvcxxHYs.png", alt="A screenshot of the landing page for images.tooling.report in dark mode.", width="800", height="431" %}
+</figure>
+
+Of course, every site is a snowflake&mdash;no one tool or service did absolutely everything we were looking for. That is expected! So we broke out what we tested into different categories.  We cover Content Delivery Networks (CDNs), self-hosted projects, Content Management System (CMS) plugins, and site builders. These are fairly loose definitions that are really there to try to make comparing different options more relevant:
+
+- _CMS plugins_ are packages that are an easy option for developing on platforms such as WordPress.
+- _Site builders_ compare a number of different services that you can use to build your website.
+- _Self-hosted_ is meant for devs who are comfortable cloning a git project, or running their own Docker image in production.
+- _CDNs_ are a bit more complicated. Some of these _are_ CDNs in the traditional sense, but others are services that proxy or host your images on the edge.
+
+You can't be everything to everyone all the time, but you should check out the tests and features being evaluated and see how your image optimizer stacks up! And what if you aren't already doing something for image optimization today? Then it's a great time to check out image tooling, and see what benefits you can bring to people already using your site.
+
+## What's next?
+
+Do you think we have missed an image tool or service? Let us know! Both the tools and services, and the tests themselves, are a living, updating thing. Whenever you need a quick place to check out the state of the art in shipping images, make sure your first stop is [images.tooling.report](https://images.tooling.report/).
+
+_[Hero image](https://unsplash.com/photos/AkYGy_ymFqo) by [Michael Maasen](https://unsplash.com/@mgmaasen) on Unsplash._
diff --git a/src/site/content/en/blog/import-maps-in-all-modern-browsers/index.md b/src/site/content/en/blog/import-maps-in-all-modern-browsers/index.md
new file mode 100644
index 00000000000..bc389fb4ccc
--- /dev/null
+++ b/src/site/content/en/blog/import-maps-in-all-modern-browsers/index.md
@@ -0,0 +1,83 @@
+---
+title: JavaScript import maps are now supported cross-browser
+subhead: >
+  With import maps, importing ES modules now becomes a lot better.
+date: 2023-03-28
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/7WzXtb7u4gPnFnjLip2b.jpg
+alt: Accurately lined up containers.
+authors:
+  - thomassteiner
+tags:
+  - blog
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %} This web feature is now available in all three browser engines!
+{% endAside %}
+
+ES modules are a modern way to include and reuse JavaScript code in web applications. They are
+supported by modern browsers and provide several benefits over older, non-modular approaches to
+JavaScript development.
+
+A modern way to use ES modules is with the `<script type="importmap">` tag. This tag allows you to
+define a mapping of external module names to their corresponding URLs, which makes it easier to
+include and use external modules in your code.
+
+To use the `<script type="importmap">` approach, you first need to add it to the `<head>` section of
+your HTML document. Inside the tag, you can define a JSON object that maps module names to their
+corresponding URLs. For example:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
+    }
+  }
+</script>
+```
+
+This code defines a single external module named `"browser-fs-access"` and maps it to the URL of the
+[browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) library, hosted on the unpkg CDN. With this mapping in place, you can now use the `import`
+keyword to include the browser-fs-access library in your code. Note that the `import` keyword is
+only available inside a `script` tag with the `type="module"` attribute.
+
+```html
+<button>Select a text file</button>
+<script type="module">
+  import {fileOpen} from 'browser-fs-access';
+
+  const button = document.querySelector('button');
+  button.addEventListener('click', async () => {
+    const file = await fileOpen({
+      mimeTypes: ['text/plain'],
+    });
+    console.log(await file.text());
+  });
+</script>
+```
+
+Using the `<script type="importmap">` tag and the `import` keyword provides several benefits over
+older, non-modular approaches to JavaScript development. It allows you to clearly and explicitly
+specify the external modules your code depends on, which makes it easier to understand and maintain
+your code. Overall, using ES modules with the `<script type="importmap">` tag is a modern and
+powerful way to include and reuse JavaScript code in web applications. You can feature-detect
+support as follows:
+
+```js
+if (HTMLScriptElement.supports('importmap')) {
+  // The importmap feature is supported.
+}
+```
+
+{% BrowserCompat 'html.elements.script.type.importmap' %}
+
+## Further reading
+
+- [Specification](https://wicg.github.io/import-maps/)
+- [Using ES modules in browsers with import-maps](https://blog.logrocket.com/es-modules-in-browsers-with-import-maps/)
+
+## Acknowledgements
+
+Hero image by [CHUTTERSNAP](https://unsplash.com/@chuttersnap) on
+[Unsplash](https://unsplash.com/photos/fN603qcEA7g).
diff --git a/src/site/content/en/blog/imports/index.md b/src/site/content/en/blog/imports/index.md
new file mode 100644
index 00000000000..02095ad6217
--- /dev/null
+++ b/src/site/content/en/blog/imports/index.md
@@ -0,0 +1,714 @@
+---
+layout: post
+title: HTML Imports
+subhead: Include for web
+authors:
+  - ericbidelman
+date: 2013-11-11
+updated: 2013-12-19
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+HTML Imports are deprecated and was [removed](https://www.chromestatus.com/feature/5144752345317376) from Chrome in February 2020.
+{% endAside %}
+
+## Why imports?
+
+Think about how you load different types of resources on the web. For JS, we have `<script src>`. For CSS, your go-to is probably `<link rel="stylesheet">`. For images it's `<img>`. Video has `<video>`. Audio, `<audio>`… Get to the point! The majority of the web's content has a simple and declarative way to load itself. Not so for HTML. Here's your options:
+
+1. **`<iframe>`** - tried and true but heavy weight. An iframe's content lives entirely in a separate context than your page. While that's mostly a great feature, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, extremely frustrating to script into/out of, nearly impossible to style).
+-  **AJAX** - [I love `xhr.responseType="document"`](http://ericbidelman.tumblr.com/post/31140607367/mashups-using-cors-and-responsetype-document), but you're saying I need JS to load HTML? That doesn't seem right.
+- **CrazyHacks&#8482;** - embedded in strings, hidden as comments (e.g. `<script type="text/html">`). Yuck!
+
+See the irony? **The web's most basic content, HTML, requires the greatest amount
+of effort to work with**. Fortunately, [Web Components](http://w3c.github.io/webcomponents/explainer/) are here to get us back on track.
+
+## Getting started
+
+[HTML Imports](http://w3c.github.io/webcomponents/spec/imports/), part of the [Web Components](http://w3c.github.io/webcomponents/explainer/) cast, is a way to include HTML documents in other HTML documents. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an `.html` file can contain. In other words, this makes imports a **fantastic tool for loading related HTML/CSS/JS**.
+
+## The basics
+
+Include an import on your page by declaring a `<link rel="import">`:
+
+```html
+<head>
+    <link rel="import" href="/path/to/imports/stuff.html">
+</head>
+```
+
+The URL of an import is called an _import location_. To load content from another domain, the import location needs to be CORS-enabled:
+
+```html
+<!-- Resources on other origins must be CORS-enabled. -->
+<link rel="import" href="http://example.com/elements.html">
+```
+
+{% Aside %}
+The browser's network stack automatically de-dupes all requests from the same URL. This means that imports that reference the same URL are only retrieved once. No matter how many times an import at the same location is loaded, it only executes once.
+{% endAside %}
+
+### Feature detection and support
+
+To detect support, check if `.import` exists on the `<link>` element:
+
+```js
+function supportsImports() {
+    return 'import' in document.createElement('link');
+}
+
+if (supportsImports()) {
+    // Good to go!
+} else {
+    // Use other libraries/require systems to load files.
+}
+```
+
+Browser support is still in the early days. Chrome 31 was the first browser to see an implementation but other browser vendors are waiting to see how ES Modules play out.
+However, for other browsers the [webcomponents.js polyfill](http://webcomponents.org/polyfills/) works great until things are widely supported.
+
+### Bundling resources
+
+Imports provide convention for bundling HTML/CSS/JS (even other HTML Imports) into a single deliverable. It's an intrinsic feature, but a powerful one. If you're creating a theme, library, or just want to segment your app into logical chunks, giving users a single URL is compelling. Heck, you could even deliver an entire app via an import. Think about that for a second.
+
+{% Aside %}
+Using only one URL, you can package together a single relocatable bundle of web goodness for others to consume.
+{% endAside %}
+
+A real-world example is [Bootstrap](http://getbootstrap.com/). Bootstrap is comprised of
+individual files (bootstrap.css, bootstrap.js, fonts), requires JQuery for its plugins, and provides markup examples. Developers like à la carte flexibility. It allows them buy in to the parts of the framework _they_ want to use. That said, I'd wager your typical JoeDeveloper™ goes the easy route and downloads all of Bootstrap.
+
+Imports make a ton of sense for something like Bootstrap. I present to you, the future of loading Bootstrap:
+
+```html
+<head>
+    <link rel="import" href="bootstrap.html">
+</head>
+```
+
+Users simply load an HTML Import link. They don't need to fuss with the scatter-shot
+of files. Instead, the entirety of Bootstrap is managed and wrapped up in an import, bootstrap.html:
+
+```html
+<link rel="stylesheet" href="bootstrap.css">
+<link rel="stylesheet" href="fonts.css">
+<script src="jquery.js"></script>
+<script src="bootstrap.js"></script>
+<script src="bootstrap-tooltip.js"></script>
+<script src="bootstrap-dropdown.js"></script>
+...
+
+<!-- scaffolding markup -->
+<template>
+    ...
+</template>
+```
+
+Let this sit. It's exciting stuff.
+
+### Load/error events
+
+The `<link>` element fires a `load` event when an import is loaded successfully
+and `onerror` when the attempt fails (e.g. if the resource 404s).
+
+Imports try to load immediately. An easy way avoid headaches
+is to use the `onload`/`onerror` attributes:
+
+```html
+<script>
+    function handleLoad(e) {
+    console.log('Loaded import: ' + e.target.href);
+    }
+    function handleError(e) {
+    console.log('Error loading import: ' + e.target.href);
+    }
+</script>
+
+<link rel="import" href="file.html"
+        onload="handleLoad(event)" onerror="handleError(event)">
+```
+
+{% Aside %}
+Notice the event handlers are defined before the import is loaded on the page. The browser tries to load the import as soon as it encounters the tag. If the functions don't exist yet, you'll get console errors for undefined function names.
+{% endAside %}
+
+Or, if you're creating the import dynamically:
+
+```js
+var link = document.createElement('link');
+link.rel = 'import';
+// link.setAttribute('async', ''); // make it async!
+link.href = 'file.html';
+link.onload = function(e) {...};
+link.onerror = function(e) {...};
+document.head.appendChild(link);
+```
+
+## Using the content
+
+Including an import on a page doesn't mean "plop the content of that file here". It means "parser, go off an fetch this document so I can use it". To actually use the content, you have to take action and write script.
+
+A critical `aha!` moment is realizing that an import is just a document. In fact, the content of an import is called an *import document*. You're able to **manipulate the guts of an import using standard DOM APIs**!
+
+### link.import
+
+To access the content of an import, use the link element's `.import` property:
+
+```js
+var content = document.querySelector('link[rel="import"]').import;
+```
+
+`link.import` is `null` under the following conditions:
+
+- The browser doesn't support HTML Imports.
+- The `<link>` doesn't have `rel="import"`.
+- The `<link>` has not been added to the DOM.
+- The `<link>` has been removed from the DOM.
+- The resource is not CORS-enabled.
+
+**Full example**
+
+Let's say `warnings.html` contains:
+
+```html
+<div class="warning">
+    <style>
+    h3 {
+        color: red !important;
+    }
+    </style>
+    <h3>Warning!
+    <p>This page is under construction
+</div>
+
+<div class="outdated">
+    <h3>Heads up!
+    <p>This content may be out of date
+</div>
+```
+
+Importers can grab a specific portion of this document and clone it into their page:
+
+```html
+<head>
+    <link rel="import" href="warnings.html">
+</head>
+<body>
+    ...
+    <script>
+    var link = document.querySelector('link[rel="import"]');
+    var content = link.import;
+
+    // Grab DOM from warning.html's document.
+    var el = content.querySelector('.warning');
+
+    document.body.appendChild(el.cloneNode(true));
+    </script>
+</body>
+```
+
+### Scripting in imports
+
+Imports are not in the main document. They're satellite to it. However, your import can still act on the main page even though the main document reigns supreme. An import can access its own DOM and/or the DOM of the page that's importing it:
+
+**Example** - import.html that adds one of its stylesheets to the main page
+
+```html
+<link rel="stylesheet" href="http://www.example.com/styles.css">
+<link rel="stylesheet" href="http://www.example.com/styles2.css">
+
+<style>
+/* Note: <style> in an import apply to the main
+    document by default. That is, style tags don't need to be
+    explicitly added to the main document. */
+#somecontainer {
+color: blue;
+}
+</style>
+...
+
+<script>
+// importDoc references this import's document
+var importDoc = document.currentScript.ownerDocument;
+
+// mainDoc references the main document (the page that's importing us)
+var mainDoc = document;
+
+// Grab the first stylesheet from this import, clone it,
+// and append it to the importing document.
+    var styles = importDoc.querySelector('link[rel="stylesheet"]');
+    mainDoc.head.appendChild(styles.cloneNode(true));
+</script>
+```
+
+Notice what's going on here. The script inside the import references the imported document (`document.currentScript.ownerDocument`), and appends part of that document to the importing page (`mainDoc.head.appendChild(...)`). Pretty gnarly if you ask me.
+
+{% Aside %}
+A script in an import can either execute code directly, or define functions to be used by the importing page. This is similar to the way [modules](http://docs.python.org/2/tutorial/modules.html#more-on-modules) are defined in Python.
+{% endAside %}
+
+Rules of JavaScript in an import:
+
+- Script in the import is executed in the context of the window that contains the importing `document`. So `window.document` refers to the main page document. This has two useful corollaries:
+    - functions defined in an import end up on `window`.
+    - you don't have to do anything difficult like append the import's `<script>` blocks to the main page. Again, script gets executed.
+- Imports do not block parsing of the main page. However, scripts inside them are processed in order. This means you get defer-like behavior while maintaining proper script order. More on this below.
+
+## Delivering Web Components
+
+The design of HTML Imports lends itself nicely to loading reusable content on the web. In particular, it's an ideal way to distribute Web Components. Everything from basic [HTML `<template>`](/webcomponents/template/)s to full blown [Custom Elements](/tutorials/webcomponents/customelements/#registering) with Shadow DOM [[1](/tutorials/webcomponents/shadowdom/), [2](/tutorials/webcomponents/shadowdom-201/), [3](/tutorials/webcomponents/shadowdom-301/)]. When these technologies are used in tandem, imports become a [`#include`](http://en.cppreference.com/w/cpp/preprocessor/include) for Web Components.
+
+### Including templates
+
+The HTML Template element is a natural fit for HTML Imports. `<template>` is great for scaffolding out sections of markup for the importing app to use as it desires. Wrapping content in a `<template>` also gives you the added benefit of making the content inert until used. That is, scripts don't run until the template is added to the DOM). Boom!
+
+```html
+import.html
+
+<template>
+    <h1>Hello World!</h1>
+    <!-- Img is not requested until the <template> goes live. -->
+    <img src="world.png">
+    <script>alert("Executed when the template is activated.");</script>
+</template>
+```
+
+```html
+index.html
+
+<head>
+    <link rel="import" href="import.html">
+</head>
+<body>
+    <div id="container"></div>
+    <script>
+    var link = document.querySelector('link[rel="import"]');
+
+    // Clone the <template> in the import.
+    var template = link.import.querySelector('template');
+    var clone = document.importNode(template.content, true);
+
+    document.querySelector('#container').appendChild(clone);
+    </script>
+</body>
+```
+
+### Registering custom elements
+
+[Custom Elements](https://www.html5rocks.com/tutorials/webcomponents/customelements/) is another Web Component technology that plays absurdly well with HTML Imports. [Imports can execute script](#includejs), so why not define + register your custom elements so users don't have to? Call it…"auto-registration".
+
+```html
+elements.html
+
+<script>
+    // Define and register <say-hi>.
+    var proto = Object.create(HTMLElement.prototype);
+
+    proto.createdCallback = function() {
+    this.innerHTML = 'Hello, <b>' +
+                        (this.getAttribute('name') || '?') + '</b>';
+    };
+
+    document.registerElement('say-hi', {prototype: proto});
+</script>
+
+<template id="t">
+    <style>
+    ::content > * {
+        color: red;
+    }
+    </style>
+    <span>I'm a shadow-element using Shadow DOM!</span>
+    <content></content>
+</template>
+
+<script>
+    (function() {
+    var importDoc = document.currentScript.ownerDocument; // importee
+
+    // Define and register <shadow-element>
+    // that uses Shadow DOM and a template.
+    var proto2 = Object.create(HTMLElement.prototype);
+
+    proto2.createdCallback = function() {
+        // get template in import
+        var template = importDoc.querySelector('#t');
+
+        // import template into
+        var clone = document.importNode(template.content, true);
+
+        var root = this.createShadowRoot();
+        root.appendChild(clone);
+    };
+
+    document.registerElement('shadow-element', {prototype: proto2});
+    })();
+</script>
+```
+
+This import defines (and registers) two elements, `<say-hi>` and `<shadow-element>`. The first shows a basic custom element that registers itself inside the import. The second example shows how to implement a custom element that creates Shadow DOM from a `<template>`, then registers itself.
+
+The best part about registering custom elements inside an HTML import is that the importer simply declares your element on their page. No wiring needed.
+
+```html
+index.html
+
+<head>
+    <link rel="import" href="elements.html">
+</head>
+<body>
+    <say-hi name="Eric"></say-hi>
+    <shadow-element>
+    <div>( I'm in the light dom )</div>
+    </shadow-element>
+</body>
+```
+
+In my opinion, this workflow alone makes HTML Imports an ideal way to share Web Components.
+
+### Managing dependencies and sub-imports
+
+{% Aside %}
+Yo dawg. I hear you like imports, so I included an import __in__ your import.
+{% endAside %}
+
+#### Sub-imports
+
+It can be useful for one import to include another. For example, if you want to reuse or extend another component, use an import to load the other element(s).
+
+Below is a real example from [Polymer](http://polymer-project.org). It's a new tab component (`<paper-tabs>`) that reuses a layout and selector component. The dependencies are managed using HTML Imports.
+
+paper-tabs.html (simplified):
+
+```html
+<link rel="import" href="iron-selector.html">
+<link rel="import" href="classes/iron-flex-layout.html">
+
+<dom-module id="paper-tabs">
+    <template>
+    <style>...</style>
+    <iron-selector class="layout horizonta center">
+        <content select="*"></content>
+    </iron-selector>
+    </template>
+    <script>...</script>
+</dom-module>
+```
+
+App developers can import this new element using:
+
+```html
+<link rel="import" href="paper-tabs.html">
+<paper-tabs></paper-tabs>
+```
+
+When a new, more awesome `<iron-selector2>` comes along in the future, you can swap out `<iron-selector>` and start using it straight away. You won't break your users thanks to imports and web components.
+
+#### Dependency management
+
+We all know that loading JQuery more than once per page causes errors. Isn't this
+going to be a _huge_ problem for Web Components when multiple components use the same library? Not if we use HTML Imports! They can be used to manage dependencies.
+
+By wrapping libraries in an HTML Import, you automatically de-dupe resources.
+The document is only parsed once. Scripts are only executed once. As an example, say you define an import, jquery.html, that loads a copy of JQuery.
+
+```html
+jquery.html
+
+<script src="http://cdn.com/jquery.js"></script>
+```
+
+This import can be reused in subsequent imports like so:
+
+```html
+import2.html
+
+<link rel="import" href="jquery.html">
+<div>Hello, I'm import 2</div>
+```
+```html
+ajax-element.html
+
+<link rel="import" href="jquery.html">
+<link rel="import" href="import2.html">
+
+<script>
+    var proto = Object.create(HTMLElement.prototype);
+
+    proto.makeRequest = function(url, done) {
+    return $.ajax(url).done(function() {
+        done();
+    });
+    };
+
+    document.registerElement('ajax-element', {prototype: proto});
+</script>
+```
+
+Even the main page itself can include jquery.html if it needs the library:
+
+```html
+<head>
+    <link rel="import" href="jquery.html">
+    <link rel="import" href="ajax-element.html">
+</head>
+<body>
+
+...
+
+<script>
+    $(document).ready(function() {
+    var el = document.createElement('ajax-element');
+    el.makeRequest('http://example.com');
+    });
+</script>
+</body>
+```
+
+Despite jquery.html being included in many different import trees, it's document is only fetched and processed once by the browser. Examining the network panel proves this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AQiTfVjJkq1BmJ13vZxe.png", alt="jquery.html is requested once", width="800", height="294" %}
+  <figcaption>jquery.html is requested once</figcpation>
+</figure>
+
+## Performance considerations
+
+HTML Imports are totally awesome but as with any new web technology, you should
+use them wisely. Web development best practices still hold true. Below are some things to keep in mind.
+
+### Concatenate imports
+
+Reducing network requests is always important. If you have many top-level import
+links, consider combining them into a single resource and importing that file!
+
+[Vulcanize](https://github.com/Polymer/vulcanize) is an npm build tool from the [Polymer](http://www.polymer-project.org/) team that recursively flattens a set of HTML Imports into a single file. Think of it as a concatenation build step for Web Components.
+
+### Imports leverage browser caching
+
+Many people forget that the browser's networking stack has been finely tuned over the years. Imports (and sub-imports) take advantage of this logic too. The `http://cdn.com/bootstrap.html` import might have sub-resources, but they'll be cached.
+
+### Content is useful only when you add it
+
+Think of content as inert until you call upon its services. Take a normal, dynamically created stylesheet:
+
+```js
+var link = document.createElement('link');
+link.rel = 'stylesheet';
+link.href = 'styles.css';
+```
+
+The browser won't request styles.css until `link` is added to the DOM:
+
+```js
+document.head.appendChild(link); // browser requests styles.css
+```
+
+Another example is dynamically created markup:
+
+```js
+var h2 = document.createElement('h2');
+h2.textContent = 'Booyah!';
+```
+
+The `h2` is relatively meaningless until you add it to the DOM.
+
+The same concept holds true for the import document. Unless you append it's content to the DOM, it's a no-op. In fact, the only thing that "executes" in the import document directly is `<script>`. See [scripting in imports](#includejs).
+
+### Optimizing for async loading
+
+#### Imports block rendering
+
+_Imports block rendering of the main page_. This is similar to what `<link rel="stylesheet">` do. The reason the browser blocks rendering on stylesheets in the first place is to minimize FOUC. Imports behave similarly because they can contain stylsheets.
+
+To be completely asynchronous and not block the parser or rendering, use the `async` attribute:
+
+```html
+<link rel="import" href="/path/to/import_that_takes_5secs.html" async>
+```
+
+The reason `async` isn't the default for HTML Imports is because it requires developers
+to do more work. Synchronous by default means that HTML Imports that have custom element definitions inside of them are guaranteed to load and upgrade, in order. In a completely async world, developers would have to manage that dance and upgrade timings themselves.
+
+You can also create an async import, dynamically:
+
+```js
+var l = document.createElement('link');
+l.rel = 'import';
+l.href = 'elements.html';
+l.setAttribute('async', '');
+l.onload = function(e) { ... };
+```
+
+#### Imports do not block parsing
+
+_Imports don't block parsing of the main page_. Scripts inside imports are processed in order but don't block the importing page. This means you get defer-like behavior while maintaining proper script order. One benefit of putting your imports in the `<head>` is that it lets the parser start working on the content as soon as possible. With that said, it's critical to remember `<script>` in the main document *still* continues to block the page. The first `<script>` after an import will block page rendering. That's because an import can have script inside that needs to be executed before the script in the main page.
+
+```html
+<head>
+    <link rel="import" href="/path/to/import_that_takes_5secs.html">
+    <script>console.log('I block page rendering');</script>
+</head>
+```
+
+Depending on your app structure and use case, there are several ways to optimize async behavior. The techniques below mitigate blocking the main page rendering.
+
+**Scenario #1 (preferred): you don't have script in `<head>` or inlined in `<body>`**
+
+My recommendation for placing `<script>` is to avoid immediately following your imports. Move scripts as late in the game as possible…but you're already doing that best practice, AREN'T YOU!? ;)
+
+Here's an example:
+
+```html
+<head>
+    <link rel="import" href="/path/to/import.html">
+    <link rel="import" href="/path/to/import2.html">
+    <!-- avoid including script -->
+</head>
+<body>
+    <!-- avoid including script -->
+
+    <div id="container"></div>
+
+    <!-- avoid including script -->
+    ...
+
+    <script>
+    // Other scripts n' stuff.
+
+    // Bring in the import content.
+    var link = document.querySelector('link[rel="import"]');
+    var post = link.import.querySelector('#blog-post');
+
+    var container = document.querySelector('#container');
+    container.appendChild(post.cloneNode(true));
+    </script>
+</body>
+```
+
+Everything is at the bottom.
+
+**Scenario 1.5: the import adds itself**
+
+Another option is to have the import [add its own content](#includejs). If the
+import author establishes a contract for the app developer to follow, the import can add itself to an area of the main page:
+
+```html
+import.html:
+
+<div id="blog-post">...</div>
+<script>
+    var me = document.currentScript.ownerDocument;
+    var post = me.querySelector('#blog-post');
+
+    var container = document.querySelector('#container');
+    container.appendChild(post.cloneNode(true));
+</script>
+```
+```html
+index.html
+
+<head>
+    <link rel="import" href="/path/to/import.html">
+</head>
+<body>
+    <!-- no need for script. the import takes care of things -->
+</body>
+```
+
+**Scenario #2: you *have* script in `<head>` or inlined in `<body>`**
+
+If you have an import that takes a long time to load, the first `<script>` that follows it on the page will block the page from rendering. Google Analytics for example,
+recommends putting the tracking code in the `<head>`, If you can't avoid putting `<script>` in the `<head>`, dynamically adding the import will prevent blocking the page:
+
+```html
+<head>
+    <script>
+    function addImportLink(url) {
+        var link = document.createElement('link');
+        link.rel = 'import';
+        link.href = url;
+        link.onload = function(e) {
+        var post = this.import.querySelector('#blog-post');
+
+        var container = document.querySelector('#container');
+        container.appendChild(post.cloneNode(true));
+        };
+        document.head.appendChild(link);
+    }
+
+    addImportLink('/path/to/import.html'); // Import is added early :)
+    </script>
+    <script>
+    // other scripts
+    </script>
+</head>
+<body>
+    <div id="container"></div>
+    ...
+</body>
+```
+
+Alternatively, add the import near the end of the `<body>`:
+
+```html
+<head>
+    <script>
+    // other scripts
+    </script>
+</head>
+<body>
+    <div id="container"></div>
+    ...
+
+    <script>
+    function addImportLink(url) { ... }
+
+    addImportLink('/path/to/import.html'); // Import is added very late :(
+    </script>
+</body>
+```
+
+{% Aside %}
+This very last approach is least preferable. The parser doesn't start to work on the import content until late in the page.
+{% endAside %}
+
+## Things to remember
+
+- An import's mimetype is `text/html`.
+
+- Resources from other origins need to be CORS-enabled.
+
+-  Imports from the same URL are retrieved and parsed once. That means script in an import is only executed the first time the import is seen.
+
+- Scripts in an import are processed in order, but do not block the main document parsing.
+
+- An import link doesn't mean "#include the content here". It means "parser, go off an fetch this document so I can use it later". While scripts execute at import time, stylesheets, markup, and other resources need to be added to the main page explicitly. Note, `<style>` don't need to be added explicitly. This is a major difference between HTML Imports and `<iframe>`, which says "load and render this content here".
+
+## Conclusion
+
+HTML Imports allow bundling HTML/CSS/JS as a single resource. While useful by themselves, this idea becomes extremely powerful in the world of Web Components. Developers can create reusable components for others to consume and bring in to their own app, all delivered through `<link rel="import">`.
+
+HTML Imports are a simple concept, but enable a number of interesting use cases
+for the platform.
+
+### Use cases
+
+- **Distribute** related [HTML/CSS/JS as a single bundle](#bundling). Theoretically, you could import an entire web app into another.
+- **Code organization** - segment concepts logically into different files, encouraging modularity and reusability**.
+- **Deliver** one or more [Custom Element](/tutorials/webcomponents/customelements/) definitions. An import can be used to [register](/tutorials/webcomponents/customelements/#registering) and include them in an app. This practices good software patterns, keeping the element's interface/definition separate from how its used.
+- [**Manage dependencies**](#depssubimports) - resources are automatically de-duped.
+- **Chunk scripts** - before imports, a large-sized JS library would have its file wholly parsed in order to start running, which was slow. With imports, the library can start working as soon as chunk A is parsed. Less latency!
+    ```html
+    `<link rel="import" href="chunks.html">`:
+
+    <script>/* script chunk A goes here */</script>
+    <script>/* script chunk B goes here */</script>
+    <script>/* script chunk C goes here */</script>
+    ...
+    ```
+- **Parallelizes HTML parsing** - first time the browser has been able to run two (or more) HTML parsers in parallel.
+
+- **Enables switching between debug and non-debug modes** in an app, just by changing the import target itself. Your app doesn't need to know if the import target is a bundled/compiled resource or an import tree.
diff --git a/src/site/content/en/blog/index.njk b/src/site/content/en/blog/index.njk
index 4dfd319c7e0..dad4346e826 100644
--- a/src/site/content/en/blog/index.njk
+++ b/src/site/content/en/blog/index.njk
@@ -1,5 +1,5 @@
 ---
-layout: layout
+layout: blog
 title: Blog
 permalink: /{{lang}}{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
 override:tags: []
@@ -9,21 +9,5 @@ pagination:
   data: collections.blogPosts
   size: 1
   alias: paged
+  addAllPagesToCollections: true
 ---
-
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="blog-landing-page">
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
-
-  <div class="w-layout-container w-pb--non">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline">{{ title }}</h1>
-      <p class="w-page-header__copy">{{ description }}</p>
-    </header>
-  </div>
-  {% include 'partials/paged.njk' %}
-</div>
diff --git a/src/site/content/en/blog/indexeddb-best-practices/index.md b/src/site/content/en/blog/indexeddb-best-practices/index.md
new file mode 100644
index 00000000000..999d204dbb2
--- /dev/null
+++ b/src/site/content/en/blog/indexeddb-best-practices/index.md
@@ -0,0 +1,188 @@
+---
+title: Best Practices for Using IndexedDB
+subhead:
+  Learn best practices for syncing application state between IndexedDB an popular state management
+  libraries.
+authors:
+  - philipwalton
+date: 2017-06-08
+updated: 2022-08-09
+description: >
+  Learn best practices for syncing application state between IndexedDB an popular state management libraries.
+tags:
+  - blog
+  - javascript
+---
+
+When a user first loads a website or application, there's often a fair amount of work involved in
+constructing the initial application state that's used to render the UI. For example, sometimes the
+app needs to authenticate the user client-side and then make several API requests before it has all
+the data it needs to display on the page.
+
+Storing the application state in
+[IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) can be a great way to speed up
+the load time for repeat visits. The app can then sync up with any API services in the background
+and update the UI with new data lazily, employing a
+[stale-while- revalidate](https://www.mnot.net/blog/2007/12/12/stale) strategy.
+
+Another good use for IndexedDB is to store user-generated content, either as a temporary store
+before it is uploaded to the server or as a client-side cache of remote data - or, of course, both.
+
+However, when using IndexedDB there are many important things to consider that may not be
+immediately obvious to developers new to the APIs. This article answers common questions and
+discusses some of the most important things to keep in mind when persisting data in IndexedDB.
+
+## Keeping your app predictable
+
+A lot of the complexities around IndexedDB stem from the fact that there are so many factors you
+(the developer) have no control over. This section explores many of the issues you must keep in mind
+when working with IndexedDB.
+
+### Not everything can be stored in IndexedDB on all platforms
+
+If you are storing large, user-generated files such as images or videos, then you may try to store
+them as `File` or `Blob` objects. This will work on some platforms but fail on others. Safari on
+iOS, in particular, cannot store `Blob`s in IndexedDB.
+
+Luckily it is not too difficult to convert a `Blob` into an `ArrayBuffer`, and vice versa. Storing
+`ArrayBuffer`s in IndexedDB is very well supported.
+
+Remember, however, that a `Blob` has a MIME type while an `ArrayBuffer` does not. You will need to
+store the type alongside the buffer in order to do the conversion correctly.
+
+To convert an `ArrayBuffer` to a `Blob` you simply use the `Blob` constructor.
+
+```js
+function arrayBufferToBlob(buffer, type) {
+  return new Blob([buffer], { type: type });
+}
+```
+
+The other direction is slightly more involved, and is an asynchronous process. You can use a
+`FileReader` object to read the blob as an `ArrayBuffer`. When the reading is finished a `loadend`
+event is triggered on the reader. You can wrap this process in a `Promise` like so:
+
+```js
+function blobToArrayBuffer(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('loadend', () => {
+      resolve(reader.result);
+    });
+    reader.addEventListener('error', reject);
+    reader.readAsArrayBuffer(blob);
+  });
+}
+```
+
+### Writing to storage may fail
+
+Errors when writing to IndexedDB can happen for a variety of reasons, and in some cases these
+reasons are outside of your control as a developer. For example, some browsers currently don't allow
+[writing to IndexedDB when in private browsing mode](https://developer.mozilla.org/docs/Web/API/IndexedDB_API#Browser_compatibility).
+There's also the possibility that a user is on a device that's almost out of disk space, and the
+browser will restrict you from storing anything at all.
+
+{% Aside %} New <a href="https://storage.spec.whatwg.org/">storage APIs</a> are currently being
+developed that will allow developers to <a
+  href="https://storage.spec.whatwg.org/#usage-and-quota">get an estimate</a> of how much storage
+space is available prior to writing as well as request larger storage quota or even <a
+  href="https://storage.spec.whatwg.org/#persistence">persistent storage</a>, meaning the user can
+opt-in to preserving data from some sites even when performing standard <a
+  href="https://support.google.com/accounts/answer/32050">clear cache/cookies</a> operations.
+{% endAside %}
+
+Because of this, it's critically important that you always implement proper error handling in your
+IndexedDB code. This also means it's generally a good idea to keep application state in memory (in
+addition to storing it), so the UI doesn't break when running in private browsing mode or when
+storage space isn't available (even if some of the other app features that require storage won't
+work).
+
+You can catch errors in IndexedDB operations by adding an event handler for the `error` event
+whenever you create an `IDBDatabase`, `IDBTransaction` or `IDBRequest` object.
+
+```js
+const request = db.open('example-db', 1);
+request.addEventListener('error', (event) => {
+  console.log('Request error:', request.error);
+};
+```
+
+### Stored data may have been modified or deleted by the user
+
+Unlike server-side databases where you can restrict unauthorized access, client-side databases are
+accessible to browser extensions and developer tools, and they can be cleared by the user.
+
+While it may be uncommon for users to modify their locally stored data, it's quite common for users
+to clear it. It's important that your application can handle both of these cases without erroring.
+
+### Stored data may be out of date
+
+Similar to the previous section, even if the user hasn't modified the data themselves, it's also
+possible that the data they have in storage was written by an old version of your code, possibly a
+version with bugs in it.
+
+IndexedDB has built-in support for schema versions and upgrading via its
+[`IDBOpenDBRequest.onupgradeneeded()`](https://developer.mozilla.org/docs/Web/API/IDBOpenDBRequest/onupgradeneeded)
+method; however, you still need to write your upgrade code in such a way that it can handle the user
+coming from a previous version (including a version with a bug).
+
+Unit tests can be very helpful here, as it's often not feasible to manually test all possible
+upgrade paths and cases.
+
+## Keeping your app performant
+
+One of the key features of IndexedDB is its asynchronous API, but don't let that fool you into
+thinking you don't need to worry about performance when using it. There are a number of cases where
+improper usage can still block the main thread, which can lead to jank and unresponsiveness.
+
+As a general rule, reads and writes to IndexedDB should not be larger than required for the data
+being accessed.
+
+While IndexedDB makes is possible to store large, nested objects as a single record (and doing so is
+admittedly quite convenient from a developer perspective), this practice should be avoided. The
+reason is because when IndexedDB stores an object, it must first create a
+[structured clone](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
+of that object, and the structured cloning process happens on the main thread. The larger the
+object, the longer the blocking time will be.
+
+This presents some challenges when planning how to persist application state to IndexedDB, as most
+of the popular state management libraries (like [Redux](http://redux.js.org/)) work by managing your
+entire state tree as a single JavaScript object.
+
+While managing state in this way has many benefits (e.g. it makes your code easy to reason about and
+debug), and while simply storing the entire state tree as a single record in IndexedDB may be
+tempting and convenient, doing this after every change (even if throttled/debounced) will result in
+unnecessary blocking of the main thread, it will increase the likelihood of write errors, and in
+some cases it will even cause the browser tab to crash or become unresponsive.
+
+Instead of storing the entire state tree in a single record, you should break it up into individual
+records and only update the records that actually change.
+
+The same is true if you store large items like images, music, or video in IndexedDB. Store each item
+with its own key rather than inside a larger object, so that you can retrieve the structured data
+without paying the cost of also retrieving the binary file.
+
+As with most best practices, this is not an all-or-nothing rule. In cases where it's not feasible to
+break up a state object and just write the minimal change-set, breaking up the data into sub-trees
+and only writing those is still preferable to always writing the entire state tree. Little
+improvements are better than no improvements at all.
+
+Lastly, you should always be [measuring the performance impact](/user-centric-performance-metrics/)
+of the code you write. While it's true that small writes to IndexedDB will perform better than large
+writes, this only matters if the writes to IndexedDB that your application is doing actually lead to
+[long tasks](/user-centric-performance-metrics/#custom-metrics)
+that block the main thread and degrade the user experience. It's important to measure so you
+understand what you're optimizing for.
+
+## Conclusions
+
+Developers can leverage client storage mechanisms like IndexedDB to improve the user experience of
+their application by not only persisting state across sessions but also by decreasing the time it
+takes to load the initial state on repeat visits.
+
+While using IndexedDB properly can dramatically improve user experience, using it incorrectly or
+failing to handle error cases can lead to broken apps and unhappy users.
+
+Since client storage involves many factors outside of your control, it's critical your code is well
+tested and properly handles errors, even those that may initially seem unlikely to occur.
diff --git a/src/site/content/en/blog/indexeddb-uidatabinding/index.md b/src/site/content/en/blog/indexeddb-uidatabinding/index.md
new file mode 100644
index 00000000000..8bf48d4a14d
--- /dev/null
+++ b/src/site/content/en/blog/indexeddb-uidatabinding/index.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: Databinding UI elements with IndexedDB
+authors:
+  - raymondcamden
+date: 2012-07-08
+tags:
+  - blog
+---
+
+## Introduction
+
+{% Aside %}
+At the time of publication, Chrome was not yet fully to spec in terms of IndexedDB support. The code in this article will work fine in the latest version of Firefox, but may not work in your version of Chrome. For details on why, please see the first section on my blog entry [here](http://www.raymondcamden.com/index.cfm/2012/6/12/Issues-with-IndexedDB-and-Chrome) that discusses "start up" issues in Chrome.
+{% endAside %}
+
+IndexedDB is a powerful way to store data on the client side. If you haven't looked at it yet, I'd encourage you to read the helpful [MDN tutorials](https://developer.mozilla.org/en/IndexedDB) on the topic. This article assumes some basic knowledge of the APIs and the features. Even if you haven't seen IndexedDB before though, hopefully the demo in this article will give you an idea of what can be done with it.
+
+Our demo is a simple proof of concept Intranet application for a company. The application will allow employees to search for other employees. In order to provide a quicker, snappier experience, the employee database is copied to the client's machine and stored using IndexedDB. The demo simply provides an autocomplete-style search and display of a single employee record, but what's nice is that once this data is available on the client, we can use it in multiple other ways as well. Here is a basic outline of what our application needs to do.
+
+1. We have to set up, and initialize, an instance of an IndexedDB. For the most part this is straightforward, but making it work in both Chrome and Firefox proves to be a bit tricky.
+1. We need to see if we have any data, and if not, download it. Now typically this would be done via AJAX calls. For our demo we've created a simple utility class to quickly generate fake data. The application will need to recognize when it is creating this data and prevent the user from using the data until then. This is a one-time operation. The next time the user runs the application, it won't need to go through this process. A more advanced demo would handle sync operations between the client and the server, but this demo is focused more on the UI aspects.
+1. When the application is ready, we can then use jQuery UI's Autocomplete control to sync up with the IndexedDB. While the Autocomplete control allows for basic lists and arrays of data, it has an API to allow for any data source. We'll demonstrate how we can use this to connect to our IndexedDB data.
+
+## Getting Started
+
+We've got multiple parts to this demo, so to start things off simply, let's look at the HTML portion.
+
+```html
+<form>
+  <p>
+    <label for="name">Name:</label> <input id="name" disabled> <span id="status"></span>
+    </p>
+</form>
+
+<div id="displayEmployee"></div>
+```
+
+Not a lot, right? There are three main aspects to this UI that we care about. First is the field, "name" that will be used for autocomplete. It loads disabled and will be enabled later via JavaScript. The span next to it is used during the initial seed to provide updates to the user. Finally, the div with the id displayEmployee will be used when you select an employee from the autosuggest.
+
+Now let's take a look at the JavaScript. There's a lot to digest here so we'll take it step by step. The full code will be available at the end so you can see it in it's entirety.
+
+First off - there are some prefix issues we have to worry about among the browsers that support IndexedDB. Here's some code from the Mozilla documentation modified to provide simple aliases for the core IndexedDB components our application needs.
+
+```js
+window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
+var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
+var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
+```
+
+Next, a few global variables we'll be using throughout the demo:
+
+```js
+var db;
+var template;
+```
+
+Now we'll begin with the jQuery document ready block:
+
+```js
+$(document).ready(function() {
+  console.log("Startup...");
+  ...
+});
+```
+
+Our demo makes use of [Handlebars.js](http://handlebarsjs.com/) to display the employee details. That isn't used till later, but we can go ahead and compile our template now and get it out of the way. We've got a script block set up as a Handlebars-recognized type. It isn't terribly fancy, but does make it easier to display the dynamic HTML.
+
+```handlebars
+<h2>{{lastname}}, {{firstname}}</h2>
+Department: {{department}}<br/>
+Email: <a href='mailto:{{email}}'>{{email}}</a>
+```
+
+This is then compiled back in our JavaScript like so:
+
+```js
+//Create our template
+var source = $("#employeeTemplate").html();
+template = Handlebars.compile(source);
+```
+
+Now let's start working with our IndexedDB. First - we open it.
+
+```js
+var openRequest = indexedDB.open("employees", 1);
+```
+
+Opening a connection to the IndexedDB gives us access to read and write data, but before we do so, we have to ensure we have an objectStore. An objectStore is like a database table. One IndexedDB may have many objectStores, each one holds a collection of related objects. Our demo is simple and only needs one objectStore we call “employee”. When the indexedDB is opened for the very first time, or when you change the version in the code, an event onupgradeneeded is run. We can use this to setup our objectStore.
+
+```js
+// Handle setup.
+openRequest.onupgradeneeded = function(e) {
+
+  console.log("running onupgradeneeded");
+  var thisDb = e.target.result;
+
+  // Create Employee
+  if(!thisDb.objectStoreNames.contains("employee")) {
+    console.log("I need to make the employee objectstore");
+    var objectStore = thisDb.createObjectStore("employee", {keyPath: "id", autoIncrement: true});
+    objectStore.createIndex("searchkey", "searchkey", {unique: false});
+  }
+
+};
+
+openRequest.onsuccess = function(e) {
+  db = e.target.result;
+
+  db.onerror = function(e) {
+    alert("Sorry, an unforseen error was thrown.");
+    console.log("***ERROR***");
+    console.dir(e.target);
+  };
+
+  handleSeed();
+};
+```
+
+In the `onupgradeneeded` event handler block, we check objectStoreNames, an array of object stores, to see if it contains employee. If not, we simply make it do so. The createIndex call is important. We must tell IndexedDB what methods, outside of keys, we will use to retrieve data. We'll use one called searchkey. This is explained in a bit.
+
+The `onungradeneeded` event will run automatically the first time we run the script. After it is executed, or skipped in the future runnings, the `onsuccess` handler is run. We've got a simple (and ugly) error handler defined and then we call `handleSeed`.
+
+So before we go on, let's quickly review what's going on here. We open up the database. We check to see if our object store exists. If it doesn't, we create it. Finally, we call a function named handleSeed. Now let's turn our attention to the data seeding portion of our demo.
+
+## Gimme Some Data!
+
+As mentioned in the introduction of this article, this demo is recreating an Intranet style application that needs to store a copy of all known employees. Normally this would involve creating a server-based API that could return a count of employees and provide a way for us to retrieve batches of records. You can imagine a simple service that supports a start count and returns 100 people at a time. This could run asynchronously in the background while the user is off doing other things.
+
+For our demo, we do something simple. We see how many objects, if any, we have in our IndexedDB. If below a certain number, we will simply create fake users. Otherwise we are considered done with the seed portion and can enable the autocomplete portion of the demo. Let's look at handleSeed.
+
+```js
+function handleSeed() {
+  // This is how we handle the initial data seed. Normally this would be via AJAX.
+
+  db.transaction(["employee"], "readonly").objectStore("employee").count().onsuccess = function(e) {
+    var count = e.target.result;
+    if (count == 0) {
+      console.log("Need to generate fake data - stand by please...");
+      $("#status").text("Please stand by, loading in our initial data.");
+      var done = 0;
+      var employees = db.transaction(["employee"], "readwrite").objectStore("employee");
+      // Generate 1k people
+      for (var i = 0; i < 1000; i++) {
+         var person = generateFakePerson();
+         // Modify our data to add a searchable field
+         person.searchkey = person.lastname.toLowerCase();
+         resp = employees.add(person);
+         resp.onsuccess = function(e) {
+           done++;
+           if (done == 1000) {
+             $("#name").removeAttr("disabled");
+             $("#status").text("");
+             setupAutoComplete();
+           } else if (done % 100 == 0) {
+             $("#status").text("Approximately "+Math.floor(done/10) +"% done.");
+           }
+         }
+      }
+    } else {
+      $("#name").removeAttr("disabled");
+      setupAutoComplete();
+    }
+  };
+}
+```
+
+The very first line is a little complex as we've got multiple operations chained to each other, so let's break it down:
+
+```js
+db.transaction(["employee"], "readonly");
+```
+
+This creates a new read only transaction. All data operations with IndexedDB require a transaction of some sort.
+
+```js
+objectStore("employee");
+```
+
+Get the employee object store.
+
+```js
+count()
+```
+
+Run the count API - which as you can guess - performs a count.
+
+```js
+onsuccess = function(e) {
+```
+
+And when done - execute this callback. Inside the callback we can get the result value which is the number of objects. If the count was zero, we then begin our seed process.
+
+We use that status div mentioned previously to give the user a message that we're going to start getting data. Because of the asynchronous nature of IndexedDB, we've set up a simple variable, done, that will track additions. We loop over and insert the fake people. The source of that function is available in the download, but it returns an object that looks like this:
+
+```json
+{
+  firstname: "Random Name",
+  lastname: "Some Random Last Name",
+  department: "One of 8 random departments",
+  email: "first letter of firstname+lastname@fakecorp.com"
+}
+```
+
+By itself, this is enough to define a person. But we have a special requirement in order to be able to search our data. IndexedDB doesn't provide a way to look up items in a case-insensitive manner. Therefore, we make a copy of the lastname field into a new property, searchkey. If you remember, this is the key we said should be created as an index for our data.
+
+```js
+// Modify our data to add a searchable field
+person.searchkey = person.lastname.toLowerCase();
+```
+
+As this is a client-specific modification, it's done here as opposed to on the back-end server (or in our case, the imaginary back-end server).
+
+To perform the database additions in a performant fashion, you should reuse the transaction for all the batched writes. If you create a new transaction for each write, the browser may cause a disk write for each transaction, and that's going to make your performance terrible when adding a lot of items (think "1 minute to write a 1000 objects"-terrible).
+
+Once the seed is done, the next portion of our application is fired - setupAutoComplete.
+
+## Creating the Autocomplete
+
+Now for the fun part - hooking up with the jQuery UI [Autocomplete](http://jqueryui.com/demos/autocomplete/) plugin. As with most of the jQuery UI, we begin with a basic HTML element and enhance it by calling a constructor method on it. We've abstracted out the entire process into a function called setupAutoComplete. Let's look at that code now.
+
+```js
+function setupAutoComplete() {
+
+  //Create the autocomplete
+  $("#name").autocomplete({
+    source: function(request, response) {
+
+      console.log("Going to look for "+request.term);
+
+      $("#displayEmployee").hide();
+
+      var transaction = db.transaction(["employee"], "readonly");
+      var result = [];
+
+      transaction.oncomplete = function(event) {
+        response(result);
+      };
+
+      // TODO: Handle the error and return to it jQuery UI
+      var objectStore = transaction.objectStore("employee");
+
+      // Credit: http://stackoverflow.com/a/8961462/52160
+      var range = IDBKeyRange.bound(request.term.toLowerCase(), request.term.toLowerCase() + "z");
+      var index = objectStore.index("searchkey");
+
+      index.openCursor(range).onsuccess = function(event) {
+        var cursor = event.target.result;
+        if(cursor) {
+          result.push({
+            value: cursor.value.lastname + ", " + cursor.value.firstname,
+            person: cursor.value
+          });
+          cursor.continue();
+        }
+      };
+    },
+    minLength: 2,
+    select: function(event, ui) {
+      $("#displayEmployee").show().html(template(ui.item.person));
+    }
+  });
+
+}
+```
+
+The most complex part of this code is the creation of the source property. The jQuery UI's Autocomplete control allows you to define a source property that can be customized to meet any possible need - even our IndexedDB data. The API provides you with the request (basically what was typed into the form field) and a response callback. You are responsible for sending an array of results back to that callback.
+
+The first thing we do is hide the displayEmployee div. This is used to display an individual employee and if one is previously loaded up, to clear it out. Now we can start searching.
+
+We begin by creating a read-only transaction, an array called result, and a oncomplete handler that simply passes the result to the autocomplete control.
+
+In order to find items that match our input, let's make use of a tip by StackOverflow user Fong-Wan Chau: We use an index range based on the input as a lower end boundary and the input plus the letter z as an upper range boundary. Note too we lowercase the term to match the lowercase data we entered.
+
+Once done - we can open up a cursor (think of it like running a database query) and iterate over the results. jQuery UI's autocomplete control allows you to return any type of data you want, but requires a value key at minimum. We set the value to a nicely formatted version of the name. We also return the entire person. You'll see why in a second. First, here is a screen shot of the autocomplete in action. We're using the Vader theme for jQuery UI.
+
+By itself, this is enough to return the results of our IndexedDB matches to the autocomplete. But we also want to support showing a detail view of the match when one is selected. We specified a select handler when creating the autocomplete that makes use of the Handlebars template from earlier.
diff --git a/src/site/content/en/blog/indexeddb/index.md b/src/site/content/en/blog/indexeddb/index.md
new file mode 100644
index 00000000000..4ace1f04d50
--- /dev/null
+++ b/src/site/content/en/blog/indexeddb/index.md
@@ -0,0 +1,850 @@
+---
+layout: post
+title: 'Working with IndexedDB'
+subhead: A guide to the basics of IndexedDB.
+date: 2016-01-01
+updated: 2022-08-09
+description: A guide to the basics of IndexedDB.
+---
+
+This text guides you through the basics of the
+[IndexedDB API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). We are using Jake
+Archibald's [IndexedDB Promised](https://github.com/jakearchibald/indexeddb-promised) library, which
+is very similar to the IndexedDB API, but uses promises rather than events. This simplifies the API
+while maintaining its structure, so anything you learn using this library can be applied to the
+IndexedDB API directly.
+
+## What is IndexedDB? {: #what }
+
+IndexedDB is a large-scale, NoSQL storage system. It lets you store just about anything in the
+user's browser. In addition to the usual search, get, and put actions, IndexedDB also supports
+transactions. Here is the definition of IndexedDB on MDN:
+
+> IndexedDB is a low-level API for client-side storage of significant amounts of structured data,
+> including files/blobs. This API uses indexes to enable high performance searches of this data.
+> While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing
+> larger amounts of structured data. IndexedDB provides a solution.
+
+Each IndexedDB database is unique to an [origin](https://developer.mozilla.org/docs/Glossary/Origin)
+(typically, this is the site domain or subdomain), meaning it cannot access or be accessed by any
+other origin. [Data storage limits](/storage-for-the-web/) are usually quite large, if they exist at
+all, but different browsers handle limits and data eviction differently. See the
+[Further reading](#resources) section for more information.
+
+## IndexedDB terms {: #terms }
+
+[Database](https://developer.mozilla.org/docs/Web/API/IDBDatabase)
+: The highest level of
+  IndexedDB. It contains the object stores, which in turn contain the data you would like to persist.
+  You can create multiple databases with whatever names you choose.
+
+[Object store](https://developer.mozilla.org/docs/Web/API/IDBObjectStore)
+: An individual bucket to store data. You can think of object stores as being similar to tables in
+  traditional relational databases. Typically, there is one object store for each _type_ (not
+  JavaScript data type) of data you are storing. For example, given an app that persists blog posts
+  and user profiles, you could imagine two object stores. Unlike tables in traditional databases, the
+  actual JavaScript data types of data within the store do not need to be consistent (for example, if
+  there are three people in the `people` object store, their age properties could be `53`,
+  `'twenty-five'`, and `unknown` ).
+
+[Index](https://developer.mozilla.org/docs/Web/API/IDBIndex)
+: A kind of object store
+  for organizing data in another object store (called the reference object store) by an individual
+  property of the data. The index is used to retrieve records in the object store by this property.
+  For example, if you're storing people, you may want to fetch them later by their name, age, or
+  favorite animal.
+
+Operation
+: An interaction with the database.
+
+[Transaction](https://developer.mozilla.org/docs/Web/API/IDBTransaction)
+: A wrapper around an operation, or group of operations, that ensures database integrity. If one of the
+  actions within a transaction fails, none of them are applied and the database returns to the state it
+  was in before the transaction began. All read or write operations in IndexedDB must be part of a
+  transaction. This allows for atomic read-modify-write operations without having to worry about other
+  threads acting on the database at the same time.
+
+[Cursor](https://developer.mozilla.org/docs/Web/API/IDBCursor)
+: A mechanism for iterating over multiple records in a database.
+
+## Checking for IndexedDB support {: #support }
+
+IndexedDB is almost [universally supported](https://caniuse.com/indexeddb), with the one exception
+being Opera Mini. It's still a good idea to feature-detect support just in case. The easiest way is
+to check the `window` object:
+
+```js
+if (!('indexedDB' in window)) {
+  console.log("This browser doesn't support IndexedDB");
+  return;
+}
+```
+
+You simply place this function at the beginning of our scripts and you're ready to use IndexedDB.
+
+## Opening a database {: #open }
+
+With IndexedDB, you can create multiple databases with any names you choose. To open a database, you
+use:
+
+```js
+idb.open(name, version, upgradeCallback);
+```
+
+This method returns a promise that resolves to a database object. When using `idb.open`, you provide
+a name, version number, and an optional callback to set up the database.
+
+Here is an example of `idb.open()` in context:
+
+```js
+// Check for support.
+if (!('indexedDB' in window)) {
+  console.log("This browser doesn't support IndexedDB.");
+  return;
+}
+
+const dbPromise = idb.open('test-db1', 1);
+```
+
+You place the check for IndexedDB support at the top of the anonymous function. This exits out of
+the function if the browser doesn't support IndexedDB. Then you call `idb.open()` to open a database
+named `"test-db1"`. In this example, the optional callback function has been left out to keep
+things simple.
+
+## Working with object stores {: #stores }
+
+### Creating object stores
+
+A database typically contains one or more object stores. Object stores can be thought of as similar
+to tables in SQL databases and should contain objects of the same _type_ (not JavaScript data type).
+For example, for a site persisting user profiles and notes, you can imagine a `people` object store
+containing `person` objects, and a `notes` object store. A well structured IndexedDB database should
+have one object store for each type of data that needs to be persisted.
+
+To ensure database integrity, object stores can only be created and removed in the callback function
+in `idb.open()`. The callback receives an instance of `UpgradeDB`, a special object in the IDB
+Promised library that is used to create object stores. Call the
+[`createObjectStore()`](https://developer.mozilla.org/docs/Web/API/IDBDatabase/createObjectStore)
+method on `UpgradeDB` to create the object store:
+
+```js
+upgradeDb.createObjectStore('storeName', options);
+```
+
+This method takes the name of the object store as well as a parameter object that lets you define
+various configuration properties for the object store.
+
+Below is an example of the `createObjectStore()` method:
+
+```js
+// Check for support.
+if (!('indexedDB' in window)) {
+  console.log("This browser doesn't support IndexedDB.");
+  return;
+}
+
+const dbPromise = idb.open('test-db2', 1, function (upgradeDb) {
+  console.log('Creating a new object store.');
+  if (!upgradeDb.objectStoreNames.contains('firstOS')) {
+    upgradeDb.createObjectStore('firstOS');
+  }
+});
+```
+
+Again, you first check the browser for IndexedDB support. This time you include the callback
+function in `idb.open()` in order to create the object store. The browser throws an error if you try
+to create an object store that already exists in the database so you wrap the `createObjectStore()`
+method in an `if` statement that checks if the object store exists. Inside the `if` block you call
+`createObjectStore()` on the `UpgradeDB` object to create an object store named `"firstOS"`.
+
+### Defining primary keys
+
+When you define object stores, you can define how data is uniquely identified in the store using the
+primary key. You can define a primary key by either defining a key path, or by using a key
+generator.
+
+A _key path_ is a property that always exists and contains a unique value. For example, in the case
+of a `people` object store, you could choose the email address as the key path.
+
+```js
+upgradeDb.createObjectStore('people', { keyPath: 'email' });
+```
+
+This example creates an object store called `"people"` and assigns the `email` property as the
+primary key.
+
+You could also use a key generator, such as `autoIncrement`. The key generator creates a unique
+value for every object added to the object store. By default, if you don't specify a key, IndexedDB
+creates a key and stores it separately from the data.
+
+```js
+upgradeDb.createObjectStore('notes', { autoIncrement: true });
+```
+
+This example creates an object store called `"notes"` and sets the primary key to be assigned
+automatically as an auto incrementing number.
+
+```js
+upgradeDb.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
+```
+
+This example is similar to the previous example, but this time the auto incrementing value is
+assigned to a property called `"id"`.
+
+Choosing which method to use to define the key depends on your data. If your data has a property
+that is always unique, you can make it the keypath to enforce this uniqueness. Otherwise, using an
+auto incrementing value makes sense.
+
+Let's look at an example:
+
+```js
+// Check for support.
+if (!('indexedDB' in window)) {
+  console.log("This browser doesn't support IndexedDB.");
+  return;
+}
+
+const dbPromise = idb.open('test-db3', 1, function (upgradeDb) {
+  if (!upgradeDb.objectStoreNames.contains('people')) {
+    upgradeDb.createObjectStore('people', { keyPath: 'email' });
+  }
+  if (!upgradeDb.objectStoreNames.contains('notes')) {
+    upgradeDb.createObjectStore('notes', { autoIncrement: true });
+  }
+  if (!upgradeDb.objectStoreNames.contains('logs')) {
+    upgradeDb.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
+  }
+});
+```
+
+This code creates three object stores demonstrating the various ways of defining primary keys in
+object stores.
+
+### Defining indexes
+
+Indexes are a kind of object store used to retrieve data from the reference object store by a
+specified property. An index lives inside the reference object store and contains the same data, but
+uses the specified property as its key path instead of the reference store's primary key. Indexes
+must be made when you create your object stores and can also be used to define a unique constraint
+on your data.
+
+To create an index, call the
+[`createIndex()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/createIndex) method on
+an object store instance:
+
+```js
+objectStore.createIndex('indexName', 'property', options);
+```
+
+This method creates and returns an index object. The `createIndex()` method takes the name of the
+new index as the first argument and the second argument refers to the property on the data you want
+to index. The final argument lets you define two options that determine how the index operates:
+`unique` and `multiEntry`. If `unique` is set to `true`, the index does not allow duplicate values
+for a single key. Next, `multiEntry` determines how `createIndex()` behaves when the indexed
+property is an array. If it's set to `true`, `createIndex()` adds an entry in the index for each
+array element. Otherwise, it adds a single entry containing the array.
+
+Here is an example:
+
+```js
+// Check for support.
+if (!('indexedDB' in window)) {
+  console.log("This browser doesn't support IndexedDB.");
+  return;
+}
+
+const dbPromise = idb.open('test-db4', 1, function (upgradeDb) {
+  if (!upgradeDb.objectStoreNames.contains('people')) {
+    const peopleOS = upgradeDb.createObjectStore('people', { keyPath: 'email' });
+    peopleOS.createIndex('gender', 'gender', { unique: false });
+    peopleOS.createIndex('ssn', 'ssn', { unique: true });
+  }
+  if (!upgradeDb.objectStoreNames.contains('notes')) {
+    const notesOS = upgradeDb.createObjectStore('notes', { autoIncrement: true });
+    notesOS.createIndex('title', 'title', { unique: false });
+  }
+  if (!upgradeDb.objectStoreNames.contains('logs')) {
+    const logsOS = upgradeDb.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
+  }
+});
+```
+
+In this example, the `"people"` and `"notes"` object stores have indexes. To create the indexes, you
+first assign the result of `createObjectStore()` (which is an object store object) to a variable so
+you can call `createIndex()` on it.
+
+{% Aside %} Indexes are updated every time you write data to the reference object store. More
+indexes mean more work for IndexedDB. {% endAside %}
+
+## Working with data {: #data }
+
+This section describes how to create, read, update, and delete data. These operations are all
+asynchronous, using promises where the IndexedDB API uses requests. This simplifies the API. Instead
+of listening for events triggered by the request, you can simply call `.then()` on the database
+object returned from `idb.open()` to start interactions with the database or `await` its creation.
+
+All data operations in IndexedDB are carried out inside a transaction. Each operation has this form:
+
+1. Get database object
+2. Open transaction on database
+3. Open object store on transaction
+4. Perform operation on object store
+
+A transaction can be thought of as a safe wrapper around an operation or group of operations. If one
+of the actions within a transaction fails, all of the actions are rolled back. Transactions are
+specific to one or more object stores, which you define when you open the transaction. They can be
+read-only or read and write. This signifies whether the operations inside the transaction read the
+data or make a change to the database.
+
+### Creating data
+
+To create data, call the [`add()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/add)
+method on the object store and pass in the data you want to add. The `add()` method has an optional
+second argument that lets you define the primary key for the individual object on creation, but it
+should only be used if you have not specified the key path in `createObjectStore()`. Here is a
+simple example:
+
+```js
+someObjectStore.add(data, optionalKey);
+```
+
+The data parameter can be data of any type: a string, number, object, array, and so forth. The only
+restriction is if the object store has a defined keypath, the data must contain this property and
+the value must be unique. The `add()` method returns a promise that resolves once the object has
+been added to the store.
+
+Each `add()` call occurs within a transaction, so even if the promise resolves successfully, it
+doesn't necessarily mean the operation worked. Remember, if one of the actions in the transaction
+fails, all of the operations in the transaction are rolled back. To be sure that the add operation
+was carried out, you need to check if the whole transaction has completed using the
+`transaction.complete()` method. This is a promise that resolves when the transaction completes and
+rejects if the transaction errors. Note that this method doesn't actually close the transaction. The
+transaction completes on its own. You must perform this check for all "write" operations, because it
+is your only way of knowing that the changes to the database have actually been carried out.
+
+Let's look at an example of the `add` method:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readwrite');
+    const store = tx.objectStore('store');
+    const item = {
+      name: 'sandwich',
+      price: 4.99,
+      description: 'A very tasty sandwich',
+      created: new Date().getTime(),
+    };
+    store.add(item);
+    return tx.complete;
+  })
+  .then(function () {
+    console.log('Added item to the store!');
+  });
+```
+
+First, you get the database object. You call `.then()` on `dbPromise`, which resolves with the
+database object, and pass this object to the callback function in `.then()`. Because `dbPromise`
+(from `idb.open()`) is a promise, you can safely assume that when `.then()` executes, the database
+is open and all object stores and indexes are ready for use.
+
+The next step is to open a transaction by calling the `transaction()` method on the database object.
+This method takes a list of object stores, which defines the scope of the transaction (if it is a
+single store name, you can pass it directly instead of passing an array of names, as you did in the
+example where you only wanted the `"store"` object store). The `transaction()` method also has an
+optional second argument for the mode, which can be `readonly` or `readwrite`. This option is
+`read-only` by default.
+
+You can then open the `"store"` object store on this transaction and assign it to the `store`
+variable. Now when you call `store.add()`, the add operation occurs within the transaction. Finally,
+you return `tx.complete()` and log a success message once the transaction has completed.
+
+### Reading data
+
+To read data, call the [`get()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/get)
+method on the object store. The `get()` method takes the primary key of the object you want to
+retrieve from the store. Here is a basic example:
+
+```js
+someObjectStore.get(primaryKey);
+```
+
+As with `add()`, the `get()` method returns a promise and must happen within a transaction.
+
+Let's look at an example of the `get()` method:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readonly');
+    const store = tx.objectStore('store');
+    return store.get('sandwich');
+  })
+  .then(function (val) {
+    console.dir(val);
+  });
+```
+
+Once again, you start the operation by getting the database object and creating a transaction. Note
+that this time it is a read-only transaction because you are not writing anything to the database
+inside the transaction (that is, using `put()`, `add()`, or `delete()`). You then open the object
+store on the transaction and assign the resulting object store object to the `store` variable.
+Finally, you return the result of `store.get()` and log this object to the console.
+
+{% Aside %} If you try to get an object that doesn't exist, the success handler still executes, but
+the result is <code>undefined</code>. {% endAside %}
+
+### Updating data
+
+To update data, call the [`put()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/put)
+method on the object store. The `put()` method is very similar to the `add()` method and can be used
+instead of `add()` to create data in the object store. Like `add()`, `put()` takes the data and an
+optional primary key:
+
+```js
+someObjectStore.put(data, optionalKey);
+```
+
+Again, this method returns a promise and occurs inside a transaction. As with `add()`, you need to
+be careful to check `transaction.complete()` if you want to be sure that the operation was actually
+carried out.
+
+Here is an example using the `put` method:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readwrite');
+    const store = tx.objectStore('store');
+    const item = {
+      name: 'sandwich',
+      price: 99.99,
+      description: 'A very tasty, but quite expensive, sandwich',
+      created: new Date().getTime(),
+    };
+    store.put(item);
+    return tx.complete;
+  })
+  .then(function () {
+    console.log('Item updated!');
+  });
+```
+
+To update an existing item in the object store, use the `put()` method on an object containing the
+same primary key value as the object in the store. Here, the assumption is that the `keyPath` for
+the store object store is the `"name"` property and that you are updating the price and description
+of the `"sandwich"` object. The database interaction has the same structure as the create and read
+operations: get the database object, create a transaction, open an object store on the transaction,
+and perform the operation on the object store.
+
+### Deleting data
+
+To delete data, call the
+[`delete()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/delete) method on the object
+store.
+
+```js
+someObjectStore.delete(primaryKey);
+```
+
+Once again, this method returns a promise and must be wrapped in a transaction. Here is a simple
+example:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readwrite');
+    const store = tx.objectStore('store');
+    store.delete(key);
+    return tx.complete;
+  })
+  .then(function () {
+    console.log('Item deleted.');
+  });
+```
+
+The structure of the database interaction is the same as for the other operations. Note that you
+again check that the whole transaction has completed by returning the `tx.complete()` method to be
+sure that the deletion was carried out.
+
+## Getting all the data {: #get }
+
+So far you have only retrieved objects from the store one at a time. You can also retrieve all of
+the data (or a subset) from an object store or index using either the `getAll()` method or using
+cursors.
+
+### Using the getAll() method
+
+The simplest way to retrieve all of the data is to call the `getAll()` method on the object store or
+index, like this:
+
+```js
+someObjectStore.getAll(optionalConstraint);
+```
+
+This method returns all the objects in the object store matching the specified key or key range (see
+[Working with ranges and indexes](#ranges)), or all objects in the store if no parameter is given.
+As with all other database operations, this operation happens inside a transaction. Here is a short
+example:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readonly');
+    const store = tx.objectStore('store');
+    return store.getAll();
+  })
+  .then(function (items) {
+    console.log('Items by name:', items);
+  });
+```
+
+Here you are calling `getAll()` on the `"store"` object store. This returns all of the objects in
+the store ordered by the primary key.
+
+### Using cursors
+
+Another way to retrieve all of the data is to use a cursor. A cursor selects each object in an
+object store or index one by one, letting you do something with the data as it is selected. Cursors,
+like the other database operations, work within transactions.
+
+You create the cursor by calling the
+[`openCursor()`](https://developer.mozilla.org/docs/Web/API/IDBObjectStore/openCursor) method on the
+object store, like this:
+
+```js
+someObjectStore.openCursor(optionalKeyRange, optionalDirection);
+```
+
+This method returns a promise that resolves with a `cursor` object representing the first object in
+the object store or `undefined` if there is no object. To move on to the next object in the object
+store, you call `cursor.continue()`. This returns a promise that resolves with the next object, or
+`undefined` if there are no more objects. You put this inside a loop to move through all of the
+entries in the store one by one. The optional key range in the `openCursor()` method limits the
+iteration to a subset of the objects in the store. The direction option can be `next` or `prev`,
+specifying forward or backward traversal through the data.
+
+The next example uses a cursor to iterate through all the items in the "store" object store and log
+them to the console:
+
+```js
+dbPromise
+  .then(function (db) {
+    const tx = db.transaction('store', 'readonly');
+    const store = tx.objectStore('store');
+    return store.openCursor();
+  })
+  .then(function logItems(cursor) {
+    if (!cursor) {
+      return;
+    }
+    console.log('Cursored at:', cursor.key);
+    for (const field in cursor.value) {
+      console.log(cursor.value[field]);
+    }
+    return cursor.continue().then(logItems);
+  })
+  .then(function () {
+    console.log('Done cursoring.');
+  });
+```
+
+As usual, you start by getting the database object, creating a transaction, and opening an object
+store. You call the `openCursor()` method on the object store and pass the cursor object to the
+callback function in `.then()`. This time you name the callback function `"logItems"` so you can
+call it from inside the function and make a loop. The line `if (!cursor) {return;}` breaks the loop
+if the promise returned by `store.openCursor()` resolves with `undefined`, or if the promise
+returned by `cursor.continue()`resolves with `undefined` (indicating that there are no more
+objects).
+
+The cursor object contains a `key` property that represents the primary key for the item. It also
+contains a `value` property that represents the data. At the end of `logItems()`, you return
+`cursor.continue().then(logItems)`. The `cursor.continue()` method returns a promise that resolves
+to a cursor object representing the next item in the store or `undefined` if there are no more
+objects. This result is passed to the callback function in `.then()`, which you have chosen to be
+`logItems()`, so that the function loops. Consequently, `logItems()` continues to call itself until
+no objects remain.
+
+### Working with ranges and indexes {: #ranges }
+
+You can get all the data in a couple of different ways, but what if you want only a subset of the
+data based on a particular property? This is where indexes come in. Indexes let you fetch the data
+in an object store by a property other than the primary key. You can create an index on any property
+(which becomes the keypath for the index), specify a range on that property, and get the data within
+the range using the `getAll()` method or a cursor.
+
+You define the range using the `IDBKeyRange` object. This object has five methods that are used to
+define the limits of the range:
+
+- [`upperBound()`](https://developer.mozilla.org/docs/Web/API/IDBKeyRange/upperBound)
+- [`lowerBound()`](https://developer.mozilla.org/docs/Web/API/IDBKeyRange/lowerBound)
+- [`bound()`](https://developer.mozilla.org/docs/Web/API/IDBKeyRange/bound) (which means both)
+- [`only()`](https://developer.mozilla.org/docs/Web/API/IDBKeyRange/only)
+- [`includes()`](https://developer.mozilla.org/docs/Web/API/IDBKeyRange/includes)
+
+As expected, the `upperBound()` and `lowerBound()` methods specify the upper and lower
+limits of the range.
+
+```js
+IDBKeyRange.lowerBound(indexKey);
+```
+
+Or
+
+```js
+IDBKeyRange.upperBound(indexKey);
+```
+
+They each take one argument which is the index's keypath value of the item you want to specify as
+the upper or lower limit.
+
+The `bound()` method is used to specify both an upper and lower limit, and takes the lower limit as
+the first argument:
+
+```js
+IDBKeyRange.bound(lowerIndexKey, upperIndexKey);
+```
+
+The range for these functions is inclusive by default, but can be specified as exclusive by passing
+`true` as the second argument (or the third and fourth in the case of `bound()`, for the lower and
+upper limits respectively). An inclusive range includes the data at the limits of the range. An
+exclusive range does not.
+
+Let's look at an example. For this demo, you have created an index on the `"price"` property in the
+`"store"` object store. You have also added a small form with two inputs for the upper and lower
+limits of the range. Imagine you are passing in the lower and upper bounds to the function as
+floating point numbers representing prices:
+
+```js
+function searchItems(lower, upper) {
+  if (lower === '' && upper === '') {
+    return;
+  }
+
+  let range;
+  if (lower !== '' && upper !== '') {
+    range = IDBKeyRange.bound(lower, upper);
+  } else if (lower === '') {
+    range = IDBKeyRange.upperBound(upper);
+  } else {
+    range = IDBKeyRange.lowerBound(lower);
+  }
+
+  dbPromise
+    .then(function (db) {
+      const tx = db.transaction(['store'], 'readonly');
+      const store = tx.objectStore('store');
+      const index = store.index('price');
+      return index.openCursor(range);
+    })
+    .then(function showRange(cursor) {
+      if (!cursor) {
+        return;
+      }
+      console.log('Cursored at:', cursor.key);
+      for (const field in cursor.value) {
+        console.log(cursor.value[field]);
+      }
+      return cursor.continue().then(showRange);
+    })
+    .then(function () {
+      console.log('Done cursoring.');
+    });
+}
+```
+
+The code first gets the values for the limits and checks if the limits exist. The next block of code
+decides which method to use to limit the range based on the values. In the database interaction, you
+open the object store on the transaction as usual, then you open the `"price"` index on the object
+store. The `"price"` index allows you to search for the items by price. You open a cursor on the
+index and pass in the range. The cursor now returns a promise representing the first object in the
+range, or `undefined` if there is no data within the range. The `cursor.continue()` method returns a
+cursor representing the next object and so on through the loop until you reach the end of the range.
+
+## Using database versioning {: #versioning }
+
+When you call `idb.open()`, you can specify the database version number in the second parameter. If
+this version number is greater than the version of the existing database, the upgrade callback
+executes, allowing you to add object stores and indexes to the database.
+
+{% Aside %} The browser throws an error if you try to create object stores or indexes that already
+exist in the database. You can wrap the calls to `createObjectStore` in `if` statements checking if
+the object store already exists using `upgradeDb.objectStoreNames.contains('objectStoreName')`. You
+can also use a `switch` statement on the `oldVersion` property as in the next example.
+{% endAside %}
+
+The `UpgradeDB` object has a special `oldVersion` property, which indicates the version number of
+the database existing in the browser. You can pass this version number into a `switch` statement to
+execute blocks of code inside the upgrade callback based on the existing database version number.
+Here's an example:
+
+```js
+const dbPromise = idb.open('test-db7', 2, function (upgradeDb) {
+  switch (upgradeDb.oldVersion) {
+    case 0:
+      upgradeDb.createObjectStore('store', { keyPath: 'name' });
+    case 1:
+      const peopleStore = upgradeDb.transaction.objectStore('store');
+      peopleStore.createIndex('price', 'price');
+  }
+});
+```
+
+In the example you have set the newest version of the database at 2. When this code first executes,
+and since the database doesn't yet exist in the browser, `upgradeDb.oldVersion` is 0 and the `switch`
+statement starts at `case 0`. In the example, this results in a `"store"` object store being added
+to the database. Usually, in `switch` statements, there is a `break` after each case, but this is
+deliberately not used here. This way, if the existing database is a few versions behind (or if it
+doesn't exist), the code continues through the rest of the `case` blocks until it has executed all
+the latest changes. So in the example, the browser continues executing through `case 1`, creating a
+`"price"` index on the `"store"` object store. Once this has finished executing, the database in the
+browser is at version 2 and contains a `"store"` object store with a `"price"` index.
+
+Let's say you now want to create a `"description"` index on the `"store"` object store. You need to
+update the version number and add a case, like this:
+
+```js
+const dbPromise = idb.open('test-db7', 3, function (upgradeDb) {
+  switch (upgradeDb.oldVersion) {
+    case 0:
+      upgradeDb.createObjectStore('store', { keyPath: 'name' });
+    case 1:
+      const storeOS = upgradeDb.transaction.objectStore('store');
+      storeOS.createIndex('price', 'price');
+    case 2:
+      const storeOS = upgradeDb.transaction.objectStore('store');
+      storeOS.createIndex('description', 'description');
+  }
+});
+```
+
+Assuming the database you created in the previous example still exists in the browser, when this
+executes `upgradeDb.oldVersion` is 2. The `case 0` and `case 1` are skipped, and the browser
+executes the code in `case 2`, which creates a `"description"` index. Once all this has finished,
+the browser has a database at version 3 containing a `"store"` object store with `"price"` and
+`"description"` indexes.
+
+## Further reading {: #resources }
+
+### IndexedDB Documentation
+
+- [Using IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Using_IndexedDB) - MDN
+- [Basic Concepts Behind IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB) -
+  MDN
+- [Indexed Database API](https://www.w3.org/TR/IndexedDB/) - W3C
+
+### Data storage limits
+
+- [Storage for the web](/storage-for-the-web/)
+- [Browser storage limits and eviction criteria](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria)
+
+## Appendix
+
+### Comparison of IndexedDB API and IndexedDB Promised library
+
+The IndexedDB Promised library sits on top of the IndexedDB API, translating its requests into
+promises. The overall structure is the same between the library and the API and, in general, the
+actual syntax for the database operations is the same and they will act the same way. But there are
+a few differences because of the differences between requests and promises, which are covered here.
+
+All database interactions in the IndexedDB API are requests and have associated `onsuccess` and
+`onerror` event handlers. These are similar to the `.then()` and `.catch()` promise functions. The
+`indexedDB.open()` method in the raw API also gets a special event handler, `onupgradeneeded`, which
+is used to create the object stores and indexes. This is equivalent to the upgrade callback in
+`idb.open()` in the Promised library. In fact, if you look through the Promised library, you will
+find the upgrade callback is just a convenient wrapper for the `onupgradeneeded` event handler.
+
+Here's an example of the IndexedDB API. This example opens a database, adds an object
+store, and adds one item to the object store:
+
+```js
+let db;
+
+const openRequest = indexedDB.open('test_db', 1);
+
+openRequest.onupgradeneeded = function (e) {
+  db = e.target.result;
+  console.log('running onupgradeneeded');
+  if (!db.objectStoreNames.contains('store')) {
+    const storeOS = db.createObjectStore('store', { keyPath: 'name' });
+  }
+};
+openRequest.onsuccess = function (e) {
+  console.log('running onsuccess');
+  db = e.target.result;
+  addItem();
+};
+openRequest.onerror = function (e) {
+  console.log('onerror!');
+  console.dir(e);
+};
+
+function addItem() {
+  const transaction = db.transaction(['store'], 'readwrite');
+  const store = transaction.objectStore('store');
+  const item = {
+    name: 'banana',
+    price: '$2.99',
+    description: 'It is a purple banana!',
+    created: new Date().getTime(),
+  };
+
+  const request = store.add(item);
+
+  request.onerror = function (e) {
+    console.log('Error', e.target.error.name);
+  };
+  request.onsuccess = function (e) {
+    console.log('Woot! Did it');
+  };
+}
+```
+
+This code does something very similar to previous examples in this tutorial except that it doesn't
+use the Promised library. You can see that the structure of the database interaction hasn't changed.
+Object stores are created on the database object in the upgrade event handler, and items are added
+to the object store in the same transaction sequence you've seen before. The difference is that this
+is done with requests and event handlers rather than promises and promise chains.
+
+Here is a short reference of the differences between the IndexedDB API and the IndexedDB Promised
+library.
+
+<div class="table-wrapper scrollbar">
+<table>
+<tr>
+    <th>Action</th>
+    <th>IndexedDB Promised</th>
+    <th>IndexedDB API</th>
+</tr>
+<tr>
+<td>Open database</td>
+<td><code>idb.open(name, version, upgradeCallback)</code>
+</td><td><code>indexedDB.open(name, version)</code>
+</td>
+</tr>
+<tr><td>
+Upgrade database
+</td><td>
+Inside upgradeCallback
+</td><td>
+<code>request.onupgradeneeded</code>
+</td>
+</tr>
+<tr><td>
+Success
+</td><td>
+<code>.then</code>
+</td><td>
+<code>request.onsuccess</code>
+</td>
+</tr>
+<tr><td>
+Error
+</td><td>
+<code>.catch</code>
+</td><td>
+<code>request.onerror</code>
+</td>
+</tr>
+</table>
+</div>
diff --git a/src/site/content/en/blog/infobae/index.md b/src/site/content/en/blog/infobae/index.md
new file mode 100644
index 00000000000..7ac1b3bb76b
--- /dev/null
+++ b/src/site/content/en/blog/infobae/index.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: Infobae more than doubles time spent on mobile site with a Progressive Web App
+description: |
+    Infobae took advantage of service worker to deliver reliable performance on unreliable networks. Their best-in-class PWA achieved a performance score of 93/100 on Lighthouse, an automated tool for measuring web-page quality.
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UM0USY0eNoakaUIVQ5Hj.jpg", alt="Infobae detail", width="800", height="800" %}
+</figure>
+
+Founded in 2002 by lawyer, journalist, and media entrepreneur Daniel Hadad,
+Infobae is one of Argentina’s first major digital-only news outlets. With 38
+million monthly active unique users, it’s one of the most-read Spanish-language
+news outlets in the world, thanks to exponential growth in Latin America.
+
+- 230% longer sessions than on previous mobile site
+- 3X more page views per session than on previous mobile site
+- 5% bounce rate versus 51% on previous mobile site
+ 
+## Challenge
+
+Mobile accounts for 71% (and still growing) of Infobae’s total traffic, with 84%
+of these users on Android phones. Engagement rates on mobile haven’t matched
+those on desktop, however. Desktop readers are deeply engaged, spending on
+average almost 27 minutes per session. On mobile, this number plummeted to just
+3 minutes per session.
+ 
+Despite a growing number of mobile site visitors, mobile bounce rates were much
+higher than on desktop—51% versus 30%, respectively. Infobae believed the high
+bounce rate and short session durations on mobile were caused by slow load
+times. They looked to Progressive Web App (PWA) technologies for a solution. "We
+know that speed is key in the culture of information, media, and news,” says
+Infobae’s Founder and President Hadad.
+ 
+## Solution
+
+Instead of minimally updating their mobile site, Infobae rolled out a completely
+new PWA to 10% of their overall monthly visitors. They saw immediate
+improvements. Navigation within the site loaded in less than a second, which had
+a huge affect on engagement. Average session duration grew to over 7 minutes,
+compared with just 3 minutes on their mobile website. They also saw dramatically
+lower bounce rates, down to an unprecedented 5% on the new PWA.
+ 
+Infobae also took advantage of service worker to deliver reliable performance on
+unreliable networks. Their best-in-class PWA achieved a performance score of
+93/100 on Lighthouse, an automated tool for measuring web-page quality.
+ 
+Infobae’s PWA is all about speed—for readers, journalists, advertisers, and
+developers. The company took their PWA from conception to launch in just months,
+showcasing their focus on digital experimentation and commitment to producing
+high-quality reader experiences. PWA technologies will power their ambitious
+plans to accelerate capabilities for mobile and position them for continued
+growth.
+ 
+“The transformation to digital journalism is driven by cutting-edge technology.
+PWAs give modern publishers a strong, agile, and flexible infrastructure that
+promotes rapid innovation and experimentation—things that are critical for long-
+term success,” says Hadad. “We’re committed to digital speed at Infobae. We look
+forward to PWAs powering our ambitions and accelerating our growth.”
+ 
+{% Blockquote 'Daniel Hadad, founder & president, Infobae'%}
+We have a passion for journalism and technology. Our new PWA will enhance
+our newsroom’s work and the experience of millions of unique users who
+choose Infobae to deliver captivating and relevant information for their
+daily lives. We’re committed to innovation as we continue to drive the
+future of news delivery.
+{% endBlockquote %} 
+ 
+
+### Performance metrics: desktop site, mobile site & PWA
+
+<table>
+<tr>
+<th></th>
+<th>Avg. session duration</th>
+<th>Page views per session</th>
+<th>Bounce rate</th>
+</tr>
+<tr>
+<td>Desktop site</td>
+<td>00:27</td>
+<td>6</td>
+<td>32%</td>
+</tr>
+<tr>
+<td>Mobile site</td>
+<td>00:03</td>
+<td>2</td>
+<td>51%</td>
+</tr>
+<tr>
+<td>PWA</td>
+<td>00:07</td>
+<td>6</td>
+<td>5%</td>
+</tr>
+</table>
diff --git a/src/site/content/en/blog/inp-cwv/index.md b/src/site/content/en/blog/inp-cwv/index.md
new file mode 100644
index 00000000000..7642a055804
--- /dev/null
+++ b/src/site/content/en/blog/inp-cwv/index.md
@@ -0,0 +1,135 @@
+---
+title: Advancing Interaction to Next Paint
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/TLadrRGHayOGRAiYAV1e.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/GwFaOHXsx0cHJFwOYV7s.jpg
+alt: A closeup photograph of a stopwatch.
+subhead: INP is no longer experimental. Learn about Chrome's plan to make it a Core Web Vital in 2024.
+description: The Chrome team announces that INP is no longer experimental and will replace FID as a Core Web Vital in 2024
+date: 2023-05-10
+authors:
+  - rviscomi
+  - anniesullie
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Chrome's mission with the [Web Vitals program](/vitals/) is to help developers focus on the metrics that are essential to great user experiences—the Core Web Vitals. One important aspect of the user experience that we've been focusing on is responsiveness, which is the ability of a web page to react quickly to user interactions.
+
+[First Input Delay (FID)](/fid/) is the Core Web Vital metric that measures responsiveness, but as we've written in the past, there are [known limitations of FID](/better-responsiveness-metric/). This led us to explore and seek feedback on a (then) [experimental metric](/responsiveness/) that addresses these limitations more effectively. In 2022, we announced [Interaction to Next Paint (INP)](/inp/) as  that new metric, made it widely available in our tools, and started working with the community to test its efficacy.
+
+After another year of testing and gathering feedback from the community, we're ready to take the training wheels off and announce that INP is no longer experimental. Furthermore, effective March 2024, we're also committed to promoting INP as the new Core Web Vital metric for responsiveness, replacing FID.
+
+In this post, we'll cover more about the motivation behind the decision, exactly what's changing, and how to get started. For more on how this affects Google Search, refer to [their blog post](https://developers.google.com/search/blog/2023/05/introducing-inp).
+
+## A better responsiveness metric
+
+FID was a huge step forward when we [introduced](https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html) it as a Core Web Vital in 2020. It offered developers a new way to measure responsiveness _as real users experience it_, which has always been an important part of the Web Vitals program. Unlike similar metrics that only approximate page interactivity—like [Total Blocking Time (TBT)](/tbt/) and [Time To Interactive (TTI)](/tti/)—FID directly measures the user experience. Crucially, a page could have slow TBT or TTI and still be perceived as responsive, because of the way real users interact with the page.
+
+While it did improve the way we measure responsiveness, FID wasn't without limitations. The name itself actually gives away two such limitations: "first input" and "delay".  FID only reports the responsiveness of the _first_ time a user interacts with the page. Even though first impressions are important, the first interaction is not necessarily representative of _all_ interactions throughout the life of a page. Further, FID only measures the _input delay_ portion of the first interaction, which is the amount of time the browser had to wait (due to main thread busyness) before even beginning to handle the interaction.
+
+Enter INP. Rather than only measuring the first interaction, INP takes [_all_ interactions](/inp/#whats-in-an-interaction) into account, reporting one of the slowest over the entire lifetime of the page. And, rather than only measuring the delay portion, INP measures the full duration from the start of the interaction, through the event handler, and until the browser is able to paint the next frame. Hence, Interaction to _Next Paint_. These implementation details make INP a much more comprehensive measure of user-perceived responsiveness than FID.
+
+## Evolving INP
+
+Starting today, INP is no longer experimental and will instead be considered a [_pending_ Core Web Vital metric](/vitals/#pending). This is a new designation to indicate that INP has proven its readiness to replace FID—but we're not making the change just yet. To give the ecosystem time to adjust, INP will officially become a stable Core Web Vital metric in March 2024.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png", alt="Graphic showing the timeline of INP phases, starting from when Chrome announced experimental support for INP in May 2022, to today in May 2023 when Chrome is announcing that INP is now a non-experimental, pending Core Web Vital metric, and finally to March 2024 when INP becomes a stable Core Web Vital metric, replacing FID.", width="800", height="270" %}
+  <figcaption>
+    Graphic showing the timeline of INP phases.
+  </figcaption>
+</figure>
+
+Across our tools, you'll start to see INP without the `experimental` prefix or icon. If you programmatically consume INP data from any of the following APIs, you'll need to update your code to switch over to the non-experimental INP field.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Tool</th>
+        <th>Deprecated field</th>
+        <th>New field</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>CrUX API</td>
+        <td><code>experimental_interaction_to_next_paint</code></td>
+        <td><code>interaction_to_next_paint</code></td>
+      </tr>
+      <tr>
+        <td>CrUX History API</td>
+        <td><code>experimental_interaction_to_next_paint</code></td>
+        <td><code>interaction_to_next_paint</code></td>
+      </tr>
+      <tr>
+        <td>CrUX BigQuery</td>
+        <td><code>experimental.interaction_to_next_paint</code></td>
+        <td><code>interaction_to_next_paint</code></td>
+      </tr>
+      <tr>
+        <td>PageSpeed Insights API</td>
+        <td><code>experimental_interaction_to_next_paint</code></td>
+        <td><code>interaction_to_next_paint</code></td>
+      </tr>
+      <tr>
+        <td>Lighthouse report*</td>
+        <td><code>experimental-interaction-to-next-paint</code></td>
+        <td><code>interaction-to-next-paint</code></td>
+      </tr>
+    </tbody>
+    <caption style="max-width: 60ch;">
+      Map of APIs to their old and new INP field name.<br>
+      * Lighthouse will stop using the experimental INP field in version 11.
+    </caption>
+  </table>
+</div>
+
+To ease the transition and avoid breaking any downstream applications, these APIs will continue to serve the experimental INP field for another 90 days. API support for the experimental INP field will end on August 8, 2023.
+
+Meanwhile, FID will remain a Core Web Vital until March 2024. At that time, INP will join [Largest Contentful Paint (LCP)](/lcp/) and [Cumulative Layout Shift (CLS)](/cls/) as the three stable Core Web Vitals. In a future update, we'll share more information about the precise timing of the change and the plan for FID after it's replaced as a Core Web Vital.
+
+## Getting started with INP
+
+<style>
+  .inp-mobile {
+    display: inline;
+  }
+
+  .inp-desktop {
+    display: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .inp-mobile {
+      display: none;
+    }
+
+    .inp-desktop {
+      display: inline;
+    }
+  }
+</style>
+<figure>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-mobile" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 296.6 220.2" style="enable-background:new 0 0 296.6 220.2" xml:space="preserve"><style>.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}</style><path class="st0" d="M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z"/><path class="st1" d="M0 137.1h96v38.4H0v-38.4z"/><path class="st2" d="M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z"/><path class="st3" d="M96 137.1h105.6v38.4H96v-38.4z"/><path class="st2" d="M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z"/><path class="st4" d="M200.6 137.1h96v38.4h-96v-38.4z"/><path class="st2" d="M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z"/></svg>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-desktop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 658.4 113.6" style="enable-background:new 0 0 658.4 113.6" xml:space="preserve"><style>.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}</style><path class="st0" d="M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z"/><path class="st1" d="M303.2 14.9h115.2v43.2H303.2V14.9z"/><path class="st2" d="M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z"/><path class="st3" d="M418.4 14.9h124.8v43.2H418.4V14.9z"/><path class="st2" d="M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z"/><path class="st4" d="M543.2 14.9h115.2v43.2H543.2V14.9z"/><path class="st2" d="M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z"/></svg>
+  <figcaption>
+    Graphic showing the thresholds for good and poor INP.
+  </figcaption>
+</figure>
+
+Don't wait for INP to become a Core Web Vital in 2024 to start improving it. Your website may very well be in the [93%](https://httparchive.org/reports/chrome-ux-report#cruxFastFid) of sites that have good FID performance on mobile devices; however, you might be surprised to learn that only [65%](https://httparchive.org/reports/chrome-ux-report#cruxFastInp) of sites have good INP on mobile devices. INP paints a much more accurate picture of responsiveness, so these numbers help us to more clearly see the room for improvement ahead of us.
+
+To find out whether your site has INP issues, how to address them, and all things INP, the best place to start is the [INP optimization guide](/optimize-inp/). Whether you're learning about responsiveness for the first time or you're a performance expert, we've added a lot of new guidance to make it as easy as possible for everyone to learn how to measure and optimize INP.
+
+INP might take some time to learn, and that's just fine. To help you focus on the optimizations with the biggest ROI, earlier this year we published [a blog post](/top-cwv-2023/) to distill our guidance down to the most effective recommendations to improve Core Web Vitals. Specifically, we wrote about three must-know techniques that apply equally to optimizing FID and INP: avoid or break up long tasks, avoid unnecessary JavaScript, and avoid large rendering updates. You can learn more about these and many other INP optimization techniques in [our documentation](/optimize-inp/).
+
+## The road ahead
+
+A new bar for responsiveness has been set, and we're excited to see the community rise to the challenge for a better user experience. The early [feedback](https://groups.google.com/g/web-vitals-feedback) and [case studies](/tags/case-study/) have been promising, but we know that for many, it may be a long and unfamiliar road ahead. We strive to make that journey as easy as possible with improved [diagnostics](https://github.com/w3c/longtasks/blob/main/loaf-explainer.md), [tools](/vitals-tools/), and [documentation](/optimize-inp/) to help developers along the way.
+
+Stay tuned for updates on INP's exact graduation date in March 2024. And even though the metric is not experimental anymore, we're always open to feedback at [web-vitals-feedback@googlegroups.com](mailto:web-vitals-feedback@googlegroups.com) to help us improve INP and the Web Vitals program as a whole.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Agê Barros](https://unsplash.com/@agebarros)._
diff --git a/src/site/content/en/blog/install-thumbor/hero.jpg b/src/site/content/en/blog/install-thumbor/hero.jpg
deleted file mode 100644
index 9268507fa95..00000000000
Binary files a/src/site/content/en/blog/install-thumbor/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/install-thumbor/index.md b/src/site/content/en/blog/install-thumbor/index.md
index ee1b1ab43ae..5c6d9bc7371 100644
--- a/src/site/content/en/blog/install-thumbor/index.md
+++ b/src/site/content/en/blog/install-thumbor/index.md
@@ -4,7 +4,7 @@ subhead: Thumbor can be used for free to resize, compress, and transform images
 authors:
   - katiehempenius
 date: 2019-08-14
-hero: hero.jpg
+hero: image/admin/prjXX7rGf0hOFVZVoxUe.jpg
 alt: A pile of photos.
 description: |
   Instructions on how to install Thumbor. Thumbor is an open-source image CDN and can be used for free to resize, compress, and transform images.
@@ -18,17 +18,14 @@ Image CDNs make it easy to dynamically optimize the aesthetics and performance o
 
 This guide explains how to install Thumbor on your own server. Once installed, you'll be able to use Thumbor as an API for transforming your images.
 
-
 ## Intro
 
 You'll be installing Thumbor on a VM running Ubuntu 16.04. Ubuntu 16.04 is a very common image and these instructions are intended to work on any cloud provider. Creating a VM might sound like more work than installing Thumbor on your local machine, but the minutes that you take to create a VM will probably save you hours or days of frustration trying to get Thumbor to properly install on your local machine. Although easy to use, Thumbor is notoriously difficult to install but these instructions simplify the process. If dependencies download quickly, the installation can be completed in 5 to 10 minutes.
 
-
 ## Prerequisites
 
 This post assumes that you know how to create a Ubuntu 16.04 LTS VM on a cloud platform like [Google Cloud](https://cloud.google.com/compute/docs/instances/create-start-instance), [AWS,](https://aws.amazon.com/getting-started/tutorials/launch-a-virtual-machine/) or [Azure](https://docs.microsoft.com/en-us/azure/virtual-machines/linux/quick-create-portal?toc=%2Fazure%2Fvirtual-machines%2Flinux%2Ftoc.json) and how to use command line tools to set up the VM.
 
-
 ## Install Thumbor Dependencies
 
 Update and upgrade Ubuntu's already-installed packages:
@@ -86,7 +83,6 @@ thumbor --log-level debug
 
 Thumbor is now running.
 
-
 ## Open Firewall Port
 
 By default, Thumbor runs on port 8888. If your VM's IP address is `12.123.12.122`, then you would access Thumbor from the web browser at `http://12.123.12.123:8888/.../$IMAGE`.
@@ -105,9 +101,9 @@ http://YOUR_VIRTUAL_MACHINE:8888/unsafe/100x100/https://web.dev/install-thumbor/
 
 Note that this URL uses HTTP. Thumbor uses HTTP by default but can be [configured](https://thumbor.readthedocs.io/en/latest/image_loader.html) to use HTTPS.
 
-
 You should see an image that is 100 pixels wide by 100 pixels tall. Thumbor has taken the image `hero.jpg` and size specified in the URL string and served the result. You can replace the image in the URL string (i.e., `https://web.dev/install-thumbor/hero.jpg`) with any other image (e.g., `https://your-site.com/cat.jpg`) and Thumbor will resize that image too.
 
+The [Optimize images with Thumbor](/use-thumbor/#thumbor-url-format) article has more information on using the Thumbor API. In particular, you may be interested in [setting up a Thumbor configuration file](/use-thumbor/#appendix-thumborconf).
 
 ## Appendix: Configuring Systemd
 
@@ -156,6 +152,7 @@ WantedBy=multi-user.target
 ```bash
 sudo systemctl start thumbor.service
 ```
+
 Note: If Thumbor is currently running, you should stop it before attempting to start Thumbor using `systemctl`.
 
 Next, "enable" Thumbor. This means that Thumbor will automatically start on boot.
@@ -172,6 +169,6 @@ systemctl status thumbor.service
 
 If you've successfully set up thumbor.service to use `systemd`, the [status](https://www.freedesktop.org/software/systemd/man/systemctl.html#status%20PATTERN%E2%80%A6%7CPID%E2%80%A6%5D) should show that it is enabled and active.
 
-<figure class="w-figure">
-  <img src="./systemd.jpg" alt="Systemctl displaying the status of Thumbor" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/e04pxe6uE090ewJ3WWPX.jpg", alt="Systemctl displaying the status of Thumbor", width="466", height="164" %}
 </figure>
diff --git a/src/site/content/en/blog/install-thumbor/systemd.jpg b/src/site/content/en/blog/install-thumbor/systemd.jpg
deleted file mode 100644
index ccbdfc21c02..00000000000
Binary files a/src/site/content/en/blog/install-thumbor/systemd.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/interop-2022-wrapup/index.md b/src/site/content/en/blog/interop-2022-wrapup/index.md
new file mode 100644
index 00000000000..8cc375f453b
--- /dev/null
+++ b/src/site/content/en/blog/interop-2022-wrapup/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: "Interop 2022: end of year update"
+description: >
+  Discover just some of the features that have become interoperable during 2022.
+subhead: >
+  Discover just some of the features that have become interoperable during 2022.
+authors:
+  - rachelandrew
+hero: "image/kheDArv5csY6rvQUJDbWRscckLr1/wwRUKgVGHB1Tz6FGzPZy.jpg"
+alt: "Hands holding sparklers."
+date: 2022-12-19
+tags:
+  - blog
+  - css
+---
+
+We've reached the end of another year, and it's time to look at the improvements made by browsers as we work together to improve the interoperability of the web platform. You can check out how things started in [our post in March this year](/interop-2022/), as the initiative was launched.
+
+<figure>
+  {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/s0O6F22XtjN6K9x9NLDs.png", alt="Scores showing Chrome and Edge Dev on 71, Firefox Nightly on 74, Safari Technology Preview on 73.", width="800", height="372" %}
+  <figcaption>The scores for experimental browsers in March 2022.</figcaption>
+</figure>
+
+The overall scores at the end of the year show a great improvement across all engines.
+
+<figure>
+
+  {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/bNJOIpIdpPbN4AFnrcQA.png", alt="Scores showing Chrome and Edge Dev on 90, Firefox Nightly on 89, Safari Technology Preview on 94.", width="800", height="391" %}
+  <figcaption>The scores for experimental browsers in December 2022.</figcaption>
+</figure>
+
+In this post, learn about the progress made during 2022. In addition to these headline features, there were many smaller improvements made by all engines. Small issues that can cause inconsistencies between engines and trip you up during development, have been fixed. Seeing [big features available cross-browser](/tags/newly-interoperable/) is definitely exciting, but it's sometimes the small things that cause the most problems, and it's great to see how much has been improved.
+
+{% Aside %}
+[Explore the tests](https://wpt.fyi/results/?view=subtest&q=%28label%3Ainterop-2021-aspect-ratio%20or%20label%3Ainterop-2021-flexbox%20or%20label%3Ainterop-2021-grid%20or%20label%3Ainterop-2021-position-sticky%20or%20label%3Ainterop-2021-transforms%20or%20label%3Ainterop-2022-cascade%20or%20label%3Ainterop-2022-color%20or%20label%3Ainterop-2022-contain%20or%20label%3Ainterop-2022-dialog%20or%20label%3Ainterop-2022-forms%20or%20label%3Ainterop-2022-scrolling%20or%20label%3Ainterop-2022-subgrid%20or%20label%3Ainterop-2022-text%20or%20label%3Ainterop-2022-viewport%20or%20label%3Ainterop-2022-webcompat%29%20exists%28status%3A%21pass%29%20seq%28status%3A%21missing%20status%3A%21missing%20status%3A%21missing%20status%3Apass%20status%3Apass%20status%3Apass%29&run_id=5694898400395264&run_id=5671385434161152&run_id=5747379813744640&run_id=4818947338141696&run_id=4882567984054272&run_id=5158468428759040) that failed in at least one browser at the start of the year and now pass in all engines. Note that this link may be a little unreliable, try reloading if it's not working for you.
+{% endAside %}
+
+## Cascade layers
+
+[Cascade layers](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_layers) let you manage the cascade by grouping selectors into layers. It's the kind of feature that only becomes useful when it is supported everywhere. All major engines now support cascade layers, and the scores across all browsers reflect how interoperable the feature is, with just a few tests left to pass for Firefox.
+
+{% BrowserCompat 'css.at-rules.layer' %}
+
+## The dialog element
+
+[The dialog element](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) allows the creation of modal and non-modal dialogs. This is a common pattern on the web, and using this element gives you usability and accessibility that you would otherwise have to develop and test when creating your own components. In the article [Building a dialog component](/building-a-dialog-component/), Adam Argyle explains how to build on top of this element to build different types of dialogs.
+
+{% BrowserCompat 'html.elements.dialog' %}
+
+## Subgrid
+
+At the beginning of 2022, the only browser supporting the `subgrid` value for `grid-template-rows` and `grid-template-columns` was Firefox. During 2022 Safari has landed support, and the feature is under development in Chrome. It's going to miss the end of year deadline for interoperability, but it's on the way.
+
+{% BrowserCompat 'css.properties.grid-template-columns.subgrid' %}
+
+## Viewport units
+
+Viewport units are the only feature that has hit 100% of passing tests across all engines. This includes the concepts of the small and large viewport, that accounts for the changing viewport size on mobile as device UI elements appear and disappear. You can find out more about these units in the post [the large, small, and dynamic viewport units](/viewport-units/).
+
+{% BrowserCompat 'css.types.length.viewport_percentage_units_large' %}
+
+## Color 4
+
+This collection of color work enables CSS to not only specify colors in higher definition gamuts (for example, display p3, rec2020), but also provides new color functions that each have unique utilities for working with color. New color spaces are `lch()`, `oklch()`, `lab()`, `oklab()`, `display-p3`, `rec2020`, `a98-rgb`, `prophoto-rgb`, `xyz`, `xyz-d50`, `xzy-d65`: [try these in Canary](https://codepen.io/argyleink/pen/RwyOyeq) today with [this flag enabled](chrome://flags/#enable-experimental-web-platform-features). These changes also apply to gradients, allowing authors to [specify which colorspace their gradients use](https://codepen.io/argyleink/pen/OJObWEW). The same flag also enables [`color-mix()`](https://codepen.io/argyleink/pen/YzLMaor) support, allowing you to mix two colors together in a space of your choice. The color-mix() function is also behind a flag in Safari and Firefox. More colors, better colors, better gradients, and better tools.
+
+## Interop 2023
+
+I hope you'll be happy to know that we aren't intending to stop at the end of 2022, and [Interop 2023](/submit-your-proposals-for-interop-2023/) is already well through the initial planning stage. In the New Year we'll be able to announce the features that have been selected, and look forward to another year of making it easier to develop for the web.
+
+_Hero image by [Ian Schneider](https://unsplash.com/fr/@goian?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/interop-2022/index.md b/src/site/content/en/blog/interop-2022/index.md
new file mode 100644
index 00000000000..98935c0ffaa
--- /dev/null
+++ b/src/site/content/en/blog/interop-2022/index.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: "Interop 2022: browsers working together to improve the web for developers"
+description:
+    "Learn more about how all browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web in 15 key areas."
+authors:
+  - rachelandrew
+  - robertnyman
+  - foolip
+hero: "image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/xv75zUKa4jUR2xGMZ7Xb.jpg"
+alt: "A picture of a brick wall."
+date: 2022-03-03
+updated: 2022-03-07
+tags:
+  - blog
+  - css
+---
+
+For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web in 15 key areas. In this article, find out how we got here, what the project focuses on, how success will be measured, and how you can track progress.
+
+## It all started in 2019
+
+Back in 2019 Mozilla, Google, and others started [a major effort](https://insights.developer.mozilla.org/) to understand developers' pain points, in the form of the [MDN Developer Needs Assessment surveys](https://insights.developer.mozilla.org/), and the deep-dive [Browser Compatibility Report](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html). These reports gave us detailed and actionable information to address top challenges for developers with the web platform, and led to the [Compat 2021 effort](/compat2021/).
+
+Among other things, Compat 2021 led to creating a solid foundation for powerful features such as [CSS grid](https://wpt.fyi/compat2021?feature=css-grid) ([12% usage and steadily growing](https://chromestatus.com/metrics/feature/timeline/popularity/1693)) and [CSS flexbox](https://wpt.fyi/compat2021?feature=css-flexbox) ([77% usage](https://chromestatus.com/metrics/feature/timeline/popularity/1692)), including the `gap` property in flexbox, which solves a top pain point for developers when adopting new layout methods.
+
+We were delighted to reach [a score of over 90%](/compat2021-holiday-update/) across all implementations at the end of 2021!
+
+## What is Interop 2022?
+
+Interop 2022 is a benchmark, agreed on by representatives of three major browser implementations, and developed through a process of [public nomination](https://github.com/web-platform-tests/interop-2022/labels/proposal) and review with input from [supporters](https://github.com/web-platform-tests/interop-2022/blob/main/supporters.md) [Apple](https://webkit.org/blog/12288/working-together-on-interop-2022/), [Bocoup](https://bocoup.com/blog/interop-2022), Google, [Igalia](https://igalia.com/news/interop2022.html), [Microsoft](https://aka.ms/microsoft-interop2022), and [Mozilla](https://hacks.mozilla.org/2022/03/interop-2022/).
+
+The benchmark focuses on 15 areas, [identified by developers](/state-of-css-2021/) as being particularly troublesome when they are missing or have compatibility issues across browsers. All browser vendors have agreed to focus on these areas, and everyone involved is excited to get started on making the experience of developing for the web measurably better.
+
+{% Aside %}
+The terms "compatibility" and "interoperability" are typically distinguished by browser vendors, where compat refers to site compat, and interop refers to two or more browsers behaving the same. In that terminology,this effort is about interoperability and so the project has aligned with that naming.
+{% endAside %}
+
+## The 15 areas of focus
+
+The following features will be the focus of Interop 2022. They include 10 new areas, plus 5 carried over from Compat 2021. The new areas of focus are:
+
+### Cascade layers
+
+[Cascade layers](https://developer.mozilla.org/docs/Web/CSS/@layer) give web developers more control over the cascade. They provide a way to group selectors into layers, each with its own specificity. This means you don't need to order selectors carefully or create highly specific selectors to overwrite base CSS rules.
+
+### Color spaces and CSS color functions
+
+To use color functions in a design system, you currently need to rely on Sass, PostCSS, or `calc()` on HSL values. Color functions built into CSS mean that colors can be dynamically updated, and new color spaces remove the restriction to the sRGB gamut, and perceptual limitations of HSL.
+
+There are two functions defined in [CSS Color Level 5](https://drafts.csswg.org/css-color-5/) that enable more dynamic theming on the web platform:
+
+- `color-mix()`: Takes two colors and returns the result of mixing them in a specified color space by a specified amount.
+- `color-contrast()`: Selects from a list of colors the color with the highest contrast to a specified single color.
+
+These functions support expanded color spaces (LAB, LCH, and P3), and in addition to HSL and sRGB, they default to the uniform LCH color space. 
+
+### New viewport units
+
+Difficulties dealing with viewport sizing are prominent in both the [MDN Browser Compatibility Report 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html#findings-viewport) and the new [State of CSS 2021](https://2021.stateofcss.com/en-US/opinions/#browser_interoperability_features) survey. [CSS Values and Units Level 4](https://drafts.csswg.org/css-values-4/#viewport-relative-lengths) adds new units for the largest, smallest, and dynamic viewport sizes, `lv*`, `sv*`, and `dv*`. These units will make it easier to create layouts that fill the visible viewport on mobile devices while taking the address bar into account.
+
+{% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/JUvvIgXen1zmHFH53CBS.png", alt="The different parts of the viewport for each type of viewport unit.", width="800", height="664" %}
+
+Additionally, the cross vendor team behind Interop 2022 will collaborate on researching and improving the state of interoperability of existing viewport measurement features, including the existing `vh` unit.
+
+### Scrolling
+
+The [2021 Scroll Survey Report](/2021-scroll-survey-report/) confirms that scrolling features and scrolling compatibility are difficult to implement and have many areas for improvement. We'll focus on [scroll snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap), [scroll-behavior](https://developer.mozilla.org/docs/Web/CSS/scroll-behavior), and [overscroll-behavior](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior) to help scrolling be more consistent and smooth across platforms.
+
+We are also exploring new [scroll snap feature proposals](https://github.com/argyleink/ScrollSnapExplainers). 
+
+
+### Subgrid
+
+The [`subgrid`](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid) value of `grid-template-columns` and `grid-template-rows` means that a grid item that has `display: grid` applied can inherit the track definition from the part of the parent grid it is placed over.
+
+For example, the following three card components have a header and footer aligned with the adjacent card headers and footers, even though each card has an independent grid. This pattern works because each card is an item that spans three rows of the parent grid, then uses subgrid to inherit those rows into the card.
+
+<figure>
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/yYDiYpyyTkH9IJK4KxvA.png", alt="A three card component where the headers and footers are aligned between the cards.", width="800", height="209" %}
+
+  <figcaption><a href="https://codepen.io/web-dot-dev/pen/XWzqrLR">See this on CodePen</a>.</figcaption>
+</figure>
+
+
+### Also included
+
+- CSS Containment (the `contain` property)
+- The `<dialog>` element
+- Form controls
+- Typography and Encodings: including `font-variant-alternates`, `font-variant-position`,  the `ic` unit, and CJK text encodings
+- Web Compat, which focuses on differences between browsers that have caused site compatibility issues affecting end users
+
+The following areas made great progress through the Compat 2021 project, but there is still room for improvement. Therefore, they have been included in Interop 2022, in order that the remaining issues can be addressed.
+
+- Aspect Ratio
+- Flexbox
+- Grid
+- Sticky Positioning
+- Transforms
+
+
+### Investigation efforts
+
+In addition to the 15 focus areas, Interop 2022 includes three investigation efforts. These are areas that are problematic and need improvement, but where the current state of the specifications or tests aren’t yet good enough to be able to score progress using test results:
+
+- Editing, `contenteditable` and `execCommand`
+- Pointer and Mouse Events
+- Viewport Measurement
+
+Browser vendors and other stakeholders will collaborate on improving the tests and specifications for these areas, so that they could be included in future iterations of this effort.
+
+
+## Measuring success and tracking progress
+
+{% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/MfdXmrXC3aspp2CIQCdb.png", alt="The scores per browser - 71 for Chrome and Edge, 74 for Firefox, 73 for Safari Technology Preview.", width="800", height="374" %}
+
+The existing [web-platform-tests dashboard](https://wpt.fyi/) will be used to track the progress in the 15 focus areas. For each area, a set of tests have been identified. Browsers are then scored against these tests, giving a score for each area and an overall score for all 15 areas.
+
+To follow along and track the progress, check out the [Interop 2022 dashboard](https://wpt.fyi/interop-2022). Over the course of the year, you can follow along and see how the platform you build for is improving. 
+
+<figure>
+  {% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/jrtdwPgBhznFQ5u8cZmk.png", alt="An image of a table with scores for many areas for all major web browsers", width="800", height="1146" %}
+  <figcaption><a href="https://wpt.fyi/interop-2022">See all browser scores per focus area on wpt.fyi/interop-2022.</a></figcaption> 
+</figure>
+
+## What will all this mean for developers?
+
+The goal of these multi-year interoperability efforts, in the form of Compat 2021, Interop 2022 and much more, is to fully acknowledge and address the pain points developers have experienced through for many years. And it's not a one-browser effort but rather a strong collaboration between all major browser vendors and friends for improving the web platform across the board.
+
+In essence, the goal is to make the web platform more usable and reliable for developers, so that they can spend more time building great web experiences instead of working around browser inconsistencies.
+
+
+
+## Let us know what you think
+
+If you have feedback on the improvements made during [Compat 2021](/compat2021/), or on any of the features included in Interop 2022, we would love to hear from you. Which of these features will make the most difference to your work? What are you really excited about? [File issues for the GitHub repo](https://github.com/web-platform-tests/interop-2022/issues/) or [let us know on Twitter](https://twitter.com/chromiumdev).
+
+More about Interop 2022 from:
+
+- [Apple](https://webkit.org/blog/12288/working-together-on-interop-2022/)
+- [Bocoup](https://bocoup.com/blog/interop-2022)
+- [Igalia](https://igalia.com/news/interop2022.html)
+- [Microsoft](https://aka.ms/microsoft-interop2022)
+- [Mozilla](https://hacks.mozilla.org/2022/03/interop-2022/)
diff --git a/src/site/content/en/blog/interop-2023/index.md b/src/site/content/en/blog/interop-2023/index.md
new file mode 100644
index 00000000000..b200d8c36c7
--- /dev/null
+++ b/src/site/content/en/blog/interop-2023/index.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: "Interop 2023: continuing to improve the web for developers"
+subhead:
+    "Again in 2023, all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues."
+description:
+    "Learn more about how all browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2023 will improve the experience of developing for the web across a number of key areas."
+authors:
+  - robertnyman
+  - foolip
+  - rachelandrew
+hero: "image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/NqhNbZwtnkSEgDtlXdHa.jpg"
+alt: "A picture of a curved stairway."
+date: 2023-02-01
+tags:
+  - blog
+  - css
+  - javascript
+  - fonts
+---
+
+In 2023, all major browser vendors and other stakeholders are again working together to solve the top browser compatibility issues. The effort started on this scale with Interop 2022, and you can learn what we achieved together in the [end-of-year post](/interop-2022-wrapup/). Everyone involved believes this will help improve the experience for web developers everywhere. This year, for the first time, we publicly announced the [proposal process](/submit-your-proposals-for-interop-2023/) and got many great suggestions from frameworks, large companies, browser vendors, and developers everywhere.
+
+## The Interop 2023 focus areas
+
+This time around, we have no less than 26 focus areas, outlined in detail in our [project document](https://github.com/web-platform-tests/interop/blob/main/2023/README.md#focus-areas). They are, in alphabetical order:
+
+- [Border Image in CSS](https://developer.mozilla.org/docs/Web/CSS/border-image)
+- [Color Spaces and Functions in CSS](https://developer.mozilla.org/docs/Web/CSS/color_value)
+- [Container Queries in CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries)
+- [Containment in CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Containment)
+- [CSS Pseudo-classes](https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes)
+- [Custom Properties in CSS](https://developer.mozilla.org/docs/Web/CSS/@property)
+- [Flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Font feature detection](https://developer.mozilla.org/docs/Web/CSS/@supports#function_syntax) and [palettes](https://developer.mozilla.org/docs/Web/CSS/font-palette)
+- [Forms](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+- [Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+- [:has()](https://developer.mozilla.org/docs/Web/CSS/:has )
+- [Inert](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert)
+- [Masking in CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Masking)
+- [Math Functions in CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Functions#math_functions)
+- [Media Queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Modules in Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [Motion Path in CSS Animations](https://developer.mozilla.org/docs/Web/CSS/CSS_Motion_Path)
+- [Offscreen Canvas](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas)
+- [Pointer and mouse Events](https://developer.mozilla.org/docs/Web/API/Pointer_events)
+- [URL](https://developer.mozilla.org/docs/Web/API/URL)
+- Web Compat 2023: A catchall focus area for small bugs that cause known site compatibility issues
+- [Web Codecs (video)](https://developer.mozilla.org/docs/Web/API/WebCodecs_API)
+- [Web Components](https://developer.mozilla.org/docs/Web/Web_Components)
+
+You can find full details of all focus areas at [Web Platform Tests](https://github.com/web-platform-tests/interop/blob/main/2023/README.md#focus-areas) based on [MDN Web Docs](https://developer.mozilla.org/), however here are a few that we think you might be really excited about.
+
+### Container Queries
+
+Container queries has been a [top request](https://2021.stateofcss.com/opinions/#currently_missing_from_css_wins) from developers for many years, and in 2022 Chrome and Safari shipped it. Firefox expects to ship container queries in Firefox 110, and the tests for this focus area help to ensure that container queries work reliably cross-browser and according to the spec.
+
+### :has(…)
+
+Developers have for a long time asked for a parent selector in CSS. The [`:has()`](https://developer.mozilla.org/docs/Web/CSS/:has) pseudo-class makes possible many of the use cases for parent selectors, as well as selecting a previous sibling element with respect to a reference element. For example, this makes it possible to style a figure that has a caption differently to one that doesn’t. Learn more about the use cases for `has()` in [:has(), the family selector](https://developer.chrome.com/blog/has-m105/).
+
+### Custom Properties
+
+CSS custom properties, also known as CSS variables, make it possible to define a value once in a stylesheet and reuse that in many places, reducing repetition. For example, you can define a common color or font size once in a stylesheet and use this across components. Basic support for custom properties has been in browsers for a long time. Interop 2023 focuses on the [`@property`](https://developer.mozilla.org/docs/Web/CSS/@property) at-rule. `@property` represents a custom property registration in a stylesheet, allowing for property type checking, setting default values, and whether the property should inherit values. Learn more in [@property: giving superpowers to CSS variables](/at-property/).
+
+### CSS masking
+
+[CSS masking](https://developer.mozilla.org/docs/Web/CSS/CSS_Masking) provides methods to apply image effects, such as you might see in a graphics application, using CSS. Support for the various masking properties is patchy, making masking harder to use than it should be. This focus area will help developers to confidently use creative effects cross-browser. Learn more about applying effects to images in this [article about image masking](/css-masking/).
+
+### OffscreenCanvas
+
+The [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas)  element and Canvas API provide a scriptable way to draw graphics to the screen. However, this can cause performance problems as the work is completed on the same thread as user interaction.  [OffscreenCanvas](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas) offers developers a canvas which is decoupled from the DOM and the Canvas API. Developers can also run rendering tasks in a Web Worker, separate from the main thread. Learn more about [the performance benefits of OffscreenCanvas](https://developer.chrome.com/blog/offscreen-canvas/).
+
+### Pointer and mouse events
+
+[Pointer events](https://developer.mozilla.org/docs/Web/API/Pointer_events) are fired when interacting with a page using a mouse, pen, stylus, or touch screen. Mouse events are fired when using a mouse, but for historical reasons also for touch. This focus area covers the behavior of pointer and mouse interaction with pages, including how they interact with hit testing and scrolling areas. The focus area for 2023 excludes touch and stylus, due to a lack of Web Platform Tests in this area.
+
+### WebCodecs
+
+The [WebCodecs API](https://developer.mozilla.org/docs/Web/API/WebCodecs_API) provides methods for developers to access the individual frames of video, and chunks of audio. It offers access to codecs that are already available in the browser, and various interfaces to interact with them. The article [Video processing with WebCodecs](https://developer.chrome.com/en/articles/webcodecs/) shows how to use the API to decode and render individual frames to a canvas.
+
+### Web Components
+
+[Web Components](https://developer.mozilla.org/docs/Web/Web_Components) is an umbrella term for a number of technologies used to create reusable components, such as Custom Elements and Shadow DOM. Interop 2023 will focus on improving the interoperability of these foundational technologies.
+
+## Dashboard
+
+Follow progress throughout the year [on the Interop 2023 dashboard](https://wpt.fyi/interop-2023/), where you can see current scores and the status of addressing these focus areas across all major browser engines.
+
+<figure>
+<a href="https://wpt.fyi/interop-2023/">
+{% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/rK7xV8u6Jvf9oSl7VkCT.png", alt="The Scores for Interop overall: 62, Investigations: 0, and the scores per browser - 86 for Chrome and Edge, 74 for Firefox, 86 for Safari Technology Preview.", width="800", height="866" %}
+</a>
+<figcaption>The Interop 2023 Dashboard (screenshot taken January 31st, 2023).</figcaption>
+</figure>
+
+
+The Focus Area scores are calculated based on test pass rates. If you have feedback or want to contribute improvements to [WPT](https://github.com/web-platform-tests/wpt), please file an issue to request updating the set of tests used for scoring.
+
+<figure>
+<a href="https://wpt.fyi/interop-2023/">
+{% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/NYQC2r4udqv0RXxrkWVe.png", alt="A list of all Active Focus Areas together with browser scores and overall Interop score", width="800", height="1032" %}
+</a>
+<figcaption>All the Active Focus Areas and their overall Interop Score.</figcaption>
+</figure>
+
+## More about Interop 2023
+
+- [Apple](https://webkit.org/blog/13706/interop-2023/)
+- [Bocoup](https://bocoup.com/blog/interop-2023)
+- [Igalia](https://www.igalia.com/news/2023/interop2023.html)
+- [Microsoft](https://blogs.windows.com/msedgedev/2023/02/01/microsoft-edge-and-interop-2023/)
+- [Mozilla](https://hacks.mozilla.org/2023/02/announcing-interop-2023/)
diff --git a/src/site/content/en/blog/interop-2024-proposals/index.md b/src/site/content/en/blog/interop-2024-proposals/index.md
new file mode 100644
index 00000000000..d11ef9cdd09
--- /dev/null
+++ b/src/site/content/en/blog/interop-2024-proposals/index.md
@@ -0,0 +1,40 @@
+---
+layout: post
+title: "Submit your proposals for Interop 2024"
+subhead:
+    "Once again it's time to submit your proposals, as Interop 2024 is happening!"
+description:
+    "Learn more about how to submit a proposal for Interop 2024."
+authors:
+  - rachelandrew
+  - robertnyman
+  - foolip
+  - nandunair
+hero: "image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/ZZjlTqQijYN8FocvisWC.jpg"
+alt: "A picture of three post-its and a marker pen."
+date: 2023-09-14
+tags:
+  - blog
+  - css
+---
+
+Over the past two years the Chrome team has successfully worked with our partners to improve the interoperability of the web. For [Interop 2022](/interop-2022-wrapup/) all major browser vendors and other stakeholders worked together to improve top browser compatibility issues identified by web developers. We repeated the process with [Interop 2023](/interop-2023/), which still has a few months to run yet is already seeing a huge improvement in scores. For Interop 2023, we also requested public proposals for features to include, which led to many great suggestions representing the needs of the wider web ecosystem.
+
+<figure>
+  {% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/rK7xV8u6Jvf9oSl7VkCT.png", alt="The Scores for Interop overall: 62, Investigations: 0, and the scores per browser - 86 for Chrome and Edge, 74 for Firefox, 86 for Safari Technology Preview.", width="800", height="866" %}
+  <figcaption>January 2023.</figcaption>
+</figure>
+
+
+<figure>
+  {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/25TJc2Fc8gJ4Qp9vQUNA.png", alt="The scores for Interop overall: 81, Investigations 59, and per browser, 96 for Chrome Dev and Edge Dev, 88 for Firefox Nightly, and 92 for Safari Technology Preview.", width="800", height="808" %}
+  <figcaption>September 2023.</figcaption>
+</figure>
+
+It's been a huge success, with many features reaching interoperability, and we're happy to announce that Interop 2024 is happening. 
+
+The first step is to gather suggested features, once again including ideas from the wider community, so the Interop 2024 proposal process is now open for submissions. Suggestions can include features that behave differently across browsers, or features that are not yet implemented in all browsers. Keep in mind that proposals with high quality specifications and web platform tests are [more likely to be included](https://github.com/web-platform-tests/interop/blob/main/README.md#requirements-for-focus-area-proposals), as this project is about reaching interoperability rather than specifying new features. The proposal submission process ends October 5, 2023.
+
+Once the proposal period ends, the collected submissions will be discussed by browser vendors and other partners to determine the final list. It's likely that there will be more proposals than can be achieved during 2024, so some high quality proposals may not be selected. We are looking forward to reviewing [all the submissions](https://github.com/orgs/web-platform-tests/projects/3), and we'll post the final list here once Interop 2024 gets underway.
+
+[Submit your proposals here](https://github.com/web-platform-tests/interop/issues/new/choose).
diff --git a/src/site/content/en/blog/intersectionobserver-v2/index.md b/src/site/content/en/blog/intersectionobserver-v2/index.md
new file mode 100644
index 00000000000..6b07373f359
--- /dev/null
+++ b/src/site/content/en/blog/intersectionobserver-v2/index.md
@@ -0,0 +1,243 @@
+---
+title: "Trust is good, observation is better: Intersection Observer v2"
+subhead: |
+  Intersection Observer v2 adds the capability to not only observe intersections per se, but to also
+  detect if the intersecting element was visible at the time of intersection.
+authors:
+  - thomassteiner
+description: |
+  Intersection Observer v2 adds the capability to not only observe intersections per se, but to also
+  detect if the intersecting element was visible at the time of intersection.
+date: 2019-02-15
+updated: 2021-02-26
+tags:
+  - blog
+  # - intersectionobserver
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/wUCO2CgK5UOz6URpXEtd.jpeg
+alt: Eye of a cat looking through a gap in a fence.
+---
+
+Intersection Observer&nbsp;v1 is one of those APIs that's probably universally loved, and, now that
+[Safari supports it](https://webkit.org/blog/8582/intersectionobserver-in-webkit/) as well,
+it's also finally universally usable in all major browsers. For a quick refresher of the API,
+I recommend watching [Surma](/authors/surma/)'s
+[Supercharged Microtip](https://www.youtube.com/watch?v=kW_atFXMG98) on Intersection
+Observer&nbsp;v1 that is embedded below.
+You can also read Surma's in-depth
+[article](https://developer.chrome.com/blog/intersectionobserver/).
+People have used Intersection Observer&nbsp;v1 for a wide range of use cases like
+[lazy loading of images and videos](/fast/#lazy-load-images-and-video),
+[being notified when elements reach `position: sticky`](https://developer.chrome.com/blog/sticky-headers),
+[firing analytics events](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/0.1/visibility-manager.js),
+and many more.
+
+{% YouTube 'kW_atFXMG98' %}
+
+For the full details, check out the
+[Intersection Observer docs on MDN](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API),
+but as a short reminder, this is what the Intersection Observer&nbsp;v1 API looks like in the most
+basic case:
+
+```js
+const onIntersection = (entries) => {
+  for (const entry of entries) {
+    if (entry.isIntersecting) {
+      console.log(entry);
+    }
+  }
+};
+
+const observer = new IntersectionObserver(onIntersection);
+observer.observe(document.querySelector('#some-target'));
+```
+
+## What's challenging with Intersection Observer&nbsp;v1?
+
+To be clear, Intersection Observer&nbsp;v1 is great, but it's not perfect. There are
+some corner cases where the API falls short. Let's have a closer look!
+The Intersection Observer&nbsp;v1 API can tell you when an element is scrolled into the
+window's viewport, but it *doesn't* tell you whether the element is covered
+by any other page content (that is, when the element is occluded) or whether
+the element's visual display has been modified by visual effects like `transform`, `opacity`,
+`filter`, etc., which *effectively* can make it invisible.
+
+For an element in the top-level document, this information can be determined by analyzing
+the DOM via JavaScript, for example via
+[`DocumentOrShadowRoot.elementFromPoint()`](https://developer.mozilla.org/docs/Web/API/DocumentOrShadowRoot/elementFromPoint)
+and then digging deeper.
+In contrast, the same information cannot be obtained if the element in question is
+located in a third-party iframe.
+
+## Why is actual visibility such a big deal?
+
+The Internet is, unfortunately, a place that attracts bad actors with worse intentions.
+For example, a shady publisher that serves pay-per-click ads on a content site might be incentivized
+to trick people into clicking their ads to increase the publisher's ad payout (at least
+for a short period, until the ad network catches them).
+Typically, such ads are served in iframes.
+Now if the publisher wanted to get users to click such ads, they could make the ad iframes
+completely transparent by applying a CSS rule `iframe { opacity: 0; }` and overlaying the iframes
+on top of something attractive, like a cute cat video that users would actually want to click.
+This is called *clickjacking*.
+You can see such a clickjacking attack in action in the upper section of this
+[demo](https://trick-ad-click.glitch.me/) (try "watching" the cat video
+and activate "trick mode").
+You will notice that the ad in the iframe "thinks" it received legitimate clicks, even if it was
+completely transparent when you (pretend-involuntarily) clicked it.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/oSQhudX6lenD4Pld7PJD.png", alt="Tricking a user into clicking an ad by styling it transparent and overlaying it on top of something attractive.", width="800", height="533" %}
+
+## How does Intersection Observer&nbsp;v2 fix this?
+
+Intersection Observer&nbsp;v2 introduces the concept of tracking the actual "visibility" of a target
+element as a human being would define it.
+By setting an option in the
+[`IntersectionObserver` constructor](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/IntersectionObserver),
+intersecting
+[`IntersectionObserverEntry`](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry)
+instances will then contain a new boolean field named `isVisible`.
+A `true` value for `isVisible` is a strong guarantee from the underlying implementation
+that the target element is completely unoccluded by other content
+and has no visual effects applied that would alter or distort its display on screen.
+In contrast, a `false` value means that the implementation cannot make that guarantee.
+
+An important detail of the
+[spec](https://w3c.github.io/IntersectionObserver/v2/#calculate-visibility-algo)
+is that the implementation *is permitted* to report *false negatives* (that is, setting `isVisible`
+to `false` even when the target element is completely visible and unmodified).
+For performance or other reasons, browsers limit themselves to working with bounding
+boxes and rectilinear geometry; they don't try to achieve pixel-perfect results for
+modifications like `border-radius`.
+
+That said, *false positives* are *not permitted* under any circumstances (that is, setting
+`isVisible` to `true` when the target element is not completely visible and unmodified).
+
+{% Aside 'warning' %}
+  Visibility is *much more expensive* to compute than intersection. For that reason,
+  Intersection Observer&nbsp;v2 is *not intended to be used broadly* in the way that
+  Intersection Observer&nbsp;v1 is. Intersection Observer&nbsp;v2 is focused on combatting fraud
+  and should be used only when the visibility information is needed and
+  when Intersection Observer&nbsp;v1 functionality is therefore insufficient.
+{% endAside %}
+
+## What does the new code look like in practice?
+
+The `IntersectionObserver` constructor now takes two additional configuration properties: `delay`
+and `trackVisibility`.
+The `delay` is a number indicating the minimum delay in milliseconds between notifications from
+the observer for a given target.
+The `trackVisibility` is a boolean indicating whether the observer will track changes in a target's
+visibility.
+
+It's important to note here that when `trackVisibility` is `true`, `delay` is required to be at
+least `100` (that is, no more than one notification every 100ms).
+As noted before, visibility is expensive to calculate, and this requirement is a precaution against
+performance degradation and battery consumption. The responsible developer will use the
+*largest tolerable value* for delay.
+
+According to the current
+[spec](https://w3c.github.io/IntersectionObserver/v2/#calculate-visibility-algo), visibility is
+calculated as follows:
+
+- If the observer's `trackVisibility` attribute is `false`, then the target is considered visible.
+This corresponds to the current&nbsp;v1 behavior.
+
+- If the target has an effective transformation matrix other than a 2D&nbsp;translation
+or proportional 2D&nbsp;upscaling, then the target is considered invisible.
+
+- If the target, or any element in its containing block chain, has an effective opacity other than
+1.0, then the target is considered invisible.
+
+- If the target, or any element in its containing block chain, has any filters applied,
+then the target is considered invisible.
+
+- If the implementation cannot guarantee that the target is completely unoccluded by other page
+content, then the target is considered invisible.
+
+This means current implementations are pretty conservative with guaranteeing visibility.
+For example, applying an almost unnoticeable grayscale filter like `filter: grayscale(0.01%)`
+or setting an almost invisible transparency with `opacity: 0.99` would all render the element
+invisible.
+
+Below is a short code sample that illustrates the new API features. You can see its click tracking
+logic in action in the second section of the [demo](https://trick-ad-click.glitch.me/)
+(but now, try "watching" the puppy video). Be sure to activate "trick mode" again to immediately
+convert yourself into a shady publisher and see how Intersection Observer&nbsp;v2 prevents
+non-legitimate ad clicks from being tracked.
+This time, Intersection Observer&nbsp;v2 has our back! 🎉
+
+{% Aside %}
+  In contrast to typical lazy-loading code, if you use Intersection Observer to prevent this
+  kind of clickjacking attack, you *must not* `unobserve` the element after the first intersection.
+{% endAside %}
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/6n5a6quLhExtwlFoNVdr.png", alt="Intersection Observer v2 preventing an unintended click on an ad.", width="612", height="876" %}
+
+```html
+<!DOCTYPE html>
+<!-- This is the ad running in the iframe -->
+<button id="callToActionButton">Buy now!</button>
+```
+
+```js
+// This is code running in the iframe.
+
+// The iframe must be visible for at least 800ms prior to an input event
+// for the input event to be considered valid.
+const minimumVisibleDuration = 800;
+
+// Keep track of when the button transitioned to a visible state.
+let visibleSince = 0;
+
+const button = document.querySelector('#callToActionButton');
+button.addEventListener('click', (event) => {
+  if ((visibleSince > 0) &&
+      (performance.now() - visibleSince >= minimumVisibleDuration)) {
+    trackAdClick();
+  } else {
+    rejectAdClick();
+  }
+});
+
+const observer = new IntersectionObserver((changes) => {
+  for (const change of changes) {
+    // ⚠️ Feature detection
+    if (typeof change.isVisible === 'undefined') {
+      // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
+      change.isVisible = true;
+    }
+    if (change.isIntersecting && change.isVisible) {
+      visibleSince = change.time;
+    } else {
+      visibleSince = 0;
+    }
+  }
+}, {
+  threshold: [1.0],
+  // 🆕 Track the actual visibility of the element
+  trackVisibility: true,
+  // 🆕 Set a minimum delay between notifications
+  delay: 100
+}));
+
+// Require that the entire iframe be visible.
+observer.observe(document.querySelector('#ad'));
+```
+
+## Related Links
+
+- Latest Editor's Draft of the
+[Intersection Observer spec](https://w3c.github.io/IntersectionObserver/v2/).
+- Intersection Observer&nbsp;v2 on
+[Chrome Platform Status](https://www.chromestatus.com/feature/5878481493688320).
+- Intersection Observer&nbsp;v2 [Chromium bug](https://crbug.com/827639).
+- Blink
+[Intent to Implement posting](https://groups.google.com/a/chromium.org/d/msg/blink-dev/tudxAHN9-AY/vz91o_aNDwAJ).
+
+## Acknowledgements
+
+Thanks to [Simeon Vincent](https://twitter.com/dotproto),
+[Yoav Weiss](https://twitter.com/yoavweiss), and [Mathias Bynens](https://twitter.com/mathias)
+for reviewing this article, as well as [Stefan Zager](https://twitter.com/stefanzager) likewise
+for reviewing and for implementing the feature in Chrome.
+Hero image by Sergey Semin on [Unsplash](https://unsplash.com/photos/ZuXDaoIx_Bc).
diff --git a/src/site/content/en/blog/intersectionobserver/index.md b/src/site/content/en/blog/intersectionobserver/index.md
new file mode 100644
index 00000000000..f5ce4971a29
--- /dev/null
+++ b/src/site/content/en/blog/intersectionobserver/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: IntersectionObserver's coming into view
+subhead: IntersectionObservers let you know when an observed element enters or exits the browser's viewport.
+authors:
+  - surma
+description: IntersectionObservers let you know when an observed element enters or exits the browser's viewport.
+date: 2016-04-20 
+updated: 2022-08-15
+tags:
+  - blog
+  - javascript
+  - performance
+---
+
+{% Aside %}
+`IntersectionObserver` V2 has landed in Chromium-based browsers. [Read up on the updates](/intersectionobserver-v2/) for how that API improves on the first version of `IntersectionObserver`.
+{% endAside %}
+
+{% BrowserCompat 'api.IntersectionObserver' %}
+
+Let's say you want to track when an element in your DOM enters the visible [viewport](https://en.wikipedia.org/wiki/Viewport). You might want to do this so you can lazy-load images just in time or because you need to know if the user is actually looking at a certain ad banner. You can do that by hooking up the scroll event or by using a periodic timer and calling [`getBoundingClientRect()`](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect)
+on that element.
+
+This approach, however, is painfully slow as each call to `getBoundingClientRect()` forces the browser to [re-layout the entire page](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) and will introduce considerable jank to your website. Matters get close to impossible when you know your site is being loaded inside an iframe and you want to know when the user can see an element. The Single Origin Model and the browser won't let you access any data from the web page that contains the iframe. This is a common problem for ads for example, that are frequently loaded using iframes.
+
+Making this visibility test more efficient is what [`IntersectionObserver`](https://w3c.github.io/IntersectionObserver) was [designed for](https://github.com/WICG/IntersectionObserver/blob/gh-pages/explainer.md), and it's landed in all modern browsers. `IntersectionObserver` lets you know when an observed element enters or exits the browser's viewport.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tID6JAeiVyE8Q1hOZfLK.gif", alt="Iframe visibility", width="320", height="649" %}
+</figure>
+
+## How to create an `IntersectionObserver`
+
+The API is rather small, and best described using an example:
+
+```js
+const io = new IntersectionObserver(entries => {
+  console.log(entries);
+}, {
+  /* Using default options. Details below */
+});
+
+// Start observing an element
+io.observe(element);
+
+// Stop observing an element
+// io.unobserve(element);
+
+// Disable entire IntersectionObserver
+// io.disconnect();
+```
+
+Using the default options for `IntersectionObserver`, your callback will be called both when the element comes partially into view and when it completely leaves the viewport.
+
+If you *need* to observe multiple elements, it is both possible and advised to observe multiple elements using the *same* `IntersectionObserver` instance by calling `observe()` multiple times.
+
+An `entries` parameter is passed to your callback which is an array of [`IntersectionObserverEntry`](https://w3c.github.io/IntersectionObserver#intersection-observer-entry) objects. Each such object contains updated intersection data for one of your observed elements.
+
+```js
+🔽[IntersectionObserverEntry]
+    time: 3893.92
+    🔽rootBounds: ClientRect
+        bottom: 920
+        height: 1024
+        left: 0
+        right: 1024
+        top: 0
+        width: 920
+    🔽boundingClientRect: ClientRect
+    // ...
+    🔽intersectionRect: ClientRect
+    // ...
+    intersectionRatio: 0.54
+    🔽target: div#observee
+    // ...
+```
+
+[`rootBounds`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverentry-rootbounds) is the result of calling `getBoundingClientRect()` on the root element, which is the viewport by default. [`boundingClientRect`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverentry-boundingclientrect) is the result of `getBoundingClientRect()` called on the observed element. [`intersectionRect`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverentry-intersectionrect) is the intersection of these two rectangles and effectively tells you *which part* of the observed element is visible. [`intersectionRatio`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverentry-intersectionratio) is closely related, and tells you *how much* of the element is visible. With this info at your disposal, you are now able to implement features like just-in-time loading of assets before they become visible on screen. Efficiently.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/re5vpwXZrCpz0A5GYEiw.png", alt="Intersection ratio.", width="800", height="791" %}
+</figure>
+
+`IntersectionObserver`s deliver their data asynchronously, and your callback code will run in the main thread. Additionally, the spec actually says that `IntersectionObserver` implementations should use [`requestIdleCallback()`](https://w3c.github.io/IntersectionObserver#queue-intersection-observer-task). This means that the call to your provided callback is low priority and will be made by the browser during idle time. This is a conscious design decision.
+
+## Scrolling divs
+
+I am not a big fan of scrolling inside an element, but I am not here to judge, and neither is `IntersectionObserver`. The [`options`](https://w3c.github.io/IntersectionObserver#dictdef-intersectionobserverinit) object takes a [`root`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverinit-root) option that lets you define an alternative to the viewport as your root. It is important to keep in mind that `root` needs to be an ancestor of all the observed elements.
+
+## Intersect all the things!
+
+No! Bad developer! That's not mindful usage of your user's CPU cycles. Let's think about an infinite scroller as an example: In that scenario, it is definitely advisable to add [sentinels](https://en.wikipedia.org/wiki/Sentinel_value) to the DOM and observe (and recycle!) those. You should add a sentinel close to the last item in the infinite scroller. When that sentinel comes into view, you can use the callback to load data, create the next items, attach them to the DOM and reposition the sentinel accordingly. If you properly recycle the sentinel, no additional call to `observe()` is needed. The `IntersectionObserver` keeps working.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OZ2BUKXqzxtcZccTsWGL.png", alt="Infinite scroller", width="800", height="892" %}
+</figure>
+
+### More updates, please
+
+As mentioned earlier, the callback will be triggered a single time when the observed element comes partially into view and another time when it has left the viewport. This way `IntersectionObserver` gives you an answer to the question, "Is element X in view?". In some use cases, however, that might not be enough.
+
+That's where the [`threshold`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverinit-threshold) option comes into play. It allows you to define an array of [`intersectionRatio`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverentry-intersectionratio) thresholds. Your callback will be called every time `intersectionRatio` crosses one of these values. The default value for `threshold` is `[0]`, which explains the default behavior. If we change `threshold` to `[0, 0.25, 0.5, 0.75, 1]`, we will get notified every time an additional quarter of the element becomes visible:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/igJyLJwnl7OUShqsWmMY.gif", alt="Threshold animation.", width="320", height="649" %}
+</figure>
+
+### Any other options?
+
+As of now, there's only one additional option to the ones listed above. [`rootMargin`](https://w3c.github.io/IntersectionObserver#dom-intersectionobserverinit-rootmargin) allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections. These margins are specified using a CSS-style string, á la `"10px 20px 30px 40px"`, specifying top, right, bottom and left margin respectively. To summarize, the `IntersectionObserver` options struct offers the following options:
+
+```js
+new IntersectionObserver(entries => {/* … */}, {
+  // The root to use for intersection.
+  // If not provided, use the top-level document's viewport.
+  root: null,
+  // Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
+  // If an explicit root element is specified, components may be percentages of the
+  // root element size.  If no explicit root element is specified, using a
+  // percentage is an error.
+  rootMargin: "0px",
+  // Threshold(s) at which to trigger callback, specified as a ratio, or list of
+  // ratios, of (visible area / total area) of the observed element (hence all
+  // entries must be in the range [0, 1]).  Callback will be invoked when the
+  // visible ratio of the observed element crosses a threshold in the list.
+  threshold: [0],
+});
+```
+
+### `<iframe>` magic
+
+`IntersectionObserver`s were designed specifically with ads services and social network widgets in mind, which frequently use `<iframe>` elements and could benefit from knowing whether they are in view. If an `<iframe>` observes one of its elements, both scrolling the `<iframe>` as well as scrolling the window *containing the `<iframe>`* will trigger the callback at the appropriate times. For the latter case, however, `rootBounds` will be set to `null` to avoid leaking data across origins.
+
+## What is `IntersectionObserver` *Not* about?
+
+Something to keep in mind is that `IntersectionObserver` is intentionally neither pixel perfect nor low latency. Using them to implement endeavours like scroll-dependent animations are bound to fail, as the data will be&mdash;strictly speaking&mdash;out of date by the time you'll get to use it. The [explainer](https://github.com/WICG/IntersectionObserver/blob/gh-pages/explainer.md) has more details about the original use cases for `IntersectionObserver`.
+
+### How much work can I do in the callback?
+
+Short 'n Sweet: Spending too much time in the callback will make your app lag&mdash;all the common practices apply.
+
+### Go forth and intersect thy elements
+
+The browser support for `IntersectionObserver` is good, [as it is available in all modern browsers](https://caniuse.com/intersectionobserver). If necessary, a polyfill can be used in older browsers and is available in [WICG's repository](https://github.com/WICG/IntersectionObserver). Obviously, you won't get the performance benefits using that polyfill that a native implementation would give you.
+
+You can start using `IntersectionObserver` right now! Tell us what you came up with.
diff --git a/src/site/content/en/blog/intro-to-security-terminology/index.md b/src/site/content/en/blog/intro-to-security-terminology/index.md
new file mode 100644
index 00000000000..e7729a6037e
--- /dev/null
+++ b/src/site/content/en/blog/intro-to-security-terminology/index.md
@@ -0,0 +1,65 @@
+---
+title: Important Security Terminology
+subhead: Two of the hurdles developers face when migrating to HTTPS are concepts and terminology. This guide provides a brief overview of both.
+date: 2015-03-27
+updated: 2018-09-20
+authors:
+  - chrispalmer
+  - mattgaunt
+description: Two of the hurdles developers face when migrating to HTTPS are concepts and terminology. This guide provides a brief overview of both.
+tags:
+  - blog
+---
+
+## Summary
+
+* Used public/private keys to sign and decrypt messages between the browser and the server.
+* A certificate authority (CA) is an organization that vouches for the mapping between the public keys and public DNS names (such as "www.foobar.com").
+* A certificate signing request (CSR) is a data format that bundles a public key together with some metadata about the entity that owns the key
+
+## What are the public and private key pairs?
+
+A **public/private key pair** is a pair of very large numbers that are used
+as encryption and decryption keys, and that share a special mathematical
+relationship. A common system for key pairs is the **[RSA
+cryptosystem](https://en.wikipedia.org/wiki/RSA_(cryptosystem))**. The **public
+key** is used to encrypt messages, and the messages can only be feasibly
+decrypted with the corresponding **private key**. Your web server advertises
+its public key to the world, and clients (such as web browsers) use that to
+bootstrap a secure channel to your server.
+
+## What is a certificate authority?
+
+A **certification authority (CA)** is an organization that vouches for the
+mapping between public keys and public DNS names (such as "www.foobar.com").
+For example, how is a client to know if a particular public key is the _true_
+public key for www.foobar.com? A priori, there is no way to know. A CA vouches
+for a particular key as being the true one for a particular site by using its
+own private key to **[cryptographically
+sign](https://en.wikipedia.org/wiki/RSA_(cryptosystem)#Signing_messages)** the
+website's public key. This signature is computationally infeasible to forge.
+Browsers (and other clients) maintain **trust anchor stores** containing the
+public keys owned by the well-known CAs, and they use those public keys to
+**cryptographically verify** the CA's signatures.
+
+An **X.509 certificate** is a data format that bundles a public key together
+with some metadata about the entity that owns the key. In the case of the web,
+the owner of the key is the site operator, and the important metadata is the DNS
+name of the web server. When a client connects to an HTTPS web server, the web
+server presents its certificate for the client to verify. The client verifies
+that the certificate has not expired, that the DNS name matches the name of the
+server the client is trying to connect to, and that a known trust anchor CA has
+signed the certificate. In most cases, CAs do not directly sign web server
+certificates; usually, there is a **chain of certificates** linking a trust
+anchor to an intermediate signer or signers, and finally to the web server's
+own certificate (the **end entity**).
+
+## What is a certificate signing request?
+
+A **certificate signing request (CSR)** is a data format which, like a
+certificate, bundles a public key together with some metadata about the entity
+that owns the key. However, clients do not interpret CSRs; CAs do. When you seek
+to have a CA vouch for your web server's public key, you send the CA a CSR. The
+CA validates the information in the CSR and uses it to generate a certificate.
+The CA then sends you the final certificate, and you install that certificate (or,
+more likely, a certificate chain) and your private key on your web server.
diff --git a/src/site/content/en/blog/introducing-baseline/index.md b/src/site/content/en/blog/introducing-baseline/index.md
new file mode 100644
index 00000000000..a4ffab6df3c
--- /dev/null
+++ b/src/site/content/en/blog/introducing-baseline/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: "Introducing Baseline"
+subhead: >
+  At Google I/O 2023 we announced Baseline, learn more about this initiative and why we think it's important.
+description: >
+  At Google I/O 2023 we announced Baseline, learn more about this initiative and why we think it's important.
+date: 2023-05-10
+hero: 'image/kheDArv5csY6rvQUJDbWRscckLr1/Gv27TPZQF9EPSZIDmpHZ.png'
+alt: The Baseline supported icon and the wordmark.
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/j1MZvXQ8fY232Q1z5El0.png
+authors:
+  - rachelandrew
+tags:
+  - blog
+---
+
+Baseline helps you to see, at a glance, whether a feature or API is safe to use in your site or web applications. In this post, learn about the ideas that led to this concept, and how we hope it will help you.
+
+{% YouTube "eZa3BgGaAeA" %}
+
+## Keeping up with changes to the web platform
+
+The web of today changes rapidly. Our browsers are _evergreen_, with new features landing in stable browsers each month. This is exciting, however it also poses problems. How do web developers keep up with all of this change? How do you know when it's safe to use a feature? When is it the right time to start to learn, and to invest in new features? 
+
+In the past, we often explained browser support to stakeholders by tying it to a certain browser release (for example, Internet Explorer 11) because the line in the sand a non-evergreen browser created was clear to everyone. Today, the landscape can often seem less clear, with so many features landing it's a lot of work to check support for everything we use.
+
+We know how much of a problem this is to developers, because you have consistently [told us that it's a problem](/deep-dive-into-developer-pain-points/). Over two years ago we decided it was a problem we wanted to try to address.
+
+## Getting our own house in order
+
+We recognized that we were adding to confusion about the status of features, mixing experimental things in with stable content on our sites. So, we've improved the clarity of our own communication channels. We now use web.dev to publish content about the stable web, those things that we can now describe as part of Baseline, and those that are very close to that status. We also highlight the work of other browsers, as we all work together to improve the interoperability of the platform.
+
+On web.dev you'll find content such as the [newly interoperable](/tags/newly-interoperable/) series, celebrating features that are now supported in all three major engines. We also have our monthly series, covering [what's new to the web platform](/tags/new-to-the-web/) sharing the work of all browsers, and updates about Interop 2023. This site is also home to our best practices guidance in subjects such as performance, accessibility, and fundamental web development skills. 
+
+On [developer.chrome.com](https://developer.chrome.com) you can learn about the new things that Chrome is bringing to the web platform. Some of these things are experimental, or only in Chrome right now. Many of the things we post about on developer.chrome.com are coming to other browsers, and we hope to celebrate their interoperable moments very soon, but we want you to have clarity about their status and browser support.
+
+We have also been adding clear browser support information to everything that we publish, and when our team talks about features at conferences.
+
+Documentation is really important for adoption of new features, and this year we've made sure that the new features we are landing in Chrome have documentation over on MDN. For example, take a look at the documentation for [View Transitions](https://developer.mozilla.org/docs/Web/API/View_Transitions_API) and [WebGPU](https://developer.mozilla.org/docs/Web/API/WebGPU_API). We also help support [Open Web Docs](https://openwebdocs.org/) who contribute documentation for the entire web platform to MDN. 
+
+## Working with others
+
+Improving what we do was important, however to address the bigger issue we needed to work with others. We've been successfully working with our partners at other browser vendors and related companies through [Interop 2022](/interop-2022-wrapup/) and [2023](/interop-2023/). Forming the [WebDX Community Group](https://www.w3.org/community/webdx/) brought everyone together to think about this issue of clarity across the platform as a whole.
+
+The group is working together on a [feature set](https://github.com/web-platform-dx/feature-set), a way to group web platform features to show their support status, and this feature-set is key to the concept of Baseline. 
+
+## Creating platform-wide clarity with Baseline
+
+[Baseline](/baseline) is the line in the sand that is hard to identify in a world of evergreen browsers. Everything that is fully supported in the most recent two versions of major browsers will be part of Baseline. Therefore if your library states that all features used are part of Baseline, developers know what you mean. When creating a proposal for a new application, you can explain to stakeholders that browser support will be tied to Baseline, thus creating clarity for everyone as to levels of support. 
+
+From today you will start to see Baseline appearing on pages [on MDN](https://developer.mozilla.org/docs/Web/CSS/grid), and on [web.dev](/baseline-features/).
+
+As Baseline will be a continuously moving line, with new features becoming part of that set each month, every year we will publish a cut of features that are part of Baseline at one moment in time. For extra clarity, you can tie support to Baseline 24, for example.
+
+{% Aside %}
+We're also quite excited by the ability to compare year-on-year what Baseline looks like. What will have changed between Baseline 24 and Baseline 25? That will be interesting to see.
+{% endAside %}
+
+## What's next?
+
+We'll be continuing the rollout of Baseline across web.dev. When reading an article or tutorial, you'll be able to see when the features described are part of Baseline. You won't get part of the way through something and realize it uses something that doesn't have good browser support.
+
+We'll be providing widgets that you can use on your own articles or libraries, indicating support for the Baseline feature set.
+
+We'll also be working to ensure that new features we are landing in Chrome become part of Baseline as quickly as possible. Watch out for future posts where we'll talk more about that work.
+
+And we'll be gathering feedback from developers to find out how this idea is working in practice, and what more you would like to see. Keep an eye on the [Baseline page](/baseline/), or offer feedback right now via the [WebDX Community Group](https://www.w3.org/community/webdx/).
diff --git a/src/site/content/en/blog/introducing-learn-accessibility/index.md b/src/site/content/en/blog/introducing-learn-accessibility/index.md
new file mode 100644
index 00000000000..356282971fb
--- /dev/null
+++ b/src/site/content/en/blog/introducing-learn-accessibility/index.md
@@ -0,0 +1,46 @@
+---
+layout: post
+title: 'Introducing Learn Accessibility'
+authors: 
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/47JeuiQdxypVbW87NnSB.svg
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/03dCg7PsCbcwblqRHYMB.png
+alt: 'Learn Accessibility'
+subhead: >
+  Today we are launching Learn Accessibility—the next in our series to help get you up to speed with modern web development.
+description: >
+  Today we are launching Learn Accessibility—the next in our series to help get you up to speed with modern web development.
+date: 2022-09-30
+tags:
+  - accessibility
+  - blog
+---
+
+Today we are excited to announce a new addition to our series of courses on
+web.dev. [Learn Accessibility](/learn/accessibility/) is a brand new course
+written by [Carie Fisher](https://twitter.com/cariefisher) that will take you
+through the essentials for building accessible websites and web apps.
+
+Seven modules are launching today, and the rest will follow in staged launches
+through the end of 2022. 
+
+Read them in whatever order you'd like, and we hope you'll discover some new
+best practices. Even with our accessibility experts, we're constantly learning
+about new tools and new techniques to make our sites the best they can be. Some
+accessibility best practices differ, based on the disability you're addressing.
+It's important to understand your users and to listen to people with
+disabilities when they tell you what they need.
+
+Learn Accessibility joins our existing courses:
+
+* [Learn HTML](/learn/html/)
+* [Learn CSS](/learn/css/)
+* [Learn Responsive Design](/learn/design/)
+* [Learn Forms](/learn/forms/)
+* [Learn PWA](/learn/pwa/)
+
+We are open to your feedback. [Open a GitHub issue](https://github.com/GoogleChrome/web.dev/issues/new/choose)
+and give as much information as you can so we can address your questions or
+concerns.
+
+Coming up, we'll also have a series of interviews with various people working in accessibility. Follow this space to read their insights.
diff --git a/src/site/content/en/blog/introducing-learn-html/index.md b/src/site/content/en/blog/introducing-learn-html/index.md
new file mode 100644
index 00000000000..697d2d21fe2
--- /dev/null
+++ b/src/site/content/en/blog/introducing-learn-html/index.md
@@ -0,0 +1,30 @@
+---
+layout: post
+title: 'Introducing Learn HTML'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/8VqPyKxeGQWSe5tljiQz.svg
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/YDxKJ14tckrLzMXYZquR.png
+alt: 'Learn HTML'
+subhead: >
+  Today we are launching Learn HTML—the next course in our series to help get you up to speed with modern web development.
+description: >
+  Today we are launching Learn HTML—the next course in our series to help get you up to speed with modern web development.
+date: 2022-09-27
+tags:
+  - html
+  - blog
+---
+
+Today we are excited to announce the latest in our series of courses on web.dev. [Learn HTML](/learn/html/) is a brand new course written by [Estelle Weyl](https://twitter.com/estellevw) that will take you through all you need to know about HTML today.
+
+We're landing the first five modules today, the rest will follow in staged launches over the next couple of months. You can work through these modules beginning to end, or dip into those that interest you. Even if you have been working on the web for years, you'll discover things you didn't know. HTML is a Living Standard, constantly evolving to meet the needs of the web, so it's worth revisiting it from time to time.
+
+Learn HTML joins our existing courses:
+
+- [Learn CSS](/learn/css/)
+- [Learn Responsive Design](/learn/design/)
+- [Learn Forms](/learn/forms/)
+- [Learn PWA](/learn/pwa/)
+
+Watch this space for more opportunities to learn key web development skills, coming up very soon!
diff --git a/src/site/content/en/blog/introducing-learn-privacy/index.md b/src/site/content/en/blog/introducing-learn-privacy/index.md
new file mode 100644
index 00000000000..daac7cf66d1
--- /dev/null
+++ b/src/site/content/en/blog/introducing-learn-privacy/index.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: 'Introducing Learn Privacy'
+authors: 
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/aeV3mWzxqNWAFYeeW4p8.svg
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/E10gLEyQQ7GKqaJwUJn4.png
+alt: 'Learn Privacy'
+subhead: >
+  Today we are launching Learn Privacy—the next course in our series to help get you up to speed with modern web development.
+description: >
+  Today we are launching Learn Privacy—the next course in our series to help get you up to speed with modern web development.
+date: 2023-02-22
+tags:
+  - blog
+---
+
+Today we are excited to announce the latest in our series of courses on web.dev. [Learn Privacy](/learn/privacy/) is a brand new course written by [Stuart Langridge](https://twitter.com/sil).
+
+When you acquire a new user, you are granted their trust. It's your organization's responsibility to honor this trust by keeping
+user data private. And, as a developer, you have a key role to play. This course will help you to understand the ways in which you can help to protect the privacy of your users, with code snippets, best practices, and questions to ask yourself and your team on your privacy journey.
+
+Learn Privacy joins our existing courses:
+
+- [Learn CSS](/learn/css/)
+- [Learn HTML](/learn/html/)
+- [Learn Accessibility](/learn/accessibility)
+- [Learn Images](/learn/images/)
+- [Learn Responsive Design](/learn/design/)
+- [Learn Forms](/learn/forms/)
+- [Learn PWA](/learn/pwa/)
+
+
+Watch this space for more opportunities to learn key web development skills, coming up very soon!
diff --git a/src/site/content/en/blog/introducing-libsquoosh/index.md b/src/site/content/en/blog/introducing-libsquoosh/index.md
new file mode 100644
index 00000000000..aa8ede5283f
--- /dev/null
+++ b/src/site/content/en/blog/introducing-libsquoosh/index.md
@@ -0,0 +1,77 @@
+---
+title: Introducing libSquoosh
+subhead: It's Squoosh, but as a Node library.
+description: |
+  It's Squoosh, but as a Node library.
+date: 2021-06-08
+authors:
+  - surma
+hero: image/i9nJGvw3SnTPH63zKOYWtI6cP5m2/zTPjhYuOfh8bnk7c7tlO.png
+thumbnail: image/i9nJGvw3SnTPH63zKOYWtI6cP5m2/zTPjhYuOfh8bnk7c7tlO.png
+alt: $ npm install --save @squoosh/lib
+tags:
+  - blog
+  - tools
+  - javascript
+  - images
+---
+
+**We are happy to introduce [libSquoosh], an experimental Node library on top of which the Squoosh CLI is built, giving you all the capabilities for the Squoosh CLI with a JavaScript-idiomatic interface.**
+
+Squoosh.app is a PWA that compresses images for you in the browser. It supports many old and new image formats and processes them client-side in the browser through WebAssembly. This means your pictures stay safely on your own computer rather than being sent to a server somewhere, and that Squoosh works even when offline.
+
+At Chrome DevSummit 2020 [we announced Squoosh v2][squoosh v2 announcement], together with the Squoosh CLI to bring all the codecs of Squoosh to the command-line using Node and WebAssembly. This allows you to compress entire folders with one command and make use of the [CLI's][experimental auto-optimizer] to let it choose the codec parameters for you.
+
+The CLI enables a lot of automation and so it's only natural that developers began asking for a more idiomatic interface than programmatically invoking the Squoosh CLI via the shell. [Anton (@atjn on GitHub)][atjn] stepped up to the task and separated the Squoosh CLI code into two parts: The command line interface code and the underlying core functionality.
+
+```js
+import { ImagePool } from "@squoosh/lib";
+
+// libSquoosh uses a worker-pool under the hood
+// to parallelize all image processing.
+const imagePool = new ImagePool();
+
+// Accepts both file paths and Buffers/TypedArrays.
+const image = imagePool.ingestImage("./squoosh.jpeg");
+
+// Optional.
+// await image.preprocess({
+//   resize: {
+//     enabled: true,
+//     width: 128,
+//   },
+// });
+
+await image.encode({
+  // All codecs are initialized with default values
+  // that can be individually overwritten.
+  mozjpeg: {
+    quality: 10,
+  },
+  avif: {
+    cqLevel: 10,
+  },
+  jxl: {},
+});
+
+const { extension, binary } = await image.encodedWith.mozjpeg;
+await fs.writeFile(`output.${extension}`, binary);
+// ... same for other encoders ...
+
+await imagePool.close();
+```
+
+Our goal is to make image compression more accessible to tooling authors. We hope to see integration into Webpack, Rollup and other build tools to make sure your images are appropriately optimized for the web.
+
+I'd like to express a huge "thank you" to Anton for the time he has committed to Squoosh! 
+
+It's still early for the Squoosh CLI and libSquoosh and we have many more ideas and plans that we'd like to implement. In the meanwhile, try libSquoosh! However, be mindful that this is an early, experimental release and that there is a good chance you will run into some bugs. If you find some or have questions, please open an [issue][new issue]. 
+
+If you are interested in contributing to Squoosh—for example contributing to the extremely sparse documentation around libSquoosh or help with any of the other parts of the app—we are starting a mentorship program to help you get started. If you want to know more, check out our [tracking issue][mentorship issue].
+
+[libsquoosh]: https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh
+[squoosh v2 announcement]: https://web.dev/squoosh-v2/
+[experimental auto-optimizer]: https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli#auto-optimizer
+[atjn]: https://github.com/atjn
+[new issue]: https://github.com/GoogleChromeLabs/squoosh/issues/new/choose
+[mentorship issue]: https://github.com/GoogleChromeLabs/squoosh/issues/1020
diff --git a/src/site/content/en/blog/introducing-model-viewer/index.md b/src/site/content/en/blog/introducing-model-viewer/index.md
new file mode 100644
index 00000000000..eb7f41a0866
--- /dev/null
+++ b/src/site/content/en/blog/introducing-model-viewer/index.md
@@ -0,0 +1,180 @@
+---
+layout: post
+title: 'Introducing <model-viewer> 1.1'
+subhead: 3D models for your web page as easily as writing HTML.
+authors:
+  - rkochman
+  - joemedley
+description: |
+  3D models are more relevant than ever. Retailers bring in-store shopping
+  experiences to customers' homes. Museums let anyone see artifacts from anywhere.
+  3D is difficult to do without a deep knowledge of 3D technologies or third-party
+  hosting. <model-viewer> 1.1 makes these tasks as easy as writing HTML.
+date: 2020-09-03
+updated: 2020-09-03
+hero: image/admin/shbwwMBKANGHEy6TtBV7.jpg
+alt: A 3D image of a shark.
+tags:
+  - blog
+  - 3d
+  # - model-viewer
+  - augmented-reality
+  - virtual-reality
+  - webxr
+feedback:
+  - api
+---
+
+3D models are more relevant than ever. Retailers bring in-store shopping
+experiences to customers' homes. Museums are making 3D models of their artifacts
+available to everyone on the web. Unfortunately, it can be difficult to add a 3D
+model to a website in a way that provides a great user experience without a deep
+knowledge of 3D technologies or resorting to hosting 3D content on a third-party
+site. The `<model-viewer>` web component, [introduced in early
+2019](/model-viewer), seeks to make putting 3D models on the web as easy as
+writing a few lines of HTML. Since then, the team has been working to address
+feedback and requests from the community. The culmination of that work was
+`<model-viewer>` version 1.0, released earlier this year. We're now announcing
+the release of `<model-viewer>` 1.1. You can [read the release
+notes](https://github.com/google/model-viewer/releases/tag/v1.1.0) in GitHub.
+
+## What's new since last year?
+
+Version 1.1 includes built-in support for augmented reality (AR) on the web,
+improvements to speed and fidelity, and other frequently-requested features.
+
+### Augmented reality
+
+Viewing a 3D model on a blank canvas is great, but being able to view it in your
+space is even better. For an entirely-within-the-browser 3D and AR Chrome
+Android supports [augmented
+reality](https://modelviewer.dev/examples/augmented-reality.html) using WebXR .
+
+<figure>
+  <video controls muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/introducing-model-viewer/modelviewer1-0.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/introducing-model-viewer/modelviewer1-0.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    A demonstration of the <code>&lt;model-viewer></code> AR capability.
+  </figcaption>
+</figure>
+
+When it's ready, you'll be able to use it by add an `ar` attribute to the
+`<model-viewer>` tag. Other attributes allow you to customize the WebXR AR
+experience, as shown in [the WebXR sample on
+modelviewer.dev](https://modelviewer.dev/examples/webxr.html). The code sample
+below shows what this might look like.
+
+```html
+<model-viewer src="Chair.glb"
+  ar ar-scale="auto"
+  camera-controls
+  alt="A 3D model of an office chair.">
+</model-viewer>
+```
+
+<!-- Hide until model-viewer's iframe bug is fixed -->
+<!-- <iframe style="width:100%; height: 100%;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" src="https://modelviewer.dev/examples/webxr.html" frameborder="0" allowfullscreen></iframe> -->
+
+It looks something like the embedded video shown under this heading.
+
+### Camera controls
+
+`<model-viewer>` now gives full control over the view's virtual camera (the
+perspective of the viewer). This includes the camera target, orbit (position
+relative to the model), and field of view. You can also enable auto-rotation and
+set limits on user interaction (e.g. maximum and minimum fields of view).
+
+### Annotations
+
+You can also annotate your models using HTML and CSS. This capability is often
+used to "attach" labels to parts of the model in a way that moves with the model
+as it's manipulated. The annotations are customizable, including their
+appearance and the extent to which they're hidden by
+the model. Annotations also work in AR.
+
+```html
+<style>
+  button{
+    display: block;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+    border: 3px solid blue;
+    background-color: blue;
+    box-sizing: border-box;
+  }
+
+  #annotation{
+    background-color: #dddddd;
+    position: absolute;
+    transform: translate(10px, 10px);
+    border-radius: 10px;
+    padding: 10px;
+  }
+</style>
+<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
+  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
+    <div id="annotation">Whistle</div>
+  </button>
+</model-viewer>
+```
+
+<!-- Hide until model-viewer's iframe bug is fixed -->
+<!-- <iframe style="width:100%; height: 100%;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" src="https://modelviewer.dev/webdotdev/annotations.html" frameborder="0" allowfullscreen></iframe> -->
+
+<figure data-float="right">
+  {% Img src="image/admin/CG1JQXZP9Gncr7qLz5JZ.png", alt="A space suit with an annotation.", width="800", height="839" %}
+  <figcaption>A space suit with an annotation.</figcaption>
+</figure>
+
+See the [annotations documentation
+page](https://modelviewer.dev/examples/annotations.html) for more information.
+
+### Editor
+
+Version 1.1 introduces and hosts a `<model-viewer>` ["editing"
+tool](https://modelviewer.dev/editor/), which enables you to
+quickly preview your model, try out different `<model-viewer>` configurations
+(e.g. exposure and shadow softness), generate a poster image, and interactively
+get coordinates for annotations.
+
+### Rendering and performance improvements
+
+Rendering fidelity is greatly improved, especially for high dynamic range (HDR)
+environments. `<model-viewer>` now also uses a direct render path when only one
+`<model-viewer>` element is in the viewport, which increases performance
+(especially on Firefox). Lastly, dynamically scaling the render resolution
+improved frame rate dramatically. The example below shows off some of these
+recent improvements.
+
+```html
+<model-viewer camera-controls
+              skybox-image="spruit_sunrise_1k_HDR.hdr"
+              alt="A 3D model of a well-worn  helmet"
+              src="DamagedHelmet.glb"></model-viewer>
+```
+
+<!-- Hide until model-viewer's iframe bug is fixed -->
+<!-- <iframe style="width:100%; height: 100%;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" src="https://modelviewer.dev/webdotdev/rendering.html" frameborder="0" allowfullscreen></iframe> -->
+
+<figure data-float="right">
+  {% Img src="image/admin/ZAID4J5TsJTcJs3qPNTp.png", alt="A 3D model of a well-worn  helmet.", width="800", height="809" %}
+  <figcaption>A 3D model of a well-worn  helmet.</figcaption>
+</figure>
+
+### Stability
+
+With `<model-viewer>` reaching its first major version, API stability is a
+priority, so breaking changes will be avoided until version 2.0 is released.
+
+## What's next?
+
+`<model-viewer>` version 1.0 includes the most-requested capabilities, but the
+team is not done yet. More features will be added, as will improvements in
+performance, stability, documentation, and tooling. If you have suggestions,
+file an [issue in GitHub](https://github.com/google/model-viewer/issues); also,
+PRs are always welcome. You can stay connected by following [`<model-viewer>` on
+Twitter](https://twitter.com/modelviewer) and checking out the [community chat
+on Spectrum](https://spectrum.chat/model-viewer?tab=posts).
diff --git a/src/site/content/en/blog/introducing-tooling-report/hero.jpg b/src/site/content/en/blog/introducing-tooling-report/hero.jpg
deleted file mode 100644
index 0d0b873de0c..00000000000
Binary files a/src/site/content/en/blog/introducing-tooling-report/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/introducing-tooling-report/index.md b/src/site/content/en/blog/introducing-tooling-report/index.md
index d8f8a50e0e9..6b52c8d6f17 100644
--- a/src/site/content/en/blog/introducing-tooling-report/index.md
+++ b/src/site/content/en/blog/introducing-tooling-report/index.md
@@ -5,7 +5,8 @@ description: |
   Select and configure build tools based on best practices.
 scheduled: true
 date: 2020-06-29
-hero: hero.jpg
+updated: 2020-08-20
+hero: image/admin/y3f0yAb97pLOpTQrhUNA.jpg
 alt: A grid of cards showing test names and test results from across tooling.report.
 tags:
   - blog
@@ -15,17 +16,19 @@ tags:
   - html
 ---
 
+{% YouTube 'vsMJiNtQWvw' %}
+
 Today web.dev is launching a new initiative called [tooling.report](https://tooling.report). It's a
 website that gives web developers an overview of the features supported across a selection of
 popular build tools. We built this site to help you choose the right build tool for your next
 project, decide if migrating from one tool to another is worth it, or figure out how to incorporate
-best practises into your tooling configuration and code base. Tools have different focus areas and
+best practices into your tooling configuration and code base. Tools have different focus areas and
 cater to a different set of needs, which means selecting and configuring tools involves making
 tradeoffs. With tooling.report, we aim to explain these tradeoffs and document how to follow best
-practices with any given build tool.   
-  
+practices with any given build tool.
+
 Sounds exciting? Visit tooling.report to start exploring, or read on to learn more about why and how
-we developed this site. 
+we developed this site.
 
 ## Build tools often get in our way
 
@@ -43,7 +46,7 @@ fine-tuning how our frontend assets are assembled and delivered. For example, if
 script and web worker script have shared dependencies, we would like to download the dependencies
 once instead of bundling it twice for each script. Some tools support this out of the box, some need
 significant customization effort to change default behaviors, and for others it's outright
-impossible. 
+impossible.
 
 This experience led us to investigate what different build tools can and cannot do. Our hope was to
 create a checklist for features so that next time we start a new project, we can evaluate and choose
@@ -57,7 +60,7 @@ cases.
 Our team discussed and designed test criteria that we believe represent best practices for web
 development. We specifically focused on how to deliver fast, responsive, and smooth user
 experiences, intentionally excluding tests related to developer experience in order to avoid
-measuring two incomparable outcomes. 
+measuring two incomparable outcomes.
 
 Once the test list was created, we went ahead and wrote a build script for each tool to check if the
 tool can fulfil the test's success criteria. As an initial set, we decided to investigate webpack
@@ -66,10 +69,8 @@ still use this setup. For a test to pass, only publicly documented features of t
 for the tool can be used. After the initial set of tests were written, we worked with the build tool
 authors to make sure we used their tools correctly and represented them fairly.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="overview.jpg" 
-       alt="A screenshot of tooling.report.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0OauqO2tSeOTDpDGutmk.jpg", alt="A screenshot of tooling.report.", width="800", height="394" %}
 </figure>
 
 ## We only use ${tool_name}, should I still care?
@@ -86,9 +87,9 @@ contains the configuration files necessary to do so.
 If you think a certain feature should be tested that is currently missing, please [propose it in a
 GitHub issue](https://github.com/GoogleChromeLabs/tooling.report/issues/new) to start the
 discussion. We aim to encapsulate real-world use cases, and any additional tests that better assess
-these outcomes are welcome.   
-  
+these outcomes are welcome.
+
 If you want to write tests for tools we did not include in the initial set, we welcome that too!
 Please see
 [CONTRIBUTING.md](https://github.com/GoogleChromeLabs/tooling.report/blob/dev/CONTRIBUTING.md) for
-more information. 
+more information.
diff --git a/src/site/content/en/blog/introducing-tooling-report/overview.jpg b/src/site/content/en/blog/introducing-tooling-report/overview.jpg
deleted file mode 100644
index 1236804df23..00000000000
Binary files a/src/site/content/en/blog/introducing-tooling-report/overview.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/introduction-to-fetch/index.md b/src/site/content/en/blog/introduction-to-fetch/index.md
new file mode 100644
index 00000000000..1ee2a862bdb
--- /dev/null
+++ b/src/site/content/en/blog/introduction-to-fetch/index.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: Introduction to fetch()
+subhead: The fetch() API is landing in the window object and is looking to replace XHRs
+authors:
+  - mattgaunt
+description: |
+  The fetch() API is landing in the window object and is looking to replace XHRs
+date: 2015-03-10
+updated: 2019-03-16
+tags:
+  - blog
+
+---
+
+*So long XMLHttpRequest*
+
+`fetch()` allows you to make network requests similar to XMLHttpRequest
+(XHR). The main difference is that the Fetch API uses Promises, which enables a
+simpler and cleaner API, avoiding callback hell and having to remember the complex API of
+XMLHttpRequest.
+
+{% BrowserCompat 'api.fetch' %}
+
+The [Fetch API](https://fetch.spec.whatwg.org/) has been available in the
+[Service Worker](https://w3c.github.io/ServiceWorker/) global
+scope since Chrome 40, but it'll be enabled in the window scope in Chrome 42.
+There is also a rather fetching [polyfill by GitHub](https://github.com/github/fetch) that you can use today.
+
+If you've never used
+[Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+before, check out [Introduction to JavaScript Promises](/promises/).
+
+## Basic Fetch Request
+
+Let's start by comparing a simple example implemented with an `XMLHttpRequest`
+and then with `fetch`. We just want to request a URL, get a response and parse
+it as JSON.
+
+### XMLHttpRequest
+
+An `XMLHttpRequest` would need two listeners to be set to handle the success
+and error cases and a call to `open()` and `send()`. _[Example from MDN docs](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)_.
+
+
+```js
+function reqListener() {
+    var data = JSON.parse(this.responseText);
+    console.log(data);
+}
+
+function reqError(err) {
+    console.log('Fetch Error :-S', err);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.onerror = reqError;
+oReq.open('get', './api/some.json', true);
+oReq.send();
+```
+
+### Fetch
+
+Our fetch request looks a little like this:
+
+```js
+fetch('./api/some.json')
+    .then(
+    function(response) {
+        if (response.status !== 200) {
+        console.log('Looks like there was a problem. Status Code: ' +
+            response.status);
+        return;
+        }
+
+        // Examine the text in the response
+        response.json().then(function(data) {
+        console.log(data);
+        });
+    }
+    )
+    .catch(function(err) {
+    console.log('Fetch Error :-S', err);
+    });
+```
+
+
+We start by checking that the response status is 200 before parsing the response
+as JSON.
+
+The response of a `fetch()` request is a
+[Stream](https://streams.spec.whatwg.org/)
+object, which means that when we call the `json()` method, a Promise is returned
+since the reading of the stream will happen asynchronously.
+
+## Response Metadata
+
+In the previous example we looked at the status of the
+[Response](https://fetch.spec.whatwg.org/#responses) object as well as how to
+parse the response as JSON. Other metadata we may want to access, like headers,
+are illustrated below.
+
+```js
+fetch('users.json').then(function(response) {
+    console.log(response.headers.get('Content-Type'));
+    console.log(response.headers.get('Date'));
+
+    console.log(response.status);
+    console.log(response.statusText);
+    console.log(response.type);
+    console.log(response.url);
+});
+```
+
+
+## Response Types
+
+When we make a fetch request, the response will be given a `response.type`
+of "[`basic`](https://fetch.spec.whatwg.org/#concept-filtered-response-basic)",
+"[`cors`](https://fetch.spec.whatwg.org/#concept-filtered-response-cors)" or
+"[`opaque`](https://fetch.spec.whatwg.org/#concept-filtered-response-opaque)".
+These `types` indicate where the resource has come from and can be used to
+inform how you should treat the response object.
+
+When a request is made for a resource on the same origin, the response will have
+a `basic` type and there aren't any restrictions on what you can view from the
+response.
+
+If a request is made for a resource on another origin which returns [the CORs headers](https://enable-cors.org/), then the type is `cors`. `cors` and `basic`
+responses are almost identical except that a `cors` response restricts the
+headers you can view to `Cache-Control`, `Content-Language`,
+`Content-Type`, `Expires`, `Last-Modified`, and `Pragma`.
+
+An `opaque` response is for a request made for a resource on a different origin
+that doesn't return CORS headers. With an opaque response we won't be able to
+read the data returned or view the status of the request, meaning we can't check
+if the request was successful or not.
+
+You can define a mode for a fetch request such that only certain requests will
+resolve. The modes you can set are as follows:
+
+* `same-origin` only succeeds for requests for assets on the same origin, all
+  other requests will reject.
+* `cors` will allow requests for assets on the same-origin and other origins which return the
+  appropriate CORs headers.
+* `cors-with-forced-preflight` will always perform a [preflight
+  check](https://developer.mozilla.org/docs/Web/HTTP/CORS#Preflighted_requests) before making the actual request.
+* `no-cors` is intended to make requests to other origins that do not have CORS
+  headers and result in an `opaque` response, but as stated, this isn't
+  possible in the window global scope at the moment.
+
+To define the mode, add an options object as the second parameter in the
+`fetch` request and define the mode in that object:
+
+
+```js
+fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
+    .then(function(response) {
+    return response.text();
+    })
+    .then(function(text) {
+    console.log('Request successful', text);
+    })
+    .catch(function(error) {
+    log('Request failed', error)
+    });
+```
+
+
+## Chaining Promises
+
+One of the great features of promises is the ability to chain them together. For
+fetch, this allows you to share logic across fetch requests.
+
+If you are working with a JSON API, you'll need to check the status and parse the JSON
+for each response. You can simplify your code by defining the status and JSON
+parsing in separate functions which return promises, freeing you to only worry
+about handling the final data and the error case.
+
+
+```js
+function status(response) {
+    if (response.status >= 200 && response.status < 300) {
+    return Promise.resolve(response)
+    } else {
+    return Promise.reject(new Error(response.statusText))
+    }
+}
+
+function json(response) {
+    return response.json()
+}
+
+fetch('users.json')
+    .then(status)
+    .then(json)
+    .then(function(data) {
+    console.log('Request succeeded with JSON response', data);
+    }).catch(function(error) {
+    console.log('Request failed', error);
+    });
+```
+
+We define the `status` function which checks the **response.status** and
+returns the result of
+[`Promise.resolve()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)
+or
+[`Promise.reject()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject),
+which return a resolved or rejected Promise. This is the first method
+called in our `fetch()` chain, if it resolves, we then call our `json()`
+method which again returns a Promise from the `response.json()` call. After
+this we have an object of the parsed JSON. If the parsing fails the Promise is
+rejected and the catch statement executes.
+
+The great thing with this is that you can share the logic across all of your
+fetch requests, making code easier to maintain, read and test.
+
+## POST Request
+
+It's not uncommon for web apps to want to call an API with a POST method and
+supply some parameters in the body of the request.
+
+To do this we can set the `method` and `body` parameters in the `fetch()`
+options.
+
+
+```js
+fetch(url, {
+    method: 'post',
+    headers: {
+        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+    },
+    body: 'foo=bar&lorem=ipsum'
+    })
+    .then(json)
+    .then(function (data) {
+    console.log('Request succeeded with JSON response', data);
+    })
+    .catch(function (error) {
+    console.log('Request failed', error);
+    });
+```
+
+
+## Sending Credentials with a Fetch Request
+
+Should you want to make a fetch request with credentials such as cookies, you
+should set the `credentials` of the request to `"include"`.
+
+
+```js
+fetch(url, {
+    credentials: 'include'
+})
+```
+
+## FAQ
+
+### How do I cancel a fetch() request?
+
+At the moment there is no way to cancel a fetch, but this is being
+[discussed on GitHub](https://github.com/whatwg/fetch/issues/20).
+H/T [@jaffathecake](https://twitter.com/jaffathecake) for this link.
+
+### Is there a polyfill?
+
+[GitHub has a polyfill for fetch](https://github.com/github/fetch).
+H/T [@Nexii](https://twitter.com/Nexii) for pointing this out.
+
+### Why is "no-cors" supported in service workers but not the window?
+
+This is due to a security concern, you can [learn more here](https://bugs.chromium.org/p/chromium/issues/detail?id=457157&q=fetch%20no-cors&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified).
diff --git a/src/site/content/en/blog/iowa2016/index.md b/src/site/content/en/blog/iowa2016/index.md
new file mode 100644
index 00000000000..5aad67c29ae
--- /dev/null
+++ b/src/site/content/en/blog/iowa2016/index.md
@@ -0,0 +1,510 @@
+---
+layout: post
+title: Building the Google I/O 2016 Progressive Web App
+description:  Building the Google I/O 2016 PWA using web components
+date: 2016-06-10
+updated: 2016-06-10
+authors:
+ - ericbidelman
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PH9aWtLr0RVrB4hwowlq.jpg", alt="Iowa home", width="500", height="983" %}
+</figure>
+
+### Summary
+
+Learn how we built a single page app using web components, Polymer, and material design and launched it into production on Google.com.
+
+### Results
+
+- More engagement than the native app (4:06 min mobile web vs. Android's 2:40 min).
+- 450ms faster first paint for return users thanks to service worker caching
+- 84% of visitors supported Service Worker
+- Add to homescreen saves were up +900% compared to 2015.
+- 3.8% users went offline but continued to generate 11k page views!
+- 50% of signed in users enabled notifications.
+- 536k notifications were sent to users (12% brought them back).
+- 99% of users' browsers supported the web components polyfills
+
+## Overview
+
+This year, I had the pleasure of [working on](https://events.google.com/io2016/humans.txt) the [Google I/O 2016 progressive web app](https://events.google.com/io2016/), affectionately named "IOWA". It's mobile first, works fully offline, and heavily inspired by [material design](https://www.google.com/design/spec/material-design/introduction.html).
+
+IOWA is a [single page application](https://en.wikipedia.org/wiki/Single-page_application) (SPA) that's built using [web components](http://webcomponents.org/), Polymer, and Firebase, and has an extensive backend
+written in App Engine (Go). It pre-caches content using a [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), dynamically loads new pages, gracefully transitions between views, and reuses content after first load.
+
+In this case study, I'll go through some of the more interesting architectural decisions that we made for
+the frontend. If you're interested in the source code, [check it out](https://github.com/GoogleChrome/ioweb2016) on Github.
+
+[View on Github](https://github.com/GoogleChrome/ioweb2016)
+
+## Building an SPA using web components
+
+### Every page as a component
+
+One of the core aspects about our frontend is that it's centered around web components. In fact, every page in our SPA is a web component:
+
+```html
+    <io-home-page date="2016-05-18T17:00:00Z" app="[[app]]"></io-home-page>
+    <io-schedule-page date="2016-05-18T17:00:00Z" app="{ % templatetag openvariable % }app}}"></io-schedule-page>
+    <io-attend-page></io-attend-page>
+    <io-extended-page></io-extended-page>
+    <io-faq-page></io-faq-page>
+```
+
+Why did we do this? The first reason is that this code is readable. As a first time reader, it's completely obvious what every page in our app is. The second reason is that web components have some nice properties for building an SPA. Lots of common frustrations (state management, view activation, style scoping) go away thanks to the inherent features of the `<template>` element, [Custom Elements](https://w3c.github.io/webcomponents/spec/custom/), and [Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/). These are developer tools being built into the browser. Why not take advantage of them?
+
+By creating a Custom Element for each page, we got a lot for free:
+
+- Page lifecycle management.
+- Scoped CSS/HTML particular to the page.
+- All the CSS/HTML/JS specific to a page is bundled and loaded together as needed.
+- Views are reusable. Since pages are DOM nodes, simply adding or removing them changes the view.
+- Future maintainers can understand our app simply by groking the markup.
+- Server-rendered markup can be progressively enhanced as element definitions are registered and upgraded by the browser.
+- Custom Elements have an inheritance model. DRY code is good code.
+- …lots more stuff.
+
+We took full advantage of these benefits in IOWA. Let's dive into some of the details.
+
+### Dynamically activating pages
+
+The [`<template>` element](https://www.html5rocks.com/tutorials/webcomponents/template/)
+is the browser's standard way to create reusable markup. `<template>` has two
+characteristics that SPAs can take advantage of. First, anything inside
+of the `<template>` is inert until an instance of the template is created. Second, the browser
+parses the markup but the contents aren't reachable from the main page. It's a true, reusable chunk of markup. For example:
+
+```html
+<template id="t">
+    <div>This markup is inert and not part of the main page's DOM.</div>
+    <img src="profile.png"> <!-- not loaded by the browser -->
+    <video id="vid" src="vid.mp4" autoplay></video> <!-- doesn't load/start -->
+    <script>alert("Not run until the template is stamped");</script>
+</template>
+```
+
+{% Aside %}
+`document.querySelector('#vid') === null` but `t.content.querySelector('#vid') !== null`.
+{% endAside %}
+
+Polymer [extends](https://www.polymer-project.org/1.0/docs/devguide/templates) the `<template>`'s with a few [type extension custom elements](http://www.html5rocks.com/tutorials/webcomponents/customelements/#typeextension),
+namely `<template is="dom-if">` and `<template is="dom-repeat">`. Both are custom
+elements that extend `<template>` with extra capabilities. And thanks to the
+declarative nature of web components, both do exactly what you'd expect.
+The first component stamps markup based on a conditional. The second repeats
+markup for every item in a list (data model).
+
+How is IOWA using these type extension elements?
+
+If you recall, every page in IOWA is a web component. However, **it would be silly to
+declare every component on first load**. That would mean creating an instance of every page when the app first loads. We didn't want to hurt our initial load performance, especially as some users will only navigate to 1 or 2 pages.
+
+Our solution was to cheat. In IOWA, we wrap each page's element in a `<template is="dom-if">`
+so that its contents don't load on first boot. Then we activate pages when the template's `name` attribute matches the URL. The [`<lazy-pages>`](https://github.com/GoogleChrome/ioweb2016/blob/master/app/elements/lazy-pages.html) web component handles all this logic for us. The markup looks something like this:
+
+```html
+<!-- Lazy pages manages the template stamping. It watches for route changes
+        and sets `template.if = true` on the appropriate template. -->
+<lazy-pages>
+    <template is="dom-if" name="home">
+    <io-home-page date="2016-05-18T17:00:00Z"></io-home-page>
+    </template>
+
+    <template is="dom-if" name="schedule">
+    <io-schedule-page date="2016-05-18T17:00:00Z"></io-schedule-page>
+    </template>
+
+    <template is="dom-if" name="attend">
+    <io-attend-page></io-attend-page>
+    </template>
+</lazy-pages>
+```
+
+What I like about this is that every page is parsed and ready to go when the page loads but its CSS/HTML/JS only get executed on-demand (when its parent `<template>` is stamped). Dynamic + lazy views using web components FTW.
+
+**Future improvements**
+
+When the page first loads, we're loading all the [HTML Imports](https://www.html5rocks.com/tutorials/webcomponents/imports/) for each page at once. An obvious improvement would be to lazy load the element definitions only when they're needed. Polymer also has a nice helper for async loading HTML Imports:
+
+```js
+Polymer.Base.importHref('io-home-page.html', (e) => { ... });
+```
+
+IOWA doesn't do this because a) we got lazy and b) it's unclear just how much performance boost we would have seen. Our first paint was already ~1s.
+
+### Page lifecycle management
+
+The Custom Elements API defines "[lifecycle callbacks](https://w3c.github.io/webcomponents/spec/custom/#concept-custom-element-definition-lifecycle-callbacks)" for managing the state of a
+component. When you implement these methods, you get free hooks into the life
+of a component:
+
+```js
+createdCallback() {
+    // automatically called when an instance of the element is created.
+}
+
+attachedCallback() {
+    // automatically called when the element is attached to the DOM.
+}
+
+detachedCallback() {
+    // automatically called when the element is removed from the DOM.
+}
+
+attributeChangedCallback() {
+    // automatically called when an HTML attribute changes.
+}
+```
+
+It was easy to leverage these callbacks in IOWA. Remember, every page is a self-contained DOM node. Navigating to a "new view" in our SPA is a matter of attaching one node to the DOM and removing another.
+
+We used the `attachedCallback` to perform setup work (init state, attach event listeners). When users navigate to a different page, the `detachedCallback` does cleanup (remove listeners, reset shared state). We also expanded the native lifecycle callbacks with several of our own:
+
+```js
+onPageTransitionDone() {
+    // page transition animations are complete.
+},
+
+onSubpageTransitionDone() {
+    // sub nav/tab page transitions are complete.
+}
+```
+
+These were useful additions for delaying work and minimizing the jank between page transitions. More on this later.
+
+### DRYing up common functionality across pages
+
+Inheritance is a powerful feature of Custom Elements. It provides a standard inheritance model
+for the web.
+
+Unfortunately, Polymer 1.0 has [yet to implement](https://github.com/Polymer/polymer/issues/3345) element inheritance
+at the time of writing. In the meantime, Polymer's [Behaviors](https://www.polymer-project.org/1.0/docs/devguide/behaviors) feature
+was just as useful. Behaviors are just mixins.
+
+Rather than creating the same API surface on all pages, it made sense to DRY-up
+the codebase by creating shared mixins. For example, `PageBehavior` defines common
+properties/methods that all pages in our app need:
+
+**PageBehavior.html**
+
+```js
+let PageBehavior = {
+
+    // Common properties all pages need.
+    properties: {
+    name: { type: String }, // Slug name of the page.
+    ...
+    },
+
+    attached() {
+    // If the page defines a `onPageTransitionDone`, call it when the router
+    // fires 'page-transition-done'.
+    if (this.onPageTransitionDone) {
+        this.listen(document.body, 'page-transition-done', 'onPageTransitionDone');
+    }
+
+    // Update page meta data when new page is navigated to.
+    document.body.id = `page-${this.name}`;
+    document.title = this.title || 'Google I/O 2016';
+
+    // Scroll to top of new page.
+    if (IOWA.Elements.Scroller) {
+        IOWA.Elements.Scroller.scrollTop = 0;
+    }
+
+    this.setupSubnavEffects();
+    },
+
+    detached() {
+    this.unlisten(document.body, 'page-transition-done', 'onPageTransitionDone');
+    this.teardownSubnavEffects();
+    }
+};
+
+IOWA.IOBehaviors = IOWA.IOBehaviors || {PageBehavior: PageBehavior};
+```
+
+{% Aside %}
+Polymer [shortens](https://www.polymer-project.org/1.0/docs/devguide/registering-elements#lifecycle-callbacks) the `attachedCallback` and `detachedCallback` lifecycle methods to `attached` and `detached`.
+{% endAside %}
+
+As you can see, `PageBehavior` performs common tasks that run when a new page
+is visited. Things like updating the `document.title`, resetting the scroll position, and setting up event listeners for scroll and sub nav effects.
+
+Individual pages use `PageBehavior` by loading it as a dependency and using `behaviors`.
+They're also free to override its base properties/methods if needed. As an example,
+here's what our homepage "subclass" overrides:
+
+**io-home-page.html**
+
+```html
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="PageBehavior.html">
+<!-- rest of the import dependencies used by the page. -->
+
+<dom-module id="io-home-page">
+    <template>
+    <!-- PAGE'S MARKUP -->
+    </template>
+    <script>
+    Polymer({
+        is: 'io-home-page',
+
+        behaviors: [IOBehaviors.PageBehavior], // All pages have common functionality.
+
+        // Pages define their own title and slug for the router.
+        title: 'Schedule - Google I/O 2016',
+        name: 'home',
+
+        // The home page has custom setup work when it's added navigated to.
+        // Note: PageBehavior's attached also gets called.
+        attached() {
+        if (this.app.isPhoneSize) {
+            this.listen(IOWA.Elements.ScrollContainer, 'scroll', '_onPageScroll');
+        }
+        },
+
+        // The home page does its own cleanup when a new page is navigated to.
+        // Note: PageBehavior's detached also gets called.
+        detached() {
+        this.unlisten(IOWA.Elements.ScrollContainer, 'scroll', '_onPageScroll');
+        },
+
+        // The home page can define onPageTransitionDone to do extra work
+        // when page transitions are done, and thus preventing janky animations.
+        onPageTransitionDone() {
+        ...
+        }
+    });
+    </script>
+</dom-module>
+```
+
+### Sharing styles
+
+To share styles across different components in our app, we used Polymer's [shared style modules](https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules). Style modules allow you to define a chunk of CSS once and reuse it in different places throughout an app. For us, "different places" meant different components.
+
+In IOWA, we created `shared-app-styles` to share colors, typography, and layout
+classes across pages and other components we made.
+
+**shared-app-styles.html**
+
+```html
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../bower_components/paper-styles/color.html">
+
+<dom-module id="shared-app-styles">
+    <template>
+    <style>
+        [layout] {
+        @apply(--layout);
+        }
+        [layout][horizontal] {
+        @apply(--layout-horizontal);
+        }
+        .scrollable {
+        @apply(--layout-scroll);
+        }
+        .noscroll {
+        overflow: hidden;
+        }
+        /* Style radio buttons and tabs the same throughout the app */
+        paper-tabs {
+        --paper-tabs-selection-bar-color: currentcolor;
+        }
+        paper-radio-button {
+        --paper-radio-button-checked-color: var(--paper-cyan-600);
+        --paper-radio-button-checked-ink-color: var(--paper-cyan-600);
+        }
+        ...
+    </style>
+    </template>
+</dom-module>
+```
+
+**io-home-page.html**
+
+```html
+<link rel="import" href="shared-app-styles.html">
+<!-- Rest of import dependencies used by the page. -->
+
+<dom-module id="io-home-page">
+    <template>
+    <style include="shared-app-styles">
+        :host { display: block} /* Other element styles can go here. */
+    </style>
+    <!-- PAGE'S MARKUP -->
+    </template>
+    <script>Polymer({...});</script>
+</dom-module>
+```
+
+Here, `<style include="shared-app-styles"></style>` is Polymer's syntax for saying "include the styles in the module named "shared-app-styles".
+
+### Sharing application state
+
+By now you know that every page in our app is a Custom Element. I've said it a million times. Ok, but if every page is self-contained web component, you might be asking yourself how we share state across the app.
+
+IOWA uses a technique similar to dependency injection (Angular) or redux (React) for sharing state. We created a global `app` property and hung shared sub-properties off it. `app`
+gets passed around our application by injecting it into every component that
+needs its data. Using Polymer's [data binding features](https://www.polymer-project.org/1.0/docs/devguide/data-binding) makes this easy since we can do the wiring without writing any code:
+
+```html
+<lazy-pages>
+    <template is="dom-if" name="home">
+    <io-home-page date="2016-05-18T17:00:00Z" app="[[app]]"></io-home-page>
+    </template>
+
+    <template is="dom-if" name="schedule">
+    <io-schedule-page date="2016-05-18T17:00:00Z" app="{ % templatetag openvariable % }app}}"></io-schedule-page>
+    </template>
+    ...
+</lazy-pages>
+
+<google-signin client-id="..." scopes="profile email"
+                            user="{ % templatetag openvariable % }app.currentUser}}"></google-signin>
+
+<iron-media-query query="(min-width:320px) and (max-width:768px)"
+                                query-matches="{ % templatetag openvariable % }app.isPhoneSize}}"></iron-media-query>
+```
+
+The `<google-signin>` element updates its `user` property when users log in to our app. Since that property is bound to `app.currentUser`, any page that wants to access the current user simply needs to bind to `app` and read the `currentUser` sub-property. By itself, this technique is useful for sharing state across the app. However, another benefit was that we ended up creating a **single sign-in element and reusing its results across the site**. Same for the media queries. It would have been wasteful for every page to duplicate sign-in or create its own set of media queries. Instead, components which are responsible for app-wide functionality/data exist at the app-level.
+
+Note: I'm purposefully showing two-way bindings (`{ % templatetag openvariable % }`) and one-way bindings
+(`[[]]`) in this example. Use (`{ % templatetag openvariable % }`) bindings when changes need to flow into
+an element as well as propagate back out (when changes are made internally).
+Use (`[[]]`) bindings when an element just needs to read data.
+
+## Page transitions
+
+As you navigate the Google I/O web app, you'll notice its slick
+page transitions (_à la_ [material design](https://www.google.com/design/spec/material-design/introduction.html)).
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gKNRKR6XV8CbqiuQuFeD.gif", alt="IOWA's page transitions in action.", width="556", height="438" %}
+  <figcaption>
+    IOWA's page transitions in action.
+  </figcaption>
+</figure>
+
+When users navigate to a new page, a sequence of things happen:
+
+1. The top nav slides a selection bar to the new link.
+1. The page's heading fades away.
+1. The page's content slides down then fades away.
+1. By reversing those animations, the new page's heading and content appear.
+1. (Optional) The new page does additional initialization work.
+
+One of our challenges was figuring out how to craft this slick transition without sacrificing performance. There's a lot of dynamic work that takes place, and [jank](http://jankfree.org/) wasn't welcome at our party. Our solution was a combination of the Web Animations API and [Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises). Using the two together gave us versatility, a plug and play animation system, and granular control to minimize _das_ jank.
+
+**How it works**
+
+When users click to a new page (or hit back/forward), our router's `runPageTransition()` does its magic by running through a series of Promises. Using Promises allowed us to carefully orchestrate the animations and helped rationalize the "async-ness" of CSS Animations and dynamically loading content.
+
+```js
+class Router {
+
+    init() {
+    window.addEventListener('popstate', e => this.runPageTransition());
+    }
+
+    runPageTransition() {
+    let endPage = this.state.end.page;
+
+    this.fire('page-transition-start');              // 1. Let current page know it's starting.
+
+    IOWA.PageAnimation.runExitAnimation()            // 2. Play exist animation sequence.
+        .then(() => {
+        IOWA.Elements.LazyPages.selected = endPage;  // 3. Activate new page in <lazy-pages>.
+        this.state.current = this.parseUrl(this.state.end.href);
+        })
+        .then(() => IOWA.PageAnimation.runEnterAnimation())  // 4. Play entry animation sequence.
+        .then(() => this.fire('page-transition-done')) // 5. Tell new page transitions are done.
+        .catch(e => IOWA.Util.reportError(e));
+    }
+
+}
+```
+
+**Recall** from the section ["Keeping things DRY: common functionality across pages"](#dry),
+pages listen for the `page-transition-start` and `page-transition-done` DOM events. Now you're seeing where those events get fired.
+
+We used the Web Animations API instead of the `runEnterAnimation`/`runExitAnimation` helpers. In the case of `runExitAnimation`, we grab a couple of DOM nodes (the masthead and main content area), declare the start/end of each animation, and create a [`GroupEffect`](http://danielcwilson.com/blog/2015/09/animations-part-4/#groupeffects) to run the two in parallel:
+
+```js
+function runExitAnimation(section) {
+    let main = section.querySelector('.slide-up');
+    let masthead = section.querySelector('.masthead');
+
+    let start = {transform: 'translate(0,0)', opacity: 1};
+    let end = {transform: 'translate(0,-100px)', opacity: 0};
+    let opts = {duration: 400, easing: 'cubic-bezier(.4, 0, .2, 1)'};
+    let opts_delay = {duration: 400, delay: 200};
+
+    return new GroupEffect([
+    new KeyframeEffect(masthead, [start, end], opts),
+    new KeyframeEffect(main, [{opacity: 1}, {opacity: 0}], opts_delay)
+    ]);
+}
+```
+
+Just modify the array to make view transitions more (or less) elaborate!
+
+{% Aside %}
+`GroupEffect` is part of the [web-animations-next polyfill](https://github.com/web-animations/web-animations-js) but has yet to land in the [Level 1 spec](https://w3c.github.io/web-animations/).
+{% endAside %}
+
+## Scroll effects
+
+IOWA has a few interesting effects when you scroll the page. The first is our [floating action button (FAB)](https://www.google.com/design/spec/components/buttons-floating-action-button.html) that takes users back to the top of the page:
+
+```html
+    <a href="#" tabindex="-1" aria-hidden="true" aria-label="back to top" onclick="backToTop">
+      <paper-fab icon="io:expand-less" noink tabindex="-1"></paper-fab>
+    </a>
+```
+
+The smooth scroll is implemented using Polymer's [app-layout elements](https://elements.polymer-project.org/elements/app-layout). They provide out-of-the-box scrolling effects like sticky/returning top navs, drop shadows, color and background transitions, parallax effects, and smooth scrolling.
+
+```js
+    // Smooth scrolling the back to top FAB.
+    function backToTop(e) {
+      e.preventDefault();
+
+      Polymer.AppLayout.scroll({top: 0, behavior: 'smooth',
+                                target: document.documentElement});
+
+      e.target.blur();  // Kick focus back to the page so user starts from the top of the doc.
+    }
+```
+
+Another place we used the `<app-layout>` elements was for the sticky nav. As you can see in the video, it goes away when users scroll down the page and returns when scrolling back up.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CmtIglj72uwQra9cQ4CX.gif", alt="Sticky scroll navs", width="201", height="360" %}
+  <figcaption>
+    Sticky scroll navs using <code><app-layout></code>.
+  </figcaption>
+</figure>
+
+We used the `<app-header>` element pretty much as-is. It was easy to drop in and gain
+fancy scrolling effects in the app. Sure, we could have implemented them ourselves, but having the details already codified in a reusable component was a huge time saver.
+
+Declare the element. Customize it with attributes. You're done!
+
+```html
+    <app-header reveals condenses effects="fade-background waterfall"></app-header>
+```
+
+## Conclusion
+
+For the I/O progressive web app, we were able to build an entire frontend in several weeks thanks to web components and Polymer's pre-made [material design widgets](https://elements.polymer-project.org/browse?package=paper-elements). The features of the native APIs (Custom Elements, Shadow DOM, `<template>`) lend themselves naturally to the dynamism of an SPA. Reusability saves a ton of time.
+
+If you're interested in creating a progressive web app of your own, check out the [App Toolbox](https://www.polymer-project.org/1.0/toolbox/). Polymer's App Toolbox is a collection of components, tools and templates for building PWAs with Polymer. It's an easy way to get up and running.
diff --git a/src/site/content/en/blog/is-it-modal/index.md b/src/site/content/en/blog/is-it-modal/index.md
new file mode 100644
index 00000000000..32bfdd37ef1
--- /dev/null
+++ b/src/site/content/en/blog/is-it-modal/index.md
@@ -0,0 +1,119 @@
+---
+layout: post
+title: Is it :modal?
+subhead: This handy CSS pseudo-selector gives you a way to select elements that are modal.
+authors:
+  - jheyy
+description: This handy CSS pseudo-selector gives you a way to select elements that are modal.
+date: 2022-09-02
+thumbnail: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/xyyPgtSNjfzhcOGPn5lG.jpg
+hero: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/xyyPgtSNjfzhcOGPn5lG.jpg
+alt: Orange sheets of paper lie on a green school board and form a chat bubble with three crumpled papers.
+tags:
+  - blog
+  - css
+  - ux
+  - newly-interoperable
+---
+{% Aside 'celebration' %}
+This web feature is now available in all three major browser engines!
+{% endAside %}
+
+CSS `:modal` is available from Chrome 105. This handy pseudo-selector gives you a way to select elements that are "modal", and to avoid managing classes in JavaScript by providing a way to detect modal elements.
+
+{% BrowserCompat 'css.selectors.modal' %}
+
+Two types of elements are currently classed as `:modal`:
+
+- Dialog elements using the `showModal` method.
+- Elements that are in full-screen mode.
+
+How can you use it? This example sets the scale of all `<dialog>` elements that are `:modal`.
+
+```css
+dialog:modal {
+ scale: 2;
+}
+```
+
+Consider this demo where you can show a `<dialog>` in either "modal" or "non-modal" styles.
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'JjvPJKR',
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+When you show the "modal" version, it uses the `::backdrop` provided by the top layer.
+
+{% Aside %}
+[Top layer elements](https://developer.chrome.com/blog/what-is-the-top-layer/) have a styleable backdrop element.
+{% endAside %}
+
+```css
+dialog::backdrop {
+ background: hsl(0 0% 10% / 0.5);
+}
+```
+
+But, for the non-modal version which doesn't have a `::backdrop`, a fake one gets created with the `::before` pseudo-element. It's lighter and doesn't blur the content behind it. You could combine with `:not` to detect a non-modal `<dialog>`.
+
+```css
+dialog[open]:not(:modal)::before {
+  content: "";
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 50%;
+  left: 50%;
+  background: hsl(0 0% 10% / 0.25);
+  transform: translate3d(-50%, -50%, -1px);
+}
+```
+
+This will also work for elements that are in full-screen mode too. Consider this heading element made of spans.
+
+```html
+<header>
+  <h1>
+    <span style="--index: 0;">:</span>
+    <span style="--index: 1;">m</span>
+    <span style="--index: 2;">o</span>
+    <span style="--index: 3;">d</span>
+    <span style="--index: 4;">a</span>
+    <span style="--index: 5;">l</span>
+ </h1>
+</header>
+```
+
+When the element is in full-screen mode, the spans will animate.
+
+```css
+h1 span {
+ animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
+}
+header:modal span {
+  --speed: 0.75;
+}
+@keyframes jump {
+  50% {
+    transform: translateY(-50%);
+  }
+}
+```
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'YzLKQGx',
+    height: 450,
+    tab: 'result',
+    allow: ['fullscreen']
+  }
+%}
+
+_Photo by [Volodymyr Hryshchenko](https://unsplash.com/@lunarts) on [Unsplash](https://unsplash.com/s/photos/dialog)_
+  
+
+
diff --git a/src/site/content/en/blog/jamwithchrome-audio/index.md b/src/site/content/en/blog/jamwithchrome-audio/index.md
new file mode 100644
index 00000000000..3467ba7e247
--- /dev/null
+++ b/src/site/content/en/blog/jamwithchrome-audio/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Case-study - JAM with Chrome
+subhead: How we made the audio rock
+authors:
+  - oskareriksson
+date: 2012-11-08
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+[JAM with Chrome](http://www.jamwithchrome.com) is a web based musical project created by Google. JAM with Chrome lets people from all over the world form a band and jam in real time inside the browser. We at [DinahMoe](http://www.dinahmoe.com/) had the great pleasure to be a part of this project. Our role was to produce music for the application, and design and develop the music component. The development consisted of three main areas: a "[music workstation](http://en.wikipedia.org/wiki/Music_Workstation)" including midi playback, software samplers, audio effects, routing and mixing; a music logic engine to control the music interactively in real-time; and a synchronization component that makes sure that all players in a session hear the music at exactly the same time, a prerequisite for being able to play together.
+
+To achieve the highest possible level of authenticity, accuracy and audio quality we opted to use the Web Audio API. This case study will discuss some of the challenges we were presented with, and how we solved them. There are already a number of great introductory articles here at HTML5Rocks to get you started with Web Audio, so we’ll jump straight into the deep end of the pool.
+
+## Writing custom audio effects
+
+The Web Audio API has a number of useful effects included in the specification, but we needed  more elaborate effects for our instruments in JAM with Chrome. For example, there is a native delay node in Web Audio, but there are many types of [delays](http://en.wikipedia.org/wiki/Delay_(audio_effect)) - stereo delay, ping pong delay, slapback delay and the list goes on. Luckily, all of these are possible to create in Web Audio using the native effect nodes and some imagination.
+
+Since we wanted to be able to use the native nodes and our own custom effects in such a transparent way as possible, we decided that we needed to create a wrapper format that could  achieve this. The native nodes in Web Audio uses its connect method to link nodes together, so we needed to emulate this behaviour. This is what the basic idea looks like:
+
+```js
+var MyCustomNode = function(){
+    this.input = audioContext.createGain();
+    var output = audioContext.createGain();
+
+    this.connect = function(target){
+       output.connect(target);
+    };
+};
+```
+
+With this pattern we’re really close to the native nodes. Let’s see how this would be used.
+
+```js
+//create a couple of native nodes and our custom node
+var gain = audioContext.createGain(),
+    customNode = new MyCustomNode(),
+    anotherGain = audioContext.createGain();
+
+//connect our custom node to the native nodes and send to the output
+gain.connect(customNode.input);
+customNode.connect(anotherGain);
+anotherGain.connect(audioContext.destination);
+```
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BoHq6zyZzDSLG9xluddc.png", alt="Routing the custom node", width="600", height="200" %}
+</figure>
+
+
+The only difference between our custom node and a native one is that we have to connect to the custom nodes input property. I’m sure there are ways to circumvent this, but this was close enough for our purposes. This pattern can be further developed to simulate the disconnect methods of native AudioNodes, as well as accommodating user defined inputs/outputs when connecting and so on. Have a look at the [specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioNode-section) to see what the native nodes can do.
+
+Now that we had our basic pattern for creating custom effects, the next step were to actually give the custom node some custom behaviour. Let’s have a look at a slapback delay node.
+
+## Slapback like you mean it
+
+The slapback delay, sometimes called slapback echo, is a classic effect used on a number of instruments, from 50’s style vocals to surf guitars. The effect takes the incoming sound and plays a copy of the sound with a slight delay of approximately 75-250 milliseconds. This gives a feeling of the sound being slapped back, thus the name. We can create the effect like so:
+
+```js
+var SlapbackDelayNode = function(){
+    //create the nodes we'll use
+    this.input = audioContext.createGain();
+    var output = audioContext.createGain(),
+        delay = audioContext.createDelay(),
+        feedback = audioContext.createGain(),
+        wetLevel = audioContext.createGain();
+
+    //set some decent values
+    delay.delayTime.value = 0.15; //150 ms delay
+    feedback.gain.value = 0.25;
+    wetLevel.gain.value = 0.25;
+
+    //set up the routing
+    this.input.connect(delay);
+    this.input.connect(output);
+    delay.connect(feedback);
+    delay.connect(wetLevel);
+    feedback.connect(delay);
+    wetLevel.connect(output);
+
+    this.connect = function(target){
+       output.connect(target);
+    };
+};
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VNFB0KBGaC7mg7hwiSkX.png", alt="Internal routing of the slapback node", width="600", height="200" %}
+</figure>
+
+As some of you might already have realised, this delay could be used with bigger delay times too, and thus become a regular mono delay with feedback. Here's an example using this delay to let you hear what it sounds like. 
+
+## Routing audio
+
+When working with different instruments and musical parts in professional audio applications it’s essential to have a flexible routing system that allows you to mix and modulate the sounds in effective ways. In JAM with Chrome we have developed an audio bus system, similar to the ones found in physical mixing boards. This allows us to hook up all instruments that need a reverb effect to a common bus, or channel, and then add the reverb to that bus instead of adding a reverb to each separate instrument. This is a major optimization and it’s quite recommended to do something similar as soon as you start doing more complex applications.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KB2V7OkiZX6ZoYbawqn4.png", alt="Routing of the AudioBus", width="600", height="450" %}
+</figure>
+
+
+Luckily this is really easy to achieve in Web Audio. We can basically use the skeleton we defined for the effects and use it in the same way.
+
+```js
+var AudioBus = function(){
+    this.input = audioContext.createGain();
+    var output = audioContext.createGain();
+
+    //create effect nodes (Convolver and Equalizer are other custom effects from the library presented at the end of the article)
+    var delay = new SlapbackDelayNode(),
+        convolver = new tuna.Convolver(),
+        equalizer = new tuna.Equalizer();
+
+    //route 'em
+    //equalizer -> delay -> convolver
+    this.input.connect(equalizer);
+    equalizer.connect(delay.input);
+    delay.connect(convolver);
+    convolver.connect(output);
+
+    this.connect = function(target){
+       output.connect(target);
+    };
+};
+```
+
+This would be used like this:
+
+```js
+//create some native oscillators and our custom audio bus
+var bus = new AudioBus(),
+    instrument1 = audioContext.createOscillator(),
+    instrument2 = audioContext.createOscillator(),
+    instrument3 = audioContext.createOscillator();
+
+//connect our instruments to the same bus
+instrument1.connect(bus.input);
+instrument2.connect(bus.input);
+instrument3.connect(bus.input);
+bus.connect(audioContext.destination);
+```
+
+And voila, we’ve applied delay, equalization and reverb (which is a rather expensive effect, performance wise) at half the cost as if we’d applied the effects to each separate instrument. If we wanted to add some extra spice to the bus, we could add two new gain nodes - preGain and postGain - which would allow us to turn off or fade the sounds in a bus in two different ways. The preGain is put before the effects, and postGain is put in the end of the chain. If we then fade the preGain the effects will still resonate after the gain has hit bottom, but if we fade postGain all sound will be muted at the same time.
+
+## Where to from here?
+
+These methods I’ve described here can, and should, be further developed. Things like the input and output of the custom nodes, and the connect methods, could/should be implemented using prototype based inheritance. Buses should be able to create effects dynamically by being passed a list of effects. 
+
+To celebrate the release of JAM with Chrome we’ve decided to make our [framework of effects open source](https://github.com/Dinahmoe/tuna). If this brief introduction has tickled your fancy, please have a look and feel free to contribute. There’s a discussion going on [here](https://github.com/h5bp/lazyweb-requests/issues/82) regarding standardizing a format for custom Web Audio entites. Get involved!
\ No newline at end of file
diff --git a/src/site/content/en/blog/jamwithchrome-interaction/index.md b/src/site/content/en/blog/jamwithchrome-interaction/index.md
new file mode 100644
index 00000000000..edcaa67f0f4
--- /dev/null
+++ b/src/site/content/en/blog/jamwithchrome-interaction/index.md
@@ -0,0 +1,411 @@
+---
+layout: post
+title: Case-study - JAM with Chrome
+subhead: How we made the UI rock
+authors:
+  - fredchasen
+date: 2012-12-05
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+
+[JAM with Chrome](http://www.jamwithchrome.com) is a web based musical project created by Google. JAM with Chrome lets people from all over the world form a band and JAM in real time inside the browser. [DinahMoe](http://www.dinahmoe.com/) pushed the boundaries of what was possible with [Chrome’s Web Audio API](http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-audio/), our team at [Tool of North America](http://www.toolofna.com/) crafted the interface for strumming, drumming and playing your computer as though it was a musical instrument.
+
+
+
+With Google Creative Lab’s creative direction, illustrator [Rob Bailey](http://robbailey.co.uk/) created intricate illustrations for each of the 19 instruments available to JAM with. Working off those, Interactive Director [Ben Tricklebank](http://www.toolofna.com/#/main/intdirectors/Ben%20Tricklebank) and our design team at Tool created an easy and pro interface for each instrument.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cNz6JC9Vd5D4pZuy514u.png", alt="Full jam montage", width="800", height="313" %}
+</figure>
+
+As each instrument is visually unique, Tool’s Technical Director [Bartek Drozdz](http://www.toolofna.com/#/main/digital/1) and I stitched them together using combinations of PNG images, CSS, SVG and Canvas elements.
+
+Many of the instruments had to handle different methods of interaction (such as clicks, drags and strums - all the things that you would expect to do with an instrument) while keeping the interface with DinahMoe’s sound engine the same.  We found that we needed more than just JavaScript’s mouseup and mousedown to be able to provide a beautiful playing experience.
+
+To deal with all this variation, we created a “Stage” element that covered the playable area, handling clicks, drags and strums across all the different instruments.
+
+## The Stage
+
+The Stage is our controller that we use to setup function across an instrument. Such as adding different parts of the instruments that the user will interact with. As we add more interactions (such as a “hit”) we can add them to the Stage’s prototype.
+
+```js
+function Stage(el) {
+
+  // Grab the elements from the dom
+  this.el = document.getElementById(el);
+  this.elOutput = document.getElementById("output-1");
+
+  // Find the position of the stage element
+  this.position();
+
+  // Listen for events
+  this.listeners();
+
+  return this;
+}
+
+Stage.prototype.position = function() {
+  // Get the position
+};
+
+Stage.prototype.offset = function() {
+  // Get the offset of the element in the window
+};
+
+Stage.prototype.listeners = function() {
+  // Listen for Resizes or Scrolling
+  // Listen for Mouse events
+};
+```
+
+## Getting the element and mouse position
+
+Our first task is to translate mouse coordinates in the browser window to be relative to our Stage element. To do this we needed to take into account where our Stage is in the page.
+
+As we need to find where the element is relative to the whole window, not just its parent element, it’s slightly more complicated than just looking at the elements offsetTop and offsetLeft. The easiest option is to use getBoundingClientRect, which gives the position relative to the window, just like mouse events and it is well [supported in newer browsers](http://www.quirksmode.org/dom/w3c_cssom.html).
+
+```js
+Stage.prototype.offset = function() {
+  var _x, _y,
+      el = this.el;
+
+  // Check to see if bouding is available
+  if (typeof el.getBoundingClientRect !== "undefined") {
+
+    return el.getBoundingClientRect();
+
+  } else {
+    _x = 0;
+    _y = 0;
+
+    // Go up the chain of parents of the element
+    // and add their offsets to the offset of our Stage element
+
+    while (el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
+      _x += el.offsetLeft;
+      _y += el.offsetTop;
+      el = el.offsetParent;
+    }
+
+    // Subtract any scrolling movment
+    return {top: _y - window.scrollY, left: _x - window.scrollX};
+  }
+};
+```
+
+If getBoundingClientRect does not exist, we have a simple function that will just add up offsets, moving up the chain of the element parents until it reaches the body. Then we subtract how far the window has been scrolled to get the position relative to the window. If you are using jQuery the offset() function does a great job of handling the complexity of figuring out the location across platforms, but you will still need to subtract the amount scrolled.
+
+Whenever the page is scrolled or resized it’s possible that the element’s position has changed. We can listen for these events and check for the position again. These events are fired many times on a typical scroll or resize, so in a real application it’s probably best to limit how often you recheck the position. There are many ways to do this, but HTML5 Rocks has an article for [debouncing scroll events](http://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-scroll-events) using requestAnimationFrame which will work well here.
+
+Before we handle any hit detection, this first example will just output the relative x and y whenever the mouse is moved in the Stage area.
+
+```js
+Stage.prototype.listeners = function() {
+  var output = document.getElementById("output");
+
+  this.el.addEventListener('mousemove', function(e) {
+      // Subtract the elements position from the mouse event's x and y
+      var x = e.clientX - _self.positionLeft,
+          y = e.clientY - _self.positionTop;
+
+      // Print out the coordinates
+      output.innerHTML = (x + "," + y);
+
+  }, false);
+};
+```
+
+To start watching the mouse movement, we will create a new Stage object and pass it the id of the div that we want to use as our Stage.
+
+```js
+//-- Create a new Stage object, for a div with id of "stage"
+var stage = new Stage("stage");
+```
+
+## Simple hit detection
+
+In JAM with Chrome not all of the instrument interfaces are complex. Our drum machine pads are just simple rectangles, making it easy to detect if a click falls within their bounds.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CQYbmA4Q36OAXB1dNojv.png", alt="Drum machine", width="800", height="195" %}
+</figure>
+
+Starting with rectangles, we will setup some base types of shapes. Each shape object needs to know its bounds and have the ability to check if a point is within it.
+
+```js
+function Rect(x, y, width, height) {
+  this.x = x;
+  this.y = y;
+  this.width = width;
+  this.height = height;
+  return this;
+}
+
+Rect.prototype.inside = function(x, y) {
+  return x >= this.x && y >= this.y
+      && x <= this.x + this.width
+      && y <= this.y + this.height;
+};
+```
+
+Each new shape type we add will need a function within our Stage object to register it as a hit zone.
+
+```js
+Stage.prototype.addRect = function(id) {
+  var el = document.getElementById(id),
+      rect = new Rect(
+        el.offsetLeft,
+        el.offsetTop,
+        el.offsetWidth,
+        el.offsetHeight
+      );
+
+  rect.el = el;
+
+  this.hitZones.push(rect);
+  return rect;
+};
+```
+
+On mouse events, each shape instance will handle checking if the passed mouse x and y are a hit for it and return true or false.
+
+We can also add an "active" class to the stage element that will change the mouse cursor to be a pointer when rolling over the square.
+
+```js
+this.el.addEventListener ('mousemove', function(e) {
+  var x = e.clientX - _self.positionLeft,
+      y = e.clientY - _self.positionTop;
+
+  _self.hitZones.forEach (function(zone){
+    if (zone.inside(x, y)) {
+      // Add class to change colors
+      zone.el.classList.add('hit');
+      // change cursor to pointer
+      this.el.classList.add('active');
+    } else {
+      zone.el.classList.remove('hit');
+      this.el.classList.remove('active');
+    }
+  });
+
+}, false);
+```
+
+## More shapes
+
+As shapes get more complicated, the math to find if a point is inside of them becomes more complex. However, these equations are well established and documented in great detail in many places online. Some of the best JavaScript examples I have seen are from Kevin Lindsey’s [geometry library](http://www.kevlindev.com/geometry/index.htm).
+
+Fortunately in building JAM with Chrome we never had to go beyond circles and rectangles, relying on combinations of shapes and layering to handle any extra complexity.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/m6GOvjI8ZWe9plhlBeIX.png", alt="Drum shapes", width="400", height="315" %}
+</figure>
+
+### Circles
+
+To check if a point is within a circular drum we will need to create a circle base shape. Though it is quite similar to the rectangle, it will have its own methods for determining bounds and checking if the point is inside of the circle.
+
+```js
+function Circle(x, y, radius) {
+  this.x = x;
+  this.y = y;
+  this.radius = radius;
+  return this;
+}
+
+Circle.prototype.inside = function(x, y) {
+  var dx = x - this.x,
+      dy = y - this.y,
+      r = this.radius;
+  return dx * dx + dy * dy <= r * r;
+};
+```
+
+Instead of changing the color, adding the hit class will trigger a CSS3 animation. Background size gives us a nice way of quickly scaling the image of the drum, without affecting its position. You will need to add other browser’s prefixes for this work with them (-moz, -o and -ms) and might want to add a un-prefixed version as well.
+
+```css
+#snare.hit{
+  { % mixin animation: drumHit .15s linear infinite; % }
+}
+
+@{ % mixin keyframes drumHit % } {
+  0%   { background-size: 100%;}
+  10%  { background-size: 95%; }
+  30%  { background-size: 97%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 98%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 99%; }
+  100% { background-size: 100%;}
+}
+```
+
+## Strings
+
+Our GuitarString function will take a canvas id and Rect object and draw a line across the center of that rectangle.
+
+```js
+function GuitarString(rect) {
+  this.x = rect.x;
+  this.y = rect.y + rect.height / 2;
+  this.width = rect.width;
+  this._strumForce = 0;
+  this.a = 0;
+}
+```
+
+When we want to have it vibrate, we will call our strum function to set the string in motion. Every frame we render will reduce the force it was strummed with slightly and increase a counter that will cause the string to oscillate back and forth.
+
+```js
+GuitarString.prototype.strum = function() {
+  this._strumForce = 5;
+};
+
+GuitarString.prototype.render = function(ctx, canvas) {
+  ctx.strokeStyle = "#000000";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(this.x, this.y);
+  ctx.bezierCurveTo(
+      this.x, this.y + Math.sin(this.a) * this._strumForce,
+      this.x + this.width, this.y + Math.sin(this.a) * this._strumForce,
+      this.x + this.width, this.y);
+  ctx.stroke();
+
+  this._strumForce *= 0.99;
+  this.a += 0.5;
+};
+```
+
+## Intersections and Strumming
+
+Our hit area for the string is just going to be a box again. Clicking within that box should trigger the string animation. But who wants to click a guitar?
+
+To add strumming we need to check the intersection of the strings box and the line that the user’s mouse is traveling.
+
+To get enough distance between the mouse’s previous and current position,  we will need to slow down the rate at which we get the mouse move events. For this example, we will simply set a flag to ignore mousemove events for 50 milliseconds.
+
+```js
+document.addEventListener('mousemove', function(e) {
+  var x, y;
+
+  if (!this.dragging || this.limit) return;
+
+  this.limit = true;
+
+  this.hitZones.forEach(function(zone) {
+    this.checkIntercept(
+      this.prev[0],
+      this.prev[1],
+      x,
+      y,
+      zone
+    );
+  });
+
+  this.prev = [x, y];
+
+  setInterval(function() {
+    this.limit = false;
+  }, 50);
+};
+```
+
+Next we will need to rely on some intersection code that Kevin Lindsey wrote to see if the line of mouse movement intersect the middle of our rectangle.
+
+```js
+Rect.prototype.intersectLine = function(a1, a2, b1, b2) {
+  //-- http://www.kevlindev.com/gui/math/intersection/Intersection.js
+  var result,
+      ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),
+      ub_t = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),
+      u_b = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);
+
+  if (u_b != 0) {
+    var ua = ua_t / u_b;
+    var ub = ub_t / u_b;
+
+    if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
+      result = true;
+    } else {
+      result = false; //-- No Intersection
+    }
+  } else {
+    if (ua_t == 0 || ub_t == 0) {
+      result = false; //-- Coincident
+    } else {
+      result = false; //-- Parallel
+    }
+  }
+
+  return result;
+};
+```
+
+Finally we will add a new Function to create a String Instrument. It will create the new Stage, set up a number of strings and get the context of the Canvas that thw will be drawn on.
+
+```js
+function StringInstrument(stageID, canvasID, stringNum){
+  this.strings = [];
+  this.canvas = document.getElementById(canvasID);
+  this.stage = new Stage(stageID);
+  this.ctx = this.canvas.getContext('2d');
+  this.stringNum = stringNum;
+
+  this.create();
+  this.render();
+
+  return this;
+}
+```
+
+Next we will position the hit areas of the strings and then add them to the Stage element.
+
+```js
+StringInstrument.prototype.create = function() {
+  for (var i = 0; i < this.stringNum; i++) {
+    var srect = new Rect(10, 90 + i * 15, 380, 5);
+    var s = new GuitarString(srect);
+    this.stage.addString(srect, s);
+    this.strings.push(s);
+  }
+};
+```
+
+Finally the StringInstrument's render function will loop through all our strings and call their render methods. It runs all the time, a quickly as requestAnimationFrame sees fit. You can read more about requestAnimationFrame in Paul Irish's article [requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/).
+
+In a real application you might want to set a flag when no animation is occurring to stop drawing a new canvas frame.
+
+```js
+StringInstrument.prototype.render = function() {
+  var _self = this;
+
+  requestAnimFrame(function(){
+    _self.render();
+  });
+
+  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+  for (var i = 0; i < this.stringNum; i++) {
+    this.strings[i].render(this.ctx);
+  }
+};
+```
+
+## Wrap up
+
+Having a common Stage element to handle all our interaction isn’t without its drawbacks. It’s computationally more complex, and cursor pointer events are limited with out adding extra code to change them.
+However, for JAM with Chrome, the benefits of being able to abstract mouse events away from the individual elements worked really well. It let us experiment more with the interface design, switch between methods of animating elements, use SVG to replace images of basic shapes, easily disable hit areas and more.
+
+To see the Drums and Stings in action start your own [JAM](http://jamwithchrome.com) and select the __Standard Drums__ or the __Classic Clean Electric Guitar__.
+
+<figure>
+<a href="http://jamwithchrome.com">
+ {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MzsBxbwuqN7OZHHvY0DL.png", alt="Jam Logo", width="220", height="78" %}
+
+</figure>
\ No newline at end of file
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/evergreen-googlebot.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/evergreen-googlebot.png
deleted file mode 100644
index 1d932cbfb06..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/evergreen-googlebot.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/googlebot-process.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/googlebot-process.png
deleted file mode 100644
index 090596c4190..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/googlebot-process.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/hero.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/hero.png
deleted file mode 100644
index fe767c8462c..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/index.md b/src/site/content/en/blog/javascript-and-google-search-io-2019/index.md
index beb8cf04216..50397eb72a9 100644
--- a/src/site/content/en/blog/javascript-and-google-search-io-2019/index.md
+++ b/src/site/content/en/blog/javascript-and-google-search-io-2019/index.md
@@ -5,14 +5,14 @@ authors:
   - martinsplitt
   - ekharvey
 date: 2019-06-05
-hero: hero.png
+hero: image/admin/k1FlFDvBm4ERrbUiVws4.png
 alt: A pile of gears.
 description: |
   We introduced a new Googlebot at Google I/O and took the opportunity to discuss improvements and best practices for making JavaScript web apps work well with Google Search.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - seo
-  - discoverability
+  # - discoverability
   - javascript
 ---
 
@@ -34,11 +34,9 @@ In this post we'll focus on best practices for making JavaScript web apps discov
 
 This year we announced the much-awaited [new evergreen Googlebot](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html).
 
-<figure class="w-figure">
-  <img src="evergreen-googlebot.png" alt="Googlebot holding the Chrome logo" style="max-width: 400px;">
-  <figcaption class="w-figcaption">
-    Googlebot is now running a modern Chromium rendering engine.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/q6RSuwuwLT7mcgE9Joqp.png", alt="Googlebot holding the Chrome logo", width="400", height="401" %}
+  <figcaption>Googlebot is now running a modern Chromium rendering engine.</figcaption>
 </figure>
 
 Googlebot now uses a modern Chromium engine to render websites for Google Search. On top of that, we will test newer versions of Chromium to _keep_ Googlebot updated, usually within a few weeks of each stable Chrome release. This announcement is big news for web developers and SEOs because it marks the arrival of [1000+ new features](https://caniuse.com/#compare=chrome+41,chrome+74)—such as ES6+, `IntersectionObserver`, and Web Components v1—in Googlebot.
@@ -47,11 +45,9 @@ Googlebot now uses a modern Chromium engine to render websites for Google Search
 
 Googlebot is a pipeline with several components. Let's take a look to understand how Googlebot indexes pages for Google Search.
 
-<figure class="w-figure w-figure--fullbleed">
-  <img src="googlebot-process.png" alt="A diagram showing a URL moving from a crawling queue to a processing step that extracts linked URLs and adds them to the crawling queue, a rendering queue that feeds into a renderer which produces HTML. The processor uses this HTML to extract linked URLs again and index the content.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    Googlebot's pipeline for crawling, rendering, and indexing a page.
-  </figcaption>
+<figure data-size="full">
+  {% Img src="image/admin/zu4wDqHHxpU0dbwSajqA.png", alt="A diagram showing a URL moving from a crawling queue to a processing step that extracts linked URLs and adds them to the crawling queue, a rendering queue that feeds into a renderer which produces HTML. The processor uses this HTML to extract linked URLs again and index the content.", width="800", height="446" %}
+  <figcaption>Googlebot's pipeline for crawling, rendering, and indexing a page.</figcaption>
 </figure>
 
 The process works like this:
@@ -115,14 +111,12 @@ The default rendering strategy for single-page apps today is client-side renderi
 
 Let's look at a web app that shows a collection of cat images and uses JavaScript to render entirely in the browser.
 
-<figure class="w-figure">
-  <img src="spa-kittens.png" alt="A code box showing HTML that loads some scripts. A screenshot of a web page on mobile that shows placeholder images while loading the actual content.">
-  <figcaption class="w-figcaption">
-    The rendering strategy influences the performance and robustness of your web apps.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/lzijYVwo1DPX3Fa2liXk.png", alt="A code box showing HTML that loads some scripts. A screenshot of a web page on mobile that shows placeholder images while loading the actual content.", width="800", height="447" %}
+  <figcaption>The rendering strategy influences the performance and robustness of your web apps.</figcaption>
 </figure>
 
-If you're free to choose your rendering strategy, consider server-side rendering or pre-rendering. They execute JavaScript on the server to generate the initial HTML content, which can improve performance for both users and crawlers. These strategies allow the browser to start rendering HTML as it arrives over the network, making the page load faster.  The [rendering session at I/O](https://www.youtube.com/watch?v=k-A2VfuUROg)  or [the blog post about rendering on the web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) shows how server-side rendering and hydration can improve the performance and user experience of web apps and provides more code examples for these strategies.
+If you're free to choose your rendering strategy, consider server-side rendering or pre-rendering. They execute JavaScript on the server to generate the initial HTML content, which can improve performance for both users and crawlers. These strategies allow the browser to start rendering HTML as it arrives over the network, making the page load faster.  The [rendering session at I/O](https://www.youtube.com/watch?v=k-A2VfuUROg)  or [the blog post about rendering on the web](/rendering-on-the-web/) shows how server-side rendering and hydration can improve the performance and user experience of web apps and provides more code examples for these strategies.
 
 If you're looking for a workaround to help crawlers that don't execute JavaScript—or if you can't make changes to your frontend codebase—consider [dynamic rendering](https://developers.google.com/search/docs/guides/dynamic-rendering), which you can try out in [this codelab](https://codelabs.developers.google.com/codelabs/dynamic-rendering). Note, though, that you won't get the user experience or performance benefits that you would with server-side rendering or pre-rendering because dynamic rendering only serves static HTML to crawlers. That makes it a stop-gap rather than a long-term strategy.
 
@@ -132,35 +126,29 @@ While most pages generally work fine with Googlebot, we recommend testing your p
 
 The easiest way to do a quick check of a page is the [Mobile-Friendly Test](https://g.co/mobilefriendly). Besides showing you issues with mobile-friendliness, it also gives you a screenshot of the above-the-fold content and the rendered HTML as Googlebot sees it.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="mobile-friendly-test-rendered-html.png" alt="The mobile-friendly test shows the rendered HTML Googlebot sees after rendering the page">
-  <figcaption class="w-figcaption">
-    The mobile-friendly test shows you the rendered HTML Googlebot uses.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/15IgtDchchBvLsVyzmG2.png", alt="The mobile-friendly test shows the rendered HTML Googlebot sees after rendering the page", width="800", height="414" %}
+  <figcaption>The mobile-friendly test shows you the rendered HTML Googlebot uses.</figcaption>
 </figure>
 
 You can also find out if there are resource loading issues or JavaScript errors.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="mobile-friendly-test-js-error.png" alt="The Mobile-Friendly Test shows JavaScript errors and a stack trace.">
+<figure>
+  {% Img src="image/admin/22ttektRnHrbGT0zvbHK.png", alt="The Mobile-Friendly Test shows JavaScript errors and a stack trace.", width="800", height="414" %}
 </figure>
 
 It's recommended to verify your domain in [Google Search Console](https://g.co/searchconsole) so you can use the URL inspection tool to find out more about the crawling and indexing state of a URL, receive messages when Search Console detects issues and find out more details of how your site performs in Google Search.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="search-console-url-inspection-tool.png" alt="The URL inspection tool showing a page that is indexed with information on discovery, crawling and indexing for one URL">
-  <figcaption class="w-figcaption">
-    The URL Inspection Tool in Search Console shows the status of a page in crawling, rendering, and indexing.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/JYsPy8FXL3E86gCzekQ3.png", alt="The URL inspection tool showing a page that is indexed with information on discovery, crawling and indexing for one URL", width="800", height="655" %}
+  <figcaption>The URL Inspection Tool in Search Console shows the status of a page in crawling, rendering, and indexing.</figcaption>
 </figure>
 
 For general SEO tips and guidance, you can use the SEO audits in Lighthouse. To integrate SEO audits into your testing suite, use the [Lighthouse CLI](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-cli) or the [Lighthouse CI bot](https://github.com/GoogleChromeLabs/lighthousebot).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lighthouse-seo-audit-report.png" alt="A lighthouse SEO report with a score of 44 and warnings about mobile-friendliness as well as warnings about content best practices">
-  <figcaption class="w-figcaption">
-    Lighthouse shows general SEO recommendations for a page.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/ctch0ql8UQZiaKaWy34u.png", alt="A lighthouse SEO report with a score of 44 and warnings about mobile-friendliness as well as warnings about content best practices", width="800", height="443" %}
+  <figcaption>Lighthouse shows general SEO recommendations for a page.</figcaption>
 </figure>
 
 These tools help you identify, debug, and fix issues with pages in Google Search and should be part of your development routine.
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/lighthouse-seo-audit-report.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/lighthouse-seo-audit-report.png
deleted file mode 100644
index c0a405c4844..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/lighthouse-seo-audit-report.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-js-error.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-js-error.png
deleted file mode 100644
index c9ad56f29df..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-js-error.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-rendered-html.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-rendered-html.png
deleted file mode 100644
index 69e7ffc0111..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/mobile-friendly-test-rendered-html.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/search-console-url-inspection-tool.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/search-console-url-inspection-tool.png
deleted file mode 100644
index c214a164b70..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/search-console-url-inspection-tool.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-and-google-search-io-2019/spa-kittens.png b/src/site/content/en/blog/javascript-and-google-search-io-2019/spa-kittens.png
deleted file mode 100644
index defaa32b78e..00000000000
Binary files a/src/site/content/en/blog/javascript-and-google-search-io-2019/spa-kittens.png and /dev/null differ
diff --git a/src/site/content/en/blog/javascript-this/index.md b/src/site/content/en/blog/javascript-this/index.md
new file mode 100644
index 00000000000..73db610f8f1
--- /dev/null
+++ b/src/site/content/en/blog/javascript-this/index.md
@@ -0,0 +1,412 @@
+---
+title: 'JavaScript: What is the meaning of this?'
+subhead: "Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…"
+description: "Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…"
+authors:
+  - jakearchibald
+date: 2021-03-08
+# updated: 2021-02-19
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: this 🤔
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - javascript
+---
+
+JavaScript's `this` is the butt of many jokes, and that's because, well, it's pretty complicated.
+However, I've seen developers do much-more-complicated and domain-specific things to avoid dealing
+with this `this`. If you're unsure about `this`, hopefully this will help. This is my `this` guide.
+
+I'm going to start with the most specific situation, and end with the least-specific. This article
+is kinda like a big `if (…) … else if () … else if (…) …`, so you can go straight to the first
+section that matches the code you're looking at.
+
+1. [If the function is defined as an arrow function](#arrow-functions)
+1. [Otherwise, if the function/class is called with `new`](#new)
+1. [Otherwise, if the function has a 'bound' `this` value](#bound)
+1. [Otherwise, if `this` is set at call-time](#call-apply)
+1. [Otherwise, if the function is called via a parent object (`parent.func()`)](#object-member)
+1. [Otherwise, if the function or parent scope is in strict mode](#strict)
+1. [Otherwise](#otherwise)
+
+## If the function is defined as an arrow function: {: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+In this case, the value of `this` is _always_ the same as `this` in the parent scope:
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+Arrow functions are great because the inner value of `this` can't be changed, it's _always_ the same
+as the outer `this`.
+
+### Other examples
+
+With arrow functions, the value of `this` _can't_ be changed with [`bind`](#bound):
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+With arrow functions, the value of `this` _can't_ be changed with [`call` or `apply`](#call-apply):
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+With arrow functions, the value of `this` _can't_ be changed by calling the function as a member of
+another object:
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+With arrow functions, the value of `this` _can't_ be changed by calling the function as a
+constructor:
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### 'Bound' instance methods
+
+With instance methods, if you want to ensure `this` always refers to the class instance, the best
+way is to use arrow functions and [class
+fields](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields):
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+This pattern is really useful when using instance methods as event listeners in components (such as
+React components, or web components).
+
+The above might feel like it's breaking the "`this` will be the same as `this` in the parent scope"
+rule, but it starts to make sense if you think of class fields as syntactic sugar for setting things
+in the constructor:
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+Alternative pattens involve binding an existing function in the constructor, or assigning the
+function in the constructor. If you can't use class fields for some reason, assigning functions in
+the constructor is a reasonable alternative:
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## Otherwise, if the function/class is called with `new`: {: #new }
+
+```js
+new Whatever();
+```
+
+The above will call `Whatever` (or its constructor function if it's a class) with `this` set to the
+result of `Object.create(Whatever.prototype)`.
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+The same is true for older-style constructors:
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### Other examples
+
+When called with `new`, the value of `this` _can't_ be changed with [`bind`](#bound):
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+When called with `new`, the value of `this` _can't_ be changed by calling the function as a member
+of another object:
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## Otherwise, if the function has a 'bound' `this` value: {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+Whenever `boundFunction` is called, its `this` value will be the object passed to `bind`
+(`boundObject`).
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %}
+Avoid using `bind` to bind a function to its outer `this`. Instead, use [arrow
+functions](#arrow-functions), as they make `this` clear from the function declaration, rather than
+something that happens later in the code.
+
+Don't use `bind` to set `this` to some value unrelated to the parent object; it's usually unexpected
+and it's why `this` gets such a bad reputation. Consider passing the value as an argument instead;
+it's more explicit, and works with arrow functions. {% endAside %}
+
+### Other examples
+
+When calling a bound function, the value of `this` _can't_ be changed with [`call` or
+`apply`](#call-apply):
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+When calling a bound function, the value of `this` _can't_ be changed by calling the function as a
+member of another object:
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## Otherwise, if `this` is set at call-time: {: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+The value of `this` is the object passed to `call`/`apply`.
+
+{% Aside 'warning' %} Don't use `call`/`apply` to set `this` to some value unrelated to the parent
+object; it's usually unexpected and it's why `this` gets such a bad reputation. Consider passing the
+value as an argument instead; it's more explicit, and works with arrow functions. {% endAside %}
+
+Unfortunately `this` is set to some other value by things like DOM event listeners, and using it can
+result in difficult-to-understand code:
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+I avoid using `this` in cases like above, and instead:
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## Otherwise, if the function is called via a parent object (`parent.func()`): {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+In this case the function is called as a member of `obj`, so `this` will be `obj`. This happens at
+call-time, so the link is broken if the function is called without its parent object, or with a
+different parent object:
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod() === obj` is false because `someMethod` _isn't_ called as a member of `obj`. You might
+have encountered this gotcha when trying something like this:
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+This breaks because the implementation of `querySelector` looks at its own `this` value and expects
+it to be a DOM node of sorts, and the above breaks that connection. To achieve the above correctly:
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+Fun fact: Not all APIs use `this` internally. Console methods like `console.log` were changed to
+avoid `this` references, so `log` doesn't need to be bound to `console`.
+
+{% Aside 'warning' %} Don't transplant a function onto an object just to set `this` to some value
+unrelated to the parent object; it's usually unexpected and it's why `this` gets such a bad
+reputation. Consider passing the value as an argument instead; it's more explicit, and works with
+arrow functions.
+{% endAside %}
+
+## Otherwise, if the function or parent scope is in strict mode: {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+In this case, the value of `this` is undefined. `'use strict'` isn't needed in the function if the
+parent scope is in [strict
+mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) (and all
+modules are in strict mode).
+
+{% Aside 'warning' %}
+Don't rely on this. I mean, there are easier ways to get an `undefined` value 😀.
+{% endAside %}
+
+## Otherwise: {: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+In this case, the value of `this` is the same as `globalThis`.
+
+{% Aside %} Most folks (including me) call `globalThis` the global object, but this isn't 100%
+technically correct. Here's [Mathias Bynens with the
+details](https://mathiasbynens.be/notes/globalthis#terminology), including why it's called
+`globalThis` rather than simply `global`. {% endAside %}
+
+{% Aside 'warning' %} Avoid using `this` to reference the global object (yes, I'm still calling it
+that). Instead, use
+[`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis),
+which is much more explicit. {% endAside %}
+
+## Phew!
+
+And that's it! That's everything I know about `this`. Any questions? Something I've missed? Feel
+free to [tweet at me](https://twitter.com/jaffathecake).
+
+Thanks to [Mathias Bynens](https://twitter.com/mathias), [Ingvar
+Stepanyan](https://twitter.com/RReverser), and [Thomas Steiner](https://twitter.com/tomayac) for
+reviewing.
diff --git a/src/site/content/en/blog/jdid/index.md b/src/site/content/en/blog/jdid/index.md
new file mode 100644
index 00000000000..09fc9cba144
--- /dev/null
+++ b/src/site/content/en/blog/jdid/index.md
@@ -0,0 +1,133 @@
+---
+layout: post
+title: >
+  JD.ID improves their mobile conversion rate by 53% with caching strategies,
+  installation, and push notifications
+subhead: >
+  How JD.ID increased its overall mobile conversion rate (mCVR) by 53%, mCVR
+  for installed users by 200%, and daily active users by 26%.
+description: >
+  How JD.ID increased its overall mobile conversion rate (mCVR) by 53%, mCVR
+  for installed users by 200%, and daily active users by 26%.
+date: 2020-11-24
+hero: image/admin/WubpgpQSHBG8nMqJ7ms4.png
+thumbnail: image/admin/6l2nf0jG3h1DkTiqEbjv.png
+alt: Various icons related to the concept of an e-commerce site.
+tags:
+  - blog
+  - case-study
+  - progressive-web-apps
+  - install
+  - offline
+  - scale-on-web
+---
+
+[JD.ID](https://www.jd.id/) is an e-commerce platform in Indonesia providing
+delivery services for a wide range of products including electronic devices,
+household appliances, clothing, fashion accessories, and sports products.
+Currently operating across more than 350 Indonesian cities, JD.ID wanted to
+expand its online presence further by focusing on performance and a strong
+network-independent experience for their [Progressive Web App
+](/pwa)(PWA). With this enhanced experience, JD.ID was able to
+increase its overall mobile conversion rate (mCVR) by 53%, its mCVR for
+installed users by 200%, and its daily active users by 26%, putting it on course
+to becoming the most popular and trusted e-commerce company in the country.
+
+{% Img src="image/admin/0nJBxHM0wbQKuAVnCAEX.jpg", alt="Screenshots of a user installing the JD.ID PWA", width="800", height="480" %}
+
+## Highlighting the opportunity
+
+To overcome the unstable mobile networks in Indonesia due to the vast number of
+operators, JD.ID was looking for a solution that would keep its website and user
+experience performing at all times, as well as solve any local caching issues.
+It saw huge acquisition potential from users that had visited its website but
+not downloaded the iOS/Android app. To capture this opportunity it used [PWA
+best practices](/pwa-checklist/) to help build an app-like UX on
+its website to enhance engagement, with a focus on [network
+resilience](/reliable/) for dependability.
+
+## The approach
+
+### Caching strategies
+
+To mitigate network issues and improve user experience, the JD.ID team used
+[Workbox](https://developer.chrome.com/docs/workbox/) to ensure its PWA
+performed well even when the user was offline or on a bad network. Workbox made
+it easier to execute their PWA caching strategy, which consisted of 3 parts:
+
++   [**Network first, falling back to cache**](/offline-cookbook/#network-falling-back-to-cache):
+    This strategy aims to get a response from the network first. Once a
+    response is received, it passes it to the browser and saves it to a cache.
+    If the network request fails, the last cached response will be used. JD.ID
+    applied this strategy to the homepage to ensure that users can access the
+    homepage even if they're offline.
++   [**Cache first, falling back to network**](/offline-cookbook/#cache-falling-back-to-network):
+    This strategy checks the cache for a response first and uses it if
+    available. If not, the JD.ID website goes to the network, caches the
+    response, and then passes it to the browser. When the
+    [service worker](/service-workers-cache-storage/#service-workers)
+    gets installed, it will have the static resources of the homepage, offline
+    fallback page (explained below), category page, product page, shopping
+    cart, and settlement page cached into the user's
+    [cache](/cache-api-quick-guide/) in advance. When the user
+    routes to any of these pages, this caching strategy ensures the browser
+    gets the static resource files from the cache directly, improving the
+    loading speed of these critical pages.
++   [**Network only**](/offline-cookbook/#network-only): This
+    strategy forces the response to come from the network only. JD.ID uses this
+    strategy for the shopping cart and settlement page because those pages
+    require very high data accuracy.
+
+Workbox also enables JD.ID to configure routing rules, the default duration of
+request timeouts, the number of responses that can be stored in the cache, and
+the duration of how long responses should be cached.
+
+### Offline fallback page
+
+The JD.ID team [created an offline fallback
+page](/offline-fallback-page/) to provide users with a consistent
+experience and enhance the branding for the website. They also added a [web app
+manifest](/add-manifest/) which enables users to easily install
+the web app on their mobile device.
+
+{% Img src="image/admin/bE0afj8wH2XUmZdKH28R.jpg", alt="A screenshot of the offline fallback page", width="800", height="480" %}
+
+### Push notifications
+
+Additionally, for further re-engagement, JD.ID implemented push notifications
+with
+[Firebase Cloud Messaging for Web](https://firebase.google.com/docs/cloud-messaging/js/client),
+applying them specifically during product sale promotional events.
+
+{% Img src="image/admin/aTQmYAWe65pkwoaatfcp.jpg", alt="Screenshots of enabling push notifications", width="800", height="480" %}
+
+## Overall business results
+
+<div class="switcher">
+  <ul>
+    <li>Overall mobile conversion rate (mCVR) improved 53%</li>
+    <li>mCVR for users who installed the JD.ID PWA improved 200%</li>
+    <li>
+      Daily active users from mobile platforms increased 26% due to increased
+      re-enagement from push notifications
+    </li>
+  </ul>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6cgF8sQt5IH2XcISQsk.png", alt="The impact statistics.", width="800", height="870" %}
+  </figure>
+</div>
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    Our business is growing rapidly and we have a deeper focus on improving our
+    user experience. We aim to become the most popular and trusted e-commerce
+    company by constantly striving to provide services and a variety of products to
+    all users and customers in Indonesia. Web performance and PWA are a crucial part
+    of our UX and overall strategy and we will continue to invest in these areas.
+  </p>
+  <cite>Fengxian Liu, Web Engineering Manager, JD.ID</cite>
+</blockquote>
+
+Check out the [Scale on web case studies
+page](/tags/scale-on-web/) for more success stories from India
+and Southeast Asia.
diff --git a/src/site/content/en/blog/jumia/index.md b/src/site/content/en/blog/jumia/index.md
new file mode 100644
index 00000000000..2038b188c05
--- /dev/null
+++ b/src/site/content/en/blog/jumia/index.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: Jumia sees 33% increase in conversion rate, 12X more users on PWA
+description: |
+    Traffic to Jumia's PWA has eclipsed that of their native app by more than 12 times and is still growing. Jumia also saw a 50% bounce-rate decrease
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/85YtrA4AOFc6OdxoET1y.jpg", alt="Jumia detail", width="800", height="800" %}
+</figure>
+
+Jumia, a leading e-commerce website in Africa, [showcased their Progressive Web
+App (PWA) journey](https://developers.google.com/web/showcase/2016/jumia) in 2016, outlining how they
+delivered an app-like experience to users through modern web capabilities.
+PWA has since proved to be far more than a buzzword—it’s now the de facto
+way Jumia builds for mobile devices. They’ve integrated PWA across many of
+their operations, including Jumia Travel.
+
+- 33% higher conversion rate
+- 50% lower bounce rate
+- 12X more users versus native apps (Android & IOS)
+- 5X less data used
+- 2X less data to complete first transaction
+- 25X less device storage required
+
+## Challenges
+
+In Jumia's main market, sub-Saharan Africa, 75% of the mobile connections are on
+2G networks. Many users only have intermittent connectivity and visit the site
+from low-end phones with data limitations. These two factors make it difficult
+to induce users to download a data-heavy native app, leading to steep drop-off
+rates and high customer-acquisition costs. “We integrated PWA technologies to
+reduce friction. They work on most smartphones and tablets without an App Store
+or Google Play account,” says Paul Midy, Jumia Travel CEO. “You don’t need an
+email account, or a credit card, either.”
+ 
+## Solution
+
+Jumia Travel has enhanced and optimized all the various elements of their PWA
+experience. They saw a dramatic 33% increase in conversion rates compared with
+the previous mobile website. Traffic to their PWA has eclipsed that of their
+native app by more than 12 times and is still growing. Jumia also saw a 50%
+bounce-rate decrease.
+ 
+Plus, Jumia Travel’s PWA uses 80% less data than the native app to complete the
+first transaction. The PWA consumes 25 times less storage, and is much easier to
+keep up-to-date. They’ve also built it to work offline-first, which makes a lot
+of sense given the erratic mobile-network service experienced by many of their
+users.
+ 
+Jumia will continue using PWA technologies to reach their evolving base of
+online shoppers. "Our PWA lets us find some of our highest-value customers,”
+Midy concludes. “We’ll continue expanding the technology across all our
+platforms, investing significant resources to maximize the potential scale. We
+truly believe this is a new way to experience mobile—and we’re just getting
+started."
diff --git a/src/site/content/en/blog/jumia2016/index.md b/src/site/content/en/blog/jumia2016/index.md
new file mode 100644
index 00000000000..2b133402c22
--- /dev/null
+++ b/src/site/content/en/blog/jumia2016/index.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: Jumia
+date: 2016-05-15
+updated: 2016-05-15
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2Pw5XRVGmX1WVwWaheDC.gif", alt="Jumia detail", width="582", height="1000" %}
+</figure>
+
+### Summary
+
+Push Notifications help Jumia reverse cart abandonment and increase
+conversions by 9X
+
+### Results
+
+- 38% Open rate
+- 9X more conversion on previously abandoned carts from web push users
+- 7.85% conversion rate on previously abandoned carts from web push users, vs. 4.5% for native app.
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/Vuagg8LutV9pBx4jXU0x.pdf)
+
+## About Jumia
+
+Jumia is a leading e-commerce website in Africa. Most of their customers use
+mobile devices, which also provide the largest source of traffic and user
+growth.
+
+## Challenge
+
+Nearly a quarter of shopping carts were abandoned on Jumia’s mobile site
+every day. To counter this, they reminded customers via email to complete
+their purchases. But getting people to provide their email addresses is
+challenging, and email open rates are low. With over 65% of their web traffic
+on mobile browsers, Jumia looked to progressive web app technologies like
+Push Notifications to solve their problem and re-engage mobile users who
+had abandoned carts.
+
+## Solution
+
+Working with middleware provider Accengage, Jumia implemented Push
+Notifications in just days through Google Tag Manager. They then began
+sending Push Notifications to customers with abandoned carts. These
+notifications look the same as those from native apps, and arrive even
+if the browser is no longer running.
+
+The new strategy delivered a 38% open rate on mobile and shoppers recovered
+carts 9X more often than before. Conversion rates from Push Notifications
+for cart abandonments on mobile web now outpace the native app’s—7.85%
+versus 4.5% respectively. “We’re closer to our users with web push, because
+it’s a more personal way to communicate with them. Customers aren’t all
+willing to download our apps, as they dread the impact on their data bills,”
+says Jeremy Doutte, Jumia CEO.
diff --git a/src/site/content/en/blog/kapwing/index.md b/src/site/content/en/blog/kapwing/index.md
new file mode 100644
index 00000000000..89ff04b94df
--- /dev/null
+++ b/src/site/content/en/blog/kapwing/index.md
@@ -0,0 +1,442 @@
+---
+title: 'Kapwing: Powerful video editing for the web'
+subhead: |
+   Creators can now edit high-quality video content on the web with Kapwing, thanks to powerful APIs (like IndexedDB and WebCodecs) and performance tools.
+authors:
+  - joshuagrossberg
+date: 2021-12-06
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/to1mQCrluLRKhX5k97lc.jpeg
+alt: Kapwing logo
+description: |
+  Companies like Kapwing make it possible to create all this video content right on the web, by using powerful APIs (like IndexedDB and WebCodecs) and performance tools. 
+tags:
+  - blog
+  - case-study
+  - capabilities
+  - progressive-web-apps
+---
+
+{% Aside %}
+Joshua is the Chief Technology Officer at [Kapwing](https://www.kapwing.com/).
+{% endAside %}
+
+Online video consumption has grown rapidly since the start of the pandemic.
+People are spending more time consuming endless high-quality video on
+platforms such as TikTok, Instagram, and YouTube. Creatives and small business
+owners all over the world need quick and easy-to-use tools to make video
+content. 
+
+Companies like Kapwing make it possible to create all this video content right
+on the web, by using the latest in powerful APIs and performance tools.
+
+{% YouTube id="Df2U9-R-OJs", startTime="974" %}
+
+## About Kapwing
+
+Kapwing is a web-based collaborative video editor designed mainly for casual
+creatives like game-streamers, musicians, YouTube creators, and meme-rs. It's
+also a go-to resource for business owners who need an easy way to produce
+their own social content, such as Facebook and Instagram ads.
+
+People discover Kapwing by searching for a specific task, for example "how to
+trim a video," "add music to my video," or "resize a video." They can do what
+they searched for with just one click&mdash;without the added friction of
+navigating to an app store and downloading an app. The web makes it simple for
+people to search for precisely what task they need help with, and then do it.
+
+After that first click, Kapwing users can do a whole lot more. They can
+explore free templates, add new layers of free stock videos, insert
+subtitles, transcribe videos, and upload background music.
+
+## How Kapwing brings real-time editing and collaboration to the web
+
+While the web provides unique advantages, it also presents distinct
+challenges. Kapwing needs to deliver smooth and precise playback of complex,
+multi-layered projects across a wide range of devices and network conditions.
+To achieve this, we use a variety of web APIs to achieve our performance and
+feature goals.
+
+{% Aside %}
+Kapwing's work was featured at Chrome Developer Summit in November 2021.
+[Watch the keynote](https://www.youtube.com/watch?v=Df2U9-R-OJs&t=974s) for
+an overview of Kapwing's work, and keep reading to take a closer look at the
+technical implementation.
+{% endAside %}
+
+### IndexedDB
+
+High performance editing requires that all of our users' content live on the
+client, avoiding the network whenever possible. Unlike a streaming service,
+where users typically access a piece of content once, our customers reuse
+their assets frequently, days and even months after upload.
+
+[IndexedDB](/storage-for-the-web/) allows us to provide persistent file
+system-like storage to our users. The result is that over 90% of media
+requests in the app are fulfilled locally. Integrating IndexedDB into our
+system was very straightforward.
+
+Here is some boiler plate initialization code that runs on app load:
+
+```js
+import {DBSchema, openDB, deleteDB, IDBPDatabase} from 'idb';
+
+let openIdb: Promise <IDBPDatabase<Schema>>;
+
+const db =
+  (await openDB) <
+  Schema >
+  (
+    'kapwing',
+    version, {
+      upgrade(db, oldVersion) {
+        if (oldVersion >= 1) {
+          // assets store schema changed, need to recreate
+          db.deleteObjectStore('assets');
+        }
+
+        db.createObjectStore('assets', {
+          keyPath: 'mediaLibraryID'
+        });
+      },
+      async blocked() {
+        await deleteDB('kapwing');
+      },
+      async blocking() {
+        await deleteDB('kapwing');
+      },
+    }
+  );
+```
+
+We pass a version and define an `upgrade` function. This is used for
+initialization or to update our schema when necessary. We pass error-handling
+callbacks, `blocked` and `blocking`, which we've found useful in
+preventing issues for users with unstable systems. 
+
+Finally, note our definition of a primary key `keyPath`. In our case, this is a
+unique ID we call `mediaLibraryID`. When a user adds a piece of media to our system, whether via our uploader or a third party extension, we add the media
+to our media library with the following code:
+
+```js
+export async function addAsset(mediaLibraryID: string, file: File) {
+  return runWithAssetMutex(mediaLibraryID, async () => {
+    const assetAlreadyInStore = await (await openIdb).get(
+      'assets',
+      mediaLibraryID
+    );    
+    if (assetAlreadyInStore) return;
+        
+    const idbVideo: IdbVideo = {
+      file,
+      mediaLibraryID,
+    };
+
+    await (await openIdb).add('assets', idbVideo);
+  });
+}
+```
+
+`runWithAssetMutex` is our own internally defined function that serializes
+IndexedDB access. This is required for any read-modify-write type operations,
+as the IndexedDB API is asynchronous. 
+
+Now let's take a look at how we access files. Below is our `getAsset` function:
+
+```js
+export async function getAsset(
+  mediaLibraryID: string,
+  source: LayerSource | null | undefined,
+  location: string
+): Promise<IdbAsset | undefined> {
+  let asset: IdbAsset | undefined;
+  const { idbCache } = window;
+  const assetInCache = idbCache[mediaLibraryID];
+
+  if (assetInCache && assetInCache.status === 'complete') {
+    asset = assetInCache.asset;
+  } else if (assetInCache && assetInCache.status === 'pending') {
+    asset = await new Promise((res) => {
+      assetInCache.subscribers.push(res);
+    }); 
+  } else {
+    idbCache[mediaLibraryID] = { subscribers: [], status: 'pending' };
+    asset = (await openIdb).get('assets', mediaLibraryID);
+
+    idbCache[mediaLibraryID].asset = asset;
+    idbCache[mediaLibraryID].subscribers.forEach((res: any) => {
+      res(asset);
+    });
+
+    delete (idbCache[mediaLibraryID] as any).subscribers;
+
+    if (asset) {
+      idbCache[mediaLibraryID].status = 'complete';
+    } else {
+      idbCache[mediaLibraryID].status = 'failed';
+    }
+  } 
+  return asset;
+}
+```
+
+We have our own data structure, `idbCache`, that is used to minimize IndexedDB
+accesses. While IndexedDB is fast, accessing local memory is faster. We
+recommend this approach so long as you manage the size of the cache.
+
+The `subscribers` array, which is used to prevent simultaneous access to
+IndexedDB, would otherwise be common on load.
+
+### Web Audio API
+
+Audio visualization is incredibly important for video editing. To understand
+why, take a look at a screenshot from the editor:
+
+{% Img 
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/6MqSyhNqFl23wN3GWKbP.png", 
+   alt="Kapwing's editor has a menu for media, including several templates and custom elements, including some templates which are specific to certain platforms like LinkedIn; a timeline which separates video, audio, and animation; canvas editor with export quality options; a preview of the video; and more capabilities.",
+   width="800", height="397"
+%}
+
+This is a YouTube style video, which is common in our app. The user doesn't
+move very much throughout the clip, so the timelines visual thumbnails aren't
+as useful for navigating between sections. On the other hand, the audio
+[waveform](https://en.wikipedia.org/wiki/Waveform) shows peaks and valleys,
+with the valleys typically corresponding to dead time in the recording. If you
+zoom in on the timeline, you'd see more fine grained audio information with
+valleys corresponding to stutters and pauses.
+
+Our user research shows that creators are often guided by these waveforms as
+they splice their content. The web audio API allows us to present this
+information performantly and to update quickly on a zoom or pan of the
+timeline.
+
+The snippet below demonstrates how we do this:
+
+```js
+const getDownsampledBuffer = (idbAsset: IdbAsset) =>
+  decodeMutex.runExclusive(
+    async (): Promise<Float32Array> => {
+      const arrayBuffer = await idbAsset.file.arrayBuffer();
+      const audioContext = new AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+      const offline = new OfflineAudioContext(
+        audioBuffer.numberOfChannels,
+        audioBuffer.duration * MIN_BROWSER_SUPPORTED_SAMPLE_RATE,
+        MIN_BROWSER_SUPPORTED_SAMPLE_RATE
+      );
+
+      const downsampleSource = offline.createBufferSource();
+      downsampleSource.buffer = audioBuffer;
+      downsampleSource.start(0);
+      downsampleSource.connect(offline.destination);
+
+      const downsampledBuffer22K = await offline.startRendering();
+
+      const downsampledBuffer22KData = downsampledBuffer22K.getChannelData(0);
+
+      const downsampledBuffer = new Float32Array(
+        Math.floor(
+          downsampledBuffer22KData.length / POST_BROWSER_SAMPLE_INTERVAL
+        )
+      );
+
+      for (
+        let i = 0, j = 0;
+        i < downsampledBuffer22KData.length;
+        i += POST_BROWSER_SAMPLE_INTERVAL, j += 1
+      ) {
+        let sum = 0;
+        for (let k = 0; k < POST_BROWSER_SAMPLE_INTERVAL; k += 1) {
+          sum += Math.abs(downsampledBuffer22KData[i + k]);
+        }
+        const avg = sum / POST_BROWSER_SAMPLE_INTERVAL;
+        downsampledBuffer[j] = avg;
+      }
+
+      return downsampledBuffer;
+    } 
+  );
+```
+
+We pass this helper the asset that is stored in IndexedDB. Upon completion we
+will update the asset in IndexedDB as well as our own cache.
+
+We gather data about the `audioBuffer` with the `AudioContext` constructor,
+but because we aren't rendering to the device hardware we use the
+`OfflineAudioContext` to render to an `ArrayBuffer` where we will store
+amplitude data.
+
+The API itself returns data at a sample rate much higher than needed for
+effective visualization. That's why we manually downsample to 200 Hz, which we
+found to be enough for useful, visually appealing waveforms.
+
+### WebCodecs
+
+For certain videos the track thumbnails are more useful for timeline
+navigation than the waveforms. However, generating thumbnails is more resource
+intensive than generating waveforms.
+
+We can't cache every potential thumbnail on load, so quick decode on timeline
+pan/zoom is critical to a performant and responsive application. The
+bottleneck to achieving smooth frame drawing is decoding frames, which until
+recently we did using an HTML5 video player. The performance of that approach
+wasn't reliable and we often saw degraded app responsiveness during frame
+rendering.
+
+Recently we have moved over to [WebCodecs](/webcodecs/), which can be used in
+web workers. This should enhance our ability to draw thumbnails for large
+amounts of layers  without impacting main thread performance. While the web
+worker implementation  is still in progress, we give an outline below of our
+existing main thread implementation.
+
+A video file contains multiple streams: video, audio, subtitles and so on that
+are 'muxed' together. To use WebCodecs, we first need to have a demuxed video
+stream. We demux mp4s with the mp4box library, as shown here:
+
+```js
+async function create(demuxer: any) {
+  demuxer.file = (await MP4Box).createFile();
+  demuxer.file.onReady = (info: any) => {
+    demuxer.info = info;
+    demuxer._info_resolver(info);
+  };
+  demuxer.loadMetadata();
+}
+
+const loadMetadata = async () => {
+  let offset = 0;
+  const asset = await getAsset(this.mediaLibraryId, null, this.url);
+  const maxFetchOffset = asset?.file.size || 0;
+
+  const end = offset + FETCH_SIZE;
+  const response = await fetch(this.url, {
+    headers: { range: `bytes=${offset}-${end}` },
+  });
+  const reader = response.body.getReader();
+
+  let done, value;
+  while (!done) {
+    ({ done, value } = await reader.read());
+    if (done) {
+      this.file.flush();
+      break;
+    }
+
+    const buf: ArrayBufferLike & { fileStart?: number } = value.buffer;
+    buf.fileStart = offset;
+    offset = this.file.appendBuffer(buf);
+  }
+};
+```
+
+This snippet refers to a `demuxer` class, which we use to encapsulate the
+interface to `MP4Box`. We once again access the asset from IndexedDB. These
+segments aren't necessarily stored in byte order, and that the `appendBuffer`
+method returns the offset of the next chunk.
+
+Here's how we decode a video frame:
+
+```js
+const getFrameFromVideoDecoder = async (demuxer: any): Promise<any> => {
+  let desiredSampleIndex = demuxer.getFrameIndexForTimestamp(this.frameTime);
+  let timestampToMatch: number;
+  let decodedSample: VideoFrame | null = null;
+
+  const outputCallback = (frame: VideoFrame) => {
+    if (frame.timestamp === timestampToMatch) decodedSample = frame;
+    else frame.close();
+  };  
+
+  const decoder = new VideoDecoder({
+    output: outputCallback,
+  }); 
+  const {
+    codec,
+    codecWidth,
+    codecHeight,
+    description,
+  } = demuxer.getDecoderConfigurationInfo();
+  decoder.configure({ codec, codecWidth, codecHeight, description }); 
+
+  /* begin demuxer interface */
+  const preceedingKeyFrameIndex = demuxer.getPreceedingKeyFrameIndex(
+    desiredSampleIndex
+  );  
+  const trak_id = demuxer.trak_id
+  const trak = demuxer.moov.traks.find((trak: any) => trak.tkhd.track_id === trak_id);
+  const data = await demuxer.getFrameDataRange(
+    preceedingKeyFrameIndex,
+    desiredSampleIndex
+  );  
+  /* end demuxer interface */
+
+  for (let i = preceedingKeyFrameIndex; i <= desiredSampleIndex; i += 1) {
+    const sample = trak.samples[i];
+    const sampleData = data.readNBytes(
+      sample.offset,
+      sample.size
+    );  
+
+    const sampleType = sample.is_sync ? 'key' : 'delta';
+    const encodedFrame = new EncodedVideoChunk({
+      sampleType,
+      timestamp: sample.cts,
+      duration: sample.duration,
+      samapleData,
+    }); 
+
+    if (i === desiredSampleIndex)
+      timestampToMatch = encodedFrame.timestamp;
+    decoder.decodeEncodedFrame(encodedFrame, i); 
+  }
+  await decoder.flush();
+
+  return { type: 'value', value: decodedSample };
+};
+```
+
+The structure of the demuxer is quite complex and beyond the scope of this
+article. It stores each frame in an array titled `samples`. We use the demuxer
+to find the closest preceding key frame to our desired timestamp, which is
+where we must begin video decode.
+
+Videos are composed of full frames, known as key or i-frames, as well as much
+smaller delta frames, often referred to as p- or b-frames. Decode must always
+begin at a key frame. 
+
+The application decodes frames by:
+
+1. Instantiating the decoder with a frame output callback.
+1. Configuring the decoder for the specific codec and input resolution.
+1. Creating an `encodedVideoChunk` using data from the demuxer.
+1. Calling the `decodeEncodedFrame` method.
+
+We do this until we reach the frame with the desired timestamp.
+
+## What's next?
+
+We define scale on our frontend as the ability to maintain precise and
+performant playback as projects get larger and more complex. One way to scale
+performance is to mount as few videos as possible at once, however when we do
+this, we risk slow and choppy transitions. While we've developed internal
+systems to cache video components for reuse, there are limitations to how much
+control HTML5 video tags can provide.
+
+In the future, we may attempt to play all media using WebCodecs. This could
+allow us to be very precise about what data we buffer which should help scale
+performance.
+
+We can also do a better job of offloading large trackpad computations to
+[web workers](/off-main-thread/), and we can be smarter about pre-fetching
+files and pre-generating frames. We see large opportunities to optimize our
+overall application performance and to extend functionality with tools like
+[WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+We would like to continue our investment in
+[TensorFlow.js](https://www.tensorflow.org/js), which we currently use for
+intelligent background removal. We plan to leverage TensorFlow.js for other
+sophisticated tasks such as object detection, feature extraction, style transfer, and so on.
+
+Ultimately, we're excited to continue builing our product with native-like
+performance and functionality on a free and open web.
diff --git a/src/site/content/en/blog/keyboard-lock/chrome-remote-desktop.png b/src/site/content/en/blog/keyboard-lock/chrome-remote-desktop.png
deleted file mode 100644
index e7e6d68326a..00000000000
Binary files a/src/site/content/en/blog/keyboard-lock/chrome-remote-desktop.png and /dev/null differ
diff --git a/src/site/content/en/blog/keyboard-lock/hero.jpg b/src/site/content/en/blog/keyboard-lock/hero.jpg
deleted file mode 100644
index 6c8b11e3039..00000000000
Binary files a/src/site/content/en/blog/keyboard-lock/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/keyboard-lock/index.md b/src/site/content/en/blog/keyboard-lock/index.md
deleted file mode 100644
index 328d6cf63b1..00000000000
--- a/src/site/content/en/blog/keyboard-lock/index.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-layout: post
-title: Capture Keys with the Keyboard Lock API
-subhead: Provide an immersive, full screen experience for a variety of use cases including interactive websites, games, and remote desktop or application streaming.
-tags:
-  - blog
-  - capabilities
-authors:
-  - thomassteiner
-description: >
-  The Keyboard Lock API allows websites to capture keys that are normally reserved by the underlying operating system. It is intended for web applications that provide a full screen immersive experience (like games or remote access apps).
-date: 2020-07-28
-# updated:
-hero: hero.jpg
----
-With more and more users spending most of their time in the browser, richly interactive websites, games, remote desktop streaming, and application streaming strive to provide an immersive, full screen experience. To accomplish this, sites need access to special keys and keyboard shortcuts while they are in full screen mode, so that they can be used for navigation, menus, or gaming functionality. Some examples of the keys that may be required are <kbd>Esc</kbd>, <kbd>Alt</kbd>&nbsp;+&nbsp;<kbd>Tab</kbd>, <kbd>Cmd</kbd>&nbsp;+&nbsp;<kbd>`</kbd>, and <kbd>Ctrl</kbd>&nbsp;+&nbsp;<kbd>N</kbd>.
-
-By default, these keys are not available to the web application because they are captured by the browser or the underlying operating system. The Keyboard Lock API enables websites to use all available keys allowed by the host OS (see [Browser compatibility](#browser-compatibility)).
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled"
-       src="chrome-remote-desktop.png"
-       alt="Ubuntu Linux streamed to a browser tab in macOS Chrome (not running in full screen mode yet).">
-  <figcaption>
-    The problem: a streamed Ubuntu Linux remote desktop <em>not</em> running in full screen mode and <em>without</em> active keyboard lock,
-    so system keys are still captured by the macOS host operating system and the experience is <em>not</em> immersive yet.
-  </figcaption>
-</figure>
-
-## Using the Keyboard Lock API
-
-The [`Keyboard` interface](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard) of the the Keyboard API provides functions that toggle capturing of key presses from the physical keyboard as well as getting information about the used [keyboard layout](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/getLayoutMap).
-
-### Prerequisite
-
-There are two different types of full screen available in modern browsers: JavaScript-initiated via the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) and user-initiated via a keyboard shortcut. The Keyboard Lock API is only available when [JavaScript-initiated full screen](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen) is active.
-Here's an example of JavaScript-initiated full screen:
-
-```js
-await document.documentElement.requestFullscreen();
-```
-
-### Browser compatibility
-
-You can see browser compatibility on [Can I use](https://caniuse.com/#feat=mdn-api_keyboard_lock). Note that not all system keys can be locked. This varies from operating system to operating system. For example, follow [crbug.com/855738](https://crbug.com/855738) for progress updates on system keyboard lock for macOS.
-
-### Feature detection
-
-You can use the following pattern to check if the Keyboard Lock API is supported:
-
-```js
-if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
-  // Supported!
-}
-```
-
-### Locking the keyboard
-
-The [`lock()`](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock) method of the `Keyboard` interface returns a promise after enabling the capture of key presses for any or all of the keys on the physical keyboard. This method can only capture keys that are granted access by the underlying operating system. The `lock()` method takes an array of one or more key codes to lock. If no key codes are provided, all keys will be locked. A list of valid key code values is available in the [UI Events KeyboardEvent code Values](https://www.w3.org/TR/uievents-code/#keyboard-key-codes) spec.
-
-#### Capturing all keys
-
-The following example captures all key presses.
-
-```js
-navigator.keyboard.lock();
-```
-
-#### Capturing specific keys
-
-The following example captures the <kbd>W</kbd>, <kbd>A</kbd>, <kbd>S</kbd>, and <kbd>D</kbd> keys. It captures these keys regardless of which modifiers are used with the key press. Assuming a US QWERTY layout, registering `"KeyW"` ensures that <kbd>W</kbd>, <kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>W</kbd>, <kbd>Control</kbd>&nbsp;+&nbsp;<kbd>W</kbd>, <kbd>Control</kbd>&nbsp;+&nbsp;<kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>W</kbd>, and all other key modifier combinations with <kbd>W</kbd> are sent to the app. The same applies to `"KeyA"`, `"KeyS"`, and `"KeyD"`.
-
-```js
-await navigator.keyboard.lock([
-  "KeyW",
-  "KeyA",
-  "KeyS",
-  "KeyD",
-]);
-```
-
-You can respond to captured key presses using keyboard events. 
-For example this code uses the `onkeydown` event:
-
-```js
-document.addEventListener('keydown', (e) => {
-  if ((e.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
-    // Do something when the 'A' key was pressed, but only
-    // when not in combination with the command or control key.
-  }
-});
-```
-
-### Unlocking the keyboard
-
-The [`unlock()`](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/unlock) method unlocks all keys captured by the `lock()` method and returns synchronously.
-
-```js
-navigator.keyboard.unlock();
-```
-
-When a document is closed, the browser always implicitly calls `unlock()`.
-
-## Demo
-
-You can test the Keyboard Lock API by running the [demo](https://keyboard-lock.glitch.me/) on Glitch. Be sure to [check out the source code](https://glitch.com/edit/#!/keyboard-lock). Clicking the Enter full screen button below launches the demo in a new window so it can enter full screen mode.
-
-{% Glitch {
-  id: 'keyboard-lock',
-  path: 'script.js'
-} %}
-
-## Security Considerations
-
-One concern with this API is that it could be used to grab all of the keys and (in conjunction with the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) and the [PointerLock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)) prevent the user from exiting the web page. To prevent this, the spec requires the browser to provide a way for the user to exit from keyboard lock even if all of the keys are requested by the API. In Chrome, this escape hatch is a long (two second) <kbd>Esc</kbd> key press to trigger an exit from Keyboard Lock.
-
-## Helpful links
-
-- [Specification draft](https://wicg.github.io/keyboard-lock/)
-- [GitHub repository](https://github.com/WICG/keyboard-lock)
-- [ChromeStatus entry](https://chromestatus.com/features/5642959835889664)
-- [Chrome tracking bug](https://crbug.com/677559)
-- [Key codes for standard keyboards](https://www.w3.org/TR/uievents-code/#keyboard-key-codes)
-
-## Acknowledgements
-
-This article was reviewed by [Joe Medley](https://github.com/jpmedley) and [Kayce Basques](https://github.com/kaycebasques).  The Keyboard Lock spec is authored by [Gary Kacmarcik](https://www.linkedin.com/in/garykac) and [Jamie Walch](https://www.linkedin.com/in/jamie-walch-395b332b).
-Hero image by [Ken Suarez](https://unsplash.com/@kensuarez) on [Unsplash](https://unsplash.com/s/photos/padlock-computer).
diff --git a/src/site/content/en/blog/konga/index.md b/src/site/content/en/blog/konga/index.md
new file mode 100644
index 00000000000..bffc1c4345f
--- /dev/null
+++ b/src/site/content/en/blog/konga/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: Konga
+date: 2016-05-13
+updated: 2016-05-13
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/seSymQNOS9N7GIcPjpia.gif", alt="Konga detail.", width="582", height="1000" %}
+</figure>
+
+### Summary
+
+Konga cuts data usage 92% with new Progressive Web App
+
+### Results
+
+- 92% less data for initial load, vs. native app
+- 82% less data to complete first transaction, vs. native app
+- 63% less data for initial load, vs. previous mobile web experience
+- 84% less data to complete first transaction, vs. previous mobile web experience
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/tqrVtWVeV03xgU23ZsDp.pdf)
+
+## About Konga
+
+Launched in 2012, Konga is a leading e-commerce website in Nigeria, selling
+everything from books to fridges to mobile phones. Mobile devices provide the
+largest source of traffic and user growth.
+
+## Challenge
+
+Africa is a uniquely mobile continent. Unlike many other parts of the world,
+Internet use leapfrogged over desktop to mobile. Poor connectivity, the
+prevalence of low-end devices, and several other obstacles hindered Konga’s
+ability to grow. They developed a native app, so users on mobile could work
+offline and re-engage. The cost of Internet access is still high, however,
+while per-capita income is relatively very low. Current and potential
+customers are very data-sensitive, and many hesitated to use data or space
+to download Konga’s native app.
+
+## Solution
+
+Konga wanted to provide all of their web users with the benefits of their app,
+including performance, the ability to work offline, and re-engage without the
+data cost. They built a Progressive Web App to leverage new, open web APIs and
+offer a mobile web experience that is fast, uses less data, and re-engages
+users in multiple ways.
+
+With nearly two-thirds of Nigerian users reaching the Internet via 2G
+networks, a fast user experience was essential. To decrease load times,
+Konga added service workers and streamlined the site to help consumers quickly
+reach the products they’re looking for. Users can continue to browse
+categories, review previous searches, and even check out by calling to
+order—all while offline.
+
+Tracking data usage to initial load and to complete first transaction were two
+key measurements for Konga. Compared with their native app, their Progressive
+Web App uses 92% less data for initial load and 82% less data to complete the
+first transaction. Also, when compared to their previous mobile website, the
+new experience uses 63% less data for initial load and 84% less data to
+complete first transaction.
+
+{% Blockquote 'Shola Adekoya, Konga.com CEO.'%}
+We estimate that with our new light, super-fast, UX-rich browsing capability,
+customers’ data consumption will fall dramatically.
+{% endBlockquote %}
diff --git a/src/site/content/en/blog/lancome/index.md b/src/site/content/en/blog/lancome/index.md
new file mode 100644
index 00000000000..70dbc3788f3
--- /dev/null
+++ b/src/site/content/en/blog/lancome/index.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Lancôme rebuilds their mobile website as a PWA, increases conversions 17%
+description: |
+    To drive both traffic and re-engagement, luxury cosmetics brand Lancôme launched a Progressive Web App (PWA) to deliver a fast, app-like experience on the mobile web
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1vNAz1DVJDIbNuZseehE.jpg", alt="Lancome detail", width="800", height="800" %}
+</figure>
+
+To drive both traffic and re-engagement, luxury cosmetics brand
+Lancôme launched a Progressive Web App (PWA) with Mobify to deliver a fast,
+app-like experience on the mobile web.
+
+- 17% increase in conversions
+- 53% increase in mobile sessions on iOS
+- 8% increase in conversion rates on recovered carts via Push Notifications
+
+## Challenge
+
+Lancôme saw mobile traffic eclipse desktop traffic for the first time in 2016.
+Despite a growing number of mobile site visitors, mobile conversion rates didn’t
+match those for desktop. While 38% of shopping carts led to orders on desktop,
+the mobile web conversion rate was only 15%. This disparity revealed that
+consumers were experiencing significant obstacles when trying to purchase on
+mobile. As the mobile web became a core focus area, Lancôme struggled to build a
+fast and engaging experience for their mobile web shoppers.
+ 
+### Can’t we just build an app for that?
+
+At first, Lancôme considered building an e-commerce app for mobile, but decided
+that an app only made sense for customers who visited regularly. They understood
+that shoppers on Lancôme’s mobile site behave differently, and wouldn’t return
+to an e-commerce app weekly, let alone daily. Lancôme wanted to build the right
+user experience (UX) on all of their devices. The company needed a fast-loading,
+compelling emobile experience, similar to what they could achieve with a native
+app—but one that was also discoverable and accessible to everyone via the mobile
+web.
+ 
+## Solution
+
+Instead of minimally updating their underlying site, Lancôme looked to PWA
+technologies to provide an immersive, app-like experience. They took advantage
+of service workers to deliver reliable performance on unstable networks and push
+notifications for re-engagement. Their best-in-class PWA achieves a performance
+score of 94/100 on Lighthouse, an automated tool for improving web page quality.
+ 
+With the new PWA, the time until the page is interactive fell by 84%, compared
+to their previous mobile experience, with a corresponding 15% decrease in bounce
+rates. Lancôme saw their mobile sessions rise by more than 50%, and conversions
+increase by 17%. The new strategy also delivered a much better user experience
+across platforms. iOS is extremely important for Lancôme—65% of all users
+landing on their PWA are on iPhones. With their new PWA, Lancôme saw a 53%
+increase in session length and 10% bounce rate decrease among iPhone users
+(despite the fact that the “Add to homescreen” menu item, push notifications,
+and offline caching were unavailable due to lack of iOS support for PWA of
+service workers).
+ 
+Lancôme’s higher engagement rate resulted from the new site’s increased download
+speeds and user-interface improvements. On Android devices (which support
+service workers), Lancôme also took advantage of re-engagement technologies such
+as push notifications, which became very popular with users: Over 18,000
+shoppers have signed up for alerts since the site launched in October 2016. The
+notifications look the same as those on native apps, and arrive even if the
+browser is no longer running. Lancôme sends four or five alerts a month for
+exclusive promotions and product releases. 8% of consumers who tap on a push
+notification make a purchase, which is much higher than the desktop website
+conversion rate. Lancôme also has great success in using push notifications to
+reconnect with shoppers who’ve abandoned their carts. The new strategy has
+delivered an 18% open rate on mobile, and conversion rates on abandoned carts
+have increased by 8%.
+
+All told, the PWA has been a tremendous success, helping the beauty giant make
+great strides into the mobile web.
+
+### Results 
+
+**Overall**
+
+- 84% decrease in time until the page is interactive 
+- 17% increase in conversions
+- 15% decrease in bounce rate
+- 51% increase in mobile sessions
+
+**iOS**
+
+- 53% increase in mobile sessions on iOS
+- 10% decrease in bounce rates on iOS
+
+**Push** 
+
+- 8% of consumers who tap on a push notification make a purchase
+- 18% open rate from Push Notifications
+- 12% increase in conversion rates on recovered carts via Push Notifications
+
diff --git a/src/site/content/en/blog/land-lines/index.md b/src/site/content/en/blog/land-lines/index.md
new file mode 100644
index 00000000000..efafeee1428
--- /dev/null
+++ b/src/site/content/en/blog/land-lines/index.md
@@ -0,0 +1,191 @@
+---
+layout: post
+title: Land Lines
+description: |
+  Land Lines is an experiment that lets you explore Google Earth satellite images through gesture. Using a combination of machine learning, optimized algorithms,and graphics card power, the experiment is able to run efficiently on your phone's web browser without a need for backend servers. This is a look into our development process and the various approaches we tried leading us to the final result.
+date: 2016-12-15
+updated: 2016-12-15
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+### Summary
+
+Land Lines is an experiment that lets you explore Google Earth satellite images
+through gesture. Using a combination of machine learning, data optimization,
+and graphics card power, the experiment is able to run efficiently on your
+phone's web browser without a need for backend servers. This is a look into our
+development process and the various approaches we tried leading us to the final
+result.
+
+[https://g.co/LandLines](https://g.co/LandLines)
+
+When the Data Arts team approached me about exploring a data set of earth images
+I was quite excited - the images were beautiful, revealing all different kinds
+of structures and textures, both human made and natural, and I was intrigued
+with how to connect this data set. I did a variety of initial experiments
+looking at image similarity and different ways of filtering and organizing them.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ouc4asBmTxj5qzJ9neV9.jpg", alt="t-sne similarity layout", width="800", height="392" %}
+  <figcaption>
+    t-sne similarity layout,
+    <a href="https://dl.dropboxusercontent.com/u/92337283/misc/result_L_1457431104.png">
+      high res 50 mb
+    </a>
+  </figcaption>
+</figure>
+
+As a group we kept coming back to the beautiful and dominant lines in the
+images. These lines were easy to spot - highways, rivers, edges of mountains
+and plots of land - and we designed a few projects to explore these. As an
+artist I was inspired by the beautiful things you can do with collections of
+lines - see for example
+[Cassandra C Jones's work with lightning](http://www.cassandracjones.com/lightning-drawing-series)
+- and I was excited to work with this data set.
+
+## Line Detection
+
+One of the initial challenges was how to detect lines in the images. It's easy
+to take out a piece of tracing paper, throw it on top of a printout of one of
+these photos, and draw the lines that your eye sees but in general computer
+vision algorithms for finding lines tend to not work well across very diverse
+images.
+
+I developed a previous version of the search by drawing algorithm on a project
+with [Local Projects](https://localprojects.net/) and for that we hand annotated
+the lines to search for. It was fun to draw on top of artworks but tedious as
+you move from dozens of images to thousands. I wanted to try to automate the
+process of finding lines.
+
+With these aerial images I tried traditional line detection algorithms like
+openCv's [canny edge detection](https://en.wikipedia.org/wiki/Canny_edge_detector)
+algorithm but found they gave either very discontinuous line segments or if the
+threshold were too relaxed, tons of spurious lines. Also, the thresholds to
+get good results were different across different image sets and I wanted an
+algorithm for finding a consistent set of good lines without supervision.
+
+I experimented with a variety of line detection algorithms including recent ones
+like [gPb (PDF)](https://www2.eecs.berkeley.edu/Research/Projects/CS/vision/grouping/papers/amfm_pami2010.pdf)
+which  although producing amazing results, required minutes to run per image.
+In the end I settled with
+[Structured Forest edge detection](http://docs.opencv.org/3.1.0/d0/da5/tutorial_ximgproc_prediction.html),
+an algorithm that ships with [openCV](http://opencv.org/).
+
+Once I had a good "line image", I still had the problem of actually getting the
+lines and identifying individual lines from each other - i.e., how do I take
+this raster data and make it vector. Often times when I'm looking at computer
+vision problems, I investigate [imageJ](https://imagej.nih.gov/ij/), an open
+source java based image processing environment used by scientists and
+researchers which has a healthy ecosystem of
+[plugins](https://imagej.nih.gov/ij/plugins/). I found a plugin called
+[ridge detection](http://imagej.net/Ridge_Detection), which helps take an
+intensity image and turn that into a set of line segments. (As a side note,
+I also found this [edge detection and labeling](http://www.peterkovesi.com/matlabfns/#edgelink)
+code from Matlab useful).
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VAUNajQgeKSnqGdKWSMy.png", alt="Image with detected line segments", width="600", height="210" %}
+  <figcaption>Image with detected line segments</figcaption>
+</figure>
+
+## Serverless
+
+I also wanted to see if it's possible to do a data visualization app that's
+essentially serverless, where the hard work of matching and connecting happens
+client side. I usually work in [openFrameworks](http://openframeworks.cc/), a
+c++ framework for creative coding and besides the occasional
+[node](https://nodejs.org/) project I haven't done a lot of server side coding.
+I was curious if it's possible to do all of the calculation client side and to
+only use the server just for serving json and image data.
+
+For the draw application, the matching is a very heavy operation. When you draw
+a line, we need to find the closest match among over tens of thousands of line
+segments. To calculate the distance of one drawing to another we use a metric
+from [dollar gesture recognizer](https://depts.washington.edu/aimgroup/proj/dollar/)
+which itself involves many distance calculations. In the past, I've used threading and
+other tricks but in order to make it work in real time on a client device
+(including mobile phones) I needed something better. I looked into
+[metric trees](https://en.wikipedia.org/wiki/Metric_tree) for finding closest/nearest
+neighbors and I settled on [vantage point trees](https://en.wikipedia.org/wiki/Vantage-point_tree)
+([javascript implementation](http://fpirsch.github.io/vptree.js/)). The vantage
+point tree basically gets built off a set of data and a distance metric and
+when you put in a new piece of data it gives you quite quickly a list of the
+closest values. The first time I saw this work on a mobile phone instantly I
+was floored. One of the great benefits of this particular vantage point tree
+implementation is that you can [save out the tree](https://github.com/fpirsch/vptree.js)
+after it's computed and save on the costs of computing this tree.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FkvF5ElUNo0CCCy3AWrS.png", alt="Closest results", width="600", height="346" %}
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4TxtCA5qFXb8p4WneqQh.png", alt="Drawn results", width="600", height="314" %}
+  <figcaption>
+    Examples of results from the vantage point tree, drawn input is on the right
+    side and the closest results are on the left.
+  </figcaption>
+</figure>
+
+Another challenge of making it work without a server is getting the data loaded
+onto a mobile device - For draw, the tree and line segment data was over 12mb
+and the images are quite large, we wanted the experience to feel quick and
+responsive and the goal is to was try to keep the download small. Our solution
+was to progressively load data. In the draw app we split the vantage point tree
+data set into 5 pieces and when the app loads it only loads the first chunk and
+then every 10 seconds it loads another chunk of data in the background, so
+essentially the app gets better and better for the first minute of being used.
+In the drag app was also worked hard to cache images so that as you drag, new
+images are loaded in the background.
+
+Finally, one thing I found harder than expected was making a pre-loader for both
+apps, so you the initial delay as data loads would be understandable. I used the
+[progress callback](http://stackoverflow.com/questions/19126994/what-is-the-cleanest-way-to-get-the-progress-of-jquery-ajax-request)
+on the ajax requests and on the pixi.js side, checked images that were loading
+asynchronously had actually loaded and use that to drive the preload message.
+
+## Connected Line
+
+For drag, I wanted to create an endless line from the lines we found in the edge
+detection. The first step was to filter lines from the line detection algorithm
+and identify long lines that start on one edge and end on one of the three other
+edges.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/SA7JLr9pPht7PagxYYA4.png", alt="Good lines for connecting marked in red", width="600", height="566" %}
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jmaLjxyXlruEhc3F8dqC.png", alt="Good lines for connecting marked in red", width="600", height="405" %}
+  <figcaption>Good lines for connecting marked in red</figcaption>
+</figure>
+
+Once I had a set of long lines (or to use a more accurate term,
+[polylines](http://www.webopedia.com/TERM/P/polyline.html), a collection of
+connected points) in order to connect them I converted these lines into a set of
+angle changes. Usually when you think of a polyline you imagine it as a set of
+points: point a is connected to point b which is connected to point c. Instead,
+you can treat the line as a set of angle changes: Move forward and rotate some
+amount, move forward and rotate some amount. A good way to visualize this is to
+think about [wire bending machines](https://www.youtube.com/watch?v=hSi9ew4bU6o),
+which take a piece of wire and as it's being extruded perform rotations.
+The shape of the drawing comes from turning.
+
+If you consider the line as angle changes and not points, it becomes easier to
+combine lines into one larger line with less discontinuities - rather than
+stitching points you are essentially adding relative angle changes. In order to
+add a line, you take the current angle of the main line aimage0nd add to it the
+relative changes of the line you want to add.
+
+As a side note, I've used this technique of converting a line into a set of
+angle changes for artistic exploitation - you can make drawings "uncurl" similar
+to how wire can curl and uncurl. Some examples:
+[one](https://www.instagram.com/p/BLdawsdhDje/?taken-by=zach.lieberman),
+[two](https://www.instagram.com/p/BLps0gkB0F-/?taken-by=zach.lieberman),
+[three](https://www.instagram.com/p/BM4Qd8ZhbrH/?taken-by=zach.lieberman)
+
+This angle calculation is what allows us to steer the line as you drag - we
+calculate how off the main angle is from where we want to be and we look for a
+picture that will help the most getting the line going in the right direction.
+It's all a matter of thinking relatively.
+
+Finally, I just want to say that this was a really fun project to be involved
+with. It's exciting as an artist to be asked to use a data set as lovely as
+these images and I'm honored the Data Arts team reached out. I hope you have
+fun experimenting with it!
diff --git a/src/site/content/en/blog/last-baseline/index.md b/src/site/content/en/blog/last-baseline/index.md
new file mode 100644
index 00000000000..14b70e365fe
--- /dev/null
+++ b/src/site/content/en/blog/last-baseline/index.md
@@ -0,0 +1,55 @@
+---
+layout: post
+title: Last baseline alignment
+subhead: >
+  All major browser engines now support last baseline alignment in CSS grid and flexbox.
+description: >
+  All major browser engines now support last baseline alignment in CSS grid and flexbox.
+date: 2023-02-20
+authors:
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/taV4SVIvqz1D3XyOLgrM.jpg
+alt: 'Aligned food and cutlery.'
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three major browser engines!
+{% endAside %}
+
+Alignment using the `first` and `last` keywords is now available in all major engines. This means that we can use last baseline alignment as another option when aligning groups of flex or grid items.
+
+{% BrowserCompat 'css.properties.align-items.flex_context.last_baseline' %}
+
+## First baseline alignment
+
+If you set the value of `align-items` to `baseline`, the result will be first baseline alignment. Therefore the first baseline of the item you are aligning (described as the _alignment subject_) will align with the first baseline of the other items in the group. You can see this in the following example, where the first two flex items are aligned using `align-items: baseline`, so they align along the baseline created by the larger text. The final item is aligned to `flex-start` and therefore aligns to the start of the flex container.
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'xxaGaqq',
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+## Last baseline alignment
+
+When aligning a grid or flex item with the value `last baseline`, the last baseline of that item will align to the last baseline of the _baseline sharing group_ that it is part of. The following example demonstrates last baseline alignment, with the first flex item aligning with the last line of text in the larger item. The final item in this group is aligned to `flex-end`, which is the end of the flex container.
+
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'ExejeWN',
+    height: 450,
+    tab: 'result'
+  }
+%}
+
+## Fallback alignment
+
+If the alignment subject does not have a baseline sharing group to align to, then a fallback alignment will be used. For `baseline`, and `first baseline` the fallback alignment is `start`, and for `last baseline` the fallback alignment is `end`. 
+
+Photo by [Toa Heftiba](https://unsplash.com/@heftiba?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
diff --git a/src/site/content/en/blog/lcp-lazy-loading/index.md b/src/site/content/en/blog/lcp-lazy-loading/index.md
new file mode 100644
index 00000000000..fd200ed2a2e
--- /dev/null
+++ b/src/site/content/en/blog/lcp-lazy-loading/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: The performance effects of too much lazy loading
+subhead: Data-driven advice for lazy loading images with Core Web Vitals in mind.
+description: "Eagerly loading images within the initial viewport—while liberally lazy loading the rest—can improve Web Vitals while loading fewer bytes."
+authors:
+  - rviscomi
+  - felixarntz
+date: 2021-07-15
+updated: 2022-07-18
+hero: image/STd8eW8CSiNp5B1bX0R6Dww2eH32/Hdl5V6rz7DOLmC7LkYaX.jpg
+alt: Photograph of a prickly pear cactus, whose sharp thorns guard a succulent fruit.
+tags:
+  - blog
+  - web-vitals
+  - performance
+  - images
+---
+
+Lazy loading is a technique to defer downloading a resource until it's needed, which conserves data
+and reduces network contention for critical assets. It became a web standard in
+[2019](/browser-level-image-lazy-loading/) and today `loading="lazy"` for images is
+[supported](https://caniuse.com/loading-lazy-attr) by most major browsers. That sounds great,
+but is there such a thing as too much lazy loading?
+
+This post summarizes how we analyzed publicly available web transparency data and ad hoc A/B testing
+to understand the adoption and performance characteristics of native image lazy loading. What we
+found is that lazy loading can be an amazingly effective tool for reducing unneeded image bytes, but
+overuse can negatively affect performance. Concretely, our analysis shows that more eagerly
+loading images within the initial viewport—while liberally lazy loading the rest—can give us the
+best of both worlds: fewer bytes loaded and improved [Core Web Vitals](/vitals/#core-web-vitals).
+
+## Adoption
+
+According to the most recent data in [HTTP Archive](https://httparchive.org/),
+native image lazy loading is used by [17%](https://httparchive.org/reports/state-of-images?start=2020_01_01&end=2021_06_01#imgLazy)
+of websites and adoption is growing rapidly. This much of a foothold in the ecosystem is remarkable
+for a relatively new API.
+
+<figure>
+  {% Img
+    src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/9RDh3CEC9vb1jCjVAIIi.png",
+    alt="Pie chart showing WordPress making up 84.1% of lazy loading adoption, other CMSs 2.3%, and non-CMSs 13.5%.",
+    width="800",
+    height="491" %}
+  <figcaption>
+    Breakdown of the types of websites that make use of native image lazy loading.
+    <em>(<a href="https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-wp-cms-sql">Source</a>)</em>
+  </figcaption>
+</figure>
+
+[Querying](https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-wp-cms-sql)
+the raw data in the HTTP Archive project gives us a clearer understanding of what kinds of websites
+are driving adoption: 84% of sites that use native image lazy loading use WordPress, 2% use another
+CMS, and the remaining 14% don't use a known CMS. These results make clear how
+[WordPress is leading the charge](https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/)
+in adoption.
+
+<figure>
+  {% Img
+    src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/XgHvIF8JyybNZCNwXL35.png",
+    alt="Timeseries chart of lazy loading adoption with WordPress being the predominant player compared to other CMSs and non-CMSs, with similar proportions to the previous chart. Total adoption is shown to have rapidly increased from 1% to 17% from July 2020 to June 2021.",
+    width="800",
+    height="507" %}
+  <figcaption>
+    Breakdown of the types of websites that make use of native image lazy loading.
+    <em>(<a href="https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-wp-cms-timeseries-sql">Source</a>)</em>
+  </figcaption>
+</figure>
+
+The
+[rate of adoption](https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-wp-cms-timeseries-sql)
+is also worth noting. One year ago in July 2020, WordPress sites that use lazy loading made up tens
+of thousands websites in the corpus of about 6 million (1% of total). Lazy loading adoption in
+WordPress alone has since grown to over 1 million websites (14% of total).
+
+## Correlational performance
+
+[Digging deeper](https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-crux-lcp-sql)
+into HTTP Archive, we can compare how pages with and without native image lazy loading perform with
+the [Largest Contentful Paint](/lcp/) (LCP) metric. The LCP data comes from real-user
+experiences from the [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) (CrUX) as opposed to synthetic testing in the lab. The chart
+below uses a box-and-whisker plot to visualize the distributions of each pages' 75th percentile LCP:
+the lines represent the 10th and 90th percentiles and the boxes represent the 25th and 75th
+percentiles.
+
+<figure>
+  {% Img
+    src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/W8gsHQn1IjlRuAgnSizY.png",
+    alt="Box and whisker chart showing the 10, 25, 75, and 90th percentiles for pages that do and do not use native image lazy loading. Comparatively, the LCP distribution of pages that do not use it is faster than those that do.",
+    width="800",
+    height="488" %}
+  <figcaption>
+    Distribution of all pages' 75th percentile LCP experience, broken down by whether they use native image lazy loading.
+    <em>(<a href="https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-crux-lcp-sql">Source</a>)</em>
+  </figcaption>
+</figure>
+
+The median page without lazy loading has a 75th percentile LCP of 2,922 ms, compared to 3,546 ms for
+the median page with lazy loading. Overall, websites that use lazy loading tend to have worse LCP
+performance.
+
+It's important to point out that these are _correlational_ results and they don't necessarily point
+to lazy loading as being the _cause_ of the slower performance. Hypothetically, if WordPress sites
+tend to be a bit slower, and given how much they make up the lazy loading cohort, that could explain
+the difference. So let's try to eliminate that variability by looking only at WordPress sites.
+
+<figure>
+  {% Img
+    src="image/STd8eW8CSiNp5B1bX0R6Dww2eH32/k1YlIULhqpx3CJV2OPYc.png",
+    alt="Box and whisker chart showing the 10, 25, 75, and 90th percentiles for WordPress pages that do and do not use native image lazy loading. Comparatively, the LCP distribution of pages that do not use it is faster than those that do, similar to the previous chart.",
+    width="800",
+    height="488" %}
+  <figcaption>
+    Distribution of WordPress pages' 75th percentile LCP experience, broken down by whether they use native image lazy loading.
+    <em>(<a href="https://gist.github.com/rviscomi/44d80c1a0f4dec9cbafb37347c770278#file-lazy-loading-crux-lcp-wordpress-sql">Source</a>)</em>
+  </figcaption>
+</figure>
+
+Unfortunately, the same pattern emerges when we drill down into WordPress pages; those that use
+lazy loading tend to have slower LCP performance. The median WordPress page without lazy loading has
+a 75th percentile LCP of 3,495 ms, compared to 3,768 ms for the median page with lazy loading.
+
+This still doesn't prove that lazy loading _causes_ pages to get slower, but using it does coincide
+with having slower performance. To try to answer the causality question, we set up a lab-based A/B
+test.
+
+## Causal performance
+
+The goal for the A/B test was to prove or disprove the hypothesis that native image lazy loading, as
+implemented in WordPress core, resulted in slower LCP performance and fewer image bytes. The
+methodology we used was to test a demo WordPress website with the [twentytwentyone](https://wordpress.org/themes/twentytwentyone/)
+theme. We tested
+both archive and single page types, which are like the home and article pages, on desktop and
+emulated mobile devices using [WebPageTest](https://webpagetest.org/). We tested each combination of
+pages with and without lazy loading enabled and ran each test nine times to get the median LCP value
+and number of image bytes.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Series</th>
+        <th>default</th>
+        <th>disabled</th>
+        <th>Difference from default</th>
+      </tr>
+      </thead>
+    <tbody>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcQM_859caf47f070026732f4da3f70b8afe3-l:fix,210625_BiDcPT_2b89f12170b7180acf06cb35d3125d6a-l:disabled,210625_AiDc28_df202856ac4f0da4748c7a84a7a455a8-l:default">twentytwentyone-archive-desktop</a></td>
+        <td style="text-align: right;">2,029</td>
+        <td style="text-align: right;">1,759</td>
+        <td style="text-align: right; background-color: #8fd1b1;">-13%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcV5_003a2ee20d6ee7323fca102afe3ef511-l:fix,210625_BiDcET_810fe76322f8a6003c38f0bc901e4025-l:disabled,210625_BiDc99_44b0562e9077eb01e1e18dceec69bca9-l:default">twentytwentyone-archive-mobile</a></td>
+        <td style="text-align: right;">1,657</td>
+        <td style="text-align: right;">1,403</td>
+        <td style="text-align: right; background-color: #7ecaa5;">-15%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_AiDcR8_47e248c3211951b7af3bc9a87f205cc7-l:fix,210625_AiDcXB_3d9db18bf36397fcdc5d3db207d0d9e7-l:disabled,210625_AiDc2G_ee59429fac9a388b2184758078610b61-l:default">twentytwentyone-single-desktop</a></td>
+        <td style="text-align: right;">1,655</td>
+        <td style="text-align: right;">1,726</td>
+        <td style="text-align: right; background-color: #fae3e1;">4%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcR1_c349d38d4c7151772f2678fa7767ff42-l:fix,210625_AiDcD9_502bb504fc87aebafc5f8c9aaa70faa5-l:disabled,210625_BiDcPS_de2a3e5a526e470287d850d1dbc96fb7-l:default">twentytwentyone-single-mobile</a></td>
+        <td style="text-align: right;">1,352</td>
+        <td style="text-align: right;">1,384</td>
+        <td style="text-align: right; background-color: #fdf0ef;">2%</td>
+      </tr>
+    </tbody>
+    <caption>Change in LCP (ms) by disabling native image lazy loading on sample WordPress pages.</caption>
+  </table>
+</div>
+
+The results above compare the median LCP in milliseconds for tests on archive and single pages for
+desktop and mobile. When we disabled lazy loading on archive pages, we observed LCP improving by a
+significant margin. On single pages, however, the difference was more neutral.
+
+It's worth noting that the effect of disabling lazy loading actually appears to make the single
+pages slightly faster. However, the difference in LCP is less than one standard deviation for both
+desktop and mobile tests, so we attribute this to variance and consider the change neutral overall.
+By comparison, the difference for archive pages is more like two to three standard deviations.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Series</th>
+        <th>default</th>
+        <th>disabled</th>
+        <th>Difference from default</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcQM_859caf47f070026732f4da3f70b8afe3-l:fix,210625_BiDcPT_2b89f12170b7180acf06cb35d3125d6a-l:disabled,210625_AiDc28_df202856ac4f0da4748c7a84a7a455a8-l:default">twentytwentyone-archive-desktop</a></td>
+        <td style="text-align: right;">577</td>
+        <td style="text-align: right;">1173</td>
+        <td style="text-align: right; background-color: #e67c73;">103%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcV5_003a2ee20d6ee7323fca102afe3ef511-l:fix,210625_BiDcET_810fe76322f8a6003c38f0bc901e4025-l:disabled,210625_BiDc99_44b0562e9077eb01e1e18dceec69bca9-l:default">twentytwentyone-archive-mobile</a></td>
+        <td style="text-align: right;">172</td>
+        <td style="text-align: right;">378</td>
+        <td style="text-align: right; background-color: #e67c73;">120%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_AiDcR8_47e248c3211951b7af3bc9a87f205cc7-l:fix,210625_AiDcXB_3d9db18bf36397fcdc5d3db207d0d9e7-l:disabled,210625_AiDc2G_ee59429fac9a388b2184758078610b61-l:default">twentytwentyone-single-desktop</a></td>
+        <td style="text-align: right;">301</td>
+        <td style="text-align: right;">850</td>
+        <td style="text-align: right; background-color: #e67c73;">183%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcR1_c349d38d4c7151772f2678fa7767ff42-l:fix,210625_AiDcD9_502bb504fc87aebafc5f8c9aaa70faa5-l:disabled,210625_BiDcPS_de2a3e5a526e470287d850d1dbc96fb7-l:default">twentytwentyone-single-mobile</a></td>
+        <td style="text-align: right;">114</td>
+        <td style="text-align: right;">378</td>
+        <td style="text-align: right; background-color: #e67c73;">233%</td>
+      </tr>
+    </tbody>
+    <caption>Change in the number of image bytes (KB) by disabling native image lazy loading on sample WordPress pages.</caption>
+  </table>
+</div>
+
+The results above compare the median number of image bytes (in KB) for each test. As expected,
+lazy loading has a very clear positive effect on reducing the number of image bytes. If a real user
+were to scroll the entire page down, all images would load anyway as they cross into the viewport,
+but these results show the improved performance of the initial page load.
+
+To summarize the results of the A/B test, the lazy loading technique used by WordPress very clearly
+helps reduce image bytes but at the cost of a delayed LCP.
+
+## Testing a fix
+
+Before we get into how the fix was implemented, let's look at how lazy loading works in WordPress
+today. The most important aspect of the current implementation is that it lazy-loads images above
+the fold (within the viewport). The CMS blog post
+[acknowledges](/browser-level-lazy-loading-for-cmss/#avoid-lazy-loading-above-the-fold-elements)
+this as a pattern to avoid, but experimental data at the time indicated that the effect on LCP was
+minimal and worth simplifying the implementation in WordPress core.
+
+Given this new data, we created an experimental fix that avoids lazy loading images that are above
+the fold and we tested it under the same conditions as the first A/B test.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Series</th>
+        <th>default</th>
+        <th>disabled</th>
+        <th>fix</th>
+        <th>Difference from default</th>
+        <th>Difference from disabled</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcQM_859caf47f070026732f4da3f70b8afe3-l:fix,210625_BiDcPT_2b89f12170b7180acf06cb35d3125d6a-l:disabled,210625_AiDc28_df202856ac4f0da4748c7a84a7a455a8-l:default">twentytwentyone-archive-desktop</a></td>
+        <td style="text-align: right;">2,029</td>
+        <td style="text-align: right;">1,759</td>
+        <td style="text-align: right;">1,749</td>
+        <td style="text-align: right; background-color: #8bd0ae;">-14%</td>
+        <td style="text-align: right; background-color: #fafdfb;">-1%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcV5_003a2ee20d6ee7323fca102afe3ef511-l:fix,210625_BiDcET_810fe76322f8a6003c38f0bc901e4025-l:disabled,210625_BiDc99_44b0562e9077eb01e1e18dceec69bca9-l:default">twentytwentyone-archive-mobile</a></td>
+        <td style="text-align: right;">1,657</td>
+        <td style="text-align: right;">1,403</td>
+        <td style="text-align: right;">1,352</td>
+        <td style="text-align: right; background-color: #64c093;">-18%</td>
+        <td style="text-align: right; background-color: #e0f2e9;">-4%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_AiDcR8_47e248c3211951b7af3bc9a87f205cc7-l:fix,210625_AiDcXB_3d9db18bf36397fcdc5d3db207d0d9e7-l:disabled,210625_AiDc2G_ee59429fac9a388b2184758078610b61-l:default">twentytwentyone-single-desktop</a></td>
+        <td style="text-align: right;">1,655</td>
+        <td style="text-align: right;">1,726</td>
+        <td style="text-align: right;">1,676</td>
+        <td style="text-align: right; background-color: #fef7f7;">1%</td>
+        <td style="text-align: right; background-color: #e6f5ee;">-3%</td>
+      </tr>
+      <tr>
+        <td><a
+        href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcR1_c349d38d4c7151772f2678fa7767ff42-l:fix,210625_AiDcD9_502bb504fc87aebafc5f8c9aaa70faa5-l:disabled,210625_BiDcPS_de2a3e5a526e470287d850d1dbc96fb7-l:default">twentytwentyone-single-mobile</a></td>
+        <td style="text-align: right;">1,352</td>
+        <td style="text-align: right;">1,384</td>
+        <td style="text-align: right;">1,342</td>
+        <td style="text-align: right; background-color: #f8fcfa;">-1%</td>
+        <td style="text-align: right; background-color: #e6f5ee;">-3%</td>
+      </tr>
+    </tbody>
+    <caption>Change in LCP (ms) by the proposed fix for native image lazy loading on sample WordPress pages.</caption>
+  </table>
+</div>
+
+These results are much more promising. Lazy loading only the images below the fold results in a
+complete reversal of the LCP regression and possibly even a slight _improvement_ over disabling LCP
+entirely. How could it be faster than not lazy loading at all? One explanation is that by not
+loading below-the-fold images, there's less network contention with the LCP image, which enables it
+to load more quickly.
+
+<div>
+  <table>
+  <thead>
+    <tr>
+      <th>Series</th>
+      <th>default</th>
+      <th>disabled</th>
+      <th>fix</th>
+      <th>Difference from default</th>
+      <th>Difference from disabled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a
+      href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcQM_859caf47f070026732f4da3f70b8afe3-l:fix,210625_BiDcPT_2b89f12170b7180acf06cb35d3125d6a-l:disabled,210625_AiDc28_df202856ac4f0da4748c7a84a7a455a8-l:default">twentytwentyone-archive-desktop</a></td>
+      <td style="text-align: right;">577</td>
+      <td style="text-align: right;">1173</td>
+      <td style="text-align: right;">577</td>
+      <td style="text-align: right;">0%</td>
+      <td style="text-align: right; background-color: #a9dcc3;">-51%</td>
+    </tr>
+    <tr>
+      <td><a
+      href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcV5_003a2ee20d6ee7323fca102afe3ef511-l:fix,210625_BiDcET_810fe76322f8a6003c38f0bc901e4025-l:disabled,210625_BiDc99_44b0562e9077eb01e1e18dceec69bca9-l:default">twentytwentyone-archive-mobile</a></td>
+      <td style="text-align: right;">172</td>
+      <td style="text-align: right;">378</td>
+      <td style="text-align: right;">172</td>
+      <td style="text-align: right;">0%</td>
+      <td style="text-align: right; background-color: #a3d9bf;">-54%</td>
+    </tr>
+    <tr>
+      <td><a
+      href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_AiDcR8_47e248c3211951b7af3bc9a87f205cc7-l:fix,210625_AiDcXB_3d9db18bf36397fcdc5d3db207d0d9e7-l:disabled,210625_AiDc2G_ee59429fac9a388b2184758078610b61-l:default">twentytwentyone-single-desktop</a></td>
+      <td style="text-align: right;">301</td>
+      <td style="text-align: right;">850</td>
+      <td style="text-align: right;">301</td>
+      <td style="text-align: right;">0%</td>
+      <td style="text-align: right; background-color: #92d3b3;">-65%</td>
+    </tr>
+    <tr>
+      <td><a
+      href="https://www.webpagetest.org/video/compare.php?medianMetric=chromeUserTiming.LargestContentfulPaint&highlightLCP=1&thumbSize=200&ival=100&end=visual&tests=210625_BiDcR1_c349d38d4c7151772f2678fa7767ff42-l:fix,210625_AiDcD9_502bb504fc87aebafc5f8c9aaa70faa5-l:disabled,210625_BiDcPS_de2a3e5a526e470287d850d1dbc96fb7-l:default">twentytwentyone-single-mobile</a></td>
+      <td style="text-align: right;">114</td>
+      <td style="text-align: right;">378</td>
+      <td style="text-align: right;">114</td>
+      <td style="text-align: right;">0%</td>
+      <td style="text-align: right; background-color: #89cfad;">-70%</td>
+    </tr>
+    </tbody>
+    <caption>Change in the number of image bytes (KB) by the proposed fix for native image lazy loading on sample WordPress pages.</caption>
+  </table>
+</div>
+
+In terms of image bytes, the fix has absolutely no change as compared to the default behavior. This
+is great because that was one of the strengths of the current approach.
+
+There are some caveats with this fix. WordPress determines which images to lazy-load on the
+server-side, which means that it doesn't know anything about the user's viewport size or whether
+images will initially load within it. So the fix uses heuristics about the images' relative location
+in the markup to guess whether it will be in the viewport. Specifically, if the image is the first
+featured image on the page or the first image in the main content, it's assumed to be above the fold
+(or close to it), and it will not be lazy-loaded. Page-level conditions like the number of words in
+the heading or the amount of paragraph text early in the main content may affect whether the image
+is within the viewport. There are also user-level conditions that may affect the accuracy of the
+heuristics, especially the viewport size and the usage of anchor links that change the scroll
+position of the page. For those reasons, it's important to acknowledge that the fix is only
+calibrated to provide good performance in the general case and fine-tuning may be needed to make
+these results applicable to all real-world scenarios.
+
+## Rolling it out
+
+Now that we've identified a better way to lazy-load images, all of the image savings and faster LCP
+performance, how can we get sites to start using it? The highest priority change is to submit a
+patch to WordPress core to implement the experimental fix. We'll also be updating the guidance in
+the [Browser-level lazy-loading for CMSs](/browser-level-lazy-loading-for-cmss/) blog
+post to clarify the negative effects of above-the-fold lazy loading and how CMSs can use heuristics
+to avoid it.
+
+Since these best practices are applicable to all web developers, it may also be worth flagging
+lazy loading antipatterns in tools like Lighthouse. Refer to the [feature
+request](https://github.com/GoogleChrome/lighthouse/issues/12785) on GitHub if you're interested to
+follow along with progress on that audit. Until then, one thing developers could do to find
+instances of LCP elements being lazy-loaded is to add more detailed logging to their field data.
+
+```js
+new PerformanceObserver((list) => {
+  const latestEntry = list.getEntries().at(-1);
+
+  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
+    console.warn('Warning: LCP element was lazy loaded', latestEntry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+The JavaScript snippet above will evaluate the most recent LCP element and log a warning if it was
+lazy-loaded.
+
+This also highlights a sharp edge of the lazy loading technique and the potential for API
+improvements at the platform level. For example, there's an open issue in Chromium to
+[experiment](https://bugs.chromium.org/p/chromium/issues/detail?id=996963) with natively loading the
+first few images eagerly, similar to the fix, despite the `loading` attribute.
+
+## Wrapping it up
+
+If your site uses native image lazy loading, check how it's implemented and run A/B tests to better
+understand its performance costs. It may benefit from more eagerly loading images above the fold. If
+you have a WordPress site, there will hopefully be a patch landing in WordPress core soon. And if
+you're using another CMS, make sure they're aware of the potential performance issues described
+here.
+
+Trying out relatively new web platform APIs can come with both risks and rewards—they're called
+cutting edge features for a reason. While we're starting to get a sense of the thorniness of native
+image lazy loading, we're also seeing the upsides of how to use it to achieve better performance.
+
+<small>_Photo by <a href="https://unsplash.com/@frankielopez?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Frankie Lopez</a> on <a href="https://unsplash.com/s/photos/prickly-pear?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_</small>
diff --git a/src/site/content/en/blog/learn-accessibility-available/index.md b/src/site/content/en/blog/learn-accessibility-available/index.md
new file mode 100644
index 00000000000..6d92e6e5b00
--- /dev/null
+++ b/src/site/content/en/blog/learn-accessibility-available/index.md
@@ -0,0 +1,57 @@
+---
+layout: post
+title: All of Learn Accessibility! is available
+subhead: >
+  All modules have now been published.
+description: >
+  We launched the final modules for Learn Accessibility. This means you
+  can take this course from start to finish or in any order you choose.
+date: 2023-01-12
+authors:
+  - alexandrawhite
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/47JeuiQdxypVbW87NnSB.svg
+thumbnail: image/VbsHyyQopiec0718rMq2kTE1hke2/03dCg7PsCbcwblqRHYMB.png
+alt: 'Learn Accessibility'
+tags:
+  - blog
+  - accessibility
+---
+
+All modules in the [Learn Accessibility](/learn/accessibility/) course are now
+available. Written by [Carie Fisher](https://twitter.com/cariefisher), these
+courses take you through the essentials for building accessible websites and
+web apps.
+
+You can read them in whatever order you'd like. The final modules on testing
+walk you through a culmination of all of your knowledge:
+
+* [Automated testing](/learn/accessibility/test-automated)
+* [Manual accessibility testing](/learn/accessibility/test-manual)
+* [Assistive technology testing](/learn/accessibility/test-assistive-technology)
+
+The last new module will teach you how to make your
+[forms more accessible](/learn/accessibility/forms). This is a great complement
+to [Learn Forms](/learn/forms/).
+
+And that's not all. We had four community spotlights with people working on
+accessibility:
+
+* [Melanie Sumner](/community-highlight-melanie/) told us about her journey
+  into engineering, accessible design, Ember.js, and the importance of funding
+  these efforts.
+* [Olutimilehin Olushuyi](/community-highlight-shuyi/) told us about his move
+  from the law to web development, building accessible communities, and creating
+  accessible layouts.
+* [Albert Kim](/community-highlight-albert-kim/) told us about mental health
+  awareness, building for invisible disabilities, the COGA Accessibility
+  Community Group, and more practical wisdom.
+* [Elisa Bandy](/community-highlight-elisa/) told us about her work for
+  Google's internal documentation, how to prioritize use cases, and building
+  expertise.
+
+We hope you'll discover some new best practices. These modules are meant to
+build your expertise, but some accessibility best practices differ, based on
+the disability you're addressing.
+
+We remain open to your feedback. [Open a GitHub issue](https://github.com/GoogleChrome/web.dev/issues/new/choose)
+and give as much information as you can so we can address your questions or concerns.
diff --git a/src/site/content/en/blog/learn-html-available/index.md b/src/site/content/en/blog/learn-html-available/index.md
new file mode 100644
index 00000000000..bf3651a4ae0
--- /dev/null
+++ b/src/site/content/en/blog/learn-html-available/index.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: All of Learn HTML! is available
+subhead: >
+  All modules have now been published.
+description: >
+  We launched the final modules for Learn HTML. This means you
+  can take this course from start to finish or in any order you choose.
+date: 2023-02-21
+authors:
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/8VqPyKxeGQWSe5tljiQz.svg
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/YDxKJ14tckrLzMXYZquR.png
+alt: 'Learn HTML'
+tags:
+  - blog
+---
+
+All modules in the [Learn HTML](/learn/html/) course are now
+available. This course was written by [Estelle Weyl](https://front-end.social/@estelle) and takes you through an in-depth journey to really understand HTML. 
+
+You can read them in whatever order you'd like. The final modules, launched today, are:
+
+- [Forms](/learn/html/forms/)
+- [Images](/learn/html/images/)
+- [Audio and video](/learn/html/audio-video/)
+- [Template, slot, and shadow](/learn/html/template/)
+- [HTML APIs](/learn/html/apis/)
+- [Focus](/learn/html/focus/)
+- [Other inline text elements](/learn/html/inline-text/)
+- [Details and summary](/learn/html/details/)
+- [Dialog](/learn/html/dialog/)
+
+I've been writing HTML for a very long time, and I learned things while editing this course. There really is a lot more to HTML than you might think, and it's definitely worth revisiting some of the things you think you already know. Take a look, and don't forget to check out some of the [other courses in our growing collection](/learn/).
diff --git a/src/site/content/en/blog/learn-images/index.md b/src/site/content/en/blog/learn-images/index.md
new file mode 100644
index 00000000000..4cf200fb570
--- /dev/null
+++ b/src/site/content/en/blog/learn-images/index.md
@@ -0,0 +1,31 @@
+---
+layout: post
+title: Learn Images!
+subhead: >
+  Today we have launched Learn Images! In our newest course learn about image formats, compression, responsive images, and performance.
+description: >
+  Today we have launched Learn Images! In our newest course learn about image formats, compression, responsive images, and performance.
+date: 2023-02-01
+authors:
+  - rachelandrew
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/A9XJCcUxlSBm8fa0fQPC.svg
+thumbnail: 'image/kheDArv5csY6rvQUJDbWRscckLr1/MadRbq0upSrYMQ1ksYrQ.png'
+alt: 'Learn Images'
+tags:
+  - blog
+---
+
+Today we are excited to share with you our latest course on web.dev. [Learn Images](/learn/images/) is a new course written by [Mat Marquis](https://hire.wil.to/), and it's a deep dive into all you need to know about images on the web.
+
+This course is created for beginner and advanced web developers alike, covering everything from the basics of ensuring image sources are efficiently requested and rendered, to the details of how common image formats are communicated from server to client. Throughout this course you’ll learn how to achieve the smallest possible transfer sizes for your images without compromising on their quality—at least, not in a way anyone will be able to see.
+
+As with all of our courses, you can go through the series from start to finish for a holistic understanding of how images work on the modern web, or use it as a reference for the specific concepts and markup patterns you’ll be using in your day-to-day work.
+
+Learn Images joins our existing courses, as we develop a library of resources to help you learn key web development skills:
+
+- [Learn HTML](/learn/html/)
+- [Learn CSS](/learn/css/)
+- [Learn Accessibility](/learn/accessibility/)
+- [Learn Responsive Design](/learn/design/)
+- [Learn Forms](/learn/forms/)
+- [Learn PWA](/learn/pwa/)
diff --git a/src/site/content/en/blog/lighthouse-ci/github-action1.png b/src/site/content/en/blog/lighthouse-ci/github-action1.png
deleted file mode 100644
index f9575f1cd6f..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/github-action1.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/github-action2.png b/src/site/content/en/blog/lighthouse-ci/github-action2.png
deleted file mode 100644
index 5c3f54632c8..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/github-action2.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/github-action3.png b/src/site/content/en/blog/lighthouse-ci/github-action3.png
deleted file mode 100644
index 5acfe3df7bb..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/github-action3.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/github-action4.png b/src/site/content/en/blog/lighthouse-ci/github-action4.png
deleted file mode 100644
index 860b6daff4c..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/github-action4.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/hero.png b/src/site/content/en/blog/lighthouse-ci/hero.png
deleted file mode 100644
index 027d0ceb6c4..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/index.md b/src/site/content/en/blog/lighthouse-ci/index.md
index 16b2cfe003e..840542e1cdf 100644
--- a/src/site/content/en/blog/lighthouse-ci/index.md
+++ b/src/site/content/en/blog/lighthouse-ci/index.md
@@ -6,12 +6,14 @@ authors:
 date: 2020-07-27
 description: |
   Learn how to setup Lighthouse CI and integrate it into developer workflows.
-hero: hero.png
+hero: image/admin/8q10N5o2xDA7YJKcefm5.png
 alt: Lighthouse CI displayed over a screenshot of Lighthouse CI server
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
   - lighthouse
+feedback:
+  - api
 ---
 
 [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) is a suite of
@@ -167,7 +169,7 @@ easiest way to make sure that your `lighthouserc.js` is configured correctly.
     [`target`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#target)
     property to the `ci.upload` object and set the value to
     `'temporary-public-storage'`. The Lighthouse report(s) collected by
-    Lighthouese CI will be uploaded to temporary public storage. The report will
+    Lighthouse CI will be uploaded to temporary public storage. The report will
     remain there for seven days and then be automatically deleted. This setup
     guide uses the "temporary public storage" upload option because it is quick
     to setup. For information on other ways of storing Lighthouse reports, refer
@@ -180,7 +182,7 @@ easiest way to make sure that your `lighthouserc.js` is configured correctly.
     }
     ```
 
-    The storage location of the report will be similar to this: 
+    The storage location of the report will be similar to this:
 
     ```text
     https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
@@ -222,7 +224,7 @@ easiest way to make sure that your `lighthouserc.js` is configured correctly.
 
     You can ignore the `GitHub token not set` message in the console output. A
     GitHub token is only necessary if you want to use Lighthouse CI with a GitHub
-    Action. How to setup a GitHub Action is explained later in this article. 
+    Action. How to setup a GitHub Action is explained later in this article.
 
     Clicking on the link in the output that begins with
     `https://storage.googleapis.com...` will take you to the Lighthouse report
@@ -234,7 +236,7 @@ easiest way to make sure that your `lighthouserc.js` is configured correctly.
     executes.
 
 8.  Update `lighthouserc.js` to use the `numberOfRuns` property:
-  
+
     ```js
     module.exports = {
         // ...
@@ -245,7 +247,7 @@ easiest way to make sure that your `lighthouserc.js` is configured correctly.
       },
     };
     ```
-    
+
 9.  Re-run the `autorun` command:
 
     ```shell
@@ -335,8 +337,8 @@ module.exports = {
 
 The console output that it generates looks like this:
 
-<figure class="w-figure">
-  <img src="./lhci-warning.png" alt="Screenshot of a warning message generated by Lighthouse CI" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/ti9NuzxPKZCYVIzjjddc.png", alt="Screenshot of a warning message generated by Lighthouse CI", width="800", height="431" %}
 </figure>
 
 For more information on Lighthouse CI assertions, refer to the
@@ -354,8 +356,8 @@ with a [status
 check](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks)
 to display these results on each pull request.
 
-<figure class="w-figure">
-  <img src="./github-action1.png" alt="Screenshot of a GitHub status check" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Screenshot of a GitHub status check", width="800", height="297" %}
 </figure>
 
 1.  In the root of your repository, create a directory named
@@ -371,13 +373,13 @@ to display these results on each pull request.
     ```
 
 2.  In `.github/workflows` create a file named `lighthouse-ci.yaml`. This file
-    will hold the configuration for a new workflow. 
+    will hold the configuration for a new workflow.
 
     ```shell
     touch lighthouse-ci.yaml
     ```
 
-3.  Add the following text to `lighthouse-ci.yaml`. 
+3.  Add the following text to `lighthouse-ci.yaml`.
 
     ```yaml
     name: Build project and run Lighthouse CI
@@ -418,16 +420,16 @@ to display these results on each pull request.
     **Build project and Run Lighthouse CI** workflow listed under your most
     recent commit.
 
-    <figure class="w-figure">
-      <img src="./github-action2.png" alt="Screenshot of the Github 'Settings' tab" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/ougavsYk6faiNidNxIGQ.png", alt="Screenshot of the GitHub 'Settings' tab", width="800", height="216" %}
     </figure>
 
     You can navigate to the Lighthouse report corresponding to a particular commit
     from the **Actions** tab. Click on the commit, click on the **Lighthouse CI**
     workflow step, then expand the results of the **run Lighthouse CI** step.
 
-    <figure class="w-figure">
-      <img src="./github-action3.png" alt="Screenshot of the Github 'Settings' tab" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/aJF6FVHGOPpGNxKB3LjY.png", alt="Screenshot of the GitHub 'Settings' tab", width="800", height="366" %}
     </figure>
 
     You've just set up a GitHub Action to run Lighthouse CI. This will be most
@@ -440,8 +442,8 @@ A status check, if configured, is a message that appears on every PR and
 typically includes information such as the results of a test or the success of a
 build.
 
-<figure class="w-figure">
-  <img src="./github-action1.png" alt="Screenshot of the Github 'Settings' tab" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Screenshot of the GitHub 'Settings' tab", width="800", height="297" %}
 </figure>
 
 The steps below explain how to set up a status check for Lighthouse CI.
@@ -461,17 +463,28 @@ The steps below explain how to set up a status check for Lighthouse CI.
 4.  Copy the token that is displayed. You'll use it in the next step.
 
 5.  To add the token, navigate to the **Settings** page of your GitHub
-    repository, click **Secrets**, then click **Add a new secret**. 
+    repository, click **Secrets**, then click **Add a new secret**.
 
-    <figure class="w-figure">
-      <img src="./github-action4.png" alt="Screenshot of the Github 'Settings' tab" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/ZYH9cOHehImZLI6vov1r.png", alt="Screenshot of the GitHub 'Settings' tab", width="800", height="375" %}
     </figure>
 
 6.  Set the **Name** field to `LHCI_GITHUB_APP_TOKEN` and set the **Value**
     field to the token that you copied in the last step and then click the **Add
     secret** button.
 
-7.  The status check is ready for use. To test it, [create a new pull
+7.  Go to the `lighthouse-ci.yaml` file and add the new environment secret to the "run Lighthouse CI" command.
+
+```diff
+          - name: run Lighthouse CI
+            run: |
+              npm install -g @lhci/cli@0.3.x
+              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
++            env:
++              LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+```
+
+8.  The status check is ready for use. To test it, [create a new pull
     request](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)
     or push a commit to an existing pull request.
 
@@ -482,12 +495,12 @@ The Lighthouse CI server provides a dashboard for exploring historical
 Lighthouse reporting. It can also act as a private, long-term datastore for
 Lighthouse reports.
 
-<figure class="w-figure">
-  <img src="./server1.png" alt="Screenshot of the Lighthouse CI Server dashboard" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/4xv6LLe6G48weVNl1CO1.png", alt="Screenshot of the Lighthouse CI Server dashboard", width="800", height="581" %}
 </figure>
 
-<figure class="w-figure">
-  <img src="./server2.png" alt="Screenshot of comparing two Lighthouse reports in Lighthouse CI Server" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/vp9hVBQGZk01fUMpIQ1Z.png", alt="Screenshot of comparing two Lighthouse reports in Lighthouse CI Server", width="800", height="556" %}
 </figure>
 
 1. Choose which commits to compare.
diff --git a/src/site/content/en/blog/lighthouse-ci/lhci-warning.png b/src/site/content/en/blog/lighthouse-ci/lhci-warning.png
deleted file mode 100644
index bee779cf53e..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/lhci-warning.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/server1.png b/src/site/content/en/blog/lighthouse-ci/server1.png
deleted file mode 100644
index 06809b1929f..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/server1.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-ci/server2.png b/src/site/content/en/blog/lighthouse-ci/server2.png
deleted file mode 100644
index 6435cced54c..00000000000
Binary files a/src/site/content/en/blog/lighthouse-ci/server2.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/index.md b/src/site/content/en/blog/lighthouse-evolution-cds-2019/index.md
index 32228604a6f..b0217d91a73 100755
--- a/src/site/content/en/blog/lighthouse-evolution-cds-2019/index.md
+++ b/src/site/content/en/blog/lighthouse-evolution-cds-2019/index.md
@@ -7,7 +7,7 @@ authors:
 date: 2019-12-16
 description: |
   Read about the latest Lighthouse updates announced at Chrome Developer Summit 2019.
-hero: lighthouse-logo.svg
+hero: image/admin/mQ77SlZ6Y8ailMClzaCs.svg
 alt: Lighthouse logo.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -17,7 +17,7 @@ tags:
 In the [Speed Tooling Evolutions](https://youtu.be/iaWLXf1FgI0) talk at Chrome
 Developer Summit (CDS), Paul Irish and I presented the newest products and
 features coming from Google that can help you build and maintain an exceptionally fast experience for all your users. At the center of that story
-are additions to the [Lighthouse](https://developers.google.com/web/tools/lighthouse) family of performance monitoring tools.
+are additions to the [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) family of performance monitoring tools.
 
 ## Lighthouse CI alpha release
 
@@ -31,9 +31,8 @@ server for visual diffing and basic category score history. Existing
 seamlessly alongside the new expressive syntax for asserting *any* Lighthouse
 audit or category result.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse-ci.png" alt="Lighthouse CI report."
-       width="400">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xvyxLU5J0bap6s0LdrD3.png", alt="Lighthouse CI report.", width="400", height="356" %}
 </figure>
 
 Lighthouse CI supports [Travis CI](https://travis-ci.com/), [Circle
@@ -49,16 +48,16 @@ to get started right away.
 
 Changes are coming to the Lighthouse Performance score version 6! In version 5
 (as of November 2019), Lighthouse has five metrics that are [weighted and
-blended](/performance-scoring/#weightings) to form the 0-100 Performance score:
-[First Contentful Paint](/fcp/), [Speed Index](/speed-index/), [First Meaningful
-Paint](/first-meaningful-paint/), [Time to Interactive](/interactive/), and
-[First CPU Idle](/first-cpu-idle/).
+blended](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/#weightings) to form the 0-100 Performance score:
+[First Contentful Paint](/fcp/), [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/), [First Meaningful
+Paint](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/), [Time to Interactive](/tti/), and
+[First CPU Idle](https://developer.chrome.com/docs/lighthouse/performance/first-cpu-idle/).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse-performance-score.png" alt="Comparison of Lighthouse performance score formulas in versions 5 and 6.">
+<figure>
+  {% Img src="image/admin/X0u1YQC63JaPfE0DWgz8.png", alt="Comparison of Lighthouse performance score formulas in versions 5 and 6.", width="800", height="211" %}
 </figure>
 
-See [Lighthouse performance scoring](https://web.dev/performance-scoring/) for detailed
+See [Lighthouse performance scoring](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) for detailed
 information.
 
 In Lighthouse version 6, new metrics, [Largest Contentful Paint (LCP)](/lcp/)
@@ -101,9 +100,8 @@ Packs](https://github.com/GoogleChrome/lighthouse-stack-packs) add customized
 recommendations, curated by community experts (like you!), on top of Lighthouse
 report core audits.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse-stack-packs.png"
-       alt="Lighthouse report recommendation for deferring offscreen images in React applications.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qdhyyYLFj0avPPHgx8in.png", alt="Lighthouse report recommendation for deferring offscreen images in React applications.", width="800", height="194" %}
 </figure>
 
 At the moment, there are Stack Packs for Angular, WordPress, Magento, React, and
@@ -113,8 +111,8 @@ or [contact the Lighthouse team](https://github.com/GoogleChrome/lighthouse-stac
 
 ## Coming soon: Lighthouse plugins as Chrome Extensions
 
-<figure class="w-figure">
-  <img src="./lighthouse-plugin-icon.png" alt="Lighthouse plugin icon." width="250">
+<figure>
+  {% Img src="image/admin/pPFz27fWWNVyT42ptr7a.png", alt="Lighthouse plugin icon.", width="250", height="220" %}
 </figure>
 
 [Lighthouse
@@ -130,9 +128,9 @@ only work in [Lighthouse
 CLI](https://developers.google.com/web/tools/lighthouse#cli), but the goal is to
 enable running them in the DevTools **Audits** panel too.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse-plugin-devtools.png" alt="Chrome DevTools Audits panel with options for running Lighthouse plugins for Google Publisher Ads and User Experience." width="400">
-  <figcaption class="w-figcaption">Community Plugins in DevTools Audits panel (beta)</figcaption>
+<figure>
+  {% Img src="image/admin/I6WOZkh3Wdbb6vk2sE4z.png", alt="Chrome DevTools Audits panel with options for running Lighthouse plugins for Google Publisher Ads and User Experience.", width="400", height="753" %}
+  <figcaption>Community Plugins in DevTools Audits panel (beta)</figcaption>
 </figure>
 
 When users install Lighthouse plugin extensions from the [Chrome Web
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-ci.png b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-ci.png
deleted file mode 100644
index c6f27a910b2..00000000000
Binary files a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-ci.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-logo.svg b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-logo.svg
deleted file mode 100644
index bebd38c136e..00000000000
--- a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="3200" height="960" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="49.994%" y1=".226%" x2="49.994%" y2="99.725%" id="c"><stop stop-color="#212121" stop-opacity=".04" offset="0%"/><stop stop-color="#212121" stop-opacity="0" offset="66%"/></linearGradient><linearGradient x1="36.626%" y1="20.358%" x2="64.01%" y2="100.652%" id="g"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="68.935%" y1="65.756%" x2="31.065%" y2="35.799%" id="h"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="62.531%" y1="13.086%" x2="24.779%" y2="100.996%" id="i"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="j"><stop stop-color="#262626" stop-opacity=".1" offset="0%"/><stop stop-color="#262626" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="49.994%" y1=".226%" x2="49.994%" y2="99.725%" id="m"><stop stop-color="#212121" stop-opacity=".04" offset="0%"/><stop stop-color="#212121" stop-opacity="0" offset="66%"/></linearGradient><path d="M36.833 10.833h-5.265C29.337 4.517 23.324 0 16.25 0 7.28 0 0 7.28 0 16.25 0 25.22 7.28 32.5 16.25 32.5h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" id="a"/><path d="M20.583 0H0v21.667h20.583c5.98 0 10.834-4.854 10.834-10.834C31.417 4.853 26.563 0 20.583 0z" id="d"/><path d="M42.5 12.5h-6.075C33.85 5.213 26.913 0 18.75 0 8.4 0 0 8.4 0 18.75S8.4 37.5 18.75 37.5H42.5C49.4 37.5 55 31.9 55 25s-5.6-12.5-12.5-12.5z" id="k"/><path d="M23.75 0H0v25h23.75c6.9 0 12.5-5.6 12.5-12.5S30.65 0 23.75 0z" id="n"/><radialGradient cx="10.128%" cy="14.269%" fx="10.128%" fy="14.269%" r="144.566%" gradientTransform="matrix(.68182 0 0 1 .032 0)" id="f"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="10.128%" cy="14.269%" fx="10.128%" fy="14.269%" r="144.566%" gradientTransform="matrix(.68182 0 0 1 .032 0)" id="p"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="14.489%" cy="14.584%" fx="14.489%" fy="14.584%" r="99.973%" id="q"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><path d="M0 0h192v192H0z"/><g transform="translate(8 8)"><circle fill="#0535C1" fill-rule="nonzero" cx="88" cy="88" r="88"/><path d="M107 40h52v52h-52z"/><g transform="translate(109.167 50.833)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M36.833 10.833h-5.265C29.337 4.517 23.324 0 16.25 0 7.28 0 0 7.28 0 16.25 0 25.22 7.28 32.5 16.25 32.5h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" fill="#EAEAEA" fill-rule="nonzero"/><path d="M47.667 21.797v-.13c0-5.98-4.854-10.834-10.834-10.834h-5.416v.271h5.416c5.937 0 10.758 4.778 10.834 10.693z" fill-opacity=".2" fill="#FFF" fill-rule="nonzero"/><path fill="url(#c)" fill-rule="nonzero" d="M53.246 32.5H16.25l15.33-21.667z"/><g transform="translate(16.25 10.833)"><mask id="e" fill="#fff"><use xlink:href="#d"/></mask><g mask="url(#e)"><g transform="translate(-3.25 -14.083)"><image opacity=".1" width="22.75" height="34.667" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAABGdBTUEAALGOfPtRkwAAA7ZJREFUSA2dlttvEkEYxdnlWqhQoEWrlRq1xqQv+qLP9f82fdamvmhjVBJbSnrjUtoCheWy/s6ERagsBSc5+WZnvzl75sxtrcDfYg2rXvTeuMOKF7123+gR2Nvb26FOpxNrt9uheDxuq0ez2XSXlpa6VDuFQqFHHIB7yUVqQRhuNBpZy7LyrutmiBHaA7Zt93i+5vksEonUer1eA3J9ROS+JcgbK5VKJej8EpIdCD4Q3xHf0rbN+01icjAYhLvdbn9jY8Mpl8t9X0ZeiNReX1+PO46zBdEOz+/BK7AJngq0PyZmg8GgjVpnbW2tl06n+7VaTVb8Y4dRmsvlYpDmUfgGVVvEVZITQzwQIVBbkvcRIPJeLBZz8F2qJ4hFGmD4YUIaPENVnpgEIaAJU04MLAP5nQNpMED5FapbKJ7w2ChNJpPkWB6xhi1VmiwzkUSR6yNSn0HpCqNxQQXiy2q12qF9pNYordfrLh7ZTEaaxOckyMM4MEuLqKIPBPl4lCgMIL8ElVAo1Gi1WlpyhtiQ8mBlMhl1kH+anCdAdTMSolc85VIdIt8FN1KLDU3PBo9UvgZIULK8vWuBR6ooYptc2SPFXUgvwuFwrVKpGBtGpHNaAIcpxgpqEqENUsa602w2eyO1455pKG08LZN0QnIdaPeMJoD6eFFfrYg8/V7T5xF1KZ+YCJevSf45+DWME7NK23iR2jBkWn4P6ZtkwrSCrAmlh4eHUlYn4YSvl6m3gZ9SXmkarDCIKtJPH5pQqudFLQig1Cimb5QJM0pHEyVGlQVWgclHodan/C/2+/3SysrKzfjwleT+hwVaWtq6LxTxNXKX1BCTMO8qINXSaLX7UlgR51APTiVdYBXA4+qUakJeB63b29v+VNIFLND+b0J6DH5AekbsTCOlfa5VoKXWhagKcUHQlaO7zJfUs0DJdL4ADhgvOkMb4Ihd+BXyIy5NqZ7YpuMdzCrgZL+mUTvsCvLxLSvCFjgF38FPVFaHtrk6EPwKPK6DiiZRChzUyEMN+xaUeN4nfuJm+U2eVJsbYCYpyV04rkg+h+Caeoq6ZrsE9njeBV+Y8YtisTgaiZ+n9OFM4+YkyE/5egqxTnrN9B74iO97iUSixJUt5aN7SgvXt4ydsSkI10mUym/Ud0W4vLx8fHBwIEK1j8pMUrKs1dVVG3UxPNMxp4n5DPYhLE0jFPMsT/XejUajbf5MdFjo2giisMyQK36E6mTOP1VmFPPzxvsIHluQO/f9T81Dqu/dzZt1cAf+AMymEnybyIybAAAAAElFTkSuQmCC"/><path d="M3.25 3.25l8.786 27.744C14.972 28.047 19.5 23.985 19.5 19.5c0-8.97-7.28-16.25-16.25-16.25z" fill="#E1E1E1" fill-rule="nonzero"/></g></g></g><circle fill="#EEE" fill-rule="nonzero" cx="16.25" cy="16.25" r="16.25"/><path d="M16.25.27c8.927 0 16.174 7.205 16.25 16.12v-.13C32.5 7.29 25.22.01 16.25.01 7.28.01 0 7.28 0 16.25v.13C.076 7.475 7.323.27 16.25.27z" fill-opacity=".2" fill="#FFF" fill-rule="nonzero"/><path d="M36.833 32.23H16.25C7.323 32.23.076 25.024 0 16.11v.13c0 8.97 7.28 16.25 16.25 16.25h20.583c5.98 0 10.834-4.854 10.834-10.834v-.13c-.076 5.926-4.897 10.703-10.834 10.703z" fill-opacity=".1" fill="#212121" fill-rule="nonzero"/></g></g><path d="M36.833 10.833h-5.265C29.337 4.517 23.324 0 16.25 0 7.28 0 0 7.28 0 16.25 0 25.22 7.28 32.5 16.25 32.5h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" fill="url(#f)" fill-rule="nonzero" transform="translate(109.167 50.833)"/><path fill="#FFF176" d="M64 37h46v40H64z"/><path fill="#FFF" d="M59 98h55v55H59z"/><path d="M120 73h8v16H48V73h8V41l32-20 32 20v32zm-16 0V49.868l-16-10-16 10V73h32z" fill="#F4481E" fill-rule="nonzero"/><path d="M44.447 164.484L58 73h60l13.553 91.484C118.711 171.813 103.845 176 88 176c-15.845 0-30.711-4.187-43.553-11.516zm61.467-63.883l-37.64 12.23-4.575 30.878 46.37-15.067-4.155-28.041z" fill="#F4481E" fill-rule="nonzero"/><path d="M119.924 89l11.182 75.484C118.264 171.813 103.398 176 87.553 176c-15.844 0-30.71-4.187-43.553-11.516L55.183 89H48V73h8V41l32-20 32 20v32h8v16h-8.076z" fill="url(#g)" fill-rule="nonzero"/><path fill="url(#h)" fill-rule="nonzero" d="M88 73H56V41l32-20z"/><path d="M88 176a87.93 87.93 0 01-43.553-11.516L54.474 89H88v87z" fill="url(#i)" fill-rule="nonzero"/><path fill="url(#j)" fill-rule="nonzero" transform="matrix(-1 0 0 1 136 0)" d="M48 73h40v16H48z"/><path d="M19 57h60v60H19z"/><g transform="translate(21.5 69.5)"><mask id="l" fill="#fff"><use xlink:href="#k"/></mask><g mask="url(#l)"><path d="M42.5 12.5h-6.075C33.85 5.213 26.913 0 18.75 0 8.4 0 0 8.4 0 18.75S8.4 37.5 18.75 37.5H42.5C49.4 37.5 55 31.9 55 25s-5.6-12.5-12.5-12.5z" fill="#FAFAFA" fill-rule="nonzero"/><path d="M55 25.15V25c0-6.9-5.6-12.5-12.5-12.5h-6.25v.313h6.25c6.85 0 12.413 5.512 12.5 12.337z" fill-opacity=".2" fill="#FFF" fill-rule="nonzero"/><path fill="url(#m)" fill-rule="nonzero" d="M61.438 37.5H18.75l17.688-25z"/><g transform="translate(18.75 12.5)"><mask id="o" fill="#fff"><use xlink:href="#n"/></mask><g mask="url(#o)"><g transform="translate(-3.75 -16.25)"><image opacity=".1" width="26.25" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAABGdBTUEAALGOfPtRkwAAA7ZJREFUSA2dlttvEkEYxdnlWqhQoEWrlRq1xqQv+qLP9f82fdamvmhjVBJbSnrjUtoCheWy/s6ERagsBSc5+WZnvzl75sxtrcDfYg2rXvTeuMOKF7123+gR2Nvb26FOpxNrt9uheDxuq0ez2XSXlpa6VDuFQqFHHIB7yUVqQRhuNBpZy7LyrutmiBHaA7Zt93i+5vksEonUer1eA3J9ROS+JcgbK5VKJej8EpIdCD4Q3xHf0rbN+01icjAYhLvdbn9jY8Mpl8t9X0ZeiNReX1+PO46zBdEOz+/BK7AJngq0PyZmg8GgjVpnbW2tl06n+7VaTVb8Y4dRmsvlYpDmUfgGVVvEVZITQzwQIVBbkvcRIPJeLBZz8F2qJ4hFGmD4YUIaPENVnpgEIaAJU04MLAP5nQNpMED5FapbKJ7w2ChNJpPkWB6xhi1VmiwzkUSR6yNSn0HpCqNxQQXiy2q12qF9pNYordfrLh7ZTEaaxOckyMM4MEuLqKIPBPl4lCgMIL8ElVAo1Gi1WlpyhtiQ8mBlMhl1kH+anCdAdTMSolc85VIdIt8FN1KLDU3PBo9UvgZIULK8vWuBR6ooYptc2SPFXUgvwuFwrVKpGBtGpHNaAIcpxgpqEqENUsa602w2eyO1455pKG08LZN0QnIdaPeMJoD6eFFfrYg8/V7T5xF1KZ+YCJevSf45+DWME7NK23iR2jBkWn4P6ZtkwrSCrAmlh4eHUlYn4YSvl6m3gZ9SXmkarDCIKtJPH5pQqudFLQig1Cimb5QJM0pHEyVGlQVWgclHodan/C/2+/3SysrKzfjwleT+hwVaWtq6LxTxNXKX1BCTMO8qINXSaLX7UlgR51APTiVdYBXA4+qUakJeB63b29v+VNIFLND+b0J6DH5AekbsTCOlfa5VoKXWhagKcUHQlaO7zJfUs0DJdL4ADhgvOkMb4Ihd+BXyIy5NqZ7YpuMdzCrgZL+mUTvsCvLxLSvCFjgF38FPVFaHtrk6EPwKPK6DiiZRChzUyEMN+xaUeN4nfuJm+U2eVJsbYCYpyV04rkg+h+Caeoq6ZrsE9njeBV+Y8YtisTgaiZ+n9OFM4+YkyE/5egqxTnrN9B74iO97iUSixJUt5aN7SgvXt4ydsSkI10mUym/Ud0W4vLx8fHBwIEK1j8pMUrKs1dVVG3UxPNMxp4n5DPYhLE0jFPMsT/XejUajbf5MdFjo2giisMyQK36E6mTOP1VmFPPzxvsIHluQO/f9T81Dqu/dzZt1cAf+AMymEnybyIybAAAAAElFTkSuQmCC"/><path d="M3.75 3.75l10.137 32.013c3.388-3.4 8.613-8.088 8.613-13.263 0-10.35-8.4-18.75-18.75-18.75z" fill="#E1E1E1" fill-rule="nonzero"/></g></g></g><circle fill="#FFF" fill-rule="nonzero" cx="18.75" cy="18.75" r="18.75"/><path d="M18.75.313c10.3 0 18.663 8.312 18.75 18.6v-.15c0-10.35-8.4-18.75-18.75-18.75S0 8.4 0 18.75v.15C.087 8.625 8.45.313 18.75.313z" fill-opacity=".2" fill="#FFF" fill-rule="nonzero"/><path d="M42.5 37.188H18.75c-10.3 0-18.663-8.313-18.75-18.6v.15c0 10.35 8.4 18.75 18.75 18.75H42.5c6.9 0 12.5-5.6 12.5-12.5v-.15c-.087 6.837-5.65 12.35-12.5 12.35z" fill-opacity=".1" fill="#212121" fill-rule="nonzero"/></g></g><path d="M42.5 12.5h-6.075C33.85 5.213 26.913 0 18.75 0 8.4 0 0 8.4 0 18.75S8.4 37.5 18.75 37.5H42.5C49.4 37.5 55 31.9 55 25s-5.6-12.5-12.5-12.5z" fill="url(#p)" fill-rule="nonzero" transform="translate(21.5 69.5)"/><g fill-opacity=".1" fill-rule="nonzero"><path d="M88 .92c48.45 0 87.74 39.15 87.99 87.54 0-.15.01-.3.01-.46 0-48.6-39.4-88-88-88S0 39.4 0 88c0 .15.01.3.01.46C.26 40.07 39.55.92 88 .92z" fill="#FFF"/><path d="M175.99 87.54c-.25 48.39-39.54 87.54-87.99 87.54-48.45 0-87.74-39.15-87.99-87.54 0 .16-.01.31-.01.46 0 48.6 39.4 88 88 88s88-39.4 88-88c0-.15-.01-.3-.01-.46z" fill="#263238"/></g><circle fill="url(#q)" fill-rule="nonzero" cx="88" cy="88" r="88"/></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-performance-score.png b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-performance-score.png
deleted file mode 100644
index 65ce0fbbefe..00000000000
Binary files a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-performance-score.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-devtools.png b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-devtools.png
deleted file mode 100644
index 8b75cc302d0..00000000000
Binary files a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-icon.png b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-icon.png
deleted file mode 100644
index be95ff3d9fa..00000000000
Binary files a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-plugin-icon.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-stack-packs.png b/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-stack-packs.png
deleted file mode 100644
index 4688db4e8d7..00000000000
Binary files a/src/site/content/en/blog/lighthouse-evolution-cds-2019/lighthouse-stack-packs.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-user-flows/index.md b/src/site/content/en/blog/lighthouse-user-flows/index.md
new file mode 100644
index 00000000000..098249d789e
--- /dev/null
+++ b/src/site/content/en/blog/lighthouse-user-flows/index.md
@@ -0,0 +1,267 @@
+---
+title: 'Lighthouse user flows'
+subhead: Try out a new Lighthouse API to measure performance and best practices throughout a user flow.
+description: Try out a new Lighthouse API to measure performance and best practices throughout a user flow.
+authors:
+  - bckenny
+date: 2021-11-03
+hero: image/MtjnObpuceYe3ijODN3a79WrxLU2/NbfbZ81Sx2ZlFvRwTiBV.png
+alt: A Lighthouse user-flow-report summary
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+  - lighthouse
+---
+
+Lighthouse is a fantastic tool for testing performance and best practices during initial page load. However, it's traditionally been difficult to use Lighthouse to analyze other aspects of the life of a page, such as:
+
+- Page loads with a warm cache
+- Pages with an activated Service Worker
+- Accounting for potential user interactions
+
+This means that Lighthouse can miss vital information. The [Core Web Vitals](/vitals/#core-web-vitals) are based on _all_ page loads, not just those with an empty cache. Additionally, metrics like [Cumulative Layout Shift (CLS)](/cls/) are measurable for the entire time a page is open.
+
+Lighthouse has a new user flow API that allows lab testing at any point within a page's lifespan. [Puppeteer](https://github.com/puppeteer/puppeteer) is used to script page loads and trigger synthetic user interactions, and Lighthouse can be invoked in multiple ways to capture key insights during those interactions. This means that performance can be measured during page load *and* during interactions with the page. Accessibility checks can be run in CI, not just on the initial view but deep within your checkout flow to make sure nothing regresses.
+
+Almost any Puppeteer script written to ensure a working user flow can now have Lighthouse inserted at any point to measure performance and best practices throughout. This tutorial will walk through the new Lighthouse modes that can measure different parts of user flows: navigations, snapshots, and timespans.
+
+## Setup
+
+The user flow APIs are still in preview, but they are available in Lighthouse today. To try out the demos below, you'll need Node version 14 or later. Create an empty directory and in it run:
+
+```shell
+# Default to ES modules.
+echo '{"type": "module"}' > package.json
+
+# Init npm project without the wizard.
+npm init -y
+
+# Dependencies for these examples.
+npm install lighthouse puppeteer open
+```
+
+{% Aside 'gotchas' %}
+Without the `{"type": "module"}` line, `npm init -y` will default to CommonJS instead of modules. The following code can still be used, but you will have to switch to `require()` instead of `import` to bring in dependencies.
+{% endAside %}
+
+## Navigations
+
+The new Lighthouse "navigation" mode is actually giving a name to the (up until now) standard Lighthouse behavior: analyze the cold load of a page. This is the mode to use to monitor page load performance, but user flows also open up the possibility of new insights.
+
+To script Lighthouse capturing a page load:
+
+1. Use puppeteer to open the browser.
+2. Start a Lighthouse user flow.
+3. Navigate to the target URL.
+
+```js
+import fs from 'fs';
+import open from 'open';
+import puppeteer from 'puppeteer';
+import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
+
+async function captureReport() {
+  const browser = await puppeteer.launch({headless: false});
+  const page = await browser.newPage();
+
+  const flow = await startFlow(page, {name: 'Single Navigation'});
+  await flow.navigate('https://web.dev/performance-scoring/');
+
+  await browser.close();
+
+  const report = await flow.generateReport();
+  fs.writeFileSync('flow.report.html', report);
+  open('flow.report.html', {wait: false});
+}
+
+captureReport();
+```
+
+This is the simplest flow. When opened, the report shows a summary view with only the single step. Clicking on that step will reveal a traditional Lighthouse report for that navigation.
+
+<figure>
+  {% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/kb0RiS8uXSLoDq8nDlxa.png", alt="A Lighthouse flow report showing a single navigation", width="800", height="333" %}
+  <figcaption><a href="https://chalk-confused-roundworm.glitch.me">See the report live</a></figcaption>
+</figure>
+
+As is typical with Lighthouse, this page is loaded with any cache or local storage cleared first, but real users visiting a site will have a mixture of visits with cold and warm caches, and there can be a large performance difference between a cold load like this and a user returning to the page with a still-warm cache.
+
+### Capturing a warm load
+
+You can also add a second navigation to this script, this time disabling the clearing of cache and storage that Lighthouse does by default in navigations. This next example loads an article on web.dev itself to see how much it benefits from caching:
+
+```js
+async function captureReport() {
+  const browser = await puppeteer.launch({headless: false});
+  const page = await browser.newPage();
+
+  const testUrl = 'https://web.dev/performance-scoring/';
+  const flow = await startFlow(page, {name: 'Cold and warm navigations'});
+  await flow.navigate(testUrl, {
+    stepName: 'Cold navigation'
+  });
+  await flow.navigate(testUrl, {
+    stepName: 'Warm navigation',
+    configContext: {
+      settingsOverrides: {disableStorageReset: true},
+    },
+  });
+
+  await browser.close();
+
+  const report = await flow.generateReport();
+  fs.writeFileSync('flow.report.html', report);
+  open('flow.report.html', {wait: false});
+}
+
+captureReport();
+```
+
+The resulting flow report looks something like this:
+
+<figure>
+  {% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/4i28YDRuSaCxxJxtzigX.png", alt="A Lighthouse flow report showing two navigations, one cold and one warm, which has a higher performance score", width="800", height="400" %}
+  <figcaption><a href="https://energetic-pattern-polish.glitch.me">See the report live</a></figcaption>
+</figure>
+
+The combination of cold and warm loads offers a fuller picture of what real users are experiencing. If you have a site where users load many pages in the same visit, this may be able to give you a more realistic look at what they're experiencing in the field.
+
+## Snapshots
+
+Snapshots are a new mode that runs Lighthouse audits at a single point in time. Unlike a normal Lighthouse run, the page is not reloaded. This unlocks the ability to set up a page and test it in its exact state: with a drop-down open or a form partially filled in, for example.
+
+{% Aside %}
+Not all Lighthouse audits can be run in this mode. Many of the performance metrics are currently defined as beginning with a page load and so are not applicable in a snapshot, but the accessibility audits and many of the performance best practices can still yield important checks.
+{% endAside %}
+
+For this example, suppose you want to check that some new UI for Advanced Settings within [Squoosh](https://squoosh.app/) passes the automated Lighthouse checks. These settings are only visible if an image has been loaded and the options menu is expanded to show the advanced settings.
+
+<figure>
+{% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/2AJz5ievB1sBVcnivsqT.png", alt="The Squoosh advanced settings menu", width="399", height="515" %}
+  <figcaption>The Squoosh advanced settings menu</figcaption>
+</figure>
+
+This process is scriptable with Puppeteer and you can actually take a Lighthouse snapshot at each step:
+
+```js
+async function captureReport() {
+  const browser = await puppeteer.launch({headless: false});
+  const page = await browser.newPage();
+
+  const flow = await startFlow(page, {name: 'Squoosh snapshots'});
+
+  await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});
+
+  // Wait for first demo-image button, then open it.
+  const demoImageSelector = 'ul[class*="demos"] button';
+  await page.waitForSelector(demoImageSelector);
+  await flow.snapshot({stepName: 'Page loaded'});
+  await page.click(demoImageSelector);
+
+  // Wait for advanced settings button in UI, then open them.
+  const advancedSettingsSelector = 'form label[class*="option-reveal"]';
+  await page.waitForSelector(advancedSettingsSelector);
+  await flow.snapshot({stepName: 'Demo loaded'});
+  await page.click(advancedSettingsSelector);
+
+  await flow.snapshot({stepName: 'Advanced settings opened'});
+
+  browser.close();
+
+  const report = await flow.generateReport();
+  fs.writeFileSync('flow.report.html', report);
+  open('flow.report.html', {wait: false});
+}
+
+captureReport();
+```
+
+The resulting report shows that results are generally good, but there may be some accessibility criteria that need to be checked out manually:
+
+<figure>
+  {% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/4OnCFHNkZtIpNsLSw0e3.png", alt="A Lighthouse flow report showing a set of snapshots taken", width="800", height="433" %}
+  <figcaption><a href="https://ivy-cloudy-blackcurrant.glitch.me">See the report live</a></figcaption>
+</figure>
+
+## Timespans
+
+One of the biggest differences between performance results [in the field](/user-centric-performance-metrics/#in-the-field) (like from CrUX) and [in the lab](/user-centric-performance-metrics/#in-the-lab) (like from Lighthouse) is the lack of user input. This is where a timespan—the last user flow mode—can help.
+
+A timespan runs Lighthouse audits over some period of time, which may or may not include a navigation. This is a great way to capture what's going on with a page during interactions.  For instance, by default Lighthouse measures CLS during page load, but in the field, CLS is measured from initial navigation until the page is closed. If user interactions are the trigger of CLS, this is something Lighthouse previously wouldn't be able to catch and help fix.
+
+To demonstrate this, here is a [test site](https://pie-charmed-treatment.glitch.me) that simulates ads being injected into an article during scroll without space having been reserved for them. In a long series of cards, an occasional red square is added when its slot enters the viewport. Since space was not reserved for these red squares, the cards below them are shifted out of the way, causing layout shifts.
+
+A regular Lighthouse navigation will have a CLS of 0. However, once scrolled, the page will have problematic layout shifts and the CLS value will rise.
+
+<figure>
+  {% Video src="video/MtjnObpuceYe3ijODN3a79WrxLU2/Qi6B5SNt6Xk7rZ3055DO.mov", muted="true", width="360", height="640", controls="true" %}
+  <figcaption><a href="https://pie-charmed-treatment.glitch.me">Try the demo site</a></figcaption>
+</figure>
+
+The following script will produce a user flow report with both actions, to show the difference.
+
+```js
+async function captureReport() {
+  const browser = await puppeteer.launch({headless: false});
+  const page = await browser.newPage();
+  // Get a session handle to be able to send protocol commands to the page.
+  const session = await page.target().createCDPSession();
+
+  const testUrl = 'https://pie-charmed-treatment.glitch.me/';
+  const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});
+
+  // Regular Lighthouse navigation.
+  await flow.navigate(testUrl, {stepName: 'Navigate only'});
+
+  // Navigate and scroll timespan.
+  await flow.startTimespan({stepName: 'Navigate and scroll'});
+  await page.goto(testUrl, {waitUntil: 'networkidle0'});
+  // We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
+  // https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
+  await session.send('Input.synthesizeScrollGesture', {
+    x: 100,
+    y: 0,
+    yDistance: -2500,
+    speed: 1000,
+    repeatCount: 2,
+    repeatDelayMs: 250,
+  });
+  await flow.endTimespan();
+
+  await browser.close();
+
+  const report = await flow.generateReport();
+  fs.writeFileSync('flow.report.html', report);
+  open('flow.report.html', {wait: false});
+}
+
+captureReport();
+```
+
+This generates a report comparing a regular navigation to a timespan which contains both a navigation and scrolling afterwards:
+
+<figure>
+  {% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/wAkMF4T9IxpS82vODMdY.png", alt="A Lighthouse flow report showing a set of snapshots taken", width="800", height="367" %}
+  <figcaption><a href="https://abaft-burnt-title.glitch.me">See the report live</a></figcaption>
+</figure>
+
+Digging into each step, the navigation-only step shows a CLS of 0. Great site!
+
+<figure>
+{% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/ZAKscmqryi5KVWOMiB5y.png", alt="The Lighthouse report covering only page navigation with all green metrics", width="400", height="364" %}
+</figure>
+
+However the "Navigate and scroll" step tells a different story. Currently only Total Blocking Time and Cumulative Layout Shift are available in timespans, but the lazy-loaded content on this page clearly tanks the CLS for the site.
+
+<figure>
+{% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/8tCyVELstYqtDFX3TunI.png", alt="The Lighthouse report covering page navigation and scrolling with a failing CLS", width="400", height="305" %}
+</figure>
+
+Formerly, Lighthouse would not be able to identify this problematic CLS behavior, though it would almost certainly show up in the experience of real users. Performance testing over scripted interactions improves lab fidelity significantly.
+
+## Looking for feedback
+
+The new user flow APIs in Lighthouse can do many new things, but it may still be complicated to measure the kind of scenarios your users encounter.
+
+Please reach out with any questions in the Lighthouse [discussion forums](https://github.com/GoogleChrome/lighthouse/discussions), and file any bugs or suggestions in the [issue tracker](https://github.com/GoogleChrome/lighthouse/issues).
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/index.md b/src/site/content/en/blog/lighthouse-whats-new-6.0/index.md
index 868f4d904f9..09cabd85e64 100644
--- a/src/site/content/en/blog/lighthouse-whats-new-6.0/index.md
+++ b/src/site/content/en/blog/lighthouse-whats-new-6.0/index.md
@@ -1,10 +1,11 @@
 ---
+layout: post
 title: "What's New in Lighthouse 6.0"
 subhead: New metrics, Performance score update, new audits, and more.
 authors:
   - cjamcl
 date: 2020-05-19
-hero: lighthouse-logo.svg
+hero: image/admin/93kZL2w49CLIc514qojJ.svg
 alt: Lighthouse logo.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -19,14 +20,14 @@ helps developers with opportunities and diagnostics to improve the user experien
 It's available in Chrome DevTools, npm (as a Node module and a CLI), or as a browser extension (in
 [Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) and
 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)). It powers many Google
-services, including [web.dev/measure](https://web.dev/measure/) and [PageSpeed
-Insights](https://developers.google.com/speed/pagespeed/insights/).
+services, including [web.dev/measure](/measure/) and [PageSpeed
+Insights](https://pagespeed.web.dev/).
 
 Lighthouse 6.0 is available immediately on npm and in [Chrome
 Canary](https://www.google.com/chrome/canary/). Other Google services that leverage Lighthouse will
 get the update by the end of the month. It will land in Chrome Stable in Chrome 84 (mid-July).
 
-To try the Lighthouse Node CLI, use the following commands:  
+To try the Lighthouse Node CLI, use the following commands:
 ```bash
 npm install -g lighthouse
 lighthouse https://www.example.com --view
@@ -50,13 +51,13 @@ the highlights in this article.
 
 ## New metrics {: #new-metrics }
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lighthouse-new-metrics.png" alt="Lighthouse 6.0 metrics." width="600">
+<figure>
+  {% Img src="image/admin/Yo1oNtdfEF4PhD7zHDHQ.png", alt="Lighthouse 6.0 metrics.", width="600", height="251" %}
 </figure>
 
 Lighthouse 6.0 introduces three new metrics to the report. Two of these new metrics–Largest
 Contentful Paint (LCP) and Cumulative Layout Shift (CLS)–are lab implementations of [Core Web
-Vitals](https://web.dev/vitals/).
+Vitals](/vitals/).
 
 ### Largest Contentful Paint (LCP) {: #lcp }
 
@@ -89,12 +90,12 @@ TBT measures the total amount of time between First Contentful Paint (FCP) and T
 (TTI). It is a companion metric to TTI and it brings more nuance to quantifying main thread activity
 that blocks a user's ability to interact with your page.
 
-Additionally, TBT correlates well with the field metric [First Input Delay](https://web.dev/fid/)
+Additionally, TBT correlates well with the field metric [First Input Delay](/fid/)
 (FID), which is a Core Web Vital.
 
 ## Performance score update  {: #score }
 
-The [performance score in Lighthouse](https://web.dev/performance-scoring/) is calculated from a
+The [performance score in Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) is calculated from a
 weighted blend of multiple metrics to summarize a page's speed. The 6.0 performance score formula
 follows.
 
@@ -197,7 +198,7 @@ For comparison, here is version 5 scoring:
 </tbody>
 </table>
 
-![Lighthouse scoring changes between versions 5 and 6.](lighthouse-weight-changes.png)
+{% Img src="image/admin/gJnkac5fOfjOvmeLXdPO.png", alt="Lighthouse scoring changes between versions 5 and 6.", width="800", height="165" %}
 
 Some highlights of scoring changes between Lighthouse versions 5 and 6:
 
@@ -245,7 +246,7 @@ performance score. While the average performance score of the test corpus in ver
 Bug fixes to the underlying metric computation can result in different scores. This affects
 relatively few sites but can have sizable impact in certain situations. Overall, about 8% of sites
 experienced a score improvement due to metric implementation changes and about 4% of sites saw a score
-decrease due to metric implementation changes. Approximately 88% of sites were unaffected by these fixes. 
+decrease due to metric implementation changes. Approximately 88% of sites were unaffected by these fixes.
 
 Individual score curve changes also impacted the overall score shifts although very slightly. We
 periodically ensure that the score curve aligns with the observed metrics in the [HTTPArchive
@@ -260,9 +261,9 @@ you explore performance scoring. The calculator also gives you a comparison betw
 6 scores. When you run an audit with Lighthouse 6.0, the report comes with a link to the calculator
 with your results populated.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lighthouse-scorecalc.png" alt="Lighthouse Score Calculator." width="600">
-  <figcaption class="w-figcaption">Huge thanks to <a href="https://twitter.com/anatudor">Ana Tudor</a> for the gauge upgrade!</figcaption>
+<figure>
+  {% Img src="image/admin/N8cRFUnM526m3fB4GQVf.png", alt="Lighthouse Score Calculator.", width="600", height="319" %}
+  <figcaption>Huge thanks to <a href="https://twitter.com/anatudor">Ana Tudor</a> for the gauge upgrade!</figcaption>
 </figure>
 
 ## New audits {: #new-audits }
@@ -270,8 +271,8 @@ with your results populated.
 ### Unused JavaScript {: #unused-javascript }
 
 We are leveraging [DevTools code
-coverage](https://developers.google.com/web/tools/chrome-devtools/coverage) in a new audit: [**Unused
-JavaScript**](https://web.dev/remove-unused-code/).
+coverage](https://developer.chrome.com/docs/devtools/coverage/) in a new audit: [**Unused
+JavaScript**](/remove-unused-code/).
 
 This audit isn't _entirely_ new: it was [added in
 mid-2017](https://github.com/GoogleChrome/lighthouse/issues/1852#issuecomment-306900595), but
@@ -284,24 +285,24 @@ it by default.
 Lighthouse uses the wonderful [axe-core](https://github.com/dequelabs/axe-core) library to power the
 accessibility category. In Lighthouse 6.0, we've added the following audits:
 
--  [aria-hidden-body](https://web.dev/aria-hidden-body/)
--  [aria-hidden-focus](https://web.dev/aria-hidden-focus/)
--  [aria-input-field-name](https://web.dev/aria-input-field-name/)
--  [aria-toggle-field-name](https://web.dev/aria-toggle-field-name/)
--  [form-field-multiple-labels](https://web.dev/form-field-multiple-labels/)
--  [heading-order](https://web.dev/heading-order/)
--  [duplicate-id-active](https://web.dev/duplicate-id-active/)
--  [duplicate-id-aria](https://web.dev/duplicate-id-aria/)
+-  [aria-hidden-body](/aria-hidden-body/)
+-  [aria-hidden-focus](/aria-hidden-focus/)
+-  [aria-input-field-name](/aria-input-field-name/)
+-  [aria-toggle-field-name](/aria-toggle-field-name/)
+-  [form-field-multiple-labels](/form-field-multiple-labels/)
+-  [heading-order](/heading-order/)
+-  [duplicate-id-active](/duplicate-id-active/)
+-  [duplicate-id-aria](/duplicate-id-aria/)
 
 ### Maskable icon {: #maskable-icon }
 
-[Maskable icons](https://web.dev/maskable-icon/) is a new icon format that makes icons for your PWA
+[Maskable icons](/maskable-icon/) is a new icon format that makes icons for your PWA
 look great across all types of devices. To help your PWA look as good as possible, we've introduced
 a new audit to check if your manifest.json supports this new format.
 
 ### Charset declaration {: #charset }
 
-The [meta charset element](https://web.dev/charset/) declares what character encoding should be used
+The [meta charset element](https://developer.chrome.com/docs/lighthouse/best-practices/charset/) declares what character encoding should be used
 to interpret an HTML document. If this element is missing, or if it is declared late in the
 document, browsers employ a number of heuristics to guess which encoding should be used. If a
 browser guesses incorrectly, and a late meta charset element is found, the parser generally throws
@@ -310,11 +311,11 @@ audit verifies the page has a valid character encoding and it's defined early an
 
 ## Lighthouse CI {: #ci }
 
-At [CDS last November](https://web.dev/lighthouse-evolution-cds-2019/#lighthouse-ci-alpha-release)
+At [CDS last November](/lighthouse-evolution-cds-2019/#lighthouse-ci-alpha-release)
 we announced [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci), the open source Node
 CLI and server that tracks Lighthouse results on every commit in your continuous integration
-pipeline, and we've come a long way since the alpha release. Lighthouse CI now has native support
-for numerous CI providers including Travis, Circle, GitLab, and Github Actions. Ready-to-deploy
+pipeline, and we've come a long way since the alpha release. Lighthouse CI now has support
+for numerous CI providers including Travis, Circle, GitLab, and GitHub Actions. Ready-to-deploy
 [docker images](https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs/recipes) make setup a
 breeze, and a comprehensive dashboard redesign now reveals trends across every category and metric
 in Lighthouse for detailed analysis.
@@ -322,28 +323,16 @@ in Lighthouse for detailed analysis.
 Start using Lighthouse CI on your project today by following our
 [getting started guide](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md).
 
-<style>
-@media (min-width: 865px) {
-  .w-figure--inline-left {
-    margin: 0 20px 40px 0;
-  }
-}
-</style>
-
-<figure class="w-figure w-figure--inline-left">
-  <a href="lighthouse-ci-1.png" target="_blank">
-    <img class="w-screenshot" src="lighthouse-ci-1.png" alt="Lighthouse CI." width="600">
-  </a>
+<figure data-float="left">
+  {% Img src="image/admin/sXnTzewqGuc84MOCzFJe.png", alt="Lighthouse CI.", width="600", height="413", linkTo=true %}
 </figure>
-<figure class="w-figure w-figure--inline-left">
-  <a href="lighthouse-ci-2.png" target="_blank">
-    <img class="w-screenshot" src="lighthouse-ci-2.png" alt="Lighthouse CI." width="600">
-  </a>
+
+<figure data-float="left">
+  {% Img src="image/admin/uGT7AUJEQeqK1vlKySLb.png", alt="Lighthouse CI.", width="600", height="412", linkTo=true %}
 </figure>
-<figure class="w-figure">
-  <a href="lighthouse-ci-3.png" target="_blank">
-    <img class="w-screenshot" src="lighthouse-ci-3.png" alt="Lighthouse CI." width="600">
-  </a>
+
+<figure>
+  {% Img src="image/admin/ZR48KZebW43eyAvB1RkT.png", alt="Lighthouse CI.", width="600", height="354", linkTo=true %}
 </figure>
 
 ## Renamed Chrome DevTools panel {: #devtools }
@@ -354,7 +343,7 @@ Depending on your DevTools window size, the panel is probably behind the `»` bu
 the tab to change the order.
 
 To quickly reveal the panel with the [Command
-menu](https://developers.google.com/web/tools/chrome-devtools/command-menu): 
+menu](https://developer.chrome.com/docs/devtools/command-menu/):
 
 1. {% Instruction 'devtools', 'none' %}
 1. {% Instruction 'devtools-command', 'none' %}
@@ -382,10 +371,8 @@ but here are all the changes detectable by a webpage:
 
 As of Chrome 81, Moto G4 is also available in the Chrome DevTools device emulation list.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="lighthouse-motog4.png" 
-       alt="Chrome DevTools device emulation list with Moto G4 included.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wMyHDbxs49CTJ831UBp7.png", alt="Chrome DevTools device emulation list with Moto G4 included.", width="800", height="653" %}
 </figure>
 
 ## Browser extension {: #extension }
@@ -416,7 +403,7 @@ extension](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)!
 
 ## Budgets {: #budgets }
 
-Lighthouse 5.0 introduced [performance budgets](https://web.dev/performance-budgets-101/) which
+Lighthouse 5.0 introduced [performance budgets](/performance-budgets-101/) which
 supported adding thresholds for
 [how much of each resource type](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#resource-budgets)
 (such as scripts, images, or css) a page can serve.
@@ -433,12 +420,12 @@ source code and the report will state the exact file and line that's relevant. T
 explore in DevTools, clicking on the locations specified in the report will open the relevant files
 in the **Sources** panel.
 
-<figure class="w-figure">
-  <video autoplay loop muted playsinline class="w-screenshot">
+<figure>
+  <video autoplay loop muted playsinline>
     <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-caption">
+  <figcaption>
     DevTools reveals the exact line of code that causes the issue.
   </figcaption>
 </figure>
@@ -453,16 +440,14 @@ Lighthouse has begun experimenting with collecting source maps to power new feat
 -  Treemap visualizations highlighting the modules that require action.
 -  Displaying the original source code for report items with a "source location".
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lighthouse-sourcemaps-unusedjs.png" alt="Unused JavaScript showing modules from source maps." width="600">
-  <figcaption class="w-caption">
-    The Unused JavaScript audit using source maps to show unused code in specific bundled modules.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/iZPhM3KNQebgwCsgXTuf.png", alt="Unused JavaScript showing modules from source maps.", width="600", height="566" %}
+  <figcaption>The Unused JavaScript audit using source maps to show unused code in specific bundled modules.</figcaption>
 </figure>
 
 These features will be enabled by default in a future version of Lighthouse. For now, you can view
-Lighthouse's experimental audits with the following CLI flag:  
-  
+Lighthouse's experimental audits with the following CLI flag:
+
 ```bash
 lighthouse https://web.dev --view --preset experimental
 ```
@@ -479,7 +464,7 @@ What can you do next?
 -  Use the Node CLI: `npm install -g lighthouse && lighthouse https://yoursite.com --view`.
 -  Get [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci#lighthouse-ci) running with
    your project.
--  Review the [Lighthouse audit documentation](https://web.dev/learn/#lighthouse).
+-  Review the [Lighthouse audit documentation](/learn/#lighthouse).
 -  Have fun making the web better!
 
 We're passionate about the web and we love working with the developer community to build tooling to
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-1.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-1.png
deleted file mode 100755
index ff6d0d3bfc2..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-1.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-2.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-2.png
deleted file mode 100755
index 326b1db0a8b..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-2.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-3.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-3.png
deleted file mode 100755
index f4f5b50f68b..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-ci-3.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-logo.svg b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-logo.svg
deleted file mode 100644
index fb2c939d3ec..00000000000
--- a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="960" viewBox="0 0 192 192" width="3200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="49.994%" x2="49.994%" y1=".226%" y2="99.725%"><stop offset="0" stop-color="#212121" stop-opacity=".04"/><stop offset=".66" stop-color="#212121" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="36.626%" x2="64.01%" xlink:href="#b" y1="20.358%" y2="100.652%"/><linearGradient id="d"><stop offset="0" stop-color="#262626" stop-opacity=".1"/><stop offset="1" stop-color="#262626" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="68.935%" x2="31.065%" xlink:href="#d" y1="65.756%" y2="35.799%"/><linearGradient id="f" x1="62.531%" x2="24.779%" xlink:href="#d" y1="13.086%" y2="100.996%"/><linearGradient id="g" x1="0%" x2="100%" xlink:href="#d" y1="50%" y2="50%"/><radialGradient id="h" cx="10.128%" cy="14.269%" gradientTransform="matrix(.68182 0 0 1 .032 0)" r="144.566%" xlink:href="#b"/><radialGradient id="i" cx="14.489%" cy="14.584%" r="99.973%" xlink:href="#b"/><mask id="j" fill="#fff"><path d="m36.833 10.833h-5.265c-2.231-6.316-8.244-10.833-15.318-10.833-8.97 0-16.25 7.28-16.25 16.25s7.28 16.25 16.25 16.25h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" fill="#fff" fill-rule="evenodd"/></mask><mask id="k" fill="#fff"><path d="m20.583 0h-20.583v21.667h20.583c5.98 0 10.834-4.854 10.834-10.834s-4.854-10.833-10.834-10.833z" fill="#fff" fill-rule="evenodd"/></mask><mask id="l" fill="#fff"><path d="m42.5 12.5h-6.075c-2.575-7.287-9.512-12.5-17.675-12.5-10.35 0-18.75 8.4-18.75 18.75s8.4 18.75 18.75 18.75h23.75c6.9 0 12.5-5.6 12.5-12.5s-5.6-12.5-12.5-12.5z" fill="#fff" fill-rule="evenodd"/></mask><mask id="m" fill="#fff"><path d="m23.75 0h-23.75v25h23.75c6.9 0 12.5-5.6 12.5-12.5s-5.6-12.5-12.5-12.5z" fill="#fff" fill-rule="evenodd"/></mask><g fill="none" fill-rule="evenodd"><path d="m0 0h192v192h-192z"/><g transform="translate(8 8)"><circle cx="88" cy="88" fill="#0535c1" fill-rule="nonzero" r="88"/><path d="m107 40h52v52h-52z"/><g mask="url(#j)" transform="translate(109.167 50.833)"><g fill-rule="nonzero"><path d="m36.833 10.833h-5.265c-2.231-6.316-8.244-10.833-15.318-10.833-8.97 0-16.25 7.28-16.25 16.25s7.28 16.25 16.25 16.25h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" fill="#eaeaea"/><path d="m47.667 21.797v-.13c0-5.98-4.854-10.834-10.834-10.834h-5.416v.271h5.416c5.937 0 10.758 4.778 10.834 10.693z" fill="#fff" fill-opacity=".2"/><path d="m53.246 32.5h-36.996l15.33-21.667z" fill="url(#a)"/></g><g mask="url(#k)" transform="translate(16.25 10.833)"><g transform="translate(-3.25 -14.083)"><image height="34.667" opacity=".1" width="22.75" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAABGdBTUEAALGOfPtRkwAAA7ZJREFUSA2dlttvEkEYxdnlWqhQoEWrlRq1xqQv+qLP9f82fdamvmhjVBJbSnrjUtoCheWy/s6ERagsBSc5+WZnvzl75sxtrcDfYg2rXvTeuMOKF7123+gR2Nvb26FOpxNrt9uheDxuq0ez2XSXlpa6VDuFQqFHHIB7yUVqQRhuNBpZy7LyrutmiBHaA7Zt93i+5vksEonUer1eA3J9ROS+JcgbK5VKJej8EpIdCD4Q3xHf0rbN+01icjAYhLvdbn9jY8Mpl8t9X0ZeiNReX1+PO46zBdEOz+/BK7AJngq0PyZmg8GgjVpnbW2tl06n+7VaTVb8Y4dRmsvlYpDmUfgGVVvEVZITQzwQIVBbkvcRIPJeLBZz8F2qJ4hFGmD4YUIaPENVnpgEIaAJU04MLAP5nQNpMED5FapbKJ7w2ChNJpPkWB6xhi1VmiwzkUSR6yNSn0HpCqNxQQXiy2q12qF9pNYordfrLh7ZTEaaxOckyMM4MEuLqKIPBPl4lCgMIL8ElVAo1Gi1WlpyhtiQ8mBlMhl1kH+anCdAdTMSolc85VIdIt8FN1KLDU3PBo9UvgZIULK8vWuBR6ooYptc2SPFXUgvwuFwrVKpGBtGpHNaAIcpxgpqEqENUsa602w2eyO1455pKG08LZN0QnIdaPeMJoD6eFFfrYg8/V7T5xF1KZ+YCJevSf45+DWME7NK23iR2jBkWn4P6ZtkwrSCrAmlh4eHUlYn4YSvl6m3gZ9SXmkarDCIKtJPH5pQqudFLQig1Cimb5QJM0pHEyVGlQVWgclHodan/C/2+/3SysrKzfjwleT+hwVaWtq6LxTxNXKX1BCTMO8qINXSaLX7UlgR51APTiVdYBXA4+qUakJeB63b29v+VNIFLND+b0J6DH5AekbsTCOlfa5VoKXWhagKcUHQlaO7zJfUs0DJdL4ADhgvOkMb4Ihd+BXyIy5NqZ7YpuMdzCrgZL+mUTvsCvLxLSvCFjgF38FPVFaHtrk6EPwKPK6DiiZRChzUyEMN+xaUeN4nfuJm+U2eVJsbYCYpyV04rkg+h+Caeoq6ZrsE9njeBV+Y8YtisTgaiZ+n9OFM4+YkyE/5egqxTnrN9B74iO97iUSixJUt5aN7SgvXt4ydsSkI10mUym/Ud0W4vLx8fHBwIEK1j8pMUrKs1dVVG3UxPNMxp4n5DPYhLE0jFPMsT/XejUajbf5MdFjo2giisMyQK36E6mTOP1VmFPPzxvsIHluQO/f9T81Dqu/dzZt1cAf+AMymEnybyIybAAAAAElFTkSuQmCC"/><path d="m3.25 3.25 8.786 27.744c2.936-2.947 7.464-7.009 7.464-11.494 0-8.97-7.28-16.25-16.25-16.25z" fill="#e1e1e1" fill-rule="nonzero"/></g></g><g fill-rule="nonzero"><circle cx="16.25" cy="16.25" fill="#eee" r="16.25"/><path d="m16.25.27c8.927 0 16.174 7.205 16.25 16.12v-.13c0-8.97-7.28-16.25-16.25-16.25s-16.25 7.27-16.25 16.24v.13c.076-8.905 7.323-16.11 16.25-16.11z" fill="#fff" fill-opacity=".2"/><path d="m36.833 32.23h-20.583c-8.927 0-16.174-7.206-16.25-16.12v.13c0 8.97 7.28 16.25 16.25 16.25h20.583c5.98 0 10.834-4.854 10.834-10.834v-.13c-.076 5.926-4.897 10.703-10.834 10.703z" fill="#212121" fill-opacity=".1"/></g></g><path d="m36.833 10.833h-5.265c-2.231-6.316-8.244-10.833-15.318-10.833-8.97 0-16.25 7.28-16.25 16.25s7.28 16.25 16.25 16.25h20.583c5.98 0 10.834-4.853 10.834-10.833s-4.854-10.834-10.834-10.834z" fill="url(#h)" fill-rule="nonzero" transform="translate(109.167 50.833)"/><path d="m64 37h46v40h-46z" fill="#fff176"/><path d="m59 98h55v55h-55z" fill="#fff"/><g fill-rule="nonzero"><path d="m120 73h8v16h-80v-16h8v-32l32-20 32 20zm-16 0v-23.132l-16-10-16 10v23.132z" fill="#f4481e"/><path d="m44.447 164.484 13.553-91.484h60l13.553 91.484c-12.842 7.329-27.708 11.516-43.553 11.516s-30.711-4.187-43.553-11.516zm61.467-63.883-37.64 12.23-4.575 30.878 46.37-15.067z" fill="#f4481e"/><path d="m119.924 89 11.182 75.484c-12.842 7.329-27.708 11.516-43.553 11.516-15.844 0-30.71-4.187-43.553-11.516l11.183-75.484h-7.183v-16h8v-32l32-20 32 20v32h8v16z" fill="url(#c)"/><path d="m88 73h-32v-32l32-20z" fill="url(#e)"/><path d="m88 176a87.93 87.93 0 0 1 -43.553-11.516l10.027-75.484h33.526z" fill="url(#f)"/><path d="m48 73h40v16h-40z" fill="url(#g)" transform="matrix(-1 0 0 1 136 0)"/></g><path d="m19 57h60v60h-60z"/><g mask="url(#l)" transform="translate(21.5 69.5)"><g fill-rule="nonzero"><path d="m42.5 12.5h-6.075c-2.575-7.287-9.512-12.5-17.675-12.5-10.35 0-18.75 8.4-18.75 18.75s8.4 18.75 18.75 18.75h23.75c6.9 0 12.5-5.6 12.5-12.5s-5.6-12.5-12.5-12.5z" fill="#fafafa"/><path d="m55 25.15v-.15c0-6.9-5.6-12.5-12.5-12.5h-6.25v.313h6.25c6.85 0 12.413 5.512 12.5 12.337z" fill="#fff" fill-opacity=".2"/><path d="m61.438 37.5h-42.688l17.688-25z" fill="url(#a)"/></g><g mask="url(#m)" transform="translate(18.75 12.5)"><g transform="translate(-3.75 -16.25)"><image height="40" opacity=".1" width="26.25" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAABGdBTUEAALGOfPtRkwAAA7ZJREFUSA2dlttvEkEYxdnlWqhQoEWrlRq1xqQv+qLP9f82fdamvmhjVBJbSnrjUtoCheWy/s6ERagsBSc5+WZnvzl75sxtrcDfYg2rXvTeuMOKF7123+gR2Nvb26FOpxNrt9uheDxuq0ez2XSXlpa6VDuFQqFHHIB7yUVqQRhuNBpZy7LyrutmiBHaA7Zt93i+5vksEonUer1eA3J9ROS+JcgbK5VKJej8EpIdCD4Q3xHf0rbN+01icjAYhLvdbn9jY8Mpl8t9X0ZeiNReX1+PO46zBdEOz+/BK7AJngq0PyZmg8GgjVpnbW2tl06n+7VaTVb8Y4dRmsvlYpDmUfgGVVvEVZITQzwQIVBbkvcRIPJeLBZz8F2qJ4hFGmD4YUIaPENVnpgEIaAJU04MLAP5nQNpMED5FapbKJ7w2ChNJpPkWB6xhi1VmiwzkUSR6yNSn0HpCqNxQQXiy2q12qF9pNYordfrLh7ZTEaaxOckyMM4MEuLqKIPBPl4lCgMIL8ElVAo1Gi1WlpyhtiQ8mBlMhl1kH+anCdAdTMSolc85VIdIt8FN1KLDU3PBo9UvgZIULK8vWuBR6ooYptc2SPFXUgvwuFwrVKpGBtGpHNaAIcpxgpqEqENUsa602w2eyO1455pKG08LZN0QnIdaPeMJoD6eFFfrYg8/V7T5xF1KZ+YCJevSf45+DWME7NK23iR2jBkWn4P6ZtkwrSCrAmlh4eHUlYn4YSvl6m3gZ9SXmkarDCIKtJPH5pQqudFLQig1Cimb5QJM0pHEyVGlQVWgclHodan/C/2+/3SysrKzfjwleT+hwVaWtq6LxTxNXKX1BCTMO8qINXSaLX7UlgR51APTiVdYBXA4+qUakJeB63b29v+VNIFLND+b0J6DH5AekbsTCOlfa5VoKXWhagKcUHQlaO7zJfUs0DJdL4ADhgvOkMb4Ihd+BXyIy5NqZ7YpuMdzCrgZL+mUTvsCvLxLSvCFjgF38FPVFaHtrk6EPwKPK6DiiZRChzUyEMN+xaUeN4nfuJm+U2eVJsbYCYpyV04rkg+h+Caeoq6ZrsE9njeBV+Y8YtisTgaiZ+n9OFM4+YkyE/5egqxTnrN9B74iO97iUSixJUt5aN7SgvXt4ydsSkI10mUym/Ud0W4vLx8fHBwIEK1j8pMUrKs1dVVG3UxPNMxp4n5DPYhLE0jFPMsT/XejUajbf5MdFjo2giisMyQK36E6mTOP1VmFPPzxvsIHluQO/f9T81Dqu/dzZt1cAf+AMymEnybyIybAAAAAElFTkSuQmCC"/><path d="m3.75 3.75 10.137 32.013c3.388-3.4 8.613-8.088 8.613-13.263 0-10.35-8.4-18.75-18.75-18.75z" fill="#e1e1e1" fill-rule="nonzero"/></g></g><g fill-rule="nonzero"><circle cx="18.75" cy="18.75" fill="#fff" r="18.75"/><path d="m18.75.313c10.3 0 18.663 8.312 18.75 18.6v-.15c0-10.35-8.4-18.75-18.75-18.75s-18.75 8.387-18.75 18.737v.15c.087-10.275 8.45-18.587 18.75-18.587z" fill="#fff" fill-opacity=".2"/><path d="m42.5 37.188h-23.75c-10.3 0-18.663-8.313-18.75-18.6v.15c0 10.35 8.4 18.75 18.75 18.75h23.75c6.9 0 12.5-5.6 12.5-12.5v-.15c-.087 6.837-5.65 12.35-12.5 12.35z" fill="#212121" fill-opacity=".1"/></g></g><g fill-rule="nonzero"><path d="m42.5 12.5h-6.075c-2.575-7.287-9.512-12.5-17.675-12.5-10.35 0-18.75 8.4-18.75 18.75s8.4 18.75 18.75 18.75h23.75c6.9 0 12.5-5.6 12.5-12.5s-5.6-12.5-12.5-12.5z" fill="url(#h)" transform="translate(21.5 69.5)"/><g fill-opacity=".1"><path d="m88 .92c48.45 0 87.74 39.15 87.99 87.54 0-.15.01-.3.01-.46 0-48.6-39.4-88-88-88s-88 39.4-88 88c0 .15.01.3.01.46.25-48.39 39.54-87.54 87.99-87.54z" fill="#fff"/><path d="m175.99 87.54c-.25 48.39-39.54 87.54-87.99 87.54s-87.74-39.15-87.99-87.54c0 .16-.01.31-.01.46 0 48.6 39.4 88 88 88s88-39.4 88-88c0-.15-.01-.3-.01-.46z" fill="#263238"/></g><circle cx="88" cy="88" fill="url(#i)" r="88"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-motog4.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-motog4.png
deleted file mode 100755
index 2247a767d2f..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-motog4.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-new-metrics.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-new-metrics.png
deleted file mode 100755
index 08ba620e789..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-new-metrics.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-scorecalc.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-scorecalc.png
deleted file mode 100755
index 66515be9f18..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-scorecalc.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-sourcemaps-unusedjs.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-sourcemaps-unusedjs.png
deleted file mode 100755
index 386c8578d5c..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-sourcemaps-unusedjs.png and /dev/null differ
diff --git a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-weight-changes.png b/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-weight-changes.png
deleted file mode 100644
index 3c66624970b..00000000000
Binary files a/src/site/content/en/blog/lighthouse-whats-new-6.0/lighthouse-weight-changes.png and /dev/null differ
diff --git a/src/site/content/en/blog/lightsaber/index.md b/src/site/content/en/blog/lightsaber/index.md
new file mode 100644
index 00000000000..3743dd9d249
--- /dev/null
+++ b/src/site/content/en/blog/lightsaber/index.md
@@ -0,0 +1,772 @@
+---
+layout: post
+title: Creating a Lightsaber with Polymer
+description: How to set up a high FPS WebGL project with Polymer.
+date: 2015-12-15
+updated: 2015-12-15
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YRCKrwla0CFh3rleFYH7.png", alt="Lightsaber screenshot", width="340", height="507" %}
+</figure>
+
+### Summary
+
+How we used Polymer to create a high-performance WebGL mobile controlled
+Lightsaber that is modular and configurable. We review some key details
+of our project [https://lightsaber.withgoogle.com/](https://lightsaber.withgoogle.com/)
+to help you save time when creating your own next time you run into a pack of
+angry Stormtroopers.
+
+## Overview
+
+If you are wondering what Polymer or WebComponents are we thought it
+would be best to start by sharing an extract from an actual working project.
+Here is a sample taken from the landing page of our project
+[https://lightsaber.withgoogle.com](https://lightsaber.withgoogle.com). It's
+a regular HTML file but has some magic inside:
+
+```html
+<!-- Element-->
+<dom-module id="sw-page-landing">
+    <!-- Template-->
+    <template>
+    <style>
+        <!-- include elements/sw/pages/sw-page-landing/styles/sw-page-landing.css-->
+    </style>
+    <div class="centered content">
+        <sw-ui-logo></sw-ui-logo>
+        <div class="connection-url-wrapper">
+        <sw-t key="landing.type" class="type"></sw-t>
+        <div id="url" class="connection-url">.</div>
+        <sw-ui-toast></sw-ui-toast>
+        </div>
+    </div>
+    <div class="disclaimer epilepsy">
+        <sw-t key="disclaimer.epilepsy" class="type"></sw-t>
+    </div>
+    <sw-ui-footer state="extended"></sw-ui-footer>
+    </template>
+    <!-- Polymer element script-->
+    <script src="scripts/sw-page-landing.js"></script>
+</dom-module>
+```
+
+So there are many choices out there nowadays when you want to create
+a HTML5 based application. APIs, Frameworks, Libraries, Game Engines etc.
+Despite all the choices it is difficult to get a setup that is a good mix
+between control over high performance of graphics and clean modular
+structure and scalability. We found that Polymer could help us keep the
+project organized while still allowing for low-level performance
+optimizations, and we carefully crafted the way we broke down our project
+into components to best leverage Polymer's capabilities.
+
+Note: For more general information on Polymer you should have a look on their site [https://www.polymer-project.org/](https://www.polymer-project.org/) and go through their tour.
+
+
+## Modularity with Polymer
+
+[Polymer](https://www.polymer-project.org) is a library that allows a
+lot of power over how your project is built from reusable custom elements.
+It allows you to use standalone, fully functional modules contained in a
+single HTML file. They contain not only the structure (HTML markup) but also
+inline styles and logic.
+
+Have a look at the example below:
+
+```html
+<link rel="import" href="bower_components/polymer/polymer.html">
+
+<dom-module id="picture-frame">
+    <template>
+    <!-- scoped CSS for this element -->
+    <style>
+        div {
+        display: inline-block;
+        background-color: #ccc;
+        border-radius: 8px;
+        padding: 4px;
+        }
+    </style>
+    <div>
+        <!-- any children are rendered here -->
+        <content></content>
+    </div>
+    </template>
+
+    <script>
+    Polymer({
+        is: "picture-frame",
+    });
+    </script>
+</dom-module>
+```
+
+But on a larger project it might be helpful to separate these three logical
+components (HTML, CSS, JS) and only merge them at compile time. So one thing
+we did was give each element in the project its own separate folder:
+
+```shell
+src/elements/
+|-- elements.jade
+`-- sw
+    |-- debug
+    |   |-- sw-debug
+    |   |-- sw-debug-performance
+    |   |-- sw-debug-version
+    |   `-- sw-debug-webgl
+    |-- experience
+    |   |-- effects
+    |   |-- sw-experience
+    |   |-- sw-experience-controller
+    |   |-- sw-experience-engine
+    |   |-- sw-experience-input
+    |   |-- sw-experience-model
+    |   |-- sw-experience-postprocessor
+    |   |-- sw-experience-renderer
+    |   |-- sw-experience-state
+    |   `-- sw-timer
+    |-- input
+    |   |-- sw-input-keyboard
+    |   `-- sw-input-remote
+    |-- pages
+    |   |-- sw-page-calibration
+    |   |-- sw-page-connection
+    |   |-- sw-page-connection-error
+    |   |-- sw-page-error
+    |   |-- sw-page-experience
+    |   `-- sw-page-landing
+    |-- sw-app
+    |   |-- bower.json
+    |   |-- scripts
+    |   |-- styles
+    |   `-- sw-app.jade
+    |-- system
+    |   |-- sw-routing
+    |   |-- sw-system
+    |   |-- sw-system-audio
+    |   |-- sw-system-config
+    |   |-- sw-system-environment
+    |   |-- sw-system-events
+    |   |-- sw-system-remote
+    |   |-- sw-system-social
+    |   |-- sw-system-tracking
+    |   |-- sw-system-version
+    |   |-- sw-system-webrtc
+    |   `-- sw-system-websocket
+    |-- ui
+    |   |-- experience
+    |   |-- sw-preloader
+    |   |-- sw-sound
+    |   |-- sw-ui-button
+    |   |-- sw-ui-calibration
+    |   |-- sw-ui-disconnected
+    |   |-- sw-ui-final
+    |   |-- sw-ui-footer
+    |   |-- sw-ui-help
+    |   |-- sw-ui-language
+    |   |-- sw-ui-logo
+    |   |-- sw-ui-mask
+    |   |-- sw-ui-menu
+    |   |-- sw-ui-overlay
+    |   |-- sw-ui-quality
+    |   |-- sw-ui-select
+    |   |-- sw-ui-toast
+    |   |-- sw-ui-toggle-screen
+    |   `-- sw-ui-volume
+    `-- utils
+        `-- sw-t
+```
+
+And each element's folder has the same internal structure with separate
+directories and files for logic (coffee files), styles (scss files) and
+template (jade file).
+
+Here's an example `sw-ui-logo` element:
+
+```shell
+sw-ui-logo/
+|-- bower.json
+|-- scripts
+|   `-- sw-ui-logo.coffee
+|-- styles
+|   `-- sw-ui-logo.scss
+`-- sw-ui-logo.jade
+```
+
+Note: All examples are in Coffeescript (rather than JavaScript), SASS (rather than CSS) and Jade (rather than HTML). All of these pre-compile translate to their corresponding language with the additional advantages of being less code, and more error checking at compile-time. Otherwise the information is relevant to other environments.
+
+And if you look into the `.jade` file:
+
+```js
+// Element
+dom-module(id='sw-ui-logo')
+
+    // Template
+    template
+    style
+        include elements/sw/ui/sw-ui-logo/styles/sw-ui-logo.css
+
+    img(src='[[url]]')
+
+    // Polymer element script
+    script(src='scripts/sw-ui-logo.js')
+```
+
+You can see how things are organised in a clean way by including styles
+and logic from separate files. To include our styles in our Polymer
+elements we use Jade’s `include` statement, so we have actual inline CSS
+file contents after compilation. The `sw-ui-logo.js` script element will
+execute at runtime.
+
+## Modular Dependencies with Bower
+
+Normally we keep libraries and other dependencies at the project level.
+However in the setup above you will notice a `bower.json` that is in the
+element’s folder: element level dependencies. The idea behind this approach
+is that in a situation where you have lots of elements with different
+dependencies we can make sure to load only those dependencies that are
+actually used. And if you remove an element, you don’t need to remember to
+remove its dependency because you also will have removed the `bower.json` file
+that declares these dependencies. Each element independently loads the
+dependencies that relate to it.
+
+However, to avoid a duplication of dependencies we include a `.bowerrc` file
+in each element’s folder as well. This tells bower where to store
+dependencies so we can ensure there is only one at the end in the same
+directory:
+
+```json
+{
+    "directory" : "../../../../../bower_components"
+}
+```
+
+This way if multiple elements declare `THREE.js` as a dependency, once
+bower installs it for the first element and starts parsing the second one,
+it will realise that this dependency is already installed and will not
+re-download or duplicate it. Similarly, it will keep that dependency
+files as long as there's at least one element that still defines it in
+its `bower.json`.
+
+A bash script finds all `bower.json` files in the nested elements structure.
+Then it enters these directories one by one and executes `bower install` in
+each of them:
+
+```shell
+echo installing bower components...
+modules=$(find /vagrant/app -type f -name "bower.json" -not -path "*node_modules*" -not -path "*bower_components*")
+for module in $modules; do
+    pushd $(dirname $module)
+    bower install --allow-root -q
+    popd
+done
+```
+
+## Quick New Element Template
+
+It takes a bit of time each time you want to create a new element: generating
+the folder and basic file structure with the correct names. So we use
+[Slush](http://slushjs.github.io/) to write a simple element generator.
+
+You can call the script from command line:
+
+```shell
+$ slush element path/to/your/element-name
+```
+
+And the new element is created, including all the file structure and contents.
+
+We defined templates for the element files, e.g. the `.jade` file template
+looks as follows:
+
+```js
+// Element
+dom-module(id='<%= name %>')
+
+    // Template
+    template
+    style
+        include elements/<%= path %>/styles/<%= name %>.css
+
+    span This is a '<%= name %>' element.
+
+    // Polymer element script
+    script(src='scripts/<%= name %>.js')
+```
+
+The Slush generator replaces the variables with actual element paths and names.
+
+## Using Gulp to Build Elements
+
+Gulp keeps the build process under control. And in our structure, to build
+the elements we need Gulp to follow the following steps:
+
+1. Compile the elements' `.coffee` files to `.js`
+1. Compile the elements' `.scss` files to `.css`
+1. Compile the elements' `.jade` files to `.html`, embedding the `.css` files.
+
+In more detail:
+
+Compiling the elements' `.coffee` files to `.js`
+
+```js
+gulp.task('elements-coffee', function () {
+    return gulp.src(abs(config.paths.app + '/elements/**/*.coffee'))
+    .pipe($.replaceTask({
+        patterns: [{json: getVersionData()}]
+    }))
+    .pipe($.changed(abs(config.paths.static + '/elements'), {extension: '.js'}))
+    .pipe($.coffeelint())
+    .pipe($.coffeelint.reporter())
+    .pipe($.sourcemaps.init())
+    .pipe($.coffee({
+    }))
+    .on('error', gutil.log)
+    .pipe($.sourcemaps.write())
+    .pipe(gulp.dest(abs(config.paths.static + '/elements')));
+});
+```
+
+For the steps 2 and 3 we use gulp and a compass plugin to compile `scss` to
+`.css` and `.jade` to `.html`, in a similar approach to 2 above.
+
+## Including Polymer Elements
+
+To actually include the Polymer elements we use HTML imports.
+
+```html
+<link rel="import" href="elements.html">
+
+<!-- Polymer -->
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<!-- Custom elements -->
+<link rel="import" href="sw/sw-app/sw-app.html">
+<link rel="import" href="sw/system/sw-system/sw-system.html">
+<link rel="import" href="sw/system/sw-routing/sw-routing.html">
+<link rel="import" href="sw/system/sw-system-version/sw-system-version.html">
+<link rel="import" href="sw/system/sw-system-environment/sw-system-environment.html">
+<link rel="import" href="sw/pages/sw-page-landing/sw-page-landing.html">
+<link rel="import" href="sw/pages/sw-page-connection/sw-page-connection.html">
+<link rel="import" href="sw/pages/sw-page-calibration/sw-page-calibration.html">
+<link rel="import" href="sw/pages/sw-page-experience/sw-page-experience.html">
+<link rel="import" href="sw/ui/sw-preloader/sw-preloader.html">
+<link rel="import" href="sw/ui/sw-ui-overlay/sw-ui-overlay.html">
+<link rel="import" href="sw/ui/sw-ui-button/sw-ui-button.html">
+<link rel="import" href="sw/ui/sw-ui-menu/sw-ui-menu.html">
+```
+
+## Optimising Polymer elements for production
+
+A large project can end up having a lot of Polymer elements. In our
+project, we have more than fifty. If you consider each element having a
+separate `.js` file and some having libraries referenced, it becomes more than
+100 separate files. This means a lot of requests the browser needs to make,
+with performance loss. Similarly to a concatenate and minify process we
+would apply to an Angular build, we “vulcanize” the Polymer project at the
+end for production.
+
+[Vulcanize](https://github.com/polymer/vulcanize) is a Polymer tool that
+flattens the dependency tree into a single html file, reducing the
+number of requests. This is especially great for browsers that do not
+support web components natively.
+
+## CSP (Content Security Policy) and Polymer
+
+When developing secure web applications you need to implement CSP.
+[CSP](http://www.html5rocks.com/tutorials/security/content-security-policy/)
+is a set of rules that prevent cross-site scripting (XSS) attacks:
+execution of scripts from unsafe sources, or executing inline scripts
+from HTML files.
+
+Now the one, optimized, concatenated and minified `.html` file generated
+by Vulcanize has all the JavaScript code inline in a non CSP compliant
+format. To address this we use a tool called
+[Crisper](https://github.com/PolymerLabs/crisper).
+
+Crisper splits inline scripts from an HTML file and puts them into a single,
+external JavaScript file for CSP compliance. So we pass the vulcanized
+HTML file through Crisper and end up with two files: `elements.html` and
+`elements.js`. Inside `elements.html` it also takes care of loading the
+generated `elements.js`.
+
+## Application Logical Structure
+
+In Polymer, elements can be anything from a non-visual utility to small,
+standalone and reusable UI elements (like buttons) to bigger modules like
+"pages" and even composing full applications.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vTgWkbNs1rgYp9Np0Wh8.png", alt="A top-level logical structure of the application", width="800", height="819" %}
+  <figcaption>
+    A top-level logical structure of our application represented with
+    Polymer elements.
+  </figcaption>
+</figure>
+
+## Postprocessing with Polymer and Parent-child Architecture
+
+In any 3D graphics pipeline, there is always a last step where effects
+are added on top of the whole picture as a kind of overlay. This is the
+post-processing step, and involves effects like glows, god-rays,
+depth of field, bokeh, blurs etc. The effects are combined and applied to
+different elements according to how the scene is built. In THREE.js we
+could create a custom shader for the post-processing in JavaScript or
+we can do this with Polymer, thanks to its parent-child structure.
+
+If you look at our post-processor's element HTML  code:
+
+```html
+<dom-module id="sw-experience-postprocessor">
+    <!-- Template-->
+    <template>
+    <sw-experience-effect-bloom class="effect"></sw-experience-effect-bloom>
+    <sw-experience-effect-dof class="effect"></sw-experience-effect-dof>
+    <sw-experience-effect-vignette class="effect"></sw-experience-effect-vignette>
+    </template>
+    <!-- Polymer element script-->
+    <script src="scripts/sw-experience-postprocessor.js"></script>
+</dom-module>
+```
+
+
+We specify the effects as nested Polymer elements under a common class. Then,
+in `sw-experience-postprocessor.js` we do this:
+
+```js
+effects = @querySelectorAll '.effect'
+@composer.addPass effect.getPass() for effect in effects
+```
+
+We use the HTML feature and JavaScript's `querySelectorAll` to find all
+effects nested as HTML elements within the post processor, in the order
+they were specified in. We then iterate over them and add them to the composer.
+
+Now, let's say we want to remove the DOF (Depth of Field) effect and
+change the order of bloom and vignette effects. All we need to do is edit
+the post-processor's definition  to something like:
+
+```html
+<dom-module id="sw-experience-postprocessor">
+    <!-- Template-->
+    <template>
+    <sw-experience-effect-vignette class="effect"></sw-experience-effect-vignette>
+    <sw-experience-effect-bloom class="effect"></sw-experience-effect-bloom>
+    </template>
+    <!-- Polymer element script-->
+    <script src="scripts/sw-experience-postprocessor.js"></script>
+</dom-module>
+```
+
+and the scene will just run, without changing a single line of actual code.
+
+## Render loop and update loop in Polymer
+
+With Polymer we can also approach rendering and engine updates elegantly.
+We created a `timer` element that uses `requestAnimationFrame` and computes
+values like current time (`t`) and delta time - time elapsed from the
+last frame (`dt`):
+
+```js
+Polymer
+    is: 'sw-timer'
+
+    properties:
+    t:
+        type: Number
+        value: 0
+        readOnly: true
+        notify: true
+    dt:
+        type: Number
+        value: 0
+        readOnly: true
+        notify: true
+
+    _isRunning: false
+    _lastFrameTime: 0
+
+    ready: ->
+    @_isRunning = true
+    @_update()
+
+    _update: ->
+    if !@_isRunning then return
+    requestAnimationFrame => @_update()
+    currentTime = @_getCurrentTime()
+    @_setT currentTime
+    @_setDt currentTime - @_lastFrameTime
+    @_lastFrameTime = @_getCurrentTime()
+
+    _getCurrentTime: ->
+    if window.performance then performance.now() else new Date().getTime()
+```
+
+Then, we use data binding to bind the `t` and `dt` properties to our
+engine (`experience.jade`):
+
+```js
+sw-timer(
+    t='{ % templatetag openvariable % }t}}',
+    dt='{ % templatetag openvariable % }dt}}'
+)
+
+sw-experience-engine(
+    t='[t]',
+    dt='[dt]'
+)
+```
+
+And we listen to changes of `t` and `dt` in the engine and whenever the
+values change, the `_update` function will be called:
+
+```js
+Polymer
+    is: 'sw-experience-engine'
+
+    properties:
+    t:
+        type: Number
+
+    dt:
+        type: Number
+
+    observers: [
+    '_update(t)'
+    ]
+
+    _update: (t) ->
+    dt = @dt
+    @_physics.update dt, t
+    @_renderer.render dt, t
+```
+
+If you're hungry for FPS though, you might want to remove Polymer's data
+binding in render loop to save couple milliseconds required to notify
+elements about the changes. We implemented custom observers as follows:
+
+`sw-timer.coffee`:
+
+```js
+addUpdateListener: (listener) ->
+    if @_updateListeners.indexOf(listener) == -1
+    @_updateListeners.push listener
+    return
+
+removeUpdateListener: (listener) ->
+    index = @_updateListeners.indexOf listener
+    if index != -1
+    @_updateListeners.splice index, 1
+    return
+
+_update: ->
+    # ...
+    for listener in @_updateListeners
+        listener @dt, @t
+    # ...
+```
+
+The `addUpdateListener` function accepts a callback and saves it in its
+callbacks array. Then, in the update loop, we iterate over every callback and
+we execute it with `dt` and `t` arguments directly, bypassing data binding or
+event firing. Once a callback is no longer meant to be active, we added a
+`removeUpdateListener` function that lets you remove an earlier added callback.
+
+## A Lightsaber in THREE.js
+
+THREE.js abstracts away the low level detail of WebGL and allows us to focus
+on the problem. And our problem is fighting Stormtroopers and we need a
+weapon. So let's build a lightsaber.
+
+The glowy blade is what differentiates a lightsaber from any old
+two-handed weapon. It is mainly made of two parts: the beam and the trail
+which is seen when moving it. We built it with a bright cylinder shape
+and a dynamic trail that follows it as the player moves.
+
+## The Blade
+
+The blade is made up of two sub blades. An inner and an outer one.
+Both are THREE.js meshes with their respective materials.
+
+### The Inner blade
+
+For the inner blade we used a custom material with a custom shader. We
+take a line created by two points and project the line between these two
+points on a plane. This plane is basically what you control when you
+fight with your mobile, it gives the sense of depth and orientation
+to the saber.
+
+To create the feeling of a round glowing object we look at the
+orthogonal point distance of any point on the plane from the main
+line joining the two points A and B as below. The closer a point is to
+the main axis the brighter it is.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/02As068k80BDnrl4UmQ0.jpg", alt="Inner blade glow", width="358", height="490" %}
+</figure>
+
+The source below shows how we compute a `vFactor` to control the intensity
+in the vertex shader to then use it to blend with the scene in the
+fragment shader.
+
+```js
+THREE.LaserShader = {
+
+    uniforms: {
+    "uPointA": {type: "v3", value: new THREE.Vector3(0, -1, 0)},
+    "uPointB": {type: "v3", value: new THREE.Vector3(0, 1, 0)},
+    "uColor": {type: "c", value: new THREE.Color(1, 0, 0)},
+    "uMultiplier": {type: "f", value: 3.0},
+    "uCoreColor": {type: "c", value: new THREE.Color(1, 1, 1)},
+    "uCoreOpacity": {type: "f", value: 0.8},
+    "uLowerBound": {type: "f", value: 0.4},
+    "uUpperBound": {type: "f", value: 0.8},
+    "uTransitionPower": {type: "f", value: 2},
+    "uNearPlaneValue": {type: "f", value: -0.01}
+    },
+
+    vertexShader: [
+
+    "uniform vec3 uPointA;",
+    "uniform vec3 uPointB;",
+    "uniform float uMultiplier;",
+    "uniform float uNearPlaneValue;",
+    "varying float vFactor;",
+
+    "float getDistanceFromAB(vec2 a, vec2 b, vec2 p) {",
+
+        "vec2 l = b - a;",
+        "float l2 = dot( l, l );",
+        "float t = dot( p - a, l ) / l2;",
+        "if( t < 0.0 ) return distance( p, a );",
+        "if( t > 1.0 ) return distance( p, b );",
+        "vec2 projection = a + (l * t);",
+        "return distance( p, projection );",
+
+    "}",
+
+    "vec3 getIntersection(vec4 a, vec4 b) {",
+
+        "vec3 p = a.xyz;",
+        "vec3 q = b.xyz;",
+        "vec3 v = normalize( q - p );",
+        "float t = ( uNearPlaneValue - p.z ) / v.z;",
+        "return p + (v * t);",
+
+    "}",
+
+    "void main() {",
+
+        "vec4 a = modelViewMatrix * vec4(uPointA, 1.0);",
+        "vec4 b = modelViewMatrix * vec4(uPointB, 1.0);",
+        "if(a.z > uNearPlaneValue) a.xyz = getIntersection(a, b);",
+        "if(b.z > uNearPlaneValue) b.xyz = getIntersection(a, b);",
+        "a = projectionMatrix * a; a /= a.w;",
+        "b = projectionMatrix * b; b /= b.w;",
+        "vec4 p = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+        "gl_Position = p;",
+        "p /= p.w;",
+        "float d = getDistanceFromAB(a.xy, b.xy, p.xy) * gl_Position.z;",
+        "vFactor = 1.0 - clamp(uMultiplier * d, 0.0, 1.0);",
+
+    "}"
+
+    ].join( "\n" ),
+
+    fragmentShader: [
+
+    "uniform vec3 uColor;",
+    "uniform vec3 uCoreColor;",
+    "uniform float uCoreOpacity;",
+    "uniform float uLowerBound;",
+    "uniform float uUpperBound;",
+    "uniform float uTransitionPower;",
+    "varying float vFactor;",
+
+    "void main() {",
+
+        "vec4 col = vec4(uColor, vFactor);",
+        "float factor = smoothstep(uLowerBound, uUpperBound, vFactor);",
+        "factor = pow(factor, uTransitionPower);",
+        "vec4 coreCol = vec4(uCoreColor, uCoreOpacity);",
+        "vec4 finalCol = mix(col, coreCol, factor);",
+        "gl_FragColor = finalCol;",
+
+    "}"
+
+    ].join( "\n" )
+
+};
+```
+
+### The Outer Blade Glow
+
+For the outer glow we render to a separate renderbuffer and use a
+post-processing bloom effect and blend with the final image to get the
+desired glow. The image below shows the three different regions that you
+need to have if you want a decent saber. Namely the white core, the middle
+blue-ish glow and the outer glow.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HH7yl6SQN6ZknW5Oyagg.png", alt="Outer blade", width="450", height="153" %}
+</figure>
+
+## Lightsaber Trail
+
+The trail of the lightsaber is key to the full effect as the original seen
+in the Star Wars series. We made the trail with a fan of triangles generated
+dynamically based on the movement of the lightsaber. These fans are then
+passed to the postprocessor for further visual enhancement. To create the
+fan geometry we have a line segment and based on its previous transform
+and current transform we generate a new triangle in the mesh, dropping
+off the tail portion after a certain length.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hisAQfh9ipXYdO6I7mTZ.jpg", alt="Lightsaber trail left", width="422", height="500" %}
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qFA751S77W0gChiF5ukv.jpg", alt="Lightsaber trail right", width="681", height="500" %}
+</figure>
+
+Once we have a mesh we assign a simple material to it, and pass it to the
+postprocessor to create a smooth effect. We use the same bloom effect that
+we applied to the outer blade glow and get a smooth trail as you can see:
+
+<figure>
+ {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/r8mUPgnZdISc4XYVBPnu.png", alt="The full trail", width="451", height="154" %}
+</figure>
+
+### Glow around the trail
+
+For the final piece to be complete we had to handle glow around the actual
+trail, which could be created in a number of ways. Our solution that we
+don’t go into detail here, for performance reasons was to create a custom
+shader for this buffer that creates a smooth edge around a clamp of the
+renderbuffer. We then combine this output in the final render, here you can
+see the glow that surrounds the trail:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/POoZcCQ4tMXxFZPD9FUv.png", alt="Trail with glow", width="452", height="152" %}
+</figure>
+
+## Conclusion
+
+Polymer is a powerful library and concept (same as WebComponents are in
+general). It is only up to you what you make with it. It can be anything from
+a simple UI button to a full-sized WebGL application. In the previous chapters
+we have shown you some tips and tricks for how to efficiently use Polymer
+in production and how to structure more complex modules that also perform
+well. We also showed you how to achieve a nice looking lightsaber in WebGL.
+So if you combine all that, remember to Vulcanize your Polymer elements
+before deploying to production server and if you don't forget to use Crisper
+if you want to stay CSP compliant, may the force be with you!
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Mrv8yj9ud5yUgqUbMYYD.jpg", alt="Game play", width="800", height="466" %}
+</figure>
diff --git a/src/site/content/en/blog/link-prefetch/index.md b/src/site/content/en/blog/link-prefetch/index.md
index 11ee4456cbe..391ff6a36ed 100644
--- a/src/site/content/en/blog/link-prefetch/index.md
+++ b/src/site/content/en/blog/link-prefetch/index.md
@@ -3,14 +3,18 @@ title: Prefetch resources to speed up future navigations
 subhead: |
     Learn about rel=prefetch resource hint and how to use it.
 date: 2019-09-12
+updated: 2022-11-29
 authors:
   - demianrenzulli
+  - jlwagner
 description: |
     Learn about rel=prefetch resource hint and how to use it.
 tags:
   - blog
   - performance
 codelabs: codelab-two-ways-to-prefetch
+feedback:
+  - api
 ---
 
 Research shows that [faster load times result in higher conversion rates](https://wpostats.com/) and better user experiences. If you have insight into how users move through your website and which pages they will likely visit next, you can improve load times of future navigations by downloading the resources for those pages ahead of time.
@@ -19,13 +23,13 @@ This guide explains how to achieve that with `<link rel=prefetch>`, a [resource
 
 ## Improve navigations with `rel=prefetch`
 
-Adding `<link rel=prefetch>` to a web page tells the browser to download entire pages, or some of the resources (like scripts or CSS files), that the user might need in the future. This can improve metrics like [First Contentful Paint](/first-contentful-paint) and [Time to Interactive](/interactive/) and can often make subsequent navigations appear to load instantly.
+Adding `<link rel=prefetch>` to a web page tells the browser to download entire pages, or some of the resources (like scripts or CSS files), that the user might need in the future:
 
 ```html
-<link rel="prefetch" href="index.html" as="document">
+<link rel="prefetch" href="/articles/" as="document">
 ```
 
-![A diagram showing how link prefetch works.](prefetch.png)
+{% Img src="image/admin/djLGrbmj5eovwa6qhlm1.png", alt="A diagram showing how link prefetch works.", width="800", height="413" %}
 
 The `prefetch` hint consumes extra bytes for resources that are not immediately needed, so this technique needs to be applied thoughtfully; only prefetch resources when you are confident that users will need them. Consider not prefetching when users are on slow connections. You can detect that with the [Network Information API](/adaptive-serving-based-on-network-quality/).
 
@@ -43,6 +47,8 @@ For example, in a product listing page, you can prefetch the page for the most p
 eBay implemented prefetching for the first five results on a search page to speed up future pages loads and saw a positive impact on conversion rates.
 {% endAside %}
 
+While prefetching resources does use additional bandwidth, it can improve most performance metrics. [Time to First Byte (TTFB)](/ttfb/) will often be much lower, as the document request results in a cache hit. Because TTFB will be lower, subsequent time-based metrics will often be lower as well, including [Largest Contentful Paint (LCP)](/lcp/) and [First Contentful Paint (FCP)](/fcp/).
+
 ### Prefetching static assets
 
 Prefetch static assets, like scripts or stylesheets, when subsequent sections the user might visit can be predicted. This is especially useful when those assets are shared across many pages.
@@ -53,6 +59,13 @@ For example, Netflix takes advantage of the time users spend on logged-out pages
 At the time of this writing, it is possible to share prefetched resources among pages served from different origins. When [Double-keyed HTTP cache](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/6KKXv1PqPZ0/oguPntMGDgAJ) ships, this will only work for top-level navigations and same-origin subresources, but it won't be possible to reuse prefetched subresources among different origins. This means that, if `a.com` prefetches the resource `b.com/library.js`, it won't be available in `c.com` cache. Some browsers, such as WebKit-based ones, already [partition caches and HTML5 storage](https://webkit.org/blog/7675/intelligent-tracking-prevention/) for all third-party domains.
 {% endAside %}
 
+The effect of prefetching static assets on performance metrics depends on the resource being prefetched:
+
+- Prefetching images can significantly lower LCP times for LCP image elements.
+- Prefetching stylesheets can improve both FCP and LCP, as the network time to download the stylesheet will be eliminated. Since stylesheets are render blocking, they can reduce LCP when prefetched. In cases where the subsequent page's LCP element is a CSS background image requested via the `background-image` property, the image will also be prefetched as a dependent resource of the prefetched stylesheet.
+- Prefetching JavaScript will allow the processing of the prefetched script to occur much sooner than if it were required to be fetched by the network first during navigation. This can have an effect on responsiveness metrics such as [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/). In cases where markup is rendered on the client via JavaScript, LCP can be improved through reduced resource load delays, and client-side rendering of markup containing a page's LCP element can occur sooner.
+- Prefetching web fonts that are not already used by the current page, can eliminate layout shifts. In cases where [`font-display: swap;` is used](https://developer.chrome.com/docs/lighthouse/performance/font-display/), the swap period for the font is eliminated, resulting in faster rendering of the text and eliminating layout shifts. If a future page uses the prefetched font and the page's LCP element is a block of text using a web font, LCP for that element will also be faster.
+
 ### Prefetching on-demand JavaScript chunks
 
 [Code-splitting](/reduce-javascript-payloads-with-code-splitting) your JavaScript bundles allows you to initially load only parts of an app and lazy-load the rest. If you're using this technique, you can apply prefetch to routes or components that are not immediately necessary but will likely be requested soon.
@@ -65,23 +78,22 @@ The simplest way to implement `prefetch` is adding a `<link>` tag to the `<head>
 
 ```html
 <head>
-	...
-	<link rel="prefetch" href="index.html" as="document">
-	...
+  ...
+  <link rel="prefetch" href="/articles/" as="document">
+  ...
 </head>
-
 ```
 
-The `as` attribute is not mandatory, but it's recommended. It helps the browser set the right headers, and determine whether the resource is already in the cache. Example values for this attribute include: `document`, `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes).
+The `as` attribute helps the browser set the right headers, and determine whether the resource is already in the cache. Example values for this attribute include: `document`, `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
 
-You can also initiate prefetching via the [`Link` HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link):
+You can also initiate prefetching via the [`Link` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link):
 
 `Link: </css/style.css>; rel=prefetch`
 
 A benefit of specifying a prefetch hint in the HTTP Header is that the browser doesn't need to parse the document to find the resource hint, which can offer small improvements in some cases.
 
 {% Aside %}
-`prefetch` is supported in [all modern browsers except Safari](https://caniuse.com/#search=prefetch). You can implement a fallback technique for Safari with [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) requests or the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+`prefetch` is supported in [all modern browsers except Safari](https://caniuse.com/#search=prefetch). You can implement a fallback technique for Safari with [XHR](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) requests or the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API).
 {% endAside %}
 
 ### Prefetching JavaScript modules with webpack magic comments
@@ -92,11 +104,11 @@ The following code snippet lazy-loads a sorting functionality from the [lodash](
 
 ```js
 form.addEventListener("submit", e => {
-	e.preventDefault()
-	import('lodash.sortby')
-		.then(module => module.default)
-		.then(sortInput())
-		.catch(err => { alert(err) });
+  e.preventDefault()
+  import('lodash.sortby')
+    .then(module => module.default)
+    .then(sortInput())
+    .catch(err => { alert(err) });
 });
 ```
 
@@ -112,35 +124,35 @@ form.addEventListener("submit", e => {
 });
 ```
 
-This tells webpack to inject the `<link rel=”prefetch”>` tag into the HTML document:
+This tells webpack to inject the `<link rel="prefetch">` tag into the HTML document:
 
 ```html
-<link rel="prefetch" as=”script” href=”1.bundle.js”>
+<link rel="prefetch" as="script" href="1.bundle.js">
 ```
 
+The performance benefits of prefetching on-demand chunks is a bit nuanced, but generally speaking, you could expect to see faster responses to interactions which depend on those on-demand chunks, as they will be immediately available. Depending on the nature of the interaction, this could impart a benefit to a page's INP.
+
+Prefetching in general also factors into overall [resource prioritization](/prioritize-resources/). When a resource is prefetched, it is done so at the lowest possible priority. Thus, any prefetched resources will not contend for bandwidth for resources needed by the current page.
+
 ### Smart prefetching with quicklink and Guess.js
 
 You can also implement smarter prefetching with libraries that use `prefetch` under the hood:
 
-- [quicklink](https://github.com/GoogleChromeLabs/quicklink) uses [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when links come into the viewport and prefetches linked resources during [idle time](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback). Bonus: quicklink weighs less than 1 KB!
+- [quicklink](https://github.com/GoogleChromeLabs/quicklink) uses [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) to detect when links come into the viewport and prefetches linked resources during [idle time](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback). Bonus: quicklink weighs less than 1 KB!
 - [Guess.js](https://github.com/guess-js) uses analytics reports to build a predictive model that is used to [smartly prefetch](/predictive-prefetching/) only what the user is likely to need.
 
-Both quicklink and Guess.js use the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to avoid prefetching if a user is on a slow network or has [`Save-Data`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data) turned on.
-
-{% Aside %}
-A wine company Jabong implemented prefetching with quicklink and achieved 2.7 s faster Time To Interactive on future pages.
-{% endAside %}
+Both quicklink and Guess.js use the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) to avoid prefetching if a user is on a slow network or has [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data) turned on.
 
 ## Prefetching under the hood
 
 Resource hints are not mandatory instructions and it's up to the browser to decide if, and when, they get executed.
 
-You can use prefetch multiple times in the same page. The browser queues up all hints and requests each resource when it's [idle](https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#How_is_browser_idle_time_determined.3F). In Chrome, if a prefetch has not finished loading and the user navigates to the destined prefetch resource, the in-flight load is picked up as the navigation by the browser (other browser vendors might implement this differently).
+You can use prefetch multiple times in the same page. The browser queues up all hints and requests each resource when it's [idle](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ#How_is_browser_idle_time_determined.3F). In Chrome, if a prefetch has not finished loading and the user navigates to the destined prefetch resource, the in-flight load is picked up as the navigation by the browser (other browser vendors might implement this differently).
 
 Prefetching takes place at the ['Lowest' priority](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit), so prefetched resources do not compete for bandwidth with the resources required in the current page.
 
-Prefetched files are stored in the [HTTP Cache](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching), or the [memory cache](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) (depending on whether the resource is cacheable or not), for an amount of time that varies by browsers. For example, in Chrome resources are kept around for five minutes, after which the normal cache-control rules for the resource apply.
+Prefetched files are stored in the [HTTP Cache](https://developer.mozilla.org/docs/Web/HTTP/Caching), or the [memory cache](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) (depending on whether the resource is cacheable or not), for an amount of time that varies by browsers. For example, in Chrome resources are kept around for five minutes, after which the normal `Cache-Control` rules for the resource apply.
 
 ## Conclusion
 
-Using `prefetch` can greatly improve load times of future navigations and even make pages appear to load instantly. `prefetch` is widely supported in modern browsers, which makes it an attractive technique to improve the navigation experience for many users. This technique requires loading extra bytes that might not be used, so be mindful when you use it; only do it when necessary, and ideally, only on fast networks.
\ No newline at end of file
+Using `prefetch` can greatly improve load times of future navigations and even make pages appear to load instantly. `prefetch` is widely supported in modern browsers, which makes it an attractive technique to improve the navigation experience for many users. This technique requires loading extra bytes that might not be used, so be mindful when you use it; only do it when necessary, and ideally, only on fast networks.
diff --git a/src/site/content/en/blog/link-prefetch/prefetch.png b/src/site/content/en/blog/link-prefetch/prefetch.png
deleted file mode 100644
index 0f38452670a..00000000000
Binary files a/src/site/content/en/blog/link-prefetch/prefetch.png and /dev/null differ
diff --git a/src/site/content/en/blog/little-alchemy/index.md b/src/site/content/en/blog/little-alchemy/index.md
new file mode 100644
index 00000000000..175e46c917d
--- /dev/null
+++ b/src/site/content/en/blog/little-alchemy/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Little Alchemy
+date: 2015-04-08
+updated: 2015-04-08
+authors:
+  - pbakaus
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UMRTodImzQkE65TkMkeV.png", alt="Little Alchemy detail", width="159", height="313" %}
+</figure>
+
+## Summary
+
+[Little Alchem](http://littlealchemy.com/): A fun, mobile-friendly combination
+game inspired by its bigger brother Alchemy.
+
+### What we like?
+
+Little Alchemy is a prime example of using all of the web platform's latest
+abilities to its full advantage. It uses the
+[web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/simplified-app-installs)
+to launch fullscreen when installed and blends in with Android with the help of
+[theme-color](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/).
+
+The first time load is extremely responsive and shows the preloader right
+away. In addition, it can be played entirely offline through its use of
+AppCache. Well done.
+
+### Possible Improvements
+
+On Desktop, blocking right clicking is usually considered no-no (but it
+allowed me to find the secret cheat code by mistyping the Chrome DevTools
+shortcut :)). Not a terribly big deal for a game though.
+
+UI-wise, a grid might improve the 'all-over-the-place' feel, and when
+dragging elements on mobile, shifting them slightly to the top so that you
+can see what you're moving below your finger could improve visibility.
+
+## Q & A with Jakub Koziol
+
+### Why the web?
+
+Instant access, truly cross-platform and the most convenient way of sharing on
+top of that. If that doesn’t sound good I don’t know what does.
+
+Little Alchemy started as an experiment for Chrome Web Store a few years back.
+Over time we expanded to other platforms but the web version remains our main
+focus. Right now all of our native apps are directly based on the web app. It
+cuts a lot of work and streamlines the process of updating the game, which is
+incredibly important for a tiny team like ours.
+
+### What worked really well during development?
+
+With the current iteration of Little Alchemy we focused a lot on the mobile
+web. During the development we worked with many physical devices and remote
+Chrome DevTools helped us to significantly speed up the process.
+
+We also really enjoyed the work on performance and responsive design. Current
+set of tools in Chrome allows for very efficient work on these aspects of the
+app.
+
+### If you could have any API to improve your app, what would it be?
+
+Games are usually heavily dependent on images. For example we have a library
+of over 500 images that need to be scalable and for the optimal experience
+they should be loaded before the player starts the game. It requires different
+logic than your typical web app where you can lazy load and use atlases. Having
+a way to deal with that in an efficient way would save us a lot of work and
+would make for a better experience for our players.
+
+Also monetization of web games is still problematic. It’s almost impossible to
+implement payments without going straight into free to play and there aren’t
+many elegant ways to support HTML5 games with ads. It’s an issue that inform
+the types and quality of games on the web platform.
diff --git a/src/site/content/en/blog/live-wrap-up/audits.png b/src/site/content/en/blog/live-wrap-up/audits.png
deleted file mode 100644
index b1bb15cace1..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/audits.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/corewebvitals.png b/src/site/content/en/blog/live-wrap-up/corewebvitals.png
deleted file mode 100644
index 7747cb2ba4b..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/corewebvitals.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/emulator.png b/src/site/content/en/blog/live-wrap-up/emulator.png
deleted file mode 100644
index 2255aaa0ed4..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/emulator.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/hero.png b/src/site/content/en/blog/live-wrap-up/hero.png
deleted file mode 100644
index f78681d88af..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/index.md b/src/site/content/en/blog/live-wrap-up/index.md
index a6abd38ca5b..c2c6394bfc9 100644
--- a/src/site/content/en/blog/live-wrap-up/index.md
+++ b/src/site/content/en/blog/live-wrap-up/index.md
@@ -8,8 +8,8 @@ description: >
   A summary of the major news and updates that were announced during our
   3-day online community event, and a reminder about upcoming regional events.
 date: 2020-07-06
-hero: hero.png
-thumbnail: thumbnail.png
+hero: image/admin/H60ns6FN1VtNrlx8e3EU.png
+thumbnail: image/admin/d2asSQy3UHgqRF8sx1Xk.png
 alt: The web.dev LIVE logo.
 tags:
   - blog
@@ -51,8 +51,8 @@ Vitals](/vitals/#core-web-vitals) metrics as its foundation.
 The three pillars of the 2020 Core Web Vitals are loading, interactivity, and visual stability of
 page content, which are captured by the following metrics:
 
-<figure class="w-figure">
-  <img src="corewebvitals.png" alt="An illustration of the Core Web Vitals.">
+<figure>
+  {% Img src="image/admin/kzOdl2pRyEEPEQI0U2lQ.png", alt="An illustration of the Core Web Vitals.", width="800", height="232" %}
 </figure>
 
 + [Largest Contentful Paint](/lcp/) measures perceived load speed and
@@ -74,7 +74,7 @@ of your web development project, taking on a key role in handling your developer
 lifecycle.
 
 We have all seen unwieldy build config files, so to help web developers _and_ tooling authors
-conquer the complexity of the web, we built [tooling.report](https://web.dev/introducing-tooling-report). It's a website
+conquer the complexity of the web, we built [tooling.report](/introducing-tooling-report). It's a website
 that helps you choose the right build tool for your next project, decide if migrating from one tool
 to another is worth it, or figure out how to incorporate best practices into your tooling
 configuration and code base.
@@ -83,8 +83,8 @@ We designed a suite of tests to determine which build tools allow you to follow
 web development best practices. We worked with the build tool authors to
 make sure we used their tools correctly and represented them fairly.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="toolingreport.png" alt="A screenshot of the tooling.report UI.">
+<figure>
+  {% Img src="image/admin/awFmvfMqFv3gvbpIICJY.png", alt="A screenshot of the tooling.report UI.", width="800", height="316" %}
 </figure>
 
 The initial release of tooling.report covers webpack v4, Rollup v2, Parcel v2, and Browserify with Gulp,
@@ -140,8 +140,8 @@ learn more.
 
 Chrome wants you to be free to create the highest quality web apps that give you the biggest reach
 to users across devices. Combining the installability and reliability of PWAs, with the
-[capabilities project](/fugu-status/) (Project Fugu), Chrome is focusing on three
-things to close the gap between native and the web, to help you build and deliver great
+[capabilities project](https://developer.chrome.com/blog/fugu-status/) (Project Fugu), Chrome is focusing on three
+things to close the gap between platform-specific apps and the web, to help you build and deliver great
 experiences.
 
 First, Chrome teams have been working hard to give web developers and users [more control over the install
@@ -165,12 +165,12 @@ land in Chrome 84 (mid-July 2020).
 
 And finally, Chrome has been working on new capabilities that enable new scenarios that weren't
 possible before, like editors that [read and write to files on the user's local file
-system](/native-file-system/), or get the list of locally installed fonts so that
+system](/file-system-access/), or get the list of locally installed fonts so that
 users can use them in their designs.
 
 During web.dev LIVE, we spoke about [lots of other capabilities and
 features](https://youtu.be/NXCT3htg9nk) that can enable you to deliver the same kind of experience,
-with the same capabilities, as native apps. See all sessions at [web.dev/live](/live)
+with the same capabilities, as platform-specific apps. See all sessions at [web.dev/live](/live)
 in the Day 2 schedule.
 
 ## What's new in Chrome DevTools and Lighthouse 6.0
@@ -181,14 +181,14 @@ One of the most powerful features of Chrome DevTools is its ability to spot issu
 bring them to the developer's attention. This is most pertinent as we move into the next phase of a
 [privacy-first web](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html).
 To reduce notification fatigue and clutter in the Console, Chrome DevTools launched the [Issues
-tab](https://developers.google.com/web/tools/chrome-devtools/issues) which focuses on three types of
+tab](https://developer.chrome.com/docs/devtools/issues/) which focuses on three types of
 critical issues to start with: [cookie problems](/samesite-cookies-explained),
-[mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content),
+[mixed content](/what-is-mixed-content/),
 and [COEP issues](/coop-coep/). Watch the web.dev LIVE session on [finding and fixing
 problems with the Issues tab](https://youtu.be/1TbkSxQb4bI) to get started.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="issues.png" alt="A screenshot of the Issues tab.">
+<figure>
+  {% Img src="image/admin/G7AmzK1btOMBUPEhnFhV.png", alt="A screenshot of the Issues tab.", width="800", height="535" %}
 </figure>
 
 Moreover, with the [Core Web Vitals](/vitals/#core-web-vitals) becoming one of the
@@ -203,14 +203,13 @@ emulate blurred vision and other types of vision deficiencies. You
 can learn more about this and many other features in the [What's new in
 DevTools](https://youtu.be/6yrJZHqJe2k) session.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="emulator.png"
-       alt="A screenshot of the vision deficiencies emulator.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3gTvVdPvTN3IUyhSN8gn.png", alt="A screenshot of the vision deficiencies emulator.", width="800", height="509" %}
 </figure>
 
 ### Lighthouse 6.0: New metrics, Core Web Vitals lab measurements, an updated Performance score, and new audits
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse) is an open-source automated tool
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is an open-source automated tool
 that helps developers improve their site's performance. In its latest version, the Lighthouse team
 focused on providing insights based on metrics that give you a balanced view of the quality of your
 user experience against critical dimensions.
@@ -220,9 +219,9 @@ To ensure consistency, Lighthouse added support for the Core Web Vitals:
 [FID](/fid/) since Lighthouse is a lab tool and FID can only be
 measured in the field) and [CLS](/cls/). Lighthouse also removed
 three old metrics: [First Meaningful
-Paint](/first-meaningful-paint/), [First CPU
-Idle](/first-cpu-idle/), and [Max Potential
-FID](/lighthouse-max-potential-fid/). These removals are due to
+Paint](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/), [First CPU
+Idle](https://developer.chrome.com/docs/lighthouse/performance/first-cpu-idle/), and [Max Potential
+FID](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/). These removals are due to
 considerations like metric variability and newer metrics offering better
 reflections of the part of user experience that Lighthouse is trying to measure.
 Additionally, Lighthouse also made some adjustments to how much each metric
@@ -237,9 +236,8 @@ And finally, Lighthouse added a bunch of [new
 audits](/lighthouse-whats-new-6.0/#new-audits), with a focus on JavaScript analysis
 and accessibility.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="audits.png"
-       alt="A list of the new audits.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qAVFUVHR7Ad0tm05J1d3.png", alt="A list of the new audits.", width="800", height="450" %}
 </figure>
 
 Learn more by watching the [What's new in speed tooling](https://youtu.be/yDHfrhCGFQw)
diff --git a/src/site/content/en/blog/live-wrap-up/issues.png b/src/site/content/en/blog/live-wrap-up/issues.png
deleted file mode 100644
index a0393cd8ab6..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/issues.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/thumbnail.png b/src/site/content/en/blog/live-wrap-up/thumbnail.png
deleted file mode 100644
index ca3599891da..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/live-wrap-up/toolingreport.png b/src/site/content/en/blog/live-wrap-up/toolingreport.png
deleted file mode 100644
index 60c0bec89a7..00000000000
Binary files a/src/site/content/en/blog/live-wrap-up/toolingreport.png and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/hero.jpg b/src/site/content/en/blog/load-faster-like-proxx/hero.jpg
deleted file mode 100644
index e53ebd0fec1..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/index.md b/src/site/content/en/blog/load-faster-like-proxx/index.md
index 7e505a6f13e..28b736ebf23 100644
--- a/src/site/content/en/blog/load-faster-like-proxx/index.md
+++ b/src/site/content/en/blog/load-faster-like-proxx/index.md
@@ -4,7 +4,8 @@ subhead: How we used code splitting, code inlining, and server-side rendering in
 authors:
   - surma
 date: 2019-09-23
-hero: hero.jpg
+updated: 2021-05-19
+hero: image/admin/14VzGmCgR470nlhPy3Fv.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 hero_position: center
@@ -14,9 +15,9 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
+  - memory
 ---
 
-
 At Google I/O 2019 Mariko, Jake, and I shipped [PROXX], a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability to run as well on a feature phone as on a high-end desktop device. Feature phones are constrained in multiple ways:
 
 * Weak CPUs
@@ -26,15 +27,16 @@ At Google I/O 2019 Mariko, Jake, and I shipped [PROXX], a modern Minesweeper-clo
 
 But they run a modern browser and are very affordable. For this reason, feature phones are making a resurgence in emerging markets. Their price point allows a whole new audience, who previously couldn't afford it, to come online and make use of the modern web. **[For 2019 it is projected that around 400 million feature phones will be sold in India alone][400mil]**, so users on feature phones might become a significant portion of your audience. In addition to that, connection speeds akin to 2G are the norm in emerging markets. How did we manage to make PROXX work well under feature phone conditions?
 
-<figure class="w-figure">
-  <video controls loop muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/social_supercut_poster.jpg"
-      src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/social_supercut_x264.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/0Z2YqHWp5ToNzqlU40ng.mp4",
+    preload="metadata",
+       poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FuAyD4tBgrjLsbXuFs5l.jpg",
+    controls=true,
+    loop=true,
+    muted=true
+  %}
+  <figcaption>
     PROXX gameplay.
   </figcaption>
 </figure>
@@ -55,27 +57,23 @@ Testing your loading performance on a _real_ device is critical. If you don't ha
 
 That being said, we're going to focus on 2G in this article because PROXX is explicitly targeting feature phones and emerging markets in its target audience. Once WebPageTest has run its test, you get a waterfall (similar to what you see in DevTools) as well as a filmstrip at the top. The film strip shows what your user sees while your app is loading. On 2G, the loading experience of the unoptimized version of PROXX is pretty bad:
 
-<figure class="w-figure">
-  <video controls muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/stupid-proxx-load-poster.jpg"
-      src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/stupid-proxx-load.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/BXNCRVkyZeVHPWJ9WGcI.mp4",
+    poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CuprSULvVI7IKyS35eCA.jpg",
+    controls=true,
+    muted=true,
+    preload="metadata" %}
+  <figcaption>
     The filmstrip video shows what the user sees when PROXX is loading on a real, low-end device over an emulated 2G connection.
   </figcaption>
 </figure>
 
 When loaded over 3G, the user sees 4 seconds of white nothingness. **Over 2G the user sees absolutely nothing for over 8 seconds.** If you read [why performance matters] you know that we have now lost a good portion of our potential users due to impatience. The user needs to download all of the 62 KB of JavaScript for anything to appear on screen. The silver lining in this scenario is that the second anything appears on screen it is also interactive. Or is it?
 
-<figure class="w-figure">
-  <picture>
-    <source srcset="proxx-first-render.webp" type="image/webp">
-    <img src="proxx-first-render.jpg">
-  </picture>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CwGKJEpvyPw9UmvJf3su.webp", alt="", width="800", height="450" %}
+  <figcaption>
 
 The [First Meaningful Paint][FMP] in the unoptimized version of PROXX is _technically_ [interactive][TTI] but useless to the user.
 
@@ -91,11 +89,9 @@ Now that we know _what_ the user sees, we need to figure out the _why_. For this
 1. There are multiple, multi-colored thin lines.
 2. JavaScript files form a chain. For example, the second resource only starts loading once the first resource is finished, and the third resource only starts when the second resource is finished.
 
-<figure class="w-figure">
-  <picture>
-    <img src="waterfall_opt.png">
-  </picture>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Vcd5JU5MJNr0IHyMMtAU.png", alt="", width="800", height="345" %}
+  <figcaption>
     The waterfall gives insight into which resources are loading when and how long they take.
   </figcaption>
 </figure>
@@ -108,7 +104,7 @@ Each thin line (`dns`, `connect`, `ssl`) stands for the creation of a new HTTP c
 - Request #5: The font styles from `fonts.googleapis.com`
 - Request #8: Google Analytics
 - Request #9: A font file from `fonts.gstatic.com`
-- Request #14: The Web App Manifest
+- Request #14: The web app manifest
 
 The new connection for `index.html` is unavoidable. The browser _has_ to create a connection to our server to get the contents. The new connection for Google Analytics could be avoided by inlining something like [Minimal Analytics], but Google Analytics is not blocking our app from rendering or becoming interactive, so we don't really care about how fast it loads. Ideally, Google Analytics should be loaded in idle time, when everything else has already loaded. That way it won't take up bandwidth or processing power during the initial load. The new connection for the web app manifest is [prescribed by the fetch spec][fetch connections], as the manifest has to be loaded over a non-credentialed connection. Again, the web app manifest doesn't block our app from rendering or becoming interactive, so we don't need to care that much.
 
@@ -119,21 +115,21 @@ The two fonts and their styles, however, are a problem as they block rendering a
 {% endAside %}
 
 ### Parallelizing loads
+
 Looking at the waterfall, we can see that once the first JavaScript file is done loading, new files start loading immediately. This is typical for module dependencies. Our main module probably has static imports, so the JavaScript cannot run until those imports are loaded. The important thing to realize here is that these kinds of dependencies are known at build time. We can make use of `<link rel="preload">` tags to make sure all dependencies start loading the second we receive our HTML.
 
 ### Results
 
 Let's take a look at what our changes have achieved. It's important to not change any other variables in our test setup that could skew the results, so we will be using [WebPageTest's simple setup][wpt simple] for the rest of this article and look at the filmstrip:
 
-<figure class="w-figure">
-  <video controls muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/preload-proxx-load-poster.jpg"
-      src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/preload-proxx-load.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/v76UWV9zidMILuFlLpaX.mp4",
+    poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjJ410ZPSr99njy4KMoh.jpg",
+    controls=true,
+    muted=true,
+    preload="metadata" %}
+  <figcaption>
     We use WebPageTest's filmstrip to see what our changes have achieved.
   </figcaption>
 </figure>
@@ -158,15 +154,14 @@ There are many ways to implement a prerenderer. In PROXX we chose to use [Puppet
 
 With this in place, we can expect an improvement for our FMP. We still need to load and execute the same amount of JavaScript as before, so we shouldn't expect TTI to change much. If anything, our `index.html` has gotten bigger and might push back our TTI a bit. There's only one way to find out: running WebPageTest.
 
-<figure class="w-figure">
-  <video controls muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/ssr-proxx-load-poster.jpg"
-      src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/ssr-proxx-load.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/kkHfcTZnTgdSAuWlYFfj.mp4",
+    poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lzm3LUZs6FPr7hxZsWO8.jpg",
+    controls=true,
+    muted=true,
+    preload="metadata" %}
+  <figcaption>
     The filmstrip shows a clear improvement for our FMP metric. TTI is mostly unaffected.
   </figcaption>
 </figure>
@@ -175,13 +170,11 @@ With this in place, we can expect an improvement for our FMP. We still need to l
 
 ## Inlining
 
-Another metric that both DevTools and WebPageTest give us is [Time To First Byte (TTFB)][ttfb]. This is the time it takes from the first byte of the request being sent to the first byte of the response being received. This time is also often called a Round Trip Time (RTT), although technically there is a difference between these two numbers: RTT does not include the processing time of the request on the server side. [DevTools](https://developers.google.com/web/tools/chrome-devtools/network/reference#timing-preview) and WebPageTest visualize TTFB with a light color within the request/response block.
+Another metric that both DevTools and WebPageTest give us is [Time To First Byte (TTFB)][ttfb]. This is the time it takes from the first byte of the request being sent to the first byte of the response being received. This time is also often called a Round Trip Time (RTT), although technically there is a difference between these two numbers: RTT does not include the processing time of the request on the server side. [DevTools](https://developer.chrome.com/docs/devtools/network/reference/#timing-preview) and WebPageTest visualize TTFB with a light color within the request/response block.
 
-<figure class="w-figure">
-  <picture>
-    <img src="ttfb.svg">
-  </picture>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J86O71iJ9OPjlginvwrp.svg", alt="", width="800", height="171" %}
+  <figcaption>
     The light section of a request signifies the request is waiting to receive the first byte of the response.
   </figcaption>
 </figure>
@@ -196,15 +189,14 @@ Our critical CSS is already inlined thanks to CSS Modules and our Puppeteer-base
   **Note:** In this step we also subset our font files to contain only the glyphs that we need for our landing page. I am not going to go into detail on this step as it is not easily abstracted and sometimes not even practical. We still load the full font files lazily, but they are not needed for the initial render.
 {% endAside %}
 
-<figure class="w-figure">
-  <video controls muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/ssr-proxx-load-poster.jpg"
-      src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/ssr-proxx-load.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/kkHfcTZnTgdSAuWlYFfj.mp4",
+    poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lzm3LUZs6FPr7hxZsWO8.jpg",
+    controls=true,
+    muted=true,
+    preload="metadata" %}
+  <figcaption>
     With the inlining of our JavaScript we have reduced our TTI from 8.5s to 7.2s.
   </figcaption>
 </figure>
@@ -215,23 +207,18 @@ This shaved 1 second off our TTI. We have now reached the point where our `index
 
 Yes, our `index.html` contains everything that is needed to become interactive. But on closer inspection it turns out it also contains everything else. Our `index.html` is around 43 KB. Let's put that in relation to what the user can interact with at the start: We have a form to configure the game containing a couple of components, a start button and probably some code to persist and load user settings. That's pretty much it. 43 KB seems like a lot.
 
-<figure class="w-figure">
-  <picture>
-    <source srcset="proxx-loaded.webp" type="image/webp">
-    <img src="proxx-loaded.jpg">
-  </picture>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PDjREt9PrWz9oqayT3CE.webp", alt="", width="800", height="450" %}
+  <figcaption>
     The landing page of PROXX. Only critical components are used here.
   </figcaption>
 </figure>
 
 To understand where our bundle size is coming from we can use a [source map explorer] or a similar tool to break down what the bundle consists of. As predicted, our bundle contains the game logic, the rendering engine, the win screen, the lose screen and a bunch of utilities. Only a small subset of these modules are needed for the landing page. Moving everything that is not strictly required for interactivity into a lazily-loaded module will decrease TTI _significantly_.
 
-<figure class="w-figure">
-  <picture>
-    <img src="sourcemap.svg">
-  </picture>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4j3GRcHylDnIuwhH8iKT.svg", alt="", width="700", height="700" %}
+  <figcaption>
     Analyzing the contents of PROXX's `index.html` shows a lot of unneeded resources. Critical resources are highlighted.
   </figcaption>
 </figure>
@@ -281,15 +268,14 @@ return (
 
 With all of this in place, we reduced our `index.html` to a mere 20 KB, less than half of the original size. What effect does this have on FMP and TTI? WebPageTest will tell!
 
-<figure class="w-figure">
-  <video controls muted
-    preload="metadata"
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/optimized-proxx-load-poster.jpg"
-     src="https://storage.googleapis.com/web-dev-assets/js-heavy-sites/optimized-proxx-load.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Video
+    src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/byNSMGzFX0aSXRBmI1HM.mp4",
+    poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d2y6ZrlYkcfHTsmaP4m5.jpg",
+    controls=true,
+    muted=true,
+    preload="metadata" %}
+  <figcaption>
     The filmstrip confirms: Our TTI is now at 5.4s. A drastic improvement from our original 11s.
   </figcaption>
 </figure>
@@ -297,6 +283,7 @@ With all of this in place, we reduced our `index.html` to a mere 20 KB, less tha
 Our FMP and TTI are only 100ms apart, as it is only a matter of parsing and executing the inlined JavaScript. After just 5.4s on 2G, the app is completely interactive. All the other, less essential modules are loaded in the background.
 
 ## More Sleight of Hand
+
 If you look at our list of critical modules above, you'll see that the rendering engine is not part of the critical modules. Of course, the game cannot start until we have our rendering engine to render the game. We could disable the "Start" button until our rendering engine is ready to start the game, but in our experience the user usually takes long enough to configure their game settings that this isn't necessary. Most of the time the rendering engine and the other remaining modules are done loading by the time the user presses "Start". In the rare case that the user is quicker than their network connection, we show a simple loading screen that waits for the remaining modules to finish.
 
 ## Conclusion
@@ -319,23 +306,22 @@ Stay tuned for part 2 where we discuss how to optimize runtime performance on hy
 [parcel]: https://parceljs.org
 [phil walton]: https://twitter.com/philwalton
 [iuu]: https://philipwalton.com/articles/idle-until-urgent/
-[why performance matters]: https://developers.google.com/web/fundamentals/performance/why-performance-matters/
+[why performance matters]: /why-speed-matters/
 [jeremy wagner]: https://twitter.com/malchata
 [webpagetest]: https://webpagetest.org
 [wpt simple]: https://webpagetest.org/easy
 [preact]: https://preactjs.com
 [source map explorer]: https://npm.im/source-map-explorer
-[rendering]: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
+[rendering]: /rendering-on-the-web/
 [puppeteer]: https://pptr.dev
 [css modules]: https://github.com/css-modules/css-modules
 [minimal analytics]: https://minimalanalytics.com
 [fetch connections]: https://fetch.spec.whatwg.org/#connections
 [google fonts]: https://fonts.google.com
-[fmp]: /first-meaningful-paint
-[tti]: /interactive
+[fmp]: https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/
+[tti]: https://developer.chrome.com/docs/lighthouse/performance/interactive/
 [code split]: /reduce-javascript-payloads-with-code-splitting/
 [preact]: /codelab-code-splitting
 [preload]:/preload-critical-assets
 [400mil]: https://www.counterpointresearch.com/more-than-a-billion-feature-phones-to-be-sold-over-next-three-years/
-[ttfb]: /time-to-first-byte
-
+[ttfb]: /ttfb/
diff --git a/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.jpg b/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.jpg
deleted file mode 100644
index ef3ad372341..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.webp b/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.webp
deleted file mode 100644
index 98705c4ca96..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/proxx-first-render.webp and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.jpg b/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.jpg
deleted file mode 100644
index 06fcddb3f49..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.webp b/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.webp
deleted file mode 100644
index c0036678cf5..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/proxx-loaded.webp and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/proxx-unoptimized-timeline.png b/src/site/content/en/blog/load-faster-like-proxx/proxx-unoptimized-timeline.png
deleted file mode 100644
index 582213ed39b..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/proxx-unoptimized-timeline.png and /dev/null differ
diff --git a/src/site/content/en/blog/load-faster-like-proxx/sourcemap.svg b/src/site/content/en/blog/load-faster-like-proxx/sourcemap.svg
deleted file mode 100644
index e1e9a62f9d2..00000000000
--- a/src/site/content/en/blog/load-faster-like-proxx/sourcemap.svg
+++ /dev/null
@@ -1,219 +0,0 @@
-<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
-<style>
-    #map {
-      --highlight: #ccc;
-      background-color: #eee;
-      font-family: monospace;
-      color: #333;
-    }
-    .webtreemap-node {
-      margin: 3px 0;
-      padding: 3px 7px;
-      border: 1px solid #bbb;
-      border-radius: 2px;
-      display: grid;
-      place-content: flex-start stretch;
-      place-items: flex-start stretch;
-    }
-    .webtreemap-caption {
-      grid-column: 1 / -1;
-    }
-    .webtreemap-level0 {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 6px;
-    }
-    @media (max-width: 480px) {
-      .webtreemap-level0 {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-  </style>
-<foreignObject x="0" y="0" width="100%" height="100%">
-  <div id="map" xmlns="http://www.w3.org/1999/xhtml">
-    <div class="webtreemap-node webtreemap-level0" title="/ • 117.39 KB • 100.0%">
-      <div class="webtreemap-caption">/ • 117.39 KB • 100.0%</div>
-      <div
-        class="webtreemap-node webtreemap-level1"
-        title="src • 101.51 KB • 86.5%"
-      >
-        <div class="webtreemap-caption">src • 101.51 KB • 86.5%</div>
-        <div
-          class="webtreemap-node webtreemap-level2"
-          title="main • 101.06 KB • 86.1%"
-        >
-          <div class="webtreemap-caption">main • 101.06 KB • 86.1%</div>
-          <div
-            class="webtreemap-node webtreemap-level3"
-            title="services • 60.78 KB • 51.8%"
-          >
-            <div class="webtreemap-caption">services • 60.78 KB • 51.8%</div>
-            <div
-              class="webtreemap-node webtreemap-level4"
-              title="preact-canvas • 58.01 KB • 49.4%"
-            >
-              <div class="webtreemap-caption">
-                preact-canvas • 58.01 KB • 49.4%
-              </div>
-              <div
-                class="webtreemap-node webtreemap-level4"
-                title="components • 50.69 KB • 43.2%"
-              >
-                <div class="webtreemap-caption">
-                  components • 50.69 KB • 43.2%
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="about • 8.15 KB • 6.9%"
-                >
-                  <div class="webtreemap-caption">about • 8.15 KB • 6.9%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="board • 7.93 KB • 6.8%"
-                >
-                  <div class="webtreemap-caption">board • 7.93 KB • 6.8%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="nebula • 5.94 KB • 5.1%"
-                >
-                  <div class="webtreemap-caption">nebula • 5.94 KB • 5.1%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="showbiz-title • 4.46 KB • 3.8%"
-                >
-                  <div class="webtreemap-caption">
-                    showbiz-title • 4.46 KB • 3.8%
-                  </div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="top-bar • 4.16 KB • 3.5%"
-                  style="background-color: var(--highlight)"
-                >
-                  <div class="webtreemap-caption">top-bar • 4.16 KB • 3.5%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="game • 4.07 KB • 3.5%"
-                >
-                  <div class="webtreemap-caption">game • 4.07 KB • 3.5%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="intro • 3.79 KB • 3.2%"
-                  style="background-color: var(--highlight)"
-                >
-                  <div class="webtreemap-caption">intro • 3.79 KB • 3.2%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="bottom-bar • 3.53 KB • 3.0%"
-                  style="background-color: var(--highlight)"
-                >
-                  <div class="webtreemap-caption">
-                    bottom-bar • 3.53 KB • 3.0%
-                  </div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="win • 3.04 KB • 2.6%"
-                >
-                  <div class="webtreemap-caption">win • 3.04 KB • 2.6%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="icons • 1.83 KB • 1.6%"
-                >
-                  <div class="webtreemap-caption">icons • 1.83 KB • 1.6%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="settings • 1.65 KB • 1.4%"
-                >
-                  <div class="webtreemap-caption">settings • 1.65 KB • 1.4%</div>
-                </div>
-                <div
-                  class="webtreemap-node webtreemap-level4"
-                  title="game-loading • 1.5 KB • 1.3%"
-                >
-                  <div class="webtreemap-caption">
-                    game-loading • 1.5 KB • 1.3%
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="webtreemap-node webtreemap-level3"
-            title="rendering • 27.54 KB • 23.5%"
-          >
-            <div class="webtreemap-caption">rendering • 27.54 KB • 23.5%</div>
-          </div>
-          <div
-            class="webtreemap-node webtreemap-level3"
-            title="utils • 10.74 KB • 9.2%"
-          >
-            <div class="webtreemap-caption">utils • 10.74 KB • 9.2%</div>
-            <div
-              class="webtreemap-node webtreemap-level4"
-              title="shaderbox.ts • 5.9 KB • 5.0%"
-            >
-              <div class="webtreemap-caption">shaderbox.ts • 5.9 KB • 5.0%</div>
-            </div>
-            <div
-              class="webtreemap-node webtreemap-level4"
-              title="focus-visible.js • 2.32 KB • 2.0%"
-            >
-              <div class="webtreemap-caption">
-                focus-visible.js • 2.32 KB • 2.0%
-              </div>
-            </div>
-            <div
-              class="webtreemap-node webtreemap-level4"
-              title="cell-sizing.ts • 1.44 KB • 1.2%"
-            >
-              <div class="webtreemap-caption">
-                cell-sizing.ts • 1.44 KB • 1.2%
-              </div>
-            </div>
-          </div>
-          <div
-            class="webtreemap-node webtreemap-level3"
-            title="offline • 1.54 KB • 1.3%"
-          >
-            <div class="webtreemap-caption">offline • 1.54 KB • 1.3%</div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="webtreemap-node webtreemap-level1"
-        title="node_modules • 15.06 KB • 12.8%"
-      >
-        <div class="webtreemap-caption">node_modules • 15.06 KB • 12.8%</div>
-        <div
-          class="webtreemap-node webtreemap-level2"
-          title="preact • 8.2 KB • 7.0%"
-          style="background-color: var(--highlight)"
-        >
-          <div class="webtreemap-caption">preact • 8.2 KB • 7.0%</div>
-        </div>
-        <div
-          class="webtreemap-node webtreemap-level2"
-          title="comlink • 3.32 KB • 2.8%"
-        >
-          <div class="webtreemap-caption">comlink • 3.32 KB • 2.8%</div>
-        </div>
-        <div
-          class="webtreemap-node webtreemap-level2"
-          title="style-inject • 2.81 KB • 2.4%"
-          style="background-color: var(--highlight)"
-        >
-          <div class="webtreemap-caption">style-inject • 2.81 KB • 2.4%</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</foreignObject>
-</svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/load-faster-like-proxx/ttfb.svg b/src/site/content/en/blog/load-faster-like-proxx/ttfb.svg
deleted file mode 100644
index 6332405a77b..00000000000
--- a/src/site/content/en/blog/load-faster-like-proxx/ttfb.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1657" height="354" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#2C888E" d="M3 159h281v45H3z"/><path fill="#CF53DA" d="M565 159h281v45H565z"/><path fill="#F29239" d="M284 159h281v45H284z"/><path fill="#C1D0E1" d="M846 129h404v105H846z"/><path fill="#7FA7DE" d="M1250 129h404v105h-404z"/><path d="M847.766 333.77a2.501 2.501 0 0 0 .004-3.536l-15.891-15.928a2.5 2.5 0 1 0-3.54 3.531l14.125 14.159-14.158 14.125a2.5 2.5 0 1 0 3.531 3.54l15.929-15.891zM2.997 333.5l843 1 .006-5-843-1-.006 5z" fill="#828282"/><path d="M1.234 329.244a2.5 2.5 0 0 0-.004 3.536l15.892 15.928a2.5 2.5 0 1 0 3.54-3.531L6.535 331.018l14.158-14.125a2.5 2.5 0 0 0-3.531-3.54L1.234 329.244zm844.769.256l-843-.986-.006 5 843 .986.006-5zM1251.77 67.228c.97.974.97 2.557 0 3.535l-15.9 15.95c-.98.978-2.56.982-3.54.008a2.502 2.502 0 0 1 0-3.535l14.13-14.177-14.15-14.107a2.511 2.511 0 0 1 0-3.536 2.505 2.505 0 0 1 3.54-.009l15.92 15.87zm-405.771.272l404.001-1v5l-403.999 1-.002-5z" fill="#828282"/><path d="M844.233 71.758a2.5 2.5 0 0 1-.002-3.535l15.901-15.95a2.5 2.5 0 0 1 3.536-.008 2.5 2.5 0 0 1 .002 3.536l-14.134 14.176 14.15 14.108c.976.974.977 2.557.002 3.536a2.5 2.5 0 0 1-3.536.008l-15.919-15.871zM1250 71.5l-403.999.986-.002-5L1250 66.5v5zM266.062 301.172c-.421 3.609-1.757 6.398-4.007 8.367-2.235 1.953-5.211 2.93-8.93 2.93-4.031 0-7.266-1.446-9.703-4.336-2.422-2.891-3.633-6.758-3.633-11.602v-3.281c0-3.172.563-5.961 1.688-8.367 1.14-2.406 2.75-4.25 4.828-5.531 2.078-1.297 4.484-1.946 7.218-1.946 3.625 0 6.532 1.016 8.719 3.047 2.188 2.016 3.461 4.813 3.82 8.391h-4.523c-.391-2.719-1.242-4.688-2.555-5.906-1.296-1.219-3.117-1.829-5.461-1.829-2.875 0-5.132 1.063-6.773 3.188-1.625 2.125-2.438 5.148-2.438 9.07v3.305c0 3.703.774 6.648 2.321 8.836 1.547 2.187 3.711 3.281 6.492 3.281 2.5 0 4.414-.562 5.742-1.687 1.344-1.141 2.235-3.118 2.672-5.93h4.523zm4.336-2.086c0-2.484.485-4.719 1.454-6.703.984-1.985 2.343-3.516 4.078-4.594 1.75-1.078 3.742-1.617 5.976-1.617 3.453 0 6.242 1.195 8.367 3.586 2.141 2.39 3.211 5.57 3.211 9.539v.305c0 2.468-.476 4.687-1.429 6.656-.938 1.953-2.289 3.476-4.055 4.57-1.75 1.094-3.766 1.641-6.047 1.641-3.437 0-6.226-1.196-8.367-3.586-2.125-2.391-3.188-5.555-3.188-9.492v-.305zm4.36.516c0 2.812.648 5.07 1.945 6.773 1.313 1.703 3.063 2.555 5.25 2.555 2.203 0 3.953-.86 5.25-2.578 1.297-1.735 1.945-4.157 1.945-7.266 0-2.781-.664-5.031-1.992-6.75-1.312-1.734-3.062-2.602-5.25-2.602-2.14 0-3.867.852-5.179 2.555-1.313 1.703-1.969 4.141-1.969 7.313zm28.265-12.961l.141 3.187c1.938-2.437 4.469-3.656 7.594-3.656 5.359 0 8.062 3.023 8.109 9.07V312h-4.336v-16.781c-.015-1.828-.437-3.18-1.265-4.055-.813-.875-2.086-1.312-3.821-1.312-1.406 0-2.64.375-3.703 1.125-1.062.75-1.89 1.734-2.484 2.953V312h-4.336v-25.359h4.101zm26.485 0l.14 3.187c1.938-2.437 4.469-3.656 7.594-3.656 5.36 0 8.063 3.023 8.11 9.07V312h-4.336v-16.781c-.016-1.828-.438-3.18-1.266-4.055-.812-.875-2.086-1.312-3.82-1.312-1.407 0-2.641.375-3.703 1.125-1.063.75-1.891 1.734-2.485 2.953V312h-4.336v-25.359h4.102zm32.906 25.828c-3.437 0-6.234-1.125-8.391-3.375-2.156-2.266-3.234-5.289-3.234-9.071v-.796c0-2.516.477-4.758 1.43-6.727.969-1.984 2.312-3.531 4.031-4.641 1.734-1.125 3.609-1.687 5.625-1.687 3.297 0 5.859 1.086 7.687 3.258 1.829 2.172 2.743 5.281 2.743 9.328v1.804h-17.18c.063 2.5.789 4.524 2.18 6.071 1.406 1.531 3.187 2.297 5.343 2.297 1.532 0 2.829-.313 3.891-.938a9.773 9.773 0 0 0 2.789-2.484l2.649 2.062c-2.125 3.266-5.313 4.899-9.563 4.899zm-.539-22.735c-1.75 0-3.219.641-4.406 1.922-1.188 1.266-1.922 3.047-2.203 5.344h12.703v-.328c-.125-2.203-.719-3.906-1.781-5.11-1.063-1.218-2.5-1.828-4.313-1.828zm25.641 19.196c1.546 0 2.898-.469 4.054-1.407 1.157-.937 1.797-2.109 1.922-3.515h4.102c-.078 1.453-.578 2.836-1.5 4.148-.922 1.313-2.156 2.36-3.703 3.141a10.588 10.588 0 0 1-4.875 1.172c-3.454 0-6.204-1.149-8.25-3.446-2.032-2.312-3.047-5.468-3.047-9.468v-.727c0-2.469.453-4.664 1.359-6.586.906-1.922 2.203-3.414 3.891-4.476 1.703-1.063 3.711-1.594 6.023-1.594 2.844 0 5.203.851 7.078 2.555 1.891 1.703 2.899 3.914 3.024 6.632h-4.102c-.125-1.64-.75-2.984-1.875-4.031-1.109-1.062-2.484-1.594-4.125-1.594-2.203 0-3.914.797-5.133 2.391-1.203 1.578-1.804 3.867-1.804 6.867v.82c0 2.922.601 5.172 1.804 6.75 1.203 1.579 2.922 2.368 5.157 2.368zm20.836-28.43v6.141h4.734v3.351h-4.734v15.727c0 1.015.21 1.781.632 2.297.422.5 1.141.75 2.157.75.5 0 1.187-.094 2.062-.282V312c-1.141.312-2.25.469-3.328.469-1.937 0-3.398-.586-4.383-1.758-.984-1.172-1.476-2.836-1.476-4.992v-15.727h-4.618v-3.351h4.618V280.5h4.336zm14.531 31.5h-4.336v-25.359h4.336V312zm-4.688-32.086c0-.703.211-1.297.633-1.781.438-.485 1.078-.727 1.922-.727.844 0 1.484.242 1.922.727.437.484.656 1.078.656 1.781 0 .703-.219 1.289-.656 1.758-.438.469-1.078.703-1.922.703-.844 0-1.484-.234-1.922-.703-.422-.469-.633-1.055-.633-1.758zm10.5 19.172c0-2.484.485-4.719 1.453-6.703.985-1.985 2.344-3.516 4.079-4.594 1.75-1.078 3.742-1.617 5.976-1.617 3.453 0 6.242 1.195 8.367 3.586 2.141 2.39 3.211 5.57 3.211 9.539v.305c0 2.468-.476 4.687-1.429 6.656-.938 1.953-2.29 3.476-4.055 4.57-1.75 1.094-3.766 1.641-6.047 1.641-3.438 0-6.227-1.196-8.367-3.586-2.125-2.391-3.188-5.555-3.188-9.492v-.305zm4.36.516c0 2.812.648 5.07 1.945 6.773 1.312 1.703 3.062 2.555 5.25 2.555 2.203 0 3.953-.86 5.25-2.578 1.297-1.735 1.945-4.157 1.945-7.266 0-2.781-.664-5.031-1.992-6.75-1.312-1.734-3.062-2.602-5.25-2.602-2.141 0-3.867.852-5.18 2.555-1.312 1.703-1.968 4.141-1.968 7.313zm28.265-12.961l.141 3.187c1.937-2.437 4.469-3.656 7.594-3.656 5.359 0 8.062 3.023 8.109 9.07V312h-4.336v-16.781c-.016-1.828-.437-3.18-1.266-4.055-.812-.875-2.085-1.312-3.82-1.312-1.406 0-2.64.375-3.703 1.125-1.062.75-1.891 1.734-2.484 2.953V312h-4.336v-25.359h4.101zm49.055 18.632c0-1.171-.445-2.078-1.336-2.718-.875-.657-2.414-1.219-4.617-1.688-2.188-.469-3.93-1.031-5.227-1.687-1.281-.657-2.234-1.438-2.859-2.344-.609-.906-.914-1.984-.914-3.234 0-2.079.875-3.836 2.625-5.274 1.765-1.437 4.015-2.156 6.75-2.156 2.875 0 5.203.742 6.984 2.226 1.797 1.485 2.696 3.383 2.696 5.696h-4.36c0-1.188-.508-2.211-1.523-3.071-1-.859-2.266-1.289-3.797-1.289-1.578 0-2.813.344-3.703 1.032-.891.687-1.336 1.586-1.336 2.695 0 1.047.414 1.836 1.242 2.367.828.531 2.32 1.039 4.477 1.524 2.171.484 3.929 1.062 5.273 1.734 1.344.672 2.336 1.484 2.977 2.437.656.938.984 2.086.984 3.446 0 2.265-.906 4.086-2.719 5.461-1.812 1.359-4.164 2.039-7.054 2.039-2.032 0-3.829-.36-5.391-1.078-1.563-.719-2.789-1.719-3.68-3-.875-1.297-1.312-2.696-1.312-4.196h4.336c.078 1.453.656 2.61 1.734 3.469 1.094.844 2.531 1.266 4.313 1.266 1.64 0 2.953-.328 3.937-.985 1-.672 1.5-1.562 1.5-2.672zm20.508 7.196c-3.438 0-6.235-1.125-8.391-3.375-2.156-2.266-3.234-5.289-3.234-9.071v-.796c0-2.516.476-4.758 1.43-6.727.968-1.984 2.312-3.531 4.031-4.641 1.734-1.125 3.609-1.687 5.625-1.687 3.297 0 5.859 1.086 7.687 3.258 1.828 2.172 2.742 5.281 2.742 9.328v1.804h-17.179c.062 2.5.789 4.524 2.179 6.071 1.407 1.531 3.188 2.297 5.344 2.297 1.531 0 2.828-.313 3.891-.938a9.786 9.786 0 0 0 2.789-2.484l2.648 2.062c-2.125 3.266-5.312 4.899-9.562 4.899zm-.539-22.735c-1.75 0-3.219.641-4.406 1.922-1.188 1.266-1.922 3.047-2.204 5.344h12.704v-.328c-.126-2.203-.719-3.906-1.782-5.11-1.062-1.218-2.5-1.828-4.312-1.828zm21.351-9.234v6.141h4.735v3.351h-4.735v15.727c0 1.015.211 1.781.633 2.297.422.5 1.141.75 2.156.75.5 0 1.188-.094 2.063-.282V312c-1.141.312-2.25.469-3.328.469-1.938 0-3.399-.586-4.383-1.758-.984-1.172-1.477-2.836-1.477-4.992v-15.727h-4.617v-3.351h4.617V280.5h4.336zm25.477 28.992c-1.688 1.985-4.164 2.977-7.43 2.977-2.703 0-4.765-.781-6.187-2.344-1.407-1.578-2.117-3.906-2.133-6.984v-16.5h4.336v16.382c0 3.844 1.562 5.766 4.687 5.766 3.313 0 5.516-1.234 6.61-3.703v-18.445h4.336V312h-4.125l-.094-2.508zm32.25-9.89c0 3.859-.883 6.968-2.649 9.328-1.765 2.359-4.156 3.539-7.171 3.539-3.079 0-5.5-.977-7.266-2.93v12.211H588v-35.109h3.961l.211 2.812c1.766-2.187 4.219-3.281 7.359-3.281 3.047 0 5.453 1.148 7.219 3.445 1.781 2.297 2.672 5.492 2.672 9.586v.399zm-4.336-.493c0-2.859-.609-5.117-1.828-6.773-1.219-1.656-2.891-2.484-5.016-2.484-2.625 0-4.594 1.164-5.906 3.492v12.117c1.297 2.312 3.281 3.469 5.953 3.469 2.078 0 3.727-.821 4.945-2.461 1.235-1.657 1.852-4.11 1.852-7.36zM1017.54 4.578h-10.97V35h-4.48V4.578h-10.942V.875h26.392v3.703zm29.01 0h-10.96V35h-4.48V4.578h-10.95V.875h26.39v3.703zm23.89 15.352h-14.32V35h-4.5V.875h21.14v3.703h-16.64V16.25h14.32v3.68zm7.71 15.07V.875h11.15c3.71 0 6.49.766 8.35 2.297 1.87 1.531 2.81 3.797 2.81 6.797 0 1.594-.45 3.008-1.36 4.242-.9 1.219-2.14 2.164-3.7 2.836 1.84.515 3.3 1.5 4.36 2.953 1.08 1.438 1.62 3.156 1.62 5.156 0 3.063-1 5.469-2.98 7.219-1.99 1.75-4.79 2.625-8.42 2.625h-11.83zm4.5-15.96v12.28h7.43c2.09 0 3.74-.539 4.94-1.617 1.22-1.094 1.83-2.594 1.83-4.5 0-4.11-2.23-6.164-6.7-6.164h-7.5zm0-3.61h6.8c1.96 0 3.53-.492 4.71-1.477 1.18-.984 1.78-2.32 1.78-4.008 0-1.875-.55-3.234-1.64-4.078-1.1-.86-2.76-1.289-5-1.289h-6.65V15.43zM1655.77 332.228a2.51 2.51 0 0 1 0 3.535l-15.9 15.95c-.98.978-2.56.982-3.54.008a2.502 2.502 0 0 1 0-3.535l14.13-14.177-14.15-14.107a2.512 2.512 0 0 1 0-3.536 2.505 2.505 0 0 1 3.54-.009l15.92 15.871zM1250 332.5l404-1v5l-404 1v-5z" fill="#828282"/><path d="M1248.23 336.758a2.51 2.51 0 0 1 0-3.535l15.9-15.949a2.505 2.505 0 0 1 3.54-.009c.97.974.98 2.557 0 3.536l-14.13 14.176 14.15 14.108a2.51 2.51 0 0 1 0 3.535c-.98.979-2.56.983-3.54.009l-15.92-15.871zM1654 336.5l-404 .986v-5l404-.986v5zM1281.48 286.195h-8.02V300h-4.52v-34.125h11.29c3.85 0 6.8.875 8.86 2.625 2.08 1.75 3.12 4.297 3.12 7.641 0 2.125-.58 3.976-1.73 5.554-1.14 1.578-2.74 2.758-4.78 3.539l8.01 14.485V300h-4.83l-7.4-13.805zm-8.02-3.679h6.92c2.23 0 4-.578 5.32-1.735 1.32-1.156 1.99-2.703 1.99-4.64 0-2.11-.64-3.727-1.9-4.852-1.25-1.125-3.06-1.695-5.44-1.711h-6.89v12.938zm34.92 17.953c-3.43 0-6.23-1.125-8.39-3.375-2.15-2.266-3.23-5.289-3.23-9.071v-.796c0-2.516.47-4.758 1.43-6.727.97-1.984 2.31-3.531 4.03-4.641 1.73-1.125 3.61-1.687 5.62-1.687 3.3 0 5.86 1.086 7.69 3.258 1.83 2.172 2.74 5.281 2.74 9.328v1.804h-17.18c.07 2.5.79 4.524 2.18 6.071 1.41 1.531 3.19 2.297 5.35 2.297 1.53 0 2.83-.313 3.89-.938a9.857 9.857 0 0 0 2.79-2.484l2.65 2.062c-2.13 3.266-5.32 4.899-9.57 4.899zm-.54-22.735c-1.75 0-3.22.641-4.4 1.922-1.19 1.266-1.92 3.047-2.21 5.344h12.71v-.328c-.13-2.203-.72-3.906-1.78-5.11-1.07-1.218-2.5-1.828-4.32-1.828zm30.24 15.539c0-1.171-.45-2.078-1.34-2.718-.87-.657-2.41-1.219-4.62-1.688-2.18-.469-3.92-1.031-5.22-1.687-1.28-.657-2.24-1.438-2.86-2.344-.61-.906-.92-1.984-.92-3.234 0-2.079.88-3.836 2.63-5.274 1.77-1.437 4.02-2.156 6.75-2.156 2.88 0 5.2.742 6.98 2.226 1.8 1.485 2.7 3.383 2.7 5.696h-4.36c0-1.188-.51-2.211-1.52-3.071-1-.859-2.27-1.289-3.8-1.289-1.58 0-2.81.344-3.7 1.032-.89.687-1.34 1.586-1.34 2.695 0 1.047.42 1.836 1.24 2.367.83.531 2.32 1.039 4.48 1.524 2.17.484 3.93 1.062 5.27 1.734 1.35.672 2.34 1.484 2.98 2.437.66.938.98 2.086.98 3.446 0 2.265-.9 4.086-2.71 5.461-1.82 1.359-4.17 2.039-7.06 2.039-2.03 0-3.83-.36-5.39-1.078-1.56-.719-2.79-1.719-3.68-3-.87-1.297-1.31-2.696-1.31-4.196h4.33c.08 1.453.66 2.61 1.74 3.469 1.09.844 2.53 1.266 4.31 1.266 1.64 0 2.95-.328 3.94-.985 1-.672 1.5-1.562 1.5-2.672zm31.4-5.671c0 3.859-.88 6.968-2.64 9.328-1.77 2.359-4.16 3.539-7.18 3.539-3.07 0-5.5-.977-7.26-2.93v12.211h-4.34v-35.109h3.96l.21 2.812c1.77-2.187 4.22-3.281 7.36-3.281 3.05 0 5.46 1.148 7.22 3.445 1.78 2.297 2.67 5.492 2.67 9.586v.399zm-4.33-.493c0-2.859-.61-5.117-1.83-6.773-1.22-1.656-2.89-2.484-5.02-2.484-2.62 0-4.59 1.164-5.9 3.492v12.117c1.3 2.312 3.28 3.469 5.95 3.469 2.08 0 3.73-.821 4.95-2.461 1.23-1.657 1.85-4.11 1.85-7.36zm8.72-.023c0-2.484.48-4.719 1.45-6.703.98-1.985 2.34-3.516 4.08-4.594 1.75-1.078 3.74-1.617 5.98-1.617 3.45 0 6.24 1.195 8.36 3.586 2.14 2.39 3.21 5.57 3.21 9.539v.305c0 2.468-.47 4.687-1.43 6.656-.93 1.953-2.29 3.476-4.05 4.57-1.75 1.094-3.77 1.641-6.05 1.641-3.44 0-6.22-1.196-8.37-3.586-2.12-2.391-3.18-5.555-3.18-9.492v-.305zm4.36.516c0 2.812.65 5.07 1.94 6.773 1.31 1.703 3.06 2.555 5.25 2.555 2.2 0 3.96-.86 5.25-2.578 1.3-1.735 1.95-4.157 1.95-7.266 0-2.781-.67-5.031-2-6.75-1.31-1.734-3.06-2.602-5.24-2.602-2.15 0-3.87.852-5.18 2.555-1.32 1.703-1.97 4.141-1.97 7.313zm28.26-12.961l.14 3.187c1.94-2.437 4.47-3.656 7.6-3.656 5.36 0 8.06 3.023 8.11 9.07V300H1418v-16.781c-.02-1.828-.44-3.18-1.27-4.055-.81-.875-2.08-1.312-3.82-1.312-1.4 0-2.64.375-3.7 1.125a7.616 7.616 0 0 0-2.48 2.953V300h-4.34v-25.359h4.1zm37.15 18.632c0-1.171-.44-2.078-1.34-2.718-.87-.657-2.41-1.219-4.61-1.688-2.19-.469-3.93-1.031-5.23-1.687-1.28-.657-2.23-1.438-2.86-2.344-.61-.906-.91-1.984-.91-3.234 0-2.079.87-3.836 2.62-5.274 1.77-1.437 4.02-2.156 6.75-2.156 2.88 0 5.21.742 6.99 2.226 1.79 1.485 2.69 3.383 2.69 5.696h-4.36c0-1.188-.5-2.211-1.52-3.071-1-.859-2.27-1.289-3.8-1.289-1.58 0-2.81.344-3.7 1.032-.89.687-1.34 1.586-1.34 2.695 0 1.047.42 1.836 1.25 2.367.82.531 2.32 1.039 4.47 1.524 2.17.484 3.93 1.062 5.28 1.734 1.34.672 2.33 1.484 2.97 2.437.66.938.99 2.086.99 3.446 0 2.265-.91 4.086-2.72 5.461-1.81 1.359-4.17 2.039-7.06 2.039-2.03 0-3.82-.36-5.39-1.078-1.56-.719-2.79-1.719-3.68-3-.87-1.297-1.31-2.696-1.31-4.196h4.34c.07 1.453.65 2.61 1.73 3.469 1.09.844 2.53 1.266 4.31 1.266 1.64 0 2.96-.328 3.94-.985 1-.672 1.5-1.562 1.5-2.672zm20.51 7.196c-3.44 0-6.24-1.125-8.39-3.375-2.16-2.266-3.24-5.289-3.24-9.071v-.796c0-2.516.48-4.758 1.43-6.727.97-1.984 2.32-3.531 4.03-4.641 1.74-1.125 3.61-1.687 5.63-1.687 3.3 0 5.86 1.086 7.69 3.258 1.82 2.172 2.74 5.281 2.74 9.328v1.804h-17.18c.06 2.5.79 4.524 2.18 6.071 1.41 1.531 3.19 2.297 5.34 2.297 1.53 0 2.83-.313 3.89-.938 1.07-.625 2-1.453 2.79-2.484l2.65 2.062c-2.12 3.266-5.31 4.899-9.56 4.899zm-.54-22.735c-1.75 0-3.22.641-4.41 1.922-1.18 1.266-1.92 3.047-2.2 5.344h12.7v-.328c-.12-2.203-.72-3.906-1.78-5.11-1.06-1.218-2.5-1.828-4.31-1.828zm33.26-9.234v6.141h4.73v3.351h-4.73v15.727c0 1.015.21 1.781.63 2.297.42.5 1.14.75 2.16.75.5 0 1.18-.094 2.06-.282V300a12.59 12.59 0 0 1-3.33.469c-1.94 0-3.4-.586-4.38-1.758-.99-1.172-1.48-2.836-1.48-4.992v-15.727h-4.62v-3.351h4.62V268.5h4.34zm22.08 10.031a13.12 13.12 0 0 0-2.14-.164c-2.84 0-4.77 1.211-5.79 3.633v18h-4.33v-25.359h4.22l.07 2.929c1.42-2.265 3.43-3.398 6.04-3.398.85 0 1.49.109 1.93.328v4.031zM1537.67 300c-.25-.5-.45-1.391-.61-2.672-2.01 2.094-4.42 3.141-7.22 3.141-2.5 0-4.55-.703-6.16-2.11-1.59-1.421-2.39-3.218-2.39-5.39 0-2.641 1-4.688 3-6.141 2.01-1.469 4.84-2.203 8.48-2.203h4.22v-1.992c0-1.516-.45-2.719-1.36-3.61-.9-.906-2.24-1.359-4.01-1.359-1.54 0-2.84.391-3.89 1.172-1.04.781-1.57 1.726-1.57 2.836h-4.36c0-1.266.45-2.484 1.34-3.656.91-1.188 2.13-2.125 3.66-2.813 1.54-.687 3.24-1.031 5.08-1.031 2.92 0 5.21.734 6.87 2.203 1.66 1.453 2.52 3.461 2.58 6.023v11.672c0 2.328.29 4.18.89 5.555V300h-4.55zm-7.19-3.305c1.36 0 2.64-.351 3.86-1.054 1.22-.703 2.11-1.618 2.65-2.743v-5.203h-3.4c-5.31 0-7.97 1.555-7.97 4.664 0 1.36.46 2.422 1.36 3.188.91.765 2.07 1.148 3.5 1.148zm21.75-22.054l.14 3.187c1.93-2.437 4.47-3.656 7.59-3.656 5.36 0 8.06 3.023 8.11 9.07V300h-4.34v-16.781c-.01-1.828-.43-3.18-1.26-4.055-.81-.875-2.09-1.312-3.82-1.312-1.41 0-2.64.375-3.7 1.125-1.07.75-1.9 1.734-2.49 2.953V300h-4.34v-25.359h4.11zm37.15 18.632c0-1.171-.45-2.078-1.34-2.718-.88-.657-2.42-1.219-4.62-1.688-2.19-.469-3.93-1.031-5.22-1.687-1.29-.657-2.24-1.438-2.86-2.344-.61-.906-.92-1.984-.92-3.234 0-2.079.88-3.836 2.63-5.274 1.76-1.437 4.01-2.156 6.75-2.156 2.87 0 5.2.742 6.98 2.226 1.8 1.485 2.7 3.383 2.7 5.696h-4.36c0-1.188-.51-2.211-1.53-3.071-1-.859-2.26-1.289-3.79-1.289-1.58 0-2.82.344-3.71 1.032-.89.687-1.33 1.586-1.33 2.695 0 1.047.41 1.836 1.24 2.367.83.531 2.32 1.039 4.48 1.524 2.17.484 3.93 1.062 5.27 1.734 1.34.672 2.34 1.484 2.98 2.437.65.938.98 2.086.98 3.446 0 2.265-.91 4.086-2.72 5.461-1.81 1.359-4.16 2.039-7.05 2.039-2.03 0-3.83-.36-5.39-1.078-1.57-.719-2.79-1.719-3.68-3-.88-1.297-1.32-2.696-1.32-4.196h4.34c.08 1.453.66 2.61 1.73 3.469 1.1.844 2.54 1.266 4.32 1.266 1.64 0 2.95-.328 3.94-.985 1-.672 1.5-1.562 1.5-2.672zm12.11 6.727v-22.008h-4.01v-3.351h4.01v-2.602c0-2.719.73-4.82 2.18-6.305 1.45-1.484 3.51-2.226 6.17-2.226 1 0 1.99.133 2.97.398l-.23 3.516c-.74-.141-1.52-.211-2.35-.211-1.4 0-2.49.414-3.25 1.242-.77.813-1.15 1.985-1.15 3.516v2.672h5.41v3.351h-5.41V300h-4.34zm24.52.469c-3.44 0-6.24-1.125-8.39-3.375-2.16-2.266-3.24-5.289-3.24-9.071v-.796c0-2.516.48-4.758 1.43-6.727.97-1.984 2.31-3.531 4.03-4.641 1.74-1.125 3.61-1.687 5.63-1.687 3.3 0 5.86 1.086 7.69 3.258 1.82 2.172 2.74 5.281 2.74 9.328v1.804h-17.18c.06 2.5.79 4.524 2.18 6.071 1.4 1.531 3.19 2.297 5.34 2.297 1.53 0 2.83-.313 3.89-.938 1.07-.625 1.99-1.453 2.79-2.484l2.65 2.062c-2.12 3.266-5.31 4.899-9.56 4.899zm-.54-22.735c-1.75 0-3.22.641-4.41 1.922-1.18 1.266-1.92 3.047-2.2 5.344h12.7v-.328c-.12-2.203-.72-3.906-1.78-5.11-1.06-1.218-2.5-1.828-4.31-1.828zm27.73.797a13.12 13.12 0 0 0-2.14-.164c-2.84 0-4.77 1.211-5.79 3.633v18h-4.33v-25.359h4.22l.07 2.929c1.42-2.265 3.43-3.398 6.04-3.398.85 0 1.49.109 1.93.328v4.031z" fill="#828282"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/load-faster-like-proxx/waterfall_opt.png b/src/site/content/en/blog/load-faster-like-proxx/waterfall_opt.png
deleted file mode 100644
index a46ba65c145..00000000000
Binary files a/src/site/content/en/blog/load-faster-like-proxx/waterfall_opt.png and /dev/null differ
diff --git a/src/site/content/en/blog/loading-ads-page-speed/index.md b/src/site/content/en/blog/loading-ads-page-speed/index.md
new file mode 100644
index 00000000000..217b6619597
--- /dev/null
+++ b/src/site/content/en/blog/loading-ads-page-speed/index.md
@@ -0,0 +1,185 @@
+---
+title: Effectively loading ads without impacting page speed
+subhead: In today's digital world, online advertising is a critical part of the free web we all enjoy. However, poorly implemented ads can lead to a slower browsing experience, frustrating users and diminishing engagement. Learn how to effectively load ads without impacting your page speed, ensuring a seamless user experience, and maximizing revenue opportunities for website owners.
+authors:
+  - markusbordihn
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/27qouRjnUSxESxCIzQp4.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/A52ucuDoKR97sMmqxLQQ.jpg
+date: 2023-09-29
+alt: A photograph of a work area with paints and a rubber glove, with a cogwheel painted in red on a wooden surface.
+description: |
+  Learn how to effectively load ads without impacting your page speed, ensuring a seamless user experience, and maximizing revenue opportunities for website owners.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Websites heavily rely on online advertising as a primary source of revenue. However, the presence of ads on websites can sometimes come at the expense of user experience and overall page performance. It's therefore vital to strike a balance between monetization and performance for website owners and advertisers, and the user experience.
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/wV8j1X6xN0L6rYVmtOaY.mp4", width="660", height="330", autoplay="true", loop="true", playsinline="true", controls="false" %}
+</figure>
+
+Consider a website that extensively places ads within its content, aiming to generate high revenue. However, the overwhelming number of ads frustrates users, leading to a poor user experience and high bounce rates. Despite the potential for substantial revenue from ads, abandonment severely hampers the website's success.
+
+On the other end of the spectrum, consider a website with no ads. This ad-free environment attracts a significant number of users due to its fast loading time and seamless browsing experience. However, without a monetization strategy in place, the website struggles to generate revenue, which may hinder its long-term sustainability and growth.
+
+Both scenarios illustrate the importance of balancing monetization, users and performance.
+
+## Harnessing Core Web Vitals
+
+Passing [the Core Web Vitals](/web-vitals/) is essential when it comes to loading ads without negatively impacting page speed. Core Web Vitals, comprising metrics such as [Largest Contentful Paint (LCP)](/lcp/), [Cumulative Layout Shift (CLS)](/cls/), and [First Input Delay (FID)](/fid/) (as well as the upcoming [Interaction to Next Paint (INP) Core Web Vital metric](/inp/) slated to replace FID), are user experience metrics that measure the quality of the user experience of your website.
+
+### Largest Contentful Paint (LCP)
+
+Focusing on optimizing LCP is vital, as this metric measures the time it takes for the largest contentful element to become visible within the viewport. By minimizing the loading time of ad content and by prioritizing asynchronous loading techniques, website owners can reduce LCP and decrease rendering time of the most prominent contentful elements on a page.
+
+### First Input Delay (FID) and Interaction to Next Paint (INP)
+
+Secondly, [improving INP](/how-to-optimize-inp/) (and by extension, [optimizing FID](/optimize-fid/)) is crucial for interactivity. FID measures the time it takes for the browser to respond to the first user interaction, such as a click or tap. The INP metric, slated to replace FID in March of 2024, goes much further by measuring a page's overall ability to process all click, keyboard, and tap interactions throughout the page lifecycle.
+
+Ads that delay user interactions negatively impact INP and FID. This may frustrate users by creating experiences that feel sluggish, or even altogether broken in extreme cases. Implementing lazy loading for ads and deferring non-critical JavaScript execution can help reduce page INP and FID, and therefore improve overall page responsiveness.
+
+### Cumulative Layout Shift (CLS)
+
+Lastly, CLS measures a page's visual stability by measuring the amount of unexpected layout shifts that occur during page load. Ads that dynamically load or resize can result in layout instability, leading to a poor user experiences where users either lose track of where they are on a page, or even unintentionally tap on the wrong elements due to unexpected layout shifts. To mitigate this, website owners should [optimize CLS](/optimize-cls/) to ensure that ads have reserved space to prevent layout shifts, and ad sizes should be optimized to avoid sudden content reflows.
+
+## Structuring your webpage into distinct content blocks
+
+Structuring your web page with content blocks for both text, image, and ad content, while also using [the CSS `content-visibility:` property](/content-visibility/), can significantly improve overall rendering time in modern browsers.
+
+By strategically applying the `content-visibility:` property within these content blocks, you optimize the rendering process for text, image, and ad content. This ensures that only the content currently in the viewport is fully rendered, resulting in a faster initial page load and smoother user interactions. This performance enhancement is particularly valuable when dealing with lengthy or pages with many ads.
+
+## Prioritize important ad slots
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RswuozE5OAer8BMfvoUQ.mp4", width="660", height="500", autoplay="true", loop="true", playsinline="true", controls="false" %}
+</figure>
+
+Not all ad slots are equal. For example, above-the-fold ad slots are usually more valuable than those that are below the fold in terms of viewability and monetization. This is because above-the-fold ads are more likely to be seen by users, as they are visible without scrolling in the first viewport. Below-the-fold ads become visible after the user scrolls down the page far enough to see them.
+
+### Above the fold ads
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/KaYluIMHNvotxWL9c2y0.png", alt="A visual representation of the 'above-the-fold' ad concept.", width="660", height="500" %}
+</figure>
+
+Above the fold ad slots refer to the portion of a webpage that is visible without scrolling, and hold significant value in digital advertising. These prime placements are considered valuable for several reasons:
+
+- Advertisements placed above the fold are immediately visible for users upon loading a webpage. Users are more likely to notice and engage with these ads, resulting in higher click-through rates.
+- Advertisers often consider the top portion of a webpage as the most valuable real estate. It's the first impression users get when they visit a site, making it a crucial area for showcasing high-impact and premium ads.
+- Ads above the fold have the highest viewability rates because they are in the user's direct line of sight. This ensures that the majority of users who visit the page will see these ads without having to scroll down.
+
+However, it's important to strike a balance between monetization and the user experience when utilizing above the fold ad slots in the initial view. Here are some key considerations.
+
+- First screen ad slots should load as fast as possible in the user's initial viewport. Slow-loading ads can negatively impact user experience and increase bounce rates. Optimizing ad load times is crucial to maintain a smooth user and browsing experience.
+- While above the fold ad placements are valuable, it's important to not overload this prime space with too many ads. Excessive ads clutter the page, disrupt content readability, and detract from the user experience. Strive for a balance between monetization and maintaining a clean, user-friendly layout.
+- Ensure above the fold ad slots are compatible with different screen sizes and devices. [Responsive design practices](/learn/design/) can help maintain a consistent and visually appealing layout regardless of the user's screen size.
+
+### Below the fold ads
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6deTpSz4wdfubdlPV9rc.png", alt="A visual representation of the 'below-the-fold' ad concept.", width="660", height="500" %}
+</figure>
+
+Below the fold ad slots—that is, ads placed within the portion of a webpage that becomes visible only after scrolling down—also hold considerable value in the world of digital advertising. These placements offer unique advantages that complement above the fold placements.
+
+Ads located below the fold benefit from users who scroll down to explore more content. These placements capture the attention of engaged users who are actively seeking additional information, making them valuable for brands looking to convey more complex messages or storytelling.
+
+- Ad slots which are not initially visible can align with the content next to them, providing an opportunity for contextual relevance. This alignment can lead to higher user engagement as users discover ads that are related to the content they are exploring.
+- When designed thoughtfully, below the fold ads can seamlessly integrate with the surrounding content, appearing less disruptive to users. This integration—also known as [native advertising](https://support.google.com/admanager/answer/6366845?hl=en)—can result in a more harmonious user experience.
+- Scroll required ad placements offer more creative design and format flexibility, with ample space and freedom to experiment. Video ads, interactive elements, and larger images can be lazy loaded to capture user attention without disrupting their experience.
+
+However, the following considerations should be given for below the fold ad placements:
+
+- While below the fold ad placements can be effective, it's essential to ensure that users are encouraged to scroll down. Implementing visual cues or content teasers can entice users to explore further, increasing the likelihood of ad visibility.
+- The placements of ads below the fold should not compromise content quality or readability. Maintaining a balance between ads and content to avoid overwhelming users and to ensure positive user experience.
+- Unlike above the fold ad placements, below the fold ads may not need to load immediately. Delaying the loading of these ads until they are close to entering the user's viewport can help improve overall page load speed and reduce initial page rendering times.
+
+When used strategically, below the fold ads can complement above the fold ads, and provide a platform for creative ad formats and contextual relevance. However, optimizing visibility, balancing content, and managing ad load timing are key considerations to ensure a positive user experience. 
+
+Current Google Publisher Tag (GPT) best practices:
+
+- [General best practices](https://developers.google.com/publisher-tag/guides/general-best-practices)
+- [Ad Best Practices](https://developers.google.com/publisher-tag/guides/ad-best-practices)
+- [Minimize layout shift](https://developers.google.com/publisher-tag/guides/minimize-layout-shift)
+- [Monitor performance](https://developers.google.com/publisher-tag/guides/monitor-performance)
+- [Avoiding common implementation mistakes](https://developers.google.com/publisher-tag/common_implementation_mistakes)
+
+## Lazy load ads where appropriate
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mqnHutBAvzdSUQBensax.png", alt="A visualization of lazy loading versus not lazy loading resources. When resources are lazy loaded, bandwidth is conserved during page load, and resources are deferred to the point at which the user is likeliest to see them.", width="800", height="450" %}
+</figure>
+
+[Lazy loading](/lazy-loading-best-practices/) is a technique that defers loading non-critical resources until they are needed. Applying lazy loading for ads which are not immediately visible (that is, below-the-fold ads) ensures that they are only loaded when they come into view, conserving bandwidth and improving overall page speed. Browsers now include [native lazy loading for iframes](/iframe-lazy-loading/) with a simple `loading=lazy` attribute.
+
+By implementing lazy loading, ads are fetched dynamically when they are about to enter the user's viewport, reducing the initial load time and [Total Blocking Time (TBT)](/tbt/) (which is [highly correlated with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt)) on the main thread at that crucial part of the page lifecycle, therefore minimizing negative impacts on the user experience.
+
+## Refresh ads without refreshing the page
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/p4RuRhkucV695thelCNv.gif", alt="A visualization of ads refreshing on the page, without the top-level page being refreshed.", width="800", height="367" %}
+</figure>
+
+An additional technique that can balance page performance with loading ads is the ability to refresh ads every 30 to 120 seconds without reloading the entire page. This approach allows for dynamic updates of ad content without disrupting the user's browsing experience or causing unnecessary delays.
+
+On mobile apps, refreshing ads in existing web views provides better performance compared to reloading the entire page or recreating WebViews because it minimizes the data and resource overhead, leading to faster content updates and a smoother user experience without the latency associated with starting from scratch.
+
+By refreshing ads asynchronously, website owners can keep the page content intact while seamlessly updating the ad content in-place and in real time. This not only improves page speed by eliminating the need to reload the entire page, but also ensures that displayed ads remain relevant and engaging. With this technique, website owners can strike a balance between monetization and performance, delivering timely and engaging ad content while minimizing negative effects on the user experience. 
+
+Refreshing ad slots is particularly valuable on pages where users tend to stay longer, such as recipe pages, DIY tutorials, or other content-rich websites. For example, on a DIY crafting page where users may spend a considerable amount of time following the tutorials, refreshing ad slots strategically during breaks between the steps, or while viewing image galleries, can enhance both the user experience and ad revenue. Similarly on a recipe page, refreshing ad slots after users have scrolled through the ingredients list or instructions can maintain user interest.
+
+## Prioritize asynchronous loading
+
+One of the most impactful strategies to improve page speed while serving ads is [asynchronous loading](https://developers.google.com/publisher-ads-audits/reference/audits/async-ad-tags). Asynchronous loading loads ads independently of the main web page content allows the page to continue rendering and become interactive without waiting for ads to fully load. 
+This significantly reduces perceived loading time, enhancing user satisfaction.
+
+Include the `async` attribute in the script tag definition. For example:
+
+**AdSense:**
+
+```html
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+```
+
+**AdSense (auto ads):**
+
+```html
+<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+```
+
+**Google Publisher Tag:**
+
+```html
+<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
+```
+
+## Optimize ad sizes, position and formats
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/DFxKqN3avsKFmFaU1CXL.png", alt="An illustration of devices at varying viewport sizes, with ad placements stylized as green boxes, each reading 'Ad'.", width="800", height="222" %}
+</figure>
+
+The size, position, and format for ads can have a significant impact on page speed. Large ad sizes can slow down page load, leading to frustrated users. To mitigate this, website owners should work closely with advertisers to [optimize ad sizes and formats](/learn/images/). Encouraging the use of compressed image formats and efficient ad creative design helps reduce file sizes without compromising visual quality. These optimizations not only improve page speed, but also minimize data consumption for users with limited bandwidth.
+
+## Better Ads Standards
+
+It's essential to adhere to the [Better Ads Standard](https://www.betterads.org/standards/) for displaying ads, because doing so not only enhances the user experience by reducing intrusive and disruptive ad formats, but also positively impacts ad delivery position and page load time.
+
+By following these standards, ads are more likely to be placed in positions that are less obstructive and intrusive, which can result in a higher user engagement and click-through rates.
+
+Furthermore, adhering to these guidelines can also lead to faster page loading speeds since lighter, less resource-intensive ad formats are favored, improving overall website performance and user satisfaction.
+
+## Strategic evaluation of ad networks and providers
+
+Not all ad networks and providers are created equal in terms of performance. To ensure optimal page speed, website owners should meticulously evaluate the performance of different ad networks, header bidding implementation, and providers.
+
+Forging partnerships with providers that prioritize speed—and have a track record of delivering lightweight ad content efficiently—can significantly increase page performance and improve the user experience.
+
+## Conclusion
+
+Achieving a balance between monetization and performance is crucial for website owners seeking to provide an exceptional user experience while maximizing revenue through online advertising.
+
+By using techniques such as asynchronous loading, lazy loading, optimizing ad formats and sizes, leveraging intelligent caching and carefully evaluating ad networks, and header bidding and providers, website owners can successfully navigate the challenges of loading ads without compromising page performance. Prioritizing efficient delivery of ads ultimately ensures user stratification, increased engagement, and sustainable revenue generation.
diff --git a/src/site/content/en/blog/loading-wasm/index.md b/src/site/content/en/blog/loading-wasm/index.md
new file mode 100644
index 00000000000..b724d37b91f
--- /dev/null
+++ b/src/site/content/en/blog/loading-wasm/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Loading WebAssembly modules efficiently
+subhead: When working with WebAssembly, you often want to download a module, compile it, instantiate it, and then use whatever it exports in JavaScript. This post explains our recommended approach for optimal efficiency.
+authors:
+  - mathiasbynens
+description: |
+  When working with WebAssembly, you often want to download a module, compile it, instantiate it, and then use whatever it exports in JavaScript. This post explains our recommended approach for optimal efficiency.
+date: 2018-04-12
+updated: 2018-10-23
+tags:
+  - blog
+  - javascript
+  - webassembly
+
+---
+
+When working with WebAssembly, you often want to download a module, compile it, instantiate it, and
+then use whatever it exports in JavaScript. This post starts off with a common but suboptimal code
+snippet doing exactly that, discusses several possible optimizations, and eventually shows the
+simplest, most efficient way of running WebAssembly from JavaScript.
+
+{% Aside %}
+Tools like Emscripten can produce the needed boilerplate code for you, so you don’t
+necessarily have to code this yourself. In cases where you need fine-grained control over the
+loading of WebAssembly modules however, it helps to keep the following best practices in mind.
+{% endAside %}
+
+This code snippet does the complete download-compile-instantiate dance, albeit in a suboptimal way:
+
+Don’t use this!
+
+```js
+(async () => {
+  const response = await fetch('fibonacci.wasm');
+  const buffer = await response.arrayBuffer();
+  const module = new WebAssembly.Module(buffer);
+  const instance = new WebAssembly.Instance(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+Note how we use `new WebAssembly.Module(buffer)` to turn a response buffer into a module. This is a
+synchronous API, meaning it blocks the main thread until it completes. To discourage its use, Chrome
+disables `WebAssembly.Module` for buffers larger than 4 KB. To work around the size limit, we can
+use `await WebAssembly.compile(buffer)` instead:
+
+```js
+(async () => {
+  const response = await fetch('fibonacci.wasm');
+  const buffer = await response.arrayBuffer();
+  const module = await WebAssembly.compile(buffer);
+  const instance = new WebAssembly.Instance(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+`await WebAssembly.compile(buffer)` is _still_ not the optimal approach, but we’ll get to that in a
+second.
+
+Almost every operation in the modified snippet is now asynchronous, as the use of `await` makes
+clear. The only exception is `new WebAssembly.Instance(module)`, which has the same 4 KB buffer
+size restriction in Chrome. For consistency and for the sake of [keeping the main thread
+free](https://twitter.com/mathias/status/978549917332500480), we can use the asynchronous
+`WebAssembly.instantiate(module)`.
+
+```js
+(async () => {
+  const response = await fetch('fibonacci.wasm');
+  const buffer = await response.arrayBuffer();
+  const module = await WebAssembly.compile(buffer);
+  const instance = await WebAssembly.instantiate(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+Let’s get back to the `compile` optimization I hinted at earlier. With [streaming
+compilation](https://v8.dev/blog/v8-release-65), the browser can already
+start to compile the WebAssembly module while the module bytes are still downloading. Since download
+and compilation happen in parallel, this is faster — especially for large payloads.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y1FWFpD7bgeWaN95dXdL.png", alt="When the download time is
+longer than the compilation time of the WebAssembly module, then WebAssembly.compileStreaming()
+finishes compilation almost immediately after the last bytes are downloaded.", width="800", height="387" %}
+</figure>
+
+To enable this optimization, use `WebAssembly.compileStreaming` instead of `WebAssembly.compile`.
+This change also allows us to get rid of the intermediate array buffer, since we can now pass the
+`Response` instance returned by `await fetch(url)` directly.
+
+```js
+(async () => {
+  const response = await fetch('fibonacci.wasm');
+  const module = await WebAssembly.compileStreaming(response);
+  const instance = await WebAssembly.instantiate(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+{% Aside %}
+The server must be configured to serve the `.wasm` file with the correct MIME type by sending
+the `Content-Type: application/wasm` header. In previous examples, this wasn’t necessary since we
+were passing the response bytes as an array buffer, and so no MIME type checking took place.
+{% endAside %}
+
+The `WebAssembly.compileStreaming` API also accepts a promise that resolves to a `Response`
+instance. If you don’t have a need for `response` elsewhere in your code, you can pass the promise
+returned by `fetch` directly, without explicitly `await`ing its result:
+
+```js
+(async () => {
+  const fetchPromise = fetch('fibonacci.wasm');
+  const module = await WebAssembly.compileStreaming(fetchPromise);
+  const instance = await WebAssembly.instantiate(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+If you don’t need the `fetch` result elsewhere either, you could even pass it directly:
+
+```js
+(async () => {
+  const module = await WebAssembly.compileStreaming(
+    fetch('fibonacci.wasm'));
+  const instance = await WebAssembly.instantiate(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+I personally find it more readable to keep it on a separate line, though.
+
+See how we compile the response into a module, and then instantiate it immediately? As it turns out,
+`WebAssembly.instantiate` can compile and instantiate in one go. The
+`WebAssembly.instantiateStreaming` API does this in a streaming manner:
+
+```js
+(async () => {
+  const fetchPromise = fetch('fibonacci.wasm');
+  const { module, instance } = await WebAssembly.instantiateStreaming(fetchPromise);
+  // To create a new instance later:
+  const otherInstance = await WebAssembly.instantiate(module);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+If you only need a single instance, there’s no point in keeping the `module` object around,
+simplifying the code further:
+
+```js
+// This is our recommended way of loading WebAssembly.
+(async () => {
+  const fetchPromise = fetch('fibonacci.wasm');
+  const { instance } = await WebAssembly.instantiateStreaming(fetchPromise);
+  const result = instance.exports.fibonacci(42);
+  console.log(result);
+})();
+```
+
+The optimizations we applied can be summarized as follows:
+
+- Use asynchronous APIs to avoid blocking the main thread
+- Use streaming APIs to compile and instantiate WebAssembly modules more quickly
+- Don’t write code you don’t need
+
+Have fun with WebAssembly!
diff --git a/src/site/content/en/blog/logical-property-shorthands/index.md b/src/site/content/en/blog/logical-property-shorthands/index.md
new file mode 100644
index 00000000000..16292fcd8ce
--- /dev/null
+++ b/src/site/content/en/blog/logical-property-shorthands/index.md
@@ -0,0 +1,525 @@
+---
+layout: post
+title: Logical layout enhancements with flow-relative shorthands
+subhead: New logical property shorthands and new inset properties for Chromium.
+authors:
+  - adamargyle
+  - loirooriol
+description: New logical property shorthands and new inset properties for Chromium.
+date: 2020-10-13
+# updated: 2020-10-06
+hero: image/admin/GjMb0QfIM77KF22nEHcX.png
+thumbnail: image/admin/Z9HOiqX3EYqcrvyyX2DA.png
+alt: An inline flow arrow (right) and a block flow arrow (down)
+tags:
+  - blog
+  - css
+  - layout
+feedback:
+  - api
+---
+
+Since Chromium 69 (September 3rd 2018),
+[logical properties](https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties) and values have helped
+developers maintain control of their international layouts through logical, rather
+than physical, direction and dimension styles. In Chromium 87, shorthands and
+offsets have shipped to make these logical properties and values a bit easier to write.
+This catches Chromium up to Firefox, which has had support for the shorthands
+[since 66](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/66).
+Safari has them ready in their [tech preview](https://webkit.org/blog/11300/release-notes-for-safari-technology-preview-114/).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t2y5tF9s3Wcp50kJJMmm.png", alt="Latin, Hebrew and Japanese are shown rending placeholder text within a device frame. Arrows and colors follow the text to help associate the 2 directions of block and inline.", width="800", height="577" %}
+</figure>
+
+## Document flow
+If you're already familiar with logical properties, inline and block axes, and don't
+want a refresher, you can [skip ahead](#new-shorthands). Otherwise, here's a short refresher.
+
+In English, letters and words flow left to right while paragraphs are stacked top to bottom.
+In traditional Chinese, letters and words are top to bottom while paragraphs are stacked
+right to left. In just these 2 cases, if we write CSS that puts "margin top" on a paragraph,
+we're only appropriately spacing 1 language style. If the page is translated into traditional
+Chinese from English, the margin may well not make sense in the new vertical writing mode.
+
+Therefore the physical side of the box isn't very useful internationally. Thus begins the
+process of supporting multiple languages; learning about physical versus logical sides of the box model.
+
+{% Aside 'key-term' %}
+A _logical property_ is one that references a side, corner or axis of the box model in context
+of the applicable language direction. It's akin to referencing someone's `strong` arm,
+rather than assuming it's their `right` arm. "Right" is a physical arm reference, "strong" is
+a logical arm reference, **contextual to the individual**.
+{% endAside %}
+
+Have you ever inspected the `p` element in Chrome DevTools? If so, you might have
+noticed that the [default User Agent styles](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=blockquote%2C%20figure%2C%20listing%2C%20p%2C%20plaintext%2C%20pre%2C,%7D)
+are not physical, but logical.
+
+```css
+p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+```
+<small>CSS from [Chromium's User Agent Stylesheet](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)</small>
+
+The margin is not on the top or bottom like an English reader might believe.
+It's `block-start` and `block-end`! These logical properties are akin to an English reader's
+top and bottom, but **also** akin to a Japanese reader as right and left. Written once, works everywhere.
+
+Normal flow is when the webpage is part of this multi-directionality intentionally.
+When page content updates according to document direction changes, the layout and its
+elements are considered in flow. Read more about "in" and "out" of flow
+[on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Flow_Layout) or in the
+[CSS Display Module spec](https://drafts.csswg.org/css-display-3/#out-of-flow). While logical properties
+are not required to be in flow, they do much of the heavy lifting for you as directionality changes.
+Flow implies direction, which letters, words and content need to travel along.
+This leads us to block and inline logical directions.
+
+Block direction is the direction that new content blocks follow, like asking yourself,
+"where to put the next paragraph?". You might think of it as a "content block", or "block of text".
+Every language arranges their blocks and orders them along
+their respective `block-axis`. `block-start` is the side a paragraph is first placed,
+while `block-end` is the side new paragraphs flow towards.
+
+{% Aside 'key-term' %}
+The _block direction_ is defined by the `writing-mode` property. For example, `horizontal-tb`
+(the initial value) has a vertical block axis that flows top-to-bottom (`tb`). Other values
+have an horizontal block axis, which can flow left-to-right (like in `vertical-lr`) or
+right-to-left (like in `vertical-rl`).
+{% endAside %}
+
+In traditional Japanese handwriting, for example, block direction flows right to left:
+
+{% YouTube '5IbOpE9eVnM' %}
+
+Inline direction is the direction that letters and words go. Consider the direction
+your arm and hand travel when you write; they are traveling along the `inline-axis`.
+`inline-start` is the side where you start writing, while `inline-end` is the side
+where writing ends or wraps. The above video, the `inline-axis` is top to bottom,
+but in this next video the `inline-axis` flows right to left.
+
+{% Aside 'key-term' %}
+The _inline direction_ is defined by both `writing-mode` and `direction`. For example,
+it flows left-to-right with `horizontal-tb` and `ltr`, right-to-left with `horizontal-tb`
+and `rtl`, top-to-bottom with `vertical-lr` and `ltr`, and bottom-to-top with `vertical-rl` and `rtl`.
+{% endAside %}
+
+{% YouTube 'nTzyRdoXlbs' %}
+
+Being [`flow-relative`](https://www.w3.org/TR/css-writing-modes-4/#logical-directions)
+means that the styles written for one language will be contextual and appropriately
+applied into other languages. Content will flow relative to the language it's being delivered for.
+
+## New shorthands
+Some of the following shorthands are not new features for the browser, rather, easier
+ways to write styles by taking advantage of being able to set values on both block
+or inline edges at once. The `inset-*` logical properties **do** bring new abilities,
+as there were no longhand ways to specify absolute positions with logical properties
+before it. Insets and shorthands flow (hehe) together so well though, I'm going to
+tell you about all of the new logical properties features landing in Chromium 87 at once.
+
+### Margin shorthands
+No new abilities shipped, but some super handy shorthands did: <br>
+[`margin-block`](https://developer.mozilla.org/docs/Web/CSS/margin-block) and
+[`margin-inline`](https://developer.mozilla.org/docs/Web/CSS/margin-inline).
+
+{% Glitch 'margin-logical-shorthand' %}
+
+{% Aside 'caution' %}
+If the above items do not have space between them, then `margin-block` shorthand is not supported in your browser.
+{% endAside %}
+
+<div class="switcher">
+{% Compare 'better', 'Longhand' %}
+```css
+margin-block-start: 2ch;
+margin-block-end: 2ch;
+```
+{% endCompare %}
+
+{% Compare 'better', 'New shorthand' %}
+```css
+margin-block: 2ch;
+/* or */
+margin-block: 2ch 2ch;
+```
+{% endCompare %}
+</div>
+
+There is no shorthand for "top and bottom" or "left and right"… until now!
+You probably reference all 4 sides using the shorthand of `margin: 10px;`, and now you
+can easily reference 2 complimentary sides by using the logical property shorthand.
+
+<div class="switcher">
+{% Compare 'better', 'Longhand' %}
+```css
+margin-inline-start: 4ch;
+margin-inline-end: 2ch;
+```
+{% endCompare %}
+
+{% Compare 'better', 'New shorthand' %}
+```css
+margin-inline: 4ch 2ch;
+```
+{% endCompare %}
+</div>
+
+### Padding shorthands
+No new abilities shipped, but more super handy shorthands did: <br>
+[`padding-block`](https://developer.mozilla.org/docs/Web/CSS/padding-block) and
+[`padding-inline`](https://developer.mozilla.org/docs/Web/CSS/padding-inline).
+
+{% Glitch 'padding-logical-shorthand' %}
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Longhand' %}
+```css
+padding-block-start: 2ch;
+padding-block-end: 2ch;
+```
+{% endCompare %}
+
+{% Compare 'better', 'New shorthand' %}
+```css
+padding-block: 2ch;
+/* or */
+padding-block: 2ch 2ch;
+```
+{% endCompare %}
+</div>
+
+And the `inline` complimentary set of shorthands:
+
+<div class="switcher">
+{% Compare 'better', 'Longhand' %}
+```css
+padding-inline-start: 4ch;
+padding-inline-end: 2ch;
+```
+{% endCompare %}
+
+{% Compare 'better', 'New shorthand' %}
+```css
+padding-inline: 4ch 2ch;
+```
+{% endCompare %}
+</div>
+
+### Inset and shorthands
+The physical properties `top`, `right`, `bottom` and `left` can all be written
+as values for the `inset` property. Any value of `position`  can benefit from
+setting sides with inset.
+
+```css//2-5
+.cover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  inset: 0;
+}
+```
+
+{% Glitch 'inset-logical-shorthand' %}
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+position: absolute;
+top: 1px;
+right: 2px;
+bottom: 3px;
+left: 4px;
+```
+{% endCompare %}
+
+{% Compare 'better', 'New physical shorthand' %}
+```css
+position: absolute;
+inset: 1px 2px 3px 4px;
+```
+{% endCompare %}
+</div>
+
+That should look immediately convenient! Inset is shorthand for the physical sides,
+and it works just like margin and padding.
+
+#### New features
+As exciting as the physical sides shorthand is, there's even more from the
+logical features brought by additional `inset` shorthands. These shorthands bring
+developer authoring convenience (they're shorter to type) but also increase
+the potential reach for the layout because they're flow-relative.
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+position: absolute;
+top: 10px;
+bottom: 10px;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+position: absolute;
+inset-block: 10px;
+```
+{% endCompare %}
+</div>
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+position: absolute;
+left: 10px;
+right: 20px;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+position: absolute;
+inset-inline: 10px 20px;
+```
+{% endCompare %}
+</div>
+
+Further reading and a [full list of inset shorthand and longhand](https://developer.mozilla.org/docs/Web/CSS/inset)
+is available on MDN.
+
+### Border shorthands
+Border, plus its nested `color`, `style`, and `width` properties have all got
+new logical shorthands as well.
+
+{% Glitch 'border-logical-shorthand' %}
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+border-top-color: hotpink;
+border-bottom-color: hotpink;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+border-block-color: hotpink;
+/* or */
+border-block-color: hotpink hotpink;
+```
+{% endCompare %}
+</div>
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+border-left-style: dashed;
+border-right-style: dashed;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+border-inline-style: dashed;
+/* or */
+border-inline-style: dashed dashed;
+```
+{% endCompare %}
+</div>
+
+<br>
+
+<div class="switcher">
+{% Compare 'better', 'Physical longhand' %}
+```css
+border-left-width: 1px;
+border-right-width: 1px;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+border-inline-width: 1px;
+/* or */
+border-inline-width: 1px 1px;
+```
+{% endCompare %}
+</div>
+
+Further reading and a [full list of border shorthand and longhand](https://developer.mozilla.org/docs/Web/CSS/border-block)
+is available on MDN.
+
+## Logical property `<figure>` example
+Let's put it all together in a small example. Logical properties can layout
+an image with a caption to handle different writing and document directions.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/logical-property-figure-demo.mp4">
+  </video>
+</figure>
+
+Or try it!
+
+{% Glitch 'logical-figure' %}
+
+You don't have to do much to make a card internationally responsive with a
+`<figure>` and a few logical properties. If you're curious how all this internationally
+considerate CSS works together, I hope this is a small meaningful introduction.
+
+### Polyfilling and cross-browser support {: #browser-compatibility }
+
+The Cascade or build tools are viable options to have old and new browsers alike,
+properly spaced with updated logical properties. For Cascade fallbacks, follow a physical property
+with a logical one and the browser will use the "last" property it found during style
+resolution.
+
+```css
+p {
+  /* for unsupporting browsers */
+  margin-top: 1ch;
+  margin-bottom: 2ch;
+
+  /* for supporting browsers to use */
+  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
+  margin-block: 1ch 2ch;
+}
+```
+
+That's not quite a full solution for everyone though. Here's a handwritten fallback
+that leverages the `:lang()` pseudo-selector to target specific languages, adjusts
+their physical spacing appropriately, then at the end offers the logical
+spacing for supporting browsers:
+
+```css
+/* physical side styles */
+p {
+  margin-top: 1ch;
+  margin-bottom: 2ch;
+}
+
+/* adjusted physical side styles per language */
+:lang(ja) {
+  p {
+    /* zero out styles not useful for traditional Japanese */
+    margin-top: 0;
+    margin-bottom: 0;
+
+    /* add appropriate styles for traditional Japanese */
+    margin-right: 1ch;
+    margin-left: 2ch;
+  }
+}
+
+/* add selectors and adjust for languages all supported */
+:lang(he) {…}
+:lang(mn) {…}
+
+/* Logical Sides */
+/* Then, for supporting browsers to use */
+/* and unsupporting browsers to ignore #TheCascade */
+p {
+  /* remove any potential physical cruft.. */
+  margin: 0;
+  /* explicitly set logical value */
+  margin-block: 1ch 2ch;
+}
+```
+
+You could also use `@supports` to determine whether or not to provide physical
+property fallbacks:
+
+```css
+p {
+  margin-top: 1ch;
+  margin-bottom: 2ch;
+}
+
+@supports (margin-block: 0) {
+  p {
+    margin-block: 1ch 2ch;
+  }
+}
+```
+
+[Sass](https://sass-lang.com), [PostCSS](https://github.com/csstools/postcss-logical),
+[Emotion](https://emotion.sh) and others have automated bundler and/or build
+time offerings that have a wide array of fallbacks or solutions. Check out each one
+to see which matches your toolchain and overall site strategy.
+
+## What's next
+More of CSS will offer logical properties, it's not done yet! There's one big missing
+set of shorthands though, and a resolution is still pending in this [GitHub issue](https://github.com/w3c/csswg-drafts/issues/1282).
+There is a temporary solution [in a draft](https://drafts.csswg.org/css-logical/#logical-shorthand-keyword). What if you want to style all
+logical sides of a box with a shorthand?
+
+<div class="switcher">
+{% Compare 'better', 'Physical shorthand' %}
+```css
+margin: 1px 2px 3px 4px;
+margin: 1px 2px;
+margin: 2px;
+```
+{% endCompare %}
+
+{% Compare 'better', 'Logical shorthand' %}
+```css
+margin: logical 1px 2px 3px 4px;
+margin: logical 1px 2px;
+margin: logical 2px;
+```
+{% endCompare %}
+</div>
+
+The current draft proposal would mean you have to write `logical` in every
+shorthand in order to get the logical equivalent applied, which doesn't sound
+very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) to some.
+
+There are other proposals to change it at the block or page level,
+but that could leak logical uses into styles still assuming physical sides.
+
+```css
+html {
+  flow-mode: physical;
+  /* or */
+  flow-mode: logical;
+  /* now all margin/padding/etc references are logical */
+}
+
+/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
+```
+
+It's a tough one! Cast your vote, voice your opinion, we want to hear from you.
+
+Want to learn or study logical properties more? Here's a detailed reference,
+along with guides and examples, [on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties) 🤓
+
+## Feedback
+
+* To propose changes to the CSS syntax of flow-relative shorthands,
+  first [check the existing issues][specexisting] on the csswg-drafts repository.
+  If none of the existing issues match your proposal, [create a new issue][specnew].
+* To report bugs on Chromium's implementation of flow-relative shorthands,
+  first [check the existing issues][crbugexisting] on Chromium Bug Tracker.
+  If none of the existing issues match your bug, [create a new issue][crbugnew].
+
+[specexisting]: https://github.com/w3c/csswg-drafts/labels/css-logical-1
+[specnew]: https://github.com/w3c/csswg-drafts/issues/new?title=%5Bcss-logical-1%5D
+[crbugexisting]: https://bugs.chromium.org/p/chromium/issues/list?q=component%3ABlink%3ECSS%20logical&can=2
+[crbugnew]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ECSS
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1200.png
deleted file mode 100644
index 400d4a763c0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1239.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1239.png
deleted file mode 100644
index e2902b70bf9..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1239.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1400.png
deleted file mode 100755
index 336fc6d3986..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_200.png
deleted file mode 100644
index 7c7881b2ced..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_775.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_775.png
deleted file mode 100644
index 2c8d5e2c6c8..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale,w_775.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1200.png
deleted file mode 100644
index 400d4a763c0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1239.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1239.png
deleted file mode 100644
index e2902b70bf9..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1239.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1400.png
deleted file mode 100755
index 336fc6d3986..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_200.png
deleted file mode 100644
index 7c7881b2ced..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_775.png b/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_775.png
deleted file mode 100644
index 2c8d5e2c6c8..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long0_rq2bce_c_scale_w_775.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1000.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1000.png
deleted file mode 100644
index 61aeb4c064e..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1000.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1077.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1077.png
deleted file mode 100644
index 61c3121b8ae..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1077.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1153.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1153.png
deleted file mode 100644
index a36477f8ecb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1153.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1220.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1220.png
deleted file mode 100644
index cf8147f8b12..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1220.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1289.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1289.png
deleted file mode 100644
index f5744788b64..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1289.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1400.png
deleted file mode 100644
index bc671813ca0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_200.png
deleted file mode 100644
index 0e548a8495d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_349.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_349.png
deleted file mode 100644
index 92de827606d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_349.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_457.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_457.png
deleted file mode 100644
index 40c7d951d4c..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_457.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_570.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_570.png
deleted file mode 100644
index 2853d1ad7d6..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_570.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_670.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_670.png
deleted file mode 100644
index 41b7cc805a5..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_670.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_755.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_755.png
deleted file mode 100644
index a1d74a4c2e2..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_755.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_841.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_841.png
deleted file mode 100644
index f3c82d72177..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_841.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_919.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_919.png
deleted file mode 100644
index 92be0637763..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale,w_919.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1000.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1000.png
deleted file mode 100644
index 61aeb4c064e..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1000.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1077.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1077.png
deleted file mode 100644
index 61c3121b8ae..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1077.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1153.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1153.png
deleted file mode 100644
index a36477f8ecb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1153.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1220.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1220.png
deleted file mode 100644
index cf8147f8b12..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1220.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1289.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1289.png
deleted file mode 100644
index f5744788b64..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1289.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1400.png
deleted file mode 100644
index bc671813ca0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_200.png
deleted file mode 100644
index 0e548a8495d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_349.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_349.png
deleted file mode 100644
index 92de827606d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_349.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_457.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_457.png
deleted file mode 100644
index 40c7d951d4c..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_457.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_570.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_570.png
deleted file mode 100644
index 2853d1ad7d6..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_570.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_670.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_670.png
deleted file mode 100644
index 41b7cc805a5..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_670.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_755.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_755.png
deleted file mode 100644
index a1d74a4c2e2..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_755.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_841.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_841.png
deleted file mode 100644
index f3c82d72177..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_841.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_919.png b/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_919.png
deleted file mode 100644
index 92be0637763..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long1_yp7hwf_c_scale_w_919.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1020.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1020.png
deleted file mode 100644
index eca17628053..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1020.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1136.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1136.png
deleted file mode 100644
index 80ca00f6356..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1136.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1254.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1254.png
deleted file mode 100644
index af70d0fd631..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1254.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1400.png
deleted file mode 100644
index fb218b4f762..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_200.png
deleted file mode 100644
index 9717c7cf30a..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_424.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_424.png
deleted file mode 100644
index 4ed6eb604a0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_424.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_600.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_600.png
deleted file mode 100644
index 29ec8c06201..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_600.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_740.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_740.png
deleted file mode 100644
index 9c4ca81a07a..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_740.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_884.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_884.png
deleted file mode 100644
index 2897b9720eb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale,w_884.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1020.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1020.png
deleted file mode 100644
index eca17628053..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1020.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1136.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1136.png
deleted file mode 100644
index 80ca00f6356..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1136.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1254.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1254.png
deleted file mode 100644
index af70d0fd631..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1254.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1400.png
deleted file mode 100644
index fb218b4f762..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_200.png
deleted file mode 100644
index 9717c7cf30a..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_424.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_424.png
deleted file mode 100644
index 4ed6eb604a0..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_424.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_600.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_600.png
deleted file mode 100644
index 29ec8c06201..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_600.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_740.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_740.png
deleted file mode 100644
index 9c4ca81a07a..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_740.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_884.png b/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_884.png
deleted file mode 100644
index 2897b9720eb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long2_momntc_c_scale_w_884.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1010.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1010.png
deleted file mode 100644
index c7e72010b82..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1010.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1109.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1109.png
deleted file mode 100644
index 231ebbc3f3f..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1109.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1212.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1212.png
deleted file mode 100644
index fb03678a1e1..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1212.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1312.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1312.png
deleted file mode 100644
index 0aba677772d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1312.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1400.png
deleted file mode 100644
index 7bea9677fc7..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_200.png
deleted file mode 100644
index 3c7a35cb48e..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_394.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_394.png
deleted file mode 100644
index 990d0e12a2b..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_394.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_547.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_547.png
deleted file mode 100644
index 2f5a4a3eacb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_547.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_678.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_678.png
deleted file mode 100644
index 3fbfdc926bb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_678.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_786.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_786.png
deleted file mode 100644
index dde13f640e2..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_786.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_904.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_904.png
deleted file mode 100644
index 909fb48fcf5..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale,w_904.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1010.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1010.png
deleted file mode 100644
index c7e72010b82..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1010.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1109.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1109.png
deleted file mode 100644
index 231ebbc3f3f..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1109.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1212.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1212.png
deleted file mode 100644
index fb03678a1e1..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1212.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1312.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1312.png
deleted file mode 100644
index 0aba677772d..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1312.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1400.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1400.png
deleted file mode 100644
index 7bea9677fc7..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_1400.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_200.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_200.png
deleted file mode 100644
index 3c7a35cb48e..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_200.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_394.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_394.png
deleted file mode 100644
index 990d0e12a2b..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_394.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_547.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_547.png
deleted file mode 100644
index 2f5a4a3eacb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_547.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_678.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_678.png
deleted file mode 100644
index 3fbfdc926bb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_678.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_786.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_786.png
deleted file mode 100644
index dde13f640e2..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_786.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_904.png b/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_904.png
deleted file mode 100644
index 909fb48fcf5..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/Are-long3_tfm3wr_c_scale_w_904.png and /dev/null differ
diff --git a/src/site/content/en/blog/long-tasks-devtools/index.md b/src/site/content/en/blog/long-tasks-devtools/index.md
index 2ba6cb607ad..820845bbdf3 100644
--- a/src/site/content/en/blog/long-tasks-devtools/index.md
+++ b/src/site/content/en/blog/long-tasks-devtools/index.md
@@ -4,7 +4,8 @@ subhead: Learn to diagnose costly work preventing user interaction.
 authors:
   - addyosmani
 date: 2019-05-29
-hero: long-tasks.jpg
+updated: 2022-11-30
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
 alt: An hourglass with sand pouring through it
 description: |
   Long Tasks can keep the main thread busy, delaying user interaction. Chrome DevTools can now visualize Long Tasks, making it easier to see tasks to optimize.
@@ -13,70 +14,35 @@ tags:
   - performance
 ---
 
-**tl;dr: Long Tasks can keep the main thread busy, delaying user interaction. Chrome DevTools can now visualize Long Tasks, making it easier to see tasks to optimize.**
+**Long Tasks can keep the main thread busy, delaying user interaction. Chrome DevTools can now visualize Long Tasks, making it easier to see tasks to optimize.**
 
-If you use Lighthouse to audit your pages, you may be familiar with [Time to Interactive](/interactive), a metric representing when users can interact with your page and get a response. But did you know Long (JavaScript) Tasks can contribute heavily to a poor TTI?
+If you use Lighthouse to audit your pages, you may be familiar with [Time to Interactive](/tti/), a metric representing when users can interact with your page and get a response. But did you know Long (JavaScript) Tasks can contribute heavily to a poor TTI?
 
-<img
-class="w-screenshot" sizes="(max-width: 1400px) 100vw, 1400px"
-srcset="
-./Are-long0_rq2bce_c_scale_w_200.png 200w,
-./Are-long0_rq2bce_c_scale_w_775.png 775w,
-./Are-long0_rq2bce_c_scale_w_1239.png 1239w,
-./Are-long0_rq2bce_c_scale_w_1400.png 1400w"
-src="./Are-long0_rq2bce_c_scale_w_1400.png"
-alt="Time to Interactive displayed in the Lighthouse Report">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Time to Interactive displayed in the Lighthouse Report", width="800", height="169" %}
 
 ## What are Long Tasks?
 
-A [Long Task](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API) is JavaScript code that monopolizes the main thread for extended periods of time, causing the UI to "freeze".
+A [Long Task](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API) is JavaScript code that monopolizes the main thread for extended periods of time, causing the UI to "freeze".
 
 While a web page is loading, Long Tasks can tie up the main thread and make the page unresponsive to user input even if it looks ready. Clicks and taps often don't work because event listeners, click handlers etc have not yet been attached.
 
-CPU-heavy Long Tasks occur due to complex work that takes longer than 50ms. Why 50ms? [The RAIL model](https://developers.google.com/web/fundamentals/performance/rail) suggests you process user input events in [50ms](https://developers.google.com/web/fundamentals/performance/rail#response) to ensure a visible response within 100ms. If you don't, the connection between action and reaction is broken.
+CPU-heavy Long Tasks occur due to complex work that takes longer than 50ms. Why 50ms? [The RAIL model](/rail/) suggests you process user input events in [50ms](/rail/#response-process-events-in-under-50ms) to ensure a visible response within 100ms. If you don't, the connection between action and reaction is broken.
+
+{% Aside 'important' %}
+While the RAIL model suggests providing a visual response to user input within 100 ms, the [Interaction to Next Paint (INP)](/inp/) metric's thresholds allow for up to 200 ms in order to set more easily achievable expectations, especially for slower devices.
+{% endAside %}
 
 ## Are there Long Tasks in my page that could delay interactivity?
 
-Until now, you've needed to manually look for "long yellow blocks" of script over 50ms long in [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) or use the [Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) to figure out what tasks were delaying interactivity. This could be a little cumbersome.
-
-<img
-class="w-screenshot" sizes="(max-width: 1400px) 100vw, 1400px"
-srcset="
-./Are-long1_yp7hwf_c_scale_w_200.png 200w,
-./Are-long1_yp7hwf_c_scale_w_349.png 349w,
-./Are-long1_yp7hwf_c_scale_w_457.png 457w,
-./Are-long1_yp7hwf_c_scale_w_570.png 570w,
-./Are-long1_yp7hwf_c_scale_w_670.png 670w,
-./Are-long1_yp7hwf_c_scale_w_755.png 755w,
-./Are-long1_yp7hwf_c_scale_w_841.png 841w,
-./Are-long1_yp7hwf_c_scale_w_919.png 919w,
-./Are-long1_yp7hwf_c_scale_w_1000.png 1000w,
-./Are-long1_yp7hwf_c_scale_w_1077.png 1077w,
-./Are-long1_yp7hwf_c_scale_w_1153.png 1153w,
-./Are-long1_yp7hwf_c_scale_w_1220.png 1220w,
-./Are-long1_yp7hwf_c_scale_w_1289.png 1289w,
-./Are-long1_yp7hwf_c_scale_w_1400.png 1400w"
-src="./Are-long1_yp7hwf_c_scale_w_1400.png"
-alt="A DevTools Performance panel screenshot showing the differences between short tasks and long tasks">
-
-To help ease your performance auditing workflow, [DevTools now visualizes Long Tasks](https://developers.google.com/web/updates/2019/03/devtools#longtasks). Tasks (shown in gray) have red flags if they are Long Tasks.
-
-<img
-class="w-screenshot" sizes="(max-width: 1400px) 100vw, 1400px"
-srcset="
-./Are-long2_momntc_c_scale_w_200.png 200w,
-./Are-long2_momntc_c_scale_w_424.png 424w,
-./Are-long2_momntc_c_scale_w_600.png 600w,
-./Are-long2_momntc_c_scale_w_740.png 740w,
-./Are-long2_momntc_c_scale_w_884.png 884w,
-./Are-long2_momntc_c_scale_w_1020.png 1020w,
-./Are-long2_momntc_c_scale_w_1136.png 1136w,
-./Are-long2_momntc_c_scale_w_1254.png 1254w,
-./Are-long2_momntc_c_scale_w_1400.png 1400w"
-src="./Are-long2_momntc_c_scale_w_1400.png"
-alt="DevTools visualizing Long Tasks as gray bars in the Performance Panel with a red flag for long tasks">
-
-* Record a trace in the [Performance panel](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) of loading up a web page.
+Until now, you've needed to manually look for "long yellow blocks" of script over 50ms long in [Chrome DevTools](https://developer.chrome.com/docs/devtools/) or use the [Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) to figure out what tasks were delaying interactivity. This could be a little cumbersome.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="A DevTools Performance panel screenshot showing the differences between short tasks and long tasks", width="800", height="450" %}
+
+To help ease your performance auditing workflow, [DevTools now visualizes Long Tasks](https://developer.chrome.com/blog/new-in-devtools-74/#longtasks). Tasks (shown in gray) have red flags if they are Long Tasks.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="DevTools visualizing Long Tasks as gray bars in the Performance Panel with a red flag for long tasks", width="800", height="450" %}
+
+* Record a trace in the [Performance panel](https://developer.chrome.com/docs/devtools/evaluate-performance/) of loading up a web page.
 * Look for a red flag in the main thread view. You should see tasks are now gray ("Task").
 *  Hovering over a bar will let you know the duration of the task and if it was considered "long".
 
@@ -84,27 +50,12 @@ alt="DevTools visualizing Long Tasks as gray bars in the Performance Panel with
 
 To discover what is causing a long task, select the gray **Task** bar. In the drawer beneath, select **Bottom-Up** and **Group by Activity**. This allows you to see what activities contributed the most (in total) to the task taking so long to complete. Below, it appears to be a costly set of DOM queries.
 
-<img
-class="w-screenshot" sizes="(max-width: 1400px) 100vw, 1400px"
-srcset="
-./Are-long3_tfm3wr_c_scale_w_200.png 200w,
-./Are-long3_tfm3wr_c_scale_w_394.png 394w,
-./Are-long3_tfm3wr_c_scale_w_547.png 547w,
-./Are-long3_tfm3wr_c_scale_w_678.png 678w,
-./Are-long3_tfm3wr_c_scale_w_786.png 786w,
-./Are-long3_tfm3wr_c_scale_w_904.png 904w,
-./Are-long3_tfm3wr_c_scale_w_1010.png 1010w,
-./Are-long3_tfm3wr_c_scale_w_1109.png 1109w,
-./Are-long3_tfm3wr_c_scale_w_1212.png 1212w,
-./Are-long3_tfm3wr_c_scale_w_1312.png 1312w,
-./Are-long3_tfm3wr_c_scale_w_1400.png 1400w"
-src="./Are-long3_tfm3wr_c_scale_w_1400.png"
-alt="Selecting a long task (labelled 'Task') in DevTools allows us to drill-down into the activities that were responsible for it.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="Selecting a long task (labelled 'Task') in DevTools allows us to drill-down into the activities that were responsible for it.", width="800", height="450" %}
 
 ## What are common ways to optimize Long Tasks?
 
 Large scripts are often a major cause of Long Tasks so consider [splitting them up](/reduce-javascript-payloads-with-code-splitting). Also keep an eye on third-party scripts; their Long Tasks can delay primary content from getting interactive.
 
-Break all your work into small chunks (that run in < 50ms) and run these chunks at the right place and time; the right place may even be off the main thread, in a worker. Phil Walton's [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/) is a good read on this topic.
+Break all your work into small chunks (that run in < 50ms) and run these chunks at the right place and time; the right place may even be off the main thread, in a worker. Phil Walton's [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/) is a good read on this topic. See also the [optimize long tasks article](/optimize-long-tasks/) for general strategies for managing and breaking up long tasks.
 
 Keep your pages responsive. Minimizing Long Tasks is a great way to ensure your users have a delightful experience when they visit your site. For more on Long Tasks, check out [User-centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks).
diff --git a/src/site/content/en/blog/long-tasks-devtools/long-tasks.jpg b/src/site/content/en/blog/long-tasks-devtools/long-tasks.jpg
deleted file mode 100644
index 90c2e7f03fb..00000000000
Binary files a/src/site/content/en/blog/long-tasks-devtools/long-tasks.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/love-your-cache/index.md b/src/site/content/en/blog/love-your-cache/index.md
new file mode 100644
index 00000000000..acf5708b8e6
--- /dev/null
+++ b/src/site/content/en/blog/love-your-cache/index.md
@@ -0,0 +1,276 @@
+---
+title: Love your cache ❤️
+subhead: |
+  Users loading your site a second time will use their HTTP cache, so make sure
+  it works well.
+description: |
+  First load performance is important, but it's not everything. Users who load
+  your site a second time will use their cache to get access to your content—so
+  it's key to make sure it works well too, both for speed and correctness.
+authors:
+  - samthor
+date: 2020-12-11
+hero: image/admin/VKYTBR0Ri5I7Jz7Ob2Fa.jpg
+alt: Overhead power line for a train with a number "2"
+tags:
+  - blog
+  - performance
+  - network
+---
+
+_This post is a companion to the **Love your cache** video, part of the Extended
+Content at Chrome Dev Summit 2020. Be sure to check out the video:_
+
+{% YouTube 'tprJYFkv4LU' %}
+
+When users load your site a second time, their browser will use resources inside
+its HTTP cache to help make that load faster. But the standards for caching on
+the web date back to 1999, and they're defined pretty broadly—determining
+whether a file, like CSS or an image, might be fetched again from the network
+versus loaded from your cache is a bit of an inexact science.
+
+In this post, I'll talk through a sensible, modern default for caching—one that
+actually does _no caching at all_. But that's just the default, and it's of
+course more nuanced than just "turning it off". Read on!
+
+{% Aside %}
+Something to remember when building your site is that performance
+metrics [like Core Web Vitals](/vitals) include all loads, not
+just the 1st load. Yet, a lot of Google's guidance focuses on optimizing the
+first load (which is definitely important to bring users in!), and Lighthouse
+only tests your site on an empty cache.
+{% endAside %}
+
+## Goals
+
+When a site is loaded for the 2nd time, you have two goals:
+
+1. Ensure that your users get the most up-to-date version available—if
+   you've changed something, it should be reflected quickly
+1. Do #1 while fetching as little from the network as possible
+
+In the broadest sense, you only want to send the smallest change to your clients
+when they load your site again. And structuring your site to ensure the most
+efficient distribution of any change is challenging (more on that below, and in
+the video).
+
+Having said that, you also have other knobs when you consider caching—perhaps
+you've decided to let a user's browser HTTP cache hold onto your site for a long
+time so that no network requests are required to serve it at all. Or you've
+constructed a service worker that will serve a site entirely offline before
+checking if it's up-to-date. This is an extreme option, which is valid—and used
+for many offline-first app-like web experiences—but the web doesn't need to be
+at a cache-only extreme, or even a completely network-only extreme.
+
+## Background
+
+As web developers, we're all accustomed to the idea of having a "stale cache".
+But we know, almost instinctively, the tools available to solve this: do a "hard
+refresh", or open an incognito window, or use some combination of your browser's
+developer tools to clear a site's data.
+
+Regular users out there on the internet don't have that same luxury. So while we
+have some core goals of ensuring our users have a great time with their 2nd
+load, it's also really important to make sure they don't have a _bad time_ or
+get stuck. (Check out the video if you'd like to hear me talk about how we
+nearly got the [web.dev/live](/live) site stuck!)
+
+For a bit of background, a really common reason for "stale cache" is actually
+the 1999-era default for caching. It relies on the `Last-Modified` header:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Z6ApNGczaZ4ikhLEBkT4.png", alt="Diagram showing how long different assets are cached by a user's browser", width="800", height="342" %}
+  <figcaption>Assets generated at different times (in gray) will be cached for
+different times, so a 2nd load can get a combination of cached and fresh assets</figcaption>
+</figure>
+
+Every file you load is kept for an additional 10% of its current lifetime, as
+your browser sees it. For example, if `index.html` was created a month ago,
+it'll be cached by your browser for about another three days.
+
+This was a well-intentioned idea back in the day, but given the tightly
+integrated nature of today's websites this default behavior means it's possible
+to get into a state where a user has files designed for different releases of
+your website (e.g., the JS from Tuesday's release, and the CSS from Friday's
+release), all because those files were not updated at exactly the same time.
+
+## The well-lit path
+
+A modern default for caching is to actually do no caching at all, and use
+[CDNs](/content-delivery-networks/) to bring your content close
+to your users. Every time a user loads your site, they'll go to the network to
+see whether it's up-to-date. This request will have low latency, as it'll be
+provided by a CDN geographically close to each end user.
+
+You can configure your web host to respond to web requests with this header:
+
+```text
+Cache-Control: max-age=0,must-revalidate,public
+```
+
+This basically says; the file is valid for no time at all, and you must validate
+it from the network before you can use it again (otherwise it's only
+"suggested").
+
+{% Aside %}
+Instead of `max-age=0,must-revalidate`, you could also specify `no-cache`: this
+is equivalent. However, `no-cache` is a confusing name, because it could be
+interpreted as "never cache this file"—even though that's not the case. For some
+heavy reading, see
+[Cache-Control on MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Directives).
+{% endAside %}
+
+This validation process is relatively cheap in terms of bytes transferred—if a
+large image file hasn't changed, your browser will receive a small 304
+response—but it costs _latency_ as a user must still go to the network to find
+out. And this is the primary downside of this approach. It can work really well
+for folks on fast connections in the 1st world, and where your CDN of choice has
+great coverage, but not for those folks who might be on slower mobile
+connections or using poor infrastructure.
+
+Regardless, this is a modern approach that
+[is the default on a popular CDN, Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/),
+but can be configured on nearly any CDN. For Firebase Hosting, you can include
+this header
+[in the hosting section](https://firebase.google.com/docs/hosting/full-config#headers)
+of your firebase.json file:
+
+```json
+"headers": [
+  // Be sure to put this last, to not override other headers
+  {
+    "source": "**",
+    "headers": [ {
+      "key": "Cache-Control",
+      "value": "max-age=0,must-revalidate,public"
+    }
+  }
+]
+```
+
+So while I still suggest this as a sensible default, it's only that—the default!
+Read on to find out how to step in and upgrade the defaults.
+
+## Fingerprinted URLs
+
+By including a hash of the file's content in the name of assets, images, and so
+on served on your site, you can ensure that these files will always have unique
+content—this will result in files named `sitecode.af12de.js` for example. When
+your server responds to requests for these files, you can safely instruct your
+end-user's browsers to cache them for a long time by configuring them with this
+header:
+
+```text
+Cache-Control: max-age=31536000,immutable
+```
+
+This value is a year, in seconds. And according to the spec, this is effectively
+equal to "forever".
+
+Importantly, don't generate these hashes by hand—it's too much manual work! You
+can use tools like Webpack, Rollup and so on to help you out with this. Be sure
+to read more about them on [Tooling Report](https://tooling.report).
+
+Remember that it's not just JavaScript that can benefit from fingerprinted URLs;
+assets like icons, CSS and other immutable data files can also be named this
+way. (And be sure to watch the video above to learn a bit more about code
+splitting, which lets you ship less code whenever your site changes.)
+
+{% Aside %}
+We include the keyword `immutable` in the `Cache-Control`
+recommendation above. Without this keyword, our long `Cache-Control` is only
+considered to be a suggestion, and some browsers will _still_ ignore it and go
+to the server. (In 2017, Chrome
+[changed its behavior](https://blog.chromium.org/2017/01/reload-reloaded-faster-and-leaner-page_26.html),
+so it always acts as if the immutable keyword is on anyway—so right now, it's
+only needed for Safari and Firefox).
+{% endAside %}
+
+Regardless of how your site approaches caching, these sorts of fingerprinted
+files are incredibly valuable to any site you might build. Most sites just
+aren't changing on every release.
+
+Of course, we can't rename our 'friendly', user-facing pages this way: renaming
+your `index.html` file to `index.abcd12.html`—that's infeasible, you can't tell
+users to go to a new URL every time they load your site! These 'friendly' URLs
+can't be renamed and cached in this way, which leads me on to a possible middle
+ground.
+
+## The middle ground
+
+There's obviously room for a middle ground when it comes to caching. I've
+presented two extreme options; cache _never_, or cache _forever_. And there will
+be a number of files which you might like to cache for a time, such as the
+"friendly" URLs I mentioned above.
+
+If you do want to cache these "friendly" URLs and their HTML, it's worth
+considering what dependencies they include, how _they_ may be cached, and how
+caching their URLs for a time might affect you. Let's look at a HTML page which
+includes an image like this:
+
+```html
+<img src="/images/foo.jpeg" loading="lazy" />
+```
+
+If you update or change your site by deleting or changing this lazy-loaded
+image, users who view a cached version of your HTML might get an incorrect or
+missing image—because they've still cached the original `/images/foo.jpeg` when
+they revisit your site.
+
+If you're careful, this might not affect you. But broadly it's important to
+remember that your site—when cached by your end users—no longer just exists on
+your servers. Rather, it may exist in _pieces_ inside the caches of your end user's
+browsers.
+
+In general, most guides out there on caching will talk about this kind of
+setting—do you want to cache for an hour, several hours, and so on. To set this
+kind of cache up, use a header like this (which caches for 3600 seconds, or one
+hour):
+
+```text
+Cache-Control: max-age=3600,immutable,public
+```
+
+One last point. If you're creating timely content which typically might only be
+accessed by users once—like news articles!—my opinion is that these should never
+be cached, and you should use our sensible default above. I think we often
+overestimate the value of caching over a user's desire to always see the latest
+and greatest content, such as a critical update on a news story or current
+event.
+
+### Non-HTML options
+
+Aside from HTML, some other options for files that live in the middle ground
+include:
+
+-  In general, look for assets that don't affect others
+   -  For example: avoid CSS, as it causes changes in how your HTML is
+      rendered
+
+-  Large images that are used as part of timely articles
+   -  Your users probably aren't going to visit any single article more
+      than a handful of times, so don't cache photos or hero images forever and
+      waste storage
+
+-  An asset which represents something that itself has lifetime
+   -  JSON data about the weather might only be published every hour, so
+      you can cache the previous result for an hour—it won't change in your window
+   -  Builds of an open-source project might be rate-limited, so cache a
+      build status image until it's possible that the status might change
+
+## Summary
+
+When users load your site a second time, you've already had a vote of
+confidence—they want to come back and get more of what you're offering. At this
+point, it's not always just about bringing that load time down, and you have a
+bunch of options available to you to ensure that your browser does only the work
+it needs to deliver both a fast and an up-to-date experience.
+
+Caching is not a new concept on the web, but perhaps it needs a sensible
+default—consider using one and strongly opting-in to better caching strategies
+when you need them. Thanks for reading!
+
+## See also
+
+For a general guide on the HTTP cache, check out
+[Prevent unnecessary network requests with the HTTP Cache](/http-cache).
diff --git a/src/site/content/en/blog/lowes/index.md b/src/site/content/en/blog/lowes/index.md
new file mode 100644
index 00000000000..aa3ad0b348c
--- /dev/null
+++ b/src/site/content/en/blog/lowes/index.md
@@ -0,0 +1,114 @@
+---
+title: "Lowe's website is among fastest performing e-commerce websites"
+subhead: >
+  By building an automated performance testing and monitoring system,
+  the Lowe's Site Speed Team test pull requests against performance budgets,
+  and prevent performance regressions going into production.
+description: >
+  By building an automated performance testing and monitoring system,
+  the Lowe's Site Speed Team test pull requests against performance budgets,
+  and prevent performance regressions going into production.
+authors:
+  - choudhuryashish
+  - dinakarchandolu
+  - abhimanyuraibahadur
+  - dhilipvenkateshuvarajan
+  - safwans
+  - gmimani
+date: 2021-03-23
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/U0Xrfy2kVLEb3JSiPS5C.png
+alt: The Lowes logo.
+tags:
+  - blog
+  - case-study
+  - web-vitals
+  - performance
+---
+
+{% Aside %}
+This post was authored by [Ashish Choudhury](https://www.linkedin.com/in/choudhuryashish/),
+[Dinakar Chandolu](https://www.linkedin.com/in/dinakarchandolu/),
+[Abhimanyu Raibahadur](https://www.linkedin.com/in/abhimanyuraibahadur/), and
+[Dhilipvenkatesh Uvarajan](https://www.linkedin.com/in/dhilip-venkatesh-uvarajan-16914624/)
+from Lowe's.
+{% endAside %}
+
+[Lowe's](https://www.lowes.com/) is a nearly $90B home improvement retailer
+that operates about 2,200 stores and employs more than 300,000 associates.
+By building an automated testing and monitoring system that prevents performance regressions from deploying to production,
+Lowe's Site Speed Team was able to improve its website performance,
+ranking among the top retail sites.
+
+## Problem
+
+The Site Speed Team's goal is to make the Lowe's site one of the fastest e-commerce sites in terms of page load performance.
+Before they built their automated testing and monitoring system,
+Lowe's website developers were unable to measure performance automatically in pre-production environments.
+Existing tools only conducted tests in the production environment.
+As a result, inferior builds slipped into production, creating a poor user experience.
+These inferior builds would remain in production until they were detected by the Site Speed Team and reverted by the author.
+
+## Solution
+
+The Site Speed Team used open source tools to build an automated performance testing and monitoring system for pre-production environments.
+The system measures the performance of every pull request (PR)
+and gates the PR from shipping to production if it does not meet the Site Speed Team's
+[performance budget](/performance-budgets-101/) and [metric criteria](/vitals/).
+The system also measures SEO and ADA compliance.
+
+## Impact
+
+From a sample of 1 team over 16 weeks deploying 102 builds,
+the automated performance testing and monitoring system prevented 32 builds with subpar performance from going into production.
+
+Where it used to take the Site Speed Team three to five days to inform developers that they had shipped performance regressions into production,
+the system now automatically informs developers of performance problems five minutes after submitting a pull request in a pre-production environment.
+
+Code quality is improving over time,
+as measured by the fact that fewer pull requests are being flagged for performance regressions.
+The Site Speed Team is also gradually tightening governance budgets to continuously improve site quality.
+
+In general, having clear ownership of problematic code has shifted the engineering culture.
+Instead of begrudging reactive corrections because it was never clear who actually introduced the problems,
+the team can make proactive optimizations with ownership of problematic code being objectively attributable.
+
+## Implementation
+
+The heart of the Site Speed Governance (SSG) app is [Lighthouse CI](/lighthouse-ci/).
+The SSG app uses Lighthouse to validate and audit the page performance of every pull request.
+
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/62alkvo2eRYoyptYeDbZ.png", alt="A process diagram of the SSG app, the steps shown in the diagram are described later in the article.", width="800", height="567" %}
+</figure>
+
+The SSG app causes a build to fail if the Site Speed Team's defined
+[performance budget](/performance-budgets-101/) and metric targets are not reached.
+It enforces not only load performance but also SEO, PWA, and accessibility.
+It can report status immediately to authors, reviewers, and SRE teams.
+It can also be configured to bypass the checks when exceptions are needed.
+
+## Automated Speed Governance (ASG) process flow
+
+### Spinnaker
+
+Start point. A developer merges their code into a pre-production environment.
+
+1. Deploy the pre-production environment with CDN assets.
+1. Check for the successful deployment.
+1. Run a [Docker](https://www.docker.com/)
+container to start building the ASG application or send a notification (in the event of deployment failure).
+
+### Jenkins and Lighthouse
+
+1. Build the ASG application with [Jenkins](https://www.jenkins.io/).
+1. Run a custom Docker container that has Chrome and Lighthouse installed.
+Pull `lighthouserc.json` from the SSG app and run `lhci autorun --collect-url=https://example.com`.
+
+### Jenkins and SSG app
+
+1. Extract `assertion-results.json` from lhci and compare it to predefined budgets in `budgets.json`.
+Save the output as a text file and upload it to [Nexus](https://www.sonatype.com/nexus/repository-oss) for future comparisons.
+1. Compare the current `assertion-results.json` to the last successful build
+(downloaded from Nexus) and save it as a text file.
+1. Build an HTML email with the success or failure information.
+1. Send the email to the relevant distribution lists with Jenkins.
diff --git a/src/site/content/en/blog/mailru-cwv/index.md b/src/site/content/en/blog/mailru-cwv/index.md
new file mode 100644
index 00000000000..5efb40f3311
--- /dev/null
+++ b/src/site/content/en/blog/mailru-cwv/index.md
@@ -0,0 +1,291 @@
+---
+layout: post
+title: Improving Core Web Vitals on the Mail.ru home page resulted in an average 10% increase in conversion rates
+subhead: |
+  Several months of work to improve Core Web Vitals on the home page of Mail.ru resulted in a 60% increase in the 75th percentile in Cumulative Layout Shift (CLS), boosting average session time by 2.7% and conversion rates of core sections by more than 10%.
+description: |
+  Several months of work to improve Core Web Vitals on the home page of Mail.ru resulted in a 60% increase in the 75th percentile in Cumulative Layout Shift (CLS), boosting average session time by 2.7% and conversion rates of core sections by more than 10%.
+authors:
+  - denisstasyev
+  - svenmay
+date: 2021-11-15
+updated: 2022-07-18
+hero: image/dB6B4Sr8kaaT0KZujRBFC303oFR2/rhX18pRJWKzMdDNFzxr7.PNG
+alt: Google Core Web Vitals + Mail.ru Home Page.
+thumbnail: image/dB6B4Sr8kaaT0KZujRBFC303oFR2/7lLVG6IeMKZYyhLanvXc.PNG
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+
+## Where we started
+
+Mail.ru is one of the leading e-mail services on the Russian-speaking Internet and is [in the top 5 sites in Russia in terms of traffic](https://www.alexa.com/topsites/countries/RU). Mail.ru is an important resource for many people. It receives several hundred million visits per month, and is a portal from where people can access email, news, social media, performance internet searches and more.
+
+Mail.ru wanted to provide its visitors with a high quality user experience, so work began to improve Core Web Vitals. Before discussing our optimization strategy, a few technical details of the Mail.ru home page should first be noted.
+
+Though the project had long been developed using our in-house templating engine [Fest](https://github.com/mailru/fest), we began to migrate to [Svelte 3](https://svelte.dev/) in 2019.
+
+{% Aside %}
+You can find out more about Fest and our reasons for changing the technology stack to Svelte in [our team's presentation](https://youtu.be/H2l3pK42f38?t=2913) at Svelte Russia Meetup \#1.
+{% endAside %}
+
+Svelte implements reactivity in a way that [doesn't use Virtual DOM](https://svelte.dev/blog/virtual-dom-is-pure-overhead), which makes it less resource-intensive. [Svelte's approach removes unused functions from production bundles](https://svelte.dev/blog/frameworks-without-the-framework) because the code implementing them isn't generated by the compiler if the functions aren't used. Unused code is removed during compilation, resulting in smaller bundles. This may help reduce [Total Blocking Time (TBT)](/tbt/) during page startup.
+
+
+## Tracking performance metrics
+
+Before optimizing Core Web Vitals, it's helpful to [evaluate performance in the field](/vitals-field-measurement-best-practices/). Before Core Web Vitals, we tracked other metrics, such as [First Contentful Paint (FCP)](/fcp/), in our internal performance dashboard.
+
+Our metrics collection script was modified to collect Core Web Vitals and transmit them to our performance dashboard for visualization. In line with Google's recommendations, our script uses [PerformanceObserver API](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) to obtain metrics, which is part of [the universal frontend "Platform"](https://github.com/mail-core) inside Mail.ru.
+
+The dashboard displayed the following metrics for users (mean values for the week of 15-21 March 2021):
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th colspan="2" width="40%">Metrics group name</th>
+        <th colspan="3" width="30%">Core Web Vitals</th>
+        <th colspan="3" width="30%">Other Web Vitals</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td colspan="2">Metric name</td>
+        <td>LCP</td>
+        <td>FID</td>
+        <td>CLS</td>
+        <td>FCP</td>
+        <td>TBT</td>
+        <td>TTI</td>
+      </tr>
+      <tr>
+        <td rowspan="3">Share of users in accordance with Core Web Vitals thresholds</td>
+        <td>good</td>
+        <td>52%</td>
+        <td>92%</td>
+        <td>33%</td>
+        <td>35%</td>
+        <td>42%</td>
+        <td>43%</td>
+      </tr>
+      <tr>
+        <td>needs-improvement</td>
+        <td>19%</td>
+        <td>5%</td>
+        <td>23%</td>
+        <td>38%</td>
+        <td>16%</td>
+        <td>25%</td>
+      </tr>
+      <tr>
+        <td>poor</td>
+        <td>29%</td>
+        <td>3%</td>
+        <td>44%</td>
+        <td>27%</td>
+        <td>42%</td>
+        <td>32%</td>
+      </tr>
+    </tbody>
+    <caption>Metrics for the week of 15-21 March 2021</caption>
+  </table>
+</div>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/ZL7y3ZCpbMcqlOv9mLpV.png", alt="Core Web Vitals before optimization show roughly 1/3 of users in the poor bucket.", width="800", height="479" %}
+  <figcaption>Web Vitals values before the improvements.</figcaption>
+</figure>
+
+## Improving Core Web Vitals
+
+While plenty of guidance exists for improving Core Web Vitals, every project has unique challenges. For the Mail.ru home page, the following opportunities were identified:
+
+- Implementing placeholders for ad banners to reduce [CLS](/cls/).
+- Using server-side rendering (SSR) to reduce [Largest Contentful Paint (LCP)](/lcp/).
+- Code splitting to reduce LCP and [First Input Delay (FID)](/fid/).
+
+## Skeletons for CLS improvement
+
+CLS was one of the worst performing field metrics for the Mail.ru home page. Subsequent profiling of this page in the [**Performance** panel](https://developer.chrome.com/docs/devtools/evaluate-performance/) of Chrome's DevTools revealed that ads were the source of the problem. To improve layout stability, our team decided to use placeholders to reserve space for ads before they load.
+
+When implementing placeholders, the first step is to determine the dimensions of the content that will replace them. Luckily, the desktop version of Mail.ru home page has strictly documented sizes for ads. After talking with the design team, SVG-animated UI skeletons were used as placeholders as [they reduce the perceived load time of the content](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a).
+
+{% Aside 'caution' %}
+SVG animations are not supported in Internet Explorer 11, consider using CSS if legacy browser support is essential to your application.
+{% endAside %}
+
+
+## The return of SSR
+
+To ease the transition from Fest to Svelte, we incrementally rewrote the existing project rather than start over. By March 2021, we had migrated most of the frontend to Svelte, and eventually brought SSR to our production application after triaging and fixing backend performance issues.
+
+{% Aside %}
+SSR was not used for the entire application, as [it can be an expensive process](https://malloc.fi/performance-cost-of-server-side-rendered-react-node-js) that can delay [Time to First Byte (TTFB)](/ttfb/), which [may affect LCP](/optimize-lcp/#optimize-your-server). We decided to use SSR for crucial content that the user will see on initial render, and offload rendering of hidden content on the client. At the moment, Mail.ru is experimenting with [Islands Architecture](https://jasonformat.com/islands-architecture/) to see if further performance gains can be had.
+{% endAside %}
+
+After implementing SSR, the team discovered the cause of CLS regression that initially went unnoticed: the news section was not inserted at the moment of rendering the first content on the page. There was a delay between the initial painting of the page markup provided by the server and the insertion of news section on the client. This behaviour resulted in an ad skeleton shift, which worsened CLS.
+
+Although Chrome's DevTools showed Layout Shift events, we couldn't find the reason for it at first. Though SSR itself wasn't the problem, it helped in discovering the solution later on. Fixing the code responsible for the painting delay improved layout stability of the news component.
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/X5ZgXiNPGEqz6oOlvY5v.png", alt="Active JavaScript just shows an empty page in the news section, hidding the layout jumps.", width="800", height="443" %}
+  <figcaption>Finding the news painting problem with JavaScript disabled.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/aXnxfjZCk4oZN8s6ag5o.png", alt="Disabling JavaScript revealed layout shifts, previously hidden from human eyes.", width="800", height="448" %}
+  <figcaption>Fixing the news painting problem with JavaScript disabled.</figcaption>
+</figure>
+
+Another effect SSR can have on CLS is the movement of components before and after hydration, which can lead to further layout shifts. We encountered this on the mobile version in particular and it required paying special attention to the hydrated component markup. A good solution to this problem was transferring as much display logic from JavaScript to CSS when possible.
+
+## Code splitting and unused polyfills
+
+To improve the perceived page load speed, work was required to decrease LCP and FID values. One way to achieve this is through [code splitting](/codelab-code-splitting/). In addition to the Mail.ru home page itself, our team is developing a widget for portal navigation. It is currently embedded in [many of our company's projects](https://vk.company/en/projects/).
+
+For historical reasons, the widget is inserted at the very beginning of the page as a synchronously loading script. The share of polyfills in this script grew over time. To limit the negative performance effects of loading these polyfills, we implemented code splitting for both modern and legacy browsers.
+
+We decided against the [`module`/`nomodule` pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) for loading JavaScript bundles for modern or legacy browsers, as the `<script>` element's [`type="module"` attribute](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) didn't target browsers that were modern enough for our needs. To address this, Mail.ru uses an in-house tool for identifying modern browser versions on the backend, and can adapt to those browsers accordingly.
+
+{% Aside %}
+The [Browserslist Useragent](https://github.com/browserslist/browserslist-useragent) package is a publicly available alternative to custom tooling for comparing a project's `.browserslistrc` to the User-Agent string in an application backend. However, our team strongly recommends considering using [User-Agent Client Hints](https://github.com/WICG/ua-client-hints#differential-serving) (for example, [Sec-CH-UA header](/user-agent-client-hints/#user-agent-response-and-request-headers), as Mail.ru does in our in-house tool.
+{% endAside %}
+
+Once browsers could be identified in the backend, we implemented code splitting for modern and legacy browsers. The result was a 43.3% reduction in size of the synchronously-loaded JavaScript widget for modern browsers. This practice has been applied to some other portal scripts as well.
+
+In addition to bundle size reduction and positive effects on Core Web Vitals, code splitting improves the developer experience as well. Only 3.5% of our users use legacy browsers and that share is on a downward trend, so implementing code-splitting allowed our developers to use the latest browser APIs without introducing the polyfill bloat necessary for legacy browsers to all users.
+
+## Results
+
+After the optimization effort, we observed the mean values for the week of 24-30 May 2021 in our field data:
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th colspan="2" width="40%">Metrics group name</th>
+        <th colspan="3" width="30%">Core Web Vitals</th>
+        <th colspan="3" width="30%">Other Web Vitals</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td colspan="2">Metric name</td>
+        <td>LCP</td>
+        <td>FID</td>
+        <td>CLS</td>
+        <td>FCP</td>
+        <td>TBT</td>
+        <td>TTI</td>
+      </tr>
+      <tr>
+        <td rowspan="3">Share of users in accordance with Core Web Vitals thresholds</td>
+        <td>good</td>
+        <td>58% (+6%)</td>
+        <td>93% (+1%)</td>
+        <td>93% (+60%)</td>
+        <td>43% (+8%)</td>
+        <td>49% (+7%)</td>
+        <td>51% (+8%)</td>
+      </tr>
+      <tr>
+        <td>needs-improvement</td>
+        <td>18%</td>
+        <td>4%</td>
+        <td>3%</td>
+        <td>34%</td>
+        <td>17%</td>
+        <td>24%</td>
+      </tr>
+      <tr>
+        <td>poor</td>
+        <td>24%</td>
+        <td>3%</td>
+        <td>4%</td>
+        <td>23%</td>
+        <td>34%</td>
+        <td>25%</td>
+      </tr>
+    </tbody>
+    <caption>Metrics for the week of 24-30 March 2021</caption>
+  </table>
+</div>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/7FIE2St8w6EEowUIqV9K.png", alt="All metrics in the good bucket improved by at least 1%. CLS even by 60%.", width="800", height="376" %}
+  <figcaption>Comparison of Web Vitals before and after (change in 'good' group is shown in brackets).</figcaption>
+</figure>
+
+The graphs below show changes in web page performance metrics values according to the "Platform". Note the two important dates on the graphs:
+
+- 23 March 2021: the release of iteration with the last page sections migrated to Svelte;
+- 19 April 2021: the release of iteration with returned SSR and layout modified to correct CLS regressions.
+
+The decrease in values from May 1 to May 10 is due to May holidays in Russia.
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/8wq9d0uj3EJp5vK6kI49.png", alt="LCP from March to 1 June 2021 showing small improvments over time.", width="800", height="344" %}
+  <figcaption>LCP graph in 'Platform': 16 March to 1 June 2021.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/bxANzHIw78TvdS1RFyWG.png", alt="FID from 16 March to 1 June 2021 showing tiny improvements on a high level.", width="800", height="345" %}
+  <figcaption>FID graph in 'Platform': 16 March to 1 June 2021.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/7woJXpiHLZU3l7PCdspi.png", alt="CLS from 16 March to 1 June 2021 showing huge improvements starting at April 23rd.", width="800", height="344" %}
+  <figcaption>CLS graph in 'Platform': 16 March to 1 June 2021.</figcaption>
+</figure>
+
+Results obtained using the "Platform" are in line with the growth of metric values in [Chrome UX Report (CrUX)](https://developer.chrome.com/docs/crux/).
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/41Czys52EyEMyYv3fI2w.png", alt="LCP metric from CrUX showing increase from 51% to 58% in the good bucket.", width="800", height="499" %}
+  <figcaption>LCP metric change in CrUX in 2021.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/c8LWvsC52Q58uvKOIZXc.png", alt="FID metric from CrUX showing slight improvment in FID from 91% to 93% in good bucket.", width="800", height="498" %}
+  <figcaption>FID metric change in CrUX in 2021.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/dB6B4Sr8kaaT0KZujRBFC303oFR2/ilAn6vKt93uh4ioqGKj1.png", alt="CLS metric in CrUX showing hugh improvements from 46% to 98% in the good bucket.", width="800", height="492" %}
+  <figcaption>CLS metric change in CrUX in 2021.</figcaption>
+</figure>
+
+A comparison of mean user session duration values a week before the roll-out of initial improvements and a week after the roll-out shows 2.7% growth. Moreover, there is an overall significant increase in conversion in most sections of the page. In particular, conversions to the Mail.ru email app increased by 11.6%, the conversion of the news section increased by 13.5%.
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">181<sub>%</sub></p>
+    <p>Boost of share of good CLS threshold</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">2.7<sub>%</sub></p>
+    <p>Higher mean session duration</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">13.5<sub>%</sub></p>
+    <p>Increase of news section conversion rate</p>
+  </div>
+</div>
+
+The most unexpected result we got was a 17.4% increase in the Click-Through Rate (CTR) of the marketing banner (its rendering time was significantly reduced by the introduction of SSR and preload tags).
+
+{% Aside %}
+An unintended consequence of our work was that we saw a decrease in the conversion rate of some sections on the page. The search section in particular saw a decrease of 6.7%. Our team associates this with a change in the rendering of the page, as earlier on, this component was one of the first to render. We were able to reverse this decrease by introducing new product features into this section.
+{% endAside %}
+
+After analyzing the rest of the sections on the page, we noticed significant performance improvement in the vast majority of them. Even for sections such as Weather and Coronavirus&mdash;which are not key on our page&mdash;we see an increase in conversion by 9.6% and 9.5%, respectively.
+
+## Conclusion
+
+Improving performance is challenging in that the work involved may be prolonged. You should regularly monitor changes in metrics over time and ensure that all new product features don't cause regressions in Core Web Vitals. To achieve this, we monitor changes in Core Web Vitals in our [performance budget](/performance-budgets-101/).
+
+Most importantly, we stressed the importance of Core Web Vitals to all members of our product team, from managers and designers to testers and QA. Each team member should be aware of performance metrics and be empowered to improve them. We also incorporate performance optimization objectives into our business processes on a regular cadence. Successfully providing a high-quality user experience is only possible through a joint effort by all team members.
diff --git a/src/site/content/en/blog/mainline-mensware/index.md b/src/site/content/en/blog/mainline-mensware/index.md
new file mode 100644
index 00000000000..5f75800bc96
--- /dev/null
+++ b/src/site/content/en/blog/mainline-mensware/index.md
@@ -0,0 +1,339 @@
+---
+layout: post
+title: Mainline Menswear implements PWA and sees a 55% conversion rate uplift
+authors:
+  - harrytheodoulou
+  - natashakosoglov
+  - thomassteiner
+description: >
+  Mainline Menswear implements a Progressive Web App (PWA) and sees a 55% conversion rate uplift for
+  users that installed the app with caching and offline capabilities.
+date: 2021-04-20
+updated: 2021-05-19
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yz5G0leLpdHLidygym31.jpg
+tags:
+  - blog
+  - case-study
+  - service-worker
+  - progressive-web-apps
+---
+
+Mainline is an online clothing retailer that offers the biggest designer brand names in fashion. The
+UK-based company entrusts its team of in-house experts, blended strategically with key partners, to
+provide a frictionless shopping experience for all. With market presence in over 100 countries via
+seven custom-built territorial websites and an app, Mainline will continue to ensure the ecommerce
+offering is rivalling the competition.
+
+## Challenge
+
+Mainline Menswear's goal was to complement the current mobile optimized website with progressive
+features that would adhere to their 'mobile first' vision, focusing on mobile-friendly design and
+functionality with a growing smartphone market in mind.
+
+## Solution
+
+The objective was to build and launch a PWA that complemented the original mobile friendly version
+of the Mainline Menswear website, and then compare the stats to their hybrid mobile app,
+which is currently available on Android and iOS.
+
+Once the app launched and was being used by a small section of Mainline Menswear users, they were able to
+determine the difference in key stats between PWA, app, and Web.
+
+The approach Mainline took when converting their website to a PWA was to make sure that
+the framework they selected for their website (Nuxt.js, utilizing Vue.js) would be future-proof
+and enable them to take advantage of fast moving web technology.
+
+## Results
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">139<sub>%</sub></p>
+    <p>More pages per session in PWA vs. web.</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">161<sub>%</sub></p>
+    <p>Longer session durations in PWA vs. web.</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">10<sub>%</sub></p>
+    <p>Lower bounce rate in PWA vs. web</p>
+  </div>
+</div>
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">12.5<sub>%</sub></p>
+    <p>Higher average order value in PWA vs. web</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">55<sub>%</sub></p>
+    <p>Higher conversion rate in PWA vs. web.</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">243<sub>%</sub></p>
+    <p>Higher revenue per session in PWA vs. web.</p>
+  </div>
+</div>
+
+## Technical deep dive
+
+[Mainline Menswear](https://www.mainlinemenswear.co.uk/) is using the
+[Nuxt.js framework](https://nuxtjs.org/) to bundle and render their site, which is a single page
+application (SPA).
+
+### Generating a service worker file
+
+For generating the service worker, Mainline Menswear added configuration through a custom
+implementation of the [`nuxt/pwa` Workbox module](https://pwa.nuxtjs.org/workbox).
+
+The reason they forked the `nuxt/pwa` module was to allow the team to add more customizations to the
+service worker file that they weren't able to or had issues with when using the standard version.
+One such optimization was around the [offline functionality](#providing-offline-functionality) of
+the site like, for example, serving a default offline page and gathering analytics while offline.
+
+### Anatomy of the web app manifest
+
+The team generated a manifest with icons for different mobile app icon sizes and other web app
+details like `name`, `description` and `theme_color`:
+
+```json
+{
+  "name": "Mainline Menswear",
+  "short_name": "MMW",
+  "description": "Shop mens designer clothes with Mainline Menswear. Famous brands including Hugo Boss, Adidas, and Emporio Armani.",
+  "icons": [
+    {
+      "src": "/_nuxt/icons/icon_512.c2336e.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#107cbb"
+}
+```
+
+The web app, once installed, can be launched from the home screen without the browser getting in the
+way. This is achieved by adding the `display` parameter in the web app manifest file:
+
+```json
+{
+  "display": "standalone"
+}
+```
+
+Last but not the least, the company is now able to easily track how many users are visiting their
+web app from the home screen by simply appending a `utm_source` parameter in the `start_url` field of
+the manifest:
+
+```json
+{
+  "start_url": "/?utm_source=pwa"
+}
+```
+
+{% Aside %} See [Add a web app manifest](/add-manifest/) for a more in-depth explanation of all the
+web app manifest fields. {% endAside %}
+
+### Runtime caching for faster navigations
+
+Caching for web apps is a must for page speed optimization and for providing a better user
+experience for returning users.
+
+For caching on the web, there are quite a few
+[different approaches](https://dev.to/jonchen/service-worker-caching-and-http-caching-p82). The team
+is using a mix of the [HTTP cache](https://developer.mozilla.org/docs/Web/HTTP/Caching) and
+the [Cache API](https://developer.mozilla.org/docs/Web/API/Cache) for caching assets on the
+client side.
+
+The Cache API gives Mainline Menswear finer control over the cached assets, allowing them to apply
+complex strategies to each file type. While all this sounds complicated and hard to set up and
+maintain, [Workbox](https://developer.chrome.com/docs/workbox/) provides them with an easy
+way of declaring such complex strategies and eases the pain of maintenance.
+
+#### Caching CSS and JS
+
+For CSS and JS files, the team chose to cache them and serve them over the cache using the
+[`StaleWhileRevalidate`](https://developer.chrome.com/docs/workbox/reference/workbox-strategies/#type-StaleWhileRevalidate)
+Workbox strategy. This strategy allows them to serve all Nuxt CSS and JS files fast,
+which significantly increases their site's performance.
+At the same time, the files are being updated in the background to the latest version for the next visit:
+
+```js
+/* sw.js */
+workbox.routing.registerRoute(
+  /\/_nuxt\/.*(?:js|css)$/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'css_js',
+  }),
+  'GET',
+);
+```
+
+#### Caching Google fonts
+
+The strategy for caching Google Fonts depends on two file types:
+
+* The stylesheet that contains the `@font-face` declarations.
+* The underlying font files (requested within the stylesheet mentioned above).
+
+```js
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+workbox.routing.registerRoute(
+  /https:\/\/fonts\.googleapis\.com\/*/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'google_fonts_stylesheets',
+  }),
+  'GET',
+);
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+workbox.routing.registerRoute(
+  /https:\/\/fonts\.gstatic\.com\/*/,
+  new workbox.strategies.CacheFirst({
+    cacheName: 'google_fonts_webfonts',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new workbox.expiration.ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
+        maxEntries: 30,
+      }),
+    ],
+  }),
+  'GET',
+);
+```
+
+{% Aside %} A full example of the common Google Fonts strategy can be found in the
+[Workbox Docs](https://developer.chrome.com/docs/workbox/#use-cases-and-recipes).
+{% endAside %}
+
+#### Caching images
+
+For images, Mainline Menswear decided to go with two strategies. The first strategy applies
+to all images coming from their CDN, which are usually product images. Their pages are image-heavy so
+they are conscious of not taking too much of their users' device storage. So through Workbox, they
+added a strategy that is **caching images coming only from their CDN** with a **maximum
+of 60 images** using the
+[`ExpirationPlugin`](https://developer.chrome.com/docs/workbox/reference/workbox-expiration/#type-ExpirationPlugin).
+
+The 61st (newest) image requested, replaces the 1st (oldest) image so that no more than 60 product
+images are cached at any point in time.
+
+```js
+workbox.routing.registerRoute(
+  ({ url, request }) =>
+    url.origin === 'https://mainline-menswear-res.cloudinary.com' &&
+    request.destination === 'image',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'product_images',
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        // Only cache 60 images.
+        maxEntries: 60,
+        purgeOnQuotaError: true,
+      }),
+    ],
+  }),
+);
+```
+
+The second image strategy handles the rest of the images being requested by the origin.
+These images tend to be very few and small across the whole origin, but to be on the safe side,
+the number of these cached images is also limited to 60.
+
+```js
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|jpeg|svg|webp)$/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        // Only cache 60 images.
+        maxEntries: 60,
+        purgeOnQuotaError: true,
+      }),
+    ],
+  }),
+);
+```
+
+{% Aside 'objective' %} Even though the caching strategy is exactly the same as the previous one, by
+splitting images into two caches (`product_images` and `images`), it allows for more flexible
+updates to the strategies or caches. {% endAside %}
+
+### Providing offline functionality
+
+The offline page is precached right after the service worker is installed and activated. They do
+this by creating a list of all offline dependencies: the offline HTML file and an offline SVG icon.
+
+```js
+const OFFLINE_HTML = '/offline/offline.html';
+const PRECACHE = [
+  { url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
+  { url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
+];
+```
+
+The precache list is then fed into Workbox which takes care of all the heavy lifting of adding the
+URLs to the cache, checking for any revision mismatch, updating, and serving the
+precached files with a `CacheFirst` strategy.
+
+```js
+workbox.precaching.precacheAndRoute(PRECACHE);
+```
+
+#### Handling offline navigations
+
+Once the service worker activates and the offline page is precached, it is then used to **respond to
+offline navigation requests by the user**. While Mainline Menswear's web app is an SPA, the offline
+page shows only after the page reloads, the user closes and reopens the browser tab, or when the web
+app is launched from the home screen while offline.
+
+To achieve this, Mainline Menswear provided a fallback to failed
+[`NavigationRoute`](https://developer.chrome.com/docs/workbox/reference/workbox-routing/#type-NavigationRoute)
+requests with the precached offline page:
+
+```js/4-6
+const htmlHandler = new workbox.strategies.NetworkOnly();
+const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
+    const request = event.request;
+    // A NavigationRoute matches navigation requests in the browser, i.e. requests for HTML
+    return htmlHandler.handle({ event, request }).catch(() => caches.match(OFFLINE_HTML, {
+        ignoreSearch: true
+    }));
+});
+workbox.routing.registerRoute(navigationRoute);
+```
+
+## Demo
+
+<figure data-size="full">
+  {% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/eJgApjFLpSRFMcMyC4e0.mp4", width="300", autoplay=true, loop=true, muted=true, playsinline=true %}
+  <figcaption>Offline page example as seen on www.mainlinemenswear.co.uk.</figcaption>
+</figure>
+
+### Reporting successful installs
+
+Apart from the home screen launch tracking (with `"start_url": "/?utm_source=pwa"` in the web
+application manifest), the web app also reports successful app installs by listening to the
+`appinstalled` event on `window`:
+
+```js
+window.addEventListener('appinstalled', (evt) => {
+  ga('send', 'event', 'Install', 'Success');
+});
+```
+
+{% Blockquote 'Andy Hoyle, Head of Development' %} Adding PWA capabilities to your website will
+further enhance your customers experience of shopping with you, and will be quicker to market than a
+[platform-specific] app. {% endBlockquote %}
+
+## Conclusion
+
+To learn more about progressive web apps and how to build them, head to the
+[Progressive Web Apps section](/progressive-web-apps/) on web.dev.
+
+To read more Progressive Web Apps case studies, browse to the
+[case studies section](/tags/case-study/).
diff --git a/src/site/content/en/blog/make-my-trip/index.md b/src/site/content/en/blog/make-my-trip/index.md
new file mode 100644
index 00000000000..0ef265097be
--- /dev/null
+++ b/src/site/content/en/blog/make-my-trip/index.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: MakeMyTrip.com’s new PWA delivers 3X improvement in conversion rates
+description: |
+    After launching a Progressive Web App, MakeMyTrip.com's conversion rate on the mobile web tripled, while their page-load speed improved by 38%.
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5IcEsNM1HiiLZFstLIYp.jpg", alt="Make-my-trip detail", width="800", height="800" %}
+</figure>
+
+MakeMyTrip is India's leading travel company, with nearly eight million visitors
+to their site every month. Mobile has emerged as the preferred booking medium
+for MakeMyTrip customers, accounting for over two-thirds of the site’s traffic.
+After launching a Progressive Web App (PWA), their conversion rate on the mobile
+web tripled, while their page-load speed improved by 38%.
+
+- 3X improvement in conversion rate
+- 38% improvement in page load times
+- 160% increase in shopper sessions
+
+## Challenges
+
+With more than 23 million downloads, MakeMyTrip’s native app is indispensable,
+driving half of all their bookings. But in a market of over a billion people,
+many potential users only have intermittent connectivity and visit the site from
+low-end phones with data limitations. These two factors make it difficult to
+drive users to download a native app, leading to steep drop-off rates and high
+customer acquisition costs.
+ 
+In addition, MakeMyTrip found that their mobile website was a better way to get
+new users to learn about their service. They noticed that the cost of attracting
+consumers to their mobile website was substantially lower than the cost of
+driving app downloads. MakeMyTrip found it difficult to build an engaging user
+experience for the mobile web, however. They initially viewed it as a platform
+to shift non-app users to their native app, then found that many people still
+preferred to use the service on their mobile browsers.
+ 
+MakeMyTrip also wanted to build an effective mobile presence to reach Indians
+beyond the country’s top eight cities. In those farther-flung areas, users are
+more likely to use low-end devices on slower 2G or 3G networks. To reach that
+audience, they needed a solution that merged the benefits of native apps and the
+mobile web so they could lower the cost of discovery and increase engagement
+rates.
+ 
+## Solution
+
+The answer? They developed a PWA that led to a fast, reliable and polished
+mobile-web experience. The new strategy reduced page-load times by 38%.
+MakeMyTrip also tripled their conversion rates on the PWA. Along with boosting
+the brand’s overall conversion rate, the PWA drove a 160% increase in shopper
+sessions and lowered the bounce rate by 20%, compared with their previous mobile
+site.
+ 
+With no requirement for users to install an app, MakeMyTrip believes PWA is
+tailor-made for the low-end devices that account for the majority of smartphone
+sales in India. Published online, PWAs are completely linkable. And the PWA even
+works offline, using cached data from earlier online activity. For MakeMyTrip,
+having both a native app and a PWA just makes sense. “There is no need to choose
+between the web versus the native app. We don’t want to slow growth for that,”
+says Anshuman Bapna. “So we balance the two and have both strategies in play.”
+ 
+With MakeMyTrip’s PWA, users are one click away from content. First-time
+shoppers using the PWA are highly engaged and three times more likely to convert
+than first-time visitors to the native app with comparable booking values.
+MakeMyTrip also noticed that half the bookings on their new PWA were made at the
+last minute—a stark contrast to their native app, where last-minute bookings
+account for only 20% of total bookings. “When we add a PWA to our mobile mix in
+a market of over a billion people, we know that we’re reaching many more
+customers,” says Alok Bhageria, MakeMyTrip product manager.
+ 
+Driving mobile traffic directly to the PWA, regardless of the operating system,
+is profitable for MakeMyTrip. They have an aggressive growth strategy, and the
+PWA is helping them to reach users in 24% more cities. The road ahead is
+exciting, as they plan to continue focusing on new PWA technologies that will
+deliver even better customer experiences and margins.
+ 
+{% Blockquote 'Anshuman Bapna, Chief Product Officer at MakeMyTrip' %}
+Having the ability to operate on any OS is non-trivial in terms of
+development time and expense. Browsers that may not support all PWA features
+still render content, so there is really no need to wait. For anyone living
+in an area of spotty or expensive internet access, the ability to cut data
+usage is a HUGE deal. We believe that Progressive Web Apps will become the
+new mobile standard
+{% endBlockquote %}
+ 
+
+### All Stats
+
+- 3X improvement in conversion rate
+- 38% improvement in page load times
+- 160% increase in shopper sessions
+- 30% more last-minute shoppers
+- 24% more cities with a user footprint on their new PWA
+- 20% decrease in bounce rate
+- First time shopper 3X more likely to convert than App 
diff --git a/src/site/content/en/blog/manipulating-live-effects/index.md b/src/site/content/en/blog/manipulating-live-effects/index.md
new file mode 100644
index 00000000000..7e38883826d
--- /dev/null
+++ b/src/site/content/en/blog/manipulating-live-effects/index.md
@@ -0,0 +1,451 @@
+---
+layout: post
+title: Real-Time Effects For Images and Video
+description: >
+  Many of today's most popular apps let you apply filters and effects to images or video. This article shows how to implement these features on the open web.
+authors:
+  - mscales
+date: 2017-08-08
+updated: 2021-01-26
+---
+
+Many of today's most popular apps let you apply filters and effects to images or video. This article
+shows how to implement these features on the open web.
+
+The process is basically the same for videos and images, but I'll cover some important
+video considerations at the end. Throughout the article you can assume that 'image' means 'image or
+a single frame of a video'
+
+## How to get at the pixel data for an image
+
+There are 3 basic categories of image manipulation that are common:
+
+- Pixel effects like contrast, brightness, warmth, sepia tone, saturation.
+- Multi-pixel effects, called convolution filters, like sharpening, edge detection, blur.
+- Whole image distortion, like cropping, skewing, stretching, lens effects, ripples.
+
+All of these involve getting at the actual pixel data of the source image and then creating a new
+image from it, and the only interface for doing that is a canvas.
+
+The really important choice, then, is whether to do the processing on the CPU, with a 2D canvas, or
+on the GPU, with WebGL.
+
+Let's take a quick look at the differences between the two approaches.
+
+### 2D canvas
+
+This is definitely, by a long way, the simplest of the two options. First you draw the image on the
+canvas.
+
+```js
+const source = document.getElementById('source-image');
+
+// Create the canvas and get a context
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+
+// Set the canvas to be the same size as the original image
+canvas.width = source.naturalWidth;
+canvas.height = source.naturalHeight;
+
+// Draw the image onto the top-left corner of the canvas
+context.drawImage(theOriginalImage, 0, 0);
+```
+
+Then you get an array of pixel values for the whole canvas.
+
+```js
+const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imageData.data;
+```
+
+At this point the `pixels` variable is a `Uint8ClampedArray` with a length of `width * height * 4`.
+Every array element is one byte and every four elements in the array represents the color of one
+pixel. Each of the four elements represents amount of red, green, blue, and alpha (transparency)
+in that order. The pixels are ordered starting from the top-left corner and working left to right
+and top to bottom.
+
+<pre>
+pixels[0] = red value for pixel 0
+pixels[1] = green value for pixel 0
+pixels[2] = blue value for pixel 0
+pixels[3] = alpha value for pixel 0
+pixels[4] = red value for pixel 1
+pixels[5] = green value for pixel 1
+pixels[6] = blue value for pixel 1
+pixels[7] = alpha value for pixel 1
+pixels[8] = red value for pixel 2
+pixels[9] = green value for pixel 2
+pixels[10] = blue value for pixel 2
+pixels[11] = alpha value for pixel 2
+pixels[12] = red value for pixel 3
+...
+</pre>
+
+To find the index for any given pixel from its coordinates, there is a simple formula.
+
+```js
+const index = (x + y * imageWidth) * 4;
+const red = pixels[index];
+const green = pixels[index + 1];
+const blue = pixels[index + 2];
+const alpha = pixels[index + 3];
+```
+
+You can now read and write this data however you want, allowing you to apply any effects you can
+think of. However, this array is a _copy_ of the actual pixel data for the canvas. To write the
+edited version back you need to use the `putImageData` method to write this back to the top-left
+corner of the canvas
+
+```js
+context.putImageData(imageData, 0, 0);
+```
+
+### WebGL
+
+WebGL is a big topic, certainly too big to do it justice in a single article. If you'd like to learn
+more about WebGL, check out the [recommended reading](#recommended-reading) at the end of this
+article.
+
+However, here is a very brief introduction to what needs to be done in the case of manipulating a
+single image.
+
+One of the most important things to remember about WebGL is that it is **not** a 3D graphics API. In
+fact, WebGL (and OpenGL) is good at exactly one thing - drawing triangles. In your application you
+must describe what you _actually_ want to draw in terms of triangles. In the case of a 2D
+image, that's very simple, because a rectangle is two similar right-angled triangles, arranged so
+that their hypotenuses are in the same place.
+
+The basic process is:
+
+- Send data to the GPU that describes the vertices (points) of the triangles.
+- Send your source image to the GPU as a texture (image).
+- Create a 'vertex shader'.
+- Create a 'fragment shader'.
+- Set some shader variables, called 'uniforms'.
+- Run the shaders.
+
+Let's go into detail. Start by allocating some memory on the graphics card called a vertex buffer.
+You store data in it that describes each point of each triangle. You can also set some variables,
+called uniforms, that are global values through both shaders.
+
+A vertex shader uses data from the vertex buffer to calculate where on the screen to draw the three
+points of each triangle.
+
+Now the GPU knows which pixels within the canvas need to be drawn. The fragment shader is called
+once per pixel, and needs to return the color that should be drawn to the screen. The fragment
+shader can read information from one or more textures to determine the color.
+
+When reading a texture in a fragment shader you specify which part of the image you want to read
+using two floating-point coordinates between 0 (left or bottom) and 1 (right or top).
+
+If you want to read the texture based on pixel coordinates then you need to pass the size of the
+texture in pixels as a uniform vector so that you can do the conversion for each pixel.
+
+```js
+varying vec2 pixelCoords;
+
+uniform vec2 textureSize;
+uniform sampler2D textureSampler;
+
+main() {
+  vec2 textureCoords = pixelCoords / textureSize;
+  vec4 textureColor = texture2D(textureSampler, textureCoords);
+  gl_FragColor = textureColor;
+ }
+Pretty much every kind of 2D image manipulation that you might want to do can be done in the
+fragment shader, and all of the other WebGL parts can be abstracted away. You can see [the
+abstraction layer](https://github.com/GoogleChromeLabs/snapshot/blob/master/src/filters/image-shader.ts) (in
+TypeScript) that is being in used in one of our sample applications if you'd like to see an example.
+
+### Which should I use?
+
+For pretty much any professional quality image manipulation, you should use WebGL. There is no
+getting away from the fact that this kind of work is the whole reason GPUs were invented. You can
+process images an order of magnitude faster on the GPU, which is essential for any real-time
+effects.
+
+The way that graphics cards work means that every pixel can be calculated in it's own thread. Even
+if you parallelize your code CPU-based code with `Worker`s, your GPU may have 100s of times as many
+specialized cores as your CPU has general cores.
+
+2D canvas is much simpler, so is great for prototyping and may be fine for one-off transformations.
+However, there are plenty of abstractions around for WebGL that mean you can get the performance
+boost without needing to learn the details.
+
+Examples in this article are mostly for 2D canvas to make explanations easier, but the principles
+should translate pretty easily to fragment shader code.
+
+## Effect types
+
+### Pixel effects
+
+This is the simplest category to both understand and implement. All of these transformations take
+the color value of a single pixel and pass it into a function that returns another color value.
+
+There are many variations on these operations that are more or less complicated. Some will take into
+account how the human brain processes visual information based on decades of research, and some will
+be dead simple ideas that give an effect that's mostly reasonable.
+
+For example, a brightness control can be implemented by simply taking the red, green and blue values
+of the pixel and multiplying them by a brightness value. A brightness of 0 will make the image
+entirely black. A value of 1 will leave the image unchanged. A value greater than 1 will make it
+brighter.
+
+For 2D canvas:
+
+```js
+const brightness = 1.1; // Make the image 10% brighter
+for (let i = 0; i < imageData.data.length; i += 4) {
+  imageData.data[i] = imageData.data[i] * brightness;
+  imageData.data[i + 1] = imageData.data[i + 1] * brightness;
+  imageData.data[i + 2] = imageData.data[i + 2] * brightness;
+}
+```
+
+Note that the loop moves 4 bytes along at a time, but only changes three values - this is because
+this particular transformation doesn't change the alpha value. Also remember that a
+Uint8ClampedArray will round all values to integers, and clamp values to be between 0 and 255.
+
+WebGL fragment shader:
+
+```js
+    float brightness = 1.1;
+    gl_FragColor = textureColor;
+    gl_FragColor.rgb *= brightness;
+```
+
+Similarly, only the RGB part of the output color is multiplied for this particular transformation.
+
+Some of these filters take extra information, such as the average luminance of the whole
+image, but these are things that can be calculated once for the whole image.
+
+One way of changing contrast, for example, can be to move each pixel towards or away from some
+'gray' value, for lower or higher contrast respectively. The gray value is commonly chosen to be a
+gray color whose luminance is the median luminance of all pixels in the image.
+
+You can calculate this value once when the image is loaded and then use it each time you need to
+adjust the image effect.
+
+### Multi-pixel
+
+Some effects use the color of neighboring pixels when deciding the color of the current pixel.
+
+This slightly changes how you do things in the 2D canvas case because you want to be able to read
+the _original_ colors of the image, and the previous example was updating the pixels in place.
+
+This is easy enough, though. When you initially create your image data object you can make a copy
+of the data.
+
+```js
+const originalPixels = new Uint8Array(imageData.data);
+```
+
+For the WebGL case you don't need to make any changes, since the shader does not write to the input
+texture.
+
+The most common category of multi-pixel effect is called a [convolution
+filter](<https://en.wikipedia.org/wiki/Kernel_(image_processing)#Convolution>). A convolution filter
+uses several pixels from the input image to calculate the color of each pixel in the input image.
+The level of influence that each input pixel has on the output is called a _weight_.
+
+The weights can be represented by a matrix, called a kernel, with the central value corresponding
+to the current pixel. For example, this is the kernel for a 3x3 Gaussian blur.
+
+<pre>
+    | 0  1  0 |
+    | 1  4  1 |
+    | 0  1  0 |
+</pre>
+
+So let's say that you want to calculate the output color of the pixel at (23, 19). Take the 8
+pixels surrounding (23, 19) as well as the pixel itself, and multiply the color values for each of
+them by the corresponding weight.
+
+<pre>
+    (22, 18) x 0    (23, 18) x 1    (24, 18) x 0
+    (22, 19) x 1    (23, 19) x 4    (24, 19) x 1
+    (22, 20) x 0    (23, 20) x 1    (24, 20) x 0
+</pre>
+
+Sum them all together then divide the result by 8, which is the sum of the weights. You can see how
+the result will be a pixel that is mostly the original, but with the nearby pixels bleeding in.
+
+```js
+const kernel = [
+  [0, 1, 0],
+  [1, 4, 1],
+  [0, 1, 0],
+];
+
+for (let y = 0; y < imageHeight; y++) {
+  for (let x = 0; x < imageWidth; x++) {
+    let redTotal = 0;
+    let greenTotal = 0;
+    let blueTotal = 0;
+    let weightTotal = 0;
+    for (let i = -1; i <= 1; i++) {
+      for (let j = -1; j <= 1; j++) {
+        // Filter out pixels that are off the edge of the image
+        if (
+          x + i > 0 &&
+          x + i < imageWidth &&
+          y + j > 0 &&
+          y + j < imageHeight
+        ) {
+          const index = (x + i + (y + j) * imageWidth) * 4;
+          const weight = kernel[i + 1][j + 1];
+          redTotal += weight * originalPixels[index];
+          greenTotal += weight * originalPixels[index + 1];
+          blueTotal += weight * originalPixels[index + 2];
+          weightTotal += weight;
+        }
+      }
+    }
+
+    const outputIndex = (x + y * imageWidth) * 4;
+    imageData.data[outputIndex] = redTotal / weightTotal;
+    imageData.data[outputIndex + 1] = greenTotal / weightTotal;
+    imageData.data[outputIndex + 2] = blueTotal / weightTotal;
+  }
+}
+```
+
+This gives the basic idea, but there are [guides out there](http://setosa.io/ev/image-kernels/) that
+will go into much more detail, and list many other useful kernels.
+
+### Whole image
+
+Some whole image transformations are simple. In a 2D canvas, cropping and scaling is a simple case
+of only drawing part of the source image onto the canvas.
+
+```js
+// Set the canvas to be a little smaller than the original image
+canvas.width = source.naturalWidth - 100;
+canvas.height = source.naturalHeight - 100;
+
+// Draw only part of the image onto the canvas
+const sx = 50; // The left-most part of the source image to copy
+const sy = 50; // The top-most part of the source image to copy
+const sw = source.naturalWidth - 100; // How wide the rectangle to copy is
+const sh = source.naturalHeight - 100; // How tall the rectangle to copy is
+
+const dx = 0; // The left-most part of the canvas to draw over
+const dy = 0; // The top-most part of the canvas to draw over
+const dw = canvas.width; // How wide the rectangle to draw over is
+const dh = canvas.height; // How tall the rectangle to draw over is
+
+context.drawImage(theOriginalImage, sx, sy, sw, sh, dx, dy, dw, dh);
+```
+
+Rotation and reflection are directly available in the 2D context. Before you draw the image into the
+canvas, change the various transforms.
+
+```js
+// Move the canvas so that the center of the canvas is on the Y-axis
+context.translate(-canvas.width / 2, 0);
+
+// An X scale of -1 reflects the canvas in the Y-axis
+context.scale(-1, 1);
+
+// Rotate the canvas by 90°
+context.rotate(Math.PI / 2);
+```
+
+But more powerfully, many 2D transformations can be written as 2x3 matrices and applied to the
+canvas with `setTransform()`. This example uses a matrix that combines a rotation and a translation.
+
+```js
+const matrix = [
+  Math.cos(rot) * x1,
+  -Math.sin(rot) * x2,
+  tx,
+  Math.sin(rot) * y1,
+  Math.cos(rot) * y2,
+  ty,
+];
+
+context.setTransform(
+  matrix[0],
+  matrix[1],
+  matrix[2],
+  matrix[3],
+  matrix[4],
+  matrix[5],
+);
+```
+
+More complicated effects like lens distortion or ripples involve applying some offset to each
+destination coordinate to calculate the source pixel coordinate. For example, to have a horizontal
+wave effect you could offset the source pixel x coordinate by some value based on the y coordinate.
+
+```js
+for (let y = 0; y < canvas.height; y++) {
+  const xOffset = 20 * Math.sin((y * Math.PI) / 20);
+  for (let x = 0; x < canvas.width; x++) {
+    // Clamp the source x between 0 and width
+    const sx = Math.min(Math.max(0, x + xOffset), canvas.width);
+
+    const destIndex = (y * canvas.width + x) * 4;
+    const sourceIndex = (y * canvas.width + sx) * 4;
+
+    imageData.data[destIndex] = originalPixels.data[sourceIndex];
+    imageData.data[destIndex + 1] = originalPixels.data[sourceIndex + 1];
+    imageData.data[destIndex + 2] = originalPixels.data[sourceIndex + 2];
+  }
+}
+```
+
+## Video
+
+Everything else in the article already works for video if you use a `video` element as the source
+image.
+
+Canvas 2D:
+
+```js
+context.drawImage(<strong>video</strong>, 0, 0);
+```
+
+WebGL:
+
+```js
+gl.texImage2D(
+  gl.TEXTURE_2D,
+  0,
+  gl.RGBA,
+  gl.RGBA,
+  gl.UNSIGNED_BYTE,
+  <strong>video</strong>,
+);
+```
+
+However, this will only use the _current_ video frame. So if you wish to apply an effect to a
+playing video you need to use `drawImage`/`texImage2D` on each frame to grab a new video frame and
+process it on each browser animation frame.
+
+```js
+const draw = () => {
+  requestAnimationFrame(draw);
+
+  context.drawImage(video, 0, 0);
+
+  // ...image processing goes here
+};
+```
+
+When working with video it becomes particularly important that your processing is fast. With a still
+image a user might not notice a delay of 100ms between clicking a button and an effect being
+applied. When animated, however, delays of only 16ms can cause visible jerkiness.
+
+## Recommended reading
+
+- [WebGL Fundamentals](https://webglfundamentals.org/): a site that teaches WebGL
+- [Kernel (image processing)](<https://en.wikipedia.org/wiki/Kernel_(image_processing)>): Wikipedia
+  page that explains convolution filters
+- [Image Kernels Explained Visually](http://setosa.io/ev/image-kernels/): Descriptions of a few
+  kernels with interactive demos.
+- [Transformations](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Transformations):
+  MDN article about 2D canvas transformations
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/maskable-icon/devtools.png b/src/site/content/en/blog/maskable-icon/devtools.png
deleted file mode 100644
index 5718c08f365..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/fugu-mask.mp4 b/src/site/content/en/blog/maskable-icon/fugu-mask.mp4
deleted file mode 100644
index d043236a760..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/fugu-mask.mp4 and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/fugu-mask.webm b/src/site/content/en/blog/maskable-icon/fugu-mask.webm
deleted file mode 100644
index 7e3f0df6e57..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/fugu-mask.webm and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/hero.png b/src/site/content/en/blog/maskable-icon/hero.png
deleted file mode 100644
index 74b5b0cc24a..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/homescreen-any.png b/src/site/content/en/blog/maskable-icon/homescreen-any.png
deleted file mode 100644
index f47f34a5772..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/homescreen-any.png and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/homescreen-maskable.png b/src/site/content/en/blog/maskable-icon/homescreen-maskable.png
deleted file mode 100644
index aeb6a6c0457..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/homescreen-maskable.png and /dev/null differ
diff --git a/src/site/content/en/blog/maskable-icon/index.md b/src/site/content/en/blog/maskable-icon/index.md
index bdaf754a0ec..6cbe98f0611 100644
--- a/src/site/content/en/blog/maskable-icon/index.md
+++ b/src/site/content/en/blog/maskable-icon/index.md
@@ -1,99 +1,146 @@
 ---
 title: Adaptive icon support in PWAs with maskable icons
-subhead: A new icon format to use adaptive icons on supporting platforms.
+subhead: App icons that adapt to platforms.
 description: |
-  Maskable icons are a new icon format that give you more control and let your Progressive Web App
-  use adaptive icons. By supplying a maskable icon, your icon can look great on all Android
-  devices.
+  Maskable icons are a format that give you more control and let your Progressive Web App
+  use adaptive icons. A maskable icon can look great on all Android devices.
 authors:
   - tigeroakes
+  - thomassteiner
 date: 2019-12-19
-hero: hero.png
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
 alt: Icons contained inside white circles compared to icons covering its entire circle
 tags:
   - blog
   - capabilities
   - progressive-web-apps
+feedback:
+  - api
 ---
 
 ## What are maskable icons? {: #what }
 
-If you've installed a Progressive Web App on a recent Android phone, you might notice the icon shows up with a white background. Android Oreo introduced adaptive icons, which display app icons in a variety of shapes across different device models. Icons that don't follow this new format are given white backgrounds.
+If you've installed a Progressive Web App on a recent Android phone, you might notice the icon shows
+up with a white background. Android Oreo introduced adaptive icons, which display app icons in a
+variety of shapes across different device models. Icons that don't follow this new format are given
+white backgrounds.
 
-<figure class="w-figure">
-  <img src="homescreen-any.png" alt="PWA icons in white circles on Android" style="width: 400px; max-width: 100%">
-  <figcaption class="w-figcaption">
-    Transparent PWA icons appear inside white circles on Android
-  </figcaption>
+<figure>
+  {% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="PWA icons in white circles on Android", width="400", height="100" %}
+  <figcaption>Transparent PWA icons appear inside white circles on Android.</figcaption>
 </figure>
 
-Maskable icons are a new icon format that give you more control and let your Progressive Web App use adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great on all Android devices. Firefox and Chrome have recently added support for this new format, and you can adopt it in your apps.
+Maskable icons are a new icon format that give you more control and let your Progressive Web App use
+adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great
+on all Android devices. Firefox and Chrome have recently added support for this new format, and you
+can adopt it in your apps.
 
-<figure class="w-figure">
-  <img src="homescreen-maskable.png" alt="PWA icons covering the entire circle on Android" style="width: 400px; max-width: 100%">
-  <figcaption class="w-figcaption">
-    Maskable icons cover the entire circle instead
-  </figcaption>
+<figure>
+  {% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="PWA icons covering the entire circle on Android", width="400", height="100" %}
+  <figcaption>Maskable icons cover the entire circle instead.</figcaption>
 </figure>
 
 ## Are my current icons ready?
 
-Since maskable icons need to support a variety of shapes, you supply an opaque image with some padding that the browser can later crop into the desired shape and size. It's best not to rely on any particular shape, since it can vary by browser and per platform.
-
-<figure class="w-figure w-figure--inline-right">
-  <video class="w-screenshot" autoplay loop muted playsinline aria-label="Different masks applied to a maskable icon">
-    <source src="fugu-mask.webm" type="video/webm; codecs=vp8">
-    <source src="fugu-mask.mp4" type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption">
-    Different platform specific shapes
+Since maskable icons need to support a variety of shapes, you supply an opaque image with some
+padding that the browser can crop to the required shape and size. It's best not to rely on
+any particular shape, since the ultimate shape varies by browser and platform.
+
+<figure data-float="right">
+  {% Video
+    src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"],
+       autoplay=true,
+    loop=true,
+    muted=true,
+    playsinline=true
+  %}
+  <figcaption>
+    Different platform-specific shapes.
   </figcaption>
 </figure>
 
-Luckily, there's a well-defined and [standardized](https://w3c.github.io/manifest/#icon-masks) "minimum safe zone" that all platforms respect. The important parts of your icon, such as your logo, should be within a circular area in the center of the icon with a radius equal to 40% of the icon width. The outer 10% edge may be cropped.
+Luckily, there's a well-defined and [standardized](https://w3c.github.io/manifest/#icon-masks)
+"minimum safe zone" that all platforms respect. The important parts of your icon, such as your logo,
+should be within a circular area in the center of the icon with a radius equal to 40% of the icon
+width. The outer 10% edge may be cropped.
 
-You can check which parts of your icons land within the safe zone with Chrome DevTools. With your Progressive Web App open, launch DevTools and navigate to the **Application** panel. In the **Icons** section, you can choose to **Show only the minimum safe area for maskable icons**. Your icons will be trimmed so that only the safe area is visible. If your logo is visible within this safe area, you're good to go.
+You can check which parts of your icons land within the safe zone with Chrome DevTools. With your
+Progressive Web App open, launch DevTools and navigate to the **Application** panel. In the
+**Icons** section, you can choose to **Show only the minimum safe area for maskable icons**. Your
+icons will be trimmed so that only the safe area is visible. If your logo is visible within this
+safe area, you're good to go.
 
-<figure class="w-figure">
-  <img src="devtools.png" class="w-screenshot" alt="Applications panel in DevTools displaying PWA icons with edges cropped">
-  <figcaption class="w-figcaption">
-    The Applications panel
-  </figcaption>
+<figure>
+  {% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="Applications panel in DevTools displaying PWA icons with edges cropped", width="762", height="423" %}
+  <figcaption>The Applications panel.</figcaption>
 </figure>
 
-If you want to preview your maskable icon in other shapes it may appear in on Android, I've created a tool called [Maskable.app](https://maskable.app/). Open an icon, then Maskable.app will let you try out various shapes and sizes, and you can share the preview with others on your team.
+To test your maskable icon with the variety of Android shapes, use the
+[Maskable.app](https://maskable.app/) tool Tiger created.
+Open an icon, then Maskable.app will let you
+try various shapes and sizes, and you can share the preview with others on your team.
 
 ## How do I adopt maskable icons?
 
-If you want to create a maskable icon based off your existing icon, you can use the [Maskable.app Editor](https://maskable.app/editor). Upload your icon, adjust the color and size, then export the image.
+If you want to create a maskable icon based on an existing icon, you can use the
+[Maskable.app Editor](https://maskable.app/editor). Upload your icon, adjust the color and size,
+then export the image.
 
-<figure class="w-figure">
-  <img src="maskable-app-editor.png" class="w-screenshot" alt="Maskable.app Editor screenshot">
-  <figcaption class="w-figcaption">
-    Creating icons in Maskable.app Editor
-  </figcaption>
+<figure>
+  {% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.app Editor screenshot", width="670", height="569" %}
+  <figcaption>Creating icons in the Maskable.app Editor.</figcaption>
 </figure>
 
-Once you've created a maskable icon image and tested it out in DevTools, you'll need to update your [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest) to point to the new assets. The Web App Manifest provides information about your web app in a JSON file, and includes an [`icons` array](https://developers.google.com/web/fundamentals/web-app-manifest#icons).
-
-With the inclusion of maskable icons, a new property value has been added for image resources listed in a Web App Manifest. The `purpose` field tells the browser how your icon should be used. By default, icons will have a purpose of `"any"`. These icons will be resized on top of a white background on Android.
+Once you've created a maskable icon and tested it in DevTools, you'll need to update your
+[web app manifest](/add-manifest/) to point to the
+new asset. The web app manifest provides information about your web app in a JSON file, and
+includes an [`icons` array](/add-manifest/#icons).
 
-Maskable icons should use a different purpose: `"maskable"`. This indicates that an image is meant to be used with icon masks, giving you more control over the result. This way, your icons will not have a white background. You can also specify multiple space-separated purposes (for example, `"any maskable"`), if you want your maskable icon to be used without a mask on other devices.
+For the inclusion of maskable icons, the `purpose` field tells the browser how your icon
+should be used. By default, icons will have a purpose of `"any"`. These icons will be
+resized on top of a white background on Android.
 
-```json
+```json/7,13
 {
   …
   "icons": [
     …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
     {
       "src": "path/to/maskable_icon.png",
       "sizes": "196x196",
       "type": "image/png",
-      "purpose": "any maskable" // <-- New property value `"maskable"`
-    }
-  ]
+      "purpose": "maskable" // <-- New property value `"maskable"`
+    },
+    …
+  ],
   …
 }
 ```
 
-With this, you can go forth and create your own maskable icons, making sure you app looks great edge-to-edge (and for what it's worth, circle to circle, oval to oval 😄).
+Maskable icons should use a different value for `purpose`: `"maskable"`. This indicates
+that an image is meant to be used with icon masks, giving you more control over the result.
+This way, your icons will not have a white background. You can also specify multiple
+space-separated purposes (for example, `"any maskable"`), if you want your maskable icon to
+be used without a mask on other devices.
+
+{% Aside %}
+  While you _can_ specify multiple space-separated purposes such as `"any maskable"`, in
+  practice you _shouldn't_. Using `"maskable"` icons as `"any"` icons is suboptimal as the icon
+  is going to be used as-is, resulting in excess padding, making the core icon content smaller.
+  Ideally, icons for the `"any"` purpose should have transparent regions and no extra padding,
+  like your site's favicons, since the browser isn't going to add that for them.
+{% endAside %}
+
+With this, you can go forth and create your own maskable icons, making sure your app looks great
+edge-to-edge (and for what it's worth, circle-to-circle, oval-to-oval 😄).
+
+## Acknowledgements
+
+This article was reviewed by [Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/maskable-icon/maskable-app-editor.png b/src/site/content/en/blog/maskable-icon/maskable-app-editor.png
deleted file mode 100644
index 2accc0ed44f..00000000000
Binary files a/src/site/content/en/blog/maskable-icon/maskable-app-editor.png and /dev/null differ
diff --git a/src/site/content/en/blog/mathboard/index.md b/src/site/content/en/blog/mathboard/index.md
new file mode 100644
index 00000000000..b8062f23d68
--- /dev/null
+++ b/src/site/content/en/blog/mathboard/index.md
@@ -0,0 +1,349 @@
+---
+layout: post
+title: Case Study - HTML5 MathBoard
+authors:
+  - jeremychone
+date: 2011-10-28
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TmDqcNJ9pDwoXKNl55jV.png", alt="MathBoard application", width="126", height="175" %}
+</figure>
+
+[MathBoard on iPad](http://itunes.apple.com/us/app/mathboard/id373909837?mt=8),
+a [PalaSoftware](http://www.palasoftware.com/MathBoard.html) application,
+is a highly polished application with many subtle but
+natural animations and a unique realistic look and feel. The goal was to do the
+highest fidelity port of the iPad application to HTML5.
+
+N2N-Apps is a Software Development company focusing on building next generation
+of Web and Mobile application with HTML5 technology. The company was funded in
+2010 by Jeremy Chone whom, after 11 years of engineering and management
+experience from Netscape, Oracle, and Adobe, decided to share its expertise with
+businesses to build high-quality Web and Mobile applications. N2N-Apps focuses
+on quality and speed of delivery.
+
+[Download MathBoard for the Chrome Web Store](https://chrome.google.com/webstore/detail/elcilkmmbpmchojdmdohhoalmfmkcklk)
+[Download MathBoard for the Chrome Web Store](https://chrome.google.com/webstore/detail/ocjpbdojdmdmnoijibadlmpiamcmmmcj) (free version)
+
+## Requirements
+
+The key requirements for this HTML5 porting project were the following:
+
+1. High fidelity port of the original iPad application look and feel and user interface.
+1. Adapt to the target form factor (i.e. PC/Mac with keyboard/mouse vs touch screen).
+1. Implement 100% of the applicable features.
+1. Target principally HTML5 browsers.
+1. Make the application "server-less" so that the application runs entirely on the client and could be hosted on a static server or Google Chrome packaged application.
+1. Make a 1.0 version with all the features but the problem solver in less than a month.
+
+## Architecture
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ioBgfDSe8lwlCBr71gqw.png", alt="Architecture", width="161", height="206" %}
+</figure>
+
+Given the requirements, we decided to go with the following architecture:
+
+
+1. HTML5: Since we do not have any HTML4 support requirements, we decided to go with HTML5 as the base.
+1. jQuery: While HTML5 has many of the advanced selectors that make jQuery so
+  great, we decided to stick with jQuery anyway as it gave us a very robust and
+  mature way to manipulate the DOM and related events. jQuery also has the
+  benefit of being more DOM centric, which tends to make the
+  design and implementation of an application closer to HTML.
+1. [SnowUI](https://github.com/jeremychone/snowUI): jQuery provides
+  a great API and best practice to work with the DOM,
+  however, for the HTML5 MathBoard application we needed an MVC or MVP style
+  framework to orchestrate all of the different views. SnowUI
+  is a simple yet powerful MVC framework on top of jQuery. It provides a DOM
+  centric MVC mechanism and a flexible way to build custom components while
+  leaving the opportunity for the application developer to use any widget/controls
+  library or custom code he or she deems optimal.
+
+## iPad to PC considerations
+
+When porting the application to HTML5 for PC usage, we had to make several
+modifications to the design and user-interaction of the application.
+
+### Screen orientation
+
+The iPad MathBoard is exclusively vertically oriented, which was not optimal
+for PC displays as they are generally used in a horizontal fashion. Consequently,
+we reorganized the UI design and moved the settings panel to the right side, on a
+sliding view (animated by CSS3 transitions).
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PQW1aE8WZqc3gibulDCM.png", alt="Screen Orientation", width="500", height="276" %}
+    <figcaption>iPad vs. HTML5 screen orientation</figcaption>
+</figure>
+
+### Input: keyboard/mouse vs. touch
+
+Another key difference between the iPad and Web version is the
+input interface. On the iPad you have only the touch interface, on the PC
+you need take into consideration both mouse and keyboard.
+
+The MathBoard input controls on the iPad are highly polished. We wanted the
+same high fidelity representation in the Web interface. The solution
+was adding support for keyboard shortcuts and replicating UI controls
+using CSS positioning. The port to HTML5 was pixel perfect:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/egAf6O9gsAUf3HVvq1KB.png", alt="UI Controls", width="500", height="275" %}
+  <figcaption>iPad vs. HTML5 Version Settings</figcaption>
+</figure>
+
+As in the iPad interface, we allow the user to click on the left and right
+arrow to change the value of a control. The vertical line can also be dragged to
+quickly change values. A repeat behavior was implemented for `click`
+and `keydown` so that users can accelerate the value change when the
+mouse or the keyboard is pressed.
+
+TAB support was added to move from one input field to another and the
+← and → arrows cycles through values.
+
+One feature in the iPad version that didn't make much sense for the PC
+interface was the drawing board. While it could have been fancy to implement it,
+drawing numbers with a mouse is not very practical. Instead, we decided to spend more
+time polishing the keyboard interface than implementing the drawing board.
+
+## HTML5 features
+
+In the Web version of MathBoard, we use many HTML5 features:
+
+### Local storage
+
+MathBoard allow users to save their quiz to later replay them. HTML5 MathBoard
+implements this feature using HTML5 `localStorage` using the
+SnowUI DAO interface.
+
+`localStorage` was a natural choice since the data was simple
+enough and did not require advanced indexing. We store all quizzes
+in one JSON format that we `JSON.stringify` as text.
+
+The snowUI DAO is a simple CRUD interface wrapper which allows the UI to
+fetch data without having to worry about how it's actually stored. The DAO
+implementation takes care of the storage particulars.
+
+In MathBoard, the storage requirements were very simple. We needed to
+store only the user settings and the quiz data. Both where stored as JSON
+strings in `localStorage`.
+
+So, for example, the DAO for the setting value looked like this:
+
+```js
+snow.dm.registerDao('settingValue', (function() {
+
+  var _settingValues = null;
+
+  function SettingValueDao() {};
+
+  // ------ DAO CRUD Interface ------ //
+  // get
+  SettingValueDao.prototype.get = function(objectType, id) {
+    return $.extend({},getSettingValues()[id]);
+  };
+
+  // find, remove
+
+  // save
+  SettingValueDao.prototype.save = function(objectType, data) {
+    var storeValue = getSettingValues('settingValue')[data.id];
+    if (!storeValue) {
+      storeValue = {};
+      getSettingValues()[data.id] = storeValue;
+    }
+
+    $.extend(storeValue, data);
+    saveSettingValues();
+  };
+  // ------ /DAO CRUD Interface ------ //
+
+  function getSettingValues() {
+    if (_settingValues == null) {
+      var settingValuesString = localStorage.getItem('settingValues');
+      if (settingValuesString) {
+        _settingValues = JSON.parse(settingValuesString);
+      } else{
+        _settingValues = {};
+      }
+    }
+
+    return _settingValues;
+  }
+
+  function saveSettingValues(){
+    var settingValues = getSettingValues();
+    if (settingValues != null) {
+      localStorage.removeItem('settingValues');
+      localStorage.setItem('settingValues', JSON.stringify(settingValues)); 
+    }
+  }
+
+  return new SettingValueDao();
+})());
+```
+
+Once this DAO is registered for the `settingValue`, the UI can
+make the following call without needing to worry about the store logic:
+
+```js
+var addition = snow.dm.get('settingValue', 'operator_addition');
+addition.value = true; // to check the addition checkbox
+snow.dm.save('settingValue', addition);
+```
+
+### CSS3 fonts
+ 
+MathBoard uses custom fonts. Thanks to CSS3 font support, it was trivial
+to include the 'Chalkduster' true type font into our application:
+
+```css
+@font-face {
+  font-family: Chalkduster;
+  src: url(Chalkduster.ttf);
+}
+```
+
+And, since this font was the default for almost all the text in the
+application, we made it the default for body.
+
+```css
+body {
+  background: #333333;
+  font-family: Chalkduster;
+  color: #ffffff;
+}
+```
+
+### CSS3 gradient, shadow, rounded corners
+
+All gradient, shadow, transparency, and rounded corners are done with CSS3.
+This was a real game saver compared to the traditional .png way of doing user interfaces.
+
+We also used advanced CSS3 properties to customize the look and feel of the
+scrollbar to make it more subtle (see
+[http://webkit.org/blog/363/styling-scrollbars/](http://webkit.org/blog/363/styling-scrollbars/)
+for styling scroll bars on WebKit browsers).
+
+### CSS3 transitions
+
+For HTML5 MathBoard, we replicated all of the iPad's animations
+and even added a new one for the sliding right panel. Thanks to CSS3 transitions,
+adding animations was trivial and allowed for the best performance.
+
+We had three main animations in the applications.
+
+#### 1.) The sliding right pane
+
+The first animation is on the right pane (`#rightPane`), which slides
+closed when the user starts a new quiz and slides open when the user ends a quiz.
+To create this effect, we used the following CSS transition and triggered it
+via JavaScript. The default style of the rightPane is open:
+
+```css
+#rightPane {
+  /* look and feel, and layout property */
+  position: absolute;
+  width: 370px;
+  height: 598px;
+  top: 28px;
+  left: 720px; /* open */
+  -webkit-transition: all .6s ease-in-out;
+}
+```
+
+When the user starts a quiz, our JavaScript logic moves the panel:
+
+```js
+var $rightPane = $('#rightPane');
+var left = $rightPane.position().left - 400;
+setTimeout(function() {
+  $rightPane.css('left', left + 'px');
+}, 0);
+```
+
+A few notes on this implementation:
+
+1. Given that the application sizes are fixed, we could have used a CSS
+class '.close' and hardcode the close position the same way we hardcode the open one.
+1. We could also have used CSS 'translate', which would have been more
+performant than animating the pane's 'left' property. This is especially true
+for mobile devices (such as iOS) where 3D transforms are hardware accelerated.
+1. The `setTimeout` is not strictly necessary in this case since the original
+position was set prior to the modification. However, it allows the browser
+to make the animation smoother by displaying the quiz just before sliding the rightPane in.
+
+#### 2.) Settings dialog box animation
+
+When the user clicks on a setting in the right, the settings dialog appears
+from the bottom of the screen and scrolls down to the appropriate section.
+
+To accomplish this, we had a similar transition to the right pane. The only thing that
+took some time was to resolve the jerkiness on first appearance of the dialog.
+To instruct the browser to cache the dialog UI, we ended up displaying it
+once and scrolling to it. At first, we tried with `display: none`.
+This approach was wrong because the browser assumed the dialog does not need to be shown.
+The solution was to display the settings with a `z-index: -1` at initialization,
+making it invisible to the user but visible to the browser.
+
+#### 3.) Quiz success or incorrect message animation
+
+The third animation is actually two in one. When the 'success' or 'incorrect'
+message appears, first scale to a point, wait for a little, and finally
+scale even bigger and disappear. For this, we have two CSS3 animation styles,
+and orchestrate it via JavaScript on a `webkitTransitionEnd` event.
+
+```css
+.quiz-result > div.anim1 {
+  opacity: 0.8;
+  -webkit-transform: scale(6,6);
+}
+.quiz-result > div.anim2{
+  opacity: 0;
+  -webkit-transform: scale(9,9);
+}
+```
+
+```js
+setTimeout(function() {
+  $msg.addClass("anim1");
+  $msg.bind("webkitTransitionEnd", function(){
+    if ($msg.hasClass("anim1")) {
+      setTimeout(function() {
+        $msg.removeClass("anim1");
+        $msg.addClass("anim2");
+      }, 300);
+    } else {
+      $msg.remove();
+      displayNextItem();
+      freezeInput = false;
+    }
+  });
+}, 0);
+```
+
+### Audio tag
+
+When users answer a quiz, the application makes a success or fail sound.
+The simple choice was to use the audio tag and call `play()` on them.
+These audio bits are added to the main page of the application:
+
+```html
+<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
+<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
+```
+
+## Conclusion
+
+HTML5 is truly enabling a new breed of Web, desktop, and mobile applications.
+CSS3 was instrumental in customizing the look and feel of the application to
+closely match the high sophistication of MathBoard for iPad, HTML5 storage was
+a perfect fit for our data persistence, and the simplicity of HTML5 audio allowed
+us to closely replicate the iPad app.
diff --git a/src/site/content/en/blog/matterport/index.md b/src/site/content/en/blog/matterport/index.md
new file mode 100644
index 00000000000..b118553d5d3
--- /dev/null
+++ b/src/site/content/en/blog/matterport/index.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: Matterport VR for WebVR
+date: 2017-02-02
+updated: 2017-02-02
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vraKlL0DMH7CGOOzEcRb.jpg", alt="VR Four Season in Game", width="800", height="450" %}
+</figure>
+
+[View the site](https://try.matterport.com/virtual-reality/webvr/)
+
+### Summary
+By adding WebVR support, Matterport makes it easier to explore real-world
+places in immersive virtual reality. With no apps to download, WebVR will reduce
+drop-offs and enable partners to retain the user on their own website. [WebVR is
+a key lever in Matterport's
+strategy](https://matterport.com/virtual-reality/webvr/) for increasing
+consumption and discovery of VR content.
+
+## About Matterport and Matterport VR
+**Matterport VR** lets you experience thousands of real-world places in interactive
+virtual reality. Using a combination of automated 3D interior mapping technology
+and robust vision processing algorithms, Matterport's 3D media system enables
+anyone to create immersive virtual environments from real places. Unlike 360˚
+photos, Matterport Spaces allow users to interactively walk through any
+location.
+
+With WebVR, anyone can explore Matterport's library of over 300,000 VR Spaces
+with a WebVR-enabled browser. Tour everything from celebrity homes to museums,
+canyons, iconic architecture, and beyond.
+
+## Challenge
+Until 2017, **Matterport VR** had to be experienced via a downloadable app from the
+Apple App Store, Oculus Store, or Google Play Store. When a viewer tried to
+launch a 3D Space in VR, they were taken through a series of steps to first
+download and launch this app. While this allows anyone to explore a full
+library of Matterport Spaces, the interruption to download caused significant
+dropoff and less engagement with specific VR Spaces. Partners were also
+concerned about their customers leaving their website.
+
+## Solution
+Matterport's philosophy is to keep things push-button simple and delight their
+customers. Using the [WebVR API](https://developer.chrome.com/blog/ar-for-the-web/) support in Chrome 56,
+Matterport was able to create [virtual reality that can be experienced directly
+from a mobile web browser](https://matterport.com/virtual-reality/webvr/), with
+no apps to download. This experience is currently limited to Daydream but will
+be expanded to additional VR platforms and browsers.
+
+Now a user needs to simply tap the VR button in a Matterport 3D Showcase, slip
+their phone into a Daydream View, and start exploring. When they are
+finished, they are returned directly to the website they were browsing, so
+companies can keep their customers fully engaged.
+
+Matterport is committed to leading the ecosystem for non-gaming VR content by
+simplifying content creation, offering platform agnostic content consumption and
+fostering content discovery. WebVR directly helps us accomplish these goals
+while ensuring a win-win strategy for all stakeholders.
diff --git a/src/site/content/en/blog/media-capturing-images/index.md b/src/site/content/en/blog/media-capturing-images/index.md
new file mode 100644
index 00000000000..0cfabb674a9
--- /dev/null
+++ b/src/site/content/en/blog/media-capturing-images/index.md
@@ -0,0 +1,372 @@
+---
+title: Capturing an image from the user
+subhead: Most browsers can get access to the user's camera.
+date: 2016-08-23
+updated: 2021-01-26
+authors:
+  - paulkinlan
+  - mscales
+description: |
+  Most browsers can get access to the user's camera.
+---
+
+Many browsers now have the ability to access video and audio input from the
+user. However, depending on the browser it might be a full dynamic and inline
+experience, or it could be delegated to another app on the user's device. On top
+of that, not every device even has a camera. So how can you create an experience
+that uses a user generated image that works well everywhere?
+
+## Start simple and progressively
+
+If you want to progressively enhance your experience, you need to start with something that works
+everywhere. The easiest thing to do is simply ask the user for a pre-recorded file.
+
+### Ask for a URL
+
+This is the best supported but least satisfying option. Get the user to give you a URL, and then
+use that. For just displaying the image this works everywhere. Create an `img` element, set the
+`src` and you're done.
+
+Though, if you want to manipulate the image in any way, things are a bit more complicated.
+[CORS](https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS) prevents you from
+accessing the actual pixels unless the server sets the appropriate headers and you
+[mark the image as crossorigin](https://developer.mozilla.org/docs/Web/HTML/CORS_enabled_image)
+; the only practical way around that is to run a proxy server.
+
+### File input
+
+You can also use a simple file input element, including an `accept` filter that indicates you only
+want image files.
+
+```html
+<input type="file" accept="image/*" />
+```
+
+This method works on all platforms. On desktop it will prompt the user to
+upload an image file from the file system. In Chrome and Safari on iOS and Android this method will
+give the user a choice of which app to use to capture the image, including the option of taking a
+photo directly with the camera or choosing an existing image file.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/0ntcSaXvXa2SF8tMZPAf.png", alt="An Android menu, with two options: capture image and files", width="250", height="225" %}
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/0be5Qo05FEpWvPxy5F6p.png", alt="An iOS menu, with three options: take photo, photo library, iCloud", width="250", height="225" %}
+
+The data can then be attached to a `<form>` or manipulated with JavaScript by
+listening for an `onchange` event on the input element and then reading
+the `files` property of the event `target`.
+
+```html
+<input type="file" accept="image/*" id="file-input" />
+<script>
+  const fileInput = document.getElementById('file-input');
+
+  fileInput.addEventListener('change', (e) =>
+    doSomethingWithFiles(e.target.files),
+  );
+</script>
+```
+
+The `files` property is a `FileList` object, which I'll talk more about later.
+
+You can also optionally add the `capture` attribute to the element, which indicates to the browser
+that you prefer getting an image from the camera.
+
+```html
+<input type="file" accept="image/*" capture />
+<input type="file" accept="image/*" capture="user" />
+<input type="file" accept="image/*" capture="environment" />
+```
+
+Adding the `capture` attribute without a value let's the browser decide which camera to use, while
+the `"user"` and `"environment"` values tell the browser to prefer the front and rear cameras,
+respectively.
+
+The `capture` attribute works on Android and iOS, but is ignored on desktop. Be aware, however,
+that on Android this means that the user will no longer have the option of choosing an existing
+picture. The system camera app will be started directly, instead.
+
+### Drag and drop
+
+If you are already adding the ability to upload a file, there are a couple of easy ways that you
+can make the user experience a little richer.
+
+The first is to add a drop target to your page that allows the user to drag in a file from the
+desktop or another application.
+
+```html
+<div id="target">You can drag an image file here</div>
+<script>
+  const target = document.getElementById('target');
+
+  target.addEventListener('drop', (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    doSomethingWithFiles(e.dataTransfer.files);
+  });
+
+  target.addEventListener('dragover', (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    e.dataTransfer.dropEffect = 'copy';
+  });
+</script>
+```
+
+Similar to the file input, you can get a `FileList` object from the `dataTransfer.files` property of
+the `drop` event;
+
+The `dragover` event handler lets you signal to the user what will happen when they drop the file
+by using
+[the `dropEffect` property](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect).
+
+Drag and drop has been around for a long time and is well-supported by the major browsers.
+
+### Paste from clipboard
+
+The final way to get an existing image file is from the clipboard. The code for this is very simple,
+but the user experience is a little harder to get right.
+
+```html
+<textarea id="target">Paste an image here</textarea>
+<script>
+  const target = document.getElementById('target');
+
+  target.addEventListener('paste', (e) => {
+    e.preventDefault();
+    doSomethingWithFiles(e.clipboardData.files);
+  });
+</script>
+```
+
+(`e.clipboardData.files` is yet another `FileList` object.)
+
+The tricky part with the clipboard API is that, for full cross-browser support, the target element
+needs to be both selectable and editable. Both `<textarea>` and `<input type="text">` fit the bill
+here, as do elements with the `contenteditable` attribute. But these are also obviously designed for
+editing text.
+
+It can be difficult to make this work smoothly if you don't want the user to be able to input
+text. Tricks like having a hidden input that gets selected when you click on some other element may
+make maintaining accessibility harder.
+
+### Handling a FileList object
+
+Since most of the above methods produce a `FileList`, I should talk a little about what that is.
+
+A `FileList` is similar to an `Array`. It has numeric keys and a `length` property, but it isn't
+_actually_ an array. There are no array methods, like `forEach()` or `pop()`, and it isn't iterable.
+Of course, you can get a real Array by using `Array.from(fileList)`.
+
+The entries of the `FileList` are `File` objects. These are exactly the same as `Blob` objects
+except that they have additional `name` and `lastModified` read-only properties.
+
+```html
+<img id="output" />
+<script>
+  const output = document.getElementById('output');
+
+  function doSomethingWithFiles(fileList) {
+    let file = null;
+
+    for (let i = 0; i < fileList.length; i++) {
+      if (fileList[i].type.match(/^image\//)) {
+        file = fileList[i];
+        break;
+      }
+    }
+
+    if (file !== null) {
+      output.src = URL.createObjectURL(file);
+    }
+  }
+</script>
+```
+
+This example finds the first file that has an image MIME type, but it could also handle multiple
+images being selected/pasted/dropped at once.
+
+Once you have access to the file you can do anything you want with it. For
+example, you can:
+
+- Draw it into a `<canvas>` element so that you can manipulate it
+- Download it to the user's device
+- Upload it to a server with `fetch()`
+
+## Access the camera interactively
+
+Now that you've covered your bases, it's time to progressively enhance!
+
+Modern browsers can get direct access to cameras, allowing you to build
+experiences that are fully integrated with the web page, so the user need never
+leave the browser.
+
+### Acquire access to the camera
+
+You can directly access a camera and microphone by using an API in the WebRTC
+specification called `getUserMedia()`. This will prompt the user for
+access to their connected microphones and cameras.
+
+Support for `getUserMedia()` is pretty good, but it isn't yet everywhere. In particular, it is not
+available in Safari 10 or lower, which at the time of writing is still the latest stable version.
+However, [Apple have announced](https://webkit.org/blog/7726/announcing-webrtc-and-media-capture/)
+that it will be available in Safari 11.
+
+It's very simple to detect support, however.
+
+```js
+const supported = 'mediaDevices' in navigator;
+```
+
+{% Aside 'warning' %}
+Direct access to the camera is a powerful feature. It requires consent
+from the user, and your site MUST be on a secure origin (HTTPS).
+{% endAside %}
+
+When you call `getUserMedia()`, you need to pass in an object that describes what kind of media you
+want. These choices are called constraints. There are a several possible constraints, covering
+things like whether you prefer a front- or rear-facing camera, whether you want audio, and your
+preferred resolution for the stream.
+
+To get data from the camera, however, you need just one constraint, and that is `video: true`.
+
+If successful the API will return a `MediaStream` that contains data from
+the camera, and you can then either attach it to a `<video>` element and play it
+to show a real time preview, or attach it to a `<canvas>` to get a
+snapshot.
+
+```html
+<video id="player" controls autoplay></video>
+<script>
+  const player = document.getElementById('player');
+
+  const constraints = {
+    video: true,
+  };
+
+  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+    player.srcObject = stream;
+  });
+</script>
+```
+
+By itself, this isn't that useful. All you can do is take the video data and play
+it back. If you want to get an image, you have to do a little extra work.
+
+### Grab a snapshot
+
+Your best supported option for getting an image is to draw a frame from the video to a canvas.
+
+Unlike the Web Audio API, there isn't a dedicated stream processing API for video on the web so you
+have to resort to a tiny bit of hackery to capture a snapshot from the user's camera.
+
+The process is as follows:
+
+1. Create a canvas object that will hold the frame from the camera
+2. Get access to the camera stream
+3. Attach it to a video element
+4. When you want to capture a precise frame, add the data from the video element
+   to a canvas object using `drawImage()`.
+
+```html
+<video id="player" controls autoplay></video>
+<button id="capture">Capture</button>
+<canvas id="canvas" width="320" height="240"></canvas>
+<script>
+  const player = document.getElementById('player');
+  const canvas = document.getElementById('canvas');
+  const context = canvas.getContext('2d');
+  const captureButton = document.getElementById('capture');
+
+  const constraints = {
+    video: true,
+  };
+
+  captureButton.addEventListener('click', () => {
+    // Draw the video frame to the canvas.
+    context.drawImage(player, 0, 0, canvas.width, canvas.height);
+  });
+
+  // Attach the video stream to the video element and autoplay.
+  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+    player.srcObject = stream;
+  });
+</script>
+```
+
+Once you have data from the camera stored in the canvas you can do many
+things with it. You could:
+
+- Upload it straight to the server
+- Store it locally
+- Apply funky effects to the image
+
+## Tips
+
+### Stop streaming from the camera when not needed
+
+It is good practice to stop using the camera when you no longer need it.
+Not only will this save battery and processing power, it will also give
+users confidence in your application.
+
+To stop access to the camera you can simply call `stop()` on each video track
+for the stream returned by `getUserMedia()`.
+
+```html
+<video id="player" controls autoplay></video>
+<button id="capture">Capture</button>
+<canvas id="canvas" width="320" height="240"></canvas>
+<script>
+  const player = document.getElementById('player');
+  const canvas = document.getElementById('canvas');
+  const context = canvas.getContext('2d');
+  const captureButton = document.getElementById('capture');
+
+  const constraints = {
+    video: true,
+  };
+
+  captureButton.addEventListener('click', () => {
+    context.drawImage(player, 0, 0, canvas.width, canvas.height);
+
+    // Stop all video streams.
+    player.srcObject.getVideoTracks().forEach(track => track.stop());
+  });
+
+  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+    // Attach the video stream to the video element and autoplay.
+    player.srcObject = stream;
+  });
+</script>
+```
+
+### Ask permission to use camera responsibly
+
+If the user has not previously granted your site access to the camera then
+the instant that you call `getUserMedia()` the browser will prompt the user to
+grant your site permission to the camera.
+
+Users hate getting prompted for access to powerful devices on their machine
+and they will frequently block the request, or they will ignore it if they don't
+understand the context for which the prompt has been created. It is best
+practice to only ask to access the camera when first needed. Once the user has
+granted access they won't be asked again. However, if the user rejects access,
+you can't get access again, unless they manually change camera permission
+settings.
+
+{% Aside 'warning' %}
+Asking for access to the camera on page load will result in most of
+your users rejecting access to it.
+{% endAside %}
+
+## Compatibility
+
+More information about mobile and desktop browser implementation:
+
+- [srcObject](https://www.chromestatus.com/feature/5989005896187904)
+- [navigator.mediaDevices.getUserMedia()](https://www.chromestatus.com/features/5755699816562688)
+
+We also recommend using the [adapter.js](https://github.com/webrtc/adapter) shim to protect apps
+from WebRTC spec changes and prefix differences.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/media-eme/index.md b/src/site/content/en/blog/media-eme/index.md
new file mode 100644
index 00000000000..b66f917ae94
--- /dev/null
+++ b/src/site/content/en/blog/media-eme/index.md
@@ -0,0 +1,573 @@
+---
+layout: post
+title: What is EME?
+description: >
+  Enabling HTTPS on your servers is critical to securing your webpages.
+authors:
+  - samdutton
+date: 2014-01-16
+updated: 2021-01-26
+---
+
+Encrypted Media Extensions provides an API that enables web applications to
+interact with content protection systems, to allow playback of encrypted audio
+and video.
+
+EME is designed to enable the same app and encrypted files to be used in any
+browser, regardless of the underlying protection system. The former is made
+possible by the standardized APIs and flow while the latter is made possible by
+the concept of
+[Common Encryption](https://www.html5rocks.com/en/tutorials/eme/basics/#common-encryption).
+
+EME is an extension to the HTMLMediaElement specification — hence the name.
+Being an 'extension' means that browser support for EME is optional: if a
+browser does not support encrypted media, it will not be able to play encrypted
+media, but EME is not required for HTML spec compliance. From
+[the EME spec](https://w3c.github.io/encrypted-media/):
+
+This proposal extends
+[HTMLMediaElement](http://www.w3.org/TR/html5/embedded-content-0.html#htmlmediaelement)
+providing APIs to control playback of protected content.
+
+The API supports use cases ranging from simple clear key decryption to high
+value video (given an appropriate user agent implementation). License/key
+exchange is controlled by the application, facilitating the development of
+robust playback applications supporting a range of content decryption and
+protection technologies.
+
+This specification does not define a content protection or Digital Rights
+Management system. Rather, it defines a common API that may be used to
+discover, select and interact with such systems as well as with simpler
+content encryption systems. Implementation of Digital Rights Management is not
+required for compliance with this specification: only the Clear Key system is
+required to be implemented as a common baseline.
+
+The common API supports a simple set of content encryption capabilities,
+leaving application functions such as authentication and authorization to page
+authors. This is achieved by requiring content protection system-specific
+messaging to be mediated by the page rather than assuming out-of-band
+communication between the encryption system and a license or other server.
+
+EME implementations use the following external components:
+
+- **Key System:** A content protection (DRM) mechanism. EME doesn't define Key
+  Systems themselves, apart from Clear Key (more about that [below](#clear-key)).
+- **Content Decryption Module (CDM):** A client-side software or hardware
+  mechanism that enables playback of encrypted media. As with Key Systems, EME
+  doesn't define any CDMs, but provides an interface for applications to
+  interact with CDMs that are available.
+- **License (Key) server:** Interacts with a CDM to provide keys to decrypt
+  media. Negotiation with the license server is the responsibility of the
+  application.
+- **Packaging service:** Encodes and encrypts media for distribution/consumption.
+
+Note that an application using EME interacts with a license server to get keys
+to enable decryption, but user identity and authentication are not part of EME.
+Retrieval of keys to enable media playback happens after (optionally)
+authenticating a user. Services such as Netflix must authenticate users within
+their web application: when a user signs into the application, the application
+determines the user's identity and privileges.
+
+## How does EME work?
+
+Here's how the components of EME interact, corresponding to the
+[code example below](#getting-a-key-from-a-license-server):
+
+If multiple formats or codecs are available,
+[MediaSource.isTypeSupported()](https://www.w3.org/TR/media-source/#dom-mediasource-istypesupported) or
+[HTMLMediaElement.canPlayType()](https://dev.w3.org/html5/spec-preview/media-elements.html#dom-navigator-canplaytype)
+can both be used to select the right one.
+However, the CDM may only support a subset of what the browser supports for
+unencrypted content. It's best to negotiate a MediaKeys configuration before
+selecting a format and codec. If the application waits for the encrypted event
+but then MediaKeys shows it can't handle the chosen format/codec, it may be
+too late to switch without interrupting playback.
+
+The recommended flow is to negotiate MediaKeys first, using
+MediaKeysSystemAccess.getConfiguration() to find out the negotiated
+configuration.
+
+If there is only one format/codec to choose from, then there's no need for
+getConfiguration(). However, it's still preferable to set up MediaKeys first.
+The only reason to wait for the encrypted event is if there is no way of
+knowing whether the content is encrypted or not, but in practice that's
+unlikely.
+
+1. A web application attempts to play audio or video that has one or more
+   encrypted streams.
+1. The browser recognizes that the media is encrypted (see box below for how
+   that happens) and fires an encrypted event with metadata (initData) obtained
+   from the media about the encryption.
+1. The application handles the encrypted event:
+
+   1. If no MediaKeys object has been associated with the media element, first
+      select an available Key System by using navigator.requestMediaKeySystemAccess()
+      to check what Key Systems are available, then create a MediaKeys object
+      for an available Key System via a MediaKeySystemAccess object. Note that
+      initialization of the MediaKeys object should happen before the first
+      encrypted event. Getting a license server URL is done by the app
+      independently of selecting an available key system. A MediaKeys object
+      represents all the keys available to decrypt the media for an audio or
+      video element. It represents a CDM instance and provides access to the
+      CDM, specifically for creating key sessions, which are used to obtain
+      keys from a license server.
+
+   1. Once the MediaKeys object has been created, assign it to the media
+      element: setMediaKeys() associates the MediaKeys object with an
+      HTMLMediaElement, so that its keys can be used during playback, i.e.
+      during decoding.
+
+1. The app creates a MediaKeySession by calling createSession() on the
+   MediaKeys. This creates a MediaKeySession, which represents the lifetime of
+   a license and its key(s).
+1. The app generates a license request by passing the media data obtained in
+   the encrypted handler to the CDM, by calling generateRequest() on the
+   MediaKeySession.
+1. The CDM fires a message event: a request to acquire a key from a license
+   server.
+1. The MediaKeySession object receives the message event and the application
+   sends a message to the license server (via XHR, for example).
+1. The application receives a response from the license server and passes the
+   data to the CDM using the update() method of the MediaKeySession.
+1. The CDM decrypts the media using the keys in the license. A valid key may be
+   used, from any session within the MediaKeys associated with the media
+   element. The CDM will access the key and policy, indexed by Key ID.
+
+Media playback resumes.
+
+How does the browser know that media is encrypted?
+
+This information is in the metadata of the media container file, which will be
+in a format such as ISO BMFF or WebM. For ISO BMFF this means header metadata,
+called the protection scheme information box. WebM uses the Matroska
+ContentEncryption element, with some WebM-specific additions. Guidelines are
+provided for each container in an EME-specific registry.
+
+Note that there may be multiple messages between the CDM and the license server,
+and all communication in this process is opaque to the browser and application:
+messages are only understood by the CDM and license server, although the app
+layer can see
+[what type of message](https://w3c.github.io/encrypted-media/#idl-def-MediaKeyMessageType)
+the CDM is sending. The license request contains proof
+of the CDM's validity (and trust relationship) as well as a key to use when
+encrypting the content key(s) in the resulting license.
+
+## But what do CDMs actually do?
+
+An EME implementation does not in itself provide a way to decrypt media: it
+simply provides an API for a web application to interact with Content Decryption
+Modules.
+
+What CDMs actually do is not defined by the EME spec, and a CDM may handle
+decoding (decompression) of media as well as decryption. From least to most
+robust, there are several potential options for CDM functionality:
+
+- Decryption only, enabling playback using the normal media pipeline, for example
+  via a &lt;video&gt; element.
+- Decryption and decoding, passing video frames to the browser for rendering.
+- Decryption and decoding, rendering directly in the hardware (for example, the GPU).
+
+There are multiple ways to make a CDM available to a web app:
+
+- Bundle a CDM with the browser.
+- Distribute a CDM separately.
+- Build a CDM into the operating system.
+- Include a CDM in firmware.
+- Embed a CDM in hardware.
+
+How a CDM is made available is not defined by the EME spec, but in all cases the
+browser is responsible for vetting and exposing the CDM.
+
+EME doesn't mandate a particular Key System; among current desktop and mobile
+browsers, Chrome supports Widevine and IE11 supports PlayReady.
+
+## Getting a key from a license server
+
+In typical commercial use, content will be encrypted and encoded using a
+packaging service or tool. Once the encrypted media is made available online, a
+web client can obtain a key (contained within a license) from a license server
+and use the key to enable decryption and playback of the content.
+
+The following code (adapted from the
+[spec examples](http://w3c.github.io/encrypted-media/#examples))
+shows how an application can select an appropriate key system and obtain a key
+from a license server.
+
+```js
+    var video = document.querySelector('video');
+
+    var config = [{initDataTypes: ['webm'],
+      videoCapabilities: [{contentType: 'video/webm; codecs="vp09.00.10.08"'}]}];
+
+    if (!video.mediaKeys) {
+      navigator.requestMediaKeySystemAccess('org.w3.clearkey',
+          config).then(
+        function(keySystemAccess) {
+          var promise = keySystemAccess.createMediaKeys();
+          promise.catch(
+            console.error.bind(console, 'Unable to create MediaKeys')
+          );
+          promise.then(
+            function(createdMediaKeys) {
+              return video.setMediaKeys(createdMediaKeys);
+            }
+          ).catch(
+            console.error.bind(console, 'Unable to set MediaKeys')
+          );
+          promise.then(
+            function(createdMediaKeys) {
+              var initData = new Uint8Array([...]);
+              var keySession = createdMediaKeys.createSession();
+              keySession.addEventListener('message', handleMessage,
+                  false);
+              return keySession.generateRequest('webm', initData);
+            }
+          ).catch(
+            console.error.bind(console,
+              'Unable to create or initialize key session')
+          );
+        }
+      );
+    }
+
+    function handleMessage(event) {
+      var keySession = event.target;
+      var license = new Uint8Array([...]);
+      keySession.update(license).catch(
+        console.error.bind(console, 'update() failed')
+      );
+    }
+```
+
+## Common encryption
+
+Common Encryption solutions allow content providers to encrypt and package their
+content once per container/codec and use it with a variety of Key Systems, CDMs
+and clients: that is, any CDM that supports Common Encryption. For example, a
+video packaged using Playready could be played back in a browser using a
+Widevine CDM obtaining a key from a Widevine license server.
+
+This is in contrast to legacy solutions that would only work with a complete
+vertical stack, including a single client that often also included an
+application runtime.
+
+[Common Encryption](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397)
+(CENC) is an [ISO standard](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397)
+defining a protection scheme for ISO BMFF; a similar concept applies to WebM.
+
+## Clear Key
+
+Although EME does not define DRM functionality, the spec currently mandates that
+all browsers supporting EME must implement Clear Key. Using this system, media
+can be encrypted with a key and then played back simply by providing that key.
+Clear Key can be built into the browser: it does not require the use of a
+separate decryption module.
+
+While not likely to be used for many types of commercial content, Clear Key is
+fully interoperable across all browsers that support EME. It is also handy for
+testing EME implementations, and applications using EME, without the need to
+request a content key from a license server. There is a simple Clear Key example
+at [simpl.info/ck](http://simpl.info/eme/clearkey). Below is a walkthrough of
+the code, which parallels the steps described
+[above](#getting-a-key-from-a-license-server), though without license server
+interaction.
+
+```js
+// Define a key: hardcoded in this example
+// – this corresponds to the key used for encryption
+var KEY = new Uint8Array([
+  0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b, 0x68, 0xef, 0x12, 0x2a, 0xfc,
+  0xe4, 0xae, 0x3c,
+]);
+
+var config = [
+  {
+    initDataTypes: ['webm'],
+    videoCapabilities: [
+      {
+        contentType: 'video/webm; codecs="vp8"',
+      },
+    ],
+  },
+];
+
+var video = document.querySelector('video');
+video.addEventListener('encrypted', handleEncrypted, false);
+
+navigator
+  .requestMediaKeySystemAccess('org.w3.clearkey', config)
+  .then(function (keySystemAccess) {
+    return keySystemAccess.createMediaKeys();
+  })
+  .then(function (createdMediaKeys) {
+    return video.setMediaKeys(createdMediaKeys);
+  })
+  .catch(function (error) {
+    console.error('Failed to set up MediaKeys', error);
+  });
+
+function handleEncrypted(event) {
+  var session = video.mediaKeys.createSession();
+  session.addEventListener('message', handleMessage, false);
+  session
+    .generateRequest(event.initDataType, event.initData)
+    .catch(function (error) {
+      console.error('Failed to generate a license request', error);
+    });
+}
+
+function handleMessage(event) {
+  // If you had a license server, you would make an asynchronous XMLHttpRequest
+  // with event.message as the body.  The response from the server, as a
+  // Uint8Array, would then be passed to session.update().
+  // Instead, we will generate the license synchronously on the client, using
+  // the hard-coded KEY at the top.
+  var license = generateLicense(event.message);
+
+  var session = event.target;
+  session.update(license).catch(function (error) {
+    console.error('Failed to update the session', error);
+  });
+}
+
+// Convert Uint8Array into base64 using base64url alphabet, without padding.
+function toBase64(u8arr) {
+  return btoa(String.fromCharCode.apply(null, u8arr))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=*$/, '');
+}
+
+// This takes the place of a license server.
+// kids is an array of base64-encoded key IDs
+// keys is an array of base64-encoded keys
+function generateLicense(message) {
+  // Parse the clearkey license request.
+  var request = JSON.parse(new TextDecoder().decode(message));
+  // We only know one key, so there should only be one key ID.
+  // A real license server could easily serve multiple keys.
+  console.assert(request.kids.length === 1);
+
+  var keyObj = {
+    kty: 'oct',
+    alg: 'A128KW',
+    kid: request.kids[0],
+    k: toBase64(KEY),
+  };
+  return new TextEncoder().encode(
+    JSON.stringify({
+      keys: [keyObj],
+    }),
+  );
+}
+```
+
+To test this code, you need an encrypted video to play. Encrypting a video for
+use with Clear Key can be done for WebM as per the webm_crypt instructions.
+Commercial services are also available (for ISO BMFF/MP4 at least) and other
+solutions are being developed.
+
+## Related technology 1: Media Source Extensions (MSE)
+
+The [HTMLMediaElement](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement)
+is a creature of simple beauty.
+
+We can load, decode and play media simply by providing a src URL:
+
+```html
+<video src="foo.webm"></video>
+```
+
+The Media Source API is an extension to HTMLMediaElement enabling more fine-
+grained control over the source of media, by allowing JavaScript to build
+streams for playback from 'chunks' of video. This in turn enables techniques
+such as adaptive streaming and time shifting.
+
+Why is MSE important to EME? Because in addition to distributing protected
+content, commercial content providers must be able to adapt content delivery to
+network conditions and other requirements. Netflix, for example, dynamically
+changes stream bitrate as network conditions change. EME works with playback of
+media streams provided by an MSE implementation, just as it would with media
+provided via a src attribute.
+
+How to chunk and play back media encoded at different bitrates? See the
+[DASH section below](#related-technology-2-dynamic-adaptive-streaming-over-http-dash).
+
+You can see MSE in action at [simpl.info/mse](http://simpl.info/mse);
+for the purposes of this example, a WebM video is split into five chunks using
+the File APIs. In a production application, chunks of video would be retrieved via AJAX.
+
+First a SourceBuffer is created:
+
+```js
+var sourceBuffer = mediaSource.addSourceBuffer(
+  'video/webm; codecs="vorbis,vp8"',
+);
+```
+
+The entire movie is then 'streamed' to a video element by appending each chunk
+using the appendBuffer() method:
+
+```js
+reader.onload = function (e) {
+  sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
+  if (i === NUM_CHUNKS - 1) {
+    mediaSource.endOfStream();
+  } else {
+    if (video.paused) {
+      // start playing after first chunk is appended
+      video.play();
+    }
+    readChunk_(++i);
+  }
+};
+```
+
+Find out more about MSE in the
+[MSE primer](/web/fundamentals/media/mse/basics).
+
+## Related technology 2: Dynamic Adaptive Streaming over HTTP (DASH)
+
+Multi-device, multi-platform, mobile — whatever you call it, the web is often
+experienced under conditions of changeable connectivity. Dynamic, adaptive
+delivery is crucial for coping with bandwidth constraints and variability in the
+multi-device world.
+
+DASH (aka MPEG-DASH) is designed to enable the best possible media delivery in a
+flaky world, for both streaming and download. Several other technologies do
+something similar — such as Apple's
+[HTTP Live Streaming](https://en.wikipedia.org/wiki/HTTP_Live_Streaming)
+(HLS) and Microsoft's
+[Smooth Streaming](https://en.wikipedia.org/wiki/Adaptive_bitrate_streaming#Microsoft_Smooth_Streaming)
+— but DASH is the only method of adaptive bitrate streaming via HTTP that is
+based on an open standard. DASH is already in use by sites such as YouTube.
+
+What does this have to do with EME and MSE? MSE-based DASH implementations can
+parse a manifest, download segments of video at an appropriate bitrate, and feed
+them to a video element when it gets hungry — using existing HTTP
+infrastructure.
+
+In other words, DASH enables commercial content providers to do adaptive
+streaming of protected content.
+
+DASH does what it says on the tin:
+
+- **Dynamic:** responds to changing conditions.
+- **Adaptive:** adapts to provide an appropriate audio or video bitrate.
+- **Streaming:** allows for streaming as well as download.
+- **HTTP:** enables content delivery with the advantage of HTTP, without the
+  disadvantages of a traditional streaming server.
+
+The BBC has begun [providing test streams using DASH](http://bbc.co.uk/rd/blog/2013/09/mpeg-dash-test-streams):
+
+The media is encoded a number of times at different bitrates. Each encoding is
+called a Representation. These are split into a number of Media Segments. The
+client plays a programme by requesting segments, in order, from a
+representation over HTTP. Representations can be grouped into Adaptation Sets
+of representations containing equivalent content. If the client wishes to
+change bitrate it can pick an alternative from the current adaption set and
+start requesting segments from that representation. Content is encoded in such
+a way to make this switching easy for the client to do. In addition to a
+number of media segments, a representation generally also has an
+Initialization Segment. This can be thought of as a header, containing
+information about the encoding, frame sizes, etc. A client needs to obtain
+this for a given representation before consuming media segments from that
+representation.
+
+To summarize:
+
+1. Media is encoded at different bitrates.
+1. The different bitrate files are made available from an HTTP server.
+1. A client web app chooses which bitrate to retrieve and play back with DASH.
+
+As part of the video segmentation process, an XML manifest known as a Media
+Presentation Description (MPD) is built programmatically. This describes
+Adaptation Sets and Representations, with durations and URLs. An MPD looks like
+this:
+
+```xml
+    <MPD xmlns="urn:mpeg:DASH:schema:MPD:2011" mediaPresentationDuration="PT0H3M1.63S" minBufferTime="PT1.5S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"
+    type="static">
+      <Period duration="PT0H3M1.63S" start="PT0S">
+        <AdaptationSet>
+          <ContentComponent contentType="video" id="1" />
+          <Representation bandwidth="4190760" codecs="avc1.640028" height="1080" id="1" mimeType="video/mp4" width="1920">
+            <BaseURL>car-20120827-89.mp4</BaseURL>
+            <SegmentBase indexRange="674-1149">
+              <Initialization range="0-673" />
+            </SegmentBase>
+          </Representation>
+          <Representation bandwidth="2073921" codecs="avc1.4d401f" height="720" id="2" mimeType="video/mp4" width="1280">
+            <BaseURL>car-20120827-88.mp4</BaseURL>
+            <SegmentBase indexRange="708-1183">
+              <Initialization range="0-707" />
+            </SegmentBase>
+          </Representation>
+
+          …
+
+        </AdaptationSet>
+      </Period>
+    </MPD>
+```
+
+(This XML is taken from
+[the .mpd file](http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd)
+used for the
+[YouTube DASH demo player](http://dash-mse-test.appspot.com/dash-player.html?url=http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd).)
+
+According to the DASH spec, an MPD file could in theory be used as the src for a
+video. However, to give more flexibility to web developers, browser vendors have
+chosen instead to leave DASH support up to JavaScript libraries using MSE such
+as [dash.js](http://www-itec.uni-klu.ac.at/dash/?p=792). Implementing DASH in
+JavaScript allows the adaptation algorithm to evolve without requiring browser
+updates. Using MSE also allows experimentation with alternative manifest formats
+and delivery mechanisms without requiring browser changes. Google's
+[Shaka Player](https://github.com/google/shaka-player) implements a DASH client with
+EME support.
+
+[Mozilla Developer Network has instructions](https://developer.mozilla.org/docs/DASH_Adaptive_Streaming_for_HTML_5_Video)
+on how to use WebM tools and FFmpeg to segment video and build an MPD.
+
+## Conclusion
+
+Use of the web to deliver paid-for video and audio is growing at a
+[huge rate](http://www.cmo.com/content/dam/CMO_Other/ADI/Video_Benchmark_Q2_2014/video_benchmark_report-2014.pdf).
+It seems that every new device, whether it's a tablet,
+game console, connected TV, or set-top box, is able to stream media from the
+major content providers over HTTP. [Over 85%](http://longtailvideo.com/html5) of
+mobile and desktop browsers now support &lt;video&gt; and &lt;audio&gt;, and
+Cisco estimates that
+[video will be 80 to 90 percent of global consumer internet traffic](http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-481360_ns827_Networking_Solutions_White_Paper.html)
+by 2017. In this context, browser support for protected content distribution is
+likely to be become increasingly significant, as
+[browser vendors](https://blog.mozilla.org/security/2013/01/29/putting-users-in-control-of-plugins/)
+[curtail support](https://sites.google.com/a/chromium.org/dev/developers/npapi-deprecation)
+for APIs that most media plugins rely on.
+
+## Further reading
+
+### Specs and standards
+
+[EME spec](https://w3c.github.io/encrypted-media/): latest Editor's Draft
+[Common Encryption (CENC)](http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=60397)
+[Media Source Extensions](https://w3c.github.io/media-source/): latest Editor's Draft
+[DASH standard](http://standards.iso.org/ittf/PubliclyAvailableStandards/c057623_ISO_IEC_23009-1_2012.zip)
+(yes, it's a PDF)
+[Overview of the DASH standard](http://dashif.org/about/)
+
+### Articles
+
+[DTG Webinar](http://vimeo.com/62269279) (partially obsolete)
+[What is EME?](https://hsivonen.fi/eme/), by Henri Sivonen
+[Media Source Extensions](/web/fundamentals/media/mse/basics) primer
+MPEG-DASH Test Streams: [BBC R&amp;D blog post](http://bbc.co.uk/rd/blog/2013/09/mpeg-dash-test-streams)
+
+### Demos
+
+Clear Key demo: [simpl.info/ck](http://simpl.info/eme/clearkey)
+[Media Source Extensions (MSE) demo](http://simpl.info/mse)
+Google's [Shaka Player](https://github.com/google/shaka-player)
+implements a DASH client with EME support
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/media-mobile-web-video-playback/index.md b/src/site/content/en/blog/media-mobile-web-video-playback/index.md
new file mode 100644
index 00000000000..3b1ab2ed9ed
--- /dev/null
+++ b/src/site/content/en/blog/media-mobile-web-video-playback/index.md
@@ -0,0 +1,695 @@
+---
+layout: post
+title: Mobile Web Video Playback
+description: >
+  Create the best mobile media experience on the Web by following these best practises.
+authors:
+  - beaufortfrancois
+date: 2017-04-07
+updated: 2021-01-26
+---
+
+How do you create the best mobile media experience on the Web? Easy! It all
+depends on user engagement and the importance you give to the media on a web
+page. I think we all agree that if video is THE reason for a user's visit,
+the user's experience has to be immersive and re-engaging.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/VWUPv8o7lYa3iscRGCiq.png", alt="mobile web video playback", width="800", height="452" %}
+</figure>
+
+In this article I show you how to enhance in a progressive way your media
+experience and make it more immersive thanks to a plethora of Web APIs. That's
+why we're going to build a simple mobile player experience with custom
+controls, fullscreen, and background playback.
+You can try the [sample] now and find [the code] in
+our GitHub repository.
+
+## Custom controls
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/fch33TNOiyRPAtdcqPQc.jpeg", alt="HTML Layout", width="800", height="450" %}
+<figcaption>
+    <b>Figure 1.</b>HTML Layout
+</figcaption>
+</figure>
+
+As you can see, the HTML layout we're going to use for our media player is
+pretty simple: a `<div>` root element contains a `<video>` media element and a
+`<div>` child element dedicated to video controls.
+
+Video controls we will cover later, include: a play/pause button, a fullscreen
+button, seek backward and forward buttons, and some elements for current time,
+duration and time tracking.
+
+```html
+<div id="videoContainer">
+  <video id="video" src="file.mp4"></video>
+  <div id="videoControls"></div>
+</div>
+```
+
+### Read video metadata
+
+First, let's wait for the video metadata to be loaded to set the video
+duration, the current time, and initialize the progress bar. Note that the
+`secondsToTimeCode()` function is a custom utility function I've written that
+converts a number of seconds to a string in "hh:mm:ss" format which is better
+suited in our case.
+
+```html
+<div id="videoContainer">
+  <video id="video" src="file.mp4"></video>
+  <div id="videoControls">
+    <strong>
+      <div id="videoCurrentTime"></div>
+      <div id="videoDuration"></div>
+      <div id="videoProgressBar"></div>
+    </strong>
+  </div>
+</div>
+```
+
+```js
+video.addEventListener('loadedmetadata', function () {
+  videoDuration.textContent = secondsToTimeCode(video.duration);
+  videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
+  videoProgressBar.style.transform = `scaleX(${
+    video.currentTime / video.duration
+  })`;
+});
+```
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/49R27w1bDkReGYhnZejY.png", alt="video metadata only", width="800", height="600" %}
+  <figcaption>
+    <b>Figure 2.</b> Media Player showing video metadata
+  </figcaption>
+</figure>
+
+### Play/pause video
+
+Now that video metadata are loaded, let's add our first button that lets user
+play and pause video with `video.play()` and `video.pause()` depending on its
+playback state.
+
+```html
+<div id="videoContainer">
+  <video id="video" src="file.mp4"></video>
+  <div id="videoControls">
+    <strong><button id="playPauseButton"></button></strong>
+    <div id="videoCurrentTime"></div>
+    <div id="videoDuration"></div>
+    <div id="videoProgressBar"></div>
+  </div>
+</div>
+```
+
+```js
+playPauseButton.addEventListener('click', function (event) {
+  event.stopPropagation();
+  if (video.paused) {
+    video.play();
+  } else {
+    video.pause();
+  }
+});
+```
+
+{% Aside %}
+I call `event.stopPropagation()` to prevent parent handlers (e.g. video
+controls) from being notified of the click event.
+{% endAside %}
+
+Rather than adjusting our video controls in the `click` event listener, we use
+the `play` and `pause` video events. Making our controls events based helps
+with flexibility (as we'll see later with the Media Session API) and will allow
+us to keep our controls in sync if the browser intervenes in the playback.
+When video starts playing, we change the
+button state to "pause" and hide the video controls. When the video pauses, we
+simply change button state to "play" and show the video controls.
+
+```js
+video.addEventListener('play', function () {
+  playPauseButton.classList.add('playing');
+});
+
+video.addEventListener('pause', function () {
+  playPauseButton.classList.remove('playing');
+});
+```
+
+When time indicated by video `currentTime` attribute changed via the
+`timeupdate` video event, we also update our custom controls if they're
+visible.
+
+```js
+video.addEventListener('timeupdate', function () {
+  if (videoControls.classList.contains('visible')) {
+    videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
+    videoProgressBar.style.transform = `scaleX(${
+      video.currentTime / video.duration
+    })`;
+  }
+});
+```
+
+When the video ends, we simply change button state to "play", set video
+`currentTime` back to 0 and show video controls for now. Note that we could
+also choose to load automatically another video if the user has enabled some
+kind of "AutoPlay" feature.
+
+```js
+video.addEventListener('ended', function () {
+  playPauseButton.classList.remove('playing');
+  video.currentTime = 0;
+});
+```
+
+### Seek backward and forward
+
+Let's continue and add "seek backward" and "seek forward" buttons so that user
+can easily skip some content.
+
+```html
+<div id="videoContainer">
+  <video id="video" src="file.mp4"></video>
+  <div id="videoControls">
+    <button id="playPauseButton"></button>
+    <strong
+      ><button id="seekForwardButton"></button>
+      <button id="seekBackwardButton"></button
+    ></strong>
+    <div id="videoCurrentTime"></div>
+    <div id="videoDuration"></div>
+    <div id="videoProgressBar"></div>
+  </div>
+</div>
+```
+
+```js
+var skipTime = 10; // Time to skip in seconds
+
+seekForwardButton.addEventListener('click', function (event) {
+  event.stopPropagation();
+  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
+});
+
+seekBackwardButton.addEventListener('click', function (event) {
+  event.stopPropagation();
+  video.currentTime = Math.max(video.currentTime - skipTime, 0);
+});
+```
+
+As before, rather than adjusting video styling in the `click` event listeners
+of these buttons, we'll use the fired `seeking` and `seeked` video events to
+adjust video brightness. My custom `seeking` CSS class is as simple as `filter: brightness(0);`.
+
+```js
+video.addEventListener('seeking', function () {
+  video.classList.add('seeking');
+});
+
+video.addEventListener('seeked', function () {
+  video.classList.remove('seeking');
+});
+```
+
+Here's below what we have created so far. In the next section, we'll implement
+the fullscreen button.
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/4pPp2OAaKod34JBXnM6S.webm", muted="true", controls="true" %}
+
+## Fullscreen
+
+Here we are going to take advantage of several Web APIs to create a perfect
+and seamless fullscreen experience. To see it in action, check out the
+[sample].
+
+Obviously, you don't have to use all of them. Just pick the ones that make
+sense to you and combine them to create your custom flow.
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/R6XO6uDeFCrWwhERgnAs.webm", muted="true", controls="true" %}
+
+### Prevent automatic fullscreen
+
+On iOS, `video` elements automagically enter fullscreen mode when media
+playback begins. As we're trying to tailor and control as much as possible our
+media experience across mobile browsers, I recommend you set the `playsinline`
+attribute of the `video` element to force it to play inline on iPhone and not
+enter fullscreen mode when playback begins. Note that this has no side effects
+on other browsers.
+
+```html
+<div id="videoContainer"></div>
+  <video id="video" src="file.mp4"></video><strong>playsinline</strong></video>
+  <div id="videoControls">...</div>
+</div>
+```
+
+{% Aside 'caution' %}
+Set `playsinline` only if you provide your own media controls or show
+native controls with `<video controls>`.
+{% endAside %}
+
+### Toggle fullscreen on button click
+
+Now that we prevent automatic fullscreen, we need to handle ourselves the
+fullscreen mode for the video with the [Fullscreen API]. When user
+clicks the "fullscreen button", let's exit fullscreen mode with
+`document.exitFullscreen()` if fullscreen mode is currently in use by the
+document. Otherwise, request fullscreen on the video container with the method
+`requestFullscreen()` if available or fallback to `webkitEnterFullscreen()` on
+the video element only on iOS.
+
+{% Aside %}
+I'm going to use a [tiny shim] for the Fullscreen API in code snippets below that
+will take care of prefixes as the API is not unprefixed yet at that time. You
+may want to use [screenfull.js] wrapper as well.
+{% endAside %}
+
+```html
+<div id="videoContainer">
+  <video id="video" src="file.mp4"></video>
+  <div id="videoControls">
+    <button id="playPauseButton"></button>
+    <button id="seekForwardButton"></button>
+    <button id="seekBackwardButton"></button>
+    <strong><button id="fullscreenButton"></button></strong>
+    <div id="videoCurrentTime"></div>
+    <div id="videoDuration"></div>
+    <div id="videoProgressBar"></div>
+  </div>
+</div>
+```
+
+```js
+fullscreenButton.addEventListener('click', function (event) {
+  event.stopPropagation();
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    requestFullscreenVideo();
+  }
+});
+
+function requestFullscreenVideo() {
+  if (videoContainer.requestFullscreen) {
+    videoContainer.requestFullscreen();
+  } else {
+    video.webkitEnterFullscreen();
+  }
+}
+
+document.addEventListener('fullscreenchange', function () {
+  fullscreenButton.classList.toggle('active', document.fullscreenElement);
+});
+```
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/do6eLAB1ZBJVVduYXzLM.webm", muted="true", controls="true" %}
+
+### Toggle fullscreen on screen orientation change
+
+As user rotates device in landscape mode, let's be smart about this and
+automatically request fullscreen to create an immersive experience. For this,
+we'll need the [Screen Orientation API] which is not yet supported
+everywhere and still prefixed in some browsers at that time. Thus, this will be
+our first progressive enhancement.
+
+How does this work? As soon as we detect the screen orientation changes, let's
+request fullscreen if the browser window is in landscape mode (that is, its
+width is greater than its height). If not, let's exit fullscreen. That's all.
+
+```js
+if ('orientation' in screen) {
+  screen.orientation.addEventListener('change', function () {
+    // Let's request fullscreen if user switches device in landscape mode.
+    if (screen.orientation.type.startsWith('landscape')) {
+      requestFullscreenVideo();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+  });
+}
+```
+
+{% Aside %}
+This may silently fail in browsers that don't [allow requesting
+fullscreen from the orientation change
+event](https://github.com/whatwg/fullscreen/commit/e5e96a9).
+{% endAside %}
+
+### Lock screen in landscape on button click
+
+As video may be better viewed in landscape mode, we may want to lock screen in
+landscape when user clicks the "fullscreen button". We're going to combine the
+previously used [Screen Orientation API] and some [media
+queries] to make sure this experience is the best.
+
+Locking screen in landscape is as easy as calling
+`screen.orientation.lock('landscape')`. However, we should do this only when
+device is in portrait mode with `matchMedia('(orientation: portrait)')` and can
+be held in one hand with `matchMedia('(max-device-width: 768px)')` as this
+wouldn't be a great experience for users on tablet.
+
+```js
+fullscreenButton.addEventListener('click', function (event) {
+  event.stopPropagation();
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    requestFullscreenVideo();
+    <strong>lockScreenInLandscape();</strong>;
+  }
+});
+```
+
+```js
+function lockScreenInLandscape() {
+  if (!('orientation' in screen)) {
+    return;
+  }
+  // Let's force landscape mode only if device is in portrait mode and can be held in one hand.
+  if (
+    matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches
+  ) {
+    screen.orientation.lock('landscape');
+  }
+}
+```
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/Vb89fDuKAF9Cd2QzXUIe.webm", muted="true", controls="true" %}
+
+### Unlock screen on device orientation change
+
+You may have noticed the lock screen experience we've just created isn't
+perfect though as we don't receive screen orientation changes when screen is locked.
+
+In order to fix this, let's use the [Device Orientation API] if
+available. This API provides information from the hardware measuring a device's
+position and motion in space: gyroscope and digital compass for its
+orientation, and accelerometer for its velocity. When we detect a device
+orientation change, let's unlock screen with `screen.orientation.unlock()` if
+user holds device in portrait mode and screen is locked in landscape mode.
+
+```js
+function lockScreenInLandscape() {
+  if (!('orientation' in screen)) {
+    return;
+  }
+  // Let's force landscape mode only if device is in portrait mode and can be held in one hand.
+  if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
+    screen.orientation.lock('landscape')
+    <strong>.then(function() {
+      listenToDeviceOrientationChanges();
+    })</strong>;
+  }
+}
+```
+
+```js
+function listenToDeviceOrientationChanges() {
+  if (!('DeviceOrientationEvent' in window)) {
+    return;
+  }
+  var previousDeviceOrientation, currentDeviceOrientation;
+  window.addEventListener(
+    'deviceorientation',
+    function onDeviceOrientationChange(event) {
+      // event.beta represents a front to back motion of the device and
+      // event.gamma a left to right motion.
+      if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
+        previousDeviceOrientation = currentDeviceOrientation;
+        currentDeviceOrientation = 'landscape';
+        return;
+      }
+      if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
+        previousDeviceOrientation = currentDeviceOrientation;
+        // When device is rotated back to portrait, let's unlock screen orientation.
+        if (previousDeviceOrientation == 'landscape') {
+          screen.orientation.unlock();
+          window.removeEventListener(
+            'deviceorientation',
+            onDeviceOrientationChange,
+          );
+        }
+      }
+    },
+  );
+}
+```
+
+As you can see, this is the seamless fullscreen experience we were looking for.
+To see this in action, check out the [sample].
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/R6XO6uDeFCrWwhERgnAs.webm", muted="true", controls="true" %}
+
+## Background playback
+
+When you detect a web page or a video in the web page is not visible anymore,
+you may want to update your analytics to reflect this. This could also affect
+the current playback as in picking a different track, pause it, or even show
+custom buttons to the user for instance.
+
+### Pause video on page visibility change
+
+With the [Page Visibility API], we can determine the current visibility of a
+page and be notified of visibility changes. Code below pauses video when page
+is hidden. This happens when screen lock is active or when you switch tabs for
+instance.
+
+As most mobile browsers now offer controls outside of the browser that allow
+resuming a paused video, I recommend you set this behaviour only if user is
+allowed to play in the background.
+
+```js
+document.addEventListener('visibilitychange', function () {
+  // Pause video when page is hidden.
+  if (document.hidden) {
+    video.pause();
+  }
+});
+```
+
+{% Aside %}
+Chrome for Android already pauses videos when page is hidden.
+{% endAside %}
+
+### Show/hide mute button on video visibility change
+
+If you use the new [Intersection Observer API], you can be even more granular
+at no cost. This API lets you know when an observed element enters or exits the
+browser's viewport.
+
+Let's show/hide a mute button based on the video visibility in the page. If
+video is playing but not currently visible, a mini mute button will be shown in
+the bottom right corner of the page to give user control over video sound. The
+`volumechange` video event is used to update the mute button styling.
+
+{% Aside %}
+If there are a lot of videos on a page, and it is using the Intersection
+Observer API to pause / mute offscreen video, you may want to reset video
+source with `video.src = null` instead since it will release significant
+resources in an infinite scroll case.
+{% endAside %}
+
+```html
+<button id="muteButton"></button>
+```
+
+```js
+if ('IntersectionObserver' in window) {
+  // Show/hide mute button based on video visibility in the page.
+  function onIntersection(entries) {
+    entries.forEach(function (entry) {
+      muteButton.hidden = video.paused || entry.isIntersecting;
+    });
+  }
+  var observer = new IntersectionObserver(onIntersection);
+  observer.observe(video);
+}
+
+muteButton.addEventListener('click', function () {
+  // Mute/unmute video on button click.
+  video.muted = !video.muted;
+});
+
+video.addEventListener('volumechange', function () {
+  muteButton.classList.toggle('active', video.muted);
+});
+```
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/AiTL3QS7conUpqkeVW8l.webm", muted="true", controls="true" %}
+
+### Play only one video at a time
+
+If there are more than one video on a page, I would suggest you only play one
+and pause the other ones automatically so that user doesn't have to hear
+multiple audio tracks playing simultaneously.
+
+```js
+// This array should be initialized once all videos have been added.
+var videos = Array.from(document.querySelectorAll('video'));
+
+videos.forEach(function (video) {
+  video.addEventListener('play', pauseOtherVideosPlaying);
+});
+
+function pauseOtherVideosPlaying(event) {
+  var videosToPause = videos.filter(function (video) {
+    return !video.paused && video != event.target;
+  });
+  // Pause all other videos currently playing.
+  videosToPause.forEach(function (video) {
+    video.pause();
+  });
+}
+```
+
+### Customize Media Notifications
+
+With the [Media Session API], you can also customize media
+notifications by providing metadata for the currently playing video. It also
+allows you to handle media related events such as seeking or track changing
+which may come from notifications or media keys. To see this in action, check
+out the [sample].
+
+When your web app is playing audio or video, you can already see a media
+notification sitting in the notification tray. On Android, Chrome does its best
+to show appropriate information by using the document's title and the largest
+icon image it can find.
+
+Let's see how to customize this media notification by setting some media
+session metadata such as the title, artist, album name, and artwork with the
+[Media Session API].
+
+```js
+playPauseButton.addEventListener('click', function(event) {
+  event.stopPropagation();
+  if (video.paused) {
+    video.play()
+    <strong>.then(function() {
+      setMediaSession();
+    });</strong>
+  } else {
+    video.pause();
+  }
+});
+```
+
+```js
+function setMediaSession() {
+  if (!('mediaSession' in navigator)) {
+    return;
+  }
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Never Gonna Give You Up',
+    artist: 'Rick Astley',
+    album: 'Whenever You Need Somebody',
+    artwork: [
+      {src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png'},
+      {
+        src: 'https://dummyimage.com/128x128',
+        sizes: '128x128',
+        type: 'image/png',
+      },
+      {
+        src: 'https://dummyimage.com/192x192',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: 'https://dummyimage.com/256x256',
+        sizes: '256x256',
+        type: 'image/png',
+      },
+      {
+        src: 'https://dummyimage.com/384x384',
+        sizes: '384x384',
+        type: 'image/png',
+      },
+      {
+        src: 'https://dummyimage.com/512x512',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  });
+}
+```
+
+Once playback is done, you don't have to "release" the media session as the
+notification will automatically disappear. Keep in mind that current
+`navigator.mediaSession.metadata` will be used when any playback starts. This
+is why you need to update it to make sure you're always showing relevant
+information in the media notification.
+
+If your web app provides a playlist, you may want to allow the user to navigate
+through your playlist directly from the media notification with some "Previous
+Track" and "Next Track" icons.
+
+```js
+if ('mediaSession' in navigator) {
+  navigator.mediaSession.setActionHandler('previoustrack', function () {
+    // User clicked "Previous Track" media notification icon.
+    playPreviousVideo(); // load and play previous video
+  });
+  navigator.mediaSession.setActionHandler('nexttrack', function () {
+    // User clicked "Next Track" media notification icon.
+    playNextVideo(); // load and play next video
+  });
+}
+```
+
+Note that media action handlers will persist. This is very similar to the event
+listener pattern except that handling an event means that the browser stops
+doing any default behaviour and uses this as a signal that your web app
+supports the media action. Hence, media action controls won't be shown unless
+you set the proper action handler.
+
+By the way, unsetting a media action handler is as easy as assigning it to `null`.
+
+The Media Session API allows you to show "Seek Backward" and "Seek Forward"
+media notification icons if you want to control the amount of time skipped.
+
+```js
+if ('mediaSession' in navigator) {
+  let skipTime = 10; // Time to skip in seconds
+
+  navigator.mediaSession.setActionHandler('seekbackward', function () {
+    // User clicked "Seek Backward" media notification icon.
+    video.currentTime = Math.max(video.currentTime - skipTime, 0);
+  });
+  navigator.mediaSession.setActionHandler('seekforward', function () {
+    // User clicked "Seek Forward" media notification icon.
+    video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
+  });
+}
+```
+
+The "Play/Pause" icon is always shown in the media notification and the related
+events are handled automatically by the browser. If for some reason the default
+behaviour doesn't work out, you can still [handle "Play" and "Pause" media
+events].
+
+The cool thing about the Media Session API is that the notification tray is not
+the only place where media metadata and controls are visible. The media
+notification is synced automagically to any paired wearable device. And it also
+shows up on lock screens.
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/28hm3HHyO9dHKrCYJdDA.webm", muted="true", controls="true" %}
+
+## Feedback {: #feedback }
+
+[sample]: https://googlesamples.github.io/web-fundamentals/fundamentals/media/mobile-web-video-playback.html
+[the code]: https://github.com/googlesamples/web-fundamentals/tree/gh-pages/fundamentals/media/mobile-web-video-playback.html
+[tiny shim]: https://github.com/googlesamples/web-fundamentals/tree/gh-pages/fundamentals/media/tiny-fullscreen-shim.js
+[screenfull.js]: https://github.com/sindresorhus/screenfull.js
+[handle "play" and "pause" media events]: https://web.dev/media-session#play_pause
+[fullscreen api]: https://fullscreen.spec.whatwg.org/
+[screen orientation api]: https://w3c.github.io/screen-orientation/
+[media queries]: https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries
+[device orientation api]: https://w3c.github.io/deviceorientation/spec-source-orientation.html
+[page visibility api]: https://www.w3.org/TR/page-visibility/
+[intersection observer api]: https://web.dev/intersectionobserver
+[media session api]: https://web.dev/media-session
diff --git a/src/site/content/en/blog/media-mse-basics/index.md b/src/site/content/en/blog/media-mse-basics/index.md
new file mode 100644
index 00000000000..9c7d7f9ce5e
--- /dev/null
+++ b/src/site/content/en/blog/media-mse-basics/index.md
@@ -0,0 +1,379 @@
+---
+layout: post
+title: Media Source Extensions
+description: >
+  Media Source Extensions (MSE) is a JavaScript API that lets you build streams for playback from segments of audio or video.
+authors:
+  - joemedley
+  - beaufortfrancois
+date: 2017-02-08
+updated: 2021-01-26
+---
+
+[Media Source Extensions (MSE)](https://www.w3.org/TR/media-source/)
+is a JavaScript API that lets you build streams for playback from segments of
+audio or video. Although not covered in this article, understanding MSE is
+needed if you want to embed videos in your site that do things like:
+
+- Adaptive streaming, which is another way of saying adapting to device
+  capabilities and network conditions
+- Adaptive splicing, such as ad insertion
+- Time shifting
+- Control of performance and download size
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/SMMXsJT0g2ivhkxfB9Rc.png", alt="Basic MSE data flow", width="305", height="250" %}
+  <figcaption><b>Figure 1</b>: Basic MSE data flow</figcaption>
+</figure>
+
+You can almost think of MSE as a chain. As illustrated in the figure, between
+the downloaded file and the media elements are several layers.
+
+- An `<audio>` or `<video>` element to play the media.
+- A `MediaSource` instance with a `SourceBuffer` to feed the media element.
+- A `fetch()` or XHR call to retrieve media data in a `Response` object.
+- A call to `Response.arrayBuffer()` to feed `MediaSource.SourceBuffer`.
+
+In practice, the chain looks like this:
+
+```js
+var vidElement = document.querySelector('video');
+
+if (window.MediaSource) {
+  var mediaSource = new MediaSource();
+  vidElement.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.log('The Media Source Extensions API is not supported.');
+}
+
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
+  var mediaSource = e.target;
+  var sourceBuffer = mediaSource.addSourceBuffer(mime);
+  var videoUrl = 'droid.webm';
+  fetch(videoUrl)
+    .then(function (response) {
+      return response.arrayBuffer();
+    })
+    .then(function (arrayBuffer) {
+      sourceBuffer.addEventListener('updateend', function (e) {
+        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+          mediaSource.endOfStream();
+        }
+      });
+      sourceBuffer.appendBuffer(arrayBuffer);
+    });
+}
+```
+
+If you can sort things out from the explanations so far, feel free to stop
+reading now. If you want a more detailed explanation, then please keep reading.
+I'm going to walk through this chain by building a basic MSE example. Each of
+the build steps will add code to the previous step.
+
+## A note about clarity
+
+Will this article tell you everything you need to know about playing media on a
+web page? No, it's only intended to help you understand more complicated code
+you might find elsewhere. For the sake of clarity, this document simplifies and
+excludes many things. We think we can get away with this because we also
+recommend using a library such as [Google's Shaka Player](https://shaka-player-demo.appspot.com/demo/).
+I will note throughout where I'm deliberately simplifying.
+
+### A few things not covered
+
+Here, in no particular order, are a few things I won't cover.
+
+- Playback controls. We get those for free by virtue of using the HTML5
+  `<audio>` and `<video>` elements.
+- Error handling.
+
+### For use in production environments
+
+Here are some things I'd recommend in a production usage of MSE related APIs:
+
+- Before making calls on these APIs, handle any error events or API
+  exceptions, and check `HTMLMediaElement.readyState` and
+  `MediaSource.readyState`. These values can change before associated events are
+  delivered.
+- Make sure previous `appendBuffer()` and `remove()` calls are not still in
+  progress by checking the `SourceBuffer.updating` boolean value before
+  updating the `SourceBuffer`'s `mode`, `timestampOffset`, `appendWindowStart`,
+  `appendWindowEnd`, or calling `appendBuffer()` or `remove()` on the
+  `SourceBuffer`.
+- For all `SourceBuffer` instances added to your `MediaSource`, ensure none of
+  their `updating` values are true before calling `MediaSource.endOfStream()`
+  or updating the `MediaSource.duration`.
+- If `MediaSource.readyState` value is `ended`, calls like `appendBuffer()` and
+  `remove()`, or setting `SourceBuffer.mode` or `SourceBuffer.timestampOffset`
+  will cause this value to transition to `open`. This means you should be
+  prepared to handle multiple `sourceopen` events.
+- When handling `HTMLMediaElement error` events, the contents of
+  [`MediaError.message`](https://googlechrome.github.io/samples/media/error-message.html)
+  can be useful to determine the root cause of the failure, especially for
+  errors that are hard to reproduce in test environments.
+
+### Attach a MediaSource instance to a media element
+
+As with many things in web development these days, you start with feature
+detection. Next, get a media element, either an `<audio>` or `<video>` element.
+Finally create an instance of `MediaSource`. It gets turned into a URL and passed
+to the media element's source attribute.
+
+```js
+var vidElement = document.querySelector('video');
+
+if (window.MediaSource) {
+  var mediaSource = new MediaSource();
+  vidElement.src = URL.createObjectURL(mediaSource);
+  // Is the MediaSource instance ready?
+} else {
+  console.log('The Media Source Extensions API is not supported.');
+}
+```
+
+{% Aside %}
+Note: Each incomplete code example contains a comment that gives you a hint of
+what I'll add in the next step. In the example above, this comment says, 'Is the
+MediaSource instance ready?', which matches the title of the next section.
+{% endAside %}
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ue5eqd9gCmKRnBzs36hn.png", alt="A source attribute as a blob", width="433", height="251" %}
+  <figcaption><b>Figure 1</b>: A source attribute as a blob</figcaption>
+</figure>
+
+That a `MediaSource` object can be passed to a `src` attribute might seem a bit
+odd. They're usually strings, but
+[they can also be blobs](https://www.w3.org/TR/FileAPI/#url).
+If you inspect a page with embedded media and examine its media element, you'll
+see what I mean.
+
+### Is the MediaSource instance ready?
+
+`URL.createObjectURL()` is itself synchronous; however, it processes the
+attachment asynchronously. This causes a slight delay before you can do anything
+with the `MediaSource` instance. Fortunately, there are ways to test for this.
+The simplest way is with a `MediaSource` property called `readyState`. The
+`readyState` property describes the relation between a `MediaSource` instance and
+a media element. It can have one of the following values:
+
+- `closed` - The `MediaSource` instance is not attached to a media element.
+- `open` - The `MediaSource` instance is attached to a media element and is
+  ready to receive data or is receiving data.
+- `ended` - The `MediaSource` instance is attached to a media element and all of
+  its data has been passed to that element.
+
+Querying these options directly can negatively affect performance. Fortunately,
+`MediaSource` also fires events when `readyState` changes, specifically
+`sourceopen`, `sourceclosed`, `sourceended`. For the example I'm building, I'm
+going to use the `sourceopen` event to tell me when to fetch and buffer the
+video.
+
+```js
+var vidElement = document.querySelector('video');
+
+if (window.MediaSource) {
+  var mediaSource = new MediaSource();
+  vidElement.src = URL.createObjectURL(mediaSource);
+  <strong>mediaSource.addEventListener('sourceopen', sourceOpen);</strong>
+} else {
+  console.log("The Media Source Extensions API is not supported.")
+}
+
+<strong>function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  // Create a SourceBuffer and get the media file.
+}</strong>
+```
+
+Notice that I've also called `revokeObjectURL()`. I know this seems premature,
+but I can do this any time after the media element's `src` attribute is
+connected to a `MediaSource` instance. Calling this method doesn't destroy any
+objects. It _does_ allow the platform to handle garbage collection at an
+appropriate time, which is why I'm calling it immediately.
+
+### Create a SourceBuffer
+
+Now it's time to create the `SourceBuffer`, which is the object that actually
+does the work of shuttling data between media sources and media elements. A
+`SourceBuffer` has to be specific to the type of media file you're loading.
+
+In practice you can do this by calling `addSourceBuffer()` with the appropriate
+value. Notice that in the example below the mime type string contains a mime
+type and _two_ codecs. This is a mime string for a video file, but it uses
+separate codecs for the video and audio portions of the file.
+
+Version 1 of the MSE spec allows user agents to differ on whether to require
+both a mime type and a codec. Some user agents don't require, but do allow just
+the mime type. Some user agents, Chrome for example, require a codec for mime
+types that don't self-describe their codecs. Rather than trying to sort all this
+out, it's better to just include both.
+
+{% Aside %}
+Note: For simplicity, the example only shows a single segment of media though in
+practice, MSE only makes sense for scenarios with multiple segments.
+{% endAside %}
+
+```js
+var vidElement = document.querySelector('video');
+
+if (window.MediaSource) {
+  var mediaSource = new MediaSource();
+  vidElement.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.log('The Media Source Extensions API is not supported.');
+}
+
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  <strong>
+    var mime = 'video/webm; codecs="opus, vp09.00.10.08"'; // e.target refers to
+    the mediaSource instance. // Store it in a variable so it can be used in a
+    closure. var mediaSource = e.target; var sourceBuffer =
+    mediaSource.addSourceBuffer(mime); // Fetch and process the video.
+  </strong>;
+}
+```
+
+### Get the media file
+
+If you do an internet search for MSE examples, you'll find plenty that retrieve
+media files using XHR. To be more cutting edge,
+I'm going to use the [Fetch](https://developer.mozilla.org/docs/Web/API/GlobalFetch)
+API and the [Promise](/web/fundamentals/getting-started/primers/promises) it
+returns. If you're trying to do this in Safari, it won't work without a
+`fetch()` polyfill.
+
+{% Aside %}
+Note: Just to help things fit on the screen, from here to the end I'm only going
+to show part of the example we're building. If you want to see it in context,
+[jump to the end](#the-final-version).
+{% endAside %}
+
+```js
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
+  var mediaSource = e.target;
+  var sourceBuffer = mediaSource.addSourceBuffer(mime);
+  var videoUrl = 'droid.webm';
+  <strong>
+    fetch(videoUrl) .then(function(response){' '}
+    {
+      // Process the response object.
+    }
+    );
+  </strong>;
+}
+```
+
+A production quality player would have the same file in multiple versions to
+support different browsers. It could use separate files for audio and video to
+allow audio to be selected based on language settings.
+
+Real world code would also have multiple copies of media files at different
+resolutions so that it could adapt to different device capabilities and network
+conditions. Such an application is able to load and play videos in chunks either
+using range requests or segments. This allows for adaption to network conditions
+_while media are playing_. You may have heard the terms DASH or HLS, which are
+two methods of accomplishing this. A full discussion of this topic is beyond the
+scope of this introduction.
+
+### Process the response object
+
+The code looks almost done, but the media doesn't play. We need to get media
+data from the `Response` object to the `SourceBuffer`.
+
+The typical way to pass data from the response object to the `MediaSource`
+instance is to get an `ArrayBuffer` from the response object and pass it to the
+`SourceBuffer`. Start by calling `response.arrayBuffer()`, which returns a
+promise to the buffer. In my code, I've passed this promise to a second `then()`
+clause where I append it to the `SourceBuffer`.
+
+```js
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
+  var mediaSource = e.target;
+  var sourceBuffer = mediaSource.addSourceBuffer(mime);
+  var videoUrl = 'droid.webm';
+  fetch(videoUrl)
+    .then(function(response) {
+      <strong>return response.arrayBuffer();</strong>
+    })
+    <strong>.then(function(arrayBuffer) {
+      sourceBuffer.appendBuffer(arrayBuffer);
+    });</strong>
+}
+```
+
+#### Call endOfStream()
+
+After all `ArrayBuffers` are appended, and no further media data is expected, call
+`MediaSource.endOfStream()`. This will change `MediaSource.readyState` to
+`ended` and fire the `sourceended` event.
+
+```js
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
+  var mediaSource = e.target;
+  var sourceBuffer = mediaSource.addSourceBuffer(mime);
+  var videoUrl = 'droid.webm';
+  fetch(videoUrl)
+    .then(function(response) {
+      return response.arrayBuffer();
+    })
+    .then(function(arrayBuffer) {
+      <strong>sourceBuffer.addEventListener('updateend', function(e) {
+        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+          mediaSource.endOfStream();
+        }
+      });</strong>
+      sourceBuffer.appendBuffer(arrayBuffer);
+    });
+}
+```
+
+#### The final version
+
+Here's the complete code example. I hope you have learned something about Media
+Source Extensions.
+
+```js
+var vidElement = document.querySelector('video');
+
+if (window.MediaSource) {
+  var mediaSource = new MediaSource();
+  vidElement.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.log('The Media Source Extensions API is not supported.');
+}
+
+function sourceOpen(e) {
+  URL.revokeObjectURL(vidElement.src);
+  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
+  var mediaSource = e.target;
+  var sourceBuffer = mediaSource.addSourceBuffer(mime);
+  var videoUrl = 'droid.webm';
+  fetch(videoUrl)
+    .then(function (response) {
+      return response.arrayBuffer();
+    })
+    .then(function (arrayBuffer) {
+      sourceBuffer.addEventListener('updateend', function (e) {
+        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+          mediaSource.endOfStream();
+        }
+      });
+      sourceBuffer.appendBuffer(arrayBuffer);
+    });
+}
+```
+
+#### Feedback {: #feedback }
diff --git a/src/site/content/en/blog/media-recording-audio/index.md b/src/site/content/en/blog/media-recording-audio/index.md
new file mode 100644
index 00000000000..5ddc01ff734
--- /dev/null
+++ b/src/site/content/en/blog/media-recording-audio/index.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: Recording Audio from the User
+description: >
+  Most browsers can get access to the user's microphone.
+authors:
+  - paulkinlan
+date: 2016-08-23
+updated: 2022-12-05
+---
+
+Many browsers now have the ability to access video and audio input from the
+user. However, depending on the browser, it might be a full dynamic and inline
+experience, or it could be delegated to another app on the user's device.
+
+## Start simple and progressively
+
+The easiest thing to do is simply ask the user for a pre-recorded file. Do this by creating a simple
+file input element and adding an `accept` filter that indicates we can only accept audio files, and
+a `capture` attribute that indicates we want to get it direct from the microphone.
+
+```html
+<input type="file" accept="audio/*" capture />
+```
+
+This method works on all platforms. On desktop, it will prompt the user to
+upload a file from the file system (ignoring the `capture` attribute). In Safari
+on iOS, it will open up the microphone app, allowing you to record audio and
+then send it back to the web page; on Android, it will give the user the
+choice of which app to use record the audio in before sending it back to the web
+page.
+
+Once the user has finished recording and they are back in the website, you
+need to somehow get ahold of the file data. You can get quick access by
+attaching an `onchange` event to the input element and then reading
+the `files` property of the event object.
+
+```html
+<input type="file" accept="audio/*" capture id="recorder" />
+<audio id="player" controls></audio>
+  <script>
+    const recorder = document.getElementById('recorder');
+    const player = document.getElementById('player');
+
+    recorder.addEventListener('change', function (e) {
+      const file = e.target.files[0];
+      const url = URL.createObjectURL(file);
+      // Do something with the audio file.
+      player.src = url;
+    });
+  </script>
+</audio>
+```
+
+Once you have access to the file, you can do anything you want with it. For
+example, you can:
+
+- Attach it directly to an `<audio>` element so that you can play it
+- Download it to the user's device
+- Upload it to a server by attaching it to an `XMLHttpRequest`
+- Pass it through the Web Audio API and apply filters on to it
+
+Whilst using the input element method of getting access to audio data is
+ubiquitous, it is the least appealing option. We really want to get access to
+the microphone and provide a nice experience directly in the page.
+
+## Access the microphone interactively
+
+Modern browsers can have a direct line to the microphone allowing us to build
+experiences that are fully integrated with the web page and the user will never
+leave the browser.
+
+### Acquire access to the microphone
+
+We can directly access the Microphone by using an API in the WebRTC
+specification called `getUserMedia()`. `getUserMedia()` will prompt the user for
+access to their connected microphones and cameras.
+
+If successful the API will return a `Stream` that will contain the data from either the camera or
+the microphone, and we can then either attach it to an `<audio>` element, attach it to a WebRTC
+stream, attach it to a Web Audio `AudioContext`, or save it using the `MediaRecorder` API.
+
+To get data from the microphone, we just set `audio: true` in the constraints
+object that is passed to the `getUserMedia()` API.
+
+```html
+<audio id="player" controls></audio>
+<script>
+  const player = document.getElementById('player');
+
+  const handleSuccess = function (stream) {
+    if (window.URL) {
+      player.srcObject = stream;
+    } else {
+      player.src = stream;
+    }
+  };
+
+  navigator.mediaDevices
+    .getUserMedia({audio: true, video: false})
+    .then(handleSuccess);
+</script>
+```
+
+If you want to choose a particular microphone, you can first enumerate the available microphones.
+
+```js
+navigator.mediaDevices.enumerateDevices().then((devices) => {
+  devices = devices.filter((d) => d.kind === 'audioinput');
+});
+```
+
+You can then pass the `deviceId` that you wish to use when you call `getUserMedia`.
+
+```js
+navigator.mediaDevices.getUserMedia({
+  audio: {
+    deviceId: devices[0].deviceId,
+  },
+});
+```
+
+By itself, this isn't that useful. All we can do is take the audio data and play it back.
+
+### Access the raw data from the microphone
+
+To access the raw data from the microphone, we have to take the stream created by
+`getUserMedia()` and then use the Web Audio API to process the data. The
+Web Audio API is a simple API that takes input sources and connects those
+sources to nodes which can process the audio data (adjust Gain etc.) and
+ultimately to a speaker so that the user can hear it.
+
+One of the nodes that you can connect is an `AudioWorkletNode`. This node gives
+you the low-level capability for custom audio processing. The actual audio
+processing happens in the `process()` callback method in the `AudioWorkletProcessor`.
+Call this function to feed inputs and parameters and fetch outputs.
+
+Check out [Enter Audio Worklet](https://developer.chrome.com/blog/audio-worklet/)
+to learn more.
+
+```html
+<script>
+  const handleSuccess = async function(stream) {
+    const context = new AudioContext();
+    const source = context.createMediaStreamSource(stream);
+
+    await context.audioWorklet.addModule("processor.js");
+    const worklet = new AudioWorkletNode(context, "worklet-processor");
+
+    source.connect(worklet);
+    worklet.connect(context.destination);
+  };
+
+  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+      .then(handleSuccess);
+</script>
+```
+
+```js
+// processor.js
+class WorkletProcessor extends AudioWorkletProcessor {
+  process(inputs, outputs, parameters) {
+    // Do something with the data, e.g. convert it to WAV
+    console.log(inputs);
+    return true;
+  }
+}
+
+registerProcessor("worklet-processor", WorkletProcessor);
+```
+
+The data that is held in the buffers is the raw data from the microphone and
+you have a number of options with what you can do with that data:
+
+- Upload it straight to the server
+- Store it locally
+- Convert it to a dedicated file format, such as WAV, and then save it to your
+  servers or locally
+
+### Save the data from the microphone
+
+The easiest way to save the data from the microphone is to use the
+`MediaRecorder` API.
+
+The `MediaRecorder` API will take the stream created by `getUserMedia` and then
+progressively save the data that is on the stream into your preferred
+destination.
+
+```html
+<a id="download">Download</a>
+<button id="stop">Stop</button>
+<script>
+  const downloadLink = document.getElementById('download');
+  const stopButton = document.getElementById('stop');
+
+
+  const handleSuccess = function(stream) {
+    const options = {mimeType: 'audio/webm'};
+    const recordedChunks = [];
+    const mediaRecorder = new MediaRecorder(stream, options);
+
+    mediaRecorder.addEventListener('dataavailable', function(e) {
+      if (e.data.size > 0) recordedChunks.push(e.data);
+    });
+
+    mediaRecorder.addEventListener('stop', function() {
+      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
+      downloadLink.download = 'acetest.wav';
+    });
+
+    stopButton.addEventListener('click', function() {
+      mediaRecorder.stop();
+    });
+
+    mediaRecorder.start();
+  };
+
+  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+      .then(handleSuccess);
+</script>
+```
+
+In our case, we are saving the data directly into an array that we can later turn
+into a `Blob`, which can be then used to save the data to our Web Server or directly
+to the storage on the user's device.
+
+### Ask permission to use microphone responsibly
+
+If the user has not previously granted your site access to the microphone, then
+the instant that you call `getUserMedia`, the browser will prompt the user to
+grant your site permission to the microphone.
+
+Users hate getting prompted for access to powerful devices on their machine and
+they will frequently block the request, or they will ignore it if they don't
+understand the context of which the prompt has been created. It is best practice
+to only ask to access the microphone when first needed. Once the user has
+granted access, they won't be asked again, however, if they reject access,
+you can't ask the user for permission again.
+
+{% Aside 'warning' %}
+Asking for access to the microphone on page load will result in most of your users
+rejecting access to the mic.
+{% endAside %}
+
+### Use the permissions API to check if you already have access
+
+The `getUserMedia` API provides you with no knowledge of if you already have
+access to the microphone. This presents you with a problem, to provide a nice UI
+to get the user to grant you access to the microphone, you have to ask for
+access to the microphone.
+
+This can be solved in some browsers by using the Permission API. The
+`navigator.permission` API allows you to query the state of the ability to
+access specific API's without having to prompt again.
+
+To query if you have access to the user's microphone, you can pass in
+`{name: 'microphone'}` into the query method and it will return either:
+
+- `granted` &mdash; the user has previously given you access to the microphone;
+- `prompt` &mdash; the user has not given you access and will be prompted when
+  you call `getUserMedia`;
+- `denied` &mdash; the system or the user has explicitly blocked access to the
+  microphone and you won't be able to get access to it.
+
+And you can now quickly check to see if you need to alter your user
+interface to accommodate the actions that the user needs to take.
+
+```js
+navigator.permissions.query({name: 'microphone'}).then(function (result) {
+  if (result.state == 'granted') {
+  } else if (result.state == 'prompt') {
+  } else if (result.state == 'denied') {
+  }
+  result.onchange = function () {};
+});
+```
+
+### Feedback {: #feedback }
diff --git a/src/site/content/en/blog/media-recording-video/index.md b/src/site/content/en/blog/media-recording-video/index.md
new file mode 100644
index 00000000000..33487ce9d8b
--- /dev/null
+++ b/src/site/content/en/blog/media-recording-video/index.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: Recording Video from the User
+description: >
+  Most browsers can get access to the user's camera.
+authors:
+  - mscales
+date: 2017-09-24
+updated: 2021-01-26
+---
+
+Many browsers now have the ability to access video and audio input from the
+user. However, depending on the browser it might be a full dynamic and inline
+experience, or it could be delegated to another app on the user's device.
+
+## Start simple and progressively
+
+The easiest thing to do is simply ask the user for a pre-recorded file. Do this by creating a simple
+file input element and adding an `accept` filter that indicates we can only accept video files and
+a `capture` attribute that indicates we want to get it direct from the camera.
+
+```html
+<input type="file" accept="video/*" capture />
+```
+
+This method works on all platforms. On desktop it will prompt the user to upload a file from the
+file system (ignoring the `capture` attribute). In Safari
+on iOS it will open up the camera app, allowing you to record video and
+then send it back to the web page; on Android it will give the user the
+choice of which app to use record the video in before sending it back to the web
+page.
+
+Many mobile devices have more than one camera. If you have a preference, you can set the `capture`
+attribute to `user`, if you want the camera that faces the user, or `environment` if you want the
+camera that faces outward.
+
+```html
+<input type="file" accept="video/*" capture="user" />
+<input type="file" accept="video/*" capture="environment" />
+```
+
+Note that this is just a hint - if the browser doesn't support the option, or the camera type you
+ask for isn't available, the browser may choose another camera.
+
+Once the user has finished recording and they are back in the website, you
+need to somehow get ahold of the file data. You can get quick access by
+attaching an `onchange` event to the input element and then reading
+the `files` property of the event object.
+
+```html
+<input type="file" accept="video/*" capture="camera" id="recorder" />
+<video id="player" controls></video>
+<script>
+  var recorder = document.getElementById('recorder');
+  var player = document.getElementById('player');
+
+  recorder.addEventListener('change', function (e) {
+    var file = e.target.files[0];
+    // Do something with the video file.
+    player.src = URL.createObjectURL(file);
+  });
+</script>
+```
+
+Once you have access to the file you can do anything you want with it. For
+example, you can:
+
+- Attach it directly to a `<video>` element so that you can play it
+- Download it to the user's device
+- Upload it to a server by attaching to an `XMLHttpRequest`
+- Draw the frames into a canvas and apply filters to it
+
+Whilst using the input element method of getting access to video data is
+ubiquitous, it is the least appealing option. We really want to get access to
+the camera and provide a nice experience directly in the page.
+
+## Access the camera interactively
+
+Modern browsers can have a direct line to the camera allowing us to build
+experiences that are fully integrated with the web page and the user will never
+leave the browser.
+
+### Acquire access to the camera
+
+We can directly access the camera by using an API in the WebRTC
+specification called `getUserMedia()`. `getUserMedia()` will prompt the user for
+access to their connected microphones and cameras.
+
+If successful the API will return a `Stream` that will contain the data from either the camera or
+the microphone, and we can then either attach it to a `<video>` element, attach it to a WebRTC
+stream, or save it using the `MediaRecorder` API.
+
+To get data from the camera we just set `video: true` in the constraints
+object that is passed to the `getUserMedia()` API
+
+```html
+<video id="player" controls></video>
+<script>
+  var player = document.getElementById('player');
+
+  var handleSuccess = function (stream) {
+    player.srcObject = stream;
+  };
+
+  navigator.mediaDevices
+    .getUserMedia({audio: true, video: true})
+    .then(handleSuccess);
+</script>
+```
+
+If you want to choose a particular camera you can first enumerate the available cameras.
+
+```js
+navigator.mediaDevices.enumerateDevices().then((devices) => {
+  devices = devices.filter((d) => d.kind === 'videoinput');
+});
+```
+
+You can then pass the deviceId that you wish to use when you call `getUserMedia`.
+
+```js
+navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: {
+    deviceId: devices[0].deviceId,
+  },
+});
+```
+
+By itself, this isn't that useful. All we can do is take the video data and play it back.
+
+### Access the raw data from the camera
+
+To access the raw video data from the camera you can draw each frame into a `<canvas>` and
+manipulate the pixels directly.
+
+For a 2D canvas you can use the `drawImage` method of the context to draw the current frame of a
+`<video>` element into the canvas.
+
+```js
+context.drawImage(myVideoElement, 0, 0);
+```
+
+With a WebGL canvas you can use a `<video>` element as the source for a texture.
+
+```js
+gl.texImage2D(
+  gl.TEXTURE_2D,
+  0,
+  gl.RGBA,
+  gl.RGBA,
+  gl.UNSIGNED_BYTE,
+  myVideoElement,
+);
+```
+
+Note that in either case this will use the _current_ frame of a playing video. To process multiple
+frames you need to redraw the video to the canvas each time.
+
+You can learn more about this in our article about
+[applying real-time effects to images and video](/web/fundamentals/media/manipulating/live-effects).
+
+### Save the data from the camera
+
+The easiest way to save the data from the camera is to use the
+`MediaRecorder` API.
+
+The `MediaRecorder` API will take the stream created by `getUserMedia` and then
+progressively save the data from the stream to you preferred destination.
+
+```html
+<a id="download">Download</a>
+<button id="stop">Stop</button>
+<script>
+  let shouldStop = false;
+  let stopped = false;
+  const downloadLink = document.getElementById('download');
+  const stopButton = document.getElementById('stop');
+
+  stopButton.addEventListener('click', function() {
+    shouldStop = true;
+  })
+
+  var handleSuccess = function(stream) {
+    const options = {mimeType: 'video/webm'};
+    const recordedChunks = [];
+    <strong>const mediaRecorder = new MediaRecorder(stream, options);
+
+    mediaRecorder.addEventListener('dataavailable', function(e) {
+      if (e.data.size > 0) {
+        recordedChunks.push(e.data);
+      }
+
+      if(shouldStop === true && stopped === false) {
+        mediaRecorder.stop();
+        stopped = true;
+      }
+    });
+
+    mediaRecorder.addEventListener('stop', function() {
+      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
+      downloadLink.download = 'acetest.webm';
+    });
+
+    mediaRecorder.start();</strong>
+  };
+
+  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+      .then(handleSuccess);
+</script>
+```
+
+In our case we are saving the data directly into an array that we can later turn
+in to a `Blob` which can be then used to save to our Web Server or directly in
+storage on the user's device.
+
+## Ask permission to use camera responsibly
+
+If the user has not previously granted your site access to the camera then
+the instant that you call `getUserMedia` the browser will prompt the user to
+grant your site permission to the camera.
+
+User's hate getting prompted for access to powerful devices on their machine and
+they will frequently block the request, or they will ignore it if they don't
+understand the context of which the prompt has been created. It is best practice
+to only ask to access the camera when first needed. Once the user has
+granted access they won't be asked again, however, if they reject access,
+you can't get access again to ask the user for permission.
+
+Warning: Asking for access to the camera on page load will result in most of your users rejecting
+access.
+
+### Use the permissions API to check if you already have access
+
+The `getUserMedia` API provides you with no knowledge of if you already have
+access to the camera. This presents you with a problem, to provide a nice UI
+to get the user to grant you access to the camera, you have to ask for
+access to camera.
+
+This can be solved in some browsers by using the Permission API. The
+`navigator.permission` API allows you to query the state of the ability to
+access specific API's without having to prompt again.
+
+To query if you have access to the user's camera you can pass in
+`{name: 'camera'}` into the query method and it will return either:
+
+- `granted` &mdash; the user has previously given you access to the camera;
+- `prompt` &mdash; the user has not given you access and will be prompted when
+  you call `getUserMedia`;
+- `denied` &mdash; the system or the user has explicitly blocked access to the
+  camera and you won't be able to get access to it.
+
+And you can now check quickly check to see if you need to alter your user
+interface to accommodate the actions that the user needs to take.
+
+```js
+navigator.permissions.query({name: 'camera'}).then(function (result) {
+  if (result.state == 'granted') {
+  } else if (result.state == 'prompt') {
+  } else if (result.state == 'denied') {
+  }
+  result.onchange = function () {};
+});
+```
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/media-session/contexts.jpg b/src/site/content/en/blog/media-session/contexts.jpg
deleted file mode 100644
index bc64b2e4b69..00000000000
Binary files a/src/site/content/en/blog/media-session/contexts.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/media-session/hero.jpg b/src/site/content/en/blog/media-session/hero.jpg
deleted file mode 100644
index 7693751ce48..00000000000
Binary files a/src/site/content/en/blog/media-session/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/media-session/index.md b/src/site/content/en/blog/media-session/index.md
index 16920f45a5e..f117a218476 100644
--- a/src/site/content/en/blog/media-session/index.md
+++ b/src/site/content/en/blog/media-session/index.md
@@ -4,8 +4,9 @@ subhead: How to integrate with hardware media keys, customize media notification
 authors:
   - beaufortfrancois
 date: 2020-03-06
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+updated: 2023-03-08
+hero: image/admin/IhujMvzGa5Mf0aNWYRXW.jpg
+thumbnail: image/admin/Q6CqQNLucogBCxGMsSU2.jpg
 description: |
   Web developers can customize media notifications and respond to media
   related events such as seeking or track changing with the Media Session API.
@@ -13,46 +14,46 @@ tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - media
   - audio
-  - video
+  # - video
+feedback:
+  - api
 ---
 
+{% YouTube 'Ft6diPReUAU' %}
+
 To let users know what's currently playing in their browser and control it
 without returning to the page that launched it, the Media Session API has been
 introduced. It allows web developers to customize this experience through
-metadata in custom media notifications and media events such as playing,
-pausing, and even seeking and track changing. These customizations are available
-in several contexts including desktop media hubs, media notifications on mobile,
-and even on wearable devices. I'll describe these customizations in this
-article.
-
-<figure class="w-figure">
-  <img src="./contexts.jpg" alt="Screenshots of Media Session contexts">
-  <figcaption class="w-figcaption">Media hub on desktop, media notification on mobile, and a wearable device</figcaption>
+metadata in custom media notifications, media events such as playing, pausing,
+seeking, track changing, and video conferencing events such as mute/unmute
+microphone, turnon/turnoff camera, and hang up. These customizations are
+available in several contexts including desktop media hubs, media notifications
+on mobile, and even on wearable devices. I'll describe these customizations in
+this article.
+
+<figure>
+  {% Img src="image/admin/qwTz64KKq4rq7WeA3rlT.jpg", alt="Screenshots of Media Session contexts.", width="800", height="330" %}
+  <figcaption>Media hub on desktop, media notification on mobile, and a wearable device.</figcaption>
 </figure>
 
-## Cross-browser support
-
-At the time of writing, Chrome is the only browser that supports the Media
-Session API both on desktop and mobile. Firefox has partial support for the
-Media Session API on desktop behind a flag, and Samsung Internet also has
-partial support. See [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/MediaSession#Browser_compatibility)
-for up-to-date information.
-
 ## About the Media Session API
 
 The Media session API provides several benefits and capabilities:
 
 - Hardware media keys are supported.
-- Media notifications are customized on mobile, Chrome OS, and paired wearable device.
+- Media notifications are customized on mobile, desktop, and paired wearable device.
 - The [media hub] is available on desktop.
-- Lock screen media controls are available on [Chrome OS] and mobile.
-- Picture-in-Picture window controls are available.
+- Lock screen media controls are available on [ChromeOS][chromeos] and mobile.
+- Picture-in-Picture window controls are available for [audio playback],
+  [video conferencing], and [presenting slides].
 - Assistant integration on mobile is available.
 
+{% BrowserCompat 'api.MediaSession' %}
+
 A few examples will illustrate some of these points.
 
 <b>Example 1:</b> If users press the "next track" media key of their keyboard,
-web developers can handle this user action whether Chrome is in the foreground
+web developers can handle this user action whether the browser is in the foreground
 or the background.
 
 <b>Example 2:</b> If users listen to a podcast on the web while their device
@@ -64,6 +65,10 @@ seconds.
 playback from the media hub on desktop so that web developers have a chance to
 clear their state.
 
+<b>Example 4:</b> If users are on a video call, they can press the "toggle
+microphone" control in the Picture-in-Picture window to stop the website from
+receiving microphone data.
+
 This is all done through two different interfaces: The `MediaSession` interface
 and the `MediaMetadata` interface. The first lets users control whatever's
 playing. The second is how you tell `MediaSession` what needs to be controlled.
@@ -71,16 +76,16 @@ playing. The second is how you tell `MediaSession` what needs to be controlled.
 To illustrate, the image below shows how these interfaces relate to specific
 media controls, in this case a media notification on mobile.
 
-<figure class="w-figure">
-  <img src="./tldr.jpg" alt="Media Session interfaces illustration">
-  <figcaption class="w-figcaption">Anatomy of a media notification on mobile</figcaption>
+<figure>
+  {% Img src="image/admin/eiavbbCE6TlI8osR1tYT.jpg", alt="Media Session interfaces illustration.", width="800", height="353" %}
+  <figcaption>Anatomy of a media notification on mobile.</figcaption>
 </figure>
 
 ## Let users know what's playing
 
 When a website is playing audio or video, users automatically get media
 notifications either in the notification tray on mobile, or the media hub on
-desktop. Chrome does its best to show appropriate information by using the
+desktop. The browser does its best to show appropriate information by using the
 document's title and the largest icon image it can find. With the Media Session
 API, it's possible to customize the media notification with some richer media
 metadata such as the title, artist name, album name, and artwork as shown below.
@@ -99,12 +104,12 @@ if ("mediaSession" in navigator) {
     artist: 'Rick Astley',
     album: 'Whenever You Need Somebody',
     artwork: [
-      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
-      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
-      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
-      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
-      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
-      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
+      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
+      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
+      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
+      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
+      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
     ]
   });
 
@@ -121,8 +126,7 @@ changes to make sure relevant information is shown in the media notification.
 There are a few things to note about the media metadata.
 
 - Notification artwork array supports blob URLs and data URLs.
-- If no artwork is defined and there is an icon image (specified using `<link
-  rel=icon>`) at a desirable size, media notifications will use it.
+- If no artwork is defined and there is an icon image (specified using `<link rel=icon>`) at a desirable size, media notifications will use it.
 - Notification artwork target size in Chrome for Android is `512x512`. For
   low-end devices, it is `256x256`.
 - The `title` attribute of the media HTML element is used in the "Now playing"
@@ -152,6 +156,11 @@ implemented by setting handlers on an appropriate object, an instance of
 buttons from a headset, another remote device, a keyboard, or interact with a
 media notification.
 
+<figure>
+  {% Img src="image/admin/9rN4x5GXdhg4qjC0ZEmk.jpg", alt="Screenshot of a media notification in Windows 10.", width="800", height="450" %}
+  <figcaption>Customized media notification in Windows 10.</figcaption>
+</figure>
+
 Because some media session actions may not be supported, it is recommended to
 use a `try…catch` block when setting them.
 
@@ -165,6 +174,13 @@ const actionHandlers = [
   ['seekbackward',  (details) => { /* ... */ }],
   ['seekforward',   (details) => { /* ... */ }],
   ['seekto',        (details) => { /* ... */ }],
+  /* Video conferencing actions */
+  ['togglemicrophone', () => { /* ... */ }],
+  ['togglecamera',     () => { /* ... */ }],
+  ['hangup',           () => { /* ... */ }],
+  /* Presenting slides actions */
+  ['previousslide', () => { /* ... */ }],
+  ['nextslide',     () => { /* ... */ }],
 ];
 
 for (const [action, handler] of actionHandlers) {
@@ -181,7 +197,7 @@ Unsetting a media session action handler is as easy as setting it to `null`.
 ```js
 try {
   // Unset the "nexttrack" action handler at the end of a playlist.
-  navigator.mediaSession.setActionHandler("nexttrack", null);
+  navigator.mediaSession.setActionHandler('nexttrack', null);
 } catch (error) {
   console.log(`The media session action "nexttrack" is not supported yet.`);
 }
@@ -193,6 +209,16 @@ means that the browser stops doing any default behavior and uses this as a
 signal that the website supports the media action. Hence, media action controls
 won't be shown unless the proper action handler is set.
 
+<figure>
+  {% Img
+    src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/WBZAf1ymhtXInsWumHtw.jpg",
+    alt="Screenshot of the Now Playing widget in macOS Big Sur.",
+    width="800",
+    height="450"
+  %}
+  <figcaption>Now Playing widget in macOS Big Sur.</figcaption>
+</figure>
+
 ### Play / pause
 
 The `"play"` action indicates that the user wants to resume the media playback
@@ -208,16 +234,24 @@ loading for instance. In this case, override this behavior by setting
 the website UI stays in sync with media notification controls.
 
 ```js
-navigator.mediaSession.setActionHandler("play", async () => {
+const video = document.querySelector('video');
+
+navigator.mediaSession.setActionHandler('play', async () => {
   // Resume playback
-  await document.querySelector("video").play();
-  navigator.mediaSession.playbackState = "playing";
+  await video.play();
 });
 
-navigator.mediaSession.setActionHandler("pause", () => {
+navigator.mediaSession.setActionHandler('pause', () => {
   // Pause active playback
-  document.querySelector("video").pause();
-  navigator.mediaSession.playbackState = "paused";
+  video.pause();
+});
+
+video.addEventListener('play', () => {
+  navigator.mediaSession.playbackState = 'playing';
+});
+
+video.addEventListener('pause', () => {
+  navigator.mediaSession.playbackState = 'paused';
 });
 ```
 
@@ -229,7 +263,7 @@ beginning, or move to the previous item in the playlist if the media playback
 has a notion of a playlist.
 
 ```js
-navigator.mediaSession.setActionHandler("previoustrack", () => {
+navigator.mediaSession.setActionHandler('previoustrack', () => {
   // Play previous track.
 });
 ```
@@ -240,7 +274,7 @@ The `"nexttrack"` action indicates that the user wants to move media playback to
 the next item in the playlist if the media playback has a notion of a playlist.
 
 ```js
-navigator.mediaSession.setActionHandler("nexttrack", () => {
+navigator.mediaSession.setActionHandler('nexttrack', () => {
   // Play next track.
 });
 ```
@@ -251,14 +285,14 @@ The `"stop"` action indicates that the user wants to stop the media playback and
 clear the state if appropriate.
 
 ```js
-navigator.mediaSession.setActionHandler("stop", () => {
+navigator.mediaSession.setActionHandler('stop', () => {
   // Stop playback and clear state if appropriate.
 });
 ```
 
 ### Seek backward / forward
 
-The `"seekbackward"` action indicates that the user wants to moves the media
+The `"seekbackward"` action indicates that the user wants to move the media
 playback time backward by a short period while `"seekforward"` indicates a desire
 to move the media playback time forward by a short period. In both cases, a
 short period means a few seconds.
@@ -271,13 +305,13 @@ you should use a sensible time (for example 10-30 seconds).
 const video = document.querySelector('video');
 const defaultSkipTime = 10; /* Time to skip in seconds by default */
 
-navigator.mediaSession.setActionHandler("seekbackward", (details) => {
+navigator.mediaSession.setActionHandler('seekbackward', (details) => {
   const skipTime = details.seekOffset || defaultSkipTime;
   video.currentTime = Math.max(video.currentTime - skipTime, 0);
   // TODO: Update playback state.
 });
 
-navigator.mediaSession.setActionHandler("seekforward", (details) => {
+navigator.mediaSession.setActionHandler('seekforward', (details) => {
   const skipTime = details.seekOffset || defaultSkipTime;
   video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
   // TODO: Update playback state.
@@ -299,8 +333,8 @@ in that sequence.
 ```js
 const video = document.querySelector('video');
 
-navigator.mediaSession.setActionHandler("seekto",(details) => {
-  if (details.fastSeek && "fastSeek" in video) {
+navigator.mediaSession.setActionHandler('seekto', (details) => {
+  if (details.fastSeek && 'fastSeek' in video) {
     // Only use fast seek if supported.
     video.fastSeek(details.seekTime);
     return;
@@ -317,19 +351,23 @@ as setting the position state at an appropriate time as shown below. The
 position state is a combination of the media playback rate, duration, and
 current time.
 
-{% Aside 'gotchas' %}
-The position state is supported on Android as of Chrome 81 and later.
-{% endAside %}
+<figure>
+  {% Img src="image/admin/Rlw13wMoaJrDziraXgUc.jpg", alt="Screenshot of lock screen media controls in ChromeOS.", width="800", height="450" %}
+  <figcaption>Lock screen media controls in ChromeOS.</figcaption>
+</figure>
+
+The duration must be provided and positive. The position must be positive and
+less than the duration. The playback rate must be greater than 0.
 
 ```js
-const video = document.querySelector("video");
+const video = document.querySelector('video');
 
 function updatePositionState() {
-  if ("setPositionState" in navigator.mediaSession) {
+  if ('setPositionState' in navigator.mediaSession) {
     navigator.mediaSession.setPositionState({
       duration: video.duration,
       playbackRate: video.playbackRate,
-      position: video.currentTime
+      position: video.currentTime,
     });
   }
 }
@@ -339,25 +377,25 @@ await video.play();
 updatePositionState();
 
 // When user wants to seek backward, update position.
-navigator.mediaSession.setActionHandler("seekbackward", details => {
+navigator.mediaSession.setActionHandler('seekbackward', (details) => {
   /* ... */
   updatePositionState();
 });
 
 // When user wants to seek forward, update position.
-navigator.mediaSession.setActionHandler("seekforward", details => {
+navigator.mediaSession.setActionHandler('seekforward', (details) => {
   /* ... */
   updatePositionState();
 });
 
 // When user wants to seek to a specific time, update position.
-navigator.mediaSession.setActionHandler("seekto", details => {
+navigator.mediaSession.setActionHandler('seekto', (details) => {
   /* ... */
   updatePositionState();
 });
 
 // When video playback rate changes, update position state.
-video.addEventListener("ratechange", event => {
+video.addEventListener('ratechange', (event) => {
   updatePositionState();
 });
 ```
@@ -369,38 +407,145 @@ Resetting the position state is as easy as setting it to `null`.
 navigator.mediaSession.setPositionState(null);
 ```
 
+## Video conferencing actions {: #video-conferencing-actions }
+
+When the user puts their video call into a Picture-in-Picture window, the
+browser may display controls for the microphone and camera, and for hanging up.
+When the user clicks those, the website handles them through the video
+conferencing actions below. For an example, see the [Video Conferencing sample].
+
+<figure>
+  {% Img
+    src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/fXc7jqc95Oa6sKce7kpZ.jpg",
+    alt="Screenshot of video conferencing controls in a Picture-in-Picture window.",
+    width="748",
+    height="464"
+  %}
+  <figcaption>Video conferencing controls in a Picture-in-Picture window.</figcaption>
+</figure>
+
+{% Aside %}
+At the time of writing, video conferencing actions are available only in
+Chrome&nbsp;92 on desktop.
+{% endAside %}
+
+### Toggle microphone
+
+The `"togglemicrophone"` action indicates that the user wants to mute or unmute
+the microphone. The `setMicrophoneActive(isActive)` method tells the browser
+whether the website currently considers the microphone to be active.
+
+```js
+let isMicrophoneActive = false;
+
+navigator.mediaSession.setActionHandler('togglemicrophone', () => {
+  if (isMicrophoneActive) {
+    // Mute the microphone.
+  } else {
+    // Unmute the microphone.
+  }
+  isMicrophoneActive = !isMicrophoneActive;
+  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
+});
+```
+
+### Toggle camera
+
+The `"togglecamera"` action indicates that the user wants to turn the active
+camera on or off. The `setCameraActive(isActive)` method indicates whether the
+browser considers the website to be active.
+
+```js
+let isCameraActive = false;
+
+navigator.mediaSession.setActionHandler('togglecamera', () => {
+  if (isCameraActive) {
+    // Disable the camera.
+  } else {
+    // Enable the camera.
+  }
+  isCameraActive = !isCameraActive;
+  navigator.mediaSession.setCameraActive(isCameraActive);
+});
+```
+
+### Hang up
+
+The `"hangup"` action indicates that the user wants to end a call.
+
+```js
+navigator.mediaSession.setActionHandler('hangup', () => {
+  // End the call.
+});
+```
+
+## Presenting slides actions {: #presenting-slides-actions }
+
+When the user puts their slides presentation into a Picture-in-Picture window,
+the browser may display controls for navigating through slides. When the user
+clicks those, the website handles them through the Media Session API. For an
+example, see the [Presenting Slides sample].
+
+### Previous slide
+
+The `"previousslide"` action indicates that the user wants to go back to the
+previous slide when presenting slides.
+
+```js
+navigator.mediaSession.setActionHandler('previousslide', () => {
+  // Show previous slide.
+});
+```
+
+{% BrowserCompat 'api.MediaSession.setActionHandler.previousslide_type' %}
+
+### Next slide
+
+The `"nextslide"` action indicates that the user wants to go to the next slide
+when presenting slides.
+
+```js
+navigator.mediaSession.setActionHandler('nextslide', () => {
+  // Show next slide.
+});
+```
+
+{% BrowserCompat 'api.MediaSession.setActionHandler.nextslide_type' %}
+
 ## Samples
 
 Check out some [Media Session samples] featuring [Blender Foundation] and
 [Jan Morgenstern's work].
 
- <figure class="w-figure">
+ <figure>
   <video controls autoplay loop muted poster="https://storage.googleapis.com/webfundamentals-assets/videos/media-hub-desktop-720.jpg">
     <source src="https://storage.googleapis.com/webfundamentals-assets/videos/media-hub-desktop-720.webm" type="video/webm; codecs=vp9">
     <source src="https://storage.googleapis.com/webfundamentals-assets/videos/media-hub-desktop-720.mp4" type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption">
-    A screencast illustrating the Media Session API
+  <figcaption>
+    A screencast illustrating the Media Session API.
   </figcaption>
 </figure>
 
 ## Resources
 
 - Media Session Spec:
-[wicg.github.io/mediasession](https://wicg.github.io/mediasession)
+  [wicg.github.io/mediasession](https://wicg.github.io/mediasession)
 - Spec Issues:
-[github.com/WICG/mediasession/issues](https://github.com/WICG/mediasession/issues)
+  [github.com/WICG/mediasession/issues](https://github.com/WICG/mediasession/issues)
 - Chrome Bugs:
-[crbug.com](https://crbug.com/?q=component:Internals>Media>Session)
+  [crbug.com](https://crbug.com/?q=component:Internals>Media>Session)
 
-<!-- lint disable definition-case -->
 [media hub]: https://blog.google/products/chrome/manage-audio-and-video-in-chrome/
-[Chrome OS]: https://www.blog.google/products/chromebooks/whats-new-december2019/
+[chromeos]: https://www.blog.google/products/chromebooks/whats-new-december2019/
 [at least 5 seconds]: https://chromium.googlesource.com/chromium/src/+/5d8eab739eb23c4fd27ba6a18b0e1afc15182321/media/base/media_content_type.cc#10
-[Cache API]: /web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
-[Media Session samples]: https://googlechrome.github.io/samples/media-session/
-[Web Audio API]: /web/updates/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
-[Blender Foundation]: http://www.blender.org/
-[Jan Morgenstern's work]: http://www.wavemage.com/category/music/
-[PiP window controls]: https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture#show_canvas_element_in_picture-in-picture_window
-<!-- lint enable definition-case -->
+[cache api]: /web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
+[media session samples]: https://googlechrome.github.io/samples/media-session/
+[web audio api]: /web/updates/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
+[blender foundation]: http://www.blender.org/
+[jan morgenstern's work]: http://www.wavemage.com/category/music/
+[audio playback]: https://developer.chrome.com/blog/watch-video-using-picture-in-picture/#show-canvas-element-in-picture-in-picture-window
+[video conferencing]: #video-conferencing-actions
+[video conferencing sample]: https://googlechrome.github.io/samples/media-session/video-conferencing.html
+[presenting slides sample]: https://googlechrome.github.io/samples/media-session/slides.html
+[presenting slides]: #presenting-slides-actions
diff --git a/src/site/content/en/blog/media-session/thumbnail.jpg b/src/site/content/en/blog/media-session/thumbnail.jpg
deleted file mode 100644
index 808a7480bb4..00000000000
Binary files a/src/site/content/en/blog/media-session/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/media-session/tldr.jpg b/src/site/content/en/blog/media-session/tldr.jpg
deleted file mode 100644
index f0debe466c6..00000000000
Binary files a/src/site/content/en/blog/media-session/tldr.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/merry-pixmas/index.md b/src/site/content/en/blog/merry-pixmas/index.md
new file mode 100644
index 00000000000..5d15fe46723
--- /dev/null
+++ b/src/site/content/en/blog/merry-pixmas/index.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: Merry Pixmas
+date: 2015-03-27
+updated: 2015-03-27
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lPPoed8IvWxrkP7y7K6J.png", alt="Merry Pixmas screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[Merry Pixmas](http://merrypixmas.com): Christmas fun with 3D CSS Transforms.
+
+### What we like?
+
+A nice Christmas-themed demo that works well across desktop and mobile. It
+even comes with brand new theme color support, and a web manifest for a home
+screen experience that launches full screen.
+
+Pro tip: Shake your phone to make it snow!
+
+### Possible Improvements
+
+Even though I realize it is a demo, a few specificed cache headers on assets
+and non-render-blocking JavaScript could have improved the perceived load time
+quite a bit.
+
+## Q & A with Jim Savage
+
+### Why the web?
+
+At [Tokyo](https://tokyo.uk/), we’ve long been advocates of the responsive
+and mobile web, rather than native for the sake of it. Pixmas was a result of
+HTML5 & CSS3 experimentation during down time in-between projects. We are
+always trying out new things to keep our knowledge current; so naturally,
+for our team of front-end developers, any research would have been web focused
+as opposed to a native platform.
+
+As browsers continue to mature we are seeing more native-like functionality;
+functions that were only ever available through native development such as
+geolocation, camera access, local database storage etc which all contribute to
+an overall native-like experience for the user but with the benefits of
+cross-platform and fast iteration development. Of course native development
+still has its advantages and when tackling a new project, a lot of
+consideration is taken for both web & native options. It probably sounds
+obvious, but for our clients, it’s important we recommend the best platform
+for the job, rather than shoehorn every project into whichever we prefer
+to code for.
+
+### What worked really well during development?
+
+I think with Pixmas the main focus was around 3D Transforms and how far we
+could really push CSS, so the pixelated illustrative style worked really well
+in the browser, and as any front-end developer will tell you a browser's
+natural behaviour is square friendly! So basing the overall style and 3D
+math around square based problems worked really well. Building a cube with 3D
+transforms & HTML is much easier than any other primitive shape. However
+the interaction and animations took us a little trial and error to smooth out.
+
+What surprised us most was the smoothness and browser performance of the 3D
+on mobile platforms, particularly in the lesser known Android devices.
+
+### If you could have any API to improve your app, what would it be?
+
+If we were to write Pixmas all over again we’d probably use a WebGL based API.
+While it was fun manipulating HTML DOM elements in 3D via CSS, the real power
+for web based 3D has to be a dedicated hardware-accelerated technology like
+WebGL. CSS 3D is fine for basic webpage effects and transitions but we
+definitely hit a limitation in browser performance when coding Pixmas.
+
+Google has some great WebGL projects over at
+[Chrome Experiments](https://www.chromeexperiments.com/webgl).
diff --git a/src/site/content/en/blog/migrate-to-ua-ch/index.md b/src/site/content/en/blog/migrate-to-ua-ch/index.md
new file mode 100644
index 00000000000..4bf2f4f988b
--- /dev/null
+++ b/src/site/content/en/blog/migrate-to-ua-ch/index.md
@@ -0,0 +1,392 @@
+---
+layout: post
+title: Migrate to User-Agent Client Hints
+subhead: |
+  Strategies to migrate your site from relying on the user-agent string to the
+  new User-Agent Client Hints.
+authors:
+  - rowan_m
+date: 2021-05-19
+description: |
+  Strategies to migrate your site from relying on the user-agent string to the  new User-Agent Client Hints.
+hero: image/VWw0b3pM7jdugTkwI6Y81n6f5Yc2/uHTVU6MzCWYVPzLposSy.jpg
+alt: A brightly lit route through a cold, dark landscape. Follow that path!
+tags:
+  - blog
+  - privacy
+---
+
+The [User-Agent
+string](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) is
+a significant [passive fingerprinting
+surface](https://w3c.github.io/fingerprinting-guidance/#passive) in browsers, as
+well as being difficult to process. However, there are all kinds of valid
+reasons for collecting and processing user-agent data, so what's needed is a
+path to a better solution. User-Agent Client Hints provide both an explicit way
+to declare your need for user-agent data and methods to return the data in an
+easy-to-use format.
+
+{% Aside %} For more information on Client Hints and expanding them with
+user-agent data, read the [introductory article on User-Agent Client
+Hints](/user-agent-client-hints). {% endAside %}
+
+This article will take you through auditing your access to user-agent data and
+migrating user-agent string usage to User-Agent Client Hints.
+
+## Audit collection and use of user-agent data
+
+As with any form of data collection, you should always understand **why** you
+are collecting it. The first step, regardless of whether or not you will be
+taking any action, is to understand where and why you are using user-agent data.
+
+If you don't know if or where user-agent data is being used, consider searching
+your front-end code for use of `navigator.userAgent` and your back-end code for
+use of the `User-Agent` HTTP header. You should also check your front-end code
+for use of already deprecated features, such as `navigator.platform` and
+`navigator.appVersion`.
+
+From a functional point of view, think about anywhere in your code where you are
+recording or processing:
+* Browser name or version
+* Operating system name or version
+* Device make or model
+* CPU type, architecture, or bitness (for example, 64-bit)
+
+It's also likely that you may be using a third-party library or service to
+process the user-agent. In this case, check to see if they are updating to
+support User-Agent Client Hints.
+
+### Are you only using basic user-agent data?
+
+The default set of User-Agent Client Hints includes:
+* `Sec-CH-UA`: browser name and major/significant version
+* `Sec-CH-UA-Mobile`: boolean value indicating a mobile device
+* `Sec-CH-UA-Platform`: operating system name
+  * _Note that this has been updated in the spec and will be [reflected in
+    Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/dafizBGwWMw/m/72l-1zm6AAAJ)
+    and other Chromium-based browsers shortly._
+
+The reduced version of the user-agent string that is proposed will also retain
+this basic information in a backwards-compatible way. For example, instead of
+`Chrome/90.0.4430.85` the string would include `Chrome/90.0.0.0`.
+
+If you are only checking the user-agent string for browser name, major version,
+or operating system, then your code will continue to work though you are likely
+to see deprecation warnings.
+
+While you can and should migrate to User-Agent Client Hints, you may have legacy
+code or resource constraints that prevent this. The reduction of information in
+the user-agent string in this backwards-compatible way is intended to ensure
+that while existing code will receive less detailed information, it should still
+retain basic functionality.
+
+## Strategy: On-demand client-side JavaScript API
+
+If you are currently using `navigator.userAgent` you should transition to
+preferring `navigator.userAgentData` before falling back to parsing the
+user-agent string.
+
+```javascript
+if (navigator.userAgentData) {
+  // use new hints
+} else {
+  // fall back to user-agent string parsing
+}
+```
+
+If you are checking for mobile or desktop, use the boolean `mobile` value:
+
+```javascript
+const isMobile = navigator.userAgentData.mobile;
+```
+
+`userAgentData.brands` is an array of objects with `brand` and `version`
+properties where the browser is able to list its compatibility with those
+brands. You can access it directly as an array or you may want to use a
+`some()` call to check if a specific entry is present:
+
+```javascript
+function isCompatible(item) {
+  // In real life you most likely have more complex rules here
+  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
+}
+if (navigator.userAgentData.brands.some(isCompatible)) {
+  // browser reports as compatible
+}
+```
+
+{% Aside 'gotchas' %} `userAgentData.brands` will contain varying values in a
+varying order, so don't rely on something appearing at a certain index. {%
+endAside %}
+
+If you need one of the more detailed, high-entropy user-agent values, you will
+need to specify it and check for the result in the returned `Promise`:
+
+```javascript
+navigator.userAgentData.getHighEntropyValues(['model'])
+  .then(ua => {
+    // requested hints available as attributes
+    const model = ua.model
+  });
+
+```
+
+You may also want to use this strategy if you would like to move from
+server-side processing to client-side processing. The JavaScript API does not
+require access to HTTP request headers, so user-agent values can be requested at
+any point.
+
+{% Aside %} Try the [User-Agent Client Hints JavaScript API
+demo](https://user-agent-client-hints.glitch.me/javascript.html). {% endAside %}
+
+## Strategy: Static server-side header
+
+If you are using the `User-Agent` request header on the server and your needs
+for that data are relatively consistent across your entire site, then you can
+specify the desired client hints as a static set in your responses. This is a
+relatively simple approach since you generally only need to configure it in one
+location. For example, it may be in your web server configuration if you already
+add headers there, your hosting configuration, or top-level configuration of the
+framework or platform you use for your site.
+
+Consider this strategy if you are transforming or customizing the responses
+served based on the user-agent data.
+
+{% Aside %} You can also consider migrating to the [On-demand client-side
+JavaScript API](#strategy-on-demand-client-side-javascript-api) strategy
+instead of sending additional headers. {% endAside %}
+
+Browsers or other clients may choose to supply different default hints, so it's
+good practice to specify everything you need, even if it's generally provided by
+default.
+
+For example, the current defaults for Chrome would be represented as:
+
+⬇️ Response headers
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+If you also wanted to receive the device model in responses, then you would
+send:
+
+⬇️ Response headers
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+{% Aside 'gotchas' %} Ordering is not important, the example is listed
+alphabetically. {% endAside %}
+
+When processing this on the server-side you should first check if the desired
+`Sec-CH-UA` header has been sent and then fallback to the `User-Agent` header
+parsing if it is not available.
+
+{% Aside %} Try the [User-Agent Client Hints HTTP header
+demo](https://user-agent-client-hints.glitch.me/). {% endAside %}
+
+
+## Strategy: Delegating hints to cross-origin requests
+
+If you are requesting cross-origin or cross-site subresources that require
+User-Agent Client Hints to be sent on their requests then you will need to
+explicitly specify the desired hints using a Permissions Policy.
+
+{% Aside %} [Permissions Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) is
+the new form of Feature Policy {%  endAside %}
+
+For example, let's say that `https://blog.site` hosts resources on
+`https://cdn.site` which can return resources optimized for a specific device.
+`https://blog.site` can ask for the `Sec-CH-UA-Model` hint, but needs to
+explicitly delegate it to `https://cdn.site` using the `Permissions-Policy`
+header. The list of policy-controlled hints is available in the [Clients Hints
+Infrastructure
+draft](https://wicg.github.io/client-hints-infrastructure/#policy-controlled-client-hints-features)
+
+⬇️ Response from `blog.site` delegating the hint
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Permissions-Policy: ch-ua-model=(self "https://cdn.site")
+```
+
+⬆️ Request to subresources on `cdn.site` include the delegated hint
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+You can specify multiple hints for multiple origins, and not just from the `ch-ua` range:
+
+⬇️ Response from `blog.site` delegating multiple hints to multiple origins
+
+```text
+Accept-CH: Sec-CH-UA-Model, DPR
+Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
+                    ch-dpr=(self "https://cdn.site" "https://img.site")
+```
+
+{% Aside 'gotchas' %} You do **not** need to include each delegated hint in
+`Accept-CH`, but you **do** need to include `self` for each hint, even if you
+are not using it directly at the top-level. {% endAside %}
+
+## Strategy: Delegating hints to iframes
+
+Cross-origin iframes work in a similar way to cross-origin resources, but you
+specify the hints you would like to delegate in the `allow` attribute.
+
+⬇️ Response from `blog.site`
+
+```text
+Accept-CH: Sec-CH-UA-Model
+```
+
+↪️ HTML for `blog.site`
+
+```html
+<iframe src="https://widget.site" allow="ch-ua-model"></iframe>
+```
+
+⬆️ Request to `widget.site`
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+The `allow` attribute in the iframe will override any `Accept-CH` header that
+`widget.site` may send itself, so make sure you've specified everything the
+iframe'd site will need.
+
+## Strategy: Dynamic server-side hints
+
+If you have specific parts of the user journey where you need a larger selection
+of hints than across the rest of the site, you may choose to request those hints
+on demand rather than statically across the entire site. This is more complex to
+manage, but if you already set different headers on a per route basis it may be
+feasible.
+
+The important thing to remember here is that each instance of the `Accept-CH`
+header will effectively overwrite the existing set. So, if you are dynamically
+setting the header then each page must request the full set of hints required.
+
+For example, you may have one section on your site where you want to provide
+icons and controls that match the user's operating system. For this, you may
+want to additionally pull in `Sec-CH-UA-Platform-Version` to serve appropriate
+subresources.
+
+⬇️ Response headers for `/blog`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+⬇️ Response headers for `/app`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA
+```
+
+## Strategy: Server-side hints required on first request
+
+There may be cases where you require more than the default set of hints on the
+very first request, however this is likely to be rare so make sure you've
+reviewed the reasoning.
+
+The first request really means the very first top-level request for that origin
+sent in that browsing session. The default set of hints includes the browser
+name with major version, the platform, and the mobile indicator. So the question
+to ask here is, do you require extended data on the initial page load?
+
+{% Aside %} Also consider making use of the [On-demand client-side JavaScript
+API strategy](#strategy-on-demand-client-side-javascript-api) to alter content
+within the page as opposed to server-side. {% endAside %}
+
+For additional hints on the first request there are two options. First, you can
+make use of the `Critical-CH` header. This takes the same format as `Accept-CH`
+but tells the browser that it should immediately retry the request if the first
+one was sent without the critical hint.
+
+⬆️ Initial request
+
+```text
+[With default headers]
+```
+
+⬇️ Response headers
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Critical-CH: Sec-CH-UA-Model
+```
+
+🔃 Browser retries initial request with the extra header
+
+```text
+[With default headers + …]
+Sec-CH-UA-Model: Pixel 5
+```
+
+This will incur the overhead of the retry on the very first request, but the
+implementation cost is relatively low. Send the extra header and the browser
+will do the rest.
+
+{% Aside 'gotchas' %} Any `Critical-CH` values must be a subset of the values in
+`Accept-CH`. `Accept-CH` is all the values you would like for the page,
+`Critical-CH` is the subset of those values you **must** have or you cannot
+load the page properly. {% endAside %}
+
+For situations where you require really do require additional hints on the very
+first page load, the [Client Hints Reliability
+proposal](https://github.com/WICG/client-hints-infrastructure/blob/main/reliability.md#connection-level-settings)
+is laying out a route to specify hints in the connection-level settings. This
+makes use of the [Application-Layer Protocol
+Settings(ALPS)](https://tools.ietf.org/html/draft-vvv-tls-alps) extension to TLS
+1.3 to enable this early passing of hints on HTTP/2 and HTTP/3 connections. This
+is still at a very early stage, but if you actively manage your own TLS and
+connection settings then this is an ideal time to contribute.
+
+## Strategy: Legacy support
+
+You may have legacy or third-party code on your site that depends on
+`navigator.userAgent`, including portions of the user-agent string that will be
+reduced. Long-term you should plan to move to the equivalent
+`navigator.userAgentData` calls, but there is an interim solution.
+
+{% Aside 'warning' %} This is not recommended and not supported in any way. This
+solution is included for completeness but if you spend any time attempting to
+fix bugs in it, that time would be better spent doing the actual migration. {%
+endAside %}
+
+[UA-CH retrofill](https://github.com/GoogleChromeLabs/uach-retrofill) is a small
+library that allows you to overwrite `navigator.userAgent` with a new string
+built from the requested `navigator.userAgentData` values.
+
+For example, this code will generate a user-agent string that additionally
+includes the "model" hint:
+
+```javascript
+import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
+overrideUserAgentUsingClientHints(['model'])
+  .then(() => { console.log(navigator.userAgent); });
+```
+
+The resulting string would show the `Pixel 5` model, but still shows the reduced
+`92.0.0.0` as the `uaFullVersion` hint was not requested:
+
+```text
+Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36
+```
+
+## Further support
+
+If these strategies do not cover your use case, please start a [Discussion in
+privacy-sandbox-dev-support
+repo](https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/discussions)
+and we can explore your issue together.
+
+_Photo by [Ricardo
+Rocha](https://unsplash.com/@rcrazy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+on [Unsplash](https://unsplash.com/photos/nj1bqRzClq8)_
+
diff --git a/src/site/content/en/blog/milliseconds-make-millions/hero.png b/src/site/content/en/blog/milliseconds-make-millions/hero.png
deleted file mode 100644
index ecf17b607aa..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/milliseconds-make-millions/index.md b/src/site/content/en/blog/milliseconds-make-millions/index.md
index 4d652179521..a23df94326a 100644
--- a/src/site/content/en/blog/milliseconds-make-millions/index.md
+++ b/src/site/content/en/blog/milliseconds-make-millions/index.md
@@ -10,7 +10,7 @@ authors:
   - olgademidova
 scheduled: true
 date: 2020-06-24
-hero: hero.png
+hero: image/admin/Ml6J6Ljjj2EjsbfSDFUt.png
 alt: An illustration of a person using a phone.
 tags:
   - blog
@@ -32,24 +32,22 @@ expectations and increasing use of smartphones are amplifying the need for
 mobile speed. The competitive gap will widen between brands who provide great
 mobile experiences and those who don't.
 
-<img src="summary.jpg"
-     alt="A 0.1 second improvement of mobile site speed increases conversion rates
-          by 8.4% for retail sites and 10.1% for travel sites.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qPLJXSQDlGAKJXoww9ha.jpg", alt="A 0.1 second improvement of mobile site speed increases conversion rates by 8.4% for retail sites and 10.1% for travel sites.", width="800", height="391" %}
 
 ## Summary of impact by vertical
 
 All of the improvements below were observed after a 0.1 improvement in 4
-metrics: [First Meaningful Paint](/first-meaningful-paint/),
+metrics: [First Meaningful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/),
 [Estimated Input Latency](/estimated-input-latency/), Observed
 Load ([Avg. Page Load Time](https://support.google.com/analytics/answer/2383341)
 in Google Analytics), and Max Server Latency ([Time To First
-Byte](/time-to-first-byte/)).
+Byte](/ttfb/)).
 Every page across the user journey had to improve each of these metrics by 0.1
 seconds in order for these positive impacts to be observed.
 
-{% Aside %}  
+{% Aside %}
 First Meaningful Paint is now deprecated. Use [Largest Contentful
-Paint](/lcp/) instead.  
+Paint](/lcp/) instead.
 {% endAside %}
 
 ### Retail
@@ -62,11 +60,7 @@ almost every step of the mobile journey. In particular, there was an increase of
 Product Details Page to Add To Basket Page. Retail consumers also spent 9.2%
 more, a dramatic uplift.
 
-<img src="retail.jpg"
-     alt="Detailed description of how progression rates were affected for retail sites.
-          Homepage to Product Listing page: -0.5%. Product Listing page to Product Details page: 3.2%.
-          Product Details page to Add To Basket page: 9.1%. Add To Basket page to Basket page: 0.1%. Basket page to
-          Checkout page: 3.9%. Checkout to Order page: 4.7%.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/b34phnJ55KvnWakk9HST.jpg", alt="Detailed description of how progression rates were affected for retail sites. Homepage to Product Listing page: -0.5%. Product Listing page to Product Details page: 3.2%. Product Details page to Add To Basket page: 9.1%. Add To Basket page to Basket page: 0.1%. Basket page to Checkout page: 3.9%. Checkout to Order page: 4.7%.", width="800", height="437" %}
 
 ### Luxury
 
@@ -78,19 +72,14 @@ significant 40.1% increase in users moving from Product Detail Page to Add To
 Basket page. Longer sessions were also recorded through the entire browsing
 journey.
 
-<img src="luxury.jpg"
-     alt="Detailed description of how progression rates were affected for luxury sites.
-          Homepage to Product Listing page: 4.0%. Product Listing page to 
-          Product Details page: 15.8%. Product Details page to Add To Basket: 40.1%.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PjGOuJLL0ez9oOFzjBxt.jpg", alt="Detailed description of how progression rates were affected for luxury sites. Homepage to Product Listing page: 4.0%. Product Listing page to Product Details page: 15.8%. Product Details page to Add To Basket: 40.", width="800", height="437" %}
 
 ### Travel
 
 Travel sites saw a 2.2% increase in check-out completion and a 10% improvement
 in booking rates.
 
-<img src="travel.jpg"
-     alt="Detailed description of how progression rates were affected for travel sites.
-          Form Step 1 page to Form Step 2 page: 2.0%. Form Step 2 page to Form Submission page: 2.2%.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GXu5tb0A3KD1mX78vOQE.jpg", alt="Detailed description of how progression rates were affected for travel sites. Form Step 1 page to Form Step 2 page: 2.0%. Form Step 2 page to Form Submission page: 2.2%.", width="800", height="437" %}
 
 ### Lead generation
 
@@ -98,9 +87,7 @@ Lead generation sites also saw a positive impact across the board, with the
 highest impact being a 21.6% improvement in the number of users that progressed
 to the Form Submission Page. A 7% increase in page views was also recorded.
 
-<img src="lead-gen.jpg"
-     alt="Detailed description of how progression rates were affected for lead generation sites.
-          Homepage to Form Step 1 page: 5.5%. Form Step 1 page to Submission page: 21.6%.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/agnvU71uKxg9xDcXnzlP.jpg", alt="Detailed description of how progression rates were affected for lead generation sites.  Homepage to Form Step 1 page: 5.5%. Form Step 1 page to Submission page: 21.6%.", width="800", height="437" %}
 
 ## About the study
 
@@ -112,8 +99,8 @@ The tracking and analytics setups of each site was rigorously audited. No UX
 redesigns occurred on any of the sites during the duration of the study. Mobile
 load times were monitored hour-by-hour for 30 days at the end of 2019. The
 results were consolidated in real-time against a range of typical
-revenue-related metrics drawn from each brand's analytics tool. 
+revenue-related metrics drawn from each brand's analytics tool.
 
 For more information, read the full [Milliseconds Make Millions][report] report.
 
-[report]: https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html
+[report]: https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
diff --git a/src/site/content/en/blog/milliseconds-make-millions/lead-gen.jpg b/src/site/content/en/blog/milliseconds-make-millions/lead-gen.jpg
deleted file mode 100644
index 90e5c4a67ec..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/lead-gen.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/milliseconds-make-millions/luxury.jpg b/src/site/content/en/blog/milliseconds-make-millions/luxury.jpg
deleted file mode 100644
index af4183d5452..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/luxury.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/milliseconds-make-millions/retail.jpg b/src/site/content/en/blog/milliseconds-make-millions/retail.jpg
deleted file mode 100644
index 7c7d7450930..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/retail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/milliseconds-make-millions/summary.jpg b/src/site/content/en/blog/milliseconds-make-millions/summary.jpg
deleted file mode 100644
index f48ad8635bb..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/summary.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/milliseconds-make-millions/travel.jpg b/src/site/content/en/blog/milliseconds-make-millions/travel.jpg
deleted file mode 100644
index 68a386381d9..00000000000
Binary files a/src/site/content/en/blog/milliseconds-make-millions/travel.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/min-max-clamp/index.md b/src/site/content/en/blog/min-max-clamp/index.md
new file mode 100644
index 00000000000..52ad53098b8
--- /dev/null
+++ b/src/site/content/en/blog/min-max-clamp/index.md
@@ -0,0 +1,251 @@
+---
+title: 'min(), max(), and clamp(): three logical CSS functions to use today'
+subhead: Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.
+authors:
+  - una
+date: 2020-10-14
+updated: 2022-07-25
+hero: image/admin/aVL3BEXD3AF9fFzPGKMf.jpg
+alt: Set of tools on a desk.
+description: Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - css
+  - layout
+feedback:
+  - api
+---
+
+With responsive design evolving and becoming increasingly nuanced, CSS itself is
+constantly evolving and providing authors increased control. The
+[`min()`](https://developer.mozilla.org/docs/Web/CSS/min),
+[`max()`](https://developer.mozilla.org/docs/Web/CSS/max), and
+[`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp) functions,
+now supported in all modern browsers, are among the latest tools in making
+authoring websites and apps more dynamic and responsive.
+
+When it comes to flexible and fluid typography, controlled element resizing, and
+maintaining proper spacing, `min()`, `max()`, and `clamp()` can help.
+
+## Background
+
+<blockquote>
+  <p>The math functions, <code>calc()</code>, <code>min()</code>, <code>max()</code>, and <code>clamp()</code> allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values</p>
+  <cite><a href="https://www.w3.org/TR/css-values-4/#calc-notation">CSS Values And Units Level 4</a></cite>
+</blockquote>
+
+## Browser support
+
+### `min()`
+
+{% BrowserCompat 'css.types.min' %}
+
+### `max()`
+
+{% BrowserCompat 'css.types.max' %}
+
+### `clamp()`
+
+{% BrowserCompat 'css.types.clamp' %}
+
+## Usage
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-demo.mp4">
+  </video>
+  <figcaption>
+    Showing how the min() function selects a value based on a list of options and its parent. <a href="https://codepen.io/una/pen/rNeGNVL">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+You can use `min()`, `max()`, and `clamp()` on the right hand side of any CSS
+expression where it would make sense. For `min()` and `max()`, you provide an
+argument list of values, and the browser determines which one is either the
+smallest or largest, respectively. For example, in the case of: `min(1rem, 50%, 10vw)`, the browser calculates which of these relative units is the smallest,
+and uses that value as the actual value.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-demo.mp4">
+  </video>
+  <figcaption>
+    Showing how the max() function selects a value based on a list of options and its parent. <a href="https://codepen.io/una/pen/RwaZXqR">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+The `max()` function selects the largest value from a list of comma-separated
+expressions.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-demo.mp4">
+  </video>
+  <figcaption>
+    Showing how the clamp() function selects a value based on a list of options and its parent. <a href="https://codepen.io/una/pen/bGpoGdJ">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+To use `clamp()` enter three values: a minimum value, ideal value (from which to
+calculate), and maximum value.
+
+Any of these functions can be used anywhere a `<length>`, `<frequency>`,
+`<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed. You
+can use these on their own (i.e. `font-size: max(0.5vw, 50%, 2rem)`), in
+conjunction with `calc()` (i.e. `font-size: max(calc(0.5vw - 1em), 2rem)`), or
+composed (i.e. `font-size: max(min(0.5vw, 1em), 2rem)`).
+
+{% Aside %} When using a calculation inside of a `min()`, `max()`, or `clamp()`
+function, you can remove the call to `calc()`. For example, writing `font-size: max(calc(0.5vw - 1em), 2rem)` would be the same as `font-size: max(0.5vw - 1em, 2rem)`. {% endAside %}
+
+To recap:
+
+- `min(<value-list>)`: selects the smallest (most negative) value from a list of
+  comma-separated expressions
+- `max(<value-list>)`: selects the largest (most positive) value from a list of
+  comma-separated expressions
+- `clamp(<min>, <ideal>, <max>)`: clamps a value between an upper and lower
+  bound, based on a set ideal value
+
+Let's take a look at some examples.
+
+## The perfect width
+
+According to [The Elements of Typographic
+Style](http://webtypography.net/2.1.2#:~:text=%E2%80%9CAnything%20from%2045%20to%2075,is%2040%20to%2050%20characters.%E2%80%9D)
+by Robert Bringhurst, "anything from 45 to 75 characters is widely regarded as a
+satisfactory length of line for a single-column page set in a serifed text face
+in a text size."
+
+To ensure that your text blocks are not narrower than 45 characters or wider
+than 75 characters, use `clamp()` and the `ch` (0-width [character advance](https://developer.mozilla.org/docs/Web/CSS/length))
+unit:
+
+```css
+p {
+  width: clamp(45ch, 50%, 75ch);
+}
+```
+
+This allows for the browser to determine the width of the paragraph. It will set
+the width to 50%, unless 50% is smaller than `45ch`, at which point `45ch` will
+be selected, and visa versa for if 50% is wider than `75ch`. In this demo, the
+card itself is getting clamped:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-width.mp4">
+  </video>
+  <figcaption>
+    Using the clamp() function to limit a minimum and maximum width. <a href="https://codepen.io/una/pen/QWyLxaL">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+You could break this up with just the `min()` or `max()` function. If you want
+the element to always be at `50%` width, and not exceed `75ch` in width (i.e. on
+larger screens), write: `width: min(75ch, 50%);`. This essentially sets a "max"
+size by using the `min()` function.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-width.mp4">
+  </video>
+  <figcaption>
+    Using the min() function to set a maximum width.
+  </figcaption>
+</figure>
+
+By the same token, you can ensure a minimum size for legible text using the
+`max()` function. This would look like: `width: max(45ch, 50%);`. Here, the
+browser selects whichever is larger, `45ch` or `50%`, meaning the element must
+be at _least_ `45ch` or larger.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-width.mp4">
+  </video>
+  <figcaption>
+    Using the max() function to set a minimum width.
+  </figcaption>
+</figure>
+
+## Padding management
+
+Using the same concept as above, where the `min()` function can set a "max"
+value and `max()` sets a "min" value, you can use `max()` to set a minimum
+padding size. This example comes from [CSS
+Tricks](https://css-tricks.com/using-max-for-an-inner-element-max-width/), where
+reader Caluã de Lacerda Pataca shared this idea: The idea is to enable an
+element to have additional padding at larger screen sizes, but maintain a
+minimum padding at smaller screen sizes, particularly on the inline padding. To
+achieve this, use `calc()` and subtract the minimum padding from either side:
+`calc((100vw - var(--contentWidth)) / 2)`, _or_ use max: `max(2rem, 50vw - var(--contentWidth) / 2)`. All together it looks like:
+
+```css
+footer {
+  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-padding.mp4">
+  </video>
+  <figcaption>
+    Setting a minimum padding for a component using the max() function. <a href="https://codepen.io/chriscoyier/pen/qBZqNKa">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+## Fluid typography
+
+In order to enable [fluid
+typography](https://www.smashingmagazine.com/2016/05/fluid-typography/), [Mike
+Riethmeuller](https://twitter.com/mikeriethmuller) popularized a technique that
+uses the `clamp()` function to set a minimum font size, maximum font size, and
+allow for scaling from the min to the max.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/fliud-type.mp4">
+  </video>
+  <figcaption>
+    Creating fluid typography with clamp(). <a href="https://codepen.io/una/pen/ExyYXaN">See Demo on Codepen.</a>
+  </figcaption>
+</figure>
+
+With `clamp()`, you can write this more clearly. Rather than requiring a complex
+string, the browser can do the work for you. Set the minimum acceptable font
+size (for example, `1.5rem` for a title, maximum size (i.e. `3rem`) and ideal
+size of `5vw`.
+
+Now, we get typography that scales with the viewport width of the page until it
+reaches the limiting minimum and maximum values, in a much more succinct line of
+code:
+
+```css
+p {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+{% Aside 'warning' %}
+Limiting how large text can get with `max()` or `clamp()` can cause a WCAG failure
+under [1.4.4 Resize text (AA)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text)
+, because a user may be unable to scale the text to 200% of its original size.
+Be certain to [test the results with zoom](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html).
+{% endAside %}
+
+## Conclusion
+
+The CSS math functions, `min()`, `max()`, and `clamp()` are very powerful, well
+supported, and could be just what you're looking for to help you build
+responsive UIs. For more resources, check out:
+
+- [CSS Values and Units on
+  MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [CSS Values and Units Level 4 Spec](https://www.w3.org/TR/css-values-4/)
+- [CSS Tricks Article on Inner-Element Width](https://css-tricks.com/using-max-for-an-inner-element-max-width/)
+- [min(), max(), clamp() Overview by Ahmad Shadeed](https://ishadeed.com/article/css-min-max-clamp/)
+
+Cover image from [@yer_a_wizard](https://unsplash.com/@yer_a_wizard) on
+Unsplash.
diff --git a/src/site/content/en/blog/mishipay/index.md b/src/site/content/en/blog/mishipay/index.md
new file mode 100644
index 00000000000..f627fce2b90
--- /dev/null
+++ b/src/site/content/en/blog/mishipay/index.md
@@ -0,0 +1,352 @@
+---
+title: MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing
+subhead: Learn how switching to PWA helped MishiPay's business.
+authors:
+  - nikilmathew
+  - thomassteiner
+description: Learn how MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing.
+date: 2022-03-28
+updated: 2022-03-30
+tags:
+  - blog
+  - capabilities
+  - case-study
+  - progressive-web-apps
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/CZo4R87iOBYiRpIq6NcP.jpg
+alt: MishiPay company logo over crowded street.
+---
+
+MishiPay empowers shoppers to scan and pay for their shopping with their smartphones, rather than
+wasting time queuing at the checkout. With MishiPay's [Scan & Go](https://mishipay.com/) technology,
+shoppers can use their own phone to scan the barcode on items and pay for them, then simply leave
+the store. [Studies](https://www.adyen.com/en_GB/landing/online/uk/2019/bnb/report) reveal that
+in-store queuing costs the global retail sector about $200 billion annually.
+
+Our technology relies on device hardware capabilities such as GPS sensors and cameras that allow
+users to locate MishiPay-enabled stores, scan item barcodes within the physical store, and then pay
+using the digital payment method of their choice. The initial versions of our Scan & Go technology
+were platform-specific iOS and Android applications, and early adopters loved the technology. Read
+on to learn how switching to a PWA increased transactions by 10 times and saved 2.5 years of
+queuing!
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">
+      10<sub>×</sub>
+    </p>
+    <p>Increased transactions</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      2.5 years
+   </p>
+    <p>Queuing saved</p>
+  </div>
+</ul>
+
+## Challenge
+
+Users find our technology extremely helpful when waiting in a queue or check-out line, as it allows
+them to skip the queue and have a smooth in-store experience. But the hassle of downloading an
+Android or iOS application made users not choose our technology despite the value. It was a growing
+challenge for MishiPay, and we needed to increase user adoption with a lower barrier of entry.
+
+## Solution
+
+Our efforts at building and launching the PWA helped us remove the installation hassle and
+encouraged new users to try our technology inside a physical store, skip the queue, and have a
+seamless shopping experience. Since the launch, we have seen a massive spike in user adoption with
+our PWA compared to our platform-specific applications.
+
+<figure>
+  {% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/jtJZ418n11SOtHLTsOht.mp4", autoplay=true, muted=true, playsinline=true, loop=true %}
+  <figcaption>
+    Side-by-side comparison of directly launching the PWA (left, faster) vs. installing and launching the Android app (right, slower).
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/I5FMltbcuDHqgqEQMyqA.png", alt="Transactions by platform. ¡OS: 16397 (3.98%). Android: 13769 (3.34%). Web: 382184 (92.68%).", width="300", height="415" %}
+  <figcaption>
+    The majority of all transactions happen on the web.
+  </figcaption>
+</figure>
+
+## Technical deep-dive
+
+### Locating MishiPay enabled stores
+
+To enable this feature, we rely on the
+[`getCurrentPosition()`](https://developer.mozilla.org/docs/Web/API/Geolocation/getCurrentPosition)
+API along with an IP-based fallback solution.
+
+```js
+const geoOptions = {
+  timeout: 10 * 1000,
+  enableHighAccuracy: true,
+  maximumAge: 0,
+};
+
+window.navigator.geolocation.getCurrentPosition(
+  (position) => {
+    const cords = position.coords;
+    console.log(`Latitude :  ${cords.latitude}`);
+    console.log(`Longitude :  ${cords.longitude}`);
+  },
+  (error) => {
+    console.debug(`Error: ${error.code}:${error.message}`);
+    /**
+     * Invoke the IP based location services
+     * to fetch the latitude and longitude of the user.
+     */
+  },
+  geoOptions,
+);
+```
+
+This approach worked well in the earlier versions of the app, but was later proven to be a huge pain
+point for MishiPay's users for the following reasons:
+
+- Location inaccuracies in the IP-based fallback solutions.
+- A growing listing of MishiPay-enabled stores per region requires users to scroll a list and
+  identify the correct store.
+- Users accidentally occasionally choose the wrong store, causing the purchases to be recorded
+  incorrectly.
+
+To address these issues, we embedded unique geolocated QR codes on the in-store displays for each
+store. It paved the way for a faster onboarding experience. Users simply scan the geolocated QR
+codes printed on marketing material present in the stores to access the Scan & Go web application.
+This way, they can avoid typing in the web address `mishipay.shop` to access the service.
+
+<figure>
+  {% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/NqyMBZGYzGSNqLE7soXR.mp4", autoplay=true, muted=true, playsinline=true, loop=true, width=1296, height=600 %}
+  <figcaption>
+    In-store scanning experience using the PWA.
+  </figcaption>
+</figure>
+
+### Scanning products
+
+A core feature in the MishiPay app is the barcode scanning as this empowers our users to scan their
+own purchases and see the running total even before they would otherwise have reached a cash
+register.
+
+To build a scanning experience on the web, we have identified three core layers.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/jRJeqbGW7yqU8VpdbjBO.png", alt="Diagram showing the three main thread layers: video stream, processing layer, and decoder layer.", width="800", height="358" %}
+
+### Video stream
+
+With the help of the
+[`getUserMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) method, we
+can access the user's rear view camera with the constraints listed below. Invoking the method
+automatically triggers a prompt for users to accept or deny access to their camera. Once we have
+access to the video stream, we can relay it to a video element as shown below:
+
+```js
+/**
+ * Video Stream Layer
+ * https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
+ */
+const canvasEle = document.getElementById('canvas');
+const videoEle = document.getElementById('videoElement');
+const canvasCtx = canvasEle.getContext('2d');
+fetchVideoStream();
+function fetchVideoStream() {
+  let constraints = { video: { facingMode: 'environment' } };
+  if (navigator.mediaDevices !== undefined) {
+    navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((stream) => {
+        videoEle.srcObject = stream;
+        videoStream = stream;
+        videoEle.play();
+        // Initiate frame capture - Processing Layer.
+      })
+      .catch((error) => {
+        console.debug(error);
+        console.warn(`Failed to access the stream:${error.name}`);
+      });
+  } else {
+    console.warn(`getUserMedia API not supported!!`);
+  }
+}
+```
+
+### Processing layer
+
+For detecting a barcode in a given video stream, we need to periodically capture frames and transfer
+them to the decoder layer. To capture a frame, we simply draw the streams from `VideoElement` onto
+an `HTMLCanvasElement` using the
+[`drawImage()`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage)
+method of the [Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+```js
+/**
+ * Processing Layer - Frame Capture
+ * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
+ */
+async function captureFrames() {
+  if (videoEle.readyState === videoEle.HAVE_ENOUGH_DATA) {
+    const canvasHeight = (canvasEle.height = videoEle.videoHeight);
+    const canvasWidth = (canvasEle.width = videoEle.videoWidth);
+    canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);
+    // Transfer the `canvasEle` to the decoder for barcode detection.
+    const result = await decodeBarcode(canvasEle);
+  } else {
+    console.log('Video feed not available yet');
+  }
+}
+```
+
+For advanced use cases, this layer also performs some pre-processing tasks such as cropping,
+rotating, or converting to grayscale. These tasks can be CPU-intensive and result in the application
+being unresponsive given that barcode scanning is a long-running operation. With the help of the
+[OffscreenCanvas](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas) API, we can offload
+the CPU-intensive task to a web worker. On devices that support hardware graphics acceleration,
+WebGL API and its
+[`WebGL2RenderingContext`](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext) can
+optimize gains on the CPU-intensive pre-processing tasks.
+
+### Decoder layer
+
+The final layer is the decoder layer which is responsible for decoding barcodes from the frames
+captured by the processing layer. Thanks to the
+[Shape Detection API](https://developer.mozilla.org/docs/Web/API/Barcode_Detection_API) (which is
+not yet available on all browsers) the browser itself decodes the barcode from an
+`ImageBitmapSource`, which can be an `img` element, an SVG `image` element, a `video` element, a
+`canvas` element, a `Blob` object, an `ImageData` object, or an `ImageBitmap` object.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/GR4od5fHOxys6lrxttPn.png", alt="Diagram showing the three main thread layers: video stream, processing layer, and Shape Detection API.", width="800", height="358" %}
+
+```js
+/**
+ * Barcode Decoder with Shape Detection API
+ * https://web.dev/shape-detection/
+ */
+async function decodeBarcode(canvas) {
+  const formats = [
+    'aztec',
+    'code_128',
+    'code_39',
+    'code_93',
+    'codabar',
+    'data_matrix',
+    'ean_13',
+    'ean_8',
+    'itf',
+    'pdf417',
+    'qr_code',
+    'upc_a',
+    'upc_e',
+  ];
+  const barcodeDetector = new window.BarcodeDetector({
+    formats,
+  });
+  try {
+    const barcodes = await barcodeDetector.detect(canvas);
+    console.log(barcodes);
+    return barcodes.length > 0 ? barcodes[0]['rawValue'] : undefined;
+  } catch (e) {
+    throw e;
+  }
+}
+```
+
+For devices that don't support the Shape Detection API yet, we need a fallback solution to decode
+the barcodes. The Shape Detection API exposes a
+[`getSupportedFormats()`](https://developer.mozilla.org/docs/Web/API/BarcodeDetector/getSupportedFormats)
+method which helps switch between the Shape Detection API and the fallback solution.
+
+```js
+// Feature detection.
+if (!('BarceodeDetector' in window)) {
+  return;
+}
+// Check supported barcode formats.
+BarcodeDetector.getSupportedFormats()
+.then((supportedFormats) => {
+  supportedFormats.forEach((format) => console.log(format));
+});
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/GmrPC7mFTdtsEdS1BDWp.png", alt="Flow diagram showing how, dependent on Barcode Detector support and the supported barcode formats, either the Shape Detection API or the fallback solution  is being used.", width="800", height="404" %}
+
+### Fallback solution
+
+Several open-source and enterprise scanning libraries are available that can be easily integrated
+with any web application to implement scanning. Here are some of the libraries that MishiPay
+recommend.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Library Name</th>
+        <th>Type</th>
+        <th>Wasm Solution</th>
+        <th>Barcode Formats</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/serratus/quaggaJS">QuaggaJs</a></td>
+        <td>Open Source</td>
+        <td>No</td>
+        <td>1D</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/zxing-js/library">ZxingJs</a></td>
+        <td>Open Source</td>
+        <td>No</td>
+        <td>1D & 2D (Limited)</td>
+      </tr>
+      <tr>
+        <td><a href="https://codecorp.com/products">CodeCorp</a></td>
+        <td>Enterprise</td>
+        <td>Yes</td>
+        <td>1D & 2D</td>
+      </tr>
+      <tr>
+        <td><a href="https://docs.scandit.com/stable/web/">Scandit</a></td>
+        <td>Enterprise</td>
+        <td>Yes</td>
+        <td>1D & 2D</td>
+      </tr>
+    </tbody>
+    <caption style="max-width:initial;">
+      Comparison of open-source and commercial barcode scanning libraries
+    </caption>
+  </table>
+</div>
+
+All the above libraries are full-fledged SDKs that compose all the layers discussed above. They also
+expose interfaces to support various scanning operations. Depending on the barcode formats and
+detection speed needed for the business case, a decision can be between Wasm and non-Wasm solutions.
+Despite the overhead of requiring an additional resource (Wasm) to decode the barcode, Wasm
+solutions outperform the non-Wasm solution in terms of accuracy.
+
+[Scandit](https://docs.scandit.com/stable/web/) was our primary choice. It supports all barcode
+formats required for our business use cases; it beats all the available open-source libraries in
+scanning speed.
+
+## Future of scanning
+
+Once the Shape Detection API is fully supported by all major browsers, we could potentially have a
+new HTML element `<scanner>` that has the capabilities required for a barcode scanner. Engineering
+at MishiPay believes there is a solid use case for the barcode scanning functionality to be a new
+HTML element due to the growing number of open source and licensed libraries that are enabling
+experiences such as Scan & Go and many others.
+
+## Conclusion
+
+App fatigue is an issue that developers face when their products enter the market. Users often want
+to understand the value that an application gives them before they download it. In a store, where
+MishiPay saves shoppers' time and improves their experience, it is counterintuitive to wait for a
+download before they can use an application. This is where our PWA helps. By eliminating the barrier
+to entry, we have increased our transactions by 10 times and enabled our users to save 2.5 years of
+waiting in the queue.
+
+## Acknowledgements
+
+This article was reviewed by [Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/mobifying/index.md b/src/site/content/en/blog/mobifying/index.md
new file mode 100644
index 00000000000..a24aaa93a3b
--- /dev/null
+++ b/src/site/content/en/blog/mobifying/index.md
@@ -0,0 +1,426 @@
+---
+layout: post
+title: Mobifying your HTML5 site
+authors:
+  - ericbidelman
+date: 2011-03-03
+tags:
+  - blog
+---
+
+## Introduction
+
+Developing for the mobile web is a hot topic these days. This year, for the
+first time ever, [smart phones out sold PCs](http://www.google.com/hostednews/ap/article/ALeqM5jbHjxzXq6y9RhP8LBGniMEAzeFSw?docId=8003d946cb934722b3f814c5909bbdc4).
+More and more users are using a mobile device to traverse the web, which means it's
+becoming critical for developers to optimize their sites for the mobile browsers.
+
+The "mobile" battlefield is still uncharted waters for a large number of developers.
+Many folks have existing legacy sites that neglect mobile users altogether.
+Instead, the site was designed primarily for desktop browsing and degrades poorly
+in mobile browsers. This site (html5rocks.com) is no exception. At launch, we
+put little effort into a mobile version of the site.
+
+## Creating a mobile-friendly html5rocks.com
+
+As an exercise I thought it would be interesting to take html5rocks
+(an existing HTML5 site) and augment it with a mobile-friendly version.
+I was mainly concerned with the minimum amount of work 
+required to target smart phones. The goal of my exercise was not to create an
+entirely new mobile site and maintain two codebases. That would have taken forever
+and have been a huge waste of time. We had already defined the site's structure (markup). We had a look and
+feel (CSS). The core functionality (JS) was there. Point is, many sites are
+in this same boat.
+
+This article examines how we created a mobile version of html5rocks optimized
+for Android and iOS devices. Just load html5rocks.com on a device that supports one of those OSs to see the difference.
+There are no redirects to a m.html5rocks.com or other tomfoolery of that nature. You get html5rocks as is… with the added benefit of something that looks great and works well on a mobile device.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bGLAdaZ1tQHUQO24iehB.png", alt="Desktop html5rocks.com", width="481", height="400" %}
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/caCQkSHVQoVbbjZs6083.png", alt="Mobile html5rocks.com", width="157", height="400" %}
+  <figcaption>html5rocks.com on desktop (left) and mobile (right)</figcaption>
+</figure>
+
+## CSS Media Queries
+
+HTML4 and CSS2 have supported [media-dependent style sheets](http://www.w3.org/TR/CSS2/media.html)
+for some time. For example:
+
+```html
+<link rel="stylesheet" media="print" href="printer.css">
+```
+
+would target print devices and provide specific styling for the page content when it is printed.
+CSS3 takes the idea of media types one step further and enhances their functionality with media queries.
+[Media queries](http://www.w3.org/TR/css3-mediaqueries/)
+extend the usefulness of media types by allowing more precise labeling of style sheets.
+This enables the content's presentation to be customized to a specific range
+of output devices without having to change the content itself. Sounds perfect for an existing
+layout that needs modifying!
+
+You can use media queries in the `media` attribute of your external
+stylesheets to target screen width, device width, orientation, etc. For the full list,
+see the [W3C media query specification](http://www.w3.org/TR/css3-mediaqueries/).
+
+### Targeting screen sizes
+
+In the following example, `phone.css` would apply to devices
+that the browser considers "handheld" or devices with screens  <= 320px wide.
+
+```html
+ <link rel='stylesheet'
+  media='handheld, only screen and (max-device-width: 320px)' href='phone.css'>
+```
+
+Prefixing a media queries with the "`only`" keyword will cause
+non CSS3-compliant browsers to ignore the rule.
+
+The following would target screen sizes between 641px and 800px:
+
+```html
+ <link rel='stylesheet'
+  media='only screen and (min-width: 641px) and (max-width: 800px)' href='ipad.css'>
+```
+
+Media queries can also appear within inline ` <style>` tags. The following
+targets `all` media types when in a portrait orientation:
+
+```html
+ <style>
+  @media only all and (orientation: portrait) { ... }
+ </style>
+```
+### `media="handheld"`
+
+We need to stop for a minute and discuss `media="handheld"`.
+Fact is, Android and iOS ignore `media="handheld"`. The claim is that users will
+miss the high end content provided by stylesheets targeting `media="screen"`
+and developers are less likely to maintain a lower quality `media="handheld"`
+version. So, as part of their "full web" motto, most modern smart phone browsers
+simply ignore handheld style sheets.
+
+It would be ideal to use this feature to target mobile devices, but various
+browsers have implemented it in different ways:
+
+- Some read only the handheld style sheet.
+- Some read only the handheld style sheet if there is one, but default to the screen style sheet otherwise.
+- Some read both the handheld style sheet and the screen style sheet.
+- Some read only the screen style sheet.
+
+Opera Mini does not ignore `media="handheld"`. The trick to getting
+Windows Mobile to recognize `media="handheld"` is to capitalize the media
+attribute value for the screen stylesheet:
+
+```html
+ <!-- media="handheld" trick for Windows Mobile -->
+ <link rel="stylesheet" href="screen.css" media="Screen">
+ <link rel="stylesheet" href="mobile.css" media="handheld">
+```
+
+### How html5rocks uses media queries
+
+Media queries are used heavily throughout mobile html5rocks. They allowed us
+tweak the layout without having to make significant changes to our Django
+template markup… a real lifesaver! In addition,
+[their support](http://caniuse.com/#search=media%20queries) across
+the various browsers is pretty good.
+
+In the ` <head>` of each page you'll see the following stylesheets:
+
+```html
+ <link rel='stylesheet'
+  media='all' href='/static/css/base.min.css' />
+ <link rel='stylesheet'
+  media='only screen and (max-width: 800px)' href='/static/css/mobile.min.css' />
+```
+
+`base.css` has always defined the main look and feel of
+html5rocks.com, but now we're applying new styles (`mobile.css`)
+for screen widths under 800px. Its media query covers smart phones (~320px) and the iPad (~768px).
+The effect: we're incrementally overriding styles in `base.css` (only as necessary)
+to make things look better in mobile.
+
+Some of the styling changes that `mobile.css` enforces:
+
+- Reduces extra whitespace/padding across the site. Small screens means space is at a premium!
+- Removes `:hover` states. They'll never been seen on touch devices.
+- Adjusts the layout to be single column. More on this later.
+- Removes the `box-shadow` around the site's main container div. Large box shadows reduce page performance.
+- Used CSS flex box model `box-ordinal-group` to change the ordering of each section on the homepage.
+  You'll notice the "LEARN BY MAJOR HTML5 FEATURE GROUPS" comes before the "TUTORIALS" section on the homepage but after it on the mobile version. This ordering made more sense for mobile and didn't require markup changes.
+  CSS flexbox FTW!
+- Removes `opacity` changes. Changing alpha values is a performance hit on mobile.
+
+## Mobile meta tags
+
+Mobile WebKit supports a few goodies that give users a better browsing experience
+on certain devices.
+
+### Viewport settings
+
+The first meta setting (and one that you'll use most often) is the viewport property.
+Setting a viewport tells the browser how content should fit on the device's screen
+and informs the browser that the site is optimized for mobile. For example:
+
+```html
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+```
+
+tells the browser to set the viewport to the width of the device with an initial
+scale of 1. This example also allows zooming, something that may be desirable
+for a web site but not a web app. We could prevent zooming with `user-scalable=no`
+or cap the scaling to a certain level:
+
+
+```html
+ <meta name=viewport
+  content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
+```
+
+Note: `width` can also take a pixel value. Setting `width=320` would
+achieve the same result as `width=device-width` on the iPhone and a
+few other smart phones. Keep in mind not all phones have this exact width, so it's
+best to stick with `device-width` and let the browser figure out the rest.
+
+Android extends the viewport meta tag by allowing developers to to specify
+which screen resolution the site has been developed for:
+
+```html
+ <meta name="viewport" content="target-densitydpi=device-dpi">
+```
+
+Possible values for `target-densitydpi` are `device-dpi`, `high-dpi`,
+`medium-dpi`, `low-dpi`.
+
+If you want to modify your web page for different screen densities, use the
+`-webkit-device-pixel-ratio` CSS media query and/or the `window.devicePixelRatio`
+property in JavaScript, then set the `target-densitydpi` meta property
+to `device-dpi`. This stops Android from performing scaling in your web
+page and allows you to make the necessary adjustments for each density, via CSS and JavaScript.
+
+See Android's [WebView documentation](http://developer.android.com/reference/android/webkit/WebView.html)
+for more information on targeting device resolutions.
+
+### Full-screen browsing
+
+There are two other meta values that are iOS-sfic. `apple-mobile-web-app-capable`
+and `apple-mobile-web-app-status-bar-style` will render page content
+in app-like full screen mode and make the status bar translucent:
+
+```html
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+```
+
+For more information on all of the available meta options, see the [Safari reference documentation](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html).
+
+### Home screen icons
+
+iOS and Android devices also accept a
+`rel="apple-touch-icon"` (iOS) and `rel="apple-touch-icon-precomposed"` (Android)
+for links. These create a flashy app-like icon on the user's home screen when they bookmark your site:
+
+```html
+ <link rel="apple-touch-icon"
+      href="/static/images/identity/HTML5_Badge_64.png" />
+ <link rel="apple-touch-icon-precomposed"
+      href="/static/images/identity/HTML5_Badge_64.png" />
+```
+
+### How html5rocks uses mobile meta tags
+
+Putting everything together, here is a snippet from the ` <head>`
+section of html5rocks:
+
+```html
+ <head>
+  ...
+   <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+
+   <link rel="apple-touch-icon"
+        href="/static/images/identity/HTML5_Badge_64.png" />
+   <link rel="apple-touch-icon-precomposed"
+        href="/static/images/identity/HTML5_Badge_64.png" />
+  ...
+ </head>
+```
+
+## Vertical layout
+
+On smaller screens, it is far more convenient to scroll vertically than horizontally.
+Keeping content in a single-column, vertical layout is preferred for mobile.
+For html5rocks, we used CSS3 media queries to create such a layout. Again, without
+changing markup.
+
+<figure>
+  <a href="https://www.html5rocks.com/tutorials/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/r1zini5LVLfXsIVSZVcR.png", alt="Tutorials index.", width="183", height="400" %}</a>
+  <a href="https://www.html5rocks.com/tutorials/eventsource/basics/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/G07v09Ms5vwoIWzZg6zQ.png", alt="Tutorial.", width="183", height="400" %}</a>
+  <a href="https://www.html5rocks.com/features/file">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OJv7uC7RrBXQBnHC0BtN.png", alt="HTML5 Feature page.", width="183", height="400" %}</a>
+  <a href="https://www.html5rocks.com/profiles">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/A0g1yZaaw0wJ6vea85xW.png", alt="Author profiles page.", width="183", height="400" %}</a>
+  <figcaption>Single-column vertical layout throughout the site.</figcaption>
+</figure>
+
+## Mobile optimizations
+
+Most of the optimizations that we made are things that should have been
+done in the first place. Things like reducing the number of network requests,
+JS/CSS compression, gzipping (comes from free on App Engine), and minimizing DOM manipulations. These techniques
+are [common best practices](http://code.google.com/speed/page-speed/docs/rules_intro.html)
+but are occasionally overlooked when rushing a site out the door.
+
+### Auto-hide address bar
+
+Mobile browsers lacks the screen real estate of its desktop counterpart.
+To make things worst, on different platforms, you sometimes end up with a big ol'
+address bar at the top of the screen… even after the page is done loading.
+
+One easy way to deal with it is to scroll the page using JavaScript.
+Even doing so by one pixel will take care of the pesky address bar.
+To force-hide the address bar on html5rocks, I attached an `onload`
+event handler to the `window` object and scrolled the page vertically
+by one pixel:
+
+<figure>
+  <a href="https://www.html5rocks.com/tutorials/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mJRgXYWTzBgz1k5H4M0A.png", alt="Address bar.", width="202", height="300" %}</a>
+  <figcaption>Ugly address bar takes up screen real estate.</figcaption>
+</figure>
+
+```js
+  // Hides mobile browser's address bar when page is done loading.
+  window.addEventListener('load', function(e) {
+    setTimeout(function() { window.scrollTo(0, 1); }, 1);
+  }, false);
+```
+
+We also wrapped this listener is our `is_mobile` template variable
+since it's not needed on the desktop.
+
+### Reduce network requests, save bandwidth
+
+It's a known fact that reducing the number of HTTP requests
+can greatly improve performance. Mobile devices further limit the number of concurrent
+connections the browser can make, so mobile sites will benefit even more from
+reducing these extraneous requests. Furthermore, shaving off every byte is critical
+because bandwidth is often limited on phones. You may be costing users money!
+
+The following are some of the approaches we took to minimize network requests and reduce bandwidth
+on html5rocks:
+
+- Remove iframes - iframes are slow! A large amount of our
+latency came from 3rd party sharing widgets (Buzz, Google Friend Connect, Twitter, Facebook)
+on tutorial pages. These APIs were included via `<script>` tags and create
+iframes that diminish the speed of the page. The widgets were removed for mobile.
+
+- `display:none` - In certain cases, we were hiding markup if
+it didn't fit the mobile profile. A good example were the four rounded boxes at
+the top of the [homepage](https://www.html5rocks.com/):
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oNILSixnqUcU3rfT1htN.png", alt="Box buttons on homepage.", width="418", height="115" %}
+    <figcaption>Box buttons on homepage.</figcaption>
+</figure>
+
+They're missing from the mobile site. It's important to remember that
+the browser still makes a request for each icon, despite their container
+being hidden with `display:none`. Therefore, it wasn't sufficient to simply
+hide these buttons. Not only would that be wasting bandwidth, but the user wouldn't
+even see the fruits of that wasted bandwidth! The solution was to create a 
+"is_mobile" boolean in our Django template to conditionally omit sections of HTML.
+When the user is viewing the site on a smart device, the buttons are left out.
+
+- Application Cache - Not only does this give us offline support, but it also creates a faster startup.
+
+- CSS/JS compression - we're using YUI compressor instead
+of [Closure compiler](http://code.google.com/closure/compiler/) mainly because it
+handles both CSS and JS. One issue that we ran into was that inline media queries
+(media queries that appear inside a stylesheet) barfed in YUI compressor 2.4.2 (see
+[this issue](http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/)).
+Using YUI Compressor 2.4.4+ fixed the problem.
+
+- Used of CSS image sprites where possible.
+
+- Used pngcrush for image compression.
+
+- Used dataURIs for small images. Base64 encoding adds ~30%+ of size to the image
+but saves the network request.
+
+- Auto loaded Google Custom Search using a single script tag rather than dynamically loading
+it with `google.load()`. The latter makes an extra request.
+
+```html
+<script src="//www.google.com/jsapi?autoload={"modules":[{"name":"search","version":"1"}]}"> </script>
+```
+
+- Our code pretty printer and [Modernizr](http://www.modernizr.com/) were
+being included on every page, even if they were never used. Modernizr is great,
+but it runs a bunch of tests on every load. Some of those tests make costly modifications
+to the DOM and slows down page load. Now, we're only including these libraries
+on pages where they're actually needed. -2 requests :)
+
+Additional performance tweaks:
+
+
+- Moved all JS to the bottom of the page (where possible).
+- Removed inline  `<style>` tags.
+- Cached DOM lookups and minimized DOM manipulations - Every time
+  you touch the DOM the browser performs a
+  [reflow](http://dev.opera.com/articles/view/efficient-javascript/?page=3). Reflows
+  are even more costly on a mobile device.
+- Offloaded wasteful client-side code to the server. Specifically, the check
+  to see set the navigation styling of the current page:
+    ```js
+    var lis = document.querySelectorAll('header nav li');
+    var i = lis.length;
+    while (i--) {
+    var a = lis[i].querySelector('a');
+    var section = a.getAttribute("data-section");
+    if (new RegExp(section).test(document.location.href)) {
+        a.className = 'current';
+    }
+    }
+    ```
+- Elements with fixed widths were replaced with fluid `width:100%` or `width:auto`.
+
+### Application Cache
+
+The mobile version of html5rocks uses [Application Cache](https://www.html5rocks.com/tutorials/appcache/beginner/)
+to speed up initial load and allows users to read content offline.
+
+When implementing AppCache on your site, it's very important that you don't
+cache your manifest file (either explicitly in the manifest file itself or implicitly with heavy
+cache control headers). If your manifest gets cached by the browser it's a nightmare to debug.
+iOS and Android do a particularly good job of caching this file but don't provide a
+convenient way to flush the cache like the desktop browsers do.
+
+To prevent said caching for our site, we first set App Engine to never cache manifest files:
+
+```apacheconf
+- url: /(.*\.(appcache|manifest))
+  static_files: \1
+  mime_type: text/cache-manifest
+  upload: (.*\.(appcache|manifest))
+  expiration: "0s"
+```
+
+Second, we used the JS API to inform the user when a new manifest
+has finished downloading. They're prompted to refresh the page:
+
+```js
+window.applicationCache.addEventListener('updateready', function(e) {
+  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
+    window.applicationCache.swapCache();
+    if (confirm('A new version of this site is available. Load it?')) {
+      window.location.reload();
+    }
+  }
+}, false);
+```
+
+To save network traffic keep your manifest simple. That is to say, don't
+call out every page on your site. Just list the important images, CSS, and
+JavaScript files. The last thing you want to do is force the mobile browser
+to download a large number of assets on every appcache update. Instead, remember
+that the browser will implicitly cache an html page when the user visits 
+(and it includes a ` <html manifest="...">` attribute).
diff --git a/src/site/content/en/blog/mobile-cross-device/index.md b/src/site/content/en/blog/mobile-cross-device/index.md
new file mode 100644
index 00000000000..2ecfeded1c4
--- /dev/null
+++ b/src/site/content/en/blog/mobile-cross-device/index.md
@@ -0,0 +1,426 @@
+---
+layout: post
+title: A non-responsive approach to building cross-device webapps
+authors:
+  - smus
+date: 2012-04-28
+tags:
+  - blog
+---
+## Media queries are great, but…
+
+Media queries are awesome, a godsend for website developers that want to
+make small tweaks to their stylesheets to give a better experience for
+users on devices of various sizes. Media queries essentially let you
+customize the CSS of your site depending on screen size. Before you dive
+into this article, learn more about [responsive design][rwd] and check
+out some fine examples of media queries usage here: [mediaqueri.es][mq].
+
+As Brad Frost points out in an [earlier article][bf], changing the look
+is only one of many things to consider when building for the mobile web.
+If the only thing you do when you build your mobile website is customize
+your layout with media queries, then we have the following situation:
+
+- All devices get the same JavaScript, CSS, and assets (images, videos),
+  resulting in longer than necessary load times.
+- All devices get the same initial DOM, potentially forcing developers
+  to write overly complicated CSS.
+- Little flexibility to specify custom interactions tailored to each
+  device.
+
+### Webapps need more than media queries
+
+Don't get me wrong. I don't hate responsive design via media queries,
+and definitely think it has a place in the world. Furthermore, some of
+the above mentioned issues can be resolved with approaches such as
+[responsive images][respimg], dynamic script loading, etc. However, at a
+certain point, you may find yourself doing too many incremental tweaks,
+and may be better off serving different versions.
+
+As the UIs you build increase in complexity, and you gravitate toward
+single-page webapps, you'll want to do more to customize UIs for each
+type of device. This article will teach you how to do these
+customizations with a minimal amount of effort. The general approach
+involves classifying your visitor's device into the right device
+class, and serving the appropriate version to that device, while
+maximizing code reuse between versions.
+
+## What device classes are you targeting?
+
+There are tons of internet-connected devices out there, and nearly all
+of them have browsers. The complication lies in their diversity: Mac
+laptops, Windows workstations, iPhones, iPads, Android phones with touch
+input, scroll wheels, keyboards, voice input, devices with pressure
+sensitivity, smart watches, toasters and refrigerators, and many more.
+Some of these devices are ubiquitous, while others are very rare.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oWgUWNao9paWJQxjv3mT.png", alt="A variety of devices.", width="590", height="346" %}
+<figcaption>A variety of devices (<a
+href="http://www.flickr.com/photos/brad_frost/6164723945/in/set-72157627712478230/">source</a>).</figcaption>
+</figure>
+
+To create a good user experience, you need to know who your users are
+and what devices they are using. If you build a user interface for a
+desktop user with a mouse and a keyboard and give it to a smartphone
+user, your interface will be a frustration because it's designed for
+another screen size, and another input modality.
+
+There are two extreme ends to the spectrum of approaches:
+
+1. Build one version that works on all devices. UX will suffer as a
+   result, since different devices have different design considerations.
+
+1. Build a version for each device you want to support. This will take
+   forever, because you'll be building too many versions of your
+   application. Also, when the next new smartphone arrives
+   (which happens roughly weekly), you will be forced to create yet
+   another version.
+
+There is a fundamental tradeoff here: the more device categories you
+have, the better a user experience you can deliver, but the more work it
+will take to design, implement and maintain.
+
+Creating a separate version for each device class you decide on may be a
+good idea for performance reasons or if the versions you want to serve
+to different device classes vary hugely. Otherwise, [responsive web
+design][rwd] is a perfectly reasonable approach.
+
+### A potential solution
+
+Here's a compromise: classify devices into categories, and design the
+best possible experience for each category. What categories you choose
+depend on your product and target user. Here's a sample classification
+that nicely spans popular web-capable devices that exist today.
+
+1. small screens + touch (mostly phones)
+1. large screens + touch (mostly tablets)
+1. large screens + keyboard/mouse (mostly desktops/laptops)
+
+This is only one of many possible breakdowns, but one that makes a lot
+of sense at the time of writing. Missing from the above list are mobile
+devices without touch screens (eg. feature phones, some dedicated ebook
+readers). However, most of these have keyboard navigation or screen
+reader software installed, which will work fine if you build your site
+with accessibility in mind.
+
+### Examples of form factor-specific web apps
+
+There are many examples of web properties serving entirely different
+versions for different form factors. Google search does this, as does
+Facebook. Considerations for this include both performance (fetching
+assets, rendering pages) and more general user experience.
+
+In the world of native apps, many developers choose to tailor their
+experience to a device class. For example, [Flipboard][flipboard] for
+iPad has a very different UI compared to Flipboard on iPhone. The tablet
+version is optimized for two hand use and horizontal flipping while the
+phone version is intended for single hand interaction and a vertical
+flip. Many other iOS applications also provide significantly different
+phone and tablet versions, such as [Things][things] (todo list), and
+[Showyou][showu] (social video), featured below:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yTMaKFumzZXSB3qcrAgp.png", alt="Significant UI customization for phone and tablet.", width="683", height="488" %}
+<figcaption>Significant UI customization for phone and tablet.</figcaption>
+</figure>
+
+## Approach #1: Server-side detection
+
+On the server, we have a much more limited understanding of the device
+that we're dealing with. Probably the most useful clue that's available
+is the user agent string, which is supplied via the User-Agent header on
+every request. Because of this, the same UA sniffing approach will work
+here. In fact, the DeviceAtlas and WURFL projects do this already (and
+give a whole lot of additional information about the device).
+
+Unfortunately each of these present their own challenges. WURFL is very
+large, containing 20MB of XML, potentially incurring significant
+server-side overhead for each request. There are projects that split the
+XML for performance reasons. DeviceAtlas is not open source, and
+requires a paid license to use.
+
+There are simpler, free alternatives too, like the [Detect Mobile
+Browsers][dmb] project. The drawback, of course, is that device
+detection will inevitably be less comprehensive. Also, it only
+distinguishes between mobile and non-mobile devices, providing limited
+tablet support only through an [ad-hoc set of tweaks][dmb-tablet].
+
+## Approach #2: Client-side detection
+
+We can learn a lot about the user's browser and device by using feature
+detection. The main things we need to determine are if the device has
+touch capability, and if it's a large or small screen.
+
+We need to draw the line somewhere to distinguish small and big touch
+devices. What about edge cases like the 5" Galaxy Note? The following
+graphic shows a bunch of popular Android and iOS devices overlaid (with
+corresponding screen resolutions). The asterisk indicates that the
+device comes or can come in doubled density. Though the pixel density
+may be doubled, CSS still reports the same sizes.
+
+A quick aside on pixels in CSS: CSS pixels on the mobile web [aren't the
+same][csspx] as screen pixels. iOS retina devices introduced the
+practice of doubling pixel density (eg. iPhone 3GS vs 4, iPad 2 vs 3).
+The retina Mobile Safari UAs still report the same device-width to avoid
+breaking the web. As other devices (eg. Android) get higher resolution
+displays, they are doing the same device-width trick.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KmYlWUztM5Lm23vm0RFq.png", alt="Device resolution (in pixels).", width="336", height="528" %}
+<figcaption>Device resolution (in pixels).</figcaption>
+</figure>
+
+Complicating this decision, however, is the importance of considering
+both portrait and landscape modes. We don't want to reload the page or
+load additional scripts every time we re-orient the device, though we
+may want to render the page differently.
+
+In the following diagram, squares represent the max dimensions of each
+device, as a result of overlaying the portrait and landscape outlines
+(and completing the square):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ew9tsr3K7PH4SnlY32uc.png", alt="Portrait + landscape resolution (in pixels)", width="651", height="590" %}
+<figcaption>Portrait + landscape resolution (in pixels)</figcaption>
+</figure>
+
+By setting the threshold to `650px`, we classify iPhone, Galaxy Nexus as
+smalltouch, and iPad, Galaxy Tab as "tablet". The androgynous Galaxy
+Note is in this case classified as "phone", and will get the phone
+layout.
+
+And so, a reasonable strategy might look like this:
+
+```js
+if (hasTouch) {
+  if (isSmall) {
+    device = PHONE;
+  } else {
+    device = TABLET;
+  }
+} else {
+  device = DESKTOP;
+}
+```
+
+See a minimal sample of the [feature-detection approach][feature-sample] in action.
+
+The alternative approach here is to use UA sniffing to detect device
+type. Basically you create a set of heuristics and match them against
+your user's `navigator.userAgent`. Pseudo code looks something like
+this:
+
+```js
+var ua = navigator.userAgent;
+for (var re in RULES) {
+  if (ua.match(re)) {
+    device = RULES[re];
+    return;
+  }
+}
+```
+
+See a sample of the [UA-detection approach][ua-sample] in action.
+
+### A note on client-side loading
+
+If you're doing UA detection on your server, you can decide what CSS,
+JavaScript and DOM to serve when you get a new request. However, if
+you're doing client-side detection, the situation is more complex. You
+have several options:
+
+1. Redirect to a device-type-specific URL that contains the version for
+   this device type.
+1. Dynamically load the device type-specific assets.
+
+The first approach is straightforward, requiring a redirect such as
+`window.location.href = '/tablet'`. However, the location will now have
+this device type information appended to it, so you may want to use the
+[History API][history-api] to clean up your URL. Unfortunately this
+approach involves a redirect, which can be slow, especially on mobile
+devices.
+
+The second approach is quite a bit more complex to implement. You need a
+mechanism to dynamically load CSS and JS, and (browser-depending), you
+may not be able to do things like customize `<meta viewport>`. Also,
+since there's no redirect, you're stuck with the original HTML that was
+served. Of course, you can manipulate it with JavaScript, but this may
+be slow and/or inelegant, depending on your application.
+
+## Deciding client or server
+
+These are the tradeoffs between the approaches:
+
+**Pro client**:
+
+- More future proof since based on screen sizes/capabilities rather than UA.
+- No need to constantly update UA list.
+
+**Pro server**:
+
+- Full control of what version to serve to what devices.
+- Better performance: no need for client redirects or dynamic loading.
+
+My personal preference is to start with device.js and client-side
+detection. As your application evolves, if you find client-side redirect
+to be a significant performance drawback, you can easily remove the
+device.js script, and implement UA detection on the server.
+
+## Introducing device.js
+
+Device.js is a starting point for doing semantic, media query-based
+device detection without needing special server-side configuration,
+saving the time and effort required to do user agent string parsing.
+
+The idea is that you provide search-engine-friendly markup ([link
+rel=alternate][link]) at the top of your `<head>` indicating which
+versions of your site you want to provide.
+
+```html
+<link rel="alternate" href="http://foo.com" id="desktop"
+    media="only screen and (touch-enabled: 0)">
+```
+
+Next, you can either do server-side UA detection and handle
+version redirection on your own, or use the device.js script to do
+feature-based client-side redirection.
+
+For more information, see the [device.js project page][devicejs], and
+also a [fake application][devicejs-sample] that uses device.js for
+client-side redirection.
+
+## Recommendation: MVC with form-factor specific views</h2>
+
+By now you're probably thinking that I'm telling you to build three
+completely separate apps, one for each device type. No! Code sharing is
+the key.
+
+Hopefully you have been using an MVC-like framework, such as Backbone,
+Ember, etc. If you have been, you are familiar with the principle of
+separation of concerns, specifically that your UI (view layer) should be
+decoupled from your logic (model layer). If this is new to you, get
+started with some of these [resources on MVC][mvc], and [MVC in
+JavaScript][mvc-js].
+
+The cross-device story fits neatly into your existing MVC framework. You
+can easily move your views into separate files, creating a custom view
+for each device type. Then you can serve the same code to all devices,
+except the view layer.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aXsJmGcCIAs0NBVPpRoP.png", alt="Cross-device MVC.", width="545", height="398" %}
+<figcaption>Cross-device MVC.</figcaption>
+</figure>
+
+Your project might have the following structure (of course, you are free
+to choose the structure that makes the most sense depending on your
+application):
+
+
+models/ (shared models)
+  item.js
+  item-collection.js
+
+controllers/ (shared controllers)
+  item-controller.js
+
+versions/ (device-specific stuff)
+  tablet/
+  desktop/
+  phone/ (phone-specific code)
+    style.css
+    index.html
+    views/
+      item.js
+      item-list.js
+
+This sort of structure enables you to fully control what assets each
+version loads, since you have custom HTML, CSS and JavaScript for each
+device. This is very powerful, and can lead to the leanest, most
+performant way of developing for the cross-device web, without relying
+on tricks such as adaptive images.
+
+Once you run your favorite build tool, you'll concatenate and minify all
+of your JavaScript and CSS into single files for faster loading, with
+your production HTML looking something like the following (for phone,
+using device.js):
+
+```html
+<!doctype html>
+<head>
+  <title>Mobile Web Rocks! (Phone Edition)</title>
+
+  <!-- Every version of your webapp should include a list of all
+        versions. -->
+  <link rel="alternate" href="http://foo.com" id="desktop"
+      media="only screen and (touch-enabled: 0)">
+  <link rel="alternate" href="http://m.foo.com" id="phone"
+      media="only screen and (max-device-width: 650px)">
+  <link rel="alternate" href="http://tablet.foo.com" id="tablet"
+      media="only screen and (min-device-width: 650px)">
+
+  <!-- Viewport is very important, since it affects results of media
+        query matching. -->
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Include device.js in each version for redirection. -->
+  <script src="device.js"></script>
+
+  <link rel="style" href="phone.min.css">
+</head>
+<body>
+  <script src="phone.min.js"></script>
+</body>
+```
+
+Note that the `(touch-enabled: 0)` media query is non-standard (only
+implemented in Firefox behind a `moz` vendor prefix), but is handled
+correctly (thanks to [Modernizr.touch][modernizr]) by device.js.
+
+### Version override
+
+Device detection can sometimes go wrong, and in some cases, a user may
+prefer to look at the tablet layout on their phone (perhaps they are
+using a Galaxy Note), so it's important to give your users a choice of
+which version of your site to use if they want to manually override.
+
+The usual approach is to provide a link to the desktop version from your
+mobile version. This is easy enough to implement, but device.js supports
+this functionality with the `device` GET parameter.
+
+## Concluding
+
+To summarize, when building cross-device single-page UIs, that don't fit
+neatly into the world of responsive design, do this:
+
+1. Pick a set of device classes to support, and criteria by which to
+   classify devices into classes.
+2. Build your MVC app with strong separation of concerns, splitting
+   views from the rest of the codebase.
+3. Use [device.js][devicejs] to do client side device class detection.
+4. When you're ready, package your script and stylesheets into one of
+   each per device class.
+5. If client-side redirection performance is an issue, abandon device.js
+   and switch to serverside UA-detection.
+
+
+[rwd]: https://www.html5rocks.com/mobile/responsivedesign
+[mq]: http://mediaqueri.es/
+[bf]: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
+[respimg]: http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
+[dmb]: http://detectmobilebrowsers.com/
+[dmb-tablet]: http://detectmobilebrowsers.com/about
+[csspx]: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
+[feature-sample]: https://www.html5rocks.com/static/demos/cross-device/feature/index.html
+[ua-sample]: https://www.html5rocks.com/static/demos/cross-device/ua/index.html
+[things]: http://culturedcode.com/things/
+[flipboard]: http://flipboard.com/
+[showu]: http://showyou.com/
+[history-api]: http://diveintohtml5.info/history.html
+[link]: http://blog.whatwg.org/the-road-to-html-5-link-relations#rel-alternate
+[devicejs]: https://github.com/borismus/device.js
+[devicejs-sample]: http://borismus.github.com/device.js/sample/
+[mvc]: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
+[mvc-js]: http://addyosmani.github.com/todomvc/
+[modernizr]: http://modernizr.com/
diff --git a/src/site/content/en/blog/mobile-optimization-and-performance/index.md b/src/site/content/en/blog/mobile-optimization-and-performance/index.md
new file mode 100644
index 00000000000..762fae53b3e
--- /dev/null
+++ b/src/site/content/en/blog/mobile-optimization-and-performance/index.md
@@ -0,0 +1,621 @@
+---
+layout: post
+title: HTML5 techniques for optimizing mobile performance
+authors:
+  - wesleyhales
+date: 2011-06-03
+tags:
+  - blog
+---
+
+## Introduction
+
+Spinning refreshes, choppy page transitions, and periodic delays in tap events are just a few of the headaches in today’s mobile web environments. Developers are trying to get as close to native as they possibly can, but are often derailed by hacks, resets, and rigid frameworks.
+
+In this article, we will discuss the bare minimum of what it takes to create a mobile HTML5 web app. The main point is to unmask the hidden complexities which today’s mobile frameworks try to hide. You will see a minimalistic approach (using core HTML5 APIs) and basic fundamentals that will empower you to write your own framework or contribute to the one you currently use.
+
+## Hardware acceleration
+
+Normally, GPUs handle detailed 3D modeling or CAD diagrams, but in this case, we want our primitive drawings (divs, backgrounds, text with drop shadows, images, etc.) to appear smooth and animate smoothly via the GPU.
+The unfortunate thing is that most front-end developers are dishing this animation process off to a third-party party framework without being concerned about the semantics, but should these core CSS3 features masked? Let me give you a few reasons why caring about this stuff is important:
+
+1. Memory allocation and computational burden — If you go around compositing every element in the DOM just for the sake of hardware acceleration, the next person who works on your code may chase you down and beat you severely.
+
+1. Power Consumption — Obviously, when hardware kicks in, so does the battery. When developing for mobile, developers are forced to take the wide array of device constraints into consideration while writing mobile web apps. This will be even more prevalent as browser makers start to enable access to more and more device hardware.
+
+1. Conflicts — I encountered glitchy behaviour when applying hardware acceleration to parts of the page that were already accelerated. So knowing if you have overlapping acceleration is *very* important.
+
+To make user interaction smooth and as close to native as possible, we must make the browser work for us. Ideally, we want the mobile device CPU to set up the initial animation, then have the GPU responsible for only compositing different layers during the animation process. This is what translate3d, scale3d and translateZ do — they give the animated elements their own layer, thus allowing the device to render everything together smoothly. To find out more about accelerated compositing and how WebKit works, Ariya Hidayat has [a lot of good info](http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html) on [his blog](http://ariya.blogspot.com/).
+
+## Page transitions
+
+Let’s take a look at three of the most common user-interaction approaches when developing a mobile web app: slide, flip, and rotation effects.
+
+You can view this code in action here [http://slidfast.appspot.com/slide-flip-rotate.html](http://slidfast.appspot.com/slide-flip-rotate.html) (Note: This demo is built for a mobile device, so fire up an emulator, use your phone or tablet, or reduce the size of your browser window to ~1024px or less).
+
+First, we’ll dissect the slide, flip, and rotation transitions and how they’re accelerated. Notice how each animation only takes three or four lines of CSS and JavaScript.
+
+### Sliding
+
+The most common of the three transition approaches, sliding page transitions mimics the native feel of mobile applications. The slide transition is invoked to bring a new content area into the view port.
+
+For the slide effect, first we declare our markup:
+
+```html
+<div id="home-page" class="page">
+  <h1>Home Page</h1>
+</div>
+
+<div id="products-page" class="page stage-right">
+  <h1>Products Page</h1>
+</div>
+
+<div id="about-page" class="page stage-left">
+  <h1>About Page</h1>
+</div>
+```
+Notice how we have this concept of staging pages left or right. It could essentially be any direction, but this is most common.
+
+We now have animation plus hardware acceleration with just a few lines of CSS. The actual animation happens when we swap classes on the page div elements.
+
+```css
+.page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /*activate the GPU for compositing each page */
+  -webkit-transform: translate3d(0, 0, 0);
+}
+```
+
+`translate3d(0,0,0)` is known as the “silver bullet” approach.
+
+When the user clicks a navigation element, we execute the following JavaScript to swap the classes. No third-party frameworks are being used, this is straight up JavaScript! ;)
+
+```js
+function getElement(id) {
+  return document.getElementById(id);
+}
+
+function slideTo(id) {
+  //1.) the page we are bringing into focus dictates how
+  // the current page will exit. So let's see what classes
+  // our incoming page is using. We know it will have stage[right|left|etc...]
+  var classes = getElement(id).className.split(' ');
+
+  //2.) decide if the incoming page is assigned to right or left
+  // (-1 if no match)
+  var stageType = classes.indexOf('stage-left');
+
+  //3.) on initial page load focusPage is null, so we need
+  // to set the default page which we're currently seeing.
+  if (FOCUS_PAGE == null) {
+    // use home page
+    FOCUS_PAGE = getElement('home-page');
+  }
+
+  //4.) decide how this focused page should exit.
+  if (stageType > 0) {
+    FOCUS_PAGE.className = 'page transition stage-right';
+  } else {
+    FOCUS_PAGE.className = 'page transition stage-left';
+  }
+
+  //5. refresh/set the global variable
+  FOCUS_PAGE = getElement(id);
+
+  //6. Bring in the new page.
+  FOCUS_PAGE.className = 'page transition stage-center';
+}
+```
+
+`stage-left` or `stage-right` becomes `stage-center` and forces the page to slide into the center view port. We are completely depending on CSS3 to do the heavy lifting.
+
+```css
+.stage-left {
+  left: -480px;
+}
+
+.stage-right {
+  left: 480px;
+}
+
+.stage-center {
+  top: 0;
+  left: 0;
+}
+```
+
+Next, let’s take a look at the CSS which handles mobile device detection and orientation.
+We could address every device and every resolution (see [media query resolution](http://www.w3.org/TR/css3-mediaqueries/#resolution)). I used just a few simple examples in this demo to cover most portrait and landscape views on mobile devices. This is also useful for applying hardware acceleration per device. For example, since the desktop version of WebKit accelerates all transformed elements (regardless if it’s 2-D or 3-D), it makes sense to create a media query and exclude acceleration at that level.
+Note that hardware acceleration tricks do not provide any speed improvement under Android Froyo 2.2+. All composition is done within the software.
+
+```css
+/* iOS/android phone landscape screen width*/
+@media screen and (max-device-width: 480px) and (orientation:landscape) {
+  .stage-left {
+    left: -480px;
+  }
+
+  .stage-right {
+    left: 480px;
+  }
+
+  .page {
+    width: 480px;
+  }
+}
+```
+
+### Flipping
+
+On mobile devices, flipping is known as actually swiping the page away. Here we use some simple JavaScript to handle this event on iOS and Android (WebKit-based) devices.
+
+View it in action [http://slidfast.appspot.com/slide-flip-rotate.html](http://slidfast.appspot.com/slide-flip-rotate.html).
+
+When dealing with touch events and transitions, the first thing you’ll want is to get a handle on the current position of the element. See this doc for more information on WebKitCSSMatrix.
+
+```js
+function pageMove(event) {
+  // get position after transform
+  var curTransform = new WebKitCSSMatrix(window.getComputedStyle(page).webkitTransform);
+  var pagePosition = curTransform.m41;
+}
+```
+
+Since we are using a CSS3 ease-out transition for the page flip, the usual `element.offsetLeft` will not work.
+
+Next we want to figure out which direction the user is flipping and set a threshold for an event (page navigation) to take place.
+
+```js
+if (pagePosition >= 0) {
+ //moving current page to the right
+ //so means we're flipping backwards
+   if ((pagePosition > pageFlipThreshold) || (swipeTime < swipeThreshold)) {
+     //user wants to go backward
+     slideDirection = 'right';
+   } else {
+     slideDirection = null;
+   }
+} else {
+  //current page is sliding to the left
+  if ((swipeTime < swipeThreshold) || (pagePosition < pageFlipThreshold)) {
+    //user wants to go forward
+    slideDirection = 'left';
+  } else {
+    slideDirection = null;
+  }
+}
+```
+
+You’ll also notice that we are measuring the `swipeTime` in milliseconds as well. This allows the navigation event to fire if the user quickly swipes the screen to turn a page.
+
+To position the page and make the animations look native while a finger is touching the screen, we use CSS3 transitions after each event firing.
+
+```js
+function positionPage(end) {
+  page.style.webkitTransform = 'translate3d('+ currentPos + 'px, 0, 0)';
+  if (end) {
+    page.style.WebkitTransition = 'all .4s ease-out';
+    //page.style.WebkitTransition = 'all .4s cubic-bezier(0,.58,.58,1)'
+  } else {
+    page.style.WebkitTransition = 'all .2s ease-out';
+  }
+  page.style.WebkitUserSelect = 'none';
+}
+```
+
+I tried to play around with cubic-bezier to give the best native feel to the transitions, but ease-out did the trick.
+
+Finally, to make the navigation happen, we must call our previously defined `slideTo()` methods that we used in the last demo.
+
+```js
+track.ontouchend = function(event) {
+  pageMove(event);
+  if (slideDirection == 'left') {
+    slideTo('products-page');
+  } else if (slideDirection == 'right') {
+    slideTo('home-page');
+  }
+}
+```
+
+### Rotating
+
+Next, let’s take a look at the rotate animation being used in this demo. At any time, you can rotate the page you’re currently viewing 180 degrees to reveal the reverse side by tapping on the “Contact” menu option. Again, this only takes a few lines of CSS and some JavaScript to assign a transition class `onclick`.
+NOTE: The rotate transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.
+
+The markup (basic concept of front and back):
+
+```html
+<div id="front" class="normal">
+...
+</div>
+<div id="back" class="flipped">
+    <div id="contact-page" class="page">
+        <h1>Contact Page</h1>
+    </div>
+</div>
+```
+
+The JavaScript:
+
+```js
+function flip(id) {
+  // get a handle on the flippable region
+  var front = getElement('front');
+  var back = getElement('back');
+
+  // again, just a simple way to see what the state is
+  var classes = front.className.split(' ');
+  var flipped = classes.indexOf('flipped');
+
+  if (flipped >= 0) {
+    // already flipped, so return to original
+    front.className = 'normal';
+    back.className = 'flipped';
+    FLIPPED = false;
+  } else {
+    // do the flip
+    front.className = 'flipped';
+    back.className = 'normal';
+    FLIPPED = true;
+  }
+}
+```
+
+The CSS:
+
+```css
+/*----------------------------flip transition */
+#back,
+#front {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  -webkit-transition-duration: .5s;
+  -webkit-transform-style: preserve-3d;
+}
+
+.normal {
+  -webkit-transform: rotateY(0deg);
+}
+
+.flipped {
+  -webkit-user-select: element;
+  -webkit-transform: rotateY(180deg);
+}
+```
+
+## Debugging hardware acceleration
+
+Now that we have our basic transitions covered, let’s take a look at the mechanics of how they work and are composited.
+
+To make this magical debugging session happen, let’s fire up a couple of browsers and your IDE of choice.
+First start Safari from the command line to make use of some debugging environment variables. I’m on Mac, so the commands might differ based on your OS.
+Open the Terminal and type the following:
+
+- $> export CA_COLOR_OPAQUE=1
+- $> export CA_LOG_MEMORY_USAGE=1
+- $> /Applications/Safari.app/Contents/MacOS/Safari
+
+This starts Safari with a couple of debugging helpers. CA_COLOR_OPAQUE shows us which elements are actually composited or accelerated. CA_LOG_MEMORY_USAGE shows us how much memory we are using when sending our drawing operations to the [backing store](http://ariya.blogspot.com/2011/06/progressive-rendering-via-tiled-backing.html). This tells you exactly how much strain you are putting on the mobile device, and possibly give hints to how your GPU usage might be draining the target device’s battery.
+
+Now let’s fire up Chrome so we can see some good frames per second (FPS) information:
+
+1. Open the Google Chrome web browser.
+1. In the URL bar, type [about:flags](about:flags).
+1. Scroll down a few items and click on “Enable” for FPS Counter.
+
+{% Aside %}
+Do not enable the GPU compositing on all pages option. The FPS counter only appear in the left-hand corner if the browser detects compositing in your markup—and that is what we want in this case.
+{% endAside %}
+
+If you view [this page](http://slidfast.appspot.com/slide-flip-rotate.html) in your souped up version of Chrome, you will see the red FPS counter in the top left hand corner.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/w5fg5acz92ZwH3KspU5l.png", alt="Chrome FPS", width="154", height="31" %}
+</figure>
+
+This is how we know hardware acceleration is turned on. It also gives us an idea on how the animation runs and if you have any leaks (continuous running animations that should be stopped).
+
+Another way to actually visualize the hardware acceleration is if you open the same page in Safari (with the environment variables I mentioned above). Every accelerated DOM element have a red tint to it. This shows us exactly what is being composited by layer.
+Notice the white navigation is not red because it is not accelerated.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2QS6lIPQ6aVe2M5pWAxU.png", alt="Composited Contact", width="391", height="220" %}
+</figure>
+
+A similar setting for Chrome is also available in the [about:flags](about:flags) “Composited render layer borders”.
+
+Another great way to see the composited layers is to view the [WebKit falling leaves demo](http://www.webkit.org/blog-files/leaves/) while this mod is applied.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ptfVme1oAxnqfPCaDRxt.png", alt="omposited Leaves", width="508", height="709" %}
+</figure>
+
+And finally, to truly understand the graphics hardware performance of our application, let’s take a look at how memory is being consumed.
+Here we see that we are pushing 1.38MB of drawing instructions to the CoreAnimation buffers on Mac OS. The Core Animation memory buffers are shared between OpenGL ES and the GPU to create the final pixels you see on the screen.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/W0KgG9vNZzjQ70T4HRui.png", alt="Coreanimation 1", width="730", height="438" %}
+</figure>
+
+When we simply resize or maximize the browser window, we see the memory expand as well.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IpREM4yEE6AqWs37vzhb.png", alt="Coreanimation 2", width="599", height="505" %}
+</figure>
+
+This gives you an idea of how memory is being consumed on your mobile device only if you resize the browser to the correct dimensions. If you were debugging or testing for iPhone environments resize to 480px by 320px.
+We now understand exactly how hardware acceleration works and what it takes to debug. It’s one thing to read about it, but to actually see the GPU memory buffers working visually really brings things into perspective.
+
+## Behind the Scenes: Fetching and Caching
+
+Now it’s time to take our page and resource caching to the next level. Much like the approach that JQuery Mobile and similar frameworks use, we are going to pre-fetch and cache our pages with concurrent AJAX calls.
+
+Let’s address a few core mobile web problems and the reasons why we need to do this:
+
+- Fetching: Pre-fetching our pages allows users to take the app offline and also enables no waiting between navigation actions. Of course, we don’t want to choke the device’s bandwidth when the device comes online, so we need to use this feature sparingly.
+- Caching: Next, we want a concurrent or asynchronous approach when fetching and caching these pages. We also need to use localStorage (since it’s well supported amongst devices) which unfortunately isn’t asynchronous.
+- AJAX and parsing the response: Using innerHTML() to insert the AJAX response into the DOM is dangerous (and [unreliable](http://martinkou.blogspot.com/2011/05/alternative-workaround-for-mobile.html)?). We instead use a [reliable mechanism](http://community.jboss.org/people/wesleyhales/blog/2011/08/28/fixing-ajax-on-mobile-devices) for AJAX response insertion and handling concurrent calls. We also leverage some new features of HTML5 for parsing the `xhr.responseText`.
+
+Building on the code from the [Slide, Flip, and Rotate demo](http://slidfast.appspot.com/slide-flip-rotate.html), we start out by adding some secondary pages and linking to them. We’ll then parse the links and create transitions on the fly.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/faWRz82uatGOj9o6WSST.png", alt="iPhone Home", width="372", height="335" %}
+</figure>
+
+[View the Fetch and Cache demo here.](http://slidfast.appspot.com/fetch-cache.html)
+
+As you can see, we are leveraging semantic markup here. Just a link to another page. The child page follows the same node/class structure as its parent. We could take this a step further and use the data-* attribute for “page” nodes, etc.
+And here is the detail page (child) located in a separate html file (/demo2/home-detail.html) which will be loaded, cached and set up for transition on app load.
+
+```html
+<div id="home-page" class="page">
+  <h1>Home Page</h1>
+  <a href="demo2/home-detail.html" class="fetch">Find out more about the home page!</a>
+</div>
+```
+
+Now lets take a look at the JavaScript. For simplicity sake, I am leaving any helpers or optimizations out of the code. All we are doing here is looping through a specified array of DOM nodes to dig out links to fetch and cache.
+Note—For this demo, this method `fetchAndCache()` is being called on page load. We rework it in the next section when we detect the network connection and determine when it should be called.
+
+```js
+var fetchAndCache = function() {
+  // iterate through all nodes in this DOM to find all mobile pages we care about
+  var pages = document.getElementsByClassName('page');
+
+  for (var i = 0; i < pages.length; i++) {
+    // find all links
+    var pageLinks = pages[i].getElementsByTagName('a');
+
+    for (var j = 0; j < pageLinks.length; j++) {
+      var link = pageLinks[j];
+
+      if (link.hasAttribute('href') &amp;&amp;
+      //'#' in the href tells us that this page is already loaded in the DOM - and
+      // that it links to a mobile transition/page
+         !(/[\#]/g).test(link.href) &amp;&amp;
+        //check for an explicit class name setting to fetch this link
+        (link.className.indexOf('fetch') >= 0))  {
+         //fetch each url concurrently
+         var ai = new ajax(link,function(text,url){
+              //insert the new mobile page into the DOM
+             insertPages(text,url);
+         });
+         ai.doGet();
+      }
+    }
+  }
+};
+```
+
+We ensure proper asynchronous post-processing through the use of the “AJAX” object. There is a more advanced explanation of using localStorage within an AJAX call in [Working Off the Grid with HTML5 Offline](http://www.html5rocks.com/en/mobile/workingoffthegrid.html). In this example, you see the basic usage of caching on each request and providing the cached objects when the server returns anything but a successful (200) response.
+
+```js
+function processRequest () {
+  if (req.readyState == 4) {
+    if (req.status == 200) {
+      if (supports_local_storage()) {
+        localStorage[url] = req.responseText;
+      }
+      if (callback) callback(req.responseText,url);
+    } else {
+      // There is an error of some kind, use our cached copy (if available).
+      if (!!localStorage[url]) {
+        // We have some data cached, return that to the callback.
+        callback(localStorage[url],url);
+        return;
+      }
+    }
+  }
+}
+```
+
+Unfortunately, since localStorage uses UTF-16 for character encoding, each single byte is stored as 2 bytes bringing our storage limit from 5MB to [2.6MB total](https://twitter.com/#!/wesleyhales/status/104992809534238721). The whole reason for fetching and caching these pages/markup outside of the application cache scope is revealed in the next section.
+
+With the recent advances in the [iframe element](http://dev.w3.org/html5/spec-author-view/the-iframe-element.html) with HTML5, we now have a simple and effective way to parse the `responseText` we get back from our AJAX call. There are plenty of 3000-line JavaScript parsers and regular expressions which removes script tags and so on. But why not let the browser do what it does best? In this example, we are going to write the `responseText` into a temporary hidden iframe. We are using the HTML5 “sandbox” attribute which disables scripts and offers many security features…
+
+From the spec:
+The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are allow-forms, allow-same-origin, allow-scripts, and allow-top-navigation. When the attribute is set, the content is treated as being from a unique origin, forms and scripts are disabled, links are prevented from targeting other browsing contexts, and plugins are disabled.
+
+```js
+var insertPages = function(text, originalLink) {
+  var frame = getFrame();
+  //write the ajax response text to the frame and let
+  //the browser do the work
+  frame.write(text);
+
+  //now we have a DOM to work with
+  var incomingPages = frame.getElementsByClassName('page');
+
+  var pageCount = incomingPages.length;
+  for (var i = 0; i < pageCount; i++) {
+    //the new page will always be at index 0 because
+    //the last one just got popped off the stack with appendChild (below)
+    var newPage = incomingPages[0];
+
+    //stage the new pages to the left by default
+    newPage.className = 'page stage-left';
+
+    //find out where to insert
+    var location = newPage.parentNode.id == 'back' ? 'back' : 'front';
+
+    try {
+      // mobile safari will not allow nodes to be transferred from one DOM to another so
+      // we must use adoptNode()
+      document.getElementById(location).appendChild(document.adoptNode(newPage));
+    } catch(e) {
+      // todo graceful degradation?
+    }
+  }
+};
+```
+
+Safari correctly refuses to implicitly move a node from one document to another. An error is raised if the new child node was created in a different document. So here we use `adoptNode` and all is well.
+
+So why iframe? Why not just use innerHTML? Even though innerHTML is now part of the HTML5 spec, it is a dangerous practice to insert the response from a server (evil or good) into an unchecked area. During the writing of this article, I couldn’t find *anyone* using anything but innerHTML. I know JQuery uses it at it’s core with an append fallback on exception only. And JQuery Mobile uses it as well. However I haven’t done any heavy testing in regards to innerHTML [“stops working randomly”](http://martinkou.blogspot.com/2011/05/alternative-workaround-for-mobile.html), but it would be very interesting to see all the platforms this affects. It would also be interesting to see which approach is more performant… I’ve heard claims from both sides on this as well.
+
+## Network type detection, handling, and profiling
+
+Now that we have the ability to buffer (or predictive cache) our web app, we must provide the proper connection detection features that makes our app smarter. This is where mobile app development gets extremely sensitive to online/offline modes and connection speed.
+Enter [The Network Information API](http://www.w3.org/TR/netinfo-api/). Every time I show this feature in a presentation, someone in the audience raises their hand and asks “What would I use that for?”. So here is a possible way to setup an extremely smart mobile web app.
+
+Boring common sense scenario first…
+While interacting with the Web from a mobile device on a high-speed train, the network may very well go away at various moments and different geographies might support different transmission speeds (e.g., HSPA or 3G might be available in some urban areas, but remote areas might support much slower 2G technologies). The following code addresses most of the connection scenarios.
+
+The following code provides:
+
+- Offline access through `applicationCache`.
+- Detects if bookmarked and offline.
+- Detects when switching from offline to online and vice versa.
+- Detects slow connections and fetches content based on network type.
+
+Again, all of these features require very little code. First we detect our events and loading scenarios:
+
+```js
+window.addEventListener('load', function(e) {
+ if (navigator.onLine) {
+  // new page load
+  processOnline();
+ } else {
+   // the app is probably already cached and (maybe) bookmarked...
+   processOffline();
+ }
+}, false);
+
+window.addEventListener("offline", function(e) {
+  // we just lost our connection and entered offline mode, disable eternal link
+  processOffline(e.type);
+}, false);
+
+window.addEventListener("online", function(e) {
+  // just came back online, enable links
+  processOnline(e.type);
+}, false);
+```
+
+In the EventListeners above, we must tell our code if it is being called from an event or an actual page request or refresh. The main reason is because the body `onload` event won’t be fired when switching between the online and offline modes.
+
+Next, we have a simple check for an `ononline` or `onload` event. This code resets disabled links when switching from offline to online, but if this app were more sophisticated, you might insert logic that would resume fetching content or handle the UX for intermittent connections.
+
+```js
+function processOnline(eventType) {
+
+  setupApp();
+  checkAppCache();
+
+  // reset our once disabled offline links
+  if (eventType) {
+    for (var i = 0; i < disabledLinks.length; i++) {
+      disabledLinks[i].onclick = null;
+    }
+  }
+}
+```
+
+The same goes for `processOffline()`. Here you would manipulate your app for offline mode and try to recover any transactions that were going on behind the scenes. This code below digs out all of our external links and disables them—trapping users in our offline app FOREVER muhahaha!
+
+```js
+function processOffline() {
+  setupApp();
+
+  // disable external links until we come back - setting the bounds of app
+  disabledLinks = getUnconvertedLinks(document);
+
+  // helper for onlcick below
+  var onclickHelper = function(e) {
+    return function(f) {
+      alert('This app is currently offline and cannot access the hotness');return false;
+    }
+  };
+
+  for (var i = 0; i < disabledLinks.length; i++) {
+    if (disabledLinks[i].onclick == null) {
+      //alert user we're not online
+      disabledLinks[i].onclick = onclickHelper(disabledLinks[i].href);
+
+    }
+  }
+}
+```
+
+OK, so on to the good stuff. Now that our app knows what connected state it’s in, we can also check the type of connection when it’s online and adjust accordingly. I have listed typical North American providers download and latencies in the comments for each connection.
+
+{% Aside 'warning' %}  
+The `type` property used in the example below has been removed from the Network Information API. Use the `bandwidth` property instead.
+{% endAside %}
+
+```js
+function setupApp(){
+  // create a custom object if navigator.connection isn't available
+  var connection = navigator.connection || {'type':'0'};
+  if (connection.type == 2 || connection.type == 1) {
+      //wifi/ethernet
+      //Coffee Wifi latency: ~75ms-200ms
+      //Home Wifi latency: ~25-35ms
+      //Coffee Wifi DL speed: ~550kbps-650kbps
+      //Home Wifi DL speed: ~1000kbps-2000kbps
+      fetchAndCache(true);
+  } else if (connection.type == 3) {
+  //edge
+      //ATT Edge latency: ~400-600ms
+      //ATT Edge DL speed: ~2-10kbps
+      fetchAndCache(false);
+  } else if (connection.type == 2) {
+      //3g
+      //ATT 3G latency: ~400ms
+      //Verizon 3G latency: ~150-250ms
+      //ATT 3G DL speed: ~60-100kbps
+      //Verizon 3G DL speed: ~20-70kbps
+      fetchAndCache(false);
+  } else {
+  //unknown
+      fetchAndCache(true);
+  }
+}
+```
+
+There are numerous adjustments we could make to our fetchAndCache process, but all I did here was tell it to fetch the resources asynchronous (true) or synchronous (false) for a given connection.
+
+Edge (Synchronous) Request Timeline
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ooj7k3G4TcK5p4OQMPCo.png", alt="Edge Sync", width="796", height="147" %}
+</figure>
+
+WIFI (Asynchronous) Request Timeline
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ioRwvKAPWzBDV19kMLhH.png", alt="WIFI Async", width="800", height="140" %}
+</figure>
+
+This allows for at least some method of user experience adjustment based on slow or fast connections.
+This is by no means is an end-all-be-all solution. Another todo would be to throw up a loading modal when a link is clicked (on slow connections) while the app still may be fetching that link’s page in the background.
+The big point here is to cut down on latencies while leveraging the full capabilities of the user’s connection with the latest and greatest HTML5 has to offer.
+[View the network detection demo here](http://slidfast.appspot.com/network-detection.html).
+
+## Conclusion
+The journey down the road of mobile HTML5 apps is just beginning. Now you see the very simple and basic underpinnings of a mobile “framework” built solely around HTML5 and it’s supporting technologies. I think it’s important for developers to work with and address these features at their core and not masked by a wrapper.
diff --git a/src/site/content/en/blog/mobile-profiling/index.md b/src/site/content/en/blog/mobile-profiling/index.md
new file mode 100644
index 00000000000..e1ccff5d49d
--- /dev/null
+++ b/src/site/content/en/blog/mobile-profiling/index.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: Profiling mobile HTML5 apps with Chrome DevTools
+authors:
+  - johnmccutchan
+date: 2013-03-26
+tags:
+  - blog
+---
+
+## Introduction
+
+Today, the most important thing you can do for your site is make sure it
+performs well when visited from a phone or tablet. Read on and learn how
+to optimize your site for the mobile browser using Chrome DevTools and an
+Android device.
+
+## Why is Optimizing for the Mobile Web so Important?
+
+### Performance
+
+Mobile devices are getting faster CPUs, more RAM, faster GPUs, and faster
+network access as we transition from 2G and 3G to 4G. Despite the drumbeat
+of progress, mobile devices are underpowered when compared to our
+computers. In more concrete terms, loading network resources takes longer,
+unpacking images takes longer, painting the page takes longer, executing
+scripts takes longer. It’s safe to assume that your page runs 5 to 10
+times slower on a mobile device.
+
+### Battery
+
+Mobile devices are exclusively battery powered. Users of mobile devices want
+that battery to last as long as possible. A sub-optimal site will drain a
+battery much quicker than needed. Minimize network traffic and reduce paints
+to reduce battery drain. When you fetch a resource, the WiFi or cell radio
+must be on, which drains battery. When the browser paints an element, the CPU
+and GPU usage spikes, which also drains battery.
+
+### Engagement
+
+{% Blockquote 'Facebook at Edge Conference' %}
+Performance is there to increase the metric that matters most to you. In
+Facebook we care about scrolling. In an A/B test, we slowed down
+scrolling from 60fps down to 30fps. Engagement collapsed. We said okay,
+therefore scrolling matters.
+{% endBlockquote %}
+
+
+**Mobile users expect to be able to get in and out quickly. The fastest site will get the most engagement.**
+
+## Managing Performance
+
+Chrome ships with a great [set of developer tools.](Xhttps://developer.chrome.com/docs/devtools/)
+This article teaches you how to use these tools to profile your mobile site. If you’re already familiar with Chrome DevTools, great! If not, check these great tutorials:
+
+- [Profiling long paint times](https://developer.chrome.com/blog/profiling-long-paint-times-with-devtools-continuous-painting-mode)
+- [DevTools Tips and Tricks](http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1)
+- more…
+
+Now that you’re caught up, let’s see how to accelerate your mobile site with DevTools. If this is the first time you’ve used Chrome DevTools for Android check out the getting  started guide at the bottom of the article.
+
+## Using Chrome DevTools Remotely
+
+With your Android device tethered to your computer. In desktop Chrome, navigate
+to [http://localhost:9222](http://localhost:9222) and on your
+Android device, open up your site.
+You will be taken to a list of open tabs on your Android device.
+Pick your page from the list of ‘Inspectable pages’.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3vu176K580FJNGlxX99G.png", alt="Inspectable Pages", width="800", height="333" %}
+</figure>
+
+and you will be taken to Chrome DevTools for that page.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/wONT2x7fBMWgLtpXwRAR.png", alt="Remote DevTools", width="628", height="141" %}
+</figure>
+
+Aww… that familiar Chrome DevTools toolbar is right there.
+**The most important thing to understand about remote Chrome DevTools is that they are the same DevTools you’re using today on your desktop.**
+The only difference isthat your Android device is only responsible for the page, while your desktop
+is responsible for DevTools. **Under the hood, the same data is collected and the same functionality is available.**
+
+As an example, I visited [www.sfgate.com/movies](http://www.sfgate.com/movies) on my phone. Using Chrome DevTools on my desktop I hovered over a
+__div__ in the **Elements tool** and, just like it is on the desktop, the __div__ is visually highlighted on my Android device.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/w5XukOsNXf2IX7J1mO3F.png", alt="Source code snippet.", width="511", height="169" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/g56Z03Tsh6OwUR4R4wps.png", alt="Div highlighted.", width="720", height="1280" %}
+</figure>
+
+The  **Elements tool** can also be used to
+toggle styles on and off, which will come in handy when we attempt to
+investigate paint times.
+
+## Shedding Light on Network Access
+
+Network performance is import, and it’s even more important on the mobile web.
+Mobile devices are often on slower connections than our desktop and
+laptop computers. To make sure you’re doing the right thing, take a
+network snapshot by going to the
+**Network tool** and pressing record.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Nh8l3gfgPZ4KXpkBvjvh.png", alt="Network tool.", width="800", height="228" %}
+</figure>
+
+The screenshot shows the network traffic resulting from a Google search.
+Observe the network requests your site makes and find ways to minimize them.
+If your site makes polling requests to the server, you may want to pay
+attention to user activity and avoid polling when the user has been idle.
+The **Network tool** allows you to view the
+raw HTTP headers, useful in case mobile networks are altering them at all.
+
+## Optimizing Paint Times
+
+One of the biggest bottlenecks in mobile web browsers is painting your page.
+Painting is the process of drawing an element on the page with the specified
+styling. When one element is expensive to paint it slows down painting of the
+whole page. Chrome makes an attempt at caching previously painted elements in
+an offscreen buffer. But, on mobile the amount of GPU RAM available is limited,
+limiting the number of elements that can be cached off screen. The side effect
+is **more paints** and
+**each paint is slower than the desktop.**
+In order to have responsive scrolling, you must minimize paint times.
+
+Chrome 25 includes
+**continuous page repaint mode.**
+Continuous page repaint mode never caches painted elements and, instead,
+**paints all elements each frame**. By
+forcing all elements to be painted each frame, it is possible to perform A/B
+testing of paint times by toggling elements on and off, and styles on and off.
+While the process is manual, it’s an invaluable tool for tracking down how
+expensive painting each element on your page is. The first rule of optimization
+club is **measure what you’re trying to optimize to get a baseline**. Let’s work through a simple example.
+
+First, enable continuous page repaint mode:
+
+<figure>
+{% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/Za5mvsDJtw6JW5CZy8gn.mp4", autoplay="true", loop="true", muted="true" %}
+</figure>
+
+After enabling, a graph will be visible in the upper right corner of your
+Android device. The x-axis of the graph is time, divided into frames. The
+y-axis of the graph measures paint time, in milliseconds. You can see that,
+on my device, the page takes 14 milliseconds to paint. The minimum and maximum
+paint times are also shown along with GPU memory used.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NAfLdfXcl5gFyi8bYKsj.png", alt="Before", width="720", height="1280" %}
+</figure>
+
+As an experiment, I set the style on the selected element to be `display: none`. Let’s see how expensive
+the page is to paint now.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uJ0rlan3lXxym949h8PB.png", alt="After.", width="720", height="1280" %}
+</figure>
+
+Paint times went from around 14 milliseconds per frame down to 4 milliseconds
+per frame. In other words, painting that one element took approximately 10
+milliseconds. By following the process of toggling elements on and off and
+styles on and off you can quickly narrow in on the expensive parts of your
+page. Remember, faster paint times means less jank, a longer battery and more
+engagement from your users. When you’re ready to dig deeper, be sure to read [this great article on continuous page repaint mode.](http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode)
+
+## Advanced Features
+
+### about:tracing
+
+Many of the more advanced developer features available in desktop Chrome are
+also available in Android Chrome too. For example,
+__about:gpu-internals__, __about:appcache-internals__, and __about:net-internals__ are available.
+When investigating a particularly tricky problem you sometimes need more data in order to narrow in on the cause of
+your problem. On the desktop, you might be using about:tracing. If you’re not
+already familiar with __about:tracing__, watch
+[my video on using and exploring the __about:tracing__ profiling tool](https://www.youtube.com/watch?v=nxXkquTPng8). It is
+possible to capture the same data from
+Android Chrome, follow these steps to get started:
+
+1. Download [adb_trace.py](https://github.com/johnmccutchan/adb_trace)
+1. Run adb_trace.py from the command line
+1. Use Chrome on Android
+1. Press enter on the command line, shutting down the adb_trace.py script.
+
+After adb_trace.py completes you will have a JSON file that you can load in
+desktop Chrome’s  __about:tracing__.
+
+## Starting Guide
+
+Now that we've reviewed what remote Chrome DevTools can do, let's cover how
+to get started in your remote debugging session. If you haven’t used them
+before,[read detailed instructions on how to get started](https://developer.chrome.com/docs/devtools/remote-debugging/). If you’ve already
+used them, but have forgotten exactly how to use them, I’ve listed shortened
+instructions here as well.
+
+### 1. Install Android SDK
+You might be wondering why you have to [install the Android SDK](http://developer.android.com/sdk/index.html)
+when you are developing for the web. Included in the SDK is adb (Android Debug Bridge).
+Desktop Chrome needs to be able to communicate with your Android device.
+Chrome doesn’t talk directly with the Android device, instead it routes
+communication through adb.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mYiiyLxpmIxHCpN7mpj2.png", alt="ADB bridge.", width="591", height="269" %}
+</figure>
+
+### 2. Enable USB debugging on your device
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cpkkGI3jIGPBo3WCaUFZ.png", alt="Enable USB Debugging", width="800", height="450" %}
+</figure>
+
+The option for enabling USB debugging can be found in Android Settings. [Enable it](https://developer.chrome.com/docs/devtools/remote-debugging/#troubleshooting).
+
+### 3. Connect to the device
+
+If you haven’t already, connect your Android device to your desktop via USB.
+If this is the first time you’ve used USB debugging you will be given the
+following prompt:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uC0NCAA2FjRlo3DAAC3w.png", alt="Allow USB Debugging", width="800", height="641" %}
+</figure>
+
+If you will be doing remote debug sessions frequently,
+I recommend checking ‘Always allow from this computer’.
+
+### 4. Verify that your device is properly connected
+
+Run __adb devices__ from your command prompt.
+You should see your device listed.
+
+### 5. Enable USB debugging in Chrome
+
+Open **Settings > Advanced > DevTools** and
+check the __Enable USB Web debugging__ option as shown here:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yNf71EghRpVrnnJhNYwz.png", alt="Allow USB Debugging", width="400", height="711" %}
+</figure>
+
+### 6. Creating a DevTools connection to your Android device
+
+Run the following command:
+
+```shell
+adb forward tcp:9222 localabstract:chrome_devtools_remote
+```
+
+creates a bridge between your desktop machine and your Android device via adb.
+If you run into any issues getting to this point, read over the detailed setup
+instructions [here](https://developer.chrome.com/docs/devtools/remote-debugging/).
+
+### 7. Verifying you're good to go
+
+Verify that your device is properly connected by opening Chrome on your
+desktop and navigating to [http://localhost:9222](http://localhost:9222). If you get a
+404, another error, or don’t see something like the following:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3vu176K580FJNGlxX99G.png", alt="Inspectable pages.", width="800", height="333" %}
+</figure>
+
+Read over the detailed setup instructions [here](https://developer.chrome.com/docs/devtools/remote-debugging/).
+
+## Conclusion
+
+Mobile users are often in a hurry and need to quickly get that important piece of information from your page. It is your duty as a mobile site builder to ensure that the page loads quickly and performs well on mobile. If not, user engagement will drop. Remote Chrome DevTools are functionally equivalent to their desktop counterparts. The UI is similar enough that you don’t need to learn a new set of tools. In other words, your work flow carries over. Remember,
+**Facebook isn’t invincible to performance problems and your site isn’t either. Performant sites get more user engagement.**
diff --git a/src/site/content/en/blog/mobile-touch/index.md b/src/site/content/en/blog/mobile-touch/index.md
new file mode 100644
index 00000000000..492cadf3bc7
--- /dev/null
+++ b/src/site/content/en/blog/mobile-touch/index.md
@@ -0,0 +1,342 @@
+---
+layout: post
+title: Multi-touch web development
+authors:
+  - smus
+date: 2011-08-21
+tags:
+  - blog
+---
+
+## Introduction
+
+Mobile devices such as smartphones and tablets usually have a capacitive
+touch-sensitive screen to capture interactions made with the user's fingers. As
+the mobile web evolves to enable increasingly sophisticated applications, web
+developers need a way to handle these events. For example, nearly any
+fast-paced game requires the player to press multiple buttons at once, which,
+in the context of a touchscreen, implies multi-touch. 
+
+Apple introduced their [touch events API](http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/doc/uid/TP40009358) in iOS 2.0. Android has been catching up to this de-facto
+standard and closing the gap. Recently a W3C working group has come together to
+work on this [touch events specification](http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html).
+
+In this article I’ll dive into the touch events API provided by iOS and
+Android devices, as well as desktop Chrome on hardware that supports touch, and explore what sorts of applications you can build, present some
+best practices, and cover useful techniques that make it easier to develop
+touch-enabled applications.
+
+## Touch events
+Three basic touch events are outlined in the spec and implemented
+widely across mobile devices:
+
+- **touchstart**: a finger is placed on a DOM element.
+- **touchmove**: a finger is dragged along a DOM element.
+- **touchend**: a finger is removed from a DOM element.
+
+Each touch event includes three lists of touches:
+
+- **touches**: a list of all fingers currently on the screen.
+- **targetTouches**: a list of fingers on the current DOM element.
+- **changedTouches**: a list of fingers involved in the current
+event. For example, in a touchend event, this will be the finger that was removed.
+
+These lists consist of objects that contain touch information:
+
+- **identifier**: a number that uniquely identifies the current finger in the touch session.
+- **target**: the DOM element that was the target of the action.
+- **client/page/screen coordinates**: where on the screen the action happened.
+- **radius coordinates and rotationAngle**: describe the ellipse that approximates finger shape.
+
+## Touch-enabled apps
+
+The **touchstart**, **touchmove**, and
+**touchend** events provide a rich enough feature set to support
+virtually any kind of touch-based interaction – including all of the usual
+multi-touch gestures like pinch-zoom, rotation, and so on. 
+
+This snippet lets you drag a DOM element around using single-finger
+touch:
+
+```js
+var obj = document.getElementById('id');
+obj.addEventListener('touchmove', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    obj.style.left = touch.pageX + 'px';
+    obj.style.top = touch.pageY + 'px';
+  }
+}, false);
+```
+
+Below is a [sample](https://github.com/borismus/MagicTouch/blob/master/samples/tracker.html)
+that displays all current touches on the screen.  It’s useful just to get a
+feeling for the responsiveness of the device.
+
+<figure>
+<a href="https://github.com/borismus/MagicTouch/blob/master/samples/tracker.html">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Piarbck9MukTti9Kbadd.png", alt="Finger tracking.", width="650", height="217" %}
+</a>
+</figure>
+
+```js
+// Setup canvas and expose context via ctx variable
+canvas.addEventListener('touchmove', function(event) {
+  for (var i = 0; i < event.touches.length; i++) {
+    var touch = event.touches[i];
+    ctx.beginPath();
+    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
+    ctx.fill();
+    ctx.stroke();
+  }
+}, false);
+```
+
+### Demos
+
+A number of interesting multi-touch demos are already in the wild, such
+as this [canvas-based drawing](http://paulirish.com/demo/multi) demo
+by Paul Irish and others.
+
+<figure >
+<a href="http://paulirish.com/demo/multi">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6MOW324g39nsDYgL3IA3.png", alt="Drawing screenshot", width="650", height="244" %}
+</a>
+</figure>
+
+And [Browser Ninja](http://borismus.github.com/mobile-web-samples/browser-ninja/), a tech
+demo that is a Fruit Ninja clone using CSS3 transforms and transitions, as well as
+canvas:
+
+<figure >
+<a href="http://borismus.github.com/mobile-web-samples/browser-ninja/">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/C7cAmEUzjayqdfdwuhuk.png", alt="Browser ninja", width="650", height="336" %}
+</a>
+</figure>
+
+## Best practices
+
+### Prevent zooming
+
+Default settings don't work very well for multi-touch, since your swipes and
+gestures are often associated with browser behavior, such as scrolling and
+zooming.
+
+To disable zooming, setup your viewport so that it is not user scalable using
+the following meta tag:
+
+```html
+<meta name="viewport" 
+  content="width=device-width, initial-scale=1.0, user-scalable=no>
+```
+
+Check out [this mobile HTML5 article](https://www.html5rocks.com/mobile/mobifying.html#toc-meta-viewport) for more information on setting your viewport.
+
+### Prevent scrolling
+
+Some mobile devices have default behaviors for touchmove, such as the
+classic iOS overscroll effect, which causes the view to bounce back when
+scrolling exceeds the bounds of the content. This is confusing in many
+multi-touch applications, and can easily be disabled:
+
+```js
+document.body.addEventListener('touchmove', function(event) {
+  event.preventDefault();
+}, false); 
+```
+
+### Render carefully
+
+If you are writing a multi-touch application that involves complex
+multi-finger gestures, be careful how you react to touch events, since you will
+be handling so many at once. Consider the sample in the previous section that
+draws all touches on the screen. You could draw as soon as there is a touch
+input:
+
+```js
+canvas.addEventListener('touchmove', function(event) {
+  renderTouches(event.touches);
+}, false);
+```
+
+But this technique does not scale with number of fingers on the screen. 
+Instead, you could track all of the fingers, and render in a loop to get far
+better performance:
+
+```js
+var touches = []
+canvas.addEventListener('touchmove', function(event) {
+  touches = event.touches;
+}, false);
+
+// Setup a 60fps timer
+timer = setInterval(function() {
+  renderTouches(touches);
+}, 15);
+```
+
+{% Aside %}
+**Tip:** setInterval is not great for animations, since it doesn't take into
+account the browser's own rendering loop. Modern desktop browsers provide <a
+href="/tutorials/speed/html5/#toc-request-ani-frame">requestAnimationFrame</a>,
+which is a much better option for performance and battery life reasons. Once
+supported in mobile browsers, this will be the preferred way of doing
+things.
+{% endAside %}
+
+### Make use of targetTouches and changedTouches
+
+Remember that event.touches is an array of **ALL**
+fingers in contact with the screen, not just the ones on the DOM element's
+target. You might find it much more useful to use event.targetTouches or
+event.changedTouches instead.
+
+Finally, since you are developing for mobile, you should be aware of 
+general mobile best practices, which are covered in [Eric Bidelman's article](https://www.html5rocks.com/mobile/mobifying.html), as well as this [W3C document](http://www.w3.org/TR/mwabp/).
+
+## Device support
+
+Unfortunately, touch event implementations vary greatly in completeness and
+quality. I wrote a [diagnostics script](https://github.com/borismus/MagicTouch/blob/master/index.html) that displays some basic information about the touch API
+implementation, including which events are supported, and touchmove firing
+resolution. I tested Android 2.3.3 on Nexus One and Nexus S hardware, Android
+3.0.1 on Xoom, and iOS 4.2 on iPad and iPhone.
+
+In a nutshell, all tested browsers support the **touchstart**, 
+**touchend**, and **touchmove** events. 
+
+The spec provides three additional touch events, but no tested browsers
+support them: 
+
+- **touchenter**: a moving finger enters a DOM element.
+- **touchleave**: a moving finger leaves a DOM element.
+- **touchcancel**: a touch is interrupted (implementation specific).
+
+Within each touch list, the tested browsers also provide the
+**touches**, **targetTouches** and
+**changedTouches** touch lists. However, no tested browsers
+support radiusX, radiusY or rotationAngle, which specify the shape of the 
+finger touching the screen.
+
+During a touchmove, events fire at roughly 60 times a second across all
+tested devices.
+
+### Android 2.3.3 (Nexus)
+
+On the Android Gingerbread Browser (tested on Nexus One and Nexus S), there
+is no multi-touch support. This is a [known issue](http://code.google.com/p/android/issues/detail?id=11909).
+
+### Android 3.0.1 (Xoom)
+
+On Xoom's browser, there is basic multi-touch support, but it only works on
+a single DOM element. The browser does not correctly respond to two
+simultaneous touches on different DOM elements. In other words, the following
+will react to two simultaneous touches:
+
+```js
+obj1.addEventListener('touchmove', function(event) {
+  for (var i = 0; i < event.targetTouches; i++) {
+    var touch = event.targetTouches[i];
+    console.log('touched ' + touch.identifier);
+  }
+}, false);
+```
+
+But the following will not:
+
+```js
+var objs = [obj1, obj2];
+for (var i = 0; i < objs.length; i++) {
+  var obj = objs[i];
+  obj.addEventListener('touchmove', function(event) {
+    if (event.targetTouches.length == 1) {
+      console.log('touched ' + event.targetTouches[0].identifier);
+    }
+  }, false);
+}
+```
+
+### iOS 4.x (iPad, iPhone)
+
+iOS devices fully support multi-touch, are capable of tracking quite a few
+fingers and provide a very responsive touch experience in the browser.
+
+## Developer tools
+
+In mobile development, it's often easier to start prototyping on the desktop
+and then tackle the mobile-specific parts on the devices you intend to support.
+Multi-touch is one of those features that's difficult to test on the PC, since
+most PCs don't have touch input.
+
+Having to test on mobile can lengthen your development cycle, since every
+change you make needs to be pushed out to a server and then loaded on the
+device. Then, once running, there’s little you can do to debug your
+application, since tablets and smartphones lack web developer tooling.
+
+A solution to this problem is to simulate touch events on your development
+machine. For single-touches, touch events can be simulated based on mouse
+events. Multi-touch events can be simulated if you have a device with touch
+input, such as a modern Apple MacBook.
+
+### Single-touch events
+
+If you would like to simulate single-touch events on your desktop, Chrome provides touch event emulation from the developer tools.  Open up the Developer tools, then select the Settings gear, then "Overrides" or "Emulation", and turn on "Emulate touch events".
+
+For other browsers, you may wish to try out [Phantom Limb](http://www.vodori.com/blog/phantom-limb.html), which 
+simulates touch events on pages and also gives a giant hand to boot.
+
+There's also the [Touchable](https://github.com/dotmaster/Touchable-jQuery-Plugin)
+jQuery plugin that unifies touch and mouse events across platforms.
+
+### Multi-touch events
+
+To enable your multi-touch web application to work in your browser on your
+multi-touch trackpad (such as a Apple MacBook or MagicPad), I've created the [MagicTouch.js polyfill](http://github.com/borismus/MagicTouch). It
+captures touch events from your trackpad and turns them into
+standard-compatible touch events.
+
+1. Download and install the [npTuioClient NPAPI plugin](https://github.com/fajran/npTuioClient) into
+~/Library/Internet Plug-Ins/.
+1. Download the [TongSeng TUIO app](https://github.com/fajran/tongseng) for Mac’s MagicPad and start
+the server.
+1. Download [MagicTouch.js](http://github.com/borismus/MagicTouch), a javascript library to
+simulate spec-compatible touch events based on npTuioClient callbacks.
+1. Include the magictouch.js script and npTuioClient plugin in your
+application as follows:
+
+```html
+<head>
+  ...
+  <script src="/path/to/magictouch.js"></script>
+</head>
+
+<body>
+  ...
+  <object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
+    Touch input plugin failed to load!
+  </object>
+</body>
+```
+
+You may need to enable the plugin.
+
+A live demo with magictouch.js is available at [paulirish.com/demo/multi](http://www.paulirish.com/demo/multi):
+
+{% YouTube id="6wL-pLX9Kq0" %}
+
+I tested this approach only with Chrome 10, but it should work on other
+modern browsers with only minor tweaks.
+
+If your computer does not have multi-touch input, you can simulate touch
+events using other TUIO trackers, such as the [reacTIVision](http://reactivision.sourceforge.net/). For
+more information, see the [TUIO project page](http://www.tuio.org/).
+
+Note that your gestures might be identical to OS-level multi-touch gestures.
+On OS X, you can configure system-wide events by going to the Trackpad
+preference pane in System Preferences.
+
+As multi-touch features become more widely supported across mobile browsers,
+I'm very excited to see new web applications take full advantage of this rich
+API.
diff --git a/src/site/content/en/blog/mobile-touchandmouse/index.md b/src/site/content/en/blog/mobile-touchandmouse/index.md
new file mode 100644
index 00000000000..427d27770b1
--- /dev/null
+++ b/src/site/content/en/blog/mobile-touchandmouse/index.md
@@ -0,0 +1,187 @@
+---
+layout: post
+title: Touch and mouse
+subhead: Together again for the first time
+authors:
+  - chriswilson
+  - paulkinlan
+date: 2013-03-13
+tags:
+  - blog
+---
+
+## Introduction
+
+
+For close to thirty years, desktop computing experiences have centered around a keyboard and a mouse or trackpad as our main user input devices. Over the last decade, however, smartphones and tablets have brought a new interaction paradigm: touch. With the introduction of touch-enabled Windows 8 machines, and now with the release of the awesome touch-enabled Chromebook Pixel, touch is now becoming part of the expected desktop experience. One of the biggest challenges is building experiences that work not only on touch devices and mouse devices, but also on these devices where the user will use both input methods - sometimes simultaneously!
+
+This article will help you understand how touch capabilities are built into the browser, how you can integrate this new interface mechanism into your existing apps and how touch can play nicely with mouse input.
+
+## The State of Touch in the Web Platform
+
+The iPhone was the first popular platform to have dedicated touch APIs built in to the web browser.  Several other browser vendors have created similar API interfaces built to be compatible with the iOS implementation, which is now described by the ["Touch Events version 1" specification](http://www.w3.org/TR/touch-events/). Touch events are supported by Chrome and Firefox on desktop, and by Safari on iOS and Chrome and the Android browser on Android, as well as other mobile browsers like the Blackberry browser.
+
+My colleague Boris Smus wrote a great [HTML5Rocks tutorial on Touch events](http://www.html5rocks.com/en/mobile/touch/) that is still a good way to get started if you haven’t looked at Touch events before.  In fact, if you haven’t worked with touch events before, go read that article now, before you continue.  Go on, I’ll wait.
+
+All done?  Now that you have a basic grounding in touch events, the challenge with writing touch-enabled interactions is that the touch interactions can be quite a bit different from mouse (and mouse-emulating trackpad and trackball) events - and although touch interfaces typically try to emulate mice, that emulation isn’t perfect or complete; you really need to work through both interaction styles, and may have to support each interface independently.
+
+## Most Importantly: The User May Have Touch And a Mouse
+
+Many developers have built sites that statically detect whether an environment supports touch events, and then make the assumption that they only need to support touch (and not mouse) events.  This is now a faulty assumption - instead, just because touch events are present does not mean the user is primarily using that touch input device.  Devices such as the Chromebook Pixel and some Windows 8 laptops now support BOTH Mouse and Touch input methods, and more will in the near future.  On these devices, it is quite natural for users to use both the mouse and the touch screen to interact with applications, so  "supports touch" is not the same as "doesn’t need mouse support."  You can’t think of the problem as "I have to write two different interaction styles and switch between them," you need to think through how both interactions will work together as well as independently.  On my Chromebook Pixel, I frequently use the trackpad, but I also reach up and touch the screen - on the same application or page, I do whatever feels most natural at the moment.  On the other hand, some touchscreen laptop users will rarely if ever use the touchscreen at all - so the presence of touch input shouldn’t disable or hinder mouse control.
+
+Unfortunately, it can be hard to know if a user’s browser environment supports touch input or not; ideally, a browser on a desktop machine would always indicate support for touch events so a touchscreen display could be attached at any time (e.g. if a touchscreen attached through a [KVM](http://en.wikipedia.org/wiki/KVM_switch) becomes available).  For all these reasons, your applications shouldn’t attempt to switch between touch and mouse - just support both!
+
+{% Aside %}
+In IE10 on Windows 8, Microsoft introduced a new model called Pointer Events.  Pointer Events are a unification of Mouse Events and touch input, as well as other input methods such as pen input.  There is [work to standardize the Pointer Event model at the W3C](http://www.w3.org/TR/2013/WD-pointerevents-20130219/), and in the short term, there are libraries out there like [PointerEvents](https://github.com/toolkitchen/PointerEvents) and [Hand.js](http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx) that you can use to prototype how Pointer Events could work in your code to remove some of the need to independently support mouse and touch.  For really great touch and mouse interaction, you may need to customize your user experience for mouse and touch separately, but unified event handling can make this easier in many scenarios.  However, there are significant challenges with this model - namely, it requires supporting redundant input models, and it’s not broadly supported yet - and it will take some time to settle down into a solid, cross-browser standard.
+
+In the meantime, the best advice is to support both mouse and touch interaction models.  There are a lot of challenges with simultaneously supporting touch and mouse events, so this article explains those challenges and the strategies to overcome them.  Additionally, some of this advice is just general "implementing touch" advice, so it may be redundant if you are already used to implementing touch in a mobile context.
+{% endAside %}
+
+## Supporting Mouse and Touch Together
+
+### #1 - Clicking and Tapping - the "Natural" Order of Things
+
+The first problem is that touch interfaces typically try to emulate mouse clicks - obviously, since touch interfaces need to work on applications that have only interacted with mouse events before!  You can use this as a shortcut - because "click" events will continue to be fired, whether the user clicked with a mouse or tapped their finger on the screen.  However, there are a couple of problems with this shortcut.
+
+First, you have to be careful when designing more advanced touch interactions: when the user uses a mouse it will respond via a click event, but when the user touches the screen both touch and click events will occur.  For a single click the order of events is:
+
+1. touchstart
+1. touchmove
+1. touchend
+1. mouseover
+1. mousemove
+1. mousedown
+1. mouseup
+1. click
+
+This, of course, means that if you are processing touch events like touchstart, you need to make sure that you don’t process the corresponding mousedown and/or click event as well.  If you can cancel the touch events (call preventDefault() inside the event handler), then no mouse events will get generated for touch.  One of the most important rules of touch handlers is:
+
+{% Aside 'important' %}
+Use preventDefault() inside touch event handlers, so the default mouse-emulation handling doesn’t occur.
+{% endAside %}
+
+However, this also prevents other default browser behavior (like scrolling) - although usually you’re handling the touch event entirely in your handler, and you will WANT to disable the default actions.  In general, you’ll either want to handle and cancel all touch events, or avoid having a handler for that event.
+
+Secondly, when a user taps on an element in a web page on a mobile device, pages that haven’t been designed for mobile interaction have a delay of at least 300 milliseconds between the touchstart event and the processing of mouse events (mousedown). It could be done using Chrome, you can turn on ["Emulate touch events"](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events) in Chrome Developer Tools to help you test touch interfaces on a non-touch system!
+
+This delay is to allow the browser time to determine if the user is performing another gesture - in particular, double-tap zooming.  Obviously, this can be problematic in cases where you want to have instantaneous response to a finger touch.  There is [ongoing work](https://code.google.com/p/chromium/issues/detail?id=169642) to try to limit the scenarios in which this delay occurs automatically.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+        <th>Chrome for Android</th>
+        <th>Android Browser</th>
+        <th>Opera Mobile for Android)</th>
+        <th>Firefox for Android</th>
+        <th>Safari iOS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Non-scalable viewport</td>
+        <td>No delay</td>
+        <td>300ms</td>
+        <td>300ms</td>
+        <td>No delay</td>
+        <td>300ms</td>
+      </tr>
+      <tr>
+        <td>No Viewport</td>
+        <td>300ms</td>
+        <td>300ms</td>
+        <td>300ms</td>
+        <td>300ms</td>
+        <td>300ms</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+The first and easiest way to avoid this delay is to "tell" the mobile browser that your page is not going to need zooming - which can be done using a fixed viewport, e.g. by inserting into your page:
+
+```html
+<meta name="viewport" content="width=device-width,user-scalable=no">
+```
+
+This isn’t always appropriate, of course - this disables pinch-zooming, which may be required for accessibility reasons, so use it sparingly if at all (if you do disable user scaling, you may want to provide some other way to increase text readability in your application).  Also, for Chrome on desktop class devices that support touch, and other browsers on mobile platforms when the page has viewports that are not scalable, [this delay does not apply.](http://paulkinlan.github.com/touch-patterns/touch-event-order-no-viewport)
+
+### #2: Mousemove Events Aren’t Fired by Touch
+
+It’s important to note at this point that the emulation of mouse events in a touch interface does not typically extend to emulating mousemove events - so if you build a beautiful mouse-driven control that uses mousemove events, it probably won’t work with a touch device unless you specifically add touchmove handlers too.
+
+Browsers typically automatically implement the appropriate interaction for touch interactions on the HTML controls - so, for example, HTML5 Range controls will just work when you use touch interactions.  However, if you’ve implemented your own controls, they will likely not work on click-and-drag type interactions; in fact, some commonly used libraries (like jQueryUI) do not yet natively support touch interactions in this way (although for jQueryUI, there are several monkey-patch fixes to this issue).  This was one of the first problems I ran into when upgrading my  Web Audio Playground application to work with touch - the sliders were jQueryUI-based, so they did not work with click-and-drag interactions.  I changed over to HTML5 Range controls, and they worked.  Alternately, of course, I could have simply added touchmove handlers to update the sliders, but there’s one problem with that…
+
+### #3: Touchmove and MouseMove Aren’t the Same Thing
+
+A pitfall I've seen a few developers fall into is having touchmove and mousemove handlers call into the same codepaths.  The behavior of these events is very close, but subtly different - in particular, **__touch events always target the element where that touch STARTED, while mouse events target the element currently under the mouse cursor.__**   This is why we have mouseover and mouseout events, but there are no corresponding touchover and touchout events - only touchend. 
+
+The most common way this can bite you is if you happen to remove (or relocate) the element that the user started touching. For example, imagine an image carousel with a touch handler on the entire carousel to support custom scrolling behavior. As available images change, you remove some `<img>` elements and add others. If the user happens to start touching on one of those images and then you remove it, your handler (which is on an ancestor of the img element) will just stop receiving touch events (because they’re being dispatched to a target that’s no longer in the tree) - it'll look like the user is holding their finger in one place even though they may have moved and eventually removed it.
+
+You can of course avoid this problem by avoiding removing elements that have (or have ancestors that have) touch handlers while a touch is active. Alternately, the best guidance is rather than register static touchend/touchmove handlers, wait until you get a touchstart event and then add touchmove/touchend/touchcancel handlers to the **__target__** of the touchstart event (and remove them on end/cancel). This way you'll continue to receive events for the touch even if the target element is moved/removed. You can play with this a little [here](http://www.rbyers.net/eventTest.html) - touch the red box and while holding hit escape to remove it from the DOM.
+
+### #4: Touch and :Hover
+
+The mouse pointer metaphor separated cursor position from actively selecting, and this allowed developers to use hover states to hide and show information that might be pertinent to the users.  However, most touch interfaces right now do not detect a finger "hovering" over a target - so providing semantically important information (e.g. providing "what is this control?" popup) based on hovering is a no-no, unless you also give a touch-friendly way to access this information.  You need to be careful about how you use hovering to relay information to users.
+
+Interestingly enough, though, the CSS :hover pseudoclass CAN be triggered by touch interfaces in some cases - tapping an element makes it :active while the finger is down, and it also acquires the :hover state.  (With Internet Explorer, the :hover is only in effect while the user’s finger is down - other browsers keep the :hover in effect until the next tap or mouse move.) This is a good approach to making pop-out menus work on touch interfaces - a side effect of making an element active is that the :hover state is also applied.  For example:
+
+```html
+<style>
+img ~ .content {
+  display:none;
+}
+
+img:hover ~ .content {
+  display:block;
+}
+</style>
+
+<img src="/awesome.png">
+<div class="content">This is an awesome picture of me</div>
+```
+
+Once another element is tapped the element is no longer active, and the hover state disappears, just as if the user was using a mouse pointer and moved it off the element.  You may wish to wrap the content in an `<a>` element in order to make it a tabstop as well - that way the user can toggle the extra information on a mouse hover or click, a touch tap, or a keypress, with no JavaScript required.  I was pleasantly surprised as I began work to make my [Web Audio Playground](http://webaudioplayground.appspot.com/) to work well with touch interfaces that my pop-out menus already worked well on touch, because I’d used this kind of structure!  
+
+The above method works well for mouse pointer based interfaces, as well as for touch interfaces. This is in contrast to using "title" attributes on hover, which will NOT show up when the element is activated:
+
+```html
+<img src="/awesome.png" title="this doesn't show up in touch">
+```
+
+{% Aside %}
+Additional hover-like semantics you may wish to consider:
+
+- Implement "touch and hold" as a "secondary click".  On many devices - mobile and desktop alike - a touch-and-hold is already used to implement a context menu, so you shouldn’t use your own timer - listen for the oncontextmenu event, and be sure to cancel the default behavior.
+- Make the UI take two single touch events to complete the click - the first click will show the hover information, the second will complete the action.
+- If you are implementing hover effects as a way to provide help information - "what does this control do" sort of information - you may wish to just provide a "help mode" that toggles on this behavior.
+{% endAside %}
+
+### #5: Touch vs. Mouse Precision
+
+While mice have a conceptual disassociation from reality, it turns out that they are extremely accurate, as the underlying operating system generally tracks exact pixel precision for the cursor.  Mobile developers on the other hand have learned that finger touches on a touch screen are not as accurate, mostly because of the size of the surface area of the finger when in contact with the screen (and partly because your fingers obstruct the screen).
+
+Many individuals and companies have done extensive user research on how to design applications and sites that are accommodating of finger based interaction, and many books have been written on the topic.  The basic advice is to increase the size of the touch targets by increasing the padding, and reduce the likelihood of incorrect taps by increasing the margin between elements.  (Margins are not included in the hit detection handling of touch and click events, while padding is.)  One of the primary fixes I had to make to the Web Audio Playground was to increase the sizes of the connection points so they were more easily touched accurately.
+
+Many browser vendors who are handling touch based interfaces have also introduced logic into the browser to help target the correct element when a user touches the screen and reduce the likelihood of incorrect clicks - although this usually only corrects click events, not moves (although Internet Explorer appears to modify mousedown/mousemove/mouseup events as well).
+
+### #6: Keep Touch Handlers Contained, or They’ll Jank Your Scroll
+
+It’s also important to keep touch handlers confined only to the elements where you need them; touch elements can be very high-bandwidth, so it’s important to avoid touch handlers on scrolling elements (as your processing may interfere with browser optimizations for fast jank-free touch scrolling - modern browsers try to scroll on a GPU thread, but this is impossible if they have to check with javascript first to see if each touch event is going to be handled by the app).  You can check out [an example](http://www.rbyers.net/janky-touch-scroll.html) of this behavior.
+
+One piece of guidance to follow to avoid this problem is to make sure that if you are only handling touch events in a small portion of your UI, you only attach touch handlers there (not, e.g., on the `<body>` of the page); in short, limit the scope of your touch handlers as much as possible.
+
+### #7: Multi-touch
+
+The final interesting challenge is that although we’ve been referring to it as "Touch" user interface, nearly universally the support is actually for Multi-touch - that is, the APIs provide more than one touch input at a time.  As you begin to support touch in your applications, you should consider how multiple touches might affect your application.
+
+If you have been building apps primarily driven by mouse, then you are used to building with at most one cursor point - systems don’t typically support multiple mice cursors.  For many applications, you will be just mapping touch events to a single cursor interface, but most of the hardware that we have seen for desktop touch input can handle at least 2 simultaneous inputs, and most new hardware appears to support at least 5 simultaneous inputs.  For developing an [onscreen piano keyboard](http://webaudiodemos.appspot.com/midi-synth/index.html), of course, you would want to be able to support multiple simultaneous touch inputs.
+
+The currently implemented W3C Touch APIs have no API to determine how many touch points the hardware supports, so you’ll have to use your best estimation for how many touch points your users will want - or, of course, pay attention to how many touch points you see in practice and adapt.  For example, in a piano application, if you never see more than two touch points you may want to add some "chords" UI.  The PointerEvents API  does have an API to determine the capabilities of the device.
+
+## Touching Up
+
+Hopefully this article has given you some guidance on common challenges in implementing touch alongside mouse interactions.  More important than any other advice, of course, is that you need to test your app on mobile, tablet, and combined mouse-and-touch desktop environments.  If you don’t have touch+mouse hardware, use Chrome’s "[Emulate touch events](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events)" to help you test the different scenarios.
+
+It’s not only possible, but relatively easy following these pieces of guidance, to build engaging interactive experiences that work well with touch input, mouse input, and even both styles of interaction at the same time.
diff --git a/src/site/content/en/blog/model-viewer/index.md b/src/site/content/en/blog/model-viewer/index.md
new file mode 100644
index 00000000000..6570622cbef
--- /dev/null
+++ b/src/site/content/en/blog/model-viewer/index.md
@@ -0,0 +1,157 @@
+---
+title: 'The <model-viewer> web component'
+subhead: Adding 3D models to a website can be tricky; &lt;model-viewer&gt; is as easy as writing HTML.
+authors:
+  - joemedley
+date: 2019-02-06
+updated: 2020-08-21
+hero: image/admin/MY2KWQPCX2P9kDNLX69Q.jpg
+description: |
+  Adding 3D models to a website is tricky for a variety of reasons including
+  the hosting issues and the high bar of 3D programming. That's why we're
+  introducing the &lt;model-viewer&gt; web component to let you use 3D models
+  declaratively.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - 3d
+  - augmented-reality
+  - virtual-reality
+  - webxr
+  # - model-viewer
+feedback:
+  - api
+---
+
+Adding 3D models to a website is tricky. 3D models ideally will be shown in
+a viewer that can work responsively on all browsers including smartphones,
+desktop, or even new head-mounted displays. The viewer should support
+progressive enhancement for performance and rendering quality. It should support
+use cases on all devices ranging from older, lower-powered smartphones to newer
+devices that support augmented reality. It should stay up to date with current
+technologies. It should be performant and accessible. However, building such a
+viewer requires specialty 3D programming skills, and can be a challenge for web
+developers that want to host their own models instead of using a third-party
+hosting service.
+
+
+To help with that, the `<model-viewer>` web component, which just released
+[version 1.1](https://modelviewer.dev/), lets you declaratively add a 3D model
+to a web page, while hosting the model on your own site. The web component
+supports responsive design and use cases like augmented reality on some devices,
+and it includes features for accessibility, rendering quality, and
+interactivity.  The goal of the component is to enable adding 3D models to your
+website without understanding the underlying technology and platforms.
+
+{% Aside %}
+We're always [updating and
+improving](https://github.com/google/model-viewer/releases)
+`<model-viewer>`. Check out the [`<model-viewer>`
+homepage](https://modelviewer.dev/) to explore what &lt;model-viewer&gt; 1.1 can do.
+{% endAside %}
+
+## What is a web component?
+
+A web component is a custom HTML element built from standard web platform
+features. A web component behaves for all intents and purposes like a standard
+element. It has a unique tag, it can have properties and methods, and it can
+fire and respond to events. In short, you don't need to know anything special to
+use any web component, much less `<model-viewer>`.
+
+In this article, I will show you things that are particular to `<model-viewer>`.
+If you're interested in learning more about web components,
+[webcomponents.org](https://www.webcomponents.org/) is a good place to start.
+
+## What can &lt;model-viewer> do?
+
+I'll show you a few current capabilities of `<model-viewer>`. You'll get a great
+experience today, and `<model-viewer>` will get better over time as Google adds
+new features and improves rendering quality. The examples I'm provided are just
+to give you a sense of what it does. If you want to try them there are
+installation and usage instructions in [its GitHub
+repo](https://modelviewer.dev/).
+
+### Basic 3D models
+
+Embedding a 3D model is as simple as the markup below. By
+[using glb files](https://www.marxentlabs.com/glb-files/), we've ensured that this component will work on any major
+browser.
+
+```html
+<!-- Import the component -->
+<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
+<!-- Use it like any other HTML element -->
+<model-viewer id="mv-demo" shadow-intensity="1" src="./spacesuit.glb"
+alt="A 3D model of an astronaut" auto-rotate camera-controls
+poster="./spacesuit.jpg"></model-viewer>
+```
+
+That code renders like this:
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">
+  <iframe
+    src="https://model-viewer-shark.glitch.me/"
+    title="<model-viewer> on Glitch"
+    allow="geolocation; microphone; camera; midi; vr; encrypted-media;
+clipboard; clipboard-read; clipboard-write"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### Adding motion and interactivity
+
+The `auto-rotate` and `camera-controls` attributes provide motion and user
+control. Those aren't the only possible attributes. See the documentation for [a
+complete list of attributes](https://modelviewer.dev/#section-attributes).
+
+```html
+<model-viewer src="assets/Astronaut.glb" auto-rotate camera-controls>
+```
+
+### Delayed loading with poster images
+
+Some 3D models can be very large, so you might want to hold off loading them
+until the user has requested the model. For this, the component has a built-in
+means of delaying loading until the user wants it. That's what the `poster`
+attribute does.
+
+```html
+<model-viewer src="assets/Astronaut.glb" controls auto-rotate
+poster="./spacesuit.jpg">
+```
+
+To show your users that it's a 3D model, and not just an image, you can provide
+some preload animation by using script to switch between multiple posters.
+
+```html
+<model-viewer id="toggle-poster" src="assets/Astronaut.glb" controls
+auto-rotate poster="assets/poster2.png"></model-viewer>
+<script>
+    const posters = ['poster.png', 'poster2.png'];
+    let i = 0;
+    setInterval(() =>
+        document.querySelector('#toggle-poster').setAttribute('poster',
+            `assets/${posters[i++ % 2]}`), 2000);
+</script>
+```
+
+### Responsive design
+
+The component handles some types of [responsive design](/responsive-web-design-basics), scaling for both mobile
+and desktop. It can also manage multiple instances on a page and uses
+[Intersection
+Observer](https://developer.mozilla.org/docs/Web/API/IntersectionObserver)
+to conserve battery power and GPU cycles when a model isn't visible.
+
+<figure>
+  {% Img src="image/admin/8jXl21iFxh7O3QeEeL0k.png", alt="Multiple spacesuit images representing responsiveness.", width="800", height="453" %}
+  <figcaption>Multiple spacesuit images representing responsiveness.</figcaption>
+</figure>
+
+## Looking Forward
+
+[Install `<model-viewer>` and give it a try](https://modelviewer.dev/) The
+project team wants `<model-viewer>` to be useful to you, and wants your input on
+its future. That's not to say they don't have ideas. So give it a try and let us
+know what you think by [filing an issue in
+GitHub](https://github.com/google/model-viewer/issues).
diff --git a/src/site/content/en/blog/module-workers/hero.jpg b/src/site/content/en/blog/module-workers/hero.jpg
deleted file mode 100644
index 01f4b9f5442..00000000000
Binary files a/src/site/content/en/blog/module-workers/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/module-workers/index.md b/src/site/content/en/blog/module-workers/index.md
index 95408f1e367..5ebbf9ee136 100644
--- a/src/site/content/en/blog/module-workers/index.md
+++ b/src/site/content/en/blog/module-workers/index.md
@@ -3,7 +3,7 @@ title: Threading the web with module workers
 subhead: |
   Moving heavy lifting into background threads is now easier with JavaScript modules in web workers.
 date: 2019-12-17
-hero: hero.jpg
+hero: image/admin/I7oZWRPOJABk1YBGGisK.jpg
 alt: Computer processor graphic
 authors:
   - developit
@@ -12,9 +12,11 @@ description: |
   thread while keeping the ergonomic and performance benefits of standard JavaScript modules.
 tags:
   - blog
-  - web-workers
-  - javascript-modules
+  # - web-workers
+  # - javascript-modules
   - modules
+feedback:
+  - api
 ---
 
 JavaScript is single-threaded, which means it can only perform one operation at a time. This is
@@ -24,7 +26,7 @@ complex applications are delivered on the web, there's an increased need for mul
 processing.
 
 On the web platform, the main primitive for threading and parallelism is the [Web
-Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).
+Workers API](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers).
 Workers are a lightweight abstraction on top of [operating system
 threads](https://en.wikipedia.org/wiki/Thread_%28computing%29) that expose a message passing API
 for inter-thread communication. This can be immensely useful when performing costly computations or
@@ -38,7 +40,7 @@ thread and responds by sending back messages of its own:
 
 ```js
 const worker = new Worker('worker.js');
-worker.addEventListener(e => {
+worker.addEventListener('message', e => {
   console.log(e.data);
 });
 worker.postMessage('hello');
@@ -54,7 +56,6 @@ addEventListener('message', e => {
 });
 ```
 
-
 The Web Worker API has been available in most browsers for over ten years. While that
 means workers have excellent browser support and are well-optimized, it also means they long
 predate JavaScript modules. Since there was no module system when workers were designed, the API
@@ -99,7 +100,7 @@ function sayHello() {
 
 For this reason, web workers have historically imposed an outsized effect on the architecture of an
 application. Developers have had to create clever tooling and workarounds to make it possible to
-use web workers without giving up modern development practises. As an example, bundlers like
+use web workers without giving up modern development practices. As an example, bundlers like
 webpack embed a small module loader implementation into generated code that uses `importScripts()`
 for code loading, but wraps modules in functions to avoid variable collisions and simulate
 dependency imports and exports.
@@ -127,7 +128,7 @@ parallel. Module loading also caches parsed code, which means modules that are u
 thread and in a worker only need to be parsed once.
 
 Moving to JavaScript modules also enables the use of [dynamic
-import](https://v8.dev/features/dynamic-import) for lazy-loading code without blocking execution of
+import](https://v8.dev/features/dynamic-import) for lazy loading code without blocking execution of
 the worker. Dynamic import is much more explicit than using `importScripts()` to load dependencies,
 since the imported module's exports are returned rather than relying on global variables.
 
@@ -151,7 +152,7 @@ export function sayHello() {
 
 To ensure great performance, the old `importScripts()` method is not available within module
 workers. Switching workers to use JavaScript modules means all code is loaded in [strict
-mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode). Another
+mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode). Another
 notable change is that the value of `this` in the top-level scope of a JavaScript module is
 `undefined`, whereas in classic workers the value is the worker's global scope. Fortunately, there
 has always been a `self` global that provides a reference to the global scope. It's available in
diff --git a/src/site/content/en/blog/monitor-and-analyze/index.md b/src/site/content/en/blog/monitor-and-analyze/index.md
new file mode 100644
index 00000000000..2bd464f6bcd
--- /dev/null
+++ b/src/site/content/en/blog/monitor-and-analyze/index.md
@@ -0,0 +1,249 @@
+---
+title: Monitor and analyze the app
+subhead: |
+  What tools to use to keep track of and analyze the webpack bundle
+date: 2017-12-18
+updated: 2018-08-17
+authors:
+  - iamakulov
+description: |
+  What tools to use to keep track of and analyze the webpack bundle
+tags:
+  - blog
+---
+
+Even when you configure webpack to make the app as small as possible, it’s still important to keep
+track of it and know what it includes. Otherwise, you can install a dependency that will make the
+app twice as large – and won’t even notice it!
+
+This section describes tools that help you to understand your bundle.
+
+## Keep track of the bundle size
+
+To monitor your app size, use
+[webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard/) during development and
+[bundlesize](https://github.com/siddharthkp/bundlesize) on CI.
+
+### webpack-dashboard
+
+[webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard/) enhances webpack output
+with sizes of dependencies, progress and other details. Here’s how it looks:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/r36mG0ayCfchkuzM61E0.png", alt="A screenshot of the webpack-dashboard output", width="800", height="502" %}
+</figure>
+
+This dashboard helps to track large dependencies – if you add one, you’ll immediately see it in
+the _Modules_ section!
+
+To enable it, install the `webpack-dashboard` package:
+
+```shell
+npm install webpack-dashboard --save-dev
+```
+And add the plugin into the `plugins` section of the config:
+
+```js
+// webpack.config.js
+const DashboardPlugin = require('webpack-dashboard/plugin');
+
+module.exports = {
+    plugins: [
+    new DashboardPlugin(),
+    ],
+};
+```
+
+or using `compiler.apply()` if you’re using an Express-based dev server:
+
+```js
+compiler.apply(new DashboardPlugin());
+```
+
+Feel free to play with the dashboard to find the probable places for improvement! For example,
+scroll through the _Modules_ section to find what libraries are too large and could be replaced with
+smaller alternatives.
+
+### bundlesize
+
+[bundlesize](https://github.com/siddharthkp/bundlesize) verifies that webpack assets don’t exceed
+the specified sizes. Integrate it with a CI to get notified when the app becomes too large:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NHpRP8fC7oMe8YikAtvb.jpg", alt="A screenshot the CI section of a pull request on GitHub. Among
+the CI tools, there’s the Bundlesize output", width="800", height="410" %}
+</figure>
+
+To configure it:
+
+**Find out the maximum sizes**
+
+1. Optimize the app to make it as small as possible. Run the production build.
+
+1. Add the `bundlesize` section into `package.json` with the following
+    content:
+
+    ```json
+    // package.json
+    {
+      "bundlesize": [
+        {
+          "path": "./dist/*"
+        }
+      ]
+    }
+    ```
+
+1. Execute `bundlesize` with [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b):
+
+    ```shell
+    npx bundlesize
+    ```
+
+    This will print the gzipped size of each file:
+
+    ```shell
+    PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
+    PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
+    PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
+    PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
+    ```
+
+1. Add 10-20% to each size, and you’ll get the maximum sizes. This 10-20% margin would let you 
+    develop the app as usual while warning you when its size grows too much.
+
+    **Enable `bundlesize`**
+
+
+1. Install the `bundlesize` package as a development dependency:
+
+    ```shell
+    npm install bundlesize --save-dev
+    ```
+
+1. In the `bundlesize` section in the `package.json`, specify the concrete
+    maximum sizes. For some files (e.g., images), you might want to specify the maximum size per file
+    type, not per each file:
+
+    ```json
+    // package.json
+    {
+      "bundlesize": [
+        {
+          "path": "./dist/*.png",
+          "maxSize": "16 kB",
+        },
+        {
+          "path": "./dist/main.*.js",
+          "maxSize": "20 kB",
+        },
+        {
+          "path": "./dist/vendor.*.js",
+          "maxSize": "35 kB",
+        }
+      ]
+    }   
+    ```
+
+1. Add an npm script to run the check:
+
+    ```json
+    // package.json
+    {
+      "scripts": {
+        "check-size": "bundlesize"
+      }
+    }
+    ```
+
+1. Configure the CI to execute `npm run check-size` on each push. (And [integrate `bundlesize` with GitHub](https://github.com/siddharthkp/bundlesize#2-build-status) if you’re developing the project on it.)
+
+
+
+That’s it! Now, if you run `npm run check-size` or push the code, you’ll see if the output files are
+small enough:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eUxCWBv1swjUd1rr7kw2.png", alt="A screenshot of the bundlesize output. All build
+results are marked with 'Pass'", width="800", height="388" %}
+</figure>
+
+Or, in case of failures:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WpIg5tBzxAXzEZtPMS1Y.png", alt="A screenshot of the bundlesize output. Some build
+results are marked with 'Fail'", width="800", height="590" %}
+</figure>
+
+### Further reading
+
+- Alex Russell [about the real-world loading time we should
+target](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/)
+
+## Analyze why the bundle is so large
+
+You might want to dig deeper into the bundle to see what modules take space in it. Meet
+[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer):
+
+<figure>
+  {% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/fXNWhHRJMRe0ELwJPsd4.mp4", autoplay="true", loop="true", muted="true" %}
+  <figcaption>(Screen recording from <a
+href="https://github.com/webpack-contrib/webpack-bundle-analyzer">github.com/webpack-contrib/webpack-bundle-analyzer</a>)
+</figcaption>
+</figure>
+
+webpack-bundle-analyzer scans the bundle and builds a visualization of what’s inside it. Use this
+visualization to find large or unnecessary dependencies.
+
+To use the analyzer, install the `webpack-bundle-analyzer` package:
+
+```shell
+npm install webpack-bundle-analyzer --save-dev
+```
+
+add a plugin to the webpack config:
+
+```js
+// webpack.config.js
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+  plugins: [
+    new BundleAnalyzerPlugin(),
+  ],
+};
+```
+
+and run the production build. The plugin will open the stats page in a browser.
+
+By default, the stats page shows the size of parsed files (i.e., of files as they appear in
+the bundle). You’ll likely want to compare gzip sizes since that’s closer to what real users
+experience; use the sidebar on the left to switch the sizes.
+
+{% Aside %}
+If you use the
+[ModuleConcatenationPlugin](https://webpack.js.org/plugins/module-concatenation-plugin/), it might
+merge a part of modules in the webpack-bundle-analyzer output, making the report less detailed. If
+you use this plugin, disable it during the analysis.
+{% endAside %}
+
+Here’s what to look for in the report:
+
+- **Large dependencies.** Why are they so large? Are there smaller alternatives (e.g., Preact
+instead of React)? Do you use all the code it includes (e.g., Moment.js includes a lot of locales
+[that are often not used and could be dropped](https://github.com/GoogleChromeLabs/webpack-libs-optimizations#moment))?
+- **Duplicated dependencies.** Do you see the same library repeating in multiple files? (Use, e.g.,
+the `optimization.splitChunks.chunks` option – in webpack 4 – or the `CommonsChunkPlugin` –
+in webpack 3 – to move it into a common file.) Or does the bundle have multiple versions
+of the same library?
+- **Similar dependencies.** Are there similar libraries that do approximately the same job? (E.g.
+`moment` and `date-fns`, or `lodash` and `lodash-es`.) Try sticking with a single tool.
+
+Also, check out Sean Larkin’s [great analysis of webpack
+bundles](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318).
+
+## Summing up
+
+- Use `webpack-dashboard` and `bundlesize` to stay tuned of how large your app is
+- Dig into what builds up the size with `webpack-bundle-analyzer`
+
diff --git a/src/site/content/en/blog/monitor-total-page-memory-usage/hero.jpg b/src/site/content/en/blog/monitor-total-page-memory-usage/hero.jpg
deleted file mode 100644
index a4d73048b51..00000000000
Binary files a/src/site/content/en/blog/monitor-total-page-memory-usage/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/monitor-total-page-memory-usage/index.md b/src/site/content/en/blog/monitor-total-page-memory-usage/index.md
index 60a1d4708b2..6e61e11e940 100644
--- a/src/site/content/en/blog/monitor-total-page-memory-usage/index.md
+++ b/src/site/content/en/blog/monitor-total-page-memory-usage/index.md
@@ -1,29 +1,35 @@
 ---
-title: Monitor your web page's total memory usage with `measureMemory()`
+layout: post
+title: Monitor your web page's total memory usage with `measureUserAgentSpecificMemory()`
 subhead: >
   Learn how to measure memory usage of your web page in production to detect regressions.
 description: >
   Learn how to measure memory usage of your web page in production to detect regressions.
-update: 2020-07-13
+updated: 2022-08-19
 date: 2020-04-13
 authors:
   - ulan
-hero: hero.jpg
+  - bckenny
+hero: image/admin/Ne2U4cUtHG6bJ0YeIkt5.jpg
 alt: >
   Green RAM stick. Photo by Harrison Broadbent on Unsplash.
 origin_trial:
-    url: https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113
+  url: https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113
 tags:
   - blog
   - memory
   - javascript
+feedback:
+  - api
 ---
 
 Browsers manage the memory of web pages automatically. Whenever a web page
 creates an object, the browser allocates a chunk of memory "under the hood" to
 store the object. Since memory is a finite resource, the browser performs
 garbage collection to detect when an object is no longer needed and to free
-the underlying memory chunk. The detection is not perfect though, and it
+the underlying memory chunk.
+
+The detection is not perfect though, and it
 [was proven][halting-problem] that perfect detection
 is an impossible task. Therefore browsers approximate the notion of "an object
 is needed" with the notion of "an object is reachable". If the web page cannot
@@ -32,7 +38,7 @@ then the browser can safely reclaim the object. The difference between these
 two notions leads to memory leaks as illustrated by the following example.
 
 ```javascript
-const object = { a: new Array(1000), b: new Array(2000) };
+const object = {a: new Array(1000), b: new Array(2000)};
 setInterval(() => console.log(object.a), 1000);
 ```
 
@@ -48,16 +54,16 @@ then its memory usage grows over time and the web page appears slow and
 bloated to the users.
 
 The first step in solving this problem is measuring it. The new
-[`performance.measureMemory()` API][explainer] allows developers to
+[`performance.measureUserAgentSpecificMemory()` API][explainer] allows developers to
 measure memory usage of their web pages in production and thus detect memory
 leaks that slip through local testing.
 
-## How is `performance.measureMemory()` different from the legacy `performance.memory` API? {: #legacy-api }
+## How is `performance.measureUserAgentSpecificMemory()` different from the legacy `performance.memory` API? {: #legacy-api }
 
 If you are familiar with the existing non-standard `performance.memory` API,
 you might be wondering how the new API differs from it. The main difference is
 that the old API returns the size of the JavaScript heap whereas the new API
-estimates the memory usage of the entire web page. This difference becomes
+estimates the memory used by the web page. This difference becomes
 important when Chrome shares the same heap with multiple web pages (or
 multiple instances of the same web page). In such cases, the result of the old
 API may be arbitrarily off. Since the old API is defined in
@@ -68,7 +74,6 @@ garbage collection. This reduces the noise in the results, but it may take a
 while until the results are produced. Note that other browsers may decide to
 implement the new API without relying on garbage collection.
 
-
 ## Suggested use cases {: #use-cases }
 
 Memory usage of a web page depends on the timing of events, user actions, and
@@ -76,93 +81,47 @@ garbage collections. That is why the memory measurement API is intended for
 aggregating memory usage data from production. The results of individual calls
 are less useful. Example use cases:
 
-* Regression detection during rollout of a new version of the web page to catch new memory leaks.
-* A/B testing a new feature to evaluate its memory impact and detect memory leaks.
-* Correlating memory usage with session duration to verify presence or absence of memory leaks.
-* Correlating memory usage with user metrics to understand the overall impact of memory usage.
+- Regression detection during rollout of a new version of the web page to catch new memory leaks.
+- A/B testing a new feature to evaluate its memory impact and detect memory leaks.
+- Correlating memory usage with session duration to verify presence or absence of memory leaks.
+- Correlating memory usage with user metrics to understand the overall impact of memory usage.
 
 ## Browser compatibility {: #compatibility }
 
-Currently the API is supported only in Chrome 83 as an origin trial. The
-result of the API is highly implementation-dependent because browsers have
+{% BrowserCompat 'api.Performance.measureUserAgentSpecificMemory' %}
+
+Currently the API is supported only in Chromium-based browsers, starting in Chrome 89. The
+result of the API is highly implementation dependent because browsers have
 different ways of representing objects in memory and different ways of
-estimating the memory usage. Browsers may exclude some memory regions from
+estimating memory usage. Browsers may exclude some memory regions from
 accounting if proper accounting is too expensive or infeasible. Thus, results
 cannot be compared across browsers. It is only meaningful to compare the
 results for the same browser.
 
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-<table>
-    <thead>
-      <tr>
-        <th>Step</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>1. Create explainer</td>
-        <td><a href="https://github.com/WICG/performance-measure-memory">Complete</a></td>
-      </tr>
-      <tr>
-        <td>2. Create initial draft of specification</td>
-        <td>In Progress</td>
-      </tr>
-      <tr>
-        <td>3. Gather feedback and iterate design</td>
-        <td><a href="#feedback">In Progress</a></td>
-      </tr>
-      <tr>
-        <td>4. Origin trial </td>
-        <td><a href="https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113">In Progress</a></td>
-      </tr>
-      <tr>
-        <td>5. Launch</td>
-        <td>Not Started</td>
-      </tr>
-    </tbody>
-</table>
-</div>
-
-## Using `performance.measureMemory()` {: use }
-
-### Enabling support during the origin trial phase
-
-The `performance.measureMemory()` API is available as an origin trial starting in
-Chrome 83. The origin trial is expected to end in Chrome 86, in early November 2020.
-
-{% include 'content/origin-trials.njk' %}
-
-### Register for the origin trial {: #register-for-ot }
-
-{% include 'content/origin-trial-register.njk' %}
-
-### Enabling via chrome://flags
-
-To experiment with `performance.measureMemory()` without an origin trial
-token, enable the `#experimental-web-platform-features` flag in `chrome://flags`.
+## Using `performance.measureUserAgentSpecificMemory()` {: use }
 
 ### Feature detection
 
-The `performance.measureMemory()` function may fail with a
-[SecurityError][security-error] if the execution environment does not fulfil
+The `performance.measureUserAgentSpecificMemory` function will be unavailable or may
+fail with a [SecurityError][security-error] if the execution environment does not fulfil
 the security requirements for preventing cross-origin information leaks.
-During the origin trial in Chrome, the API requires that [Site
-Isolation][site-isolation] is enabled. When the API ships, it will rely on
-[cross-origin isolation][cross-origin-isolation]. A web page can opt-in to
-cross-origin isolation by setting [COOP+COEP headers][coop-coep].
+It relies on [cross-origin isolation][cross-origin-isolation], which a web page can activate
+by setting [COOP+COEP headers](/coop-coep/).
+
+Support can be detected at runtime:
 
 ```javascript
-if (performance.measureMemory) {
+if (!window.crossOriginIsolated) {
+  console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
+} else if (!performance.measureUserAgentSpecificMemory) {
+  console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
+} else {
   let result;
   try {
-    result = await performance.measureMemory();
+    result = await performance.measureUserAgentSpecificMemory();
   } catch (error) {
-    if (error instanceof DOMException &&
-        error.name === "SecurityError") {
-      console.log("The context is not secure.");
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
     } else {
       throw error;
     }
@@ -173,10 +132,12 @@ if (performance.measureMemory) {
 
 ### Local testing
 
-Chrome performs the memory measurement during garbage collection. This means
+Chrome performs the memory measurement during garbage collection, which means
 that the API does not resolve the result promise immediately and instead waits
-for the next garbage collection. The API forces a garbage collection after
-some timeout, which is currently set to 20 seconds. Starting Chrome with the
+for the next garbage collection.
+
+Calling the API forces a garbage collection after some timeout, which is
+currently set to 20 seconds, though may happen sooner. Starting Chrome with the
 `--enable-blink-features='ForceEagerMeasureMemory'` command-line flag reduces
 the timeout to zero and is useful for local debugging and testing.
 
@@ -185,32 +146,33 @@ the timeout to zero and is useful for local debugging and testing.
 The recommended usage of the API is to define a global memory monitor that
 samples memory usage of the whole web page and sends the results to a server
 for aggregation and analysis. The simplest way is to sample periodically, for
-example every `M` minutes. That however introduces bias to data because the
-memory peaks may occur between the samples. The following example shows how to
+example every `M` minutes. However, that introduces bias to the data because
+memory peaks may occur between the samples.
+
+The following example shows how to
 do unbiased memory measurements using a [Poisson process][poisson], which
 guarantees that samples are equally likely to occur at any point in time
 ([demo][demo], [source][demo-source]).
 
 First, define a function that schedules the next memory measurement using
-`setTimeout()` with a randomized interval. The function should be called after
-page load on the main window.
+`setTimeout()` with a randomized interval.
 
 ```javascript
 function scheduleMeasurement() {
-  if (!performance.measureMemory) {
-    console.log("performance.measureMemory() is not available.");
+  // Check measurement API is available.
+  if (!window.crossOriginIsolated) {
+    console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
+    console.log('See https://web.dev/coop-coep/ to learn more')
+    return;
+  }
+  if (!performance.measureUserAgentSpecificMemory) {
+    console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
     return;
   }
   const interval = measurementInterval();
-  console.log("Scheduling memory measurement in " +
-      Math.round(interval / 1000) + " seconds.");
+  console.log(`Running next memory measurement in ${Math.round(interval / 1000)} seconds`);
   setTimeout(performMeasurement, interval);
 }
-
-// Start measurements after page load on the main window.
-window.onload = function () {
-  scheduleMeasurement();
-}
 ```
 
 The `measurementInterval()` function computes a random interval in milliseconds
@@ -229,79 +191,99 @@ the result, and schedules the next measurement.
 
 ```javascript
 async function performMeasurement() {
-  // 1. Invoke performance.measureMemory().
+  // 1. Invoke performance.measureUserAgentSpecificMemory().
   let result;
   try {
-    result = await performance.measureMemory();
+    result = await performance.measureUserAgentSpecificMemory();
   } catch (error) {
-    if (error instanceof DOMException &&
-        error.name === "SecurityError") {
-      console.log("The context is not secure.");
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
       return;
     }
     // Rethrow other errors.
     throw error;
   }
   // 2. Record the result.
-  console.log("Memory usage:", result);
+  console.log('Memory usage:', result);
   // 3. Schedule the next measurement.
   scheduleMeasurement();
 }
 ```
 
+Finally, begin measuring.
+
+```javascript
+// Start measurements.
+scheduleMeasurement();
+```
+
 The result may look as follows:
+
 ```javascript
 // Console output:
 {
-  bytes: 60_000_000,
+  bytes: 60_100_000,
   breakdown: [
     {
       bytes: 40_000_000,
-      attribution: ["https://foo.com"],
-      userAgentSpecificTypes: ["Window", "JS"]
+      attribution: [{
+        url: 'https://example.com/',
+        scope: 'Window',
+      }],
+      types: ['JavaScript']
     },
+
     {
       bytes: 20_000_000,
-      attribution: ["https://foo.com/iframe"],
-      userAgentSpecificTypes: ["Window", "JS"]
-    }
-  ]
+      attribution: [{
+          url: 'https://example.com/iframe',
+          container: {
+            id: 'iframe-id-attribute',
+            src: '/iframe',
+          },
+          scope: 'Window',
+      }],
+      types: ['JavaScript']
+    },
+
+    {
+      bytes: 100_000,
+      attribution: [],
+      types: ['DOM']
+    },
+  ],
 }
 ```
 
-The total memory usage estimate is returned in the `bytes` field. The value of
-bytes is using [numeric separator syntax][numeric-separators]. This value is
+The total memory usage estimate is returned in the `bytes` field. This value is
 highly implementation-dependent and cannot be compared across browsers. It may
-even change between different versions of the same browser. During the origin
-trial the value includes JavaScript memory usage of the main window and all
-**same-site** iframes and related windows. When the API ships, the value will
-account for JavaScript and DOM memory of all iframes, related windows, and web
-workers.
+even change between different versions of the same browser. The value includes
+JavaScript and DOM memory of all iframes, related windows, and web workers in
+the current process.
 
 The `breakdown` list provides further information about the used memory. Each
 entry describes some portion of the memory and attributes it to a set of
-windows, iframes, and workers identified by URLs. The `userAgentSpecificTypes`
-field  lists the implementation-specific memory types associated with the
-memory.
+windows, iframes, and workers identified by URL. The `types` field lists
+the implementation-specific memory types associated with the memory.
 
 It is important to treat all lists in a generic way and to not hardcode
 assumptions based on a particular browser. For example, some browsers may
 return an empty `breakdown` or an empty `attribution`. Other browsers may
-return multiple URLs in `attribution` indicating they could not distinguish
-which of these URLs owns the memory.
+return multiple entries in `attribution` indicating they could not distinguish
+which of these entries owns the memory.
 
 ## Feedback {: #feedback }
 
 The [Web Performance Community Group][webperfs] and the Chrome team would love
 to hear about your thoughts and experiences with
-`performance.measureMemory()`.
+`performance.measureUserAgentSpecificMemory()`.
 
 ### Tell us about the API design
 
 Is there something about the API that doesn't work as expected? Or are there
 missing properties that you need to implement your idea? File a spec issue on
-the [performance.measureMemory GitHub repo][issues] or add your thoughts to an
-existing issue.
+the [performance.measureUserAgentSpecificMemory() GitHub repo][issues] or add
+your thoughts to a existing issue.
 
 ### Report a problem with the implementation
 
@@ -313,45 +295,45 @@ the bug, and have **Components** set to `Blink>PerformanceAPIs`.
 
 ### Show support
 
-Are you planning to use `performance.measureMemory()`? Your public support
+Are you planning to use `performance.measureUserAgentSpecificMemory()`? Your public support
 helps the Chrome team prioritize features and shows other browser vendors how
-critical it is to support them. Send a tweet to [@ChromiumDev](https://twitter.com/chromiumdev) and let us know
-where and how you're using it.
+critical it is to support them. Send a tweet to [@ChromiumDev](https://twitter.com/chromiumdev)
+and let us know where and how you're using it.
 
 ## Helpful links {: #helpful }
 
-* [Explainer][explainer]
-* [Demo][demo] | [Demo source][demo-source]
-* [Origin Trial][ot]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
+- [Explainer][explainer]
+- [Demo][demo] | [Demo source][demo-source]
+- [Tracking bug][cr-bug]
+- [ChromeStatus.com entry][cr-status]
+- [Changes since Origin Trial API](https://github.com/WICG/performance-measure-memory/blob/master/ORIGIN_TRIAL.md#result-differences)
+- [Concluded Origin Trial][ot]
 
 ## Acknowledgements
+
 Big thanks to Domenic Denicola, Yoav Weiss, Mathias Bynens for API design reviews,
 and Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz for code reviews
 in Chrome. I also thank Per Parker, Philipp Weis, Olga Belomestnykh, Matthew
 Bolohan, and Neil Mckay for providing valuable user feedback that greatly
 improved the API.
 
-[Hero image](https://unsplash.com/photos/5tLfQGURzHM) by [Harrison Broadbent](https://unsplash.com/@hbtography) on [Unsplash](https://unsplash.com)
+[Hero image](https://unsplash.com/photos/5tLfQGURzHM) by [Harrison Broadbent](https://unsplash.com/@harrisonbroadbent) on [Unsplash](https://unsplash.com)
 
-[coop-coep]: https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=1049093
+[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=1085129
 [cr-dev-twitter]: https://twitter.com/chromiumdev
 [cr-status]: https://www.chromestatus.com/feature/5685965186138112
-[cross-origin-isolation]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
-[demo-source]: https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0
-[demo]: https://performance-measure-memory.glitch.me/
+[cross-origin-isolation]: https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+[demo-source]: https://glitch.com/edit/#!/performance-measure-user-agent-specific-memory?path=public%2Fmeasure-memory.js
+[demo]: https://performance-measure-user-agent-specific-memory.glitch.me/
 [explainer]: https://github.com/WICG/performance-measure-memory
 [glitch]: https://glitch.com/
 [halting-problem]: https://en.wikipedia.org/wiki/Halting_problem
 [issues]: https://github.com/WICG/performance-measure-memory/issues
-[math]: https://en.wikipedia.org/wiki/Exponential_distribution#Computational_methods
+[math]: https://en.wikipedia.org/wiki/Exponential_distribution#Random_variate_generation
 [memory-leaks]: https://docs.google.com/presentation/d/14uV5jrJ0aPs0Hd0Ehu3JPV8IBGc3U8gU6daLAqj6NrM/edit#slide=id.p
 [new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EPerformanceAPIs
-[numeric-separators]: https://v8.dev/features/numeric-separators
 [ot]: https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113
 [poisson]: https://en.wikipedia.org/wiki/Poisson_point_process
-[security-error]: https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-SecurityError
-[site-isolation]: https://developers.google.com/web/updates/2018/07/site-isolation
+[security-error]: https://developer.mozilla.org/docs/Web/API/DOMException#securityerror
+[site-isolation]: https://developer.chrome.com/blog/site-isolation/
 [webperfs]: https://www.w3.org/community/webperfs/
diff --git a/src/site/content/en/blog/more-capable-form-controls/hero.jpg b/src/site/content/en/blog/more-capable-form-controls/hero.jpg
deleted file mode 100644
index a9645ec8906..00000000000
Binary files a/src/site/content/en/blog/more-capable-form-controls/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/more-capable-form-controls/index.md b/src/site/content/en/blog/more-capable-form-controls/index.md
index b5906e2d4cf..c938be20a4d 100644
--- a/src/site/content/en/blog/more-capable-form-controls/index.md
+++ b/src/site/content/en/blog/more-capable-form-controls/index.md
@@ -4,28 +4,28 @@ subhead: With a new event, and custom elements APIs, participating in forms just
 authors:
   - arthurevans
 date: 2019-08-08
-hero: hero.jpg
+hero: image/admin/53I7AEmEaedcAo6hOlBK.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
 alt: DJ mixer controls.
 description: |
   New web platform features make it easier to build
-  custom elements that work like native form controls.
+  custom elements that work like built-in form controls.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - forms
-  - web-components
+  # - web-components
 ---
 
 
-Many developers build custom form controls, either to provide controls that aren't built in to the browser, or to customize the look and feel beyond what's possible with the native form controls.
+Many developers build custom form controls, either to provide controls that aren't built in to the browser, or to customize the look and feel beyond what's possible with the built-in form controls.
 
 However, it can be difficult to replicate the features of built-in HTML form controls. Consider some of the features an `<input>` element gets automatically when you add it to a form:
 
 *   The input is automatically added to the form's list of controls.
 *   The input's value is automatically submitted with the form.
-*   The input participates in [form validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation). You can style the input using the `:valid` and `:invalid` pseudoclasses.
+*   The input participates in [form validation](https://developer.mozilla.org/docs/Learn/HTML/Forms/Form_validation). You can style the input using the `:valid` and `:invalid` pseudoclasses.
 *   The input is notified when the form is reset, when the form is reloaded, or when the browser tries to autofill form entries.
 
 Custom form controls typically have few of these features. Developers can work around some of the limitations in JavaScript, like adding a hidden `<input>` to a form to participate in form submission. But other features just can't be replicated in JavaScript alone.
@@ -35,16 +35,16 @@ Two new web features make it easier to build custom form controls, and remove th
 *   The `formdata` event lets an arbitrary JavaScript object participate in form submission, so you can add form data without using a hidden `<input>`.
 *   The Form-associated custom elements API lets custom elements act more like built-in form controls.
 
-These two features can be used to create new kinds of controls that work better with native web forms.
+These two features can be used to create new kinds of controls that work better.
 
-{% Aside %}Building custom form controls is an advanced topic. This article assumes a certain knowledge of forms and form controls. When building a custom form control, there are many factors to consider, especially making sure that your controls are accessible to all users. To learn more about forms, go to the [MDN guide on forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms).{% endAside %}
+{% Aside %}Building custom form controls is an advanced topic. This article assumes a certain knowledge of forms and form controls. When building a custom form control, there are many factors to consider, especially making sure that your controls are accessible to all users. To learn more about forms, go to the [MDN guide on forms](https://developer.mozilla.org/docs/Learn/HTML/Forms).{% endAside %}
 
 ## Event-based API
 
 The `formdata` event is a low-level API that lets any JavaScript code participate in form submission. The mechanism works like this:
 
 1.  You add a `formdata` event listener to the form you want to interact with.
-1.  When a user clicks the submit button, the form fires a `formdata` event, which includes a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object that holds all of the data being submitted.
+1.  When a user clicks the submit button, the form fires a `formdata` event, which includes a [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) object that holds all of the data being submitted.
 1.  Each `formdata` listener gets a chance to add to or modify the data before the form is submitted.
 
 Here's an example of sending a single value in a `formdata` event listener:
@@ -54,7 +54,7 @@ const form = document.querySelector('form');
 // FormData event is sent on <form> submission, before transmission.
 // The event has a formData property
 form.addEventListener('formdata', ({formData}) => {
-  // https://developer.mozilla.org/en-US/docs/Web/API/FormData
+  // https://developer.mozilla.org/docs/Web/API/FormData
   formData.append('my-input', myInputValue);
 });
 ```
@@ -67,13 +67,17 @@ Try this out using our example on Glitch. Be sure to run it on Chrome 77 or late
   previewSize: 0
 } %}
 
+## Browser compatibility
+
+{% BrowserCompat 'api.FormData' %}
+
 ## Form-associated custom elements
 
 You can use the event-based API with any kind of component, but it only allows you to interact with the submission process.
 
-Native form controls participate in many parts of the form lifecycle besides submission. Form-associated custom elements aim to bridge the gap between custom widgets and native controls. Form-associated custom elements match many of the features of native form elements:
+Standardized form controls participate in many parts of the form lifecycle besides submission. Form-associated custom elements aim to bridge the gap between custom widgets and built-in controls. Form-associated custom elements match many of the features of standardized form elements:
 
-*   When you place a form-associated custom element inside a `<form>`, it's automatically associated with the form, like a native control.
+*   When you place a form-associated custom element inside a `<form>`, it's automatically associated with the form, like a browser-provided control.
 *   The element can be labeled using a `<label>` element.
 *   The element can set a value that's automatically submitted with the form.
 *   The element can set a flag indicating whether or not it has valid input. If one of the form controls has invalid input, the form can't be submitted.
@@ -82,7 +86,7 @@ Native form controls participate in many parts of the form lifecycle besides sub
 
 That's a lot of features! This article won't touch on all of them, but will describe the basics needed to integrate your custom element with a form.
 
-{% Aside %}This section assumes a basic familiarity with custom elements. For an introduction to custom elements, see [Custom Elements v1: Reusable Web Components](https://developers.google.com/web/fundamentals/web-components/customelements) on Web Fundamentals.{% endAside %}
+{% Aside %}This section assumes a basic familiarity with custom elements. For an introduction to custom elements, see [Custom Elements v1: Reusable Web Components](/custom-elements-v1/) on Web Fundamentals.{% endAside %}
 
 ### Defining a form-associated custom element
 
@@ -115,8 +119,8 @@ class MyCounter extends HTMLElement {
   set value(v) { this.value_ = v; }
 
   // The following properties and methods aren't strictly required,
-  // but native form controls provide them. Providing them helps
-  // ensure consistency with native controls.
+  // but browser-level form controls provide them. Providing them helps
+  // ensure consistency with browser-provided controls.
   get form() { return this.internals_.form; }
   get name() { return this.getAttribute('name'); }
   get type() { return this.localName; }
@@ -132,7 +136,7 @@ class MyCounter extends HTMLElement {
 customElements.define('my-counter', MyCounter);
 ```
 
-Once registered, you can use this element wherever you'd use a native form control:
+Once registered, you can use this element wherever you'd use a browser-provided form control:
 
 ```html
 <form>
@@ -148,8 +152,8 @@ The `attachInternals()` method returns an `ElementInternals` object that provide
 The `setFormValue()` method can take one of three types of values:
 
 *   A string value.
-*   A [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-*   A [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. You can use a `FormData` object to pass multiple values (for example, a credit card input control might pass a card number, expiration date, and verification code).
+*   A [`File`](https://developer.mozilla.org/docs/Web/API/File) object.
+*   A [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) object. You can use a `FormData` object to pass multiple values (for example, a credit card input control might pass a card number, expiration date, and verification code).
 
 To set a simple value:
 
@@ -209,7 +213,7 @@ Called after the `disabled` state of the element changes, either because the `di
 
 #### `void formResetCallback()`
 
-Called after the form is reset. The element should reset itself to some kind of default state. For native inputs, this usually involves setting the `value` property to match the `value` attribute set in markup (or in the case of a checkbox, setting the `checked` property to match the `checked` attribute.
+Called after the form is reset. The element should reset itself to some kind of default state. For `<input>` elements, this usually involves setting the `value` property to match the `value` attribute set in markup (or in the case of a checkbox, setting the `checked` property to match the `checked` attribute.
 
 #### `void formStateRestoreCallback(state, mode)`
 
@@ -285,7 +289,7 @@ if ('FormDataEvent' in window) {
 }
 
 if ('ElementInternals' in window &&
-    'setFormData' in window.ElementInternals) {
+    'setFormValue' in window.ElementInternals.prototype) {
   // Form-associated custom elements are supported
 }
 ```
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/hero.jpg b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/hero.jpg
deleted file mode 100644
index be58b9d2099..00000000000
Binary files a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/index.md b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/index.md
index bcf8dd54c05..52fef3c4dfb 100644
--- a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/index.md
+++ b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/index.md
@@ -7,16 +7,18 @@ authors:
 description: Chromium 80 had a system-ui font weight regression on macOS. The reason it broke, and the new super powers post-resolution, are worth the wait in Chromium 83.
 date: 2020-05-21
 updated: 2020-05-26
-hero: hero.jpg
-thumbnail: thumb.jpg
+hero: image/admin/RgpA9x73j3OnnrC8z97g.jpg
+thumbnail: image/admin/h1iXgLXRrxjunx2PhoPB.jpg
 alt: A bright pink and purple gradient with "macOS Catalina system-ui" going from thin to think from left to right, demonstrating some of the new variation settings
 tags:
   - blog
   - css
   - fonts
+feedback:
+  - api
 ---
 
-The ['system-ui' section](https://drafts.csswg.org/css-fonts-4/#system-ui-def) of the CSS Fonts Module Level 4 spec defines a `system-ui` font keyword that allows developers to use the built-in, turbo-optimized, localized, mega-high-quality, no-download-needed, default operating system font right in their sites and apps. 
+The ['system-ui' section](https://drafts.csswg.org/css-fonts-4/#system-ui-def) of the CSS Fonts Module Level 4 spec defines a `system-ui` font keyword that allows developers to use the built-in, turbo-optimized, localized, mega-high-quality, no-download-needed, default operating system font right in their sites and apps.
 
 ```css
 body {
@@ -24,7 +26,7 @@ body {
 }
 ```
 
-This typography choice is akin to saying "use the native system font for the current locale of this user."
+This typography choice is akin to saying "use the default system font for the current locale of this user."
 
 On macOS, the `system-ui` font is San Francisco, a font that a design team vetted, tested, and… recently upgraded! First we'll cover the [new exciting variable font features in Catalina](#new-powers), then we'll cover a couple of [bugs and how Chromium engineers resolved them](#regression).
 
@@ -39,14 +41,14 @@ At the time of writing, `system-ui` has support from Chromium (since 56), Edge (
 
 ## New powers {: #new-powers }
 
-The new abilities that Catalina brought to the system font are now available to web developers as of Chromium 83. The `system-ui` font now **has more variable settings**: optical sizing and 2 unique weight adjustments: 
+The new abilities that Catalina brought to the system font are now available to web developers as of Chromium 83. The `system-ui` font now **has more variable settings**: optical sizing and 2 unique weight adjustments:
 
 {% Compare 'worse', 'Mojave' %}
 ```css
 h1 {
   font-family: system-ui;
   font-weight: 700;
-  font-variation-settings: 
+  font-variation-settings:
     'wght' 750
   ;
 }
@@ -60,10 +62,10 @@ h1 {
 h1 {
   font-family: system-ui;
   font-weight: 700;
-  font-variation-settings: 
-    'wght' 750, 
+  font-variation-settings:
+    'wght' 750,
     'opsz' 20,
-    'GRAD' 400, 
+    'GRAD' 400,
     'YAXS' 400
   ;
 }
@@ -78,7 +80,7 @@ These variant features are only available for macOS Catalina users.
 
 On Mojave, `system-ui` is a variable font with only `wght` settings. While `system-ui` on Catalina is a variable font with `wght`, `opsz`, `GRAD`, and `YAXS` settings.
 
-Looks like some neat progressive enhancement design opportunities to me! Really dig into the subtleties of the system font if you want. 
+Looks like some neat progressive enhancement design opportunities to me! Really dig into the subtleties of the system font if you want.
 
 
 
@@ -90,8 +92,8 @@ Accepts a font weight between `0` and `900` and is applied equally to all charac
 font-variation-settings: 'wght' 750;
 ```
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_wght.mp4">
   </video>
@@ -105,8 +107,8 @@ Optical sizing is similar to kerning or letter-spacing, but the spacing is done
 font-variation-settings: 'opsz' 20;
 ```
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_opsz_v2.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_opsz_v2.mp4">
   </video>
@@ -120,8 +122,8 @@ Similar to weight, but without touching horizontal spacing. It accepts values be
 font-variation-settings: 'GRAD' 500;
 ```
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_grad_v2.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_grad_v2.mp4">
   </video>
@@ -135,8 +137,8 @@ Stretches the glyph vertically. It accepts values between `400` and `1000`.
 font-variation-settings: 'YAXS' 500;
 ```
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_yaxs_v2.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_yaxs_v2.mp4">
   </video>
@@ -151,14 +153,14 @@ font-weight: bold;
 font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
 ```
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_combined_v2.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_combined_v2.mp4">
   </video>
 </figure>
 
-And just like that, Chromium users on macOS see your upgraded, custom 750 weight with some fun other tweaks 👍 
+And just like that, Chromium users on macOS see your upgraded, custom 750 weight with some fun other tweaks 👍
 
 ## Playground
 
@@ -173,7 +175,7 @@ Click **Remix to Edit** in the Glitch below to get an editable copy of the Glitc
 
 macOS 10.15 added new features to its system font, and in macOS 10.15 a tricky `system-ui` bug was logged in the Chromium bug tracker. I wonder if they are related!?
 
-{% Banner 'neutral', 'body' %}The image for this article was made with CSS and `system-ui`. Here's the [codepen](https://codepen.io/argyleink/pen/eYpbwWd).{% endBanner %}
+{% Aside %}The image for this article was made with CSS and `system-ui`. Here's the [codepen](https://codepen.io/argyleink/pen/eYpbwWd).{% endAside %}
 
 ## Appendix: The `system-ui` regression {: #regression }
 
@@ -183,17 +185,17 @@ The rest of this blog post explains how `system-ui` broke in Chromium 80 and how
 
 This story starts with a different bug: [#1005969](https://crbug.com/1005969). This was reported against macOS 10.15 because the `system-ui` font spacing looked narrow and crammed.
 
-<figure class="w-figure">
-  <img src="./tight-chrome-spacing.jpg" alt="A comparison of two paragraphs from a Facebook group page. On the left is Chrome and the right is Safari, and Chrome is subtle but slightly tighter in spacing">
-  <figcaption class="w-figcaption">Chrome on left (tighter tracking), Safari on right (better optical spacing)</figcaption>
+<figure>
+  {% Img src="image/admin/f0xi5DBj1M6v72VcKNUx.jpg", alt="A comparison of two paragraphs from a Facebook group page. On the left is Chrome and the right is Safari, and Chrome is subtle but slightly tighter in spacing", width="800", height="417" %}
+  <figcaption>Chrome on left (tighter tracking), Safari on right (better optical spacing)</figcaption>
 </figure>
 
 ### Background
 
 Did you ever notice on macOS 10.14 how your paragraphs or headers "snapped" to a different looking font when the size went up or down?
 
-<figure class="w-figure">
-  <video playsinline controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video playsinline controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_20to19.webm" type="video/webm">
     <source src="https://storage.googleapis.com/web-dev-assets/macos-system-ui/system-ui_20to19.mp4">
   </video>
@@ -209,7 +211,7 @@ h1 {
 }
 ```
 
-Unfortunately, the default `opsz` value in the new Catalina font is `20`, and Chromium engineers were not prepared to apply `opsz` to the system font. This led to smaller sizes displaying too narrow. 
+Unfortunately, the default `opsz` value in the new Catalina font is `20`, and Chromium engineers were not prepared to apply `opsz` to the system font. This led to smaller sizes displaying too narrow.
 
 To fix that, Chromium needed to apply `opsz` correctly to the system font. This led to [Issue #1005969](https://crbug.com/1005969) getting fixed. Victory! Or was it…?
 
@@ -217,12 +219,12 @@ To fix that, Chromium needed to apply `opsz` correctly to the system font. This
 
 This is where it got tricky: Chromium applied `opsz` but something did not look right still. System fonts on Mac have an additional font table called [`trak`](https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6trak.html), which tweaks horizontal spacing. While working on the fix, Chromium engineers noticed that on macOS, when retrieving horizontal metrics from a `CTFontRef` object, the `trak` metrics were already getting factored into the metrics results. Chromium's shaping library [`HarfBuzz`](https://github.com/harfbuzz/harfbuzz) needs metrics where the `trak` values are not yet factored in.
 
-<figure class="w-figure">
-  <img src="./weight-loss.jpg" alt="A master display of system-ui and all of it's font weight and variations in a list. Half of them have no weight differences applied.">
-  <figcaption class="w-figcaption">Left: Bold weights applied to font sizes 19 and below. Right: Font sizes 20 and up lose bold styling</figcaption>
+<figure>
+  {% Img src="image/admin/rq7Vpi6ZfUzFNKEOVACk.jpg", alt="A display of system-ui and all of it's font weight and variations in a list. Half of them have no weight differences applied.", width="800", height="481" %}
+  <figcaption>Left: Bold weights applied to font sizes 19 and below. Right: Font sizes 20 and up lose bold styling</figcaption>
 </figure>
 
-Internally, [Skia](https://skia.org/) (the graphics library, not the typeface of the same name) uses both the `CGFontRef` class from [`CoreGraphics`](https://developer.apple.com/documentation/coregraphics) and the `CTFontRef` class from [`CoreText`](https://developer.apple.com/documentation/coretext). Due to required internal conversions between those objects (used for keeping backwards compatibility and accessing needed APIs on both classes), Skia would lose weight information in certain circumstances and bold fonts would stop working. This was tracked in [Issue #1057654](https://crbug.com/1057654). 
+Internally, [Skia](https://skia.org/) (the graphics library, not the typeface of the same name) uses both the `CGFontRef` class from [`CoreGraphics`](https://developer.apple.com/documentation/coregraphics) and the `CTFontRef` class from [`CoreText`](https://developer.apple.com/documentation/coretext). Due to required internal conversions between those objects (used for keeping backwards compatibility and accessing needed APIs on both classes), Skia would lose weight information in certain circumstances and bold fonts would stop working. This was tracked in [Issue #1057654](https://crbug.com/1057654).
 
 Skia still needs to support macOS 10.11 because Chromium still supports it. On 10.11 the "San Francisco Text" and "San Francisco Display" fonts weren't even variable fonts. Rather, each was a family of separate fonts for every weight available. At some point their glyph IDs became out of sync with each other. So if Skia did text shaping (converting text into glyphs that can be drawn) with "San Francisco Text", it would be gibberish if drawn with "San Francisco Display", and vice versa. And even if Skia just asked for a different size macOS might switch to the other. It should be possible to always use one of the fonts and just scale it (using a matrix to scale it up instead of asking for a larger size) but `CoreText` has an issue where it will not scale sbix (color emoji) glyphs up (only down). It's a bit more complex than that. `CoreText` actually seems to cap the vertical extent after matrix application, which seems to be related to it not being able to draw emoji at 45 degree angles. In any event, if you want your emoji to be shown big, you need to make a copy of the font to get a big version.
 
@@ -236,10 +238,10 @@ Since the fix for the spacing issue required a set of interconnected Blink and S
 
 ## The fix
 
-In the end, of course Chromium wanted to fix both things. Chromium now resorts to using HarfBuzz built-in font OpenType font metrics functions for retrieving horizontal metrics directly from the binary data in the system font's font tables. Using this, Chromium is sidestepping `CoreText` and Skia when the font has a `trak` table (except when it's the emoji font). 
+In the end, of course Chromium wanted to fix both things. Chromium now resorts to using HarfBuzz built-in font OpenType font metrics functions for retrieving horizontal metrics directly from the binary data in the system font's font tables. Using this, Chromium is sidestepping `CoreText` and Skia when the font has a `trak` table (except when it's the emoji font).
 
-<figure class="w-figure">
-  <img src="./weight-back.jpg" alt="A master display of system-ui and all of it's font weight and variations in a list. The half previously not working looks great now.">
+<figure>
+  {% Img src="image/admin/9KOCF5Gh0tEWETkmDEVo.jpg", alt="A display of system-ui and all of it's font weight and variations in a list. The half previously not working looks great now.", width="800", height="481" %}
 </figure>
 
 In the meantime there's still [Skia Issue #10123](https://bugs.chromium.org/p/skia/issues/detail?id=10123) to track fixing this fully in Skia, and to go back to using Skia to retrieve the system font metrics from there, instead of the current fix that goes through `HarfBuzz`.
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/thumb.jpg b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/thumb.jpg
deleted file mode 100644
index 13041543a87..00000000000
Binary files a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/thumb.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/tight-chrome-spacing.jpg b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/tight-chrome-spacing.jpg
deleted file mode 100644
index b6b152a9012..00000000000
Binary files a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/tight-chrome-spacing.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-back.jpg b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-back.jpg
deleted file mode 100644
index 0df5635638c..00000000000
Binary files a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-back.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-loss.jpg b/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-loss.jpg
deleted file mode 100644
index fc63919f6ba..00000000000
Binary files a/src/site/content/en/blog/more-variable-font-options-in-chromium-83/weight-loss.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/movikantirevo/index.md b/src/site/content/en/blog/movikantirevo/index.md
new file mode 100644
index 00000000000..7d79559811d
--- /dev/null
+++ b/src/site/content/en/blog/movikantirevo/index.md
@@ -0,0 +1,186 @@
+---
+layout: post
+title: Movi Kanti Revo - Part 1 - Building the 3D World
+authors:
+  - petelepage
+date: 2012-09-19
+tags:
+  - blog
+  - case-study
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/btqFngSls9zPrOREEqAU.png", alt="Movi Kanti Revo logo.", width="640", height="280" %}
+</figure>
+
+[Movi.Kanti.Revo](http://www.movikantirevo.com) is
+a new sensory Chrome experiment crafted by Cirque du Soleil and developed by
+Subatomic Systems that brings the wonder of Cirque du Soleil to the web through
+modern web technologies.
+
+## Building the 3D World
+
+The experiment was created using just HTML5, and the environment is built
+entirely with markup and CSS.  Like set pieces on
+stage, `div`s, `img`s, small `video`s and
+other elements are positioned in a 3D space using CSS.  Using the new
+`getUserMedia` API enabled a whole new way of interacting with the
+experiment, instead of using the keyboard or mouse, a JavaScript facial
+detection library tracks your head and moves the environment along with you.
+
+## All the Web's a Stage
+
+To build this experiment, it’s best to imagine the browser as a stage, and the
+elements like `<div>`s, images, videos and other elements as
+set pieces positioned in 3D space using CSS.  Each element, or set piece is
+positioned on the stage by applying a 3D transform.  If you’re unfamiliar with
+the `translate3d` transform, it takes 3 parameters, X, Y and Z.  X
+moves the element along a horizontal line, Y moves the element up and down,
+and Z moves the element closer or further away.  For example, applying a
+`transform: translate3d(100px, -200px, 300px)` will move the element
+100 pixels to the right, 200 pixels down and 300 pixels closer towards the
+viewer.
+
+### Building the Auditorium
+
+Let’s take a look at the [last
+scene](http://www.movikantirevo.com/#sea,) and to see how it’s put together.  All scenes are broken down into
+three primary containers, the world container, a perspective container and
+the stage.  The world container effectively setups up the viewers camera, and
+uses the CSS `perspective` property to tell the browser where the
+viewer will be looking at the element from.  The
+`#perspective-container` is used to change our perspective by
+applying 3D transforms to it.  Finally, the stage contains the actual set
+pieces that will be visible on screen.
+
+
+```html
+<div id="world-container">
+  <div id="perspective-container">
+    <div id="stage">
+    </div>
+  </div>
+</div>
+```
+
+```css
+#world-container {
+perspective: 700px;
+overflow: hidden;
+}
+
+#perspective-container {
+{ % mixin transform-style: preserve-3d; % }
+{ % mixin transform-origin: center center; % }
+{ % mixin perspective-origin: center center; % }
+{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
+}
+```
+
+### Visualizing the Stage
+
+Within the stage, there are seven elements in the final scene.  Moving from
+back to front, they include the sky background, a fog layer, the doors, the
+water, reflections, an additional fog layer, and finally the cliffs in front.
+Each item is placed on stage with a
+`transform: translate3d(x, y, z)` CSS property that indicates where
+it fits in 3D space. We used the z value in a similar way that we’d use
+`z-index`, but with the `translate3d` property, we can
+also provide a unit with the value.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/f8idh5Ffxbxd9muznYQN.png", alt="Figure 1: The stage from the side", width="640", height="400" %}
+<figcaption>
+    Figure 1: The stage from the side.
+</figcaption>
+</figure>
+
+Figure 1 shows the scene zoomed out and rotated almost 90 degrees so that you
+can visualize the way each of the different set pieces are placed within the
+stage.  At the back (furthest to the left), you can see the background, fog,
+doors, water and finally the cliffs.
+
+### Placing the Background on Stage
+
+Let’s start with the background image.  Since it’s the furthest back, we
+applied a -990px transform on the Z-axis to push it back in our perspective
+(see Figure 2).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/G8jQnIyffHXwHAGQz26s.png", alt="The stage, with only the background placed at -990px", width="640", height="400" %}
+<figcaption>
+    Figure 2: The stage, with only the background placed at -990px
+</figcaption>
+</figure>
+
+As it moves back in space, physics demands that it gets smaller, so it needs
+to be resized via a `scale(3.3)` property to fit the viewport and
+aligned the top edge with the top of the viewport with a
+`translate3d` on the y-axis (see Figure 3).
+
+```css
+.background {
+width: 1280px;
+height: 800px;
+top: 0px;
+background-image: url(stars.png);
+{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oIOqxVGPQtUillIvLyKx.png", alt="Figure 3: The stage, with background positioned and scaled.", width="640", height="400" %}
+<figcaption>
+    Figure 3: The stage, with only the background positioned and scaled.
+</figcaption>
+</figure>
+
+The fog, doors, and the cliffs in the same way, each by applying a
+`translate3d` with an appropriate z position and scale factor
+(see Figure 4).  Notice how the fog is stacked behind the doors, and behind
+the cliffs.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WR6Imi7KOP6ZqUhLlDHQ.png", alt="Figure 4: The stage, with fog, doors and cliff positioned and scaled", width="640", height="400" %}
+<figcaption>
+    Figure 4: The stage, with fog, doors and cliff positioned and scaled.
+</figcaption>
+</figure>
+
+### Adding the Sea
+
+To create as realistic an environment as possible, we knew we couldn’t simply
+put the water on a vertical plane, it’s typically doesn’t exist that way in
+the real world.  In addition to applying the `translate3d` to
+position the water on stage, we also apply an x-axis (horizontal) rotation of
+60 degrees (`rotateX(60deg)`) to make it appear flat and textured.
+A similar rotation was added to the door reflection and secondary fog to make
+it appear in the correct plane (see Figure 5).
+
+```css
+.sea {
+bottom: 120px;
+background-image: url(sea2.png);
+width: 1280px;
+height: 283px;
+{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WgTCZnJfO93yN1Tu0a3z.png", alt="Figure 5: The stage, with everything positioned and scaled.", width="640", height="400" %}
+<figcaption>
+    Figure 5: The stage, with everything positioned and scaled.
+</figcaption>>
+</figure>
+
+Each scene was built in a similar fashion, elements were visualized within the
+3D space of a stage, and an appropriate transform was applied to each.
+
+## Further Reading
+
+- [3D and CSS](http://www.html5rocks.com/en/tutorials/3d/css/)
+- [Adventures in the Third Dimension: CSS 3D Transforms](http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/)
+- [Intro to CSS 3D Transforms](http://desandro.github.com/3dtransforms/)
+- [MDN: Using CSS Transforms](https://developer.mozilla.org/docs/CSS/Using_CSS_transforms)
+
diff --git a/src/site/content/en/blog/mse-seamless-playback/index.md b/src/site/content/en/blog/mse-seamless-playback/index.md
new file mode 100644
index 00000000000..0bf5645a38c
--- /dev/null
+++ b/src/site/content/en/blog/mse-seamless-playback/index.md
@@ -0,0 +1,500 @@
+---
+layout: post
+title: Media Source Extensions for Audio
+description: >
+  Media Source Extensions (MSE) provide extended buffering and playback control for the HTML5 audio and video elements. While originally developed to facilitate Dynamic Adaptive Streaming over HTTP (DASH) based video players, MSE can be used for audio; specifically for gapless playback.
+authors:
+  - dalecurtis
+date: 2015-06-11
+updated: 2021-05-04
+---
+
+## Introduction
+
+[Media Source Extensions (MSE)](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)
+provide extended buffering and playback control for the HTML5 `<audio>` and
+`<video>` elements. While originally developed to facilitate
+[Dynamic Adaptive Streaming over HTTP (DASH)](http://dashif.org/about/)
+based video players, below we'll see how they can be used for audio; specifically for
+[gapless playback](http://en.wikipedia.org/wiki/Gapless_playback).
+
+You've likely listened to a music album where songs flowed seamlessly across
+tracks; you may even be listening to one right now. Artists create these
+[gapless playback](https://en.wikipedia.org/wiki/Gapless_playback) experiences
+both as an artistic choice as well as an artifact of
+[vinyl records](https://en.wikipedia.org/wiki/Gramophone_record) and
+[CDs](https://en.wikipedia.org/wiki/Compact_disc) where audio was written as one
+continuous stream. Unfortunately, due to the way modern audio codecs like
+[MP3](https://en.wikipedia.org/wiki/MP3) and
+[AAC](https://en.wikipedia.org/wiki/Advanced_Audio_Coding) work, this seamless
+aural experience is often lost today.
+
+We'll get into the details of why below, but for now let's start with a
+demonstration. Below is the first thirty seconds of the excellent
+[Sintel](http://www.sintel.org/){: .external } chopped into five separate MP3
+files and reassembled using MSE. The red lines indicate gaps introduced during
+the creation (encoding) of each MP3; you'll hear glitches at these points.
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/P8hasF93W3pJc3LXWDRc.webm" %}
+
+[Demo](https://simpl.info/mse/audio/gap)
+
+Yuck! That's not a great experience; we can do better. With a little more work,
+using the exact same MP3 files in the above demo, we can use MSE to remove those
+annoying gaps. The green lines in the next demo indicate where the files have
+been joined and the gaps removed. On Chrome 38+ this will playback seamlessly!
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/jRdAuBMz51Lplg6RvUIF.webm" %}
+
+[Demo](https://simpl.info/mse/audio/gapless)
+
+There are a
+[variety of ways to create gapless content](#appendix-a-creating-gapless-content).
+For the purposes of this demo, we'll focus on the type of files a normal user
+might have lying around. Where each file has been encoded separately without
+regard for the audio segments before or after it.
+
+## Basic Setup
+
+First, let's backtrack and cover the basic setup of a `MediaSource` instance.
+Media Source Extensions, as the name implies, are just extensions to the
+existing media elements. Below, we're assigning an
+[`Object URL`](https://developer.mozilla.org/docs/Web/API/URL.createObjectURL),
+representing our `MediaSource` instance, to the source attribute of an audio
+element; just like you would set a standard URL.
+
+```js
+var audio = document.createElement('audio');
+var mediaSource = new MediaSource();
+var SEGMENTS = 5;
+
+mediaSource.addEventListener('sourceopen', function () {
+  var sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+
+  function onAudioLoaded(data, index) {
+    // Append the ArrayBuffer data into our new SourceBuffer.
+    sourceBuffer.appendBuffer(data);
+  }
+
+  // Retrieve an audio segment via XHR.  For simplicity, we're retrieving the
+  // entire segment at once, but we could also retrieve it in chunks and append
+  // each chunk separately.  MSE will take care of assembling the pieces.
+  GET('sintel/sintel_0.mp3', function (data) {
+    onAudioLoaded(data, 0);
+  });
+});
+
+audio.src = URL.createObjectURL(mediaSource);
+```
+
+Once the `MediaSource` object is connected, it will perform some initialization
+and eventually fire a `sourceopen` event; at which point we can create a
+[`SourceBuffer`](http://www.w3.org/TR/media-source/#sourcebuffer). In the
+example above, we're creating an `audio/mpeg` one, which is able to parse and
+decode our MP3 segments; there are several
+[other types](http://www.w3.org/2013/12/byte-stream-format-registry/) available.
+
+## Anomalous Waveforms
+
+We'll come back to the code in a moment, but let's now look more closely at the
+file we've just appended, specifically at the end of it. Below, is a graph of
+the last 3000 samples averaged across both channels from the
+`sintel_0.mp3`
+track. Each pixel on the red line is a
+[floating point sample](https://en.wikipedia.org/wiki/Audio_bit_depth)
+in the range of `[-1.0, 1.0]`.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/lQBjRIWPBMcEe27W7lUk.png", alt="mp3 gap", width="750", height="300" %}
+
+What's with all that those zero (silent) samples!? They're actually due to
+[compression artifacts](https://en.wikipedia.org/wiki/Gapless_playback#Compression_artifacts)
+introduced during encoding. Almost every encoder introduces some type of
+padding. In this case [LAME](http://lame.sourceforge.net/){: .external } added
+exactly 576 padding samples to the end of the file.
+
+In addition to the padding at the end, each file also had padding added to the
+beginning. If we peek ahead at the
+`sintel_1.mp3`
+track we'll see another 576 samples of padding exists at the front. The amount
+of padding varies by encoder and content, but we know the exact values based on
+[`metadata`](#appendix-b-parsing-gapless-metadata) included within each file.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/YZNsLpiUn09qoM2K5MdE.png", alt="mp3 gap end", width="750", height="300" %}
+
+The sections of silence at the beginning and end of each file are what cause the
+_glitches_ between segments in the previous demo. To achieve gapless playback,
+we need to remove these sections of silence. Luckily, this is easily done with
+`MediaSource`. Below, we'll modify our `onAudioLoaded()` method to use an
+[append window](https://w3c.github.io/media-source#definitions) and a [timestamp
+offset](https://w3c.github.io/media-source#definitions) to remove this silence.
+
+## Example Code
+
+```js
+function onAudioLoaded(data, index) {
+  // Parsing gapless metadata is unfortunately non trivial and a bit messy, so
+  // we'll glaze over it here; see the appendix for details.
+  // ParseGaplessData() will return a dictionary with two elements:
+  //
+  //    audioDuration: Duration in seconds of all non-padding audio.
+  //    frontPaddingDuration: Duration in seconds of the front padding.
+  //
+  var gaplessMetadata = ParseGaplessData(data);
+
+  // Each appended segment must be appended relative to the next.  To avoid any
+  // overlaps, we'll use the end timestamp of the last append as the starting
+  // point for our next append or zero if we haven't appended anything yet.
+  var appendTime = index > 0 ? sourceBuffer.buffered.end(0) : 0;
+
+  // Simply put, an append window allows you to trim off audio (or video) frames
+  // which fall outside of a specified time range.  Here, we'll use the end of
+  // our last append as the start of our append window and the end of the real
+  // audio data for this segment as the end of our append window.
+  sourceBuffer.appendWindowStart = appendTime;
+  sourceBuffer.appendWindowEnd = appendTime + gaplessMetadata.audioDuration;
+
+  // The timestampOffset field essentially tells MediaSource where in the media
+  // timeline the data given to appendBuffer() should be placed.  I.e., if the
+  // timestampOffset is 1 second, the appended data will start 1 second into
+  // playback.
+  //
+  // MediaSource requires that the media timeline starts from time zero, so we
+  // need to ensure that the data left after filtering by the append window
+  // starts at time zero.  We'll do this by shifting all of the padding we want
+  // to discard before our append time (and thus, before our append window).
+  sourceBuffer.timestampOffset =
+    appendTime - gaplessMetadata.frontPaddingDuration;
+
+  // When appendBuffer() completes, it will fire an updateend event signaling
+  // that it's okay to append another segment of media.  Here, we'll chain the
+  // append for the next segment to the completion of our current append.
+  if (index == 0) {
+    sourceBuffer.addEventListener('updateend', function () {
+      if (++index < SEGMENTS) {
+        GET('sintel/sintel_' + index + '.mp3', function (data) {
+          onAudioLoaded(data, index);
+        });
+      } else {
+        // We've loaded all available segments, so tell MediaSource there are no
+        // more buffers which will be appended.
+        mediaSource.endOfStream();
+        URL.revokeObjectURL(audio.src);
+      }
+    });
+  }
+
+  // appendBuffer() will now use the timestamp offset and append window settings
+  // to filter and timestamp the data we're appending.
+  //
+  // Note: While this demo uses very little memory, more complex use cases need
+  // to be careful about memory usage or garbage collection may remove ranges of
+  // media in unexpected places.
+  sourceBuffer.appendBuffer(data);
+}
+```
+
+## A Seamless Waveform
+
+Let's see what our shiny new code has accomplished by taking another look at the
+waveform after we've applied our append windows. Below, you can see that the
+silent section at the end of
+`sintel_0.mp3`
+(in red) and the silent section at the beginning of
+`sintel_1.mp3`
+(in blue) have been removed; leaving us with a seamless transition between
+segments.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/bmQVIc4ng7YwkD0mAXfm.png", alt="mp3 mid", width="750", height="300" %}
+
+## Conclusion
+
+With that, we've stitched all five segments seamlessly into one and have
+subsequently reached the end of our demo. Before we go, you may have noticed
+that our `onAudioLoaded()` method has no consideration for containers or codecs.
+That means all of these techniques will work irrespective of the container or
+codec type. Below you can replay the original demo DASH-ready fragmented MP4
+instead of MP3.
+
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/EBCdw0qztJlW109jxf6x.webm" %}
+
+[Demo](https://simpl.info/mse/audio/mp4gapless)
+
+If you'd like to know more check the appendices below for a deeper look at
+gapless content creation and metadata parsing. You can also explore
+[`gapless.js`](https://simpl.info/mse/audio/js/gapless.js) for a closer look at
+the code powering this demo.
+
+Thanks for reading!
+
+## Appendix A: Creating Gapless Content
+
+Creating gapless content can be hard to get right. Below we'll walk through
+creation of the [Sintel](http://www.sintel.org/){: .external } media used in
+this demo. To start you'll need a copy of the
+[lossless FLAC soundtrack](http://media.xiph.org/sintel/Jan_Morgenstern-Sintel-FLAC.zip)
+for Sintel; for posterity, the SHA1 is included below. For tools, you'll need
+[FFmpeg](http://ffmpeg.org/), [MP4Box](http://gpac.wp.mines-telecom.fr/mp4box/),
+[LAME](http://lame.sourceforge.net/), and an OSX installation with
+[afconvert](https://developer.apple.com/library/mac/documentation/Darwin/Reference/Manpages/man1/afconvert.1.html).
+
+```text
+    unzip Jan_Morgenstern-Sintel-FLAC.zip
+    sha1sum 1-Snow_Fight.flac
+    # 0535ca207ccba70d538f7324916a3f1a3d550194  1-Snow_Fight.flac
+```
+
+First, we'll split out the first 31.5 seconds the `1-Snow_Fight.flac` track. We
+also want to add a 2.5 second fade out starting at 28 seconds in to avoid any
+clicks once playback finishes. Using the FFmpeg command line below we can
+accomplish all of this and put the results in `sintel.flac`.
+
+```text
+    ffmpeg -i 1-Snow_Fight.flac -t 31.5 -af "afade=t=out:st=28:d=2.5" sintel.flac
+```
+
+Next, we'll split the file into 5 [wave](https://en.wikipedia.org/wiki/WAV)
+files of 6.5 seconds each; it's easiest to use wave since almost every encoder
+supports ingestion of it. Again, we can do this precisely with FFmpeg, after
+which we'll have: `sintel_0.wav`, `sintel_1.wav`, `sintel_2.wav`,
+`sintel_3.wav`, and `sintel_4.wav`.
+
+```text
+    ffmpeg -i sintel.flac -acodec pcm_f32le -map 0 -f segment \
+           -segment_list out.list -segment_time 6.5 sintel_%d.wav
+```
+
+Next, let's create the MP3 files. LAME has several options for creating gapless
+content. If you're in control of the content you might consider using `--nogap`
+with a batch encoding of all files to avoid padding between segments altogether.
+For the purposes of this demo though, we want that padding so we'll use a
+standard high quality VBR encoding of the wave files.
+
+```text
+    lame -V=2 sintel_0.wav sintel_0.mp3
+    lame -V=2 sintel_1.wav sintel_1.mp3
+    lame -V=2 sintel_2.wav sintel_2.mp3
+    lame -V=2 sintel_3.wav sintel_3.mp3
+    lame -V=2 sintel_4.wav sintel_4.mp3
+```
+
+That's all that's necessary to create the MP3 files. Now let's cover the
+creation of the fragmented MP4 files. We'll follow Apple's directions for
+creating media which is
+[mastered for iTunes](http://www.apple.com/itunes/mastered-for-itunes/).
+Below, we'll convert the wave files into intermediate
+[CAF](https://en.wikipedia.org/wiki/Core_Audio_Format) files, per the
+instructions, before encoding them as
+[AAC](https://en.wikipedia.org/wiki/Advanced_Audio_Coding) in an
+[MP4](https://en.wikipedia.org/wiki/MP4) container using the recommended
+parameters.
+
+```text
+    afconvert sintel_0.wav sintel_0_intermediate.caf -d 0 -f caff \
+              --soundcheck-generate
+    afconvert sintel_1.wav sintel_1_intermediate.caf -d 0 -f caff \
+              --soundcheck-generate
+    afconvert sintel_2.wav sintel_2_intermediate.caf -d 0 -f caff \
+              --soundcheck-generate
+    afconvert sintel_3.wav sintel_3_intermediate.caf -d 0 -f caff \
+              --soundcheck-generate
+    afconvert sintel_4.wav sintel_4_intermediate.caf -d 0 -f caff \
+              --soundcheck-generate
+    afconvert sintel_0_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
+              -b 256000 -q 127 -s 2 sintel_0.m4a
+    afconvert sintel_1_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
+              -b 256000 -q 127 -s 2 sintel_1.m4a
+    afconvert sintel_2_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
+              -b 256000 -q 127 -s 2 sintel_2.m4a
+    afconvert sintel_3_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
+              -b 256000 -q 127 -s 2 sintel_3.m4a
+    afconvert sintel_4_intermediate.caf -d aac -f m4af -u pgcm 2 --soundcheck-read \
+              -b 256000 -q 127 -s 2 sintel_4.m4a
+```
+
+We now have several M4A files which we need to
+[fragment](http://gpac.wp.mines-telecom.fr/mp4box/dash/)
+appropriately before they can be used with
+`MediaSource`. For our purposes, we'll use a fragment size of one second. MP4Box
+will write out each fragmented MP4 as `sintel_#_dashinit.mp4` along with an
+MPEG-DASH manifest (`sintel_#_dash.mpd`) which can be discarded.
+
+```text
+    MP4Box -dash 1000 sintel_0.m4a && mv sintel_0_dashinit.mp4 sintel_0.mp4
+    MP4Box -dash 1000 sintel_1.m4a && mv sintel_1_dashinit.mp4 sintel_1.mp4
+    MP4Box -dash 1000 sintel_2.m4a && mv sintel_2_dashinit.mp4 sintel_2.mp4
+    MP4Box -dash 1000 sintel_3.m4a && mv sintel_3_dashinit.mp4 sintel_3.mp4
+    MP4Box -dash 1000 sintel_4.m4a && mv sintel_4_dashinit.mp4 sintel_4.mp4
+    rm sintel_{0,1,2,3,4}_dash.mpd
+```
+
+That's it! We now have fragmented MP4 and MP3 files with the correct metadata
+necessary for gapless playback. See Appendix B for more details on just what
+that metadata looks like.
+
+## Appendix B: Parsing Gapless Metadata
+
+Just like creating gapless content, parsing the gapless metadata can be tricky
+since there's no standard method for storage. Below we'll cover how the two most
+common encoders, LAME and iTunes, store their gapless metadata. Let's start by
+setting up some helper methods and an outline for the `ParseGaplessData()` used
+above.
+
+```js
+    // Since most MP3 encoders store the gapless metadata in binary, we'll need a
+    // method for turning bytes into integers.  Note: This doesn't work for values
+    // larger than 2^30 since we'll overflow the signed integer type when shifting.
+    function ReadInt(buffer) {
+      var result = buffer.charCodeAt(0);
+      for (var i = 1; i < buffer.length; ++i) {
+        result <<= 8;
+        result += buffer.charCodeAt(i);
+      }
+      return result;
+    }
+
+    function ParseGaplessData(arrayBuffer) {
+      // Gapless data is generally within the first 512 bytes, so limit parsing.
+      var byteStr = new TextDecoder().decode(arrayBuffer.slice(0, 512));
+
+      var frontPadding = 0, endPadding = 0, realSamples = 0;
+
+      // ... we'll fill this in as we go below.
+```
+
+We'll cover Apple's iTunes metadata format first since it's the easiest to parse
+and explain. Within MP3 and M4A files iTunes (and afconvert) write a short
+section in ASCII like so:
+
+```text
+    iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00
+```
+
+This is written inside an ID3 tag within the MP3 container and within a metadata
+atom inside the MP4 container. For our purposes, we can ignore the first
+`0000000` token. The next three tokens are the front padding, end padding, and
+total non-padding sample count. Dividing each of these by the sample rate of the
+audio gives us the duration for each.
+
+```js
+// iTunes encodes the gapless data as hex strings like so:
+//
+//    'iTunSMPB[ 26 bytes ]0000000 00000840 000001C0 0000000000046E00'
+//    'iTunSMPB[ 26 bytes ]####### frontpad  endpad    real samples'
+//
+// The approach here elides the complexity of actually parsing MP4 atoms. It
+// may not work for all files without some tweaks.
+var iTunesDataIndex = byteStr.indexOf('iTunSMPB');
+if (iTunesDataIndex != -1) {
+  var frontPaddingIndex = iTunesDataIndex + 34;
+  frontPadding = parseInt(byteStr.substr(frontPaddingIndex, 8), 16);
+
+  var endPaddingIndex = frontPaddingIndex + 9;
+  endPadding = parseInt(byteStr.substr(endPaddingIndex, 8), 16);
+
+  var sampleCountIndex = endPaddingIndex + 9;
+  realSamples = parseInt(byteStr.substr(sampleCountIndex, 16), 16);
+}
+```
+
+On the flip side, most open source MP3 encoders will store the gapless metadata
+within a special [Xing header](http://gabriel.mp3-tech.org/mp3infotag.html)
+placed inside of a silent MPEG frame (it's silent so decoders which don't
+understand the Xing header will simply play silence). Sadly this tag is not
+always present and has a number of optional fields. For the purposes of this
+demo, we have control over the media, but in practice some additional sensibility
+checks will be required to know when gapless metadata is actually available.
+
+First we'll parse the total sample count. For simplicity we'll read this from
+the Xing header, but it could be constructed from the normal
+[MPEG audio header](http://www.codeproject.com/Articles/8295/MPEG-Audio-Frame-Header).
+Xing headers can be marked by either a `Xing` or `Info` tag. Exactly 4 bytes
+after this tag there are 32-bits representing the total number of frames in the
+file; multiplying this value by the number of samples per frame will give us the
+total samples in the file.
+
+```js
+    // Xing padding is encoded as 24bits within the header.  Note: This code will
+    // only work for Layer3 Version 1 and Layer2 MP3 files with XING frame counts
+    // and gapless information.  See the following document for more details:
+    // http://www.codeproject.com/Articles/8295/MPEG-Audio-Frame-Header
+    var xingDataIndex = byteStr.indexOf('Xing');
+    if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Info');
+    if (xingDataIndex != -1) {
+      // See section 2.3.1 in the link above for the specifics on parsing the Xing
+      // frame count.
+      var frameCountIndex = xingDataIndex + 8;
+      var frameCount = ReadInt(byteStr.substr(frameCountIndex, 4));
+
+      // For Layer3 Version 1 and Layer2 there are 1152 samples per frame.  See
+      // section 2.1.5 in the link above for more details.
+      var paddedSamples = frameCount * 1152;
+
+      // ... we'll cover this below.
+```
+
+Now that we have the total number of samples we can move on to reading out the
+number of padding samples. Depending on your encoder this may be written under a
+LAME or Lavf tag nested in the Xing header. Exactly 17 bytes after this header
+there are 3 bytes representing the front and end padding in 12-bits each
+respectively.
+
+```js
+        xingDataIndex = byteStr.indexOf('LAME');
+        if (xingDataIndex == -1) xingDataIndex = byteStr.indexOf('Lavf');
+        if (xingDataIndex != -1) {
+          // See http://gabriel.mp3-tech.org/mp3infotag.html#delays for details of
+          // how this information is encoded and parsed.
+          var gaplessDataIndex = xingDataIndex + 21;
+          var gaplessBits = ReadInt(byteStr.substr(gaplessDataIndex, 3));
+
+          // Upper 12 bits are the front padding, lower are the end padding.
+          frontPadding = gaplessBits >> 12;
+          endPadding = gaplessBits & 0xFFF;
+        }
+
+        realSamples = paddedSamples - (frontPadding + endPadding);
+      }
+
+      return {
+        audioDuration: realSamples * SECONDS_PER_SAMPLE,
+        frontPaddingDuration: frontPadding * SECONDS_PER_SAMPLE
+      };
+    }
+```
+
+With that we have a complete function for parsing the vast majority of gapless
+content. Edge cases certainly abound though, so caution is recommended before
+using similar code in production.
+
+## Appendix C: On Garbage Collection
+
+Memory belonging to `SourceBuffer` instances is actively
+[garbage collected](<https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)>)
+according to content type, platform specific limits, and the current play
+position. In Chrome, memory will first be reclaimed from already played buffers.
+However, if memory usage exceeds platform specific limits, it will remove memory
+from unplayed buffers.
+
+When playback reaches a gap in the timeline due to reclaimed memory it may
+glitch if the gap is small enough or stall completely if the gap is too large.
+Neither is a great user experience, so it's important to avoid appending too
+much data at once and to manually remove ranges from the media timeline that are
+no longer necessary.
+
+Ranges can be removed via the
+[`remove()`](https://w3c.github.io/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end)
+method on each `SourceBuffer`; which takes a `[start, end]` range in seconds.
+Similar to `appendBuffer()`, each `remove()` will fire an `updateend` event once
+it completes. Other removes or appends should not be issued until the event
+fires.
+
+On desktop Chrome, you can keep approximately 12 megabytes of audio content and
+150 megabytes of video content in memory at once. You should not rely on these
+values across browsers or platforms; e.g., they are most certainly not
+representative of mobile devices.
+
+Garbage collection only impacts data added to `SourceBuffers`; there are no
+limits on how much data you can keep buffered in JavaScript variables. You may
+also reappend the same data in the same position if necessary.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/multi-device-content/index.md b/src/site/content/en/blog/multi-device-content/index.md
new file mode 100644
index 00000000000..79ab23c8222
--- /dev/null
+++ b/src/site/content/en/blog/multi-device-content/index.md
@@ -0,0 +1,269 @@
+---
+title: Multi-device content
+subhead: Consider content as well as layout and graphic design when building for a range of users and devices.
+date: 2016-05-10
+updated: 2020-07-24
+authors:
+  - samdutton
+description: Consider content as well as layout and graphic design when building for a range of users and devices.
+tags:
+  - blog
+---
+
+## How people read on the web
+
+The [US government writing guide](http://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html) summarizes what people want from writing on the web:
+
+{% Aside %}
+When writing for the web, using plain language allows users to find what they need, understand what they have found, and then use it to meet their needs.
+
+It should also be actionable, findable, and shareable.
+{% endAside %}
+
+
+Research shows that [people don't read web pages, they scan](https://www.nngroup.com/articles/concise-scannable-and-objective-how-to-write-for-the-web/). On average, [people only read 20–28% of web page content](https://www.nngroup.com/articles/how-little-do-users-read/). Reading from screens is much slower than reading from paper. People will give up and leave your site unless information is easy to access and understand.
+
+## How to write for mobile
+
+Focus on the subject at hand and tell the story upfront. For writing to work across a range of devices and viewports, make sure to get your main points across at the start: as a rule, ideally [in the first four paragraphs, in around 70 words](http://www.bbc.co.uk/academy/journalism/article/art20130702112133610).
+
+Ask yourself what people want from your site. Are they trying to find something out? If people visit your site for information, make sure that all your text is oriented to helping them achieve their goal. Write in the [active voice](https://learnenglish.britishcouncil.org/en/english-grammar/verbs/active-and-passive-voice), offer actions and solutions.
+
+Publish only what your visitors want, and nothing more.
+
+[UK government research](https://www.gov.uk/guidance/content-design/writing-for-gov-uk) also shows that:
+
+{% Aside %}
+80% of people preferred sentences written in clear English — and the more
+complex the issue, the greater that preference (e.g., 97% preferred "among
+other things" over the Latin "inter alia").
+
+The more educated the person and the more specialist their knowledge, the
+greater their preference for plain English.
+{% endAside %}
+
+In other words: use plain language, shorter words and simple sentence structures — even for a literate, technical audience. Unless there's a good reason not to, keep your tone of voice conversational. An old rule of journalism is to write as if you are speaking to an intelligent 11 year old.
+
+## The next billion users
+
+The pared-down approach to writing is particularly important for readers on mobile devices, and is crucial when creating content for low-cost phones with small viewports that require more scrolling and may have lower quality displays and less responsive screens.
+
+Most of the next billion users coming online will have cheap devices. They will not want to spend their data budget on navigating long-winded content, and may not be reading in their first language. Trim your text: use short sentences, minimal punctuation, paragraphs five lines or less, and single line headings. Consider responsive text (for example, using shorter headlines for smaller viewports) but [beware of the downsides](https://www.smashingmagazine.com/2012/02/ever-justification-for-responsive-text/).
+
+A minimalist attitude to text will also make your content easier to localize and internationalize — and make it more likely that your content gets quoted in social media.
+
+The bottom line:
+
+* Keep it simple
+* Reduce clutter
+* Get to the point
+
+
+## Eliminate unnecessary content
+
+In terms of byte size, web pages are [big and getting bigger](http://httparchive.org/trends.php#bytesTotal&reqTotal).
+
+[Responsive design techniques](/responsive-web-design-basics/) make it possible to serve different content for smaller viewports, but it's always sensible to start by streamlining text, images and other content.
+
+{% Blockquote 'Jackob Nielsen' %}
+Web users are often action oriented, "leaning forward" in the hunt for answers to their current question, rather than leaning back to absorb a good book.
+{% endBlockquote %}
+
+Ask yourself: what are people are trying to achieve when they visit my site?
+
+Does every page component help users achieve their goal?
+
+### Remove redundant page elements
+
+HTML files constitute nearly 70k and more than nine requests for the average web page, according to [HTTP Archive](http://httparchive.org/trends.php#bytesHtml&reqHtml).
+
+Many popular sites use several thousand HTML elements per page, and several thousand lines of code, even on mobile. Excessive HTML file size [may not make pages load more slowly](http://jsbin.com/zofavunapo/1/edit?html,js,output), but a heavy HTML payload can be a sign of content bloat: larger .html files mean more elements, more text content, or both.
+
+Reducing HTML complexity will also reduce page weight, help enable localization and internationalization and make responsive design easier to plan and debug. For information about writing more efficient HTML, see [High performance HTML](https://samdutton.wordpress.com/2015/04/02/high-performance-html/).
+
+{% Blockquote 'Gabor Cselle, Twitter' %}
+Every step you make a user perform before they get value out of your app will cost you 20% of users
+{% endBlockquote %}
+
+The same applies to content: help users get to what they want as quickly as possible.
+
+Don't just hide content from mobile users. Aim for [content parity](http://bradfrost.com/blog/mobile/content-parity/), since guessing what features your mobile users won't miss is bound to fail for someone. If you have the resources, create alternative versions of the same content for different viewport sizes — even if only for high priority page elements.
+
+Consider content management and workflow: are legacy systems resulting in legacy content?
+
+### Simplify text
+
+As the web goes mobile, you need to change the way you write. Keep it simple, reduce clutter and get to the point.
+
+### Remove redundant images
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ldqgben5yJcle6sDjV4A.png", alt="HTTP Archive showing increasing number of image transfer sizes and image requests", width="600", height="300" %}
+    <figcaption>According to <a href="http://httparchive.org/trends.php#bytesImg&reqImg">HTTP Archive data</a>, the average web page makes 54 requests for images.</figcaption>
+  </figure>
+
+Images can be beautiful, fun and informative — but they also use page real estate, add to page weight, and increase the number of file requests. [Latency gets worse as connectivity gets worse](https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/), meaning that an excess of image file requests is an increasing problem as the web goes mobile.
+
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1AvqhLhMKzboVrLLoHCW.png", alt="HTTP Archive pie chart showing average bytes per page by content type, around 60% of which is images.", width="400", height="278" %}
+    <figcaption>Images constitute over 60% of page weight.</figcaption>
+  </figure>
+
+Images also consume power. After the screen, radio is the second biggest drain on your battery. More image requests, more radio usage, more flat batteries. Even just to render images takes power – and this is proportional to size and number. Check out the Stanford report [Who Killed My Battery?](http://cdn.oreillystatic.com/en/assets/1/event/79/Who%20Killed%20My%20Battery_%20Analyzing%20Mobile%20Browser%20Energy%20Consumption%20Presentation.pdf)
+
+If you can, get rid of images!
+
+Here are some suggestions:
+
+* Consider designs that avoid images altogether, or use images sparingly. [Text-only can be beautiful](https://onepagelove.com/tag/text-only)! Ask yourself, "What are visitors to my site trying to achieve? Do images help that process?"
+* In the old days, it was commonplace to save headings and other text as graphics. That approach does not respond well to viewport size changes, and adds to page weight and latency. Using text as a graphic also means the text can't be found by search engines, and isn't accessible by screenreaders and other assistive technologies. Use "real" text where possible — Web Fonts and CSS can enable beautiful typography.
+* Use CSS rather than images for gradients, shadows, rounded corners, and [background textures](http://lea.verou.me/css3patterns/), features [supported by all modern browsers](http://caniuse.com/#search=shadows). Bear in mind, however, that CSS may be better than images, but there can still be a [processing and rendering penalty](http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/), especially significant on mobile.
+* Background images rarely work well on mobile. You can [use media queries](http://udacity.github.io/responsive-images/examples/2-06/backgroundImageConditional/) to avoid background images on small viewports.
+* Avoid splash screen images.
+* [Use CSS for UI animations](/web/fundamentals/design-and-ux/animations/).
+* Get to know your glyphs; use [Unicode symbols and icons](https://en.wikipedia.org/wiki/List_of_Unicode_characters) instead of images, with Web Fonts if necessary.
+* Consider [icon fonts](http://weloveiconfonts.com/#zocial); they are vector graphics that can be infinitely scaled, and an entire set of images can be downloaded in one font. (Be aware of [these concerns](https://sarasoueidan.com/blog/icon-fonts-to-svg/), however.)
+* The `<canvas>` element can be used to build images in JavaScript from lines, curves, text, and other images.
+* [Inline SVG or Data URI images](http://udacity.github.io/responsive-images/examples/2-11/svgDataUri/) will not reduce page weight, but they can reduce latency by reducing the number of resource requests. Inline SVG has [great support on mobile and desktop browsers](http://caniuse.com/#feat=svg-html5), and [optimization tools](http://petercollingridge.appspot.com/svg-optimiser) can significantly reduce SVG size. Likewise, Data URIs are [well supported](http://caniuse.com/datauri). Both can be inlined in CSS.
+* Consider using `<video>` instead of animated GIFs. [The video element is supported by all browsers on mobile](http://caniuse.com/video) (apart from Opera Mini).
+
+For more information see [Image Optimization](/fast/#optimize-your-images) and [Eliminating and replacing images](/fast/#optimize-your-images).
+
+
+## Design content to work well across different viewport sizes
+
+{% Blockquote 'Mobile Design and Development, Brian Fling' %}
+"Create a product, don't re-imagine one for small screens. Great mobile
+products are created, never ported."
+{% endBlockquote %}
+
+Great designers don't "optimize for mobile" — they think responsively to build sites that work across a range of devices. The structure of text and other page content is critical to cross-device success.
+
+Many of the next billion users coming online use low-cost devices with small viewports. Reading on a low resolution 3.5" or 4" screen can be hard work.
+
+Here is a photograph of the two together:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KSRYKNTBLn1v5QbZt7Lw.jpg", alt="Photo comparing display of blog post on high end and low-cost smartphones", width="760", height="678" %}
+</figure>
+
+On the larger screen, text is small but readable.
+
+On the smaller screen the browser renders the layout correctly, but the text is unreadable, even when zoomed in. The display is blurry and has a 'color cast' — white doesn't look white — making content less legible.
+
+### Design content for mobile
+
+When building for a range of viewports, consider content as well as layout and graphic design,
+[design with real text and images, not placeholder content](http://uxmyths.com/post/718187422/myth-you-dont-need-the-content-to-design-a-website).
+
+{% Blockquote 'Jeffrey Zeldman' %}
+"Content precedes design. Design in the absence of content is not design, it's decoration."
+{% endBlockquote %}
+
+* Put your most important content at the top, since [users tend to read web pages in an F-shaped pattern](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).
+* Users visit your site to achieve a goal. Ask yourself what they need to achieve that goal and get rid of everything else. Get tough on visual and textual embellishments, legacy content, excessive links, and other clutter.
+* Be careful with social sharing icons; they can clutter layouts, and the code for them can slow down page loading.
+* Design [responsive layouts](/responsive-web-design-basics/) for content, not fixed device sizes.
+
+### Test content
+
+{% Aside 'success' %}
+Whatever you do — **test**!
+{% endAside %}
+
+* Check readability on smaller viewports using Chrome DevTools and other [emulation tools](/performance-poor-connectivity/).
+* [Test your content under conditions of low bandwidth and high latency](/performance-poor-connectivity/); try out content in a variety of connectivity scenarios.
+* Try reading and interacting with your content on a low-cost phone.
+* Ask friends and colleagues to try out your app or site.
+* Build a simple device test lab. The [GitHub repo](https://github.com/GoogleChrome/MiniMobileDeviceLab) for Google's Mini Mobile Device Lab has instructions on how to build your own. [OpenSTF](https://github.com/openstf/stf) is a simple web application for testing websites on multiple Android devices.
+
+Here is OpenSTF in action:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VlCiQUMryWQ9wPvCEFVd.png", alt="OpenSTF interface.", width="790", height="524" %}
+</figure>
+
+Mobile devices are increasingly used to consume content and obtain information — not just as devices for communication, games and media.
+
+This makes it increasingly import to plan content to work well on a range of viewports, and to prioritize content when considering cross-device layout, interface and interaction design.
+
+
+## Understand data cost
+
+Web pages are getting bigger.
+
+According to [HTTP Archive](http://httparchive.org/trends.php#bytesTotal&reqTotal), the average page weight for the [top one million sites](http://httparchive.org/about.php#listofurls) is now over 2MB.
+
+
+Users avoid sites or apps perceived to be slow or expensive, so it's crucial to understand the cost of loading page and app components.
+
+Reducing page weight can also be profitable. [Chris Zacharias from YouTube](http://blog.chriszacharias.com/page-weight-matters) found that when they reduced the watch-page size from 1.2MB to 250KB:
+
+{% Aside %}
+Large numbers of people who were previously unable to use YouTube before were suddenly able to.
+{% endAside %}
+
+In other words, reducing page weight **can open up whole new markets**.
+
+### Calculate page weight
+
+There are a number of tools for calculating page weight. The Chrome DevTools Network panel shows the total byte size for all resources, and can be used to ascertain weights for individual asset types. You can also check which items have been retrieved from the browser cache.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WOTzqHUDqXexvc80y6cU.png", alt="Chrome DevTools Network panel showing resource sizes.", width="800", height="322" %}
+</figure>
+
+Firefox and other browsers offer similar tools.
+
+[WebPagetest](http://webpagetest.org) provides the ability to test first and subsequent page loads. You can automate testing with [scripts](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting) (for example, to log in to a site) or by using their [RESTful APIs](https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis). The following example (loading [developers.google.com/web](developers.google.com/web/)) shows that caching was successful and that subsequent page loads required no additional resources.
+
+WebPagetest also gives a size and request breakdown by MIME type.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cJCxDLLctRo4rBCHPAa1.png", alt="WebPagetest pie charts showing requests and bytes by MIME type", width="587", height="146" %}
+</figure>
+
+### Calculate page cost
+
+For many users, data doesn't just cost bytes and performance — it costs money.
+
+The site [What Does My Site Cost?](https://whatdoesmysitecost.com/) enables you to estimate the actual financial cost of loading your site. The histogram below shows how much it costs (using a prepaid data plan) to load [amazon.com](https://www.amazon.com/).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/isVV64gZGINBHjHnHBxJ.png", alt="Estimated data cost in 12 countries) of loading the amazon.com homepage.", width="760", height="250" %}
+</figure>
+
+Bear in mind that this doesn't take into account affordability relative to income. Data from [blog.jana.com](https://blog.jana.com/2015/05/21/the-data-trap-affordable-smartphones-expensive-data/) shows the cost of data.
+
+<table>
+  <tr>
+    <td></td>
+    <td><strong>500MB data plan<br>cost (USD)</strong></td>
+    <td><strong>Hourly minimum<br>wage (USD)</strong></td>
+    <td><strong>Hours of work to pay<br>for 500MB data plan</strong></td>
+  </tr>
+  <tr>
+    <td>India</td>
+    <td>$3.38</td>
+    <td>$0.20</td>
+    <td>17 hours</td>
+  </tr>
+  <tr>
+    <td>Indonesia</td>
+    <td>$2.39</td>
+    <td>$0.43</td>
+    <td>6 hours</td>
+  </tr>
+  <tr>
+    <td>Brazil</td>
+    <td>$13.77</td>
+    <td>$1.04</td>
+    <td>13 hours</td>
+  </tr>
+</table>
+
+
+Page weight isn't just a problem for emerging markets. In many countries, people use mobile plans with limited data, and will avoid your site or app if they perceive it to be heavy and expensive. Even "unlimited" cell and wifi data plans generally have a data limit beyond which they are blocked or throttled. For these reasons, it's best to be as transparent as possible about how much data your page consumes. The following blog post provides specific best practices: [Nurture trust through cost transparency](https://medium.com/google-design/nurture-trust-through-cost-transparency-b61a5947d2fc)
+
+The bottom line: page weight affects performance and costs money. [Optimizing content efficiency](/performance-optimizing-content-efficiency/) shows how to reduce that cost.
diff --git a/src/site/content/en/blog/multi-origin-pwas/hero.jpg b/src/site/content/en/blog/multi-origin-pwas/hero.jpg
deleted file mode 100644
index 4eee17e5f9a..00000000000
Binary files a/src/site/content/en/blog/multi-origin-pwas/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/multi-origin-pwas/index.md b/src/site/content/en/blog/multi-origin-pwas/index.md
index 6d75af11e8e..fcc07718218 100644
--- a/src/site/content/en/blog/multi-origin-pwas/index.md
+++ b/src/site/content/en/blog/multi-origin-pwas/index.md
@@ -5,7 +5,7 @@ subhead: Challenges and workarounds for building Progressive Web Apps in multi-o
 authors:
   - demianrenzulli
 date: 2019-08-19
-hero: hero.jpg
+hero: image/admin/4bvbhJ3F0uGKvw5DLTMy.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -19,7 +19,7 @@ tags:
 
 ## Background
 
-In the past, there were some advantages to using multi-origin architectures, but for Progressive Web Apps, that approach presents many challenges. In particular, the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy), imposes restrictions for sharing things like service workers and caches, permissions, and for achieving a standalone experience across multiple origins. This article will describe the good and bad uses of multiple origins, and explain the challenges and workarounds for building Progressive Web Apps in multi-origin sites.
+In the past, there were some advantages to using multi-origin architectures, but for Progressive Web Apps, that approach presents many challenges. In particular, the [same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy), imposes restrictions for sharing things like service workers and caches, permissions, and for achieving a standalone experience across multiple origins. This article will describe the good and bad uses of multiple origins, and explain the challenges and workarounds for building Progressive Web Apps in multi-origin sites.
 
 ## Good and bad uses of multiple origins
 
@@ -29,7 +29,7 @@ There are a few legitimate reasons for sites to employ a multi-origin architectu
 
 Let's look at the useful reasons first:
 
-- **Localization / Language:** Using a [country-code top-level domain](https://developer.mozilla.org/en-US/docs/Glossary/TLD), to separate sites to be served in different countries (e.g. `https://www.google.com.ar`), or using subdomains to divide sites targeted to different locations (e.g.: `https://newyork.craigslist.org`) or to offer content for a specific language (e.g. `https://en.wikipedia.org`).
+- **Localization / Language:** Using a [country-code top-level domain](https://developer.mozilla.org/docs/Glossary/TLD), to separate sites to be served in different countries (e.g. `https://www.google.com.ar`), or using subdomains to divide sites targeted to different locations (e.g.: `https://newyork.craigslist.org`) or to offer content for a specific language (e.g. `https://en.wikipedia.org`).
 
 - **Independent webapps:** Using different subdomains to provide experiences whose purpose differs considerably from the site on the main origin. For example, in a news site, the crosswords webapp could be intentionally served from `https://crosswords.example.com`, and installed and used as an independent PWA, without having to share any resources or functionality with the main website.
 
@@ -53,13 +53,13 @@ For those cases where migrating to a single origin is not possible, what follows
 
 ## Challenges and Workarounds for PWAs across different origins
 
-When building a website on multiple origins, providing a unified PWA experience is challenging, mostly because of the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy), which imposes a number of constraints. Let's look at them one at a time.
+When building a website on multiple origins, providing a unified PWA experience is challenging, mostly because of the [same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy), which imposes a number of constraints. Let's look at them one at a time.
 
 ### Service workers
 
 The origin of the service worker script URL has to be the same as the origin of the page calling [register()](https://w3c.github.io/ServiceWorker/#navigator-service-worker-register). This means that, for example, a page at `https://www.example.com` can't call `register()` with a service worker url at `https://section.example.com`.
 
-Another consideration is that a service worker can only control pages hosted under the origin and path it belongs to. This means that, if the service worker is hosted at `https://www.example.com` it can only control URLs from that origin (according to the path defined in the [scope parameter](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameters)), but won't control any page in other subdomains such as, for example, those in `https://section.example.com`.
+Another consideration is that a service worker can only control pages hosted under the origin and path it belongs to. This means that, if the service worker is hosted at `https://www.example.com` it can only control URLs from that origin (according to the path defined in the [scope parameter](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register#Parameters)), but won't control any page in other subdomains such as, for example, those in `https://section.example.com`.
 
 In this case, the only workaround is to use multiple service workers (one per origin).
 
@@ -78,7 +78,7 @@ Here are some things you can do to manage caches properly in scenarios like this
 - **Keep service worker installation lightweight:** If you are maintaining multiple service workers, avoid making users pay a big installation cost every time they navigate to a new origin. In other words: only pre-cache resources that are absolutely necessary.
 
 {% Aside 'gotchas' %}
-Once the service worker is active and running, the same-origin policy also restricts cross-origin requests made **_inside_** service workers. Fortunately this has a recommended workaround, which is to use [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (as explained [here](https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests)). Using the [no-cors mode](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters) when fetching resources inside the service worker is not recommended.
+Once the service worker is active and running, the same-origin policy also restricts cross-origin requests made **_inside_** service workers. Fortunately this has a recommended workaround, which is to use [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) (as explained [here](https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests)). Using the [no-cors mode](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters) when fetching resources inside the service worker is not recommended.
 {% endAside %}
 
 ### Permissions
@@ -108,7 +108,7 @@ While navigating in a standalone window, the browser will behave differently whe
 In most cases, there's no solution for this, but a workaround can be applied for small parts of the experience that are hosted in subdomains (for example: login workflows):
 
 1. The new URL, `https://login.example.com`, could open inside a full screen iframe.
-1. Once the task is completed inside the iframe (for example, the login process), [postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) can be used, to pass any resulting information from the iframe back to the parent page.
+1. Once the task is completed inside the iframe (for example, the login process), [postMessage()](https://developer.mozilla.org/docs/Web/API/Window/postMessage) can be used, to pass any resulting information from the iframe back to the parent page.
 1. As a final step, once the message is received by the main page, the listeners can be unregistered, and the iframe finally be removed from the DOM.
 
 {% Aside 'caution' %}
@@ -116,7 +116,7 @@ The previous technique can help mitigating the potential UI change in a small pa
 {% endAside %}
 
 {% Aside %}
-In the context of [Trusted Web Actitivies](https://developers.google.com/web/updates/2019/02/using-twa), there's a recommended way of avoiding this issue, by [validating all origins using Digital Asset Links](https://developers.google.com/web/updates/2020/01/twa-multi-origin).
+In the context of [Trusted Web Actitivies](https://developer.chrome.com/docs/android/trusted-web-activity/), there's a recommended way of avoiding this issue, by [validating all origins using Digital Asset Links](https://developers.google.com/web/updates/2020/01/twa-multi-origin).
 {% endAside %}
 
 ### Conclusion
@@ -127,4 +127,4 @@ For existing sites that are already built in this way, it can be challenging to
 
 When evaluating a long-term strategy or site redesign, consider migrating to a single origin, unless there's an important reason to keep the multi-origin architecture.
 
-_With many thanks for their technical reviews and suggestions: PJ Mclachlan, Paul Covell, Dominick Ng, Alberto Medina, Pete LePage, Joe Medley, Cheney Tsai, Martin Schierle, and Andre Bandarra._
+_With many thanks for their technical reviews and suggestions: Penny Mclachlan, Paul Covell, Dominick Ng, Alberto Medina, Pete LePage, Joe Medley, Cheney Tsai, Martin Schierle, and Andre Bandarra._
diff --git a/src/site/content/en/blog/multiplayer-audio-fun/index.md b/src/site/content/en/blog/multiplayer-audio-fun/index.md
new file mode 100644
index 00000000000..2804da523db
--- /dev/null
+++ b/src/site/content/en/blog/multiplayer-audio-fun/index.md
@@ -0,0 +1,15 @@
+---
+layout: post
+title: "Multiplayer audio fun"
+subhead: >
+  A demo using the Web Audio API. 
+description: >
+  A demo using the Web Audio API.
+date: 2011-07-01
+authors:
+  - paulkinlan
+tags:
+  - blog
+---
+
+Using the Web Audio API, WebSockets and a very nice designed UI here comes a [demo](http://labs.dinahmoe.com/plink) where you can generate notes on the fly and with other people in real time. We will keep posting quick updates with the demos that developers around the world make with HTML5.
diff --git a/src/site/content/en/blog/munkadoo-bouncymouse/index.md b/src/site/content/en/blog/munkadoo-bouncymouse/index.md
new file mode 100644
index 00000000000..9d2cf686dfd
--- /dev/null
+++ b/src/site/content/en/blog/munkadoo-bouncymouse/index.md
@@ -0,0 +1,392 @@
+---
+layout: post
+title: Case Study - Bouncy Mouse
+authors:
+  - ericrk
+date: 2012-02-18
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lYHR5kzCPI8DWurLpItD.svg", alt="Bouncy Mouse", width="320", height="183" %}
+</figure>
+
+After publishing Bouncy Mouse on iOS and Android at the end of last year, I learned a few very important lessons. Key among them was that breaking into an established market is hard. On the thoroughly saturated iPhone market, gaining traction was very hard; on the less saturated Android Marketplace, progress was easier, but still not easy.
+Given this experience, I saw an interesting opportunity on the Chrome Web Store. While the Web Store is by no means empty, its catalogue of high-quality HTML5-based games is just beginning to grow into maturity. For a new app developer, this means that making the ranking charts and gaining visibility is much easier. With this opportunity in mind, I set about porting Bouncy Mouse to HTML5 in hopes that I could deliver my latest gameplay experience to an exciting new user base.
+In this case study, I will talk a bit about the general process of porting Bouncy Mouse to HTML5, then I will dig a bit deeper into three areas that proved interesting: Audio, Performance, and Monetization.
+
+## Porting a C++ Game To HTML5
+
+Bouncy Mouse is currently available on Android(C++), iOS (C++), Windows Phone 7 (C#), and Chrome (Javascript). 
+This occasionally prompts the question: How do you write a game that can be easily ported to multiple platforms?. 
+I get the feeling that people hope for some magic bullet that they can use to achieve this level of portability without resorting to a hand-port. 
+Sadly, I’m not sure such a solution yet exists (the closest thing is probably Google’s [PlayN framework](http://code.google.com/p/playn/)
+or the [Unity engine](http://unity3d.com/), but neither of these hits all the targets I was interested in). 
+My approach was, in fact, a hand port. 
+I first wrote the iOS/Android version in C++, then ported this code to each new platform. While this may sound like a lot of work, the WP7 and Chrome versions each took no more than 2 weeks to complete.
+So now the question is, can anything be done to make a codebase easily hand-portable? There were a couple things I did which helped in this:
+
+### Keep the Codebase Small
+
+While this may seem obvious, it’s really the main reason I was able to port the game so quickly. Bouncy Mouse’s client code is only about 7,000 lines of C++. 7,000 lines of code isn’t nothing, but it’s small enough to be manageable. Both the C# and Javascript versions of the client code ended up being roughly the same size. Keeping my codebase small basically amounted to two key practices: Don’t write any excess code, and do as much as possible in pre-processing (non-runtime) code. 
+Not writing any excess code may seem obvious, but it’s one thing I always fight over with myself. I frequently have the urge to write a helper class/function for anything that can be factored into a helper. However, unless you actually plan to use a helper multiple times, it usually just ends up bloating your code. With Bouncy Mouse, I was careful to never write a helper unless I was going to be using it at least three times. When I did write a helper class, I tried to make it clean, portable, and re-usable for my future projects. On the other hand, when writing code just for Bouncy Mouse, with low likelihood of re-use, my focus was to accomplish the coding task as simply and quickly as possible, even if this wasn’t the “prettiest” way to write the code.
+The second, and more important part of keeping the codebase small was to push as much as possible into preprocessing steps. If you can take a runtime task and move it to a preprocessing task, not only will your game run faster, but you won’t have to port the code to each new platform. 
+To give an example, I originally stored my level geometry data as a fairly unprocessed format, assembling the actual OpenGL/WebGL vertex buffers at run time. This took a bit of setup and a few hundred lines of runtime code. Later, I moved this code to a preprocessing step, writing out fully packed OpenGL/WebGL vertex buffers at compile time. The actual amount of code was about the same, but those few hundred lines had been moved to a preprocessing step, meaning I never had to port them to any new platforms.
+There are tons of examples of this in Bouncy Mouse, and what is possible will vary from game to game, but just keep an eye out for anything that doesn’t need to happen at runtime.
+
+### Don’t Take Dependencies You Don’t Need
+
+Another reason Bouncy Mouse is easy to port is because it has almost no dependencies. The following chart summarizes Bouncy Mouse’s major library dependencies per platform:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+        <th>Android</th>
+        <th>iOS</th>
+        <th>HTML5</th>
+        <th>WP7</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Graphics</td>
+        <td>OpenGL ES</td>
+        <td>OpenGL ES</td>
+        <td>WebGL</td>
+        <td>XNA</td>
+      </tr>
+      <tr>
+        <td>Sound</td>
+        <td>OpenSL ES</td>
+        <td>OpenAL</td>
+        <td>Web Audio</td>
+        <td>XNA</td>
+      </tr>
+      <tr>
+        <td>Physics</td>
+        <td>Box2D</td>
+        <td>Box2D</td>
+        <td>Box2D.js</td>
+        <td>Box2D.xna</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+That’s pretty much it. No big 3rd party libraries were used, other than [Box2D](http://code.google.com/p/box2dweb/), which is portable across all platforms. For graphics, both WebGL and XNA map almost 1:1 with OpenGL, so this wasn’t a big issue. Only in the area of sound were the actual libraries different. However, sound code in Bouncy Mouse is small (around a hundred lines of platform-specific code), so this wasn’t a huge issue.
+Keeping Bouncy Mouse free of big non-portable libraries means that the logic of the runtime code can be almost the same between versions (despite the language change). Additionally it saves us from getting locked into a non-portable tool chain.
+I’ve been asked if coding against OpenGL/WebGL directly causes increased complexity compared to using a library like [Cocos2D](http://cocos2d.org/) or [Unity](http://unity3d.com/) (there are some WebGL helpers out there as well). In fact, I believe just the opposite. Most mobile Phone / HTML5 games (at least ones like Bouncy Mouse) are very simple. In most cases, the game just draws a few sprites and maybe some textured geometry. The sum total of OpenGL-specific code in Bouncy Mouse is probably less than 1000 lines. I’d be surprised if using a helper library would actually reduce this number. Even if it cut this number in half, I’d need to spend significant time learning new libraries/tools just to save 500 lines of code.  On top of this, I have yet to find a helper library portable across all platforms I’m interested in, so taking such a dependency would significantly hurt portability.
+If I were writing a 3d game that needed lightmaps, dynamic LOD, skinned animation, and so on, my answer would certainly change. In this case I’d be re-inventing the wheel to try to hand-code my entire engine against OpenGL. My point here is that most Mobile/HTML5 games aren’t (yet) in this category, so no need to complicate things before it’s necessary.
+
+### Don’t Underestimate the Similarities Between Languages
+
+One last trick that saved a lot of time in porting my C++ codebase to a new language was the realization that most of the code is almost identical between each language. While some key elements may change, these are far fewer than things that don’t change. In fact, for many functions, going from C++ to Javascript simply involved running a few regular expression replacements on my C++ codebase.
+
+### Porting Conclusions
+
+That’s pretty much it for the porting process. I’ll touch on a few HTML5 specific challenges in the next few sections, but the main message is that, if you keep your code simple, porting will be a small headache, not a nightmare.
+
+## Audio
+
+One area that caused me (and seemingly everyone else) some trouble was audio. On iOS and Android, a number of solid audio choices are available (OpenSL, OpenAL), 
+but in the world of HTML5, things looked bleaker. While HTML5 Audio is available, I found that it has some deal-breaking problems when used in games. Even on the newest browsers, 
+I frequently ran into strange behavior. Chrome, for instance, seems to have a limit on the number of simultaneous Audio elements ([source](http://code.google.com/p/chromium/issues/detail?id=110639)) you can create. Additionally, even when sound would play, 
+it would sometimes end up inexplicably distorted. Overall, I was a bit worried.
+Searching online revealed that just about everyone has the same problem. The solution I initially landed on was an API called SoundManager2. This API uses HTML5 Audio when available, 
+falling back to Flash in tricky situations. While this solution worked, it was still buggy and unpredictable (just less so than pure HTML5 Audio). 
+A week after launching, I talked to some of the helpful folks at Google, who pointed me at Webkit’s Web Audio API. I had originally considered using this API, 
+but had shied away from it due to the amount of unnecessary (for me) complexity the API seemed to have. I just wanted to play a few sounds: with HTML5 Audio this amounts to a couple lines of Javascript. 
+However, in my brief look at Web Audio, I was struck by its huge (70 page) specification, the small amount of samples on the web (typical for a new API), 
+and the omission of a “play”, “pause”, or “stop” function anywhere in the spec. 
+With Google’s assurances that my worries weren’t well founded, I dug into the API again. After looking at a few more examples and doing a bit more research, 
+I found that Google was right–the API can definitely meet my needs, and it can do so without the bugs that plague the other APIs. Especially handy is the article [Getting Started with Web Audio API](http://www.html5rocks.com/en/tutorials/webaudio/intro/), 
+which is a great place to go if you want to gain a deeper understanding of the API. 
+My real issue is that even after understanding and using the API, it still seems to me like an API that isn’t designed to “just play a few sounds”. 
+To get around this misgiving, I wrote a small helper class which let me use the API just the way I wanted–to play, pause, stop, and query the state of a sound. 
+I called this helper class AudioClip. The full source is available [on GitHub](https://github.com/Munkadoo/oss/blob/master/WebAudio/WebAudioHelper.js)
+under the Apache 2.0 license, and I’ll be discussing the details of the class below. But first, some background on the Web Audio API:
+
+### Web Audio Graphs
+
+The first thing that makes the Web Audio API more complex (and more powerful) than the HTML5 Audio element is its ability to process / mix audio before outputting it to the user. While powerful, the fact that any audio playback involves a graph makes things a bit more complex in simple scenarios. To illustrate the power of the Web Audio API, consider the following graph:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/txV1GdBKIMYWD0rVCtIq.svg", alt="Basic Web Audio Graph", width="651", height="314" %}
+<figcaption>Basic Web Audio Graph</figcaption>
+</figure>
+
+While the above example shows the power of the Web Audio API, I didn’t need most of this power in my scenario. I just wanted to play a sound. While this still requires a graph, the graph is very simple.
+
+### Graphs Can Be Simple
+
+The first thing that makes the Web Audio API more complex (and more powerful) than the HTML5 Audio element is its ability to process / mix audio before outputting it to the user. While powerful, the fact that any audio playback involves a graph makes things a bit more complex in simple scenarios. To illustrate the power of the Web Audio API, consider the following graph:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hM71AVkmii4Kd5zMLV5y.svg", alt="Trivial Web Audio Graph", width="392", height="218" %}
+<figcaption>Trivial Web Audio Graph</figcaption>
+</figure>
+
+The trivial graph shown above can accomplish everything needed to play, pause, or stop a sound.
+
+### But Let's Not Even Worry About the Graph
+
+While understanding the graph is nice, it’s not something I want to deal with each time I play a sound. Therefore, I wrote a simple wrapper class “AudioClip”. This class manages this graph internally, but presents a much simpler user-facing API.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JCxm2JnV2VvweoebkUsr.svg", alt="AudioClip", width="655", height="401" %}
+<figcaption>AudioClip</figcaption>
+</figure>
+
+This class is nothing more than a Web Audio graph and some helper state, but allows me to use much simpler code than if I had to build a Web Audio graph to play each sound.
+
+```js
+// At startup time
+var sound = new AudioClip("ping.wav");
+
+// Later
+sound.play();
+```
+
+### Implementation Details
+
+Let’s take a quick look at the helper class’s code:
+Constructor – The constructor handles loading the sound data using an XHR. Although not shown here (to keep the example simple), an HTML5 Audio element could also be used as a source node. This is especially helpful for large samples. Note that the Web Audio API requires that we fetch this data as an “arraybuffer”. Once the data is received, we create a Web Audio buffer from this data (decoding it from its original format into a runtime PCM format).
+
+```js
+/**
+* Create a new AudioClip object from a source URL. This object can be played,
+* paused, stopped, and resumed, like the HTML5 Audio element.
+*
+* @constructor
+* @param {DOMString} src
+* @param {boolean=} opt_autoplay
+* @param {boolean=} opt_loop
+*/
+AudioClip = function(src, opt_autoplay, opt_loop) {
+// At construction time, the AudioClip is not playing (stopped),
+// and has no offset recorded.
+this.playing_ = false;
+this.startTime_ = 0;
+this.loop_ = opt_loop ? true : false;
+
+// State to handle pause/resume, and some of the intricacies of looping.
+this.resetTimout_ = null;
+this.pauseTime_ = 0;
+
+// Create an XHR to load the audio data.
+var request = new XMLHttpRequest();
+request.open("GET", src, true);
+request.responseType = "arraybuffer";
+
+var sfx = this;
+request.onload = function() {
+// When audio data is ready, we create a WebAudio buffer from the data.
+// Using decodeAudioData allows for async audio loading, which is useful
+// when loading longer audio tracks (music).
+AudioClip.context.decodeAudioData(request.response, function(buffer) {
+    sfx.buffer_ = buffer;
+    
+    if (opt_autoplay) {
+    sfx.play();
+    }
+});
+}
+
+request.send();
+}
+```
+
+Play – Playing our sound involves two steps: setting up the playback graph, and calling a version of “noteOn” on the graph’s source. A source can only be played back once, so we must re-create the source/graph each time we play.
+Most of the complexity of this function comes from requirements needed to resume a paused clip (`this.pauseTime_ > 0`). To resume playback of a paused clip, we use `noteGrainOn`, 
+which allows playing a sub-region of a buffer. Unfortunately, `noteGrainOn` doesn’t interact with looping in the desired way for this scenario (it will loop the sub-region, not the whole buffer). 
+Therefore, we need to work around this by playing the remainder of the clip with `noteGrainOn`, then re-starting the clip from the beginning with looping enabled.
+
+```js
+/**
+* Recreates the audio graph. Each source can only be played once, so
+* we must recreate the source each time we want to play.
+* @return {BufferSource}
+* @param {boolean=} loop
+*/
+AudioClip.prototype.createGraph = function(loop) {
+var source = AudioClip.context.createBufferSource();
+source.buffer = this.buffer_;
+source.connect(AudioClip.context.destination);
+
+// Looping is handled by the Web Audio API.
+source.loop = loop;
+
+return source;
+}
+
+/**
+* Plays the given AudioClip. Clips played in this manner can be stopped
+* or paused/resumed.
+*/
+AudioClip.prototype.play = function() {
+if (this.buffer_ && !this.isPlaying()) {
+// Record the start time so we know how long we've been playing.
+this.startTime_ = AudioClip.context.currentTime;
+this.playing_ = true;
+this.resetTimeout_ = null;
+
+// If the clip is paused, we need to resume it.
+if (this.pauseTime_ > 0) {
+    // We are resuming a clip, so it's current playback time is not correctly
+    // indicated by startTime_. Correct this by subtracting pauseTime_.
+    this.startTime_ -= this.pauseTime_;
+    var remainingTime = this.buffer_.duration - this.pauseTime_;
+
+    if (this.loop_) {
+    // If the clip is paused and looping, we need to resume the clip
+    // with looping disabled. Once the clip has finished, we will re-start
+    // the clip from the beginning with looping enabled
+    this.source_ = this.createGraph(false);
+    this.source_.noteGrainOn(0, this.pauseTime_, remainingTime)
+
+    // Handle restarting the playback once the resumed clip has completed.
+    // *Note that setTimeout is not the ideal method to use here. A better 
+    // option would be to handle timing in a more predictable manner,
+    // such as tying the update to the game loop.
+    var clip = this;
+    this.resetTimeout_ = setTimeout(function() { clip.stop(); clip.play() },
+                                    remainingTime * 1000);
+    } else {
+    // Paused non-looping case, just create the graph and play the sub-
+    // region using noteGrainOn.
+    this.source_ = this.createGraph(this.loop_);
+    this.source_.noteGrainOn(0, this.pauseTime_, remainingTime);
+    }
+
+    this.pauseTime_ = 0;
+} else {
+    // Normal case, just creat the graph and play.
+    this.source_ = this.createGraph(this.loop_);
+    this.source_.noteOn(0);
+}
+}
+}
+```
+
+Play as Sound Effect - The play function above doesn’t allow the audio clip to be played multiple times with overlap (a second playback is only possible when the clip is finished or stopped). Sometimes a game will want to play a sound many times without waiting for each playback to complete (collecting coins in a game, etc). To enable this, the AudioClip class has a `playAsSFX()` method.
+Because multiple playbacks can occur simultaneously, the playback from `playAsSFX()` isn’t bound 1:1 with the AudioClip. Therefore, playback cannot be stopped, paused or queried for state. Looping is also disabled, as there would be no way to stop a looping sound played in this manner.
+
+```js
+/**
+* Plays the given AudioClip as a sound effect. Sound Effects cannot be stopped
+* or paused/resumed, but can be played multiple times with overlap.
+* Additionally, sound effects cannot be looped, as there is no way to stop
+* them. This method of playback is best suited to very short, one-off sounds.
+*/
+AudioClip.prototype.playAsSFX = function() {
+if (this.buffer_) {
+var source = this.createGraph(false);
+source.noteOn(0);
+}
+}
+```
+
+Stop, pause, and querying state – The rest of the functions are pretty straight forward and don’t require much explanation:
+
+```js
+/**
+* Stops an AudioClip , resetting its seek position to 0.
+*/
+AudioClip.prototype.stop = function() {
+if (this.playing_) {
+this.source_.noteOff(0);
+this.playing_ = false;
+this.startTime_ = 0;
+this.pauseTime_ = 0;
+if (this.resetTimeout_ != null) {
+    clearTimeout(this.resetTimeout_);
+}
+}
+}
+
+/**
+* Pauses an AudioClip. The offset into the stream is recorded to allow the
+* clip to be resumed later.
+*/
+AudioClip.prototype.pause = function() {
+if (this.playing_) {
+this.source_.noteOff(0);
+this.playing_ = false;
+this.pauseTime_ = AudioClip.context.currentTime - this.startTime_;
+this.pauseTime_ = this.pauseTime_ % this.buffer_.duration;
+this.startTime_ = 0;
+if (this.resetTimeout_ != null) {
+    clearTimeout(this.resetTimeout_);
+}
+}
+}
+
+/**
+* Indicates whether the sound is playing.
+* @return {boolean}
+*/
+AudioClip.prototype.isPlaying = function() {
+var playTime = this.pauseTime_ +
+            (AudioClip.context.currentTime - this.startTime_);
+
+return this.playing_ && (this.loop_ || (playTime < this.buffer_.duration));
+}
+```
+    
+### Audio Conclusion
+
+Hopefully this helper class is useful to developers struggling with the same Audio problems as me. Also, a class like this seems a reasonable place to start even if you need to add in some of the more powerful features of the Web Audio API. Either way, this solution met Bouncy Mouse’s needs, and allowed the game to be a true HTML5 game, no strings attached!
+
+## Performance
+
+Another area that worried me in regards to a Javascript port was performance. After finishing v1 of my port, I found that everything was working OK on my quad-core desktop. Unfortunately, things were a little less than OK on a netbook or Chromebook. In this case, Chrome’s profiler saved me by showing exactly where all my programs time was being spent.
+My experience highlights the importance of profiling before doing any optimization. I was expecting Box2D physics or maybe the rendering code to be a major source of slowdown; however, the majority of my time was actually being spent in my `Matrix.clone()` function. Given the math-heavy nature of my game, I knew that I did a lot of matrix creation/cloning, but I never expected this to be the bottleneck. In the end, it turned out that a very simple change allowed the game to cut its CPU usage by over 3x, going from 6-7% CPU on my desktop to 2%.
+Maybe this is common knowledge to Javascript developers, but as a C++ developer this problem surprised me, so I’ll go into a bit more detail. Basically, my original matrix class was a 3x3 matrix: a 3 element array, each element containing a 3 element array. Unfortunately, this meant that when it was time to clone the matrix, I had to create 4 new arrays. The only change I needed to make was to move this data into a single 9 element array and update my math accordingly. This one change was entirely responsible for this 3x CPU reduction I saw, and after this change my performance was acceptable across all my test devices.
+
+## More Optimization
+
+While my performance was acceptable, I was still seeing a few minor hiccups. After a bit more profiling, I realized that this was because of Javascript’s Garbage Collection. My app was running at 60fps, which meant that each frame had only 16ms to draw. Unfortunately, when garbage collection kicked in on a slower machine, it would sometimes eat up ~10ms. This resulted in a stutter ever few seconds, as the game required almost the full 16ms to draw a full frame.
+To get a better idea of why I was generating so much garbage, I used Chrome’s heap profiler. Much to my despair, it turned out that the vast majority of garbage (over 70%) was being generated by Box2D. Eliminating garbage in Javascript is a tricky business, and re-writing Box2D was out of the question, so I realized I had gotten myself into a corner. Fortunately, I still had one of the oldest tricks in the book available to me: When you can’t hit 60fps, run at 30fps. It’s fairly well agreed upon that running at a consistent 30fps is far better than running at a jittery 60fps. In fact I still haven’t received one complaint or comment that the game runs at 30fps (it’s really hard to tell unless you compare the two versions side by side). This extra 16ms per frame meant that even in the case of an ugly garbage collection, I still had plenty of time to render the frame.
+While running at 30fps isn’t explicitly enabled by the timing API I was using (WebKit’s excellent [requestAnimationFrame](https://developer.mozilla.org/DOM/window.requestAnimationFrame)), it can be accomplished in a very trivial manner. While maybe not as elegant as an explicit API, 30fps can be accomplished by knowing that RequestAnimationFrame’s interval is aligned to the monitor’s VSYNC (usually 60fps). This means that we just have to ignore every other callback. Basically, if you have a callback “Tick” which gets called every time “RequestAnimationFrame” is fired, this can be accomplished as follows:
+
+```js
+var skip = false;
+
+function Tick() {
+skip = !skip;
+if (skip) {
+return;
+}
+
+// OTHER CODE
+}
+```
+
+If you want to be extra cautious, you should check that the computer’s VSYNC is not already at or below 30fps at startup, and disable the skipping in this case. However, I haven’t yet seen this on any desktop/laptop configurations I’ve tested.
+
+## Distribution and Monetization
+
+One final area that surprised me about the Chrome port of Bouncy Mouse was monetization. Going into this project, I envisioned HTML5 games as an interesting experiment to learn up-and-coming technologies. What I didn’t realize was that the port would reach a very large audience and have significant potential for monetization. 
+
+Bouncy Mouse was launched at the end of October on the Chrome Web Store. By releasing on the Chrome Web Store I was able to leverage an existing system for discoverability, community engagement, rankings, and other features that I had grown used to on mobile platforms. What surprised me was how wide the reach of the store was. Within one month of release I had reached close to four hundred thousand installs and was already benefiting from the community engagement (bug reporting, feedback). One other thing that surprised me was a web-app’s potential for monetization.
+
+Bouncy Mouse has one simple monetization method - a banner ad next to the game content. However, given the broad reach of the game, I found that this banner ad was able to generate significant income, and during it's peak period, the app generated income comperable to my most successful platform, Android. One factor contributing to this is that the larger AdSense ads shown on the HTML5 version generate significantly higher revenue per impression than the smaller Admob ads shown on Android. Not only that, but the banner ad on the HTML5 version is much less intrusive than on the Android version, allowing for a cleaner gameplay experience. Overall I was very pleasantly surprised by this outcome.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yyaTb3BewMR6kA4IhIfm.png", alt="Normalized Earnings Over Time.", width="800", height="350" %}
+<figcaption>Normalized Earnings Over Time</figcaption>
+</figure>
+
+While the earnings from the game were much better than expected, it is worth noting that the reach of the Chrome Web Store is still smaller than that of more mature platforms like Android Market. While Bouncy Mouse was able to quickly shoot up to the #9 most popular game on the Chrome Web Store, the rate of new users coming to the site slowed down considerably since the initial release. That said, the game's still seeing steady growth, and I'm excited to see what the platform develops into!
+
+## Conclusion
+
+I would say that porting Bouncy Mouse to Chrome went much smoother than I expected. Other than some minor audio and performance issues, I found that Chrome was a perfectly capable platform for an existing smartphone game.  I’d encourage any developers who have been shying away from the experience to give it a shot. I’ve been very happy with both the porting process as well as the new gaming audience that having an HTML5 game has connected me to. 
+Feel free to shoot me an email if you have any questions. Or just drop a comment below, I’ll try to check these on a regular basis.
+
diff --git a/src/site/content/en/blog/mynet/index.md b/src/site/content/en/blog/mynet/index.md
new file mode 100644
index 00000000000..323a677e39c
--- /dev/null
+++ b/src/site/content/en/blog/mynet/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Mynet speeds up their mobile web experience by 4X, increasing revenue by 25% with AMP-based PWA
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9ZQhcn69EXtRZ9UHzcaT.jpg", alt="MyNet detail", width="800", height="800" %}
+</figure>
+
+Every month Mynet provides more than 34 million visitors to their site with
+news, video, gaming, financial, informational and entertainment content and
+services. After launching a Progressive Web App (PWA) that uses Accelerated
+Mobile Pages (AMP) for content, they saw a 4X decrease in average page load
+times. In addition, Mynet saw a significant increase in user engagement, with
+the average time spent on their mobile site rising 43%.
+
+- 25% higher revenue per article pageview
+- 4X faster average page-load speed
+- 43% longer average time on site
+- 34% more page views per session
+- 24% lower bounce rates
+ 
+## Challenge
+
+With more than 85% of their mobile traffic coming from the mobile web, Mynet’s
+mobile website is an indispensable part of their strategy. However, they noticed
+that users spent 2X less time on the mobile site than users of their native app.
+When Mynet analyzed user behavior on their mobile site, it was clear that their
+mobile-web experience was too slow. Mynet needed to build an extremely fast,
+engaging mobile website, similar to what they could achieve with a native app.
+ 
+## Solution
+
+To drive traffic and re-engagement simultaneously, Mynet launched a PWA that
+uses AMP to deliver a fast, app-like experience on the mobile web. With this
+setup, article pages loaded four times faster compared to the old mobile site.
+This led to a corresponding 24% decrease in bounce rates. Mynet also saw a
+correlation between speed and engagement, as users began spending 43% more time
+on the site. They also saw pageviews increase by 34% per session. This all was
+accomplished in several stages:
+ 
+## Starting fast with AMP
+
+Mynet first built support for its articles, served as standalone AMP pages. This
+let them show results in the AMP carousel in Google search results. It also let
+them deliver outstanding page-load performance for their users browsing content
+on the mobile web, which is critical on limited or flaky networks. Launching
+standalone AMP pages wasn’t a big challenge with their CMS system, and it only
+took two weeks to launch all of their article content in AMP.
+ 
+To ensure that ads were served as quickly and efficiently as possible, Mynet
+launched AMP Ads. These ads load up to twice as fast as standard ads, with
+clickthrough rates (CTR) and revenue increasing by up to 30%.
+ 
+## Staying fast and re-engaging with PWA
+
+Next, Mynet wanted to improve their mobile website, so they built a separate
+beta version of their mobile site with PWA technologies. They looked to these
+technologies to provide a more app-like, immersive user experience (UX), instead
+of minimally updating their underlying site. In particular, they took advantage
+of service workers for reliable performance on flaky networks, and the user
+prompt “Add to Home Screen” plus Push Notifications for re-engagement. They
+created a best-in-class PWA with a Lighthouse performance score of 95/100.
+(Lighthouse is an automated tool for improving the quality of web pages that can
+run against any page on the web.)
+ 
+## AMP and PWAs work better together
+
+After testing AMP and PWAs as standalone versions and optimizing their
+performance, Mynet was ready to move to the last stage of building a unified
+solution for their mobile website. Putting AMP content pages inside their PWA
+brought together speed and usability in their new mobile site. Once the combined
+AMP/PWA site launched, Mynet reduced the number of web-production versions by
+half—mobile and desktop—lowering the number of implementations required to
+maintain and improve the code.
+ 
+Why use a combined AMP/PWA solution? AMP delivers outstanding first-page load
+performance on the mobile web, while PWAs make repeat visits fast and reliable.
+Thanks to the “Add to Home Screen” prompt and Push Notifications, PWAs also let
+sites increase their users’ re-engagement. Together, this strategy allows Mynet
+to deliver high-quality experiences on first or repeat visits, regardless of the
+network condition.
+ 
+Approximately 30% of visitors to Mynet’s mobile web site use an iOS device.
+Mynet saw a 15% increase in average pageviews per session and a 23% decrease in
+bounce rate on iOS—all despite “Add to Home Screen”, Push Notifications, and
+offline caching being unavailable due to lack of service worker support on iOS.
+This increased engagement resulted from the speed and user-interface (UI)
+improvements delivered by the AMP-based PWA.
+ 
+The overall impact of using AMP within their PWA is a 25% increase in ad revenue
+per article pageview.
+ 
+{% Blockquote 'M. Fuat Seker , Business Development and Product Group Manager, Mynet'%}
+With a renewed focus on speed, we decided to integrate AMP and build a
+Progressive Web App. AMP was important to reduce page abandonments, and we
+now see AMP pages loading four times faster. By building a PWA, we achieved
+feature parity with our app and users now spend 43% more time on our site
+and re-engage more often.
+{% endBlockquote %}
+ 
+ 
+### Additional results 
+
+- 2X faster load times with AMP Ads
+- 30% higher CTR and revenue with AMP Ads
+- 15% increase in average pageviews per session on iOS
+- 23% lower bounce rates in iOS
diff --git a/src/site/content/en/blog/natgeo/index.md b/src/site/content/en/blog/natgeo/index.md
new file mode 100644
index 00000000000..0897b567180
--- /dev/null
+++ b/src/site/content/en/blog/natgeo/index.md
@@ -0,0 +1,159 @@
+---
+layout: post
+title: Next Generation Web Layout - National Geographic Forest Giant
+authors:
+  - christophergammon
+date: 2013-06-03
+tags:
+  - blog
+  - case-study
+---
+
+Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. Adobe has had a long history of working with content creators who are passionate about layout and design, and so has been active in applying this knowledge to the web with contributions to many evolving web standards.
+
+With the help of National Geographic, we used content from their feature titled ‘Forest Giant’ to build a prototype showcasing how these features can enable rich web layout and responsive techniques. This article will show how we built some particularly interesting characteristics of the site. For a concise overview it’s worth watching [this video below](https://www.youtube.com/watch?v=UM0Cl3wWys0) where Christian Cantrell walks you through the various features of the site.
+
+{% YouTube id="UM0Cl3wWys0" %}
+
+## Subtleties of Layout
+
+What constitutes great layout and the features behind it can be subtle, so we created an "editor's overlay" which highlights the more noteworthy features. To enable editor's marks, click on the bar at the bottom of the article.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RnCyRfvuq2HWm1NCoMgl.gif", alt="Editor's marks image", width="477", height="473" %}
+</figure>
+
+## Layout Independent
+
+In the web today, layout is often dictated by our content with containers enlarging vertically to fit text. When creating complex layouts, changes to the copy or other content can have an unwanted impact on the overall layout, causing the need for one to redesign content based on unexpected changes. With regions, we can truly separate our content from layout by defining an element as our content, and then specifying the parts of the layout we want that content to flow through.
+
+In the example of ‘Forest Giant’ we have the story contained in a single element. Then, throughout the page, we have our layout scaffolding, consisting of photos and text areas. With CSS, we define the elements we want the content to flow through. When the copy reaches the end of an element, it continues to the next one in the DOM order. This allows us to get really creative with our columns, offsetting them and adapting their height based on the design, without concern of whether the text will fit or exceed the height of the element. It also allows us to have elements within our layout, like full width images, while the story continues to flow through it.
+
+```css
+#storyContent {
+    flow-into: story;
+}
+.story {
+    flow-from: story;
+}
+```
+
+In the CSS above, we are creating a named flow called __"story"__. The content of this named flow is the element with the id of __"storyContent"__. This then flows through all of the elements with the class name __"story"__. CSS Regions are a great tool for responsive design allowing features like multi-columns and offset columns for rich layout on large screens while adjusting to single column layout on smaller screens. With regions you can also set the size of your region with responsive units like vw or vh.  This can be used to ensure columns don’t exceed the viewport height in your layout, without worrying about content getting cut off, since it will naturally flow into the next element in the region chain.
+
+
+## Drop Caps
+
+CSS Exclusions allow us to wrap text around or within irregular shapes. This can be useful for design flourishes like drop caps. Drop caps are a common design practice, where the first letter of a story or chapter is enlarged, allowing the rest of the text to wrap around the contour of the character. This effect is very similar to how inline content wraps around floats, however with exclusions, we are no longer restricted to rectangular boxes. Using shape-outside on a float, we can define the geometry that allows our content to wrap tightly around the shape of our character.
+
+```css
+.drop-caps {
+    height: 100px;
+    width: 100px;
+    float: left;
+    shape-outside: ellipse(50%, 50%, 50%, 50%);
+}
+```
+
+This will create an ellipse allowing content to wrap around the circular shape. Also, because we are using relative units for the shape, changing the size of the element will be reflected in the size of the shape.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dvld43h1IEJCT6k36D1K.jpg", alt="Drop Cap image", width="478", height="473" %}
+</figure>
+
+## Shapes
+
+Along with drop caps, exclusions bring the ability to wrap text within shapes using shape-inside. We use this feature throughout the site, particularly with large image captions, making use of the negative space of photos to frame the text. It also allows us to wrap text along the contour of other images and graphics emulating layouts that were previously very difficult to achieve on the web.
+
+Shapes can also work with responsive layouts by using relative units to define your shape. This way we can make shapes that stretch based on the container or viewport, and even use media queries to completely change the shape or remove it since it is all defined in CSS. Below is an example of one of a polygon shape being used within the site with the values defining the points:
+
+```css
+.shape {
+    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
+}
+```
+ 
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bkMXfDcQqpvBe1usuDDH.jpg", alt="CSS Shapes image", width="478", height="473" %}
+</figure>
+
+## Balanced Text
+
+Balanced Text is a feature that looks at the whole block of text within an element when wrapping lines, rather than wrapping word by word. It avoids situations where we have one or two words on a single line by breaking lines of text to achieve evenly sized lines within an element. This level of control allows us to easily create aesthetically pleasing blocks of text, especially for short runs like pull quotes or subtitles.
+
+This is exactly where we’re using Balanced Text within the article. Because this feature is a standard that Adobe is Proposing, we’re using a <a href="https://github.com/adobe-webplatform/balance-text">polyfill created by Randy Edmunds</a> to achieve the same results.  This feature is best seen in responsive cases. When resizing the browser, you’ll notice that the block continues to balance the text to result in lines with approximately the same width.  Using the balanced text polyfill is easy, because it’s a jQuery plugin, all we have to do is apply ‘balanceText()’ to a selector when the layout changes and we’ll get nicely balanced text, which looks like this:
+
+```js
+$('.balance').balanceText();
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8rhonRm5uzEbmBG60ZyT.gif", alt="Balanced text image", width="475", height="385" %}
+</figure>
+
+## Filter Transitions
+
+Transitions are an important way to direct the attention of the user, and communicate the state of things within your site. With opacity -- and more recently, 3D Transforms -- we have seen these being used to create graceful transitions and animations as users scroll or interact with parts of your site. We now have filters which can be used for the same purpose.
+
+In ‘Forest Giant’, we use filters to fade from grayscale to color as some images come into view. These filters can be combined with opacity, or other filters to create complex imaging effects and transitions.  We can use the power of custom filters to add even more dramatic effects.
+
+Custom filters are written using GLSL, the same shading language as WebGL. They allow you to apply these shaders to DOM elements through CSS, enabling complex blending effects and 3D distortion. At the bottom of the site, when you click ‘Explore the President Tree’, you’ll see the page curl up to reveal another section underneath. This is just one example of how custom filters can allow rich transitions between content. The animation can be achieved using CSS transitions.  However, if you’d like to use more robust animations or interactions than transitions allow, you can pass values to your shader by setting the style with javascript as can be seen below.  This can allow you to have more granular control over easing or even allow methods of user input to manipulate the shader.
+
+```js
+function applyCurl(value) {
+    $("#map").css("webkitFilter",
+    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+    + " rotateY(0deg) rotateZ(0deg), curlPosition "
+    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
+}
+```
+
+Our filter is rasterizing the content as a texture on the GPU to apply the effect.  Because of this, we need to be sure to remove it when it’s finished, otherwise our content may appear blurry.
+
+```js
+$("#map").css("webkitFilter", "none");
+```
+CSS custom filters enable interesting effects like page wrapping that looks like a page being flipped in a real book. They enable a web developer to program complex effects in a language called GLSL and apply it to web content. For more information on the details of custom filters, all those parameters, and how to use them, check out [this great tutorial](http://alteredqualia.com/css-shaders/article/).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/sRjyy3S5KvbpQ1EQMMlC.gif", alt="Page flip image", width="438", height="336" %}
+</figure>
+
+## Pre-Render Textures in WebGL
+
+The jewel of this article was the first complete image of ‘The President’, believed to be the second largest tree in the world by volume. This image was created by photo-stitching hundreds of photos of the tree to create a full picture.  We wanted to simulate this process by breaking the image into a bunch of little photos that fly into place to create the full picture.  This was achieved using WebGL, specifically with the [Three.js library](http://threejs.org/), which is a higher level API wrapper around WebGL.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0uCmKsy7uEQcaVsKBcr9.jpg", alt="Giant tree image", width="438", height="336" %}
+</figure>
+
+Rendering a large number of textures can quickly cause performance issues each time a new texture tries to draw on screen, not to mention extra network requests. To reduce this, we made our textures as large as possible and offset them for each tile. This technique is often referred to as sprite mapping, and is common in game development. This resulted in three large textures for the whole tree. To get rid of the performance hit each time one of the textures first becomes visible on screen, we render 1px squares with each of the textures before the animation starts, moving the performance hit to the beginning. This allows us to fly through and animate the entire height of the tree smoothly, even on a tablet.
+
+To offset the textures, we’re altering the UV’s which map the texture to the geometry.  In Three.js it looks like this:
+
+```js
+geometry.faceVertexUvs[0][0] = [
+    new THREE.Vector2(xOffset, yOffset + 1),
+    new THREE.Vector2(xOffset, yOffset),
+    new THREE.Vector2(xOffset + 1, yOffset),
+    new THREE.Vector2(xOffset + 1, yOffset + 1)
+];
+```
+
+Here you can see we’re using a variable for the x and y offset of the texture.  The same effect could be achieved with a custom GLSL shader material that offsets the drawn coordinates on the geometry.
+
+
+## Experimental Features
+
+Because some of the features the demo uses are still experimental, the article needs to be viewed in [Chrome Canary](https://www.google.com/intl/en/chrome/browser/canary.html) and enable all the flags mentioned for Chrome Canary at [this website](http://html.adobe.com/webplatform/enable/).
+
+
+Once you have Chrome Canary installed and properly configured, go [check out the demo](http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/). (Note that the entire project is open source and [available on GitHub](https://github.com/adobe-webplatform/Demo-for-National-Geographic-Forest-Giant).)
+
+## Conclusion
+
+We’ve also been exploring how these features might be used in the mobile application context, more along the lines of an e-book.  You can see this prototype in progress and how we’re utilizing the different interaction and touch paradigms to showcase these features on a tablet.
+
+{% YouTube id="zKjoZvRCyh0" %}
+
+With web browser layout constantly evolving, we’re seeing the desire to continue the production value and layout quality we’ve grown accustomed to in the past with legacy reading content.  With features like CSS Regions, Exclusions, balanced text, custom filters, and WebGL, content creators will no longer have to choose between reach and design quality.  ‘Forest Giant’ is a clear sign that the web of the future will allow both.
diff --git a/src/site/content/en/blog/native-file-system/fs-open.jpg b/src/site/content/en/blog/native-file-system/fs-open.jpg
deleted file mode 100644
index e7fefc9dc0f..00000000000
Binary files a/src/site/content/en/blog/native-file-system/fs-open.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/fs-save-icon.jpg b/src/site/content/en/blog/native-file-system/fs-save-icon.jpg
deleted file mode 100644
index aac09df56c2..00000000000
Binary files a/src/site/content/en/blog/native-file-system/fs-save-icon.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/fs-save-permission-crop.jpg b/src/site/content/en/blog/native-file-system/fs-save-permission-crop.jpg
deleted file mode 100644
index c75c55889ab..00000000000
Binary files a/src/site/content/en/blog/native-file-system/fs-save-permission-crop.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/fs-save-permission.jpg b/src/site/content/en/blog/native-file-system/fs-save-permission.jpg
deleted file mode 100644
index 01bf8f8c14e..00000000000
Binary files a/src/site/content/en/blog/native-file-system/fs-save-permission.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/fs-save.jpg b/src/site/content/en/blog/native-file-system/fs-save.jpg
deleted file mode 100644
index 6c39e8a2ac1..00000000000
Binary files a/src/site/content/en/blog/native-file-system/fs-save.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/hero.jpg b/src/site/content/en/blog/native-file-system/hero.jpg
deleted file mode 100644
index 4c00dbc694e..00000000000
Binary files a/src/site/content/en/blog/native-file-system/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/native-file-system/index.md b/src/site/content/en/blog/native-file-system/index.md
deleted file mode 100644
index 4484ca2afc1..00000000000
--- a/src/site/content/en/blog/native-file-system/index.md
+++ /dev/null
@@ -1,577 +0,0 @@
----
-title: "The Native File System API: simplifying access to local files"
-subhead: The new Native File System API allows web apps to read or save changes directly to files and folders on the user's device.
-authors:
-  - petelepage
-description: The new Native File System API enables developers to build powerful web apps that interact with files on the user's local device, like IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders on the user's device.
-date: 2019-08-20
-updated: 2020-07-06
-tags:
-  - blog
-  - capabilities
-  - origin-trials
-  - file
-  - file-system
-  - native-file-system
-hero: hero.jpg
-alt: Image of hard disk platters
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/4019462667428167681
----
-
-{% Aside %}
-  The Native File System API is available as an origin trial in Chrome, and is
-  part of [capabilities project](/fugu-status/). This post will be updated as
-  the implementation progresses. See the [what's new](#whats-new) section for
-  the latest updates.
-{% endAside %}
-
-## What is the Native File System API? {: #what-is-it }
-
-The [Native File System API][spec]  (formerly known as the Writeable Files API)
-enables developers to build powerful web apps
-that interact with files on the user's local device, like IDEs, photo and video
-editors, text editors, and more. After a user grants a web app access, this
-API allows web apps to read or save changes directly to files and folders
-on the user's device. Beyond reading and writing files, the Native File System
-API provides the ability to open a directory and enumerate its contents.
-
-If you've worked with reading and writing files before, much of what I'm about
-to share will be familliar to you. I encourage you to read anyway because not
-all systems are alike.
-
-{% Aside 'caution' %}
-  We've put a lot of thought into the design and implementation of the Native
-  File System API to ensure that people can easily manage their files. See the
-  [security and permissions](#security-considerations) section
-  for more information.
-{% endAside %}
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [In progress][spec]          |
-| 3. Gather feedback & iterate on design     | [In progress][spec]          |
-| 4. Origin trial                            | [In progress](#origin-trial)<br>First: Chrome 78-82<br>Second: Chrome 83-85 |
-| 5. Launch                                  | Not started                  |
-
-</div>
-
-## Using the Native File System API {: #how-to-use }
-
-To show off the true power and usefulness of the Native File System APIs,
-I wrote a single file [text editor][text-editor]. It lets you open a text
-file, edit it, save the changes back to disk, or start a new file and save
-the changes to disk. It's nothing fancy, but provides enough to help you
-understand the concepts.
-
-### Try it
-
-See the Native File System API in action in the
-[text editor](https://googlechromelabs.github.io/text-editor/) demo.
-
-### Enabling via chrome://flags
-
-If you want to experiment with the Native File System API locally, enable
-the `#native-file-system-api` flag in `chrome://flags`.
-
-### Enabling support during the origin trial phase {: #origin-trial }
-
-Starting in Chrome 83, a **new** origin trial has started for the Native File
-System API for all desktop platforms.
-
-{% Aside %}
-If you had an origin trial token for the [first origin trial](https://developers.chrome.com/origintrials/#/view_trial/3868592079911256065)
-(that ran from Chrome 78 to Chrome 82), you will need to obtain a new origin
-trial token.
-{% endAside %}
-
-{% include 'content/origin-trials.njk' %}
-
-{% include 'content/origin-trial-register.njk' %}
-
-### Read a file from the local file system {: #read-file }
-
-The first use case I wanted to tackle was to ask the user to choose a file,
-then open and read that file from disk.
-
-#### Ask the user to pick a file to read
-
-The entry point to the Native File System API is
-[`window.chooseFileSystemEntries()`][choose-fs-entries]. When called, it shows
-a file picker dialog box, and prompts the user to select a file. After selecting
-a file, the API returns a handle to the file. An optional options parameter
-lets you influence the behavior of the file picker, for example, by allowing the
-user to select multiple files, or directories, or different file types.
-Without any options specified, the file picker allows the user to select a
-single file. This is perfect for our text editor.
-
-Like many other powerful APIs, calling `chooseFileSystemEntries()` must be
-done in a [secure context][secure-contexts], and must be called from within
-a user gesture.
-
-```js/2
-let fileHandle;
-butOpenFile.addEventListener('click', async (e) => {
-  fileHandle = await window.chooseFileSystemEntries();
-  // Do something with the file handle
-});
-```
-
-Once the user selects a file, `chooseFileSystemEntries()` returns a handle,
-in this case a [`FileSystemFileHandle`][fs-file-handle] that contains the
-properties and methods needed to interact with the file.
-
-It's helpful to keep a reference to the file handle around so that it can be
-used later. It'll be needed to save changes back to the file, or to perform any
-other file operations.
-
-#### Read a file from the file system
-
-Now that you have a handle to a file, you can get the file's properties, or
-access the file itself. For now, let's simply read its contents. Calling
-`handle.getFile()` returns a [`File`][file-api-spec] object, which contains
-a blob. To get the data from the blob, call one of [its
-methods][blob-methods] (`slice()`, `stream()`, `text()`, `arrayBuffer()`).
-
-```js
-const file = await fileHandle.getFile();
-const contents = await file.text();
-```
-
-The `File` object returned by `FileSystemFileHandle.getFile()` is only
-readable as long as the underlying file on disk hasn't changed. If the file
-on disk is modified the `File` object becomes unreadable, and you'll need to
-call `getFile()` again to get a new `File` object to read the changed data.
-
-#### Putting it all together
-
-When users click the Open button, the browser
-shows a file picker. Once they've selected a file, the app reads the
-contents and puts them into a `<textarea>`.
-
-```js/3-4
-let fileHandle;
-butOpenFile.addEventListener('click', async (e) => {
-  fileHandle = await window.chooseFileSystemEntries();
-  const file = await fileHandle.getFile();
-  const contents = await file.text();
-  textArea.value = contents;
-});
-```
-
-### Write the file to the local file system {: #write-file }
-
-In the text editor, there are two ways to save a file: Save, and Save As.
-Save simply writes the changes back to the original file using the file
-handle we got earlier. But Save As creates a new file, and thus requires a
-new file handle.
-
-#### Create a new file
-
-Passing `{type: 'save-file'}` to `chooseFileSystemEntries()` will show the
-file picker in "save" mode, allowing the user to pick a new file they want
-to use for saving. For the text editor, I also wanted it to automatically
-add a `.txt` extension, so I provided some additional parameters.
-
-```js
-async function getNewFileHandle() {
-  const opts = {
-    type: 'save-file',
-    accepts: [{
-      description: 'Text file',
-      extensions: ['txt'],
-      mimeTypes: ['text/plain'],
-    }],
-  };
-  const handle = await window.chooseFileSystemEntries(opts);
-  return handle;
-}
-```
-
-#### Save changes to disk {: #save-to-disk }
-
-You can find all the code for saving changes to a file in my [text
-editor][text-editor] demo on [GitHub][text-editor-source]. The core file system
-interactions are in [`fs-helpers.js`][text-editor-fs-helper]. At its simpliest,
-the process looks like the code below. I'll walk through each step and explain
-it.
-
-```js
-async function writeFile(fileHandle, contents) {
-  // Create a FileSystemWritableFileStream to write to.
-  const writable = await fileHandle.createWritable();
-  // Write the contents of the file to the stream.
-  await writable.write(contents);
-  // Close the file and write the contents to disk.
-  await writable.close();
-}
-```
-
-Writing data to disk uses a [`FileSystemWritableFileStream`][fs-writablestream],
-essentially a [`WritableStream`][writable-stream]. Create the stream by calling
-`createWritable()` on the file handle object. When `createWritable()` is
-called, Chrome first checks if the user has granted write permission to the
-file. If permission to write hasn't been granted, the browser will prompt
-the user for permission. If permission isn't granted, `createWritable()`
-will throw a `DOMException`, and the app will not be able to write to the
-file. In the text editor, these `DOMException`s are handled in the
-[`saveFile()`][text-editor-app-js] method.
-
-The `write()` method takes a string, which is what we want for a text editor.
-But it can also take a [BufferSource][buffersource], or a [Blob][blob]. For
-example, you can pipe a stream directly to it:
-
-```js/4,6
-async function writeURLToFile(fileHandle, url) {
-  // Create a FileSystemWritableFileStream to write to.
-  const writable = await fileHandle.createWritable();
-  // Make an HTTP request for the contents.
-  const response = await fetch(url);
-  // Stream the response into the file.
-  await response.body.pipeTo(writable);
-  // pipeTo() closes the destination pipe by default, no need to close it.
-}
-```
-
-You can also [`seek()`][spec-seek], or [`truncate()`][spec-truncate] within the
-stream to update the file at a specific position, or resize the file.
-
-{% Aside 'caution' %}
-Changes are **not** written to disk until the stream is closed, either by
-calling `close()` or if the stream is automatically closed by the pipe.
-{% endAside %}
-
-{% Details %}
-{% DetailsSummary 'h5' %}
-
-Saving changes to disk in Chrome 82 and earlier
-
-Support for writable streams was added in Chrome 83, and the previous
-method for writing to disk was removed. It is temporarily documented
-below until Chrome 83 is available in stable.
-
-{% endDetailsSummary %}
-
-Support for writable streams was added in Chrome 83, and the previous
-method for writing to disk was removed. It is temporarily documented
-below until Chrome 83 is available in stable.
-
-```js
-async function writeFile(fileHandle, contents) {
-  // Create a writer (request permission if necessary).
-  const writer = await fileHandle.createWriter();
-  // Write the full length of the contents
-  await writer.write(0, contents);
-  // Close the file and write the contents to disk
-  await writer.close();
-}
-```
-
-To write data to disk, I needed a [`FileSystemWriter`][fs-writer]. Create one by
-calling `createWriter()` on the file handle object. When `createWriter()` is
-called, Chrome first checks if the user has granted write permission to the file.
-If permission to write hasn't been granted, the browser will prompt the user for
-permission. If permission isn't granted, `createWriter()` will throw a
-`DOMException`, and the app will not be able to write to the file. In the text
-editor, these `DOMException`s are handled in the [`saveFile()`][text-editor-app-js]
-method.
-
-Call `FileSystemWriter.write()` to write your contents.  The `write()` method
-takes a string, which is what we want for a text editor. But it can also take a
-[BufferSource][buffersource], or a [Blob][blob]. Finally, finish writing by
-calling `FileSystemWriter.close()`.
-
-{% endDetails %}
-
-### Storing file handles in IndexedDB
-
-Starting in Chrome 83, file handles are serializable, which means that you
-can save a file handle to IndexedDB, or `postMessage` them between the same
-top-level origin.
-
-Saving file handles to IndexedDB means that you can store state, or remember
-which files a user was working on. This makes it possible to keep a list of
-recently opened or edited files, offer to re-open the last file when the app
-is opened, et cetera. In the text editor, I store a list of the 5 most recent
-files the user has opened, making it easy to access those files again.
-
-Since permissions are not persisted between sessions, you should verify
-whether the user has granted permission to the file using
-`queryPermission()`. If they haven't, use `requestPermission()` to
-request permission.
-
-In the text editor, I created a `verifyPermission()` method that checks
-if the user has already granted permission, and if required makes the request.
-
-```js/6,10
-async function verifyPermission(fileHandle, withWrite) {
-  const opts = {};
-  if (withWrite) {
-    opts.writable = true;
-  }
-  // Check if we already have permission, if so, return true.
-  if (await fileHandle.queryPermission(opts) === 'granted') {
-    return true;
-  }
-  // Request permission, if the user grants permission, return true.
-  if (await fileHandle.requestPermission(opts) === 'granted') {
-    return true;
-  }
-  // The user didn't grant permission, return false.
-  return false;
-}
-```
-
-By requesting write permission with the read request, I reduced
-the number of permission prompts, the user sees one prompt when opening
-the file, and grants permission to both read and write to it.
-
-### Open a directory and enumerate its contents
-
-To enumerate all files in a directory, call `chooseFileSystemEntries()`
-with the `type` option set to `'open-directory'`. The user selects a directory
-in a picker, after which a [`FileSystemDirectoryHandle`][fs-dir-handle]
-is returned, which lets you enumerate and access the directory's files.
-
-```js
-const butDir = document.getElementById('butDirectory');
-butDir.addEventListener('click', async (e) => {
-  const opts = {type: 'open-directory'};
-  const handle = await window.chooseFileSystemEntries(opts);
-  const entries = await handle.getEntries();
-  for await (const entry of entries) {
-    const kind = entry.isFile ? 'File' : 'Directory';
-    console.log(kind, entry.name);
-  }
-});
-```
-
-## What's new/changed? {: #whats-new }
-
-Chrome 83
-
-* Adds support for [writable streams](#save-to-disk), and removes the previous
-  method for writing to disk (`FileSystemWriter`).
-* Allows serializing and storing file handles in IndexedDB, or sending via
-  `postMessage()` to other windows or workers within the same origin. Note that
-  permissions are not retained between browser sessions. For example, when a
-  browser tab is re-opened, and a file handle is obtained from IndexedDB, the
-  user will need to grant permission to read and write to the file again.
-* Adds support for [`isSameEntry()`][spec-issameentry], which returns `true`
-  if two entries represent the same file or directory.
-* Updates usage indicators to indicate whether the user has granted the domain
-  permission to files, including a new read-only indicator.
-* Adds support for [`resolve()`][spec-resolve], which will return the
-  relative path from one entry to another. This is especially helpful for multi-file
-  editors where you might want to highlight the parent directory of the file
-  being edited.
-* When permission to read or write to a file is granted, the permission is
-  shared among all same-origin tabs, aligning with other web platform APIs.
-* Changes the `type` passed to `chooseFileSystemEntries` to be dash-separated as
-  opposed to camelCase.
-
-{% Aside 'note' %}
-  Since the API is not compatible with all browsers yet,
-  we provide a library called
-  [browser-nativefs](https://github.com/GoogleChromeLabs/browser-nativefs)
-  that uses the new API wherever it is available, but falls back to legacy
-  approaches when it is not.
-{% endAside %}
-
-## Security and permissions {: #security-considerations }
-
-The Chrome team has designed and implemented the Native File System API using
-the core principles defined in
-[Controlling Access to Powerful Web Platform Features][powerful-apis],
-including user control and transparency, and user ergonomics.
-
-### Opening a file or saving a new file
-
-<figure class="w-figure w-figure--inline-right">
-  <a href="fs-open.jpg">
-    <img src="fs-open.jpg"
-         alt="File picker to open a file for reading">
-  </a>
-  <figcaption class="w-figcaption">
-    A file picker used to open an existing file for reading.
-  </figcaption>
-</figure>
-
-When opening a file, the user provides permission to read a file or
-directory via the file picker. The open file picker can only be shown via
-a user gesture when served from a [secure context][secure-contexts]. If
-users change their minds, they can cancel the selection in the file
-picker and the site does not get access to anything. This is the same
-behavior as that of the `<input type="file">` element.
-
-<div class="w-clearfix"></div>
-
-<figure class="w-figure w-figure--inline-left">
-  <a href="fs-save.jpg">
-    <img src="fs-save.jpg"
-         alt="File picker to save a file to disk.">
-  </a>
-  <figcaption class="w-figcaption">
-    A file picker used to save a file to disk.
-  </figcaption>
-</figure>
-
-Similarly, when a web app wants to save a new file, the browser will show
-the save file picker, allowing the user to specify the name and location
-of the new file. Since they are saving a new file to the device (versus
-overwriting an existing file), the file picker grants the app permission
-to write to the file.
-
-<div class="w-clearfix"></div>
-
-#### Restricted folders
-
-To help protect users and their data, the browser may limit the user's
-ability to  save to certain folders, for example, core operating system
-folders like Windows, the macOS Library folders, etc. When this happens,
-the browser will show a modal prompt and ask the user to choose a
-different folder.
-
-### Modifying an existing file or directory
-
-A web app cannot modify a file on disk without getting explicit permission
-from the user.
-
-#### Permission prompt
-
-<figure class="w-figure w-figure--inline-right">
-  <a href="fs-save-permission.jpg">
-    <img src="fs-save-permission-crop.jpg" class="w-screenshot"
-         alt="Permission prompt shown prior to saving a file.">
-  </a>
-  <figcaption class="w-figcaption">
-    Prompt shown to users before the browser is granted write
-    permission on an existing file.
-  </figcaption>
-</figure>
-
-If a person wants to save changes to a file that they previously granted
-read access to, the browser will show a modal permission prompt, requesting
-permission for the site to write changes to disk. The permission request
-can only be triggered by a user gesture, for example, by clicking a "Save"
-button.
-
-Alternatively, a web app that edits multiple files, like an IDE, can
-also ask for permission to save changes at the time of opening.
-
-If the user chooses *Cancel*, and does not grant write access, the web
-app cannot save changes to the local file. It should provide an alternative
-method to allow the user to save their data, for example by providing a way to
-["download" the file][download-file], saving data to the cloud, etc.
-
-<div class="w-clearfix"></div>
-
-### Transparency
-
-<figure class="w-figure w-figure--inline-right">
-  <a href="fs-save-icon.jpg">
-    <img src="fs-save-icon.jpg" class="w-screenshot"
-         alt="Omnibox icon">
-  </a>
-  <figcaption class="w-figcaption">
-    Omnibox icon indicating the user has granted the website permission to
-    save to a local file.
-  </figcaption>
-</figure>
-
-Once a user has granted permission to a web app to save a local file,
-Chrome will show an icon in the omnibox. Clicking on the omnibox icon
-opens a popover showing the list of files the user has given access to.
-The user can easily revoke that access if they choose.
-
-<div class="w-clearfix"></div>
-
-### Permission persistence
-
-The web app can continue to save changes to the file without prompting until
-all tabs for that origin are closed. Once a tab is closed, the site loses all
-access. The next time the user uses the web app, they will be re-prompted
-for access to the files.
-
-## Feedback {: #feedback }
-
-We want to hear about your experiences with the Native File System API.
-
-### Tell us about the API design {: .hide-from-toc }
-
-Is there something about the API that doesn't work like you expected? Or
-are there missing methods or properties that you need to implement your
-idea? Have a question or comment on the security model?
-
-* File a spec issue on the [WICG Native File System GitHub repo][spec-issues],
-  or add your thoughts to an existing issue.
-
-### Problem with the implementation? {: .hide-from-toc }
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-* File a bug at [https://new.crbug.com][new-bug]. Be sure to include as
-  much detail as you can, simple instructions for reproducing, and set
-  *Components* to `Blink>Storage>FileSystem`. [Glitch](https://glitch.com)
-  works great for sharing quick and easy repros.
-
-### Planning to use the API? {: .hide-from-toc }
-
-Planning to use the Native File System API on your site? Your public support
-helps us to prioritize features, and shows other browser vendors how
-critical it is to support them.
-
-* Share how you plan to use it on the [WICG Discourse thread][wicg-discourse]
-* Send a Tweet to [@ChromiumDev][cr-dev-twitter] with `#nativefs` and
-  let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [Native File System specification][spec] & [File specification][file-api-spec]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Request an [origin trial token]({{origin_trial.url}})
-* [Native File System API - Chromium Security Model][nfs-cr-sec-model]
-* Blink Component: `Blink>Storage>FileSystem`
-
-[spec]: https://wicg.github.io/native-file-system/
-[cr-bug]: https://crbug.com/853326
-[cr-status]: https://www.chromestatus.com/feature/6284708426022912
-[explainer]: https://github.com/WICG/native-file-system/blob/master/EXPLAINER.md
-[spec-security]: https://wicg.github.io/native-file-system/#privacy-considerations
-[new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EStorage%3EFileSystem
-[nfs-cr-sec-model]: https://docs.google.com/document/d/1NJFd-EWdUlQ7wVzjqcgXewqC5nzv_qII4OvlDtK6SE8/edit
-[wicg-discourse]: https://discourse.wicg.io/t/writable-file-api/1433
-[file-api-spec]: https://w3c.github.io/FileAPI/
-[blob-methods]: https://developer.mozilla.org/en-US/docs/Web/API/Blob
-[choose-fs-entries]: https://wicg.github.io/native-file-system/#api-choosefilesystementries
-[fs-writer]: https://wicg.github.io/native-file-system/#filesystemwriter
-[blob]: https://developer.mozilla.org/en-US/docs/Web/API/Blob
-[buffersource]: https://developer.mozilla.org/en-US/docs/Web/API/BufferSource
-[fs-file-handle]: https://wicg.github.io/native-file-system/#api-filesystemfilehandle
-[fs-dir-handle]: https://wicg.github.io/native-file-system/#api-filesystemdirectoryhandle
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[ot-guide]: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
-[spec-issues]: https://github.com/wicg/native-file-system/issues/
-[api-surface]: https://docs.google.com/document/d/11rcS0FdwM8w-s2esacEQxFfp3g2AAI9uD7drH8ARKPA/edit#
-[secure-contexts]: https://w3c.github.io/webappsec-secure-contexts/
-[writablestream]: https://streams.spec.whatwg.org/#ws-class
-[text-editor]: https://googlechromelabs.github.io/text-editor/
-[text-editor-source]: https://github.com/GoogleChromeLabs/text-editor/
-[text-editor-fs-helper]: https://github.com/GoogleChromeLabs/text-editor/blob/master/src/inline-scripts/fs-helpers.js
-[text-editor-app-js]: https://github.com/GoogleChromeLabs/text-editor/blob/master/src/inline-scripts/app.js
-[download-file]: https://developers.google.com/web/updates/2011/08/Downloading-resources-in-HTML5-a-download
-[cr-dev-twitter]: https://twitter.com/chromiumdev
-[fs-writablestream]: https://wicg.github.io/native-file-system/#api-filesystemwritablefilestream
-[writable-stream]: https://developer.mozilla.org/en-US/docs/Web/API/WritableStream
-[spec-resolve]: https://wicg.github.io/native-file-system/#api-filesystemdirectoryhandle-resolve
-[spec-issameentry]: https://wicg.github.io/native-file-system/#api-filesystemhandle-issameentry
-[spec-seek]: https://wicg.github.io/native-file-system/#api-filesystemwritablefilestream-seek
-[spec-truncate]: https://wicg.github.io/native-file-system/#api-filesystemwritablefilestream-truncate
diff --git a/src/site/content/en/blog/nativedebate/index.md b/src/site/content/en/blog/nativedebate/index.md
new file mode 100644
index 00000000000..9c357ec358e
--- /dev/null
+++ b/src/site/content/en/blog/nativedebate/index.md
@@ -0,0 +1,332 @@
+---
+layout: post
+title: HTML5 vs Native
+subhead: The mobile app debate
+authors:
+  - mahemoff
+date: 2011-06-03
+tags:
+  - blog
+---
+
+## Introduction
+
+Mobile apps and HTML5 are two of the hottest technologies right now, and
+there's plenty of overlap. Web apps run in mobile browsers and can also be
+re-packaged as native apps on the various mobile platforms. With the wide
+range of platforms to support, combined with the sheer power of mobile
+browsers, developers are turning to HTML5 as a "write one, run many"
+solution. But is it really viable? There are still compelling reasons to go
+native, and clearly, many developers are indeed going that route. This
+article is a debate on native versus the web.
+
+## Feature Richness
+
+### Point: Native can do more
+
+We can divide mobile functionality into two dimensions: the
+experience of the app itself, and the way it hooks into the device's
+ecosystem, e.g. for Android, this would be features like widgets and
+notifications. Native excels in both dimensions.
+
+In terms of app experience, native apps can do more. They can easily get
+hold of swipe events, mutlitouch even, for those platforms which support it.
+They can typically act on hard keys being pressed, like Android's search button
+and volume controls.  They can access hardware too, like GPS and camera. And
+with the user's permission, some platforms provide unfettered access to the
+operating system. Just try detecting how much battery remains with HTML5!
+
+It's more than the in-app experience though. An operating system
+like Android provides different ways for apps to interact with
+users, and indeed, with other apps. You have active widgets on the
+homepage. You have notifications, which show up in the device's
+status bar. And you have intents, which allow your app to announce
+itself as providing a general service which other apps might require
+on occasion.
+
+### Counterpoint: Native features can be augmented, and the web is catching up anyway
+
+It's true that many in-app features are simply beyond
+reach for an HTML5 app. No matter how hot your web-fu skills are,
+if your app is stuck in a sandbox with no camera API, it won't be
+taking snaps anytime soon! Fortunately, you don't have to be in
+that sandbox. If you really need your web app to take a photo, you
+can create a native app, one with an embedded web view which provides
+the bulk of the user interface. This is how the open-source
+PhoneGap framework operates: it fills the gap by exposing native
+features as web services, which the web view calls using a
+standard networking API. When you build a hybrid app like this,
+you're also able to hook into those platform features like
+widgets, notifications, and intents.
+
+Making a hybrid - native plus web - app is hardly an ideal
+solution. It adds complexity and applies only to web apps wrapped as
+native apps, rather than traditional websites accessed from a mobile
+browser. But it mightn't be necessary for long. Web standards are
+evolving rapidly, and modern mobile browsers are keeping pace.
+Offline storage, geolocation, canvas graphics, and video/audio
+playback all  enjoy widespread support among modern smarpthones, for example.
+Even camera is starting to be supported  -  as of Android 3.1, it's
+possible to capture photos and videos using web standards.  And the latest iOS
+browser supports WebSocket for 2-way streaming, as well as device orientation
+detection.
+
+Overall, mobile is evolving. But the web is also evolving, and fast. Among
+desktop browsers alone, there are five major browser vendors evolving standards
+and adding features at lightning pace.  While it's not a trivial process to
+port these features to mobile, many of them have already made their way into
+the mobile browsers.
+
+Native is a fast-moving target, but the web is closing the gap.
+
+## Performance
+
+### Point: Native runs faster
+
+Native apps don't have the web runtime barrier to deal with. They
+run close to the metal and can take advantage of performance
+boosters like GPU acceleration and multithreading.
+
+### Counterpoint: Web runtimes are much faster today, and most apps don't need the speed anyway
+
+It would be an understatement to say the web has gotten faster in
+recent years. V8, the JavaScript engine that ships with Chrome, was a
+major development in web performance when it launched, and since then, it
+has only gotten faster:
+
+<figure>
+<a href="http://blog.chromium.org/2010/12/new-crankshaft-for-v8.html">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tUAj9JVwmvVqvmxfypAV.png", alt="V8 performance graph", width="400", height="230" %}
+</a>
+</figure>
+
+Graphic rendering engines has also sped up the web, and now hardware
+acceleration is starting to happen. Have a look at the speed bump provided by
+hardware accelerated-canvas:
+
+<a href="http://www.maximumpc.com/article/news/hardware-accelerated_chrome_7_60x_faster_previous_versions">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tUAj9JVwmvVqvmxfypAV.png", alt="Hardware accelerated-canvas graph", width="400", height="230" %}
+</a>
+
+In addition, the new Web Workers API makes multithreading a possibility, and
+modern web developers can also call on a range of performance-optimized libraries,
+and well-researched performance optimizion techniques. While most of those started
+life on the desktop web, they are still relevant to mobile, and there's
+increased attention paid to mobile, e.g.  performance guru Steve Souders has [page dedicated to mobile performance tools](http://stevesouders.com/mobileperf/).
+
+Not all desktop advances have made their way to every mobile platform yet,
+but the trends indicate they are on their way. It's also important to note that
+the majority of mobile apps aren't bleeding-edge 3D games, but fundamentally
+information-based: news, mail, timetables, social networks, etc. Visit a few
+sites from your mobile, e.g. GMail, Amazon, Twitter, and you can confirm mobile
+web performance is more than adequate. As for games, basic ones are already
+feasible with 2D canvas, and WebGL is starting to appear on mobiles - see
+Firefox 4. Until it's widespread, there is a growing family of frameworks which
+compile WebGL apps to native apps that can take advantage of OpenGL, e.g. [ImpactJS](http://impactjs.com/).
+
+## Developer Experience
+
+### Point: Native is easier to develop
+
+Native apps use robust programming languages (e.g. Java,
+Objective C, C++) which were designed for complex application
+development and have a proven track record. The APIs were designed
+ground-up to support the platform at hand. You can easily debug apps
+in desktop emulators which provide a close representation of the
+target device.
+
+What makes web development particularly troublesome is the huge
+diversity of browsers and runtimes. When your app runs, it's no
+guarantee feature X will be available. And even if it is, how will
+the browser implement it? Standards are open to interpretation.
+
+### Counterpoint: Web is often easier to develop, especially if targeting multiple devices
+
+Let's tackle core technology first. It's true that web standards
+were originally conceived in an era when the web was fundamentally
+about documents, not apps, with JavaScript built and deployed in
+just 10 days! But they've turned out to be much more capable than
+imagined - web developers have learned to leverage the good parts
+and tame the bad parts, with patterns now understood for scaleable
+design. Furthermore, the standards are not standing still, and
+efforts like HTML5, CSS3, and EcmaScript Harmony are all improving
+the developer experience. Whether you prefer C++ or Java or
+JavaScript is a matter of religious debate, and also depends on your
+legacy code base. But we can certainly include JavaScript as a
+serious contender these days.
+
+The flipside to browser/runtime fragmentation is the fact that
+all these environments exist in the first place. Develop an Android
+app in Java, and you're faced with a full port to Objective C to
+support iOS. Develop a web app once and it will run in Android and
+iOS, not to mention WebOS, BlackBerry, Windows Mobile and… well,
+that's the theory anyway. In practice, you'll need to tweak things
+for each platform if you really want to get the experience right.
+But you'd have to do that in native too, for most mobile operating
+systems - there are different versions and different devices.
+
+The good news is "fragmentation" has always been this way on the
+web, and there are well-known techniques to deal with it. Most
+importantly, the principle of progressive enhancement urges
+developers to target a basic device first, and add layers of
+platform-specific awesomeness where it's available. The mantra of
+feature detection also helps and these days, we have library support
+from the likes of [Modernizr](http://www.modernizr.com/) to support responsive
+web design. With judicious use of these techniques, you can
+expand your reach to the vast majority of devices, even
+old-school "feature phones", even form factors like watches and
+TVs, regardless of make and OS. Witness our [multi-UI demonstration](http://www.google.com/events/io/2011/sessions/mobile-web-development-from-zero-to-hero.html) at Google IO 2011,
+where we targeted distinct form factors (feature phone, smartphone, tablet, desktop, TV) with
+a common code base of logic and markup.
+
+## Look-And-Feel
+
+### Point: Native fits platform look-and-feel
+
+One of the defining features of any platform is its look and
+feel. Users come to expect controls to be presented consistently and
+manipiulated in the same way. There are certain idioms which vary
+from platform to platform, e.g. what happens when the user performs
+a "long hold" (keep touching an element for several seconds)?
+Plaforms have standard idioms for such things, and you can't satisfy them all with a single HTML5 app.
+
+Furthermore, platform look-and-feel is orchestrated by the platform's native
+software library, whose widgets encapsulate the kind of look and feel users
+expect. You get a lot of the expected look-and-feel "for free" just by using
+the native toolkit.
+
+### Counterpoint: The web has its own look-and-feel, and you can also customize web interface for those platforms you care about the most
+
+As explained in the previous section, the way of web development
+is to write a basic "one size fits all" version, and then
+progressively enhance it. While the enhancement is typically based
+on features, you can also enhance it by targeting those platforms
+you care the most about. This is a kind of "browser detection",
+which is sometimes frowned upon by the web community, mostly because
+there are so many possible browsers out there. But if you do view
+two or three platforms with a very high priority, and you're willing
+to make the extra effort in order to stack up against native
+alternatives, this may be the way to go.
+
+As far as the baseline version, the web has its own
+look-and-feel, and we can even say each mobile platform has its own
+"web look-and-feel" established by the default browser and web
+runtime. "Web look-and-feel" may be fine for your users, and in
+fact, allows you to achieve a greater degree of consistency with the
+desktop browsing experience, as well as those on other devices the
+user might be working with. Furthermore, there are many successful
+apps which don't much support native look and feel anyway. This is
+certainly true of games (does your favorite mobile game follow your mobile
+OS's look and feel?), and even true of more conventional apps, e.g. check out
+the more popular native Twitter clients on your platform of choice, and you'll
+see a wide range of user-interface mechanisms at work.
+
+## Discoverability
+
+### Point: Native apps are easier to discover
+
+App distribution mechanisms, like Android's Market and Apple's
+App Store, have been overwhelmingly popular in recent years and are
+a major driving force for the entire mobile industry. Any developer
+can submit their native app to the marketplace, where users can
+discover it through a combination of browsing, searching, and
+getting recommendations. Not only that, but if you've done your job
+right, the glowing ratings and comments will convince users to hit
+the all-important install button.
+
+### Counterpoint: Actually, web apps are easier to discover
+
+The web is arguably the most discoverable medium ever created. In
+the humble URL, we have (in theory, at least) a unique identifier
+for everything ever published on the web, which includes any apps
+published on standard websites. Search engines make it easy to
+discover that content and other websites can link to it, including
+catalogues of web apps similar to mobile marketplaces. Indeed, any
+individual can share web apps with their friends by just linking to
+it in emails and social network messages. Links can be sent in SMS
+too, where mobile users will be able to click on the link and launch
+the app in their device's browser.
+
+We don't yet have the same marketplaces where users can rate and
+comment on apps, but that's changing too. Read on…
+
+## Monetization
+
+### Point: Native can be monetized
+
+"6 year-old makes app during lunch hour, sells a zillion copies
+at $3 each". You see that headline a lot these days, so it's no
+wonder developers big and small are looking to the mobile
+marketplaces for monetization. Mobile platforms offer several
+avenues for developers to directly charge for their apps. Simplest
+is the one-time payment, to unlock the app for all eternity. There
+are also in-app payment and subscription mechanisms on offer in some
+platforms, and they are tightly integrated in a consistent, secure,
+mechanism. These newer forms of payment allow developers to convert
+a smash-hit app into a long-term revenue stream.
+
+In addition to app payments, you can monetize with traditional
+web models, such as advertising and sponsorship.
+
+### Counterpoint: It's always been possible to monetize on the web, and the opportunities are growing
+
+The web would not be the engine of modern industry if there
+weren't ample opportunities to cash in. Although direct
+"pay-per-use" mechanisms haven't yet flourished, there are various
+niches where subscription-based "software as a service" solutions
+have indeed become viable. Examples include Google Apps, 37Signals'
+range of products, and premium versions of various email services.
+Furthermore, direct payments aren't the only way to profit from web
+apps. There's online advertising, affiliate links, sponsorships,
+cross-promotion to other products and services.
+
+Having said that, it's perfectly reasonable for a web developer
+to read the headlines and experience a dash of payment envy. You
+can't submit a web URL to the native marketplaces, so what's a web
+developer to do? What you do is create a native "wrapper app" - for
+each platform you want to target, create an empty native app that
+simply contains a web view. The web view is where you embed the real
+app. Then you just submit these apps to the various marketplaces
+(and hopefully watch the money roll in!). There are probably
+hundreds, if not thousands, of web-powered apps in the main
+marketplaces today, some of them so cunningly assimilated that we
+don't even know their web apps at all.
+
+The downside is the onus of cross-compiling to each
+platform. Here's where an existing framework like PhoneGap can help.
+Even better, there are web services like PhoneGap Build and
+Apparatio under development. Point these websites to your code
+repository, and out pops an Android app, an iOS app, and so
+on… ready for you to submit to the respective stores. No installing
+native SDKs on your machine; all you needed to build all these
+native apps was a a code editor and a web browser.
+
+Will the marketplaces ever support web apps directly, without all
+the overhead of wrapping them natively? It's not yet clear. We do
+know that Google introduced the Chrome Web Store last year, and
+although it applies only to the desktop, the store has triggered
+interest from other browser vendors, and is overall part of a trend
+towards web app catalogues, including some mobile-specific attempts.
+It's early days for the concept of a web store, but the signs are
+promising.
+
+## Conclusions
+
+It would be nice to declare a winner here, but right now, there
+is no clear winner. Some apps are best suited for native and some
+are best suited for the web. The web stack arguably has more
+momentum, but in terms of capabilities and execution qualities,
+native apps are moving fast too. And unless there comes a time when
+web technologies are a first-class citizen on the majority of mobile
+OSs, native will always be an important consideration.
+
+One technique mentioned in this article is hybrid apps, and this
+may be the best compromise for some developers: web view where it's
+possible and platform-specific native components where it's not.
+
+If you do choose the web path, be mindful of web standards and
+the principle of progressive enhancement. The web is a technology
+that knows how to target the multitudes of devices and operating
+systems around. Whether you choose to call it "fragmentation" or
+"diversity", the web embraces it and you developers can benefit from
+all the prior art out there.
diff --git a/src/site/content/en/blog/navigating-content/index.md b/src/site/content/en/blog/navigating-content/index.md
new file mode 100644
index 00000000000..9e3564b5a2e
--- /dev/null
+++ b/src/site/content/en/blog/navigating-content/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: Semantics and navigating content
+subhead: The role of semantics in page navigation
+description: The role of semantics in page navigation
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2019-06-08
+#tags:
+
+---
+
+You've learned about affordances, semantics, and how assistive technologies use
+the accessibility tree to create an alternative user experience for their users.
+You can see that writing expressive, semantic HTML gives you a lot of
+accessibility with very little effort, as many standard elements have both the
+semantics and supporting behavior built in.
+
+In this lesson we'll cover some less obvious semantics that are very important
+to screen reader users, especially as regards navigation. In a simple page with
+lots of controls but not much content, it's easy to scan the page to find what
+you need. But on a content-heavy page, such as a Wikipedia entry or a news
+aggregator, it's not practical to read through everything from the top down; you
+need a way to efficiently navigate through the content.
+
+Developers often have the misconception that screen readers are tedious and slow
+to use, or that everything on the screen has to be focusable for the screen
+reader to find it. That's often not the case.
+
+Screen reader users often rely on a list of headings to locate information. Most
+screen readers have easy ways to isolate and scan a list of page headings, an
+important feature called the *rotor*. Let's see how we can use HTML headings
+effectively to support this feature.
+
+## Using headings effectively
+
+First, let's reiterate an earlier point: [*DOM order
+matters*](/dom-order-matters/), not only for
+focus order but for screen reader order. As you experiment with screen readers
+like VoiceOver, NVDA, JAWS, and ChromeVox, you'll find the heading list follows
+the DOM order rather than the visual order.
+
+This is true for screen readers in general. Because screen readers interact with
+the accessibility tree, and the accessibility tree is based on the DOM tree, the
+order a screen reader perceives is thus directly based on the DOM order. This
+means that an appropriate heading structure is more important than ever.
+
+In most well-structured pages, the heading levels are nested to indicate
+parent-child relationships among content blocks. The [WebAIM
+checklist](https://webaim.org/standards/wcag/checklist) repeatedly refers to this
+technique.
+
+ - [1.3.1](https://webaim.org/standards/wcag/checklist#sc1.3.1){: .external }
+   mentions "Semantic markup is used to designate headings"
+ - [2.4.1](https://webaim.org/standards/wcag/checklist#sc2.4.1){: .external }
+   mentions heading structure as a technique for bypassing blocks of
+   content
+ - [2.4.6](https://webaim.org/standards/wcag/checklist#sc2.4.6){: .external }
+   discusses some details for writing useful headings
+ - [2.4.10](https://webaim.org/standards/wcag/checklist#sc2.4.10){: .external }
+   states "individual sections of content are designated using headings,
+   where appropriate"
+
+Not all headings have to be visible on-screen.
+[Wikipedia](https://www.wikipedia.org/), for instance, uses a technique that
+deliberately places some headings off-screen to specifically make them
+accessible *only* to screen readers and other assistive technology.
+
+```html
+<style>
+    .sr-only {
+    position:absolute;
+    left:-10000px;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+    }
+</style>
+
+<h2 class="sr-only">This heading is offscreen.</h2>
+```
+
+{% Aside %}
+The WebAIM site discusses this technique at length in [this
+article on offscreen content](https://webaim.org/techniques/css/invisiblecontent/).
+{% endAside %}
+
+
+For complex applications, this can be a good way to accommodate headings when
+the visual design doesn't require or have room for a visible heading.
+
+Caution: It's important not to go overboard with this technique. Remember that
+assistive technology users may also be able to see the screen for themselves, so
+going too far down the path of creating "screen reader only" content may
+actually degrade the user experience for some users. It can also create a
+maintenance headache for you later.
+
+## Other navigation options
+
+Although pages with good headings help screen reader users navigate, there are
+other elements they can use to move around a page, including *links*, *form
+controls*, and *landmarks*.
+
+Readers can use the screen reader's rotor feature (an easy way to isolate and
+scan a list of page headings) to access a *list of links* on the page.
+Sometimes, as on a wiki, there are many links, so the reader might search for a
+term within the links. This limits the hits to links that actually contain the
+term, rather than every occurrence of the term on the page.
+
+This feature is useful only if the screen reader can find the links and the link
+text is meaningful. For example, here are some common patterns that make links
+hard to find.
+
+ - Anchor tags without `href` attributes. Often used in single-page
+   applications, these link targets cause problems for screen readers. You can
+   read more in [this article on single-page apps](http://neugierig.org/software/blog/2014/02/single-page-app-links.html).
+ - Buttons that are implemented with links. These cause the screen reader to
+   interpret the content as a link, and the button functionality is lost. For
+   these cases, replace the anchor tag with a real button and style it
+   appropriately.
+ - Images used as link content. Sometimes necessary, linked images can be
+   unusable to screen readers. To guarantee that the link is properly exposed to
+   assistive technology, make sure the image has `alt` attribute text.
+
+Poor link text is another problem. Clickable text such as "learn more" or "click
+here" provides no semantic information about where the link goes. Instead, use
+descriptive text like "learn more about responsive design" or "see this canvas
+tutorial" to help screen readers provide meaningful context about links.
+
+The rotor can also retrieve a *form control list*. Using this list, readers can
+search for specific items and go directly to them.
+
+A common error that screen readers make is pronunciation. For example, a screen
+reader might pronounce "Udacity" as "oo-dacity", or read a phone number as a
+large integer, or read capitalized text as though it were an acronym.
+Interestingly, screen reader users are quite used to this quirk and take it into
+consideration.
+
+Some developers try to ameliorate this situation by providing screen-reader-only
+text that is spelled phonetically. Here's a simple rule for phonetic spelling:
+**don't do it**; it only makes the problem worse! If, for example, a user is using
+a braille display, the word will be spelled incorrectly, leading to more
+confusion. Screen readers allow words to be spelled aloud, so leave it to the
+reader to control their experience and decide when this is necessary.
+
+Readers can use the rotor to see a *landmarks list*. This list helps readers
+find the main content and a set of navigational landmarks provided by HTML
+landmark elements.
+
+HTML5 introduced some new elements that help define the semantic structure of
+the page, including `header`, `footer`, `nav`, `article`, `section`, `main`, and
+`aside`. These elements specifically provide structural clues in the page
+without forcing any built-in styling (which you should do with CSS anyway).
+
+Semantic structural elements replace multiple, repetitive `div` blocks, and
+provide a clearer, more descriptive way to intuitively express page structure
+for both authors and readers.
diff --git a/src/site/content/en/blog/navigation-preload/index.md b/src/site/content/en/blog/navigation-preload/index.md
new file mode 100644
index 00000000000..6d87da28d54
--- /dev/null
+++ b/src/site/content/en/blog/navigation-preload/index.md
@@ -0,0 +1,275 @@
+---
+title: "Speed up service worker with navigation preloads"
+subhead: |
+  Navigation preload lets you overcome service worker startup time by making requests in parallel.
+authors:
+  - jakearchibald
+date: 2017-02-15
+updated: 2022-07-04
+description: |
+  Navigation preload lets you overcome service worker startup time by making requests in parallel.
+tags:
+  - blog
+  - performance
+  - progressive-web-apps
+---
+
+{% Aside 'celebration' %}
+Service Worker Navigation Preload is [now supported by all major browser engines](https://caniuse.com/mdn-api_navigationpreloadmanager).
+{% endAside %}
+
+{% BrowserCompat 'api.NavigationPreloadManager' %}
+
+## Summary
+
+* In some situations, [service worker boot-up time can delay a network response](#the-problem).
+* Available in the three major browser engines, [navigation preload](#the-solution) fixes this by allowing you to make the request in parallel with service worker boot-up.
+* You can distinguish preload requests from regular navigations using a header, and [serve different content](#header).
+
+## The problem
+
+When you navigate to a site that uses a service worker to handle fetch events, the browser asks the service worker for a response. This involves booting up the service worker (if it isn't already running), and dispatching the fetch event.
+
+The bootup time depends on the device and conditions. It's usually around 50ms. On mobile it's more like 250ms. In extreme cases (slow devices, CPU in distress) it can be over 500ms. However, since the service worker stays awake for a browser-determined time between events, you only get this delay occasionally, such as when the user navigates to your site from a fresh tab, or another site.
+
+The boot-up time isn't a problem if you're responding from the cache, as the benefit of skipping the network is greater than the boot-up delay. But if you're responding using the network…
+
+
+<style>
+  .group {
+    height: 38px;
+    display: flex;
+  }
+
+  .group div {
+    display: flex;
+    align-items: center;
+    font: normal 1.2rem/1 sans-serif;
+    text-shadow: 0 1.6px 2.7px rgba(0,0,0,0.5);
+    color: #fff;
+    box-sizing: border-box;
+    padding: 0 8px;
+    white-space: pre;
+  }
+
+  .sw-startup {
+    margin-right: 1px;
+    width: 100px;
+    background: #f0c457;
+  }
+
+  .network-request {
+    flex: 1;
+    background: #6ea1e3;
+  }
+</style>
+<div class="group">
+  <div class="sw-startup">SW boot</div>
+  <div class="network-request">Navigation request</div>
+</div>
+
+The network request is delayed by the service worker booting-up.
+
+We're continuing to reduce the boot-up time by [using code-caching in V8](http://v8project.blogspot.com/2015/07/code-caching.html), by [skipping service workers that don't have a fetch event](https://bugs.chromium.org/p/chromium/issues/detail?id=605844), by [launching service workers speculatively](https://codereview.chromium.org/2045153003), and other optimizations. However, bootup time will always be greater than zero.
+
+Facebook brought the impact of this problem to our attention, and asked for a way to perform navigation requests in parallel:
+
+<style>
+  .group2 {
+    height: 38px;
+    display: flex;
+  }
+
+  .group2 div {
+    display: flex;
+    align-items: center;
+    font: normal 1.2rem/1 sans-serif;
+    text-shadow: 0 1.6px 2.7px rgba(0,0,0,0.5);
+    color: #fff;
+    box-sizing: border-box;
+    padding: 0 8px;
+    white-space: pre;
+  }
+
+  .sw-startup2 {
+    margin-right: 1px;
+    width: 100px;
+    background: #f0c457;
+  }
+
+  .network-request2 {
+    flex: 1;
+    transform: translate(-101px, 1px) translate(0, 100%);
+    background: #6ea1e3;
+  }
+</style>
+<div class="group2">
+  <div class="sw-startup2">SW boot</div>
+  <div class="network-request2">Navigation request</div>
+</div>
+<br><br>
+And we said "yeah, seems fair".
+
+## "Navigation preload" to the rescue {: #the-solution }
+
+Navigation preload is a feature that lets you say, "Hey, when the user makes a GET navigation request, start the network request while the service worker is booting up".
+
+The startup delay is still there, but it doesn't block the network request, so the user gets content sooner.
+
+Here's a video of it in action, where the service worker is given a deliberate 500ms startup delay using a while-loop:
+
+{% YouTube id="icv_DpQLryE" %}
+
+[Here's the demo itself](https://jakearchibald.github.io/isserviceworkerready/demos/nav-preload/). To get the benefits of navigation preload, [you'll need a browser that supports it](https://caniuse.com/mdn-api_navigationpreloadmanager).
+
+## Activating navigation preload
+
+```js
+addEventListener('activate', event => {
+  event.waitUntil(async function() {
+    // Feature-detect
+    if (self.registration.navigationPreload) {
+      // Enable navigation preloads!
+      await self.registration.navigationPreload.enable();
+    }
+  }());
+});
+```
+
+You can call `navigationPreload.enable()` whenever you want, or disable it with `navigationPreload.disable()`. However, since your `fetch` event needs to make use of it, it's best to enable/disable it in your service worker's `activate` event.
+
+## Using the preloaded response
+
+Now the browser will be performing preloads for navigations, but you still need to *use* the response:
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(async function() {
+    // Respond from the cache if we can
+    const cachedResponse = await caches.match(event.request);
+    if (cachedResponse) return cachedResponse;
+
+    // Else, use the preloaded response, if it's there
+    const response = await event.preloadResponse;
+    if (response) return response;
+
+    // Else try the network.
+    return fetch(event.request);
+  }());
+});
+```
+
+`event.preloadResponse` is a promise that resolves with a response, if:
+
+* Navigation preload is enabled.
+* The request is a `GET` request.
+* The request is a navigation request (which browsers generate when they're loading pages, including iframes).
+
+Otherwise `event.preloadResponse` is still there, but it resolves with `undefined`.
+
+{% Aside 'warning' %}
+Don't enable navigation preload then forget to use it. If you use `fetch(event.request)` instead of `event.preloadResponse`, you'll end up with double requests for navigations.
+{% endAside %}
+
+## Custom responses for preloads {: #header }
+
+If your page needs data from the network, the quickest way is to request it in the service worker and create a single streamed response containing parts from the cache and parts from the network.
+
+Say we wanted to display an article:
+
+```js
+addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+  const includeURL = new URL(url);
+  includeURL.pathname += 'include';
+
+  if (isArticleURL(url)) {
+    event.respondWith(async function() {
+      // We're going to build a single request from multiple parts.
+      const parts = [
+        // The top of the page.
+        caches.match('/article-top.include'),
+        // The primary content
+        fetch(includeURL)
+          // A fallback if the network fails.
+          .catch(() => caches.match('/article-offline.include')),
+        // The bottom of the page
+        caches.match('/article-bottom.include')
+      ];
+
+      // Merge them all together.
+      const {done, response} = await mergeResponses(parts);
+
+      // Wait until the stream is complete.
+      event.waitUntil(done);
+
+      // Return the merged response.
+      return response;
+    }());
+  }
+});
+```
+
+In the above, [`mergeResponses` is a little function](https://gist.github.com/jakearchibald/d0b7e65496a8ec362f10739c3e28da6e) that merges the streams of each request. This means we can display the cached header while the network content streams in.
+
+This is quicker than the "app shell" model as the network request is made along with the page request, and the content can stream without [major hacks](https://jakearchibald.com/2016/fun-hacks-faster-content/#using-iframes-and-documentwrite-to-improve-performance).
+
+However, the request for `includeURL` will be delayed by the service worker's startup time. We can use navigation preload to fix this too, but in this case we don't want to preload the full page, we want to preload an include.
+
+To support this, a header is sent with every preload request:
+
+```http
+Service-Worker-Navigation-Preload: true
+```
+
+The server can use this to send different content for navigation preload requests than it would for a regular navigation request. Just remember to add a `Vary: Service-Worker-Navigation-Preload` header, so caches know that your responses differ.
+
+Now we can use the preload request:
+
+```js
+// Try to use the preload
+const networkContent = Promise.resolve(event.preloadResponse)
+  // Else do a normal fetch
+  .then(r => r || fetch(includeURL))
+  // A fallback if the network fails.
+  .catch(() => caches.match('/article-offline.include'));
+
+const parts = [
+  caches.match('/article-top.include'),
+  networkContent,
+  caches.match('/article-bottom')
+];
+```
+
+{% Aside %}
+`Promise.resolve(event.preloadResponse)` means we get a promise for undefined if `event.preloadResponse` is undefined. It's a good way to normalize behavior with browsers that don't support `event.preloadResponse`.
+{% endAside %}
+
+## Changing the header
+
+By default, the value of the `Service-Worker-Navigation-Preload` header is `true`, but you can set it to whatever you want:
+
+```js
+navigator.serviceWorker.ready.then(registration => {
+  return registration.navigationPreload.setHeaderValue(newValue);
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+You could, for example, set it to the ID of the last post you have cached locally, so the server only returns newer data.
+
+## Getting the state
+
+You can look up the state of navigation preload using `getState`:
+
+```js
+navigator.serviceWorker.ready.then(registration => {
+  return registration.navigationPreload.getState();
+}).then(state => {
+  console.log(state.enabled); // boolean
+  console.log(state.headerValue); // string
+});
+```
+
+Many thanks to Matt Falkenhagen and Tsuyoshi Horo for their work on this feature, and help with this article. And a huge thanks to everyone involved in [the standardization effort](https://github.com/w3c/ServiceWorker/issues/920)
diff --git a/src/site/content/en/blog/ndtv/index.md b/src/site/content/en/blog/ndtv/index.md
new file mode 100644
index 00000000000..dc37c2f708c
--- /dev/null
+++ b/src/site/content/en/blog/ndtv/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals
+subhead: >
+  NDTV enhanced user experience and thus retention by optimizing for Web Vitals.
+date: 2020-10-27
+updated: 2020-10-28
+hero: image/admin/55a7gPUzz2ORKgMIfodA.png
+thumbnail: image/admin/56g0OKl7nSua44OGsd7l.png
+alt: An illustration of icons related to website performance and the text 'scale on web' and 'NDTV'.
+description: >
+  Using tools like PageSpeed Insights , web.dev/measure, and WebPageTest,
+  the NDTV team analyzed potential improvement areas and invested in Core Web Vitals
+  to achieve business success.
+tags:
+  - blog
+  - case-study
+  - performance
+  - web-vitals
+  - scale-on-web
+---
+
+[NDTV](https://ndtv.com) is one of India's leading news stations and websites. By following the [Web
+Vitals](/vitals/) program, they improved one of their most important user metrics,
+[Largest Contentful Paint](/lcp/) (LCP), by 55% in just a month. This was correlated
+with a 50% reduction in bounce rates.
+
+{% Aside %}
+  NDTV made other product changes while they optimized for Web Vitals
+  so it is not possible to conclusively say that optimizing for Web Vitals was
+  the only cause of the bounce rate reduction.
+{% endAside %}
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">55<sub>%</sub></p>
+    <p>Improvement in LCP</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">50<sub>%</sub></p>
+    <p>Reduction in bounce rates</p>
+  </div>
+</div>
+
+## Highlighting the opportunity
+
+With close to 200M unique users every month, it was critical for NDTV to optimize for quality of
+user experience. Although their engagement rates were well over industry average and the highest
+amongst their peers, the NDTV team still saw room for improvement and decided to invest in Web
+Vitals along with other product changes to further improve their engagement rates.
+
+## The approach they used
+
+With the help of tools like [PageSpeed
+Insights](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights/),
+[web.dev/measure](/measure), and [WebPageTest](https://www.webpagetest.org/) the NDTV
+team analyzed potential improvement areas on the site. These clearly defined optimization ideas
+helped them re-prioritize high-impact tasks and achieve immediate results in the improvement of Core
+Web Vitals. Optimizations included:
+
+<div class="switcher">
+  <ul>
+    <li>
+      <b>Prioritizing the largest content block</b> by
+      <a href="/efficiently-load-third-party-javascript/#use-async-or-defer">delaying third-party requests</a>,
+      including ad calls for below-the-fold ad slots, and social network embeds, which are also
+      below-the-fold.
+    </li>
+    <li>
+      <b>Increasing the <a href="/uses-long-cache-ttl/">caching</a></b> of static content from a
+      few minutes to 30 days.
+    </li>
+    <li>
+      <b>Using <a href="/avoid-invisible-text/"><code>font-display</code></a></b>
+      to display text sooner while fonts are downloaded.
+    </li>
+    <li>
+      <b>Using vector graphics for icons</b> instead of TrueType Fonts (TTF).
+    </li>
+    <li>
+      <b>Lazy loading
+      <a href="/efficiently-load-third-party-javascript/#lazy-load-third-party-resources">JavaScript</a>
+      and <a href="https://css-tricks.com/native-lazy-loading/">CSS</a></b>: loading the page with the minimum
+      possible JS and CSS and then lazy loading the remaining JS and CSS on page scroll.
+    </li>
+    <li>
+      <b><a href="/uses-rel-preconnect/">Preconnecting</a></b> to origins delivering critical assets.
+    </li>
+  </ul>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/h8k2D4AqsGbeDtpjsfNe.png", alt="A summary of the optimizations: Largest Contentful Paint, Caching, CSS, vector graphics, lazily loaded JS and CSS, preconnecting.", width="800", height="920" %}
+  </figure>
+</div>
+
+## Impact
+
+Web Vitals equipped the team with metric-driven signals to expedite the
+process of improving user experience.
+
+<div class="switcher">
+  <p>
+    Before beginning the optimization project, the NDTV team benchmarked their LCP
+    score at 3.0 seconds (for the 75th percentile of their users, based on
+    <a href="/chrome-ux-report/">Chrome User Experience Report</a> field data).
+    After the optimization project, it was down to 1.6 seconds.
+    They also reduced their <a href="/cls">Cumulative Layout Shift</a> (CLS) score to
+    0.05. Other metrics on WebPageTest like
+    "<a href="/ttfb/">First Byte Time</a>" and "Effective use of
+    <a href="/content-delivery-networks/">CDN</a>" improved to an A grade.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WSQ9ATmLBzHmNtTWBIf8.png", alt="0.05 CLS score.", width="800", height="370" %}
+  </figure>
+</div>
+
+{% Aside %}
+  When optimizing your site, remember that it's important to not think of your
+  metric scores as single values, but rather a distribution of field data values
+  from real users. You'll want to make sure that the distribution overall is improving.
+  See [Web Performance: Leveraging The Metrics That Most Affect UX](https://youtu.be/6Ljq-Jn-EgU?t=120)
+  for more information.
+{% endAside %}
+
+## Return on investment
+
+Despite the complexity and depth of [ndtv.com](https://ndtv.com), the site was
+already achieving decent FID and CLS scores, thanks to the team's longstanding
+focus on performance and UX best practices. To further improve their user
+experience, the team focused on LCP and managed to meet the threshold within a
+few weeks of kicking off their optimization work.
+
+## Overall business results
+
+<div class="switcher">
+  <ul>
+    <li>55% improvement in LCP as a result of optimizing for Core Web Vitals.</li>
+    <li>
+      50% reduction in bounce rate on the website after optimizing for Core Web Vitals, along with
+      other product changes.
+    </li>
+    <li>
+      Increased engagement and consumption of content directly, and proportionally increased
+      revenue for their website.
+    </li>
+  </ul>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lN46T0iOTj45lSOkE8mo.png", alt="55% improvement in LCP. 50% reduction in bounce rate. Increased engagement and consumption.", width="800", height="825" %}
+  </figure>
+</div>
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    NDTV has long followed best practices to deliver a top-quality user experience. We consider
+    measuring Web Vitals to be an integral part of our product development now, and the engagement
+    uplift we've seen makes it a good ROI.
+  </p>
+  <cite>Kawaljit Singh Bedi, Chief Technology and Product Officer, NDTV Group</cite>
+</blockquote>
+
+Check out the [Scale on web case studies](/scale-on-web) page for more success
+stories from India and Southeast Asia.
diff --git a/src/site/content/en/blog/net-a-porter/index.md b/src/site/content/en/blog/net-a-porter/index.md
new file mode 100644
index 00000000000..b5679b55a59
--- /dev/null
+++ b/src/site/content/en/blog/net-a-porter/index.md
@@ -0,0 +1,126 @@
+---
+layout: post
+title: Net-A-Porter
+date: 2016-04-15
+updated: 2016-04-15
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HoshsCcUEWn1hcatIaQO.gif", alt="Net-a-porter detail", width="700", height="1257" %}
+</figure>
+
+### Summary
+
+[Net-A-Porter](https://www.net-a-porter.com/) saves development time with
+Google's Polymer Library
+
+NET-A-PORTER implemented a component-based design on their online properties
+using Google's Polymer library. The result was a large saving in development
+time, standarized code across their sites and an improved SEO performance
+through use of structured data.
+
+### Results
+
+- Saved development time.
+- Standardized code on NET-A-PORTER’s online properties.
+- Improved SEO performance through use of structured data.
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/lX4wDKNtqiLMzRnKneCj.pdf)
+
+## About NET-A-PORTER
+
+Launched in June 2000, NET-A-PORTER is a global leader in online
+luxury fashion, featuring collections from over 350 of the world’s most
+sought-after designers.
+
+Behind the company’s online storefront, the company’s engineering
+team works hard to deliver and maintain net-a-porter.com and its
+network of websites and apps, which includes two fashion magazines
+and a social network.
+
+When thinking about their web properties, the NET-A-PORTER engineers
+see each page on a site not as a page, but as a collection of components.
+
+A product page, for example, might include a pricing component that indicates
+savings during a sale, a carousel component with links to related products,
+an interactive component showcasing complete outfits that feature products,
+a dropdown component for adding a product to a wishlist, and more.
+
+## A component-based approach
+
+In early 2016, the NET-A-PORTER engineering team decided to evaluate how
+the company could take components and apply them to the way they write
+code for their web properties. Because of the many pages and sub-properties
+that fall under NET-A-PORTER - and the different teams that manage those
+pages - the engineers knew it didn’t make sense to start from scratch with
+a new technology that would require getting rid of their existing stack. An
+ideal solution would let them layer on new components and add to pages as
+additional components were created. Components would need to be able to
+communicate with different backend services independently, and would also
+need to surface structured data about the product to web crawlers.
+
+## Tests and success with Polymer
+
+After evaluating a number of solutions, NET-A-PORTER chose to test Google’s
+Polymer library. An initial experiment with Polymer was completed so quickly
+and successfully that the NET-A-PORTER engineers decided to move forward
+and introduce Polymer into the organization’s overall website development
+planning almost immediately.
+
+Robin Glen and Matthew Green, engineers on the team, shared:
+
+> Polymer was easy to integrate into our system and get up and running in no
+> time at all. The fact that we have such a large website with so many
+> different aspects means it’s easy for us to have inconsistencies. Polymer
+> allows us to create complete and complex web applications that are scalable
+> and maintainable.
+
+Code standardization was easy as well, because Polymer is based on
+web components browser standards. Glen continues:
+
+> Building using web standards keeps our code close to the platform. This
+> makes it easier to learn how to use and build new components, ensuring
+> performance will continually get better as browsers improve, and letting us
+> plan for the long-term. Because it’s based on the W3C standard, we are
+> confident in building on the platform. Soon even the need for polyfills will
+> broadly go away.
+
+And there were SEO benefits, too. Glen says that the:
+
+> Components effectively surface detailed structured data about products to
+> search engines. Testing this structured data is now directly part of our
+> team's continuous integration scheme.
+
+By making the up-front investment in designing and building components,
+the NET-A-PORTER team is seeing dramatic long-term efficiency gains:
+new pages and features are simpler and faster to create and launch, and
+it’s easier to integrate stakeholder feedback and design tweaks into the
+engineering process.
+
+## The future of Polymer
+
+The team is thrilled with how Polymer has enabled its web development.
+Glen says,
+
+> As soon as we saw how we could reuse components by
+putting them together in different ways, we got excited. We started to
+wonder if there were further ways in which we could exploit components
+within the business.
+
+
+Glen feels there is much more to explore with Polymer. He says,
+
+> This is just the beginning of our Polymer journey. We are currently improving
+the delivery and maintainability of existing components, while working
+towards expanding the use of Polymer to more NET-A-PORTER pages. We
+are working towards documenting our approach with a publicly available
+NET-A-PORTER component style guide. Polymer has also been very useful
+for internal tooling. We recently built a set of graphing components and
+re-platformed our entire monitoring service to use Polymer.
+
+
+
diff --git a/src/site/content/en/blog/netzwelt/index.md b/src/site/content/en/blog/netzwelt/index.md
new file mode 100644
index 00000000000..398b45343cb
--- /dev/null
+++ b/src/site/content/en/blog/netzwelt/index.md
@@ -0,0 +1,249 @@
+---
+layout: post
+title: How committing to Core Web Vitals increased Netzwelt's advertising revenues by 18%
+subhead: The relaunched website also sees ad viewability of over 75%, bounce rates reduced by 50%, and page views up by 27%.
+authors:
+  - martinschierle
+date: 2021-07-19
+hero: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/esq05YkD123DMpDMscHP.png
+thumbnail: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/XuTyBKOPVQjIt2MFMPoG.png
+alt: Netzwelt logo
+description: >
+  Learn how German news publisher Netzwelt optimized Core Web Vitals to improve user experience and ad revenues.
+tags:
+  - blog
+  - case-study
+  - web-vitals
+  - performance
+---
+
+When Google announced the Core Web Vitals initiative,
+German publisher [Netzwelt](https://www.netzwelt.de/) quickly realized the potential of these new metrics
+towards a great page experience and improved advertising-based monetization.
+They went on a journey to relaunch their website,
+applying common performance best practices while optimizing ad tags and placements in parallel.
+Committing to great UX and fast pages proved to be a path
+for optimizing engagement and ad revenues hand in hand,
+with page views up by 27%, ad viewability over 75%, and advertising revenues improving by 18%.
+
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">27<sub>%</sub></p>
+    <p>Increase in page views</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">18<sub>%</sub></p>
+    <p>Increase in ad revenue</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">75<sub>%</sub></p>
+    <p>Ad viewability</p>
+  </div>
+</div>
+
+## The challenge
+
+Like many other news publishers,
+Netzwelt struggled to find the right balance between optimizing user experience and page speed
+while maintaining high ad revenues.
+The main challenges they encountered were:
+
+* High [Cumulative Layout Shift](/cls) (CLS) due to layout shifts triggered by ads,
+especially from multisize slots and top banners.
+* [Largest Contentful Paint](/lcp) (LCP) coming in late due to ads being the largest paint
+or by taking bandwidth from hero image loading.
+* High [First Input Delay](/fid) (FID) caused by third-party JavaScript needed for advertising,
+header bidding, and other purposes.
+* Side effects on Core Web Vitals from consent dialogs controlled by third-party vendors,
+which also added to layout shifts and might be detected as late largest paints.
+
+## Optimizing a news website for Core Web Vitals
+
+When Netzwelt started working on core web vitals,
+they quickly noticed that optimizing Core Web Vitals doesn't need to affect advertisement negatively
+but can be used as an opportunity to improve ad viewability.
+Therefore, the Netzwelt team optimized Core Web Vitals to lift ad viewability
+above 75% to attract higher-value advertising
+(the global average for display ads
+[is less than 50%](https://www.thinkwithgoogle.com/feature/viewability/state-of-viewability)).
+
+### Optimizing CLS
+
+Advertisements often load late (sometimes consciously through lazy loading),
+and their real size is often not known in advance due to multisize and fluid ad placements.
+
+The problem can be divided into two—ads above and below the fold.
+
+**Ads above the fold** can cause massive layout jumps due to loading late with unknown sizes.
+Blocking the largest space they might need can lead to bad UX,
+while asking advertisers for fixed sizes may reduce ad income.
+Netzwelt solved this problem by making the top ad sticky and removing some of the bigger allowed banner sizes.
+The overlaid ad avoids triggering layout jumps for ads of different sizes.
+Although the reduced eligible sizes do impact ad sales, the better viewability offsets this easily.
+
+Historical data and A/B tests helped Netzwelt find the right size
+and positioning for different devices and screen sizes,
+and CSS media rules used to reserve space.
+
+**Ads below the fold** offer room for significant improvement:
+
+* A banner that is not seen but loaded creates poor ad viewability and worsens the page experience.
+* A banner that is loaded at the time a user scrolls over it can introduce additional content jumps.
+
+To maintain a good page experience and high ad viewability,
+Netzwelt implemented lazy loading and reserved space for the size of the lowest common denominator.
+In a multisize zone the banners requested in the sizes 300x250 to 300x600, reserved 250px in height.
+This eliminated layout shifts for the smaller sizes; and reduced them massively for larger banners.
+This approach is not optimal, but it is a start and a good compromise.
+
+To optimize further,
+Netzwelt used
+[Intersection Observer](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) and the
+[Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+to control ad placements and reduce layout shifts.
+Different ad positions and lazy loading strategies are used depending on
+scroll position and network connection quality,
+and ads may be changed from multiple to fixed sizes.
+The aim of the algorithm is always to maximize ad viewability while minimizing layout shifts.
+Browsers not supporting the NetworkInfo API use a proxy value based on a
+combination of device and IP derived network type.
+This
+[adaptive loading](https://addyosmani.com/blog/adaptive-loading/)
+strategy especially reduces CLS for users with slow internet connections.
+
+### Optimizing FID
+
+First Input Delay might appear to be a problem for news publishers,
+as advertisement often comes with many additional JavaScript libraries.
+And there does seem to be a negative impact when looking at lab data like Lighthouse.
+However, looking at field data in the
+[2020 Web Almanac](https://almanac.httparchive.org/en/2020/performance#fid-by-device),
+many websites have sufficiently fast response.
+Part of this is due to advertising JavaScript loading late (after first input),
+caching well (for example getting the treatment of
+[v8 code caching](https://v8.dev/blog/code-caching-for-devs)),
+or being optimized well by the ad vendors.
+Vendor viewability trackers make sure to avoid
+long tasks—so even when the sum of the runtime is long
+[Total Blocking Time](/tbt/) (TBT) and FID are not affected.
+While FID was not a huge problem for Netzwelt, there were still some optimizations to make:
+
+* Reducing ad scripts and providers, concentrating on a single stack if possible.
+* Loading all scripts with defer or async.
+* Using webpack or similar technologies for treeshaking and unbundling.
+* Using simple BEM-like CSS rules.
+* Avoiding long-running tasks, and using the
+[idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/) pattern.
+* Working with
+[RequestAnimationFrame](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution#use_requestanimationframe_for_visual_changes)
+wherever layout is affected.
+
+### Optimizing LCP
+
+The Largest Contentful Paint can be influenced by advertisements in
+two ways—explicitly by recognizing an ad as the largest paint,
+and indirectly by congesting network bandwidth or affecting critical path so that the actual largest paint
+(for example a hero image) can't load in fast enough.
+
+Netzwelt had already removed medium rectangle ads from the top ad slots while optimizing for CLS.
+This had the additional benefit of ads not becoming the largest element.
+
+Netzwelt follows a strict policy to prioritize content above ads.
+Netzwelt prioritized the hero images and fonts used above the fold
+and optimized the critical path to take precedence over advertising scripts and adverts.
+This prioritization helped LCP to be unaffected by the ads.
+
+Besides these optimizations, Netzwelt followed other best practices:
+
+* Separated CSS for critical rendering path and put it in the header.
+* Preloaded the most important fonts, scripts, and images.
+* Avoided lazy loading images above the fold.
+* Used `font-display="swap"`.
+
+## GDPR Consent and Core Web Vitals
+
+Consent dialogs often negatively impact Core Web Vitals.
+As with advertisements, there are two ways in which a consent dialog can influence CWV:
+
+* Explicitly if it is detected as the largest paint, or causes layout shifts.
+* Implicitly, by stealing bandwidth from the actual largest paint,
+blocking the critical path to the largest paint,
+or delaying ads until consent is in, which can, in turn, trigger layout shifts.
+
+Netzwelt works with a third-party consent provider,
+which also implemented optimizations.
+First Netzwelt made sure to avoid the straightforward pitfalls:
+
+* Consent scripts are loaded async, so as not to block critical resources.
+* Consent is formatted so that large elements are not eligible as the largest element within LCP.
+* Consent overlay uses `position: fixed` to avoid shifts.
+* While ads are shown only after consent is given,
+adequate whitespace is preserved beforehand to avoid layout shifts when ads load in.
+* Making sure the display and positioning of the consent dialog does not trigger layout shifts.
+One problem found and fixed here was the scroll-lock option of the service provider,
+which disabled scrolling while consent shows by moving the main content of the article on scroll,
+causing layout shifts.
+
+After this work, there were still large discrepancies between field and lab CLS.
+While lab CLS was close to zero, field values were significantly above thresholds.
+After investigation, the culprit was layout shifts within the consent iframe,
+which currently are only correctly captured in field data.
+Netzwelt continues to work with the third-party consent provider to improve this issue.
+
+### News Subscription Models and Core Web Vitals
+
+News publishers are moving to subscription models to fund journalism.
+This model is relevant for Core Web Vitals as people will not subscribe to websites with poor user experience.
+In addition, subscribers do not expect to see ads in the paid content,
+but hiding ads may cause layout shifts.
+The website needs to check if users are entitled to view the content and whether to display ads.
+These checks may cause additional latencies, leading to content shifts or a poor user experience.
+
+Netzwelt is using a model where content is always free,
+but subscribers will not see ads.
+They investigated different ways to query and store entitlements to reduce latencies and layout shifts.
+
+An initial query of entitlement always caused latencies,
+and therefore if querying the entitlements takes too long, the site will display the last cached state.
+For new subscribers, this means a small risk of a paying user seeing ads once.
+Users just ending a subscription might see one load without ads before the locally stored entitlements update.
+Once entitlements are known, they are stored locally using the LocalStorage API,
+to avoid additional latencies and layout shifts during future navigation.
+
+## Optimization Results
+
+The results of Netzwelt's optimizations speak for themselves.
+Their PageSpeed Insights score is unrivaled within news publishers worldwide:
+
+<figure>
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/ErZNqWVYCAkOmEu1r7pd.png",
+alt="Screenshot of PageSpeed Insights for the Netzwelt.de site, showing a score of 100.",
+width="800", height="622" %}
+</figure>
+
+The optimizations improved the page experience
+but were made with the business in mind and enhanced ad experience,
+ad viewability, and revenue.
+After relaunching the optimized page,
+Netzwelt saw CPM increases of 20-30%,
+with an ad viewability above 75%.
+However, Netzwelt assumes the overall revenue uplift to be even higher.
+Traffic increased since the relaunch, probably driven by higher user engagement
+and lower bounce rates due to improved UX.
+These effects are hard to quantify and set in causal relation to the relaunch,
+as traffic naturally fluctuates, and there are also effects from the global pandemic.
+These indirect effects are one of the reasons why Netzwelt always looks at all numbers when reviewing their site,
+not just CPM, which may be misleading. Core Web Vitals and UX metrics,
+in combination with all ad-related metrics, provide the real picture.
+
+## Looking into the future
+
+Netzwelt believes that in a future without third-party cookies, contextual targeting via the content,
+combined with good UX and page experience (including ad viewability), is the key to success as a news publisher.
+
+Therefore Netzwelt doesn't stop with Core Web Vitals
+but goes the extra mile by implementing many modern web capabilities such as Progressive Web Apps (PWA),
+offline content, dark mode, the Web Share API, and Trusted Web Activities (TWA) using the new
+[Digital Goods API](https://developer.chrome.com/docs/android/trusted-web-activity/receive-payments-play-billing/).
diff --git a/src/site/content/en/blog/new-patterns-for-amazing-apps/index.md b/src/site/content/en/blog/new-patterns-for-amazing-apps/index.md
new file mode 100644
index 00000000000..ba155e63469
--- /dev/null
+++ b/src/site/content/en/blog/new-patterns-for-amazing-apps/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: New patterns for amazing apps
+subhead:
+  Dive into a fantastic collection of new patterns for amazing apps, including clipboard patterns,
+  file patterns, and advanced app patterns.
+authors:
+  - thomassteiner
+description:
+  This blog post announces a new collection of patterns for amazing apps, including clipboard
+  patterns, file patterns, and advanced app patterns.
+date: 2022-10-10
+updated: 2022-10-11
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/QdKJmzxJE8e63gdXWzeo.jpg
+alt: Computer keyboard with rainbow keyboard backlighting.
+tags:
+  - blog
+  - progressive-web-apps
+  - capabilities
+---
+
+No matter what you build—be it a next generation video editing app, an addictive word game, or a
+future online social networking app—you will always find yourself in need of a few basic building
+blocks:
+
+- The video editing app will probably allow the user to _save_ the edited video.
+- Your game will maybe allow the user to _share_ game progress with friends.
+- An online social networking app will highly likely allow the user to _paste_ images into a post.
+
+## No universal way to realize these patterns
+
+These were just a couple of examples of such patterns, and there are many more. But all of these
+have one thing in common: there is no universal way to realize them.
+
+### Sharing progress
+
+For example, not all browsers implement the [Web Share API](/web-share/), so in some cases you will
+have to fall back to a different approach, like
+[Twitter's Web Intents](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent),
+or copying to the clipboard, which is the
+[approach](https://twitter.com/powerlanguish/status/1471493886031773707) chosen in
+[Wordle](https://www.nytimes.com/games/wordle/index.html) when the Web Share API isn't implemented.
+Phew, barely got this one:
+
+```text
+Wordle 471 6/6
+
+⬛⬛⬛⬛🟨
+🟩⬛⬛⬛🟨
+🟩🟩🟩⬛⬛
+🟩🟩🟩⬛⬛
+🟩🟩🟩🟩⬛
+🟩🟩🟩🟩🟩
+```
+
+### Saving files
+
+When it comes to saving, the go-to approach is to use the
+[File System Access API](/file-system-access/), so you end up with a `FileSystemFileHandle`, which
+allows you to implement a true [save, edit, save flow](/excalidraw-and-fugu/#saving-files). The next
+best thing is to fall back to a classic `<a download>`, which likewise lets the user save data, but
+has the downside of creating new files on each download, so they end up with `my-video.mp4`,
+`my-video (1).mp4`, `my-video (2).mp4`, etc.
+
+### Pasting images
+
+To conclude the introductory examples, not all browsers support pasting images into a web app, so
+you can fall back to using the Drag and Drop API or showing a file picker, which is not as elegant as
+the [Async Clipboard API](/async-clipboard), but at least it works.
+
+## The new patterns
+
+With this out of the way, the new pattern sections are:
+
+### Clipboard patterns
+
+[Clipboard patterns](/patterns/clipboard/) for everything concerned with the system clipboard like
+copying and pasting of all sorts of things.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/eWdb4ici0H9p8tueeUUG.svg", alt="", width="200", height="200" %}
+
+### Files patterns
+
+[Files patterns](/patterns/files/) for everything concerned with files and directories; be it
+saving, opening, dragging and dropping, receiving or sharing.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/Smch2ZFw5PxkiQZPkl3v.svg", alt="", width="200", height="200" %}
+
+### Web apps patterns
+
+[Web apps patterns](/patterns/web-apps/) for everything concerned with advanced app
+features like providing app shortcuts, periodically syncing data in the background, showing app
+badges, and many more.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yyuu9Wob0ix4z2jgBY1S.svg", alt="", width="200", height="200" %}
+
+## Feedback
+
+I hope these patterns will help you build amazing apps, and I'm looking forward to your feedback!
+You can provide feedback by tweeting at [@ChromiumDev](https://twitter.com/ChromiumDev) or
+[filing an Issue](https://github.com/GoogleChrome/web.dev/issues/new/choose). In both cases, tag
+`@tomayac` to make sure I see it.
+
+## Acknowledgements
+
+I'm grateful to [Joe Medley](https://github.com/jpmedley) for his help with reviewing and editing
+the patterns. Thanks to [Pete LePage](https://github.com/petele),
+[Ewa Gasperowicz](https://twitter.com/devnook), [Rachel Andrew](https://twitter.com/rachelandrew),
+[Ken Pascal](https://www.linkedin.com/in/kenpascal/),
+and [Matthias Rohmer](https://twitter.com/matthiasrohmer)
+for all their technical and organizational support and
+encouragements to land this. The entire patterns project would not have been possible without the
+help of the authors of the individual patterns, namely
+[Harry Theodoulou](https://www.harrytheo.com/), [Tony Conway](/authors/conwayt/),
+[Palances Liao](authors/pliao/), [Cecilia Cong](/authors/chuijun/),
+[François Beaufort](https://github.com/beaufortfrancois), and
+[Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/new-patterns-for-media-apps/index.md b/src/site/content/en/blog/new-patterns-for-media-apps/index.md
new file mode 100644
index 00000000000..716387366e7
--- /dev/null
+++ b/src/site/content/en/blog/new-patterns-for-media-apps/index.md
@@ -0,0 +1,30 @@
+---
+layout: post
+title: New patterns for media apps
+subhead:
+  Dive into a fantastic collection of new patterns for media apps. Grab the user's screen, add video Picture-in-Picture mode, create audio effects, record from the mic, or customize media notifications.
+authors:
+  - beaufortfrancois
+  - conwayt
+description:
+  This blog post announces a new collection of patterns for media apps.
+date: 2022-11-03
+hero: image/vvhSqZboQoZZN9wBvoXq72wzGAf1/qeOFBnNK1TvZIJoo6MVI.jpeg
+alt: Person holding mobile phone playing audio.
+tags:
+  - blog
+  - capabilities
+  - media
+---
+
+Let's welcome our new collection of [media patterns](/patterns/media) to help you create modern media experiences on the web for great audio and video playback:
+
+1. [Use the Web Audio API to add effects to audio sources](/patterns/media/audio-effects/).
+2. [Let the user control media playback on the lock screen, in a widget, or with hardware keys](/patterns/media/media-session/).
+3. [Record audio from the user's microphone](/patterns/media/microphone-record/).
+4. [Create a custom Picture-in-Picture button for your video player](/patterns/media/picture-in-picture/).
+5. [Record the user's screen](/patterns/media/screen-record/).
+
+We hope these patterns will help you build amazing apps, and we're looking forward to your feedback! You can provide feedback by tweeting at [@ChromiumDev](https://twitter.com/ChromiumDev) or [filing an Issue](https://github.com/GoogleChrome/web.dev/issues/new/choose).
+
+_Photo by [Kenny Eliason](https://unsplash.com/photos/plrlb68XPqI)._
diff --git a/src/site/content/en/blog/new-patterns-july-2022/index.md b/src/site/content/en/blog/new-patterns-july-2022/index.md
new file mode 100644
index 00000000000..010b9199e13
--- /dev/null
+++ b/src/site/content/en/blog/new-patterns-july-2022/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: New patterns
+subhead: Animations, theming, components, and more layout patterns are live and ready to help kick start or inspire your UI and UX.
+authors:
+  - adamargyle
+description: Animations, theming, components, and more layout patterns are live and ready to help kick start or inspire your UI and UX.
+date: 2022-07-29
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/mBXnYVdru7dzNVaQlh5M.png
+alt: Colorful circle and block pattern by George Francis in this Codepen https://codepen.io/georgedoescode/pen/OJjoymK
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qopbUHltS7bY1k9z3JWZ.png
+tags:
+  - blog
+  - css
+  - html
+  - javascript
+  - layout
+  - animations
+  - svg
+  - ux
+  - intl
+---
+
+I'm excited to share many new [web.dev patterns](/patterns/)! These additions
+are from the show [GUI Challenges](/shows/gui-challenges/) where I share
+my strategies on how to build various components and common interface needs,
+then collect user submissions for the same tasks and help us all grow our
+perspectives on how to solve them.
+
+Turns out GUI Challenges fit nicely into patterns:
+
+{% CodePattern 'animation/interactive-words' %}
+
+Now they can be embedded into posts (like above), aggregated for easy browsing
+and inspiration, and also have added new categories for other contributors to
+add their patterns to. Take a look around, take some code: it's all there for
+you.
+
+## Overview
+
+Three new pattern categories:
+
+1. [Components](#components)
+1. [Animations](#animations)
+1. [Theming](#theming)
+
+Plus, five new patterns added to the existing
+[Layout](#new-layout-patterns-on-centering) patterns.
+
+### Components
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J2QtGMJ3e1cJkHFrQ2K3.svg",
+alt="Supporting graphic which has colorful prototyped components in a grid
+layout.", width="360", height="240" %}
+
+View [the component patterns landing page](/patterns/components/) or check each
+out individually:
+
+1. [Breadcrumbs](/patterns/components/breadcrumbs/)
+1. [Buttons](/patterns/components/buttons/)
+1. [Carousel](/patterns/components/carousel/)
+1. [Dialog](/patterns/components/dialog/)
+1. [Game Menu](/patterns/components/game-menu/)
+1. [Loading Bar](/patterns/components/loading-bar/)
+1. [Media Scroller](/patterns/components/media-scroller/)
+1. [Multi-Select](/patterns/components/multi-select/)
+1. [Settings](/patterns/components/settings/)
+1. [Sidenav](/patterns/components/sidenav/)
+1. [Split Buttons](/patterns/components/split-buttons/)
+1. [Stories](/patterns/components/stories/)
+1. [SVG Favicon](/patterns/components/svg-favicon/)
+1. [Switch](/patterns/components/switch/)
+1. [Tabs](/patterns/components/tabs/)
+1. [Toast](/patterns/components/toast/)
+
+Here's a preview of the split button pattern:
+
+{% CodePattern 'components/split-buttons' %}
+
+### Animations
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KL7dFk9XKx5PVUzXT2hb.svg",
+alt="Supporting graphic which has a ball in motion down a curve.", width="360",
+height="240" %}
+
+View [the animation patterns landing page](/patterns/animation/) or check each
+out individually:
+
+1. [Animated Letters](/patterns/animation/animated-letters/)
+1. [Animated Words](/patterns/animation/animated-words/)
+1. [Interactive Letters](/patterns/animation/interactive-letters/)
+1. [Interactive Words](/patterns/animation/interactive-words/)
+
+Here's a preview of the animated letters pattern:
+
+{% CodePattern 'animation/animated-letters' %}
+
+{% Aside %}
+These patterns only split the text and animate if a user's system hasn't
+indicated [reduced
+motion](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion).
+{% endAside %}
+
+### Theming
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/X2nU3op9YZAqzox7FDgN.svg",
+alt="Supporting graphic with two layers of a dashboard, one is pink and the
+other is blue.", width="360", height="240" %}
+
+View [the theming patterns landing page](/patterns/theming/) or check each out
+individually:
+
+1. [Color Schemes](/patterns/theming/color-schemes/)
+1. [Theme Switch](/patterns/theming/theme-switch/)
+
+One pattern is for building a client side [theme
+switch](/building-a-theme-switch-component/) so users can indicate their
+preference without it being directly tied to their system preference. The other
+is for creating a [theming design system](/building-a-color-scheme/) with CSS
+custom properties.
+
+Here's a preview of the color schemes pattern:
+
+{% CodePattern 'theming/color-schemes' %}
+
+### New layout patterns on centering
+
+View [the layout patterns landing page](/patterns/layout/) or check each out
+individually:
+
+1. [Autobot](/patterns/layout/autobot/)
+1. [Content Center](/patterns/layout/content-center/)
+1. [Fluffy Center](/patterns/layout/fluffy-center/)
+1. [Gentle Flex](/patterns/layout/gentle-flex/)
+1. [Pop n' Plop](/patterns/layout/pop-n-plop/)
+
+Each demo features a grab handle to resize the container and a button to add a
+child to the layout. These, as explained in [the article](/centering-in-css/),
+are to help you feel the strengths and weaknesses of various centering
+techniques the web offers. Plus, they have fun names.
+
+Here is the article determined "winner" of the centering exploration, the Gentle
+Flex:
+
+{% CodePattern 'layout/gentle-flex' %}
+
+## Wrap up
+
+I hope these new patterns help teach you new techniques, inspire you, provide
+insights into accessibility and overall keep you hyped on building UI. Stay
+tuned for more [patterns](/patterns/) as the Chrome Team continues adding to
+these collections.
+
+- Post hero images generated from [George Francis' fantastic
+  Codepen](https://codepen.io/georgedoescode/pen/OJjoymK)
diff --git a/src/site/content/en/blog/new-pwa-training/index.md b/src/site/content/en/blog/new-pwa-training/index.md
new file mode 100644
index 00000000000..415f868f115
--- /dev/null
+++ b/src/site/content/en/blog/new-pwa-training/index.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: New Progressive Web App training now available
+subhead: Get started with Progressive Web Apps with our new six-part training, complete with new codelabs.
+authors:
+  - samrichard
+description: A new, six part Progressive Web App training is now available, complete with a new series of codelabs to teach you how to build reliable, installable, and capable PWAs.
+date: 2021-05-20
+updated: 2022-04-22
+tags:
+  - blog
+  - progressive-web-apps
+---
+
+{% Aside %}
+The training described below is designed as material to teach to others in a workshop format. For a self-guided course check out [Learn PWA](/learn/pwa/). This course is based on the below material, but designed for individuals to work through rather than a course to teach others.
+{% endAside %}
+
+A lot has changed in the world of [Progressive Web Apps](/progressive-web-apps/) since we released our last set of PWA training over four years ago: CSS Grid achieved widespread implementation, PWAs came to desktops, and the [capabilities project](https://developer.chrome.com/blog/fugu-status/) has launched more than 25 new device-integration focused APIs, opening up brand new app segments that can be built entirely on the web. Today, we're excited to share the first iteration of our newly updated PWA training to teach you how to build reliable, installable, and capable Progressive Web Apps for all devices.
+
+The current version of the training is divided into six slide decks, ready for you to learn from or for you to pick up and teach to others. They are:
+
+- [Introduction to Progressive Web Apps](https://docs.google.com/presentation/d/1w0BVEmtCQvmJGHK0OjOhr8HeNVGYi0ezGz81fimkDdE/edit?usp=sharing)
+- [Creating a Solid Foundation for your PWA](https://docs.google.com/presentation/d/1tJH05P8OfcDgUjNbW-oxZN9G-OtmDpA-lqNMy1M97Cs/edit?usp=sharing&resourcekey=0-UAAWbPgLxyrTBkqSSOj6GQ)
+- [Improve the Reliability of your Web App](https://docs.google.com/presentation/d/1CwKVRauMW30SrHTgexnJQw2XBOZt_R6K6_NucmTkygY/edit#slide=id.p)
+- [Make your Web App Installable](https://docs.google.com/presentation/d/1TBCK2b_yVov-DwHpRf8vWyEz2KqIu-gg8h-QOyss7HI/edit?resourcekey=0-GTzLs6UHZyQZ-tBG6LlOMQ)
+- [Adding Advanced Capabilities to your Web App](https://docs.google.com/presentation/d/1m7U2iK-63aaTvMQGDwxtLgqWLg8RwH4Ba2AwFuTcxOo/edit)
+- [Adopting Advanced Web App Architectures](https://docs.google.com/presentation/d/13KHsxknXSbADS1kRLYkS46YJr_AsImoW6r6VAjYj3dE/edit?resourcekey=0-MrN8aV43XaOE_FM18Vsn_Q#slide=id.p)
+
+To go along with this new material, there are eight new codelabs that will guide you through turning a web app into a Progressive Web App with deep device integration, using the concepts taught throughout the slide decks. You can jump into any codelab and work on it individually, or you can go through them one after another; the choice is yours. They are:
+
+- [Going Offline](https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0) - Basics of writing a service worker to cache and serve content offline
+- [Working with Workbox](https://developers.google.com/codelabs/pwa-training/pwa03--working-with-workbox) - Using [Workbox](https://developer.chrome.com/docs/workbox/) to write your service worker
+- [IndexedDB](https://developers.google.com/codelabs/pwa-training/pwa03--indexeddb) - Using IndexedDB to store and retrieve data
+- [Tab to Taskbar](https://developers.google.com/codelabs/pwa-training/pwa04--tab-to-taskbar) - Making your web app installable and providing app shortcuts
+- [Prompting and Measuring Install](https://developers.google.com/codelabs/pwa-training/pwa04--prompt-measure-install#5) - Adding in-app install prompts, and where to put success tracking
+- [Empowering your PWA](https://developers.google.com/codelabs/pwa-training/pwa05--empowering-your-pwa#0) - Adding advanced capabilities, including accessing the local file system and registering as a file handler
+- [Service Worker Includes](https://developers.google.com/codelabs/pwa-training/pwa06--service-worker-includes#0) - Dynamically generating a streaming service worker response
+- [Working with Workers](https://developers.google.com/codelabs/pwa-training/pwa06--working-with-workers#0) - Using web workers to offload work from the main thread
+
+Over the next few months, we'll be converting the slide deck content into easier-to-consume and update formats. This will make it easier for us to keep the content up-to-date, so no more waiting four years for another push of content. Keep an eye on this space. The future of web apps is exciting, and we're thrilled to teach you how to build it.
diff --git a/src/site/content/en/blog/new-responsive/index.md b/src/site/content/en/blog/new-responsive/index.md
new file mode 100644
index 00000000000..3e44d410830
--- /dev/null
+++ b/src/site/content/en/blog/new-responsive/index.md
@@ -0,0 +1,447 @@
+---
+layout: post
+title: 'The new responsive: Web design in a component-driven world'
+subhead: 'Controlling macro and micro layout in a new era of responsive web design.'
+authors:
+  - una
+description: User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us to usehr in a new era of responsive web design.
+date: 2021-05-19
+updated: 2021-05-26
+hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/P5LtV5IubshVuDac8uKO.jpg
+tags:
+  - blog
+  - css
+  - layout
+---
+
+{% YouTube 'jUQ2-C5ZNRc' %}
+
+## Responsive Design Today
+
+Today, when using the term: "responsive design", you are most likely thinking
+about using media queries to change layout when resizing a design from mobile
+size, to tablet size, through to desktop size.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/3KENjI9FiNARctTiKDak.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+But soon, this perception of responsive design may be considered as outdated as
+using tables for page layout.
+
+Viewport-based media queries give you some powerful tools, but lack a lot of
+finesse. They lack the ability to respond to user needs, and the ability to
+inject responsive styles into components themselves.
+
+{% Aside %}
+When referring to components for the sake of this article, this
+means elements, including elements that are made up of other elements, like a
+card or sidebar. Those components make up our web pages.
+{% endAside %}
+
+You can use global viewport information to style your components, but they still
+don't own their styles, and that doesn't work when our design systems are
+component-based and not page-based.
+
+The good news is, the ecosystem is changing, and it's changing pretty rapidly.
+CSS is evolving, and a new era of responsive design is right on the horizon.
+
+We see this happen about every 10 years. 10 years ago, around 2010-2012, we saw
+a huge change with mobile and responsive design, and the emergence of CSS3.
+
+
+<figure>
+  {% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/IhVNwOMENjOT2eiIXuMg.png",
+  alt="CSS styles timeline", width="800", height="211" %}
+  <figcaption>
+    Source: <a href="https://www.webdesignmuseum.org/web-design-history">Web Design Museum</a>.
+  </figcaption>
+</figure>
+
+So it works out that, yet again, the ecosystem is ready for some pretty big
+changes to happen to CSS. The engineers at Chrome and across the web platform
+are prototyping, speccing, and starting the implementation for the next era of
+responsive design.
+
+These updates include user-preference based media features, container queries,
+and media queries for new screen types, such as foldable screens.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/3yqBl9BQmGEVzDQU3Ivh.png",
+alt="Responsive to the user, container, and form factor", width="800",
+height="248" %}
+
+## Responsive to the user
+
+New user preference media features, give you the ability to style web
+experiences that align with the user's own specific preferences and needs. This
+means that preference media features allow you to adapt your user experiences to
+your user's experiences.
+
+These user preference media features include:
+
+- `prefers-reduced-motion`
+- `prefers-contrast`
+- `prefers-reduced-transparency`
+- `prefers-color-scheme`
+- `inverted-colors`
+- And more
+
+Preference features pick up on the preferences a user has set in their operating
+system, and help to build a more robust and personalized web experience,
+especially for those with accessibility needs.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/cGWnoAAwMTU7C3HOfYQl.png",
+alt="Turning on accessibility preferences in an operating system", width="800",
+height="428" %}
+
+### `prefers-reduced-motion`
+
+Users who have set operating system preferences for [reduced
+motion](/prefers-reduced-motion/), are requesting fewer
+animations when using their computer in general. Therefore, it's likely that
+they wouldn't appreciate a flashy intro screen, card flip animation, intricate
+loader, or other flashy animations while using the web.
+
+With `prefers-reduced-motion` you can design your pages with reduced-motion in
+mind, and create a motion-enhanced experience for those who don't have this
+preference set.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/r4z52PPvElemSUJwUCZp.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+This card has information on both sides. The baseline reduced-motion experience
+is a crossfade to show that information, while the motion-enhanced experience is
+a card flip.
+
+Prefers-reduced-motion shouldn't mean "no motion", since motion is so critical
+to conveying information online. Instead, provide a solid baseline experience
+that guides your users without unnecessary movement, and progressively enhance
+that experience for your users without those accessibility needs or preferences.
+
+### `prefers-color-scheme`
+
+Another preference media feature is
+[`prefers-color-scheme`](/prefers-color-scheme). This feature helps
+you to customize your UI to the theme which your user prefers. In their
+operating system, whether it's on desktop or mobile, users can set a preference
+for light, dark, or auto themes, which change depending on the time of day.
+
+If you set up your page using [CSS custom
+properties](https://developer.mozilla.org/docs/Web/CSS/--*), swapping
+color values is made straightforward. You can quickly update your color theme
+values, such as `backgroundColor` and `textOnPrimary` to dynamically adjust to
+the new theme within the media query.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/j6Ru11BsBzCmINZDXKql.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+To make it easier to test some of these preference queries out, you can use
+[DevTools for emulation](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) instead of opening up your system preferences each time.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ol6pVXJLT44wAkRADAcq.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+
+### Designing for dark theme
+
+When designing for a dark theme, it's not just about inverting background and
+text colors or [dark scrollbars](/color-scheme/). There are a few
+considerations you might not realize. For example,
+you might need to desaturate colors on a dark background to reduce visual
+vibration.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/tWxjbJ6yYUauQoCsySSX.png",
+alt="Dont use vibrant, saturated color with dark themes", width="698",
+height="640" %}
+
+Instead of using shadows to create depth and draw an element forward, you may
+want to use light in the element's background-color to draw it forward. This is
+because shadows won't be as effective on a dark background.
+
+<figure>
+  {% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ZiasjYiaPFmJJOkxJBce.mp4",
+  autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+<figcaption>
+    <a href="https://material.io">Material design</a> provides some great guidance on designing for dark themes.
+  </figcaption>
+</figure>
+
+Dark themes not only provide a more customized user experience, but they can
+also improve battery life significantly in AMOLED screens. Those are the screens
+we're seeing in newer high-end phones, and they're becoming increasingly popular
+across mobile devices.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/ZszEdn43lc4ZmcOaGKy4.webp",
+alt="screenshot from the talk that showed this graphic originally", width="720",
+height="407" %}
+
+A [2018 Android
+study](https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life)
+on dark themes showed a power draw savings of up to 60%, depending on the screen
+brightness and overall user interface. The 60% statistic came from comparing the
+Youtube play screen with a paused video at 100% screen brightness using dark
+theme for the app UI vs a light theme.
+
+You should always provide a dark theme experience for your users whenever
+possible.
+
+## Responsive to the container
+
+One of the most exciting emerging areas in CSS is container queries, also
+frequently called element queries. It's hard to understate what the shift from
+page-based responsive design to container-based responsive design will do to
+evolve the design ecosystem.
+
+Here's an example of the powerful abilities that container queries provide. You
+can manipulate any of the card element's styles, including the link list, font
+sizes, and overall layout based on its parent container:
+
+<figure>
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/fvrxk5kXiif6eFX25BH5.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+<figcaption><a href="https://codepen.io/una/pen/LYbvKpK">See demo on Codepen</a> (behind a flag in Canary).</figcaption>
+</figure>
+
+This example shows two identical components with two different container sizes,
+both taking up space in a layout created using CSS Grid. Each component fits its
+unique space allotment, and styles itself accordingly.
+
+This amount of flexibility is something that is not possible with media queries
+alone.
+
+Container queries provide a much more dynamic approach to responsive design.
+This means that if you put this card component in a sidebar or hero section or
+within a grid inside of the main body of a page, the component itself owns its
+responsive information and sizes according to the container, not the viewport
+
+This requires the `@container` at-rule This works in a similar way to a media
+query with `@media`, but instead, `@container` queries the parent container for
+information rather than the viewport and user agent.
+
+```css
+.card {
+  container-type: inline-size;
+}
+
+@container (max-width: 850px) {
+  .links {
+    display: none;
+  }
+
+  .time {
+    font-size: 1.25rem;
+  }
+
+  /* ... */
+}
+```
+
+First, set containment on the parent element. And then, write a `@container`
+query, to style any of the elements within the container based on its size,
+using `min-width` or `max-width`.
+
+The code above uses `max-width`, and sets the links to `display:none`, as well
+as decreasing the time font size when the container is less than `850px` wide.
+
+### Container query cards
+
+In this demo plant website, each of the product cards, including the one in the
+hero, the sidebar of recently viewed items, and the product grid, are all the
+exact same component, with the same markup.
+
+<figure>
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/D4hBchz6kaPjkgx8BCmU.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+<figcaption><a href="https://codepen.io/una/pen/mdOgyVL">See demo on Codepen</a> (behind a flag in Canary).</figcaption>
+</figure>
+
+There are _no_ media queries used to create this entire layout, just container
+queries. This allows for each product card to shift to the proper layout to fill
+its space. The grid for example, uses a minmax column layout to let the elements
+flow into their space, and re-layout the grid when that space is too compressed
+(which means that it hit the minimum size).
+
+```css
+.product {
+  container-type: inline-size;
+}
+
+@container (min-width: 350px) {
+  .card-container {
+    padding: 0.5rem 0 0;
+    display: flex;
+  }
+
+  .card-container button {
+    /* ... */
+  }
+}
+
+```
+
+When there is at least `350px` of space in the grid, the card layout goes
+horizontal by being set to `display: flex`, which has a default flex-direction
+of "row".
+
+With less space, the product cards stack. Each product card styles itself,
+something that would be impossible with global styles alone.
+
+### Mixing Container Queries with Media Queries
+
+Container queries have so many use cases—one being a calendar component. You
+can use container queries to re-layout the calendar events and other segments
+based on the available width of their parent.
+
+<figure>
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/hjV6i4PEu8wounYhHsHf.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+<figcaption><a href="https://codepen.io/una/pen/RwodQZw">See demo on Codepen</a> (behind a flag in Canary).</figcaption>
+</figure>
+
+This demo container queries to change the layout and style of the calendar's
+date and day of the week, as well as adjusting the margins and font size on the
+scheduled events to help them better fit the space.
+
+Then, use a media query to shift the entire layout for smaller screen sizes.
+This example shows how powerful it is to _combine_ media queries (adjusting the
+global, or macro styles) with container queries (adjusting the container's
+children, and their micro styles).
+
+So now we can think of Macro and Micro layouts within the same UI component to
+allow for some really nice nuanced design decisions.
+
+### Using container queries today
+
+These demos are now available to play with behind a flag in Chrome Canary. Go to
+`about://flags` in Canary and turn on the `#enable-container-queries` flag.
+This will enable support for `@container`, `inline-size` and `block-size` values
+for the `contain` property, and the LayoutNG Grid implementation.
+
+The flag also enables the corresponding Chrome DevTools features.
+Learn how to [inspect and debug container queries in DevTools](https://developer.chrome.com/docs/devtools/css/container-queries/).
+
+### Scoped styles
+
+To build on container queries, the CSS working group is also actively discussing
+[scoped styles](https://css.oddbird.net/scope/) to help with proper namespacing
+and collision-avoidance for components.
+
+<figure>
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/FCHIEO4IouHOQaOJXrQD.png",
+alt="scoped styles diagram", width="759", height="636" %}
+<figcaption>Figure originally designed by <a href="https://css.oddbird.net/">Miriam Suzanne</a>.</figcaption>
+</figure>
+
+Scoped styles allow for pass-through and component-specific styling to avoid
+naming collisions, something that many frameworks and plugins like CSS modules
+already enable us to do within frameworks. This spec would now allow us to write
+encapsulated styles natively for our components with readable CSS without the
+need to adjust the markup.
+
+```css
+/* @scope (<root>#) [to (<boundary>#)]? { … } */
+
+@scope (.tabs) to (.panel) {
+  :scope { /* targeting the scope root */ }
+  .light-theme :scope .tab { /* contextual styles */ }
+}
+```
+
+Scoping would allow us to create "donut shaped" selectors, where we can specify
+where to keep a style encapsulated, and where to break out of that scoped style
+to refer back to a more global style.
+
+An example of this would be a tab panel, where we'd want the tabs to get the
+scoped style, and the panel within the tabs to get a parent style.
+
+## Responsive to the form factor
+
+The next topic in our conversation about the new era of responsive design is a
+shift in form factors, and the growing possibilities of what we'll need to be
+designing for as a web community (such as shape-shifting screen or virtual
+reality).
+
+<figure>
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/OeskptFb2djUWWmX7K9y.svg",
+alt="Spanning diagram", width="800", height="488" %}
+<figcaption>Diagram from <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>.</figcaption>
+</figure>
+
+Foldable or flexible screens, and designing for screen spanning is one example
+of where we can see a form factor shift today. And screen-spanning is yet
+another spec being worked on to cover these new form factors and needs.
+
+An experimental [media
+query](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md)
+for screen-spanning could help us here. It currently behaves like this: `@media
+(spanning: <type of fold>)`. The demo sets up a grid layout with two columns:
+one has a width of --sidebar-width, which is 5rem by default, and the other is
+`1fr`. When the layout is viewed on a dual screen that has a single vertical
+fold, the value of `--sidebar-width` is updated with the environment value of
+the left fold.
+
+```css
+:root {
+  --sidebar-width: 5rem;
+}
+
+@media (spanning: single-fold-vertical) {
+  --sidebar-width: env(fold-left);
+}
+
+main {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+}
+```
+
+This enables a layout where the sidebar, the navigation in this case, fills the
+space of one of the folds, where the app UI fills the other. This prevents a
+"crease" in the UI.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/Uf3RL7EhVZGK2ECiD0sT.mp4",
+autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+You can test out foldable screens in the Chrome DevTools emulator to help debug
+and prototype screen spanning directly in the browser.
+
+## Conclusion
+
+Exploring UI design beyond a flat screen is yet another reason why container
+queries and scoped styles are so important. They give you the opportunity to
+silo component styles from page layout and global styles, and user styles,
+enabling more resilient responsive design. This means you can now design macro
+layouts using page-based media queries, including screen-spanning nuances. At
+the same time using micro layouts with container queries on the components, and
+add user-preference based media queries to customize user experiences based on
+their unique preferences and need.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/uAJDDUDLcAsLzBf0a27b.png", alt="A
+circle of the new responsive", width="800", height="442" %}
+
+_This_ is the new responsive.
+
+It's combining macro layout with micro layout, and on top of all of that, it's
+taking user customization and form factor into account.
+
+Any of these changes alone would constitute a considerable shift in how we
+design for the web. But combined, they signify a really big shift in how we even
+conceptualize responsive design. It's time to think about responsive design
+beyond viewport size, and start considering all of these new axes for better
+component-based and customized experiences.
+
+The next era of responsive design is here, and you can already start to
+explore it yourself.
+
+### web.dev/learnCSS
+
+And for now, if you want to level up your CSS game, and maybe revisit some
+basics, my team is launching a brand new, totally free CSS course and reference
+on web.dev. You can access it via [web.dev/learnCSS](/learn/css).
+
+I hope you enjoyed this overview on the next era of responsive design, and some
+of the primitives that will come along with it, and I also hope you're as
+excited as I am about what this means for the future of web design.
+
+It opens up a huge opportunity to us as a UI community to embrace
+component-based styles, new form factors, and create user-responsive
+experiences.
diff --git a/src/site/content/en/blog/next-gen-css-2019/gap.png b/src/site/content/en/blog/next-gen-css-2019/gap.png
deleted file mode 100644
index b127d443fe9..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/gap.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/hero.png b/src/site/content/en/blog/next-gen-css-2019/hero.png
deleted file mode 100644
index ea323ce51e2..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/houdini.png b/src/site/content/en/blog/next-gen-css-2019/houdini.png
deleted file mode 100644
index 8d261b8839d..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/houdini.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/index.md b/src/site/content/en/blog/next-gen-css-2019/index.md
index eafe454ebd6..2fcc2edaca9 100644
--- a/src/site/content/en/blog/next-gen-css-2019/index.md
+++ b/src/site/content/en/blog/next-gen-css-2019/index.md
@@ -11,10 +11,9 @@ authors:
   - una
 
 date: 2019-12-05
-# Add an updated date to your post if you edit in the future.
-# updated: 2019-11-01
+updated: 2020-09-24
 
-hero: hero.png
+hero: image/admin/FRL8ZuF0ng2d37BufMOj.png
 # You can adjust the fit of your hero image with this property.
 # Values: contain | cover (default)
 hero_fit: contain
@@ -76,10 +75,10 @@ You can also find demos for all the features we discuss on our
 ## Contents
 
 - [Scroll Snap](#scroll-snap)
-- [`:focus-within`](#:focus-within)
+- [`:focus-within`](#focus-within)
 - [Media Queries Level 5](#media-queries-level-5)
 - [Logical properties](#logical-properties)
-- [`position: sticky`](#position:-sticky)
+- [`position: sticky`](#position-sticky)
 - [`backdrop-filter`](#backdrop-filter)
 - [`:is()`](#is)
 - [`gap`](#gap)
@@ -88,7 +87,7 @@ You can also find demos for all the features we discuss on our
 
 ## Scroll Snap
 
-[Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts) lets you define snap points as the user scrolls your content vertically, horizontally, or  both. It offers native scroll inertia and deceleration, and it's touch enabled.
+[Scroll Snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts) lets you define snap points as the user scrolls your content vertically, horizontally, or  both. It offers built-in scroll inertia and deceleration, and it's touch enabled.
 
 This sample code sets up horizontal scrolling in a `<section>` element with snap points aligned to the left sides of child `<picture>` elements:
 
@@ -127,7 +126,7 @@ While scroll snap supports vertical snapping, be cautious when using it at the p
 
 ## `:focus-within`
 
-[`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) addresses a long-standing accessibility issue: there are many cases when focusing a child element should affect the presentation of a parent element so that the UI is accessible to users of assistive technologies.
+[`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within) addresses a long-standing accessibility issue: there are many cases when focusing a child element should affect the presentation of a parent element so that the UI is accessible to users of assistive technologies.
 
 For example, if you have a dropdown menu with several items, the menu should remain visible while any of the items has focus. Otherwise, the menu disappears for keyboard users.
 
@@ -141,7 +140,7 @@ For example, if you have a dropdown menu with several items, the menu should rem
 }
 ```
 
-![An illustration showing the difference in behavior between focus and focus-within.](./menu-focus.png)
+{% Img src="image/admin/NmLEz3wQMUv0QYIuhv2c.png", alt="An illustration showing the difference in behavior between focus and focus-within.", width="800", height="559" %}
 
 Try tabbing through the focusable elements in the demo below. You'll notice that the menus remain visible as you focus on the menu items:
 
@@ -154,17 +153,16 @@ Try tabbing through the focusable elements in the demo below. You'll notice that
 
 [New media queries](https://drafts.csswg.org/mediaqueries-5/#environment-blending) give us powerful ways to adjust the user experience of our apps based on a user's device preferences. Basically, the browser serves as a proxy for system-level preferences that we can respond to in our CSS using the `prefers-*` group of media queries:
 
-![A diagram showing media queries interpreting system-level user preferences.](./prefers-media-queries.png)
+{% Img src="image/admin/f5Y9OhN3VMQz8nZMcZar.png", alt="A diagram showing media queries interpreting system-level user preferences.", width="800", height="400" %}
 
 Here are the new queries we think developers will be most excited about:
 
-*   [prefers-reduced-motion](https://developers.google.com/web/updates/2019/03/prefers-reduced-motion)
-*   [prefers-color-scheme](https://web.dev/prefers-color-scheme/)
-*   [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
-*   [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency)
-*   [forced-colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)
-*   [inverted-colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)
-*   [light-level](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/light-level)
+*   [prefers-reduced-motion](/prefers-reduced-motion/)
+*   [prefers-color-scheme](/prefers-color-scheme/)
+*   [prefers-contrast](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast)
+*   [prefers-reduced-transparency](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-transparency)
+*   [forced-colors](https://developer.mozilla.org/docs/Web/CSS/@media/forced-colors)
+*   [inverted-colors](https://developer.mozilla.org/docs/Web/CSS/@media/inverted-colors)
 
 These queries are a huge win for accessibility. Previously we had no way to know, for example, that a user had set their OS to high-contrast mode. If you wanted to provide a high-contrast mode for a web app that remained true to your brand, you had to ask users to choose it from UI within your app. Now you can detect the high-contrast setting from the OS using `prefers-contrast`.
 
@@ -172,7 +170,7 @@ One exciting implication of these media queries is that we can design for multip
 
 It's important to Adam that "prefers reduced motion" doesn't get implemented as "no motion." The user is saying they prefer less motion, not that they don't want any animation. He asserts reduced motion is not no motion. Here's an example that uses a crossfade animation when the user prefers reduced motion:
 
-<figure class="w-figure">
+<figure>
   <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/reduced-motion.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/reduced-motion.mp4" type="video/mp4; codecs=h264">
@@ -180,14 +178,14 @@ It's important to Adam that "prefers reduced motion" doesn't get implemented as
 </figure>
 
 {% Aside %}
-In Chrome Canary, you can test CSS that uses `prefers-reduced-motion` or `prefers-color-scheme` by choosing the appropriate settings in the DevTools **Rendering** drawer. To access **Rendering**, [open the Command Menu](https://developers.google.com/web/tools/chrome-devtools/command-menu) and run the `Show Rendering` command.
+In Chrome Canary, you can test CSS that uses `prefers-reduced-motion` or `prefers-color-scheme` by choosing the appropriate settings in the DevTools **Rendering** drawer. To access **Rendering**, [open the Command Menu](https://developer.chrome.com/docs/devtools/command-menu/) and run the `Show Rendering` command.
 {% endAside %}
 
 ## Logical properties
 
-[Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) solve a problem that has gained visibility as more developers tackle internationalization. Many layout properties like `margin` and `padding` assume a language that is read top-to-bottom and left-to-right.
+[Logical properties](https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties) solve a problem that has gained visibility as more developers tackle internationalization. Many layout properties like `margin` and `padding` assume a language that is read top-to-bottom and left-to-right.
 
-![A diagram showing traditional CSS layout properties.](./legacy-layout.png)
+{% Img src="image/admin/mLz4eB2iG7yGUJ92DA0D.png", alt="A diagram showing traditional CSS layout properties.", width="800", height="559" %}
 
 When designing pages for multiple languages with varying writing modes, developers have had to adjust all those properties individually across multiple elements, which quickly becomes a maintainability nightmare.
 
@@ -198,7 +196,7 @@ Logical properties let you maintain layout integrity across translations and wri
 
 These dimension names apply to all logical layout properties. So, for example, in English, `block-start` is the same as `top`, and `inline-end` is the same as `right`.
 
-![A diagram showing new CSS logical layout properties.](./logical-layout.png)
+{% Img src="image/admin/NcIz3jADhMnRMqRTUPKr.png", alt="A diagram showing new CSS logical layout properties.", width="800", height="559" %}
 
 With logical properties, you can automatically update your layout for other languages by simply changing the `writing-mode` and `direction` properties for your page rather than updating dozens of layout properties on individual elements.
 
@@ -211,7 +209,7 @@ You can see how logical properties work in the demo below by setting the `writin
 
 ## `position: sticky`
 
-An element with [`position: sticky`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) remains in block flow until it starts to go offscreen,
+An element with [`position: sticky`](https://developer.mozilla.org/docs/Web/CSS/position#Sticky_positioning) remains in block flow until it starts to go offscreen,
 at which point it stops scrolling with the rest of the page
 and sticks to the position specified by the element's `top` value.
 The space allocated for that element remains in the flow,
@@ -223,7 +221,7 @@ Sticky positioning lets you create many useful effects that previously required
 
 In this demo, all sticky elements share the same container. That means that each sticky element slides over the previous one as the user scrolls down. The sticky elements share the same stuck position.
 
-<figure class="w-figure">
+<figure>
   <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-stack.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-stack.mp4" type="video/mp4; codecs=h264">
@@ -234,7 +232,7 @@ In this demo, all sticky elements share the same container. That means that each
 
 Here, the sticky elements are cousins. (That is, their parents are siblings.) When a sticky element hits the lower boundary of its container, it moves up with the container, creating the impression that lower sticky elements are pushing up higher ones. In other words, they appear to compete for the stuck position.
 
-<figure class="w-figure">
+<figure>
   <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-slide.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-slide.mp4" type="video/mp4; codecs=h264">
@@ -245,7 +243,7 @@ Here, the sticky elements are cousins. (That is, their parents are siblings.) Wh
 
 Like Sticky Slide, the sticky elements in this demo are cousins. However, they've been placed in containers set to a two-column grid layout.
 
-<figure class="w-figure">
+<figure>
   <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-desperado.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/sticky-desperado.mp4" type="video/mp4; codecs=h264">
@@ -254,24 +252,24 @@ Like Sticky Slide, the sticky elements in this demo are cousins. However, they'v
 
 ## `backdrop-filter`
 
-The [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) property lets you apply graphical effects to the area _behind_ an element rather than to the element itself. This makes lots of cool effects that were previously only achievable using complicated CSS and JavaScript hacks doable with one line of CSS.
+The [`backdrop-filter`](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter) property lets you apply graphical effects to the area _behind_ an element rather than to the element itself. This makes lots of cool effects that were previously only achievable using complicated CSS and JavaScript hacks doable with one line of CSS.
 
-For example, this demo uses `backdrop-filter` to achieve native OS-style blurring:
+For example, this demo uses `backdrop-filter` to achieve OS-style blurring:
 
 <iframe height="510" style="width: 100%;" scrolling="no" title="mddjjor" src="https://codepen.io/una/embed/mddjjor?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href='https://codepen.io/una/pen/mddjjor'>mddjjor</a> by Una Kravets
   (<a href='https://codepen.io/una'>@una</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
-We already have a [great post about `backdrop-filter`](https://web.dev/backdrop-filter/), so head there for more info.
+We already have a [great post about `backdrop-filter`](/backdrop-filter/), so head there for more info.
 
 ## `:is()`
 
-While the [`:is()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) is actually over ten years old, it still doesn't see as much use as we think it deserves. It takes a comma-separated list of selectors as its argument and matches any selectors in that list. That flexibility makes it incredibly handy and can significantly reduce the amount of CSS you ship.
+While the [`:is()` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:is) is actually over ten years old, it still doesn't see as much use as we think it deserves. It takes a comma-separated list of selectors as its argument and matches any selectors in that list. That flexibility makes it incredibly handy and can significantly reduce the amount of CSS you ship.
 
 Here's a quick example:
 
-<figure class="w-figure">
+<figure>
   <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/is-animation.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/next-gen-css-2019/is-animation.mp4" type="video/mp4; codecs=h264">
@@ -305,9 +303,9 @@ article > :is(h1,h2,h3,h4,h5,h6) {
 
 ## `gap`
 
-[CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) has had [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) (previously `grid-gap`) for some time. By specifying the internal spacing of a containing element rather than the spacing around child elements, `gap` solves many common layout issues. For example, with gap, you don't have to worry about margins on child elements causing unwanted whitespace around the edges of a containing element:
+[CSS grid layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) has had [`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) (previously `grid-gap`) for some time. By specifying the internal spacing of a containing element rather than the spacing around child elements, `gap` solves many common layout issues. For example, with gap, you don't have to worry about margins on child elements causing unwanted whitespace around the edges of a containing element:
 
-![Illustration showing how the gap property avoids unintended spacing around edges of a container element.](./gap.png)
+{% Img src="image/admin/Jzlzz2MdQmMGudZxcvZk.png", alt="Illustration showing how the gap property avoids unintended spacing around edges of a container element.", width="800", height="846" %}
 
 Even better news: `gap` is coming to flexbox, bringing all the same spacing perks that grid has:
 
@@ -326,15 +324,15 @@ Right now, only FireFox supports `gap` in flex layouts, but play around with thi
 
 ## CSS Houdini
 
-[Houdini](https://developer.mozilla.org/en-US/docs/Web/Houdini) is a set of low-level APIs for the browser's rendering engine that lets you tell the browser how to interpret custom CSS. In other words, it gives you access to the [CSS Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model), letting you _extend_ CSS via Javascript. This has several benefits:
+[Houdini](https://developer.mozilla.org/docs/Web/Houdini) is a set of low-level APIs for the browser's rendering engine that lets you tell the browser how to interpret custom CSS. In other words, it gives you access to the [CSS Object Model](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model), letting you _extend_ CSS via JavaScript. This has several benefits:
 
 *   It gives you much more power to create custom CSS features.
 *   It's easier to separate rendering concerns from application logic.
 *   It's more performant than the CSS polyfilling we currently do with JavaScript since the browser will no longer have to parse scripts and do a second rendering cycle; Houdini code is parsed in the first rendering cycle.
 
-![Illustration showing how Houdini works compared to traditional JavaScript polyfills.](houdini.png)
+{% Img src="image/admin/Lh9zGq0HWW4amjfHbpRQ.png", alt="Illustration showing how Houdini works compared to traditional JavaScript polyfills.", width="800", height="599" %}
 
-Houdini is an umbrella name for [several APIs](https://developer.mozilla.org/en-US/docs/Web/Houdini#The_Houdini_APIs). If you want more information about them and their current status, take a look at [Is Houdini Ready Yet?](https://ishoudinireadyyet.com/) In our talk, we covered the Properties and Values API, the Paint API, and the Animation Worklet because they're currently the most supported. We could easily dedicate a full post to each of these exciting APIs, but, for now, check out our talk for an overview and some cool demos that start to give a sense of what you can do with the APIs.
+Houdini is an umbrella name for [several APIs](https://developer.mozilla.org/docs/Web/Houdini#The_Houdini_APIs). If you want more information about them and their current status, take a look at [Is Houdini Ready Yet?](https://ishoudinireadyyet.com/) In our talk, we covered the Properties and Values API, the Paint API, and the Animation Worklet because they're currently the most supported. We could easily dedicate a full post to each of these exciting APIs, but, for now, check out our talk for an overview and some cool demos that start to give a sense of what you can do with the APIs.
 
 ## Overflow
 
diff --git a/src/site/content/en/blog/next-gen-css-2019/legacy-layout.png b/src/site/content/en/blog/next-gen-css-2019/legacy-layout.png
deleted file mode 100644
index 39d7610c635..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/legacy-layout.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/logical-layout.png b/src/site/content/en/blog/next-gen-css-2019/logical-layout.png
deleted file mode 100644
index 082ef853139..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/logical-layout.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/menu-focus.png b/src/site/content/en/blog/next-gen-css-2019/menu-focus.png
deleted file mode 100644
index 7f4e6d7bffe..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/menu-focus.png and /dev/null differ
diff --git a/src/site/content/en/blog/next-gen-css-2019/prefers-media-queries.png b/src/site/content/en/blog/next-gen-css-2019/prefers-media-queries.png
deleted file mode 100644
index 59f624926be..00000000000
Binary files a/src/site/content/en/blog/next-gen-css-2019/prefers-media-queries.png and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/chrome-flag.jpg b/src/site/content/en/blog/nfc/chrome-flag.jpg
deleted file mode 100644
index e81810c1898..00000000000
Binary files a/src/site/content/en/blog/nfc/chrome-flag.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/hero.jpg b/src/site/content/en/blog/nfc/hero.jpg
deleted file mode 100644
index 35cc4722107..00000000000
Binary files a/src/site/content/en/blog/nfc/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/index.md b/src/site/content/en/blog/nfc/index.md
deleted file mode 100644
index d28b90ea0cd..00000000000
--- a/src/site/content/en/blog/nfc/index.md
+++ /dev/null
@@ -1,909 +0,0 @@
----
-title: Interact with NFC devices on Chrome for Android
-subhead: Reading and writing to NFC tags is now possible.
-authors:
-  - beaufortfrancois
-date: 2020-02-12
-updated: 2020-06-04
-hero: hero.jpg
-thumbnail: thumbnail.jpg
-alt: A photo of NFC tags
-description: |
-  Reading and writing to NFC tags is now possible on Chrome for Android.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/236438980436951041
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - capabilities
----
-
-{% Aside %}
-Web apps should be able to do anything native apps can. The [Capabilities
-project](/fugu-status/), of which Web NFC is only a part, aims to do just that.
-To learn about other capabilities and to keep up with their progress, follow
-[Unlocking new capabilities for the web](/fugu-status/).
-{% endAside %}
-
-## What is Web NFC? {: #what }
-
-NFC stands for Near Field Communications, a short-range wireless technology
-operating at 13.56 MHz that enables communication between devices at a distance
-less than 10 cm and a transmission rate of up to 424 kbit/s.
-
-Web NFC provides sites the ability to read and write to NFC tags when they are
-in close proximity to the user's device (usually 5-10 cm, 2-4 inches).
-The current scope is limited to NFC Data Exchange Format (NDEF), a lightweight
-binary message format that works across different tag formats.
-
-<figure class="w-figure">
-  <img src="./nfc-operation-diagram.png" alt="Phone powering up an NFC tag to exchange data">
-  <figcaption class="w-figcaption">Diagram of an NFC operation</figcaption>
-</figure>
-
-## Suggested use cases {: #use-cases }
-
-Web NFC is limited to NDEF because the security properties of reading and
-writing NDEF data are more easily quantifiable. Low-level I/O operations (e.g.
-ISO-DEP, NFC-A/B, NFC-F), Peer-to-Peer communication mode and Host-based Card
-Emulation (HCE) are not supported.
-
-Examples of sites that may use Web NFC include:
-- Museums and art galleries can display additional information about a display
-  when the user touches their device to an NFC card near the exhibit.
-- Inventory management sites can read or write data to the NFC tag on a
-  container to update information on its contents.
-- Conference sites can use it to scan NFC badges during the event.
-- Sites can use it for sharing initial secrets needed for device or service
-  provisioning scenarios and also to deploy configuration data in operational
-  mode.
-
-<figure class="w-figure">
-  <img src="./nfc-inventory-management.png" alt="Phone scanning several NFC tags">
-  <figcaption class="w-figcaption">NFC inventory management illustrated</figcaption>
-</figure>
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [Complete][spec]             |
-| **3. Gather feedback and iterate design**  | [**In Progress**](#feedback) |
-| **4. Origin trial**                        | [**In Progress**][ot]        |
-| 5. Launch                                  | Not Started                  |
-
-</div>
-
-## Using Web NFC {: #use }
-
-### Enabling support during the origin trial phase
-
-Web NFC will be available on Android as an origin trial in Chrome 81. The origin
-trial is expected to end in Chrome 84.
-
-{% include 'content/origin-trials.njk' %}
-
-### Register for the origin trial {: #register-for-ot }
-
-{% include 'content/origin-trial-register.njk' %}
-
-### Enabling via chrome://flags
-
-To experiment with Web NFC locally on Android, without an origin trial token,
-enable the `#experimental-web-platform-features` flag in `chrome://flags`.
-
-<figure class="w-figure">
-  <img src="./chrome-flag.jpg" alt="Screenshot of the chrome://flags internal page to enable for Web NFC on Android">
-  <figcaption class="w-figcaption">Experimental flag for Web NFC on Android</figcaption>
-</figure>
-
-### Feature detection {: #feature-detection }
-
-Feature detection for hardware is different from what you're probably used to.
-The presence of `NDEFReader` and `NDEFWriter` tells you that the browser
-supports Web NFC, but not whether the required hardware is present. In
-particular, if the hardware is missing, the promised returned by certain calls
-will reject. I'll provide details when I describe `NDEFReader` and `NDEFWriter`.
-
-```js
-if ('NDEFReader' in window) { /* Scan NFC tags */ }
-if ('NDEFWriter' in window) { /* Write NFC tags */ }
-```
-
-### Terminology {: #terminology }
-
-An NFC tag is a passive NFC device, meaning that is powered by magnetic
-induction when an active NFC device (.e.g a phone) is in proximity. NFC tags
-come in many forms and fashions, as stickers, credit cards, arm wrists, etc.
-
-<figure class="w-figure">
-  <img src="./nfc-tag.jpg" alt="Photo of a transparent NFC tag">
-  <figcaption class="w-figcaption">A transparent NFC tag</figcaption>
-</figure>
-
-The `NDEFReader` and `NDEFWriter` objects are the two entry points in Web NFC
-that expose functionality for preparing reading and/or writing actions that are
-fulfilled when an NDEF tag comes in proximity. The `NDEF` in `NDEFReader` and
-`NDEFWriter` stands for NFC Data Exchange Format, a lightweight binary message
-format standardized by the [NFC Forum].
-
-The `NDEFReader` object is for acting on incoming NDEF messages from NFC tags
-while the `NDEFWriter` object is for writing NDEF messages to NFC tags within
-range.
-
-An NFC tag that supports NDEF is like a post-it note. Anyone can read it, and
-unless it is read-only, anyone can write to it. It contains a single NDEF
-message which encapsulates one or more NDEF records. Each NDEF record is a
-binary structure that contains a data payload, and associated type information.
-Web NFC supports the following NFC Forum standardized record types: empty, text,
-URL, smart poster, MIME type, absolute URL, external type, unknown, and local
-type.
-
-<figure class="w-figure">
-  <img src="./ndef-message-diagram.png" alt="Diagram of an NDEF message">
-  <figcaption class="w-figcaption">Diagram of an NDEF message</figcaption>
-</figure>
-
-### Scan NFC tags {: #scan }
-
-To scan NFC tags, first instantiate a new `NDEFReader` object. Calling `scan()`
-returns a promise. The [user may be prompted] if access was not previously
-granted. The promise will resolve if the following conditions are all met:
-
-- User has allowed the website to interact with NFC devices when they tap their
-  phone.
-- The user's phone supports NFC.
-- The user has enabled NFC on their phone.
-
-Once the promise is resolved, incoming NDEF messages are available by
-subscribing to "reading" events via an event listener. You should also subscribe
-to "error" events to be notified when incompatible NFC tags are in proximity
-range.
-
-```js
-const reader = new NDEFReader();
-reader.scan().then(() => {
-  console.log("Scan started successfully.");
-  reader.onerror = () => {
-    console.log("Cannot read data from the NFC tag. Try another one?");
-  };
-  reader.onreading = event => {
-    console.log("NDEF message read.");
-  };
-}).catch(error => {
-  console.log(`Error! Scan failed to start: ${error}.`);
-});
-```
-
-When an NFC tag is in proximity, a `NDEFReadingEvent` event is fired. It
-contains two properties unique to it:
-
-- `serialNumber` represents the serial number of the device (.e.g
-  00-11-22-33-44-55-66), or an empty string if none is available.
-- `message` represents the NDEF message stored in the NFC tag.
-
-To read the content of the NDEF message, loop through `message.records` and
-process their `data` members [appropriately] based on their `recordType`.
-The `data` member is exposed as a <code>[DataView]</code> as it allows handling
-cases where data is encoded in UTF-16.
-
-```js
-reader.onreading = event => {
-  const message = event.message;
-  for (const record of message.records) {
-    console.log("Record type:  " + record.recordType);
-    console.log("MIME type:    " + record.mediaType);
-    console.log("Record id:    " + record.id);
-    switch (record.recordType) {
-      case "text":
-        // TODO: Read text record with record data, lang, and encoding.
-        break;
-      case "url":
-        // TODO: Read URL record with record data.
-        break;
-      default:
-        // TODO: Handle other records with record data.
-    }
-  }
-};
-```
-
-
-
-{% Aside %}
-The [cookbook](#cookbook) contains many examples of how to read NDEF records based on
-their types.
-{% endAside %}
-
-You can also filter NDEF messages by passing options to `scan()`.
-
-- `id` matches the record identifier of each NDEFRecord.
-- `recordType` matches the type of each NDEFRecord.
-- `mediaType` pattern matches the `mediaType` property of each NDEFRecord.
-
-```js
-// Accept only NDEF messages with JSON content
-const reader = new NDEFReader();
-await reader.scan({
-  mediaType: "application/*json"  // pattern matching any JSON-based MIME type
-});
-```
-
-```js
-// Accept only NDEF messages with binary content and a custom record identifier
-const reader = new NDEFReader();
-await reader.scan({
-  id: "my-restaurant-daily-menu",
-  mediaType: "application/octet-stream"
-});
-```
-
-```js
-// Accept only NDEF messages with custom external type
-const reader = new NDEFReader();
-await reader.scan({
-  recordType: "example.com:shoppingItem"
-});
-```
-
-### Write NFC tags {: #write }
-
-To write NFC tags, first instantiate a new `NDEFWriter` object. Calling
-`write()` returns a promise. The [user may be prompted] if access was not
-previously granted. At this point, an NDEF message is "prepared" and promise
-will resolve if the following conditions are all met:
-
-- User has allowed the website to interact with NFC devices when they tap their
-  phone.
-- The user's phone supports NFC.
-- The user has enabled NFC on their phone.
-- User has tapped an NFC tag and an NDEF message has been successfully written.
-
-To write text to an NFC tag, pass a string to the `write()` method.
-
-```js
-const writer = new NDEFWriter();
-writer.write(
-  "Hello World"
-).then(() => {
-  console.log("Message written.");
-}).catch(error => {
-  console.log(`Write failed :-( try again: ${error}.`);
-});
-```
-
-To write a URL record to an NFC tag, pass a dictionary that represents an NDEF
-message to `write()`. In the example below, the NDEF message is a dictionary
-with a `records` key. Its value is an array of records - in this case, a URL
-record defined as an object with a `recordType` key set to `"url"` and a `data`
-key set to the URL string.
-
-```js
-const writer = new NDEFWriter();
-writer.write({
-  records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }]
-}).then(() => {
-  console.log("Message written.");
-}).catch(error => {
-  console.log(`Write failed :-( try again: ${error}.`);
-});
-```
-
-It is also possible to write multiple records to an NFC tag.
-
-```js
-const writer = new NDEFWriter();
-writer.write({ records: [
-    { recordType: "url", data: "https://w3c.github.io/web-nfc/" },
-    { recordType: "url", data: "https://web.dev/nfc/" }
-]}).then(() => {
-  console.log("Message written.");
-}).catch(error => {
-  console.log(`Write failed :-( try again: ${error}.`);
-});
-```
-
-{% Aside %}
-The [cookbook](#cookbook) contains many examples of how to write other types of
-NDEF records.
-{% endAside %}
-
-If an NFC tag should be read while performing an NFC write operation, set the
-`ignoreRead` property to `false` in the options passed to the `write()` method.
-
-```js
-const reader = new NDEFReader();
-reader.scan().then(() => {
-
-  reader.onreading = event => {
-    // TODO: Handle incoming NDEF messages.
-  };
-
-  const writer = new NDEFWriter();
-  return writer.write("Writing data is fun!", { ignoreRead: false });
-
-}).catch(error => {
-  console.log(`Write failed :-( try again: ${error}.`);
-});
-```
-
-If the NFC tag contains an NDEF message that is not meant to be overwritten, set
-the `overwrite` property to `false` in the options passed to the `write()`
-method. In that case, the returned promise will reject if an NDEF message is
-already stored in the NFC tag.
-
-```js
-const writer = new NDEFWriter();
-writer.write("Writing data on an empty NFC tag is fun!", { overwrite: false })
-.then(() => {
-  console.log("Message written.");
-}).catch(_ => {
-  console.log(`Write failed :-( try again: ${error}.`);
-});
-```
-
-### Security and permissions {: #security-and-permissions }
-
-The Chrome team has designed and implemented Web NFC using the core principles
-defined in [Controlling Access to Powerful Web Platform
-Features][powerful-apis], including user control, transparency, and ergonomics.
-
-Because NFC expands the domain of information potentially available to malicious
-websites, the availability of NFC is restricted to maximize users' awareness and
-control over NFC use.
-
-<figure class="w-figure">
-  <img src="./nfc-prompt.png" alt="Screenshot of a Web NFC prompt on a website">
-  <figcaption class="w-figcaption">Web NFC user prompt</figcaption>
-</figure>
-
-Web NFC is only available to top-level frames and secure browsing contexts (HTTPS
-only). Origins must first request the `"nfc"` [permission] while handling a
-user gesture (e.g a button click). The NDEFReader `scan()` and NDEFWriter
-`write()` methods trigger a user prompt, if access was not previously granted.
-
-```js
-  document.querySelector("#scanButton").onclick = async () => {
-    const reader = new NDEFReader();
-    // Prompt user to allow website to interact with NFC devices.
-    await reader.scan();
-    reader.onreading = event => {
-      // TODO: Handle incoming NDEF messages.
-    };
-  };
-```
-
-The combination of a user-initiated permission prompt and real-world, physical
-movement of bringing the device over a target NFC tag mirrors the chooser
-pattern found in the other file and device-access APIs.
-
-To perform a scan or write, the web page must be visible when the user touches
-an NFC tag with their device. The browser uses haptic feedback to indicate a
-tap. Access to the NFC radio is blocked if the display is off or the device is
-locked. For non visible web pages, receiving and pushing NFC content are
-suspended, and resumed when a web page becomes visible again.
-
-Thanks to the [Page Visibility API], it is possible to track when document
-visibility changes.
-
-```js
-document.onvisibilitychange = event => {
-  if (document.hidden) {
-    // All NFC operations are automatically suspended when document is hidden.
-  } else {
-    // All NFC operations are resumed, if needed.
-  }
-};
-```
-
-## Cookbook {: #cookbook }
-
-Here's some code samples to get you started.
-
-### Check for permission
-
-The [Permissions API] allows checking whether the `"nfc"` permission was
-granted. This example shows how to scan NFC tags without user interaction if
-access was previously granted, or show a button otherwise. Note that the same
-mechanism works for writing NFC tags as it uses the same permission under the
-hood.
-
-```js
-const reader = new NDEFReader();
-
-async function startScanning() {
-  await reader.scan();
-  reader.onreading = event => {
-    /* handle NDEF messages */
-  };
-}
-
-const nfcPermissionStatus = await navigator.permissions.query({ name: "nfc" });
-if (permissionStatus.state === "granted") {
-  // NFC access was previously granted, so we can start NFC scanning now.
-  startScanning();
-} else {
-  // Show a "scan" button.
-  document.querySelector("#scanButton").style.display = "block";
-  document.querySelector("#scanButton").onclick = event => {
-    // Prompt user to allow UA to send and receive info when they tap NFC devices.
-    startScanning();
-  };
-}
-```
-
-### Abort NFC operations
-
-Using the <code>[AbortController]</code> primitive makes it easy to abort NFC operations. The
-example below shows you how to pass the `signal` of an AbortController through
-the options of NDEFReader `scan()` and NDEFWriter `write()` methods and abort
-both NFC operations at the same time.
-
-```js
-const abortController = new AbortController();
-abortController.signal.onabort = event => {
-  // All NFC operations have been aborted.
-};
-
-const reader = new NDEFReader();
-await reader.scan({ signal: abortController.signal });
-
-const writer = new NDEFWriter();
-await writer.write("Hello world", { signal: abortController.signal });
-
-document.querySelector("#abortButton").onclick = event => {
-  abortController.abort();
-};
-```
-
-### Read and write a text record
-
-The text record `data` can be decoded with a `TextDecoder` instantiated with the
-record `encoding` property. Note that the language of the text record is
-available through its `lang` property.
-
-```js
-function readTextRecord(record) {
-  console.assert(record.recordType === "text");
-  const textDecoder = new TextDecoder(record.encoding);
-  console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
-}
-```
-
-To write a simple text record, pass a string to the NDEFWriter `write()` method.
-
-```js
-const writer = new NDEFWriter();
-await writer.write("Hello World");
-```
-
-Text records are UTF-8 by default and assume the current document's language but
-both properties (`encoding` and `lang`) can be specified using the full syntax
-for creating a custom NDEF record.
-
-```js
-function a2utf16(string) {
-  let result = new Uint16Array(string.length);
-  for (let i = 0; i < string.length; i++) {
-    result[i] = string.codePointAt(i);
-  }
-  return result;
-}
-
-const textRecord = {
-  recordType: "text",
-  lang: "fr",
-  encoding: "utf-16",
-  data: a2utf16("Bonjour, François !")
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [textRecord] });
-```
-
-### Read and write a URL record
-
-Use `TextDecoder` to decode the record's `data`.
-
-```js
-function readUrlRecord(record) {
-  console.assert(record.recordType === "url");
-  const textDecoder = new TextDecoder();
-  console.log(`URL: ${textDecoder.decode(record.data)}`);
-}
-```
-
-To write a URL record, pass an NDEF message dictionary to the NDEFWriter
-`write()` method. The URL record contained in the NDEF message is defined as an
-object with a `recordType` key set to `"url"` and a `data` key set to the URL
-string.
-
-```js
-const urlRecord = {
-  recordType: "url",
-  data:"https://w3c.github.io/web-nfc/"
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [urlRecord] });
-```
-
-### Read and write a MIME type record
-
-The `mediaType` property of a MIME type record represents the MIME type of the
-NDEF record payload so that `data` can be properly decoded. For instance, use
-`JSON.parse` to decode JSON text and an Image element to decode image data.
-
-```js
-function readMimeRecord(record) {
-  console.assert(record.recordType === "mime");
-  if (record.mediaType === "application/json") {
-    const textDecoder = new TextDecoder();
-    console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);
-  }
-  else if (record.mediaType.startsWith('image/')) {
-    const blob = new Blob([record.data], { type: record.mediaType });
-    const img = new Image();
-    img.src = URL.createObjectURL(blob);
-    document.body.appendChild(img);
-  }
-  else {
-    // TODO: Handle other MIME types.
-  }
-}
-```
-
-To write a MIME type record, pass an NDEF message dictionary to the NDEFWriter
-`write()` method. The MIME type record contained in the NDEF message is defined
-as an object with a `recordType` key set to `"mime"`, a `mediaType` key set to
-the actual MIME type of the content, and a `data` key set to an object that can
-be either an `ArrayBuffer` or provides a view on to an `ArrayBuffer` (e.g.
-`Uint8Array`, `DataView`).
-
-```js
-const encoder = new TextEncoder();
-const data = {
-  firstname: "François",
-  lastname: "Beaufort"
-};
-const jsonRecord = {
-  recordType: "mime",
-  mediaType: "application/json",
-  data: encoder.encode(JSON.stringify(data))
-};
-
-const imageRecord = {
-  recordType: "mime",
-  mediaType: "image/png",
-  data: await (await fetch("icon1.png")).arrayBuffer()
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [jsonRecord, imageRecord] });
-```
-
-### Read and write an absolute-URL record
-
-The absolute-URL record `data` can be decoded with a simple `TextDecoder`.
-
-```js
-function readAbsoluteUrlRecord(record) {
-  console.assert(record.recordType === "absolute-url");
-  const textDecoder = new TextDecoder();
-  console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
-}
-```
-
-To write an absolute URL record, pass an NDEF message dictionary to the
-NDEFWriter `write()` method. The absolute-URL record contained in the NDEF
-message is defined as an object with a `recordType` key set to `"absolute-url"`
-and a `data` key set to the URL string.
-
-```js
-const absoluteUrlRecord = {
-  recordType: "absolute-url",
-  data:"https://w3c.github.io/web-nfc/"
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [absoluteUrlRecord] });
-```
-
-### Read and write a smart poster record
-
-A smart poster record (used in magazine advertisements, fliers, billboards,
-etc.), describes some web content as an NDEF record that contains an NDEF
-message as its payload. Call `record.toRecords()` to transform `data` to a list
-of records contained in the smart poster record. It should have a URL record, a
-text record for the title, a MIME type record for the image, and some [custom
-local type records] such as `":t"`, `":act"`, and `":s"` respectively for the
-type, action, and size of the smart poster record.
-
-{% Aside 'caution' %}
-Smart poster records will be supported in a later version of Chrome.
-{% endAside %}
-
-Local type records are unique only within the local context of the containing
-NDEF record. Use them when the meaning of the types doesn't matter outside
-of the local context of the containing record and when storage usage is a hard
-constraint. Local type record names always start with `:` in Web NFC (e.g.
-`":t"`, `":s"`, `":act"`). This is to differentiate a text record from a local
-type text record for instance.
-
-```js
-function readSmartPosterRecord(smartPosterRecord) {
-  console.assert(record.recordType === "smart-poster");
-  let action, text, url;
-
-  for (const record of smartPosterRecord.toRecords()) {
-    if (record.recordType == "text") {
-      const decoder = new TextDecoder(record.encoding);
-      text = decoder.decode(record.data);
-    } else if (record.recordType == "url") {
-      const decoder = new TextDecoder();
-      url = decoder.decode(record.data);
-    } else if (record.recordType == ":act") {
-      action = record.data.getUint8(0);
-    } else {
-      // TODO: Handle other type of records such as `:t`, `:s`.
-    }
-  }
-
-  switch (action) {
-    case 0:
-      // Do the action
-      break;
-    case 1:
-      // Save for later
-      break;
-    case 2:
-      // Open for editing
-      break;
-  }
-}
-```
-
-To write a smart poster record, pass an NDEF message to the NDEFWriter `write()`
-method. The smart poster record contained in the NDEF message is defined as an
-object with a `recordType` key set to `"smart-poster"` and a `data` key set to
-an object that represents (once again) an NDEF message contained in the
-smart poster record.
-
-```js
-const encoder = new TextEncoder();
-const smartPosterRecord = {
-  recordType: "smart-poster",
-  data: {
-    records: [
-      {
-        recordType: "url", // URL record for smart poster content
-        data: "https://my.org/content/19911"
-      },
-      {
-        recordType: "text", // title record for smart poster content
-        data: "Funny dance"
-      },
-      {
-        recordType: ":t", // type record, a local type to smart poster
-        data: encoder.encode("image/gif") // MIME type of smart poster content
-      },
-      {
-        recordType: ":s", // size record, a local type to smart poster
-        data: new Uint32Array([4096]) // byte size of smart poster content
-      },
-      {
-        recordType: ":act", // action record, a local type to smart poster
-        // do the action, in this case open in the browser
-        data: new Uint8Array([0])
-      },
-      {
-        recordType: "mime", // icon record, a MIME type record
-        mediaType: "image/png",
-        data: await (await fetch("icon1.png")).arrayBuffer()
-      },
-      {
-        recordType: "mime", // another icon record
-        mediaType: "image/jpg",
-        data: await (await fetch("icon2.jpg")).arrayBuffer()
-      }
-    ]
-  }
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [smartPosterRecord] });
-```
-
-### Read and write an external type record
-
-To create application defined records, use external type records. These may
-contain an NDEF message as payload that is accessible with `toRecords()`. Their
-name contains the domain name of the issuing organization, a colon and a type
-name that is at least one character long, for instance `"example.com:foo"`.
-
-```js
-function readExternalTypeRecord(externalTypeRecord) {
-  for (const record of externalTypeRecord.toRecords()) {
-    if (record.recordType == "text") {
-      const decoder = new TextDecoder(record.encoding);
-      console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
-    } else if (record.recordType == "url") {
-      const decoder = new TextDecoder();
-      console.log(`URL: ${decoder.decode(record.data)}`);
-    } else {
-      // TODO: Handle other type of records.
-    }
-  }
-}
-```
-
-To write an external type record, pass an NDEF message dictionary to the
-NDEFWriter `write()` method. The external type record contained in the NDEF
-message is defined as an object with a `recordType` key set to the name of the
-external type and a `data` key set to an object that represents an NDEF message
-contained in the external type record. Note that the `data` key can also be
-either an `ArrayBuffer` or provides a view on to an `ArrayBuffer` (e.g.
-`Uint8Array`, `DataView`).
-
-```js
-const externalTypeRecord = {
-  recordType: "example.game:a",
-  data: {
-    records: [
-      {
-        recordType: "url",
-        data: "https://example.game/42"
-      },
-      {
-        recordType: "text",
-        data: "Game context given here"
-      },
-      {
-        recordType: "mime",
-        mediaType: "image/png",
-        data: await (await fetch("image.png")).arrayBuffer()
-      }
-    ]
-  }
-};
-
-const writer = new NDEFWriter();
-writer.write({ records: [externalTypeRecord] });
-```
-
-### Read and write an empty record
-
-An empty record has no payload.
-
-To write an empty record, pass an NDEF message dictionary to the NDEFWriter
-`write()` method. The empty record contained in the NDEF message is defined as
-an object with a `recordType` key set to `"empty"`.
-
-```js
-const emptyRecord = {
-  recordType: "empty"
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [emptyRecord] });
-```
-
-## Dev Tips
-
-Here's a list of things I wish I had known when I started playing with Web NFC:
-
-- Android natively handles NFC tags before Web NFC is operational.
-- You can find an NFC icon on [material.io].
-- Use NDEF record `id` to easily identifying a record when needed.
-- An unformatted NFC tag that supports NDEF contains a single record of the empty type.
-- Writing an [android application record] is easy, as shown below.
-
-```js
-const encoder = new TextEncoder();
-const aarRecord = {
-  recordType: "android.com:pkg",
-  data: encoder.encode("com.example.myapp")
-};
-
-const writer = new NDEFWriter();
-await writer.write({ records: [aarRecord] });
-```
-
-## Demos {: #demos }
-
-Try out the [official sample] and check out some cool Web NFC demos:
-- [Cards demo]
-- [Grocery Demo]
-- [Intel RSP Sensor NFC]
-- [Media MEMO]
-
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/web-nfc-cards-demo.mp4">
-  </video>
-  <figcaption class="w-figcaption">
-    Web NFC cards demo at Chrome Dev Summit 2019
-  </figcaption>
-</figure>
-
-## Feedback {: #feedback }
-
-The [Web NFC Community Group](https://www.w3.org/community/web-nfc/) and the
-Chrome team would love to hear about your thoughts and experiences with Web NFC.
-
-### Tell us about the API design
-
-Is there something about the API that doesn't work as expected? Or are there
-missing methods or properties that you need to implement your idea?
-
-File a spec issue on the [Web NFC GitHub repo][issues] or add your thoughts to
-an existing issue.
-
-### Report a problem with the implementation
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-File a bug at [https://new.crbug.com][new-bug]. Be sure to include as much
-detail as you can, provide simple instructions for reproducing the bug, and have
-*Components* set to `Blink>NFC`. [Glitch](https://glitch.com) works great for
-sharing quick and easy repros.
-
-### Show support
-
-Are you planning to use Web NFC? Your public support helps the Chrome team
-prioritize features and shows other browser vendors how critical it is to
-support them.
-
-Send a Tweet to [@ChromiumDev][cr-dev-twitter] and let us know where and how
-you're using it.
-
-## Helpful links {: #helpful }
-
-* [Specification][spec]
-* [Web NFC Demo][demo] | [Web NFC Demo source][demo-source]
-* [Origin Trial][ot]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: [`Blink>NFC`](https://chromestatus.com/features#component%3ABlink%3ENFC)
-
-## Acknowledgements
-
-Big thanks to the [folks at Intel] for implementing Web NFC. Google Chrome
-depends on a community of committers working together to move the Chromium
-project forward. Not every Chromium committer is a Googler, and these
-contributors deserve special recognition!
-
-<!-- lint disable definition-case -->
-[explainer]: https://github.com/w3c/web-nfc/blob/gh-pages/EXPLAINER.md#web-nfc-explained
-[spec]: https://w3c.github.io/web-nfc/
-[ot]: https://developers.chrome.com/origintrials/#/view_trial/236438980436951041
-[issues]: https://github.com/w3c/web-nfc/issues
-[demo]: https://web-nfc-demo.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/web-nfc-demo?path=script.js:1:0
-[new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ENFC
-[cr-dev-twitter]: https://twitter.com/chromiumdev
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=520391
-[cr-status]: https://www.chromestatus.com/feature/6261030015467520
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/master/docs/security/permissions-for-powerful-web-platform-features.md
-[Permissions API]: https://www.w3.org/TR/permissions/
-[AbortController]: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
-[Page Visibility API]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
-[user may be prompted]: #security-and-permissions
-[permission]: https://w3c.github.io/permissions/
-[folks at Intel]: https://github.com/w3c/web-nfc/graphs/contributors
-[android application record]: https://developer.android.com/guide/topics/connectivity/nfc/nfc#aar
-[NFC forum]: https://nfc-forum.org/
-[android application record]: https://developer.android.com/guide/topics/connectivity/nfc/nfc#aar
-[official sample]: https://googlechrome.github.io/samples/web-nfc/
-[Cards demo]: https://web-nfc-demo.glitch.me
-[Grocery Demo]: https://kenchris.github.io/webnfc-groceries
-[Media MEMO]: https://webnfc-media-memo.netlify.com/
-[Intel RSP Sensor NFC]: https://kenchris.github.io/webnfc-rsp/
-[material.io]: https://material.io/resources/icons/?icon=nfc&style=baseline
-[appropriately]: https://w3c.github.io/web-nfc/#data-mapping
-[custom local type records]: https://w3c.github.io/web-nfc/#smart-poster-record
-[DataView]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView
-<!-- lint enable definition-case -->
diff --git a/src/site/content/en/blog/nfc/ndef-message-diagram.png b/src/site/content/en/blog/nfc/ndef-message-diagram.png
deleted file mode 100644
index c6b37ff5166..00000000000
Binary files a/src/site/content/en/blog/nfc/ndef-message-diagram.png and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/nfc-inventory-management.png b/src/site/content/en/blog/nfc/nfc-inventory-management.png
deleted file mode 100644
index ee3d11c2fe2..00000000000
Binary files a/src/site/content/en/blog/nfc/nfc-inventory-management.png and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/nfc-operation-diagram.png b/src/site/content/en/blog/nfc/nfc-operation-diagram.png
deleted file mode 100644
index fb35c03ac8d..00000000000
Binary files a/src/site/content/en/blog/nfc/nfc-operation-diagram.png and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/nfc-prompt.png b/src/site/content/en/blog/nfc/nfc-prompt.png
deleted file mode 100644
index 5b13039aa31..00000000000
Binary files a/src/site/content/en/blog/nfc/nfc-prompt.png and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/nfc-tag.jpg b/src/site/content/en/blog/nfc/nfc-tag.jpg
deleted file mode 100644
index cc48cca4384..00000000000
Binary files a/src/site/content/en/blog/nfc/nfc-tag.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/nfc/thumbnail.jpg b/src/site/content/en/blog/nfc/thumbnail.jpg
deleted file mode 100644
index 3831057a301..00000000000
Binary files a/src/site/content/en/blog/nfc/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/nikkei/index.md b/src/site/content/en/blog/nikkei/index.md
new file mode 100644
index 00000000000..6c453de255c
--- /dev/null
+++ b/src/site/content/en/blog/nikkei/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Nikkei achieves a new level of quality and performance with their multi-page PWA
+description: |
+  With a publishing history of more than 140 years, Nikkei is one of the most authoritative media businesses in Japan. To provide a better user experience and accelerate their business on the web, Nikkei successfully launched a Progressive Web App in November 2017, and they’re seeing amazing results from the new platform.
+date: 2018-11-19
+updated: 2018-11-19
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+With a publishing history of more than 140 years, [Nikkei](https://r.nikkei.com/)
+is one of the most authoritative media businesses in Japan. Along with their
+print newspaper, they have over 450 million monthly visits to their digital
+properties. To provide a better user experience and accelerate their business
+on the web, Nikkei successfully launched a Progressive Web App (PWA) -
+<https://r.nikkei.com> - in November 2017. They’re now seeing amazing
+results from the new platform.
+
+**Performance gains**
+- 2X better Speed Index
+- 14 seconds faster time-to-interactive
+- 75% faster loading with prefetch
+
+**Business impact**
+- 2.3X organic traffic
+- 58% more conversions (subscriptions)
+- 49% more daily active users
+- 2X page views per session
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/JDiPdSdRpvxdrcfUCyqc.pdf)
+
+## Business overview
+
+### Challenge
+
+Nikkei saw a rapid rise in mobile traffic to their legacy website as
+smartphones became the main point of entry to the web for many users.
+However, using [Lighthouse](https://developers.google.com/web/tools/lighthouse/), an auditing tool that
+scans a web page and gives recommendations on how to improve across multiple
+categories, they understood that their site wasn’t fully optimized for mobile
+across multiple areas and was very slow to load.
+
+Their website was taking ~20 secs to become consistently interactive and
+averaged 10 seconds on the Speed Index. Knowing that 53% of mobile users
+will abandon an experience if it takes more than 3 seconds to
+load, Nikkei wanted to reduce their load time to provide a better experience
+and accelerate their business on the web.
+
+{% Blockquote 'Taihei Shigemori, Manager, Digital Strategy' %}
+The value of speed is indisputable, especially for financial news. We made
+speed one of our core metrics, and our customers have appreciated the
+change.
+{% endBlockquote %}
+
+
+### Results
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/frvPpntXjuI7ZeZYP3YX.jpg", alt="Audit run in Apr 2018 on old site", width="800", height="407" %}
+  <figcaption>
+    Audit run in Apr 2018 on old site hosted at
+    <a href="http://mw.nikkei.com">mw.nikkei.com</a>
+  </figcaption>
+</figure>
+
+Nikkei achieved impressive performance gains. Their Lighthouse score soared
+from 23 to 82. Their time-to-interactive measurement improved by 14 seconds.
+Organic traffic, speed, conversion rate, and active daily users all rose as
+well.
+
+The PWA is a multi-page app (MPA) that reduces front-end complexity,
+built with Vanilla JavaScript. Five core front-end engineers worked for a
+year to achieve this performance.
+
+{% Blockquote 'Hiroyuki Higashi. Product Manager, Nikkei' %}
+The Nikkei front-end engineers have proved that great UX brings good
+business performance. We’re fully invested in continuing our journey of
+bringing a new level of quality to the web.
+{% endBlockquote %}
+
+### Solution
+
+Nikkei created and launched a Progressive Web App, using responsive design,
+vanilla JavaScript, and a multi-page architecture, they focused on building a
+delightful user experience. By adding a service worker, they were able to
+provide predictable performance, regardless of the network. This
+also ensures that top articles are always available and loaded almost
+immediately because they're stored using Cache Storage. They added a web app
+manifest, and together with their service worker this allows users to
+install the PWA, so it’s easily accessible. And to ensure
+performance was entirely within their control, they optimized their
+3rd-party JavaScript.
+
+### Best practices
+
+- Improve loading speed and interactivity by using modern web APIs,
+  compression, and code optimization practices.
+- Progressively enhance UX by adding PWA features such as offline support
+  and Add to Home Screen.
+- Build performance budgets into performance strategy.
+
+## Technical Deep Dive
+
+### Speed matters
+
+Speed is more important than ever. As smartphones became the main browsing
+device for many users, Nikkei saw a rapid increase of mobile traffic on
+their service. But using [Lighthouse](https://developers.google.com/web/tools/lighthouse/), they realized
+that their legacy website wasn’t fully optimized for mobile, with the Speed
+Index averaging 10 seconds, very slow initial load, and a large JavaScript
+bundle. It was time for Nikkei to rebuild their website and adapt
+web-performance best practices. Here are the results and key performance
+optimizations in the new PWA.
+
+### Leveraging web APIs & best practices to speed loading
+
+#### Preload key requests
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TxaULtyR4DtBscNF3DWq.jpg", alt="Preload key requests", width="800", height="546" %}
+</figure>
+
+It is
+[important to prioritize the loading of the critical path](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains). Using HTTP/2 Server Push, they're able to prioritize critical JavaScript and
+CSS bundles they know a user will need.
+
+
+
+#### Avoid multiple, costly round trips to any origin
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6U2uNYiHFY6RJ0Qqfcax.jpg", alt="3rd party resources loading.", width="800", height="270" %}
+</figure>
+
+The website needed to load 3rd party resources for tracking, ads and many
+other use cases. They used
+[`<link rel=preconnect>`](/web/fundamentals/performance/resource-prioritization#preconnect)
+to pre-resolve DNS/TCP/SSL handshake and negotiation for these key 3rd party
+origins.
+
+
+
+#### Dynamically prefetch the next page
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/N1x88qTSpjOHEVGXKAwz.jpg", alt="Dynamic prefetch", width="798", height="321" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/562GBoMg3vDr6hODZ7l9.jpg", alt="Dynamic prefetch", width="777", height="413" %}
+</figure>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MiT2Js7zL69wDIW9bI8O.jpg", alt="Dynamic prefetch", width="767", height="428" %}
+</figure>
+
+When they were confident that the user will navigate to a certain page, they
+didn’t just wait for the navigation to happen. Nikkei dynamically adds
+[`<link rel=prefetch>`](https://developers.google.com/web/fundamentals/performance/resource-prioritization#prefetch)
+to the `<head>` and pre-fetches the next page before the user actually clicks
+the link. This enables instant page navigation.
+
+#### Inline Critical-path CSS
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5Is1yVbinu7pWR9ZxQyE.jpg", alt="Inline Critical-path CSS", width="800", height="516" %}
+</figure>
+
+Reducing render blocking CSS is one of the best practices of speed loading. The
+website inlines all the critical CSS with 0
+[render blocking stylesheets](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
+This optimization reduced first meaningful paint by more than 1 second.
+
+#### Optimize JavaScript bundles
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UZzxYGSQzDbxksL6fcIL.jpg", alt="Optimizing JavaScript bundles", width="730", height="692" %}
+</figure>
+
+In their previous experience, Nikkei's JavaScript bundles were bloated,
+weighing over 300KB in total. Through a rewrite to vanilla JavaScript and
+modern bundling optimizations, such as route-based chunking and tree-shaking,
+they were able to trim this bloat. They reduced their JavaScript bundle size
+by 80%, dropping it to 60KB with RollUp.
+
+#### Other best practices implemented
+
+- [Compression](https://developers.google.com/web/tools/lighthouse/audits/text-compression): Gzip/Brotli all
+  compressible resources using Fastly CDN
+-  [Caching](https://developers.google.com/web/tools/lighthouse/audits/cache-policy): Enable HTTP caching,
+  edge side caching
+-  [Image optimization](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/): Use
+  [imgix](https://www.imgix.com/) for optimization and image format detection
+- [Lazy load non-critical resources](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/):
+  Use intersection observer API to load below-the-fold fragments
+- [Have a web font-loading strategy](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization):
+  Prioritize the use of system font
+- [Optimize first meaningful paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint):
+ Render the content server side
+- [Adopt performance budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/):
+  Keeping JavaScript transmission and parse/compile times low
+
+
+### Optimizing third-party JavaScript
+
+While it’s not as easy to optimize 3rd party JavaScripts compared to your
+own scripts, Nikkei successfully minified and bundled all ad-related scripts,
+which are now served from its own content delivery network (CDN). Ad-related
+tags usually provide a snippet to initiate and load other required scripts,
+which often block the page rendering and also require extra network
+turnaround time for each of the scripts downloaded. Nikkei took the following
+approach and improved initialization time by 100ms, plus reduced JS size by 30%:
+
+- Bundle all the required scripts using a JS bundler (e.g., Webpack)
+- Async load the bundled script, so that it doesn’t block the page rendering
+- Attach the calculated ad banner to Shadow DOM (vs iframe)
+- Progressively load ads on user scroll with Intersection Observer API
+
+
+### Progressively enhancing the website
+
+<figure>
+{% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/CyWCDtfk4M9nXV18xER3.mp4", autoplay="true", loop="true", muted="true" %}
+</figure>
+
+In addition to these basic optimizations, Nikkei leveraged
+[Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) and
+[service workers](https://developers.google.com/web/fundamentals/primers/service-workers/) to make their
+website [installable](https://developers.google.com/web/fundamentals/app-install-banners/) and even work
+offline. By using the [cache-first](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/)
+strategy in their service worker, all core resources and top articles are
+stored in the Cache Storage and reused even in contingency situations such as
+a flaky or offline network, providing consistent, optimized performance.
+
+### Hack the Nikkei
+
+A traditional daily newspaper company with a history of 140+ years successfully
+accelerated its digitalization through the power of web and PWA. Nikkei’s
+front-end engineers proved that great UX delivers strong  business performance.
+The company will continue its journey of bringing a new level of quality to the web.
+
+## Further reading
+
+- [Google I/Oで日経電子版が事例として紹介された話 (Japanese)](https://hack.nikkei.com/blog/nikkei-featured-at-google-io/)
+- [日経電子版を支える広告技術 (Japanese)](https://hack.nikkei.com/blog/tech_book_fest04_ds_ad_tech/)
+
+{% YouTube id="Mv-l3-tJgGk" %}
diff --git a/src/site/content/en/blog/notification-triggers/demo.png b/src/site/content/en/blog/notification-triggers/demo.png
deleted file mode 100644
index e2cf2b233ba..00000000000
Binary files a/src/site/content/en/blog/notification-triggers/demo.png and /dev/null differ
diff --git a/src/site/content/en/blog/notification-triggers/devtools-displayed.png b/src/site/content/en/blog/notification-triggers/devtools-displayed.png
deleted file mode 100644
index 3b858eaf1e5..00000000000
Binary files a/src/site/content/en/blog/notification-triggers/devtools-displayed.png and /dev/null differ
diff --git a/src/site/content/en/blog/notification-triggers/devtools-scheduled.png b/src/site/content/en/blog/notification-triggers/devtools-scheduled.png
deleted file mode 100644
index 435b3b2468e..00000000000
Binary files a/src/site/content/en/blog/notification-triggers/devtools-scheduled.png and /dev/null differ
diff --git a/src/site/content/en/blog/notification-triggers/hero.jpg b/src/site/content/en/blog/notification-triggers/hero.jpg
deleted file mode 100644
index 822b86fd555..00000000000
Binary files a/src/site/content/en/blog/notification-triggers/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/notification-triggers/index.md b/src/site/content/en/blog/notification-triggers/index.md
deleted file mode 100644
index 98e1d8e3b90..00000000000
--- a/src/site/content/en/blog/notification-triggers/index.md
+++ /dev/null
@@ -1,261 +0,0 @@
----
-title: Notification Triggers
-subhead:
-  Notification Triggers allows you to schedule local notifications that don't require a network
-  connection, which makes them ideal for use cases like calendar apps.
-authors:
-  - thomassteiner
-description:
-  The Notification Triggers API allows developers to schedule local notifications that don't require
-  a network connection, which makes them ideal for use cases like calendar apps.
-date: 2019-10-24
-updated: 2020-07-31
-hero: hero.jpg
-hero_position: center
-tags:
-  - blog
-  - capabilities
-  - origin-trials
-  - notification-triggers
----
-
-{% Aside %}
-  The Notification Triggers API, part of Google's
-  [capabilities project](https://developers.google.com/web/updates/capabilities),
-  is currently in development. This post will be updated as the
-  implementation progresses.
-{% endAside %}
-
-## What are Notification Triggers? {: #what }
-
-Web developers can display notifications using the
-[Web Notifications API](https://www.w3.org/TR/notifications/). This feature is often used
-with the [Push API](https://w3c.github.io/push-api/) to inform the user of
-time-sensitive information, such as breaking news events or received messages. Notifications are
-shown by running JavaScript on the user's device.
-
-The problem with the Push API is that it's not reliable for triggering notifications which _must_ be
-shown when a particular condition, like time or location, is met. An example of a _time-based
-condition_ is a calendar notification that reminds you of an important meeting with your boss at
-2&nbsp;PM. An example of a _location-based condition_ is a notification that reminds you to buy milk
-when you enter the vicinity of your grocery store. Network connectivity or battery-preserving
-features like doze mode can delay the delivery of push based notifications.
-
-Notification triggers solve this problem by letting you schedule notifications with their triggering
-condition in advance, so that the operating system will deliver the notification at the right time
-even if there is no network connectivity or the device is in battery saver mode.
-
-{% Aside %}
-  For now, Chrome only supports _time-based triggers_. Additional triggers, such as
-  location-based triggers, may be added in the future based on developer demand.
-{% endAside %}
-
-### Use cases {: #use-cases }
-
-Calendar applications can use time-based notification triggers to remind a user of upcoming
-meetings. The default notification scheme for a calendar app could be to show a first heads-up
-notification one hour before a meeting and then another more urgent notification five minutes
-before.
-
-A TV network might remind users that their favorite TV show is about to start or a conference live
-stream is about to begin.
-
-Time zone conversion sites can use time-based notification triggers to let their users schedule
-alarms for telephone conferences or video calls.
-
-## Current status {: #status }
-
-| Step                                         | Status                       |
-| -------------------------------------------- | ---------------------------- |
-| 1. Create explainer                          | [Complete][explainer]        |
-| 2. Create initial draft of specification     | Not started                  |
-| **3. Gather feedback and iterate on design** | **[In progress](#feedback)** |
-| 4. Origin trial                              | [Complete][ot]               |
-| 5. Launch                                    | Not started                  |
-
-{% Aside %}
-  An origin trial for the feature, which gave developers a chance to try out the proposed API,
-  ran from Chrome 80 to 83 and ended on July 29, 2020. Unfortunately, we did not receive
-  many sign-ups, and the feedback we received was not robust. For now, we have decided to
-  put the API on pause until further notice and to not extend the origin trial. The feature
-  will still be available behind the experimental web platform features flag for developers
-  to experiment with the API. Given future developer interest or new use cases,
-  we will reconsider the API and resume efforts on standardizing it.
-{% endAside %}
-
-## How to use notification triggers {: #use }
-
-### Enabling via chrome://flags
-
-To experiment with the Notification Triggers API locally, without an origin trial token, enable the
-`#enable-experimental-web-platform-features` flag in `chrome://flags`.
-
-### Feature detection
-
-You can find out if the browser supports Notification Triggers by checking for the existence of the
-`showTrigger` property:
-
-```js
-if ("showTrigger" in Notification.prototype) {
-  /* Notification Triggers supported */
-}
-```
-
-### Scheduling a notification
-
-Scheduling a notification is similar to showing a regular push notification,
-except that you need to pass a `showTrigger` condition property with a `TimestampTrigger` object as
-the value to the notification's `options` object.
-
-```js/5
-const createScheduledNotification = async (tag, title, timestamp) => {
-  const registration = await navigator.serviceWorker.getRegistration();
-  registration.showNotification(title, {
-    tag: tag,
-    body: "This notification was scheduled 30 seconds ago",
-    showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
-  });
-};
-```
-
-{% Aside %}
-  On desktop, notification triggers fire only if Chrome is running.
-  On Android, they fire regardless.
-{% endAside %}
-
-### Canceling a scheduled notification
-
-To cancel scheduled notifications, first request a list of all notifications that match a
-certain tag through `ServiceWorkerRegistration.getNotifications()`. Note that you need to pass the
-`includeTriggered` flag for scheduled notifications to be included in the list:
-
-```js/4
-const cancelScheduledNotification = async (tag) => {
-  const registration = await navigator.serviceWorker.getRegistration();
-  const notifications = await registration.getNotifications({
-    tag: tag,
-    includeTriggered: true,
-  });
-  notifications.forEach((notification) => notification.close());
-};
-```
-
-### Debugging
-
-You can use the [Chrome DevTools Notifications panel][devtools] to debug notifications.
-To start debugging, press **Start recording events** ![Start recording events](record.png) or
-<kbd>Control</kbd>+<kbd>E</kbd> (<kbd>Command</kbd>+<kbd>E</kbd> on Mac). Chrome DevTools
-records all notification events, including scheduled, displayed, and closed notifications,
-for three days, even when DevTools is closed.
-
-<figure class="w-figure w-figure--fullbleed">
-  <img src="devtools-scheduled.png"
-       alt="A scheduled notification event was logged to the Notifications pane of Chrome
-            DevTools, which is located in the Application panel.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    A scheduled notification.
-  </figcaption>
-</figure>
-
-<figure class="w-figure w-figure--fullbleed">
-  <img src="devtools-displayed.png"
-       alt="A displayed notification event was logged to the Notifications pane of Chrome
-            DevTools.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    A displayed notification.
-  </figcaption>
-</figure>
-
-### Demo
-
-You can see Notification Triggers in action in the [demo][demo], which allows you to schedule
-notifications, list scheduled notifications, and cancel them. The source code is available on
-[Glitch][demo-source].
-
-<figure class="w-figure w-figure--fullbleed">
-  <img src="demo.png" alt="A screenshot of the Notification Triggers demo web app.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    The Notification Triggers <a href="https://notification-triggers.glitch.me/">demo</a>.
-  </figcaption>
-</figure>
-
-## Security and permissions
-
-The Chrome team has designed and implemented the Notification Triggers API using the core
-principles defined in [Controlling Access to Powerful Web Platform Features][powerful-apis],
-including user control, transparency, and ergonomics. Because this API requires service workers,
-it also requires a secure context. Using the API requires the same permission as regular push
-notifications.
-
-### User control
-
-This API is only available in the context of a `ServiceWorkerRegistration`. This implies that all
-required data is stored in the same context and is automatically deleted when the service worker is
-deleted or the user deletes all site data for the origin. Blocking cookies also prevents service
-workers from being installed in Chrome, and therefore this API from being used.
-Notifications can always be disabled by the user for the site in site settings.
-
-### Transparency
-
-Unlike the Push API, this API does not depend on the network, which implies scheduled notifications
-need all required data beforehand, including image resources referenced by the `badge`,
-`icon` and `image` attributes. This means showing a scheduled notification is not observable by the
-developer and doesn't involve waking up the service worker until the user interacts with the
-notification. Consequently, there is currently no known way the developer could obtain information
-about the user through potentially privacy-invading approaches like IP address geolocation lookup.
-This design also allows the feature to optionally tap into scheduling mechanisms provided by
-the operating system like Android's
-[`AlarmManager`](https://developer.android.com/reference/android/app/AlarmManager), which helps
-preserve battery.
-
-## Feedback {: #feedback }
-
-The Chrome team wants to hear about your experiences with Notification Triggers.
-
-### Tell us about the API design
-
-Is there something about the API that doesn't work like you expected? Or are there missing methods
-or properties that you need to implement your idea? Have a question or comment on the security
-model? File a spec issue on the [Notification Triggers GitHub repo][issues], or add your thoughts to
-an existing issue.
-
-### Problem with the implementation?
-
-Did you find a bug with Chrome's implementation? Or is the implementation different from the spec?
-File a bug at [new.crbug.com](https://new.crbug.com/). Be sure to include as much detail as you can,
-simple instructions for reproducing, and set Components to `UI>Notifications`. Glitch works great
-for sharing quick and easy bug reproductions.
-
-### Planning to use the API?
-
-Planning to use Notification Triggers on your site? Your public support helps us to prioritize
-features and shows other browser vendors how critical it is to support them. Send a Tweet to
-[@ChromiumDev](https://twitter.com/chromiumdev) with `#notificationtriggers` and let us know where
-and how you're using it.
-
-## Helpful Links {: #helpful }
-
-- [Public explainer][explainer]
-- [Notification Triggers demo][demo] | [Notification Triggers demo source][demo-source]
-- [Tracking bug][cr-bug]
-- [ChromeStatus.com entry][cr-status]
-- Blink Component: `UI>Notifications`
-
-## Acknowledgements
-
-Notification Triggers was implemented by [Richard Knoll](https://uk.linkedin.com/in/richardknoll)
-and the explainer written by [Peter Beverloo](https://twitter.com/beverloo?lang=en), with
-contributions from Richard. The following people have reviewed the article:
-[Joe Medley](https://twitter.com/medleyjp), [Pete LePage](https://twitter.com/petele), as well as
-Richard and Peter. [Hero image](https://unsplash.com/photos/UAvYasdkzq8) by
-[Lukas Blazek](https://unsplash.com/@goumbik) on Unsplash.
-
-[issues]: https://github.com/beverloo/notification-triggers/issues
-[demo]: https://notification-triggers.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/notification-triggers
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=891339
-[cr-status]: https://www.chromestatus.com/feature/5133150283890688
-[explainer]: https://github.com/beverloo/notification-triggers/blob/master/README.md
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[ot]: https://developers.chrome.com/origintrials/#/view_trial/6883752030435803137
-[devtools]: https://developers.google.com/web/updates/2019/07/devtools#backgroundservices
diff --git a/src/site/content/en/blog/notification-triggers/record.png b/src/site/content/en/blog/notification-triggers/record.png
deleted file mode 100644
index 09a16ecee72..00000000000
Binary files a/src/site/content/en/blog/notification-triggers/record.png and /dev/null differ
diff --git a/src/site/content/en/blog/notifications-quick/index.md b/src/site/content/en/blog/notifications-quick/index.md
new file mode 100644
index 00000000000..0fcfa8d7265
--- /dev/null
+++ b/src/site/content/en/blog/notifications-quick/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Using the Notifications API
+authors:
+  - ernestd
+date: 2010-02-24
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+This article is outdated and references a deprecated API.
+
+For modern coverage of the [Notifications API](http://www.w3.org/TR/notifications/) (which is supported by Chrome, Firefox and Safari), read the [MDN docs on Notification](https://developer.mozilla.org/docs/Web/API/notification). [Notify.js](https://github.com/alexgibson/notify.js) also offers a nice abstraction for the API.
+{% endAside %}
+
+## Introduction
+
+The [Notifications API](http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification) allows you to display notifications to the user for given events,
+both passively (new emails, tweets or calendar events) and on user interactions regardless of which tab has focus. There is [draft spec](http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification) but it is not currently in any standard.
+
+You can follow these simple steps to implement notifications in just a few minutes:
+
+## Step 1: Check for Notifications API support
+
+We check if `webkitNotifications` is supported. Note that the name of `webkitNotifications` is because it's part of a draft spec. The final spec will have a notifications() function instead.
+
+```js
+// check for notifications support
+// you can omit the 'window' keyword
+if (window.webkitNotifications) {
+console.log("Notifications are supported!");
+}
+else {
+console.log("Notifications are not supported for this Browser/OS version yet.");
+}
+```
+
+## Step 2: Let the user grant permissions to a website to show notifications
+
+Any of the constructors we mentioned will throw a security error if the user hasn't manually granted permissions to the website to show notifications.
+To handle the exception you can use a try-catch statement but you can also use the `checkPermission` method for the same purpose.
+
+```js
+document.querySelector('#show_button').addEventListener('click', function() {
+if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
+// function defined in step 2
+window.webkitNotifications.createNotification(
+    'icon.png', 'Notification Title', 'Notification content...');
+} else {
+window.webkitNotifications.requestPermission();
+}
+}, false);
+```
+
+If the web application doesn't have permissions to show notifications then the `requestPermission` method will show an infobar:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xMGNoXBSBwsm4UcerTSa.png", alt="The notifications permission infobar in Google Chrome", width="457", height="63" %}
+<figcaption>The notifications permission infobar in Google Chrome.</figcaption>
+</figure>
+
+However, it's __very important__ to remember that the `requestPermission` method only works in event handlers triggered by a user
+action, like mouse or keyboard events, in order to avoid unsolicited infobars. In this case, the user action is the click on the button with id "show_button".
+The snippet above will never work if the user hasn't explicitly clicked on a button or link that triggers the `requestPermission` at some point.
+
+## Step 3: Attach listeners and other actions
+
+```js
+document.querySelector('#show_button').addEventListener('click', function() {
+  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
+    // function defined in step 2
+    notification_test = window.webkitNotifications.createNotification(
+      'icon.png', 'Notification Title', 'Notification content...');
+    notification_test.ondisplay = function() { ... do something ... };
+    notification_test.onclose = function() { ... do something else ... };
+    notification_test.show();
+  } else {
+    window.webkitNotifications.requestPermission();
+  }
+}, false);
+```
+
+At this point, you might want to encapsulate all these events and actions creating your own Notification class to keep the code cleaner, although this is beyond the scope of this tutorial.
diff --git a/src/site/content/en/blog/nykaa/index.md b/src/site/content/en/blog/nykaa/index.md
new file mode 100644
index 00000000000..07e4e380e65
--- /dev/null
+++ b/src/site/content/en/blog/nykaa/index.md
@@ -0,0 +1,6 @@
+---
+title: TODO
+description: TODO
+date: 2019-10-24
+draft: true
+---
\ No newline at end of file
diff --git a/src/site/content/en/blog/off-main-thread/index.md b/src/site/content/en/blog/off-main-thread/index.md
index 8dc335ab637..1c0ed416452 100644
--- a/src/site/content/en/blog/off-main-thread/index.md
+++ b/src/site/content/en/blog/off-main-thread/index.md
@@ -7,6 +7,9 @@ description: |
   The browser's main thread is incredibly overworked. By using web workers
   to shift code off the main thread, you can significantly improve
   your app's reliability and user experience.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/LwqqWsiDgCI6DWSvIBx9.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/0g1FW2vXmRc30u7BtWRc.jpg
+alt: A monochrome photo of a railroad junction.
 
 # A list of authors. Supports more than one.
 authors:
@@ -14,12 +17,12 @@ authors:
 
 date: 2019-12-05
 # Add an updated date to your post if you edit in the future.
-# updated: 2019-11-01
+updated: 2022-11-29
 
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
-  - test-post
+  - web-vitals
 ---
 
 In the past 20&nbsp;years,
@@ -42,7 +45,7 @@ from hyper-constrained feature phones to high-powered,
 high-refresh-rate flagship machines.
 
 If we want sophisticated web apps to reliably meet performance guidelines
-like the [RAIL model](https://developers.google.com/web/fundamentals/performance/rail)—which
+like the [Core Web Vitals](/vitals/)—which
 is based on empirical data about human perception and psychology—we
 need ways to execute our code **off the main thread (OMT)**.
 
@@ -53,9 +56,17 @@ watch my CDS 2019 talk below.
 
 {% YouTube '7Rrv9qFMWNM' %}
 
+## Why web workers?
+
+JavaScript is, by default, a single-threaded language that runs [tasks](/optimize-long-tasks/#what-is-a-task) on [the main thread](/optimize-long-tasks/#what-is-the-main-thread). However, web workers provide a sort of escape hatch from the main thread by allowing developers to spin up separate threads to handle work off of the main thread. While the scope of web workers is limited and doesn't offer direct access to the DOM, they can be hugely beneficial if there is considerable work that needs to be done that would otherwise overwhelm the main thread.
+
+Where [Core Web Vitals](/vitals/) are concerned, running work off the main thread can be beneficial. In particular, offloading work from the main thread to web workers can reduce contention for the main thread, which can improve important responsiveness metrics such as [Interaction to Next Paint (INP)](/inp/) and [First Input Delay (FID)](/fid/). When the main thread has less work to process, it can respond more quickly to user interactions.
+
+Less main thread work—especially during startup—also carries a potential benefit for [Largest Contentful Paint (LCP)](/lcp/) by reducing long tasks. Rendering an LCP element requires main thread time—either for rendering text or images, which are frequent and common LCP elements—and by reducing main thread work overall, you can ensure that your page's LCP element is less likely to be blocked by expensive work that a web worker could handle instead.
+
 ## Threading with web workers
 
-Native platforms typically support parallel work
+Other platforms typically support parallel work
 by allowing you to give a thread a function,
 which runs in parallel with the rest of your program.
 You can access the same variables from both threads,
@@ -66,11 +77,11 @@ In JavaScript, we can get roughly similar functionality from web workers,
 which have been around since 2007
 and supported across all major browsers since 2012.
 Web workers run in parallel with the main thread,
-but unlike native threading they can't share variables.
+but unlike OS threading they can't share variables.
 
 {% Aside %}
 Don't confuse web workers with [service workers](/service-workers-cache-storage)
-or [worklets](https://developer.mozilla.org/en-US/docs/Web/API/Worklet).
+or [worklets](https://developer.mozilla.org/docs/Web/API/Worklet).
 While the names are similar, the functionality and uses are different.
 {% endAside %}
 
@@ -82,7 +93,7 @@ const worker = new Worker("./worker.js");
 ```
 
 Communicate with the web worker by sending messages via the
-[`postMessage` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
+[`postMessage` API](https://developer.mozilla.org/docs/Web/API/Window/postMessage).
 Pass the message value as a parameter in the `postMessage` call
 and then add a message event listener to the worker:
 
@@ -143,7 +154,7 @@ whose goal is to let you use web workers
 without having to think about the details of `postMessage`.
 Comlink lets you to share variables
 between web workers and the main thread
-almost like programming languages that natively support threading.
+almost like other programming languages that support threading.
 
 You set up Comlink by importing it in a web worker
 and defining a set of functions to expose to the main thread.
@@ -174,9 +185,9 @@ except that every function returns a promise for a value rather than the value i
 ## What code should you move to a web worker?
 
 Web workers don't have access to the DOM and many APIs
-like [WebUSB](https://developer.mozilla.org/en-US/docs/Web/API/USB),
-[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API), or
-[Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API),
+like [WebUSB](https://developer.mozilla.org/docs/Web/API/USB),
+[WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API), or
+[Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API),
 so you can't put pieces of your app that rely on such access in a worker.
 Still, every small piece of code moved to a worker buys more headroom
 on the main thread for stuff that _has_ to be there—like updating the user interface.
@@ -223,12 +234,12 @@ the UI is frozen for six seconds after the user interacts with it.
 There's no feedback, and the user has to wait for the full six seconds
 before being able to do something else.
 
-<figure class="w-figure">
-  <video controls muted class="w-screenshot" style="max-width: 400px;">
+<figure>
+  <video controls muted style="max-width: 400px;">
     <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     UI response time in the <strong>non-OMT</strong> version of PROXX.
   </figcaption>
 </figure>
@@ -242,12 +253,12 @@ The user therefore knows that something is happening
 and can continue playing as the UI updates,
 making the game feel considerably better.
 
-<figure class="w-figure">
-  <video controls muted class="w-screenshot" style="max-width: 400px;">
+<figure>
+  <video controls muted style="max-width: 400px;">
     <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     UI response time in the <strong>OMT</strong> version of PROXX.
   </figcaption>
 </figure>
@@ -290,7 +301,7 @@ There's more detail in the talk, but, in general,
 you shouldn't break your performance budget
 if your object's stringified JSON representation is less than 10&nbsp;KB.
 If you need to copy larger objects, consider using
-[ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+[ArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
 or [WebAssembly](https://webassembly.org/).
 You can read more about this issue in
 [this blog post about `postMessage` performance](https://dassur.ma/things/is-postmessage-slow).
@@ -315,11 +326,13 @@ Also, OMT has secondary benefits:
 
 *   It moves JavaScript execution costs to a separate thread.
 *   It moves _parsing_ costs, meaning UI might boot up faster.
-    That might reduce [First Contentful Paint](/first-contentful-paint)
-    or even [Time to Interactive](/interactive),
+    That might reduce [First Contentful Paint](/fcp/)
+    or even [Time to Interactive](/tti/),
     which can in turn increase your
-    [Lighthouse](https://developers.google.com/web/tools/lighthouse) score.
+    [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) score.
 
 Web workers don't have to be scary.
 Tools like Comlink are taking the work out of workers
 and making them a viable choice for a wide range of web applications.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [James Peacock](https://unsplash.com/@jimmyp9751)._
diff --git a/src/site/content/en/blog/ola/index.md b/src/site/content/en/blog/ola/index.md
new file mode 100644
index 00000000000..93421c4b329
--- /dev/null
+++ b/src/site/content/en/blog/ola/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Ola drives mobility for a billion Indians with Progressive Web App 
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qjCVAu4foDvaKnBHcX05.jpg", alt="Ola detail", width="800", height="800" %}
+</figure>
+
+Ola is the leading cab aggregator in India, with a relentless mission to drive
+mobility for a billion Indians. The company reaches over 100 Indian cities with
+a network of about 600K driver-partners. As one of India’s most highly valued
+startups, Ola completes more than a million daily rides, fighting for the lion’s
+share of the country’s estimated 300 million daily taxi trips.
+
+- 68% increase in mobile traffic in Tier 2 and 3 cities 
+- In Tier 2 cities conversion rates are same as native app. In Tier 3 
+  cities, conversion rates are 30% higher with the PWA.
+- PWA application size is 200KB, which is 300x smaller than downloading an
+  Android app and more than 500x smaller than the iOS app
+- 20% of users who book in their PWA had prev. uninstalled their app
+
+
+## Challenges
+
+Tier 2 and Tier 3 cities (cities with populations of 20,000 to 99,000) pose
+unique challenges and opportunities for Ola. Demand for sustainable, reliable
+transport services is growing rapidly and is eagerly anticipated in these areas.
+People in these cities often deal with intermittent cellular connectivity and
+have low-end smartphones with low memory and slow processors. These users are
+less apt to download and store native apps on their smartphones because native
+apps require high data usage and take up a lot of space —the Ola Android app is
+a 60MB download and the iOS app is 100M.  It was clear that Ola needed a
+different way to reach these users.
+ 
+The mobile web presented a perfect solution. It offers easy discovery and low
+friction—users just click a link instead of downloading an app. Other advantages
+include push notifications, and the “Add to Home screen“ user prompt. As Dipika
+Kapadia, Ola’s head of consumer web products notes, “Apps have many advantages
+but must be developed for different operating systems, while a single site is
+good for any browser.”
+ 
+## Solution
+
+Ola built their mobile website as a Progressive Web App (PWA). Using just 200KB
+of data to install, the PWA is at least 300X smaller than downloading the
+Android app and 500X smaller than downloading their iOS app. Repeat visits use
+as little as 10KB. This low data consumption translates into a 3.4-second first
+visit and less than a second for repeat visits on 2G and 3G networks—an ideal
+solution for millions of Indians.
+ 
+Ola also noticed that 20% of users who book using their PWA had previously
+uninstalled their app. By reducing the amount of storage space needed, the PWA
+allowed them to effectively re-engage with their previous app users.
+ 
+{% Blockquote 'Dipika Kapadia, head of consumer web & corporate products, Ola' %}
+Having a fast, engaging mobile website means we’re no longer turning
+away potential users who don’t want to use data or space to download an
+app.
+{% endBlockquote %} 
+
+The PWA is helping Ola reach a broader set of users in new cities. They’ve seen
+mobile traffic from Tier 2 and Tier 3 cities grow by 68%. Since launch,
+conversion rates on the PWA have been the same as their native app in Tier 2
+cities, and for Tier 3 cities, conversion rates are 30% higher on the PWA. 
+ 
+## A future without apps?
+
+Well, not exactly. For Ola, having both a native app and a PWA just makes sense.
+By skipping the requirement that users install an app, Ola believes their PWA is
+tailor-made for the low-end devices. Users can now use either depending on their
+location and bandwidth.
+ 
+{% Blockquote 'Ankit Bhati, Co-Founder & CTO, Ola' %}
+There’s no need to choose between the web and the app. Today, we believe
+Ola is set for its next stage of growth. We intend to balance the two and
+have both strategies in play.
+{% endBlockquote %} 
diff --git a/src/site/content/en/blog/olx/index.md b/src/site/content/en/blog/olx/index.md
new file mode 100644
index 00000000000..df2421f743c
--- /dev/null
+++ b/src/site/content/en/blog/olx/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: OLX boosts re-engagement on the mobile web by 250% with a Progressive Web App
+description: | 
+    For OLX, creating a Progressive Web App increased engagement by 250% and reduced page time to interactive by 23%
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s13PUoEsXkodTR5hz1YP.jpg", alt="OLX detail", width="800", height="800" %}
+</figure>
+ 
+One of the largest online destinations for classified ads in India, OLX provides
+communities in high-growth markets with vibrant online marketplaces. They
+connect local people so they can buy, sell, or exchange used goods and services,
+making it fast and easy for anyone to post a listing on the web.
+
+- 23% less time until page is interactive
+- 80% lower bounce rates
+- 146% higher CTR on Ads
+- 250% more re-engagement
+
+## Challenge
+
+With declining desktop growth, OLX gets over 90% of their traffic from mobile
+devices—and this number is still growing. Half of their visitors come via their
+native app and half via the mobile website. OLX noticed, however, that the
+majority of conversions were still happening on the native app. Their mobile-web
+bounce rates tended to be higher as well.
+ 
+OLX analyzed behavior on their mobile site and realized their mobile web
+experience was too slow. Monetization also suffered from slow-loading ads. OLX
+aggressively doubled down on acquiring quality users and growing their engaged
+user base on the mobile web. They looked to Progressive Web App (PWA)
+technologies to provide a faster-loading, immersive and app-like experience.
+ 
+## Solution
+
+OLX wanted to re-engage mobile web users, just as they would their mobile app
+users. On Android devices (which all support service worker, a key PWA
+technology), this meant taking advantage of re-engagement capabilities like push
+notifications and the “Add to Home screen” prompt.
+ 
+With push notifications, OLX sends context-based alerts to tell users they have
+messages from buyers or sellers. These notifications look the same as those on
+native apps, and arrive even if the browser is no longer running. Over 600,000
+users have signed up for notifications since the site launched in November 2016.
+ 
+Altogether, these two updates increased engagement by 250%.
+ 
+Creating a PWA improved other metrics too: the time until the page became
+interactive fell by 23%, with a corresponding 80% drop in bounce rates.
+Monetization also improved, with ads loading faster, the clickthrough rate (CTR)
+rising 146%. Their best-in-class PWA achieved a performance score of 92/100 on
+Lighthouse, an automated tool for improving web-page quality.
+ 
+{% Blockquote 'Amarjit Batra, CEO,OLX India' %}
+In 2016 we re-invented classifieds mobile experience with the release of the new
+OLX App and its PWA. Building a new platform, we leveraged innovative technology
+and deep consumer understanding to roll out improved and forward-looking product
+changes that make the online classifieds experience safer, simpler, and social.
+Mobile being the first screen to ​ the​ internet for millions of users in India,
+we wanted to ensure that not only app-savvy users but people comfortable in
+using mobile websites can feel the same experience while using OLX. The PWA
+version feels like a natural app on the device, with an immersive user
+experience.
+{% endBlockquote %}
+ 
+ 
+ 
+ 
+ 
diff --git a/src/site/content/en/blog/one-line-layouts/hero.png b/src/site/content/en/blog/one-line-layouts/hero.png
deleted file mode 100644
index 86e3fc83c0f..00000000000
Binary files a/src/site/content/en/blog/one-line-layouts/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/one-line-layouts/index.md b/src/site/content/en/blog/one-line-layouts/index.md
index a9d261cde0a..bf679cd2a68 100644
--- a/src/site/content/en/blog/one-line-layouts/index.md
+++ b/src/site/content/en/blog/one-line-layouts/index.md
@@ -5,7 +5,7 @@ authors:
   - una
 description: This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
 date: 2020-07-07
-hero: hero.png
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
 alt: Holy grail layout.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -28,13 +28,13 @@ To follow along or play with these demos on your own, check out the Glitch embed
 
 ## 01. Super Centered: `place-items: center`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4'>
   </video>
 </figure>
 
-For the  first 'single-line' layout, let's solve the biggest mystery in all of the CSS land: centering things. I want you to know that it's easier than you think with [`place-items: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items).
+For the  first 'single-line' layout, let's solve the biggest mystery in all of the CSS land: centering things. I want you to know that it's easier than you think with [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items).
 
 First specify `grid` as the `display` method, and then write `place-items: center` on the same element. `place-items` is a shorthand to set both `align-items` and `justify-items` at once. By setting it to `center`, both `align-items` and `justify-items` are set to  `center`.
 
@@ -49,8 +49,8 @@ This enables the content to be perfectly centered within the parent, regardless
 
 ## 02. The Deconstructed Pancake: `flex: <grow> <shrink> <baseWidth>`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4'>
   </video>
 </figure>
@@ -59,7 +59,7 @@ Next we have the deconstructed pancake! This is a common layout for marketing si
 
 By using Flexbox for this effect, you won't need media queries to adjust the placement of these elements when the screen resizes.
 
-The [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) shorthand stands for: `flex: <flex-grow> <flex-shrink> <flex-basis>`.
+The [`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) shorthand stands for: `flex: <flex-grow> <flex-shrink> <flex-basis>`.
 
 Because of this, if you want your boxes to fill out to their `<flex-basis>` size, shrink on smaller sizes, but not *stretch* to fill any additional space, write: `flex: 0 1 <flex-basis>`. In this case, your `<flex-basis>` is `150px` so it looks like:
 
@@ -84,8 +84,8 @@ If you *do* want the boxes to stretch and fill the space as they wrap to the nex
   flex: 1 1 150px;
 }
 ```
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4'>
   </video>
 </figure>
@@ -94,13 +94,13 @@ Now, as you increase or decrease the screen size,  these flex items both shrink
 
 ## 03. Sidebar Says: `grid-template-columns: minmax(<min>, <max>) …)`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4'>
   </video>
 </figure>
 
-This demo takes advantage of the [minmax](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) function for grid layouts. What we're doing here is setting the minimum sidebar size to be `150px`, but on larger screens, letting that stretch out to `25%`. The sidebar will always take up `25%` of its parent's horizontal space until that `25%` becomes smaller than `150px`.
+This demo takes advantage of the [minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) function for grid layouts. What we're doing here is setting the minimum sidebar size to be `150px`, but on larger screens, letting that stretch out to `25%`. The sidebar will always take up `25%` of its parent's horizontal space until that `25%` becomes smaller than `150px`.
 
 Add this as a value of grid-template-columns with the following value:
 `minmax(150px, 25%) 1fr`. The item in the first column (the sidebar in this case) gets a `minmax` of `150px` at `25%`, and the second item (the `main` section here) takes up the rest of the space as a single `1fr` track.
@@ -114,13 +114,13 @@ Add this as a value of grid-template-columns with the following value:
 
 ## 04. Pancake Stack: `grid-template-rows: auto 1fr auto`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4'>
   </video>
 </figure>
 
-Unlike the Deconstructed Pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a [sticky footer](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers), this layout is often used for both websites and apps, across mobile applications (the footer is commonly a toolbar), and websites (single page applications often use this global layout).
+Unlike the Deconstructed Pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a [sticky footer](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers), this layout is often used for both websites and apps, across mobile applications (the footer is commonly a toolbar), and websites (single page applications often use this global layout).
 
 Adding `display: grid` to the component will give you a single column grid, however the main area will only be as tall as the content with the footer below it.
 
@@ -137,8 +137,8 @@ This sets the header and footer content to automatically take the size of its ch
 
 ## 05. Classic Holy Grail Layout: `grid-template: auto 1fr auto / auto 1fr auto`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4'>
   </video>
 </figure>
@@ -160,8 +160,8 @@ As in the last example, where the header and footer had auto-sized content, here
 
 ## 06. 12-Span Grid: `grid-template-columns: repeat(12, 1fr)`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4'>
   </video>
 </figure>
@@ -181,8 +181,8 @@ Next we have another classic: the 12-span grid. You can quickly write grids in C
 
 Now you have a 12 column track grid, we can place our children on the grid. One way to do this would be to place them using grid lines. For example, `grid-column: 1 / 13` would span all the way from the first line to the last (13th) and span 12 columns. `grid-column: 1 / 5;` would span the first four.
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4'>
   </video>
 </figure>
@@ -197,8 +197,8 @@ Another way to write this is by using the `span` keyword. With `span`, you set t
 
 ## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4'>
   </video>
 </figure>
@@ -218,8 +218,8 @@ You are using repeat again, but this time, using the `auto-fit` keyword instead
 
 With `auto-fit`, the boxes will stretch as their horizontal size exceeds 150px to fill the entire remaining space. However, if you change this to `auto-fill`, they will not stretch when their base size in the minmax function is exceeded:
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4'>
   </video>
 </figure>
@@ -233,8 +233,8 @@ With `auto-fit`, the boxes will stretch as their horizontal size exceeds 150px t
 
 ## 08. Line Up: `justify-content: space-between`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4'>
   </video>
 </figure>
@@ -253,8 +253,8 @@ This places the title, description, and image block in a vertical column inside
 
 ## 09. Clamping My Style: `clamp(<min>, <actual>, <max>)`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4'>
   </video>
 </figure>
@@ -265,7 +265,7 @@ This sets an absolute min and max size, and an actual size. With values, that ca
 
 ```css/1
 .parent {
-  width: clamp(23ch, 50%, 46ch);
+  width: clamp(23ch, 60%, 46ch);
 }
 ```
 
@@ -279,8 +279,8 @@ This is a great technique to ensure legibility with a minimum and maximum size v
 
 ## 10. Respect for Aspect: `aspect-ratio: <width> / <height>`
 
-<figure class='w-figure'>
-  <video controls autoplay loop muted playsinline class='w-screenshot'>
+<figure>
+  <video controls autoplay loop muted playsinline>
     <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4'>
   </video>
 </figure>
diff --git a/src/site/content/en/blog/onslaught/index.md b/src/site/content/en/blog/onslaught/index.md
new file mode 100644
index 00000000000..4f057ea7d46
--- /dev/null
+++ b/src/site/content/en/blog/onslaught/index.md
@@ -0,0 +1,467 @@
+---
+layout: post
+title: Case Study - Onslaught! Arena
+authors:
+  - matthackett
+  - geoffblair
+date: 2011-02-10
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+In June of 2010, it came to our attention that local publishing "zine" [Boing Boing](http://boingboing.net/) was having a 
+[game development competition](http://boingboing.net/arcade/).
+We saw this as a perfectly good excuse to make a quick, simple game in JavaScript
+and `<canvas>`, so we set to work. After the competition we still
+had a lot of ideas and wanted to finish what we started. Here's the case study of
+the result, a little game called [Onslaught! Arena](https://chrome.google.com/webstore/detail/khodnfbkbanejphecblcofbghjdgfaih).
+
+## The retro, pixelated look
+
+It was important that our game look and feel like a retro __Nintendo Entertainment System__
+game, given the [contest premise](http://www.boingboing.net/2010/06/14/games-inspired-by-mu.html)
+to develop a game based on a [chiptune](http://en.wikipedia.org/wiki/Chiptune). Most games
+don't have this requirement, but it's still a common artistic style (especially among indie developers)
+due to its ease of asset creation and natural appeal to nostalgic gamers.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Yg6TSpB0F6X4fFKuF3M6.png", alt="Onslaught! Arena pixel sizes", width="584", height="128" %}
+  <figcaption>Increasing pixel size can decrease graphic design work.</figcaption>
+</figure>
+
+Given how small these sprites are we decided to double-up our pixels, meaning that a
+16x16 sprite would now be 32x32 pixels and so forth. From the beginning we had been
+doubling-up on the asset creation side of things instead of making the browser do the
+heavy lifting. This was simply easier to implement but also had some definite
+appearance advantages.
+
+Here's a scenario that we considered:
+
+```html
+<style>
+canvas {
+  width: 640px;
+  height: 320px;
+}
+</style>
+<canvas width="320" height="240">
+  Sorry, your browser is not supported.
+</canvas>
+```
+
+This method would consist of 1x1 sprites instead of doubling them up on the
+asset creation side. From there, CSS would take over and resize the canvas itself. Our benchmarks revealed that this method
+can be about twice as fast as rendering larger (doubled-up) images, but unfortunately
+CSS resizing includes anti-aliasing, something we couldn't find a way to prevent.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8O7IcpO2n9xvuiQriNej.png", alt="Canvas resizing options", width="700", height="120" %}
+  <figcaption>Left: pixel-perfect assets doubled-up in Photoshop. Right: CSS resizing added a blurry effect.</figcaption>
+</figure>
+
+This was a deal breaker for our game since individual pixels are so important
+but if you need to resize your canvas and anti-aliasing is appropriate for your
+project, you could consider this approach for performance reasons.
+
+## Fun canvas tricks
+
+We all know that `<canvas>` is the new hotness, but sometimes
+[developers still recommend using DOM](http://paulbakaus.com/2010/07/19/why-canvas-is-not-an-obvious-choice-for-web-games/). If you're on the fence about which to use, here's an
+example of how `<canvas>` saved us lots of time and energy.
+
+When an enemy gets hit in **Onslaught! Arena**, it flashes red and
+briefly displays a "pain" animation. To limit the number of graphics we had to
+create, we only show enemies in "pain" in the downward-facing direction. This
+looks acceptable in-game and saved tons of time of sprite creation. For the
+boss monsters however, it was jarring to see a large sprite (at 64x64 pixels
+or more) snap from facing left or up to suddenly facing down for the pain frame.
+
+An obvious solution would be to draw a pain frame for each boss in each of the
+eight directions, but this would have been very time-consuming. Thanks to
+`<canvas>`, we were able to solve this problem in the code:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LK7HW1xeN964zi4527jD.png", alt="Beholder taking damage in Onslaught! Arena", width="600", height="192" %}
+  <figcaption>Interesting effects can be made using context.globalCompositeOperation.</figcaption>
+</figure>
+
+First we draw the monster to a hidden "buffer" `<canvas>`,
+overlay it with red, then render the result back to the screen. The code looks
+something like this:
+
+```js
+// Get the "buffer" canvas (that isn't visible to the user)
+var bufferCanvas = document.getElementById("buffer");
+var buffer = bufferCanvas.getContext("2d");
+
+// Draw your image on the buffer
+buffer.drawImage(image, 0, 0);
+
+// Draw a rectangle over the image using a nice translucent overlay
+buffer.save();
+buffer.globalCompositeOperation = "source-in";
+buffer.fillStyle = "rgba(186, 51, 35, 0.6)"; // red
+buffer.fillRect(0, 0, image.width, image.height);
+buffer.restore();
+
+// Copy the buffer onto the visible canvas
+document.getElementById("stage").getContext("2d").drawImage(bufferCanvas, x, y);
+```
+
+## The Game Loop
+
+Game development has some notable differences from web development. In the
+web stack, it's common to react to events that happened via event listeners. So
+initialization code may do nothing other than listen for input events. A game's
+logic is different, as it's necessary to constantly be updating itself. If, for
+example, a player hasn't moved, that shouldn't stop goblins from getting him!
+
+Here's an example of a game loop:
+
+```js
+function main () {
+  handleInput();
+  update();
+  render();
+};
+
+setInterval(main, 1);
+```
+
+The first important difference is that the `handleInput` function
+doesn't actually __do__ anything right away. If a user presses a key in a
+typical web app, it makes sense to immediately perform the desired action. But
+in a game, things have to happen in chronological order to flow correctly.
+
+```js
+window.addEventListener("mousedown", function(e) {
+  // A mouse click means the players wants to attack.
+  // We don't actually do that yet, but instead tell the rest
+  // of the program about the request.
+  buttonStates[e.button] = true;
+}, false);
+
+function handleInput() {
+  // Here is where we respond to the click
+  if (buttonStates[LEFT_BUTTON]) {
+    player.attacking = true;
+    delete buttonStates[LEFT_BUTTON];
+  }
+};
+```
+
+Now we know about the input and can consider it in the `update`
+function, knowing that it will adhere to the rest of the game rules.
+
+```js
+function update() {
+  // Check for collisions, states, whatever else is needed
+
+  // If after that the player can still attack, do it!
+  if (player.attacking && player.canAttack()) {
+    player.attack();
+  }
+};
+```
+
+Lastly, once everything has been computed, it's time to redraw the screen!
+In DOM-land, the browser handles this heaving lifting. But when using
+`<canvas>` it's necessary to manually redraw whenever something
+happens (which is usually every single frame!).
+
+```js
+function render() {
+  // First erase everything, something like:
+  context.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  // Draw the player (and whatever else you need)
+  context.drawImage(
+    player.getImage(),
+    player.x, player.y
+  );
+};
+```
+
+## Time-Based Modeling
+
+Time-based modeling is the concept of moving sprites based on the amount of
+elapsed time since the last frame update. This technique allows your game to run
+as fast as possible while ensuring that sprites move at consistent speeds.
+
+In order to use time-based modeling we need to capture the elapsed time
+since the last frame was drawn. We'll need to augment our game loop's
+`update()` function to track this.
+
+```js
+function update() {
+
+  // NOTE: You'll need to initially seed this.lastUpdate
+  // with the current time when your game loop starts
+  // this.lastUpdate = Date.now();
+
+  // Calculate elapsed time since last frame
+  var now = Date.now();
+  var elapsed = (now - this.lastUpdate);
+  this.lastUpdate = now;
+
+  // Do stuff with elapsed
+
+};
+```
+
+Now that we have the elapsed time we can calculate how far a given sprite
+should move each frame. First, we'll need to keep track of a few things on a
+sprite object: Current position, speed and direction.
+
+```js
+var Sprite = function() {
+
+  // The sprite's position relative to the top left of the game world
+  this.position = {x: 0, y: 0};
+
+  // The sprite's direction. A positive x value indicates moving to the right
+  this.direction = {x: 1, y: 0};
+
+  // How many pixels the sprite moves per second
+  this.speed = 50;
+};
+```
+
+With these variables in mind here's how we'd move an instance of the above
+sprite class using time-based modeling:
+
+```js
+// Determine how far this sprite will move this frame
+var distance = (sprite.speed / 1000) * elapsed;
+
+// Apply the movement distance to the sprite's current position
+// taking into account its direction
+sprite.position.x += (distance * sprite.direction.x);
+sprite.position.y += (distance * sprite.direction.y);
+```
+
+Note that the `direction.x` and `direction.y` values
+should be __normalized__ which means they should always fall between
+`-1` and `1`.
+
+## Controls
+
+Controls have been possibly the biggest stumbling block while developing
+**Onslaught! Arena**. The very first demo only supported the keyboard;
+players moved the main character around the screen with the arrow keys and fired
+in the direction he was facing with the space bar. While somewhat intuitive
+and easy to grasp, this made the game almost unplayable at more difficult levels.
+With dozens of enemies and projectiles flying at the player at any given time,
+it's imperative to be able to weave between bad guys __while__ firing in
+any which direction.
+
+In order to compare with similar games in its genre we added mouse support to
+control a targeting reticle, which the character would use to aim his attacks.
+The character could still be moved with the keyboard, but after this change he
+could simultaneously fire in any full 360-degree direction. Hardcore players
+appreciated this feature but it had the unfortunate side effect of frustrating
+trackpad users.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bk4AqwaTrnz9aEZH1t7a.png", alt="Onslaught! Arena controls modal (deprecated)", width="640", height="480" %}
+  <figcaption>An old controls or "how to play" modal in Onslaught! Arena.</figcaption>
+</figure>
+
+To accommodate trackpad users, we brought back arrow key controls, this time
+to allow firing in the pressed direction(s). While we felt that we were catering
+to all types of players, we were also unknowingly introducing too much complexity
+to our game. To our surprise, we'd later hear that some players weren't aware of
+the optional mouse (or keyboard!) controls for attacking, despite tutorial modals,
+which were largely ignored.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eyMPfBdlgrALf5ylwafO.png", alt="Onslaught! Arena controls tutorial", width="640", height="480" %}
+  <figcaption>Players mostly ignore the tutorial overlay; they'd rather play and have fun!</figcaption>
+</figure>
+
+We also are fortunate to have some European fans, but we've heard frustrations
+from them that they may not have typical QWERTY keyboards and are unable to use
+the WASD keys for directional movement. Left-handed players have expressed similar
+complaints.
+
+With this complex control scheme that we've implemented, there's also the
+problem of playing on mobile devices. Indeed, one of our most common requests is
+to make **Onslaught! Arena** available on Android, iPad and other
+touch devices (where there is no keyboard). One of HTML5's core strengths is its
+portability, so getting the game onto these devices is definitely doable, we just
+have to solve the many problems (most notably, controls and performance).
+
+To address these many issues, we began playing with a single-input method of
+gameplay that involves only mouse (or touch) interaction. Players click or touch
+the screen and the main character walks towards the pressed location, automatically
+attacking the nearest bad guy. The code looks something like this:
+
+```js
+// Find the nearest hostile target (if any) to the player
+var player = this.getPlayerObject();
+var hostile = this.getNearestHostile(player);
+if (hostile !== null) {
+  // Found one! Shoot in its direction
+  var shoot = hostile.boundingBox().center().subtract(
+    player.boundingBox().center()
+  ).normalize();
+}
+
+// Move towards where the player clicked/touched
+var move = this.targetReticle.position.clone().subtract(
+  player.boundingBox().center()
+).normalize();
+var distance = this.targetReticle.position.clone().subtract(
+  player.boundingBox().center()
+).magnitude();
+
+// Prevent jittering if the character is close enough
+if (distance < 3) {
+  move.zero();
+}
+
+// Move the player
+if ((move.x !== 0) || (move.y !== 0)) {
+  player.setDirection(move);
+}
+```
+
+Removing the additional factor of having to aim at enemies can make the game
+easier in some situations, but we feel that making things simpler for the player
+has many advantages. Other strategies emerge, such as having to position the
+character close to dangerous enemies to target them, and the ability to support
+touch devices is invaluable.
+
+## Audio
+
+Among controls and performance, one of our biggest issues while developing
+**Onslaught! Arena** was HTML5's `<audio>` tag.
+Probably the worst aspect is the latency: in almost all browsers there's a delay
+between calling `.play()` and the sound actually playing. This can
+ruin a gamer's experience, especially when playing with a fast-paced game like ours.
+
+Other problems include [the "progress" event failing to fire](http://code.google.com/p/chromium/issues/detail?id=59372), which could cause the game's loading flow to hang indefinitely.
+For these reasons, we adopted what we call a "fall-forward" method, where if Flash
+fails to load we switch to HTML5 Audio. The code looks something like this:
+
+```js
+/*
+This example uses the SoundManager 2 library by Scott Schiller:
+http://www.schillmania.com/projects/soundmanager2/
+*/
+
+// Default to sm2 (Flash)
+var api = "sm2";
+
+function initAudio (callback) {
+  switch (api) {
+    case "sm2":
+      soundManager.onerror = (function (init) {
+        return function () {
+          api = "html5";
+          init(callback);
+        };
+      }(arguments.callee));
+      break;
+    case "html5":
+      var audio = document.createElement("audio");
+
+      if (
+        audio
+        && audio.canPlayType
+        && audio.canPlayType("audio/mpeg;")
+      ) {
+        callback();
+      } else {
+        // No audio support :(
+      }
+      break;
+  }
+};
+```
+
+It may also be important for a game to support browsers that will not play MP3
+files (such as Mozilla Firefox). If this is the case, support can be detected
+and switched to something like [Ogg Vorbis](http://www.vorbis.com/),
+with code like this:
+
+```js
+/*
+Note: you could instead use "new Audio()" here,
+but the client will throw an error if it doesn't support Audio,
+which makes using "document.createElement" a safer approach.
+*/
+
+var audio = document.createElement("audio");
+
+if (audio && audio.canPlayType) {
+  if (!audio.canPlayType("audio/mpeg;")) {
+    // Here you know you CANNOT use .mp3 files
+    if (audio.canPlayType("audio/ogg; codecs=vorbis")) {
+      // Here you know you CAN use .ogg files
+    }
+  }
+}
+```
+
+## Saving data
+
+You can't have an arcade-style shoot 'em up without high scores! We knew we'd
+need some of our game data to persist, and while we could have used something
+old-hat like cookies, we wanted to dig into the fun new HTML5 technologies.
+There is certainly no shortage of options, including Local storage, Session
+storage and Web SQL Databases.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IPTRQYRzyNhIj7RUh6bi.png", alt="ALT_TEXT_HERE", width="640", height="480" %}
+  <figcaption>High scores are saved, as well as your place in the game after defeating each boss.</figcaption>
+</figure>
+
+We decided to use `localStorage` since it's new, awesome and easy
+to use. It supports saving basic key/value pairs which is all our simple game
+needed. Here's a straightforward example of how to use it:
+
+```js
+if (typeof localStorage == "object") {
+  localStorage.setItem("foo", "bar");
+  localStorage.getItem("foo"); // Value is "bar"
+  localStorage.removeItem("foo");
+  localStorage.getItem("foo"); // Value is now null
+}
+```
+
+There are some "gotchas" to be aware of. No matter what you pass in, values
+are stored as strings, which can lead to some unexpected results:
+
+```js
+localStorage.setItem("foo", false);
+typeof localStorage.getItem("foo"); // Value is "false" (a string literal)
+if (localStorage.getItem("foo")) {
+  // It's true!
+}
+
+// Don't pass objects into setItem
+localStorage.setItem("bar", {"key": "value"});
+localStorage.getItem("bar"); // Value is "[object Object]" (a string literal)
+
+// JSON stringify and parse when dealing with localStorage
+localStorage.setItem("json", JSON.stringify({"key": "value"}));
+typeof localStorage.getItem("json"); // string
+JSON.parse(localStorage.getItem("json")); // {"key": "value"}
+```
+
+## Summary
+
+HTML5 is amazing to work with. Most implementations handle everything a game
+developer needs, from graphics to saving the game state. While there are some
+growing pains (such as `<audio>` tag woes), browser developers
+are moving quickly and with things already as great as they are, the future
+looks bright for games built on HTML5.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/M8oTzwUH9IhRugl8f6sG.png", alt="Onslaught! Arena with a hidden HTML5 logo", width="128", height="128" %}
+  <figcaption>You can get an HTML5 shield by typing "html5" when playing Onslaught! Arena.</figcaption>
+</figure>
\ No newline at end of file
diff --git a/src/site/content/en/blog/open-web-docs/index.md b/src/site/content/en/blog/open-web-docs/index.md
new file mode 100644
index 00000000000..7f726a2215e
--- /dev/null
+++ b/src/site/content/en/blog/open-web-docs/index.md
@@ -0,0 +1,41 @@
+---
+title: Introducing Open Web Docs
+subhead: >
+  A collective project between Google, Microsoft, Mozilla, Coil, W3C, Samsung,
+  and Igalia to support the creation and maintenance of strategic web platform
+  documentation.
+description: >
+  A collective project between Google, Microsoft, Mozilla, Coil, W3C, Samsung,
+  and Igalia to support the creation and maintenance of strategic web platform
+  documentation.
+authors:
+  - robertnyman
+date: 2021-01-25
+tags: 
+  - blog
+---
+
+High-quality documentation for web platform technologies is a critically
+important component of our shared, open digital infrastructure. Today, I'm
+excited to publicly introduce [Open Web Docs][home], a collective project
+between Google, Microsoft, Mozilla, Coil, W3C, Samsung, and Igalia. It is
+designed to support a community of technical writers around strategic creation
+and long-term maintenance of web platform technology documentation that is open
+and inclusive for all. 
+
+This is not a new docs platform: Open Web Docs is instead working closely with
+existing platforms, and its current priority is contributions to [MDN Web
+Docs][mdn]. It was created to ensure the long-term health of web platform
+documentation on de facto standard resources, independently of any single vendor
+or organization. Through full-time staff, community management, and Open Web
+Docs' network of partner organizations, it enables these resources to better
+maintain and sustain documentation of core web platform technologies. Rather
+than create new documentation sites, Open Web Docs is committed to improving
+existing platforms through our contributions. 
+
+Head over to [Open Web Docs][home] and the [launch post and FAQ][launch]
+to learn more!
+
+[home]: https://opencollective.com/open-web-docs
+[mdn]: https://developer.mozilla.org/
+[launch]: https://opencollective.com/open-web-docs/updates/introducing-open-web-docs
\ No newline at end of file
diff --git a/src/site/content/en/blog/opensooq-case-study/hero.jpg b/src/site/content/en/blog/opensooq-case-study/hero.jpg
deleted file mode 100644
index 0b53e31be05..00000000000
Binary files a/src/site/content/en/blog/opensooq-case-study/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/opensooq-case-study/index.md b/src/site/content/en/blog/opensooq-case-study/index.md
index 5877b951d38..2d26bd7b4bf 100644
--- a/src/site/content/en/blog/opensooq-case-study/index.md
+++ b/src/site/content/en/blog/opensooq-case-study/index.md
@@ -6,7 +6,7 @@ authors:
 date: 2019-07-03
 # Add an updated date to your post if you edit in the future.
 # updated: 2019-06-27
-hero: hero.jpg
+hero: image/admin/AxbQe1JfE7WXPUzhFw9I.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -16,8 +16,8 @@ description: |
   compelling marketplace progressive web app.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - e-commerce
-  - reliable
+  # - e-commerce
+  # - reliable
   - case-study
   - performance
   - progressive-web-apps
@@ -36,15 +36,13 @@ To serve its customers with a consistently better experience across all platform
 
 OpenSooq's three in-house developers were able to build a full-featured PWA with [React](https://reactjs.org/) and [webpack](https://webpack.js.org/) in just two and a half months.
 
-To ensure that the site would be fast and easily indexable by search engines, the team chose to implement server-side rendering. With almost 28% of their users accessing the PWA on patchy 2G or 3G networks, it was critical that users trust the experience to work, regardless of network constraints. So the team implemented an offline experience using [service workers](/service-workers-cache-storage) and a [cache-first-then-network strategy](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_first_cache_falling_back_to_network). They also used the [PRPL pattern](/apply-instant-loading-with-prpl/?hl=en) to give their users instant loading.
+To ensure that the site would be fast and easily indexable by search engines, the team chose to implement server-side rendering. With almost 28% of their users accessing the PWA on patchy 2G or 3G networks, it was critical that users trust the experience to work, regardless of network constraints. So the team implemented an offline experience using [service workers](/service-workers-cache-storage) and a [cache-first-then-network strategy](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network). They also used the [PRPL pattern](/apply-instant-loading-with-prpl/?hl=en) to give their users instant loading.
 
-By adopting these best practices, the team was able to cut the average page load time ([Time to Interactive](/interactive)) from 4 seconds to less than 2 seconds. And they used [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to make sure the site _stayed_ that fast. Those efforts helped OpenSooq hit over 1.8 billion pageviews a month.
+By adopting these best practices, the team was able to cut the average page load time ([Time to Interactive](/tti/)) from 4 seconds to less than 2 seconds. And they used [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to make sure the site _stayed_ that fast. Those efforts helped OpenSooq hit over 1.8 billion pageviews a month.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="lh-performance.png" alt="A screenshot of the Lighthouse performance metrics for the OpenSooq PWA.">
-  <figcaption class="w-figcaption">
-    OpenSooq's Lighthouse performance metrics.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/ItUJANptPfn2KooyDyq4.png", alt="A screenshot of the Lighthouse performance metrics for the OpenSooq PWA.", width="800", height="509" %}
+  <figcaption>OpenSooq's Lighthouse performance metrics.</figcaption>
 </figure>
 
 <blockquote>
@@ -58,11 +56,9 @@ By adopting these best practices, the team was able to cut the average page load
 
 ## Improving re-engagement
 
-<figure class="w-figure w-figure--inline-right">
-  <img class="w-screenshot" src="notifications.png" alt="A smartphone displaying OpenSooq notifications." style="max-width: 284px;">
-  <figcaption class="w-figcaption">
-    OpenSooq's meaningful user notifications.
-  </figcaption>
+<figure data-float="right">
+  {% Img src="image/admin/U97z7PSx8CgKACjMnLkO.png", alt="A smartphone displaying OpenSooq notifications.", width="284", height="549" %}
+  <figcaption>OpenSooq's meaningful user notifications.</figcaption>
 </figure>
 
 Having built a performant and reliable experience, the OpenSooq team wanted to make sure their users stayed engaged with the product. To do that, they enabled users to install the [PWA to their home screen](https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile) and added support for [meaningful notifications](https://developers.google.com/web/fundamentals/push-notifications/). This allowed the site to notify buyers about seller interaction on queries and sellers about ad activation and expiration.
@@ -73,7 +69,7 @@ These improvements increased the monthly active users of OpenSooq's web experien
 
 After just a few weeks of effort, OpenSooq created a 23 KB, full-featured PWA that delivers a consistent experience to users across all platforms and browsers. And because it's easy to update features on the web, the team has gone PWA-first by launching and testing new features and user flows on their PWA before rolling them out to other platforms.
 
-OpenSooq is now working on adding a [native install prompt](https://developers.google.com/web/fundamentals/app-install-banners/native) and integrating the PWA with [accelerated mobile pages (AMP)](https://amp.dev/). These enhancements will further speed up page loads and make the transition to the native app as seamless as possible. By building on the foundation of their initial development effort, the OpenSooq team will continue giving their users the best possible experience.
+OpenSooq is now working on adding a [platform-specific install prompt](https://developer.chrome.com/blog/app-install-banners-native/) and integrating the PWA with [accelerated mobile pages (AMP)](https://amp.dev/). These enhancements will further speed up page loads and make the transition to the platform-specific app as seamless as possible. By building on the foundation of their initial development effort, the OpenSooq team will continue giving their users the best possible experience.
 
 <blockquote>
   <p>
diff --git a/src/site/content/en/blog/opensooq-case-study/lh-performance.png b/src/site/content/en/blog/opensooq-case-study/lh-performance.png
deleted file mode 100755
index f79a0838ab0..00000000000
Binary files a/src/site/content/en/blog/opensooq-case-study/lh-performance.png and /dev/null differ
diff --git a/src/site/content/en/blog/opensooq-case-study/notifications.png b/src/site/content/en/blog/opensooq-case-study/notifications.png
deleted file mode 100755
index b124ec86f2a..00000000000
Binary files a/src/site/content/en/blog/opensooq-case-study/notifications.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative11.jpg b/src/site/content/en/blog/optimize-cls/Optimize-Cumulative11.jpg
deleted file mode 100644
index 2ad2d54c9f8..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative11.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative12.jpg b/src/site/content/en/blog/optimize-cls/Optimize-Cumulative12.jpg
deleted file mode 100644
index cfc9d8f2e31..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative12.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative3.png b/src/site/content/en/blog/optimize-cls/Optimize-Cumulative3.png
deleted file mode 100644
index e1264f8be94..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative3.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative6.png b/src/site/content/en/blog/optimize-cls/Optimize-Cumulative6.png
deleted file mode 100644
index 004eb1a0a23..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative6.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative9.png b/src/site/content/en/blog/optimize-cls/Optimize-Cumulative9.png
deleted file mode 100644
index c02253a4066..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/Optimize-Cumulative9.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/hero.png b/src/site/content/en/blog/optimize-cls/hero.png
deleted file mode 100644
index bda9b2cedd3..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/index.md b/src/site/content/en/blog/optimize-cls/index.md
index c7fd8a8296f..4aba9cdd53e 100644
--- a/src/site/content/en/blog/optimize-cls/index.md
+++ b/src/site/content/en/blog/optimize-cls/index.md
@@ -2,9 +2,11 @@
 title: Optimize Cumulative Layout Shift
 subhead: Learn how to avoid sudden layout shifts to improve user-experience
 authors:
+  - tunetheweb
   - addyosmani
 date: 2020-05-05
-hero: hero.png
+updated: 2023-05-04
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
 description: |
   Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
 alt: Layout shifts can suddenly push the content you are reading or are about to click further down the page, leading to a poor user-experience. Reserving space for dynamic content causing layout shifts leads to a more delightful user experience.
@@ -16,64 +18,156 @@ tags:
 
 "I was about to click that! Why did it move? 😭"
 
+[Cumulative Layout Shift (CLS)](/cls/) is one of the three [Core Web Vitals](/vitals/#core-web-vitals) metrics, and it measures the instability of content by summing shift scores across layout shifts that don't occur within 500 milliseconds of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.
+
 Layout shifts can be distracting to users. Imagine you've started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news, or trying to click those 'Search' or 'Add to Cart' buttons. Such experiences are visually jarring and frustrating. They're often caused when visible elements are forced to move because another element was suddenly added to the page or resized.
 
-[Cumulative Layout Shift](/cls) (CLS) - a [Core Web Vitals](/vitals) metric, measures the instability of content by summing shift scores across layout shifts that don't occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.
+To provide a good user experience, **sites should strive to have a CLS of 0.1 or less for at least 75% of page visits.**
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg",
+        alt="Good CLS values are under 0.1, poor values are greater than 0.25 and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
 
-In this guide, we'll cover optimizing common causes of layout shifts.
+Unlike the other Core Web Vitals, which are time-based values measured in seconds or milliseconds, the CLS score is a unitless value based on a calculation of how much content is shifting and by how far.
 
-<picture>
-  <source srcset="../vitals/cls_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="../vitals/cls_4x3.svg"
-      alt="Good CLS values are under 0.1, poor values are greater than 0.25
-            and anything in between needs improvement">
-</picture>
+In this guide, we'll cover optimizing common causes of layout shifts.
 
 The most common causes of a poor CLS are:
 
-*   Images without dimensions
-*   Ads, embeds, and iframes without dimensions
-*   Dynamically injected content
-*   Web Fonts causing FOIT/FOUT
-*   Actions waiting for a network response before updating DOM
+- Images without dimensions
+- Ads, embeds, and iframes without dimensions
+- Dynamically injected content such as ads, embeds, and iframes without dimensions
+- Web fonts
+
+{% Aside %}
+  For a visual overview of some of the content presented in this guide, see the Optimize for Core Web Vitals video from Google I/O 2020:
+
+  {% YouTube id="AQqFZ5t8uNc", startTime='88', width=2482, height=1396 %}
+{% endAside %}
+
+## Understanding where your shifts are coming from
+
+Before we start looking at solutions to common CLS issues, it's always important to understand your CLS score and where the shifts are coming from. A big part of the problem is understanding your CLS score—the fix afterwards is often the easier part!
+
+### CLS in lab tools versus field
+
+It is quite common to hear developers think the CLS measured by the [Chrome UX Report (CrUX)](https://developer.chrome.com/docs/crux/) is incorrect as it does not match the CLS they measure using Chrome DevTools or other lab tools. Web performance lab tools like Lighthouse may not show the full CLS of a page as they typically do a simple load of the page to measure some web performance metrics and provide some guidance (though [Lighthouse user flows](/lighthouse-user-flows/) do allow you measure beyond the default page load audit).
+
+CrUX is the official dataset of the Web Vitals program, and for that, CLS is measured throughout the full life of the page and not just during the initial page load that lab tools typically measure.
+
+Layout shifts are very common during page load, as all the necessary resources are fetched to initially render the page, but layout shifts can also happen after the initial load. Many post-load shifts may occur [as the result of a user interaction](/cls/#user-initiated-layout-shifts) and therefore will be excluded from the CLS score as they are _expected_ shifts—as long as they occur within 500 milliseconds of that interaction.
+
+However, other post-load shifts that are unexpected by the user may be included where there was no qualifying interaction—for example, if you scroll down the page and lazy-loaded content is loaded and that causes shifts. Other common causes of post-load CLS are on interactions of transitions, for example on Single Page Apps, which take longer than the 500 millisecond grace period.
+
+[PageSpeed Insights](https://pagespeed.web.dev/) will show both the user-perceived CLS from a URL where it exists in the "Discover what your real users are experiencing" section, and also the lab-based load CLS in the "Diagnose performance issues" section beneath. If you see a difference between these, this is likely caused by post-load CLS.
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/2eO9BsIb8Gx6kU4Zvbqa.png", alt="Screenshot of PageSpeed Insights showing URL-level data highlighting the real user CLS which is considerably larger than the Lighthouse CLS", width="800", height="450" %}
+
+{% Aside important %}
+  PageSpeed Inights will show URL-level data where it exists, and attempt to fall back to origin-level data where this does not exist. Always check what data is showing to ensure you do not waste time trying to track down a CLS issue that actually exists on other pages on your origin! In the above example you can see this is URL-level data as shown in the top right of the image.
+{% endAside %}
+
+### Identifying load CLS issues
+
+When the CrUX and Lighthouse CLS scores of PageSpeed Insights are broadly in line, this usually indicates there is a load CLS issue that was detected by Lighthouse. In this case Lighthouse will help with two audits to provide more information on images causing CLS due to missing width and height, and also list all the elements that shifted for the page load along with their CLS contribution. You can see these audits by filtering on the CLS audits:
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/2C3v6dGwPx2yFyYpVdue.png", alt="Lighthouse Screenshot showing the CLS audits providing more information to help you identify and address CLS issues", width="800", height="544" %}
+
+{% Aside important %}
+  Lighthouse will identify the elements that were shifted, but often these are the ones _impacted_ rather than the elements _causing_ the CLS. For example, if a new element is inserted into the DOM, the elements that are beneath it will show in this audit, but the root cause is the addition of the new element above. However, the shifted element should be sufficient to help you identify and resolve the root cause.
+{% endAside %}
+
+The [Performance panel](https://developer.chrome.com/docs/devtools/evaluate-performance/) in DevTools also highlights layout shifts in the **Experience** section. The **Summary** view for a `Layout Shift` record includes the cumulative layout shift score as well as a rectangle overlay showing the affected regions. This is particularly helpful to get more detail on load CLS issues since this is easily replicated with a reload performance profile.
+
+<figure>
+  {% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Layout Shift records being displayed in the Chrome DevTools performance panel when expanding the Experience section", width="800", height="438" %}
+  <figcaption>After recording a new trace in the Performance panel, the <b>Experience</b> section of the results is populated with a red-tinted bar displaying a <code>Layout Shift</code> record. Clicking the record allows you to drill down into impacted elements (e.g. note the moved from/to entries).</figcaption>
+</figure>
+
+### Identifying post-load CLS issues
+
+When the CrUX and Lighthouse CLS scores of PageSpeed Insights are not in line, then this likely indicates post-load CLS. Without field data helping to identify the reason (that we will cover next), these can be more tricky to track down.
+
+The [Web Vitals Chrome extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) can be used to monitor CLS as you interact with a page, either in a heads up display, or in the console—where you can [get more details above the elements shifted](/debug-cwvs-with-web-vitals-extension/#cls-debug-information).
+
+As an alternative to using the extension, you can browse your web page while [recording layout shifts using a Performance Observer](/cls/#measure-layout-shifts-in-javascript) pasted into the console.
+
+Once you are monitoring shifts you can try to replicate any post-load CLS issues. Scolling down a page is a common place for CLS to occur if content is lazy loaded and does not have space reserved for it. Content shifting on hover is another common post-load CLS cause. Both of these "interactions" are ineligible for the 500 milliseconds grace period as CLS during these periods are seen as being "unexpected shifts", despite the user interaction, as they should not cause content to shift. Other interactions—such as clicks or taps—do have that grace period, but a common reason for CLS in these cases is taking longer than that 500 milliseconds to move or add content.
+
+We have a more detailed posted on [debugging layout shifts](/debug-layout-shifts/) for more information.
+
+Once you have identified any common causes of CLS, the [timespans user flow mode of Lighthouse](lighthouse-user-flows/#timespans) can also be used to ensure typical user flows do not regress by introducing layout shifts.
+
+### Measuring CLS elements in the field
+
+It is also recommended to monitor CLS in the field. This can be used to measure both the CLS and—perhaps more importantly—the elements impacting your CLS score in the field and feed them back to your analytics service.
+
+This can be invaluable in pointing you in the right direction of where the issue is as it can remove much of the guess work discribed above when you are trying to understand under what circumstances CLS is occuring. Again, be aware that this will measure the elements that shifted, rather than the root causes of those shifts, but this is often sufficient to identify the cause or at least to narrow down the problem.
+
+Measuring CLS in the field can also be used to rank the issues in order of importance based on most frequently experienced issues.
+
+The [attribution functionality of the `web-vitals` library](https://github.com/GoogleChrome/web-vitals#send-attribution-data) allows this additional information to be collected. Read our [Debug performance in the field](/debug-performance-in-the-field/) post for more information on how to do this. Other RUM providers have also started collecting and presenting this data similarly.
+
+{% Aside %}
+  RUM solutions that measure CLS in the field, including the `web-vitals` library, may show differences that CrUX data as explained in the [Why is CrUX data different from my RUM data?](crux-and-rum-differences/) post. In particular, CLS that happens in iframes is not measurable from Web APIs but is visible to the user, and is therefore included in CrUX. So while field data can be invaluable for identifying CLS issues, be aware that it may be incomplete in certain scenarios.
+{% endAside %}
+
+## Common causes of CLS
+
+Once you have identified the causes of CLS, you can start working on fixing the issues. In this section we will show some of the more common reasons for CLS, and what you can do to avoid them.
 
-## Images without dimensions 🌆
+### Images without dimensions
 
-**Summary:** Always include `width` and `height` size attributes on your images and video elements. Alternatively, reserve the required space with [CSS aspect ratio boxes](https://css-tricks.com/aspect-ratio-boxes/). This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
+Always include `width` and `height` size attributes on your images and video elements. Alternatively, reserve the required space with [CSS `aspect-ratio`](/aspect-ratio/) or similar. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-image-dimensions.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/image-dimensions.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/image-dimensions.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
       Images without width and height specified.
     </figcaption>
   </figure>
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-image-dimensions-fixed.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/image-dimensions-fixed.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/image-dimensions-fixed.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
       Images with width and height specified.
     </figcaption>
   </figure>
 
-<figure class="w-figure">
-  <img src="Optimize-Cumulative3.png " alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift after setting dimensions on images">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift after setting dimensions on images", width="800", height="148" %}
+  <figcaption>
     Lighthouse 6.0 impact of setting image dimensions on CLS.
   </figcaption>
 </figure>
 
-### History
+#### History of `width` and `height` attributes on images
 
 In the early days of the web, developers would add `width` and `height` attributes to their `<img>` tags to ensure sufficient space was allocated on the page before the browser started fetching images. This would minimize reflow and re-layout.
 
-
 ```html
 <img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
 ```
@@ -82,7 +176,6 @@ You may notice `width` and `height` above do not include units. These "pixel" di
 
 When [Responsive Web Design](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) was introduced, developers began to omit `width` and `height` and started using CSS to resize images instead:
 
-
 ```css
 img {
   width: 100%; /* or max-width: 100%; */
@@ -96,41 +189,42 @@ This is where aspect ratio comes in. The aspect ratio of an image is the ratio o
 
 This means if we know one of the dimensions, the other can be determined. For a 16:9 aspect ratio:
 
-*   If puppy.jpg has a 360px height, width is 360 x (16 / 9) = 640px
-*   If puppy.jpg has a 640px width, height is 640 x (9 / 16) = 360px
+- If puppy.jpg has a 360px height, width is 360 x (16 / 9) = 640px
+- If puppy.jpg has a 640px width, height is 640 x (9 / 16) = 360px
 
 Knowing the aspect ratio allows the browser to calculate and reserve sufficient space for the height and associated area.
 
+#### Modern best practice for setting image dimensions
 
-### Modern best practice
-
-Modern browsers now set the default aspect ratio of images based on an image's width and height attributes so it's valuable to set them to prevent layout shifts. Thanks to the CSS Working Group, developers just need to set `width` and `height` as normal:
+Modern browsers now set the default aspect ratio of images based on an image's `width` and `height` attributes so developers just need to set these, and include the above CSS, to prevent layout shifts:
 
 ```html
-<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<!-- set a 640:360 i.e a 16:9 aspect ratio -->
 <img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
 ```
 
-…and the [UA stylesheets](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets) of all browsers add a [default aspect ratio](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images) based on the element's existing `width` and `height` attributes:
+All browsers will then add a [default aspect ratio](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images) based on the element's existing `width` and `height` attributes.
+
+This calculates an aspect ratio based on the `width` and `height` attributes before the image has loaded. It provides this information at the very start of layout calculation. As soon as an image is told to be a certain width (for example `width: 100%`), the aspect ratio is used to calculate the height.
 
+This `aspect-ratio` value is calculated by major browsers as the HTML is processed, rather than with a default User Agent stylesheet (see [this post for a deep dive into why](https://jakearchibald.com/2022/img-aspect-ratio/#width--height-presentational-hints)), so the value is displayed a little differently. For example, Chrome displays it like this in the Styles section of the Element panel:
 
 ```css
-img {
-    aspect-ratio: attr(width) / attr(height);
+img[Attributes Style] {
+  aspect-ratio: auto 640 / 360;
 }
 ```
 
-This calculates an aspect ratio based on the `width` and `height` attributes before the image has loaded. It provides this information at the very start of layout calculation. As soon as an image is told to be a certain width (for example `width: 100%`), the aspect ratio is used to calculate the height.
+Safari behaves similarly by using a `HTML Attributes` style source. Firefox does not currently display this calculated `aspect-ratio` at all in it's Inspector panel, but does use it for layout.
 
-Tip: If you're having a hard time understanding aspect ratio, a handy [calculator](https://aspectratiocalculator.com/16-9.html) is available to help.
+The `auto` part of the above code is important as it causes the `640 / 360` to be overriden with the image dimensions once the image is downloaded. If the image dimensions are different this will still cause some layout shift after the image loads, but this ensures the image aspect ratio is still used ultimately when it becomes available—as it was in the past—in case the HTML is incorrect. Plus, the shift is likely to be a lot smaller than the 0x0 default image size when dimensions are not provided!
 
-The above image aspect ratio changes have shipped in [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) and [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891), and are coming to [WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari).
+Tip: If you're having a hard time understanding aspect ratio, a handy [calculator](https://aspectratiocalculator.com/16-9.html) is available to help.
 
 For a fantastic deep-dive into aspect ratio with further thinking around responsive images, see [jank-free page loading with media aspect ratios](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/).
 
 If your image is in a container, you can use CSS to resize the image to the width of this container. We set `height: auto;` to avoid the image height being a fixed value (for example `360px`).
 
-
 ```css
 img {
   height: auto;
@@ -138,216 +232,167 @@ img {
 }
 ```
 
-**What about responsive images?**
+#### What about responsive images?
 
 When working with [responsive images](/serve-responsive-images), `srcset` defines the images you allow the browser to select between and what size each image is. To ensure `<img>` width and height attributes can be set, each image should use the same aspect ratio.
 
 ```html
-<img width="1000" height="1000"
-       src="puppy-1000.jpg"
-    srcset="puppy-1000.jpg 1000w,
-            puppy-2000.jpg 2000w,
-            puppy-3000.jpg 3000w"
-           alt="Puppy with balloons"/>
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="Puppy with balloons"
+/>
 ```
 
 What about [art direction](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)?
 
 Pages may wish to include a cropped shot of an image on narrow viewports with the full image displayed on desktop.
 
-
 ```html
 <picture>
-  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg">
-  <source media="(min-width: 800px)" srcset="puppy-800w.jpg">
-  <img src="puppy-800w.jpg" alt="Puppy with balloons">
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
 </picture>
 ```
 
-It's very possible these images could have different aspect ratios and browsers are still evaluating what the most efficient solution here should be, including if dimensions should be specified on all sources. Until a solution is decided on, relayout is still possible here.
+It's very possible these images could have different aspect ratios. Chrome, Firefox, and Safari now support setting `width` and `height` on the `source` children of the `picture` element:
 
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width=480 height=400/>
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width=800 height=400/>
+  <img src="puppy-800w.jpg" alt="Puppy with balloons" width=800 height=400/>
+</picture>
+```
 
-## Ads, embeds and iframes without dimensions 📢😱
+### Ads, embeds, and other late-loaded content
 
-### Advertisements
+As we have seen, images have special considerations. However, images are not the only type of content that can cause layout shifts. Ads, embeds, iframes, and other dynamically injected content can all cause content after these to shift down, increasing your CLS.
 
 Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page.
 
-During the ad lifecycle, many points can introduce layout shift:
-
-*   When a site inserts the ad container in the DOM
-*   When a site resizes the ad container with first-party code
-*   When the ad tag library loads (and resizes the ad container)
-*   When the ad fills a container (and resizes if the final ad has a different size)
-
-The good news is that it's possible for sites to follow best practices to reduce ad shift. Sites can mitigate these layout shifts by:
-
-* Statically reserve space for the ad slot.
-  * In other words, style the element before the ad tag library loads.
-  * If placing ads in the content flow, ensure shifts are eliminated by reserving the slot size. These ads _shouldn't_ cause layout shifts if loaded off-screen.
-* Take care when placing non-sticky ads near the top of the viewport.
-  * In the below example, it's recommended to move the ad to below the "world vision" logo and make sure to reserve enough space for the slot.
-* Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.
-* Eliminate shifts by reserving the largest possible size for the ad slot.
-  * This works, but it risks having a blank space if a smaller ad creative fills the slot.
-* Choose the most likely size for the ad slot based on historical data.
-
-Some sites may find collapsing the slot initially can reduce layout shifts if the ad slot is unlikely to fill. There isn't an easy way to choose the exact size each time, unless you control the ad serving yourself.
-
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-final-ads-no-dimensions.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/final_ads_no_dimensions.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/final_ads_no_dimensions.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Ads without sufficient space reserved.
-    </figcaption>
-  </figure>
+Embeddable widgets allow you to include portable web content in your page, such as videos from YouTube, maps from Google Maps, and social media posts. These widgets often aren't aware in advance just how large their contents will be. For example, in the case of a social media post, it might have an embedded image, video, multiple rows of text, or a number of other unpredictable factors. As a result, platforms offering embeds do not always reserve space for their widgets and so cause layout shifts when they finally load.
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-top-ad-after.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/top-ad-after.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/top-ad-after.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Ads with sufficient space reserved.
-    </figcaption>
-  </figure>
+The techniques for dealing with these are all similar. The major differences are how much control you have over the content that will be inserted. If this is inserted by a third-party like an ad partner, you may not know the exact size of content that will be inserted, nor be able to control any layout shifts happening within those embeds.
+
+#### Statically reserve space for late-loading content
 
-<figure class="w-figure">
-  <img src="Optimize-Cumulative6.png " alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift of reserving space for banners like ads">
-  <figcaption class="w-figcaption">
-    Lighthouse 6.0 impact of reserving space for this banner on CLS
+When placing late-loading content in the content flow, layout shifts can be avoided by reserving the space for them in the initial layout.
+
+This can be as simple as adding a `min-height` styling to reserve space or, for responsive content such as ads, using the new [`aspect-ratio`](/aspect-ratio/) CSS property in a similar manner to the way browsers automatically use this for images with dimensions provided.
+
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/ThcGvVp0RiiABpmnWz7u.svg", alt="Three mobile devices with just text content in the first device, this is shifted down in the second device, and reserving space with a placeholder as shown in the third device prevents the shift", width="1180", height="600" %}
+  <figcaption>
+    Reserving space for ads can prevent layout shifts
   </figcaption>
 </figure>
 
-#### Statically reserve space for the ad slot
+You may need to account for subtle differences in ad or placeholder sizes across form factors using media queries.
 
-Statically style slot DOM elements with the same sizes passed to your tag library. This can help ensure the library doesn't introduce layout shifts when it loads. If you don't do this, the library may change the size of the slot element after page layout.
+For content that may not have a fixed height—like ads—you may not be able to reserve the exact amount of space needed to eliminate the layout shift entirely. If a smaller ad is served, a publisher can style the (larger) container to avoid layout shifts, or choose the most likely size for the ad slot based on historical data. The downside to this approach is that it will increase the amount of blank space, so keep in mind the trade-off here.
 
-Also consider the sizes of smaller ad serves. If a smaller ad is served, a publisher can style the (larger) container to avoid layout shifts. The downside to this approach is that it will increase the amount of blank space, so keep in mind the trade-off here.
+Alternatively, set the initial size to the smallest size that will be used, and accept some level of shift for larger content. Using `min-height`, as suggested above, will allow the parent element to grow as necessary. This will not fully eliminate CLS, but will hopefully reduce the impact of it to a more managable level. The default size of an empty element is 0px which gives maximum CLS, so any size is better than that!
 
+Try to avoid collapsing the reserved space if, for example, there is no ad returned, by showing a placeholder. Removing the space set aside for elements can cause just as much CLS as inserting content!
 
-#### Avoid placing ads near the top of the viewport
+#### Avoid placing late-loading content near the top of the viewport
 
-Ads near the top of the viewport may cause a greater layout shift than those at the middle. This is because ads at the top generally have more content lower down, meaning more elements move when the ad causes a shift. Conversely, ads near the middle of the viewport may not shift as many elements as the content above it is less likely to move.
+Dynamically injected content near the top of the viewport may cause a greater layout shift than those at the middle. This is because elements inserted at the top generally have more content lower down, meaning more elements move when the late-loading content causes a shift.
 
+Conversely, dynamically injected content near the middle of the viewport may not shift as many elements as the content above it is less likely to move, but will still cause some CLS. Even content injected at the bottom of the screen will cause CLS as the content it replace is moved off-screen.
 
-### Embeds and iframes
+The ideal scenario is not to shift any other content so reserving the appropriate space is preferred. Where this is not possible, minimizing the shifts can at least reduce the impact—both to your users and your CLS scores.
 
-Embeddable widgets allow you to embed portable web content in your page (for example, videos from YouTube, maps from Google Maps, social media posts, and so on). These embeds can take a number of forms:
+#### Avoid inserting new content without a user interaction
 
-*   HTML fallback and a JavaScript tag transforming the fallback into a fancy embed
-*   Inline HTML snippet
-*   iframe embed
+You've probably experienced layout shifts due to UI that pops-in at the top or bottom of the viewport when you're trying to load a site. Similar to ads, this often happens with banners and forms that shift the rest of the page's content:
 
-These embeds often aren't aware in advance just how large an embed will be (for example, in the case of a social media post - does it have an embedded image? video? multiple rows of text?). As a result, platforms offering embeds do not always reserve enough space for their embeds and can cause layout shifts when they finally load.
+- "Sign-up to our newsletter!" (whoa, slow down! we just met!)
+- "Related content"
+- "Install our [iOS/Android] app"
+- "We're still taking orders"
+- "GDPR notice"
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-embed-iframe.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/embed-iframe.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/embed-iframe.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Embed without space reserved.
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
+      Dynamic content without space reserved.
     </figcaption>
   </figure>
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-embeds-with-dimensions.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/embeds-with-dimensions.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/embeds-with-dimensions.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Embed with space reserved.
-    </figcaption>
-  </figure>
+If you need to display these types of UI affordances, reserve sufficient space in the viewport for it in advance (for example, using a placeholder or skeleton UI) so that when it loads, it does not cause content in the page to surprisingly shift around. Alternatively, ensure the element is not part of the document flow by overlaying the content where this makes sense. See the [Best practices for cookie notices](/cookie-notice-best-practices/) post for more recommendations on these types of components.
 
-<figure class="w-figure">
-  <img src="Optimize-Cumulative9.png " alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift of reserving space for this embed on CLS">
-  <figcaption class="w-figcaption">
-    Lighthouse 6.0 impact of reserving space for this embed on CLS
-  </figcaption>
-</figure>
+In some cases adding content dynamically is an important part of user experience. For example, when loading more products to a list of items or when updating live feed content. There are several ways to avoid unexpected layout shifts in those cases:
 
-To work around this, you can minimize CLS by precomputing sufficient space for embeds with a placeholder or fallback. One workflow you can use for embeds:
+- Replace the old content with the new content within a fixed size container or use a carousel and remove the old content after the transition. Remember to disable any links and controls until the transition has completed to prevent accidental clicks or taps while the new content is coming in.
+- Have the user initiate the load of new content, so they are not surprised by the shift (for example with a "Load more" or "Refresh" button). It's recommended to prefetch the content before the user interaction so that it shows up immediately. As a reminder, [layout shifts that occur within 500 milliseconds](./cls/#user-initiated-layout-shifts) of user input are not counted towards CLS.
+- Seamlessly load the content offscreen and overlay a notice to the user that it's available (for example, with a "Scroll up" button).
 
-* Obtain the height of your final embed by inspecting it with your browser developer tools
-* Once the embed loads, the contained iframe will resize to fit so that its contents will fit.
+<figure>
+  {% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="Examples of dynamic content loading without causing unexpected layout shifts from Twitter and the Chloé website", width="800", height="458" %}
+  <figcaption>
+    Examples of dynamic content loading without causing unexpected layout shifts. Left: Live feed content loading on Twitter. Right: "Load More" example on Chloé website. Check out how the YNAP team <a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">optimized for CLS when loading more content</a>.
+  </figcaption>
+</figure>
 
-Take note of the dimensions and style a placeholder for the embed accordingly. You may need to account for subtle differences in ad/placeholder sizes between different form factors using media queries.
+{% Aside important %}
+  If content is likely to take more than 500 milliseconds—for example it requires a network fetch—then reserving the expected space within that 500 millisecond timeframe and taking the impact of any future shift up front allows you to ensure any shifts will not be included in the CLS score.
+{% endAside %}
 
-### Dynamic content 📐
+### Animations
 
-**Summary:** Avoid inserting new content above existing content, unless in response to a user interaction. This ensures any layout shifts that occur are expected.
+Changes to CSS property values can require the browser to react to these changes. A number of values trigger re-layout, paint, and composite such as `box-shadow` and `box-sizing`. Try to avoid animating these.
 
-You've probably experienced layout shifts due to UI that pops-in at the top or bottom of the viewport when you're trying to load a site. Similar to ads, this often this happens with banners and forms that shift the rest of the page's content:
+A number of CSS properties can be changed in a much more performant manner. For example, `transform` animations can be used to translate, scale, rotate, or skew without triggering a re-layout and so completely avoiding layout shifts.
 
-*   "Sign-up to our newsletter!" (whoa, slow down! we just met!)
-*   "Related content"
-*   "Install our native app"
-*   "We're still taking orders"
-*   "GDPR notice"
+When animations are instead done by changing `top` and `left` CSS properties instead of using `translate`, layout shifts occur. This happens **even when the element being moved is in it's own layer and so does not cause shifts to other elements**. Composited animations via `translate` are exempt from CLS as they cannot impact other elements. There are also other considerable performance benefits of using non-composited animations since they do no cause re-layout and therefore are much less work for the browser.
 
-  <figure class="w-figure">
-    <video controls loop muted class="w-screenshot" poster="video-related-articles-dynamic-content.jpg">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/related-articles-dynamic-content.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/optimize-cls/related-articles-dynamic-content.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Dynamic content without space reserved.
-    </figcaption>
-  </figure>
+To learn more about what CSS properties trigger layout see [High-performance animations](/animations-guide/).
 
-If you need to display these types of UI affordances, reserve sufficient space in the viewport for it in advance (for example, using a placeholder or skeleton UI) so that when it loads, it does not cause content in the page to surprisingly shift around.
+### Web fonts
 
-### Web fonts causing FOUT/FOIT 📝
+Downloading and rendering web fonts is typically handled in one of two ways before the web font is downloaded:
 
-Downloading and rendering web fonts can cause layout shifts in two ways:
+- The fallback font is swapped with the web font (FOUT—flash of unstyled text)
+- "Invisible" text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text)
 
-*   The fallback font is swapped with a new font (FOUT - flash of unstyled text)
-*   "Invisible" text is displayed until a new font is rendered (FOIT - flash of invisible text)
+It is important to understand that **both of these can cause layout shifts**. Even though the text is invisible, it is laid out using the fallback font. This means the text block using the font, and the surrounding content, shifts when the web font loads—in the exact same way as for the visible font for FOUT.
 
 The following tools can help you minimize this:
 
-* <code>[font-display](/font-display/)</code> allows you to modify the rendering behavior of custom fonts with values such as <code>auto</code>, <code>swap</code>, <code>block</code>, <code>fallback</code> and <code>optional</code>. Unfortunately, all of these values (except [optional](http://crrev.com/749080)) can cause a re-layout in one of the above ways.
-* The [Font Loading API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) can reduce the time it takes to get necessary fonts.
-
-As of Chrome 83, I can recommend the following too:
-
-* Using `<link rel=preload>` on the key web fonts: a preloaded font will have a higher chance to meet the first paint, in which case there's no layout shifting.
-* Combining `<link rel=preload>` and `font-display: optional`
-
-Read [Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts](/preload-optional-fonts/) for more details.
+- `font-display: optional` can avoid a re-layout as the web font is only used if it is available by the time of initial layout.
+- Ensure the appropriate fallback font is used. For example, using `font-family: "Google Sans", sans-serif;` will ensure the browser's `sans-serif` fallback font is used while `"Google Sans"` is loaded. Not specifying a fallback font using just `font-family: "Google Sans"` will mean the default font is used, which on Chrome is "Times"—a serif font which is a worse match than the default `sans-serif` font.
+- Minimize the size differences between the fallback font and the web font using the new `size-adjust`, `ascent-override`, `descent-override`, and `line-gap-override` APIs as detailed in the [Improved font fallbacks](https://developer.chrome.com/blog/font-fallbacks/) post.
+- The [Font Loading API](/optimize-webfont-loading/#the-font-loading-api) can reduce the time it takes to get necessary fonts.
+- Load critical web fonts as early as possible using `<link rel=preload>`. A preloaded font will have a higher chance to meet the first paint, in which case there's no layout shifting.
 
-### Animations 🏃‍♀️
+Read [Best practices for fonts](/font-best-practices/) for other font best practices.
 
-**Summary:** Prefer `transform` animations to animations of properties that trigger layout changes.
+## Reduce CLS by ensuring pages are eligible for the bfcache
 
-Changes to CSS property values can require the browser to react to these changes. A number of values trigger re-layout, paint and composite such as `box-shadow` and `box-sizing`. A number of CSS properties can be changed in a less costly manner.
+A highly effective technique for keeping CLS scores low is to ensure your web pages are eligible for the [back/forward cache](/bfcache/) (bfcache).
 
-To learn more about what CSS properties trigger layout, see [CSS Triggers](https://csstriggers.com/) and [High-performance animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/).
+The bfcache keeps pages in browsers memory for a short period after you navigate away so if you return to them, then they will be restored exactly as you left them. This means the fully loaded page is instantly available—without any shifts which may be normally seen during load due to any of the reasons above.
 
+While this does potentially still mean the initial page load encounters layout shifts, when a user goes back through pages they are not seeing the same layout shifts repeatedly. You should always aim to avoid the shifts even on the initial load, but where that is more tricky to resolve fully, you can at least reduce the impact by avoiding them on any bfcache navigations.
 
-### Developer Tools 🔧
+Back and forward navigations are common on many sites. For example, returning to a contents page, or a category page, or search results.
 
-I'm happy to share there are a number of tools available to measure and debug Cumulative Layout Shift (CLS).
+When this was rolled out to Chrome, we saw [noticeable improvements in CLS](https://twitter.com/anniesullie/status/1491399685961293828?s=20&t=Qj_nzSRZD0_c-HaAnfr98Q).
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse) [6.0](https://github.com/GoogleChrome/lighthouse/releases) and above include support for measuring CLS in a lab setting. This release will also highlight the nodes that cause the most layout shifting.
-
-![Lighthouse 6.0 includes support for measuring CLS in the metrics section](Optimize-Cumulative11.jpg "image_tooltip")
-
-The [Performance panel](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance) in DevTools highlights layout shifts in the **Experience** section as of Chrome 84. The **Summary** view for a `Layout Shift` record includes the cumulative layout shift score as well as a rectangle overlay showing the affected regions.
-
-<figure class="w-figure">
-  <img src="Optimize-Cumulative12.jpg" alt="Layout Shift records being displayed in the Chrome DevTools performance panel when expanding the Experience section">
-  <figcaption class="w-figcaption">
-After recording a new trace in the Performance panel, the <b>Experience</b> section of the results is populated with a red-tinted bar displaying a <code>Layout Shift</code> record. Clicking the record allows you to drill down into impacted elements (e.g. note the moved from/to entries).
-  </figcaption>
-</figure>
+The bfcache is used by default by all browsers, but some sites are ineligible for the bfcache due to a variety of reasons. Read [the bfcache article](/bfcache/) for more details on how to test and identify any issues preventing bfcache usage to ensure you are making full use of this feature to help your overall CLS score for your site.
 
-Measuring real-world CLS aggregated at an origin-level is also possible using the [Chrome User Experience Report](/chrome-ux-report-bigquery/). CrUX CLS data is available via BigQuery and a [sample query](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql) to look at CLS performance is available to use.
+## Conclusion
 
-That's it for this guide. I hope it helps keep your pages just a little less shifty :)
+There are a number of techniques to identify and improve CLS as detailed above. There are allowances built into Core Web Vitals, so even if you cannot eliminate CLS completely, using some of these techniques should allow you to reduce the impact. This will be better for your users and hopefully allow you to stay within those limits.
 
-_With thanks to Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes and Gilberto Cocchi for their helpful reviews._
+That's it for this guide. We hope it helps keep your pages just a little less shifty :)
diff --git a/src/site/content/en/blog/optimize-cls/video-embed-iframe.jpg b/src/site/content/en/blog/optimize-cls/video-embed-iframe.jpg
deleted file mode 100644
index e4a23b26d50..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-embed-iframe.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-embeds-with-dimensions.jpg b/src/site/content/en/blog/optimize-cls/video-embeds-with-dimensions.jpg
deleted file mode 100644
index de99714ddfb..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-embeds-with-dimensions.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-final-ads-no-dimensions.jpg b/src/site/content/en/blog/optimize-cls/video-final-ads-no-dimensions.jpg
deleted file mode 100644
index 3fd412ade50..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-final-ads-no-dimensions.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-image-dimensions-fixed.jpg b/src/site/content/en/blog/optimize-cls/video-image-dimensions-fixed.jpg
deleted file mode 100644
index a9ae13d7a37..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-image-dimensions-fixed.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-image-dimensions.jpg b/src/site/content/en/blog/optimize-cls/video-image-dimensions.jpg
deleted file mode 100644
index 40838d6a479..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-image-dimensions.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-related-articles-dynamic-content.jpg b/src/site/content/en/blog/optimize-cls/video-related-articles-dynamic-content.jpg
deleted file mode 100644
index 9f1ebe8b329..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-related-articles-dynamic-content.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-cls/video-top-ad-after.jpg b/src/site/content/en/blog/optimize-cls/video-top-ad-after.jpg
deleted file mode 100644
index fbe4d9e0063..00000000000
Binary files a/src/site/content/en/blog/optimize-cls/video-top-ad-after.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-fid/coverage-panel-js.png b/src/site/content/en/blog/optimize-fid/coverage-panel-js.png
deleted file mode 100644
index 4180c65306a..00000000000
Binary files a/src/site/content/en/blog/optimize-fid/coverage-panel-js.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-fid/hero2.jpg b/src/site/content/en/blog/optimize-fid/hero2.jpg
deleted file mode 100644
index 4b9a10878b4..00000000000
Binary files a/src/site/content/en/blog/optimize-fid/hero2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-fid/index.md b/src/site/content/en/blog/optimize-fid/index.md
index b5db1a7757e..517654ecdc7 100644
--- a/src/site/content/en/blog/optimize-fid/index.md
+++ b/src/site/content/en/blog/optimize-fid/index.md
@@ -5,9 +5,10 @@ authors:
   - houssein
   - addyosmani
 date: 2020-05-05
-hero: hero2.jpg
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
 alt: A hand touching a smartphone screen
-description: | 
+description: |
   First Input Delay (FID) measures the time from when a user first interacts with your site
   to the time when the browser is actually able to respond to that interaction. Learn how to
   optimize FID by minimizing unused JavaScript, breaking up Long Tasks, and improving interaction
@@ -18,6 +19,10 @@ tags:
   - web-vitals
 ---
 
+{% Aside 'important' %}
+FID will be [replaced by Interaction to Next Paint (INP)](/inp-cwv/) as a Core Web Vital in March 2024.
+{% endAside %}
+
 <blockquote>
   <p>
     I clicked but nothing happened! Why can't I interact with this page? 😢
@@ -37,16 +42,13 @@ simulated in a lab environment. **A real user interaction** is required in order
 response delay.
 
 <picture>
-  <source srcset="/vitals/fid_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="/vitals/fid_4x3.svg"
-      alt="Good FID scores are 2.5 seconds, poor scores are greater than 4.0
-            seconds and anything in between needs improvement.">
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Good fid values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement", width="384", height="96" %}
 </picture>
 
 To help predict FID in the [lab](/how-to-measure-speed/#lab-data-vs-field-data), we
 recommend [Total Blocking Time (TBT)](/tbt/). They measure different things, but
-improvements in TBT usually correspond to improvements in FID. 
+improvements in TBT usually correspond to improvements in FID.
 
 The main cause of a poor FID is **heavy JavaScript execution**. Optimizing how JavaScript parses,
 compiles, and executes on your web page will directly reduce FID.
@@ -56,25 +58,25 @@ compiles, and executes on your web page will directly reduce FID.
 The browser cannot respond to most user input while it's executing JavaScript on the main thread. In other words, the
 browser can't respond to user interactions while the main thread is busy. To improve this:
 
-* [Break up Long Tasks](#long-tasks)
-* [Optimize your page for interaction readiness](#optimize-interaction-readiness)
-* [Use a web worker](#web-worker)
-* [Reduce JavaScript execution time](#reduce-javascript-execution)
+- [Break up Long Tasks](#long-tasks)
+- [Optimize your page for interaction readiness](#optimize-interaction-readiness)
+- [Use a web worker](#use-a-web-worker)
+- [Reduce JavaScript execution time](#reduce-javascript-execution)
 
 ## Break up Long Tasks {: #long-tasks }
 
 If you've already attempted to reduce the amount of JavaScript that loads on a single page, it can
-be useful to break down long-running code  into **smaller, asynchronous tasks**. 
+be useful to break down long-running code into **smaller, asynchronous tasks**.
 
 [**Long Tasks**](/custom-metrics/#long-tasks-api) are JavaScript execution periods where users may
 find your UI unresponsive. Any piece of code that blocks the main thread for 50 ms or more can be
 characterized as a Long Task. Long Tasks are a sign of
-potential JavaScript bloat (loading and executing more than a user may need right now).  
-Splitting up long tasks can reduce input delay on your site. 
+potential JavaScript bloat (loading and executing more than a user may need right now).
+Splitting up long tasks can reduce input delay on your site.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./long-task.png" alt="Long Tasks in Chrome DevTools">
-  <figcaption class="w-figcaption">Chrome DevTools <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">visualizes Long Tasks</a> in the Performance Panel</figcaption>
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Long Tasks in Chrome DevTools", width="800", height="132" %}
+  <figcaption>Chrome DevTools <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">visualizes Long Tasks</a> in the Performance Panel</figcaption>
 </figure>
 
 FID should improve noticeably as you adopt best practices like code-splitting and breaking up your
@@ -86,59 +88,58 @@ For more information, take a look at [Are long JavaScript tasks delaying your Ti
 Interactive?](/long-tasks-devtools/).
 {% endAside %}
 
-## Optimize your page for interaction readiness 
+## Optimize your page for interaction readiness
 
 There are a number of common causes for poor FID and TBT scores in web apps that rely heavily on
 JavaScript:
 
 ### First-party script execution can delay interaction readiness
 
-+   JavaScript size bloat, heavy execution times and inefficient chunking can slow down how soon a
-    page can respond to user input and impact FID, TBT, and TTI. Progressive loading of code and
-    features can help spread this work out and improve interaction readiness.
-+   Server-side rendered apps may look like they're getting pixels painted on the screen
-    quickly, but beware of user interactions being blocked by large script executions (e.g.
-    re-hydration to wire up event listeners). This can take several hundred milliseconds, sometimes
-    even seconds, if route-based code splitting is being used. Consider shifting more logic
-    server-side or generating more content statically during build time.
+- JavaScript size bloat, heavy execution times and inefficient chunking can slow down how soon a
+  page can respond to user input and impact FID, TBT, and TTI. Progressive loading of code and
+  features can help spread this work out and improve interaction readiness.
+- Server-side rendered apps may look like they're getting pixels painted on the screen
+  quickly, but beware of user interactions being blocked by large script executions (e.g.
+  re-hydration to wire up event listeners). This can take several hundred milliseconds, sometimes
+  even seconds, if route-based code splitting is being used. Consider shifting more logic
+  server-side or generating more content statically during build time.
 
 Below are the TBT scores before and after optimizing first-party script loading for an
 application. By moving costly script loading (and execution) for a non-essential component off the
 critical path, users were able to interact with the page much sooner.
 
-<img class="w-screenshot" src="tbt-before-after-first-party.png" 
-     alt="Improvements in TBT score in Lighthouse after optimizing the first-party script.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="Improvements in TBT score in Lighthouse after optimizing the first-party script.", width="800", height="148" %}
 
 ### Data-fetching can impact many aspects of interaction readiness
 
-+   Waiting on a waterfall of cascading fetches (e.g. JavaScript and data fetches for components) can
-    impact interaction latency. Aim to minimize a reliance on cascading data fetches.
-+   Large inline datastores can push out HTML parsing time and impact both paint and interaction
-    metrics. Aim to minimize how much data needs to be post-processed on the client-side.
+- Waiting on a waterfall of cascading fetches (e.g. JavaScript and data fetches for components) can
+  impact interaction latency. Aim to minimize a reliance on cascading data fetches.
+- Large inline datastores can push out HTML parsing time and impact both paint and interaction
+  metrics. Aim to minimize how much data needs to be post-processed on the client-side.
 
 ### Third-party script execution can delay interaction latency too
 
-+   Many sites include third-party tags and analytics which can keep the network busy and
-    make the main thread periodically unresponsive, impacting interaction latency. Explore
-    on-demand loading of third-party code (e.g. maybe don't load those below-the-fold ads until
-    they're scrolled closer to the viewport).
-+   In some cases, third-party scripts can pre-empt first-party ones in terms of priority and
-    bandwidth on the main thread, also delaying how soon a page is interaction-ready. Attempt to
-    prioritize loading what you believe offers the greatest value to users first.
+- Many sites include third-party tags and analytics which can keep the network busy and
+  make the main thread periodically unresponsive, impacting interaction latency. Explore
+  on-demand loading of third-party code (e.g. maybe don't load those below-the-fold ads until
+  they're scrolled closer to the viewport).
+- In some cases, third-party scripts can pre-empt first-party ones in terms of priority and
+  bandwidth on the main thread, also delaying how soon a page is interaction-ready. Attempt to
+  prioritize loading what you believe offers the greatest value to users first.
 
 ## Use a web worker
 
 A blocked main thread is one of the main causes of input delay. [Web
-workers](https://developer.mozilla.org/en-US/docs/Web/API/Worker) make it possible to run JavaScript
+workers](https://developer.mozilla.org/docs/Web/API/Worker) make it possible to run JavaScript
 on a background thread. Moving non-UI operations to a separate worker thread can cut down main
 thread blocking time and consequently improve FID.
 
 Consider using the following libraries to make it easier to use web workers on your site:
 
-+   [Comlink](https://github.com/GoogleChromeLabs/comlink): A helper library that abstracts
-    `postMessage` and makes it easier to use
-+   [Workway](https://github.com/WebReflection/workway): A general purpose web worker exporter
-+   [Workerize](https://github.com/developit/workerize): Move a module into a web worker
+- [Comlink](https://github.com/GoogleChromeLabs/comlink): A helper library that abstracts
+  `postMessage` and makes it easier to use
+- [Workway](https://github.com/WebReflection/workway): A general purpose web worker exporter
+- [Workerize](https://github.com/developit/workerize): Move a module into a web worker
 
 {% Aside %}
 To learn more about how web workers can execute code off the main thread, refer to [Use Web Workers
@@ -153,8 +154,8 @@ user interactions.
 
 To reduce the amount of JavaScript executed on your page:
 
-+   Defer unused JavaScript
-+   Minimize unused polyfills
+- Defer unused JavaScript
+- Minimize unused polyfills
 
 #### Defer unused JavaScript
 
@@ -163,26 +164,25 @@ an external JavaScript file, it must pause what it's doing and download, parse,
 that JavaScript. Therefore you should only load the code that's needed for the page or
 responding to user input.
 
-The [Coverage](https://developers.google.com/web/tools/chrome-devtools/coverage) tab in Chrome
+The [Coverage](https://developer.chrome.com/docs/devtools/coverage/) tab in Chrome
 DevTools can tell you how much JavaScript is not being used on your web page.
 
-<img class="w-screenshot w-screenshot--filled" src="coverage-panel-js.png" alt="The Coverage tab.">
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="The Coverage tab.", width="800", height="559" %}
 
 To cut down on unused JavaScript:
 
-+   Code-split your bundle into multiple chunks
-+   Defer any non-critical JavaScript, including third-party scripts, using `async` or `defer`
+- Code-split your bundle into multiple chunks
+- Defer any non-critical JavaScript, including third-party scripts, using `async` or `defer`
 
 **Code-splitting** is the concept of splitting a single large JavaScript bundle into smaller chunks
-that can be conditionally loaded (also known as lazy-loading).
+that can be conditionally loaded (also known as lazy loading).
 [Most newer browsers support dynamic import syntax](https://caniuse.com/#feat=es6-module-dynamic-import),
 which allows for module fetching on demand:
 
-```js	
-import('module.js')	
-  .then((module) => {	
-    // Do something with the module.	
-  });	
+```js
+import('module.js').then((module) => {
+  // Do something with the module.
+});
 ```
 
 Dynamically importing JavaScript on certain user interactions (such as changing a route or
@@ -192,61 +192,61 @@ needed.
 Aside from general browser support, dynamic import syntax can be used in many different build
 systems.
 
-+   If you use [webpack](https://webpack.js.org/guides/code-splitting/),	
-    [Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82),	
-    or [Parcel](https://parceljs.org/code_splitting.html) as a module bundler, take advantage of	
-    their dynamic import support. 	
-+   Client-side frameworks, like	
-    [React](https://reactjs.org/docs/code-splitting.html#reactlazy),	
-    [Angular](https://angular.io/guide/lazy-loading-ngmodules), and	
-    [Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) provide	
-    abstractions to make it easier to lazy-load at the component-level.
+- If you use [webpack](https://webpack.js.org/guides/code-splitting/),
+  [Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82),
+  or [Parcel](https://parceljs.org/code_splitting.html) as a module bundler, take advantage of
+  their dynamic import support.
+- Client-side frameworks, like
+  [React](https://reactjs.org/docs/code-splitting.html#reactlazy),
+  [Angular](https://angular.io/guide/lazy-loading-ngmodules), and
+  [Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) provide
+  abstractions to make it easier to lazy-load at the component-level.
 
 {% Aside %}
 Take a look at [Reduce JavaScript payloads with code
 splitting](/reduce-javascript-payloads-with-code-splitting/) to learn more about code-splitting.
 {% endAside %}
 
-Aside from code-splitting, always use [async or	
-defer](https://javascript.info/script-async-defer) for scripts that are not necessary for	
-critical-path or above-the-fold content.	
+Aside from code-splitting, always use [async or
+defer](https://javascript.info/script-async-defer) for scripts that are not necessary for
+critical-path or above-the-fold content.
 
-```html	
-<script defer src="…"></script>	
-<script async src="…"></script>	
-```	
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
 
-Unless there is a specific reason not to, all third-party scripts should be loaded with either `defer`	
+Unless there is a specific reason not to, all third-party scripts should be loaded with either `defer`
 or `async` by default.
 
-#### Minimize unused polyfills	
+#### Minimize unused polyfills
 
-If you author your code using modern JavaScript syntax and reference modern browsers APIs, you will	
-need to transpile it and include polyfills in order for it to work in older browsers.	
+If you author your code using modern JavaScript syntax and reference modern browsers APIs, you will
+need to transpile it and include polyfills in order for it to work in older browsers.
 
-One of the main performance concerns of including polyfills and transpiled code in your site is that	
-newer browsers shouldn't have to download it if they do not need it. To cut down on the JavaScript	
-size of your application, minimize unused polyfills as much as possible and restrict their usage to	
-environments where they're needed.	
+One of the main performance concerns of including polyfills and transpiled code in your site is that
+newer browsers shouldn't have to download it if they do not need it. To cut down on the JavaScript
+size of your application, minimize unused polyfills as much as possible and restrict their usage to
+environments where they're needed.
 
-To optimize polyfill usage on your site:	
+To optimize polyfill usage on your site:
 
-+   If you use [Babel](https://babeljs.io/docs/en/index.html) as a transpiler, use	
-    [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) to only include the polyfills	
-    needed for the browsers you plan on targeting. For Babel 7.9, enable the	
-    [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) option to further cut down	
-    on any unneeded polyfills	
-+   Use the module/nomodule pattern to deliver two separate bundles (`@babel/preset-env` also	
-    supports this via [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules))	
+- If you use [Babel](https://babeljs.io/docs/en/index.html) as a transpiler, use
+  [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) to only include the polyfills
+  needed for the browsers you plan on targeting. For Babel 7.9, enable the
+  [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) option to further cut down
+  on any unneeded polyfills
+- Use the module/nomodule pattern to deliver two separate bundles (`@babel/preset-env` also
+  supports this via [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules))
 
-    ```html	
-    <script type="module" src="modern.js"></script>	
-    <script nomodule src="legacy.js" defer></script>	
-    ```	
+  ```html
+  <script type="module" src="modern.js"></script>
+  <script nomodule src="legacy.js" defer></script>
+  ```
 
-    Many newer ECMAScript features compiled with Babel are already supported in environments	
-    that support JavaScript modules. So by doing this, you simplify the process of making sure that	
-    only transpiled code is used for browsers that actually need it.
+  Many newer ECMAScript features compiled with Babel are already supported in environments
+  that support JavaScript modules. So by doing this, you simplify the process of making sure that
+  only transpiled code is used for browsers that actually need it.
 
 {% Aside %}
 The [Serve modern code to modern browsers for faster page
@@ -257,14 +257,14 @@ loads](/serve-modern-code-to-modern-browsers/) guide goes into more detail about
 
 A number of tools are available to measure and debug FID:
 
-+   [Lighthouse 6.0](https://developers.google.com/web/tools/lighthouse) does not include
-    support for FID since it is a field metric. However, [Total Blocking
-    Time](/tbt/) (TBT) can be used as a proxy. Optimizations that improve TBT should
-    also improve FID in the field.
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) does not include
+  support for FID since it is a field metric. However, [Total Blocking
+  Time](/tbt/) (TBT) can be used as a proxy. Optimizations that improve TBT should
+  also improve FID in the field.
 
-    <img class="w-screenshot" src="lighthouse.jpg" alt="Lighthouse 6.0.">
+  {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0.", width="800", height="309" %}
 
-+   [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report)
-    provides real-world FID values aggregated at the origin-level
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+  provides real-world FID values aggregated at the origin-level
 
 _With thanks to Philip Walton, Kayce Basques, Ilya Grigorik, and Annie Sullivan for their reviews._
diff --git a/src/site/content/en/blog/optimize-fid/lighthouse.jpg b/src/site/content/en/blog/optimize-fid/lighthouse.jpg
deleted file mode 100644
index 3144534ed8c..00000000000
Binary files a/src/site/content/en/blog/optimize-fid/lighthouse.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-fid/long-task.png b/src/site/content/en/blog/optimize-fid/long-task.png
deleted file mode 100644
index 568b5767fe8..00000000000
Binary files a/src/site/content/en/blog/optimize-fid/long-task.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-fid/tbt-before-after-first-party.png b/src/site/content/en/blog/optimize-fid/tbt-before-after-first-party.png
deleted file mode 100644
index 905755e1706..00000000000
Binary files a/src/site/content/en/blog/optimize-fid/tbt-before-after-first-party.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-inp/index.md b/src/site/content/en/blog/optimize-inp/index.md
new file mode 100644
index 00000000000..680afe9c2e1
--- /dev/null
+++ b/src/site/content/en/blog/optimize-inp/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Optimize Interaction to Next Paint
+subhead: |
+  Learn how to optimize your website's Interaction to Next Paint.
+authors:
+  - jlwagner
+  - philipwalton
+updated: 2023-05-19
+date: 2022-12-08
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FV8Ls9SDF6UQ3v2IgKUw.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/c2jPmJH5tCH2pnMq1CQu.jpg
+alt: A photo of four paint rollers side by side, laying paint on a wall. The colors from left to right are green, red, orange, and blue. Text is overlaid, which reads 'Optimize Interaction to Next Paint'.
+description: |
+  Learn how to optimize your website's Interaction to Next Paint.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %}
+Interaction to Next Paint (INP) is a [pending](/vitals/#pending) Core Web Vital metric that will [replace First Input Delay (FID)](/inp-cwv/) in March 2024.
+{% endAside %}
+
+[Interaction to Next Paint (INP)](/inp/) is a [pending](/vitals/#pending) Core Web Vital metric that assesses a page's overall responsiveness to user interactions by observing the latency of all [qualifying interactions](/inp/#whats-in-an-interaction) that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed (sometimes ignoring outliers).
+
+To provide a good user experience, websites should strive to have an Interaction to Next Paint of **200 milliseconds or less**. To ensure you're hitting this target for most of your users, a good threshold to measure is the **75th percentile of page loads**, segmented across mobile and desktop devices.
+
+<style>
+  .inp-mobile {
+    display: inline;
+  }
+
+  .inp-desktop {
+    display: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .inp-mobile {
+      display: none;
+    }
+
+    .inp-desktop {
+      display: inline;
+    }
+  }
+</style>
+<figure>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-mobile" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 296.6 220.2" style="enable-background:new 0 0 296.6 220.2" xml:space="preserve"><style>.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}</style><path class="st0" d="M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z"/><path class="st1" d="M0 137.1h96v38.4H0v-38.4z"/><path class="st2" d="M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z"/><path class="st3" d="M96 137.1h105.6v38.4H96v-38.4z"/><path class="st2" d="M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z"/><path class="st4" d="M200.6 137.1h96v38.4h-96v-38.4z"/><path class="st2" d="M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z"/></svg>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-desktop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 658.4 113.6" style="enable-background:new 0 0 658.4 113.6" xml:space="preserve"><style>.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}</style><path class="st0" d="M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z"/><path class="st1" d="M303.2 14.9h115.2v43.2H303.2V14.9z"/><path class="st2" d="M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z"/><path class="st3" d="M418.4 14.9h124.8v43.2H418.4V14.9z"/><path class="st2" d="M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z"/><path class="st4" d="M543.2 14.9h115.2v43.2H543.2V14.9z"/><path class="st2" d="M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z"/></svg>
+</figure>
+
+Depending on the website, there may be few to no interactions—such as pages of mostly text and images with few to no interactive elements. Or, in the case of websites such as text editors or games, there could be hundreds—even thousands—of interactions. In either case, where there's a high INP, the user experience is at risk.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Interaction to Next Paint (INP)](/inp/).
+{% endAside %}
+
+It takes time and effort to improve INP, but the reward is a better user experience. In this guide, a path to improving INP will be explored.
+
+## Figure out what's causing poor INP
+
+Before you can fix slow interactions, you'll need data to tell you if your website's INP is poor or needs improvement. Once you have that information, you can move into the lab to begin diagnosing slow interactions, and work your way toward a solution.
+
+### Find slow interactions in the field
+
+Ideally, your journey in optimizing INP will start with [field data](/lab-and-field-data-differences/#field-data). At its best, field data from a Real User Monitoring (RUM) provider will give you not only a page's INP value, but also contextual data that highlights what specific interaction was responsible for the INP value itself, whether the interaction occurred during or after page load, the type of interaction (click, keypress, or tap), and other valuable information.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Find slow interactions in the field](/find-slow-interactions-in-the-field/).
+{% endAside %}
+
+If you're not relying on a RUM provider to get field data, the [INP field data guide](/find-slow-interactions-in-the-field/) advises [using the Chrome User Experience Report (CrUX) via PageSpeed Insights](/find-slow-interactions-in-the-field/#get-field-data-quickly-with-crux) to help fill in the gaps. CrUX is the official dataset of the Core Web Vitals program and provides a high-level summary of metrics for millions of websites, including INP. However, CrUX often does not provide the contextual data you'd get from a RUM provider to help you to analyze issues. Because of this, we still recommend that sites use a RUM provider when possible, or implement their own RUM solution to supplement what is available in CrUX.
+
+### Diagnose slow interactions in the lab
+
+Ideally, you'll want to start testing in the lab once you have field data that suggests you have slow interactions. In the absence of field data, there are some strategies for identifying slow interactions in the lab. Such strategies include following common user flows and testing interactions along the way, as well as interacting with the page during load—when the main thread is often busiest—in order to surface slow interactions during that crucial part of the user experience.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Diagnose slow interactions in the lab](/diagnose-slow-interactions-in-the-lab/).
+{% endAside %}
+
+## Optimize interactions
+
+Once you've identified a slow interaction and [can reproduce it in the lab](/diagnose-slow-interactions-in-the-lab/), the next step is to optimize it. Interactions can be broken down into three phases:
+
+1. The input delay, which starts when the user initiates an interaction with the page, and ends when the event callbacks for the interaction begin to run.
+2. The processing time, which consists of the time it takes for event callbacks to run to completion.
+3. The presentation delay, which is the time it takes for the browser to present the next frame which contains the visual result of the interaction.
+
+The sum of these three phases is the total interaction latency. Every single phase of an interaction contributes some amount of time to total interaction latency, so it's important to know how you can optimize each part of the interaction so it runs for as little time as possible.
+
+{% Aside 'important' %}
+When optimizing interactions, it's important to understand that each [browsing context](https://developer.mozilla.org/docs/Glossary/Browsing_context) will have its own main thread. This means that the top-level page will have a main thread, but each `<iframe>` element on the page will have its own main thread as well. INP will be reported at the page-level including any slow interactions on the page or any iframes within that page. Ensure you understand which frame an interaction is happening in, to understand which main thread to look at. However, even with multiple main threads, resource-constrained devices can result in impact being felt across these seemingly independent threads.
+{% endAside %}
+
+### Identify and reduce input delay
+
+When a user interacts with a page, the first part of that interaction is the _input delay_. Depending on other activity on the page, input delays can be considerable in length. This could be due to activity occurring on the main thread (perhaps due to scripts loading, parsing and compiling), fetch handling, timer functions, or even from other interactions that occur in quick succession and overlap with one another.
+
+Whatever the source of an interaction's input delay, you'll want to reduce input delay to a minimum so that interactions can begin running event callbacks as soon as possible.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Optimize input delay](/optimize-input-delay/).
+{% endAside %}
+
+#### The relationship between script evaluation and long tasks during startup
+
+A critical aspect of interactivity in the page lifecycle is during startup. As a page loads, it will initially render, but it's important to remember that just because a page has _rendered_, doesn't mean that the page is finished _loading_. Depending on how many resources a page requires to become fully functional, it's possible that users may attempt to interact with the page while it's still loading.
+
+One thing that can extend an interaction's input delay while a page loads is script evaluation. After a JavaScript file has been fetched from the network, the browser still has work to do before that JavaScript can run; that work includes parsing a script to ensure its syntax is valid, compiling it into bytecode, and then finally executing it.
+
+Depending on the size of a script, this work can introduce long tasks on the main thread, which will delay the browser from responding to other user interactions. To keep your page responsive to user input during page load, it's important to understand what you can do to reduce the likelihood of long tasks during page load so the page stays snappy.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Script evaluation and long tasks](/script-evaluation-and-long-tasks/).
+{% endAside %}
+
+### Optimize event callbacks
+
+The input delay is only the first part of what INP measures. You'll also need to make sure that the event callbacks that run in response to a user interaction can complete as quickly as possible.
+
+#### Yield to the main thread often
+
+The best general advice in optimizing event callbacks is to do as little work as possible in them. However, your interaction logic may be complex, and you may only be able to marginally reduce the work they do.
+
+If you find this is the case for your website, the next thing you can try is to break up the work in event callbacks into separate tasks. This prevents the collective work from becoming a long task that blocks the main thread, which allows other interactions that otherwise would be waiting on the main thread to run sooner.
+
+`setTimeout` is one way to break up tasks, because the callback passed to it runs in a new task. You can [use `setTimeout` by itself](/optimize-long-tasks/#manually-defer-code-execution) or abstract its use into a separate function [for more ergonomic yielding](/optimize-long-tasks/#use-asyncawait-to-create-yield-points).
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Optimize long tasks](/optimize-long-tasks/).
+{% endAside %}
+
+Yielding indiscriminately is better than not yielding at all—however, there is a more nuanced way of yielding to the main thread, and that involves only yielding immediately after an event callback that updates the user interface so rendering logic can run sooner.
+
+#### Yield to allow rendering work to occur sooner
+
+A more advanced yielding technique involves structuring the code in your event callbacks to limit what gets run to just the logic required to apply visual updates for the next frame. Everything else can be deferred to a subsequent task. This not only keeps callbacks light and nimble, but it also improves rendering time for interactions by not allowing visual updates to block on event callback code.
+
+For example, imagine a rich text editor that formats text as you type, but also updates other aspects of the UI in response to what you've written (such as word count, highlighting spelling mistakes, and other important visual feedback). In addition, the application may also need to save what you've written so that if you leave and return, you haven't lost any work.
+
+In this example, the following four things need to happen in response to characters typed by the user. However, only the first item needs to be done before the next frame is presented.
+
+1. Update the text box with what the user typed and apply any required formatting.
+2. Update the part of the UI that displays the current word count.
+3. Run logic to check for spelling mistakes.
+4. Save the most recent changes (either locally or to a remote database).
+
+The code to do this might look something like the following:
+
+```js
+textBox.addEventListener('input', (inputEvent) => {
+  // Update the UI immediately, so the changes the user made
+  // are visible as soon as the next frame is presented.
+  updateTextBox(inputEvent);
+
+  // Use `setTimeout` to defer all other work until at least the next
+  // frame by queuing a task in a `requestAnimationFrame()` callback.
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      const text = textBox.textContent;
+      updateWordCount(text);
+      checkSpelling(text);
+      saveChanges(text);
+    }, 0);
+  });
+});
+```
+
+The following visualization shows how deferring any non-critical updates until after the next frame can reduce the processing time and thus the overall interaction latency.
+
+<figure>
+  <a href="https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Me4oU1cqMPOqEaEg2XAP.svg" rel="noopener">
+    {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/MN6LranaUtJMlGZEA66T.png", alt="A depiction of a keyboard interaction and subsequent tasks in two scenarios. In the top figure, the render-critical task and all subsequent background tasks run synchronously until the opportunity to present a frame has arrived. In the bottom figure, the render-critical work runs first, then yields to the main thread to present a new frame sooner. The background tasks run thereafter.", width="770", height="495" %}
+  </a>
+  <figcaption>
+    Click the above figure to see a high-resolution version.
+  </figcaption>
+</figure>
+
+While the use of `setTimeout()` inside a `requestAnimationFrame()` call in the previous code example is admittedly a bit esoteric, it is an effective method that works in all browsers to ensure that the non-critical code does not block the next frame.
+
+#### Avoid layout thrashing
+
+Layout thrashing—sometimes called forced synchronous layout—is a rendering performance problem where layout occurs synchronously. It occurs when you update styles in JavaScript, and then read them in the same task—and [there are many properties in JavaScript that can cause layout thrashing](https://gist.github.com/paulirish/5d52fb081b3570c81e3a).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/06CXJcBsqO6kdj1Bjml7.png", alt="A visualization of layout thrashing as shown in the performance panel of Chrome DevTools.", width="800", height="336" %}
+  <figcaption>
+    An example of layout thrashing, as shown in the performance panel of Chrome DevTools. Rendering tasks that involve layout thrashing will be noted with a red triangle at the upper right corner of the portion of the call stack, often labeled <strong>Recalculate Style</strong> or <strong>Layout</strong>.
+  </figcaption>
+</figure>
+
+Layout thrashing is a performance bottleneck because by updating styles and then immediately requesting the values of those styles in JavaScript, the browser is forced to do synchronous layout work it otherwise could have waited to perform asynchronously later on after event callbacks have finished running.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Avoid large, complex layouts and layout thrashing](/avoid-large-complex-layouts-and-layout-thrashing/).
+{% endAside %}
+
+### Minimize presentation delay
+
+The _presentation delay_ of an interaction marks spans from when an interaction's event callbacks have finished running, up to the point at which the browser is able to paint the next frame that shows the resulting visual changes.
+
+#### Minimize DOM size
+
+When a page's DOM is small, rendering work usually finishes quickly. However, when DOMs get very large, rendering work tends to scale with increasing DOM size. The relationship between rendering work and DOM size isn't a linear one, but large DOMs do require more work to render than small DOMs. A large DOM is problematic in two cases:
+
+1. During the initial page render, where a large DOM requires a lot of work to render the page's initial state.
+2. In response to a user interaction, where a large DOM can cause rendering updates to be very expensive, and therefore increase the time it takes for the browser to present the next frame.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[DOM size and interactivity](/dom-size-and-interactivity/).
+{% endAside %}
+
+Bear in mind that there are instances in which large DOMs can't be significantly reduced. While there are approaches you can take to reduce DOM size, such as [flattening your DOM](/dom-size-and-interactivity/#how-can-i-reduce-dom-size) or [add to the DOM during user interactions](/dom-size-and-interactivity/#consider-an-additive-approach) to keep your initial DOM size small, those techniques may only go so far.
+
+#### Use `content-visibility` to lazily render off-screen elements
+
+One way you can limit the amount of both rendering work during page load and rendering work in response to user interactions is to lean on the CSS `content-visibility` property, which effectively amounts to lazily rendering elements as they approach the viewport. While `content-visibility` can take some practice to use effectively, it's worth investigating if the result is lower rendering time that can improve your page's INP.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[`content-visibility`: the new CSS property that boosts your rendering performance](/content-visibility/).
+{% endAside %}
+
+#### Be aware of performance costs when rendering HTML using JavaScript
+
+Where there's HTML, there's HTML parsing, and after the browser has finished parsing HTML into a DOM, it must apply styles to it, perform layout calculations, and subsequently render that layout. This is an unavoidable cost, but _how_ you go about rendering HTML matters.
+
+When the server sends HTML, it arrives in the browser as a stream. Streaming means that the HTML response from the server is arriving in chunks. The browser optimizes how it handles a stream by incrementally parsing chunks of that stream as they arrive, and rendering them bit by bit. This is a performance optimization in that the browser implicitly yields periodically and automatically during page load, and you get that for free.
+
+While the first visit to any website will always involve _some_ amount of HTML, a common approach starts with a minimal initial bit of HTML, and then JavaScript is used to populate the content area. Subsequent updates to that content area also occur as the result of user interactions. This is usually called the [single-page application (SPA) model](https://en.wikipedia.org/wiki/Single-page_application). One drawback of this pattern is that, by rendering HTML with JavaScript on the client, you not only get the cost of the JavaScript processing to create that HTML, but also the browser will _not_ yield until it has finished parsing that HTML, and rendering it.
+
+It's vital to remember though, that even websites that _aren't_ SPAs will probably involve some amount of HTML rendering through JavaScript as the result of interactions. This is generally fine, so long as you're not rendering large amounts of HTML on the client, which can delay presentation of the next frame. However, it's important to understand the performance implications of this approach to rendering HTML in the browser, and how it can impact the responsiveness of your website to user input if you are rendering a lot of HTML via JavaScript.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Client-side rendering of HTML and interactivity](/client-side-rendering-of-html-and-interactivity/).
+{% endAside %}
+
+## Conclusion
+
+Improving your site's INP is an iterative process. When you fix a slow interaction in the field, the chances are good that—especially if your website provides lots of interactivity—you'll start to find other slow interactions, and you'll need to optimize them too.
+
+The key to improving INP is persistence. In time, you can get your page's responsiveness to a place where users are happy with the experience you're providing them. The chances are also good that as you develop new features for your users, you may need to go through the same process in optimizing interactions specific to them. It will take time and effort, but it's time and effort well spent.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [David Pisnoy](https://unsplash.com/@davidpisnoy) and modified in accordance with the [Unsplash license](https://unsplash.com/license)._
diff --git a/src/site/content/en/blog/optimize-javascript-execution/index.md b/src/site/content/en/blog/optimize-javascript-execution/index.md
new file mode 100644
index 00000000000..14efddd4d1e
--- /dev/null
+++ b/src/site/content/en/blog/optimize-javascript-execution/index.md
@@ -0,0 +1,158 @@
+---
+layout: post
+title: Optimize JavaScript execution
+subhead: |
+  JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that result in visual changes, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. You should look to minimize its impact where you can.
+authors:
+  - paullewis
+date: 2015-03-20
+updated: 2018-08-17
+description: |
+  JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that result in visual changes, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. You should look to minimize its impact where you can.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+JavaScript often triggers visual changes. Sometimes that's directly
+through style manipulations, and sometimes it's calculations that
+result in visual changes, like searching or sorting data. Badly-timed
+or long-running JavaScript is a common cause of performance issues.
+You should look to minimize its impact where you can.
+
+JavaScript performance profiling can be something of an art, because the JavaScript you write is
+nothing like the code that is actually executed. Modern browsers use JIT compilers and all manner
+of optimizations and tricks to try and give you the fastest possible execution, and this
+substantially changes the dynamics of the code.
+
+{% Aside %}
+If you really want to see JIT in action you should check out
+[IRHydra2 by Vyacheslav Egorov](http://mrale.ph/irhydra/2/).
+It shows the intermediate state of JavaScript code when Chrome’s JavaScript engine, V8, is
+optimizing it.
+{% endAside %}
+
+With all that said, however, there are some things you can definitely do to help your apps execute
+JavaScript well.
+
+### Summary
+
+* Avoid setTimeout or setInterval for visual updates; always use requestAnimationFrame instead.
+* Move long-running JavaScript off the main thread to Web Workers.
+* Use micro-tasks to make DOM changes over several frames.
+* Use Chrome DevTools’ Timeline and JavaScript Profiler to assess the impact of JavaScript.
+
+## Use `requestAnimationFrame` for visual changes
+
+When visual changes are happening on screen you want to do your work at the right time for the
+browser, which is right at the start of the frame. The only way to guarantee that your JavaScript
+will run at the start of a frame is to use `requestAnimationFrame`.
+
+
+```js
+/**
+    * If run as a requestAnimationFrame callback, this
+    * will be run at the start of the frame.
+    */
+function updateScreen(time) {
+    // Make visual updates here.
+}
+
+requestAnimationFrame(updateScreen);
+```
+
+Frameworks or samples may use `setTimeout` or `setInterval` to do visual changes like animations,
+but the problem with this is that the callback will run at _some point_ in the frame, possibly right
+ at the end, and that can often have the effect of causing us to miss a frame, resulting in jank.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iq5yVSd4wRskoD8GywR7.jpg", alt="setTimeout causing the browser to miss a frame.", width="800", height="600" %}
+</figure>
+
+In fact, jQuery used to use `setTimeout` for its `animate` behavior. It was changed to use
+`requestAnimationFrame` in version 3.
+If you are using older version of jQuery, you can
+[patch it to use `requestAnimationFrame`](https://github.com/gnarf/jquery-requestAnimationFrame),
+which is strongly advised.
+
+
+## Reduce complexity or use Web Workers
+
+JavaScript runs on the browser’s main thread, right alongside style calculations, layout, and, in
+many cases, paint. If your JavaScript runs for a long time, it will block these other tasks,
+potentially causing frames to be missed.
+
+You should be tactical about when JavaScript runs, and for how long. For example, if you’re in an
+animation like scrolling, you should ideally be looking to keep your JavaScript to something in the
+region of **3-4ms**. Any longer than that and you risk taking up too much time. If you’re in an idle
+ period, you can afford to be more relaxed about the time taken.
+
+In many cases you can move pure computational work to
+[Web Workers](https://developer.mozilla.org//docs/Web/API/Web_Workers_API/basic_usage),
+if, for example, it doesn’t require DOM access. Data manipulation or traversal,
+like sorting or searching, are often good fits for this model, as are loading and model generation.
+
+```js
+var dataSortWorker = new Worker("sort-worker.js");
+dataSortWorker.postMesssage(dataToSort);
+
+// The main thread is now free to continue working on other things...
+
+dataSortWorker.addEventListener('message', function(evt) {
+    var sortedData = evt.data;
+    // Update data on screen...
+});
+```
+
+
+Not all work can fit this model: Web Workers do not have DOM access. Where your work must be on the main thread, consider a batching approach, where you segment the larger task into micro-tasks, each taking no longer than a few milliseconds, and run inside of `requestAnimationFrame` handlers across each frame.
+
+
+There are UX and UI consequences to this approach, and you will need to ensure that the user knows
+that a task is being processed, either by [using a progress or activity indicator](https://www.google.com/design/spec/components/progress-activity.html).
+In any case this approach will keep your app's main thread free, helping it to stay responsive to
+user interactions.
+
+## Know your JavaScript’s “frame tax”
+
+When assessing a framework, library, or your own code, it’s important to assess
+how much it costs to run the JavaScript code on a frame-by-frame basis. This is
+especially important when doing performance-critical animation work like
+transitioning or scrolling.
+
+The Performance panel of Chrome DevTools is the best way to measure your
+JavaScript's cost. Typically you get low-level records like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ExUgS4YIvS4Klx9Ssn1q.png", alt="A performance recording in Chrome DevTools", width="800", height="636" %}
+</figure>
+
+The **Main** section provides a flame chart of JavaScript calls so you
+can analyze exactly which functions were called and how long each took.
+
+Armed with this information you can assess the performance impact of the
+JavaScript on your application, and begin to find and fix any hotspots where
+functions are taking too long to execute. As mentioned earlier you should seek
+to either remove long-running JavaScript, or, if that’s not possible, move it
+to a Web Worker freeing up the main thread to continue on with other tasks.
+
+See [Get Started With Analyzing Runtime Performance][GS] to learn how to use
+the Performance panel.
+
+
+## Avoid micro-optimizing your JavaScript
+
+It may be cool to know that the browser can execute one version of a thing 100 times faster than
+another thing, like that requesting an element’s `offsetTop` is faster than computing
+`getBoundingClientRect()`, but it’s almost always true that you’ll only be calling functions like
+these a small number of times per frame, so it’s normally wasted effort to focus on this aspect of
+JavaScript’s performance. You'll typically only save fractions of milliseconds.
+
+If you’re making a game, or a computationally expensive application, then you’re likely an exception
+ to this guidance, as you’ll be typically fitting a lot of computation into a single frame, and in
+that case everything helps.
+
+In short, you should be very wary of micro-optimizations because they won’t typically map to the
+kind of application you’re building.
+
+[GS]: https://developer.chrome.com/docs/devtools/evaluate-performance/
diff --git a/src/site/content/en/blog/optimize-lcp/coverage-panel-css.png b/src/site/content/en/blog/optimize-lcp/coverage-panel-css.png
deleted file mode 100644
index de4a5b52e6a..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/coverage-panel-css.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/critical-css.png b/src/site/content/en/blog/optimize-lcp/critical-css.png
deleted file mode 100644
index 936d08d10be..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/critical-css.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/hero2.jpg b/src/site/content/en/blog/optimize-lcp/hero2.jpg
deleted file mode 100644
index a6347684f7d..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/hero2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/image-largest-element.png b/src/site/content/en/blog/optimize-lcp/image-largest-element.png
deleted file mode 100644
index 1320ba0703e..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/image-largest-element.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/index.md b/src/site/content/en/blog/optimize-lcp/index.md
index 098f3b24eff..1df1376e46d 100644
--- a/src/site/content/en/blog/optimize-lcp/index.md
+++ b/src/site/content/en/blog/optimize-lcp/index.md
@@ -1,540 +1,577 @@
 ---
 title: Optimize Largest Contentful Paint
-subhead: How to render your main content faster.
+subhead: |
+  A step-by-step guide on how to break down LCP and identify key areas to improve.
 authors:
-  - houssein
+  - philipwalton
+  - tunetheweb
 date: 2020-05-05
-hero: hero2.jpg
+updated: 2023-07-07
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
 alt: Optimize LCP banner
 description: |
-  Largest Contentful Paint (LCP) can be used to determine when the main content of the page has
-  finished rendering on the screen. Learn how to optimize LCP by improving slow server response
-  times, resource load times and client-side rendering.
+  A step-by-step guide on how to break down LCP and identify key areas to improve.
 tags:
   - blog
   - performance
   - web-vitals
 ---
 
-<blockquote>
-  <p>
-    I can't see any useful content! Why does it take so long to load? 😖
-  </p>
-</blockquote>
-
-One factor contributing to a poor user experience is how long it takes a user to see any content
-rendered to the screen. [First Contentful Paint](/fcp) (FCP) measures how long it
-takes for initial DOM content to render, but it does not capture how long it took the largest
-(usually more meaningful) content on the page to render.
-
-[Largest Contentful Paint](/lcp) (LCP) is a [Core Web
-Vitals](/vitals/) metric and measures when the largest content element in the
-viewport becomes visible. It can be used to determine when the main content of the page has finished
-rendering on the screen.
-
-<picture>
-  <source srcset="../vitals/lcp_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="../vitals/lcp_4x3.svg"
-      alt="Good LCP values are 2.5 seconds, poor values are greater than 4.0
-            seconds and anything in between needs improvement">
-</picture>
-
-The most common causes of a poor LCP are:
-
-+   [Slow server response times](#slow-servers)
-+   [Render-blocking JavaScript and CSS](#render-blocking-resources)
-+   [Slow resource load times](#slow-resource-load-times)
-+   [Client-side rendering](#client-side-rendering)
-
-## Slow server response times {: #slow-servers }
-
-The longer it takes a browser to receive content from the server, the longer it takes to render
-anything on the screen. A faster server response time directly improves every single page-load
-metric, including LCP.
-
-Before anything else, improve how and where your server handles your content. Use [**Time to First
-Byte**](/time-to-first-byte) (TTFB) to measure your server response times. You can
-improve your TTFB in a number of different ways:
-
-+   Optimize your server
-+   Route users to a nearby CDN
-+   Cache assets
-+   Serve HTML pages cache-first
-+   Establish third-party connections early
-
-### Optimize your server
-
-Are you running expensive queries that take your server a significant amount of time to complete? Or
-are there other complex operations happening server-side that delay the process to return page
-content? Analyzing and improving the efficiency of your server-side code will directly improve the
-time it takes for the browser to receive the data.
-
-Instead of just immediately serving a static page on a browser request, many server-side web
-frameworks need to create the web page dynamically. In other words, rather than just sending a
-complete HTML file that's already ready when the browser requests it, the frameworks need to run
-logic to construct the page. This could be due to pending results from a database query or even
-because components need to be generated into markup by a UI framework (such as
-[React](https://reactjs.org/docs/react-dom-server.html)). Many web frameworks that run on the server
-have performance guidance that you can use to speed up this process.
+[Largest Contentful Paint (LCP)](/lcp/) is one of the three [Core Web Vitals](/vitals/#core-web-vitals) metrics, and it represents how quickly the main content of a web page is loaded. Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.
+
+To provide a good user experience, **sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits.**
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg",
+        alt="Good LCP values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
+
+There are a number of factors that can affect how quickly the browser is able to load and render a web page, and delays across any of them can have a significant impact on LCP.
+
+It's rare that a quick fix to a single part of a page will result in a meaningful improvement to LCP. To improve LCP you have to look at the entire loading process and make sure every step along the way is optimized.
+
+## Understanding your LCP metric
+
+Before optimizing LCP, developers should seek to understand if they even have an LCP issue, and the extent of any such issue.
+
+LCP can be measured in a number of tools and not all of these measure LCP in the same way. To understand LCP of real users, we should look at what real users are experiencing, rather than what a lab-based tool like [Lighthouse](https://developer.chrome.com/docs/lighthouse/) or local testing shows. These lab-based tools can give a wealth of information to explain and help you improve LCP, but be aware that lab tests alone may not be entirely representative of what your actual users experience.
+
+LCP data based on real users can be surfaced from Real User Monitoring (RUM) tools installed on a site, or via the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/) which collect anonymous data from real Chrome users for millions of websites.
+
+### Using PageSpeed Insights CrUX LCP data
+
+[PageSpeed Insights](https://pagespeed.web.dev/) provides access to CrUX data in the top section labeled **Discover what your real users are experiencing**. More detailed lab-based data is available in the bottom section labeled **Diagnose performance issues**. If CrUX data is available for your website, always concentrate on the real user data first.
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/enRFus2GE24gvchY9fdV.png", alt="CrUX data shown in PageSpeed Insights", width="800", height="478" %}
 
 {% Aside %}
-Check out [Fix an overloaded server](/overloaded-server/) for more tips.
+Where CrUX does not provide data (for example, a page with insufficient traffic to get page-level data), CrUX should be supplemented with RUM data collected using JavaScript APIs running on the web page. This can also provide much more data than CrUX can expose as a public dataset. Later in this guide we will explain how to collect this data using JavaScript.
 {% endAside %}
 
-### Route users to a nearby CDN
+PageSpeed Insights shows up to four different CrUX data:
+- **Mobile** data for **This URL**
+- **Desktop** data for **This URL**
+- **Mobile** data for the whole **Origin**
+- **Desktop** data for the whole **Origin**
 
-A Content Delivery Network (CDN) is a network of servers distributed in many different locations. If
-the content on your web page is being hosted on a single server, your website will load slower for
-users that are geographically farther away because their browser requests literally have to travel
-around the world. Consider using a CDN to ensure that your users never have to wait for network
-requests to faraway servers.
+These can be toggled in the controls at the top, and top right-hand side of this section. Be aware that where a URL does not have sufficient data to be shown at the URL level—but does have data for the origin—PageSpeed Insights will automatically show this.
 
-### Cache assets
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/wWQxf1DbjElItJTcJsBn.png", alt="PageSpeed Insight's falling back to origin-level data where url-level data is not available", width="800", height="295" %}
 
-If your HTML is static and doesn't need to change on every request, caching can prevent it from
-being recreated unnecessarily. By storing a copy of the generated HTML on disk, server-side caching
-can reduce TTFB and minimize resource usage.
+The LCP for the whole origin may be very different to an individual page's LCP depending on how the LCP is loaded on that page compared to other pages on that origin. It can also be affected by how visitors navigate to these pages. Home pages tend to be visted by new users and so may often be loaded "cold", without any cached content and so are often the slowest pages on a website.
 
-Depending on your toolchain, there are many different ways to apply server caching:
+Looking at the four different categories of CrUX data can help you understand whether an LCP issue is specific to this page, or a more general site-wide issue. Similarly, it can show which device types have LCP issues.
 
-+   Configure reverse proxies ([Varnish](https://varnish-cache.org/),
-    [nginx](https://www.nginx.com/)) to serve cached content or act as a cache server when
-    installed in front of an application server
-+   Configure and manage your cloud provider's
-    ([Firebase](https://firebase.google.com/docs/hosting/manage-cache),
-    [AWS](https://aws.amazon.com/caching/),
-    [Azure](https://docs.microsoft.com/en-us/azure/architecture/best-practices/caching)) cache behavior
-+   Use a CDN that provides edge servers so that your content is cached and stored closer to
-    your users
+### Using PageSpeed Insights CrUX supplementary metrics
 
-### Serve HTML pages cache-first
+Those looking to optimize LCP should also use the [First Contentful Paint (FCP)](/fcp/) and [Time to First Byte (TTFB)](/ttfb/) timings, which are good diagnostic metrics that can provide valuable insights into LCP.
 
-When installed, a [service
-worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) runs in the browser
-background and can intercept requests from the server. This level of programmatic cache control
-makes it possible to cache some or all of the HTML page's content and only update the cache when the
-content has changed.
+TTFB is the time when the visitor starting to navigate to a page (for example, clicking on a link), until the first bytes of the HTML document are received. A high TTFB can make achieving a 2.5 second LCP challenging, or even impossible.
 
-The following chart shows how LCP distributions have been reduced on a site using this pattern:
+A high TTFB can be due to mutiple server redirects, visitors located far away from the nearest site server, visitors on poor network conditions, or an inability to use cached content due to query parameters.
 
-<figure class="w-figure">
-  <img src="./lcp-sw-caching.png" alt="Largest Contentful Paint distributions before and after HTML caching">
-  <figcaption class="w-figcaption">Largest Contentful Paint distribution, for page loads with and without a service worker - <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a></figcaption>
-</figure>
+Once a page starts rendering, there may be an initial paint (for example, the background color), followed by some content appearing (for example, the site header). The appearance of the initial content is measured by FCP. The delta between FCP and other metrics can be very telling.
 
-The chart shows the distribution for LCP from a single site over the last 28 days, segmented by
-service worker state. Notice how far more page loads have a faster LCP value after cache-first HTML
-page serving was introduced in the service worker (blue portion of chart).
+A large delta between TTFB and FCP could indicate that the browser needs to download a lot of render-blocking assets. It can also be a sign it must complete a lot of work to render any meaningful content—a classic sign of a site that relies heavily on client-side rendering.
 
-{% Aside %}
-To learn more about techniques for serving full or partial HTML pages cache-first, take a look at
-[Smaller HTML Payloads with Service
-Workers](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/)
-{% endAside %}
+A large delta between FCP and LCP indicates that the LCP resource is either not immediately available for the browser to prioritize (for example, text or images that are managed by JavaScript rather than being available in the initial HTML), or that the browser is completing other work before it can display the LCP content.
 
-### Establish third-party connections early
+### Using PageSpeed Insights Lighthouse data
 
-Server requests to third-party origins can also impact LCP, especially if they're needed to display
-critical content on the page. Use `rel="preconnect"` to inform the browser that your page intends to
-establish a connection as soon as possible.
+The Lighthouse section of PageSpeed Insights offers some guidance to improving LCP, but first you should check if the LCP given is broadly inline with real user data provided by CrUX.
 
-```html
-<link rel="preconnect" href="https://example.com">
-```
+If Lighthouse is showing no LCP issue, but the CrUX data is, then any Lighthouse suggestions may not be relevant. The opposite is also true—if Lighthouse is showing a really poor LCP time, but CrUX data is showing your users mostly have a good LCP, then you may wish to consider the priority of optimizing LCP further, or if time is better spent on other performance improvements. Also be sure to check that the CrUX data is for this page and not for the full origin as detailed above.
 
-You can also use `dns-prefetch`  to resolve DNS lookups faster.
+If both sources of data are showing an LCP that should be improved than the Lighthouse section can provide valuable guidance on ways to improve LCP. Use the LCP filter to only show audits relevant to LCP:
 
-```html
-<link rel="dns-prefetch" href="https://example.com">
-```
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/himAvC1GMr7K0kcbvG4F.png", alt="Lighthouse LCP Opportunities and Diagnostics", width="800", height="498" %}
 
-Although both hints work differently, consider using `dns-prefetch` as a fallback for browsers that
-do not support `preconnect`.
+As well as the **Opportunities** to improve, there is **Diagnostic** information that may provide more information to help diagnose the issue. The **Largest Contentful Paint element** diagnostic shows a useful breakdown of the various timings that made up the LCP:
 
-```html
-<head>
-  …
-  <link rel="preconnect" href="https://example.com">
-  <link rel="dns-prefetch" href="https://example.com">
-</head>
-```
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/KhIuP2CNToNeGa33w48K.png", alt="Lighthouse LCP phases", width="800", height="474" %}
+
+We will delve into these sub-parts next.
+
+## LCP breakdown
+
+Optimizing for LCP can be a more complex task when PageSpeed Insights does not give you the answer on how to improve this metric. With complex tasks it's generally better to break them down into smaller, more manageable tasks and address each separately. This guide will present a methodology for how to break down LCP into its most critical sub-parts and then present specific recommendations and best practices for how to optimize each part.
 
 {% Aside %}
-Learn more by reading [Establish network connections early to improve perceived page
-speed](/preconnect-and-dns-prefetch/)
+For a visual overview of the context presented in this section, see [A Deep Dive into Optimizing LCP](https://youtu.be/fWoI9DXmpdk) from Google I/O 2022:
+  {% YouTube "fWoI9DXmpdk" %}
 {% endAside %}
 
-## Render blocking JavaScript and CSS {: #render-blocking-resources }
+Most page loads typically include a number of network requests, but for the purposes of identifying opportunities to improve LCP, you should start by looking at just two:
+
+1. The initial HTML document
+2. The LCP resource (if applicable)
+
+While other requests on the page can affect LCP, these two requests—specifically the times when the LCP resource begins and ends—reveal whether or not your page is optimized for LCP.
+
+To identify the LCP resource, you can use developer tools (such as PageSpeed Insights discussed above, [Chrome DevTools](https://developer.chrome.com/docs/devtools/), or [WebPageTest](https://webpagetest.org/)) to determine the [LCP element](/lcp/#what-elements-are-considered). From there, you can match the URL (again, if applicable) loaded by the element on a [network waterfall](https://developer.chrome.com/docs/devtools/network/reference/) of all resources loaded by the page.
+
+For example, the following visualization shows these resources highlighted on a network waterfall diagram from a typical page load, where the LCP element requires an image request to render.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/96YFhl0GQYIKFnJeOsVW.png", alt="A network waterfall with the HTML and LCP resources highlighted", width="800", height="375" %}
+
+For a well-optimized page, you want your LCP resource request to start loading as early as it can, and you want the LCP element to render as quickly as possible after the LCP resource finishes loading. To help visualize whether or not a particular page is following this principle, you can break down the total LCP time into the following sub-parts:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/4AriEgko87GR1iZSgOou.png", alt="A breakdown of LCP showing the four individual sub-parts", width="800", height="450" %}
+
+This table explains each of these LCP sub-parts in more detail:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>LCP sub-part</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Time to first byte (TTFB)</td>
+        <td>The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response. (See the <a href="https://web.dev/ttfb/">TTFB</a> metric doc for more details.)</td>
+      </tr>
+      <tr>
+        <td>Resource load delay</td>
+        <td>The delta between TTFB and when the browser starts loading the LCP resource. <em>*</em></td>
+      </tr>
+      <tr>
+        <td>Resource load time</td>
+        <td>The time it takes to load the LCP resource itself. <em>*</em></td>
+      </tr>
+      <tr>
+        <td>Element render delay</td>
+        <td>The delta between when the LCP resource finishes loading until the LCP element is fully rendered.</td>
+      </tr>
+      <caption>* If the LCP element does not require a resource load to render (for example, if the element is a text node rendered with a system font), this time will be 0.</caption>
+    </tbody>
+  </table>
+</div>
+
+Every single page can have its LCP value broken down into these four sub-parts. There is no overlap or gap between them, and collectively they add up to the full LCP time.
+
+When optimizing LCP, it's helpful to try to optimize these sub-parts individually. But it's also important to keep in mind that you need to optimize all of them. In some cases, an optimization applied to one part will not improve LCP, it will just shift the time saved to another part.
+
+For example, in the earlier network waterfall, if you reduced the file size of our image by compressing it more or switching to a more optimal format (such as AVIF or WebP), that would reduce the **resource load time**, but it would not actually improve LCP because the time would just shift to the **element render delay** sub-part:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/M3JgFnahW8pPb9o1lf2r.png", alt="The same breakdown of LCP shown earlier where the resource load time sub-part is shortened but the overall LCP time remains the same.", width="800", height="450" %}
+
+The reason this happens is because, on this page, the LCP element is hidden until the JavaScript code finishes loading, and then everything is revealed at once.
+
+This example helps illustrate the point that you need to optimize all of these sub-parts in order to achieve the best LCP outcomes.
+
+### Optimal sub-part times
+
+In order to optimize each sub-part of LCP, it's important to understand what the ideal breakdown of these sub-parts is on a well-optimized page.
+
+Of the four sub-parts, two have the word "delay" in their names. That is a clue that you want to get these times as close to zero as possible. The other two parts involve network requests, which by their very nature take time.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>LCP sub-part</th>
+        <th>% of LCP</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Time to first byte (TTFB)</td>
+        <td>~40%</td>
+      </tr>
+      <tr>
+        <td>Resource load delay</td>
+        <td>&lt;10%</td>
+      </tr>
+      <tr>
+        <td>Resource load time</td>
+        <td>~40%</td>
+      </tr>
+      <tr>
+        <td>Element render delay</td>
+        <td>&lt;10%</td>
+      </tr>
+      <tr>
+        <td><strong>TOTAL</strong></td>
+        <td><strong>100%</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Note that these time breakdowns are not strict rules, they're guidelines. If the LCP times on your pages are consistently within 2.5 seconds, then it doesn't really matter what the relative proportions are. But if you're spending a lot of unnecessary time in either of the "delay" portions, then it will be very difficult to constantly hit the [2.5 second target](/lcp/#what-is-a-good-lcp-score).
+
+A good way to think about the breakdown of LCP time is:
+
+- The **vast majority** of the LCP time should be spent loading the HTML document and LCP source.
+- Any time before LCP where one of these two resources is _not_ loading is **an opportunity to improve**.
+
+{% Aside 'warning' %}
+Given the [2.5 second target](/lcp/#what-is-a-good-lcp-score) for LCP, it may be tempting to try to convert these percentages into absolute numbers, but that is not recommended. These sub-parts are only meaningful relative to each other, so it's best to always measure them that way.
+{% endAside %}
 
-Before a browser can render any content, it needs to parse HTML markup into a DOM tree. The HTML
-parser will pause if it encounters any external stylesheets (`<link rel="stylesheet">`) or synchronous
-JavaScript tags (`<script src="main.js">`).
+## How to optimize each part
 
-Scripts and stylesheets are both render blocking resources which delay FCP, and consequently LCP.
-Defer any non-critical JavaScript and CSS to speed up loading of the main content of your web page.
+Now that you understand how each of the LCP sub-part times should break down on a well-optimized page, you can start optimizing your own pages.
 
-### Reduce CSS blocking time
+The next four sections will present recommendations and best practices for how to optimize each part. They're presented in order, starting with the optimizations that are likely to have the biggest impact.
 
-Ensure that only the minimal amount of necessary CSS is blocking render on your site with the
-following:
+### 1. Eliminate _resource load delay_
 
-+   Minify CSS
-+   Defer non-critical CSS
-+   Inline critical CSS
+The goal in this step is to ensure the LCP resource starts loading as early as possible. While in theory the earliest a resource _could_ start loading is immediately after TTFB, in practice there is always some delay before browsers actually start loading resources.
 
-### Minify CSS
+A good rule of thumb is that your LCP resource should start loading at the same time as the first resource loaded by that page. Or, to put that another way, if the LCP resource starts loading later than the first resource, then there's opportunity for improvement.
 
-For easier legibility, CSS files can contain characters such as spacing, indentation, or comments.
-These characters are all unnecessary for the browser, and minifying these files will ensure that
-they get removed. Ultimately, reducing the amount of blocking CSS will always improve the time it
-takes to fully render the main content of the page (LCP).
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8mqXeiEsLQwjgq2lEbjn.png", alt="A network waterfall diagram showing the LCP resource starting after the first resource, showing the opportunity for improvement", width="800", height="375" %}
 
-If you use a module bundler or build tool, include an appropriate plugin to minify CSS files on
-every build:
+Generally speaking, there are two factors that affect how quickly an LCP resource can be loading:
 
-+   For webpack: [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
-+   For Gulp: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
-+   For Rollup: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+- When the resource is discovered.
+- What priority the resource is given.
 
-<figure class="w-figure">
-  <img src="./lcp-change-minify-css.png" alt="Example of LCP improvement: Before and after minifying CSS">
-  <figcaption class="w-figcaption">Example of LCP improvement: Before and after minifying CSS</figcaption>
-</figure>
+#### Optimize when the resource is discovered
 
-{% Aside %}
-For more details, refer to the [Minify CSS](/minify-css/) guide.
-{% endAside %}
+To ensure your LCP resource starts loading as early as possible, it's critical that the resource is discoverable in the initial HTML document response by the browser's [preload scanner](/preload-scanner/). For example, in the following cases, the browser can discover the LCP resource by scanning the HTML document response:
 
-### Defer non-critical CSS
+- The LCP element is an `<img>` element, and its `src` or `srcset` attributes are present in the initial HTML markup.
+- The LCP element requires a CSS background image, but that image is preloaded via `<link rel="preload">` in the HTML markup (or via a `Link` header).
+- The LCP element is a text node that requires a web font to render, and the font is loaded via `<link rel="preload">` in the HTML markup (or via a `Link` header).
 
-Use the [Coverage](https://developers.google.com/web/tools/chrome-devtools/coverage) tab in Chrome
-DevTools to find any unused CSS on your web page.
+Here are some examples where the LCP resource cannot be discovered from scanning the HTML document response:
 
-![Coverage tab in Chrome DevTools](./coverage-panel-css.png)
+- The LCP element is an `<img>` that is dynamically added to the page via JavaScript.
+- The LCP element is lazily loaded with a JavaScript library that hides its `src` or `srcset` attributes (often as `data-src` or `data-srcset`).
+- The LCP element requires a CSS background image.
 
-To optimize:
+In each of these cases, the browser needs to run the script or apply the stylesheet—which usually involves waiting for network requests to finish—before it can discover the LCP resource and could start loading it. This is never optimal.
 
-+   Remove any unused CSS entirely or move it to another stylesheet if used on a separate
-    page of your site.
-+   For any CSS not needed for initial rendering, use
-    [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) to load files
-    asynchronously, which leverages `rel="preload" `and `onload`.
+To eliminate unnecessary resource load delay, your LCP resource should _always_ be discoverable from the HTML source. In cases where the resource is only referenced from an external CSS or JavaScript file, then the LCP resource should be preloaded, with a high fetch priority (more on [fetch priority in the next section](#optimize-the-priority-the-resource-is-given)); for example:
 
-    ```html
-    <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
-    ```
-<figure class="w-figure">
-  <img src="./lcp-defer-css.png" alt="Example of LCP improvement: Before and after deferring non-critical CSS">
-  <figcaption class="w-figcaption">Example of LCP improvement: Before and after deferring non-critical CSS</figcaption>
-</figure>
+```html
+<!-- Load the stylesheet that will reference the LCP image. -->
+<link rel="stylesheet" href="/path/to/styles.css">
 
-{% Aside %}
-For more details, refer to the [Defer non-critical CSS](/defer-non-critical-css/) guide.
+<!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
+<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">
+```
+
+{% Aside 'warning' %}
+On most pages, ensuring that the LCP resource starts loading at the same time as the first resource is good enough, but be aware that it is possible to construct a page where none of the resources are discovered early and all of them start loading significantly later than TTFB. So while comparing with the first resource is a good way to identify opportunities to improve, it may not be sufficient in some cases, so it's still important to measure this time relative to TTFB and ensure it remains small.
 {% endAside %}
 
-### Inline critical CSS
+#### Optimize the priority the resource is given
 
-Inline any critical-path CSS used for above-the-fold content by including it directly in `<head>.`
+Even if the LCP resource is discoverable from the HTML markup, it _still_ may not start loading as early as the first resource. This can happen if the browser preload scanner's priority heuristics do not recognize that the resource is important, or if it determines that other resources are more important.
 
-<figure class="w-figure">
-  <img src="./critical-css.png" class="w-screenshot w-screenshot--filled" alt="Critical CSS inlined">
-  <figcaption class="w-figcaption">Critical CSS inlined</figcaption>
-</figure>
+For example, you can delay your LCP image via HTML if you set [`loading="lazy"`](/browser-level-image-lazy-loading/) on your `<img>` element. Using lazy loading means that the resource will not be loaded until after layout confirms the image is in the viewport and so may begin loading later than it otherwise would.
 
-Inlining important styles eliminates the need to make a round-trip request to fetch critical CSS.
-Deferring the rest minimizes CSS blocking time.
-
-If you cannot manually add inline styles to your site, use a library to automate the process. Some
-examples:
+{% Aside 'warning' %}
+Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay, and will have a negative impact on LCP.
+{% endAside %}
 
-+   [Critical](https://github.com/addyosmani/critical),
-    [CriticalCSS](https://github.com/filamentgroup/criticalCSS), and
-    [Penthouse](https://github.com/pocketjoso/penthouse) are all packages that extract and inline
-    above-the-fold CSS
-+   [Critters](https://github.com/GoogleChromeLabs/critters) is a webpack plugin that inlines
-    critical CSS and lazy-loads the rest
+Even without lazy loading, images are not initially loaded with the highest priority by browsers as they are not render-blocking resources. You can hint to the browser as to which resources are most important via the [`fetchpriority`](/fetch-priority/) attribute for resources that could benefit from a higher priority:
 
-<figure class="w-figure">
-  <img src="./lcp-critical-css.png" alt="Example of LCP improvement: Before and after inlining critical CSS">
-  <figcaption class="w-figcaption">Example of LCP improvement: Before and after inlining critical CSS</figcaption>
-</figure>
+```html
+<img fetchpriority="high" src="/path/to/hero-image.webp">
+```
 
-{% Aside %}
-Take a look at the [Extract critical CSS](/extract-critical-css/) guide to learn more.
-{% endAside %}
+It's a good idea to set `fetchpriority="high"` on an `<img>` element if you think it's likely to be your page's LCP element—but limit this to just one or two images (based on common desktop and mobile viewport sizes), otherwise the signal becomes meaningless. You can also lower the priority of images that may be early in the document response, but isn't visible due to styling, such as images in carousel slides that are not visible at startup:
 
-### Reduce JavaScript blocking time
+```html
+<img fetchpriority="low" src="/path/to/carousel-slide-3.webp">
+```
 
-Download and serve the minimal amount of necessary JavaScript to users. Reducing the amount of
-blocking JavaScript results in a faster render, and consequently a better LCP.
+Deprioritizing certain resources can afford more bandwidth to resources that need it more—but be careful. Always check resource priority in DevTools and test changes with lab and field tools.
 
-This can be accomplished by optimizing your scripts in a few different ways:
+After you have optimized your LCP resource priority and discovery time, your network waterfall should look like this (with the LCP resource starting at the same time as the first resource):
 
-+   [Minify and compress JavaScript files](https://web.dev/reduce-network-payloads-using-text-compression/)
-+   [Defer unused JavaScript](https://web.dev/reduce-javascript-payloads-with-code-splitting/)
-+   [Minimize unused polyfills](https://web.dev/serve-modern-code-to-modern-browsers/)
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/f9s7SJSBNKcMm3VmcvtT.png", alt="A network waterfall diagram showing the LCP resource now starting at the same time as the first resource", width="800", height="375" %}
 
-{% Aside %}
-The [Optimize First Input Delay](/optimize-fid/) guide covers all techniques needed to reduce
-JavaScript blocking time in a little more detail.
+{% Aside 'important' %}
+Another reason your LCP resource may not start loading as early as possible—even when it's discoverable from the HTML source—is if it's hosted on a different origin, as these requests require the browser to connect to that origin before the resource can start loading. When possible, it's a good idea to host critical resources on the same origin as your HTML document resource because then those resources can save time by reusing the existing connection (more on this point later).
 {% endAside %}
 
-## Slow resource load times {: #slow-resource-load-times }
+### 2. Eliminate _element render delay_
 
-Although an increase in CSS or JavaScript blocking time will directly result in worse performance,
-the time it takes to load many other types of resources can also affect paint times. The types of
-elements that affect LCP are:
+The goal in this step is to ensure the LCP element can render _immediately_ after its resource has finished loading, no matter when that happens.
 
-+   `<img>` elements
-+   `<image>` elements inside an `<svg>` element
-+   `<video>` elements (if specified, the
-    [poster](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) image is
-    used to measure LCP)
-+   An element with a background image loaded via the
-    [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url()) function (as opposed to a CSS
-    gradient)
-+   [Block-level](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) elements
-    containing text nodes or other inline-level text elements
+The primary reason the LCP element _wouldn't_ be able to render immediately after its resource finishes loading is if rendering is [blocked](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/) for some other reason:
 
-The time it takes to load these elements if rendered above-the-fold will have a direct effect on
-LCP. There are a few ways to ensure these files are loaded as fast as possible:
+- Rendering of the entire page is blocked due to stylesheets or synchronous scripts in the `<head>` that are still loading.
+- The LCP resource has finished loading, but the LCP element has not yet been added to the DOM (it's waiting for some JavaScript code to load).
+- The element is being hidden by some other code, such as an A/B testing library that's still determining what experiment the user should be in.
+- The main thread is blocked due to [long tasks](/long-tasks-devtools/#what-are-long-tasks), and rendering work needs to wait until those long tasks complete.
 
-+   Optimize and compress images
-+   Preload important resources
-+   Compress text files
-+   Deliver different assets based on network connection (adaptive serving)
-+   Cache assets using a service worker
+The following sections explain how to address the most common causes of unnecessary element render delay.
 
-### Optimize and compress images
+#### Reduce or inline render-blocking stylesheets
 
-For many sites, images are the largest element in view when the page has finished loading. Hero
-images, large carousels or banner images are all common examples of this.
+Stylesheets loaded from the HTML markup will block rendering of all content that follows them, which is good, since you generally do not want to render unstyled HTML. However, if the stylesheet is so large that it takes significantly longer to load than the LCP resource, then it will prevent the LCP element from rendering—even after its resource has finished loading, as shown in this example:
 
-<figure class="w-figure">
-  <img width="300" src="./image-largest-element.png">
-  <figcaption>Image as the largest page element: <a href="https://design.google/">design.google</a></figcaption>
-</figure>
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/A5XTlQxIdF9WsLdXiBXE.png", alt="A network waterfall diagram showing a large CSS file blocking rendering of the LCP element because it takes longer to load than the LCP resource", width="800", height="450" %}
 
-Improving how long it takes to load and render these types of images will directly speed up LCP. To
-do this:
+To fix this, your options are to either:
 
-+   Consider not using an image in the first place. If it's not relevant to the content,
-    remove it.
-+   Compress images (with [Imagemin](/use-imagemin-to-compress-images) for example)
-+   Convert images into newer formats (JPEG 2000, JPEG XR, or WebP)
-+   Use responsive images
-+   Consider using an image CDN
+- inline the stylesheet into the HTML to avoid the additional network request; or,
+- reduce the size of the stylesheet.
 
-{% Aside %}
-Take a look at [Optimize your
-images](/fast/#optimize-your-images) for guides and resources that explain all of these techniques in detail.
-{% endAside %}
+In general, inlining your stylesheet is only recommended if your stylesheet is small since inlined content in the HTML cannot benefit from caching in subsequent page loads. If a stylesheet is so large that it takes longer to load than the LCP resource, then it's unlikely to be a good candidate for inlining.
 
-### Preload important resources
+In most cases, the best way to ensure the stylesheet does not block rendering of the LCP element is to reduce its size so that it's smaller than the LCP resource. This should ensure it's not a bottleneck for most visits.
 
-At times, important resources that are declared or used in a certain CSS or JavaScript file may be
-fetched later than you would like, such as a font tucked deep in one of the many CSS files of an
-application.
+Some recommendations to reduce the size of the stylesheet are:
 
-If you know that a particular resource should be prioritized, use `<link rel="preload">` to fetch it
-sooner. [Many types of
-resources](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded)
-can be preloaded, but you should first focus on [preloading critical
-assets](/preload-critical-assets/), such as fonts, above-the-fold images or videos,
-and critical-path CSS or JavaScript.
+- [Remove unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/): use Chrome DevTools to find CSS rules that aren't being used and can potentially be removed (or deferred).
+- [Defer non-critical CSS](/defer-non-critical-css/): split your stylesheet out into styles that are required for initial page load and then styles that can be loaded lazily.
+- [Minify and compress CSS](/reduce-network-payloads-using-text-compression/): for styles that are critical, make sure you're reducing their [transfer size](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/transferSize) as much as possible.
 
+#### Defer or inline render-blocking JavaScript
+
+It is almost never necessary to add synchronous scripts (scripts without the `async` or `defer` attributes) to the `<head>` of your pages, and doing so will almost always have a negative impact on performance.
+
+In cases where JavaScript code needs to run as early as possible in the page load, it's best to inline it so rendering isn't delayed waiting on another network request. As with stylesheets, though, you should only inline scripts if they're very small.
+
+{% Compare 'worse' %}
 ```html
-<link rel="preload" as="script" href="script.js">
-<link rel="preload" as="style" href="style.css">
-<link rel="preload" as="image" href="img.png">
-<link rel="preload" as="video" href="vid.webm" type="video/webm">
-<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
+<head>
+  <script src="/path/to/main.js"></script>
+</head>
 ```
+{% endCompare %}
 
-Since Chrome 73, preloading can be used along with [responsive images](/preload-responsive-images/) to combine both
-patterns for much faster image loading.
-
+{% Compare 'better' %}
 ```html
-<link
-  rel="preload"
-  as="image"
-  href="wolf.jpg"
-  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
-  imagesizes="50vw"
->
+<head>
+  <script>
+    // Inline script contents directly in the HTML.
+    // IMPORTANT: only do this for very small scripts.
+  </script>
+</head>
 ```
+{% endCompare %}
 
-### Compress text files
-
-Compression algorithms, like
-[Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) and
-[Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html), can
-significantly reduce the size of text files (HTML, CSS, JavaScript) as they're transferred between
-the server and browser. Gzip is effectively supported in all browsers and Brotli, which provides
-even better compression results, [can be used in almost all newer
-browsers](https://caniuse.com/#feat=brotli).
-
-Compressing your resources will minimize their delivery size, improving load times and consequently
-LCP.
-
-1.  First, check if your server already compresses files automatically. Most hosting
-    platforms, CDNs, and reverse proxy servers either encode assets with compression by default or
-    allow you to easily configure them.
-2.  If you need to modify your server to compress files, consider using Brotli instead of gzip
-    since it can provide better compression ratios.
-3.  Once you pick a compression algorithm to use, compress assets ahead of time during the build
-    process instead of on-the-fly as they are requested by the browser. This minimizes server
-    overhead and prevents delays when requests are made, especially when using high compression ratios.
-
-<figure class="w-figure">
-  <img src="./lcp-compression.png" alt="Example of LCP improvement: Before and after Brotli compression ">
-  <figcaption class="w-figcaption">Example of LCP improvement: Before and after Brotli compression </figcaption>
-</figure>
+#### Use server-side rendering
 
-{% Aside %}
-For more details, refer to the [Minify and compress
-network payloads](/reduce-network-payloads-using-text-compression/) guide.
-{% endAside %}
+[Server-side rendering](/rendering-on-the-web/#server-rendering) (SSR) is the process of running your client-side application logic on the server and responding to HTML document requests with the full HTML markup.
 
-### Adaptive serving
+From the perspective of optimizing LCP, there are two primary advantage of SSR:
 
-When loading resources that make up the main content of a page, it can be effective to conditionally
-fetch different assets depending on the user's device or network conditions. This can be done using
-the [Network Information](https://wicg.github.io/netinfo/), [Device
-Memory](https://www.w3.org/TR/device-memory/), and
-[HardwareConcurrency](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency)
-APIs.
+- Your image resources will be discoverable from the HTML source (as discussed in [step 1](#1-eliminate-resource-load-delay) earlier).
+- Your page content will not require additional JavaScript requests to finish before it can render.
 
-If you have large assets that are critical for initial rendering, you can use different variations
-of the same resource depending on the user's connection or device. For example, you can display an
-image instead of a video for any connection speeds lower than 4G:
+The main downside of SSR is it requires additional server processing time, which can slow down your TTFB. This trade-off is usually worth it though because server processing times are within your control, whereas the network and device capabilities of your users are not.
 
-```js
-if (navigator.connection && navigator.connection.effectiveType) {
-  if (navigator.connection.effectiveType === '4g') {
-    // Load video
-  } else {
-    // Load image
-  }
-}
-```
+A similar option to SSR is called static site generation (SSG) or [prerendering](/rendering-on-the-web/#terminology). This is the process of generating your HTML pages in a build step rather than on-demand. If prerendering is possible with your architecture, it's generally a better choice for performance.
 
-A list of useful properties that you can use:
+#### Break up long tasks
 
-+   `navigator.connection.effectiveType`: Effective connection type
-+   `navigator.connection.saveData`: Data-saver enabled/disabled
-+   `navigator.hardwareConcurrency`: CPU core count
-+   `navigator.deviceMemory`: Device Memory
+Even if you've followed the above advice, and your JavaScript code is not render-blocking nor is it responsible for rendering your elements, it can still delay LCP.
 
-{% Aside %}
-For more information, refer to [Adaptive serving based on
-network quality](/adaptive-serving-based-on-network-quality/).
-{% endAside %}
+The most common reason this happens is when pages load large JavaScript files, which need to be parsed and executed on the browser's main thread. This means that, even if your image resource is fully downloaded, it may still have to wait until an unrelated script finishes executing before it can render.
 
-### Cache assets using a service worker
+All browsers today render images on the main thread, which means anything that blocks the main thread can also lead to unnecessary _element render delay_.
 
-Service workers can be used for many useful tasks, including serving smaller HTML responses as
-mentioned earlier in this article. They can also be used to cache any static resource which can be
-served to the browser instead of from the network on repeat requests.
+### 3. Reduce _resource load time_
 
-Precaching critical resources using a service worker can reduce their load times significantly,
-especially for users who reload the web page with a weaker connection (or even access it offline).
-Libraries like [Workbox](https://developers.google.com/web/tools/workbox/) can make the process of
-updating precached assets easier than writing a custom service worker to handle this yourself.
+The goal of this step is to reduce the time spent transferring the bytes of the resource over the network to the user's device. In general, there are three ways to do that:
 
-{% Aside %}
-Take a look at [Network reliability](/reliable/) to learn more about service workers and Workbox.
+- Reduce the size of the resource.
+- Reduce the distance the resource has to travel.
+- Reduce contention for network bandwidth.
+- Eliminate the network time entirely.
+
+#### Reduce the size of the resource
+
+The LCP resource of a page (if it has one) will either be an image or a web font. The following guides go into great detail about how to reduce the size of both:
+
+- [Serve the optimal image size](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/)
+- [Use modern image formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/)
+- [Compress images](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+- [Reduce web font size](/reduce-webfont-size/)
+
+#### Reduce the distance the resource has to travel
+
+In addition to reducing the size of a resource, you can also reduce the load times by getting your servers as geographically close to your users as possible. And the best way to do that is to use a [content delivery network](/content-delivery-networks/) (CDN).
+
+In fact, [image CDNs](/image-cdns/) in particular are a great choice because they not only reduce the distance the resource has to travel, but they also generally reduce the size of the resource—automatically implementing all of the size-reduction recommendations from earlier for you.
+
+{% Aside 'important' %}
+While image CDNs are a great way to reduce resource load times, using a third-party domain to host your images comes with an additional connection cost. While preconnecting to the origin can mitigate some of this cost, the best option is to serve images from the same origin as your HTML document. Many CDNs allow you to proxy requests from your origin to theirs, which is a great option to look into if available.
 {% endAside %}
 
-## Client-side rendering {: #client-side-rendering }
+#### Reduce contention for network bandwidth
 
-Many sites use client-side JavaScript logic to render pages directly in the browser. Frameworks and
-libraries, like [React](https://reactjs.org/), [Angular](https://angular.io/), and
-[Vue](https://vuejs.org/), have made it easier to build single-page applications that handle
-different facets of a web page entirely on the client rather on the server.
+Even if you've reduced the size of your resource and the distance it has to travel, a resource can still take a long time to load if you're loading many other resources at the same time. This problem is known as _network contention_.
 
-If you're building a site that is mostly rendered on the client, you should be wary of the effect it
-can have on LCP if a large JavaScript bundle is used. If optimizations aren't in place to prevent
-it, users may not see or interact with any content on the page until all the critical JavaScript has
-finished downloading and executing.
+If you've given your LCP resource a [high `fetchpriority`](/fetch-priority/) and [started loading it as soon as possible](#1-eliminate-resource-load-delay) then the browser will do its best to prevent lower-priority resources from competing with it. However, if you're loading many resources with high `fetchpriority`, or if you're just loading a lot of resources in general, then it could affect how quickly the LCP resource loads.
 
-When building a client-side rendered site, consider the following optimizations:
+#### Eliminate the network time entirely
 
-+   Minimize critical JavaScript
-+   Use server-side rendering
-+   Use pre-rendering
+The best way to reduce resource load times is to eliminate the network entirely from the process. If you serve your resources with an [efficient cache-control policy](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/), then visitors who request those resources a second time will have them served from the cache—bringing the _resource load time_ to essentially zero!
 
-### Minimize critical JavaScript
+And if your LCP resource is a web font, in addition to [reducing web font size](/reduce-webfont-size/), you should also consider whether you need to block rendering on the web font resource load. If you set a [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) value of anything other than `auto` or `block`, then text will [always be visible during load](https://developer.chrome.com/docs/lighthouse/performance/font-display/), and LCP will not be blocked on an additional network request.
 
-If content on your site only becomes visible, or can be interacted with, after a certain amount of
-JavaScript is downloaded: it becomes even more important to cut down on the size of your bundle as
-much as possible. This can be done by:
+Finally, if your LCP resource is small, it may make sense to inline the resources as a [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), which will also eliminate the additional network request. However, using data URLs [comes with caveats](https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/) because then the resources cannot be cached and in some cases can lead to longer render delays because of the additional [decode cost](https://www.catchpoint.com/blog/data-uri).
 
-+   Minifying JavaScript
-+   Deferring unused JavaScript
-+   Minimizing unused polyfills
+### 4. Reduce _time to first byte_
 
-Go back to the [Reduce JavaScript blocking time](#reduce-javascript-blocking-time) section to read more about
-these optimizations.
+The goal of this step is to deliver the initial HTML as quickly as possible. This step is listed last because it's often the one developers have the least control over. However, it's also one of the most important steps because it directly affects every step that comes after it. Nothing can happen on the frontend until the backend delivers that first byte of content, so anything you can do to speed up your TTFB will improve every other load metric as well.
 
-### Use server-side rendering
+A common cause of a slow TTFB for an otherwise fast site is making visitors wade through several redirects before finally arriving at the final URL. This can happen when you have visitors from advertisements, or via URL shorteners. Always try to minimize the number of redirects a visitor must wait through.
 
-Minimizing the amount of JavaScript should always be the first thing to focus on for sites that are
-mostly client-rendered. However, you should also consider combining a server rendering experience to
-improve LCP as much as possible.
+Another common cause is when cached content cannot be used from a CDN edge server, and all requests must be directed all the way back to the origin server. This can happen if unique URL parameters are used by visitors for analytics—even if they do not result in different pages.
 
-This concept works by using the server to render the application into HTML, where the client then
-"[hydrates](https://www.gatsbyjs.org/docs/react-hydration/)" all the JavaScript and required data
-onto the same DOM content. This can improve LCP by ensuring the main content of the page is first
-rendered on the server rather than only on the client, but there are a few drawbacks:
+For specific guidance on this topic, see [Optimize TTFB](/optimize-ttfb/).
 
-+   Maintaining the same JavaScript-rendered application on the server and the client can
-    increase complexity.
-+   Executing JavaScript to render an HTML file on the server will always increase server
-    response times (TTFB) as compared to just serving static pages from the server.
-+   A server-rendered page may look like it can be interacted with, but it can't respond to any
-    user input until all the client-side JavaScript has executed. In short, it can make [**Time to
-    Interactive**](/tti/) (TTI) worse.
+## Monitor LCP breakdown in JavaScript
 
-### Use pre-rendering
+The timing information for all of the LCP sub-parts discussed above is available to you in JavaScript through a combination of the following performance APIs:
 
-Pre-rendering is a separate technique that is less complex than server-side rendering and also
-provides a way to improve LCP in your application. A headless browser, which is a browser without a
-user interface, is used to generate static HTML files of every route during build time. These files
-can then be shipped along with the JavaScript bundles that are needed for the application.
+- [Largest Contentful Paint API](https://w3c.github.io/largest-contentful-paint/)
+- [Navigation Timing API](https://www.w3.org/TR/navigation-timing-2/)
+- [Resource Timing API](https://www.w3.org/TR/resource-timing-2/)
 
-With pre-rendering, TTI is still negatively impacted but server response times aren't as affected as
-they would be with a server-side rendering solution that dynamically renders each page only after
-it's requested.
+The benefit to computing these timing values in JavaScript is it allows you to send them to an analytics provider or log them to your developer tools to help with debugging and optimizing.
 
-<figure class="w-figure">
-  <img src="./lcp-prerendering.png" alt="Example of LCP improvement: Before and after pre-rendering">
-  <figcaption class="w-figcaption">Example of LCP improvement: Before and after pre-rendering</figcaption>
-</figure>
+For example, the following screenshot uses the `performance.measure()` method from the [User Timing API](https://w3c.github.io/user-timing/) to add bars to the Timings track in the Chrome DevTools Performance panel.
 
-{% Aside %}
-For a deeper dive into different server-rendering architectures, take a look at [Rendering on the
-web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web).
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/swFmxNjI5nLagUOrIjZo.png", alt="User Timing measures of the LCP sub-parts visualized in Chrome DevTools", width="800", height="471" %}
+
+Visualizations in the timings track are particularly helpful when looked at alongside the Network and Main thread tracks, because you can see at a glance what else is happening on the page during these timespans.
+
+In addition to visualizing the LCP sub-parts in the timings track, you can also use JavaScript to compute what percentage each sub-part is of the total LCP time. With that information, you can determine whether your pages are meeting the [recommended percentage breakdowns](#optimal-sub-part-times) described earlier.
+
+This screenshot shows an example that logs the total time of each LCP sub-part, as well as its percentage of the total LCP time to the console.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/zCB4PVlHUX9Iz5NSwdMu.png", alt="The LCP sub-part times, as well as their percent of LCP, printed to the console", width="800", height="267" %}
+
+Both of these visualizations were created with the following code:
+
+```js
+const LCP_SUB_PARTS = [
+  'Time to first byte',
+  'Resource load delay',
+  'Resource load time',
+  'Element render delay',
+];
+
+new PerformanceObserver((list) => {
+  const lcpEntry = list.getEntries().at(-1);
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  const lcpResEntry = performance
+    .getEntriesByType('resource')
+    .filter((e) => e.name === lcpEntry.url)[0];
+
+  // Ignore LCP entries that aren't images to reduce DevTools noise.
+  // Comment this line out if you want to include text entries.
+  if (!lcpEntry.url) return;
+
+  // Compute the start and end times of each LCP sub-part.
+  // WARNING! If your LCP resource is loaded cross-origin, make sure to add
+  // the `Timing-Allow-Origin` (TAO) header to get the most accurate results.
+  const ttfb = navEntry.responseStart;
+  const lcpRequestStart = Math.max(
+    ttfb,
+    // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
+    lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0
+  );
+  const lcpResponseEnd = Math.max(
+    lcpRequestStart,
+    lcpResEntry ? lcpResEntry.responseEnd : 0
+  );
+  const lcpRenderTime = Math.max(
+    lcpResponseEnd,
+    // Use LCP startTime (which is the final LCP time) as sometimes
+    // slight differences between loadTime/renderTime and startTime
+    // due to rounding precision.
+    lcpEntry ? lcpEntry.startTime : 0
+  );
+
+  // Clear previous measures before making new ones.
+  // Note: due to a bug this does not work in Chrome DevTools.
+  LCP_SUB_PARTS.forEach((part) => performance.clearMeasures(part));
+
+  // Create measures for each LCP sub-part for easier
+  // visualization in the Chrome DevTools Performance panel.
+  const lcpSubPartMeasures = [
+    performance.measure(LCP_SUB_PARTS[0], {
+      start: 0,
+      end: ttfb,
+    }),
+    performance.measure(LCP_SUB_PARTS[1], {
+      start: ttfb,
+      end: lcpRequestStart,
+    }),
+    performance.measure(LCP_SUB_PARTS[2], {
+      start: lcpRequestStart,
+      end: lcpResponseEnd,
+    }),
+    performance.measure(LCP_SUB_PARTS[3], {
+      start: lcpResponseEnd,
+      end: lcpRenderTime,
+    }),
+  ];
+
+  // Log helpful debug information to the console.
+  console.log('LCP value: ', lcpRenderTime);
+  console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
+  console.table(
+    lcpSubPartMeasures.map((measure) => ({
+      'LCP sub-part': measure.name,
+      'Time (ms)': measure.duration,
+      '% of LCP': `${
+        Math.round((1000 * measure.duration) / lcpRenderTime) / 10
+      }%`,
+    }))
+  );
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+You can use this code as-is for local debugging, or modify it to send this data to an analytics provider so you can get a better understanding of what the breakdown of LCP is on your pages for real users.
+
+{% Aside warning %}
+<p>
+The above code works for standard navigations, but extra consideration must be taken for [prerendered pages](https://developer.chrome.com/blog/prerender-pages/), which should be measured from the activation start time but which has been kept out of this code for simplicity.
+</p>
+<p>
+The [web-vitals library](https://github.com/GoogleChrome/web-vitals) includes this breakdown in the attribution build, and includes these considerations.
+</p>
+<p>
+For those looking to implement their own solution, the [code for this is open source](https://github.com/GoogleChrome/web-vitals/blob/main/src/attribution/onLCP.ts) and is similar to above but with extra lofic for activation start.
+</p>
 {% endAside %}
 
-## Developer tools
+## Monitor LCP breakdown via the Web Vitals extension
+
+The [Web Vitals extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) will [log the LCP time, LCP element, and these four sub-parts in the console logging](/debug-cwvs-with-web-vitals-extension/#lcp-debug-information), to easily allow you to see this breakdown.
 
-A number of tools are available to measure and debug LCP:
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/FEFEkgKuC6RxVh7MHmkn.png", alt="Screenshot of the console logging of the Web Vitals extension showing the LCP sub-part timings", width="800", height="239" %}
 
-+   [Lighthouse 6.0](https://developers.google.com/web/tools/lighthouse) includes support for
-    measuring LCP in a lab setting.
 
-    ![Lighthouse 6.0](./lighthouse.jpg)
+## Summary
 
-+   The **Timings** section of the
-    [Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)
-    panel in Chrome DevTools includes a LCP marker and shows you which element is associated with
-    LCP when you hover over the **Related Node** field.
+LCP is complex, and its timing can be affected by a number of factors. But if you consider that optimizing LCP is primarily about optimizing the load of the LCP resource, it can significantly simplify things.
 
-    ![LCP in Chrome DevTools](./lcp-chrome-devtools.png)
+At a high level, optimizing LCP can be summarized in four steps:
 
-+   [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report)
-    provides real-world LCP values aggregated at the origin-level
+1. Ensure the LCP resource starts loading as early as possible.
+2. Ensure the LCP element can render as soon as its resource finishes loading.
+3. Reduce the load time of the LCP resource as much as you can without sacrificing quality.
+4. Deliver the initial HTML document as fast as possible.
 
-_With thanks to Philip Walton, Katie Hempenius, Kayce Basques, and Ilya Grigorik for their reviews._
+If you’re able to follow these steps on your pages, then you should feel confident that you’re delivering an optimal loading experience to your users, and you should see that reflected in your real-world LCP scores.
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-change-minify-css.png b/src/site/content/en/blog/optimize-lcp/lcp-change-minify-css.png
deleted file mode 100644
index 62bb96397b1..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-change-minify-css.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-chrome-devtools.png b/src/site/content/en/blog/optimize-lcp/lcp-chrome-devtools.png
deleted file mode 100644
index e6b86556d6f..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-chrome-devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-compression.png b/src/site/content/en/blog/optimize-lcp/lcp-compression.png
deleted file mode 100644
index 71fdf41e8e5..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-compression.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-critical-css.png b/src/site/content/en/blog/optimize-lcp/lcp-critical-css.png
deleted file mode 100644
index cce282ab7d2..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-critical-css.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-defer-css.png b/src/site/content/en/blog/optimize-lcp/lcp-defer-css.png
deleted file mode 100644
index e48c455cefb..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-defer-css.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-prerendering.png b/src/site/content/en/blog/optimize-lcp/lcp-prerendering.png
deleted file mode 100644
index c54bdb06d9e..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-prerendering.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lcp-sw-caching.png b/src/site/content/en/blog/optimize-lcp/lcp-sw-caching.png
deleted file mode 100644
index b97a0d7b605..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lcp-sw-caching.png and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-lcp/lighthouse.jpg b/src/site/content/en/blog/optimize-lcp/lighthouse.jpg
deleted file mode 100644
index 2323d652bbc..00000000000
Binary files a/src/site/content/en/blog/optimize-lcp/lighthouse.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/optimize-long-tasks/index.md b/src/site/content/en/blog/optimize-long-tasks/index.md
new file mode 100644
index 00000000000..2e5ea5c83e8
--- /dev/null
+++ b/src/site/content/en/blog/optimize-long-tasks/index.md
@@ -0,0 +1,410 @@
+---
+layout: post
+title: Optimize long tasks
+subhead: |
+  You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?
+authors:
+  - jlwagner
+date: 2022-09-30
+updated: 2023-08-28
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/MpP0GrDpLMztUsdMocP9.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Eup7oLu7L0bglCH4YPGq.jpg
+alt: A photograph of a spool of purple thread unraveling to the right until it goes out of the frame.
+description: |
+  You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?
+tags:
+  - blog
+  - performance
+  - javascript
+---
+
+If you read lots of stuff about web performance, the advice for keeping your JavaScript apps fast tends to involve some of these tidbits:
+
+- "Don't block the main thread."
+- "Break up your long tasks."
+
+What does any of that mean? Shipping _less_ JavaScript is good, but does that automatically equate to snappier user interfaces throughout the page lifecycle? Maybe, but maybe not.
+
+To get your head around why it's important to optimize tasks in JavaScript, you need to understand the role of tasks and how the browser handles them&mdash;and that starts with understanding what a task is.
+
+## What is a task?
+
+A _task_ is any discrete piece of work that the browser does. Tasks involve work such as rendering, parsing HTML and CSS, running the JavaScript code you write, and other things you may not have direct control over. Of all of this, the JavaScript you write and deploy to the web is a major source of tasks.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uDfxNSJzEDGD2jy1fU45.png", alt="A screenshot of a task as depicted in the performance profliler of Chrome's DevTools. The task is at the top of a stack, with a click event handler, a function call, and more items beneath it. The task also includes some rendering work on the right-hand side.", width="800", height="338" %}
+  <figcaption>
+    A depiction of a task kicked off by a <code>click</code> event handler in the performance profiler in Chrome DevTools.
+  </figcaption>
+</figure>
+
+Tasks impact performance in a couple of ways. For example, when a browser downloads a JavaScript file during startup, it queues tasks to parse and compile that JavaScript so it can be executed. Later on in the page lifecycle, tasks are kicked off when your JavaScript does work such as driving interactions through event handlers, JavaScript-driven animations, and background activity such as analytics collection. All of this stuff&mdash;with the exception of [web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers) and similar APIs&mdash;happens on the main thread.
+
+## What is the main thread?
+
+The _main thread_ is where most tasks are run in the browser. It's called the main thread for a reason: it's the one thread where nearly all the JavaScript you write does its work.
+
+The main thread can only process one task at a time. When tasks stretch beyond a certain point&mdash;50 milliseconds to be exact&mdash;they're classified as _long tasks_. If the user is attempting to interact with the page while a long task runs&mdash;or if an important rendering update needs to happen&mdash;the browser will be delayed in handling that work. This results in interaction or rendering latency.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZQtmFaSwfopJ3mEn7whr.png", alt="A long task in the performance profiler of Chrome's DevTools. The blocking portion of the task (greater than 50 milliseconds) is depicted with a pattern of red diagonal stripes.", width="800", height="171" %}
+  <figcaption>
+    A long task as depicted in Chrome's performance profiler. Long tasks are indicated by a red triangle in the corner of the task, with the blocking portion of the task filled in with a pattern of diagonal red stripes.
+  </figcaption>
+</figure>
+
+You need to _break up_ tasks. This means taking a single long task and dividing it into smaller tasks that take less time to run individually.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8Bhl9Ilki4tM0aC1nfn8.png", alt="A single long task versus the same task broken up into shorter task. The long task is one large rectangle, whereas the chunked task is five smaller boxes which are collectively the same width as the long task.", width="800", height="242" %}
+  <figcaption>
+    A visualization of a single long task versus that same task broken up into five shorter tasks.
+  </figcaption>
+</figure>
+
+This matters because when tasks are broken up, the browser has more opportunities to respond to higher-priority work&mdash;and that includes user interactions.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/0yV0ynwW7FujIwvCbCxQ.png", alt="A depiction of how breaking up a task can facilitate a user interaction. At the top, a long task blocks an event handler from running until the task is finished. At the bottom, the chunked up task permits the event handler to run sooner than it otherwise would have.", width="800", height="448" %}
+  <figcaption>
+    A visualization of what happens to interactions when tasks are too long and the browser can't respond quickly enough to interactions, versus when longer tasks are broken up into smaller tasks.
+  </figcaption>
+</figure>
+
+At the top of the preceding figure, an event handler queued up by a user interaction had to wait for a single long task before it could run, This delays the interaction from taking place. At the bottom, the event handler has a chance to run sooner. Because the event handler had an opportunity to run in between smaller tasks, it runs sooner than if it had to wait for a long task to finish. In the top example, the user might have noticed lag; in the bottom, the interaction might have felt _instant_.
+
+The problem, though, is that the advice of "break up your long tasks" and "don't block the main thread" isn't specific enough unless you already know _how_ to do those things. That's what this guide will explain.
+
+## Task management strategies
+
+A common bit of advice in software architecture is to break up your work into smaller functions. This gives you the benefits of better code readability, and project maintainability. This also makes tests easier to write.
+
+```js
+function saveSettings () {
+  validateForm();
+  showSpinner();
+  saveToDatabase();
+  updateUI();
+  sendAnalytics();
+}
+```
+
+In this example, there's a function named `saveSettings()` that calls five functions within it to do the work, such as validating a form, showing a spinner, sending data, and so on. Conceptually, this is well architected. If you need to debug one of these functions, you can traverse the project tree to figure out what each function does.
+
+The problem, however, is that JavaScript doesn't run each of these functions as separate tasks because they are being executed within the `saveSettings()` function. **This means that all five functions run as a single task.**
+
+{% Aside 'important' %}
+JavaScript works this way because it uses the [run-to-completion model](https://developer.mozilla.org/docs/Web/JavaScript/EventLoop#run-to-completion) of task execution. This means that each task will run until it finishes, regardless of how long it blocks the main thread.
+{% endAside %}
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/1gENo7PnUwPhbTJmQKmX.png", alt="The saveSettings function as depicted in Chrome's performance profiler. While the top-level function calls five other functions, all the work takes place in one long task that blocks the main thread.", width="800", height="301" %}
+  <figcaption>
+    A single function <code>saveSettings()</code> that calls five functions. The work is run as part of one long monolithic task.
+  </figcaption>
+</figure>
+
+In the best case scenario, even just one of those functions can contribute 50 milliseconds or more to the total length of the task. In the worst case, more of those tasks can run quite a bit longer&mdash;especially on resource-constrained devices. What follows is a set of strategies you can use to break up and prioritize tasks.
+
+### Manually defer code execution
+
+One method developers have used to break up tasks into smaller ones involves `setTimeout()`. With this technique, you pass the function to `setTimeout()`. This postpones execution of the callback into a separate task, even if you specify a timeout of `0`.
+
+```js
+function saveSettings () {
+  // Do critical work that is user-visible:
+  validateForm();
+  showSpinner();
+  updateUI();
+
+  // Defer work that isn't user-visible to a separate task:
+  setTimeout(() => {
+    saveToDatabase();
+    sendAnalytics();
+  }, 0);
+}
+```
+
+This works well if you have a series of functions that need to run sequentially, but your code may not always be organized this way. For example, you could have a large amount of data that needs to be processed in a loop, and that task could take a very long time if you have millions of items.
+
+```js
+function processData () {
+  for (const item of largeDataArray) {
+    // Process the individual item here.
+  }
+}
+```
+
+Using `setTimeout()` here is problematic, because the ergonomics of it make it difficult to implement, and the entire array of data could take a very long time to process, even if each item can be processed very quickly. It all adds up, and `setTimeout()` isn't the right tool for the job&mdash;at least not when used this way.
+
+In addition to `setTimeout()`, there are a few other APIs that allow you to defer code execution to a subsequent task. One [involves using `postMessage()` for faster timeouts](https://dbaron.org/log/20100309-faster-timeouts). You can also break up work using `requestIdleCallback()`&mdash;but beware!&mdash;`requestIdleCallback()` schedules tasks at the lowest possible priority, and only during browser idle time. When the main thread is congested, tasks scheduled with `requestIdleCallback()` may never get to run.
+
+### Use `async`/`await` to create yield points
+
+A phrase you'll see throughout the rest of this guide is "yield to the main thread"&mdash;but what does that mean? Why should you do it? When should you do it?
+
+{% Aside 'important' %}
+When you _yield_ to the main thread, you're giving it an opportunity to handle more important tasks than the ones that are currently queued up. Ideally, you should yield to the main thread whenever you have some crucial user-facing work that needs to execute sooner than if you didn't yield. **Yielding to the main thread creates opportunities for critical work to run sooner.**
+{% endAside %}
+
+When tasks are broken up, other tasks can be prioritized better by the browser's internal prioritization scheme. One way to yield to the main thread involves using a combination of a `Promise` that resolves with a call to `setTimeout()`:
+
+```js
+function yieldToMain () {
+  return new Promise(resolve => {
+    setTimeout(resolve, 0);
+  });
+}
+```
+
+{% Aside 'caution' %}
+While this code example returns a `Promise` that resolves after a call to `setTimeout()`, it's not the `Promise` that is responsible for running the rest of the code in a new task, it's the `setTimeout()` call. Promise callbacks run as [microtasks](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks_vs_microtasks) rather than tasks, and therefore don't yield to the main thread.
+{% endAside %}
+
+In the `saveSettings()` function, you can yield to the main thread after each bit of work if you `await` the `yieldToMain()` function after each function call:
+
+```js
+async function saveSettings () {
+  // Create an array of functions to run:
+  const tasks = [
+    validateForm,
+    showSpinner,
+    saveToDatabase,
+    updateUI,
+    sendAnalytics
+  ]
+
+  // Loop over the tasks:
+  while (tasks.length > 0) {
+    // Shift the first task off the tasks array:
+    const task = tasks.shift();
+
+    // Run the task:
+    task();
+
+    // Yield to the main thread:
+    await yieldToMain();
+  }
+}
+```
+
+{% Aside 'important' %}
+You don't have to yield after _every_ function call. For example, if you run two functions that result in critical updates to the user interface, you probably don't want to yield in between them. If you can, let that work run first, _then_ consider yielding in between functions that do less critical or background work that the user doesn't see.
+{% endAside %}
+
+The result is that the once-monolithic task is now broken up into separate tasks.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mzrFeqjk00zUlKK0xzI8.png", alt="The same saveSettings function depicted in Chrome's performance profiler, only with yielding. The result is the once-monolithic task is now broken up into five separate tasks&mdash;one for each function.", width="800", height="350" %}
+  <figcaption>
+    The <code>saveSettings()</code> function now executes its child functions as separate tasks.
+  </figcaption>
+</figure>
+
+The benefit of using a promise-based approach to yielding rather than manual use of `setTimeout()` is better ergonomics. Yield points become declarative, and therefore easier to write, read, and understand.
+
+### Yield only when necessary
+
+What if you have a bunch of tasks, but you only want to yield if the user attempts to interact with the page? That's the kind of thing that [`isInputPending()`](/isinputpending/) was made for.
+
+`isInputPending()` is a function you can run at any time to determine if the user is attempting to interact with a page element: a call to `isInputPending()` will return `true`. It returns `false` otherwise.
+
+Say you have a queue of tasks you need to run, but you don't want to get in the way of any inputs. This code&mdash;which uses both `isInputPending()` and our custom `yieldToMain()` function&mdash;ensures that an input won't be delayed while the user is trying to interact with the page:
+
+```js
+async function saveSettings () {
+  // A task queue of functions
+  const tasks = [
+    validateForm,
+    showSpinner,
+    saveToDatabase,
+    updateUI,
+    sendAnalytics
+  ];
+  
+  while (tasks.length > 0) {
+    // Yield to a pending user input:
+    if (navigator.scheduling.isInputPending()) {
+      // There's a pending user input. Yield here:
+      await yieldToMain();
+    } else {
+      // Shift the task out of the queue:
+      const task = tasks.shift();
+
+      // Run the task:
+      task();
+    }
+  }
+}
+```
+
+While `saveSettings()` runs, it will loop over the tasks in the queue. If `isInputPending()` returns `true` during the loop, `saveSettings()` will call `yieldToMain()` so the user input can be handled. Otherwise, it will shift the next task off the front of the queue and run it continuously. It will do this until no more tasks are left.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Oz00JZNrYH4dNE3pmYss.png", alt="A depiction of the saveSettings function running in Chrome's performance profiler. The resulting task blocks the main thread until isInputPending returns true, at which point, the task yields to the main thread.", width="800", height="260" %}
+  <figcaption>
+    <code>saveSettings()</code> runs a task queue for five tasks, but the user has clicked to open a menu while the second work item was running. <code>isInputPending()</code> yields to the main thread to handle the interaction, and resume running the rest of the tasks.
+  </figcaption>
+</figure>
+
+{% Aside %}
+`isInputPending()` may not always return `true` immediately after user input. This is because it takes time for the operating system to tell the browser that the interaction occurred. This means that other code may have already started executing (as you can see with the `saveToDatabase()` function in the above screenshot). Even if you use `isInputPending()` it's still crucial that you limit the amount of work you do in each function.
+{% endAside %}
+
+Using `isInputPending()` in combination with a yielding mechanism is a great way to get the browser to stop whatever tasks it's processing so that it can respond to critical user-facing interactions. That can help improve your page's ability to respond to the user in many situations when a lot of tasks are in flight.
+
+Another way to use `isInputPending()`&mdash;particularly if you're concerned about providing a fallback for browsers that don't support it&mdash;is to use a time-based approach in conjunction with the [optional chaining operator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining):
+
+```js
+async function saveSettings () {
+  // A task queue of functions
+  const tasks = [
+    validateForm,
+    showSpinner,
+    saveToDatabase,
+    updateUI,
+    sendAnalytics
+  ];
+  
+  let deadline = performance.now() + 50;
+
+  while (tasks.length > 0) {
+    // Optional chaining operator used here helps to avoid
+    // errors in browsers that don't support `isInputPending`:
+    if (navigator.scheduling?.isInputPending() || performance.now() >= deadline) {
+      // There's a pending user input, or the
+      // deadline has been reached. Yield here:
+      await yieldToMain();
+
+      // Extend the deadline:
+      deadline = performance.now() + 50;
+
+      // Stop the execution of the current loop and
+      // move onto the next iteration:
+      continue;
+    }
+
+    // Shift the task out of the queue:
+    const task = tasks.shift();
+
+    // Run the task:
+    task();
+  }
+}
+```
+
+With this approach, you get a fallback for browsers that don't support `isInputPending()` by using a time-based approach that uses (and adjusts) a deadline so that work will be broken up where necessary, whether by yielding to user input, or by a certain point in time.
+
+## Gaps in current APIs
+
+The APIs mentioned so far can help you break up tasks, but they have a significant downside: when you yield to the main thread by deferring code to run in a subsequent task, that code gets added to the very end of the task queue.
+
+If you control all the code on your page, it's possible to create your own scheduler with the ability to prioritize tasks, but third-party scripts won't use your scheduler. In effect, you're not really able to _prioritize_ work in such environments. You can only chunk it up, or explicitly yield to user interactions.
+
+Fortunately, there is a dedicated scheduler API that is currently in development that addresses these problems.
+
+### A dedicated scheduler API
+
+The scheduler API currently offers the `postTask()` function which, at the time of writing, is available in Chromium browsers, and in Firefox behind a flag. `postTask()` allows for finer-grained scheduling of tasks, and is one way to help the browser prioritize work so that low priority tasks yield to the main thread. `postTask()` uses promises, and accepts a `priority` setting.
+
+The `postTask()` API has three priorities you can use:
+
+- `'background'` for the lowest priority tasks.
+- `'user-visible'` for medium priority tasks. This is the default if no `priority` is set.
+- `'user-blocking'` for critical tasks that need to run at high priority.
+
+Take the following code as an example, where the `postTask()` API is used to run three tasks at the highest possible priority, and the remaining two tasks at the lowest possible priority.
+
+```js
+function saveSettings () {
+  // Validate the form at high priority
+  scheduler.postTask(validateForm, {priority: 'user-blocking'});
+
+  // Show the spinner at high priority:
+  scheduler.postTask(showSpinner, {priority: 'user-blocking'});
+
+  // Update the database in the background:
+  scheduler.postTask(saveToDatabase, {priority: 'background'});
+
+  // Update the user interface at high priority:
+  scheduler.postTask(updateUI, {priority: 'user-blocking'});
+
+  // Send analytics data in the background:
+  scheduler.postTask(sendAnalytics, {priority: 'background'});
+};
+```
+
+Here, the priority of tasks is scheduled in such a way that browser-prioritized tasks&mdash;such as user interactions&mdash;can work their way in. 
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/J6Ec735EReBFCTj1CuVf.png", alt="The saveSettings function as depicted in Chrome's performance profiler, but using postTask. postTask splits up each function saveSettings runs, and prioritizes them such that a user interaction has a chance to run without being blocked.", width="800", height="342" %}
+  <figcaption>
+    When <code>saveSettings()</code> is run, the function schedules the individual functions using <code>postTask()</code>. The critical user-facing work is scheduled at high priority, while work the user doesn't know about is scheduled to run in the background. This allows for user interactions to execute more quickly, as the work is both broken up <em>and</em> prioritized appropriately.
+  </figcaption>
+</figure>
+
+This is a simplistic example of how `postTask()` can be used. It's possible to instantiate different `TaskController` objects that can share priorities between tasks, including the ability to change priorities for different `TaskController` instances as needed.
+
+{% Aside 'important' %}
+[`postTask()` is not supported in all browsers](https://caniuse.com/mdn-api_scheduler_posttask). You can use feature detection to see if it's available, or consider using [a polyfill](https://www.npmjs.com/package/scheduler-polyfill).
+{% endAside %}
+
+### Built-in yield with continuation via `scheduler.yield`
+
+{% Aside 'important' %}
+For a more detailed explanation on `scheduler.yield`, read [this post about its origin trial](https://developer.chrome.com/blog/introducing-scheduler-yield-origin-trial/), as well as [its explainer](https://github.com/WICG/scheduling-apis/blob/main/explainers/yield-and-continuation.md).
+{% endAside %}
+
+One proposed part of the scheduler API is `scheduler.yield`, an API specifically designed for yielding to the main thread in the browser [which is currently available to try as an origin trial](https://developer.chrome.com/origintrials/#/view_trial/836543630784069633). Its use resembles the `yieldToMain()` function demonstrated earlier in this article:
+
+```js
+async function saveSettings () {
+  // Create an array of functions to run:
+  const tasks = [
+    validateForm,
+    showSpinner,
+    saveToDatabase,
+    updateUI,
+    sendAnalytics
+  ]
+
+  // Loop over the tasks:
+  while (tasks.length > 0) {
+    // Shift the first task off the tasks array:
+    const task = tasks.shift();
+
+    // Run the task:
+    task();
+
+    // Yield to the main thread with the scheduler
+    // API's own yielding mechanism:
+    await scheduler.yield();
+  }
+}
+```
+
+You'll note that the code above is largely familiar, but instead of using `yieldToMain()`, you call and `await scheduler.yield()` instead.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5q9WG0lmBOwlqGYK16hd.png", alt="Three diagrams depicting tasks without yielding, yielding, and with yielding and continuation. Without yielding, there are long tasks. With yielding, there are more tasks that are shorter, but may be interrupted by other unrelated tasks. With yielding and continuation, there are more tasks that are shorter, but their order of execution is preserved.", width="800", height="337" %}
+  <figcaption>
+    A visualization of task execution without yielding, with yielding, and with yielding and continuation. When <code>scheduler.yield()</code> is used, task execution picks up where it left off even after the yield point.
+  </figcaption>
+</figure>
+
+The benefit of `scheduler.yield()` is continuation, which means that if you yield in the middle of a set of tasks, the other scheduled tasks will continue in the same order after the yield point. **This avoids code from third-party scripts from usurping the order of your code's execution.**
+
+## Conclusion
+
+Managing tasks is challenging, but doing so helps your page respond more quickly to user interactions. There's no one single piece of advice for managing and prioritizing tasks. Rather, it's a number of different techniques. To reiterate, these are the main things you'll want to consider when managing tasks:
+
+- Yield to the main thread for critical, user-facing tasks.
+- Use `isInputPending()` to yield to the main thread when the user is trying to interact with the page.
+- Prioritize tasks with `postTask()`.
+- Finally, **do as little work as possible in your functions.**
+
+With one or more of these tools, you should be able to structure the work in your application so that it prioritizes the user's needs, while ensuring that less critical work still gets done. That's going to create a better user experience which is more responsive and more enjoyable to use.
+
+_Special thanks to [Philip Walton](https://philipwalton.com/) for his technical vetting of this article._
+
+_Hero image sourced from [Unsplash](https://unsplash.com/), courtesy of [Amirali Mirhashemian](https://unsplash.com/@amir_v_ali)._
diff --git a/src/site/content/en/blog/optimize-ttfb/index.md b/src/site/content/en/blog/optimize-ttfb/index.md
new file mode 100644
index 00000000000..ca5b12159cc
--- /dev/null
+++ b/src/site/content/en/blog/optimize-ttfb/index.md
@@ -0,0 +1,260 @@
+---
+title: Optimize Time to First Byte
+subhead: |
+  Learn how to optimize for the Time to First Byte metric.
+authors:
+  - jlwagner
+  - tunetheweb
+date: 2023-01-19
+updated: 2023-07-07
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IuvYBfNBVKH7qU3872qg.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/OBITO4G8MUJMILC7IFE0.jpg
+alt: A picture of several racks of servers, with white text superimposed on it that reads "Optimize Time to First Byte".
+description: |
+  Learn how to optimize for the Time to First Byte metric.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Time to First Byte (TTFB)](/ttfb/) is a foundational web performance metric that precedes every other meaningful user experience metric such as [First Contentful Paint (FCP)](/fcp/) and [Largest Contentful Paint (LCP)](/lcp/). This means that high TTFB values add time to the metrics that follow it.
+
+It's recommended that your server responds to navigation requests quickly enough so that the **75th percentile** of users experience an FCP [within the "good" threshold](/fcp/#what-is-a-good-fcp-score). As a rough guide, most sites should strive to have a TTFB of **0.8 seconds or less**.
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/ILJ1xKjzVisqOPPyHYVA.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/EcKicxW5ErYYhf8RvpeO.svg",
+        alt="Good TTFB values are 0.8 seconds or less, poor values are greater than 1.8 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
+{% Aside 'important' %}
+<p>TTFB is not a [Core Web Vitals](/vitals/) metric, so it's not absolutely necessary that sites meet the "good" TTFB threshold, provided that it doesn't impede their ability to score well on the metrics that matter.<p>
+<p>Websites vary in how they deliver content. A low TTFB is crucial for getting markup out to the client as soon as possible. However, if a website delivers the initial markup quickly, but that markup then requires JavaScript to populate it with meaningful content—as is the the case with Single Page Applications (SPAs)—then achieving the lowest possible TTFB is especially important so that the client-rendering of markup can occur sooner.<p>
+<p>Conversely, a server-rendered site that does not require as much client-side work could have a higher TTFB, but better FCP and LCP values than an entirely client-rendered experience. This is why the TTFB thresholds are a “rough guide”, and will need to be weighed against how your site delivers its core content.<p>
+{% endAside %}
+
+## How to Measure TTFB
+
+Before you can optimize TTFB, you need to observe how it affects your website's users. You should rely on [field data](/lab-and-field-data-differences/#field-data) as a primary source of observing TTFB as it affected by redirects, whereas lab-based tools are often measured using the final URL therefore missing this extra delay.
+
+[PageSpeed Insights](https://pagespeed.web.dev/) is a simple way to get both field and lab information for public websites that are available in the [Chrome User Experience Report](https://developer.chrome.com/docs/crux/).
+
+TTFB for real users is shown in the top **Discover what your real users are experiencing** section:
+
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/enRFus2GE24gvchY9fdV.png", alt="PageSpeed Insights real user data", width="800", height="478" %}
+</figure>
+
+A subset of TTFB is shown in the [server response time audit](https://developer.chrome.com/docs/lighthouse/performance/server-response-time/):
+
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SYH4MlnwyQtWoeGNRmHh.png", alt="Server response time audit", width="800", height="213" %}
+</figure>
+
+{% Aside 'important' %}
+The server response time audit in Lighthouse excludes DNS lookup and redirect times, so it only represents a subset of TTFB. A large difference between real user data and Lighthouse data can indicate issues not apparent during the lab run, such as redirects or network differences.
+{% endAside %}
+
+To find out more ways how to measure TTFB in both the field and the lab, [consult the TTFB metric page](/ttfb/#how-to-measure-ttfb).
+
+
+### Understanding high TTFB with `Server-Timing`
+
+The [`Server-Timing` response header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing) can be used in your application backend to measure distinct backend processes that could contribute to high latency. The header value's structure is flexible, accepting, at minimum, a handle that you define. Optional values include a duration value (via `dur`), as well as an optional human-readable description (via `desc`).
+
+{% Aside %}
+If measuring backend latency with `Server-Timing` is not feasible, then a suitable alternative may be to rely on [Application Performance Monitoring (APM)](https://en.wikipedia.org/wiki/Application_performance_management) to detect and diagnose backend performance problems.
+{% endAside %}
+
+`Serving-Timing` can be used to measure many application backend processes, but there are some that you may want to pay special attention to:
+
+- Database queries
+- Server-side rendering time, if applicable
+- Disk seeks
+- Edge server cache hits/misses (if using a CDN)
+
+All parts of a `Server-Timing` entry are colon-separated, and multiple entries can be separated by a comma:
+
+```http
+// Two metrics with descriptions and values
+Server-Timing: db;desc="Database";dur=121.3, ssr;desc="Server-side Rendering";dur=212.2
+```
+
+The header can be set using your application backend's language of choice. In PHP, for example, you could set the header like so:
+
+```php
+<?php
+// Get a high-resolution timestamp before
+// the database query is performed:
+$dbReadStartTime = hrtime(true);
+
+// Perform a database query and get results...
+// ...
+
+// Get a high-resolution timestamp after
+// the database query is performed:
+$dbReadEndTime = hrtime(true);
+
+// Get the total time, converting nanoseconds to
+// milliseconds (or whatever granularity you need):
+$dbReadTotalTime = ($dbReadEndTime - $dbReadStarTime) / 1e+6;
+
+// Set the Server-Timing header:
+header('Server-Timing: db;desc="Database";dur=' . $dbReadTotalTime);
+?>
+```
+
+When this header is set, it will surface information you can use in both [the lab](/lab-and-field-data-differences/#lab-data), and in [the field](/lab-and-field-data-differences/#field-data).
+
+In the field, any page with a `Server-Timing` response header set will populate the `serverTiming` property in the [Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API):
+
+```js
+// Get the serverTiming entry for the first navigation request:
+performance.getEntries("navigation")[0].serverTiming.forEach(entry => {
+    // Log the server timing data:
+    console.log(entry.name, entry.description, entry.duration);
+});
+```
+
+In the lab, data from the `Server-Timing` response header will be visualized in the timings panel of the **Network** tab in Chrome DevTools:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WzultrITdMX9H67w006x.png", alt="A visualization of Server-Timing header values in the Network tab of Chrome DevTools. In this image, the Server-Timing header values are measuring whether or not a CDN edge server encountered a cache hit or miss, as well as the time to retrieve the resource from the edge and the origin server.", width="777", height="143" %}
+</figure>
+
+<code>Server-Timing</code> response headers visualized in the network tab of Chrome DevTools. Here, <code>Server-Timing</code> is used to measure whether a request for a resource has hit the CDN cache, and how long it takes for the request to hit the CDN's edge server and then the origin.
+
+Once you've determined that you have a problematic TTFB by analyzing the data available, then you can move onto fixing the problem.
+
+## Ways to optimize TTFB
+
+The most challenging aspect of optimizing TTFB is that, while the web's frontend stack will always be HTML, CSS, and JavaScript, backend stacks can vary significantly. There are numerous backend stacks and database products that each have their own optimization techniques. Therefore, this guide will focus on what applies to most architectures, rather than focusing solely on stack-specific guidance.
+
+### Platform-specific guidance
+
+The platform you use for your website can heavily impact TTFB. For example, WordPress performance is impacted by the number and quality of plugins, or what themes are used. Other platforms are similarly impacted when the platform is customized. You should consult the documentation for your platform for vendor-specific advice to supplement the more general performance advice in this post. The Lighthouse audit for reducing server response times also includes some [limited stack-specific guidance](https://developer.chrome.com/en/docs/lighthouse/performance/time-to-first-byte/#stack-specific-guidance).
+
+### Hosting, hosting, hosting
+
+Before you even consider other optimization approaches, hosting should be the first thing you consider. There's not much in the way of specific guidance that can be offered here, but a general rule of thumb is to ensure that your website's host is capable of handling the traffic you send to it.
+
+Shared hosting will generally be slower. If you're running a small personal website that serves mostly static files, this is probably fine, and some of the optimization techniques that follow will help you get that TTFB down as much as possible.
+
+However, if you're running a larger application with many users that involves personalization, database querying, and other intensive server-side operations, your choice of hosting becomes critical to lower TTFB in the field.
+
+When choosing a hosting provider, these are some things to look out for:
+
+- How much memory is your application instance allocated? If your application has insufficient memory, it will thrash and struggle to serve pages up as fast as possible.
+- Does your hosting provider keep your backend stack up to date? As new versions of application backend languages, HTTP implementations, and database software are released, performance in that software will be improved over time. It's key to partner with a hosting provider that prioritizes this kind of crucial maintenance.
+- If you have very specific application requirements and want the lowest level access to server configuration files, ask if it makes sense to customize your own application instance's backend.
+
+{% Aside %}
+If you're unsure how your hosting provider's real-user TTFB performance stacks up against competitors, [ismyhostfastyet.com](https://ismyhostfastyet.com/) is a good place to get that information.
+{% endAside %}
+
+There are many hosting providers that will take care of these things for you, but if you start to observe long TTFB values even in dedicated hosting providers, it may be a sign that you might need to re-evaluate your current hosting provider's capabilities so that you can deliver the best possible user experience.
+
+### Use a Content Delivery Network (CDN)
+
+The topic [CDN usage](/content-delivery-networks/) is a well-worn one, but for good reason: you could have a very well-optimized application backend, but users located far from your origin server may still experience high TTFB in the field.
+
+CDNs solve the problem of user proximity from your origin server by using a distributed network of servers that cache resources on servers that are physically closer to your users. These servers are called _edge servers_.
+
+CDN providers may also offer benefits beyond edge servers:
+
+- CDN providers usually offer extremely fast DNS resolution times.
+- A CDN will likely serve your content from edge servers using modern protocols such as HTTP/2 or HTTP/3.
+- HTTP/3 in particular solves the head-of-line blocking problem present in TCP (which HTTP/2 relies on) by using the [UDP protocol](https://en.wikipedia.org/wiki/User_Datagram_Protocol).
+- A CDN will likely also provide modern versions of TLS, which lowers the latency involved in TLS negotiation time. [TLS 1.3](https://en.wikipedia.org/wiki/Transport_Layer_Security#TLS_1.3_handshake) in particular is designed to keep TLS negotiation as short as possible.
+- Some CDN providers provide a feature often called an "edge worker", which uses an API similar to that of [the Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) to intercept requests, programmatically manage responses in edge caches, or rewrite responses altogether.
+- CDN providers are very good at optimizing for compression. Compression is tricky to get right on your own, and may lead to slower response times in certain cases with dynamically generated markup, which must be compressed on the fly.
+- CDN providers will also automatically cache compressed responses for static resources, leading to the best mix of compression ratio and response time.
+
+While adopting a CDN involves a varying amount of effort from trivial to significant, it should be a high priority to pursue in optimizing your TTFB if your website is not already using one.
+
+### Used cached content where possible
+
+CDNs allow content to be cached at edge servers which are located physically closer to visitors, provided the content is configured with the appropriate [`Cache-Control` HTTP headers](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control). While this is not appropriate for personalized content, requiring a trip all the way back to the origin can negate much of the value of a CDN.
+
+For sites that frequently update their content, even a short caching time can result in noticeable performance gains for busy sites, since only the first visitor during that time experiences the fully latency back to the origin server, while all other visitors can reuse the cached resource from the edge server. Some CDNs allow cache invalidation on site releases allowing the best of both worlds—long cache times, but instant updates when needed.
+
+Even where caching is correctly configured, this can be ignored through the use of unique query string parameters for analytics measurement. These may look like different content to the CDN despite being the same, and so the cached version will not be used.
+
+Older or less visited content may also not be cached, which can result in higher TTFB values on some pages than others. Increasing caching times can reduce the impact of this, but be aware that with increased caching times comes a greater possibility of serving potentially stale content.
+
+The impact of cached content does not just affect those using CDNs. Server infrastructure may need to generate content from costly database lookups when cached content cannot be reused. More frequently accessed data or precached pages can often perform better.
+
+### Avoid multiple page redirects
+
+One common contributor to a high TTFB is [redirects](https://developer.mozilla.org/docs/Web/HTTP/Redirections). Redirects occur when a navigation request for a document receives a response that informs the browser that the resource exists at another location. One redirect can certainly add unwanted latency to a navigation request, but it can certainly get worse if that redirect points to another resource that results in _another_ redirect—and so on. This can particularly impact sites that receive high volumes of visitors from advertisements or newsletters, since they often redirect via analytics services for measurement purposes. Eliminating redirects under your direct control can help to achieve a good TTFB.
+
+There are two types of redirects:
+
+- **Same-origin redirects**, where the redirect occurs entirely on your website.
+- **Cross-origin redirects**, where the redirect occurs initially on another origin—such as from a social media URL shortening service, for example—before arriving at your website.
+
+You want to focus on eliminating same-origin redirects, as this is something you will have direct control over. This would involve checking links on your website to see if any of them result in a `302` or `301` response code. Often this can be the result of not including the `https://` scheme (so browsers default to `http://` which then redirects) or because trailing slashes are not appropriately included or excluded in the URL (for example, visiting this page via [https://web.dev/optimize-ttfb](/optimize-ttfb) (without the final slash) works but requires a redirect to [https://web.dev/optimize-ttfb/](/optimize-ttfb/)) (with the final slash).
+
+Cross-origin redirects are trickier as these are often outside of your control, but try to avoid multiple redirects where possible—for example, by using multiple link shorteners when sharing links. Ensure the URL provided to advertisers or newsletters is the correct final URL, so as not to add another redirect to the ones used by those services.
+
+Another important source of redirect time can come from HTTP-to-HTTPS redirects. One way you can get around this is to use the [`Strict-Transport-Security` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) (HSTS), which will enforce HTTPS on the first visit to an origin, and then will tell the browser to immediately access the origin through the HTTPS scheme on future visits.
+
+Once you have a good HSTS policy in place, you can speed things up on the first visit to an origin [by adding your site to the HSTS preload list](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security#preloading_strict_transport_security).
+
+{% Aside 'caution' %}
+Be **very careful** when implementing HSTS, as setting too aggressive a policy without sufficient testing [can break your website](/bbc-hsts/#deploying-hsts).
+{% endAside %}
+
+### Stream markup to the browser
+
+Browsers are optimized to process markup efficiently when it is streamed, meaning that markup is handled in chunks as it arrives from the server. This is crucial where large markup payloads are concerned, as it means the browser can parse that the chunks of markup incrementally, as opposed to waiting for the entire response to arrive before parsing can begin.
+
+Though browsers are great at handling streaming markup, it's crucial to do all that you can to keep that stream flowing so those initial bits of markup are on their way as soon as possible. If the backend is holding things up, that's a problem. Because backend stacks are numerous, it would be beyond the scope of this guide to cover every single stack and the issues that could arise in each specific one.
+
+React, for example—and other frameworks that can [render markup on demand on the server](/rendering-on-the-web/#server-rendering)—have used a synchronous approach to server-side rendering. However, newer versions of React have implemented [server methods for streaming markup](https://reactjs.org/docs/react-dom-server.html#overview) as it is being rendered. This means you don't have to wait for a React server API method to render the entire response before it's sent.
+
+{% Aside %}
+Not every language runtime can take advantage of streaming server-side rendering. JavaScript runtimes such as [Deno](https://deno.land/) and [Node.js](https://nodejs.org/) support this out of the box, but other platforms may not support it. Check to see if this is the case for you, and see what you can do to upgrade or switch your runtime for better server-side rendering performance.
+{% endAside %}
+
+Another way to ensure markup is streamed to the browser quickly is to rely on [static rendering](/rendering-on-the-web/#static-rendering) which generates HTML files during build time. With the full file available immediately, web servers can start sending the file immediately and the inherent nature of HTTP will result in streaming markup. While this approach isn't suitable for every page on every website—such as those requiring a dynamic response as part of the user experience—it can be beneficial for those pages that don't require markup to be personalized to a specific user.
+
+### Use a service worker
+
+The [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) can have a big impact on the TTFB for both documents and the resources they load. The reason for this is that a service worker acts as a proxy between the browser and the server—but whether there is an impact on your website's TTFB depends on how you set up your service worker, and if that setup aligns with your application requirements.
+
+- **Use a [stale-while-revalidate strategy](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#stale-while-revalidate) for assets.** If an asset is in the service worker cache—be it a document or a resource the document requires—the stale-while-revalidate strategy will service that resource from the cache _first_, then will download that asset in the background and serve it from the cache for future interactions.
+  - If you have document resources that don't change very often, using a stale-while-revalidate strategy can make a page's TTFB nearly instant. However, this doesn't work so well if your website sends dynamically generated markup—such as markup that changes based on whether a user is authenticated. In such cases, you'll always want to hit the network _first_, so the document is as fresh as possible.
+  - If your document loads non-critical resources that change with some frequency, but fetching the stale resource won't greatly affect the user experience—such as select images or other resources that aren't critical—the TTFB for those resources can be greatly reduced using a stale-while-revalidate strategy.
+- **Use a [streaming service worker architecture](https://developer.chrome.com/docs/workbox/faster-multipage-applications-with-streams/) if possible.** This service worker architecture uses an approach where parts of a document resource are stored in the service worker cache, and combined with content partials during the navigation request. The resulting effect of using this service worker pattern is that your navigation will be quite fast, while smaller HTML payloads are downloaded from the network. While this service worker pattern doesn't work for every website, TTFB times for document resources can be practically instant for sites that can use it.
+- **Use [the app shell model](https://developer.chrome.com/blog/app-shell/) for client-rendered applications.** This model fits best for SPAs where the "shell" of the page can be delivered instantly from the service worker cache, and the dynamic content of the page is populated and rendered later on in the page lifecycle.
+
+### Use `103 Early Hints` for render-critical resources
+
+No matter how well your application backend is optimized, there could still be a significant amount of work the server needs to do in order to prepare a response, including expensive (yet necessary) database work that delays the navigation response from arriving as quickly as it could. The potential effect of this is that some subsequent render-critical resources could be delayed, such as CSS or—in some cases—JavaScript that renders markup on the client.
+
+[The `103 Early Hints` header](https://developer.chrome.com/blog/early-hints/) is an early response code that the server can send to the browser while the backend is busy preparing markup. This header can be used to hint to the browser that there are render-critical resources the page should begin downloading while the markup is being prepared. For [supporting browsers](https://caniuse.com/mdn-http_status_103), the effect can be faster document rendering (CSS) and quicker availability of core page functionality (JavaScript).
+
+{% Aside %}
+If your website doesn't do a lot of processing on the backend to prepare markup—for example, static sites—then `103 Early Hints` probably won't help much. It tends to work best for sites that involve considerable backend time before markup can be sent to the user.
+{% endAside %}
+
+## Conclusion
+
+Since there are so many combinations of backend application stacks, there's no one article that can encapsulate _everything_ you can do to lower your website's TTFB. However, these are some options you can explore to try and get things going just a little bit faster on the server side of things.
+
+As with optimizing every metric, the approach is largely similar: measure your TTFB in the field, use lab tools to drill down into the causes, and then apply optimizations where possible. Not every single technique here may be viable for your situation, but some will be. As always, you'll need to keep a close eye on your field data, and make adjustments as needed to ensure the fastest possible user experience.
+
+_Hero image by [Taylor Vick](https://unsplash.com/@tvick), sourced from Unsplash._
diff --git a/src/site/content/en/blog/optimize-vitals-lighthouse/index.md b/src/site/content/en/blog/optimize-vitals-lighthouse/index.md
new file mode 100644
index 00000000000..1c7c3a64fac
--- /dev/null
+++ b/src/site/content/en/blog/optimize-vitals-lighthouse/index.md
@@ -0,0 +1,368 @@
+---
+layout: post
+title: Optimizing Web Vitals using Lighthouse
+subhead: Finding opportunities to improve user-experience with Chrome's web tooling.
+authors:
+  - addyosmani
+description: |
+  Today, we will cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your site can improve on the Web Vitals.
+date: 2021-05-11
+updated: 2022-07-18
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/6GPqQDYxZnVq8qF6DJ02.jpeg
+alt: "A Lighthouse illuminating the sea"
+tags:
+  - blog
+  # - fast
+  - performance
+  - web-vitals
+---
+
+Today, we'll cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify
+how your site can improve on the [Web Vitals](/vitals).
+
+As a refresher on the tools, [Lighthouse](https://github.com/GoogleChrome/lighthouse) is an
+open-source, automated tool for improving the quality of web pages. You can find it in the [Chrome
+DevTools](https://developer.chrome.com/docs/devtools/) suite of debugging tools and run
+it against any web page, public or requiring authentication. You can also find Lighthouse in
+[PageSpeed
+Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstore.google.com),
+[CI](https://github.com/GoogleChrome/lighthouse-ci) and
+[WebPageTest](https://www.webpagetest.org/easy).
+
+Lighthouse 7.x includes new features like element screenshots, for easier visual inspection of
+parts of your UI impacting user-experience metrics (e.g. what nodes are contributing to layout
+shift).
+
+
+<figure>
+<video muted autoplay loop>
+<source type="video/mp4" src="https://storage.googleapis.com/web-dev-uploads/video/1L2RBhCLSnXjCnSlevaDjy3vba73/3G0x4Z1dmOcsusG7j1LE.mp4" type="video/mp4" width="1920" height="1080">
+</video>
+</figure>
+
+We've also shipped support for element screenshots on PageSpeed Insights, enabling a way to more
+easily spot issues for one-off performance runs of pages.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/mfkWFzyfO9XlJLYS80DE.png", alt="Element Screenshots highlighting the DOM node contributing to layout shift in the page", width="800", height="483" %}
+</figure>
+
+
+## Measure Core Web Vitals
+
+Lighthouse can
+[synthetically](/vitals-measurement-getting-started/#measuring-web-vitals-using-lab-data) measure
+the [Core Web Vitals metrics](/vitals/) including [Largest Contentful Paint](/lcp/), [Cumulative
+Layout Shift](/cls/) and [Total Blocking Time](/tbt/) (a lab proxy for [First Input Delay](/fid/)).
+These metrics reflect loading, layout stability, and interaction readiness. Other metrics such as
+[First Contentful Paint](/fcp/) highlighted in the [future of
+Core Web Vitals (CWV)](https://developer.chrome.com/devsummit/sessions/future-of-core-web-vitals/) are there too.
+
+The "Metrics" section of the Lighthouse report includes lab versions of these metrics. You can use
+this as a summary view of what aspects of user-experience require your attention.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/VkLhdNb3fxtfttFZ1S6E.png", alt="Lighthouse peformance metrics", width="800", height="485" %}
+</figure>
+
+{% Aside %} Lighthouse focuses on measuring user-experience during the initial page load in a lab
+setting, emulating a slow phone or desktop machine. If there is behavior on your page that may cause
+layout shifts or long JavaScript tasks after page-load, the lab metrics will not reflect this. Try
+the DevTools Performance panel, [Search Console](https://search.google.com/search-console/about),
+the [Web Vitals
+extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en),
+or [RUM](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data) for a post-load view into the metrics. {% endAside %}
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/PLMoiQpi12jT7BJUvlOJ.png", alt="Web Vitals lane in the devtools performance panel", width="800", height="476" %}
+  <figcaption>The new Web Vitals option in the DevTools Performance panel displays a
+track which highlights metric moments, such as Layout Shift (LS) shown above.</figcaption>
+</figure>
+
+[Field metrics](/vitals-field-measurement-best-practices/), such as those found in the [Chrome UX
+Report](https://developer.chrome.com/docs/crux/) or
+[RUM](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic), do not have this
+limitation and are a valuable complement to lab data as they reflect the experience real users
+have. Field data can't offer the kinds of diagnostic information you get in the lab, so the two go
+hand in hand.
+
+## Identify where you can improve on Web Vitals
+
+### Identify the Largest Contentful Paint element
+
+LCP is a measurement of perceived loading experience. It marks the point during page load when the
+primary–or "largest"–content has loaded and is visible to the user.
+
+Lighthouse has a "Largest Contentful Paint element" audit that identifies what element was the
+largest contentful paint. Hovering over the element will highlight it in the main browser window.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/qeNJwYAVxysRV0okWmf4.png", alt="Largest Contentful Paint element", width="800", height="505" %}
+</figure>
+
+If this element is an image, this information is a useful hint that you may want to optimize the loading
+of this image. Lighthouse includes a number of image optimization audits for helping you understand
+if your images could be better compressed, resized or delivered in a more optimal modern image
+format.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/8RVIyj6NiMfx7VDVbQmI.png", alt="Properly size images audit", width="800", height="468" %}
+</figure>
+
+You might also find [LCP
+Bookmarklet](https://gist.github.com/anniesullie/cf2982342337fd1b2be95c2d5fe5ea06) by Annie
+Sullivan useful for quickly identifying the LCP element with a red rectangle in just one click.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/eZJdYsdfsNniDW1KRJkE.png", alt="Highlighting the LCP element with a bookmarklet", width="800", height="509" %}
+</figure>
+
+### Preload late-discovered images to improve LCP
+
+To improve the Largest Contentful Paint, [preload](/preload-responsive-images/) your critical hero
+images if they are being discovered late by the browser. A late discovery can happen if a
+JavaScript bundle needs to be loaded before the image is discoverable.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/K9EPBZdSFoyXVDHoDjTx.png", alt="Preload the largest contentful paint image", width="800", height="489" %}
+</figure>
+
+{% Aside %} **Preload should be used sparingly**. Early network bandwidth is a scarce resource and using preload can come at the cost of another resource. To use preload effectively, make sure resources are being ordered correctly to avoid regressing other metrics when other resources in the page are also considered important (e.g. critical CSS, JS, fonts). The [cost of preload](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/edit) covers this in more detail.
+{% endAside %}
+
+There are a few common questions we are asked about preloading LCP images that may also be worth
+briefly covering.
+
+Can you preload responsive images? [Yes](/preload-responsive-images/#imagesrcset-and-imagesizes).
+Let's say we have a responsive hero image as specified using `srcset` and `sizes` below:
+
+```html
+<img src="lighthouse.jpg"
+          srcset="lighthouse_400px.jpg 400w,
+                  lighthouse_800px.jpg 800w,
+                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
+Lighthouse">
+```
+
+Thanks to the `imagesrcset` and `imagesizes` attributes added to the `link` attribute, we can
+preload a responsive image using the same image selection logic used by `srcset` and `sizes`:
+
+```html
+<link rel="preload" as="image" href="lighthouse.jpg"
+           imagesrcset="lighthouse_400px.jpg 400w,
+                        lighthouse_800px.jpg 800w,
+                        lighthouse_1600px.jpg 1600w"
+imagesizes="50vw">
+```
+
+Will the audit also highlight preload opportunities if the LCP image is defined via a CSS
+background? Yes.
+
+Any image flagged as the LCP image whether via CSS background or `<img>` is a candidate if it's
+discovered at a waterfall depth of three or more.
+
+### Lazy loading offscreen images and avoiding this for LCP
+
+Offscreen images that are not critical to the initial user experience can be [lazy-loaded](/browser-level-image-lazy-loading/). This is a technique that defers downloading an image until a user scrolls near it, which can reduce network contention for critical assets and in some cases improve LCP. The ["Defer offscreen images"](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/) audit can help here:
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/vW6EwUnp51g0QVAkUyN9.png", alt="Defer offscreen images", width="800", height="317" %}
+</figure>
+
+Critical above-the-fold images, such as the Largest Contentful Paint image, should not be lazy loaded. Doing so can [delay the LCP image loading](/lcp-lazy-loading/). Lighthouse will highlight if an LCP image is being incorrectly lazy-loaded via the "Largest Contentful Paint image was lazily loaded" audit:
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/VKmCrIG748sCCoByrBV8.png", alt="Avoid lazy loading LCP images", width="800", height="226" %}
+</figure>
+
+### Identify CLS contributions
+
+Cumulative Layout Shift is a measurement of visual stability. It quantifies how much a page's
+content visually shifts around. Lighthouse has an audit for debugging CLS called "Avoid large
+layout shifts".
+
+This audit highlights DOM elements that contribute the most to shifts of the page. In the Element
+column to the left you will see the list of these DOM elements and to the right, their overall CLS
+contribution.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/X31lkLFtfjDZdO2O7ytV.png", alt="The avoid large layout shifts audit in Lighthouse highlighting relevant DOM nodes contributing to CLS", width="800", height="525" %}
+</figure>
+
+Thanks to the new Lighthouse Element Screenshots feature, we can both see a visual preview of the
+key elements noted in the audit as well as click-to-zoom for a clearer view:
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/L9geZVvkATRlAVcZA6dx.png", alt="Clicking on an Element screenshot will expand it", width="800", height="525" %}
+</figure>
+
+For post-load CLS, there can be value in _persistently_ visualizing with rectangles
+which elements contributed the most to CLS. This is a feature you'll find in third-party tools like
+SpeedCurve's [Core Web Vitals dashboard](https://speedcurve.com/blog/web-vitals-user-experience/)
+and which I love using [Defaced's Layout Shift GIF
+Generator](https://defaced.dev/tools/layout-shift-gif-generator/) for:
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/ju6XjKBYzF6G537myjUW.gif", alt="the layout shift generator highlighting shifts", width="800", height="450" %}
+</figure>
+
+For a site-wide view of layout shift issues, I get a lot of mileage out of [Search Console's Core
+Web Vitals report](https://support.google.com/webmasters/answer/9205520?hl=en). This lets me see
+the kinds of pages on my site with a high CLS (in this case helping self-identify what template
+partials I need to spend my time on):
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/2Ihb2GYkbpGzYLYoZEDP.png", alt="Search Console displaying CLS issues", width="800", height="506" %}
+</figure>
+
+{% Aside %} To reduce layout shifts caused by Web Fonts, keep an eye on the new [size-adjust](https://groups.google.com/a/chromium.org/g/blink-dev/c/1PVr94hZHjU/m/J0xT8-rlAQAJ) descriptor for `@font-face`. This nable adjusting the size of fallback fonts to reduce CLS.
+{% endAside %}
+
+### Identifying CLS from images without dimensions
+
+To [limit](/optimize-cls/#images-without-dimensions) Cumulative Layout Shift being caused by images
+without dimensions, include width and height size attributes on your images and video elements.
+This approach ensures that the browser can allocate the correct amount of space in the document
+while the image is loading.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/fZRkmM18rvfy6y7LB1Qx.png", alt="Audit for image elements without explicit width and height", width="800", height="489" %}
+</figure>
+
+See [Setting Height And Width On Images Is Important
+Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) for a
+good write-up on the importance of thinking about image dimensions and aspect ratio.
+
+### Identifying CLS from advertisements
+
+[Publisher Ads for Lighthouse](https://developers.google.com/publisher-ads-audits) allows you to
+find opportunities to improve the loading experience of ads on your page, including contributions
+to layout shift and long tasks that may push out how soon your page is usable by users. In
+Lighthouse, you can enable this via Community Plugins.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/kR3jgctso6Hg0OxD8xwi.png", alt="Ads related audits highlighting opportunities to reduce time to request and layout shift", width="800", height="527" %}
+</figure>
+
+Remember that ads are one of the
+[largest](/optimize-cls/#ads-embeds-and-iframes-without-dimensions) contributors to layout shifts
+on the web. It's important to:
+
++   Take care when placing non-sticky ads near the top of the viewport
++   Eliminate shifts by reserving the largest possible size for the ad slot
+
+### Avoid non-composited animations
+
+Animations which are non-composited can present themselves as janky on lower-end devices if heavy
+JavaScript tasks are keeping the main thread busy. Such animations can introduce layout shifts.
+
+If Chrome discovers an animation couldn't be composited, it reports it to a DevTools trace
+Lighthouse reads, allowing it to list which elements with animations weren't composited and for
+what reason. You can find these in the [Avoid non-composited
+animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/) audit.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/heGuYXKeMrUftMvfrDU7.png", alt="Audit for avoiding non-composited animations", width="800", height="528" %}
+</figure>
+
+### Debug First Input Delay / Total Blocking Time / Long Tasks
+
+First Input measures the time from when a user first interacts with a page (e.g. when they click a
+link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is
+actually able to begin processing event handlers in response to that interaction. Long JavaScript
+Tasks can impact this metric and the proxy for this metric, Total Blocking Time.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/LqBCtAXdByd4fBzoNc1K.png", alt="Audit for avoiding long main thread tasks", width="800", height="485" %}
+</figure>
+
+Lighthouse includes an [Avoid long main-thread tasks](/long-tasks-devtools/) audit which lists the
+longest tasks on the main thread. This can be helpful for identifying the worst contributors to
+input delay. In the left column we can see the URL of scripts responsible for long main-thread
+tasks.
+
+To the right we can see the duration of these tasks. As a reminder, Long Tasks are tasks which
+execute for longer than 50 milliseconds. This is considered to block the main thread long enough to
+impact frame rate or input latency.
+
+If considering third-party services for monitoring, I also quite like the [main-thread execution
+timeline](https://calibreapp.com/docs/features/main-thread-execution-timeline) visual Calibre has
+for visualizing these costs, which highlights both parent and child tasks contributing to long
+tasks that impact interactivity.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/IGENqHBjC97pHslOQYc6.png", alt="The main-thread execution timeline visual Calibre has", width="800", height="155" %}
+</figure>
+
+### Block network requests to see the before/after impact in Lighthouse
+
+Chrome DevTools supports [blocking network
+requests](https://developer.chrome.com/docs/devtools/network/#block)
+to see the impact of individual resources being removed or not being available. This can be helpful
+for understanding the cost individual scripts (e.g such as third-party embeds or trackers) have on
+metrics like Total Blocking Time (TBT) and Time to Interactive.
+
+Network request blocking happens to also work with Lighthouse! Let's take a quick look at the
+Lighthouse report for a site. The Perf score is 63/100 with a TBT of 400ms. Digging into the code,
+we find this site loads an Intersection Observer polyfill in Chrome which isn't necessary. Let's
+block it!
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/DPXEXhOZL0Czjm10lBox.png", alt="Network request blocking", width="800", height="508" %}
+</figure>
+
+We can right-click on a script in the DevTools Network panel and click `Block Request URL` to block
+it. Here we'll do this for the Intersection Observer polyfill.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/iWB0jAtL0PKpwkmecOPf.png", alt="Block request URLs in DevTools", width="800", height="354" %}
+</figure>
+
+Next we can re-run Lighthouse. This time we can see our performance score has improved (70/100) as
+has Total Blocking Time (400ms => 300ms).
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/LiaMMxvy4prpFBIuSgfo.png", alt="The after view of blocking costly network requests", width="800", height="508" %}
+</figure>
+
+### Replace costly third-party embeds with a facade
+
+It's common to use third-party resources for embedding videos, social media posts or widgets into
+pages. By default, most embeds eagerly load right away and can come with costly payloads that
+negatively impact the user-experience. This is wasteful if the third-party isn't critical (e.g. if
+the user needs to scroll before they see it).
+
+One pattern to improve performance of such widgets is to [lazy-load them on user
+interaction](https://addyosmani.com/blog/import-on-interaction/). This can be done by rendering a
+lightweight preview of the widget (a facade) and only load the full version if a user interacts
+with it. Lighthouse has an audit that will recommend third-party resources which can be
+[lazy-loaded with a facade](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/), such as YouTube video embeds.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/iciXy3oVlPH7VuwN7toy.png", alt="Audit highlighting that some costly third party resources can be replaced", width="800", height="483" %}
+</figure>
+
+As a reminder, Lighthouse will [highlight third-party code](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/) that blocks the main thread for over 250ms. This can expose all kinds of third-party scripts (including ones authored by Google) that may be worth better deferring or lazy loading if what they render requires scrolling to view it.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/K0Oxmu1XEN2P3NQIknyH.png", alt="Reduce the cost of third-party JavaScript audit", width="800", height="556" %}
+</figure>
+
+### Beyond Core Web Vitals
+
+Beyond highlighting the Core Web Vitals, recent versions of Lighthouse and PageSpeed Insights also
+try to provide concrete guidance you can follow for improving how quickly JavaScript-heavy web
+applications can load if you have source maps turned on.
+
+These include a growing collection of audits for reducing the cost of JavaScript in your page, such
+as reducing reliance on polyfills and duplicates that may not be needed for the user-experience.
+
+For more information on Core Web Vitals tooling, keep an eye on the [Lighthouse
+team](https://twitter.com/____lighthouse) Twitter account and [What's new in
+DevTools](https://developers.google.com/web/updates/2020/05/devtools).
+
+[Hero image](https://unsplash.com/photos/7I9aCavB8RI) by
+[Mercedes Mehling](https://unsplash.com/@mrs80z)
+on [Unsplash](https://unsplash.com).
+
+
diff --git a/src/site/content/en/blog/optimizing-content-efficiency-eliminate-downloads/index.md b/src/site/content/en/blog/optimizing-content-efficiency-eliminate-downloads/index.md
new file mode 100644
index 00000000000..19bcf26a827
--- /dev/null
+++ b/src/site/content/en/blog/optimizing-content-efficiency-eliminate-downloads/index.md
@@ -0,0 +1,66 @@
+---
+title: Eliminate unnecessary downloads
+description: |
+  You should audit your resources periodically to ensure that each resource is helping deliver a better user experience.
+authors:
+  - ilyagrigorik
+  - jlwagner
+date: 2014-03-31
+updated: 2023-07-07
+---
+
+The fastest and best-optimized resource is a resource not sent. You should eliminate unnecessary resources from your application. It's a good practice to question—and periodically revisit—the implicit and explicit assumptions with your team. Here are a few examples:
+
+- You've always included resource X on your pages, but does the cost of downloading and displaying it offset the value it delivers to the user? Can you measure and prove its value?
+- Does the resource (especially if it's a third-party resource) deliver consistent performance? Is this resource in the critical path, or need to be? If the resource is in the critical path, could it be a single point of failure for the site? That is, if the resource is unavailable, does it affect performance and the user experience of your pages?
+- Does this resource need or have an SLA? Does this resource follow performance best practices: compression, caching, and so on?
+
+Too often, pages contain resources that are unnecessary, or worse, that hinder page performance without delivering much value to the visitor or to the site they're hosted on. This applies equally to first-party and third-party resources and widgets:
+
+- Site A has decided to display a photo carousel on its homepage to allow the visitor to preview multiple photos with a quick click. All of the photos are loaded when the page is loaded, and the user advances through the photos.
+  - **Question:** Have you measured how many users view multiple photos in the carousel? You might be incurring high overhead by downloading resources that most visitors never view.
+- Site B has decided to install a third-party widget to display related content, improve social engagement, or provide some other service.
+  - **Question:** Have you tracked how many visitors use the widget or click-through on the content that the widget provides? Is the engagement that this widget generates enough to justify its overhead? Furthermore, is it feasible for you to use a loading strategy to ensure [the script isn't loaded until it's needed](/reduce-javascript-payloads-with-code-splitting/)?
+
+Determining whether to eliminate unnecessary downloads often requires a lot of careful thinking and measurement. For best results, periodically inventory and revisit these questions for every asset on your pages.
+
+## Effects on Core Web Vitals
+
+The Core Web Vitals initative was introduced by Google to provide a set of metrics that reflect what users are experiencing as they use the web. While there are many optimization strategies for Core Web Vitals, questioning whether to load a particular resource on a page may light a path for you to improve these metrics on your website. Below are a few examples—grouped by each Core Web Vital—that are worth your consideration. Though this isn't an exhaustive list of examples (and there are many!), reading them over may give you food for thought.
+
+### Largest Contentful Paint (LCP)
+
+[Largest Contentful Paint (LCP)](/lcp/) measures when the largest content (for example a hero image, or a headline) is loaded. It's considered an important perceptual metric that gives the user the impression that a site is loading quickly.
+
+In general, downloading less resources means that the bandwidth the user does have will be allocated across less resources, and may translate to an improvement in LCP. A classic example is that of lazy loading, where images outside of the viewport during page load will not be downloaded until the browser has determined the user is more likely to see them. If you have a large thumbnail gallery of, say, 50 images, lazy loading all but the top ten of them means that the browser can make more efficient use of the bandwidth available to it, and the first images the user will see will load more quickly.
+
+However, it's not just about loading less _images_, necessarily. The browser has an internal prioritization scheme that determines how much bandwidth each resource should receive. However, even with this _all_ resources—particularly those downloaded at high priority—have the potential to deprive a potential LCP element's dependent resource. This is especially true on slow network connections. That dependent resource may be an image file that represents the page's LCP element, but it could also very well be a web font resource that the browser needs to render a text node that may be determined as the page's LCP element.
+
+If your website is heavy on text, it may be the case that a page's LCP element is a text node. While there are many [good font optimization and loading strategies](/font-best-practices/), it may be worth considering whether a system font is sufficient for your website's needs, so that LCP elements which are text nodes can load without a dependency on a web font resource and paint almost immediately as the CSS and HTML arrives from the server.
+
+### Cumulative Layout Shift (CLS)
+
+Every resource you load has the potential to contribute to a page's [Cumulative Layout Shift (CLS)](/cls/), particularly if has not finished downloading by the time of the initial paint. For images, avoid CLS involves practices such as setting explicit dimensions. For fonts, managing font loading and potentially fallback font matching can minimize shifts during a web font's swap period. For JavaScript, it could be managing how that script manipulates the DOM so that layout shifts are reduced to an acceptable amount.
+
+Every resource that contributes to a page's CLS requires some amount of work to ensure page layout is sufficiently stable. By questioning whether or not you need a specific resource, you're not just speeding up page loads, you're also reducing the cognitive effort necessary to preserve layout stability. That leads to not only a much less frustrating user experience, but a less frustrating developer experience, as you'll have more time to pursue other goals in your projects.
+
+### Interaction to Next Paint (INP) and First Input Delay (FID)
+
+[Interaction to Next Paint (INP)](/inp/) and [First Input Delay (FID)](/fid/) are metrics that measure responsiveness to user inputs. [While INP is slated to replace FID as a Core Web Vital](/inp-cwv/) in March of 2024, optimization strategies for FID tend to also apply to INP. Furthermore, INP is generally more difficult to optimize for than FID, as it tracks the full interaction latency for _all_ page interactions, not just the input delay of the first interaction as FID measures.
+
+INP and FID tend to be most affected by JavaScript, as JavaScript is what drives most of the interactivity one experiences across the web. For both INP and FID, the amount of script resources downloaded during page load will kick off potentially expensive work involved in [script evaluation and compilation](/script-evaluation-and-long-tasks/). The less JavaScript you load during startup, the less work the browser has to do at that critical point in the page experience.
+
+While there are strategies for reducing the _size_ of JavaScript resources downloaded during startup—such as code splitting and tree shaking—it's worth auditing the packages you use in your projects to see if they're necessary at all. For example, [lodash](https://lodash.com/) has many methods that are still useful today, but ships with methods that the browser provides out of the box, such as `Array`-specific functions for [mapping](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [reducing](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), and [filtering](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [many others](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array).
+
+Progressive enhancement is also [a useful approach](/adaptive-serving-based-on-network-quality/) to JavaScript, as it enables you to serve a baseline (but still functional) experience for users that you can add to for users with more powerful devices and faster network connections. Whether you adhere to the principle of progressive enhancement or not, the point remains: Every JavaScript resource you can avoid downloading can result in an experience that responds faster to user interactions, which is a vital aspect of web performance.
+
+## Conclusion
+
+Auditing your website for unnecessary downloads may be just one aspect of delivering fast user experiences, but it's one that has the potential for high impact. To recap:
+
+- Inventory your own assets and third-party assets on your pages.
+- Measure the performance of each asset: its value and its technical performance.
+- Determine if the resources are providing sufficient value.
+- Understand the effect of unnecessary downloads on [Core Web Vitals](/vitals/) and supporting metrics.
+
+By optimizing content efficiency in this way, you're not only improving performance overall, you're also taking care not to waste users' bandwidth, as well as potentially improving user-centric metrics and delivering a better user experience.
diff --git a/src/site/content/en/blog/optimizing-content-efficiency-javascript-startup-optimization/index.md b/src/site/content/en/blog/optimizing-content-efficiency-javascript-startup-optimization/index.md
new file mode 100644
index 00000000000..e2e9f67f0a8
--- /dev/null
+++ b/src/site/content/en/blog/optimizing-content-efficiency-javascript-startup-optimization/index.md
@@ -0,0 +1,324 @@
+---
+layout: post
+title: JavaScript Start-up Optimization
+authors:
+  - addyosmani
+description: >
+  Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.
+date: 2017-11-30
+updated: 2022-05-11
+---
+
+As we build sites more heavily reliant on JavaScript, we sometimes pay for what
+we send down in ways that we can’t always easily see. In this article, we’ll
+cover why a little **discipline** can help if you’d like your site to load and be
+interactive quickly on mobile devices. Delivering less JavaScript can mean less
+time in network transmission, less spent decompressing code and less time
+parsing and compiling this JavaScript.
+
+## Network
+
+When most developers think about the cost of JavaScript, they think about it in
+terms of the **download and execution cost**. Sending more bytes of JavaScript
+over the wire takes longer the slower a user’s connection is.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Yt8aD7AoCbAT20mYqaUm.png", alt="When a browser requests a
+resource, that resource needs to be fetched and then decompressed. In the case
+of resources like JavaScript, they must be parsed and compiled prior to
+execution.", width="800", height="493" %}
+
+This can be a problem as the **effective network
+connection type** a user has might not actually be 3G, 4G or Wi-Fi. You can be on
+coffee-shop Wi-Fi but connected to a cellular hotspot with 2G speeds.
+
+You can **reduce** the network transfer cost of JavaScript through:
+
+- **Only sending the code a user needs**.
+  - Use [code-splitting](/web/updates/2017/06/supercharged-codesplit) to break
+    up your JavaScript into what is critical and what is not. Module bundlers
+    like [webpack](https://webpack.js.org) support
+    [code-splitting](https://webpack.js.org/guides/code-splitting/).
+  - Lazily loading in code that is non-critical.
+- **Minification**
+  - Use [UglifyJS](https://github.com/mishoo/UglifyJS) for
+    [minifying](/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification_preprocessing_context-specific_optimizations)
+    ES5 code.
+  - Use [babel-minify](https://github.com/babel/minify) or
+    [uglify-es](https://www.npmjs.com/package/uglify-es) to minify ES2015+.
+- **Compression**
+  - At minimum, use
+    [gzip](/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip)
+    to compress text-based resources.
+  - Consider using
+    [Brotli](https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli/)
+    ~[q11](https://twitter.com/paulcalvano/status/924660429846208514). Brotli
+    outperforms gzip on compression ratio. It helped CertSimple save
+    [17%](https://speakerdeck.com/addyosmani/the-browser-hackers-guide-to-instant-loading?slide=30)
+    on the size of compressed JS bytes and LinkedIn save
+    [4%](https://engineering.linkedin.com/blog/2017/05/boosting-site-speed-using-brotli-compression)
+    on their load times.
+- **Removing unused code**.
+  - Identify opportunities for code that can be removed or lazily loaded in
+    with [DevTools code
+    coverage](/web/updates/2017/04/devtools-release-notes#coverage).
+  - Use
+    [babel-preset-env](https://github.com/babel/babel/tree/main/packages/babel-preset-env)
+    and browserlist to avoid transpiling features already in modern browsers.
+    Advanced developers may find careful [analysis of their webpack
+    bundles](https://github.com/webpack-contrib/webpack-bundle-analyzer) helps
+    identify opportunities to trim unneeded dependencies.
+  - For stripping code, see
+    [tree-shaking](https://webpack.js.org/guides/tree-shaking/), [Closure
+    Compiler](/closure/compiler/)’s advanced optimizations and library
+    trimming plugins like
+    [lodash-babel-plugin](https://github.com/lodash/babel-plugin-lodash) or
+    webpack’s
+    [ContextReplacementPlugin](https://iamakulov.com/notes/webpack-front-end-size-caching/#moment-js)
+    for libraries like Moment.js.
+- **Caching code to minimize network trips.**
+  - Use [HTTP
+    caching](/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
+    to ensure browsers cache responses effectively. Determine optimal
+    lifetimes for scripts (max-age) and supply validation tokens (ETag) to avoid
+    transferring unchanged bytes.
+  - Service Worker caching can make your app network resilient and give you
+    eager access to features like [V8’s code
+    cache](https://v8project.blogspot.com/2015/07/code-caching.html).
+  - Use long-term caching to avoid having to re-fetch resources that haven't
+    changed. If using Webpack, see [filename
+    hashing](https://webpack.js.org/guides/caching/).
+
+## Parse/Compile
+
+Once downloaded, one of JavaScript’s **heaviest** costs is the time for a JS
+engine to **parse/compile** this code. In [Chrome
+DevTools](/web/tools/chrome-devtools/), parse and compile are part of the yellow
+"Scripting" time in the Performance panel.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/xSTnKzQ7pXR9znVfDBL3.png", alt="ALT_TEXT_HERE", width="800", height="165" %}
+
+The Bottom-Up and Call Tree tabs show you exact Parse/compile timings:
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/idCp6NvAEITLFHkQgJUq.png", alt="ALT_TEXT_HERE", width="800", height="228" %}
+ <figcaption> Chrome
+DevTools Performance panel > Bottom-Up. With V8’s Runtime Call Stats enabled, we
+can see time spent in phases like Parse and Compile </figcaption> </figure>
+
+{% Aside %}
+Performance panel support for Runtime Call Stats is currently experimental.
+To enable, go to about://flags/#enable-devtools-experiments -> restart Chrome ->
+go to DevTools -> Settings -> Experiments -> hit shift 6 times -> check the option
+called `Timeline: V8 Runtime Call Stats on Timeline` and close then re-open DevTools.
+{% endAside %}
+
+But, why does this matter?
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/7b4TzW13lTWH2OwUEXKQ.png", alt="ALT_TEXT_HERE", width="800", height="221" %}
+
+Spending a long time parsing/compiling code can heavily delay how soon a user
+can interact with your site. The more JavaScript you send, the longer it will
+take to parse and compile it before your site is interactive.
+
+Byte-for-byte, **JavaScript is more expensive for the browser to process than
+the equivalently sized image or Web Font** — Tom Dale
+
+Compared to JavaScript, there are numerous costs involved in processing
+equivalently sized images (they still have to be decoded!) but on average mobile
+hardware, JS is more likely to negatively impact a page’s interactivity.
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/EjFNNhzfs6NOgLItAaSD.png", alt="ALT_TEXT_HERE", width="800", height="517" %}
+ <figcaption>JavaScript
+and image bytes have very different costs. Images usually don’t block the main
+thread or prevent interfaces from getting interactive while being decoded and
+rasterized. JS however can delay interactivity due to parse, compile and
+execution costs.</figcaption> </figure>
+
+When we talk about parse and compile being slow; context is important — we’re
+talking about **average** mobile phones here. **Average users can have phones
+with slow CPUs and GPUs, no L2/L3 cache and which may even be memory
+constrained.**
+
+Network capabilities and device capabilities don’t always match up. A user
+with an amazing Fiber connection doesn’t necessarily have the best CPU to
+parse and evaluate JavaScript sent to their device. This is also true in
+reverse… a terrible network connection, but a blazing fast CPU. — Kristofer
+Baxter, LinkedIn
+
+Below we can see the cost of parsing ~1MB of decompressed (simple) JavaScript on
+low and high-end hardware. **There is a 2–5x difference in time to parse/compile
+code between the fastest phones on the market and average phones**.
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/rNpXFldjEUV3pRQUdLf6.png", alt="ALT_TEXT_HERE", width="800", height="450" %} <figcaption>This graph
+highlights parse times for a 1MB bundle of JavaScript (~250KB gzipped) across
+desktop and mobile devices of differing classes. When looking at the cost of
+parse, it’s the decompressed figures to consider e.g ~250KB gzipped JS
+decompresses to ~1MB of code.</figcaption> </figure>
+
+What about a real-world site, like CNN.com?
+
+**On the high-end iPhone 8 it takes just ~4s to parse/compile CNN’s JS compared
+to ~13s for an average phone (Moto G4)**. This can significantly impact how
+quickly a user can fully interact with this site.
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/9352CA33sU4ISpPpJQvu.png", alt="ALT_TEXT_HERE", width="800", height="450" %}
+<figcaption>Above we
+see parse times comparing the performance of Apple’s A11 Bionic chip to the
+Snapdragon 617 in more average Android hardware.</figcaption> </figure>
+
+This highlights the importance of testing on **average** hardware (like the Moto
+G4) instead of just the phone that might be in your pocket. Context matters
+however: **optimize for the device and network conditions your users have.**
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/el8cWy14rn3GnZ3WSJof.png", alt="ALT_TEXT_HERE", width="800", height="450" %}
+ <figcaption>Google
+Analytics can provide insight into the <a
+href="https://crossbrowsertesting.com/blog/development/use-google-analytics-find-devices-customers-use/">mobile
+device classes</a> your real users are accessing your site with. This can
+provide opportunities to understand the real CPU/GPU constraints they’re
+operating with.</figcaption> </figure>
+
+**Are we really sending down too much JavaScript? Err, possibly :)**
+
+Using HTTP Archive (top ~500K sites) to analyze the state of [JavaScript on
+mobile](http://beta.httparchive.org/reports/state-of-javascript#bytesJs), we can
+see that 50% of sites take over 14 seconds to get interactive. These sites spend
+up to 4 seconds just parsing and compiling JS.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/PppRmvEBsCkQ44xyC0Pu.png", alt="ALT_TEXT_HERE", width="800", height="445" %}
+
+Factor in the time it takes to fetch and process JS and other resources and it’s
+perhaps not surprising that users can be left waiting a while before feeling
+pages are ready to use. We can definitely do better here.
+
+**Removing non-critical JavaScript from your pages can reduce transmission
+times, CPU-intensive parsing and compiling and potential memory overhead. This
+also helps get your pages interactive quicker.**
+
+## Execution time
+
+It’s not just parse and compile that can have a cost. **JavaScript execution**
+(running code once parsed/compiled) is one of the operations that has to happen
+on the main thread. Long execution times can also push out how soon a user can
+interact with your site.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/neG3PZcNmc3rqRXyZnQS.png", alt="ALT_TEXT_HERE", width="800", height="450" %}
+
+If script executes for more than 50ms, time-to-interactive is delayed by the
+_entire_ amount of time it takes to download, compile, and execute the JS —
+Alex Russell
+
+To address this, JavaScript benefits from being in **small chunks** to avoid
+locking up the main thread. Explore if you can reduce how much work is being
+done during execution.
+
+## Other costs
+
+JavaScript can impact page performance in other ways:
+
+- Memory. Pages can appear to jank or pause frequently due to GC (garbage
+  collection). When a browser reclaims memory, JS execution is paused so a
+  browser frequently collecting garbage can pause execution more frequently than
+  we may like. Avoid [memory leaks](https://developer.chrome.com/docs/devtools/memory-problems/)
+  and frequent gc pauses to keep pages jank free.
+- During runtime, long-running JavaScript can block the main-thread causing
+  pages that are unresponsive. Chunking up work into smaller pieces (using
+  <code><a
+  href="/web/fundamentals/performance/rendering/optimize-javascript-execution#use_requestanimationframe_for_visual_changes">requestAnimationFrame()</a></code>
+  or <code><a
+  href="/web/updates/2015/08/using-requestidlecallback">requestIdleCallback()</a></code>
+  for scheduling) can minimize responsiveness issues which can help improve [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/).
+
+## Patterns for reducing JavaScript delivery cost
+
+When you’re trying to keep parse/compile and network transmit times for JavaScript
+slow, there are patterns that can help like route-based chunking or
+[PRPL](/web/fundamentals/performance/prpl-pattern/).
+
+### PRPL
+
+PRPL (Push, Render, Pre-cache, Lazy-load) is a pattern that optimizes for
+interactivity through aggressive code-splitting and caching:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/JEMofg8IloPHYfMQbiFd.png", alt="ALT_TEXT_HERE", width="800", height="436" %}
+
+Let’s visualize the impact it can have.
+
+We analyze the load-time of popular mobile sites and Progressive Web Apps using
+V8’s Runtime Call Stats. As we can see, parse time (shown in orange) is a
+significant portion of where many of these sites spend their time:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/RxxGASjEChijlqo3ODBC.png", alt="ALT_TEXT_HERE", width="800", height="450" %}
+
+[Wego](https://www.wego.com), a site that uses PRPL, manages to maintain a low parse
+time for their routes, getting interactive very quickly. Many of the other sites
+above adopted code-splitting and performance budgets to try lowering their JS
+costs.
+
+### Progressive Bootstrapping
+
+Many sites optimize content visibility at the expensive of interactivity. To get
+a fast first paint when you do have large JavaScript bundles, developers
+sometimes employ server-side rendering; then "upgrade" it to attach event
+handlers when the JavaScript finally gets fetched.
+
+Be careful — this has its own costs. You 1) generally send down a _larger_ HTML
+response which can push our interactivity, 2) can leave the user in an uncanny
+valley where half the experience can’t actually be interactive until JavaScript
+finishes processing.
+
+Progressive Bootstrapping may be a better approach. Send down a minimally
+functional page (composed of just the HTML/JS/CSS needed for the current route).
+As more resources arrive, the app can lazy-load and unlock more features.
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/BcP0V4ROh8hwlzSD6PuA.png", alt="ALT_TEXT_HERE", width="800", height="303" %}
+ <figcaption> <a
+href="https://twitter.com/aerotwist/status/729712502943174657">Progressive
+Bootstrapping</a> by Paul Lewis </figcaption> </figure>
+
+Loading code proportionate to what’s in view is the holy grail. PRPL and
+Progressive Bootstrapping are patterns that can help accomplish this.
+
+## Conclusions
+
+**Transmission size is critical for low end networks. Parse time is important
+for CPU bound devices. Keeping these low matters.**
+
+Teams have found success adopting strict performance budgets for keeping their
+JavaScript transmission and parse/compile times low. See Alex Russell’s "[Can You
+Afford It?: Real-world Web Performance
+Budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/)"
+for guidance on budgets for mobile.
+
+<figure> {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Fey2HrvHZVHbvZKuykVW.png", alt="ALT_TEXT_HERE", width="800", height="471" %}
+ <figcaption>It’s
+useful to consider how much JS "headroom" the architectural decisions we make
+can leave us for app logic.</figcaption> </figure>
+
+If you’re building a site that targets mobile devices, do your best to develop
+on representative hardware, keep your JavaScript parse/compile times low and
+adopt a Performance Budget for ensuring your team are able to keep an eye on
+their JavaScript costs.
+
+## Learn More
+
+- [Chrome Dev Summit 2017 - Modern Loading Best
+  Practices](https://www.youtube.com/watch?v=_srJ7eHS3IM)
+- [JavaScript Start-up
+  Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201)
+- [Solving the web performance
+  crisis](https://nolanlawson.github.io/frontendday-2016/) — Nolan Lawson
+- [Can you afford it? Real-world performance
+  budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/)
+  — Alex Russell
+- [Evaluating web frameworks and
+  libraries](https://twitter.com/kristoferbaxter/status/908144931125858304) —
+  Kristofer Baxter
+- [Cloudflare’s Results of experimenting with
+  Brotli](https://blog.cloudflare.com/results-experimenting-brotli/) for
+  compression (note dynamic Brotli at a higher quality can delay initial page
+  render so evaluate carefully. You probably want to statically compress
+  instead.)
+- [Performance
+  Futures](https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5)
+  — Sam Saccone
diff --git a/src/site/content/en/blog/optimizing-content-efficiency-loading-third-party-javascript/index.md b/src/site/content/en/blog/optimizing-content-efficiency-loading-third-party-javascript/index.md
new file mode 100644
index 00000000000..1a5741a444c
--- /dev/null
+++ b/src/site/content/en/blog/optimizing-content-efficiency-loading-third-party-javascript/index.md
@@ -0,0 +1,716 @@
+---
+layout: post
+title: Loading Third-Party JavaScript
+authors:
+  - addyosmani
+  - arthurevans
+description: >
+  Third-party scripts provide a wide range of useful functionality, making the web more dynamic. Learn how to optimize the loading of third-party scripts to reduce their impact on performance.
+date: 2018-02-28
+updated: 2023-02-25
+---
+
+You've optimized all of your code, but your site still loads too slowly. Who's
+the culprit?
+
+Often, performance problems slowing pages down are due to third-party scripts:
+ads, analytics, trackers, social media buttons, and so on.
+
+Third-party scripts provide a wide range of useful functionality, making the web
+more dynamic, interactive, and interconnected. These scripts may be crucial to
+your website's functionality or revenue stream. But third-party scripts also
+come with **many risks** that should be taken into consideration to **minimize their impact** while still providing value.
+
+Why do you need to be
+[careful](https://css-tricks.com/potential-dangers-of-third-party-javascript/)
+about third-party scripts?
+
+- They can be a **performance** concern
+- They can be a **privacy** concern
+- They might be a **security** concern
+- They can be **unpredictable** and change without you knowing
+- They can have **unintended consequences**
+
+Ideally, you’ll want to ensure third-party script is not impacting the [critical rendering path](/critical-rendering-path/). In this
+guide, we’ll walk through how to find and fix issues related to loading
+third-party JavaScript.
+
+## What do we mean by third-party scripts?
+
+Third-party JavaScript often refers to scripts that can be embedded into any
+site directly from a third-party vendor. These scripts can include ads,
+analytics, widgets and other scripts that make the web more dynamic and
+interactive.
+
+Examples of third-party scripts include:
+
+- Social sharing buttons (Twitter, Facebook, G+)
+
+- Video player embeds (YouTube, Vimeo)
+
+- Advertising iframes
+
+- Analytics & metrics scripts
+
+- A/B testing scripts for experiments
+
+- Helper libraries (such as date formatting, animation, or functional libraries)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/OmUCDlDPThYWSHrbkLz0.jpeg", alt="example of a youtube video embed", width="800", height="267" %}
+
+```html
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/mo8thg5XGV0"
+  frameborder="0"
+  allow="autoplay; encrypted-media"
+  allowfullscreen
+>
+</iframe>
+```
+
+One example of this is the YouTube video player embed script that allows you to
+embed a video into your page.
+
+Unfortunately, embedding third-party scripts means we often rely on them to be
+fast in order to avoid slowing our pages down. Third-party scripts are a
+predominant cause of performance slowdowns and are often caused by resources
+outside of your control.
+
+These issues can include:
+
+- Firing too many network requests to multiple servers. The more requests a site
+  has to make, the longer it can take to load.
+
+- Sending [too much JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+  that keeps the main thread busy. Too much JavaScript can block DOM
+  construction, delaying how quickly pages can render. CPU-intensive script
+  parsing and execution can delay user interaction and cause battery drain.
+
+- Sending large, [unoptimized image files](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/) or videos. This can
+  consume data and cost users money.
+
+- Third-party scripts loaded without care can be a [single-point of failure](http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html)
+  (SPOF)
+
+- Insufficient [HTTP caching](/http-cache/),
+  forcing resources to be fetched from the network often
+
+- Lack of sufficient [server compression](/optimizing-content-efficiency-optimize-encoding-and-transfer/)
+  of resources
+
+- Blocking content display until they complete processing. This can also be true
+  for async A/B testing scripts.
+
+- Use of legacy APIs (e.g [document.write()](https://developer.chrome.com/docs/lighthouse/best-practices/no-document-write/)) known to be harmful to the user experience
+
+- Excessive DOM elements or expensive CSS selectors.
+
+- Including multiple third-party embeds can lead to multiple frameworks and
+  libraries being pulled in several times. This is wasteful and exacerbates the
+  performance issues.
+
+- Third-party scripts often use embed techniques that can block
+  [window.onload](https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload)
+  if their servers respond slowly, even if the embed is using async or defer.
+
+Context is important and the solution to costly third-parties can depend on your
+site and your ability to configure how you load third-party code. Thankfully, a
+number of solutions and tools exist to find and fix issues with third-party
+resources.
+
+## How do you identify third-party script on a page?
+
+Unless you’re aware which third-party scripts are loaded by your site and what
+their performance impact is, it’s impossible to know how to optimize them. Many
+free web speed test tools can highlight costly third-parties including [Chrome DevTools](https://developer.chrome.com/docs/devtools/), [PageSpeed Insights](https://pagespeed.web.dev/) and
+[WebPageTest](https://www.webpagetest.org/). These tools display rich diagnostic
+information that can tell you _how many_ third-party scripts your
+site is loading, and which take the most time to execute.
+
+WebPageTest’s waterfall view can highlight the impact of heavy third-party
+script use. Below is an example of the requests required to load the main
+content for a site vs. the tracking and marketing scripts (credit: [Tags Gone Wild](https://nystudio107.com/blog/tags-gone-wild)).
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/e7SFcerlECyUqQqxm20M.jpeg", alt="waterfall view from webpagetest showing an
+actual website vs the amount of time spent loading tracking scripts", width="800", height="983" %}
+
+WebPageTest’s [domain breakdown](https://www.google.com/url?q=https://www.webpagetest.org/result/180222_J4_8fee6855d6f45719e4f37d8d89ecbc20/1/domains/&sa=D&ust=1519325015196000&usg=AFQjCNGrRivilJS9yqqpombsUMQZQJx2nw)
+can also be useful for visualizing how much content comes from third-party
+origins. It breaks this down by both total bytes and the number of requests:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/xl16aV7c9rVOd28JwC70.png", alt="content breakdown by domain (first view).
+Shows the percentage of requests and bytes for each third-party", width="800", height="456" %}
+
+When you see a problematic script, figure out what the script does and ask
+yourself whether the script is really that necessary. Do an A/B test to balance
+the perceived value versus its impact on key user engagement or performance
+metrics.
+
+## How do I measure the impact of third-party script on my page?
+
+### Lighthouse Boot-up Time Audit
+
+The Lighthouse [JavaScript boot-up time audit](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/) highlights scripts that have a
+costly script parse, compile or evaluation time. This can be useful for
+discovering CPU-intensive third-party scripts.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/MigUKr6en9egqep32LmP.png", alt="Lighthouse showing support for script
+evaluating and parsing", width="800", height="523" %}
+
+### Lighthouse Network Payloads Audit
+
+The Lighthouse [Network Payloads audit](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/) identifies network
+requests (including those from third-parties) that may slow down page load time.
+Avoiding these requests or highlighting their cost to ad-networks can save users
+money they would have spent on cellular data.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/5l7yuCUvUgE0zdRGBZAV.png", alt="Lighthouse showing support for large network
+payloads", width="800", height="477" %}
+
+### Chrome DevTools Network Request Blocking
+
+Chrome DevTools allows you to see how your page behaves when a particular
+script, stylesheet or other resource isn’t available. This is done with [network request blocking](https://developer.chrome.com/blog/new-in-devtools-59/#block-requests), a
+feature that can help measure the impact of blocking (dropping) specific
+third-party resources from your page.
+
+To enable request blocking, right click on any request in the Network panel and
+select "Block Request URL". A Request blocking tab will display in the DevTools
+drawer, letting you manage which requests have been blocked.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/LnMJijjS4i9GYaYitEzK.png", alt="Block request URLs from the DevTools network
+panel", width="800", height="392" %}
+
+### Chrome DevTools Performance Panel
+
+The [Performance panel](https://developer.chrome.com/docs/devtools/performance/reference/) in Chrome
+DevTools helps identify issues with your page’s web performance. Clicking the
+record button and loading your page presents you with a waterfall representing
+where your site is spending time. At the bottom of the Performance panel, you
+will see a drawer starting with
+"[Summary](https://developer.chrome.com/docs/devtools/performance/reference/#record-load)".
+Navigate to the “Bottom-up” tab.
+
+Here, you can use the "Group by product" option in the Bottom-Up tab to group
+third-parties by the time they spent. This helps identify which third-party
+products were the most costly. The [Network panel](https://umaar.com/dev-tips/143-network-products/) also supports an option
+to highlight requests by product.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Mfa08JHyo9TFo6zGgzci.png", alt="DevTools Performance panel showing the
+Bottom-up view grouped by (third-party) products", width="800", height="744" %}
+
+To learn more about how to analyze page load performance with the Chrome
+DevTools, see [Get started with analyzing runtime performance](https://developer.chrome.com/docs/devtools/performance/).
+
+A good **workflow** for measuring the impact of third-party scripts is:
+
+- Measure how long it takes to load your page using the Network panel.
+  - To emulate real-world conditions, we recommend turning on [network throttling](https://developer.chrome.com/docs/devtools/network/reference/#throttling) and
+    [CPU throttling](https://developer.chrome.com/docs/devtools/device-mode/#cpu).
+    On faster connections and desktop hardware, the impact of expensive
+    scripts may not be as representative as it would on a mobile phone.
+- Block the URLs or domains responsible for third-party scripts you believe are
+  an issue (see _Chrome DevTools Performance Panel_ for identifying costly
+  scripts).
+
+- Reload the page and re-measure how long the page takes without loading these
+  blocked third-party scripts. You should hopefully see an improvement.
+
+  - There may be value in doing 3 or more runs of measurement and looking at
+    the median for more stable figures. As third-party content can
+    occasionally pull in different resources per page load, this could give
+    you a more realistic spread. [DevTools now supports multiple recordings](https://twitter.com/ChromeDevTools/status/963820146388221952)
+    in the performance panel, making this a little easier.
+
+### Measuring impact of Third-Party tags with WebPageTest
+
+[WebPageTest](https://www.webpagetest.org/) supports blocking individual
+requests from loading (which can be useful for blocking content like ads and
+third-party embeds) to measure their impact.
+
+Under "Advanced Settings" is a Block tab. This can be used to specify a list of
+domains to block, simulating what it would be like if they didn't load at all.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/HBkSyajyxG7vxfPsyPKI.png", alt="WebPageTest advanced settings &lt; Block.
+Displays a text area for specifying domains to block.", width="800", height="316" %}
+
+A workflow for using this feature is to:
+
+- Test a page as normal
+
+- Repeat the test with certain third-parties blocked
+
+- Compare the two results (paying attention to the filmstrip). Results can be
+  compared by selecting them from your [Test History](https://www.webpagetest.org/testlog/1/) and clicking ‘Compare’.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/t56zbdtSDZJlPjQzz4rm.png", alt="WebPageTest displaying the compare option
+allowing you to compare two reports", width="800", height="245" %}
+
+Below we can see the difference between filmstrips both with and without
+third-party resources blocked. It can be useful to try this out for individual
+third-party origins to determine which ones have the biggest impact on your
+page-load performance:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/GilGzoBGdzQysYvhMNkH.png", alt="WebPageTest filmstrip displaying the impact
+of loading a site with and without third-parties disabled", width="800", height="139" %}
+
+The impact of blocking third-party resources on a page using WPT’s "block
+requests" feature from “[Using WebPageTest To Measure The Impact Of Third-Party Tags](https://goo.gl/jwGg6X)” by Andy Davies
+
+{% Aside %}
+WebPageTest also supports two commands operating at the DNS level for
+blocking domains.
+[blockDomains](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-blockDomains)
+{% endAside %}
+
+- which takes a list of domains to block and
+  [blockDomainsExcept](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-blockDomainsExcept)
+- takes a list of domains and blocks anything not on the list.
+
+WebPageTest also has a single-point of failure (SPOF) tab. This allows you to
+simulate a timeout or complete failure to load a resource.
+
+The difference between "SPOF" and "Block" is that SPOF slowly times out. This
+can make it useful for testing network resilience of third-party content to
+determine how well your pages hold up when services are under heavy load or
+temporarily unavailable.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ZUkUg3FkHz1cyrPVbqkn.png", alt="WebPageTest advanced settings &gt; SPOF &gt; hosts
+to fail", width="800", height="346" %}
+
+### Detecting expensive iframes using Long Tasks
+
+When scripts in third-party iframes take a long time to run, they can block the
+main thread delaying other tasks from running. These long tasks can cause a
+negative user experience leading to sluggish event handlers or dropped frames.
+
+To detect long tasks for [Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM), we can
+use the JavaScript
+[PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+API and observe
+[longtask](/user-centric-performance-metrics/#custom-metrics)
+entries. As these entries contain an attribution property, we can track down
+which frame context was responsible for the task.
+
+Below is an example that will log `longtask` entries to the console, including
+one for an "expensive" iframe:
+
+```html
+<script>
+  const observer = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Attribution entry including "containerSrc":"https://example.com"
+      console.log(JSON.stringify(entry.attribution));
+    }
+  });
+
+  observer.observe({entryTypes: ['longtask']});
+</script>
+
+<!-- Imagine this is an iframe with expensive long tasks -->
+<iframe src="https://example.com"></iframe>
+```
+
+To learn more about monitoring Long Tasks, read Phil Walton’s [User-centric Performance Metrics](/user-centric-performance-metrics/#custom-metrics).
+
+## How do you load third-party script efficiently?
+
+If a third-party script is slowing down your page load, you have several options
+to improve performance:
+
+- Load the script using the async or defer attribute to avoid blocking document
+  parsing.
+
+- Consider self-hosting the script if the third-party server is slow.
+
+- Consider removing the script if it doesn't add clear value to your site.
+
+- Consider [Resource Hints](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) like
+  `<link rel=preconnect>` or `<link rel=dns-prefetch>` to perform a DNS lookup
+  for domains hosting third-party scripts.
+
+### Use async or defer
+
+JavaScript execution is parser blocking. This means when the browser encounters
+a script it must pause DOM construction, hand this over to the JavaScript engine
+and allow script execution before proceeding with DOM construction.
+
+The async and defer attributes change this behavior.
+
+- With async, the browser downloads the script asynchronously while it continues
+  to parse the HTML document. When the script finishes downloading, parsing is
+  blocked while the script executes.
+
+- With defer, the browser downloads the script asynchronously while it continues
+  to parse the HTML document. The script doesn't run until the parsing is
+  complete.
+
+If that's too many words, here's a pretty picture:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/AiNx4BNv1tSLpz83EAmZ.png", alt="A visualization comparing the impact of
+using script vs script async vs script defer. Defer is showing as executing
+after script fetch and HTML parsing is done.", width="800", height="447" %}
+
+_Credit: Growing with the web_
+
+In general, you should always use `async` or `defer` for third-party scripts
+(unless the script does something necessary for the critical rendering path):
+
+- Use `async` if it's important to have the script run earlier in the loading
+  process. This might include some analytics scripts, for example.
+
+- Use `defer` for less critical resources. A video player that's below-the-fold,
+  for example.
+
+{% Aside %}
+If performance is your primary concern, you could wait until your page has
+reached a key user moment (such as after the critical content has loaded) before
+adding async scripts. You should also take care not to `async` load libraries
+like jQuery just because they are coming from a third-party CDN.
+{% endAside %}
+
+{% Aside %}
+In Blink-based browsers, `async` and `defer` currently [lower the priority of the network request](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#)
+for resources so it can cause it to load significantly later than it would as a
+blocking script. This is useful to know in particular for analytics scripts.
+{% endAside %}
+
+Should you ever load third-party scripts without `async` or `defer`? You could
+make a case for this if the script is a crucial part of your site functionality.
+For example, if you're loading your main UI library or framework from a CDN, it
+will be badged as "third-party script" in DevTools, but should be treated as an
+essential part of your site, not an add-on.
+
+Note that not all scripts work if loaded asynchronously. Check the docs for any
+third-party scripts you're using. If you're using a script that can't be loaded
+asynchronously, you might want to consider an alternative, or eliminating the
+script if possible. Some third parties may _highly recommend_ to load their
+scripts sync (to get ahead of other scripts), even if they would work fine async
+so do due diligence when evaluating strategies for loading third-party scripts.
+
+{% Aside %}
+`async` is not a silver bullet. If a marketing team wants to load a large
+number of tracking scripts on a page, this number will still introduce
+bottlenecks that can impact how soon users can engage with a page on load.
+{% endAside %}
+
+### Use Resource Hints to reduce connection setup time
+
+Establishing connections to third-party origins can take a significant amount of
+time - particularly on slow networks. Many steps can add up to delays including
+DNS lookups, redirects, and potentially several round trips to each third-party
+server to handle the request.
+
+You can use [Resource Hints](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) like
+[<link rel=dns-prefetch>](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/#improve-page-load-speed-with-preconnect)
+to perform a DNS lookup for domains hosting third-party scripts. When the
+request for them is finally made, time can be saved as the DNS lookup has
+already been carried out.
+
+```html
+<link rel="dns-prefetch" href="http://example.com" />
+```
+
+If the third-party domain you are referencing uses HTTPS, you may also consider
+[<link rel=preconnect>](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+as this will both perform the DNS lookup _and_ resolve TCP round-trips and
+handle TLS negotiations. These other steps can be very slow as they involve
+looking at SSL certificates for verification, so consider Resource Hints
+seriously if you find third-party setup time to be an issue.
+
+```html
+<link rel="preconnect" href="https://cdn.example.com" />
+```
+
+### "Sandbox" scripts with an iframe
+
+There are cases where third-party scripts can be loaded directly into an iframe.
+By restricting such scripts to iframes, they won’t block execution of the main
+page. This is the same approach that
+[AMP](https://www.ampproject.org/learn/about-how/) takes to keeping JavaScript
+out of the [critical path](/critical-rendering-path/). Note that this
+approach will still block the `onload` event so try not to attach critical
+functionality to `onload`.
+
+Chrome also supports [Permissions Policy](https://developer.mozilla.org/docs/Web/HTTP/Permissions_Policy)
+(formerly Feature Policy) - a set of policies which allow a developer to selectively disable access to certain browser
+features. This can prevent third-party content introducing unwanted behaviors to a site.
+
+### Self-host third-party scripts
+
+Self-hosting third-party scripts may be an option if you would like more control
+over a script’s loading story. For example, if you wanted to reduce DNS or
+round-trip times, or improve HTTP caching headers. Self-hosting may be a viable
+consideration if a script is considered critical.
+
+Self-hosting can come with a number of big caveats:
+
+- Scripts can go out of date. This can be a large issue as it prevents you from
+  getting important security fixes without manually updating.
+
+- Scripts that are self-hosted won’t get automatic updates due to an API change.
+  One example: a publisher with 90% of their revenue from ads discovers that ads
+  didn’t serve for half a day due to an API change that their self-hosted script
+  didn’t account for, leading to loss in income.
+
+An alternative to self-hosting scripts would be using [Service Workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) to cache them. This can
+give you greater control over how often they are re-fetched from the network.
+This could also be used to create a loading strategy where requests for
+non-essential third parties are throttled until the page reaches a key user
+moment.
+
+### A/B Test smaller samples of users
+
+[A/B testing](https://www.optimizely.com/optimization-glossary/ab-testing/) (or
+split-testing) is a technique for experimenting with two versions of a page to
+determine which one performs best. This is done by enabling both variants (A and
+B) for different samples of your website traffic. The page that provides a
+better conversion rate wins.
+
+A/B testing is a very useful tool for analyzing user experience and behavior.
+
+However, by design, A/B testing delays rendering to figure out which experiment
+needs to be active. JavaScript is often used to check if any of your users
+belong to an A/B test experiment and then enable the correct variant. This
+pattern can lead to 100% of your users being sent down large, costly script even
+if they don’t belong to the sample receiving the experiment.
+
+A good alternative in this case is to send A/B testing scripts for only a subset
+of your user base (e.g 10% vs 100%), ideally attempting to decide whether they
+belong in a test sample on the server-side. This improves the loading experience
+for the majority of users while still making split-testing possible.
+
+### Lazy load Third-Party Resources
+
+Embedded third-party resources (such as ads or videos) can be a big contributor
+to slow page speed when constructed poorly. Lazy loading can be used to only
+load embedded resources when necessary. For example, serving an ad in the footer
+only when a user scrolls down the page. Another pattern is lazy loading content
+after the main page content loads but before a user might otherwise interact
+with the page.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/5Iag22tSQLyGshoHkuqk.png", alt="An illustration showing assets that are
+critical for the above the fold experience and those that are less critical and
+can be lazily loaded in.", width="767", height="340" %}
+
+{% Aside %}
+[LazySizes](https://github.com/aFarkas/lazysizes) is a popular JavaScript
+library for lazy loading images and[iframes](http://afarkas.github.io/lazysizes/#examples). It supports YouTube
+embeds and[widgets](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks).
+Care does need to be taken when lazy loading any resources as this technique is
+often powered by JavaScript and can be subject to issues on flaky network
+connections.
+{% endAside %}
+
+DoubleClick have guidance on how to lazy-load ads in their [official documentation](https://support.google.com/dfp_premium/answer/4578089#lazyloading).
+If used properly, lazy loading can increase the overall viewability percentage
+of an ad. For example, Mediavine switched to[lazy-loading ads](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/)
+and saw a 200% improvement in page load speed.
+
+#### Efficient lazy loading with Intersection Observer
+
+Historically, solutions for detecting if an element is visible in the viewport
+(in order to lazy-load its content) have been error-prone, often causing the
+browser to become sluggish. Solutions have often listened for
+[scroll](https://developer.mozilla.org/docs/Web/Events/scroll) or
+[resize](https://developer.mozilla.org/docs/Web/Events/resize) events,
+then used DOM APIs like
+[getBoundingClientRect()](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect)
+to calculate where elements are relative to the viewport. This works, but is not
+efficient.
+
+[IntersectionObserver](/intersectionobserver-v2/) is a browser
+API that allows us to efficiently detect when an observed element enters or
+exits the browser's viewport. Learn more about how to use it for [lazy loading resources](https://deanhume.com/home/blogpost/lazy-loading-images-using-intersection-observer/10163).
+LazySizes also has[optional support](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js)
+for IntersectionObserver.
+
+### Analytics can be complicated
+
+Analytics scripts should never slow down your page load experience, but if you
+defer the load too long you can miss valuable analytics data. Fortunately, there
+are some well-known patterns for initializing analytics lazily while retaining
+early page-load data.
+
+Phil Walton's blog post, [The Google Analytics Setup I Use on Every Site I Build](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/)
+covers one such pattern for Google Analytics.
+
+## What patterns should I avoid with third-party script?
+
+### Avoid document.write()
+
+Third-party scripts sometimes use
+[document.write()](https://developer.mozilla.org/docs/Web/API/Document/write)
+to inject and load scripts. This is particularly true of older services that
+haven’t been updated in some time. Thankfully, many third-parties offer an
+option to asynchronously load themselves, which allows third-party scripts to
+load without blocking the display of the rest of the content on the page.
+
+The fix for document.write() is to simply not inject scripts using it. As of
+Chrome 53, Chrome DevTools will log warnings to the console for problematic use
+of document.write():
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/4xJzx0Of1N7sTqHRJyyG.png", alt="DevTools console warnings highlighting
+violations for a third-party embed using document.write()", width="800", height="500" %}
+
+To discover the use of document.write() at scale, you can check for [HTTP headers](https://developer.mozilla.org/docs/Web/HTTP/Headers) sent to your
+browser when this intervention for Chrome happens.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) can also highlight any third-party scripts
+[still using document.write()](https://developer.chrome.com/docs/lighthouse/best-practices/no-document-write/) in
+the Lighthouse report:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/xTS1pwZlgoFjnmM7BTBf.png", alt="Lighthouse Best Practices audit flagging use
+of document.write()", width="800", height="438" %}
+
+### Use Tag Managers but use them wisely
+
+{% Aside %}
+Exercise caution when using GTM. Although it can minimize the overhead of
+third-party tags, it also makes it trivial for anyone with credentials to add
+costly tags.
+{% endAside %}
+
+A "tag" is a snippet of code that allows digital marketing teams to collect
+data, set cookies or integrate third-party content like social media widgets
+into a site. These tags have a cost to your page's loading performance -
+additional network requests, heavy JavaScript dependencies, images and resources
+the tag itself may pull in.
+
+Managing these tags can become a real mess over time as marketing teams wish to
+add more ways to understand users and engineering tries to minimize the impact
+tags can have on user experience. To keep experiences fast, we recommend using a
+Tag manager. Tag managers:
+
+- allow many pieces of third-party embed code to be managed from a single place
+  (usually a user-interface)
+
+- attempt to minimize how much third-party tags need to be deployed to sites.
+
+{% Aside %}
+Even though individual tags can be asynchronously loaded, they still need
+to be read and executed individually. This could mean requesting more data while
+the page is still loading. Tag managers address this by reducing the number of
+calls a browser needs to make for them down to one.
+{% endAside %}
+
+[Google Tag Manager](https://www.google.com/analytics/tag-manager/) (GTM) is one
+such popular tag manager:
+
+"Google Tag Manager is an asynchronous tag, meaning that when it executes, it
+does not block other elements from rendering on the page. It also causes the
+other tags that are deployed via Google Tag Manager to be deployed
+asynchronously, meaning that a slow loading tag won’t block other tracking
+tags."
+
+Tag managers may improve page load performance by reducing how many calls to
+external resources are needed - as long as you **are not** pulling in a large
+number of tags. They also allow tags a way to collect values in a single unique
+place. For GTM, this is the [Data Layer](https://developers.google.com/tag-platform/tag-manager/web/datalayer). If multiple
+third parties wish to trigger conversion-tracking data, they can do this by
+pulling from the Data Layer.
+
+**Risks when using Tag managers**
+
+When using a tag manager, great care needs to be taken to avoid slowing down how
+quickly pages load. This is because:
+
+- Anyone with credentials and access can easily add not just more tags, but
+  _any_ JavaScript they want. Although tag managers can load tags
+  asynchronously, this can still lead to an excess of costly HTTP requests being
+  made and executed. This can be minimized by only allowing one user to publish
+  versions.
+
+- Anyone can configure too many tag manager [auto-event listeners](https://support.google.com/analytics/answer/6164470). Every
+  auto-event listener needs to be executed & the more code and network requests
+  there are, the longer it can take for a page to fully load. With our
+  performance guidance encouraging that you [respond to events within 50ms](/rail/), every tag manager event listener
+  added eats away at that goal.
+
+### Avoid scripts that pollute the global scope
+
+Third-party scripts injected into the unknown can sometimes load a number of
+their own JavaScript dependencies. This can pollute the global scope and cause
+accidental breakage in pages.
+
+There is also no guarantee that code loaded from a third-party will remain the
+same as what you saw during testing. New features can be pushed out by third
+parties at any time, potentially breaking your page. Self-testing, [sub-resource integrity](https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity)
+and securely transmitting third-party code (to reduce the risk of in-transit
+modifications) can help here.
+
+Be sure to conduct careful audits of the third-party scripts you load to ensure
+they’re being good actors.
+
+## Mitigation strategies
+
+Adding third-party scripts to a page implies a level of trust in the origin.
+There are some strategies you can take to minimize their impact on performance
+and security:
+
+- **[HTTPS](/why-https-matters/)** is a
+  must. Sites working over HTTPS shouldn’t have third-parties working over HTTP.
+  An HTTPS page that includes content fetched using HTTP is called a mixed
+  content page and will run into [Mixed Content](https://developer.mozilla.org/docs/Web/Security/Mixed_content)
+  warnings.
+
+- Consider the **[sandbox attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe)** on
+  iframes. From a security perspective, this allows you to restrict the actions
+  available from the iframe. Restrictions include `allow-scripts`controlling
+  whether the context can run scripts.
+
+- Consider **[Content Security Policy](https://developer.mozilla.org/docs/Web/HTTP/CSP)** (CSP).
+  Through a HTTP header in your server’s response, you can define behaviors that
+  are trusted in the page. CSP can be used to detect and mitigate against the
+  effects of certain attacks, such as [Cross Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) (XSS).
+
+CSP is particularly powerful as it includes directives such as
+[script-src](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/script-src)
+that specifies what are valid, allowed sources for JavaScript. Below is an
+example of how this can be used in practice:
+
+```html
+// Given this CSP header Content-Security-Policy: script-src
+https://example.com/ // The following third-party script will not be loaded or
+executed
+
+<script src="https://not-example.com/js/library.js"></script>
+```
+
+## Conclusion
+
+With sites relying on more third-party scripts than ever, it’s paramount not to
+ignore third-party script performance. Good things you can do:
+
+- Become familiar with some of the most effective third-party script
+  optimization methods like only loading tags that support the async loading
+  pattern.
+
+- Understand how to identify and fix issues with third-party script loading.
+  This can help you take back control of your page load performance.
+
+Third-party script optimization should be followed by on-going real-time
+performance monitoring of your scripts and communication with your third-party
+providers. The web is evolving at a rapid pace and a script’s locally observed
+performance gives no guarantees that it will perform as well in the future or in
+the wild.
+
+## Further reading
+
+[Performance and Resilience: Stress-Testing Third Parties](https://csswizardry.com/2017/07/performance-and-resilience-stress-testing-third-parties/)
+
+[Adding interactivity with JavaScript](/critical-rendering-path-adding-interactivity-with-javascript/)
+
+[Potential dangers with Third-party Scripts](https://css-tricks.com/potential-dangers-of-third-party-javascript/)
+
+[How 3rd Party Scripts can be performant citizens on the web](https://www.twnsnd.com/posts/performant_third_party_scripts.html)
+
+[Why Fast Matters - CSS Wizardry](https://speakerdeck.com/csswizardry/why-fast-matters)
+
+[The JavaScript Supply Chain Paradox: SRI, CSP and Trust in Third Party Libraries](https://www.troyhunt.com/the-javascript-supply-chain-paradox-sri-csp-and-trust-in-third-party-libraries/)
+
+[Third-party CSS isn't safe](https://jakearchibald.com/2018/third-party-css-is-not-safe/)
+
+_With thanks to Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff
+Posnick and Cheney Tsai for their reviews._
diff --git a/src/site/content/en/blog/optimizing-content-efficiency-optimize-encoding-and-transfer/index.md b/src/site/content/en/blog/optimizing-content-efficiency-optimize-encoding-and-transfer/index.md
new file mode 100644
index 00000000000..588d024b12f
--- /dev/null
+++ b/src/site/content/en/blog/optimizing-content-efficiency-optimize-encoding-and-transfer/index.md
@@ -0,0 +1,323 @@
+---
+layout: post
+title: Optimizing Encoding and Transfer Size of Text-Based Assets
+authors:
+  - ilyagrigorik
+description: >
+  Next to eliminating unnecessary resource downloads, the best thing we can do to improve page-load speed is to minimize the overall download size by optimizing and compressing the remaining resources.
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+Next to eliminating unnecessary resource downloads, the best thing you can do to
+improve page-load speed is to minimize the overall download size by optimizing and
+compressing the remaining resources.
+
+## Data compression 101
+
+After you’ve eliminated any unnecessary resources, the next step is to compress
+the remaining resources that the browser has to download. Depending on the resource
+type&mdash;text, images, fonts, and so on&mdash;there are many different techniques
+to choose from: generic tools that can be enabled on the server, pre-processing
+optimizations for specific content types, and resource-specific optimizations that
+require input from the developer.
+
+Delivering the best performance requires a combination of all of these techniques.
+
+### Summary {: .hide-from-toc }
+
+- Compression is the process of encoding information using fewer bits.
+- Eliminating unnecessary data always yields the best results.
+- There are many different compression techniques and algorithms.
+- You will need a variety of techniques to achieve the best compression.
+
+The process of reducing the size of data is _data compression_. Many people have
+contributed algorithms, techniques, and optimizations to improve compression ratios,
+speed, and memory requirements of various compressors. A full discussion of data
+compression is beyond the scope of this topic. However, it's important to understand,
+at a high level, how compression works and the techniques you can use to reduce
+the size of various assets that your pages require.
+
+To illustrate the core principles of these techniques, consider the process of
+optimizing a simple text message format that was invented just for this example:
+
+```text
+    # Below is a secret message, which consists of a set of headers in
+    # key-value format followed by a newline and the encrypted message.
+    format: secret-cipher
+    date: 08/25/16
+    AAAZZBBBBEEEMMM EEETTTAAA
+```
+
+1. Messages may contain arbitrary annotations, which are indicated by the "#" prefix.
+   Annotations do not affect the meaning or any other behavior of the message.
+2. Messages may contain _headers_, which are key-value pairs (separated by ":")
+   that appear at the beginning of the message.
+3. Messages carry text payloads.
+
+What can you do to reduce the size of the above message, which is currently
+200 characters?
+
+1. The comment is interesting, but it doesn’t actually affect the meaning of the message.
+   Eliminate it when transmitting the message.
+2. There are good techniques to encode headers in an efficient manner. For example,
+   if you know that all messages have "format" and "date," you could convert those
+   to short integer IDs and just send those. However, that might not be true, so just
+   leave it alone for now.
+3. The payload is text only, and while we don’t know what the contents of it really are
+   (apparently, it’s using a "secret-message"), just looking at the text shows that
+   there's a lot of redundancy in it. Perhaps instead of sending repeated letters,
+   you can just count the number of repeated letters and encode them more efficiently.
+   For example, "AAA" becomes "3A", which represents a sequence of three A’s.
+
+Combining these techniques produces the following result:
+
+```text
+    format: secret-cipher
+    date: 08/25/16
+    3A2Z4B3E3M 3E3T3A
+```
+
+The new message is 56 characters long, which means that you've compressed the original
+message by an impressive 72%.
+
+This is all great, but how does this help us optimize our web pages? We’re not going
+to try to invent our compression algorithms, but, as you will see, we can use the
+exact same techniques and thought processes when optimizing various resources on
+our pages: preprocessing, context-specific optimizations, and different algorithms
+for different content.
+
+## Minification: preprocessing & context-specific optimizations
+
+### Summary {: .hide-from-toc }
+
+- Content-specific optimizations can significantly reduce the size of delivered resources.
+- Content-specific optimizations are best applied as part of your build/release cycle.
+
+The best way to compress redundant or unnecessary data is to eliminate it altogether.
+We can’t just delete arbitrary data, but in some contexts where we have content-specific
+knowledge of the data format and its properties, it's often possible to significantly
+reduce the size of the payload without affecting its actual meaning.
+
+```html
+<html>
+  <head>
+    <style>
+      /* awesome-container is only used on the landing page */
+      .awesome-container {
+        font-size: 120%;
+      }
+      .awesome-container {
+        width: 50%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- awesome container content: START -->
+    <div>…</div>
+    <!-- awesome container content: END -->
+    <script>
+      awesomeAnalytics(); // beacon conversion metrics
+    </script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/optimizing-content-efficiency/minify.html)
+
+Consider the simple HTML page above and the three different content types that it
+contains: HTML markup, CSS styles, and JavaScript. Each of these content types has
+different rules for what constitutes valid content, different rules for indicating
+comments, and so on. How can we reduce the size of this page?
+
+- Code comments are a developer’s best friend, but the browser doesn't need to see them!
+  Simply stripping the CSS (`/* … */`), HTML (`<!-- … -->`), and JavaScript (`// …`)
+  comments can significantly reduce the total size of the page.
+- A "smart" CSS compressor could notice that we’re using an inefficient way of
+  defining rules for ".awesome-container" and collapse the two declarations into one
+  without affecting any other styles, saving more bytes.
+- Whitespace (spaces and tabs) is a developer convenience in HTML, CSS, and JavaScript.
+  An additional compressor could strip out all the tabs and spaces.
+
+```html
+<html>
+  <head>
+    <style>
+      .awesome-container {
+        font-size: 120%;
+        width: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div>…</div>
+    <script>
+      awesomeAnalytics();
+    </script>
+  </body>
+</html>
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/performance/optimizing-content-efficiency/minified.html)
+
+After applying the above steps, the page goes from 406 to 150 characters,
+a 63% compression savings. Granted, it’s not very readable, but it also doesn’t
+have to be: you can keep the original page as your "development version" and then
+apply the steps above whenever you're ready to release the page on your website.
+
+Taking a step back, the above example illustrates an important point: a general-purpose
+compressor&mdash;say, one designed to compress arbitrary text&mdash;could probably
+do a pretty good job of compressing the page above, but it would never know to
+strip the comments, collapse the CSS rules, or dozens of other content-specific
+optimizations. This is why preprocessing/minification/context-aware optimization
+can be such a powerful tool.
+
+{% Aside %}
+Case in point, the uncompressed development version of the jQuery library
+is now approaching ~300KB. The same library, but minified (removed comments, etc.)
+is about 3x smaller: ~100KB.
+{% endAside %}
+
+Similarly, the techniques described above can be extended beyond just text-based assets.
+Images, video, and other content types all contain their own forms of metadata
+and various payloads. For example, whenever you take a picture with a camera,
+the photo also typically embeds a lot of extra information: camera settings,
+location, and so on. Depending on your application, this data might be critical
+(for example, a photo-sharing site) or completely useless, and you should consider
+whether it is worth removing. In practice, this metadata can add up to tens of
+kilobytes for every image.
+
+In short, as a first step in optimizing the efficiency of your assets, build
+an inventory of the different content types and consider what kinds of content-specific
+optimizations you can apply to reduce their size. Then, after you’ve figured out
+what they are, automate these optimizations by adding them to your build and
+release processes to ensure that the optimizations are applied.
+
+## Text compression with GZIP
+
+### Summary {: .hide-from-toc }
+
+- GZIP performs best on text-based assets: CSS, JavaScript, HTML.
+- All modern browsers support GZIP compression and will automatically request it.
+- Your server must be configured to enable GZIP compression.
+- Some CDNs require special care to ensure that GZIP is enabled.
+
+[GZIP](https://en.wikipedia.org/wiki/Gzip) is a generic compressor that can be applied
+to any stream of bytes. Under the hood, it remembers some of the previously seen content
+and attempts to find and replace duplicate data fragments in an efficient way.
+(If you're curious, here's a
+[great low-level explanation of GZIP](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s).)
+However, in practice, GZIP performs best on text-based content, often achieving
+compression rates of as high as 70-90% for larger files, whereas running GZIP
+on assets that are already compressed via alternative algorithms (for example,
+most image formats) yields little to no improvement.
+
+All modern browsers support and automatically negotiate GZIP compression for all
+HTTP requests. You must ensure that the server is properly configured to serve the
+compressed resource when the client requests it.
+
+<table>
+<thead>
+  <tr>
+    <th>Library</th>
+    <th>Size</th>
+    <th>Compressed size</th>
+    <th>Compression ratio</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="library">jquery-1.11.0.js</td>
+  <td data-th="size">276 KB</td>
+  <td data-th="compressed">82 KB</td>
+  <td data-th="savings">70%</td>
+</tr>
+<tr>
+  <td data-th="library">jquery-1.11.0.min.js</td>
+  <td data-th="size">94 KB</td>
+  <td data-th="compressed">33 KB</td>
+  <td data-th="savings">65%</td>
+</tr>
+<tr>
+  <td data-th="library">angular-1.2.15.js</td>
+  <td data-th="size">729 KB</td>
+  <td data-th="compressed">182 KB</td>
+  <td data-th="savings">75%</td>
+</tr>
+<tr>
+  <td data-th="library">angular-1.2.15.min.js</td>
+  <td data-th="size">101 KB</td>
+  <td data-th="compressed">37 KB</td>
+  <td data-th="savings">63%</td>
+</tr>
+<tr>
+  <td data-th="library">bootstrap-3.1.1.css</td>
+  <td data-th="size">118 KB</td>
+  <td data-th="compressed">18 KB</td>
+  <td data-th="savings">85%</td>
+</tr>
+<tr>
+  <td data-th="library">bootstrap-3.1.1.min.css</td>
+  <td data-th="size">98 KB</td>
+  <td data-th="compressed">17 KB</td>
+  <td data-th="savings">83%</td>
+</tr>
+<tr>
+  <td data-th="library">foundation-5.css</td>
+  <td data-th="size">186 KB</td>
+  <td data-th="compressed">22 KB</td>
+  <td data-th="savings">88%</td>
+</tr>
+<tr>
+  <td data-th="library">foundation-5.min.css</td>
+  <td data-th="size">146 KB</td>
+  <td data-th="compressed">18 KB</td>
+  <td data-th="savings">88%</td>
+</tr>
+</tbody>
+</table>
+
+The above table shows the savings that GZIP compression produces for a few of the
+most popular JavaScript libraries and CSS frameworks. The savings range from 60 to 88%,
+and the combination of minified files (identified by “.min” in their filenames),
+plus GZIP, offers even more savings.
+
+1. **Apply content-specific optimizations first: CSS, JS, and HTML minifiers.**
+2. **Apply GZIP to compress the minified output.**
+
+Enabling GZIP is one of the simplest and highest-payoff optimizations to implement,
+and yet, many people don't implement it. Most web servers compress content on your behalf,
+and you just need to verify that the server is correctly configured to compress
+all the content types that benefit from GZIP compression.
+
+The HTML5 Boilerplate project contains
+[sample configuration files](https://github.com/h5bp/server-configs)
+for all the most popular servers with detailed comments for each configuration flag
+and setting. To determine the best configuration for your server, do the following:
+
+- Find your favorite server in the list.
+- Look for the GZIP section.
+- Confirm that your server is configured with the recommended settings.
+
+<img src="images/transfer-vs-actual-size.png"
+  alt="DevTools demo of actual vs transfer size">
+
+A quick and simple way to see GZIP in action is to open Chrome DevTools and
+inspect the “Size / Content” column in the Network panel: “Size” indicates the
+transfer size of the asset, and “Content” the uncompressed size of the asset.
+For the HTML asset in the preceding example, GZIP saved 98.8 KB during the transfer.
+
+{% Aside %}
+Sometimes, GZIP increases the size of the asset. Typically, this happens when
+the asset is very small and the overhead of the GZIP dictionary is higher than the
+compression savings, or when the resource is already well compressed. To avoid
+this problem, some servers allow you to specify a minimum filesize threshold.
+{% endAside %}
+
+Finally, while most servers automatically compress the assets for you when serving them
+to the user, some CDNs require extra care and manual effort to ensure that the
+GZIP asset is served. Audit your site and ensure that your assets are, in fact,
+[being compressed](http://www.whatsmyip.org/http-compression-test/).
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/optimizing-content-efficiency-save-data/index.md b/src/site/content/en/blog/optimizing-content-efficiency-save-data/index.md
new file mode 100644
index 00000000000..98f9583bd7e
--- /dev/null
+++ b/src/site/content/en/blog/optimizing-content-efficiency-save-data/index.md
@@ -0,0 +1,399 @@
+---
+layout: post
+title: Delivering Fast and Light Applications with Save-Data
+authors:
+  - ilyagrigorik
+  - dgash
+  - jlwagner
+description: >
+  The Save-Data client hint request header available in Chrome, Opera, and Yandex browsers enables developers to deliver fast and light applications to users who have opted-in to 'data saving' mode in the browser.
+date: 2016-02-18
+updated: 2018-04-19
+---
+
+**The [`Save-Data` client hint request
+header](https://httpwg.github.io/http-extensions/client-hints.html#the-save-data-hint)
+available in Chrome, Opera, and Yandex browsers lets developers deliver lighter,
+faster applications to users who opt-in to data saving mode in their browser.**
+
+## The need for lightweight pages
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/2dptWWpJQ5nE6Wf276UO.png", alt="Weblight stats", width="600", height="423" %}
+
+Everyone agrees that faster and lighter web pages provide a more satisfying user
+experience, allow better content comprehension and retention, and deliver
+increased conversions and revenue. [Google
+research](https://support.google.com/webmasters/answer/6211428) has shown that
+"…optimized pages load four times faster than the original page and use 80%
+fewer bytes. Because these pages load so much faster, we also saw a 50% increase
+in traffic to these pages."
+
+And, although the number of 2G connections is [finally on the
+decline](http://www.gsmamobileeconomy.com/GSMA_Global_Mobile_Economy_Report_2015.pdf),
+2G was [still the dominant network
+technology](http://www.gsmamobileeconomy.com/GSMA_Global_Mobile_Economy_Report_2015.pdf)
+in 2015. The penetration and availability of 3G and 4G networks is growing
+rapidly, but the associated ownership costs and network constraints are still a
+significant factor for hundreds of millions of users.
+
+These are strong arguments for page optimization.
+
+There are alternative methods for improving site speed without direct developer
+involvement, such as proxy browsers and transcoding services. Although such
+services are quite popular, they come with substantial drawbacks &mdash; simple
+(and sometimes unacceptable) image and text compression, inability to process
+secure (HTTPS) pages, only optimizing pages visited via a search result, and
+more. The very popularity of these services is itself an indicator that web
+developers are not properly addressing the high user demand for fast and light
+applications and pages. But reaching that goal is a complex and sometimes
+difficult path.
+
+## The `Save-Data` request header
+
+One fairly straightforward technique is to let the browser help, using the
+`Save-Data` request header. By identifying this header, a web page can customize
+and deliver an optimized user experience to cost- and performance-constrained
+users.
+
+Supported browsers (below) allow the user to enable a \*data saving- mode that
+gives the browser permission to apply a set of optimizations to reduce the
+amount of data required to render the page. When this feature is exposed, or
+advertised, the browser may request lower resolution images, defer loading of
+some resources, or route requests through a service that applies other
+content-specific optimizations such as image and text resource compression.
+
+## Browser support
+
+- **Chrome 49+** advertises `Save-Data` [when the user
+  enables](https://support.google.com/chrome/answer/2392284) the "Data Saver"
+  option on mobile, or the "Data Saver" extension on desktop browsers.
+- **Opera 35+** advertises `Save-Data` when the user enables "[Opera
+  Turbo](http://www.opera.com/computer/features/fast-browser)" mode on desktop,
+  or the "[Data savings](http://www.opera.com/help/mobile/android#turbo)" option
+  on Android browsers.
+- **Yandex 16.2+** advertises `Save-Data` when [Turbo
+  mode](https://yandex.com/support/newbrowser/search-and-browse/turbo.xml) is
+  enabled on desktop or [mobile
+  browsers](https://yandex.com/support/browser-mobile-android-phone/navigation/turbo-mode.xml).
+
+## Detecting the `Save-Data` setting
+
+To determine when to deliver the "light" experience to your users, your
+application can check for the `Save-Data` client hint request header. This
+request header indicates the client's preference for reduced data usage due to
+high transfer costs, slow connection speeds, or other reasons.
+
+When the user enables the data saving mode in their browser, the browser appends
+the `Save-Data` request header to all outgoing requests (both HTTP and HTTPS).
+As of this writing, the browser only advertises one \*_on_- token in the header
+(`Save-Data: on`), but this may be extended in the future to indicate other user
+preferences.
+
+Additionally, it's possible to detect if `Save-Data` is turned on in JavaScript:
+
+```javascript
+if ('connection' in navigator) {
+  if (navigator.connection.saveData === true) {
+    // Implement data saving operations here.
+  }
+}
+```
+
+Checking for the presence of the `connection` object within the `navigator`
+object is vital, as it represents the Network Information API, which is only
+implemented in Chrome, Chrome for Android, and Samsung Internet browsers. From
+there, you only need to check if `navigator.connection.saveData` is equal to
+`true`, and you can implement any data saving operations in that condition.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/fvgG3HcmdSKyWutIkkJe.png", alt="The
+Save-Data header revealed in Chrome's Developer Tools pictured along with the
+Data Saver extension.", width="800", height="623" %}
+  <figcaption>Enabling the Data Saver extension in Chrome desktop.</figcaption>
+</figure>
+
+If your application [uses a service
+worker](/web/fundamentals/getting-started/push-notifications/step-03), it can
+inspect the request headers and apply relevant logic to optimize the experience.
+Alternatively, the server can look for the advertised preferences in the
+`Save-Data` request header and return an alternate response &mdash; different
+markup, smaller images and video, and so on.
+
+Tip: If you use [PageSpeed for Apache or Nginx](https://developers.google.com/speed/pagespeed/module/) to
+optimize your pages, see [this
+discussion](https://github.com/pagespeed/mod_pagespeed/issues/1258) to learn how
+to enable `Save-Data` savings for your users.\_
+
+## Implementation tips and best practices
+
+1. When using `Save-Data`, provide some UI devices that support it and allow users
+   to easily toggle between experiences. For example:
+   - Notify users that `Save-Data` is supported and encourage them to use it.
+   - Allow users to identify and choose the mode with appropriate prompts and
+     intuitive on/off buttons or checkboxes.
+   - When data saving mode is selected, announce and provide an easy and obvious
+     way to disable it and revert back to the full experience if desired.
+2. Remember that lightweight applications are not lesser applications. They don't
+   omit important functionality or data, they're just more cognizant of the
+   involved costs and the user experience. For example:
+   - A photo gallery application may deliver lower resolution previews, or use a less
+     code-heavy carousel mechanism.
+   - A search application may return fewer results at a time, limit the number of
+     media-heavy results, or reduce the number of dependencies required to render
+     the page.
+   - A news-oriented site may show fewer stories, omit less popular categories,
+     or provide smaller media previews.
+3. Provide server logic to check for the `Save-Data` request header and consider
+   providing an alternate, lighter page response when it is enabled &mdash; e.g.,
+   reduce the number of required resources and dependencies, apply more aggressive
+   resource compression, etc.
+   - If you're serving an alternate response based on the `Save-Data` header,
+     remember to add it to the Vary list &mdash; `Vary: Save-Data` &mdash; to tell
+     upstream caches that they should cache and serve this version only if the
+     `Save-Data` request header is present. For more details, see the best practices
+     for
+     [interaction with caches](https://httpwg.github.io/http-extensions/client-hints.html#interaction-with-caches).
+4. If you use a service worker, your application can detect when the data saving
+   option is enabled by checking for the presence of the `Save-Data` request
+   header, or by checking the value of the `navigator.connection.saveData`
+   property. If enabled, consider whether you can rewrite the request to fetch
+   fewer bytes, or use an already fetched response.
+5. Consider augmenting `Save-Data` with other signals, such as information about
+   the user's connection type and technology (see [NetInfo
+   API](http://w3c.github.io/netinfo/#examples-of-usage)). For example, you might
+   want to serve the lightweight experience to any user on a 2G connection even if
+   `Save-Data` is not enabled. Conversely, just because the user is on a "fast" 4G
+   connection doesn't mean they aren't interested in saving data &mdash; for
+   example, when roaming. Additionally, you could augment the presence of
+   `Save-Data` with the `Device-Memory` client hint to further adapt to users on
+   devices with limited memory. User device memory is also advertised in the
+   `navigator.deviceMemory` client hint.
+
+## Recipes
+
+What you can achieve via `Save-Data` is limited only to what you can come up
+with. To give you an idea of what's possible, let's run through a couple of use
+cases. You may come up with other use cases of your own as you read this, so
+feel free to experiment and see what's possible!
+
+### Checking for `Save-Data` in server side code
+
+While the `Save-Data` state is something you _can_ detect in JavaScript via the
+`navigator.connection.saveData` property, detecting it on the server side is
+sometimes preferable. JavaScript _can_ fail to execute in some cases. Plus,
+server side detection is the only way to modify markup _before_ it's sent to the
+client, which is involved in some of `Save-Data`s most beneficial use cases.
+
+The specific syntax for detecting the `Save-Data` header in server side code
+depends on the language used, but the basic idea should be the same for any
+application back end. In PHP, for example, request headers are stored in the
+[`$_SERVER` superglobal
+array](http://php.net/manual/en/reserved.variables.server.php) at indexes
+starting with `HTTP_`. This means you can detect the `Save-Data` header by
+checking the existence and value of the `$_SERVER["HTTP_SAVE_DATA"]` variable
+like so:
+
+```php
+// false by default.
+$saveData = false;
+
+// Check if the `Save-Data` header exists and is set to a value of "on".
+if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
+  // `Save-Data` detected!
+  $saveData = true;
+}
+```
+
+If you place this check before any markup is sent to the client, the `$saveData`
+variable will contain the `Save-Data` state, and will be available anywhere for
+use on the page. With this mechanism illustrated, let's look a few examples of
+how we can use it to limit how much data we send to the user.
+
+### Serve low resolution images for high resolution screens
+
+A common use case for images on the web involves serving images in sets of two:
+One image for "standard" screens (1x), and another image that's twice as large
+(2x) for high resolution screens (e.g., [Retina
+Display](https://en.wikipedia.org/wiki/Retina_Display)). This class of high
+resolution screens is not necessarily limited to high end devices, and is
+becoming increasingly common. In cases where a lighter application experience is
+preferred, it might be prudent to send lower resolution (1x) images to these
+screens, rather than larger (2x) variants. To achieve this when the `Save-Data`
+header is present, we simply modify the markup we send to the client:
+
+```php
+if ($saveData === true) {
+  // Send a low-resolution version of the image for clients specifying `Save-Data`.
+  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
+}
+else {
+  // Send the usual assets for everyone else.
+  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
+}
+```
+
+This use case is a perfect example of how little effort it takes to accommodate
+someone who is specifically asking you to send them less data. If you don't like
+modifying markup on the back end, you could also achieve the same result by
+using a URL rewrite module such as [Apache's
+`mod_rewrite`](http://httpd.apache.org/docs/current/mod/mod_rewrite.html). There
+are [examples of how to achieve
+this](https://css-tricks.com/help-users-save-data/#article-header-id-0) with
+relatively little configuration.
+
+You could also extend this concept to CSS `background-image` properties by
+simply adding a class to the `<html>` element:
+
+```php
+<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
+```
+
+From here, you can target the `save-data` class on the `<html>` element in your
+CSS to change how images are delivered. You could send low resolution background
+images to high resolution screens as shown in the above HTML example, or omit
+certain resources altogether.
+
+### Omit non-essential imagery
+
+Some image content on the web is simply non-essential. While such imagery can
+make for nice asides to content, they may not be desirable by those trying to
+squeeze all they can out of metered data plans. In what is perhaps the simplest
+use case of `Save-Data`, we can use the PHP detection code from earlier and omit
+non-essential image markup altogether:
+
+```php
+<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
+<?php
+if ($saveData === false) {
+  // Only send this image if `Save-Data` hasn't been detected.
+  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
+}
+```
+
+This technique can certainly have a pronounced effect, as you can see in the
+figure below:
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/fQ5ULmzstgJNbfV3tRTC.png", alt="A comparison of non-critical imagery
+being loaded when Save-Data is absent, versus that same imagery being omitted
+when Save-Data is present.", width="800", height="330" %}
+  <figcaption>A comparison of non-critical imagery being loaded when Save-Data is
+absent, versus that same imagery being omitted when Save-Data is
+present.</figcaption>
+</figure>
+
+Of course, omitting images isn't the only possibility. You can also act on
+`Save-Data` to forego sending other non-critical resources, such as certain
+typefaces.
+
+### Omit non-essential web fonts
+
+While web fonts don't usually make up nearly as much of a given page's total
+payload as images often do, they're still quite popular. [They don't consume an
+insignificant amount of
+data](https://httparchive.org/reports/page-weight#bytesFont), either.
+Furthermore, the way browsers fetch and render fonts is more complicated than
+you might think, with concepts such as
+[FOIT](https://www.zachleat.com/web/webfont-glossary/#foit),
+[FOUT](https://www.zachleat.com/web/webfont-glossary/#fout), and browser
+heuristics making rendering a nuanced operation.
+
+It might stand to reason then that you might want to leave out non-essential web
+fonts for users who want leaner user experiences. `Save-Data` makes this a
+reasonably painless thing to do.
+
+For example, let's say you've included [Fira
+Sans](https://fonts.google.com/specimen/Fira+Sans) from [Google
+Fonts](https://fonts.google.com) on your site. Fira Sans is an excellent body
+copy font, but maybe it isn't so crucial to users trying to save data. By adding
+a class of `save-data` to the `<html>` element when the `Save-Data` header is
+present, we can write styles that invoke the non-essential typeface at first,
+but then opts out of it when the `Save-Data` header is present:
+
+```css
+/* Opt into web fonts by default. */
+p,
+li {
+  font-family: 'Fira Sans', 'Arial', sans-serif;
+}
+
+/* Opt out of web fonts if the `save-Data` class is present. */
+.save-data p,
+.save-data li {
+  font-family: 'Arial', sans-serif;
+}
+```
+
+Using this approach, you can leave the `<link>` snippet from Google Fonts in
+place, because the browser speculatively loads CSS resources (including web
+fonts) by first applying styles to the DOM, and then checking if any HTML
+elements invoke any of the resources in the style sheet. If someone happens by
+with `Save-Data` on, Fira Sans will never load because the styled DOM never
+invokes it. Arial will kick in, instead. It's not as nice as as Fira Sans, but
+it may be preferable to those users trying to stretch their data plans.
+
+### Opting out of server pushes
+
+[HTTP/2 server push](https://tools.ietf.org/html/rfc7540#section-8.2) is often
+the most touted feature of HTTP/2. [While it can boost
+performance](https://www.smashingmagazine.com/2017/04/guide-http2-server-push/#measuring-server-push-performance),
+it can potentially be problematic due to [caching
+"gotchas"](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/).
+
+If you're comfortable using server push and understand its current, quirky way
+of interacting with the browser cache, then great. But you may want to consider
+disabling it altogether if the `Save-Data` header is present.
+
+Many HTTP/2 implementations kick off a server push for a resource when a `Link`
+response header invoking [`rel=preload`](https://www.w3.org/TR/preload/) is set.
+This leads to some confusion as to whether `rel=preload` and server push are one
+and the same, but they're two distinct things. `rel=preload` is a resource hint,
+and server push is part of HTTP/2. It just so happens the `Link` header kicks
+off a server push in a number of HTTP/2 implementations.
+
+The specification for `rel=preload` [addresses this potential pain
+point](https://www.w3.org/TR/preload/#server-push-http-2) by offering a `nopush`
+keyword to be used in `Link` HTTP response headers. Using the back end
+detection logic outlined earlier, you could append `nopush` if `Save-Data` is
+present:
+
+```php
+// `preload` like usual…
+$preload = "</css/styles.css>; rel=preload; as=style";
+
+if($saveData === true) {
+  // …but don't push anything if `Save-Data` is detected!
+  $preload .= "; nopush";
+}
+
+header("Link: " . $preload);
+```
+
+[There are other ways to achieve
+this](https://www.ctrl.blog/entry/http2-save-data-push), some more more nuanced
+than others, but the idea is the same: HTTP/2 server push is turned off when
+`Save-Data` is present.
+
+As you can see, there's a lot that can be accomplished with `Save-Data`. These
+are just a couple simple use cases to get you going, so feel free to experiment
+and see what novel use cases you can come up with!
+
+## Summary
+
+The `Save-Data` header does not have much nuance; it is either on or off, and
+the application bears the burden of providing appropriate experiences based on
+its setting, regardless of the reason.
+
+For example, some users might not allow data saving mode if they suspect there
+will be a loss of app content or function, even in a poor connectivity
+situation. Conversely, some users might enable it as a matter of course to keep
+pages as small and simple as possible, even in a good connectivity situation.
+It's best for your app to assume that the user wants the full and unlimited
+experience until you have a clear indication otherwise via an explicit user
+action.
+
+As site owners and web developers, let's take on the responsibility of managing
+our content to improve the user experience for data- and cost-constrained users.
+
+For more detail on `Save-Data` and excellent practical examples, see [Help Your
+Users `Save Data`](https://css-tricks.com/help-users-save-data/).
diff --git a/src/site/content/en/blog/orange/index.md b/src/site/content/en/blog/orange/index.md
new file mode 100644
index 00000000000..995a5565443
--- /dev/null
+++ b/src/site/content/en/blog/orange/index.md
@@ -0,0 +1,89 @@
+---
+title: >
+  Orange: New PWA converts 52% better on mobile
+subhead: >
+  The new PWA also has an average loading time 30% faster than the old site
+  and has improved bounce rate 12% and session depth 18%.
+description: >
+  The new PWA also has an average loading time 30% faster than the old site
+  and has improved bounce rate 12% and session depth 18%.
+date: 2021-05-11
+hero: image/BrQidfK9jaQyIHwdw91aVpkPiib2/Y0EbySRTUBgpnegXvg4K.jpg
+thumbnail: image/BrQidfK9jaQyIHwdw91aVpkPiib2/IXZcW61ju9WcwmmTbhZT.jpg
+alt: A group of smartphones in a circle.
+tags:
+  - blog
+  - case-study
+  - progressive-web-apps
+authors:
+  - adamskret
+  - rafałfilipek
+  - marcinsierakowski
+---
+
+{% Aside %}
+  The authors of this case study are Orange employees and worked on the PWA project.
+{% endAside %}
+
+[Orange Polska S.A.](https://www.orange.pl/) (part of the international Orange Group) is a leading
+provider of telecommunications services in Poland, including mobile and fixed telecommunications
+services such as voice, data, internet access, and television. We also provide IT and integration
+services, leased lines, and other telecommunications value-added services and equipment.
+
+{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/lI8AvPzBsobGijMdUH3p.png", alt="Screenshots of the new PWA.", width="800", height="533" %}
+
+## Challenge
+
+We all know that feeling of anxiety that turns into irritation when a website takes forever to load.
+For digital companies with little to no physical presence the impact of this is obvious, especially
+when it comes to mobile apps where our internal research clearly shows that the single most
+important reason for app de-installation is speed. However, if you operate in an established sector
+like us with a strong brick-and-mortar strategy for distribution channels, the impact of digital
+speed is not as obvious, because digital is not the only source of our sales. This makes it even
+more challenging to persuade executives to invest in speed.
+
+When pitching our executives, we made our case stronger by turning to our historical performance
+data on Google Analytics to clearly show the correlation between loading time and conversion rates.
+With cold, hard facts we were able to show that every additional second of page load time resulted
+in 15-20% lower revenue and sales.
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/dtZxd66DIrH6QX7Ff9FH.png", alt="Charts that show the correlation between load time and conversions.", width="800", height="366" %}
+  <figcaption>
+    The top chart (in orange) shows the conversion rate on the old site, segmented by loading
+    time. For example, the first bar from the left represents users who experienced a loading time
+    of less than 2 seconds. The bar next to it represents users who experienced a loading time of
+    between 2 and 3 seconds. The bottom chart (in grey) shows the loading times that all users
+    actually experienced on the old site. 
+  </figcaption>
+</figure>
+
+## Approach
+
+We decided to build a Progressive Web App (PWA). We specifically focused on mobile traffic because
+more than 75% of customers use our website through a mobile device. The team focused equally on
+improving key performance indicators and delivering a more engaging and attractive experience.
+
+We launched a new cross-functional scrum team (including IT, business, and UX professionals) that
+aimed at delivering a proof of concept to answer the following questions:
+
++   Are we able to effectively reduce loading time while respecting our significant legacy
+    limitations?
++   What will be the actual impact on conversion and revenue?
+
+We chose [Next.js](https://nextjs.org/) because of its many optimizations that are either enabled by
+default or easy to set up, such as automatic server-side rendering (which is especially important
+for our SEO),  data prefetching, and code splitting. Another key consideration for us was that
+Next.js enabled us to migrate pages one-by-one without introducing any problems in our legacy
+applications. Nevertheless, we had to manage the transformation in a complex environment where we
+were still reliant on legacy systems, resulting in service unavailability. To remedy this we have
+integrated [Workbox](https://developer.chrome.com/docs/workbox/) so that our website would
+always be available even if the backend was down. Workbox also gave us nice performance boosts
+thanks to its built-in solutions for precaching, request routing, and runtime caching.
+
+## Results
+
+Our new PWA has an average loading time 30% faster than the old site, our conversion on mobile
+devices has increased 52%, our bounce rate has improved 12%, and our session depth has improved 18%.
+This experience has confirmed the strategic direction to transform all customer-facing solutions
+(including customer self-care and salesman frontends) towards PWA technology.
diff --git a/src/site/content/en/blog/origin-agent-cluster/index.md b/src/site/content/en/blog/origin-agent-cluster/index.md
new file mode 100644
index 00000000000..56b6c27fca6
--- /dev/null
+++ b/src/site/content/en/blog/origin-agent-cluster/index.md
@@ -0,0 +1,276 @@
+---
+layout: post
+title: Requesting performance isolation with the Origin-Agent-Cluster header
+subhead: >
+  A new HTTP response header to limit domain-wide scripting and request dedicated resources from the
+  browser.
+authors:
+  - domenic
+description: >
+  The Origin-Agent-Cluster header cuts off synchronous access to other origins on the same domain,
+  and hints to the browser to give your origin dedicated resources.
+date: 2021-02-01
+hero: image/admin/6dA7AcZStU3xgfMiCdoJ.jpg
+alt: A cluster of grapes
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - memory
+---
+
+`Origin-Agent-Cluster` is a new HTTP response header that instructs the browser to prevent
+synchronous scripting access between same-site cross-origin pages. Browsers may also use
+`Origin-Agent-Cluster` as a hint that your origin should get its own, separate resources, such as a
+dedicated process.
+
+## Browser compatibility
+
+Currently the `Origin-Agent-Cluster` header is only implemented in Chrome 88 onward. It was designed
+in close collaboration with representatives from Mozilla Firefox who have marked it as [worth
+prototyping](https://mozilla.github.io/standards-positions/#domenic-origin-isolation), and has [a
+preliminary positive
+reception](https://lists.webkit.org/pipermail/webkit-dev/2020-August/031355.html) from
+representatives of WebKit, the browser engine used by Safari.
+
+But in the meantime, there's no problem with deploying the `Origin-Agent-Cluster` header to all your
+users today. Browsers which don't understand it will just ignore it. And, since pages in
+origin-keyed agent clusters can actually do [fewer things](#limitations) than site-keyed ones (the
+default), there's no interoperability issue to be worried about.
+
+## Why browsers can't automatically segregate same-site origins
+
+The web is built on the [same-origin policy](/same-origin-policy/), which is a security feature that
+restricts how documents and scripts can interact with resources from another
+[origin](/same-site-same-origin/#origin). For example, a page hosted at `https://a.example` is at a
+different origin from one at `https://b.example`, or one at `https://sub.a.example`.
+
+Behind the scenes, browsers use the separation that origins provide in different ways. In the old
+days, even though separate origins would not be able to access each other's data, they would still
+share resources like operating system threads, processes, and memory allocation. This meant that if
+one tab was slow, it would slow down all the other tabs. Or if one tab used too much memory, it
+would crash the entire browser.
+
+These days browsers are more sophisticated, and try to separate different origins into different
+processes. How exactly this works varies per browser: most browsers have some level of separation
+between tabs, but different iframes inside a single tab might share a process. And because processes
+come with some memory overhead, they use heuristics to avoid spawning too many: for example, Firefox
+has a [user-configurable process limit](https://support.mozilla.org/en-US/kb/performance-settings),
+and Chrome varies its behavior between desktop (where memory is more plentiful) and mobile (where it
+is scarce).
+
+These heuristics are not perfect. And they suffer from an important limitation: because there are
+exceptions to the same-origin policy which allow subdomains like `https://sub.a.example` and
+`https://a.example` to talk to each other, browsers cannot automatically segregate subdomains from
+each other.
+
+{% Aside %}
+The technical distinction here is that the browser cannot automatically segregate pages which are
+same-site to each other, even if they are cross-origin. The most common cases of same-site
+cross-origin pages happen with subdomains, but see the article [Understanding "same-site" and
+"same-origin"](/same-site-same-origin/) for more.
+{% endAside %}
+
+This default behavior is called "site-keyed agent clusters": that is, the browser groups pages based
+on their _site_. The new `Origin-Agent-Cluster` header asks the browser to change this default
+behavior for a given page, putting it into an _origin_-keyed agent cluster, so that it is grouped
+only with other pages that have the exact same origin. In particular, same-site cross-origin pages
+will be excluded from the agent cluster.
+
+This opt-in separation allows browsers to give these new origin-keyed agent clusters their own
+dedicated resources, which are not combined with those of other origins. For example, such pages
+could get their own process, or be scheduled on separate threads. By adding the
+`Origin-Agent-Cluster` header to your page, you're indicating to the browser that the page would
+benefit from such dedicated resources.
+
+However, in order to perform the separation, and get these benefits, the browser needs to disable
+some legacy features.
+
+## What origin-keyed pages cannot do {: #limitations }
+
+When your page is in an origin-keyed agent cluster, you give up some abilities to talk to same-site
+cross-origin pages that were previously available. In particular:
+
+- You can no longer set
+  [`document.domain`](https://developer.mozilla.org/docs/Web/API/Document/domain). This is a
+  legacy feature that normally allows same-site cross-origin pages to synchronously access each
+  other's DOM, but in origin-keyed agent clusters, it is disabled.
+
+- You can no longer send
+  [`WebAssembly.Module`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module)
+  objects to other same-site cross-origin pages via `postMessage()`.
+
+- (Chrome-only) You can no longer send
+  [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)
+  or
+  [`WebAssembly.Memory`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory)
+  objects to other same-site cross-origin pages.
+
+{% Aside 'caution' %}
+Chrome is the only browser that allows sending `SharedArrayBuffer` and `WebAssembly.Memory` objects
+to same-site cross-origin pages. Other browsers, and [future versions of
+Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/1NKvbIj3dq4/m/Vgfisu5HAwAJ), will
+prevent sending these objects across the origin boundary regardless of whether the agent cluster is
+origin-keyed or site-keyed.
+{% endAside %}
+
+## When to use origin-keyed agent clusters
+
+The origins that most benefit from the `Origin-Agent-Cluster` header are those that:
+
+- Perform best with their own dedicated resources when possible. Examples include
+  performance-intensive games, video conferencing sites, or multimedia creation apps.
+
+- Contains resource-intensive iframes that are different-origin, but same-site. For example, if
+  `https://mail.example.com` embeds `https://chat.example.com` iframes, origin-keying
+  `https://mail.example.com/` ensures that the code written by the chat team cannot accidentally
+  interfere with code written by the mail team, and can hint to the browser to give them separate
+  processes to schedule them independently and decrease their performance impact on each other.
+
+- Expect to be embedded on different-origin, same-site pages, but know themselves to be
+  resource-intensive. For example, if `https://customerservicewidget.example.com` expects to use
+  lots of resources for video chat, and will be embedded on various origins throughout
+  `https://*.example.com`, the team maintaining that widget could use the `Origin-Agent-Cluster`
+  header to try to decrease their performance impact on embedders.
+
+Additionally, you'll also need to make sure you're OK disabling the above-discussed [rarely-used
+cross-origin communication features](#limitations), and that your site is [using
+HTTPS](/why-https-matters/).
+
+But in the end, these are just guidelines. Whether origin-keyed agent clusters will help your site
+or not is ultimately best determined through measurements. In particular, you'll want to [measure
+your Web Vitals](/vitals-measurement-getting-started/), and potentially your [memory
+usage](/monitor-total-page-memory-usage/), to see what impact origin-keying has. (Memory usage in
+particular is a potential concern, as increasing the number of processes in play can cause more
+per-process memory overhead.) You shouldn't just roll out origin-keying and hope for the best.
+
+### How is this related to cross-origin isolation? {: #cross-origin-isolation }
+
+Origin-keying of agent clusters via the `Origin-Agent-Cluster` header is related to, but separate
+from, [cross-origin isolation](/coop-coep/) via the `Cross-Origin-Opener-Policy` and
+`Cross-Origin-Embedder-Policy` headers.
+
+Any site which makes itself cross-origin isolated will also disable the same [same-site cross-origin
+communications features](#limitations) as when using the `Origin-Agent-Cluster` header. However, the
+`Origin-Agent-Cluster` header can still be useful on top of cross-origin isolation, as an additional
+hint to the browser to modify its resource allocation heuristics. So you should still consider
+applying the `Origin-Agent-Cluster` header, and measuring the results, even on pages that are
+already cross-origin isolated.
+
+## How to use the `Origin-Agent-Cluster` header {: #how-to-use }
+
+To use the `Origin-Agent-Cluster` header, configure your web server to send the following HTTP
+response header:
+
+```http
+Origin-Agent-Cluster: ?1
+```
+
+The value of `?1` is the [structured
+header](https://www.fastly.com/blog/improve-http-structured-headers) syntax for a boolean `true`
+value.
+
+It's important to send this header on _all_ responses from your origin, not just some pages.
+Otherwise, you can get inconsistent results, where the browser "remembers" seeing an origin-keying
+request and so it origin-keys even on pages that don't ask for it. Or the reverse: if the first page
+a user visits doesn't have the header, then the browser will remember that your origin does not want
+to be origin-keyed, and will ignore the header on subsequent pages.
+
+{% Aside 'caution' %}
+Don't forget to send the header on error pages, like your 404 page!
+{% endAside %}
+
+{% Details %}
+{% DetailsSummary %}
+Why can't the browser always respect the header?
+{% endDetailsSummary %}
+
+The reason for this "memory" is to ensure consistency of keying for an origin. If some pages on an
+origin were origin-keyed, while others weren't, then you could have two same-origin pages which were
+put into different agent clusters, and thus weren't allowed to talk to each other. This would be
+very strange, both for web developers and for the internals of the browser. So, the specification
+for `Origin-Agent-Cluster` instead ignores the header if it's inconsistent with what it's previously
+seen for a given origin. In Chrome, this will result in a console warning.
+
+This consistency is scoped to a browsing context group, which is a group of tabs, windows, or
+iframes which can all reach each other via mechanisms like `window.opener`, `frames[0]`, or
+`window.parent`. This means that, once an origin's origin- or site-keying has been settled (by the
+browser either seeing, or not seeing, the header), changing it requires opening up an entirely new
+tab, not connected to the old one in any way.
+
+These details can be important for testing the `Origin-Agent-Cluster` header. When first adding it
+to your site, just reloading the page will not work; you'll need to close the tab and open a new
+one.
+{% endDetails %}
+
+To check whether the `Origin-Agent-Cluster` header is applied, use the JavaScript
+`window.originAgentCluster` property. This will be `true` in cases where the header (or other
+mechanisms, like [cross-origin isolation](#cross-origin-isolation)) caused origin-keying; `false`
+when it did not; and `undefined` in browsers that don't implement the `Origin-Agent-Cluster` header.
+Logging this data to your analytics platform can provide a valuable check that you've configured
+your server correctly.
+
+Finally, note that the `Origin-Agent-Cluster` header will only work on [secure
+contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts), i.e. on HTTPS
+pages or on `http://localhost`. Non-localhost HTTP pages do _not_ support origin-keyed agent
+clusters.
+
+## Origin-keying is not a security feature
+
+While using an origin-keyed agent cluster does isolate your origin from synchronous access from
+same-site cross-origin pages, it does not give the [protection](/why-coop-coep/) of
+security-related headers like
+[`Cross-Origin-Resource-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+and
+[`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy).
+In particular, it is not a reliable protection against side channel attacks like
+[Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)).
+
+This might be a bit surprising, because origin-keying can sometimes cause your origin to get its own
+process, and separate processes are an important defence against side-channel attacks. But remember
+that the `Origin-Agent-Cluster` header is only a hint in that regard. The browser is under no
+obligation to give your origin a separate process, and it might not do so for a variety of reasons:
+
+- A browser might not implement the technology to do so. For example, currently Safari and Firefox
+  can put separate tabs into their own processes, but cannot yet do so for iframes.
+
+- The browser might decide it's not worth the overhead of a separate process. For example, on
+  low-memory Android devices, or in Android WebView, Chrome uses as few processes as possible.
+
+- The browser might want to respect the request that the `Origin-Agent-Cluster` header indicates,
+  but it could do so using different isolation technology than processes. For example, Chrome is
+  [exploring](https://docs.google.com/document/d/12wEWJsZmxVnNwVGuxuEJF4922OWUr4fCs1xKHi9mTiI/edit?usp=sharing)
+  using threads instead of processes for this sort of performance isolation.
+
+- The user, or code running on a different site, might have already navigated to a site-keyed page
+  on your origin, causing the [consistency guarantee](#how-to-use) to kick in and the
+  `Origin-Agent-Cluster` header to be ignored entirely.
+
+For these reasons, it's important not to think of origin-keyed agent clusters as a security feature.
+Instead, it's a way of helping the browser prioritize resource allocation, by hinting that your
+origin would benefit from dedicated resources (and that you're willing to give up [certain
+features](#limitations) in exchange).
+
+## Feedback
+
+The Chrome team would love to hear from you if you're using, or considering using, the `Origin-Agent-Cluster`
+header. Your public interest and support helps us prioritize features and show other
+browser vendors how important they are. Tweet at [@ChromiumDev](https://twitter.com/chromiumdev) and
+let Chrome DevRel know your thoughts and experiences.
+
+If you have more questions about the specification, or the details of how the feature works, you can
+file an issue on the [HTML Standard GitHub repository](https://github.com/whatwg/html). And if you
+encounter any issues with Chrome's implementation, you can file a bug at
+[new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Internals%3ESandbox%3ESiteIsolation)
+with the Components field set to `Internals>Sandbox>SiteIsolation`.
+
+## Learn more
+
+To learn more about origin-keyed agent clusters, you can dive into the details at these links:
+
+- [Demo](https://origin-isolation-test.com/) and [demo
+  source](https://github.com/domenic/origin-isolation-test.com)
+- [Explainer](https://github.com/WICG/origin-agent-cluster)
+- [Specification](https://html.spec.whatwg.org/multipage/origin.html#origin-keyed-agent-clusters)
+- Tracking bugs: [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1042415),
+  [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1665474),
+  [Safari](https://bugs.webkit.org/show_bug.cgi?id=216618)
diff --git a/src/site/content/en/blog/origin-private-file-system/index.md b/src/site/content/en/blog/origin-private-file-system/index.md
new file mode 100644
index 00000000000..c988c13684f
--- /dev/null
+++ b/src/site/content/en/blog/origin-private-file-system/index.md
@@ -0,0 +1,406 @@
+---
+title: 'The origin private file system'
+subhead: >
+  The File System Standard introduces an origin private file system (OPFS) as a storage endpoint private to the origin of the page and not visible to the user that provides optional access to a special kind of file that is highly optimized for performance.
+date: 2023-06-08
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/g0thFlkimyIelTPoF4wD.jpg
+alt: A bunch of files in different colors.
+authors:
+  - thomassteiner
+tags:
+  - capabilities
+  - blog
+---
+
+{% Aside 'celebration' %}
+The origin private file system allows web apps to store and manipulate files in their very own origin-specific virtual filesystem, including low-level file manipulation, byte-by-byte access, and file streaming. The origin private file system is supported across all major browsers.
+{% endAside %}
+
+## Browser support
+
+The origin private file system is supported by modern browsers and is standardized by the Web Hypertext Application Technology Working Group ([WHATWG](https://whatwg.org/)) in the [File System Living Standard](https://fs.spec.whatwg.org/).
+
+{% BrowserCompat 'api.StorageManager.getDirectory' %}
+
+## Motivation
+
+When you think of files on your computer, you probably think about a file hierarchy: files organized in folders that you can explore with your operating system's file explorer. For example, on Windows, for a user called Tom, their To Do list might live in `C:\Users\Tom\Documents\ToDo.txt`. In this example, `ToDo.txt` is the file name, and `Users`, `Tom`, and `Documents` are folder names. `C:\` on Windows  represents the root directory of the drive.
+
+{% Aside %}
+In this article, I use the terms _folder_ and _directory_ interchangeably, disregarding the difference between the file system concept (directory) and the graphical user interface [metaphor](https://en.wikipedia.org/wiki/Directory_%28computing%29#Folder_metaphor) (folder).
+{% endAside %}
+
+### Traditional way of working with files on the web
+
+To edit the To Do list in a web application, this is the traditional flow:
+
+1. The user _uploads_ the file to a server or _opens_ it on the client with [`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file).
+1. The user makes their changes, and then _downloads_ the resulting file with an injected [`<a download="ToDo.txt>`](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/download) that you programmatically [`click()`](https://developer.mozilla.org/docs/Web/API/HTMLElement/click) via JavaScript.
+1. For opening folders, you use a special attribute in [`<input type="file" webkitdirectory>`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory), which, despite its proprietary name, has practically universal browser support.
+
+### Modern way of working with files on the web
+
+This flow is not representative of how users think of editing files, and means users end up with downloaded _copies_ of their input files. Therefore,  the File System Access API introduced three picker methods—[`showOpenFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showOpenFilePicker), [`showSaveFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showSaveFilePicker), and [`showDirectoryPicker()`](https://developer.mozilla.org/docs/Web/API/Window/showDirectoryPicker)—that do exactly what their name suggests. They enable a flow as follows:
+
+1. Open `ToDo.txt` with `showOpenFilePicker()`, and get a [`FileSystemFileHandle`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle) object.
+1. From the `FileSystemFileHandle` object, get a [`File`](https://developer.mozilla.org/docs/Web/API/File) by calling the file handle's [`getFile()`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/getFile) method.
+1. Modify the file, then call [`requestPermission({mode: 'readwrite'})`](https://developer.mozilla.org/docs/Web/API/FileSystemHandle/requestPermission) on the handle.
+1. If the user accepts the permission request, save the changes back to the original file.
+1. Alternatively, call `showSaveFilePicker()` and let the user pick a new file. (If the user picks a previously opened file, its contents will be overwritten.) For repeat saves, you can keep the file handle around, so you don't have to show the file save dialog again.
+
+### Restrictions of working with files on the web
+
+Files and folders that are accessible via these methods live in what can be called the _user-visible_ file system. Files saved from the web, and executable files specifically, are marked with the [mark of the web](https://textslashplain.com/2016/04/04/downloads-and-the-mark-of-the-web/), so there's an additional warning the operating system can show before a potentially dangerous file gets executed. As an additional security feature, files obtained from the web are also protected by [Safe Browsing](https://safebrowsing.google.com/), which, for the sake of simplicity and in the context of this article, you can think of as a cloud-based virus scan. When you write data to a file using the File System Access API, writes are  not in-place, but use a temporary file. The file itself is not modified unless it passes all these security checks. As you can imagine, this work makes file operations relatively slow, despite improvements applied where possible, for example, [on macOS](https://bugs.chromium.org/p/chromium/issues/detail?id=1413443). Still every [`write()`](https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream/write) call is self-contained, so under the hood it opens the file, seeks to the given offset, and finally writes data.
+
+### Files as the foundation of processing
+
+At the same time, files are an excellent way to record data. For example, [SQLite](https://www.sqlite.org/) stores entire databases in a single file. Another example are [mipmaps](https://en.wikipedia.org/wiki/Mipmap) used in image processing. Mipmaps are pre-calculated, optimized sequences of images, each of which is a progressively lower resolution representation of the previous, which makes many operations like zooming faster. So how can web applications get the benefits of files, but without the performance costs of traditional web-based file processing? The answer is the _origin private file system_.
+
+## The user-visible versus the origin private file system
+
+Unlike the user-visible file system browsed via the operating system's file explorer, with files and folders you can read, write, move, and rename, the origin private file system is not meant to be seen by users. Files and folders in the origin private file system, as the name suggests, are private, and more concretely, private to the [origin](https://developer.mozilla.org/docs/Glossary/Origin) of a site. Discover the origin of a page by typing [`location.origin`](https://developer.mozilla.org/docs/Web/API/Location/origin) in the DevTools Console. For example, the origin of the page `https://developer.chrome.com/articles/` is `https://developer.chrome.com` (that is, the part `/articles` is _not_ part of the origin). You can read more about the theory of origins in [Understanding "same-site" and "same-origin"](/same-site-same-origin/#origin). All pages that share the same origin can see the same origin private file system data, so `https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/` can see the same details as the previous example. Each origin has its own independent origin private file system, which means the origin private file system of `https://developer.chrome.com` is completely distinct from the one of, say, [`https://web.dev`](/). On Windows, the root directory of the user-visible file system is `C:\`. The equivalent for the origin private file system is an initially empty root directory per origin accessed by calling the asynchronous method [`navigator.storage.getDirectory()`](https://developer.mozilla.org/docs/Web/API/StorageManager/getDirectory). For a comparison of the user-visible file system and the origin private file system, see the following diagram. The diagram shows that apart from the root directory, everything else is conceptually the same, with a hierarchy of files and folders to organize and arrange as needed for your data and storage needs.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png", alt="Diagram of the user-visible file system and the origin private file system with two exemplary file hierarchies. The entry point for the user-visible file system is a symbolic harddisk, the entry point for the origin private file system is calling of the method 'navigator.storage.getDirectory'.", width="800", height="722" %}
+
+## Specifics of the origin private file system
+
+Just like other storage mechanisms in the browser (for example, [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) or [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Using_IndexedDB)), the origin private file system is subject to browser quota restrictions. When a user [clears all browsing data](https://support.google.com/chrome/answer/2392709) or [all site data](https://developer.chrome.com/docs/devtools/storage/cache/#deletecache), the origin private file system will be deleted, too. Call [`navigator.storage.estimate()`](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) and in the resulting response object see the [`usage`](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate#usage) entry to see how much storage your app already consumes, which is broken down by storage mechanism in the [`usageDetails`](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate#usagedetails) object, where you want to look at the `fileSystem` entry specifically. Since the origin private file system is not visible to the user, there are no permissions prompts and no Safe Browsing checks.
+
+## Getting access to the root directory
+
+To get access to the root directory, run the command below. You end up with an empty directory handle, more specifically, a [`FileSystemDirectoryHandle`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle).
+
+```js
+const opfsRoot = await navigator.storage.getDirectory();
+// A FileSystemDirectoryHandle whose type is "directory"
+// and whose name is "".
+console.log(opfsRoot);
+```
+
+## Main thread or Web Worker
+
+There are two ways of using the origin private file system: on the [main thread](https://developer.mozilla.org/docs/Glossary/Main_thread) or in a [Web Worker](https://developer.mozilla.org/docs/Web/API/Worker). Web Workers cannot block the main thread, which means in this context APIs can be synchronous, a pattern generally disallowed on the main thread. Synchronous APIs can be faster as they avoid having to deal with promises, and file operations are typically synchronous in languages like C that can be compiled to WebAssembly.
+
+```c
+// This is synchronous C code.
+FILE *f;
+f = fopen("example.txt", "w+");
+fputs("Some text\n", f);
+fclose(f);
+```
+
+If you need the fastest possible file operations and/or you deal with [WebAssembly](https://developer.mozilla.org/es/docs/WebAssembly), skip down to [Using the origin private file system in a Web Worker](https://example.com). Else, you can read on.
+
+## Using the origin private file system on the main thread
+
+### Creating new files and folders
+
+Once you have a root folder, create files and folders using the [`getFileHandle()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getFileHandle) and the [`getDirectoryHandle()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getDirectoryHandle) methods respectively. By passing [`{create: true}`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getFileHandle#create), the file or folder will be created if it doesn't exist. Build up a hierarchy of files by calling these functions using a newly created directory as the starting point.
+
+```js
+const fileHandle = await opfsRoot
+    .getFileHandle('my first file', {create: true});
+const directoryHandle = await opfsRoot
+    .getDirectoryHandle('my first folder', {create: true});
+const nestedFileHandle = await directoryHandle
+    .getFileHandle('my first nested file', {create: true});
+const nestedDirectoryHandle = await directoryHandle
+    .getDirectoryHandle('my first nested folder', {create: true});
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png", alt="The resulting file hierarchy from the earlier code sample.", width="438", height="196" %}
+
+### Accessing existing files and folders
+
+If you know their name, access previously created files and folders by calling the `getFileHandle()` or the `getDirectoryHandle()` methods, passing in the name of the file or folder.
+
+```js
+const existingFileHandle = await opfsRoot.getFileHandle('my first file');
+const existingDirectoryHandle = await opfsRoot
+    .getDirectoryHandle('my first folder);
+```
+
+### Getting the file associated with a file handle for reading
+
+A `FileSystemFileHandle` represents a file on the file system. To obtain the associated `File`, use the [`getFile()`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/getFile) method. A `File` object is a specific kind of [`Blob`](https://developer.mozilla.org/es/docs/Web/API/Blob), and can be used in any context that a `Blob` can. In particular, [`FileReader`](https://developer.mozilla.org/es/docs/Web/API/FileReader), [`URL.createObjectURL()`](https://developer.mozilla.org/es/docs/Web/API/URL/createObjectURL), [`createImageBitmap()`](https://developer.mozilla.org/es/docs/Web/API/createImageBitmap), and [`XMLHttpRequest.send()`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/send) accept both `Blobs` and `Files`. If you will, obtaining a `File` from a `FileSystemFileHandle` "frees" the data, so you can access it and make it available to the user-visible file system.
+
+```js
+const file = await fileHandle.getFile();
+console.log(await file.text());
+```
+
+### Writing to a file by streaming
+
+Stream data into a file by calling [`createWritable()`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/createWritable) which creates a [`FileSystemWritableFileStream`](https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream) to that you then [`write()`](https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream/write) the contents. At the end, you need to [`close()`](https://developer.mozilla.org/docs/Web/API/WritableStream/close) the stream.
+
+```js
+const contents = 'Some text';
+// Get a writable stream.
+const writable = await fileHandle.createWritable();
+// Write the contents of the file to the stream.
+await writable.write(contents);
+// Close the stream, which persists the contents.
+await writable.close();
+```
+
+### Deleting files and folders
+
+Delete files and folders by calling their file or directory handle's particular [`remove()`](https://developer.mozilla.org/docs/Web/API/FileSystemHandle/remove) method. To delete a folder including all subfolders, pass the [`{recursive: true}`](https://developer.mozilla.org/docs/Web/API/FileSystemHandle/remove#recursive) option.
+
+```js
+await fileHandle.remove();
+await directoryHandle.remove({recursive: true});
+```
+
+{% Aside %}
+The `remove()` method is currently only implemented in Chrome. You can feature-detect support via `'remove' in FileSystemFileHandle.prototype`.
+{% endAside %}
+
+As an alternative, if you know the name of the to-be-deleted file or folder in a directory, use the [`removeEntry()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/removeEntry) method.
+
+```js
+directoryHandle.removeEntry('my first nested file');
+```
+
+{% Aside %}
+As a quick tip, `await (await navigator.storage.getDirectory()).remove({recursive: true})` is the fastest way to clear the entire origin private file system.
+{% endAside %}
+
+### Moving and renaming files and folders
+
+Rename and move files and folders using the [`move()`](https://github.com/whatwg/fs/pull/10) method. Moving and renaming can happen together or in isolation.
+
+```js
+// Rename a file.
+await fileHandle.move('my first renamed file');
+// Move a file to another directory.
+await fileHandle.move(nestedDirectoryHandle);
+// Move a file to another directory and rename it.
+await fileHandle
+    .move(nestedDirectoryHandle, 'my first renamed and now nested file');
+```
+
+{% Aside %}
+Renaming and moving folders is not implemented yet in Chrome. You also can't move files from the origin private file system to the user-visible file system. You can [copy](#copying-a-file-from-the-origin-private-file-system-to-the-user-visible-file-system) them, though.
+{% endAside %}
+
+### Resolving the path of a file or folder
+
+To learn where a given file or folder is located  in relation to a reference directory, use the [`resolve()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/resolve) method, passing it a `FileSystemHandle` as the argument. To obtain the full path of a file or folder in the origin private file system, use the root directory as the reference directory obtained via `navigator.storage.getDirectory()`.
+
+```js
+const relativePath = await opfsRoot.resolve(nestedDirectoryHandle);
+// `relativePath` is `['my first folder', 'my first nested folder']`.
+```
+
+### Checking if two file or folder handles point to the same file or folder
+
+Sometimes you have two handles and don't know if they point at the same file or folder. To check whether this is the case, use the [`isSameEntry()`](https://developer.mozilla.org/docs/Web/API/FileSystemHandle/isSameEntry) method.
+
+```js
+fileHandle.isSameEntry(nestedFileHandle);
+// Returns `false`.
+```
+
+## Listing the contents of a folder
+
+`FileSystemDirectoryHandle` is an [asynchronous iterator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols) that you iterate over with a [`for await…of`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for-await...of) loop. As an asynchronous iterator, it also supports the [`entries()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/entries), the [`values()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/values), and the [`keys()`](https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/keys) methods, from which you can choose depending on what information you need:
+
+```js
+for await (let [name, handle] of directoryHandle) {}
+for await (let [name, handle] of directoryHandle.entries()) {}
+for await (let handle of directoryHandle.values()) {}
+for await (let name of directoryHandle.keys()) {}
+```
+
+## Recursively listing the contents of a folder and all subfolders
+
+Dealing with asynchronous loops and functions paired with recursion is easy to get wrong. The function below can serve as a starting point for listing the contents of a folder and all its subfolders, including all files and their sizes. You can simplify the function if you don't need the file sizes by, where it says `directoryEntryPromises.push`, not pushing the `handle.getFile()` promise, but the `handle` directly.
+
+```js
+  const getDirectoryEntriesRecursive = async (
+    directoryHandle,
+    relativePath = '.',
+  ) => {
+    const fileHandles = [];
+    const directoryHandles = [];
+    const entries = {};
+    // Get an iterator of the files and folders in the directory.
+    const directoryIterator = directoryHandle.values();
+    const directoryEntryPromises = [];
+    for await (const handle of directoryIterator) {
+      const nestedPath = `${relativePath}/${handle.name}`;
+      if (handle.kind === 'file') {
+        fileHandles.push({ handle, nestedPath });
+        directoryEntryPromises.push(
+          handle.getFile().then((file) => {
+            return {
+              name: handle.name,
+              kind: handle.kind,
+              size: file.size,
+              type: file.type,
+              lastModified: file.lastModified,
+              relativePath: nestedPath,
+              handle
+            };
+          }),
+        );
+      } else if (handle.kind === 'directory') {
+        directoryHandles.push({ handle, nestedPath });
+        directoryEntryPromises.push(
+          (async () => {
+            return {
+              name: handle.name,
+              kind: handle.kind,
+              relativePath: nestedPath,
+              entries:
+                  await getDirectoryEntriesRecursive(handle, nestedPath),
+              handle,
+            };
+          })(),
+        );
+      }
+    }
+    const directoryEntries = await Promise.all(directoryEntryPromises);
+    directoryEntries.forEach((directoryEntry) => {
+      entries[directoryEntry.name] = directoryEntry;
+    });
+    return entries;
+  };
+```
+
+## Using the origin private file system in a Web Worker
+
+As outlined before, Web Workers can't block the main thread, which is why in this context synchronous methods are allowed.
+
+### Getting a synchronous access handle
+
+The entry point to the fastest possible file operations is a [`FileSystemSyncAccessHandle`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle), obtained from a regular [`FileSystemFileHandle`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle) by calling [`createSyncAccessHandle()`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/createSyncAccessHandle).
+
+```js
+const fileHandle = await opfsRoot
+    .getFileHandle('my highspeed file.txt', {create: true});
+const syncAccessHandle = await fileHandle.createSyncAccessHandle();
+```
+
+{% Aside %}
+It might seem confusing, but you actually get a _synchronous_ `FileSystemSyncAccessHandle` from a regular `FileSystemFileHandle`. Also note that the `createSyncAccessHandle()` method is _asynchronous_, despite the `Sync` in its name.
+{% endAside %}
+
+### Synchronous in-place file methods
+
+Once you have a synchronous access handle, you get access to fast in-place file methods that are all synchronous.
+
+- [`getSize()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/getSize): Returns the size of the file in bytes.
+- [`write()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/write): Writes the content of a buffer into the, optionally at a given offset, and returns the number of written bytes. Checking the returned number of written bytes allows callers to detect and handle errors and partial writes.
+- [`read()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/read): Reads the contents of the file into a buffer, optionally at a given offset.
+- [`truncate()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/truncate): Resizes the file to the given size.
+- [`flush()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/flush): Ensures that the contents of the file contain all the modifications done through `write()`.
+- [`close()`](https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/close): Closes the access handle.
+
+Here is an example that uses all the methods mentioned above.
+
+```js
+const opfsRoot = await navigator.storage.getDirectory();
+const fileHandle = await opfsRoot.getFileHandle('fast', {create: true});
+const accessHandle = await fileHandle.createSyncAccessHandle();
+
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder();
+
+// Initialize this variable for the size of the file.
+let size;
+// The current size of the file, initially `0`.
+size = accessHandle.getSize();
+// Encode content to write to the file.
+const content = textEncoder.encode('Some text');
+// Write the content at the beginning of the file.
+accessHandle.write(content, {at: size});
+// Flush the changes.
+accessHandle.flush();
+// The current size of the file, now `9` (the length of "Some text").
+size = accessHandle.getSize();
+
+// Encode more content to write to the file.
+const moreContent = textEncoder.encode('More content');
+// Write the content at the end of the file.
+accessHandle.write(moreContent, {at: size});
+// Flush the changes.
+accessHandle.flush();
+// The current size of the file, now `21` (the length of
+// "Some textMore content").
+size = accessHandle.getSize();
+
+// Prepare a data view of the length of the file.
+const dataView = new DataView(new ArrayBuffer(size));
+
+// Read the entire file into the data view.
+accessHandle.read(dataView);
+// Logs `"Some textMore content"`.
+console.log(textDecoder.decode(dataView));
+
+// Read starting at offset 9 into the data view.
+accessHandle.read(dataView, {at: 9});
+// Logs `"More content"`.
+console.log(textDecoder.decode(dataView));
+
+// Truncate the file after 4 bytes.
+accessHandle.truncate(4);
+```
+
+{% Aside %}
+Note that the first parameter for `read()` and `write()` is an [`ArrayBuffer`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or an `ArrayBufferView` like a [`DataView`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView). You cannot directly manipulate the contents of an `ArrayBuffer`. Instead, you create one of the [typed array objects](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) like an [`Int8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) or a `DataView` object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
+{% endAside %}
+
+## Copying a file from the origin private file system to the user-visible file system
+
+As mentioned above, moving files from the origin private file system to the user-visible file system isn't possible, but you can copy files. Since `showSaveFilePicker()` is only exposed on the main thread, but not in the Worker thread, be sure to run the code there.
+
+```js
+// On the main thread, not in the Worker. This assumes
+// `fileHandle` is the `FileSystemFileHandle` you obtained
+// the `FileSystemSyncAccessHandle` from in the Worker
+// thread. Be sure to close the file in the Worker thread first.
+const fileHandle = await opfsRoot.getFileHandle('fast');
+try {
+  // Obtain a file handle to a new file in the user-visible file system
+  // with the same name as the file in the origin private file system.
+  const saveHandle = await showSaveFilePicker({
+    suggestedName: fileHandle.name || ''
+  });
+  const writable = await saveHandle.createWritable();
+  await writable.write(await fileHandle.getFile());
+  await writable.close();
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+## Debugging the origin private file system
+
+Until built-in DevTools support is added (see [crbug/1284595](https://crbug.com/1284595)), use the [OPFS Explorer](https://chrome.google.com/webstore/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd) Chrome extension to debug the origin private file system. The screenshot above from the section [Creating new files and folders](#creating-new-files-and-folders) is taken straight from the extension by the way.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png", alt="The OPFS Explorer Chrome DevTools extension in the Chrome Web Store.", width="800", height="612" %}
+
+After installing the extension, open the Chrome DevTools, select the **OPFS Explorer** tab, and you're then ready to inspect the file hierarchy. Save files from the origin private file system to the user-visible file system by clicking the file name and delete files and folders by clicking the trash can icon.
+
+## Demo
+
+See the origin private file system in action (if you install the OPFS Explorer extension) in a [demo](https://sqlite-wasm-opfs.glitch.me/) that uses it as a backend for a SQLite database compiled to WebAssembly. Be sure to check out the [source code on Glitch](https://glitch.com/edit/#!/sqlite-wasm-opfs). Note how the embedded version below does not use the origin private file system backend (because the iframe is cross-origin), but when you open the demo in a separate tab, it does.
+
+{% Glitch { id: 'sqlite-wasm-opfs' } %}
+
+## Conclusions
+
+The origin private file system, as specified by the WHATWG, has shaped the way we use and interact with files on the web. It has enabled new use cases that were impossible to achieve with the user-visible file system. All major browser vendors—Apple, Mozilla, and Google—are on-board and share a joint vision. The development of the origin private file system is very much a collaborative effort, and feedback from developers and users is essential to its progress. As we continue to refine and improve the standard, feedback on the [whatwg/fs repository](https://github.com/whatwg/fs) in the form of Issues or Pull Requests is welcome.
+
+## Related links
+
+- [File System Standard spec](https://fs.spec.whatwg.org/)
+- [File System Standard repo](https://github.com/whatwg/fs)
+- [The File System API with Origin Private File System WebKit post](https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/)
+- [OPFS Explorer extension](https://chrome.google.com/webstore/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd)
+
+## Acknowledgements
+
+This article was reviewed by [Austin Sully](https://github.com/a-sully), [Etienne Noël](https://ca.linkedin.com/in/enoel19), and [Rachel Andrew](https://rachelandrew.co.uk/). Hero image by [Christina Rumpf](https://unsplash.com/@rumpf) on [Unsplash](https://unsplash.com/photos/XWDMmk-yW7Q).
diff --git a/src/site/content/en/blog/origin-private-file-system/opfs.excalidraw b/src/site/content/en/blog/origin-private-file-system/opfs.excalidraw
new file mode 100644
index 00000000000..5eed5a9e19e
--- /dev/null
+++ b/src/site/content/en/blog/origin-private-file-system/opfs.excalidraw
@@ -0,0 +1,3222 @@
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "https://excalidraw.com",
+  "elements": [
+    {
+      "type": "rectangle",
+      "version": 693,
+      "versionNonce": 308134106,
+      "isDeleted": false,
+      "id": "5TBJjuM3-bTvA_yGCuEKn",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 380.6231553331019,
+      "y": 310.5018632089021,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 100,
+      "height": 60,
+      "seed": 1034671322,
+      "groupIds": [
+        "a-Tr11cmE7m1Lf7vlEHny",
+        "wVpzvJWuMr_GivC7zyt2z"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 701,
+      "versionNonce": 469684678,
+      "isDeleted": false,
+      "id": "r-DAmZUFQlRgdQgsDhfK-",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 440.6231553331018,
+      "y": 310.5018632089021,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 60,
+      "height": 20,
+      "seed": 592182726,
+      "groupIds": [
+        "a-Tr11cmE7m1Lf7vlEHny",
+        "wVpzvJWuMr_GivC7zyt2z"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -20,
+          -20
+        ],
+        [
+          -60,
+          -19.999999999999996
+        ],
+        [
+          -60,
+          -3.552713678800501e-15
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "id": "SbyUcY0_itBDDZSbkdsez",
+      "type": "text",
+      "x": 389.21965436370124,
+      "y": 320.15947486546355,
+      "width": 82.54396057128906,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wVpzvJWuMr_GivC7zyt2z"
+      ],
+      "roundness": null,
+      "seed": 2063060058,
+      "version": 114,
+      "versionNonce": 1164219802,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "text": "Documents",
+      "fontSize": 16,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Documents"
+    },
+    {
+      "type": "rectangle",
+      "version": 993,
+      "versionNonce": 1219669722,
+      "isDeleted": false,
+      "id": "e6GpgCsgK2ozxqquLPykV",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 384.79947125474087,
+      "y": 436.2147287644604,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 100,
+      "height": 60,
+      "seed": 1315488582,
+      "groupIds": [
+        "tQYhNTcSTlb-iAHIEpHwS",
+        "XhxWUgZSdLBRta0ekM5Sl"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262064257,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1001,
+      "versionNonce": 1412940742,
+      "isDeleted": false,
+      "id": "M4oeqrDYZnR1B1UwPJ27i",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 444.79947125474104,
+      "y": 436.2147287644604,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 60,
+      "height": 20,
+      "seed": 1005354010,
+      "groupIds": [
+        "tQYhNTcSTlb-iAHIEpHwS",
+        "XhxWUgZSdLBRta0ekM5Sl"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262064257,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -20,
+          -20
+        ],
+        [
+          -60,
+          -19.999999999999996
+        ],
+        [
+          -60,
+          -3.552713678800501e-15
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 428,
+      "versionNonce": 2129380250,
+      "isDeleted": false,
+      "id": "hvk2haLb8QtlwkI4U6_oW",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 393.2787827853401,
+      "y": 445.872340421022,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 41.56797790527344,
+      "height": 19.2,
+      "seed": 607939206,
+      "groupIds": [
+        "XhxWUgZSdLBRta0ekM5Sl"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262064257,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "Music",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Music"
+    },
+    {
+      "type": "rectangle",
+      "version": 418,
+      "versionNonce": 624190150,
+      "isDeleted": false,
+      "id": "hcTj4ctxB9oO_T7jQw3Gj",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 216.6865752898595,
+      "y": 363.3738569325215,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 112.60275135869561,
+      "height": 164.72173913043477,
+      "seed": 655919642,
+      "groupIds": [
+        "yoqJPN6WZcl73CoOgK_PJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262083279,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 469,
+      "versionNonce": 1087149210,
+      "isDeleted": false,
+      "id": "sHmoM7V083qLTXdMpBHKF",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 221.83412963768563,
+      "y": 374.31240992165164,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 98.44697690217393,
+      "height": 99.73386548913055,
+      "seed": 1545616518,
+      "groupIds": [
+        "yoqJPN6WZcl73CoOgK_PJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262083279,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 421,
+      "versionNonce": 1869093382,
+      "isDeleted": false,
+      "id": "XjCgmxZMUUIgPj7DDLNSg",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 283.77410925724945,
+      "y": 506.89410659284727,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 28.467819213867188,
+      "height": 15.6,
+      "seed": 578041562,
+      "groupIds": [
+        "yoqJPN6WZcl73CoOgK_PJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262083279,
+      "link": null,
+      "locked": false,
+      "fontSize": 13.146995341614875,
+      "fontFamily": 2,
+      "text": "HDD",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "HDD"
+    },
+    {
+      "type": "rectangle",
+      "version": 1145,
+      "versionNonce": 1084365338,
+      "isDeleted": false,
+      "id": "Rggnskte0q50HkUmgXXbY",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 387.20325208059046,
+      "y": 562.9437784479913,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 100,
+      "height": 60,
+      "seed": 1503514182,
+      "groupIds": [
+        "vfWtVLDhvJifogE71z00L",
+        "2dFs6a5qFwcLttmbsOnKr"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1153,
+      "versionNonce": 632794246,
+      "isDeleted": false,
+      "id": "c-_ZYa13Q1dzF-Lcl0TG2",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 447.20325208059086,
+      "y": 562.9437784479913,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 60,
+      "height": 20,
+      "seed": 1923195162,
+      "groupIds": [
+        "vfWtVLDhvJifogE71z00L",
+        "2dFs6a5qFwcLttmbsOnKr"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -20,
+          -20
+        ],
+        [
+          -60,
+          -19.999999999999996
+        ],
+        [
+          -60,
+          -3.552713678800501e-15
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 586,
+      "versionNonce": 1951123162,
+      "isDeleted": false,
+      "id": "LKItTBFYzfZEtwOrqiVit",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 395.6825636111897,
+      "y": 572.6013901045529,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 50.431976318359375,
+      "height": 19.2,
+      "seed": 983045510,
+      "groupIds": [
+        "2dFs6a5qFwcLttmbsOnKr"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "Movies",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Movies"
+    },
+    {
+      "type": "rectangle",
+      "version": 1133,
+      "versionNonce": 475802566,
+      "isDeleted": false,
+      "id": "FJeCa1nl4QI34DlNdeWJl",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 510.3191561587155,
+      "y": 245.80789080643964,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234031,
+      "seed": 97528218,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1288,
+      "versionNonce": 128048026,
+      "isDeleted": false,
+      "id": "R4jT9wGYobR5PfnAb6Czy",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 337.77462044877996,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234033,
+      "seed": 500454662,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -8.881784197001252e-16,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          -76.63894136861694
+        ],
+        [
+          45.98336482117017,
+          -76.63894136861693
+        ],
+        [
+          45.983364821170156,
+          0
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1288,
+      "versionNonce": 548324102,
+      "isDeleted": false,
+      "id": "oCJ_aQkOLsy3cxha22pjb",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 540.9747327061623,
+      "y": 353.1024087225033,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234033,
+      "seed": 403433050,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -8.881784197001252e-16,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          -76.63894136861694
+        ],
+        [
+          45.98336482117017,
+          -76.63894136861693
+        ],
+        [
+          45.983364821170156,
+          0
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1150,
+      "versionNonce": 416766042,
+      "isDeleted": false,
+      "id": "M_oDuyOQ6rXHynHkTWt5Y",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 261.135679080163,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 735036486,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1176,
+      "versionNonce": 86798918,
+      "isDeleted": false,
+      "id": "6QtXnyH-9dG4rCLbLbw_2",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 291.79125562760976,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 221383450,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1160,
+      "versionNonce": 129973530,
+      "isDeleted": false,
+      "id": "4-T7GeCQRa_LTsNhkyFbT",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 276.46346735388636,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 521882502,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1186,
+      "versionNonce": 1152530822,
+      "isDeleted": false,
+      "id": "L0IiASoPpG4BnZfbIAWRL",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 307.1190439013332,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1807063002,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1241,
+      "versionNonce": 1103923674,
+      "isDeleted": false,
+      "id": "k-2OicQwAxEV4ir3WHRxs",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 525.6469444324389,
+      "y": 322.44683217505656,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 15.327788273723383,
+      "height": 0,
+      "seed": 99871430,
+      "groupIds": [
+        "nHZK1SNrXSscWsni7gSK0",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          15.327788273723383,
+          0
+        ]
+      ]
+    },
+    {
+      "id": "Qj5K8FOByopbAAnSSHTHk",
+      "type": "text",
+      "x": 581.1672568333345,
+      "y": 238.39546456734638,
+      "width": 95.63192749023438,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "Jj56F1IVgUJMKXMBHMlJ4",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "seed": 1760787462,
+      "version": 593,
+      "versionNonce": 1987909830,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "text": "Resume.docx",
+      "fontSize": 16,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Resume.docx"
+    },
+    {
+      "id": "S-5Z8HKOB9qoYF1yvvYIA",
+      "type": "text",
+      "x": 598.8430380833345,
+      "y": 256.8134333173464,
+      "width": 205.56784057617188,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "Jj56F1IVgUJMKXMBHMlJ4",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "seed": 2068177242,
+      "version": 687,
+      "versionNonce": 236076698,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "text": "PhD_Thesis_final_v2.tex",
+      "fontSize": 16,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "PhD_Thesis_final_v2.tex"
+    },
+    {
+      "id": "59A4aziZmFpLRk0R2nwub",
+      "type": "text",
+      "x": 612.3781943333345,
+      "y": 275.3446833173464,
+      "width": 74.5279541015625,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "Jj56F1IVgUJMKXMBHMlJ4",
+        "lSoPHEf9cHEDmTSc2YQEj"
+      ],
+      "roundness": null,
+      "seed": 93590854,
+      "version": 780,
+      "versionNonce": 1110052870,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "text": "ToDo.txt",
+      "fontSize": 16,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "ToDo.txt"
+    },
+    {
+      "type": "line",
+      "version": 836,
+      "versionNonce": 1404444486,
+      "isDeleted": false,
+      "id": "nQYuj8ytm4e47yjJnbSvE",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 488.80031471939276,
+      "y": 346.60140644883154,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 28.2439236111112,
+      "height": 0.34939236111108585,
+      "seed": 719308358,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          28.2439236111112,
+          0.34939236111108585
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 972,
+      "versionNonce": 28499994,
+      "isDeleted": false,
+      "id": "shQtwn5P8lN8wanooHlGP",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 489.3784397193927,
+      "y": 346.56538214327594,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 40.46657986111114,
+      "height": 15.596354166666686,
+      "seed": 1000750278,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261738830,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          40.46657986111114,
+          15.596354166666686
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 940,
+      "versionNonce": 1333675654,
+      "isDeleted": false,
+      "id": "aHhrlRbgOVD2FU87rMSxp",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 491.28472877794616,
+      "y": 345.3151930605143,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 11.185763888889028,
+      "height": 34.548611111111086,
+      "seed": 96384730,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261738831,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          11.185763888889028,
+          -34.548611111111086
+        ]
+      ]
+    },
+    {
+      "type": "rectangle",
+      "version": 1279,
+      "versionNonce": 130076378,
+      "isDeleted": false,
+      "id": "f57ctIabsA6e4VxR8PtWq",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 516.0723504440501,
+      "y": 396.2719663358781,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234031,
+      "seed": 1027022106,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1435,
+      "versionNonce": 1822139334,
+      "isDeleted": false,
+      "id": "UIojULQj-oXMaEeImQAfh",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 488.2386959782184,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.31115309489353,
+      "height": 91.96672964234033,
+      "seed": 724064646,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -8.881784197001252e-16,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          -76.63894136861694
+        ],
+        [
+          45.98336482117017,
+          -76.63894136861693
+        ],
+        [
+          45.983364821170156,
+          0
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1296,
+      "versionNonce": 2000020378,
+      "isDeleted": false,
+      "id": "rQe1f_bDAvJNdGvAtQOnt",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 411.5997546096015,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1764702406,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1322,
+      "versionNonce": 708786950,
+      "isDeleted": false,
+      "id": "WeiwiTh3keKlwB-QNGuCu",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 442.2553311570482,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1863458458,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1306,
+      "versionNonce": 145383514,
+      "isDeleted": false,
+      "id": "gNffg3Yx7AIx6EDiAQpw-",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 426.9275428833248,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1503145990,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1332,
+      "versionNonce": 1978526278,
+      "isDeleted": false,
+      "id": "9jLYnePScebnYlvv7UULO",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 457.5831194307717,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1330068314,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1387,
+      "versionNonce": 401687834,
+      "isDeleted": false,
+      "id": "GRoU2fi4HhEkl8PMQBySz",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 531.4001387177735,
+      "y": 472.910907704495,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 15.327788273723383,
+      "height": 0,
+      "seed": 408960838,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          15.327788273723383,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 773,
+      "versionNonce": 243577222,
+      "isDeleted": false,
+      "id": "1pqD66MKCKjby7UULHc-O",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 586.9204511186692,
+      "y": 388.8595400967848,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 221.9198760986328,
+      "height": 19.2,
+      "seed": 1278918682,
+      "groupIds": [
+        "6osscWUz8xTn4eJ_Vzu3x",
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "Never gonna give you up.mp3",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Never gonna give you up.mp3"
+    },
+    {
+      "type": "text",
+      "version": 870,
+      "versionNonce": 243110362,
+      "isDeleted": false,
+      "id": "s_AAOGge8U1duWLDpEjKF",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 604.596232368669,
+      "y": 407.2775088467848,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 100.28791809082031,
+      "height": 19.2,
+      "seed": 971269766,
+      "groupIds": [
+        "6osscWUz8xTn4eJ_Vzu3x",
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "Track09.mp3",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Track09.mp3"
+    },
+    {
+      "type": "line",
+      "version": 1091,
+      "versionNonce": 1329631430,
+      "isDeleted": false,
+      "id": "OjcY1tuXOzWpmtIp1xyCa",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 494.9342513473905,
+      "y": 473.461517577701,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 15.17100694444457,
+      "height": 14.997829861111143,
+      "seed": 1616892890,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261869280,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          15.17100694444457,
+          -14.997829861111143
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1258,
+      "versionNonce": 1684072026,
+      "isDeleted": false,
+      "id": "MkMglLdGFgl7MMcg8nv1P",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 492.84618276705515,
+      "y": 477.42834238382807,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 29.644965277777885,
+      "height": 24.2274305555556,
+      "seed": 890990278,
+      "groupIds": [
+        "TcRye1vU8xA6k7KhUY3Fs"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261883610,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          29.644965277777885,
+          24.2274305555556
+        ]
+      ]
+    },
+    {
+      "type": "rectangle",
+      "version": 1391,
+      "versionNonce": 534318170,
+      "isDeleted": false,
+      "id": "6ucWdHxEUjoJu3q9b4Eeh",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 522.4626351469989,
+      "y": 549.1048080795093,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234031,
+      "seed": 340064006,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677261842524,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1425,
+      "versionNonce": 214188314,
+      "isDeleted": false,
+      "id": "dw8ib0W6KqBugV4fmy4S-",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 494.08150226272113,
+      "y": 590.5776113505724,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 21.066406250000057,
+      "height": 4.233940972222058,
+      "seed": 753600966,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677261775105,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          21.066406250000057,
+          -4.233940972222058
+        ]
+      ]
+    },
+    {
+      "id": "EvHWAeDy1hnjbszfRplRj",
+      "type": "text",
+      "x": 593.7627429444454,
+      "y": 551.696245817346,
+      "width": 274.52783203125,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "roundness": null,
+      "seed": 1613944006,
+      "version": 95,
+      "versionNonce": 1066070214,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677261820482,
+      "link": null,
+      "locked": false,
+      "text": "The Rocky Horror Picture Show.mkv",
+      "fontSize": 16,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "The Rocky Horror Picture Show.mkv"
+    },
+    {
+      "type": "rectangle",
+      "version": 955,
+      "versionNonce": 1578661702,
+      "isDeleted": false,
+      "id": "WhTcSDzH0pWzW2PUevcgs",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 116.92358963461396,
+      "y": 804.467965484071,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 127.88383573213892,
+      "height": 76.53703389977764,
+      "seed": 1509447622,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 741,
+      "versionNonce": 121767962,
+      "isDeleted": false,
+      "id": "7Bdf2kAZI3R47o6W-ibFy",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 115.84799188371875,
+      "y": 815.1844998763152,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 128.84193229844433,
+      "height": 0,
+      "seed": 573468570,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          128.84193229844433,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "ellipse",
+      "version": 561,
+      "versionNonce": 198549126,
+      "isDeleted": false,
+      "id": "rZsgayJEr2SRILhCJe9xl",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": 121.41162510356884,
+      "y": 808.7395352840798,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fa5252",
+      "width": 5.001953125,
+      "height": 5.001953125,
+      "seed": 837119750,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 606,
+      "versionNonce": 2092823770,
+      "isDeleted": false,
+      "id": "0lrslzk6hsPVW4rpIw7JH",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": 131.67432041606884,
+      "y": 808.7395352840798,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fab005",
+      "width": 5.001953125,
+      "height": 5.001953125,
+      "seed": 1555131482,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 664,
+      "versionNonce": 770432454,
+      "isDeleted": false,
+      "id": "NKl9S4gknqeeF5sO6yGmI",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": 142.38773688241508,
+      "y": 809.190256437926,
+      "strokeColor": "#000000",
+      "backgroundColor": "#40c057",
+      "width": 5.001953125,
+      "height": 5.001953125,
+      "seed": 313368134,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 943,
+      "versionNonce": 1570654618,
+      "isDeleted": false,
+      "id": "RKwHLTsRWVfh0utVrf57R",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 90,
+      "angle": 0,
+      "x": 158.4147978720423,
+      "y": 825.2426253159418,
+      "strokeColor": "#000000",
+      "backgroundColor": "#04aaf7",
+      "width": 42.72020253937572,
+      "height": 42.72020253937572,
+      "seed": 1865863450,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1560,
+      "versionNonce": 158872838,
+      "isDeleted": false,
+      "id": "f5q7vZlWfpMal77NkdmB1",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": 185.4929619340179,
+      "y": 841.4669773803995,
+      "strokeColor": "#087f5b",
+      "backgroundColor": "#40c057",
+      "width": 28.226201983883442,
+      "height": 24.44112284281997,
+      "seed": 1630397830,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -1.8305638688608794,
+          -0.4146385831511896
+        ],
+        [
+          -7.572250391862635,
+          -6.271625431345418
+        ],
+        [
+          -11.35769254157424,
+          -4.347633009945142
+        ],
+        [
+          -12.611765400987878,
+          2.3733287939365098
+        ],
+        [
+          -11.26889653301009,
+          6.740045588043412
+        ],
+        [
+          -17.42450906516472,
+          8.886103861507927
+        ],
+        [
+          -17.203202089974113,
+          13.643170786196503
+        ],
+        [
+          -12.380895778721076,
+          13.349974465892952
+        ],
+        [
+          -8.695178377089249,
+          9.477701170522828
+        ],
+        [
+          -3.6201449645383086,
+          17.867626643824725
+        ],
+        [
+          -0.415292101592283,
+          18.169497411474552
+        ],
+        [
+          -3.7772455950748833,
+          4.800439161419844
+        ],
+        [
+          1.3865838260401944,
+          4.3476330099451115
+        ],
+        [
+          3.162503997323137,
+          5.86739618500973
+        ],
+        [
+          9.236150983110862,
+          5.86739618500973
+        ],
+        [
+          10.80169291871872,
+          0.6349695457461695
+        ],
+        [
+          4.221225637895673,
+          1.1103292603211785
+        ],
+        [
+          5.486227236824892,
+          -5.759833037916143
+        ],
+        [
+          2.472627315401658,
+          -5.345194454764953
+        ],
+        [
+          -0.23770008446403423,
+          -0.9229611976419838
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 980,
+      "versionNonce": 286656090,
+      "isDeleted": false,
+      "id": "n3gaFxRtv8aPqKPtnxUw5",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 90,
+      "angle": 0,
+      "x": 159.47386034606984,
+      "y": 846.2054988791228,
+      "strokeColor": "#000000",
+      "backgroundColor": "#99bcff",
+      "width": 42.095115772272244,
+      "height": 0,
+      "seed": 2100403674,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          42.095115772272244,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 3187,
+      "versionNonce": 938976326,
+      "isDeleted": false,
+      "id": "w0hR67pcbLVa7BHfigGLV",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 90,
+      "angle": 0,
+      "x": 164.5691893758442,
+      "y": 830.7709699521566,
+      "strokeColor": "#000000",
+      "backgroundColor": "#99bcff",
+      "width": 29.31860660384862,
+      "height": 5.711199931375845,
+      "seed": 1587758278,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0.7724193963150375,
+          2.2765797384357125
+        ],
+        [
+          4.103544916365185,
+          4.186609221587683
+        ],
+        [
+          8.536129150893453,
+          5.343311508306209
+        ],
+        [
+          15.480325949120388,
+          5.448716592152419
+        ],
+        [
+          23.583965316012858,
+          4.712296432964328
+        ],
+        [
+          28.316582284417855,
+          2.033216518393959
+        ],
+        [
+          29.31860660384862,
+          -0.2624833392234258
+        ]
+      ]
+    },
+    {
+      "type": "ellipse",
+      "version": 1004,
+      "versionNonce": 536357658,
+      "isDeleted": false,
+      "id": "d-K4p3mpIoQvRv-wGp8k-",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 90,
+      "angle": 0,
+      "x": 172.64310529976365,
+      "y": 823.8600956863492,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 15.528434353116108,
+      "height": 44.82230388130942,
+      "seed": 1135923866,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 3392,
+      "versionNonce": 457649030,
+      "isDeleted": false,
+      "id": "f-nwNW_L2ECFBmBiLT5QB",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 90,
+      "angle": 0,
+      "x": 166.08514088547008,
+      "y": 862.5080620105977,
+      "strokeColor": "#000000",
+      "backgroundColor": "#99bcff",
+      "width": 29.31860660384862,
+      "height": 5.896061363392446,
+      "seed": 480951302,
+      "groupIds": [
+        "r9XnH2l0Yo1X70jedvUkq"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          4.103544916365185,
+          -4.322122351104391
+        ],
+        [
+          8.536129150893453,
+          -5.516265043290966
+        ],
+        [
+          15.480325949120388,
+          -5.625081903117008
+        ],
+        [
+          23.583965316012858,
+          -4.8648251269605955
+        ],
+        [
+          28.316582284417855,
+          -2.0990281379671547
+        ],
+        [
+          29.31860660384862,
+          0.2709794602754383
+        ]
+      ]
+    },
+    {
+      "type": "rectangle",
+      "version": 1208,
+      "versionNonce": 1428753946,
+      "isDeleted": false,
+      "id": "DIDUyU6J-aKfZ-KOUv8Co",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 396.0925157766851,
+      "y": 774.861721002026,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 100,
+      "height": 60,
+      "seed": 1887759066,
+      "groupIds": [
+        "YSdKeklzeUvlrViW22oWX",
+        "HysakQGw-RxEEAlAExI7s"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1216,
+      "versionNonce": 944371846,
+      "isDeleted": false,
+      "id": "pmToJZdk9Ov3rXdS_KX-A",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 456.09251577668533,
+      "y": 774.861721002026,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 60,
+      "height": 20,
+      "seed": 1991722950,
+      "groupIds": [
+        "YSdKeklzeUvlrViW22oWX",
+        "HysakQGw-RxEEAlAExI7s"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -20,
+          -20
+        ],
+        [
+          -60,
+          -19.999999999999996
+        ],
+        [
+          -60,
+          -3.552713678800501e-15
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 653,
+      "versionNonce": 1137982170,
+      "isDeleted": false,
+      "id": "jKwA3-LVeTDF09EB1qi5z",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 404.57182730728437,
+      "y": 784.5193326585876,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 42.92796325683594,
+      "height": 19.2,
+      "seed": 1763082138,
+      "groupIds": [
+        "HysakQGw-RxEEAlAExI7s"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "sqlite",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "sqlite"
+    },
+    {
+      "type": "rectangle",
+      "version": 1360,
+      "versionNonce": 1053095878,
+      "isDeleted": false,
+      "id": "qmcJ0CrdQTmLpY_aOZH1Q",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 398.4962966025348,
+      "y": 901.5907706855569,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 100,
+      "height": 60,
+      "seed": 960913158,
+      "groupIds": [
+        "F0lqjJoH4tC8RP_kGmDeg",
+        "81vZuhmwxpPX3Cns_zDoW"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1368,
+      "versionNonce": 905695130,
+      "isDeleted": false,
+      "id": "mk3lvoHU35b7glSGV11Ip",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 458.49629660253504,
+      "y": 901.5907706855569,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 60,
+      "height": 20,
+      "seed": 739736666,
+      "groupIds": [
+        "F0lqjJoH4tC8RP_kGmDeg",
+        "81vZuhmwxpPX3Cns_zDoW"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -20,
+          -20
+        ],
+        [
+          -60,
+          -19.999999999999996
+        ],
+        [
+          -60,
+          -3.552713678800501e-15
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 805,
+      "versionNonce": 337514246,
+      "isDeleted": false,
+      "id": "axrO_303Vf01zj43on-zt",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 406.9756081331341,
+      "y": 911.2483823421185,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 35.80796813964844,
+      "height": 19.2,
+      "seed": 1617989190,
+      "groupIds": [
+        "81vZuhmwxpPX3Cns_zDoW"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "temp",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "temp"
+    },
+    {
+      "type": "rectangle",
+      "version": 1495,
+      "versionNonce": 1339214938,
+      "isDeleted": false,
+      "id": "8oWAB_LK-s5jZ1iF3TzoW",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 527.3653949659945,
+      "y": 735.065076558839,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234031,
+      "seed": 123396378,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1651,
+      "versionNonce": 1691500102,
+      "isDeleted": false,
+      "id": "Vd6YTLUoMxVZ7omXOnTYG",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 827.0318062011794,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.31115309489353,
+      "height": 91.96672964234033,
+      "seed": 1494406534,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -8.881784197001252e-16,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          15.327788273723382
+        ],
+        [
+          61.31115309489353,
+          -76.63894136861694
+        ],
+        [
+          45.98336482117017,
+          -76.63894136861693
+        ],
+        [
+          45.983364821170156,
+          0
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1512,
+      "versionNonce": 925643034,
+      "isDeleted": false,
+      "id": "JvzKOgNjHlHznZAA6gN2s",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 750.3928648325624,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 374582746,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1538,
+      "versionNonce": 1170113926,
+      "isDeleted": false,
+      "id": "sgl5QZHPFZG-AIpKMmbvP",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 781.0484413800092,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 1818899654,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1522,
+      "versionNonce": 1601895898,
+      "isDeleted": false,
+      "id": "ulvgrhHV2sj5WQRrsuA6W",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 765.7206531062858,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 236249754,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1548,
+      "versionNonce": 673178822,
+      "isDeleted": false,
+      "id": "aOBHCVhBNa5Me7UCcNrdd",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 796.3762296537326,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 30.655576547446767,
+      "height": 0,
+      "seed": 873704454,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.655576547446767,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1603,
+      "versionNonce": 1439838874,
+      "isDeleted": false,
+      "id": "iZFt2MoHPz3PbzE0xRZyn",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 542.6931832397179,
+      "y": 811.704017927456,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 15.327788273723383,
+      "height": 0,
+      "seed": 156335962,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          15.327788273723383,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 1010,
+      "versionNonce": 1301502982,
+      "isDeleted": false,
+      "id": "zv_sU_MIuOVcQeo_QITFK",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 598.2134956406135,
+      "y": 727.798768305141,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 99.77590942382812,
+      "height": 19.2,
+      "seed": 235682630,
+      "groupIds": [
+        "U-jGw8moI1yKh3dKvXhLO",
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "customers.db",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "customers.db"
+    },
+    {
+      "type": "text",
+      "version": 1099,
+      "versionNonce": 216321882,
+      "isDeleted": false,
+      "id": "gR7oo8Eb16411CcrvwYLG",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 615.8892768906132,
+      "y": 746.0706190697457,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 62.623931884765625,
+      "height": 19.2,
+      "seed": 1415349274,
+      "groupIds": [
+        "U-jGw8moI1yKh3dKvXhLO",
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "sales.db",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "sales.db"
+    },
+    {
+      "type": "line",
+      "version": 1307,
+      "versionNonce": 1008069446,
+      "isDeleted": false,
+      "id": "HLZqIl7oA-DnaxmZiKjsl",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 506.22729586933474,
+      "y": 812.254627800662,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 15.17100694444457,
+      "height": 14.997829861111143,
+      "seed": 280027782,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          15.17100694444457,
+          -14.997829861111143
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1474,
+      "versionNonce": 688247834,
+      "isDeleted": false,
+      "id": "33Ga3B88YssQhFIkD3p2D",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 504.13922728899934,
+      "y": 816.2214526067891,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 29.644965277777885,
+      "height": 24.2274305555556,
+      "seed": 958984410,
+      "groupIds": [
+        "qI6xKBuAgp0rxH5wXAOwJ"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          29.644965277777885,
+          24.2274305555556
+        ]
+      ]
+    },
+    {
+      "type": "rectangle",
+      "version": 1606,
+      "versionNonce": 839160454,
+      "isDeleted": false,
+      "id": "krdX8DpKI81IzIUxZCFz8",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 533.755679668943,
+      "y": 887.7518003170749,
+      "strokeColor": "#000000",
+      "backgroundColor": "#868e96",
+      "width": 61.311153094893534,
+      "height": 91.96672964234031,
+      "seed": 2126422470,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 1640,
+      "versionNonce": 1277706458,
+      "isDeleted": false,
+      "id": "zVX5sL1NqtZDbiWk6onHv",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 505.3745467846654,
+      "y": 929.224603588138,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 21.066406250000057,
+      "height": 4.233940972222058,
+      "seed": 1263125914,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262292263,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          21.066406250000057,
+          -4.233940972222058
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 324,
+      "versionNonce": 438063558,
+      "isDeleted": false,
+      "id": "eTfb8IEEbKSRAPqgM2zPZ",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 604.9145400805078,
+      "y": 890.6257328266759,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 90.68791198730469,
+      "height": 19.2,
+      "seed": 995260678,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1677262292264,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 1,
+      "text": "scratch.tmp",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "scratch.tmp"
+    },
+    {
+      "type": "line",
+      "version": 1760,
+      "versionNonce": 1335139014,
+      "isDeleted": false,
+      "id": "IYmGqUHHKd_2-smRTlo_0",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 339.1407754022355,
+      "y": 432.8276284707797,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 27.77322177964419,
+      "height": 93.32694726724714,
+      "seed": 935932934,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262099293,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          27.77322177964419,
+          -93.32694726724714
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1865,
+      "versionNonce": 1122551066,
+      "isDeleted": false,
+      "id": "9zZWpvmfAh563jNLrI0vM",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 340.95276145691616,
+      "y": 442.6937796410771,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 30.335157123575016,
+      "height": 19.261831079341448,
+      "seed": 363584666,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262110398,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          30.335157123575016,
+          19.261831079341448
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 1873,
+      "versionNonce": 295878150,
+      "isDeleted": false,
+      "id": "GlHcBWq4Slc1Bua23WCox",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 336.841975467795,
+      "y": 457.76828513435845,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 35.41519241581824,
+      "height": 118.91429711893323,
+      "seed": 1355100550,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262119711,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          35.41519241581824,
+          118.91429711893323
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 2098,
+      "versionNonce": 1178274458,
+      "isDeleted": false,
+      "id": "MdIPMB6-pB9-YS5S545Yt",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 272.7529524510363,
+      "y": 856.2588459114294,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 109.00995105991564,
+      "height": 37.68243843817504,
+      "seed": 1801278042,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262369693,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          109.00995105991564,
+          37.68243843817504
+        ]
+      ]
+    },
+    {
+      "type": "line",
+      "version": 2208,
+      "versionNonce": 1196317466,
+      "isDeleted": false,
+      "id": "_qvAD4cTiUBS4zD51xZdW",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 277.78018973966806,
+      "y": 835.6744062088886,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 106.28728593205,
+      "height": 35.45935445119699,
+      "seed": 2093411994,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1677262373063,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          106.28728593205,
+          -35.45935445119699
+        ]
+      ]
+    },
+    {
+      "id": "C9C7sScg4u2DZGkovHqj3",
+      "type": "text",
+      "x": 45.092675471374775,
+      "y": 895.226933387463,
+      "width": 300,
+      "height": 19.2,
+      "angle": 0,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "roundness": null,
+      "seed": 789315526,
+      "version": 331,
+      "versionNonce": 12040154,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1677262361428,
+      "link": null,
+      "locked": false,
+      "text": "navigator.storage.getDirectory()",
+      "fontSize": 16,
+      "fontFamily": 3,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "navigator.storage.getDirectory()"
+    }
+  ],
+  "appState": {
+    "gridSize": null,
+    "viewBackgroundColor": "#ffffff"
+  },
+  "files": {}
+}
\ No newline at end of file
diff --git a/src/site/content/en/blog/origin-trials/hero.jpg b/src/site/content/en/blog/origin-trials/hero.jpg
deleted file mode 100644
index 638e90c11a7..00000000000
Binary files a/src/site/content/en/blog/origin-trials/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/origin-trials/index.md b/src/site/content/en/blog/origin-trials/index.md
deleted file mode 100644
index 1bef049b931..00000000000
--- a/src/site/content/en/blog/origin-trials/index.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Getting started with Chrome's origin trials
-subhead: Origin trials are a way to test a new or experimental web platform feature, and give feedback to the web standards community on the feature's usability, practicality, and effectiveness, before the feature is made available to all users. 
-authors: 
-  - samdutton
-date: 2020-06-22
-updated: 2020-06-24
-hero: hero.jpg
-thumbnail: thumbnail.jpg
-alt: Pipette with purple liquid
-tags:
-  - blog
-  - origin-trials
----
-
-Origin trials give you access to a new or experimental feature, to build 
-functionality your users can try out for a limited time before the feature 
-is made available to everyone. 
-
-When Chrome offers an origin trial for a feature, you can register for the trial to enable 
-the feature for all users on your [origin](/same-site-same-origin/#origin), 
-without requiring them to toggle any flags or switch to an alternative build 
-of Chrome (though they may need to upgrade). Origin trials enable developers 
-to build demos and prototypes using new features. The trials also help Chrome engineers 
-understand how new features are used, and how they may interact with other web technologies.
-
-Origin trials are public and open to all developers. They are limited in duration and
-usage. Participation is a self-managed process with limited documentation and support. 
-Participants should be willing and able to work relatively independently using the 
-documentation available, which, at this stage, will likely be limited to API 
-specifications and explainers, though web.dev tries to provide guidance whenever 
-possible.
-
-If you register for a trial, the Chrome team will periodically ask you for specific 
-feedback on your use of the trial feature. Some features may undergo multiple origin 
-trials, as learnings are incorporated and adjustments are made.  
-
-## How to register for an origin trial
-
-1. Choose an origin trial from the [list of active trials](https://developers.chrome.com/origintrials/#/trials/active).
-1. [Request a token](https://developers.chrome.com/origintrials/#/trials/active).
-1. [Add the token](http://googlechrome.github.io/OriginTrials/developer-guide.html)
-   to your web pages, using a `<meta>` tag or an `Origin-Trial` HTTP response
-   header.
-   -  As a meta tag in the &lt;head&gt; of each page served:   
-      `<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">`
-   -  As an HTTP header:  
-      `Origin-Trial: TOKEN_GOES_HERE`
-
-1. Try out the new feature.
-1. Submit feedback. Do this through the origin trial site. This feedback is 
-   not public and is available only to a limited group of people on the Chrome
-   team. Each trial also provides a link for spontaneous community feedback.
-   This typically points to the the feature on GitHub or some other public
-   channel.  
-
-## Find out more
-
--  [Origin trials guide for web developers](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)
--  [Origin trial explainer](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md)
--  [Running an origin trial](https://www.chromium.org/blink/origin-trials/running-an-origin-trial)
--  [Process for launching new features in Chromium](https://www.chromium.org/blink/launching-features)
--  [Intent to explain: Demystifying the Blink shipping process](https://www.youtube.com/watch?time_continue=291&v=y3EZx_b-7tk)
----
-
-Photo by [Louis Reed
-](https://unsplash.com/@_louisreed) on [Unsplash](https://unsplash.com/photos/pwcKF7L4-no).
diff --git a/src/site/content/en/blog/origin-trials/thumbnail.jpg b/src/site/content/en/blog/origin-trials/thumbnail.jpg
deleted file mode 100644
index a67fcf60e34..00000000000
Binary files a/src/site/content/en/blog/origin-trials/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/overloaded-server/effective-use-of-cdn.jpg b/src/site/content/en/blog/overloaded-server/effective-use-of-cdn.jpg
deleted file mode 100644
index f5c97f1aa9e..00000000000
Binary files a/src/site/content/en/blog/overloaded-server/effective-use-of-cdn.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/overloaded-server/hero.jpg b/src/site/content/en/blog/overloaded-server/hero.jpg
deleted file mode 100644
index d6ffcc9804d..00000000000
Binary files a/src/site/content/en/blog/overloaded-server/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/overloaded-server/index.md b/src/site/content/en/blog/overloaded-server/index.md
index 4aa257a647f..f5f126f1b20 100644
--- a/src/site/content/en/blog/overloaded-server/index.md
+++ b/src/site/content/en/blog/overloaded-server/index.md
@@ -5,7 +5,7 @@ subhead: |
 authors:
   - katiehempenius
 date: 2020-03-31
-hero: hero.jpg
+hero: image/admin/5fmiwGShxNngW0sOeKvf.jpg
 description: |
   How to determine a server's bottleneck, quickly fix the bottleneck, improve server performance, and prevent regressions.
 tags:
@@ -69,26 +69,26 @@ Further reading:
 
 Look for ways to more aggressively cache content. If a resource can be served from an HTTP cache (whether it's the browser cache or a CDN), then it doesn't need to be requested from the origin server, which reduces server load.
 
-HTTP headers like [`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires), and [`ETag`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag) indicate how a resource should be cached by an HTTP cache. Auditing and fixing these headers will improve caching.
+HTTP headers like [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires), and [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) indicate how a resource should be cached by an HTTP cache. Auditing and fixing these headers will improve caching.
 
-Although [service workers](https://developers.google.com/web/fundamentals/primers/service-workers) can also be used for caching, they utilize a separate [cache](https://developer.mozilla.org/en-US/docs/Web/API/Cache) and are a supplement, rather than a replacement, for proper HTTP caching. For this reason, when handling an overloaded server, efforts should be focused on optimizing HTTP caching.
+Although [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) can also be used for caching, they utilize a separate [cache](https://developer.mozilla.org/docs/Web/API/Cache) and are a supplement, rather than a replacement, for proper HTTP caching. For this reason, when handling an overloaded server, efforts should be focused on optimizing HTTP caching.
 
 #### Diagnose
 
-Run [Lighthouse](https://developers.google.com/web/tools/lighthouse) and look at the [Serve static assets with an efficient cache policy](https://developers.google.com/web/tools/lighthouse/audits/cache-policy) audit to view a list of resources with a short to medium [time to live](https://en.wikipedia.org/wiki/Time_to_live) (TTL). For each listed resource, consider if the TTL should be increased. As a rough guideline:
+Run [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and look at the [Serve static assets with an efficient cache policy](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl) audit to view a list of resources with a short to medium [time to live](https://en.wikipedia.org/wiki/Time_to_live) (TTL). For each listed resource, consider if the TTL should be increased. As a rough guideline:
 *   Static resources should be cached with a long TTL (1 year).
 *   Dynamic resources should be cached with a short TTL (3 hours).
 
 #### Fix
 
-Set the [`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) header's `max-age` directive to the appropriate number of seconds.
+Set the [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) header's `max-age` directive to the appropriate number of seconds.
 
 Instructions:
 *   [NGINX](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
 *   [Apache](http://httpd.apache.org/docs/current/mod/mod_expires.html)
 *   [Microsoft](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache)
 
-Note: The `max-age` directive is just one of many caching directives. There are many other directives and headers that will affect the caching behavior of your application. For a more in-depth explanation of caching strategy it is highly recommended that you read [HTTP Caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching).
+Note: The `max-age` directive is just one of many caching directives. There are many other directives and headers that will affect the caching behavior of your application. For a more in-depth explanation of caching strategy it is highly recommended that you read [HTTP Caching](/http-cache/).
 
 
 ### Graceful Degradation
@@ -115,11 +115,9 @@ CDNs benefit from scale, so operating your own CDN rarely makes sense. A basic C
 
 Identify resources that are not being served from a CDN (but should be) by running [WebPageTest](https://webpagetest.org/). On the results page, click on the square above 'Effective use of CDN' to see the list of resources that should be served from a CDN.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="effective-use-of-cdn.jpg"
-       alt="Arrow pointing to the 'Effective use of CDN' button" class="screenshot"
-       width="300">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/awCu4XpFI9IQ1bfhIaWJ.jpg", alt="Arrow pointing to the 'Effective use of CDN' button", width="300", height="109" %}
+  <figcaption>
    WebPageTest results
   </figcaption>
 </figure>
@@ -127,9 +125,9 @@ Identify resources that are not being served from a CDN (but should be) by runni
 #### Fix
 
 If a resource is not being cached by the CDN, check that the following conditions are met:
-*   It has a [`Cache-Control: public`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Cacheability) header.
-*   It has a [`Cache-Control: s-maxage`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Expiration), [`Cache-Control: max-age`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Expiration), or [`Expires`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires) header.
-*   It has a [`Content-Length`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Length), [`Content-Range`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Range), or [`Transfer-Encoding header`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Transfer-Encoding).
+*   It has a [`Cache-Control: public`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Cacheability) header.
+*   It has a [`Cache-Control: s-maxage`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration), [`Cache-Control: max-age`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration), or [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires) header.
+*   It has a [`Content-Length`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Length), [`Content-Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Range), or [`Transfer-Encoding header`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Transfer-Encoding).
 
 
 ### Scale compute resources
@@ -138,7 +136,7 @@ The decision to scale compute resources should be made carefully. Although it is
 
 #### Diagnose
 
-A high [Time To First Byte](https://web.dev/time-to-first-byte/) (TTFB) can be a sign that a server is nearing its capacity. You can find this information in the Lighthouse [Reduce server response times (TTFB)](https://developers.google.com/web/tools/lighthouse/audits/ttfb) audit.
+A high [Time To First Byte](/ttfb/) (TTFB) can be a sign that a server is nearing its capacity. You can find this information in the Lighthouse [Reduce server response times (TTFB)](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte) audit.
 
 To investigate further, use a monitoring tool to assess CPU usage. If current or anticipated CPU usage exceeds 80% you should consider increasing your servers.
 
@@ -155,7 +153,7 @@ Text-based resources should be compressed using gzip or brotli. Gzip can reduce
 
 #### Diagnose
 
-Use the Lighthouse [Enable text compression](https://developers.google.com/web/tools/lighthouse/audits/text-compression) audit to identify resources that should be compressed.
+Use the Lighthouse [Enable text compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression) audit to identify resources that should be compressed.
 
 #### Fix
 
@@ -177,15 +175,15 @@ Enable compression by updating your server configuration. Instructions:
 Lighthouse has a variety of audits that flag potential image optimizations. Alternatively, another strategy is to use DevTools to identify the largest image files - these images will likely be good candidates for optimization.
 
 Relevant Lighthouse audits:
-*   [Properly size images](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)
-*   [Defer offscreen images](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images)
-*   [Efficiently encode images](https://web.dev/uses-optimized-images/)
-*   [Serve images in next-gen formats](https://developers.google.com/web/tools/lighthouse/audits/webp)
-*   [Use video formats for animated content](https://web.dev/efficient-animated-content/)
+*   [Properly size images](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images)
+*   [Defer offscreen images](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)
+*   [Efficiently encode images](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+*   [Serve images in next-gen formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images)
+*   [Use video formats for animated content](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/)
 
 Chrome DevTools workflow:
-- [Log network activity](https://developers.google.com/web/tools/chrome-devtools/network#load)
-- Click **Img** to [filter out non-image resources](https://developers.google.com/web/tools/chrome-devtools/network/reference#filter-by-type)
+- [Log network activity](https://developer.chrome.com/docs/devtools/network/#load)
+- Click **Img** to [filter out non-image resources](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-type)
 - Click the **Size** column to sort the image files by size
 
 #### Fix
@@ -197,14 +195,14 @@ Focus your time on Identifying large and frequently loaded images and manually o
 Things to keep in mind:
 *   Size: Images should be no larger than necessary.
 *   Compression: Generally speaking, a quality level of 80-85 will have a minimal effect on image quality while yielding a 30-40% reduction in file size.
-*   Format: Use JPEGs for photos rather than PNG; use MP4 for [animated content](https://web.dev/replace-gifs-with-videos/) rather than GIF.
+*   Format: Use JPEGs for photos rather than PNG; use MP4 for [animated content](/replace-gifs-with-videos/) rather than GIF.
 
 *If you have more time…*
 
 Consider setting up an image CDN if images make up a substantial portion of your site. Image CDNs are designed for serving and optimizing images and they will offload image serving from the origin server. Setting up an image CDN is straightforward but requires updating existing image URLs to point at the image CDN.
 
 Further reading:
-*   [Use image CDNs to optimize images](https://web.dev/image-cdns/#optimize-your-images)
+*   [Use image CDNs to optimize images](/image-cdns/#optimize-your-images)
 *   [images.guide](https://images.guide/)
 
 
@@ -214,13 +212,13 @@ Minification removes unnecessary characters from JavaScript and CSS.
 
 #### Diagnose
 
-Use the [Minify CSS](https://developers.google.com/web/tools/lighthouse/audits/minify-css) and [Minify JavaScript](https://web.dev/unminified-javascript/) Lighthouse audits to identify resources that are in need of minification.
+Use the [Minify CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/) and [Minify JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/) Lighthouse audits to identify resources that are in need of minification.
 
 #### Fix
 
 If you have limited time, focus on minifying your JavaScript. Most sites have more JavaScript than CSS, so this will be more impactful.
-*   [Minify JavaScript](https://web.dev/reduce-network-payloads-using-text-compression/)
-*   [Minify CSS](https://web.dev/minify-css/)
+*   [Minify JavaScript](/reduce-network-payloads-using-text-compression/)
+*   [Minify CSS](/minify-css/)
 
 
 ## Monitor
diff --git a/src/site/content/en/blog/oyo-lite-twa/index.md b/src/site/content/en/blog/oyo-lite-twa/index.md
index e78a0ed4526..efa5eeb7097 100644
--- a/src/site/content/en/blog/oyo-lite-twa/index.md
+++ b/src/site/content/en/blog/oyo-lite-twa/index.md
@@ -14,7 +14,7 @@ description: |
   dramatically increase user engagement and keep file size low.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - twa
+  # - twa
   - case-study
 ---
 
@@ -26,27 +26,27 @@ as fast and easy as possible.
 
 Until recently, the OYO team was offering both a
 [Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps)
-and a native Android app to achieve that goal.
+and an Android app to achieve that goal.
 The Android app had significantly higher engagement:
 users converted three times as often as those using the PWA.
 But users also tended to uninstall the Android app over time
 because of concerns about storage space.
 
 To reduce the Android app's footprint on users' devices
-while keeping the benefits of the native experience,
+while keeping the benefits of the Android experience,
 the team decided to turn to
-[Trusted Web Activities (TWAs)](https://developers.google.com/web/updates/2019/02/using-twa).
+[Trusted Web Activities (TWAs)](https://developer.chrome.com/docs/android/trusted-web-activity/).
 
 ## What's a TWA?
 Before Chrome 72, Android developers who wanted to display web content in
-their native apps had to use
+their platform-specific apps had to use
 [WebView](https://developer.android.com/reference/android/webkit/WebView),
 which came with some meaningful limitations:
 it's not as fast as Chrome and doesn't include all of Chrome's APIs and features.
 So, if you wanted behavior that WebView's rendering engine didn't support,
 you had to build your own browser around it—which isn't exactly trivial!
 
-[Trusted Web Activities (TWAs)](https://developers.google.com/web/updates/2019/02/using-twa)
+[Trusted Web Activities (TWAs)](https://developer.chrome.com/docs/android/trusted-web-activity/)
 address those limitations by showing web content directly in Chrome.
 Breaking down the TWA name helps explain its features:
 - An _activity_ is one screen or view in an Android app's user interface.
@@ -58,29 +58,29 @@ Breaking down the TWA name helps explain its features:
 
 {% Aside %}
 It's easy to confuse PWAs and TWAs.
-_PWAs_ use web technologies to create experiences comparable to native apps.
+_PWAs_ use web technologies to create experiences comparable to Android/iOS/desktop apps.
 _TWAs_ allow you to display a PWA in an Android app wrapper
 that can be downloaded from the Google Play Store.
 {% endAside %}
 
-## Why create a TWA rather than a native app?
+## Why create a TWA rather than a platform-specific app?
 
 More and more Android apps are delivering content from developers' own websites.
 TWAs acknowledge that reality by offering the best
-of the native and web app worlds:
-- They have all the expected functionality of native Android apps,
+of the platform-specific and web app worlds:
+- They have all the expected functionality of Android apps,
   including a launcher icon, push notifications, and fullscreen display.
 - They offer the performance and features of Chrome.
 - They use the version of Chrome installed on the device,
   so they always have the latest APIs and features.
-- They use significantly less storage than a fully native app,
+- They use significantly less storage than a platform-specific app,
   which is a concern for many users,
   especially those with lower-end devices.
 
 Running in Chrome also has a number of handy perks.
 For example, TWAs share Chrome's storage,
 including cookies, passwords, and anything stored using the
-[Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+[Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API).
 One benefit of this setup is that users stay logged in
 across the browser and the TWA app.
 
@@ -93,21 +93,21 @@ though it's best to select the user's default browser.
 
 ## Building OYO Lite
 
-The OYO team wanted to give their users a native app experience
+The OYO team wanted to give their users a full-featured app experience
 without having to compromise on device storage,
 so they decided to create
 [OYO Lite](https://play.google.com/store/apps/details?id=com.oyo.consumerlite),
 a TWA built on their existing PWA.
 
 Starting with a PWA is essential.
-Users expect a native-like experience in an app they run from the Android launcher,
+Users expect a full-featured experience in an app they run from the Android launcher,
 so web content served in a TWA must provide that experience, including:
 - Fast load and response times
 - Reliability when the user has limited or no connectivity
 - A unified look and feel (by providing, for example, a splash screen and app color)
 
 {% Aside %}
-Meeting the [Lighthouse requirements for a PWA](/lighthouse-pwa)
+Meeting the [Lighthouse requirements for a PWA](https://developer.chrome.com/docs/lighthouse/pwa/)
 is actually a prerequisite for TWAs.
 To learn more about building a PWA,
 see the [Installable collection](/installable).
@@ -129,12 +129,12 @@ Here's what the OYO team did:
 * Created a custom splash screen.
 
 And here's the result:
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     OYO Lite in action.
   </figcaption>
 </figure>
@@ -153,9 +153,9 @@ that's accessible to all Android users—take a look at Ankit Jain's
 By storing most of their app assets in Chrome's cache,
 the OYO team was able to get the initial download size
 for OYO Lite down to a svelte 850&nbsp;KB.
-That's just 7% the size of their native Android app!
+That's just 7% the size of their Android app!
 
-That small footprint combined with the amenities of a native app
+That small footprint combined with the amenities of an Android app
 downloadable from the Google Play Store led to significant gains
 in user engagement:
 - A conversion rate three times higher than the PWA's rate
@@ -169,10 +169,10 @@ for users to download the latest version of the app.
 
 ## Build your own TWA
 OYO's online reservation platform is only one use case for TWAs.
-They can be a great fit for many projects currently built as native apps or web pages,
+They can be a great fit for many projects currently built as platform-specific apps or web pages,
 from shopping carts and checkout flows to FAQs and contact forms.
 
 Check out these links to get started with TWAs:
-- [Using Trusted Web Activities](https://developers.google.com/web/updates/2019/02/using-twa)
+- [Using Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/)
 - [Taking Chrome Full Screen with Trusted Web Activities (YouTube)](https://youtu.be/6lHBw3F4cWs)
 - [A complete guide to Trusted Web Activity (TWA): OYO case study](https://medium.com/@ankitjainaj/3dd327d7afc5)
diff --git a/src/site/content/en/blog/oz/index.md b/src/site/content/en/blog/oz/index.md
new file mode 100644
index 00000000000..1f97e603c40
--- /dev/null
+++ b/src/site/content/en/blog/oz/index.md
@@ -0,0 +1,822 @@
+---
+layout: post
+title: Case Study - Find Your Way to Oz
+authors:
+  - unit9com
+date: 2013-02-05
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+[“Find Your Way to Oz”](http://findyourwaytooz.com) is a new Google Chrome Experiment brought to the web by Disney. It allows you to take an interactive journey through a Kansas circus, which leads you to the land of Oz after you are swept up by a massive storm.
+
+Our goal was to combine the richness of cinema with the technical capabilities of the browser to create a fun, immersive experience that users can form a strong connection with.
+
+The job is a bit too big to capture in its whole in this piece so we’ve dived in and pulled out some chapters to the technology story that we think are interesting. Along the way we extracted some focused tutorials of increasing difficulty.
+
+Many people worked hard to make this experience possible: too many to be listed here. Please [visit the site](http://findyourwaytooz.com) to check out the credits page under the menu section for the full story.
+
+## A Peek Under the Hood
+
+Find Your Way to Oz on desktop is a rich immersive world. We use 3D and several layers of traditional filmmaking inspired effects that combine to create a near-realistic scene. The most prominent technologies are WebGL with Three.js, custom built shaders and DOM animated elements using CSS3 features. Beyond this, getUserMedia API (WebRTC) for interactive experiences allowing the user to add their image directly from Webcam and WebAudio for 3D sound.
+
+But the magic of a technological experience like this is how it comes together. This is also one of the main challenges: how to blend visual effects and interactive elements together in one scene to create a consistent whole? This visual complexity was difficult to manage: making it difficult to tell what stage in development we were at any one time.
+
+To address the problem of interconnected visual effects and optimisation we made heavy use of a control panel that would capture all the relevant settings we were reviewing at that point in time. The scene could be adjusted live in browser for anything from brightness, to depth of field, gamma etc… Anyone could try tweaking values of the significant parameters in the experience and take part in discovering what worked best.
+
+Before we share our secret we want to warn you that it might crash, just like if you were to poke around inside a car engine. Make sure you don’t have anything important on and go visit the main url of the site and append [?debug=on](http://findyourwaytooz.com?debug=on) to the address. Wait for the site to load and once you are inside (press?) the key `Ctrl-I` and you will see a dropdown appear on the right hand side. If you uncheck the “Exit camera path” option you can use the keys A, W, S, D and the mouse to move freely around the space.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JQiQUK0nFZfEQ9WgaRSZ.jpg", alt="Camera path.", width="800", height="451" %}
+</figure>
+
+We won’t go through all the settings here, but we encourage you to experiment: the keys reveal different settings in different scenes. In the final storm sequence there is an additional key: `Ctrl-A` with which you can toggle the animation playback and fly around. In this scene if you press `Esc` (to exit the mouse lock functionality) and press again `Ctrl-I` you can access settings that are particular to the storm scene. Have a look around and capture some nice postcard views like the one below.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qadaEzvrVvxk941vY3zl.jpg", alt="Storm scene", width="800", height="394" %}
+</figure>
+
+To make this happen and to ensure it was flexible enough to our needs, we used a lovely library called dat.gui ([see here](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage) for a past tutorial on how to use it). It allowed us to quickly change what settings were exposed to the visitors of the site.
+
+## A Bit Like Matte Painting
+
+In many classic Disney films and animations creating scenes meant combining different layers. There were layers of live action, cell animation, even physical sets and on top layers created by painting on glass: a technique called matte-painting.
+
+In many ways the structure of the experience we created is similar; even though some of the “layers” are much more than static visuals. In fact, they affect the way things look according to more complex computations. Nevertheless, at least at the big-picture level we are dealing with views, composited one on top of the other. At the top you see a UI layer, with a 3D scene below it: itself made of different scene components.
+
+The top interface layer was created using DOM and CSS 3 which meant that editing the interactions could be done in many ways independently of the 3D experience with communication between the two according to a select list of events. This communication uses Backbone Router + onHashChange HTML5 event that controls which area should animate in/out. (project source: /develop/coffee/router/Router.coffee).
+
+## Tutorial: Sprite Sheets and Retina support
+
+One fun optimisation technique we relied on for the interface was to combine the many interface overlay images in one single PNG to reduce server requests. In this project the interface was made up of 70+ images (not counting 3D textures) loaded all upfront to reduce latency of the website. You can see the live sprite sheet here: 
+
+Normal Display - [http://findyourwaytooz.com/img/home/interface_1x.png](http://findyourwaytooz.com/img/home/interface_1x.png)
+Retina Display - [http://findyourwaytooz.com/img/home/interface_2x.png](http://findyourwaytooz.com/img/home/interface_2x.png)
+
+Here’s some tips of how we leveraged the usage of Sprite Sheets, and how to use them for retina devices and get the interface as sharp and neat as possible.
+
+### Creating Spritesheets
+
+To create SpriteSheets we used [TexturePacker](http://www.codeandweb.com/texturepacker) which outputs in any format you need. In this case we have exported as [EaselJS](http://www.createjs.com/#!/EaselJS) which is really clean and could’ve been used to create animated sprites as well.
+
+### Using the generated Sprite Sheet
+
+Once you created your Sprite Sheet you should see a JSON file like this:
+
+```json
+{
+   "images": ["interface_2x.png"],
+   "frames": [
+       [2, 1837, 88, 130],
+       [2, 2, 1472, 112],
+       [1008, 774, 70, 68],
+       [562, 1960, 86, 86],
+       [473, 1960, 86, 86]
+   ],
+
+   "animations": {
+       "allow_web":[0],
+       "bottomheader":[1],
+       "button_close":[2],
+       "button_facebook":[3],
+       "button_google":[4]
+   },
+}
+```
+
+Where:
+
+- image refers to the URL of the sprite sheet
+- frames are the coordinates of each UI element [x, y, width, height]
+- animations are the names of each asset
+
+Note that we have used the high density images to create the Sprite sheet, then we’ve created the normal version just resizing it to the half of its size.
+
+### Putting everything together
+
+Now that we’re all set we just need a JavaScript snippet to use it.
+
+```js
+var SSAsset = function (asset, div) {
+  var css, x, y, w, h;
+
+  // Divide the coordinates by 2 as retina devices have 2x density
+  x = Math.round(asset.x / 2);
+  y = Math.round(asset.y / 2);
+  w = Math.round(asset.width / 2);
+  h = Math.round(asset.height / 2);
+
+  // Create an Object to store CSS attributes
+  css = {
+    width                : w,
+    height               : h,
+    'background-image'   : "url(" + asset.image_1x_url + ")",
+    'background-size'    : "" + asset.fullSize[0] + "px " + asset.fullSize[1] + "px",
+    'background-position': "-" + x + "px -" + y + "px"
+  };
+
+  // If retina devices
+
+  if (window.devicePixelRatio === 2) {
+
+    /*
+    set -webkit-image-set
+    for 1x and 2x
+    All the calculations of X, Y, WIDTH and HEIGHT is taken care by the browser
+    */
+
+    css['background-image'] = "-webkit-image-set(url(" + asset.image_1x_url + ") 1x,";
+    css['background-image'] += "url(" + asset.image_2x_url + ") 2x)";
+
+  }
+
+  // Set the CSS to the DIV
+  div.css(css);
+};
+```
+
+And this is how you would use it: 
+
+```js
+logo = new SSAsset(
+{
+  fullSize     : [1024, 1024],               // image 1x dimensions Array [x,y]
+  x            : 1790,                       // asset x coordinate on SpriteSheet         
+  y            : 603,                        // asset y coordinate on SpriteSheet
+  width        : 122,                        // asset width
+  height       : 150,                        // asset height
+  image_1x_url : 'img/spritesheet_1x.png',   // background image 1x URL
+  image_2x_url : 'img/spritesheet_2x.png'    // background image 2x URL
+},$('#logo'));
+```
+
+To understand a bit more about Variable Pixel Densities you can read [this article by Boris Smus](http://www.html5rocks.com/en/mobile/high-dpi/).
+
+## The 3D Content Pipeline
+
+The environment experience is set up on a WebGL layer. When you think about a 3D scene, one of the trickiest questions is how are you going to make sure you can create content which enables the maximum expressive potential from the modeling, animation and effects sides. In many ways at the core of this issue is the content pipeline: an agreed process to follow to create content for the 3D scene.
+
+We wanted to create an awe inspiring world; so we needed a solid process that would enable 3D artists to create it. They would need to be given as much expressive freedom in their 3D modeling and animation software as possible; and we would need to render it on screen through code.
+
+We had been working on this sort of problem for some time because every time we created a 3D site in the past we had found limitations in the tools we could use. So we had created this tool, called 3D Librarian: a piece of internal research. And it was just about ready to be applied to a real job.
+
+This tool had some history: originally it was for Flash, and it would allow you to bring in a big Maya scene as one single compressed file that was optimised for unpacking runtime. The reason it was optimal was because it effectively packed the scene in basically the same data structure that is manipulated during render and animation. There is very little parsing that needs to be done to the file when loaded. Unpacking in Flash was pretty quick because the file was in AMF format, that Flash could unpack natively. Using the same format in WebGL requires a bit more work on the CPU. In fact we had to re-create a data-unpack Javascript layer of code, that would essentially decompress those files and recreate the data structures needed for WebGL to work. Unpacking the entire 3D scene is a mildly CPU-heavy operation: unpacking scene 1 in __Find Your Way To Oz__ requires about 2 seconds on a mid to high end machine. Therefore this is done using Web Workers technology, at ”scene setup” time (before the scene is actually launched), so as not to hang the experience for the user.
+
+This handy tool can import the most of the 3D scene: models, textures, bones animations. You create a single library file, that can then be loaded by the 3D engine. You stuff all the models you need in your scene within this library, and, voilà, spawn them into your scene.
+
+A problem we had though, was that we were now dealing with WebGL: the new kid on the block. This was a pretty tough kid: that was setting the standard for browser based 3D experiences. So we created an ad hoc Javascript layer that would take the 3D Librarian compressed 3D scene files, and properly translate them to a format that WebGL would understand.
+
+### Tutorial: Let There Be Wind
+
+A recurring theme in “Find Your Way To Oz” was wind. A thread of the storyline is structured to be a crescendo of wind.
+
+The first scene of the carnival is relatively calm. And going through the various scenes, the user experiences a progressively stronger wind, culminating into the final scene, the storm.
+
+Therefore it was important to provide an immersive wind effect.
+
+In order to create this, we populated the 3 carnival scenes with objects that were soft, and thus supposed to be affected by wind, such as tents, flags the surface of the photo booth, and the balloon itself.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WVTqsBXgJdwJJuicROpX.jpg", alt="Soft cloth.", width="800", height="554" %}
+</figure>
+
+Desktop games are these days usually built around a core physics engine. So when a soft-object needs to be simulated in the 3D world, a full physics simulation gets run for it, creating a believable soft-behavior.
+
+In WebGL / Javascript we don’t (yet) have the luxury to run a full blown physics simulation. So in Oz we had to find a way to create the effect of wind, without actually simulating it.
+
+We embedded the information of “wind sensitivity” for each object in the 3D model itself. Each vertex of the 3D model had a ”Wind Attribute” that specified how much that vertex was supposed to be affected by wind. So, this specified wind sensitivity of 3D Objects. Then we needed to create the wind itself.
+
+We did this by generating an image containing [Perlin Noise](http://en.wikipedia.org/wiki/Perlin_noise). This image is intended to cover a certain “area of wind”. So, a good way to think about it, is to imagine a picture of cloud like noise being laid over a certain rectangular area of the 3D scene. Each pixel, gray level value, of this image specifies how strong the wind is in a certain moment in the 3D area “surrounding it”.
+
+In order to produce the wind effect the image is moved, in time, at constant speed, in a specific direction; the direction of the wind. And to make sure the “windy area” doesn’t affect everything in the scene we wrap the wind image around the edges, confined to the area of effect.
+
+### A Simple 3D Wind Tutorial
+
+Let’s now create the effect of wind in a simple 3D scene in Three.js.
+
+We’re going to create wind in a simple ”procedural grass field”.
+
+Let’s first create the scene. We’re going to have a simple, textured flat terrain. And then each bit of grass, is simply going to be represented with an upside-down 3D cone.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Bm0om5KAvCT6wisAS58L.jpg", alt="Grass-filled terrain", width="800", height="469" %}
+<figcaption>Grass-filled terrain</figcaption>
+</figure>
+
+Here is how to create this simple scene in [Three.js](http://mrdoob.github.com/three.js/) using [CoffeeScript](http://coffeescript.org/).
+
+First of all we’re going to setup Three.js, and hook it up with Camera, Mouse controller, and Some Light, of sorts:
+
+```js
+constructor: ->
+
+   @clock =  new THREE.Clock()
+
+   @container = document.createElement( 'div' );
+   document.body.appendChild( @container );
+
+   @renderer = new THREE.WebGLRenderer();
+   @renderer.setSize( window.innerWidth, window.innerHeight );
+   @renderer.setClearColorHex( 0x808080, 1 )
+   @container.appendChild(@renderer.domElement);
+
+   @camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+   @camera.position.x = 5;
+   @camera.position.y = 10;
+   @camera.position.z = 40;
+
+   @controls = new THREE.OrbitControls( @camera, @renderer.domElement );
+   @controls.enabled = true
+
+   @scene = new THREE.Scene();
+   @scene.add( new THREE.AmbientLight 0xFFFFFF )
+
+   directional = new THREE.DirectionalLight 0xFFFFFF
+   directional.position.set( 10,10,10)
+   @scene.add( directional )
+
+   # Demo data
+   @grassTex = THREE.ImageUtils.loadTexture("textures/grass.png");
+   @initGrass()
+   @initTerrain()
+
+   # Stats
+   @stats = new Stats();
+   @stats.domElement.style.position = 'absolute';
+   @stats.domElement.style.top = '0px';
+   @container.appendChild( @stats.domElement );
+   window.addEventListener( 'resize', @onWindowResize, false );
+   @animate()
+```
+
+The __initGrass__, and __initTerrain__ function calls populate the scene with grass and terrain respectively:
+
+```js
+initGrass:->
+   mat = new THREE.MeshPhongMaterial( { map: @grassTex } )
+   NUM = 15
+   for i in [0..NUM] by 1
+       for j in [0..NUM] by 1
+           x = ((i/NUM) - 0.5) * 50 + THREE.Math.randFloat(-1,1)
+           y = ((j/NUM) - 0.5) * 50 + THREE.Math.randFloat(-1,1)
+           @scene.add( @instanceGrass( x, 2.5, y, 5.0, mat ) )
+
+instanceGrass:(x,y,z,height,mat)->
+   geometry = new THREE.CylinderGeometry( 0.9, 0.0, height, 3, 5 )
+   mesh = new THREE.Mesh( geometry, mat )
+   mesh.position.set( x, y, z )
+   return mesh
+```
+
+Here we’re creating a grid of 15 by 15 bits of grass. We add a bit of randomization to each grass position, so that they don’t line up like soldiers, which would look odd.
+
+This terrain is just a horizontal plane, placed at the base of the pieces of grass (y = 2.5).
+
+```js
+initTerrain:->
+  @plane = new THREE.Mesh( new THREE.PlaneGeometry(60, 60, 2, 2), new THREE.MeshPhongMaterial({ map: @grassTex }))
+  @plane.rotation.x = -Math.PI/2
+  @scene.add( @plane )
+```
+
+So, what we’ve done so far is to simply create a Three.js scene, and to add a few bits of grass, made of procedurally generated reversed cones, and a simple terrain.
+
+Nothing fancy so far.
+
+Now, it’s time to begin adding wind. First thing, we want to embed the wind sensitivity information into the grass 3D model.
+
+We are going to embed this information as a custom attribute, for each vertex of the grass 3D model. And we’re going to use the rule that: bottom end of the grass model (tip of the cone) has zero sensitivity, as it’s attached to the ground. The top part of the grass model (base of the cone) has maximum wind sensitivity, as it’s the part that’s farther away from ground.
+
+Here’s how the __instanceGrass__ function gets re-coded, in order to add wind sensitivity as a custom attribute for the grass 3D model.
+
+```js
+instanceGrass:(x,y,z,height)->
+
+  geometry = new THREE.CylinderGeometry( 0.9, 0.0, height, 3, 5 )
+
+  for i in [0..geometry.vertices.length-1] by 1
+      v = geometry.vertices[i]
+      r = (v.y / height) + 0.5
+      @windMaterial.attributes.windFactor.value[i] = r * r * r
+
+  # Create mesh
+  mesh = new THREE.Mesh( geometry, @windMaterial )
+  mesh.position.set( x, y, z )
+  return mesh
+```
+
+We now use a custom material, __windMaterial__, instead of the __MeshPhongMaterial__ we used previously. __WindMaterial__ wraps the __WindMeshShader__ that we are going to see in a minute.
+
+So, the code in __instanceGrass__ loops through all vertices of the grass model, and for each vertex it adds a custom vertex attribute, called __windFactor__. This windFactor is set to 0, for the bottom end of the grass model (where it’s supposed to touch the terrain), and it values 1 for the top end of the grass model.
+
+The other ingredient we need is to add the actual wind to our scene. As discussed we are going make use of Perlin noise for this. We will procedurally generate a Perlin noise texture. 
+
+For the sake of clarity we are going to assign this texture to the terrain itself, in place of the previous green texture it had. This will make it easier to get a feel of what’s going on with wind.
+
+So, this Perlin noise texture will spatially cover the extension of our terrain, and each pixel of the texture will specify wind intensity of the terrain area where that pixel falls. The terrain rectangle is going to be our “area of wind”.
+
+Perlin noise is procedurally generated through a shader, called __NoiseShader__. This shader uses 3d simplex noise algorithms from: [https://github.com/ashima/webgl-noise](https://github.com/ashima/webgl-noise) . The WebGL version of this was taken verbatim from one of MrDoob’s Three.js samples, at: [http://mrdoob.github.com/three.js/examples/webgl_terrain_dynamic.html](http://mrdoob.github.com/three.js/examples/webgl_terrain_dynamic.html).
+
+__NoiseShader__ takes a time, a scale, and an offset set of parameters, as uniforms, and outputs a nice 2D distribution of Perlin noise.
+
+```js
+class NoiseShader
+
+  uniforms:     
+    "fTime"  : { type: "f", value: 1 }
+    "vScale"  : { type: "v2", value: new THREE.Vector2(1,1) }
+    "vOffset"  : { type: "v2", value: new THREE.Vector2(1,1) }
+
+...
+```
+
+We are going to use this Shader to render our Perlin Noise to a texture. This is done in the __initNoiseShader__ function.
+
+```js
+initNoiseShader:->
+  @noiseMap  = new THREE.WebGLRenderTarget( 256, 256, { minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat } );
+  @noiseShader = new NoiseShader()
+  @noiseShader.uniforms.vScale.value.set(0.3,0.3)
+  @noiseScene = new THREE.Scene()
+  @noiseCameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+  @noiseCameraOrtho.position.z = 100
+  @noiseScene.add( @noiseCameraOrtho )
+
+  @noiseMaterial = new THREE.ShaderMaterial
+      fragmentShader: @noiseShader.fragmentShader
+      vertexShader: @noiseShader.vertexShader
+      uniforms: @noiseShader.uniforms
+      lights:false
+
+  @noiseQuadTarget = new THREE.Mesh( new THREE.PlaneGeometry(window.innerWidth,window.innerHeight,100,100), @noiseMaterial )
+  @noiseQuadTarget.position.z = -500
+  @noiseScene.add( @noiseQuadTarget )
+```
+
+What the above code does is to setup __noiseMap__ as a Three.js render target, equip it with the __NoiseShader__, and then render it with an orthographic camera, so as to avoid perspective distortions.
+
+As discussed, we are now going to use this texture also as the main rendering texture for the terrain. This is not really necessary for the wind effect itself to work. But it’s nice to have, so that we can better visually understand what’s going on with wind generation.  
+
+Here’s the reworked __initTerrain__ function, using noiseMap as a texture:
+
+```js
+initTerrain:->
+  @plane = new THREE.Mesh( new THREE.PlaneGeometry(60, 60, 2, 2), new THREE.MeshPhongMaterial( { map: @noiseMap, lights: false } ) )
+  @plane.rotation.x = -Math.PI/2
+  @scene.add( @plane )
+```
+
+Now that we have our wind texture in place, let’s take a look at WindMeshShader, that is responsible for deforming the grass models according to wind.
+
+In order to create this shader we started from the standard Three.js MeshPhongMaterial shader, and modified it. This is a good quick and dirty way to get started with a shader that works, without having to start from scratch.
+
+We're not going to copy the entire shader code here (feel free to look at it in the source code file), because most of it would be a replica of MeshPhongMaterial shader. But let’s take a look at the modified, wind related, parts, in the Vertex Shader.
+
+```js
+vec4 wpos = modelMatrix * vec4( position, 1.0 );
+vec4 wpos = modelMatrix * vec4( position, 1.0 );
+
+wpos.z = -wpos.z;
+vec2 totPos = wpos.xz - windMin;
+vec2 windUV = totPos / windSize;
+vWindForce = texture2D(tWindForce,windUV).x;
+
+float windMod = ((1.0 - vWindForce)* windFactor ) * windScale;
+vec4 pos = vec4(position , 1.0);
+pos.x += windMod * windDirection.x;
+pos.y += windMod * windDirection.y;
+pos.z += windMod * windDirection.z;
+
+mvPosition = modelViewMatrix *  pos;
+```
+
+So, what this shader does is to first calculate __windUV__ texture lookup coordinate, based on the 2D, xz (horizontal) position of the vertex. This UV coordinate is used to lookup the wind force, __vWindForce__, from the Perlin noise wind texture.
+
+This __vWindForce__ value, is composited with the vertex specific __windFactor__, custom attribute discussed above, in order to compute how much deformation the vertex needs. We also have a global __windScale__, parameter, to control the overall strength of the wind, and a __windDirection__, vector, that specifies in which direction the wind deformation needs to take place.
+
+So, this creates wind based deformation of our pieces of grass. However we’re still not done. As it is now, this deformation is static, and it will not convey the effect of a windy area.
+
+As we had mentioned, we’re going to need to slide the noise texture over time, across the area of wind, so that our glass can wave.
+
+This is done by shifting over time, the __vOffset__ uniform that is passed to the NoiseShader. This is a vec2 parameter, that will allow us to specify noise offset, along a certain direction (our wind direction).
+
+We do this in the __render__, function, that gets called at every frame:
+
+```js
+render: =>
+  delta = @clock.getDelta()
+
+  if @windDirection
+      @noiseShader.uniforms[ "fTime" ].value += delta * @noiseSpeed
+      @noiseShader.uniforms[ "vOffset" ].value.x -= (delta * @noiseOffsetSpeed) * @windDirection.x
+      @noiseShader.uniforms[ "vOffset" ].value.y += (delta * @noiseOffsetSpeed) * @windDirection.z
+...
+```
+
+And that is it! We just created a scene with "procedural grass" affected by wind.
+
+### Adding dust to the mix
+
+Now let's spice up our scene a little bit. Let's add a bit of flying dust, so as to make the scene more interesting.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zaIJL4FYhdcBR9rLwmab.png", alt="Adding dust", width="800", height="522" %}
+  <figcaption>Adding dust</figcaption>
+</figure>
+
+Dust is supposed to be affected by wind, after all, so it makes perfect sense to have dust flying around in our wind scene.
+
+Dust is setup in the __initDust__ function as a particle system.
+
+```js
+initDust:->
+  for i in [0...5] by 1
+      shader = new WindParticleShader()
+      params = {}
+      params.fragmentShader = shader.fragmentShader
+      params.vertexShader   = shader.vertexShader
+      params.uniforms       = shader.uniforms
+      params.attributes     = { speed: { type: 'f', value: [] } }
+
+      mat  = new THREE.ShaderMaterial(params)
+      mat.map = shader.uniforms["map"].value = THREE.ImageUtils.loadCompressedTexture("textures/dust#{i}.dds")
+      mat.size = shader.uniforms["size"].value = Math.random()
+      mat.scale = shader.uniforms["scale"].value = 300.0
+      mat.transparent = true
+      mat.sizeAttenuation = true
+      mat.blending = THREE.AdditiveBlending
+      shader.uniforms["tWindForce"].value      = @noiseMap
+      shader.uniforms[ "windMin" ].value       = new THREE.Vector2(-30,-30 )
+      shader.uniforms[ "windSize" ].value      = new THREE.Vector2( 60, 60 )
+      shader.uniforms[ "windDirection" ].value = @windDirection            
+
+      geom = new THREE.Geometry()
+      geom.vertices = []
+      num = 130
+      for k in [0...num] by 1
+
+          setting = {}
+
+          vert = new THREE.Vector3
+          vert.x = setting.startX = THREE.Math.randFloat(@dustSystemMinX,@dustSystemMaxX)
+          vert.y = setting.startY = THREE.Math.randFloat(@dustSystemMinY,@dustSystemMaxY)
+          vert.z = setting.startZ = THREE.Math.randFloat(@dustSystemMinZ,@dustSystemMaxZ)
+
+          setting.speed =  params.attributes.speed.value[k] = 1 + Math.random() * 10
+          
+          setting.sinX = Math.random()
+          setting.sinXR = if Math.random() < 0.5 then 1 else -1
+          setting.sinY = Math.random()
+          setting.sinYR = if Math.random() < 0.5 then 1 else -1
+          setting.sinZ = Math.random()
+          setting.sinZR = if Math.random() < 0.5 then 1 else -1
+
+          setting.rangeX = Math.random() * 5
+          setting.rangeY = Math.random() * 5
+          setting.rangeZ = Math.random() * 5
+
+          setting.vert = vert
+          geom.vertices.push vert
+          @dustSettings.push setting
+
+      particlesystem = new THREE.ParticleSystem( geom , mat )
+      @dustSystems.push particlesystem
+      @scene.add particlesystem
+```
+
+Here 130 particles of dust get created. And note that each of them gets equipped with a special __WindParticleShader__.
+
+Now, at each frame, we are going to move around the particles a little bit, using CoffeeScript, independently of wind. Here’s the code.
+
+```js
+moveDust:(delta)->
+
+  for setting in @dustSettings
+
+    vert = setting.vert
+    setting.sinX = setting.sinX + (( 0.002 * setting.speed) * setting.sinXR)
+    setting.sinY = setting.sinY + (( 0.002 * setting.speed) * setting.sinYR)
+    setting.sinZ = setting.sinZ + (( 0.002 * setting.speed) * setting.sinZR) 
+
+    vert.x = setting.startX + ( Math.sin(setting.sinX) * setting.rangeX )
+    vert.y = setting.startY + ( Math.sin(setting.sinY) * setting.rangeY )
+    vert.z = setting.startZ + ( Math.sin(setting.sinZ) * setting.rangeZ )
+```
+
+In addition to that we are going to offset each particle position according to wind. This is done in the WindParticleShader. Specifically in the vertex shader.
+
+The code for this shader is a modified version of Three.js __ParticleMaterial__, and this what the core of it looks like:
+
+```js
+vec4 mvPosition;
+vec4 wpos = modelMatrix * vec4( position, 1.0 );
+wpos.z = -wpos.z;
+vec2 totPos = wpos.xz - windMin;
+vec2 windUV = totPos / windSize;
+float vWindForce = texture2D(tWindForce,windUV).x;
+float windMod = (1.0 - vWindForce) * windScale;
+vec4 pos = vec4(position , 1.0);
+pos.x += windMod * windDirection.x;
+pos.y += windMod * windDirection.y;
+pos.z += windMod * windDirection.z;
+
+mvPosition = modelViewMatrix *  pos;
+
+fSpeed = speed;
+float fSize = size * (1.0 + sin(time * speed));
+
+#ifdef USE_SIZEATTENUATION
+    gl_PointSize = fSize * ( scale / length( mvPosition.xyz ) );
+#else,
+    gl_PointSize = fSize;
+#endif
+
+gl_Position = projectionMatrix * mvPosition;
+```
+
+This vertex shader is not that different from what we had for the wind based deformation of grass. It takes the Perlin noise texture as input, and depending on dust world position it looks up a __vWindForce__, value in the noise texture. Then, it uses this value to modify position of the dust particle.
+
+## Riders On The Storm
+
+The most adventurous of our WebGL scenes was probably the last scene, which you can see if you click your way through the balloon into the eye of the tornado to reach the end of your journey in the site, and exclusive video of the upcoming release.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9YvBXyTbTy8WgBWFZ0xd.jpg", alt="Balloon ride scene", width="800", height="449" %}
+  <figcaption></figcaption>
+</figure>
+
+When we created this scene we knew that we needed to have a central feature to the experience that would be impactful. The spinning tornado would act as the centerpiece and layers of other content would mold this feature in place to create a dramatic effect. To achieve this we built what would be the equivalent of a film studio set around this strange shader.
+
+We used a mixed approach to create the realistic composite. Some were visual tricks like light shapes to make a lens flare effect, or raindrops that animate as layers on top of the scene you are looking at. In other cases we had flat surfaces drawn to appear to move around, like the low flying clouds layers moving according to a particle system code. While the bits of debris orbiting around the tornado were layers of in a 3D scene sorted to move in front and behind the tornado.
+
+The main reason we had to build the scene in this way was to ensure we had enough GPU to handle the tornado shader in balance with the other effects that we were applying. Initially we had big GPU balancing issues but later this scene was optimised and became lighter than the main scenes.
+
+### Tutorial: The Storm Shader
+
+To create the final storm sequence many different techniques were combined, but the centerpiece of this work was a custom GLSL shader that looks like a tornado. We had tried many different techniques from vertex shaders to create interesting geometric whirlpools to particle based animations and even 3D animations of twisted geometric shapes. None of the effects seemed to recreate the feeling of a tornado or required too much in terms of processing. 
+
+A completely different project eventually provided us with the answer. A parallel project involving games for science to map out the brain of the mouse from the [Max Planck Institute (brainflight.org)](http://brainflight.org) had generated interesting visual effects. We had managed to create movies of the inside of a mouse neuron using a custom volumetric shader.
+
+ <figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GicIyi26gmxZO1vbvlfY.jpg", alt="Inside of a mouse neuron using a custom volumetric shader", width="800", height="500" %}
+<figcaption>Inside of a mouse neuron using a custom volumetric shader</figcaption>
+</figure>
+
+We found that the inside of a brain cell looked a bit like the funnel of a tornado. And since we were using a volumetric technique we knew we could view this shader from all directions in space. We could set the render of the shader to combine with the storm scene, particularly if sandwiched under layers of clouds and above a dramatic background.
+
+The shader technique involves a trick that basically uses a single GLSL shader to render a whole object with a simplified render algorithm called ray marching rendering with a distance field. In this technique a pixel shader is created which estimates the closest distance to a surface for each point on the screen.
+
+A good reference to the algorithm can be found in the overview by iq: [Rendering Worlds With Two Triangles - Iñigo Quilez](http://www.google.co.uk/url?sa=t&rct=j&q=rwwtt.pdf&source=web&cd=1&cad=rja&ved=0CDIQFjAA&url=http%3A%2F%2Fwww.iquilezles.org%2Fwww%2Fmaterial%2Fnvscene2008%2Frwwtt.pdf&ei=HioLUaKeM-XM0AWQpoCQCA&usg=AFQjCNGFnwulALMk-Krkpst-srqKcipcpA&bvm=bv.41867550,d.d2k). Also exploring the gallery of shaders on glsl.heroku.com, there are many examples of this technique to be found there that can be experimented with.
+
+The heart of the shader begins with the main function, it sets up the camera transforms and enters a loop which repeatedly evaluates the distance to a surface. The call RaytraceFoggy( direction_vector, max_iterations, color, color_multiplier ) is where the core ray marching calculation happens.
+
+```js
+for(int i=0;i < number_of_steps;i++) // run the ray marching loop
+{
+  old_d=d;
+  float shape_value=Shape(q); // find out the approximate distance to or density of the tornado cone
+  float density=-shape_value;
+  d=max(shape_value*step_scaling,0.0);// The max function clamps values smaller than 0 to 0
+
+  float step_dist=d+extra_step; // The point is advanced by larger steps outside the tornado,
+  //  allowing us to skip empty space quicker.
+
+  if (density>0.0) {  // When density is positive, we are inside the cloud
+    float brightness=exp(-0.6*density);  // Brightness decays exponentially inside the cloud
+
+    // This function combines density layers to create a translucent fog
+    FogStep(step_dist*0.2,clamp(density, 0.0,1.0)*vec3(1,1,1), vec3(1)*brightness, colour, multiplier); 
+  }
+  if(dist>max_dist || multiplier.x < 0.01) { return;  } // if we've gone too far stop, we are done
+  dist+=step_dist; // add a new step in distance
+  q=org+dist*dir; // trace its direction according to the ray casted
+}
+```
+
+The idea is that as we advance into the shape of the tornado we regularly add contributions of color to the final color value of the pixel, as well as contributions to the opacity along the ray. This creates a layered soft quality to the texture of the tornado.  
+
+The next core aspect of the tornado is the actual shape itself which is created by composing a number of functions. It is a cone to begin with, which is composed with noise to create an organic rough edge, and is subsequently twisted along its main axis and rotated in time.
+
+```js
+mat2 Spin(float angle){
+  return mat2(cos(angle),-sin(angle),sin(angle),cos(angle)); // a rotation matrix
+}
+
+// This takes noise function and makes ridges at the points where that function crosses zero
+float ridged(float f){ 
+  return 1.0-2.0*abs(f);
+}
+
+// the isosurface shape function, the surface is at o(q)=0 
+float Shape(vec3 q) 
+{
+    float t=time;
+
+    if(q.z < 0.0) return length(q);
+
+    vec3 spin_pos=vec3(Spin(t-sqrt(q.z))*q.xy,q.z-t*5.0); // spin the coordinates in time
+
+    float zcurve=pow(q.z,1.5)*0.03; // a density function dependent on z-depth
+
+    // the basic cloud of a cone is perturbed with a distortion that is dependent on its spin 
+    float v=length(q.xy)-1.5-zcurve-clamp(zcurve*0.2,0.1,1.0)*snoise(spin_pos*vec3(0.1,0.1,0.1))*5.0; 
+
+    // create ridges on the tornado
+    v=v-ridged(snoise(vec3(Spin(t*1.5+0.1*q.z)*q.xy,q.z-t*4.0)*0.3))*1.2; 
+
+    return v;
+}
+```
+
+The work involved in creating this sort of shader is tricky. Beyond the issues involved with the abstraction of the operations you are creating there are serious optimisation and cross platform compatibility problems that you need to trace and solve before you can use the work in production.
+
+The first part of the problem: optimising this shader for our scene. To deal with this we needed to have a “safe” approach in case the shader was going to be too heavy. To do this we composited the tornado shader at a different sampled resolution from the rest of the scene. This is from the file stormTest.coffee (yes, this was a test!).
+
+We start with a renderTarget that matches the scene width and height so we can have independence of resolution of tornado shader to scene. And then we decide the downsampling of resolution of the storm shader dynamically dependent on the frame rate we are getting.
+
+```js
+...
+Line 1383
+@tornadoRT = new THREE.WebGLRenderTarget( @SCENE_WIDTH, @SCENE_HEIGHT, paramsN )
+
+... 
+Line 1403 
+# Change settings based on FPS
+if @fpsCount > 0
+    if @fpsCur < 20
+        @tornadoSamples = Math.min( @tornadoSamples + 1, @MAX_SAMPLES )
+    if @fpsCur > 25
+        @tornadoSamples = Math.max( @tornadoSamples - 1, @MIN_SAMPLES )
+    @tornadoW = @SCENE_WIDTH  / @tornadoSamples // decide tornado resWt
+    @tornadoH = @SCENE_HEIGHT / @tornadoSamples // decide tornado resHt
+```
+
+Finally we render the tornado to screen using a simplified sal2x algorithm, (to avoid the blocky look) @line 1107 in stormTest.coffee. This means that worse case we end up having a more blurry tornado but at least it works without taking away control from the user. 
+
+The next optimisation step requires diving into the algorithm. The driving computational factor in the shader is the iteration that is performed on each pixel to try to approximate the distance of the surface function: the number of iterations of the raymarching loop. Using a larger step size we could get a tornado surface estimate with fewer iterations while we were outside its cloudy surface. When inside we would decrease the step size for precision and to be able to mix values to create the misty effect. Also creating a bounding cylinder to get a depth estimate for the casted ray gave good speed-up.
+
+The next part of the problem was to make sure this shader would run on different video cards. We did some testing each time and starting building up an intuition for the type of compatibility issues that we might run into. The reason we couldn’t do much better than intuition is that we could not always get good debugging information on the errors. A typical scenario is just a GPU error with little more to go on, or even a system crash!
+
+Cross video board compatibility issues had similar solutions: make sure static constants are entered of the precise data type as defined, IE: 0.0 for float and 0 for int. Take care when writing longer functions; it is preferable to break things up in multiple simpler functions and interim variables because the compilers seemed to not handle certain cases correctly. Make sure textures are all a power of 2, not too large and in any case exercising “caution” when looking up texture data in a loop.
+
+
+The biggest problems we had in compatibility were from the lighting effect for the storm. We used a premade texture wrapped around the tornado so we could color its wisps. It was a gorgeous effect, and made it easy to blend the tornado into the scene colors but took a long time to try to make run on other platforms.
+
+
+<!--<iframe class="webgl_example" src="/static/demos/oz/tutorials/tornado/index.html#embed" width="500" height="400"></iframe>-->
+ <figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/w05JRMlKtOPZIa5C8X2O.png", alt="tornado", width="800", height="661" %}
+</figure>
+
+## The Mobile Web Site
+
+The mobile experience couldn’t be a straight translation of the desktop version because the technology and processing requirements were just too heavy. We had to build something new, that targeted the mobile user specifically.
+
+We thought it would be cool to have the Carnival Photo-Booth from desktop as a mobile web application which would use the user’s mobile camera. Something we had not seen done so far.
+
+To add flavour, we coded 3D transformations in CSS3. Having linked it with gyroscope and accelerometer, we were able to add a lot of depth to the experience. The site responds to the way you hold, move and look at your phone.
+
+When writing this article, we thought it would be worth to give you some hints on how to run mobile development process smoothly. Here they go! Go ahead and see what you can learn from it!
+
+### Mobile tips and tricks
+
+Preloader is something that's needed, not something that should be avoided. We know, that sometimes the latter happens. This is mainly because you need to keep maintaining the list of things you preload as your project grows. What's worse, it's not very clear on how you should calculate the loading progress if you're pulling different resources, and many of them at the same time. This is where our custom and very generic abstract class 'Task' comes handy. Its main idea is to allow endlessly nested structure where a Task can have it's own sub-Tasks, which can have their etc… Furthermore, each task computes its progress with respect to its sub-tasks' progress (but not to parent's progress). Making all the MainPreloadTask, AssetPreloadTask and TemplatePreFetchTask derive from Task, we created a structure that looks like this:
+    
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xoXwz0dk8WHHYcOf7a1y.png", alt="Preloader", width="800", height="744" %}
+</figure>
+
+Thanks to such approach and the Task class, we can easily know the global progress (MainPreloadTask), or just progress of assets (AssetPreloadTask), or progress of loading templates (TemplatePreFetchTask). Even progress of a particular file. To see how it is done, have a look at the Task class at /m/javascripts/raw/util/Task.js and the actual task implementations at [/m/javascripts/preloading/task](http://findyourwaytooz.com/m/javascripts/preloading/task.js).
+As an example, this is an extract from how we set up the [/m/javascripts/preloading/task/MainPreloadTask.js](http://www.findyourwaytooz.com/m/javascripts/raw/preloading/task/MainPreloadTask.js) class which is our ultimate preloading wrapper:
+
+```js
+Package('preloading.task', [
+  Import('util.Task'),
+...
+
+  Class('public MainPreloadTask extends Task', {
+
+    _public: {
+      
+  MainPreloadTask : function() {
+        
+    var subtasks = [
+      new AssetPreloadTask([
+        {name: 'cutout/cutout-overlay-1', ext: 'png', type: ImagePreloader.TYPE_BACKGROUND, responsive: true},
+        {name: 'journey/scene1', ext: 'jpg', type: ImagePreloader.TYPE_IMG, responsive: false}, ...
+...
+      ]),
+
+      new TemplatePreFetchTask([
+        'page.HomePage',
+        'page.CutoutPage',
+        'page.JourneyToOzPage1', ...
+...
+      ])
+    ];
+    
+    this._super(subtasks);
+
+      }
+    }
+  })
+]);
+```
+
+In the /m/javascripts/preloading/task/subtask/AssetPreloadTask.js class, besides noting how it communicates with the MainPreloadTask (via the shared Task implementation), it's also worth noting how we load assets that are platform dependent. Basically, we have four types of images. Mobile standard (.ext, where ext is file extension, typically .png or .jpg), mobile retina (-2x.ext), tablet standard (-tab.ext) and tablet retina (-tab-2x.ext). Instead of doing the detection in the MainPreloadTask and hardcoding four asset arrays, we just say what is the name and extension of the asset to preload and if the asset is platform dependent (responsive = true / false). Then, the AssetPreloadTask will generate the file name for us:
+
+```js
+resolveAssetUrl : function(assetName, extension, responsive) {
+  return AssetPreloadTask.ASSETS_ROOT + assetName + (responsive === true ? ((Detection.getInstance().tablet ? '-tab' : '') + (Detection.getInstance().retina ? '-2x' : '')) : '') + '.' +  extension;
+}
+```
+
+Further down the classes chain, the actual code that does the asset preloading looks as follows ([/m/javascripts/raw/util/ImagePreloader.js](http://findyourwaytooz.com/m/javascripts/raw/util/ImagePreloader.js)):
+
+```js
+loadUrl : function(url, type, completeHandler) {
+  if(type === ImagePreloader.TYPE_BACKGROUND) {
+    var $bg = $('<div>').hide().css('background-image', 'url(' + url + ')');
+    this.$preloadContainer.append($bg);
+  } else {
+    var $img= $('<img />').attr('src', url).hide();
+    this.$preloadContainer.append($img);
+  }
+
+  var image = new Image();
+  this.cache[this.generateKey(url)] = image;
+  image.onload = completeHandler;
+  image.src = url;
+}
+
+generateKey : function(url) {
+  return encodeURIComponent(url);
+}
+```
+
+### Tutorial: HTML5 Photo Booth (iOS6/Android)
+
+When developing OZ mobile, we found out we spend a lot of time actually playing with the photo booth instead of working :D That was simply because it's fun. So we made a demo for you to play with.
+
+ <figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/df2sln1aIztPyVGAFfm7.jpg", alt="Mobile photo booth", width="800", height="355" %}
+  <figcaption>Mobile photo booth</figcaption>
+</figure>
+
+You can see a live demo here (run it on your iPhone or Android phone):
+
+[http://u9html5rocks.appspot.com/demos/mobile_photo_booth](http://u9html5rocks.appspot.com/demos/mobile_photo_booth)
+
+To set it up, you need a free [Google App Engine](https://developers.google.com/appengine/) application instance where you can run the backend.  The front end code is not complex but there are a couple of possible gotchas. Let's go through them now:
+
+1. **Allowed Image file type**
+    We want people to be able to upload images only (as it's a photo booth, not video booth). In theory, you can just specify the filter in HTML, as follow:
+   `input id="fileInput" class="fileInput" type="file" name="file" accept="image/*" ` However that seems to work on iOS only, so we need to add an additional check against the RegExp once a file has been selected: 
+   ```js
+   this.$fileInput.fileupload({
+          
+   dataType: 'json',
+   autoUpload : true,
+   
+   add : function(e, data) {
+     if(!data.files[0].name.match(/(\.|\/)(gif|jpe?g|png)$/i)) {
+      return self.onFileTypeNotSupported();
+     }
+   }
+   });
+  ```
+1. **Canceling an upload or file selection**
+    Another inconsistency that we noticed during the development process is how different devices notify a canceled file selection. iOS phones and tablets do nothing, they don’t notify at all. So we don't need any special action for this case, however, Android phones trigger the add() function anyway, even if no file is selected. Here's how to cater for this:
+    ```js
+    add : function(e, data) {
+
+    if(data.files.length === 0 || (data.files[0].size === 0 && data.files[0].name === "" && data.files[0].fileName === "")) {
+            
+    return self.onNoFileSelected();
+
+    } else if(data.files.length > 1) {
+
+    return self.onMultipleFilesSelected();            
+    }
+    }
+    ```
+    The rest works rather smooth across platforms. Have fun!
+
+
+## Conclusion
+Given the massive size of Find Your Way To Oz, and the wide mix of different technologies involved, in this article we were able to cover only a few of the approaches that we used.
+
+If you are curious to explore the whole enchilada, feel free to peek around the full source code of [Find Your Way To Oz at this link](https://code.google.com/p/oz-experiment/).
+
+## Credits
+[Click here](http://findyourwaytooz.com/credits.html) for the full credits list
+
+## References
+
+- CoffeeScript - [http://coffeescript.org/](http://coffeescript.org/)
+- Backbone.js - [http://backbonejs.org/](http://backbonejs.org/)
+- Three.js - [http://mrdoob.github.com/three.js/](http://mrdoob.github.com/three.js/)
+- Max Planck Institute (brainflight.org) - [http://brainflight.org/](http://brainflight.org)
diff --git a/src/site/content/en/blog/pagevisibility-intro/index.md b/src/site/content/en/blog/pagevisibility-intro/index.md
new file mode 100644
index 00000000000..2878a90fb92
--- /dev/null
+++ b/src/site/content/en/blog/pagevisibility-intro/index.md
@@ -0,0 +1,119 @@
+---
+layout: post
+title: Using the Page Visibility API
+authors:
+  - ernestd
+date: 2010-02-24
+tags:
+  - blog
+---
+
+## Introduction
+
+As Web developers, we tend to get excited by new technologies that enable us to create ever more engaging, interactive Web pages. 3D graphics with WebGL? Absolutely. Advanced audio capabilities with WebAudio? Sure thing. Real-time collaboration applications using the Web camera and microphone? Sign me up!
+
+Less exciting, though equally important, are the technologies that allow us to build applications that run more efficiently and provide a better overall user experience. This is where an API like PageVisibility comes in.
+
+The [Page Visibility API](http://www.w3.org/TR/page-visibility/) performs a simple but important function – it lets your application know when a page is visible to the user. This basic piece of information enables the creation of Web pages that behave differently when they are not being viewed. Consider a few examples:
+
+- A Web page that retrieves information from a server can slow down its update cycle when not being actively viewed
+- A page that displays a rotating image carousel or video/audio content can pause until the user displays the page again
+- An application can decide to display notifications to the user only when it is hidden from view
+
+At first, this API may not seem very useful beyond user convenience, but considering the huge increase in mobile Web browsing, anything that helps save the device's battery power becomes very important. By using the PageVisibility API, your site can help the user's device consume less power and last longer.
+
+{% BrowserCompat 'api.Document.visibilityState' %}
+
+The API specification, which as of this writing is in the Candidate Recommendation stage, provides both properties for detecting the document's visibility state as well as an event for responding to visibility changes.
+
+In this tutorial, I'll cover the basics of the API and show how to apply it to some practical examples (feel free to skip ahead to them if you're the impatient type).
+
+## Document Visibility Properties
+
+The [current version of the PageVisibilityAPI spec](http://www.w3.org/TR/page-visibility/) defines two document properties: the boolean [`hidden`](http://www.w3.org/TR/page-visibility/#pv-hidden) and the enumeration [`visibilityState`](http://www.w3.org/TR/page-visibility/#pv-visibility-state). The visibilityState property currently has four possible values: `hidden`, `visible`, `prerender`, and `unloaded`.
+
+{% Aside %}
+These properties are only vendor-prefixed in Android Browser, where you’ll need to use prefixed versions such as `webkitHidden` and `webkitVisibilityState`. [All other supporting browsers](http://caniuse.com/#feat=pagevisibility) (IE 10+, Firefox, Chrome, Safari) implement the un-prefixed versions.
+{% endAside %}
+
+As you might expect, the hidden attribute returns true when the document is not visible at all. Typically, this means that the document is either minimized, on a background tab, the OS's lock screen is up, etc. The attribute is set to false if any part of the document is at least partially visible on at least one display. In addition, to accommodate accessibility tools, the hidden attribute can be set to false when a tool such as a screen magnifier completely obscures the document, but is showing a view of it.
+
+### Dealing with vendor prefixes
+
+To keep the focus on the code instead of all the vendor-specific prefixing, I’m going to use some helper functions to isolate the browser-specifics.  As soon as you drop support for Android 4.4 Browser you can remove this part and stick to the standard names.
+
+```js
+function getHiddenProp(){
+    var prefixes = ['webkit','moz','ms','o'];
+
+    // if 'hidden' is natively supported just return it
+    if ('hidden' in document) return 'hidden';
+
+    // otherwise loop over all the known prefixes until we find one
+    for (var i = 0; i < prefixes.length; i++){
+        if ((prefixes[i] + 'Hidden') in document)
+            return prefixes[i] + 'Hidden';
+    }
+
+    // otherwise it's not supported
+    return null;
+}
+```
+
+### Document Properties Example
+
+Now we can write a cross-browser function, `isHidden()`, to see if the document is visible.
+
+```js
+function isHidden() {
+    var prop = getHiddenProp();
+    if (!prop) return false;
+
+    return document[prop];
+}
+```
+
+For a more granular view of the document's visibility, you can use the visibilityState property. This property returns one of four values:
+
+- `hidden`: the document is completely hidden from view
+- `visible`: the document is at least partially visible on at least one display device
+- `prerender`: the document is loaded off-screen and not visible (this value is optional; [not all browsers will necessarily support it](https://developers.google.com/chrome/whitepapers/prerender))
+- `unloaded`: if the document is to be unloaded, then this value will be returned (this value is optional; not all browsers will necessarily support it)
+
+## The VisibilityChange Event
+
+In addition to the visibility properties, there is a visibilitychange event that fires whenever the document's visibility state changes. You can register an event listener for this event directly on the document object:
+
+### Event Example
+
+```js
+// use the property name to generate the prefixed event name
+var visProp = getHiddenProp();
+if (visProp) {
+  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
+  document.addEventListener(evtname, visChange);
+}
+
+function visChange() {
+   var txtFld = document.getElementById('visChangeText');
+
+   if (txtFld) {
+      if (isHidden())
+         txtFld.value += "Tab Hidden!\n";
+      else
+         txtFld.value += "Tab Visible!\n";
+   }
+}
+```
+
+## Summary
+
+Building a great Web application involves far more than just using the whiz-bang, eye catching features that users can see and interact with. A truly great application makes considerate use of the user's resources and attention, and the Page Visibility API is an important piece of that puzzle. To learn more about building resource-conscious Web applications, check out our [other performance-related articles](http://www.html5rocks.com/features/performance).
+
+## External References
+
+- [W3C PageVisibility API Spec](http://www.w3.org/TR/page-visibility/)
+- [Web Performance Working Group](http://www.w3.org/2010/webperf/)
+- [PageVisibility example in IE10](http://ie.microsoft.com/testdrive/Performance/PageVisibility/Default.html)
+- [Visibility.js - a polyfill for PageVisibility](http://thechangelog.com/post/29416591924/visibility-js-a-wrapper-for-the-page-visibility-api)
+- [isVis - another PageVisibility polyfill](http://coderwall.com/p/zuydwa)
diff --git a/src/site/content/en/blog/payment-and-address-form-best-practices/index.md b/src/site/content/en/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..85e3ff15e7c
--- /dev/null
+++ b/src/site/content/en/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,789 @@
+---
+title: Payment and address form best practices
+subhead: Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2021-11-30
+description: Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: Businessman using a payment card to make a payment on a laptop computer.
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+Well-designed forms help users and increase conversion rates. One small fix can make a big difference!
+
+{% Aside 'codelab' %}
+If you prefer to learn these best practices with a hands-on tutorial, check out the two codelabs
+for this post:
+
+* [Payment form best practices codelab](/codelab-payment-form-best-practices)
+* [Address form best practices codelab](/codelab-address-form-best-practices)
+{% endAside %}
+
+Here is an example of a simple payment form that demonstrates all of the best practices:
+
+{% Glitch {
+  id: 'payment-form',
+  path: 'index.html',
+  height: 720
+} %}
+
+Here is an example of a simple address form that demonstrates all of the best practices:
+
+{% Glitch {
+  id: 'address-form',
+  path: 'index.html',
+  height: 980
+} %}
+
+## Checklist
+
+* [Use meaningful HTML elements](#meaningful-html): `<form>`, `<input>`, `<label>`, and `<button>`.
+* [Label each form field with a `<label>`](#html-label).
+* Use HTML element attributes to [access built-in browser features](#html-attributes), in particular
+[`type`](#type-attribute) and [`autocomplete`](#autocomplete-attribute) with appropriate values.
+* Avoid using `type="number"` for numbers that aren't meant to be
+incremented, such as payment card numbers. Use `type="text"` and [`inputmode="numeric"`](#inputmode-attribute) instead.
+* If an [appropriate autocomplete value](#autocomplete-attribute) is available for an `input`,
+`select`, or `textarea`, you should use it.
+* To help browsers autofill forms, give input `name` and `id` attributes [stable values](#stable-name-id)
+that don't change between page loads or website deployments.
+* [Disable submit buttons](#disable-submit) once they've been tapped or clicked.
+* [Validate](#validate) data during entry—not just on form submission.
+* Make [guest checkout](#guest-checkout) the default and make account creation simple once checkout
+is complete.
+* Show [progress through the checkout process](#checkout-progress) in clear steps with clear calls
+to action.
+* [Limit potential checkout exit points](#reduce-checkout-exits) by removing clutter and distractions.
+* [Show full order details](#checkout-details) at checkout and make order adjustments easy.
+* [Don't ask for data you don't need](#unneeded-data).
+* [Ask for names with a single input](#single-name-input) unless you have a good reason not to.
+* [Don't enforce Latin-only characters](#unicode-matching) for names and usernames.
+* [Allow for a variety of address formats](#address-variety).
+* Consider using a [single `textarea` for address](#address-textarea).
+* Use [autocomplete for billing address](#billing-address).
+* [Internationalize and localize](#internationalization-localization) where necessary.
+* Consider avoiding [postal code address lookup](#postal-code-address-lookup).
+* Use [appropriate payment card autocomplete values](#payment-form-autocomplete).
+* Use a [single input for payment card numbers](#single-number-input).
+* [Avoid using custom elements](#avoid-custom-elements) if they break the autofill experience.
+* [Test in the field as well as the lab](#analytics-rum): page analytics, interaction analytics, and
+real-user performance measurement.
+* [Test on a range of browsers, devices, and platforms](#test-platforms).
+
+{% Aside %}
+This article is about frontend best practices for address and payment forms. It does not explain
+how to implement transactions on your site. To find out more about adding payment functionality to your
+website, see [Web Payments](/payments).
+{% endAside %}
+
+## Use meaningful HTML {: #meaningful-html}
+
+Use the elements and attributes built for the job:
+* `<form>`, `<input>`, `<label>`, and `<button>`
+* `type`, `autocomplete`, and `inputmode`
+
+These enable built-in browser functionality, improve accessibility, and add meaning to your markup.
+
+### Use HTML elements as intended {: #html-elements}
+
+#### Put your form in a &lt;form&gt; {: #html-form}
+
+You might be tempted not to bother wrapping your `<input>` elements in a `<form>`, and to handle data
+  submission purely with JavaScript.
+
+Don't do it!
+
+An HTML `<form>` gives you access to a powerful set of built-in features across all modern browsers,
+  and can help make your site accessible to screen readers and other assistive devices. A `<form>`
+  also makes it simpler to build basic functionality for older browsers with limited JavaScript
+  support, and to enable form submission even if there's a glitch with your code—and for the
+  small number of users who actually disable JavaScript.
+
+If you have more than one page component for user input, make sure to put each in its own `<form>`
+  element. For example, if you have search and sign-up on the same page, put each in its own `<form>`.
+
+#### Use `<label>` to label elements {: #html-label}
+
+To label an `<input>`, `<select>`, or `<textarea>`, use a [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+
+Associate a label with an input by giving the label's `for` attribute the same value as
+the input's `id`.
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+Use a single label for a single input: don't try to label multiple inputs with only one label. This
+works best for browsers, and best for screenreaders. A tap or click on a label moves focus to the input
+it's associated with, and screenreaders announce label text when the *label* or the label's *input*
+gets focus.
+
+{% Aside 'caution' %}
+Don't use [placeholders](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)
+on their own instead of labels. Once you start entering text in an input, the
+placeholder is hidden, so it can be easy to forget what the input is for. The same is true if
+you use the placeholder to show the correct format for values such as dates. This can be especially
+problematic for users on phones, particularly if they're distracted or feeling stressed!
+{% endAside %}
+
+#### Make buttons helpful {: #html-button}
+
+Use [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)
+for buttons! You can also use `<input type="submit">`, but don't use a `div` or some
+other random element acting as a button. Button elements provide accessible behaviour, built-in
+form submission functionality, and can easily be styled.
+
+Give each form submit button a value that says what it does. For each step towards checkout, use
+a descriptive call-to-action that shows progress and makes the next step obvious. For example, label
+the submit button on your delivery address form **Proceed to Payment** rather than **Continue**
+or **Save**.
+
+{: #disable-submit}
+
+Consider disabling a submit button once the user has tapped or clicked it—especially when the user is
+making a payment or placing an order. Many users click buttons repeatedly, even if they're working fine.
+That can mess up checkout and add to server load.
+
+On the other hand, don't disable a submit button waiting on complete and valid user input. For
+example, don't just leave a **Save Address** button disabled because something is missing or invalid.
+That doesn't help the user—they may continue to tap or click the button and assume that it's broken.
+Instead, if users attempt to submit a form with invalid data, explain to them what's gone wrong
+and what to do to fix it. This is particularly important on mobile, where data entry is more
+difficult and missing or invalid form data may not be visible on the user's screen by the time they
+attempt to submit a form.
+
+{% Aside 'caution' %}
+The default type for a button in a form is `submit`. If you want to add another button in a form
+(for **Show password**, for example) add `type="button"`. Otherwise clicking or tapping on the
+button will submit the form.
+
+Pressing the `Enter` key while any form field has focus simulates a click on the first `submit`
+button in the form. If you include a button in your form before the **Submit** button, and don't
+specify the type, that button will have the default type for buttons in a form (`submit`) and
+receive the click event before the form is submitted. For an example of this, see our
+[demo](https://enter-button.glitch.me/): fill in the form, then press `Enter`.
+{% endAside %}
+
+### Make the most of HTML attributes {: #html-attributes}
+
+#### Make it easy for users to enter data
+
+{: #type-attribute}
+
+Use the appropriate input [`type` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)
+to provide the right keyboard on mobile and enable basic built-in validation by the browser.
+
+For example, use `type="email"` for email addresses and `type="tel"` for phone numbers.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="Two screenshots of
+  Android phones, showing a keyboard appropriate for entering an email address (using type=email)
+  and for entering a telephone number (with type=tel).", width="800", height="683" %}
+  <figcaption>Keyboards appropriate for email and telephone.</figcaption>
+</figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %}
+Using type="number" adds an up/down arrow to increment numbers, which makes no sense for data such
+as telephone, payment card or account numbers.
+
+For numbers like these, set `type="text"` (or leave off the attribute, since `text` is the default).
+For telephone numbers, use `type="tel"` to get the appropriate keyboard on mobile. For other numbers
+use `inputmode="numeric"` to get a numeric keyboard on mobile.
+
+Some sites still use `type="tel"` for payment card numbers to ensure that mobile users get the right
+keyboard. However, `inputmode` is [very widely supported now](https://caniuse.com/input-inputmode),
+so you shouldn't have to do that—but do check your users' browsers.
+{% endAside %}
+
+{: #avoid-custom-elements}
+
+For dates, try to avoid using custom `select` elements. They break the autofill experience if not
+properly implemented and don't work on older browsers. For numbers such as birth year, consider
+using an `input` element rather than a `select`, since entering digits manually can be easier and less
+error prone than selecting from a long drop-down list—especially on mobile. Use `inputmode="numeric"`
+to ensure the right keyboard on mobile and add validation and format hints with text or a
+placeholder to make sure the user enters data in the appropriate format.
+
+{% Aside %}
+The [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) element enables
+a user to select from a list of available options and provides matching suggestions as the user enters text.
+Try out `datalist` for `text`, `range` and `color` inputs at [simpl.info/datalist](https://simpl.info/datalist).
+For birth year input, you can compare a `select` with an `input` and `datalist` at [datalist-select.glitch.me](https://datalist-select.glitch.me).
+{% endAside %}
+
+#### Use autocomplete to improve accessibility and help users avoid re-entering data {: #autocomplete-attribute}
+
+Using appropriate `autocomplete` values enables browsers to help users by securely storing data and
+autofilling `input`, `select`, and `textarea` values. This is particularly important on mobile, and
+crucial for avoiding [high form abandonment rates](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data). Autocomplete also provides [multiple accessibility benefits](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html).
+
+If an appropriate autocomplete value is available for a form field, you should use it. [MDN web docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) has a full list of values and explanations of how to use
+them correctly.
+
+{: #stable-name-id}
+
+{% Aside %}
+As well as using appropriate autocomplete values, help browsers autofill forms by giving form fields
+`name` and `id` attributes [stable values](#stable-name-id) that don't change between page loads or
+website deployments.
+{% endAside %}
+
+{: #billing-address}
+
+By default, set the billing address to be the same as the delivery address. Reduce visual clutter by
+providing a link to edit the billing address (or use [`summary` and `details` elements](https://simpl.info/details/))
+rather than displaying the billing address in a form.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="Example checkout page showing link to change billing address.", width="800", height="250" %}
+  <figcaption>Add a link to review billing.</figcaption>
+</figure>
+
+Use appropriate autocomplete values for the billing address, just as you do for shipping address,
+so the user doesn't have to enter data more than once. Add a prefix word to autocomplete
+attributes if you have different values for inputs with the same name in different sections.
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### Help users enter the right data {: #validation}
+
+Try to avoid "telling off" customers because they "did something wrong". Instead, help users complete
+forms more quickly and easily by helping them fix problems as they happen. Through the checkout process,
+customers are trying to give your company money for a product or service—your job is to assist them,
+not to punish them!
+
+You can add [constraint attributes](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints) to form elements to specify acceptable
+values, including `min`, `max`, and `pattern`. The [validity state](https://developer.mozilla.org/docs/Web/API/ValidityState)
+of the element is set automatically depending on whether the element's value is valid, as are the
+`:valid` and `:invalid` CSS pseudo-classes which can be used to style elements with valid or invalid
+values.
+
+For example, the following HTML specifies input for a birth year between
+1900 and 2020. Using `type="number"` constrains input values to numbers only, within the range
+specified by `min` and `max`. If you attempt to enter a number outside the range, the input will be
+set to have an invalid state.
+
+{% Glitch {
+  id: 'constraints',
+  path: 'index.html',
+  height: 170
+} %}
+
+The following example uses `pattern="[\d ]{10,30}"` to ensure a valid payment card number, while
+allowing spaces:
+
+{% Glitch {
+  id: 'payment-card-input',
+  path: 'index.html',
+  height: 170
+} %}
+
+Modern browsers also do basic validation for inputs with type `email` or `url`.
+
+{% Glitch {
+  id: 'type-validation',
+  path: 'index.html',
+  height: 250
+} %}
+
+{% Aside %}
+Add the `multiple` attribute to an input with `type="email"` to enable built-in validation for
+multiple comma-separated email addresses in a single input.
+{% endAside %}
+
+On form submission, browsers automatically set focus on fields with problematic or missing required
+values. No JavaScript required!
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value.", width="500", height="483" %}
+  <figcaption>Basic built-in validation by the browser.</figcaption>
+</figure>
+
+Validate inline and provide feedback to the user as they enter data, rather than providing a list of
+errors when they click the submit button. If you need to validate data on your server after form
+submission, list all problems that are found and clearly highlight all form fields with invalid
+values, as well as displaying a message inline next to each problematic field explaining what needs
+to be fixed. Check server logs and analytics data for common errors—you may need to redesign your form.
+
+You should also use JavaScript to do more robust validation while users are entering data and
+on form submission. Use the [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints)
+(which is [widely supported](https://caniuse.com/#feat=constraint-validation)) to add custom
+validation using built-in browser UI to set focus and display prompts.
+
+Find out more in [Use JavaScript for more complex real-time validation](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+{% Aside 'warning' %}
+Even with client-side validation and data input constraints, you must still ensure that your
+back-end securely handles input and output of data from users. Never trust user input: it could be
+malicious. Find out more in [OWASP Input Validation Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html).
+{% endAside %}
+
+#### Help users avoid missing required data {: #required}
+
+Use the [`required` attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)
+on inputs for mandatory values.
+
+When a form is submitted [modern browsers](https://caniuse.com/mdn-api_htmlinputelement_required)
+automatically prompt and set focus on `required` fields with missing data, and you can use the
+[`:required` pseudo-class](https://caniuse.com/?search=required) to highlight required fields. No
+JavaScript required!
+
+Add an asterisk to the label for every required field, and add a note at the start of the form to
+explain what the asterisk means.
+
+## Simplify checkout {: #checkout-forms}
+
+### Mind the mobile commerce gap! {: #m-commerce-gap}
+
+Imagine that your users have a *fatigue budget*. Use it up, and your users will leave.
+
+You need to reduce friction and maintain focus, especially on mobile. Many sites get more *traffic*
+on mobile but more *conversions* on desktop—a phenomenon known as the [mobile commerce gap](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). Customers may simply prefer to
+complete a purchase on desktop, but lower mobile conversion rates are also a result of poor user
+experience. Your job is to *minimize* lost conversions on mobile and *maximize* conversions
+on desktop. [Research has shown](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs) that there's a huge opportunity to provide a better mobile form experience.
+
+Most of all, users are more likely to abandon forms that look long, that are complex, and without a sense of
+direction. This is especially true when users are on smaller screens, distracted, or in a rush. Ask for as
+little data as possible.
+
+### Make guest checkout the default {: #guest-checkout}
+
+For an online store, the simplest way to reduce form friction is to make guest checkout the default.
+Don't force users to create an account before making a purchase. Not allowing guest checkout is cited
+as a major reason for shopping cart abandonment.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="Reasons for shopping cart abandonment during checkout.", width="800", height="503" %}
+  <figcaption>From <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a></figcaption>
+</figure>
+
+You can offer account sign-up after checkout.  At that point, you already have most of the data you
+need to set up an account, so account creation should be quick and easy for the user.
+
+{% Aside 'gotchas' %}
+If you do offer sign-up after checkout, make sure that the purchase the user just made is linked to
+their newly created account!
+{% endAside %}
+
+### Show checkout progress  {: #checkout-progress}
+
+You can make your checkout process feel less complex by showing progress and making it clear what
+needs to be done next. The video below shows how UK retailer [johnlewis.com](https://www.johnlewis.com)
+achieves this.
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %}
+  <figcaption>Show checkout progress.</figcaption>
+</figure>
+
+You need to maintain momentum! For each step towards payment, use page headings and descriptive
+button values that make it clear what needs to be done now, and what checkout step is next.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </video>
+  <figcaption>Give form buttons meaningful names that show what's next.</figcaption>
+</figure>
+
+Use the `enterkeyhint` attribute on form inputs to set the mobile keyboard enter key label. For
+example, use `enterkeyhint="previous"` and `enterkeyhint="next"` within a multi-page form,
+`enterkeyhint="done"` for the final input in the form, and `enterkeyhint="search"` for a search
+input.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Two screenshots of an address form on Android showing how the enterkeyhint input attribute changes the enter key button icon.", width="800", height="684" %}
+  <figcaption>Enter key buttons on Android: 'next' and 'done'.</figcaption>
+</figure>
+
+The `enterkeyhint` attribute is [supported on Android and iOS](https://caniuse.com/mdn-html_global_attributes_enterkeyhint).
+You can find out more from the [enterkeyhint explainer](https://github.com/dtapuska/enterkeyhint).
+
+{: #checkout-details}
+
+Make it easy for users to go back and forth within the checkout process, to easily adjust
+their order, even when they're at the final payment step. Show full details of the order, not just
+a limited summary. Enable users to easily adjust item quantities from the payment page. Your priority at checkout is to
+avoid interrupting progress towards conversion.
+
+### Remove distractions {: #reduce-checkout-exits}
+
+Limit potential exit points by removing visual clutter and distractions such as product promotions.
+Many successful retailers even remove navigation and search from checkout.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="Two screenshots on mobile showing progress through johnlewis.com checkout. Search, navigation and other distractions are removed.", width="800", height="683" %}
+  <figcaption>Search, navigation and other distractions removed for checkout.</figcaption>
+</figure>
+
+Keep the journey focused. This is not the time to tempt users to do something else!
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="Screenshot of checkout page on mobile showing distracting promotion for FREE STICKERS.", width="350", height="735" %}
+  <figcaption>Don't distract customers from completing their purchase.</figcaption>
+</figure>
+
+For returning users you can simplify the checkout flow even more, by hiding data they don't need to
+see. For example: display the delivery address in plain text (not in a form) and allow users to
+change it via a link.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="Screenshot of 'Review order' section of checkout page, showing text in plain text, with links to change delivery address, payment method and billing address, which are not displayed.", width="450", height="219" %}
+  <figcaption>Hide data customers don't need to see.</figcaption>
+</figure>
+
+## Make it easy to enter name and address {: #address-forms}
+
+### Only ask for the data you need {: #unneeded-data}
+
+Before you start coding your name and address forms, make sure to understand what data is required.
+Don't ask for data you don't need! The simplest way to reduce form complexity is to remove unnecessary
+fields. That's also good for customer privacy and can reduce back-end data cost and liability.
+
+### Use a single name input {: #single-name-input}
+
+Allow your users to enter their name using a single input, unless you have a good reason for
+separately storing given names, family names, honorifics, or other name parts. Using a single name
+input makes forms less complex, enables cut-and-paste, and makes autofill simpler.
+
+In particular, unless you have good reason not to, don't bother adding a separate input for a
+prefix or title (like Mrs, Dr or Lord). Users can type that in with their name if they want to. Also,
+`honorific-prefix` autocomplete currently doesn't work in most browsers, and so adding a field for
+name prefix or title will break the address form autofill experience for most users.
+
+### Enable name autofill
+
+Use `name` for a full name:
+
+```html
+<input autocomplete="name" ...>
+```
+
+If you really do have a good reason to split out name parts, make sure to use appropriate
+autocomplete values:
+
+* `honorific-prefix`
+* `given-name`
+* `nickname`
+* `additional-name-initial`
+* `additional-name`
+* `family-name`
+* `honorific-suffix`
+
+### Allow international names {: #unicode-matching}
+
+You might want to validate your name inputs, or restrict the characters allowed for name data. However,
+you need to be as unrestrictive as possible with alphabets. It's rude to be told your name is "invalid"!
+
+For validation, avoid using regular expressions that only match Latin characters. Latin-only excludes
+users with names or addresses that include characters that aren't in the Latin alphabet. Allow Unicode
+letter matching instead—and ensure your back-end supports Unicode securely as both input and output.
+Unicode in regular expressions is well supported by modern browsers.
+
+{% Compare 'worse' %}
+```html
+<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
+<input pattern="[\w \-]+" ...>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<!-- Accepts Unicode letters. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+{% endCompare %}
+
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </video>
+  <figcaption>Unicode letter matching compared to Latin-only letter matching.</figcaption>
+</figure>
+
+{% Aside %}
+You can find out more about [internationalization and localization](#internationalization-localization)
+below, but make sure your forms work for names in all regions where you have users. For example,
+for Japanese names you should consider having a field for phonetic names. This helps customer
+support staff say the customer's name on the phone.
+{% endAside %}
+
+### Allow for a variety of address formats {: #address-variety}
+
+When you're designing an address form, bear in mind the bewildering variety of address formats,
+even within a single country. Be careful not to make assumptions about "normal" addresses. (Take a
+look at [UK Address Oddities!](http://www.paulplowman.com/stuff/uk-address-oddities/) if you're not
+convinced!)
+
+#### Make address forms flexible {:flexible-address}
+
+Don't force users to try to squeeze their address into form fields that don't fit.
+
+For example, don't insist on a house number and street name in separate inputs, since many addresses
+don't use that format, and incomplete data can break browser autofill.
+
+Be especially careful with `required` address fields. For example, addresses in large cities in the
+UK do not have a county, but many sites still force users to enter one.
+
+Using two flexible address lines can work well enough for a variety of address formats.
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Add labels to match:
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+You can try this out by remixing and editing the demo embedded below.
+
+{% Aside 'caution' %}
+Research shows that [**Address line 2** may be problematic for users](https://baymard.com/blog/address-line-2).
+Bear this in mind when designing address forms—you should consider alternatives such as using a
+single `textarea` (see below) or other options.
+{% endAside %}
+
+
+#### Consider using a single textarea for address {: #address-textarea}
+
+The most flexible option for addresses is to provide a single `textarea`.
+
+The `textarea` approach fits any address format, and it's great for cutting and pasting—but bear in
+mind that it may not fit your data requirements, and users may miss out on autofill if they previously
+only used forms with `address-line1` and `address-line2`.
+
+For a textarea, use `street-address` as the autocomplete value.
+
+Here is an example of a form that demonstrates the use of a single `textarea` for address:
+
+{% Glitch {
+  id: 'address-form',
+  path: 'index.html',
+  height: 980
+} %}
+
+#### Internationalize and localize your address forms {: #internationalization-localization}
+
+It's especially important for address forms to consider [internationalization and localization](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/), depending
+on where your users are located.
+
+Be aware that the naming of address parts varies as well as address formats, even within the same
+language.
+
+```text
+    ZIP code: US
+ Postal code: Canada
+    Postcode: UK
+     Eircode: Ireland
+         PIN: India
+```
+
+It can be irritating or puzzling to be presented with a form that doesn't fit your address or that
+doesn't use the words you expect.
+
+Customizing address forms [for multiple locales](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region) may be necessary for your site, but using techniques
+to maximize form flexibility (as described above) may be adequate. If you don't localize your address
+forms, make sure to understand the key priorities to cope with a range of address formats:
+* Avoid being over-specific about address parts, such as insisting on a street name or house number.
+* Where possible avoid making fields `required`. For example, addresses in many countries don't
+have a postal code, and rural addresses may not have a street or road name.
+* Use inclusive naming: 'Country/region' not 'Country'; 'ZIP/postal code' not 'ZIP'.
+
+Keep it flexible! The [simple address form example above](#address-textarea) can be adapted to work
+'well enough' for many locales.
+
+#### Consider avoiding postal code address lookup {: #postal-code-address-lookup}
+
+Some websites use a service to look up addresses based on postal code or ZIP. This may be sensible
+for some use cases, but you should be aware of the potential downsides.
+
+Postal code address suggestion doesn't work for all countries—and in some regions, post codes can
+include a large number of potential addresses.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </video>
+  <figcaption>ZIP or postal codes may include a lot of addresses!</figcaption>
+</figure>
+
+It's difficult for users to select from a long list of addresses—especially on mobile if they're
+rushed or stressed. It can be easier and less error prone to let users take advantage of autofill,
+and enter their complete address filled with a single tap or click.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </video>
+  <figcaption>A single name input enables one-tap (one-click) address entry.</figcaption>
+</figure>
+
+
+## Simplify payment forms {: #general-guidelines}
+
+Payment forms are the single most critical part of the checkout process. Poor payment form design is
+a [common cause of shopping cart abandonment](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). The [devil's in the details](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1): small
+glitches can tip users towards abandoning a purchase, particularly on mobile. Your job is to design
+forms to make it as easy as possible for users to enter data.
+
+### Help users avoid re-entering payment data {: #payment-form-autocomplete}
+
+Make sure to add appropriate `autocomplete` values in payment card forms, including the payment card
+number, name on the card, and the expiry month and year:
+* `cc-number`
+* `cc-name`
+* `cc-exp-month`
+* `cc-exp-year`
+
+This enables browsers to help users by securely storing payment card details and correctly entering form
+data. Without autocomplete, users may be more likely to keep a physical record of payment card details,
+or store payment card data insecurely on their device.
+
+{% Aside 'caution' %}
+Don't add a selector for payment card type, since this can always be inferred from the payment card
+number.
+{% endAside %}
+
+### Avoid using custom elements for payment card dates
+
+If not properly designed, [custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)
+can interrupt payment flow by breaking autofill, and won't work on older browsers. If all other
+payment card details are available from autocomplete but a user is forced to find their physical
+payment card to look up an expiry date because autofill didn't work for a custom element, you're
+likely to lose a sale. Consider using standard HTML elements instead, and style them accordingly.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="Screenshot of payment form showing custom elements for card expiry date that interrupt autofill.", width="800", height="916" %}
+  <figcaption>Autocomplete filled all the fields—except the expiry date!</figcaption>
+</figure>
+
+### Use a single input for payment card and phone numbers {: #single-number-input}
+
+For payment card and phone numbers use a single input: don't split the number into parts. That makes
+it easier for users to enter data, makes validation simpler, and enables browsers to autofill.
+Consider doing the same for other numeric data such as PIN and bank codes.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="Screenshot of payment form showing a credit card field split into four input elements.", width="800", height="833" %}
+  <figcaption>Don't use multiple inputs for a credit card number.</figcaption>
+</figure>
+
+### Validate carefully {: #validate}
+
+You should validate data entry both in realtime and before form submission. One way to do this is by
+adding a `pattern` attribute to a payment card input. If the user attempts to submit the payment form
+with an invalid value, the browser displays a warning message and sets focus on the input. No
+JavaScript required!
+
+{% Glitch {
+  id: 'payment-card-input',
+  path: 'index.html',
+  height: 170
+} %}
+
+However, your `pattern` regular expression must be flexible enough to handle [the range of payment card
+number lengths](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35): from 14
+digits (or possibly less) to 20 (or more). You can find out more about payment card number structuring
+from [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number).
+
+Allow users to include spaces when they're entering a new payment card number, since this is how
+numbers are displayed on physical cards. That's friendlier to the user (you won't have to tell them
+"they did something wrong"), less likely to interrupt conversion flow, and it's straightforward to
+remove spaces in numbers before processing.
+
+{% Aside %}
+You may want to use a one-time passcode for identity or payment verification. However, asking users
+to manually enter a code or copy it from an email or an SMS text is error-prone and a source of friction.
+Learn about better ways to enable one-time passcodes in [SMS OTP form best practices](/sms-otp-form).
+{% endAside %}
+
+
+## Test on a range of devices, platforms, browsers and versions {: #test-platforms}
+
+It's particularly important to test address and payment forms on the platforms most common for
+your users, since form element functionality and appearance may vary, and differences in viewport
+size can lead to problematic positioning. BrowserStack enables [free testing for open source projects](https://www.browserstack.com/open-source) on a range of devices and browsers.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="Screenshots of a payment form, payment-form.glitch.me, on iPhone 7 and 11. The Complete Payment button is shown on iPhone 11 but not 7", width="800", height="707" %}
+  <figcaption>The same page on iPhone 7 and iPhone 11.<br>Reduce padding for
+    smaller mobile viewports to ensure the <strong>Complete payment</strong> button isn't hidden.</figcaption>
+</figure>
+
+
+## Implement analytics and RUM {: #analytics-rum}
+
+Testing usability and performance locally can be helpful, but you need real-world data to properly
+understand how users experience your payment and address forms.
+
+For that you need analytics and Real User Monitoring—data for the experience of actual users, such
+as how long checkout pages take to load or how long payment takes to complete:
+
+* **Page analytics**: page views, bounce rates and exits for every page with a form.
+* **Interaction analytics**: [goal funnels](https://support.google.com/analytics/answer/6180923?hl=en)
+and [events](https://developers.google.com/analytics/devguides/collection/gtagjs/events)
+indicate where users abandon your checkout flow and what actions do they take when interacting
+with your forms.
+* **Website performance**: [user-centric metrics](/user-centric-performance-metrics) can tell you if your
+checkout pages are slow to load and, if so—what's the cause.
+
+Page analytics, interaction analytics, and real user performance measurement become especially
+valuable when combined with server logs, conversion data, and A/B testing, enabling you to answer
+questions such as whether discount codes increase revenue, or whether a change in form layout
+improves conversions.
+
+That, in turn, gives you a solid basis for prioritizing effort, making changes, and rewarding success.
+
+
+## Keep learning {: #resources}
+
+* [Sign-in form best practices](/sign-in-form-best-practices)
+* [Sign-up form best practices](/sign-up-form-best-practices)
+* [Verify phone numbers on the web with the WebOTP API](/web-otp)
+* [Create Amazing Forms](/learn/forms/)
+* [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+* [More capable form controls](/more-capable-form-controls)
+* [Creating Accessible Forms](https://webaim.org/techniques/forms/)
+* [Streamlining the Sign-up Flow Using Credential Management API](https://developer.chrome.com/blog/credential-management-api/)
+* [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/) provides
+useful links and extensive guidance for address formats in over 200 countries.
+* [Countries Lists](http://www.countries-list.info/Download-List) has a tool for downloading country
+codes and names in multiple languages, in multiple formats.
+
+
+Photo by [@rupixen](https://unsplash.com/@rupixen) on [Unsplash](https://unsplash.com/photos/Q59HmzK38eQ).
diff --git a/src/site/content/en/blog/perception-toolkit/found-target.png b/src/site/content/en/blog/perception-toolkit/found-target.png
deleted file mode 100644
index 5d0c4b8c008..00000000000
Binary files a/src/site/content/en/blog/perception-toolkit/found-target.png and /dev/null differ
diff --git a/src/site/content/en/blog/perception-toolkit/hero.png b/src/site/content/en/blog/perception-toolkit/hero.png
deleted file mode 100644
index 27138232c14..00000000000
Binary files a/src/site/content/en/blog/perception-toolkit/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/perception-toolkit/index.md b/src/site/content/en/blog/perception-toolkit/index.md
index 64cf26a53b8..8007b053073 100644
--- a/src/site/content/en/blog/perception-toolkit/index.md
+++ b/src/site/content/en/blog/perception-toolkit/index.md
@@ -4,13 +4,15 @@ subhead: Easy to use real-world interactivity.
 authors:
   - joemedley
 date: 2019-05-07
-hero: hero.png
+hero: image/admin/SJQDe005xR0Cvu9JPt78.png
 alt: A series of screens shows a phone camera scanning an image and generating a link.
 description: |
   Wouldn't it be great if users could search your site using their camera?
 tags:
   - blog
-  - visual-search
+  # - visual-search
+feedback:
+  - api
 ---
 Wouldn't it be great if users could search your site using their camera? Imagine
 this. Your site is Razor McShaveyface. Your customers tell you they have trouble
@@ -56,11 +58,9 @@ then show and hide cards based on the information provided in the data. Try this
 for yourself using our [artifact-map
 demo](https://github.com/GoogleChromeLabs/perception-toolkit/tree/master/demo/artifact-map).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="found-target.png"
-       alt="The default interface is available by using just the linked data." class="screenshot"
-       width="300">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UD5t3RD9HZ7OIHVaAg31.png", alt="The default interface is available by using just the linked data.", width="300", height="518" %}
+  <figcaption>
     The default interface.
   </figcaption>
 </figure>
@@ -97,7 +97,7 @@ The file itself looks something like this:
 ## The user experience
 
 What if you want more than the default user experience? The toolkit gives you
-livecycle events, Card and Button objects for crafting the user experience
+lifecycle events, Card and Button objects for crafting the user experience
 around those events, and an easy way to style the cards. I'm going to show a
 little of this with code based losely on our [Getting
 Started](https://perceptiontoolkit.dev/getting-started/) guide.
diff --git a/src/site/content/en/blog/performance-audit-next/index.md b/src/site/content/en/blog/performance-audit-next/index.md
new file mode 100644
index 00000000000..f5b7d890f69
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit-next/index.md
@@ -0,0 +1,30 @@
+---
+layout: post
+title: Next steps
+date: 2018-08-16
+updated: 2018-08-16
+authors:
+  - samdutton
+description: >
+  Having completed a site audit, you should have accurate review data in a form that makes it easy for developers and other stakeholders to prioritize and justify changes.
+---
+
+Having completed a site audit, you will have accurate review data in a form that makes it easy for
+developers and other stakeholders to prioritize and justify changes.
+
+Next, you may want to revisit the sections on this site that provide in-depth advice on how to
+improve [load performance](/web/fundamentals/performance/get-started/) and
+[rendering performance](/web/fundamentals/performance/rendering/).
+
+## Find out more
+
+- [perf.rocks](http://perf.rocks/articles): resources to help you build fast sites
+- [Web Fundamentals Performance guide](/web/fundamentals/performance):
+  why performance matters and how to improve it
+- [How To Think About Speed Tools](/web/fundamentals/performance/speed-tools/):
+  overview of guidance and tools for developers and marketers from Google
+- [High Performance Web Sites](http://stevesouders.com/hpws/) by Steve Souders: more
+  than 10 years old, but still valuable
+- [High Performance Browser Networking](https://hpbn.co/) by Ilya Grigorik:
+  comprehensive reference including introductory guides to TCP, UDP, TLS and other topics
+- [Can You Afford It?: Real-world Web Performance Budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets)
diff --git a/src/site/content/en/blog/performance-audit-prework/index.md b/src/site/content/en/blog/performance-audit-prework/index.md
new file mode 100644
index 00000000000..8cd11ef584b
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit-prework/index.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: Prework
+date: 2018-08-16
+updated: 2020-07-24
+authors:
+  - samdutton
+description: >
+  Before gathering performance metrics for a site audit, there are several checks you can do to identify easy fixes and areas for focus. Some of these checks are relatively subjective, but can identify problems that affect perceived performance.
+---
+
+Before gathering performance metrics for a site audit, there are several checks you can do to
+identify easy fixes and areas for focus.
+
+## Validity check: architecture and code
+
+[Pay down technical debt!](http://wiki.c2.com/?TechnicalDebt)
+
+Wherever possible fix simple bugs and remove unneeded assets and code <strong>before</strong>
+measuring performance — but make sure to keep a before-and-after record of problems and fixes. These
+improvements can still be a part of your audit work.
+
+**Site architecture and assets**<br> Can anything easily be removed from the code repo and from the
+site, such as unused legacy pages, content or other assets? Check for orphaned pages, redundant
+templates, unused images and [unused code and libraries](/web/updates/2017/04/devtools-release-notes#coverage).
+
+**Runtime errors**<br> Check for errors reported in the browser console. There shouldn't be any :).
+
+**Linting**<br> Are there errors in your HTML, CSS or JavaScript code? Building linting into your
+workflow can help maintain code quality and avoid regressions. We recommend
+[HTMLHint](http://htmlhint.com/), [StyleLint](https://stylelint.io) and
+[ESLint](http://eslint.org/), which can be used as code editor plugins, or run from
+the command line within workflow processes and continuous integration tools such as
+[Travis](https://travis-ci.org/).
+
+**Broken links and images**<br> There are many tools to test for broken links at build time and
+runtime, including Chrome Extensions
+([this one](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)
+is good) and Node tools such as
+[Broken Link Checker](https://github.com/stevenvachon/broken-link-checker).
+
+**Plugins**<br> Plugins such as Flash and Silverlight can be a security risk, support for them
+[has been deprecated](https://blog.chromium.org/2014/11/the-final-countdown-for-npapi.html),
+and they don't work on mobile. [Use Lighthouse to check for
+plugins](/web/tools/lighthouse/audits/plugins).
+
+## Test with a variety of devices and contexts
+
+Nothing beats getting real people to test your site with real devices, multiple browsers and
+different connectivity contexts.
+
+Some of these checks are relatively subjective, but they can identify problems that affect perceived
+performance. Broken links, for example, waste time and feel 'unresponsive'. Illegible text is slow
+to read.
+
+**Cross-device testing**<br> Try different viewport and window sizes. Use at least one mobile and
+one desktop device. If possible, try your site on a low-spec mobile device with a small screen. Is
+the text readable? Are any images broken? Can you zoom? Are touch targets large enough? Is it slow?
+Are any features unresponsive? Screenshot or video the results.
+
+**Cross-platform testing**<br> What platforms do you target? You need to test on the browsers and
+operating systems your users use now and in the future.
+
+**Connectivity**<br> [Test on multiple target
+network types](/web/fundamentals/performance/poor-connectivity/#testing): connected, wifi and
+cellular. You can use browser tools to [emulate a variety of network
+conditions](/web/tools/chrome-devtools/network-performance/network-conditions).
+
+**Devices**<br> Make sure to try out your site on the same devices as your users. The following
+photo shows the same page on two different phones.
+
+<figure>   
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/yZXt6rdAoMpFp8ncmbvW.jpeg", alt="Blog post page running on a high spec and a low
+spec phone", width="760", height="678" %}
+</figure>
+
+On the larger screen, text is small but readable. On the smaller screen the browser renders the
+layout correctly, but the text is unreadable, even when zoomed in. The display is blurry and has a
+'color cast' — white doesn't look white — making content less legible.
+
+Simple findings such as this can be far more important than obscure performance data!
+
+## Try out UI and UX
+
+**Accessibility, usability and readability**<br> To ensure that your site's content and
+functionality are accessible to everyone, you need to understand the diversity of your users.
+[Lighthouse](/web/tools/lighthouse/) and other tools test for specific
+accessibility problems, but nothing beats real-world testing. Try reading, navigating and entering
+data in a variety of scenarios: for example, outdoors in sunlight or on a train. Ask a range of
+friends, family and colleagues to try out your site. Try consuming content via a screen reader such
+as [VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6)
+on Mac or
+[NVDA](https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=4)
+on Windows.
+
+You can find out more about implementing and reviewing accessibility in the [Udacity course on Accessibility](/web/fundamentals/accessibility/) and the Web
+Fundamentals article [How To Do an Accessibility Review](/web/fundamentals/accessibility/how-to-review).
+
+Keep a record of your accessibility audit. Chances are that you'll be able to make simple
+improvements that are good for all your users.
+
+**Fundamental UI and UX problems**<br> Interactions that don't work how they should, overflowing
+elements on smaller windows and viewports, too-small tap targets, unreadable content, janky
+scrolling… Open multiple pages on the site, try out navigation and all core functionality. Keep a
+record.
+
+**Images, audio and video**<br> Test for overflowing content, [incorrect aspect ratio](https://chrome.google.com/webstore/detail/image-checker/bacnicogfgpigmmenfiplfiofpkocpii),
+poor cropping, and quality problems.
+
+**Subjective UI tests**<br>
+These may not all be relevant, but simple changes can make refactoring easier:
+
+- Is 'What can I do here? immediately clear when you open the site?
+- Are you drawn to consume content and follow links?
+- Are there visual hierarchies or pathways — or does everything have the same visual weight?
+- Is the layout cluttered?
+- Are there too many fonts?
+- Are there images or other content that could be removed?
+- Content design is as important as interface design. Is the text and image content on your site
+  appropriate for mobile and desktop contexts? Can anything be eliminated?
+  [Write for mobile](/web/fundamentals/design-and-ui/responsive/content).
diff --git a/src/site/content/en/blog/performance-audit-security/index.md b/src/site/content/en/blog/performance-audit-security/index.md
new file mode 100644
index 00000000000..a3668db4db7
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit-security/index.md
@@ -0,0 +1,37 @@
+---
+layout: post
+title: Check site security
+date: 2018-08-16
+updated: 2018-08-16
+authors:
+  - samdutton
+description: >
+  You won't be able to build a PWA without HTTPS. Serving your site over HTTPS is fundamental for security, and many APIs won't work without it. If you need to justify implementation costs, find out why HTTPS matters.
+---
+
+You won't be able to build a PWA without HTTPS.
+
+Serving your site over HTTPS is fundamental for security, and many APIs won't work without it. If
+you need to justify implementation costs, find out [why HTTPS matters](/web/fundamentals/security/encrypt-in-transit/why-https).
+
+If a site uses HTTP for any assets, users will be warned in the URL bar. Chrome displays a warning
+like the following.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/OYTYjIbwrPLxQG4riSL5.png", alt="Chrome 'not secure' warning", width="800", height="219" %}
+  <figcaption><em>From Chrome 68, the address bar warns if not all assets use HTTPS</em></figcaption>
+</figure>
+
+HTTPS should be implemented everywhere — not just, for example, on login or checkout pages. Any
+insecure page or asset can be a vector for attack, making your site a liability for your users and
+your business.
+
+Site security is easy to check with [Chrome DevTools Security panel](/web/tools/chrome-devtools/security). Keep a record of any
+problems.
+
+The site in the following example is not secure, since some assets are served over HTTP.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/S19zXkzMqSQxUNJ3FfEW.png", alt="Chrome DevTools Security panel", width="800", height="553" %}
+  <figcaption><em>Chrome DevTools Security panel</em></figcaption> 
+</figure>
diff --git a/src/site/content/en/blog/performance-audit-share/index.md b/src/site/content/en/blog/performance-audit-share/index.md
new file mode 100644
index 00000000000..f8aa4a83c50
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit-share/index.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Share the results
+date: 2018-08-16
+updated: 2018-08-16
+authors:
+  - samdutton
+description: >
+  Once you've audited a site, make sure to package the results in a digestible form. Be sensitive to the people on the receiving end of your audit, structure your report carefully and present your data in terms of opportunities and solutions.
+---
+
+Once you've audited a site, make sure to package the results in a digestible form.
+
+- Consider producing different reports for different stakeholders.
+- Focus on business needs and show how technical metrics support these.
+- Start with a summary.
+- Structure data by topic (such as load performance and page weight) rather than simply listing tool output data.
+- Order results by priority.
+- Leave out results if they're not relevant or interesting.
+- Where possible present numerical data as charts or graphs.
+- Avoid a wall of data — site reviews should not be boring.
+  <br><br>
+
+<div class="note">
+  <p><strong>Be sensitive to the people on the receiving end of your audit.</strong></p>
+  <p>Those working on a site may be well aware of problems. There may be complex, non-technical
+  reasons why problems haven't been fixed.</p>
+  <p>It's much more helpful to describe poor performance in terms of opportunities and solutions,
+  rather than simply listing a catalog of failures.</p>
+  <p>Wherever possible, talk to site developers and other stakeholders before presenting your
+  findings more widely.</p>
+</div>
+
+## Provide context
+
+When sharing review results you may want to include contextual data to justify effort and motivate
+developers or other stakeholders to implement improvements you suggest — such as the following from
+[DoubleClick](https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/){: .external}:
+
+- 53% of users abandon sites that take longer than three seconds to load.
+- Mobile sites load in 5 seconds earn up to 2x more mobile ad revenue.
+- The average load time for mobile sites is 19 seconds.
+
+There is a comprehensive list of business reasons for improving performance on
+[neotys.com](http://www.neotys.com/blog/how-to-talk-about-performance-testing-with-ceos-and-business-managers/){: .external}.
+More information about how to improve site performance is available from
+[perf.rocks](http://perf.rocks/articles){: .external} and
+[Web Fundamentals](/web/fundamentals/performance/), along with case
+studies and success stories.
+
+If you don't have a [performance budget](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets), now is the time! [Calculate
+a budget](https://www.performancebudget.io/) and show how your site weighs up.
+
+## Demonstrate potential
+
+Chrome DevTools [Local Overrides](https://t.co/0a56PgKlPv){: .external} allow you to override
+website assets with local versions. This can be a great way to show how simple changes can make a
+big difference.
+
+For example:
+
+- Create a version of the CSS used by a site's homepage, with redundant rules removed.
+- Change HTML to defer JavaScript loading.
+- Replace image files with optimized versions.
+
+You can even share changed files with developers working on a site, to enable them to demonstrate
+potential improvements directly to their colleagues. Local Overrides also makes it simple to create
+side-by-side screencasts showing performance differences between optimized and unoptimized versions.
+This approach can be much more compelling than a lengthy todo list! Find out how to use Local
+Overrides [here](https://glebbahmutov.com/blog/local-overrides/){: .external}.
diff --git a/src/site/content/en/blog/performance-audit-tools/index.md b/src/site/content/en/blog/performance-audit-tools/index.md
new file mode 100644
index 00000000000..d28b3817701
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit-tools/index.md
@@ -0,0 +1,337 @@
+---
+layout: post
+title: Use tools to measure performance
+authors:
+  - samdutton
+date: 2018-08-16
+updated: 2018-09-02
+description: >
+  There are several core objectives for building a performant, resilient site with low data cost. For each objective, you need an audit.
+---
+
+There are several core objectives for building a performant, resilient site with low data cost.
+
+For each objective, you need an audit.
+
+<table data-alignment="top">
+<thead>
+<tr>
+<th><strong>Objective</strong></th>
+<th><strong>Why?</strong></th>
+<th><strong>What to test for?</strong></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Ensure privacy, security and data integrity, and enable powerful API usage</td>
+<td><a href="https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https">Why HTTPS Matters</a></td>
+<td>HTTPS implemented for all site pages/routes and assets.</td>
+</tr>
+<tr>
+<td>Improve load performance</td>
+<td><a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">53% of users
+abandon sites</a> that take longer than three seconds to load</td>
+<td>JavaScript and CSS that could be loaded asynchronously or deferred. Set goals for time to
+  interactive and payload size: for example TTI on 3G. <a href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">Set a performance budget</a>.</td>
+</tr>
+<tr>
+<td>Reduce page weight</td>
+<td>• Reduce data cost for users with capped data plans
+• Reduce web app storage requirements — particularly important for users on low-spec devices
+• Reduce hosting and serving costs
+• Improve serving performance, reliability and resilience</td>
+<td>Set a page weight budget: for example, first load under 400 kB. Check for heavy JavaScript.
+  Check file sizes to find bloated images, media, HTML, CSS and JavaScript. Find images that could
+  be lazy loaded, and check for unused code with
+  <a href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage">coverage tools</a>.</td>
+</tr>
+<tr>
+<td>Reduce resource requests</td>
+<td>• Reduce
+  <a href="https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/">latency issues</a>
+• Reduce serving costs
+• Improve serving performance, reliability and resilience</td>
+<td>Look for excessive or unnecessary requests for any type of resource. For example: files that are
+loaded repeatedly, JavaScript that is loaded in multiple versions, CSS that is never used, images
+that are never viewed (or could be lazy loaded). </td>
+</tr>
+<tr>
+<td>Optimize memory usage </td>
+<td><a href="https://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/">Memory can
+become the new bottleneck</a>, especially on mobile devices</td>
+<td>Use the Chrome Task Manager to compare your site against others for memory usage when loading
+the home page and using other site features. </td>
+</tr>
+<tr>
+<td>Reduce CPU load</td>
+<td>Mobile devices have limited CPU, especially low-spec devices</td>
+<td>Check for heavy JavaScript. Find unused JavaScript and CSS with
+  <a href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage">coverage tools</a>.
+  Check for <a href="https://developers.google.com/web/tools/lighthouse/audits/dom-size">excessive
+  DOM size</a> and scripts that run unnecessarily on first load. Look for JavaScript loaded in
+multiple versions, or libraries that could be avoided with minor refactoring. </td>
+</tr>
+</tbody>
+</table>
+
+There is a wide range of tools and techniques for auditing websites:
+
+- System tools
+- Built-in browser tools
+- Browser extensions
+- Online test applications
+- Emulation tools
+- Analytics
+- Metrics provided by servers and business systems
+- Screen and video recording
+- Manual tests
+
+Below you'll learn which approach is relevant for each type of audit.
+
+{% Aside %}
+**Images constitute by far the [most weight](http://httparchive.org/interesting.php#bytesperpage) and [most requests](http://httparchive.org/trends.php#bytesImg&reqImg) for most web pages.**
+
+[Latency gets worse as connectivity gets worse](https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/) so excessive image file requests are an increasing
+problem as the web goes mobile. Images also consume power: more image requests, more radio usage,
+more flat batteries. [Even just to render images takes power](http://httparchive.org/trends.php#bytesImg&reqImg) – and this is proportional to the size and quantity of images.
+
+Likewise for memory: small increases in pixel dimensions result in big increases in memory
+usage. With images on mobile — especially on low-spec devices — [memory can become the new bottleneck](https://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/). Bloated images are also problematic for users on capped data
+plans.
+
+[Remove redundant images](https://developers.google.com/web/fundamentals/design-and-ui/responsive/content#viewport)! If you can't get rid of them, optimize: increase compression as much as possible, reduce pixel dimensions, and use the format that gives you the smallest file sizes.
+Optimizing 'hero images' such as banners and backgrounds is an easy, one-off win.
+{% endAside %}
+
+## Record resource requests: number, size, type and timing
+
+A good place to start when auditing a site is to check pages with your browser's network tools.
+If you're not sure how to do this, work through the Chrome DevTools network panel
+[Get Started Guide](/web/tools/chrome-devtools/network-performance/).
+Similar tools are available for
+[Firefox](https://developer.mozilla.org/docs/Tools/Network_Monitor),
+[Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Instruments/Instruments.html#//apple_ref/doc/uid/TP40007874-CH4-SW1),
+[Internet Explorer](<https://msdn.microsoft.com/library/gg130952(v=vs.85).aspx>) and
+[Edge](https://docs.microsoft.com/microsoft-edge/f12-devtools-guide/network).
+
+Remember to keep a record of results before you make changes. For network requests, that can be as
+simple as a screenshot — you can also
+[save profile data](/web/tools/chrome-devtools/evaluate-performance/timeline-tool#save_and_load_recordings) as a JSON file. There's more information below about [how to save and share test results](#save-the-results).
+
+Before you begin auditing network usage, make sure to
+[disable the browser cache](/web/tools/chrome-devtools/network-performance/#emulate)
+to ensure you get accurate statistics for first-load performance. If you already do caching via a
+service worker,
+[clear Cache API storage](/web/tools/chrome-devtools/progressive-web-apps).
+You may want to use an Incognito (Private) window, so that you don't have to worry about disabling
+the browser cache or removing previously cached entries.
+
+Here are some core features and metrics you should check with browser tools:
+
+- Load performance: [Lighthouse](/web/tools/lighthouse/#devtools)
+  provides a summary of load metrics. Addy Osmani has written a great summary of [key user moments](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2)
+  for page load.
+- [Timeline events](/web/tools/chrome-devtools/evaluate-performance/timeline-tool)
+  for loading and parsing resources, and memory usage. If you want to go deeper, run memory and
+  JavaScript [profiling](/web/tools/chrome-devtools/evaluate-performance/timeline-tool#profile-js).
+- Total page weight and number of files.
+- Number and weight of JavaScript files.
+- Any particularly large individual JavaScript files (over, say, 100KB).
+- Unused JavaScript. You can check using the Chrome
+  [coverage tool](/web/updates/2017/04/devtools-release-notes).
+- Total number and weight of image files.
+- Any particularly large individual image files.
+- Image formats: are there
+  [PNGs that could be JPEGs or SVGs](/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)? Is WebP used with fallbacks?
+- Whether responsive image techniques (such as
+  [srcset](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/))
+  are used.
+- HTML file size.
+- Total number and weight of CSS files.
+- Unused CSS. (In Chrome, use the
+  [coverage panel](https://umaar.com/dev-tips/121-css-coverage/).)
+- Check for problematic usage of other assets such as Web Fonts (including icon fonts).
+- Check the DevTools timeline for anything that blocks page load.
+
+If you're working from fast wifi or a fast cellular connection, test with [low bandwidth and high
+latency emulation](/web/tools/chrome-devtools/network-performance/network-conditions).
+Remember to test on mobile as well as desktop — some sites use UA sniffing to deliver different
+assets and layouts for different devices. You may need to test on actual hardware using
+[remote debugging](/web/tools/chrome-devtools/remote-debugging/),
+not just with device simulation.
+
+{% Aside %}
+
+**You can often use browser tools to spot problems simply by checking network responses and ordering by size.**
+
+For example: the 349KB PNG here looked like it could be a problem:
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ajIej5qg2qPKZGnwgbyk.png", alt="Chrome DevTools Network panel showing a large file", width="479", height="242" %}
+</figure>
+
+Sure enough, it turned out the image was 1600px wide, whereas the maximum display width of the
+element was only 400px. Decompressed, the image needed over 4MB of memory, which is a lot on a
+mobile phone.
+
+Resaving the image as an 800px wide JPEG (to cope with 400px display width on 2x screens) and
+optimizing with [ImageOptim](https://imageoptim.com/) resulted in a 17KB file:
+compare the [original PNG](https://drive.google.com/open?id=0B9xlQg9Xpugsb0VpQldsN3YwSEE) with the [optimized JPEG](https://drive.google.com/open?id=0B9xlQg9XpugsTlBVNlQ1bUdQa0U).</p>
+
+That's a 95% improvement!
+
+{% endAside %}
+
+## Check memory and CPU load
+
+Before you make changes, keep a record of memory and CPU usage.
+
+In Chrome you can access the Task Manager from the Window menu. This is a simple way to check a
+web page's requirements.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/BwWPMsK66mrAbfewiEpA.png", alt="Chrome Task Manager showing memory and CPU usage for
+  the four open browser tabs", width="655", height="278" %}
+  <figcaption>Chrome's Task Manager — watch out for memory and CPU hogs!</figcaption>
+</figure>
+
+## Test first and subsequent load performance
+
+[Lighthouse](/web/tools/lighthouse/),
+[WebPagetest](https://www.webpagetest.org/easy) and
+[Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/) are useful for analyzing speed, data cost and resource usage. WebPagetest will also check static-content
+caching, time to first byte, and if your site makes effective use of CDNs.
+
+{% Aside %}
+
+**It's simple to enable static-content caching so browsers can cache assets the first
+time they're requested, by configuring your server to include appropriate headers.**
+
+If a browser can cache resources, it won't need to retrieve them from the network on subsequent
+visits. This improves load speed, cuts data cost and reduces network and server load — even for
+browsers that don't support caching via a service worker.
+[Even if you're using the Cache API](https://jakearchibald.com/2016/caching-best-practices/) it's important to enable browser caching.
+
+To find out more, take a look at [PageSpeed Tools](https://developers.google.com/speed/docs/insights/LeverageBrowserCaching) and the resources on [Web Fundamentals](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) (in particular, the 'Invalidating and updating cached responses' section).
+
+{% endAside %}
+
+## Save the results
+
+- **WebPagetest**: [test results each have their own URL](https://www.webpagetest.org/result/170428_NW_cc5afd75a2041f7e09984f33e4a4ae14/).
+- **Pagespeed Insights**: the [online](https://developers.google.com/speed/pagespeed/insights)
+  Pagespeed Insights tool [now includes Chrome User Experience report data](https://webmasters.googleblog.com/2018/01/real-world-data-in-pagespeed-insights.html?m=1)
+  highlighting real-world performance stats.
+- **Lighthouse**: save reports from the Chrome DevTools Audit panel by clicking on the
+download button:
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/fcXsYtUzSNLnYZgZAwQN.png", alt="Chrome Lighthouse button for downloading reports", width="800", height="225" %}
+</figure>
+
+## Test for core Progressive Web App requirements
+
+[Lighthouse](/web/tools/lighthouse/) helps you test security,
+functionality, accessibility, performance and search engine performance. In particular, Lighthouse
+checks if your site successfully implements PWA features such as service workers and a Web App manifest.
+
+Lighthouse also tests whether your site can provide an acceptable offline experience.
+
+You can download a Lighthouse report as JSON or, if you're using the
+[Lighthouse Chrome Extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk),
+share the report as a GitHub Gist: click on the share button, select Open in Viewer, then click on
+the share button again in the new window and Save as Gist.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/pKYiZ9JL0bI1FfqUkC2u.png", alt="Screenshot showing how to export a Chrome Lighthouse
+  report as a gist", width="800", height="346" %}
+  <figcaption>Export a report to a gist from the Lighthouse Chrome Extension — click the share button</figcaption>
+</figure>
+
+## Use analytics, event tracking and business metrics to track real-world performance
+
+If you can, keep a record of analytics data before you implement changes: bounce rates, time on
+page, exit pages: whatever's relevant to your business requirements.
+
+If possible, record business and technical metrics that might be affected, so you can compare
+results after making changes. For example: an e-commerce site might track orders-per-minute or
+record stats for stress and endurance testing. Back-end storage costs, CPU requirements, serving
+costs and resilience are likely to improve if you cut page weight and resource requests.
+
+If analytics aren't implemented, now is the time! Business metrics and analytics are the final
+arbiter of whether or not your site is working. If appropriate, incorporate
+[event tracking](/analytics/devguides/collection/analyticsjs/events)
+for user actions such as button clicks and video plays. You may also want to implement
+[goal flow analysis](https://support.google.com/analytics/answer/2520139?ref_topic=1649581):
+the paths by which your users navigate towards 'conversions'.
+
+You can keep an eye on Google Analytics
+[Site Speed](https://support.google.com/analytics/answer/1205784) to check how
+performance metrics correlate with business metrics. For example: 'how fast did the homepage load?'
+compared to 'did entry via the home page result in a sale?'
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/jw1eTOeLv1S7jqrgQxlU.png", alt="Screenshot showing Google Analytics Site Speed", width="800", height="417" %}
+</figure>
+
+Google Analytics uses data from the
+[Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API).
+
+You may want to record data using one of the
+[JavaScript performance APIs](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+or your own metrics, for example:
+
+```js
+    const subscribeBtn = document.querySelector('#subscribe');
+
+    subscribeBtn.addEventListener('click', (event) => {
+     // Event listener logic goes here...
+
+     const lag = performance.now() - event.timeStamp;
+     if (lag > 100) {
+      ga('send', 'event', {
+       eventCategory: 'Performance Metric'
+       eventAction: 'input-latency',
+       eventLabel: '#subscribe:click',
+       eventValue: Math.round(lag),
+       nonInteraction: true,
+      });
+     }
+    });
+```
+
+You can also use ReportingObserver to check for browser deprecation and intervention warnings.
+This is one of [many APIs for getting real-world, live measurements from actual users](/web/updates/2018/07/reportingobserver).
+
+## Real-world experience: screen and video recording
+
+Make a video recording of page load on mobile and desktop. This works even better at high frame
+rates and if you add a timer display.
+
+You may also want to save screencasts. There are many screencast recording apps for Android, iOS,
+and desktop platforms (and
+[scripts to do the same](https://paul.kinlan.me/android-screen-recording/)).
+
+Video-recording page load works much like the
+[filmstrip view](http://www.webpagetest.org/video/compare.php?tests=170427_61_14ZR-r:1-c:0) in
+WebPagetest or
+[Capture Screenshots](/web/updates/2015/07/devtools-digest-film-strip-and-a-new-home-for-throttling)
+in Chrome DevTools. You get a real-world record of page component load speed: what's fast and what's
+slow. Save video recordings and screencasts to compare against later improvements.
+
+A side-by-side before-and-after comparison can be a great way to demonstrate improvements!
+
+## What else?
+
+If relevant, get a [Web Bloat Score](http://www.webbloatscore.com/). This is a fun
+test, but it can also be a compelling way to demonstrate code bloat — or to show you've
+made improvements.
+
+[What Does My Site Cost?](https://whatdoesmysitecost.com/test/170427_KK_6aecf8c8a21c22e9f59b2b65e8371569#gniCost),
+shown below, gives a rough guide to the financial cost of loading your site in different regions.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/GzHcuWgCpknwNSMlj3A7.png", alt="Screenshot from whatdoesmysitecost.com", width="800", height="586" %}
+</figure>
+
+Many other standalone and online tools are available: take a look at
+[perf.rocks/tools](http://perf.rocks/tools).
diff --git a/src/site/content/en/blog/performance-audit/index.md b/src/site/content/en/blog/performance-audit/index.md
new file mode 100644
index 00000000000..6c2fb9dbb98
--- /dev/null
+++ b/src/site/content/en/blog/performance-audit/index.md
@@ -0,0 +1,126 @@
+---
+layout: post
+title: Auditing Performance
+date: 2018-08-16
+updated: 2019-02-22
+authors:
+  - samdutton
+description: >
+  Auditing your site or app will help you build a resilient, performant experience — and highlight quick wins that can be implemented with minimal sign-off. An audit also gives you a baseline for data-driven development. Did a change make things better? How does your site compare with competitors? You get metrics to prioritize effort, and concrete evidence to brag about once you've made improvements.
+---
+
+## Why and what?
+
+You've probably heard about all the good things that Progressive Web App techniques can do for your
+site. You might feel tempted to jump straight in and add PWA features. That's possible, but you'll
+be much better off if you get 'PWA-ready' first.
+
+No amount of PWA magic will fix problems such as blocking JavaScript or bloated images. PWAs need a
+solid foundation.
+
+So how do you check the health of your website? The first step is to do a site audit: an objective
+review of what works well and where (and how) there could be improvement.
+
+Auditing your site or app will help you build a resilient, performant experience — and highlight
+quick wins that can be implemented with minimal sign-off. An audit also gives you a baseline for
+data-driven development. Did a change make things better? How does your site compare with
+competitors? You get metrics to prioritize effort, and concrete evidence to brag about once you've
+made improvements.
+
+## If you only have 5 minutes…
+
+Run [Lighthouse](/web/tools/lighthouse/) on your homepage and [save the
+report data](/web/tools/lighthouse#gists). You get a quantified
+baseline and a todo list for improvements to performance, accessibility, security and SEO.
+
+## If you only have 30 minutes…
+
+[Lighthouse](/web/tools/lighthouse/) is probably still the best place to start, but with a little
+more time you can also record results from other tools:
+
+- [Chrome DevTools Security panel](/web/tools/chrome-devtools/security): HTTPS usage.
+- [Chrome DevTools Network Panel](/web/tools/chrome-devtools/network-performance/): load timings;
+  resource sizes and number of requests for HTML, CSS, JavaScript, images, fonts and other files.
+- Chrome Task Manager: if your site constantly uses significant CPU or more memory than other apps
+  then you may need to fix memory leaks, task running or resource loading problems.
+  Make sure to test your site on devices representative of your users.
+- [WebPagetest](https://www.webpagetest.org/easy): performance for different locations
+  and connection types, caching, time to first byte, CDN usage.
+- [Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/): load performance, data cost and
+  resource usage, including Chrome User Experience report data highlighting real-world performance
+  statistics.
+- [Speed Scorecard and Impact Calculator](https://www.thinkwithgoogle.com/feature/mobile/): compare site speed
+  against peers and estimate the potential revenue opportunity of improving site speed.
+
+Make sure to test your website as a
+first-time user sees it. Open the site an Incognito (Private) Window, or use browser tools to
+disable caching and clear storage. This ensures that every asset is retrieved from the
+network and not from a local cache, so you get an accurate picture of first-load performance.
+
+{% Aside %}
+<a href="https://www.webpagetest.org">WebPagetest</a> is a free service that
+runs performance tests from multiple locations globally using real browsers with real connections,
+to provide detailed metrics and optimization advice.
+
+<ul>
+<li>Leverage <a href="(https://www.webpagetest.org/easy">webpagetest.org/easy</a> to quickly
+simulate differences between network connection types on mobile</li>
+<li>Generate a Lighthouse audit and report with every WebPagetest trace.</li>
+<li> Measure site on first visit as well as for repeat views — for example: to see how much
+service worker caching helps.</li>
+<li>Visually compare multiple sites and get filmstrip and waterfall comparisons.</li>
+</ul>
+{% endAside %}
+
+Nothing beats real world testing — try out your site with the same devices and connectivity as your
+users and keep a record of your subjective experience.
+
+## If you find the range of tools bewildering…
+
+Take a look at our guide: [How To Think About Speed Tools](/web/fundamentals/performance/speed-tools/).
+
+If nothing else, simply use [Lighthouse](/web/tools/lighthouse/) to check for:
+
+- HTTPS: [every site should deliver all assets over HTTPS](/web/fundamentals/security/encrypt-in-transit/why-https).
+- Server settings: your web server or CDN should
+  [use compression correctly](/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer),
+  [use HTTP/2](/web/fundamentals/performance/http2/),
+  and [include appropriate headers](/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
+  to enable your browser to cache resources.
+- Script elements that can be moved to the bottom of the page and/or given an
+  [async or defer](http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/)
+  attribute.
+- JavaScript and libraries that can be removed.
+- [Unused CSS](https://umaar.com/dev-tips/121-css-coverage/)
+  and [unused JavaScript](/web/updates/2017/04/devtools-release-notes).
+- Images that can be saved with higher compression or smaller pixel dimensions.
+- Image files that would be smaller saved using a different format, for example
+  photos saved as PNGs.
+
+## Audience, stakeholders, context
+
+Priorities for refactoring depend on your audience, content and functionality.
+Who visits your site? Why and how do they use it? What's your
+[performance budget](https://www.performancebudget.io/){:.external}? If you're not sure of the
+answer to these questions, try the requirements gathering exercises from our PWA training
+resources: [Your audience, your content](/web/ilt/pwa/your-audience-your-content)
+and [Design for all your users](/web/ilt/pwa/design-for-all-your-users).
+
+Who are your stakeholders, and what are their priorities? This will affect the way you structure,
+present and share your audit data.
+
+If you can't audit your whole site, check page analytics to get an idea of where to focus. High
+bounce rates, low time-on-page and unexpected exit pages can be a good indicator of where to begin.
+Likewise business metrics such as hosting costs, ad clicks and conversions. Get an overview from
+stakeholders of what data matters to them.
+
+## Test, record, fix, repeat
+
+Record the state of your site <strong>before</strong> making any changes, to uncover problems and
+set a starting point for improvements or regressions. That gives you data to justify and reward
+development effort.
+
+Make sure to test multiple page types within your site — not just the home page. For single page
+apps, test different components, routes and UX flows, and not just the first load experience.
+
+## Feedback {: #feedback .hide-from-toc }
diff --git a/src/site/content/en/blog/performance-http2/index.md b/src/site/content/en/blog/performance-http2/index.md
new file mode 100644
index 00000000000..3fb10817e1f
--- /dev/null
+++ b/src/site/content/en/blog/performance-http2/index.md
@@ -0,0 +1,589 @@
+---
+title: Introduction to HTTP/2
+description: >
+  HTTP/2 (or h2) is a binary protocol that brings push, multiplexing streams and frame control to the web.
+authors:
+  - ilyagrigorik
+  - surma
+date: 2016-09-29
+updated: 2019-09-01
+---
+
+{% Aside %}
+The following content is an excerpt from [High Performance Browser
+Networking](http://shop.oreilly.com/product/0636920028048.do) (O'Reilly, Ilya
+Grigorik). For full version and related content, see
+[hpbn.co](https://hpbn.co/).
+{% endAside %}
+
+HTTP/2 will make our applications faster, simpler, and more robust — a rare
+combination — by allowing us to undo many of the HTTP/1.1 workarounds previously
+done within our applications and address these concerns within the transport
+layer itself. Even better, it also opens up a number of entirely new
+opportunities to optimize our applications and improve performance!
+
+The primary goals for HTTP/2 are to reduce latency by enabling full request and
+response multiplexing, minimize protocol overhead via efficient compression of
+HTTP header fields, and add support for request prioritization and server push.
+To implement these requirements, there is a large supporting cast of other
+protocol enhancements, such as new flow control, error handling, and upgrade
+mechanisms, but these are the most important features that every web developer
+should understand and leverage in their applications.
+
+HTTP/2 does not modify the application semantics of HTTP in any way. All the
+core concepts, such as HTTP methods, status codes, URIs, and header fields,
+remain in place. Instead, HTTP/2 modifies how the data is formatted (framed) and
+transported between the client and server, both of which manage the entire
+process, and hides all the complexity from our applications within the new
+framing layer. As a result, all existing applications can be delivered without
+modification.
+
+## Why not HTTP/1.2?
+
+To achieve the performance goals set by the HTTP Working Group, HTTP/2
+introduces a new binary framing layer that is not backward compatible with
+previous HTTP/1.x servers and clients—hence the major protocol version increment
+to HTTP/2.
+
+That said, unless you are implementing a web server (or a custom client) by
+working with raw TCP sockets, then you won’t see any difference: all the new,
+low-level framing is performed by the client and server on your behalf. The only
+observable differences will be improved performance and availability of new
+capabilities like request prioritization, flow control, and server push.
+
+## A brief history of SPDY and HTTP/2
+
+SPDY was an experimental protocol, developed at Google and announced in
+mid 2009, whose primary goal was to try to reduce the load latency of web pages
+by addressing some of the well-known performance limitations of HTTP/1.1.
+Specifically, the outlined project goals were set as follows:
+
+- Target a 50% reduction in page load time (PLT).
+- Avoid the need for any changes to content by website authors.
+- Minimize deployment complexity, and avoid changes in network infrastructure.
+- Develop this new protocol in partnership with the open-source community.
+- Gather real performance data to (in)validate the experimental protocol.
+
+{% Aside %}
+To achieve the 50% PLT improvement, SPDY aimed to make more efficient use
+of the underlying TCP connection by introducing a new binary framing layer to
+enable request and response multiplexing, prioritization, and header
+compression; see
+[Latency as a Performance Bottleneck](https://hpbn.co/primer-on-web-performance/#latency-as-a-performance-bottleneck).
+{% endAside %}
+
+Not long after the initial announcement, Mike Belshe and Roberto Peon, both
+software engineers at Google, shared their first results, documentation, and
+source code for the experimental implementation of the new SPDY protocol:
+
+So far we have only tested SPDY in lab conditions. The initial results are
+very encouraging: when we download the top 25 websites over simulated home
+network connections, we see a significant improvement in performance—pages
+loaded up to 55% faster.
+[_(Chromium Blog)_](https://blog.chromium.org/2009/11/2x-faster-web.html)
+
+Fast-forward to 2012 and the new experimental protocol was supported in Chrome,
+Firefox, and Opera, and a rapidly growing number of sites, both large (for example,
+Google, Twitter, Facebook) and small, were deploying SPDY within their
+infrastructure. In effect, SPDY was on track to become a de facto standard
+through growing industry adoption.
+
+Observing this trend, the HTTP Working Group (HTTP-WG) kicked off a new
+effort to take the lessons learned from SPDY, build and improve on them, and
+deliver an official "HTTP/2" standard. A new charter was drafted, an open call
+for HTTP/2 proposals was made, and after a lot of discussion within the working
+group, the SPDY specification was adopted as a starting point for the new HTTP/2
+protocol.
+
+Over the next few years SPDY and HTTP/2 continued to coevolve in parallel,
+with SPDY acting as an experimental branch that was used to test new features
+and proposals for the HTTP/2 standard. What looks good on paper may not work in
+practice, and vice versa, and SPDY offered a route to test and evaluate each
+proposal before its inclusion in the HTTP/2 standard. In the end, this process
+spanned three years and resulted in a over a dozen intermediate drafts:
+
+- March 2012: Call for proposals for HTTP/2
+- November 2012: First draft of HTTP/2 (based on SPDY)
+- August 2014: HTTP/2 draft-17 and HPACK draft-12 are published
+- August 2014: Working Group last call for HTTP/2
+- February 2015: IESG approved HTTP/2 and HPACK drafts
+- May 2015: RFC 7540 (HTTP/2) and RFC 7541 (HPACK) are published
+
+In early 2015 the IESG reviewed and approved the new HTTP/2 standard for
+publication. Shortly after that, the Google Chrome team announced their schedule
+to deprecate SPDY and NPN extension for TLS:
+
+HTTP/2's primary changes from HTTP/1.1 focus on improved performance. Some key
+features such as multiplexing, header compression, prioritization and protocol
+negotiation evolved from work done in an earlier open, but non-standard
+protocol named SPDY. Chrome has supported SPDY since Chrome 6, but since most
+of the benefits are present in HTTP/2, it’s time to say goodbye. We plan to
+remove support for SPDY in early 2016, and to also remove support for the TLS
+extension named NPN in favor of ALPN in Chrome at the same time. Server
+developers are strongly encouraged to move to HTTP/2 and ALPN.
+
+We’re happy to have contributed to the open standards process that led to
+HTTP/2, and hope to see wide adoption given the broad industry engagement on
+standardization and implementation. [_(Chromium
+Blog)_](https://blog.chromium.org/2015/02/hello-http2-goodbye-spdy.html)
+
+The coevolution of SPDY and HTTP/2 enabled server, browser, and site developers
+to gain real-world experience with the new protocol as it was being developed.
+As a result, the HTTP/2 standard is one of the best and most extensively tested
+standards right out of the gate. By the time HTTP/2 was approved by the IESG,
+there were dozens of thoroughly tested and production-ready client and server
+implementations. In fact, just weeks after the final protocol was approved, many
+users were already enjoying its benefits as several popular browsers (and many
+sites) deployed full HTTP/2 support.
+
+## Design and technical goals
+
+Earlier versions of the HTTP protocol were intentionally designed for simplicity
+of implementation: HTTP/0.9 was a one-line protocol to bootstrap the World Wide
+Web; HTTP/1.0 documented the popular extensions to HTTP/0.9 in an informational
+standard; HTTP/1.1 introduced an official IETF standard; see
+[Brief History of HTTP](https://hpbn.co/brief-history-of-http/).
+As such, HTTP/0.9-1.x delivered exactly what it set out to do: HTTP is one of
+the most widely adopted application protocols on the Internet.
+
+Unfortunately, implementation simplicity also came at a cost of application
+performance: HTTP/1.x clients need to use multiple connections to achieve
+concurrency and reduce latency; HTTP/1.x does not compress request and response
+headers, causing unnecessary network traffic; HTTP/1.x does not allow effective
+resource prioritization, resulting in poor use of the underlying TCP connection;
+and so on.
+
+These limitations were not fatal, but as the web applications continued to grow
+in their scope, complexity, and importance in our everyday lives, they imposed a
+growing burden on both the developers and users of the web, which is the exact
+gap that HTTP/2 was designed to address:
+
+HTTP/2 enables a more efficient use of network resources and a reduced
+perception of latency by introducing header field compression and allowing
+multiple concurrent exchanges on the same connection… Specifically, it allows
+interleaving of request and response messages on the same connection and uses
+an efficient coding for HTTP header fields. It also allows prioritization of
+requests, letting more important requests complete more quickly, further
+improving performance.
+
+The resulting protocol is more friendly to the network, because fewer TCP
+connections can be used in comparison to HTTP/1.x. This means less competition
+with other flows, and longer-lived connections, which in turn leads to better
+utilization of available network capacity. Finally, HTTP/2 also enables more
+efficient processing of messages through use of binary message framing.
+[_(Hypertext Transfer Protocol version 2, Draft 17)_](https://tools.ietf.org/html/draft-ietf-httpbis-http2-17)
+
+It is important to note that HTTP/2 is extending, not replacing, the previous
+HTTP standards. The application semantics of HTTP are the same, and no changes
+were made to the offered functionality or core concepts such as HTTP methods,
+status codes, URIs, and header fields. These changes were explicitly out of scope
+for the HTTP/2 effort. That said, while the high-level API remains the same, it
+is important to understand how the low-level changes address the performance
+limitations of the previous protocols. Let’s take a brief tour of the binary
+framing layer and its features.
+
+## Binary framing layer
+
+At the core of all performance enhancements of HTTP/2 is the new binary framing
+layer, which dictates how the HTTP messages are encapsulated and transferred
+between the client and server.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/2a2cw0nAXe9Mi5txM4Mw.svg", alt="HTTP/2 binary framing layer", width="291", height="150" %}
+
+The "layer" refers to a design choice to introduce a new optimized encoding
+mechanism between the socket interface and the higher HTTP API exposed to our
+applications: the HTTP semantics, such as verbs, methods, and headers, are
+unaffected, but the way they are encoded while in transit is different.
+Unlike the newline delimited plaintext HTTP/1.x protocol, all HTTP/2
+communication is split into smaller messages and frames, each of which is
+encoded in binary format.
+
+As a result, both client and server must use the new binary encoding mechanism
+to understand each other: an HTTP/1.x client won’t understand an HTTP/2 only
+server, and vice versa. Thankfully, our applications remain blissfully unaware
+of all these changes, as the client and server perform all the necessary framing
+work on our behalf.
+
+## Streams, messages, and frames
+
+The introduction of the new binary framing mechanism changes how the data is
+exchanged between the client and server. To describe this process, let’s
+familiarize ourselves with the HTTP/2 terminology:
+
+- _Stream_: A bidirectional flow of bytes within an established connection,
+  which may carry one or more messages.
+- _Message_: A complete sequence of frames that map to a logical request or response message.
+- _Frame_: The smallest unit of communication in HTTP/2, each containing a frame header, which
+  at a minimum identifies the stream to which the frame belongs.
+
+The relation of these terms can be summarized as follows:
+
+- All communication is performed over a single TCP connection that can carry any number of
+  bidirectional streams.
+- Each stream has a unique identifier and optional priority information that is used to carry
+  bidirectional messages.
+- Each message is a logical HTTP message, such as a request, or response, which consists of
+  one or more frames.
+- The frame is the smallest unit of communication that carries a specific type of data—e.g.,
+  HTTP headers, message payload, and so on. Frames from different streams may be interleaved
+  and then reassembled via the embedded stream identifier in the header of each frame.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/0bfdEw00aKXFDxT0yEKt.svg", alt="HTTP/2 streams, messages, and frames", width="184", height="150" %}
+
+In short, HTTP/2 breaks down the HTTP protocol communication into an exchange of
+binary-encoded frames, which are then mapped to messages that belong to a
+particular stream, all of which are multiplexed within a single TCP
+connection. This is the foundation that enables all other features and
+performance optimizations provided by the HTTP/2 protocol.
+
+## Request and response multiplexing
+
+With HTTP/1.x, if the client wants to make multiple parallel requests to improve
+performance, then multiple TCP connections must be used (see
+[Using Multiple TCP Connections](https://hpbn.co/http1x/#using-multiple-tcp-connections)
+). This behavior is a direct consequence of the HTTP/1.x delivery model, which
+ensures that only one response can be delivered at a time (response queuing) per
+connection. Worse, this also results in head-of-line blocking and inefficient
+use of the underlying TCP connection.
+
+The new binary framing layer in HTTP/2 removes these limitations, and enables
+full request and response multiplexing, by allowing the client and server to
+break down an HTTP message into independent frames, interleave them, and then
+reassemble them on the other end.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/4RwALfscCwB7MDa1bGsV.svg", alt="HTTP/2 request and response multiplexing within a shared connection", width="300", height="83" %}
+
+The snapshot captures multiple streams in flight within the same connection. The
+client is transmitting a `DATA` frame (stream 5) to the server, while the server
+is transmitting an interleaved sequence of frames to the client for streams 1
+and 3. As a result, there are three parallel streams in flight.
+
+The ability to break down an HTTP message into independent frames, interleave
+them, and then reassemble them on the other end is the single most important
+enhancement of HTTP/2. In fact, it introduces a ripple effect of numerous
+performance benefits across the entire stack of all web technologies, enabling
+us to:
+
+- Interleave multiple requests in parallel without blocking on any one.
+- Interleave multiple responses in parallel without blocking on any one.
+- Use a single connection to deliver multiple requests and responses in parallel.
+- Remove unnecessary HTTP/1.x workarounds (see
+  [Optimizing for HTTP/1.x](https://hpbn.co/optimizing-application-delivery/#optimizing-for-http1x),
+  such as concatenated files, image sprites, and domain sharding).
+- Deliver lower page load times by eliminating unnecessary latency and improving
+  utilization of available network capacity.
+- _And much more…_
+
+The new binary framing layer in HTTP/2 resolves the head-of-line blocking
+problem found in HTTP/1.x and eliminates the need for multiple connections to
+enable parallel processing and delivery of requests and responses. As a result,
+this makes our applications faster, simpler, and cheaper to deploy.
+
+## Stream prioritization
+
+Once an HTTP message can be split into many individual frames, and we allow for
+frames from multiple streams to be multiplexed, the order in which the frames
+are interleaved and delivered both by the client and server becomes a critical
+performance consideration. To facilitate this, the HTTP/2 standard allows each
+stream to have an associated weight and dependency:
+
+- Each stream may be assigned an integer weight between 1 and 256.
+- Each stream may be given an explicit dependency on another stream.
+
+The combination of stream dependencies and weights allows the client to
+construct and communicate a "prioritization tree" that expresses how it would
+prefer to receive responses. In turn, the server can use this information to
+prioritize stream processing by controlling the allocation of CPU, memory, and
+other resources, and once the response data is available, allocation of
+bandwidth to ensure optimal delivery of high-priority responses to the client.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ydLldhPadjknvvrUiCai.svg", alt="HTTP/2 stream dependencies and weights", width="300", height="127" %}
+
+A stream dependency within HTTP/2 is declared by referencing the unique
+identifier of another stream as its parent; if the identifier is omitted the
+stream is said to be dependent on the "root stream". Declaring a stream
+dependency indicates that, if possible, the parent stream should be allocated
+resources ahead of its dependencies. In other words, "Please process and deliver
+response D before response C".
+
+Streams that share the same parent (in other words, sibling streams) should be allocated
+resources in proportion to their weight. For example, if stream A has a weight
+of 12 and its one sibling B has a weight of 4, then to determine the proportion
+of the resources that each of these streams should receive:
+
+1. Sum all the weights: `4 + 12 = 16`
+1. Divide each stream weight by the total weight: `A = 12/16, B = 4/16`
+
+Thus, stream A should receive three-quarters and stream B should receive one-
+quarter of available resources; stream B should receive one-third of the
+resources allocated to stream A. Let’s work through a few more hands-on examples
+in the image above. From left to right:
+
+1. Neither stream A nor B specifies a parent dependency and are said to be dependent
+   on the implicit "root stream"; A has a weight of 12, and B has a weight of 4.
+   Thus, based on proportional weights: stream B should receive one-third of the
+   resources allocated to stream A.
+1. Stream D is dependent on the root stream; C is dependent on D. Thus, D should
+   receive full allocation of resources ahead of C. The weights are inconsequential
+   because C’s dependency communicates a stronger preference.
+1. Stream D should receive full allocation of resources ahead of C; C should receive
+   full allocation of resources ahead of A and B; stream B should receive one-third of
+   the resources allocated to stream A.
+1. Stream D should receive full allocation of resources ahead of E and C; E and C
+   should receive equal allocation ahead of A and B; A and B should receive proportional
+   allocation based on their weights.
+
+As the above examples illustrate, the combination of stream dependencies and
+weights provides an expressive language for resource prioritization, which is a
+critical feature for improving browsing performance where we have many resource
+types with different dependencies and weights. Even better, the HTTP/2 protocol
+also allows the client to update these preferences at any point, which enables
+further optimizations in the browser. In other words, we can change dependencies
+and reallocate weights in response to user interaction and other signals.
+
+{% Aside %}
+Stream dependencies and weights express a transport preference, not a
+requirement, and as such do not guarantee a particular processing or
+transmission order. That is, the client cannot force the server to process the
+stream in a particular order using stream prioritization. While this may seem
+counterintuitive, it is in fact the desired behavior. We do not want to block
+the server from making progress on a lower priority resource if a higher
+priority resource is blocked.
+{% endAside %}
+
+## One connection per origin
+
+With the new binary framing mechanism in place, HTTP/2 no longer needs multiple
+TCP connections to multiplex streams in parallel; each stream is split into many
+frames, which can be interleaved and prioritized. As a result, all HTTP/2
+connections are persistent, and only one connection per origin is required,
+which offers numerous performance benefits.
+
+For both SPDY and HTTP/2 the killer feature is arbitrary multiplexing on a
+single well congestion controlled channel. It amazes me how important this is
+and how well it works. One great metric around that which I enjoy is the
+fraction of connections created that carry just a single HTTP transaction (and
+thus make that transaction bear all the overhead). For HTTP/1 74% of our
+active connections carry just a single transaction—persistent connections just
+aren’t as helpful as we all want. But in HTTP/2 that number plummets to 25%.
+That’s a huge win for overhead reduction. [_(HTTP/2 is Live in Firefox, Patrick
+McManus)_](http://bitsup.blogspot.co.uk/2015/02/http2-is-live-in-firefox.html)
+
+Most HTTP transfers are short and bursty, whereas TCP is optimized for long-
+lived, bulk data transfers. By reusing the same connection, HTTP/2 is able to
+both make more efficient use of each TCP connection, and also significantly
+reduce the overall protocol overhead. Further, the use of fewer connections
+reduces the memory and processing footprint along the full connection path
+(in other words, client, intermediaries, and origin servers). This reduces the overall
+operational costs and improves network utilization and capacity. As a result,
+the move to HTTP/2 should not only reduce network latency, but also help
+improve throughput and reduce the operational costs.
+
+{% Aside %}
+Reduced number of connections is a particularly important feature for
+improving performance of HTTPS deployments: this translates to fewer expensive
+TLS handshakes, better session reuse, and an overall reduction in required
+client and server resources.
+{% endAside %}
+
+## Flow control
+
+Flow control is a mechanism to prevent the sender from overwhelming the receiver
+with data it may not want or be able to process: the receiver may be busy, under
+heavy load, or may only be willing to allocate a fixed amount of resources for a
+particular stream. For example, the client may have requested a large video
+stream with high priority, but the user has paused the video and the client now
+wants to pause or throttle its delivery from the server to avoid fetching and
+buffering unnecessary data. Alternatively, a proxy server may have fast
+downstream and slow upstream connections and similarly wants to regulate how
+quickly the downstream delivers data to match the speed of upstream to control
+its resource usage; and so on.
+
+Do the above requirements remind you of TCP flow control? They should, as the
+problem is effectively identical (see
+[Flow Control](https://hpbn.co/building-blocks-of-tcp/#flow-control)). However,
+because the HTTP/2 streams are multiplexed within a single TCP connection, TCP
+flow control is both not granular enough, and does not provide the necessary
+application-level APIs to regulate the delivery of individual streams. To
+address this, HTTP/2 provides a set of simple building blocks that allow the
+client and server to implement their own stream- and connection-level flow
+control:
+
+- Flow control is directional. Each receiver may choose to set any window size
+  that it desires for each stream and the entire connection.
+- Flow control is credit-based. Each receiver advertises its initial connection
+  and stream flow control window (in bytes), which is reduced whenever the
+  sender emits a `DATA` frame and incremented via a `WINDOW_UPDATE` frame sent
+  by the receiver.
+- Flow control cannot be disabled. When the HTTP/2 connection is established the
+  client and server exchange `SETTINGS` frames, which set the flow control window
+  sizes in both directions. The default value of the flow control window is set
+  to 65,535 bytes, but the receiver can set a large maximum window size
+  (`2^31-1` bytes) and maintain it by sending a `WINDOW_UPDATE` frame whenever any
+  data is received.
+- Flow control is hop-by-hop, not end-to-end. That is, an intermediary can use it
+  to control resource use and implement resource allocation mechanisms based on
+  own criteria and heuristics.
+
+HTTP/2 does not specify any particular algorithm for implementing flow control.
+Instead, it provides the simple building blocks and defers the implementation to
+the client and server, which can use it to implement custom strategies to
+regulate resource use and allocation, as well as implement new delivery
+capabilities that may help improve both the real and perceived performance (see
+[Speed, Performance, and Human Perception](https://hpbn.co/primer-on-web-performance/#speed-performance-and-human-perception))
+of our web applications.
+
+For example, application-layer flow control allows the browser to fetch only a
+part of a particular resource, put the fetch on hold by reducing the stream flow
+control window down to zero, and then resume it later. In other words, it allows
+the browser to fetch a preview or first scan of an image, display it and allow
+other high priority fetches to proceed, and resume the fetch once more critical
+resources have finished loading.
+
+## Server push
+
+Another powerful new feature of HTTP/2 is the ability of the server to send
+multiple responses for a single client request. That is, in addition to the
+response to the original request, the server can push additional resources to
+the client (Figure 12-5), without the client having to request each one
+explicitly.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/o6lgFK9DiyJmdWwyJnyy.svg", alt="Server initiates new streams (promises) for push resources", width="300", height="117" %}
+
+{% Aside %}
+HTTP/2 breaks away from the strict request-response semantics and enables
+one-to-many and server-initiated push workflows that open up a world of new
+interaction possibilities both within and outside the browser. This is an
+enabling feature that will have important long-term consequences both for how we
+think about the protocol, and where and how it is used.
+{% endAside %}
+
+Why would we need such a mechanism in a browser? A typical web application
+consists of dozens of resources, all of which are discovered by the client by
+examining the document provided by the server. As a result, why not eliminate
+the extra latency and let the server push the associated resources ahead of
+time? The server already knows which resources the client will require; that’s
+server push.
+
+In fact, if you have ever inlined a CSS, JavaScript, or any other asset via a
+data URI (see [Resource Inlining](https://hpbn.co/http1x/#resource-inlining)),
+then you already have hands-on experience with server push. By manually inlining
+the resource into the document, we are, in effect, pushing that resource to the
+client, without waiting for the client to request it. With HTTP/2 we can achieve
+the same results, but with additional performance benefits. Push resources can be:
+
+- Cached by the client
+- Reused across different pages
+- Multiplexed alongside other resources
+- Prioritized by the server
+- Declined by the client
+
+### PUSH_PROMISE 101
+
+All server push streams are initiated via `PUSH_PROMISE` frames, which signal the
+server’s intent to push the described resources to the client and need to be
+delivered ahead of the response data that requests the pushed resources. This
+delivery order is critical: the client needs to know which resources the server
+intends to push to avoid creating duplicate requests for these
+resources. The simplest strategy to satisfy this requirement is to send all
+`PUSH_PROMISE` frames, which contain just the HTTP headers of the promised
+resource, ahead of the parent’s response (in other words, `DATA` frames).
+
+Once the client receives a `PUSH_PROMISE` frame it has the option to decline the
+stream (via a `RST_STREAM` frame) if it wants to. (This might occur for example
+because the resource is already in cache.) This is an important improvement over
+HTTP/1.x. By contrast, the use of resource inlining, which is a popular
+"optimization" for HTTP/1.x, is equivalent to a "forced push": the client cannot
+opt-out, cancel it, or process the inlined resource individually.
+
+With HTTP/2 the client remains in full control of how server push is used. The
+client can limit the number of concurrently pushed streams; adjust the initial
+flow control window to control how much data is pushed when the stream is first
+opened; or disable server push entirely. These preferences are communicated via
+the `SETTINGS` frames at the beginning of the HTTP/2 connection and may be updated
+at any time.
+
+Each pushed resource is a stream that, unlike an inlined resource, allows it to
+be individually multiplexed, prioritized, and processed by the client. The only
+security restriction, as enforced by the browser, is that pushed resources must
+obey the same-origin policy: the server must be authoritative for the provided
+content.
+
+## Header compression
+
+Each HTTP transfer carries a set of headers that describe the transferred
+resource and its properties. In HTTP/1.x, this metadata is always sent as plain
+text and adds anywhere from 500–800 bytes of overhead per transfer, and
+sometimes kilobytes more if HTTP cookies are being used. (See
+[Measuring and Controlling Protocol Overhead](https://hpbn.co/http1x/#measuring-and-controlling-protocol-overhead)
+.) To reduce this overhead and improve performance, HTTP/2 compresses request
+and response header metadata using the HPACK compression format that uses two
+simple but powerful techniques:
+
+1. It allows the transmitted header fields to be encoded via a static Huffman
+   code, which reduces their individual transfer size.
+1. It requires that both the client and server maintain and update an indexed
+   list of previously seen header fields (in other words, it establishes a shared
+   compression context), which is then used as a reference to efficiently encode
+   previously transmitted values.
+
+Huffman coding allows the individual values to be compressed when transferred,
+and the indexed list of previously transferred values allows us to encode
+duplicate values by transferring index values that can be used to efficiently
+look up and reconstruct the full header keys and values.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/IYfczfC6ZCTxUVboaEZy.svg", alt="HPACK: Header Compression for HTTP/2", width="178", height="150" %}
+
+As one further optimization, the HPACK compression context consists of a static
+and dynamic table: the static table is defined in the specification and
+provides a list of common HTTP header fields that all connections are likely to
+use (e.g., valid header names); the dynamic table is initially empty and is
+updated based on exchanged values within a particular connection. As a result,
+the size of each request is reduced by using static Huffman coding for values
+that haven’t been seen before, and substitution of indexes for values that are
+already present in the static or dynamic tables on each side.
+
+{% Aside %}
+The definitions of the request and response header fields in HTTP/2 remains
+unchanged, with a few minor exceptions: all header field names are lowercase,
+and the request line is now split into individual `:method`, `:scheme`,
+`:authority`, and `:path` pseudo-header fields.
+{% endAside %}
+
+### Security and performance of HPACK
+
+Early versions of HTTP/2 and SPDY used zlib, with a custom dictionary, to
+compress all HTTP headers. This delivered an 85% to 88% reduction in the size
+of the transferred header data, and a significant improvement in page load time
+latency:
+
+On the lower-bandwidth DSL link, in which the upload link is only 375 Kbps,
+request header compression in particular, led to significant page load time
+improvements for certain sites (in other words, those that issued large number of
+resource requests). We found a reduction of 45–1142 ms in page load time
+simply due to header compression. [_(SPDY whitepaper,
+chromium.org)_](https://www.chromium.org/spdy/spdy-whitepaper)
+
+However, in the summer of 2012, a "CRIME" security attack was published against
+TLS and SPDY compression algorithms, which could result in session hijacking. As
+a result, the zlib compression algorithm was replaced by HPACK, which was
+specifically designed to: address the discovered security issues, be efficient
+and simple to implement correctly, and of course, enable good compression of
+HTTP header metadata.
+
+For full details of the HPACK compression algorithm, see
+[IETF HPACK - Header Compression for HTTP/2](https://tools.ietf.org/html/draft-ietf-httpbis-header-compression).
+
+## Further reading
+
+- [“HTTP/2”](https://hpbn.co/http2/)
+  – The full article by Ilya Grigorik
+- [“Setting up HTTP/2”](https://dassur.ma/things/h2setup/)
+  – How to set up HTTP/2 in different backends by Surma
+- [“HTTP/2 is here,
+  let’s optimize!”](https://docs.google.com/presentation/d/1r7QXGYOLCh4fcUq0jDdDwKJWNqWK1o4xMtYpKZCJYjM/edit#slide=id.p19)
+  – Presentation by Ilya Grigorik from Velocity 2015
+- [“Rules of Thumb for HTTP/2 Push”](https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit)
+  – An analysis by Tom Bergan, Simon Pelchat and Michael Buettner on when and how to use push.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/performance-mystery/index.md b/src/site/content/en/blog/performance-mystery/index.md
new file mode 100644
index 00000000000..61367919bf8
--- /dev/null
+++ b/src/site/content/en/blog/performance-mystery/index.md
@@ -0,0 +1,250 @@
+---
+layout: post
+title: Use forensics and detective work to solve JavaScript performance mysteries
+authors:
+  - johnmccutchan
+date: 2013-06-13
+tags:
+  - blog
+---
+## Introduction
+
+In recent years, web applications have been sped up considerably. Many applications now run fast enough that I've heard some developers wonder aloud "is the web fast enough?". For some applications it may be, but, for the developers working on high performance applications, we know it is not fast enough. Despite the amazing advances in JavaScript virtual machine technology, a [recent study](https://docs.google.com/a/google.com/document/d/1k8d4SsYJoCfmw6Te8Ijf3WEyotNHp6YMy1PEgn_o5Yg/edit) showed that Google applications spend between 50% and 70% of their time inside [V8](https://code.google.com/p/v8/). Your application has a finite amount of time, shaving cycles off of one system means another system can do more. Remember, applications running at 60fps only have 16ms per frame or else - [jank](http://jankfree.org). Read on, to learn about optimizing JavaScript and profile JavaScript applications, in a from the trenches story of the performance detectives on the V8 team tracking down an obscure performance problem in [Find Your Way to Oz](http://www.findyourwaytooz.com/).
+
+## Google I/O 2013 Session
+
+I presented this material at Google I/O 2013. Check out the video below:
+
+{% YouTube id="VhpdsjBUS3g" %}
+
+## Why does performance matter?
+
+CPU cycles are a zero sum game. Making one part of your system use fewer allows you to use more in another or run smoother overall. Running faster and doing more are often competing goals. Users demand new features while also expecting your application to run smoother. JavaScript virtual machines keep getting faster but that is not a reason for ignoring performance problems that you can fix today, as the many developers, dealing with performance problems in their web applications already know. In real-time, high frame rate, applications the pressure to be jank free is paramount. [Insomniac Games](http://www.insomniacgames.com/) produced a [study](http://www.eurogamer.net/articles/insomniac-60fps-no-more) which showed that a solid, sustained frame rate is important to the success of a game: "A solid frame-rate is still a sign of professional, well-made product." Web developers take note.
+
+## Solving Performance Problems
+
+Solving a performance problem is like solving a crime. You need to carefully examine the evidence, check suspected causes, and experiment with different solutions. All along the way you must document your measurements so that you can be sure you've actually fixed the problem. There is very little difference between this method and how criminal detectives crack a case. Detectives examine evidence, interrogate suspects, and run experiments hoping to find the smoking gun.
+
+## V8 CSI: Oz
+
+The amazing wizards building [Find Your Way to Oz](http://www.findyourwaytooz.com/) approached the V8 team with a performance problem they couldn't solve on their own. Occasionally Oz would freeze, causing jank. The Oz developers had done some initial investigation using the [Timeline Panel](https://developer.chrome.com/docs/devtools/evaluate-performance/performance-reference) in [Chrome DevTools](https://developer.chrome.com/docs/devtools/). Looking at memory usage they encountered the dreaded [saw tooth](http://en.wikipedia.org/wiki/Sawtooth_wave) graph. Once per second the garbage collector was collecting 10MB of garbage and the garbage collection pauses corresponded with the jank. Similar to the following screenshot from the Timeline in Chrome Devtools:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zYrtkDoYJZOYGuSg7WVb.png", alt="Devtools timeline", width="467", height="81" %}
+</figure>
+
+The V8 detectives, Jakob and Yang took up the case. What took place was a long back and forth between Jakob and Yang from the V8 team and the Oz team. I've distilled this conversation down to the important events that helped track down this problem.
+
+## Evidence
+
+The first step is to collect and study the initial evidence.
+
+### What type of application are we looking at?
+
+The Oz demo is an interactive 3D application.  Because of this, it is very sensitive to pauses caused by garbage collections. Remember, an interactive application running at [60fps has 16ms to do all JavaScript work and must leave some of that time for Chrome to process the graphics calls and draw the screen](http://www.html5rocks.com/en/tutorials/speed/rendering/).
+
+Oz performs a lot of arithmetic computation on double values and makes frequent calls to WebAudio and WebGL.
+
+### What kind of performance problem are we seeing?
+
+We are seeing pauses aka frame drops aka jank. These pauses correlate with garbage collection runs.
+
+### Are the developers following best practices?
+
+Yes, the Oz developers are well versed in JavaScript VM performance and optimization techniques. It's worth noting that the Oz developers were using [CoffeeScript](http://coffeescript.org/) as their source language and producing JavaScript code via the CoffeeScript compiler. This made some of the investigation trickier because of the disconnect between the code being written by the Oz developers and the code being consumed by V8. Chrome DevTools now supports [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/) which would have made this easier.
+
+### Why does the garbage collector run?
+
+Memory in JavaScript is automatically managed for the developer by the VM. V8 uses a common garbage collection system where memory is divided into two (or more) [generations](http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)#Generational_GC_.28ephemeral_GC.29). The young generation holds objects that have recently been allocated. If an object survives long enough it is moved to the old generation.
+
+The young generation is collected at a much higher frequency than the old generation is collected. This is by design, as young generation collection is much cheaper. It is often safe to assume that frequent GC pauses are caused by young generation collection.
+
+In V8 the young memory space is divided into two equally sized contiguous blocks of memory. Only one of these two blocks of memory is in use at any given time and it is called the to space. While there is remaining memory in the to space, allocating a new object is cheap. A cursor in the to space is moved forward the number of bytes needed for the new object. This continues until the to space is exhausted. At this point the program is stopped and collection begins.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pR8BlH788T0cNWdO8Yls.png", alt="V8 young memory", width="545", height="346" %}
+</figure>
+
+At this point the from space and to space are swapped. What was the to space and is now the from space, is scanned from beginning to end and any objects which are still alive are copied into the to space or are promoted to the old generation heap. If you want details, I suggest you read about [Cheney's Algorithm](http://en.wikipedia.org/wiki/Cheney&#39;s_algorithm).
+
+Intuitively you should understand that every time an object is allocated either implicitly or explicitly (via a call to new, [], or {}) your application is moving closer and closer to a garbage collection and the dreaded application pause.
+
+### Is 10MB/sec of garbage expected for this application?
+
+In short, no. The developer is not doing anything to expect 10MB/sec of garbage.
+
+## Suspects
+
+The next phase of the investigation is to determine potential suspects and then whittle them down.
+
+### Suspect #1
+
+Calling new during the frame. Remember that each object that is allocated moves you ever closer to a GC pause.  Applications running at high frame rates in particular should strive for zero allocations per frame. Usually this requires a carefully thought out, application specific, object recycling system. The V8 detectives checked with the Oz team and they were not calling new. In fact the Oz team was already well aware of this requirement and said "That would be embarrassing". Scratch this one off the list.
+
+### Suspect #2
+
+Modifying the "shape" of an object outside of the constructor. This happens whenever a new property is added to an object outside of the constructor.  This creates a new [hidden class](https://developers.google.com/v8/design) for the object. When optimized code sees this new hidden class a deopt will be triggered, unoptimized code will execute until the code is classified as hot and optimized again. This de-optimization,re-optimization churn will result in jank but does not strictly correlate with excessive garbage creation. After a careful audit of the code, it was confirmed that object shapes were static, thus suspect #2 was ruled out.
+
+### Suspect #3
+
+Arithmetic in unoptimized code. In unoptimized code all computation results in actual objects being allocated. For example, this snippet:
+
+```js
+var a = p * d;
+var b = c + 3;
+var c = 3.3 * dt;
+point.x = a * b * c;
+```
+
+Results in 5 HeapNumber objects being created. The first three are for the variables, a, b, and c. The 4th is for the anonymous value (a &ast; b) and the 5th is from #4 &ast; c; The 5th is ultimately assigned to point.x.
+
+Oz does thousands of these operations per frame. If any of these computations occur in functions which are never optimized, they could be the cause of the garbage. Because computations in unoptimized allocate
+memory even for temporary results.
+
+### Suspect #4
+
+Storing a double precision number to a property. A HeapNumber object must be created to store the number and the property altered to point at this new object. Altering the property to point at the HeapNumber will not produce garbage. However, it is possible that there are many double precision numbers being stored as object properties. The code is full of statements like the following:
+
+```js
+sprite.position.x += 0.5 * (dt);
+```
+
+In optimized code, every time x is assigned a freshly computed value, a seemingly innocuous statement, a new HeapNumber object is implicitly allocated, bringing us closer to a garbage collection pause.
+
+Note that by using a [typed array](http://www.khronos.org/registry/typedarray/specs/latest/) (or a regular array which only has held doubles) you can avoid this specific problem entirely as the storage for the double precision number is allocated only once and repeatedly changing the value does not require new storage to be allocated.
+
+Suspect #4 is a possibility.
+
+## Forensics
+
+At this point the detectives have two possible suspects: storing heap numbers as object properties and arithmetic computation happening inside unoptimized functions. It was time to head to the lab and determine definitively which suspect was guilty. NOTE: In this section I will be using a reproduction of the problem found in the actual Oz source code. This reproduction is orders of magnitude smaller than the original code, thus easier to reason about.
+
+### Experiment #1
+
+Checking for suspect #3 (arithmetic computation inside unoptimized functions). The V8 JavaScript engine has a logging system builtin which can provide great insight into what is happening under the hood.
+
+Starting with Chrome not running at all, launching Chrome with the flags:
+
+```shell
+--no-sandbox --js-flags="--prof --noprof-lazy --log-timer-events"
+```
+
+and then fully quitting Chrome will result in a v8.log file in the current directory.
+
+In order to interpret the contents of v8.log, you must [download](https://code.google.com/p/v8/wiki/Source) the same version of v8 that your Chrome is using (check about:version), and [build it](https://developers.google.com/v8/build).
+
+After successfully building v8, you can process the log using the tick processor:
+
+```shell
+$ tools/linux-tick-processor /path/to/v8.log
+```
+
+(Substitute mac or windows for linux depending on your platform.)
+(This tool must be run from the top level source directory in v8.)
+
+The tick processor displays a text based table of JavaScript functions which had the most ticks:
+
+```shell
+[JavaScript]:
+ticks  total  nonlib   name
+167   61.2%   61.2%  LazyCompile: *opt demo.js:12
+ 40   14.7%   14.7%  LazyCompile: unopt demo.js:20
+ 15    5.5%    5.5%  Stub: KeyedLoadElementStub
+ 13    4.8%    4.8%  Stub: BinaryOpStub_MUL_Alloc_Number+Smi
+  6    2.2%    2.2%  Stub: BinaryOpStub_ADD_OverwriteRight_Number+Number
+  4    1.5%    1.5%  Stub: KeyedStoreElementStub
+  4    1.5%    1.5%  KeyedLoadIC:  {12}
+  2    0.7%    0.7%  KeyedStoreIC:  {13}
+  1    0.4%    0.4%  LazyCompile: ~main demo.js:30
+```
+
+You can see demo.js had three functions: opt, unopt, and main. Optimized functions have an asterisk (*) next to their names. Observe that the function opt is optimized and unopt is unoptimized.
+
+Another important tool in the V8 detective's tool bag is plot-timer-event. It can be executed like so:
+
+```shell
+$ tools/plot-timer-event /path/to/v8.log
+```
+
+After being run, a png file called timer-events.png is in the current directory. Opening it up you should see something that looks like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ycghUWKsSE0VSyih8QmE.png", alt="Timer events", width="800", height="300" %}
+</figure>
+
+Aside from the graph along the bottom, data is displayed in rows. The X axis is time (ms). The left hand side includes labels for each row:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PrC9GkRVxrrpdKPGAxh7.png", alt="Timer events Y axis", width="524", height="568" %}
+</figure>
+
+The V8.Execute row has black vertical line drawn on it at each profile tick where V8 was executing JavaScript code. V8.GCScavenger has a blue vertical line drawn on it at each profile tick where V8 was performing a new generation collection. Similarly for the rest of the V8 states.
+
+One of the most important rows is the "code kind being executed". It will be green whenever optimized code is executing and mix of red and blue when unoptimized code is being executed. The following screenshot shows the transition from optimized to unoptimized and then back to optimized code:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/u24agPudgPibL91vBf6E.png", alt="Code kind being executed", width="800", height="43" %}
+</figure>
+
+Ideally, but never immediately, this line will be solid green. Meaning that your program has transitioned into an optimized steady state. Unoptimized code will always run slower than optimized code.
+
+If you've gone to this length it's worth noting that you can work much quicker by refactoring your application so that it can run in the v8 debug shell: d8. Using d8 gives you faster iteration times with the tick-processor and plot-timer-event tools. Another side effect of using d8 is that it becomes easier to isolate actual problem, reducing the amount of noise present in the data.
+
+Looking at the timer events plot from the Oz source code, showed a transition from optimized to unoptimized code and, while executing unoptimized code many new generation collections were triggered, similar to the following screenshot (note time has been removed in the middle):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/svYDqOn9SLBhh3nETaL4.png", alt="Timer events plot", width="333", height="325" %}
+</figure>
+
+If you look closely you can see that the black lines indicating when V8 is executing JavaScript code are missing at precisely the same profile tick times as the new generation collections (blue lines). This demonstrates clearly that while garbage is being collected, the script is paused.
+
+Looking at the tick processor output from the Oz source code, the top function (updateSprites) was not optimized. In other words, the function in which the program spent the most time was also unoptimized. This strongly indicates that suspect #3 is the culprit. The source for updateSprites contained loops that looked like these:
+
+```js
+function updateSprites(dt) {
+    for (var sprite in sprites) {
+        sprite.position.x += 0.5 * dt;
+        // 20 more lines of arithmetic computation.
+    }
+}
+```
+
+Knowing V8 as well as they do, they immediately recognized that the for-i-in loop construct is sometimes not optimized by V8. In other words, if a function contains a for-i-in loop construct, it may not be optimized. This is a special case today, and will likely change in the future, that is, V8 may one day optimize this loop construct. Since we aren't V8 detectives and don't know V8 like the back of our hands, how can we determine why updateSprites was not optimized?
+
+### Experiment #2
+
+Running Chrome with this flag:
+
+```shell
+--js-flags="--trace-deopt --trace-opt-verbose"
+```
+
+displays a verbose log of optimization and deoptimization data. Searching through the data for updateSprites we find:
+
+[disabled optimization for updateSprites, reason: ForInStatement is not fast case]
+
+Just as the detectives hypothesized, the for-i-in loop construct was the reason.
+
+## Case Closed
+
+After discovering the reason updateSprites was not optimized, the fix was simple, simply move the computation into its own function, that is:
+
+```js
+function updateSprite(sprite, dt) {
+    sprite.position.x += 0.5 * dt;
+    // 20 more lines of arithmetic computation.
+}
+
+function updateSprites(dt) {
+    for (var sprite in sprites) {
+        updateSprite(sprite, dt);
+    }
+}
+```
+updateSprite will be optimized, resulting in far fewer HeapNumber objects, resulting in less frequent GC pauses. It should be easy for you to confirm this by performing the same experiments with new code.  The careful reader will notice that double numbers are still being stored as properties. If profiling indicates it is worth it, changing position to be an array of doubles or a typed data array would further reduce the number of objects being created.
+
+## Epilogue
+
+The Oz developers didn't stop there. Armed with the tools and techniques shared with them by the V8 detectives, they were able to find a few other functions that were stuck in deoptimization hell and factored the computation code into leaf functions which were optimized, resulting in even better performance.
+
+Get out there and start solving some performance crimes!
diff --git a/src/site/content/en/blog/performance-optimizing-content-efficiency-client-hints/index.md b/src/site/content/en/blog/performance-optimizing-content-efficiency-client-hints/index.md
new file mode 100644
index 00000000000..a7851d22ca4
--- /dev/null
+++ b/src/site/content/en/blog/performance-optimizing-content-efficiency-client-hints/index.md
@@ -0,0 +1,722 @@
+---
+title: Adapting to Users with Client Hints
+description: >
+  Client hints are a set of HTTP request headers we can use to change how we deliver page resources based on characteristics of a user's device and network connection. In this article, you'll learn all about client hints, how they work, and a few ideas on how you can use them to make your site faster for users.
+authors:
+  - jlwagner
+date: 2018-11-22
+updated: 2021-02-17
+---
+
+Developing sites that are fast everywhere can be a tricky prospect. The plethora
+of device capabilities&mdash;and the quality of the networks they connect
+to&mdash;can make it seem like an insurmountable task. While we can take
+advantage of browser features to improve loading performance, how do we know
+what the user’s device is capable of, or the quality of their network
+connection? The solution is [client
+hints](https://tools.ietf.org/html/draft-ietf-httpbis-client-hints-06)!
+
+Client hints are a set of opt-in HTTP request headers that give us insight into
+these aspects of the user’s device and the network they’re connected to. By
+tapping into this information server side, we can change _how_ we deliver
+content based on device and/or network conditions. This can help us to create
+more inclusive user experiences.
+
+## It’s All About Content Negotiation
+
+Client hints are another method of _content negotiation_, which means changing
+content responses based on browser request headers.
+
+One example of content negotiation involves the
+[`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept)
+request header. It describes what _content_ types the browser understands, which
+the server can use to _negotiate_ the response. For image requests, the content
+of Chrome’s `Accept` header is:
+
+```http
+Accept: image/webp,image/apng,image/*,*/*;q=0.8
+```
+
+While all browsers support image formats like JPEG, PNG, and GIF, Accept tells
+in this case that the browser _also_ supports [WebP](https://developers.google.com/speed/webp/) and
+[APNG](https://en.wikipedia.org/wiki/APNG). Using this information, we can
+negotiate the best image types for each browser:
+
+```php
+<?php
+// Check Accept for an "image/webp" substring.
+$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;
+
+// Set the image URL based on the browser's WebP support status.
+$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
+?>
+<img src="<?php echo($imageFile); ?>" alt="I'm an image!">
+```
+
+Like `Accept`, client hints are another avenue for negotiating content, but in
+the context of device capabilities and network conditions. With client hints, we
+can make server side performance decisions based on a user's individual
+experience, such as deciding whether non-critical resources should be served to
+users with poor network conditions. In this guide, we’ll describe all the
+available hints and some ways you can use them to make content delivery more
+accommodating to users.
+
+## Opting in
+
+Unlike the `Accept` header, client hints don’t just magically appear (with the
+exception of `Save-Data`, which we’ll discuss later). In the interest of keeping
+request headers at a minimum, you’ll need to opt into which client hints you’ll
+want to receive by sending an `Accept-CH` header when a user requests a
+resource:
+
+```http
+Accept-CH: Viewport-Width, Downlink
+```
+
+The value for `Accept-CH` is a comma-separated list of requested hints the site
+will use in determining the results for subsequent resource request. When the
+client reads this header, it’s being told “this site wants the `Viewport-Width`
+and `Downlink` client hints.” Don’t worry about the specific hints themselves.
+We’ll get to those in a moment.
+
+{% Aside %}
+In order for client hints to work at all, your site must be served over
+HTTPS!
+{% endAside %}
+
+You can set these opt-in headers in any back-end language. For example, [PHP’s
+`header` function](http://php.net/manual/en/function.header.php) could be used.
+You could even set these opt-in headers with [the `http-equiv`
+attribute](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-http-equiv)
+on a `<meta>` tag:
+
+```html
+<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
+```
+
+{% Aside 'warning' %}
+Earlier versions of the spec included the `Accept-CH-Lifetime` header
+which has now been removed and sites should also stop sending it. If you were
+using this to enable hints to persist over browser sessions you should instead
+ensure you are sending the necessary `Accept-CH` headers on the relevant
+responses.
+{% endAside %}
+
+## All the client hints!
+
+Client hints describe one of two things: the device your users, well, _use_, and
+the network they’re using to access your site. Let’s briefly cover all of the
+hints that are available.
+
+### Device hints
+
+Some client hints describe characteristics of the user’s device, usually screen
+characteristics. Some of them can help you choose the optimal media resource for
+a given user’s screen, but not all of them are necessarily media-centric.
+
+Before we get into this list, it might be helpful to learn a few key terms used
+to describe screens and media resolution:
+
+**Intrinsic size:** the actual dimensions of a media resource. For example, if
+you open an image in Photoshop, the dimensions shown in the image size dialogue
+describe its _intrinsic size_.
+
+**Density-corrected intrinsic size:** the dimensions of a media resource after
+it has been corrected for pixel density. It’s the image’s _intrinsic size_
+divided by a [device pixel
+ratio](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio).
+For example, let’s take this markup:
+
+```html
+<img
+  src="whats-up-1x.png"
+  srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
+  alt="I'm that image you wanted."
+/>
+```
+
+Let’s say the intrinsic size of the `1x` image in this case is 320x240, and the
+`2x` image’s intrinsic size is 640x480. If this markup is parsed by a client
+installed on a device with a screen device pixel ratio of 2 (e.g., a Retina
+screen), the `2x` image is requested. The _density-corrected intrinsic size_ of
+the `2x` image is 320x240, since 640x480 divided by 2 is 320x240.
+
+**Extrinsic size:** the size of a media resource after CSS and other layout
+factors (such as `width` and `height` attributes) have been applied to it. Let’s
+say you have an `<img>` element that loads an image with a density-corrected
+intrinsic size of 320x240, but it also has CSS `width` and `height` properties
+with values of `256px` and `192px` applied to it, respectively. In this example,
+the _extrinsic size_ of that `<img>` element becomes 256x192.
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/mYLOc0CZtVxXCNDoHcsK.svg", alt="An illustration of intrinsic size versus
+extrinsic size. A box sized 320x240 pixels is shown with a label of INTRINSIC
+SIZE. Within it is a smaller box sized at 256x192 pixels, which represents an
+HTML img element with CSS applied to it. This box is labeled EXTRINSIC
+SIZE. To the right is a box containing CSS applied to the element which
+modifies the img element's layout so that its extrinsic size differs
+from its intrinsic size.", width="265", height="150" %}
+  <figcaption><em><strong>Figure 1</strong>. An illustration of intrinsic versus
+extrinsic size. An image gains its extrinsic size after layout factors have been
+applied to it. In this case, applying CSS rules of <code>width: 256px;</code>
+and <code>height: 192px;</code> transforms a 320x240 intrinsically sized image
+to a 256x192 extrinsically sized one.</em></figcaption>
+</figure>
+
+With some terminology under our belt, let’s get into the list of device-specific
+client hints available to you.
+
+#### Viewport-Width
+
+`Viewport-Width` is the width of the user’s viewport in CSS pixels:
+
+```http
+Viewport-Width: 320
+```
+
+This hint can used with other screen-specific hints to deliver different
+treatments (i.e., crops) of an image which are optimal for specific screen sizes
+(i.e., [art
+direction](https://www.smashingmagazine.com/2016/02/automatically-art-directed-responsive-images-go/)),
+or to omit resources that are unnecessary for the current screen width.
+
+#### DPR
+
+`DPR`, short for device pixel ratio, reports the ratio of physical pixels to CSS
+pixels of the user’s screen:
+
+```http
+DPR: 2
+```
+
+This hint is useful when selecting image sources which correspond to a screen's
+pixel density (like `x` descriptors do in the [`srcset`
+attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset)).
+
+#### Width
+
+The `Width` hint appears on requests for image resources fired off by `<img>` or
+`<source>` tags using the [`sizes`
+attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes).
+`sizes` tells the browser what the extrinsic size of the resource will be;
+`Width` uses that extrinsic size to request an image with an intrinsic size that
+is optimal for the current layout.
+
+For example, let’s say a user requests a page with a 320 CSS pixel wide screen
+with a DPR of 2. The device loads a document with an `<img>` element containing
+a `sizes` attribute value of `85vw` (i.e., 85% of the viewport width for all
+screen sizes). If the `Width` hint has been opted-into, the client will send
+this `Width` hint to the server with the request for the `<img>`’s `src`:
+
+```http
+Width: 544
+```
+
+In this case, the client is hinting to the server that an optimal intrinsic
+width for the requested image would be 85% of the viewport width (272 pixels)
+multiplied by the screen’s DPR (2), which equals 544 pixels.
+
+This hint is especially powerful because it not only takes into account the
+density-corrected width of the screen, but also reconciles this critical piece
+of information with the image’s extrinsic size within the layout. This gives
+servers the opportunity to negotiate image responses that are optimal for both
+the screen _and_ the layout.
+
+#### Content-DPR
+
+While you already know that _screens_ have a device pixel ratio, resources also
+have their own pixel ratios. In the simplest resource selection use cases, pixel
+ratios between devices and resources can be the same. But! In cases where both
+the `DPR` and `Width` headers are in play, the extrinsic size of a resource can
+produce scenarios where the two differ. This is where the `Content-DPR` hint
+comes into play.
+
+Unlike other client hints, `Content-DPR` is not a _request_ header to be used by
+servers, but rather a _response_ header servers _must_ send whenever `DPR` and
+`Width` hints are used to select a resource. The value of `Content-DPR` should
+be the result of this equation:
+
+`Content-DPR` = [Selected image resource size] / ([`Width`] / [`DPR`])
+
+When a `Content-DPR` request header is sent, the browser will know how to scale
+the given image for the screen’s device pixel ratio and the layout. Without it,
+images may not scale properly.
+
+#### Device-Memory
+
+Technically a part of the [Device Memory
+API](https://www.w3.org/TR/device-memory-1/), `Device-Memory` reveals [the
+approximate amount of
+memory](https://www.w3.org/TR/device-memory-1/#sec-device-memory-client-hint-header)
+the current device has in GiB:
+
+```http
+Device-Memory: 2
+```
+
+{% Aside %}
+Because this information [could be used to fingerprint
+users](https://blog.mozilla.org/internetcitizen/2018/07/26/this-is-your-digital-fingerprint/),
+the value of `Device-Memory` is intentionally coarse. Valid values are `0.25`,
+`0.5`, `1`, `2`, `4`, and `8`.
+{% endAside %}
+
+A possible use case for this hint would be to reduce the amount of JavaScript
+sent to browsers on devices with limited memory, [as JavaScript is the most
+resource-intensive content type browsers typically
+load](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4).
+Or you could send lower DPR images as they use less memory to decode.
+
+### Network hints
+
+The [Network Information API](https://wicg.github.io/netinfo/) provides another
+category of client hints that describe the performance of the user’s network
+connection. In my opinion, these are the most useful set of hints. With them, we
+have the ability to tailor experiences to users by changing how we deliver
+resources to clients on slow connections.
+
+{% Aside %}
+Network hint values are predictions based on past latency and bandwidth
+readings. As such, they’re not 100% accurate, but are assumed to be good enough
+for client hint use cases.
+{% endAside %}
+
+#### RTT
+
+The `RTT` hint provides the approximate _Round Trip Time_, in milliseconds, on
+the application layer. The `RTT` hint, unlike transport layer RTT, includes
+server processing time.
+
+```http
+RTT: 125
+```
+
+{% Aside %}
+The value of `RTT` is rounded to the nearest 25 milliseconds to prevent
+fingerprinting.
+{% endAside %}
+
+This hint is useful because of the role latency plays in loading performance.
+Using the `RTT` hint, we can make decisions based on network responsiveness,
+which can help speed the delivery of an entire experience (e.g., through
+omitting some requests).
+
+#### Downlink
+
+While latency is important in loading performance, bandwidth is influential,
+too. The `Downlink` hint, expressed in megabits per second (Mbps), reveals the
+_approximate_ downstream speed of the user’s connection:
+
+```http
+Downlink: 2.5
+```
+
+{% Aside %}
+The value of `Downlink` is rounded to the nearest multiple of 25 kilobits
+per second. Because again, fingerprinting.
+{% endAside %}
+
+In conjunction with `RTT`, `Downlink` can be useful in changing how content is
+delivered to users based on the quality of a network connection.
+
+#### ECT
+
+The `ECT` hint stands for _Effective Connection Type_. Its value is one of an
+enumerated list of connection types, each of which describes [a connection
+within specified ranges of both `RTT` and `Downlink`
+values](https://wicg.github.io/netinfo/#effective-connection-types).
+
+This header doesn’t explain what the _actual_ connection type is&mdash;for
+example, it doesn’t report whether your gateway is a cell tower or a wifi access
+point. Rather, it analyzes the current connection’s latency and bandwidth and
+determines what network profile it resembles most. For example, if you connect
+through wifi to a slow network, `ECT` may be populated with a value of `2g`,
+which is the closest approximation of the _effective_ connection:
+
+```http
+ECT: 2g
+```
+
+Valid values for `ECT` are `4g`, `3g`, `2g`, and `slow-2g`. This hint can be
+used as a starting point for assessing connection quality, and subsequently
+refined using the `RTT` and `Downlink` hints.
+
+#### Save-Data
+
+`Save-Data` isn’t so much a hint describing network conditions as it is a user
+preference stating that pages should send less data.
+
+{% Aside %}
+Of all the client hints, `Save-Data` is the only one you _can’t_ opt into
+with `Accept-CH`. Only the user can control whether this hint is sent by
+toggling Chrome’s [Data Saver
+feature](https://support.google.com/chrome/answer/2392284) on Android devices.
+{% endAside %}
+
+I prefer to classify `Save-Data` as a network hint because many of the things
+you would do with it are similar to other network hints. Users may also be
+likely to enable it in high latency/low bandwidth environments. This hint, when
+present, always looks like this:
+
+```http
+Save-Data: on
+```
+
+Here at Google, [we’ve talked about what you can do with
+`Save-Data`](/web/fundamentals/performance/optimizing-content-efficiency/save-data/).
+The impact it can have on performance can be profound. It’s a signal where users
+are literally asking you to send them less stuff! If you listen and act on that
+signal, users will appreciate it.
+
+## Tying it all together
+
+What you _do_ with client hints depends on you. Because they offer so much
+information, you have many options. To get some ideas flowing, let’s see what
+client hints can do for [Sconnie
+Timber](https://github.com/malchata/client-hints-example), a fictional timber
+company located in the rural Upper Midwest. [As is often the case in remote
+areas](https://www.technologyreview.com/s/603083/the-unacceptable-persistence-of-the-digital-divide/),
+network connections can be fragile. This is where a technology like client hints
+can really make a difference for users.
+
+### Responsive Images
+
+All but the simplest responsive image use cases can get complicated. What if you
+have multiple treatments _and_ variants of the same images for different screen
+sizes&mdash;_and_ different formats? That markup gets [_very_ complicated _very_
+quickly](https://dev.opera.com/articles/responsive-images/#changing-image-sizes-high-dpi-images-different-image-types--art-direction-use-case).
+It’s easy to get it wrong, and easy to forget or misunderstand important
+concepts (such as `sizes`).
+
+While `<picture>` and `srcset` are undeniably _awesome_ tools, they can be
+time-consuming to develop and maintain for complex use cases. We can automate
+markup generation, but doing so is also difficult because the functionality
+`<picture>` and `srcset` provides is complex enough that their automation needs
+to be done in a way that maintains the flexibility they provide.
+
+Client hints are can simplify this. Negotiating image responses with client
+hints could look something like this:
+
+1. If applicable to your workflow, first select an image treatment (i.e.,
+   art-directed imagery) by checking the `Viewport-Width` hint.
+2. Select an image resolution by checking the `Width` hint and the `DPR` hint, and
+   choosing a source that fits the image’s layout size and screen density (similar
+   to how `x` and `w` descriptors work in `srcset`).
+3. Select the most optimal file format the browser supports (something `Accept`
+   helps us do in most browsers).
+
+Where my fictitious timber company client was concerned, I developed a naïve
+responsive image selection routine in PHP that uses client hints. This meant
+instead of sending this markup to all users:
+
+```html
+<picture>
+  <source
+    srcset="
+      company-photo-256w.webp   256w,
+      company-photo-512w.webp   512w,
+      company-photo-768w.webp   768w,
+      company-photo-1024w.webp 1024w,
+      company-photo-1280w.webp 1280w
+    "
+    type="image/webp"
+  />
+  <img
+    srcset="
+      company-photo-256w.jpg   256w,
+      company-photo-512w.jpg   512w,
+      company-photo-768w.jpg   768w,
+      company-photo-1024w.jpg 1024w,
+      company-photo-1280w.jpg 1280w
+    "
+    src="company-photo-256w.jpg"
+    sizes="(min-width: 560px) 251px, 88.43vw"
+    alt="The Sconnie Timber Staff!"
+  />
+</picture>
+```
+
+I was able to reduce it to the following based on individual browser support:
+
+```html
+<img
+  src="/image/sizes:true/company-photo.jpg"
+  sizes="(min-width: 560px) 251px, 88.43vw"
+  alt="SAY CHEESY PICKLES."
+/>
+```
+
+In this example, the `/image` URL is a PHP script followed by parameters
+rewritten by
+[mod_rewrite](https://httpd.apache.org/docs/current/mod/mod_rewrite.html). It
+takes an image filename and additional parameters to help a back-end script
+choose the best image in the given conditions.
+
+I sense _“But isn’t this just reimplementing `<picture>` and `srcset` on the
+back-end?”_ is your first question.
+
+In a way, yes&mdash;but with an important distinction: when an application uses
+client hints to craft media responses, most (if not all) of the work is much
+easier to automate, which can include a service (such as a CDN) that can do this
+on your behalf. Whereas with HTML solutions, new markup needs to be written to
+provide for every use case. Sure, you _can_ automate markup generation. If your
+design or requirements change, though, there’s a good chance you’ll need to
+revisit your automation strategy in the future.
+
+Client hints make it possible to start with a lossless, high-resolution
+image that can then be dynamically resized to be optimal for _any_ combination
+of screen and layout. Unlike `srcset`, which requires you to enumerate a fixed
+list of possible image candidates for the browser to choose from, this approach
+can be more flexible. While `srcset` forces you to offer browsers a coarse set
+of variants&mdash;say, `256w`, `512w`, `768w`, and `1024w`&mdash;a client-hints
+powered solution can serve all widths, without a giant pile of markup.
+
+Of course, you don’t _have_ to write image selection logic yourself. [Cloudinary
+uses client hints to craft image responses when you use the `w_auto`
+parameter](https://cloudinary.com/blog/automatic_responsive_images_with_client_hints),
+and observed that median users downloaded 42% less bytes when using browsers
+supporting client hints.
+
+But beware! [Changes in the desktop version of Chrome 67 have removed support
+for cross-origin client
+hints](https://cloudinary.com/blog/client_hints_and_responsive_images_what_changed_in_chrome_67).
+Fortunately, these restrictions don’t affect mobile versions of Chrome, and
+they'll be lifted altogether for all platforms when work on [Feature
+Policy](https://wicg.github.io/feature-policy/) is complete.
+
+### Helping users on slow networks
+
+_Adaptive performance_ is the idea that we can adjust how we deliver resources
+based on the information client hints makes available to us; specifically
+information surrounding the current state of the user’s network connection.
+
+Where Sconnie Timber’s site is concerned, we take steps to lighten the load when
+networks are slow, with `Save-Data`, `ECT`, `RTT`, and `Downlink` headers being
+examined in our back-end code. When this is done, we generate a network quality
+score we can use to determine if we should intervene for a better user
+experience. This network score is between `0` and `1`, where `0` is the worst
+network possible network quality, and `1` is the best.
+
+Initially, we check if `Save-Data` is present. If it is, the score is set to
+`0`, as we’re assuming the user wants us to do whatever is necessary to make the
+experience lighter and faster.
+
+If `Save-Data` is absent, however, we move on and weigh the values of the `ECT`,
+`RTT`, and `Downlink` hints to calculate a score that describes network
+connection quality. The [network score generation source
+code](https://github.com/malchata/client-hints-example/blob/master/includes/functions.php#L8)
+is available on Github. The takeaway is, if we use the network-related hints in
+_some_ fashion, we can make experiences better for those who are on slow
+networks.
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/FoRAMNXoSAs3xgMCCP0O.png", alt="A comparison of a site that doesn't use client
+hints to adapt to a slow network connection (left) and the same site that does
+(right).", width="800", height="579" %}
+  <figcaption><em><strong>Figure 2</strong>. An “about us” page for a local
+business site. The baseline experience includes web fonts, JavaScript to drive a
+carousel and accordion behavior, as well as content images. These are all things
+we can omit when network conditions are too slow to load them
+quickly.</em></figcaption>
+</figure>
+
+When sites adapt to the information client hints provide, we don’t have to adopt
+an “all or nothing” approach. We can intelligently decide which resources to
+send. We can modify our responsive image selection logic to send lower quality
+images for a given display to speed up loading performance when network quality
+is poor.
+
+In this example, we can see the impact client hints have when it comes to
+improving the performance of sites on slower networks. Below is a WebPagetest
+waterfall of a site on a slow network that doesn’t adapt to client hints:
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/TSBjfn9vApO8X95tZKbv.png", alt="A WebPagetest waterfall of the Sconnie
+Timber site loading all resources on a slow network connection.", width="800", height="420" %}
+  <figcaption><em><strong>Figure 3</strong>. A resource heavy site loading images,
+scripts, and fonts on a slow connection.</em></figcaption>
+</figure>
+
+And now a waterfall for the same site on the same slow connection, except this
+time, the site uses client hints to eliminate non-critical page resources:
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/CsTBfO9sEKsYqXUu4DPc.png", alt="A WebPagetest waterfall of the Sconnie
+Timber site using client hints to decide not to load non-critical resources on a
+slow network connection.", width="800", height="171" %}
+  <figcaption><em><strong>Figure 4</strong>. The same site on the same connection,
+only the “nice to have” resources are excluded in favor of faster
+loading.</em></figcaption>
+</figure>
+
+Client hints reduced the page load time from over 45 seconds to _less than a
+tenth of that time_. The benefits of client hints in this scenario can’t be
+emphasized enough and can be a serious boon to users seeking critical
+information over slow networks.
+
+Furthermore, it’s possible to use client hints without breaking the experience
+for browsers that don’t support them. For example, if we want adjust resource
+delivery suing the value of the `ECT` hint while still delivering the full
+experience for non-supporting browsers, we can set fall back to a default value
+like so:
+
+```php
+// Set the ECT value to "4g" by default.
+$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";
+```
+
+Here, `"4g"` represents the highest quality network connection the `ECT` header
+describes. If we initialize `$ect` to `"4g"`, browsers that don’t support client
+hints won’t be affected. Opt-in FTW!
+
+## Mind those caches!
+
+Whenever you change a response based on an HTTP header, you need to be aware of
+how caches will handle future fetches for that resource. [The `Vary`
+header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Vary) is
+indispensable here, as it keys cache entries to the value of the request headers
+supplied to it. Simply put, if you modify any response based on a given HTTP
+request header, you should almost always include request that header in `Vary`
+like so:
+
+```http
+Vary: DPR, Width
+```
+
+There’s a _big_ caveat to this, though: You never want to `Vary` cacheable
+responses on a frequently changing header (like `Cookie`) because those
+resources become effectively uncacheable. Knowing this, you might want to avoid
+`Vary`ing on client hint headers such as `RTT` or `Downlink`, because those are
+connection factors that could change quite often. If you want to modify
+responses on those headers, consider keying only the `ECT` header, which will
+minimize cache misses.
+
+Of course, this only applies if you’re caching a response in the first place.
+For example, you won’t cache HTML assets if their content is dynamic, because
+that can break the user experience on repeat visits. In cases like these, feel
+free to modify such responses on whatever basis you feel is necessary and not
+concern yourself with `Vary`.
+
+## Client hints in service workers
+
+Content negotiation isn’t just for servers anymore! Because service workers act
+as proxies between clients and the servers, you have control over how resources
+are delivered via JavaScript. This includes client hints. In the service worker
+`fetch` event, you can use the `event` object’s
+[`request.headers.get`](https://developer.mozilla.org/docs/Web/API/Request/headers)
+method to read a resource’s request headers like so:
+
+```javascript
+self.addEventListener('fetch', (event) => {
+  let dpr = event.request.headers.get('DPR');
+  let viewportWidth = event.request.headers.get('Viewport-Width');
+  let width = event.request.headers.get('Width');
+
+  event.respondWith(
+    (async function () {
+      // Do what you will with these hints!
+    })(),
+  );
+});
+```
+
+{% Aside 'warning' %}
+Because not all browsers support client hints, you’ll need to check what values
+`event.request.headers.get` returns. A possible alternative approach is to record JS equivalents
+such as
+[`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
+or [`window.innerWidth`](https://developer.mozilla.org/docs/Web/API/Window/innerWidth) to
+[`IndexedDB`](/web/ilt/pwa/working-with-indexeddb), which is accessible in the service worker scope.
+{% endAside %}
+
+Any client hint header you opt into can be read in this fashion. Though that’s
+not the only way you can get some of this information. Network-specific hints
+can be read in these equivalent JavaScript properties in the `navigator` object:
+
+<table>
+<thead>
+    <tr>
+    <th>Client hint</th>
+    <th>JS equivalent</th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+    <td>`ECT`</td>
+    <td>`navigator.connection.effectiveType`</td>
+    </tr>
+    <tr>
+    <td>`RTT`</td>
+    <td>`navigator.connection.rtt` </td>
+    </tr>
+    <tr>
+    <td>`Save-Data`</td>
+    <td>`navigator.connection.saveData`</td>
+    </tr>
+    <tr>
+    <td>`Downlink`</td>
+    <td>`navigator.connection.downlink` </td>
+    </tr>
+    <tr>
+    <td>`Device-Memory`</td>
+    <td>`navigator.deviceMemory`</td>
+    </tr>
+</tbody>
+<caption>
+    Imagemin plugins for filetypes.
+</caption>
+</table>
+
+Because these APIs aren’t available everywhere you need feature check with the
+[`in`
+operator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/in):
+
+```javascript
+if ('connection' in navigator) {
+  // Work with netinfo API properties in JavaScript!
+}
+```
+
+From here, you can use logic similar to what you would use on the server, except
+you don’t _need_ a server to negotiate content with client hints. Service
+workers alone have the power to make experiences faster and more resilient due
+to the added ability they have to serve content when the user is offline.
+
+## Wrapping up
+
+With client hints, we have the power to make experiences faster for users in a
+fully progressive way. We can serve media based on the user’s device
+capabilities in a way that makes serving responsive images easier than relying
+on `<picture>` and `srcset`, especially for complex use cases. This enables us
+to not only reduce time and effort on the development side, but also to optimize
+resources&mdash;particularly images&mdash;in a way that targets user’s screens
+more finely than <picture> and srcset can.
+
+Perhaps more importantly, we can sniff out poor network connections and bridge
+the gap for users by modifying what we send&mdash;and how we send it. This can
+go a _long_ way in making sites easier to access for users on fragile networks.
+Combined with service workers, we can create incredibly fast sites that are
+available offline.
+
+While client hints are only available in Chrome&mdash;and Chromium-based
+browsers&mdash;it’s possible to use them in such a way that doesn’t encumber
+browsers that don’t support them. Consider using client hints to create truly
+inclusive and adaptable experiences that are aware of every user’s device
+capabilities, and the networks they connect to. Hopefully, other browser vendors
+will see the value of them and show intent to implement.
+
+### Resources
+
+- [Automatic Responsive Images with Client
+  Hints](https://cloudinary.com/blog/automatic_responsive_images_with_client_hints)
+- [Client Hints and Responsive Images—What Changed in Chrome
+  67](https://cloudinary.com/blog/client_hints_and_responsive_images_what_changed_in_chrome_67)
+- [Take a (Client) Hint!](https://www.youtube.com/watch?v=md7Ua82fPe4)
+  ([Slides](https://jlwagner.net/talks/take-a-client-hint))
+- [Delivering Fast and Light Applications with
+  `Save-Data`](/web/fundamentals/performance/optimizing-content-efficiency/save-data/)
+
+_Thank you to [Ilya Grigorik](https://twitter.com/igrigorik), [Eric
+Portis](https://twitter.com/etportis), [Jeff Posnick](https://twitter.com/jeffposnick), [Yoav
+Weiss](https://twitter.com/yoavweiss), and [Estelle Weyl](https://twitter.com/estellevw) for their
+valuable feedback and edits on this article._
diff --git a/src/site/content/en/blog/performance-optimizing-content-efficiency/index.md b/src/site/content/en/blog/performance-optimizing-content-efficiency/index.md
new file mode 100644
index 00000000000..121d860ec64
--- /dev/null
+++ b/src/site/content/en/blog/performance-optimizing-content-efficiency/index.md
@@ -0,0 +1,73 @@
+---
+title: Optimizing Content Efficiency
+description: >
+  The amount of data downloaded by apps continues to increase over time. To deliver great performance you must optimize data delivery as much as possible.
+authors:
+  - ilyagrigorik
+date: 2014-03-31
+updated: 2018-08-17
+---
+
+Our web applications continue to grow in their scope, ambition, and functionality -- that's a good thing. However, the relentless march toward a richer web is driving another trend: the amount of data downloaded by each application continues to increase at a steady pace. To deliver great performance we need to optimize delivery of each and every byte!
+
+What does a modern web application look like? [HTTP Archive](http://httparchive.org/) can help us answer this question. The project tracks how the web is built by periodically crawling the most popular sites (300,000+ from the Alexa Top 1M list) and recording and aggregating analytics on the number of resources, content types, and other metadata for each individual destination.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/JqsYuCtNUMTMm3KsDp5u.png", alt="HTTP Archive trends", width="597", height="217" %}
+
+<div class="table-wrapper scrollbar">
+<table class="">
+<colgroup><col span="1"><col span="1"><col span="1"><col span="1"></colgroup>
+<thead>
+  <tr>
+    <th></th>
+    <th>50th percentile</th>
+    <th>75th percentile</th>
+    <th>90th percentile</th>
+  </tr>
+</thead>
+<tr>
+  <td data-th="type">HTML</td>
+  <td data-th="50%">13 KB</td>
+  <td data-th="75%">26 KB</td>
+  <td data-th="90%">54 KB</td>
+</tr>
+<tr>
+  <td data-th="type">Images</td>
+  <td data-th="50%">528 KB</td>
+  <td data-th="75%">1213 KB</td>
+  <td data-th="90%">2384 KB</td>
+</tr>
+<tr>
+  <td data-th="type">JavaScript</td>
+  <td data-th="50%">207 KB</td>
+  <td data-th="75%">385 KB</td>
+  <td data-th="90%">587 KB</td>
+</tr>
+<tr>
+  <td data-th="type">CSS</td>
+  <td data-th="50%">24 KB</td>
+  <td data-th="75%">53 KB</td>
+  <td data-th="90%">108 KB</td>
+</tr>
+<tr>
+  <td data-th="type">Other</td>
+  <td data-th="50%">282 KB</td>
+  <td data-th="75%">308 KB</td>
+  <td data-th="90%">353 KB</td>
+</tr>
+<tr>
+  <td data-th="type"><strong>Total</strong></td>
+  <td data-th="50%"><strong>1054 KB</strong></td>
+  <td data-th="75%"><strong>1985 KB</strong></td>
+  <td data-th="90%"><strong>3486 KB</strong></td>
+</tr>
+</table>
+</div>
+
+The above data captures the trend in growth of number of downloaded bytes for popular destinations on the web between January 2013 and January 2014. Of course, not every site grows at the same rate or requires the same amount of data, hence the reason why we are highlighting the different quantiles within the distribution: 50th (median), 75th, and 90th.
+
+A median site at the beginning of 2014 is composed of 75 requests that add up to 1054 KB of total transferred bytes, and the total number of bytes (and requests) has grown at a steady pace throughout the previous year. This by itself should not be all that surprising, but it does carry important performance implications: yes, internet speeds are getting faster, but they are getting faster at different rates in different countries, and many users are still subject to data caps and expensive metered plans - especially on mobile.
+
+Unlike their desktop counterparts, web applications do not require a separate installation process: enter the URL and we are up and running -- that’s a key feature of the web. However, to make this happen **we often have to fetch dozens, and sometime hundreds, of various resources, all of which can add up to megabytes of data and must come together in hundreds of milliseconds to facilitate the instant web experience we are aiming for.**
+
+Achieving an instant web experience in light of these requirements is no small feat, which is why optimizing content efficiency is critical: eliminating unnecessary downloads, optimizing transfer encoding of each resource through various compression techniques, and leveraging caching whenever possible to eliminate redundant downloads.
diff --git a/src/site/content/en/blog/performance-poor-connectivity/index.md b/src/site/content/en/blog/performance-poor-connectivity/index.md
new file mode 100644
index 00000000000..fb49e0edb0c
--- /dev/null
+++ b/src/site/content/en/blog/performance-poor-connectivity/index.md
@@ -0,0 +1,167 @@
+---
+layout: post
+title: Understanding Low Bandwidth and High Latency
+authors:
+  - samdutton
+description: >
+  It's important to understand what using your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help you.
+date: 2016-05-09
+updated: 2018-08-17
+---
+
+It's important to understand what using your app or site feels like when
+connectivity is poor or unreliable, and build accordingly. A range of tools
+can help you.
+
+## Test with low bandwidth and high latency {: #testing }
+
+An <a href="http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html">
+increasing proportion</a> of people experience the web on mobile devices. Even at home, <a
+href="https://www.washingtonpost.com/news/the-switch/wp/2016/04/18/new-data-americans-are-abandoning-wired-home-internet/">
+many people are abandoning fixed broadband for mobile</a>.
+
+In this context, it's important to understand what using your app or site feels
+like when connectivity is poor or unreliable. A range of software tools can help
+you [emulate and simulate](https://stackoverflow.com/questions/1584617/simulator-or-emulator-what-is-the-difference)
+low bandwidth and high [latency](https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/).
+
+### Emulate network throttling
+
+When building or updating a site, you must ensure adequate performance in a variety
+of connectivity conditions. Several tools can help.
+
+#### Browser tools
+
+[Chrome DevTools](/web/tools/chrome-devtools) lets you test your site with a
+variety of upload/download speeds and [round-trip times][rtt], using presets
+or custom settings from the Network panel. See [Get Started with Analyze
+Network Performance](/web/tools/chrome-devtools/network-performance) to
+learn the basics.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/qmYeCqk3BAGjUxX6EaIv.png", alt="Chrome DevTools throttling", width="777", height="327" %}
+
+#### System tools
+
+Network Link Conditioner is a preference panel available on Mac if you install
+[Hardware IO Tools](https://developer.apple.com/downloads/?q=Hardware%20IO%20Tools)
+for Xcode:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/7laBIBHCJMICtJm2ram4.png", alt="Mac Network Link Conditioner control panel", width="780", height="802" %}
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/bnLF2Rh2A7CLNAnbngBn.png", alt="Mac Network Link Conditioner settings", width="780", height="453" %}
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/cMGvcZyfwvNZw6ce8bDj.png", alt="Mac Network Link Conditioner custom settings", width="760", height="425" %}
+
+#### Device emulation
+
+[Android Emulator](http://developer.android.com/tools/devices/emulator.html#netspeed)
+allows you to simulate various network conditions while running apps (including
+web browsers and hybrid web apps) on Android:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/zrVCMkg3GHrNoR6B426n.png", alt="Android Emulator", width="396", height="623" %}
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/xfs1xIif9Fs9BGka0SMq.png", alt="Android Emulator settings", width="800", height="113" %}
+
+For iPhone, Network Link Conditioner can be used to simulate impaired network
+conditions (see above).
+
+### Test from different locations and networks
+
+Connectivity performance depends on server location as well as network type.
+
+[WebPagetest](https://webpagetest.org) is an online service that enables a set
+of performance tests to be run for your site using a variety of networks and host
+locations. For example, you can try out your site from a server in India on a 2G
+network, or over cable from a city in the US.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/f1lY7WJ6ErJSISNvYEsU.png", alt="WebPagetest settings", width="800", height="612" %}
+
+Select a location and, from advanced settings, select a connection type. You can
+even automate testing using [scripts](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting)
+(for example, to log in to a site) or using their
+[RESTful APIs](https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis).
+This helps you to include connectivity testing into build processes or performance
+logging.
+
+[Fiddler](http://www.telerik.com/fiddler) supports Global proxying via
+[GeoEdge](http://www.geoedge.com/faq), and its custom rules can be used to simulate
+modem speeds:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/2THZAadL02oVQG98JYMs.png", alt="Fiddler proxy", width="800", height="400" %}
+
+### Test on an impaired network
+
+Software and hardware proxies enable you to emulate problematic mobile network
+conditions, such as bandwidth throttling, packet delay, and random packet loss.
+A shared proxy or impaired network can enable a team of developers to incorporate
+real-world network testing in their workflow.
+
+Facebook's [Augmented Traffic Control](http://facebook.github.io/augmented-traffic-control/)
+(ATC) is a BSD-licensed set of applications that can be used to shape traffic and
+emulate impaired network conditions:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/5ssAC84OwNizm2Kmk5kU.png", alt="Facebook's Augmented Traffic Control", width="600", height="428" %}
+
+Facebook even instituted [2G Tuesdays](https://code.facebook.com/posts/1556407321275493/building-for-emerging-markets-the-story-behind-2g-tuesdays/)
+to help understand how people on 2G use their product. On Tuesdays, employees
+get a pop-up that gives them the option to simulate a 2G connection.
+
+The [Charles](https://www.charlesproxy.com/) HTTP/HTTPS proxy can
+be used to [adjust bandwidth and latency](http://www.charlesproxy.com/documentation/proxying/throttling/).
+Charles is commercial software, but a free trial is available.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/DXtOAZk1IUuicwVdPWIa.png", alt="Charles proxy bandwidth and latency settings", width="554", height="580" %}
+
+More information about Charles is available from [codewithchris.com](http://codewithchris.com/tutorial-using-charles-proxy-with-your-ios-development-and-http-debugging/).
+
+## Handle unreliable connectivity and "lie-fi" {: #lie-fi }
+
+### What is lie-fi?
+
+The term <a href="http://www.urbandictionary.com/define.php?term=lie-fi">lie-fi</a>
+dates back to at least 2008 (when phones looked like
+<a href="https://www.mobilegazette.com/2008-phones-wallchart.htm"
+title="Images of phones from 2008">this</a>), and refers to connectivity that
+isn't what it seems. Your browser behaves as if it has connectivity when, for
+whatever reason, it doesn't.
+
+Misinterpreted connectivity can result in a poor experience as the browser
+(or JavaScript) persists in trying to retrieve resources rather than giving up
+and choosing a sensible fallback. Lie-fi can actually be worse than offline; at
+least if a device is definitely offline, your JavaScript can take appropriate
+evasive action.
+
+Lie-fi is likely to become a bigger problem as more people move to mobile and away
+from fixed broadband. Recent [US Census data](https://www.ntia.doc.gov/blog/2016/evolving-technologies-change-nature-internet-use)
+shows a [move away from fixed broadband](https://www.washingtonpost.com/news/the-switch/wp/2016/04/18/new-data-americans-are-abandoning-wired-home-internet/).
+The following chart shows the use of mobile internet at home in 2015 compared with 2013:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/L8hi0MdcQ1yM0TGTFdis.png", alt="Chart from US census data
+showing the move to mobile away from fixed broadband, particularly in lower-income households", width="600", height="249" %}
+
+### Use timeouts to handle intermittent connectivity
+
+In the past, [hacky methods using XHR](http://stackoverflow.com/questions/189430/detect-that-the-internet-connection-is-offline)
+have been used to test for intermittent connectivity, but service worker enables
+more reliable methods to set network timeouts. This can be achieved using
+[Workbox](/web/tools/workbox/) with only a few lines of code:
+
+```js
+workboxSW.router.registerRoute(
+  '/path/to/image',
+  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
+);
+```
+
+You can learn more about Workbox in Jeff Posnick's Chrome Dev Summit talk,
+[Workbox: Flexible PWA Libraries](https://www.youtube.com/watch?v=DtuJ55tmjps).
+
+[Timeout functionality](/web/updates/2017/09/abortable-fetch) is also being developed
+for the [Fetch API](https://developer.mozilla.org/docs/Web/API/GlobalFetch/fetch),
+and the [Streams API](https://www.w3.org/TR/streams-api/) should help by optimizing
+content delivery and avoiding monolithic requests. Jake Archibald gives more details
+about tackling lie-fi in [Supercharging page load](https://youtu.be/d5_6yHixpsQ?t=6m42s).
+
+## Feedback {: #feedback }
+
+[rtt]: https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
diff --git a/src/site/content/en/blog/periodic-background-sync/1-record.png b/src/site/content/en/blog/periodic-background-sync/1-record.png
deleted file mode 100644
index a5e59ba4e8a..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/1-record.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/2-record-result.png b/src/site/content/en/blog/periodic-background-sync/2-record-result.png
deleted file mode 100644
index 77659f96bfd..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/2-record-result.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/3-sw-panel.png b/src/site/content/en/blog/periodic-background-sync/3-sw-panel.png
deleted file mode 100644
index ee2f93a146e..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/3-sw-panel.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/4-experiments.png b/src/site/content/en/blog/periodic-background-sync/4-experiments.png
deleted file mode 100644
index 0f55ef7c471..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/4-experiments.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/5-settings.png b/src/site/content/en/blog/periodic-background-sync/5-settings.png
deleted file mode 100644
index 782c9c1b21b..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/5-settings.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/6-checkbox.png b/src/site/content/en/blog/periodic-background-sync/6-checkbox.png
deleted file mode 100644
index a8c4820c94b..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/6-checkbox.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/7-panel.png b/src/site/content/en/blog/periodic-background-sync/7-panel.png
deleted file mode 100644
index 027464b6ca2..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/7-panel.png and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/hero.jpg b/src/site/content/en/blog/periodic-background-sync/hero.jpg
deleted file mode 100644
index 559742c9296..00000000000
Binary files a/src/site/content/en/blog/periodic-background-sync/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/periodic-background-sync/index.md b/src/site/content/en/blog/periodic-background-sync/index.md
deleted file mode 100644
index 32bb322ffec..00000000000
--- a/src/site/content/en/blog/periodic-background-sync/index.md
+++ /dev/null
@@ -1,413 +0,0 @@
----
-title: Richer offline experiences with the Periodic Background Sync API
-subhead:
-  Sync your web app's data in the background for a more native-like experience
-authors:
-  - jeffposnick
-  - joemedley
-date: 2019-11-10
-updated: 2020-03-13
-hero: hero.jpg
-alt: Colorful airplanes flying in sync
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/4048736065006075905
-description: |
-  Periodic Background Sync enables web applications to periodically
-  synchronize data in the background, bringing web apps closer to the behavior
-  of a native app.
-tags:
-  - capabilities
-  - blog
-  - progressive-web-apps
-  - service-worker
-  - chrome80
----
-
-{% Aside %}
-  Web apps should be able to do anything native apps can. The
-  [Capabilities project](https://developers.google.com/web/updates/capabilities),
-  of which Periodic Background Sync is only a part, aims
-  to do just that. To learn about other capabilities and to keep up with their
-  progress, follow [Unlocking new capabilities for the
-  web](https://developers.google.com/web/updates/capabilities).
-{% endAside %}
-
-Have you ever been in any of the following situations?
-
-* Riding a train or subway with flaky or no connectivity
-* Been throttled by your carrier after watching too many videos
-* Living in a country where bandwidth struggles to keep up with the demand
-
-If you have, then you've surely felt the frustration of getting
-certain things done on the web, and wondered why native apps so often do better
-in these scenarios. Native apps can fetch fresh content such as news articles or weather
-information ahead of time. Even if there's no network in the subway, you can still read the
-news.
-
-Periodic Background Sync enables web applications to periodically synchronize
-data in the background, bringing web apps closer to the behavior of a native
-app.
-
-## Current status
-
-The table below explains the current status of the Periodic Background Sync API.
-
-<table>
-<tr>
-<th markdown="block">
-Step
-</th>
-<th markdown="block">
-Status
-</th>
-</tr>
-<tr>
-<td markdown="block">
-1. Create explainer
-</td>
-<td markdown="block">
-<a href="https://github.com/WICG/BackgroundSync/tree/master/explainers" >Complete</a>
-</td>
-</tr>
-<tr>
-<td markdown="block">
-2. Create initial draft of specification
-</td>
-<td markdown="block">
-<a href="https://wicg.github.io/periodic-background-sync/" rel="noopener">Complete</a>
-</td>
-</tr>
-<tr>
-<td markdown="block">
-3. Gather feedback and iterate on design
-</td>
-<td markdown="block">
-In Progress
-</td>
-</tr>
-<tr>
-<td markdown="block">
-4. Origin trial
-</td>
-<td markdown="block">
-Complete
-</td>
-</tr>
-<tr>
-<td markdown="block">
-<strong>5. Launch</strong>
-</td>
-<td markdown="block">
-<strong>Chrome 80</strong>
-</td>
-</tr>
-</table>
-
-## Try it
-
-You can try periodic background sync with the [live demo
-app](https://webplatformapis.com/periodic_sync/periodicSync_improved.html).
-Before using it, make sure that:
-
-* You're using Chrome 80 or later.
-* You
-  [install](https://developers.google.com/web/fundamentals/app-install-banners/)
-  the web app before enabling periodic background sync.
-
-## Concepts and usage
-
-Periodic background sync lets you show fresh content when a progessive web app
-or service worker-backed page is launched. It does this by downloading data in
-the background when the app or page is not being used. This prevents the app's
-content from refreshing after launch while it's being viewed. Better yet, it
-prevents the app from showing a content spinner before refreshing.
-
-Without periodic background sync, web apps must use alternative methods to
-download data. A common example is using a push notification to wake a service
-worker. The user is interrupted by a message such as 'new data available'.
-Updating the data is essentially a side effect. You still have the option of
-using push notifications for truly important updates, such as significant
-breaking news.
-
-Periodic background sync is easily confused with background sync. Though they
-have similar names, their use cases are different. Among other things,
-background sync is most commonly used for resending data to a server when a
-previous request has failed.
-
-### Getting this right
-
-Chrome is putting periodic background sync through a trial period so that you can
-help the Chrome team make sure that they get it right. This section explains some of the design
-decisions Chrome took to make this feature as helpful as possible.
-
-The first design decision Chrome made is that a web app can only use periodic
-background sync after a person has installed it on their device, and has
-launched it as a distinct application. Periodic background sync is not available
-in the context of a regular tab in Chrome.
-
-Furthermore, since Chrome doesn't want unused or seldom used web apps to gratuitously
-consume battery or data, Chrome designed periodic background sync such that
-developers will have to earn it by providing value to their users. Concretely,
-Chrome is using a [site engagement score](https://www.chromium.org/developers/design-documents/site-engagement)
-(`chrome://site-engagement/`) to determine if and how often periodic background syncs can happen
-for a given web app. In other words, a `periodicsync` event won't be fired at all unless the engagement
-score is greater than zero, and its value affects the frequency at which the
-`periodicsync` event fires. This ensures that the only apps syncing in the
-background are the ones you are actively using.
-
-Periodic background sync shares some similarities with existing APIs and
-practices on popular platforms. For instance, one-off background sync as well as
-push notifications allow a web app's logic to live a little longer (via its
-service worker) after a person has closed the page. On most platforms, it's
-common for people to have installed apps that periodically access the network in
-the background to provide a better user experience for critical updates,
-prefetching content, syncing data, and so on. Similarly, periodic background sync also
-extends the lifetime of a web app's logic to run at regular periods for what
-might be a few minutes at a time.
-
-If the browser allowed this to occur frequently and without restrictions, it
-could result in some privacy concerns. Here's how Chrome has addressed this
-risk for periodic background sync:
-
-* The background sync activity only occurs on a network that the device has
-  previously connected to. Chrome recommends to only connect to networks operated by
-  trustworthy parties.
-* As with all internet communications, periodic background sync reveals the IP
-  addresses of the client, the server it's talking to, and the name of the
-  server. To reduce this exposure to roughly what it would be if the app only
-  synced when it was in the foreground, the browser limits the frequency of an
-  app's background syncs to align with how often the person uses that app. If
-  the person stops frequently interacting with the app, periodic background sync
-  will stop triggering. This is a net improvement over the status quo in native
-  apps.
-
-### When can it be used?
-
-Rules for use vary by browser. To summarize from above, Chrome puts the
-following requirements on periodic background sync:
-
-* A particular user engagement score.
-* Presence of a previously used network.
-
-The timing of synchronizations are not controlled by developers. The
-synchronization frequency will align with how often the app is used. (Note that
-native apps currently don't do this.) It also takes into the device's power and
-connectivity state.
-
-### When should it be used?
-
-When your service worker wakes up to handle a `periodicsync` event, you have the
-_opportunity_ to request data, but not the _obligation_ to do so. When handling
-the event you should take network conditions and available storage into
-consideration and download different amounts of data in response. You can use
-the following resources to help:
-
-* [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
-* [Detecting data saver mode](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#detecting_the_save-data_setting)
-* [Estimating available storage](https://developers.google.com/web/updates/2017/08/estimating-available-storage-space)
-
-### Permissions
-
-After the service worker is installed, use the [Permissions
-API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) to query
-for `periodic-background-sync`. You can do this from either a window or a
-service worker context.
-
-```js
-const status = await navigator.permissions.query({
-  name: 'periodic-background-sync',
-});
-if (status.state === 'granted') {
-  // Periodic background sync can be used.
-} else {
-  // Periodic background sync cannot be used.
-}
-```
-
-### Registering a periodic sync
-
-As already stated, periodic background sync requires a service worker. Retrieve
-a `PeriodicSyncManager` using `ServiceWorkerRegistration.periodicSync` and call
-`register()` on it. Registering requires both a tag and a minimum
-synchronization interval (`minInterval`). The tag identifies the registered sync
-so that multiple syncs can be registered. In the example below, the tag name is
-`'content-sync'` and the `minInterval` is one day.
-
-```js/3-5
-const registration = await navigator.serviceWorker.ready;
-if ('periodicSync' in registration) {
-  try {
-    await registration.periodicSync.register('content-sync', {
-      // An interval of one day.
-      minInterval: 24 * 60 * 60 * 1000,
-    });
-  } catch (error) {
-    // Periodic background sync cannot be used.
-  }
-}
-```
-
-### Verifying a registration
-
-Call `periodicSync.getTags()` to retrieve an array of registration tags. The
-example below uses tag names to confirm that cache updating is active to avoid
-updating again.
-
-```js/2,4
-const registration = await navigator.serviceWorker.ready;
-if ('periodicSync' in registration) {
-  const tags = await registration.periodicSync.getTags();
-  // Only update content if sync isn't set up.
-  if (!tags.includes('content-sync')) {
-    updateContentOnPageLoad();
-  }
-} else {
-  // If periodic background sync isn't supported, always update.
-  updateContentOnPageLoad();
-}
-```
-
-You can also use `getTags()` to show a list of active registrations in your web
-app's settings page so that users can enable or disable specific types of
-updates.
-
-### Responding to a periodic background sync event
-
-To respond to a periodic background sync event add a `periodicsync` event
-handler to your service worker. The `event` object passed to it will contain a
-`tag` parameter matching the value used during registration. For example if a
-periodic background sync was registered with the name `'content-sync'`, then
-`event.tag` will be `'content-sync'`.
-
-```js
-self.addEventListener('periodicsync', (event) => {
-  if (event.tag === 'content-sync') {
-    // See the "Think before you sync" section for
-    // checks you could perform before syncing.
-    event.waitUntil(syncContent());
-  }
-  // Other logic for different tags as needed.
-});
-```
-
-### Unregistering a sync
-
-To end a registered sync, call `periodicSync.unregister()` with the name of the
-sync you want to unregister.
-
-```js
-const registration = await navigator.serviceWorker.ready;
-if ('periodicSync' in registration) {
-  await registration.periodicSync.unregister('content-sync');
-}
-```
-
-## Interfaces
-
-Here's a quick run down of the interfaces provided by the Periodic Background
-Sync API.
-
-* `PeriodicSyncEvent`. Passed to the `ServiceWorkerGlobalScope.onperiodicsync` event handler at a
-  time of the browser's choosing.
-* `PeriodicSyncManager`. Registers and unregisters periodic syncs and provides tags for registered
-  syncs. Retrieve an instance of this class from the ServiceWorkerRegistration.periodicSync`
-  property.
-* `ServiceWorkerGlobalScope.onperiodicsync`. Registers a handler to receive the `PeriodicSyncEvent`.
-* `ServiceWorkerRegistration.periodicSync`. Returns a reference to the `PeriodicSyncManager`.
-
-## Example
-
-### Updating content
-
-The following example uses periodic background sync to download and cache up-to-date articles for a news site or blog. Notice the tag name, which indicates the kind of sync this is (`'update-articles'`). The call to `updateArticles()` is wrapped in `event.waitUntil()` so that the service worker won't terminate before the articles are downloaded and stored.
-
-```js/7
-async function updateArticles() {
-  const articlesCache = await caches.open('articles');
-  await articlesCache.add('/api/articles');
-}
-
-self.addEventListener('periodicsync', (event) => {
-  if (event.tag === 'update-articles') {
-    event.waitUntil(updateArticles());
-  }
-});
-```
-
-### Adding periodic background sync to an existing web app
-
-[This set of changes](https://github.com/GoogleChromeLabs/so-pwa/pull/11) were needed to add
-periodic background sync to an [existing PWA](https://so-pwa.firebaseapp.com/). This example includes a number of helpful logging statements that describe the
-state of periodic background sync in the web app.
-
-## Debugging
-
-It can be a challenge to get and end-to-end view of periodic background sync
-while testing locally. Information about active registrations, approximate sync
-intervals, and logs of past sync events provide valuable context while debugging
-your web app's behavior. Fortunately, you can find all of that information
-through an experimental feature in Chrome DevTools.
-
-{% Aside %}
-  Periodic background sync debugging is enabled in Chrome 81 and later.
-{% endAside %}
-
-### Recording local activity
-
-The **Periodic Background Sync** section of DevTools is organized around key events
-in the periodic background sync lifecycle: registering for sync, performing a
-background sync, and unregistering. To obtain information about these events,
-click **Start recording**.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="1-record.png" alt="The record button in DevTools" style="max-width: 75%">
-  <figcaption class="w-figcaption">
-    The record button in DevTools
-  </figcaption>
-</figure>
-
-While recording, entries will appear in DevTools corresponding to events, with
-context and metadata logged for each.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="2-record-result.png" alt="An example of recorded periodic background sync data"
-       style="max-width: 75%">
-  <figcaption class="w-figcaption">
-    An example of recorded periodic background sync data
-  </figcaption>
-</figure>
-
-After enabling recording once, it will stay enabled for up to three days,
-allowing DevTools to capture local debugging information about background syncs
-that might take place, even hours in the future.
-
-### Simulating events
-
-While recording background activity can be helpful, there are times when you'll
-want to test your `periodicsync` handler immediately, without waiting for an
-event to fire on its normal cadence.
-
-You can do this via the **Service Workers** section within the Application panel in
-Chrome DevTools. The **Periodic Sync** field allows you to provide a tag for the
-event to use, and to trigger it as many times as you'd like.
-
-{% Aside %}
-  Manually triggering a `periodicsync` event requires Chrome 81 or later.
-{% endAside %}
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="3-sw-panel.png"
-       alt="The 'Service Workers' section of the Application panel shows a 'Periodic Sync'
-            text field and button." style="max-width: 90%">
-</figure>
-
-## Using the DevTools interface
-
-Starting in Chrome 81, you'll see a **Periodic Background Sync** section in the
-DevTools *Application* panel.
-
-   <figure class="w-figure">
-     <img class="w-screenshot" src="7-panel.png"
-          alt="The Application panel showing the Periodic Background Sync section"
-          style="max-width: 75%">
-   </figure>
diff --git a/src/site/content/en/blog/persistent-storage/ff-persist-request.jpg b/src/site/content/en/blog/persistent-storage/ff-persist-request.jpg
deleted file mode 100644
index 1a87f9f6b99..00000000000
Binary files a/src/site/content/en/blog/persistent-storage/ff-persist-request.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/persistent-storage/hero.jpg b/src/site/content/en/blog/persistent-storage/hero.jpg
deleted file mode 100644
index 2bd89c7457b..00000000000
Binary files a/src/site/content/en/blog/persistent-storage/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/persistent-storage/index.md b/src/site/content/en/blog/persistent-storage/index.md
index ab6ef33174f..965ef0b9d9c 100644
--- a/src/site/content/en/blog/persistent-storage/index.md
+++ b/src/site/content/en/blog/persistent-storage/index.md
@@ -10,8 +10,10 @@ tags:
   - blog
   - storage
   - progressive-web-apps
-hero: hero.jpg
+hero: image/admin/0TWeS0GZhDTpPzQVhDVS.jpg
 alt: Printed circuit board
+feedback:
+  - api
 ---
 
 When faced with storage pressure like low disk space, browsers will
@@ -38,6 +40,9 @@ persistent.
 {% endAside %}
 
 Persistent storage is [supported in many modern][caniuse-persistent] browsers.
+
+{% BrowserCompat 'api.StorageManager.persisted' %}
+
 To learn more about eviction, how much you can store, and how to handle quota
 limitations, see [Storage for the web](/storage-for-the-web/).
 
@@ -116,11 +121,9 @@ Firefox delegates the permission request to the user. When persistent storage
 is requested, it prompts the user with a UI popup asking if they will allow
 the site to store data in persistent storage.
 
-<figure class="w-figure">
-  <img src="ff-persist-request.jpg" class="w-screenshot"
-       alt="A popup shown by Firefox when a site requests persistent storage."
-       width="428">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o8W7pNTZ5dFKeDg2cmvA.jpg", alt="A popup shown by Firefox when a site requests persistent storage.", width="428", height="177" %}
+  <figcaption>
     A popup shown by Firefox when a site requests persistent storage.
   </figcaption>
 </figure>
@@ -132,7 +135,7 @@ data stored in:
 
 - Cache API
 - Cookies
-- DOM Storage
+- DOM Storage (Local Storage)
 - File System API (browser-provided and sandboxed file system)
 - IndexedDB
 - Service workers
diff --git a/src/site/content/en/blog/photographyprize/index.md b/src/site/content/en/blog/photographyprize/index.md
new file mode 100644
index 00000000000..4f0defdaa84
--- /dev/null
+++ b/src/site/content/en/blog/photographyprize/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: Google Photography Prize Gallery
+authors:
+  - ilmariheikkinen
+date: 2012-02-07
+tags:
+  - blog
+---
+
+## Creating the Google Photography Prize Gallery
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TRSbhnmDJJHfHCLyBw1w.jpg", alt="Google Photography Prize website", width="800", height="674" %}
+</figure>
+
+We recently launched the [Gallery section](http://www.google.com/landing/photographyprize/gallery.html) on the [Google Photography Prize](http://www.google.com/landing/photographyprize/) site. The gallery shows an infinite scrolling list of photos fetched from Google+. It gets the list of photos from an [AppEngine](http://appengine.google.com) app that we use for moderating the list of photos in the gallery. We also released the gallery app as an open source project on [Google Code](http://code.google.com/p/galleryplus).
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nJ6DW790854a0PUYw8Y1.jpg", alt="The gallery page", width="800", height="581" %}
+</figure>
+
+The backend of the gallery is an AppEngine app that uses the Google+ API to search for posts with one of the Google Photography Prize hashtags on it (e.g. #megpp and #travelgpp). The app then adds those posts to its list of unmoderated photos. Once a week, our content team goes through the list of unmoderated photos and flags ones that break our content guidelines. After hitting the Moderate-button, the unflagged photos are added to the list of photos shown on the gallery page.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Qo6NAwVg8ebaS3poSOYb.jpg", alt="The moderation backend", width="800", height="480" %}
+</figure>
+
+## Gallery frontend
+
+The Gallery frontend is built using the [Google Closure library](http://code.google.com/closure/library/). The Gallery widget itself is a Closure component. At the top of the source file we tell Closure that this file provides a component named `photographyPrize.Gallery` and require the parts of the Closure library used by the app:
+
+```js
+goog.provide('photographyPrize.Gallery');
+
+goog.require('goog.debug.Logger');
+goog.require('goog.dom');
+goog.require('goog.dom.classes');
+goog.require('goog.events');
+goog.require('goog.net.Jsonp');
+goog.require('goog.style');
+```
+
+The gallery page has a bit of JavaScript that uses JSONP to retrieve the list of photos from the AppEngine app. JSONP is a simple cross-origin JavaScript hack that injects a script that looks like `jsonpcallback("responseValue")`. To handle the JSONP stuff, we’re using the `goog.net.Jsonp` component in the Closure library.
+
+The gallery script goes through the list of photos and generates HTML elements for them to show them on the gallery page. The infinite scrolling works by hooking up to the window scroll event and loading a new batch of photos when the window scroll is close to the bottom of the page. After loading the new photo list segment, the gallery script creates elements for the photos and adds them to the gallery element to display them.
+
+## Displaying the list of images
+
+The image list display method is pretty basic stuff. It goes through the image list, generates HTML elements and +1 buttons. The next step is to add the generated list segment to the gallery's main gallery element. You can see some Closure compiler conventions in the code below, note the type definitions in the JSDoc comment and the @private visibility. Private methods have an underscore (_) after their name.
+
+```js
+/**
+ * Displays images in imageList by putting them inside the section element.
+ * Edits image urls to scale them down to imageSize x imageSize bounding
+ * box.
+ *
+ * @param {Array.&lt;Object>} imageList List of image objects to show. Retrieved
+ *                                   by loadImages.
+ * @return {Element} The generated image list container element.
+ * @private
+ */
+photographyPrize.Gallery.prototype.displayImages_ = function(imageList) {
+  
+  // find the images and albums from the image list
+  for (var j = 0; j &lt; imageList.length; j++) {
+    // change image urls to scale them to photographyPrize.Gallery.MAX_IMAGE_SIZE
+  }
+
+  // Go through the image list and create a gallery photo element for each image.
+  // This uses the Closure library DOM helper, goog.dom.createDom:
+  // element = goog.dom.createDom(tagName, className, var_childNodes);
+
+  var category = goog.dom.createDom('div', 'category');
+  for (var k = 0; k &lt; items.length; k++) {
+    var plusone = goog.dom.createDom('g:plusone');
+    plusone.setAttribute('href', photoPageUrl);
+    plusone.setAttribute('size', 'standard');
+    plusone.setAttribute('annotation', 'none');
+
+    var photo = goog.dom.createDom('div', {className: 'gallery-photo'}, ...)
+    photo.appendChild(plusone);
+
+    category.appendChild(photo);
+  }
+  this.galleryElement_.appendChild(category);
+  return category;
+};
+```
+
+## Handling scroll events
+
+To see when the visitor has scrolled the page to the bottom and we need to load new images, the gallery hooks up to the window object's scroll event. To paper over differences in browser implementations, we're using some handy utility functions from the Closure library: `goog.dom.getDocumentScroll()` returns an `{x, y}` object with the current document scroll position, `goog.dom.getViewportSize()` returns the window size, and `goog.dom.getDocumentHeight()` the height of the HTML document.
+
+```js
+/**
+ * Handle window scroll events by loading new images when the scroll reaches
+ * the last screenful of the page.
+ *
+ * @param {goog.events.BrowserEvent} ev The scroll event.
+ * @private
+ */
+photographyPrize.Gallery.prototype.handleScroll_ = function(ev) {
+  var scrollY = goog.dom.getDocumentScroll().y;
+  var height = goog.dom.getViewportSize().height;
+  var documentHeight = goog.dom.getDocumentHeight();
+  if (scrollY + height >= documentHeight - height / 2) {
+    this.tryLoadingNextImages_();
+  }
+};
+
+/**
+ * Try loading the next batch of images objects from the server.
+ * Only fires if we have already loaded the previous batch.
+ *
+ * @private
+ */
+photographyPrize.Gallery.prototype.tryLoadingNextImages_ = function() {
+  // ...
+};
+```
+
+## Loading images
+
+To load the images from the server, we're using the `goog.net.Jsonp` component. It takes a `goog.Uri` to query. Once created, you can send a query to the Jsonp provider with a query parameter object and a success callback function.
+
+```js
+/**
+ * Loads image list from the App Engine page and sets the callback function
+ * for the image list load completion.
+ *
+ * @param {string} tag Fetch images tagged with this.
+ * @param {number} limit How many images to fetch.
+ * @param {number} offset Offset for the image list.
+ * @param {function(Array.&lt;Object>=)} callback Function to call
+ *        with the loaded image list.
+ * @private
+ */
+photographyPrize.Gallery.prototype.loadImages_ = function(tag, limit, offset, callback) {
+  var jsonp = new goog.net.Jsonp(
+      new goog.Uri(photographyPrize.Gallery.IMAGE_LIST_URL));
+  jsonp.send({'tag': tag, 'limit': limit, 'offset': offset}, callback);
+};
+```
+
+As mentioned above, the gallery script uses the Closure compiler for compiling and minifying the code. The Closure compiler is also useful in enforcing correct typing (you use `@type foo` JSDoc notation in your comments to set the type of a property) and it also tells you when you don’t have comments for a method. 
+
+## Unit tests
+
+We also needed unit tests for the gallery script, so it’s handy that the Closure library has an unit testing framework built into it. It follows the jsUnit conventions, so it’s easy to get started with.
+
+To help me in writing the unit tests, I wrote a small Ruby script that parses the JavaScript file and generates a failing unit test for each method and property in the gallery component. Given a script like:
+
+```js
+Foo = function() {}
+Foo.prototype.bar = function() {}
+Foo.prototype.baz = "hello";
+```
+
+The test generator generates an empty test for each of the properties:
+
+```js
+function testFoo() {
+  fail();
+  Foo();
+}
+
+function testFooPrototypeBar = function() {
+  fail();
+  instanceFoo.bar();
+}
+
+function testFooPrototypeBaz = function() {
+  fail();
+  instanceFoo.baz;
+}
+```
+
+These autogenerated tests gave me an easy start in writing tests for the code, and all the methods and properties were covered by default. The failing tests create a nice psychological effect where I had to go through the tests one by one and write proper tests. Coupled with a code coverage meter, it’s a fun game to make the tests and coverage all green. 
+
+## Summary
+Gallery+ is an open source project to display a moderated list of Google+ photos matching a #hashtag. It was built using Go and the Closure library. The backend runs on App Engine. Gallery+ is used on the Google Photography Prize website to display the submission gallery.
+In this article we walked through the juicy bits of the frontend script. My collague Johan Euphrosine from the App Engine Developer Relations team is writing a second article talking about the backend app. The backend is written in Go, Google's new server-side language. So if you're interested in seeing a production example of Go code, stay tuned!
+
+## References
+
+- [Google Photography Prize](http://google.com/landing/photographyprize/)
+- [Gallery+](http://code.google.com/p/galleryplus/) project page
+- [Closure library](http://code.google.com/closure/library/)
+- [Closure compiler](http://code.google.com/closure/compiler/)
diff --git a/src/site/content/en/blog/playcanvas/index.md b/src/site/content/en/blog/playcanvas/index.md
new file mode 100644
index 00000000000..fbbff2c72c0
--- /dev/null
+++ b/src/site/content/en/blog/playcanvas/index.md
@@ -0,0 +1,209 @@
+---
+layout: post
+title: Core Interactions in the WebVR Lab
+date: 2017-02-02
+updated: 2017-02-02
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/M0OPzERJ22c9xdzOxAZa.png", alt="VR Lab", width="800", height="500" %}
+</figure>
+
+[View the Lab](http://webvr.playcanvas.com)
+
+Website designers are familiar with the idea of responsive design, building a
+website to work across different devices, such as mobile phones, tablets and
+computers and different screen resolutions and pixel ratios.
+[WebVR](https://developer.chrome.com/blog/ar-for-the-web/) introduces new challenges to the idea of
+responsive design.
+
+We can categorize a WebVR experience by two metrics - the level of immersion and
+the level of input. These levels are distinguished by "degrees of freedom"
+(DOF). 6 DOF refers to tracking both position and orientation, 3 DOF is only
+tracking orientation and 0 DOF tracks neither position nor orientation.
+
+### Immersion Level
+
+- **No VR** - Monitor or mobile display.
+- **Stationary VR** - Device with 3 DOF tracking.
+- **Seated VR** - 6 DOF tracking but in a limited area and angle range.
+- **Room Scale VR** - 6 DOF tracking with a room sized environment.
+
+### Input Level
+- **0 DOF** - The only input available is a click or tap. This input method is tied
+  to the direction the user is facing. Sometimes we refer to this as a gaze
+  controller.
+- **3 DOF** - A controller that tracks its orientation can be used like a laser
+  pointer to specify a direction or a location. The position of the controller
+  is estimated based on the user's viewpoint. This includes the Daydream
+  Controller.
+- **6 DOF** - A controller that tracks its position and orientation. This can be
+  used to closely simulate a hand in VR.
+
+So you can see that a single application might support anything from a non-VR
+mobile display with just a single click to input all the way up to a full room
+scale experience with two fully tracked hand controllers.
+
+## WebVR Lab
+
+In the [PlayCanvas WebVR Lab](http://webvr.playcanvas.com) we've implemented
+some of the core interactions that you might need in your application and scaled
+them across the different levels of experience.
+
+### How Interactions Work
+
+The basic mechanics of how interactions work in the WebVR Lab are ray
+intersections. The floor, the room and any objects that can be interacted with
+are defined in terms of one of three shape primitives:
+
+- **Axis-aligned bounding box (or AABB)** - A box that is not rotated.
+- **Oriented bounding box** - A box that can be rotated.
+- **Sphere** - A radius around a point in space.
+
+To see if an action is possible we fire a ray into the world and test whether
+the ray intersects with the shape of the objects in the world. Different types
+of interaction are possible depending on where the ray originates (the camera or
+the controller) and the length of the ray (close up manipulations or pointing at
+a distance).
+
+### Simple Actions
+
+First we define a few simple actions and how they are used with different
+controllers.
+
+#### Highlight
+
+Highlighting a location or object is performed either by looking at it (with a
+gaze controller) or by pointing at it (with a hand controller). This could be
+with no button pressed or only while a button is pressed.
+
+#### Click
+
+Clicking a location or object is performed by first highlighting and then
+pressing or releasing a button. With a gaze controller you would click by
+looking at an object and then pressing the button or screen. With a hand
+controller the method is to point at an object then click a button.
+
+## Core Interactions
+
+Using highlighting and clicking we have implemented some core interactions in
+the WebVR Lab.
+
+### Teleport
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cUgwOIu2tDgtgvynqDDM.png", alt="Teleport", width="800", height="500" %}
+</figure>
+
+When building a virtual environment for a user to explore, it is likely that the
+environment will be larger than the small area that a user can see without
+moving. The WebVR Lab, for example, has three sections. A main room, a mezzanine
+floor and a side room for the hi-fi music player.
+
+Moving the user's viewport through the world will often lead to discomfort. In
+the WebVR Lab we allow the user to highlight a location and click to teleport
+instantaneously. The user's viewpoint never moves and so despite the somewhat
+unnatural sensation of moving instantaneously the user can move around a large
+space with no discomfort.
+
+In the case of a hand controller, we require the user to push and hold a button
+to activate the teleport target. This keeps the user's vision uncluttered while
+they are looking around.
+
+#### Moving the user's viewpoint
+
+Sometimes it is absolutely necessary to move the viewpoint. For example, when
+using Stationary or Seated VR it is possible to end up facing a wall with no
+ability to turn in the physical world. So we allow the user to rotate the camera
+using the controller. In the WebVR Lab using the left or right pad on the
+Daydream Controller rotates the camera.
+
+To prevent discomfort when we move the camera in this way we reduce the amount
+of peripheral vision by applying a restricted view across the camera. This is
+based on work by
+[Ubisoft](http://www.gdcvault.com/play/1023922/Full-Speed-Flying-in-VR) and
+we've found that focusing the view on just the center of the screen reduces the
+discomfort.
+
+### Activate
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/A0arh8p1QXqZLDkyNgrN.png", alt="Activate", width="800", height="450" %}
+</figure>
+
+Activating is the VR equivalent of clicking a button on a webpage. In the WebVR
+Lab we have taken this literally and provided a simple button that can be
+activated.
+
+For 0 DOF and 3 DOF controllers, activating is a highlight and click. For a 6
+DOF controller we can upgrade the experience to let you "push" a button by
+directly checking to see if your hand controller is inside the button.
+
+### Grab
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dCztAJby1flLU4YWSF1N.png", alt="Grab", width="800", height="450" %}
+</figure>
+
+The WebVR Lab contains a number of "grabbable" items. With this behaviour, when
+the object is activated it can be picked up and moved. There are two obvious,
+different behaviors depending on the level of input you wish to support.
+
+For 6 DOF controllers holding down an input button will attach the grabbable
+item to the controller. It can then be moved and positioned with fine-grained
+control. Releasing the button will activate a combine or drop action with the
+item.
+
+For less maneuverable controllers a click will pick up the item and attach it to
+the user's viewport. Usually keeping a section of the item visible in the "lower
+third" of the display. A second click will either drop or combine the item.
+
+### Combine
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LH77n6Flq8iFtAC2uYEk.png", alt="Combine", width="800", height="450" %}
+</figure>
+
+Combine is an action that occurs when you "use" an item with another item. This
+covers a huge variety of use cases. In the WebVR Lab we use this to play records
+on the hi-fi. When an item is grabbed, it becomes possible to combine the grabbed
+item with another item. With all types of controller highlighting the target
+item whilst grabbing another item and then releasing the grab will combine the
+two items.
+
+### Drop / Restoring
+
+Dropping an item happens when you click while holding a grabbed item with no
+other item highlighted.
+
+In the WebVR Lab we have kept performance requirements low by not using a
+physics simulation on any items. That means that instead of dropping an item to
+the ground we simple allow it to float in the position that it was dropped.
+After an item has been dropped, if it isn't activated within a certain time
+frame, it will "restore" itself to its original location. This restore
+functionality allows a user with a low degree of input (0 DOF or 3 DOF) to
+operate on many items and maintain a usable work area. Older items will
+automatically clear themselves.
+
+With a 6 DOF input it's easier to move items out of the way. Having a delay on
+the restore operation lets a 6 DOF user immerse themselves in moving items
+around, but still facilitate self-cleaning of the area.
+
+## Summary
+
+The WebVR Lab is a living project from the PlayCanvas team. That means it is
+constantly under development and experiences are added and updated as we do more
+research into building WebVR applications.
+
+It scales from a "magic window" style mobile experience to a desktop interactive
+playground. We've started to define a set of core interactions that users can
+use for their own projects. We hope that the WebVR Lab is a good learning
+experience for everyone who wishes to build 3D worlds with WebVR.
+
+If you have a PlayCanvas account you can drop straight into the [WebVR Lab
+Project](https://playcanvas.com/project/446331/overview/webvr-labs) to learn
+more.
diff --git a/src/site/content/en/blog/pointerlock-intro/index.md b/src/site/content/en/blog/pointerlock-intro/index.md
new file mode 100644
index 00000000000..ec925895957
--- /dev/null
+++ b/src/site/content/en/blog/pointerlock-intro/index.md
@@ -0,0 +1,221 @@
+---
+layout: post
+title: Pointer lock and first person shooter controls
+authors:
+  - johnmccutchan
+date: 2012-08-17
+tags:
+  - blog
+---
+
+## Introduction
+
+The Pointer Lock API helps properly implement first-person shooter controls in a browser game. Without relative mouse movement the player's cursor could, for example, hit the right edge of the screen and any further movements to the right would be discounted - the view would not continue to pan right, and the player would not be able to pursue the bad guys and strafe them with his machine gun. The player is going to get fragged and become frustrated. With pointer lock this suboptimal behaviour can't happen.
+
+The [Pointer Lock API](https://developer.mozilla.org/docs/API/Pointer_Lock_API) allows your application to do the following:
+
+- Get access to raw mouse data including relative mouse movements
+- Route all mouse events to a specific element
+
+As a side effect of enabling pointer lock, the mouse cursor is hidden allowing you to choose to draw an application-specific pointer if you desire, or leave the mouse pointer hidden so that the user can move the frame with the mouse. Relative mouse movement is the mouse pointer position's delta from the previous frame regardless of absolute position.  For example, if the mouse pointer moved from (640, 480) to (520, 490) the relative movement was (-120, 10). See below for an interactive example showing raw mouse position deltas.
+
+This tutorial covers two topics: the nuts and bolts of activating and processing pointer lock events, and implementing the first-person shooter control scheme. That's right, when you're finished reading this article you will know how to use pointer lock and implement Quake-style controls for your very own browser game!
+
+### Browser compatibility
+
+{% BrowserCompat 'api.Element.requestPointerLock' %}
+
+## Pointer Lock Mechanics
+
+### Feature Detection
+
+To determine if the user's browser supports pointer lock you need to check for `pointerLockElement` or a vendor-prefixed version in the document object. In code:
+
+```js
+var havePointerLock = 'pointerLockElement' in document ||
+    'mozPointerLockElement' in document ||
+    'webkitPointerLockElement' in document;
+```
+
+Currently pointer lock is only available in Firefox and Chrome. Opera and IE do not yet support it.
+
+### Activating
+
+Activating pointer lock is a two step process. First your application requests pointer lock be enabled for a specific element, and immediately after the user gives permission, a `pointerlockchange` event fires. The user can cancel pointer lock at any time by pressing the escape key. Your application can also progrmamatically exit pointer lock. When pointer lock is cancelled a `pointerlockchange` event fires.
+
+```js
+element.requestPointerLock = element.requestPointerLock ||
+			     element.mozRequestPointerLock ||
+			     element.webkitRequestPointerLock;
+// Ask the browser to lock the pointer
+element.requestPointerLock();
+
+// Ask the browser to release the pointer
+document.exitPointerLock = document.exitPointerLock ||
+			   document.mozExitPointerLock ||
+			   document.webkitExitPointerLock;
+document.exitPointerLock();
+```
+
+The above code is all it takes. When the browser locks the pointer a bubble will popup letting the user know that your application has locked the pointer and instructing them that they can cancel it by pressing the 'Esc' key.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HhdPKkAI2RlF9SK4W0Vb.png", alt="Pointer Lock info bar in Chrome.", width="443", height="50" %}
+<figcaption>Pointer Lock info bar in Chrome.</figcaption>
+</figure>
+
+### Event Handling
+
+There are two events that your application must add listeners for. The first is `pointerlockchange`, which fires whenever a change in pointer lock state occurs. The second is `mousemove` which fires whenever the mouse has moved.
+
+```js
+// Hook pointer lock state change events
+document.addEventListener('pointerlockchange', changeCallback, false);
+document.addEventListener('mozpointerlockchange', changeCallback, false);
+document.addEventListener('webkitpointerlockchange', changeCallback, false);
+
+// Hook mouse move events
+document.addEventListener("mousemove", this.moveCallback, false);
+```
+
+{% Aside %}
+Because of vendor-prefixing, you will have to listen for `pointerlockchange`, `mozpointerlockchange`, and `webkitpointerlockchange`events to be cross-browser compatible.
+{% endAside %}
+
+Inside your `pointerlockchange` callback you must check if the pointer has just been locked or unlocked. Determining if pointer lock was enabled is simple: check if document.pointerLockElement is equal to the element that pointer lock was requested for. If it is, your application successfully locked the pointer and if it is not, the pointer was unlocked by the user or your own code.
+
+```js
+if (document.pointerLockElement === requestedElement ||
+  document.mozPointerLockElement === requestedElement ||
+  document.webkitPointerLockElement === requestedElement) {
+  // Pointer was just locked
+  // Enable the mousemove listener
+  document.addEventListener("mousemove", this.moveCallback, false);
+} else {
+  // Pointer was just unlocked
+  // Disable the mousemove listener
+  document.removeEventListener("mousemove", this.moveCallback, false);
+  this.unlockHook(this.element);
+}
+```
+
+When pointer lock is enabled `clientX`, `clientY`, `screenX`, and `screenY` remain constant. `movementX` and `movementY` are updated with the number of pixels the pointer would have moved since the last event was delivered. In pseudo-code:
+
+```js
+event.movementX = currentCursorPositionX - previousCursorPositionX;
+event.movementY = currentCursorPositionY - previousCursorPositionY;
+```
+
+Inside the `mousemove` callback relative mouse motion data can be extracted from the event's `movementX` and `movementY` fields.
+
+```js
+function moveCallback(e) {
+  var movementX = e.movementX ||
+      e.mozMovementX          ||
+      e.webkitMovementX       ||
+      0,
+  movementY = e.movementY ||
+      e.mozMovementY      ||
+      e.webkitMovementY   ||
+      0;
+}
+```
+
+{% Aside %}
+The movement fields also have vendor-prefixes
+{% endAside %}
+
+### Catching errors
+If an error is raised by either entering or exiting pointer lock the `pointerlockerror` event fires. There is no data attached to this event.
+
+```js
+document.addEventListener('pointerlockerror', errorCallback, false);
+document.addEventListener('mozpointerlockerror', errorCallback, false);
+document.addEventListener('webkitpointerlockerror', errorCallback, false);
+```
+
+### Full-screen Required?
+
+Originally pointer lock was tied to the FullScreen API. Meaning that an element must be in fullscreen mode before it can have the pointer locked to it. That is no longer true and pointer lock can be used for any element in your application full-screen or not.
+
+## First-Person Shooter Controls Example
+
+Now that we have pointer lock enabled and receiving events, it's time for a practical example. Have you ever wanted to know how the controls in Quake work? Strap in because I'm about to explain them with code!
+
+First-person shooter controls are built around four core mechanics:
+
+- Moving forward and backward along the current look vector
+- Moving left and right along the current strafe vector
+- Rotating the view yaw (left and right)
+- Rotating the view pitch (up and down)
+
+A game implementing this control scheme needs only three pieces of data: camera position, camera look vector, and a constant up vector. The up vector is always (0, 1, 0). All four of the above mechanics just manipulate the camera position and camera look vector in different ways.
+
+### Movement
+
+First on deck is movement. In the demo below movement is mapped to the standard W, A, S, and D keys. The W and S keys drive the camera forward and backward. While the A and D keys drive the camera to the left and right. Moving the camera forward and backward is simple:
+
+```js
+// Forward direction
+var forwardDirection = vec3.create(cameraLookVector);
+// Speed
+var forwardSpeed = dt * cameraSpeed;
+// Forward or backward depending on keys held
+var forwardScale = 0.0;
+forwardScale += keyState.W ? 1.0 : 0.0;
+forwardScale -= keyState.S ? 1.0 : 0.0;
+// Scale movement
+vec3.scale(forwardDirection, forwardScale * forwardSpeed);
+// Add scaled movement to camera position
+vec3.add(cameraPosition, forwardDirection);
+```
+
+Strafing left and right requires a strafe direction. The strafe direction can be computed using the cross product:
+
+```js
+// Strafe direction
+var strafeDirection = vec3.create();
+vec3.cross(cameraLookVector, cameraUpVector, strafeDirection);
+```
+
+Once you have the strafe direction, implementing strafe movement is the same as moving forward or backward.
+
+Next up is rotating the view.
+
+### Yaw
+Yaw or the horizontal rotation of the camera view is just a rotation around the constant up vector. Below is general code for rotating the camera look vector around an arbitrary axis. It works by constructing a [quaternion](http://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation) representing the rotation of `deltaAngle` radians around `axis` and then uses the quaternion to rotate the camera look vector:
+
+```js
+// Extract camera look vector
+var frontDirection = vec3.create();
+vec3.subtract(this.lookAtPoint, this.eyePoint, frontDirection);
+vec3.normalize(frontDirection);
+var q = quat4.create();
+// Construct quaternion
+quat4.fromAngleAxis(deltaAngle, axis, q);
+// Rotate camera look vector
+quat4.multiplyVec3(q, frontDirection);
+// Update camera look vector
+this.lookAtPoint = vec3.create(this.eyePoint);
+vec3.add(this.lookAtPoint, frontDirection);
+```
+
+### Pitch
+
+Implementing pitch or the vertical rotation of the camera view is similar but instead of a rotation around the up vector you apply a rotation around the strafe vector. The first step is to compute the strafe vector and then rotate the camera look vector around that axis.
+
+## Summary
+The Pointer Lock API allows you to take control of the mouse cursor. If you're making web games your players will love it when they stop getting fragged because they excitedly moved mouse out of the window and your game stopped getting mouse updates. Usage is simple:
+
+- Add `pointerlockchange` event listener to track the state of pointer lock
+- Request pointer lock for a specific element
+- Add `mousemove` event listener to get updates
+
+## External Demos
+
+- [Quake 3 Map Viewer](http://media.tojicode.com/q3bsp/)
+- [Video demonstration](https://www.youtube.com/watch?v=onD-avVQXFk)
+
+## References
+
+ - [Mozilla Developer Network API documentation](https://developer.mozilla.org/API/Mouse_Lock_API)
diff --git a/src/site/content/en/blog/porting-gphoto2-to-the-web/index.md b/src/site/content/en/blog/porting-gphoto2-to-the-web/index.md
new file mode 100644
index 00000000000..e549816c77c
--- /dev/null
+++ b/src/site/content/en/blog/porting-gphoto2-to-the-web/index.md
@@ -0,0 +1,354 @@
+---
+title: 'Porting USB applications to the web. Part 2: gPhoto2'
+subhead: Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.
+description: Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.
+date: 2022-02-01
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/MR4YGRvl0Z9AWT6vv3sQ.jpg
+alt: A picture of DSLR camera connected via a USB cable to a laptop. The laptop is running the web demo mentioned in the article, which mirrors a live video feed from the camera and allows tweaking of its settings via form controls.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - capabilities
+  - devices
+---
+
+In [the previous post](/porting-libusb-to-webusb/) I showed how the [libusb](https://libusb.info/) library was ported to run on the web with WebAssembly / [Emscripten](https://emscripten.org/), Asyncify, and [WebUSB](/usb/).
+
+I also showed [a demo](/porting-libusb-to-webusb/#first-things-first-a-demo) built with [gPhoto2](http://gphoto.org/) that can control DSLR and mirrorless cameras over USB from a web application. In this post I'll go deeper into the technical details behind the gPhoto2 port.
+
+## Pointing build systems to custom forks
+
+Since I was targeting WebAssembly, I couldn't use the libusb and libgphoto2 provided by the system distributions. Instead, I needed my application to use my custom fork of libgphoto2, while that fork of libgphoto2 had to use my custom fork of libusb.
+
+Additionally, libgphoto2 uses libtool for loading dynamic plugins, and even though I didn't have to fork libtool like the other two libraries, I still had to build it to WebAssembly, and point libgphoto2 to that custom build instead of the system package.
+
+Here's an approximate dependency diagram (dashed lines denote dynamic linking):
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/ziuavwzLjYb5ZopEUzvi.svg", alt="A diagram shows 'the app' depending on 'libgphoto2 fork', which depends on 'libtool'. 'libtool' block depends dynamically on 'libgphoto2 ports' and 'libgphoto2 camlibs'. Finally, 'libgphoto2 ports' depends statically on the 'libusb fork'.", width="800", height="481" %}
+
+Most configure-based build systems, including the ones used in these libraries, allow overriding paths for dependencies via various flags, so that's what I tried to do first. However, when the dependency graph becomes complex, the list of path overrides for each library's dependencies becomes verbose and error-prone. I also found some bugs where build systems weren't actually prepared for their dependencies to live in non-standard paths.
+
+Instead, an easier approach is to create a separate folder as a custom system root (often shortened to "sysroot") and point all the involved build systems to it. That way, each library will both search for its dependencies in the specified sysroot during build, and it will also install itself in the same sysroot so that others can find it more easily.
+
+Emscripten already has its own sysroot under `(path to emscripten cache)/sysroot`, which it uses for its [system libraries](https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-link-against-system-libraries-like-sdl-boost-etc), [Emscripten ports](https://emscripten.org/docs/compiling/Building-Projects.html#emscripten-ports), and tools like CMake and pkg-config. I chose to reuse the same sysroot for my dependencies too.
+
+```makefile
+# This is the default path, but you can override it
+# to store the cache elsewhere if you want.
+#
+# For example, it might be useful for Docker builds
+# if you want to preserve the deps between reruns.
+EM_CACHE = $(EMSCRIPTEN)/cache
+
+# Sysroot is always under the `sysroot` subfolder.
+SYSROOT = $(EM_CACHE)/sysroot
+
+# …
+
+# For all dependencies I've used the same ./configure command with the
+# earlier defined SYSROOT path as the --prefix.
+deps/%/Makefile: deps/%/configure
+        cd $(@D) && ./configure --prefix=$(SYSROOT) # …
+```
+
+With such configuration, I only needed to run `make install` in each dependency, which installed it under the sysroot, and then the libraries found each other automatically.
+
+## Dealing with dynamic loading
+
+As mentioned above, libgphoto2 uses libtool to enumerate and dynamically load I/O port adapters and camera libraries. For example, the code for loading I/O libraries looks like this:
+
+```c
+lt_dlinit ();
+lt_dladdsearchdir (iolibs);
+result = lt_dlforeachfile (iolibs, foreach_func, list);
+lt_dlexit ();
+```
+
+There are a few problems with this approach on the web:
+
+- There is no standard support for dynamic linking of WebAssembly modules. Emscripten has its [custom implementation](https://emscripten.org/docs/compiling/Dynamic-Linking.html) that can simulate the [`dlopen()`](https://man7.org/linux/man-pages/man3/dlopen.3.html) API used by libtool, but it requires you to build "main'' and "side" modules with different flags, and, specifically for `dlopen()`, also to [preload the side modules into the emulated filesystem](https://emscripten.org/docs/compiling/Dynamic-Linking.html#runtime-dynamic-linking-with-dlopen) during the application start-up. It can be difficult to integrate those flags and tweaks into an existing autoconf build system with lots of dynamic libraries.
+- Even if the `dlopen()` itself is implemented, there's no way to enumerate all dynamic libraries in a certain folder on the web, because most HTTP servers don't expose directory listings for security reasons.
+- Linking dynamic libraries on the command line instead of enumerating in runtime can also lead to problems, such as the [duplicate symbols issue](https://github.com/emscripten-core/emscripten/issues/11985), that are caused by differences between representation of shared libraries in Emscripten and on other platforms.
+
+It's possible to adapt the build system to those differences and hardcode the list of dynamic plugins somewhere during the build, but an even easier way to solve all those issues is to avoid dynamic linking to begin with.
+
+Turns out, libtool abstracts away various [dynamic linking methods](https://www.gnu.org/software/libtool/manual/html_node/Module-loaders-for-libltdl.html) on different platforms, and even supports writing custom loaders for others. One of the built-in loaders it supports is called ["Dlpreopening"](https://www.gnu.org/software/libtool/manual/html_node/Dlpreopening.html):
+
+**“Libtool provides special support for dlopening libtool object and libtool library files, so that their symbols can be resolved even on platforms without any dlopen and dlsym functions.  
+…  
+Libtool emulates -dlopen on static platforms by linking objects into the program at compile time, and creating data structures that represent the program’s symbol table. In order to use this feature, you must declare the objects you want your application to dlopen by using the -dlopen or -dlpreopen flags when you link your program (see [Link mode](https://www.gnu.org/software/libtool/manual/html_node/Link-mode.html#Link-mode)).”**
+
+This mechanism allows emulating dynamic loading at libtool level instead of Emscripten, while linking everything statically into a single library.
+
+The only problem this doesn't solve is enumeration of dynamic libraries. The list of those still needs to be hardcoded somewhere. Luckily, the set of plugins I needed for the app is minimal:
+
+- On the ports side, I only care about the libusb-based camera connection and not about PTP/IP, serial access, or USB drive modes.
+- On the camlibs side, there are various vendor-specific plugins which might provide some specialized functions, but for general settings control and capture it's enough to use the [Picture Transfer Protocol](https://en.wikipedia.org/wiki/Picture_Transfer_Protocol), which is represented by the ptp2 camlib and supported by virtually every camera on the market.
+
+Here's what the updated dependency diagram looks like with everything linked statically together:
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/5Fg5aJnydnIVMn44fiBE.svg", alt="A diagram shows 'the app' depending on 'libgphoto2 fork', which depends on 'libtool'. 'libtool' depends on 'ports: libusb1' and 'camlibs: libptp2'. 'ports: libusb1' depends on the 'libusb fork'.", width="800", height="481" %}
+
+So that's what I hardcoded for Emscripten builds:
+
+```c/2-4
+LTDL_SET_PRELOADED_SYMBOLS();
+lt_dlinit ();
+#ifdef __EMSCRIPTEN__
+  result = foreach_func("libusb1", list);
+#else
+  lt_dladdsearchdir (iolibs);
+  result = lt_dlforeachfile (iolibs, foreach_func, list);
+#endif
+lt_dlexit ();
+```
+
+and
+
+```c/2-4
+LTDL_SET_PRELOADED_SYMBOLS();
+lt_dlinit ();
+#ifdef __EMSCRIPTEN__
+  ret = foreach_func("libptp2", &foreach_data);
+#else
+  lt_dladdsearchdir (dir);
+  ret = lt_dlforeachfile (dir, foreach_func, &foreach_data);
+#endif
+lt_dlexit ();
+```
+
+In the autoconf build system, I now had to add `-dlpreopen` with both of those files as link flags for all executables (examples, tests and my own demo app), like this:
+
+```bash
+if HAVE_EMSCRIPTEN
+LDADD += -dlpreopen $(top_builddir)/libgphoto2_port/usb1.la \
+         -dlpreopen $(top_builddir)/camlibs/ptp2.la
+endif
+```
+
+Finally, now that all the symbols are linked statically in a single library, libtool needs a way to determine which symbol belongs to which library. To achieve this, it requires developers to rename all exposed symbols like `{function name}` to `{library name}_LTX_{function name}`. The easiest way to do this is by using `#define` to redefine symbol names at the top of the implementation file:
+
+```c
+// …
+#include "config.h"
+
+/* Define _LTX_ names - required to prevent clashes when using libtool preloading. */
+#define gp_port_library_type libusb1_LTX_gp_port_library_type
+#define gp_port_library_list libusb1_LTX_gp_port_library_list
+#define gp_port_library_operations libusb1_LTX_gp_port_library_operations
+
+#include <gphoto2/gphoto2-port-library.h>
+// …
+```
+
+This naming scheme also prevents name clashes in case I decide to link camera-specific plugins in the same app in the future.
+
+After all these changes were implemented, I could build the test application and load the plugins successfully.
+
+## Generating the settings UI
+
+gPhoto2 allows camera libraries to define their own settings in a form of widget tree. The hierarchy of [widget types](http://www.gphoto.org/doc/api/gphoto2-widget_8h.html#a8c7e7c5b04d992022d9a821a0d3f9c30) consists of:
+
+- Window - top-level configuration container
+  - Sections - named groups of other widgets
+    - Button fields
+    - Text fields
+    - Numeric fields
+    - Date fields
+    - Toggles
+    - Radio buttons
+
+The name, type, children, and all the other relevant properties of each widget can be queried (and, in case of values, also modified) via the [exposed C API](http://www.gphoto.org/doc/api/gphoto2-widget_8h.html). Together, they provide a foundation for automatically generating settings UI in any language that can interact with C.
+
+Settings can be changed either via gPhoto2, or on the camera itself at any point in time. Additionally, some widgets can be readonly, and even the readonly state itself depends on the camera mode and other settings. For example, [shutter speed](https://en.wikipedia.org/wiki/Shutter_speed) is a writable numeric field in [M (manual mode)](https://en.wikipedia.org/wiki/Digital_camera_modes#:~:text=an%20ISO%20sensitivity\).-,M%3A%20Manual%20mode,-both%20shutter%20speed), but becomes an informational readonly field in [P (program mode)](https://en.wikipedia.org/wiki/Digital_camera_modes#:~:text=abbreviated%20%22PASM%22%2C%20are%3A-,P%3A%20Program%20mode,-has%20the%20camera). In P mode, the value of shutter speed will also be dynamic and continuously changing depending on the brightness of the scene the camera is looking at.
+
+All in all, it's important to always show up-to-date information from the connected camera in the UI, while at the same time allowing the user to edit those settings from the same UI. Such bidirectional data flow is more complex to handle.
+
+gPhoto2 does not have a mechanism to retrieve only changed settings, only the entire tree or individual widgets. In order to keep the UI up-to-date without flickering and losing input focus or scroll position, I needed a way to diff the widget trees between the invocations and update only the changed UI properties. Luckily, this is a solved problem on the web, and is the core functionality of frameworks like [React](https://reactjs.org/) or [Preact](https://preactjs.com/). I went with Preact for this project, as it's much more lightweight and does everything I need.
+
+On the C++ side I now needed to retrieve and recursively walk the settings tree via the earlier linked C API, and convert each widget to a JavaScript object:
+
+```cpp
+static std::pair<val, val> walk_config(CameraWidget *widget) {
+  val result = val::object();
+
+  val name(GPP_CALL(const char *, gp_widget_get_name(widget, _)));
+  result.set("name", name);
+  result.set("info", /* … */);
+  result.set("label", /* … */);
+  result.set("readonly", /* … */);
+
+  auto type = GPP_CALL(CameraWidgetType, gp_widget_get_type(widget, _));
+
+  switch (type) {
+    case GP_WIDGET_RANGE: {
+      result.set("type", "range");
+      result.set("value", GPP_CALL(float, gp_widget_get_value(widget, _)));
+
+      float min, max, step;
+      gpp_try(gp_widget_get_range(widget, &min, &max, &step));
+      result.set("min", min);
+      result.set("max", max);
+      result.set("step", step);
+
+      break;
+    }
+    case GP_WIDGET_TEXT: {
+      result.set("type", "text");
+      result.set("value",
+                  GPP_CALL(const char *, gp_widget_get_value(widget, _)));
+
+      break;
+    }
+    // …
+```
+
+On the JavaScript side, I could now call `configToJS`, walk over the returned JavaScript representation of the settings tree, and build the UI via Preact function `h`:
+
+```js
+let inputElem;
+switch (config.type) {
+  case 'range': {
+    let { min, max, step } = config;
+    inputElem = h(EditableInput, {
+      type: 'number',
+      min,
+      max,
+      step,
+      …attrs
+    });
+    break;
+  }
+  case 'text':
+    inputElem = h(EditableInput, attrs);
+    break;
+  case 'toggle': {
+    inputElem = h('input', {
+      type: 'checkbox',
+      …attrs
+    });
+    break;
+  }
+  // …
+```
+
+By running this function repeatedly in an infinite event loop, I could get the settings UI to always show the latest information, while also sending commands to the camera whenever one of the fields is edited by the user.
+
+Preact can take care of diffing the results and updating the DOM only for the changed bits of the UI, without disrupting the page focus or edit states. One problem that remains is the bidirectional data flow. Frameworks like React and Preact were designed around unidirectional data flow, because it makes it a lot easier to reason about the data and compare it between reruns, but I'm breaking that expectation by allowing an external source - the camera - to update the settings UI at any time.
+
+I worked around this problem by opting out from UI updates for any input fields that are currently being edited by the user:
+
+```js
+/**
+ * Wrapper around <input /> that doesn't update it while it's in focus to allow editing.
+ */
+class EditableInput extends Component {
+  ref = createRef();
+
+  shouldComponentUpdate() {
+    return this.props.readonly || document.activeElement !== this.ref.current;
+  }
+
+  render(props) {
+    return h('input', Object.assign(props, {ref: this.ref}));
+  }
+}
+```
+
+This way, there is always only one owner of any given field. Either the user is currently editing it, and won't be disrupted by the updated values from the camera, or the camera is updating the field value while it's out of focus.
+
+## Building a live "video" feed
+
+During the pandemic, a lot of people moved to online meetings. Among other things, this led to [shortages on the webcam market](https://www.bbc.co.uk/news/technology-53506401). To get a better video quality compared to built-in cameras in laptops, and in response to said shortages, many DSLR and mirrorless camera owners started looking for ways to use their photography cameras as webcams. Several camera vendors even [shipped](https://www.pcmag.com/how-to/how-to-use-your-canon-dslr-as-a-webcam) official utilities for this very purpose.
+
+Like the official tools, gPhoto2 [supports](http://www.gphoto.org/doc/remote/#:~:text=Using%20as%20webcam%20/%20video%20conferencing%20camera) streaming video from the camera to a locally stored file or directly to a virtual webcam too. I wanted to use that feature to provide a live view in my demo. However, while it's available in the console utility, I couldn't find it anywhere in the libgphoto2 library APIs.
+
+Looking at the source code of the corresponding function in the console utility, I found that it's not actually getting a video at all, but instead [keeps retrieving the camera's preview](https://github.com/gphoto/gphoto2/blob/e9ad2a460990afec3d09033000642297b16d8950/gphoto2/actions.c#L1068-L1070) as individual JPEG images in an endless loop, and writing them out one by one to form an [M-JPEG](https://en.wikipedia.org/wiki/Motion_JPEG) stream:
+
+```c
+while (1) {
+  const char *mime;
+  r = gp_camera_capture_preview (p->camera, file, p->context);
+  // …
+```
+
+I was astonished that this approach works efficiently enough to get an impression of smooth realtime video. I was even more skeptical about being able to match the same performance in the web application too, with all the extra abstractions and Asyncify in the way. However, I decided to try anyway.
+
+On the C++ side I exposed a method called `capturePreviewAsBlob()` that invokes the same `gp_camera_capture_preview()` function, and converts the resulting in-memory file to a [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) that can be passed to other web APIs more easily:
+
+```cpp
+val capturePreviewAsBlob() {
+  return gpp_rethrow([=]() {
+    auto &file = get_file();
+
+    gpp_try(gp_camera_capture_preview(camera.get(), &file, context.get()));
+
+    auto params = blob_chunks_and_opts(file);
+    return Blob.new_(std::move(params.first), std::move(params.second));
+  });
+}
+```
+
+On the JavaScript side, I have a loop, similar to the one in gPhoto2, that keeps retrieving preview images as `Blob`s, decodes them in the background with [`createImageBitmap`](https://developer.mozilla.org/docs/Web/API/createImageBitmap), and [transfers](https://developer.mozilla.org/docs/Web/API/ImageBitmapRenderingContext/transferFromImageBitmap) them to the canvas on the next animation frame:
+
+```js
+while (this.canvasRef.current) {
+  try {
+    let blob = await this.props.getPreview();
+
+    let img = await createImageBitmap(blob, { /* … */ });
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    canvasCtx.transferFromImageBitmap(img);
+  } catch (err) {
+    // …
+  }
+}
+```
+
+Using those modern APIs ensures that all of the decoding work is done in the background, and the canvas gets updated only when both the image and the browser are fully prepared for drawing. This achieved a consistent 30+ FPS on my laptop, which matched the native performance of both gPhoto2 and the official Sony software.
+
+## Synchronizing the USB access
+
+When a USB data transfer is requested while another operation is already in progress, it will commonly result in a "device is busy" error. Since the preview and the settings UI update regularly, and the user might be trying to capture an image or modify settings at the same time, such conflicts between different operations turned out to be very frequent.
+
+To avoid them, I needed to synchronize all the accesses within the application. For that, I've built a promise-based async queue:
+
+```js
+let context = await new Module.Context();
+
+let queue = Promise.resolve();
+
+function schedule(op) {
+  let res = queue.then(() => op(context));
+  queue = res.catch(rethrowIfCritical);
+  return res;
+}
+```
+
+By chaining each operation in a `then()` callback of the existing `queue` promise, and storing the chained result as the new value of `queue`, I can make sure that all operations are executed one by one, in order and without overlaps.
+
+Any operation errors are returned to the caller, while critical (unexpected) errors mark the entire chain as a rejected promise, and ensure that no new operation will be scheduled afterwards.
+
+By keeping the module context in a private (non-exported) variable, I'm minimizing the risks of accessing the `context` by accident somewhere else in the app without going through the `schedule()` call.
+
+To tie things together, now each access to the device context has to be wrapped in a `schedule()` call like this:
+
+```js
+let config = await this.connection.schedule((context) => context.configToJS());
+```
+
+and
+
+```js
+this.connection.schedule((context) => context.captureImageAsFile());
+```
+
+After that, all the operations were executing successfully without conflicts.
+
+## Conclusion
+
+Feel free to browse the [codebase on Github](https://github.com/GoogleChromeLabs/web-gphoto2) for more implementation insights. I also want to thank [Marcus Meissner](https://github.com/msmeissn) for maintenance of gPhoto2 and for his reviews of my upstream PRs.
+
+As shows in these posts, WebAssembly, Asyncify and Fugu APIs provide a capable compilation target for even the most complex applications. They allow you to take a library or an application previously built for a single platform, and port it to the web, making it available to a vastly larger number of users across desktop and mobile devices alike.
diff --git a/src/site/content/en/blog/porting-libusb-to-webusb/index.md b/src/site/content/en/blog/porting-libusb-to-webusb/index.md
new file mode 100644
index 00000000000..1e373382ec1
--- /dev/null
+++ b/src/site/content/en/blog/porting-libusb-to-webusb/index.md
@@ -0,0 +1,477 @@
+---
+title: 'Porting USB applications to the web. Part 1: libusb'
+subhead: Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.
+description: Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.
+date: 2022-01-20
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/MR4YGRvl0Z9AWT6vv3sQ.jpg
+alt: A picture of DSLR camera connected via a USB cable to a laptop. The laptop is running the Web demo mentioned in the article, which mirrors a live video feed from the camera as well as allows to tweak its settings via form controls.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - capabilities
+  - devices
+---
+
+In [a previous post](/asyncify/), I showed how to port apps using filesystem APIs to the web with [File System Access API](/file-system-access/), WebAssembly and [Asyncify](https://emscripten.org/docs/porting/asyncify.html). Now I want to continue the same topic of integrating [Fugu APIs](https://fugu-tracker.web.app/) with WebAssembly and porting apps to the web without losing important features.
+
+I'll show how apps that communicate with USB devices can be ported to the web by porting [libusb](https://libusb.info/)—a popular USB library written in C—to WebAssembly (via [Emscripten](https://emscripten.org/)), Asyncify and [WebUSB](/usb/).
+
+{% Aside %}
+Fun fact: On some platforms, implementation of WebUSB also uses libusb under the hood. So what the port achieves is, in fact, one libusb, compiled to WebAssembly, talking to another libusb, shipped as part of the browser, through an intermediate layer. Isn't the web fun?
+{% endAside %}
+
+## First things first: a demo
+
+The most important thing to do when porting a library is choosing the right demo—something that would showcase the capabilities of the ported library, allowing you to test it in a variety of ways, and be visually compelling at the same time.
+
+The idea I chose was DSLR remote control. In particular, an open source project [gPhoto2](http://gphoto.org/) has been in this space long enough to reverse-engineer and implement support for a wide variety of digital cameras. It supports several protocols, but the one I was most interested in was USB support, which it performs via libusb.
+
+I'll describe the steps for building this demo in two parts. In this blog post, I'll describe how I ported libusb itself, and what tricks might be necessary to port other popular libraries to Fugu APIs. In the [second post](/porting-gphoto2-to-the-web), I'll go into details on porting and integrating gPhoto2 itself.
+
+In the end, I got a working web application that previews live feed from a DSLR and can control its settings over USB. Feel free to check out the [live](https://web-gphoto2.rreverser.com/) or the pre-recorded demo before reading up on technical details:
+
+<figure>
+  {% Video src="video/9oK23mr86lhFOwKaoYZ4EySNFp02/4MUKvJhKOPK2CSTkhnEC.mp4", controls="true" %}
+  <figcaption>
+    <a href="https://web-gphoto2.rreverser.com/">The demo</a> running on a laptop connected to a Sony camera.
+  </figcaption>
+</figure>
+
+### Note on camera-specific quirks
+
+You might have noticed that changing settings takes a while in the video. Like with most other issues you might see, this is not caused by the performance of WebAssembly or WebUSB, but by how gPhoto2 interacts with the specific camera chosen for the demo.
+
+Sony a6600 doesn't expose an API to set values like ISO, aperture or shutter speed directly, and instead only provides commands to increase or decrease them by the specified number of steps. To make matters more complicated, it doesn't return a list of the actually supported values, either—the returned list seems hardcoded across many Sony camera models.
+
+When setting one of those values, gPhoto2 has no other choice but to:
+
+1. Make a step (or a few) in the direction of the chosen value.
+2. Wait a bit for the camera to update the settings.
+3. Read back the value the camera actually landed on.
+4. Check that the last step didn't jump over the desired value nor wrapped around the end or the beginning of the list.
+5. Repeat.
+
+It can take some time, but if the value is actually supported by the camera, it will get there, and, if not, it will stop on the nearest supported value.
+
+Other cameras will likely have different sets of settings, underlying APIs, and quirks. Keep in mind that gPhoto2 is an open-source project, and either automated or manual testing of all the camera models out there is simply not feasible, so detailed issue reports and PRs are always welcome (but make sure to reproduce the issues with the official gPhoto2 client first).
+
+### Important cross-platform compatibility notes
+
+Unfortunately, on Windows any "well-known" devices, including DSLR cameras, are assigned a system driver, which is not compatible with WebUSB. If you want to try the demo on Windows, you'll have to use a tool like [Zadig](https://zadig.akeo.ie/) to override the driver for the connected DSLR to either WinUSB or libusb. This approach works fine for me and many other users, but you should use it at your own risk.
+
+On Linux, you will likely need to [set custom permissions](/build-for-webusb/#linux) to allow access to your DSLR via WebUSB, although this depends on your distribution.
+
+On macOS and Android, the demo should work out of the box. If you're trying it on an Android phone, make sure to switch to the landscape mode as I didn't put much effort into making it responsive (PRs are welcome!):
+
+<figure>
+  {% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/POZGEUlnjJeRKvVDFdiR.jpg", alt="Android phone connected to a Canon camera via a USB-C cable.", width="800", height="533" %}
+  <figcaption>
+    <a href="https://web-gphoto2.rreverser.com/">The same demo</a> running on an Android phone. Picture by <a href="https://twitter.com/DasSurma">Surma</a>.
+  </figcaption>
+</figure>
+
+For a more in-depth guide on cross-platform usage of WebUSB, see the ["Platform-specific considerations" section of "Building a device for WebUSB"](/build-for-webusb/#platform-specific-considerations).
+
+## Adding a new backend to libusb
+
+Now onto the technical details. While it's possible to provide a shim API similar to libusb (this has been done by others before) and link other applications against it, this approach is error-prone and makes any further extension or maintenance harder. I wanted to do things right, in a way that could be potentially contributed back upstream and merged into libusb in the future.
+
+Luckily, the [libusb README](https://github.com/libusb/libusb/blob/f2b218b61867f27568ba74fa38e156e5f55ed825/README#L13-L15) says:
+
+**“libusb is abstracted internally in such a way that it can hopefully be ported to other operating systems. Please see the [PORTING](https://github.com/libusb/libusb/blob/master/PORTING) file for more information.”**
+
+libusb is structured in a way where the public API is separate from "backends". Those backends are responsible for listing, opening, closing and actually communicating to the devices via the operating system's low-level APIs. This is how libusb already abstracts away differences between Linux, macOS, Windows, Android, OpenBSD/NetBSD, Haiku and Solaris and works on all these platforms.
+
+What I had to do was add another backend for the Emscripten+WebUSB "operating system". The implementations for those backends live in the [`libusb/os`](https://github.com/libusb/libusb/tree/master/libusb/os) folder:
+
+```bash
+~/w/d/libusb $ ls libusb/os
+darwin_usb.c           haiku_usb_raw.h  threads_posix.lo
+darwin_usb.h           linux_netlink.c  threads_posix.o
+events_posix.c         linux_udev.c     threads_windows.c
+events_posix.h         linux_usbfs.c    threads_windows.h
+events_posix.lo        linux_usbfs.h    windows_common.c
+events_posix.o         netbsd_usb.c     windows_common.h
+events_windows.c       null_usb.c       windows_usbdk.c
+events_windows.h       openbsd_usb.c    windows_usbdk.h
+haiku_pollfs.cpp       sunos_usb.c      windows_winusb.c
+haiku_usb_backend.cpp  sunos_usb.h      windows_winusb.h
+haiku_usb.h            threads_posix.c
+haiku_usb_raw.cpp      threads_posix.h
+```
+
+Each backend includes the [`libusbi.h`](https://github.com/libusb/libusb/blob/master/libusb/libusbi.h) header with common types and helpers, and needs to expose a `usbi_backend` variable of type [`usbi_os_backend`](https://github.com/libusb/libusb/blob/f2b218b61867f27568ba74fa38e156e5f55ed825/libusb/libusbi.h#L886). For example, this is what the [Windows backend](https://github.com/libusb/libusb/blob/6cae9c6dbd74c0840848f343dd605c5ddcef1ad1/libusb/os/windows_common.c#L866-L904) looks like:
+
+```c
+const struct usbi_os_backend usbi_backend = {
+  "Windows",
+  USBI_CAP_HAS_HID_ACCESS,
+  windows_init,
+  windows_exit,
+  windows_set_option,
+  windows_get_device_list,
+  NULL,   /* hotplug_poll */
+  NULL,   /* wrap_sys_device */
+  windows_open,
+  windows_close,
+  windows_get_active_config_descriptor,
+  windows_get_config_descriptor,
+  windows_get_config_descriptor_by_value,
+  windows_get_configuration,
+  windows_set_configuration,
+  windows_claim_interface,
+  windows_release_interface,
+  windows_set_interface_altsetting,
+  windows_clear_halt,
+  windows_reset_device,
+  NULL,   /* alloc_streams */
+  NULL,   /* free_streams */
+  NULL,   /* dev_mem_alloc */
+  NULL,   /* dev_mem_free */
+  NULL,   /* kernel_driver_active */
+  NULL,   /* detach_kernel_driver */
+  NULL,   /* attach_kernel_driver */
+  windows_destroy_device,
+  windows_submit_transfer,
+  windows_cancel_transfer,
+  NULL,   /* clear_transfer_priv */
+  NULL,   /* handle_events */
+  windows_handle_transfer_completion,
+  sizeof(struct windows_context_priv),
+  sizeof(union windows_device_priv),
+  sizeof(struct windows_device_handle_priv),
+  sizeof(struct windows_transfer_priv),
+};
+```
+
+Looking through the properties, we can see that the struct includes the backend name, a set of its capabilities, handlers for various low-level USB operations in form of function pointers, and, finally, sizes to allocate for storing private device-/context-/transfer-level data.
+
+The private data fields are useful at least for storing OS handles to all those things, as without handles we don't know which item any given operation applies to. In the web implementation, the OS handles would be the underlying WebUSB JavaScript objects. The natural way to represent and store them in Emscripten is via the [`emscripten::val`](https://emscripten.org/docs/api_reference/val.h.html#_CPPv4N10emscripten10emscripten3valE) class, which is provided as part of [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) (Emscripten's bindings system).
+
+Most of the backends in the folder are implemented in C, but a few are implemented in C++. Embind only works with C++, so the choice was made for me and I've added `libusb/libusb/os/emscripten_webusb.cpp` with the required structure and with `sizeof(val)` for the private data fields:
+
+```cpp
+#include <emscripten.h>
+#include <emscripten/val.h>
+
+#include "libusbi.h"
+
+using namespace emscripten;
+
+// …function implementations
+
+const usbi_os_backend usbi_backend = {
+  .name = "Emscripten + WebUSB backend",
+  .caps = LIBUSB_CAP_HAS_CAPABILITY,
+  // …handlers—function pointers to implementations above
+  .device_priv_size = sizeof(val),
+  .transfer_priv_size = sizeof(val),
+};
+```
+
+### Storing WebUSB objects as device handles
+
+libusb provides ready-to-use pointers to the allocated area for private data. To work with those pointers as `val` instances, I've added small helpers that construct them in-place, retrieve them as references, and move values out:
+
+```cpp
+// We store an Embind handle to WebUSB USBDevice in "priv" metadata of
+// libusb device, this helper returns a pointer to it.
+struct ValPtr {
+ public:
+  void init_to(val &&value) { new (ptr) val(std::move(value)); }
+
+  val &get() { return *ptr; }
+  val take() { return std::move(get()); }
+
+ protected:
+  ValPtr(val *ptr) : ptr(ptr) {}
+
+ private:
+  val *ptr;
+};
+
+struct WebUsbDevicePtr : ValPtr {
+ public:
+  WebUsbDevicePtr(libusb_device *dev)
+      : ValPtr(static_cast<val *>(usbi_get_device_priv(dev))) {}
+};
+
+val &get_web_usb_device(libusb_device *dev) {
+  return WebUsbDevicePtr(dev).get();
+}
+
+struct WebUsbTransferPtr : ValPtr {
+ public:
+  WebUsbTransferPtr(usbi_transfer *itransfer)
+      : ValPtr(static_cast<val *>(usbi_get_transfer_priv(itransfer))) {}
+};
+```
+
+### Async web APIs in synchronous C contexts
+
+Now needed a way to handle async WebUSB APIs where libusb expects synchronous operations. For this, I could use Asyncify, or, more specifically, its Embind integration via [`val::await()`](https://emscripten.org/docs/api_reference/val.h.html#_CPPv4NK10emscripten10emscripten3val5awaitEv).
+
+I also wanted to correctly handle WebUSB errors and convert them into libusb error codes, but Embind currently doesn't have any way to handle JavaScript exceptions or `Promise` rejections from the C++ side. This problem can be worked around by catching a rejection on the JavaScript side and converting the result into an `{ error, value }` object that can be now safely parsed from the C++ side. I did this with a combination of the [`EM_JS`](https://emscripten.org/docs/api_reference/emscripten.h.html#c.EM_JS) macro and [`Emval.to{Handle, Value}`](https://emscripten.org/docs/api_reference/val.h.html#_CPPv4NK10emscripten10emscripten3val9as_handleEv) APIs:
+
+```cpp
+EM_JS(EM_VAL, em_promise_catch_impl, (EM_VAL handle), {
+  let promise = Emval.toValue(handle);
+  promise = promise.then(
+    value => ({error : 0, value}),
+    error => {
+      const ERROR_CODES = {
+        // LIBUSB_ERROR_IO
+        NetworkError : -1,
+        // LIBUSB_ERROR_INVALID_PARAM
+        DataError : -2,
+        TypeMismatchError : -2,
+        IndexSizeError : -2,
+        // LIBUSB_ERROR_ACCESS
+        SecurityError : -3,
+        …
+      };
+      console.error(error);
+      let errorCode = -99; // LIBUSB_ERROR_OTHER
+      if (error instanceof DOMException)
+      {
+        errorCode = ERROR_CODES[error.name] ?? errorCode;
+      }
+      else if (error instanceof RangeError || error instanceof TypeError)
+      {
+        errorCode = -2; // LIBUSB_ERROR_INVALID_PARAM
+      }
+      return {error: errorCode, value: undefined};
+    }
+  );
+  return Emval.toHandle(promise);
+});
+
+val em_promise_catch(val &&promise) {
+  EM_VAL handle = promise.as_handle();
+  handle = em_promise_catch_impl(handle);
+  return val::take_ownership(handle);
+}
+
+// C++ struct representation for {value, error} object from above
+// (performs conversion in the constructor).
+struct promise_result {
+  libusb_error error;
+  val value;
+
+  promise_result(val &&result)
+      : error(static_cast<libusb_error>(result["error"].as<int>())),
+        value(result["value"]) {}
+
+  // C++ counterpart of the promise helper above that takes a promise, catches
+  // its error, converts to a libusb status and returns the whole thing as
+  // `promise_result` struct for easier handling.
+  static promise_result await(val &&promise) {
+    promise = em_promise_catch(std::move(promise));
+    return {promise.await()};
+  }
+};
+```
+
+Now I could use `promise_result::await()` on any `Promise` returned from WebUSB operations and inspect its `error` and `value` fields separately.
+
+For example, retrieving a `val` representing a [`USBDevice`](https://developer.mozilla.org/docs/Web/API/USBDevice) from `libusb_device_handle`, calling its [`open()`](https://developer.mozilla.org/docs/Web/API/USBDevice/open) method, awaiting its result, and returning an error code as a libusb status code looks like this:
+
+```cpp
+int em_open(libusb_device_handle *handle) {
+  auto web_usb_device = get_web_usb_device(handle->dev);
+  return promise_result::await(web_usb_device.call<val>("open")).error;
+}
+```
+
+### Device enumeration
+
+Of course, before I can open any device, libusb needs to retrieve a list of available devices. The backend must implement this operation via a `get_device_list` handler.
+
+The difficulty is that, unlike on other platforms, there is no way to enumerate all the connected USB devices on the web for security reasons. Instead, the flow is split into two parts. First, the web application requests devices with specific properties via [`navigator.usb.requestDevice()`](https://developer.mozilla.org/docs/Web/API/USB/requestDevice) and the user manually chooses which device they want to expose or rejects the permission prompt. Afterwards, the application lists the already approved and connected devices via [`navigator.usb.getDevices()`](https://developer.mozilla.org/docs/Web/API/USB/getDevices).
+
+At first I tried to use `requestDevice()` directly in the implementation of the `get_device_list` handler. However, showing a permission prompt with a list of connected devices is considered a sensitive operation, and it must be triggered by user interaction (like a button click on a page), otherwise it always returns a rejected promise. libusb applications might often want to list the connected devices upon application start-up, so using `requestDevice()` was not an option.
+
+Instead, I had to leave invocation of `navigator.usb.requestDevice()` to the end developer, and only expose the already approved devices from `navigator.usb.getDevices()`:
+
+```cpp
+// Store the global `navigator.usb` once upon initialisation.
+thread_local const val web_usb = val::global("navigator")["usb"];
+
+int em_get_device_list(libusb_context *ctx, discovered_devs **devs) {
+  // C++ equivalent of `await navigator.usb.getDevices()`.
+  // Note: at this point we must already have some devices exposed -
+  // caller must have called `await navigator.usb.requestDevice(...)`
+  // in response to user interaction before going to LibUSB.
+  // Otherwise this list will be empty.
+  auto result = promise_result::await(web_usb.call<val>("getDevices"));
+  if (result.error) {
+    return result.error;
+  }
+  auto &web_usb_devices = result.value;
+  // Iterate over the exposed devices.
+  uint8_t devices_num = web_usb_devices["length"].as<uint8_t>();
+  for (uint8_t i = 0; i < devices_num; i++) {
+    auto web_usb_device = web_usb_devices[i];
+    // …
+    *devs = discovered_devs_append(*devs, dev);
+  }
+  return LIBUSB_SUCCESS;
+}
+```
+
+Most of the backend code uses `val` and `promise_result` in a similar way as already shown above. There are few more interesting hacks in the data transfer handling code, but those implementation details are less important for the purposes of this article. Make sure to check the code and comments on Github if you're interested.
+
+## Porting event loops to the web
+
+One more piece of the libusb port that I want to discuss is event handling. As described in the previous article, most APIs in system languages like C are synchronous, and event handling is no exception. It's usually implemented via an infinite loop that "polls" (tries to read data or blocks execution until some data is available) from a set of external I/O sources, and, when at least one of those responds, passes that as an event to the corresponding handler. Once the handler is finished, the control returns to the loop, and it pauses for another poll.
+
+There are a couple of problems with this approach on the web.
+
+First, WebUSB doesn't and cannot expose raw handles of the underlying devices, so polling those directly is not an option. Second, libusb uses [`eventfd`](https://man7.org/linux/man-pages/man2/eventfd.2.html) and [`pipe`](https://man7.org/linux/man-pages/man2/pipe.2.html) APIs for other events as well as for handling transfers on operating systems without raw device handles, but `eventfd` is not currently supported in Emscripten, and `pipe`, while supported, [currently doesn't conform to the spec](https://github.com/emscripten-core/emscripten/issues/13214) and can't wait for events.
+
+Finally, the biggest problem is that the web has its own event loop. This global event loop is used for any external I/O operations (including `fetch()`, timers, or, in this case, WebUSB), and it invokes event or `Promise` handlers whenever corresponding operations finish. Executing another, nested, infinite event loop will block the browser's event loop from ever progressing, which means that not only will the UI become unresponsive, but also that the code will never get notifications for the very same I/O events it's waiting for. This usually results in a deadlock, and that's what happened when I tried to use libusb in a demo, too. The page froze.
+
+Like with other blocking I/O, to port such event loops to the web, developers need to find a way to run those loops without blocking the main thread. One way is to refactor the application to handle I/O events in a separate thread and pass the results back to the main one. The other is to use Asyncify to pause the loop and wait for events in a non-blocking fashion.
+
+I didn't want to do significant changes to either libusb or gPhoto2, and I've already used Asyncify for `Promise` integration, so that's the path I've chosen. To simulate a blocking variant of `poll()`, for the initial proof of concept I've used a loop as shown below:
+
+```cpp
+#ifdef __EMSCRIPTEN__
+  // TODO: optimize this. Right now it will keep unwinding-rewinding the stack
+  // on each short sleep until an event comes or the timeout expires.
+  // We should probably create an actual separate thread that does signaling
+  // or come up with a custom event mechanism to report events from
+  // `usbi_signal_event` and process them here.
+  double until_time = emscripten_get_now() + timeout_ms;
+  do {
+    // Emscripten `poll` ignores timeout param, but pass 0 explicitly just
+    // in case.
+    num_ready = poll(fds, nfds, 0);
+    if (num_ready != 0) break;
+    // Yield to the browser event loop to handle events.
+    emscripten_sleep(0);
+  } while (emscripten_get_now() < until_time);
+#else
+  num_ready = poll(fds, nfds, timeout_ms);
+#endif
+```
+
+What it does is:
+
+1. Calls `poll()` to check if any events were reported by the backend yet. If there are some, the loop stops. Otherwise Emscripten's implementation of `poll()` will immediately return with `0`.
+2. Calls `emscripten_sleep(0)`. This function uses Asyncify and `setTimeout()` under the hood and is used here to yield control back to the main browser event loop. This allows the browser to handle any user interactions and I/O events, including WebUSB.
+3. Check if the specified timeout has expired yet, and, if not, continue the loop.
+
+As the comment mentions, this approach was not optimal, because it kept saving-restoring the entire call stack with Asyncify even when there were no USB events to handle yet (which is most of the time), and because `setTimeout()` itself has a minimal duration of 4ms in modern browsers. Still, it worked well enough to produce 13-14 FPS livestream from DSLR in the proof-of-concept.
+
+Later, I decided to improve it by leveraging the browser event system. There are several ways in which this implementation could be improved further, but for now I've chosen to emit custom events directly on the global object, without associating them with a particular libusb data structure. I've done so via the following wait and notify mechanism based on the [`EM_ASYNC_JS` macro](/emscripten-embedding-js-snippets/#emasyncjs-macro):
+
+```js
+EM_JS(void, em_libusb_notify, (void), {
+  dispatchEvent(new Event("em-libusb"));
+});
+
+EM_ASYNC_JS(int, em_libusb_wait, (int timeout), {
+  let onEvent, timeoutId;
+
+  try {
+    return await new Promise(resolve => {
+      onEvent = () => resolve(0);
+      addEventListener('em-libusb', onEvent);
+
+      timeoutId = setTimeout(resolve, timeout, -1);
+    });
+  } finally {
+    removeEventListener('em-libusb', onEvent);
+    clearTimeout(timeoutId);
+  }
+});
+```
+
+The `em_libusb_notify()` function is used whenever libusb tries to report an event, such as data transfer completion:
+
+```cpp/8-10
+void usbi_signal_event(usbi_event_t *event)
+{
+  uint64_t dummy = 1;
+  ssize_t r;
+
+  r = write(EVENT_WRITE_FD(event), &dummy, sizeof(dummy));
+  if (r != sizeof(dummy))
+    usbi_warn(NULL, "event write failed");
+#ifdef __EMSCRIPTEN__
+  em_libusb_notify();
+#endif
+}
+```
+
+Meanwhile, the `em_libusb_wait()` part is used to "wake up" from Asyncify sleep when either an `em-libusb` event is received, or the timeout has expired:
+
+```cpp/8
+double until_time = emscripten_get_now() + timeout_ms;
+for (;;) {
+  // Emscripten `poll` ignores timeout param, but pass 0 explicitly just
+  // in case.
+  num_ready = poll(fds, nfds, 0);
+  if (num_ready != 0) break;
+  int timeout = until_time - emscripten_get_now();
+  if (timeout <= 0) break;
+  int result = em_libusb_wait(timeout);
+  if (result != 0) break;
+}
+```
+
+Due to significant reduction in sleeps and wake-ups, this mechanism fixed the efficiency problems of the earlier `emscripten_sleep()`-based implementation, and increased the DSLR demo throughput from 13-14 FPS to consistent 30+ FPS, which is enough for a smooth live feed.
+
+## Build system and the first test
+
+After the backend was done, I had to add it to `Makefile.am` and `configure.ac`. The only interesting bit here is Emscripten-specific flags modification:
+
+```bash
+emscripten)
+  AC_SUBST(EXEEXT, [.html])
+  # Note: LT_LDFLAGS is not enough here because we need link flags for executable.
+  AM_LDFLAGS="${AM_LDFLAGS} --bind -s ASYNCIFY -s ASSERTIONS -s ALLOW_MEMORY_GROWTH -s INVOKE_RUN=0 -s EXPORTED_RUNTIME_METHODS=['callMain']"
+  ;;
+```
+
+First, executables on Unix platforms normally don't have file extensions. Emscripten, however, produces different output depending on which extension you request. I'm using `AC_SUBST(EXEEXT, …)` to change the executable extension to `.html` so that any executable within a package—tests and examples—becomes an HTML with Emscripten's default shell that takes care of loading and instantiating JavaScript and WebAssembly.
+
+Second, because I'm using Embind and Asyncify, I need to enable those features (`--bind -s ASYNCIFY`) as well as allow dynamic memory growth (`-s ALLOW_MEMORY_GROWTH`) via linker parameters. Unfortunately, there is no way for a library to report those flags to the linker, so every application that uses this libusb port will have to add the same linker flags into their build configuration as well.
+
+Finally, as mentioned earlier, WebUSB requires device enumeration to be done via a user gesture. libusb examples and tests assume that they can enumerate devices at start-up, and fail with an error without changes. Instead, I had to disable automatic execution (`-s INVOKE_RUN=0`) and expose the manual `callMain()` method (`-s EXPORTED_RUNTIME_METHODS=...`).
+
+Once all of this was done, I could serve the generated files with a static web server, initialize WebUSB, and run those HTML executables manually with the help of DevTools.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/i6dUiRRDtb0ucKX9gHOH.png", alt="Screenshot showing a Chrome window with DevTools open on a locally served `testlibusb` page. DevTools console is evaluating `navigator.usb.requestDevice({ filters: [] })`, which triggered a permission prompt and it's currently asking the user to choose a USB device that should be shared with the page. ILCE-6600 (a Sony camera) is currently selected.", width="800", height="626" %}
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/0FhFjozbwA1sqk1Dhx7f.png", alt="Screenshot of the next step, with DevTools still open. After the device was selected, Console has evaluated a new expression `Module.callMain(['-v'])`, which executed the `testlibusb` app in verbose mode. The output shows various detailed information about the previously connected USB camera: manufacturer Sony, product ILCE-6600, serial number, configuration etc.", width="800", height="824" %}
+
+It doesn't look like much, but, when porting libraries to a new platform, getting to the stage where it produces a valid output for the first time is pretty exciting!
+
+## Using the port
+
+As mentioned [above](#build-system-and-the-first-test), the port depends on a few Emscripten features that currently need to be enabled at the linking stage of the application. If you want to use this libusb port in your own application, here's what you'll need to do:
+
+1. Download the latest [libusb](https://github.com/libusb/libusb) either as an archive as part of your build or add it as a git submodule in your project.
+2. Run `autoreconf -fiv` in the `libusb` folder.
+3. Run `emconfigure ./configure –host=wasm32 –prefix=/some/installation/path` to initialize the project for cross-compilation and to set a path where you want to put the built artifacts.
+4. Run `emmake make install`.
+5. Point your application or higher-level library to search for the libusb under the earlier chosen path.
+6. Add the following flags to your application's link arguments: `--bind -s ASYNCIFY -s ALLOW_MEMORY_GROWTH`.
+
+The library currently has a few limitations:
+
+* No transfer cancellation support. This is a limitation of WebUSB, which, in turn, stems from lack of cross-platform transfer cancellation in libusb itself.
+* No isochronous transfer support. It shouldn't be hard to add it by following the implementation of existing transfer modes as examples, but it's also a somewhat rare mode and I didn't have any devices to test it on, so for now I left it as unsupported. If you do have such devices, and want to contribute to the library, PRs are welcome!
+* The [earlier mentioned cross-platform limitations](#important-cross-platform-compatibility-notes). Those limitations are imposed by operating systems, so not much we can do here, except ask users to override the driver or permissions. However, if you're porting HID or serial devices, you can follow the libusb example and port some other library to another Fugu API. For example, you could port a C library [hidapi](https://github.com/libusb/hidapi) to [WebHID](/hid/) and side-step those issues, associated with low-level USB access, altogether.
+
+## Conclusion
+
+In this post I've shown how, with the help of Emscripten, Asyncify and Fugu APIs even low-level libraries like libusb can be ported to the web with a few integration tricks.
+
+Porting such essential and widely used low-level libraries is particularly rewarding, because, in turn, it allows bringing higher-level libraries or even whole applications to the web, too. This opens experiences that were previously limited to users of one or two platforms, to all kinds of devices and operating systems, making those experiences available just a link click away.
+
+In the [next post](/porting-gphoto2-to-the-web) I'll walk through the steps involved in building the web gPhoto2 demo which not only retrieves device information, but extensively uses the transfer feature of libusb too. Meanwhile, I hope you found the libusb example inspiring and will try out the demo, play with the library itself, or perhaps even go ahead and port another widely used library to one of the Fugu APIs too.
diff --git a/src/site/content/en/blog/preconnect-and-dns-prefetch/adams-creation.jpg b/src/site/content/en/blog/preconnect-and-dns-prefetch/adams-creation.jpg
deleted file mode 100644
index 18ed67c3044..00000000000
Binary files a/src/site/content/en/blog/preconnect-and-dns-prefetch/adams-creation.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/preconnect-and-dns-prefetch/image-cdn-url.png b/src/site/content/en/blog/preconnect-and-dns-prefetch/image-cdn-url.png
deleted file mode 100644
index 662116b6a4f..00000000000
Binary files a/src/site/content/en/blog/preconnect-and-dns-prefetch/image-cdn-url.png and /dev/null differ
diff --git a/src/site/content/en/blog/preconnect-and-dns-prefetch/index.md b/src/site/content/en/blog/preconnect-and-dns-prefetch/index.md
index f664fea0845..c0260fff521 100644
--- a/src/site/content/en/blog/preconnect-and-dns-prefetch/index.md
+++ b/src/site/content/en/blog/preconnect-and-dns-prefetch/index.md
@@ -3,10 +3,12 @@ title: Establish network connections early to improve perceived page speed
 subhead: |
     Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
 date: 2019-07-30
-hero: adams-creation.jpg
+updated: 2022-08-07
+hero: image/admin/Dyccd1RLN0fzhjPXswmL.jpg
 alt: Adam's Creation by Michelangelo on Sistine Chapel ceiling
 authors:
   - mihajlija
+  - jlwagner
 description: |
     Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
 tags:
@@ -22,7 +24,7 @@ Before the browser can request a resource from a server, it must establish a con
 
 * Encrypt the connection for security.
 
-In each of these steps the browser sends a piece of data to a server, and the server sends back a response. That journey, from origin to destination and back, is called a [round trip](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time_(RTT)).
+In each of these steps the browser sends a piece of data to a server, and the server sends back a response. That journey, from origin to destination and back, is called a [round trip](https://developer.mozilla.org/docs/Glossary/Round_Trip_Time_(RTT)).
 
 Depending on network conditions, a single round trip might take a significant amount of time. The connection setup process might involve up to three round trips—and more in unoptimized cases.
 
@@ -42,9 +44,9 @@ Informing the browser of your intention is as simple as adding a `<link>` tag to
 <link rel="preconnect" href="https://example.com">
 ```
 
-![A diagram showing how the download doesn't start for a while after the connection is established.](preconnect.png)
+{% Img src="image/admin/988BgvmiVEAp2YVKt2jq.png", alt="A diagram showing how the download doesn't start for a while after the connection is established.", width="800", height="539" %}
 
-You can speed up the load time by 100–500 ms by establishing early connections to important third-party origins. These numbers might seem small, but they make a difference in how [users perceive web page performance](https://developers.google.com/web/fundamentals/performance/rail#ux).
+You can speed up the load time by 100–500 ms by establishing early connections to important third-party origins. These numbers might seem small, but they make a difference in how [users perceive web page performance](/user-centric-performance-metrics/).
 
 {% Aside %}
 chrome.com [improved Time To Interactive](https://twitter.com/addyosmani/status/1090874825286000640) by almost 1 s by pre-connecting to important origins.
@@ -56,15 +58,15 @@ chrome.com [improved Time To Interactive](https://twitter.com/addyosmani/status/
 
 Due to versioned dependencies, you sometimes end up in a situation where you know you'll be requesting a resource from a particular CDN, but not the exact path for it.
 
-<figure class="w-figure">
-<img src="versioned-url.png" style="max-width:450px" alt="A url of a script with the version name.">
+<figure>
+{% Img src="image/admin/PsP4qymb1gIp8Ip2sD9W.png", alt="A url of a script with the version name.", width="450", height="50" %}
 <figcaption>An example of a versioned URL.</figcaption>
 </figure>
 
 The other common case is loading images from an [image CDN](/image-cdns), where the exact path for an image depends on media queries or runtime feature checks on the user's browser.
 
-<figure class="w-figure">
-<img src="image-cdn-url.png" alt="An image CDN URL with the parameters size=300x400 and quality=auto.">
+<figure>
+{% Img src="image/admin/Xx4ai7tzSq12DJsQXaL1.png", alt="An image CDN URL with the parameters size=300x400 and quality=auto.", width="800", height="52" %}
 <figcaption>An example of an image CDN URL.</figcaption>
 </figure>
 
@@ -92,7 +94,7 @@ Preconnecting is only effective for domains other than the origin domain, so you
 Only preconnect to critical domains you will use soon because the browser closes any connection that isn't used within 10 seconds. Unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and [test the impact preconnecting makes](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/).
 {% endAside %}
 
-You can also initiate a preconnect via the [`Link` HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link):
+You can also initiate a preconnect via the [`Link` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link):
 
 `Link: <https://example.com/>; rel=preconnect`
 
@@ -110,9 +112,9 @@ If you omit the `crossorigin` attribute, the browser only performs the DNS looku
 
 ## Resolve domain name early with `rel=dns-prefetch`
 
-You remember sites by their names, but servers remember them by IP addresses. This is why the domain name system (DNS) exists. The browser uses DNS to convert the site name to an IP address. This process — [domain name resolution](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/)— is the first step in establishing a connection.
+You remember sites by their names, but servers remember them by IP addresses. This is why the domain name system (DNS) exists. The browser uses DNS to convert the site name to an IP address. This process—[domain name resolution](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/)— is the first step in establishing a connection.
 
-If a page needs to make connections to many third-party domains, preconnecting all of them is counterproductive. The `preconnect` hint is best used for only the most critical connections. For all the rest, use  `<link rel=dns-prefetch>` to save time on the first step, the DNS lookup, which usually takes around [20–120 ms](https://www.keycdn.com/support/reduce-dns-lookups).
+If a page needs to make connections to many third-party domains, preconnecting all of them is counterproductive. The `preconnect` hint is best used for only the most critical connections. For all the rest, use `<link rel=dns-prefetch>` to save time on the first step, the DNS lookup, which usually takes around [20–120 ms](https://www.keycdn.com/support/reduce-dns-lookups).
 
 DNS resolution is initiated similarly to `preconnect`: by adding a `<link>` tag to the `<head>` of the document.
 
@@ -146,5 +148,18 @@ Implementing `dns-prefetch` fallback in the same `<link>` tag causes a bug in Sa
 
 {% endCompare %}
 
+## Effect on Largest Contentful Paint (LCP)
+
+Using `dns-prefetch` and `preconnect` allows sites to reduce the amount of time it takes to connect to another origin. The ultimate aim is that the time to load a resource from another origin should be minimized as much as possible.
+
+Where [Largest Contentful Paint (LCP)](/lcp/) is concerned, it is better that resources are immediately discoverable, since [LCP candidates](/lcp/#what-elements-are-considered) are crucial parts of the user experience. A [`fetchpriority` value of `"high"`](/fetch-priority/#when-would-you-need-fetch-priority) on LCP resources can further improve this by signaling the importance of this asset to the browser so it can fetch it early.
+
+Where it is not possible to make LCP assets immediately discoverable, a [`preload`](/preload-critical-assets/) link&mdash;also with the `fetchpriority` value of `"high"`&mdash;still allows the browser to load the resource as soon as possible.
+
+If neither of these options are available&mdash;because the exact resource will not be known until later in the page load&mdash;you can use `preconnect` on cross-origin resources to reduce the impact of the late discovery of the resource as much as possible.
+
+Additionally, `preconnect` is less expensive than `preload` in terms of bandwidth usage, but still not without its risks. As is the case with excessive `preload` hints, excessive `preconnect` hints still consume bandwidth where TLS certificates are concerned. Be careful not to preconnect to too many origins, as this may cause bandwidth contention.
+
 ## Conclusion
+
 These two resource hints are helpful for improving page speed when you know you'll download something from a third-party domain soon, but you don't know the exact URL for the resource. Examples include CDNs that distribute JavaScript libraries, images or fonts. Be mindful of constraints, use `preconnect` only for the most important resources, rely on `dns-prefetch` for the rest, and always measure the impact in the real-world.
diff --git a/src/site/content/en/blog/preconnect-and-dns-prefetch/preconnect.png b/src/site/content/en/blog/preconnect-and-dns-prefetch/preconnect.png
deleted file mode 100644
index 398ccc2020b..00000000000
Binary files a/src/site/content/en/blog/preconnect-and-dns-prefetch/preconnect.png and /dev/null differ
diff --git a/src/site/content/en/blog/preconnect-and-dns-prefetch/versioned-url.png b/src/site/content/en/blog/preconnect-and-dns-prefetch/versioned-url.png
deleted file mode 100644
index 1c9e00e0033..00000000000
Binary files a/src/site/content/en/blog/preconnect-and-dns-prefetch/versioned-url.png and /dev/null differ
diff --git a/src/site/content/en/blog/predictive-prefetching/guess-0.png b/src/site/content/en/blog/predictive-prefetching/guess-0.png
deleted file mode 100644
index 064e10451e1..00000000000
Binary files a/src/site/content/en/blog/predictive-prefetching/guess-0.png and /dev/null differ
diff --git a/src/site/content/en/blog/predictive-prefetching/guess-1.png b/src/site/content/en/blog/predictive-prefetching/guess-1.png
deleted file mode 100644
index 828ec3246e2..00000000000
Binary files a/src/site/content/en/blog/predictive-prefetching/guess-1.png and /dev/null differ
diff --git a/src/site/content/en/blog/predictive-prefetching/index.md b/src/site/content/en/blog/predictive-prefetching/index.md
index 07edbb46408..005051a1f02 100644
--- a/src/site/content/en/blog/predictive-prefetching/index.md
+++ b/src/site/content/en/blog/predictive-prefetching/index.md
@@ -2,7 +2,7 @@
 title: Faster web navigation with predictive prefetching
 subhead: Learn about predictive prefetching and how Guess.js implements it.
 date: 2019-07-08
-hero: predictive-prefetching-header.png
+hero: image/admin/1jRaJzDtk6w4vYxbqDn3.png
 alt: Guess.js logo
 authors:
   - mgechev
@@ -11,6 +11,8 @@ description: |
 tags:
   - blog
   - performance
+feedback:
+  - api
 ---
 
 In my [Faster Web Navigation with Predictive Prefetching](https://www.youtube.com/watch?v=0jB4YWgAxUo) session at Google I/O 2019, I began by talking about optimizing web apps with code splitting and the potential performance implications for subsequent page navigation. In the second part of the talk, I discussed how to improve navigation speed by using Guess.js to set up predictive prefetching:
@@ -21,9 +23,9 @@ In my [Faster Web Navigation with Predictive Prefetching](https://www.youtube.co
 
 Web apps are slow, and JavaScript is among the most expensive resources that you ship. Waiting for a slow web app to load can frustrate your users and decrease conversions.
 
-![Slow web apps are stressful.](guess-0.png)
+{% Img src="image/admin/Ex1RhD84fTzpNwYM6Ocy.png", alt="Slow web apps are stressful.", width="800", height="438" %}
 
-Lazy-loading is an efficient technique to reduce the bytes of JavaScript that you're transferring over the wire. You can use several techniques to lazy-load JavaScript, including:
+Lazy loading is an efficient technique to reduce the bytes of JavaScript that you're transferring over the wire. You can use several techniques to lazy-load JavaScript, including:
 
 - Component-level code splitting
 - Route-level code splitting
@@ -41,7 +43,7 @@ Prefetching allows the browser to download and cache resources that the user is
 
 Predictive prefetching solves these problems by using a report of users' navigational patterns to determine what assets to prefetch.
 
-![Prefetching example](guess-1.png)
+{% Img src="image/admin/vkK5KhZKhSo6bDIBuVrn.png", alt="Prefetching example", width="800", height="517" %}
 
 ## Predictive prefetching with Guess.js
 
diff --git a/src/site/content/en/blog/predictive-prefetching/predictive-prefetching-header.png b/src/site/content/en/blog/predictive-prefetching/predictive-prefetching-header.png
deleted file mode 100644
index c2947826216..00000000000
Binary files a/src/site/content/en/blog/predictive-prefetching/predictive-prefetching-header.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/android.png b/src/site/content/en/blog/prefers-color-scheme/android.png
deleted file mode 100644
index ddb3987862c..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/android.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/closeview.png b/src/site/content/en/blog/prefers-color-scheme/closeview.png
deleted file mode 100644
index 03afa978da3..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/closeview.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-dark.png b/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-dark.png
deleted file mode 100644
index c1e6c312986..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-dark.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-light.png b/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-light.png
deleted file mode 100644
index 3658658d894..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/dark-mode-toggle-light.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/dark.png b/src/site/content/en/blog/prefers-color-scheme/dark.png
deleted file mode 100644
index 0b2ad5e3d96..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/dark.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/devtools-emulate.png b/src/site/content/en/blog/prefers-color-scheme/devtools-emulate.png
deleted file mode 100644
index 4234a641acc..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/devtools-emulate.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/green-screen.jpg b/src/site/content/en/blog/prefers-color-scheme/green-screen.jpg
deleted file mode 100644
index c7325d5c7f0..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/green-screen.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/hero-dark.png b/src/site/content/en/blog/prefers-color-scheme/hero-dark.png
deleted file mode 100644
index 8e93d6fa0d1..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/hero-dark.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/hero-light.png b/src/site/content/en/blog/prefers-color-scheme/hero-light.png
deleted file mode 100644
index 80b35f164aa..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/hero-light.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/hero.jpg b/src/site/content/en/blog/prefers-color-scheme/hero.jpg
deleted file mode 100644
index 26153e982ad..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/icons-dark.png b/src/site/content/en/blog/prefers-color-scheme/icons-dark.png
deleted file mode 100644
index c0a1f0679ff..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/icons-dark.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/icons-light.png b/src/site/content/en/blog/prefers-color-scheme/icons-light.png
deleted file mode 100644
index a4e548532fa..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/icons-light.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/index.md b/src/site/content/en/blog/prefers-color-scheme/index.md
index ce61ffe3c6d..33035afb249 100644
--- a/src/site/content/en/blog/prefers-color-scheme/index.md
+++ b/src/site/content/en/blog/prefers-color-scheme/index.md
@@ -1,11 +1,12 @@
 ---
-title: "prefers-color-scheme: Hello darkness, my old friend"
+layout: post
+title: 'prefers-color-scheme: Hello darkness, my old friend'
 subhead: Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users!
 authors:
   - thomassteiner
 date: 2019-06-27
-updated: 2020-06-09
-hero: hero.jpg
+updated: 2020-08-02
+hero: image/admin/dgDcIJUyuWB5xNn9CODd.jpg
 hero_position: bottom
 alt: |
   Silhouette photo of a mountain during nighttime, photo by Nathan Anderson on Unsplash.
@@ -16,26 +17,28 @@ description: |
   to offer users a way to override their operating system level preference on specific web pages.
 tags:
   - blog
-  - dark-mode
-  - dark-theme
-  - prefers-color-scheme
-  - color-scheme
+  # - dark-mode
+  # - dark-theme
+  # - prefers-color-scheme
+  # - color-scheme
   - css
+feedback:
+  - api
 ---
 
 ## Introduction
 
 {% Aside 'note' %}
-  📚 I have done a lot of background research on the history and theory of dark mode,
-  if you are only interested in working with dark mode, feel free to
-  [skip the introduction](#activating-dark-mode-in-the-operating-system).
+I have done a lot of background research on the history and theory of dark mode,
+if you are only interested in working with dark mode, feel free to
+[skip the introduction](#activating-dark-mode-in-the-operating-system).
 {% endAside %}
 
-### Dark mode before *Dark Mode*
+### Dark mode before _Dark Mode_
 
-<figure class="w-figure w-figure--inline-right">
-  <img style="height: 175px; width: auto;" src="green-screen.jpg" alt="Green screen computer monitor" height="480" width="640">
-  <figcaption class="w-figcaption">Green screen (<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">Source</a>)</figcaption>
+<figure data-float="right">
+  {% Img src="image/admin/fmdRPm6K5SXiIRLgyz4y.jpg", alt="Green screen computer monitor", width="233", height="175" %}
+  <figcaption>Green screen (<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">Source</a>)</figcaption>
 </figure>
 
 We have gone full circle with dark mode.
@@ -46,9 +49,9 @@ on a phosphorescent screen and the phosphor used in early CRTs was green.
 Because text was displayed in green and the rest of the screen was black, these models were often referred to as
 [green screens](https://commons.wikimedia.org/wiki/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg).
 
-<figure class="w-figure w-figure--inline-left">
-  <img style="height: 175px; width: auto;" src="word-processing.jpg" alt="Dark-on-white word processing" height="551" width="698">
-  <figcaption class="w-figcaption">Dark-on-white (<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">Source</a>)</figcaption>
+<figure data-float="left">
+  {% Img src="image/admin/l9oDlIO59oyJiXVegxIV.jpg", alt="Dark-on-white word processing", width="222", height="175" %}
+  <figcaption>Dark-on-white (<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">Source</a>)</figcaption>
 </figure>
 
 The subsequently introduced Color CRTs displayed multiple colors
@@ -58,12 +61,12 @@ With the advent of more sophisticated <abbr title="What You See Is What You Get"
 [desktop publishing](https://en.wikipedia.org/wiki/Desktop_publishing),
 the idea of making the virtual document resemble a physical sheet of paper became popular.
 
-<figure class="w-figure w-figure--inline-right">
-  <img style="height: 175px; width: auto;" src="worldwideweb.png" alt="Dark-on-white webpage in the WorldWideWeb browser" height="600" width="800">
-  <figcaption class="w-figcaption">The WorldWideWeb browser (<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">Source</a>)</figcaption>
+<figure data-float="right">
+  {% Img src="image/admin/lnuLLcQzIF7r08lt479k.png", alt="Dark-on-white webpage in the WorldWideWeb browser", width="233", height="175" %}
+  <figcaption>The WorldWideWeb browser (<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">Source</a>)</figcaption>
 </figure>
 
-This is where *dark-on-white* as a design trend started,
+This is where _dark-on-white_ as a design trend started,
 and this trend was carried over to the
 [early document-based web](http://info.cern.ch/hypertext/WWW/TheProject.html).
 The first ever browser,
@@ -78,9 +81,9 @@ These days, web pages and web apps are typically designed with dark text
 on a light background, a baseline assumption that is also hard-coded in user agent stylesheets, including
 [Chrome's](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css).
 
-<figure class="w-figure w-figure--inline-left">
-  <img style="height: 175px; width: auto;" src="smartphone-in-bed.jpg" alt="Smartphone used while lying in bed" height="334" width="500">
-  <figcaption class="w-figcaption">Smartphone used in bed (<a href="https://unsplash.com/photos/W39xsPWZgA4">Source</a>)</figcaption>
+<figure data-float="left">
+  {% Img src="image/admin/zCdyRdnAnbrB7aAB0TQi.jpg", alt="Smartphone used while lying in bed", width="262", height="175" %}
+  <figcaption>Smartphone used in bed (Source: Unsplash)</figcaption>
 </figure>
 
 The days of CRTs are long over.
@@ -92,7 +95,7 @@ Leisure tasks like web browsing, coding for fun, and high-end gaming
 frequently happen after-hours in dim environments.
 People even enjoy their devices in their beds at night-time.
 The more people use their devices in the dark,
-the more the idea of going back to the roots of *light-on-dark* becomes popular.
+the more the idea of going back to the roots of _light-on-dark_ becomes popular.
 
 ### Why dark mode
 
@@ -100,34 +103,34 @@ the more the idea of going back to the roots of *light-on-dark* becomes popular.
 
 When people get asked
 [why they like or want dark mode](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d),
-the most popular response is that *"it's easier on the eyes,"*
-followed by *"it's elegant and beautiful."*
+the most popular response is that _"it's easier on the eyes,"_
+followed by _"it's elegant and beautiful."_
 Apple in their
 [Dark Mode developer documentation](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface)
-explicitly writes: *"The choice of whether to enable a light or dark appearance
-is an aesthetic one for most users, and might not relate to ambient lighting conditions."*
+explicitly writes: _"The choice of whether to enable a light or dark appearance
+is an aesthetic one for most users, and might not relate to ambient lighting conditions."_
 
 {% Aside 'note' %}
-  👩‍🔬 Read up more on
-  [user research regarding why people want dark mode and how they use it](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d).
+Read up more on
+[user research regarding why people want dark mode and how they use it](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d).
 {% endAside %}
 
-<figure class="w-figure w-figure--inline-right">
-  <img style="height: 225px; width: auto;" src="closeview.png" alt="CloseView in Mac OS System 7 with \"White on Black\" mode" height="618" width="531">
-  <figcaption class="w-figcaption">System&nbsp;7 CloseView (<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">Source</a>)</figcaption>
+<figure data-float="right">
+  {% Img src="image/admin/WZ9I5g1YGG6S1TjygEIq.png", alt="CloseView in Mac OS System 7 with \"White on Black\" mode", width="193", height="225" %}
+  <figcaption>System&nbsp;7 CloseView (<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">Source</a>)</figcaption>
 </figure>
 
 #### Dark mode as an accessibility tool
 
-There are also people who actually *need* dark mode and use it as another accessibility tool,
+There are also people who actually _need_ dark mode and use it as another accessibility tool,
 for example, users with low vision.
 The earliest occurrence of such an accessibility tool I could find is
-[System&nbsp;7](https://en.wikipedia.org/wiki/System_7)'s *CloseView* feature, which had a toggle for
-*Black on White* and *White on Black*.
+[System&nbsp;7](https://en.wikipedia.org/wiki/System_7)'s _CloseView_ feature, which had a toggle for
+_Black on White_ and _White on Black_.
 While System&nbsp;7 supported color, the default user interface was still black-and-white.
 
 These inversion-based implementations demonstrated their weaknesses once color was introduced.
-User research by Szpiro *et al.* on
+User research by Szpiro _et al._ on
 [how people with low vision access computing devices](https://dl.acm.org/citation.cfm?id=2982168)
 showed that all interviewed users disliked inverted images,
 but that many preferred light text on a dark background.
@@ -138,9 +141,9 @@ and some apps that use dark color styles.
 
 A special form of low vision is Computer Vision Syndrome, also known as Digital Eye Strain, which is
 [defined](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1475-1313.2011.00834.x)
-as *"the combination of eye and vision problems associated with the use of computers
+as _"the combination of eye and vision problems associated with the use of computers
 (including desktop, laptop, and tablets) and other electronic displays (e.g.
-smartphones and electronic reading devices)."*
+smartphones and electronic reading devices)."_
 It has been [proposed](https://bmjopen.bmj.com/content/5/1/e006748)
 that the use of electronic devices by adolescents, particularly at night time,
 leads to an increased risk of shorter sleep duration,
@@ -160,14 +163,14 @@ as well as avoiding bright lights or irregular lights in general through dark th
 
 #### Dark mode power savings on AMOLED screens
 
-Finally, dark mode is known to save a *lot* of energy on
+Finally, dark mode is known to save a _lot_ of energy on
 <abbr title="Active-Matrix Organic Light-Emitting Diode">AMOLED</abbr> screens.
 Android case studies that focused on popular Google apps
 like YouTube have shown that the power savings can be up to 60%.
 The video below has more details on these case studies and the power savings per app.
 
-<figure class="w-figure w-figure--fullbleed">
-  {% YouTube 'N_6sPd0Jd3g?start=305' %}
+<figure data-size="full">
+  {% YouTube id='N_6sPd0Jd3g', startTime='305' %}
 </figure>
 
 ## Activating dark mode in the operating system
@@ -175,25 +178,23 @@ The video below has more details on these case studies and the power savings per
 Now that I have covered the background of why dark mode is such a big deal for many users,
 let's review how you can support it.
 
-<figure class="w-figure w-figure--inline-left">
-  <img style="height: 250px; width: auto;" src="android.png" alt="Android Q dark mode settings" height="700" width="610">
-  <figcaption class="w-figcaption">Android&nbsp;Q dark theme settings</figcaption>
+<figure data-float="left">
+  {% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Android Q dark mode settings", width="218", height="250" %}
+  <figcaption>Android&nbsp;Q dark theme settings</figcaption>
 </figure>
 
 Operating systems that support a dark mode or dark theme
 typically have an option to activate it somewhere in the settings.
-On macOS&nbsp;X, it's in the system preference's *General* section and called *Appearance* ([screenshot](macosx.png)),
-and on Windows&nbsp;10, it's in the *Colors* section and called *Choose your color* ([screenshot](windows10.png)).
-For Android&nbsp;Q, you can find it under *Display* as a *Dark Theme* toggle switch ([screenshot](android.png)),
-and on iOS&nbsp;13, you can change the *Appearance* in the *Display &amp; Brightness*
-section of the settings ([screenshot](ios.jpg)).
-
-<div class="w-clearfix"></div>
+On macOS&nbsp;X, it's in the system preference's _General_ section and called _Appearance_ (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lUAnDhiGiZxigDbCqfn1.png' | imgix }}">screenshot</a>),
+and on Windows&nbsp;10, it's in the _Colors_ section and called _Choose your color_ (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ahr8nkFttRPCe4RH8IEk.png' | imgix }}">screenshot</a>).
+For Android&nbsp;Q, you can find it under _Display_ as a _Dark Theme_ toggle switch (<a href="{{ 'image/admin/Yh6SEoWDK1SbqcGjlL6d.png' | imgix }}">screenshot</a>),
+and on iOS&nbsp;13, you can change the _Appearance_ in the _Display &amp; Brightness_
+section of the settings (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K0QTu4Elw1ETabtoJjZ1.jpg' | imgix }}">screenshot</a>).
 
 ## The `prefers-color-scheme` media query
 
 One last bit of theory before I get going.
-[Media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+[Media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries)
 allow authors to test and query values or features of the user agent or display device,
 independent of the document being rendered.
 They are used in the CSS `@media` rule to conditionally apply styles to a document,
@@ -203,11 +204,11 @@ introduces so-called user preference media features, that is,
 a way for sites to detect the user's preferred way to display content.
 
 {% Aside 'note' %}
-  ☝️ An established user preference media feature is `prefers-reduced-motion`
-  that lets you detect the desire for less motion on a page.
-  I have
-  [written about `prefers-reduced-motion`](https://developers.google.com/web/updates/2019/03/prefers-reduced-motion)
-  before.
+☝️ An established user preference media feature is `prefers-reduced-motion`
+that lets you detect the desire for less motion on a page.
+I have
+[written about `prefers-reduced-motion`](/prefers-reduced-motion/)
+before.
 {% endAside %}
 
 The [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
@@ -223,11 +224,11 @@ It works with the following values:
   (light text on dark background).
 
 {% Aside 'note' %}
-  An earlier version of the spec included a third value, `no-preference`.
-  It was meant to indicate that the user has made no preference known to the system.
-  Since no browser ever implemented it, the value was
-  [removed](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976)
-  from the spec.
+An earlier version of the spec included a third value, `no-preference`.
+It was meant to indicate that the user has made no preference known to the system.
+Since no browser ever implemented it, the value was
+[removed](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976)
+from the spec.
 {% endAside%}
 
 ## Supporting dark mode
@@ -250,16 +251,22 @@ and Safari as of version 12.1 on macOS and as of version 13 on iOS.
 For all other browsers, you can check the [Can I use support tables](https://caniuse.com/#feat=prefers-color-scheme).
 
 {% Aside 'note' %}
-  There is a custom element [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle)
-  available that adds dark mode support to older browsers.
-  I write about it [further down in this article](#the-lessdark-mode-togglegreater-custom-element).
+There is a custom element [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle)
+available that adds dark mode support to older browsers.
+I write about it [further down in this article](#the-lessdark-mode-togglegreater-custom-element).
 {% endAside%}
 
+### Learning about a user's preferences at request time
+
+The [`Sec-CH-Prefers-Color-Scheme`](/user-preference-media-features-headers/) client hint header
+allows sites to obtain the user's color scheme preferences optionally at request time,
+allowing servers to inline the right CSS and therefore avoid a flash of incorrect color theme.
+
 ### Dark mode in practice
 
 Let's finally see how supporting dark mode looks like in practice.
-Just like with the [Highlander](https://en.wikipedia.org/wiki/Highlander_(film)),
-with dark mode *there can be only one*: dark or light, but never both!
+Just like with the [Highlander](<https://en.wikipedia.org/wiki/Highlander_(film)>),
+with dark mode _there can be only one_: dark or light, but never both!
 Why do I mention this? Because this fact should have an impact on the loading strategy.
 **Please don't force users to download CSS in the critical rendering path
 that is for a mode they don't currently use.**
@@ -291,8 +298,8 @@ I hide the content of the page until `light.css` has loaded.
   if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
     document.documentElement.style.display = 'none';
     document.head.insertAdjacentHTML(
-        'beforeend',
-        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
+      'beforeend',
+      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
     );
   }
 </script>
@@ -303,20 +310,24 @@ I hide the content of the page until `light.css` has loaded.
   query is unknown and the files are downloaded with `lowest` priority (but
   above I already force `highest` priority for my default light experience).
 -->
-<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
-<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
+<link
+  rel="stylesheet"
+  href="/light.css"
+  media="(prefers-color-scheme: light)"
+/>
 <!-- The main stylesheet -->
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/style.css" />
 ```
 
 ### Stylesheet architecture
 
-I make maximum use of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/var),
+I make maximum use of [CSS variables](https://developer.mozilla.org/docs/Web/CSS/var),
 this allows my generic `style.css` to be, well, generic,
 and all the light or dark mode customization happens in the two other files `dark.css` and `light.css`.
 Below you can see an excerpt of the actual styles, but it should suffice to convey the overall idea.
 I declare two variables, `-⁠-⁠color` and `-⁠-⁠background-color`
-that essentially create a *dark-on-light* and a *light-on-dark* baseline theme.
+that essentially create a _dark-on-light_ and a _light-on-dark_ baseline theme.
 
 ```css
 /* light.css: 👉 dark-on-light */
@@ -336,7 +347,7 @@ that essentially create a *dark-on-light* and a *light-on-dark* baseline theme.
 
 In my `style.css`, I then use these variables in the `body { … }` rule.
 As they are defined on the
-[`:root` CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)—a
+[`:root` CSS pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:root)—a
 selector that in HTML represents the `<html>` element
 and is identical to the selector `html`, except that its specificity is
 higher—they cascade down, which serves me for declaring global CSS variables.
@@ -366,8 +377,8 @@ The exact details of `color-scheme` are specified in
 [CSS Color Adjustment Module Level&nbsp;1](https://drafts.csswg.org/css-color-adjust-1/).
 
 {% Aside 'note' %}
-  🌒 Read up more on
-  [what `color-scheme` actually does](/color-scheme/).
+🌒 Read up more on
+[what `color-scheme` actually does](/color-scheme/).
 {% endAside %}
 
 Everything else is then just a matter of defining CSS variables
@@ -424,23 +435,23 @@ the particular currently non-matching stylesheets are still loaded, but with the
 so that they never compete with resources that are needed by the site right now.
 
 {% Aside 'note' %}
-  😲 Read up more on
-  [why browsers download stylesheets with non-matching media queries](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513).
+😲 Read up more on
+[why browsers download stylesheets with non-matching media queries](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513).
 {% endAside %}
 
-<figure class="w-figure">
-  <img src="light.png" alt="Network loading diagram showing how in light mode the dark mode CSS gets loaded with lowest priority" height="851" width="1633">
-  <figcaption class="w-figcaption">Site in light mode loads the dark mode CSS with lowest priority.</figcaption>
+<figure>
+  {% Img src="image/admin/flTdLliru6GmqqlOKjNx.png", alt="Network loading diagram showing how in light mode the dark mode CSS gets loaded with lowest priority", width="800", height="417" %}
+  <figcaption>Site in light mode loads the dark mode CSS with lowest priority.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="dark.png" alt="Network loading diagram showing how in dark mode the light mode CSS gets loaded with lowest priority" height="851" width="1633">
-  <figcaption class="w-figcaption">Site in dark mode loads the light mode CSS with lowest priority.</figcaption>
+<figure>
+  {% Img src="image/admin/IDs6Le0VBhHu9QEDdxL6.png", alt="Network loading diagram showing how in dark mode the light mode CSS gets loaded with lowest priority", width="800", height="417" %}
+  <figcaption>Site in dark mode loads the light mode CSS with lowest priority.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="unsupported.png" alt="Network loading diagram showing how in default light mode the dark mode CSS gets loaded with lowest priority" height="851" width="1633">
-  <figcaption class="w-figcaption">Site in default light mode on a browser that doesn't support <code>prefers-color-scheme</code> loads the dark mode CSS with lowest priority.</figcaption>
+<figure>
+  {% Img src="image/admin/zJqu5k3TIgcZf1OHWWIq.png", alt="Network loading diagram showing how in default light mode the dark mode CSS gets loaded with lowest priority", width="800", height="417" %}
+  <figcaption>Site in default light mode on a browser that doesn't support <code>prefers-color-scheme</code> loads the dark mode CSS with lowest priority.</figcaption>
 </figure>
 
 ### Reacting on dark mode changes
@@ -456,11 +467,27 @@ in order to see the theme color and favicon changes, open the
 [demo in a separate tab](https://dark-mode-baseline.glitch.me/).
 
 ```js
-  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  darkModeMediaQuery.addListener((e) => {
-    const darkModeOn = e.matches;
-    console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
-  });
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+darkModeMediaQuery.addEventListener('change', (e) => {
+  const darkModeOn = e.matches;
+  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
+});
+```
+
+As of Chromium&nbsp;93 and Safari&nbsp;15, you can adjust the color based on a
+media query with the `media` attribute of the `meta` theme color element. The
+first one that matches will be picked. For example, you could have one color for
+light mode and another one for dark mode. At the time of writing, you can't
+define those in your manifest. See [w3c/manifest#975 GitHub
+issue](https://github.com/w3c/manifest/issues/975).
+
+```html
+<meta
+  name="theme-color"
+  media="(prefers-color-scheme: light)"
+  content="white"
+/>
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
 ```
 
 ## Debugging and testing dark mode
@@ -470,10 +497,10 @@ in order to see the theme color and favicon changes, open the
 Switching the entire operating system's color scheme can get annoying real quick,
 so Chrome DevTools now allows you to emulate the user's preferred color scheme
 in a way that only affects the currently visible tab.
-Open the [Command Menu](https://developers.google.com/web/tools/chrome-devtools/command-menu), start typing `Rendering`, run the `Show Rendering` command, and then change the **Emulate CSS media feature prefers-color-scheme** option.
+Open the [Command Menu](https://developer.chrome.com/docs/devtools/command-menu/), start typing `Rendering`, run the `Show Rendering` command, and then change the **Emulate CSS media feature prefers-color-scheme** option.
 
-<figure class="w-figure">
-  <img src="devtools-emulate.png" alt="A screenshot of the 'Emulate CSS media feature prefers-color-scheme' option that is located in the Rendering tab of Chrome DevTools" width="945" height="652">
+<figure>
+  {% Img src="image/admin/RIq2z6Ja1zSzfNTHic5z.png", alt="A screenshot of the 'Emulate CSS media feature prefers-color-scheme' option that is located in the Rendering tab of Chrome DevTools", width="800", height="552" %}
 </figure>
 
 ### Screenshotting `prefers-color-scheme` with Puppeteer
@@ -496,27 +523,27 @@ npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-togg
 
 A small detail you may have noticed is that I don't use pure white.
 Instead, to prevent glowing and bleeding against the surrounding dark content,
-I choose a slightly darker white. Something like `rgb(250, 250, 250)` works well.
+I choose a slightly darker white. Something like `rgb(250, 250, 250)` works well.
 
 ### Re-colorize and darken photographic images
 
 If you compare the two screenshots below, you will notice that not only the core theme has changed
-from *dark-on-light* to *light-on-dark*, but that also the hero image looks slightly different.
+from _dark-on-light_ to _light-on-dark_, but that also the hero image looks slightly different.
 My [user research](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)
 has shown that the majority of the surveyed people
 prefer slightly less vibrant and brilliant images when dark mode is active.
-I refer to this as *re-colorization*.
+I refer to this as _re-colorization_.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="./hero-dark.png" alt="Hero image slightly darkened in dark mode.">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/admin/qzzYCKNSwoJr9BBEQlR7.png", alt="Hero image slightly darkened in dark mode.", width="800", height="618" %}
+    <figcaption>
       Hero image slightly darkened in dark mode.
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="./hero-light.png" alt="Regular hero image in light mode.">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/admin/41RbLRZ5wzkoVnIRJkNl.png", alt="Regular hero image in light mode.", width="800", height="618" %}
+    <figcaption>
       Regular hero image in light mode.
     </figcaption>
   </figure>
@@ -526,12 +553,12 @@ Re-colorization can be achieved through a CSS filter on my images.
 I use a CSS selector that matches all images that don't have `.svg` in their URL,
 the idea being that I can give vector graphics (icons) a different re-colorization treatment
 than my images (photos), more about this in the [next paragraph](#vector-graphics-and-icons).
-Note how I again use a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var),
+Note how I again use a [CSS variable](https://developer.mozilla.org/docs/Web/CSS/var),
 so I can later on flexibly change my filter.
 
 {% Aside 'note' %}
-  🎨 Read up more on
-  [user research regarding re-colorization preferences with dark mode](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b).
+🎨 Read up more on
+[user research regarding re-colorization preferences with dark mode](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b).
 {% endAside %}
 
 As re-colorization is only needed in dark mode, that is, when `dark.css` is active,
@@ -541,7 +568,7 @@ there are no corresponding rules in `light.css`.
 /* dark.css */
 --image-filter: grayscale(50%);
 
-img:not([src*=".svg"]) {
+img:not([src*='.svg']) {
   filter: var(--image-filter);
 }
 ```
@@ -551,12 +578,12 @@ img:not([src*=".svg"]) {
 Not everyone is the same and people have different dark mode needs.
 By sticking to the re-colorization method described above,
 I can easily make the grayscale intensity a user preference that I can
-[change via JavaScript](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript),
+[change via JavaScript](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript),
 and by setting a value of `0%`, I can also disable re-colorization completely.
-Note that [`document.documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+Note that [`document.documentElement`](https://developer.mozilla.org/docs/Web/API/Document/documentElement)
 provides a reference to the root element of the document,
 that is, the same element I can reference with the
-[`:root` CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:root).
+[`:root` CSS pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:root).
 
 ```js
 const filter = 'grayscale(70%)';
@@ -570,24 +597,23 @@ use a different re-colorization method.
 While [research](https://dl.acm.org/citation.cfm?id=2982168) has shown
 that people don't like inversion for photos, it does work very well for most icons.
 Again I use CSS variables to determine the inversion amount
-in the regular and in the [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) state.
+in the regular and in the [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover) state.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="./icons-dark.png" alt="Icons are inverted in dark mode.">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/admin/JGYFpAPi4233HrEKTQZp.png", alt="Icons are inverted in dark mode.", width="744", height="48" %}
+    <figcaption>
       Icons are inverted in dark mode.
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="./icons-light.png" alt="Regular icons in light mode.">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/admin/W8AWbuqWthI6CfFsYunk.png", alt="Regular icons in light mode.", width="744", height="48" %}
+    <figcaption>
       Regular icons in light mode.
     </figcaption>
   </figure>
 </div>
 
-
 Note how again I only invert icons in `dark.css` but not in `light.css`, and how `:hover`
 gets a different inversion intensity in the two cases to make the icon appear
 slightly darker or slightly brighter, dependent on the mode the user has selected.
@@ -597,7 +623,7 @@ slightly darker or slightly brighter, dependent on the mode the user has selecte
 --icon-filter: invert(100%);
 --icon-filter_hover: invert(40%);
 
-img[src*=".svg"] {
+img[src*='.svg'] {
   filter: var(--icon-filter);
 }
 ```
@@ -609,25 +635,25 @@ img[src*=".svg"] {
 
 ```css
 /* style.css */
-img[src*=".svg"]:hover {
+img[src*='.svg']:hover {
   filter: var(--icon-filter_hover);
 }
 ```
 
 ### Use `currentColor` for inline SVGs
 
-For *inline* SVG images, instead of [using inversion filters](#invert-vector-graphics-and-icons),
-you can leverage the [`currentColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword)
+For _inline_ SVG images, instead of [using inversion filters](#invert-vector-graphics-and-icons),
+you can leverage the [`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentColor_keyword)
 CSS keyword that represents the value of an element's `color` property.
 This lets you use the `color` value on properties that do not receive it by default.
 Conveniently, if `currentColor` is used as the value of the SVG
-[`fill` or `stroke` attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes),
+[`fill` or `stroke` attributes](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes),
 it instead takes its value from the inherited value of the color property.
 Even better: this also works for
-[`<svg><use href="…"></svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use),
+[`<svg><use href="…"></svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/use),
 so you can have separate resources
 and `currentColor` will still be applied in context.
-Please note that this only works for *inline* or `<use href="…">` SVGs,
+Please note that this only works for _inline_ or `<use href="…">` SVGs,
 but not SVGs that are referenced as the `src` of an image or somehow via CSS.
 You can see this applied in the demo below.
 
@@ -660,14 +686,14 @@ The example below illustrates the overall idea, you can experience it live in th
 ```css
 body {
   --duration: 0.5s;
-   --timing: ease;
+  --timing: ease;
 
   color: var(--color);
   background-color: var(--background-color);
 
-  transition:
-    color var(--duration) var(--timing),
-    background-color var(--duration) var(--timing);
+  transition: color var(--duration) var(--timing), background-color var(
+        --duration
+      ) var(--timing);
 }
 ```
 
@@ -681,7 +707,7 @@ On the web, art direction deals with the overall visual appearance of a page and
 stimulates moods, contrasts features, and psychologically appeals to a target audience.
 
 With dark mode, it's up to the judgment of the designer to decide what is the best image at a particular mode
-and whether [re-colorization of images](#photographic-images) is maybe *not* good enough.
+and whether [re-colorization of images](#photographic-images) is maybe _not_ good enough.
 If used with the `<picture>` element, the `<source>` of the image to be shown can be made dependent on the `media` attribute.
 In the example below, I show the Western hemisphere for dark mode, and the Eastern hemisphere for light mode
 or when no preference is given, defaulting to the Eastern hemisphere in all other cases.
@@ -690,9 +716,9 @@ Toggle dark mode on your device to see the difference.
 
 ```html
 <picture>
-  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
-  <source srcset="eastern.webp" media="(prefers-color-scheme: light)">
-  <img src="eastern.webp">
+  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
+  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
+  <img src="eastern.webp" />
 </picture>
 ```
 
@@ -728,24 +754,24 @@ The demo below shows the element in action
 
 ```html
 <dark-mode-toggle
-    legend="Theme Switcher"
-    appearance="switch"
-    dark="Dark"
-    light="Light"
-    remember="Remember this"
+  legend="Theme Switcher"
+  appearance="switch"
+  dark="Dark"
+  light="Light"
+  remember="Remember this"
 ></dark-mode-toggle>
 ```
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img style="height: 76px;" src="./dark-mode-toggle-light.png" alt="<dark-mode-toggle> in light mode.">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/admin/Xy3uus69HnrkRPO4EuRu.png", alt="<dark-mode-toggle> in light mode.", width="140", height="76" %}
+    <figcaption>
       <code>&lt;dark-mode-toggle&gt;</code> in light mode.
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img style="height: 76px;" src="./dark-mode-toggle-dark.png" alt="<dark-mode-toggle> in light mode.">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/admin/glRVRJpQ9hMip6MbqY9N.png", alt="<dark-mode-toggle> in light mode.", width="140", height="76" %}
+    <figcaption>
       <code>&lt;dark-mode-toggle&gt;</code> in dark mode.
     </figcaption>
   </figure>
@@ -757,7 +783,7 @@ is remembered even when you reload the page.
 This allows your visitors to keep their operating system in dark mode,
 but enjoy your site in light mode or vice versa.
 
-<div class="w-screenshot" style="height: 800px; width: 100%;">
+<div style="height: 800px; width: 100%;">
   {% IFrame {
     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',
     src: 'https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html'
@@ -781,28 +807,32 @@ Thanks for reading! 🌒
 ## Related links
 
 Resources for the `prefers-color-scheme` media query:
-  - [Chrome Platform Status page](https://chromestatus.com/feature/5109758977638400)
-  - [Chromium bug](https://crbug.com/889087)
-  - [Media Queries Level&nbsp;5 spec](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
+
+- [Chrome Platform Status page](https://chromestatus.com/feature/5109758977638400)
+- [Chromium bug](https://crbug.com/889087)
+- [Media Queries Level&nbsp;5 spec](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
 
 Resources for the `color-scheme` meta tag and CSS property:
-  - [The `color-scheme` CSS property and meta tag](/color-scheme/)
-  - [Chrome Platform Status page](https://chromestatus.com/feature/5330651267989504)
-  - [Chromium bug](http://crbug.com/925935)
-  - [CSS Color Adjustment Module Level&nbsp;1 spec](https://drafts.csswg.org/css-color-adjust-1/)
-  - [CSS WG GitHub Issue for the meta tag and the CSS property](https://github.com/w3c/csswg-drafts/issues/3299)
-  - [HTML WHATWG GitHub Issue for the meta tag](https://github.com/whatwg/html/issues/4504)
+
+- [The `color-scheme` CSS property and meta tag](/color-scheme/)
+- [Chrome Platform Status page](https://chromestatus.com/feature/5330651267989504)
+- [Chromium bug](http://crbug.com/925935)
+- [CSS Color Adjustment Module Level&nbsp;1 spec](https://drafts.csswg.org/css-color-adjust-1/)
+- [CSS WG GitHub Issue for the meta tag and the CSS property](https://github.com/w3c/csswg-drafts/issues/3299)
+- [HTML WHATWG GitHub Issue for the meta tag](https://github.com/whatwg/html/issues/4504)
 
 General dark mode links:
-  - [Material Design—Dark Theme](https://material.io/design/color/dark-theme.html)
-  - [Dark Mode in Web Inspector](https://webkit.org/blog/8892/dark-mode-in-web-inspector/)
-  - [Dark Mode Support in WebKit](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
-  - [Apple Human Interface Guidelines—Dark Mode](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
+
+- [Material Design—Dark Theme](https://material.io/design/color/dark-theme.html)
+- [Dark Mode in Web Inspector](https://webkit.org/blog/8892/dark-mode-in-web-inspector/)
+- [Dark Mode Support in WebKit](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
+- [Apple Human Interface Guidelines—Dark Mode](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
 
 Background research articles for this post:
-  - [What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)
-  - [Let there be darkness! 🌚 Maybe…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)
-  - [Re-Colorization for Dark Mode](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)
+
+- [What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)
+- [Let there be darkness! 🌚 Maybe…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)
+- [Re-Colorization for Dark Mode](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)
 
 ## Acknowledgements
 
diff --git a/src/site/content/en/blog/prefers-color-scheme/ios.jpg b/src/site/content/en/blog/prefers-color-scheme/ios.jpg
deleted file mode 100644
index dc85a514144..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/ios.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/light.png b/src/site/content/en/blog/prefers-color-scheme/light.png
deleted file mode 100644
index 988bfeda602..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/light.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/macosx.png b/src/site/content/en/blog/prefers-color-scheme/macosx.png
deleted file mode 100644
index 476c17492e8..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/macosx.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/smartphone-in-bed.jpg b/src/site/content/en/blog/prefers-color-scheme/smartphone-in-bed.jpg
deleted file mode 100644
index e4f5f7c8d05..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/smartphone-in-bed.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/unsupported.png b/src/site/content/en/blog/prefers-color-scheme/unsupported.png
deleted file mode 100644
index 73252c4b46c..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/unsupported.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/windows10.png b/src/site/content/en/blog/prefers-color-scheme/windows10.png
deleted file mode 100644
index ef3445412c9..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/windows10.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/word-processing.jpg b/src/site/content/en/blog/prefers-color-scheme/word-processing.jpg
deleted file mode 100644
index 2a759ad5e68..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/word-processing.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-color-scheme/worldwideweb.png b/src/site/content/en/blog/prefers-color-scheme/worldwideweb.png
deleted file mode 100644
index cef71c47300..00000000000
Binary files a/src/site/content/en/blog/prefers-color-scheme/worldwideweb.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-reduced-motion/android-remove-animations.png b/src/site/content/en/blog/prefers-reduced-motion/android-remove-animations.png
deleted file mode 100644
index 351fbb97b20..00000000000
Binary files a/src/site/content/en/blog/prefers-reduced-motion/android-remove-animations.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-reduced-motion/hero.jpg b/src/site/content/en/blog/prefers-reduced-motion/hero.jpg
deleted file mode 100644
index 3b8f6fb77f6..00000000000
Binary files a/src/site/content/en/blog/prefers-reduced-motion/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-reduced-motion/ice-skating.jpg b/src/site/content/en/blog/prefers-reduced-motion/ice-skating.jpg
deleted file mode 100644
index 0ecc0ada34f..00000000000
Binary files a/src/site/content/en/blog/prefers-reduced-motion/ice-skating.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-reduced-motion/index.md b/src/site/content/en/blog/prefers-reduced-motion/index.md
index f201e12d34f..42e35fe864f 100644
--- a/src/site/content/en/blog/prefers-reduced-motion/index.md
+++ b/src/site/content/en/blog/prefers-reduced-motion/index.md
@@ -1,26 +1,34 @@
 ---
-title: "prefers-reduced-motion: Sometimes less movement is more"
+layout: post
+title: 'prefers-reduced-motion: Sometimes less movement is more'
 subhead: |
   The prefers-reduced-motion media query detects whether the user has requested
   the operating system to minimize the amount of animation or motion it uses.
 authors:
   - thomassteiner
-description: The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often desire animations to be kept to a minimum.
+description:
+  The prefers-reduced-motion media query detects whether the user has requested that the system
+  minimize the amount of animation or motion it uses. This is for users who either require or prefer
+  minimized animations; for example people with vestibular disorders often desire animations to be
+  kept to a minimum.
 date: 2019-03-11
-updated: 2019-12-10
+updated: 2022-09-30
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - media-queries
   - css
-hero: hero.jpg
-alt: Time-lapse of woman in a train
+hero: image/admin/LI2vYKZwQ98w3MLtUF8V.jpg
+alt: Time-lapse of woman in a train.
+feedback:
+  - api
 ---
 
-Not everyone likes decorative animations or transitions, and some users outright
-experience motion sickness when faced with parallax scrolling, zooming effects, and so on.
-Chrome 74 supports a user preference media query `prefers-reduced-motion`
-that lets you design a motion-reduced variant of your site for users who have expressed this
-preference.
+Not everyone likes decorative animations or transitions, and some users outright experience motion
+sickness when faced with parallax scrolling, zooming effects, and so on. The user preference media
+query `prefers-reduced-motion` lets you design a motion-reduced variant of your site for users who
+have expressed this preference.
+
+{% BrowserCompat 'css.at-rules.media.prefers-reduced-motion' %}
 
 ## Too much motion in real life and on the web
 
@@ -30,101 +38,91 @@ many moving targets, I fail to focus on anything, and end up lost and with a fee
 visual overload, almost like staring at an anthill 🐜.
 
 <figure>
-  <img src="ice-skating.jpg" width="580" height="320" alt="Throng of feet of ice skating people">
+  {% Img src="image/admin/JA5v1s8gSBk70eJBB8xW.jpg", alt="Throng of feet of ice skating people.", width="580", height="320" %}
   <figcaption>Visual overload in real life.</figcaption>
 </figure>
 
 Occasionally, the same can happen on the web: with flashing ads, fancy parallax effects, surprising
-reveal animations, autoplaying videos, and so on, *the web sometimes can be quite
-overwhelming*… Happily, unlike in real life, there is a solution to that. The CSS media query
+reveal animations, autoplaying videos, and so on, _the web sometimes can be quite overwhelming_…
+Happily, unlike in real life, there is a solution to that. The CSS media query
 `prefers-reduced-motion` lets developers create a variant of a page for users who, well, prefer
 reduced motion. This can comprise anything from refraining from having autoplaying videos to
 disabling certain purely decorative effects, to completely redesigning a page for certain users.
 
 Before I dive into the feature, let's take one step back and think of what animations are used for
 on the web. If you want, you can also skip the background information and
-[jump right into the technical details](#working_with_the_media_query) below.
+[jump right into the technical details](#working-with-the-media-query) below.
 
 ## Animation on the web
 
-Animation is oftentimes used to provide *feedback* to the user, for example, to let them know that
-an action was received and is being processed. For example, on a shopping website, a product
-could be animated to "fly" into a virtual shopping cart, depicted as an icon in the top-right corner
-of the site.
+Animation is oftentimes used to provide _feedback_ to the user, for example, to let them know that
+an action was received and is being processed. For example, on a shopping website, a product could
+be animated to "fly" into a virtual shopping cart, depicted as an icon in the top-right corner of
+the site.
 
 Another use case involves using motion to
 [hack user perception](https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3)
 by using a mixture of skeleton screens, contextual metadata, and low quality image previews to
-occupy a lot of the user's time and make the whole experience *feel faster*.
-The idea is to give context to the user of what's coming and meanwhile load in things as quickly as
-possible.
+occupy a lot of the user's time and make the whole experience _feel faster_. The idea is to give
+context to the user of what's coming and meanwhile load in things as quickly as possible.
 
-Finally, there are *decorative* effects like animated gradients, parallax scrolling,
-background videos, and several others.
-While many users enjoy such animations, some users dislike
-them because they feel distracted or slowed down by them. In the worst case, users may even suffer
-from motion sickness as if it were a real life experience, so for these users reducing animations is
-a *medical necessity*.
+Finally, there are _decorative_ effects like animated gradients, parallax scrolling, background
+videos, and several others. While many users enjoy such animations, some users dislike them because
+they feel distracted or slowed down by them. In the worst case, users may even suffer from motion
+sickness as if it were a real life experience, so for these users reducing animations is a _medical
+necessity_.
 
 ## Motion-triggered vestibular spectrum disorder
 
-Some users experience [distraction or nausea from animated content](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).
-For example, scrolling animations can cause vestibular disorders when elements other than the main element associated with the
-scrolling move around a lot. For example, parallax scrolling animations can cause vestibular
-disorders because background elements move at a different rate than foreground elements.
-Vestibular (inner ear) disorder reactions include dizziness, nausea, and migraine headaches, and
-sometimes require bed rest to recover.
+Some users experience
+[distraction or nausea from animated content](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).
+For example, scrolling animations can cause vestibular disorders when elements other than the main
+element associated with the scrolling move around a lot. For example, parallax scrolling animations
+can cause vestibular disorders because background elements move at a different rate than foreground
+elements. Vestibular (inner ear) disorder reactions include dizziness, nausea, and migraine
+headaches, and sometimes require bed rest to recover.
 
 ## Remove motion on operating systems
 
 Many operating systems have had accessibility settings for specifying a preference for reduced
 motion for a long time. The screenshots below show macOS Mojave's **Reduce motion** preference and
-Android Pie's **Remove animations** preference. When checked,
-these preferences cause the operating system to not use decorative effects like app launching
-animations. Applications themselves can and should honor this setting, too, and remove all
-unnecessary animations.
+Android Pie's **Remove animations** preference. When checked, these preferences cause the operating
+system to not use decorative effects like app launching animations. Applications themselves can and
+should honor this setting, too, and remove all unnecessary animations.
 
-<div class="w-columns">
+<div class="switcher">
   <figure>
-    <img src="macos-reduce-motion.png" width="398" height="300"
-         alt="A screenshot of the macOS settings screen with the 'Reduce motion' checkbox checked.">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KwuLNPefeDzUfR17EUtr.png", alt="A screenshot of the macOS settings screen with the 'Reduce motion' checkbox checked.", width="398", height="300" %}
   </figure>
   <figure>
-    <img src="android-remove-animations.png" width="287" height="300"
-         alt="A screenshot of the Android settings screen with the 'Remove animations' checkbox checked.">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qed7yE6FKVQ5YXHn0TbJ.png", alt="A screenshot of the Android settings screen with the 'Remove animations' checkbox checked.", width="287", height="300" %}
   </figure>
 </div>
 
 ## Remove motion on the web
 
-[Media Queries Level&nbsp;5](https://drafts.csswg.org/mediaqueries-5/)
-brings the reduced motion user preference to the web as well. Media queries allow authors to test and query values
-or features of the user agent or display device independent of the document being rendered.
-The media query
-[`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)
-is used to detect if the user has set an operating system preference to minimize the amount of
-animation or motion it uses. It can take two possible values:
+[Media Queries Level&nbsp;5](https://drafts.csswg.org/mediaqueries-5/) brings the reduced motion
+user preference to the web as well. Media queries allow authors to test and query values or features
+of the user agent or display device independent of the document being rendered. The media query
+[`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion) is used
+to detect if the user has set an operating system preference to minimize the amount of animation or
+motion it uses. It can take two possible values:
 
-- `no-preference`: Indicates that the user has made no preference in the underlying operating system.
-  This keyword value evaluates as `false` in the boolean context.
+- `no-preference`: Indicates that the user has made no preference in the underlying operating
+  system. This keyword value evaluates as `false` in the boolean context.
 - `reduce`: Indicates that the user has set an operating system preference indicating that
   interfaces should minimize movement or animation, preferably to the point where all non-essential
   movement is removed.
 
-## Working with the media query
-
-{% Aside %}
-  See [Can I use prefers-reduced-motion media query?](https://caniuse.com/#feat=prefers-reduced-motion)
-  to find out which browsers support `prefers-reduced-motion`.
-{% endAside %}
+## Working with the media query from CSS and JavaScript contexts
 
 As with all media queries, `prefers-reduced-motion` can be checked from a CSS context and from a
 JavaScript context.
 
-To illustrate both, let's say I have an important sign-up button that I want the user to click.
-I could define an attention-catching "vibrate" animation, but as a good web citizen I will only play it for
-those users who are explicitly OK with animations, but not everyone else, which can be users who
-have opted out of animations, or users on browsers that don't understand the media query.
+To illustrate both, let's say I have an important sign-up button that I want the user to click. I
+could define an attention-catching "vibrate" animation, but as a good web citizen I will only play
+it for those users who are explicitly OK with animations, but not everyone else, which can be users
+who have opted out of animations, or users on browsers that don't understand the media query.
 
 ```css
 /*
@@ -149,23 +147,18 @@ have opted out of animations, or users on browsers that don't understand the med
 }
 ```
 
-{% Aside %}
-If you have a lot of animation-related CSS, you can spare your opted-out users from
+{% Aside %} If you have a lot of animation-related CSS, you can spare your opted-out users from
 downloading it by outsourcing all animation-related CSS into a separate stylesheet that you only
 load conditionally via the `media` attribute on the `link` element&nbsp;😎:
-
-```html
-<link rel="stylesheet" href="animations.css"
-      media="(prefers-reduced-motion: no-preference)">
-```
+`<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">`
 {% endAside %}
 
 To illustrate how to work with `prefers-reduced-motion` with JavaScript, let's imagine I have
 defined a complex animation with the
-[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). While
-CSS rules will be dynamically triggered by the browser when the user preference changes, for
-JavaScript animations I have to listen for changes myself, and then manually stop my potentially
-in-flight animations (or restart them if the user lets me):
+[Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API). While CSS rules
+will be dynamically triggered by the browser when the user preference changes, for JavaScript
+animations I have to listen for changes myself, and then manually stop my potentially in-flight
+animations (or restart them if the user lets me):
 
 ```js
 const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -178,34 +171,74 @@ mediaQuery.addEventListener('change', () => {
 Note that the parentheses around the actual media query are obligatory:
 
 {% Compare 'worse' %}
+
 ```js
-window.matchMedia('prefers-reduced-motion: reduce')
+window.matchMedia('prefers-reduced-motion: reduce');
 ```
+
 {% endCompare %}
 
 {% Compare 'better' %}
+
 ```js
-window.matchMedia('(prefers-reduced-motion: reduce)')
+window.matchMedia('(prefers-reduced-motion: reduce)');
 ```
+
 {% endCompare %}
 
+## Working with the media query from `<picture>` contexts
+
+An interesting use case is to make playing of an animated AVIF, WebP, or GIF dependent on the
+`media` attribute. If `(prefers-reduced-motion: no-preference)` evaluates to `true`, it's safe to
+display the animated version, else the static version:
+
+```html
+<picture>
+  <!-- Animated versions. -->
+  <source
+    srcset="nyancat.avifs"
+    type="image/avif"
+    media="(prefers-reduced-motion: no-preference)"
+  />
+  <source
+    srcset="nyancat.gif"
+    type="image/gif"
+    media="(prefers-reduced-motion: no-preference)"
+  />
+  <!-- Static versions. -->
+  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
+</picture>
+```
+
+You can see the example below. Try toggling your device's motion preferences to see the difference.
+
+<picture>
+  <source srcset="https://storage.googleapis.com/web-dev-uploads/file/8WbTDNrhLsU0El80frMBGE4eMCD3/ZhnJj0x2s7oQ10vydXDy.avifs" type="image/avif" media="(prefers-reduced-motion: no-preference)">
+  <source srcset="https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/5K63Q5tcQ3vLWAJWQfCp.gif" type="image/gif" media="(prefers-reduced-motion: no-preference)">
+  <img src="https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/ipZALS4nnkUlleymYJXe.png" alt="Nyan cat" width="250" height="250">
+</picture>
+
+## Discover the user's preferences at request time
+
+The [`Sec-CH-Prefers-Reduced-Motion`](/user-preference-media-features-headers/) client hint header
+allows sites to obtain the user's motion preferences optionally at request time,
+allowing servers to inline the right CSS for performance reasons.
+
 ## Demo
 
 I have created a little demo based on Rogério Vicente's amazing
 [🐈 HTTP status cats](https://http.cat/). First, take a moment to appreciate the joke, it's
 hilarious and I'll wait. Now that you're back, let me introduce the
 [demo](https://prefers-reduced-motion.glitch.me). When you scroll down, each HTTP status cat
-alternatingly appears from either the right or the left side. It's a buttery smooth 60 FPS animation,
-but as outlined above, some users may dislike it or even get motion sick by it, so the demo is
-programmed to respect `prefers-reduced-motion`. This even works dynamically, so users can change
-their preference on-the-fly, no reload required. If a user prefers reduced motion, the non-necessary
-reveal animations are gone, and just the regular scrolling motion is left. The screencast below
-shows the demo in action:
+alternatingly appears from either the right or the left side. It's a buttery smooth 60 FPS
+animation, but as outlined above, some users may dislike it or even get motion sick by it, so the
+demo is programmed to respect `prefers-reduced-motion`. This even works dynamically, so users can
+change their preference on-the-fly, no reload required. If a user prefers reduced motion, the
+non-necessary reveal animations are gone, and just the regular scrolling motion is left. The
+screencast below shows the demo in action:
 
 <figure>
-  <video muted playsinline controls poster="prefers-reduced-motion.png">
-    <source src="https://storage.googleapis.com/web-dev-assets/prefers-reduced-motion/prefers-reduced-motion.mp4" type="video/mp4">
-  </video>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/zWs45QPPI9C8CjF813Zx.mp4", muted=true, playsinline=true, controls=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CQAw3Ee43Dcv0JOsm9fl.png" %}
   <figcaption>Video of the
     <a href="https://prefers-reduced-motion.glitch.me"><code>prefers-reduced-motion</code> demo</a>
     app
@@ -214,38 +247,35 @@ shows the demo in action:
 
 ## Conclusions
 
-Respecting user preferences is key for modern websites, and browsers are exposing more and more features
-to enable web developers to do so.
-Another launched example is
-[`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme),
-which detects if the user prefers a light or dark color scheme.
-You can read everything about `prefers-color-scheme` in my article
-[Hello Darkness, My Old Friend](/prefers-color-scheme) 🌒.
+Respecting user preferences is key for modern websites, and browsers are exposing more and more
+features to enable web developers to do so. Another launched example is
+[`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme), which
+detects if the user prefers a light or dark color scheme. You can read everything about
+`prefers-color-scheme` in my article [Hello Darkness, My Old Friend](/prefers-color-scheme) 🌒.
 
 The CSS Working Group is currently standardizing more
-[user preference media queries](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences)
-like
+[user preference media queries](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) like
 [`prefers-reduced-transparency`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency)
 (detects if the user prefers reduced transparency),
-[`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)
-(detects if the user has requested the system to increase or decrease the amount of
-contrast between adjacent colors), and
-[`inverted-colors`](https://drafts.csswg.org/mediaqueries-5/#inverted)
-(detects if the user prefers inverted colors).
-👀 Watch this space, we will definitely let you know once they launch in Chrome!
+[`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast) (detects if the user
+has requested the system to increase or decrease the amount of contrast between adjacent colors),
+and [`inverted-colors`](https://drafts.csswg.org/mediaqueries-5/#inverted) (detects if the user
+prefers inverted colors).
 
 ## (Bonus) Forcing reduced motion on all websites
 
 Not every site will use `prefers-reduced-motion`, or maybe not significantly enough for your taste.
 If you, for whatever reason, want to stop motion on all websites, you actually can. One way to make
-this happen is to inject a stylesheet with the following CSS into every web page you visit.
-There are several
+this happen is to inject a stylesheet with the following CSS into every web page you visit. There
+are several
 [browser extensions](https://chrome.google.com/webstore/search/user%20stylesheets?_category=extensions)
 out there (use at your own risk!) that allow for this.
 
 ```css
 @media (prefers-reduced-motion: reduce) {
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     animation-delay: -1ms !important;
     animation-duration: 1ms !important;
     animation-iteration-count: 1 !important;
@@ -260,18 +290,22 @@ out there (use at your own risk!) that allow for this.
 The way this works is that the CSS above overrides the durations of all animations and transitions
 to such a short time that they are not noticeable anymore. As some websites depend on an animation
 to be run in order to work correctly (maybe because a certain step depends on the firing of the
-[`animationend` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event)),
+[`animationend` event](https://developer.mozilla.org/docs/Web/API/HTMLElement/animationend_event)),
 the more radical `animation: none !important;` approach wouldn't work. Even the above hack is not
 guaranteed to succeed on all websites (for example, it can't stop motion that was initiated via the
-[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)),
-so be sure to deactivate it when you notice breakage.
+[Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API)), so be sure to
+deactivate it when you notice breakage.
 
 ## Related Links
 
-- Latest Editor's Draft of the [Media Queries Level&nbsp;5](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion) spec.
-- `prefers-reduced-motion` on [Chrome Platform Status](https://www.chromestatus.com/feature/5597964353404928).
+- Latest Editor's Draft of the
+  [Media Queries Level&nbsp;5](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)
+  spec.
+- `prefers-reduced-motion` on
+  [Chrome Platform Status](https://www.chromestatus.com/feature/5597964353404928).
 - `prefers-reduced-motion` [Chromium bug](http://crbug.com/722548).
-- Blink [Intent to Implement posting](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NZ3c9d4ivA8/BIHFbOj6DAAJ).
+- Blink
+  [Intent to Implement posting](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NZ3c9d4ivA8/BIHFbOj6DAAJ).
 
 ## Acknowledgements
 
diff --git a/src/site/content/en/blog/prefers-reduced-motion/macos-reduce-motion.png b/src/site/content/en/blog/prefers-reduced-motion/macos-reduce-motion.png
deleted file mode 100644
index afbfca1c564..00000000000
Binary files a/src/site/content/en/blog/prefers-reduced-motion/macos-reduce-motion.png and /dev/null differ
diff --git a/src/site/content/en/blog/prefers-reduced-motion/prefers-reduced-motion.png b/src/site/content/en/blog/prefers-reduced-motion/prefers-reduced-motion.png
deleted file mode 100644
index 76a4bb5806b..00000000000
Binary files a/src/site/content/en/blog/prefers-reduced-motion/prefers-reduced-motion.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-optional-fonts/hero.jpg b/src/site/content/en/blog/preload-optional-fonts/hero.jpg
deleted file mode 100644
index defae42d8fa..00000000000
Binary files a/src/site/content/en/blog/preload-optional-fonts/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/preload-optional-fonts/index.md b/src/site/content/en/blog/preload-optional-fonts/index.md
index 58f8fe8134e..e4a38516ba4 100644
--- a/src/site/content/en/blog/preload-optional-fonts/index.md
+++ b/src/site/content/en/blog/preload-optional-fonts/index.md
@@ -1,10 +1,10 @@
 ---
-title: 'Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts'
+title: 'Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts'
 subhead: 'Starting in Chrome 83, link rel="preload" and font-display: optional can be combined to remove layout jank completely'
 authors:
   - houssein
 date: 2020-03-18
-hero: hero.jpg
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
 alt: A large letter A from a type set sitting on a white table.
 description: |
   By optimizing rendering cycles, Chrome 83 eliminates layout shifting when
@@ -14,6 +14,8 @@ tags:
   - blog
   - performance
   - fonts
+feedback:
+  - api
 ---
 
 {% Aside %}
@@ -47,7 +49,7 @@ for asynchronously loaded fonts. However, every one of these supported values ca
 in one of the two ways listed above, until now!
 
 {% Aside %}
-  The [Cumulative Layout Shift](https://web.dev/cls/) metric makes it possible to measure the layout
+  The [Cumulative Layout Shift](/cls/) metric makes it possible to measure the layout
   instability on a web page.
 {% endAside %}
 
@@ -66,17 +68,17 @@ period. This means that "invisible" text is displayed very briefly before switch
 font. If the font is not downloaded within 100ms, then the fallback font is used and no swapping
 occurs.
 
-<figure class="w-figure">
-  <img src="./previous-behavior-fail.png" alt="Diagram showing previous optional font behavior when font fails to load">
-  <figcaption class="w-figcaption">Previous <code>font-display: optional</code> behavior in Chrome when font is downloaded <b>after</b> the 100ms block period</figcaption>
+<figure>
+  {% Img src="image/admin/WHLORYEu864QRRveFQUz.png", alt="Diagram showing previous optional font behavior when font fails to load", width="800", height="340" %}
+  <figcaption>Previous <code>font-display: optional</code> behavior in Chrome when font is downloaded <b>after</b> the 100ms block period</figcaption>
 </figure>
 
 However, in the case that the font is downloaded before the 100ms block period completes, the custom
 font is rendered and used on the page.
 
-<figure class="w-figure">
-  <img src="./previous-behavior-pass.png" alt="Diagram showing previous optional font behavior when font loads in time">
-  <figcaption class="w-figcaption">Previous <code>font-display: optional</code> behavior in Chrome when font is downloaded <b>before</b> the 100ms block period</figcaption>
+<figure>
+  {% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="Diagram showing previous optional font behavior when font loads in time", width="800", height="318" %}
+  <figcaption>Previous <code>font-display: optional</code> behavior in Chrome when font is downloaded <b>before</b> the 100ms block period</figcaption>
 </figure>
 
 Chrome re-renders the page **twice** in both instances, regardless of whether the fallback font
@@ -85,20 +87,20 @@ text and, in cases when a new font is rendered, layout jank that moves some of t
 This occurs even if the font is stored in the browser's disk cache and can load well before the
 block period is complete.
 
-Optimizations have landed in Chrome 83 to entirely remove the first render cycle for optional fonts
-that are preloaded with [`<link rel="preload'>`](https://web.dev/codelab-preload-web-fonts/).
+[Optimizations](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632) have landed in Chrome 83 to entirely remove the first render cycle for optional fonts
+that are preloaded with [`<link rel="preload'>`](/codelab-preload-web-fonts/).
 Instead, rendering is blocked until the custom font has finished loading or a certain period of time
 has passed. This timeout period is currently set at 100ms, but may possibly change in the near
 future to optimize performance.
 
-<figure class="w-figure">
-  <img src="./new-behavior-fail.png" alt="Diagram showing new preloaded optional font behavior when font fails to load">
-  <figcaption class="w-figcaption">New <code>font-display: optional</code> behavior in Chrome when fonts are preloaded and font is downloaded <b>after</b> the 100ms block period (no flash of invisible text)</figcaption>
+<figure>
+  {% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="Diagram showing new preloaded optional font behavior when font fails to load", width="800", height="353" %}
+  <figcaption>New <code>font-display: optional</code> behavior in Chrome when fonts are preloaded and font is downloaded <b>after</b> the 100ms block period (no flash of invisible text)</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="./new-behavior-pass.png" alt="Diagram showing new preloaded optional font behavior when font loads in time">
-  <figcaption class="w-figcaption">New <code>font-display: optional</code> behavior in Chrome when fonts are preloaded and font is downloaded <b>before</b> the 100ms block period (no flash of invisible text)</figcaption>
+<figure>
+  {% Img src="image/admin/OEHClGFMFspaWjb3xXLY.png", alt="Diagram showing new preloaded optional font behavior when font loads in time", width="800", height="346" %}
+  <figcaption>New <code>font-display: optional</code> behavior in Chrome when fonts are preloaded and font is downloaded <b>before</b> the 100ms block period (no flash of invisible text)</figcaption>
 </figure>
 
 Preloading optional fonts in Chrome removes the possibility of layout jank and flash of unstyled
diff --git a/src/site/content/en/blog/preload-optional-fonts/new-behavior-fail.png b/src/site/content/en/blog/preload-optional-fonts/new-behavior-fail.png
deleted file mode 100644
index 13f6709a613..00000000000
Binary files a/src/site/content/en/blog/preload-optional-fonts/new-behavior-fail.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-optional-fonts/new-behavior-pass.png b/src/site/content/en/blog/preload-optional-fonts/new-behavior-pass.png
deleted file mode 100644
index d3ea0e14231..00000000000
Binary files a/src/site/content/en/blog/preload-optional-fonts/new-behavior-pass.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-optional-fonts/previous-behavior-fail.png b/src/site/content/en/blog/preload-optional-fonts/previous-behavior-fail.png
deleted file mode 100644
index d44158e91bf..00000000000
Binary files a/src/site/content/en/blog/preload-optional-fonts/previous-behavior-fail.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-optional-fonts/previous-behavior-pass.png b/src/site/content/en/blog/preload-optional-fonts/previous-behavior-pass.png
deleted file mode 100644
index 12b9c390ef6..00000000000
Binary files a/src/site/content/en/blog/preload-optional-fonts/previous-behavior-pass.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/example-1-after.png b/src/site/content/en/blog/preload-responsive-images/example-1-after.png
deleted file mode 100755
index 37f4bfd7efe..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/example-1-after.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/example-1-before.png b/src/site/content/en/blog/preload-responsive-images/example-1-before.png
deleted file mode 100755
index 1db026878d6..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/example-1-before.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/example-2-after.png b/src/site/content/en/blog/preload-responsive-images/example-2-after.png
deleted file mode 100755
index 6e2063581aa..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/example-2-after.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/example-2-before.png b/src/site/content/en/blog/preload-responsive-images/example-2-before.png
deleted file mode 100755
index 0021ffe63b8..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/example-2-before.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/example-3.png b/src/site/content/en/blog/preload-responsive-images/example-3.png
deleted file mode 100755
index 3ec22dbf0a6..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/example-3.png and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/hero.jpg b/src/site/content/en/blog/preload-responsive-images/hero.jpg
deleted file mode 100644
index c4b6d4583bf..00000000000
Binary files a/src/site/content/en/blog/preload-responsive-images/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/preload-responsive-images/index.md b/src/site/content/en/blog/preload-responsive-images/index.md
index f0e0683f1d3..a506ddab9aa 100755
--- a/src/site/content/en/blog/preload-responsive-images/index.md
+++ b/src/site/content/en/blog/preload-responsive-images/index.md
@@ -4,17 +4,23 @@ title: Preloading responsive images
 subhead: Starting in Chrome 73, link rel="preload" and responsive images can be combined in order to load images faster.
 authors:
   - yoavweiss
+  - tunetheweb
 description: |
   Learn about new and exciting possibilities for preloading responsive images to ensure great user experience.
-hero: hero.jpg
+hero: image/admin/QDCTiiyXE11bYSZMP3Yt.jpg
 alt: A wall with a bunch of image frames in different sizes.
 date: 2019-09-30
+updated: 2023-03-08
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - performance
   - images
+feedback:
+  - api
 ---
 
+{% BrowserCompat 'api.HTMLLinkElement.imageSrcset' %}
+
 This article gives me an opportunity to discuss two of my favorite things: responsive images *and* preload. As someone who was heavily involved in developing both of those features, I'm super excited to see them working together!
 
 ## Responsive images overview
@@ -37,11 +43,11 @@ Suppose you're browsing the web on a screen that's 300 pixels wide, and the page
 
 Responsive images and preload have been available for the last few years, but at the same time something was missing: there was no way to preload responsive images. [Starting in Chrome 73](https://developers.google.com/web/updates/2019/03/nic73#more), the browser can preload the right variant of responsive images specified in `srcset` before it discovers the `img` tag!
 
-Depending on your site's structure, that could mean significantly faster image display! We ran tests on a site that uses Javascript to lazy-load responsive images. Preloading resulted in images loading 1.2 seconds faster.
+Depending on your site's structure, that could mean significantly faster image display! We ran tests on a site that uses JavaScript to lazy-load responsive images. Preloading resulted in images loading 1.2 seconds faster.
 
 {% Aside %}
 
-Responsive images are [supported in all modern browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility) while preloading them is [supported only in Chromium-based browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Browser_compatibility).
+Responsive images are [supported in all modern browsers](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility) while preloading them is [supported only in Chromium-based browsers](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility).
 
 {% endAside %}
 
@@ -81,17 +87,17 @@ You can inspect this issue on a website with a dynamically-loaded image gallery:
 
 1. Reload the page.
 
-<figure class="w-figure">
-<img src="./example-1-before.png" alt="Screenshot of Chrome DevTools Network panel.">
-<figcaption class="w-figcaption">This waterfall shows that the images only start loading after the browser has finished running the script, introducing unnecessary delay to the time the image is initially displayed to the user.</figcaption>
+<figure>
+{% Img src="image/admin/cyocwRmB3XlfY26vUZ5h.png", alt="Screenshot of Chrome DevTools Network panel.", width="800", height="481" %}
+<figcaption>This waterfall shows that the images only start loading after the browser has finished running the script, introducing unnecessary delay to the time the image is initially displayed to the user.</figcaption>
 </figure>
 
 Using `preload` helps here because the image starts loading ahead of time and is likely to already be there when the browser needs to display it.
 
 
-<figure class="w-figure">
-<img src="./example-1-after.png" alt="Screenshot of Chrome DevTools Network panel.">
-<figcaption class="w-figcaption">This waterfall shows that the first image started loading at the same time as the script, avoiding unnecessary delays and resulting in faster displaying images.</figcaption>
+<figure>
+{% Img src="image/admin/rIRdFypLWf1ljMaXCVCs.png", alt="Screenshot of Chrome DevTools Network panel.", width="800", height="481" %}
+<figcaption>This waterfall shows that the first image started loading at the same time as the script, avoiding unnecessary delays and resulting in faster displaying images.</figcaption>
 </figure>
 
 To see the difference that preloading makes, you can inspect the same dynamically-loaded image gallery but [with preloaded first image](https://responsive-preload.glitch.me/preload.html) by following the steps from the first example.
@@ -102,7 +108,7 @@ An alternative way to avoid the problem would be to use a markup-based carousel
 
 ### Preloading background images using image-set
 
-If you have different background images for different screen densities, you can specify them in your CSS with the `image-set` syntax. The browser can then choose which one to display based on the screen's [DPR](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).
+If you have different background images for different screen densities, you can specify them in your CSS with the `image-set` syntax. The browser can then choose which one to display based on the screen's [DPR](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio).
 
 ```css
 background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
@@ -110,7 +116,7 @@ background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
 
 {% Aside %}
 
-The above syntax ignores the fact that vendor prefixes are needed for this feature in both Chromium and WebKit based browsers. If you're planning to use this feature, you should consider using [Autoprefixer](https://github.com/postcss/autoprefixer) to address that automatically.
+The above syntax ignores the fact that vendor prefixes are needed for this feature in both Chromium and WebKit based browsers. If you're planning to use this feature, you should consider using [Autoprefixer](https://github.com/postcss/autoprefixer) ([available as an online tool](https://goonlinetools.com/autoprefixer/)) to address that automatically.
 
 {% endAside %}
 
@@ -118,22 +124,24 @@ The problem with CSS background images is that they are discovered by the browse
 
 You can inspect this issue on an example website with [responsive background image](https://responsive-preload.glitch.me/background_no_preload.html).
 
-<figure class="w-figure">
-<img src="./example-2-before.png" alt="Screenshot of Chrome DevTools Network panel.">
-<figcaption class="w-figcaption">In this example, the image download doesn't start until the CSS is fully downloaded, resulting in unnecessary lag to the image's display.</figcaption>
+<figure>
+{% Img src="image/admin/7sjFt1RsoEOKn5zlS5zb.png", alt="Screenshot of Chrome DevTools Network panel.", width="800", height="451" %}
+<figcaption>In this example, the image download doesn't start until the CSS is fully downloaded, resulting in unnecessary lag to the image's display.</figcaption>
 </figure>
 
 Responsive image preloading provides a simple and hack-free way to load those images faster.
 
 ```html
-<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
+<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
 ```
 
+Note that by excluding the `href` attribute, you can ensure the browsers that do not support `imagesrcset` on the `<link>` element, but do support `image-set` in CSS, will not download an incorrect source. However, they will also not benefit from the preload in this case.
+
 You can inspect how the previous example behaves with [preloaded responsive background image](https://responsive-preload.glitch.me/background_preload.html).
 
-<figure class="w-figure">
-<img src="./example-2-after.png" alt="Screenshot of Chrome DevTools Network panel.">
-<figcaption class="w-figcaption">Here the image and CSS start downloading at the same time, avoiding delays and resulting in a faster loading image.</figcaption>
+<figure>
+{% Img src="image/admin/dOI6EmChfahBujnZOke7.png", alt="Screenshot of Chrome DevTools Network panel.", width="800", height="439" %}
+<figcaption>Here the image and CSS start downloading at the same time, avoiding delays and resulting in a faster loading image.</figcaption>
 </figure>
 
 ## Preloading responsive images in action
@@ -142,17 +150,17 @@ Preloading your responsive images can speed them up in theory, but what does it
 
 To answer that I created two copies of a [demo PWA shop](https://github.com/GoogleChromeLabs/sample-pie-shop): [one that does not preload images](https://20190710t144416-dot-pie-shop-app.appspot.com/apparel), and [one that preloads some of them](https://20190710t132936-dot-pie-shop-app.appspot.com/apparel). Since the site lazy loads images using JavaScript, it's likely to benefit from preloading the ones that will be in the initial viewport.
 
-That gave me the following results for [no preload](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/) and for [image preload](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/). Looking at the raw numbers we see that [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) stayed the same, [Speed Index](/speed-index/) slightly improved (273 ms, as images arrive faster, but don't take up a huge chunk of the pixel area), but the real metric which captures the difference is the [Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md) metric, which improved by 1.2 seconds. 🎉🎉
+That gave me the following results for [no preload](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/) and for [image preload](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/). Looking at the raw numbers we see that [Start Render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render) stayed the same, [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) slightly improved (273 ms, as images arrive faster, but don't take up a huge chunk of the pixel area), but the real metric which captures the difference is the [Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md) metric, which improved by 1.2 seconds. 🎉🎉
 
 Of course, nothing captures the visual difference quite like a filmstrip comparison:
-<figure class="w-figure">
-<img src="./example-3.png" alt="Screenshot of WebPageTest filmstrip comparison showing preloaded images are displayed about 1.5 seconds faster.">
-<figcaption class="w-figcaption">The filmstrip shows that images arrive significantly faster when preloaded, resulting in a hugely-improved user experience.</figcaption>
+<figure>
+{% Img src="image/admin/sXyZOvsNoAY0K2NRqT4U.png", alt="Screenshot of WebPageTest filmstrip comparison showing preloaded images are displayed about 1.5 seconds faster.", width="800", height="328" %}
+<figcaption>The filmstrip shows that images arrive significantly faster when preloaded, resulting in a hugely-improved user experience.</figcaption>
 </figure>
 
 ## Preload and `<picture>`?
 
-If you're familiar with responsive images, you may be wondering "What about [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)?".
+If you're familiar with responsive images, you may be wondering "What about [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture)?".
 
 The Web Performance Working Group is talking about adding a preload equivalent for `srcset` and `sizes`, but not the `<picture>` element, which tackles the ["art direction"](/codelab-art-direction/) use-case.
 
@@ -168,9 +176,9 @@ Given the following scenario:
 
 ```html
 <picture>
-    <source src="small_cat.jpg" media="(max-width: 400px)">
-    <source src="medium_cat.jpg" media="(max-width: 800px)">
-    <img src="huge_cat.jpg">
+    <source srcset="small_cat.jpg" media="(max-width: 400px)">
+    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
+    <img src="large_cat.jpg">
 </picture>
 ```
 
@@ -184,6 +192,18 @@ Because responsive preload has no notion of "order" or "first match", the breakp
 <link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
 ```
 
+### Preload and `type`
+
+The `<picture>` element also supports matching on the first `type`, to allow different image formats to be provided and the browser to pick the first image format it supports. This use case is not currently supported with preload.
+
+For sites using this, avoiding preload is the best option, and instead having the [preload scanner](/preload-scanner/) pick these up from the `<picture>` and `<source>` elements instead. This is a best practice anyway, particular with the support of [Priority Hints](/priority-hints/) which allows the appropriate image to be prioritised in a better manner than preload alone.
+
+## Effects on Largest Contentful Paint (LCP)
+
+Since images can be [candidates for Largest Contentful Paint (LCP)](/lcp/#what-elements-are-considered), preloading them may improve your website's LCP. Using the techniques above, you can also ensure that your responsive images will load more quickly.
+
+Regardless of whether the image you're preloading is responsive, be aware that preloads work especially well when the image resource isn't discoverable in the initial markup payload. For websites that send complete markup from the server, you may not realize a huge benefit. However, if your website renders markup on the client&mdash;which sidesteps the browser's [preload scanner](/preload-scanner/)&mdash;there's an opportunity on the table to preload potential LCP images to improve performance.
+
 ## Summary
 
 Responsive image preload gives us new and exciting possibilities to preload responsive images in ways that were previously only possible using hacks. It's an important new addition to the speed-conscious developer's toolbox and enables us to make sure the important images we want to get in front of our users as soon as possible will be there when we need them.
diff --git a/src/site/content/en/blog/preload-scanner/index.md b/src/site/content/en/blog/preload-scanner/index.md
new file mode 100644
index 00000000000..eaa3ed6ad0c
--- /dev/null
+++ b/src/site/content/en/blog/preload-scanner/index.md
@@ -0,0 +1,322 @@
+---
+title: Don't fight the browser preload scanner
+subhead: |
+  Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.
+authors:
+  - jlwagner
+date: 2022-05-13
+updated: 2022-10-12
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZYfhboCPqPWawQ5LzWKO.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/irM6kTXZoP0MmXGtHOSa.jpg
+alt: A close-up photograph of a screen with various bits of HTML markup shown in a text editor.
+description: |
+  Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+One overlooked aspect of optimizing page speed involves knowing a bit about browser internals. Browsers make certain optimizations to improve performance in ways that we as developers can't&mdash;but only so long as those optimizations aren't unintentionally thwarted.
+
+One internal browser optimization to understand is the browser preload scanner. This post will cover how the preload scanner works&mdash;and more importantly, how you can avoid getting in its way.
+
+## What's a preload scanner?
+
+Every browser has a primary HTML parser that [tokenizes](https://en.wikipedia.org/wiki/Lexical_analysis#Tokenization) raw markup and processes it into [an object model](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). This all merrily goes on until the parser pauses when it finds a [blocking resource](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/), such as a stylesheet loaded with a `<link>` element, or script loaded with a `<script>` element without an `async` or `defer` attribute.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mXRoJneD6CbMAqaTqNZW.svg", alt="HTML parser diagram.", width="333", height="450" %}
+  <figcaption>
+    <strong>Fig. 1:</strong> A diagram of how the browser's primary HTML parser can be blocked. In this case, the parser runs into a <code>&lt;link&gt;</code> element for an external CSS file, which blocks the browser from parsing the rest of the document&mdash;or even rendering any of it&mdash;until the CSS is downloaded and parsed.
+  </figcaption>
+</figure>
+
+In the case of CSS files, both parsing and rendering are blocked in order to prevent a [flash of unstyled content (FOUC)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content), which is when an unstyled version of a page can be seen briefly before styles are applied to it.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8LkMd46pUlwgfYvmTBrO.png", alt="The web.dev home page in an unstyled state (left) and the styled state (right).", width="800", height="748", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 2:</strong> A simulated example of FOUC. At left is the front page of web.dev without styles. At right is the same page with styles applied. The unstyled state can occur in a flash if the browser doesn't block rendering while a stylesheet is being downloaded and processed.
+  </figcaption>
+</figure>
+
+The browser also blocks parsing and rendering of the page when it encounters `<script>` elements without a `defer` or `async` attribute.
+
+{% Aside %}
+  Scripts loaded from `<script>` elements with a [`type=module` attribute](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html) are deferred by default.
+{% endAside %}
+
+The reason for this is that the browser can't know for sure if any given script will modify the DOM while the primary HTML parser is still doing its job. This is why it's been a common practice to load your JavaScript at the end of the document so that the effects of blocked parsing and rendering become marginal.
+
+These are good reasons for why the browser _should_ block both parsing and rendering. Yet, blocking either of these important steps is undesirable, as they can hold up the show by delaying the discovery of other important resources. Thankfully, browsers do their best to mitigate these problems by way of a secondary HTML parser called a _preload scanner_.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6lccoVh4f6IJXA8UBKxH.svg", alt="A diagram of both the primary HTML parser (left) and the preload scanner (right), which is the secondary HTML parser.", width="657", height="450", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 3:</strong> A diagram depicting how the preload scanner works in parallel with the primary HTML parser to speculatively load assets. Here, the primary HTML parser is blocked as it loads and processes CSS before it can begin processing image markup in the <code>&lt;body&gt;</code> element, but the preload scanner can look ahead in the raw markup to find that image resource and begin loading it before the primary HTML parser is unblocked.
+  </figcaption>
+</figure>
+
+[A preload scanner's role is speculative](https://html.spec.whatwg.org/multipage/parsing.html#speculative-html-parsing), meaning that it examines raw markup in order to find resources to opportunistically fetch before the primary HTML parser would otherwise discover them.
+
+## How to tell when the preload scanner is working
+
+The preload scanner exists _because_ of blocked rendering and parsing. If these two performance issues never existed, the preload scanner wouldn't be very useful. The key to figuring out whether a web page benefits from the preload scanner depends on these blocking phenomena. To do that, you can introduce an artificial delay for requests to find out where the preload scanner is working.
+
+Take [this page](https://preload-scanner-fights.glitch.me/artifically-delayed-requests.html) of basic text and images with a stylesheet as an example. Because CSS files block both rendering and parsing, you introduce an artificial delay of two seconds for the stylesheet through a proxy service. This delay makes it easier to see in the network waterfall where the preload scanner is working.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Gtw08XaoFETKEauBBbBl.png", alt="The WebPageTest network waterfall chart illustrates an artificial delay of 2 seconds imposed on the styleesheet.", width="800", height="219", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 4:</strong> A <a href="https://www.webpagetest.org/" rel="nofollow noopener">WebPageTest</a> <a href="https://developer.chrome.com/docs/devtools/network/reference/#waterfall" rel="noopener">network waterfall chart</a> of <a href="https://preload-scanner-fights.glitch.me/artifically-delayed-requests.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. Even though the stylesheet is artificially delayed through a proxy by two seconds before it begins to load, the image located later in the markup payload is discovered by the preload scanner.
+  </figcaption>
+</figure>
+
+As you can see in the waterfall, the preload scanner discovers the `<img>` element _even while rendering and document parsing is blocked_. Without this optimization, the browser can't fetch things opportunistically during the blocking period, and more resource requests would be consecutive rather than concurrent.
+
+With that toy example out of the way, let's take a look at some real-world patterns where the preload scanner can be defeated&mdash;and what can be done to fix them.
+
+{% Aside %}
+  This smattering of patterns isn't an exhaustive list, just some common ones.
+{% endAside %}
+
+## Injected `async` scripts
+
+Let's say you've got HTML in your `<head>` that includes some inline JavaScript like this:
+
+```html
+<script>
+  const scriptEl = document.createElement('script');
+  scriptEl.src = '/yall.min.js';
+
+  document.head.appendChild(scriptEl);
+</script>
+```
+
+Injected scripts are [`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) by default, so when this script is injected, it will behave as if the `async` attribute was applied to it. That means it will run as soon as possible and not block rendering. Sounds optimal, right? Yet, if you presume that this inline `<script>` comes after a `<link>` element that loads an external CSS file, you'll get a suboptimal result:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/L9ltNSHa6D4FI6YPw1vF.png", alt="This WebPageTest chart shows the preload scan defeated when a script is injected.", width="800", height="219", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 5:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/injected-async-script.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page contains a single stylesheet and an injected <code>async</code> script. The preload scanner can't discover the script during the render blocking phase, because it's injected on the client.
+  </figcaption>
+</figure>
+
+Let's break down what happened here:
+
+1. At 0 seconds, the main document is requested.
+2. At 1.4 seconds, the first byte of the navigation request arrives.
+3. At 2.0 seconds, the CSS and image are requested.
+4. Because the parser is blocked loading the stylesheet and the inline JavaScript that injects the `async` script comes _after_ that stylesheet at 2.6 seconds, the functionality that script provides isn't available as soon as it could be.
+
+This is suboptimal because the request for the script occurs only after the stylesheet has finished downloading. This delays the script from running as soon as possible. This could have the potential to affect a page's [Time to Interactive (TTI)](/tti/). By contrast, because the `<img>` element is discoverable in the server-provided markup, it's discovered by the preload scanner.
+
+So, what happens if you use a regular `<script>` tag with the `async` attribute as opposed to injecting the script into the DOM?
+
+```html
+<script src="/yall.min.js" async></script>
+```
+
+This is the result:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Hb4IRf5XDVBpfakZbteE.png", alt="A WebPageTest network waterfall depicting how an async script loaded by using the HTML &lt;script&gt; element is still discoverable by the browser preload scanner, even though the browser's primary HTML parser is blocked while downloading and processing a stylesheet.", width="800", height="219", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 6:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/inline-async-script.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page contains a single stylesheet and a single <code>async</code> <code>&lt;script&gt;</code> element. The preload scanner discovers the script during the render blocking phase, and loads it concurrently with the CSS.
+  </figcaption>
+</figure>
+
+There may be some temptation to suggest that these issues could be remedied by using [`rel=preload`](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload). This would certainly work, but it may carry some side effects. After all, why use `rel=preload` to fix a problem that can be avoided by _not_ injecting a `<script>` element into the DOM?
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/O6KzUOeFD2cCFg11XK8W.png", alt="A WebPageTest waterfall showing how the rel=preload resource hint is used to promote discovery of an async injected script&mdash;albeit in a way that may have unintended side-effects.", width="800", height="219", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 7:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/preloaded-injected-async-script.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page contains a single stylesheet and an injected <code>async</code> script, but the <code>async</code> script is preloaded to ensure it is discovered sooner.
+  </figcaption>
+</figure>
+
+Preloading "fixes" the problem here, but it introduces a new problem: the `async` script in the first two demos&mdash;despite being loaded in the `<head>`&mdash;are loaded at "Low" priority, whereas the stylesheet is loaded at "Highest" priority. In the last demo where the `async` script is preloaded, the stylesheet is still loaded at "Highest" priority, but the script's priority has been promoted to "High".
+
+{% Aside %}
+  Resource priority can be discovered in the network tab in modern browsers. For Chrome DevTools in particular, [you can right click on the column headers](https://developer.chrome.com/docs/devtools/network/reference/#columns) to ensure the priority column is visible. Be sure to test in multiple browsers, as resource priority varies by browser and other factors.
+{% endAside %}
+
+When a resource's priority is raised, the browser allocates more bandwidth to it. This means that&mdash;even though the stylesheet has the highest priority&mdash;the script's raised priority may cause bandwidth contention. That could be a factor on slow connections, or in cases where resources are quite large.
+
+The answer here is straightforward: if a script is needed during startup, don't defeat the preload scanner by injecting it into the DOM. Experiment as needed with `<script>` element placement, as well as with attributes such as `defer` and `async`.
+
+{% Aside %}
+  Ilya Grigorik has written [an informative post](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/) that goes into great detail about injected `async` scripts. Give it a read if you want a deep dive into this topic.
+{% endAside %}
+
+## Lazy loading with JavaScript
+
+Lazy loading is a great method of conserving data, one that's often applied to images. However, sometimes lazy loading is incorrectly applied to images that are "above the fold", so to speak.
+
+This introduces potential issues with resource discoverability where the preload scanner is concerned, and can unnecessarily delay how long it takes to discover a reference to an image, download it, decode it, and present it. Let's take this image markup for example:
+
+```html
+<img data-src="/sand-wasp.jpg" alt="Sand Wasp" width="384" height="255">
+```
+
+The use of a `data-` prefix is a common pattern in JavaScript-powered lazy loaders. When the image is scrolled into the viewport, the lazy loader strips the `data-` prefix, meaning that in the preceding example, `data-src` becomes `src`. This update prompts the browser to fetch the resource.
+
+This pattern isn't problematic until it's applied to images that are in the viewport during startup. Because the preload scanner doesn't read the `data-src` attribute in the same way that it would an `src` (or `srcset`) attribute, the image reference isn't discovered earlier. Worse, the image is delayed from loading until _after_ the lazy loader JavaScript downloads, compiles, and executes.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Qu1Ghkpp2K5FUu2etfz7.png", alt="A WebPageTest network waterfall chart showing how a lazily-loaded image that is in the viewport during startup is necessarily delayed because the browser preload scanner can't find the image resource, and only loads when the JavaScript required for lazy loading to work loads. The image is discovered far later than it should be.", width="800", height="220", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 8:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/js-lazy-load-suboptimal.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The image resource is unnecessarily lazy-loaded, even though it is visible in the viewport during startup. This defeats the preload scanner and causes an unnecessary delay.
+  </figcaption>
+</figure>
+
+Depending on the size of the image&mdash;which may depend on the size of the viewport&mdash;it may be a candidate element for [Largest Contentful Paint (LCP)](/lcp/). When the preload scanner cannot speculatively fetch the image resource ahead of time&mdash;possibly during the point at which the page's stylesheet(s) block rendering&mdash;LCP suffers.
+
+{% Aside 'important' %}
+  For more information on optimizing LCP beyond the scope of this article, read [Optimizing Largest Contentful Paint](/optimize-lcp/).
+{% endAside %}
+
+The solution is to change the image markup:
+
+```html
+<img src="/sand-wasp.jpg" alt="Sand Wasp" width="384" height="255">
+```
+
+This is the optimal pattern for images that are in the viewport during startup, as the preload scanner will discover and fetch the image resource more quickly.
+
+<figure id="fig-9">
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/0pRjNYnUCcbrEHaaTJ3t.png", alt="A WebPageTest network waterfall chart depicting an loading scenario for an image in the viewport during startup. The image is not lazily loaded, which means it is not dependent on the script to load, meaning the preload scanner can discover it sooner.", width="800", height="220", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 9:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/js-lazy-load-optimal.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The preload scanner discovers the image resource before the CSS and JavaScript begin loading, which gives the browser a head start on loading it.
+  </figcaption>
+</figure>
+
+The result in this simplified example is a 100-millisecond improvement in LCP on a slow connection. This may not seem like a huge improvement, but it is when you consider that the solution is a quick markup fix, and that most web pages are more complex than this set of examples. That means that LCP candidates may have to contend for bandwidth with many other resources, so optimizations like this become increasingly important.
+
+{% Aside 'important' %}
+  Images aren't the only resource type that can suffer from suboptimal lazy loading patterns. The [`<iframe>` element](https://developer.mozilla.org/docs/Web/HTML/Element/iframe) can also be affected, and since `<iframe>` elements can load many subresources, the impact of performance could be substantially worse.
+{% endAside %}
+
+## CSS background images
+
+Remember that the browser preload scanner scans _markup_. It doesn't scan other resource types, such as CSS which may involve fetches for images referenced by the [`background-image` property](https://developer.mozilla.org/docs/Web/CSS/background-image).
+
+Like HTML, browsers process CSS into its own object model, known as the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model). If external resources are discovered as the CSSOM is constructed, those resources are requested at the time of discovery, and not by the preload scanner.
+
+Let's say your page's [LCP candidate](/lcp/#what-elements-are-considered) is an element with a CSS `background-image` property. The following is what happens as resources load:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YDBXJlSV1xN4SheYVQUY.png", alt="A WebPageTest network waterfall chart depicting a page with an LCP candidate loaded from CSS using the background-image property. Because the LCP candidate image is in a resource type that the browser preload scanner can't examine, the resource is delayed from loading until the CSS is downloaded and processed, delaying the LCP candidate's paint time.", width="800", height="206", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 10:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/css-background-image-no-preload.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page's LCP candidate is an element with a CSS <code>background-image</code> property (row 3). The image it requests doesn't begin fetching until the CSS parser finds it.
+  </figcaption>
+</figure>
+
+In this case, the preload scanner isn't so much defeated as it is uninvolved. Even so, if an LCP candidate on the page is from a `background-image` CSS property, you're going to want to preload that image:
+
+```html
+<!-- Make sure this is in the <head> below any
+     stylesheets, so as not to block them from loading -->
+<link rel="preload" as="image" href="lcp-image.jpg">
+```
+
+{% Aside 'caution' %}
+  If your LCP candidate is from a `background-image` CSS property, but that image varies based on the viewport size, you'll need to specify the [`imagesrcset` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-imagesrcset) on the `<link>` element.
+{% endAside %}
+
+That `rel=preload` hint is small, but it helps the browser discover the image sooner than it otherwise would:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/SdBeh352sU0rN5umquSQ.png", alt="A WebPageTest network waterfall chart showing a CSS background image (which is the LCP candidate) loading much sooner due to the use of a rel=preload hint. The LCP time improves by roughly 250 milliseconds.", width="800", height="206", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 11:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/css-background-image-with-preload.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page's LCP candidate is an element with a CSS <code>background-image</code> property (row 3). The <code>rel=preload</code> hint helps the browser to discover the image around 250 milliseconds sooner than without the hint.
+  </figcaption>
+</figure>
+
+With the `rel=preload` hint, the LCP candidate is discovered sooner, lowering the LCP time. While that hint helps fix this issue, the better option may be to assess whether or not your image LCP candidate _has_ to be loaded from CSS. With an `<img>` tag, you'll have more control over loading an image that's appropriate for the viewport while allowing the preload scanner to discover it.
+
+## Inlining too many resources
+
+Inlining is a practice that places a resource inside of the HTML. You can inline stylesheets in `<style>` elements, scripts in `<script>` elements, and virtually any other resource using [base64 encoding](https://developer.mozilla.org/docs/Glossary/Base64).
+
+Inlining resources can be faster than downloading them because a separate request isn't issued for the resource. It's right in the document, and loads instantly. However, there are significant drawbacks:
+
+- If you're not caching your HTML&mdash;and you just can't if the HTML response is dynamic&mdash;the inlined resources are never cached. This affects performance because the inlined resources aren't reusable.
+- Even if you can cache HTML, inlined resources aren't shared between documents. This reduces caching efficiency compared to external files that can be cached and reused across an entire origin.
+- If you inline too much, you delay the preload scanner from discovering resources later in the document, because downloading that extra, inlined, content takes longer.
+
+Take [this page](https://preload-scanner-fights.glitch.me/inline-nothing.html) as an example. In certain conditions the LCP candidate is the image at the top of the page, and the CSS is in a separate file loaded by a `<link>` element. The page also uses four web fonts which are requested as separate files from the CSS resource.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uDCAZc9Vkl9phYrZk2vW.png", alt="A WebPageTest network waterfall chart of page with an external CSS file with four fonts referenced in it. The LCP candidate image is discovered by the preload scanner in due course.", width="800", height="347", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 12:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/inline-nothing.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page's LCP candidate is an image loaded from an <code>&lt;img&gt;</code> element, but is discovered by the preload scanner because the CSS and the fonts required for the page load in separate resources, which doesn't delay the preload scanner from doing its job.
+  </figcaption>
+</figure>
+
+Now what happens if the CSS _and_ all the fonts are inlined as base64 resources?
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/frUPqxpkkouS0eUWWFVc.png", alt="A WebPageTest network waterfall chart of page with an external CSS file with four fonts referenced in it. The preload scanner is delayed significantly from discovering the LCP image .", width="800", height="297", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 13:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/inline-everything.html" rel="noopener">a web page</a> run on Chrome on a mobile device over a simulated 3G connection. The page's LCP candidate is an image loaded from an <code>&lt;img&gt;</code> element, but the inlining of the CSS and its four font resources in the `<head>` delays the preload scanner from discovering the image until those resources are fully downloaded.
+  </figcaption>
+</figure>
+
+The impact of inlining yields negative consequences for LCP in this example&mdash;and for performance in general. The version of the page that doesn't inline anything paints the LCP image in about 3.5 seconds. The page that inlines everything doesn't paint the LCP image until just over 7 seconds.
+
+There's more at play here than just the preload scanner. Inlining fonts is not a great strategy because base64 is an inefficient format for binary resources. Another factor at play is that external font resources aren't downloaded unless they're determined necessary by the CSSOM. When those fonts are inlined as base64, they're downloaded whether they're needed for the current page or not.
+
+Could a preload improve things here? Sure. You _could_ preload the LCP image and reduce LCP time, but bloating your potentially uncacheable HTML with inlined resources has other negative performance consequences. [First Contentful Paint (FCP)](/fcp/) is also affected by this pattern. In the version of the page where nothing is inlined, FCP is roughly 2.7 seconds. In the version where everything is inlined, FCP is roughly 5.8 seconds.
+
+Be very careful with inlining stuff into HTML, especially base64-encoded resources. In general it is not recommended, except for very small resources. Inline as little as possible, because inlining too much is playing with fire.
+
+## Rendering markup with client-side JavaScript
+
+There's no doubt about it: [JavaScript definitely affects page speed](https://almanac.httparchive.org/en/2021/performance#total-blocking-time-tbt). Not only do developers depend on it to provide interactivity, but there has also been a tendency to rely on it to deliver content itself. This leads to a better developer experience in some ways; but benefits for developers don't always translate into benefits for users.
+
+One pattern that can defeat the preload scanner is rendering markup with client-side JavaScript:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZhwXAzscucsECuG6XDRl.png", alt="A WebPageTest network waterfall showing a basic page with images and text rendered completely on the client in JavaScript. Because the markup is contained within JavaScript, the preload scanner can't detect any of the resources. All resources are additionally delayed due to the extra network and processing time that JavaScript frameworks require.", width="800", height="260", loading="lazy" %}
+  <figcaption>
+    <strong>Fig. 14:</strong> A WebPageTest network waterfall chart of <a href="https://preload-scanner-fights.glitch.me/client-rendered.html" rel="noopener">a client-rendered web page</a> run on Chrome on a mobile device over a simulated 3G connection. Because the content is contained in JavaScript and relies on a framework to render, the image resource in the client-rendered markup is hidden from the preload scanner. The equivalent server-rendered experience is depicted in <a href="#fig-9">Fig. 9</a>.
+  </figcaption>
+</figure>
+
+When markup payloads are contained in and rendered entirely by JavaScript in the browser, any resources in that markup are effectively invisible to the preload scanner. This delays the discovery of important resources, which certainly affects LCP. In the case of these examples, the request for the LCP image is _significantly_ delayed when compared to the equivalent server-rendered experience that doesn't require JavaScript to appear.
+
+This veers a bit from the focus of this article, but the effects of rendering markup on the client go far beyond defeating the preload scanner. For one, introducing JavaScript to power an experience that doesn't require it introduces unnecessary processing time that can affect [Interaction to Next Paint (INP)](/inp/).
+
+Additionally, rendering extremely large amounts of markup on the client is more likely to generate [long tasks](/long-tasks-devtools/) compared to the same amount of markup being sent by the server. The reason for this&mdash;aside from the extra processing that JavaScript involves&mdash;is that browsers stream markup from the server and chunk up rendering in such a way that avoids long tasks. Client-rendered markup, on the other hand, is handled as a single, monolithic task, which may affect page responsiveness metrics such as [Total Blocking Time (TBT)](/tbt/) or [First Input Delay (FID)](/fid/) in addition to INP.
+
+The remedy for this scenario depends on the answer to this question: **Is there a reason why your page's markup can't be provided by the server as opposed to being rendered on the client?** If the answer to this is "no", server-side rendering (SSR) or statically generated markup should be considered where possible, as it will help the preload scanner to discover and opportunistically fetch important resources ahead of time.
+
+If your page _does_ need JavaScript to attach functionality to some parts of your page markup, you can still do so with SSR, either with vanilla JavaScript, or [hydration](https://www.patterns.dev/posts/progressive-hydration/) to get the best of both worlds.
+
+## Help the preload scanner help you
+
+The preload scanner is a highly effective browser optimization that helps pages load faster during startup. By avoiding patterns which defeat its ability to discover important resources ahead of time, you're not just making development simpler for yourself, you're creating better user experiences that will deliver better results in many metrics, including some [web vitals](/vitals/).
+
+To recap, here's the following things you'll want to take away from this post:
+
+- The browser preload scanner is a secondary HTML parser that scans ahead of the primary one if it's blocked to opportunistically discover resources it can fetch sooner.
+- Resources that aren't present in markup provided by the server on the initial navigation request can't be discovered by the preload scanner. Ways the preload scanner can be defeated may include (but are not limited to):
+  - Injecting resources into the DOM with JavaScript, be they scripts, images, stylesheets, or anything else that would be better off in the initial markup payload from the server.
+  - Lazy loading above-the-fold images or iframes using a JavaScript solution.
+  - Rendering markup on the client that may contain references to document subresources using JavaScript.
+- The preload scanner only scans HTML. It does not examine the contents of other resources&mdash;particularly CSS&mdash;that may include references to important assets, including LCP candidates.
+
+If, for whatever reason, you _can't_ avoid a pattern that negatively affects the preload scanner's ability to speed up loading performance, consider the [`rel=preload`](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) resource hint. If you _do_ use `rel=preload`, test in lab tools to ensure that it's giving you the desired effect. Finally, don't preload too many resources, because when you prioritize everything, nothing will be.
+
+## Resources
+
+- [Script-injected "async scripts" considered harmful](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)
+- [How the Browser Pre-loader Makes Pages Load Faster](https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/)
+- [Preload critical assets to improve loading speed](/preload-critical-assets/)
+- [Establish network connections early to improve perceived page speed](/preconnect-and-dns-prefetch/)
+- [Optimizing Largest Contentful Paint](/optimize-lcp/)
+
+_Hero image from [Unsplash](https://unsplash.com/photos/oXlXu2qukGE), by [Mohammad Rahmani
+](https://unsplash.com/@afgprogrammer)._
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/1-hello-audio-worklet.jpg b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/1-hello-audio-worklet.jpg
deleted file mode 100644
index ad08c0812b5..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/1-hello-audio-worklet.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/2e-box2d.jpg b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/2e-box2d.jpg
deleted file mode 100644
index bca32451ccf..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/2e-box2d.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/3e-hello-audio-worklet.png b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/3e-hello-audio-worklet.png
deleted file mode 100644
index 12ce5382507..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/3e-hello-audio-worklet.png and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/4e-pulse-audio.png b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/4e-pulse-audio.png
deleted file mode 100644
index b3f4ae5be00..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/4e-pulse-audio.png and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/5e-render-budget.png b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/5e-render-budget.png
deleted file mode 100644
index aede3f74995..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/5e-render-budget.png and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/6e-garbage-collection.png b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/6e-garbage-collection.png
deleted file mode 100644
index 98e5c578f85..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/6e-garbage-collection.png and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/7e-devtools.jpg b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/7e-devtools.jpg
deleted file mode 100644
index f18c3ed135d..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/7e-devtools.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/8e-devtools.png b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/8e-devtools.png
deleted file mode 100644
index 34971abc4e5..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/8e-devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/hero.jpg b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/hero.jpg
deleted file mode 100644
index 560926f3359..00000000000
Binary files a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/index.md b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/index.md
index d36f13aec86..2ef59d8b9e7 100644
--- a/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/index.md
+++ b/src/site/content/en/blog/profiling-web-audio-apps-in-chrome/index.md
@@ -1,36 +1,38 @@
 ---
 title: Profiling Web Audio apps in Chrome
 subhead: >
-  Learn how to profile the performance of Web Audio apps in Chrome using 
-  `chrome://tracing` and the **WebAudio** tab in DevTools.
+  Learn how to profile the performance of Web Audio apps in Chrome using
+  `about://tracing` and the **WebAudio** extension in Chrome DevTools.
 description: >
   Learn how to profile the performance of Web Audio apps in Chrome using
-  `chrome://tracing` and the **WebAudio** panel in DevTools.
+  `about://tracing` and the **WebAudio** extension in Chrome DevTools.
 date: 2020-05-04
+updated: 2022-06-02
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - media
-  - webaudio
+  - audio
+  - performance
 authors:
   - hongchanchoi
-hero: hero.jpg
+hero: image/admin/uXHdcVy0A8BFAdNr8bXu.jpg
 alt: Artistic image of microphone and pop filter
 ---
 
-You reached this documentation probably because you're developing an app
-that uses the [Web Audio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)
-and experienced some unexpected glitches such as popping noises from the
-output. You might already be involved in a [crbug.com](https://crbug.com)
-discussion and a Chrome engineer has asked you to upload "tracing data". This
-guide shows how to obtain the data so you can help engineers triage, and
-eventually fix, the issue.
+You reached this article probably because you're developing an app that uses the
+[Web Audio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)
+and experienced unexpected glitches such as popping noises from
+the output, or you are hearing something unexpected. You might already be
+involved in a [crbug.com](https://crbug.com) discussion and a Chrome engineer
+asked you to upload "tracing data" or look into the graph visualization. This
+article shows how to obtain the relevant information so we can understand a
+problem and eventually fix the underlying issue.
 
 ## Web Audio profiling tools
 
 There are two tools that will help you when profiling Web Audio,
-`chrome://tracing` and the **WebAudio** tab in Chrome DevTools.
+`about://tracing` and the **WebAudio** extension in Chrome DevTools.
 
-### When do you use `chrome://tracing`?
+### When do you use `about://tracing`?
 
 When mysterious "glitches" happen. Profiling the app with the tracing tools
 gives you insights on:
@@ -38,22 +40,30 @@ gives you insights on:
 * **Time slices spent by specific function calls** on different threads
 * **Audio callback timing** in the timeline view
 
-It usually shows the missed deadlines or the big garbage collection stops that
-might cause unexpected audio glitches. This information is useful for triaging
-a bug. Chromium engineers will ask for tracing data if a local reproduction of the issue
-is not feasible. See [The Trace Event Profiling Tool][chromium-tracing] for
-general instructions on how to trace.
+It usually shows missed audio callback deadlines or big garbage collection that
+might cause unexpected audio glitches. This information is useful for
+understanding an underlying problem, so Chromium engineers will often ask it
+especially when the local reproduction is not feasible. The general
+instructions for tracing are available [here](chromium-tracing).
+
+### When do you use Web Audio DevTools extension?
 
-### When do you use the **WebAudio** tab?
+When you want to visualize the audio graph and monitor how the audio renderer
+performs in real time. The audio graph, a network of `AudioNode` objects to
+generate and synthesize an audio stream, often gets complex but the graph
+topology is opaque by design. (The Web Audio API doesn’t have features for
+node/graph introspection.) Some changes happen in your graph and now you hear
+silence. Then it’s time for debugging by listening. It is never easy, and it
+becomes more difficult when you have a bigger audio graph. The Web Audio
+DevTools extension can help you by visualizing the graph.
 
-When you want to get a feel for how the application performs in the real world.
-DevTools shows you a running estimate of render capacity, which indicates
-how the web audio rendering engine is handling render tasks over a given
-render budget (for example, approximately 2.67ms @ 48KHz). If the capacity
-goes near 100%, that means your app is likely to produce glitches because the
-renderer is failing to finish the work in the render budget.
+With this extension, you can monitor a running estimate of render capacity,
+which indicates how the web audio renderer performs over a given render budget
+(e.g. approximately 2.67ms @ 48KHz). If the capacity goes near 100 percent, that
+means your app is likely to produce glitches because the renderer is failing to
+finish the work in the given budget.
 
-## Use `chrome://tracing`
+## Use `about://tracing`
 
 ### How to capture tracing data
 
@@ -65,7 +75,7 @@ or use other builds from [different release channels][diff-channel] (e.g.
 Beta or Canary). Once you have the browser ready, follow the steps below:
 
 1. Open your application (web page) on a tab.
-1. Open another tab and go to `chrome://tracing`.
+1. Open another tab and go to `about://tracing`.
 1. Press the **Record** button and select **Manually select settings**.
 1. Press the **None** buttons on both the **Record Categories** and
    **Disabled by Default Categories** sections.
@@ -83,21 +93,20 @@ Beta or Canary). Once you have the browser ready, follow the steps below:
 1. When you have enough trace data, go back to the tracing tab and press **Stop**.
 1. The tracing tab will visualize the result.
 
-   <img src="1-hello-audio-worklet.jpg" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot after tracing has completed.">
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3GqKLXTP7XzFp6ADztc4.jpg", alt="Screen shot after tracing has completed.", width="800", height="525" %}
 
 1. Press **Save** to save the tracing data.
 
 ### How to analyze tracing data
 
 The tracing data visualizes how Chrome's web audio engine renders the audio.
-The renderer has two different render modes: **Native mode** and
+The renderer has two different render modes: **Operating system mode** and
 **Worklet mode**. Each mode uses a different threading model, so the tracing
 results also differ.
 
-#### Native mode
+#### Operating system mode
 
-In Native mode, the [`AudioOutputDevice`][cr-audio-output-device] thread runs
+In operating system mode, the [`AudioOutputDevice`][cr-audio-output-device] thread runs
 all the web audio code. The `AudioOutputDevice` is a real-time priority thread
 originating from the browser's Audio Service that is driven by the audio
 hardware clock. If you see irregularity from the trace data in this lane,
@@ -106,8 +115,7 @@ of Linux and Pulse Audio is known to have this problem. See the following Chromi
 for more details: [#825823](https://crbug.com/825823),
 [#864463](https://crbug.com/864463).
 
-<img src="2e-box2d.jpg" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot of native mode tracing result." >
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Mf64zHw10phOMhU3gXsJ.jpg", alt="Screen shot of operating system mode tracing result.", width="800", height="398" %}
 
 #### Worklet mode
 
@@ -119,8 +127,7 @@ worklet is activated all the web audio operations are rendered by the
 The common irregularity here is a big block caused by the garbage collection
 or missed render deadlines. Both cases lead to glitches in the audio stream.
 
-<img src="3e-hello-audio-worklet.png" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot of worklet mode tracing result.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2kSG5BoaXZ5CZIlVvIYI.png", alt="Screen shot of worklet mode tracing result.", width="800", height="449" %}
 
 In both cases, the ideal tracing data is characterized by well-aligned audio
 device callback invocations and render tasks being completed well within the
@@ -137,8 +144,7 @@ goes beyond a given render budget. The callback timing is well behaved but
 the audio processing function call of the Web Audio API failed to complete the
 work before the next device callback.
 
-<img src="5e-render-budget.png" class="w-screenshot w-screenshot--filled"
-     alt="Diagram showing audio glitch due to render task overflowing budget.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3CkP24NupnqB1XDGH6w.png", alt="Diagram showing audio glitch due to render task overflowing budget.", width="734", height="362" %}
 
 **Your options:**
 
@@ -148,7 +154,7 @@ work before the next device callback.
 
 #### Example 2: Significant garbage collection on the worklet thread
 
-Unlike on the native audio rendering thread, garbage collection is managed
+Unlike on the operating system audio rendering thread, garbage collection is managed
 on the worklet thread. That means if your code does memory allocation/deallocation
 (e.g. new arrays) it eventually triggers a garbage collection which
 synchronously blocks the thread. If the workload of web audio operations and
@@ -156,15 +162,7 @@ garbage collection is bigger than a given render budget, it results in
 glitches in the audio stream. The following screenshot is an extreme example of this
 case.
 
-<img src="6e-garbage-collection.png" class="w-screenshot w-screenshot--filled"
-     alt="Audio glitches caused by garbage collection.">
-
-{% Aside %}
-  Chrome's `AudioWorkletProcessor` implementation generates `Float32Array` instances for
-  the input and output buffer every audio processing callback. This also
-  slowly builds up the memory usage over time. The team has a plan to improve
-  the design once the related specification is finalized.
-{% endAside %}
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ckdPwqnRtoHsRQkOVy8J.png", alt="Audio glitches caused by garbage collection.", width="800", height="334" %}
 
 **Your options:**
 
@@ -172,8 +170,7 @@ case.
 * Use different design patterns based on `SharedArrayBuffer`. Although this
   is not a perfect solution, several web audio apps use a similar pattern with
   `SharedArrayBuffer` to run the intensive audio code. Examples:
-  * [Audio Worklet Design Pattern (Web Audio Power House)][webfu-audio-worklet-dp]
-  * [Audio Device Client Prototype][aud-dev-client-proto]
+  * [Audio Worklet Design Pattern][webfu-audio-worklet-dp]
 
 #### Example 3: Jittery audio device callback from `AudioOutputDevice`
 
@@ -184,69 +181,95 @@ subsequent operations will be affected. The following image is an example
 of jittery audio callback. Compared to the previous two images, the interval
 between each callback varies significantly.
 
-<img src="4e-pulse-audio.png" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot comparing unstable vs stable callback timing.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1UN5udXOW56ooihw5M18.png", alt="Screen shot comparing unstable vs stable callback timing.", width="800", height="252" %}
+
+**Your options:**
+
+* Increase the system audio callback buffer size by adjusting the
+  [`latencyHint`](https://webaudio.github.io/web-audio-api/#dom-audiocontextoptions-latencyhint)
+  option.
+* If you find a problem, [file an issue on crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EWebAudio)
+  with the tracing data.
+
+## Use the Web Audio DevTools extension
+
+You can also use the DevTools extension specifically designed for the Web Audio API.
+Unlike the tracing tool, this provides real time inspection of graphs and
+performance metrics.
 
-This is a known issue on Linux, which uses Pulse Audio as an audio
-backend. This is still under investigation ([Chromium issue #825823](https://crbug.com/825823)).
+This extension needs to be installed from the
+[Chrome Web Store](https://chrome.google.com/webstore/detail/audion/cmhomipkklckpomafalojobppmmidlgl).
 
-## Use the **WebAudio** tab in Chrome DevTools
+After the installation, you access the panel by opening Chrome DevTools and
+clicking “Web Audio” on the top menu.
 
-You also can use the DevTools tab specifically designed for web audio. This
-is less comprehensive compared to the tracing tool, but it is useful if you
-want to gauge the running performance of your application.
+{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/JUXLwtX83TOXqRHD2CGU.png", alt="Screenshot showing how to open Web Audio panel in Chrome DevTools.", width="800", height="201" %}
 
-Access the panel by opening the **Main Menu** of
-DevTools, then go to **More tools** > **WebAudio**.
+The Web Audio panel has four components: context selector, property inspector,
+graph visualizer, and performance monitor.
 
-<img src="7e-devtools.jpg" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot showing how to open WebAudio panel in Chrome DevTools.">
+{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/4xQhLJBdDWW3X2nIssIS.png", alt="Screenshot of the Web Audio panel in Chrome DevTools.", width="800", height="416" %}
 
-<img src="8e-devtools.png" class="w-screenshot w-screenshot--filled"
-     alt="Screen shot of WebAudio panel in Chrome DevTools.">
+### Context Selector
 
-This tab shows information about running instances of `BaseAudioContext`.
-Use it to see how the web audio renderer is performing on the page.
+Since a page can have multiple `BaseAudioContext` objects, this drop-down menu allows you
+choosing the context you want to inspect. You can also manually trigger garbage
+collection by clicking the trash can icon on the left.
 
-Since a page can have multiple `BaseAudioContext` instances, the **Context Selector**
-(which is the drop-down menu that says `realtime (4e1073)` in the last screenshot), 
-allows you to choose what you want to inspect. The inspector
-view shows the properties (e.g. sample rate, buffer size, channel count, and
-context state) of a `BaseAudioContext` instance that you select, and it
-dynamically changes when properties change.
+### Property Inspector
 
-The most useful thing in this view is the status bar at the bottom. It is only
-active when the selected `BaseAudioContext` is an `AudioContext`, which runs
-in real-time. This bar shows the instantaneous audio stream quality of a
-selected `AudioContext` and is updated every second. It provides the following
-information:
+The side panel shows various properties of a user-selected context or
+`AudioNode`. Inspecting dynamic values in `AudioParam` is not supported.
+
+### Graph Visualizer
+
+This view renders the current graph topology of a user-selected context. This
+visualization changes dynamically in real time. By clicking an element in the
+visualization, you can inspect the detailed information on the property
+inspector.
+
+### Performance Monitor
+
+The status bar at the bottom is only active when the selected `BaseAudioContext`
+is an `AudioContext`, which runs in real-time. This bar shows the instantaneous
+audio stream quality of a selected `AudioContext` and is updated every second. It
+provides the following information:
 
 * **Callback interval** (ms): Displays the weighted mean/variance of callback
-  interval. Ideally the mean should be stable and the variance should be
-  close to zero. Otherwise the operating system's audio infra might have
-  problems in deeper layers.
-* **Render Capacity** (percent): Follows this formula: (*time spent in actual
-  rendering / instantaneous callback interval*) &times; 100. When the capacity
-  gets close to 100 percent, it means that the renderer is doing too much for a
-  given render budget, so you should consider doing less in the web audio code.
+  interval. Ideally the mean should be stable and the variance should be close
+  to zero. If you see a large variance, it means that the system-level audio
+  callback function has unstable timing that can lead to poor audio stream
+  quality. (See example 3, above.)
+
+* **Render Capacity** (percent): When the capacity gets close to 100 percent, it
+  means that the renderer is doing too much for a given render budget, so you
+  should consider doing less (e.g. using fewer `AudioNodes` objects in the
+  graph).
+
+You can manually trigger a garbage collector by clicking the trash can icon.
+
+## Legacy WebAudio DevTools panel
+
+The extension is now a recommended method by the Chrome Web Audio team, but the
+legacy WebAudio DevTools panel is also available. You can access this panel by
+clicking the "three dots" menu in the top right corner of DevTools, then going to
+**More tools**, then **WebAudio**.
 
-You can manullay trigger a garbage collector by clicking the trash can icon.
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t2eX431PTio5oOFkmOtR.jpg", alt="Screen shot showing how to open WebAudio panel in Chrome DevTools.", width="800", height="423" %}
 
 ## Conclusion
 
-Debugging audio is hard. Debugging audio in the browser is even harder.
-However, these tools can ease the pain by providing you with useful insights
-on how the web audio code performs. In some cases, you may find that web
-audio does not behave as it should - then do not be afraid to
-[file a bug on Chromium Bug Tracker][cr-file-a-bug]. While filling out the information,
-you can follow the guideline above and submit the tracing data you captured
-with a reproducible test case. With this data the Chrome engineers will be able
-to fix your bug much faster.
+Debugging audio is hard. Debugging audio in the browser is even harder. However,
+these tools can ease the pain by providing you with useful insights on how the
+web audio code performs. In some cases, however, you may find problems in Chrome
+or the extension. Then do not be afraid to
+[file a bug on crbug.com][cr-file-a-bug] or on the
+[extension issue tracker](https://github.com/GoogleChrome/audion/issues).
 
 Photo by Jonathan Velasquez on [Unsplash](https://unsplash.com/photos/c1ZN57GfDB0)
 
 [cr-file-a-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EWebAudio
-[webfu-audio-worklet-dp]: https://developers.google.com/web/updates/2018/06/audio-worklet-design-pattern#webaudio_powerhouse_audio_worklet_and_sharedarraybuffer
+[webfu-audio-worklet-dp]: https://developer.chrome.com/blog/audio-worklet-design-pattern/#webaudio-powerhouse-audio-worklet-and-sharedarraybuffer
 [aud-dev-client-proto]: https://github.com/GoogleChromeLabs/audio-device-client-prototype
 [cr-audio-worklet-thr]: https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/modules/webaudio/audio_worklet_thread.h
 [chromium-tracing]: https://www.chromium.org/developers/how-tos/trace-event-profiling-tool
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/1000000000000438000008AC945569E52CE934FA.png b/src/site/content/en/blog/progressively-enhance-your-pwa/1000000000000438000008AC945569E52CE934FA.png
deleted file mode 100644
index d1d99983d41..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/1000000000000438000008AC945569E52CE934FA.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C400000304A19EF0FF1D72987D.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C400000304A19EF0FF1D72987D.png
deleted file mode 100644
index 39441abbed7..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C400000304A19EF0FF1D72987D.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C40000039EF0A6FE5C50E42DEA.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C40000039EF0A6FE5C50E42DEA.png
deleted file mode 100644
index a9e02e11128..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000000000009C40000039EF0A6FE5C50E42DEA.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000002E6000001C0855AA2DF1E30228C.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000002E6000001C0855AA2DF1E30228C.png
deleted file mode 100644
index 2f7dd60dbce..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000002E6000001C0855AA2DF1E30228C.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000356000001C434F5DD5D64721768.png b/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000356000001C434F5DD5D64721768.png
deleted file mode 100644
index 4e817a02d0b..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000356000001C434F5DD5D64721768.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E4000008004D3AEA65DB2ABA6C.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E4000008004D3AEA65DB2ABA6C.png
deleted file mode 100644
index 0b8aa363a36..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E4000008004D3AEA65DB2ABA6C.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800AD376E3B4B3386C6.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800AD376E3B4B3386C6.png
deleted file mode 100644
index 6c120858058..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800AD376E3B4B3386C6.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800D873C982E6D44C89.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800D873C982E6D44C89.png
deleted file mode 100644
index d7a9ad1c7cb..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000003E400000800D873C982E6D44C89.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000053C000003E8B978FE17E590BC9A.png b/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000053C000003E8B978FE17E590BC9A.png
deleted file mode 100644
index 1acdec23717..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000053C000003E8B978FE17E590BC9A.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000005800000012430B7B8786BF315DD.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000005800000012430B7B8786BF315DD.png
deleted file mode 100644
index b95a5fa9436..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000005800000012430B7B8786BF315DD.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000058C000000CA65613FEC1D7FB3E2.png b/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000058C000000CA65613FEC1D7FB3E2.png
deleted file mode 100644
index 98e4d8e057c..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/100002010000058C000000CA65613FEC1D7FB3E2.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000640000003E810E16D93C747B2D5.png b/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000640000003E810E16D93C747B2D5.png
deleted file mode 100644
index 65cfbc01e14..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/1000020100000640000003E810E16D93C747B2D5.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000006FC0000021AD16A28BA8F5CBF1A.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000006FC0000021AD16A28BA8F5CBF1A.png
deleted file mode 100644
index 87abcc22ca6..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000006FC0000021AD16A28BA8F5CBF1A.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005A941A3287F1A5052A8.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005A941A3287F1A5052A8.png
deleted file mode 100644
index 08f54bcdf52..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005A941A3287F1A5052A8.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB01941257D7BE6A85.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB01941257D7BE6A85.png
deleted file mode 100644
index 1d2008fbcdd..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB01941257D7BE6A85.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB0D42F493ACFD1B53.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB0D42F493ACFD1B53.png
deleted file mode 100644
index 5b50179a5ae..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB0D42F493ACFD1B53.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB39851711E3CB3BF0.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB39851711E3CB3BF0.png
deleted file mode 100644
index ede5f0ab9be..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DB39851711E3CB3BF0.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBB930B1D3F8F5D1DA.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBB930B1D3F8F5D1DA.png
deleted file mode 100644
index 5bef2e1c191..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBB930B1D3F8F5D1DA.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCBE1B58EC828BB29.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCBE1B58EC828BB29.png
deleted file mode 100644
index 587b9b9fa0c..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCBE1B58EC828BB29.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCD9D10DD0A745315.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCD9D10DD0A745315.png
deleted file mode 100644
index a6b2ddc9add..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBCD9D10DD0A745315.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBE9BF427ABD63947A.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBE9BF427ABD63947A.png
deleted file mode 100644
index f12e6e1cfe2..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005DBE9BF427ABD63947A.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C224.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C224.png
deleted file mode 100644
index 611bc7ec611..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C224.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C225.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C225.png
deleted file mode 100644
index 8f331a2e4e6..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005E0B042853D0E77C225.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005FB1EF077CDF01B8588.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005FB1EF077CDF01B8588.png
deleted file mode 100644
index f4bd765f5d0..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000005FB1EF077CDF01B8588.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2F58B840608CEA761.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2F58B840608CEA761.png
deleted file mode 100644
index 6460176dc21..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2F58B840608CEA761.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2FE8CEB5EE2FB3F83.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2FE8CEB5EE2FB3F83.png
deleted file mode 100644
index 83c0e3a12f3..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006A2FE8CEB5EE2FB3F83.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006E8D776365D6B538C9A.png b/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006E8D776365D6B538C9A.png
deleted file mode 100644
index 7058e82f51b..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/10000201000009C4000006E8D776365D6B538C9A.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/android.png b/src/site/content/en/blog/progressively-enhance-your-pwa/android.png
deleted file mode 100644
index 5e5dd633fd6..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/android.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/chrome.png b/src/site/content/en/blog/progressively-enhance-your-pwa/chrome.png
deleted file mode 100644
index 7698d8b5891..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/chrome.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/hero.jpg b/src/site/content/en/blog/progressively-enhance-your-pwa/hero.jpg
deleted file mode 100644
index 97b241ebe8e..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/index.md b/src/site/content/en/blog/progressively-enhance-your-pwa/index.md
index 0d4a43c1fe8..3c5b5dbe1f0 100644
--- a/src/site/content/en/blog/progressively-enhance-your-pwa/index.md
+++ b/src/site/content/en/blog/progressively-enhance-your-pwa/index.md
@@ -7,7 +7,7 @@ authors:
 description: |
   Learn how to progressively enhance your Progressive Web App so that it remains useful
   on all modern browsers, but delivers an advanced experience on browsers that support
-  new web capabilities like native file system access, system clipboard access,
+  new web capabilities like file system access, system clipboard access,
   contacts retrieval, periodic background sync, screen wake lock, web sharing features,
   and many more.
 scheduled: true
@@ -16,13 +16,15 @@ updated: 2020-07-10
 tags:
   - blog
   - capabilities
-  - fugu
+  # - fugu
   - progressive-web-apps
-hero: hero.jpg
+hero: image/admin/0uSwSmGHmPXimU3dz8Xa.jpg
 alt: An image of a fish.
-thumbnail: thumbnail.jpg
+thumbnail: image/admin/X84uooDup0B9OYWY4ZKh.jpg
 ---
 
+{% YouTube 'NXCT3htg9nk' %}
+
 Back in March 2003, [Nick Finck](https://twitter.com/nickf) and
 [Steve Champeon](https://twitter.com/schampeo) stunned the web design world
 with the concept of
@@ -33,13 +35,11 @@ and technically rigorous layers of presentation and features on top of the conte
 While in 2003, progressive enhancement was about using—at the time—modern
 CSS features, unobtrusive JavaScript, and even just Scalable Vector Graphics.
 Progressive enhancement in 2020 and beyond is about using
-[modern browser capabilities](https://web.dev/fugu-status/).
+[modern browser capabilities](https://developer.chrome.com/blog/fugu-status/).
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="100002010000053C000003E8B978FE17E590BC9A.png"
-       alt="Inclusive web design for the future with progressive enhancement. Title slide from Finck and Champeon's original presentation.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IEOd4MT9BqnbeXQ7z0vC.png", alt="Inclusive web design for the future with progressive enhancement. Title slide from Finck and Champeon's original presentation.", width="800", height="597" %}
+  <figcaption>
     Slide: Inclusive Web Design for the Future With Progressive Enhancement.
     (<a href="http://www.hesketh.com/publications/inclusive_web_design_for_the_future/">Source</a>)
   </figcaption>
@@ -54,11 +54,9 @@ default parameters, generators, the destructuring assignment, rest and spread, `
 `WeakMap`/`WeakSet`, and many more.
 [All are supported](https://caniuse.com/#feat=es6).
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000000000009C40000039EF0A6FE5C50E42DEA.png"
-       alt="The CanIUse support table for ES6 features showing support across all major browsers.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sYcABrEPMr01C2ilp4B0.png", alt="The CanIUse support table for ES6 features showing support across all major browsers.", width="800", height="296" %}
+  <figcaption>
     The ECMAScript 2015 (ES6) browser support table. (<a href="https://caniuse.com/#feat=es6">Source</a>)
   </figcaption>
 </figure>
@@ -69,11 +67,9 @@ in all major browsers.
 The `async` and `await` keywords enable asynchronous, promise-based behavior
 to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000000000009C400000304A19EF0FF1D72987D.png"
-       alt="The CanIUse support table for async functions showing support across all major browsers.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0WFlQTFFTlqXKvpROMu9.png", alt="The CanIUse support table for async functions showing support across all major browsers.", width="800", height="247" %}
+  <figcaption>
     The Async functions browser support table. (<a href="https://caniuse.com/#feat=async-functions">Source</a>)
   </figcaption>
 </figure>
@@ -98,10 +94,9 @@ console.log(0 ?? 42);
 // Expected output: 0
 ```
 
-<figure class="w-figure w-figure--fullbleed">
-  <img src="1000020100000640000003E810E16D93C747B2D5.png"
-       alt="The iconic Windows XP green grass background image.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/v1nhcTV9aaqPKd9oRvYz.png", alt="The iconic Windows XP green grass background image.", width="800", height="500" %}
+  <figcaption>
     The grass is green when it comes to core JavaScript features.
     (Microsoft product screenshot, used with
     <a href="https://www.microsoft.com/en-us/legal/intellectualproperty/permissions/default">permission</a>.)
@@ -114,23 +109,21 @@ For this article, I work with a simple PWA, called
 [Fugu Greetings](https://tomayac.github.io/fugu-greetings/public/)
 ([GitHub](https://github.com/tomayac/fugu-greetings)).
 The name of this app is a tip of the hat to Project Fugu 🐡, an effort to give the web all
-the powers of native applications.
+the powers of Android/iOS/desktop applications.
 You can read more about the project on its
-[landing page](https://web.dev/fugu-status).
+[landing page](https://developer.chrome.com/blog/fugu-status).
 
 Fugu Greetings is a drawing app that lets you create virtual greeting cards, and send
 them to your loved ones. It exemplifies
-[PWA's core concepts](https://web.dev/progressive-web-apps/). It's
-[reliable](https://web.dev/reliable/) and fully offline enabled, so even if you don't
-have a network, you can still use it. It's also [Installable](https://web.dev/install-criteria/)
+[PWA's core concepts](/progressive-web-apps/). It's
+[reliable](/reliable/) and fully offline enabled, so even if you don't
+have a network, you can still use it. It's also [Installable](/install-criteria/)
 to a device's home screen and integrates seamlessly with the operating system
 as a stand-alone application.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000006A2F58B840608CEA761.png"
-       alt="Fugu Greetings PWA with a drawing that resembles the PWA community logo.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0id013BKBF2z7m70TrX.png", alt="Fugu Greetings PWA with a drawing that resembles the PWA community logo.", width="800", height="543" %}
+  <figcaption>
     The <a href="https://tomayac.github.io/fugu-greetings/public/">Fugu Greetings</a> sample app.
   </figcaption>
 </figure>
@@ -138,18 +131,18 @@ as a stand-alone application.
 ## Progressive enhancement
 
 With this out of the way, it's time to talk about *progressive enhancement*.
-The MDN Web Docs Glossary [defines](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)
+The MDN Web Docs Glossary [defines](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement)
 the concept as follows:
 
 {% Blockquote 'MDN contributors' %}
-Progressive enhancement is a design philosophy that povides a baseline of
+Progressive enhancement is a design philosophy that provides a baseline of
 essential content and functionality to as many users as possible, while
 delivering the best possible experience only to users of the most modern
 browsers that can run all the required code.
 
-[Feature detection](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+[Feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
 is generally used to determine whether browsers can handle more modern functionality,
-while [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
+while [polyfills](https://developer.mozilla.org/docs/Glossary/Polyfill)
 are often used to add missing features with JavaScript.
 
 […]
@@ -157,7 +150,7 @@ are often used to add missing features with JavaScript.
 Progressive enhancement is a useful technique that allows web developers to focus
 on developing the best possible websites while making those websites work
 on multiple unknown user agents.
-[Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)
+[Graceful degradation](https://developer.mozilla.org/docs/Glossary/Graceful_degradation)
 is related, but is not the same thing and is often seen as going in the opposite direction
 to progressive enhancement.
 In reality, both approaches are valid and can often complement one another.
@@ -173,7 +166,7 @@ In reality, both approaches are valid and can often complement one another.
 Starting each greeting card from scratch can be really cumbersome.
 So why not have a feature that allows users to import an image, and start from there?
 With a traditional approach, you'd have used an
-[`<input type=file>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
+[`<input type=file>`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)
 element to make this happen.
 First, you'd create the element, set its `type` to `'file'` and add MIME types to the `accept` property,
 and then programmatically "click" it and listen for changes.
@@ -196,7 +189,7 @@ const importImage = async () => {
 When there's an *import* feature, there probably should be an *export* feature
 so users can save their greeting cards locally.
 The traditional way of saving files is to create an anchor link
-with a [`download`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)
+with a [`download`](https://developer.mozilla.org/docs/Web/HTML/Element/a#download)
 attribute and with a blob URL as its `href`.
 You'd also programmatically "click" it to trigger the download,
 and, to prevent memory leaks, hopefully not forget to revoke the blob object URL.
@@ -222,12 +215,12 @@ and has put it straight into your Downloads folder. This isn't great.
 What if there were a better way?
 What if you could just open a local file, edit it, and then save the modifications,
 either to a new file, or back to the original file that you had initially opened?
-Turns out there is. The [Native File System API](https://web.dev/native-file-system/)
+Turns out there is. The [File System Access API](/file-system-access/)
 allows you to open and create files and
 directories, as well as modify and save them .
 
 So how do I feature-detect an API?
-The Native File System API exposes a new method `window.chooseFileSystemEntries()`.
+The File System Access API exposes a new method `window.chooseFileSystemEntries()`.
 Consequently, I need to conditionally load different import and export modules depending on whether this method is available. I've shown how to do this below.
 
 ```js
@@ -246,25 +239,21 @@ const loadImportAndExport = () => {
 };
 ```
 
-But before I dive into the Native File System API details,
+But before I dive into the File System Access API details,
 let me just quickly highlight the progressive enhancement pattern here.
-On browsers that currently don't support the Native File System API, I load the legacy scripts.
+On browsers that currently don't support the File System Access API, I load the legacy scripts.
 You can see the network tabs of Firefox and Safari below.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="100002010000058C000000CA65613FEC1D7FB3E2.png"
-       alt="Safari Web Inspector showing the legacy files getting loaded.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rnPL8xIMt6HJEUbDfrez.png", alt="Safari Web Inspector showing the legacy files getting loaded.", width="800", height="114" %}
+  <figcaption>
     Safari Web Inspector network tab.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000005800000012430B7B8786BF315DD.png"
-       alt="Firefox Developer Tools showing the legacy files getting loaded.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bui4rcv0jvlVLHI3jBoo.png", alt="Firefox Developer Tools showing the legacy files getting loaded.", width="800", height="166" %}
+  <figcaption>
     Firefox Developer Tools network tab.
   </figcaption>
 </figure>
@@ -275,18 +264,16 @@ This is made elegantly possible thanks to
 [support](https://caniuse.com/#feat=es6-module-dynamic-import).
 As I said earlier, the grass is pretty green these days.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000006FC0000021AD16A28BA8F5CBF1A.png"
-       alt="Chrome DevTools showing the modern files getting loaded.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/plf6kGtFE8g9Fjogv8ia.png", alt="Chrome DevTools showing the modern files getting loaded.", width="800", height="241" %}
+  <figcaption>
     Chrome DevTools network tab.
   </figcaption>
 </figure>
 
-## The Native File System API
+## The File System Access API
 
-So now that I have addressed this, it's time to look at the actual implementation based on the Native File System API.
+So now that I have addressed this, it's time to look at the actual implementation based on the File System Access API.
 For importing an image, I call `window.chooseFileSystemEntries()`
 and pass it an `accepts` property where I say I want image files.
 Both file extensions as well as MIME types are supported.
@@ -347,36 +334,30 @@ const exportImage = async (blob) => {
 };
 ```
 
-Using progressive enhancement with the Native File System API,
+Using progressive enhancement with the File System Access API,
 I can open a file as before.
 The imported file is drawn right onto the canvas.
 I can make my edits and finally save them with a real save dialog box
 where I can choose the name and storage location of the file.
 Now the file is ready to be preserved for eternity.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DB39851711E3CB3BF0.png"
-       alt="Fugu Greetings app with a file open dialog.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEKHbetFMURVWh4QPRJw.png", alt="Fugu Greetings app with a file open dialog.", width="800", height="480" %}
+  <figcaption>
     The file open dialog.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DB01941257D7BE6A85.png"
-       alt="Fugu Greetings app now with an imported image.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tls52mkxDB513SzzcfNj.png", alt="Fugu Greetings app now with an imported image.", width="800", height="480" %}
+  <figcaption>
     The imported image.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DBCBE1B58EC828BB29.png"
-       alt="Fugu Greetings app with the modified image.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3LwHvtROaN1bHJN1El5D.png", alt="Fugu Greetings app with the modified image.", width="800", height="480" %}
+  <figcaption>
     Saving the modified image to a new file.
   </figcaption>
 </figure>
@@ -384,21 +365,18 @@ Now the file is ready to be preserved for eternity.
 ## The Web Share and Web Share Target APIs
 
 Apart from storing for eternity, maybe I actually want to share my greeting card.
-This is something that the [Web Share API](https://web.dev/web-share/) and
-[Web Share Target API](https://web.dev/web-share-target/) allow me to do.
-Mobile, and more recently desktop operating systems have gained native sharing
+This is something that the [Web Share API](/web-share/) and
+[Web Share Target API](/web-share-target/) allow me to do.
+Mobile, and more recently desktop operating systems have gained built-in sharing
 mechanisms.
 For example, below is desktop Safari's share sheet on macOS triggered from an article on
 my [blog](https://blog.tomayac.com/).
 When you click the **Share Article** button, you can share a link to the article with a friend, for
-example, via the native macOS Messages app.
-
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="1000020100000356000001C434F5DD5D64721768.png"
-       alt="Desktop Safari's share sheet on macOS triggered from an article's Share button"
-       width="600">
-  <figcaption class="w-figcaption">
+example, via the macOS Messages app.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sinRHRHFgSgwAC7x8dIZ.png", alt="Desktop Safari's share sheet on macOS triggered from an article's Share button", width="800", height="423" %}
+  <figcaption>
     Web Share API on desktop Safari on macOS.
   </figcaption>
 </figure>
@@ -466,27 +444,21 @@ const loadShare = () => {
 ```
 
 In Fugu Greetings, if I tap the **Share** button on a supporting browser like Chrome on Android,
-the native share sheet opens.
+the built-in share sheet opens.
 I can, for example, choose Gmail, and the email composer widget pops up with the
 image attached.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img class="w-screenshot"
-        src="10000201000003E4000008004D3AEA65DB2ABA6C.png"
-        alt="Native share sheet showing various apps to share the image to."
-        width="300">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/szInJQl908kv9GEU8EJf.png", alt="OS-level share sheet showing various apps to share the image to.", width="800", height="1645" %}
+    <figcaption>
       Choosing an app to share the file to.
     </figcaption>
   </figure>
 
-  <figure class="w-figure">
-    <img class="w-screenshot"
-        src="10000201000003E400000800D873C982E6D44C89.png"
-        alt="Gmail's email compose widget with the image attached."
-        width="300">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mKmdg1OMGpWDukmfSSOl.png", alt="Gmail's email compose widget with the image attached.", width="800", height="1645" %}
+    <figcaption>
       The file gets attached to a new email in Gmail's composer.
     </figcaption>
   </figure>
@@ -500,7 +472,7 @@ When you write a greeting card, it may not always be easy to correctly write
 someone's name.
 For example, I have a friend Sergey who prefers his name to be spelled in Cyrillic letters. I'm
 using a German QWERTZ keyboard and have no idea how to type their name.
-This is a problem that the [Contact Picker API](https://web.dev/contact-picker/) can solve.
+This is a problem that the [Contact Picker API](/contact-picker/) can solve.
 Since I have my friend stored in my phone's contacts app,
 via the Contacts Picker API, I can tap into my contacts from the web.
 
@@ -541,23 +513,17 @@ contacts picker is limited to only show their names,
 but not their email addresses, or other information like their phone numbers.
 Their names are then drawn onto my greeting card.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img class="w-screenshot"
-        src="10000201000003E400000800AD376E3B4B3386C6.png"
-        alt="Contacts picker showing the names of two contacts in the address book."
-        width="300">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/T5gmSr1XGiVIV9Pw1HbC.png", alt="Contacts picker showing the names of two contacts in the address book.", width="800", height="1645" %}
+    <figcaption>
       Selecting two names with the contact picker from the address book.
     </figcaption>
   </figure>
 
-  <figure class="w-figure">
-    <img class="w-screenshot"
-        src="1000000000000438000008AC945569E52CE934FA.png"
-        alt="The names of the two previously picked contacts drawn on the greeting card."
-        width="300">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ioMOCEHwvwdyzS7DX5L8.png", alt="The names of the two previously picked contacts drawn on the greeting card.", width="800", height="1644" %}
+    <figcaption>
       The two names then get drawn onto the greeting card.
     </figcaption>
   </figure>
@@ -571,7 +537,7 @@ As a greeting card author, at times, I may want to do the same.
 I may want to either paste an image into a greeting card I'm working on,
 or copy my greeting card so I can continue editing it from
 somewhere else.
-The [Async Clipboard API](https://web.dev/image-support-for-async-clipboard/),
+The [Async Clipboard API](/image-support-for-async-clipboard/),
 supports both text and images.
 Let me walk you through how I added copy and paste support to the Fugu
 Greetings app.
@@ -638,11 +604,9 @@ copy it to the clipboard.
 When I click **Paste**, the Fugu Greetings app then asks me
 whether I want to allow the app to see text and images on the clipboard.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000006A2FE8CEB5EE2FB3F83.png"
-       alt="Fugu Greetings app showing the clipboard permission prompt.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EO9BemEDnDtO3SvLl8u5.png", alt="Fugu Greetings app showing the clipboard permission prompt.", width="800", height="543" %}
+  <figcaption>
     The clipboard permission prompt.
   </figcaption>
 </figure>
@@ -653,11 +617,9 @@ Let me copy a greeting card to the clipboard.
 When I then open Preview and click **File** and then **New from Clipboard**,
 the greeting card gets pasted into a new untitled image.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005A941A3287F1A5052A8.png"
-       alt="The macOS Preview app with an untitled, just pasted image.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/VAkvEYWsQsJ0VJ8IjEs1.png", alt="The macOS Preview app with an untitled, just pasted image.", width="800", height="464" %}
+  <figcaption>
     An image pasted into the macOS Preview app.
   </figcaption>
 </figure>
@@ -665,7 +627,7 @@ the greeting card gets pasted into a new untitled image.
 
 ## The Badging API
 
-Another useful API is the [Badging API](https://web.dev/badging-api/).
+Another useful API is the [Badging API](/badging-api/).
 As an installable PWA, Fugu Greetings of course does have an app icon
 that users can place on the app dock or the home screen.
 A fun and easy way to demonstrate the API is to (ab)use it in Fugu Greetings
@@ -699,21 +661,16 @@ In this example, I have drawn the numbers from one to seven, using one pen strok
 per number.
 The badge counter on the icon is now at seven.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DBE9BF427ABD63947A.png"
-       alt="The numbers from one to seven drawn onto the greeting card, each with just one pen stroke.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uKurKxYeRlLCLXJYhX9I.png", alt="The numbers from one to seven drawn onto the greeting card, each with just one pen stroke.", width="800", height="480" %}
+  <figcaption>
     Drawing the numbers from 1 to 7, using seven pen strokes.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000002E6000001C0855AA2DF1E30228C.png"
-       alt="Badge icon on the Fugu Greetings app showing the number 7."
-       width="300">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5uOcN2MdjKVnWXRyTmCG.png", alt="Badge icon on the Fugu Greetings app showing the number 7.", width="742", height="448" %}
+  <figcaption>
     The pen strokes counter in the form of the app icon badge.
   </figcaption>
 </figure>
@@ -723,7 +680,7 @@ The badge counter on the icon is now at seven.
 Want to start each day fresh with something new?
 A neat feature of the Fugu Greetings app is that it can inspire you each morning
 with a new background image to start your greeting card.
-The app uses the [Periodic Background Sync API](https://web.dev/periodic-background-sync/)
+The app uses the [Periodic Background Sync API](/periodic-background-sync/)
 to achieve this.
 
 The first step is to *register* a periodic sync event in the service worker registration.
@@ -777,7 +734,7 @@ Note how in the service worker, instead of a dynamic `import()`
 (that isn't supported in a service worker context
 [yet](https://github.com/w3c/ServiceWorker/issues/1356#issuecomment-433411852)),
 I use the classic
-[`importScripts()`](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts).
+[`importScripts()`](https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts).
 
 ```js
 // In the client:
@@ -797,11 +754,9 @@ if ('periodicSync' in self.registration) {
 In Fugu Greetings, pressing the **Wallpaper** button reveals the greeting card image of the day
 that is updated every day via the Periodic Background Sync API.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005E0B042853D0E77C224.png"
-       alt="Fugu Greetings app with a new greeting card image of the day.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YdSHSI4pZcTPyVv8CVx8.png", alt="Fugu Greetings app with a new greeting card image of the day.", width="800", height="481" %}
+  <figcaption>
     Pressing the <strong>Wallpaper</strong> button displays the image of the day.
   </figcaption>
 </figure>
@@ -810,7 +765,7 @@ that is updated every day via the Periodic Background Sync API.
 
 Sometimes even with a lot of inspiration, you need a nudge to finish a started greeting
 card.
-This is a feature that is enabled by the [Notification Triggers API](https://web.dev/notification-triggers/).
+This is a feature that is enabled by the [Notification Triggers API](/notification-triggers/).
 As a user, I can enter a time when I want to be nudged to finish my greeting card.
 When that time comes, I will get a notification that my greeting card is waiting.
 
@@ -843,11 +798,9 @@ if ('Notification' in window && 'showTrigger' in Notification.prototype) {
 When I check the **Reminder** checkbox in Fugu Greetings, a prompt asks
 me when I want to be reminded to finish my greeting card.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DB0D42F493ACFD1B53.png"
-       alt="Fugu Greetings app with a prompt asking the user when they want to be reminded to finish their greeting card.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xtD7PtIIBO0Yn1ISFSyz.png", alt="Fugu Greetings app with a prompt asking the user when they want to be reminded to finish their greeting card.", width="800", height="480" %}
+  <figcaption>
     Scheduling a local notification to be reminded to finish a greeting card.
   </figcaption>
 </figure>
@@ -856,19 +809,16 @@ When a scheduled notification triggers in Fugu Greetings,
 it is shown just like any other notification, but as I wrote before,
 it didn't require a network connection.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005E0B042853D0E77C225.png"
-       alt="macOS Notification Center showing a triggered notification from Fugu Greetings."
-       width="300">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e1FJA11UE3lrL1d4mCCo.png", alt="macOS Notification Center showing a triggered notification from Fugu Greetings.", width="300", height="172" %}
+  <figcaption>
     The triggered notification appears in the macOS Notification Center.
   </figcaption>
 </figure>
 
 ## The Wake Lock API
 
-I also want to include the [Wake Lock API](https://web.dev/wakelock/).
+I also want to include the [Wake Lock API](/wakelock/).
 Sometimes you just need to stare long enough at the screen until inspiration
 kisses you.
 The worst that can happen then is for the screen to turn off.
@@ -911,11 +861,9 @@ if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
 In Fugu Greetings, there's an **Insomnia** checkbox that, when checked, keeps the
 screen awake.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DBCD9D10DD0A745315.png"
-       alt="The insomnia checkbox, if checked, keeps the screen awake.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kB5LkdV3cVKaJ0Xze76v.png", alt="The insomnia checkbox, if checked, keeps the screen awake.", width="800", height="480" %}
+  <figcaption>
     The <strong>Insomnia</strong> checkbox keeps app awake.
   </figcaption>
 </figure>
@@ -924,11 +872,11 @@ screen awake.
 
 At times, even if you stare at the screen for hours,
 it's just useless and you can't come up with the slightest idea what to do with your greeting card.
-The [Idle Detection API](https://web.dev/idle-detection/) allows the app to detect user idle time.
+The [Idle Detection API](/idle-detection/) allows the app to detect user idle time.
 If the user is idle for too long, the app resets to the initial state
 and clears the canvas.
 This API is currently gated behind the
-[notifications permission](https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission),
+[notifications permission](https://developer.mozilla.org/docs/Web/API/Notification/requestPermission),
 since a lot of production use cases of idle detection are notifications-related,
 for example, to only send a notification to a device the user is currently actively using.
 
@@ -969,11 +917,9 @@ if ('IdleDetector' in window) {
 In the Fugu Greetings app, the canvas clears when the **Ephemeral** checkbox is
 checked and the user is idle for for too long.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005DBB930B1D3F8F5D1DA.png"
-       alt="Fugu Greetings app with a cleared canvas after the user has been idle for too long.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yq3IsOqp01AZTw7nvfnB.png", alt="Fugu Greetings app with a cleared canvas after the user has been idle for too long.", width="800", height="480" %}
+  <figcaption>
     When the <strong>Ephemeral</strong> checkbox is checked and the user has been idle for too long, the canvas is cleared.
   </figcaption>
 </figure>
@@ -988,11 +934,9 @@ And since with HTTP/2, requests are cheap, this pattern should work well for a l
 applications,
 although you might want to consider a bundler for really large apps.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000006E8D776365D6B538C9A.png"
-       alt="Chrome DevTools Network panel showing only requests for files with code that the current browser supports.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DOnuk7CHPsnbTdlqOHXM.png", alt="Chrome DevTools Network panel showing only requests for files with code that the current browser supports.", width="800", height="566" %}
+  <figcaption>
     Chrome DevTools Network tab showing only requests for files with code that the current browser supports.
   </figcaption>
 </figure>
@@ -1002,32 +946,23 @@ but the core functionality is always there—progressively enhanced according to
 Note that these capabilities may change even in one and the same browser,
 depending on whether the app is running as an installed app or in a browser tab.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="android.png"
-       alt="Fugu Greetings running on Android Chrome, showing many available features."
-       width="500">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LmUW0CZpH5eXIoHTZ6kH.png", alt="Fugu Greetings running on Android Chrome, showing many available features.", width="500", height="243" %}
+  <figcaption>
     <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> running on Android Chrome.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="safari.png"
-       alt="Fugu Greetings running on desktop Safari, showing fewer available features."
-       width="500">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BOcbAW4FCi10d9cGdeNW.png", alt="Fugu Greetings running on desktop Safari, showing fewer available features.", width="500", height="403" %}
+  <figcaption>
     <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> running on desktop Safari.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="chrome.png"
-       alt="Fugu Greetings running on desktop Chrome, showing many available features."
-       width="500">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7zT4BEUzxTkjg8e08OJU.png", alt="Fugu Greetings running on desktop Chrome, showing many available features.", width="500", height="348" %}
+  <figcaption>
     <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> running on desktop Chrome.
   </figcaption>
 </figure>
@@ -1035,11 +970,9 @@ depending on whether the app is running as an installed app or in a browser tab.
 If you're interested in the [Fugu Greetings](https://tomayac.github.io/fugu-greetings/public/) app,
 go find and [fork it on GitHub](https://github.com/tomayac/fugu-greetings).
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="10000201000009C4000005FB1EF077CDF01B8588.png"
-       alt="Fugu Greetings repo on GitHub.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l260mtBzRi8OxdV8gXSg.png", alt="Fugu Greetings repo on GitHub.", width="800", height="490" %}
+  <figcaption>
     <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> app on GitHub.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/safari.png b/src/site/content/en/blog/progressively-enhance-your-pwa/safari.png
deleted file mode 100644
index 052b76288c0..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/safari.png and /dev/null differ
diff --git a/src/site/content/en/blog/progressively-enhance-your-pwa/thumbnail.jpg b/src/site/content/en/blog/progressively-enhance-your-pwa/thumbnail.jpg
deleted file mode 100644
index e7fffe07796..00000000000
Binary files a/src/site/content/en/blog/progressively-enhance-your-pwa/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/promises/index.md b/src/site/content/en/blog/promises/index.md
index d1bb847a7f7..6f0c256bb2a 100644
--- a/src/site/content/en/blog/promises/index.md
+++ b/src/site/content/en/blog/promises/index.md
@@ -1,5 +1,5 @@
 ---
-title: "JavaScript Promises: An introduction"
+title: "JavaScript Promises: an introduction"
 subhead: >
   Promises simplify deferred and asynchronous computations. A promise represents
   an operation that hasn't completed yet.
@@ -7,10 +7,13 @@ description: >
   Promises simplify deferred and asynchronous computations. A promise represents
   an operation that hasn't completed yet.
 date: 2013-12-16
+updated: 2021-01-18
 tags:
   - javascript
 authors:
   - jakearchibald
+feedback:
+  - api
 ---
 
 Developers, prepare yourself for a pivotal moment in the history of
@@ -18,7 +21,7 @@ web development.
 
 <em>[Drumroll begins]</em>
 
-Promises have arrived natively in JavaScript!
+Promises have arrived in JavaScript!
 
 <em>[Fireworks explode, glittery paper rains from above, the crowd goes wild]</em>
 
@@ -37,6 +40,15 @@ At this point you fall into one of these categories:
   down like it's news to them. Take a moment to bask in your own superiority,
   then head straight to the [API reference](#promise-api-reference).
 
+## Browser support and polyfill
+
+{% BrowserCompat 'javascript.builtins.Promise' %}
+
+To bring browsers that lack a complete promises implementation up to spec
+compliance, or add promises to other browsers and Node.js, check out
+[the polyfill](https://github.com/jakearchibald/ES6-Promises#readme)
+(2k gzipped).
+
 ## What's all the fuss about? {: #whats-all-the-fuss-about }
 
 JavaScript is single threaded, meaning that two bits of script cannot run at
@@ -251,20 +263,6 @@ This is happening already with
 [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options),
 [Streams](https://github.com/whatwg/streams#basereadablestream), and more.
 
-
-## Browser support &amp; polyfill
-
-There are already implementations of promises in browsers today.
-
-As of Chrome 32, Opera 19, Firefox 29, Safari 8 &amp; Microsoft Edge,
-promises are enabled by default.
-
-To bring browsers that lack a complete promises implementation up to spec
-compliance, or add promises to other browsers and Node.js, check out
-[the polyfill](https://github.com/jakearchibald/ES6-Promises#readme)
-(2k gzipped).
-
-
 ## Compatibility with other libraries
 
 The JavaScript promises API will treat anything with a `then()` method as
@@ -388,6 +386,7 @@ less I have to see the infuriating camel-casing of `XMLHttpRequest`, the happier
 transform values or run additional async actions one after another.
 
 ### Transforming values
+
 You can transform values simply by returning the new value:
 
 ```js
@@ -413,7 +412,7 @@ get('story.json').then(function(response) {
 
 The response is JSON, but we're currently receiving it as plain text. We
 could alter our get function to use the JSON
-[`responseType`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#responseType),
+[`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType),
 but we could also solve it in promises land:
 
 ```js
@@ -557,13 +556,14 @@ above as a flowchart (because I love flowcharts):
 
 <div style="position: relative; padding-top: 93%;">
   <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
-   src="/promises/promise-flow.svg" frameborder="0" allowtransparency="true"></iframe>
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
 </div>
 
 Follow the blue lines for promises that fulfill, or the red for ones that
 reject.
 
 ### JavaScript exceptions and promises
+
 Rejections happen when a promise is explicitly rejected, but also implicitly
 if an error is thrown in the constructor callback:
 
@@ -722,6 +722,7 @@ they download, which is basically how Pulp Fiction was written. This isn't
 Pulp Fiction, so let's fix it.
 
 ### Creating a sequence
+
 We want to turn our `chapterUrls` array into a sequence of promises. We can do that using `then()`:
 
 ```js
@@ -754,7 +755,7 @@ There's also `Promise.reject(val)`, which creates a promise that rejects with
 the value you give it (or undefined).
 
 We can tidy up the above code using
-[`array.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce):
+[`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce):
 
 ```js
 // Loop through our chapter urls
@@ -811,8 +812,8 @@ getJSON('story.json').then(function(story) {
 And there we have it, a fully async version of the sync version. But we can do
 better. At the moment our page is downloading like this:
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
   </video>
@@ -868,8 +869,8 @@ Depending on connection, this can be seconds faster than loading one-by-one,
 and it's less code than our first try. The chapters can download in whatever
 order, but they appear on screen in the right order.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
   </video>
@@ -923,8 +924,8 @@ getJSON('story.json')
 And there we go, the best of both! It takes the same amount of time to deliver
 all the content, but the user gets the first bit of content sooner.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
   </video>
@@ -942,259 +943,18 @@ isn't the end of the story for promises, when combined with other ES6 features
 they get even easier.
 
 
-## Bonus round: promises and generators
-
-
-This next bit involves a whole bunch of new ES6 features, but it's not something
-you need to understand to use promises in your code today. Treat it like a movie
-trailer for some upcoming blockbuster features.
-
-ES6 also gives us
-[generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators),
-which allow functions to exit at a particular point, like "return", but
-later resume from the same point and state, for example:
-
-```js
-function *addGenerator() {
-  var i = 0;
-  while (true) {
-    i += yield i;
-  }
-}
-```
-
-Notice the star before the function name. This makes it a generator. The `yield`
-keyword is our return/resume point. We can use it like this:
-
-```js
-var adder = addGenerator();
-adder.next().value; // 0
-adder.next(5).value; // 5
-adder.next(5).value; // 10
-adder.next(5).value; // 15
-adder.next(50).value; // 65
-```
-
-But what does this mean for promises? Well, you can use this return/resume
-behaviour to write async code that looks like (and is as easy to follow as)
-synchronous code. Don't worry too much about understanding it line-for-line, but
-here's a helper function that lets us use `yield` to wait for promises to
-settle:
-
-```js
-function spawn(generatorFunc) {
-  function continuer(verb, arg) {
-    var result;
-    try {
-      result = generator[verb](arg);
-    } catch (err) {
-      return Promise.reject(err);
-    }
-    if (result.done) {
-      return result.value;
-    } else {
-      return Promise.resolve(result.value)
-      .then(onFulfilled, onRejected);
-    }
-  }
-  var generator = generatorFunc();
-  var onFulfilled = continuer.bind(continuer, "next");
-  var onRejected = continuer.bind(continuer, "throw");
-  return onFulfilled();
-}
-```
-
-… which I pretty much
-[lifted verbatim from Q](https://github.com/kriskowal/q/blob/db9220d714b16b96a05e9a037fa44ce581715e41/q.js#L500),
-but adapted for JavaScript promises. With this, we can take our final
-best-case chapter example, mix it with a load of new ES6 goodness, and turn
-it into:
-
-```js
-spawn(function *() {
-  try {
-    // 'yield' effectively does an async wait,
-    // returning the result of the promise
-    let story = yield getJSON('story.json');
-    addHtmlToPage(story.heading);
-
-    // Map our array of chapter urls to
-    // an array of chapter json promises.
-    // This makes sure they all download in parallel.
-    let chapterPromises = story.chapterUrls.map(getJSON);
-
-    for (let chapterPromise of chapterPromises) {
-      // Wait for each chapter to be ready, then add it to the page
-      let chapter = yield chapterPromise;
-      addHtmlToPage(chapter.html);
-    }
-
-    addTextToPage("All done");
-  }
-  catch (err) {
-    // try/catch just works, rejected promises are thrown here
-    addTextToPage("Argh, broken: " + err.message);
-  }
-  document.querySelector('.spinner').style.display = 'none';
-})
-```
-
-{% Glitch {
-  id: 'promises-async-generator-example',
-  height: 480
-} %}
-
-This works exactly as before but is so much easier to read. This works in Chrome
-and Opera today, and works in Microsoft Edge by going to `about:flags` and
-turning on the **Enable experimental JavaScript features** setting. This will be
-enabled by default in an upcoming version.
-
-This throws together a lot of new ES6 stuff: promises, generators, let, for-of.
-When we yield a promise, the spawn helper waits for the promise to resolve and
-returns the final value. If the promise rejects, spawn causes our yield
-statement to throw an exception, which we can catch with normal JavaScript
-try/catch. Amazingly simple async coding!
-
-This pattern is so useful, it's coming to ES7 in the form of
-[async functions](https://jakearchibald.com/2014/es7-async-functions/). It's
-pretty much the same as above, but no need for a `spawn` method.
-
-## Promise API reference {: #promise-api-reference }
-
-All methods work in Chrome, Opera, Firefox, Microsoft Edge, and Safari
-unless otherwise noted. The
-[polyfill](https://github.com/jakearchibald/ES6-Promises#readme) provides
-the below for all browsers.
-
-### Static Methods
-
-<div class="w-table-wrapper">
-<table>
-<thead>
-<tr>
-<th>Signature</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-  <td><code>Promise.resolve(promise);</code></td>
-  <td>Returns promise (only if <code>promise.constructor == Promise</code>)</td>
-</tr>
-<tr>
-  <td><code>Promise.resolve(thenable);</code></td>
-  <td>
-    Make a new promise from the thenable. A thenable is promise-like in as
-    far as it has a `then()` method.
-  </td>
-</tr>
-<tr>
-  <td><code>Promise.resolve(obj);</code></td>
-  <td>Make a promise that fulfills to <code>obj</code>. in this situation.</td>
-</tr>
-<tr>
-  <td><code>Promise.reject(obj);</code></td>
-  <td>
-    Make a promise that rejects to <code>obj</code>. For consistency and
-    debugging (e.g. stack traces), <code>obj</code> should be an
-    <code>instanceof Error</code>.
-  </td>
-</tr>
-<tr>
-  <td><code>Promise.all(array);</code></td>
-  <td>
-    Make a promise that fulfills when every item in the array fulfills, and
-    rejects if (and when) any item rejects. Each array item is passed to
-    <code>Promise.resolve</code>, so the array can be a mixture of
-    promise-like objects and other objects. The fulfillment value is
-    an array (in order) of fulfillment values. The rejection value is
-    the first rejection value.
-  </td>
-</tr>
-<tr>
-  <td><code>Promise.race(array);</code></td>
-  <td>
-    Make a Promise that fulfills as soon as any item fulfills, or rejects as
-    soon as any item rejects, whichever happens first.
-  </td>
-</tr>
-</tbody>
-</table>
-</div>
-
-Note: I'm unconvinced of `Promise.race`'s usefulness; I'd rather have an
-opposite of `Promise.all` that only rejects if all items reject.
-
-### Constructor
-
-<div class="w-table-wrapper">
-<table>
-<thead>
-<tr>
-<th>Signature</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-  <td><code>new Promise(function(resolve, reject) {});</code></td>
-  <td>
-    <p>
-      <code>resolve(thenable)</code><br>
-      Your promise will be fulfilled/rejected with the outcome of
-      <code>thenable</code>
-    </p>
-    <p>
-      <code>resolve(obj)</code><br>
-      Your promise is fulfilled with <code>obj</code>
-    </p>
-    <p>
-      <code>reject(obj)</code><br>
-      Your promise is rejected with <code>obj</code>. For consistency and
-      debugging (e.g., stack traces), obj should be an <code>instanceof
-      Error</code>.  Any errors thrown in the constructor callback will be
-      implicitly passed to <code>reject()</code>.
-    </p>
-  </td>
-</tr>
-</tbody>
-</table>
-</div>
-
-### Instance Methods
-
-<div class="w-table-wrapper">
-<table>
-<thead>
-<tr>
-<th>Signature</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-  <td><code>promise.then(onFulfilled, onRejected)</code></td>
-  <td>
-    <code>onFulfilled</code> is called when/if "promise" resolves.
-    <code>onRejected</code> is called when/if "promise" rejects. Both are
-    optional, if either/both are omitted the next
-    <code>onFulfilled</code>/<code>onRejected</code> in the chain is called.
-    Both callbacks have a single parameter, the fulfillment value or
-    rejection reason. <code>then()</code> returns a new promise equivalent to
-    the value you return from <code>onFulfilled</code>/<code>onRejected</code>
-    after being passed through <code>Promise.resolve</code>. If an error is
-    thrown in the callback, the returned promise rejects with that error.
-  </td>
-</tr>
-<tr>
-  <td><code>promise.catch(onRejected)</code></td>
-  <td>Sugar for <code>promise.then(undefined, onRejected)</code></td>
-</tr>
-</tbody>
-</table>
-</div>
+## Bonus round: expanded capabilities
 
-<div class="clearfix"></div>
+Since I originally wrote this article, the ability to use Promises has expanded
+greatly. Since Chrome 55, async functions have allowed promise-based code to be
+written as if it were synchronous, but without blocking the main thread. You can
+read more about that in [my async functions article](/async-functions). There's
+widespread support for both Promises and async functions in the major browsers.
+You can find the details in MDN's
+[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+and [async
+function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)
+reference.
 
 Many thanks to Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp,
 Addy Osmani, Arthur Evans, and Yutaka Hirano who proofread this and made
diff --git a/src/site/content/en/blog/promises/promise-flow.svg b/src/site/content/en/blog/promises/promise-flow.svg
deleted file mode 100644
index f6af6fee6f8..00000000000
--- a/src/site/content/en/blog/promises/promise-flow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459 422"><style>@import "https://fonts.googleapis.com/css?family=Reenie+Beanie"; .fill { fill: none; stroke: #4CA3CC; stroke-width: 17px; stroke-opacity: 0.32; } .box-text { font-size: 32px; line-height: 1; fill: #000000; font-family: Reenie Beanie; text-anchor: middle; } .box-outline { fill: none; stroke: #000000; stroke-width: 6.3; stroke-linejoin: round; } .joiner { fill: none; stroke: #000000; stroke-width: 3.8; stroke-linecap: round; } .pos { stroke: #0068FF; } .neg { stroke: #a00; }</style><g transform="translate(-58.5 -54.929)" class="box"><path d="M226 63.4l-158 5 164 15-157 2 152 13-160 2.6 164 11" class="fill"/><path d="M223 67.3l-140-3.9-1.97 46.9 141 .971-.117-30.8" class="box-outline"/><text y="95.567" x="153.244" class="box-text"><tspan y="95.567" x="153.244">asyncThing1</tspan></text></g><g transform="translate(-57.529 24.683)" class="box"><path d="M226 63.4l-158 5 164 15-157 2 152 13-160 2.6 164 11" class="fill"/><path d="M223 67.3l-140-3.9-1.97 46.9 141 .971-.117-30.8" class="box-outline"/><text y="95.567" x="153.244" class="box-text"><tspan x="153.244" y="95.567">asyncThing2</tspan></text></g><g transform="translate(-55.587 110.119)" class="box"><path d="M226 63.4l-158 5 164 15-157 2 152 13-160 2.6 164 11" class="fill"/><path d="M223 67.3l-140-3.9-1.97 46.9 141 .971-.117-30.8" class="box-outline"/><text y="95.567" x="153.244" class="box-text"><tspan y="95.567" x="153.244">asyncThing3</tspan></text></g><g transform="translate(145.383 27.595)" class="box"><path d="M261 65.4l-193 3 199 17h-192l187 14.6-195 1 199 13" class="fill"/><path d="M248 67.3l-165-3.9-1.97 46.9 179 .971-5.94-31.8" class="box-outline"/><text y="93.625" x="168.778" class="box-text"><tspan x="168.778" y="93.625">asyncRecovery1</tspan></text></g><g transform="translate(-56.558 191.673)" class="box"><path d="M226 63.4l-158 5 164 15-157 2 152 13-160 2.6 164 11" class="fill"/><path d="M223 67.3l-140-3.9-1.97 46.9 141 .971-.117-30.8" class="box-outline"/><text y="95.567" x="153.244" class="box-text"><tspan x="153.244" y="95.567">asyncThing4</tspan></text></g><g transform="translate(183.702 117.575)" class="box"><path d="M261 65.4l-193 3 199 17h-192l187 14.6-195 1 199 13" class="fill"/><path d="M248 67.3l-165-3.9-1.97 46.9 179 .971-5.94-31.8" class="box-outline"/><text y="93.625" x="168.778" class="box-text"><tspan y="93.625" x="168.778">asyncRecovery2</tspan></text></g><g transform="translate(159.617 189.869)" class="box"><path d="M228 64.4l-194 2.1 200 17.9-193-.9 198 16.5-208.9-.5 201.9 13.5-197.1 6 200.1 7-199.2 10 202.2 8" class="fill"/><path d="M223 69.2l-184-.942 6.77 72.1 176 1.94 7.65-59.9" class="box-outline"/><text y="97.508" x="133.826" class="box-text"><tspan x="133.826" y="97.508">log &quot;Don&apos;t worry</tspan><tspan x="133.826" y="129.508">about it&quot;</tspan></text></g><g transform="translate(-6.073 269.343)" class="box"><path d="M162 64.4l-128 3 134 17h-127l132 15.6h-142.9l138.9 13-139.9 5 143.9 8-149.8 11 152.8 7" class="fill"/><path d="M157 69.2l-111.9-.9-6.8 71.7 124.7-1-1-54.7" class="box-outline"/><text y="94.596" x="100.817" class="box-text"><tspan y="94.596" x="100.817">log</tspan><tspan y="126.596" x="100.817">&quot;All done!&quot;</tspan></text></g><path class="joiner pos" d="M93.8 60l.249 22.5"/><path class="joiner pos" d="M88.5 74l5.4 10.9 5.8-10.9"/><path class="joiner pos" d="M94.8 140l-1.22 27.4"/><path class="joiner pos" d="M88.1 160l5.7 11 6.2-11"/><path class="joiner pos" d="M94.6 225v25.7"/><path class="joiner pos" d="M89.3 241l5.3 10.9 5.08-9.92"/><path class="joiner pos" d="M94.8 306l-.727 25.3"/><path class="joiner pos" d="M88.3 323l5.56 10.4 5.55-9.92"/><path class="joiner neg" d="M168 35.9s67.5-12.4 72.1 48.5"/><path class="joiner neg" d="M233 76.7l7.74 9.19 4.12-9.43"/><path class="joiner neg" d="M169 116l52.9 1.7"/><path class="joiner neg" d="M211 111l11.6 6.04-12.3 5.81"/><path class="joiner neg" d="M170 202s69.3 14.1 68.4-54.9"/><path class="joiner neg" d="M232 153l6.04-10.2 5.33 11.6"/><path class="joiner pos" d="M257 142c-.971 120-108 55.4-111 110"/><path class="joiner pos" d="M143 244l2.18 9.68 7.74-7.25"/><path class="joiner neg" d="M169 282l22.9.244"/><path class="joiner neg" d="M187 276l9.93 5.8-10.4 5.57"/><path class="joiner neg" d="M310 141l-1.08 33.5"/><path class="joiner neg" d="M304 167l5.57 10.2 5.08-10.2"/><path class="joiner neg" d="M308 231v19"/><path class="joiner neg" d="M303 244l5.8 10.2 5.56-10.4"/><path class="joiner pos" d="M309 336c0 26.1-17 24.5-144 23"/><path class="joiner pos" d="M173 352l-10.7 6.04 10.2 5.8"/><path class="joiner pos" d="M419 233c1 161-20 160-256 159"/><path class="joiner pos" d="M173 386l-11.5 5.95 11.9 5.16"/></svg>
diff --git a/src/site/content/en/blog/proxx-announce/featurephone.jpg b/src/site/content/en/blog/proxx-announce/featurephone.jpg
deleted file mode 100644
index 5143d69dea7..00000000000
Binary files a/src/site/content/en/blog/proxx-announce/featurephone.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/proxx-announce/hero.jpg b/src/site/content/en/blog/proxx-announce/hero.jpg
deleted file mode 100644
index ce72fdabfcb..00000000000
Binary files a/src/site/content/en/blog/proxx-announce/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/proxx-announce/index.md b/src/site/content/en/blog/proxx-announce/index.md
index 02218ed5e6f..26a914f3bc1 100644
--- a/src/site/content/en/blog/proxx-announce/index.md
+++ b/src/site/content/en/blog/proxx-announce/index.md
@@ -4,7 +4,7 @@ subhead: A game of proximity, inspired by minesweeper.
 authors:
   - kosamari
 date: 2019-05-09
-hero: hero.jpg
+hero: image/admin/cQAxElnaPyIPqlB9wkrb.jpg
 alt: a logo image of PROXX.
 description: |
   PROXX as a minesweeper-like game built as a PWA. It works on a vast variety
@@ -12,7 +12,7 @@ description: |
   the device is.
 tags:
   - blog
-  - PROXX
+  # - PROXX
   - games
 ---
 
@@ -24,12 +24,12 @@ works on all kinds of devices—from desktop all the way to feature phones.
 Users can play the game using a mouse, keyboard, d-pad even with a screen
 reader.
 
-<figure class="w-figure w-figure--fullbleed">
+<figure data-size="full">
 <video controls autoplay loop muted poster="https://storage.googleapis.com/webfundamentals-assets/proxx-announce-blogpost/poster.jpg">
   <source src="https://storage.googleapis.com/webfundamentals-assets/proxx-announce-blogpost/kaios_vp8.webm" type="video/webm; codecs=vp8">
   <source src="https://storage.googleapis.com/webfundamentals-assets/proxx-announce-blogpost/kaios_x264.mp4" type="video/mp4; codecs=h264">
 </video>
- <figcaption class="w-figcaption w-figcaption--fullbleed">
+ <figcaption>
     PROXX on a feature phone.
   </figcaption>
 </figure>
@@ -43,14 +43,13 @@ application:
 - **Accessible**: mouse, keyboard, touch, d-pad, screen readers
 - **Performant**:
   - Less than 25kb of initial payload
-  - Less than 5 seconds TTI ([time to interactive](/interactive))
+  - Less than 5 seconds TTI ([time to interactive](/tti/))
     on slow 3G
   - Consistent 60fps animation
 
-<figure class="w-figure w-figure--fullbleed">
-  <img class="w-screenshot" src="pixelbook.jpg"
-       alt="A pixelbook running PROXX" class="screenshot">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ka9f7OrsFGjsulY1QoYe.jpg", alt="A pixelbook running PROXX", width="800", height="445" %}
+  <figcaption>
     PROXX on a pixelbook.
   </figcaption>
 </figure>
@@ -75,7 +74,7 @@ to HTML and saved as index.html
 ## Canvas for animation, (invisible) DOM For accessibility
 
 We render the game graphics in a canvas using
-[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). One canvas
+[WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API). One canvas
 is responsible for the background animation and another one canvas for the game
 grid on top. We also have an HTML table with buttons for accessibility reasons,
 that is on top of both of these canvases, but is made invisible (opacity: 0).
@@ -84,7 +83,7 @@ interacting with the invisible DOM table, giving us the ability to attach event
 listeners and rely on the browser's focus management.
 
 By keeping the DOM element in the canvas, we are able to tap into browsers
-native accessibility features. For example: by setting `role="grid"` on our game
+built-in accessibility features. For example: by setting `role="grid"` on our game
 table, screen readers can announce the row and column of the focused cell
 without us having to implement that.
 
@@ -106,10 +105,9 @@ highly responsive on these phones as well. Since feature phones come with
 different input interface (d-pad and number keys, no touchscreen), we also
 implemented key-based interface.
 
-<figure class="w-figure w-figure--fullbleed">
-  <img src="featurephone.jpg"
-       alt="A man playing PROXX on a yellow feature phone" class="screenshot">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zk0lWvjbZ0V2Shz53d42.jpg", alt="A man playing PROXX on a yellow feature phone", width="800", height="512" %}
+  <figcaption>
     PROXX on a feature phone.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/blog/proxx-announce/pixelbook.jpg b/src/site/content/en/blog/proxx-announce/pixelbook.jpg
deleted file mode 100644
index 89d0a37d249..00000000000
Binary files a/src/site/content/en/blog/proxx-announce/pixelbook.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/ps-on-the-web/index.md b/src/site/content/en/blog/ps-on-the-web/index.md
new file mode 100644
index 00000000000..bdbff47c75d
--- /dev/null
+++ b/src/site/content/en/blog/ps-on-the-web/index.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: Photoshop's journey to the web
+subhead: >
+  The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web.
+authors:
+  - nattestad
+  - nabeelalshamma
+description: >
+  Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web.
+date: 2021-10-26
+updated: 2022-05-12
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/pYiISdhsJe3oEL871Dqp.png
+alt: A part of Photoshop's user interface.
+tags:
+  - blog
+  - capabilities
+---
+
+Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web.
+
+{% YouTube "CF5zZZy0R9U" %}
+
+(If you prefer watching over reading, this article is also available as a
+[video](https://www.youtube.com/watch?v=CF5zZZy0R9U).)
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/kfFAUTzDHzvE3hXISyQO.png", alt="The Photoshop web app running in a browser with an image showing an elephant on the canvas and the 'selection tools' menu item open. ", width="800", height="500" %}
+
+In this post, we'd like to share for the first time the details of how our collaboration is extending Photoshop to the web. You can use all the APIs Adobe used and more in your own apps as well. Be sure to check out our [web capabilities related blog posts](/tags/capabilities/) for inspiration and watch our [API tracker](https://fugu-tracker.web.app/) for the latest and greatest we're working on.
+
+## Why Photoshop came to the web
+
+As the web has evolved, one thing that hasn't changed are the core advantages that websites and web apps offer over platform-specific applications. These advantages include many unique capabilities such as being linkable, ephemeral, and universal, but they boil down to enabling simple access, easy sharing, and great collaboration.
+
+The simple power of a URL is that anyone can click it and instantly access it. All you need is a browser. There is no need to install an application or worry about what operating system you are running on. For web applications, that means users can have access to the application and their documents and comments. This makes the web the ideal collaboration platform, something that is becoming more and more essential to creative and marketing teams.
+
+[Google Docs](https://docs.google.com/) was a pioneer of this simplified access. Most of us know how easy it is to start a document, send the link to someone, and immediately jump into not only the application, but the specific document or comment as well. Since then, a plethora of amazing applications, such as [those we've shown off in the past](https://www.youtube.com/watch?v=Nrm5G9A_dfs), have adopted this model and now Photoshop, too, will benefit.
+
+## How Photoshop came to the web
+
+The web started out as a platform only suited for documents, but has grown dramatically throughout its history. Early apps like [Gmail](https://www.google.com/gmail/) showed that more complex interactivity and applications were at least possible. Since then, we've seen impressive co-development where web apps push the boundaries of what's possible, and browser vendors respond by further expanding web capabilities. The latest iteration of this virtuous loop is what has enabled Photoshop on the web.
+
+Adobe previously brought [Spark](https://spark.adobe.com/sp/) and [Lightroom](https://lightroom.adobe.com/) to the web and had been interested in bringing Photoshop to the web for many years. However, they were blocked by the performance limitations of JavaScript, the absence of a good compile target for their code, and the lack of web capabilities. Read on to learn what Chrome built in the browser to solve these problems.
+
+## WebAssembly porting with Emscripten
+
+WebAssembly and its C++ toolchain [Emscripten](https://emscripten.org/) have been the key to unlocking Photoshop's ability to come to the web, as it meant that Adobe would not have to start from scratch, but could leverage their existing Photoshop codebase. WebAssembly is a portable binary instruction set shipping in all browsers that was designed as a compilation target for programming languages. This means that applications such as Photoshop that are written in C++ can be ported directly to the web without requiring a rewrite in JavaScript. To get started porting yourself, check out the full [Emscripten documentation](https://emscripten.org/docs/index.html), or follow this [guided example of how to port a library](/emscripting-a-c-library/).
+
+Emscripten is a fully-featured toolchain that not only helps you compile your C++ to Wasm, but provides a translation layer that turns POSIX API calls into web API calls and even converts OpenGL into WebGL. For example, you can port applications that reference the local filesystem and [Emscripten will provide an emulated file system](https://emscripten.org/docs/porting/files/file_systems_overview.html#file-system-overview) to maintain functionality.
+
+Emscripten has been capable of bringing most parts of Photoshop to the web for a while, but it wasn't necessarily fast enough. We have continually worked with Adobe to figure out where bottlenecks are and improve Emscripten. Photoshop depends upon multithreading. Bringing dynamic [multithreading](https://emscripten.org/docs/porting/pthreads.html) to WebAssembly was a critical requirement.
+
+Also, exception-based error handling is very common in C++, but wasn't well supported in Emscripten and WebAssembly. We have worked with the [WebAssembly Community Group](https://www.w3.org/community/webassembly/) in the W3C to improve the WebAssembly standard and the tooling around it to bring C++ exceptions to WebAssembly.
+
+Emscripten doesn't just work on large applications, but also lets you port libraries or smaller projects! For example, you can see [how you can compile the popular OpenCV library](https://docs.opencv.org/3.4/d4/da1/tutorial_js_setup.html) to the web through Emscripten.
+
+Lastly, WebAssembly offers advanced performance primitives such as [SIMD instructions](https://emscripten.org/docs/porting/simd.html) which dramatically improve your web app performance. For example, [Halide](https://halide-lang.org/) is essential to Adobe's performance, and here SIMD provides a 3–4× speedup on average and in some cases a 80–160× speedup.
+
+## WebAssembly debugging
+
+No large project can be successfully completed without the appropriate tools for the job, and it's for this reason that the Chrome team developed full featured WebAssembly debugging support. It provides support for stepping through the source code, setting breakpoints and pausing on exceptions, variable inspection with rich type support, and even basic support for evaluation in the DevTools console!
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/ZwSsG07jcIvFZOdid5yd.png", alt="WebAssembly debugging in DevTools showing breakpoints in the code so it can be stepped through.", width="800", height="325" %}
+
+Be sure to check out the [authoritative guide on how to utilize WebAssembly Debugging](https://developer.chrome.com/blog/wasm-debugging-2020/).
+
+## High performance storage
+
+Given how large Photoshop documents can be, a critical need for Photoshop is the ability to dynamically move data from on-disk to in-memory as the user pans around. On other platforms, this is accomplished usually through memory mapping via [`mmap`](https://en.wikipedia.org/wiki/Mmap), but this hasn't been performantly possible on the web—that is until origin private file system access handles were developed and implemented as an origin trial! You can read how to leverage this new API [in the documentation](/file-system-access/#accessing-files-optimized-for-performance-from-the-origin-private-file-system).
+
+## P3 color space for canvas
+
+Historically, colors on the web have been specified in the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space, which is a standard from the mid-nineties, based on the capabilities of cathode-ray tube monitors. Cameras and monitors have come a long way in the intervening quarter-century, and many larger and more capable color spaces have been standardized. One of the most popular modern color spaces is [Display P3](https://en.wikipedia.org/wiki/DCI-P3). Photoshop uses a [Display P3 Canvas](https://github.com/WICG/canvas-color-space/blob/main/CanvasColorSpaceProposal.md) to display images more accurately in the browser. In particular, images with bright whites, bright colors, and details in shadows will display as best as possible on modern displays that support Display P3 data.
+The Display P3 Canvas API is being further built upon to enable [high dynamic range](https://github.com/w3c/ColorWeb-CG/blob/master/hdr_html_canvas_element.md) displays.
+
+## Web Components and Lit
+
+Photoshop is a famously large and feature-rich application, with hundreds of UI elements supporting dozens of workflows. The app is built by multiple teams using a variety of tools and development practices, but its disparate parts need to come together into a cohesive, high-performing whole.
+
+To meet this challenge, Adobe turned to [Web Components](https://developer.mozilla.org/docs/Web/Web_Components) and the [Lit library](https://lit.dev). Photoshop's UI elements come from Adobe's [Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) library, a lightweight, performant implementation of the Adobe design system that works with any framework, or no framework at all.
+
+What's more, the entire Photoshop app is built using Lit-based Web Components. Leaning on the browser's built-in component model and Shadow DOM encapsulation, the team found it easy to cleanly integrate a few "islands" of React code provided by other Adobe teams.
+
+## Service worker caching with Workbox
+
+[Service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) act as a programmable local proxy, intercepting network requests and responding with data from the network, long-lived caches, or a mixture of both.
+
+As part of the [V8](https://v8.dev/) team's efforts to improve performance, the first time a service worker responds with a cached WebAssembly response, Chrome generates and stores an optimized version of the code—even for multi-megabyte WebAssembly scripts, which are common in the Photoshop codebase. A similar precompilation takes place when [JavaScript is cached](https://v8.dev/blog/code-caching-for-devs#use-service-worker-caches) by a service worker during its [`install` step](/service-worker-lifecycle/#install). In both cases, Chrome is able to load and execute the optimized versions of cached scripts with minimal runtime overhead.
+
+Photoshop on the web takes advantage of this by deploying a service worker that precaches many of its JavaScript and WebAssembly scripts. Because the URLs for these scripts are generated at build time, and because the logic of keeping caches up to date can be complex, they turned to a set of libraries maintained by Google called [Workbox](https://developer.chrome.com/docs/workbox/) to generate their service worker as part of their build process.
+
+A Workbox-based service worker along with the V8 engine's script caching led to measurable performance improvements. The specific numbers vary based on the device executing the code, but the team estimates these optimizations decreased the time spent on code initialization by 75%.
+
+## What's next for Adobe on the web
+
+The launch of the Photoshop beta is just the beginning, and we've got several performance and feature improvements already underway as Photoshop tracks towards their full launch after this beta. Adobe isn't stopping with Photoshop and plans to aggressively expand [Creative Cloud](https://www.adobe.com/creativecloud.html) to the web, making it a primary platform for both creative content creation and collaboration. This will enable millions of first-time creators to tell their story and benefit from innovative workflows on the web.
+
+As Adobe continues to push the boundaries of what's possible, the Chrome team will continue our collaboration to drive the web forward for Adobe and the vibrant web developer ecosystem in general. As other browsers also catch up on these modern browser capabilities, we're excited to see Adobe make their products available there as well. Stay tuned for future updates as we continue to push the web forward!
+
+You can learn more about accessing Photoshop on the web (beta) in the [Adobe Help Center](https://helpx.adobe.com/photoshop/using/photoshop-web-faq.html).
diff --git a/src/site/content/en/blog/push-notifications-client-codelab/index.md b/src/site/content/en/blog/push-notifications-client-codelab/index.md
new file mode 100644
index 00000000000..0e83c24b4fd
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-client-codelab/index.md
@@ -0,0 +1,348 @@
+---
+layout: codelab
+title: "Codelab: Build a push notification client"
+authors: 
+  - kaycebasques
+  - katejeffreys
+description: >
+  A step-by-step interactive tutorial that shows you how to build a
+  client that subscribes the user to push notifications,
+  displays push messages as notifications, and unsubscribes the user
+  from push notifications.
+date: 2020-11-11
+updated: 2020-12-06
+glitch: push-notifications-client-codelab-incomplete
+related_post: push-notifications-overview
+tags:
+  - notifications
+  - service-worker
+  - progressive-web-apps
+  - permissions
+  - mobile
+  - network
+  - capabilities
+---
+
+This codelab shows you, step-by-step, how to build a push notification client.
+By the end of the codelab you'll have a client that:
+
+* Subscribes the user to push notifications.
+* Receives push messages and displays them as notifications.
+* Unsubscribes the user from push notifications.
+
+This codelab is focused on helping you learn by doing and doesn't
+talk about concepts much. Check out 
+[How do push notifications work?](/push-notifications-overview/#how)
+to learn about push notification concepts.
+
+The server code of this codelab is already complete. You'll only be
+implementing the client in this codelab. To learn how to implement a
+push notification server, check out [Codelab: Build a push notification
+server](/push-notifications-server-codelab).
+
+Check out [push-notifications-client-codelab-complete](https://push-notifications-client-codelab-complete.glitch.me/)
+([source](https://glitch.com/edit/#!/push-notifications-client-codelab-complete))
+to see the complete code.
+
+## Browser compatibility {: #browser-compatibility }
+
+This codelab is known to work with the following operating system and browser combinations:
+
+* Windows: Chrome, Edge
+* macOS: Chrome, Firefox
+* Android: Chrome, Firefox
+
+This codelab is known to **not** work with the following operating systems
+(or operating system and browser combinations):
+
+* macOS: Brave, Edge, Safari
+* iOS
+
+## Setup {: #setup }
+
+### Get an editable copy of the code {: #remix }
+
+The code editor that you see to the right of these instructions will be called
+the **Glitch UI** throughout this codelab.
+
+{% Instruction 'remix', 'ol' %}
+
+{% Aside 'gotchas' %}
+  If you're in a Chrome incognito or guest window, you may have
+  trouble completing the codelab. Consider using a signed-in
+  profile instead.
+{% endAside %}
+
+### Set up authentication {: #authentication }
+
+Before you can get push notifications working, you need to set up
+your server and client with authentication keys.
+See [Sign your web push protocol requests](/push-notifications-overview/#sign)
+to learn why.
+
+1. In the Glitch UI click **Tools** and then click **Terminal** to open the Glitch Terminal.
+1. In the Glitch Terminal, run `npx web-push generate-vapid-keys`. Copy the private key
+   and public key values.
+1. In the Glitch UI open `.env` and update `VAPID_PUBLIC_KEY` and `VAPID_PRIVATE_KEY`. Set
+   `VAPID_SUBJECT` to `mailto:test@test.test`. All of these values should be wrapped
+   in double quotes. After making your updates, your `.env` file should look
+   similar to this:
+
+```text
+VAPID_PUBLIC_KEY="BKiwTvD9HA…"
+VAPID_PRIVATE_KEY="4mXG9jBUaU…"
+VAPID_SUBJECT="mailto:test@test.test"
+```
+
+1. Close the Glitch Terminal.
+
+{% Aside 'gotchas' %}
+  Environment variable values (the stuff in `.env`) are unique to a single Glitch project.
+  If you remix your project, the values in `.env` won't get copied over.
+{% endAside %}
+
+1. Open `public/index.js`.
+1. Replace `VAPID_PUBLIC_KEY_VALUE_HERE` with the value of your public key.
+
+## Register a service worker
+
+Your client will eventually need a service worker to receive and display
+notifications. It's best to register the service worker as early as possible.
+See [Receive and display the pushed messages as 
+notifications](/push-notifications-overview/#notification) for more context.
+
+1. Replace the `// TODO add startup logic here` comment with the following code:
+
+```js/1-15/0
+// TODO add startup logic here
+if ('serviceWorker' in navigator && 'PushManager' in window) {
+  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
+    console.info('Service worker was registered.');
+    console.info({serviceWorkerRegistration});
+  }).catch(error => {
+    console.error('An error occurred while registering the service worker.');
+    console.error(error);
+  });
+  subscribeButton.disabled = false;
+} else {
+  console.error('Browser does not support service workers or push messages.');
+}
+
+subscribeButton.addEventListener('click', subscribeButtonHandler);
+unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
+```
+
+{% Instruction 'preview', 'ol' %}
+
+{% Aside 'key-term' %}
+  The tab that you just opened will be referred to as the **app tab**
+  throughout this codelab.
+{% endAside %}
+
+{% Instruction 'devtools-console', 'ol' %} You should see the message
+`Service worker was registered.` logged to the Console.
+
+{% Aside %}
+  The previous instruction assumes that you're using Google Chrome and
+  Chrome DevTools.
+{% endAside %}
+
+
+## Request push notification permission
+
+You should never request permission to send push notifications on page load.
+Instead, your UI should ask the user if they want to receive push notifications.
+Once they explicitly confirm (with a button click, for example) then you can
+start the formal process for getting push notification permission from the browser.
+
+1. In the Glitch UI click **View Source** to return to your code.
+1. In `public/index.js` replace the `// TODO` comment in 
+   `subscribeButtonHandler()` with the following code:
+
+```js/1-10/0
+// TODO
+// Prevent the user from clicking the subscribe button multiple times.
+subscribeButton.disabled = true;
+const result = await Notification.requestPermission();
+if (result === 'denied') {
+  console.error('The user explicitly denied the permission request.');
+  return;
+}
+if (result === 'granted') {
+  console.info('The user accepted the permission request.');
+}
+```
+
+1. Go back to the app tab and click **Subscribe to push**. Your browser
+   or operating system will probably ask you if you want to let the website
+   send you push notifications. Click **Allow** (or whatever equivalent phrase
+   your browser/OS uses). In the Console you should see a message indicating
+   whether the request was accepted or denied.
+
+{% Aside 'gotchas' %}
+  If you're in an incognito or guest window, your browser may deny the
+  request automatically. Keep an eye out for any browser UI indicating that
+  the request was blocked automatically.
+{% endAside %}
+
+## Subscribe to push notifications
+
+The subscription process involves interacting with a web service controlled
+by the browser vendor that's called a **push service**. Once you get
+the push notification subscription information you need to send it to a server
+and have the server store it in a database long-term.
+See [Subscribe the client to push notifications](/push-notifications-overview/#subscription)
+for more context about the subscription process.
+
+1. Add the following highlighted code to `subscribeButtonHandler()`:
+
+```js/9-28
+subscribeButton.disabled = true;
+const result = await Notification.requestPermission();
+if (result === 'denied') {
+  console.error('The user explicitly denied the permission request.');
+  return;
+}
+if (result === 'granted') {
+  console.info('The user accepted the permission request.');
+}
+const registration = await navigator.serviceWorker.getRegistration();
+const subscribed = await registration.pushManager.getSubscription();
+if (subscribed) {
+  console.info('User is already subscribed.');
+  notifyMeButton.disabled = false;
+  unsubscribeButton.disabled = false;
+  return;
+}
+const subscription = await registration.pushManager.subscribe({
+  userVisibleOnly: true,
+  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
+});
+notifyMeButton.disabled = false;
+fetch('/add-subscription', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify(subscription)
+});
+```
+
+The `userVisibleOnly` option must be `true`. It may one day be possible
+to push messages without displaying user-visible notifications
+(**silent pushes**) but browsers currently don't allow that capability
+because of privacy concerns. 
+
+The `applicationServerKey` value relies on a utility function that
+converts a base64 string to a Uint8Array. This value is used for
+authentication between your server and the push service.
+
+## Unsubscribe from push notifications
+
+After a user has subscribed to push notifications, your UI needs to
+provide a way to unsubscribe in case the user changes their mind
+and no longer wants to receive push notifications.
+
+1. Replace the `// TODO` comment in `unsubscribeButtonHandler()`
+   with the following code:
+
+```js/1-16/0
+// TODO
+const registration = await navigator.serviceWorker.getRegistration();
+const subscription = await registration.pushManager.getSubscription();
+fetch('/remove-subscription', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify({endpoint: subscription.endpoint})
+});
+const unsubscribed = await subscription.unsubscribe();
+if (unsubscribed) {
+  console.info('Successfully unsubscribed from push notifications.');
+  unsubscribeButton.disabled = true;
+  subscribeButton.disabled = false;
+  notifyMeButton.disabled = true;
+}
+```
+
+## Receive a push message and display it as a notification
+
+As mentioned before, you need a service worker to handle the
+receiving and displaying of messages that were pushed to the client
+from your server. See [Receive and display the pushed messages as 
+notifications](/push-notifications-overview/#notification) for more detail.
+
+1. Open `public/service-worker.js` and replace the `// TODO` comment 
+   in the service worker's `push` event handler with the following code:
+
+```js/1-12/0
+// TODO
+let data = event.data.json();
+const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
+const options = {
+  body: data.options.body,
+  icon: image
+}
+self.registration.showNotification(
+  data.title, 
+  options
+);
+```
+
+1. Go back to the app tab.
+1. Click **Notify me**. You should receive a push notification.
+1. Try opening the URL of your app tab on other browsers (or even
+   other devices), going through the subscription workflow, and then
+   clicking **Notify all**. You should receive the same push notification
+   on all of the browsers that you subscribed. Refer back to
+   [Browser compatibility](#browser-compatibility) to see a list of browser/OS
+   combinations that are known to work or not work.
+
+You can customize the notification in lots of ways. See the parameters of
+[`ServiceWorkerRegistration.showNotification()`][showNotification] to learn more.
+
+{% Aside 'gotchas' %}
+  The call to 
+  [`self.skipWaiting()`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) 
+  in your service worker's `install` listener is important to understand. See 
+  [Skip the waiting phase](/service-worker-lifecycle/#skip-the-waiting-phase) 
+  for an explanation. Without it, the code changes that you make to your service worker
+  wouldn't take effect immediately. You may or may not want to use this feature on 
+  your own website depending on your needs, but either way it's important to understand its effect.
+{% endAside %}
+
+## Open a URL when a user clicks a notification
+
+In the real-world, you'll probably use the notification as a way
+to re-engage your user and prompt them to visit your site.
+To do that, you need to configure your service worker a bit more.
+
+1. Replace the `// TODO` comment in the service worker's `notificationclick`
+   event handler with the following code:
+
+```js/1-2/0
+// TODO
+event.notification.close();
+event.waitUntil(self.clients.openWindow('https://web.dev'));
+```
+
+1. Go back to the app tab, send yourself another notification, and then
+   click the notification. Your browser should open a new tab and load
+   `https://web.dev`.
+
+## Next steps
+
+* Look at [`ServiceWorkerRegistration.showNotification()`][showNotification]
+  to discover all of the different ways you can customize notifications.
+* Read [Push notifications overview](/push-notifications-overview)
+  for a deeper conceptual understanding of how push notifications work.
+* Check out [Codelab: Build a push notification server](/push-notifications-server-codelab/)
+  to learn how to build a server that manages subscriptions and sends web push protocol
+  requests.
+* Try out [Notification Generator](https://tests.peter.sh/notification-generator/)
+  to test out all the ways you can customize notifications.
+
+[showNotification]: https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification
+[skipWaiting]: https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting
+[skip]: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase
\ No newline at end of file
diff --git a/src/site/content/en/blog/push-notifications-common-issues-and-reporting-bugs/index.md b/src/site/content/en/blog/push-notifications-common-issues-and-reporting-bugs/index.md
new file mode 100644
index 00000000000..67220a7c404
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-common-issues-and-reporting-bugs/index.md
@@ -0,0 +1,300 @@
+---
+title: Common Issues and Reporting Bugs
+description: >
+  There are right ways of using notifications, and ways of using them better. Learn what makes a good notification. We won't just show you what to do. We'll show you how to do it.
+authors:
+  - mattgaunt
+date: 2017-03-30
+updated: 2019-06-15
+tags:
+  - notifications
+---
+
+When you hit an issue with web push, it can be difficult to debug the issue or
+find help. This doc outlines some of the common issues and what you should
+do if you've found a bug in Chrome or Firefox.
+
+Before we dive into debugging push, you may be hitting issues with debugging
+service workers themselves, the file not updating, failing to register or
+generally just unusual behavior. There is an
+[awesome document on debugging service workers](/web/fundamentals/getting-started/codelabs/debugging-service-workers/)
+that I strongly recommend checking out if you are new to
+service worker development.
+
+There are two distinct stages to check off when developing and testing web push,
+each with its own set of common issues / problems:
+
+- **Sending a Message:** Make sure that sending messages is successful.
+  You should be getting a 201 HTTP code. If you aren't :
+  - **Check for Authorization Errors:** If you receive an authorization
+    error message see the
+    [Authorization Issues section](#authorization-issues).
+  - **Other API Errors:** If you receive a non-201 status code response,
+    see the [HTTP Status Codes section](#http-status-codes) for
+    guidance on the cause of the issue.
+- **Receiving a Message**: If you're able to send a message successfully,
+  but the message is not received on the browser:
+  - **Check for Encryption Issues:** See the [Payload Encryption
+    Issue Section](#payload-encryption-issue).
+  - **Check for Connection Issues:** If the problem is on Chrome, it
+    may be a connection. See [Connection Issues section](#connection-issue)
+    for more info.
+
+If you aren't able to send and receive a push message and the relevant sections
+in this doc aren't helping debug the problem then you may have found a
+bug in the push mechanism itself. In this case, refer to the
+[Raising Bug Reports](#raising-bug-reports)
+section to file a good bug report with all the necessary information to expedite
+the bug fixing process.
+
+One thing I'd like to call out before we start is that **Firefox and the
+Mozilla AutoPush Service have great error messages.** If you get stuck and
+are not sure what the problem is, then test in Firefox and see if you
+get a more helpful error message.
+
+## Authorization issues
+
+Authorization issues are one of the most common issues developers hit when
+starting out with web push. This is normally a problem with the configuration of a
+site's [Application Server Keys (a.k.a. VAPID keys)
+](https://tools.ietf.org/html/draft-ietf-webpush-vapid-02).
+
+The easiest way to support push in both Firefox and Chrome is to supply an
+`applicationServerKey` in the `subscribe()` call. The down side is that
+any discrepancy between your front end and server's keys will result in an
+authorization error.
+
+### On Chrome and FCM
+
+For Chrome, which uses FCM as a push service, you'll receive an
+`UnauthorizedRegistration` response from FCM for a range of different
+errors, all involving the application server keys.
+
+You'll receive an `UnauthorizedRegistration` error in any of the following
+situations:
+
+- If you fail to define an `Authorization` header in the request to FCM.
+- Your application key used to subscribe the user doesn't match the key used
+  to sign the Authorization header.
+- The expiration is invalid in your JWT, i.e. the expiration exceeds 24 hours or
+  the JWT has expired.
+- The JWT is malformed or has invalid values.
+
+The full error response looks like this:
+
+```html
+<html>
+  <head>
+    <title>UnauthorizedRegistration</title>
+  </head>
+  <body bgcolor="#FFFFFF" text="#000000">
+    <h1>UnauthorizedRegistration</h1>
+
+    <h2>Error 400</h2>
+  </body>
+</html>
+```
+
+If you receive this error message in Chrome, consider testing in Firefox to see
+if it'll provide more insight to the problem.
+
+### Firefox and Mozilla AutoPush
+
+Firefox and Mozilla AutoPush provide a friendly set of error messages for
+`Authorization` issues.
+
+You'll also receive an `Unauthorized` error response from
+Mozilla AutoPush if the `Authorization` header is not included in your push
+request.
+
+```json
+{
+  "errno": 109,
+  "message": "Request did not validate missing authorization header",
+  "code": 401,
+  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
+  "error": "Unauthorized"
+}
+```
+
+If the expiration in your JWT has expired, you'll also receive an
+`Unauthorized` error with a message that explains that the token has
+expired.
+
+```json
+{
+  "code": 401,
+  "errno": 109,
+  "error": "Unauthorized",
+  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
+  "message": "Request did not validate Invalid bearer token: Auth expired"
+}
+```
+
+If the application server keys are different between when the user was
+subscribed and when the Authorization header was signed, a `Not Found`
+error will be returned:
+
+```json
+{
+  "errno": 102,
+  "message": "Request did not validate invalid token",
+  "code": 404,
+  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
+  "error": "Not Found"
+}
+```
+
+Lastly, if you have an invalid value in your JWT (for example if the "alg" value
+is an unexpected value), you'll receive the following error from Mozilla
+AutoPush:
+
+```json
+{
+  "code": 401,
+  "errno": 109,
+  "error": "Unauthorized",
+  "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes",
+  "message": "Request did not validate Invalid Authorization Header"
+}
+```
+
+## HTTP status codes
+
+There are a range of issues that can result in a non-201 response code from a
+push service. Below is a list of HTTP status codes and what they mean in relation
+to web push.
+
+<table>
+<tr>
+<th>Status Code</th>
+<th>Description</th>
+</tr>
+<tr>
+<td>429</td>
+<td>Too many requests. Your application server has reached a rate limit with a
+push service. The response from the service should include a 'Retry-After' header to
+indicate how long before another request can be made.</td>
+</tr>
+<tr>
+<td>400</td>
+<td>Invalid request. One of your headers is invalid or
+poorly formatted.</td>
+</tr>
+<tr>
+<td>404</td>
+<td>Not Found. In this case you should delete the PushSubscription from your
+back end and wait for an opportunity to resubscribe the user.</td>
+</tr>
+<tr>
+<td>410</td>
+<td>Gone. The subscription is no longer valid and should be removed from your
+back end. This can be reproduced by calling `unsubscribe()` on a
+`PushSubscription`.</td>
+</tr>
+<tr>
+<td>413</td>
+<td>Payload size too large. The minimum size payload a push service must
+support is 4096 bytes (or 4kb). Anything larger can result in this error.</td>
+</tr>
+</table>
+
+If the HTTP status code is not in this list and the error message is not
+helpful, check the [Web Push Protocol
+spec](https://tools.ietf.org/html/draft-ietf-webpush-protocol) to see if the
+status code is referenced along with a scenario of when that status code can
+be used.
+
+## Payload encryption issue
+
+If you can successfully trigger a push message (i.e. send a message to a web
+push service and receive a 201 response code) but the push event never fires in
+your service worker, this normally indicates that the browser failed to
+decrypt the message it received.
+
+If this is the case, you should see an error message in Firefox's DevTools
+console like so:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/g8VpxsP7PMWPSdtSvAkY.png", alt="Firefox DevTools with decryption message.", width="800", height="269" %}
+
+To check if this is the issue in Chrome, do the following:
+
+1. Go to about://gcm-internals and click the "Start Recording" button.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/VH4juz336de2yiInKjUO.png", alt="Chrome GCM internals record.", width="800", height="226" %}
+
+1. Trigger a push message, and look under the "Message Decryption Failure Log".
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/DszP9aaiMTmX5LdTXKPx.png", alt="GCM internals decryption log.", width="800", height="155" %}
+
+If there is an issue with the decryption of the payload, you'll see an error
+similar to the one displayed above. (Notice the `AES-GCM decryption failed`
+message in the details column.)
+
+There are a few tools which may help debug encryption if this is your issue:
+
+- [Push Encryption Verifier tool by Peter Beverloo](https://tests.peter.sh/push-encryption-verifier/).
+- [Web Push: Data Encryption Test Page by Mozilla](https://mozilla-services.github.io/WebPushDataTestPage/)
+
+## Connection issue
+
+If you aren't receiving a push event in your service worker and you aren't
+seeing any decryption errors, then the browser may be failing to connect to
+a push service.
+
+In Chrome, you can check whether the browser is receiving messages by examining
+the 'Receive Message Log' (sic) in `about://gcm-internals`.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/vRKzAO05KD5vUpQ6nL3z.png", alt="GCM internals receive message log.", width="800", height="117" %}
+
+If you aren't seeing the message arrive in a timely fashion, then make sure that
+the connection status of your browser is `CONNECTED`:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/YdYj19Kn0zl6Jlfbm9hg.png", alt="GCM internals connection state.", width="584", height="246" %}
+
+If it's **not** 'CONNECTED', you may need to delete your current profile and
+[create a new one](https://support.google.com/chrome/answer/2364824). If that
+still doesn't solve the issue, please raise a bug report as suggested below.
+
+## Raising bug reports
+
+If none of the above helps with your issue and there is no sign of what the
+problem could be, please raise an issue against the browser you are having an
+issue with:
+
+For Chrome, you'd raise the issue here:
+[https://bugs.chromium.org/p/chromium/issues/list](https://bugs.chromium.org/p/chromium/issues/list)
+For Firefox, you should raise the issue on:
+[https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+
+To provide a good bug report, you should provide the following details:
+
+- Browsers you've tested in (e.g. Chrome version 50, Chrome version 51, Firefox
+  version 50, Firefox version 51).
+- An example `PushSubscription` that demonstrates the problem.
+- Include any example requests (i.e. content of network requests to a push
+  service, including headers).
+- Include any example responses from network requests as well.
+
+If you can provide a reproducible example, either source code or a hosted web
+site, it often speeds up diagnosing and solving the problem.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* Common Issues and Reporting Bugs
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-common-notification-patterns/index.md b/src/site/content/en/blog/push-notifications-common-notification-patterns/index.md
new file mode 100644
index 00000000000..c45e4c442a2
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-common-notification-patterns/index.md
@@ -0,0 +1,440 @@
+---
+title: Common notification patterns
+authors:
+  - mattgaunt
+date: 2016-06-30
+updated: 2019-06-14
+tags:
+  - notifications
+---
+
+We're going to look at some common implementation patterns for web push.
+
+This will involve using a few different APIs that are available in the service worker.
+
+## Notification close event
+
+In the last section we saw how we can listen for `notificationclick` events.
+
+There is also a `notificationclose` event that is called if the user dismisses one of your
+notifications (i.e. rather than clicking the notification, the user clicks the cross or swipes the
+notification away).
+
+This event is normally used for analytics to track user engagement with notifications.
+
+```js
+self.addEventListener('notificationclose', function (event) {
+  const dismissedNotification = event.notification;
+
+  const promiseChain = notificationCloseAnalytics();
+  event.waitUntil(promiseChain);
+});
+```
+
+## Adding data to a notification
+
+When a push message is received it's common to have data that is only
+useful if the user has clicked the notification. For example, the URL
+that should be opened when a notification is clicked.
+
+The easiest way to take data from a push event and attach it to a
+notification is to add a `data` parameter to the options object passed
+into `showNotification()`, like so:
+
+```js
+const options = {
+  body:
+    'This notification has data attached to it that is printed ' +
+    "to the console when it's clicked.",
+  tag: 'data-notification',
+  data: {
+    time: new Date(Date.now()).toString(),
+    message: 'Hello, World!',
+  },
+};
+registration.showNotification('Notification with Data', options);
+```
+
+Inside a click handler, the data can be accessed with `event.notification.data`.
+
+```js
+const notificationData = event.notification.data;
+console.log('');
+console.log('The notification data has the following parameters:');
+Object.keys(notificationData).forEach((key) => {
+  console.log(`  ${key}: ${notificationData[key]}`);
+});
+console.log('');
+```
+
+## Open a window
+
+One of the most common responses to a notification is to open a
+window / tab to a specific URL. We can do this with the
+[`clients.openWindow()`](https://developer.mozilla.org/docs/Web/API/Clients/openWindow)
+API.
+
+In our `notificationclick` event, we'd run some code like this:
+
+```js
+const examplePage = '/demos/notification-examples/example-page.html';
+const promiseChain = clients.openWindow(examplePage);
+event.waitUntil(promiseChain);
+```
+
+In the next section, we'll look at how to check if the page we want to direct the user to is
+already open or not. This way, we can focus the open tab rather than opening new
+tabs.
+
+## Focus an existing window
+
+When it's possible, we should focus a window rather than open a new window every time the user
+clicks a notification.
+
+Before we look at how to achieve this, it's worth highlighting that this
+is **only possible for pages on your origin**. This is because we can
+only see what pages are open that belong to our site. This prevents
+developers from being able to see all the sites their users are viewing.
+
+Taking the previous example, we'll alter the code to see if
+`/demos/notification-examples/example-page.html` is already open.
+
+```js
+const urlToOpen = new URL(examplePage, self.location.origin).href;
+
+const promiseChain = clients
+  .matchAll({
+    type: 'window',
+    includeUncontrolled: true,
+  })
+  .then((windowClients) => {
+    let matchingClient = null;
+
+    for (let i = 0; i < windowClients.length; i++) {
+      const windowClient = windowClients[i];
+      if (windowClient.url === urlToOpen) {
+        matchingClient = windowClient;
+        break;
+      }
+    }
+
+    if (matchingClient) {
+      return matchingClient.focus();
+    } else {
+      return clients.openWindow(urlToOpen);
+    }
+  });
+
+event.waitUntil(promiseChain);
+```
+
+Let's step through the code.
+
+First we parse our example page using the URL API. This is a neat trick I picked up from [Jeff
+Posnick](https://twitter.com/jeffposnick). Calling `new URL()` with the `location` object will
+return an absolute URL if the string passed in is relative (i.e. `/` will become
+`https://example.com/`).
+
+We make the URL absolute so we can match it against window URL's later on.
+
+```js
+const urlToOpen = new URL(examplePage, self.location.origin).href;
+```
+
+Then we get a list of the `WindowClient` objects, which is the list of the
+currently open tabs and windows. (Remember these are tabs for your origin only.)
+
+```js
+const promiseChain = clients.matchAll({
+  type: 'window',
+  includeUncontrolled: true,
+});
+```
+
+The options passed into `matchAll` inform the browser that we only want
+to search for "window" type clients (i.e. just look for tabs and windows
+and exclude web workers). `includeUncontrolled` allows us to search for
+all tabs from your origin that are not controlled by the current service
+worker, i.e. the service worker running this code. Generally, you'll
+always want `includeUncontrolled` to be true when calling `matchAll()`.
+
+We capture the returned promise as `promiseChain` so that we can pass it into
+`event.waitUntil()` later on, keeping our service worker alive.
+
+When the `matchAll()` promise resolves, we iterate through the returned window clients and
+compare their URLs to the URL we want to open. If we find a match, we focus that
+client, which will bring that window to the users attention. Focusing is done with the
+`matchingClient.focus()` call.
+
+If we can't find a matching client, we open a new window, same as in the previous section.
+
+```js
+.then((windowClients) => {
+  let matchingClient = null;
+
+  for (let i = 0; i < windowClients.length; i++) {
+    const windowClient = windowClients[i];
+    if (windowClient.url === urlToOpen) {
+      matchingClient = windowClient;
+      break;
+    }
+  }
+
+  if (matchingClient) {
+    return matchingClient.focus();
+  } else {
+    return clients.openWindow(urlToOpen);
+  }
+});
+```
+
+{% Aside %}
+We are returning the promise for `matchingClient.focus()` and
+`clients.openWindow()` so that the promises are accounted for in our promise
+chain.
+{% endAside %}
+
+## Merging notifications
+
+We saw that adding a tag to a notification opts in to a behavior where any
+existing notification with the same tag is replaced.
+
+You can however get more sophisticated with the collapsing of notifications using the
+Notifications API. Consider a chat app, where the developer might want a new notification to
+show a message similar to "You have two messages from Matt" rather than just showing the latest
+message.
+
+You can do this, or manipulate current notifications in other ways, using the
+[registration.getNotifications()](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/getNotifications)
+API which gives you access to all the currently visible notifications for your web app.
+
+Let's look at how we could use this API to implement the chat example.
+
+In our chat app, let's assume each notification has some data which includes a username.
+
+The first thing we'll want to do is find any open notifications for a user with a specific
+username. We'll get `registration.getNotifications()` and loop over them and check the
+`notification.data` for a specific username:
+
+```js
+const promiseChain = registration.getNotifications().then((notifications) => {
+  let currentNotification;
+
+  for (let i = 0; i < notifications.length; i++) {
+    if (notifications[i].data && notifications[i].data.userName === userName) {
+      currentNotification = notifications[i];
+    }
+  }
+
+  return currentNotification;
+});
+```
+
+The next step is to replace this notification with a new notification.
+
+In this fake message app, we'll track the number of new messages by adding a count to our new
+notification's data and increment it with each new notification.
+
+```js
+.then((currentNotification) => {
+  let notificationTitle;
+  const options = {
+    icon: userIcon,
+  }
+
+  if (currentNotification) {
+    // We have an open notification, let's do something with it.
+    const messageCount = currentNotification.data.newMessageCount + 1;
+
+    options.body = `You have ${messageCount} new messages from ${userName}.`;
+    options.data = {
+      userName: userName,
+      newMessageCount: messageCount
+    };
+    notificationTitle = `New Messages from ${userName}`;
+
+    // Remember to close the old notification.
+    currentNotification.close();
+  } else {
+    options.body = `"${userMessage}"`;
+    options.data = {
+      userName: userName,
+      newMessageCount: 1
+    };
+    notificationTitle = `New Message from ${userName}`;
+  }
+
+  return registration.showNotification(
+    notificationTitle,
+    options
+  );
+});
+```
+
+If there is a notification currently displayed, we increment the message count and set the
+notification title and body message accordingly. If there
+are no notifications, we create a new notification with a `newMessageCount` of 1.
+
+The result is that the first message would look like this:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/plgFelmhahN06Unqr2dr.png", alt="First notification without merging.", width="380", height="116" %}
+
+A second notification would collapse the notifications into this:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/bKoZiyLJI8DVYOPQBIGv.png", alt="Second notification with merging.", width="380", height="121" %}
+
+The nice thing with this approach is that if your user witnesses the
+notifications appearing one over the other, it'll look and feel more cohesive
+than just replacing the notification with the latest message.
+
+## The exception to the rule
+
+I've been stating that you **must** show a notification when you receive a push and this is
+true _most_ of the time. The one scenario where you don't have to show a notification is when
+the user has your site open and focused.
+
+Inside your push event, you can check whether you need to show a notification or not by
+examining the window clients and looking for a focused window.
+
+The code to getting all the windows and looking for a focused window looks like this:
+
+```js
+function isClientFocused() {
+  return clients
+    .matchAll({
+      type: 'window',
+      includeUncontrolled: true,
+    })
+    .then((windowClients) => {
+      let clientIsFocused = false;
+
+      for (let i = 0; i < windowClients.length; i++) {
+        const windowClient = windowClients[i];
+        if (windowClient.focused) {
+          clientIsFocused = true;
+          break;
+        }
+      }
+
+      return clientIsFocused;
+    });
+}
+```
+
+We use [`clients.matchAll()`](https://developer.mozilla.org/docs/Web/API/Clients/matchAll)
+to get all of our window clients and then we loop over them checking the `focused` parameter.
+
+Inside our push event, we'd use this function to decide if we need to show a notification:
+
+```js
+const promiseChain = isClientFocused().then((clientIsFocused) => {
+  if (clientIsFocused) {
+    console.log("Don't need to show a notification.");
+    return;
+  }
+
+  // Client isn't focused, we need to show a notification.
+  return self.registration.showNotification('Had to show a notification.');
+});
+
+event.waitUntil(promiseChain);
+```
+
+## Message a page from a push event
+
+We've seen that you can skip showing a notification if the user is currently on your site. But
+what if you still want to let the user know that an event has occurred, but a notification is
+too heavy handed?
+
+One approach is to send a message from the service worker to the page, this way the web page
+can show a notification or an update to the user, informing them of the event. This is useful for
+situations when a subtle notification in the page is better and friendlier for the user.
+
+Let's say we've received a push, checked that our web app is currently focused,
+then we can "post a message" to each open page, like so:
+
+```js
+const promiseChain = isClientFocused().then((clientIsFocused) => {
+  if (clientIsFocused) {
+    windowClients.forEach((windowClient) => {
+      windowClient.postMessage({
+        message: 'Received a push message.',
+        time: new Date().toString(),
+      });
+    });
+  } else {
+    return self.registration.showNotification('No focused windows', {
+      body: 'Had to show a notification instead of messaging each page.',
+    });
+  }
+});
+
+event.waitUntil(promiseChain);
+```
+
+In each of the pages, we listen for messages by adding a message event
+listener:
+
+```js
+navigator.serviceWorker.addEventListener('message', function (event) {
+  console.log('Received a message from service worker: ', event.data);
+});
+```
+
+In this message listener, you could do anything you want, show a custom UI on
+your page or completely ignore the message.
+
+It's also worth noting that if you don't define a message listener in your web page, the
+messages from the service worker will not do anything.
+
+## Cache a page and open a window
+
+One scenario that is out of the scope of this guide but worth discussing is that you can
+improve the overall UX of your web app by caching web pages you expect users to visit after
+clicking on your notification.
+
+This requires having your service worker set-up to handle `fetch` events,
+but if you implement a `fetch` event listener, make sure you take
+advantage of it in your `push` event by caching the page and assets
+you'll need before showing your notification.
+
+## Browser compatibility
+
+### The `notificationclose` event
+
+{% BrowserCompat 'api.ServiceWorkerGlobalScope.notificationclose_event' %}
+
+### `Clients.openWindow()`
+
+{% BrowserCompat 'api.Clients.openWindow' %}
+
+### `ServiceWorkerRegistration.getNotifications()`
+
+{% BrowserCompat 'api.ServiceWorkerRegistration.getNotifications' %}
+
+### `clients.matchAll()`
+
+{% BrowserCompat 'api.Clients.matchAll' %}
+
+For more information, check out this [introduction to service workers
+post](/web/fundamentals/getting-started/primers/service-workers).
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* Common Notification Patterns
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-display-a-notification/index.md b/src/site/content/en/blog/push-notifications-display-a-notification/index.md
new file mode 100644
index 00000000000..f1f0756984a
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-display-a-notification/index.md
@@ -0,0 +1,558 @@
+---
+title: Displaying a Notification
+authors:
+  - mattgaunt
+  - alexeyrodionov
+date: 2016-06-30
+updated: 2022-11-13
+tags:
+  - notifications
+---
+
+The notification options is split into two sections, one that deals with the visual aspects (this
+section) and one that explains the behavioral aspects of notifications (the next section).
+
+You can play around with various notification options in various browsers on various platforms
+using [Peter Beverloo](https://twitter.com/beverloo)'s
+[Notification Generator](https://tests.peter.sh/notification-generator/).
+
+## Visual Options
+
+The API for showing a notification is simple:
+
+```xml
+<ServiceWorkerRegistration>.showNotification(<title>, <options>);
+```
+
+Both arguments, `title` and `options` are optional.
+
+The title is a string and options can be any of the following:
+
+```json
+{
+  "//": "Visual Options",
+  "body": "<String>",
+  "icon": "<URL String>",
+  "image": "<URL String>",
+  "badge": "<URL String>",
+  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
+  "timestamp": "<Long>"
+
+  "//": "Both visual & behavioral options",
+  "actions": "<Array of Strings>",
+  "data": "<Anything>",
+
+  "//": "Behavioral Options",
+  "tag": "<String>",
+  "requireInteraction": "<boolean>",
+  "renotify": "<Boolean>",
+  "vibrate": "<Array of Integers>",
+  "sound": "<URL String>",
+  "silent": "<Boolean>",
+}
+```
+
+Let's look at the visual options:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ZVIQcUqIlNerdPiqOM9C.png", alt="Dissection of the UI of a Notification.", width="800", height="284" %}
+
+### Title and body options
+
+This is what a notification looks like without the title and options in Chrome on Windows:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/oq8F8nrC9z8aY3CtC8pr.png", alt="Notification without the title and options in Chrome on Windows.", width="780", height="312" %}
+
+As you can see, the browser name is used as the title and the "New notification" placeholder is
+used as the notification body.
+
+If a progressive web application is installed on the device, the web app name will be used instead
+of the browser name:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/5TmavxZQDURHIHQnwScW.png", alt="Notification with the web app name instead of the browser name.", width="780", height="312" %}
+
+If we ran the following code:
+
+```js
+const title = 'Simple Title';
+
+const options = {
+  body: 'Simple piece of body text.\nSecond line of body text :)',
+};
+
+registration.showNotification(title, options);
+```
+
+we'd get this notification in Chrome on Linux:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/BZnd4sFC3XMq8yPUkYVz.png", alt="Notification with title and body text in Chrome on Linux.", width="380", height="117" %}
+
+In Firefox on Linux it would look like this:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/53pAkj17dCQhnODMk2jq.png", alt="Notification with title and body text in Firefox on Linux.", width="521", height="74" %}
+
+This is what the notification with a lot of text in the title and body looks like in Chrome on
+Linux:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/MjZfnuD9h6MJLjv9enVi.png", alt="Notification with long title and body text in Chrome on Linux.", width="380", height="156" %}
+
+Firefox on Linux collapses the body text until you hover the notification, causing
+the notification to expand:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/hyJWXo3xO7AlrlE3I61F.png", alt="Notification with long title and body text in Firefox on Linux.", width="521", height="74" %}
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Huyo4xr85SwcmPN9zSly.png", alt="Notification with long title and body text in Firefox on Linux while hovering over the notification with the mouse cursor.", width="521", height="159" %}
+
+The same notifications in Firefox on Windows look like this:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/l5Pi7IvjKtGnn6YK2NdS.png", alt="Notification with title and body text in Firefox on Windows.", width="562", height="232" %}
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/OQRchMO68ph6UV2Lovy0.png", alt="Notification with long title and body text in Firefox on Windows.", width="562", height="281" %}
+
+As you can see, the same notification may look different in different browsers. It may also look
+different in the same browser on different platforms.
+
+Chrome and Firefox use the system notifications and notification center on platforms where these
+are available.
+
+For example, system notifications on macOS don't support images and actions (buttons and inline
+replies).
+
+Chrome also has a custom notifications for all desktop platforms. You can enable it by setting the
+`chrome://flags/#enable-system-notifications` flag to the `Disabled` state.
+
+### Icon
+
+The `icon` option is essentially a small image you can show next to the title and body text.
+
+In your code you need to provide a URL to the image you'd like to load:
+
+```js/3
+const title = 'Icon Notification';
+
+const options = {
+  icon: '/images/demos/icon-512x512.png',
+};
+
+registration.showNotification(title, options);
+```
+
+You get this notification in Chrome on Linux:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/RBQH1QGLIRT9HxJTDjkj.png", alt="Notification with icon in Chrome on Linux.", width="380", height="100" %}
+
+and in Firefox on Linux:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/EoS5ydulQRjq1nxTJxrA.png", alt="Notification with icon in Firefox on Linux.", width="522", height="75" %}
+
+Sadly there aren't any solid guidelines for what size image to use for an icon.
+
+[Android seems to want a 64dp image](http://stackoverflow.com/questions/7220738/honeycomb-notifications-how-to-set-largeicon-to-the-right-size)
+(which is 64px multiples by the device pixel ratio).
+
+Assuming the highest pixel ratio for a device is 3, an icon size of 192px or more is a
+safe bet.
+
+{% Aside %}
+Some browsers may require the image be served over HTTPS. Be aware of this if you intend to use a
+third-party image.
+{% endAside %}
+
+### Badge
+
+The `badge` is a small monochrome icon that is used to portray a little more information to the
+user about where the notification is from:
+
+```js/3
+const title = 'Badge Notification';
+
+const options = {
+  badge: '/images/demos/badge-128x128.png',
+};
+
+registration.showNotification(title, options);
+```
+
+At the time of writing the badge is only used in Chrome on Android.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/LaAYwycbWMn8SCro7fyo.png", alt="Notification with badge in Chrome on Android.", width="800", height="248" %}
+
+On other browsers (or Chrome without the badge), you'll see an icon of the browser.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Xy0ewGrawZtPRQWM99iR.png", alt="Notification with badge in Firefox on Android.", width="800", height="212" %}
+
+As with the `icon` option, there are no real guidelines on what size to use.
+
+Digging through [Android guidelines](https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html)
+the recommended size is 24px multiplied by the device pixel ratio.
+
+Meaning an image of 72px or more should be good (assuming a max device pixel ratio of 3).
+
+### Image
+
+The `image` option can be used to display a larger image to the user. This is particularly
+useful to display a preview image to the user.
+
+```js/3
+const title = 'Image Notification';
+
+const options = {
+  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
+};
+
+registration.showNotification(title, options);
+```
+
+In Chrome on Linux the notification will look like this:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/xF6oPjieHKCqtvrsWfM7.png", alt="Notification with image in Chrome on Linux.", width="380", height="340" %}
+
+In Chrome on Android the cropping and ratio are different:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/VF32ZZXDZj2xO7dJdR3W.png", alt="Notification with image in Chrome on Android.", width="800", height="554" %}
+
+Given the differences in ratio between desktop and mobile, it's extremely hard to suggest
+guidelines.
+
+Since Chrome on desktop doesn't fill the available space and has a ratio of 4:3, perhaps the best
+approach is to serve an image with this ratio and allow Android to crop the image. That being said,
+the `image` option may still change.
+
+On Android, the only [guideline](https://code.google.com/p/android/issues/detail?id=36744) is a
+width of 450dp.
+
+Using this guideline, an image of width 1350px or more would be a good bet.
+
+### Actions (Buttons)
+
+You can define `actions` to display buttons with a notification:
+
+```js/3-28
+const title = 'Actions Notification';
+
+const options = {
+  actions: [
+    {
+      action: 'coffee-action',
+      type: 'button',
+      title: 'Coffee',
+      icon: '/images/demos/action-1-128x128.png',
+    },
+    {
+      action: 'doughnut-action',
+      type: 'button',
+      title: 'Doughnut',
+      icon: '/images/demos/action-2-128x128.png',
+    },
+    {
+      action: 'gramophone-action',
+      type: 'button',
+      title: 'Gramophone',
+      icon: '/images/demos/action-3-128x128.png',
+    },
+    {
+      action: 'atom-action',
+      type: 'button',
+      title: 'Atom',
+      icon: '/images/demos/action-4-128x128.png',
+    },
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+For each action you can define a `title`, an `action` (which is essentially an ID), an `icon`, and
+a `type`. The title and icon is what you can see in the notification. The ID is used when detecting
+that the action button had been clicked (more about this in the next section). The type
+can be omitted because `'button'` is the default value.
+
+At the time of writing only Chrome and Opera for Android support actions.
+
+In the example above there are four actions defined to illustrate that you can define more actions than
+will be displayed. If you want to know the number of actions that will be displayed by the browser,
+you can check `window.Notification?.maxActions`:
+
+```js
+const maxVisibleActions = window.Notification?.maxActions;
+
+if (maxVisibleActions) {
+  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
+} else {
+  options.body = 'Notification actions are not supported.';
+}
+```
+
+On desktop, the action button icons display their colors (see the pink doughnut):
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/REyUtJ7icGvOoepXgpLQ.png", alt="Notification with action buttons on Chrome on Linux.", width="380", height="178" %}
+
+On Android 6 and earlier, the icons are colored to match the system color scheme:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/GI8sj9krxVtxWVeHGuvs.png", alt="Notification with action buttons on Chrome for Android.", width="800", height="296" %}
+
+On Android 7 and later, the action icons aren't shown at all.
+
+Chrome will hopefully change it's behavior on desktop to match Android (i.e. apply the
+appropriate color scheme to make the icons match the system look and feel). In the meantime, you
+can match Chrome's text color by making your icons have a color of `#333333`.
+
+It's also worth calling out that icons look crisp on Android but **not** on desktop.
+
+The best size I could get to work on desktop Chrome was 24px x 24px. This sadly looks out of place
+on Android.
+
+The best practice we can draw from these differences:
+
+- Stick to a consistent color scheme for your icons so at least all your icons are consistently
+  displayed to the user.
+- Make sure they work in monochrome as some platforms may display them that way.
+- Test the size and see what works for you. 128px × 128px works well on Android for me but was poor
+  quality on desktop.
+- Expect your action icons not to be displayed at all.
+
+The Notification spec is exploring a way to define multiple sizes of icons, but it looks like it'll
+be some time before anything is agreed upon.
+
+### Actions (Inline Replies)
+
+You can add an inline reply to the notification by defining an action with the `'text'` type:
+
+```js/8-13
+const title = 'Alexey Rodionov';
+
+const options = {
+  body: 'How are you doing? )',
+  image: '/images/demos/avatar-512x512.jpg',
+  icon: '/images/demos/icon-512x512.png',
+  badge: '/images/demos/badge-128x128.png',
+  actions: [
+    {
+      action: 'reply',
+      type: 'text',
+      title: 'Reply',
+      icon: '/images/demos/action-5-128x128.png',
+    }
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+This is what it will look like on Android:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/Ph3WKnKo7I2qIZdHSmzO.png", alt="Notification on Android with a reply action button.", width="800", height="304" %}
+
+Clicking on the action button opens a text input field:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/3eVno9EWU28kN2DP2xIT.png", alt="Notification on Android with an opened text input field.", width="800", height="330" %}
+
+You can customize the placeholder for the text input field:
+
+```js/12
+const title = 'Alexey Rodionov';
+
+const options = {
+  body: 'How are you doing? )',
+  icon: '/images/demos/avatar-512x512.jpg',
+  badge: '/images/demos/badge-128x128.png',
+  actions: [
+    {
+      action: 'reply',
+      type: 'text',
+      title: 'Reply',
+      icon: '/images/demos/action-5-128x128.png',
+      placeholder: 'Type text here',
+    }
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/dD8gIYQMO29voqF3qyHY.png", alt="Notification on Android with customized placeholder for text input field.", width="800", height="330" %}
+
+In Chrome on Windows, the text input field is always visible without having to click the action
+button:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/qZhA529rWfVHzt7RVacJ.png", alt="Notification on Windows with a text input field and a reply action button.", width="780", height="504" %}
+
+You can add more than one inline reply or combine buttons and inline replies:
+
+```js/8-18
+const title = 'Poll';
+
+const options = {
+  body: 'Do you like this photo?',
+  image: '/images/demos/cat-image.jpg',
+  icon: '/images/demos/icon-512x512.png',
+  badge: '/images/demos/badge-128x128.png',
+  actions: [
+    {
+      action: 'yes',
+      type: 'button',
+      title: '👍 Yes',
+    },
+    {
+      action: 'no',
+      type: 'text',
+      title: '👎 No (explain why)',
+      placeholder: 'Type your explanation here',
+    },
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/fKYyLvbAKghcnbmwEOfE.png", alt="Notification on Windows with a text input field and two action buttons.", width="800", height="891" %}
+
+### Direction
+
+The `dir` parameter allows you to define which direction the text should be displayed,
+right-to-left or left-to-right.
+
+In testing, it seemed that the direction was largely determined by the text rather than this
+parameter. According to the spec, this is intended to suggest to the browser how to layout options
+like actions, but I saw no difference.
+
+Probably best to define if you can, otherwise the browser should do the right thing according to
+the text supplied.
+
+The parameter should be set to either `auto`, `ltr` or `rtl`.
+
+A right-to-left language used on Chrome on Linux looks like this:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/epWm0UDjQzcRMz37uaaa.png", alt="Notification with right-to-left language on Chrome on Linux.", width="380", height="234" %}
+
+In Firefox (while hovering over it) you'll get this:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ncKq2yMj7ipFkGGOWKBr.png", alt="Notification with right-to-left language on Firefox on Linux.", width="521", height="102" %}
+
+### Vibrate
+
+{% Aside 'caution' %}
+Support for [`vibrate` has been deprecated](https://crbug.com/971422) on Android 8 and later.
+{% endAside %}
+
+The vibrate option allows you to define a vibration pattern that'll run when a notification is
+displayed, assuming the user's current settings allow for vibrations (i.e. the device isn't in
+silent mode).
+
+The format of the vibrate option should be an array of numbers that describe the number of
+milliseconds the device should vibrate, followed by the number of milliseconds the device should
+_not_ vibrate.
+
+```js/5-8
+const title = 'Vibrate Notification';
+
+const options = {
+  // Star Wars shamelessly taken from the awesome Peter Beverloo
+  // https://tests.peter.sh/notification-generator/
+  vibrate: [
+    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
+    40, 500,
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+This only affects devices that support vibration.
+
+### Sound
+
+The sound parameter allows you to define a sound to play when the notification is received.
+
+At the time of writing, no browser has support for this option.
+
+```js/3
+const title = 'Sound Notification';
+
+const options = {
+  sound: '/demos/notification-examples/audio/notification-sound.mp3',
+};
+
+registration.showNotification(title, options);
+```
+
+### Timestamp
+
+Timestamp allows you to tell the platform the time when an event occurred that resulted in the push
+notification being sent.
+
+The `timestamp` should be the number of milliseconds since 00:00:00 UTC, which is 1 January 1970
+(which is the UNIX epoch).
+
+```js/4
+const title = 'Timestamp Notification';
+
+const options = {
+  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
+  timestamp: Date.parse('01 Jan 2000 00:00:00'),
+};
+
+registration.showNotification(title, options);
+```
+
+## UX Best Practices
+
+The biggest UX failure I've seen with notifications is a lack of specificity in the information
+displayed by a notification.
+
+You should consider why you sent the push message in the first place and make sure all of the
+notification options are used to help users understand why they are reading that notification.
+
+To be honest, it's easy to see examples and think "I'll never make that mistake". But it's easier
+to fall into that trap than you might think.
+
+Some common pitfalls to avoid:
+
+- Don't put your website in the title or the body. Browsers include your domain in the
+  notification so **don't duplicate it**.
+- Use all the information that you have available. If you send a push message because someone
+  sent a message to a user, rather than using a title of 'New Message' and body of 'Click here to
+  read it.' use a title of 'John just sent a new message' and set the body of the notification to
+  part of the message.
+
+## Browsers and feature detection
+
+At the time of writing, there is a pretty big disparity between Chrome and Firefox in terms of
+feature support for notifications.
+
+Luckily, you can detect support for notification features by looking at the `window.Notification`
+prototype.
+
+Let's say we wanted to know if a notification supports action buttons, we'd do the following:
+
+```js
+if ('actions' in window.Notification?.prototype) {
+  // Action buttons are supported.
+} else {
+  // Action buttons are NOT supported.
+}
+```
+
+With this, we could change the notification we display to our users.
+
+With the other options, just do the same as above, replacing `'actions'` with the desired
+parameter name.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* Displaying a Notification
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-faq/index.md b/src/site/content/en/blog/push-notifications-faq/index.md
new file mode 100644
index 00000000000..dd283bc5c0f
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-faq/index.md
@@ -0,0 +1,179 @@
+---
+title: Push notifications FAQ
+date: 2014-10-07
+updated: 2018-09-20
+authors:
+  - mattgaunt
+tags:
+  - notifications
+---
+
+## Why doesn't push work when the browser is closed?
+
+This question crops up quite a bit, largely because there are a few scenarios that make it
+difficult to reason with and understand.
+
+Let's start with Android. The Android OS is designed to listen for push messages and upon
+receiving one, wake up the appropriate Android app to handle the push message,
+regardless of whether the app is closed or not.
+
+This is exactly the same with any browser on Android, the browser will be woken
+up when a push message is received and the browser will then wake up your
+service worker and dispatch the push event.
+
+On desktop OS's, it's more nuanced and it's easiest to explain on Mac OS X
+because there is a visual indicator to help explain the different scenarios.
+
+On Mac OS X, you can tell if a program is running or not by a marking
+under the app icon in the dock.
+
+If you compare the two Chrome icons in the following dock, the one on the left
+is running, as illustrated by the marking under the icon, whereas the Chrome
+on the right is **not running**, hence the lack of the marking underneath.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/04puAvaHbqNI3JvCYp5T.png", alt="Example of OS X", width="467", height="117" %}
+</figure>
+
+In the context of receiving push messages on desktop, you will receive messages
+when the browser is running, i.e. has the marking underneath the icon.
+
+This means the browser can have no windows open, and you'll still receive the push message in
+your service worker, because the browser in running in the background.
+
+The only time a push won't be received is when the browser is completely closed, i.e. not running
+at all (no marking). The same applies for Windows, although it's a little trickier to determine
+whether or not Chrome is running in the background.
+
+## How do I make my home screen web app open fullscreen from a push?
+
+On Chrome for Android, a web app can be added to the home screen and when the web app is opened
+from the home screen, it can launch in fullscreen mode without the URL bar, as shown below.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tWNS7V1x70AfEkirDg6L.png", alt="Home screen Icon to Fullscreen", width="800", height="549" %}
+</figure>
+
+To keep this experience consistent, developers want their clicked notifications to open their
+web app in fullscreen as well.
+
+Chrome "sort of" implemented this, although you may find it unreliable
+and difficult to reason with. The relevant implementation details are:
+
+{% Aside %}
+Sites which have been added to homescreen on Android should be
+allowed to open in standalone mode in response to push notifications. As
+Chromium cannot detect what sites are on the homescreen after they
+have been added, the heuristic is sites which have been launched from
+homescreen within the last ten days will be opened in standalone from
+a tap on a notification.
+--[Chrome Issue](https://bugs.chromium.org/p/chromium/issues/detail?id=541711)
+{% endAside %}
+
+What this means is that unless your user is visiting your site through the home screen icon
+fairly regularly, your notifications will open in the normal browser UI.
+
+This issue will be worked on further.
+
+{% Aside %}
+This is just the behavior of Chrome, though other browsers may do different things as well.
+Feel free to [raise an issue](https://github.com/gauntface/web-push-book/issues) if you have
+anything to add to this discussion.
+{% endAside %}
+
+## Why is this any better than web sockets?
+
+A service worker can be brought to life when the browser window is
+closed. A web socket will only live as long as the browser and
+web page is kept open.
+
+## What is the deal with GCM, FCM, Web Push and Chrome?
+
+This question has a number of facets to it and the easiest way to explain is to
+step through the history of web push and Chrome. (Don't worry, it's short.)
+
+### December 2014
+
+When Chrome first implemented web push, Chrome used Google Cloud Messaging (GCM)
+to power the sending of push messages from the server to the browser.
+
+This **was not web push**. There are a few reasons this early set-up of Chrome and GCM wasn't
+"real" web push.
+
+- GCM requires developers to set up an account on the Google Developers Console.
+- Chrome and GCM needed a special sender ID to be shared by a web app to be able to set up
+messaging correctly.
+- GCM's servers accepted a custom API request that wasn't a web standard.
+
+### July 2016
+
+In July a new feature in web push landed - Application Server Keys (or VAPID, as
+the spec is known). When Chrome added support for this new API, it used Firebase
+Cloud Messaging (also known as FCM) instead of GCM as a messaging service. This
+is important for a few reasons:
+
+- Chrome and Application Sever Keys **do not** need any kind of project to be set up with Google
+or Firebase. It'll just work.
+- FCM supports the *web push protocol*, which is the API that all web push services will
+support. This means that regardless of what push service a browser uses, you just make the same
+kind of request and it'll send the message.
+
+### Why is it confusing today?
+
+There is a large amount of confusion now that content has been written on the topic of web
+push, much of which references GCM or FCM. If content references GCM, you should probably treat
+it as a sign that it's either old content OR it's focusing too much on Chrome. (I'm guilty of
+doing this in a number of old posts.)
+
+Instead, think of web push as consisting of a browser, which uses a push service to manage
+sending and receiving messages, where the push service will accept a "web push protocol"
+request. If you think in these terms, you can ignore which browser and which push service it's
+using and get to work.
+
+This guide has been written to focus on the standards approach of web push and
+purposefully ignores anything else.
+
+## Firebase has a JavaScript SDK. What and Why?
+
+For those of you who have found the Firebase web SDK and noticed it has a messaging API for
+JavaScript, you may be wondering how it differs from web push.
+
+The messaging SDK (known as Firebase Cloud Messaging JS SDK) does a few tricks behind the
+scenes to make it easier to implement web push.
+
+- Instead of worrying about a `PushSubscription` and its various fields,
+you only need to worry about an FCM Token (a string).
+- Using the tokens for each user, you can use the proprietary FCM API to
+trigger push messages. This API doesn't require encrypting payloads. You
+can send a plain text payload in a POST request body.
+- FCM's proprietary API supports custom features, for example
+[FCM Topics](https://firebase.google.com/docs/cloud-messaging/android/topic-messaging)
+(It works on the web too, though it's poorly documented).
+- Finally, FCM supports Android, iOS and web, so for some teams it is
+easier to work with in existing projects.
+
+This uses web push behind the scenes, but its goal is to abstract it away.
+
+Like I said in the previous question, if you consider web push as just a browser and a push
+service, then you can consider the Messaging SDK in Firebase as a library to simplify
+implementing web push.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* Push Notifications FAQ
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-handling-messages/index.md b/src/site/content/en/blog/push-notifications-handling-messages/index.md
new file mode 100644
index 00000000000..d42e9701c50
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-handling-messages/index.md
@@ -0,0 +1,213 @@
+---
+title: Push events
+date: 2016-06-30
+updated: 2019-06-07
+authors:
+  - mattgaunt
+tags:
+  - notifications
+---
+
+By this point, we covered subscribing a user and sending a push message. The next step is to
+receive this push message on the user's device and display a notification (as well as do any other
+work we might want to do).
+
+## The Push Event
+
+When a message is received, it'll result in a push event being dispatched in your service worker.
+
+The code for setting up a push event listener should be pretty similar to any other event
+listener you'd write in JavaScript:
+
+```js
+self.addEventListener('push', function(event) {
+    if (event.data) {
+    console.log('This push event has data: ', event.data.text());
+    } else {
+    console.log('This push event has no data.');
+    }
+});
+```
+
+The weirdest bit of this code to most developers who are new to service workers is the `self`
+variable. `self` is commonly used in Web Workers, which a service worker is. `self` refers to
+the global scope, kind of like `window` in a web page. But for web workers and service workers,
+`self` refers to the worker itself.
+
+In the example above, `self.addEventListener()` can be thought of as adding an event listener to
+the service worker itself.
+
+Inside the push event example, we check if there is any data and print something to the console.
+
+There are other ways you can parse data from a push event:
+
+```js
+// Returns string
+event.data.text()
+
+// Parses data as JSON string and returns an Object
+event.data.json()
+
+// Returns blob of data
+event.data.blob()
+
+// Returns an arrayBuffer
+event.data.arrayBuffer()
+```
+
+
+Most people use `json()` or `text()` depending on what they are expecting from their application.
+
+This example demonstrates how to add a push event listener and how to access data, but it's
+missing two very important pieces of functionality. It's not showing a notification and it's
+not making use of `event.waitUntil()`.
+
+### Wait Until
+
+One of the things to understand about service workers is that you have little control over when
+the service worker code is going to run. The browser decides when to wake it up and when to
+terminate it. The only way you can tell the browser, "Hey, I'm super busy doing important
+stuff", is to pass a promise into the `event.waitUntil()` method. With this, the browser will
+keep the service worker running until the promise you passed in has settled.
+
+With push events, there is an additional requirement that you must display a notification before
+the promise you passed in has settled.
+
+Here's a basic example of showing a notification:
+
+```js
+self.addEventListener('push', function(event) {
+    const promiseChain = self.registration.showNotification('Hello, World.');
+
+    event.waitUntil(promiseChain);
+});
+```
+
+Calling `self.registration.showNotification()` is the method that displays a notification to
+the user and it returns a promise that will resolve once the notification has been displayed.
+
+For the sake of keeping this example as clear as possible, I've assigned this promise to a
+variable called `promiseChain`. This is then passed into `event.waitUntil()`. I know this is
+very verbose, but I've seen a number of issues that have culminated as a result of
+misunderstanding what should be passed into `waitUntil()` or as a result of broken promise
+chains.
+
+A more complicated example with a network request for data and tracking the push event with
+analytics could look like this:
+
+```js
+self.addEventListener('push', function(event) {
+    const analyticsPromise = pushReceivedTracking();
+    const pushInfoPromise = fetch('/api/get-more-data')
+    .then(function(response) {
+        return response.json();
+    })
+    .then(function(response) {
+        const title = response.data.userName + ' says...';
+        const message = response.data.message;
+
+        return self.registration.showNotification(title, {
+        body: message
+        });
+    });
+
+    const promiseChain = Promise.all([
+    analyticsPromise,
+    pushInfoPromise
+    ]);
+
+    event.waitUntil(promiseChain);
+});
+```
+
+Here we are calling a function that returns a promise `pushReceivedTracking()`,
+which, for the sake of the example, we can pretend will make a network request
+to our analytics provider. We are also making a network request, getting the
+response and showing a notification using the responses data for the title and
+message of the notification.
+
+We can ensure the service worker is kept alive while both of these tasks are done by combining
+these promises with `Promise.all()`. The resulting promise is passed into `event.waitUntil()`
+meaning the browser will wait until both promises have finished before checking that a notification
+has been displayed and terminating the service worker.
+
+{% Aside %}
+If you ever find your promise chains confusing or a little messy,
+I find that breaking things into functions helps to reduce complexity.
+I'd also recommend
+[this blog post by Philip Walton on untangling promise
+chains](https://philipwalton.com/articles/untangling-deeply-nested-promise-chains/).
+The main point to take away is that you should experiment with how promises can be written
+and chained to find a style that works for you.
+{% endAside %}
+
+The reason we should be concerned about `waitUntil()` and how to use it is that one of the most
+common issues developers face is that when the promise chain is incorrect / broken, Chrome will
+show this "default" notification:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eeTfi2PuON5UCch3aMAN.png", alt="An Image of the default notification in Chrome", width="800", height="291" %}
+</figure>
+
+Chrome will only show the "This site has been updated in the background." notification when a
+push message is received and the push event in the service worker **does not** show a
+notification after the promise passed to `event.waitUntil()` has finished.
+
+The main reason developers get caught by this is that their code will
+often call `self.registration.showNotification()` but they **aren't** doing
+anything with the promise it returns. This intermittently results in the default notification
+being displayed. For example, we could remove the return for
+`self.registration.showNotification()` in the example above and we run the risk of seeing this
+notification.
+
+```js
+self.addEventListener('push', function(event) {
+    const analyticsPromise = pushReceivedTracking();
+    const pushInfoPromise = fetch('/api/get-more-data')
+    .then(function(response) {
+        return response.json();
+    })
+    .then(function(response) {
+        const title = response.data.userName + ' says...';
+        const message = response.data.message;
+
+        self.registration.showNotification(title, {
+        body: message
+        });
+    });
+
+    const promiseChain = Promise.all([
+    analyticsPromise,
+    pushInfoPromise
+    ]);
+
+    event.waitUntil(promiseChain);
+});
+```
+
+You can see how it's an easy thing to miss.
+
+Just remember - if you see that notification, check your promise chains and `event.waitUntil()`.
+
+In the next section, we're going to look at what we can do to style notifications and
+what content we can display.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* Handling Push Events
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-how-push-works/index.md b/src/site/content/en/blog/push-notifications-how-push-works/index.md
new file mode 100644
index 00000000000..3cc97ceaae3
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-how-push-works/index.md
@@ -0,0 +1,174 @@
+---
+title: How push works
+authors:
+  - mattgaunt
+date: 2016-06-30
+updated: 2019-05-30
+tags:
+  - notifications
+---
+
+Before getting into the API, let's look at push from a high level, start to finish. Then as we
+step through individual topics or APIs later on, you'll have an idea of how and why it's
+important.
+
+The three key steps to implementing push are:
+
+1. Adding the client side logic to subscribe a user to push (i.e. the JavaScript and UI in your
+   web app that registers a user to push messages).
+1. The API call from your back-end / application that triggers a push message to a user's device.
+1. The service worker JavaScript file that will receive a "push event" when the push arrives on
+   the device. It's in this JavaScript that you'll be able to show a notification.
+
+Let's look at what each of these steps entails in a little more detail.
+
+## Step 1: Client Side
+
+The first step is to "subscribe" a user to push messaging.
+
+Subscribing a user requires two things. First, getting **permission** from the user to send
+them push messages. Second, getting a `PushSubscription` from the browser.
+
+A `PushSubscription` contains all the information we need to send a push message to that user.
+You can "kind of" think of this as an ID for that user's device.
+
+This is all done in JavaScript with the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API).
+
+{% BrowserCompat 'api.PushEvent' %}
+
+Before subscribing a user you'll need to generate a set of
+"application server keys", which we'll cover later on.
+
+The application server keys, also known as VAPID keys, are unique to your server. They allow a
+push service to know which application server subscribed a user and ensure that it's the same
+server triggering the push messages to that user.
+
+Once you've subscribed the user and have a `PushSubscription`, you'll need to send the
+`PushSubscription` details to your backend / server. On your server, you'll save this
+subscription to a database and use it to send a push message to that user.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/3eZW2SvRzowpHsYxhUwr.svg", alt="Make sure you send the PushSubscription to your backend.", width="800", height="213" %}
+
+## Step 2: Send a push message
+
+When you want to send a push message to your users you need to make an API call to a push
+service. This API call would include what data to send, who to send the message to and any
+criteria about how to send the message. Normally this API call is done from your server.
+
+Some questions you might be asking yourself:
+
+- Who and what is the push service?
+- What does the API look like? Is it JSON, XML, something else?
+- What can the API do?
+
+### Who and what is the push service?
+
+A push service receives a network request, validates it and delivers a push message to the appropriate browser. If the browser is offline, the message is queued until the browser comes online.
+
+Each browser can use any push service they want, it's something developers have no control
+over. This isn't a problem because every push service expects the **same** API call. Meaning
+you don't have to care who the push service is. You just need to make sure that your API call
+is valid.
+
+To get the appropriate URL to trigger a push message (i.e. the URL for the push service) you
+just need to look at the `endpoint` value in a `PushSubscription`.
+
+Below is an example of the values you'll get from a **PushSubscription**:
+
+```json
+{
+  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
+  "keys": {
+    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
+    "auth": "tBHItJI5svbpez7KI4CCXg=="
+  }
+}
+```
+
+The **endpoint** in this case is
+[https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. The push service would be
+'random-push-service.com' and each endpoint is unique to a user, indicated with
+'some-kind-of-unique-id-1234'. As you start working with push you'll notice this pattern.
+
+The **keys** in the subscription will be covered later on.
+
+### What does the API look like?
+
+I mentioned that every web push service expects the same API call. That API is the
+[**Web Push Protocol**](https://tools.ietf.org/html/draft-ietf-webpush-protocol).
+It's an IETF standard that defines how you make an API call to a push service.
+
+The API call requires certain headers to be set and the data to be a stream of bytes. We'll
+look at libraries that can perform this API call for us as well as how to do it ourselves.
+
+### What can the API do?
+
+The API provides a way to send a message to a user, with / without data, and provides
+instructions of _how_ to send the message.
+
+The data you send with a push message must be encrypted. The reason for this is that it
+prevents push services, who could be anyone, from being able to view the data sent with the
+push message. This is important given that it's the browser who decides which push service to
+use, which could open the door to browsers using a push service that isn't safe or secure.
+
+When you trigger a push message, the push service will receive the API call and queue the
+message. This message will remain queued until the user's device comes online and the push
+service can deliver the messages. The instructions you can give to the push service define how
+the push message is queued.
+
+The instructions include details like:
+
+- The time-to-live for a push message. This defines how long a message should be queued before
+  it's removed and not delivered.
+
+- Define the urgency of the message. This is useful in case the push service is preserving the
+  users battery life by only delivering high priority messages.
+
+- Give a push message a "topic" name which will replace any pending message with this new message.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/f42EMdaS3bjYhIw47E1J.svg", alt="When your server wishes to send a push message, it makes a web push protocol request to a push service.", width="800", height="220" %}
+
+### Step 3: Push event on the user's device
+
+Once we've sent a push message, the push service will keep your message on its server until
+one of following events occurs:
+
+1. The device comes online and the push service delivers the message.
+1. The message expires. If this occurs the push service removes the message from its queue and
+   it'll never be delivered.
+
+When the push service does deliver a message, the browser will receive the message, decrypt any
+data and dispatch a `push` event in your service worker.
+
+A [service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) is a
+"special" JavaScript file. The browser can execute this JavaScript without your page being
+open. It can even execute this JavaScript when the browser is closed. A service worker also has
+API's, like push, that aren't available in the web page (i.e. API's that aren't available out
+of a service worker script).
+
+It's inside the service worker's 'push' event that you can perform any background tasks. You
+can make analytics calls, cache pages offline and show notifications.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/DCOmdNQ0YXPfd082WUgz.svg", alt="When a push message is sent from a push service to a user's device, your service worker receives a push event", width="800", height="238" %}
+
+That's the whole flow for push messaging.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* How Push Works
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-in-all-modern-browsers/index.md b/src/site/content/en/blog/push-notifications-in-all-modern-browsers/index.md
new file mode 100644
index 00000000000..4b681b4a3cb
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-in-all-modern-browsers/index.md
@@ -0,0 +1,67 @@
+---
+title: Push notifications are now supported cross-browser
+subhead: >
+  Deliver timely and useful notifications to your users.
+date: 2023-03-28
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/wh2VQyIaAgf3TolWMePH.jpg
+alt: The word push written in mirrored letters.
+authors:
+  - thomassteiner
+tags:
+  - blog
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% endAside %}
+
+Push notifications were standardized in 2016 with the release of the Push API and the Notification API, which are part of the W3C's Web Applications Working Group. These APIs provide the necessary functionality for web developers to incorporate push notifications into their web applications and for users to receive and interact with notifications on their web browsers. Push messages are notifications that are sent to a user's web browser from a website or application that the user has previously granted permission to send notifications. These messages can be used to alert the user of new content or updates, remind them of upcoming events or deadlines, or provide other important information. Push messages can be particularly useful for applications that need to deliver timely, relevant information to their users, such as news or sports apps, or for e-commerce websites that want to send users notifications about special offers or sales.
+
+To sign up for push notifications, first check if your browser supports them by checking for the `serviceWorker` and `PushManager` objects in the `navigator` and `window` objects.
+
+{% Aside 'gotcha' %}
+**Safari for iOS and iPadOS** supports push notifications as of version 16.4, but only for apps that were added to the Home Screen. Apple calls these Home Screen web apps.
+{% endAside %}
+
+If push notifications are supported, use the `async` and `await` keywords to register the service worker and subscribe for push notifications. Here is an example of how you can do this using JavaScript:
+
+```js
+// Check if the browser supports push notifications.
+if ("serviceWorker" in navigator && "PushManager" in window) {
+  try {
+    // Register the service worker.
+    const swReg = await navigator.serviceWorker.register("/sw.js");
+
+    // Subscribe for push notifications.
+    const pushSubscription = await swReg.pushManager.subscribe({
+      userVisibleOnly: true
+    });
+
+    // Save the push subscription to the database.
+    savePushSubscription(pushSubscription);
+  } catch (error) {
+    // Handle errors.
+    console.error("Error subscribing for push notifications.", error);
+  }
+} else {
+  // Push notifications are not supported by the browser.
+  console.error("Push notifications are not supported by the browser.");
+}
+```
+
+{% BrowserCompat 'api.PushEvent.PushEvent' %}
+
+{% Aside %}
+Prior to version 16, **Safari on macOS** supported a [proprietary version of push notifications](https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/PushNotifications/PushNotifications.html#//apple_ref/doc/uid/TP40013225-CH3-SW1). Since version 16, Safari for macOS now supports standard push notifications as other browsers.
+{% endAside %}
+
+## Further reading
+
+- [Push notifications overview](/push-notifications-overview/)
+- [Push API](https://developer.mozilla.org/docs/Web/API/Push_API)
+- [Web Push for Web Apps on iOS and iPadOS](https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/)
+
+## Acknowledgements
+
+Hero image by [Jean Bach](https://unsplash.com/@jeans514) on [Unsplash](https://unsplash.com/photos/X8GTI5tx6UA).
diff --git a/src/site/content/en/blog/push-notifications-notification-behaviour/index.md b/src/site/content/en/blog/push-notifications-notification-behaviour/index.md
new file mode 100644
index 00000000000..f30b243eaec
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-notification-behaviour/index.md
@@ -0,0 +1,336 @@
+---
+title: Notification behavior
+authors:
+  - mattgaunt
+  - alexeyrodionov
+date: 2016-06-30
+updated: 2022-11-13
+tags:
+  - notifications
+---
+
+So far, we've looked at the options that alter the visual appearance of a notification. There are
+also options that alter the behavior of notifications.
+
+By default, calling `showNotification()` with just visual options will have the following
+behaviors:
+
+- Clicking on the notification does nothing.
+- Each new notification is shown one after the other. The browser will not collapse the
+  notifications in any way.
+- The platform may play a sound or vibrate the user's device (depending on the platform).
+- On some platforms, the notification will disappear after a short period of time while others will
+  show the notification unless the user interacts with it. (For example, compare your notifications
+  on Android and Desktop.)
+
+In this section, we are going to look at how we can alter these default behaviors using options
+alone. These are relatively easy to implement and take advantage of.
+
+## Notification Click Event
+
+When a user clicks on a notification, the default behavior is for nothing to happen. It doesn't
+even close or remove the notification.
+
+The common practice for a notification click is for it to close and perform some other logic (i.e.
+open a window or make some API call to the application).
+
+To achieve this, you need to add a `'notificationclick'` event listener to our service worker. This
+will be called whenever a notification is clicked.
+
+```js
+self.addEventListener('notificationclick', (event) => {
+  const clickedNotification = event.notification;
+  clickedNotification.close();
+
+  // Do something as the result of the notification click
+  const promiseChain = doSomething();
+  event.waitUntil(promiseChain);
+});
+```
+
+As you can see in this example, the notification that was clicked can be accessed as
+`event.notification`. From this, you can access the notification's properties and methods. In this
+case, you call its `close()` method and perform additional work.
+
+{% Aside 'warning' %}
+You need to make use of `event.waitUntil()` to keep the service worker running while your code is
+busy.
+{% endAside %}
+
+## Actions
+
+Actions allow you to create another level of interaction with your users over just clicking the
+notification.
+
+### Buttons
+
+In the previous section, you saw how to define action buttons when calling `showNotification()`:
+
+```js
+const title = 'Actions Notification';
+
+const options = {
+  actions: [
+    {
+      action: 'coffee-action',
+      title: 'Coffee',
+      type: 'button',
+      icon: '/images/demos/action-1-128x128.png',
+    },
+    {
+      action: 'doughnut-action',
+      type: 'button',
+      title: 'Doughnut',
+      icon: '/images/demos/action-2-128x128.png',
+    },
+    {
+      action: 'gramophone-action',
+      type: 'button',
+      title: 'Gramophone',
+      icon: '/images/demos/action-3-128x128.png',
+    },
+    {
+      action: 'atom-action',
+      type: 'button',
+      title: 'Atom',
+      icon: '/images/demos/action-4-128x128.png',
+    },
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+If the user clicks an action button, check the `event.action` value in the `noticationclick`
+event to tell which action button was clicked.
+
+`event.action` will contain the `action` value set in the options. In the example above the
+`event.action` values would be one of the following: `'coffee-action'`, `'doughnut-action'`,
+`'gramophone-action'` or `'atom-action'`.
+
+With this we would detect notification clicks or action clicks like so:
+
+```js
+self.addEventListener('notificationclick', (event) => {
+  if (!event.action) {
+    // Was a normal notification click
+    console.log('Notification Click.');
+    return;
+  }
+
+  switch (event.action) {
+    case 'coffee-action':
+      console.log("User ❤️️'s coffee.");
+      break;
+    case 'doughnut-action':
+      console.log("User ❤️️'s doughnuts.");
+      break;
+    case 'gramophone-action':
+      console.log("User ❤️️'s music.");
+      break;
+    case 'atom-action':
+      console.log("User ❤️️'s science.");
+      break;
+    default:
+      console.log(`Unknown action clicked: '${event.action}'`);
+      break;
+  }
+});
+```
+
+### Inline Replies
+
+Also, in the previous section, you saw how to add an inline reply to the notification:
+
+```js
+const title = 'Poll';
+
+const options = {
+  body: 'Do you like this photo?',
+  image: '/images/demos/cat-image.jpg',
+  icon: '/images/demos/icon-512x512.png',
+  badge: '/images/demos/badge-128x128.png',
+  actions: [
+    {
+      action: 'yes',
+      type: 'button',
+      title: '👍 Yes',
+    },
+    {
+      action: 'no',
+      type: 'text',
+      title: '👎 No (explain why)',
+      placeholder: 'Type your explanation here',
+    },
+  ],
+};
+
+registration.showNotification(title, options);
+```
+
+`event.reply` will contain the value typed by the user in the input field:
+
+```js
+self.addEventListener('notificationclick', (event) => {
+  const reply = event.reply;
+
+  // Do something with the user's reply
+  const promiseChain = doSomething(reply);
+  event.waitUntil(promiseChain);
+});
+```
+
+## Tag
+
+The `tag` option is essentially a string ID that "groups" notifications together, providing an easy
+way to determine how multiple notifications are displayed to the user. This is easiest to explain
+with an example.
+
+Let's display a notification and give it a tag, of `'message-group-1'`. We'd display the
+notification with this code:
+
+```js
+const title = 'Notification 1 of 3';
+
+const options = {
+  body: "With 'tag' of 'message-group-1'",
+  tag: 'message-group-1',
+};
+
+registration.showNotification(title, options);
+```
+
+Which will show our first notification.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/UKvAEJq7hWFQsxQjlnKv.png", alt="First notification with tag of message group 1.", width="380", height="222" %}
+
+Let's display a second notification with a new tag of `'message-group-2'`, like so:
+
+```js
+const title = 'Notification 2 of 3';
+
+const options = {
+  body: "With 'tag' of 'message-group-2'",
+  tag: 'message-group-2',
+};
+
+registration.showNotification(title, options);
+```
+
+This will display a second notification to the user.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/L1reebxFF4pJ1sIYRvcE.png", alt="Two notifications where the second tag of message group 2.", width="380", height="222" %}
+
+Now let's show a third notification but re-use the first tag of `'message-group-1'`. Doing this
+will close the first notification and replace it with our new notification.
+
+```js
+const title = 'Notification 3 of 3';
+
+const options = {
+  body: "With 'tag' of 'message-group-1'",
+  tag: 'message-group-1',
+};
+
+registration.showNotification(title, options);
+```
+
+Now we have two notifications even though `showNotification()` was called three times.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/RLHBEuD6REvyuZhHgWJw.png", alt="Two notifications where the first notification is replaced by a third notification.", width="380", height="222" %}
+
+The `tag` option is simply a way of grouping messages so that any old notifications that are
+currently displayed will be closed if they have the same tag as a new notification.
+
+A subtlety to using `tag` is that when it replaces a notification, it will do so _without_ a sound
+or vibration.
+
+This is where the `renotify` option comes in.
+
+## Renotify
+
+This largely applies to mobile devices at the time of writing. Setting this option makes new
+notifications vibrate and play a system sound.
+
+There are scenarios where you might want a replacing notification to notify the user rather than
+silently update. Chat applications are a good example. In this case, you should set `tag` and
+`renotify` to `true`.
+
+```js
+const title = 'Notification 2 of 2';
+
+const options = {
+  tag: 'renotify',
+  renotify: true,
+};
+
+registration.showNotification(title, options);
+```
+
+{% Aside 'warning' %}
+If you set `renotify` to `true` on a notification without a `tag`, you'll get the following error:
+`TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag`
+{% endAside %}
+
+## Silent
+
+This option allows you to show a new notification but prevents the default behavior of vibration,
+sound and turning on the device's display.
+
+This is ideal if your notifications don't require immediate attention from the user.
+
+```js
+const title = 'Silent Notification';
+
+const options = {
+  silent: true,
+};
+
+registration.showNotification(title, options);
+```
+
+Note: If you define both `silent` and `renotify`, `silent` will take precedence.
+
+## Requires interaction
+
+Chrome on desktop will show notifications for a set time period before hiding them. Chrome on
+Android doesn't have this behavior. Notifications are displayed until the user interacts with them.
+
+To force a notification to stay visible until the user interacts with it, add the `requireInteraction`
+option. This will show the notification until the user dismisses or clicks your notification.
+
+```js
+const title = 'Require Interaction Notification';
+
+const options = {
+  requireInteraction: true,
+};
+
+registration.showNotification(title, options);
+```
+
+Use this option with consideration. Showing a notification and forcing the user to stop what
+they are doing to dismiss your notification can be frustrating.
+
+In the next section, we are going to look at some of the common patterns used on the web for
+managing notifications and performing actions such as opening pages when a notification is clicked.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* Notification Behavior
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-overview/index.md b/src/site/content/en/blog/push-notifications-overview/index.md
new file mode 100644
index 00000000000..da22f0e8073
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-overview/index.md
@@ -0,0 +1,262 @@
+---
+layout: post
+title: Push notifications overview
+subhead: >
+  An overview of what push notifications are, why you might use them,
+  and how they work.
+description: >
+  An overview of what push notifications are, why you might use them,
+  and how they work.
+authors:
+  - kaycebasques
+  - mattgaunt
+date: 2020-11-10
+updated: 2020-12-06
+codelabs:
+  - push-notifications-server-codelab
+  - push-notifications-client-codelab
+tags:
+  - notifications
+  - service-worker
+  - progressive-web-apps
+  - permissions
+  - mobile
+  - network
+  - capabilities
+---
+
+## What are push notifications? {: #what }
+
+Push messages enable you to bring information to the attention of your
+users even when they're not using your website. They're called **push**
+messages because you can "push" information to your users even when they're
+not active. Compare [Push
+technology](https://en.wikipedia.org/wiki/Push_technology) with [Pull
+technology](https://en.wikipedia.org/wiki/Pull_technology) to understand this
+concept further.
+
+Notifications present small chunks of information to a user. Websites can use
+notifications to tell users about important, time-sensitive events, or actions
+the user needs to take. The look and feel of notifications varies between platforms:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yC2ZZRuLFnnYGGmPUu9h.png", alt="Examples of notifications on macOS and Android.", width="800", height="361" %}
+  <figcaption>Examples of notifications on macOS and Android.</figcaption>
+</figure>
+
+Push messages and notifications are two separate but complementary technologies.
+Push is the technology for sending messages from your server to users even when
+they're not actively using your website. Notifications is the technology for
+displaying the pushed information on the user's device. It's possible to use
+notifications without push messaging. One day it may also be possible to use
+push messages without user-facing notifications (**silent push**) but browsers
+currently don't allow that. In practice they're usually used together.
+A non-technical user probably won't understand the difference between push
+messages and notifications. In this collection when
+we say **push notifications** we mean the combination of pushing a message
+followed by displaying it as a notification. When we say **push messages**
+we are referring to push technology on its own. And when we say **notifications**
+we're referring to notification technology on its own.
+
+## Why use push notifications? {: #why }
+
+* For users, push notifications are a way to receive **timely**, **relevant**,
+  and **precise** information.
+* For you (a website owner), push notifications are a way to increase user
+  engagement.
+
+{% Aside 'warning' %}
+  If you try to use push notifications for content that your users don't find
+  timely, relevant, and precise, you'll probably end up annoying your users
+  and reducing overall engagement.
+{% endAside %}
+
+## How do push notifications work? {: #how }
+
+At a high-level, the key steps for implementing push notifications are:
+
+1. Adding client logic to ask the user for permission to send push notifications, and
+   then sending client identifier information to your server for storage in a database.
+1. Adding server logic to push messages to client devices.
+1. Adding client logic to receive messages that have been pushed to the device
+   and displaying them as notifications.
+
+The rest of this page explains these steps in more detail.
+
+### Get permission to send push notifications {: #permission }
+
+First, your website needs to get the user's permission to send push notifications.
+This should be triggered by a user gesture, such as clicking a **Yes** button
+next to a `Do you want to receive push notifications?` prompt. After that confirmation,
+call [`Notification.requestPermission()`][requestPermission]. The operating system or
+browser on the user's device will probably present some kind of UI to formally confirm that the
+user wants to opt in to push notifications. This UI varies across platforms.
+
+### Subscribe the client to push notifications {: #subscription }
+
+After you get permission, your website needs to initiate the process of
+subscribing the user to push notifications. This is done through JavaScript,
+using the [Push API][1]. You'll need to provide a public authentication key
+during the subscription process, which you'll learn more about later. After
+you kick off the subscription process, the browser makes a network request
+to a web service known as a push service, which you'll also learn more about later.
+
+Assuming that the subscription was successful, the browser returns a
+[`PushSubscription`](https://developer.mozilla.org/docs/Web/API/PushSubscription)
+object. You'll need to store this data long-term.
+Usually this is done by sending the information to a server that you control,
+and then having the server store it in a database.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/F7gyVwzozw0eYkbTBChu.svg", alt="Get permission to send push messages. Get PushSubscription. Send
+PushSubscription to your server.", width="800", height="213" %}
+
+### Send a push message {: #send }
+
+Your server doesn't actually send the push message directly to a client. A
+**push service** does that. A push service is a web service controlled by your
+user's browser vendor. When you want to send a push notification to a client you need
+to make a web service request to a push service. The web service request that
+you send to the push service is known as a **web push protocol request**. The
+web push protocol request should include:
+
+* What data to include in the message.
+* What client to send the message to.
+* Instructions on how the push service should deliver the message. For example, you
+  can specify that the push service should stop attempting to send the message
+  after 10 minutes.
+
+Normally you make the web push protocol request through a server that you control.
+Of course, your server doesn't have to construct the raw web service request
+itself. There are libraries that can handle that for you, such as the
+[web-push-libs](https://github.com/web-push-libs/). But the underlying mechanism is
+a web service request over HTTP.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BD7hUXHhprQfUgWWGsMk.svg", alt="Your server sends a web push protocol request to the push service and the push service sends to the message to the user's device.", width="800", height="220" %}
+
+The push service receives your request, authenticates it, and routes the push
+message to the appropriate client. If the client's browser is offline, the push
+service queues the push message until the browser comes online.
+
+Each browser uses whatever push service it wants. You as a website developer
+have no control over that. This isn't a problem because the web push protocol
+request is [standardized](https://tools.ietf.org/html/draft-ietf-webpush-protocol).
+In other words, you don't have to care which push service the browser vendor is
+using. You just need to make sure that your web push protocol request follows the spec.
+Among other things, the spec states that the request must include certain headers
+and the data must be sent as a stream of bytes.
+
+You do, however, need to make sure that you're sending the web push protocol
+request to the correct push service. The `PushSubscription` data that the
+browser returned to you during the subscription process provides this
+information. A `PushSubscription` object looks like this:
+
+```json
+{
+  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
+  "expirationTime": null,
+  "keys": {
+    "p256dh": "BGyyVt9FFV…",
+    "auth": "R9sidzkcdf…"
+  }
+}
+```
+
+The domain of the `endpoint` is essentially the push service. The path of the
+`endpoint` is client identifier information that helps the push service determine
+exactly which client to push the message to.
+
+The `keys` are used for encryption, which is explained next.
+
+#### Encrypt the push message {: #encrypt }
+
+The data that you send to a push service must be encrypted. This prevents
+the push service from being able to view the data you're sending to the client.
+Remember that the browser vendor decides what push service to use, and that
+push service could theoretically be unsafe or insecure. Your server must use
+the `keys` provided in the `PushSubscription` to encrypt its web push protocol
+requests.
+
+#### Sign your web push protocol requests {: #sign }
+
+The push service provides a way to prevent anyone else from sending messages to your
+users. Technically you don't have to do this but the easiest implementation on
+Chrome requires it. It's optional on Firefox. Other browsers may require it
+in the future.
+
+This workflow involves a private key and public key that are unique to your
+application. The authentication process roughly works like this:
+
+* You generate the private and public key as a one-off task. The combination
+  of the private and public key is known as the
+  **application server keys**. You might also see them called the **VAPID
+  keys**. [VAPID](https://tools.ietf.org/html/draft-thomson-webpush-vapid-02) is
+  the spec that defines this authentication process.
+* When you subscribe a client to push notifications from your JavaScript code,
+  you provide your public key. When the push service generates an `endpoint`
+  for the device, it associates the provided public key with the `endpoint`.
+* When you send a web push protocol request, you sign some JSON information
+  with your private key.
+* When the push service receives your web push protocol request, it uses the stored
+  public key to authenticate the signed information. If the signature is valid
+  then the push service knows that the request came from a server with the
+  matching private key.
+
+#### Customize the delivery of the push message {: #customize }
+
+The web push protocol request spec also defines parameters that let you
+customize how the push service attempts to send the push message to the client.
+For example, you can customize:
+
+* The Time-To-Live (TTL) of a message, which defines how long the push service should
+  attempt to deliver a message.
+* The urgency of the message, which is useful in case the push service is preserving
+  the client's battery life by only delivering high-priority messages.
+* The topic of a message, which replaces any pending messages of the same topic
+  with the latest message.
+
+### Receive and display the pushed messages as notifications {: #notification }
+
+Once you've sent the web push protocol request to the push service, the push service keeps
+your request queued until one of the following events happens:
+
+1. The client comes online and the push service delivers the push message.
+1. The message expires.
+
+When a client browser receives a pushed message, it decrypts the push message
+data and dispatches a `push` event to your [service
+worker](/service-workers-cache-storage/#service-workers). A service worker is
+basically JavaScript code that can run in the background, even when your website
+isn't open or the browser is closed. In your service worker's `push` event
+handler you call `ServiceWorkerRegistration.showNotification()` to display the information
+as a notification.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2pLZ4T0vVrG3nqitaAeH.svg", alt="Message arrives on device. Browser wakes up service worker. Push event is dispatched.", width="800", height="238" %}
+
+## Where to go next
+
+* Web Push Notification Overview
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
+
+
+
+[1]: https://developer.mozilla.org/docs/Web/API/Push_API
+[3]: https://developer.mozilla.org/docs/Web/API/Service_Worker_API
+[4]: /web/fundamentals/push-notifications
+[5]: /web/fundamentals/push-notifications/subscribing-a-user
+[requestPermission]: https://developer.mozilla.org/docs/Web/API/Notification/requestPermission
+[showNotification]: https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification
diff --git a/src/site/content/en/blog/push-notifications-permissions-ux/index.md b/src/site/content/en/blog/push-notifications-permissions-ux/index.md
new file mode 100644
index 00000000000..368ff17cd30
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-permissions-ux/index.md
@@ -0,0 +1,195 @@
+---
+layout: post
+title: Permission UX
+authors:
+  - mattgaunt
+date: 2016-06-30
+updated: 2019-06-06
+tags:
+  - notifications
+---
+
+The natural step after getting a `PushSubscription` and saving it our server is
+to trigger a push message, but there is one thing I flagrantly glossed over. The
+user experience when asking for permission from the user to send them push
+messages.
+
+Sadly, very few sites give much consideration to how they ask their user for
+permission, so let's take a brief aside to look at both good and bad UX.
+
+## Common patterns
+
+There have been a few common patterns emerging that should guide and help you when
+deciding what is best for your users and use case.
+
+### Value proposition
+
+Ask users to subscribe to push at a time when the benefit is obvious.
+
+For example, a user has just bought an item on an online store and finished the
+checkout flow. The site can then offer updates on the delivery status.
+
+There are a range of situations where this approach works:
+
+- A particular item is out of stock, would you like to be notified when it's next available?
+- This breaking news story will be regularly updated, would you like to be notified as the
+  story develops?
+- You're the highest bidder, would you like to be notified if you are outbid?
+
+These are all points where the user has invested in your service and there
+is a clear value proposition for them to enable push notifications.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/LC9ub0f2q77XwKpBM8Hu.png", alt="Owen Campbell-Moore's example of good UX for push.", width="800", height="1352" %}
+
+created a mock of a hypothetical airline
+website to demonstrate this approach.
+
+After the user has booked a flight it asks if the user would like notifications of flight
+delays.
+
+Note that this is a custom UI from the website.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/Kt3PPi4trxkE6K85DtgR.png", alt="Owen Campbell-Moore's example of good UX for the permission prompt.", width="800", height="1352" %}
+
+Another nice touch to Owen's demo is that if the user clicks to enable
+notifications, the site adds a semi-transparent overlay on the entire page when
+it shows the permission prompt. This draws the users attention to the
+permission prompt.
+
+The alternative to this example, the **bad UX** for asking permission, is to request
+permission as soon as a user lands on the airline's site.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/mgcQQkVIletBpXFUrmGX.png", alt="Owen Campbell-Moore's example of bad UX for push.", width="800", height="1371" %}
+
+This approach provides no context as to why notifications are needed or
+useful to the user. The user is also blocked from achieving their original
+task (i.e. book a flight) by this permission prompt.
+
+### Double Permission
+
+You may feel that your site has a clear use case for push messaging and as
+a result want to ask the user for permission as soon as possible.
+
+For example instant messaging and email clients. Showing a message for a
+new message or email is an established user experience across a range of
+platforms.
+
+For these category of apps, it's worth considering the double permission
+pattern.
+
+First show a fake permission prompt that your website controls, consisting
+of buttons to allow or ignore the permission request. If the user clicks
+allow, request permission, triggering the real browser permission prompt.
+
+With this approach you display a custom permission prompt in your web app
+which asks the user to enable notifications. By doing this the user can
+chose enable or disable without your website running the risk of being
+permanently blocked. If the user selects enable on the custom UI, display
+the actual permission prompt, otherwise hide your custom pop-up and ask
+some other time.
+
+A good example of this is . They show a prompt at
+the top of their page once you've signed in asking if you'd like to enable notifications.
+
+### Settings Panel
+
+You can move notifications into a settings panel, giving users an easy way
+to enable and disable push messaging, without the need of cluttering your
+web app's UI.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/l4PARykO7nv9Z5ogOR6D.png", alt="When you first load the page, there is no prompt.", width="800", height="1388" %}
+
+A good example of this is .
+When you first load up the Google I/O site, you aren't asked to do anything,
+the user is left to explore the site.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/eLcOvHOUA2L5hRpa2AHO.png", alt="The settings panel on Google IO's web app for push messaging.", width="800", height="1388" %}
+
+After a few visits, clicking the menu item on the right reveals a settings
+panel allowing the user to set up and manage notifications.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/oYEbRCEdXeUOrHOY2fCa.png", alt="Google IO's web app displaying the permission prompt.", width="800", height="1388" %}
+
+Clicking on the checkbox displays the permission prompt. No hidden surprises.
+
+After the permission has been granted, the checkbox is checked and the user
+is good to go. The great thing about this UI is that users can enable and
+disable notifications from one location on the website.
+
+### Passive approach
+
+One of the easiest ways to offer push to a user is to have a button
+or toggle switch that enables / disables push messages in a location
+on the page that is consistent throughout a site.
+
+This doesn't drive users to enable push notifications, but offers a
+reliable and easy way for users to opt in and out of engaging with your
+website. For sites like blogs that might have some regular viewers as well
+as high bounce rates, this is a solid option as it targets regular viewers
+without annoying drive-by visitors.
+
+On my personal site, I have a toggle switch for push messaging in the footer.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ErFqMyTCspoGislhKxLX.png", alt="Example of Gauntface.com push notification toggle in
+footer", width="800", height="483" %}
+
+It's fairly out of the way, but for regular visitors it should get enough
+attention from readers wanting to get updates. One-time visitors are
+completely unaffected.
+
+If the user subscribes to push messaging, the state of the toggle switch
+changes and maintains state throughout the site.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/lLVT0jG2MY1DvLJZzkeu.png", alt="Example of Gauntface.com with notifications
+enabled", width="800", height="483" %}
+
+### The bad UX
+
+Those are some of the common practices I've noticed on the web. Sadly, there is one very common
+bad practice.
+
+The worst thing you can do is to show the permission dialog to users as soon as they
+land on your site.
+
+They have zero context on why they are being asked for a permission, they may
+not even know what your website is for, what it does or what it offers. Blocking
+permissions at this point out of frustration is not uncommon, this pop-up is
+getting in the way of what they are trying to do.
+
+Remember, if the user _blocks_ the permission request, your web app can't ask for permission
+again. To get permission after being blocked, the user has to change the permission in the
+browser's UI and doing so is not easy, obvious or fun for the user.
+
+No matter what, don't ask for permission as soon as the user opens your site, consider some
+other UI or approach that has an incentive for the user to grant permission.
+
+### Offer a way out
+
+In addition to considering the UX to subscribe a user to push, **please** consider how a user
+should unsubscribe or opt out of push messaging.
+
+The number of sites that ask for permission as soon as the page loads and then
+offer no UI for disabling push notifications is astounding.
+
+Your site should explain to your users how they can disable push. If you don't, users are
+likely to take the nuclear option and block permission permanently.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* Permission UX
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-server-codelab/index.md b/src/site/content/en/blog/push-notifications-server-codelab/index.md
new file mode 100644
index 00000000000..cad89347138
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-server-codelab/index.md
@@ -0,0 +1,293 @@
+---
+layout: codelab
+title: "Codelab: Build a push notification server"
+authors: 
+  - kaycebasques
+  - katejeffreys
+description: >
+  A step-by-step interactive tutorial that shows you how to build a
+  server that manages push notification subscriptions and sends
+  web push protocol requests to a push service.
+date: 2020-11-11
+updated: 2020-12-06
+glitch: push-notifications-server-codelab-incomplete
+related_post: push-notifications-overview
+tags:
+  - notifications
+  - progressive-web-apps
+  - mobile
+  - network
+  - capabilities
+---
+
+This codelab shows you, step-by-step, how to build a push notification server.
+By the end of the codelab you'll have a server that:
+
+* Keeps track of push notification subscriptions (i.e. the server creates a
+  new database record when a client opts in to push notifications, and it
+  deletes an existing database record when a client opts out)
+* Sends a push notification to a single client
+* Sends a push notification to all subscribed clients
+
+This codelab is focused on helping you learn by doing and doesn't
+talk about concepts much. Check out 
+[How do push notifications work?](/push-notifications-overview/#how)
+to learn about push notification concepts.
+
+The client code of this codelab is already complete. You'll only be
+implementing the server in this codelab. To learn how to implement a
+push notification client, check out [Codelab: Build a push notification
+client](/push-notifications-client-codelab).
+
+Check out [push-notifications-server-codelab-complete](https://push-notifications-server-codelab-complete.glitch.me/)
+([source](https://glitch.com/edit/#!/push-notifications-server-codelab-complete))
+to see the complete code.
+
+## Browser compatibility
+
+This codelab is known to work with the following operating system and browser combinations:
+
+* Windows: Chrome, Edge
+* macOS: Chrome, Firefox
+* Android: Chrome, Firefox
+
+This codelab is known to **not** work with the following operating systems
+(or operating system and browser combinations):
+
+* macOS: Brave, Edge, Safari
+* iOS
+
+## Application stack {: #stack }
+
+* The server is built on top of [Express.js](https://expressjs.com/).
+* The [web-push](https://www.npmjs.com/package/web-push) Node.js library
+  handles all of the push notification logic.
+* Subscription data is written to a JSON file using [lowdb](https://www.npmjs.com/package/lowdb).
+
+You don't have to use any of these technologies to implement push notifications.
+We chose these technologies because they provide a reliable codelab experience.
+
+## Setup {: #setup }
+
+### Get an editable copy of the code {: #remix }
+
+The code editor that you see to the right of these instructions will be called
+the **Glitch UI** throughout this codelab.
+
+{% Instruction 'remix', 'ol' %}
+
+### Set up authentication {: #authentication }
+
+Before you can get push notifications working, you need to set up
+your server and client with authentication keys.
+See [Sign your web push protocol requests](/push-notifications-overview/#sign)
+to learn why.
+
+1. Open the Glitch terminal by clicking **Tools** and then clicking **Terminal**.
+1. In the terminal, run `npx web-push generate-vapid-keys`. Copy the private key
+   and public key values.
+1. Open `.env` and update `VAPID_PUBLIC_KEY` and `VAPID_PRIVATE_KEY`. Set
+   `VAPID_SUBJECT` to `mailto:test@test.test`. All of these values should be wrapped
+   in double quotes. After making your updates, your `.env` file should look
+   similar to this:
+
+```text
+VAPID_PUBLIC_KEY="BKiwTvD9HA…"
+VAPID_PRIVATE_KEY="4mXG9jBUaU…"
+VAPID_SUBJECT="mailto:test@test.test"
+```
+
+1. Close the Glitch terminal.
+
+{% Aside 'gotchas' %}
+  Environment variable values (the stuff in `.env`) are unique to a single Glitch project.
+  If you remix your project, the values in `.env` won't get copied over.
+{% endAside %}
+
+1. Open `public/index.js`.
+1. Replace `VAPID_PUBLIC_KEY_VALUE_HERE` with the value of your public key.
+
+## Manage subscriptions {: #manage }
+
+Your client handles most of the subscription process. The main
+things your server needs to do are save new push notification subscriptions
+and delete old subscriptions. These subscriptions are what enable you to
+push messages to clients in the future.
+See [Subscribe the client to push notifications](/push-notifications-overview/#subscription)
+for more context about the subscription process.
+
+### Save new subscription information {: #save }
+
+{% Instruction 'preview', 'ol' %}
+
+{% Aside 'key-term' %}
+  We'll refer to the tab that you just opened as the **app tab**.
+{% endAside %}
+
+1. Click **Register service worker** in the app tab. In the status box you
+   should see a message similar to this:
+
+```text
+Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
+```
+
+1. In the app tab click **Subscribe to push**. Your browser or operating system will probably 
+ask you if you want to let the website send you push notifications. Click **Allow** (or whatever 
+equivalent phrase your browser/OS uses). In the status box you should see a message similar 
+to this:
+
+```text
+Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
+```
+
+{% Aside %}
+  The endpoint URL changes depending on what browser you're using.
+  For example, on Firefox the URL starts with `https://updates.push.services.mozilla.com/…`.
+{% endAside %}
+
+1. Go back to your code by clicking **View Source** in the Glitch UI.
+1. Open the Glitch Logs by clicking **Tools** and then clicking **Logs**. You
+   should see `/add-subscription` followed by some data. `/add-subscription` is
+   the URL that the client sends a
+   [POST](https://developer.mozilla.org/docs/Web/HTTP/Methods/POST)
+   request to when it wants to subscribe to push notifications. The data that
+   follows is the client's subscription information that you need to save.
+1. Open `server.js`.
+1. Update the `/add-subscription` route handler logic with the following code:
+
+```js/3-6/1-2
+app.post('/add-subscription', (request, response) => {
+  console.log('/add-subscription');
+  console.log(request.body);
+  console.log(`Subscribing ${request.body.endpoint}`);
+  db.get('subscriptions')
+    .push(request.body)
+    .write();
+  response.sendStatus(200);
+});
+```
+
+{% Aside %}
+  The database writes to `.data/db.json`. To inspect this file in Glitch,
+  click **Tools**, then click **Terminal**, then run `cat .data/db.json`
+  in the Terminal. `.data/db.json` is deleted every time that you edit your app.
+  This is because Glitch runs the `start` script in `package.json` every time you
+  edit your app, and that script includes a call to `rm .data/db.json`.
+{% endAside %}
+
+### Delete old subscription information 
+
+1. Go back to the app tab.
+1. Click **Unsubscribe from push**.
+1. Look at the Glitch Logs again. You should see `/remove-subscription` followed
+   by the client's subscription information.
+1. Update the `/remove-subscription` route handler logic with the following code:
+
+```js/3-6/1-2
+app.post('/remove-subscription', (request, response) => {
+  console.log('/remove-subscription');
+  console.log(request.body);
+  console.log(`Unsubscribing ${request.body.endpoint}`);
+  db.get('subscriptions')
+    .remove({endpoint: request.body.endpoint})
+    .write();
+  response.sendStatus(200);
+});
+```
+
+## Send notifications
+
+As explained in [Send a push message](/push-notifications-overview/#send),
+your server doesn't actually send the push messages directly to clients.
+Rather, it relies on a push service to do that. Your server basically
+just kicks off the process of pushing messages to clients by making web
+service requests (web push protocol requests) to a web service (the push service)
+owned by the browser vendor that your user uses.
+
+1. Update the `/notify-me` route handler logic with the following code:
+
+```js/3-6/1-2
+app.post('/notify-me', (request, response) => {
+  console.log('/notify-me');
+  console.log(request.body);
+  console.log(`Notifying ${request.body.endpoint}`);
+  const subscription = 
+      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
+  sendNotifications([subscription]);
+  response.sendStatus(200);
+});
+```
+
+1. Update the `sendNotifications()` function with the following code:
+
+```js/2-28/1
+function sendNotifications(subscriptions) {
+  // TODO
+  // Create the notification content.
+  const notification = JSON.stringify({
+    title: "Hello, Notifications!",
+    options: {
+      body: `ID: ${Math.floor(Math.random() * 100)}`
+    }
+  });
+  // Customize how the push service should attempt to deliver the push message.
+  // And provide authentication information.
+  const options = {
+    TTL: 10000,
+    vapidDetails: vapidDetails
+  };
+  // Send a push message to each client specified in the subscriptions array.
+  subscriptions.forEach(subscription => {
+    const endpoint = subscription.endpoint;
+    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
+    webpush.sendNotification(subscription, notification, options)
+      .then(result => {
+        console.log(`Endpoint ID: ${id}`);
+        console.log(`Result: ${result.statusCode}`);
+      })
+      .catch(error => {
+        console.log(`Endpoint ID: ${id}`);
+        console.log(`Error: ${error} `);
+      });
+  });
+}
+```
+
+1. Update the `/notify-all` route handler logic with the following code:
+
+```js/3-11/1-2
+app.post('/notify-all', (request, response) => {
+  console.log('/notify-all');
+  response.sendStatus(200);
+  console.log('Notifying all subscribers');
+  const subscriptions =
+      db.get('subscriptions').cloneDeep().value();
+  if (subscriptions.length > 0) {
+    sendNotifications(subscriptions);
+    response.sendStatus(200);
+  } else {
+    response.sendStatus(409);
+  }
+});
+```
+
+1. Go back to the app tab.
+1. Click **Unsubscribe from push** and then click **Subscribe to push** again.
+   This is only necessary because, as mentioned before, Glitch restarts the project
+   every time you edit the code and the project is configured to delete the database on startup.
+1. Click **Notify me**. You should receive a push notification. The title should
+   be `Hello, Notifications!` and the body should be `ID: <ID>` where `<ID>` is a
+   random number.
+1. Open your app on other browsers or devices and try subscribing them to push notifications
+   and then clicking the **Notify all** button. You should receive the same notification on 
+   all of your subscribed devices (i.e. the ID in the body of the push notification should
+   be the same).
+
+## Next steps
+
+* Read [Push notifications overview](/push-notifications-overview)
+  for a deeper conceptual understanding of how push notifications work.
+* Check out [Codelab: Build a push notification client](/push-notifications-client-codelab/)
+  to learn how to build a client that requests notification permission, subscribes
+  the device to receive push notifications, and uses a service worker to receive
+  push messages and display the messages as notifications.
\ No newline at end of file
diff --git a/src/site/content/en/blog/push-notifications-subscribing-a-user/index.md b/src/site/content/en/blog/push-notifications-subscribing-a-user/index.md
new file mode 100644
index 00000000000..eeb5292fb2d
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-subscribing-a-user/index.md
@@ -0,0 +1,441 @@
+---
+layout: post
+title: Subscribing a User
+authors:
+  - mattgaunt
+date: 2016-06-30
+updated: 2019-05-31
+tags:
+  - notifications
+---
+
+The first step is to get permission from the user to send them push messages and then we can
+get our hands on a `PushSubscription`.
+
+The JavaScript API to do this is reasonably straight forward, so let's step
+through the logic flow.
+
+## Feature detection
+
+First we need to check if the current browser actually supports push messaging. We can check if
+push is supported with two simple checks.
+
+1. Check for _serviceWorker_ on _navigator_.
+1. Check for _PushManager_ on _window_.
+
+```js
+if (!('serviceWorker' in navigator)) {
+  // Service Worker isn't supported on this browser, disable or hide UI.
+  return;
+}
+
+if (!('PushManager' in window)) {
+  // Push isn't supported on this browser, disable or hide UI.
+  return;
+}
+```
+
+While browser support is growing quickly for both service worker and
+push messaging, it's always a good idea to feature detect for both and
+[progressively enhance](https://en.wikipedia.org/wiki/Progressive_enhancement).
+
+## Register a service worker
+
+With the feature detect we know that both service workers and Push are supported. The next step
+is to "register" our service worker.
+
+When we register a service worker, we are telling the browser where our service worker file is.
+The file is still just JavaScript, but the browser will "give it access" to the service worker
+APIs, including push. To be more exact, the browser runs the file in a service worker
+environment.
+
+To register a service worker, call `navigator.serviceWorker.register()`, passing in the path to
+our file. Like so:
+
+```js
+function registerServiceWorker() {
+  return navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      console.log('Service worker successfully registered.');
+      return registration;
+    })
+    .catch(function (err) {
+      console.error('Unable to register service worker.', err);
+    });
+}
+```
+
+This function tells the browser that we have a service worker file and where it's located. In
+this case, the service worker file is at `/service-worker.js`. Behind the scenes the browser
+will take the following steps after calling `register()`:
+
+1. Download the service worker file.
+
+1. Run the JavaScript.
+
+1. If everything runs correctly and there are no errors, the promise returned by `register()`
+   will resolve. If there are errors of any kind, the promise will reject.
+
+> If `register()` does reject, double check your JavaScript for typos / errors in Chrome DevTools.
+
+When `register()` does resolve, it returns a `ServiceWorkerRegistration`. We'll use this
+registration to access the [PushManager API](https://developer.mozilla.org/docs/Web/API/PushManager).
+
+### PushManager API browser compatibility
+
+{% BrowserCompat 'api.PushManager' %}
+
+## Requesting permission
+
+We've registered our service worker and are ready to subscribe the user, the next step is to get
+permission from the user to send them push messages.
+
+The API for getting permission is relatively simple, the downside is that
+the API [recently changed from taking a callback to returning a Promise](https://developer.mozilla.org/docs/Web/API/Notification/requestPermission). The
+problem with this, is that we can't tell what version of the API is implemented by the current
+browser, so you have to implement both and handle both.
+
+```js
+function askPermission() {
+  return new Promise(function (resolve, reject) {
+    const permissionResult = Notification.requestPermission(function (result) {
+      resolve(result);
+    });
+
+    if (permissionResult) {
+      permissionResult.then(resolve, reject);
+    }
+  }).then(function (permissionResult) {
+    if (permissionResult !== 'granted') {
+      throw new Error("We weren't granted permission.");
+    }
+  });
+}
+```
+
+In the above code, the important snippet of code is the call to
+`Notification.requestPermission()`. This method will display a prompt to the user:
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/VpF84naCF2Ri7mF3MlhW.png", alt="Permission prompt on desktop and mobile Chrome.", width="800", height="251" %}
+
+Once the user interacted with the permission prompt by pressing Allow, Block, or just closing it,
+we'll be given the result as a string: `'granted'`, `'default'` or `'denied'`.
+
+In the sample code above, the promise returned by `askPermission()` resolves if the permission
+is granted, otherwise we throw an error making the promise reject.
+
+One edge case that you need to handle is if the user clicks the 'Block' button. If this
+happens, your web app will not be able to ask the user for permission again. They'll have to
+manually "unblock" your app by changing its permission state, which is buried
+in a settings panel. Think carefully about how and when you ask the user for permission,
+because if they click block, it's not an easy way to reverse that decision.
+
+The good news is that most users are happy to give permission as long as
+they _know_ why the permission is being asked.
+
+We'll look at how some popular sites ask for permission later on.
+
+## Subscribe a user with PushManager
+
+Once we have our service worker registered and we've got permission, we can subscribe a user by
+calling `registration.pushManager.subscribe()`.
+
+```js
+function subscribeUserToPush() {
+  return navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      const subscribeOptions = {
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(
+          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
+        ),
+      };
+
+      return registration.pushManager.subscribe(subscribeOptions);
+    })
+    .then(function (pushSubscription) {
+      console.log(
+        'Received PushSubscription: ',
+        JSON.stringify(pushSubscription),
+      );
+      return pushSubscription;
+    });
+}
+```
+
+When calling the `subscribe()` method, we pass in an _options_ object, which consists of both
+required and optional parameters.
+
+Lets look at all the options we can pass in.
+
+### userVisibleOnly options
+
+When push was first added to browsers, there was uncertainty about whether developers should be
+able to send a push message and not show a notification. This is commonly referred to as silent
+push, due to the user not knowing that something had happened in the background.
+
+The concern was that developers could do nasty things like track a user's location on an
+ongoing basis without the user knowing.
+
+To avoid this scenario and to give spec authors time to consider how best to support this
+feature, the `userVisibleOnly` option was added and passing in a value of `true` is a symbolic
+agreement with the browser that the web app will show a notification every time a push is
+received (i.e. no silent push).
+
+At the moment you **must** pass in a value of `true`. If you don't include the
+`userVisibleOnly` key or pass in `false` you'll get the following error:
+
+Chrome currently only supports the Push API for subscriptions that will result in
+user-visible messages. You can indicate this by calling
+`pushManager.subscribe({userVisibleOnly: true})` instead. See
+[https://goo.gl/yqv4Q4](https://goo.gl/yqv4Q4) for more details.
+
+It's currently looking like blanket silent push will never be implemented in Chrome. Instead,
+spec authors are exploring the notion of a budget API which will allow web apps a certain
+number of silent push messages based on the usage of a web app.
+
+### applicationServerKey option
+
+We briefly mentioned "application server keys" in the previous section. "Application
+server keys" are used by a push service to identify the application subscribing a user and
+ensure that the same application is messaging that user.
+
+Application server keys are a public and private key pair that are unique to your application.
+The private key should be kept a secret to your application and the public key can be shared
+freely.
+
+The `applicationServerKey` option passed into the `subscribe()` call is the application's public
+key. The browser passes this onto a push service when subscribing the user, meaning the push
+service can tie your application's public key to the user's `PushSubscription`.
+
+The diagram below illustrates these steps.
+
+1. Your web app is loaded in a browser and you call `subscribe()`, passing in your public
+   application server key.
+1. The browser then makes a network request to a push service who will generate an endpoint,
+   associate this endpoint with the applications public key and return the endpoint to the
+   browser.
+1. The browser will add this endpoint to the `PushSubscription`, which is returned via the
+   `subscribe()` promise.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/nHEwbmGFjtttom6DTFAw.svg", alt="Illustration of the public application server key is used in subscribe
+method.", width="800", height="264" %}
+
+When you later want to send a push message, you'll need to create an **Authorization** header
+which will contain information signed with your application server's **private key**. When the
+push service receives a request to send a push message, it can validate this signed **Authorization** header
+by looking up the public key linked to the endpoint receiving the request. If the signature is
+valid the push service knows that it must have come from the application server with the
+**matching private key**. It's basically a security measure that prevents anyone else sending
+messages to an application's users.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/A8NWXbSlEadr12WXrer6.svg", alt="How the private application server key is used when sending a
+message", width="800", height="378" %}
+
+Technically, the `applicationServerKey` is optional. However, the easiest
+implementation on Chrome requires it, and other browsers may require it in
+the future. It's optional on Firefox.
+
+The specification that defines _what_ the application server key should be is
+the [VAPID spec](https://tools.ietf.org/html/draft-thomson-webpush-vapid).
+Whenever you read something referring to _"application server keys"_ or
+_"VAPID keys"_, just remember that they are the same thing.
+
+### How to create application server keys
+
+You can create a public and private set of application server keys by visiting
+[web-push-codelab.glitch.me](https://web-push-codelab.glitch.me/) or you can use the
+[web-push command line](https://github.com/web-push-libs/web-push#command-line)
+to generate keys by doing the following:
+
+```shell
+    $ npm install -g web-push
+    $ web-push generate-vapid-keys
+```
+
+You only need to create these keys once for your application, just make sure you keep the
+private key private. (Yeah, I just said that.)
+
+### Permissions and subscribe()
+
+There is one side effect of calling `subscribe()`. If your web app doesn't have permissions for
+showing notifications at the time of calling `subscribe()`, the browser will request the
+permissions for you. This is useful if your UI works with this flow, but if you want more
+control (and I think most developers will), stick to the `Notification.requestPermission()` API
+that we used earlier.
+
+### What is a PushSubscription?
+
+We call `subscribe()`, pass in some options, and in return we get a promise that resolves to a
+`PushSubscription` resulting in some code like so:
+
+```js
+function subscribeUserToPush() {
+  return navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      const subscribeOptions = {
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(
+          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
+        ),
+      };
+
+      return registration.pushManager.subscribe(subscribeOptions);
+    })
+    .then(function (pushSubscription) {
+      console.log(
+        'Received PushSubscription: ',
+        JSON.stringify(pushSubscription),
+      );
+      return pushSubscription;
+    });
+}
+```
+
+The `PushSubscription` object contains all the required information needed to send a push
+messages to that user. If you print out the contents using `JSON.stringify()`, you'll see the
+following:
+
+```js
+    {
+      "endpoint": "https://some.pushservice.com/something-unique",
+      "keys": {
+        "p256dh":
+    "BIPUL12DLfytvTajnryr2PRdAgXS3HGKiLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
+        "auth":"FPssNDTKnInHVndSTdbKFw=="
+      }
+    }
+```
+
+The `endpoint` is the push services URL. To trigger a push message, make a POST request
+to this URL.
+
+The `keys` object contains the values used to encrypt message data sent with a push message
+(which we'll discuss later on in this section).
+
+## Send a subscription to Your Server
+
+Once you have a push subscription you'll want to send it to your server. It's up to you how you
+do that but a tiny tip is to use `JSON.stringify()` to get all the necessary data out of the
+subscription object. Alternatively you can piece together the same
+result manually like so:
+
+```js
+const subscriptionObject = {
+  endpoint: pushSubscription.endpoint,
+  keys: {
+    p256dh: pushSubscription.getKeys('p256dh'),
+    auth: pushSubscription.getKeys('auth'),
+  },
+};
+
+// The above is the same output as:
+
+const subscriptionObjectToo = JSON.stringify(pushSubscription);
+```
+
+Sending the subscription is done in the web page like so:
+
+```js
+function sendSubscriptionToBackEnd(subscription) {
+  return fetch('/api/save-subscription/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(subscription),
+  })
+    .then(function (response) {
+      if (!response.ok) {
+        throw new Error('Bad status code from server.');
+      }
+
+      return response.json();
+    })
+    .then(function (responseData) {
+      if (!(responseData.data && responseData.data.success)) {
+        throw new Error('Bad response from server.');
+      }
+    });
+}
+```
+
+The node server receives this request and saves the data to a database for use later on.
+
+```js
+app.post('/api/save-subscription/', function (req, res) {
+  if (!isValidSaveRequest(req, res)) {
+    return;
+  }
+
+  return saveSubscriptionToDatabase(req.body)
+    .then(function (subscriptionId) {
+      res.setHeader('Content-Type', 'application/json');
+      res.send(JSON.stringify({data: {success: true}}));
+    })
+    .catch(function (err) {
+      res.status(500);
+      res.setHeader('Content-Type', 'application/json');
+      res.send(
+        JSON.stringify({
+          error: {
+            id: 'unable-to-save-subscription',
+            message:
+              'The subscription was received but we were unable to save it to our database.',
+          },
+        }),
+      );
+    });
+});
+```
+
+With the `PushSubscription` details on our server we are good to send our user
+a message whenever we want.
+
+### FAQs
+
+A few common questions people have asked at this point:
+
+#### Can I change the push service a browser uses?
+
+No. The push service is selected by the browser and as we saw with the
+`subscribe()` call, the browser will make network requests to the push service
+to retrieve the details that make up the _PushSubscription_.
+
+#### Each browser uses a different Push Service, don't they have different API's?
+
+All push services will expect the same API.
+
+This common API is called the
+[Web Push Protocol](https://tools.ietf.org/html/draft-ietf-webpush-protocol)
+and describes the network request
+your application will need to make to trigger a push message.
+
+#### If I subscribe a user on their desktop, are they subscribed on their phone as well?
+
+Unfortunately not. A user must register for push on each browser they wish to
+receive messages on. It's also worth noting that this will require
+the user granting permission on each device.
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* Subscribing a User
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/push-notifications-video/index.md b/src/site/content/en/blog/push-notifications-video/index.md
new file mode 100644
index 00000000000..dc1a8b43fba
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-video/index.md
@@ -0,0 +1,17 @@
+---
+title: Basics of UX 
+date: 2016-06-30
+updated: 2018-09-20
+authors:
+  - petelepage
+tags:
+  - blog
+---
+
+
+{% YouTube id="_dXBibRO0SM" %}
+
+Push notifications are an incredibly effective way to build deeper user
+engagement with your application, and are now available on the web. In this
+video, we'll take a look at how they work and deep-dive into how to
+implement push notifications in web applications, from beginning to end.
diff --git a/src/site/content/en/blog/push-notifications-web-push-protocol/index.md b/src/site/content/en/blog/push-notifications-web-push-protocol/index.md
new file mode 100644
index 00000000000..6d1bd792560
--- /dev/null
+++ b/src/site/content/en/blog/push-notifications-web-push-protocol/index.md
@@ -0,0 +1,703 @@
+---
+layout: post
+title: The Web Push Protocol
+authors:
+  - mattgaunt
+description: >
+  A step-by-step interactive tutorial that shows you how to build a
+  server that manages push notification subscriptions and sends
+  web push protocol requests to a push service.
+date: 2016-06-30
+updated: 2022-05-27
+tags:
+  - notifications
+---
+
+We've seen how a library can be used to trigger push messages, but what
+exactly are these libraries doing?
+
+Well, they're making network requests while ensuring such requests are
+the right format. The spec that defines this network request is the
+[Web Push Protocol](https://tools.ietf.org/html/draft-ietf-webpush-protocol).
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/jjHOGQvZttcOEij3c6UR.svg", alt="Diagram of sending a push message from your server to a push
+service", width="800", height="220" %}
+
+This section outlines how the server can identify itself with application
+server keys and how the encrypted payload and associated data is sent.
+
+This isn't a pretty side of web push and I'm no expert at encryption, but let's look through
+each piece since it's handy to know what these libraries are doing under the hood.
+
+## Application server keys
+
+When we subscribe a user, we pass in an `applicationServerKey`. This key is
+passed to the push service and used to check that the application that subscribed
+the user is also the application that is triggering push messages.
+
+When we trigger a push message, there are a set of headers that we send that
+allow the push service to authenticate the application. (This is defined
+by the [VAPID spec](https://tools.ietf.org/html/draft-thomson-webpush-vapid).)
+
+What does all this actually mean and what exactly happens? Well these are the steps taken for
+application server authentication:
+
+1. The application server signs some JSON information with it's **private application key**.
+1. This signed information is sent to the push service as a header in a POST request.
+1. The push service uses the stored public key it received from
+   `pushManager.subscribe()` to check the received information is signed by
+   the private key relating to the public key. _Remember_: The public key is
+   the `applicationServerKey` passed into the subscribe call.
+1. If the signed information is valid the push service sends the push
+   message to the user.
+
+An example of this flow of information is below. (Note the legend in the bottom left to indicate
+public and private keys.)
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/iRDfZt1TmornyUzjT0qW.svg", alt="Illustration of how the private application server key is used when sending a
+message", width="800", height="378" %}
+
+The "signed information" added to a header in the request is a JSON Web Token.
+
+### JSON web token
+
+A [JSON web token](https://jwt.io/) (or JWT for short) is a way of
+sending a message to a third party such that the receiver can validate
+who sent it.
+
+When a third party receives a message, they need to get the senders
+public key and use it to validate the signature of the JWT. If the
+signature is valid then the JWT must have been signed with the matching
+private key so must be from the expected sender.
+
+There are a host of libraries on [https://jwt.io/](https://jwt.io/) that
+can perform the signing for you and I'd recommend you do that where you
+can. For completeness, let's look at how to manually create a signed JWT.
+
+### Web push and signed JWTs
+
+A signed JWT is just a string, though it can be thought of as three strings joined
+by dots.
+
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/QMpK203iFn9FIWrnFxa3.svg", alt="A illustration of the strings in a JSON Web
+Token", width="800", height="246" %}
+
+The first and second strings (The JWT info and JWT data) are pieces of
+JSON that have been base64 encoded, meaning it's publicly readable.
+
+The first string is information about the JWT itself, indicating which algorithm
+was used to create the signature.
+
+The JWT info for web push must contain the following information:
+
+```json
+{
+  "typ": "JWT",
+  "alg": "ES256"
+}
+```
+
+The second string is the JWT Data. This provides information about the sender of the JWT, who
+it's intended for and how long it's valid.
+
+For web push, the data would have this format:
+
+```json
+{
+  "aud": "https://some-push-service.org",
+  "exp": "1469618703",
+  "sub": "mailto:example@web-push-book.org"
+}
+```
+
+The `aud` value is the "audience", i.e. who the JWT is for. For web push the
+audience is the push service, so we set it to the **origin of the push
+service**.
+
+The `exp` value is the expiration of the JWT, this prevent snoopers from being
+able to re-use a JWT if they intercept it. The expiration is a timestamp in
+seconds and must be no longer 24 hours.
+
+In Node.js the expiration is set using:
+
+```js
+Math.floor(Date.now() / 1000) + 12 * 60 * 60;
+```
+
+It's 12 hours rather than 24 hours to avoid
+any issues with clock differences between the sending application and the push service.
+
+Finally, the `sub` value needs to be either a URL or a `mailto` email address.
+This is so that if a push service needed to reach out to sender, it can find
+contact information from the JWT. (This is why the web-push library needed an
+email address).
+
+Just like the JWT Info, the JWT Data is encoded as a URL safe base64
+string.
+
+The third string, the signature, is the result of taking the first two strings
+(the JWT Info and JWT Data), joining them with a dot character, which we'll
+call the "unsigned token", and signing it.
+
+The signing process requires encrypting the "unsigned token" using ES256. According to the [JWT
+spec](https://tools.ietf.org/html/rfc7519), ES256 is short for "ECDSA using the P-256 curve and
+the SHA-256 hash algorithm". Using web crypto you can create the signature like so:
+
+```js
+// Utility function for UTF-8 encoding a string to an ArrayBuffer.
+const utf8Encoder = new TextEncoder('utf-8');
+
+// The unsigned token is the concatenation of the URL-safe base64 encoded
+// header and body.
+const unsignedToken = .....;
+
+// Sign the |unsignedToken| using ES256 (SHA-256 over ECDSA).
+const key = {
+  kty: 'EC',
+  crv: 'P-256',
+  x: window.uint8ArrayToBase64Url(
+    applicationServerKeys.publicKey.subarray(1, 33)),
+  y: window.uint8ArrayToBase64Url(
+    applicationServerKeys.publicKey.subarray(33, 65)),
+  d: window.uint8ArrayToBase64Url(applicationServerKeys.privateKey),
+};
+
+// Sign the |unsignedToken| with the server's private key to generate
+// the signature.
+return crypto.subtle.importKey('jwk', key, {
+  name: 'ECDSA', namedCurve: 'P-256',
+}, true, ['sign'])
+.then((key) => {
+  return crypto.subtle.sign({
+    name: 'ECDSA',
+    hash: {
+      name: 'SHA-256',
+    },
+  }, key, utf8Encoder.encode(unsignedToken));
+})
+.then((signature) => {
+  console.log('Signature: ', signature);
+});
+```
+
+A push service can validate a JWT using the public application server key
+to decrypt the signature and make sure the decrypted string is the same
+as the "unsigned token" (i.e. the first two strings in the JWT).
+
+The signed JWT (i.e. all three strings joined by dots), is sent to the web
+push service as the `Authorization` header with `WebPush ` prepended, like so:
+
+```text
+Authorization: 'WebPush [JWT Info].[JWT Data].[Signature]';
+```
+
+The Web Push Protocol also states the public application server key must be
+sent in the `Crypto-Key` header as a URL safe base64 encoded string with
+`p256ecdsa=` prepended to it.
+
+```text
+Crypto-Key: p256ecdsa=[URL Safe Base64 Public Application Server Key]
+```
+
+### The Payload Encryption
+
+Next let's look at how we can send a payload with a push message so that when our web app
+receives a push message, it can access the data it receives.
+
+A common question that arises from any who've used other push services is why does the web push
+payload need to be encrypted? With native apps, push messages can send data as plain text.
+
+Part of the beauty of web push is that because all push services use the
+same API (the web push protocol), developers don't have to care who the
+push service is. We can make a request in the right format and expect a
+push message to be sent. The downside of this is that developers could
+conceivably send messages to a push service that isn't trustworthy. By
+encrypting the payload, a push service can't read the data that's sent.
+Only the browser can decrypt the information. This protects the user's
+data.
+
+The encryption of the payload is defined in the [Message Encryption
+spec](https://tools.ietf.org/html/draft-ietf-webpush-encryption).
+
+Before we look at the specific steps to encrypt a push messages payload,
+we should cover some techniques that'll be used during the encryption
+process. (Massive hat tip to Mat Scales for his excellent article on push
+encryption.)
+
+### ECDH and HKDF
+
+Both ECDH and HKDF are used throughout the encryption process and offer benefits for the
+purpose of encrypting information.
+
+#### ECDH: Elliptic Curve Diffie-Hellman key exchange
+
+Imagine you have two people who want to share information, Alice and Bob.
+Both Alice and Bob have their own public and private keys. Alice and Bob
+share their public keys with each other.
+
+The useful property of keys generated with ECDH is that Alice can use her
+private key and Bob's public key to create secret value 'X'. Bob can do
+the same, taking his private key and Alice's public key to
+independently create the same value 'X'. This makes 'X' a shared secret
+and Alice and Bob only had to share their public key. Now Bob and Alice
+can use 'X' to encrypt and decrypt messages between them.
+
+ECDH, to the best of my knowledge, defines the properties of curves which allow this "feature"
+of making a shared secret 'X'.
+
+This is a high level explanation of ECDH, if you want to learn more [I recommend checking out this video](https://www.youtube.com/watch?v=F3zzNa42-tQ).
+
+In terms of code; most languages / platforms come with libraries to make it
+easy to generate these keys.
+
+In node we'd do the following:
+
+```js
+const keyCurve = crypto.createECDH('prime256v1');
+keyCurve.generateKeys();
+
+const publicKey = keyCurve.getPublicKey();
+const privateKey = keyCurve.getPrivateKey();
+```
+
+#### HKDF: HMAC based key derivation function
+
+Wikipedia has a succinct description of [HKDF](https://tools.ietf.org/html/rfc5869):
+
+HKDF is an HMAC based key derivation function that transforms any weak key
+material into cryptographically strong key material. It can be used, for
+example, to convert Diffie Hellman exchanged shared secrets into key material
+suitable for use in encryption, integrity checking or authentication.
+
+Essentially, HKDF will take input that is not particular secure and make it more secure.
+
+The spec defining this encryption requires use of SHA-256 as our hash algorithm
+and the resulting keys for HKDF in web push should be no longer than 256 bits
+(32 bytes).
+
+In node this could be implemented like so:
+
+```js
+// Simplified HKDF, returning keys up to 32 bytes long
+function hkdf(salt, ikm, info, length) {
+  // Extract
+  const keyHmac = crypto.createHmac('sha256', salt);
+  keyHmac.update(ikm);
+  const key = keyHmac.digest();
+
+  // Expand
+  const infoHmac = crypto.createHmac('sha256', key);
+  infoHmac.update(info);
+
+  // A one byte long buffer containing only 0x01
+  const ONE_BUFFER = new Buffer(1).fill(1);
+  infoHmac.update(ONE_BUFFER);
+
+  return infoHmac.digest().slice(0, length);
+}
+```
+
+Hat tip to [Mat Scale's article for this example code](/web/updates/2016/03/web-push-encryption).
+
+This loosely covers [ECDH](https://en.wikipedia.org/wiki/Elliptic_curve_Diffie%E2%80%93Hellman)
+and [HKDF](https://tools.ietf.org/html/rfc5869).
+
+ECDH a secure way to share public keys and generate a shared secret. HKDF is a way to take
+insecure material and make it secure.
+
+This will be used during the encryption of our payload. Next let's look at what we take as
+input and how that's encrypted.
+
+#### Inputs
+
+When we want to send a push message to a user with a payload, there are three inputs we need:
+
+1. The payload itself.
+1. The `auth` secret from the `PushSubscription`.
+1. The `p256dh` key from the `PushSubscription`.
+
+We've seen the `auth` and `p256dh` values being retrieved from a `PushSubscription` but for a
+quick reminder, given a subscription we'd need these values:
+
+```js
+subscription.toJSON().keys.auth;
+subscription.toJSON().keys.p256dh;
+
+subscription.getKey('auth');
+subscription.getKey('p256dh');
+```
+
+The `auth` value should be treated as a secret and not shared outside of your application.
+
+The `p256dh` key is a public key, this is sometimes referred to as the client public key. Here
+we'll refer to `p256dh` as the subscription public key. The subscription public key is generated
+by the browser. The browser will keep the private key secret and use it for decrypting the
+payload.
+
+These three values, `auth`, `p256dh` and `payload` are needed as inputs and the result of the
+encryption process will be the encrypted payload, a salt value and a public key used just for
+encrypting the data.
+
+**Salt**
+
+The salt needs to be 16 bytes of random data. In NodeJS, we'd do the following to create a salt:
+
+```js
+const salt = crypto.randomBytes(16);
+```
+
+**Public / Private Keys**
+
+The public and private keys should be generated using a P-256 elliptic curve,
+which we'd do in Node like so:
+
+```js
+const localKeysCurve = crypto.createECDH('prime256v1');
+localKeysCurve.generateKeys();
+
+const localPublicKey = localKeysCurve.getPublicKey();
+const localPrivateKey = localKeysCurve.getPrivateKey();
+```
+
+We'll refer to these keys as "local keys". They are used _just_ for encryption and have
+_nothing_ to do with application server keys.
+
+With the payload, auth secret and subscription public key as inputs and with a newly generated
+salt and set of local keys, we are ready to actually do some encryption.
+
+#### Shared secret
+
+The first step is to create a shared secret using the subscription public key and our new
+private key (remember the ECDH explanation with Alice and Bob? Just like that).
+
+```js
+const sharedSecret = localKeysCurve.computeSecret(
+  subscription.keys.p256dh,
+  'base64',
+);
+```
+
+This is used in the next step to calculate the Pseudo Random Key (PRK).
+
+#### Pseudo random key
+
+The Pseudo Random Key (PRK) is the combination of the push subscription's auth
+secret, and the shared secret we just created.
+
+```js
+const authEncBuff = new Buffer('Content-Encoding: auth\0', 'utf8');
+const prk = hkdf(subscription.keys.auth, sharedSecret, authEncBuff, 32);
+```
+
+You might be wondering what the `Content-Encoding: auth\0` string is for.
+In short, it doesn't have a clear purpose, although browsers could
+decrypt an incoming message and look for the expected content-encoding.
+The `\0` adds a byte with a value of 0 to end of the Buffer. This is
+expected by browsers decrypting the message who will expect so many bytes
+for the content encoding, followed a byte with value 0, followed by the
+encrypted data.
+
+Our Pseudo Random Key is simply running the auth, shared secret and a piece of encoding info
+through HKDF (i.e. making it cryptographically stronger).
+
+#### Context
+
+The "context" is a set of bytes that is used to calculate two values later on in the encryption
+browser. It's essentially an array of bytes containing the subscription public key and the
+local public key.
+
+```js
+const keyLabel = new Buffer('P-256\0', 'utf8');
+
+// Convert subscription public key into a buffer.
+const subscriptionPubKey = new Buffer(subscription.keys.p256dh, 'base64');
+
+const subscriptionPubKeyLength = new Uint8Array(2);
+subscriptionPubKeyLength[0] = 0;
+subscriptionPubKeyLength[1] = subscriptionPubKey.length;
+
+const localPublicKeyLength = new Uint8Array(2);
+subscriptionPubKeyLength[0] = 0;
+subscriptionPubKeyLength[1] = localPublicKey.length;
+
+const contextBuffer = Buffer.concat([
+  keyLabel,
+  subscriptionPubKeyLength.buffer,
+  subscriptionPubKey,
+  localPublicKeyLength.buffer,
+  localPublicKey,
+]);
+```
+
+The final context buffer is a label, the number of bytes in the subscription public key,
+followed by the key itself, then the number of bytes local public key, followed by the key
+itself.
+
+With this context value we can use it in the creation of a nonce and a content encryption key
+(CEK).
+
+#### Content encryption key and nonce
+
+A [nonce](https://en.wikipedia.org/wiki/Cryptographic_nonce) is a value that prevents replay
+attacks as it should only be used once.
+
+The content encryption key (CEK) is the key that will ultimately be used to encrypt our payload.
+
+First we need to create the bytes of data for the nonce and CEK, which is simply a content
+encoding string followed by the context buffer we just calculated:
+
+```js
+const nonceEncBuffer = new Buffer('Content-Encoding: nonce\0', 'utf8');
+const nonceInfo = Buffer.concat([nonceEncBuffer, contextBuffer]);
+
+const cekEncBuffer = new Buffer('Content-Encoding: aesgcm\0');
+const cekInfo = Buffer.concat([cekEncBuffer, contextBuffer]);
+```
+
+This information is run through HKDF combining the salt and PRK with the nonceInfo and cekInfo:
+
+```js
+// The nonce should be 12 bytes long
+const nonce = hkdf(salt, prk, nonceInfo, 12);
+
+// The CEK should be 16 bytes long
+const contentEncryptionKey = hkdf(salt, prk, cekInfo, 16);
+```
+
+This gives us our nonce and content encryption key.
+
+#### Perform the encryption
+
+Now that we have our content encryption key, we can encrypt the payload.
+
+We create an AES128 cipher using the content encryption key
+as the key and the nonce is an initialization vector.
+
+In Node this is done like so:
+
+```js
+const cipher = crypto.createCipheriv(
+  'id-aes128-GCM',
+  contentEncryptionKey,
+  nonce,
+);
+```
+
+Before we encrypt our payload, we need to define how much padding we wish
+to add to the front of the payload. The reason we'd want to add padding
+is that it prevents the risk of eavesdroppers being able to determine
+"types" of messages based on the payload size.
+
+You must add two bytes of padding to indicate the length of any additional padding.
+
+For example, if you added no padding, you'd have two bytes with value 0, i.e. no padding exists, after these two bytes you'll be reading the payload. If you added 5 bytes of padding, the first two bytes will have a value of 5, so the consumer will then read an additional five bytes and then start reading the payload.
+
+```js
+const padding = new Buffer(2 + paddingLength);
+// The buffer must be only zeros, except the length
+padding.fill(0);
+padding.writeUInt16BE(paddingLength, 0);
+```
+
+We then run our padding and payload through this cipher.
+
+```js
+const result = cipher.update(Buffer.concat(padding, payload));
+cipher.final();
+
+// Append the auth tag to the result -
+// https://nodejs.org/api/crypto.html#crypto_cipher_getauthtag
+const encryptedPayload = Buffer.concat([result, cipher.getAuthTag()]);
+```
+
+We now have our encrypted payload. Yay!
+
+All that remains is to determine how this payload is sent to the push service.
+
+#### Encrypted payload headers & body
+
+To send this encrypted payload to the push service we need to define a few
+different headers in our POST request.
+
+#### Encryption header
+
+The 'Encryption' header must contain the _salt_ used for encrypting the payload.
+
+The 16 byte salt should be base64 URL safe encoded and added to the Encryption header, like so:
+
+```text
+Encryption: salt=[URL Safe Base64 Encoded Salt]
+```
+
+#### Crypto-Key header
+
+We saw that the `Crypto-Key` header is used under the 'Application Server Keys'
+section to contain the public application server key.
+
+This header is also used to share the local public key used to encrypt
+the payload.
+
+The resulting header looks like this:
+
+```text
+Crypto-Key: dh=[URL Safe Base64 Encoded Local Public Key String]; p256ecdsa=[URL Safe Base64 Encoded Public Application Server Key]
+```
+
+#### Content type, length & encoding headers
+
+The `Content-Length` header is the number of bytes in the encrypted
+payload. 'Content-Type' and 'Content-Encoding' headers are fixed values.
+This is shown below.
+
+```text
+Content-Length: [Number of Bytes in Encrypted Payload]
+Content-Type: 'application/octet-stream'
+Content-Encoding: 'aesgcm'
+```
+
+With these headers set, we need to send the encrypted payload as the body
+of our request. Notice that the `Content-Type` is set to
+`application/octet-stream`. This is because the encrypted payload must be
+sent as a stream of bytes.
+
+In NodeJS we would do this like so:
+
+```js
+const pushRequest = https.request(httpsOptions, function(pushResponse) {
+pushRequest.write(encryptedPayload);
+pushRequest.end();
+```
+
+#### More headers?
+
+We've covered the headers used for JWT / Application Server Keys (i.e. how to identify the
+application with the push service) and we've covered the headers used to send an encrypted
+payload.
+
+There are additional headers that push services use to alter the behavior of
+sent messages. Some of these headers are required, while others are optional.
+
+#### TTL header
+
+**Required**
+
+`TTL` (or time to live) is an integer specifying the number of seconds
+you want your push message to live on the push service before it's
+delivered. When the `TTL` expires, the message will be removed from the
+push service queue and it won't be delivered.
+
+```text
+TTL: [Time to live in seconds]
+```
+
+If you set a `TTL` of zero, the push service will attempt to deliver the
+message immediately, **but** if the device can't be reached, your message
+will be immediately dropped from the push service queue.
+
+Technically a push service can reduce the `TTL` of a push message if it
+wants. You can tell if this has happened by examining the `TTL` header in
+the response from a push service.
+
+##### Topic
+
+**Optional**
+
+Topics are strings that can be used to replace a pending messages with a
+new message if they have matching topic names.
+
+This is useful in scenarios where multiple messages are sent while a
+device is offline, and you really only want a user to see the latest
+message when the device is turned on.
+
+##### Urgency
+
+**Optional**
+
+Urgency indicates to the push service how important a message is to the user. This
+can be used by the push service to help conserve the battery life of a user's device by only
+waking up for important messages when battery is low.
+
+The header value is defined as shown below. The default
+value is `normal`.
+
+```text
+Urgency: [very-low | low | normal | high]
+```
+
+#### Everything together
+
+If you have further questions about how this all works you can always see how libraries trigger
+push messages on [the web-push-libs org](https://github.com/web-push-libs).
+
+Once you have an encrypted payload, and the headers above, you just need to make a POST request
+to the `endpoint` in a `PushSubscription`.
+
+So what do we do with the response to this POST request?
+
+#### Response from push service
+
+Once you've made a request to a push service, you need to check the status code
+of the response as that'll tell you whether the request was successful
+or not.
+
+<table>
+  <tr>
+    <th>Status Code</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>201</td>
+    <td>Created. The request to send a push message was received and accepted.
+    </td>
+  </tr>
+  <tr>
+    <td>429</td>
+    <td>Too many requests. Meaning your application server has reached a rate
+    limit with a push service. The push service should include a 'Retry-After'
+    header to indicate how long before another request can be made.</td>
+  </tr>
+  <tr>
+    <td>400</td>
+    <td>Invalid request. This generally means one of your headers is invalid
+    or improperly formatted.</td>
+  </tr>
+  <tr>
+    <td>404</td>
+    <td>Not Found. This is an indication that the subscription is expired
+    and can't be used. In this case you should delete the `PushSubscription`
+    and wait for the client to resubscribe the user.</td>
+  </tr>
+  <tr>
+    <td>410</td>
+    <td>Gone. The subscription is no longer valid and should be removed
+    from application server. This can be reproduced by calling
+    `unsubscribe()` on a `PushSubscription`.</td>
+  </tr>
+  <tr>
+    <td>413</td>
+    <td>Payload size too large. The minimum size payload a push service must
+    support is <a
+href="https://tools.ietf.org/html/draft-ietf-webpush-protocol-10#section-7.2">4096 bytes</a>
+(or 4kb).</td>
+  </tr>
+</table>
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* [Sending Messages with Web Push Libraries](/sending-messages-with-web-push-libraries/)
+* Web Push Protocol
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/pwa-install-addressbar/index.md b/src/site/content/en/blog/pwa-install-addressbar/index.md
new file mode 100644
index 00000000000..f2c74df70a3
--- /dev/null
+++ b/src/site/content/en/blog/pwa-install-addressbar/index.md
@@ -0,0 +1,60 @@
+---
+title: Address Bar Install for Progressive Web Apps on the Desktop
+subhead: Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox).
+authors:
+  - petelepage
+date: 2019-06-12
+updated: 2019-06-12
+description: |
+  Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox).
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+On desktop, there's typically no indication to a user that a Progressive Web
+App is installable, and if it is, the install flow is hidden within the three
+dot menu.
+
+<figure class="float-right">
+  {% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/Clnl7AHL7JTP8XCSqLTX.mp4", muted="true", autoplay="true", loop="true" %}
+</figure>
+
+In Chrome 76 (beta mid-June 2019), we're making it easier for users to install
+Progressive Web Apps on the desktop by adding an install button to the address
+bar (omnibox). If a site meets the
+[Progressive Web App installability criteria][pwa-install-criteria],
+Chrome will automatically show an install icon in the address bar. Clicking the
+button prompts the user to install the PWA.
+
+Like other install events, you can listen for the [`appinstalled`][appinstalled-event]
+event to detect if the user installed your PWA.
+
+
+## Adding your own install prompt
+
+If your PWA has use cases where it’s helpful for a user to install your app,
+for example if you have users who use your app more than once a week, you
+should be promoting the installation of your PWA within the web UI of your app.
+
+To add your own custom install button, listen for the
+[`beforeinstallprompt`][beforeinstallprompt-event] event. When it’s fired,
+save a reference to the event, and update your user interface to let the user
+know they can install your Progressive Web App.
+
+## Patterns for promoting the installation of your PWA
+
+There are three key ways you can promote the installation of your PWA:
+
+* **Automatic browser promotion**, like the address bar install button.
+* **Application UI promotion**, where UI elements appear in the application
+  interface, such as banners, buttons in the header or navigation menu, etc.
+* **Inline promotional patterns** interweave promotions within the site content.
+
+Check out Patterns for [Promoting PWA Installation (mobile)][install-patterns]
+for more details. Its focus is mobile, but many of the patterns are applicable
+for desktop, or can be easily modified to work for desktop experiences.
+
+[pwa-install-criteria]: https://developers.google.com/web/fundamentals/app-install-banners/#criteria
+[appinstalled-event]: https://developers.google.com/web/fundamentals/app-install-banners/#appinstalled
+[beforeinstallprompt-event]: https://developers.google.com/web/fundamentals/app-install-banners/#listen_for_beforeinstallprompt
+[install-patterns]: https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
diff --git a/src/site/content/en/blog/pwa-install-patterns/index.md b/src/site/content/en/blog/pwa-install-patterns/index.md
new file mode 100644
index 00000000000..dcf3869a0d8
--- /dev/null
+++ b/src/site/content/en/blog/pwa-install-patterns/index.md
@@ -0,0 +1,33 @@
+---
+title: How do I notify users that my PWA is installable?
+subhead: How to promote installation of Progressive Web Apps and best practices.
+authors:
+  - petelepage
+date: 2019-06-04
+updated: 2019-06-04
+description: |
+  How to promote installation of Progressive Web Apps and best practices.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+If your PWA has use cases where it’s helpful for a user to install your app,
+for example if you have users who use your app more than once a week, you
+should be promoting the installation of your PWA within the web UI of your app.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0Nl5R8kgpRnaFI4i1l95.png", alt="In-feed promo banner screenshot", width="800", height="1000", class="screenshot" %}
+</figure>
+
+**But how should you notify the user that your PWA can be installed?**
+
+Check out [Patterns for Promoting PWA Installation][patterns-mobile], a series
+of recommended patterns and best practices that you can use to promote the
+installation of your Progressive Web App.
+
+It includes patterns for notifying users within the core UI of your app,
+within your app's content, or just letting the browser notify the user. And,
+it includes recommendations on how to place the notification for different
+types of apps.
+
+[patterns-mobile]: https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
diff --git a/src/site/content/en/blog/pwas-on-oculus-2/index.md b/src/site/content/en/blog/pwas-on-oculus-2/index.md
new file mode 100644
index 00000000000..37de3ff314e
--- /dev/null
+++ b/src/site/content/en/blog/pwas-on-oculus-2/index.md
@@ -0,0 +1,582 @@
+---
+layout: post
+title: 'PWAs on Oculus Quest 2'
+authors:
+  - thomassteiner
+  - alexeyrodionov
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/B7zNhOVvzK3O71sQyLKe.jpg
+alt:
+  'Person wearing an Oculus Quest 2 with a PWA sticker on it spreading their arms with Quest
+  controllers in both hands.'
+subhead: >
+  The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta.
+  Developers can now build and distribute 2D and 3D Progressive Web Apps (PWA) that take advantage
+  of Oculus Quest 2's multitasking feature.
+description: >
+  The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta.
+  Developers can now build and distribute 2D and 3D Progressive Web Apps (PWA) that take advantage
+  of Oculus Quest 2's multitasking feature. This article describes the experience and how to build,
+  sideload, and test your PWA on the Oculus Quest 2.
+date: 2022-01-10
+updated: 2022-12-04
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+  - virtual-reality
+  - augmented-reality
+  - webxr
+---
+
+## The Oculus Quest&nbsp;2
+
+The [Oculus Quest&nbsp;2](https://www.oculus.com/quest-2/) is a virtual reality (VR) headset created
+by Oculus, a division of Meta. It is the successor to the company's previous headset, the Oculus
+Quest. The device is capable of running as both a standalone headset with an internal, Android-based
+operating system, and with Oculus-compatible VR software running on a desktop computer when
+connected over USB or Wi-Fi. It uses the Qualcomm
+[Snapdragon XR2](https://www.qualcomm.com/news/onq/2020/10/29/oculus-quest-2-how-snapdragon-xr2-powers-next-generation-vr)
+system on a chip with 6&nbsp;GB of RAM. The Quest&nbsp;2's display is a singular fast-switch LCD
+panel with 1,832&nbsp;×&nbsp;1,920 pixels per eye resolution that runs at a refresh rate of up to
+120&nbsp;Hz.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/g0IQmlLaOiLWqwQuvnhQ.jpeg", alt="Oculus Quest 2 device with controllers.", width="800", height="304" %}
+
+## The Oculus Browser
+
+Currently there are three browsers available for the Oculus Quest&nbsp;2:
+[Wolvic](https://www.oculus.com/experiences/quest/4812663595466206/), a successor to
+[Firefox Reality](https://www.oculus.com/experiences/quest/2180252408763702/), and the built-in
+[Oculus Browser](https://www.oculus.com/experiences/quest/1916519981771802). This article focuses on
+the latter. The Oculus website
+[introduces](https://developer.oculus.com/documentation/web/browser-intro/) the Oculus Browser as
+follows.
+
+_"Oculus Browser provides support for the latest web standards and other technologies to help you
+create VR experiences on the web. Today's 2D web sites work great in Oculus Browser because it's
+powered by the Chromium rendering engine. It's further optimized for Oculus headsets to get the best
+performance and to enable web developers take advantage of the full potential of VR with new APIs,
+like WebXR. Through WebXR, we're opening the doors to the next frontier of the web."_
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/R4SwrV05Pqap583Rzr4L.jpeg", alt="Oculus Browser with three browser windows open.", width="800", height="450" %}
+
+### User agent
+
+The browser's user agent string at the time of writing is as follows.
+
+```bash
+Mozilla/5.0 (X11; Linux x86_64; Quest 2)
+AppleWebKit/537.36 (KHTML, like Gecko)
+OculusBrowser/18.1.0.2.46.337441587
+SamsungBrowser/4.0
+Chrome/95.0.4638.74
+VR
+Safari/537.36
+```
+
+As you can see, the current version `18.1.0.2.46.337441587` of the Oculus Browser is based on Chrome
+`95.0.4638.74`, that is only one version behind the current stable version of Chrome, which is
+`96.0.4664.110`. If the user switches to mobile mode, `VR` changes to `Mobile VR`.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/E3929PxcGa7GCxKoTffh.png", alt="Oculus Browser About page.", width="800", height="449" %}
+
+### User interface
+
+The browser's user interface (shown above) has the following features (top row from left to right):
+
+- Back button
+- Reload button
+- Site information
+- URL bar
+- Create bookmark button
+- Resize button with narrow, medium, and wide options as well as a zoom feature
+- Request mobile website button
+- Menu button with the following options:
+  - Enter private mode
+  - Close all tabs
+  - Settings
+  - Bookmarks
+  - Downloads
+  - History
+  - Clear browsing data
+
+The bottom row includes the following features:
+
+- Close button
+- Minimize button
+- Three dots button with back, forward, and reload options
+
+### Refresh rate and device pixel ratio
+
+For Oculus Quest&nbsp;2, Oculus Browser renders both 2D&nbsp;web page content and WebXR at a
+90&nbsp;Hz refresh rate. When watching fullscreen media, Oculus Browser optimizes the device refresh
+rate based on the frame rate of the video, for example, 24&nbsp;fps. The Oculus Quest&nbsp;2 has a
+device pixel ratio of 1.5 for crisp text.
+
+## PWAs in Oculus Browser and the Oculus Store
+
+On October&nbsp;28, 2021, [Jacob Rossi](https://twitter.com/jacobrossi), Product Management Lead at
+Meta (Oculus), [shared](https://twitter.com/jacobrossi/status/1453776349299019778) that
+[PWAs were coming](https://developer.oculus.com/pwa/) to Oculus Quest and Oculus Quest&nbsp;2. In
+the following, I describe the PWA experience on Oculus and explain how to build, sideload, and test
+your PWA on the Oculus Quest&nbsp;2.
+
+### State sharing
+
+Login state is shared between Oculus Browser and PWAs, allowing users to seamlessly switch between
+the two. Naturally, [Facebook Login](https://developers.facebook.com/docs/facebook-login/overview/)
+is supported out of the box. The Oculus Browser includes a password manager that allows users to
+store and share their passwords securely between the browser and installed app experiences.
+
+### PWA window sizes
+
+Browser windows and windows of installed PWAs can be freely resized by the user. The height can vary
+between 625&nbsp;px and 1,200&nbsp;px. The width can be set between 400&nbsp;px and 2,000&nbsp;px.
+The default dimensions are 1,000&nbsp;×&nbsp;625 px.
+
+### Interacting with PWAs
+
+PWAs can be controlled with the Oculus left and right controllers, Bluetooth mice and keyboards, and
+via hand tracking. Scrolling works via the thumb sticks on the Oculus controllers, or by pinching
+the thumb and the index finger and moving in the desired direction. To select something, the user
+can point and pinch.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/20e7SXFMLC22gqW8HzRa.mp4", autoplay="true", loop="true", muted="true" %}
+
+### Permissions for PWAs
+
+Permissions in Oculus Browser work pretty much the same way as in Chrome. The state is shared
+between apps running in the browser and installed PWAs, so users can switch between the two
+experiences without having to grant the same permissions again.
+
+Albeit many permissions are implemented, not all features are supported. For example, while
+requesting the geolocation permission succeeds, the device never actually gets a location.
+Similarly, the various hardware APIs like [WebHID](/hid/), [Web Bluetooth](/bluetooth/), etc. all
+pass feature detection, but don't actually show a picker that would let the user pair the Oculus
+with a hardware device. I suppose feature detectability of APIs will be refined once the browser
+matures.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/fTX92hn8bIMpWVMoBUjE.png", alt="Permissions in Oculus Browser.", width="800", height="575" %}
+
+### Debugging PWAs via Chrome DevTools
+
+After
+[enabling Developer Mode](https://developer.oculus.com/documentation/native/android/mobile-device-setup/#enable-developer-mode),
+debugging PWAs on Oculus Quest&nbsp;2 works exactly as described in
+[Remote debug Android devices](https://developer.chrome.com/docs/devtools/remote-debugging/).
+
+1. On the Oculus device, browse to the desired site in Oculus Browser.
+1. Launch Google Chrome on your computer and navigate to `chrome://inspect/#devices`.
+1. Find the Oculus device in question, which will be followed by a set of Oculus Browser tabs
+   currently open on the device.
+1. Click **inspect** on the desired Oculus Browser tab.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/GiTjoiMuU2FoJOXLMEk2.png", alt="Inspecting an app running on the Oculus Quest 2 with Chrome DevTools.", width="800", height="476" %}
+
+### App discovery
+
+People can use the browser itself or the [Oculus Store](https://www.oculus.com/experiences/quest/)
+to discover PWAs. Just like with any other browser, installed PWAs also work in Oculus Browser as
+websites running in a tab. When a user visits a site, the Oculus Browser will help them discover the
+app if (and only if) it is available in the Oculus Store. For users that already have the app
+installed, Oculus Browser will help them easily switch to the app if they desire.
+
+{% Aside %} Currently the
+[`BeforeInstallPrompt` event](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent)
+will _not_ fire in Oculus Browser, despite feature detection reporting it to be supported.
+{% endAside %}
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/YNM3CfMKqnLuCJLw3I0U.png", alt="Oculus Browser inviting the user in a prompt to install the MyEmail app.", width="512", height="343" %}
+
+## Exemplary PWAs on the Oculus Quest&nbsp;2
+
+### PWAs by Meta
+
+Multiple Meta divisions have created PWAs for the Oculus Quest&nbsp;2, for example
+[Instagram](https://www.oculus.com/experiences/quest/6102857836422862) and
+[Facebook](https://www.oculus.com/experiences/quest/6126469507395223). These PWAs run in standalone
+app windows that don't have a URL bar and that can be freely resized.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/m5NoDaB7hyFOvrxHF9oS.jpeg", alt="Facebook Oculus Quest 2 app.", width="800", height="450" %}
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/gxYCh0Z9R3vXRU0MWsIB.jpeg", alt="Instagram Oculus Quest 2 app", width="800", height="450" %}
+
+### PWAs by other developers
+
+At the time of this writing, there is a small but growing number of PWAs for the Oculus Quest&nbsp;2
+on the Oculus Store. [Spike](https://www.oculus.com/experiences/quest/4949538568409451) lets users
+experience all the essential work tools like email, chat, calls, notes, tasks, and to-dos from their
+inbox in a virtual environment hub right in the Spike app.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/yATTFGQRz75I2JrIAUSz.jpeg", alt="Spike Oculus Quest 2 app.", width="800", height="450" %}
+
+Another example is [Smartsheet](https://www.oculus.com/experiences/quest/4636949963023496), a
+dynamic workspace that provides project management, automated workflows, and rapid building of new
+solutions.
+
+More PWAs like Slack, Dropbox, or Canva are coming, as teased in a
+[video](https://www.facebook.com/watch/?v=4637130066326723) featuring Jacob Rossi that was released
+in the context of Facebook's Connect conference in 2021.
+
+## Creating PWAs for Oculus
+
+Meta outlined the required steps in their
+[documentation](https://developer.oculus.com/documentation/web/pwa-gs/). In general, PWAs that are
+installable in Chrome should oftentimes work out of the box on Oculus.
+
+### Web App Manifest requirements
+
+There are some important differences compared to
+[Chrome's installability criteria](/install-criteria/#criteria) and the
+[Web App Manifest spec](https://w3c.github.io/manifest/). For example, Oculus only supports
+left-to-right languages at the moment, whereas the Web App Manifest spec enforces no such
+constraints. Another example is `start_url`, which Chrome strictly requires for an app to be
+installable, but which on Oculus is optional. Oculus offers a
+[command line tool](https://developer.oculus.com/documentation/web/pwa-packaging/) that lets
+developers create PWAs for the Oculus Quest&nbsp;2, which allows them to pass the missing (or
+override the existing) parameters in the Web App Manifest.
+
+<div class="table-wrapper scrollbar">
+<table>
+<thead>
+<tr>
+<th>Name</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>name</code></td>
+<td>(Required) The name of the PWA. Currently Oculus only supports left-to-right languages for the name.</td>
+</tr>
+<tr>
+<td><code>display</code></td>
+<td>(Required) Either <code>"standalone"</code> or <code>"minimal-ui"</code>. Oculus currently doesn't support any other values.</td>
+</tr>
+<tr>
+<td><code>short_name</code></td>
+<td>(Required) A shorter version of the app name, if needed.</td>
+</tr>
+<tr>
+<td><code>scope</code></td>
+<td>(Optional) The URL or paths that should be considered as part of the app.</td>
+</tr>
+<tr>
+<td><code>start_url</code></td>
+<td>(Optional) The URL to show at app launch.</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+Oculus has a number of optional **proprietary** Web App Manifest fields that can be used to
+customize the PWA experience.
+
+<div class="table-wrapper scrollbar">
+<table>
+<thead>
+<tr>
+<th>Name</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>ovr_package_name</code></td>
+<td>(Optional) Sets the package name of the APK generated for the PWA. This must be in reverse domain name notation, e.g., <code>"com.company.app.pwa"</code>. If not set, developers must provide a package name to the command line tool with the (then required) parameter <code>--package-name</code>.</td>
+</tr>
+<tr>
+<td><code>ovr_multi_tab_enabled</code></td>
+<td>(Optional) If <code>true</code>, this boolean field will give the PWA a tab bar similar to Oculus Browser. In multi-tab PWAs, internal links that target a new tab (<code>target="_new"</code> or <code>target="_blank"</code>) will open in new tabs within the PWA window. This differs from single-tab PWAs where such links would open to a Oculus Browser window. <strong>This feature is currently being standardized as <a href="https://github.com/w3c/manifest/issues/737" rel="noopener">Tabbed Application Mode</a>.</strong></td>
+</tr>
+<tr>
+<td><code>ovr_scope_extensions</code></td>
+<td>(Optional) Allows a PWA to include more web pages within the scope of the web application. It consists of a JSON dictionary containing extension URLs or wildcard patterns. <strong>This feature is currently being standardized as <a href="https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md" rel="noopener">Scope Extensions for Web Apps</a>.</strong></td>
+</tr>
+</tbody>
+</table>
+</div>
+
+### Packaging PWAs with Bubblewrap CLI
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) is an open source set of libraries and
+a command line tool (CLI) for Node.js. Bubblewrap is developed by the Google Chrome team, to help
+developers generate, build, and sign an Android project that launches your PWA as a
+[Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/) (TWA).
+
+Meta Quest Browser currently doesn't fully support TWA, but starting from version 1.18.0,
+Bubblewrap [supports](https://github.com/GoogleChromeLabs/bubblewrap/releases/tag/v1.18.0)
+packaging PWAs for Meta Quest devices.
+
+It can generate *universal* APK files that open a TWA on regular Android devices and the Meta Quest
+Browser on Meta Quest devices.
+
+Assuming you have [Node.js](https://nodejs.org) installed, Bubblewrap CLI can be installed with the
+following command:
+
+```bash
+npm i -g @bubblewrap/cli
+```
+
+When running Bubblewrap for the first time, it will offer to automatically download and install the
+required external dependencies—Java Development Kit (JDK) and Android SDK Build Tools.
+
+To generate a Meta Quest compatible Android project that wraps your PWA, run the `init` command
+with the `--metaquest` flag and follow the wizard:
+
+```bash
+bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
+```
+
+Once the project has been generated, build and sign it by running:
+
+```bash
+bubblewrap build
+```
+
+This will output a file called `app-release-signed.apk`. This file can be installed on the device
+or published to the Meta Quest Store, Google Play Store or any of the other Android app distribution
+platforms.
+
+{% Aside 'note' %}
+Pro tip: you can also use the `--chromeosonly` flag in addition to the `--metaquest` flag to make
+APK files compatible not only with Meta Quest and regular Android devices, but also with
+[ChromeOS](https://chromeos.dev) devices.
+{% endAside %}
+
+### Packaging PWAs with Oculus Platform Utility
+
+[Oculus Platform Utility](https://developer.oculus.com/documentation/web/pwa-packaging/#download-the-cli)
+is the official command line tool developed by Meta for publishing apps for Oculus Rift and Meta
+Quest devices.
+
+It also allows to package PWAs for Meta Quest devices with the `create-pwa` command and publish
+them to the Meta Quest Store and App Lab.
+
+Set the output file name via the `-o` parameter and the path to Android SDK via the `--android-sdk`
+parameter.
+
+Point the tool at the live URL of the web app manifest via the `--web-manifest-url` parameter.
+
+If you don't have a manifest on your live PWA or wish to override the live manifest, you can still
+generate an APK for your PWA using a local manifest file and the `--manifest-content-file`
+parameter.
+
+To leave the manifest as pure as possible, use the `--package-name` parameter with a value in
+reverse domain name notation (for example, `com.company.app.pwa`), rather than adding the
+proprietary `ovr_package_name` field to the manifest.
+
+```bash
+ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
+```
+
+{% Aside 'caution' %}
+APK files generated by Oculus Platform Utility are only compatible with Meta Quest devices and cannot
+be run on regular Android devices. Also they can only be published to the Meta Quest Store and App Lab.
+{% endAside %}
+
+### Packaging PWAs with PWABuilder
+
+Using [PWABuilder](https://pwabuilder.com) is in the authors' view the easiest and therefore
+recommended way to package PWAs for Meta Quest at the moment.
+
+PWABuilder is an [open source](https://github.com/pwa-builder) project developed by Microsoft,
+that allows developers to package and sign their PWAs for publishing to various stores, including
+Microsoft Store, Google Play Store, App Store, and Meta Quest Store.
+
+Packaging PWAs with PWABuilder is as easy as entering the URL of a PWA, entering/editing the
+metadata for the app, and clicking the **Generate** button.
+
+PWABuilder gives developers the choice of what tool under the hood to use for packaging PWAs for
+Meta Quest devices.
+
+You can choose the **Meta Quest** option to use the Oculus Platform Utility.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/nmHjO4Tbr01psSEfaaOO.png", alt="PWABuilder packaging options.", width="800", height="600" %}
+
+{% Aside 'note' %}
+Pro tip: PWABuilder uses a slightly modified version of Oculus Platform Utility that generates much smaller
+APK files by
+[removing unused code and resources](https://github.com/pwa-builder/pwabuilder-oculus/pull/7).
+{% endAside %}
+
+You can choose the **Android** option to use the Bubblewrap and select the **Meta Quest compatible**
+checkbox.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/jLnuUwLBi73HGXiv3XUy.png", alt="Packaging PWAs with PWABuilder using Bubblewrap.", width="800", height="600" %}
+
+{% Aside 'note' %}
+Pro tip: since PWABuilder is a PWA itself that works everywhere there is a browser, you can open it
+in the Meta Quest Browser and perform all the steps right on your Meta Quest.
+{% endAside %}
+
+### Installing PWAs with ADB
+
+{% Aside 'important' %}
+To enable Android Debug Bridge (ADB) on the Meta Quest device, you must
+[enable developer mode](https://developer.oculus.com/documentation/native/android/mobile-device-setup/)
+in the companion mobile app. Before you can put your device in developer mode, you must belong to
+(or have created) a developer organization in the Oculus Developer Center.
+{% endAside %}
+
+After creating the APK file, you can sideload it to the Meta Quest device using the ADB via
+USB or Wi-Fi:
+
+```bash
+adb install app-release-signed.apk
+```
+
+If you use the Bubblewrap CLI for packaging PWAs, it provides a convenient alias command to
+sideload the APK file:
+
+```bash
+bubblewrap install
+```
+
+{% Aside 'note' %}
+Pro tip: you can use [Android Web Toolbox](https://yume-chan.github.io/ya-webadb/install) to
+sideload APK files. It's an [open source](https://github.com/yume-chan/ya-webadb/) web app that
+allows you to access all ADB functionality right from the browser even from another Android device.
+No installation or drivers are required thanks to the [Web USB API](/usb/).
+{% endAside %}
+
+Sideloaded apps appear in an **Unknown Sources** section in the app drawer.
+
+### App submission
+
+{% Aside 'important' %}
+Submission and consideration for the Oculus Store is only available if you have been approved as an
+Meta Quest Store developer. Distribution of PWAs via
+[App Lab](https://developer.oculus.com/blog/introducing-app-lab-a-new-way-to-distribute-oculus-quest-apps/)
+is not currently available. The Meta team will share more on when and how you can submit a PWA to
+App Lab soon.
+{% endAside %}
+
+Uploading and submitting PWAs to the Oculus Store is
+[covered](https://developer.oculus.com/documentation/web/pwa-submit-app/) in detail in the Oculus
+Developer Center docs.
+
+Apart from submitting apps to the Oculus Store, developers can also distribute their apps via platforms
+like [SideQuest](https://sidequestvr.com/) directly to consumers safely and securely, without requiring
+store approval. This allows them to get an app directly to end users, even if it is early in development,
+experimental, or aimed at a unique audience.
+
+## Testing multi-tab apps
+
+To test multi-tab apps, I created a little [test PWA](https://tomayac.github.io/oculus-pwa-test/)
+that demonstrates the various link features: namely opening a new in-PWA tab, staying on the current
+tab, opening a new browser window, and opening in a WebView staying on the current tab. Create a
+locally installable copy of this app by running the commands below on your machine.
+
+```bash
+ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
+adb install test.apk
+```
+
+Here's a screencast of the test app.
+
+{% YouTube "3ZlxCjW9rtg" %}
+
+## An Oculus version of SVGcode
+
+To take the instructions for a spin, I created an Oculus version of my most recent PWA,
+[SVGcode](/svgcode/). You can download the resulting APK file
+[`output.apk`](https://drive.google.com/file/d/1ieGjwIXGGWmh0j9WpBdWqP7Bns3McNr1/view?usp=sharing)
+from my Google Drive. If you want to investigate the package further, I have a
+[decompiled version](https://drive.google.com/drive/folders/1EFtXK9ApJiJitfysZS_Z7iIWWiKEglu-?usp=sharing),
+too. Find the build instructions in
+[`package.json`](https://github.com/tomayac/SVGcode/blob/6b23adf63a0a3a1b3828866dbb7db0f10206397f/package.json#L16).
+
+Using the app on Oculus works fine, including the ability to open and save files. The Oculus Browser
+doesn't support the [File System Access API](/file-system-access/), but the
+[fallback approach](/browser-fs-access/#the-traditional-way-of-dealing-with-files) helps. The only
+thing that didn't function is pinch-zooming. My expectation was for it to work by pressing the
+trigger button on both controllers and then moving the controllers in opposed directions. Other than
+that, everything else was performant and responsive, as you can see in the embedded screencast.
+
+{% YouTube "Gjc0IR17kAk" %}
+
+## Immersive 3D WebXR PWAs
+
+PWA support on Oculus Quest is not limited to flat 2D apps. Developers can build immersive 3D
+experiences for VR using the [WebXR API](/tags/webxr/).
+
+Wondering how various prompts (PWA install, permission requests, notifications) are handled
+from within VR, if at all?
+
+Here's a screencast of
+[User Agent Prompts test](https://immersive-web.github.io/webxr-samples/tests/permission-request.html)
+from the [Immersive Web Working Group](https://immersive-web.github.io/)'s
+[WebXR Tests](https://immersive-web.github.io/webxr-samples/tests/).
+
+{% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/4fvDWOo2XxF67M8r3W3O.mp4" %}
+
+As you can see, entering VR mode requires the user's permission. Permissions are asked once per origin.
+Requesting permissions leaves the immersive mode. Notifications are currently not supported.
+
+### Hand tracking
+
+You can use your hands to interact with PWAs in immersive mode thanks to the
+[WebXR Hand Input API](https://immersive-web.github.io/webxr-hand-input/) and Meta's
+[AI-based hand-tracking system](https://ai.facebook.com/blog/hand-tracking-deep-neural-networks/).
+
+Here's a screencast of
+[Hand Tracking Sample](https://immersive-web.github.io/webxr-samples/immersive-hands.html)
+from the Immersive Web Working Group's [WebXR Samples](https://immersive-web.github.io/webxr-samples/).
+
+{% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/nDm0rY5DvtyTbDgUqFTS.mp4" %}
+
+### Augmented/Mixed Reality (Passthrough)
+
+As announced at Meta Connect 2022, Meta Quest Browser
+[has added support](https://developer.oculus.com/documentation/web/webxr-mixed-reality/) for
+[WebXR Augmented Reality (AR)](/web-ar/), also known as Mixed Reality (MR), on Meta Quest&nbsp;2 and Meta
+Quest Pro devices.
+
+Let's check a slightly modified A-Frame
+[starter example](https://aframe.io/docs/1.3.0/introduction/#getting-started) with scaled-down
+models and hidden sky and plane for augmented reality.
+
+[A-Frame](https://aframe.io) is an open source web framework for building 3D/VR/AR experiences
+entirely out of declarative, reusable [custom HTML elements](/custom-elements-v1/) that are easy to
+read, understand, and copy-and-paste.
+
+{% Glitch {
+  id: 'a-frame-hello-world-ar',
+  path: 'index.html',
+  previewSize: 50,
+  allow: ['xr-spatial-tracking', 'fullscreen']
+} %}
+
+Here's a screencast of this demo on Meta Quest&nbsp;2.
+
+{% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/RmPUmnh57gDZ2bbGkOWR.mp4" %}
+
+Meta Quest&nbsp;2 has monochrome cameras, so the passthrough is in grayscale, while Meta Quest Pro has
+color cameras.
+
+## Conclusions
+
+PWAs on Oculus Quest&nbsp;2 are a lot of fun and very promising. The endless virtual canvas that
+lets users scale their screen to whatever fits the current task best has a lot of potential to
+change the way we work in the future. While typing in VR with hand tracking is still in its infancy
+and, at least for me, doesn't work very reliably yet, it works well enough for entering URLs or
+typing short texts.
+
+What I like the most about PWAs on the Oculus Quest&nbsp;2 is that they are just regular PWAs that
+can be used unchanged in a browser tab or through a thin APK wrapper without any platform-specific
+APIs. Targeting multiple platforms with the same code has never been easier. Here's to PWAs in VR
+and AR on the web. The future is bright!
+
+## Acknowledgements
+
+Oculus Quest&nbsp;2 photo by [Maximilian Prandstätter](https://flickr.com/people/191783462@N03/) on
+[Flickr](https://flickr.com/photos/191783462@N03/50844634326). Oculus Store images of
+[Instagram](https://www.oculus.com/experiences/quest/6102857836422862),
+[Facebook](https://www.oculus.com/experiences/quest/6126469507395223),
+[Oculus Browser](https://www.oculus.com/experiences/quest/1916519981771802), and
+[Spike](https://www.oculus.com/experiences/quest/4949538568409451) apps as well as
+[app discoverability](https://developer.oculus.com/pwa/) illustration and
+[hand tracking](https://support.oculus.com/articles/headsets-and-accessories/controllers-and-hand-tracking/hand-tracking-quest-2/)
+animation courtesy of Meta. Hero image by Arnau Marín i Puig. This post was reviewed by
+[Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/quictransport/hero.jpg b/src/site/content/en/blog/quictransport/hero.jpg
deleted file mode 100644
index 0edc793ce5b..00000000000
Binary files a/src/site/content/en/blog/quictransport/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/quictransport/index.md b/src/site/content/en/blog/quictransport/index.md
deleted file mode 100644
index 78be6217869..00000000000
--- a/src/site/content/en/blog/quictransport/index.md
+++ /dev/null
@@ -1,320 +0,0 @@
----
-title: Experimenting with QuicTransport
-subhead: QuicTransport is a new API offering low-latency, bidirectional, client-server messaging. Learn more about its use cases, and how to give feedback about the future of the implementation.
-authors:
-  - jeffposnick
-description: QuicTransport is a new API offering low-latency, bidirectional, client-server messaging. Learn more about its use cases, and how to give feedback about the future of the implementation.
-date: 2020-06-08
-updated: 2020-06-08
-hero: hero.jpg
-hero_position: center
-alt: |
-  Photo of fast-moving traffic.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/-6744140441987317759
-tags:
-  - blog
-  - capabilities
-  - network
----
-
-## Background
-
-### What's QuicTransport?
-
-[QuicTransport](https://wicg.github.io/web-transport/#quic-transport) is a web API that uses the [QUIC](https://www.chromium.org/quic) protocol in a bidirectional, non-HTTP transport. It's intended for two-way communications between a web client and a QUIC server. It supports sending data both unreliably via its [datagram APIs](#datagram), and reliably via its [streams APIs](#stream).
-
-[Datagrams](https://tools.ietf.org/html/draft-ietf-quic-datagram-00) are ideal for sending and receiving data that do not need strong delivery guarantees. Individual packets of data are limited in size by the [maximum transmission unit (MTU)](https://en.wikipedia.org/wiki/Maximum_transmission_unit) of the underlying connection, and may or may not be transmitted successfully, and if they are transferred, they may arrive in an arbitrary order. These characteristics make the datagram APIs ideal for low-latency, best-effort data transmission. You can think of datagrams as [user datagram protocol (UDP)](https://en.wikipedia.org/wiki/User_Datagram_Protocol) messages, but encrypted and congestion-controlled.
-
-The streams APIs, in contrast, provide [reliable](https://en.wikipedia.org/wiki/Reliability_(computer_networking)), ordered data transfer. They're [well-suited](https://quicwg.org/base-drafts/draft-ietf-quic-transport.html#name-streams) to scenarios where you need to send or receive one or more streams of ordered data. Using multiple QUIC streams is analogous to establishing multiple [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol) connections, but QUIC streams are lightweight, and can be opened and closed without much overhead.
-
-### What's WebTransport?
-
-QuicTransport is one part of the larger [WebTransport proposal](https://wicg.github.io/web-transport/). WebTransport is a collection of APIs for sending and receiving data between a web client and a server. QuicTransport is the interface for using the QUIC protocol in the context of bi-directional WebTransport communications.
-
-Chrome is implementing the QuicTransport portion of WebTransport first, before any of the other proposed interfaces. The Chrome team made the decision to start with a QuicTransport after speaking to web developers about their use cases. We hope to solicit early feedback on the overall WebTransport effort based on developers' experiences with QuicTransport.
-
-### Use cases
-
-This a small list of possible ways developers might use QuicTransport.
-
-- Sending game state at a regular interval with minimal latency to a server via small, unreliable, out-of-order messages.
-- Receiving media streams pushed from a server with minimal latency, independent of other data streams.
-- Receiving notifications pushed from a server while a web page is open.
-
-As part of the origin trial process, we're interested in [hearing more](#feedback) about how you plan on using QuicTransport!
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete](https://github.com/WICG/web-transport/blob/master/explainer.md) |
-| 2. Create initial draft of specification   | [Complete](https://wicg.github.io/web-transport/#quic-transport) |
-| **3. Gather feedback and iterate design**  | [**In Progress**](#feedback) |
-| **4. Origin trial**                        | [**In Progress**](#register-for-ot) |
-| 5. Launch                                  | Not Started |
-
-</div>
-
-## QuicTransport's relationship to other technologies
-
-### Is QuicTransport a replacement for WebSockets?
-
-Maybe. There are use cases where either [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) or QuicTransport might be valid communication protocols to use.
-
-WebSockets communications are modeled around a single, reliable, ordered stream of messages, which is fine for some types of communication needs. If you need those characteristics, then QuicTransport's streams APIs can provide them as well. In comparison, QuicTransport's datagram APIs provide low-latency delivery, without guarantees about reliability or ordering, so they're not a direct replacement for WebSockets.
-
-Using QuicTransport, via the datagram APIs or via multiple concurrent Streams API instances, means that you don't have to worry about [head-of-line blocking](https://en.wikipedia.org/wiki/Head-of-line_blocking), which can be an issue with WebSockets. Additionally, there are performance benefits when establishing new connections, as the [QUIC handshake](https://www.fastly.com/blog/quic-handshake-tls-compression-certificates-extension-study) is faster than starting up TCP over TLS.
-
-QuicTransport is part of a new draft specification, and as such the WebSocket ecosystem around client and server libraries is currently much more robust. If you need something that works "out of the box" with common server setups, and with broad web client support, WebSockets is a better choice today.
-
-### Is QuicTransport the same as a UDP Socket API?
-
-No. QuicTransport is not a [UDP Socket API](https://www.w3.org/TR/raw-sockets/). While QUIC does use UDP "under the hood," QuicTransport has requirements around encryption and congestion control that make it more than a basic UDP Socket API.
-
-### Is QuicTransport an alternative to WebRTC data channels?
-
-Yes, for client-server connections. QuicTransport shares many of the same properties as [WebRTC data channels](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel), although the underlying protocols are different.
-
-{% Aside %}
-WebRTC data channels support peer-to-peer communications, but QuicTransport only supports client-server connection. If you have multiple clients that need to talk directly to each other, then QuicTransport isn't a viable alternative.
-{% endAside %}
-
-Generally, running a QUIC-compatible server requires less setup and configuration than maintaining a WebRTC server, which involves understanding multiple protocols ([ICE](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity#ICE_candidates), [DTLS](https://webrtc-security.github.io/#4.3.1.), and [SCTP](https://developer.mozilla.org/en-US/docs/Web/API/RTCSctpTransport)) in order to get a working transport. WebRTC entails many more moving pieces that could lead to failed client/server negotiations.
-
-The QuicTransport API was designed with the web developer use cases in mind, and should feel more like writing modern web platform code than using WebRTC's data channel interfaces. [Unlike WebRTC](https://bugs.chromium.org/p/chromium/issues/detail?id=302019), QuicTransport is supported inside of [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers), which allows you to perform client-server communications independent of a given HTML page. Because QuicTransport exposes a [Streams](https://streams.spec.whatwg.org/)-compliant interface, it supports optimizations around [backpressure](https://streams.spec.whatwg.org/#backpressure).
-
-However, if you already have a working WebRTC client/server setup that you're happy with, switching to QuicTransport may not offer many advantages.
-
-## Try it out
-
-The best way to experiment with QuicTransport is to use [this Python code](https://github.com/GoogleChrome/samples/blob/gh-pages/quictransport/quic_transport_server.py) to start up a compatible QUIC server locally. You can then use this page with a [basic JavaScript client](https://googlechrome.github.io/samples/quictransport/client.html) to try out client/server communications.
-
-## Using the API
-
-QuicTransport was designed on top of modern web platform primitives, like the [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). It relies heavily on [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises), and works well with [<code>async</code> and <code>await</code>](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await).
-
-The QuicTransport [origin trial](#register-for-ot) supports three distinct types of traffic: datagrams, as well as both unidirectional and bidirectional streams.
-
-### Connecting to a server
-
-You can connect to a QUIC server by creating a `QuicTransport` instance. The scheme of the URL should be `quic-transport`. You need to explicitly specify the port number.
-
-You should use the `ready` promise to wait for the connection to be established. This promise will not be fulfilled until the setup is complete, and will reject if the connection fails at the QUIC/TLS stage.
-
-The `closed` promise fulfills when the connection closes normally, and rejects if the closure was unexpected.
-
-If the server rejects the connection due to a [client indication](https://tools.ietf.org/html/draft-vvv-webtransport-quic-01#section-3.2) error (e.g. the path of the URL is invalid), then that causes `closed` to reject, while `ready` remains unresolved.
-
-```js
-const url = 'quic-transport://example.com:4999/foo/bar';
-const transport = new QuicTransport(url);
-
-// Optionally, set up functions to respond to
-// the connection closing:
-transport.closed.then(() => {
-  console.log(`The QUIC connection to ${url} closed gracefully.`);
-}).catch((error) => {
-  console.error('The QUIC connection to ${url} closed due to ${error}.');
-});
-
-// Once .ready fulfills, the connection can be used.
-await transport.ready;
-```
-
-### Datagram APIs {: #datagram }
-
-Once you have a QuicTransport instance that's connected to a server, you can use it to send and receive discrete bits of data, known as [datagrams](https://en.wikipedia.org/wiki/Datagram).
-
-The `sendDatagrams()` method returns a <code>[WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream)</code>, which a web client can use to send data to the server. The <code>receiveDatagrams()</code> method returns a <code>[ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)</code>, allowing you to listen for data from the server. Both streams are inherently unreliable, so it is possible that the data you write will not be received by the server, and vice versa.
-
-Both types of streams use <code>[Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)</code> instances for data transfer.
-
-```js
-// Send two datagrams to the server.
-const ws = transport.sendDatagrams();
-const writer = ws.getWriter();
-const data1 = new Uint8Array([65, 66, 67]);
-const data2 = new Uint8Array([68, 69, 70]);
-writer.write(data1);
-writer.write(data2);
-
-// Read datagrams from the server.
-const rs = transport.receiveDatagrams();
-const reader = rs.getReader();
-while (true) {
-  const {value, done} = await reader.read();
-  if (done) {
-    break;
-  }
-  // value is a Uint8Array.
-  console.log(value);
-}
-```
-
-{% Aside %}
-Chrome does not [currently](https://bugs.chromium.org/p/chromium/issues/detail?id=929585) expose an [async iterator](https://github.com/whatwg/streams/issues/778) for a `ReadableStream`. For the time being, using the `getReader()` method combined with a `while()` loop is the best way to read from the stream.
-{% endAside %}
-
-### Streams APIs  {: #stream }
-
-Once you've connected to the server, you could also use QuicTransport to send and receive data via its Streams APIs.
-
-Each chunk of all streams is a `Uint8Array`. Unlike with the Datagram APIs, these streams are reliable. But each stream is independent, so data order across streams is not guaranteed.
-
-#### SendStream
-
-A <code>[SendStream](https://wicg.github.io/web-transport/#sendstream)</code> is created by the web client using the <code>createSendStream()</code> method of a `QuicTransport` instance, which returns a promise for the <code>SendStream</code>.
-
-Use the <code>[close()](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter/close)</code> method of the <code>[WritableStreamDefaultWriter](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter)</code> associated with the stream to send a [QUIC Stream FIN bit](https://tools.ietf.org/html/draft-ietf-quic-transport-27#section-19.8) to the server. The browser tries to send all pending data before actually closing the associated QUIC stream.
-
-```js
-// Send two Uint8Arrays to the server.
-const stream = await transport.createSendStream();
-const writer = stream.writable.getWriter();
-const data1 = new Uint8Array([65, 66, 67]);
-const data2 = new Uint8Array([68, 69, 70]);
-writer.write(data1);
-writer.write(data2);
-try {
-  await writer.close();
-  console.log('All data has been sent.');
-} catch (error) {
-  console.error(`An error occurred: ${error}`);
-}
-```
-
-Similarly, use the <code>[abort()](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter/abort)</code> method of the <code>[WritableStreamDefaultWriter](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter)</code> to send a [QUIC RESET\_STREAM](https://tools.ietf.org/html/draft-ietf-quic-transport-27#section-19.4) to the server. When using <code>abort()</code>, the browser may discard any pending data that hasn't yet been sent.
-
-```js
-const ws = await transport.createSendStream();
-const writer = ws.getWriter();
-writer.write(...);
-writer.write(...);
-await writer.abort();
-// Not all the data may have been written.
-```
-
-#### ReceiveStream
-
-A <code>[ReceiveStream](https://wicg.github.io/web-transport/#receivestream)</code> is initiated by the server. Obtaining a <code>ReceiveStream</code> is a two-step process for a web client. First, it calls the <code>receiveStreams()</code> method of a `QuicTransport` instance, which returns a <code>ReadableStream</code>. Each chunk of that <code>ReadableStream</code>, is, in turn, a <code>ReceiveStream</code> that can be used to read <code>Uint8Array</code> instances sent by the server.
-
-```js
-async function readFrom(receiveStream) {
-  const reader = receiveStream.readable.getReader();
-  while (true) {
-    const {done, value} = await reader.read();
-    if (done) {
-      break;
-    }
-    // value is a Uint8Array
-    console.log(value);
-  }
-}
-
-const rs = transport.receiveStreams();
-const reader = rs.getReader();
-while (true) {
-  const {done, value} = await reader.read();
-  if (done) {
-    break;
-  }
-  // value is an instance of ReceiveStream
-  await readFrom(value);
-}
-```
-
-You can detect stream closure using the <code>[closed](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/closed)</code> promise of the <code>[ReadableStreamDefaultReader](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader)</code>. When the QUIC stream is [closed with the FIN bit](https://tools.ietf.org/html/draft-ietf-quic-transport-27#section-19.8), the <code>closed</code> promise is fulfilled after all the data is read. When the QUIC stream is closed abruptly (for example, by <code>[STREAM_RESET](https://tools.ietf.org/html/draft-ietf-quic-transport-27#section-19.4)</code>), then the <code>closed</code> promise rejects.
-
-```js
-// Assume an active receiveStream
-const reader = receiveStream.readable.getReader();
-reader.closed.then(() => {
-  console.log('The receiveStream closed gracefully.');
-}).catch(() => {
-  console.error('The receiveStream closed abruptly.');
-});
-```
-
-#### BidirectionalStream
-
-A <code>[BidirectionalStream](https://wicg.github.io/web-transport/#bidirectional-stream)</code> might be created either by the server or the client.
-
-Web clients can create one using the `createBidirectionalStream()` method of a `QuicTransport` instance, which returns a promise for a `BidirectionalStream`.
-
-```js
-const stream = await transport.createBidirectionalStream();
-// stream is a BidirectionalStream
-// stream.readable is a ReadableStream
-// stream.writable is a WritableStream
-```
-
-You can listen for a `BidirectionalStream` created by the server with the `receiveBidirectionalStreams()` method of a `QuicTransport` instance, which returns a `ReadableStream`. Each chunk of that `ReadableStream`, is, in turn, a `BidirectionalStream`.
-
-```js
-const rs = transport.receiveBidrectionalStreams();
-const reader = rs.getReader();
-while (true) {
-  const {done, value} = await reader.read();
-  if (done) {
-    break;
-  }
-  // value is a BidirectionalStream
-  // value.readable is a ReadableStream
-  // value.writable is a WritableStream
-}
-```
-
-A `BidirectionalStream` is just a combination of a `SendStream` and `ReceiveStream`. The examples from the previous two sections explain how to use each of them.
-
-### More examples
-
-The [WebTransport draft specification](https://wicg.github.io/web-transport/#quic-transport) includes a number of additional inline examples, along with full documentation for all of the methods and properties.
-
-## Enabling support during the origin trial {: #register-for-ot }
-
-{% include 'content/origin-trial-register.njk' %}
-
-### QuicTransport in Chrome's DevTools
-
-Unfortunately, [Chrome's DevTools](https://developers.google.com/web/tools/chrome-devtools) support for QuicTransport is not ready for the start of the origin trial. Please "star" [this Chrome issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1069742) to be notified about updates on the DevTools interface.
-
-## Privacy and security considerations
-
-Please see the [corresponding section](https://wicg.github.io/web-transport/#privacy-security) of the draft specification for authoritative guidance.
-
-## Feedback  {: #feedback }
-
-The Chrome team wants to hear your thoughts and experiences using this API throughout the origin trial process.
-
-### Feedback about the API design
-
-Is there something about the API that's awkward or doesn't work as expected? Or are there missing pieces that you need to implement your idea?
-
-File an issue on the [Web Transport GitHub repo](https://github.com/WICG/web-transport/issues), or add your thoughts to an existing issue.
-
-### Problem with the implementation?
-
-Did you find a bug with Chrome's implementation?
-
-File a bug at [https://new.crbug.com](https://new.crbug.com). Include as much detail as you can, along with simple instructions for reproducing.
-
-
-### Planning to use the API?
-
-Your public support helps Chrome prioritize features, and shows other browser vendors how critical it is to support them.
-
-- Be sure you have signed up for the [origin trial](https://developers.chrome.com/origintrials/#/view_trial/-6744140441987317759) to show your interest and provide your domain and contact info.
-- Send a Tweet to [@ChromiumDev](https://twitter.com/chromiumdev) with `#QuicTransport` and details on where and how you're using it.
-
-### General discussion
-
-You can use the [web-transport-dev Google Group](https://groups.google.com/a/chromium.org/g/web-transport-dev) for general questions or problems that don't fit into one of the other categories.
-
-## Acknowledgements
-
-This article incorporates information from the [WebTransport Explainer](https://github.com/wicg/web-transport/blob/master/explainer.md), [draft specification](https://wicg.github.io/web-transport/), and [related design docs](https://docs.google.com/document/d/1UgviRBnZkMUq4OKcsAJvIQFX6UCXeCbOtX_wMgwD_es/edit#). Thank you to the respective authors for providing that foundation.
-
-_The hero image on this post is by [Robin Pierre](https://unsplash.com/photos/dPgPoiUIiXk) on Unsplash._
diff --git a/src/site/content/en/blog/quintoandar/index.md b/src/site/content/en/blog/quintoandar/index.md
new file mode 100644
index 00000000000..05a287a45c5
--- /dev/null
+++ b/src/site/content/en/blog/quintoandar/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: How QuintoAndar increased conversion rates and pages per session by improving page performance
+subhead: A project focused on optimizing Core Web Vitals and migrating to Next.js resulted in a 5% increase in conversion rates and a 87% increase in pages per session.
+authors:
+  - danielasy
+date: 2021-12-10
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/VQrzs5OoWZT2qS8yTzGW.jpg
+alt: A picture of a city skyline on a clear, sunny day. At center is the QuintoAndar logo in white.
+description: |
+  A project focused on optimizing Core Web Vitals and migrating to Next.js resulted in a 5% increase in conversion rates and a 87% increase in pages per session.
+tags:
+  - blog
+  - case-study
+  - web-vitals
+---
+
+QuintoAndar is a Brazilian proptech company whose products offer digital end-to-end solutions for real estate. This year, we carried out a project focused on improving the performance of a content hub in our app, and had encouraging results in increasing user traffic and conversion metrics.
+
+<div class="stats">
+ <div class="stats__item">
+   <p class="stats__figure">46<sub>%</sub></p>
+   <p>reduction in bounce rate</p>
+ </div>
+ <div class="stats__item">
+   <p class="stats__figure">87<sub>%</sub></p>
+   <p>increase in pages per session</p>
+ </div>
+ <div class="stats__item">
+   <p class="stats__figure">5<sub>%</sub></p>
+   <p>improvement in conversion during validation phase</p>
+ </div>
+</div>
+
+## Challenges
+
+Our app has a condominium content hub with over 40,000 pages, where users can get information about their properties, check photos of the common areas, read about the neighborhood, and find available listings for rent or sale. These pages are very important for QuintoAndar:
+
+- They are an important source of [organic traffic](https://en.wikipedia.org/wiki/Organic_search_results), with a steadily increasing number of users coming from search engine results.
+- They have high conversion rates in the medium to long-term compared to other pages.
+
+However, there were challenges when it came to the performance and user experience in these pages:
+
+- Their performance as measured by [Core Web Vitals](/vitals/) was not optimized, and there were known issues regarding slow page loads, slow responsiveness to user input, and layout instability.
+- Their [bounce rates](https://en.wikipedia.org/wiki/Bounce_rate) were high, even if we expected them to be higher than in other parts of the app.
+- The [page experience update in Google Search](https://developers.google.com/search/blog/2020/11/timing-for-page-experience)&mdash;which, at that time, was not yet released&mdash;would include Core Web Vitals into the ranking algorithm, which meant page performance could affect how search results were going to be displayed.
+
+At the same time, we identified some developer experience opportunities that could unlock gains in other projects across the company:
+
+- Our server-side rendering logic&mdash;which renders all high-traffic pages, including condominium pages&mdash;was created in-house, and became too complex to maintain and onboard new hires.
+- Essential features to achieve good app performance, such as [code splitting](https://developer.mozilla.org/docs/Glossary/Code_splitting), also required a custom setup plus manual work from the developers.
+- QuintoAndar has over 30 [React](https://reactjs.org) web applications. Delivering updates to these applications and maintaining them in accordance to best practices is an arduous task.
+
+## Approach
+
+We began a performance optimization project of the condominium content hub to improve its user experience, as these improvements could lead to conversion gains, better SEO, and better usability. This initiative was also a fitting opportunity to improve the developer experience as well.
+
+### Migrating to Next.js
+
+The new version of the condominium page was implemented with [Next.js](http://nextjs.org/). Being largely independent from other parts of the app, the condominium content hub seemed like a good candidate for trying out a new framework. We would be able to understand the magnitude of migration efforts and evaluate how its features could help without affecting the other React apps in QuintoAndar.
+
+A hard requirement was to ensure pages remained crawlable by search engines. Next.js meets this requirement by supporting server-side rendering out-of-the-box, and removes the need for a custom setup. The documentation makes it much easier to share knowledge on how to do tasks such as [data fetching](https://nextjs.org/docs/basic-features/data-fetching) on the server and onboard new developers. Server-side rendering is also known to [improve performance](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering) metrics such as [First Contentful Paint](/fcp/) (FCP).
+
+The framework provides other performance-friendly features such as automatic [code splitting](/reduce-javascript-payloads-with-code-splitting/) and [prefetching](/link-prefetch/). Even though the existing structure already provided such features, the additional work required from developers stalled their adoption. For example, code splitting at page or component-level had to be done manually.
+
+### Optimizing JavaScript resources
+
+The first step was to [remove unused code](/remove-unused-code/). We looked at the [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) reports, which shows the contents of each JS bundle, and carefully reviewed all third-party scripts. As a result, we were able to clean up some tracking libraries that were not used in this specific page.
+
+Our team went further and evaluated the performance cost of existing features. For instance, the "like" button required quite a lot of JS to work. However, in the condominium page, less than 0.5% of the users interacted with the button, which is available and used more frequently in other parts of our app. After a discussion involving both Engineering and Product, we decided to remove this feature.
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/2uEL2YxbuGGlmJDlvW9F.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+  <figcaption>
+    An animation showing the “like” button feature. There is a card about an apartment available for rent. In the bottom right corner of the card, there is a grey heart-shaped button that turns blue when clicked.
+  </figcaption>
+</figure>
+
+Other JS optimizations were already in place, such as [static compression with Brotli](/reduce-network-payloads-using-text-compression/#static-compression), which was done at build time using [`BrotliWebpackPlugin`](https://github.com/mynameiswhm/brotli-webpack-plugin), and was also applied to other types of static resources. At first, we were relying on the compression provided by the CDN, and Brotli reduced JS size by 18% compared to gzip. But then, we switched to Brotli compression at build time, and were able to achieve a 24% reduction.
+
+### Optimizing image resources
+
+There is a hero image occupying most of the area above the fold in the mobile version. It also happens to be the [Largest Contentful Paint](/lcp/) (LCP) of the page.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/W7koRinBm3QXErIzwGP8.png", alt="The condominium page for Edifício Copan (São Paulo, Brazil). A photo taken from the ground level shows the curves of the building structure.", width="360", height="640" %}
+  <figcaption>
+    The hero image of a condominium page.
+  </figcaption>
+</figure>
+
+Previously, all images already had `srcset` and `sizes` attributes to [serve responsive images](/serve-responsive-images/). We also used [Thumbor](https://github.com/thumbor/thumbor) to resize images on-demand and configured our CDN to cache them efficiently.
+
+Modern mobile devices have displays with very high pixel density, meaning the browser would render 3x or 4x versions of the image, if available. As resolution increases, it gets harder for the human eye to perceive the differences, but file sizes will increase regardless. [Capping the maximum image resolution](https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices) improved image size without compromising the user experience. We limited the hero image to serve its 2x version at most, which is approximately 35% smaller than the 3x version and 50% smaller than the 4x one.
+
+To finish, we used a [preloading](/preload-critical-assets/) strategy to download and display it as soon as possible, looking forward to improving the LCP metric.
+
+```html
+<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
+```
+
+The [Next.js built-in image component](https://nextjs.org/docs/basic-features/image-optimization) includes many of these optimizations such as responsive resizing and prioritized loading. During this project, we did not migrate the existing images to use this component, but we are planning to adopt it in new features.
+
+### Reducing layout shift
+
+The condominium page had a few issues with [Cumulative Layout Shift](/cls/) (CLS). The elements responsible for the layout shifts were rendered only in the client&mdash;for instance, hydrating server-side markup with client-rendered components, or images without defined `width` and `height` attributes.
+
+To solve these problems, we set exact dimensions for these elements when possible, or estimated values with `min-height`. There are more options, such as using the [`aspect-ratio` CSS property](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio). We also created placeholders to prevent dynamically rendered components from causing layout shifts.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/VqFwUiJOtNmyNc14xljP.png", alt="An image showing an urban area in Google Maps with a red marker in the center.", width="397", height="174" %}
+  <figcaption>
+    Defining dimensions for elements such as the map image reduced the CLS.
+  </figcaption>
+</figure>
+
+### Progressively rolling out changes
+
+Our team wanted to validate that the optimized version of the condominium hub page to make sure the user experience would be better. To achieve this, we adopted a progressive rollout strategy:
+
+1. In the first phase, the new version was published for a few hand-picked URLs, so only a few hundreds of users per day would see them;
+2. In the second phase, it was published for more pages, accounting to a few thousand users per day;
+3. In the third and final phase, it was published for all pages, and the roll-out was completed for all users.
+
+During this period, the engineering team continuously measured page performance in production and kept working on improvements. Additionally, the team compared business metrics between the new and previous versions. The results in this validation period were promising.
+
+## Results
+
+The team used [SpeedCurve](https://speedcurve.com) to continuously run [lab tests](/user-centric-performance-metrics/#how-metrics-are-measured) against the condominium page. These are the results for the mobile version:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Lab metric</th>
+        <th>Before</th>
+        <th>After</th>
+        <th>Difference</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Largest Contentful Paint (LCP)</td>
+        <td>2.41 seconds</td>
+        <td>1.48 seconds</td>
+        <td>-39%</td>
+      </tr>
+      <tr>
+        <td>Time to Interactive (TTI)</td>
+        <td>12.16 seconds</td>
+        <td>7.48 seconds</td>
+        <td>-39%</td>
+      </tr>
+      <tr>
+        <td>Total Blocking Time (TBT)</td>
+        <td>1124 milliseconds</td>
+        <td>1056 milliseconds</td>
+        <td>-4%</td>
+      </tr>
+      <tr>
+        <td>Cumulative Layout Shift (CLS)</td>
+        <td>0.0402</td>
+        <td>0.0093</td>
+        <td>-77%</td>
+      </tr>
+    </tbody>
+    <caption>
+      Lab metrics results collected with SpeedCurve.
+    </caption>
+  </table>
+</div>
+
+We also wanted to check the impact on our real users. Using field data collected with [Instana Website Monitoring](https://www.instana.com/website-end-user-monitoring/), we looked at the 1-month period before and after the roll-out. Comparing the 75th percentile for mobile users, we found that LCP decreased by 26%, and FID decreased by 72%.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IAVpmg7O1Moxk8qA7zcq.png", alt="A line graph with LCP values comparing the new and previous versions during the current and past month. The curve for the new version floats between 2 and 4 seconds, staying below the curve for the previous version most of the time.", width="800", height="495" %}
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QWkHnGHi4YTdBR6q17sw.png", alt="A line graph with FID values comparing the new and previous versions during the current and past month. The curve for the new version stays below 100ms most of the time, while in the curve for the previous version there are a few spikes crossing 250ms.
+", width="800", height="494" %}
+  <figcaption>
+    Field metrics results collected with Instana.
+  </figcaption>
+</figure>
+
+[PageSpeed Insights](https://pagespeed.web.dev/) provides a field data report for the last 28 days. [The most accessed condominium page](https://www.quintoandar.com.br/condominio/ed-copan-centro-historico-de-sao-paulo-sao-paulo-ndv7sq7j2d) alone had enough data to generate a report for mobile users. As of November 2021, all Core Web Vitals are in the "good" bucket.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/83nulYFqSAAWNLLPHXut.png", alt="A screenshot of the PageSpeed Insights report focusing on the Field Data section. All Core Web Vitals metrics (FCP, FID, LCP, CLS) are in the good bucket.", width="800", height="483" %}
+  <figcaption>
+    PageSpeed Insights shows that mobile users are having a good experience in the most accessed condominium page.
+  </figcaption>
+</figure>
+
+During the progressive roll-out, we noticed a drop in bounce rates. By the time we had finished the release for all pages, [Google Analytics](https://analytics.google.com/) showed a 46% decrease in bounce rate, a 87% increase in pages per session, and a 49% increase in average session duration. The bounce rate reduction was even bigger for paid searches, reaching a 59% drop — a positive sign when it comes to the investments in [pay-per click](https://en.wikipedia.org/wiki/Pay-per-click) (PPC) ads.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/f31hvBafirHtDBlKINwI.png", alt="A screenshot of a graph from Google Analytics. It compares the bounce rates between two distinct periods in March 2021. Starting from March 17th, there is a slight drop in the bounce rate. The drop is accentuated on March 24th.", width="800", height="169" %}
+  <figcaption>
+    Google Analytics shows the bounce rate decreasing as we rolled-out the new version in more pages.
+  </figcaption>
+</figure>
+
+As for the impact in business metrics, we analyzed conversion rates for transactions like scheduling a tour and applying to rent or buy an estate. While improvements were still being rolled out, our team compared the conversion between the previous and new versions. In the same week, the group of pages with the new version showed a 5% conversion increase, while the other pages had a slight decrease in the same metric.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8duPNi2huaphIWCU7DBb.png", alt="Two line graphs side-by-side, each one comparing the conversion between the current and previous week. The left one is for the previous version of the page, showing the conversion curve for the current week is a bit below the one for the previous week. The right one is for the new version, and the conversion curve for the current week is a bit above the one for the previous week.", width="800", height="447" %}
+  <figcaption>
+    In the same week, the conversion for the new version increased, while the previous version had a small decrease.
+  </figcaption>
+</figure>
+
+## Conclusion
+
+This project is the first part of a long-term migration effort from framework-less React to Next.js. The teams who worked on the condominium page since then gave positive feedback about the improved developer experience. Other teams who had to bootstrap new web apps have already done so with Next.js. We believe Next.js will simplify maintenance efforts and establish a common ground between different apps.
+
+Overall, the condominium content hub has been continuously growing in terms of absolute number of users and transactions. In the long-term analysis, there are many factors contributing to this, like the expansion of QuintoAndar’s operation and SEO initiatives such as improved page indexing. During this project, we have seen that page performance is also one of these factors with great potential for positive conversion impact.
+
+_Special thanks to [Pedro Carmo](https://www.linkedin.com/in/pasrcarmo/), Product Manager of the SEO team, for diving into the user data and creating all the conversion analysis seen in this case study._
diff --git a/src/site/content/en/blog/racer-sound/index.md b/src/site/content/en/blog/racer-sound/index.md
new file mode 100644
index 00000000000..f4a0dcd0b13
--- /dev/null
+++ b/src/site/content/en/blog/racer-sound/index.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Case Study - The Sounds of Racer
+authors:
+  - plan8
+date: 2013-06-11
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+[Racer](http://www.chrome.com/racer) is a multi-player, multi-device Chrome Experiment. A retro-style slot car game played across screens. On phones or tablets, Android or iOS. Anyone can join. No apps. No downloads. Just the mobile web.
+
+[Plan8](http://www.plan8.se/) together with our friends at [14islands](http://www.14islands.com/) created the dynamic music and sound experience based on an original composition by Giorgio Moroder. Racer features responsive engine sounds, race sound effects, but more importantly a dynamic music mix that distributes itself over several devices as racers join. It’s a multi-speaker installation composed of smartphones.
+
+Connecting multiple devices together was something we had been fooling around with for some time. We had done music experiments where sound would split up on different devices or jump between devices, so we were eager to apply those ideas to Racer.
+
+More specifically we wanted to test if we could build up the music track across the devices as more and more people joined the game—starting with drums and bass, then adding guitar and synths and so on. We did some music demos and dived into coding. The multi speaker effect was really rewarding. We didn’t have all the syncing right at this point, but when we heard the layers of sound spread out over the devices we knew we were onto something good.
+
+## Creating the sounds
+
+Google Creative Lab had outlined a creative direction for the sound and music. We wanted to use analogue synthesizers to create the sound effects rather than recording the real sounds or resorting to sound libraries. We also knew the output speaker would, in most cases, be a tiny phone or tablet speaker so the sounds had to be limited in frequency spectrum to avoid the speakers from distorting. This proved to be quite a challenge. When we received the first music drafts from Giorgio it was a relief because his composition worked perfectly with the sounds we had created.
+
+## Engine sound
+
+The greatest challenge in programming the sounds was to find the best engine sound and sculpt its behavior. The race track resembled an F1 or Nascar track, so the cars had to feel fast and explosive. At the same time the cars were really small so a big engine sound wouldn’t really connect the sound to the visuals. We couldn’t have a beefy roaring engine playing in the mobile speaker anyway so we had to figure out something else.
+
+To get some inspiration we hooked up some of our friend [Jon Ekstrand’s](http://www.google.com/url?q=http%3A%2F%2Fwww.imdb.com%2Fname%2Fnm0252528%2F%3Fref_%3Dfn_al_nm_1&sa=D&sntz=1&usg=AFQjCNE5yX4_xdtd3BL-Li5Fey7mS_wisg) collection of modular synths and started messing around. We liked what we heard. This is what it sounded like with two oscillators, some nice filters and LFO.
+
+Analogue gear has been remodeled with great success using the Web Audio API before so we had high hopes and started to create a simple synth in Web Audio. A generated sound would be the most responsive but would tax the processing power of the device. We needed to be extremely lean to save all the resources we could in order for the visuals to run smoothly. So we switched technique in favor of playing audio samples instead. 
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bxjDQZVgd6JVBQSyhITC.jpg", alt="Modular synth for engine sound inspiration", width="375", height="500" %}
+</figure>
+
+There are several techniques that could be used to make an engine sound out of samples. The most common approach for console games would be to have a layer of multiple sounds (the more the better) of the engine at different RPMs (with load) and then crossfade and crosspitch between them. Then add a layer of multiple sounds of the engine just revving (without load) at the same RPM and crossfade and crosspitch between the too. Crossfading between those layers when shifting gears, if done properly, will sound very realistic but only if you have a large amount of sound files. The crosspitching can’t be too wide or it will sound very synthetic. Since we had to avoid long load times this option wasn’t good for us. We tried with five or six sound files for each layer, but the sound was disappointing. We had to find a way with fewer files.
+
+The most effective solution proved to be this:
+
+- One sound file with acceleration and gear shifting synced with the visual acceleration of the car ending in a programmed loop at the highest pitch / RPM. The Web Audio API is very good at looping precisely so we could do this without glitches or pops.
+- One sound file with deceleration / engine revving down.
+- And finally one sound file playing the still / idle sound in a loop.
+
+### Looks like this
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dqM92LCuKBgEyLsI4iSk.png", alt="Engine sound graphic", width="602", height="104" %}
+</figure>
+
+For the first touch event / acceleration we would play the first file from the beginning, and if the player released the throttle we would calculate the time from where we were in the sound file at release so that when the throttle came on again it would jump to the right place in the acceleration file after the second (revving down) file was played.
+
+```js
+function throttleOn(throttle) {
+    //Calculate the start position depending 
+    //on the current amount of throttle.
+    //By multiplying throttle we get a start position 
+    //between 0 and 3 seconds.
+    var startPosition = throttle * 3;
+
+    var audio = context.createBufferSource();
+    audio.buffer = loadedBuffers["accelerate_and_loop"];
+
+    //Sets the loop positions for the buffer source.
+    audio.loopStart = 5;
+    audio.loopEnd = 9;
+
+    //Starts the buffer source at the current time
+    //with the calculated offset.
+    audio.start(context.currentTime, startPosition);
+}
+```
+
+### Give it a go
+Start the engine and press the "Throttle" button.
+
+```html
+<input type="button" id="playstop" value = "Start/Stop Engine" onclick='playStop()'>
+<input type="button" id="throttle" value = "Throttle" onmousedown='throttleOn()' onmouseup='throttleOff()'>
+```
+
+So with only three small sound files and a good sounding engine we decided to move on to the next challenge.
+
+## Getting the sync
+
+Together with David Lindkvist of 14islands we started to look deeper into getting the devices to play in perfect sync. The basic theory is simple. The device asks the server for its time, factors in network latency, then calculates the local clock offset.
+
+```js
+syncOffset = localTime - serverTime - networkLatency
+```
+
+With this offset each connected device shares the same concept of time. Easy, right? (Again, in theory.)
+
+## Calculating network latency
+
+We might assume that latency is half the time it takes to request and receive a response from the server:
+
+```js
+networkLatency = (receivedTime - sentTime) × 0.5
+```
+
+The problem with this assumption is that the round trip to the server is not always symmetrical, i.e. the request might take longer than the response or vice versa. The higher the network latency, the bigger impact this asymmetry will have—causing sounds to be delayed and played out of sync with other devices.
+
+Luckily our brain is wired to not notice if sounds are slightly delayed. Studies have shown that it takes a delay of 20 to 30 milliseconds (ms) before our brain will perceive sounds as separate. However, by around 12 to 15 ms, you will start to “feel” the effects of a delayed signal even if you’re unable to fully “perceive” it. We investigated a couple of established time synchronization protocols, simpler alternatives, and tried implementing some of them in practice. In the end—thanks to Google’s low latency infrastructure—we were able to simply sample a burst of requests and use the sample with the lowest latency as a reference.
+
+## Fighting clock drift
+
+It worked! We had 5+ devices playing a pulse in perfect sync—but only for a while. After playing for a couple of minutes devices would drift apart even though we scheduled sound using the highly precise Web Audio API context time. The lag accumulated slowly, by only a couple of milliseconds at a time and undetectable at first, but resulting in musical layers totally out of sync after playing for longer periods of time. Hello, clock drift.
+
+The solution was to re-sync every few seconds, calculate a new clock offset and seamlessly feed this into the audio scheduler. To reduce the risk of notable changes in the music due to network lag, we decided to smooth out the change by keeping a history of latest sync offsets and calculate an average.
+
+## Scheduling song and switching arrangements
+
+Making an interactive sound experience means that you are no longer in control of when parts of the song will play, since you depend on user actions to change the current state. We had to make sure we could switch between arrangements in the song in a timely fashion, which means our scheduler had to be able to calculate how much remains of the currently playing bar before switching to the next arrangement.
+Our algorithm ended up looking something like this:
+
+- `Client(1)` starts the song.
+- `Client(n)` asks first client when the song was started.   
+- `Client(n)` calculates a reference point to when the song was started using its Web Audio context, factoring in syncOffset, and the time that has passed since its audio context was created. 
+- `playDelta = Date.now() - syncOffset - songStartTime - context.currentTime`
+- `Client(n)` calculates how long the song has been running using the playDelta. The song scheduler uses this to know which bar in the current arrangement should be played next.
+- `playTime = playDelta + context.currentTime nextBar = Math.ceil((playTime % loopDuration) ÷ barDuration) % numberOfBars`
+
+For the sake of sanity, we limited our arrangements to always be eight bars long and have the same tempo (beats per minute).
+
+## Look ahead
+
+It’s always important to [schedule](http://www.html5rocks.com/en/tutorials/audio/scheduling/) ahead when using `setTimeout` or `setInterval` in JavaScript. This is because the JavaScript clock is not very precise and scheduled callbacks can easily be skewed by tens of milliseconds or more by layout, rendering, garbage collection, and XMLHTTPRequests. In our case we also had to factor in the time it takes for all clients to receive the same event over the network.
+
+## Audio sprites
+
+Combining sounds into one file is a great way to reduce HTTP requests, both for HTML Audio and the Web Audio API. It also happens to be the best way to play sounds responsively using the Audio object, since it doesn’t have to load up a new audio object before playing. There are already some [good implementations](http://www.google.com/url?q=http%3A%2F%2Fremysharp.com%2F2010%2F12%2F23%2Faudio-sprites%2F&sa=D&sntz=1&usg=AFQjCNFzBNuXNYzET0YRpiP_UxSq6Aa10A) out there which we used as a starting point. We’ve extended our sprite to work reliably on both iOS and Android as well as handling some odd cases where devices fall asleep.
+
+On Android, Audio elements keep playing even if you put the device into sleep mode. In sleep mode, JavaScript execution is limited to preserve battery and you can’t rely on `requestAnimationFrame`, `setInterval` or `setTimeout` to fire callbacks. This is a problem since audio sprites rely on JavaScript to keep checking if playback should be stopped. To make matters worse, in some cases the Audio element’s `currentTime` doesn’t update though the audio is still playing. 
+
+Check out the [AudioSprite implementation](https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2F14islands%2FAudioSprite&sa=D&sntz=1&usg=AFQjCNE7SWRjiPbz_4NDPqXsAQYbPu-v8A) we used in Chrome Racer as a non-Web Audio fallback.
+
+## Audio element
+
+When we started working on Racer, Chrome for Android did not yet support the Web Audio API. The logic of using HTML Audio for some devices, the Web Audio API for others, combined with the advanced audio output we wanted to achieve made for some interesting challenges. Thankfully, this is all history now. Web Audio API is implemented in [Android M28 beta.](https://play.google.com/store/apps/details?id=com.chrome.beta)
+
+- Delays/timing issues. The Audio element doesn’t always play exactly when you tell it to play. Since JavaScript is single threaded the browser might be busy, causing playback delays of up to two seconds.
+- Playback delays mean smooth looping is not always possible. On desktop you can use [double buffering](https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2FHivenfour%2FSeamlessLoop&sa=D&sntz=1&usg=AFQjCNGmYC2m___Fh9cPiv9AXPrXRqM14w) to achieve somewhat gapless loops, but on mobile devices this isn’t an option, because:
+    - Most mobile devices won’t play more than one Audio element at a time.
+    - Fixed volume. Neither Android nor iOS allow you to change the volume of an Audio object.
+- No preloading. On mobile devices, the Audio element won’t start loading its source unless playback is initiated in a `touchStart` handler.
+- Seeking [issues](https://code.google.com/p/chromium/issues/detail?id=110309). Getting `duration` or setting `currentTime` will fail unless your server supports HTTP Byte-Range. Watch out for this one if you’re building an audio sprite like we did.
+- Basic Auth on MP3 fails. Some devices [fail to load MP3 files protected by Basic Auth](https://code.google.com/p/android/issues/detail?id=1353), no matter which browser you’re using.
+
+## Conclusions
+
+We’ve come a long way since hitting the mute button as the best option to deal with sound for web, but this is only the beginning and web audio is about to rock hard. We’ve only touched the surface of what can be done when it comes to syncing of multiple devices. We didn’t have the processing power in the phones and tablets to dive into signal processing  and effects (like reverb), but as device performance increases web based games will take advantage of those features too. These are exciting times to continue pushing the possibilities of sound.
diff --git a/src/site/content/en/blog/racer/index.md b/src/site/content/en/blog/racer/index.md
new file mode 100644
index 00000000000..cb0a1f0aba9
--- /dev/null
+++ b/src/site/content/en/blog/racer/index.md
@@ -0,0 +1,326 @@
+---
+layout: post
+title: Case Study - Building Racer
+authors:
+  - activetheory
+date: 2013-06-11
+tags:
+  - blog
+  - case-study
+---
+## Introduction
+
+[Racer](http://g.co/racer) is a web-based mobile Chrome Experiment developed by [Active Theory](http://activetheory.net). Up to 5 friends can connect their phones or tablets to race across every screen. Armed with the concept, design and prototype from Google Creative Lab and sound from Plan8 we iterated on builds for 8 weeks leading up to the launch at I/O 2013. Now that the game has been live for a few weeks we've had the chance to field some questions from the developer community on how it works. Below is a breakdown of the key features and answers to the questions we're most often asked.
+
+## The Track
+
+A fairly obvious challenge we faced was how to make a web based mobile game that works well across a wide variety of devices. Players needed to be able to construct a race with different phones and tablets. One player could have a Nexus 4 and want to race against his friend who had an iPad. We needed to come up with a way to determine a common track size for each race. The solution had to involve using different size tracks depending on the specs for each device included in the race.
+
+### Calculating Track Dimensions
+
+As each player joins, information about their device is sent to the server and shared with other players. When the track is being built, this data is used to calculate the height and width of the track. We calculate the height by finding the height of the smallest screen, and the width is the total width of all screens. So in the example below the track would have a width of 1152 pixels and a height of 519 pixels.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pGzIg4YvKiY4kK4kypOG.jpg", alt="The red area shows the total width and height of the track for this example.", width="731", height="617" %}
+<figcaption>The red area shows the total width and height of the track for this example.</figcaption>
+</figure>
+
+```js
+this.getDimensions = function () {
+  var response = {};
+  response.width = 0;
+  response.height = _gamePlayers[0].scrn.h; // First screen height
+  response.screens = [];
+  
+  for (var i = 0; i < _gamePlayers.length; i++) {
+    var player = _gamePlayers[i];
+    response.width += player.scrn.w;
+
+    if (player.scrn.h < response.height) {
+      // Find the smallest screen height
+      response.height = player.scrn.h;
+    }
+      
+    response.screens.push(player.scrn);
+  }
+  
+  return response;
+}
+```
+
+### Drawing the Track
+
+[Paper.js](http://paperjs.org) is an open source vector graphics scripting framework that runs on top of HTML5 Canvas. We found Paper.js was the perfect tool to create vector shapes for the tracks, so we used its capabilities to render the SVG tracks that were built in Adobe Illustrator on a `<canvas>` element. To create the track, the `TrackModel` class appends the SVG code to the DOM and gathers information about the original dimensions and positioning to be passed to the `TrackPathView` which will draw the track to a canvas.
+
+```js
+paper.install(window);
+_paper = new paper.PaperScope();
+_paper.setup('track_canvas');
+                    
+var svg = document.getElementById('track');
+var layer = new _paper.Layer();
+
+_path = layer.importSvg(svg).firstChild.firstChild;
+_path.strokeColor = '#14a8df';
+_path.strokeWidth = 2;
+```
+
+Once the track is drawn, each device finds its x offset based on it’s position in the device line-up order, and positions the track accordingly.
+
+```js
+var x = 0;
+
+for (var i = 0; i < screens.length; i++) {
+  if (i < PLAYER_INDEX) {
+    x += screens[i].w;
+  }
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rhkZNlB2FiqNkNNcfTWU.jpg", alt="The x offset can then be used to show the appropriate portion of the track.", width="681", height="942" %}
+<figcaption>The x offset can then be used to show the appropriate portion of the track</figcaption>
+</figure>
+
+## CSS Animations
+
+Paper.js uses a lot of CPU processing to draw the track lanes and this process will take more or less time on different devices. To handle this, we needed a loader to loop until all devices finish processing the track. The problem was that any JavaScript-based animation would skip frames due to the CPU requirements of Paper.js. Enter CSS animations, which run on a separate UI thread, allowing us to smoothly animate the sheen across the "BUILDING TRACK" text.
+
+```css
+.glow {
+  width: 290px;
+  height: 290px;
+  background: url('img/track-glow.png') 0 0 no-repeat;
+  background-size: 100%;
+  top: 0;
+  left: -290px;
+  z-index: 1;
+  -webkit-animation: wipe 1.3s linear 0s infinite;
+}
+
+@-webkit-keyframes wipe {
+  0% {
+    -webkit-transform: translate(-300px, 0);
+  }
+
+  25% {
+    -webkit-transform: translate(-300px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate(920px, 0);
+  }
+
+  100% {
+    -webkit-transform: translate(920px, 0);
+  }
+}
+}
+```
+
+## CSS Sprites
+
+CSS also came in handy for in-game effects. Mobile devices, with their limited power, are kept busy animating the cars running across the tracks. So for additional excitement we used sprites as a way of implementing pre-rendered animations into the game. In a CSS sprite, transitions apply a step-based animation which changes the `background-position` property, creating the car explosion.
+
+```css
+#sprite {
+  height: 100px; 
+  width: 100px;
+  background: url('sprite.jpg') 0 0 no-repeat;
+  -webkit-animation: play-sprite 0.33s linear 0s steps(9) infinite;
+}
+
+@-webkit-keyframes play-sprite {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: -900px 0;
+  }
+}
+```
+
+The problem with this technique is you can only use sprite sheets laid out on a single row. In order to loop through multiple rows, the animation must be chained through multiple keyframe declarations.
+
+```css
+#sprite {
+  height: 100px; 
+  width: 100px;
+  background: url('sprite.jpg') 0 0 no-repeat;
+  -webkit-animation-name: row1, row2, row3;
+  -webkit-animation-duration: 0.2s;
+  -webkit-animation-delay: 0s, 0.2s, 0.4s;
+  -webkit-animation-timing-function: steps(5), steps(5), steps(5);
+  -webkit-animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes row1 {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: -500px 0;
+  }
+}
+
+@-webkit-keyframes row2 {
+  0% {
+    background-position: 0 -100px;
+  }
+
+  100% {
+    background-position: -500px -100px;
+  }
+}
+
+@-webkit-keyframes row3 {
+  0% {
+    background-position: 0 -200px;
+  }
+
+  100% {
+    background-position: -500px -200px;
+  }
+}
+```
+
+## Rendering the Cars
+
+As with any car racing game we knew it was important to give the user a feeling of acceleration and handling. Applying a different amount of traction was important for game balancing and the fun factor, so that once a player got a feel for the physics, they’d get a sense of accomplishment and become a better racer. 
+
+Once again we called on Paper.js which comes with an extensive set of math utilities. We used some of its methods to move the car along the path, while adjusting the car position and rotation smoothly each frame.
+
+```js
+var trackOffset = _path.length - (_elapsed % _path.length);
+var trackPoint = _path.getPointAt(trackOffset);
+var trackAngle = _path.getTangentAt(trackOffset).angle;
+
+// Apply the throttle
+_velocity.length += _throttle;
+
+if (!_throttle) {
+  // Slow down since the throttle is off
+  _velocity.length *= FRICTION;
+}
+
+if (_velocity.length > MAXVELOCITY) {
+  _velocity.length = MAXVELOCITY;
+}
+
+_velocity.angle = trackAngle;
+trackOffset -= _velocity.length;
+_elapsed += _velocity.length;
+
+// Find if a lap has been completed
+if (trackOffset < 0) {
+  while (trackOffset < 0) trackOffset += _path.length;
+
+  trackPoint = _path.getPointAt(trackOffset);
+  console.log('LAP COMPLETE!');
+}
+
+if (_velocity.length > 0.1) {
+  // Render the car if there is actually velocity
+  renderCar(trackPoint);
+}
+```
+
+While we were optimizing car rendering, we found an interesting point. On iOS, the best performance was achieved by applying a `translate3d` transform to the car:
+
+```js
+_car.style.webkitTransform = 'translate3d('+_position.x+'px, '+_position.y+'px, 0px)rotate('+_rotation+'deg)';
+```
+
+On Chrome for Android, the best performance was achieved by calculating the matrix values and applying a matrix transform:
+
+```js
+var rad = _rotation.rotation * (Math.PI * 2 / 360);
+var cos = Math.cos(rad);
+var sin = Math.sin(rad);
+var a = parseFloat(cos).toFixed(8);
+var b = parseFloat(sin).toFixed(8);
+var c = parseFloat(-sin).toFixed(8);
+var d = a;
+_car.style.webkitTransform = 'matrix(' + a + ', ' + b + ', ' + c + ', ' + d + ', ' + _position.x + ', ' + _position.y + ')';
+```
+
+## Keeping the Devices Synced
+
+The most important (and difficult) part of development was to make sure the game synced across devices. We thought users could be forgiving if a car occasionally skipped a few frames because of a slow connection but it wouldn't be much fun if your car is jumping around, appearing on multiple screens at once. Resolving this required a ton of trial and error, but we eventually settled on a few tricks which made it work.
+
+### Calculating Latency
+
+The starting point for syncing devices is knowing how long it takes for messages to be received from the Compute Engine relay. The tricky part is that the clocks on each device will never be completely in sync. To get around this, we needed to find the difference in time between the device and the server.
+
+To find the time offset between the device and the main server, we send a message with the current device timestamp. The server will then reply with the original timestamp along with the timestamp of the server. We use the response to calculate the actual difference in time.
+
+```js
+var currentTime = Date.now();
+var latency = Math.round((currentTime - e.time) * .5);
+var serverTime = e.serverTime;
+currentTime -= latency;
+var difference = currentTime - serverTime;
+```
+
+Doing this once is not enough, as the round trip to the server is not always symmetrical, meaning it may take longer for the response to get to the server than it does for the server to return it. To get around this, we poll the server multiple times, taking the median result. This gets us within 10ms of the actual difference between device and server.
+
+### Acceleration/Deceleration
+
+When Player 1 presses or releases the screen, the acceleration event is sent to the server. Once received, the server adds its current timestamp and then passes that data along to every other player.
+
+When an "accelerate on" or "accelerate off" event is received by a device, we are able to use the server offset (calculated above) to find out how long it took for that message to be received. This is useful, because Player 1 may receive the message in 20ms, but Player 2 might take 50ms to receive it. This would result in the car being in two different places because device 1 would start the acceleration sooner.
+
+We can take the time it took to receive the event and convert that into frames. At 60fps, each frame is 16.67ms&mdash;so we can add more velocity (acceleration) or friction (deceleration) on of the car to account for the frames it missed.
+
+```js
+var frames = time / 16.67;
+var onScreen = this.isOnScreen() && time < 75;
+
+for (var i = 0; i < frames; i++) {
+  if (onScreen) {
+    _velocity.length += _throttle * Math.round(frames * .215);
+  } else {
+    _this.render();
+  }
+}}
+```
+
+In the example above, if Player 1 has the car on its screen and the time it took to receive the message is less than 75ms, it will adjust the car's velocity, speeding it up to make up the difference. If the device is not on screen or the message took too long, it will run the render function and actually make the car jump to where it needs to be.
+
+### Keeping the Cars Synced
+
+Even after accounting for latency in acceleration, the car could still come out of sync and appear on multiple screens at once; specifically when transitioning from one device to the next. In order to prevent this, update events are sent frequently to keep the cars in the same position on the track across all screens.
+
+The logic is that, every 4 frames, if the car is visible on screen, that device sends its values to each of the other devices. If the car is not visible, the app updates the values with those received and then moves the car forward based on the time it took to get the update event.
+
+```js
+this.getValues = function () {
+  _values.p = _position.clone();
+  _values.r = _rotation;
+  _values.e = _elapsed;
+  _values.v = _velocity.length;
+  _values.pos = _this.position;
+
+  return _values;
+}
+
+this.setValues = function (val, time) {
+  _position.x = val.p.x;
+  _position.y = val.p.y;
+  _rotation = val.r;
+  _elapsed = val.e;
+  _velocity.length = val.v;
+
+  var frames = time / 16.67;
+
+  for (var i = 0; i < frames; i++) {
+    _this.render();
+  }
+}
+```
+
+## Conclusion
+
+As soon as we heard the concept for Racer, we knew it had the potential to be a very special project. We quickly built a prototype which gave us a rough idea of how to overcome latency and network performance. It was a challenging project that kept us busy during late nights and long weekends, but it was a great feeling when the game started to take shape. Ultimately, we're very happy with the end result. Google Creative Lab's concept pushed the limits of browser technology in a fun way, and as developers we couldn't ask for more.
diff --git a/src/site/content/en/blog/rakuten-24/index.md b/src/site/content/en/blog/rakuten-24/index.md
new file mode 100644
index 00000000000..0fb1214cdb5
--- /dev/null
+++ b/src/site/content/en/blog/rakuten-24/index.md
@@ -0,0 +1,139 @@
+---
+layout: post
+title: Rakuten 24’s investment in PWA increases user retention by 450%
+subhead: >
+  Making their web app installable resulted in increased traffic, visitor retention,
+  sales per customer, and conversions.
+description: >
+  Making their web app installable resulted in increased traffic, visitor retention,
+  sales per customer, and conversions.
+date: 2020-11-17
+hero: image/admin/tQYdZJzfseUxfjtvK3bL.png
+thumbnail: image/admin/JdmKiaCrxFsayexQWPXk.png
+alt: An illustration of an e-commerce app next to the text 'SCALE ON WEB'.
+tags:
+  - blog
+  - case-study
+  - install
+  - mobile
+  - progressive-web-apps
+  - scale-on-web
+---
+
+[Rakuten 24](https://24.rakuten.co.jp/) is an online store provided by Rakuten,
+one of the largest e-commerce companies in Japan. It provides a wide selection
+of everyday items including grocery, medicine, healthcare, kitchen utensils, and
+more. The team's main goal over the last year was to improve mobile customer
+retention and re-engagement. By making their web app
+[installable](/define-install-strategy/), they saw a 450% jump in
+visitor retention rate as compared to the previous mobile web flow over a
+1-month timeframe.
+
+## Highlighting the opportunity {: #opportunity }
+
+In their efforts to gain market share and improve user experience, Rakuten 24
+identified the following areas of opportunities:
+
++   As a relatively new service, Rakuten 24 was not in a position to
+    invest the time and cost in developing a platform-specific app both for iOS
+    and Android and were seeking an alternative, efficient way to fill this gap.
++   As Rakuten-Ichiba (Rakuten's e-commerce marketplace) is the biggest
+    service in Japan, many people think Rakuten 24 is a seller in
+    Rakuten-Ichiba. As a result, they acknowledged the need to invest in brand
+    awareness and drive more user retention.
+
+## The tools they used {: #tools }
+
+### Installability {: #installability }
+
+To capture the two opportunities identified above, Rakuten 24 decided to build
+[Progressive Web App](/pwa) (PWA) features on an incremental
+basis, starting with [installability](/define-install-strategy/).
+Implementing installability resulted in increased traffic, visitor retention,
+sales per customer, and conversions.
+
+### `beforeinstallprompt` {: #beforeinstallprompt }
+
+To gain more flexibility and control over their install dialogue's behaviour,
+the team implemented their own install prompt using the
+[`beforeinstallprompt`](https://developers.google.com/web/updates/2018/06/a2hs-updates)
+event. In doing so, they were able to detect if the app was already installed on
+Android or iOS and provide a more meaningful and relevant experience to their
+users.
+
+### Custom installation instructions {: #instructions }
+
+For users who weren't able to install the PWA from the banner, they created a
+<a href="https://24.rakuten.co.jp/addto/">custom guide</a>
+(linked from the banner) with instructions on how to install the PWA manually on
+both Android and iOS devices.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/APDhzk6SjyxQTgxVidFR.png", alt="Screenshots of the custom installation instructions.", width="800", height="480" %}
+</figure>
+
+### Workbox for service workers {: #workbox }
+
+The Rakuten 24 team used
+[Workbox](https://developer.chrome.com/docs/workbox/) (the
+[workbox-webpack-plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
+to be precise) to ensure their PWA worked well even when the user was offline or
+on a bad network.  Workbox's APIs for controlling
+[the cache](/service-workers-cache-storage/#the-cache-storage-api)
+worked significantly better than Rakuten 24's previous in-house script.
+Moreover, with workbox-webpack-plugin (and Babel), was able to automate the
+process of supporting a wider range of browsers. To further build network
+resilience, they implemented a
+[cache-first strategy](https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker)
+for their CSS and JS assets, and used
+[stale-while-revalidate](/stale-while-revalidate/) for their
+images that don't change frequently.
+
+## Overall business results {: #results }
+
+<div class="switcher">
+  <div class="flow">
+    <p>
+      By implementing installability, Rakuten 24 was able to increase visit frequency
+      per user by 310% compared to the rest of their web users. It also saw a 450%
+      jump in visitor retention (compared to the previous mobile web flow), a 150%
+      increase in sales per customer, and a 200% increase in conversion rate. All of
+      the improvements were observed over a 1-month timeframe.
+    </p>
+    {% Aside %}
+      All stats represent users that installed the Rakuten 24 PWA, compared to
+      web users who did not.
+    {% endAside %}
+  </div>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l49plmwrrFO3V953MQZD.png", alt="310% increase in visit frequency per user.  450% increase in visitor retention rate. 150% increase in sales per customer.200% increase in conversion rate.", width="800", height="1074" %}
+  </figure>
+</div>
+
+## Other ways the business improved with installability {: #other-improvements }
+
+* **Brand Awareness:** Since users can directly access Rakuten 24 from
+  their home screen, it helped both users and Rakuten separate Rakuten 24
+  from Rakuten-Ichiba.
+* **Efficiency:** Rakuten 24 was able to drive these results without
+  spending significant time and money building platform-specific apps for iOS
+  and Android.
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    Our mission is to contribute to society by creating value through
+    innovation and　entrepreneurship. A step towards achieving this was to
+    improve the Rakuten 24 customer experience by implementing A2HS. And in the
+    near future we also plan to enhance our PWA engagement and customer
+    proposition by developing push notifications using the Web Push API.
+  </p>
+  <cite>Masashi Watanabe, General Manager, Group Marketing Department, Rakuten Inc.</cite>
+</blockquote>
+
+{% Aside %}
+  Previously the concept of installability was known as _add to homescreen_
+  (A2HS).
+{% endAside %}
+
+Check out the [Scale on web case studies](/scale-on-web) page for
+more success stories from India and Asia.
diff --git a/src/site/content/en/blog/rakuten/index.md b/src/site/content/en/blog/rakuten/index.md
new file mode 100644
index 00000000000..4aae7e639fe
--- /dev/null
+++ b/src/site/content/en/blog/rakuten/index.md
@@ -0,0 +1,171 @@
+---
+layout: post
+title: How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate by 33.13%
+subhead: >
+  By measuring real users' Web Vitals, Rakuten 24 also found that a good Largest Contentful Paint (LCP) can lead to a conversion rate increase of 61.13%.
+description: >
+  By measuring real users' Web Vitals, Rakuten 24 also found that a good Largest Contentful Paint (LCP) can lead to a conversion rate increase of 61.13%.
+date: 2022-08-24
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uB1PUfGOXOhrqUBW3tfO.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/OLBDJ1YEaVWGkR5lqNyR.jpg
+alt: A banner image with the Rakuten 24 logo and branded artwork.
+authors:
+  - linhduong
+  - shogokashiwase
+  - hayounglee
+  - ryunosukeakiba
+tags:
+  - blog
+  - case-study
+  - web-vitals
+---
+
+[Rakuten 24](https://24.rakuten.co.jp/) is an online store that collaborates with both major multinational and domestic consumer goods manufacturers to offer a great variety of daily necessities including healthcare, beverage, pet supplies, baby products, and more. This store is provided by Rakuten Group, Inc.—a global leader in internet services, and is among the top performers on their digital marketplace platform in Japan.
+
+Understanding the impact of web performance on user experience, the Rakuten 24 team has been continuously measuring, optimizing and monitoring Core Web Vitals and other metrics.
+
+As a result, over 75% of their users are experiencing good Largest Contentful Paint (LCP), First Input Delay (FID) and First Contentful Paint (FCP). However, they are still working on Cumulative Layout Shift (CLS) improvements.
+
+After analyzing homepage data, Rakuten 24 found that a good LCP score can lead to:
+
+- An increase of up to 61.13% in conversion rate.
+- 26.09% in revenue per visitor.
+- 11.26% in average order value.
+- A good FID score can lead to an increase of up to 55.88% in conversion rate.
+
+To further correlate Core Web Vitals and business metrics, Rakuten 24 also ran an A/B test focused on optimizing Core Web Vitals and related metrics, and saw an improvement of: 
+
+- 53.37% in revenue per visitor.
+- 33.13% in conversion rate.
+- 15.20% in average order value.
+- 9.99% in average time spent.
+- A 35.12% reduction in exit rate.
+
+## Highlight the opportunity
+
+Though optimizing web performance is a smart investment to improve user experience and business growth, Rakuten 24 team understands how difficult it can be to convince stakeholders to adopt Core Web Vitals and focus on web performance. They believe that showing stakeholders exactly what kind of Return on Investment (ROI) performance optimization can bring is the best way to get them on board.
+
+Being a relatively new and independent service, Rakuten 24 used their advantage of flexibility to take up the challenge. They believe that the result of their case study would help them make more data-oriented decisions in the future, as well as help other developers measure the impact of their work and convince their stakeholders that improving performance is worth the investment. Find out how they did it in this post.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ij6fET9W23vj1IOb3e6O.jpg", alt="Example screenshots of Rakuten 24's homepage, with mobile device frames around each screenshot.", width="800", height="537" %}
+  <figcaption>
+    Some example screenshots of Rakuten 24's homepage.
+  </figcaption>
+</figure>
+
+## Optimize JavaScript and resources
+
+- Eliminate render-blocking resources.
+- Split code and use [dynamic `import()`](https://v8.dev/features/dynamic-import).
+- Split all content into separate parts and lazy load below-the-fold HTML files.
+- Execute and load JavaScript on demand.
+- Identify slow JavaScript resources and optimize the loading process by using the async attribute on `<script>` tags and establishing early connections to important origins (Resource hints such as `dns-prefetch`, `preconnect`, and `preload`).
+- [Remove unused code](/remove-unused-code/), and [minify and compress code](/reduce-network-payloads-using-text-compression/).
+- [Use a CDN](/content-delivery-networks/).
+- [Control caching using Service Worker](/learn/pwa/caching/) with [Workbox](https://developer.chrome.com/docs/workbox/).
+
+## Optimize images
+
+- [Lazy load below-the-fold images](/lazy-loading-images/).
+- [Optimize images with a CDN](/image-cdns/), deliver properly sized images, compress images, and adopt the right image formats for the job (WebP, SVG, Web Fonts).
+
+## Optimize CLS
+
+- Use CSS [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) to reserve the required space for images while the images are loading.
+- Use CSS [`min-height`](https://developer.mozilla.org/docs/Web/CSS/min-height) to minimize layout shifts while elements are lazy loaded.
+
+## Performance measuring
+
+Besides using [PageSpeed Insights](https://pagespeed.web.dev/) to audit their website, the team wanted to find a better way to know what the users are actually experiencing in the field. Therefore, Rakuten 24 decided to use the [web-vitals JavaScript library](https://github.com/GoogleChrome/web-vitals) to measure Core Web Vitals and other metrics in the field and send the data to inhouse analytics tool.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/o5Nd3IV6Yof3mfr3tVH3.jpg", alt="Rakuten 24's web vitals tracking integration flow. The first step is to integrate the web-vitals library by adding the script to the Rakuten 24 website. After that, web vitals can be measured from real user metrics, and the data is sent to Rakuten 24's in-house data collection tool.", width="800", height="495" %}
+</figure>
+
+## Performance analyzing
+
+The team analyzed the collected field data to determine if there is any correlation between the Core Web Vitals and the key business metrics. They found out that the converted users tend to experience a better LCP than the users who didn’t convert.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xWYjqq9sEJ2yQlDxl6fY.jpg", alt="A comparison of users who converted versus those who didn't by LCP. The user group who converted more frequently experienced a lower LCP.", width="800", height="391" %}
+</figure>
+
+The collected data also revealed that:
+
+- A good LCP can lead to an increase of up to 61.13% in conversion rate, 26.09% in revenue per visitor, and 11.26% in average order value.
+- A good FID can lead to an increase of up to 55.88% in conversion rate compared to the overall average data.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/kW535AoWqoPqmUWARPZt.jpg", alt="LCP bucketed by conversion rate and LCP time. Users who converted more frequently converted when LCP was lower, with 61.13% of users converting with an LCP of one second or lower.", width="800", height="376" %}
+  <figcaption>
+    The impact of LCP on conversion rate.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/MBCTKocekiENQSQBS6wO.jpg", alt="LCP bucketed by revenue per visitor and LCP time. Users with lower LCP provided more revenue, with 26.09% more revenue provided per user when LCP was one second or lower.", width="800", height="376" %}
+  <figcaption>
+    The impact of LCP on revenue per visitor.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mFfKxOV5snRw2e6lEqC5.jpg", alt="LCP bucketed by average order value and LCP time. Users with lower LCP had a 11.26% higher average order value when LCP was one second or lower.", width="800", height="376" %}
+  <figcaption>
+    The impact of LCP on average order value.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/hzfFyMF9UM0PD0y1dq9V.jpg", alt="FID bucketed by conversion rate and FID time. Users who converted more frequently converted when FID was lower, with 55.88% of users converting with an FID of 50 milliseconds or lower.", width="800", height="362" %}
+  <figcaption>
+    The impact of FID on conversion rate.
+  </figcaption>
+</figure>
+
+## Performance monitoring
+
+The team built a performance monitoring dashboard using the data collected in the field and business intelligence tool. This is important for monitoring progress and preventing regressions.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/nd87NaZ2i9cG905ChUdU.jpg", alt="A screenshot of Rakuten 24's internal performance monitoring dashboard for each of the Core Web Vitals (LCP, CLS, and FID).", width="800", height="354" %}
+  <figcaption>
+    Performance monitoring dashboard.
+  </figcaption>
+</figure>
+
+## A/B test
+
+Believing that A/B tests are a good way to measure the business impact of performance optimizations, the team optimized one of their landing pages for Core Web Vitals then compared the optimized version with the original page via A/B test for a month. They picked a landing page with significant traffic and conversion so that the test could achieve meaningful results. During the test duration, 50% of the traffic was sent to the optimized landing page (version A), and 50% was sent to the original page (version B). The only difference between version A and version B was that version A was optimized for Core Web Vitals and there were no other functional or visual differences.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/fc1R2EzGmE8WNd0C9CWu.jpg", alt="A screenshot of a mobile A/B test for the Rakuten 24 website. Each version was visually and functionally the same, with version A optimized for better Core Web Vitals.", width="800", height="1129" %}
+</figure>
+
+The optimized version A finished loading 0.4 seconds earlier in the mobile load test and shows no significant layout shift. In fact, the CLS of version A improved by **92.72% compared to version B**. Other Web Vitals scores also improved: **FID improved by 7.95%**, **FCP improved by 8.45%**, and **TTFB improved by 18.03%**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ngLxHt0V3Ubss5gkT05t.jpg", alt="A startup comparison of the Rakuten 24 homepage. Version A is optimized for better loading, loading within 1.6 seconds, compared to Version B, which loaded within 2 seconds.", width="800", height="488" %}
+  <figcaption>
+    Mobile load test result of version A and version B.
+  </figcaption>
+</figure>
+
+Comparing the optimized version A to the unoptimized version B, Rakuten 24 found that version A brings about:
+
+- 53.37% increase in revenue per visitor.
+- 33.13% increase in conversion rate.
+- 15.20% increase in average order value.
+- 9.99% increase in average time spent.
+- 35.12% reduction in exit rate.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/m9YXxAbL0Cc3qqblK4Wu.jpg", alt="A screenshot of Core Web Vitals improvements for the Rakuten 24 homepage. The stats are a 53.37% increase in revenue per visitor, 33.13% increase in conversion rate, 15.2% increase in average order value, 9.99% increase in average time spent on pages, and 35.12% reduction in exit rate.", width="800", height="285" %}
+</figure>
+
+## Conclusion
+
+Web performance optimization is challenging but rewarding. By taking a data-driven approach, Rakuten 24 has successfully delivered better user experience as well as measured positive impact on their business. Understanding that this is just a part of the journey not the destination, they will continue improving their website to provide online shoppers with more delightful experiences.
+
+Optimization requires a joint effort and developers do not have to be alone on this journey. By sharing their struggles and achievements, Rakuten 24 hopes that more developers can use Core Web Vitals data to develop a mutual understanding with stakeholders then work together towards high-quality user experience and business growth.
diff --git a/src/site/content/en/blog/raphael/index.md b/src/site/content/en/blog/raphael/index.md
new file mode 100644
index 00000000000..8078f9b8c8b
--- /dev/null
+++ b/src/site/content/en/blog/raphael/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: Introduction to Raphaël.js
+authors:
+  - jameswilliams
+date: 2011-09-08
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+## Introduction
+SVG, short for Scalable Vector Graphics, is a XML-based language for
+describing objects and scenes. SVG elements can fire events and can be
+scripted with JavaScript. SVG comes with several built-in primitive types such
+as circles and rectangles as well as being able to display text. While SVG as
+a technology is not new, HTML5 now enables SVG objects
+to be embedded in a page directly without the use of a `<object>`
+or `<embed> `tag bringing it in line with what is currently
+available with the canvas. [Raphaël.js](http://raphaeljs.com)
+is a JavaScript library that allows you to create SVG scenes programmatically.
+It uses a unified API to create SVG scenes where it is supported or
+VML(Vector Modeling Language) where it is now, namely Internet Explorer
+versions before IE9.
+
+## Drawing Your First Scene
+
+Let's begin by drawing a simple scene with Raphaël. We begin drawing the
+scene by instantiating a Raphaël object. In this case,
+I used the constructor that inserts it into a given HTML element with a given
+width and height but you could also have Raphaël append the object to the DOM
+(Document Object Model). Next, I created a rectangle by supplying the desired
+x and y positions with the width and height. Next, I created a circle by
+giving the desired coordinates and radius. Finally, I used the attribute function
+(attr) to assign colors to the objects.
+
+Each SVG object can have attributes
+assigned to it for things like the color, rotation, stroke color and size,
+etc. You can find a detailed list of assignable attributes [here](http://raphaeljs.com/reference.html#attr).
+
+```js
+var paper = Raphael("sample-1", 200, 75);
+var rect = paper.rect(10, 10, 50, 50);
+var circle = paper.circle(110, 35, 25);
+
+rect.attr({fill: "green"});
+circle.attr({fill: "blue"});
+```
+
+## Drawing Advanced Shapes with Paths
+
+A path is a series of instructions used by the renderer to create objects.
+Drawing with a path is like drawing with a pen on a giant piece of graph paper.
+You can instruct the pen to be lifted from the paper and move to a different
+position(move to), to draw a line(line to), or to draw a curve(arc to). Paths
+enable SVG to create objects with the same level of detail regardless of the
+scale. When you issue an instruction to say, draw a curve, SVG takes into
+account the original and final desired size of the curve (after scaling), it
+mathematically computes the intermediary points to render a smooth curve.
+
+The code and figure below show a rectangle and closed curved drawn with paths.
+The letter M followed by coordinates moves the pen to that position, L followed
+by coordinate pair draws a line from that the current position to that position.
+s draws a smooth Bezier curve with a given control point and endpoint with
+relative coordinates. Z closes a path. Generally, using an uppercase letter issues the command
+with absolute coordinates, lowercase uses relative coordinates. M/m and Z/z,
+respectively, issue the same command for uppercase or lowercase.
+You can view a list of all the path instructions [here](http://www.w3.org/TR/SVG/paths.html).
+
+```js
+var paper = Raphael("sample-2", 200, 100);
+var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
+var curvePath = paper.path("M110,10s55,25 40,80Z");
+
+rectPath.attr({fill:"green"});
+curvePath.attr({fill:"blue"});
+```
+
+## Drawing Text
+
+Having illustrations without the ability to draw text would be really boring,
+luckily, Raphaël provides two methods to draw text. The first method, text,
+takes a x and y coordinates along with the string to draw. The text method
+doesn't give you much control over the font or other effects. It draws in the
+default font with the default size.
+
+The second method, print, draws the text as a collection of paths. As a result,
+we are able to modify individual letters. In the example below, we colored the
+numeral 5 with an orange fill, colored "ROCKS" with a bluish fill and made the
+stroke thicker to simulate bold text. We did this using a custom font with a
+font size of 40pts.
+
+```js
+var paper = Raphael("sample-4", 600, 100);
+var t = paper.text(50, 10, "HTML5ROCKS");
+
+var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
+
+letters[4].attr({fill:"orange"});
+for (var i = 5; i < letters.length; i++) {
+letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
+}
+```
+
+The Vegur font isn't in Raphaël, nor is any font for that matter. And besides,
+most fonts use TrueType(TTF) or OpenType(OTF) format. To get from those formats
+into something that is usable by Raphaël, we need to convert them using a tool
+called [Cufon](https://github.com/sorccu/cufon/wiki/about). Cufon allows you export the different font styles
+of a given font (regular, bold, italic, bold italic, etc) for use with Raphaël.
+It is outside the scope of this tutorial to cover Cufon in detail. Check
+the aforemention link for more details. A great source of unemcumbered fonts for
+your applications is the [Google Font Directory](http://www.google.com/webfonts).
+
+## Events
+
+SVG elements can directly subscribe to all the traditional mouse-based events:
+__click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, and hover__.
+Raphaël provides the ability to add your own methods to either the canvas or
+individual elements, so in theory there is nothing preventing you from adding
+gestures for mobile browsers.
+
+The snippet below binds a function to rotate a given letter in "ROCKS" 45
+degrees when it is clicked.
+
+```js
+for (var i = 5; i < letters.length; i++) {
+letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
+
+letters[i].click(function(evt) {
+this.rotate(45);
+});
+}
+```
+
+## SVG vs Canvas
+
+Given that they are both methods to draw objects on the screen, it's often
+not immediately clear why you should use one over the other. The two mediums
+have vastly different approaches. Canvas is an immediate mode API is much like
+drawing with crayons. You can clear or destroy part
+of the drawing but you can't by default revert or alter a previous stroke. Canvas
+is also a raster bitmap so it is is very much subject to pixelation when images
+are scaled. SVG on the other hand, as previously mentioned can serve multiple
+resolutions with the same level of detail and can be scripted.
+
+Whether to use SVG or Canvas for game programming is fairly simple. Besides
+the normal constraints of whether you plan to deploy to desktop or mobile, it
+really comes down to sprite count. SVG lends itself to what I'd call low-fidelty
+games. I describe those as games that have limited concurrent movement of objects
+and sprite removal and creation. Many board games like Chess, Checkers, or Battleship, as
+well as card games like BlackJack, Poker, and Hearts fall into this category.
+Another unifying thread is that in many of these games, a player will need
+to move an arbitrary object and SVG's scriptability makes object picking
+easy.
+
+## Authoring Tools for SVG
+
+Using SVG doesn't mean at all that you have to create paths by hand. There
+are several tools, both open source and commercial, that allow you to export to
+SVG. The two tools I have used extensively and highly recommend are
+[Inkscape](http://inkscape.org) and [svg-edit](http://code.google.com/p/svg-edit).
+
+### svg-edit
+
+svg-edit is a browser-based SVG editor written in JavaScript.
+It provides a limited user interface reminiscent of GIMP or MS Paint. Unless the
+level of detail was relatively low, I've mostly used svg-edit to tweak SVG
+drawings rather than create them. svg-edit allows you to create objects graphically
+or with SVG code.
+
+### Inkscape
+
+Inkscape is a cross-platform full-fledged vector graphics editor similar to CorelDraw,
+Adobe Illustrator, and Xara. Inkscape benefits from a vibrant plugin community and a
+mature codebase. The predecessor to Inkscape, from which Inkscape forked, was
+developed in 1999. Inkscape is my go-to application for vector-based and bitmap
+assets.
+
+## A Minor Aside
+
+SVG is not supported on Windows in Internet Explorer versions before IE9.
+IE uses a vector graphics format called VML, Vector Markup Language, which
+provides much of the same functionality as SVG. Raphaël
+can create scenes that use SVG or VML where it is supported. Using Raphaël
+is an easy way to provide cross-platform support.
+
+## References
+
+- Rapahël.js: [http://raphaeljs.com](http://raphaeljs.com)
+- Raphaël Documentation: [http://raphaeljs.com/reference.html](http://raphaeljs.com/reference.html)
diff --git a/src/site/content/en/blog/read-files/index.md b/src/site/content/en/blog/read-files/index.md
index f06feb58d93..3f73294d646 100644
--- a/src/site/content/en/blog/read-files/index.md
+++ b/src/site/content/en/blog/read-files/index.md
@@ -4,21 +4,36 @@ subhead: How to select files, read file metadata and content, and monitor read p
 description: |
   How to select files, read file metadata and content, and monitor read progress.
 date: 2010-06-18
-updated: 2020-05-08
+updated: 2022-06-16
 authors:
  - kaycebasques
  - petelepage
+ - thomassteiner
 tags:
   - blog
   - storage
 ---
 
-Being able to select and interact with files on the user's local device is
+Selecting and interacting with files on the user's local device is
 one of the most commonly used features of the web. It allows users to select
 files and upload them to a server, for example, uploading photos, or
 submitting tax documents, etc. But, it also allows sites to read and
 manipulate them without ever having to transfer the data across the network.
 
+## The modern File System Access API
+
+The File System Access API provides an easy way to both read from
+and write to files and directories on the user's local system. It's currently
+available in most Chromium-based browsers such as Chrome or Edge. To learn
+more about it, see the [File System Access API][file-system-access] article.
+
+Since the File System Access API is not compatible with all browsers yet,
+check out [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access),
+a helper library that uses the new API wherever it is available, but falls
+back to legacy approaches when it is not.
+
+## Working with files, the classic way
+
 This guide shows you how to:
 
 * Select files
@@ -31,12 +46,12 @@ This guide shows you how to:
 
 ### HTML input element {: #select-input }
 
-The easiest way to allow users to select files is using the
+The easiest way for users to select files is using the
 [`<input type="file">`][mdn-file-input] element, which is supported in every
 major browser. When clicked, it lets a user select a file, or multiple files
 if the [`multiple`][mdn-file-input-attributes] attribute is included, using
 their operating system's built-in file selection UI. When the user finishes
-selecting a file or files, the element's `change` event is fired. You can
+selecting a file or files, the element's `change` event fires. You can
 access the list of files from `event.target.files`, which is a
 [`FileList`][mdn-filelist] object. Each item in the `FileList` is a
 [`File`][mdn-file] object.
@@ -53,6 +68,13 @@ access the list of files from `event.target.files`, which is a
 </script>
 ```
 
+{% Aside %}
+  Check if the [`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read)
+  method is a viable alternative for your use case,
+  since it also gives you a file handle so you can possibly write back to the file, in addition to reading.
+  This method can be [polyfilled](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files).
+{% endAside %}
+
 This example lets a user select multiple files using their operating system's
 built-in file selection UI and then logs each selected file to the console.
 
@@ -61,12 +83,12 @@ built-in file selection UI and then logs each selected file to the console.
   height: 480
 } %}
 
-#### Limit the types of files user can select {: #accept }
+#### Limit the types of files users can select {: #accept }
 
 In some cases, you may want to limit the types of files users can select.
 For example, an image editing app should only accept images, not text files.
-To do that, you can add an [`accept`][mdn-file-input-attributes] attribute to
-the input element to specify which files are accepted.
+To do that, add an [`accept`][mdn-file-input-attributes] attribute to
+the input element to specify which file types are accepted.
 
 ```html
 <input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
@@ -80,24 +102,29 @@ small, and can be hard to use. Instead, once you've provided the core
 functionality using an `<input type="file">` element, you can provide a
 large, custom drag-and-drop surface.
 
+{% Aside %}
+  Check if the [`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration)
+  method is a viable alternative for your use case,
+  since it also gives you a file handle so you can possibly write back to the file, in addition to reading.
+{% endAside %}
+
 #### Choose your drop zone {: #choose-drop-zone }
 
-Your drop surface will depend on the design of your application. You may
+Your drop surface depends on the design of your application. You may
 only want part of the window to be a drop surface, or potentially the entire
 window.
 
-<figure class="w-figure">
-  <img src="squoosh.png" class="w-screenshot w-screenshot--filled"
-       alt="A screenshot of Squoosh, an image compression web app.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="A screenshot of Squoosh, an image compression web app.", width="800", height="589" %}
+  <figcaption>
     Squoosh makes the entire window a drop zone.
   </figcaption>
 </figure>
 
-Squoosh allows the user to drag-and-drop an image anywhere into the window,
+Squoosh allows the user to drag and drop an image anywhere into the window,
 and clicking **select an image** invokes the `<input type="file">` element.
 Whatever you choose as your drop zone, make sure it's clear to the user that
-they can drag-and-drop files onto that surface.
+they can drag and drop files onto that surface.
 
 #### Define the drop zone {: #define-drop-zone }
 
@@ -105,7 +132,7 @@ To enable an element to be a drag-and-drop zone, you'll need to listen for
 two events, [`dragover`][mdn-dragover] and [`drop`][mdn-drop]. The `dragover`
 event updates the browser UI to visually indicate that the drag-and-drop
 action is creating a copy of the file. The `drop` event is fired after the
-user has dropped the files onto the surface. Similar to the input element,
+user drops the files onto the surface. Similar to the input element,
 you can access the list of files from `event.dataTransfer.files`, which is
 a [`FileList`][mdn-filelist] object. Each item in the `FileList` is a
 [`File`][mdn-file] object.
@@ -130,7 +157,7 @@ dropArea.addEventListener('drop', (event) => {
 
 [`event.stopPropagation()`][mdn-stoppropagation] and
 [`event.preventDefault()`][mdn-preventdefault] stop the browser's default
-behavior from happening, and allow your code to run instead. Without them,
+behavior and allow your code to run instead. Without them,
 the browser would otherwise navigate away from your page and open the files
 the user dropped into the browser window.
 
@@ -140,32 +167,28 @@ Check out [Custom drag-and-drop][glitch-drag-and-drop] for a live demonstration.
 
 ### What about directories? {: #directories }
 
-Unfortunately, today there isn't a good way to get access to a directory.
+Unfortunately, today there isn't a good way to access a directory.
+
+The [`webkitdirectory`][mdn-webkitdirectory] attribute on the `<input
+type="file">` element allows the user to choose a directory or directories. It's
+[supported in most major browsers][caniuse-webkitdirectory] except for Firefox
+for Android.
 
-The [`webkitdirectory`][mdn-webkitdirectory] attribute on the
-`<input type="file">` element allows the user to choose a directory or
-directories. It is supported in some Chromium-based browsers, and possibly
-desktop Safari, but has [conflicting][caniuse-webkitdirectory] reports of
-browser compatibility.
+{% Aside %}
+  Check if the [`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents)
+  method is a viable alternative for your use case,
+  since it also gives you a directory handle so you can possibly write back to the directory, in addition to reading.
+  This method can be [polyfilled](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories).
+{% endAside %}
 
 If drag-and-drop is enabled, a user may try to drag a directory into the
 drop zone. When the drop event is fired, it will include a `File` object for
-the directory, but will be unable to access any of the files within the
+the directory, but does not provide access any of the files within the
 directory.
 
-In the future, the Native File System API provides an easy way to both read
-and write to files and directories on the user's local system. It's currently
-under development and only available as an origin trial in Chrome. To learn
-more about it, see the [Native File System API][native-file-system] article.
-
-Since the Native File System API is not compatible with all browsers yet,
-check out [browser-nativefs](https://github.com/GoogleChromeLabs/browser-nativefs),
-a helper library that uses the new API wherever it is available, but falls
-back to legacy approaches when it is not.
-
 ## Read file metadata {: #read-metadata }
 
-The [`File`][mdn-file] object contains a number of metadata properties about
+The [`File`][mdn-file] object contains metadata about
 the file. Most browsers provide the file name, the size of the file, and the
 MIME type, though depending on the platform, different browsers may provide
 different, or additional information.
@@ -184,8 +207,7 @@ function getMetadataForFileList(fileList) {
 }
 ```
 
-You can see this in action in the [`input-type-file`][glitch-input-demo]
-Glitch demo.
+You can see this in action in the [`input-type-file`][glitch-input-demo] demo.
 
 ## Read a file's content {: #read-content }
 
@@ -197,7 +219,7 @@ to read a file as an [array buffer][mdn-filereader-as-buffer], a
 ```js
 function readImage(file) {
   // Check if the file is an image.
-  if (file.type && file.type.indexOf('image') === -1) {
+  if (file.type && !file.type.startsWith('image/')) {
     console.log('File is not an image.', file.type, file);
     return;
   }
@@ -212,7 +234,7 @@ function readImage(file) {
 
 The example above reads a `File` provided by the user, then converts it to a
 data URL, and uses that data URL to display the image in an `img` element.
-Check out the [`read-image-file`][glitch-read-image] Glitch to see how to
+Check out the [`read-image-file`][glitch-read-image] demo to see how to
 verify that the user has selected an image file.
 
 {% Glitch {
@@ -225,8 +247,8 @@ verify that the user has selected an image file.
 When reading large files, it may be helpful to provide some UX to indicate
 how far the read has progressed. For that, use the
 [`progress`][mdn-filereader-progress] event provided by `FileReader`. The
-`progress` event provides two properties, `loaded`, the amount read, and
-`total`, the total amount to read.
+`progress` event provides two properties, `loaded` (the amount read) and
+`total` (the amount to read).
 
 ```js/7-12
 function readFile(file) {
@@ -248,21 +270,21 @@ function readFile(file) {
 
 Hero image by Vincent Botta from [Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)
 
-[mdn-file-input]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
-[mdn-file-input-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Additional_attributes
-[mdn-filelist]: https://developer.mozilla.org/en-US/docs/Web/API/FileList
-[mdn-file]: https://developer.mozilla.org/en-US/docs/Web/API/File
-[mdn-dragover]: https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event
-[mdn-drop]: https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event
-[native-file-system]: /native-file-system/
-[mdn-filereader]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+[mdn-file-input]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file
+[mdn-file-input-attributes]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes
+[mdn-filelist]: https://developer.mozilla.org/docs/Web/API/FileList
+[mdn-file]: https://developer.mozilla.org/docs/Web/API/File
+[mdn-dragover]: https://developer.mozilla.org/docs/Web/API/Document/dragover_event
+[mdn-drop]: https://developer.mozilla.org/docs/Web/API/Document/drop_event
+[file-system-access]: /file-system-access/
+[mdn-filereader]: https://developer.mozilla.org/docs/Web/API/FileReader
 [mdn-filereader-as-buffer]: https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer
 [mdn-filereader-as-dataurl]: https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL
 [mdn-filereader-as-text]: https://developer.mozilla.org/docs/Web/API/FileReader/readAsText
-[mdn-filereader-progress]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/progress_event
-[mdn-stoppropagation]: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
-[mdn-preventdefault]: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
-[mdn-webkitdirectory]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
+[mdn-filereader-progress]: https://developer.mozilla.org/docs/Web/API/FileReader/progress_event
+[mdn-stoppropagation]: https://developer.mozilla.org/docs/Web/API/Event/stopPropagation
+[mdn-preventdefault]: https://developer.mozilla.org/docs/Web/API/Event/preventDefault
+[mdn-webkitdirectory]: https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory
 [glitch-read-image]: https://read-image-file.glitch.me/
 [glitch-input-demo]: https://input-type-file.glitch.me/
 [glitch-drag-and-drop]: https://custom-drag-and-drop.glitch.me/
diff --git a/src/site/content/en/blog/read-files/squoosh.png b/src/site/content/en/blog/read-files/squoosh.png
deleted file mode 100644
index 7ba07d90cd2..00000000000
Binary files a/src/site/content/en/blog/read-files/squoosh.png and /dev/null differ
diff --git a/src/site/content/en/blog/ready-player-web/hero-wide.jpg b/src/site/content/en/blog/ready-player-web/hero-wide.jpg
deleted file mode 100644
index 1eb36ae74a4..00000000000
Binary files a/src/site/content/en/blog/ready-player-web/hero-wide.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/ready-player-web/hero.jpg b/src/site/content/en/blog/ready-player-web/hero.jpg
deleted file mode 100644
index 2274f720676..00000000000
Binary files a/src/site/content/en/blog/ready-player-web/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/ready-player-web/index.md b/src/site/content/en/blog/ready-player-web/index.md
index 2b81b93b60c..4ba5d940486 100644
--- a/src/site/content/en/blog/ready-player-web/index.md
+++ b/src/site/content/en/blog/ready-player-web/index.md
@@ -4,7 +4,7 @@ subhead: Building games for the modern web.
 authors:
   - tomgreenaway
 date: 2019-08-21
-hero: hero.jpg
+hero: image/admin/d14lKdJ4iYwr1wI8AgA3.jpg
 hero_position: center
 hero_fit: contain
 alt: Game design, business and tools for modern web games.
@@ -15,7 +15,7 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - games
-  - game-design
+  # - game-design
   - monetization
   - tools
 ---
@@ -45,13 +45,13 @@ By "functional game" I refer to the three most core elements of what makes a gam
 - Visuals
 - Audio
 
-In each of these areas, the web platform has made significant strides in the past few years. For CPU performance we have access to a [performant new standard called Web Assembly](https://www.youtube.com/watch?v=njt-Qzw0mVY). From the graphics side, [WebGL 1.0](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) has [good cross-browser support](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#WebGL_1) and future standards such as [WebGPU](https://www.youtube.com/watch?v=K2JzIUIHIhc) are positioning the web platform for an extensible future of graphics programming similar to Vulkan and Metal. Finally, for web audio we have the [common Web Audio API and more recently the Audio Worklet API](https://www.youtube.com/watch?v=-GaD0RCp-Q0).
+In each of these areas, the web platform has made significant strides in the past few years. For CPU performance we have access to a [performant new standard called WebAssembly](https://www.youtube.com/watch?v=njt-Qzw0mVY). From the graphics side, [WebGL 1.0](https://developer.mozilla.org/docs/Web/API/WebGL_API) has [good cross-browser support](https://developer.mozilla.org/docs/Web/API/WebGL_API#WebGL_1) and future standards such as [WebGPU](https://www.youtube.com/watch?v=K2JzIUIHIhc) are positioning the web platform for an extensible future of graphics programming similar to Vulkan and Metal. Finally, for web audio we have the [common Web Audio API and more recently the Audio Worklet API](https://www.youtube.com/watch?v=-GaD0RCp-Q0).
 
 Recently, Unity previewed a new runtime called Project Tiny which is focused on building 2D games for HTML5-based platforms. Project Tiny applies a new modular design to the engine structure of Unity enabling the core Unity engine to be under 1 megabyte in size.
 
-<figure class="w-figure">
-  <img src="./unity-tanks.gif" alt="Two tanks engaged in a battle.">
-  <figcaption class="w-figcaption">Unity's Tanks Demo exported via HTML5.</figcaption>
+<figure>
+  {% Img src="image/admin/NAydOzjTBzlBnom2SubM.gif", alt="Two tanks engaged in a battle.", width="800", height="449" %}
+  <figcaption>Unity's Tanks Demo exported via HTML5.</figcaption>
 </figure>
 
 From the technical side, there has never been a better time to embrace web game development.
@@ -66,13 +66,13 @@ Good game developers know that to capitalise on a particular platform–whether
 
 In other words, you must respect the expectations of the users of the platform you're building for. What do users of the web expect? They expect web content to load fast and be interactive quickly. In my talk, I covered several examples of ways–both on and off the web–that games have been designed to load quickly, pull users into their game worlds, engage those users, and provide users with additional incentives to share their experiences.
 
-![Three games with minimalist art styles.](./minimalist-games.png)
+{% Img src="image/admin/ppUw6LsWIqub2vRiMuaG.png", alt="Three games with minimalist art styles.", width="800", height="368" %}
 
 I personally believe that the key to building a successful web game is to lean into this unique characteristic of the web. Specifically, the strength of the web's URL structure and the sharing loop that users can join in.
 
 Here's an example of a web game I built using [Construct 3](http://construct.net) that leverages the URL in a fun and engaging way.
 
-![A level editor interface for a game.](./space-board.png)
+{% Img src="image/admin/L0wolsGPYf4pQjlI4i1g.png", alt="A level editor interface for a game.", width="800", height="608" %}
 
 [Space Board](https://io-space-board.firebaseapp.com) is a very simple game that can be played on either mobile with touch controls or on desktop with keyboard input. The objective is to navigate a maze of obstacles to reach a goal at the end.
 
@@ -97,20 +97,20 @@ At present, there are ultimately two schools of thought with regards to how a ga
 - Monetizing the games directly
 - Treating them as an acquisition channel
 
-Treating web games as an acquisition channel means leveraging the web version of your native game as a mechanism to get your players hooked and convincing them to download your larger native binary. You then generate revenue with the native platform's built-in payment and billing backends.
+Treating web games as an acquisition channel means leveraging the web version of your iOS/Android/desktop game as a mechanism to get your players hooked and convincing them to download your larger iOS/Android/desktop binary. You then generate revenue with the iOS/Android/desktop platform's built-in payment and billing backends.
 
-Monetization is usually a mixture of advertising and microtransactions. There is still work to be done for the web to compete with native mobile platforms in game advertising. For example, formats like Rewarded Video Ads have been extremely popular for native mobile games for several years and yet we're only now seeing ad networks deploy these formats on the web.
+Monetization is usually a mixture of advertising and microtransactions. There is still work to be done for the web to compete with mobile platforms in game advertising. For example, formats like Rewarded Video Ads have been extremely popular for mobile games for several years and yet we're only now seeing ad networks deploy these formats on the web.
 
 Nonetheless, there are game developers who continue to be successful on the open web through advertising via traditional banner ads and interstitial video ads. Take a look at [Adsense for Games](https://support.google.com/adsense/answer/1705831) for more information on these formats.
 
-For microtransactions, the web offers complete flexibility due to the limitless number of payment methods that can be implemented. However this quality is a double-edged sword. The negative side of this is that players have less implicit trust towards a new website they discover versus the familiarity of the native mobile store payment methods.
+For microtransactions, the web offers complete flexibility due to the limitless number of payment methods that can be implemented. However this quality is a double-edged sword. The negative side of this is that players have less implicit trust towards a new website they discover versus the familiarity of the platform-specific mobile store payment methods.
 
 One solution that brings a more consistent payment UI to the web is the [Payment Request API](https://developers.google.com/web/fundamentals/payments/). This API invokes a UI that is shown by the browser and streamlines the acquisition of payment details such as credit cards and billing addresses. However, acquiring payment details is just the first step of making a transaction. You need a backend billing platform as well.
 
 ## The future
 
-We've seen several surprisingly successful web games over the past few years. Slither.io has built a mixed web and native business that demonstrates the tremendous reach and viral growth opportunity that the web offers. Portals such as [Poki.com](https://poki.com/) are innovating in their user experience and releasing new games every day including titles that match the fidelity of their mobile counterparts, such as Subway Surfers or Crossy Road.
+We've seen several surprisingly successful web games over the past few years. Slither.io has built a mixed web and platform-specific business that demonstrates the tremendous reach and viral growth opportunity that the web offers. Portals such as [Poki.com](https://poki.com/) are innovating in their user experience and releasing new games every day including titles that match the fidelity of their mobile counterparts, such as Subway Surfers or Crossy Road.
 
-Furthermore, if you look outside of the open web you can see that web games are already taking off. Closed ecosystems such as WeChat and LINE offer satisfying games which aren't playable on the open web but which are built on top of web technologies like HTML5 and WebViews. This is a clear sign that the web has reached a level of fidelity that's capable of rivaling native mobile games–perhaps not in a textbook definition of fidelity but in a more important metric: player attention.
+Furthermore, if you look outside of the open web you can see that web games are already taking off. Closed ecosystems such as WeChat and LINE offer satisfying games which aren't playable on the open web but which are built on top of web technologies like HTML5 and WebViews. This is a clear sign that the web has reached a level of fidelity that's capable of rivaling platform-specific mobile games–perhaps not in a textbook definition of fidelity but in a more important metric: player attention.
 
 
diff --git a/src/site/content/en/blog/ready-player-web/minimalist-games.png b/src/site/content/en/blog/ready-player-web/minimalist-games.png
deleted file mode 100644
index 2c699e19945..00000000000
Binary files a/src/site/content/en/blog/ready-player-web/minimalist-games.png and /dev/null differ
diff --git a/src/site/content/en/blog/ready-player-web/space-board.png b/src/site/content/en/blog/ready-player-web/space-board.png
deleted file mode 100644
index 39c215a3773..00000000000
Binary files a/src/site/content/en/blog/ready-player-web/space-board.png and /dev/null differ
diff --git a/src/site/content/en/blog/ready-player-web/unity-tanks.gif b/src/site/content/en/blog/ready-player-web/unity-tanks.gif
deleted file mode 100644
index bbea5268731..00000000000
Binary files a/src/site/content/en/blog/ready-player-web/unity-tanks.gif and /dev/null differ
diff --git a/src/site/content/en/blog/rebelmouse/index.md b/src/site/content/en/blog/rebelmouse/index.md
new file mode 100644
index 00000000000..93480a4ea63
--- /dev/null
+++ b/src/site/content/en/blog/rebelmouse/index.md
@@ -0,0 +1,229 @@
+---
+layout: post
+title: How RebelMouse grew loyalty and engagement by optimizing Core Web Vitals
+subhead: |
+  A case study measuring the full impact and benefits of high performance scores on Core Web Vitals.
+description: |
+  A case study measuring the full impact and benefits of high performance scores on Core Web Vitals.
+authors:
+  - andreabreanna
+date: 2022-04-15
+updated: 2022-04-20
+alt: The RebelMouse mascot set against a blue backdrop. The mascot is a grey mouse with a red kerchief on its head, and is standing in front of a pride flag.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Y0KflFCo0GclHd9JK8iE.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PVMV1zKjJs4MsJRFIzJs.png
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+[RebelMouse is a cloud-based CMS](https://www.rebelmouse.com?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=home%20page) with the data-driven tools and creative strategy publishers need to provide the best experience possible for audiences, both new and old. We power high-traffic web properties for media companies like Upworthy, Narcity, Raw Story, Brit + Co, and The Independent, as well as high-value sites like Penske Trucks, Vault12, Gaingels, and many others.
+
+Our platform reaches over 100 million people monthly in the U.S. alone. The company was founded on the belief that the open web needs to perform at the highest levels of consumer expectations to thrive, and the standards set by Google's Core Web Vitals align with this user-first vision.
+
+For more than a decade, our global team has been engineering a CMS that creates positive and intuitive user experiences that translate into meaningful business. Core Web Vitals are a benchmark that ensure this symbiotic loop continues across every new site we power.
+
+## Why prioritizing performance means better business
+
+Many publishers doubt whether excellent scores on Core Web Vitals are worth the effort. They also worry that even a quality user experience won't deliver the boost in readership they need. Fortunately, our prioritization of performance at RebelMouse has given us the data to prove that Core Web Vitals are an excellent way to generate new traffic and build the user loyalty needed to have a successful business.
+
+In order to illustrate this, we analyzed the audience behavior of a number of sites we power, both before and after we optimized for high performance scores on Core Web Vitals. In particular, we defined types of users to separate the audiences into the following key categories:
+
+- **New Visitors:** Users who visited a site for the first time.
+- **Returning Visitors:** Users who had at least two sessions.
+- **Loyal Visitors:** Users who had at least three sessions or more.
+- **Fans:** Users who had at least four sessions or more.
+- **Superfans:** Users who had at least five sessions or more.
+
+**References:**
+- [https://www.hotjar.com/google-analytics/glossary/users](https://www.hotjar.com/google-analytics/glossary/users)
+- [https://databox.com/new-vs-returning-visitors](https://databox.com/new-vs-returning-visitors)
+
+The data from the field, gathered by Google Analytics, was overwhelmingly clear. When focusing on loyal visitors, fans, and superfans categories, we found that users are far more likely to stay longer, consume more content, and return more often on sites that receive excellent marks on their Core Web Vitals. Here's a look at some prominent examples:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th aria-hidden></th>
+        <th colspan="2">
+          <strong>Loyal Visitors</strong><br>
+          (3 or More Sessions/User)
+        </th>
+        <th colspan="2">
+          <strong>Fans</strong><br>
+          (4 or More Sessions/User)
+        </th>
+        <th colspan="2">
+          <strong>Superfans</strong><br>
+          (5 or More Sessions/User)
+        </th>
+      </tr>
+      <tr>
+        <th><strong>Website</strong></th>
+        <th><strong>Pages/User</strong></th>
+        <th><strong>Time/User</strong></th>
+        <th><strong>Pages/User</strong></th>
+        <th><strong>Time/User</strong></th>
+        <th><strong>Pages/User</strong></th>
+        <th><strong>Time/User</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Brit + Co</td>
+        <td>+1.9%</td>
+        <td>+2.6%</td>
+        <td>+6.6%</td>
+        <td>+7.2%</td>
+        <td>+6.3%</td>
+        <td>+7.8%</td>
+      </tr>
+      <tr>
+        <td>Hamu és Gyémánt</td>
+        <td>+10.6%</td>
+        <td>+48.2%</td>
+        <td>+13.1%</td>
+        <td>+47.2%</td>
+        <td>+6.9%</td>
+        <td>+35.3%</td>
+      </tr>
+      <tr>
+        <td>Knocksense</td>
+        <td>+37.5%</td>
+        <td>+52.8%</td>
+        <td>+46.9%</td>
+        <td>+64.4%</td>
+        <td>+47.0%</td>
+        <td>+64.6%</td>
+      </tr>
+      <tr>
+        <td>Upworthy</td>
+        <td>+117.6%</td>
+        <td>+50.0%</td>
+        <td>+117.1%</td>
+        <td>+50.8%</td>
+        <td>+114.2%</td>
+        <td>+49.2%</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+But content consumption and time spent per user weren't the only metrics to spike. The number of users visiting and pages accessed also increased among the same categories:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th aria-hidden></th>
+        <th colspan="2">
+          <strong>Loyal Visitors</strong><br>
+          (3 or More Sessions/User)
+        </th>
+        <th colspan="2">
+          <strong>Fans</strong><br>
+          (4 or More Sessions/User)
+        </th>
+        <th colspan="2">
+          <strong>Superfans</strong><br>
+          (5 or More Sessions/User)
+        </th>
+      </tr>
+      <tr>
+        <th><strong>Website</strong></th>
+        <th><strong>Users</strong></th>
+        <th><strong>Pageviews</strong></th>
+        <th><strong>Users</strong></th>
+        <th><strong>Pageviews</strong></th>
+        <th><strong>Users</strong></th>
+        <th><strong>Pageviews</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>AméricaEconomía</td>
+        <td>+16.0%</td>
+        <td>+10.4%</td>
+        <td>+11.8%</td>
+        <td>+6.8%</td>
+        <td>+6.9%</td>
+        <td>+4.6%</td>
+      </tr>
+      <tr>
+        <td>EHN</td>
+        <td>+24.2%</td>
+        <td>+13.8%</td>
+        <td>+24.9%</td>
+        <td>+13.4%</td>
+        <td>+24.0%</td>
+        <td>+9.0%</td>
+      </tr>
+      <tr>
+        <td>PAPER Magazine</td>
+        <td>+24.7%</td>
+        <td>+20.0%</td>
+        <td>+39.7%</td>
+        <td>+32.1%</td>
+        <td>+55.7%</td>
+        <td>+35.7%</td>
+      </tr>
+      <tr>
+        <td>Second Nexus</td>
+        <td>+16.8%</td>
+        <td>+14.2%</td>
+        <td>+15.0%</td>
+        <td>+13.4%</td>
+        <td>+15.7%</td>
+        <td>+13.3%</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## From normal to high-performing: How RebelMouse transforms websites
+
+The good news is that performing well on Core Web Vitals is possible with thoughtful, strategic changes made to your site's codebase. Here are a few ways RebelMouse powers high-performing websites:
+
+### Progressive web app
+
+RebelMouse optimizes all third-party calls in a progressive web app that delivers the most important content first, and then sequences the rest of the calls as the reader needs to see them.
+
+We have [a method that loads JavaScript](https://www.rebelmouse.com/new-javascript-element-in-layout-design-tool?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=javascript%20element) immediately after the Largest Contentful Paint (LCP) event has completed. We give our users the option to load JavaScript through three different priority levels:
+
+- **Optimized** is best for users who want the latest cutting-edge approaches. We use it in our own development work. This priority level will pause JavaScript from firing until well after the page has fully loaded, which gives you the highest performance.
+- **Load Blocking** is used for executing JavaScript right away, and will generally have a negative impact on your performance scores. This priority level will fire the JavaScript immediately after the page has completed loading. This has the potential to drop your performance scores by 10–40 points depending on the extra call.
+- **Post LCP** is the best option to blend great performance scores with a very fast load. This priority level will cause JavaScript to load immediately after the Largest Contentful Paint event has completed. (This is recommended for ads only, where you have increased revenue in delivering ads to users who are only on the page for five seconds or so.)
+
+### Optimize social embeds
+
+To protect Cumulative Layout Shift (CLS) and LCP scores, all social embeds need to be set to lazy load.
+
+For CLS preservation, you have to dynamically find the size of the embed with server-side technology, and insert it into your own storage of the properties of that embed. Then, the embed needs to be delivered to your front end to prevent the layout from shifting upon load. For those with interest in deeper dives on this topic, we have posts specifically on [Twitter](https://www.rebelmouse.com/optimized-twitter-embeds?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=optimized%20twitter%20embeds) and [TikTok](https://www.rebelmouse.com/how-to-embed-a-tiktok?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=tiktok%20embed) examples with more details.
+
+### Ultra-light, smart HTML and CSS
+
+Site HTML and CSS has to be constructed in a way that allows for the delivery of above-the-fold images and text to preload before the rest of the page.
+
+- Bad HTML constructs will force the browser to process many unnecessary site elements that are below the fold in order to render what is above the fold in the first viewport.
+- We have more in-depth articles on how we achieve this on RebelMouse here:
+  - A breakdown on [how to improve Core Web Vitals](https://www.rebelmouse.com/pagespeed-score?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=pagespeed%20score).
+  - [A full guide](https://www.rebelmouse.com/how-to-improve-core-web-vitals?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=how%20to%20improve%20core%20web%20vitals) on implementing fast page speeds while also including third-party scripts.
+  - An in-depth guide on [optimizing for LCP](https://www.rebelmouse.com/core-web-vitals-2021?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=core%20web%20vitals%202021).
+
+## Publish with a performance-first mindset
+
+Since the rollout of Core Web Vitals, developers have felt the impact of how their publishing platforms stack up against [Google's recommended thresholds](/defining-core-web-vitals-thresholds/).
+
+[HTTP Archive](https://httparchive.org), an open-source project that identifies trends and records historical patterns across millions of URLs, has revealed how top content management systems perform against Google's page experience standards in its [Core Web Vitals Technology Report](https://datastudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC). RebelMouse has [consistently outperformed](https://datastudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC?params=%7B%22df44%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580ALL%25EE%2580%2580WordPress%25EE%2580%2580Drupal%25EE%2580%2580Wix%25EE%2580%2580Squarespace%25EE%2580%2580Adobe%2520Experience%2520Manager%25EE%2580%2580Contentful%25EE%2580%2580Sitecore%25EE%2580%2580Arc%2520Publishing%25EE%2580%2580Chorus%25EE%2580%2580RebelMouse%22,%22df46%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580mobile%22%7D) major CMS platforms on Google's most critical metrics since its rollout and into 2022:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/3eY8EMxr0uDCD25NvJj9.png", alt="A comparison of origins having good Core Web Vitals across platforms. The platforms are RebelMouse, WordPress, Drupal, Wix, Squarespace, Adobe Experience Manager, Contentful, Sitecore, Arc Publishing, and Chorus. The time period is from January 1, 2021 to January 31, 2022 for mobile devices. The trend shows that RebelMouse outperforms all other CMS platforms on Core Web Vitals, and this trend increases over time.", width="800", height="452" %}
+</figure>
+
+## Performance without compromise
+
+Creating quality content is now only half the battle for publishers and brands alike. Quality content must be supported by modern technology that can keep up with the speed and standards of today's web. We're able to deliver Core Web Vitals that make the grade because site performance isn't just a goal, it's a company pillar that's woven into our culture. We use our intense focus on performance to help our clients make the most of the open web by growing traffic and building revenue without sacrificing user experience.
+
+If you'd like to learn more about how we can help your site exceed the industry standard on Core Web Vitals, [click here to learn more about RebelMouse today](https://www.rebelmouse.com/st/Request_a_Demo?utm_medium=post&utm_source=google&utm_campaign=cwv%20co-marketing&utm_content=request%20a%20demo).
diff --git a/src/site/content/en/blog/redbus-inp/index.md b/src/site/content/en/blog/redbus-inp/index.md
new file mode 100644
index 00000000000..7d3566c193f
--- /dev/null
+++ b/src/site/content/en/blog/redbus-inp/index.md
@@ -0,0 +1,139 @@
+---
+layout: post
+title: How redBus improved their website's Interaction to Next Paint (INP) and increased sales by 7%
+subhead: |
+  INP optimizations helped redBus increase sales by about 7%
+description: |
+  INP optimizations helped redBus increase sales by about 7%
+authors:
+  - amitkumar
+  - saurabhrajpal
+date: 2023-05-10
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/3164So5aDk7vKTkhx9Vm.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/TR9V6jk32xwz5ACzj0RE.png
+alt: A composition of the redBus logo, at left, with the INP thresholds offset at right.
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+The web and its capabilities are evolving at a fast pace. You can now build rich and full-featured experiences on the web that can achieve much of what native applications can in terms of capabilities.
+
+JavaScript is a primary driver for interactivity across the web, but if it's not used with care, interactions can feel sluggish, and lead users to perceive your website to be non-responsive or altogether broken. Thankfully, the [Interaction to Next Paint (INP)](/inp/) metric was created to address this specific user experience problem.
+
+INP measures all interactions made with a page during its lifecycle, and reports a single value that is representative of a website's speed in responding to user inputs. Simply put, if a page's INP is at or below the [good threshold](/inp/#what-is-a-good-inp-score), all interactions made with a page can be said to be reliably fast.
+
+[redBus](https://www.redbus.in/), a bus booking and ticketing website based in India, undertook a substantial effort to improve their website's INP, even during the time when it was still considered an experimental metric. As a result of their efforts, they were able to increase sales by 7%, illustrating once again the relationship between web performance and business health. Here's what redBus did to improve their website's INP.
+
+## Top goals
+
+When redBus set out to optimize their website's INP, they had three goals in mind:
+
+1. Provide a better user experience for users by focusing on interaction latency regardless of network speed and device capabilities.
+2. Optimize their website to keep interactions as fast as possible.
+3. Ensure that responses from their API were as light as possible to ensure fast data transfer to the front end.
+
+## The journey
+
+redBus categorized interaction latency in two ways:
+
+1. Interaction latency caused by blocking JavaScript on the client. When interactions use excessive JavaScript that blocks the main thread, rendering is delayed, and this affects a page's INP.
+2. Network latency caused by API calls. While network activity is not something that INP measures, an interaction reliant on a call to a remote API can feel sluggish on slower networks, or if requests result in large responses.
+
+redBus was initially quite confident that the INP for their website would be good, but the [Real User Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) data for this metric at the 95th percentile told a different story.
+
+## How redBus measured INP
+
+redBus relied on the [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) built by Google to track not just INP, but all important user experience metrics for all pages across their website. In addition to the `web-vitals` JavaScript library, redBus used [ELK](https://www.elastic.co/what-is/elk-stack) to analyze INP data that was collected on the front end.
+
+However, how you track your website's INP in [the field](/lab-and-field-data-differences/#field-data) may be quite different from how redBus approached the problem. We highly recommend that you read about [how to find slow interactions in the field](/find-slow-interactions-in-the-field/) to learn how to best to track INP for your websites, and subsequently [how to reproduce them in the lab](/diagnose-slow-interactions-in-the-lab/) before you begin [optimizing interactions](/optimize-inp/).
+
+Once redBus had a system in place for tracking INP, they were able to analyze the data in order to gain a better understanding of where slow interactivity was present.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png", alt="A screenshot of the ELK logging system reporting INP values for analysis.", width="800", height="287" %}
+  <figcaption>
+    A screenshot of the logging system used by redBus to analyze INP values collected from the field. (<a href="https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png" rel="noopener" target="_blank">Click for a higher resolution version of this image</a>.)
+  </figcaption>
+</figure>
+
+## Use cases
+
+When users search for fares on the redBus website, they can change the date on the search page to filter selected fares for the desired destination. The interaction to change the date on this page was slow, and was a cause of poor INP.
+
+Additionally, when a user scrolls through fares, additional fares are lazy-loaded from the API. [Though scrolling itself isn't factored in how INP is measured](/inp/#whats-in-an-interaction), the `scroll` event listener itself schedules a lot of work that must run on the main thread. This work was causing contention on the main thread that increased interaction latency, leading to poor INP on the search page.
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xcxqqKz4JaUO9yQlS3Ex.webm" type="video/webm">
+  </video>
+  <figcaption>
+    The lazy-loading behavior used to load additional fares from the API on scroll. (<a href="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xcxqqKz4JaUO9yQlS3Ex.webm" rel="noopener" target="_blank">Click for a higher resolution version of this video</a>.)
+  </figcaption>
+</figure>
+
+## How redBus optimized INP for the search page
+
+To improve the search page's INP, redBus made several optimizations:
+
+- The [`scroll`](https://developer.mozilla.org/docs/Web/API/Element/scroll_event) event handler was [debounced](/debounce-your-input-handlers/) in order to reduce the amount of times the event callback would fire in a given period. By lowering the frequency in which `scroll` event callback ran, the main thread was able to respond more quickly to user interactions on the search page.
+- The resulting rendering work was prioritized by using a [`requestAnimationFrame`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) callback. `requestAnimationFrame` tells the browser that the work in the callback must be done before the next frame.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg", alt="A screenshot of the performance panel in Chrome DevTools showing the redBus website firing scroll event callbacks which are not debounced. The result is that the main thread becomes blocked.", width="800", height="500" %}
+  <figcaption>
+    Before: scroll handlers firing without debouncing applied to the event callback. A considerable number of blocking tasks on the main thread are present, which will delay interactions.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg", alt="A screenshot of the performance panel in Chrome DevTools showing the redBus website firing scroll event callbacks which are debounced. The result is that the main thread is less blocked because the scroll event handlers fire far less frequently.", width="800", height="500" %}
+  <figcaption>
+    After: scroll handlers firing with debouncing applied. The scroll event callbacks fire less frequently, giving the main thread more opportunities to respond to user interactions.
+  </figcaption>
+</figure>
+
+Additionally, the following further optimizations were made to the search results page:
+
+- New batches of results were fetched on the second to last card on the search results page in order to improve the user experience and visual performance by triggering lazy loading earlier.
+- Fewer results were fetched on each network call during lazy loading. By reducing fetches from 30 to 10 results, a reduction in INP ranges at 870 to 900 down to 350 to 370 were observed.
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZjeONw0InjN2H5FEU0PM.webm" type="video/webm">
+  </video>
+  <figcaption>
+    The lazy-loading behavior used to load additional fares from the API on scroll. (<a href="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZjeONw0InjN2H5FEU0PM.webm" rel="noopener" target="_blank">Click for a higher resolution version of this video</a>.)
+  </figcaption>
+</figure>
+
+While these changes significantly improved the INP of the search page, there was still the problem where the [`change`](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event) event on the search page's input fields would call an expensive reducer function to update the user interface. This resulted in unnecessary rerendering of the user interface, which affected the page's INP.
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/9A46NHqYLxgWLkFsKGmF.webm" type="video/webm">
+  </video>
+  <figcaption>
+    INP values reported in the console while the user types in an input field. The resulting INP value of 344 observed in a lab setting falls within the "need improvement" thresholds. (<a href="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/9A46NHqYLxgWLkFsKGmF.webm" rel="noopener" target="_blank">Click for a higher resolution version of this video</a>.)
+  </figcaption>
+</figure>
+
+To optimize this interaction, redBus managed the state of input components locally and synced it with the [Redux](https://react-redux.js.org/) store only when an input's [`blur`](https://developer.mozilla.org/docs/Web/API/Element/blur_event) event was fired. This change reduced the number of rerenders and eliminated unwanted rerendering of the user interface by calling the reducer less frequently.
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gD8RNByfNP8IsjytGbXZ.webm" type="video/webm">
+  </video>
+  <figcaption>
+    Improved INP as a result of calling the reducer less frequently on an input field change. (<a href="https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gD8RNByfNP8IsjytGbXZ.webm" rel="noopener" target="_blank">Click for a higher resolution version of this video</a>.)
+  </figcaption>
+</figure>
+
+With this change, the page's INP improved by 72%, resulting in a faster and smoother user experience that users are more likely to engage with.
+
+## Business impact
+
+The relationship between business health and page performance is well-known. Though INP is a relatively new metric compared to other Core Web Vitals, redBus observed better business outcomes by focusing on improving this important user-centric performance metric. **The result was a 7% overall increase in sales.**
+
+In short, INP helped to paint a picture of runtime performance issues on the redBus website. With the knowledge that there were improvements to be made, redBus was able to observe the problem, reproduce it, and use that crucial information to make optimizations that were beneficial to redBus and its business.
diff --git a/src/site/content/en/blog/reduce-the-scope-and-complexity-of-style-calculations/index.md b/src/site/content/en/blog/reduce-the-scope-and-complexity-of-style-calculations/index.md
new file mode 100644
index 00000000000..3b4dc466e9b
--- /dev/null
+++ b/src/site/content/en/blog/reduce-the-scope-and-complexity-of-style-calculations/index.md
@@ -0,0 +1,145 @@
+---
+layout: post
+title: Reduce the scope and complexity of style calculations
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/soE8BwfZ2Svut2cfoQTp.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tir1bnxgs7uFrIDw26sN.jpg
+alt: A photo of a desktop publishing prepress color palette CMYK book with line tester.
+subhead: |
+  JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.
+authors:
+  - paullewis
+  - jlwagner
+date: 2015-03-20
+updated: 2023-05-09
+description: |
+  JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Changing the DOM, through adding and removing elements, changing attributes, classes, or through animation, will all cause the browser to recalculate element styles and, in many cases, layout (or reflow) the page, or parts of it. This process is called _computed style calculation_.
+
+The first part of computing styles is to create a set of matching selectors, which is essentially the browser figuring out which classes, pseudo-selectors, and IDs apply to any given element.
+
+The second part of the process involves taking all the style rules from the matching selectors and figuring out what final styles the element has.
+
+{% Aside %}
+Roughly half of the time used in Blink (the rendering engine used in Chromium and derived browsers) to calculate the computed style for an element is used to match selectors, and the other half of the time is used to construct the RenderStyle (computed style representation) from the matched rules.
+
+Rune Lillesveen, Opera / [Style Invalidation in Blink](https://docs.google.com/document/d/1vEW86DaeVs4uQzNFI5R-_xS9TcS1Cs_EUsHRSgCHGu8/view)
+{% endAside %}
+
+## Summary
+
+* How reducing style calculation costs can lower interaction latency.
+* Reduce the complexity of your selectors; use a class-centric methodology (BEM, for example).
+* Reduce the number of elements on which style calculation must be calculated.
+
+## Style recalculation time and interaction latency
+
+The [Interaction to Next Paint (INP)](/inp/) is a user-centric runtime performance metric that assesses a page's overall responsiveness to user input. When interaction latency is assessed by this metric, it measures the time starting from when the user interacts with the page, up until the browser paints the next frame showing the corresponding visual updates made to the user interface.
+
+A significant component of an interaction is the time it takes to paint the next frame. Rendering work done to present the next frame is made up of many parts, including calculation of page styles that occur just prior to layout, paint, and compositing work. While this article focuses solely on style calculation costs, it's important to emphasize that reducing any part of the rendering phase inherent to interaction will reduce its total latency—style calculation included.
+
+## Reduce the complexity of your selectors
+
+In the simplest case, you can reference an element in your CSS with just a class:
+
+```css
+.title {
+  /* styles */
+}
+```
+
+But, as any project grows, it will likely result in more complex CSS, such that you may end up with selectors that look like this:
+
+```css
+.box:nth-last-child(-n+1) .title {
+  /* styles */
+}
+```
+
+In order to know how these styles apply to the page, the browser has to effectively ask "is this an element with a class of `title` which has a parent who happens to be the minus nth child plus 1 element with a class of `box`?" Figuring this out _can_ take a lot of time, depending on the selector used as well as the browser in question. The intended behavior of the selector could instead be changed to a class:
+
+```css
+.final-box-title {
+  /* styles */
+}
+```
+
+You can take issue with the name of the class, but the job just got a lot simpler for the browser. In the previous version, in order to know, for example, that the element is the last of its type, the browser must first know everything about all the other elements and whether the are any elements that come after it that would be the `nth-last-child`, which is potentially more expensive than simply matching up the selector to the element because its class matches.
+
+## Reduce the number of elements being styled
+
+Another performance consideration—which is typically _the more important factor for many style updates_—is the sheer volume of work that needs to be carried out when an element changes.
+
+In general terms, the worst case cost of calculating the computed style of elements is the number of elements multiplied by the selector count, because each element needs to be at least checked once against every style to see if it matches.
+
+{% Aside %}
+It used to be the case that if you changed a class on—say—the body element, that all the children in the page would need to have their computed styles recalculated. Thankfully that is no longer the case; some browsers instead maintain a small collection of rules unique to each element that, if changed, cause the element's styles to be recalculated. That means that an element may or may not need to be recalculated depending on where it is in the tree, and what specifically got changed.
+{% endAside %}
+
+Style calculations can often be targeted to a few elements directly rather than invalidating the page as a whole. In modern browsers, this tends to be less of an issue because the browser doesn't necessarily need to check all the elements potentially affected by a change. Older browsers, on the other hand, aren't necessarily as optimized for such tasks. Where you can, you should **reduce the number of invalidated elements**.
+
+{% Aside %}
+If you're into Web Components, it's worth noting that style calculations here are a little different, since by default styles do not cross the Shadow DOM boundary, and are scoped to individual components rather than the tree as a whole. Overall, however, the same concept still applies: smaller trees with simpler rules are more efficiently processed than larger trees with more complex rules.
+{% endAside %}
+
+## Measure your style recalculation cost
+
+One way to measure the cost of style recalculations is to use the performance panel in Chrome DevTools. To begin, open DevTools, go to the tab labeled **Performance**, hit record, and interact with the page. When you stop recording, you'll see something like the image below:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mpzxBlLCKMupmkZV13pj.png", alt="DevTools showing style calculations.", width="800", height="586" %}
+</figure>
+
+The strip at the top is a miniature flame chart that also plots frames per second. The closer the activity is to the bottom of the strip, the faster frames are being painted by the browser. If you see the flame chart leveling out at the top with red strips above it, then you have work that's causing long running frames.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/VfajFwdCmOINMIaN6ApQ.png", alt="Zooming in on a trouble area in Chrome DevTools in the activity summary of the populated performance panel in Chrome DevTools.", width="769", height="126" %}
+</figure>
+
+If you have a long running frame during an interaction like scrolling, then it bears further scrutiny. If you have a large purple block, zoom in on the activity and select any work labeled **Recalculate Style** to get more information on potentially expensive style recalculation work.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qUtq3jcEjpzDN9isYF9U.png", alt="Getting the details of long-running style calculations, including vital information such as the amount of elements affected by the style recalculation work.", width="647", height="218" %}
+</figure>
+
+In this grab there is long-running style recalculation work that is taking just over 25ms.
+
+If you click the event itself, you are given a call stack. If the rendering work was due to a user interaction, the place in your JavaScript that is responsible for triggering the style change will be called out. In addition to that, you also get the number of elements that have been affected by the change—just over 900 elements in this case—and how long it took to do the style calculation work. You can use this information to start trying to find a fix in your code.
+
+## Use Block, Element, Modifier
+
+Approaches to coding like [BEM (Block, Element, Modifier)](https://bem.info/) actually bake in the selector matching performance benefits above, because it recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well:
+
+```css
+.list {
+  /* Styles */
+}
+
+.list__list-item {
+  /* Styles */
+}
+```
+
+If you need some modifier, like in the above where we want to do something special for the last child, you can add that like so:
+
+```css
+.list__list-item--last-child {
+  /* Styles */
+}
+```
+
+If you're looking for a good way to organize your CSS, BEM is a good starting point, both from a structure point-of-view, and also because of the simplifications of style lookup the methodology promotes.
+
+If you don't like BEM, there are other ways to approach your CSS, but the performance considerations should be assessed alongside the ergonomics of the approach.
+
+## Resources
+
+* [Style invalidation in Blink](https://docs.google.com/document/d/1vEW86DaeVs4uQzNFI5R-_xS9TcS1Cs_EUsHRSgCHGu8/edit)
+* [BEM (Block, Element, Modifier)](https://bem.info/)
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Markus Spiske](https://unsplash.com/@markusspiske)._
diff --git a/src/site/content/en/blog/referrer-best-practices/hero.jpg b/src/site/content/en/blog/referrer-best-practices/hero.jpg
deleted file mode 100644
index aacd64d0afd..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/referrer-best-practices/index.md b/src/site/content/en/blog/referrer-best-practices/index.md
index e6997062279..7f5df39fae6 100644
--- a/src/site/content/en/blog/referrer-best-practices/index.md
+++ b/src/site/content/en/blog/referrer-best-practices/index.md
@@ -1,18 +1,21 @@
 ---
+layout: post
 title: Referer and Referrer-Policy best practices
 subhead: Best practices to set your Referrer-Policy and use the referrer in incoming requests.
 authors:
   - maudn
 date: 2020-07-30
-updated: 2020-07-30
-hero: hero.jpg
-thumbnail: hero.jpg
+updated: 2021-10-14
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
 description: |
   Consider setting a referrer policy of `strict-origin-when-cross-origin`. It retains much of the referrer's usefulness, while mitigating the risk of leaking data cross-origins.
 tags:
   - blog
   - security
   - privacy
+feedback:
+  - api
 ---
 
 ## Summary
@@ -36,16 +39,16 @@ tags:
 ## Referer and Referrer-Policy 101
 
 HTTP requests may include the optional [`Referer`
-header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer), which indicates the
+header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer), which indicates the
 origin or web page URL the request was made from. The [`Referrer-Policy`
-header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) defines what data
+header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) defines what data
 is made available in the `Referer` header.
 
-In the example below, the `Referer` header includes the complete URL of the page on *site-one* from
+In the example below, the `Referer` header includes the complete URL of the page on `site-one` from
 which the request was made.
 
-<figure class="w-figure">
-  <img src="./referrer-basics.jpg" alt="HTTP request including a Referer header.">
+<figure>
+  {% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="HTTP request including a Referer header.", width="800", height="573" %}
 </figure>
 
 The `Referer` header might be present in different types of requests:
@@ -58,14 +61,14 @@ For navigations and iframes, this data can also be accessed via JavaScript using
 `document.referrer`.
 
 The `Referer` value can be insightful. For example, an analytics service might use the value to
-determine that 50% of the visitors on *site-two.example* came from *social-network.example*.
+determine that 50% of the visitors on `site-two.example` came from `social-network.example`.
 
 But when the full URL including the path and query string is sent in the `Referer` **across
 origins**, this can be **privacy-hindering** and pose **security risks** as well. Take a look at
 these URLs:
 
-<figure class="w-figure">
-  <img src="./referrer-urls.jpg" alt="URLs with paths, mapped to different privacy and security risks.">
+<figure>
+  {% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URLs with paths, mapped to different privacy and security risks.", width="800", height="370" %}
 </figure>
 
 URLs #1 to #5 contain private information—sometimes even identifying or sensitive. Leaking these
@@ -87,8 +90,8 @@ header (and `document.referrer`) can be:
 - Only the [origin](/same-site-same-origin/#origin)
 - The full URL: origin, path, and query string
 
-<figure class="w-figure">
-  <img src="./referrer-data.jpg" alt="Data that can be contained in the Referer header and document.referrer.">
+<figure>
+  {% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Data that can be contained in the Referer header and document.referrer.", width="800", height="255" %}
 </figure>
 
 Some policies are designed to behave differently depending on the **context**: cross-origin or
@@ -99,12 +102,12 @@ origins—while maintaining the richness of the referrer within your own site.
 Here is an overview showing how referrer policies restrict the URL data available from the Referer
 header and `document.referrer`:
 
-<figure class="w-figure">
-  <img src="./referrer-policies.jpg" alt="Different referrer policies and their behaviour, depending on the security and cross-origin context.">
+<figure>
+  {% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Different referrer policies and their behaviour, depending on the security and cross-origin context.", width="800", height="537" %}
 </figure>
 
 MDN provides a [full list of policies and behavior
-examples](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy#Directives).
+examples](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives).
 
 Things to note:
 
@@ -120,11 +123,11 @@ Things to note:
 
 ## Default referrer policies in browsers
 
-_As of July 2020_
+_As of October 2021_
 
 **If no referrer policy is set, the browser's default policy will be used.**
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <thead>
       <tr>
@@ -136,38 +139,31 @@ _As of July 2020_
       <tr>
         <td>Chrome</td>
         <td>
-          Planning to switch to <code>strict-origin-when-cross-origin</code> in <a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">version 85</a> (previously <code>no-referrer-when-downgrade</code>) 
+          The default is <code>strict-origin-when-cross-origin</code>.
         </td>
       </tr>
       <tr>
         <td>Firefox</td>
         <td>
-          <ul>
-            <li><code>no-referrer-when-downgrade</code></li>
-            <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">Considering </a><code>strict-origin-when-cross-origin</code>
-            </li>
-            <li><code>strict-origin-when-cross-origin</code> in Private Browsing and for trackers</li>
-          </ul>
+        The default is <code>strict-origin-when-cross-origin</code>.<br>
+        Starting from <a href="https://blog.mozilla.org/security/2021/10/05/firefox-93-features-an-improved-smartblock-and-new-referrer-tracking-protections/">version 93</a>, for Strict Tracking Protection and Private Browsing users: the less restrictive referrer policies <code>no-referrer-when-downgrade</code>, <code>origin-when-cross-origin</code>, and <code>unsafe-url</code> are ignored for cross-site requests, meaning that the referrer is always trimmed for cross-site requests, regardless of the website's policy.
         </td>
       </tr>
       <tr>
         <td>Edge</td>
         <td>
-          <ul>
-            <li><code>no-referrer-when-downgrade</code></li>
-            <li><a href="https://github.com/privacycg/proposals/issues/13">Experimenting</a> with <code>strict-origin-when-cross-origin</code>
-            </li>
-          </ul>
+          The default is <code>strict-origin-when-cross-origin</code>.
         </td>
       </tr>
       <tr>
         <td>Safari</td>
         <td>
-          Similar to <code>strict-origin-when-cross-origin</code>. See
+          The default is similar to <code>strict-origin-when-cross-origin</code>, with some specificities. See
           <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">Preventing Tracking Prevention Tracking</a> for details.
         </td>
       </tr>
     </tbody>
+
   </table>
 </div>
 
@@ -180,7 +176,7 @@ There are different ways to set referrer policies for your site:
 
 - As an HTTP header
 - Within your
-  [HTML](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)
+  [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)
 - From JavaScript on a [per-request
   basis](https://javascript.info/fetch-api#referrer-referrerpolicy)
 
@@ -207,23 +203,16 @@ requests from this page will follow the `strict-origin-when-cross-origin` policy
 
 ## How to see the referrer policy?
 
-When inspecting an HTTP request:
-
-- in Chrome, Edge and Firefox, you can see the `Referrer-Policy`.
-- in Chrome, Edge, Safari and Firefox, you can see the `Referer`.
+[securityheaders.com](https://securityheaders.com/) is handy to determine the policy a specific site
+or page is using.
 
-<!-- <figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled"
-       src="./referrer-devtools.jpg"
-       alt="A screenshot of the Network panel of Chrome DevTools, showing Referer and Referrer-Policy.">
-  <figcaption class="w-figcaption">
-    Chrome DevTools, Network panel with a request selected.
-  </figcaption>
-</figure> -->
+You can also use the developer tools of Chrome, Edge, or Firefox to see the referrer policy used for
+a specific request. At the time of this writing, Safari doesn't show the `Referrer-Policy` header
+but does show the `Referer` that was sent.
 
-<figure class="w-figure">
-  <img src="./referrer-devtools.jpg" alt="A screenshot of the Network panel of Chrome DevTools, showing Referer and Referrer-Policy.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="A screenshot of the Network panel of Chrome DevTools, showing Referer and Referrer-Policy.", width="800", height="416" %}
+  <figcaption>
     Chrome DevTools, <b>Network</b> panel with a request selected.
   </figcaption>
 </figure>
@@ -283,34 +272,40 @@ app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
 
 ### What if `strict-origin-when-cross-origin` (or stricter) doesn't accommodate all your use cases?
 
-In this case, don't set an unsafe policy such as `unsafe-url`. What you can do instead is take a
-**progressive approach**: set a protective policy for your website and if need be, a more permissive
-policy for specific requests or elements.
+In this case, take a **progressive approach**: set a protective policy like
+`strict-origin-when-cross-origin` for your website and if need be, a more permissive policy for
+specific requests or HTML elements.
 
-**Example:**
+### Example: element-level policy
 
 `index.html`:
 
-```html
-<meta name="referrer" content="strict-origin-when-cross-origin" />
-<img src="…" referrerpolicy="no-referrer-when-downgrade" />
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
 ```
 
+Note that Safari/WebKit may cap `document.referrer` or the `Referer` header for
+[cross-site](/same-site-same-origin/#same-site-cross-site) requests.
+See [details](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/).
+
+### Example: request-level policy
+
 `script.js`:
 
 ```javascript
 fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
 ```
 
-{% Aside 'gotchas' %} A per-element policy is not supported in all
-browsers browsers (Examples: `referrerpolicy` for [`a`
-elements](https://caniuse.com/#feat=mdn-html_elements_a_referrerpolicy),
-for [`img` elements](https://caniuse.com/#feat=mdn-html_elements_img_referrerpolicy),
-and for [`link` elements](https://caniuse.com/#feat=mdn-html_elements_link_referrerpolicy)).
-But browsers that don't support this tend to take a strict approach anyway
-(for example, all cross-origin requests will set `Referer` to the
-origin). {% endAside %}
-
 ### What else should you consider?
 
 Your policy should depend on your website and use cases—this is up to you, your team, and your
@@ -321,54 +316,171 @@ is simply not data they want or expect to silently leak cross-origin. {% endAsid
 
 ## Using the referrer from incoming requests: best practices
 
-### Cross-Site Request Forgery (CSRF) protection
+### What to do if your site's functionality uses the referrer URL of incoming requests?
+
+#### Protect users' data
+
+The `Referer` may contain private, personal, or identifying data—so make sure you treat it as such.
+
+#### Keep in mind that the `Referer` you receive may change
+
+Using the referrer from incoming cross-origin requests has a few limitations:
+
+- If you have no control over the request emitter's implementation, you can't make assumptions about
+  the `Referer` header (and `document.referrer`) you receive. The request emitter may decide anytime
+  to switch to a `no-referrer` policy, or more generally to a stricter policy than what they used
+  before—meaning you'll get less data via the `Referer` than you used to.
+- Browsers are increasingly using the Referrer-Policy `strict-origin-when-cross-origin` by default.
+  This means that you may now receive only the origin (instead of full referrer URL) in incoming
+  cross-origin requests, if the site that sends these has no policy set.
+- Browsers may change the way they manage `Referer`; for example, in the future, they may decide to
+  always trim referrers to origins in cross-origin subresource requests, in order to protect user
+  privacy.
+- The `Referer` header (and `document.referrer`) may contain more data than you need, for example a
+  full URL when you only want to know if the request is cross-origin.
+
+#### Alternatives to `Referer`
+
+You may need to consider alternatives if:
+
+- An essential functionality of your site uses the referrer URL of incoming cross-origin requests;
+- And/or if your site is not receiving anymore the part of the referrer URL it needs in a
+  cross-origin request. This happens when the request emitter changed their policy or when they have
+  no policy set and the browser default's policy changed (like in [Chrome
+  85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+To define alternatives, analyze first what part of the referrer you're using.
+
+**If you only need the origin (`https://site-one.example`):**
+
+- If you're using the referrer in a script that has top-level access to the page,
+  `window.location.origin` is an alternative.
+- If available, headers like
+  [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) and
+  [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) give
+  you the `Origin` or describe whether the request is cross-origin, which may be exactly what you need.
 
-Using the referrer from incoming requests for CSRF protection has a few pitfalls:
+**If you need other elements of the URL (path, query parameters…):**
 
-- It can be hidden with the `no-referrer` policy, or spoofed by the request emitter. If you have no
-  control over the request emitter's implementation, you can't make assumptions about any header you
-  receive.
-- The `Referer` header (and `document.referrer`) may contain **more data than you need**, for
-  example a full URL when you only want to know if the request is cross-origin.
+- Request parameters may address your use case and this saves you the work of parsing the
+  referrer.
+- If you're using the referrer in a script that has top-level access to the page,
+  `window.location.pathname` may be an alternative. Extract only the path section of the URL and
+  pass it on as an argument, so any potentially sensitive information in the URL parameters isn't
+  passed on.
+
+**If you can't use these alternatives:**
+
+- Check if your systems can be changed to expect the request emitter (`site-one.example`) to
+  explicitly set the information you need in a configuration of some sort. Pro: more explicit, more
+  privacy-preserving for `site-one.example` users, more future-proof. Con: potentially more work
+  from your side or for your system's users.
+- Check whether the site that emits the requests may agree to set a per-element or per-request
+  Referrer-Policy of `no-referrer-when-downgrade`. Con: potentially less privacy-preserving for
+  `site-one.example` users, potentially not supported in all browsers.
+
+### Cross-Site Request Forgery (CSRF) protection
+
+Note that a request emitter can always decide not to send the referrer by setting a `no-referrer`
+policy (and a malicious actor could even spoof the referrer).
 
 Use [CSRF
 tokens](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)
-as your primary protection instead. For extra protection use
-[SameSite](https://web.dev/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites)—and instead
-of `Referer`, you can use headers such as
-[`Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) (available on POST and
+as your primary protection. For extra protection, use
+[SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites)—and instead
+of `Referer`, use headers such as
+[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (available on POST and
 CORS requests) and
-[`Sec-Fetch-Site`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Site) (if
+[`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (if
 available).
 
 ### Logging
 
-The `Referer` header (and `document.referrer`) may contain private, personal, or identifying data—so
-it must be treated as such.
+Make sure to protect users' personal or sensitive data that may be in the `Referer`.
+
+If you're only using the origin, check if the
+[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) header could be an
+alternative. This may give you the information that you need for debugging purposes in a simpler way
+and without needing to parse the referrer.
+
+### Payments
+
+Payment providers may rely on the `Referer` header of incoming requests for security checks.
+
+For example:
+
+- The user clicks a **Buy** button on `online-shop.example/cart/checkout`.
+- `online-shop.example` redirects to `payment-provider.example` to manage the transaction.
+- `payment-provider.example` checks the `Referer` of this request against a list of allowed
+  `Referer` values set up by the merchants. If it doesn't match any entry in the list,
+  `payment-provider.example` rejects the request. If it does match, the user can proceed to the
+  transaction.
+
+#### Best practices for payment flow security checks
+
+**Summary: as a payment provider, you can use the `Referer` as a basic check
+against naive attacks—but you should absolutely have another, more
+reliable verification method in place.**
+
+The `Referer` header alone isn't a reliable basis for a check: the requesting site, whether they're
+a legitimate merchant or not, can set a `no-referrer` policy which will make the `Referer`
+information unavailable to the payment provider. However, as a payment provider, looking at the
+`Referer` may help you catch naive attackers who did not set a `no-referrer` policy. So you can
+decide to use the `Referer` as a first basic check. If you do so:
+
+- **Do not expect the `Referer` to always be present; and if it's present, only check against the
+  piece of data it will include at the minimum: the origin**. When setting the list of allowed
+  `Referer` values, make sure that no path is included, but only the origin. Example: the allowed
+  `Referer` values for `online-shop.example` should be `online-shop.example`, not
+  `online-shop.example/cart/checkout`. Why? Because by expecting either no `Referer` at all or a
+  `Referer` value that is the origin of the requesting website, you prevent unexpected errors since
+  you're **not making assumptions about the `Referrer-Policy`** your merchant has set or about the
+  browser's behavior if the merchant has no policy set. Both the site and the browser could strip
+  the `Referer` sent in the incoming request to only the origin or not send the `Referer` at all.
+- If the `Referer` is absent or if it's present and your basic `Referer` origin check was
+  successful: you can move onto your other, more reliable verification method (see below).
+
+**What is a more reliable verification method?**
+
+One reliable verification method is to let the requester **hash the request parameters** together
+with a unique key. As a payment provider, you can then **calculate the same hash on your side** and
+only accept the request if it matches your calculation.
+
+**What happens to the `Referer` when an HTTP merchant site with no referrer policy redirects to an
+HTTPS payment provider?**
+
+No `Referer` will be visible in the request to the HTTPS payment provider, because [most
+browsers](#default-referrer-policies-in-browsers) use `strict-origin-when-cross-origin` or
+`no-referrer-when-downgrade` by default when a website has no policy set. Also note that [Chrome's
+change to a new default
+policy](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) won't
+change this behaviour.
+
+{% Aside %}
+
+If your website uses HTTP, [migrate to HTTPS](/why-https-matters/).
 
-And instead of `Referer`, consider using other headers that might address your use case:
-[`Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) and
-[`Sec-Fetch-Site`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Site).
+{% endAside %}
 
 ## Conclusion
 
 A protective referrer policy is a great way to give your users more privacy.
 
-To learn more about different techniques to protect your users, check out
-web.dev's [Safe and secure](/secure/) collection!
+To learn more about different techniques to protect your users, check out web.dev's [Safe and
+secure](/secure/) collection!
 
 _With many thanks for contributions and feedback to all reviewers - especially Kaustubha Govind,
 David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck and Kayce Basques._
 
 ## Resources
 
-- [Understanding "same-site" and "same-origin"](https://web.dev/same-site-same-origin/)
+- [Understanding "same-site" and "same-origin"](/same-site-same-origin/)
 - [A new security header: Referrer Policy
   (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
 - [Referrer-Policy on
-  MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+  MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
 - [Referer header: privacy and security concerns on
-  MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+  MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
 - [Chrome change: Blink intent to
   implement](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
 - [Chrome change: Blink intent to
diff --git a/src/site/content/en/blog/referrer-best-practices/referrer-basics.jpg b/src/site/content/en/blog/referrer-best-practices/referrer-basics.jpg
deleted file mode 100644
index 51bad92fce1..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/referrer-basics.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/referrer-best-practices/referrer-data.jpg b/src/site/content/en/blog/referrer-best-practices/referrer-data.jpg
deleted file mode 100644
index ed408efdd47..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/referrer-data.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/referrer-best-practices/referrer-devtools.jpg b/src/site/content/en/blog/referrer-best-practices/referrer-devtools.jpg
deleted file mode 100644
index ea1465a248c..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/referrer-devtools.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/referrer-best-practices/referrer-policies.jpg b/src/site/content/en/blog/referrer-best-practices/referrer-policies.jpg
deleted file mode 100644
index 1f7a77d2f40..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/referrer-policies.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/referrer-best-practices/referrer-urls.jpg b/src/site/content/en/blog/referrer-best-practices/referrer-urls.jpg
deleted file mode 100644
index c64215ec10c..00000000000
Binary files a/src/site/content/en/blog/referrer-best-practices/referrer-urls.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/registering-a-custom-protocol-handler/index.md b/src/site/content/en/blog/registering-a-custom-protocol-handler/index.md
new file mode 100644
index 00000000000..9a916285216
--- /dev/null
+++ b/src/site/content/en/blog/registering-a-custom-protocol-handler/index.md
@@ -0,0 +1,31 @@
+---
+title: Registering a custom protocol handler 
+authors:
+  - ericbidelman
+date: 2011-06-29
+updated: 2011-06-29
+tags:
+  - blog
+
+---
+
+Chrome 13 finally includes `navigator.registerProtocolHandler`. This API allows web apps to register themselves as possible handlers for particular protocols. For example, users could select your application to handle "mailto" links.
+
+Register a protocol scheme like:
+
+```js
+navigator.registerProtocolHandler(
+    'web+mystuff', 'http://example.com/rph?q=%s', 'My App');
+```   
+
+The first parameter is the protocol. The second is the URL pattern of the application that should handle this scheme. The pattern should include a '%s' as a placeholder for data and it must must be on the same origin as the app attempting to register the protocol. Once the user approves access, you can use this link through your app, other sites, etc.:
+
+```html
+<a href="web+mystuff:some+data">Open in "My App"</a>
+```
+
+Clicking that link makes a `GET` request to `http://example.com/rph?q=web%2Bmystuff%3A:some%20data`. Thus, you have to parse `q` parameter and manually strip out data from the protocol.
+
+It's worth noting that Firefox has had `navigator.registerProtocolHandler` implemented since FF3. One difference in Chrome's implementation is around custom protocols. Those need to be prefixed with "web+", as seen in the example above.  The following protocols do not need a "web+" prefix: "mailto", "mms", "nntp", "rtsp", "webcal".
+
+More information on this API can be found on the [MDN article](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler).
diff --git a/src/site/content/en/blog/renault/index.md b/src/site/content/en/blog/renault/index.md
new file mode 100644
index 00000000000..aa1e2228084
--- /dev/null
+++ b/src/site/content/en/blog/renault/index.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
+subhead: The team analyzed data from 10 million visits on its landing pages and found a strong correlation between Largest Contentful Paint and conversion rate.
+authors:
+  - tcoustillac
+  - antoinebisch
+  - cédricbazureau
+date: 2021-10-08
+updated: 2022-07-18
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/PHqBoMdg3WgcQWWIIkWj.jpg
+alt: Renault Group logo.
+description: |
+  This post explains how Renault and its global data partner fifty-five approached measuring and optimizing the Core Web Vitals. The team analyzed data from 10 million visits on its landing pages, found a strong correlation between Largest Contentful Paint and conversions, and doubled up on its optimization effort. We will look at these data points and understand how the teams have organized for optimizations.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+  - web-vitals
+---
+
+Groupe Renault is a French multinational automobile manufacturer with a presence in over 130 countries. For an automotive group such as Renault, performant brand sites driving more user engagement and conversions mean more business. All of its brand sites aim at providing the best user experience at scale while maintaining flexibility of content and features for localized sites. In this context, performance monitoring is a key stake for the customer experience team which is in charge of developing and maintaining the global platform.
+
+## Measuring the business impact of Core Web Vitals
+
+### Measurement in Google Analytics
+
+Working with fifty-five, its global data partner, Renault set up the [web-vitals](https://github.com/GoogleChrome/web-vitals) library, which allows sending to Google Analytics all the Web Vitals metrics from real users in a way that accurately matches how they're measured by Chrome and reported to other Google tools.
+
+The following analysis showcases a dataset captured using these tools over four months between December 2020 and March 2021.
+
+### Optimized LCP strongly correlates with user engagement and business metrics
+
+The teams have identified a particularly strong correlation between a low Largest Contentful Paint (LCP) and favorable bounce rates and conversion rates, shown in the visualization below.
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/A3ghcv1u3qxQKjgnb5Ru.png", alt="A chart showing a negative correlation between LCP and bounce rate and conversion rate.", width="782", height="372" %}
+
+The dataset captures over 10 million visits in 33 countries over four months and shows how lower LCP measures correlates with:
+
+-  Lower bounce rates
+-  More conversions (lead forms completed)
+
+Interestingly, as the website runs as a Single Page Application (SPA), all these measures are captured on landing pages only. The data shows that it is worth optimizing the website until the LCP reaches below 1 second. The group's brand sites can never be too optimized!
+
+{% Blockquote 'Eja Rakotoarimanana, Consultant, fifty-five' %}
+This dataset not only shows the negative correlation between LCP and business metrics, but also highlights performance discrepancies among the best performing landing pages. In the context of this website, getting LCP under 1 second leads to large increases in conversions and reductions in bounce.
+{% endBlockquote %}
+
+1 second LCP improvement can lead to a 14 percentage points (ppt) decrease in bounce rate and 13% increase in conversions.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>1 second LCP improvement</th>
+        <th>Result</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>LCP around 1&nbsp;s</td>
+        <td>+13% CVR</td>
+      </tr>
+      <tr>
+        <td>LCP under 1.6&nbsp;s</td>
+        <td>-14 ppt bounce rate</td>
+      </tr>
+      <tr>
+        <td>LCP above 1.6&nbsp;s</td>
+        <td>-5 ppt bounce rate</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}
+The numbers above are derived from linear regressions computed over the dataset to understand the relationship between LCP and other technical and business metrics. The numbers linking LCP and bounce show that the marginal gain on bounce rates increases as LCP gets low (below 1.6 seconds).
+{% endAside %}
+
+## Renault's approach to optimizing Core Web Vitals at scale
+
+Since early 2020, in the brand's top 5 European markets, the number of visitors experiencing a **fast LCP (under 2.5&nbsp;s) has improved by an average of 22 ppt for Renault domains** (from 51% to 73%).
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/itCYyzXJL57ZM1t31L4B.jpg", alt="A chart showing how Renault's LCP measured by RUM improved over time by 22 ppt.", width="800", height="365" %}
+
+Here is how they've approached it.
+
+### A central optimization of the SPA
+
+From a platform standpoint, performance has been a priority for years and including Core Web Vitals (CWV) as key metrics was a smooth process. Central teams have set up a comprehensive monitoring solution (with [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and [Chrome UX Report API](https://developer.chrome.com/docs/crux/api/)) and established a performance culture across the organization. There were several strategies to optimize their Single Page Application, including:
+
++   [Server side rendering (SSR)](/rendering-on-the-web/) to ensure a fast First Contentful Paint (FCP).
++   [Code splitting](/codelab-code-splitting/) to deliver only the JS and CSS chunks needed for the landing page (for better LCP and FID).
++   [CDN](/content-delivery-networks/) with a high level of resource caching (including a [Lambda@Edge](https://aws.amazon.com/lambda/edge/) to sort and remove unnecessary query parameters). This helped avoid the drawbacks of SSR (slower TTFB due to server computation) and deliver content closer to the final user (for better TTFB and LCP).
++   [Optimizing compression with brotli](/codelab-text-compression-brotli/) to reduce the code size.
++   [HTTP2](/performance-http2/) to enable multiplexing of requests and responses.
++   Using responsive images with [WebP support](/serve-images-webp/) and [`srcset`](/use-srcset-to-automatically-choose-the-right-image/#help-the-browser-choose-the-right-image-size) and [`sizes`](/use-srcset-to-automatically-choose-the-right-image/#what-about-the-display-size-of-the-image) attribute to serve the most appropriate image size and format to users.
++   Lazy loading images, videos, and iframes using [`IntersectionObserver`](/lazy-loading-images/#images-inline-intersection-observer) and FPOs (small 1&nbsp;KB thumbnails).
++   Removing blocking scripts and [adjusting transpilation to browser targets](/serve-modern-code-to-modern-browsers/#use-@babelpreset-env) to reduce JS file sizes (by avoiding unnecessary polyfills).
++   [Reducing the size of the Google Tag Manager container](https://support.google.com/tagmanager/answer/2772488?hl=en) to load third-party scripts only where and when needed.
++   [Reducing the number of custom fonts](/font-best-practices/#use-fewer-web-fonts), [using woff/woff2 formats with unicode-range](/font-best-practices/#best-practices-2), and  [`font-display:swap`](https://developer.chrome.com/docs/lighthouse/performance/font-display//#how-to-avoid-showing-invisible-text) to reduce font file sizes and show text as soon as possible even if custom fonts are not yet available.
++   [Preloading hero images](/preload-responsive-images/) which are often LCP elements.
+
+The team is still working on future improvements such as:
+
++   [Server push](https://en.wikipedia.org/wiki/HTTP/2_Server_Push) to improve FCP by delivering CSS faster. (On standby due to lack of AWS support and [deprecation proposal](https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYLvmQUBY/m/vOWBKZGoAQAJ?pli=1).
++   [Progressive hydration](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#rehydration) to improve FID.
++   [ES6 Module support](/codelab-serve-modern-code/#use-lessscript-type%22module%22greater) to deliver a faster experience by using ES6 builds for modern browsers.
+
+The SPA approach can be beneficial for performance as a full page reload is not necessary when users navigate across pages. That being said, current CWV measurement methodology on SPA can be perceived as a downside as route transitions are not being measured; hence comparatively faster page loads within a session, due to UI caching, are not taken into account. It also makes it difficult to compare CWV metrics against a Multi Page Application competitor website where a warm cache would bring the measures down on each page a user would browse during a session. Read the [Web Vitals SPA FAQ](/vitals-spa-faq/) for more details.
+
+These are [known limitations](/vitals-spa-faq/) that are being investigated by the [Chrome product teams](https://github.com/GoogleChrome/web-vitals/issues/119#issuecomment-767298992). An [update to the CLS metric](/better-layout-shift-metric/) has already been shipped to improve measurement on SPAs.
+
+{% Blockquote 'Cedric Bazureau, Tech Lead, Renault' %}
+Performance requires constant monitoring as various technical teams can impact it. Despite limitations in how they are measured on SPAs, CWV metrics allow us to track the impact of the actions our teams take. Hopefully route transitions will be taken into account soon!
+{% endBlockquote %}
+
+## Local guidelines promoting performance optimization as a shared responsibility
+
+Performance is communicated as both a global (central) and local responsibility. Teams have put together a series of best practices that local content owners are meant to follow. Here are a few examples from these guidelines:
+
+-  Optimize local Google Tag Manager container to improve site performance. for example conditionally trigger certain tags.
+-  Limit size of video content by compressing it using internal tools or hosting it on a external platform (such as YouTube).
+-  Avoid uploading pictures via Google Tag Manager.
+
+{% Blockquote 'Alexandre Perruche, Head of Performance, Renault' %}
+A deep understanding of our digital performance is key to ensuring a continuous optimization of our brand sites. Our customer experience team's approach is to provide a global platform that positively impacts local teams' business outcomes while empowering these teams with guidelines and best practices to maintain this performance at a high level.
+{% endBlockquote %}
+
+To conclude, website performance has always been a priority at Renault, and its website platform is continuously optimized. Measuring Core Web Vitals alongside business metrics has allowed them to promote this topic as a globally shared responsibility, and local guidelines equip teams with the ability to participate in this beneficial effort.
diff --git a/src/site/content/en/blog/rendering-on-the-web/index.md b/src/site/content/en/blog/rendering-on-the-web/index.md
new file mode 100644
index 00000000000..fe9f72f85cd
--- /dev/null
+++ b/src/site/content/en/blog/rendering-on-the-web/index.md
@@ -0,0 +1,178 @@
+---
+title: Rendering on the Web
+subhead: Where should we implement logic and rendering in our applications? Should we use Server Side Rendering? What about Rehydration? Let's find some answers!
+authors:
+ - developit
+ - addyosmani
+date: 2019-02-06
+updated: 2023-05-17
+description: |
+  Where should we implement logic and rendering in our applications? Should we use Server Side Rendering? What about Rehydration? Let's find some answers!
+tags:
+ - blog
+---
+
+As developers, we are often faced with decisions that will affect the entire architecture of our applications. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be difficult, since there are a number of different ways to build a website.
+
+Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we would encourage developers to consider server-side rendering or static rendering over a full rehydration approach.
+
+In order to better understand the architectures we're choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.
+
+## Terminology
+
+**Rendering**
+
+- **Server-side rendering (SSR):** rendering a client-side or universal app to HTML on the server.
+- **Client-side rendering (CSR):** rendering an app in a browser via JavaScript to modify the DOM.
+- **Rehydration:** "booting up" JavaScript views on the client such that they reuse the server-rendered HTML's DOM tree and data.
+- **Prerendering:** running a client-side application at build time to capture its initial state as static HTML.
+
+**Performance**
+
+- **[Time to First Byte (TTFB)](/ttfb/):** seen as the time between clicking a link and the first bit of content coming in.
+- **[First Contentful Paint (FCP)](/fcp/):** the time when requested content (article body, etc) becomes visible.
+- **[Interaction to Next Paint (INP)](/inp/):** seen as a representative metric that assesses whether a page is responding consistently fast to user inputs.
+- **[Total Blocking Time (TBT)](/tbt/):** A [proxy metric for INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt), which calculates the amount of time the main thread was blocked during page load.
+
+## Server-side rendering
+
+_Server-side rendering generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it's handled before the browser gets a response._
+
+Server-side rendering generally produces a fast FCP. Running page logic and rendering on the server makes it possible to avoid sending lots of JavaScript to the client. This helps to reduce a page's TBT, which can also lead to a lower INP, as the main thread is not blocked as often during page load. When the main thread is blocked less often, user interactions will have more opportunities run sooner. This makes sense, since with server-side rendering, you're really just sending text and links to the user's browser. This approach can work well for a large spectrum of device and network conditions, and opens up interesting browser optimizations like streaming document parsing.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WOL6PIpIQHpqsgtKwbJv.png", alt="Diagram showing server-side rendering and JS execution affecting FCP and TTI.", width="800", height="494" %}
+</figure>
+
+With server-side rendering, users are less likely to be left waiting for CPU-bound JavaScript to run before they can use your site. Even where [third-party JS](/optimizing-content-efficiency-loading-third-party-javascript/) can't be avoided, using server-side rendering to reduce your own first-party [JavaScript costs](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) can give you more [budget](https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3) for the rest. However, there is one potential trade-off with this approach: generating pages on the server takes time, which can may result in a higher TTFB.
+
+Whether server-side rendering is enough for your application largely depends on what type of experience you are building. There is a long-standing debate over the correct applications of server-side rendering versus client-side rendering, but it's important to remember that you can opt to use server-side rendering for some pages and not others. Some sites have adopted hybrid rendering techniques with success. [Netflix](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) server-renders its relatively static landing pages, while [prefetching](https://dev.to/addyosmani/speed-up-next-page-navigations-with-prefetching-4285) the JS for interaction-heavy pages, giving these heavier client-rendered pages a better chance of loading quickly.
+
+Many modern frameworks, libraries and architectures make it possible to render the same application on both the client and the server. These techniques can be used for server-side rendering. However, it's important to note that architectures where rendering happens both on the server _and_ on the client are their own class of solution with very different performance characteristics and tradeoffs. React users can use [server DOM APIs](https://react.dev/reference/react-dom/server) or solutions built atop them like [Next.js](https://nextjs.org/) for server-side rendering. Vue users can look at Vue's [server-side rendering guide](https://vuejs.org/guide/scaling-up/ssr.html) or [Nuxt](https://nuxtjs.org). Angular has [Universal](https://angular.io/guide/universal). Most popular solutions employ some form of hydration though, so be aware of the approach in use before selecting a tool.
+
+## Static rendering
+
+[Static rendering](https://frontarm.com/articles/static-vs-server-rendering/) happens at build-time. This apporach offers a fast FCP, and also a lower TBT and INP—assuming the amount of client-side JS is limited. Unlike server-side rendering, it also manages to achieve a consistently fast TTFB, since the HTML for a page doesn't have to be dynamically generated on the server. Generally, static rendering means producing a separate HTML file for each URL ahead of time. With HTML responses generated in advance, static renders can be deployed to multiple CDNs to take advantage of edge caching.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/SRsl2UcHyJquzuJkdTHR.png", alt="Diagram showing static rendering and optional JS execution affecting FCP and TTI.", width="800", height="613" %}
+</figure>
+
+Solutions for static rendering come in all shapes and sizes. Tools like [Gatsby](https://www.gatsbyjs.org) are designed to make developers feel like their application is being rendered dynamically rather than generated as a build step. Static site generation tools such as [11ty](https://www.11ty.dev/), [Jekyll](https://jekyllrb.com), and [Metalsmith](https://metalsmith.iooperationalizing-node-js-for-server-side-rendering-c5ba718acfc9speedier-server-side-rendering-in-react-16-with-component-caching-e8aa677929b1) embrace their static nature, providing a more template-driven approach.
+
+{% Aside %}
+Abstractions of popular frameworks such as Next.js or Nuxt offer both static rendering and server-side rendering. This allows developers to opt into static rendering for pages that qualify, or use server-side rendering for pages that need to be dynamically generated in response to a request.
+{% endAside %}
+
+One of the downsides to static rendering is that individual HTML files must be generated for every possible URL. This can be challenging or even infeasible when you can't predict what those URLs will be ahead of time, or for sites with a large number of unique pages.
+
+React users may be familiar with Gatsby, [Next.js static export](https://nextjs.org/learn/excel/static-html-export/) or [Navi](https://frontarm.com/navi/)—all of these make it convenient to author pages using components. However, it's important to understand the difference between static rendering and prerendering: static rendered pages are interactive without the need to execute much client-side JavaScript, whereas prerendering improves the FCP of a Single Page Application that must be booted on the client in order for pages to be truly interactive.
+
+If you're unsure whether a given solution is static rendering or prerendering, try disabling JavaScript and load the page you want to test. For statically rendered pages, most of the functionality will still exist without JavaScript enabled. For prerendered pages, there may still be some basic functionality like links, but most of the page will be inert.
+
+Another useful test is to use [network throttling in Chrome DevTools](https://developer.chrome.com/docs/devtools/device-mode/#network), and observe how much JavaScript has been downloaded before a page becomes interactive. Prerendering generally requires more JavaScript to become interactive, and that JavaScript tends to be more complex than the [progressive enhancement](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement) approach used by static rendering.
+
+## Server-side rendering versus static rendering
+
+Server-side rendering is not a silver bullet—its dynamic nature can come with significant compute overhead costs. Many server-side rendering solutions don't flush early, can delay TTFB, or double the data being sent (for example, inlined state used by JavaScript on the client). In React, `renderToString()` can be slow as it's synchronous and single-threaded. [Newer React server DOM APIs](https://react.dev/reference/react-dom/server) supporting streaming, which can get the initial part of an HTML response to the browser sooner while the rest of it is still being generated on the server.
+
+Getting server-side rendering "right" can involve finding or building a solution for [component caching](https://medium.com/@reactcomponentcaching/), managing memory consumption, applying [memoization](https://speakerdeck.com/maxnajim/hastening-react-ssr-with-component-memoization-and-templatization) techniques, and other concerns. You're generally processing/rebuilding the same application multiple times—once on the client and once on the server. Just because server-side rendering can make something show up sooner doesn't suddenly mean you have less work to do—if you have a lot of work on the client after a server-generated HTML response arrives on the client, this can still lead to higher TBT and INP for your website.
+
+Server-side rendering produces HTML on-demand for each URL, but can be slower than just serving static rendered content. If you can put in the additional leg-work, server-side rendering plus [HTML caching](https://freecontent.manning.com/caching-in-react/) can significantly reduce server render time. The upside to server-side rendering is the ability to pull more "live" data and respond to a more complete set of requests than is possible with static rendering. Pages requiring personalization are a concrete example of the type of request that would not work well with static rendering.
+
+Server-side rendering can also present interesting decisions when building a [PWA](/progressive-web-apps/): is it better to use full-page [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/) caching, or just server-render individual pieces of content?
+
+## Client-side rendering
+
+Client-side rendering means rendering pages directly in the browser with JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server. The effective outcome is that more passed to the user's device from the server, and that comes with its own set of trade-offs.
+
+Client-side rendering can be difficult to get and keep fast for mobile devices. If minimal work is done, client-side rendering can approach the performance of pure server-side rendering, keeping a [tight JavaScript budget](https://mobile.twitter.com/HenrikJoreteg/status/1039744716210950144) and delivering value in as few [round-trips](https://en.wikipedia.org/wiki/Round-trip_delay_time) as possible. Critical scripts and data can be delivered sooner using `<link rel=preload>`, which gets the parser working for you sooner. Patterns like [PRPL](/apply-instant-loading-with-prpl/) are also worth evaluating in order to ensure initial and subsequent navigations feel instant.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JFxoxQe847ntctVOdn5u.png", alt="Diagram showing client-side rendering affecting FCP and TTI.", width="800", height="322" %}
+</figure>
+
+The primary downside to client-side rendering is that the amount of JavaScript required tends to grow as an application grows, which can have negative effects on a page's INP. This becomes especially difficult with the addition of new JavaScript libraries, polyfills and third-party code, which compete for processing power and must often be processed before a page's content can be rendered.
+
+Experiences that use client-side rendering that rely on large JavaScript bundles should consider [aggressive code-splitting](/reduce-javascript-payloads-with-code-splitting/) to lower TBT and INP during page load, and be sure to lazy-load JavaScript—"serve only what you need, when you need it". For experiences with little or no interactivity, server-side rendering can represent a more scalable solution to these issues.
+
+For folks building single page applications, identifying core parts of the user interface shared by most pages means you can apply the [application shell caching](https://developer.chrome.com/blog/app-shell/) technique. Combined with service workers, this can dramatically improve perceived performance on repeat visits, as the application shell HTML and its dependencies can be loaded from `CacheStorage` very quickly.
+
+## Combining server-side rendering and client-side rendering via rehydration
+
+This approach attempts to smooth over the trade-offs between client-side rendering and server-side rendering by doing both. Navigation requests like full page loads or reloads are handled by a server that renders the application to HTML, then the JavaScript and data used for rendering is embedded into the resulting document. When done carefully, this achieves a fast FCP just like server-side rendering, then "picks up" by rendering again on the client using a technique called [(re)hydration](https://react.dev/reference/react-dom/client/hydrateRoot). This is an effective solution, but it can come with considerable performance drawbacks.
+
+The primary downside of server-side rendering with rehydration is that it can have a significant negative impact on TBT and INP, even if it improves FCP. Server-side rendered pages can deceptively appear to be loaded and interactive, but can't actually respond to input until the client-side scripts for components are executed and event handlers have been attached. This can take seconds or even minutes on mobile.
+
+Perhaps you've experienced this yourself—for a period of time after it looks like a page has loaded, clicking or tapping does nothing. This quickly becoming frustrating, as the user is left to wonder why nothing is happening when they try to interact with the page.
+
+### A rehydration problem: one app for the price of two
+
+Rehydration issues can often be worse than delayed interactivity due to JavaScript. In order for the client-side JavaScript to be able to accurately "pick up" where the server left off without having to re-request all of the data the server used to render its HTML, current server-side rendering solutions generally serialize the response from a UI's data dependencies into the document as script tags. The resulting HTML document contains a high level of duplication:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CwHQGXjA4qRyVa4pGdXT.png", alt="HTML document
+containing serialized UI, inlined data and a bundle.js script", width="800", height="447" %}
+</figure>
+
+As you can see, the server is returning a description of the application's UI in response to a navigation request, but it's also returning the source data used to compose that UI, and a complete copy of the UI's implementation which then boots up on the client. Only after `bundle.js` has finished loading and executing does this UI become interactive.
+
+Performance metrics collected from real websites using server-side rendering and rehydration indicate its use should be discouraged. Ultimately, the reason comes down to the user experience: it's extremely easy to end up leaving users in an "uncanny valley", where interactivity feels absent even though the page _appears_ to be ready.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aXn4IcnNfFb2SvaYJPWU.png", alt="Diagram showing client rendering negatively affecting TTI.", width="800", height="270" %}
+</figure>
+
+There's hope for server-side rendering with rehydration, though. In the short term, only using server-side rendering for highly cacheable content can reduce TTFB, producing similar results to prerendering. Rehydrating [incrementally](https://www.emberjs.com/blog/2017/10/10/glimmer-progress-report.html), progressively, or partially may be the key to making this technique more viable in the future.
+
+## Streaming server-side rendering and progressive rehydration
+
+Server-side rendering has had a number of developments over the last few years.
+
+[Streaming server-side rendering](https://mxstbr.com/thoughts/streaming-ssr) allows you to send HTML in chunks that the browser can progressively render as it's received. This can result in a fast FCP, as markup arrives to users faster. In React, streams being asynchronous in [`renderToPipeableStream()`]—compared to synchronous `renderToString()`—means backpressure is handled well.
+
+Progressive rehydration is also worth considering, and something that React has [landed](https://github.com/facebook/react/pull/14717). With this approach, individual pieces of a server-rendered application are "booted up" over time, rather than the current common approach of initializing the entire application at once. This can help reduce the amount of JavaScript required to make pages interactive, since client-side upgrading of low priority parts of the page can be deferred to prevent blocking the main thread, allowing user interactions to occur sooner after the user initiates them.
+
+Progressive rehydration can also help avoid one of the most common server-side rendering rehydration pitfalls, where a server-rendered DOM tree gets destroyed and then immediately rebuilt—most often because the initial synchronous client-side render required data that wasn't quite ready, perhaps awaiting resolution of a `Promise`.
+
+### Partial rehydration
+
+Partial rehydration has proven difficult to implement. This approach is an extension of the idea of progressive rehydration, where the individual pieces (components/views/trees) to be progressively rehydrated are analyzed and those with little interactivity or no reactivity are identified. For each of these mostly-static parts, the corresponding JavaScript code is then transformed into inert references and decorative functionality, reducing their client-side footprint to nearly zero.
+
+The partial hydration approach comes with its own issues and compromises. It poses some interesting challenges for caching, and client-side navigation means we can't assume server-rendered HTML for inert parts of the application will be available without a full page load.
+
+### Trisomorphic rendering
+
+If [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) are an option for you, "trisomorphic" rendering may also be of interest. It's a technique where you can use streaming server-side rendering for initial/non-JS navigations, and then have your service worker take on rendering of HTML for navigations after it has been installed. This can keep cached components and templates up to date and enables SPA-style navigations for rendering new views in the same session. This approach works best when you can share the same templating and routing code between the server, client page, and service worker.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EnHAdI7a6mhv7iU81iRe.png", alt="Diagram of Trisomorphic rendering, showing a browser and service worker communicating with the server.", width="800", height="504" %}
+</figure>
+
+## SEO considerations
+
+Teams often factor in the impact of SEO when choosing a strategy for rendering on the web. Server-side rendering is often chosen for delivering a "complete looking" experience crawlers can interpret with ease. Crawlers [may understand JavaScript](/discoverable/how-search-works), but there are often [limitations](https://developers.google.com/search/docs/guides/rendering) worth being aware of in how they render. Client-side rendering can work, but often not without additional testing and leg-work. More recently, [dynamic rendering](https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering) has also become an option worth considering if your architecture depends heavily on client-side JavaScript.
+
+When in doubt, the [mobile friendly test tool](https://search.google.com/test/mobile-friendly) is invaluable for testing that your chosen approach does what you're hoping for. It shows a visual preview of how any page appears to Google's crawler, the serialized HTML content found (after JavaScript executed), and any errors encountered during rendering.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2OH46CfDEvODtabXpKZp.png", alt="Screenshot of the Mobile Friendly Test UI.", width="800", height="817" %}
+</figure>
+
+## Wrapping up
+
+When deciding on an approach to rendering, measure and understand what your bottlenecks are. Consider whether static rendering or server-side rendering can get you most of the way there. It's perfectly okay to mostly ship HTML with minimal JavaScript to get an experience interactive. Here's a handy infographic showing the server-client spectrum:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FZ7p6ZImdJbM82E0ZwMF.png", alt="Infographic showing the spectrum of options described in this article.", width="800", height="530" %}
+</figure>
+
+## Credits
+
+Thanks to everyone for their reviews and inspiration:
+
+Jeffrey Posnick,
+Houssein Djirdeh,
+Shubhie Panicker,
+Chris Harrelson, and
+Sebastian Markbåge
diff --git a/src/site/content/en/blog/rendering-performance/index.md b/src/site/content/en/blog/rendering-performance/index.md
new file mode 100644
index 00000000000..fe474bc4c3c
--- /dev/null
+++ b/src/site/content/en/blog/rendering-performance/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Rendering Performance
+subhead: |
+  Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
+authors:
+  - paullewis
+date: 2015-03-20
+updated: 2018-08-17
+description: |
+  Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Users of today’s web
+[expect that the pages they visit will be interactive and smooth](https://paul.kinlan.me/what-news-readers-want/)
+and that’s where you need to increasingly focus your time and effort. Pages
+should not only load quickly, but also run well; scrolling should be
+stick-to-finger fast, and animations and interactions should be silky smooth.
+
+To write performant sites and apps you need to understand how HTML, JavaScript and CSS is handled by the browser, and ensure that the code you write (and the other 3rd party code you include) runs as efficiently as possible.
+
+## 60fps and Device Refresh Rates
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hjgQvYAu7IMrwEkmLyT9.jpg", alt="User interacting with a website.", width="612", height="486" %}
+</figure>
+
+Most devices today refresh their screens **60 times a second**. If there’s
+an animation or transition running, or the user is scrolling the pages, the
+browser needs to match the device’s refresh rate and put up 1 new picture, or
+frame, for each of those screen refreshes.
+
+
+Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms).
+In reality, however, the browser has maintenance work to do, so all of your
+work needs to be completed inside **10ms**. When you fail to meet this
+budget the frame rate drops, and the content judders on screen. This is often
+referred to as **jank**, and it negatively impacts the user's experience.
+
+## The pixel pipeline
+
+There are five major areas that you need to know about and be mindful of when
+you work. They are areas you have the most control over, and key points in the
+pixels-to-screen pipeline:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gfQC4uOnIbLVtkdvbSY4.jpg", alt="The full pixel pipeline.", width="800", height="122" %}
+</figure>
+
+* **JavaScript**. Typically JavaScript is used to handle work that will result in visual changes, whether it’s jQuery’s `animate` function, sorting a data set, or adding DOM elements to the page. It doesn’t have to be JavaScript that triggers a visual change, though: CSS Animations, Transitions, and the Web Animations API are also commonly used.
+* **Style calculations**. This is the process of figuring out which CSS rules apply to which elements based on matching selectors, for example, `.headline` or `.nav > .nav__item`. From there, once rules are known, they are applied and the final styles for each element are calculated.
+* **Layout**. Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where it is on screen. The web’s layout model means that one element can affect others, for example the width of the `<body>` element typically affects its children’s widths and so on all the way up and down the tree, so the process can be quite involved for the browser.
+* **Paint**. Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers.
+* **Compositing**. Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.
+
+Each of these parts of the pipeline represents an opportunity to introduce jank, so it's important to understand exactly what parts of the pipeline your code triggers.
+
+Sometimes you may hear the term "rasterize" used in conjunction with paint.
+This is because painting is actually two tasks: 1) creating a list of draw
+calls, and 2) filling in the pixels.
+
+The latter is called "rasterization" and so whenever you see paint records in
+DevTools, you should think of it as including rasterization. (In some
+architectures creating the list of draw calls and rasterizing are done in
+different threads, but that isn't something under developer control.)
+
+You won’t always necessarily touch every part of the pipeline on every frame.
+In fact, there are three ways the pipeline _normally_ plays out for a given
+frame when you make a visual change, either with JavaScript, CSS, or Web
+Animations:
+
+### 1. JS / CSS > Style > Layout > Paint > Composite
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gfQC4uOnIbLVtkdvbSY4.jpg", alt="The full pixel pipeline.", width="800", height="122" %}
+</figure>
+
+If you change a “layout” property, so that’s one that changes an element’s
+geometry, like its width, height, or its position with left or top, the browser
+will have to check all the other elements and “reflow” the page. Any affected
+areas will need to be repainted, and the final painted elements will need to be
+composited back together.
+
+### 2. JS / CSS > Style > Paint > Composite
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aD7UKMbegndQijj36PHi.jpg", alt="The  pixel pipeline without layout.", width="800", height="122" %}
+</figure>
+
+If you changed a “paint only” property, like a background image, text color, or
+shadows, in other words one that does not affect the layout of the page, then the browser
+skips layout, but it will still do paint.
+
+### 3. JS / CSS > Style > Composite
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bfBPdciP9OSYPFI67xiY.jpg", alt="The pixel pipeline without layout or paint.", width="800", height="122" %}
+</figure>
+
+If you change a property that requires neither layout nor paint, and the
+browser jumps to just do compositing.
+
+This final version is the cheapest and most desirable for high pressure points
+in an app's lifecycle, like animations or scrolling.
+
+Note: If you want the fast track to high performance animations, read the section on [changing compositor-only properties](/stick-to-compositor-only-properties-and-manage-layer-count/).
+
+Performance is the art of avoiding work, and making any work you do as
+efficient as possible. In many cases it's about working with the browser, not
+against it. It’s worth bearing in mind that the work listed above in the
+pipeline differ in terms of computational cost; some tasks are more expensive
+than others!
+
+Let’s take a dive into the different parts of the pipeline. We’ll take a look
+at the common issues, as well how to diagnose and fix them.
+
+## Browser Rendering Optimizations
+<a href="https://www.udacity.com/course/browser-rendering-optimization--ud860">
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BRtqtw4gW9q2VBcQC0aW.jpg", alt="Udacity course screenshot", width="360", height="220" %}
+</figure>
+</a>
+
+Performance matters to users. Web developers need to build apps that react
+quickly and render smoothly. Google performance guru Paul Lewis is here
+to help you destroy jank and create web apps that maintain 60 frames per
+second performance. You'll leave this course with the tools you need to
+profile apps and identify the causes of jank. You'll explore the browser's
+rendering pipeline and uncover patterns that make it easy to build
+performant apps.
+
+This is a free course offered through [Udacity](https://www.udacity.com)
+
+
+[Take Course](https://www.udacity.com/course/browser-rendering-optimization--ud860)
+
diff --git a/src/site/content/en/blog/reporting-observer/consolewarnings.png b/src/site/content/en/blog/reporting-observer/consolewarnings.png
deleted file mode 100644
index 1779bfb9687..00000000000
Binary files a/src/site/content/en/blog/reporting-observer/consolewarnings.png and /dev/null differ
diff --git a/src/site/content/en/blog/reporting-observer/hero.jpg b/src/site/content/en/blog/reporting-observer/hero.jpg
deleted file mode 100644
index 99a003ca8bc..00000000000
Binary files a/src/site/content/en/blog/reporting-observer/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/reporting-observer/index.md b/src/site/content/en/blog/reporting-observer/index.md
deleted file mode 100644
index dd7817d81c2..00000000000
--- a/src/site/content/en/blog/reporting-observer/index.md
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: Know your code health with the `ReportingObserver` API
-subhead: Find deprecated APIs in your production apps.
-authors:
-  - ericbidelman
-date: 2019-08-21
-updated: 2020-05-27
-hero: hero.jpg
-alt: Apollo Mission Control Center.
-description: |
-  `ReportingObserver` lets you know when your site uses a deprecated API or runs
-  into a browser intervention. The basic functionality originally landed in Chrome
-  69. As of Chrome 84, it can be used in workers. It's pretty simple.
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - javascript
----
-
-`ReportingObserver` lets you know when your site uses a deprecated API or runs
-into a [browser intervention][interventions]. The basic functionality originally
-landed in Chrome 69. As of Chrome 84, it can be used in workers.
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  for (const report of reports) {
-    console.log(report.type, report.url, report.body);
-  }
-}, {buffered: true});
-
-observer.observe();
-```
-
-Use the callback to send reports to a backend or analytics provider for
-analysis.
-
-Why is that useful? Until this API, deprecation and intervention warnings were
-only available in DevTools as Console messages. Interventions, in particular,
-are only triggered by various real-world constraints like device and network
-conditions. Thus, you may never even see these messages when developing/testing
-a site locally. `ReportingObserver` provides a solution to this problem. When
-users experience potential issues in the wild, web developers can be notified
-about them.
-
-`ReportingObserver` has only shipped in Chrome 69. It is being considered by
-other browsers.
-
-## Background
-
-A while back, I wrote a blog post ([Observing your web
-app](https://ericbidelman.tumblr.com/post/149032341876/observing-your-web-app))
-because I found it fascinating how many APIs there are for monitoring the
-"stuff" that happens in a web app. For example, there are APIs that can observe
-information about the DOM:
-[`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver),
-[`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver),
-[`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
-[`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
-captures performance measurements. And methods like
-[`window.onerror`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror)
-and
-[`window.onunhandledrejection`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection)
-even let us know when something goes wrong.
-
-However, there are other types of warnings which are not captured by the
-existing APIs. When your site uses a deprecated API or runs up against a
-[browser intervention][interventions], DevTools is the first to tell you about
-them:
-
-<figure class="w-figure">
-  <img src="./consolewarnings.png"
-       class="w-screenshot" alt="DevTools Console warnings for deprecations and interventions."
-       title="DevTools Console warnings for deprecations and interventions.">
-  <figcaption>Browser-initiated warnings in the DevTools Console.</figcaption>
-</figure>
-
-One would naturally think `window.onerror` captures these warnings. It does not.
-That's because `window.onerror` does not fire for warnings generated directly by
-the user agent itself. It fires for runtime errors (JavaScript exceptions and
-syntax errors) caused by code execution.
-
-`ReportingObserver` picks up the slack. It provides a programmatic way to be
-notified about browser-issued warnings such as [deprecations][deprecations] and
-[interventions][interventions]. You can use it as a reporting tool and lose less
-sleep wondering if users are hitting unexpected issues on your live site.
-
-{% Aside 'key-term' %}
-`ReportingObserver` is part of a larger spec, the [Reporting
-API](/web/updates/2018/09/reportingapi), which provides a common way to send
-these different reports to a back end. The Reporting API is a generic framework
-to specify a set of server endpoints to report issues to.
-{% endAside %}
-
-## The API
-
-`ReportingObserver` is not unlike the other `Observer` APIs such as
-`IntersectionObserver` and `ResizeObserver`. You give it a callback; it gives
-you information. The information that the callback receives is a list of issues
-that the page caused:
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  for (const report of reports) {
-    // → report.type === 'deprecation'
-    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
-    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
-    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
-    // → report.body.lineNumber === 11
-    // → report.body.columnNumber === 22
-    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
-    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
-  }
-});
-
-observer.observe();
-```
-
-### Filtered reports
-
-Reports can be pre-filtered to only observe certain report types. Right now,
-there are two report types: `'deprecation'` and `'intervention'`.
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  …
-}, {types: ['deprecation']});
-```
-
-### Buffered reports
-
-Use the `buffered: true` option when you want to see the reports that were
-generated before the observer instance was created:
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  …
-}, {types: ['intervention'], buffered: true});
-```
-
-This option is great for situations like lazy-loading a library that uses a
-`ReportingObserver`. The observer gets added late, but you don't miss out on
-anything that happened earlier in the page load.
-
-### Stop observing
-
-Stop observing using the `disconnect()` method:
-
-```js
-observer.disconnect();
-```
-
-## Examples
-
-### Report browser interventions to an analytics provider
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  for (const report of reports) {
-    sendReportToAnalytics(JSON.stringify(report.body));
-  }
-}, {types: ['intervention'], buffered: true});
-
-observer.observe();
-```
-
-### Be notified when APIs are going to be removed
-
-```js
-const observer = new ReportingObserver((reports, observer) => {
-  for (const report of reports) {
-    if (report.type === 'deprecation') {
-      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
-                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
-    }
-  }
-});
-
-observer.observe();
-```
-
-## Conclusion
-
-`ReportingObserver` gives you an additional way for discovering and monitoring
-potential issues in your web app. It's even a useful tool for understanding the
-health of your code base (or lack thereof). Send reports to a backend, know
-about the real-world issues, update code, profit!
-
-## Future work {: #future }
-
-In the future, my hope is that `ReportingObserver` becomes the de-facto API for
-catching all types of issues in JavaScript. Imagine one API to catch everything
-that goes wrong in your app:
-
-- [Browser interventions][interventions]
-- Deprecations
-- [Feature Policy][featurepolicy] violations. See [Chromium Issue #867471](https://crbug.com/867471).
-- JS exceptions and errors (currently serviced by `window.onerror`).
-- Unhandled JS promise rejections (currently serviced by `window.onunhandledrejection`)
-
-**Additional resources**:
-
-- [W3c spec][reportingobserver]
-- [chromestatus.com entry][chromestatus]
-
-[Hero image](https://unsplash.com/photos/6SyrBaRjLJ4) by 
-[Sieuwert Otterloo](https://unsplash.com/@sieuwert)
-on [Unsplash](https://unsplash.com).
-
-[spec]: https://w3c.github.io/reporting
-[reportingobserver]: https://w3c.github.io/reporting/#observers
-[explainer]: https://github.com/W3C/reporting/blob/master/EXPLAINER.md
-[chromestatus]: https://www.chromestatus.com/feature/4691191559880704
-[featurepolicy]: /web/updates/2018/06/feature-policy
-[interventions]: https://www.chromestatus.com/features#intervention
-[deprecations]: https://www.chromestatus.com/features#intervention
diff --git a/src/site/content/en/blog/requestautocomplete/index.md b/src/site/content/en/blog/requestautocomplete/index.md
new file mode 100644
index 00000000000..d511dfafbd0
--- /dev/null
+++ b/src/site/content/en/blog/requestautocomplete/index.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: requestAutocomplete
+subhead: Take my money, not my time
+authors:
+  - jakearchibald
+date: 2013-10-03
+updated: 2014-05-12
+tags:
+  - blog
+---
+
+## Introduction
+
+I like the web. All in all, I think it’s a pretty good idea. As such, I get into a lot of web vs native debates. It doesn’t take long for the other person to start talking about the ease of payments through native systems. My usual response is to drop a smoke bomb and run out of the room laughing maniacally, because it’s not an argument I can win.
+**Shopping cart abandonment on the mobile web [can be as high as 97%](http://seewhy.com/blog/2012/10/10/97-shopping-cart-abandonment-rate-mobile-devices-concern-you/)**. Imagine that in the real world. Imagine 97% of people in a supermarket, with a cart brimming full of things that they want, flipping their cart over and walking out.
+Now, some of those people are just pricing stuff up and never had an intention to buy, but the horrific user experience of buying on the web is a significant contributor. We’re hitting users with a tax on their sanity.
+Think of a pleasurable payment experience you had on the web, especially on mobile. It’s an app store, right? Or at least a similar closed system that already has your payment information.
+This is a problem. It requires sites to commit to a particular payment provider that the user must already have an account with and be logged into, or to commit to a platform that requires users to be logged into a particular payment provider, such as an app storexs that require you to code solely for that platform. If you don’t do one of these things, the user is doomed to tap away at their screen or keyboard until all their finger-skin is gone, or they give up.
+We need to fix that.
+
+## requestAutocomplete
+
+{% Aside %}
+There is even more up to date forms tutorials on our new [Web Fundamentals](https://developers.google.com/web/fundamentals/documentation/user-input/form-input/) site as well as
+more in depth information about [requestAutocomplete](https://developers.google.com/web/fundamentals/documentation/user-input/form-input/use-request-auto-complete).
+{% endAside %}  
+
+In a world of WebGL, WebRTC and other fancy web APIs that start with “Web”, `requestAutocomplete` is rather unglamorous. However, it’s a superhero in beige clothing. A tiny, boring API that can stick a stake through the heart of the web payments time-vampire.
+
+{% YouTube id="VQO8hMqyn00" %}
+
+Rather than the site relying on a particular payment provider, it requests payment details from the browser, which stores them on the user’s behalf.
+Chrome's version of requestAutocomplete() also integrates with Google Wallet for **US users only (currently)**. [Give it a try on our test site](https://googledrive.com/host/0B28BnxIvH5DueUxvWVNsQXd5dU0/).
+
+## form.requestAutocomplete
+
+Form elements carry a single new method, requestAutocomplete, which asks the browser to populate the form. The browser will display a dialog to the user asking for permission and allowing the user to select which details they’d like to provide.
+You can’t call this whenever you want, it needs to be called during the execution of particular interaction events such as mouse up/down, click, key and touch events. This is a deliberate security restriction.
+
+```js
+button.addEventListener('click', function(event) {
+  form.requestAutocomplete();
+  event.preventDefault();
+});
+
+// TODO: listen for autocomplete events on the form
+```
+
+{% Aside %}
+If you’re adding events using a JavaScript library, be aware that some will redispatch events in a way that loses the link with the original interaction, meaning your call to requestAutocomplete will fail the security check. If this happens to you, use `addEventListener` directly as above.
+{% endAside %}
+
+Before we look at the events, we need to make sure the browser understands your form fields…
+
+## Form requirements
+
+Back when the internet was in black and white, Internet Explorer 5 adopted a new attribute, `autocomplete`, on form input elements. It could be set to “off” to stop the browser offering suggestions, and that was it. [This API was extended](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofilling-form-controls:-the-autocomplete-attribute) so you can specify the expected content of the field without modifying the “name” attribute, and this is what `requestAutocomplete` uses to link form fields to user data.
+
+```html
+<input name="fullname" autocomplete="name">
+```
+
+As a specification, `requestAutocomplete` isn’t payments-specific, but Chrome’s current implementation pretty much is. In future, expect browsers to be able to deal with other kinds of data, hopefully things like login details and password generator, passport information, and even uploading an avatar.
+
+Currently in Chrome, `requestAutocomplete` recognises the following:
+
+### Payment
+
+- email
+- cc-name - name on card
+- cc-number - card number
+- cc-exp-month - card expiry month as two digits
+- cc-exp-year - card expiry year as four digits
+- cc-csc - 3-4 digit card security code
+
+```html
+<input type="email" autocomplete="email" name="email">
+<input type="text" autocomplete="cc-name" name="card-name">
+<input type="text" autocomplete="cc-number" name="card-num">
+<input type="text" autocomplete="cc-exp-month" name="card-exp-month">
+<input type="text" autocomplete="cc-exp-year" name="card-exp-year">
+<input type="text" autocomplete="cc-csc" name="card-csc">
+```
+
+The “name” attributes I’ve used above are examples only, there’s no requirement to use particular values. If you’re going to reuse this form for users without `requestAutocomplete`, which is the ideal, you’ll want to add labels, layout and basic HTML5 validation.
+
+You’re not restricted to input elements either, you can use any form input type. For example, you could use `<select>` for the card expiry fields.
+
+{% Aside %}
+Because requestAutocomplete is only geared toward payments for now, it requires you include **at least one credit card related field** in your <form> and only works on **SSL-encrypted pages**. To help developers get their code working faster, Chrome logs the exact reason why requestAutocomplete failed to the developer console.
+{% endAside %}
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HFav7zwKOyLsiPiZ0hnH.png", alt="Detailed console message.", width="660", height="210" %}
+  <figcaption>Detailed console message</figcaption>
+</figure>
+
+### Address
+
+- name - full name. Taking a full name as a single field is far better than multiple fields. Multiple fields such as first-name and last-name show a Western bias and may not make sense to other cultures, also it’s easier to type into a single field
+
+- tel - full telephone number including country code, can alternatively be broken down into
+    - tel-country-code - e.g. +44
+    - tel-national - the rest
+
+- street-address - full address with components comma-separated, can be broken down into
+      - address-line1
+      - address-line2 - may be empty
+  
+- locality - city/town
+
+- region - State code, county or canton
+
+- postal-code - Postal code, post code, ZIP code
+
+- country
+
+
+The above should be used in combination with:
+- billing
+- shipping
+
+```html
+<input type="text" autocomplete="billing name" required name="billing-name">
+<input type="tel" autocomplete="billing tel" required name="billling-tel">
+<input type="text" autocomplete="billing address-line1" required name="billing-address1">
+<input type="text" autocomplete="billing address-line2" required name="billing-address2">
+<input type="text" autocomplete="billing locality" required name="billing-locality">
+<input type="text" autocomplete="billing region" required name="billing-region">
+<input type="text" autocomplete="billing postal-code" required name="billing-postal-code">
+<select autocomplete="billing country" required name="billing-country">
+  <option value="US">United States</option>
+  …
+</select>
+
+<input type="text" autocomplete="shipping name" name="shipping-name">
+…
+```
+
+Once again, the name attributes are examples, you can use whatever you want.
+Obviously not all forms should request a shipping address, e.g. don’t ask me where I’d like my hotel room delivered, it’s current location is often the selling point.
+Right, so we’ve got our form, and we know how to request `autocompletion`. But…
+
+## When should requestAutocomplete be called?
+
+Ideally you want to show the `requestAutocomplete` dialog instead of loading the page that displays the checkout form. If all goes well, the user shouldn’t see the form at all.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oIHHfYrtRxxZrs55sDD7.svg", alt="Payments Flow", width="620", height="907" %}
+</figure>
+
+A common pattern is to have a cart page with a “checkout” button that takes you to the payment details form. In this situation you want to load your billing form on the cart page, but hide it from the user, and call `requestAutocomplete` on it when the user hits the “checkout” button. Remember, you’ll need to serve your cart page via SSL to avoid the Skeletor warning.
+To begin, we should hide our checkout button so the user can’t click it until we’re ready, but we only want to do this for users with JavaScript. So, in the head of your page:
+
+```html
+<script>document.documentElement.className += ' js';</script>
+```
+
+And in your CSS:
+
+```css
+.js #checkout-button,
+#checkout-form.for-autocomplete {
+  display: none;
+}
+```
+
+We need to include the billing form on our cart page. This can go anywhere, the CSS above makes sure it isn’t visible to the user.
+
+```html
+<form id="checkout-form" class="for-autocomplete" action="/checkout" method="post">
+  …fields for payment, billing address &amp; shipping if relevant…
+</form>
+```
+
+Now our JavaScript can start setting everything up:
+
+```js
+function enhanceForm() {
+  var button = document.getElementById('checkout-button');
+  var form = document.getElementById('checkout-form');
+
+  // show the checkout button
+  button.style.display = 'block';
+
+  // exit early if there's no requestAutocomplete support
+  if (!form.requestAutocomplete) {
+    // be sure to show the checkout button so users can
+    // access the basic payment form!
+    return;
+  }
+
+  button.addEventListener('click', function(event) {
+    form.requestAutocomplete();
+    event.preventDefault();
+  });
+
+  // TODO: listen for autocomplete events on the form
+}
+```
+
+You would call `enhanceForm` on the cart page, sometime after your checkout form and button.
+Browsers that support `requestAutocomplete` will get the fancy new fast experience, other browsers will fall back to your normal payment form.
+For bonus points, you may want to load the form HTML via XHR as part of `enhanceForm`. This means you can load the form only in browsers that support `requestAutocomplete`, and you don’t need to remember to add the form to each page you may call `enhanceForm` from. This is how the [demo site](https://googledrive.com/host/0B28BnxIvH5DueUxvWVNsQXd5dU0/) works.
+
+## You’ve called requestAutocomplete, what now?
+
+The autocomplete process is asynchronous, `requestAutocomplete` returns straight away. To find out how that went, we listen to a couple of new events:
+
+```js
+form.addEventListener('autocomplete', function() {
+  // hurrah! You got all the data you needed
+});
+
+form.addEventListener('autocompleteerror', function(event) {
+  if (event.reason == 'invalid') {
+    // the form was populated, but it failed html5 validation
+    // eg, the data didn't match one of your pattern attributes
+  }
+  else if (event.reason == 'cancel') {
+    // the user aborted the process
+  }
+  else if (event.reason == 'disabled') {
+    // the browser supports requestAutocomplete, but it's not
+    // available at this time. Eg, it wasn't called from an
+    // interaction event or the page is insecure
+  }
+});
+```
+
+If everything worked, you can do whatever you want with the data, the simplest thing to do would be to submit the form. The server can then validate the data and give the user a confirmation page including delivery cost.
+If the data is invalid, you could show the form and highlight the fields the user needs to amend. Alternatively, you could just submit the form and let your regular server-side validation take over.
+If the user cancelled the process, you don’t really need to do anything. If the feature is disabled, send the user to the regular form.
+So in most cases, your listeners will look a lot like…
+
+```js
+form.addEventListener('autocomplete', function() {
+  form.submit();
+});
+
+form.addEventListener('autocompleteerror', function(event) {
+  if (event.reason == 'invalid') {
+    form.submit();
+  }
+  else if (event.reason != 'cancel') {
+    window.location = '/checkout-page/';
+  }
+});
+```
+
+## Where does the browser store my data?
+
+The specification doesn’t dictate where data is stored, allowing browsers to innovate.
+If you’re logged into Chrome, you get the option to store details in Google Wallet, making them accessible on other devices you’re logged into. If you store your details in Wallet, your real card number won’t be dealt out by `requestAutocomplete`, increasing security.
+If you aren’t logged into Chrome, or choose not to use Google Wallet, your details are optionally stored locally in the browser for reuse.
+This is the state of things now, but in future Chrome and other browsers may adopt additional payment providers.
+
+## Making payments easy
+
+It’s kinda ridiculous that users have to enter their payment information again and again whenever they want to make a purchase. Things get easier when a site stores your payment details, I’m slightly uneasy about how many sites store my card details. This is a perfect problem for web standards to solve.
+`requestAutocomplete` can bring one-click payments to the whole of the web, without service or platform lock-in, and about time too!
+
+## Bonus round: Handling multi-page forms
+
+It’s much better to call `requestAutocomplete` once and collect all the data you need. If you can’t modify your server to receive all this data at once, that’s ok, grab the data out of the completed form and submit it however works best for you.
+You can use this [nifty little function](https://gist.github.com/jakearchibald/5774636) to capture all the currently supported data as a simple object, without having to create a form yourself. Once you have the data, you can transform into whatever format your server needs, and post it in multiple steps.
+
+```js
+checkoutButton.addEventListener('click', function() {
+  requestUserData({
+    billing: true,
+    shipping: true
+  }, function(response) {
+    if (response.err == 'cancel') {
+      // exit silently
+      return;
+    }
+    if (response.err) {
+      // fall back to normal form
+      window.location.href = '/normal-checkout-form/';
+      return;
+    }
+
+    // the rest is just made-up pseudo code as an example
+    postToServer(data.shipping).then(function() {
+      return postToServer(data.billing);
+    }).then(function() {
+      return postToServer(data.cc);
+    }).catch(function() {
+      // handle error
+    });
+  });
+});
+```
\ No newline at end of file
diff --git a/src/site/content/en/blog/requestvideoframecallback-rvfc/hero.jpg b/src/site/content/en/blog/requestvideoframecallback-rvfc/hero.jpg
deleted file mode 100644
index 33745cce481..00000000000
Binary files a/src/site/content/en/blog/requestvideoframecallback-rvfc/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/requestvideoframecallback-rvfc/index.md b/src/site/content/en/blog/requestvideoframecallback-rvfc/index.md
index bff82d25c23..ebbe9151325 100644
--- a/src/site/content/en/blog/requestvideoframecallback-rvfc/index.md
+++ b/src/site/content/en/blog/requestvideoframecallback-rvfc/index.md
@@ -1,13 +1,13 @@
 ---
 title: |
-  The `requestVideoFrameCallback()` method
+  Perform efficient per-video-frame operations on video with `requestVideoFrameCallback()`
 subhead: |
-  Perform efficient per-video-frame operations on video.
+  Learn how to use the `requestVideoFrameCallback()` to work more efficiently with videos in the browser.
 authors:
   - thomassteiner
 date: 2020-06-29
-updated: 2020-06-29
-hero: hero.jpg
+updated: 2022-05-18
+hero: image/admin/gpmA4LxerS1wqYgY19W7.jpg
 alt: Film roll.
 description: |
   The requestVideoFrameCallback() method allows web authors to register a callback
@@ -16,6 +16,8 @@ tags:
   - blog
   - media
   - capabilities
+feedback:
+  - api
 ---
 There's a new Web API on the block, defined in the
 [`HTMLVideoElement.requestVideoFrameCallback()`](https://wicg.github.io/video-rvfc/)
@@ -29,11 +31,11 @@ or synchronization with external audio sources.
 ## Difference with requestAnimationFrame()
 
 Operations like drawing a video frame to a canvas via
-[`drawImage()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)
+[`drawImage()`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage)
 made through this API will be synchronized as a best effort
 with the frame rate of the video playing on screen.
 Different from
-[`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame),
+[`window.requestAnimationFrame()`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame),
 which usually fires about 60 times per second,
 `requestVideoFrameCallback()` is bound to the actual video frame rate—with an important
 [exception](https://wicg.github.io/video-rvfc/#ref-for-update-the-rendering③:~:text=Note%3A%20The%20effective%20rate%20at%20which,browser%20would%20fire%20callbacks%20at%2060hz.):
@@ -53,15 +55,7 @@ but I'm happy with the new name,
 after a [lengthy discussion](https://github.com/WICG/video-rvfc/issues/44).
 Yay, [bikeshedding](https://css-tricks.com/what-is-bikeshedding/) for the win!
 
-## Browser support and feature detection
-
-The method is
-[implemented in Chromium](https://chromestatus.com/feature/6335927192387584)
-already, and
-[Mozilla folks like it](https://mozilla.github.io/standards-positions/#requestVideoFrameCallback).
-For what it's worth, I have also filed a
-[WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=211945) asking for it.
-Feature detection of the API works like this:
+## Feature detection
 
 ```js
 if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
@@ -69,6 +63,20 @@ if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
 }
 ```
 
+## Browser support
+
+{% BrowserCompat 'api.HTMLVideoElement.requestVideoFrameCallback' %}
+
+## Polyfill
+
+A [polyfill for the `requestVideoFrameCallback()` method](https://github.com/ThaUnknown/rvfc-polyfill)
+based on
+[`Window.requestAnimationFrame()`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame)
+and
+[`HTMLVideoElement.getVideoPlaybackQuality()`](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/getVideoPlaybackQuality)
+is available. Before using this, be aware of the
+[limitations mentioned in the `README`](https://github.com/ThaUnknown/rvfc-polyfill#requestvideoframecallback-polyfill).
+
 ## Using the requestVideoFrameCallback() method
 
 If you have ever used the `requestAnimationFrame()` method, you will immediately feel at home with the `requestVideoFrameCallback()` method.
@@ -85,7 +93,7 @@ const doSomethingWithTheFrame = (now, metadata) => {
 video.requestVideoFrameCallback(doSomethingWithTheFrame);
 ```
 
-In the callback, `now` is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)
+In the callback, `now` is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp)
 and `metadata` is a [`VideoFrameMetadata`](https://wicg.github.io/video-rvfc/#dictdef-videoframemetadata)
 dictionary with the following properties:
 
diff --git a/src/site/content/en/blog/resize-observer/contentbox.png b/src/site/content/en/blog/resize-observer/contentbox.png
deleted file mode 100644
index acc8a10cb4c..00000000000
Binary files a/src/site/content/en/blog/resize-observer/contentbox.png and /dev/null differ
diff --git a/src/site/content/en/blog/resize-observer/hero.jpg b/src/site/content/en/blog/resize-observer/hero.jpg
deleted file mode 100644
index 4bb7c090795..00000000000
Binary files a/src/site/content/en/blog/resize-observer/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/resize-observer/index.md b/src/site/content/en/blog/resize-observer/index.md
index 61115df4744..11e7c2226ad 100644
--- a/src/site/content/en/blog/resize-observer/index.md
+++ b/src/site/content/en/blog/resize-observer/index.md
@@ -6,7 +6,7 @@ authors:
   - joemedley
 date: 2016-10-07
 updated: 2020-05-26
-hero: hero.jpg
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
 alt: Growing plants in boxes.
 description: |
   `ResizeObserver` notifies you  when an element’s content rectangle changes
@@ -17,6 +17,8 @@ tags:
   - javascript
   - layout
   - rendering
+feedback:
+  - api
 ---
 
 Before `ResizeObserver`, you had to attach a listener to the document's `resize`
@@ -37,6 +39,8 @@ This is why `ResizeObserver` is a useful primitive. It reacts to changes in
 size of any of the observed elements, independent of what caused the change.
 It provides access to the new size of the observed elements too.
 
+{% BrowserCompat 'api.ResizeObserver' %}
+
 ## API
 
 All the APIs with the `Observer` suffix we mentioned above share a simple API
@@ -64,16 +68,15 @@ ro.observe(someElement);
 ### What is being reported?
 
 Generally, a
-[`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+[`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry)
 reports the content box of an element through a property called
 `contentRect`, which returns a
-[`DOMRectReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
+[`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly)
 object. The content box is the box in which content can be placed. It is
 the border box minus the padding.
 
-<figure class="w-figure">
-  <img src="./contentbox.png" 
-       alt="A diagram of the CSS box model.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="A diagram of the CSS box model.", width="727", height="562" %}
 </figure>
 
 It's important to note that while `ResizeObserver` *reports* both the dimensions
@@ -97,7 +100,7 @@ they can support elements that have multiple fragments, which occur in
 multi-column scenarios. For now, these arrays will only contain one element.
 
 Platform support for these properties is limited, but [Firefox already
-supports](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry#Browser_compatibility)
+supports](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility)
 the first two.
 
 ### When is it being reported?
@@ -126,8 +129,8 @@ design breakpoints and change an element's styles. In the following
 [example](https://googlechrome.github.io/samples/resizeobserver/), the second box
 will change its border radius according to its width.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm"
             type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4"
@@ -138,7 +141,7 @@ will change its border radius according to its width.
 ```js
 const ro = new ResizeObserver(entries => {
   for (let entry of entries) {
-    entry.target.style.borderRadius = 
+    entry.target.style.borderRadius =
         Math.max(0, 250 - entry.contentRect.width) + 'px';
   }
 });
@@ -160,8 +163,8 @@ capture by definition, but calling `appendChild()` also resizes that element
 elements. With this in mind, it takes very few lines to achieve the desired
 effect:
 
-<figure class="w-figure">
- <video controls autoplay loop muted class="w-screenshot">
+<figure>
+ <video controls autoplay loop muted>
    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm"
            type="video/webm; codecs=vp8">
    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4"
diff --git a/src/site/content/en/blog/responsive-images/index.md b/src/site/content/en/blog/responsive-images/index.md
new file mode 100644
index 00000000000..95af50d1141
--- /dev/null
+++ b/src/site/content/en/blog/responsive-images/index.md
@@ -0,0 +1,983 @@
+---
+layout: post
+title: Responsive images
+subhead: A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes.  With responsive web design not only can our layouts change based on device characteristics, but images as well.
+authors:
+  - petelepage
+date: 2014-04-29
+updated: 2020-07-24
+description: A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes.  With responsive web design not only can our layouts change based on device characteristics, but images as well.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+
+Responsive web design means that not only can our layouts change based on device
+characteristics, but content can change as well.  For example, on high
+resolution (2x) displays, high resolution graphics ensure sharpness. An image
+that  is 50% width may work just fine when the browser is 800px wide, but uses
+too much real estate on a narrow phone, and requires the same bandwidth overhead
+when scaled down to fit a smaller screen.
+
+## Art direction
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cQKbjztkJ45DQoIw3sNH.png", alt="Art direction example", width="600", height="328" %}
+</figure>
+
+Other times the image may need to be changed more drastically: changing the
+proportions, cropping, and even replacing the entire image.  In this case,
+changing the image is usually referred to as art direction.  See
+[responsiveimages.org/demos/](https://responsiveimages.org/demos/) for more
+examples.
+
+## Responsive Images
+
+ <a href="https://www.udacity.com/course/responsive-images--ud882">
+   <figure>
+   {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TpGoiZpVMoyjWi0BBJb7.png", alt="Udacity Course Screenshot", width="360", height="220", class="float-right" %}
+   </figure>
+</a>
+
+Did you know that images account for more than 60% of the bytes on average needed to load a web page?
+
+In this course you will learn how to work with images on the modern web, so
+that your images look great and load quickly on any device.
+
+Along the way, you will pick up a range of skills and techniques to smoothly
+integrate responsive images into your development workflow. By the end of
+the course, you will be developing with images that adapt and respond to
+different viewport sizes and usage scenarios.
+
+This is a free course offered through [Udacity](https://www.udacity.com)
+
+[Take Course](https://www.udacity.com/course/responsive-images--ud882)
+
+
+## Images in markup
+
+The `img` element is powerful&mdash;it downloads, decodes, and renders
+content&mdash;and modern browsers support a range of image  formats.  Including
+images that work across devices is no different than for desktop, and only
+requires a few minor tweaks to create a good experience.
+
+
+### Summary
+
+- Use relative sizes for images to prevent them from accidentally overflowing
+  the container.
+- Use the `picture` element when you want to specify different images depending
+  on device characteristics (a.k.a. art direction).
+- Use `srcset` and the `x` descriptor in the  `img` element to give hints to
+  the browser about the best  image to use when choosing from different densities.
+- If your page only has one or two images and these are not used elsewhere on
+  your site, consider using inline images to reduce file requests.
+
+
+### Use relative sizes for images
+
+Remember to use relative units when specifying widths for images to prevent them
+from accidentally overflowing the viewport.  For example, `width: 50%;`  causes
+the image width to be 50% of the containing element (not 50% of the viewport or
+50% of actual pixel size).
+
+Because CSS allows content to overflow its container, you may need to use max-
+width: 100% to prevent images and other content from overflowing.  For example:
+
+```css
+img, embed, object, video {
+    max-width: 100%;
+}
+```
+
+Be sure to provide meaningful descriptions via the `alt` attribute on `img`
+elements; these help make your site more accessible by giving context to screen
+readers and other assistive technologies.
+
+
+### Enhance `img`s with `srcset` for high DPI devices
+
+{% YouTube id="Pzc5Dly_jEM" %}
+
+The `srcset` attribute enhances the behavior of the
+`img` element, making it easy to provide multiple image files
+for different device characteristics. Similar to the `image-set`
+[CSS function](#use-image-set-to-provide-high-res-images)
+native to CSS, `srcset` allows the browser to choose the best
+image depending on the characteristics of the device, for example using
+a 2x image on a 2x display, and potentially in the future, a 1x image on
+a 2x device when on a limited bandwidth network.
+
+```html
+<img src="photo.png" srcset="photo@2x.png 2x" ...>
+```
+
+On browsers that don't support `srcset`, the browser simply uses the default
+image file specified by the `src` attribute.  This is why it is important to
+always include a 1x image that can be displayed on any device, regardless of
+capabilities.  When `srcset` is supported, the  comma-separated list of
+image/conditions is parsed prior to making any requests, and only the most
+appropriate image is downloaded and displayed.
+
+While the conditions can include everything from pixel density to width and
+height, only pixel density is well-supported today.  To balance current
+behavior with future features, stick with simply providing the 2x image in
+the attribute.
+
+### Art direction in responsive images with `picture`
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cQKbjztkJ45DQoIw3sNH.png", alt="Art direction example", width="600", height="328" %}
+</figure>
+
+To change images based on device characteristics, also known as art
+direction, use the `picture` element.  The
+`picture` element defines a declarative solution for
+providing multiple versions of an image based on different
+characteristics, like device size, device resolution, orientation,
+and more.
+
+
+{% Aside %}
+The `picture` element is beginning to land in browsers. Although it's
+not available in every browser yet, we recommend its use because of the strong
+backward compatibility and potential use of the
+[Picturefill polyfill](https://scottjehl.github.io/picturefill/). See the
+[ResponsiveImages.org](http://responsiveimages.org/#implementation) site for
+further details.
+{% endAside %}
+
+
+{% YouTube id="QINlm3vjnaY" %}
+
+
+Use the `picture` element when an image source
+exists in multiple densities, or when a responsive design dictates a
+somewhat different image on some types of screens.  Similar to the
+`video` element, multiple `source` elements can
+be included, making it possible to specify different image files
+depending on media queries or image format.
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
+  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
+  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
+</picture>
+```
+
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media.html){: target="_blank" .external }
+
+In the above example, if the browser width is at least 800px then either
+`head.jpg` or `head-2x.jpg` is used, depending on the device resolution. If the
+browser is between 450px and 800px, then either `head-small.jpg` or `head-small-
+2x.jpg` is used, again, depending on the device resolution. For screen widths
+less than 450px and backward compatibility where the `picture` element isn’t
+supported, the browser renders the `img` element instead, and should always be
+included.
+
+#### Relative sized images
+
+When the final size of the image isn’t known, it can be difficult to specify a
+density descriptor for the image sources.  This is especially true for images
+that span a proportional width of the browser and are fluid, depending on the
+size of the browser.
+
+Instead of supplying fixed image sizes and densities, you can specify the size
+of each supplied image by adding a width descriptor along with the size of the
+image element, allowing the browser to automatically calculate the effective
+pixel density and choose the best image to download.
+
+```html
+<img src="lighthouse-200.jpg" sizes="50vw"
+     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
+             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
+             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
+             lighthouse-1800.jpg 1800w" alt="a lighthouse">
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/sizes.html)
+
+
+The above example renders an image that is half the viewport width
+(`sizes="50vw"`), and depending on the width of the browser and its device pixel
+ratio, allows the browser to choose the correct image regardless of how large
+the browser window is. For example, the table below shows which image the
+browser would choose:
+
+<table class="">
+  <thead>
+    <tr>
+      <th data-th="Browser width">Browser width</th>
+      <th data-th="Device pixel ratio">Device pixel ratio</th>
+      <th data-th="Image used">Image used</th>
+      <th data-th="Effective resolution">Effective resolution</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Browser width">400px</td>
+      <td data-th="Device pixel ratio">1</td>
+      <td data-th="Image used"><code>200.jpg</code></td>
+      <td data-th="Effective resolution">1x</td>
+    </tr>
+    <tr>
+      <td data-th="Browser width">400px</td>
+      <td data-th="Device pixel ratio">2</td>
+      <td data-th="Image used"><code>400.jpg</code></td>
+      <td data-th="Effective resolution">2x</td>
+    </tr>
+    <tr>
+      <td data-th="Browser width">320px</td>
+      <td data-th="Device pixel ratio">2</td>
+      <td data-th="Image used"><code>400.jpg</code></td>
+      <td data-th="Effective resolution">2.5x</td>
+    </tr>
+    <tr>
+      <td data-th="Browser width">600px</td>
+      <td data-th="Device pixel ratio">2</td>
+      <td data-th="Image used"><code>800.jpg</code></td>
+      <td data-th="Effective resolution">2.67x</td>
+    </tr>
+    <tr>
+      <td data-th="Browser width">640px</td>
+      <td data-th="Device pixel ratio">3</td>
+      <td data-th="Image used"><code>1000.jpg</code></td>
+      <td data-th="Effective resolution">3.125x</td>
+    </tr>
+    <tr>
+      <td data-th="Browser width">1100px</td>
+      <td data-th="Device pixel ratio">1</td>
+      <td data-th="Image used"><code>800.png</code></td>
+      <td data-th="Effective resolution">1.45x</td>
+    </tr>
+  </tbody>
+</table>
+
+
+#### Account for breakpoints in responsive images
+
+In many cases, the image size may change depending on the site’s layout
+breakpoints.  For example, on a small screen, you might want the image to
+span the full width of the viewport, while on larger screens, it should only
+take a small proportion.
+
+```html
+<img src="400.png"
+     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
+     srcset="100.png 100w, 200.png 200w, 400.png 400w,
+             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/breakpoints.html)
+
+The `sizes` attribute, in the above example, uses several media queries to
+specify the size of the image. When the browser width is greater than
+600px, the image is 25% of the viewport width; when it is between 500px
+and 600px, the image is 50% of the viewport width; and below 500px, it
+is full width.
+
+
+### Make product images expandable
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hF9ing9oEb4opUianjqU.png", alt="J. Crews website with expandable product image", width="325", height="550", class="float-right" %}
+  <figcaption>
+    J. Crew's website with expandable product image.
+  </figcaption>
+</figure>
+
+Customers want to see what they're buying.  On retail sites, users expect to be
+able to view high resolution closeups of products to get a better look at
+details, and
+[study participants](https://developers.google.com/web/fundamentals/getting-started/principles/#make-product-images-expandable)
+got frustrated if they weren't able to.
+
+A good example of tappable, expandable images is provided by the J. Crew site.
+A disappearing overlay indicates that an image is tappable, providing a zoomed
+in image with fine detail visible.
+
+
+### Other image techniques
+
+#### Compressive images
+
+The
+[compressive image technique](http://www.html5rocks.com/en/mobile/high-dpi/#toc-tech-overview)
+serves a highly compressed 2x image to all devices, no matter the actual
+capabilities of the device.  Depending on the type of image and level of
+compression, image quality may not appear to change, but the file size drops
+significantly.
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/compressive.html)
+
+{% Aside 'caution' %}
+Use caution with the compressive technique because of the increased
+memory and decoding costs it requires. Resizing large images to fit on smaller
+screens is expensive and can be particularly painful on low-end devices where
+both memory and processing is limited.
+{% endAside %}
+
+#### JavaScript image replacement
+
+JavaScript image replacement checks the capabilities of the device and "does the
+right thing." You can determine device pixel ratio via
+`window.devicePixelRatio`, get screen width and height, and even potentially do
+some network connection sniffing via `navigator.connection` or issuing a fake
+request. When you've collected all of this information, you can decide which
+image to load.
+
+One big drawback to this approach is that using JavaScript means that you will
+delay image loading until at least the look-ahead parser has finished. This
+means that images won't even start downloading until after the `pageload` event
+fires. In addition, the browser will most likely download both the 1x and 2x
+images, resulting in increased page weight.
+
+
+#### Inlining images: raster and vector
+
+There are two fundamentally different ways to create and store images&mdash;and
+this affects how you deploy images responsively.
+
+**Raster images** &mdash; such as photographs and other images, are
+represented as a grid of individual dots of color. Raster images might come
+from a camera or scanner, or be created with the HTML canvas element. Formats
+like PNG, JPEG, and WebP are used to store raster images.
+
+**Vector images** such as logos and line art are defined as a set of
+curves, lines, shapes, fill colors and gradients. Vector images can be created
+with programs like Adobe Illustrator or Inkscape, or handwritten in code using
+a vector format such as SVG.
+
+##### SVG
+
+SVG makes it possible to include responsive vector graphics in a web page. The
+advantage of vector file formats over raster file formats is that the browser
+can render a vector image at any size. Vector formats describe the geometry of
+the image&mdash;how it's constructed from lines, curves, and colors and so on.
+Raster formats, on the other hand, only have information about individual dots
+of color, so the browser has to guess how to fill in the blanks when scaling.
+
+Below are two versions of the same image: a PNG image on the left and an SVG on
+the right. The SVG looks great at any size, whereas the PNG next to it starts to
+look blurry at larger display sizes.
+
+
+<div class="switcher">
+    <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uNe4OQfREZVVpnQOBxiA.png", alt="HTML5 logo, PNG format", width="200", height="282" %}
+    </figure>
+    <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XxFz3h3CtZrLWwgmiKEy.svg", alt="HTML5 logo, SVG format", width="397", height="560" %}
+    </figure>
+</div>
+
+If you want to reduce the number of file requests your page makes, you can code
+images inline using SVG or Data URI format. If you view the source of this page,
+you'll see that both logos below are declared inline: a Data URI and an SVG.
+
+<img class="side-by-side" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
+      BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW
+      9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RUR
+      CBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2
+      ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8
+      vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OT
+      kveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzk2Ljc0cHgiIGhlaWdodD0iNTYwc
+      HgiIHZpZXdCb3g9IjI4MS42MyAwIDM5Ni43NCA1NjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcg
+      MjgxLjYzIDAgMzk2Ljc0IDU2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSINCgk+DQo8Zz4NCgk8Zz4
+      NCgkJPGc+DQoJCQk8cG9seWdvbiBmaWxsPSIjRTQ0RDI2IiBwb2ludHM9IjQwOS43MzcsMjQyLj
+      UwMiA0MTQuMjc2LDI5My4zNjIgNDc5LjgyOCwyOTMuMzYyIDQ4MCwyOTMuMzYyIDQ4MCwyNDIuN
+      TAyIDQ3OS44MjgsMjQyLjUwMiAJCQkNCgkJCQkiLz4NCgkJCTxwYXRoIGZpbGw9IiNFNDREMjYi
+      IGQ9Ik0yODEuNjMsMTEwLjA1M2wzNi4xMDYsNDA0Ljk2OEw0NzkuNzU3LDU2MGwxNjIuNDctNDU
+    uMDQybDM2LjE0NC00MDQuOTA1SDI4MS42M3ogTTYxMS4yODMsNDg5LjE3Ng0KCQkJCUw0ODAsNT
+    I1LjU3MlY0NzQuMDNsLTAuMjI5LDAuMDYzTDM3OC4wMzEsNDQ1Ljg1bC02Ljk1OC03Ny45ODVoM
+    jIuOThoMjYuODc5bDMuNTM2LDM5LjYxMmw1NS4zMTUsMTQuOTM3bDAuMDQ2LTAuMDEzdi0wLjAw
+    NA0KCQkJCUw0ODAsNDIyLjM1di03OS4zMmgtMC4xNzJIMzY4Ljg1M2wtMTIuMjA3LTEzNi44NzF
+    sLTEuMTg5LTEzLjMyNWgxMjQuMzcxSDQ4MHYtNDkuNjY4aDE2Mi4xN0w2MTEuMjgzLDQ4OS4xNz
+    Z6Ii8+DQoJCQk8cG9seWdvbiBmaWxsPSIjRjE2NTI5IiBwb2ludHM9IjQ4MCwxOTIuODMzIDYwN
+    C4yNDcsMTkyLjgzMyA2MDMuMDU5LDIwNi4xNTkgNjAwLjc5NiwyMzEuMzM4IDU5OS44LDI0Mi41
+    MDIgNTk5LjY0LDI0Mi41MDIgDQoJCQkJNDgwLDI0Mi41MDIgNDgwLDI5My4zNjIgNTgxLjg5Niw
+    yOTMuMzYyIDU5NS4yOCwyOTMuMzYyIDU5NC4wNjgsMzA2LjY5OSA1ODIuMzk2LDQzNy40NTggNT
+    gxLjY0OSw0NDUuODUgNDgwLDQ3NC4wMjEgDQoJCQkJNDgwLDQ3NC4wMyA0ODAsNTI1LjU3MiA2M
+    TEuMjgzLDQ4OS4xNzYgNjQyLjE3LDE0My4xNjYgNDgwLDE0My4xNjYgCQkJIi8+DQoJCQk8cG9s
+    eWdvbiBmaWxsPSIjRjE2NTI5IiBwb2ludHM9IjU0MC45ODgsMzQzLjAyOSA0ODAsMzQzLjAyOSA
+    0ODAsNDIyLjM1IDUzNS4yMjQsNDA3LjQ0NSAJCQkiLz4NCgkJCTxwb2x5Z29uIGZpbGw9IiNFQk
+    VCRUIiIHBvaW50cz0iNDE0LjI3NiwyOTMuMzYyIDQwOS43MzcsMjQyLjUwMiA0NzkuODI4LDI0M
+    i41MDIgNDc5LjgyOCwyNDIuMzggNDc5LjgyOCwyMjMuNjgyIA0KCQkJCTQ3OS44MjgsMTkyLjgz
+    MyAzNTUuNDU3LDE5Mi44MzMgMzU2LjY0NiwyMDYuMTU5IDM2OC44NTMsMzQzLjAyOSA0NzkuODI
+    4LDM0My4wMjkgNDc5LjgyOCwyOTMuMzYyIAkJCSIvPg0KCQkJPHBvbHlnb24gZmlsbD0iI0VCRU
+    JFQiIgcG9pbnRzPSI0NzkuODI4LDQ3NC4wNjkgNDc5LjgyOCw0MjIuNCA0NzkuNzgyLDQyMi40M
+    TMgNDI0LjQ2Nyw0MDcuNDc3IDQyMC45MzEsMzY3Ljg2NCANCgkJCQkzOTQuMDUyLDM2Ny44NjQg
+    MzcxLjA3MiwzNjcuODY0IDM3OC4wMzEsNDQ1Ljg1IDQ3OS43NzEsNDc0LjA5NCA0ODAsNDc0LjA
+    zIDQ4MCw0NzQuMDIxIAkJCSIvPg0KCQkJPHBvbHlnb24gcG9pbnRzPSIzNDMuNzg0LDUwLjIyOS
+    AzNjYuODc0LDUwLjIyOSAzNjYuODc0LDc1LjUxNyAzOTIuMTE0LDc1LjUxNyAzOTIuMTE0LDAgM
+    zY2Ljg3MywwIDM2Ni44NzMsMjQuOTM4IA0KCQkJCTM0My43ODMsMjQuOTM4IDM0My43ODMsMCAz
+    MTguNTQ0LDAgMzE4LjU0NCw3NS41MTcgMzQzLjc4NCw3NS41MTcgCQkJIi8+DQoJCQk8cG9seWd
+    vbiBwb2ludHM9IjQyNS4zMDcsMjUuMDQyIDQyNS4zMDcsNzUuNTE3IDQ1MC41NDksNzUuNTE3ID
+    Q1MC41NDksMjUuMDQyIDQ3Mi43NzksMjUuMDQyIDQ3Mi43NzksMCA0MDMuMDg1LDAgDQoJCQkJN
+    DAzLjA4NSwyNS4wNDIgNDI1LjMwNiwyNS4wNDIgCQkJIi8+DQoJCQk8cG9seWdvbiBwb2ludHM9
+    IjUwOC41MzcsMzguMDg2IDUyNS45MTQsNjQuOTM3IDUyNi4zNDksNjQuOTM3IDU0My43MTQsMzg
+    uMDg2IDU0My43MTQsNzUuNTE3IDU2OC44NTEsNzUuNTE3IDU2OC44NTEsMCANCgkJCQk1NDIuNT
+    IyLDAgNTI2LjM0OSwyNi41MzQgNTEwLjE1OSwwIDQ4My44NCwwIDQ4My44NCw3NS41MTcgNTA4L
+    jUzNyw3NS41MTcgCQkJIi8+DQoJCQk8cG9seWdvbiBwb2ludHM9IjY0Mi4xNTYsNTAuNTU1IDYw
+    Ni42Niw1MC41NTUgNjA2LjY2LDAgNTgxLjQxMiwwIDU4MS40MTIsNzUuNTE3IDY0Mi4xNTYsNzU
+    uNTE3IAkJCSIvPg0KCQkJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI0ODAsNDc0Lj
+    AyMSA1ODEuNjQ5LDQ0NS44NSA1ODIuMzk2LDQzNy40NTggNTk0LjA2OCwzMDYuNjk5IDU5NS4yO
+    CwyOTMuMzYyIDU4MS44OTYsMjkzLjM2MiANCgkJCQk0ODAsMjkzLjM2MiA0NzkuODI4LDI5My4z
+    NjIgNDc5LjgyOCwzNDMuMDI5IDQ4MCwzNDMuMDI5IDU0MC45ODgsMzQzLjAyOSA1MzUuMjI0LDQ
+    wNy40NDUgNDgwLDQyMi4zNSA0NzkuODI4LDQyMi4zOTYgDQoJCQkJNDc5LjgyOCw0MjIuNCA0Nz
+    kuODI4LDQ3NC4wNjkgCQkJIi8+DQoJCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9I
+    jQ3OS44MjgsMjQyLjM4IDQ3OS44MjgsMjQyLjUwMiA0ODAsMjQyLjUwMiA1OTkuNjQsMjQyLjUw
+    MiA1OTkuOCwyNDIuNTAyIDYwMC43OTYsMjMxLjMzOCANCgkJCQk2MDMuMDU5LDIwNi4xNTkgNjA
+    0LjI0NywxOTIuODMzIDQ4MCwxOTIuODMzIDQ3OS44MjgsMTkyLjgzMyA0NzkuODI4LDIyMy42OD
+    IgCQkJIi8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==">
+<svg class="side-by-side" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  width="396.74px" height="560px" viewBox="281.63 0 396.74 560" enable-background="new 281.63 0 396.74 560" xml:space="preserve"><g><g><g><polygon fill="#E44D26" points="409.737,242.502 414.276,293.362 479.828,293.362 480,293.362 480,242.502 479.828,242.502"/><path fill="#E44D26" d="M281.63,110.053l36.106,404.968L479.757,560l162.47-45.042l36.144-404.905H281.63z M611.283,489.176 L480,525.572V474.03l-0.229,0.063L378.031,445.85l-6.958-77.985h22.98h26.879l3.536,39.612l55.315,14.937l0.046-0.013v-0.004 L480,422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283,489.176z"/><polygon fill="#F16529" points="480,192.833 604.247,192.833 603.059,206.159 600.796,231.338 599.8,242.502 599.64,242.502 480,242.502 480,293.362 581.896,293.362 595.28,293.362 594.068,306.699 582.396,437.458 581.649,445.85 480,474.021 480,474.03 480,525.572 611.283,489.176 642.17,143.166 480,143.166       "/><polygon fill="#F16529" points="540.988,343.029 480,343.029 480,422.35 535.224,407.445      "/><polygon fill="#EBEBEB" points="414.276,293.362 409.737,242.502 479.828,242.502 479.828,242.38 479.828,223.682 479.828,192.833 355.457,192.833 356.646,206.159 368.853,343.029 479.828,343.029 479.828,293.362       "/><polygon fill="#EBEBEB" points="479.828,474.069 479.828,422.4 479.782,422.413 424.467,407.477 420.931,367.864 394.052,367.864 371.072,367.864 378.031,445.85 479.771,474.094 480,474.03 480,474.021       "/><polygon points="343.784,50.229 366.874,50.229 366.874,75.517 392.114,75.517 392.114,0 366.873,0 366.873,24.938 343.783,24.938 343.783,0 318.544,0 318.544,75.517 343.784,75.517      "/><polygon points="425.307,25.042 425.307,75.517 450.549,75.517 450.549,25.042 472.779,25.042 472.779,0 403.085,0 403.085,25.042 425.306,25.042       "/><polygon points="508.537,38.086 525.914,64.937 526.349,64.937 543.714,38.086 543.714,75.517 568.851,75.517 568.851,0 542.522,0 526.349,26.534 510.159,0 483.84,0 483.84,75.517 508.537,75.517      "/><polygon points="642.156,50.555 606.66,50.555 606.66,0 581.412,0 581.412,75.517 642.156,75.517      "/><polygon fill="#FFFFFF" points="480,474.021 581.649,445.85 582.396,437.458 594.068,306.699 595.28,293.362 581.896,293.362 480,293.362 479.828,293.362 479.828,343.029 480,343.029 540.988,343.029 535.224,407.445 480,422.35 479.828,422.396 479.828,422.4 479.828,474.069       "/><polygon fill="#FFFFFF" points="479.828,242.38 479.828,242.502 480,242.502 599.64,242.502 599.8,242.502 600.796,231.338 603.059,206.159 604.247,192.833 480,192.833 479.828,192.833 479.828,223.682       "/></g></g></g></svg>
+
+SVG has [great support](http://caniuse.com/svg-html5) on mobile and desktop,
+and [optimization tools](https://sarasoueidan.com/blog/svgo-tools/) can
+significantly reduce SVG size. The following two inline SVG logos look
+identical, but one is around 3KB and the other only 2KB:
+
+<svg class="side-by-side" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="396.74px" height="560px" viewBox="281.63 0 396.74 560" enable-background="new 281.63 0 396.74 560" xml:space="preserve"><g><g><g><polygon fill="#E44D26" points="409.737,242.502 414.276,293.362 479.828,293.362 480,293.362 480,242.502 479.828,242.502"/><path fill="#E44D26" d="M281.63,110.053l36.106,404.968L479.757,560l162.47-45.042l36.144-404.905H281.63z M611.283,489.176 L480,525.572V474.03l-0.229,0.063L378.031,445.85l-6.958-77.985h22.98h26.879l3.536,39.612l55.315,14.937l0.046-0.013v-0.004 L480,422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283,489.176z"/><polygon fill="#F16529" points="480,192.833 604.247,192.833 603.059,206.159 600.796,231.338 599.8,242.502 599.64,242.502 480,242.502 480,293.362 581.896,293.362 595.28,293.362 594.068,306.699 582.396,437.458 581.649,445.85 480,474.021 480,474.03 480,525.572 611.283,489.176 642.17,143.166 480,143.166       "/><polygon fill="#F16529" points="540.988,343.029 480,343.029 480,422.35 535.224,407.445      "/><polygon fill="#EBEBEB" points="414.276,293.362 409.737,242.502 479.828,242.502 479.828,242.38 479.828,223.682 479.828,192.833 355.457,192.833 356.646,206.159 368.853,343.029 479.828,343.029 479.828,293.362       "/><polygon fill="#EBEBEB" points="479.828,474.069 479.828,422.4 479.782,422.413 424.467,407.477 420.931,367.864 394.052,367.864 371.072,367.864 378.031,445.85 479.771,474.094 480,474.03 480,474.021       "/><polygon points="343.784,50.229 366.874,50.229 366.874,75.517 392.114,75.517 392.114,0 366.873,0 366.873,24.938 343.783,24.938 343.783,0 318.544,0 318.544,75.517 343.784,75.517      "/><polygon points="425.307,25.042 425.307,75.517 450.549,75.517 450.549,25.042 472.779,25.042 472.779,0 403.085,0 403.085,25.042 425.306,25.042       "/><polygon points="508.537,38.086 525.914,64.937 526.349,64.937 543.714,38.086 543.714,75.517 568.851,75.517 568.851,0 542.522,0 526.349,26.534 510.159,0 483.84,0 483.84,75.517 508.537,75.517      "/><polygon points="642.156,50.555 606.66,50.555 606.66,0 581.412,0 581.412,75.517 642.156,75.517      "/><polygon fill="#FFFFFF" points="480,474.021 581.649,445.85 582.396,437.458 594.068,306.699 595.28,293.362 581.896,293.362 480,293.362 479.828,293.362 479.828,343.029 480,343.029 540.988,343.029 535.224,407.445 480,422.35 479.828,422.396 479.828,422.4 479.828,474.069       "/><polygon fill="#FFFFFF" points="479.828,242.38 479.828,242.502 480,242.502 599.64,242.502 599.8,242.502 600.796,231.338 603.059,206.159 604.247,192.833 480,192.833 479.828,192.833 479.828,223.682       "/></g></g></g></svg><svg class="side-by-side" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="50%" height="560px" viewBox="281.63 0 396.74 560" enable-background="new 281.63 0 396.74 560" xml:space="preserve"><g><g><g><polygon fill="#E44D26" points="409.7,242.5 414.3,293.4 479.8,293.4 480,293.4 480,242.5 479.8,242.5"/><path fill="#E44D26" d="M281.63 110.053l36.106 404.968L479.757 560l162.47-45.042l36.144-404.905H281.63z M611.283 489.2 L480 525.572V474.03l-0.229 0.063L378.031 445.85l-6.958-77.985h22.98h26.879l3.536 39.612l55.315 14.937l0.046-0.013v-0.004 L480 422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283 489.176z"/><polygon fill="#F16529" points="480,192.8 604.2,192.8 603.1,206.2 600.8,231.3 599.8,242.5 599.6,242.5 480,242.5 480,293.4 581.9,293.4 595.3,293.4 594.1,306.7 582.4,437.5 581.6,445.9 480,474 480,474 480,525.6 611.3,489.2 642.2,143.2 480,143.2"/><polygon fill="#F16529" points="541,343 480,343 480,422.4 535.2,407.4"/><polygon fill="#EBEBEB" points="414.3,293.4 409.7,242.5 479.8,242.5 479.8,242.4 479.8,223.7 479.8,192.8 355.5,192.8 356.6,206.2 368.9,343 479.8,343 479.8,293.4"/><polygon fill="#EBEBEB" points="479.8,474.1 479.8,422.4 479.8,422.4 424.5,407.5 420.9,367.9 394.1,367.9 371.1,367.9 378,445.9 479.8,474.1 480,474 480,474"/><polygon points="343.8,50.2 366.9,50.2 366.9,75.5 392.1,75.5 392.1,0 366.9,0 366.9,24.9 343.8,24.9 343.8,0 318.5,0 318.5,75.5 343.8,75.5"/><polygon points="425.3,25 425.3,75.5 450.5,75.5 450.5,25 472.8,25 472.8,0 403.1,0 403.1,25 425.3,25"/><polygon points="508.5,38.1 525.9,64.9 526.3,64.9 543.7,38.1 543.7,75.5 568.9,75.5 568.9,0 542.5,0 526.3,26.5 510.2,0 483.8,0 483.8,75.5 508.5,75.5"/><polygon points="642.2,50.6 606.7,50.6 606.7,0 581.4,0 581.4,75.5 642.2,75.5"/><polygon fill="#FFFFFF" points="480,474 581.6,445.9 582.4,437.5 594.1,306.7 595.3,293.4 581.9,293.4 480,293.4 479.8,293.4 479.8,343 480,343 541,343 535.2,407.4 480,422.4 479.8,422.4 479.8,422.4 479.8,474.1"/><polygon fill="#FFFFFF" points="479.8,242.4 479.8,242.5 480,242.5 599.6,242.5 599.8,242.5 600.8,231.3 603.1,206.2 604.2,192.8 480,192.8 479.8,192.8 479.8,223.7"/></g></g></g></svg>
+
+##### Data URI
+
+Data URIs provide a way to include a file, such as an image, inline by setting
+the src of an <code>img</code> element as a Base64 encoded string using the
+following format:
+
+
+```html
+<img src="data:image/svg+xml;base64,[data]">
+```
+
+
+The start of the code for the HTML5 logo above looks like this:
+
+```html
+<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
+BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
+```
+
+
+(The full version is over 5000 characters in length!)
+
+Drag 'n' drop tool such as
+[jpillora.com/base64-encoder](https://jpillora.com/base64-encoder) are
+available to convert binary files such as images to Data URIs. Just like SVGs,
+Data URIs are [well supported](http://caniuse.com/datauri) on mobile and
+desktop browsers.
+
+##### Inlining in CSS
+
+Data URIs and SVGs can also be inlined in CSS&mdash;and this is supported on
+both mobile and desktop. Here are two identical-looking images implemented as
+background images in CSS; one Data URI, one SVG:
+
+<style>
+  .side-by-side {
+    display: inline-block;
+    margin: 0 20px 0 0;
+    width: 45%;
+  }
+
+  span#data_uri {
+    background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%22396.74px%22%20height%3D%22560px%22%20viewBox%3D%22281.63%200%20396.74%20560%22%20enable-background%3D%22new%20281.63%200%20396.74%20560%22%20xml%3Aspace%3D%22preserve%22%0D%0A%09%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cg%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23E44D26%22%20points%3D%22409.737%2C242.502%20414.276%2C293.362%20479.828%2C293.362%20480%2C293.362%20480%2C242.502%20479.828%2C242.502%20%09%09%09%0D%0A%09%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpath%20fill%3D%22%23E44D26%22%20d%3D%22M281.63%2C110.053l36.106%2C404.968L479.757%2C560l162.47-45.042l36.144-404.905H281.63z%20M611.283%2C489.176%0D%0A%09%09%09%09L480%2C525.572V474.03l-0.229%2C0.063L378.031%2C445.85l-6.958-77.985h22.98h26.879l3.536%2C39.612l55.315%2C14.937l0.046-0.013v-0.004%0D%0A%09%09%09%09L480%2C422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283%2C489.176z%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23F16529%22%20points%3D%22480%2C192.833%20604.247%2C192.833%20603.059%2C206.159%20600.796%2C231.338%20599.8%2C242.502%20599.64%2C242.502%20%0D%0A%09%09%09%09480%2C242.502%20480%2C293.362%20581.896%2C293.362%20595.28%2C293.362%20594.068%2C306.699%20582.396%2C437.458%20581.649%2C445.85%20480%2C474.021%20%0D%0A%09%09%09%09480%2C474.03%20480%2C525.572%20611.283%2C489.176%20642.17%2C143.166%20480%2C143.166%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23F16529%22%20points%3D%22540.988%2C343.029%20480%2C343.029%20480%2C422.35%20535.224%2C407.445%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23EBEBEB%22%20points%3D%22414.276%2C293.362%20409.737%2C242.502%20479.828%2C242.502%20479.828%2C242.38%20479.828%2C223.682%20%0D%0A%09%09%09%09479.828%2C192.833%20355.457%2C192.833%20356.646%2C206.159%20368.853%2C343.029%20479.828%2C343.029%20479.828%2C293.362%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23EBEBEB%22%20points%3D%22479.828%2C474.069%20479.828%2C422.4%20479.782%2C422.413%20424.467%2C407.477%20420.931%2C367.864%20%0D%0A%09%09%09%09394.052%2C367.864%20371.072%2C367.864%20378.031%2C445.85%20479.771%2C474.094%20480%2C474.03%20480%2C474.021%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22343.784%2C50.229%20366.874%2C50.229%20366.874%2C75.517%20392.114%2C75.517%20392.114%2C0%20366.873%2C0%20366.873%2C24.938%20%0D%0A%09%09%09%09343.783%2C24.938%20343.783%2C0%20318.544%2C0%20318.544%2C75.517%20343.784%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22425.307%2C25.042%20425.307%2C75.517%20450.549%2C75.517%20450.549%2C25.042%20472.779%2C25.042%20472.779%2C0%20403.085%2C0%20%0D%0A%09%09%09%09403.085%2C25.042%20425.306%2C25.042%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22508.537%2C38.086%20525.914%2C64.937%20526.349%2C64.937%20543.714%2C38.086%20543.714%2C75.517%20568.851%2C75.517%20568.851%2C0%20%0D%0A%09%09%09%09542.522%2C0%20526.349%2C26.534%20510.159%2C0%20483.84%2C0%20483.84%2C75.517%20508.537%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22642.156%2C50.555%20606.66%2C50.555%20606.66%2C0%20581.412%2C0%20581.412%2C75.517%20642.156%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%22480%2C474.021%20581.649%2C445.85%20582.396%2C437.458%20594.068%2C306.699%20595.28%2C293.362%20581.896%2C293.362%20%0D%0A%09%09%09%09480%2C293.362%20479.828%2C293.362%20479.828%2C343.029%20480%2C343.029%20540.988%2C343.029%20535.224%2C407.445%20480%2C422.35%20479.828%2C422.396%20%0D%0A%09%09%09%09479.828%2C422.4%20479.828%2C474.069%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%22479.828%2C242.38%20479.828%2C242.502%20480%2C242.502%20599.64%2C242.502%20599.8%2C242.502%20600.796%2C231.338%20%0D%0A%09%09%09%09603.059%2C206.159%20604.247%2C192.833%20480%2C192.833%20479.828%2C192.833%20479.828%2C223.682%20%09%09%09%22%2F%3E%0D%0A%09%09%3C%2Fg%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A) no-repeat;
+    background-size: cover;
+    height: 484px;
+  }
+
+  span#svg {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='50%' height='560px' viewBox='281.63 0 396.74 560' enable-background='new 281.63 0 396.74 560' xml:space='preserve'><g><g><g><polygon fill='#E44D26' points='409.7,242.5 414.3,293.4 479.8,293.4 480,293.4 480,242.5 479.8,242.5'/><path fill='#E44D26' d='M281.63 110.053l36.106 404.968L479.757 560l162.47-45.042l36.144-404.905H281.63z M611.283 489.2 L480 525.572V474.03l-0.229 0.063L378.031 445.85l-6.958-77.985h22.98h26.879l3.536 39.612l55.315 14.937l0.046-0.013v-0.004 L480 422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283 489.176z'/><polygon fill='#F16529' points='480,192.8 604.2,192.8 603.1,206.2 600.8,231.3 599.8,242.5 599.6,242.5 480,242.5 480,293.4 581.9,293.4 595.3,293.4 594.1,306.7 582.4,437.5 581.6,445.9 480,474 480,474 480,525.6 611.3,489.2 642.2,143.2 480,143.2'/><polygon fill='#F16529' points='541,343 480,343 480,422.4 535.2,407.4'/><polygon fill='#EBEBEB' points='414.3,293.4 409.7,242.5 479.8,242.5 479.8,242.4 479.8,223.7 479.8,192.8 355.5,192.8 356.6,206.2 368.9,343 479.8,343 479.8,293.4'/><polygon fill='#EBEBEB' points='479.8,474.1 479.8,422.4 479.8,422.4 424.5,407.5 420.9,367.9 394.1,367.9 371.1,367.9 378,445.9 479.8,474.1 480,474 480,474'/><polygon points='343.8,50.2 366.9,50.2 366.9,75.5 392.1,75.5 392.1,0 366.9,0 366.9,24.9 343.8,24.9 343.8,0 318.5,0 318.5,75.5 343.8,75.5'/><polygon points='425.3,25 425.3,75.5 450.5,75.5 450.5,25 472.8,25 472.8,0 403.1,0 403.1,25 425.3,25'/><polygon points='508.5,38.1 525.9,64.9 526.3,64.9 543.7,38.1 543.7,75.5 568.9,75.5 568.9,0 542.5,0 526.3,26.5 510.2,0 483.8,0 483.8,75.5 508.5,75.5'/><polygon points='642.2,50.6 606.7,50.6 606.7,0 581.4,0 581.4,75.5 642.2,75.5'/><polygon fill='#FFFFFF' points='480,474 581.6,445.9 582.4,437.5 594.1,306.7 595.3,293.4 581.9,293.4 480,293.4 479.8,293.4 479.8,343 480,343 541,343 535.2,407.4 480,422.4 479.8,422.4 479.8,422.4 479.8,474.1'/><polygon fill='#FFFFFF' points='479.8,242.4 479.8,242.5 480,242.5 599.6,242.5 599.8,242.5 600.8,231.3 603.1,206.2 604.2,192.8 480,192.8 479.8,192.8 479.8,223.7'/></g></g></g></svg>") no-repeat;
+    background-size: cover;
+    height: 484px;
+  }
+</style>
+
+<span class="side-by-side" id="data_uri"></span>
+<span class="side-by-side" id="svg"></span>
+
+
+##### Inlining pros & cons
+
+Inline code for images can be verbose&mdash;especially Data URIs&mdash;so why
+would you want to use it? To reduce HTTP requests! SVGs and Data URIs can enable
+an entire web page, including images, CSS and JavaScript, to be retrieved with
+one single request.
+
+On the downside:
+
+* On mobile, Data URIs can be significantly slower
+  to display on mobile than images from an external `src`.
+* Data URIs can considerably increase the size of an HTML request.
+* They add complexity to your markup and your workflow.
+* The Data URI format is considerably bigger than binary (up to 30%) and
+  therefore doesn't reduce total download size.
+* Data URIs cannot be cached, so must be downloaded for every page they're used on.
+* They're not supported in IE 6 and 7, incomplete support in IE8.
+* With HTTP/2, reducing the number of asset requests will become less of a priority.
+
+As with all things responsive, you need to test what works best. Use developer
+tools to measure download file size, the number of requests, and the total
+latency. Data URIs can sometimes be useful for raster images&mdash;for example,
+on a homepage that only has one or two photos that aren't used elsewhere. If you
+need to inline vector images, SVG is a much better option.
+
+
+
+## Images in CSS
+
+The CSS `background` property is a powerful tool for adding complex images
+to elements, making it easy to add multiple images, and causing them to repeat,
+and more.  When combined with media queries, the background property becomes
+even more powerful, enabling conditional image loading based on screen
+resolution, viewport size, and more.
+
+
+### Summary
+- Use the best image for the characteristics of the display, consider screen
+  size, device resolution, and page layout.
+- Change the `background-image` property in CSS for high DPI displays using
+  media queries with `min-resolution` and `-webkit-min-device-pixel-ratio`.
+- Use srcset to provide high resolution images in addition to the 1x image in
+  markup.
+- Consider the performance costs when using JavaScript image replacement
+  techniques or when serving highly compressed high resolution images to
+  lower resolution devices.
+
+
+### Use media queries for conditional image loading or art direction
+
+Media queries not only affect the page layout; you can also use them to
+conditionally load images or to provide art direction depending on the viewport
+width.
+
+For example, in the sample below, on smaller screens only `small.png` is
+downloaded and applied to the content `div`, while on larger screens
+`background-image: url(body.png)` is applied to the body and `background-image:
+url(large.png)` is applied to the content `div`.
+
+```css
+.example {
+  height: 400px;
+  background-image: url(small.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position-x: center;
+}
+
+@media (min-width: 500px) {
+  body {
+    background-image: url(body.png);
+  }
+  .example {
+    background-image: url(large.png);
+  }
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/conditional-mq.html)
+
+### Use image-set to provide high res images
+
+The `image-set()` function in CSS enhances the behavior `background` property,
+making it easy to provide multiple image files for different device
+characteristics.  This allows the browser to choose the best image depending on
+the characteristics of the device, for example using a 2x image on a 2x display,
+or a 1x image on a 2x device when on a limited bandwidth network.
+
+
+```css
+background-image: image-set(
+    url(icon1x.jpg) 1x,
+    url(icon2x.jpg) 2x
+);
+```
+
+
+In addition to loading the correct image, the browser also scales it
+accordingly. In other words, the browser assumes that 2x images are twice as
+large as 1x images, and so scales the 2x image down by a factor of 2, so
+that the image appears to be the same size on the page.
+
+Support for `image-set()` is still new and is only supported in Chrome and
+Safari with the `-webkit` vendor prefix.  Take care to include a
+fallback image for when `image-set()` is not supported; for example:
+
+
+```css
+.sample {
+  width: 128px;
+  height: 128px;
+  background-image: url(icon1x.png);
+  background-image: -webkit-image-set(
+    url(icon1x.png) 1x,
+    url(icon2x.png) 2x
+  );
+  background-image: image-set(
+    url(icon1x.png) 1x,
+    url(icon2x.png) 2x
+  );
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/image-set.html)
+
+The above loads the appropriate asset in browsers that support image-set;
+otherwise it falls back to the 1x asset. The obvious caveat is that while
+`image-set()` browser support is low, most browsers get the 1x asset.
+
+### Use media queries to provide high res images or art direction
+
+Media queries can create rules based on the
+[device pixel ratio](http://www.html5rocks.com/en/mobile/high-dpi/#toc-bg),
+making it possible to specify different images for 2x versus 1x displays.
+
+
+```css
+@media (min-resolution: 2dppx),
+(-webkit-min-device-pixel-ratio: 2)
+{
+    /* High dpi styles & resources here */
+}
+```
+
+
+Chrome, Firefox, and Opera all support the standard `(min-resolution: 2dppx)`,
+while the Safari and Android browsers both require the older vendor prefixed
+syntax without the `dppx` unit.  Remember, these styles are only loaded if the
+device matches the media query, and you must specify styles for the base case.
+This also provides the benefit of ensuring something is rendered if the browser
+doesn't support resolution-specific media queries.
+
+```css
+.sample {
+  width: 128px;
+  height: 128px;
+  background-image: url(icon1x.png);
+}
+
+@media (min-resolution: 2dppx), /* Standard syntax */
+(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
+{
+  .sample {
+    background-size: contain;
+    background-image: url(icon2x.png);
+  }
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media-query-dppx.html)
+
+You can also use the min-width syntax to display alternative images depending on
+the viewport size.  This technique has the advantage that the image is not
+downloaded if the media query doesn't match.  For example, `bg.png` is only
+downloaded and applied to the `body` if the browser width is 500px or greater:
+
+
+```css
+@media (min-width: 500px) {
+    body {
+    background-image: url(bg.png);
+    }
+}
+```
+
+
+## Use SVG for icons
+
+When adding icons to your page, use SVG icons where possible or in some
+cases, unicode characters.
+
+
+### Summary
+- Use SVG or unicode for icons instead of raster images.
+
+
+### Replace simple icons with unicode
+
+Many fonts include support for the myriad of unicode glyphs, which can be used
+instead of images. Unlike images, unicode fonts scale well and look good no
+matter how small or large they appear on screen.
+
+Beyond the normal character set, unicode may include symbols for
+arrows (&#8592;), math operators (&#8730;), geometric shapes
+(&#9733;), control pictures (&#9654;), music notation (&#9836;),
+Greek letters (&#937;), even chess pieces (&#9822;).
+
+Including a unicode character is done in the same way named entities are:
+`&#XXXX`, where `XXXX` represents the unicode character number. For example:
+
+```html
+You're a super &#9733;
+```
+
+You're a super &#9733;
+
+### Replace complex icons with SVG
+
+For more complex icon requirements, SVG icons are generally lightweight,
+easy to use, and can be styled with CSS. SVG have a number of advantages over
+raster images:
+
+* They're vector graphics that can be infinitely scaled.
+* CSS effects such as color, shadowing, transparency, and animations are
+  straightforward.
+* SVG images can be inlined right in the document.
+* They are semantic.
+* They provide better accessibility with the appropriate attributes.
+
+
+```html
+With SVG icons, you can either add icons using inline SVG, like
+this checkmark:
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink"
+       width="32" height="32" viewBox="0 0 32 32">
+    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
+  </svg>
+or by using an image tag, like this credit card icon:
+<img src="credit.svg">.
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-svg.html)
+
+### Use icon fonts with caution
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oHSWVw7IvaO8QFdrKzmK.png", alt="Example of a page that uses FontAwesome for its font icons.", width="320", height="568", class='float-right' %}
+  <figcaption>
+    <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-font.html" target="_blank" class="external">
+      Example of a page that uses FontAwesome for its font icons.
+    </a>
+  </figcaption>
+</figure>
+
+Icon fonts are popular, and can be easy to use, but have some drawbacks
+compared to SVG icons:
+
+* They're vector graphics that can be infinitely scaled, but may be
+  anti-aliased resulting in icons that aren’t as sharp as expected.
+* Limited styling with CSS.
+* Pixel perfect positioning can be difficult, depending on line-height,
+  letter spacing, etc.
+* They aren't semantic, and can be difficult to use with screen readers or
+  other assistive technology.
+* Unless properly scoped, they can result in a large file size for only using a
+  small subset of the icons available.
+
+```html
+With Font Awesome, you can either add icons by using a unicode
+entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
+or by adding special classes to an &lt;i&gt; element like the CSS3
+logo (<i class="fa fa-css3"></i>).
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-font.html)
+
+There are hundreds of free and paid icon fonts available including [Font
+Awesome](https://fortawesome.github.io/Font-Awesome/),
+[Pictos](http://pictos.cc/), and [Glyphicons](https://glyphicons.com/).
+
+Be sure to balance the weight of the additional HTTP request and file size with
+the need for the icons. For example, if you only need a handful of icons, it
+may be better to use an image or an image sprite.
+
+
+## Optimize images for performance
+
+Images often account for most of the downloaded bytes and also often occupy
+a significant amount of the visual space on the page. As a result, optimizing
+images can often yield some of the largest byte savings and performance
+improvements for your website: the fewer bytes the browser has to download,
+the less competition there is for client's bandwidth and the faster the
+browser can download and display all the assets.
+
+
+### Summary
+- Don't just randomly choose an image format&mdash;understand the different
+  formats available and use the format best suited.
+- Include image optimization and compression tools into your workflow to reduce
+  file sizes.
+- Reduce the number of http requests by placing frequently used images into
+  image sprites.
+- To improve the initial page load time and reduce the initial page weight,
+  consider loading images only after they’ve scrolled into view.
+
+
+### Choose the right format
+
+There are two types of images to consider:
+[vector images](https://en.wikipedia.org/wiki/Vector_graphics)
+and [raster images](https://en.wikipedia.org/wiki/Raster_graphics).
+For raster images, you also need to choose the right compression format,
+for example: `GIF`, `PNG`, `JPG`.
+
+**Raster images**, like photographs and other images, are represented as a grid
+of individual dots or pixels. Raster images typically come from a camera or
+scanner, or can be created in the browser with the `canvas` element.  As the
+image size gets larger, so does the file size.  When scaled larger than their
+original size, raster images become blurry because the browser needs to guess
+how to fill in the missing pixels.
+
+**Vector images**, such as logos and line art, are defined by a set of curves,
+lines, shapes, and fill colors. Vector images are created with programs like
+Adobe Illustrator or Inkscape and saved to a vector format like
+[`SVG`](https://css-tricks.com/using-svg/).  Because vector images are built on
+simple primitives, they can be scaled without any loss in quality or
+change in file size.
+
+When choosing the appropriate format, it is important to consider both the
+origin of the image (raster or vector), and the content (colors, animation,
+text, etc). No one format fits all image types, and each has its own strengths
+and weaknesses.
+
+Start with these guidelines when choosing the appropriate format:
+
+* Use `JPG` for photographic images.
+* Use `SVG` for vector art and solid color graphics such as logos and line art.
+  If vector art is unavailable, try `WebP` or `PNG`.
+* Use `PNG` rather than `GIF` as it allows for more colors and offers better
+  compression ratios.
+* For longer animations consider using `<video>`, which provides better image
+  quality and gives the user control over playback.
+
+### Reduce the file size
+
+You can reduce image file size considerably by "post-processing" the images
+after saving. There are a number of tools for image compression&mdash;lossy and
+lossless, online, GUI, command line.  Where possible, it's best to try
+automating image optimization so that it's a built-in to your
+workflow.
+
+Several tools are available that perform further, lossless compression on `JPG`
+and `PNG` files with no effect on image quality. For `JPG`, try
+[jpegtran](http://jpegclub.org/) or
+[jpegoptim](http://freshmeat.net/projects/jpegoptim/) (available on Linux only;
+run with the --strip-all option). For `PNG`, try
+[OptiPNG](http://optipng.sourceforge.net/) or
+[PNGOUT](http://www.advsys.net/ken/util/pngout.htm).
+
+### Use image sprites
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lIYXu84fRjlUCkSRomTQ.png", alt="Image sprite sheet used in example", width="190", height="352", class="float-right" %}
+</figure>
+
+CSS spriting is a technique whereby a number of images are combined into a single
+"sprite sheet" image. You can then use individual images by specifying the
+background image for an element (the sprite sheet) plus an offset to display the
+correct part.
+
+
+```css
+.sprite-sheet {
+  background-image: url(sprite-sheet.png);
+  width: 40px;
+  height: 25px;
+}
+
+.google-logo {
+  width: 125px;
+  height: 45px;
+  background-position: -190px -170px;
+}
+
+.gmail {
+  background-position: -150px -210px;
+}
+
+.maps {
+  height: 40px;
+  background-position: -120px -165px;
+}
+```
+
+[Try it](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/image-sprite.html)
+
+Spriting has the advantage of reducing the number of downloads required to get
+multiple images, while still enabling caching.
+
+### Consider lazy loading
+
+Lazy loading can significantly speed up loading on long pages that include many
+images below the fold by loading them either as needed or when the primary
+content has finished loading and rendering.  In addition to performance
+improvements, using lazy loading can create infinite scrolling experiences.
+
+Be careful when creating infinite scrolling pages&mdash;because content is loaded as
+it becomes visible, search engines may never see that content.  In addition,
+users who are looking for information they expect to see in the footer,
+never see the footer because new content is always loaded.
+
+
+
+## Avoid images completely
+
+Sometimes the best image isn't actually an image at all. Whenever possible, use
+the native capabilities of the browser to provide the same or similar
+functionality.  Browsers generate visuals that would have previously required
+images.   This means that browsers no longer need to download separate image
+files thus preventing awkwardly scaled images.  You can use unicode or special
+icon fonts to render icons.
+
+### Place text in markup instead of embedded in images
+
+Wherever possible, text should be text and not embedded into images. For
+example, using images for headlines or placing contact information&mdash;like
+phone numbers or addresses&mdash;directly into images prevents users from
+copying and pasting the information; it makes the information inaccessible for
+screen readers, and it isn't responsive.  Instead, place the text in your markup
+and if necessary use webfonts to achieve the style you need.
+
+### Use CSS to replace images
+
+Modern browsers can use CSS features to create styles that would previously have
+required images.  For example: complex gradients can be created using the
+`background` property, shadows can be created using `box-shadow`, and rounded
+corners can be added with the `border-radius` property.
+
+<style>
+  p#noImage {
+    margin-top: 2em;
+    padding: 1em;
+    padding-bottom: 2em;
+    color: white;
+    border-radius: 5px;
+    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
+    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
+  }
+
+  p#noImage code {
+    color: rgb(64, 64, 64);
+  }
+</style>
+
+<p id="noImage">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit
+amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas
+nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus
+dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare
+fringilla dui non vehicula. In hac habitasse platea dictumst. Donec
+ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
+</p>
+
+
+```css
+<style>
+    div#noImage {
+    color: white;
+    border-radius: 5px;
+    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
+    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
+    }
+</style>
+```
+
+Keep in mind that using these techniques does require rendering cycles, which
+can be significant on mobile.  If over-used, you'll lose any benefit you may
+have gained and it may hinder performance.
diff --git a/src/site/content/en/blog/responsive-web-design-basics/devtools-large-2.png b/src/site/content/en/blog/responsive-web-design-basics/devtools-large-2.png
deleted file mode 100644
index 98185fb09a7..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/devtools-large-2.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/devtools-large.png b/src/site/content/en/blog/responsive-web-design-basics/devtools-large.png
deleted file mode 100644
index 98185fb09a7..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/devtools-large.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/devtools-small-2.png b/src/site/content/en/blog/responsive-web-design-basics/devtools-small-2.png
deleted file mode 100644
index 7c49b81446c..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/devtools-small-2.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/devtools-small.png b/src/site/content/en/blog/responsive-web-design-basics/devtools-small.png
deleted file mode 100644
index 7c49b81446c..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/devtools-small.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/fixed-width-layout.jpg b/src/site/content/en/blog/responsive-web-design-basics/fixed-width-layout.jpg
deleted file mode 100644
index ed70e4f4dd8..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/fixed-width-layout.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/index.md b/src/site/content/en/blog/responsive-web-design-basics/index.md
index e3e41ceabe9..0b180efe885 100644
--- a/src/site/content/en/blog/responsive-web-design-basics/index.md
+++ b/src/site/content/en/blog/responsive-web-design-basics/index.md
@@ -4,7 +4,7 @@ subhead: How to create sites which respond to the needs and capabilities of the
 description: |
   How to create sites which respond to the needs and capabilities of the device they are viewed on.
 date: 2019-02-12
-updated: 2020-05-14
+updated: 2022-09-22
 authors:
  - petelepage
  - rachelandrew
@@ -16,22 +16,17 @@ tags:
  - ux
 ---
 
-{# TODO(kayce): Remove this hard-coded ToC once #1983 lands. #}
-
-* [Set the viewport](#viewport)
-* [Size content to the viewport](#size-content)
-* [Use CSS media queries for responsiveness](#media-queries)
-* [How to choose breakpoints](#breakpoints)
-* [View media query breakpoints in Chrome DevTools](#devtools)
+{% Aside %}
+Take a look at our complete course on Responsive Web Design—[Learn Design](/learn/design/).
+{% endAside %}
 
 The use of mobile devices to surf the web continues to grow at an astronomical pace, and these devices are often constrained by display size and require a different approach to how content is laid out on the screen.
 
 Responsive web design, originally defined by [Ethan Marcotte in A List Apart](http://alistapart.com/article/responsive-web-design/), responds to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device. For example, on a phone users would see content shown in a single column view; a tablet might show the same content in two columns.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/responsive-web-design-basics/resize.mp4" type="video/mp4">
-  </video>
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true, alt="A video of a design moving from a narrow viewport to a wider one, showing how the design responds to the different screen real estate." %}
+  <figcaption>In this video the design moves from a narrow to a wide viewport, responding to the available screen real estate.</figcaption>
 </figure>
 
 A multitude of different screen sizes exist across phones, "phablets," tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it's important that your site can adapt to any screen size, today or in the future. In addition, devices have different features with which we interact with them. For example some of your visitors will be using a touchscreen. Modern responsive design considers all of these things to optimize the experience for everyone.
@@ -67,16 +62,16 @@ the screen's width in device-independent pixels. A device (or density) independe
 content to match different screen sizes, whether rendered on a small mobile
 phone or a large desktop monitor.
 
-<figure class="w-figure">
-  <img src="./without-vp-meta.png" width="500" alt="Screenshot of a page with the text hard to read as it is very zoomed out">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="Screenshot of a page with the text hard to read as it is very zoomed out.", width="500", height="640" %}
+  <figcaption>
     An example of how the page loads in a device without the viewport meta tag. <a href="https://without-vp-meta.glitch.me/">See this example on Glitch</a>.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="./with-vp-meta.png" width="500" alt="Screenshot of the same page with the text at a size that can be read">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="Screenshot of the same page with the text at a size that can be read.", width="500", height="888" %}
+  <figcaption>
     An example of how the page loads in a device with the viewport meta tag. <a href="https://with-vp-meta.glitch.me/">See this example on Glitch</a>.
   </figcaption>
 </figure>
@@ -93,7 +88,7 @@ allows the page to take advantage of the full landscape width.
   use a comma to separate attributes.
 {% endAside %}
 
-The [Does not have a `<meta name="viewport">` tag with `width` or `initial-scale`](/viewport/)
+The [Does not have a `<meta name="viewport">` tag with `width` or `initial-scale`](https://developer.chrome.com/docs/lighthouse/pwa/viewport/)
 Lighthouse audit can help you automate the process of making sure that your HTML documents are using the viewport meta tag correctly.
 
 ### Ensure an accessible viewport {: #accessible-viewport }
@@ -123,7 +118,7 @@ can cause the viewport to scroll horizontally.
 You should adjust this content to fit within the width of the viewport,
 so that the user does not need to scroll horizontally.
 
-The [Content is not sized correctly for the viewport](/content-width/)
+The [Content is not sized correctly for the viewport](https://developer.chrome.com/docs/lighthouse/pwa/content-width/)
 Lighthouse audit can help you automate the process of detecting overflowing content.
 
 ### Images {: #images }
@@ -163,9 +158,9 @@ In the example below, you can see a two-column layout with floated elements, siz
 Once the viewport becomes smaller than the total width of the columns, we have to scroll horizontally
 to see the content.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./fixed-width-layout.jpg" alt="Screenshot of a two-column layout with most of the second column outside the viewport">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="Screenshot of a two-column layout with most of the second column outside the viewport", width="800", height="504" %}
+  <figcaption>
     A floated layout using pixels. <a href="https://layout-floats-px.glitch.me/">See this example on Glitch</a>.
   </figcaption>
 </figure>
@@ -202,7 +197,7 @@ or wrapped onto multiple rows as the available space decreases.
   height: 220
 } %}
 
-[Read more about Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+[Read more about Flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox).
 
 #### CSS Grid Layout {: #grid }
 
@@ -229,7 +224,7 @@ with a minimum size of `200px`.
 
 {% Glitch 'grid-as-many-as-fit' %}
 
-[Read more about CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
+[Read more about CSS Grid Layout](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
 
 #### Multiple-column layout {: #multicol }
 
@@ -242,7 +237,7 @@ In the demo below, you can see that columns are added if there is room for anoth
   path: 'style.css'
 } %}
 
-[Read more about Multicol](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+[Read more about Multicol](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
 
 ## Use CSS media queries for responsiveness {: #media-queries }
 
@@ -279,7 +274,7 @@ Alternatively, you could include print styles within your main stylesheet using
 {% Aside 'note' %}
 It is also possible to include separate stylesheets in your main CSS file using the `@import` syntax,
 `@import url(print.css) print;`, however this use is not recommended for performance reasons.
-See [Avoid CSS imports](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports) for more details.
+See [Avoid CSS imports](/critical-rendering-path-page-speed-rules-and-recommendations/#avoid-css-imports) for more details.
 {% endAside %}
 
 For responsive web design, we are typically querying the _features_ of the device
@@ -305,10 +300,10 @@ and we can test for the following things.
 
 All of these features have excellent browser support,
 for more details including browser support information see
-[width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width),
-[height](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height),
-[orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation), and
-[aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio) on MDN.
+[width](https://developer.mozilla.org/docs/Web/CSS/@media/width),
+[height](https://developer.mozilla.org/docs/Web/CSS/@media/height),
+[orientation](https://developer.mozilla.org/docs/Web/CSS/@media/orientation), and
+[aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio) on MDN.
 
 {% Aside 'note' %}
 The specification did include tests for `device-width` and `device-height`. These have been deprecated and should be avoided.
@@ -336,10 +331,10 @@ such as a regular desktop computer and a phone or tablet.
 {% Glitch 'media-query-pointer' %}
 
 These newer features have good support in all modern browsers. Find out more on the MDN pages for
-[hover](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover),
-[any-hover](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover),
-[pointer](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer),
-[any-pointer](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer).
+[hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover),
+[any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover),
+[pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer),
+[any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer).
 
 #### Using `any-hover` and `any-pointer`
 
@@ -368,9 +363,9 @@ and maintain the least number of breakpoints possible.
 Let's work through the example we saw at the beginning: the weather forecast.
 The first step is to make the forecast look good on a small screen.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./weather-1-2x.png" width="400" alt="Screenshot of a weather app at a mobile width">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="Screenshot of a weather app at a mobile width", width="400", height="667" %}
+  <figcaption>
     The app at a narrow width.
   </figcaption>
 </figure>
@@ -379,9 +374,9 @@ Next, resize the browser until there is too much white space between the element
 and the forecast simply doesn't look as good.
 The decision is somewhat subjective, but above `600px` is certainly too wide.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./weather-2-2x.png" width="400" alt="Screenshot of a weather app with wide gaps between items">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="Screenshot of a weather app with wide gaps between items", width="400", height="240" %}
+  <figcaption>
     The app at a point where we feel we should tweak the design.
   </figcaption>
 </figure>
@@ -465,16 +460,16 @@ Classic readability theory suggests that an ideal column should contain 70 to 80
 Thus, each time the width of a text block grows past about 10 words,
 consider adding a breakpoint.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./readability-narrow.jpg" width="400" alt="Screenshot of a a page of text on a mobile device">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="Screenshot of a a page of text on a mobile device", width="400", height="488" %}
+  <figcaption>
     The text as read on a mobile device.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./readability-wide.jpg" alt="Screenshot of a a page of text on a desktop browser">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="Screenshot of a a page of text on a desktop browser", width="800", height="377" %}
+  <figcaption>
     The text as read on a desktop browser with a breakpoint added to constrain the line length.
   </figcaption>
 </figure>
@@ -516,28 +511,28 @@ You could resize your browser window to trigger the breakpoints,
 but Chrome DevTools has a built-in feature that makes it easy to see how a page looks
 under different breakpoints.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./devtools-large.png" alt="Screenshot of DevTools with our weather app open and a width of 822 pixels selected.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="Screenshot of DevTools with our weather app open and a width of 822 pixels selected.", width="800", height="522" %}
+  <figcaption>
     DevTools showing the weather app as it looks at a wider viewport size.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./devtools-small.png" alt="Screenshot of DevTools with our weather app open and a width of 436 pixels selected.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="Screenshot of DevTools with our weather app open and a width of 436 pixels selected.", width="800", height="521" %}
+  <figcaption>
     DevTools showing the weather app as it looks at a narrower viewport size.
   </figcaption>
 </figure>
 
 To view your page under different breakpoints:
 
-[Open DevTools](https://developers.google.com/web/tools/chrome-devtools#open)
-and then turn on [Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode#toggle).
-This opens in [responsive mode](https://developers.google.com/web/tools/chrome-devtools/device-mode#responsive) by default.
+[Open DevTools](https://developer.chrome.com/docs/devtools/open/)
+and then turn on [Device Mode](https://developer.chrome.com/docs/devtools/device-mode/#toggle).
+This opens in [responsive mode](https://developer.chrome.com/docs/devtools/device-mode/#responsive) by default.
 
 To see your media queries, open the Device Mode menu and select
-[Show media queries](https://developers.google.com/web/tools/chrome-devtools/device-mode#queries)
+[Show media queries](https://developer.chrome.com/docs/devtools/device-mode/#queries)
 to display your breakpoints as colored bars above your page.
 
 Click on one of the bars to view your page while that media query is active.
diff --git a/src/site/content/en/blog/responsive-web-design-basics/readability-narrow.jpg b/src/site/content/en/blog/responsive-web-design-basics/readability-narrow.jpg
deleted file mode 100644
index c87f4d8e765..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/readability-narrow.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/readability-wide.jpg b/src/site/content/en/blog/responsive-web-design-basics/readability-wide.jpg
deleted file mode 100644
index 2d97ad18621..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/readability-wide.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/resize.mp4 b/src/site/content/en/blog/responsive-web-design-basics/resize.mp4
deleted file mode 100644
index f9565a45e84..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/resize.mp4 and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/resize.webm b/src/site/content/en/blog/responsive-web-design-basics/resize.webm
deleted file mode 100644
index 4e127af140e..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/resize.webm and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/weather-1-2x.png b/src/site/content/en/blog/responsive-web-design-basics/weather-1-2x.png
deleted file mode 100644
index 521139b701a..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/weather-1-2x.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/weather-2-2x.png b/src/site/content/en/blog/responsive-web-design-basics/weather-2-2x.png
deleted file mode 100644
index 13dddfccf88..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/weather-2-2x.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/weather-3-2x.png b/src/site/content/en/blog/responsive-web-design-basics/weather-3-2x.png
deleted file mode 100644
index 05144088589..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/weather-3-2x.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/weather-4-l-2x.png b/src/site/content/en/blog/responsive-web-design-basics/weather-4-l-2x.png
deleted file mode 100644
index 1941351b461..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/weather-4-l-2x.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/weather-4-r-2x.png b/src/site/content/en/blog/responsive-web-design-basics/weather-4-r-2x.png
deleted file mode 100644
index 28ae564d933..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/weather-4-r-2x.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/with-vp-meta.png b/src/site/content/en/blog/responsive-web-design-basics/with-vp-meta.png
deleted file mode 100644
index 6302a2b5351..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/with-vp-meta.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsive-web-design-basics/without-vp-meta.png b/src/site/content/en/blog/responsive-web-design-basics/without-vp-meta.png
deleted file mode 100644
index 87e57ed5434..00000000000
Binary files a/src/site/content/en/blog/responsive-web-design-basics/without-vp-meta.png and /dev/null differ
diff --git a/src/site/content/en/blog/responsiveness/index.md b/src/site/content/en/blog/responsiveness/index.md
new file mode 100644
index 00000000000..cf396dcfc4e
--- /dev/null
+++ b/src/site/content/en/blog/responsiveness/index.md
@@ -0,0 +1,310 @@
+---
+title: 'Feedback wanted: An experimental responsiveness metric'
+subhead: An update on our plans for measuring responsiveness on the web.
+description: An update on our plans for measuring responsiveness on the web.
+authors:
+  - hbsong
+date: 2021-11-03
+updated: 2022-05-11
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/GNWyQZ5l1uy1b7s5ursN.jpeg
+alt: Water droplet rippling outward
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+{% Aside 'important' %}
+This article was written during a period of time in which a new responsiveness metric was being developed to measure end-to-end latency on web pages. That new metric has been released, and is named [Interaction to Next Paint (INP)](/inp/).
+{% endAside %}
+
+Earlier this year, the Chrome Speed Metrics Team shared [some of the
+ideas](/better-responsiveness-metric/) we were considering for a
+new responsiveness metric. We want to design a metric that better captures the
+end-to-end latency of individual events and offers a more holistic picture of
+the overall responsiveness of a page throughout its lifetime.
+
+We've made a lot of progress on this metric in the last few months, and we
+wanted to share an update on how we plan to measure interaction latency as well
+as introduce a few specific aggregation options we're considering to quantify
+the overall responsiveness of a web page.
+
+We'd love to get [feedback](#feedback) from developers and site owners as to
+which of these options would be most representative of the overall input
+responsiveness of their pages.
+
+## Measure interaction latency
+
+As a review, the [First Input Delay (FID) metric captures the
+delay portion](/fid/#fid-in-detail) of input latency. That is, the time between
+when the user interacts with the page to the time when the event handlers are
+able to run.
+
+With this new metric we plan to expand that to capture the [full event
+duration](/better-responsiveness-metric/#capture-the-full-event-duration), from
+initial user input until the next frame is painted after all the event handlers
+have run.
+
+We also plan to measure
+[interactions](/better-responsiveness-metric/#group-events-into-interactions)
+rather than individual events. Interactions are groups of events that are
+dispatched as part of the same, logical user gesture (for example:
+`pointerdown`, `click`, `pointerup`).
+
+To measure the total interaction latency from a group of individual event
+durations, we are considering two potential approaches:
+
+- **Maximum event duration:** the interaction latency is equal to the largest
+  single event duration from any event in the interaction group.
+- **Total event duration:** the interaction latency is the sum of all event
+  durations, ignoring any overlap.
+
+As an example, the diagram below shows a _key press_ interaction that consists
+of a `keydown` and a `keyup` event. In this example there is a duration overlap
+between these two events. To measure the latency of the key press interaction,
+we could use `max(keydown duration, keyup duration)` or `sum(keydown duration, keyup duration) - duration overlap`:
+
+{% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/td8jMQBTjyR34ZO1QBvp.svg", alt="A
+diagram showing interaction latency based on event durations", width="800",
+height="424" %}
+
+There are pros and cons of each approach, and we'd like to collect more data and
+[feedback](#feedback) before finalizing a latency definition.
+
+{% Aside %}
+The event duration is meant to be the time from the event hardware timestamp
+to the time when the next paint is performed after the event is handled. But
+if the event doesn't cause any update, the duration will be the time from
+event hardware timestamp to the time when we are sure it will not cause any
+update.
+{% endAside %}
+
+{% Aside %}
+For keyboard interactions, we usually measure the `keydown` and `keyup`. But
+for IME, such as input methods for Chinese and Japanese, we measure the
+`input` events between a `compositionstart` and a `compositionend`.
+{% endAside %}
+
+## Aggregate all interactions per page
+
+Once we're able to measure the end-to-end latency of all interactions, the next
+step is to define an aggregate score for a page visit, which may contain more
+than one interaction.
+
+After exploring a number of options, we've narrowed our choices down to the
+strategies outlined in the following section, each of which we're currently
+collecting real-user data on in Chrome. We plan to publish the results of our
+findings once we've had time to collect sufficient data, but we're also looking
+for direct [feedback](#feedback) from site owners as to which strategy would
+most accurately reflect the interaction patterns on their pages.
+
+### Aggregation strategies options
+
+To help explain each of the following strategies, consider an example page visit
+that consists of four interactions:
+
+<div>
+  <table>
+    <tr>
+      <th>Interaction</th>
+      <th>Latency</th>
+    </tr>
+    <tr>
+      <td>Click</td>
+      <td>120 ms</td>
+    </tr>
+    <tr>
+      <td>Click</td>
+      <td>20 ms</td>
+    </tr>
+    <tr>
+      <td>Key press</td>
+      <td>60 ms</td>
+    </tr>
+    <tr>
+      <td>Key press</td>
+      <td>80 ms</td>
+    </tr>
+  </table>
+</div>
+
+#### Worst interaction latency
+
+The largest, individual interaction latency that occurred on a page. Given the
+example interactions listed above, the worst interaction latency would be 120
+ms.
+
+#### Budgets strategies
+
+[User experience
+research](https://www.tactuallabs.com/papers/howMuchFasterIsFastEnoughCHI15.pdf)
+suggests that users may not perceive latencies below certain thresholds as
+negative. Based on this research we're considering several budget strategies
+using on the following thresholds for each event type:
+
+<div>
+  <table>
+    <tr>
+      <th>Interaction type</th>
+      <th>Budget threshold</th>
+    </tr>
+    <tr>
+      <td>Click/tap</td>
+      <td>100 ms</td>
+    </tr>
+    <tr>
+      <td>Drag</td>
+      <td>100 ms</td>
+    </tr>
+    <tr>
+      <td>Keyboard</td>
+      <td>50 ms</td>
+    </tr>
+  </table>
+</div>
+
+Each of these strategies will only consider the latency that is more than the
+budget threshold per interaction. Using the example page visit above, the
+over-budget amounts would be as follows:
+
+<div>
+  <table>
+    <tr>
+      <th>Interaction</th>
+      <th>Latency</th>
+      <th>Latency over budget</th>
+    </tr>
+    <tr>
+      <td>Click
+    </td>
+      <td>120 ms</td>
+      <td>20 ms</td>
+    </tr>
+    <tr>
+      <td>Click
+    </td>
+      <td>20 ms</td>
+      <td>0 ms</td>
+    </tr>
+    <tr>
+      <td>Key press
+    </td>
+      <td>60 ms</td>
+      <td>10 ms</td>
+    </tr>
+    <tr>
+      <td>Key press
+    </td>
+      <td>80 ms</td>
+      <td>30 ms</td>
+    </tr>
+  </table>
+</div>
+
+#### Worst interaction latency over budget
+
+The largest single interaction latency over budget. Using the above example, the
+score would be `max(20, 0, 10, 30) = 30 ms`.
+
+#### Total interaction latency over budget
+
+The sum of all interaction latencies over budget. Using the above example, the
+score would be `(20 + 0 + 10 + 30) = 60 ms`.
+
+#### Average interaction latency over budget
+
+The total over-budget interaction latency divided by the total number of
+interactions. Using the above example, the score would be `(20 + 0 + 10 + 30) / 4 = 15 ms`.
+
+#### High quantile approximation
+
+As an alternative to computing the largest interaction latency over budget, we
+also considered using a high quantile approximation, which should be fairer to
+web pages that have a lot of interactions and may be more likely to have large
+outliers. We've identified two potential high-quantile approximation strategies
+we like:
+
+- **Option 1:** Keep track of the largest and second-largest interactions over
+  budget. After every 50 new interactions, drop the largest interaction from the
+  previous set of 50 and add the largest interaction from the current set of 50.
+  The final value will be largest remaining interaction over budget.
+- **Option 2:** Compute the largest 10 interactions over budget and choose a
+  value from that list depending on the total number of interactions. Given N
+  total interactions, select the (N / 50 + 1)th largest value, or the 10th value
+  for pages with more than 500 interactions.
+
+## Measure these options in JavaScript
+
+The following code example can be used to determine the values of the first
+three strategies presented above. Note that it's not yet possible to measure the
+total number of interactions on a page in JavaScript, so this example doesn't
+include the average interaction over budget strategy or the high
+quantile approximation strategies.
+
+```js
+const interactionMap = new Map();
+
+let worstLatency = 0;
+let worstLatencyOverBudget = 0;
+let totalLatencyOverBudget = 0;
+
+new PerformanceObserver((entries) => {
+  for (const entry of entries.getEntries()) {
+    // Ignore entries without an interaction ID.
+    if (entry.interactionId > 0) {
+      // Get the interaction for this entry, or create one if it doesn't exist.
+      let interaction = interactionMap.get(entry.interactionId);
+      if (!interaction) {
+        interaction = {latency: 0, entries: []};
+        interactionMap.set(entry.interactionId, interaction);
+      }
+      interaction.entries.push(entry);
+
+      const latency = Math.max(entry.duration, interaction.latency);
+      worstLatency = Math.max(worstLatency, latency);
+
+      const budget = entry.name.includes('key') ? 50 : 100;
+      const latencyOverBudget = Math.max(latency - budget, 0);
+      worstLatencyOverBudget = Math.max(
+        latencyOverBudget,
+        worstLatencyOverBudget,
+      );
+
+      if (latencyOverBudget) {
+        const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
+        totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
+      }
+
+      // Set the latency on the interaction so future events can reference.
+      interaction.latency = latency;
+
+      // Log the updated metric values.
+      console.log({
+        worstLatency,
+        worstLatencyOverBudget,
+        totalLatencyOverBudget,
+      });
+    }
+  }
+  // Set the `durationThreshold` to 50 to capture keyboard interactions
+  // that are over-budget (the default `durationThreshold` is 100).
+}).observe({type: 'event', buffered: true, durationThreshold: 50});
+```
+
+{% Aside 'caution' %}
+There are currently [a few
+bugs](https://bugs.chromium.org/p/chromium/issues/list?q=label:proj-responsiveness-bugs)
+in Chrome that affect accuracy of the reported interaction timestamps. These
+bugs have been fixed in version 98, so we recommend developers test these
+strategies in Chrome Canary to get the most accurate results.
+{% endAside %}
+
+## Feedback
+
+We want to encourage developers to try out these new responsiveness metrics on
+their sites, and let us know if you discover any issue.
+
+Email any general feedback on the approaches outlined here to the
+[web-vitals-feedback](https://groups.google.com/g/web-vitals-feedback) Google
+group with "[Responsiveness Metrics]" in the subject line. We're really looking
+forward to hearing what you think!
diff --git a/src/site/content/en/blog/roll-it/index.md b/src/site/content/en/blog/roll-it/index.md
new file mode 100644
index 00000000000..96ad3ef8bae
--- /dev/null
+++ b/src/site/content/en/blog/roll-it/index.md
@@ -0,0 +1,141 @@
+---
+layout: post
+title: Creating Roll It
+authors:
+  - justingitlin
+date: 2013-06-04
+tags:
+  - blog
+  - case-study
+---
+
+[Roll It](http://g.co/rollit) is a [Chrome Experiment](http://www.chromeexperiments.com/) that reimagines a classic boardwalk game using only the browser on your phone and computer. The browser on your phone lets you aim and roll the ball with a flick of your wrist, while the browser on your computer renders the real time graphics of the Roll It alley with WebGL and Canvas. The two devices communicate via Websockets. No apps. No downloads. No tokens. All you need is a modern browser.
+
+With Google Creative Lab's direction, [Legwork](http://www.legworkstudio.com/) developed the user experience, interfaces and game environment, then teamed up with development partner, [Mode Set](http://modeset.com/), to build Roll It. Over the duration of the project there were a number of unique challenges. This article walks through some of the techniques we used, tricks we discovered and lessons we learned while bringing Roll It to fruition.
+
+## 3D Workflow
+
+One of the struggles in the beginning was figuring out the best way to bring 3D models from our software to a web ready file format. After creating the assets inside [Cinema 4D](http://en.wikipedia.org/wiki/Cinema_4D), the models were simplified and converted to low-polygon meshes. Each mesh was given certain polygon selection tags to differentiate between parts of the object for coloring and texturing. We were then able to export as a Collada 1.5 (.dae) file and import into [Blender](http://www.blender.org/), an open source 3D program, in order to make compatible files for three.js. Once we ensured our models were imported correctly, we exported the mesh as a JSON file and the lighting was applied using code. Here's a more detailed look at the steps we took:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/wO5joNKsGBJ5RNU4CmTF.jpg", alt="Model the object inside C4D. Make sure the mesh normals are facing outwards.", width="640", height="360" %}
+<figcaption>Model the object inside C4D. Make sure the mesh normals are facing outwards. </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/v6kTsybppIgurgbL1r7h.jpg", alt="Using the polygon selection tool, create selection tags of the specific areas you wish to texture. Apply materials to each of the selection tags.", width="640", height="360" %}
+<figcaption>Using the polygon selection tool, create selection tags of the specific areas you wish to texture. Apply materials to each of the selection tags. </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pAoVytoYzW8lj2vdVcfk.jpg", alt="Export your mesh as a COLLADA 1.5 .dae file.", width="353", height="707" %}
+<figcaption>Export your mesh as a COLLADA 1.5 .dae file.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4yi5aKW20yvBwlCRgJ7E.jpg", alt="Make sure 'export 2D geometry' is checked. Exporting triangles is generally more widely supported across 3D environments on the code side, but has the downside of doubling your polygon count. The higher the polygon count, the more taxing the model will be on the computer's processor. So leave this checked off if you see slow performance.", width="449", height="409" %}
+<figcaption>Make sure "export 2D geometry" is checked. Exporting triangles is generally more widely supported across 3D environments on the code side, but has the downside of doubling your polygon count. The higher the polygon count, the more taxing the model will be on the computer's processor. So leave this checked off if you see slow performance.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/o9tB71ulBNDa59C0gJLX.jpg", alt="Import the Collada file into Blender.", width="569", height="582" %}
+<figcaption>Import the Collada file into Blender.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VFGU21NTU5YF6Btb49Vw.jpg", alt="Once imported into blender, you will see that your materials and selection tags have carried over as well.", width="640", height="360" %}
+<figcaption>Once imported into blender, you will see that your materials and selection tags have carried over as well.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/c6rev9rPcSCxYxouWP7v.jpg", alt="Select your object, and adjust the materials of the object to what you prefer.", width="424", height="682" %}
+<figcaption>Select your object, and adjust the materials of the object to what you prefer.</figcaption>
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QEWiOMbjGaic1Tv6iElt.jpg", alt="Export the file as a three.js file", width="683", height="579" %}
+<figcaption><a href="https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender">Export the file as a three.js file for webGL compatibility.</a></figcaption>
+</figure>
+
+## Writing the code
+
+Roll It was developed with open source libraries and runs natively in modern browsers. With technologies like WebGL and WebSockets, the web is closing in on console-quality gaming and multimedia experiences. The ease and comfort in which developers can build these experiences has been taking leaps forward as more modern tools have become available for HTML development. 
+
+### The development environment
+
+Most of Roll It's original code was written with [CoffeeScript](http://coffeescript.org/)&mdash;a clean and concise language that transcompiles to well-formed and [linted](http://www.javascriptlint.com/) JavaScript. CoffeeScript shines for OOP development with its great inheritance model and cleaner scope handling. The CSS was written with the [SASS](http://sass-lang.com/) framework, which gives the developer a number of great tools to enhance and manage a project's stylesheets. Adding these systems to the build process takes a little bit of time to set up, but the payoff is definitely worth it, especially for a larger project like Roll It. We set up a [Ruby on Rails](http://rubyonrails.org/) server to auto-compile our assets during development, so all of these compilation steps became transparent.
+
+Beyond creating a streamlined and comfortable coding environment, we manually optimized assets to minimize requests in order to load the site faster. We ran every image through a couple of compression programs&mdash;[ImageOptim](http://imageoptim.com/) and [ImageAlpha](http://pngmini.com/). Each program optimizes images in their own way&mdash;lossless and lossy, respectively. With the right combination of settings, they can significantly cut down an image's file size. This not only saves bandwidth when loading external images, but once optimized, your images will translate into a much smaller base64 encoded strings for inline embedding in HTML, CSS and JavaScript. While on the subject of base64 encoding, we also embedded our [Open Sans](http://www.google.com/fonts/specimen/Open+Sans) WOFF and SVG font files directly into the CSS using this technique, which resulted in even fewer total requests.
+
+### The physics-enabled 3D scene
+
+[THREE.js](http://threejs.org/) is the ubiquitous 3D JavaScript library for the web. It wraps up low-level 3D math and hardware-based WebGL optimizations that enable mere mortals to easily create well-lit and beautiful interactive 3D scenes without having to write custom shaders or perform manual matrix transformations. [Physijs](https://github.com/chandlerprall/Physijs) is a THREE.js-specific wrapper for a popular C++ physics library that has been translated to JavaScript. We took advantage of this library to simulate the ball rolling, jumping, and bouncing towards its destination in 3D.
+
+From the start, we set out to not only make the physical experience of rolling the ball feel realistic, but also to make sure that the objects in the game felt real. This required many iterations of adjusting the overall gravity of the Physijs scene, the speed of the ball as it rolls from the player's throw, the slope of the lane's jump, and the friction and restitution (bounciness) properties of the ball and lane materials. The combination of more gravity and more speed resulted in a more realistic gaming experience.
+
+### Smoothing it out
+
+Most modern browser and video card combinations should take advantage of native hardware-based anti-aliasing in the WebGL environment, but some won't play nice. In the case that anti-aliasing doesn't work natively, any hard and contrasted edges in the THREE.js scene will will be jagged and ugly (to our discerning eyes, at least). 
+
+Luckily there's a fix: through a snippet of code, we can detect whether the platform will natively support antialiasing. If it does, then we're good to go. If it doesn't, there are a series of post-processing shaders that come with THREE.js that can help us. Namely, the FXAA anti-aliasing filter. By redrawing the rendered scene every frame with this shader, we're generally left with a much smoother look to our lines and edges. See the demo below:
+
+```js
+// Check for native platform antialias support via the THREE renderer
+// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
+var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
+```
+
+### Accelerometer-based game controls
+
+Much of Roll It's magic comes from the ball-rolling gesture that the player performs with a phone. Mobile devices have had access to the accelerometer within the browser for some time now, but as an industry we're just starting to explore motion-based gesture recognition on the web. We're somewhat limited by the data that the phone's accelerometer provides, but with a little creativity we can come up with some great new experiences.
+
+Detecting Roll It's main "roll" gesture starts with tracking the 10 most recent accelerometer updates that come from the window's [`deviceorientation`](http://www.html5rocks.com/en/tutorials/device/orientation/) event. By subtracting the previous tilt value from the current tilt value, we store the angle delta between events. Then, by constantly summing up the last ten angle deltas, we can detect continuous rotation as the phone moves through space. When the phone passes a threshold of sweeping angle change, we trigger a roll. Then, by finding the largest single tilt delta in that sweep, we can estimate a speed for the ball. In Roll It, this speed is normalized using timestamps that we attach to each accelerometer update. This helps smooth out the variable speed in which accelerometer updates stream into the browser on different devices.
+
+### WebSockets communication
+
+Once the player rolls the ball with their phone, a message is sent from the phone to the laptop telling it to launch the ball. This "roll" message is sent via a [JSON](http://en.wikipedia.org/wiki/JSON) data object through a [WebSocket](http://en.wikipedia.org/wiki/WebSocket) connection between the two machines. The JSON data is small, mainly consisting of a message type, throw speed, and aim direction. 
+
+```json
+{
+  "type": "device:ball-thrown",
+  "speed": 0.5,
+  "aim": 0.1
+}
+```
+
+All of the communication between the laptop and phone happens via small JSON messages like this. Every time the game updates its state on the desktop, or the user tilts or taps a button on the phone, a WebSocket message is transmitted between the machines. In order to keep this communication simple and easy to manage, the WebSockets messages are broadcast using a single exit point from either browser. Conversely, there's a single entry point on the receiving browser, with one WebSocket object handling all incoming and outgoing messages on both ends. When a WebSocket message is received, the JSON data is rebroadcast within the JavaScript app using jQuery's `trigger()` method. At this point, the incoming data behaves just like any other custom DOM event, and can be picked up and processed by any other object in the application. 
+
+```js
+var websocket = new WebSocket(serverIPAddress);
+
+// rebroadcast incoming WebSocket messages with a global event via jQuery
+websocket.onmessage = function(e) {
+  if (e.data) {
+    var obj = JSON.parse(e.data);
+    $(document).trigger(data.type, obj);
+  }
+};
+
+// broadcast outgoing WebSocket messages by passing in a native .js object
+var broadcast = function(obj) {
+  websocket.send(JSON.stringify(obj));
+};
+```
+
+Roll It's WebSocket servers are created on-the-fly when two devices are synced with a game code. The backend for Roll It was built on the [Google Compute Engine](https://cloud.google.com/products/compute-engine) and [App Engine](https://developers.google.com/appengine/) platform using [Go](https://code.google.com/p/go/).
+
+### Tilting menu screens
+
+Beyond the event-driven WebSocket messages used during gameplay, the menus in Roll It are controlled by tilting the phone and tapping a button to confirm a selection. This requires a more consistent stream of tilt data transmitting from the phone to the laptop. In order to reduce bandwidth and avoid sending unnecessary updates, these messages are only sent if the device's tilt has changed by more than a couple of degrees. There's no point in sending a stream of tilt data if the phone is lying flat on a table! The rate of transmission is also throttled - no more than 15 WebSockets messages are sent per second in Roll It, even if the device is actively being tilted. 
+
+Once the tilt values are picked up on the computer, they're interpolated over time using [`requestAnimationFrame`](http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision) to keep a smooth feel. The end result is a rotating menu and a ball that rolls to help indicate the user's selection. As the phone sends tilt data, these DOM elements are updated in real time by recalculating a CSS transform inside of the `requestAnimationFrame` loop. The menu's container simply rotates, but the ball seems to roll along the floor. To achieve this effect, we implement some basic trigonometry to relate the balls x-coordinate to its rotation. The simple equation is: rotations = x / (diameter * π)
+
+## Wrap up
+
+Roll It is a sign of the times. Between the open source projects that powered its development, the processing power of the devices on our desks and in our pockets, and the state of the web as a platform, it's a truly exciting and transformative time to be connected on the open web. Just a few years ago, much of this technology only existed in proprietary systems, unavailable to freely use and distribute. Today, complex experiences can be realized with less work and more imagination as we create and share new pieces of the puzzle every day. So, what are you waiting for? Build something great and share it with the world!
+
+<figure>
+<a href="http://g.co/rollit">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/b1Dl2Hq6J2yVUQqo2wlx.png", alt="Roll it logo", width="376", height="64" %}
+</a>
+</figure>
diff --git a/src/site/content/en/blog/samesite-cookie-recipes/cookie-hero.jpg b/src/site/content/en/blog/samesite-cookie-recipes/cookie-hero.jpg
deleted file mode 100644
index fb41d0261df..00000000000
Binary files a/src/site/content/en/blog/samesite-cookie-recipes/cookie-hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookie-recipes/iframe.png b/src/site/content/en/blog/samesite-cookie-recipes/iframe.png
deleted file mode 100644
index eb0ce29d057..00000000000
Binary files a/src/site/content/en/blog/samesite-cookie-recipes/iframe.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookie-recipes/index.md b/src/site/content/en/blog/samesite-cookie-recipes/index.md
index 6debfd48b16..2c6ef99865d 100644
--- a/src/site/content/en/blog/samesite-cookie-recipes/index.md
+++ b/src/site/content/en/blog/samesite-cookie-recipes/index.md
@@ -7,7 +7,7 @@ authors:
   - rowan_m
 date: 2019-10-30
 updated: 2020-05-28
-hero: cookie-hero.jpg
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
 description: |
   With the introduction of the new SameSite=None attribute value, sites can now
   explicitly mark their cookies for cross-site usage. Browsers are moving to
@@ -19,15 +19,20 @@ tags:
   - blog
   - security
   - cookies
-  - chrome80
+  - chrome-80
   - test-post
+feedback:
+  - api
 ---
 
 {% Aside %}
+This article is part of a series on the `SameSite` cookie attribute changes that includes:
 
-For how cookies and `SameSite` work, see part 1:
-[SameSite cookies explained](/samesite-cookies-explained).
-
+<ul>
+<li><a href="/understanding-cookies/">Understanding cookies</a></li>
+<li><a href="/samesite-cookies-explained/">SameSite cookies explained</a></li>
+<li><a href="/schemeful-samesite/">Schemeful Same-Site</a></li>
+</ul>
 {% endAside %}
 
 [Chrome](https://www.chromium.org/updates/same-site),
@@ -79,12 +84,9 @@ Cookies may be used here to, among other things, maintain session state, store
 general preferences, enable statistics, or personalize content for users with
 existing accounts.
 
-<figure class="w-figure">
-  <img src="iframe.png"
-      alt="Diagram of a browser window where the URL of embedded content does
-        not match the URL of the page."
-      style="max-width: 35vw;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="Diagram of a browser window where the URL of embedded content does not match the URL of the page.", width="468", height="383", style="max-width: 35vw;" %}
+  <figcaption>
     If the embedded content doesn't come from the same site as the top-level
     browsing context, it's third-party content.
   </figcaption>
@@ -106,11 +108,9 @@ Cookies marked as `SameSite=Lax` will be sent on safe top-level navigations,
 e.g. clicking a link to go to a different site. However something like a
 `<form>` submission via POST to a different site would not include cookies.
 
-<figure class="w-figure">
-  <img src="safe-navigation.png"
-      alt="Diagram of a request moving from one page to another."
-      style="max-width: 35vw;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="Diagram of a request moving from one page to another.", width="719", height="382", style="max-width: 35vw;" %}
+  <figcaption>
     If the incoming request uses a "safe" method then the cookies will be sent.
   </figcaption>
 </figure>
@@ -132,21 +132,21 @@ tracking pixels and personalizing content.
 
 This also applies to requests initiated from your JavaScript by `fetch` or
 `XMLHttpRequest`. If `fetch()` is called with the
-[`credentials: 'include'` option](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included)
+[`credentials: 'include'` option](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included)
 this is a good indication that cookies may well be expected on those requests.
 For `XMLHttpRequest` you should look for instances of the
-[`withCredentials` property](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)
+[`withCredentials` property](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials)
 being set to `true`. This is a good indication that cookies may well be expected
 on those requests. Those cookies will need to be appropriately marked to be
 included in cross-site requests.
 
 ### Content within a WebView
 
-A WebView in a native app is powered by a browser and you will need to test if
+A WebView in a platform-specific app is powered by a browser and you will need to test if
 the same restrictions or issues apply. In Android, if the WebView is powered by
 Chrome the new defaults **will not** immediately be applied with Chrome 84.
 However the intent is to apply them in the future, so you should still test and
-prepare for this. Additionally, Android allows native apps to set cookies
+prepare for this. Additionally, Android allows its platform-specific apps to set cookies
 directly via the
 [CookieManager API](https://developer.android.com/reference/android/webkit/CookieManager).
 As with cookies set via headers or JavaScript, consider including
@@ -286,7 +286,3 @@ anyone has encountered it - so don't hesitate to reach out:
 - Follow Chrome's progress on the
   [`SameSite` updates page](https://www.chromium.org/updates/same-site).
 
-_Cookie hero image by
-[Cayla1](https://unsplash.com/@calya1?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
-on
-[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/samesite-cookie-recipes/safe-navigation.png b/src/site/content/en/blog/samesite-cookie-recipes/safe-navigation.png
deleted file mode 100644
index 6a36d6dd3ef..00000000000
Binary files a/src/site/content/en/blog/samesite-cookie-recipes/safe-navigation.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookie-recipes/samesite-devtools.png b/src/site/content/en/blog/samesite-cookie-recipes/samesite-devtools.png
deleted file mode 100644
index f66e819775f..00000000000
Binary files a/src/site/content/en/blog/samesite-cookie-recipes/samesite-devtools.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/cookie-hero.jpg b/src/site/content/en/blog/samesite-cookies-explained/cookie-hero.jpg
deleted file mode 100644
index be8ec11cbf7..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/cookie-hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/cookie-request-header.png b/src/site/content/en/blog/samesite-cookies-explained/cookie-request-header.png
deleted file mode 100644
index 35046bd9203..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/cookie-request-header.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/cross-site-cookie-request-header.png b/src/site/content/en/blog/samesite-cookies-explained/cross-site-cookie-request-header.png
deleted file mode 100644
index 58f0e4f63f9..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/cross-site-cookie-request-header.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/cross-site-set-cookie-response-header.png b/src/site/content/en/blog/samesite-cookies-explained/cross-site-set-cookie-response-header.png
deleted file mode 100644
index 639c77d4c30..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/cross-site-set-cookie-response-header.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/document-cookie.png b/src/site/content/en/blog/samesite-cookies-explained/document-cookie.png
deleted file mode 100644
index f40da9f7595..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/document-cookie.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/index.md b/src/site/content/en/blog/samesite-cookies-explained/index.md
index 158e053fb69..e6ffc489846 100644
--- a/src/site/content/en/blog/samesite-cookies-explained/index.md
+++ b/src/site/content/en/blog/samesite-cookies-explained/index.md
@@ -1,12 +1,11 @@
 ---
 title: SameSite cookies explained
-subhead:
-  Secure your site by learning how to explicitly mark your cross-site cookies.
+subhead: Secure your site by learning how to explicitly mark your cross-site cookies.
 authors:
   - rowan_m
 date: 2019-05-07
-updated: 2020-05-28
-hero: cookie-hero.jpg
+updated: 2023-03-20
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
 description: |
   Learn how to mark your cookies for first-party and third-party usage with the
   SameSite attribute. You can enhance your site's security by using
@@ -17,164 +16,23 @@ tags:
   - blog
   - security
   - cookies
-  - chrome80
+  - chrome-80
+feedback:
+  - api
 ---
 
 {% Aside %}
+This article is part of a series on the `SameSite` cookie attribute changes that includes:
 
-For implementation advice on `SameSite=None`, see part 2:
-[SameSite cookie recipes](/samesite-cookie-recipes)
-
+<ul>
+<li><a href="/understanding-cookies/">Understanding cookies</a></li>
+<li><a href="/samesite-cookie-recipes/">SameSite cookies recipes</a></li>
+<li><a href="/schemeful-samesite/">Schemeful Same-Site</a></li>
+</ul>
 {% endAside %}
 
-Cookies are one of the methods available for adding persistent state to web
-sites. Over the years their capabilities have grown and evolved, but left the
-platform with some problematic legacy issues. To address this, browsers
-(including Chrome, Firefox, and Edge) are changing their behavior to enforce
-more privacy-preserving defaults.
-
-Each cookie is a `key=value` pair along with a number of attributes that control
-when and where that cookie is used. You've probably already used these
-attributes to set things like expiration dates or indicating the cookie should
-only be sent over HTTPS. Servers set cookies by sending the aptly-named
-`Set-Cookie` header in their response. For all the detail you can dive into
-[RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1),
-but for now here's a quick refresher.
-
-Say you have a blog where you want to display a "What's new" promo to your
-users. Users can dismiss the promo and then they won't see it again for a while.
-You can store that preference in a cookie, set it to expire in a month
-(2,600,000 seconds), and only send it over HTTPS. That header would look like
-this:
-
-```text
-Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
-```
-
-<figure class="w-figure">
-  <img src="set-cookie-response-header.png" alt="Three cookies being sent to a
-    browser from a server in a response" style="max-width: 60vw">
-  <figcaption class="w-figcaption">
-    Servers set cookies using the <code>Set-Cookie</code> header.
-  </figcaption>
-</figure>
-
-When your reader views a page that meets those requirements, i.e. they're on a
-secure connection and the cookie is less than a month old, then their browser
-will send this header in its request:
-
-```text
-Cookie: promo_shown=1
-```
-
-<figure class="w-figure">
-  <img src="cookie-request-header.png" alt="Three cookies being sent from a
-    browser to a server in a request" style="max-width: 60vw;">
-  <figcaption class="w-figcaption">
-    Your browser sends cookies back in the <code>Cookie</code> header.
-  </figcaption>
-</figure>
-
-You can also add and read the cookies available to that site in JavaScript using
-`document.cookie`. Making an assignment to `document.cookie` will create or
-override a cookie with that key. For example, you can try the following in your
-browser's JavaScript console:
-
-```text
-> document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
-< "promo_shown=1; Max-Age=2600000; Secure"
-```
 
-Reading `document.cookie` will output all the cookies accessible in the current
-context, with each cookie separated by a semicolon:
-
-```text
-> document.cookie;
-< "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
-```
-
-<figure class="w-figure">
-  <img src="document-cookie.png" alt="JavaScript accessing cookies within the
-    browser" style="max-width: 35vw;">
-  <figcaption class="w-figcaption">
-    JavaScript can access cookies using <code>document.cookie</code>.
-  </figcaption>
-</figure>
-
-If you try this on a selection of popular sites you will notice that most of
-them set significantly more than just three cookies. In most cases, those
-cookies are sent on every single request to that domain, which has a number of
-implications. Upload bandwidth is often more restricted than download for your
-users, so that overhead on all outbound requests is adding a delay on your time
-to first byte. Be conservative in the number and size of cookies you set. Make
-use of the `Max-Age` attribute to help ensure that cookies don't hang around
-longer than needed.
-
-## What are first-party and third-party cookies?
-
-If you go back to that same selection of sites you were looking at before, you
-probably noticed that there were cookies present for a variety of domains, not
-just the one you were currently visiting. Cookies that match the domain of the
-current site, i.e. what's displayed in the browser's address bar, are referred
-to as **first-party** cookies. Similarly, cookies from domains other than the
-current site are referred to as **third-party** cookies. This isn't an absolute
-label but is relative to the user's context; the same cookie can be either
-first-party or third-party depending on which site the user is on at the time.
-
-<figure class="w-figure">
-  <img src="cross-site-set-cookie-response-header.png" alt="Three cookies being
-    sent to a browser from different requests on the same page"
-    style="max-width: 60vw;">
-  <figcaption class="w-figcaption">
-    Cookies may come from a variety of different domains on one page.
-  </figcaption>
-</figure>
-
-Continuing the example from above, let's say one of your blog posts has a
-picture of a particularly amazing cat in it and it's hosted at
-`/blog/img/amazing-cat.png`. Because it's such an amazing image, another person
-uses it directly on their site. If a visitor has been to your blog and has the
-`promo_shown` cookie, then when they view `amazing-cat.png` on the other
-person's site that cookie **will be sent** in that request for the image. This
-isn't particularly useful for anyone since `promo_shown` isn't used for anything
-on this other person's site, it's just adding overhead to the request.
-
-If that's an unintended effect, why would you want to do this? It's this
-mechanism that allows sites to maintain state when they are being used in a
-third-party context. For example, if you embed a YouTube video on your site then
-visitors will see a "Watch later" option in the player. If your visitor is
-already signed in to YouTube, that session is being made available in the
-embedded player by a third-party cookie—meaning that "Watch later" button will
-just save the video in one go rather than prompting them to sign in or having to
-navigate them away from your page and back over to YouTube.
-
-<figure class="w-figure">
-  <img src="cross-site-cookie-request-header.png" alt="The same cookie being
-    sent in three different contexts" style="max-width: 60vw;">
-  <figcaption class="w-figcaption">
-    A cookie in a third-party context is sent when visiting different pages.
-  </figcaption>
-</figure>
-
-One of the cultural properties of the web is that it's tended to be open by
-default. This is part of what has made it possible for so many people to create
-their own content and apps there. However, this has also brought a number of
-security and privacy concerns. Cross-site request forgery (CSRF) attacks rely on
-the fact that cookies are attached to any request to a given origin, no matter
-who initiates the request. For example, if you visit `evil.example` then it can
-trigger requests to `your-blog.example`, and your browser will happily attach
-the associated cookies. If your blog isn't careful with how it validates those
-requests then `evil.example` could trigger actions like deleting posts or adding
-their own content.
-
-Users are also becoming more aware of how cookies can be used to track their
-activity across multiple sites. However until now there hasn't been a way to
-explicitly state your intent with the cookie. Your `promo_shown` cookie should
-only be sent in a first-party context, whereas a session cookie for a widget
-meant to be embedded on other sites is intentionally there for providing the
-signed-in state in a third-party context.
-
-## Explicitly state cookie usage with the `SameSite` attribute
+Each cookie contains a key-value pair along with a number of attributes that control when and where that cookie is used. 
 
 The introduction of the `SameSite` attribute (defined in
 [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00))
@@ -202,6 +60,8 @@ If the user is on `your-project.github.io` and requests an image from
 
 {% endAside %}
 
+## Explicitly state cookie usage with the `SameSite` attribute
+
 Introducing the `SameSite` attribute on a cookie provides three different ways
 to control this behaviour. You can choose to not specify the attribute, or you
 can use `Strict` or `Lax` to limit the cookie to same-site requests.
@@ -265,10 +125,9 @@ is being made explicit by introducing a new value of `SameSite=None`. This means
 you can use `None` to clearly communicate that you intentionally want the cookie
 sent in a third-party context.
 
-<figure class="w-figure">
-  <img src="samesite-none-lax-strict.png" alt="Three cookies labelled None,
-    Lax, or Strict depending on their context" style="max-width: 60vw;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Three cookies labelled None, Lax, or Strict depending on their context", width="800", height="456", style="max-width: 35vw" %}
+  <figcaption>
     Explicitly mark the context of a cookie as <code>None</code>, <code>Lax</code>, or <code>Strict</code>.
   </figcaption>
 </figure>
@@ -387,7 +246,7 @@ You must ensure that you pair `SameSite=None` with the `Secure` attribute.
 {% endCompare %}
 
 You can test this behavior as of Chrome 76 by enabling
-`chrome://flags/#cookies-without-same-site-must-be-secure` and from Firefox 69
+`about://flags/#cookies-without-same-site-must-be-secure` and from Firefox 69
 in [`about:config`](http://kb.mozillazine.org/About:config) by setting
 `network.cookie.sameSite.noneRequiresSecure`.
 
diff --git a/src/site/content/en/blog/samesite-cookies-explained/samesite-none-lax-strict.png b/src/site/content/en/blog/samesite-cookies-explained/samesite-none-lax-strict.png
deleted file mode 100644
index e6349f28d69..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/samesite-none-lax-strict.png and /dev/null differ
diff --git a/src/site/content/en/blog/samesite-cookies-explained/set-cookie-response-header.png b/src/site/content/en/blog/samesite-cookies-explained/set-cookie-response-header.png
deleted file mode 100644
index 467d6466804..00000000000
Binary files a/src/site/content/en/blog/samesite-cookies-explained/set-cookie-response-header.png and /dev/null differ
diff --git a/src/site/content/en/blog/sandboxed-iframes/index.md b/src/site/content/en/blog/sandboxed-iframes/index.md
new file mode 100644
index 00000000000..edf87f4da5e
--- /dev/null
+++ b/src/site/content/en/blog/sandboxed-iframes/index.md
@@ -0,0 +1,369 @@
+---
+layout: post
+title: Play safely in sandboxed IFrames
+authors:
+  - mikewest
+date: 2013-01-04
+tags:
+  - blog
+---
+
+Constructing a rich experience on today's web almost unavoidably involves
+embedding components and content over which you have no real control.
+Third-party widgets can drive engagement and play a critical role in the overall
+user experience, and user-generated content is sometimes even more important
+than a site's native content. Abstaining from either isn't really an option, but
+both increase the risk that Something Bad™ could happen on your site. Each
+widget that you embed -- every ad, every social media widget -- is a potential
+attack vector for those with malicious intent:
+
+[Content Security Policy
+(CSP)](http://www.html5rocks.com/tutorials/security/content-security-policy/)
+can mitigate the risks associated with both of these types of content by giving
+you the ability to whitelist specifically trusted sources of script and other
+content. This is a major step in the right direction, but it's worth noting that
+the protection that most CSP directives offer is binary: the resource is
+allowed, or it isn't. There are times when it would be useful to say "I'm not
+sure I actually _trust_ this source of content, but it's soooo pretty! Embed it
+please, Browser, but don't let it break my site."
+
+## Least Privilege
+
+In essence, we're looking for a mechanism that will allow us to grant content we
+embed only the minimum level of capability necessary to do its job. If a widget
+doesn't _need_ to pop up a new window, taking away access to window.open can't
+hurt. If it doesn't require Flash, turning off plugin support shouldn't be a
+problem. We're as secure as we can be if we follow the [principle of least
+privilege](http://en.wikipedia.org/wiki/Principle_of_least_privilege), and block
+each and every feature that isn't directly relevant to functionality we'd like
+to use.  The result is that we no longer have to blindly trust that some piece
+of embedded content won't take advantage of privileges it shouldn't be using. It
+simply won't have access to the functionality in the first place.
+
+`iframe` elements are the first step toward a good framework for such a solution.
+Loading some untrusted component in an `iframe` provides a measure of separation
+between your application and the content you'd like to load. The framed content
+won't have access to your page's DOM, or data you've stored locally, nor will it
+be able to draw to arbitrary positions on the page; it's limited in scope to the
+frame's outline. The separation isn't truly robust, however. The contained page
+still has a number of options for annoying or malicious behavior: autoplaying
+video, plugins, and popups are the tip of the iceberg.
+
+The [**`sandbox`** attribute of the `iframe` element](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox)
+gives us just what we need to tighten the restrictions on framed content. We can
+instruct the browser to load a specific frame's content in a low-privilege
+environment, allowing only the subset of capabilities necessary to do whatever
+work needs doing.
+
+### Twust, but verify
+
+Twitter's "Tweet" button is a great example of functionality that can be more
+safely embedded on your site via a sandbox. Twitter allows you to [embed the
+button via an iframe](https://dev.twitter.com/docs/tweet-button#using-an-iframe)
+with the following code:
+
+```html
+<iframe src="https://platform.twitter.com/widgets/tweet_button.html"
+        style="border: 0; width:130px; height:20px;"></iframe>
+```
+
+To figure out what we can lock down, let's carefully examine what capabilities
+the button requires. The HTML that's loaded into the frame executes a bit of
+JavaScript from Twitter's servers, and generates a popup populated with a
+tweeting interface when clicked. That interface needs access to Twitter's
+cookies in order to tie the tweet to the correct account, and needs the ability
+to submit the tweeting form. That's pretty much it; the frame doesn't need to
+load any plugins, it doesn't need to navigate the top-level window, or any of a
+number of other bits of functionality. Since it doesn't need those privileges,
+let's remove them by sandboxing the frame's content.
+
+Sandboxing works on the basis of a whitelist. We begin by removing all
+permissions possible, and then turn individual capabilities back on by adding
+specific flags to the sandbox's configuration. For the Twitter widget, we've
+decided to enable JavaScript, popups, form submission, and twitter.com's
+cookies. We can do so by adding a `sandbox` attribute to the `iframe` with the
+following value:
+
+```html
+<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+    src="https://platform.twitter.com/widgets/tweet_button.html"
+    style="border: 0; width:130px; height:20px;"></iframe>
+```
+
+That's it. We've given the frame all the capabilities it requires, and the
+browser will helpfully deny it access to any of the privileges that we didn't
+explicitly grant it via the `sandbox` attribute's value.
+
+### Granular Control over Capabilities
+
+We saw a few of the possible sandboxing flags in the example above, let's now
+dig through the inner workings of the attribute in a little more detail.
+
+Given an iframe with an empty sandbox attribute, the framed document will be fully sandboxed, subjecting it
+to the following restrictions:
+
+- JavaScript will not execute in the framed document. This not only includes
+  JavaScript explicitly loaded via script tags, but also inline event handlers
+  and javascript: URLs. This also means that content contained in noscript tags
+  will be displayed, exactly as though the user had disabled script herself.
+- The framed document is loaded into a unique origin, which means that all
+  same-origin checks will fail; unique origins match no other origins ever, not
+  even themselves. Among other impacts, this means that the document has no
+  access to data stored in any origin's cookies or any other storage mechanisms
+  (DOM storage, Indexed DB, etc.).
+- The framed document cannot create new windows or dialogs (via `window.open` or
+  `target="_blank"`, for instance).
+- Forms cannot be submitted.
+- Plugins will not load.
+- The framed document can only navigate itself, not its top-level parent.
+  Setting `window.top.location` will throw an exception, and clicking on link with
+  `target="_top"` will have no effect.
+- Features that trigger automatically (autofocused form elements, autoplaying
+  videos, etc.) are blocked.
+- Pointer lock cannot be obtained.
+- The `seamless` attribute is ignored on `iframes` the framed document contains.
+
+This is nicely draconian, and a document loaded into a fully sandboxed `iframe`
+poses very little risk indeed. Of course, it also can't do much of value: you
+might be able to get away with a full sandbox for some static content, but most
+of the time you'll want to loosen things up a bit.
+
+With the exception of plugins, each of these restrictions can be lifted by
+adding a flag to the sandbox attribute's value. Sandboxed documents can never
+run plugins, as plugins are unsandboxed native code, but everything else is fair
+game:
+
+- **`allow-forms`** allows form submission.
+- **`allow-popups`** allows (shock!) popups.
+- **`allow-pointer-lock`** allows (surprise!) pointer lock.
+- **`allow-same-origin`** allows the document to maintain its origin; pages loaded
+  from `https://example.com/` will retain access to that origin's data.
+- **`allow-scripts`** allows JavaScript execution, and also allows features to
+  trigger automatically (as they'd be trivial to implement via JavaScript).
+- **`allow-top-navigation`** allows the document to break out of the frame by
+  navigating the top-level window.
+
+With these in mind, we can evaluate exactly why we ended up with the specific
+set of sandboxing flags in the Twitter example above:
+
+- **`allow-scripts`** is required, as the page loaded into the frame runs some
+  JavaScript to deal with user interaction.
+- **`allow-popups`** is required, as the button pops up a tweeting form in a new
+  window.
+- **`allow-forms`** is required, as the tweeting form should be submittable.
+- **`allow-same-origin`** is necessary, as twitter.com's cookies would otherwise
+  be inaccessible, and the user couldn't log in to post the form.
+
+One important thing to note is that the sandboxing flags applied to a frame also
+apply to any windows or frames created in the sandbox. This means that we have
+to add **`allow-forms`** to the frame's sandbox, even though the form only exists
+in the window that the frame pops up.
+
+With the `sandbox` attribute in place, the widget gets only the permissions it
+requires, and capabilities like plugins, top navigation, and pointer lock remain
+blocked. We've reduced the risk of embedding the widget, with no ill-effects.
+It's a win for everyone concerned.
+
+## Privilege Separation
+
+Sandboxing third-party content in order to run their untrusted code in a
+low-privilege environment is fairly obviously beneficial. But what about your
+own code? You trust yourself, right? So why worry about sandboxing?
+
+I'd turn that question around: if your code doesn't need plugins, why give it
+access to plugins? At best, it's a privilege you never use, at worst it's a
+potential vector for attackers to get a foot in the door. Everyone's code has
+bugs, and practically every application is vulnerable to exploitation in one way
+or another. Sandboxing your own code means that even if an attacker successfully
+subverts your application, they won't be given _full_ access to the
+application's origin; they'll only be able to do things the application could
+do. Still bad, but not as bad as it could be.
+
+You can reduce the risk even further by breaking your application up into
+logical pieces and sandboxing each piece with the minimal privilege possible.
+This technique is very common in native code: Chrome, for example, breaks itself
+into a high-privilege browser process that has access to the local hard-drive
+and can make network connections, and many low-privilege renderer processes that
+do the heavy lifting of parsing untrusted content. Renderers don't need to touch
+the disk, the browser takes care of giving them all the information they need to
+render a page. Even if a clever hacker finds a way to corrupt a renderer, she
+hasn't gotten very far, as the renderer can't do much of interest on its own:
+all high-privilege access must be routed through the browser's process.
+Attackers will need to find several holes in different pieces of the system
+order to do any damage, which hugely reduces the risk of successful pwnage.
+
+### Safely sandboxing `eval()`
+
+With sandboxing and the
+[`postMessage` API](https://developer.mozilla.org/docs/DOM/window.postMessage), the
+success of this model is fairly straightforward to apply to the web. Pieces of
+your application can live in sandboxed `iframe`s, and the parent document can
+broker communication between them by posting messages and listening for
+responses. This sort of structure ensures that exploits in any one piece of the
+app do the minimum damage possible. It also has the advantage of forcing you to
+create clear integration points, so you know exactly where you need to be
+careful about validating input and output. Let's walk through a toy example,
+just to see how that might work.
+
+[Evalbox](/static/demos/evalbox/index.html) is an exciting application
+that takes a string, and evaluates it as JavaScript. Wow, right? Just what
+you've been waiting for all these long years. It's a fairly dangerous
+application, of course, as allowing arbitrary JavaScript to execute means that any
+and all data an origin has to offer is up for grabs. We'll mitigate the risk of
+Bad Things™ happening by ensuring that the code is executed inside of a sandbox,
+which makes it quite a bit safer. We'll work our way through the code from the
+inside out, starting with the frame's contents:
+
+```html
+<!-- frame.html -->
+<!DOCTYPE html>
+<html>
+    <head>
+    <title>Evalbox's Frame</title>
+    <script>
+        window.addEventListener('message', function (e) {
+        var mainWindow = e.source;
+        var result = '';
+        try {
+            result = eval(e.data);
+        } catch (e) {
+            result = 'eval() threw an exception.';
+        }
+        mainWindow.postMessage(result, event.origin);
+        });
+    </script>
+    </head>
+</html>
+```
+
+Inside the frame, we have a minimal document that simply listens for messages
+from its parent by hooking into the `message` event of the `window` object.
+Whenever the parent executes postMessage on the iframe's contents, this event
+will trigger, giving us access to the string our parent would like us to
+execute.
+
+In the handler, we grab the `source` attribute of the event, which is the parent
+window. We'll use this to send the result of our hard work back up once we're
+done. Then we'll do the heavy lifting, by passing the data we've been given into
+`eval()`. This call has been wrapped up in a try block, as banned operations
+inside a sandboxed `iframe` will frequently generate DOM exceptions; we'll catch
+those and report a friendly error message instead. Finally, we post the result
+back to the parent window. This is pretty straightforward stuff.
+
+The parent is similarly uncomplicated. We'll create a tiny UI with a `textarea`
+for code, and a `button` for execution, and we'll pull in `frame.html` via a
+sandboxed `iframe`, allowing only script execution:
+
+```html
+<textarea id='code'></textarea>
+<button id='safe'>eval() in a sandboxed frame.</button>
+<iframe sandbox='allow-scripts'
+        id='sandboxed'
+        src='frame.html'></iframe>
+```
+
+Now we'll wire things up for execution. First, we'll listen for responses from
+the `iframe` and `alert()` them to our users. Presumably a real application
+would do something less annoying:
+
+```js
+window.addEventListener('message',
+    function (e) {
+        // Sandboxed iframes which lack the 'allow-same-origin'
+        // header have "null" rather than a valid origin. This means you still
+        // have to be careful about accepting data via the messaging API you
+        // create. Check that source, and validate those inputs!
+        var frame = document.getElementById('sandboxed');
+        if (e.origin === "null" &amp;&amp; e.source === frame.contentWindow)
+        alert('Result: ' + e.data);
+    });
+```
+
+Next, we'll hook up an event handler to clicks on the `button`. When the user
+clicks, we'll grab the current contents of the `textarea`, and pass them into the
+frame for execution:
+
+```js
+function evaluate() {
+    var frame = document.getElementById('sandboxed');
+    var code = document.getElementById('code').value;
+    // Note that we're sending the message to "*", rather than some specific
+    // origin. Sandboxed iframes which lack the 'allow-same-origin' header
+    // don't have an origin which you can target: you'll have to send to any
+    // origin, which might alow some esoteric attacks. Validate your output!
+    frame.contentWindow.postMessage(code, '*');
+}
+
+document.getElementById('safe').addEventListener('click', evaluate);
+```
+
+Easy, right? We've created a very simple evaluation API, and we can be sure that
+code that's evaluated doesn't have access to sensitive information like cookies
+or DOM storage. Likewise, evaluated code can't load plugins, pop up new windows,
+or any of a number of other annoying or malicious activities.
+
+You can do the same for your own code by breaking monolithic applications into
+single-purpose components. Each can be wrapped in a simple messaging API, just
+like what we've written above. The high-privilege parent window can act as a
+controller and dispatcher, sending messages into specific modules that each have
+the fewest privileges possible to do their jobs, listening for results, and
+ensuring that each module is well-fed with only the information it requires.
+
+Note, however, that you need to be very careful when dealing with framed content
+that comes from the same origin as the parent. If a page on
+`https://example.com/` frames another page on the same origin with a sandbox
+that includes both the **allow-same-origin** and **allow-scripts** flags, then
+the framed page can reach up into the parent, and remove the sandbox attribute
+entirely.
+
+## Play in your sandbox
+
+Sandboxing is available for you now in a variety of browsers: Firefox 17+,
+IE10+, and Chrome at the time of writing ([caniuse, of course, has an up-to-date
+support table](http://caniuse.com/#feat=iframe-sandbox)). Applying the `sandbox`
+attribute to `iframes` you include allows you to grant certain privileges to the
+content they display, _only_ those privileges which are necessary for the
+content to function correctly. This gives you the opportunity to reduce the risk
+associated with the inclusion of third-party content, above and beyond what is
+already possible with [Content Security
+Policy](http://www.html5rocks.com/tutorials/security/content-security-policy/).
+
+Moreover, sandboxing is a powerful technique for reducing the risk that a clever
+attacker will be able to exploit holes in your own code. By separating a
+monolithic application into a set of sandboxed services, each responsible for a
+small chunk of self-contained functionality, attackers will be forced to not
+only compromise specific frames' content, but also their controller. That's a
+much more difficult task, especially since the controller can be greatly reduced
+in scope. You can spend your security-related effort auditing _that_ code if you
+ask the browser for help with the rest.
+
+That's not to say that sandboxing is a complete solution to the problem of
+security on the internet. It offers defense in depth, and unless you have
+control over your users' clients, you can't yet rely on browser support for all
+your users (if you do control your users clients -- an enterprise environment,
+for example -- hooray!). Someday… but for now sandboxing is another layer of
+protection to strengthen your defenses, it's not a complete defense upon which
+you can soley rely. Still, layers are excellent. I suggest making use of this
+one.
+
+## Further Reading
+
+- "[Privilege Separation in HTML5 Applications](http://www.cs.berkeley.edu/~devdatta/LeastPrivileges.pdf)"
+    is an interesting paper that works through the design of a small framework,
+    and its application to three existing HTML5 apps.
+
+- Sandboxing can be even more flexible when combined with two other new iframe
+    attributes: [`srcdoc`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-srcdoc),
+    and [`seamless`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-seamless).
+    The former allows you to populate a frame with content without the overhead of
+    an HTTP request, and the latter allows style to flow into the framed content.
+    Both have fairly miserable browser support at the moment (Chrome and WebKit
+    nightlies). but will be an interesting combination in the future. You could,
+    for example, sandbox comments on an article via the following code:
+
+    ```html
+        <iframe sandbox seamless
+                srcdoc="<p>This is a user's comment!
+                           It can't execute script!
+                           Hooray for safety!</p>"></iframe>
+    ```
\ No newline at end of file
diff --git a/src/site/content/en/blog/sanitizer/index.md b/src/site/content/en/blog/sanitizer/index.md
new file mode 100644
index 00000000000..789778fcd9d
--- /dev/null
+++ b/src/site/content/en/blog/sanitizer/index.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: Safe DOM manipulation with the Sanitizer API
+subhead: |
+  The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page.
+description: |
+  The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page.
+  This article introduces the API, and explains its usage.
+authors:
+  - jackjey
+date: 2021-10-06
+updated: 2021-10-07
+hero: image/PV7xjXdOKHP8LWt9XhstsToJeK82/R2KGdIHv2lBRDS9vs8q1.jpg
+alt: Sanitizing a desk with Sanitizer
+tags:
+  - blog
+  - security
+  - chrome-93
+---
+
+
+Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML document can be tricky. Without sufficient care, it's easy to accidentally create opportunities for [cross-site scripting](https://www.google.com/about/appsecurity/learning/xss/) (XSS) that malicious attackers may exploit.
+
+To mitigate that risk, the new [Sanitizer API](https://wicg.github.io/sanitizer-api/) proposal aims to build a robust processor for arbitrary strings to be safely inserted into a page. This article introduces the API, and explains its usage.
+
+```js
+// Expanded Safely !!
+$div.setHTML(`<em>hello world</em><img src="" onerror=alert(0)>`, new Sanitizer())
+```
+
+## Escaping user input
+
+When inserting user input, query strings, cookie contents, and so on, into the DOM, the strings must be escaped properly. Particular attention should be paid to DOM manipulation via [`.innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML), where unescaped strings are a typical source of XSS.
+
+```js
+const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
+$div.innerHTML = user_input
+```
+
+If you escape HTML special characters in the input string above or expand it using [`.textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent), `alert(0)` will not be executed. However, since `<em>` added by the user is also expanded as a string as it is, this method cannot be used in order to keep the text decoration in HTML.
+
+The best thing to do here is not _escaping_, but _sanitizing_.
+
+
+## Sanitizing user input
+
+### The difference between escaping and sanitizing
+
+Escaping refers to replacing special HTML characters with [HTML Entities](https://developer.mozilla.org/docs/Glossary/Entity).
+
+Sanitizing refers to removing semantically harmful parts (such as script execution) from HTML strings.
+
+### Example
+In the previous example, `<img onerror>` causes the error handler to be executed, but if the `onerror` handler was removed, it would be possible to safely expand it in the DOM while leaving `<em>` intact.
+
+```js
+// XSS 🧨
+$div.innerHTML = `<em>hello world</em><img src="" onerror=alert(0)>`
+// Sanitized ⛑
+$div.innerHTML = `<em>hello world</em><img src="">`
+```
+
+To sanitize correctly, it is necessary to parse the input string as HTML, omit tags and attributes that are considered harmful, and keep the harmless ones.
+
+The [proposed Sanitizer API specification](https://wicg.github.io/sanitizer-api/) aims to provide such processing as a standard API for browsers.
+
+{% Aside %}
+Internet Explorer had implemented `window.toStaticHTML()` for this purpose, but it was never standardized.
+{% endAside %}
+
+
+## Sanitizer API
+
+The [Sanitizer API](https://wicg.github.io/sanitizer-api/) is used in the following way:
+
+```js
+const $div = document.querySelector('div')
+const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
+$div.setHTML(user_input, { sanitizer: new Sanitizer() }) // <div><em>hello world</em><img src=""></div>
+```
+
+However, the `{ sanitizer: new Sanitizer() }` is the default argument. So it can be just like below.
+
+```js
+$div.setHTML(user_input) // <div><em>hello world</em><img src=""></div>
+```
+
+It is worth noting that `setHTML()` is defined on [`Element`](https://developer.mozilla.org/docs/Web/API/Element). Being a method of `Element`, the context to parse is self-explanatory (`<div>` in this case), the parsing is done once internally, and the result is directly expanded into the DOM.
+
+To get the result of sanitization as a string, you can use `.innerHTML` from the `setHTML()` results.
+
+```js
+const $div = document.createElement('div')
+$div.setHTML(user_input)
+$div.innerHTML // <em>hello world</em><img src="">
+```
+
+
+### Customize via configuration
+
+The Sanitizer API is configured by default to remove strings that would trigger script execution. However, you can also add your own customizations to the sanitization process via a configuration object.
+
+
+```js
+const config = {
+  allowElements: [],
+  blockElements: [],
+  dropElements: [],
+  allowAttributes: {},
+  dropAttributes: {},
+  allowCustomElements: true,
+  allowComments: true
+};
+// sanitized result is customized by configuration
+new Sanitizer(config)
+```
+
+The following options specify how the sanitization result should treat the specified element.
+
+`allowElements`: Names of elements that the sanitizer should retain.
+
+`blockElements`: Names of elements the sanitizer should remove, while retaining their children.
+
+`dropElements`: Names of elements the sanitizer should remove, along with their children.
+
+
+```js
+const str = `hello <b><i>world</i></b>`
+
+$div.setHTML(str)
+// <div>hello <b><i>world</i></b></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: [ "b" ]}) })
+// <div>hello <b>world</b></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({blockElements: [ "b" ]}) })
+// <div>hello <i>world</i></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: []}) })
+// <div>hello world</div>
+```
+
+You can also control whether the sanitizer will allow or deny specified attributes with the following options:
+
+- `allowAttributes`
+- `dropAttributes`
+
+`allowAttributes` and `dropAttributes` properties expect **attribute match lists**—objects whose keys are attribute names, and values are lists of target elements or the `*` wildcard.
+
+
+```js
+const str = `<span id=foo class=bar style="color: red">hello</span>`
+
+$div.setHTML(str)
+// <div><span id="foo" class="bar" style="color: red">hello</span></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["span"]}}) })
+// <div><span style="color: red">hello</span></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["p"]}}) })
+// <div><span>hello</span></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["*"]}}) })
+// <div><span style="color: red">hello</span></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({dropAttributes: {"id": ["span"]}}) })
+// <div><span class="bar" style="color: red">hello</span></div>
+
+$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {}}) })
+// <div>hello</div>
+```
+
+`allowCustomElements` is the option to allow or deny custom elements. If they're allowed, other configurations for elements and attributes still apply.
+
+
+```js
+const str = `<custom-elem>hello</custom-elem>`
+
+$div.setHTML(str)
+// <div></div>
+
+const sanitizer = new Sanitizer({
+  allowCustomElements: true,
+  allowElements: ["div", "custom-elem"]
+})
+$div.setHTML(str, { sanitizer })
+// <div><custom-elem>hello</custom-elem></div>
+```
+
+{% Aside %}
+The Sanitizer API is designed to be safe by default. This means that no matter how you set it up, it will never allow constructs that are known XXS targets. For example, `allowElements: ["script"]` won't actually allow `<script>`, because the built-in baseline configuration cannot be overridden. The purpose of customization is to override default settings if your application has special needs.
+{% endAside %}
+
+
+## API surface
+
+### Comparison with DomPurify
+
+[DOMPurify](https://github.com/cure53/DOMPurify) is a well-known library that offers sanitization functionality. The main difference between the Sanitizer API and DOMPurify is that DOMPurify returns the result of the sanitization as a string, which you need to write into a DOM element via `.innerHTML`.
+
+
+```js
+const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
+const sanitized = DOMPurify.sanitize(user_input)
+$div.innerHTML = sanitized
+// `<em>hello world</em><img src="">`
+```
+
+DOMPurify can serve as a fallback when the Sanitizer API is not implemented in the browser.
+
+The DOMPurify implementation has a couple of downsides. If a string is returned, then the input string is parsed twice, by DOMPurify and `.innerHTML`. This double parsing wastes processing time, but can also lead to interesting vulnerabilities caused by cases where the result of the second parsing is different from the first.
+
+{% Aside 'caution' %}
+Learn more about the Securitum research on the DOMPurify vulnerability: [Mutation XSS via namespace confusion](https://research.securitum.com/mutation-xss-via-mathml-mutation-dompurify-2-0-17-bypass/).
+{% endAside %}
+
+HTML also needs **context** to be parsed. For example, `<td>` makes sense in `<table>`, but not in `<div>`. Since `DOMPurify.sanitize()` only takes a string as an argument, the parsing context had to be guessed.
+
+{% Aside %}
+Learn more about how the Sanitizer API parses strings and determines context in the [Sanitizer API explainer](https://github.com/WICG/sanitizer-api/blob/main/explainer-strings.md).
+{% endAside %}
+
+The [Sanitizer API](https://wicg.github.io/sanitizer-api/) improves upon the DOMPurify approach and is designed to eliminate the need for double parsing and to clarify the parsing context.
+
+
+## API status and browser support
+
+The Sanitizer API is under discussion in the standardization process and Chrome is in the process of implementing it.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Step</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1. Create explainer</td>
+        <td><a href="https://github.com/WICG/sanitizer-api/blob/main/README.md">Complete</a></td>
+      </tr>
+      <tr>
+        <td>2. Create specification draft</td>
+        <td><a href="https://wicg.github.io/sanitizer-api/">Complete</a></td>
+      </tr>
+      <tr>
+        <td>3. Gather feedback and iterate on design</td>
+        <td><a href="https://github.com/w3ctag/design-reviews/issues/619">Complete</a></td>
+      </tr>
+      <tr>
+        <td>4. Chrome origin trial</td>
+        <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/OrWQnXVQJ0A/m/TbF-0Dw3BQAJ">Complete</a></td>
+      </tr>
+      <tr>
+        <td>5. Launch</td>
+        <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/KOpwkS-bgl0/m/hmJ6gfU7AQAJ">Intent to Ship on M105</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Mozilla: Considers this proposal [worth prototyping](https://mozilla.github.io/standards-positions/#sanitizer-api), and is [actively implementing it](https://groups.google.com/g/mozilla.dev.platform/c/C4EHeQlaMbU).
+
+WebKit: See the response on the [WebKit mailing list](https://lists.webkit.org/pipermail/webkit-dev/2021-March/031731.html).
+
+
+
+## How to enable the Sanitizer API
+
+{% BrowserCompat 'api.Sanitizer' %}
+
+### Enabling via `about://flags` or CLI option
+
+
+#### Chrome
+
+Chrome is in the process of implementing the Sanitizer API. In Chrome 93 or later, you can try out the behavior by enabling `about://flags/#enable-experimental-web-platform-features` flag. In earlier versions of Chrome Canary and Dev channel, you can enable it via `--enable-blink-features=SanitizerAPI` and try it out right now. Check out the [instructions for how to run Chrome with flags](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+#### Firefox
+
+Firefox also implements the Sanitizer API as an experimental feature. To enable it, set the `dom.security.sanitizer.enabled` flag to `true` in `about:config`.
+
+### Feature detection
+
+```js
+if (window.Sanitizer) {
+  // Sanitizer API is enabled
+}
+```
+
+### Feedback
+
+If you try this API and have some feedback, we'd love to hear it. Share your thoughts on [Sanitizer API GitHub issues](https://github.com/WICG/sanitizer-api/issues) and discuss with the spec authors and folks interested in this API.
+
+
+If you find any bugs or unexpected behavior in Chrome's implementation, [file a bug to report it](https://new.crbug.com/). Select the `Blink>SecurityFeature>SanitizerAPI` components and share details to help implementers track the problem.
+
+
+
+### Demo
+
+To see the Sanitizer API in action check out the [Sanitizer API Playground](https://sanitizer-api.dev/) by [Mike West](https://twitter.com/mikewest):
+
+
+### References
+
+- [HTML Sanitizer API specification](https://wicg.github.io/sanitizer-api/)
+- [WICG/sanitizer-api repo](https://github.com/WICG/sanitizer-api)
+- [Sanitizer API FAQ](https://github.com/WICG/sanitizer-api/blob/main/faq.md)
+- [HTML Sanitizer API reference documentation on MDN](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API)
+
+---
+
+Photo by [Towfiqu barbhuiya](https://unsplash.com/@towfiqu999999) on [Unsplash](https://unsplash.com/photos/-9gPKrsbGmc).
diff --git a/src/site/content/en/blog/santa/index.md b/src/site/content/en/blog/santa/index.md
new file mode 100644
index 00000000000..21907f64b06
--- /dev/null
+++ b/src/site/content/en/blog/santa/index.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: Santa Tracker as a PWA
+date: 2017-03-26
+updated: 2017-03-26
+tags:
+  - blog
+  - case-study
+
+---
+
+[View the site](https://santatracker.google.com/)
+
+### Summary
+
+**Santa Tracker was rapidly upgraded to an offline Progressive Web App for the 2016 holiday season,
+thanks in part to our existing scene design.**
+
+## Results
+
+- Santa is a Progressive Web App (PWA) supporting add to home screen (ATHS) and offline
+- 10% of eligible sessions began via the ATHS icon
+- 75% of users natively supported custom elements and shadow DOM, two core parts of [web components](https://www.webcomponents.org/introduction)
+- [Lighthouse score of 81](https://pwa-directory.appspot.com/pwas/5704513654620160)
+- Offline, through the Service Worker API, is tied with lazy loading to only cache visited scenes and silently upgrading them on new releases
+
+## Background
+
+[Santa Tracker](https://santatracker.google.com) is a holiday tradition here at Google.
+Every year, you can celebrate the season with games and educational experiences throughout December.
+And while Santa takes a well-deserved break, the elves work to release Santa Tracker as
+open-source, both on [the web](https://github.com/google/santa-tracker-web) and for
+[Android](https://github.com/google/santa-tracker-android).
+
+On the web, Santa Tracker is a large, interactive site with many unique 'scenes'—written using
+Polymer—that supports most modern browsers.
+The assessment of whether a user's browser is 'modern' is determined through feature detection:
+Santa requires
+[`Set`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set) and the
+[Web Performance API](https://developer.mozilla.org/docs/Web/API/Performance/now), among
+others.
+
+In 2016, we upgraded the engine behind Santa Tracker to support an offline experience for most
+scenes.
+This excludes scenes backed by YouTube videos or those that deal with Santa's live location, which
+is of course only available with a direct connection to the North Pole! 📶☃️
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Dfi2cGbf8rNzTqf5Iq5k.png", alt="Santa Tracker on an Android device", width="800", height="427" %}
+  <figcaption>
+    Santa Tracker on an Android device
+  </figcaption>
+</figure>
+
+## Challenges
+
+Santa incorporates a responsive design that works well across phones, tablets and desktop.
+The site delights with great multimedia, including stylized visuals and holiday-themed audio.
+However, a regular build of Santa Tracker is several hundred megabytes!
+This is for a few reasons:
+
+- Santa is supported in over 35 languages, so many assets must be duplicated.
+- Different platforms have different media support (e.g., mp3 vs ogg).
+- Multimedia files are sometimes provided in different sizes and resolutions.
+
+Santa's elves are also hard at work throughout December, often releasing new, critical updates
+throughout the month.
+This means that assets already cached by a user's browser may need to be refreshed on repeat visits.
+
+These challenges:
+
+- Large multimedia resources for different 'scenes'
+- Changes released throughout the month
+
+…result in the unsuitability of a naïve offline strategy.
+
+## Santa, built with Polymer
+
+It's worth stepping back and talking about Santa's overall design before diving into how we
+upgraded it to an offline PWA.
+
+Santa is a single-page application, originally written in Polymer 0.5, and now upgraded to Polymer
+1.7.
+Santa is made up of a shared set of code—the router, shared navigation assets etc.
+It also has many unique 'scenes'.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Cr8LesRJk7SinGwmzlmh.gif", alt="Preloader", width="340", height="306" %}
+</figure>
+
+Each scene is accessible through a different URL—`/village.html`, `/codelab.html` and
+`/boatload.html`—and is its own web component.
+When a user opens a scene, we preload all its required HTML and assets (images, audio, css, js),
+which exist under `/scenes/[[sceneName]]` in the Santa Tracker repository.
+While that happens, users see a friendly preloader that shows progress.
+
+This approach means that we don't have to load unnecessary assets for scenes the user doesn't see
+(which is a lot of data).
+It also means that we need to keep an internal 'cache manifest' of all the assets required for
+every scene. The cache manifest is a JSON file storing a mapping from filename to an MD5 hash
+of its contents.
+
+### Load what you use
+
+This model saves bandwidth, only serving resources required for the scenes a user visits, rather
+than preloading the whole site at once.
+Santa Tracker leverages Polymer's ability to upgrade custom elements at runtime, rather than at
+load time.
+Consider the following snippet:
+
+```html
+<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
+    <dorf-scene id="village" route="village" icon="1f384" permanent
+        mode$="[[mode]]"
+        path$="scenes/dorf/dorf-scene_[[language]].html"
+        class="santa-scene" allow-page-scrolling></dorf-scene>
+
+    <boatload-scene route="boatload" icon="26f5"
+        path$="scenes/boatload/boatload-scene_[[language]].html"
+        loading-bg-color="#8fd7f7"
+        loading-src="scenes/boatload/img/loading.svg"
+        logo="scenes/boatload/img/logo.svg"
+        class="santa-scene"></boatload-scene>
+```
+
+Santa Tracker takes the following steps to load a scene, e.g., `boatload-scene`:
+
+1. All scene elements (including `<boatload-scene>`) are initially unknown and are all treated as
+    `HTMLUnknownElement` with some additional attributes.
+1. When the selected scene is changed, the `<lazy-pages>` element is notified.
+1. The `<lazy-pages>` element resolves the scene's element and `path` attribute, loading the HTML
+    import `scenes/boatload/boatload-scene_en.html`.
+    This contains the Polymer element and its dependant elements.
+1. The friendly preloader is shown.
+1. Once the HTML import is loaded and executed, `<boatload-scene>` is transparently upgraded to a
+    real Polymer element, full of holiday cheer. 🎄🎉
+
+This approach has its challenges. For example, we don't want to include duplicate web components.
+If two scenes use a common element, e.g., `paper-button`, we strip it out as part of our build
+process and instead include it in Santa's shared code.
+
+## Offline design
+
+Santa Tracker is already neatly segmented into scenes thanks to Polymer and `lazy-pages`; plus each
+scene has its own directory.
+We designed Santa Tracker's service worker, the core piece that enables offline which runs on a
+user's browser, to be aware of the shared code versus 'scene' distinction.
+
+What's the theory behind Service Worker? When a user on a supported browser loads your site, the
+frontend HTML can request that the service worker is installed.
+For Santa Tracker, the service worker lives at [`/sw.js`](https://santatracker.google.com/sw.js).
+This fires an `install` event that will precache all of Santa's shared code, so nothing needs to be
+fetched at runtime.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NbpbmayGJjqJV4vbamhm.png", alt="SW flow diagram", width="717", height="486" %}
+</figure>
+
+The Service Worker, once installed, is able to intercept all HTTP requests.
+For Santa Tracker, the simplified decision flow looks like:
+
+1. Is the request already cached?
+    - Great! Return the cached response.
+1. Does the request match a scene directory, like "scenes/boatload/boatload-scene_en.html"?
+    - Perform a network request, and store the result in the cache before returning it to the user.
+1. Otherwise, perform a regular network request.
+
+Our flow and `install` event allows Santa Tracker to load, even while a user is offline.
+However, only the scenes a user has previously loaded will be available.
+This is perfect for replaying a game and beating your high score.
+
+Keen observers may note that our caching strategy doesn't allow for _changes_ in content.
+Once a file is cached in a user's browser, it will never be changed.
+More on that later.
+
+### We'll do it live
+
+As we mentioned, Santa's elves are hard at work throughout December, and they often have to release
+new updates throughout the month.
+When a release of Santa Tracker is built, it is given a unique label—e.g., `v20161204112055`, the
+timestamp of the release (11:20:55 on the 4th of December, 2016).
+
+For this labelled release, we generate an MD5 hash of every file and store this in our 'cache
+manifest'.
+On a modern solid-state disk, this only adds a few seconds to the build process.
+
+Each release is deployed to a unique path on Google's static caching server.
+That is, older releases are never removed.
+This means that after a new release, all assets will have a different URL—even if they didn't
+change—and anything cached by the browser or the service worker will be useless, unless we do some
+extra work.
+
+We also deploy a new version of what we call the "prod" resources—Santa's index HTML and service
+worker—which live on [https://santatracker.google.com/](https://santatracker.google.com/).
+This overwrites the old version.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gSnCPrMeoXVvWQG3H5iR.png", alt="Static diagram", width="720", height="439" %}
+</figure>
+
+Whenever Santa Tracker loads, the browser will check for an updated service worker and fetch it, if
+available.
+In our case, each release generates a byte-different code.
+The browser sees this as an upgrade, and performs a new `install` event.
+
+At this point, a user's browsers will look at the new 'cache manifest'.
+This will be compared with the user's existing cache and if assets have a different MD5 hash, we
+delete them from the cache, and ask the browser to refetch it.
+However, in most cases, the cached content is largely the same or has only minor differences.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/sWvbBtDcsMpoAXs4RLnY.png", alt="Cache diagram", width="800", height="369" %}
+</figure>
+
+In Santa Tracker, upgrading the service worker causes a user's browser to immediately reload.
+
+{% Aside %}
+This is an aggressive strategy, and could
+disrupt a user who is in the middle of playing a game.
+Choose a reload strategy that's appropriate for your experiences.
+{% endAside %}
+
+### Offline browsing experience
+
+Of course, we also had to make some changes to the UI to support an offline experience—and to make
+it easier to understand for users who might not expect that a website can work offline.
+
+A small banner tells you when you're browsing offline.
+All scenes that aren't cached are "frozen" and unclickable.
+That way, users aren't able to access content that isn't available.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nB7n3klQiXAN8Vq6gn6e.png", alt="Offline", width="606", height="526" %}
+</figure>
+
+Santa Tracker makes regular requests to Santa's API.
+If these requests fail or timeout, we assume that the user is offline.
+We use this API rather than the browser's built-in [`navigator.onLine`
+property](https://developer.mozilla.org/docs/Web/API/NavigatorOnLine/onLine): this would only
+inform us whether the user is maybe online. (This is also known as Lie-Fi).
+
+### The international connection
+
+While the majority of our users are in English (followed by Japanese, Portuguese, Spanish and
+French), Santa is built and released in over 35 different languages.
+
+When a user loads Santa Tracker, we use the
+[browser's language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language)
+and other cues to choose a language to serve.
+The majority of users never overwrite this language.
+However, if a user chooses a new language through our picker, we treat this as if an upgrade is
+available—just as in the case above, when a new version of Santa Tracker is available.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/C292NniFBBZ1HXPE6GYA.gif", alt="Language", width="582", height="328" %}
+</figure>
+
+To put it another way, the current version of Santa Tracker for the purposes of the service worker
+is actually a tuple of _(build,language)_.
+
+## Add to home screen
+
+Because Santa works offline and provides a service worker, eligible users are prompted to install
+it to their home screen.
+In 2016, around 10% of eligible loads were from the home screen icon.
+
+## Conclusion
+
+We were able to rapidly convert Santa Tracker into an offline PWA—enabling a reliable, engaging
+experience—thanks to our existing scene design, made easy through our existing use of Polymer and
+web components.
+It also leverages our build system to perform efficient upgrades, invalidating changed assets only.
+
+While Santa is largely a custom-built solution, many of its principles can be found in the Polymer
+Project's [App Toolbox](https://www.polymer-project.org/1.0/toolbox/).
+We suggest you check it out if you're building a new PWA from scratch—or, if you're looking for a
+framework-agnostic approach, try the
+[Workbox Library](https://github.com/GoogleChrome/workbox).
diff --git a/src/site/content/en/blog/schemeful-samesite/index.md b/src/site/content/en/blog/schemeful-samesite/index.md
new file mode 100644
index 00000000000..101a904536f
--- /dev/null
+++ b/src/site/content/en/blog/schemeful-samesite/index.md
@@ -0,0 +1,371 @@
+---
+layout: post
+title: Schemeful Same-Site
+subhead: The definition of "same-site" is evolving to include the URL scheme,
+  so links between HTTP and HTTPS versions of a site now count as
+  cross-site requests. Upgrade to HTTPS by default to avoid issues where
+  possible or read on for details of what SameSite attribute values are needed.
+description: The definition of "same-site" is evolving to include the URL scheme,
+  so links between HTTP and HTTPS versions of a site now count as
+  cross-site requests. Upgrade to HTTPS by default to avoid issues where
+  possible or read on for details of what SameSite attribute values are needed.
+authors:
+  - bingler
+  - rowan_m
+date: 2020-11-20
+hero: image/admin/UMxBPy0AKAfbzxwgTroV.jpg
+thumbnail: image/admin/3J33n1o98vnkO6fdDFwP.jpg
+alt: Two separate plates of cookies. The plates represent the different
+  schemes, HTTP and HTTPS. The cookies represent cookies.
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %}
+This article is part of a series on the `SameSite` cookie attribute changes that includes:
+
+<ul>
+<li><a href="/understanding-cookies/">Understanding cookies</a></li>
+<li><a href="/samesite-cookies-explained/">SameSite cookies explained</a></li>
+<li><a href="/samesite-cookie-recipes/">SameSite cookies recipes</a></li>
+</ul>
+{% endAside %}
+
+[Schemeful
+Same-Site](https://mikewest.github.io/cookie-incrementalism/draft-west-cookie-incrementalism.html#rfc.section.3.3)
+modifies the definition of a (web)site from just the registrable domain to the
+scheme + registrable domain. You can find more details and examples in
+[Understanding "same-site" and
+"same-origin"](/same-site-same-origin/#%22schemeful-same-site%22).
+
+{% Aside 'key-term' %}
+This means that the insecure HTTP version of a site, for example,
+**http**://website.example, and the secure HTTPS version of that site,
+**https**://website.example, are now considered **cross-site** to each other.
+{% endAside %}
+
+The good news is: if your website is already fully upgraded to HTTPS then you
+don't need to worry about anything. Nothing will change for you.
+
+If you haven't fully upgraded your website yet then this should be the priority.
+However, if there are cases where your site visitors will go between HTTP and
+HTTPS then some of those common scenarios and the associated `SameSite` cookie
+behavior are outlined below.
+
+{% Aside 'warning' %}
+The long-term plan is to [phase out support for third-party cookies
+entirely](https://blog.chromium.org/2020/10/progress-on-privacy-sandbox-and.html),
+replacing them with privacy preserving alternatives. Setting `SameSite=None;
+Secure` on a cookie to allow it to be sent across schemes should only be
+considered a temporary solution in the migration towards full HTTPS.
+{% endAside %}
+
+You can enable these changes for testing in both Chrome and Firefox.
+
+- From Chrome 86, enable `about://flags/#schemeful-same-site`. Track progress
+  on the [Chrome Status
+  page](https://chromestatus.com/feature/5096179480133632).
+- From Firefox 79, set `network.cookie.sameSite.schemeful` to `true` via
+  `about:config`. Track progress via [the Bugzilla
+  issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1651119).
+
+One of the main reasons for the change to `SameSite=Lax` as the default for
+cookies was to protect against [Cross-Site Request Forgery
+(CSRF)](https://developer.mozilla.org/docs/Glossary/CSRF). However,
+insecure HTTP traffic still presents an opportunity for network attackers to
+tamper with cookies that will then be used on the secure HTTPS version of the
+site. Creating this additional cross-site boundary between schemes provides
+further defense against these attacks.
+
+## Common cross-scheme scenarios
+
+{% Aside 'key-term' %}
+In the examples below where the URLs all have the same registrable domain, e.g.
+site.example, but different schemes, for example, **http**://site.example vs.
+**https**://site.example, they are referred to as **cross-scheme** to each
+other.
+{% endAside %}
+
+### Navigation
+
+Navigating between cross-scheme versions of a website (for example, linking from
+**http**://site.example to **https**://site.example) would previously allow
+`SameSite=Strict` cookies to be sent. This is now treated as a cross-site
+navigation which means `SameSite=Strict` cookies will be blocked.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yDViqKg9eeEeAEiCNqe4.png", alt="A cross-scheme navigation triggered by following a link on the insecure HTTP version of a site to the secure HTTPS version. SameSite=Strict cookies blocked, SameSite=Lax and SameSite=None; Secure cookies are allowed.", width="800", height="342" %}
+  <figcaption>
+    Cross-scheme navigation from HTTP to HTTPS.
+  </figcaption>
+</figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td><strong>HTTP → HTTPS</strong>
+   </td>
+   <td><strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Blocked
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Lax</code>
+   </td>
+   <td>✓ Allowed
+   </td>
+   <td>✓ Allowed
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Allowed
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+</table>
+
+### Loading subresources
+
+{% Aside 'warning' %}
+All major browsers block [active mixed
+content](https://developer.mozilla.org/docs/Web/Security/Mixed_content)
+such as scripts or iframes. Additionally, browsers including
+[Chrome](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html)
+and [Firefox](https://groups.google.com/g/mozilla.dev.platform/c/F163Jz32oYY)
+are working toward upgrading or blocking passive mixed content.
+{% endAside %}
+
+Any changes you make here should only be considered a temporary fix while you
+work to upgrade to full HTTPS.
+
+Examples of subresources include images, iframes, and network requests made with
+XHR or Fetch.
+
+Loading a cross-scheme subresource on a page would previously allow
+`SameSite=Strict` or `SameSite=Lax` cookies to be sent or set. Now this is
+treated the same way as any other third-party or cross-site subresource which
+means that any `SameSite=Strict` or `SameSite=Lax` cookies will be blocked.
+
+Additionally, even if the browser does allow resources from insecure schemes to
+be loaded on a secure page, all cookies will be blocked on these requests as
+third-party or cross-site cookies require `Secure`.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GgR6Yln1f9JGkt04exRC.png", alt="A cross-scheme subresource resulting from a resource from the secure HTTPS version of the site being included on the insecure HTTP version. SameSite=Strict and SameSite=Lax cookies blocked, and SameSite=None; Secure cookies are allowed.", width="800", height="285" %}
+  <figcaption>
+    An HTTP page including a cross-scheme subresource via HTTPS.
+  </figcaption>
+</figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td><strong>HTTP → HTTPS</strong>
+   </td>
+   <td><strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Blocked
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Lax</code>
+   </td>
+   <td>⛔ Blocked
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Allowed
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+</table>
+
+### POSTing a form
+
+Posting between cross-scheme versions of a website would previously allow
+cookies set with `SameSite=Lax` or `SameSite=Strict` to be sent. Now this is
+treated as a cross-site POST—only `SameSite=None` cookies can be sent. You may
+encounter this scenario on sites that present the insecure version by default,
+but upgrade users to the secure version on submission of the sign-in or
+check-out form.
+
+As with subresources, if the request is going from a secure, e.g. HTTPS, to an
+insecure, e.g. HTTP, context then all cookies will be blocked on these requests
+as third-party or cross-site cookies require `Secure`.
+
+{% Aside 'warning' %}
+The best solution here is to ensure both the form page and destination are on a
+secure connection such as HTTPS. This is especially important if the user is
+entering any sensitive information into the form.
+{% endAside %}
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ud9LkDeGJUWHObifD718.png", alt="A cross-scheme form submission resulting from a form on the insecure HTTP version of the site being submitted to the secure HTTPS version. SameSite=Strict and SameSite=Lax cookies blocked, and SameSite=None; Secure cookies are allowed.", width="800", height="376" %}
+  <figcaption>
+    Cross-scheme form submission from HTTP to HTTPS.
+  </figcaption>
+</figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td><strong>HTTP → HTTPS</strong>
+   </td>
+   <td><strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Blocked
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=Lax</code>
+   </td>
+   <td>⛔ Blocked
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+  <tr>
+   <td><code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Allowed
+   </td>
+   <td>⛔ Blocked
+   </td>
+  </tr>
+</table>
+
+## How can I test my site?
+
+Developer tooling and messaging are available in Chrome and Firefox.
+
+From Chrome 86, the [Issue tab in
+DevTools](https://developer.chrome.com/docs/devtools/issues/) will
+include Schemeful Same-Site issues. You may see the following issues highlighted
+for your site.
+
+Navigation issues:
+  - "Migrate entirely to HTTPS to continue having cookies sent on same-site
+    requests"—A warning that the cookie **will be** blocked in a future version
+    of Chrome.
+  - "Migrate entirely to HTTPS to have cookies sent on same-site requests"—A
+    warning that the cookie **has been** blocked.
+
+Subresource loading issues:
+  - "Migrate entirely to HTTPS to continue having cookies sent to same-site
+    subresources" or "Migrate entirely to HTTPS to continue allowing cookies to
+    be set by same-site subresources"—Warnings that the cookie **will be**
+    blocked in a future version of Chrome.
+  - "Migrate entirely to HTTPS to have cookies sent to same-site subresources"
+    or "Migrate entirely to HTTPS to allow cookies to be set by same-site
+    subresources"—Warnings that the cookie **has been** blocked. The latter
+    warning can also appear when POSTing a form.
+
+More detail is available in [Testing and Debugging Tips for Schemeful
+Same-Site](https://www.chromium.org/updates/schemeful-same-site/testing-and-debugging-tips-for-schemeful-same-site).
+
+From Firefox 79, with `network.cookie.sameSite.schemeful` set to `true` via
+`about:config` the console will display message for Schemeful Same-Site issues.
+You may see the following on your site:
+
+- "Cookie `cookie_name` **will be soon** treated as cross-site cookie against
+  `http://site.example/` because the scheme does not match."
+- "Cookie `cookie_name` **has been** treated as cross-site against
+  `http://site.example/` because the scheme does not match."
+
+## FAQ
+
+### My site is already fully available on HTTPS, why am I seeing issues in my browser's DevTools?
+
+It's possible that some of your links and subresources still point to insecure
+URLs.
+
+One way to fix this issue is to use [HTTP
+Strict-Transport-Security](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)
+(HSTS) and the `includeSubDomain` directive. With HSTS + `includeSubDomain` even
+if one of your pages accidentally includes an insecure link the browser will
+automatically use the secure version instead.
+
+### What if I can't upgrade to HTTPS?
+
+While we strongly recommend that you upgrade your site entirely to HTTPS to
+protect your users, if you're unable to do so yourself we suggest speaking with
+your hosting provider to see if they can offer that option. If you self-host,
+then [Let's Encrypt](https://letsencrypt.org/) provides a number of tools to
+install and configure a certificate. You can also investigate moving your site
+behind a CDN or other proxy that can provide the HTTPS connection.
+
+If that's still not possible then try relaxing the `SameSite` protection on
+affected cookies.
+
+- In cases where only `SameSite=Strict` cookies are being blocked you can lower
+  the protection to `Lax`.
+- In cases where both `Strict` and `Lax` cookies are being blocked and your
+  cookies are being sent to (or set from) a secure URL you can lower the
+  protections to `None`.
+  - This workaround will **fail** if the URL you're sending cookies to (or
+    setting them from) is insecure. This is because `SameSite=None` requires the
+    `Secure` attribute on cookies which means those cookies may not be sent or
+    set over an insecure connection. In this case you will be unable to access
+    that cookie until your site is upgraded to HTTPS.
+  - Remember, this is only temporary as eventually third-party cookies will be
+    phased out entirely.
+
+### How does this affect my cookies if I haven't specified a `SameSite` attribute?
+
+Cookies without a `SameSite` attribute are treated as if they specified
+`SameSite=Lax` and the same cross-scheme behavior applies to these cookies as
+well. Note that the temporary exception to unsafe methods still applies, see
+[the Lax + POST mitigation in the Chromium `SameSite`
+FAQ](https://www.chromium.org/updates/same-site/faq) for more information.
+
+### How are WebSockets affected?
+
+WebSocket connections will still be considered same-site if they're the same
+secureness as the page.
+
+Same-site:
+  - `wss://` connection from `https://`
+  - `ws://` connection from `http://`
+
+Cross-site:
+  - `wss://` connection from `http://`
+  - `ws://` connection from `https://`
+
+_Photo by [Julissa
+Capdevilla](https://unsplash.com/photos/wNjgWrEXAL0?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
+on
+[Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/security-credential-management-retrieve-credentials/index.md b/src/site/content/en/blog/security-credential-management-retrieve-credentials/index.md
new file mode 100644
index 00000000000..d5741991f4a
--- /dev/null
+++ b/src/site/content/en/blog/security-credential-management-retrieve-credentials/index.md
@@ -0,0 +1,439 @@
+---
+layout: post
+title: Sign in Users
+date: 2016-11-08
+updated: 2019-07-22
+authors:
+  - agektmr
+  - megginkearney
+---
+
+To sign in users, retrieve the credentials from the browser's password
+manager and use those to automatically log in users.
+For users with multiple accounts,
+let them select the account with just one tap using the account chooser.
+
+## Auto Sign-in
+
+Auto sign-in can happen anywhere on your website;
+not only the top page but other leaf pages too.
+This is useful when users reach various pages in your website,
+via a search engine.
+
+To enable auto sign-in:
+
+1. Get credential information.
+2. Authenticate the user.
+3. Update the UI or proceed to the personalized page.
+
+### Get credential information
+
+{% BrowserCompat 'api.CredentialsContainer.get' %}
+
+To get credential information, invoke
+[`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get).
+Specify the type of credentials to request
+by giving it a `password` or `federated`.
+
+Always use `mediation: 'silent'` for auto sign-ins,
+so you can easily dismiss the process if the user:
+
+- Has no credentials stored.
+- Has multiple credentials stored.
+- Is signed out.
+
+Before getting a credential,
+don’t forget to check if the user is already signed in:
+
+```js
+if (window.PasswordCredential || window.FederatedCredential) {
+  if (!user.isSignedIn()) {
+    navigator.credentials.get({
+      password: true,
+      federated: {
+        providers: ['https://accounts.google.com'],
+      },
+      mediation: 'silent',
+    });
+    // ...
+  }
+}
+```
+
+The promise returned by `navigator.credentials.get()` resolves
+with either a credential object or `null`.
+To determine whether it is a `PasswordCredential` or a `FederatedCredential`,
+simply look at the `.type` property of the object,
+which will be either `password` or `federated`.
+
+If the `.type` is `federated`,
+the `.provider` property is a string that represents the identity provider.
+
+### Authenticate user
+
+Once you have the credential,
+run an authentication flow depending on the type of credential,
+`password` or `federated`:
+
+```js
+    }).then(c => {
+     if (c) {
+       switch (c.type) {
+         case 'password':
+           return sendRequest(c);
+           break;
+         case 'federated':
+           return gSignIn(c);
+           break;
+       }
+     } else {
+       return Promise.resolve();
+     }
+```
+
+When the promise resolves,
+check if you've received a credential object.
+If not, it means auto sign-in couldn’t happen.
+Silently dismiss the auto sign-in process.
+
+### Update UI
+
+If the authentication is successful,
+update the UI or forward the user to the personalized page:
+
+```js
+    }).then(profile => {
+     if (profile) {
+       updateUI(profile);
+     }
+```
+
+### Don’t forget to show authentication error message
+
+To avoid user confusion,
+users should see a blue toast saying “Signing in”
+at the time of getting the credential object:
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/4nT0MfpnEaOvFAmZxkLM.png", alt="Blue toast showing user is signing in.", width="386", height="123" %}
+</figure>
+
+One important tip: if you succeed in obtaining a credential object
+but fail to authenticate the user, you should show an error message:
+
+```js
+        }).catch(error => {
+          showError('Sign-in Failed');
+        });
+      }
+    }
+```
+
+### Full code example
+
+```js
+if (window.PasswordCredential || window.FederatedCredential) {
+  if (!user.isSignedIn()) {
+    navigator.credentials
+      .get({
+        password: true,
+        federated: {
+          providers: ['https://accounts.google.com'],
+        },
+        mediation: 'silent',
+      })
+      .then((c) => {
+        if (c) {
+          switch (c.type) {
+            case 'password':
+              return sendRequest(c);
+              break;
+            case 'federated':
+              return gSignIn(c);
+              break;
+          }
+        } else {
+          return Promise.resolve();
+        }
+      })
+      .then((profile) => {
+        if (profile) {
+          updateUI(profile);
+        }
+      })
+      .catch((error) => {
+        showError('Sign-in Failed');
+      });
+  }
+}
+```
+
+## Sign-in via account chooser
+
+If a user requires mediation, or has multiple accounts,
+use the account chooser to let the user sign-in,
+skipping the ordinary sign-in form, for example:
+
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/drlYzW650dtEob0LyzRl.png", alt="Google account chooser showing multiple accounts.", width="390", height="346" %}
+</figure>
+
+The steps to sign in via the account chooser are the same as in
+[auto sign-in](#auto-sign-in),
+with an additional call to show the account chooser
+as part of getting credential information:
+
+1. Get the credential information and show the account chooser.
+2. [Authenticate the user](#authenticate-user).
+3. [Update the UI or proceed to a personalized page](#update-ui).
+
+### Get credential information and show account chooser
+
+Show an account chooser in response to a defined user action,
+for example, when the user taps the "Sign-In" button. Call
+[`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get),
+and add `mediation: 'optional'` or `mediation: 'required'` to show the account chooser.
+
+When `mediation` is `required`, the user is always shown an account chooser to sign in.
+This option allows users with multiple accounts to easily switch between them.
+When `mediation` is `optional`,
+the user is explicitly shown an account chooser to sign in after a
+[`navigator.credentials.preventSilentAccess()`](/web/fundamentals/security/credential-management/retrieve-credentials#turn_off_auto_sign-in_for_future_visits)
+call.
+This is normally to ensure automatic sign-in doesn't happen
+after the user chooses to sign-out or unregister.
+
+Example showing `mediation: 'optional'`:
+
+```js
+    var signin = document.querySelector('#signin');
+    signin.addEventListener('click', e => {
+     if (window.PasswordCredential || window.FederatedCredential) {
+       navigator.credentials.get({
+         password: true,
+         federated: {
+           providers: [
+             'https://accounts.google.com'
+           ]
+         },
+         mediation: 'optional'
+       }).then(c => {
+```
+
+Once the user selects an account,
+the promise resolves with the credential.
+If the users cancels the account chooser,
+or there are no credentials stored,
+the promise resolves with `null`.
+In that case, fall back to the sign in form experience.
+
+### Don't forget to fall back to sign-in form
+
+You should fall back to a sign-in form for any of these reasons:
+
+- No credentials are stored.
+- The user dismissed the account chooser without selecting an account.
+- The API is not available.
+
+```js
+    }).then(profile => {
+        if (profile) {
+          updateUI(profile);
+        } else {
+          location.href = '/signin';
+        }
+    }).catch(error => {
+        location.href = '/signin';
+    });
+```
+
+### Full code example
+
+```js
+var signin = document.querySelector('#signin');
+signin.addEventListener('click', (e) => {
+  if (window.PasswordCredential || window.FederatedCredential) {
+    navigator.credentials
+      .get({
+        password: true,
+        federated: {
+          providers: ['https://accounts.google.com'],
+        },
+        mediation: 'optional',
+      })
+      .then((c) => {
+        if (c) {
+          switch (c.type) {
+            case 'password':
+              return sendRequest(c);
+              break;
+            case 'federated':
+              return gSignIn(c);
+              break;
+          }
+        } else {
+          return Promise.resolve();
+        }
+      })
+      .then((profile) => {
+        if (profile) {
+          updateUI(profile);
+        } else {
+          location.href = '/signin';
+        }
+      })
+      .catch((error) => {
+        location.href = '/signin';
+      });
+  }
+});
+```
+
+## Federated Login
+
+Federated login lets users sign in with one tap and
+without having to remember additional login details for your website.
+
+To implement federated login:
+
+1. Authenticate the user with a third-party identity.
+2. Store the identity information.
+3. [Update the UI or proceed to a personalized page](#update-ui) (same as in auto sign-in).
+
+### Authenticate user with third-party identity
+
+When a user taps on a federated login button,
+run the specific identity provider authentication flow with the
+[`FederatedCredential`](https://developer.mozilla.org/docs/Web/API/FederatedCredential).
+
+{% BrowserCompat 'api.FederatedCredential' %}
+
+For example, if the provider is Google, use the
+[Google Sign-In JavaScript library](/identity/sign-in/web/):
+
+```js
+navigator.credentials
+  .get({
+    password: true,
+    mediation: 'optional',
+    federated: {
+      providers: ['https://account.google.com'],
+    },
+  })
+  .then(function (cred) {
+    if (cred) {
+      // Instantiate an auth object
+      var auth2 = gapi.auth2.getAuthInstance();
+
+      // Is this user already signed in?
+      if (auth2.isSignedIn.get()) {
+        var googleUser = auth2.currentUser.get();
+
+        // Same user as in the credential object?
+        if (googleUser.getBasicProfile().getEmail() === cred.id) {
+          // Continue with the signed-in user.
+          return Promise.resolve(googleUser);
+        }
+      }
+
+      // Otherwise, run a new authentication flow.
+      return auth2.signIn({
+        login_hint: id || '',
+      });
+    }
+  });
+```
+
+Google Sign-In results in an ID token as a proof of authentication.
+
+In general, federated logins are built on top of standard protocols such as
+[OpenID Connect](http://openid.net/connect/) or
+[OAuth](https://oauth.net/2/).
+To learn how to authenticate with federated accounts,
+refer to respective federated identity providers' docs.
+Popular examples include:
+
+- [Google Sign-In](/identity/sign-in/web/)
+- [Facebook Login](https://developers.facebook.com/docs/facebook-login)
+- [Twitter Sign-in](https://dev.twitter.com/web/sign-in/implementing)
+- [GitHub OAuth](https://developer.github.com/v3/oauth/)
+
+### Store identity information
+
+Once authentication is done, you can store the identity information.
+The information you’ll store here is the `id` from the identity provider
+and a provider string that represents the identity provider
+(`name` and `iconURL` are optional).
+Learn more about this information in the
+[Credential Management specification](https://w3c.github.io/webappsec-credential-management/#credential).
+
+To store federated account details, instantiate a new
+[`FederatedCredential`](https://developer.mozilla.org/docs/Web/API/FederatedCredential)
+object with the user's identifier and the provider's identifier.
+Then invoke
+[`navigator.credentials.store()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/store)
+to store the identity information.
+
+After successful federation,
+instantiate a `FederatedCredential` synchronously, or asynchronously:
+
+Example of synchronous approach:
+
+```js
+// Create credential object synchronously.
+var cred = new FederatedCredential({
+  id: id, // id in IdP
+  provider: 'https://account.google.com', // A string representing IdP
+  name: name, // name in IdP
+  iconURL: iconUrl, // Profile image url
+});
+```
+
+Example of asynchronous approach:
+
+```js
+// Create credential object asynchronously.
+var cred = await navigator.credentials.create({
+  federated: {
+    id: id,
+    provider: 'https://accounts.google.com',
+    name: name,
+    iconURL: iconUrl,
+  },
+});
+```
+
+Then store the credential object:
+
+```js
+// Store it
+navigator.credentials.store(cred).then(function () {
+  // continuation
+});
+```
+
+## Sign out {: #sign-out }
+
+Sign out your users when the sign-out button is tapped.
+First terminate the session,
+then turn off auto sign-in for future visits.
+(How you terminate your sessions is totally up to you.)
+
+### Turn off auto sign-in for future visits
+
+Call
+`navigator.credentials.preventSilentAccess()`:
+
+```js
+signoutUser();
+if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+  navigator.credentials.preventSilentAccess();
+}
+```
+
+This will ensure the auto sign-in won’t happen until next time the user enables auto sign-in.
+To resume auto sign-in, a user can choose to intentionally sign in
+by choosing the account they wish to sign in with from the account chooser.
+Then the user is always signed back in until they explicitly sign out.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/security-credential-management-save-forms/index.md b/src/site/content/en/blog/security-credential-management-save-forms/index.md
new file mode 100644
index 00000000000..b13ce876005
--- /dev/null
+++ b/src/site/content/en/blog/security-credential-management-save-forms/index.md
@@ -0,0 +1,201 @@
+---
+layout: post
+title: Save Credentials from Forms
+date: 2022-02-24
+updated: 2019-07-25
+authors:
+  - agektmr
+  - megginkearney
+---
+
+<figure>
+{% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/hglb1gObe5c9zqoF2VuX.mov" %}
+<figcaption>Save Credentials from sign-in forms</figcaption>
+</figure>
+
+Keep your registration and sign-in forms as simple as possible.
+
+Save credentials from sign-in forms
+so users won't have to sign in again when they return.
+
+To store user credentials from forms:
+
+1. Include `autocomplete` in the form.
+2. Prevent the form from submitting.
+3. Authenticate by sending a request.
+4. Store the credential.
+5. Update the UI or proceed to the personalized page.
+
+## Include `autocomplete` in the form
+
+Before moving forward,
+check if your form includes `autocomplete` attributes.
+This helps the Credential Management API find the `id` and `password`
+from the form and construct a credential object.
+
+This also helps browsers not supporting the Credential Management API
+to understand its semantics.
+Learn more about autofill in
+[this article](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/) by
+[Jason Grigsby](https://medium.com/@grigs).
+
+```html
+<form id="signup" method="post">
+  <input name="email" type="text" autocomplete="username email" />
+  <input name="display-name" type="text" autocomplete="name" />
+  <input name="password" type="password" autocomplete="new-password" />
+  <input type="submit" value="Sign Up!" />
+</form>
+```
+
+## Prevent the form from submitting
+
+When the user presses the submit button, prevent the form from submitting, which would otherwise
+result in a page transition:
+
+```js
+    var f = document.querySelector('#signup');
+    f.addEventListener('submit', e => {
+      e.preventDefault();
+```
+
+By preventing a page transition,
+you can retain the credential information while verifying its authenticity.
+
+## Authenticate by sending a request
+
+To authenticate the user, deliver credential information to your server using AJAX.
+
+On the server side, create an endpoint (or simply alter an existing endpoint)
+that responds with HTTP code 200 or 401, so that it’s clear to the browser
+whether the sign-up/sign-in/change password is successful or not.
+
+For example:
+
+```js
+// Try sign-in with AJAX
+fetch('/signin', {
+  method: 'POST',
+  body: new FormData(e.target),
+  credentials: 'include',
+});
+```
+
+## Store the credential
+
+To store a credential, first check if the API is available,
+then instantiate a
+[`PasswordCredential`](https://developer.mozilla.org/docs/Web/API/PasswordCredential)
+with the form element as an argument
+either synchronously or asynchronously.
+Call
+[`navigator.credentials.store()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/store).
+If the API is not available,
+you can simply forward the profile information to the next step.
+
+Synchronous example:
+
+```js
+if (window.PasswordCredential) {
+  var c = new PasswordCredential(e.target);
+  return navigator.credentials.store(c);
+} else {
+  return Promise.resolve(profile);
+}
+```
+
+Asynchronous example:
+
+```js
+if (window.PasswordCredential) {
+  var c = await navigator.credentials.create({password: e.target});
+  return navigator.credentials.store(c);
+} else {
+  return Promise.resolve(profile);
+}
+```
+
+Once the request succeeds, store the credential information.
+(Don't store the credentials information if the request failed
+as doing so confuses returning users.)
+
+When the Chrome browser obtains credential information,
+a notification pops up asking to store a credential
+(or federation provider).
+
+<figure>
+  {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/gbo4Q6zSt7ryUzb8d3KB.png", alt="store credential", width="385", height="202" %}
+  <figcaption>Notification for an auto signed-in user</figcaption>
+</figure>
+
+## Update the UI
+
+If everything went well, update the UI using the profile information,
+or proceed to the personalized page.
+
+```js
+     }).then(profile => {
+       if (profile) {
+         updateUI(profile);
+       }
+     }).catch(error => {
+       showError('Sign-in Failed');
+     });
+    });
+```
+
+## Full code example
+
+```js
+// Get form's DOM object
+var f = document.querySelector('#signup');
+f.addEventListener('submit', (e) => {
+  // Stop submitting form by itself
+  e.preventDefault();
+
+  // Try sign-in with AJAX
+  fetch('/signin', {
+    method: 'POST',
+    body: new FormData(e.target),
+    credentials: 'include',
+  })
+    .then((res) => {
+      if (res.status == 200) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject('Sign-in failed');
+      }
+    })
+    .then((profile) => {
+      // Instantiate PasswordCredential with the form
+      if (window.PasswordCredential) {
+        var c = new PasswordCredential(e.target);
+        return navigator.credentials.store(c);
+      } else {
+        return Promise.resolve(profile);
+      }
+    })
+    .then((profile) => {
+      // Successful sign-in
+      if (profile) {
+        updateUI(profile);
+      }
+    })
+    .catch((error) => {
+      // Sign-in failed
+      showError('Sign-in Failed');
+    });
+});
+```
+
+## Browser compatibility
+
+### `PasswordCredential`
+
+{% BrowserCompat 'api.PasswordCredential' %}
+
+### `navigator.credentials.store()`
+
+{% BrowserCompat 'api.CredentialsContainer.store' %}
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/security-credential-management/index.md b/src/site/content/en/blog/security-credential-management/index.md
new file mode 100644
index 00000000000..34c262f8449
--- /dev/null
+++ b/src/site/content/en/blog/security-credential-management/index.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: The Credential Management API
+date: 2016-11-08
+updated: 2018-09-20
+authors:
+  - agektmr
+  - megginkearney
+---
+
+The [Credential Management API](https://www.w3.org/TR/credential-management/)
+is a standards-based browser API that provides a programmatic interface
+between the site and the browser for seamless sign-in across devices.
+
+The Credential Management API:
+
+- **Removes friction from sign-in flows** - Users can be automatically signed back into a site even if their session has expired or they saved credentials on another device.
+- **Allows one tap sign in with account chooser** - Users can choose an account in a native account chooser.
+- **Stores credentials** - Your application can store either a username and password combination or even federated account details. These credentials can be synced across devices by the browser.
+
+{% Aside 'important' %}
+Using the Credential Management API requires the page be served
+from a secure origin.
+{% endAside %}
+
+Want to see it in action? Try the
+[Credential Management API Demo](https://credential-management-sample.appspot.com)
+and take a look at the
+[code](https://github.com/GoogleChrome/credential-management-sample).
+
+### Check Credential Management API browser support
+
+{% BrowserCompat 'api.Credential' %}
+
+Before using the Credential Management API, first check if `PasswordCredential`
+or `FederatedCredential` is supported.
+
+```js
+if (window.PasswordCredential || window.FederatedCredential) {
+  // Call navigator.credentials.get() to retrieve stored
+  // PasswordCredentials or FederatedCredentials.
+}
+```
+
+{% Aside 'warning' %}
+Feature detection by checking `navigator.credentials` may break your
+website on browsers supporting
+[WebAuthn](https://www.w3.org/TR/webauthn/)(PublicKeyCredential) but not all
+credential types (`PasswordCredential` and `FederatedCredential`) defined by the
+Credential Management API. [Learn
+more](/web/updates/2018/03/webauthn-credential-management).
+{% endAside %}
+
+### Sign in user
+
+To sign in the user, retrieve the credentials from the browser's password
+manager and use them to log in the user.
+
+For example:
+
+1. When a user lands on your site and they are not signed in,
+   call [`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get).
+2. Use the retrieved credentials to sign in the user.
+3. Update the UI to indicate the user has been signed in.
+
+Learn more in
+[Sign In Users](../security-credential-management-retrieve-credentials#auto-sign-in).
+
+### Save or update user credentials
+
+If the user signed in with a federated identity provider such as Google
+Sign-In, Facebook, GitHub:
+
+1. After the user successfully signs in or creates an account, create the [`FederatedCredential`](https://developer.mozilla.org/docs/Web/API/FederatedCredential) with the user's email address as
+   the ID and specify the identity provider with `FederatedCredentials.provider`.
+2. Save the credential object using [`navigator.credentials.store()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/store).
+
+Learn more in
+[Sign In Users](../security-credential-management-retrieve-credentials#federated-login).
+
+If the user signed in with a username and password:
+
+1. After the user successfully signs in or creates an account, create the [`PasswordCredential`](https://developer.mozilla.org/docs/Web/API/PasswordCredential) with the user ID and
+   the password.
+2. Save the credential object using [`navigator.credentials.store()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/store).
+
+Learn more in
+[Save Credentials from Forms](../security-credential-management-save-forms).
+
+### Sign out
+
+When the user signs out, call [`navigator.credentials.preventSilentAccess()`](/web/fundamentals/security/credential-management/retrieve-credentials#turn_off_auto_sign-in_for_future_visits)
+to prevent the user from being automatically signed back in.
+
+Disabling auto-sign-in also enables users to switch between accounts easily,
+for example, between work and personal accounts, or between accounts on
+shared devices, without having to re-enter their sign-in information.
+
+Learn more in
+[Sign out](../security-credential-management-retrieve-credentials#sign-out).
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/semantics-aria/index.md b/src/site/content/en/blog/semantics-aria/index.md
new file mode 100644
index 00000000000..1275ea7004a
--- /dev/null
+++ b/src/site/content/en/blog/semantics-aria/index.md
@@ -0,0 +1,169 @@
+---
+layout: post
+title: Introduction to ARIA
+subhead: Introduction to ARIA and non-native HTML semantics
+description: Introduction to ARIA and non-native HTML semantics
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2020-06-27
+#tags:
+
+---
+
+So far, we've encouraged using native HTML elements because they give you focus,
+keyboard support, and built-in semantics, but there are times when a simple
+layout and native HTML won't do the job. For example, currently there's no
+standardized HTML element for a very common UI construct, the pop-up menu. Nor
+is there an HTML element that provides a semantic characteristic such as "the
+user needs to know about this as soon as possible".
+
+In this lesson, then, we'll explore how to express semantics that HTML can't
+express on its own.
+
+The [Web Accessibility Initiative's Accessible Rich Internet Applications
+specification](https://www.w3.org/TR/wai-aria/){: .external } (WAI-ARIA, or just
+ARIA) is good for bridging areas with accessibility issues that can't be managed
+with native HTML. It works by allowing you to specify attributes that modify the
+way an element is translated into the accessibility tree. Let's look at an
+example.
+
+In the following snippet, we use a list item as a kind of custom checkbox. The
+CSS "checkbox" class gives the element the required visual characteristics.
+
+```html
+<li tabindex="0" class="checkbox" checked>
+    Receive promotional offers
+</li>
+```    
+
+While this works fine for sighted users, a screen reader will give no indication
+that the element is meant to be a checkbox, so low-vision users may miss the
+element entirely.
+
+Using ARIA attributes, however, we can give the element the missing information
+so the screen reader can properly interpret it. Here, we've added the `role` and
+`aria-checked` attributes to explicitly identify the element as a checkbox and
+to specify that it is checked by default. The list item will now be added to the
+accessibility tree and a screen reader will correctly report it as a checkbox.
+
+
+```html
+<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
+    Receive promotional offers
+</li>
+```    
+
+{% Aside %}
+We'll cover the list of ARIA attributes and when to use them [later](#what-can-aria-do).
+{% endAside %}
+
+
+ARIA works by changing and augmenting the standard DOM accessibility tree.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fB932LjGfGgJRELivys8.jpg", alt="The standard DOM accessibility tree.", width="575", height="383", class="float-right" %}
+</figure>
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/G1IWcJBT9tfZq4xCKTqq.jpg", alt="The ARIA augmented accessibility tree.", width="575", height="383", class="float-right" %}
+</figure>
+
+
+Although ARIA allows us to subtly (or even radically) modify the accessibility
+tree for any element on the page, that is the only thing it changes. **ARIA
+doesn't augment any of the element's inherent behavior**; it won't make the
+element focusable or give it keyboard event listeners. That is still part of our
+development task.
+
+It's important to understand that there is no need to redefine default
+semantics. Regardless of its use, a standard HTML `<input type="checkbox">`
+element doesn't need an additional `role="checkbox"` ARIA attribute to be
+correctly announced.
+
+It's also worth noting that certain HTML elements have restrictions on what ARIA
+roles and attributes can be used on them. For example, a standard `<input
+type="text">` element may not have any additional role/attribute applied to it.
+
+>See the [ARIA in HTML spec](https://www.w3.org/TR/html-aria/#sec-strong-native-semantics)
+for more information.
+
+Let's see what other capabilities ARIA has to offer.
+
+## What can ARIA do?
+
+As you saw with the checkbox example, ARIA can modify existing element semantics
+or add semantics to elements where no native semantics exist. It can also
+express semantic patterns that don't exist at all in HTML, like a menu or a tab
+panel. Often, ARIA lets us create widget-type elements that wouldn't be possible
+with plain HTML.
+
+ - For example, ARIA can add extra label and description text that is only
+   exposed to assistive technology APIs.<br>
+
+
+```html      
+<button aria-label="screen reader only label"></button>
+```
+
+ - ARIA can express semantic relationships between elements that extend the
+   standard parent/child connection, such as a custom scrollbar that controls a
+   specific region.
+
+```html
+    <div role="scrollbar" aria-controls="main"></div>
+    <div id="main">
+    . . .
+    </div>
+```
+    
+
+ - And ARIA can make parts of the page "live," so they immediately inform
+   assistive technology when they change.
+
+```html
+    <div aria-live="polite">
+      <span>GOOG: $400</span>
+    </div>
+```
+    
+One of the core aspects of the ARIA system is its collection of *roles*. A role
+in accessibility terms amounts to a shorthand indicator for a particular UI
+pattern. ARIA provides a vocabulary of patterns we can use via the `role`
+attribute on any HTML element.
+
+When we applied `role="checkbox"` in the previous example, we were telling
+assistive technology that the element should follow the "checkbox" pattern. That
+is, we're guaranteeing that it will have a checked state (either checked or not
+checked), and that the state may be toggled using the mouse or the spacebar,
+just like a standard HTML checkbox element.
+
+In fact, because keyboard interactions feature so prominently in screen reader
+usage, it's very important to make sure that, when creating a custom widget, the
+`role` attribute is always applied in the same place as the `tabindex`
+attribute; this ensures that keyboard events go to the right place and that when
+focus lands on an element its role is conveyed accurately.
+
+The [ARIA spec](https://www.w3.org/TR/wai-aria/) describes a
+taxonomy of possible values for the `role` attribute and associated ARIA
+attributes that may be used in conjunction with those roles. This is the best
+source of definitive information about how the ARIA roles and attributes work
+together and how they can be used in a way that is supported by browsers and
+assistive technologies.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HSW9NAR73Hd7gDYiWhQh.jpg", alt="A list of all the available ARIA roles.", width="800", height="361" %}
+</figure>
+
+
+However, the spec is very dense; a more approachable place to start is the [ARIA
+Authoring Practices document](https://www.w3.org/TR/wai-aria-practices-1.1/)
+, which explores best practices for using the available ARIA roles and
+properties.
+
+ARIA also offers landmark roles that extend the options available in HTML5. See
+the [Landmark Roles Design
+Patterns](https://www.w3.org/TR/wai-aria-practices-1.1#kbd_layout_landmark_XHTML)
+spec for more information.
diff --git a/src/site/content/en/blog/semantics-builtin/index.md b/src/site/content/en/blog/semantics-builtin/index.md
new file mode 100644
index 00000000000..520b6a427c3
--- /dev/null
+++ b/src/site/content/en/blog/semantics-builtin/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Introduction to semantics
+subhead: Introduction to semantics and assistive technology
+description: Introduction to semantics and assistive technology
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2018-09-20
+#tags:
+
+---
+
+You've seen how to make a site accessible to users who can't use a mouse or
+pointing device &mdash; whether due to physical impairment, a technology issue,
+or personal preference &mdash; by addressing keyboard-only use. While it
+requires some care and thought, it's not a huge amount of work if you plan it
+from the beginning. Once that basic work is done, you're a long way down the
+path to a fully accessible and more polished site.
+
+In this lesson, we'll build on that work and get you thinking about other
+accessibility factors, such as how to build websites to support [users like
+Victor Tsaran](/accessibility/#understanding-users-diversity),
+who can't see the screen.
+
+First, we'll get some background on *assistive technology*, the general term for
+tools like screen readers that help  users with impairments that can keep them
+from accessing information.
+
+Next, we'll look at some general user experience concepts, and build on those to
+take a deeper dive into the experience of users of assistive technology.
+
+Finally, we'll see how to use HTML effectively to create a good experience for
+these users, and how it overlaps quite a bit with the way we addressed focus
+earlier.
+
+## Assistive technology
+
+*Assistive technology* is an umbrella term for devices, software, and tools that
+help any person with a disability complete a task. In the broadest sense this
+could be something low-tech like a crutch for walking or a magnifying glass for
+reading, or something high-tech like a robotic arm or image recognition software
+on a smartphone.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8H2hJ9uJOP9bmlJozkIw.png", alt="Assistive technology examples including crutch magnifying glass and robotic
+prosthesis.", width="425", height="328" %}
+</figure>
+
+Assistive technology can include something as general as browser zoom, or as
+specific as a custom-designed game controller. It can be a separate physical
+device like a braille display, or be implemented completely in software like
+voice control. It can be built-in to the operating system like some screen
+readers, or it can be an add-on like a Chrome extension.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QACHirntVoVRCP5PbF24.png", alt="More assistive technology examples including browser zoom braille display and
+voice control.", width="373", height="340" %}
+</figure>
+
+
+The line between assistive technology and technology in general is blurry; after
+all, all technology is meant to assist people with some task or another. And
+technologies can often move into and out of the "assistive" category.
+
+For example, one of the earliest commercial speech synthesis products was a
+talking calculator for the blind. Now speech synthesis is all over the place,
+from driving directions to virtual assistants. Conversely, technology that was
+originally general-purpose often finds an assistive use. For example, people
+with low vision may use their smartphone's camera zoom to get a better look at
+something small in the real world.
+
+In the context of web development, we must consider a diverse range of
+technologies. People may interact with your website using a screen reader or
+braille display, with a screen magnifier, via voice control, using a switch
+device, or with some other form of assistive technology that adapts the page's
+default interface to create a more specific interface that they can use.
+
+Many of these assistive technologies rely on *programmatically expressed
+semantics* to create an accessible user experience, and that's what most of this
+lesson is about. But before we can explain programmatically expressed semantics,
+we need to talk a bit about *affordances*.
+
+## Affordances
+
+When we use a man-made tool or device, we typically look to its form and design
+to give us an idea of what it does and how it works. An *affordance* is any
+object that offers, or affords, its user the opportunity to perform an action.
+The better the affordance is designed, the more obvious or intuitive its use.
+
+A classic example is a kettle or teapot. You can easily recognize that you
+should pick it up by the handle, not the spout, even if you've never seen a
+teapot before.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/X62dJMHmLHJQd6qZWWCr.png", alt="A teapot with handle and spout.", width="640", height="446" %}
+</figure>
+
+That's because the affordance is similar to those you have seen on many other
+objects -- watering pots, beverage pitchers, coffee mugs, and so on. You
+probably *could* pick up the pot by the spout, but your experience with similar
+affordances tells you the handle is the better option.
+
+In graphical user interfaces, affordances represent actions we can take, but
+they can be ambiguous because there is no physical object to interact with. GUI
+affordances are thus specifically designed to be unambiguous: buttons, check
+boxes, and scroll bars are meant to convey their usage with as little training
+as possible.
+
+For example, you might paraphrase the use of some common form elements
+(affordances) like this:
+
+ - Radio buttons &mdash; "I can choose one of these options."
+ - Check box &mdash; "I can choose 'yes' or 'no' to this option."
+ - Text field &mdash; "I can type something into this area."
+ - Dropdown &mdash; "I can open this element to display my options."
+
+You are able to draw conclusions about these elements *only because you can see
+them*. Naturally, someone who can't see the visual clues provided by an element
+can't comprehend its meaning or intuitively grasp the value of the affordance.
+So we must make sure that the information is expressed flexibly enough to be
+accessed by assistive technology that can construct an alternative interface to
+suit its user's needs.
+
+This non-visual exposure of an affordance's use is called its *semantics*.
+
+## Screen readers
+
+One popular type of assistive technology is the *screen reader*, a program that
+enables visually impaired people to use computers by reading screen text aloud
+in a generated voice. The user can control what is read by moving the cursor to
+a relevant area with the keyboard.
+
+We asked [Victor
+Tsaran](/accessibility/#understanding-users-diversity)
+to explain how, as a blind person, he accesses the web using a the built-in
+screen reader on OS X, called VoiceOver. See [this
+video](https://www.youtube.com/watch?v=QW_dUs9D1oQ) of Victor using VoiceOver.
+
+Now, it's your turn to try using a screen reader. Here is a page with *ChromeVox
+Lite*, a minimal but functioning screen reader written in JavaScript. The screen
+is purposefully blurred to simulate a low-vision experience and force the user
+to complete the task with a screen reader. Of course, you'll need to use the
+Chrome browser for this exercise.
+
+[ChromeVox lite demo page](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)
+
+You can use the control panel at the bottom of the screen to control the screen
+reader. This screen reader has very minimal functionality, but you can explore
+the content using the `Previous` and `Next` buttons, and you can click things
+using the `Click` button.
+
+Try using this page with ChromeVox lite enabled to get a feel for screen reader
+use. Think about the fact that a screen reader (or other assistive technology)
+actually creates a complete alternate user experience for the user based on the
+programmatically expressed semantics. Instead of a visual interface, the screen
+reader provides an audible interface.
+
+Notice how the screen reader tells you some information about each interface
+element. You should expect a well-designed reader to tell you all, or at least
+most, of the following information about the elements it encounters.
+
+ - The element's *role* or type, if it is specified (it should be).
+ - The element's *name*, if it has one (it should).
+ - The element's *value*, if it has one (it may or may not).
+ - The element's *state*, e.g., whether it is enabled or disabled (if
+   applicable).
+
+The screen reader is able to construct this alternate UI because the native
+elements contain built-in accessibility metadata. Just as the rendering engine
+uses the native code to construct a visual interface, the screen reader uses the
+metadata in the DOM nodes to construct an accessible version, something like
+this.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9saR7Av4b4h2RwXjNiEM.png", alt="A screen reader uses the DOM to create accessible
+nodes.", width="800", height="306" %}
+</figure>
diff --git a/src/site/content/en/blog/sending-messages-with-web-push-libraries/index.md b/src/site/content/en/blog/sending-messages-with-web-push-libraries/index.md
new file mode 100644
index 00000000000..6fb189534b4
--- /dev/null
+++ b/src/site/content/en/blog/sending-messages-with-web-push-libraries/index.md
@@ -0,0 +1,350 @@
+---
+layout: post
+title: Sending messages with web push libraries
+authors:
+  - mattgaunt
+date: 2016-06-30
+updated: 2019-06-06
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - notifications
+---
+
+One of the pain points when working with web push is that triggering a push message is extremely
+"fiddly". To trigger a push message an application needs to make a POST request to a push
+service following the [web push
+protocol](https://tools.ietf.org/html/draft-ietf-webpush-protocol). To use push across all
+browsers you need to use [VAPID](https://tools.ietf.org/html/draft-thomson-webpush-vapid)
+(a.k.a. application server keys) which basically requires setting a header with a value proving
+your application can message a user. To send data with a push message, the data needs to be
+[encrypted](https://tools.ietf.org/html/draft-ietf-webpush-encryption) and specific headers
+need to be added so the browser can decrypt the message correctly.
+
+The main issue with triggering push is that if you hit a problem, it's difficult to diagnose
+the issue. This is improving with time and wider browser support but it's far from easy. For
+this reason, I strongly recommend using a library to handle the encryption, formatting and
+triggering of your push message.
+
+If you really want to learn about what the libraries are doing, we'll cover it
+in the next section. For now, we are going to look at managing subscriptions and using an
+existing web push library to make the push requests.
+
+In this section we'll be using the [web-push Node
+library](https://github.com/web-push-libs/web-push). Other languages will have differences, but
+they won't be too dissimilar. We are looking at Node since it's JavaScript and should be the
+most accessible for readers.
+
+{% Aside %}
+Note: If you want a library for a different language, checkout the [web-push-libs organization
+on Github](https://github.com/web-push-libs/).
+{% endAside %}
+
+We'll go through the following steps:
+
+1. Send a subscription to our backend and save it.
+1. Retrieve saved subscriptions and trigger a push message.
+
+## Saving subscriptions
+
+Saving and querying `PushSubscription`'s from a database will vary depending on
+your server side language and database choice, but it might be useful to see
+an example of how it could be done.
+
+In the demo web page, the `PushSubscription` is sent to our backend by making a simple POST request:
+
+```js
+function sendSubscriptionToBackEnd(subscription) {
+  return fetch('/api/save-subscription/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(subscription),
+  })
+    .then(function (response) {
+      if (!response.ok) {
+        throw new Error('Bad status code from server.');
+      }
+
+      return response.json();
+    })
+    .then(function (responseData) {
+      if (!(responseData.data && responseData.data.success)) {
+        throw new Error('Bad response from server.');
+      }
+    });
+}
+```
+
+The [Express](http://expressjs.com/) server in our demo has a matching request listener for the
+`/api/save-subscription/` endpoint:
+
+```js
+app.post('/api/save-subscription/', function (req, res) {
+```
+
+In this route we validate the subscription just to make sure the request is OK and not full of
+garbage:
+
+```js
+const isValidSaveRequest = (req, res) => {
+  // Check the request body has at least an endpoint.
+  if (!req.body || !req.body.endpoint) {
+    // Not a valid subscription.
+    res.status(400);
+    res.setHeader('Content-Type', 'application/json');
+    res.send(
+      JSON.stringify({
+        error: {
+          id: 'no-endpoint',
+          message: 'Subscription must have an endpoint.',
+        },
+      }),
+    );
+    return false;
+  }
+  return true;
+};
+```
+
+{% Aside %}
+In this route we only check for an endpoint. If you **require** payload support, make sure
+you check for the auth and p256dh keys as well.
+{% endAside %}
+
+If the subscription is valid, we need to save it and return an appropriate
+JSON response:
+
+```js
+return saveSubscriptionToDatabase(req.body)
+  .then(function (subscriptionId) {
+    res.setHeader('Content-Type', 'application/json');
+    res.send(JSON.stringify({data: {success: true}}));
+  })
+  .catch(function (err) {
+    res.status(500);
+    res.setHeader('Content-Type', 'application/json');
+    res.send(
+      JSON.stringify({
+        error: {
+          id: 'unable-to-save-subscription',
+          message:
+            'The subscription was received but we were unable to save it to our database.',
+        },
+      }),
+    );
+  });
+```
+
+This demo uses [nedb](https://github.com/louischatriot/nedb) to store the subscriptions, it's a
+simple file based database, but you could use any database of your choice. We are only using this as
+it requires zero set-up. For production you'd want to use something more reliable. (I tend to
+stick with good old MySQL.)
+
+```js
+function saveSubscriptionToDatabase(subscription) {
+  return new Promise(function (resolve, reject) {
+    db.insert(subscription, function (err, newDoc) {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      resolve(newDoc._id);
+    });
+  });
+}
+```
+
+## Sending push messages
+
+When it comes to sending a push message, we ultimately need some event to trigger the process of
+sending a message to users. A common approach is creating an admin page that let's you
+configure and trigger the push message. But you could create a program to run locally or any
+other approach that allows accessing the list of `PushSubscription`'s and running the code to
+trigger the push message.
+
+Our demo has an "admin like" page that lets you trigger a push. Since it's just a demo it's a
+public page.
+
+I'm going to go through each step involved in getting the demo working. These will be baby
+steps so everyone can follow along, including anyone who is new to Node.
+
+When we discussed subscribing a user, we covered adding an `applicationServerKey` to the
+`subscribe()` options. It's on the back end that we'll need this private key.
+
+In the demo, these values are added to our Node app like so (boring code I know, but just want
+you to know there is no magic):
+
+```js
+const vapidKeys = {
+  publicKey:
+    'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
+  privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
+};
+```
+
+Next we need to install the `web-push` module for our Node server:
+
+```shell
+npm install web-push --save
+```
+
+Then, in our Node script we require the `web-push` module
+like so:
+
+```js
+const webpush = require('web-push');
+```
+
+Now we can start to use the `web-push` module. First we need to tell the `web-push` module about
+our application server keys. (Remember they are also known as VAPID keys because that's the name
+of the spec.)
+
+```js
+const vapidKeys = {
+  publicKey:
+    'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
+  privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
+};
+
+webpush.setVapidDetails(
+  'mailto:web-push-book@gauntface.com',
+  vapidKeys.publicKey,
+  vapidKeys.privateKey,
+);
+```
+
+Note that we also included a "mailto:" string. This string needs to be either a URL or a mailto
+email address. This piece of information will actually be sent to the web push service as part of
+the request to trigger a push. The reason this is done is so that if a web push service needs
+to get in touch with the sender, they have some information that will enable them to.
+
+With this, the `web-push` module is ready to use, the next step is to trigger a push message.
+
+The demo uses the pretend admin panel to trigger push messages.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KDaU1o6yodiD0Ov0OtVR.png", alt="Screenshot of the admin page.", width="800", height="853" %}
+</figure>
+
+Clicking the "Trigger Push Message" button will make a POST request to `/api/trigger-push-msg/`,
+which is the signal for our backend to send push messages, so we create the route in
+express for this endpoint:
+
+```js
+app.post('/api/trigger-push-msg/', function (req, res) {
+```
+
+When this request is received, we grab the subscriptions from the database and
+for each one, we trigger a push message.
+
+```js
+return getSubscriptionsFromDatabase().then(function (subscriptions) {
+  let promiseChain = Promise.resolve();
+
+  for (let i = 0; i < subscriptions.length; i++) {
+    const subscription = subscriptions[i];
+    promiseChain = promiseChain.then(() => {
+      return triggerPushMsg(subscription, dataToSend);
+    });
+  }
+
+  return promiseChain;
+});
+```
+
+The function `triggerPushMsg()` can then use the web-push library to send a message to the
+provided subscription.
+
+```js
+const triggerPushMsg = function (subscription, dataToSend) {
+  return webpush.sendNotification(subscription, dataToSend).catch((err) => {
+    if (err.statusCode === 404 || err.statusCode === 410) {
+      console.log('Subscription has expired or is no longer valid: ', err);
+      return deleteSubscriptionFromDatabase(subscription._id);
+    } else {
+      throw err;
+    }
+  });
+};
+```
+
+The call to `webpush.sendNotification()` will return a promise. If the
+message was sent successfully the promise will resolve and there is
+nothing we need to do. If the promise rejects, you need to examine the
+error as it'll inform you as to whether the `PushSubscription` is still
+valid or not.
+
+To determine the type of error from a push service it's best to look at the status code. Error
+messages vary between push services and some are more helpful than others.
+
+In this example, it checks for status codes `404` and `410`, which are the HTTP status codes for
+'Not Found' and 'Gone'. If we receive one of these, it means the subscription has expired
+or is no longer valid. In these scenarios, we need to remove the subscriptions from our database.
+
+In case of some other error, we just `throw err`, which will make the promise returned by
+`triggerPushMsg()` reject.
+
+We'll cover some of the other status codes in the next section when we look at the web push
+protocol in more detail.
+
+{% Aside %}
+If you hit problems at this stage, it's worth looking at the error logs from Firefox before
+Chrome. The Mozilla push service has much more helpful error messages compared to Chrome / FCM.
+{% endAside %}
+
+After looping through the subscriptions, we need to return a JSON response.
+
+```js
+.then(() => {
+res.setHeader('Content-Type', 'application/json');
+    res.send(JSON.stringify({ data: { success: true } }));
+})
+.catch(function(err) {
+res.status(500);
+res.setHeader('Content-Type', 'application/json');
+res.send(JSON.stringify({
+    error: {
+    id: 'unable-to-send-messages',
+    message: `We were unable to send messages to all subscriptions : ` +
+        `'${err.message}'`
+    }
+}));
+});
+```
+
+We've gone over the major implementation steps:
+
+1. Create an API to send subscriptions from our web page to our back-end
+   so it can save them to a database.
+1. Create an API to trigger the sending of push messages (in this case, an
+   API called from the pretended admin panel).
+1. Retrieve all the subscriptions from our backend
+   and send a message to each subscription with one of the [web-push
+   libraries](https://github.com/web-push-libs/).
+
+Regardless of your backend (Node, PHP, Python, …), the steps for implementing push are going
+to be the same.
+
+Next up, what exactly are these web-push libraries doing for us?
+
+## Where to go next
+
+* [Web Push Notification Overview](/push-notifications-overview/)
+* [How Push Works](/push-notifications-how-push-works/)
+* [Subscribing a User](/push-notifications-subscribing-a-user/)
+* [Permission UX](/push-notifications-permissions-ux/)
+* Sending Messages with Web Push Libraries
+* [Web Push Protocol](/push-notifications-web-push-protocol/)
+* [Handling Push Events](/push-notifications-handling-messages/)
+* [Displaying a Notification](/push-notifications-display-a-notification/)
+* [Notification Behavior](/push-notifications-notification-behaviour/)
+* [Common Notification Patterns](/push-notifications-common-notification-patterns/)
+* [Push Notifications FAQ](/push-notifications-faq/)
+* [Common Issues and Reporting Bugs](/push-notifications-common-issues-and-reporting-bugs/)
+
+### Code labs
+
+* [Build a push notification client](/push-notifications-client-codelab/)
+* [Build a push notification server](/push-notifications-server-codelab/)
diff --git a/src/site/content/en/blog/service-worker-mindset/cache.jpg b/src/site/content/en/blog/service-worker-mindset/cache.jpg
deleted file mode 100644
index 87be7b19723..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/cache.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/hero-wide.jpg b/src/site/content/en/blog/service-worker-mindset/hero-wide.jpg
deleted file mode 100644
index 2dd798d9bc9..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/hero-wide.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/hero.jpg b/src/site/content/en/blog/service-worker-mindset/hero.jpg
deleted file mode 100644
index 56f1b41c732..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/index.md b/src/site/content/en/blog/service-worker-mindset/index.md
index 9e514748e7b..c47c650d18f 100644
--- a/src/site/content/en/blog/service-worker-mindset/index.md
+++ b/src/site/content/en/blog/service-worker-mindset/index.md
@@ -4,7 +4,7 @@ subhead: How to think when thinking about service workers.
 authors:
   - geddski
 date: 2019-06-04
-hero: hero.jpg
+hero: image/admin/7cjkg6ggaRsRNwZ0C2Vf.jpg
 hero_position: center
 alt: Service workers lining up.
 description: |
@@ -12,16 +12,16 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - service-worker
-  - PWA
+  - progressive-web-apps
   - offline
-  - caching
+  # - caching
 ---
 
-Service workers are powerful and absolutely worth mastering. They let you deliver an entirely new level of experience to your users. Your site can load _instantly_. It can work _offline_. It can be installed as a native app and feel every bit as polished—but with the reach and freedom of the web.
+Service workers are powerful and absolutely worth learning. They let you deliver an entirely new level of experience to your users. Your site can load _instantly_. It can work _offline_. It can be installed as a platform-specific app and feel every bit as polished—but with the reach and freedom of the web.
 
 But service workers are unlike anything most of us web devs are used to. They come with a steep learning curve and a handful of snags you've got to watch out for.
 
-[Google Developers](https://twitter.com/ChromiumDev) and I recently collaborated on a project—[Service Workies](https://serviceworkies.com)—a free game for mastering service workers. While building it and working with the complex ins and outs of service workers, I ran into a few snags. What helped me the most was coming up with a handful of depictive metaphors. In this post we'll explore these mental models and wrap our brains around the paradoxical traits that make service workers both tricky and awesome.
+[Google Developers](https://twitter.com/ChromiumDev) and I recently collaborated on a project—[Service Workies](https://serviceworkies.com)—a free game for understanding service workers. While building it and working with the complex ins and outs of service workers, I ran into a few snags. What helped me the most was coming up with a handful of depictive metaphors. In this post we'll explore these mental models and wrap our brains around the paradoxical traits that make service workers both tricky and awesome.
 
 ## The same, but different
 
@@ -33,7 +33,7 @@ But other service worker behavior causes you to scratch your head in confusion.
 
 Normally when building a site you have just two layers to think about: the client and the server. The service worker is a brand new layer that sits in the middle.
 
-![A service worker acts as a middle layer between the client and the server](./middle-layer.jpg)
+{% Img src="image/admin/w6JgZDMJMoqp24IuC9UZ.jpg", alt="A service worker acts as a middle layer between the client and the server", width="800", height="232" %}
 
 Think of your service worker as a sort of _browser extension_—one that your site can install in your user's browser. Once installed, the service worker _extends_ the browser for your site with a powerful middle layer. This service worker layer can intercept and handle all of the requests your site makes.
 
@@ -41,7 +41,12 @@ The service worker layer has its **own lifecycle** independent of the browser ta
 
 In the [Service Workies](https://serviceworkies.com) game we cover the many details of the service worker lifecycle and give you a ton of practice working with it.
 
-![a new service worker replacing an old one](./update-lifecycle.gif)
+{% Video src="video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/MhBc1XtdrEGOQn8iXtKZ.mp4",
+autoplay="true",
+controls="true",
+loop="true",
+muted="true",
+alt="a new service worker replacing an old one", width="800", height="460" %}
 
 {% Aside 'note' %}
 Think of your service worker as a new middle layer with its own lifecycle and methods for updating.
@@ -52,9 +57,9 @@ Think of your service worker as a new middle layer with its own lifecycle and me
 Having a service worker on your site gives you incredible benefits. Your site can:
 
 - work flawlessly even when the user is offline
-- gain massive performance improvements through [caching](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
-- use [push notifications](https://developers.google.com/web/fundamentals/push-notifications/)
-- be installed as a [PWA](https://developers.google.com/web/progressive-web-apps/)
+- gain massive performance improvements through [caching](https://developer.mozilla.org/docs/Web/API/Cache)
+- use [push notifications](/notifications/)
+- be installed as a [PWA](/progressive-web-apps/)
 
 With as much as service workers can do, they are limited by design. They can't do anything synchronous or in the same thread as your site. So that means no access to:
 
@@ -62,7 +67,7 @@ With as much as service workers can do, they are limited by design. They can't d
 - the DOM
 - the window
 
-The good news is there are a handful of ways your page can communicate with its service worker, including direct [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage), one-to-one [Message Channels](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel) and one-to-many [Broadcast Channels](https://developers.google.com/web/updates/2016/09/broadcastchannel).
+The good news is there are a handful of ways your page can communicate with its service worker, including direct [`postMessage`](https://developer.mozilla.org/docs/Web/API/Client/postMessage), one-to-one [Message Channels](https://developer.mozilla.org/docs/Web/API/MessageChannel) and one-to-many [Broadcast Channels](https://developer.chrome.com/blog/broadcastchannel).
 
 {% Aside 'note' %}
 Think of your service worker as something that lives outside of your page. You can talk to it, but it can't access your page directly.
@@ -74,7 +79,12 @@ An active service worker goes on living even after a user leaves your site or cl
 
 In [Service Workies](https://serviceworkies.com) we visualize this concept with Kolohe (a friendly service worker) intercepting and handling requests.
 
-![service worker intercepting http requests](./intercept.gif)
+{% Video src="video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/BeJWEOe4TPoMzdBTFVWI.mp4",
+autoplay="true",
+controls="true",
+loop="true",
+muted="true",
+alt="service worker intercepting http requests", width="800", height="605" %}
 
 ### Stopped
 
@@ -121,12 +131,12 @@ You can't rely on stored state in a service worker. Also, creating instances of
 This snag is especially important to keep in mind while working on your service worker code because when Chrome DevTools is open, the start/stop behavior is disabled. You may not even see bugs caused by relying on global state until they've shipped to your users.
 {% endAside %}
 
-In [Service Workies chapter 3](https://gedd.ski/post/service-workies-chapter3/) we visualize our stopped service worker as losing all color while he hangs out waiting to be woken up.
+In [Service Workies chapter 3](https://gedd.ski/post/service-workies-chapter3/) we visualize our stopped service worker as losing all color while it waits to be woken up.
 
-![visualization of a stopped service worker](./kolohe-stopped.jpg)
+{% Img src="image/admin/QBmObxFoIRgNtjsUttkF.jpg", alt="visualization of a stopped service worker", width="800", height="313" %}
 
 {% Aside 'note' %}
-Think of your service worker as a [whippet](https://www.akc.org/dog-breeds/whippet/) dog. He's fast, loyal and awesome. He'll stick around by your side no matter what. But mostly he just wants to sleep. All the time. You've got to let him know when you want him to stay awake. Good boy!
+Think of your service worker as a [whippet](https://www.akc.org/dog-breeds/whippet/) dog. It's fast, loyal and awesome. It'll stick around by your side no matter what. But mostly it just wants to sleep. All the time. You've got to let it know when you want it to stay awake. Good dog!
 {% endAside %}
 
 ## Together, but separate
@@ -161,13 +171,13 @@ self.addEventListener("install", event => {
 
 When you deploy a new service worker, you'll bump the `version` so that it does what it needs with an entirely separate cache from the previous service worker.
 
-![visualization of a cache](./cache.jpg)
+{% Img src="image/admin/7REuAR11sps94W4tO7ng.jpg", alt="visualization of a cache", width="800", height="435" %}
 
 ### End clean
 
-Once your service worker reaches the `activated` state, you know it has taken over, and the previous service worker is redundant (i.e., no longer needed). At this point it's important to clean up after the old service worker. Not only does it respect your users' cache storage limits, but it can also prevent unintentional bugs.
+Once your service worker reaches the `activated` state, you know it has taken over, and the previous service worker is redundant. At this point it's important to clean up after the old service worker. Not only does it respect your users' cache storage limits, but it can also prevent unintentional bugs.
 
-The [`caches.match()`](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/match) method is an often-used shortcut for retrieving an item from _any_ cache where there's a match. But it iterates through the caches in the order they were created. So let's say you've got two versions of a script file `app.js` hanging out in two different caches—`assets-1` and `assets-2`. Your page is expecting the newer script that's stored in `assets-2`. But if you haven't deleted the old cache, `caches.match('app.js')` is going to return the old one from `assets-1` and most likely break your site.
+The [`caches.match()`](https://developer.mozilla.org/docs/Web/API/CacheStorage/match) method is an often-used shortcut for retrieving an item from _any_ cache where there's a match. But it iterates through the caches in the order they were created. So let's say you've got two versions of a script file `app.js` in two different caches—`assets-1` and `assets-2`. Your page is expecting the newer script that's stored in `assets-2`. But if you haven't deleted the old cache, `caches.match('app.js')` is going to return the old one from `assets-1` and most likely break your site.
 
 All it takes to clean up after previous service workers is to delete any cache that the new service worker doesn't need:
 
@@ -201,6 +211,11 @@ Think of the combination of your service worker and your site as an [installable
 
 Getting into the right mindset while thinking about service workers will help you build yours with confidence. Once you get the hang of them you'll be able to create incredible experiences for your users.
 
-If you want to master all this by [playing a game](https://gedd.ski/post/mastery-through-play/), then you're in luck! Go play [Service Workies](https://serviceworkies.com) where you'll learn the ways of the service worker in order to slay the offline beasts.
+If you want to understand all this by [playing a game](https://gedd.ski/post/mastery-through-play/), then you're in luck! Go play [Service Workies](https://serviceworkies.com) where you'll learn the ways of the service worker in order to slay the offline beasts.
 
-![preview of the Service Workies game](./spider.gif)
+{% Video src="video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ammLWAa5Kc13D5CgstvK.mp4",
+autoplay="true",
+controls="true",
+loop="true",
+muted="true",
+alt="preview of the Service Workies game", width="800", height="519" %}
diff --git a/src/site/content/en/blog/service-worker-mindset/intercept.gif b/src/site/content/en/blog/service-worker-mindset/intercept.gif
deleted file mode 100644
index 77d031f32ce..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/intercept.gif and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/kolohe-stopped.jpg b/src/site/content/en/blog/service-worker-mindset/kolohe-stopped.jpg
deleted file mode 100644
index 42930f35a80..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/kolohe-stopped.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/middle-layer.jpg b/src/site/content/en/blog/service-worker-mindset/middle-layer.jpg
deleted file mode 100644
index 3e9fc67694c..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/middle-layer.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/spider.gif b/src/site/content/en/blog/service-worker-mindset/spider.gif
deleted file mode 100644
index 11329fce615..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/spider.gif and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/sw.png b/src/site/content/en/blog/service-worker-mindset/sw.png
deleted file mode 100644
index a2cfba7d0f1..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/sw.png and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-mindset/update-lifecycle.gif b/src/site/content/en/blog/service-worker-mindset/update-lifecycle.gif
deleted file mode 100644
index 456f6050308..00000000000
Binary files a/src/site/content/en/blog/service-worker-mindset/update-lifecycle.gif and /dev/null differ
diff --git a/src/site/content/en/blog/service-worker-perf/index.md b/src/site/content/en/blog/service-worker-perf/index.md
new file mode 100644
index 00000000000..be28be77df0
--- /dev/null
+++ b/src/site/content/en/blog/service-worker-perf/index.md
@@ -0,0 +1,654 @@
+---
+layout: post
+title: Measuring the Real-world Performance Impact of Service Workers
+description: |
+  Measuring the Real-world Performance Impact of Service Workers
+date: 2016-07-22
+updated: 2018-02-27
+authors:
+  - philipwalton
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+One of the most significant benefits of [service workers](https://developers.google.com/web/fundamentals/primers/service-worker/) (from a performance perspective, at least) is their ability to proactively control the caching of assets. A web application that can cache all of its necessary resources should load substantially faster for returning visitors. But what do these gains actually look like to real users? And how do you even measure this?
+
+The [Google I/O web app](https://events.google.com/io2016/) (IOWA for short) is a [progressive web app](https://developers.google.com/web/progressive-web-apps/) that leveraged most of the new capabilities offered by service workers to deliver a rich, app-like experience to its users. It also used Google Analytics to capture key performance data and usage patterns from its large and diverse user audience.
+
+This case study explores how IOWA used Google Analytics to answer key performance questions and report on the real-world impact of service workers.
+
+## Starting with the questions
+
+Any time you implement analytics in a website or application, it's important to start by identifying the questions you're trying to answer from the data you'll be collecting.
+
+While we had several questions we wanted to answer, for the purposes of this case study, let's focus on two of the more interesting ones.
+
+**1. Is service worker caching more performant than the existing HTTP caching mechanisms available in all browsers?**
+
+We already expect pages to load faster for returning visitors than for new visitors since browsers can cache requests and serve them instantly on repeat visits.
+
+Service workers offers alternative caching capabilities that give developers fine-grained control over exactly what and how caching is done. In IOWA, we optimized our service worker implementation so that every asset would be cached, so returning visitors could use the app completely offline.
+
+But would this effort be any better than what the browser already does by default? And if so, how much better? [1](#footnotes)
+
+**2. How does service worker impact the experience of the site loading?**
+
+In other words, how fast does it *feel* like the site is loading, regardless of the actual load times as measured by traditional page load metrics?
+
+Answering questions about how an experience feels is obviously not an easy task, and no metric is going to perfectly represent such a subjective sentiment. That being said, there are definitely some metrics that are better than others, so choosing the right ones is important.
+
+## Choosing the right metric
+
+Google Analytics, by default, tracks [page load times](https://support.google.com/analytics/answer/1205784) (via the [Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API)) for 1% of a site's visitors, and it makes that data available via metrics like [Avg. Page Load Time](/analytics/devguides/reporting/core/dimsmets#view=detail&group=site_speed&jump=ga_avgpageloadtime).
+
+*Avg. Page Load Time* is a good metric for answering our first question, but it's not a particularly good metric for answering the second. For one thing the `load` event doesn't necessarily correspond to the moment when the user can actually interact with the app. Moreover, two apps with the exact same load time may *feel* like they load much differently. For example, a site with a splash screen or a loading indicator probably feels like it loads much faster than a site that just shows a blank page for several seconds.
+
+In IOWA, we showed a splash screen countdown animation that (in my opinion) very successfully served to entertain the user while the rest of the app loaded in the background. Because of this, tracking how long it takes the splash screen to appear makes a lot more sense as a way to measure perceived load performance. We chose the metric **time to first paint** to get this value.
+
+Once we decided on the questions we wanted to answer and identified the metrics that would be useful in answering them, it was time to implement Google Analytics and start measuring.
+
+## The analytics implementation
+
+If you've used Google Analytics before, then you're probably familiar with the [recommended JavaScript tracking snippet](/analytics/devguides/collection/analyticsjs/#alternative_async_tracking_snippet). It looks like this:
+
+```html
+<script>
+window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+ga('create', 'UA-XXXXX-Y', 'auto');
+ga('send', 'pageview');
+</script>
+<script async src="https://www.google-analytics.com/analytics.js"></script>
+```
+
+The first line in the above code initializes a global `ga()` function (if it doesn't already exist), and the last line asynchronously downloads the `analytics.js` library.
+
+The middle part contains these two lines:
+
+```js
+ga('create', 'UA-XXXXX-Y', 'auto');
+ga('send', 'pageview');
+```
+
+These two [commands](https://developers.google.com/analytics/devguides/collection/analyticsjs/how-analyticsjs-works#the_ga_command_queue) track what pages are visited by people going to your site, but [not much more](https://developers.google.com/analytics/devguides/collection/analyticsjs/#what_data_does_the_tracking_snippet_capture). If you want to track additional user interactions, you have to do so yourself.
+
+For IOWA, we wanted to track two additional things:
+
+- The elapsed time between when the page first starts to load and when pixels appear on the screen.
+- Whether or not a service worker is controlling the page. With this information we could segment our reports to compare the results with and without service worker.
+
+### Capturing time to first paint
+
+Some browsers record the precise time at which the first pixel is painted to the screen, and they make that time available to developers. That value, compared with the `navigationStart` value exposed via the [Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API) gives us a very accurate accounting of how much time has passed between when the user initially requested the page and when they first saw something.
+
+As I already mentioned, time to first paint is an important metric to measure because it's the first point at which a user experiences the load speed of your site. It's the first impression users get, and a good first impression can positively affect the rest of the user experience.[2](#footnotes)
+
+To get the first paint value in browsers that expose it, we created the `getTimeToFirstPaintIfSupported` utility function:
+
+```js
+function getTimeToFirstPaintIfSupported() {
+  // Ignores browsers that don't support the Performance Timing API.
+  if (window.performance && window.performance.timing) {
+    var navTiming = window.performance.timing;
+    var navStart = navTiming.navigationStart;
+    var fpTime;
+
+    // If chrome, get first paint time from `chrome.loadTimes`.
+    if (window.chrome && window.chrome.loadTimes) {
+      fpTime = window.chrome.loadTimes().firstPaintTime * 1000;
+    }
+    // If IE/Edge, use the prefixed `msFirstPaint` property.
+    // See http://msdn.microsoft.com/ff974719
+    else if (navTiming.msFirstPaint) {
+      fpTime = navTiming.msFirstPaint;
+    }
+
+    if (fpTime && navStart) {
+      return fpTime - navStart;
+    }
+  }
+}
+```
+
+{% Aside 'caution' %}
+  **Important:** the `firstpaint` values referenced in the above function are part of vendor-specific APIs. They are non-standard and subject to change (or removal) at any time. We chose to implement them in IOWA knowing the site would have a limited lifespan. For most sites, it's best to use other [user timing techniques](https://speedcurve.com/blog/user-timing-and-custom-metrics/) until a `firstpaint` (or a `firstpaint` alternative) is standardized.
+{% endAside %}
+
+With this, we could now write another function that [sends](https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits) a [non-interaction](https://support.google.com/analytics/answer/1033068#NonInteractionEvents) event with the time to first paint as its value:[3](#footnotes)
+
+```js
+function sendTimeToFirstPaint() {
+  var timeToFirstPaint = getTimeToFirstPaintIfSupported();
+
+  if (timeToFirstPaint) {
+    ga('send', 'event', {
+      eventCategory: 'Performance',
+      eventAction: 'firstpaint',
+      // Rounds to the nearest millisecond since
+      // event values in Google Analytics must be integers.
+      eventValue: Math.round(timeToFirstPaint)
+      // Sends this as a non-interaction event,
+      // so it doesn't affect bounce rate.
+      nonInteraction: true
+    });
+  }
+}
+```
+
+After writing both of these functions, our tracking code looks like this:
+
+```js
+// Creates the tracker object.
+ga('create', 'UA-XXXXX-Y', 'auto');
+
+// Sends a pageview for the initial pageload.
+ga('send', 'pageview');
+
+// Sends an event with the time to first paint data.
+sendTimeToFirstPaint();
+```
+
+Note that depending on when the above code runs, pixels may or may not have already been painted to the screen. To ensure we always run this code after the first paint occurs, we postponed the call to `sendTimeToFirstPaint()` until after the `load` event. In fact, we decided to postpone sending all analytics data until after the page was loaded to ensure those requests wouldn't compete with the loading of other resources.
+
+```js
+// Creates the tracker object.
+ga('create', 'UA-XXXXX-Y', 'auto');
+
+// Postpones sending any hits until after the page has fully loaded.
+// This prevents analytics requests from delaying the loading of the page.
+window.addEventListener('load', function() {
+  // Sends a pageview for the initial pageload.
+  ga('send', 'pageview');
+
+  // Sends an event with the time to first paint data.
+  sendTimeToFirstPaint();
+});
+```
+
+The code above reports `firstpaint` times to Google Analytics, but that's only half the story. We still needed to track the service worker status; otherwise we wouldn't be able to compare the first paint times of a service worker-controlled page and a non-controlled page.
+
+### Determining service worker status
+
+To determine the current status of the service worker, we created a utility function that returns  one of three values:
+
+- **controlled**: a service worker is controlling the page. In the case of IOWA that also means all assets have been cached and the page works offline.
+- **supported**: the browser supports service worker, but the service worker is not yet controlling the page. This is the expected status for first time visitors.
+- **unsupported**: the user's browser does not support service worker.
+
+```js
+function getServiceWorkerStatus() {
+  if ('serviceWorker' in navigator) {
+    return navigator.serviceWorker.controller ? 'controlled' : 'supported';
+  } else {
+    return 'unsupported';
+  }
+}
+```
+
+This function got the service worker status for us; the next step was to associate this status with the data we were sending to Google Analytics.
+
+#### Tracking custom data with custom dimensions
+
+By default, Google Analytics gives you lots of ways to subdivide your total traffic into groups based on attributes of the user, session, or interaction. These attributes are known as [dimensions](https://support.google.com/analytics/answer/1033861). Common dimensions web developers care about are things like [Browser](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=platform_or_device&jump=ga_browser), [Operating System](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=platform_or_device&jump=ga_operatingsystem), or [Device Category](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=platform_or_device&jump=ga_devicecategory).
+
+The service worker's status is not a dimension Google Analytics provides by default; however, Google Analytics does give you the ability to create your own [custom dimensions](https://support.google.com/analytics/answer/2709828) and define them however you want.
+
+For IOWA, we created a custom dimension called *Service Worker Status* and set its scope to [hit](https://support.google.com/analytics/answer/2709828#example-hit) (i.e. per-interaction).[4](#footer) Each custom dimension you create in Google Analytics is given a unique index within that property, and in your tracking code you can reference that dimension by its index. For example, if the index of the dimension we just created were 1, we could update our logic as follows to send the `firstpaint` event to include the service worker status:
+
+```js
+ga('send', 'event', {
+  eventCategory: 'Performance',
+  eventAction: 'firstpaint',
+  // Rounds to the nearest millisecond since
+  // event values in Google Analytics must be integers.
+  eventValue: Math.round(timeToFirstPaint)
+  // Sends this as a non-interaction event,
+  // so it doesn't affect bounce rate.
+  nonInteraction: true,
+
+  // Sets the current service worker status as the value of
+  // `dimension1` for this event.
+  dimension1: getServiceWorkerStatus()
+});
+```
+
+This works, but it will only associate the service worker's status with this particular event. Since *Service Worker Status* is something that's potentially useful to know for any interaction, it's best to include it with all data sent to Google Analytics.
+
+To include this information in all hits (e.g. all pageviews, events, etc.) we [set](https://developers.google.com/analytics/devguides/collection/analyticsjs/accessing-trackers#updating_tracker_data) the custom dimension value on the [tracker](https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers) object itself, prior to sending any data to Google Analytics.
+
+```js
+ga('set', 'dimension1', getServiceWorkerStatus());
+```
+
+Once set, this value gets sent with all subsequent hits for the current pageload. If the user loads the page again later, a new value will likely be returned from the `getServiceWorkerStatus()` function, and that value will be set on the tracker object.
+
+A quick note on code clarity and readability: since other people looking at this code may not know what `dimension1` refers to, it's always best to create a variable that maps meaningful dimension names to the values analytics.js will use.
+
+```js
+// Creates a map between custom dimension names and their index.
+// This is particularly useful if you define lots of custom dimensions.
+var customDimensions = {
+  SERVICE_WORKER_STATUS: 'dimension1'
+};
+
+// Creates the tracker object.
+ga('create', 'UA-XXXXX-Y', 'auto');
+
+// Sets the service worker status on the tracker,
+// so its value is included in all future hits.
+ga('set', customDimensions.SERVICE_WORKER_STATUS, getServiceWorkerStatus());
+
+// Postpones sending any hits until after the page has fully loaded.
+// This prevents analytics requests from delaying the loading of the page.
+window.addEventListener('load', function() {
+  // Sends a pageview for the initial pageload.
+  ga('send', 'pageview');
+
+  // Sends an event with the time to first paint data.
+  sendTimeToFirstPaint();
+});
+```
+
+As I mentioned, sending the *Service Worker Status* dimension with every hit allows us to use it when reporting on any metric.
+
+As you can see almost 85% of all pageviews for IOWA were from browsers that [support service worker](https://jakearchibald.github.io/isserviceworkerready/).
+
+## The results: answering our questions
+
+Once we started collecting data to answer our questions, we could report on that data to see the results. *(Note: all Google Analytics data shown here represents actual web traffic to the IOWA site from May 16-22, 2016).*
+
+The first question we had was: *Is service worker caching more performant than the existing HTTP caching mechanisms available in all browsers?*
+
+To answer that question, we created a [custom report](https://support.google.com/analytics/answer/1033013) that looked at the metric [Avg. Page Load Times](https://developers.google.com//analytics/devguides/reporting/core/dimsmets#view=detail&group=site_speed&jump=ga_avgpageloadtime) across various dimensions. This metric is well-suited to answer this question because the `load` event fires only after all initial resources are downloaded. Thus it directly reflects the total load time for all the site's critical resources.[5](#footnotes)
+
+The dimensions we chose were:
+
+- Our custom *Service Worker Status* dimension.
+- [User Type](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=user&jump=ga_usertype), which indicates whether this is the user's first visit to the site or if they're returning. (Note: a new visitor will not have any resources cached; a returning visitor might.)
+- [Device Category](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=platform_or_device&jump=ga_devicecategory), which lets us compare the results across mobile and desktop.
+
+To control for the possibility that non-service-worker-related factors were skewing our load time results, we limited our query to only include browsers that support service worker.
+
+As you can see, visits to our app when controlled by a service worker loaded quite a bit faster than non-controlled visits, even those from returning users who likely had most of the page's resources cached. It's also interesting to notice that, on average, visitors on mobile with a service worker saw faster loads than new desktop visitors.
+
+
+> "…visits to our app when controlled by a service worker loaded quite a bit faster than non-controlled visits…"
+
+You can see more details in the following two tables:
+
+<table>
+  <tr><th colspan="4">Avg. Page Load Time (Desktop)</th></tr>
+  <tr>
+    <td>Service Worker Status</td>
+    <td>User Type</td>
+    <td>Avg. Page Load Time (ms)</td>
+    <td>Sample Size</td>
+  </tr>
+  <tr>
+    <td>Controlled</td>
+    <td>Returning Visitor</td>
+    <td>
+      2568
+    </td>
+    <td>30860</td>
+  </tr>
+  <tr>
+    <td>Supported</td>
+    <td>Returning Visitor
+    </td>
+    <td>
+      3612
+    </td>
+    <td>1289</td>
+  </tr>
+  <tr>
+    <td>Supported</td>
+    <td>New Visitor</td>
+    <td>
+      4664
+    </td>
+    <td>21991</td>
+  </tr>
+</table>
+
+<table>
+  <tr><th colspan="4">Avg. Page Load Time (Mobile)</th></tr>
+  <tr>
+    <td>Service Worker Status</td>
+    <td>User Type</td>
+    <td>Avg. Page Load Time (ms)</td>
+    <td>Sample Size</td>
+  </tr>
+  <tr>
+    <td>Controlled</td>
+    <td>Returning Visitor</td>
+    <td>
+      3760
+    </td>
+    <td>8162</td>
+  </tr>
+  <tr>
+    <td>Supported</td>
+    <td>Returning Visitor</td>
+    <td>
+      4843
+    </td>
+    <td>676</td>
+  </tr>
+  <tr>
+    <td>Supported</td>
+    <td>New Visitor</td>
+    <td>
+      6158
+    </td>
+    <td>5779</td>
+  </tr>
+</table>
+
+You may be wondering how it's possible for a returning visitor whose browser supports service worker to ever be in a non-controlled state. There are a few possible explanations for this:
+
+- The user left the page on the initial visit before the service worker had a chance to finish initializing.
+- The user uninstalled the service worker via the developer tools.
+
+Both of these situations are relatively rare. We can see that in the data by looking at the [Page Load Sample](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=site_speed&jump=ga_pageloadsample) values in the fourth column. Notice that the middle rows have a much smaller sample than the other two.
+
+Our second question was: *How does service worker impact the experience of the site loading?*
+
+To answer this question, we created another custom report for the metric [Avg. Event Value](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=event_tracking&jump=ga_avgeventvalue) and filtered the results to only include our `firstpaint` events. We used the dimensions *Device Category* and our custom *Service Worker Status* dimension.
+
+Contrary to what I would have expected, the service worker on mobile had much less impact on time to first paint than it did on overall page load.
+
+> "…service worker on mobile had much less impact on time to first paint than it did on overall page load."
+
+To explore why this is the case, we have to dig deeper into the data. Averages can be good for general overviews and broad strokes, but to really get a sense of how these numbers break down across a range of users, we need to look at a distribution of `firstpaint` times.
+
+### Getting the distribution of a metric in Google Analytics
+
+To get the distribution of `firstpaint` times we need access to the individual results for each event. Unfortunately, Google Analytics doesn't make this easy.
+
+Google Analytics lets us break down a report by whatever dimension we want, but it doesn't let use break down a report by metrics. That isn't to say it's impossible, it just means we had to customize our implementation a bit more to get the desired result.
+
+Since report results can only be broken down by dimensions, we had to set the metric value (in this case `firstpaint` time) as a custom dimension on the event. To do this we created another custom dimension called *Metric Value* and updated our `firstpaint` tracking logic as follows:
+
+```js
+var customDimensions = {
+  SERVICE_WORKER_STATUS: 'dimension1',
+  <strong>METRIC_VALUE: 'dimension2'</strong>
+};
+
+// ...
+
+function sendTimeToFirstPaint() {
+  var timeToFirstPaint = getTimeToFirstPaintIfSupported();
+
+  if (timeToFirstPaint) {
+    var fields = {
+      eventCategory: 'Performance',
+      eventAction: 'firstpaint',
+      // Rounds to the nearest millisecond since
+      // event values in Google Analytics must be integers.
+      eventValue: Math.round(timeToFirstPaint)
+      // Sends this as a non-interaction event,
+      // so it doesn't affect bounce rate.
+      nonInteraction: true
+    }
+
+    <strong>// Sets the event value as a dimension to allow for breaking down the
+    // results by individual metric values at reporting time.
+    fields[customDimensions.METRIC_VALUE] = String(fields.eventValue);</strong>
+
+    ga('send', 'event', fields);
+  }
+}
+```
+
+The Google Analytics web interface does not currently provide a way to visualize the distribution of arbitrary metric values, but with the help of the [Google Analytics Core Reporting API](https://developers.google.com/analytics/devguides/reporting/core/v4/) and the [Google Charts library](https://developers.google.com/chart/interactive/docs/gallery/histogram) we could query for the raw results and then construct a histogram ourselves.
+
+For example, the following API request configuration was used to get a distribution of `firstpaint` values on desktop with a non-controlled service worker.
+
+```json
+{
+  dateRanges: [{startDate: '2016-05-16', endDate: '2016-05-22'}],
+  metrics: [{expression: 'ga:totalEvents'}],
+  dimensions: [{name: 'ga:dimension2'}],
+  dimensionFilterClauses: [
+    {
+      operator: 'AND',
+      filters: [
+        {
+          dimensionName: 'ga:eventAction',
+          operator: 'EXACT',
+          expressions: ['firstpaint']
+        },
+        {
+          dimensionName: 'ga:dimension1',
+          operator: 'EXACT',
+          expressions: ['supported']
+        },
+        {
+          dimensionName: 'ga:deviceCategory',
+          operator: 'EXACT',
+          expressions: ['desktop']
+        }
+      ],
+    }
+  ],
+  orderBys: [
+    {
+      fieldName: 'ga:dimension2',
+      orderType: 'DIMENSION_AS_INTEGER'
+    }
+  ]
+}
+```
+
+This API request returns an array of values that look like this (Note: these are just the first five results). The results are sorted from smallest to largest, so these rows represent the fastest times.
+
+<table>
+  <tr><th colspan="2">API Response Results (first five rows)</th></tr>
+  <tr>
+    <td>ga:dimension2</td>
+    <td>ga:totalEvents</td>
+  </tr>
+  <tr>
+    <td>4</td>
+    <td>3</td>
+  </tr>
+  <tr>
+    <td>5</td>
+    <td>2</td>
+  </tr>
+  <tr>
+    <td>6</td>
+    <td>10</td>
+  </tr>
+  <tr>
+    <td>7</td>
+    <td>8</td>
+  </tr>
+  <tr>
+    <td>8</td>
+    <td>10</td>
+  </tr>
+</table>
+
+Here's what these results mean in plain English:
+
+- There were 3 events where the `firstpaint` value was 4 ms
+- There were 2 events where the `firstpaint` value was 5 ms
+- There were 10 events where the `firstpaint` value was 6 ms
+- There were 8 events where the `firstpaint` value was 7 ms
+- There were 10 events where the `firstpaint` `value` was 8 ms
+- etc.
+
+From these results we can extrapolate the `firstpaint` value for every single event and create a histogram of the distribution. We did this for each of the queries we ran.
+
+Here's what the distribution looked like on desktop with a non-controlled (but supported) service worker:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Upig4DMY4d4coTSpmf9x.png", alt="Time to first paint distribution on Desktop (supported)", width="800", height="400" %}
+</figure>
+
+The median `firstpaint` time for the above distribution is **912 ms**.
+
+The shape of this curve is quite typical of load time distributions. Contrast that with the histogram below which shows the distribution of first paint events for visits in which a service worker was controlling the page.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/c9xl78q8bfDchwW0yS3Y.png", alt="Time to first paint distribution on Desktop (controlled)", width="800", height="400" %}
+</figure>
+
+Notice that when a service worker was controlling the page, many visitors experienced a near-immediate first paint, with a median of **583 ms**.
+
+> "…when a service worker was controlling the page, many visitors experienced a near-immediate first paint…"
+
+To get a better sense of how these two distributions compare to each other, the next chart shows a merged view of the two. The histogram showing non-controlled service worker visits is overlaid on top of the histogram showing controlled visits, and both of those are overlaid on top of a histogram showing both combined.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XO5mhd3VRT79MRHu2E9M.png", alt="Time to first paint distribution on Desktop", width="800", height="400" %}
+</figure>
+
+One thing I found interesting about these results was that the distribution with a controlled service worker still had a bell-shaped curve after the initial spike. I was expecting a large initial spike and then a gradual trail off, I wasn't expecting a second peak in the curve.
+
+When I looked into what might be causing this, I learned that even though a service worker can be controlling a page, its thread can be inactive. The browser does this to [save resources](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/#motivations) - obviously you don't need every service worker for every site you've ever visited to be active and ready at a moment's notice. This explains the tail of the distribution. For some users, there was a delay while the service worker thread started up.
+
+As you can see from the distribution though, even with this initial delay, browsers with service worker delivered content faster than browsers going through the network.
+
+Here's how things looked on mobile:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/B2SBEmyFxyxbTmHkOLNE.png", alt="Time to first paint distribution on Mobile", width="800", height="417" %}
+</figure>
+
+While we still had a sizeable increase in near-immediate first paint times, the tail was quite a bit larger and longer. This is likely because, on mobile, starting an idle service worker thread takes longer than it does on desktop. It also explains why the difference between average `firstpaint` time wasn't as big as I was expecting (discussed above).
+
+> "…on mobile, starting an idle service worker thread takes longer than it does on desktop."
+
+Here is the breakdown from these variations of median first paint times on mobile and desktop grouped by service worker status:
+
+<table>
+  <tr><th colspan="3">Median Time to First Paint (ms)</th></tr>
+  <tr>
+    <td>Service Worker Status</td>
+    <td>Desktop</td>
+    <td>Mobile</td>
+  <tr>
+  <tr>
+    <td>Controlled</td>
+    <td>583</td>
+    <td>1634</td>
+  </tr>
+  <tr>
+    <td>Supported (not controlled)</td>
+    <td>912</td>
+    <td>1933</td>
+  </tr>
+</table>
+
+While building these distribution visualizations took a bit more time and effort than creating a custom report in Google Analytics, they give us a far better sense of how service workers affect the performance of our site than averages alone.
+
+## Other impact from Service Workers
+
+In addition to the performance impact, service workers also impact the user experience in several other ways that are measurable with Google Analytics.
+
+### Offline access
+
+Service workers allow users to interact with your site while offline, and while some sort of offline support is probably critical for any progressive web app, determining how critical it is in your case largely depends on how much usage is occurring offline. But how do we measure that?
+
+Sending data to Google Analytics requires an internet connection, but it doesn't require the data to be sent at the exact time the interaction took place. Google Analytics supports sending interaction data after the fact by specifying a time offset (via the [`qt`](https://developers.google.com//analytics/devguides/collection/protocol/v1/parameters#qt) parameter).
+
+For the past two years IOWA has been using a [service worker script](https://www.npmjs.com/package/sw-offline-google-analytics) that detects failed hits to Google Analytics when the user is offline and replays them later with the `qt` parameter.
+
+To track whether the user was online or offline, we created a custom dimension called *Online* and set it to the value of `navigator.onLine`, we then listened for the `online` and `offline` events and updated the dimension accordingly.
+
+And to get a sense for how common it was for a user to be offline while using IOWA, we created a [segment](https://support.google.com/analytics/answer/3123951) that targeted users with at least one offline interaction. Turns out, that was almost 5% of users.
+
+### Push notifications
+
+Service workers allow users to opt-in to receiving push notifications. In IOWA, users were notified when a session in their schedule was about to start.
+
+As with any form of notifications, it's important to find the balance between providing value to the user and annoying them. To better understand which is happening, it's important to track whether users are opting-in to receive these notifications, if they're engaging with them when they arrive, and if any users who previously opted-in change their preference and opt-out.
+
+In IOWA, we only sent notifications related to the user's personalized schedule, something only logged-in users could create. This limited the set of users who could receive notifications to logged-in users (tracked via a custom dimension called *Signed In*) whose browsers supported push notifications (tracked via another custom dimension called *Notification Permission*).
+
+The following report is based on the metric [Users](https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=user&jump=ga_users) and our Notification Permission custom dimension, segmented by users who signed in at some point and whose browsers support push notifications.
+
+It's great to see that more than half of our signed-in users opted to receive push notifications.
+
+### App install banners
+
+If a progress web app meets the [criteria](https://developers.google.com/web/fundamentals/app-install-banners/) and is used frequently by a user, that user may be shown an app install banner, prompting them to add the app to their home screen.
+
+In IOWA, we tracked how often these prompts were shown to the user (and whether they were accepted) with the following code:
+
+```js
+window.addEventListener('beforeinstallprompt', function(event) {
+  // Tracks that the user saw a prompt.
+  ga('send', 'event', {
+    eventCategory: 'installprompt',
+    eventAction: 'fired'
+  });
+
+  event.userChoice.then(function(choiceResult) {
+    // Tracks the users choice.
+    ga('send', 'event', {
+      eventCategory: 'installprompt',
+      // `choiceResult.outcome` will be 'accepted' or 'dismissed'.
+      eventAction: choiceResult.outcome,
+      // `choiceResult.platform` will be 'web' or 'android' if the prompt was
+      // accepted, or '' if the prompt was dismissed.
+      eventLabel: choiceResult.platform
+    });
+  });
+});
+```
+
+Of the users who saw an app install banner, about 10% chose to add it to their home screen.
+
+## Possible tracking improvements (for next time)
+
+The analytics data we collected from IOWA this year was invaluable. But hindsight always brings to light holes and opportunities to improve things for the next time around. After finishing this year's analysis, here are two things I wish we'd done differently that readers looking to implement a similar strategy might want to consider:
+
+**1. Track more events related to the load experience**
+
+We tracked several events that correspond to a technical metric (e.g. [HTMLImportsLoaded](http://webcomponents.org/polyfills/html-imports/), [WebComponentsReady](https://github.com/webcomponents/webcomponentsjs#webcomponentsready), etc.), but since so much of the load was done asynchronously, the point at which these events fired didn't necessarily correspond with a particular moment in the overall load experience.
+
+The primary load-related event we didn't track (but wish we had) is the point at which the splash screen disappeared and the user could see the page content.
+
+**2. Store the analytics client ID in IndexedDB**
+
+By default, analytics.js stores the [client ID field](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id) in the browser's cookies; unfortunately, service worker scripts cannot access cookies.
+
+This presented a problem for us when we tried to implement notification tracking. We wanted to send an event from the service worker (via the [Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/)) each time a notification was sent to a user, and then track the re-engagement success of that notification if the user clicked on it and arrived back in the app.
+
+While we were able to track the success of notifications in general via the `utm_source` [campaign parameter](https://support.google.com/analytics/answer/1033863#parameters), we weren't able to tie a particular re-engagement session to a particular user.
+
+What we could have done to work around this limitation was store the client ID via IndexedDB in our tracking code, and then that value would have been accessible to the service worker script.
+
+**3. Let the service worker report online/offline status**
+
+Inspecting `navigator.onLine` will let you know if your browser is able to connect to the router or local area network, but it won't necessarily tell if you if the user has real connectivity. And since our offline analytics service worker script simply replayed failed hits (without modifying them, or marking them as failed), we were probably under-reporting our offline usage.
+
+In the future we should track both the status of `navigator.onLine` as well as whether the hit was replayed by the service worker due to an initial network failure. This will give us a more accurate picture of the true offline usage.
+
+## Wrapping up
+
+This case study has shown that using service worker did indeed improve the load performance of the Google I/O webapp across a wide range of browsers, networks, and devices. It has also shown that when you look at a distribution of the load data across a wide range of browsers, networks, and devices, you get much more insight into how this technology handles real-world scenarios, and you discover performance characteristics that you may not have expected.
+
+Here were some of the key takeaways from the IOWA study:
+
+- On average, pages loaded quite a bit faster when a service worker was controlling the page than they did without a service worker, for both new and returning visitors.
+- Visits to pages controlled by a service worker loaded almost instantly for many users.
+- Service workers, when inactive, took a bit of time to start up. However, an inactive service worker still performed better than no service worker.
+- The startup time for an inactive service worker was longer on mobile than on desktop.
+
+While the performance gains observed in one particular application are generally useful to report to the larger developer community, it's important to remember that these results are specific to the type of site IOWA is (an event site) and the type of audience IOWA has (mostly developers).
+
+If you're implementing service worker in your application, it's important that you implement your own measurement strategy so you can assess your own performance and prevent future regression. If you do, please share your results so everyone can benefit!
+
+## Footnotes
+
+1. It's not entirely fair to compare the performance of our service worker cache implementation to the performance of our site with HTTP cache alone. Because we were optimizing IOWA for service worker, we didn't spend much time optimizing for HTTP cache. If we had, the results probably would have been different. To learn more about optimizing your site for HTTP cache, read [Optimizing Content Efficiently](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching).
+1. Depending on how your site loads its styles and content, it's possible that the browser is able to paint prior to content or styles being available. In such cases, `firstpaint` may correspond to a blank white screen. If you use `firstpaint`, it's important to ensure it corresponds to a meaningful point in the loading of your site's resources.
+1. Technically we could send a [timing](https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings) hit (which are non-interaction by default) to capture this information instead of an event. In fact, timing hits were added to Google Analytics specifically to track load metrics like this; however, timing hits get [heavily sampled](/analytics/devguides/collection/analyticsjs/user-timings#sampling_considerations) at processing time, and their values cannot be used in [segments](https://support.google.com/analytics/answer/3123951). Given these current limitations, non-interaction events remain better suited.
+1. To better understand what scope to give a custom dimension in Google Analytics refer to the [Custom Dimension](https://support.google.com/analytics/answer/2709828) section of the Analytics help center. It's also important to understand the Google Analytics data model, which consists of users, sessions, and interactions (hits). To learn more, watch the [Analytics Academy lesson on the Google Analytics Data Model](https://analyticsacademy.withgoogle.com/course/2/unit/1/lesson/3).
+1. This does not account for resources lazily loaded after the load event.
diff --git a/src/site/content/en/blog/service-workers-iowa/index.md b/src/site/content/en/blog/service-workers-iowa/index.md
new file mode 100644
index 00000000000..894f76b9333
--- /dev/null
+++ b/src/site/content/en/blog/service-workers-iowa/index.md
@@ -0,0 +1,515 @@
+---
+layout: post
+title: Service Workers in Production
+date: 2015-10-01
+updated: 2015-10-01
+authors:
+ - jeffposnick
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HhySNupQxJmqcouugbqS.png", alt="Portrait screenshot", width="800", height="1353" %}
+</figure>
+
+### Summary
+
+Learn how we used service worker libraries to make the Google I/O 2015 web app
+fast, and offline-first.
+
+## Overview
+
+This year’s [Google I/O 2015 web app](https://events.google.com/io2015/) was
+written by Google’s Developer Relations team, based on designs by our friends
+at [Instrument](http://www.instrument.com/), who wrote the nifty
+[audio/visual experiment](http://www.instrument.com/news/google-io-2015). Our
+team’s mission was to ensure that the I/O web app (which I’ll refer to by
+its codename, IOWA) showcased everything the modern web could do. A full
+offline-first experience was at the top of our list of must-have features.
+
+If you’ve read any of the other articles on this site recently, you’ve
+undoubtedly encountered [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers),
+and you won’t be surprised to hear that IOWA’s offline support is heavily
+reliant on them. Motivated by the real-world needs of IOWA, we developed two
+libraries to handle two different offline use cases:
+[`sw-precache`](https://github.com/GoogleChrome/sw-precache) to automate
+precaching of static resources, and
+[`sw-toolbox`](https://github.com/GoogleChrome/sw-toolbox) to handle
+runtime caching and fallback strategies.
+
+The libraries complement each other nicely, and allowed us to implement a
+performant strategy in which IOWA’s static content “shell” was always served
+directly from the cache, and dynamic or remote resources were served from the
+network, with fallbacks to cached or static responses when needed.
+
+## Precaching with `sw-precache`
+
+IOWA’s static resources—its HTML, JavaScript, CSS, and images—provide the core
+shell for the web application. There were two specific requirements that were
+important when thinking about caching these resources: we wanted to make sure
+that most static resources were cached, and that they were kept up to date.
+[`sw-precache`](https://github.com/GoogleChrome/sw-precache) was built with those
+requirements in mind.
+
+### Build-time Integration
+
+`sw-precache` with IOWA’s [`gulp`](http://gulpjs.com/)-based build process,
+and we rely on a series of [glob](https://github.com/isaacs/node-glob) patterns
+to ensure that we generate a complete list of all the static resources IOWA uses.
+
+```js
+staticFileGlobs: [
+    rootDir + '/bower_components/**/*.{html,js,css}',
+    rootDir + '/elements/**',
+    rootDir + '/fonts/**',
+    rootDir + '/images/**',
+    rootDir + '/scripts/**',
+    rootDir + '/styles/**/*.css',
+    rootDir + '/data-worker-scripts.js'
+]
+```
+
+Alternative approaches, like hard coding a list of file names into an array,
+and remembering to bump a cache version number each time any of those files
+changes were far too error prone, especially given that we had
+[multiple team members](https://events.google.com/io2015/humans.txt) checking
+in code. No one wants to break offline support by leaving out a new file in a
+manually maintained array! Build-time integration meant we could make
+changes to existing files and add new files without having those worries.
+
+### Updating Cached Resources
+
+`sw-precache` generates a base [service worker script](https://events.google.com/io2015/service-worker.js)
+that includes a unique [MD5 hash](https://en.wikipedia.org/wiki/MD5) for each
+resource that gets precached. Each time an existing resource changes,
+or a new resource is added, the service worker script is regenerated. This
+automatically triggers the [service worker update flow](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#lifecycle),
+in which the new resources are cached and out of date resources are purged.
+Any existing resources that have identical MD5 hashes are left as-is. That
+means users who have visited the site before only end up downloading the
+minimal set of changed resources, leading to a much more efficient experience
+than if the entire cache was expired *en masse*.
+
+Each file that matches one of the glob patterns is downloaded and cached the
+first time a user visits IOWA. We made an effort to ensure that only critical
+resources needed to render the page were precached. Secondary content, like the
+media used in the [audio/visual experiment](http://www.instrument.com/news/google-io-2015),
+or the profile images of the sessions’ speakers, were deliberately not
+precached, and we instead used the [`sw-toolbox`](https://github.com/GoogleChrome/sw-toolbox)
+library to handle offline requests for those resources.
+
+
+## `sw-toolbox`, for All Our Dynamic Needs
+
+As mentioned, precaching every resource that a site needs to work offline isn’t
+feasible. Some resources are too large or infrequently used to make it
+worthwhile, and other resources are dynamic, like the responses from a remote
+API or service. But just because a request isn’t precached doesn’t mean it has
+to result in a [`NetworkError`](https://developer.mozilla.org/docs/Web/API/DOMException#exception-NetworkError).
+[`sw-toolbox`](https://github.com/GoogleChrome/sw-toolbox) gave us the
+flexibility to implement [request handlers](https://github.com/GoogleChrome/sw-toolbox#request-handlers)
+that handle runtime caching for some resources and custom fallbacks for
+others. We also used it to update our previously cached resources in response
+to push notifications.
+
+Here are a few examples of custom request handlers that we built on top of
+sw-toolbox. It was easy to integrate them with the base service worker script
+via `sw-precache`’s [`importScripts parameter`](https://github.com/GoogleChrome/sw-precache#importscripts-arraystring),
+which pulls standalone JavaScript files into the scope of the service worker.
+
+{% Aside %}
+The [GitHub source code](https://github.com/GoogleChrome/ioweb2015) for this app uses an previous version of `sw-toolbox` named `shed; you can assume that the older `shed` interface and the newer `toolbox` interface can be used interchangeably.
+{% endAside %}
+
+### Audio/Visual Experiment
+
+For the [audio/visual experiment](https://github.com/GoogleChrome/ioweb2015/blob/master/app/scripts/shed/experiment.js),
+we used `sw-toolbox`’s [`networkFirst`](https://github.com/GoogleChrome/sw-toolbox#toolboxnetworkfirst)
+cache strategy. All HTTP requests matching the URL pattern for the experiment
+would first be made against the network, and if a successful response was
+returned, that response would then be stashed away using the
+[Cache Storage API](https://developer.mozilla.org/docs/Web/API/Cache).
+If a subsequent request was made when the network was unavailable, the
+previously cached response would be used.
+
+Because the cache was automatically updated each time a successful network
+response came back, we didn’t have to specifically version resources or expire
+entries.
+
+```js
+toolbox.router.get('/experiment/(.+)', toolbox.networkFirst);
+```
+
+### Speaker Profile Images
+
+For speaker profile images, our goal was to display a previously cached version of a
+given speaker’s image if it was available, falling back to the network to retrieve the
+image if it wasn’t. If that network request failed, as a final fallback, we used a
+generic placeholder image that was precached (and therefore would always be
+available). This is a common strategy to use when dealing with images that
+could be replaced with a generic placeholder, and it was easy to implement by
+chaining `sw-toolbox`’s
+[`cacheFirst`](https://github.com/GoogleChrome/sw-toolbox#toolboxcachefirst) and
+[`cacheOnly`](https://github.com/GoogleChrome/sw-toolbox#toolboxcacheonly) handlers.
+
+```js
+var DEFAULT_PROFILE_IMAGE = 'images/touch/homescreen96.png';
+
+function profileImageRequest(request) {
+    return toolbox.cacheFirst(request).catch(function() {
+    return toolbox.cacheOnly(new Request(DEFAULT_PROFILE_IMAGE));
+    });
+}
+
+toolbox.precache([DEFAULT_PROFILE_IMAGE]);
+toolbox.router.get('/(.+)/images/speakers/(.*)',
+                    profileImageRequest,
+                    {origin: /.*\.googleapis\.com/});
+```
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gIn35LPfj3XD1OFG09QP.png", alt="Profile images from a session page", width="300", height="502" %}
+  <figcaption>
+    Profile images from a <a href="https://events.google.com/io2015/schedule?filters=Develop%20%26%20Design%2CChrome%20%2F%20Web&sid=1b718f8b-b6d4-e411-b87f-00155d5066d7#day1/1b718f8b-b6d4-e411-b87f-00155d5066d7">session page</a>.
+  </figcaption>
+</figure>
+
+### Updates to Users’ Schedules
+
+One of the key features of IOWA was allowing signed-in users to create and
+maintain a schedule of sessions they planned on attending. Like you’d expect,
+session updates were made via HTTP `POST` requests to a backend server, and we
+spent some time working out the best way to handle those state-modifying
+requests when the user is offline. We came up with a combination of a
+that queued failed requests in IndexedDB, coupled with logic in the main web page
+that checked IndexedDB for queued requests and retried any that it found.
+
+```js
+var DB_NAME = 'shed-offline-session-updates';
+
+function queueFailedSessionUpdateRequest(request) {
+    simpleDB.open(DB_NAME).then(function(db) {
+    db.set(request.url, request.method);
+    });
+}
+
+function handleSessionUpdateRequest(request) {
+    return global.fetch(request).then(function(response) {
+    if (response.status >= 500) {
+        return Response.error();
+    }
+    return response;
+    }).catch(function() {
+    queueFailedSessionUpdateRequest(request);
+    });
+}
+
+toolbox.router.put('/(.+)api/v1/user/schedule/(.+)',
+                    handleSessionUpdateRequest);
+toolbox.router.delete('/(.+)api/v1/user/schedule/(.+)',
+                        handleSessionUpdateRequest);
+```
+
+Because the retries were made from the context of the main page, we could be
+sure that they included a fresh set of user credentials. Once the retries
+succeeded, we displayed a message to let the user know that their previously
+queued updates had been applied.
+
+```js
+simpleDB.open(QUEUED_SESSION_UPDATES_DB_NAME).then(function(db) {
+    var replayPromises = [];
+    return db.forEach(function(url, method) {
+    var promise = IOWA.Request.xhrPromise(method, url, true).then(function() {
+        return db.delete(url).then(function() {
+        return true;
+        });
+    });
+    replayPromises.push(promise);
+    }).then(function() {
+    if (replayPromises.length) {
+        return Promise.all(replayPromises).then(function() {
+        IOWA.Elements.Toast.showMessage(
+            'My Schedule was updated with offline changes.');
+        });
+    }
+    });
+}).catch(function() {
+    IOWA.Elements.Toast.showMessage(
+    'Offline changes could not be applied to My Schedule.');
+});
+```
+
+### Offline Google Analytics
+
+In a similar vein, we implemented a handler to queue any failed Google
+Analytics requests and attempt to replay them later, when the network was
+hopefully available. With this approach, being offline doesn’t mean sacrificing
+the insights Google Analytics offers. We added the [`qt`](https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#qt)
+parameter to each queued request, set to the amount of time that had passed
+since the request was first attempted, to ensure that a proper event
+attribution time made it to the Google Analytics backend. Google Analytics
+[officially supports](https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#qt)
+values for `qt` of up to only 4 hours, so we made a best-effort attempt to replay those
+requests as soon as possible, each time the service worker started up.
+
+```js
+var DB_NAME = 'offline-analytics';
+var EXPIRATION_TIME_DELTA = 86400000;
+var ORIGIN = /https?:\/\/((www|ssl)\.)?google-analytics\.com/;
+
+function replayQueuedAnalyticsRequests() {
+    simpleDB.open(DB_NAME).then(function(db) {
+    db.forEach(function(url, originalTimestamp) {
+        var timeDelta = Date.now() - originalTimestamp;
+        var replayUrl = url + '&qt=' + timeDelta;
+        fetch(replayUrl).then(function(response) {
+        if (response.status >= 500) {
+            return Response.error();
+        }
+        db.delete(url);
+        }).catch(function(error) {
+        if (timeDelta > EXPIRATION_TIME_DELTA) {
+            db.delete(url);
+        }
+        });
+    });
+    });
+}
+
+function queueFailedAnalyticsRequest(request) {
+    simpleDB.open(DB_NAME).then(function(db) {
+    db.set(request.url, Date.now());
+    });
+}
+
+function handleAnalyticsCollectionRequest(request) {
+    return global.fetch(request).then(function(response) {
+    if (response.status >= 500) {
+        return Response.error();
+    }
+    return response;
+    }).catch(function() {
+    queueFailedAnalyticsRequest(request);
+    });
+}
+
+toolbox.router.get('/collect',
+                    handleAnalyticsCollectionRequest,
+                    {origin: ORIGIN});
+toolbox.router.get('/analytics.js',
+                    toolbox.networkFirst,
+                    {origin: ORIGIN});
+
+replayQueuedAnalyticsRequests();
+```
+
+### Push Notification Landing Pages
+
+Service workers didn’t just handle IOWA’s offline functionality—they also
+powered the [push notifications](https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web)
+that we used to notify users about updates to their bookmarked sessions. The
+landing page associated with those notifications displayed the updated session
+details. Those landing pages were already being cached as part of the overall
+site, so they already worked offline, but we needed to make sure that the
+session details on that page were up to date, even when viewed offline. To do
+that, we modified previously cached session metadata with the updates that
+triggered the push notification, and we stored the result in the cache. This
+up-to-date info will be used the next time the session details page is opened,
+whether that takes place online or offline.
+
+```js
+caches.open(toolbox.options.cacheName).then(function(cache) {
+    cache.match('api/v1/schedule').then(function(response) {
+    if (response) {
+        parseResponseJSON(response).then(function(schedule) {
+        sessions.forEach(function(session) {
+            schedule.sessions[session.id] = session;
+        });
+        cache.put('api/v1/schedule',
+                    new Response(JSON.stringify(schedule)));
+        });
+    } else {
+        toolbox.cache('api/v1/schedule');
+    }
+    });
+});
+```
+
+## Gotchas & Considerations
+
+Of course, no one works on a project of IOWA’s scale without running into a few
+gotchas. Here are some of the ones we ran into, and how we worked around them.
+
+### Stale Content
+
+Whenever you’re planning a caching strategy, whether implemented via service
+workers or with the standard browser cache, there’s a tradeoff between
+delivering resources as quickly as possible versus delivering the freshest
+resources. Via `sw-precache`, we implemented an aggressive cache-first
+strategy for our application’s shell, meaning our service worker would not check the
+network for updates before returning the HTML, JavaScript, and CSS on the page.
+
+Fortunately, we were able to take advantage of [service worker lifecycle events](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#lifecycle)
+to detect when new content was available after the page had already loaded.
+When an updated service worker is detected, we display a
+[toast message](https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage)
+to the user letting them know that they should reload their page to see the
+newest content.
+
+```js
+if (navigator.serviceWorker && navigator.serviceWorker.controller) {
+    navigator.serviceWorker.controller.onstatechange = function(e) {
+    if (e.target.state === 'redundant') {
+        var tapHandler = function() {
+        window.location.reload();
+        };
+        IOWA.Elements.Toast.showMessage(
+        'Tap here or refresh the page for the latest content.',
+        tapHandler);
+    }
+    };
+}
+```
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NGVMuSfcRkhBcdxnGJLw.png", alt="The latest content toast", width="300", height="159" %}
+  <figcaption>The "latest content" toast.</figcaption>
+</figure>
+
+
+### Make Sure Static Content is Static!
+
+`sw-precache` uses an MD5 hash of local files’ contents, and only fetches
+resources whose hash has changed. This means that resources are available on the page
+almost immediately, but it also means that once something is cached, it’s going to
+stay cached until it’s assigned a new hash in an updated service worker script.
+
+We [ran into an issue](https://github.com/GoogleChrome/ioweb2015/issues/1504)
+with this behavior during I/O due to our backend needing to dynamically update
+the livestream YouTube video IDs for each day of the conference. Because the
+[underlying template file](https://github.com/GoogleChrome/ioweb2015/blob/d2ec7f1a86123483acd1d07fb2c7f84f2413b195/app/templates/layout_full.html#L385)
+was static and didn’t change, our service worker update flow wasn’t triggered,
+and what was meant to be a dynamic response from the server with updating
+YouTube videos ended up being the cached response for a number of users.
+
+You can avoid this type of issue by making sure your web application is
+structured so that the shell is always static and can be safely precached,
+while any dynamic resources which modify the shell are loaded independently.
+
+### Cache-bust Your Precaching Requests
+
+When `sw-precache` makes requests for resources to precache, it uses those
+responses indefinitely as long as it thinks that the MD5 hash for the file hasn’t
+changed. This means that it’s particularly important to make sure that the response to
+the precaching request is a fresh one, and not returned from the browser’s HTTP
+cache. (Yes, `fetch()` requests made in a service worker can respond with
+data from the browser’s HTTP cache.)
+
+To ensure that responses we precache are straight from the network and not the
+browser’s HTTP cache, `sw-precache` automatically
+[appends a cache-busting query parameter](https://github.com/GoogleChrome/sw-precache/blob/16acd75940a83d97b1069b7be00522405bce0690/service-worker.tmpl#L67)
+to each URL it requests. If you’re not using `sw-precache` and you are
+making use of a cache-first response strategy, make sure that you
+[do something similar](https://github.com/GoogleChrome/samples/blob/e4df12c8642381243b6c1710c41394d85b33d82f/service-worker/prefetch/service-worker.js#L56)
+in your own code!
+
+A cleaner solution to cache-busting would be to set the
+[cache mode](https://fetch.spec.whatwg.org/#concept-request-cache-mode)
+of each `Request` used for precaching to `reload`, which will ensure that the
+response comes from the network. However, as of this writing, the cache mode
+option [isn’t supported](https://code.google.com/p/chromium/issues/detail?id=453190#c10)
+in Chrome.
+
+### Support for Logging In & Out
+
+IOWA allowed users to log in using their Google Accounts and update their
+customized event schedules, but that also meant that users might later log out.
+Caching personalized response data is obviously a tricky topic, and there’s not
+always a single right approach.
+
+Since viewing your personal schedule, even when offline, was core to the IOWA
+experience, we decided that using cached data was appropriate. When a user signs out,
+we made sure to clear previously cached session data.
+
+```js
+    self.addEventListener('message', function(event) {
+      if (event.data === 'clear-cached-user-data') {
+        caches.open(toolbox.options.cacheName).then(function(cache) {
+          cache.keys().then(function(requests) {
+            return requests.filter(function(request) {
+              return request.url.indexOf('api/v1/user/') !== -1;
+            });
+          }).then(function(userDataRequests) {
+            userDataRequests.forEach(function(userDataRequest) {
+              cache.delete(userDataRequest);
+            });
+          });
+        });
+      }
+    });
+```
+
+### Watch Out for Extra Query Parameters!
+
+When a service worker checks for a cached response, it uses a request URL as the key.
+By default, the request URL must exactly match the URL used to store the cached response, including
+any query parameters in the [search](https://developer.mozilla.org/docs/Web/API/URLUtils/search)
+portion of the URL.
+
+This ended up causing an issue for us during development, when we started using
+[URL parameters](https://support.google.com/analytics/answer/1033867) to keep track of where our
+traffic was coming from. For example, we [added](https://github.com/GoogleChrome/ioweb2015/blob/28113917b88436dd569c39fd5eef184b6aefdd1c/app/scripts/shed/push-notifications.js#L32)
+the `utm_source=notification` parameter to URLs that were opened when clicking on one of our
+notifications, and used `utm_source=web_app_manifest` in the [`start_url`](https://github.com/GoogleChrome/ioweb2015/blob/0bab714dbb08927f901420fc05b43b9f97f7ddc3/app/templates/manifest.json#L4)
+for our [web app manifest](https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android).
+URLs which previously matched cached responses were coming up as misses when those parameters
+were appended.
+
+This is partially addressed by the [`ignoreSearch`](https://developer.mozilla.org/docs/Web/API/Cache/match#Parameters)
+option which can be used when calling `Cache.match()`. Unfortunately, Chrome [doesn't yet](https://developers.google.com/web/updates/2015/09/updates-to-cache-api#cache-query-options-coming-to-chrome-soon)
+support `ignoreSearch`, and even if it did, it's an all-or-nothing behavior. What we needed was a
+way to ignore _some_ URL query parameters while taking others that were meaningful into account.
+
+We ended up extending `sw-precache` to strip out some query parameters before checking for a cache
+match, and allow developers to customize which parameters are ignored via the
+[`ignoreUrlParametersMatching`](https://github.com/GoogleChrome/sw-precache#ignoreurlparametersmatching-arrayregex) option.
+Here's the underlying implementation:
+
+```js
+function stripIgnoredUrlParameters(originalUrl, ignoredRegexes) {
+    var url = new URL(originalUrl);
+
+    url.search = url.search.slice(1)
+    .split('&')
+    .map(function(kv) {
+        return kv.split('=');
+    })
+    .filter(function(kv) {
+        return ignoredRegexes.every(function(ignoredRegex) {
+        return !ignoredRegex.test(kv[0]);
+        });
+    })
+    .map(function(kv) {
+        return kv.join('=');
+    })
+    .join('&');
+
+    return url.toString();
+}
+```
+
+## What This Means for You
+
+The service worker integration in the Google I/O Web App is likely the most
+complex, real-world usage that has been deployed to this point. We’re looking
+forward to the web developer community using the tools we created
+[`sw-precache`](https://github.com/GoogleChrome/sw-precache) and
+[`sw-toolbox`](https://github.com/GoogleChrome/sw-toolbox) as well as the
+techniques we’re describing to power your own web applications.
+Service workers are a [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)
+that you can start using today, and when used as part of a properly structured
+web app, the speed and offline benefits are significant for your users.
+
diff --git a/src/site/content/en/blog/service-workers-registration/index.md b/src/site/content/en/blog/service-workers-registration/index.md
new file mode 100644
index 00000000000..11e1e1faff0
--- /dev/null
+++ b/src/site/content/en/blog/service-workers-registration/index.md
@@ -0,0 +1,208 @@
+---
+title: Service worker registration
+subhead: Best practices for timing your service worker registration.
+date: 2016-11-28
+updated: 2018-09-20
+description: Best practices for timing your service worker registration.
+authors:
+  - jeffposnick
+tags:
+  - blog
+---
+
+[Service
+workers](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+can meaningfully speed up repeat visits to your web app, but you should take
+steps to ensure that a service worker's initial installation doesn't degrade a
+user's first-visit experience.
+
+Generally, deferring service worker
+[registration](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register)
+until after the initial page has loaded will provide the best experience for
+users, especially those on mobile devices with slower network connections.
+
+## Common registration boilerplate
+
+If you've ever read about service workers, you've probably come across
+boilerplate substantially similar to the following:
+
+```js
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js');
+}
+```
+
+This might sometimes be accompanied by a few `console.log()` statements, or
+[code](https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L20)
+that detects an update to a previous service worker registration, as a way of
+letting users know to refresh the page. But those are just minor variations on
+the standard few lines of code.
+
+So, is there any nuance to `navigator.serviceWorker.register`? Are there any
+best practices to follow? Not surprisingly (given that this article doesn't end
+right here), the answer to both is "yes!"
+
+## A user's first visit
+
+Let's consider a user's first visit to a web app. There's no service worker yet,
+and the browser has no way of knowing in advance whether there will be a service
+worker that is eventually installed.
+
+As a developer, your priority should be to make sure that the browser quickly
+gets the minimal set of critical resources needed to display an interactive
+page. Anything that slows down retrieving those responses is the enemy of a
+speedy time-to-interactive experience.
+
+Now imagine that in the process of downloading the JavaScript or images that
+your page needs to render, your browser decides to start a background thread or
+process (for the sake of brevity, we'll assume it's a thread). Assume that
+you're not on a beefy desktop machine, but rather the type of underpowered
+mobile phone that much of the world considers their primary device. Spinning up
+this extra thread adds contention for CPU time and memory that your browser
+might otherwise spend on rendering an interactive web page.
+
+An idle background thread is unlikely to make a significant difference. But what
+if that thread isn't idle, but instead decides that it's also going to start
+downloading resources from the network? Any concern about CPU or memory
+contention should take a backseat to worries about the limited bandwidth
+available to many mobile devices. Bandwidth is precious, so don't undermine
+critical resources by downloading secondary resources at the same time.
+
+All of this is to say that spinning up a new service worker thread to download
+and cache resources in the background can work against your goal of providing
+the shortest time-to-interactive experience the first time a user visits your
+site.
+
+## Improving the boilerplate
+
+The solution is to control start of the service worker by choosing when to call
+`navigator.serviceWorker.register()`. A simple rule of thumb would be to delay
+registration until after the [`load
+event`](https://developer.mozilla.org//docs/Web/API/GlobalEventHandlers/onload)
+fires on `window`, like so:
+
+```js
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/service-worker.js');
+    });
+}
+```
+
+But the right time to kick off the service worker registration can also depend
+on what your web app is doing right after it loads. For example, the [Google I/O
+2016 web app](https://events.google.com/io2016/) features a short animation
+before transitioning to the main screen. Our team
+[found](https://developers.google.com/web/showcase/2016/iowa2016) that kicking
+off the service worker registration during the animation could lead to jankiness
+on low-end mobile devices. Rather than giving users a poor experience, we
+[delayed](https://github.com/GoogleChrome/ioweb2016/blob/8cfa27261f9d07fe8a5bb7d228bd3f35dfc9a91e/app/scripts/helper/elements.js#L42)
+service worker registration until after the animation, when the browser was most
+likely to have a few idle seconds.
+
+Similarly, if your web app uses a framework that performs additional setup after
+the page has loaded, look for a framework-specific event that signals when that
+work is done.
+
+## Subsequent visits
+
+We've been focusing on the first visit experience up until now, but what impact
+does delayed service worker registration have on repeat visits to your site?
+While it might surprise some folks, there shouldn't be any impact at all.
+
+When a service worker is registered, it goes through the `install` and
+`activate` [lifecycle
+events](/service-worker-lifecycle/).
+Once a service worker is activated, it can handle `fetch` events for any
+subsequent visits to your web app. The service worker starts *before* the
+request for any pages under its scope is made, which makes sense when you think
+about it. If the existing service worker weren't already running prior to
+visiting a page, it wouldn't have a chance to fulfill `fetch` events for
+navigation requests.
+
+So once there's an active service worker, it doesn't matter when you call
+`navigator.serviceWorker.register()`, or in fact, *whether you call it at all*.
+Unless you change the URL of the service worker script,
+`navigator.serviceWorker.register()` is effectively a
+[no-op](https://en.wikipedia.org/wiki/NOP) during subsequent visits. When it's
+called is irrelevant.
+
+## Reasons to register early
+
+Are there any scenarios in which registering your service worker as early as
+possible makes sense? One that comes to mind is when your service worker uses
+[`clients.claim()`](https://developer.mozilla.org/docs/Web/API/Clients/claim)
+to take control of the page during the first visit, and the service worker
+aggressively performs [runtime
+caching](/offline-cookbook/#on-network-response/)
+inside of its `fetch` handler. In that situation, there's an
+advantage to getting the service worker active as quickly as possible, to try to
+populate its runtime caches with resources that might come in handy later. If
+your web app falls into this category, it's worth taking a step back to make
+sure that your service worker's `install` handler doesn't request
+resources that fight for bandwidth with the main page's requests.
+
+## Testing things out
+
+A great way to simulate a first visit is to open your web app in a [Chrome
+Incognito
+window](https://support.google.com/chromebook/answer/95464?co=GENIE.Platform%3DDesktop),
+and look at the network traffic in [Chrome's
+DevTools](https://developer.chrome.com/docs/devtools/). As a web
+developer, you probably reload a local instance of your web app dozens and
+dozens of times a day. But by revisiting your site when there's already a
+service worker and fully populated caches, you don't get the same experience
+that a new user would get, and it's easy to ignore a potential problem.
+
+Here's an example illustrating the difference that registration timing could
+make. Both screenshots are taken while visiting a [sample
+app](https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo) in
+Incognito mode using network throttling to simulate a slow connection.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gYt2Mc2d03PmhxEcpqrb.png", alt="Network traffic with early registration.", width="481", height="260" %}
+</figure>
+
+The screenshot above reflects the network traffic when the sample was  modified
+to perform service worker registration as soon as possible. You can see
+precaching requests (the entries with the [gear
+icon](http://stackoverflow.com/questions/33590378/status-code200-ok-from-serviceworker-in-chrome-network-devtools/33655173#33655173)
+next to them, originating from the service worker's `install` handler)
+interspersed with requests for the other resources needed to display the page.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hqRuGzhEtWDm5EXJ88CE.png", alt="Network traffic with late registration.", width="593", height="210" %}
+</figure>
+
+In the screenshot above, service worker registration was delayed until after the
+page had loaded. You can see that the precaching requests don't start until all
+the resources have been fetched from the network, eliminating any contention for
+bandwidth. Moreover, because some of the items we're precaching are already in
+the browser's HTTP cache—the items with `(from disk cache)` in the Size
+column—we can populate the service worker's cache without having to go to the
+network again.
+
+Bonus points if you run this sort of test from an actual, low-end device on a
+real mobile network. You can take advantage of Chrome's [remote debugging
+capabilities](https://developer.chrome.com/docs/devtools/remote-debugging/)
+to attach an Android phone to your desktop machine via USB, and ensure that the
+tests you're running actually reflect the real-world experience of many of your
+users.
+
+## Conclusion
+
+To summarize, making sure that your users have the best first-visit experience
+should be a top priority. Delaying service worker registration until after the
+page has loaded during the initial visit can help ensure that. You'll still get
+all the benefits of having a service worker for your repeat visits.
+
+A straightforward way to ensure to delay your service worker's initial
+registration until after the first page has loaded is to use the following:
+
+```js
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/service-worker.js');
+    });
+}
+```
diff --git a/src/site/content/en/blog/shadowdom-201/index.md b/src/site/content/en/blog/shadowdom-201/index.md
new file mode 100644
index 00000000000..f8f25778bdb
--- /dev/null
+++ b/src/site/content/en/blog/shadowdom-201/index.md
@@ -0,0 +1,525 @@
+---
+layout: post
+title: Shadow DOM 201
+subhead: CSS and styling
+authors:
+  - ericbidelman
+date: 2013-03-15
+updated: 2016-10-03
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+This article describes an old version of Shadow DOM (v0). If you're interested in using Shadow DOM, check out our new article, "[Shadow DOM v1: self-contained web components](/shadowdom-v1/)". It covers everything in the newer Shadow DOM v1 spec shipped in Chrome 53, Safari 10, and Firefox 63.
+{% endAside %}
+
+This article discusses more of the amazing things you can do with Shadow DOM.
+It builds on the concepts discussed in [Shadow DOM 101](/shadowdom/).
+If you're looking for an introduction, see that article.
+
+## Introduction
+
+Let's face it. There's nothing sexy about unstyled markup. Lucky for us, [the brilliant folks behind Web Components](https://www.w3.org/TR/2012/WD-components-intro-20120522/#acknowledgements)
+foresaw this and didn't leave us hanging. The [CSS Scoping Module](https://drafts.csswg.org/css-scoping/) defines many options for styling content in a shadow tree.
+
+{% Aside %}
+In Chrome, turn on the "Enable experimental Web Platform features" in about:flags to experiment with everything covered in this article.
+{% endAside %}
+
+## Style encapsulation
+
+One of the core features of Shadow DOM is the [shadow boundary](https://dom.spec.whatwg.org/#shadow-trees). It has a lot of nice properties,
+but one of the best is that it provides style encapsulation for free. Stated another way:
+
+{% Aside %}
+CSS styles defined inside Shadow DOM are scoped to the ShadowRoot. This means styles are encapsulated by default.
+{% endAside %}
+
+```html
+<div><h3>Light DOM</h3></div>
+<script>
+var root = document.querySelector('div').createShadowRoot();
+root.innerHTML = `
+  <style>
+    h3 {
+      color: red;
+    }
+  </style>
+  <h3>Shadow DOM</h3>
+`;
+</script>
+```
+
+There are two interesting observations about this demo:
+
+- There are other h3s on this page, but the only one that matches the h3 selector, and therefore styled
+red, is the one in the ShadowRoot. Again, scoped styles by default.
+- Other styles rules defined on this page that target h3s don't bleed into my content.
+That's because **selectors don't cross the shadow boundary**.
+
+Moral of the story? We have style encapsulation from the outside world. Thanks Shadow DOM!
+
+## Styling the host element
+
+The `:host` allows you to select and style the element hosting a shadow tree:
+
+```html
+<button class="red">My Button</button>
+<script>
+var button = document.querySelector('button');
+var root = button.createShadowRoot();
+root.innerHTML = `
+  <style>
+    :host {
+      text-transform: uppercase;
+    }
+  </style>
+  <content></content>
+`;
+</script>
+```
+
+One gotcha is that rules in the parent page have higher specificity than `:host`
+rules defined in the element, but lower specificity than a `style` attribute
+defined on the host element.  This allows users to override your styling from the outside.
+`:host` also only works in the context of a ShadowRoot so you can't use it outside of Shadow DOM.
+
+The functional form of `:host(<selector>)` allows you to target the host element if it matches a `<selector>`.
+
+**Example** - match only if the element itself has the class `.different` (e.g. `<x-foo class="different"></x-foo>`):
+
+```css
+:host(.different) {
+    ...
+}
+```
+
+### Reacting to user states
+
+A common use case for `:host` is when you're creating a [Custom Element](/customelements/) and want to react to different user states (:hover, :focus, :active, etc.).
+
+```html
+<style>
+  :host {
+    opacity: 0.4;
+    transition: opacity 420ms ease-in-out;
+  }
+  :host(:hover) {
+    opacity: 1;
+  }
+  :host(:active) {
+    position: relative;
+    top: 3px;
+    left: 3px;
+  }
+</style>
+```
+
+### Theming an element
+
+The `:host-context(<selector>)` pseudo class matches the host element if it or any of its ancestors matches `<selector>`.
+
+A common use of `:host-context()` is for theming an element based on its surrounds. For example,
+many people do theming by applying a class to `<html>` or `<body>`:
+
+```html
+<body class="different">
+  <x-foo></x-foo>
+</body>
+```
+
+You can `:host-context(.different)` to style `<x-foo>` when it's a descendant of an element with the class `.different`:
+
+```css
+:host-context(.different) {
+  color: red;
+}
+```
+
+This gives you the ability encapsulate style rules in an element's Shadow DOM that
+uniquely style it, based on its context.
+
+### Support multiple host types from within one shadow root
+
+Another use for `:host` is if you're creating a theming library and want to
+support styling many types of host elements from within the same Shadow DOM.
+
+```css
+:host(x-foo) {
+    /* Applies if the host is a <x-foo> element.*/
+}
+
+:host(x-foo:host) {
+    /* Same as above. Applies if the host is a <x-foo> element. */
+}
+
+:host(div) {
+    /* Applies if the host element is a <div>. */
+}
+```
+
+## Styling Shadow DOM internals from the outside
+
+The `::shadow` pseudo-element and `/deep/` combinator are like having a Vorpal sword of CSS authority.
+They allow piercing through Shadow DOM's boundary to style elements within shadow trees.
+
+## The ::shadow pseudo-element
+
+If an element has at least one shadow tree, the `::shadow` pseudo-element matches the shadow root itself.
+It allows you to write selectors that style nodes internal to an element's shadow dom.
+
+For example, if an element is hosting a shadow root, you can write `#host::shadow span {}` to style all of the spans within its shadow tree.
+
+```html
+<style>
+  #host::shadow span {
+    color: red;
+  }
+</style>
+
+<div id="host">
+  <span>Light DOM</span>
+</div>
+
+<script>
+  var host = document.querySelector('div');
+  var root = host.createShadowRoot();
+  root.innerHTML = `
+    <span>Shadow DOM</span>
+    <content></content>
+  `;
+</script>
+```
+
+**Example** (custom elements) -  `<x-tabs>`  has `<x-panel>` children in its Shadow DOM. Each panel hosts its own shadow tree containing `h2` headings. To style those headings from the main page, one could write:
+
+```css
+x-tabs::shadow x-panel::shadow h2 {
+    ...
+}
+```
+
+### The /deep/ combinator
+
+The `/deep/` combinator is similar to `::shadow`, but more powerful. It completely ignores all shadow boundaries and crosses into any number of shadow trees. Put simply, `/deep/` allows you to drill into an element's guts and target any node.
+
+The `/deep/` combinator is particularly useful in the world of Custom Elements where it's common to have multiple levels of Shadow DOM. Prime examples are nesting a bunch of custom elements (each hosting their own shadow tree) or creating an element that inherits from another using [`<shadow>`](/shadowdom-301/#shadow-insertion-points).
+
+**Example** (custom elements) -  select all `<x-panel>` elements that are descendants of
+`<x-tabs>`, anywhere in the tree:
+
+```css
+x-tabs /deep/ x-panel {
+    ...
+}
+```
+
+**Example** - style all elements with the class `.library-theme`, anywhere in a shadow tree:
+
+```css
+body /deep/ .library-theme {
+    ...
+}
+```
+
+### Working with querySelector()
+
+Just like [`.shadowRoot`](/shadowdom-301/#obtaining-a-hosts-shadow-root) opens
+shadow trees up for DOM traversal, the combinators open shadow trees for selector traversal.
+Instead of writing a nested chain of madness, you can write a single statement:
+
+```js
+// No fun.
+document.querySelector('x-tabs').shadowRoot
+        .querySelector('x-panel').shadowRoot
+        .querySelector('#foo');
+
+// Fun.
+document.querySelector('x-tabs::shadow x-panel::shadow #foo');
+```
+
+### Styling native elements
+
+Native HTML controls are a challenge to style. Many people simply give up
+and roll their own. However, with `::shadow` and `/deep/`, any element in the web platform that
+uses Shadow DOM can be styled. Great examples are the `<input>` types and `<video>`:
+
+```css
+video /deep/ input[type="range"] {
+  background: hotpink;
+}
+```
+
+{% Aside %}
+Do the `::shadow` pseudo-element and `/deep/` combinator defeat the purpose of style encapsulation? Out of the box, Shadow DOM prevents __accidental__ styling from outsiders but it never promises to be a bullet proof vest. Developers should be allowed to __intentionally__ style inner parts of your Shadow tree…if they know what they're doing. Having more control is also good for flexibility, theming, and the re-usability of your elements.
+{% endAside %}
+
+## Creating style hooks
+
+Customization is good. In certain cases, you may want to poke holes in your Shadow's
+styling shield and create hooks for others to style.
+
+### Using ::shadow and /deep/
+
+There's a lot of power behind `/deep/`. It gives component authors a way to designate
+individual elements as styleable or a slew of elements as themeable.
+
+**Example** - style all elements that have the class `.library-theme`, ignoring all shadow trees:
+
+```css
+body /deep/ .library-theme {
+    ...
+}
+```
+
+### Using custom pseudo elements
+
+Both [WebKit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?format=txt) and
+[Firefox](https://developer.mozilla.org/docs/Web/CSS/Mozilla_Extensions#pseudo-elements_and_pseudo-classes) define pseudo elements for styling internal pieces of native browser elements. A good example
+is the `input[type=range]`. You can style the slider thumb `<span style="color:blue">blue</span>` by targeting `::-webkit-slider-thumb`:
+
+```css
+input[type=range].custom::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-color: blue;
+  width: 10px;
+  height: 40px;
+}
+```
+
+Similar to how browsers provide styling hooks into some internals,
+authors of Shadow DOM content can designate certain elements as styleable by
+outsiders. This is done through [custom pseudo elements](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Custom-Pseudo-Elements.md).
+
+You can designate an element as a custom pseudo element by using the `pseudo` attribute.
+Its value, or name, needs to be prefixed with "x-". Doing so creates
+an association with that element in the shadow tree and gives outsiders a
+designated lane to cross the shadow boundary.
+
+Here's an example of creating a custom slider widget and allowing someone to style
+its slider thumb blue:
+
+```html
+<style>
+  #host::x-slider-thumb {
+    background-color: blue;
+  }
+</style>
+<div id="host"></div>
+<script>
+  var root = document.querySelector('#host').createShadowRoot();
+  root.innerHTML = `
+    <div>
+      <div pseudo="x-slider-thumb"></div>' +
+    </div>
+  `;
+</script>
+```
+
+{% Aside %}
+What's really neat about custom pseudo elements? You can style them with outside CSS
+but can't access them via outside JS. The shadow boundary is preserved for JS
+but loosened for custom pseudo element definitions.
+{% endAside %}
+
+### Using CSS Variables
+
+A powerful way to create theming hooks will be through [CSS Variables](https://drafts.csswg.org/css-variables/). Essentially, creating "style placeholders" for other users to fill in.
+
+Imagine a custom element author who marks out variable placeholders in their Shadow DOM. One for styling an internal button's font and another for its color:
+
+```css
+button {
+  color: var(--button-text-color, pink); /* default color will be pink */
+  font-family: var(--button-font);
+}
+```
+
+Then, the embedder of the element defines those values to their liking. Perhaps
+to match the super cool Comic Sans theme of their own page:
+
+```css
+#host {
+  --button-text-color: green;
+  --button-font: "Comic Sans MS", "Comic Sans", cursive;
+}
+```
+
+Due to the way CSS Variables inherit, everything is peachy and this
+works beautifully! The whole picture looks like this:
+
+```html
+<style>
+  #host {
+    --button-text-color: green;
+    --button-font: "Comic Sans MS", "Comic Sans", cursive;
+  }
+</style>
+<div id="host">Host node</div>
+<script>
+  var root = document.querySelector('#host').createShadowRoot();
+  root.innerHTML = `
+    <style>
+      button {
+        color: var(--button-text-color, pink);
+        font-family: var(--button-font);
+      }
+    </style>
+    <content></content>
+  `;
+</script>
+```
+
+{% Aside %}
+I've already mentioned [Custom Elements](/customelements/) a few times in this article. For now, just know that Shadow DOM forms their structural foundation
+by providing styling and DOM encapsulation. The concepts here pertain to styling Custom Elements.
+{% endAside %}
+
+## Resetting styles
+
+Inheritable styles like fonts, colors, and line-heights continue to affect elements
+in the Shadow DOM. However for maximum flexibility, Shadow DOM gives us the
+`resetStyleInheritance` property to control what happens at the shadow boundary.
+Think of it as a way to start fresh when creating a new component.
+
+**resetStyleInheritance**
+
+- `false` - Default. [inheritable CSS properties](http://www.impressivewebs.com/inherit-value-css/) continue to inherit.
+- `true` - resets inheritable properties to `initial` at the boundary.
+
+Below is a demo that shows how the shadow tree is affected by changing `resetStyleInheritance`:
+
+```html
+<div>
+  <h3>Light DOM</h3>
+</div>
+
+<script>
+  var root = document.querySelector('div').createShadowRoot();
+  root.resetStyleInheritance = <span id="code-resetStyleInheritance">false</span>;
+  root.innerHTML = `
+    <style>
+      h3 {
+        color: red;
+      }
+    </style>
+    <h3>Shadow DOM</h3>
+    <content select="h3"></content>
+  `;
+</script>
+
+<div class="demoarea" style="width:225px;">
+  <div id="style-ex-inheritance"><h3 class="border">Light DOM</div>
+</div>
+<div id="inherit-buttons">
+  <button id="demo-resetStyleInheritance">resetStyleInheritance=false</button>
+</div>
+
+<script>
+  var container = document.querySelector('#style-ex-inheritance');
+  var root = container.createShadowRoot();
+  //root.resetStyleInheritance = false;
+  root.innerHTML = '<style>h3{ color: red; }</style><h3>Shadow DOM<content select="h3"></content>';
+
+  document.querySelector('#demo-resetStyleInheritance').addEventListener('click', function(e) {
+    root.resetStyleInheritance = !root.resetStyleInheritance;
+    e.target.textContent = 'resetStyleInheritance=' + root.resetStyleInheritance;
+    document.querySelector('#code-resetStyleInheritance').textContent = root.resetStyleInheritance;
+  });
+</script>
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NTs5gz9uTwQbYFtud5Ef.gif", alt="DevTools inherited properties", width="255", height="243" %}
+</figure>
+
+Understanding `.resetStyleInheritance` is a bit trickier, primarily because it
+only has an affect on CSS properties which are inheritable. It says: when
+you're looking for a property to inherit, at the boundary between the page and
+the ShadowRoot, don't inherit values from the host but use the `initial`
+value instead (per the CSS spec).
+
+If you're unsure about which properties inherit in CSS, check out [this handy list](http://www.impressivewebs.com/inherit-value-css/) or toggle the "Show inherited" checkbox in the Element panel.
+
+
+## Styling distributed nodes
+
+Distributed nodes are elements that render at an [insertion point](/shadowdom-301/#elementgetdistributednodes) (a `<content>` element). The `<content>` element allows you to select nodes from the Light DOM and render them at predefined locations in your Shadow DOM. They're not logically in the Shadow DOM; they're still children of the host element. Insertion points are just a rendering thing.
+
+Distributed nodes retain styles from the main document. That is, style rules
+from the main page continue to apply to the elements, even when they render at an insertion point.
+Again, distributed nodes are still logically in the light dom and don't move. They just render
+elsewhere. However, when the nodes get distributed into the Shadow DOM, they can take on additional styles
+defined inside the shadow tree.
+
+### ::content pseudo element
+
+Distributed nodes are children of the host element, so how can we target
+them from *within* the Shadow DOM? The answer is the CSS `::content` pseudo element.
+It's a way to target Light DOM nodes that pass through an insertion point. For example:
+
+`::content > h3` styles any `h3` tags that pass through an insertion point.
+
+Let's see an example:
+
+```html
+<div>
+  <h3>Light DOM</h3>
+  <section>
+    <div>I'm not underlined</div>
+    <p>I'm underlined in Shadow DOM!</p>
+  </section>
+</div>
+
+<script>
+var div = document.querySelector('div');
+var root = div.createShadowRoot();
+root.innerHTML = `
+  <style>
+    h3 { color: red; }
+      content[select="h3"]::content > h3 {
+      color: green;
+    }
+    ::content section p {
+      text-decoration: underline;
+    }
+  </style>
+  <h3>Shadow DOM</h3>
+  <content select="h3"></content>
+  <content select="section"></content>
+`;
+</script>
+```
+
+### Resetting styles at insertion points
+
+When creating a ShadowRoot, you have the option of resetting the inherited styles.
+`<content>` and `<shadow>` insertion points also have this option. When using
+these elements, either set the `.resetStyleInheritance` in JS or use the boolean
+`reset-style-inheritance` attribute on the element itself.
+
+- For a ShadowRoot or `<shadow>` insertion points: `reset-style-inheritance`
+means inheritable CSS properties are set to `initial` at the host, before they
+hit your shadow content. **This location is known as the upper boundary**.
+
+- For `<content>` insertion points: `reset-style-inheritance` means inheritable
+CSS properties are set to `initial` before the host's children are distributed
+at the insertion point. **This location is known as the lower boundary**.
+
+{% Aside %}
+Remember: styles defined in the host document continue to apply to nodes they target,
+even when those nodes get distributed "inside" the Shadow DOM. Going into an
+insertion point doesn't change what's applied.
+{% endAside %}
+
+## Conclusion
+
+As authors of custom elements, we have a ton of options for controlling
+the look and feel of our content. Shadow DOM forms the basis for this brave new world.
+
+Shadow DOM gives us scoped style encapsulation and a means to let in as much (or as little)
+of the outside world as we choose. By defining custom pseudo elements or including
+CSS Variable placeholders, authors can provide third-parties convenient styling hooks
+to further customize their content. All in all, web authors are in full control
+of how their content is represented.
diff --git a/src/site/content/en/blog/shadowdom-301/index.md b/src/site/content/en/blog/shadowdom-301/index.md
new file mode 100644
index 00000000000..ae946aa7325
--- /dev/null
+++ b/src/site/content/en/blog/shadowdom-301/index.md
@@ -0,0 +1,347 @@
+---
+layout: post
+title: Shadow DOM 301
+subhead: Advanced concepts & DOM APIs
+authors:
+  - ericbidelman
+date: 2013-03-21
+updated: 2016-10-03
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+This article describes an old version of Shadow DOM (v0). If you're interested in using Shadow DOM, check out our new article, "[Shadow DOM v1: self-contained web components](/shadowdom-v1/)". It covers everything in the newer Shadow DOM v1 spec shipped in Chrome 53, Safari 10, and Firefox 63.
+{% endAside %}
+
+This article discusses more of the amazing things you can do with Shadow DOM! It builds on the concepts discussed in [Shadow DOM 101](/shadowdom/)
+and [Shadow DOM 201](/shadowdom-201/).
+
+{% Aside %}
+In Chrome, turn on the "Enable experimental Web Platform features" in about:flags to experiment with everything covered in this article.
+{% endAside %}
+
+## Using multiple shadow roots
+
+If you're hosting a party, it gets stuffy if everyone is crammed into the same room.
+You want the option of distributing groups of people across multiple rooms. Elements hosting
+Shadow DOM can do this too, that is to say, they can host more than one shadow
+root at a time.
+
+Let's see what happens if we try to attach multiple shadow roots to a host:
+
+```html
+<div id="example1">Light DOM</div>
+<script>
+  var container = document.querySelector('#example1');
+  var root1 = container.createShadowRoot();
+  var root2 = container.createShadowRoot();
+  root1.innerHTML = '<div>Root 1 FTW</div>';
+  root2.innerHTML = '<div>Root 2 FTW</div>';
+</script>
+```
+
+{% Aside %}
+In the DevTools, turn on "Show Shadow DOM" to be
+  able to inspect ShadowRoots.
+{% endAside %}
+
+What renders is "Root 2 FTW", despite the fact that we had already attached a shadow tree.
+This is because the last shadow tree added to a host, wins. It's a LIFO stack as
+far as rendering is concerned. Examining the DevTools verifies this behavior.
+
+{% Aside %}
+Shadow trees added to a host are stacked in the order they're added,
+starting with the most recent first. The last one added is the one that renders.
+{% endAside %}
+
+{% Aside %}
+The most recently added tree is called the **younger tree**. Previous trees are called **older trees**. In this example, `root2` is the younger tree and  `root1` is the older tree.
+{% endAside %}
+
+So what's the point of using multiple shadows if only the last is invited to the
+rendering party? Enter shadow insertion points.
+
+### Shadow Insertion Points
+
+"Shadow insertion points" (`<shadow>`) are similar to normal [insertion points](/shadowdom/#step-2-separate-content-from-presentation) (`<content>`) in that they're placeholders. However, instead of being placeholders for a host's *content*, they're hosts for other *shadow trees*.
+It's Shadow DOM Inception!
+
+As you can probably imagine, things get more complicated the further you drill down
+the rabbit hole. For this reason, the spec is very clear about what happens when
+multiple `<shadow>` elements are in play:
+
+{% Aside %}
+If multiple `<shadow>` insertion points exist
+in a shadow tree, only the first is recognized. The rest are ignored.
+{% endAside %}
+
+Looking back to our original example, the first shadow `root1` got left off the
+invite list. Adding a `<shadow>` insertion point brings it back:
+
+```html
+<div id="example2">Light DOM</div>
+<script>
+var container = document.querySelector('#example2');
+var root1 = container.createShadowRoot();
+var root2 = container.createShadowRoot();
+root1.innerHTML = '<div>Root 1 FTW</div><content></content>';
+**root2.innerHTML = '<div>Root 2 FTW</div><shadow></shadow>';**
+</script>
+```
+
+There are a couple of interesting things about this example:
+
+1. "Root 2 FTW" still renders above "Root 1 FTW". This is because of where we've placed
+the `<shadow>` insertion point. If you want the reverse, move the insertion point: `root2.innerHTML = '<shadow></shadow><div>Root 2 FTW</div>';`.
+- Notice there's now a `<content>` insertion point in root1. This makes
+the text node "Light DOM" come along for the rendering ride.
+
+**What's rendered at `<shadow>`?**
+
+Sometimes it's useful to know the older shadow tree being rendered at a `<shadow>`. You can get a reference to that tree through `.olderShadowRoot`:
+
+```js
+**root2.olderShadowRoot** === root1 //true
+```
+
+## Obtaining a host's shadow root
+
+If an element is hosting Shadow DOM you can access its [youngest shadow root](#using-multiple-shadow-roots)
+using `.shadowRoot`:
+
+```js
+var root = host.createShadowRoot();
+console.log(host.shadowRoot === root); // true
+console.log(document.body.shadowRoot); // null
+```
+
+If you're worried about people crossing into your shadows, redefine
+ `.shadowRoot` to be null:
+
+```js
+Object.defineProperty(host, 'shadowRoot', {
+  get: function() { return null; },
+  set: function(value) { }
+});
+```
+
+A bit of a hack, but it works. In the end, it's important to remember that while amazingly fantastic,
+**Shadow DOM has not been designed to be a security feature**. Don't rely on it for
+complete content isolation.
+
+## Building Shadow DOM in JS
+
+If you prefer building DOM in JS, `HTMLContentElement` and `HTMLShadowElement`
+have interfaces for that.
+
+```html
+<div id="example3">
+  <span>Light DOM</span>
+</div>
+<script>
+var container = document.querySelector('#example3');
+var root1 = container.createShadowRoot();
+var root2 = container.createShadowRoot();
+
+var div = document.createElement('div');
+div.textContent = 'Root 1 FTW';
+root1.appendChild(div);
+
+ // HTMLContentElement
+var content = document.createElement('content');
+content.select = 'span'; // selects any spans the host node contains
+root1.appendChild(content);
+
+var div = document.createElement('div');
+div.textContent = 'Root 2 FTW';
+root2.appendChild(div);
+
+// HTMLShadowElement
+var shadow = document.createElement('shadow');
+root2.appendChild(shadow);
+</script>
+```
+
+This example is nearly identical to the one in the [previous section](#shadow-insertion-points).
+The only difference is that now I'm using `select` to pull out the newly added `<span>`.
+
+## Working with insertion points
+
+Nodes that are selected out of the host element and "distribute" into the shadow tree
+are called…drumroll…distributed nodes! They're allowed to cross the shadow boundary
+when insertion points invite them in.
+
+What's conceptually bizarre about insertion points is that they don't physically
+move DOM. The host's nodes stay intact. Insertion points merely re-project nodes
+from the host into the shadow tree. It's a presentation/rendering thing: ~~"Move these nodes over here"~~ "Render these nodes at this location."
+
+{% Aside %}
+You cannot traverse the DOM into a `<content>`.
+{% endAside %}
+
+For example:
+
+```html
+<div><h2>Light DOM</h2></div>
+<script>
+var root = document.querySelector('div').createShadowRoot();
+root.innerHTML = '<content select="h2"></content>';
+
+var h2 = document.querySelector('h2');
+console.log(root.querySelector('content[select="h2"] h2')); // null;
+console.log(root.querySelector('content').contains(h2)); // false
+</script>
+```
+
+Voilà! The `h2` isn't a child of the shadow DOM. This leads to another tid bit:
+
+{% Aside %}
+Insertion points are incredibly powerful. Think of them as a way to create a
+"declarative API" for your Shadow DOM. A host element can include all the markup in the world,
+but unless I invite it into my Shadow DOM with an insertion point, it's meaningless.
+{% endAside %}
+
+### Element.getDistributedNodes()
+
+We can't traverse into a `<content>`, but the `.getDistributedNodes()` API
+allows us to query the distributed nodes at an insertion point:
+
+```html
+<div id="example4">
+  <h2>Eric</h2>
+  <h2>Bidelman</h2>
+  <div>Digital Jedi</div>
+  <h4>footer text</h4>
+</div>
+
+<template id="sdom">
+  <header>
+    <content select="h2"></content>
+  </header>
+  <section>
+    <content select="div"></content>
+  </section>
+  <footer>
+    <content select="h4:first-of-type"></content>
+  </footer>
+</template>
+
+<script>
+var container = document.querySelector('#example4');
+
+var root = container.createShadowRoot();
+
+var t = document.querySelector('#sdom');
+var clone = document.importNode(t.content, true);
+root.appendChild(clone);
+
+var html = [];
+[].forEach.call(root.querySelectorAll('content'), function(el) {
+  html.push(el.outerHTML + ': ');
+  var nodes = el.getDistributedNodes();
+  [].forEach.call(nodes, function(node) {
+    html.push(node.outerHTML);
+  });
+  html.push('\n');
+});
+</script>
+```
+
+### Element.getDestinationInsertionPoints()
+
+Similar to `.getDistributedNodes()`, you can check what insertion points
+a node is distributed into by calling its `.getDestinationInsertionPoints()`:
+
+```html
+<div id="host">
+  <h2>Light DOM
+</div>
+
+<script>
+  var container = document.querySelector('div');
+
+  var root1 = container.createShadowRoot();
+  var root2 = container.createShadowRoot();
+  root1.innerHTML = '<content select="h2"></content>';
+  root2.innerHTML = '<shadow></shadow>';
+
+  var h2 = document.querySelector('#host h2');
+  var insertionPoints = h2.getDestinationInsertionPoints();
+  [].forEach.call(insertionPoints, function(contentEl) {
+    console.log(contentEl);
+  });
+</script>
+```
+
+## Tool: Shadow DOM Visualizer
+
+Understanding the black magic that is Shadow DOM is difficult. I remember trying
+to wrap my head around it for the first time.
+
+To help visualize how Shadow DOM rendering works, I've built a tool
+using [d3.js](http://d3js.org/). Both markup boxes on the left-hand side are
+editable. Feel free to paste in your own markup and play around to see how things
+work and insertion points swizzle host nodes into the shadow tree.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vby0ZDehF9RhL3Ouuupk.png", alt="Shadow DOM Visualizer", width="500", height="207" %}
+<figcaption><a href="http://html5-demos.appspot.com/static/shadowdom-visualizer/index.html">Launch Shadow DOM Visualizer</a></figcaption>
+</figure>
+
+Give it a try and let me know what you think!
+
+## Event Model
+
+Some events cross the shadow boundary and some do not. In the cases where events
+cross the boundary, the event target is adjusted in order to maintain the
+encapsulation that the shadow root's upper boundary provides. That is, **events
+are retargeted to look like they've come from the host element rather than internal
+elements to the Shadow DOM**.
+
+{% Aside %}
+Access `event.path` to see the adjusted event path.
+{% endAside %}
+
+**Play Action 1**
+
+- This one is interesting. You should see a `mouseout` from the host element (`<div data-host>`)
+to the blue node. Even though it's a distributed
+node, it's still in the host, not the ShadowDOM. Mousing further down into
+yellow again causes a `mouseout` on the blue node.
+
+**Play Action 2**
+
+- There is one `mouseout` that appears on host (at the very end). Normally you'd
+see `mouseout` events trigger for all of the yellow blocks.
+However, in this case these elements are internal to the Shadow DOM and the event
+doesn't bubble through its upper boundary.
+
+**Play Action 3**
+
+- Notice that when you click the input, the `focusin` doesn't appear on the
+input but on the host node itself. It's been retargeted!
+
+### Events that are always stopped
+
+The following events never cross the shadow boundary:
+
+- abort
+- error
+- select
+- change
+- load
+- reset
+- resize
+- scroll
+- selectstart
+
+## Conclusion
+
+I hope you'll agree that **Shadow DOM is incredibly powerful**. For the first time ever, we have proper encapsulation without the extra baggage of `<iframe>`s or other older techniques.
+
+Shadow DOM is certainly complex beast, but it's a beast worth adding to the web platform.
+Spend some time with it. Learn it. Ask questions.
+
+If you want to learn more, see Dominic's intro article [Shadow DOM 101](/shadowdom/)
+and my [Shadow DOM 201: CSS &amp; Styling](/shadowdom-201/) article.
diff --git a/src/site/content/en/blog/shadowdom-v1/index.md b/src/site/content/en/blog/shadowdom-v1/index.md
new file mode 100644
index 00000000000..b1aef8e45a1
--- /dev/null
+++ b/src/site/content/en/blog/shadowdom-v1/index.md
@@ -0,0 +1,1261 @@
+---
+layout: post
+title: Shadow DOM v1 - Self-Contained Web Components
+subhead:
+  Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components
+authors:
+  - ericbidelman
+date: 2016-08-01
+updated: 2020-06-27
+description: |
+  Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+---
+
+## Summary
+
+Shadow DOM removes the brittleness of building web apps. The brittleness
+comes from the global nature of HTML, CSS, and JS. Over the years we've
+invented an exorbitant [number](http://getbem.com/introduction/)
+[of](https://github.com/css-modules/css-modules)
+[tools](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)
+to circumvent the issues. For example, when you use a new HTML id/class,
+there's no telling if it will conflict with an existing name used by the page.
+[Subtle bugs](http://www.2ality.com/2012/08/ids-are-global.html) creep up,
+CSS specificity becomes a huge issue (`!important` all the things!), style
+selectors grow out of control, and
+[performance can suffer](https://developer.chrome.com/blog/css-containment). The list
+goes on.
+
+**Shadow DOM fixes CSS and DOM**. It introduces **scoped styles** to the web
+platform. Without tools or naming conventions, you can **bundle CSS with
+markup**, hide implementation details, and **author self-contained
+components** in vanilla JavaScript.
+
+## Introduction
+
+Note: **Already familiar with Shadow DOM?** This article describes the new [Shadow DOM v1 spec](http://w3c.github.io/webcomponents/spec/shadow/). If you've been using Shadow DOM, chances are you're
+familiar with the [v0 version that shipped in Chrome 35](https://www.chromestatus.com/features/4507242028072960), and the webcomponents.js polyfills.
+The concepts are the same, but the v1 spec has important API differences. It's
+also the version that all major browsers have agreed to implement, with
+implementations already in Safari, Chrome and Firefox. Keep reading
+to see what's new or check out the section on [History and browser support](#historysupport) for more info.
+
+Shadow DOM is one of the three Web Component standards:
+[HTML Templates](https://www.html5rocks.com/en/tutorials/webcomponents/template/),
+[Shadow DOM][sd_spec_whatwg] and
+[Custom elements](/custom-elements-v1/).
+[HTML Imports](https://www.html5rocks.com/en/tutorials/webcomponents/imports/)
+used to be part of the list but now are considered
+[deprecated](https://developer.chrome.com/blog/chrome-70-deps-rems/#deprecate-html-imports).
+
+You don't have to author web components that use shadow DOM. But when you do,
+you take advantage of its benefits (CSS scoping, DOM encapsulation,
+composition) and build reusable
+[custom elements](/custom-elements-v1/),
+which are resilient, highly configurable, and extremely reusable. If custom
+elements are the way to create a new HTML (with a JS API), shadow DOM is the
+way you provide its HTML and CSS. The two APIs combine to make a component
+with self-contained HTML, CSS, and JavaScript.
+
+Shadow DOM is designed as a tool for building component-based apps. Therefore,
+it brings solutions for common problems in web development:
+
+- **Isolated DOM**: A component's DOM is self-contained (e.g.
+  `document.querySelector()` won't return nodes in the component's shadow DOM).
+- **Scoped CSS**: CSS defined inside shadow DOM is scoped to it. Style rules
+  don't leak out and page styles don't bleed in.
+- **Composition**: Design a declarative, markup-based API for your component.
+- **Simplifies CSS** - Scoped DOM means you can use simple CSS selectors, more
+  generic id/class names, and not worry about naming conflicts.
+- **Productivity** - Think of apps in chunks of DOM rather than one large
+  (global) page.
+
+{% Aside %}
+Although you can use the shadow DOM API and its benefits outside of web
+components, I'm only going to focus on examples that build on custom elements.
+I'll be using the custom elements v1 API in all examples.
+{% endAside %}
+
+### `fancy-tabs` demo
+
+Throughout this article, I'll be referring to a demo component (`<fancy-tabs>`)
+and referencing code snippets from it. If your browser supports the APIs, you
+should see a live demo of it just below. Otherwise, check out the [full source on Github](https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b).
+
+<figure class="demoarea">
+  <iframe
+    style="height:360px;width:100%;border:none"
+    src="https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html">
+  </iframe>
+  <figcaption>
+    <a href="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" target="_blank">
+      View source on Github
+    </a>
+  </figcaption>
+</figure>
+
+## What is shadow DOM?
+
+### Background on DOM
+
+HTML powers the web because it's easy to work with. By declaring a few tags, you
+can author a page in seconds that has both presentation and structure. However,
+by itself HTML isn't all that useful. It's easy for humans to understand a text-
+based language, but machines need something more. Enter the Document Object
+Model, or DOM.
+
+When the browser loads a web page it does a bunch of interesting stuff. One of
+the things it does is transform the author's HTML into a live document.
+Basically, to understand the page's structure, the browser parses HTML (static
+strings of text) into a data model (objects/nodes). The browser preserves the
+HTML's hierarchy by creating a tree of these nodes: the DOM. The cool thing
+about DOM is that it's a live representation of your page. Unlike the static
+HTML we author, the browser-produced nodes contain properties, methods, and best
+of all… can be manipulated by programs! That's why we're able to create DOM
+elements directly using JavaScript:
+
+
+```js
+const header = document.createElement('header');
+const h1 = document.createElement('h1');
+h1.textContent = 'Hello DOM';
+header.appendChild(h1);
+document.body.appendChild(header);
+```
+
+produces the following HTML markup:
+
+
+```html
+<body>
+    <header>
+    <h1>Hello DOM</h1>
+    </header>
+</body>
+```
+
+All that is well and good. Then
+[what the heck is _shadow DOM_](https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)?
+
+#### DOM… in the shadows
+
+Shadow DOM is just normal DOM with two differences: 1) how it's created/used and
+2) how it behaves in relation to the rest of the page. Normally, you create DOM
+nodes and append them as children of another element. With shadow DOM, you
+create a scoped DOM tree that's attached to the element, but separate from its
+actual children. This scoped subtree is called a **shadow tree**. The element
+it's attached to is its **shadow host**. Anything you add in the shadows becomes
+local to the hosting element, including `<style>`. This is how shadow DOM
+achieves CSS style scoping.
+
+## Creating shadow DOM
+
+A **shadow root** is a document fragment that gets attached to a “host” element.
+The act of attaching a shadow root is how the element gains its shadow DOM. To
+create shadow DOM for an element, call `element.attachShadow()`:
+
+
+```js
+const header = document.createElement('header');
+const shadowRoot = header.attachShadow({mode: 'open'});
+shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
+
+// header.shadowRoot === shadowRoot
+// shadowRoot.host === header
+```
+
+I'm using `.innerHTML` to fill the shadow root, but you could also use other DOM
+APIs. This is the web. We have choice.
+
+The spec [defines a list of elements](https://dom.spec.whatwg.org/#dom-element-attachshadow)
+that can't host a shadow tree. There are several reasons an element might be
+on the list:
+
+- The browser already hosts its own internal shadow DOM for the element
+  (`<textarea>`, `<input>`).
+- It doesn't make sense for the element to host a shadow DOM (`<img>`).
+
+For example, this doesn't work:
+
+```js
+    document.createElement('input').attachShadow({mode: 'open'});
+    // Error. `<input>` cannot host shadow dom.
+```
+
+### Creating shadow DOM for a custom element
+
+Shadow DOM is particularly useful when creating
+[custom elements](/custom-elements-v1/).
+Use shadow DOM to compartmentalize an element's HTML, CSS, and JS, thus
+producing a "web component".
+
+**Example** - a custom element **attaches shadow DOM to itself**,
+encapsulating its DOM/CSS:
+
+```js
+// Use custom elements API v1 to register a new HTML tag and define its JS behavior
+// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
+customElements.define('fancy-tabs', class extends HTMLElement {
+    constructor() {
+    super(); // always call super() first in the constructor.
+
+    // Attach a shadow root to <fancy-tabs>.
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = `
+        <style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
+        <div id="tabs">...</div>
+        <div id="panels">...</div>
+    `;
+    }
+    ...
+});
+```
+
+There are a couple of interesting things going on here. The first is that the
+custom element **creates its own shadow DOM** when an instance of `<fancy-tabs>`
+is created. That's done in the `constructor()`. Secondly, because we're creating
+a shadow root, the CSS rules inside the `<style>` will be scoped to `<fancy-tabs>`.
+
+Note: When you try to run this example, you'll probably notice that nothing
+renders. The user's markup seemingly disappears! That's because the **element's
+shadow DOM is rendered in place of its children**. If you want to display the
+children, you need to tell the browser where to render them by placing a
+[`<slot>` element](#slots) in your shadow DOM. More on that
+[later](#composition_slot).
+
+
+## Composition and slots
+
+Composition is one of the least understood features of shadow DOM, but it's
+arguably the most important.
+
+In our world of web development, composition is how we construct apps,
+declaratively out of HTML. Different building blocks (`<div>`s, `<header>`s,
+`<form>`s, `<input>`s) come together to form apps. Some of these tags even work
+with each other. Composition is why native elements like `<select>`,
+`<details>`, `<form>`, and `<video>` are so flexible. Each of those tags accepts
+certain HTML as children and does something special with them. For example,
+`<select>` knows how to render `<option>` and `<optgroup>` into dropdown and
+multi-select widgets. The `<details>` element renders `<summary>` as a
+expandable arrow. Even `<video>` knows how to deal with certain children:
+`<source>` elements don't get rendered, but they do affect the video's behavior.
+What magic!
+
+### Terminology: light DOM vs. shadow DOM
+
+Shadow DOM composition introduces a bunch of new fundamentals in web
+development. Before getting into the weeds, let's standardize on some
+terminology so we're speaking the same lingo.
+
+**Light DOM**
+
+The markup a user of your component writes. This DOM lives outside the
+component's shadow DOM. It is the element's actual children.
+
+```html
+<better-button>
+    <!-- the image and span are better-button's light DOM -->
+    <img src="gear.svg" slot="icon">
+    <span>Settings</span>
+</better-button>
+```
+
+**Shadow DOM**
+
+The DOM a component author writes. Shadow DOM is local to the component and
+defines its internal structure, scoped CSS, and encapsulates your implementation
+details. It can also define how to render markup that's authored by the consumer
+of your component.
+
+```html
+#shadow-root
+    <style>...</style>
+    <slot name="icon"></slot>
+    <span id="wrapper">
+    <slot>Button</slot>
+    </span>
+```
+
+**Flattened DOM tree**
+
+The result of the browser distributing the user's light DOM into your shadow
+DOM, rendering the final product. The flattened tree is what you ultimately see
+in the DevTools and what's rendered on the page.
+
+
+```html
+<better-button>
+    #shadow-root
+    <style>...</style>
+    <slot name="icon">
+        <img src="gear.svg" slot="icon">
+    </slot>
+    <span id="wrapper">
+        <slot>
+        <span>Settings</span>
+        </slot>
+    </span>
+</better-button>
+```
+
+### The &lt;slot&gt; element {: #slots}
+
+Shadow DOM composes different DOM trees together using the `<slot>` element.
+**Slots are placeholders inside your component that users _can_ fill with their
+own markup**. By defining one or more slots, you invite outside markup to render
+in your component's shadow DOM. Essentially, you're saying _"Render the user's
+markup over here"_.
+
+Note: Slots are a way of creating a "declarative API" for a web component. They
+mix-in the user's DOM to help render the overall component, thus, **composing
+different DOM trees together**.
+
+
+Elements are allowed to "cross" the shadow DOM boundary when a `<slot>` invites
+them in. These elements are called **distributed nodes**. Conceptually,
+distributed nodes can seem a bit bizarre. Slots don't physically move DOM; they
+render it at another location inside the shadow DOM.
+
+A component can define zero or more slots in its shadow DOM. Slots can be empty
+or provide fallback content. If the user doesn't provide [light DOM](#lightdom)
+content, the slot renders its fallback content.
+
+
+```html
+<!-- Default slot. If there's more than one default slot, the first is used. -->
+<slot></slot>
+
+<slot>fallback content</slot> <!-- default slot with fallback content -->
+
+<slot> <!-- default slot entire DOM tree as fallback -->
+    <h2>Title</h2>
+    <summary>Description text</summary>
+</slot>
+```
+
+
+You can also create **named slots**. Named slots are specific holes in your
+shadow DOM that users reference by name.
+
+**Example** - the slots in `<fancy-tabs>`'s shadow DOM:
+
+
+```html
+#shadow-root
+    <div id="tabs">
+    <slot id="tabsSlot" name="title"></slot> <!-- named slot -->
+    </div>
+    <div id="panels">
+    <slot id="panelsSlot"></slot>
+    </div>
+```
+
+
+Component users declare `<fancy-tabs>` like so:
+
+
+```html
+<fancy-tabs>
+    <button slot="title">Title</button>
+    <button slot="title" selected>Title 2</button>
+    <button slot="title">Title 3</button>
+    <section>content panel 1</section>
+    <section>content panel 2</section>
+    <section>content panel 3</section>
+</fancy-tabs>
+
+<!-- Using <h2>'s and changing the ordering would also work! -->
+<fancy-tabs>
+    <h2 slot="title">Title</h2>
+    <section>content panel 1</section>
+    <h2 slot="title" selected>Title 2</h2>
+    <section>content panel 2</section>
+    <h2 slot="title">Title 3</h2>
+    <section>content panel 3</section>
+</fancy-tabs>
+```
+
+
+And if you're wondering, the flattened tree looks something like this:
+
+
+```html
+<fancy-tabs>
+    #shadow-root
+    <div id="tabs">
+        <slot id="tabsSlot" name="title">
+        <button slot="title">Title</button>
+        <button slot="title" selected>Title 2</button>
+        <button slot="title">Title 3</button>
+        </slot>
+    </div>
+    <div id="panels">
+        <slot id="panelsSlot">
+        <section>content panel 1</section>
+        <section>content panel 2</section>
+        <section>content panel 3</section>
+        </slot>
+    </div>
+</fancy-tabs>
+```
+
+Notice our component is able to handle different configurations, but the
+flattened DOM tree remains the same. We can also switch from `<button>` to
+`<h2>`. This component was authored to handle different types of children… just
+like `<select>` does!
+
+## Styling
+
+There are many options for styling web components. A component that uses shadow
+DOM can be styled by the main page, define its own styles, or provide hooks (in
+the form of [CSS custom properties][css_props]) for users to override defaults.
+
+### Component-defined styles
+
+Hands down the most useful feature of shadow DOM is **scoped CSS**:
+
+- CSS selectors from the outer page don't apply inside your component.
+- Styles defined inside don't bleed out. They're scoped to the host element.
+
+**CSS selectors used inside shadow DOM apply locally to your component**.  In
+practice, this means we can use common id/class names again, without worrying
+about conflicts elsewhere on the page. Simpler CSS selectors are a best practice
+inside Shadow DOM. They're also good for performance.
+
+**Example** - styles defined in a shadow root are local
+
+
+```html
+#shadow-root
+    <style>
+    #panels {
+        box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+        background: white;
+        ...
+    }
+    #tabs {
+        display: inline-flex;
+        ...
+    }
+    </style>
+    <div id="tabs">
+    ...
+    </div>
+    <div id="panels">
+    ...
+    </div>
+```
+
+Stylesheets are also scoped to the shadow tree:
+
+
+```html
+#shadow-root
+    <link rel="stylesheet" href="styles.css">
+    <div id="tabs">
+    ...
+    </div>
+    <div id="panels">
+    ...
+    </div>
+```
+
+
+Ever wonder how the `<select>` element renders a multi-select widget (instead of
+a dropdown) when you add the `multiple` attribute:
+
+```html
+<select multiple>
+  <option>Do</option>
+  <option selected>Re</option>
+  <option>Mi</option>
+  <option>Fa</option>
+  <option>So</option>
+</select>
+```
+
+`<select>` is able to style _itself_ differently based on the attributes you
+declare on it. Web components can style themselves too, by using the `:host`
+selector.
+
+**Example** - a component styling itself
+
+```html
+<style>
+:host {
+    display: block; /* by default, custom elements are display: inline */
+    contain: content; /* CSS containment FTW. */
+}
+</style>
+```
+
+One gotcha with `:host` is that rules in the parent page have higher specificity
+than `:host` rules defined in the element. That is, outside styles win. This
+allows users to override your top-level styling from the outside. Also, `:host`
+only works in the context of a shadow root, so you can't use it outside of
+shadow DOM.
+
+The functional form of `:host(<selector>)` allows you to target the host if it
+matches a `<selector>`. This is a great way for your component to encapsulate
+behaviors that react to user interaction or state or style internal nodes based
+on the host.
+
+
+```html
+<style>
+:host {
+    opacity: 0.4;
+    will-change: opacity;
+    transition: opacity 300ms ease-in-out;
+}
+:host(:hover) {
+    opacity: 1;
+}
+:host([disabled]) { /* style when host has disabled attribute. */
+    background: grey;
+    pointer-events: none;
+    opacity: 0.4;
+}
+:host(.blue) {
+    color: blue; /* color host when it has class="blue" */
+}
+:host(.pink) > #tabs {
+    color: pink; /* color internal #tabs node when host has class="pink". */
+}
+</style>
+```
+
+### Styling based on context
+
+`:host-context(<selector>)` matches the component if it or any of its ancestors
+matches `<selector>`. A common use for this is theming based on a component's
+surroundings. For example, many people do theming by applying a class to
+`<html>` or `<body>`:
+
+
+```html
+<body class="darktheme">
+    <fancy-tabs>
+    ...
+    </fancy-tabs>
+</body>
+```
+
+`:host-context(.darktheme)` would style `<fancy-tabs>` when it's a descendant
+of `.darktheme`:
+
+
+```css
+:host-context(.darktheme) {
+    color: white;
+    background: black;
+}
+```
+
+
+`:host-context()` can be useful for theming, but an even better approach is to
+[create style hooks using CSS custom properties](#stylehooks).
+
+### Styling distributed nodes
+
+`::slotted(<compound-selector>)` matches nodes that are distributed into a
+`<slot>`.
+
+Let's say we've created a name badge component:
+
+
+```html
+<name-badge>
+    <h2>Eric Bidelman</h2>
+    <span class="title">
+    Digital Jedi, <span class="company">Google</span>
+    </span>
+</name-badge>
+```
+
+
+The component's shadow DOM can style the user's `<h2>` and `.title`:
+
+
+```html
+<style>
+::slotted(h2) {
+    margin: 0;
+    font-weight: 300;
+    color: red;
+}
+::slotted(.title) {
+    color: orange;
+}
+/* DOESN'T WORK (can only select top-level nodes).
+::slotted(.company),
+::slotted(.title .company) {
+    text-transform: uppercase;
+}
+*/
+</style>
+<slot></slot>
+```
+
+If you remember from before, `<slot>`s do not move the user's light DOM. When
+nodes are distributed into a `<slot>`, the `<slot>` renders their DOM but the
+nodes physically stay put. **Styles that applied before distribution continue to
+apply after distribution**. However, when the light DOM is distributed, it _can_
+take on additional styles (ones defined by the shadow DOM).
+
+Another, more in-depth example from `<fancy-tabs>`:
+
+
+```js
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.innerHTML = `
+    <style>
+    #panels {
+        box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+        background: white;
+        border-radius: 3px;
+        padding: 16px;
+        height: 250px;
+        overflow: auto;
+    }
+    #tabs {
+        display: inline-flex;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+    #tabsSlot::slotted(*) {
+        font: 400 16px/22px 'Roboto';
+        padding: 16px 8px;
+        ...
+    }
+    #tabsSlot::slotted([aria-selected="true"]) {
+        font-weight: 600;
+        background: white;
+        box-shadow: none;
+    }
+    #panelsSlot::slotted([aria-hidden="true"]) {
+        display: none;
+    }
+    </style>
+    <div id="tabs">
+    <slot id="tabsSlot" name="title"></slot>
+    </div>
+    <div id="panels">
+    <slot id="panelsSlot"></slot>
+    </div>
+`;
+```
+
+In this example, there are two slots: a named slot for the tab titles, and a
+slot for the tab panel content. When the user selects a tab, we bold their selection
+and reveal its panel. That's done by selecting distributed nodes that have the
+`selected` attribute. The custom element's JS (not shown here) adds that
+attribute at the correct time.
+
+### Styling a component from the outside
+
+There are a couple of ways to style a component from the outside. The easiest
+way is to use the tag name as a selector:
+
+
+```css
+fancy-tabs {
+    width: 500px;
+    color: red; /* Note: inheritable CSS properties pierce the shadow DOM boundary. */
+}
+fancy-tabs:hover {
+    box-shadow: 0 3px 3px #ccc;
+}
+```
+
+
+**Outside styles always win over styles defined in shadow DOM**. For example,
+if the user writes the selector `fancy-tabs { width: 500px; }`, it will trump
+the component's rule: `:host { width: 650px;}`.
+
+Styling the component itself will only get you so far. But what happens if you
+want to style the internals of a component? For that, we need CSS custom
+properties.
+
+#### Creating style hooks using CSS custom properties
+
+Users can tweak internal styles if the component's author provides styling hooks
+using [CSS custom properties][css_props]. Conceptually, the idea is similar to
+`<slot>`. You create "style placeholders" for users to override.
+
+**Example** - `<fancy-tabs>` allows users to override the background color:
+
+
+```html
+<!-- main page -->
+<style>
+    fancy-tabs {
+    margin-bottom: 32px;
+    --fancy-tabs-bg: black;
+    }
+</style>
+<fancy-tabs background>...</fancy-tabs>
+```
+
+Inside its shadow DOM:
+
+
+```css
+:host([background]) {
+    background: var(--fancy-tabs-bg, #9E9E9E);
+    border-radius: 10px;
+    padding: 10px;
+}
+```
+
+
+In this case, the component will use `black` as the background value since the
+user provided it. Otherwise, it would default to `#9E9E9E`.
+
+Note: As the component author, you're responsible for letting developers know
+about CSS custom properties they can use. Consider it part of your component's
+public interface. Make sure to document styling hooks!
+
+
+## Advanced topics
+
+### Creating closed shadow roots (should avoid)
+
+There's another flavor of shadow DOM called "closed" mode. When you create a
+closed shadow tree, outside JavaScript won't be able to access the internal DOM
+of your component. This is similar to how native elements like `<video>` work.
+JavaScript cannot access the shadow DOM of `<video>` because the browser
+implements it using a closed-mode shadow root.
+
+**Example** - creating a closed shadow tree:
+
+
+```js
+const div = document.createElement('div');
+const shadowRoot = div.attachShadow({mode: 'closed'}); // close shadow tree
+// div.shadowRoot === null
+// shadowRoot.host === div
+```
+
+Other APIs are also affected by closed-mode:
+
+- `Element.assignedSlot` / `TextNode.assignedSlot` returns `null`
+- `Event.composedPath()` for events associated with elements inside the shadow
+  DOM, returns []
+
+{% Aside %}
+Closed shadow roots are not very useful. Some developers will see closed
+mode as an artificial security feature. But let's be clear, it's **not** a
+security feature. Closed mode simply prevents outside JS from drilling into an
+element's internal DOM.
+{% endAside %}
+
+Here's my summary of why you should never create web components with
+`{mode: 'closed'}`:
+
+1. Artificial sense of security. There's nothing stopping an attacker from
+   hijacking `Element.prototype.attachShadow`.
+
+2. Closed mode **prevents your custom element code from accessing its own
+   shadow DOM**. That's complete fail. Instead, you'll have to stash a reference
+   for later if you want to use things like `querySelector()`. This completely
+   defeats the original purpose of closed mode!
+
+    ```js
+        customElements.define('x-element', class extends HTMLElement {
+        constructor() {
+        super(); // always call super() first in the constructor.
+        this._shadowRoot = this.attachShadow({mode: 'closed'});
+        this._shadowRoot.innerHTML = '<div class="wrapper"></div>';
+        }
+        connectedCallback() {
+        // When creating closed shadow trees, you'll need to stash the shadow root
+        // for later if you want to use it again. Kinda pointless.
+        const wrapper = this._shadowRoot.querySelector('.wrapper');
+        }
+        ...
+    });
+    ```
+
+3. **Closed mode makes your component less flexible for end users**. As you
+   build web components, there will come a time when you forget to add a
+   feature. A configuration option. A use case the user wants. A common
+   example is forgetting to include adequate styling hooks for internal nodes.
+   With closed mode, there's no way for users to override defaults and tweak
+   styles. Being able to access the component's internals is super helpful.
+   Ultimately, users will fork your component, find another, or create their
+   own if it doesn't do what they want :(
+
+### Working with slots in JS
+
+The shadow DOM API provides utilities for working with slots and distributed
+nodes. These come in handy when authoring a custom element.
+
+#### slotchange event
+
+The `slotchange` event fires when a slot's distributed nodes changes. For
+example, if the user adds/removes children from the light DOM.
+
+
+```js
+const slot = this.shadowRoot.querySelector('#slot');
+slot.addEventListener('slotchange', e => {
+    console.log('light dom children changed!');
+});
+```
+
+{% Aside %}
+`slotchange` does not fire when an instance of the component is
+first initialized.
+{% endAside %}
+
+To monitor other types of changes to light DOM, you can setup a
+[`MutationObserver`](https://developer.mozilla.org/docs/Web/API/MutationObserver)
+in your element's constructor.
+
+#### What elements are being rendering in a slot?
+
+Sometimes it's useful to know what elements are associated with a slot. Call
+`slot.assignedNodes()` to find which elements the slot is rendering. The
+`{flatten: true}` option will also return a slot's fallback content (if no nodes
+are being distributed).
+
+As an example, let's say your shadow DOM looks like this:
+
+```html
+<slot><b>fallback content</b></slot>
+```
+
+<table>
+  <thead><th>Usage</th><th>Call</th><th>Result</th></thead>
+  <tr>
+    <td>&lt;my-component&gt;component text&lt;/my-component&gt;</td>
+    <td><code>slot.assignedNodes();</code></td>
+    <td><code>[component text]</code></td>
+  </tr>
+  <tr>
+    <td>&lt;my-component>&lt;/my-component&gt;</td>
+    <td><code>slot.assignedNodes();</code></td>
+    <td><code>[]</code></td>
+  </tr>
+  <tr>
+    <td>&lt;my-component&gt;&lt;/my-component&gt;</td>
+    <td><code>slot.assignedNodes({flatten: true});</code></td>
+    <td><code>[&lt;b&gt;fallback content&lt;/b&gt;]</code></td>
+  </tr>
+</table>
+
+#### What slot is an element assigned to?
+
+Answering the reverse question is also possible. `element.assignedSlot` tells
+you which of the component slots your element is assigned to.
+
+### The Shadow DOM event model
+
+When an event bubbles up from shadow DOM it's target is adjusted to maintain the
+encapsulation that shadow DOM provides. That is, events are re-targeted to look
+like they've come from the component rather than internal elements within your
+shadow DOM. Some events do not even propagate out of shadow DOM.
+
+The events that **do** cross the shadow boundary are:
+
+- Focus Events: `blur`, `focus`, `focusin`, `focusout`
+- Mouse Events: `click`, `dblclick`, `mousedown`, `mouseenter`, `mousemove`, etc.
+- Wheel Events: `wheel`
+- Input Events: `beforeinput`, `input`
+- Keyboard Events: `keydown`, `keyup`
+- Composition Events: `compositionstart`, `compositionupdate`, `compositionend`
+- DragEvent: `dragstart`, `drag`, `dragend`, `drop`, etc.
+
+**Tips**
+
+If the shadow tree is open, calling `event.composedPath()` will return an array
+of nodes that the event traveled through.
+
+#### Using custom events
+
+Custom DOM events which are fired on internal nodes in a shadow tree do not
+bubble out of the shadow boundary unless the event is created using the
+`composed: true` flag:
+
+
+```js
+// Inside <fancy-tab> custom element class definition:
+selectTab() {
+    const tabs = this.shadowRoot.querySelector('#tabs');
+    tabs.dispatchEvent(new Event('tab-select', {bubbles: true, composed: true}));
+}
+```
+
+If `composed: false` (default), consumers won't be able to listen for the event
+outside of your shadow root.
+
+
+```html
+<fancy-tabs></fancy-tabs>
+<script>
+    const tabs = document.querySelector('fancy-tabs');
+    tabs.addEventListener('tab-select', e => {
+    // won't fire if `tab-select` wasn't created with `composed: true`.
+    });
+</script>
+```
+
+
+### Handling focus
+
+If you recall from [shadow DOM's event model](#events), events that are fired
+inside shadow DOM are adjusted to look like they come from the hosting element.
+For example, let's say you click an `<input>` inside a shadow root:
+
+
+```html
+<x-focus>
+    #shadow-root
+    <input type="text" placeholder="Input inside shadow dom">
+```
+
+The `focus` event will look like it came from `<x-focus>`, not the `<input>`.
+Similarly, `document.activeElement` will be `<x-focus>`. If the shadow root
+was created with `mode:'open'` (see [closed mode](#closed)), you'll also be
+able access the internal node that gained focus:
+
+```js
+document.activeElement.shadowRoot.activeElement // only works with open mode.
+```
+
+If there are multiple levels of shadow DOM at play (say a custom element within
+another custom element), you need to recursively drill into the shadow roots to
+find the `activeElement`:
+
+
+```js
+function deepActiveElement() {
+    let a = document.activeElement;
+    while (a && a.shadowRoot && a.shadowRoot.activeElement) {
+    a = a.shadowRoot.activeElement;
+    }
+    return a;
+}
+```
+
+Another option for focus is the `delegatesFocus: true` option, which expands the
+focus behavior of element's within a shadow tree:
+
+- If you click a node inside shadow DOM and the node is not a focusable area,
+  the first focusable area becomes focused.
+- When a node inside shadow DOM gains focus, `:focus` applies to the host in
+  addition to the focused element.
+
+**Example** - how `delegatesFocus: true` changes focus behavior
+
+```html
+<style>
+    :focus {
+    outline: 2px solid red;
+    }
+</style>
+
+<x-focus></x-focus>
+
+<script>
+customElements.define('x-focus', class extends HTMLElement {
+    constructor() {
+    super(); // always call super() first in the constructor.
+
+    const root = this.attachShadow({mode: 'open', delegatesFocus: true});
+    root.innerHTML = `
+        <style>
+        :host {
+            display: flex;
+            border: 1px dotted black;
+            padding: 16px;
+        }
+        :focus {
+            outline: 2px solid blue;
+        }
+        </style>
+        <div>Clickable Shadow DOM text</div>
+        <input type="text" placeholder="Input inside shadow dom">`;
+
+    // Know the focused element inside shadow DOM:
+    this.addEventListener('focus', function(e) {
+        console.log('Active element (inside shadow dom):',
+                    this.shadowRoot.activeElement);
+    });
+    }
+});
+</script>
+```
+
+**Result**
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tugAZ2CPF7lJlj3oXsvQ.png", alt="delegatesFocus: true behavior.", width="800", height="102" %}
+</figure>
+
+Above is the result when `<x-focus>` is focused (user click, tabbed into,
+`focus()`, etc.), "Clickable Shadow DOM text" is clicked, or the internal
+`<input>` is focused (including `autofocus`).
+
+If you were to set `delegatesFocus: false`, here's what you would see instead:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/658aEGUcPBNZuykfiIr5.png", alt="delegatesFocus: false and the internal input is focused.", width="800", height="97" %}
+  <figcaption>
+    <code>delegatesFocus: false</code> and the internal <code>&lt;input></code> is focused.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rZ5YmtUFVNkOFaVQWTMf.png", alt="delegatesFocus: false and x-focus
+    gains focus (e.g. it has tabindex='0').", width="800", height="98" %}
+  <figcaption>
+    <code>delegatesFocus: false</code> and <code>&lt;x-focus></code>
+    gains focus (e.g. it has <code>tabindex="0"</code>).
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/b6dmEdfyXjW2NTShVA8Y.png", alt="delegatesFocus: false and 'Clickable Shadow DOM text' is
+    clicked (or other empty area within the element's shadow DOM is clicked).", width="800", height="91" %}
+  <figcaption>
+    <code>delegatesFocus: false</code> and "Clickable Shadow DOM text" is
+    clicked (or other empty area within the element's shadow DOM is clicked).
+  </figcaption>
+</figure>
+
+## Tips & Tricks
+
+Over the years I've learned a thing or two about authoring web components. I
+think you'll find some of these tips useful for authoring components and
+debugging shadow DOM.
+
+### Use CSS containment
+
+Typically, a web component's layout/style/paint is fairly self-contained. Use
+[CSS containment](https://developer.chrome.com/blog/css-containment) in `:host` for a perf
+win:
+
+```html
+<style>
+:host {
+    display: block;
+    contain: content; /* Boom. CSS containment FTW. */
+}
+</style>
+```
+
+### Resetting inheritable styles
+
+Inheritable styles (`background`, `color`, `font`, `line-height`, etc.) continue
+to inherit in shadow DOM. That is, they pierce the shadow DOM boundary by
+default. If you want to start with a fresh slate, use `all: initial;` to reset
+inheritable styles to their initial value when they cross the shadow boundary.
+
+
+```html
+<style>
+    div {
+    padding: 10px;
+    background: red;
+    font-size: 25px;
+    text-transform: uppercase;
+    color: white;
+    }
+</style>
+
+<div>
+    <p>I'm outside the element (big/white)</p>
+    <my-element>Light DOM content is also affected.</my-element>
+    <p>I'm outside the element (big/white)</p>
+</div>
+
+<script>
+const el = document.querySelector('my-element');
+el.attachShadow({mode: 'open'}).innerHTML = `
+    <style>
+    :host {
+        all: initial; /* 1st rule so subsequent properties are reset. */
+        display: block;
+        background: white;
+    }
+    </style>
+    <p>my-element: all CSS properties are reset to their
+        initial value using <code>all: initial</code>.</p>
+    <slot></slot>
+`;
+</script>
+```
+
+
+### Finding all the custom elements used by a page
+
+Sometimes it's useful to find custom elements used on the page. To do so, you
+need to recursively traverse the shadow DOM of all elements used on the page.
+
+```js
+const allCustomElements = [];
+
+function isCustomElement(el) {
+    const isAttr = el.getAttribute('is');
+    // Check for <super-button> and <button is="super-button">.
+    return el.localName.includes('-') || isAttr && isAttr.includes('-');
+}
+
+function findAllCustomElements(nodes) {
+    for (let i = 0, el; el = nodes[i]; ++i) {
+    if (isCustomElement(el)) {
+        allCustomElements.push(el);
+    }
+    // If the element has shadow DOM, dig deeper.
+    if (el.shadowRoot) {
+        findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
+    }
+    }
+}
+
+findAllCustomElements(document.querySelectorAll('*'));
+```
+
+
+### Creating elements from a &lt;template&gt;
+
+Instead of populating a shadow root using `.innerHTML`, we can use a declarative
+`<template>`. Templates are an ideal placeholder for declaring the structure of
+a web component.
+
+See the example in
+["Custom elements: building reusable web components"](/custom-elements-v1/).
+
+## History & browser support
+
+If you've been following web components for the last couple of years, you'll
+know that Chrome 35+/Opera have been shipping an older version of shadow DOM for
+some time. Blink will continue to support both versions in parallel for some
+time. The v0 spec provided a different method to create a shadow root
+(`element.createShadowRoot` instead of v1's `element.attachShadow`). Calling the
+older method continues to create a shadow root with v0 semantics, so existing v0
+code won't break.
+
+If you happen to be interested in the old v0 spec, check out the html5rocks
+articles:
+[1](https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/),
+[2](https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/),
+[3](https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/).
+There's also a great comparison of the
+[differences between shadow DOM v0 and v1][differences].
+
+### Browser support
+
+Shadow DOM v1 is shipped in Chrome 53 ([status](https://www.chromestatus.com/features/4667415417847808)),
+Opera 40, Safari 10, and Firefox 63. Edge
+[has started development](https://developer.microsoft.com/microsoft-edge/platform/status/shadowdom/).
+
+To feature detect shadow DOM, check for the existence of `attachShadow`:
+
+
+```js
+const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;
+```
+
+
+#### Polyfill
+
+Until browser support is widely available, the
+[shadydom](https://github.com/webcomponents/shadydom) and
+[shadycss](https://github.com/webcomponents/shadycss) polyfills give you v1
+feature. Shady DOM mimics the DOM scoping of Shadow DOM and shadycss polyfills
+CSS custom properties and the style scoping the native API provides.
+
+Install the polyfills:
+
+```shell
+bower install --save webcomponents/shadydom
+bower install --save webcomponents/shadycss
+```
+
+Use the polyfills:
+
+
+```js
+function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+    });
+}
+
+// Lazy load the polyfill if necessary.
+if (!supportsShadowDOMV1) {
+    loadScript('/bower_components/shadydom/shadydom.min.js')
+    .then(e => loadScript('/bower_components/shadycss/shadycss.min.js'))
+    .then(e => {
+        // Polyfills loaded.
+    });
+} else {
+    // Native shadow dom v1 support. Go to go!
+}
+```
+
+
+See the [https://github.com/webcomponents/shadycss#usage](https://github.com/webcomponents/shadycss)
+for instructions on how to shim/scope your styles.
+
+
+## Conclusion
+
+For the first time ever, we have an API primitive that does proper CSS scoping,
+DOM scoping, and has true composition. Combined with other web component APIs
+like custom elements, shadow DOM provides a way to author truly encapsulated
+components without hacks or using older baggage like `<iframe>`s.
+
+Don't get me wrong. Shadow DOM is certainly a complex beast! But it's a beast
+worth learning. Spend some time with it. Learn it and ask questions!
+
+### Further reading
+
+- [Differences between Shadow DOM v1 and v0][differences]
+- ["Introducing Slot-Based Shadow DOM API"](https://webkit.org/blog/4096/introducing-shadow-dom-api/)
+  from the WebKit Blog.
+- [Web Components and the future of Modular CSS](https://philipwalton.github.io/talks/2015-10-26/)
+  by [Philip Walton](https://twitter.com/@philwalton)
+- ["Custom elements: building reusable web components"](/custom-elements-v1/)
+  from Google's WebFundamentals.
+- [Shadow DOM v1 spec][sd_spec_whatwg]
+- [Custom elements v1 spec][ce_spec]
+
+## FAQ
+
+**Can I use Shadow DOM v1 today?**
+
+With a polyfill, yes. See [Browser support](#support).
+
+**What security features does shadow DOM provide?**
+
+Shadow DOM is not a security feature. It's a lightweight tool for scoping CSS
+and hiding away DOM trees in component. If you want a true security boundary,
+use an `<iframe>`.
+
+**Does a web component have to use shadow DOM?**
+
+Nope! You don't have to create web components that use shadow DOM. However,
+authoring [custom elements that use Shadow DOM](#elements) means you can take
+advantage of features like CSS scoping, DOM encapsulation, and composition.
+
+**What's the difference between open and closed shadow roots?**
+
+See [Closed shadow roots](#closed).
+
+[ce_spec]: https://html.spec.whatwg.org/multipage/scripting.html#custom-elements
+[ce_article]: (/web/fundamentals/web-components/customelements)
+[sd_spec]: http://w3c.github.io/webcomponents/spec/shadow/
+[sd_spec_whatwg]: https://dom.spec.whatwg.org/#shadow-trees
+[differences]: http://hayato.io/2016/shadowdomv1/
+[css_props]: https://developer.mozilla.org/docs/Web/CSS/Using_CSS_variables
diff --git a/src/site/content/en/blog/shadowdom/index.md b/src/site/content/en/blog/shadowdom/index.md
new file mode 100644
index 00000000000..662270f39c2
--- /dev/null
+++ b/src/site/content/en/blog/shadowdom/index.md
@@ -0,0 +1,537 @@
+---
+layout: post
+title: Shadow DOM 101
+authors:
+  - dominiccooney
+date: 2013-01-04
+updated: 2016-10-03
+tags:
+  - blog
+---
+
+{% Aside 'warning' %}
+This article describes an old version of Shadow DOM (v0). If you're interested in using Shadow DOM, check out our new article, "[Shadow DOM v1: self-contained web components](/shadowdom-v1/)". It covers everything in the newer Shadow DOM v1 spec shipped in Chrome 53, Safari 10, and Firefox 63.
+{% endAside %}
+
+## Introduction
+
+Web Components is a set of cutting edge standards that:
+
+1. Make it possible to build widgets
+1. …which can be reused reliably
+1. …and which won’t break pages if the next version of the component
+changes internal implementation details.
+
+Does this mean you have to decide when to use HTML/JavaScript, and
+when to use Web Components? No! HTML and JavaScript can make
+interactive visual stuff. Widgets are interactive visual stuff. It
+makes sense to leverage your HTML and JavaScript skills when
+developing a widget. The Web Components standards are designed to help
+you do that.
+
+{% Aside %}
+It doesn’t make sense to have to switch to a different technology to
+build a widget. For example, I’m definitely not a fan of making your
+widget out of a `<canvas>`. It is reliable — pages
+won’t break if you change what it paints — but it’s hostile to
+accessibility, indexing, composition, and resolution independence.
+{% endAside %}
+
+
+But there is a fundamental problem that makes widgets built out of
+HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
+encapsulated from the rest of the page. This lack of encapsulation
+means your document stylesheet might accidentally apply to parts
+inside the widget; your JavaScript might accidentally modify parts
+inside the widget; your IDs might overlap with IDs inside the widget;
+and so on.
+
+{% Aside %}
+A particularly pernicious aspect of the lack of encapsulation is that
+if you upgrade the library and the internal details of the widget’s
+DOM changes, your styles and scripts might break in unpredictable
+ways.
+{% endAside %}
+
+Web Components is comprised of three parts:
+
+1. [Templates](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
+1. [Shadow DOM](https://www.w3.org/TR/shadow-dom/)
+1. [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html)
+
+
+**Shadow DOM** addresses the DOM tree encapsulation problem. The
+four parts of Web Components are designed to work together, but you
+can also pick and choose which parts of Web Components to use. This
+tutorial shows you how to use Shadow DOM.
+
+{% Aside %}
+Shadow DOM is now available in Chrome 35+.
+{% endAside %}
+
+## Hello, Shadow World
+
+With Shadow DOM, elements can get a new kind of node associated with
+them. This new kind of node is called a **shadow root**. An element that has a shadow root associated with it is called a **shadow
+host.** The content of a shadow host isn’t rendered; the content of
+the shadow root is rendered instead.
+
+For example, if you had markup like this:
+
+```html
+<button>Hello, world!</button>
+<script>
+var host = document.querySelector('button');
+var root = host.createShadowRoot();
+root.textContent = 'こんにちは、影の世界!';
+</script>
+```
+
+then instead of
+
+```html
+<button id="ex1a">Hello, world!</button>
+<script>
+function remove(selector) {
+  Array.prototype.forEach.call(
+      document.querySelectorAll(selector),
+      function (node) { node.parentNode.removeChild(node); });
+}
+
+if (!HTMLElement.prototype.createShadowRoot) {
+  remove('#ex1a');
+  document.write('<img src="SS1.png" alt="Screenshot of a button with \'Hello, world!\' on it.">');
+}
+</script>
+```
+
+your page looks like
+
+```html
+<button id="ex1b">Hello, world!</button>
+<script>
+(function () {
+  if (!HTMLElement.prototype.createShadowRoot) {
+    remove('#ex1b');
+    document.write('<img src="SS2.png" alt="Screenshot of a button with \'Hello, shadow world!\' in Japanese on it.">');
+    return;
+  }
+  var host = document.querySelector('#ex1b');
+  var root = host.createShadowRoot();
+  root.textContent = 'こんにちは、影の世界!';
+})();
+</script>
+```
+
+Not only that, if JavaScript on the page asks what the button’s
+`textContent` is, it isn’t going to get
+“こんにちは、影の世界!”, but “Hello, world!” because the DOM subtree
+under the shadow root is encapsulated.
+
+## Separating Content from Presentation
+
+Now we'll look at using Shadow DOM to separate content from
+presentation. Let's say we have this name tag:
+
+```html
+<style>
+.ex2a.outer {
+  border: 2px solid brown;
+  border-radius: 1em;
+  background: red;
+  font-size: 20pt;
+  width: 12em;
+  height: 7em;
+  text-align: center;
+}
+.ex2a .boilerplate {
+  color: white;
+  font-family: sans-serif;
+  padding: 0.5em;
+}
+.ex2a .name {
+  color: black;
+  background: white;
+  font-family: "Marker Felt", cursive;
+  font-size: 45pt;
+  padding-top: 0.2em;
+}
+</style>
+<div class="ex2a outer">
+  <div class="boilerplate">
+    Hi! My name is
+  </div>
+  <div class="name">
+    Bob
+  </div>
+</div>
+```
+
+Here is the markup. This is what you’d write today. It doesn’t
+use Shadow DOM:
+
+
+```html
+<style>
+.outer {
+  border: 2px solid brown;
+  border-radius: 1em;
+  background: red;
+  font-size: 20pt;
+  width: 12em;
+  height: 7em;
+  text-align: center;
+}
+.boilerplate {
+  color: white;
+  font-family: sans-serif;
+  padding: 0.5em;
+}
+.name {
+  color: black;
+  background: white;
+  font-family: "Marker Felt", cursive;
+  font-size: 45pt;
+  padding-top: 0.2em;
+}
+</style>
+<div class="outer">
+  <div class="boilerplate">
+    Hi! My name is
+  </div>
+  <div class="name">
+    Bob
+  </div>
+</div>
+```
+
+Because the DOM tree lacks encapsulation, the entire structure of the
+name tag is exposed to the document. If other elements on the page
+accidentally use the same class names for styling or scripting, we're
+gonna have a bad time.
+
+
+We can avoid having a bad time.
+
+### Step 1: Hide Presentation Details
+
+Semantically we probably only care that:
+
+- It is a name tag.
+- The name is “Bob”.
+
+First, we write markup that is closer to the true semantics we want:
+
+```html
+<div id="nameTag">Bob</div>
+```
+
+Then we put all of the styles and divs used for presentation into
+a `<template>` element:
+
+```html
+<div id="nameTag">Bob</div>
+<template id="nameTagTemplate">
+<span class="unchanged"><style>
+.outer {
+  border: 2px solid brown;
+
+  … same as above …
+
+</style>
+<div class="outer">
+  <div class="boilerplate">
+    Hi! My name is
+  </div>
+  <div class="name">
+    Bob
+  </div>
+</div></span>
+</template>
+```
+
+At this point ‘Bob’ is the only thing that is rendered. Because we
+moved the presentational DOM elements inside
+a `<template>` element, they aren’t rendered, but
+they __can__ be accessed from JavaScript. We do that now to
+populate the shadow root:
+
+```html
+<script>
+var shadow = document.querySelector('#nameTag').createShadowRoot();
+var template = document.querySelector('#nameTagTemplate');
+var clone = document.importNode(template.content, true);
+shadow.appendChild(clone);
+```
+
+{% Aside %}
+Templates, like Shadow DOM, are an emerging
+standard. The `<template>` element is available in [many modern browsers](https://caniuse.com/template). You can also populate a shadow root using familiar
+properties and methods like `innerHTML`, `appendChild`, `getElementById`,
+and so on. This article is focused on Shadow DOM, so we won’t go
+further into how the template element works here. If you want to learn
+more about `<template>`, see [HTML's New Template Tag](/webcomponents-template/).
+{% endAside %}
+
+Now that we have set up a shadow root, the name tag is rendered
+again. If you were to right-click on the name tag and inspect the
+element you see that it is sweet, semantic markup:
+
+```html
+<div id="nameTag">Bob</div>
+```
+
+This demonstrates that, by using Shadow DOM, we have hidden the
+presentation details of the name tag from the document. The
+presentation details are encapsulated in the Shadow DOM.
+
+### Step 2: Separate Content from Presentation
+
+Our name tag now hides presentation details from the page, but it
+doesn’t actually separate presentation from content, because although
+the content (the name “Bob”) is in the page, the name that is rendered
+is the one we copied into the shadow root. If we want to change the
+name on the name tag, we’d need to do it in two places, and they might
+get out of sync.
+
+HTML elements are compositional — you can put a button inside a table,
+for example. Composition is what we need here: The name tag must be a
+composition of the red background, the “Hi!” text, and the content
+that is on the name tag.
+
+You, the component author, define how composition works with your
+widget using a new element called `<content>`. This
+creates an insertion point in the presentation of the widget, and the
+insertion point cherry-picks content from the shadow host to present
+at that point.
+
+If we change the markup in the Shadow DOM to this:
+
+```html
+<span class="unchanged"><template id="nameTagTemplate">
+<style>
+  …
+</style></span>
+<div class="outer">
+  <div class="boilerplate">
+    Hi! My name is
+  </div>
+  <div class="name">
+    <content></content>
+  </div>
+</div>
+<span class="unchanged"></template></span>
+```
+
+When the name tag is rendered, the content of the shadow host is
+projected into the spot that the `<content>` element
+appears.
+
+Now the structure of the document is simpler because the name is only
+in one place — the document. If your page ever needs to update the
+user’s name, you just write:
+
+```js
+document.querySelector('#nameTag').textContent = 'Shellie';
+```
+
+and that is it. The rendering of the name tag is automatically updated
+by the browser, because we're **projecting** the content of the
+name tag into place with `<content>`.
+
+```html
+<div id="ex2b">
+```
+
+Now we have achieved separation of content and presentation. **The
+content is in the document; the presentation is in the Shadow DOM.**
+They are automatically kept in sync by the browser when it comes time
+to render something.
+
+### Step 3: Profit
+
+By separating content and presentation, we can simplify the
+code that manipulates the content — in the name tag example, that
+code only needs to deal with a simple structure containing
+one `<div>` instead of several.
+
+Now if we change our presentation, we don't need to change any of the
+code!
+
+For example, say we want to localize our name tag. It is still a name
+tag, so the semantic content in the document doesn’t change:
+
+```html
+<div id="nameTag">Bob</div>
+```
+
+The shadow root setup code stays the same. Just what gets put in the
+shadow root changes:
+
+```html
+<template id="nameTagTemplate">
+<style>
+.outer {
+  border: 2px solid pink;
+  border-radius: 1em;
+  background: url(sakura.jpg);
+  font-size: 20pt;
+  width: 12em;
+  height: 7em;
+  text-align: center;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+.name {
+  font-size: 45pt;
+  font-weight: normal;
+  margin-top: 0.8em;
+  padding-top: 0.2em;
+}
+</style>
+<div class="outer">
+  <div class="name">
+    <content></content>
+  </div>
+  と申します。
+</div>
+</template>
+```
+
+{% Aside %}
+[Background image by Mike Dowman](http://www.flickr.com/photos/mikedowman/5621169045/), reused under Creative Commons license.
+{% endAside %}
+
+
+This is a big improvement over the situation on the web today, because
+your name update code can depend on the structure of the
+__component__ which is simple and consistent. **Your name
+update code doesn’t need to know the structure used for
+rendering.** If we consider what is rendered, the name appears
+second in English (after “Hi! My name is”), but first in Japanese
+(before “と申します”). That distinction is semantically meaningless
+from the point of view of updating the name that is being displayed,
+so the name update code doesn’t have to know about that detail.
+
+## Extra Credit: Advanced Projection
+
+In the above example, the `<content>` element
+cherry-picks all of the content from the shadow host. By using the
+`select` attribute, you can control what
+a content element projects. You can also use multiple content
+elements.
+
+For example, if you have a document which contains this:
+
+```html
+<div id="nameTag">
+  <div class="first">Bob</div>
+  <div>B. Love</div>
+  <div class="email">bob@</div>
+</div>
+```
+
+and a shadow root which uses CSS selectors to select specific content:
+
+```html
+<div style="background: purple; padding: 1em;">
+  <div style="color: red;">
+    <content **select=".first"**></content>
+  </div>
+  <div style="color: yellow;">
+    <content **select="div"**></content>
+  </div>
+  <div style="color: blue;">
+    <content **select=".email">**</content>
+  </div>
+</div>
+```
+
+{% Aside %}
+`select` can only
+select elements which are immediate children of the host node. That is, you
+cannot select descendants (e.g.`select="table tr"`).
+{% endAside %}
+
+The `<div class="email">` element is matched by both
+the `<content select="div">` and `<content
+select=".email">` elements. How many times does Bob’s email
+address appear, and in what colors?
+
+The answer is that Bob’s email address appears once, and it is yellow.
+
+The reason is that, as people who hack on Shadow DOM know,
+constructing the tree of what is actually rendered on screen is like a
+huge party. **The content element is the invitation that lets
+content from the document into the backstage Shadow DOM rendering
+party.** These invitations are delivered in order; who gets an
+invitation depends on to whom it is addressed (that is,
+the `select` attribute.) Content, once
+invited, always accepts the invitation (who wouldn’t?!) and off it
+goes. If a subsequent invitation is sent to that address again, well,
+nobody is home, and it doesn’t come to your party.
+
+In the above example, `<div class="email">` matches
+both the `div` selector and the `.email`
+selector, but because the content element with the `div`
+selector comes earlier in the document,
+`<div class="email">` goes to the yellow party, and
+nobody is available to come to the blue party. (That might
+be __why__ it is so blue, although misery loves company, so you
+never know.)
+
+If something is invited to __no__ parties, then it doesn’t get
+rendered at all. That is what happened to the “Hello, world” text in
+the very first example. This is useful when you want to achieve a
+radically different rendering: Write the semantic model in the
+document, which is what is accessible to scripts in the page, but hide
+it for rendering purposes and connect it to a really different
+rendering model in Shadow DOM using JavaScript.
+
+For example, HTML has a nice date picker. If you write `<input
+type="date">` you get a neat pop-up calendar. But what if you
+want to let the user pick a range of dates for their __dessert__
+island vacation (you know… with hammocks made out of Red Vines.) You
+set up your document this way:
+
+
+```html
+<div class="dateRangePicker">
+  <label for="start">Start:</label>
+  <input type="date" name="startDate" id="start">
+  <br>
+  <label for="end">End:</label>
+  <input type="date" name="endDate" id="end">
+</div>
+```
+
+but create Shadow DOM that uses a table to create a slick calendar
+which highlights the range of dates and so on. When the user clicks on
+the days in the calendar, the component updates the state in the
+startDate and endDate inputs; when the user submits the form, the
+values from those input elements get submitted.
+
+Why did I include labels in the document if they’re not going to be
+rendered? The reason is that if a user views the form with a browser
+that doesn’t support Shadow DOM, the form is still usable, just not as
+pretty. The user sees something like:
+
+```html
+<div class="dateRangePicker">
+  <label for="start">Start:</label>
+  <input type="date" name="startDate" id="start">
+  <br>
+  <label for="end">End:</label>
+  <input type="date" name="endDate" id="end">
+</div>
+```
+
+## You Pass Shadow DOM 101
+
+Those are the basics of Shadow DOM — you pass Shadow DOM 101! You can
+do more with Shadow DOM, for example, you can use multiple shadow on
+one shadow host, or nested shadows for encapsulation, or architect
+your page using Model-Driven Views (MDV) and Shadow DOM. And Web
+Components are more than just Shadow DOM.
+
+We explain those in later posts.
diff --git a/src/site/content/en/blog/shape-detection/hero.jpg b/src/site/content/en/blog/shape-detection/hero.jpg
deleted file mode 100644
index f9fa89f590e..00000000000
Binary files a/src/site/content/en/blog/shape-detection/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/shape-detection/index.md b/src/site/content/en/blog/shape-detection/index.md
deleted file mode 100644
index 46bf46d537c..00000000000
--- a/src/site/content/en/blog/shape-detection/index.md
+++ /dev/null
@@ -1,340 +0,0 @@
----
-title: "The Shape Detection API: a picture is worth a thousand words, faces, and barcodes"
-subhead: The Shape Detection API detects faces, barcodes, and text in images.
-authors:
-  - thomassteiner
-description: The Shape Detection API detects faces, barcodes, and text in images.
-date: 2019-01-07
-updated: 2020-06-04
-tags:
-  - blog
-  - capabilities
-  - origin-trials
-  - shape-detection
-  - progressive-web-apps
-  - webapp
-hero: hero.jpg
-alt: QR code being scanned by a mobile phone
-origin-trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/-2341871806232657919
----
-
-{% Aside %}
-  This API is part of the new
-  [capabilities project](https://developers.google.com/web/updates/capabilities).
-  Barcode detection has launched in Chrome 83
-  on certified devices with
-  [Google Play Services](https://play.google.com/store/apps/details?id=com.google.android.gms)
-  installed.
-  Face and text detection are available behind a flag. This post will be updated as
-  the Shape Detection API evolves.
-{% endAside %}
-
-## What is the Shape Detection API? {: #what }
-
-With APIs like
-[`navigator.mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
-and the Chrome for Android
-[photo picker](https://bugs.chromium.org/p/chromium/issues/detail?id=656015),
-it has become fairly easy to capture images or live video data from device
-cameras, or to upload local images. So far, this dynamic image data—as well as
-static images on a page—has been not been accessible by code, even though
-images may actually contain a lot of interesting features such as faces,
-barcodes, and text.
-
-For example, in the past, if developers wanted to extract such features on the
-client to build a [QR code reader](https://qrsnapper.appspot.com/), they had
-to rely on external JavaScript libraries. This could be expensive from a
-performance point of view and increase the overall page weight. On the other
-hand, operating systems including Android, iOS, and macOS, but also hardware
-chips found in camera modules, typically already have performant and highly
-optimized feature detectors such as the Android
-[`FaceDetector`](https://developer.android.com/reference/android/media/FaceDetector)
-or the iOS generic feature detector,
-[`CIDetector`](https://developer.apple.com/documentation/coreimage/cidetector?language=objc).
-
-The [Shape Detection API][spec] exposes these native implementations through
-a set of JavaScript interfaces. Currently, the supported features are face
-detection through the `FaceDetector` interface, barcode detection through the
-`BarcodeDetector` interface, and text detection (Optical Character
-Recognition, (OCR)) through the `TextDetector` interface.
-
-{% Aside 'caution' %}
-  Text detection, despite being an interesting field, is not considered stable
-  enough across either computing platforms or character sets to be
-  standardized at the moment, which is why text detection has been moved to
-  a separate
-  [informative specification](https://wicg.github.io/shape-detection-api/text.html).
-{% endAside %}
-
-### Suggested use cases {: #use-cases }
-
-As outlined above, the Shape Detection API currently supports the detection
-of faces, barcodes, and text. The following bullet list contains examples
-of use cases for all three features.
-
-#### Face detection
-
-- Online social networking or photo sharing sites commonly let their users
-  annotate people in images. By highlighting the boundaries of detected faces,
-  this task can be facilitated.
-- Content sites can dynamically crop images based on potentially detected
-  faces rather than relying on other heuristics, or highlight detected faces
-  with [Ken Burns](https://en.wikipedia.org/wiki/Ken_Burns_effect)-like
-  panning and zooming effects in story-like formats.
-- Multimedia messaging sites can allow their users to overlay funny objects like
-  [sunglasses or mustaches](https://beaufortfrancois.github.io/sandbox/media-recorder/mustache.html)
-  on detected face landmarks.
-
-#### Barcode detection
-
-- Web applications that read QR codes can unlock interesting use cases like
-  online payments or web navigation, or use barcodes for establishing social
-  connections on messenger applications.
-- Shopping apps can allow their users to scan
-  [EAN](https://en.wikipedia.org/wiki/International_Article_Number) or
-  [UPC](https://en.wikipedia.org/wiki/Universal_Product_Code) barcodes of
-  items in a physical   store to compare prices online.
-- Airports can provide web kiosks where passengers can scan their boarding
-  passes' [Aztec codes](https://en.wikipedia.org/wiki/Aztec_Code) to show
-  personalized information related to their flights.
-
-#### Text detection
-
-- Online social networking sites can improve the accessibility of
-  user-generated image content by adding detected texts as `alt` attributes
-  for `<img>` tags when no other descriptions are provided.
-- Content sites can use text detection to avoid placing headings on top of
-  hero images with contained text.
-- Web applications can use text detection to translate texts such as,
-  for example, restaurant menus.
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [In Progress][spec]          |
-| **3. Gather feedback & iterate on design** | [**In progress**](#feedback) |
-| 4. Origin trial                            | [Complete](https://developers.chrome.com/origintrials/#/view_trial/-2341871806232657919) |
-| **5. Launch**                              | Barcode detection **Complete**<br>Face Detection [In Progress](https://www.chromestatus.com/feature/5678216012365824)<br>Text Detection [In Progress](https://www.chromestatus.com/feature/5644087665360896) |
-
-</div>
-
-## How to use the Shape Detection API {: #use }
-
-{% Aside 'warning' %}
-  So far only barcode detection is available by default, starting in Chrome 83
-  on certified devices with
-  [Google Play Services](https://play.google.com/store/apps/details?id=com.google.android.gms)
-  installed,
-  but face and text detection are available behind a flag.
-  You can always use the Shape Detection API for local experiments by enabling the
-  `#enable-experimental-web-platform-features` flag.
-{% endAside %}
-
-If you want to experiment with the Shape Detection API locally,
-enable the `#enable-experimental-web-platform-features`
-flag in `chrome://flags`.
-
-The interfaces of all three detectors, `FaceDetector`, `BarcodeDetector`, and
-`TextDetector`, are similar. They all provide a single asynchronous method
-called `detect()` that takes an
-[`ImageBitmapSource`](https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource)
-as an input (that is, either a
-[`CanvasImageSource`](https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource), a
-[`Blob`](https://w3c.github.io/FileAPI/#dfn-Blob), or
-[`ImageData`](https://html.spec.whatwg.org/multipage/canvas.html#imagedata)).
-
-For `FaceDetector` and `BarcodeDetector`, optional parameters can be passed
-to the detector's constructor that allow for providing hints to the
-underlying native detectors.
-
-Please carefully check the support matrix in the
-[explainer](https://github.com/WICG/shape-detection-api#overview) for an
-overview of the different platforms.
-
-{% Aside 'gotchas' %}
-  If your `ImageBitmapSource` has an
-  [effective script origin](https://html.spec.whatwg.org/multipage/#concept-origin)
-  which is not the same as the   document's effective script origin, then
-  attempts to call `detect()` will fail with a new
-  `SecurityError` [`DOMException`](https://heycam.github.io/webidl/#idl-DOMException).
-  If your image origin supports CORS, you can use the
-  [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
-  attribute to request CORS access.
-{% endAside %}
-
-### Working with the `FaceDetector` {: #facedetector}
-
-The `FaceDetector` always returns the bounding boxes of faces it detects in
-the `ImageBitmapSource`. Depending on the platform, more information
-regarding face landmarks like eyes, nose, or mouth may be available.
-
-```js
-const faceDetector = new FaceDetector({
-  // (Optional) Hint to try and limit the amount of detected faces
-  // on the scene to this maximum number.
-  maxDetectedFaces: 5,
-  // (Optional) Hint to try and prioritize speed over accuracy
-  // by, e.g., operating on a reduced scale or looking for large features.
-  fastMode: false
-});
-try {
-  const faces = await faceDetector.detect(image);
-  faces.forEach(face => drawMustache(face));
-} catch (e) {
-  console.error('Face detection failed:', e);
-}
-```
-
-### Working with the `BarcodeDetector` {: #barcodedetector}
-
-The `BarcodeDetector` returns the barcode raw values it finds in the
-`ImageBitmapSource` and the bounding boxes, as well as other information like
-the formats of the detected barcodes.
-
-```js
-const barcodeDetector = new BarcodeDetector({
-  // (Optional) A series of barcode formats to search for.
-  // Not all formats may be supported on all platforms
-  formats: [
-    'aztec',
-    'code_128',
-    'code_39',
-    'code_93',
-    'codabar',
-    'data_matrix',
-    'ean_13',
-    'ean_8',
-    'itf',
-    'pdf417',
-    'qr_code',
-    'upc_a',
-    'upc_e'
-  ]
-});
-try {
-  const barcodes = await barcodeDetector.detect(image);
-  barcodes.forEach(barcode => searchProductDatabase(barcode));
-} catch (e) {
-  console.error('Barcode detection failed:', e);
-}
-```
-
-### Working with the `TextDetector` {: #textdetector}
-
-The `TextDetector` always returns the bounding boxes of the detected texts,
-and on some platforms the recognized characters.
-
-{% Aside 'caution' %}
-  Text recognition is not universally available.
-{% endAside %}
-
-```js
-const textDetector = new TextDetector();
-try {
-  const texts = await textDetector.detect(image);
-  texts.forEach(text => textToSpeech(text));
-} catch (e) {
-  console.error('Text detection failed:', e);
-}
-```
-
-## Feature detection {: #featuredetection }
-
-Purely checking for the existence of the constructors to feature detect the
-Shape Detection API doesn't suffice, as Chrome on Linux and Chrome OS
-currently still expose the detectors, but they are known to not work
-([bug](https://crbug.com/920961)). As a temporary measure, we instead
-recommend a *defensive programming* approach by doing feature detection
-like this:
-
-```js
-const supported = await (async () => 'FaceDetector' in window &&
-    await new FaceDetector().detect(document.createElement('canvas'))
-    .then(_ => true)
-    .catch(e => e.name === 'NotSupportedError' ? false : true))();
-```
-
-## Best practices {: #bestpractices}
-
-All detectors work asynchronously, that is, they do not block the main
-thread. So don't rely on realtime detection, but rather allow for some
-time for the detector to do its work.
-
-If you are a fan of
-[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API),
-you'll be happy to know that detectors are exposed there as well.
-Detection results are serializable and can thus be passed from the worker
-to the main app via `postMessage()`. The [demo][demo] shows this in action.
-
-Not all platform implementations support all features, so be sure to check
-the support situation carefully and use the API as a progressive
-enhancement. For example, some platforms might support face detection
-per se, but not face landmark detection (eyes, nose, mouth, etc.); or the
-existence and the location of text may be recognized, but not text contents.
-
-{% Aside 'caution' %}
-  This API is an optimization and not something guaranteed to be available
-  from the platform for every user. Developers are expected to combine this
-  with their own [image recognition code](https://github.com/mjyc/opencv) and
-  take advantage of the native optimization when it is available.
-{% endAside %}
-
-## Feedback {: #feedback }
-
-The Chrome team and the web standards community want to hear about your
-experiences with the Shape Detection API.
-
-### Tell us about the API design {: .hide-from-toc }
-
-Is there something about the API that doesn't work like you expected? Or
-are there missing methods or properties that you need to implement your
-idea? Have a question or comment on the security model?
-
-* File a spec issue on the [Shape Detection API GitHub repo][issues],
-  or add your thoughts to an existing issue.
-
-### Problem with the implementation? {: .hide-from-toc }
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-* File a bug at <https://new.crbug.com>. Be sure to include as
-  much detail as you can, simple instructions for reproducing, and set
-  *Components* to `Blink>ImageCapture`. [Glitch](https://glitch.com)
-  works great for sharing quick and easy repros.
-
-### Planning to use the API? {: .hide-from-toc }
-
-Planning to use the Shape Detection API on your site? Your public support
-helps us to prioritize features, and shows other browser vendors how
-critical it is to support them.
-
-* Share how you plan to use it on the [WICG Discourse thread][wicg-discourse]
-* Send a Tweet to [@ChromiumDev][cr-dev-twitter] with `#shapedetection` and
-  let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [API Demo][demo] | [API Demo source][demo-source]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: `Blink>ImageCapture`
-
-[cr-dev-twitter]: https://twitter.com/chromiumdev
-[spec]: https://wicg.github.io/shape-detection-api
-[issues]: https://github.com/WICG/shape-detection-api/issues
-[demo]: https://shape-detection-demo.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/shape-detection-demo
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=728474
-[cr-status]: https://www.chromestatus.com/feature/4757990523535360
-[explainer]: https://docs.google.com/document/d/1QeCDBOoxkElAB0x7ZpM3VN3TQjS1ub1mejevd2Ik1gQ/edit
-[wicg-discourse]: https://discourse.wicg.io/t/rfc-proposal-for-face-detection-api/1642/3
-[ot-what-is]: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/README.md
-[ot-dev-guide]: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
-[ot-use]: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#how-do-i-enable-an-experimental-feature-on-my-origin
diff --git a/src/site/content/en/blog/shapes-getting-started/index.md b/src/site/content/en/blog/shapes-getting-started/index.md
new file mode 100644
index 00000000000..d7a1edb1ad4
--- /dev/null
+++ b/src/site/content/en/blog/shapes-getting-started/index.md
@@ -0,0 +1,421 @@
+---
+layout: post
+title: Getting Started with CSS Shapes
+subhead: Wrapping content around custom paths
+authors:
+  - razvancaliman
+date: 2014-09-16
+updated: 2014-09-17
+tags:
+  - blog
+---
+
+For a long time, web designers have been forced to create within the constraints of the rectangle. Most content on the web is still trapped in simple boxes because most creative ventures into non-rectangular layout end in frustration. That is about to change with the introduction of CSS Shapes, available starting with Chrome 37.
+CSS Shapes allow web designers to wrap content around custom paths, like circles, ellipses and polygons, thus breaking free from the constraints of the rectangle.
+
+Shapes can be defined manually or they can be inferred from images.
+
+Let's look at a very simple example.
+
+Perhaps you've been as naïve as me when first floating an image with transparent parts expecting the content to wrap and fill the gaps, only to be disappointed by the rectangular wrap shape persisting around the element. CSS Shapes can be used to solve this problem.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xi3LbvT89PfuyhpK4aHh.jpg", alt="Extracting a shape from an image", width="660", height="400" %}
+</figure>
+
+```html
+<img class="element" src="image.png" />
+<p>Lorem ipsum…</p>
+
+<style>
+.element{
+  shape-outside: url(image.png);
+  shape-image-threshold: 0.5;
+  float: left;
+}
+</style>
+```
+
+The `shape-outside: url(image.png)` CSS declaration tells the browser to extract a shape from the image.
+
+The `shape-image-threshold` property defines the minimum opacity level of pixels that will be used to create the shape. Its value must be in the range between `0.0` (fully transparent) and `1.0` (fully opaque). So, `shape-image-threshold: 0.5` means that only pixels with opacity 50% and above will be used to create the shape.
+
+The `float` property is key here. While the `shape-outside` property defines the shape of the area around which content will wrap, without the float, you won't see the effects of the shape.
+
+Elements have a float area on the opposite side of their `float` value. For example, if an element with a coffee cup image is being floated left, the float area will be created to the right of the cup. Even though you can engineer an image with gaps on both sides, content will only wrap around the shape on the opposite side designated by the float property, left or right, never both.
+
+In the future, it will be possible to use `shape-outside` on elements which are not floated with the introduction CSS Exclusions.
+
+## Creating shapes manually
+
+Beyond extracting shapes from images, you can also code them manually. You can choose from a few functional values to create shapes: `circle()`, `ellipse()`, `inset()` and `polygon()`. Each shape function accepts a set of coordinates and it is paired with a reference box which establishes the coordinate system. More about reference boxes in a moment.
+
+## The circle() function
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jnKehwelADiEqVH9NMmX.png", alt="Illustration of the circle() shape value", width="660", height="220" %}
+</figure>
+
+The full notation for a circle shape value is `circle(r at cx cy)` where `r` is the radius of the circle, while `cx` and `cy` are coordinates of the circle center on the X-axis and Y-axis. The coordinates for the circle center are optional. If you omit them, the center of the element (the intersection of its diagonals) will be used as the default.
+
+```css
+.element{
+  shape-outside: circle(50%);
+  width: 300px;
+  height: 300px;
+  float: left;
+}
+```
+
+In the example above, content will wrap around the outside of a circular path. The single argument `50%` specifies the radius of the circle, which, in this specific case, amounts to half of the element's width or height. Changing the dimensions of the element will influence the radius of the circle shape. This is a basic example of how CSS Shapes can be responsive.
+
+Before going further, a quick aside: it is important to remember that CSS Shapes influence only the shape of the float area around an element. If the element has a background, that will not be clipped by the shape. To achieve that effect, you must use properties from [CSS Masking](http://www.html5rocks.com/en/tutorials/masking/adobe/) - either [clip-path](http://docs.webplatform.org/wiki/css/properties/clip-path) or [mask-image](http://docs.webplatform.org/wiki/css/properties/mask-image). The `clip-path` property comes in very handy because it follows the same notation as CSS Shapes, so you can reuse values.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zAHfcfEKxoEa9q8p6kE0.png", alt="Illustration of `circle()` shape + clip-path", width="660", height="290" %}
+</figure>
+
+Illustrations throughout this document use clipping to highlight the shape and help you understand the effects.
+
+Back to the circle shape.
+
+When using percentages for the circle radius, the value is actually computed with a slightly more complex [formula](http://www.w3.org/TR/css-shapes/#funcdef-circle): sqrt(width^2 + height^2) / sqrt(2). It's useful to understand this because it will help you imagine what the resulting circle shape will be if the element's dimensions are not equal.
+
+All CSS unit types can be used in shape function coordinates - px, em, rem, vw, vh, and so forth. You can pick the one which is flexible or rigid enough for your needs.
+
+You can adjust the circle's position by setting explicit values for the coordinates of its center.
+
+```css
+.element{
+  shape-outside: circle(50% at 0 0);
+}
+```
+
+This positions the circle center at the origin of the coordinate system. What is the coordinate system? This is where we introduce reference boxes.
+
+## Reference boxes for CSS Shapes
+
+The reference box is a virtual box around the element, which establishes the coordinate system used to draw and position the shape. The origin of the coordinate system is at its upper-left corner with the X-axis pointing to the right and the Y-axis pointing down.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UY8jOJVxbglzUnVTr5rH.png", alt="Coordinate system for CSS Shapes", width="660", height="310" %}
+</figure>
+
+Remember that `shape-outside` alters the shape of the float area around which content will wrap. The float area extends to the outer edges of the box defined by the `margin` property. This is called the `margin-box` and it is the default reference box for a shape if none is explicitly mentioned.
+
+The following two CSS declarations have identical results:
+
+```css
+.element{
+  shape-outside: circle(50% at 0 0);
+  /* identical to: */
+  shape-outside: circle(50% at 0 0) margin-box;
+}
+```
+
+We have not yet set a margin on the element. At this point it is safe to assume that the origin of the coordinate system and the circle center are at the upper-left corner of the element's content area. This changes when you do set a margin:
+
+```css
+.element{
+  shape-outside: circle(50% at 0 0) margin-box;
+  margin: 100px;
+}
+```
+
+The origin of the coordinate system now lies outside the element's content area (100px up and 100px left), as does the circle center. The computed value of the circle radius also grows to account for the increased surface of the coordinate system established by the `margin-box` reference box.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/90l2cTKm1tLgSajkStCu.png", alt="Margin-box coordinate system with and without margin", width="660", height="500" %}
+<figure>
+
+There are a few reference box options to choose from: `margin-box`, `border-box`, `padding-box` and `content-box`. Their names imply their boundaries. We previously explained the `margin-box`. The `border-box` is constrained by the outer edges of the element's borders, the `padding-box` is constrained by the element's padding, while the `content-box` is identical to the actual surface area used by the content within an element.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NWIXGzzRmUcWtS863jCu.png", alt="Illustration of all reference boxes", width="800", height="350" %}
+</figure>
+
+Only one reference box can be used at a given time with a `shape-outside` declaration. Each reference box will influence the shape in a different and sometimes subtle way. There is another article which delves deeper and helps you [understand reference boxes for CSS Shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes).
+
+## The ellipse() function
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FarSgibjiuXojpuukfsX.png", alt="Illustration of ellipse() shape value", width="660", height="240" %}
+</figure>
+
+Ellipses look like squished circles. They are defined as `ellipse(rx ry at cx cy)`, where `rx` and `ry` are the radii for the ellipse on the X-axis and Y-axis, while `cx` and `cy` are the coordinates for the center of the ellipse.
+
+```css
+.element{
+  shape-outside: ellipse(150px 300px at 50% 50%);
+  width: 300px;
+  height: 600px;
+}
+```
+
+Percentage values will be computed from the dimensions of the coordinate system. No funny maths required here. You can omit the coordinates for the ellipse center and they will be inferred from the center of the coordinate system.
+
+Radii on the X and Y axes may also be defined with keywords: `farthest-side` yields a radius equal to the distance between the ellipse center and the side of the reference box farthest away from it, while `closest-side` means the exact opposite - use the shortest distance between the center and a side.
+
+```css
+.element{
+  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
+  /* identical to: */
+  shape-outside: ellipse(150px 300px at 50% 50%);
+  width: 300px;
+  height: 600px;
+}
+```
+
+This may come in handy when the element's dimensions (or the reference box) may change in unpredictable ways, but you want the ellipse shape to adapt.
+
+The same `farthest-side` and `closest-side` keywords can also be used for the radius in the `circle()` shape function.
+
+## The polygon() function
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nXbsN26mVG6KDsuGEf5u.jpg", alt="Illustration of polygon() shape value", width="660", height="480" %}
+</figure>
+
+If circles and ellipses are too limiting, the polygon shape function opens up a world of options. The format is `polygon(x1 y1, x2 y2, ...)` where you specify pairs of x y coordinates for each vertex (point) of a polygon. The minimum number of pairs to specify a polygon is three, a triangle.
+
+```css
+.element{
+  shape-outside: polygon(0 0, 0 300px, 300px 600px);
+  width: 300px;
+  height: 600px;
+}
+```
+
+Vertices are placed on the coordinate system. For responsive polygons you can use percentage values for some or all of the coordinates.
+
+```css
+.element{
+  /* polygon responsive to font-size*/
+  shape-outside: polygon(0 0, 0 100%, 100% 100%);
+  width: 20em;
+  height: 40em;
+}
+```
+
+There is an optional `fill-rule` parameter, [imported from SVG](http://www.w3.org/TR/SVG/painting.html#FillRuleProperty), which instructs the browser how to consider the “insideness” of a polygon in case of self-intersecting paths or enclosed shapes. Joni Trythall explains very well [how the fill-rule property works](http://www.sitepoint.com/understanding-svg-fill-rule-property/) in SVG. If not defined, the `fill-rule` defaults to `nonzero`.
+
+```css
+.element{
+  shape-outside: polygon(0 0, 0 100%, 100% 100%);
+  /* identical to: */
+  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
+}
+```
+
+## The inset() function
+
+The `inset()` shape function allows you create rectangular shapes around which to wrap content. This might sound counter-intuitive considering the initial premise that CSS Shapes free web content from simple boxes. It may very well be. I have yet to find a use case for `inset()` which isn't already achievable with floats and margins or with a `polygon()`. Though `inset()` does provide a more readable expression for rectangular shapes than `polygon()`.
+
+The full notation for an inset shape function is `inset(top right bottom left border-radius)`. The first four position arguments are offsets inwards from the element's edges. The last argument is the border radius for the rectangular shape. It is optional, so you can leave it out. It follows the `border-radius` shorthand notation you already use in CSS.
+
+```css
+.element{
+  shape-outside: inset(100px 100px 100px 100px);
+  /* yields a rectangular shape which is 100px inset on all sides */
+  float: left;
+}
+```
+
+## Creating shapes from reference-boxes
+
+If you don't specify a shape function to the `shape-outside` property, you can allow the browser to derive a shape from the element's reference box. The default reference box is `margin-box`. Nothing exotic so far, that's how floats already work. But applying this technique, you can reuse the geometry of an element. Let's look at the `border-radius` property.
+
+If you use it to round the corners of a floated element, you get the clipping effect, but the float area remains rectangular. Add `shape-outside: border-box` to wrap around the contour created by the `border-radius`.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YWeagoH1SuHlaw52AVjX.png", alt="Extracting a shape from an element's border-radius using the border-box reference box", width="660", height="390" %}
+</figure>
+
+```css
+.element{
+  border-radius: 50%;
+  shape-outside: border-box;
+  float: left;
+}
+```
+
+Of course, you can use all the reference boxes in this manner. Here's another use for derived shapes - offset pull-quotes.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/24DvVC5KcEqNwhtstFS5.png", alt="Creating an offset pull-quote using the content-box reference box", width="660", height="380" %}
+</figure>
+
+It is possible to achieve the offset pull-quote effect by using only float and margin properties. But that requires you to position the quote element in the HTML tree at the point you want it to render.
+
+Here's how to achieve the same offset pull-quote effect with added flexibility:
+
+```css
+.pull-quote{
+  shape-outside: content-box;
+  margin-top: 200px;
+  float: left;
+}
+```
+
+We explicitly set the `content-box` reference box for the shape's coordinate system. In this case, the amount of content in the pull-quote defines the shape around which outside content will wrap. The `margin-top` property is used here to position (offset) the pull-quote, regardless of its position in the HTML tree.
+
+## Shape margin
+
+You'll notice that wrapping content around a shape can make it rub too closely against the element. You can add spacing around the shape with the `shape-margin` property.
+
+```css
+.element{
+  shape-outside: circle(40%);
+  shape-margin: 1em;
+  float: left;
+}
+```
+
+The effect is similar to what you're used to from using the regular `margin` property, but the `shape-margin` affects only the space around `shape-outside` value. It will add spacing around the shape only if there is room for it in the coordinate system. That's why in the example above the circle radius is set to 40%, not 50%. If the radius was set to 50%, the circle would have taken up all the space in the coordinate system leaving no room for the effect of `shape-margin`. Remember, the shape is ultimately constrained to the element’s `margin-box` (the element plus its surrounding `margin`). If the shape is larger and overflows, it will be clipped to the `margin-box` and you will end up with a rectangular shape.
+
+It's important to understand that `shape-margin` accepts only a single positive value. It does not have a long-hand notation. What is a shape-margin-top for a circle, anyway?
+
+## Animating shapes
+
+You can mix CSS shapes with many other CSS features, such as transitions and animations. Though, I must stress that users find it very annoying when text layout changes while they're reading. Pay close attention to the experience if you do decide in favor of animating shapes.
+
+You can animate the radii and centers for `circle()` and `ellipse()` shapes as long as they're defined in values that the browser can interpolate. Going from `circle(30%)` to `circle(50%)` is possible. However, animating between `circle(closest-side)` to `circle(farthest-side)` will choke the browser.
+
+```css
+.element{
+  shape-outside: circle(30%);
+  transition: shape-outside 1s;
+  float: left;
+}
+
+.element:hover{
+  shape-outside: circle(50%);
+}
+```
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9u9cOCEXbNZxmi0lwnTg.gif", alt="GIF of animated circle", width="660", height="220" %}
+</figure>
+
+More interesting effects can be achieved when animating `polygon()` shapes, with the important note that the polygon must have the same number of vertices between the two animation states. The browser can't interpolate if you add or remove vertices.
+
+One trick is to add the maximum amount of vertices you need and position them clustered together in the animation state where you want fewer perceived edges to the shape.
+
+```css
+.element{
+  /* four vertices (looks like rectangle) */
+  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  transition: shape-outside 1s;
+}
+
+.element:hover{
+  /* four vertices, but second and third overlap (looks like triangle) */
+  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/R7mVYgZXuzOpG6TqoJY5.gif", alt="GIF of animated triangle", width="660", height="220" %}
+</figure>
+
+## Wrapping content inside a shape
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QeB4NkU6zfkEM8MjdVkC.jpg", alt="Screenshot of Alice in Wonderland demo using CSS Shapes to wrap content", width="660", height="447" %}
+</figure>
+
+The initial draft of the CSS Shapes specification included a `shape-inside` property which allowed you to wrap content inside of a shape. There were even implementations in Chrome and Webkit for a while. But wrapping arbitrarily-positioned content inside a custom path requires much more effort and research to cover all possible scenarios and avoid bugs. That's why the `shape-inside` property has been deferred to [CSS Shapes Level 2](http://dev.w3.org/csswg/css-shapes-2/) and implementations for it have been withdrawn.
+
+However, with some effort and a bit of compromise, you can still achieve the effect of wrapping content inside a custom shape. The hack is to use two floated elements with `shape-outside`, positioned at opposite sides of a container. The compromise is that you have to use one or two empty elements which have no semantic meaning, but serve as the struts to create the illusion of a shape inside.
+
+```html
+<div>
+  <div class='left-shape'></div>
+  <div class='right-shape'></div>
+
+  Lorem ipsum...
+</div>
+```
+
+The position of the `.left-shape` and `.right-shape` strut elements at the top of the container is important because they will be floated to the left and to right in order to flank the content.
+
+```css
+.left-shape{
+  shape-outside: polygon(0 0, ...);
+  float: left;
+  width: 50%;
+  height: 100%;
+}
+
+.right-shape{
+  shape-outside: polygon(50% 0, ...);
+  float: right;
+  width: 50%;
+  height: 100%;
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fvFledoh6z5Z4lGVmAKY.jpg", alt="Illustration of workaround for shape-inside for Alice demo", width="660", height="447" %}
+</figure>
+
+This styling makes the two floated struts take up all the space within the element, but the `shape-outside` properties carve out space for the rest of the content.
+
+If CSS Shapes are not supported by the browser, this will yield ugly effects by pushing all of the content down. That's why it's important to use the feature in a progressively enhanced manner.
+
+In the earlier shape animation examples, you'll notice that text shifting around can be bothersome. Not all use cases warrant an animated shape. But you can animate other properties which interact with CSS Shapes to add effect where it makes sense.
+
+In the [Alice in Wonderland](http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland) demonstration of CSS Shapes, we used the scroll position to change the top margin of the content. The text is squeezed between two floated elements. As it moves down, it has to relayout according to the `shape-outside` of the two floated elements. This gives the impression that the text is going down the rabbit hole and it adds to the storytelling experience. Borderline gratuitous? Maybe. But it does look cool.
+
+Because the text layout is done natively by the browser, the performance is better than using a JavaScript solution. But changing the margin-top on scroll does trigger lots of relayout and paint events, and that may noticeably reduce performance. Use with caution! However, using CSS Shapes without animating them does not come with a perceivable performance hit.
+
+## Progressive enhancement
+
+Start off by assuming that the browser does not have CSS Shapes support and build up on that when you do detect the feature. [Modernizr](http://modernizr.com/) is a good solution to do feature detection and there is a test for CSS Shapes in the ['Non-core detects'](http://modernizr.com/download/#-css_shapes) section.
+
+Some browsers provide feature detection in CSS via the `@supports` rule without the need for external libraries. Google Chrome, which also supports CSS Shapes, understands the `@supports` rule. This is how you use it to progressively enhance:
+
+```css
+.element{
+  /* styles for all browsers */
+}
+
+@supports (shape-outside: circle(50%)){
+  /* styles only for browsers which support CSS Shapes */
+  .element{
+    shape-outside: circle(50%);
+  }
+}
+```
+
+[Lea Verou](https://twitter.com/leaverou) has written more about [how to use the CSS @supports rule](http://www.creativebloq.com/css3/how-use-supports-rule-your-css-11410545).
+
+## Disambiguation from CSS Exclusions
+
+What we know today as CSS Shapes used to be called CSS Exclusions and Shapes in the early days of the spec. The switch in naming might seem as a nuance, but it is actually very important. [CSS Exclusions](http://dev.w3.org/csswg/css-exclusions/), now a separate spec, enables wrapping content around elements positioned arbitrarily, without the need for a float property. Imagine wrapping content around an absolutely-positioned element; that's a use case for CSS Exclusions. CSS Shapes just define the path around which the content will wrap.
+
+So, shapes and exclusions are not the same thing, but they do complement each other. CSS Shapes are available in browsers today, while CSS Exclusions are not yet implemented with shapes interaction.
+
+## Tools for working with CSS Shapes
+
+You can create paths in classic image authoring tools, but none of them, at the time of this writing, exports the required syntax for CSS Shapes values. Even if they did, working like that wouldn't be too practical.
+
+CSS Shapes are meant to be used in the browser, where they react to other elements on the page. It's very useful to visualize the effects of editing the shape on the content which surrounds it. There are a few tools to help you with this workflow:
+
+**Brackets**: The [CSS Shapes Editor extension for Brackets](http://blog.brackets.io/2014/04/17/css-shapes-editor/) uses the code editor's live preview mode to overlay an interactive editor for editing shape values.
+
+**Google Chrome**: The [CSS Shapes Editor extension for Google Chrome](https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp) extends the browser's Developer Tools with controls to create and edit shapes. It places an interactive editor on top of the selected element.
+
+The inspector in Google Chrome has built-in support for highlighting shapes. Hover over an element with a `shape-outside` property and it will light up to illustrate the shape.
+
+**Shapes from images**: If you prefer to generate images and have the browser extract shapes from them, Rebecca Hauck has written a good [tutorial for Photoshop](http://blogs.adobe.com/webplatform/2014/03/11/add-shape-and-depth-to-your-layout-with-photoshop-and-css-shapes/).
+
+**Polyfill**: Google Chrome is the first major browser to ship CSS Shapes. There is upcoming support for the feature on Apple's iOS 8 and Safari 8. Other browser vendors may consider it in the future. Until then, there is a [CSS Shapes polyfill](https://github.com/adobe-webplatform/css-shapes-polyfill) to provide basic support.
+
+## Conclusion
+
+In a web where content is mostly trapped in simple boxes, CSS Shapes provide a way to create expressive layout, bridging the fidelity gap between web and print design. Of course, shapes can be abused and create distractions. But, when applied with taste and good judgement, shapes can enhance the content presentation and focus the user’s attention in a way which is unique to them.
+
+I leave you with a [collection of work](https://www.behance.net/collection/25035325/Shapes) by others, mostly from print, which demonstrates interesting uses for non-rectagular layout. I hope this inspires you to try CSS Shapes and experiment with new design ideas.
+
+Many thanks to Pearl Chen, Alan Stearns and Zoltan Horvath for reviewing this article and providing valuable insight.
+
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content0.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content0.png
deleted file mode 100644
index b4434ad5a5b..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content0.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content1.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content1.png
deleted file mode 100644
index 5c48cdf313c..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content1.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content2.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content2.png
deleted file mode 100644
index 4c6159d30a8..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content2.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content3.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content3.png
deleted file mode 100644
index 6024173c2f9..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content3.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content4.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content4.png
deleted file mode 100644
index 5245127a54a..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content4.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content5.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content5.png
deleted file mode 100644
index a2e35f800c9..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content5.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content6.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content6.png
deleted file mode 100644
index 1a3fea5d225..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/dev-content6.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/hero.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/hero.png
deleted file mode 100644
index 31be8b9ee01..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/index.md b/src/site/content/en/blog/shopping-for-speed-on-ebay/index.md
index 30bbd2aca6b..2540b611aba 100644
--- a/src/site/content/en/blog/shopping-for-speed-on-ebay/index.md
+++ b/src/site/content/en/blog/shopping-for-speed-on-ebay/index.md
@@ -1,11 +1,13 @@
 ---
+layout: post
 title: Shopping for speed on eBay.com
 subhead: Optimizing the performance of eBay's sites and apps for a faster user experience.
 authors:
   - addyosmani
 date: 2020-01-22
-hero: hero.png
-thumbnail: thumbnail.png
+updated: 2022-07-18
+hero: image/admin/UMFt6kc3YZIaF2Qzqd0d.png
+thumbnail: image/admin/58uctmJLRxZK0KKV2igl.png
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -16,8 +18,8 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - case-study
-  - reliable
-  - e-commerce
+  # - reliable
+  # - e-commerce
   - test-post
   - performance
 ---
@@ -26,38 +28,36 @@ Speed was a [company-wide initiative][cuts] for eBay in 2019, with many teams de
 site and apps as fast as possible for users. In fact, **for every 100 milliseconds improvement in
 search page loading time, eBay saw a 0.5% increase in "Add to Cart" count.**
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">100<sub class="w-stat__sub">ms</sub></p>
-    <p class="w-stat__desc">Improvement in load time</p>
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">100<sub>ms</sub></p>
+    <p>Improvement in load time</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">0.5<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Increase in "Add to Cart" count</p>
+  <div class="stats__item">
+    <p class="stats__figure">0.5<sub>%</sub></p>
+    <p>Increase in "Add to Cart" count</p>
   </div>
 </div>
 
-Through the adoption of [Performance Budgets](https://web.dev/performance-budgets-101/) (derived
+Through the adoption of [Performance Budgets](/performance-budgets-101/) (derived
 after doing a competitive study with the [Chrome User Experience
-Report](https://developers.google.com/web/tools/chrome-user-experience-report)) and a focus on key
+Report](https://developer.chrome.com/docs/crux/)) and a focus on key
 [user-centric performance metrics](/user-centric-performance-metrics/), eBay was able to make
 significant improvements to site speed.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content0.png"
-       alt="The optimization efforst led to a 10% improvement on the homepage, a 13% improvement on
-            the search page, and 3% improvement on item pages.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JXQCBQRuezhMQhfQShXq.png", alt="The optimization efforst led to a 10% improvement on the homepage, a 13% improvement on the search page, and 3% improvement on item pages.", width="800", height="186" %}
+  <figcaption>
     eBay's speed improvements.
   </figcaption>
 </figure>
 
 …and their Chrome User Experience Report data highlights these improvements, too.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content1.png" alt="Screenshots of PageSpeed Insights view of Chrome User Experience Report data highlighting fast FCP of 70% and fast FID of 88% for eBay.com">
-  <figcaption class="w-figcaption">
-    Chrome User Experience Report data for <a href="https://web.dev/fcp/">First Contentful Paint</a> and <a href="https://web.dev/fid/">First Input Delay</a> for the eBay.com origin.
+<figure>
+  {% Img src="image/admin/YeJPjxdDBrdbgLxcbl7E.png", alt="Screenshots of PageSpeed Insights view of Chrome User Experience Report data highlighting fast FCP of 70% and fast FID of 88% for eBay.com", width="800", height="237" %}
+  <figcaption>
+    Chrome User Experience Report data for <a href="/fcp/">First Contentful Paint</a> and <a href="/fid/">First Input Delay</a> for the eBay.com origin.
   </figcaption>
 </figure>
 
@@ -72,7 +72,7 @@ the web developer community at large, rather than eBay-specific topics.
 ## Reduce payload across all text resources
 
 One way to make sites fast is to simply load less code. eBay reduced their text payloads by trimming
-all the [unused and unnecessary bytes](https://web.dev/remove-unused-code/) of JavaScript, CSS,
+all the [unused and unnecessary bytes](/remove-unused-code/) of JavaScript, CSS,
 HTML, and JSON responses served to users. Previously, with every new feature, eBay kept increasing
 the payload of their responses, without cleaning up what was unused. This added up over time and
 became a performance bottleneck. Teams usually procrastinated on this cleanup activity, but you'd
@@ -83,11 +83,11 @@ The "cut" here is the wasted bytes in the response payload.
 ## Critical path optimization for above-the-fold content
 
 Not every pixel on the screen is equally important. The content [above-the-fold][atf] is [more
-critical](https://web.dev/extract-critical-css/) than something below-the-fold. Native and web apps
+critical](/extract-critical-css/) than something below-the-fold. iOS/Android/desktop and web apps
 are aware of this, but what about services? eBay's service architecture has a layer called
 [Experience
 Services](https://tech.ebayinc.com/engineering/experience-services-ebays-solution-to-multi-screen-application-development/),
-which the frontends (native apps and web servers) talk to.
+which the frontends (platform-specific apps and web servers) talk to.
 This layer is specifically designed to be view- or device-based, rather than entity-based like item,
 user, or order. eBay then introduced the concept of the critical path for Experience Services.
 When a request comes to these services, they work on getting the data for above-the-fold
@@ -105,14 +105,14 @@ Images are [one of the largest contributors to page
 bloat](https://almanac.httparchive.org/en/2019/media). Even
 small optimizations go a long way. eBay did two optimizations for images.
 
-First, eBay standardized on the [WebP image format](https://web.dev/serve-images-webp/) for search
+First, eBay standardized on the [WebP image format](/serve-images-webp/) for search
 results across all platforms, including iOS, Android, and [supported browsers][webp]. The search
 results page is the most image-heavy page at eBay, and they were already using WebP, but not in a
 consistent pattern.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content2.png" alt="Screenshots of the DevTools network panel filtered to show WebP image requests from eBay.com">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/wxY64wQbCvgdEuI8DlUY.png", alt="Screenshots of the DevTools network panel filtered to show WebP image requests from eBay.com", width="800", height="506" %}
+  <figcaption>
     WebP images being served to supported browsers on eBay.com.
   </figcaption>
 </figure>
@@ -127,15 +127,12 @@ The "cut" here is the wasted image bytes sent to users.
 
 ## Predictive prefetch of static assets
 
-A user session on eBay is not just one page. It is a flow. For example, the flow can be a navigation from the homepage to a search page to an item page. So why don't pages in the flow help each other? That is the idea of [predictive prefetch](https://web.dev/predictive-prefetching/), where one page prefetches the static assets required for the next likely page.
+A user session on eBay is not just one page. It is a flow. For example, the flow can be a navigation from the homepage to a search page to an item page. So why don't pages in the flow help each other? That is the idea of [predictive prefetch](/predictive-prefetching/), where one page prefetches the static assets required for the next likely page.
 
 With predictive prefetch, when a user navigates to the predicted page, the assets are already in the browser cache. This is done for CSS and JavaScript assets, where the URLs can be retrieved ahead of time. One thing to note here is that it helps only on first-time navigations. On subsequent navigations, the static assets will already be in the cache.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content3.png"
-       alt="eBay is doing predictive prefetching of static assets. Home prefetches assets for
-            Search, Search prefetches assets for Item, and so on. Machine-learning- and analytics-based
-            prefetching is under consideration." loading="lazy">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcipECBEv200bO8CWkrs.png", alt="eBay is doing predictive prefetching of static assets. Home prefetches assets for Search, Search prefetches assets for Item, and so on. Machine-learning- and analytics-based prefetching is under consideration.", width="800", height="448" %}
 </figure>
 
 The "cut" here is the network time for CSS and JavaScript static assets on the first navigation.
@@ -148,7 +145,7 @@ items from search and keeps them ready for when the user navigates. The prefetch
 
 The first level happens server-side, where the item service caches the top 10 items in search results. When the user
 goes to one of those items, eBay now saves server processing time. Server-side caching is leveraged by
-native apps and is rolled out globally.
+platform-specific apps and is rolled out globally.
 
 The other level happens in the browser cache, which is available
 in Australia. Item prefetch was an advanced optimization due to the dynamic nature of items. There
@@ -157,12 +154,8 @@ about it in [LinkedIn's Performance Engineering Meetup
 presentation](https://www.youtube.com/watch?v=ogEhUnQdQiU&t=984s), or stay tuned for a detailed blog
 post on the topic from eBay's engineers.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content4.png"
-       alt="eBay prefetches the top 5 items in search result pages for fast subsequent loads.
-            This happens during idle time with requestIdleCallback(). This resulted in a 759ms
-            faster median above-the-fold time, a custom metric that is similar to First Meaningful
-            Paint. eBay saw a positive impact on conversions from prefetching.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6wW7yHAD7vMBDUDCzm2B.png", alt="eBay prefetches the top 5 items in search result pages for fast subsequent loads. This happens during idle time with requestIdleCallback(). This resulted in a 759ms faster median above-the-fold time, a custom metric that is similar to First Meaningful Paint. eBay saw a positive impact on conversions from prefetching.", width="800", height="451" %}
 </figure>
 
 The "cut" here can either be server processing time or network time,
@@ -179,17 +172,15 @@ The "cut" here is the download start time for search result images.
 
 When users type in letters in the search box, suggestions pop-up. These suggestions do not change for letter combinations for at least a day. They are ideal candidates to be cached and served from a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) (for a max of 24 hours), instead of requests going all the way to a data center. International markets especially benefit from CDN caching.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content5.png"
-       alt="A screenshot of eBay's search box displaying autocomplete suggestions for a search
-            query." loading="lazy">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5HVWuq5nIvQ6aCoaltIl.png", alt="A screenshot of eBay's search box displaying autocomplete suggestions for a search query.", width="800", height="417" %}
 </figure>
 
 There was a catch, though. eBay had some elements of personalization in the suggestions pop-up,
-which can't be cached efficiently. Fortunately, it was not an issue in the native apps, as the user
+which can't be cached efficiently. Fortunately, it was not an issue in the platform-specific apps, as the user
 interface for personalization and suggestions could be separated. For the web, in international
 markets, latency was more important than the small benefit of personalization. With that out of the
-way, eBay now has autosuggestions served from a CDN cache globally for native apps and non-US
+way, eBay now has autosuggestions served from a CDN cache globally for platform-specific apps and non-US
 markets for eBay.com.
 
 The "cut" here is the network latency and server processing time for
@@ -205,30 +196,30 @@ The "cut" here is again both network latency and server processing time for unre
 
 ## Optimizations for other platforms
 
-### Native app parsing improvements
+### iOS/Android app parsing improvements
 
-Native apps (iOS and Android) talk to backend services whose response format is typically JSON. These JSON payloads can be large. Instead of parsing the whole JSON to render something on the screen, eBay introduced an efficient parsing algorithm that optimizes for content that needs to be displayed immediately.
+iOS/Android apps talk to backend services whose response format is typically JSON. These JSON payloads can be large. Instead of parsing the whole JSON to render something on the screen, eBay introduced an efficient parsing algorithm that optimizes for content that needs to be displayed immediately.
 
 Users can now see the content quicker. In addition, for the Android app, eBay starts initializing the search view controllers as soon as the user starts typing in the search box (iOS already had this optimization). Previously this happened only after users pressed the search button. Now users can get to their search results faster. The "cut" here is the time spent by devices to display relevant content.
 
-### Native app startup time improvements
+### Android app startup time improvements
 
-This applies to [cold start](https://developer.android.com/topic/performance/vitals/launch-time#cold) time optimizations for native apps, in particular, Android. When an app is cold started, a lot of initialization happens both at the OS level and application level. Reducing the initialization time at the application level helps users see the home screen quicker. eBay did some profiling and noticed that not all initializations are required to display content and that some can be done lazily.
+This applies to [cold start](https://developer.android.com/topic/performance/vitals/launch-time#cold) time optimizations for Android apps. When an app is cold started, a lot of initialization happens both at the OS level and application level. Reducing the initialization time at the application level helps users see the home screen quicker. eBay did some profiling and noticed that not all initializations are required to display content and that some can be done lazily.
 
-More importantly, eBay observed that there was a blocking third-party analytics call that delayed the rendering on the screen. Removing the blocking call and making it async further helped cold start times. The "cut" here is the unnecessary startup time for native apps.
+More importantly, eBay observed that there was a blocking third-party analytics call that delayed the rendering on the screen. Removing the blocking call and making it async further helped cold start times. The "cut" here is the unnecessary startup time for Android apps.
 
 ## Conclusions
 
 All the performance "cuts" eBay made collectively contributed towards moving the needle, and it happened over a period of time. The releases were phased in throughout the year, with each release shaving off tens of milliseconds, ultimately reaching the point where eBay is now:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="dev-content6.png" alt="Screenshots of Chrome UX Report showing field data improvements for eBay.com." loading="lazy">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/GxKfB8GHUd9cQWLb0Pkj.png", alt="Screenshots of Chrome UX Report showing field data improvements for eBay.com.", width="800", height="529" %}
+  <figcaption>
     The impact of eBay's speed efforts on their field metrics over time, as illustrated by the <a href="https://g.co/chromeuxdash">Chrome UX Report Dashboard</a>.
   </figcaption>
 </figure>
 
-Performance is a feature and a [competitive advantage](https://web.dev/value-of-speed/). Optimized experiences lead to higher user engagement, conversions, and ROI. In eBay's case, these optimizations varied from things that were low-effort to a few that were advanced.
+Performance is a feature and a [competitive advantage](/value-of-speed/). Optimized experiences lead to higher user engagement, conversions, and ROI. In eBay's case, these optimizations varied from things that were low-effort to a few that were advanced.
 
 Check out [Speed by a thousand cuts][cuts] to learn more and be on the lookout for more detailed articles by eBay engineers on their performance work in the near future.
 
diff --git a/src/site/content/en/blog/shopping-for-speed-on-ebay/thumbnail.png b/src/site/content/en/blog/shopping-for-speed-on-ebay/thumbnail.png
deleted file mode 100644
index 946910d3117..00000000000
Binary files a/src/site/content/en/blog/shopping-for-speed-on-ebay/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin-mobile.png b/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin-mobile.png
deleted file mode 100644
index 201f11f4003..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin-mobile.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin.png b/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin.png
deleted file mode 100644
index dd3a7632774..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/amazon-signin.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/autofocus.png b/src/site/content/en/blog/sign-in-form-best-practices/autofocus.png
deleted file mode 100644
index fb03674c5af..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/autofocus.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/chrome-signin-desktop.png b/src/site/content/en/blog/sign-in-form-best-practices/chrome-signin-desktop.png
deleted file mode 100644
index 159e1f191e7..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/chrome-signin-desktop.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/firefox-password-manager.png b/src/site/content/en/blog/sign-in-form-best-practices/firefox-password-manager.png
deleted file mode 100644
index 76b478844e2..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/firefox-password-manager.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/hero.jpg b/src/site/content/en/blog/sign-in-form-best-practices/hero.jpg
deleted file mode 100644
index d79c41460ba..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/index.md b/src/site/content/en/blog/sign-in-form-best-practices/index.md
deleted file mode 100644
index 2564ad7eccc..00000000000
--- a/src/site/content/en/blog/sign-in-form-best-practices/index.md
+++ /dev/null
@@ -1,742 +0,0 @@
----
-title: Sign-in form best practices
-subhead: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
-authors:
-  - samdutton
-scheduled: true
-date: 2020-06-29
-updated: 2020-08-05
-description: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
-hero: hero.jpg
-alt: A person holding a phone.
-tags:
-  - blog
-  - forms
-  - identity
-  - layout
-  - mobile
-  - security
-  - ux
-codelabs:
-  - codelab-sign-in-form-best-practices
----
-
-
-If users ever need to log in to your site, then good sign-in form design is
-critical. This is especially true for people on poor connections, on mobile, in
-a hurry, or under stress. Poorly designed sign-in forms get high bounce rates.
-Each bounce could mean a lost and disgruntled user—not just a missed sign-in
-opportunity.
-
-{% Aside 'codelab' %}
-  If you would prefer to learn these best practices with a hands-on tutorial,
-  check out the [Sign-in form best practices codelab](/codelab-sign-in-form-best-practices/).
-{% endAside %}
-
-Here is an example of a simple sign-in form that demonstrates all of the best practices:
-
-{% Glitch {
-  id: 'sign-in-form',
-  path: 'index.html',
-  height: 480
-} %}
-
-## Checklist
-
-* [Use meaningful HTML elements](#meaningful-html): `<form>`, `<input>`,
-  `<label>`, and `<button>`.
-* [Label each input with a `<label>`](#label).
-* Use element attributes to [access built-in browser
-  features](#element-attributes): `type`, `name`, `autocomplete`, `required`,
-  `autofocus`.
-* Give input `name` and `id` attributes stable values that don't change 
-between page loads or website deployments.
-* Put sign-in [in its own &lt;form&gt; element](#single-form). 
-* [Ensure successful form submission](#submission).
-* Use [`autocomplete="new-password"`](#new-password) for the password input
-  in a sign-up form, and for the new password in a reset-password form.
-* Use [`autocomplete="current-password"`](#current-password) for a sign-in
-  password input.
-* Provide [Show password](#show-password) functionality.
-* [Use `aria-label` and `aria-describedby`](#accessible-password-inputs) for
-  password inputs.
-* [Don't double-up inputs](#no-double-inputs).
-* Design forms so the [mobile keyboard doesn't obscure inputs or
-  buttons](#keyboard-obstruction).
-* Ensure forms are usable on mobile: use [legible text](#size-text-correctly),
-  and make sure inputs and buttons are [large enough to work as touch targets](#tap-targets).
-* [Maintain branding and style](#branding) on your sign-up and sign-in pages.
-* [Test in the field as well as the lab](#analytics): build page analytics,
-  interaction analytics, and user-centric performance measurement into your
-  sign-up and sign-in flow.
-* [Test across browsers and devices](#devices): form behaviour varies
-  significantly across platforms.
-
-{% Aside %}
-This article is about frontend best practices. It does not explain how to build
-backend services to authenticate users, store their credentials, or manage their
-accounts. [12 best practices for user account, authorization and password
-management](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)
-outlines core principles for running your own backend. If you have users in
-different parts of the world, you need to consider localizing your site's use of
-third-party identity services as well as its content.
-
-There are also two relatively new APIs not covered in this article which can 
-help you build a better sign-in experience: 
-*  [**Web OTP**](https://web.dev/web-otp/): to deliver one-time passcodes or 
-PIN numbers via SMS to mobile phones. This can allow users to select a phone 
-number as an identifier (no need to enter an email address!) and also enables 
-two-step verification for sign-in and one-time codes for payment confirmation.
-* [**Credential Management**](https://developers.google.com/web/updates/2016/04/credential-management-api): to enable developers to store and retrieve password credentials and federated credentials programmatically.
-{% endAside %}
-
-## Use meaningful HTML {: #meaningful-html }
-
-Use elements built for the job: `<form>`, `<label>` and `<button>`. These enable
-built-in browser functionality, improve accessibility, and add meaning to your
-markup.
-
-### Use `<form>` {: #form }
-
-You might be tempted to wrap inputs in a `<div>` and handle input data
-submission purely with JavaScript. It's generally better to use a plain old
-[`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
-element. This makes your site accessible to screenreaders and other assistive
-devices, enables a range of built-in browser features, makes it simpler to build
-basic functional sign-in for older browsers, and can still work even if
-JavaScript fails.
-
-{: #single-form }
-{% Aside 'gotchas' %} 
-A common mistake is to wrap a whole web page in a single form, but this is liable 
-to cause problems for browser password managers and autofill. Use a different 
-&lt;form&gt; for each UI component that needs a form. For example, if you have 
-sign-in and search on the same page, you should use two form elements.
-{% endAside %}
-
-### Use `<label>` {: #label }
-
-To label an input, use a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)!
-
-```html
-<label for="email">Email</label>
-<input id="email" …>
-```
-
-Two reasons:
-* A tap or click on a label moves focus to its input. Associate a label with an
-  input by using the label's `for` attribute with the input's `name` or `id`.
-* Screenreaders announce label text when the label or the label's input gets
-  focus.
-
-Don't use placeholders as input labels. People are liable to forget what the
-input was for once they've started entering text, especially if they get
-distracted ("Was I entering an email address, a phone number, or an account
-ID?"). There are lots of other potential problems with placeholders: see [Don't
-Use The Placeholder
-Attribute](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) and
-[Placeholders in Form Fields Are
-Harmful](https://www.nngroup.com/articles/form-design-placeholders/) if you're
-unconvinced.
-
-It's probably best to put your labels above your inputs. This enables consistent
-design across mobile and desktop and, according to [Google AI
-research](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html),
-enables quicker scanning by users. You get full width labels and inputs, and you
-don't need to adjust label and input width to fit the label text.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./label-position.png" alt="Screenshot showing form input label position on mobile: next to input and above input." width="500">
-  <figcaption class="w-figcaption">Label and input width is limited when both are on the same line.</figcaption>
-</figure>
-
-Open the [label-position](https://label-position.glitch.me) Glitch on a
-mobile device to see for yourself.
-
-### Use `<button>` {: #button }
-
-Use [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
-for buttons! Button elements provide accessible behaviour and built-in form
-submission functionality, and they can easily be styled. There's no point in
-using a `<div>` or some other element pretending to be a button. 
-
-Ensure that the submit button says what it does. Examples include **Create account** or 
-**Sign in**, not **Submit** or **Start**.
-
-### Ensure successful form submission {: #submission }
-
-Help password managers understand that a form has been submitted. There are two 
-ways to do that: 
-
-* Navigate to a different page.
-* Emulate navigation with `History.pushState()` or `History.replaceState()`, 
-and remove the password form.
-
-With an `XMLHttpRequest` or `fetch` request, make sure that sign-in success is 
-reported in the response and handled by taking the form out of the DOM as well 
-as indicating success to the user.
-
-Consider disabling the **Sign in** button once the user has tapped or clicked
-it. [Many users click buttons multiple times](https://baymard.com/blog/users-double-click-online) 
-even on sites that are fast and responsive. That slows down interactions and 
-adds to server load.
-
-Conversely, don't disable form submission awaiting user input. For example,
-don't disable the **Sign in** button if users haven't entered their customer
-PIN. Users may miss out something in the form, then try repeatedly tapping the
-(disabled) **Sign in** button and think it's not working. At the very least, if
-you must disable form submission, explain to the user what's missing when they
-click on the disabled button.
-
-{% Aside 'caution' %}
-The default type for a button in a form is `submit`. If you want to add another
-button in a form (for **Show password**, for example) add `type="button"`.
-Otherwise clicking or tapping on it will submit the form.
-{% endAside %}
-
-
-### Don't double up inputs {: #no-double-inputs }
-
-Some sites force users to enter emails or passwords twice. That might reduce
-errors for a few users, but causes extra work for *all* users, and [increases
-abandonment
-rates](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/). 
-Asking twice also makes no sense where browsers autofill email addresses or 
-suggest strong passwords. It's better to enable users to confirm their email 
-address (you'll need to do that anyway) and make it easy for them to reset their 
-password if necessary.
-
-## Make the most of element attributes {: #element-attributes }
-
-This is where the magic really happens!
-Browsers have multiple helpful built-in features that use input element attributes.
-
-### Help users start faster {: #autofocus }
-
-Add an `autofocus` attribute to the first input in your sign-in form. That makes
-it clear where to start and, on desktop at least, means users don't have to
-select the input to start typing.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./autofocus.png" alt="Screenshot showing form input with autofocus." width="500">
-  <figcaption class="w-figcaption">Autofocus provides clear visual focus on desktop.</figcaption>
-</figure>
-
-## Keep passwords private—but enable users to see them if they want {: #show-password }
-
-Passwords inputs should have `type="password"` to hide password text and help the 
-browser understand that the input is for passwords. (Note that browsers use 
-[a variety of techniques](#autofill) to understand input roles and decide 
-whether or not to offer to save passwords.)
-
-You should add a **Show password** icon or button to enable users to check the 
-text they've entered—and don't forget to add a **Forgot password** link. See 
-[Enable password display](#password-display).
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./show-password-google.png" alt="Google sign-in form showing Show password icon." width="300">
-  <figcaption class="w-figcaption">Password input from the Google sign-in form: with <strong>Show password</strong> icon and <strong>Forgot password</strong> link.</figcaption>
-</figure>
-
-## Give mobile users the right keyboard {: #mobile-keyboards }
-
-Use `<input type="email">` to give mobile users an appropriate keyboard and
-enable basic built-in email address validation by the browser… no JavaScript
-required!
-
-If you need to use a telephone number instead of an email address, `<input
-type="tel">` enables a telephone keypad on mobile. You can also use the
-`inputmode` attribute where necessary: `inputmode="numeric"` is ideal for PIN
-numbers. [Everything You Ever Wanted to Know About
-inputmode](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)
-has more detail.
-
-{% Aside 'caution' %}
-`type="number"` adds an up/down arrow to increment numbers, so don't use it for
-numbers that aren't meant to be incremented, such as IDs and account numbers.
-{% endAside %}
-
-### Prevent mobile keyboard from obstructing the **Sign in** button {: #keyboard-obstruction }
-
-Unfortunately, if you're not careful, mobile keyboards may cover your form or,
-worse, partially obstruct the **Sign in** button. Users may give up before
-realizing what has happened.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./keyboard-not-ok.png" alt="Two screenshots of a sign-in form on an Android phone: one showing how the Submit button is obscured by the phone keyboard." width="400">
-  <figcaption class="w-figcaption">The <b>Sign in</b> button: now you see it, now you don't.</figcaption>
-</figure>
-
-Where possible, avoid this by displaying only the email/phone and password inputs and **Sign in** button at the top of your sign-in page. Put other content below.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./keyboard-ok.png" alt="Screenshot of a sign-in form on an Android phone: the Sign in button is not obscured by the phone keyboard." width="200">
-  <figcaption class="w-figcaption">The keyboard doesn't obstruct the <b>Sign in</b> button.</figcaption>
-</figure>
-
-#### Test on a range of devices {: #devices }
-
-You'll need to test on a range of devices for your target audience, and adjust
-accordingly. BrowserStack enables [free testing for open source
-projects](https://www.browserstack.com/open-source) on a range of real devices
-and browsers.
-
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./iphone-keyboard.png" alt="Screenshots of a sign-in form on iPhone 7, 8 and 11. On iPhone 7 and 8 the Sign in button is obscured by the phone keyboard, but not on iPhone 11">
-  <figcaption class="w-figcaption">The <b>Sign in</b> button: obscured on iPhone 7 and 8, but not on iPhone 11.</figcaption>
-</figure>
-
-#### Consider using two pages {: #two-pages }
-
-Some sites (including Amazon and eBay) avoid the problem by asking for
-email/phone and password on two pages. This approach also simplifies the
-experience: the user is only tasked with one thing at a time.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./amazon-signin-mobile.png" alt="Screenshot of a sign-in form on the Amazon website: email/phone and password on two separate 'pages'." width="400">
-  <figcaption class="w-figcaption">Two-stage sign-in: email or phone, then password.</figcaption>
-</figure>
-
-Ideally, this should be implemented with a single &lt;form&gt;. Use JavaScript 
-to initially display only the email input, then hide it and show the password input. 
-If you must force the user to navigate to a new page between entering their email and 
-password, the form on the second page should have a hidden input element with the 
-email value, to help enable password managers to store the correct value. [Password 
-Form Styles that Chromium Understands](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands) 
-provides a code example.
-
-### Help users to avoid re-entering data {: #autofill }
-
-You can help browsers store data correctly and autofill inputs, so users don't 
-have to remember to enter email and password values. This is particularly important 
-on mobile, and crucial for email inputs, which get [high abandonment rates](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/).
-
-There are two parts to this:
-
-1. The `autocomplete`, `name`, `id`, and `type` attributes help browsers understand 
-the role of inputs in order to store data that can later be used for autofill. 
-To allow data to be stored for autofill, modern browsers also require inputs to 
-have a stable `name` or `id` value (not randomly generated on each page load or 
-site deployment), and to be in a &lt;form&gt; with a `submit` button. 
-
-1. The `autocomplete` attribute helps browsers correctly autofill inputs using 
-stored data. 
-
-For email inputs use `autocomplete="username"`, since `username` is recognized 
-by password managers in modern browsers—even though you should use `type="email"` 
-and you may want to use `id="email"` and `name="email"`.
-
-For password inputs, use the appropriate `autocomplete` value to help browsers 
-differentiate between new and current passwords. 
-
-### Use `autocomplete="new-password"` for a new password {: #new-password }
-
-* Use `autocomplete="new-password"` for the password input in a sign-up form, or the new
-  password in a change-password form. 
-
-### Use `autocomplete="current-password"` for an existing password {: #current-password }
-
-* Use `autocomplete="current-password"` for the password input in a sign-in form, or the
-  input for the user's old password in a change-password form. This tells the
-  browser that you want it to use the current password that it has stored for
-  the site. 
-
-For a sign-up form:
-
-```html
-<input type="password" autocomplete="new-password" …>
-```
-
-For sign-in:
-
-```html
-<input type="password" autocomplete="current-password" …>
-```
-
-### Support password managers {: #password-managers }
-
-Different browsers handle email autofill and password suggestion somewhat
-differently, but the effects are much the same. On Safari 11 and above on desktop,
-for example, the password manager is displayed, and then biometric
-authentication (fingerprint or facial recognition) is used if available.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./safari-signin-desktop.png" alt="Screenshots of three stages of sign-in process in Safari on desktop: password manager, biometric authentication, autofill.">
-  <figcaption class="w-figcaption">Sign-in with autocomplete—no text entry required!</figcaption>
-</figure>
-
-Chrome on desktop displays email suggestions, shows the password manager, and autofills the password.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./chrome-signin-desktop.png" alt="Screenshots of four stages of sign-in process in Chrome on desktop: email completion, email suggestion, password manager, autofill on selection.">
-  <figcaption class="w-figcaption">Autocomplete sign-in flow in Chrome 84.</figcaption>
-</figure>
-
-{% Aside 'caution' %}
-Browser password and autofill systems are not simple. The algorithms for
-guessing, storing and displaying values are not standardized, and vary from
-platform to platform. For example, as pointed out by [Hidde de
-Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form):
-"Firefox's password manager complements [its
-heuristics](https://dxr.mozilla.org/firefox/source/toolkit/components/passwordmgr/src/nsLoginManager.js#626)
-with a [recipe system](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)."
-{% endAside %}
-
-[Autofill: What web devs should know, but
-don't](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)
-has a lot more information about using `name` and `autocomplete`. The [HTML
-spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control)
-lists all 59 possible values.
-
-
-### Enable the browser to suggest a strong password {: #password-suggestions }
-
-Modern browsers use heuristics to decide when to show the password manager UI and 
-suggest a strong password.
-
-Here's how Safari does it on desktop.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./safari-password-suggestion.png" alt="Screenshot of Firefox password manager on desktop.">
-  <figcaption class="w-figcaption">Password suggestion flow in Safari.</figcaption>
-</figure>
-
-(Strong unique password suggestion has been available in Safari since version 12.0.)
-
-Built-in browser password generators mean users and developers don't need
-to work out what a "strong password" is. Since browsers can securely store
-passwords and autofill them as necessary, there's no need for users to remember
-or enter passwords. Encouraging users to take advantage of built-in browser 
-password generators also means they're more likely to use a unique, strong 
-password on your site, and less likely to reuse a password that could be
-compromised elsewhere.
-
-{% Aside %}
-The downside with this approach is that there's no way to share passwords across
-platforms. For example, a user may use Safari on their iPhone and Chrome on
-their Windows laptop.
-{% endAside %}
-
-
-### Help save users from accidentally missing inputs {: #required-fields }
-
-Add the `required` attribute to both email and password fields.
-Modern browsers automatically prompt and set focus for missing data. 
-No JavaScript required!
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./missing-field-firefox-android.png" alt="Screenshot of desktop Firefox and Chrome for Android showing 'Please fill out this field' prompt for missing data." width="600">
-  <figcaption class="w-figcaption">
-    Prompt and focus for missing data on Firefox for desktop (version 76) 
-    and Chrome for Android (version 83).
-  </figcaption>
-</figure>
-
-
-## Design for fingers and thumbs {: #mobile-design }
-
-
-The default browser size for just about everything relating to input elements
-and buttons is too small, especially on mobile. This may seem obvious, but it's
-a common problem with sign-in forms on many sites.
-
-### Make sure inputs and buttons are large enough {: #tap-targets }
-
-The default size and padding for inputs and buttons is too small on desktop and
-even worse on mobile.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./unstyled-form.png" 
-       alt="Screenshot of unstyled form in Chrome for desktop and Chrome for Android.">
-</figure>
-
-
-According to [Android accessibility
-guidance](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB)
-the recommended target size for touchscreen objects is 7–10 mm. Apple interface
-guidelines suggest 48x48 px, and the W3C suggest [at least 44x44 CSS
-pixels](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html). On that
-basis, add (at least) about 15 px of padding to input elements and buttons for
-mobile, and around 10 px on desktop. Try this out with a real mobile device and
-a real finger or thumb. You should comfortably be able to tap each of your
-inputs and buttons.
-
-The [Tap targets are not sized appropriately](https://web.dev/tap-targets/)
-Lighthouse audit can help you automate the process of detecting input elements
-that are too small.
-
-#### Design for thumbs {: #design-for-thumbs }
-
-Search for [touch target](https://www.google.com/search?q=touch+target) and
-you'll see lots of pictures of forefingers. However, in the real world, many
-people use their thumbs to interact with phones. Thumbs are bigger than
-forefingers, and control is less precise. All the more reason for adequately
-sized touch targets.
-
-### Make text big enough {: #size-text-correctly }
-
-As with size and padding, the default browser font size for input elements and
-buttons is too small, particularly on mobile.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./unstyled-form-text.png" alt="Screenshot of unstyled form in Chrome on desktop and on Android.">
-  <figcaption class="w-figcaption">Default styling on desktop and mobile: input text is too small to be legible for many users.</figcaption>
-</figure>
-
-Browsers on different platforms size fonts differently, so it's difficult to
-specify a particular font size that works well everywhere. A quick survey of
-popular websites shows sizes of 13–16 pixels on desktop: matching that physical size
-is a good minimum for text on mobile.
-
-This means you need to use a larger pixel size on mobile: `16px` on Chrome for
-desktop is quite legible, but even with good vision it's difficult to read `16px`
-text on Chrome for Android. You can set different font pixel sizes for different
-viewport sizes using [media
-queries](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size).
-`20px` is about right on mobile—but you should test this out with friends or
-colleagues who have low vision.
-
-The [Document doesn't use legible font sizes](https://web.dev/font-size/)
-Lighthouse audit can help you automate the process of detecting text that's too
-small.
-
-
-### Provide enough space between inputs {: #size-margins-correctly }
-
-Add enough margin to make inputs work well as touch targets. In other words, aim
-for about a finger width of margin.
-
-
-### Make sure your inputs are clearly visible {: #visible-inputs }
-
-The default border styling for inputs makes them hard to see. They're almost
-invisible on some platforms such as Chrome for Android.
-
-As well as padding, add a border: on a white background, a good general rule is
-to use `#ccc` or darker.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./styled-signin-form.png" alt="Screenshot of styled form in Chrome on Android." width="250">
-  <figcaption class="w-figcaption">Legible text, visible input borders, adequate padding and margins.</figcaption>
-</figure>
-
-
-### Use built-in browser features to warn of invalid input values {: #validation }
-
-Browsers have built-in features to do basic form validation for inputs with a
-`type` attribute. Browsers warn when you submit a form with an invalid value,
-and set focus on the problematic input.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./invalid-email.png" alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value." width="300">
-  <figcaption class="w-figcaption">Basic built-in validation by the browser.</figcaption>
-</figure>
-
-You can use the `:invalid` CSS selector to highlight invalid data. Use
-`:not(:placeholder-shown)` to avoid selecting inputs with no content. 
-
-```css
-input[type=email]:not(:placeholder-shown):invalid {
-  color: red;
-  outline-color: red;
-}
-```
-
-Try out different ways of highlighting inputs with invalid values.
-
-## Use JavaScript where necessary {: #javascript }
-
-### Toggle password display {: #password-display }
-
-You should add a **Show password** icon or button to enable users to check the
-text they've entered. [Usability
-suffers](https://www.nngroup.com/articles/stop-password-masking/) when users
-can't see the text they've entered. Currently there's no built-in way to do
-this, though [there are plans for
-implementation](https://twitter.com/sw12/status/1251191795377156099). You'll
-need to use JavaScript instead.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./show-password-google.png" alt="Google sign-in form showing Show password icon." width="350">
-  <figcaption class="w-figcaption">Google sign-in form: with <strong>Show password</strong> icon and <strong>Forgot password</strong> link.</figcaption>
-</figure>
-
-The following code uses a text button to add **Show password** functionality.
-
-HTML:
-
-```html/2
-<section>
-  <label for="password">Password</label>
-  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
-  <input id="password" name="password" type="password" autocomplete="current-password" required>
-</section>
-```
-
-Here's the CSS to make the button look like plain text:
-
-```css
-button#toggle-password {
-  background: none;
-  border: none;
-  cursor: pointer;
-  /* Media query isn't shown here. */
-  font-size: var(--mobile-font-size); 
-  font-weight: 300;
-  padding: 0;
-  /* Display at the top right of the container */
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-```
-
-And the JavaScript for showing the password:
-
-```js
-const passwordInput = document.getElementById('password');
-const togglePasswordButton = document.getElementById('toggle-password');
-
-togglePasswordButton.addEventListener('click', togglePassword);
-
-function togglePassword() {
-  if (passwordInput.type === 'password') {
-    passwordInput.type = 'text';
-    togglePasswordButton.textContent = 'Hide password';
-    togglePasswordButton.setAttribute('aria-label',
-      'Hide password.');
-  } else {
-    passwordInput.type = 'password';
-    togglePasswordButton.textContent = 'Show password';
-    togglePasswordButton.setAttribute('aria-label',
-      'Show password as plain text. ' +
-      'Warning: this will display your password on the screen.');
-  }
-}
-```
-
-Here's the end result:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./show-password.png" alt="Screenshots of sign-in form with Show password text 'button', in Safari on Mac and on iPhone 7." width="800" class="w-screenshot">
-  <figcaption class="w-figcaption">Sign-in form with <strong>Show password</strong> text 'button', in Safari on Mac and iPhone 7.</figcaption>
-</figure>
-
-
-### Make password inputs accessible {: #accessible-password-inputs }
-
-Use `aria-describedby` to outline password rules by giving it the ID of the 
-element that describes the constraints. Screenreaders provide the label text, the 
-input type (password), and then the description. 
-
-```html
-<input type="password" aria-describedby="password-constraints" …>
-<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
-```
-
-When you add **Show password** functionality, make sure to include
-an `aria-label` to warn that the password will be displayed. Otherwise users may
-inadvertently reveal passwords.
-
-```html/1-2
-<button id="toggle-password" 
-        aria-label="Show password as plain text. 
-                    Warning: this will display your password on the screen.">
-  Show password
-</button>
-```
-
-You can see both ARIA features in action in the following Glitch:
-
-{% Glitch {
-  id: 'signin-form',
-  path: 'index.html',
-  height: 480
-} %}
-
-[Creating Accessible Forms](https://webaim.org/techniques/forms/) has more tips to help make forms accessible.
-
-### Validate in realtime and before submission {: #validation }
-
-HTML form elements and attributes have built-in features for basic validation,
-but you should also use JavaScript to do more robust validation while users are
-entering data and when they attempt to submit the form. 
-
-{% Aside 'warning' %}
-Client-side validation helps users enter data and can avoid unnecessary server
-load, but you must always validate and sanitize data on your backend.
-{% endAside %}
-
-[Step 5](https://glitch.com/edit/#!/signin-form-codelab-5) of the sign-in form
-codelab uses the [Constraint Validation
-API](https://html.spec.whatwg.org/multipage/forms.html#constraints) (which is
-[widely supported](https://caniuse.com/#feat=constraint-validation)) to add
-custom validation using built-in browser UI to set focus and display prompts.
-
-Find out more: [Use JavaScript for more complex real-time
-validation](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
-
-
-### Analytics and RUM {: #analytics }
-
-"What you cannot measure, you cannot improve" is particularly true for sign-up
-and sign-in forms. You need to set goals, measure success, improve your site—and
-repeat.
-
-[Discount usability
-testing](https://www.nngroup.com/articles/discount-usability-20-years/) can be
-helpful for trying out changes, but you'll need real-world data to really
-understand how your users experience your sign-up and sign-in forms:
-
-* **Page analytics**: sign-up and sign-in page views, bounce rates,
-  and exits.
-* **Interaction analytics**: [goal
-  funnels](https://support.google.com/analytics/answer/6180923?hl=en) (where do
-  users abandon your sign-in or sign-in flow?) and
-  [events](https://developers.google.com/analytics/devguides/collection/gtagjs/events)
-  (what actions do users take when interacting with your forms?)
-* **Website performance**: [user-centric
-  metrics](/user-centric-performance-metrics) (are your sign-up and sign-in
-  forms slow for some reason and, if so, what is the cause?).
-
-You may also want to consider implementing A/B testing in order to try out
-different approaches to sign-up and sign-in, and staged rollouts to validate the
-changes on a subset of users before releasing changes to all users.
-
-## General guidelines {: #general-guidelines }
-
-Well designed UI and UX can reduce sign-in form abandonment:
-
-* Don't make users hunt for sign-in! Put a link to the sign-in form at the top
-  of the page, using well-understood wording such as **Sign In**, **Create Account**
-  or **Register**.
-* Keep it focused! Sign-up forms are not the place to distract people with
-  offers and other site features.
-* Minimize sign-up complexity. Collect other user data (such as addresses or
-  credit card details) only when users see a clear benefit from providing that
-  data.
-* Before users start on your sign-up form, make it clear what the value
-  proposition is. How do they benefit from signing in? Give users concrete
-  incentives to complete sign-up.
-* If possible allow users to identify themselves with a mobile phone number
-  instead of an email address, since some users may not use email.
-* Make it easy for users to reset their password, and make the **Forgot your
-  password?** link obvious.
-* Link to your terms of service and privacy policy documents: make it clear to
-  users from the start how you safeguard their data.
-* Include the logo and name of your company or organization on your signup and
-  sign-in pages, and make sure that language, fonts and styles match the rest of
-  your site. Some forms don't feel like they belong to the same site as other
-  content, especially if they have a significantly different URL.
-
-## Keep learning {: #resources }
-
-* [Create Amazing Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms)
-* [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
-* [More capable form controls](/more-capable-form-controls)
-* [Creating Accessible Forms](https://webaim.org/techniques/forms/)
-* [Streamlining the Sign-in Flow Using Credential Management API](https://developers.google.com/web/updates/2016/04/credential-management-api)
-* [Verify phone numbers on the web with the Web OTP API](https://web.dev/web-otp/)
-
-Photo by [Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU) on [Unsplash](https://unsplash.com).
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/invalid-email.png b/src/site/content/en/blog/sign-in-form-best-practices/invalid-email.png
deleted file mode 100644
index d2c6aa9d335..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/invalid-email.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/iphone-keyboard.png b/src/site/content/en/blog/sign-in-form-best-practices/iphone-keyboard.png
deleted file mode 100644
index f221c2f9d62..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/iphone-keyboard.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/keyboard-not-ok.png b/src/site/content/en/blog/sign-in-form-best-practices/keyboard-not-ok.png
deleted file mode 100644
index e13b947751a..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/keyboard-not-ok.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/keyboard-ok.png b/src/site/content/en/blog/sign-in-form-best-practices/keyboard-ok.png
deleted file mode 100644
index db65ab1a5b7..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/keyboard-ok.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/label-position.png b/src/site/content/en/blog/sign-in-form-best-practices/label-position.png
deleted file mode 100644
index 6434ebe9d05..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/label-position.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/missing-field-firefox-android.png b/src/site/content/en/blog/sign-in-form-best-practices/missing-field-firefox-android.png
deleted file mode 100644
index ac5c00ff14c..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/missing-field-firefox-android.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggest.png b/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggest.png
deleted file mode 100644
index f5cb8ef2722..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggest.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggestion.png b/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggestion.png
deleted file mode 100644
index 602bb9ca8b9..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/safari-password-suggestion.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/safari-signin-desktop.png b/src/site/content/en/blog/sign-in-form-best-practices/safari-signin-desktop.png
deleted file mode 100644
index 1952fbd518c..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/safari-signin-desktop.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/show-password-google.png b/src/site/content/en/blog/sign-in-form-best-practices/show-password-google.png
deleted file mode 100644
index 1ff39176e15..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/show-password-google.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/show-password.png b/src/site/content/en/blog/sign-in-form-best-practices/show-password.png
deleted file mode 100644
index 663d2fbe13d..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/show-password.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/styled-signin-form.png b/src/site/content/en/blog/sign-in-form-best-practices/styled-signin-form.png
deleted file mode 100644
index 6d4f0f0c393..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/styled-signin-form.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form-text.png b/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form-text.png
deleted file mode 100644
index 4c0494ad362..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form-text.png and /dev/null differ
diff --git a/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form.png b/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form.png
deleted file mode 100644
index 5cbae0a8067..00000000000
Binary files a/src/site/content/en/blog/sign-in-form-best-practices/unstyled-form.png and /dev/null differ
diff --git a/src/site/content/en/blog/simplify-paint-complexity-and-reduce-paint-areas/index.md b/src/site/content/en/blog/simplify-paint-complexity-and-reduce-paint-areas/index.md
new file mode 100644
index 00000000000..66d7a93903e
--- /dev/null
+++ b/src/site/content/en/blog/simplify-paint-complexity-and-reduce-paint-areas/index.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: Simplify paint complexity and reduce paint areas
+subhead: |
+  Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
+authors:
+  - paullewis
+date: 2015-03-20
+updated: 2019-07-10
+description: |
+  Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Paint is the process of filling in pixels that eventually get composited to
+the users' screens. It is often the longest-running of all tasks in the
+pipeline, and one to avoid if at all possible.
+
+## Summary
+
+* Changing any property apart from transforms or opacity always triggers paint.
+* Paint is often the most expensive part of the pixel pipeline; avoid it where you can.
+* Reduce paint areas through layer promotion and orchestration of animations.
+* Use the Chrome DevTools paint profiler to assess paint complexity and cost; reduce where you can.
+
+## Triggering Layout And Paint
+
+If you trigger layout, you will _always trigger paint_, since changing the geometry of any element means its pixels need fixing!
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VG9K1de3NXF6wIz5vAaM.jpg", alt="The full pixel pipeline.", width="800", height="122" %}
+</figure>
+
+You can also trigger paint if you change non-geometric properties, like backgrounds, text color, or shadows. In those cases layout won’t be needed and the pipeline will look like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3NbVKqelM3UPaIwlneYU.jpg", alt="The pixel pipeline without layout.", width="800", height="122" %}
+</figure>
+
+## Use Chrome DevTools to quickly identify paint bottlenecks
+
+You can use Chrome DevTools to quickly identify areas that are being painted. [Open the Rendering tab][renderingtab]
+and then enable **Paint Flashing**.
+
+With this option switched on Chrome will flash the screen green whenever painting happens. If you’re seeing the whole screen flash green, or areas of the screen that you didn’t think should be painted, then you should dig in a little further.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FslYBjuttmtVUCAq3y0n.png", alt="The page flashing green whenever painting occurs.", width="800", height="521" %}
+</figure>
+
+## Promote elements that move or fade
+
+Painting is not always done into a single image in memory. In fact, it’s possible for the browser to paint into multiple images, or compositor layers, if necessary.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/z821UCTV7erbUxsIABkf.jpg", alt="A representation of compositor layers.", width="800", height="688" %}
+</figure>
+
+The benefit of this approach is that elements that are regularly repainted, or are moving on screen with transforms, can be handled without affecting other elements. This is the same as with art packages like Sketch, GIMP, or Photoshop, where individual layers can be handled and composited on top of each other to create the final image.
+
+The best way to create a new layer is to use the `will-change` CSS property. This will work in Chrome, Opera and Firefox, and, with a value of `transform`, will create a new compositor layer:
+
+```css
+.moving-element {
+  will-change: transform;
+}
+```
+
+For browsers that don’t support `will-change`, but benefit from layer creation, such as Safari and Mobile Safari, you need to (mis)use a 3D transform to force a new layer:
+
+```css
+.moving-element {
+  transform: translateZ(0);
+}
+```
+
+Care must be taken not to create too many layers, however, as each layer requires both memory and management. There is more information on this in the [Stick to compositor-only properties and manage layer count](/stick-to-compositor-only-properties-and-manage-layer-count/) section.
+
+If you have promoted an element to a new layer, use DevTools to confirm that doing so has given you a performance benefit. **Don't promote elements without profiling.**
+
+## Reduce paint areas
+
+Sometimes, however, despite promoting elements, paint work is still necessary. A large challenge of paint issues is that browsers union together two areas that need painting, and that can result in the entire screen being repainted. So, for example, if you have a fixed header at the top of the page, and something being painted at the bottom of the screen, the entire screen may end up being repainted.
+
+Note: On High DPI screens elements that are fixed position are automatically promoted to their own compositor layer. This is not the case on low DPI devices because the promotion changes text rendering from subpixel to grayscale, and layer promotion needs to be done manually.
+
+Reducing paint areas is often a case of orchestrating your animations and transitions to not overlap as much, or finding ways to avoid animating certain parts of the page.
+
+## Simplify paint complexity
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NMsTYj8K5odtsK3FvEVU.jpg", alt="The time taken to paint part of the screen.", width="248", height="181" %}
+</figure>
+
+When it comes to painting, some things are more expensive than others. For example, anything that involves a blur (like a shadow, for example) is going to take longer to paint than -- say -- drawing a red box. In terms of CSS, however, this isn’t always obvious: `background: red;` and `box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);` don’t necessarily look like they have vastly different performance characteristics, but they do.
+
+The paint profiler above will allow you to determine if you need to look at other ways to achieve effects. Ask yourself if it’s possible to use a cheaper set of styles or alternative means to get to your end result.
+
+Where you can you always want to avoid paint during animations in particular, as the **10ms** you have per frame is normally not long enough to get paint work done, especially on mobile devices.
+
+[renderingtab]: https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#rendering
diff --git a/src/site/content/en/blog/site-speed-and-business-metrics/hero.jpeg b/src/site/content/en/blog/site-speed-and-business-metrics/hero.jpeg
deleted file mode 100644
index 9b607c73b68..00000000000
Binary files a/src/site/content/en/blog/site-speed-and-business-metrics/hero.jpeg and /dev/null differ
diff --git a/src/site/content/en/blog/site-speed-and-business-metrics/index.md b/src/site/content/en/blog/site-speed-and-business-metrics/index.md
index 880a31bb103..372bac478e3 100644
--- a/src/site/content/en/blog/site-speed-and-business-metrics/index.md
+++ b/src/site/content/en/blog/site-speed-and-business-metrics/index.md
@@ -6,10 +6,10 @@ description: Leverage A/B testing to evaluate the impact of site speed on your b
 authors:
   - msdikla
   - martinschierle
-  - bpj 
+  - bpj
 date: 2020-07-17
 # updated: 2020-07-17
-hero: hero.jpeg
+hero: image/admin/YwyFi7zlQ4LjXilIiD3y.jpeg
 tags:
   - blog
   - performance
@@ -31,16 +31,16 @@ few.
 
 Even though the case for speed is clear, many companies still struggle with
 prioritizing work that will improve their site speed since they do not know
-exactly how it affects **their** users and as a result **their** business. 
+exactly how it affects **their** users and as a result **their** business.
 
 In the absence of data, it is easy to delay site speed work and focus on other
 tasks. A common scenario is having some people in the company recognize the
 importance of site speed and yet not be able to build a case for it and convince
-multiple stakeholders to invest accordingly. 
+multiple stakeholders to invest accordingly.
 
 This article provides high-level guidance on how to leverage A/B testing to
 evaluate the impact of site speed on business metrics therefore enabling more
-effective decision-making on the matter. 
+effective decision-making on the matter.
 
 ## Step 1: Pick a page to A/B test
 
@@ -68,7 +68,7 @@ drive the page selection process:
     journey which is analyzed using a funnel. For example, users on an
     e-commerce website will have to navigate through a home page, category
     pages, product pages, and a checkout page to complete a purchase. If you're
-    optimizing for conversions, one of those pages would be a good candidate. 
+    optimizing for conversions, one of those pages would be a good candidate.
 
 *   The page should have a singular purpose. Unless your site has a very
     specific mission, it's usually best to avoid using the homepage for your
@@ -86,7 +86,7 @@ drive the page selection process:
     Report](https://support.google.com/analytics/answer/1205784) or [Search
     Console Core Web Vitals
     report](https://support.google.com/webmasters/answer/9205520) to see which
-    of your pages are slowest. 
+    of your pages are slowest.
 *   The page should be relatively stable. Don't update pages (anything that
     would impact business metrics) until the test is complete. The fewer
     external factors there are to consider, the cleaner the analysis will be.
@@ -135,7 +135,7 @@ First Ad Click".
 ## Step 3: Create speed performance variants
 
 In this stage you will implement changes to create a faster version of the page
-to be tested against the current version. 
+to be tested against the current version.
 
 A couple of things to keep in mind:
 
@@ -160,7 +160,7 @@ options.
 *   Use a tool like [Squoosh](https://squoosh.app/) to manually optimize the
     images on your test page
 *   [Use DevTools code
-    coverage](https://developers.google.com/web/tools/chrome-devtools/coverage)
+    coverage](https://developer.chrome.com/docs/devtools/coverage/)
     to manually eliminate unused JavaScript or CSS just for that one page
 *   [Efficiently load third-party
     scripts](/efficiently-load-third-party-javascript/)
@@ -169,7 +169,7 @@ options.
 *   Remove non-critical JavaScript code that does not impact the user experience
     and which you can do without for the purpose of the test (for example,
     certain third-party libraries)
-*   Implement [native lazy loading](/native-lazy-loading/) which isn't supported
+*   Implement [browser-level lazy loading](/browser-level-image-lazy-loading/) which isn't supported
     by all browsers but may still improve performance significantly where
     supported
 *   Remove non-critical analytics tags or load them asynchronously
@@ -178,7 +178,7 @@ Additional optimizations to consider can be found at [Fast load times](/fast/)
 and [Frontend Performance
 Checklist](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/).
 You can also use [PageSpeed
-Insights](https://developers.google.com/speed/pagespeed/insights/) to run
+Insights](https://pagespeed.web.dev/) to run
 Lighthouse, which identifies opportunities to improve performance.
 
 **Slow down the page**
@@ -194,7 +194,7 @@ FT.com](https://medium.com/ft-product-technology/a-faster-ft-com-10e7c077dc1c).
 For cases where the test page (let's say a product detail page) is mostly linked
 out from a different page (let's say the homepage),
 [prefetching](/link-prefetch/) or
-[prerendering](https://developers.google.com/web/updates/2018/07/nostate-prefetch)
+[prerendering](https://developer.chrome.com/blog/nostate-prefetch)
 the product page directly from the homepage for the test group will speed up the
 subsequent load of the page. Note that in this case the A/B test split (step 4)
 is done on the homepage. In addition, all of this may slow down the first page
@@ -231,7 +231,7 @@ Example
 Example of AB testing  performance changes on a given product detail page (PDP)
 via server-side testing:
 
-![Server side testing diagram](test-server-side.jpg)
+{% Img src="image/admin/xQWUEAAfowEg0wjmVsrm.jpg", alt="Server side testing diagram", width="800", height="230" %}
 
 The request goes to the backend, which distributes the users to the two
 different versions of the page. While this is in general a good setup, it often
@@ -240,7 +240,7 @@ needs IT resources to set up the server-side split.
 Here is an example of a client side testing setup, using the prior page (the
 homepage in the diagram below) to run the testing JavaScript:
 
-![Client side testing diagram](test-client-side.jpg)
+{% Img src="image/admin/tX6XL3IoZBVdJXCPAE1E.jpg", alt="Client side testing diagram", width="800", height="337" %}
 
 The testing JavaScript manipulates the outgoing link to give the two test groups
 of users links to the two versions of the PDP in question. This is easy to setup
@@ -308,7 +308,7 @@ source, and user profiles and types, such as new users versus repeat visitors.
 Each group of users may be more or less sensitive to slower speeds and
 identifying these is also quite helpful.
 
-[Data Studio](https://support.google.com/datastudio/answer/6283323?hl=en) or
+[Looker Studio](https://support.google.com/looker-studio/answer/6283323?hl=en) (formerly Data Studio) or
 other data visualization tools make it easy to integrate various data sources
 including Google Analytics. This makes it easy to conduct analysis, and also
 create dashboards that are shareable with the many stakeholders involved in
@@ -335,7 +335,7 @@ you'll be able to prioritize accordingly.
 
 If you can't identify a correlation, take a look at the caveats below and assess
 whether similar tests should be run elsewhere on the site (for example, through
-the entire purchase funnel or on a different type of page). 
+the entire purchase funnel or on a different type of page).
 
 **Caveats**
 
diff --git a/src/site/content/en/blog/site-speed-and-business-metrics/test-client-side.jpg b/src/site/content/en/blog/site-speed-and-business-metrics/test-client-side.jpg
deleted file mode 100644
index 5f070b43cb8..00000000000
Binary files a/src/site/content/en/blog/site-speed-and-business-metrics/test-client-side.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/site-speed-and-business-metrics/test-server-side.jpg b/src/site/content/en/blog/site-speed-and-business-metrics/test-server-side.jpg
deleted file mode 100644
index 9582c136cbe..00000000000
Binary files a/src/site/content/en/blog/site-speed-and-business-metrics/test-server-side.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/slow-roads/index.md b/src/site/content/en/blog/slow-roads/index.md
new file mode 100644
index 00000000000..5d68cc80d6b
--- /dev/null
+++ b/src/site/content/en/blog/slow-roads/index.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: How Slow Roads intrigues gamers and developers alike, spotlighting the surprising capabilities of 3D in the browser
+subhead: Discover the potential of WebGL with the infinite, procedurally-generated scenery of this casual driving game.
+authors:
+  - anslo
+date: 2023-04-11
+hero: image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/FYKfFSNA0ga2rSuD7iMG.png
+tags:
+  - blog
+  - games
+  - case-study
+---
+
+[Slow Roads](https://slowroads.io) is a casual driving game with an emphasis on endlessly procedurally generated scenery, all
+hosted in the browser as a [WebGL application](https://developer.mozilla.org/docs/Web/API/WebGL_API). For many, such an intensive
+experience might seem out of place in the limited context of the browser—and indeed, redressing that attitude has been one of my
+goals with this project. In this article I'll be breaking down some of the techniques I used to navigate the performance hurdle in
+my mission to highlight the oft-overlooked potential of 3D in the web.
+
+## 3D development in the browser
+
+After releasing Slow Roads, I saw a recurring comment in the feedback: "I didn't know this was possible in the browser". If
+you share this sentiment, you're certainly not a minority; according to the [2022 State of JS](https://2022.stateofjs.com/en-US/)
+survey, some 80% of developers have yet to experiment with WebGL. To me, it feels something of a shame that so much potential
+might be missed, especially when it comes to browser-based gaming. With Slow Roads I hope to bring WebGL further into the limelight,
+and perhaps reduce the number of developers who balk at the phrase "high-performance JavaScript game engine".
+
+WebGL may seem mysterious and complex for many, but in recent years its development ecosystems have greatly matured into highly
+capable and convenient tools and libraries. It's now easier than ever for front-end developers to incorporate 3D UX into their
+work, even without prior experience in computer graphics. [Three.js](https://threejs.org/), the leading WebGL library, serves
+as the foundation for many expansions, including [react-three-fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) which brings 3D components into the React framework. There
+are now also comprehensive web-based game editors such as [Babylon.js](https://www.babylonjs.com/) or [PlayCanvas](https://playcanvas.com/)
+which offer a familiar interface and integrated toolchains.
+
+Despite the remarkable utility of these libraries, however, ambitious projects are eventually bound by technical limitations. Skeptics
+to the idea of browser-based gaming might highlight that JavaScript is single-threaded and resource-constrained. But navigating
+these limitations unlocks the hidden value: no other platform offers the same instant accessibility and mass compatibility
+enabled by the browser. Users on any browser-capable system can begin playing in one click, with no need to install applications
+and no need to sign in to services. Not to mention that developers enjoy the elegant convenience of having robust front-end frameworks
+available for building UI, or handling networking for multiplayer modes. These values, in my opinion, are what make the browser such an
+excellent platform for both players and developers alike—and, as demonstrated by Slow Roads, the technical limitations might often be
+reducible to a design problem.
+
+## Achieving smooth performance in Slow Roads
+
+Since the core elements of Slow Roads involve high-speed motion and expensive scenery generation, the need for smooth performance
+underlined my every design decision. My main strategy was to start with a pared-down gameplay design that allowed for contextual
+short-cuts to be taken within the engine's architecture. On the downside this means trading off some nice-to-have features in the
+pursuit of minimalism, but results in a bespoke, hyper-optimized system that plays nicely across different browsers and devices.
+
+Here follows a breakdown of the key components that keep Slow Roads lean.
+
+### Shaping the environment engine around the gameplay
+
+As the key component of the game, the environment generation engine is unavoidably expensive, justifiably taking the greatest
+proportion of the budgets for memory and compute. The trick used here is in scheduling and distributing the heavy computation over
+a period of time, so as not to interrupt the framerate with performance spikes.
+
+{% Aside %}
+At its core, a game engine is an infinite `while` loop which reads user input, updates the world state, and then renders the image for the frame. This loop runs at the refresh rate of the monitor (typically 60 Hz), so any computation happening within it needs to complete within the given frame time to avoid causing visible stutters.
+{% endAside %}
+
+The environment is composed of tiles of geometry, differing in size and resolution (categorized as "levels of detail" or LoDs)
+depending on how close they will appear to the camera. In typical games with a free-roaming camera, different LoDs must be constantly
+loaded and unloaded to detail the player's surroundings wherever they may choose to go. This can be an expensive and wasteful operation,
+especially when the environment itself is dynamically generated. Fortunately, this convention can be entirely subverted in Slow Roads
+thanks to the contextual expectation that the user should stay on the road. Instead, high-detail geometry can be reserved for the narrow
+corridor directly flanking the route.
+
+<figure>
+  {% Img
+    src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/EK3mXmwSxE422zjs9mMw.png",
+    alt="A diagram showing how generating the road far in advance can allow for proactive scheduling and caching of the environment generation.",
+    width="1280",
+    height="720"
+  %}
+  <figcaption>
+    A view of the environment geometry in Slow Roads rendered as a wireframe, indicating corridors of high-resolution geometry flanking the road. Distant portions of the environment, which should never be seen up close, are rendered at a much lower resolution.
+  </figcaption>
+</figure>
+
+The midline of the road itself is generated far ahead of the player's arrival, allowing for accurate prediction of exactly
+when and where the environment detail will be needed. The result is a lean system that can proactively schedule expensive work,
+generating just the minimum needed at each point in time, and with no wasted effort on details that won't be seen. This technique
+is only possible because the road is a single, non-branching path—a good example of making gameplay trade-offs that accommodate
+architectural short-cuts.
+
+<figure>
+  {% Img
+    src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/6rjJXHREoaUXIxhun35L.png",
+    alt="A diagram showing how generating the road far in advance can allow for proactive scheduling and caching of the environment generation.",
+    width="960",
+    height="480"
+  %}
+  <figcaption>
+    By looking a certain distance along the road, environment chunks can be pre-empted and generated gradually just before they're needed. Additionally, any chunks that will be revisited in the near future can be identified and cached to avoid unnecessary regeneration.
+  </figcaption>
+</figure>
+
+### Being picky with the laws of physics
+
+Second to the computational demand of the environment engine is the physics simulation. Slow Roads uses a custom, minimal physics engine which takes every short-cut available.
+
+{% Aside %}
+Physics engines are hard, but thankfully many excellent libraries exist to streamline the process. Custom implementations
+are necessary in extreme cases, but libraries like [cannon.js](https://schteppe.github.io/cannon.js/) are increasingly
+covering more bases.
+{% endAside %}
+
+The major saving here is to avoid simulating too many objects in the first place—leaning into the minimal, zen context by
+discounting things like dynamic collisions and destructible objects. The assumption that the vehicle will stay on the road
+means that collisions with off-road objects can reasonably be ignored. Additionally, the encoding of the road as a sparse
+midline enables elegant tricks for fast collision detection with the road surface and guard rails, all based on a distance
+check to the road's center. Off-road driving then becomes more expensive, but this is another example of a fair trade-off
+suited to the context of the gameplay.
+
+### Managing the memory footprint
+
+As another browser-restrained resource, it's important to manage memory with care—despite the fact JavaScript is
+garbage-collected. It can be easy to overlook, but declaring even small amounts of new memory within a game loop can snowball
+into significant issues when running at 60Hz. Besides eating up the user's resources in a context where they're likely multitasking,
+large garbage collections can take several frames to complete, causing noticeable stutters. To avoid this, loop memory can be
+pre-allocated in class variables at initialisation and recycled in each frame.
+
+<figure>
+  {% Img
+    src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/EDXmi4BDLYiLZuVET870.png",
+    alt="A before-and-after view of the memory profile during optimisation of the Slow Roads codebase, indicating significant savings and a reduction in garbage collection rate.",
+    width="560",
+    height="480"
+  %}
+  <figcaption>
+    While the overall memory utilization is barely changed, pre-allocating and recycling loop memory can greatly reduce the impact of expensive garbage collections.
+  </figcaption>
+</figure>
+
+It's also highly important that heavier data structures, such as geometries and their associated data buffers, are managed economically. In an infinitely-generated game like Slow Roads, most of the geometry exists on a sort of treadmill - once an old piece falls behind into the distance, its data structures can be stored and recycled again for an upcoming piece of the world, a design pattern known as object pooling.
+
+These practices help to prioritize lean execution, with the sacrifice of some code simplicity. In high-performance contexts it's
+important to be mindful of how convenience features sometimes borrow from the client for the benefit of the developer. For example, methods
+like `Object.keys()` or `Array.map()` are incredibly handy, but it's easy to overlook that each creates a new array for their return
+value. Understanding the inner workings of such black-boxes can help to tighten up your code and avoid sneaky performance hits.
+
+### Reducing load time with procedurally-generated assets
+
+While runtime performance should be the primary concern for game developers, the usual axioms concerning initial web page load time still
+hold true. Users may be more forgiving when knowingly accessing heavy content, but long load times can still be detrimental to the experience,
+if not user retention. Games often require large assets in the form of textures, sounds, and 3D models, and at a minimum these should be carefully
+compressed wherever detail can be spared.
+
+{% Aside 'important' %}
+Be sure to use the appropriate formats for your assets—converting all of the images to [WebP](/learn/images/webp/) format halved the
+Slow Roads bundle size with barely a perceptible difference in quality.
+{% endAside %}
+
+Alternatively, procedurally generating assets on the client can avoid lengthy transfers in the first place. This is a huge benefit for users on slow connections,
+and gives the developer more direct control over how their game is constituted—not just for the initial loading step, but also when it comes to adapting levels
+of details for different quality settings.
+
+{% Img
+src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/LSTBxy582GfK2KDfbXuv.png",
+alt="A comparison illustrating how the quality of procedurally-generated geometry in Slow Roads can be dynamically adapted to the user's performance needs.",
+width="800",
+height="640"
+%}
+
+Most of the geometry in Slow Roads is procedurally generated and simplistic, with custom shaders combining multiple textures to bring the detail.
+The drawback is that these textures can be heavy assets, though there are further opportunities for savings here, with methods such as stochastic
+texturing able to achieve greater detail from small source textures. And at an extreme level, it's also possible to generate textures entirely on the client with tools such as [texgen.js](https://texgenjs.org/). The same is even true for audio, with the Web Audio API allowing for [sound generation](https://developer.mozilla.org/docs/Web/API/Web_Audio_API/Advanced_techniques) with audio nodes.
+
+With the benefit of procedural assets, generating the initial environment takes just 3.2 seconds on average. To best take advantage of
+the small up-front download size, a simple splash screen greets new visitors and postpones the expensive scene initialisation until
+after an affirmative button press. This also acts as a convenient buffer for bounced sessions, minimizing wasted transfer of dynamically-loaded
+assets.
+
+{% Img
+src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/hxiIMl31gXaXpqlAEvNu.png",
+alt="A histogram of load times showing a strong peak in the first three seconds accounting for over 60% of users, followed by a rapid decline. The histogram shows that over 97% of users see load times of less than 10 seconds.",
+width="1080",
+height="576"
+%}
+
+### Taking an agile approach to late optimization
+
+I've always considered the codebase for Slow Roads to be experimental, and as such have taken a fiercely agile approach to
+development. When working with a complex and rapidly-evolving system architecture, it can be difficult to predict where the
+important bottlenecks may occur. The focus should be on implementing the desired features quickly, rather than cleanly, and
+then working backwards to optimize systems where it really counts. The performance profiler in Chrome DevTools is invaluable
+for this step, and has helped me to diagnose some major issues with earlier versions of the game. Your time as a developer is
+valuable, so be sure you aren't spending time deliberating over problems that may prove insignificant or redundant.
+
+### Monitoring the user experience
+
+While implementing all of these tricks, it's important to be sure the game performs as expected in the wild. Accommodating
+a range of hardware capabilities is a staple aspect of any game development, but web games can target a much broader spectrum
+comprising both top-end desktops and decade-old mobile devices at once. The simplest way to approach this is by offering settings
+for adapting the most likely bottlenecks in your codebase—for both GPU- and CPU-intensive tasks—as revealed by your profiler.
+
+Profiling on your own machine can only cover so much, however, so it's valuable to close the feedback loop with your users in
+some way. For Slow Roads I run simple analytics which report on performance along with contextual factors such as screen resolution.
+These analytics are sent to a basic Node backend using socket.io, along with any written feedback the user submits via the in-game
+form. In the early days, these analytics caught a lot of important issues that could be mitigated with simple changes to the UX,
+such as highlighting the settings menu when a consistently low FPS is detected, or warning that a user may need to enable hardware
+acceleration if the performance is particularly poor.
+
+## The slow roads ahead
+
+Even after taking all of these measures, there remains a significant portion of the player base that needs to play on lower
+settings—primarily those using lightweight devices which lack a GPU. While the range of quality settings available leads to a
+fairly even performance distribution, only 52% of players achieve above 55 FPS.
+
+<figure>
+  {% Img
+    src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/eZFv6ulS99NQdwyjAYzi.png",
+    alt="A matrix defined by view distance setting against detail setting, showing the average frames-per-second achieved at different pairings. The distribution is fairly evenly spread between 45 and 60, with 60 being the target for good performance. Users at low settings tend to see a lower FPS than those at high settings, highlighting the differences in client hardware capability.",
+    width="640",
+    height="420"
+  %}
+  <figcaption>
+    Note that this data is somewhat skewed by users who run their browser with hardware acceleration disabled, often causing artificially low performance.
+  </figcaption>
+</figure>
+
+Fortunately, there are still many opportunities for making performance savings. Alongside adding further rendering tricks
+to reduce GPU demand, I hope to experiment with web workers in parallelising the environment generation in the near term,
+and may eventually see a need for incorporating WASM or [WebGPU](https://developer.mozilla.org/docs/Web/API/WebGPU_API) into the codebase. Any headroom I'm able to free up will allow
+for richer and more diverse environments, which will be the enduring goal for the remainder of the project.
+
+As hobby projects go, Slow Roads has been an overwhelmingly fulfilling way to demonstrate how surprisingly elaborate, performant,
+and popular browser games can be. If I've been successful in piquing your interest in WebGL, know that technologically Slow
+Roads is a fairly shallow example of its full capabilities. I strongly encourage readers to explore the [Three.js showcase](https://threejs.org/),
+and those interested in web game development in particular would be welcome to the community at [webgamedev.com](https://www.webgamedev.com/).
diff --git a/src/site/content/en/blog/smoothness/index.md b/src/site/content/en/blog/smoothness/index.md
new file mode 100644
index 00000000000..239270048c0
--- /dev/null
+++ b/src/site/content/en/blog/smoothness/index.md
@@ -0,0 +1,562 @@
+---
+layout: post
+title: Towards an animation smoothness metric
+subhead: Learn about measuring animations, how to think about animation frames, and overall page smoothness.
+description: Learn about measuring animations, how to think about animation frames, and overall page smoothness.
+authors:
+  - mmocny
+  - behdadb
+  - jonross
+date: 2021-11-03
+updated: 2021-11-03
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/Q32j8dRRdKSaxYaAYiNP.jpeg
+alt: A silky smooth surface
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+You've probably experienced pages that "stutter" or "freeze" during scrolling or
+animations. We like to say that these experiences are not _smooth_. To address
+these types of issues, the Chrome team has been working on adding more support
+to our lab tooling for animation detection, as well as making steady improvements
+to the rendering pipeline diagnostics within Chromium.
+
+We'd like to share some recent progress, offer concrete tooling guidance, and
+discuss ideas for future animation smoothness metrics. As always, we would love
+to hear your [feedback](#feedback).
+
+This post will cover three main topics:
+
+- A quick look at animations and animation frames.
+- Our current thoughts on measuring overall animation smoothness.
+- A few practical suggestions for you to leverage in lab tooling today.
+
+## What are animations?
+
+Animations bring content to life! By making content move, especially in response
+to user interactions, animations can make an experience feel more natural,
+understandable, and fun.
+
+But poorly implemented animations, or just adding too many animations, can
+degrade the experience and make it decidedly not fun at all. We've probably all
+interacted with an interface which just added too many "helpful" transition
+effects, which actually become hostile to experience when they perform poorly.
+Some users therefore actually might
+[prefer reduced motion](/prefers-reduced-motion/), a user preference
+that you should honor.
+
+{% Aside %}
+Learn more about [animations](/animations/), including how to
+[create performant animations](/animations-guide/) and how to [inspect
+animations using developer
+tooling](https://developer.chrome.com/docs/devtools/css/animations/).
+{% endAside %}
+
+### How do animations work?
+
+As a quick recap, the [rendering pipeline](/animations-overview/#pipeline)
+consists of a few, **sequential** stages:
+
+1. <strong style="font-weight:700;color:#6251A2">Style:</strong> Calculate the
+   styles that apply to the elements.
+2. <strong style="font-weight:700;color:#6251A2">Layout:</strong> Generate the
+   geometry and position for each element.
+3. <strong style="font-weight:700;color:#78A55A">Paint:</strong> Fill out the
+   pixels for each element into layers.
+4. <strong style="font-weight:700;color:#78A55A">Composite:</strong> Draw the
+   layers to the screen.
+
+While there are many ways to define animations, they all fundamentally work via
+one of the following:
+
+- Adjusting <strong style="font-weight:700;color:#6251A2">layout</strong>
+  properties.
+- Adjusting <strong style="font-weight:700;color:#78A55A">paint</strong>
+  properties.
+- Adjusting <strong style="font-weight:700;color:#78A55A">composite</strong>
+  properties.
+
+Because these stages are sequential, it is important to define animations in
+terms of properties that are further down the pipeline. The earlier the update
+happens in the process, the greater are the costs and it's less likely to be
+smooth. (See [Rendering
+performance](/rendering-performance/)
+for more details.)
+
+While it can be convenient to animate layout properties, there are costs to
+doing so, even if those costs aren't immediately apparent. Animations should be
+defined in terms of composite property changes wherever possible.
+
+Defining [declarative CSS animations or using Web
+Animations](/css-vs-javascript/),
+and ensuring you [animate composite
+properties](https://developer.chrome.com/blog/hardware-accelerated-animations/),
+is a great first step to ensuring smooth and efficient animations. But still,
+this alone does not guarantee smoothness because even efficient web animations
+have performance limits. That's why it is always important to measure!
+
+## What are animation frames?
+
+Updates to the visual representation of a page take time to appear. A visual
+change will lead to a new animation frame, which is eventually rendered on the
+user's display.
+
+Displays update on some interval, so visual updates are batched. Many displays
+update on a fixed interval of time, such as 60 times a second (that is
+60&nbsp;Hz). Some more modern displays can offer higher refresh rates
+(90–120&nbsp;Hz are becoming common). Often these displays can actively adapt
+between refresh rates as needed, or even offer fully variable frame rates.
+
+The goal for any application, like a game or a browser, is to process all these
+batched visual updates and produce a visually complete animation frame within
+the deadline, every time. Note that this goal is entirely distinct from other
+important browser tasks such as loading content from the network quickly or
+executing JavaScript tasks efficiently.
+
+At some point, it can become too difficult to complete all visual updates within
+the allotted deadline assigned by the display. When this happens, the browser
+**drops a frame**. Your screen doesn't go black, it just repeats itself. You see
+the same visual update for a bit longer—the same animation frame that was
+presented at the previous frame opportunity.
+
+This actually happens often! It is not necessarily even perceptible, especially
+for static or document-like content, which is common on the web platform in
+particular. Dropped frames only become apparent when there are important visual
+updates, such as animations, for which we need a steady stream of animation
+updates to show smooth motion.
+
+## What impacts animation frames?
+
+Web developers can greatly impact the ability of a browser to quickly and
+efficiently render and present visual updates!
+
+Some examples:
+
+- Using content that is too large or resource-intensive to decode quickly on the
+  target device.
+- [Using too many
+  layers](/stick-to-compositor-only-properties-and-manage-layer-count/)
+  requiring too much GPU memory.
+- Defining overly complex CSS styles or web animations.
+- Using design anti-patterns that disable fast rendering optimizations.
+- Too much JS work on the main thread, leading to long tasks that block visual
+  updates.
+
+But how can you know when an animation frame has missed its deadline and caused
+a dropped frame?
+
+One possible method is using
+[`requestAnimationFrame()`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame)
+polling, however it has several downsides. `requestAnimationFrame()`, or "rAF",
+tells the browser that you wish to perform an animation and asks for an
+opportunity to do so before the next paint stage of the rendering pipeline. If
+your callback function isn't called at the time you expect it, that means a
+paint wasn't executed, and one or more frames were skipped. By polling and
+counting how often rAF is called, you can compute a sort of "frames per second"
+(FPS) metric.
+
+{% Aside 'warning' %}
+  The following code is an anti-pattern and is strongly discouraged!
+{% endAside %}
+
+```js
+let frameTimes = [];
+function pollFramesPerSecond(now) {
+  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
+  requestAnimationFrame(pollFramesPerSecond);
+  console.log('Frames per second:', frameTimes.length);
+}
+requestAnimationFrame(pollFramesPerSecond);
+```
+
+Using `requestAnimationFrame()` polling is not a good idea for several reasons:
+
+- Every script has to set up its own polling loop.
+- It can block the critical path.
+- Even if the rAF polling is fast, it can prevent
+  [`requestIdleCallback()`](https://developer.mozilla.org/docs/Web/API/window/requestIdleCallback)
+  from being able to schedule long idle blocks when used continuously (blocks that
+  exceed a single frame).
+- Similarly, lack of long idle blocks prevents the browser from scheduling other
+  long-running tasks (such as longer garbage collection and other background or
+  speculative work).
+- If polling is toggled on and off, then you'll miss cases where frame budget
+  has been exceeded.
+- Polling will report false-positives in cases where the browser is using
+  variable update frequency (for example, due to power or visibility status).
+- And most importantly, it doesn't actually capture all types of animation
+  updates!
+
+Too much work on the main thread can impact the ability to see animation frames.
+Check out the [Jank
+Sample](https://googlechrome.github.io/devtools-samples/jank/) to see how a
+rAF-driven animation, once there is too much work on the main thread (such as
+layout), will lead to dropped frames and fewer rAF callbacks, and lower FPS.
+
+When the main thread becomes bogged down, visual updates begin to stutter.
+That's jank!
+
+Many measurement tools have focused extensively on the ability for the main
+thread to yield in a timely manner, and for animation frames to run smoothly.
+But this is not the whole story! Consider the following example:
+
+{% Video
+  src="video/nM10iAStORWg0YlDbPc2czmpRRr2/xkdE00Gizsks9ytPkP6r.mov",
+   autoplay="true",
+  controls="true",
+  loop="true",
+  muted="true"
+%}
+
+The video above shows a page that periodically injects long tasks onto the main
+thread. These long tasks completely ruin the ability of the page to provide
+certain types of visual updates, and you can see in the top-left corner a
+corresponding drop of `requestAnimationFrame()` reported FPS to 0.
+
+And yet, despite these long tasks, the page continues to scroll smoothly. This
+is because on modern browsers, [scrolling is often
+threaded](https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#:~:text=The%20multithreaded%20web),
+driven entirely by the compositor.
+
+This is an example that simultaneously contains many dropped frames on the main
+thread, yet still has many successfully-delivered frames of scrolling on the
+compositor thread. Once the long task is complete, the main thread paint update
+has no visual change to offer anyway. rAF polling suggested a frame drop to 0,
+but _visually_, a user wouldn't be able to notice a difference!
+
+For animation frames, the story is not that simple.
+
+{% Aside %}
+There are many reasons why long tasks are bad—and these are captured
+  with [dedicated performance APIs](/custom-metrics/), such as the Long Tasks
+  API or the Event Timing API. Yet, there are also features, such as
+  [`isInputPending()`](/isinputpending/), where long tasks during idle periods
+  may be added entirely by design and be a good thing.
+{% endAside %}
+
+
+## Animation frames: Updates that matter
+
+The above example showcases that there is more to the story than just
+`requestAnimationFrame()`.
+
+So when do animation updates and animation frames matter?  Here are
+some criteria we're thinking about and would love to get feedback on:
+
+- Main and compositor thread updates
+- Missing paint updates
+- Detecting animations
+- Quality versus quantity
+
+### Main and compositor thread updates
+
+Animation frame updates are not boolean. It is not the case that frames may only
+be fully dropped or fully presented. There are many reasons why an animation
+frame may be _partially_ _presented_. In other words, it can simultaneously have
+_some stale content_ while also having _some new visual updates_ which are
+presented.
+
+The most common example of this is when the browser is unable to produce a new
+main thread update within frame deadline but does have a new compositor thread
+update (such as the threaded scrolling example from earlier).
+
+One important reason why using declarative animations to animate composite
+properties is recommended is that doing so enables an animation to be driven
+entirely by the compositor thread even when the main thread is busy. These types
+of animations can continue to produce visual updates efficiently and in
+parallel.
+
+On the other hand, there may be cases where a main thread update finally becomes
+available for presentation, but only after missing several frame deadlines. Here
+the browser will have _some_ new update, but it may not be _the very latest_.
+
+Broadly speaking, we consider frames that contain some new visual updates,
+without all new visual updates, as a _partial frame_. Partial frames are fairly
+common. Ideally, partial updates would at least include the most important
+visual updates, like animations, but that can only happen if animations are
+driven by the compositor thread.
+
+### Missing paint updates
+
+Another type of partial update is when media like images have not finished
+decoding and rasterizing in time for frame presentation.
+
+Or, even if a page is perfectly static, browsers may still fall behind rendering
+visual updates during rapid scrolling. That is because the pixel renditions of
+content beyond the visible viewport may be discarded to save GPU memory. It
+takes time to render pixels, and it may take longer than a single frame to
+render everything after a large scroll, like a finger fling. This is commonly
+known as _checkerboarding_.
+
+With each frame rendering opportunity, it's possible to track how much of the
+latest visual updates actually got to the screen. Measuring the ability to do so
+over many frames (or time) is broadly known as _frame throughput_.
+
+If the GPU is really bogged down, the browser (or platform) may even begin to
+throttle the rate at which it attempts visual updates and thus decreases
+effective frame rates. While technically that can reduce the number of dropped
+frame updates, visually it will still appear as a lower frame throughput.
+
+Yet, not all types of low frame throughput are bad. If the page is mostly idle
+and there are no active animations, a low frame rate is just as visually
+appealing as a high frame rate (and, it can save battery!).
+
+So when does frame throughput matter?
+
+### Detecting animations
+
+High frame throughput matters especially during periods with important
+animations. Different animation types will depend on visual updates from a
+specific thread (main, compositor, or a worker), so its visual update is
+dependent on that thread providing its update within the deadline. We say that a
+given thread _affects smoothness_ whenever there is an active animation that
+depends on that thread update.
+
+Some types of animations are easier to define and detect than others.
+Declarative animations, or user-input-driven animations, are clearer to define
+than JavaScript-driven animations implemented as periodic updates to animatable
+style properties.
+
+Even with `requestAnimationFrame()` you
+cannot always assume that every rAF call is necessarily producing a visual
+update or animation. For example, using rAF polling just to track frame rate
+(as shown above) should not itself affect smoothness measurements since there is
+no visual update.
+
+{% Aside %}
+  Animation detection in tooling, as well as the specifics of
+  animation implementations in browsers, continually evolves and improves.
+  Chrome recently moved [background-color
+  animations](https://developer.chrome.com/blog/hardware-accelerated-animations/#whats-coming-next)
+  from the main thread to the compositor!
+{% endAside %}
+
+### Quality versus quantity
+
+Finally, detecting animations and animation frame updates is still only part of
+the story because it only captures the quantity of animation updates, not the
+quality.
+
+For example, you may see a steady framerate of of 60&nbsp;fps while watching a
+video. Technically, this is perfectly smooth, but the video itself may have a
+low bit rate, or issues with network buffering. This isn't captured by
+animation smoothness metrics directly, yet may still be jarring to the
+user.
+
+Or, a game which leverages `<canvas>` (perhaps even using techniques like
+[offscreen
+canvas](https://developer.chrome.com/blog/offscreen-canvas/) to
+ensure a steady frame rate) may technically be perfectly smooth in terms of
+animation frames, all while failing to load high quality game assets into the
+scene or exhibiting rendering artifacts.
+
+And of course, a site can just have some really bad animations 🙂
+
+<img
+src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Under-Construction-Bulldozer.gif"
+alt="Old school under construction GIF" width="410" height="49">
+
+I mean, I guess they were pretty cool for their time!
+
+## States of a single animation frame
+
+Because frames may be partially presented, or dropped frames may happen in ways
+that do not affect smoothness, we have begun to think of each frame as having a
+completeness or smoothness score.
+
+Here is the spectrum of ways in which we interpret the state of a single
+animation frame, ordered from best to worst case:
+
+<div>
+  <table>
+    <tr>
+      <td><strong>No Update Desired</strong></td>
+      <td>Idle time, repeat of the previous frame.</td>
+    </tr>
+    <tr>
+      <td><strong>Fully presented</strong></td>
+      <td>The main thread update was either committed within deadline, or no
+      main thread update was desired.</td>
+    </tr>
+    <tr>
+      <td><strong>Partially presented</strong></td>
+      <td>Compositor only; the delayed main thread update had no visual
+      change.</td>
+    </tr>
+    <tr>
+      <td><strong>Partially presented</strong></td>
+      <td>Compositor only; the main thread had a visual update, but that
+      update did not include an animation that affects smoothness.</td>
+    </tr>
+    <tr>
+      <td><strong>Partially presented</strong></td>
+      <td>Compositor only; the main thread had a visual update that affects
+      smoothness, but a previously stale frame arrived and was used instead.</td>
+    </tr>
+    <tr>
+      <td><strong>Partially presented</strong></td>
+      <td>Compositor only; without the desired main update, and the
+      compositor update has an animation that affects smoothness.</td>
+    </tr>
+    <tr>
+      <td><strong>Partially presented</strong></td>
+      <td>Compositor only but the compositor update does not have an
+      animation that affects smoothness.</td>
+    </tr>
+    <tr>
+      <td><strong>Dropped frame</strong></td>
+      <td>No update. There was no compositor update desired, and main was
+      delayed.</td>
+    </tr>
+    <tr>
+      <td><strong>Dropped frame</strong></td>
+      <td>A compositor update was desired, but it was delayed.</td>
+    </tr>
+    <tr>
+      <td><strong>Stale frame</strong></td>
+      <td>An update was desired, it was produced by the renderer, but the
+      GPU still did not present it before the vsync deadline.</td>
+    </tr>
+  </table>
+</div>
+
+It's possible to turn these states into somewhat of a score. And perhaps one way
+to interpret this score is to consider it a _probability_ of being observable by
+the user. A single dropped frame may not be very observable, but a sequence of
+many dropped frames affecting smoothness in a row sure is!
+
+## Putting it all together: A Percent Dropped Frames metric
+
+While it can sometimes be necessary to dive deep into the state of each
+animation frame, it's also useful to just assign a quick "at a glance" score for
+an experience.
+
+Because frames may be _partially presented,_ and because even fully skipped
+frame updates may not actually _affect smoothness_, we want to focus less on
+just counting frames, and more on the _extent_ to which the browser is unable to
+provide _visually complete_ updates _when it mattered_.
+
+The mental model should move from:
+
+1. *Frames Per Second*, to
+2. Detecting missing and important animation updates, to
+3. *Percentage Dropped* over a given time period.
+
+What matters is: _the proportion of time waiting for important
+updates_. We think this matches the natural way users experience the smoothness
+of web content in practice. So far, we have been using the following as an
+initial set of metrics:
+
+- **Average Percent Dropped:** for all non-idle animation frames throughout the
+  whole timeline
+- **Worst Case of Percent Dropped Frames:** as measured over 1 second sliding
+  windows of time.
+- **95th percentile of Percent Dropped Frames:** as measured over 1 second
+  sliding windows of time.
+
+You can find these scores in some Chrome developer tools today. While these
+metrics focus only on overall frame throughput, we are also evaluating other
+factors, such as frame latency.
+
+{% Aside %}
+  These names are somewhat historical. The "Percent Dropped" naming no longer
+  matches any literal "was a frame dropped" concept. As the previous section
+  covered, each animation frame is a complicated arrangement of conditions
+  leading to an overall probability. Expect these names to evolve over time.
+{% endAside %}
+
+## Try it yourself in developer tooling!
+
+### Performance HUD
+
+Chromium has a neat Performance HUD hidden behind a flag
+(`chrome://flags/#show-performance-metrics-hud`). In it, you can find live
+scores for things like Core Web Vitals and also a few experimental definitions
+for animation smoothness based on *Percent Dropped Frames* over time.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/hblBG5oYxWsUOua0tW3C.png",
+alt="Performance HUD", width="800", height="441" %}
+
+### Frame Rendering Stats
+
+[Enable "Frame Rendering
+Stats"](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps-meter)
+in DevTools via Rendering settings to see a live view of new animation frames,
+which are color-coded to differentiate partial updates from fully-dropped frame
+updates. The reported fps is for fully-presented frames only.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/xazCKFNCWwjviBGS9JO6.png",
+alt="Frame rendering stats", width="398", height="372" %}
+
+### Frame Viewer in DevTools performance profile recordings
+
+The [DevTools Performance
+panel](https://developer.chrome.com/docs/devtools/evaluate-performance/) has
+long had a [Frames
+viewer](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#frames).
+However, it had grown a bit out of sync with how the modern rendering pipeline
+actually works. There has been plenty of recent improvement, even in the latest
+Chrome Canary, which we think will greatly ease debugging animation issues.
+
+Today you will find that frames in the frames viewer are better aligned with
+vsync boundaries, and color-coded based on status. There is still not full
+visualization for all the nuances outlined above, but we're planning to add more
+in the near future.
+
+{% Img src="image/nM10iAStORWg0YlDbPc2czmpRRr2/ou89sgoFeg2481KVUWmF.png",
+alt="Frame viewer in Chrome DevTools", width="800", height="148" %}
+
+### Chrome tracing
+
+Finally, with Chrome Tracing, the tool of choice for diving deep into details,
+you can record a "Web content rendering" trace via the new [Perfetto
+UI](https://ui.perfetto.dev/) (or `about:tracing`), and dig deep into Chrome's
+graphics pipeline. It can be a daunting task, but there are a few things
+recently added to Chromium to make it easier. You can get an overview of what is
+available in the [Life of a
+Frame](https://chromium.googlesource.com/chromium/src/+/HEAD/docs/life_of_a_frame.md)
+document.
+
+Through trace events you can definitively determine:
+
+- Which animations are running (using events named `TrackerValidation`).
+- Getting the exact timeline of animation frames (using events named
+  `PipelineReporter`).
+- For janky animation updates, figure out exactly what is blocking your
+  animation from running faster (using the event breakdowns within
+  `PipelineReporter` events).
+- For input-driven animations, see how long it takes to get a visual update
+  (using events named `EventLatency`).
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/O0vDMhhaob9bllU0xRVy.png",
+alt="Chrome Tracing pipeline reporter", width="800", height="138" %}
+
+## What's next
+
+The [Web Vitals](/vitals/) initiative aims to provide metric and guidance for
+building great user experiences on the web.
+[Lab-based](/user-centric-performance-metrics/#in-the-lab) metrics like [Total
+Blocking Time (TBT)](/tbt/) and [Time to Interactive (TTI)](/tti/) are vital for
+catching and diagnosing potential interactivity issues. We are planning to
+design a similar lab-based metric for animation smoothness.
+
+We'll keep you posted as we continue to work through ideas for designing a
+comprehensive metric based on individual animation frame data.
+
+In the future, we'd also like to design APIs that make it possible to measure
+animation smoothness performantly for real users in the
+[field](/user-centric-performance-metrics/#in-the-field) as well as in the lab.
+Stay tuned for updates there as well!
+
+## Feedback
+
+We're excited about all the recent improvements and developer tools that have
+shipped in Chrome to measure animation smoothness. Please try these tools out,
+benchmark your animations, and let us know where it leads!
+
+You can send your comments to the
+[web-vitals-feedback](https://groups.google.com/g/web-vitals-feedback) Google
+group with "[Smoothness Metrics]" in the subject line. We're really looking
+forward to hearing what you think!
diff --git a/src/site/content/en/blog/snap-after-layout/css-scroll-snap-example.png b/src/site/content/en/blog/snap-after-layout/css-scroll-snap-example.png
deleted file mode 100644
index ef548af58ea..00000000000
Binary files a/src/site/content/en/blog/snap-after-layout/css-scroll-snap-example.png and /dev/null differ
diff --git a/src/site/content/en/blog/snap-after-layout/index.md b/src/site/content/en/blog/snap-after-layout/index.md
index 51b29c507a7..b0ecfc6d351 100644
--- a/src/site/content/en/blog/snap-after-layout/index.md
+++ b/src/site/content/en/blog/snap-after-layout/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: "Scroll snapping after layout changes"
 subhead: |
   Starting in Chrome 81, you no longer need to add event listeners to force
@@ -14,9 +15,11 @@ description: |
   In other words, you no longer need to add event listeners to force resnapping.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
+feedback:
+  - api
 ---
 
-[CSS Scroll Snap](https://developers.google.com/web/updates/2018/07/css-scroll-snap)
+[CSS Scroll Snap](/css-scroll-snap/)
 allows web developers to create well-controlled scroll experiences by declaring
 scroll snapping positions. One shortcoming of the current implementation is that
 scroll snapping does not work well when the layout changes, such as when the viewport is
@@ -50,21 +53,21 @@ overcome the issues of imprecise scrolling. In other words, scroll snapping:
 
 Paginated articles and image carousels are two common use cases for scroll
 snaps.
-<figure class="w-figure">
-  <img src="./css-scroll-snap-example.png" alt="Example of CSS scroll snap.">
-  <figcaption class="w-figcaption">Example of CSS scroll snap. At the end of
+<figure>
+  {% Img src="image/admin/MzdzDJ2j4jJtfAYgg9e6.png", alt="Example of CSS scroll snap.", width="800", height="356" %}
+  <figcaption>Example of CSS scroll snap. At the end of
     scrolling an image's horizontal center is aligned with the horizontal center
     of the scroll container.
   </figcaption>
 </figure>
 
 ### Shortcomings
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/resizing-breaks-snap-positions.webm" type="video/webm;">
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/resizing-breaks-snap-positions.mp4" type="video/mp4;">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     Snap positions get lost when resizing a window.
   </figcaption>
 </figure>
@@ -85,12 +88,12 @@ consider these shortcomings when trying to make a dynamic experience that
 supports actions such as adding, removing, or moving content.
 
 A common fix for this is to add listeners that execute a programmatic scroll via
-Javascript to force snapping to execute whenever any of these mentioned layout
+JavaScript to force snapping to execute whenever any of these mentioned layout
 changes happen. This workaround can be ineffective when the user expects the
 scroller to snap back to the same content as before. Any further handling with
-Javascript seems to almost defeat the purpose of this CSS feature.
+JavaScript seems to almost defeat the purpose of this CSS feature.
 
-## Native support for re-snapping after layout changes in Chrome 81
+## Built-in support for re-snapping after layout changes in Chrome 81
 The mentioned shortcomings no longer exist in Chrome 81: scrollers will remain
 snapped even after changing layout. They will re-evaluate scroll positions after
 changing their layout, and re-snap to the closest snap position if necessary. If
@@ -99,10 +102,10 @@ layout change, then the scroller will try to snap back to it. Pay attention to
 what happens when the layout changes in the following
 [example](https://codepen.io/argyleink/full/YzXyOaX).
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse', 'Snap position lost' %}
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/snap-positions-lost.webm" type="video/webm;">
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/snap-positions-lost.mp4" type="video/mp4;">
   </video>
@@ -118,8 +121,8 @@ scroll snap position was lost.
 {% endCompare %}
 
 {% Compare 'better', 'Snap position preserved' %}
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/snap-positions-preserved.webm" type="video/webm;">
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/snap-positions-preserved.mp4" type="video/mp4;">
   </video>
@@ -157,12 +160,12 @@ lines of CSS:
 Want to learn more? See the following [demo chat
 UI](https://codepen.io/argyleink/pen/RwPWqKe) for visuals.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/scroll-snap-bottom.webm" type="video/webm;">
     <source src="https://storage.googleapis.com/web-dev-assets/snap-after-layout/scroll-snap-bottom.mp4" type="video/mp4;">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Adding a new message triggers re-snap which makes it stick to the bottom in
     Chrome 81.
   </figcaption>
@@ -171,7 +174,7 @@ UI](https://codepen.io/argyleink/pen/RwPWqKe) for visuals.
 ## Future work
 All re-snapping scroll effects are currently instant; a potential follow-up is
 to support re-snapping with [smooth scrolling
-effects](https://developers.google.com/web/updates/2016/02/smooth-scrolling-in-chrome-49).
+effects](https://developer.chrome.com/blog/smooth-scrolling-in-chrome-49/).
 See the [specification issue](https://github.com/w3c/csswg-drafts/issues/4609)
 for details.
 
diff --git a/src/site/content/en/blog/social-discovery/index.md b/src/site/content/en/blog/social-discovery/index.md
new file mode 100644
index 00000000000..2c13f38e29d
--- /dev/null
+++ b/src/site/content/en/blog/social-discovery/index.md
@@ -0,0 +1,306 @@
+---
+title: Social discovery
+subhead: You can influence the way your site appears when shared via social media by adding a few lines of code to each page. This can help bring more people to your site by providing previews with richer information than would otherwise be available.
+date: 2014-10-07
+updated: 2018-09-20
+authors:
+  - agektmr
+description: You can influence the way your site appears when shared via social media by adding a few lines of code to each page. This can help bring more people to your site by providing previews with richer information than would otherwise be available.
+tags:
+  - blog
+---
+
+You can influence the way your site appears when shared via social media by
+adding a few lines of code to each page. This can help bring more people to
+your site by providing previews with richer information than would otherwise
+be available.
+
+
+### Summary
+- Use schema.org microdata to provide page title, description, and an image for Google+.
+- Use Open Graph Protocol (OGP) to provide page title, description, and an image for Facebook.
+- Use Twitter Cards to provide page title, description, an image, and a Twitter id for Twitter.
+
+You can influence the way your site appears when shared via social media by
+adding a few lines of code to each page. This can help increase engagement by
+providing previews with richer information than would otherwise be available.
+Without it, social sites will provide only basic information, without images or
+other helpful information.
+
+Which one do you think is more likely to be clicked? People are drawn to images
+and feel more confident they'll like what they find when they have an early
+preview.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iQCTEOefZ4T6nlsyw9E4.png", alt="With the appropriate markup: the correct title, a short
+      description, and an image are included. Adding these items can help
+      increase engagement.", width="451", height="536" %}
+    <figcaption class="success">
+      With the appropriate markup: the correct title, a short
+      description, and an image are included. Adding these items can help
+      increase engagement.
+     </figcaption>
+  </figure>
+ <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tFvEj7JzOBiFWJUBkdNb.png", alt="Without the proper mark up, only the page title is
+      included.", width="455", height="268" %}
+    <figcaption class="warning">
+      Without the proper mark up, only the page title is
+      included.
+     </figcaption>
+  </figure>
+</div>
+
+When someone on a social network wants to share your website with their friends,
+they would probably add some notes explaining how awesome it is, and share it.
+But describing a website tends be cumbersome and can miss the point from the
+page owner's point of view. Some services restrict the number of characters users can
+put in the note.
+
+By adding the appropriate metadata to your pages, you can simplify the sharing
+process for users by providing the title, a description, and an attractive
+image. This means they don't have to spend valuable time (or characters)
+describing the link.
+
+## Use schema.org + microdata to provide rich snippets on Google+
+
+Crawlers use many methods to parse a page and understand its content. By using
+[microdata](http://www.w3.org/TR/microdata/), and
+[schema.org](https://schema.org/) vocabulary, you help social sites and search
+engines better understand the contents of the page.
+
+Here's an example:
+
+```html
+<div itemscope itemtype="http://schema.org/Article">
+  <h1 itemprop="name">Enjoy fireworks</h1>
+  <p itemprop="description">Fireworks are beautiful.
+   This article explains how beautiful fireworks are.</p>
+  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
+</div>
+```
+
+While most metadata are embedded in the head section of a web page, microdata
+lives where the context exists.
+
+### Add `itemscope` to define microdata scope
+By adding `itemscope`, you can specify the tag as a block of contents about a
+particular item.
+
+### Add `itemtype` to define type of your website
+You can specify the type of item by using the `itemtype` attribute along with the
+`itemscope`. The value of an `itemtype` can be determined according to the type
+of content on your web page. You should be able to find one that is relevant
+in [this page](https://schema.org/docs/full.html).
+
+### Add `itemprop` to describe each item using schema.org vocabulary
+`itemprop` defines properties for `itemtype` in the scope. For providing
+metadata to social sites, typical `itemprop` values are `name`, `description`,
+and `image`.
+
+### Validate rich snippets
+To validate rich snippets on Google+, you can use tools such as:
+
+* [Structured Data Testing Tool](https://www.google.com/webmasters/tools/richsnippets) - Webmaster Tools
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TJjnWguuLs90e2sjWQbf.png", alt="Structured data testing tool", width="800", height="522" %}
+</figure>
+
+## Use Open Graph Protocol (OGP) to provide rich snippets on Facebook
+
+The [Open Graph Protocol (OGP)](http://ogp.me/) provides Facebook with the
+metadata necessary to allow web pages to have the same functionality as other
+Facebook objects.
+
+```html
+<html prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
+    <style>
+      body {
+        margin: 2em;
+      }
+    </style>
+    <meta property="og:title" content="Enjoy Fireworks">
+    <meta property="og:description"
+          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
+    <meta property="og:image"
+          content="https://developers.google.com/web/imgs/fireworks.jpg">
+    <meta property="og:url"
+          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
+    <meta property="og:type" content="website">
+```
+
+When included in the head section of your page, this metadata provides rich
+snippet information when the page is shared.
+
+### Use `og:` namespaced `meta` tags to describe metadata
+A `meta` tag consists of a `property` attribute and a `content` attribute.
+Properties and contents may take the following values:
+
+<table>
+  <thead>
+    <tr>
+      <th data-th="Property">Property</th>
+      <th data-th="Content">Content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Property"><code>og:title</code></td>
+      <td data-th="Content">The title of the web page.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>og:description</code></td>
+      <td data-th="Content">The description of the web page.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>og:url</code></td>
+      <td data-th="Content">The canonical url of the web page.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>og:image</code></td>
+      <td data-th="Content">URL to an image attached to the shared post.</td>
+    </tr>
+    <tr>
+      <td data-th="Property"><code>og:type</code></td>
+      <td data-th="Content">A string that indicates the type of the web page. You can find one that is suitable for your web page <a href="https://developers.facebook.com/docs/reference/opengraph/">here</a>.</td>
+    </tr>
+  </tbody>
+</table>
+
+These meta tags provide semantic information to crawlers from social sites,
+like [Facebook](https://www.facebook.com/).
+
+### Learn more
+To learn more about things you can attach to the post on Facebook, visit the
+official Open Graph Protocol site.
+
+* [ogp.me](http://ogp.me/)
+
+### Validate rich snippets
+To validate your markup on Facebook, you can use tools such as:
+
+* [Debugger](https://developers.facebook.com/tools/debug/)
+
+## Use Twitter Cards to provide rich snippets on Twitter
+[Twitter Cards](https://dev.twitter.com/cards/overview) are an extension to the
+Open [Graph Protocol applicable for Twitter](https://twitter.com/). They allow
+you to add media attachments like images and video to Tweets with a link to
+your web page. By adding the appropriate metadata, Tweets with links to your
+page will have a card added that includes the rich detail you've added.
+
+### Use `twitter:` namespaced meta tags to describe metadata
+To get a Twitter Card working, [your domain must be
+approved](https://cards-dev.twitter.com/validator) and must
+contain a meta tag that has `twitter:card` as the `name` attribute instead of
+`property` attribute.
+
+Here's a quick example:
+
+```html
+<html prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
+    <style>
+      body {
+        margin: 2em;
+      }
+    </style>
+    <meta property="og:title" content="Enjoy Fireworks">
+    <meta property="og:description"
+          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
+    <meta property="og:image"
+          content="https://developers.google.com/web/imgs/fireworks.jpg">
+    <meta property="og:url"
+          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="agektmr">
+```
+
+By assigning the Twitter id to the value of twitter:site, Twitter embeds this
+information in the shared post so that people can easily engage with the page
+owner.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bLzeCLmIZlkkdF2xKueg.png", alt="Twitter card.", width="519", height="868" %}
+</figure>
+
+### Learn more
+To learn more about Twitter Cards, visit:
+
+* [Twitter's developer site](https://dev.twitter.com/cards)
+
+### Validate rich snippets
+To validate your markup, Twitter provides:
+
+* [Card Validator](https://cards-dev.twitter.com/validator)
+
+## The Best Practice
+Given all three options, the best thing you can do is to include them all in
+your web page. Here's an example:
+
+```html
+<!-- namespace declaration -->
+<html prefix="og: http://ogp.me/ns#">
+  <!-- define microdata scope and type -->
+  <head itemscope itemtype="http://schema.org/Article">
+    <title>Social Site Example</title>
+    <!-- define ogp and itemprop of microdata in one line -->
+    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
+    <!-- define ogp image -->
+    <meta property="og:image"
+          content="https://developers.google.com/web/imgs/fireworks.jpg">
+    <!-- use link[href] to define image url for microdata -->
+    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
+    <!-- define ogp and itemprop of microdata in one line -->
+    <meta property="og:url"
+          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
+    <!-- define ogp type -->
+    <meta property="og:type" content="website">
+    <!-- define twitter cards type -->
+    <meta name="twitter:card" content="summary_large_image">
+    <!-- define site's owner twitter id -->
+    <meta name="twitter:site" content="agektmr">
+    <!-- define description for ogp and itemprop of microdata in one line -->
+    <meta property="og:description" itemprop="description"
+          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
+    <!-- general description (separate with ogp and microdata) -->
+    <meta name="description"
+          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
+    <style>
+      body {
+        margin: 2em;
+      }
+    </style>
+  </head>
+  ```
+
+Notice that microdata and OGP share some markup:
+
+* `itemscope` is located at `head` tag
+* `title` and `description` are shared between microdata and OGP
+* `itemprop="image"` is using `link` tag with `href` attribute instead of
+reusing `meta` tag with `property="og:image"`
+
+Lastly, make sure to validate that your web page appears as expected on each
+social site before publishing.
diff --git a/src/site/content/en/blog/source-maps/index.md b/src/site/content/en/blog/source-maps/index.md
new file mode 100644
index 00000000000..30104b81ab7
--- /dev/null
+++ b/src/site/content/en/blog/source-maps/index.md
@@ -0,0 +1,143 @@
+---
+title: What are source maps?
+subhead: >
+  Improve web debugging experience with source maps.
+date: 2023-03-31
+hero: image/dPDCek3EhZgLQPGtEG3y0fTn4v82/pHEJbtfbTxbY0UJCa7IX.jpg
+alt: Tomato sauce
+authors:
+  - jecelynyeen
+tags:
+  - blog
+  - sourcemap
+  - javascript
+  - css
+---
+
+{% YouTube 'FIYkjjFYvoI' %}
+
+Today, we are talking about source maps, a crucial tool in modern web development that makes debugging significantly easier. In this article, we will explore the basics of source maps, how they are generated, and how they improve the debugging experience.
+
+## The need for source maps
+
+Back in the good old days, we built web applications with pure HTML, CSS, and JavaScript and deployed the same files to the web. 
+
+However, as we are building more complex web applications nowadays, your development workflow may involve using various tools. For example:
+
+- Templating languages and HTML preprocessors: [Pug](https://pugjs.org/), [Nunjucks](https://mozilla.github.io/nunjucks/), [Markdown](https://daringfireball.net/projects/markdown/).
+- CSS preprocessors: [SCSS](https://sass-lang.com/), [LESS](https://lesscss.org/), [PostCSS](https://postcss.org/).
+- JavaScript frameworks: Angular, React, Vue, Svelte.
+- JavaScript meta frameworks: [Next.js](https://nextjs.org/), [Nuxt](https://nuxt.com/), [Astro](https://astro.build/).
+- High-level programming languages: [TypeScript](https://www.typescriptlang.org/), [Dart](https://dart.dev/tools/dart2js), [CoffeeScript](https://coffeescript.org/).
+- And more. The list can go on and on!
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DBPCct3WcUhRuA9qvu1i.png", alt="A brief overview of various tooling.", width="800", height="450" %}
+
+These tools require a build process to transpile your code into standard HTML, JavaScript, and CSS that browsers can understand. Additionally, to optimize performance, it's common practice to compress (for example, using [Terser](https://github.com/terser/terser) to minify and mangle JavaScript) and combine these files, reducing their size and making them more efficient for the web.
+
+For example, using build tools, we can transpile and compress the following TypeScript file into a single line of JavaScript. You can play with the [demo in my GitHub repository](https://github.com/jecfish/parcel-demo).
+
+```ts
+/* A TypeScript demo: example.ts */
+
+document.querySelector('button')?.addEventListener('click', () => {
+  const num: number = Math.floor(Math.random() * 101);
+  const greet: string = 'Hello';
+  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
+  console.log(num);
+});
+```
+A compressed version would be:
+
+```js
+/* A compressed JavaScript version of the TypeScript demo: example.min.js  */
+
+document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
+```
+
+However, this optimization can make debugging more challenging. Compressed code with everything in a single line and shorter variable names can make it difficult to pinpoint the source of an issue. That's where source maps come in—they map your compiled code back to the original code.
+
+## Generating source maps
+
+Source maps are files with names ending with `.map` (for example, `example.min.js.map` and `styles.css.map`). They can be generated by most build tools, for example, [Vite](https://vitejs.dev/), [webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), and more. 
+
+Some tools include source maps by default, while others may need additional configuration to produce them.
+
+```js
+/* Example configuration: vite.config.js */
+/* https://vitejs.dev/config/ */
+
+export default defineConfig({
+  build: {
+    sourcemap: true, // enable production source maps
+  },
+  css: {
+    devSourcemap: true // enable CSS source maps during development
+  }
+})
+```
+
+## Understanding the source map
+
+These source map files contain essential information about how the compiled code maps to the original code, enabling developers to debug with ease. Here is an example of a source map.
+
+```js
+{
+  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
+  "sources": ["src/script.ts"],
+  "sourcesContent": ["document.querySelector('button')..."],
+  "names": ["document","querySelector", ...],
+  "version": 3,
+  "file": "example.min.js.map"
+}
+```
+
+To understand each of these fields, you can read the [source map specification](https://bit.ly/sourcemap) or this classic article on [the anatomy of a source map](https://developer.chrome.com/blog/sourcemaps/#the-anatomy-of-a-source-map).
+
+The most critical aspect of a source map is the `mappings` field. It uses a [VLQ base 64 encoded string](https://developer.chrome.com/blog/sourcemaps/#base64-vlq-and-keeping-the-source-map-small) to map lines and locations in the compiled file to the corresponding original file. This mapping can be visualized using a source map visualizer like [source-map-visualization](https://sokra.github.io/source-map-visualization/) and [Source Map Visualization](https://evanw.github.io/source-map-visualization/).
+
+<figure>
+  {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/luYuSy7CYuB3ZdcCgM6A.png", alt="A source map visualization.", width="800", height="483" %}
+  <figcaption>
+    The image shows the visualization of our previous code example above, generated by a <a href="https://sokra.github.io/source-map-visualization/">visualizer</a>.
+  </figcaption>
+</figure>
+ 
+The **generated** column on the left shows the compressed content and the **original** column shows the original source.
+
+The visualizer color codes each line in the **original** column and its corresponding code in  the **generated** column.
+
+The **mappings** section shows the decoded mappings of the code. For example, the entry `65-> 2:2` means:
+
+- **Generated** code:  The word `const` starts at position 65 in the compressed content.
+- **Original** code: The word `const` starts at line 2 and column 2 in the original content.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/VlYPU6oeB2OVcqfRHFbw.png", alt="Mapping entry.", width="800", height="483" %}
+
+This way, developers can quickly identify the relationship between the minified code and the original code, making debugging a smoother process.
+
+Browser Developer Tools apply these source maps to help you pinpoint your debugging issues quicker, right in the browsers.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/rfMBvs6g6bZ1Bxblj7cL.png", alt="Developer Tools applies a source map.", width="800", height="439" %}
+
+The image shows how browser Developer Tools applies source maps and shows the mappings between files.
+
+## Source map extensions
+
+Source maps support extensions. Extensions are custom fields that start with the `x_` naming convention. One example is the `x_google_ignoreList` extension field proposed by Chrome DevTools. See [x_google_ignoreList](https://developer.chrome.com/articles/x-google-ignore-list) to learn more on how these extensions help you focus on your code.
+
+## It's not perfect
+
+In our example, the variable `greet` was optimized away during the build process. The value was directly embedded into the final string output.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2HCLJ3TEHPi3DoNiiTp4.png", alt="Variaqble greet is not map.", width="800", height="483" %}
+
+In this case, when you debug the code, developer tools might not be able to infer and display the actual value. This isn't just the challenges for browser's developer tools. It also makes code monitoring and analysis harder.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/BH1kRkjkjPAdFmeNqKbr.png", alt="Variable greet is undefined.", width="800", height="457" %}
+
+This of course is a solvable problem. One of the ways is to include the scope information in the source maps like other programming languages do with their debug information.
+
+However, this requires the whole ecosystem to work together to improve the source maps specification and implementation. There is an [active discussion](https://github.com/source-map/source-map-rfc/issues/12) on improving the debuggability with source maps.
+
+We look forward to improving source maps and making debugging even less overwhelming!
diff --git a/src/site/content/en/blog/speed-animated-gifs/index.md b/src/site/content/en/blog/speed-animated-gifs/index.md
new file mode 100644
index 00000000000..60eaf9651dd
--- /dev/null
+++ b/src/site/content/en/blog/speed-animated-gifs/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: Avoiding Unnecessary Paints - Animated GIF Edition
+date: 2011-10-21
+authors:
+  - paullewis
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Avoiding paints is critical to achieving a silky smooth frame rate, especially on mobile. Sometimes, however, paints crop up in the most unusual of places. This article looks at why animated GIFs can cause unnecessary paints to occur, and the remarkably simple fix you can apply.
+
+{% Aside %}
+Last time we looked at ways to [avoid hover effects during scrolls](http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/). If you've not seen that, check it out now!
+{% endAside %}
+
+## Layers of loveliness
+
+As you probably know, modern browsers may paint groups of DOM elements into separate "images", called layers. Sometimes there's one layer for the entire page, sometimes there are hundreds or  in rare cases - thousands!
+
+When DOM elements are grouped together into a layer and one of the elements changes visually, we end up having to paint not just the changed element, but __all the other elements in the layer that overlap the changed element as well__. Painting one thing on top of another results in the overwritten pixels being effectively "lost" forever; if you want the original pixels back you need to repaint them.
+
+Sometimes, therefore, we want to isolate one element from the others so that when it gets painted we won't need to repaint the other elements that __haven't__ changed. For example, when you combine a fixed page header with scrollable content, you have to repaint the header each time the content scrolls, as well as the newly visible content. By placing the header in a separate layer, the browser can optimize scrolling. When you scroll, the browser can move the layers around - probably with the help of the GPU - and avoid repainting either layer.
+
+Each additional layer increases memory consumption and adds performance overhead, so the goal is to group the page into as few layers as possible while maintaining good performance.
+
+{% Aside %}
+If you want a more detailed breakdown of how layers are created and used definitely check out [Tom Wiltzius's intro to the subject](http://www.html5rocks.com/en/tutorials/speed/layers/).
+{% endAside %}
+
+## What does this all have to do with animated GIFs?
+
+Well let's have a look at this picture:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Er8KGGjUYDusN9vNDZfH.jpg", alt="A web app broken down into four layers.", width="800", height="532" %}
+  <figcaption>Figure 1: A web app broken down into four layers.</figcaption>
+</figure>
+
+This is a potential layer setup for a simple app. There are four layers here: three of them (layers 2 to 4) are interface elements; the back layer is a loader, which happens to be an animated GIF. In the normal flow you show the loader (layer 1) while your app loads, then as everything finishes you would show the other layers. But here's the key: __you need to hide the animated GIF.__
+
+## But why do I need to hide it?!
+
+Good question. In a perfect world the browser would simply check the GIF’s visibility for you and avoid painting automatically. Unfortunately, checking whether the animated GIF is obscured or visible on the screen is typically __more__ expensive than simply painting it, so it gets painted.
+
+In the best case the GIF is in its own layer and the browser only has to paint and upload it to the GPU. But in the worst case all your elements might be grouped into a single layer and the browser has to repaint __every single element__. And, when it’s done, it still needs to upload everything to the GPU. All of this is work occurs for every GIF frame, despite the fact that the user can’t even see the GIF!
+
+On desktops you can probably get away with this kind of painting behavior because the CPUs and GPUs are more powerful, and there's plenty of bandwidth for transferring data between the two. On mobile, however, painting is extremely expensive so you must take great care.
+
+## Which browsers does this affect?
+
+As is often the way, behaviors differ between browsers. Today Chrome, Safari and Opera all repaint, even if the GIF is obscured. Firefox, on the other hand, figures out that the GIF is obscured and doesn’t need to be repainted. Internet Explorer remains something of a black box, and even in IE11 - since the F12 tools are still being developed - there is no indication as to whether or not any repainting is taking place.
+
+## How can I tell if I have this problem?
+
+The easiest way is to use "Show paint rectangles" in Chrome DevTools. Load DevTools and press the cog in the lower right corner ({% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Q1K5jZRASU3Q7aTfR4p9.png", alt="Cog icon", width="22", height="21" %}) and choose **Show paint rectangles** under the **Rendering** section.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fceVMJ0tb0ZewvAcF5PP.png", alt="Enabling Show paint rectangles inside Chrome DevTools", width="366", height="59" %}
+  <figcaption>Figure 2: Enabling Show paint rectangles inside Chrome DevTools.</figcaption>
+</figure>
+
+Now all you need to do is look for a red rectangle like this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vysbt6HCy7AFVxbZg72s.png", alt="DevTools’ Show Paint Rectangles hints at animated GIF problems with a red rectangle.", width="300", height="500" %}
+  <figcaption>Figure 3: DevTools’ Show Paint Rectangles hints at animated GIF problems with a red rectangle.</figcaption>
+</figure>
+
+The little red box on the screen shows that Chrome is repainting something. You know that there’s a loader GIF hidden behind the other elements, so when you see a red box like this you need to hide the visible elements and check if you have left the animated GIF spinning away. If you have then you need to pop some CSS or JavaScript in place to apply `display: none` or `visibility: hidden` to it or its parent element. Of course if it's just a background image then you should make sure to remove it.
+
+If you want to see an example of this behavior in a live site, check out [Allegro](http://allegro.pl/listing/listing.php?string=phone), where each product’s image has a loader GIF that is obscured rather than explicitly hidden.
+
+## Conclusion
+
+Achieving 60fps means doing __only__ what's needed to render the page and no more. Removing excess paints is a critical step in achieving this goal. Animated GIFs that are left running can trigger unnecessary paints, something which you can find and debug easily with DevTools' Show paint rectangles tool.
+
+Now, you didn't leave that animated kitten loader GIF running forever, did you?
diff --git a/src/site/content/en/blog/speed-at-scale/Speed-at0.png b/src/site/content/en/blog/speed-at-scale/Speed-at0.png
deleted file mode 100755
index ac4780f7aa8..00000000000
Binary files a/src/site/content/en/blog/speed-at-scale/Speed-at0.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-at-scale/Speed-at1.png b/src/site/content/en/blog/speed-at-scale/Speed-at1.png
deleted file mode 100644
index bbc5f62f1e4..00000000000
Binary files a/src/site/content/en/blog/speed-at-scale/Speed-at1.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-at-scale/Speed-at2.png b/src/site/content/en/blog/speed-at-scale/Speed-at2.png
deleted file mode 100644
index d80219912a2..00000000000
Binary files a/src/site/content/en/blog/speed-at-scale/Speed-at2.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-at-scale/index.md b/src/site/content/en/blog/speed-at-scale/index.md
index 446a8f4f0f3..995c8bf039d 100644
--- a/src/site/content/en/blog/speed-at-scale/index.md
+++ b/src/site/content/en/blog/speed-at-scale/index.md
@@ -5,7 +5,7 @@ authors:
   - katiehempenius
   - addyosmani
 date: 2019-05-24
-hero: scale-header.jpg
+hero: image/admin/3ewq4uJrMKiYvuXxkQGI.jpg
 alt: Speedometer on a retro car
 description: |
   For Google I/O 2019, we introduced three new Web Performance initiatives that we hope will lead to better user experiences for everyone.
@@ -24,40 +24,39 @@ over the coming year.
 ## Lighthouse now supports Performance Budgeting
 
 
-[LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets)
+[LightWallet](/use-lighthouse-for-performance-budgets/)
 is a new feature in Lighthouse that adds support for [performance
 budgets](/fast#set-performance-budgets). Performance budgets establish
 standards for the performance of your site. More importantly, they make it is
 easy to identify and fix performance regressions before they ship.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./Speed-at0.png" alt="A LightWallet report showing which assets are over the file size budget." loading="lazy">
+<figure>
+  {% Img src="image/admin/b1hw1bMU0dCIqS45XdfW.png", alt="A LightWallet report showing which assets are over the file size budget.", width="800", height="607" %}
 </figure>
 
 LightWallet is available in the newest version of the Lighthouse CLI and only
 takes a couple minutes to set up. These[
-instructions](https://developers.google.com/web/tools/lighthouse/audits/budgets)
+instructions](/use-lighthouse-for-performance-budgets/)
 provide more information.
 
 Unsure what your budgets should be? Try our experimental [Performance Budget
 Calculator](https://bit.ly/perf-budget-calculator) which can generate a
 LightWallet compatible budget configuration.
 
-## Native image and iframe lazy-loading comes to the web
+## Browser-level image and iframe lazy loading comes to the web
 
 Web pages often contain a large number of images, which contribute to
 data-usage, [page-bloat](https://httparchive.org/reports/state-of-images) and
 slower page loads. Many of these images are offscreen, requiring a user to
 scroll in order to view them.
 
-Until now, you've needed to solve lazy-loading images using a JavaScript
+Until now, you've needed to solve lazy loading images using a JavaScript
 library but that may soon change. This summer, Chrome will be launching support
 for the [loading](https://addyosmani.com/blog/lazy-loading/) attribute which
-brings native `<img>` and `<iframe>` lazy-loading to the web.
+brings standardized `<img>` and `<iframe>` lazy loading to the web.
 
-<figure class="w-figure">
-<img src="./Speed-at1.png" alt="Native lazy-loading highlighting offscreen
-content being loaded on-demand" loading="lazy">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5W51sHaRUB0NEuN0MaFh.png", alt="Browser-level lazy-loading highlighting offscreen content being loaded on-demand", width="800", height="450" %}
 </figure>
 
 The `loading` attribute allows a browser to defer loading offscreen images and
@@ -78,11 +77,11 @@ images and iframe content a little before it comes into the viewport.
 
 The `loading` attribute is implemented behind flags in Chrome Canary. You can
 try out [this demo](https://mathiasbynens.be/demo/img-loading-lazy) in Chrome
-75+ with the `chrome://flags/#enable-lazy-image-loading` and
-`chrome://flags/#enable-lazy-frame-loading` flags turned on.
+75+ with the `about://flags/#enable-lazy-image-loading` and
+`about://flags/#enable-lazy-frame-loading` flags turned on.
 
-A [write-up](https://addyosmani.com/blog/lazy-loading/) on the native
-lazy-loading feature is available with more details.
+A [write-up](https://addyosmani.com/blog/lazy-loading/) on the
+lazy loading feature is available with more details.
 
 ## Google Fonts now supports font-display as a query parameter
 
@@ -104,13 +103,13 @@ has been updated to include `font-display` in the default code embeds (as seem
 below). We hope this will encourage more developers to try out this exciting
 addition.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./Speed-at2.png" alt="Google Fonts embed code with font-display included in the URL as a query-parameter" loading="lazy">
+<figure>
+  {% Img src="image/admin/aJqdPp1xobaYRDNx4aJd.png", alt="Google Fonts embed code with font-display included in the URL as a query-parameter", width="800", height="528" %}
 </figure>
 
 Here's a [demo](https://glitch.com/~truth-bookcase) on Glitch of using display
 with multiple font families. Try it out with [DevTools network
-emulation](https://developers.google.com/web/tools/chrome-devtools/network/#throttle)
+emulation](https://developer.chrome.com/docs/devtools/network/#throttle)
 to see the impact of `font-display: swap`.
 
 ## Watch for more
diff --git a/src/site/content/en/blog/speed-at-scale/scale-header.jpg b/src/site/content/en/blog/speed-at-scale/scale-header.jpg
deleted file mode 100644
index 704b7101999..00000000000
Binary files a/src/site/content/en/blog/speed-at-scale/scale-header.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/speed-html5/index.md b/src/site/content/en/blog/speed-html5/index.md
new file mode 100644
index 00000000000..e6253a64977
--- /dev/null
+++ b/src/site/content/en/blog/speed-html5/index.md
@@ -0,0 +1,497 @@
+---
+layout: post
+title: Improving the performance of your HTML5 App
+authors:
+  - malteubl
+date: 2011-02-14
+tags:
+  - blog
+---
+## Introduction
+
+HTML5 gives us great tools to enhance the visual appearance of web applications. This is especially true in the realm of animations. However, with this new power also come new challenges. Actually these challenges aren't really that new and it might sometimes make sense to ask your friendly desk neighbor, the Flash programmer, how she has overcome similar things in the past.
+
+Anyway, when you work in animation it becomes hugely important that users perceive these animations to be smooth. What we need to realize is that smoothness in animations can't really be created by simply increasing the frames per second beyond any cognitive threshold. Our brain is, unfortunately, smarter than that. What you will learn is that true 30 frames of animation per second (fps) is much better than 60 fps with just a few frames dropped in the middle. People hate jaggedness.
+
+This article will try to give you the tools and techniques to work on improving the experience of your own application.
+
+## The Strategy
+
+By no means do we want to discourage you from building awesome, stunningly visual apps with HTML5.
+
+Then when you notice that performance could be a little better, come back here and read up on how you can improve the elements of your application. It can, of course, help to do some things right in the first place but never let that get in your way of being productive.
+
+## Visual fidelity++ with HTML5
+
+### Hardware Acceleration
+
+Hardware acceleration is an important milestone for overall render performance in the browser. The general scheme is to offload tasks that would otherwise be calculated by the main CPU to the graphics processing unit (GPU) in your computer's graphics adapter. This can yield massive performance gains and can also reduce resource consumption on mobile devices.
+
+#### These aspects of your document can be accelerated by the GPU
+
+- General layout compositing
+- CSS3 transitions
+- CSS3 3D transforms
+- Canvas Drawing
+- WebGL 3D Drawing
+
+While acceleration of canvas and WebGL are special purpose features that might not apply to your specific application the first three aspects can help pretty much every app to become faster.
+
+#### What can be accelerated?
+
+GPU acceleration works by offloading well-defined and specific tasks to special purpose hardware. The general scheme is that your document is broken down into multiple "layers" which are invariant to the aspects of your page that are accelerated. These layers are rendered using the traditional render pipeline. The GPU is then used to composite the layers onto a single page applying the "effects" that can be accelerated on the fly. A possible outcome is that an object that is animated on the screen does not require a single "relayout" of the page while the animation happens.
+
+What you need to take away from that is that you need to make it easy for the rendering engine to identify when it can apply it's GPU acceleration magic. 
+Consider the following example:
+
+{% Aside %}
+You want to animate an element in the browser from left to right. The traditional approach to is to set a JavaScript timer and then repeatedly setting the "left" property of the style object every N milliseconds.
+{% endAside %}
+
+
+While this works, the browser doesn't really know that you are performing something that is supposed to be perceived as smooth animation by a human being. Consider what happens when you achieve the same visual appearance using CSS3 transitions instead:
+
+{% Aside %}
+Now, you simply define the final position of the object and then tell the browser to perform an animation to the final destination over a certain period of time.
+{% endAside %}
+
+How the browser implements this animation is completely hidden from the developer. This in turn means that the browser is able to apply tricks such as GPU acceleration to achieve the defined goal.
+
+There are two useful command-line flags for Chrome to help debugging GPU acceleration:
+
+1. `--show-composited-layer-borders` shows a red border around elements that are
+being manipulated at the GPU level. Good for confirming your manipulations occur within the GPU layer.
+1. `--show-paint-rects` all non-GPU changes are painted and this throws
+a light border around all areas that are repainted. You can see the browser optimizing paint areas in action.
+
+
+Safari has similar runtime flags [described here](http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/).
+
+### CSS3 Transitions
+
+CSS Transitions make style animation trivial for everyone, but they also are a smart performance feature. Because a CSS transition is managed by the browser, the fidelity of its animation can be greatly improved, and in many cases hardware accelerated. Currently WebKit (Chrome, Safari, iOS) have hardware accelerated CSS transforms, but it's coming quickly to other browsers and platforms.
+
+You can use [`transitionEnd`](https://developer.mozilla.org/CSS/CSS_transitions) events in order to script this into powerful combinations, though right now, capturing all supported transition end events means watching `webkitTransitionEnd transitionend oTransitionEnd`.
+
+
+Many libraries have now introduced animation APIs that leverage transitions if present and fall back to standard DOM style animation otherwise. [scripty2](http://scripty2.com/), [YUI transition](http://developer.yahoo.com/yui/3/transition/), [jQuery animate enhanced](http://playground.benbarnett.net/jquery-animate-enhanced/).
+
+### CSS3 Translate
+
+I'm sure you've found yourself animating the x/y position of an element across the page before. You probably manipulated the inline style's left and top properties. With 2D transforms, we can use the `translate()` functionality to replicate this behavior.
+
+We can combo this with DOM animation to use the best thing possible
+
+```html
+<div style="position:relative; height:120px;" class="hwaccel">
+
+  <div style="padding:5px; width:100px; height:100px; background:papayaWhip;
+              position:absolute;" id="box">
+  </div>
+</div>
+
+<script>
+document.querySelector('#box').addEventListener('click', moveIt, false);
+
+function moveIt(evt) {
+  var elem = evt.target;
+
+  if (Modernizr.csstransforms && Modernizr.csstransitions) {
+    // vendor prefixes omitted here for brevity
+    elem.style.transition = 'all 3s ease-out';
+    elem.style.transform = 'translateX(600px)';
+
+  } else {
+    // if an older browser, fall back to jQuery animate
+    jQuery(elem).animate({ 'left': '600px'}, 3000);
+  }
+}
+</script>
+```
+
+We use Modernizr to feature test for CSS 2D Transforms and CSS Transitions, if so we're going to use translate to shift the position. If this is animated using a transition there is a good chance the browser can hardware accelerate it. To give the browser another push in the right direction we'll use the "magic CSS bullet" from above.
+
+If our browser is less capable, we'll fallback to jQuery to move our element. You can pick up the [jQuery Transform polyfill plugin](http://louisremi.github.io/jquery.transform.js/index.html) by Louis-Remi Babe to make this whole thing automatic.
+
+### `window.requestAnimationFrame`
+
+`requestAnimationFrame` was introduced by Mozilla and iterated on by WebKit with the goal of providing you a native API for running animations, whether they be DOM/CSS-based or on `<canvas>` or WebGL. The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. For example, JS-based animations synchronized with CSS transitions or SVG SMIL. Plus, **if you're running the animation loop in a tab that's not visible, the browser won't keep it running**, which means less CPU, GPU, and memory usage, leading to much longer battery life.
+
+For more details on how and why to use `requestAnimationFrame`, view Paul Irish's article [requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/).
+
+## Profiling
+
+When you discover that the speed of your application can be improved, it is time to dig into profiling to find out where optimizations could yield the greatest benefit. Optimizations will often have negative impact on the maintainability of your source code and should thus only be applied if necessary. Profiling tells you which parts of your code would yield the greatest benefits when their performance would be improved.
+
+### JavaScript Profiling
+
+JavaScript profilers give you an overview on the performance of your application on the JavaScript function level by measuring the time it takes to execute each individual function from its starts to its end.
+
+The gross execution time of a function is the overall time it takes to execute it from top to bottom. The net execution time is the gross execution time minus the time it took to execute functions called from the function.
+
+Some functions get called more often than others. Profilers usually give you the time it took for all invocations to run as well as the average and minimum and maximum execution time.
+
+For more details, check out the [Chrome Dev Tools docs on profiling](http://code.google.com/chrome/devtools/docs/profiles.html).
+
+#### The DOM
+
+The performance of JavaScript has a strong influence in to how fluid and responsive your application will feel. It is important to understand that, while JavaScript profilers measure the execution time of your JavaScript, they also indirectly measure the time spent doing DOM operations. These DOM operations are often at the heart of your performance issues.
+
+```js
+function drawArray(array) {
+  for(var i = 0; i < array.length; i++) {
+    document.getElementById('test').innerHTML += array[i]; // No good :(
+  }
+}
+```
+
+E.g. in the code above almost no time is spent executing actual JavaScript. It is still very likely that the drawArray-function will show up in your profiles because it is interacting with the DOM in a very wasteful fashion.
+
+#### Tips and Tricks
+
+##### Anonymous Functions
+
+Anonymous functions are not easy to profile because they inherently don't have a name under which they could show up in the profiler. There are two ways to work around this:
+
+```js
+$('.stuff').each(function() { ... });
+```
+
+rewrite to:
+
+```js
+$('.stuff').each(function workOnStuff() { ... });
+```
+
+It is not commonly known that JavaScript supports naming function expressions. Doing this will make them show up perfectly in the profiler. There is one problem with this solution: The named expression actually puts the function name into the current lexical scope. This might clobber other symbols, so be careful.
+
+##### Profiling long functions
+
+Imagine you have a long function and you suspect that a small part of it might be the reason for your performance problems. There are two ways to find out which part is the problem:
+
+1. The correct method: Refactor your code to not include any long functions.
+1. The evil getting-things-done method: add statements in the form of named self calling functions to your code. If you are a little careful this does not change the semantics and it makes parts of your function show up as individual functions in the profiler:
+```js
+function myLongFunction() {
+  ...
+  (function doAPartOfTheWork() {
+    ...
+  })();
+  ...
+}
+```
+Don't forget to remove these extra functions after profiling is done; or even use them as a starting point to refactor your code.
+
+### DOM Profiling
+
+The latest Chrome Web Inspector development tools contain the new "Timeline View" which shows a timeline of the low level actions performed by the browser. You can use this information to optimize your DOM operations. You should aim to reduce the number of "actions" the browser has to perform while your code executes.
+
+The timeline view can create an immense amount of information. You should thus try to create minimal test cases that you can execute independently.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2TyfAOp4mUpJKOsUzhUW.png", alt="DOM Profiling", width="475", height="173" %}
+</figure>
+
+The image above shows the output of the timeline view for a very simple script. The left pane shows the operations performed by the browser in chronical order, while the timeline in the right pane shows the actual time consumed by an individual operation.
+
+[More info on the timeline view.](http://code.google.com/chrome/devtools/docs/timeline.html) An alternative tool for profiling in Internet Explorer is <a href="">[DynaTrace Ajax Edition](http://www.google.com/url?q=http%3A%2F%2Fajax.dynatrace.com%2Fajax%2Fen%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFXR0N-8Ja89DdI_cyTEA3vdPPP5w).
+
+### Profiling Strategies
+
+#### Single out aspects
+
+When you want to profile your application, try to single out the aspects of its functionality that might trigger slowness as close as possible. Then try to do a profile run that only executes parts of your code that are relevant to these aspects of your application. This will make the profiling data easier to interpret because it is not intermixed with code paths that are not related to your actual problem. Good examples for individual aspects of your application might be:
+
+1. Start up time (activate the profiler, reload application, wait until initialization is complete, stop the profiler.
+1. Click a button and subsequent animation (start profiler, click button, wait until animation is complete, stop profiler).
+
+##### GUI Profiling
+
+Executing only the right part of your application can be harder in a GUI program than when you optimize, say, the ray tracer of your 3D engine. When you, for example, want to profile the stuff that happens when you click a button, you might trigger unrelated mouseover events along the way that make your results less conclusive. Try to avoid that :)
+
+##### Programatic Interface
+
+There is also a programatic interface to activate the debugger. This allows precise control over when profiling starts and when it ends.
+
+Start a profiling with:
+
+`console.profile()`
+
+Stop profiling with:
+
+`console.profileEnd()`
+
+#### Repeatability
+
+When you do profiling make sure you can actually reproduce your results. Only then will you be able to tell whether your optimizations did actually improve things. Also function level profiling is done in the context of your whole computer. It is not an exact science. Individual profile runs might be influenced by many other things happening on your computer:
+
+1. An unrelated timer in your own application that fires while you measure something else.
+1. The garbage collector doing its work.
+1. Another tab in your browser doing hard work in the same operating thread.
+1. Another program on your computer using up the CPU thus making your application slower.
+1. Sudden changes in the gravitational field of the earth.
+
+It also makes sense to execute the same code path multiple times in one profiling session. This way you decrease the influence of above factors and the slow parts may stand out even more clearly.
+
+#### Measure, improve, measure
+
+When you identified a slow spot in your program, try to think of ways to improve the execution behavior. After you changed your code, profile again. If you are satisfied with the result, move on, if you are not seeing an improvement you should probably roll back your change and not leave it in "because it can't hurt".
+
+## Optimization Strategies
+
+### Minimize DOM interaction
+
+A common theme for improving the speed of web client applications is to minimize DOM interaction. While the speed of JavaScript engines has increased by an order of magnitude, accessing the DOM has not gotten faster at the same rate. This is also for very practical reasons never going to happen (things like layouting and drawing stuff on a screen just take time).
+
+#### Cache DOM Nodes
+
+Whenever you retrieve a node or a list of nodes from the DOM, try to think about whether you might be able to reuse them in a later computation (or even just the next loop iteration). As long as you don't actually add or delete nodes in the relevant area, this is often the case.
+
+Before:
+
+```js
+function getElements() {
+  return $('.my-class');
+}
+```
+
+After:
+
+```js
+var cachedElements;
+function getElements() {
+  if (cachedElements) {
+    return cachedElements;
+  }
+  cachedElements = $('.my-class');
+  return cachedElements;
+}
+```
+
+#### Cache Attribute Values
+
+The same way you can cache DOM nodes you can also cache the values of attributes. Imagine you are animating an attribute of a node's style. If you know that you (as in that part of the code) are the only one that will ever touch that attribute you can cache the last value on every iteration so that you will not have to read it repeatedly.
+
+Before:
+
+```js
+setInterval(function() {
+  var ele = $('#element');
+  var left = parseInt(ele.css('left'), 10);
+  ele.css('left', (left + 5) + 'px');
+}, 1000 / 30);
+```
+
+
+After:
+```js
+var ele = $('#element');
+var left = parseInt(ele.css('left'), 10);
+setInterval(function() {
+  left += 5;
+  ele.css('left', left + 'px');
+}, 1000 / 30);
+```
+
+#### Move DOM Manipulation Out of Loops
+
+Loops are often hot points for optimization. Try to think of ways to decouple actual number crunching to working with the DOM. It is often possible to do a calculation and then, after it is done, apply all the results in one go.
+
+Before:
+
+```js
+document.getElementById('target').innerHTML = '';
+for(var i = 0; i < array.length; i++) {
+  var val = doSomething(array[i]);
+  document.getElementById('target').innerHTML += val;
+}
+```
+
+After:
+
+```js
+var stringBuilder = [];
+for(var i = 0; i < array.length; i++) {
+  var val = doSomething(array[i]);
+  stringBuilder.push(val);
+}
+document.getElementById('target').innerHTML = stringBuilder.join('');
+```
+
+#### Redraws and Reflows
+
+As discussed earlier accessing the DOM is relatively slow. It becomes very slow when your code is reading a value which has to be recalculated because your code recently modified something related in the DOM. Thus, it should be avoided to intermix reading and writing access to the DOM. Ideally your code should always be grouped in two phases:
+
+- Phase 1: Read DOM values necessary for your code
+- Phase 2: Modify the DOM
+
+Try not to program a pattern such as:
+
+- Phase 1: Read DOM values
+- Phase 2: Modify the DOM
+- Phase 3: Read some more
+- Phase 4: Modify the DOM somewhere else.
+
+Before:
+
+```js
+function paintSlow() {
+  var left1 = $('#thing1').css('left');
+  $('#otherThing1').css('left', left);
+  var left2 = $('#thing2').css('left');
+  $('#otherThing2').css('left', left);
+}
+```
+
+After:
+
+```js
+function paintFast() {
+  var left1 = $('#thing1').css('left');
+  var left2 = $('#thing2').css('left');
+  $('#otherThing1').css('left', left);
+  $('#otherThing2').css('left', left);
+}
+```
+
+This advice should be considered for actions happening within one JavaScript execution context. (e.g. within an event handler, within an interval handler or when handling an ajax response.)
+
+Executing the function `paintSlow()` from above creates this image:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aHTQuhABgASDfKuSWOSh.png", alt="paintSlow()", width="536", height="212" %}
+</figure>
+
+Switching to the faster implementation yields this image:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PEbeR9lTvj6mDheaWkCe.png", alt="Faster implementation", width="360", height="234" %}
+</figure>
+
+These images show that reordering the way your code accesses the DOM can greatly enhance render performance. In this case the original code has to recalculate styles and layout the page twice to create the same result. Similar optimization can be applied to basically all "real world" code and yield some really dramatic results.
+
+Read more: [**Rendering: repaint, reflow/relayout, restyle** by Stoyan Stefanov](http://calendar.perfplanet.com/2009/rendering-repaint-reflow-relayout-restyle/)
+
+#### Redraws and the Event Loop
+
+JavaScript execution in the browser follows an "Event Loop" model. By default the browser is in an "idle" state. This state can be interrupted by events from user interactions or such things as JavaScript timers or Ajax callbacks. Whenever a piece of JavaScript runs at such an interruption point, the browser will usually wait for it to finish until it repaints the screen (There might be exceptions for extremely long running JavaScripts or in cases such as alert-boxes which effectively interrupt the JavaScript execution).
+
+Consequences
+
+1. If your JavaScript animation cycles take longer than 1/30 seconds to execute, you will not be able to create smooth animations because the browser will not repaint during the JS execution. When you expect to also handle user events you need to be much faster.
+1. Sometimes it comes in handy to delay some JavaScript actions until just a little bit later.
+E.g. `setTimeout(function() { ... }, 0)`
+This effectively tells the browser to execute the callback as soon as the event loop is idle again (effectively some browsers will wait at least 10ms). You need to be aware that this will create two JavaScript execution cycles which are very close together in time. Both might trigger a repaint of the screen which might double the overall time spent with painting. Whether this actually triggers two paints depends on heuristics in the browser.
+
+Regular version:
+
+```js
+function paintFast() {
+  var height1 = $('#thing1').css('height');
+  var height2 = $('#thing2').css('height');
+  $('#otherThing1').css('height', '20px');
+  $('#otherThing2').css('height', '20px');
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2TyfAOp4mUpJKOsUzhUW.png", alt="Redraws and the Event Loop", width="475", height="173" %}
+</figure>
+
+Lets add some delay:
+
+```js
+function paintALittleLater() {
+  var height1 = $('#thing1').css('height');
+  var height2 = $('#thing2').css('height');
+  $('#otherThing1').css('height', '20px');
+  setTimeout(function() {
+    $('#otherThing2').css('height', '20px');
+  }, 10)
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PEbeR9lTvj6mDheaWkCe.png", alt="Delay", width="360", height="234" %}
+</figure>
+
+The delayed version shows that the browser paints twice although the two changes to the page are only 1/100 of a second a part.
+
+### Lazy Initialization
+
+Users want web apps that load fast and feel responsive. However, users have different thresholds into what they perceive as slow depending on the action that they do. E.g. an app should never do a lot of computation on a mouseover event because this might create a bad user experience while the user continues to move his mouse. However, users are used to accepting a little delay after they clicked on a button.
+
+Thus it might make sense to move your initialization code to be executed as late as possible (e.g. when the user clicks a button that activates a particular component of your application).
+
+Before:
+```js
+var things = $('.ele > .other * div.className');
+$('#button').click(function() { things.show() });
+```
+
+After:
+```js
+$('#button').click(function() { $('.ele > .other * div.className').show() });
+```
+
+### Event Delegation
+
+Spreading event handlers across a page might take a relatively long time and can also be tedious once elements are dynamically replaced which then requires reattaching event handlers to the new elements.
+
+The solution in this case is to use a technique called event delegation. Instead of attaching individual event handlers to elements, the bubbling nature of many browser events is used by actually attaching the event handler to a parent node and checking the target node of the event to see if the event is of interest.
+
+In jQuery this can be easily expressed as:
+
+```js
+$('#parentNode').delegate('.button', 'click', function() { ... });
+```
+
+#### When not to use event delegation
+
+Sometimes the opposite can be true: You are using event delegation and you're having a performance problem. Basically event delegation allows constant-complexity initialization time. However, the price of checking if an event is of interest has to be paid for every invocation of that event. This might come in expensive, especially for events that occur frequently like "mouseover" or even "mousemove".
+
+## Typical Problems and Solutions
+
+### The stuff I do in `$(document).ready` takes a long time
+
+Malte's personal advice: Never do anything in `$(document).ready`. Try to deliver your document in its final form. OK, you are allowed to register event listeners, but only using id-selector and/or using event delegation. For expensive events such as "mousemove", delay the registration until they are needed (mouseover event on the relevant element).
+
+And if you really need to do stuff, such as making an Ajax request to get actual data, then show a nice animation; you might want to include the animation as a data URI if it is an animated GIF or the like.
+
+### Since I added a Flash movie to the page everything is really slow
+
+Adding Flash to a page will always slow down rendering a little because the final layout of the window has to be "negotiated" between the browser and the Flash plugin. When you cannot completely avoid putting Flash on your pages, make sure you set the "wmode" Flash-parameter to the value "window" (which is the default). This will disable the ability to composite HTML and Flash elements (You won't be able to see an HTML element that lies above the Flash movie and your Flash movie cannot be transparent). This might be an inconvenience but it will dramatically improve your performance. For example check out the way that [youtube.com](http://youtube.com) carefully avoids placing layers above the main movie player.
+
+### I'm saving things to localStorage, now my application stutters
+
+Writing to localStorage is a synchronous operations that involves spinning up your hard disk. You never want to do "long running" synchronous operations while doing animations. Move the access to localStorage to a spot in your code where you are sure that the user is idle and no animations are going on.
+
+### Profiling points to a jQuery selector being really slow
+
+First you want to make sure that your selector can be run through [document.querySelectorAll](https://developer.mozilla.org/DOM/Document.querySelectorAll). You can test that in the JavaScript console. If there is an exception rewrite your selector to not use any special extension of your JavaScript framework. This will speed up your selector in modern browsers by an order of magnitude.
+
+If this doesn't help or if you also want to be fast in modern browsers, follow these guidelines:
+
+- Be as specific on the right side of your selector as possible.
+- Use a tag name that you don't use often as the rightmost selector part.
+- If nothing helps, think about rewriting things so you can use an id-selector
+
+### All these DOM manipulations take a long time
+
+A bunch of DOM node inserts, removes and updates can be really slow. This can generally be optimized by generating a large string of html and the using `domNode.innerHTML = newHTML` to replace the old content. Note that this might be really bad for maintainability and might create memory links in IE so be careful.
+
+Another common problem is that your initialization code might create a lot of HTML. E.g. a jQuery plugin that transforms a select box into a bunch of divs because that is what the design people wanted in ignorance of UX best practices. If you really want your page to be fast, never do that. Instead deliver all the markup from the server side in its final form. This again has many problems so think hard whether the speed is worth the tradeoff.
+
+## Tools
+
+1. [JSPerf - Benchmark little snippets of JavaScript](http://jsperf.com)
+1. [Firebug - For profiling in Firefox](http://getfirebug.com/)
+1. [Google Chrome Developer Tools](http://code.google.com/chrome/devtools/) (Available as WebInspector in Safari)
+1. [DOM Monster - For optimizing DOM performance](http://mir.aculo.us/dom-monster/)
+1. [DynaTrace Ajax Edition - For profiling and paint optimizations in Internet Explorer](http://ajax.dynatrace.com/ajax)
+
+## Further reading
+
+1. [Google Speed](http://code.google.com/speed/)
+1. [Paul Irish on jQuery Performance](http://paulirish.com/2009/perf/)
+1. [Extreme JavaScript Performance (Slide Deck)](http://www.slideshare.net/madrobby/extreme-javascript-performance)
\ No newline at end of file
diff --git a/src/site/content/en/blog/speed-layers/index.md b/src/site/content/en/blog/speed-layers/index.md
new file mode 100644
index 00000000000..1d4c60ded21
--- /dev/null
+++ b/src/site/content/en/blog/speed-layers/index.md
@@ -0,0 +1,224 @@
+---
+layout: post
+title: Accelerated Rendering in Chrome
+subhead: The layer model
+authors:
+  - tomwiltzius
+date: 2013-03-11
+tags:
+  - blog
+---
+
+## Introduction
+
+For most web developers the fundamental model of a web page is the DOM. Rendering is the often obscure process of turning this representation of a page into a picture on the screen. Modern browsers have changed the way rendering works in recent years to take advantage of graphics cards: this is often vaguely referred to as “hardware acceleration”. When talking about a normal web page (i.e. not Canvas2D or WebGL), what does that term really mean? This article explains the basic model that underpins hardware accelerated rendering of web content in Chrome.
+
+### Big, Fatty Caveats
+
+We’re talking about WebKit here, and more specifically we’re talking about the Chromium port of WebKit. This article covers implementation details of Chrome, not web platform features. The web platform and standards don’t codify this level of implementation detail, so there are no guarantees anything in this article will apply to other browsers, but knowledge of internals can nevertheless be useful for advanced debugging and performance tuning.
+
+Also, note that this entire article is discussing a core piece of Chrome’s rendering architecture that’s changing very fast. This article attempts to cover only stuff that’s unlikely to change, but no guarantees that it’ll all still apply in six months.
+
+It’s important to understand that Chrome has had two different rendering paths for a while now: the hardware-accelerated path and the older software path. As of this writing all pages go down the hardware accelerated path on Windows, ChromeOS, and Chrome for Android. On Mac and Linux only pages that need compositing for some of their content go down the accelerated path (see below for more on what would require compositing), but soon all pages will go down the accelerated path there, too.
+
+Lastly, we’re peeking under the hood of the rendering engine and looking at features of it that have a big impact on performance. When trying to improve the performance of your own site it can be helpful to understand the layer model, but it’s also easy to shoot yourself in the foot: layers are useful constructs, but creating lots of them can introduce overhead throughout the graphics stack. Consider yourself forewarned!
+
+## From the DOM to the Screen
+
+### Introducing Layers
+
+Once a page is loaded and parsed, it's represented in the browser as a structure many web developers are familiar with: DOM. When rendering a page, however, the browser has a series of intermediate representations that aren’t directly exposed to developers. The most important of these structures is a layer.
+
+In Chrome there are actually several different types of layers: RenderLayers, which are responsible for subtrees of the DOM, and GraphicsLayers, which are responsible for subtrees of RenderLayers. The latter is most interesting to us here, because GraphicsLayers are what get uploaded to the GPU as textures. I’ll just say “layer” from here on out to mean GraphicsLayer.
+
+Quick aside on GPU terminology: what’s a texture? Think of it as a bitmap image that’s moved from main memory (i.e. RAM) to video memory (i.e. VRAM, on your GPU). Once it’s on the GPU, you can map it to a mesh geometry -- in video games or CAD programs, this technique is used to give skeletal 3D models “skin.” Chrome uses textures to get chunks of web page content onto the GPU. Textures can be cheaply mapped to different positions and transformations by applying them to a really simple rectangular mesh. This is how 3D CSS works, and it’s also great for fast scrolling -- but more on both of these later.
+
+Let’s look at a couple examples to illustrate the layer concept.
+
+A very useful tool when studying layers in Chrome is the “show composited layer borders” flag in the settings (i.e. little cog icon) in Dev Tools, under the “rendering” heading. It very simply highlights where layers are on-screen. Let’s turn it on. These screenshots and examples are all taken from the latest Chrome Canary, Chrome 27 at the time of this writing.
+
+#### Figure 1: A single-layer page
+
+```html
+<!doctype html>
+<html>
+<body>
+  <div>I am a strange root.</div>
+</body>
+</html>
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8MgP6ksmtGYtdhxpOD3d.png", alt="Screenshot of composited layer render borders around the page's base layer", width="800", height="546" %}
+<figcaption>Screenshot of composited layer render borders around the page's base layer</figcaption>
+</figure>
+
+This page has just one layer. The blue grid represents tiles, which you can think of as sub-units of a layer that Chrome uses to upload parts of a large layer at a time to the GPU. They aren’t really important here.
+
+#### Figure 2: An element in its own layer
+
+```html
+<!doctype html>
+<html>
+<body>
+  <div style="transform: rotateY(30deg) rotateX(-30deg); width: 200px;">
+    I am a strange root.
+  </div>
+</body>
+</html>
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RPnnbpETWy8imXGcdyzB.png", alt="Screenshot of rotated layer's render borders", width="800", height="546" %}
+<figcaption>Screenshot of rotated layer's render borders</figcaption>
+</figure>
+
+By putting a 3D CSS property on the `<div>` that rotates it, we can see what it looks like when an element gets its own layer: note the orange border, which outlines a layer in this view.
+
+### Layer Creation Criteria
+
+What else gets its own layer? Chrome’s heuristics here have evolved over time and continue to, but currently any of the following trigger layer creation:
+
+- 3D or perspective transform CSS properties
+- `<video>` elements using accelerated video decoding
+- `<canvas>` elements with a 3D (WebGL) context or accelerated 2D context
+- Composited plugins (i.e. Flash)
+- Elements with CSS animation for their opacity or using an animated transform
+- Elements with accelerated CSS filters
+- Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
+- Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
+
+### Practical Implications: Animation
+
+We can move layers around, too, which makes them very useful for animation.
+
+#### Figure 3: Animated Layers
+
+```html
+<!doctype html>
+<html>
+<head>
+  <style>
+  div {
+    animation-duration: 5s;
+    animation-name: slide;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    width: 200px;
+    height: 200px;
+    margin: 100px;
+    background-color: gray;
+  }
+  @keyframes slide {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(120deg);
+    }
+  }
+  </style>
+</head>
+<body>
+  <div>I am a strange root.</div>
+</body>
+</html>
+```
+
+As mentioned earlier, layers are really useful for moving around static web content. In the basic case, Chrome paints the contents of a layer into a software bitmap before uploading it to the GPU as a texture. If that content doesn’t change in the future, it doesn’t need to be repainted. This is a Good Thing: repainting takes time that can be spent on other stuff, like running JavaScript, and if the paint is long it causes hitches or delays in animations.
+
+See, for instance, this view of Dev Tools timeline: there are no paint operations while this layer is rotating back and forth.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/DR2XNrza5wIEtmUvOCOV.png", alt="Screenshot of Dev Tools timeline during animation", width="800", height="613" %}
+<figcaption>Screenshot of Dev Tools timeline during animation</figcaption>
+</figure>
+
+### Invalid! Repainting
+
+But if the layer’s content changes, it has to be repainted.
+
+#### Figure 4: Repainting Layers
+
+```html
+<!doctype html>
+<html>
+<head>
+  <style>
+  div {
+    animation-duration: 5s;
+    animation-name: slide;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    width: 200px;
+    height: 200px;
+    margin: 100px;
+    background-color: gray;
+  }
+  @keyframes slide {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(120deg);
+    }
+  }
+  </style>
+</head>
+<body>
+  <div id="foo">I am a strange root.</div>
+  <input id="paint" type="button" value="repaint">
+  <script>
+    var w = 200;
+    document.getElementById('paint').onclick = function() {
+      document.getElementById('foo').style.width = (w++) + 'px';
+    }
+  </script>
+</body>
+</html>
+```
+
+Every time the input element is clicked the rotating element gets 1px wider. This causes relayout and repainting of the entire element, which in this case is an entire layer.
+
+A good way to see what’s getting painted is with the “show paint rects” tool in Dev Tools, also under the “Rendering” heading of Dev Tools’ settings. After turning it on, notice that the animated element and the button both flash red when the button is clicked.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y5Hc9g99nIZKq20FpkIH.png", alt="Screenshot of show paint rects checkbox", width="800", height="613" %}
+<figcaption>Screenshot of show paint rects checkbox</figcaption>
+</figure>
+
+The paint events show up in the Dev Tools timeline, too. Sharp-eyed readers might notice there are two paint events there: one for the layer, and one for the button itself, which gets repainted when it changes to/from its depressed state.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/kjuxPtqQY01XKyP9oLkL.png", alt="Screenshot of Dev Tools Timeline repainting a layer", width="800", height="876" %}
+<figcaption>Screenshot of Dev Tools Timeline repainting a layer</figcaption></figure>
+
+Note that Chrome doesn’t always need to repaint the entire layer, it tries to be smart about only repainting the part of the DOM that’s been invalidated. In this case, the DOM element that we modified is the size of the entire layer. But in many other cases, there will be lots of DOM elements in a layer.
+
+An obvious next question is what causes an invalidation and forces a repaint. This is tricky to answer exhaustively because there are a lot of edge cases that can force invalidations. The most common cause is dirtying the DOM by manipulating CSS styles or causing relayout. Tony Gentilcore has a great [blog post on what causes relayout](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html), and Stoyan Stefanov has an [article that covers painting](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/) in more detail (but it ends with just painting, not this fancy compositing stuff).
+
+The best way to figure out if its affecting something you’re working on is to use the Dev Tools Timeline and Show Paint Rects tools to see if you’re repainting when you wish you weren’t, then try to identify where you dirtied the DOM right before that relayout/repaint. If painting is inevitable but seems to be taking unreasonably long, check out [Eberhard Gräther’s article](http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode) on continuous painting mode in Dev Tools.
+
+### Putting it together: DOM to Screen
+
+So how does Chrome turn the DOM into a screen image? Conceptually, it:
+
+1. Takes the DOM and splits it up into layers
+1. Paints each of these layers independently into software bitmaps
+1. Uploads them to the GPU as textures
+1. Composites the various layers together into the final screen image.
+
+That all needs to happen the first time Chrome produces a frame of a web page. But then it can take some shortcuts for future frames:
+
+1. If certain CSS properties change, it isn’t necessary to repaint anything. Chrome can just recomposite the existing layers that are already sitting on the GPU as textures, but with different compositing properties (e.g. in different positions, with different opacities, etc).
+1. If part of a layer gets invalidated, it gets repainted and re-uploaded. If its content remains the same but its composited attributes change (e.g. it gets translated or its opacity changes), Chrome can leave it on the GPU and recomposite to make a new frame.
+
+As should now be clear, the layer-based compositing model has deep implications for rendering performance. Compositing is comparably cheap when nothing needs to be painted, so avoiding repaints of layers is a good overall goal when trying to debug rendering perf. Savvy developers will take a look at the list of compositing triggers above and realize that its possible to easily force the creation of layers. But beware just blindly creating them, as they’re not free: they take up memory in system RAM and on the GPU (particularly limited on mobile devices) and having lots of them can introduce other overhead in the logic keeps track of which are visible. Many layers can also actually increase time spent rasterizing if they layers are large and overlap a lot where they didn’t previously, leading to what’s sometimes referred to as “overdraw”. So use your knowledge wisely!
+
+That’s all for now. Stay tuned for a couple more articles on practical implications of the layer model.
+
+## Additional Resources
+
+- [Scrolling Performance](http://www.html5rocks.com/en/tutorials/speed/scrolling/)
+- [Profiling Long Paint Times with DevTools' Continuous Painting Mode](http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode)
+- [http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/](http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/)
\ No newline at end of file
diff --git a/src/site/content/en/blog/speed-parallax/index.md b/src/site/content/en/blog/speed-parallax/index.md
new file mode 100644
index 00000000000..0671abd845a
--- /dev/null
+++ b/src/site/content/en/blog/speed-parallax/index.md
@@ -0,0 +1,174 @@
+---
+layout: post
+title: Parallaxin'
+authors:
+  - paullewis
+date: 2011-12-20
+tags:
+  - blog
+---
+
+## Introduction
+
+Parallax sites have been all the rage recently, just take a look at these:
+
+- [Old Pulteney Row to the Pole](http://www.rowtothepole.com/)
+- [Adidas Snowboarding](http://www.adidas.com/com/apps/snowboarding/)
+- [BBC News - James Bond: Cars, catchphrases and kisses](http://www.bbc.co.uk/news/entertainment-arts-20026367)
+
+If you’re not familiar with them, they’re the sites where the visual structure of the page changes as you scroll. Normally elements within the page scale, rotate or move proportionally to the scroll position on the page.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fCJqpmsQOPiUG5ax4KrH.jpg", alt="A demo parallax page", width="800", height="394" %}
+  <figcaption>Our demo page complete with parallax effect</figcaption>
+</figure>
+
+Whether or not you like parallaxing sites is one thing, but what you can say pretty confidently is that they’re a black hole of performance. The reason for this is that browsers tend to be optimized for the case where new content appears at the top or bottom of the screen when you scroll (depending on your scroll direction) and, in general terms, the browsers work best when very little changes visually during a scroll. For a parallax site that’s rarely the case since many times large visual elements all over the page change, causing the browser to do a repaint of the whole page.
+
+It is reasonable to generalize a parallaxing site like this:
+
+- Background elements which, as you scroll up and down, change their position, rotation and scale.
+- Page content, such as text or smaller images, which scrolls in the typical top-to-bottom fashion.
+
+We previously covered [scrolling performance](http://www.html5rocks.com/en/tutorials/speed/scrolling/) and the ways in which you can look to improve your app’s responsiveness, and this article builds on that foundation so it may be worth reading that if you’ve not done so already.
+
+So the question is if you’re building a parallax scrolling site are you locked into expensive repaints or are there alternative approaches you can take to maximise performance? Let’s take a look at our options.
+
+## Option 1: Use DOM elements and absolute positions
+
+This appears to be the default approach that most people take. There are a bunch of elements within the page, and whenever a scroll event is fired a bunch of visual updates are done to transform them.
+
+If you start the DevTools Timeline in frame mode and scroll around you’ll notice that there are expensive full-screen paint operations, and if you scroll a lot you may see several scroll events inside a single frame, each of which is going to trigger layout work.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tVfxqBWBAaEKFiqvIqfW.png", alt="Chrome DevTools without debounced scroll events.", width="800", height="478" %}
+  <figcaption>DevTools showing large paints and multiple event-triggered layouts in a single frame.</figcaption>
+</figure>
+
+The important thing to bear in mind is that to hit 60fps (matching the typical monitor refresh rate of 60Hz) we have just over 16ms to get everything done. In this first version we’re performing our visual updates every time we get a scroll event, but as we’ve discussed in previous articles on [leaner, meaner animations with requestAnimationFrame](http://www.html5rocks.com/tutorials/speed/animations/) and [scrolling performance](http://www.html5rocks.com/tutorials/speed/scrolling/), this doesn’t coincide with the browser’s update schedule, and so we either miss frames or do too much work inside each one. That could easily result in a janky and unnatural feel to your site, which leads to disappointed users and unhappy kittens.
+
+Let’s move the update code out from the scroll event to a `requestAnimationFrame` callback and simply capture the scroll value in the scroll event’s callback.
+
+If you repeat the scrolling test you’ll possibly notice a slight improvement, although not much. The reason is that the layout operation that we trigger by scrolling isn’t all that expensive, but in other use-cases it really could be. Now at least we are only performing __one layout__ operation in each frame.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OZJVP13CyLgILY3GLIwk.png", alt="Chrome DevTools with debounced scroll events.", width="800", height="489" %}
+  <figcaption>DevTools showing large paints and multiple event-triggered layouts in a single frame.</figcaption>
+</figure>
+
+We can now handle one or one hundred scroll events per frame but crucially we only store the most recent value for use whenever the `requestAnimationFrame` callback runs and performs our visual updates. The point is you’ve moved from attempting to force visual updates every time you receive a scroll event to requesting that the browser give you an appropriate window in which to do them. Aren’t you sweet?
+
+The main problem with this approach, `requestAnimationFrame` or not, is that we essentially have one layer for the whole page, and by moving these visual elements around we require large (and expensive) repaints. Typically speaking the painting is a blocking operation (although that is [changing](http://www.chromium.org/developers/design-documents/impl-side-painting)), meaning that the browser can’t do any other work and we often run way over our frame’s budget of 16ms and things remain janky.
+
+## Option 2: Use DOM elements and 3D transforms
+
+Instead of using absolute positions another approach we can take it is to apply 3D transforms to the elements. In this situation we see that the elements with the 3D transforms applied are given a new layer per element and, in WebKit browsers, it often also causes a switch over to the hardware compositor. In Option 1, by contrast, we had one large layer for the page that needed to be repainted when anything changed and all the painting and compositing was handled by the CPU.
+
+That means with __this__ option, things are different: we potentially have one layer for any element to which we apply a 3D transform. If all we do from this point is more transformations on the elements we won’t need to repaint the layer, and the GPU can deal with moving the elements around and compositing the final page together.
+
+Many times people just use the `-webkit-transform: translateZ(0);` hack and see magical performance improvements, and while this works today there are problems:
+
+1. It’s not cross-browser compatible.
+1. It forces the browser’s hand by creating a new layer for every transformed element. Lots of layers can bring other performance bottlenecks, so use sparingly!
+1. It’s been [disabled for some WebKit ports](http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/_index.html#//apple_ref/doc/uid/TP40012166-CH1-SW19) (fourth bullet from the bottom!).
+
+If you go down the 3D translation route be cautious, it’s a temporary solution to your problem! Ideally speaking we would see similar rendering characteristics from 2D transforms as we do with 3D. Browsers are progressing at a phenomenal rate, so hopefully before that's what we'll see.
+
+Finally, you should aim to avoid paints wherever you can and simply move existing elements around the page. By way of example, it is a typical approach in parallax sites to use fixed height divs and change their background position to provide the effect. Unfortunately that means that the element needs to be repainted on every pass, which can cost you in terms of performance. Instead you should, if you can, create the element (wrap it inside an div with `overflow: hidden` if necessary) and simply translate it instead.
+
+## Option 3: Use a fixed position canvas or WebGL
+
+The final option we’re going to consider is to use a fixed position canvas at the back of the page into which we will draw our transformed images. At first glance that might not seem like the most performant solution, but there are actually a few benefits to this approach:
+
+- We no longer require as much compositor work due to only having one element, the canvas.
+- We’re effectively dealing with a single __hardware accelerated__ bitmap.
+- The Canvas2D API is a great fit for the kind of transformations we’re looking to perform, meaning development and maintenance is more manageable.
+
+Using a canvas element gives us a new layer, but it’s just __one__ layer, whereas in Option 2 we were actually given a new layer for __every__ element with a 3D transform applied, so we have an increased workload compositing all those layers together. This is also the most compatible solution today in light of the differing cross-browser implementations of transforms.
+
+```js
+
+/**
+ * Updates and draws in the underlying visual elements to the canvas.
+ */
+function updateElements () {
+
+  var relativeY = lastScrollY / h;
+
+  // Fill the canvas up
+  context.fillStyle = "#1e2124";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  // Draw the background
+  context.drawImage(bg, 0, pos(0, -3600, relativeY, 0));
+
+  // Draw each of the blobs in turn
+  context.drawImage(blob1, 484, pos(254, -4400, relativeY, 0));
+  context.drawImage(blob2, 84, pos(954, -5400, relativeY, 0));
+  context.drawImage(blob3, 584, pos(1054, -3900, relativeY, 0));
+  context.drawImage(blob4, 44, pos(1400, -6900, relativeY, 0));
+  context.drawImage(blob5, -40, pos(1730, -5900, relativeY, 0));
+  context.drawImage(blob6, 325, pos(2860, -7900, relativeY, 0));
+  context.drawImage(blob7, 725, pos(2550, -4900, relativeY, 0));
+  context.drawImage(blob8, 570, pos(2300, -3700, relativeY, 0));
+  context.drawImage(blob9, 640, pos(3700, -9000, relativeY, 0));
+
+  // Allow another rAF call to be scheduled
+  ticking = false;
+}
+
+/**
+ * Calculates a relative disposition given the page's scroll
+ * range normalized from 0 to 1
+ * @param {number} base The starting value.
+ * @param {number} range The amount of pixels it can move.
+ * @param {number} relY The normalized scroll value.
+ * @param {number} offset A base normalized value from which to start the scroll behavior.
+ * @returns {number} The updated position value.
+ */
+function pos(base, range, relY, offset) {
+  return base + limit(0, 1, relY - offset) * range;
+}
+
+/**
+ * Clamps a number to a range.
+ * @param {number} min The minimum value.
+ * @param {number} max The maximum value.
+ * @param {number} value The value to limit.
+ * @returns {number} The clamped value.
+ */
+function limit(min, max, value) {
+  return Math.max(min, Math.min(max, value));
+}
+```
+
+This approach really works where you’re dealing with large images (or other elements that can be easily written into a canvas), and certainly dealing with large blocks of text would be more challenging, but depending on your site it may prove to be the most appropriate solution. If you __do__ have to deal with text in the canvas you would have to use the `fillText` API method, but it’s at the cost of accessibility (you just rasterized the text into a bitmap!) and you will now have to deal with line wrapping and a whole heap of other issues. If you can avoid it, you really should, and you'd likely be better served using the transforms approach above.
+
+Seeing as we’re taking this as far as possible, there’s no reason to presume that the parallax work should be done inside a canvas element. If the browser supports it we could use WebGL. The key here is that WebGL has the most direct route of all APIs to the graphics card and, as such, is your most likely candidate for achieving 60fps, especially if the site’s effects are complex.
+
+Your immediate reaction might be that WebGL is overkill, or that it isn’t ubiquitous in terms of support, but if you use something like [Three.js](https://github.com/mrdoob/three.js/) then you can always fall back to using a canvas element and your code is abstracted in a consistent and friendly manner. All we need to do is use [Modernizr](http://modernizr.com/) to check for the appropriate API support:
+
+```js
+// check for WebGL support, otherwise switch to canvas
+if (Modernizr.webgl) {
+  renderer = new THREE.WebGLRenderer();
+} else if (Modernizr.canvas) {
+  renderer = new THREE.CanvasRenderer();
+}
+```
+
+As a final thought on this approach, if you’re not a big fan of adding extra elements to the page you can always [use a canvas as a background element](http://updates.html5rocks.com/2012/12/Canvas-driven-background-images) in both Firefox and WebKit-based browsers. That’s not ubiquitous, obviously, so as usual you should treat it with caution.
+
+## The choice is yours
+
+The main reason developers default to absolutely positioned elements rather than any of the other options may simply be the ubiquity of support. This is, to some degree, illusory, since the older browsers that are being targeted are likely to provide an extremely poor rendering experience. Even in today’s modern browsers using absolutely positioned elements doesn’t necessarily result in good performance!
+
+Transforms, certainly the 3D kind, offer you the ability to work directly with DOM elements and achieve a solid frame rate. The key to success here is to avoid painting wherever you can and simply try and move elements around. Do bear in mind that the way that WebKit browsers create layers doesn't necessarily correlate to other browser engines, so be sure to test it before committing yourself to that solution.
+
+If you're aiming just for the top tier of browsers, and are able to render the site using canvases, that might the best option for you. Certainly if you were to use [Three.js](https://github.com/mrdoob/three.js/) you should be able to swap and change between renderers very easily depending on the support you require.
+
+## Conclusion
+
+We’ve assessed a few approaches to dealing with parallax sites, from absolutely positioned elements to using a fixed position canvas. The implementation you take will, of course, depends on what you’re trying to achieve and the specific design you’re working with, but it’s always good to know you have options.
+
+And as always, whichever approach you try: **don’t guess it, test it**.
diff --git a/src/site/content/en/blog/speed-quick/index.md b/src/site/content/en/blog/speed-quick/index.md
new file mode 100644
index 00000000000..8472e0f0ae1
--- /dev/null
+++ b/src/site/content/en/blog/speed-quick/index.md
@@ -0,0 +1,166 @@
+---
+layout: post
+title: Best practices for a faster web app with HTML5
+authors:
+  - paulirish
+date: 2010-06-18
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+## Introduction
+
+Much of HTML5 aims to deliver native browser support for components and techniques that we have achieved through JavaScript libraries thus far. Using these features, when present, can end up delivering a much faster experience for your users. In this tutorial, I won't recap the excellent performance research that you've seen at Yahoo's [Exceptional Performance site](http://developer.yahoo.com/performance/rules.html) or Google's [Page Speed docs](http://code.google.com/speed/page-speed/docs/rules_intro.html) and [Let's make the web faster](http://code.google.com/speed/index.html) site. Instead I'll focus on how putting HTML5 and CSS3 to use today can make your web apps more responsive.
+
+## Tip 1: Use web storage in place of cookies
+
+While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a [measurable impact on response time](http://yuiblog.com/blog/2007/03/01/performance-research-part-3/), especially during XHRs. So a best practice is to [reduce cookie size](http://developer.yahoo.com/performance/rules.html#cookie_size). In HTML5 we can do better than that: use `sessionStorage` and `localStorage` in place of cookies. 
+
+These two web storage objects can be used to persist user data on the clientside for the length of the session or indefinitely. Their data is not transferred to the server via every HTTP request, either.  They have an API that will make you happy to be rid of cookies. Here are both APIs, using cookies as a fallback.
+
+```js
+// if localStorage is present, use that
+if (('localStorage' in window) && window.localStorage !== null) {
+
+  // easy object property API
+  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
+
+} else {
+
+  // without sessionStorage we'll have to use a far-future cookie
+  //   with document.cookie's awkward API :(
+  var date = new Date();
+  date.setTime(date.getTime()+(365*24*60*60*1000));
+  var expires = date.toGMTString();
+  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
+                  ' expires='+expires+'; path=/';
+  document.cookie = cookiestr;
+}
+```
+
+## Tip 2: Use CSS Transitions instead of JavaScript animation
+
+CSS Transitions give you an attractive visual transition between two states. Most style properties can be transitioned, like manipulating the text-shadow, position, background or color.  You can use transitions into pseudo-selector states like `:hover` or from HTML5 forms, `:invalid` and `:valid` ([example with form validation states](http://bradshawenterprises.com/tests/formdemo.php)). But they're much more powerful and can be triggered when you add any class to an element.
+
+```js
+div.box {
+  left: 40px;
+  -webkit-transition: all 0.3s ease-out;
+     -moz-transition: all 0.3s ease-out;
+       -o-transition: all 0.3s ease-out;
+          transition: all 0.3s ease-out;
+}
+div.box.totheleft { left: 0px; }
+div.box.totheright { left: 80px; }
+```
+
+By adding the toggling the classes of `totheleft` and `totheright` you can move the box around. Compare this amount of code with that of a JavaScript animation library. Clearly, the number of bytes sent to the browser is much less when using CSS-based animation. Additionally, with GPU level acceleration, these visual transitions will be as smooth as possible.
+
+## Tip 3: Use client-side databases instead of server roundtrips
+
+[Web SQL Database](http://dev.w3.org/html5/webdatabase/) and [IndexedDB](http://www.w3.org/TR/IndexedDB/) introduce databases to the clientside. Instead of the common pattern of posting data to the server via `XMLHttpRequest` or form submission, you can leverage these clientside databases. Decreasing HTTP requests is a primary target of all performance engineers, so using these as a datastore can save many trips via XHR or form posts back to the server. `localStorage` and `sessionStorage` could be used in some cases, like capturing form submission progress, and have seen to be noticeably faster than the client-side database APIs.
+For example, if you have a data grid component or an inbox with hundreds of messages, storing the data locally in a database will save you HTTP roundtrips when the user wishes to search, filter, or sort. A list of friends or a text input autocomplete could be filtered on each keystroke, making for a much more responsive user experience.
+
+## Tip 4: JavaScript improvements lend considerable performance advantages
+
+Many [additional methods were added to the Array protoype](https://developer.mozilla.org/Core_JavaScript_1.5_Reference/Objects/Array#Methods) in JavaScript 1.6. These are available in most browsers now, except for IE. For example:
+
+```js
+// Give me a new array of all values multiplied by 10.
+[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
+// [50, 60, 70, 80, 9000]
+
+// Create links to specs and drop them into #links.
+['html5', 'css3', 'webgl'].forEach(function(value) {
+  var linksList = document.querySelector('#links');
+  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
+  linksList.innerHTML +=  newLink;
+});
+
+
+// Return a new array of all mathematical constants under 2.
+[3.14, 2.718, 1.618].filter(function(number) {
+  return number < 2;
+});
+// [1.618]
+
+
+// You can also use these extras on other collections like nodeLists.
+[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
+  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
+});
+```
+
+In most cases, using these native methods yield significantly faster speeds than your typical for loop like: `for (var i = 0, len = arr.length; i &lt; len; i++)`.
+Native JSON parsing (via `JSON.parse()`) replaces the json2.js file we've been used to including for a while. Native JSON is much faster and safer than using an external script and it's already in IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 and Chrome.
+Native `String.trim` is another good example of being not only faster than the longhand JS equivalents, but also potentially more correct. None of these JavaScript additions are technically HTML5, but they fall within the umbrella of technologies that are coming available recently.
+
+## Tip 5: Use cache manifest for live sites, not just offline apps
+
+Two years back, Wordpress used Google Gears to add a feature called [Wordpress Turbo](http://en.blog.wordpress.com/2008/07/02/gears/). It essentially cached many of the resources used in the admin panel locally, speeding up file access to them. We can replicate that behavior with HTML5's applicationCache and the [`cache.manifest`](http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#manifests).
+The app cache has a slight advantage over setting `Expires` headers; because you make a declarative file indicating the static resources that can be cacheable, browsers can optimize that heavily, perhaps even precaching them ahead of your use.
+Consider your site's basic structure as a template. You have data that may change but the HTML around it typically remains pretty consistent. With the app cache you could treat your HTML as a series of pure templates,  cache the markup via the cache.manifest, and then deliver JSON over the wire to update the content. This model is very similar to what an iPhone or Android native news app does.
+
+## Tip 6: Enable hardware acceleration to enhance visual experience
+
+In leading browsers, many visual operations can leverage GPU-level acceleration, which can make highly dynamic visual operations much smoother. Hardware acceleration has been announced for [Firefox Minefield](http://www.basschouten.com/blog1.php/2010/03/02/presenting-direct2d-hardware-acceleratio) and [IE9](http://blogs.msdn.com/b/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx) and Safari added hardware-level acceleration in version 5. (It arrived in Mobile Safari much earlier.) Chromium has [just added](http://groups.google.com/group/chromium-dev/browse_thread/thread/291aa79568684c70) 3D transforms and hardware acceleration for Windows, with the other two platforms coming soon.
+
+GPU acceleration kicks in only under a fairly restricted set of conditions, but 3D transforms and animated opacity are the most common ways to trip the switch. A somewhat hacky but unobtrusive way to turn it on is:
+
+```css
+.hwaccel {  -webkit-transform: translateZ(0); }
+```
+
+No guarantees, though. :)
+With hardware acceleration supported and enabled, animated translation, rotation, scaling and opacity will definitely be smoother with GPU compositing. They will have the benefit of being handled directly on the GPU and don't require redrawing of the layer contents. However, any property that affects the layout of the page will still be __relatively__ slow.
+
+## Tip 7: For CPU-heavy operations, Web Workers deliver
+
+Web Workers have two significant benefits: 1) They are fast. 2) While they chug on your tasks, the browser remains responsive. Grab a look at the [HTML5 Slide Deck](http://slides.html5rocks.com/#web-workers) for Workers in action.
+Some possible situations where you could use Web Workers:
+
+- Text formatting of a long document
+- Syntax highlighting
+- Image processing
+- Image synthesis
+- Processing large arrays
+
+## Tip 8: HTML5 Form attributes and input types
+
+HTML5 introduces a new set of input types, upgrading our set of `text`, `password`, and `file` to include `search`, `tel`, `url`, `email`, `datetime`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` and `color`. Browser support for these vary, with Opera implementing most at the moment. With feature detection you can determine if the browser has native support (and will offer a UI like a datepicker or color picker) and if not, you can continue to use the JS widgets to accomplish these common tasks.
+In addition to the types, a few useful features have been added to our normal input fields. The input `placeholder` offers default text that clears when you click into them and `autofocus` focuses the caret on page load so you can interact immediately with that field. Input validation is another thing making its way in with HTML5. Adding the `required` attribute means the browser won't let the form submit until that field is filled in. Also the `pattern` attribute lets you specify a custom regular expression for the input to be tested against; with invalid values blocking form submission. This declarative syntax is a big upgrade not only in source readability but also a significant reduction of JavaScript necessary. Again, you can use feature detection to serve a fallback solution if there isn't native support for these present.
+Using the native widgets here means you don't need to send the heavy javascript and css required to pull off these widgets, speeding up page load and likely improving widget responsiveness. To try out some of these input enhancements check out the [HTML5 Slide deck](http://slides.html5rocks.com/#new-form-types).
+
+## Tip 9: Use CSS3 effects instead of requesting heavy image sprites
+
+CSS3 delivers many new styling possibilities that supplant our use of images to represent the visual design accurately. Replacing a 2k image with 100 bytes of CSS is a huge win, not to mention you've removed yet another HTTP request. A few of the properties to familiarize yourself with are:
+
+- Linear and radial gradients
+- Border-radius for rounded corners
+- Box-shadow for drop shadows and glow
+- RGBA for alpha opacity
+- Transforms for rotation
+- CSS masks
+
+For example you, can create very [polished buttons via gradients](http://cubiq.org/dropbox/cssgrad.html) and [replicate many other effects](http://www.phpied.com/css-performance-ui-with-fewer-images/) sans-images. Browser support for most of these is very solid, and you can use a library like [Modernizr](http://www.modernizr.com/) to catch browsers that don't support the features in order to use images in a fallback case.
+
+## Tip 10: WebSockets for faster delivery with less bandwidth than XHR
+
+[WebSockets](http://dev.w3.org/html5/websockets/) was designed in response to the growing popularity of
+[Comet](http://en.wikipedia.org/wiki/Comet_(programming)). There are indeed advantages to using WebSockets now,
+instead of the Comet over XHR model.
+
+WebSockets has very light framing, and so the bandwidth it consumes is often lighter than that of XHR. 
+[Some reports](http://axod.blogspot.com/2009/12/websocket-some-numbers.html) indicate a 35% reduction
+in bytes sent across the wire. Additionally, in higher volume the performance difference when it comes to message
+delivery is more apparent; XHR has been recorded [in this test](http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html)
+with having an aggregate time of 3500% longer than WebSockets. Lastly, [Ericcson Labs considered the performance of WebSockets](https://www.youtube.com/watch?v=Z897fkPn7Rw)
+and found the ping times over HTTP were 3-5 times larger than over WebSockets due to more substantial processing
+requirements. They concluded that the WebSocket protocol was clearly more suitable for realtime applications.
+
+## Additional Resources
+
+For measurement and performance recommendations, you should certainly be using the Firefox extensions 
+[Page Speed](http://code.google.com/speed/page-speed/) and [YSlow](http://developer.yahoo.com/yslow/).
+Additionally, [Speed Tracer for Chrome](http://code.google.com/webtoolkit/speedtracer/) and [DynaTrace Ajax for IE](http://ajax.dynatrace.com/pages/) provide a more detailed level of logging of analysis.
diff --git a/src/site/content/en/blog/speed-rendering/index.md b/src/site/content/en/blog/speed-rendering/index.md
new file mode 100644
index 00000000000..10d65c4995a
--- /dev/null
+++ b/src/site/content/en/blog/speed-rendering/index.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: Jank busting for better rendering performance
+authors:
+  - tomwiltzius
+date: 2012-11-02
+tags:
+  - blog
+---
+
+## Introduction
+
+You want your web app to feel responsive and smooth when doing animations, transitions, and other small UI effects. Making sure these effects are jank-free can mean the difference between a "native" feel or a clunky, unpolished one.
+
+This is the first in a series of articles covering rendering performance optimization in the browser. To kick things off, we'll cover why smooth animation is difficult and what needs to happen to achieve it, as well as a few easy best practices. Many of these ideas were originally presented in "Jank Busters," a talk Nat Duca and I gave at Google I/O talk ([video](https://www.youtube.com/watch?v=hAzhayTnhEI&amp;feature=plcp)) this year.
+
+## Introducing V-sync
+
+PC gamers might be familiar with this term, but it's uncommon on the web: what is [v-sync](http://en.wikipedia.org/wiki/Screen_tearing#V-sync)?
+
+Consider your phone's display: it refreshes on a regular interval, usually (but not always!) about 60 times a second. V-sync (or vertical synchronization) refers to the practice of generating new frames only between screen refreshes. You might think of this like a race condition between the process that writes data into the screen buffer and the operating system reading that data to put it on the display. We want the buffered frame contents to change in between these refreshes, not during them; otherwise the monitor will display half of one frame and half of another, leading to "[tearing](http://en.wikipedia.org/wiki/Screen_tearing)".
+
+To get a smooth animation you need a new frame to be ready every time a screen refresh happens. This has two big implications: frame timing (that is, when the frame needs to be ready by) and frame budget (that is, how long the browser has to produce a frame). You only have the time between screen refreshes to complete a frame (~16ms on a 60Hz screen), and you want to start producing the next frame as soon as the last one was put up on the screen.
+
+## Timing is Everything: requestAnimationFrame
+
+Many web developers use `setInterval` or `setTimeout` every 16 milliseconds to create animations. This is a problem for a variety of reasons (and we'll discuss more in a minute), but of particular concern are:
+
+- Timer resolution from JavaScript is only on the order of several milliseconds
+- Different devices have different refresh rates
+
+Recall the frame timing problem mentioned above: you need a completed animation frame, finished with any JavaScript, DOM manipulation, layout, painting, etc, to be ready before the next screen refresh occurs. Low timer resolution can make it difficult to get animation frames completed before the next screen refresh, but variation in screen refresh rates makes it impossible with a fixed timer. No matter what the timer interval is you'll slowly drift out of the timing window for a frame and end up dropping one. This would happen even if the timer fired with millisecond accuracy, which it won't (as developers have [discovered](http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/)) -- timer resolution varies depending on whether the machine is on battery vs. plugged in, can be affected by background tabs hogging resources, etc. Even if this is rare (say, every 16 frames because you were off by a millisecond) you'll notice: you'll be dropping several frames a second. You'll also be doing the work to generate frames that never get displayed, which wastes power and CPU time you could be spending doing other things in your application.
+
+Different displays have different refresh rates: 60Hz is common, but some phones are 59Hz, some laptops drop to 50Hz in low-power mode, some desktop monitors are 70Hz.
+
+We tend to focus on frames per second (FPS) when discussing rendering performance, but variance can be an even bigger problem. Our eyes notice the tiny, irregular hitches in animation that a poorly timed animation can produce.
+
+The way to get correctly timed animation frames is with [`requestAnimationFrame`](http://docs.webplatform.org/wiki/apis/timing/methods/requestAnimationFrame). When you use this API, you're asking the browser for an animation frame. Your callback gets called when the browser is soon going to produce a new frame. This happens no matter what the refresh rate is.
+
+`requestAnimationFrame` has other nice properties too:
+
+- Animations in background tabs get paused, conserving system resources and battery life.
+- If the system can't handle rendering at the screen's refresh rate, it can throttle animations and produce the callback less frequently (say, 30 times a second on a 60Hz screen). While this drops framerate in half, it keeps the animation consistent -- and as stated above, our eyes are much more attuned to variance than framerate. A steady 30Hz looks better than 60Hz that misses a few frames a second.
+
+`requestAnimationFrame` has been discussed all over the place already, so refer to articles like [this one from creative JS](http://creativejs.com/resources/requestanimationframe/) for more info on it, but it's an important first step to smooth animation.
+
+## Frame Budget
+
+Since we want a new frame ready on every screen refresh, there's only the time in between refreshes to do all the work to create a new frame. On a 60Hz display, that means we've got about 16ms to run all JavaScript, perform layout, paint, and whatever else the browser has to do to get the frame out. This means if the JavaScript inside your `requestAnimationFrame` callback takes longer than 16ms to run, you don't have any hope of producing a frame in time for v-sync!
+
+16ms isn't a lot of time. Luckily Chrome's Developer Tools can help you track down if you're blowing your frame budget during the requestAnimationFrame callback.
+
+Opening up the Dev Tools timeline and taking a recording of this animation in action quickly shows that we're way over budget when animating. In Timeline switch to "Frames" and take a look:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XD8Gwg2C8AabKcspC6uS.png", alt="A demo with far too much layout", width="800", height="586" %}
+  <figcaption>A demo with far too much layout</figcaption>
+</figure>
+
+Those requestAnimationFrame (rAF) callbacks are taking >200ms. That's an order of magnitude too long to tick out a frame every 16ms! Opening up one of those long rAF callbacks reveals what's going on inside: in this case, lots of layout. 
+
+Paul's video goes into more detail about the specific cause of the relayout (it's reading `scrollTop`) and how to avoid it. But the point here is that you can dive into the callback and investigate what's taking so long.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y7fNy2kfVQTZhqpqbGgW.png", alt="An updated demo with much reduced layout", width="800", height="346" %}
+  <figcaption>An updated demo with much reduced layout</figcaption>
+</figure>
+
+Notice the 16ms frame times. That blank space in the frames is the headroom you have to do more work (or let the browser do work it needs to do in the background). That blank space is a Good Thing.
+
+## Other Source of Jank
+
+The biggest cause of trouble when trying to run JavaScript-powered animations
+is that other stuff can get in the way of your rAF callback, and even prevent it
+from running at all. Even if your rAF callback is lean and runs in just a few
+milliseconds, other activities (like processing an XHR that just came in,
+running input event handlers, or running scheduled updates on a timer) can
+suddenly come in and run for any period of time without yielding. On mobile
+devices sometimes processing these events can take hundreds of milliseconds,
+during which time your animation will be completely stalled. We call those
+animation hitches **jank**.
+
+There's no magic bullet to avoid these situations, but there are a few architectural best practices to set yourself up for success:
+
+- Don't do a lot of processing in input handlers! Doing a lot of JS or trying to rearrange the whole page during e.g. an onscroll handler is a very common cause of terrible jankiness.
+- Push as much processing (read: anything that'll take a long time to run) into your rAF callback or [Web Workers](http://www.html5rocks.com/en/tutorials/workers/basics/) as possible.
+- If you push work into the rAF callback, try to chunk it up so you're only processing a little bit each frame or delay it until after an important animation is over -- this way you can continue to run short rAF callbacks and animate smoothly.
+
+For a great tutorial covering how to push processing into requestAnimationFrame callbacks rather than input handlers, see Paul Lewis's article [Leaner, Meaner, Faster Animations with requestAnimationFrame](http://www.html5rocks.com/en/tutorials/speed/animations/).
+
+### CSS Animation
+
+What's better than lightweight JS in your event and rAF callbacks? No JS.
+
+Earlier we said there's no silver bullet for avoiding interrupting your rAF callbacks, but you can use CSS animation to avoid the need for them entirely. On Chrome for Android in particular (and other browsers are working on similar features), CSS animations have the very desirable property that the browser can often run them even if JavaScript is running.
+
+There's an implicit statement in the above section on jank: browsers can only do one thing at a time. This isn't strictly true, but it's a good working assumption to have: at any given time the browser can be running JS, performing layout, or painting, but only one at a time. This can be verified in the Timeline view of Dev Tools. One of the exceptions to this rule is CSS animations on Chrome for Android (and soon desktop Chrome, though not yet).
+
+When possible, using a CSS animation both simplifies your application and lets animations run smoothly, even while JavaScript runs.
+
+```js
+  // see http://paulirish.com/2011/requestanimationframe-for-smart-animating/ for info on rAF polyfills
+  rAF = window.requestAnimationFrame;
+
+  var degrees = 0;
+  function update(timestamp) {
+    document.querySelector('#foo').style.webkitTransform = "rotate(" + degrees + "deg)";
+    console.log('updated to degrees ' + degrees);
+    degrees = degrees + 1;
+    rAF(update);
+  }
+  rAF(update);
+```
+
+If you click the button JavaScript runs for 180ms, causing jank. But if instead we drive that animation with CSS animations the jank no longer occurs.
+
+(Remember at the time of this writing, CSS animation is only jank-free on Chrome for Android, not desktop Chrome.)
+
+```css
+  /* tools like Modernizr (http://modernizr.com/) can help with CSS polyfills */
+  #foo {
+    +animation-duration: 3s;
+    +animation-timing-function: linear;
+    +animation-animation-iteration-count: infinite;
+    +animation-animation-name: rotate;
+  }
+
+  @+keyframes: rotate; {
+    from {
+      +transform: rotate(0deg);
+    }
+    to {
+      +transform: rotate(360deg);
+    }
+  }
+```
+
+
+For more information on using CSS Animations, see articles like [this one on MDN](https://developer.mozilla.org/docs/CSS/Using_CSS_animations).
+
+## Wrapup
+
+The short of it is:
+
+1. When animating, producing frames for every screen refresh matters.
+Vsync'd   animation makes a huge positive impact on the way an app feels.
+1. The best way to get vsync'd animation in Chrome and other modern browsers is
+to use CSS animation. When you need more flexibility than CSS animation
+provides, the best technique is requestAnimationFrame-based animation.
+1. To keep rAF animations healthy and happy, make sure other event handlers
+aren't getting in the way of your rAF callback running, and keep rAF callbacks
+short (<15ms).
+
+Lastly, vsync'd animation doesn't only apply to simple UI animations -- it applies to Canvas2D animation, WebGL animation, and even scrolling on static pages. In the next article in this series we'll dig into scrolling performance with these concepts in mind.
+
+Happy animating!
+
+## References
+
+- [Using requestAnimationFrame for drag events](http://blog.digitalbackcountry.com/2012/05/using-requestanimationframe-to-optimize-dragging-events/)
diff --git a/src/site/content/en/blog/speed-script-loading/index.md b/src/site/content/en/blog/speed-script-loading/index.md
new file mode 100644
index 00000000000..d01bb951fb1
--- /dev/null
+++ b/src/site/content/en/blog/speed-script-loading/index.md
@@ -0,0 +1,339 @@
+---
+layout: post
+title: Deep dive into the murky waters of script loading
+authors:
+  - jakearchibald
+date: 2013-06-05
+tags:
+  - blog
+---
+
+## Introduction
+
+In this article I’m going to teach you how to load some JavaScript in the browser and execute it.
+
+No, wait, come back! I know it sounds mundane and simple, but remember, this is happening in the browser where the theoretically simple becomes a legacy-driven quirk-hole. Knowing these quirks lets you pick the fastest, least disruptive way to load scripts. If you’re on a tight schedule, skip to the quick reference.
+
+For starters, here’s how [the spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#script) defines the various ways a script could download and execute:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/L7FQBZ82N8CLvYntB0eX.png", alt="The WHATWG on script loading", width="462", height="366" %}
+  <figcaption>The WHATWG on script loading</figcaption>
+</figure>
+
+Like all of the WHATWG specs, it initially looks like the aftermath of a cluster bomb in a scrabble factory, but once you’ve read it for the 5th time and wiped the blood from your eyes, it’s actually pretty interesting:
+
+## My first script include
+
+```js
+<script src="//other-domain.com/1.js"></script>
+<script src="2.js"></script>
+```
+
+Ahh, blissful simplicity. Here the browser will download both scripts in parallel and execute them as soon as possible, maintaining their order. “2.js” won’t execute until “1.js” has executed (or failed to do so), “1.js” won’t execute until the previous script or stylesheet has executed, etc etc.
+
+Unfortunately, the browser blocks further rendering of the page while all this is happening. This is due to DOM APIs from “the first age of the web” that allow strings to be appended onto the content the parser is chewing through, such as `document.write`. Newer browsers will continue to scan or parse the document in the background and trigger downloads for external content it may need (js, images, css etc), but rendering is still blocked.
+
+This is why the great and the good of the performance world recommend putting script elements at the end of your document, as it blocks as little content as possible. Unfortunately it means your script isn’t seen by the browser until it downloads all your HTML, and by that point it’s started downloading other content, such as CSS, images and iframes. Modern browsers are smart enough to give priority to JavaScript over imagery, but we can do better.
+
+## Thanks IE! (no, I’m not being sarcastic)
+
+```html
+<script src="//other-domain.com/1.js" defer></script>
+<script src="2.js" defer></script>
+```
+
+Microsoft recognised these performance issues and introduced “defer” into Internet Explorer 4. This basically says “I promise not to inject stuff into the parser using things like `document.write`. If I break that promise, you are free to punish me in any way you see fit”. This attribute [made it into HTML4](http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1) and appeared in other browsers.
+
+In the above example, the browser will download both scripts in parallel and execute them just before `DOMContentLoaded` fires, maintaining their order.
+
+Like a cluster-bomb in a sheep factory, “defer” became a wooly mess. Between “src” and “defer” attributes, and script tags vs dynamically added scripts, we have 6 patterns of adding a script. Of course, the browsers didn’t agree on the order they should execute. [Mozilla wrote a great piece on the problem](https://hacks.mozilla.org/2009/06/defer/) as it stood back in 2009.
+
+The WHATWG made the behaviour explicit, declaring “defer” to have no effect on scripts that were dynamically added, or lacked “src”. Otherwise, deferred scripts should run after the document had parsed, in the order they were added.
+
+### Thanks IE! (ok, now I’m being sarcastic)
+
+It giveth, it taketh away. Unfortunately there’s a nasty bug in IE4-9 that can [cause scripts to execute in an unexpected order](https://github.com/h5bp/lazyweb-requests/issues/42). Here’s what happens:
+
+#### 1.js
+
+```js
+console.log('1');
+document.getElementsByTagName('p')[0].innerHTML = 'Changing some content';
+console.log('2');
+```
+
+#### 2.js
+
+```js
+console.log('3');
+```
+
+Assuming there’s a paragraph on the page, the expected order of logs is [1, 2, 3], although in IE9 and below you get [1, 3, 2]. Particular DOM operations cause IE to pause current script execution and execute other pending scripts before continuing.
+
+However, even in non-buggy implementations, such as IE10 and other browsers, script execution is delayed until the whole document has downloaded and parsed. This can be convenient if you’re going to wait for `DOMContentLoaded` anyway, but if you want to be really aggressive with performance, you can start adding listeners and bootstrapping sooner…
+
+## HTML5 to the rescue
+
+```html
+<script src="//other-domain.com/1.js" async></script>
+<script src="2.js" async></script>
+```
+
+HTML5 gave us a new attribute, “async”, that assumes you’re not going to use `document.write`, but doesn’t wait until the document has parsed to execute. The browser will download both scripts in parallel and execute them as soon as possible.
+
+Unfortunately, because they’re going to execute as soon as possible, “2.js” may execute before “1.js”. This is fine if they’re independent, perhaps “1.js” is a tracking script which has nothing to do with “2.js”. But if your “1.js” is a CDN copy of jQuery that “2.js” depends on, your page is going to get coated in errors, like a cluster-bomb in a… I dunno… I’ve got nothing for this one.
+
+## I know what we need, a JavaScript library!
+
+The holy grail is having a set of scripts download immediately without blocking rendering and execute as soon as possible in the order they were added. Unfortunately HTML hates you and won’t let you do that.
+
+The problem was tackled by JavaScript in a few flavours. Some required you to make changes to your JavaScript, wrapping it in a callback that the library calls in the correct order (eg [RequireJS](http://requirejs.org/)). Others would use XHR to download in parallel then `eval()` in the correct order, which didn’t work for scripts on another domain unless they had a [CORS header](https://developer.mozilla.org/docs/HTTP/Access_control_CORS) and the browser supported it. Some even used super-magic hacks, like [LabJS](http://labjs.com/).
+
+The hacks involved tricking the browser into downloading the resource in a way that would trigger an event on completion, but avoid executing it. In LabJS, the script would be added with an incorrect mime type, eg `<script type="script/cache" src="...">`. Once all scripts had downloaded, they’d be added again with a correct type, hoping the browser would get them straight from the cache and execute them immediately, in order. This depended on convenient but unspecified behaviour and broke when HTML5 declared browsers shouldn’t download scripts with an unrecognised type. Worth noting that LabJS adapted to these changes and now uses a combination of the methods in this article.
+
+However, script loaders have a performance problem of their own, you have to wait for the library’s JavaScript to download and parse before any of scripts it manages can begin downloading. Also, how are we going to load the script loader? How are we going to load the script that tells the script loader what to load? Who watches the Watchmen? Why am I naked? These are all difficult questions.
+
+Basically, if you have to download an extra script file before even thinking about downloading other scripts, you've lost the performance battle right there.
+
+## The DOM to the rescue
+
+The answer is actually in the HTML5 spec, although it’s hidden away at the bottom of the script-loading section.
+
+{% Aside %}
+The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset…
+{% endAside %}
+
+Let’s translate that into “Earthling”:
+
+```js
+[
+  '//other-domain.com/1.js',
+  '2.js'
+].forEach(function(src) {
+  var script = document.createElement('script');
+  script.src = src;
+  document.head.appendChild(script);
+});
+```
+
+**Scripts that are dynamically created and added to the document are async by default**, they don’t block rendering and execute as soon as they download, meaning they could come out in the wrong order. However, we can explicitly mark them as not async:
+
+```js
+[
+  '//other-domain.com/1.js',
+  '2.js'
+].forEach(function(src) {
+  var script = document.createElement('script');
+  script.src = src;
+  script.async = false;
+  document.head.appendChild(script);
+});
+```
+
+This gives our scripts a mix of behaviour that can’t be achieved with plain HTML. By being __explicitly__ not async, scripts are added to an execution queue, the same queue they’re added to in our first plain-HTML example. However, by being dynamically created, they’re executed outside of document parsing, so rendering isn’t blocked while they’re downloaded (don’t confuse not-async script loading with sync XHR, which is never a good thing).
+
+The script above should be included inline in the head of pages, queueing script downloads as soon as possible without disrupting progressive rendering, and executes as soon as possible in the order you specified. “2.js” is free to download before “1.js”, but it won’t be executed until “1.js” has either successfully downloaded and executed, or fails to do either. Hurrah! async-download but ordered-execution!
+
+Loading scripts this way is supported by [everything that supports the async attribute](http://caniuse.com/#search=async), with the exception of Safari 5.0 (5.1 is fine). Additionally, all versions of Firefox and Opera are supported as versions that don’t support the async attribute conveniently execute dynamically-added scripts in the order they’re added to the document anyway.
+
+## That’s the fastest way to load scripts right? Right?
+
+Well, if you’re dynamically deciding which scripts to load, yes, otherwise, perhaps not. With the example above the browser has to parse and execute script to discover which scripts to download. This hides your scripts from preload scanners. Browsers use these scanners to discover resources on pages you’re likely to visit next, or discover page resources while the parser is blocked by another resource.
+
+We can add discoverability back in by putting this in the head of the document:
+
+```html
+<link rel="subresource" href="//other-domain.com/1.js">
+<link rel="subresource" href="2.js">
+```
+
+This tells the browser the page needs 1.js and 2.js. `link[rel=subresource]` is similar to `link[rel=prefetch]`, but with [different semantics](http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource). Unfortunately it’s currently only supported in Chrome, and you have to declare which scripts to load twice, once via link elements, and again in your script.
+
+**Correction:** I originally stated these were picked up by the preload scanner, they're not, they're picked up by the regular parser. However, preload scanner __could__ pick these up, it just doesn't yet, whereas scripts included by executable code can never be preloaded. Thanks to [Yoav Weiss](https://twitter.com/yoavweiss) who corrected me in the comments.
+
+## I find this article depressing
+
+The situation is depressing and you should feel depressed. There’s no non-repetitive yet declarative way to download scripts quickly and asynchronously while controlling the execution order.
+With HTTP2/SPDY you can reduce the request overhead to the point where delivering scripts in multiple small individually-cacheable files can be the fastest way. Imagine:
+
+```html
+<script src="dependencies.js"></script>
+<script src="enhancement-1.js"></script>
+<script src="enhancement-2.js"></script>
+<script src="enhancement-3.js"></script>
+…
+<script src="enhancement-10.js"></script>
+```
+
+Each enhancement script deals with a particular page component, but requires utility functions in dependencies.js. Ideally we want to download all asynchronously, then execute the enhancement scripts as soon as possible, in any order, but after dependencies.js. It’s progressive progressive enhancement!
+Unfortunately there’s no declarative way to achieve this unless the scripts themselves are modified to track the loading state of dependencies.js. Even async=false doesn’t solve this issue, as execution of enhancement-10.js will block on 1-9. In fact, there’s only one browser that makes this possible without hacks…
+
+## IE has an idea!
+
+IE loads scripts differently to other browsers.
+
+```js
+var script = document.createElement('script');
+script.src = 'whatever.js';
+```
+
+IE starts downloading “whatever.js” now, other browsers don’t start downloading until the script has been added to the document. IE also has an event, “readystatechange”, and property, “readystate”, which tell us the loading progress. This is actually really useful, as it lets us control the loading and executing of scripts independently.
+
+```js
+var script = document.createElement('script');
+
+script.onreadystatechange = function() {
+  if (script.readyState == 'loaded') {
+    // Our script has download, but hasn't executed.
+    // It won't execute until we do:
+    document.body.appendChild(script);
+  }
+};
+
+script.src = 'whatever.js';
+```
+
+We can build complex dependency models by choosing when to add scripts into the document. IE has supported this model since version 6. Pretty interesting, but it still suffers from the same preloader discoverability issue as `async=false`.
+
+## Enough! How should I load scripts?
+
+Ok ok. If you want to load scripts in a way that doesn’t block rendering, doesn’t involve repetition, and has excellent browser support, here’s what I propose:
+
+```js
+<script src="//other-domain.com/1.js"></script>
+<script src="2.js"></script>
+```
+
+That. At the end of the body element. Yes, being a web developer is much like being King Sisyphus (boom! 100 hipster points for Greek mythology reference!). Limitations in HTML and browsers prevent us doing much better.
+
+I’m hoping [JavaScript modules](http://wiki.ecmascript.org/doku.php?id=harmony:modules) will save us by providing a declarative non-blocking way to load scripts and give control over execution order, although this requires scripts to be written as modules.
+
+## Eww, there must be something better we can use now?
+
+Fair enough, for bonus points, if you want to get really aggressive about performance, and don’t mind a bit of complexity and repetition, you can combine a few of the tricks above.
+
+First up, we add the subresource declaration, for preloaders:
+
+```html
+<link rel="subresource" href="//other-domain.com/1.js">
+<link rel="subresource" href="2.js">
+```
+
+Then, inline in the head of the document, we load our scripts with JavaScript, using `async=false`, falling back to IE’s readystate-based script loading, falling back to defer.
+
+```js
+var scripts = [
+  '1.js',
+  '2.js'
+];
+var src;
+var script;
+var pendingScripts = [];
+var firstScript = document.scripts[0];
+
+// Watch scripts load in IE
+function stateChange() {
+  // Execute as many scripts in order as we can
+  var pendingScript;
+  while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
+    pendingScript = pendingScripts.shift();
+    // avoid future loading events from this script (eg, if src changes)
+    pendingScript.onreadystatechange = null;
+    // can't just appendChild, old IE bug if element isn't closed
+    firstScript.parentNode.insertBefore(pendingScript, firstScript);
+  }
+}
+
+// loop through our script urls
+while (src = scripts.shift()) {
+  if ('async' in firstScript) { // modern browsers
+    script = document.createElement('script');
+    script.async = false;
+    script.src = src;
+    document.head.appendChild(script);
+  }
+  else if (firstScript.readyState) { // IE<10
+    // create a script and add it to our todo pile
+    script = document.createElement('script');
+    pendingScripts.push(script);
+    // listen for state changes
+    script.onreadystatechange = stateChange;
+    // must set src AFTER adding onreadystatechange listener
+    // else we'll miss the loaded event for cached scripts
+    script.src = src;
+  }
+  else { // fall back to defer
+    document.write('<script src="' + src + '" defer></'+'script>');
+  }
+}
+```
+
+A few tricks and minification later, it’s 362 bytes + your script URLs:
+
+```js
+!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
+  "//other-domain.com/1.js",
+  "2.js"
+])
+```
+
+Is it worth the extra bytes compared to a simple script include? If you’re already using JavaScript to conditionally load scripts, [as the BBC do](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard), you may as well benefit from triggering those downloads earlier. Otherwise, perhaps not, stick with the simple end-of-body method.
+
+Phew, now I know why the WHATWG script loading section is so vast. I need a drink.
+
+## Quick reference
+
+### Plain script elements
+
+```html
+<script src="//other-domain.com/1.js"></script>
+<script src="2.js"></script>
+```
+
+**Spec says:** Download together, execute in order after any pending CSS, block rendering until complete.
+**Browsers say:** Yes sir!
+
+### Defer
+
+```html
+<script src="//other-domain.com/1.js" defer></script>
+<script src="2.js" defer></script>
+```
+
+**Spec says:** Download together, execute in order just before DOMContentLoaded. Ignore “defer” on scripts without “src”.
+**IE < 10 says:** I might execute 2.js halfway through the execution of 1.js. Isn’t that fun?
+**The [browsers in red](http://caniuse.com/#search=defer) say:** I have no idea what this “defer” thing is, I’m going to load the scripts as if it weren’t there.
+**Other browsers say:** Ok, but I might not ignore “defer” on scripts without “src”.
+
+### Async
+
+```html
+<script src="//other-domain.com/1.js" async></script>
+<script src="2.js" async></script>
+```
+
+**Spec says:** Download together, execute in whatever order they download in.
+**The [browsers in red](http://caniuse.com/#search=async) say:** What’s ‘async’? I’m going to load the scripts as if it weren’t there.
+**Other browsers say:** Yeah, ok.
+
+### Async false
+
+```js
+[
+  '1.js',
+  '2.js'
+].forEach(function(src) {
+  var script = document.createElement('script');
+  script.src = src;
+  script.async = false;
+  document.head.appendChild(script);
+});
+```
+
+**Spec says:** Download together, execute in order as soon as all download.
+**Firefox < 3.6, Opera says:** I have no idea what this “async” thing is, but it just so happens I execute scripts added via JS in the order they’re added.
+**Safari 5.0 says:** I understand “async”, but don’t understand setting it to “false” with JS. I’ll execute your scripts as soon as they land, in whatever order.
+**IE < 10 says:** No idea about “async”, but there is a workaround using “onreadystatechange”.
+**Other [browsers in red](http://caniuse.com/#search=async) say:** I don’t understand this “async” thing, I’ll execute your scripts as soon as they land, in whatever order.
+**Everything else says:** I’m your friend, we’re going to do this by the book.
\ No newline at end of file
diff --git a/src/site/content/en/blog/speed-static-mem-pools/index.md b/src/site/content/en/blog/speed-static-mem-pools/index.md
new file mode 100644
index 00000000000..0e4fb15038f
--- /dev/null
+++ b/src/site/content/en/blog/speed-static-mem-pools/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Static memory javascript with Object Pools
+authors:
+  - coltmcanlis
+date: 2013-06-21
+tags:
+  - blog
+---
+
+## Introduction
+
+So you get an email saying how your web-game / web-app is performing badly after a certain amount of time, you dig through your code, don’t see anything that stands out, until you open up Chrome’s memory performance tools, and see this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1IxMxMctbmXvdWAGdWPl.jpg", alt="A snapshot from your memory timeline", width="505", height="52" %}
+</figure>
+
+__One of your co-workers chuckles, because they realize that you’ve got a memory-related performance problem.__
+
+In the memory graph view, this saw-tooth pattern is very telling about a potentially critical performance problem.  As your memory usage grows, you’ll see the chart area also grow in the timeline capture. When the chart dips suddenly, it’s an instance when the Garbage Collector has run, and cleaned up your referenced memory objects.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XGfgrWRgyDPsZStNWq4C.jpg", alt="What the Saw-Tooths mean", width="505", height="52" %}
+</figure>
+
+In a graph like this, you can see that there’s lots of Garbage Collection events occurring, which can be harmful to your web-apps’ performance. This article will talk about how to take control of your memory usage, reducing the impact on your performance.
+
+## Garbage collection and performance costs
+
+JavaScript’s [memory model](http://en.wikipedia.org/wiki/Memory_model_(programming)) is built on a technology known as a [Garbage Collector](http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). In many languages, the programmer is directly responsible for allocating and freeing memory from the system’s [Memory Heap](https://en.wikipedia.org/wiki/Memory_management). A Garbage Collector system, however, manages this task on behalf of the programmer, meaning that objects aren’t directly freed from memory when the programmer dereferences it, but rather at a later time when the GC’s heuristics decide that it would be beneficial to do so. This decision process requires that the GC execute some statistical analysis on active and inactive objects, which takes a block of time to perform.
+
+{% Aside %}
+In computer science, [Garbage Collector](http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)) (GC) is a form of automatic memory management. The garbage collector attempts to reclaim garbage, or memory occupied by objects that are no longer in use by the program. 
+{% endAside %}
+
+Garbage collection is often portrayed as the opposite of manual memory management, which requires the programmer to specify which objects to deallocate and return to the memory system
+
+The process in which a GC reclaims memory is not free, it usually cuts into your available performance by taking a block of time to do its work; alongside that, the system itself makes the decision when to run. You have no control over this action, a GC pulse can occur at any time during code execution, which will block code execution until it’s completed. The duration of this pulse is generally unknown to you; will take some amount of time to run, depending on how your program is utilizing memory at any given point.
+
+[High performance](https://en.wikipedia.org/wiki/Supercomputer) applications rely on consistent performance boundaries to ensure a smooth experience for users. Garbage collector systems can short circuit this goal, as they can run at random times for random durations, eating into the available time that the application needs to meet its performance goals.
+
+### Reduce Memory Churn, Reduce Garbage Collection taxes
+
+As noted, a GC pulse will occur once a set of heuristics determines that there are enough inactive objects that a pulse would be beneficial. As such, the key to reducing the amount of time that the Garbage Collector takes from your application lies in eliminating as many cases of excessive object creation and release as you can. This process of creating/freeing object frequently is called “memory churn”. If you can reduce memory churn during the lifetime of your application, you also reduce the amount of time GC takes from your execution. This means you need to remove / reduce the number of created and destroyed objects, effectively, you have to stop allocating memory.
+
+This process will move your memory graph from this :
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1IxMxMctbmXvdWAGdWPl.jpg", alt="A snapshot from your memory timeline", width="505", height="52" %}
+</figure>
+
+to this:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3wPxsdOUhgx0AAEGo8jB.jpg", alt="Static Memory Javascript", width="505", height="53" %}
+</figure>
+
+In this model, you can see that the graph no longer has a [sawtooth](http://en.wikipedia.org/wiki/Sawtooth_wave) like pattern, but rather grows a great deal in the beginning, and then slowly increases over time. If you’re running into performance problems due to memory churn, this is the type of graph you’ll want to create.
+
+## Moving towards static-memory JavaScript
+
+__Static Memory JavaScript__ is a technique which involves [pre-allocating](http://en.wikipedia.org/wiki/Sawtooth_wave), at the start of your app, all the memory that will be needed for its lifetime, and managing that memory during execution as objects are no longer needed.
+We can approach this goal in a few simple steps:
+
+1. Instrument your application to determine what the maximum number of required live memory objects  (per type) are for a range of usage scenarios
+1. Re-implement your code to pre-allocate that maximum amount, and then manually  fetch/release them rather than going to main memory.
+
+In reality, accomplishing #1 requires us to do a bit of #2, so let’s start there.
+
+### Object Pool
+
+In simple terms, [object pooling](http://en.wikipedia.org/wiki/Object_pool_pattern) is the process of retaining a set of unused objects which share a type. When you need a new object for your code, rather than allocating a new one from the system [Memory Heap](https://en.wikipedia.org/wiki/Memory_management), you instead recycle one of the unused objects from the pool. Once the external code is done with the object, rather than releasing it to main memory, it is returned  to the pool. Because the object is never [dereferenced](http://en.wikipedia.org/wiki/Reference_(computer_science)) (aka deleted) from code it won’t be garbage collected. **Utilizing object pools puts control of memory back in the hands of the programmer, reducing the influence of the garbage collector on performance.**
+
+{% Aside %}
+Object pools are a common practice in many high performance applications, as they reduce the amount of memory churn that is placed on the system. Object pools themselves have two primary characteristics:
+
+1. A pool will continue to grow in memory footprint as the number as live objects increases.
+1. The number of created/released object per-frame will drop to the minimum required by your application.
+
+{% endAside %}
+
+Since there’s a heterogenous set of object types that an application maintains, proper usage of object pools requires you to have one pool per type that experiences high-churn during your application’s runtime.
+
+```js
+var newEntity = gEntityObjectPool.allocate();
+newEntity.pos = {x: 215, y: 88};
+
+//..... do some stuff with the object that we need to do
+
+gEntityObjectPool.free(newEntity); //free the object when we're done
+newEntity = null; //free this object reference
+```
+
+For the large majority of applications, you’ll eventually hit some level-off in terms of needing to allocate new objects. Over multiple runs of your application, you should be able to get a great feel for what this upper limit is, and can pre-allocate that number of objects at the start of your application. 
+
+### Pre-allocating objects
+
+Implementing object pooling into your project will give you a theoretical maximum for the number of objects required during the runtime of your application. Once running your site through various testing scenarios, you can get a good sense of the types of memory requirements that will be needed, and can catalog that data somewhere, and analyze it to understand what the upper limits of memory requirements are for your application.
+
+Then, in the shipping version of your app, you can set the initialization phase to pre-fill all the object pools to a specified amount. This act will push all the object initialization to the front of your app, and reduce the amount of allocations that occur dynamically during its execution. 
+
+```js
+function init() {
+  //preallocate all our pools. 
+  //Note that we keep each pool homogeneous wrt object types
+  gEntityObjectPool.preAllocate(256);
+  gDomObjectPool.preAllocate(888);
+}
+```
+
+The amount you choose has a great deal to do with the behavior of your application; sometimes the theoretical maximum isn’t the best option. For instance, choosing the average maximum may give you a smaller memory footprint for non power-users.
+
+### Far from a silver bullet
+
+There’s a whole classification of apps in which static memory growth patterns can be a win. As fellow Chrome DevRel [Renato Mangini](https://plus.google.com/u/0/+RenatoMangini/posts) points out however, there are a few drawbacks.
+
+{% Aside %}
+Pools are not for everyone, even on high-performance apps. Consider the following tradeoffs before adopting object pools and static memory methods:
+Startup time will be longer, since you’re spending cycles allocating memory at initialization time.
+Memory doesn’t shrink in low-usage scenarios; Your app will greedily consume memory.
+You’ll sometimes need to clean an object when it’s returned to the pool, this can have a non-trivial overhead associated with it during high-memory-churn areas.
+{% endAside %}
+
+## Conclusion
+
+One of the reasons that JavaScript is ideal for the web relies on the fact it’s a fast, fun and easy language to get started with. This is mainly due to its low barrier to syntax restrictions and its handling of the memory issues on your behalf. You can code away and let it take care of the dirty work.
+However for high-performance web applications, like [HTML5 games](https://www.udacity.com/course/cs255), the GC can often eat away at critically needed [frame rate](http://en.wikipedia.org/wiki/Frame_rate), reducing the experience for the end user. With some careful instrumentation and adoption of object pools, you can reduce this burden on your frame rate, and reclaim that time for more awesome things.
+
+## Source Code
+
+There are lots of implementations of object pools floating around on the web, so I won’t bore you with yet another one. Instead, I’ll direct you to these, each of which has specific implementation nuances; which is important, considering that each application usage may have specific implementation needs.
+
+- [Gamecore.js’ object pool](https://github.com/playcraft/gamecore.js/blob/master/src/pooled.js) 
+- [Beej’s Object Pools](http://beej.us/blog/data/object-pool/)
+- [Emehrkay’s super simple object pool](https://github.com/emehrkay/Pool)
+- [Steven Lambert’s game-focused object pool](http://blog.sklambert.com/javascript-object-pool/)
+- [RenderEngine’s objectPool setup](https://code.google.com/p/renderengine/wiki/ObjectPooling)
+
+## References
+
+- [Garbage Collector Friendly Code](http://buildnewgames.com/garbage-collector-friendly-code/)
+- [Taming the unicorn : easing Javascript memory profiling in devtools](http://addyosmani.com/blog/taming-the-unicorn-easing-Javascript-memory-profiling-in-devtools/)
+- [Writing fast, memory efficient javascript](http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-Javascript/#more-123093)
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/crux-data.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/crux-data.png
deleted file mode 100644
index eca68a62265..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/crux-data.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/hero.jpg b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/hero.jpg
deleted file mode 100644
index 537c49c5d16..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/index.md b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/index.md
index 98bd56af9dd..bfda43d2de9 100644
--- a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/index.md
+++ b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/index.md
@@ -4,10 +4,11 @@ subhead: New performance metrics, updates to PageSpeed Insights and Chrome User
 authors:
   - egsweeny
 date: 2019-12-16
+updated: 2022-07-18
 description: |
   Read about the latest developments in speed tooling including new performance metrics, updates to PageSpeed Insights and Chrome User Experience Report (CrUX), and insights from Web Almanac analysis of the web ecosystem.
-hero: hero.jpg
-thumbnail: thumbnail.png
+hero: image/admin/lWKSX0b7pvSUX1BDd3IH.jpg
+thumbnail: image/admin/NhCeOuBEiIGJHYIS9TxB.png
 alt: Chrome User Experience logo, PageSpeed Insights logo, and a metrics chart.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -39,7 +40,7 @@ metric](/user-centric-performance-metrics/#in-the-lab)—[Total Blocking Time
 content element becomes visible in the viewport.
 
 Before Largest Contentful Paint, [First Meaningful Paint
-(FMP)](/first-meaningful-paint/) and [Speed Index (SI)](/speed-index/) served to
+(FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) and [Speed Index (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) served to
 capture the loading experience after the initial paint, but these metrics are
 complex and often do not identify when the main content of the page has loaded.
 Research has shown that simply looking at when [the largest element on the
@@ -53,23 +54,23 @@ JavaScript](/lcp/#measure-lcp-in-javascript).
 ### Total Blocking Time (TBT)
 
 [Total Blocking Time (TBT)](/tbt/) metric measures the total amount of time
-between [First Contentful Paint (FCP)](/first-contentful-paint/) and [Time to
-Interactive (TTI)](/interactive/) where the main thread was blocked for long
+between [First Contentful Paint (FCP)](/fcp/) and [Time to
+Interactive (TTI)](/tti/) where the main thread was blocked for long
 enough to prevent input responsiveness.
 
 A [task is considered long](/custom-metrics/#long-tasks-api) if it runs on the
 main thread for more than 50 milliseconds. Any millisecond over that is counted
 towards that task's blocking time.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./tbt.png" alt="A diagram representing a 150 millisecond task which has 100 miliseconds of blocking time.">
+<figure>
+  {% Img src="image/admin/73CEd4i55qCVQKdOb6iK.png", alt="A diagram representing a 150 millisecond task which has 100 miliseconds of blocking time.", width="633", height="292" %}
 </figure>
 
 The Total Blocking Time for a page is the sum of the blocking times of all long
 tasks that occured between FCP and TTI.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./tbt2.png" alt="A diagram representing a five tasks with 60 miliseconds of total blocking time out of 270 milliseconds of main thread time.">
+<figure>
+  {% Img src="image/admin/OGlrzhJ7ViNsywtZmUAh.png", alt="A diagram representing a five tasks with 60 miliseconds of total blocking time out of 270 milliseconds of main thread time.", width="800", height="236" %}
 </figure>
 
 While Time to Interactive does a good job of identifying when the main thread
@@ -84,19 +85,17 @@ quantifies how often users experience unexpected layout shifts. Unexpected
 movement of content can be very frustrating and this new metric helps you
 address that problem by measuring how often it's occurring for your users.
 
-<figure class="w-figure">
-  <video autoplay controls loop muted
-    class="w-screenshot"
-    poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png"
-    width="658" height="510">
-    <source
-      src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm"
-      type="video/webm; codecs=vp8">
-    <source
-      src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4"
-      type="video/mp4; codecs=h264">
-  </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+    {% Video
+      src=["../web-dev-assets/layout-instability-api/layout-instability2.webm", "../web-dev-assets/layout-instability-api/layout-instability2.mp4"],
+      poster="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/rlKRnotLRXcqmirMCkIa.png",
+      width=658,
+      height=510,
+      autoplay=true,
+      controls=true,
+      loop=true,
+      muted=true %}
+  <figcaption>
     A screencast illustrating how layout instability can negatively affect
     users.
   </figcaption>
@@ -109,33 +108,27 @@ The new Lighthouse performance score formula will soon de-emphasize FMP and FCI
 and include the three new metrics—LCP, TBT, and CLS—as they better capture when
 a page feels usable.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./performance-metrics.png"
-       alt="In Lighthouse v6 First Contentful Paint, Speed Index, and Largest
-            Contentful Paint are the main load performance metrics; Time To Interactive,
-            First Input Delay, Max Potential First Input Delay, and Total Blocking Time are
-            the main interactivity metrics; And Cumulative Layout Shift is the main
-            predictability metric.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wB1bqc1tymL2uPuDgqpP.png", alt="In Lighthouse v6 First Contentful Paint, Speed Index, and Largest Contentful Paint are the main load performance metrics; Time To Interactive, First Input Delay, Max Potential First Input Delay, and Total Blocking Time are the main interactivity metrics; And Cumulative Layout Shift is the main predictability metric.", width="800", height="375" %}
 </figure>
 
-Check out [Lighthouse performance scoring](/performance-scoring/) and the new
+Check out [Lighthouse performance scoring](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) and the new
 [web.dev metrics collection](/metrics/) to learn more.
 
 ## Field data (CrUX) thresholds adjusted in PageSpeed Insights
 
 Over the past year we have been analyzing [web performance from the
 field](/user-centric-performance-metrics/#in-the-field) via [Chrome User
-Experience](https://developers.google.com/web/tools/chrome-user-experience-report)
+Experience](https://developer.chrome.com/docs/crux/)
 (CrUX) data. With insights from that data we reassessed the thresholds that we
-use to label a website "slow", 'moderate", or "fast" in field performance.
+use to label a website "slow", "moderate", or "fast" in field performance.
 
 {% Aside %} The term "average" that used to describe sites that are in between
 "slow" and "fast" is now changed to "moderate" which is more fitting since this
 middle group was not related to a statistical average. {% endAside %}
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./crux-data.png" alt="Two bar charts showing
-  the distribution of slow, fast, and moderate speed for FCP and FID.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jvGzonBGrlqZD2LtzaPB.png", alt="Two bar charts showing the distribution of slow, fast, and moderate speed for FCP and FID.", width="748", height="200" %}
 </figure>
 
 In order to get an overall assessment for a site, [PageSpeed Insights
@@ -175,9 +168,8 @@ PageSpeed Insights team has added a reanalyze prompt to PSI. For sites that are
 redirected to a new URL, you're prompted to rerun the report on the landing URL
 for a more complete picture of your actual performance.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./psi-reanalyze.png" alt="PSI user interface
-  showing the URL redirect and the 'Reanalyze' button">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K299AL6Ni7dO5W4ksqXF.png", alt="PSI user interface showing the URL redirect and the 'Reanalyze' button", width="800", height="223" %}
 </figure>
 
 ## CrUX in the new Search Console Speed report
@@ -190,16 +182,14 @@ Speed report automatically assigns groups of similar URLs into "Fast",
 "Moderate," and "Slow" buckets, and helps prioritize performance improvements
 for specific issues.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./search-console-speed-report.png" alt="Search
-  Console Speed report.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ny8QAjPaET6sIUX4z3Pz.png", alt="Search Console Speed report.", width="800", height="801" %}
 </figure>
 
 ## Web Almanac
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./web-almanac-at-cds-2019.png" alt="Dion Almaer
-  presenting Web Almanac at CDS 2019.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lVldn64qc3gc5UDHeMBo.png", alt="Dion Almaer presenting Web Almanac at CDS 2019.", width="800", height="450" %}
 </figure>
 
 In the opening keynote we announced the launch of the [Web
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/performance-metrics.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/performance-metrics.png
deleted file mode 100644
index 21ee0cee82f..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/performance-metrics.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/psi-reanalyze.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/psi-reanalyze.png
deleted file mode 100644
index c904d4a2d28..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/psi-reanalyze.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/search-console-speed-report.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/search-console-speed-report.png
deleted file mode 100644
index 88f8061beaa..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/search-console-speed-report.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt.png
deleted file mode 100644
index 25afca428c6..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt2.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt2.png
deleted file mode 100644
index 72ca60021b6..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/tbt2.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/thumbnail.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/thumbnail.png
deleted file mode 100644
index d9103d2ed97..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/web-almanac-at-cds-2019.png b/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/web-almanac-at-cds-2019.png
deleted file mode 100644
index 94493f77e18..00000000000
Binary files a/src/site/content/en/blog/speed-tooling-evolutions-cds-2019/web-almanac-at-cds-2019.png and /dev/null differ
diff --git a/src/site/content/en/blog/speed-tools/index.md b/src/site/content/en/blog/speed-tools/index.md
new file mode 100644
index 00000000000..954ccf4a037
--- /dev/null
+++ b/src/site/content/en/blog/speed-tools/index.md
@@ -0,0 +1,268 @@
+---
+layout: post
+title: How To Think About Speed Tools
+subhead: |
+  How To Think About Speed Tools
+date: 2018-02-26
+updated: 2022-07-18
+description: |
+  How To Think About Speed Tools
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Google has put out a lot of guidance around performance data and performance
+tooling. The goal of this infographic is to consolidate this guidance for
+developers and marketers to help them understand how to think about performance
+and navigate all of Google's performance tool offerings.
+
+<a class="button"
+href="pdf/Infographic-How_To_Think_About_Speed_Tools.pdf"
+data-label="primary">Download the PDF version</a>
+
+## Common myths about performance
+
+### Myth 1
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mHHktm1aDCiI0EBpy6WZ.svg", alt="A piece of paper with a line graph
+on it.", width="398", height="275", class="float-left" %}
+</figure>
+
+**User experience can be captured with a single metric.**
+
+Good user experience is not captured by a single point in time. It's composed of
+a series of key milestones in your users' journey. Understand the different
+metrics and track the ones that are important to your users' experience.
+
+### Myth 2
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZxO3D3RAZmRPmkzL6Qjy.svg", alt="A collection of network iconography representing different devices and network
+conditions.", width="398", height="275", class="float-left" %}
+</figure>
+
+**User experience can be captured with a single “representative user.”**<br>
+Real-world performance is highly variable due to differences in users’ devices,
+network connections, and other factors. Calibrate your lab and development
+environment to test a variety of such different conditions. Use field data to
+inform selection of test parameters for device type (i.e., mobile vs. desktop),
+network connections (i.e., 3G or 4G), and other key variables.
+
+### Myth 3
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TxRMhKCEuOsnWb1gPi0L.svg", alt="An assortment of depictions of different
+kinds of users.", width="398", height="275", class="float-left" %}
+</figure>
+
+**My website loads fast for me, so it should load fast for my users.**<br>
+The devices and networks that developers test load performance on are often much
+faster than what your users actually experience. Use field data to understand
+what devices and networks your users are on and appropriately mirror those
+conditions when you test performance.
+
+## Understanding lab vs. field data
+
+### Lab data
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mf2384q0tWgo4bVHa5r0.svg", alt="A depiction of a man standing in front of
+a bunch of abstract technical concepts
+and icons", width="398", height="275", class="float-rigt" %}
+</figure>
+
+Lab data is performance data collected within a controlled environment with
+predefined device and network settings. This offers reproducible results and
+debugging capabilities to help identify, isolate, and fix performance issues.
+
+{% Compare 'better' %}
+
+#### Strengths
+
+- Helpful for debugging performance issues
+- End-to-end and deep visibility into the UX
+- Reproducible testing and debugging environment
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+#### Limitations
+
+- Might not capture real-world bottlenecks
+- Cannot correlate against real-world page KPIs
+{% endCompare %}
+
+{% Aside %}
+Tools like [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and
+[WebPageTest](https://www.webpagetest.org/) collect this type of data.
+{% endAside %}
+
+### Field data
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oDNASv0rma8j3lvw6IxT.svg", alt="A depiction of people in a public setting using mobile
+devices.", width="800", height="689", class="float-right" %}
+</figure>
+
+(Also called Real User Monitoring or RUM)
+
+Field data is performance data collected from real page loads your users are
+experiencing in the wild.
+
+{% Compare 'better' %}
+
+#### Strengths
+
+- Captures true real-world user experience
+- Enables correlation to business key performance indicators
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+#### Limitations {: .compare-worse }
+
+- Restricted set of metrics
+- Limited debugging capabilities
+{% endCompare %}
+
+{% Aside %}
+Public data sets like [Chrome User Experience
+Report](https://developer.chrome.com/docs/crux/) and performance tools like
+[PageSpeed Insights](https://pagespeed.web.dev/) speed score report this type of
+data.
+{% endAside %}
+
+## What are the different performance tools?
+
+<div class="table-wrapper scrollbar">
+<table>
+    <tbody>
+        <tr>
+            <td>
+                <a href="https://developer.chrome.com/docs/lighthouse/overview/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1A9MXRXmgqfxmCFGHN80.svg", alt="Lighthouse", width="150", height="150" %}</a>
+                <h3><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></h3>
+                <p>Gives you personalized advice on how to improve your website across performance,
+            accessibility, PWA, SEO, and other best practices.</p>
+            </td>
+            <td>
+                <a href="https://www.webpagetest.org/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BxEozEv17LAroJo9e9CG.svg", alt="WebPageTest", width="150", height="150" %}</a>
+                    <h3><a href="https://www.webpagetest.org/">WebPageTest</a></h3>
+                    <p>Allows you to compare performance of one or more pages in controlled lab
+                environment, and deep dive into performance stats and test performance on a real
+                device. You can also run Lighthouse on WebPageTest.</p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <a href="https://testmysite.thinkwithgoogle.com/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iEejvAzwfBoAaZwVlT4H.svg", alt="TestMySite", width="150", height="150" %}</a>
+                    <h3><a href="https://testmysite.thinkwithgoogle.com/">TestMySite</a></h3>
+                    <p>Allows you to diagnose webpage performance across devices and provides a
+                list of fixes for improving the experience from Webpagetest and PageSpeed
+                Insights.</p>
+            </td>
+            <td>
+                <a href="https://developers.google.com/speed/pagespeed/insights/">
+                {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3Tf74Rv0nbvrWzqXM56E.svg", alt="PageSpeed Insights", width="150", height="150" %}</a>
+                    <h3><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></h3>
+                    <p>Shows speed field data for your site, alongside suggestions for common
+                optimizations to improve it.</p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <a href="https://www.thinkwithgoogle.com/feature/mobile/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XYnAjGQ8E4HimMC5jqAh.svg", alt="Speed Scorecard", width="150", height="150" %}</a>
+                    <h3><a href="https://www.thinkwithgoogle.com/feature/mobile/">Speed Scorecard</a></h3>
+                    <p>Allows you to compare your mobile site speed against your peers in over 10
+                countries. Mobile site speed is based on real-world data from the Chrome
+                User Experience Report.</p>
+            </td>
+            <td>
+                <a href="https://www.thinkwithgoogle.com/feature/mobile/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rYMHLU8uySirxfmwgzij.svg", alt="Impact Calculator", width="150", height="150" %}</a>
+                    <h3><a href="https://www.thinkwithgoogle.com/feature/mobile/">Impact Calculator</a></h3>
+                    <p>Allows you to estimate the potential revenue opportunity of improving your
+                mobile site speed, based on benchmark data from Google Analytics.</p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <a href="https://developer.chrome.com/docs/devtools/">{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YpBBtcAGyGGTDgB9IC8J.svg", alt="Chrome Developer Tools", width="150", height="150" %}</a>
+                    <h3><a href="https://developer.chrome.com/docs/devtools/">Chrome Developer Tools</a></h3>
+                    <p>Allows you to profile the runtime of a page, as well as identify and debug
+                performance bottlenecks.</p>
+            </td>
+            <td>
+            </td>
+        </tr>
+    </tbody>
+</table>
+</div>
+
+## So you're…
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d3vzaelRRQt1FMXbhHVI.svg", alt="Icon of a book showing
+charts and graphs.", width="366", height="366", class="float-right" %}
+</figure>
+
+**Marketer or developer trying to build a business case for improving user
+experience of your website. You speak dollars and cents and are looking for
+monetary figures that can help you quantify the opportunity cost and expected
+lift.**
+
+- Use the **[Speed Scorecard](https://www.thinkwithgoogle.com/feature/mobile/)**
+to see how your mobile site speed compares against your  peers in more than 10
+countries. Scores are based on real-world data from Chrome User Experience
+Report.
+- Use the **[Impact Calculator](https://www.thinkwithgoogle.com/feature/mobile/)**
+to estimate the potential revenue opportunity of improving your mobile site
+speed. Impact is driven by benchmark data from Google Analytics.
+- Use **[TestMySite](https://testmysite.thinkwithgoogle.com/)** to test your
+page’s mobile loading time alongside industry benchmarks and to learn how simple
+fixes can speed up your site and decrease visitor loss; TestMySite is currently
+powered by WebPageTest and PageSpeed Insights.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/c9spNOrIojgpHghKiZJY.svg", alt="Icon of a laptop with the Chrome logo behind and slightly above
+it.", width="366", height="366", class="float-right" %}
+</figure>
+
+**Developer trying to understand current performance of your site, as
+experienced by real-world Chrome users, and looking for audit recommendations
+against top industry trends and guidelines.**
+
+**[PageSpeed Insights](https://pagespeed.web.dev/)** helps you understand the
+real-world performance of your site, as experienced by Chrome users, and
+recommends optimization opportunities.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Nj1NljG9QGhzSMWkG36E.svg", alt="Icon of a Lighthouse audit
+result page.", width="366", height="366", class="float-right" %}
+</figure>
+
+**Developer trying to understand and audit a website against modern web
+performance best practices.**
+
+**[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)** contains a comprehensive set of
+performance opportunities; it provides you with a list of performance
+opportunities missing from your page and the time saved by implementing each
+optimization, which can help you understand what you should do.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rMwYhOH73ao3omTkEvHD.svg", alt="Icon of a magnifying glass
+over a bug.", width="366", height="366", class="float-right" %}
+</figure>
+
+**Developer looking for technical guidance on how to debug/deep dive into the
+performance of your site.**
+
+**[Chrome Developer Tools](https://developer.chrome.com/docs/devtools/)** (CDT) contains a
+Performance Panel that allows you to drill down into performance issues with
+your site by profiling your site with customized configurations, allowing you
+to track down performance bottlenecks. You can use CDT on either production or
+development versions of a website.
+
+**[WebPageTest](https://www.webpagetest.org/)** contains an advanced suite of
+metrics and trace viewers. It enables deep diving into the performance of your
+site on real mobile hardware with network conditions.
diff --git a/src/site/content/en/blog/speed-unnecessary-paints/index.md b/src/site/content/en/blog/speed-unnecessary-paints/index.md
new file mode 100644
index 00000000000..b59d1809c90
--- /dev/null
+++ b/src/site/content/en/blog/speed-unnecessary-paints/index.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: Avoiding unnecessary paints
+authors:
+  - paullewis
+date: 2013-05-08
+tags:
+  - blog
+---
+
+## Introduction
+
+Painting the elements for a site or application can get really expensive, and it can have a negative knock-on effect on our runtime performance. In this article we take a quick look at what can trigger painting in the browser, and how you can prevent unnecessary paints from taking place.
+
+## Painting: A super-quick tour
+
+One of the major tasks a browser has to perform is converting your DOM and CSS into pixels on the screen, and it does this through a fairly complex process. It starts by reading the markup and from this it creates a DOM tree. It does a similar thing with the CSS and from that it creates the CSSOM. The DOM and CSSOM are then combined and, eventually, we arrive at a structure from which we can start to paint some pixels.
+
+{% Aside %}
+If you want a much deeper insight into how browsers work there's an [in-depth article here on HTML5 Rocks](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) that you should check out!
+{% endAside %}
+
+The painting process itself is interesting. In Chrome that combined tree of DOM and CSS is rasterized by some software called [Skia](https://code.google.com/p/skia). If you've ever played with the `canvas` element Skia's API would look awfully familiar to you; there are many `moveTo`- and `lineTo`-style functions as well as a bunch of more advanced ones. Essentially all the elements that need to be painted are distilled to a collection of Skia calls that can be executed, and the output of is a bunch of bitmaps. These bitmaps are uploaded to the GPU, and the GPU helps out by compositing them together to give us the final picture on screen.
+
+<figure>
+ {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6dluZRhiUc2i50OAdnzU.jpg", alt="Dom to pixels", width="800", height="352" %}
+</figure>
+
+The thing to take away is that Skia's workload is directly affected by the styles you apply to your elements. If you use algorithmically heavy styles then Skia is going to have more work to do. [Colt McAnlis](http://www.google.com/+ColtMcAnlis) has written an [article on how CSS affects page render weight](http://www.html5rocks.com/en/tutorials/speed/css-paint-times/), so you should read that for more insight.
+
+With all that said, paint work takes time to perform, and if we don’t reduce it we will run over our frame budget of ~16ms. Users will notice that we missed frames and see it as jank, which ultimately hurts the user experience of our app. We really don’t want that, so let’s see what kinds of things cause paint work to be necessary, and what we can do about it.
+
+## Scrolling
+
+Whenever you scroll up or down in the browser it needs to repaint content before it appears onscreen. All being well that will just be a small area, but even if that’s the case the elements that need to be drawn could have complex styles applied. So just because you have a small area to paint doesn't mean it's going to happen quickly.
+
+In order to see what areas are being repainted you can use the “Show Paint Rectangles” feature in Chrome’s DevTools (just hit the little cog in the lower right corner). Then, with DevTools open, simply interact with your page and you’ll see flashing rectangles show where and when Chrome painted a part of your page.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lPRqbWJnCzQre3ZatZG3.jpg", alt="Show Paint Rectangles in Chrome DevTools", width="800", height="287" %}
+  <figcaption>Show Paint Rectangles in Chrome DevTools</figcaption>
+</figure>
+
+Scrolling performance is critical to your site's success; users really notice when your site or application doesn't scroll well, and they don't like it. We therefore have a vested interest in keeping the paint work light during scrolls so users don't see jank.
+
+I've previously written an [article on scrolling performance](http://www.html5rocks.com/en/tutorials/speed/scrolling/), so take a look at that if you want to know more about the specifics of scrolling performance.
+
+## Interactions
+
+Interactions are another cause of paint work: hovers, clicks, touches, drags. Whenever the user performs one of those interactions, let's say a hover, then Chrome will have to repaint the affected element. And, much as with scrolling, if there's a large and complex paint required you're going to see the frame rate drop.
+
+Everyone wants nice, smooth, interaction animations, so again we will need to see if the styles that change in our animation are costing us too much time.
+
+## An unfortunate combination
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lEaGOVpmC9p83WMCBGfK.jpg", alt="A demo with expensive paints", width="800", height="388" %}
+  <figcaption>A demo with expensive paints</figcaption>
+</figure>
+
+What happens if I scroll and I happen to move the mouse at the same time? It's perfectly possible for me to __inadvertently__ "interact" with an element as I scroll past it, triggering an expensive paint. That, in turn, could push me through my frame budget of ~16.7ms (the time we need to stay under that to hit 60 frames per second). I've [created a demo](https://dl.dropboxusercontent.com/u/2272348/codez/expensivescroll/demo.html) to show you exactly what I mean. Hopefully as you scroll and move your mouse you'll see the hover effects kicking in, but let's see what Chrome's DevTools makes of it:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bib9tiR2rEkkpPe66Nhj.png", alt="Chrome's DevTools showing expensive frames", width="800", height="466" %}
+  <figcaption>Chrome's DevTools showing expensive frames</figcaption>
+</figure>
+
+In the image above you can see that DevTools is registering the paint work when I hover on one of the blocks. I've gone with some super heavy styles in my demo to make the point, and so I'm pushing up to and occasionally through my frame budget. The last thing I want is to have to do this paint work unnecessarily, and especially so during a scroll when there's other work to be done!
+
+So how can we stop this from happening? As it happens the fix is pretty simple to implement. The trick here is to attach a `scroll` handler that will disable hover effects and set a timer for enabling them again. That means we are guaranteeing that when you scroll we won't need to perform any expensive interaction paints. When you've stopped for long enough we figure it's safe to switch them back on again.
+
+{% Aside %}
+By changing this you’re affecting the user experience of your application, so trade wisely. Only you and your team will be able to make the call as to what is an acceptable level of delay before hover effects are enabled again.
+{% endAside %}
+
+Here's the code:
+
+```js
+// Used to track the enabling of hover effects
+var enableTimer = 0;
+
+/*
+ * Listen for a scroll and use that to remove
+ * the possibility of hover effects
+ */
+window.addEventListener('scroll', function() {
+  clearTimeout(enableTimer);
+  removeHoverClass();
+
+  // enable after 1 second, choose your own value here!
+  enableTimer = setTimeout(addHoverClass, 1000);
+}, false);
+
+/**
+ * Removes the hover class from the body. Hover styles
+ * are reliant on this class being present
+ */
+function removeHoverClass() {
+  document.body.classList.remove('hover');
+}
+
+/**
+ * Adds the hover class to the body. Hover styles
+ * are reliant on this class being present
+ */
+function addHoverClass() {
+  document.body.classList.add('hover');
+}
+```
+
+As you can see we use a class on the body to track whether or not hover effects are "allowed", and the underlying styles rely on this class to be present:
+
+```css
+/* Expect the hover class to be on the body
+ before doing any hover effects */
+.hover .block:hover {
+ …
+}
+```
+
+And that's all there is to it!
+
+## Conclusion
+
+Rendering performance is critical to users enjoying your application, and you should always aim to keep your paint workload under 16ms. To help you do that, you should integrate using DevTools __throughout your development process__ to identify and fix bottlenecks as they arise.
+
+Inadvertent interactions, particularly on paint-heavy elements, can be very costly and will kill rendering performance. As you've seen, we can use a small piece of code to fix that.
+
+Take a look at your sites and applications, could they do with a little paint protection?
diff --git a/src/site/content/en/blog/speed-v8/index.md b/src/site/content/en/blog/speed-v8/index.md
new file mode 100644
index 00000000000..80a2a3a76ce
--- /dev/null
+++ b/src/site/content/en/blog/speed-v8/index.md
@@ -0,0 +1,228 @@
+---
+layout: post
+title: Performance tips for JavaScript in V8
+authors:
+  - chriswilson
+date: 2012-10-11
+tags:
+  - blog
+---
+
+## Introduction
+
+Daniel Clifford gave an [excellent talk at Google I/O](https://www.youtube.com/watch?v=UJPdhx5zTaw) on tips and tricks to improve JavaScript performance in V8.  Daniel encouraged us to "demand faster" - to carefully analyze performance differences between C++ and JavaScript, and write code mindfully of how JavaScript works.  A summary of the most important points of Daniel's talk are captured in this article, and we'll also keep this article updated as performance guidance changes.
+
+## The Most Important Advice
+
+It's important to put any performance advice into context.  Performance advice is addictive, and sometimes focusing on deep advice first can be quite distracting from the real issues. You need to take a holistic view of the performance of your web application - before focusing on these performance tip, you should probably analyze your code with tools like [PageSpeed](https://developers.google.com/speed/pagespeed/) and get your score up.  This will help you avoid premature optimization.
+
+The best basic advice for getting good performance in Web applications is:
+
+- Be prepared before you have (or notice) a problem
+- Then, identify and understand the crux of your problem
+- Finally, fix what matters
+
+In order to accomplish these steps, it can be important to understand how V8 optimizes JS, so you can write code mindful of the JS runtime design.  It's also important to learn about the tools available and how they can help you.  Daniel goes into some more explanation of how to use the developer tools in his talk; this document just captures some of the most important points of the V8 engine design.
+
+So, on to the V8 tips!
+
+## Hidden Classes
+
+JavaScript has limited compile-time type information: types can be changed at runtime, so it's natural to expect that it is expensive to reason about JS types at compile time.  This might lead you to question how JavaScript performance could ever get anywhere close to C++.  However, V8 has hidden types created internally for objects at runtime; objects with the same hidden class can then use the same optimized generated code.
+
+For example:
+
+```js
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+var p1 = new Point(11, 22);
+var p2 = new Point(33, 44);
+// At this point, p1 and p2 have a shared hidden class
+p2.z = 55;
+// warning! p1 and p2 now have different hidden classes!```
+```
+
+Until the object instance p2 has additional member ".z" added, p1 and p2 internally have the same hidden class - so V8 can generate a single version of optimized assembly for JavaScript code that manipulates either p1 or p2.  The more you can avoid causing the hidden classes to diverge, the better performance you'll obtain.
+
+### Therefore
+
+- Initialize all object members in constructor functions (so the instances don't change type later)
+- Always initialize object members in the same order
+
+## Numbers
+
+V8 uses tagging to represent values efficiently when types can change.  V8 infers from the values that you use what number type you are dealing with. Once V8 has made this inference, it uses tagging to represent values efficiently, because these types can change dynamically. However, there is sometimes a cost to changing these type tags, so it's best to use number types consistently, and in general it is most optimal to use 31-bit signed integers where appropriate.
+
+For example:
+
+```js
+var i = 42;  // this is a 31-bit signed integer
+var j = 4.2;  // this is a double-precision floating point number```
+```
+
+### Therefore
+
+- Prefer numeric values that can be represented as 31-bit signed integers.
+
+## Arrays
+
+In order to handle large and sparse arrays, there are two types of array storage internally:
+
+- Fast Elements: linear storage for compact key sets
+- Dictionary Elements: hash table storage otherwise
+
+It's best not to cause the array storage to flip from one type to another.
+
+### Therefore
+
+- Use contiguous keys starting at 0 for Arrays
+- Don't pre-allocate large Arrays (e.g. > 64K elements) to their maximum size, instead grow as you go
+- Don't delete elements in arrays, especially numeric arrays
+- Don't load uninitialized or deleted elements:
+
+``` js a = new Array();
+for (var b = 0; b &lt; 10; b++) {
+  a[0] |= b;  // Oh no!
+}
+//vs.
+a = new Array();
+a[0] = 0;
+for (var b = 0; b &lt; 10; b++) {
+  a[0] |= b;  // Much better! 2x faster.
+}
+```
+
+Also, Arrays of doubles are faster - the array's hidden class tracks element types, and arrays containing only doubles are unboxed (which causes a hidden class change).However, careless manipulation of Arrays can cause extra work due to boxing and unboxing - e.g.
+
+```js
+var a = new Array();
+a[0] = 77;   // Allocates
+a[1] = 88;
+a[2] = 0.5;   // Allocates, converts
+a[3] = true; // Allocates, converts```
+```
+is less efficient than:
+
+```js
+var a = [77, 88, 0.5, true];
+```
+
+because in the first example the individual assignments are performed one after another, and the assignment of `a[2]` causes the Array to be converted to an Array of unboxed doubles, but then the assignment of `a[3]` causes it to be re-converted back to an Array that can contain any values (Numbers or objects).  In the second case, the compiler knows the types of all of the elements in the literal, and the hidden class can be determined up front.
+
+- Initialize using array literals for small fixed-sized arrays
+- Preallocate small arrays (<64k) to correct size before using them
+- Don't store non-numeric values (objects) in numeric arrays
+- Be careful not to cause re-conversion of small arrays if you do initialize without literals.
+
+## JavaScript Compilation
+
+Although JavaScript is a very dynamic language, and original implementations of it were interpreters, modern JavaScript runtime engines use compilation.  V8 (Chrome's JavaScript) has two different Just-In-Time (JIT) compilers, in fact:
+
+- The "Full" compiler, which can generate good code for any JavaScript
+- The Optimizing compiler, which produces great code for most JavaScript, but takes longer to compile.
+
+## The Full Compiler
+
+In V8, the Full compiler runs on all code, and starts executing code as soon as possible, quickly generating good but not great code.  This compiler assumes almost nothing about types at compilation time - it expects that types of variables can and will change at runtime.  The code generated by the Full compiler uses Inline Caches (ICs) to refine knowledge about types while program runs, improving efficiency on the fly.
+
+The goal of Inline Caches is to handle types efficiently, by caching type-dependent code for operations; when the code runs, it will validate type assumptions first, then use the inline cache to shortcut the operation.  However, this means that operations that accept multiple types will be less performant.
+
+### Therefore
+
+- Monomorphic use of operations is preferred over polymorphic operations
+
+Operations are monomorphic if the hidden classes of inputs are always the same - otherwise they are polymorphic, meaning some of the arguments can change type across different calls to the operation.  For example, the second add() call in this example causes polymorphism:
+
+```js
+function add(x, y) {
+  return x + y;
+}
+
+add(1, 2);      // + in add is monomorphic
+add("a", "b");  // + in add becomes polymorphic```
+```
+
+## The Optimizing Compiler
+
+In parallel with the full compiler, V8 re-compiles "hot" functions (that is, functions that are run many times) with an optimizing compiler.  This compiler uses type feedback to make the compiled code faster - in fact, it uses the types taken from ICs we just talked about!
+
+In the optimizing compiler, operations get speculatively inlined (directly placed where they are called).  This speeds execution (at the cost of memory footprint), but also enables other optimizations.  Monomorphic functions and constructors can be inlined entirely (that's another reason why monomorphism is a good idea in V8).
+
+You can log what gets optimized using the standalone "d8" version of the V8 engine:
+
+```shell
+d8 --trace-opt primes.js
+```
+
+(this logs names of optimized functions to stdout.)
+
+Not all functions can be optimized, however - some features prevent the optimizing compiler from running on a given function (a "bail-out").  In particular, the optimizing compiler currently bails out on functions with try {} catch {} blocks!
+
+### Therefore
+
+- Put perf-sensitive code into a nested function if you have try {} catch {} blocks:
+```js
+function perf_sensitive() {
+  // Do performance-sensitive work here
+}
+
+try {
+  perf_sensitive()
+} catch (e) {
+  // Handle exceptions here
+}
+```
+
+This guidance will probably change in the future, as we enable try/catch blocks in the optimizing compiler. You can examine how the optimizing compiler is bailing out on functions by using the "--trace-opt" option with d8 as above, which gives you more information on which functions were bailed out:
+
+```shell
+d8 --trace-opt primes.js
+```
+
+## De-optimization
+
+Finally, the optimization performed by this compiler is speculative - sometimes it doesn't work out, and we back off.  The process of "deoptimization" throws away optimized code, and resumes execution at the right place in "full" compiler code.  Reoptimization might be triggered again later, but for the short term, execution slows down.  In particular, causing changes in the hidden classes of variables after the functions have been optimized will cause this deoptimization to occur.
+
+### Therefore
+
+- Avoid hidden class changes in functions after they are optimized
+
+You can, as with other optimizations, get a log of functions that V8 had to deoptimize with a logging flag:
+
+```shell
+d8 --trace-deopt primes.js
+```
+
+## Other V8 Tools
+By the way, you can also pass V8 tracing options to Chrome on startup:
+
+```shell
+"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --js-flags="--trace-opt --trace-deopt"```
+```
+
+In addition to using the developer tools profiling, you can also use d8 to do profiling:
+
+```shell
+% out/ia32.release/d8 primes.js --prof
+```
+
+This uses the built-in sampling profiler, which takes a sample every millisecond and writes v8.log.
+
+## In Summary
+
+It's important to indentify and understand how the V8 engine works with your code to prepare to build performant JavaScript.  Once more, the basic advice is:
+
+- Be prepared before you have (or notice) a problem
+- Then, identify and understand the crux of your problem
+- Finally, fix what matters
+
+This means you should ensure the problem is in your JavaScript, by using other tools like PageSpeed first; possibly reducing to to pure JavaScript (no DOM) before collecting metrics, and then use those metrics to locate bottlenecks and eliminate the important ones.  Hopefully Daniel's talk (and this article) will help you understand better how V8 runs JavaScript - but be sure to focus on optimizing your own algorithms, too!
+
+## References
+
+- [Daniel's talk on YouTube](https://www.youtube.com/watch?v=UJPdhx5zTaw)
+- [Daniel's slide deck](http://v8-io12.appspot.com/)
+- [I-want-to-optimize-my-JS-application-on-V8 checklist by Vyacheslav Egorov, V8 Engineer](http://mrale.ph/blog/2011/12/18/v8-optimization-checklist.html)
diff --git a/src/site/content/en/blog/speedy-css-tip-animated-gradient-text/index.md b/src/site/content/en/blog/speedy-css-tip-animated-gradient-text/index.md
new file mode 100644
index 00000000000..6577180aafc
--- /dev/null
+++ b/src/site/content/en/blog/speedy-css-tip-animated-gradient-text/index.md
@@ -0,0 +1,168 @@
+---
+title: Speedy CSS Tip! Animated Gradient Text
+subhead: Let's make that animated gradient text effect with scoped custom properties and background-clip
+date: 2022-11-03
+hero: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/jGDpMMoAas6YfIUAbPvr.jpg
+thumbnail: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/jGDpMMoAas6YfIUAbPvr.jpg
+alt: A hand holds up a sticker with the word "Hello!" printed on it. The text is orange and the background is black.
+authors:
+  - jheyy
+tags: 
+  - blog
+  - css
+---
+
+Hop over to [CodePen](https://pen.new) and create a new pen.
+
+Create the markup for your text. Let's use a header with the word "Speedy":
+
+```html
+<h1 class="boujee-text">Hello!</h1>
+```
+
+Then, let's give our `body` a darker `background-color`:
+
+```css
+body {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  background: hsl(0 0% 20%);
+}
+```
+
+Bump up the `font-size` on our text. Use `clamp` to make it responsive:
+
+```css
+.boujee-text {
+  font-size: clamp(3rem, 25vmin, 8rem);
+}
+```
+
+Create two custom properties for the colors we're going to use. Apply a `linear-gradient` to the `background` using those colors and rotate it by 90 degrees:
+
+```css/1-2,6-8
+.boujee-text {
+  --color-one: hsl(15 90% 55%);
+  --color-two: hsl(40 95% 55%);
+  font-size: clamp(3rem, 25vmin, 8rem);
+  background: linear-gradient(
+                90deg,
+                var(--color-one),
+                var(--color-two),
+                var(--color-one)
+              ) 0 0 / 100% 100%;
+}
+```
+
+Create a custom property that you can use for the horizontal background size. Use it for `background-size-x`:
+
+```css/1,10
+.boujee-text {
+  --bg-size: 400%;
+  --color-one: hsl(15 90% 55%);
+  --color-two: hsl(40 95% 55%);
+  font-size: clamp(3rem, 25vmin, 8rem);
+  background: linear-gradient(
+                90deg,
+                var(--color-one),
+                var(--color-two),
+                var(--color-one)
+              ) 0 0 / var(--bg-size) 100%;
+}
+```
+
+To clip the background to the text set the `color` to `transparent`, and set `background-clip: text`:
+
+
+```css/11-13
+.boujee-text {
+  --bg-size: 400%;
+  --color-one: hsl(15 90% 55%);
+  --color-two: hsl(40 95% 55%);
+  font-size: clamp(3rem, 25vmin, 8rem);
+  background: linear-gradient(
+                90deg,
+                var(--color-one),
+                var(--color-two),
+                var(--color-one)
+              ) 0 0 / var(--bg-size) 100%;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+```
+
+{% Aside %}
+The `background-clip` property needs prefixing in some browsers as `-webkit-background-clip`.
+{% endAside %}
+
+At this point, you could leave it there and experiment with the `background-position` and the gradient used in the `background-image`. Or, you could animate that gradient across your text. First, define a keyframe for the animation. This will use the `--bg-size` custom property you defined earlier. A good example of scoped custom properties making maintenance easier for you.
+
+```css
+@keyframes move-bg {
+  to {
+    background-position: var(--bg-size) 0;
+  }
+}
+```
+
+Then apply the animation using `animation`:
+
+```css/14
+.boujee-text {
+  --bg-size: 400%;
+  --color-one: hsl(15 90% 55%);
+  --color-two: hsl(40 95% 55%);
+  font-size: clamp(3rem, 25vmin, 8rem);
+  background: linear-gradient(
+                90deg,
+                var(--color-one),
+                var(--color-two),
+                var(--color-one)
+              ) 0 0 / var(--bg-size) 100%;
+  color: transparent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: move-bg 8s infinite linear;
+}
+```
+
+To take this further, you can wrap your animation code in a media query to respect your user's preferences for motion:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .boujee-text {
+    animation: move-bg 8s linear infinite;
+  }
+  @keyframes move-bg {
+    to {
+      background-position: var(--bg-size) 0;
+    }
+  }
+}
+``` 
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYrGPNE',
+  height: 300,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+Done! 🎉 You've created some animated gradient text with CSS using scoped custom properties and `background-clip`.
+
+Here's this tip in its speedy video form! ⚡️
+
+{% Video {
+    controls: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/v6NHBhtbffb91Ls0D7No.mp4"
+  }
+%}
+
+Prefer this in [tweet form](https://twitter.com/jh3yy/status/1517629642064150529)? 🐦
+
+Stay Awesome! ʕ •ᴥ•ʔ
+
+___Hero image by [Vladislav Klapin](https://unsplash.com/@lemonvlad) on [Unsplash](https://unsplash.com/s/photos/speedy-text)___
diff --git a/src/site/content/en/blog/speedy-css-tip-animated-loader/index.md b/src/site/content/en/blog/speedy-css-tip-animated-loader/index.md
new file mode 100644
index 00000000000..c1ce174fdd4
--- /dev/null
+++ b/src/site/content/en/blog/speedy-css-tip-animated-loader/index.md
@@ -0,0 +1,117 @@
+---
+title: Speedy CSS Tip! Animated Loader
+subhead: Let's make an animated CSS loader with scoped custom properties and animation-timing-function
+date: 2022-09-22
+hero: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/vzvc5Ep1blYUQMYYnAKT.jpg
+thumbnail: image/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/vzvc5Ep1blYUQMYYnAKT.jpg
+alt: An hourglass sits lodged in some sand.
+authors:
+  - jheyy
+tags: 
+  - blog
+  - css
+---
+
+Hop over to [CodePen](https://pen.new) and create a new pen.
+
+Create the markup for our loader. Note the use of inline custom properties:
+
+```html
+<div class="loader" style="--count: 10">
+  <span style="--index: 0"></span>
+  <span style="--index: 1"></span>
+  <span style="--index: 2"></span>
+  <span style="--index: 3"></span>
+  <span style="--index: 4"></span>
+  <span style="--index: 5"></span>
+  <span style="--index: 6"></span>
+  <span style="--index: 7"></span>
+  <span style="--index: 8"></span>
+  <span style="--index: 9"></span>
+</div>
+
+```
+
+You can also use a generator ([Pug](https://pugjs.org/api/getting-started.html)) to configure the number of lines:
+
+```pug
+- const COUNT = 10
+.loader(style=`--count: ${COUNT}`)
+  - let i = 0
+  while i < COUNT
+    span(style=`--index: ${i}`)
+    - i++
+```
+
+Give our loader some styles:
+
+```css
+loader {
+  --size: 10vmin;
+
+  height: var(--size);
+  position: relative;
+  width: var(--size);
+}
+```
+
+Position our lines using absolute positioning and a combination of `calc` with `transform`:
+
+```css
+.loader span {
+  background: grey;
+  height: 25%;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%)
+             rotate(calc(((360 / var(--count)) * var(--index)) * 1deg))
+             translate(0, -125%);
+  width: 10%;
+}
+```
+
+Apply an opacity based on the `--index`:
+
+```css
+.loader span {
+  opacity: calc(var(--index) / var(--count));
+} 
+```
+
+Get things spinning!
+
+```css
+.loader {
+  animation: spin 0.75s infinite steps(var(--count));
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+Note the use of `steps(var(--count))` to get the right effect ✨
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNdeWep',
+  height: 300,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+Done! 🎉
+
+{% Video {
+    controls: true,
+    src:"video/Dyx9FwYgMyNqy1kMGx8Orz6q0qC3/Hs8ynufhs5B9PA0GSnZ8.mp4"
+  }
+%}
+
+Prefer this in [tweet form](https://twitter.com/jh3yy/status/1513599688662044684)? 🐦
+
+Stay Awesome! ʕ •ᴥ•ʔ
+
diff --git a/src/site/content/en/blog/squoosh-v2/index.md b/src/site/content/en/blog/squoosh-v2/index.md
new file mode 100644
index 00000000000..47ddc295bf0
--- /dev/null
+++ b/src/site/content/en/blog/squoosh-v2/index.md
@@ -0,0 +1,96 @@
+---
+title: Announcing Squoosh v2
+subhead: New codecs support, updated design, and CLI support!
+description: |
+  New codecs support, updated design, and CLI support!
+date: 2020-12-09
+authors:
+  - kosamari
+hero: image/admin/T6HOx3Tl5ns0H9sTolsh.jpg
+thumbnail: image/admin/NybFYj3T4ZRfNOzNoH5A.jpg
+alt: A screen capture of the new Squoosh homepage
+tags:
+  - blog
+  - tools
+  - javascript
+  - images
+---
+
+
+
+[Squoosh](https://squoosh.app) is an image compression app our team built and [debuted at Chrome 
+Dev Summit 2018](https://youtu.be/ipNW6lJHVEs). We built it to make it easy to experiment with 
+different image codecs, and to showcase the capabilities of the modern web.  
+
+Today, we are releasing a major update to the app with more codecs support, a new design, and a 
+new way to use Squoosh on your command line called Squoosh CLI.
+
+
+## New codecs support
+
+We now support OxiPNG, MozJPEG, WebP, and AVIF, in addition to codecs natively supported in your 
+browser.  A new codec was made possible again with the use of WebAssembly. By compiling a codec 
+encoder and decoder as WebAssembly module users can access and experiment with newer codecs even 
+if their preferred browser does not support them. 
+
+## Launching a command line Squoosh!
+
+Ever since the original launch in 2018, common user request was to interact with Squoosh 
+programmatically without UI. We felt a bit conflicted about this path since our app was a UI on 
+top of command-line-based codec tools. However we do understand the desire to interact with the 
+whole package of codecs instead of multiple tools. Squoosh CLI does just that.
+
+{% YouTube 'FUqn8eOxCP4' %}
+
+You can install the beta version of the Squoosh CLI by running `npm i @squoosh/cli` or run it 
+directly using `npx @squoosh/cli [parameters]`.
+
+The Squoosh CLI is written in Node and makes use of the exact same WebAssembly modules the PWA 
+uses. Through extensive use of workers, all images are decoded, processed and encoded in parallel. 
+We also use Rollup to bundle everything into one JavaScript file to make sure installation via 
+`npx` is quick and seamless. The CLI also offers auto compression, where it tries to reduce the 
+quality of an image as much as possible without degrading the visual fidelity 
+(using the [Butteraugli metric](https://github.com/google/butteraugli)). 
+
+With the Squoosh CLI you can compress the images in your web app to multiple formats and use the 
+[`<picture>` element](https://developer.mozilla.org/docs/Web/HTML/Element/picture) 
+to let the browser choose the best version. We also plan to build 
+plugins for Webpack, Rollup, and other build tools to make image compression
+an automatic part of your build process.
+
+## Build process change from Webpack to Rollup
+
+The same team that built Squoosh has spent a significant amount of time looking at build tooling 
+this year for [Tooling Report](https://bundlers.tooling.report/), and decided to switch our build 
+process from Webpack to Rollup.
+
+The project was initially started with Webpack because we wanted to try it as a team, and at the 
+time in 2018 Webpack was the only tool that gave us enough control to set up the project the way 
+we wanted. Over time, we've found Rollup's easy plugin system and simplicity with ESM made it a 
+natural choice for this project. 
+
+
+## Updated UI design 
+
+We've also updated the UI design of the app featuring `blobs` as a visual element.  It is a little 
+pun on how we treat data in our code. Squoosh passes image data around as a blob, so it felt 
+natural to include some blobs in the design (get it?).
+
+Color usage was honed in as well, so that color was more than an accent but additionally a vector 
+to distinguish and reinforce which image is in context for the options. All in all, the homepage 
+is a bit more vibrant and the tool itself is a bit more clear and concise.
+
+
+## What's next ? 
+
+We plan to keep working on Squoosh. As the new image format gets released, we want our users to 
+have a place where they can play with the codec without heavy lifting. We also hope to expand use 
+of Squoosh CLI and integrate more into the build process of a web application. 
+
+Squoosh has always been open source but we've never had focus on growing the community. In 2021, 
+we plan to expand our contributor base and have a better onboarding process to the project. 
+
+Do you have any ideas for Squoosh? Please let us know on our
+[issue tracker](https://github.com/GoogleChromeLabs/squoosh/issues).
+The team is headed to extended winter vacation but we promise to get
+back to you in the new year.
diff --git a/src/site/content/en/blog/stale-while-revalidate/hero.jpg b/src/site/content/en/blog/stale-while-revalidate/hero.jpg
deleted file mode 100644
index b5403a9be5f..00000000000
Binary files a/src/site/content/en/blog/stale-while-revalidate/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/stale-while-revalidate/index.md b/src/site/content/en/blog/stale-while-revalidate/index.md
index 36eb85fce67..7eba135c602 100644
--- a/src/site/content/en/blog/stale-while-revalidate/index.md
+++ b/src/site/content/en/blog/stale-while-revalidate/index.md
@@ -5,12 +5,14 @@ authors:
   - jeffposnick
 date: 2019-07-18
 description: stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
-hero: hero.jpg
+hero: image/admin/skgQgcT3q8fdBGGNL3o1.jpg
 alt: A photograph of a half-painted wall.
 tags:
   - blog
-  - speed
-  - caching
+  # - speed
+  # - caching
+feedback:
+  - api
 ---
 
 ## What shipped?
@@ -29,7 +31,7 @@ and [Firefox 68](https://bugzilla.mozilla.org/show_bug.cgi?id=1536511).
 
 Browsers that don't support `stale-while-revalidate` will silently ignore that
 configuration value, and use
-[`max-age`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#max-age),
+[`max-age`](/http-cache/#versioned-urls),
 as I'll explain shortly…
 
 ## What's it mean?
@@ -38,7 +40,7 @@ Let's break down `stale-while-revalidate` into two parts: the idea that a cached
 response might be stale, and the process of revalidation.
 
 First, how does the browser know whether a cached response is "stale"? A
-[`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)
+[`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control)
 response header that contains `stale-while-revalidate` should also contain
 `max-age`, and the number of seconds specified via `max-age` is what determines
 staleness. Any cached response newer than `max-age` is considered fresh, and
@@ -49,7 +51,7 @@ fulfill a browser's request. From the perspective of `stale-while-revalidate`,
 there's nothing to do in this scenario.
 
 But if the cached response is stale, then another age-based check is performed:
-is the age of the cached response within the window of time covered by the
+is the age of the cached response within the additional time window provided by the
 `stale-while-revalidate` setting?
 
 If the age of a stale response falls into this window, then it will be used to
@@ -99,7 +101,7 @@ revalidation will depend on getting a response back from the network.
 Here's a breakdown of those three distinct states, along with the window of time
 in which each of them apply for our example:
 
-![A diagram illustrating the information from the previous section.](s-w-r-diagram.svg)
+{% Img src="image/admin/C8lg2FSEqhTKR6WmYky3.svg", alt="A diagram illustrating the information from the previous section.", width="719", height="370" %}
 
 ## What are the common use cases?
 
@@ -120,7 +122,7 @@ the cache with fresher content, without blocking on a network response.
 
 If you've heard of `stale-while-revalidate` chances are that it was in the
 context of
-[recipes](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate)
+[recipes](offline-cookbook/#stale-while-revalidate)
 used within a [service worker](/service-workers-cache-storage/).
 
 Using stale-while-revalidate via a `Cache-Control` header shares some
@@ -135,11 +137,11 @@ whether to implement a service worker-based approach, or just rely on the
 * You're already using a service worker in your web app.
 * You need fine-grained control over the contents of your caches, and want to
   implement something like a least-recently used expiration policy. Workbox's
-  [Cache Expiration](https://developers.google.com/web/tools/workbox/modules/workbox-cache-expiration)
+  [Cache Expiration](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/)
   module can help with this.
 * You want to be notified when a stale response changes in the background during
   the revalidation step. Workbox's
-  [Broadcast Cache Update](https://developers.google.com/web/tools/workbox/modules/workbox-broadcast-cache-update)
+  [Broadcast Cache Update](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)
   module can help with this.
 * You need this `stale-while-revalidate` behavior in all modern browsers.
 
@@ -156,7 +158,7 @@ If you're using a service worker and also have `stale-while-revalidate` enabled
 for some responses via a `Cache-Control` header, then the service worker will,
 in general, have "first crack" at responding to a request. If the service worker
 decides not to respond, or if in the process of generating a response it makes a
-network request using [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API),
+network request using [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API),
 then the behavior configured via the `Cache-Control` header will end up going
 into effect.
 
diff --git a/src/site/content/en/blog/stale-while-revalidate/s-w-r-diagram.svg b/src/site/content/en/blog/stale-while-revalidate/s-w-r-diagram.svg
deleted file mode 100644
index 5b47b414229..00000000000
--- a/src/site/content/en/blog/stale-while-revalidate/s-w-r-diagram.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 718.7979002624672 370.4251968503937" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l718.7979 0l0 370.4252l-718.7979 0l0 -370.4252z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l718.7979 0l0 370.4252l-718.7979 0z" fill-rule="evenodd"/><path fill="#efefef" d="m480.0 126.96588l240.0 0l0 243.52756l-240.0 0z" fill-rule="evenodd"/><path fill="#efefef" d="m480.0 71.49606l240.0 0l0 5.6377945l-240.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m479.99976 86.77428l240.0 0l0 27.338585l-240.0 0z" fill-rule="evenodd"/><path fill="#bf9000" d="m561.13257 99.63428l0 1.859375l-0.21875 0q-1.53125 0.03125 -2.46875 0.8125q-0.9375 0.765625 -1.125 2.140625q0.90625 -0.921875 2.296875 -0.921875q1.484375 0 2.359375 1.0625q0.875 1.0625 0.875 2.796875q0 1.109375 -0.484375 2.015625q-0.484375 0.890625 -1.359375 1.390625q-0.875 0.5 -1.984375 0.5q-1.796875 0 -2.90625 -1.25q-1.109375 -1.25 -1.109375 -3.34375l0 -0.8125q0 -1.84375 0.703125 -3.265625q0.703125 -1.421875 2.0 -2.1875q1.3125 -0.78125 3.046875 -0.796875l0.375 0zm-2.203125 5.703125q-0.546875 0 -1.0 0.28125q-0.4375 0.28125 -0.65625 0.75l0 0.6875q0 1.140625 0.4375 1.78125q0.453125 0.625 1.265625 0.625q0.71875 0 1.171875 -0.5625q0.453125 -0.578125 0.453125 -1.5q0 -0.921875 -0.453125 -1.484375q-0.453125 -0.578125 -1.21875 -0.578125zm12.9140625 1.09375q0 2.359375 -0.984375 3.609375q-0.96875 1.25 -2.859375 1.25q-1.859375 0 -2.84375 -1.21875q-0.984375 -1.234375 -1.0 -3.53125l0 -2.09375q0 -2.375 0.984375 -3.609375q0.984375 -1.234375 2.84375 -1.234375q1.859375 0 2.84375 1.21875q0.984375 1.21875 1.015625 3.515625l0 2.09375zm-2.265625 -2.296875q0 -1.421875 -0.390625 -2.0625q-0.375 -0.640625 -1.203125 -0.640625q-0.796875 0 -1.171875 0.609375q-0.375 0.609375 -0.40625 1.921875l0 2.765625q0 1.390625 0.375 2.0625q0.390625 0.671875 1.21875 0.671875q0.828125 0 1.1875 -0.640625q0.375 -0.65625 0.390625 -1.984375l0 -2.703125zm8.4296875 0.625l2.828125 0l0 2.046875l-2.828125 0l0 3.1875l-2.140625 0l0 -3.1875l-2.828125 0l0 -2.046875l2.828125 0l0 -3.046875l2.140625 0l0 3.046875zm12.75 4.03125q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.5390625 5.109375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm4.46875 -2.640625q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm11.6875 1.78125q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m502.7087 150.70604l194.58267 0l0 83.74803l-194.58267 0z" fill-rule="evenodd"/><path fill="#5e5e5e" d="m521.6618 171.26917q-0.140625 1.84375 -1.359375 2.90625q-1.21875 1.046875 -3.21875 1.046875q-2.1875 0 -3.453125 -1.46875q-1.25 -1.484375 -1.25 -4.046875l0 -0.703125q0 -1.640625 0.578125 -2.890625q0.578125 -1.25 1.65625 -1.90625q1.078125 -0.671875 2.5 -0.671875q1.96875 0 3.171875 1.0625q1.203125 1.046875 1.390625 2.953125l-2.34375 0q-0.09375 -1.109375 -0.625 -1.59375q-0.515625 -0.5 -1.59375 -0.5q-1.171875 0 -1.765625 0.84375q-0.578125 0.828125 -0.59375 2.59375l0 0.859375q0 1.84375 0.5625 2.703125q0.5625 0.84375 1.765625 0.84375q1.078125 0 1.609375 -0.484375q0.546875 -0.5 0.625 -1.546875l2.34375 0zm6.28125 3.796875q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.03125 -5.859375q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.84375 -2.21875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm11.3828125 6.78125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m517.1618 191.72229q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm7.59375 10.53125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.921875 1.578125l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm5.7578125 0.15625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm5.6015625 9.640625l-1.171875 -0.625l0.28125 -0.5q0.515625 -0.953125 0.53125 -1.90625l0 -1.75l1.90625 0l0 1.5625q-0.015625 0.875 -0.453125 1.75q-0.421875 0.890625 -1.09375 1.46875zm12.203125 -2.859375q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.625 -6.875l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm13.46875 4.125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm9.7109375 -6.109375l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.140625q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.84375 -6.390625l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm11.75 9.671875q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.984375 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m517.4743 213.06604q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.921875 1.578125l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm1.9765625 -1.109375q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m521.9743 251.06604l-2.34375 0l-4.5625 -7.484375l0 7.484375l-2.34375 0l0 -11.375l2.34375 0l4.578125 7.5l0 -7.5l2.328125 0l0 11.375zm5.796875 0.15625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm7.7265625 -3.75l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm10.046875 7.453125l1.109375 -5.375l2.1875 0l-2.15625 8.453125l-1.890625 0l-1.609375 -5.328125l-1.59375 5.328125l-1.890625 0l-2.15625 -8.453125l2.1875 0l1.09375 5.375l1.546875 -5.375l1.640625 0l1.53125 5.375zm4.0546875 -1.234375q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm11.890625 -2.203125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.1484375 2.953125l-0.8125 0.8125l0 2.578125l-2.25 0l0 -12.0l2.25 0l0 6.640625l0.4375 -0.5625l2.171875 -2.53125l2.703125 0l-3.046875 3.515625l3.3125 4.9375l-2.59375 0l-2.171875 -3.390625zm14.21875 -2.953125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm14.0703125 5.921875q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m515.2868 259.5348l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.2343445 0l0 -1.65625l1.2343445 0l0 -2.078125l2.265625 0zm2.109375 6.21875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm11.734375 4.140625l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm10.1875 -0.859375q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm6.265625 0.859375l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm2.4140625 0l0 -6.796875l-1.265625 0l0 -1.65625l1.265625 0l0 -0.390625q0.015625 -1.59375 0.96875 -2.453125q0.96875 -0.875 2.734375 -0.875q1.046875 0 2.5625 0.46875l-0.328125 1.859375q-0.765625 -0.21875 -1.1875 -0.28125q-0.421875 -0.078125 -0.90625 -0.078125q-1.578125 0 -1.578125 1.40625l0 0.34375l1.65625 0l0 1.65625l-1.65625 0l0 6.796875l-2.265625 0zm7.3125 0l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm4.25 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm8.5546875 -10.53125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm4.90625 3.0q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm16.617188 2.625q0 2.03125 -0.875 3.171875q-0.859375 1.140625 -2.40625 1.140625q-1.375 0 -2.203125 -1.0625l-0.09375 0.90625l-2.03125 0l0 -12.0l2.25 0l0 4.296875q0.78125 -0.90625 2.0625 -0.90625q1.546875 0 2.421875 1.140625q0.875 1.125 0.875 3.1875l0 0.125zm-2.25 -0.15625q0 -1.28125 -0.40625 -1.875q-0.40625 -0.59375 -1.21875 -0.59375q-1.078125 0 -1.484375 0.890625l0 3.328125q0.421875 0.890625 1.5 0.890625q1.09375 0 1.4375 -1.078125q0.171875 -0.515625 0.171875 -1.5625zm8.3984375 -2.03125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm0.4453125 2.03125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm14.484375 1.0625l1.109375 -5.375l2.1875 0l-2.15625 8.453125l-1.890625 0l-1.609375 -5.328125l-1.59375 5.328125l-1.890625 0l-2.15625 -8.453125l2.1875 0l1.09375 5.375l1.546875 -5.375l1.640625 0l1.53125 5.375zm8.9921875 0.734375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.7734375 0.4375q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m517.3337 282.7223q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.46875q0 -1.984375 0.890625 -3.140625q0.890625 -1.15625 2.4375 -1.15625q1.359375 0 2.15625 1.03125l0.15625 -0.875l1.984375 0l0 11.703125l-2.265625 0l0 -3.984375q-0.78125 0.890625 -2.046875 0.890625q-1.515625 0 -2.421875 -1.171875q-0.890625 -1.171875 -0.890625 -3.296875zm2.265625 0.171875q0 1.203125 0.421875 1.84375q0.421875 0.625 1.203125 0.625q1.03125 0 1.46875 -0.828125l0 -3.484375q-0.421875 -0.796875 -1.453125 -0.796875q-0.78125 0 -1.21875 0.640625q-0.421875 0.625 -0.421875 2.0zm12.1953125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm7.78125 1.015625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm3.28125 13.390625l-1.171875 -0.625l0.28125 -0.5q0.515625 -0.953125 0.53125 -1.90625l0 -1.75l1.90625 0l0 1.5625q-0.015625 0.875 -0.453125 1.75q-0.421875 0.890625 -1.09375 1.46875zm12.203125 -2.859375q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.625 -6.875l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm13.796875 -6.40625l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.109375 6.21875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm18.734375 -0.015625q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm14.75 -0.015625q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm8.7265625 3.453125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm6.265625 0.859375l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm6.7578125 0q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm6.59375 10.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625z" fill-rule="nonzero"/><path fill="#5e5e5e" d="m515.2868 297.5348l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.2343445 0l0 -1.65625l1.2343445 0l0 -2.078125l2.265625 0zm4.90625 3.0q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm12.5234375 5.109375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm9.71875 1.671875q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.03125 -5.859375q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm5.1328125 5.671875q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m720.0 71.49606l0 297.88977" fill-rule="evenodd"/><path stroke="#d9d9d9" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="1.0,3.0" d="m720.0 71.49606l0 297.88977" fill-rule="evenodd"/><path fill="#d9d9d9" d="m240.0 126.96588l240.0 0l0 243.52756l-240.0 0z" fill-rule="evenodd"/><path fill="#d9d9d9" d="m240.0 71.49606l240.0 0l0 5.6377945l-240.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m239.99977 86.77428l239.99998 0l0 27.338585l-239.99998 0z" fill-rule="evenodd"/><path fill="#bf9000" d="m317.16772 111.13428l-2.265625 0l0 -8.703125l-2.6875 0.828125l0 -1.828125l4.703125 -1.6875l0.25 0l0 11.390625zm8.1796875 -3.96875l-4.40625 0l0 -1.8125l4.40625 0l0 1.8125zm7.84375 -7.53125l0 1.859375l-0.21875 0q-1.53125 0.03125 -2.46875 0.8125q-0.9375 0.765625 -1.125 2.140625q0.90625 -0.921875 2.296875 -0.921875q1.484375 0 2.359375 1.0625q0.875 1.0625 0.875 2.796875q0 1.109375 -0.484375 2.015625q-0.484375 0.890625 -1.359375 1.390625q-0.875 0.5 -1.984375 0.5q-1.796875 0 -2.90625 -1.25q-1.109375 -1.25 -1.109375 -3.34375l0 -0.8125q0 -1.84375 0.703125 -3.265625q0.703125 -1.421875 2.0 -2.1875q1.3125 -0.78125 3.046875 -0.796875l0.375 0zm-2.203125 5.703125q-0.546875 0 -1.0 0.28125q-0.4375 0.28125 -0.65625 0.75l0 0.6875q0 1.140625 0.4375 1.78125q0.453125 0.625 1.265625 0.625q0.71875 0 1.171875 -0.5625q0.453125 -0.578125 0.453125 -1.5q0 -0.921875 -0.453125 -1.484375q-0.453125 -0.578125 -1.21875 -0.578125zm12.9140625 1.09375q0 2.359375 -0.984375 3.609375q-0.96875 1.25 -2.859375 1.25q-1.859375 0 -2.84375 -1.21875q-0.984375 -1.234375 -1.0 -3.53125l0 -2.09375q0 -2.375 0.984375 -3.609375q0.984375 -1.234375 2.84375 -1.234375q1.859375 0 2.84375 1.21875q0.984375 1.21875 1.015625 3.515625l0 2.09375zm-2.265625 -2.296875q0 -1.421875 -0.390625 -2.0625q-0.375 -0.640625 -1.203125 -0.640625q-0.796875 0 -1.171875 0.609375q-0.375 0.609375 -0.40625 1.921875l0 2.765625q0 1.390625 0.375 2.0625q0.390625 0.671875 1.21875 0.671875q0.828125 0 1.1875 -0.640625q0.375 -0.65625 0.390625 -1.984375l0 -2.703125zm12.4453125 4.65625q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.5390625 5.109375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm4.46875 -2.640625q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm11.6875 1.78125q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m262.7087 150.70604l194.58267 0l0 83.74803l-194.58267 0z" fill-rule="evenodd"/><path fill="#434343" d="m281.66183 171.26917q-0.140625 1.84375 -1.359375 2.90625q-1.21875 1.046875 -3.21875 1.046875q-2.1875 0 -3.453125 -1.46875q-1.25 -1.484375 -1.25 -4.046875l0 -0.703125q0 -1.640625 0.578125 -2.890625q0.578125 -1.25 1.65625 -1.90625q1.078125 -0.671875 2.5 -0.671875q1.96875 0 3.171875 1.0625q1.203125 1.046875 1.390625 2.953125l-2.34375 0q-0.09375 -1.109375 -0.625 -1.59375q-0.515625 -0.5 -1.59375 -0.5q-1.171875 0 -1.765625 0.84375q-0.578125 0.828125 -0.59375 2.59375l0 0.859375q0 1.84375 0.5625 2.703125q0.5625 0.84375 1.765625 0.84375q1.078125 0 1.609375 -0.484375q0.546875 -0.5 0.625 -1.546875l2.34375 0zm6.28125 3.796875q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.03125 -5.859375q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.84375 -2.21875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm11.3828125 6.78125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#434343" d="m277.16183 191.72229q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm7.59375 10.53125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.921875 1.578125l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm5.7578125 0.15625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm5.6015625 9.640625l-1.171875 -0.625l0.28125 -0.5q0.515625 -0.953125 0.53125 -1.90625l0 -1.75l1.90625 0l0 1.5625q-0.015625 0.875 -0.453125 1.75q-0.421875 0.890625 -1.09375 1.46875zm14.921875 -7.015625q0 2.03125 -0.875 3.171875q-0.859375 1.140625 -2.40625 1.140625q-1.375 0 -2.203125 -1.0625l-0.09375 0.90625l-2.03125 0l0 -12.0l2.25 0l0 4.296875q0.78125 -0.90625 2.0625 -0.90625q1.546875 0 2.421875 1.140625q0.875 1.125 0.875 3.1875l0 0.125zm-2.25 -0.15625q0 -1.28125 -0.40625 -1.875q-0.40625 -0.59375 -1.21875 -0.59375q-1.078125 0 -1.484375 0.890625l0 3.328125q0.421875 0.890625 1.5 0.890625q1.09375 0 1.4375 -1.078125q0.171875 -0.515625 0.171875 -1.5625zm8.7109375 3.453125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm6.59375 -9.671875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm11.75 9.671875q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.984375 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm10.125 -0.765625q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm8.0390625 -1.625l-4.40625 0l0 -1.8125l4.40625 0l0 1.8125zm4.1875 3.96875l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm10.3359375 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.109375 6.21875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0z" fill-rule="nonzero"/><path fill="#434343" d="m273.19308 213.06604l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm10.1875 -0.859375q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm6.265625 0.859375l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm2.4140625 0l0 -6.796875l-1.265625 0l0 -1.65625l1.265625 0l0 -0.390625q0.015625 -1.59375 0.96875 -2.453125q0.96875 -0.875 2.734375 -0.875q1.046875 0 2.5625 0.46875l-0.328125 1.859375q-0.765625 -0.21875 -1.1875 -0.28125q-0.421875 -0.078125 -0.90625 -0.078125q-1.578125 0 -1.578125 1.40625l0 0.34375l1.65625 0l0 1.65625l-1.65625 0l0 6.796875l-2.265625 0zm7.3125 0l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm4.25 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm13.4609375 -4.15625q0 2.03125 -0.875 3.171875q-0.859375 1.140625 -2.40625 1.140625q-1.375 0 -2.203125 -1.0625l-0.09375 0.90625l-2.03125 0l0 -12.0l2.25 0l0 4.296875q0.78125 -0.90625 2.0625 -0.90625q1.546875 0 2.421875 1.140625q0.875 1.125 0.875 3.1875l0 0.125zm-2.25 -0.15625q0 -1.28125 -0.40625 -1.875q-0.40625 -0.59375 -1.21875 -0.59375q-1.078125 0 -1.484375 0.890625l0 3.328125q0.421875 0.890625 1.5 0.890625q1.09375 0 1.4375 -1.078125q0.171875 -0.515625 0.171875 -1.5625zm8.3984375 -2.03125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm0.4453125 2.03125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm14.484375 1.0625l1.109375 -5.375l2.1875 0l-2.15625 8.453125l-1.890625 0l-1.609375 -5.328125l-1.59375 5.328125l-1.890625 0l-2.15625 -8.453125l2.1875 0l1.09375 5.375l1.546875 -5.375l1.640625 0l1.53125 5.375zm8.9921875 0.734375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.7734375 0.4375q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm9.8203125 0q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.46875q0 -1.984375 0.890625 -3.140625q0.890625 -1.15625 2.4375 -1.15625q1.359375 0 2.15625 1.03125l0.15625 -0.875l1.984375 0l0 11.703125l-2.265625 0l0 -3.984375q-0.78125 0.890625 -2.046875 0.890625q-1.515625 0 -2.421875 -1.171875q-0.890625 -1.171875 -0.890625 -3.296875zm2.265625 0.171875q0 1.203125 0.421875 1.84375q0.421875 0.625 1.203125 0.625q1.03125 0 1.46875 -0.828125l0 -3.484375q-0.421875 -0.796875 -1.453125 -0.796875q-0.78125 0 -1.21875 0.640625q-0.421875 0.625 -0.421875 2.0zm12.1953125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm7.78125 1.015625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.8125 9.421875q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#434343" d="m281.97433 251.06604l-2.34375 0l-4.5625 -7.484375l0 7.484375l-2.34375 0l0 -11.375l2.34375 0l4.578125 7.5l0 -7.5l2.328125 0l0 11.375zm5.796875 0.15625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm7.7265625 -3.75l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm10.046875 7.453125l1.109375 -5.375l2.1875 0l-2.15625 8.453125l-1.890625 0l-1.609375 -5.328125l-1.59375 5.328125l-1.890625 0l-2.15625 -8.453125l2.1875 0l1.09375 5.375l1.546875 -5.375l1.640625 0l1.53125 5.375zm4.0546875 -1.234375q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm11.890625 -2.203125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.1484375 2.953125l-0.8125 0.8125l0 2.578125l-2.25 0l0 -12.0l2.25 0l0 6.640625l0.4375 -0.5625l2.171875 -2.53125l2.703125 0l-3.046875 3.515625l3.3125 4.9375l-2.59375 0l-2.171875 -3.390625zm14.21875 -2.953125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm14.0703125 5.921875q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625z" fill-rule="nonzero"/><path fill="#434343" d="m275.28683 259.5348l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.109375 6.21875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm15.875 -2.203125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.078125 4.015625l1.578125 -5.6875l2.359375 0l-2.859375 8.453125l-2.15625 0l-2.84375 -8.453125l2.359375 0l1.5625 5.6875zm9.703125 2.765625q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.921875 1.578125l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.8984375 6.34375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm12.0 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm6.59375 10.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm11.3828125 6.78125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm6.3359375 2.1875l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm13.5703125 -2.078125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm4.90625 3.0q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625z" fill-rule="nonzero"/><path fill="#434343" d="m280.19308 284.9098q0 2.03125 -0.875 3.171875q-0.859375 1.140625 -2.40625 1.140625q-1.375 0 -2.203125 -1.0625l-0.09375 0.90625l-2.03125 0l0 -12.0l2.25 0l0 4.296875q0.78125 -0.90625 2.0625 -0.90625q1.546875 0 2.421875 1.140625q0.875 1.125 0.875 3.1875l0 0.125zm-2.25 -0.15625q0 -1.28125 -0.40625 -1.875q-0.40625 -0.59375 -1.21875 -0.59375q-1.078125 0 -1.484375 0.890625l0 3.328125q0.421875 0.890625 1.5 0.890625q1.09375 0 1.4375 -1.078125q0.171875 -0.515625 0.171875 -1.5625zm8.5390625 4.3125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.890625 -1.71875l-0.8125 0.8125l0 2.578125l-2.25 0l0 -12.0l2.25 0l0 6.640625l0.4375 -0.5625l2.171875 -2.53125l2.703125 0l-3.046875 3.515625l3.3125 4.9375l-2.59375 0l-2.171875 -3.390625zm5.0 -0.90625q0 -1.9375 0.921875 -3.125q0.921875 -1.1875 2.5 -1.1875q1.390625 0 2.15625 0.953125l0.09375 -0.796875l2.046875 0l0 8.171875q0 1.109375 -0.5 1.921875q-0.5 0.828125 -1.421875 1.25q-0.90625 0.4375 -2.140625 0.4375q-0.921875 0 -1.8125 -0.375q-0.875 -0.359375 -1.328125 -0.953125l1.0 -1.375q0.84375 0.953125 2.046875 0.953125q0.890625 0 1.390625 -0.484375q0.5 -0.484375 0.5 -1.375l0 -0.453125q-0.78125 0.890625 -2.046875 0.890625q-1.53125 0 -2.46875 -1.1875q-0.9375 -1.203125 -0.9375 -3.171875l0 -0.09375zm2.25 0.171875q0 1.140625 0.453125 1.796875q0.46875 0.65625 1.28125 0.65625q1.03125 0 1.46875 -0.78125l0 -3.546875q-0.453125 -0.78125 -1.453125 -0.78125q-0.8125 0 -1.28125 0.671875q-0.46875 0.65625 -0.46875 1.984375zm11.9609375 -2.21875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm0.4453125 2.03125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm12.203125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm5.96875 -7.59375l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm7.21875 3.015625q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m480.0 71.49606l0 297.88977" fill-rule="evenodd"/><path stroke="#83e3d9" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="1.0,3.0" d="m480.0 71.49606l0 297.88977" fill-rule="evenodd"/><path fill="#1b786e" d="m0 126.96588l240.0 0l0 243.52756l-240.0 0z" fill-rule="evenodd"/><path fill="#1b786e" d="m0 71.49606l240.0 0l0 5.6377945l-240.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m-1.28084E-4 86.77428l240.0 0l0 27.338585l-240.0 0z" fill-rule="evenodd"/><path fill="#bf9000" d="m83.92956 106.43115q0 2.359375 -0.984375 3.609375q-0.96875 1.25 -2.859375 1.25q-1.859375 0 -2.84375 -1.21875q-0.984375 -1.234375 -1.0 -3.53125l0 -2.09375q0 -2.375 0.984375 -3.609375q0.984375 -1.234375 2.84375 -1.234375q1.859375 0 2.84375 1.21875q0.984375 1.21875 1.015625 3.515625l0 2.09375zm-2.265625 -2.296875q0 -1.421875 -0.390625 -2.0625q-0.375 -0.640625 -1.203125 -0.640625q-0.796875 0 -1.171875 0.609375q-0.375 0.609375 -0.40625 1.921875l0 2.765625q0 1.390625 0.375 2.0625q0.390625 0.671875 1.21875 0.671875q0.828125 0 1.1875 -0.640625q0.375 -0.65625 0.390625 -1.984375l0 -2.703125zm8.2734375 3.03125l-4.40625 0l0 -1.8125l4.40625 0l0 1.8125zm7.203125 3.96875l-2.265625 0l0 -8.703125l-2.6875 0.828125l0 -1.828125l4.703125 -1.6875l0.25 0l0 11.390625zm12.3515625 -2.34375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.5390625 5.109375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.1093826 0q0 0.859375 -0.46875 1.578125q-0.45313263 0.703125 -1.2656326 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.9531326 0.890625 0.9687576 2.390625l-2.1093826 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm4.4687576 -2.640625q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm11.6875 1.78125q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m22.70871 150.70604l194.58267 0l0 83.74803l-194.58267 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m41.661835 171.26917q-0.140625 1.84375 -1.359375 2.90625q-1.21875 1.046875 -3.21875 1.046875q-2.1875 0 -3.453125 -1.46875q-1.25 -1.484375 -1.25 -4.046875l0 -0.703125q0 -1.640625 0.578125 -2.890625q0.578125 -1.25 1.65625 -1.90625q1.078125 -0.671875 2.5 -0.671875q1.96875 0 3.171875 1.0625q1.203125 1.046875 1.390625 2.953125l-2.34375 0q-0.09375 -1.109375 -0.625 -1.59375q-0.515625 -0.5 -1.59375 -0.5q-1.171875 0 -1.765625 0.84375q-0.578125 0.828125 -0.59375 2.59375l0 0.859375q0 1.84375 0.5625 2.703125q0.5625 0.84375 1.765625 0.84375q1.078125 0 1.609375 -0.484375q0.546875 -0.5 0.625 -1.546875l2.34375 0zm6.28125 3.796875q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.03125 -5.859375q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.84375 -2.21875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm11.3828125 6.78125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625z" fill-rule="nonzero"/><path fill="#ffffff" d="m33.193085 194.06604l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm9.875 -6.34375q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm5.8515625 -5.1875q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm7.328125 10.390625l-1.171875 -0.625l0.28125 -0.5q0.515625 -0.953125 0.53125 -1.90625l0 -1.75l1.90625 0l0 1.5625q-0.015625 0.875 -0.453125 1.75q-0.421875 0.890625 -1.09375 1.46875zm12.203125 -2.859375q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.625 -6.875l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.5234375 4.15625q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm16.15625 3.265625q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.984375 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm10.125 -0.765625q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm8.0390625 -1.625l-4.40625 0l0 -1.8125l4.40625 0l0 1.8125zm4.1875 3.96875l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm8.8359375 8.296875q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm10.3359375 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.109375 6.21875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0z" fill-rule="nonzero"/><path fill="#ffffff" d="m33.193085 213.06604l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm10.1875 -0.859375q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm6.265625 0.859375l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm2.4140625 0l0 -6.796875l-1.265625 0l0 -1.65625l1.265625 0l0 -0.390625q0.015625 -1.59375 0.96875 -2.453125q0.96875 -0.875 2.734375 -0.875q1.046875 0 2.5625 0.46875l-0.328125 1.859375q-0.765625 -0.21875 -1.1875 -0.28125q-0.421875 -0.078125 -0.90625 -0.078125q-1.578125 0 -1.578125 1.40625l0 0.34375l1.65625 0l0 1.65625l-1.65625 0l0 6.796875l-2.265625 0zm7.3125 0l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm4.25 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm13.4609375 -4.15625q0 2.03125 -0.875 3.171875q-0.859375 1.140625 -2.40625 1.140625q-1.375 0 -2.203125 -1.0625l-0.09375 0.90625l-2.03125 0l0 -12.0l2.25 0l0 4.296875q0.78125 -0.90625 2.0625 -0.90625q1.546875 0 2.421875 1.140625q0.875 1.125 0.875 3.1875l0 0.125zm-2.25 -0.15625q0 -1.28125 -0.40625 -1.875q-0.40625 -0.59375 -1.21875 -0.59375q-1.078125 0 -1.484375 0.890625l0 3.328125q0.421875 0.890625 1.5 0.890625q1.09375 0 1.4375 -1.078125q0.171875 -0.515625 0.171875 -1.5625zm8.3984375 -2.03125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm0.4453125 2.03125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm14.484375 1.0625l1.109375 -5.375l2.1875 0l-2.15625 8.453125l-1.890625 0l-1.609375 -5.328125l-1.59375 5.328125l-1.890625 0l-2.15625 -8.453125l2.1875 0l1.09375 5.375l1.546875 -5.375l1.640625 0l1.53125 5.375zm8.9921875 0.734375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.7734375 0.4375q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm9.8203125 0q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.46875q0 -1.984375 0.890625 -3.140625q0.890625 -1.15625 2.4375 -1.15625q1.359375 0 2.15625 1.03125l0.15625 -0.875l1.984375 0l0 11.703125l-2.265625 0l0 -3.984375q-0.78125 0.890625 -2.046875 0.890625q-1.515625 0 -2.421875 -1.171875q-0.890625 -1.171875 -0.890625 -3.296875zm2.265625 0.171875q0 1.203125 0.421875 1.84375q0.421875 0.625 1.203125 0.625q1.03125 0 1.46875 -0.828125l0 -3.484375q-0.421875 -0.796875 -1.453125 -0.796875q-0.78125 0 -1.21875 0.640625q-0.421875 0.625 -0.421875 2.0zm12.1953125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm7.78125 1.015625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.8125 9.421875q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#ffffff" d="m41.974335 251.06604l-2.34375 0l-4.5625 -7.484375l0 7.484375l-2.34375 0l0 -11.375l2.34375 0l4.578125 7.5l0 -7.5l2.328125 0l0 11.375zm1.546875 -4.3125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm15.875 -2.203125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.078125 4.015625l1.578125 -5.6875l2.359375 0l-2.859375 8.453125l-2.15625 0l-2.84375 -8.453125l2.359375 0l1.5625 5.6875zm9.703125 2.765625q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm7.921875 1.578125l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm4.2421875 0l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.8984375 6.34375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm12.0 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm5.078125 10.53125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.8984375 6.328125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm6.9921875 7.34375q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m240.0 71.49606l0 297.88977" fill-rule="evenodd"/><path stroke="#83e3d9" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="1.0,3.0" d="m240.0 71.49606l0 297.88977" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m0 0l720.0 0l0 71.49606l-720.0 0z" fill-rule="evenodd"/><path fill="#bf9000" d="m156.04297 39.264282l-4.109375 0l-0.78125 2.34375l-2.484375 0l4.234375 -11.375l2.171875 0l4.25 11.375l-2.484375 0l-0.796875 -2.34375zm-3.46875 -1.90625l2.84375 0l-1.4375 -4.25l-1.40625 4.25zm7.34375 -0.046875q0 -1.9375 0.921875 -3.125q0.921875 -1.1875 2.5 -1.1875q1.390625 0 2.15625 0.953125l0.09375 -0.796875l2.046875 0l0 8.171875q0 1.109375 -0.5 1.921875q-0.5 0.828125 -1.421875 1.25q-0.90625 0.4375 -2.140625 0.4375q-0.921875 0 -1.8125 -0.375q-0.875 -0.359375 -1.328125 -0.953125l1.0 -1.375q0.84375 0.953125 2.046875 0.953125q0.890625 0 1.390625 -0.484375q0.5 -0.484375 0.5 -1.375l0 -0.453125q-0.78125 0.890625 -2.046875 0.890625q-1.53125 0 -2.46875 -1.1875q-0.9375 -1.203125 -0.9375 -3.171875l0 -0.09375zm2.25 0.171875q0 1.140625 0.453125 1.796875q0.46875 0.65625 1.28125 0.65625q1.03125 0 1.46875 -0.78125l0 -3.546875q-0.453125 -0.78125 -1.453125 -0.78125q-0.8125 0 -1.28125 0.671875q-0.46875 0.65625 -0.46875 1.984375zm11.1015625 4.28125q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.6484375 2.46875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm7.75 4.140625l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm16.71875 -4.15625q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm8.4140625 -2.03125q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.078125 4.015625l1.578125 -5.6875l2.359375 0l-2.859375 8.453125l-2.15625 0l-2.84375 -8.453125l2.359375 0l1.5625 5.6875zm7.3046875 2.765625l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.8984375 6.328125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm12.203125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm8.46875 -1.484375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.0234375 2.34375l-2.265625 0l0 -12.0l2.265625 0l0 12.0zm5.0234375 -3.203125l1.5625 -5.25l2.421875 0l-3.40625 9.765625l-0.1875 0.453125q-0.75 1.65625 -2.5 1.65625q-0.484375 0 -1.0 -0.15625l0 -1.703125l0.34375 0q0.640625 0 0.953125 -0.203125q0.328125 -0.1875 0.5 -0.640625l0.265625 -0.6875l-2.953125 -8.484375l2.421875 0l1.578125 5.25zm12.375 1.53125q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm9.71875 1.671875q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm9.0625 -0.09375q0.625 0 1.015625 -0.34375q0.390625 -0.34375 0.40625 -0.90625l2.109375 0q0 0.859375 -0.46875 1.578125q-0.453125 0.703125 -1.265625 1.109375q-0.796875 0.390625 -1.765625 0.390625q-1.8125 0 -2.859375 -1.15625q-1.046875 -1.15625 -1.046875 -3.1875l0 -0.140625q0 -1.953125 1.03125 -3.109375q1.046875 -1.171875 2.859375 -1.171875q1.59375 0 2.546875 0.90625q0.953125 0.890625 0.96875 2.390625l-2.109375 0q-0.015625 -0.65625 -0.40625 -1.0625q-0.390625 -0.40625 -1.03125 -0.40625q-0.796875 0 -1.203125 0.578125q-0.390625 0.5625 -0.390625 1.859375l0 0.234375q0 1.296875 0.390625 1.875q0.40625 0.5625 1.21875 0.5625zm7.03125 -5.859375q0.890625 -1.078125 2.25 -1.078125q2.75 0 2.796875 3.1875l0 5.421875l-2.265625 0l0 -5.359375q0 -0.71875 -0.3125 -1.0625q-0.3125 -0.359375 -1.03125 -0.359375q-1.0 0 -1.4375 0.765625l0 6.015625l-2.265625 0l0 -12.0l2.265625 0l0 4.46875zm10.640625 7.6875q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.484375q0 -1.96875 0.890625 -3.140625q0.890625 -1.171875 2.421875 -1.171875q1.234375 0 2.046875 0.921875l0 -4.3125l2.265625 0l0 12.0l-2.046875 0l-0.109375 -0.90625q-0.84375 1.0625 -2.171875 1.0625q-1.484375 0 -2.390625 -1.171875q-0.90625 -1.1875 -0.90625 -3.28125zm2.265625 0.171875q0 1.1875 0.40625 1.828125q0.421875 0.625 1.203125 0.625q1.046875 0 1.484375 -0.890625l0 -3.328125q-0.421875 -0.890625 -1.46875 -0.890625q-1.625 0 -1.625 2.65625zm15.84375 -2.21875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm11.2578125 -1.8125q0 1.953125 -0.890625 3.140625q-0.890625 1.171875 -2.390625 1.171875q-1.28125 0 -2.078125 -0.890625l0 3.984375l-2.25 0l0 -11.703125l2.09375 0l0.078125 0.828125q0.8125 -0.984375 2.140625 -0.984375q1.5625 0 2.421875 1.15625q0.875 1.15625 0.875 3.1875l0 0.109375zm-2.265625 -0.15625q0 -1.1875 -0.421875 -1.828125q-0.40625 -0.640625 -1.203125 -0.640625q-1.0625 0 -1.46875 0.8125l0 3.46875q0.421875 0.828125 1.484375 0.828125q1.609375 0 1.609375 -2.640625zm3.3046875 0q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm11.4609375 6.109375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm7.5390625 2.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm13.8984375 6.78125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm9.390625 0l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm5.078125 10.53125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm6.3671875 2.1875l0.078125 0.9375q0.890625 -1.09375 2.421875 -1.09375q1.640625 0 2.25 1.28125q0.890625 -1.28125 2.53125 -1.28125q1.375 0 2.046875 0.796875q0.671875 0.796875 0.671875 2.40625l0 5.40625l-2.265625 0l0 -5.390625q0 -0.71875 -0.28125 -1.046875q-0.28125 -0.34375 -0.984375 -0.34375q-1.015625 0 -1.40625 0.96875l0 5.8125l-2.25 0l0 -5.390625q0 -0.734375 -0.296875 -1.0625q-0.28125 -0.328125 -0.984375 -0.328125q-0.953125 0 -1.390625 0.796875l0 5.984375l-2.25 0l0 -8.453125l2.109375 0zm15.6328125 8.609375q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.6484375 2.46875q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm7.75 4.140625l0 -6.796875l-1.25 0l0 -1.65625l1.25 0l0 -0.71875q0 -1.421875 0.8125 -2.203125q0.828125 -0.796875 2.296875 -0.796875q0.46875 0 1.140625 0.15625l-0.015625 1.75q-0.28125 -0.0625 -0.6875 -0.0625q-1.28125 0 -1.28125 1.1875l0 0.6875l1.6875 0l0 1.65625l-1.6875 0l0 6.796875l-2.265625 0zm11.1875 -8.453125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0zm10.7734375 8.609375q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm8.2421875 0.84375l1.421875 -2.515625l2.40625 0l-2.40625 4.140625l2.515625 4.3125l-2.421875 0l-1.515625 -2.65625l-1.5 2.65625l-2.421875 0l2.5 -4.3125l-2.390625 -4.140625l2.421875 0l1.390625 2.515625zm7.625 -4.59375l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm11.4375 4.1875q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.828125 6.5q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm4.6640625 2.46875q0 -1.984375 0.890625 -3.140625q0.890625 -1.15625 2.4375 -1.15625q1.359375 0 2.15625 1.03125l0.15625 -0.875l1.984375 0l0 11.703125l-2.265625 0l0 -3.984375q-0.78125 0.890625 -2.046875 0.890625q-1.515625 0 -2.421875 -1.171875q-0.890625 -1.171875 -0.890625 -3.296875zm2.265625 0.171875q0 1.203125 0.421875 1.84375q0.421875 0.625 1.203125 0.625q1.03125 0 1.46875 -0.828125l0 -3.484375q-0.421875 -0.796875 -1.453125 -0.796875q-0.78125 0 -1.21875 0.640625q-0.421875 0.625 -0.421875 2.0zm12.1953125 3.28125q-0.84375 1.015625 -2.3125 1.015625q-1.359375 0 -2.078125 -0.78125q-0.71875 -0.78125 -0.734375 -2.296875l0 -5.53125l2.265625 0l0 5.453125q0 1.328125 1.203125 1.328125q1.140625 0 1.578125 -0.796875l0 -5.984375l2.265625 0l0 8.453125l-2.125 0l-0.0625 -0.859375zm7.78125 1.015625q-1.859375 0 -3.03125 -1.140625q-1.171875 -1.140625 -1.171875 -3.046875l0 -0.21875q0 -1.265625 0.484375 -2.265625q0.5 -1.015625 1.40625 -1.546875q0.90625 -0.546875 2.0625 -0.546875q1.734375 0 2.71875 1.09375q1.0 1.09375 1.0 3.09375l0 0.921875l-5.375 0q0.109375 0.828125 0.65625 1.328125q0.546875 0.5 1.390625 0.5q1.3125 0 2.046875 -0.9375l1.109375 1.234375q-0.515625 0.71875 -1.390625 1.125q-0.859375 0.40625 -1.90625 0.40625zm-0.265625 -6.9375q-0.671875 0 -1.09375 0.453125q-0.40625 0.453125 -0.53125 1.296875l3.140625 0l0 -0.1875q-0.015625 -0.75 -0.40625 -1.15625q-0.390625 -0.40625 -1.109375 -0.40625zm9.6015625 4.4375q0 -0.40625 -0.421875 -0.640625q-0.40625 -0.25 -1.3125 -0.4375q-3.015625 -0.625 -3.015625 -2.5625q0 -1.125 0.9375 -1.875q0.9375 -0.75 2.4375 -0.75q1.609375 0 2.578125 0.765625q0.96875 0.75 0.96875 1.953125l-2.265625 0q0 -0.484375 -0.3125 -0.796875q-0.3125 -0.3125 -0.96875 -0.3125q-0.578125 0 -0.890625 0.265625q-0.3125 0.25 -0.3125 0.640625q0 0.375 0.359375 0.609375q0.359375 0.234375 1.203125 0.40625q0.84375 0.15625 1.421875 0.375q1.78125 0.65625 1.78125 2.265625q0 1.15625 -1.0 1.875q-0.984375 0.71875 -2.546875 0.71875q-1.0625 0 -1.890625 -0.375q-0.828125 -0.390625 -1.296875 -1.046875q-0.46875 -0.65625 -0.46875 -1.421875l2.140625 0q0.03125 0.59375 0.4375 0.921875q0.421875 0.3125 1.125 0.3125q0.640625 0 0.96875 -0.234375q0.34375 -0.25 0.34375 -0.65625zm6.3515625 -8.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm2.8125 9.421875q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875zm0 -6.0q0 -0.546875 0.359375 -0.875q0.375 -0.34375 0.921875 -0.34375q0.546875 0 0.90625 0.34375q0.375 0.328125 0.375 0.875q0 0.53125 -0.359375 0.875q-0.359375 0.328125 -0.921875 0.328125q-0.5625 0 -0.921875 -0.328125q-0.359375 -0.34375 -0.359375 -0.875z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/state-of-css-2021/index.md b/src/site/content/en/blog/state-of-css-2021/index.md
new file mode 100644
index 00000000000..35ddc75385f
--- /dev/null
+++ b/src/site/content/en/blog/state-of-css-2021/index.md
@@ -0,0 +1,58 @@
+---
+layout: post
+title: State of CSS 2021
+subhead:
+    "A look at some of the results from the State of CSS survey."
+authors:
+  - foolip
+  - rachelandrew
+  - una
+hero: "image/kheDArv5csY6rvQUJDbWRscckLr1/wq71mnWZKXuruohdemDU.png"
+alt: "State of CSS."
+date: 2021-12-17
+tags:
+  - blog
+  - css
+---
+
+The [State of CSS 2021](https://2021.stateofcss.com/en-US/) survey ran for the third year in a row, and reached over 8,000 developers worldwide. Let's  look at some of the results and how they map to plans browsers have for adding CSS features in 2022.
+
+# Feature usage and awareness
+
+For some features, there's a clear trend in usage and awareness year-over-year. [CSS grid](https://2021.stateofcss.com/en-US/features/layout/#grid) is an example of this.
+
+{% Img src="image/i1D3fea4SShlOWR9GvCYL83Xw822/JCCwRm9rKUZQikjZhiXj.png", alt="Awareness of CSS Grid in State of CSS over time. The usage has grown from 55% to 83% between 2019 and 2021.", width="800", height="360" %}
+
+This matches the trend for CSS Grid in the [2021 Web Almanac](https://almanac.httparchive.org/en/2021/css#flexbox-and-grid-adoption) and in Chrome's [usage metrics](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693). 
+If you haven't used CSS Grid, now is a great time to [learn it](/learn/css/grid/).
+
+As more developers use grid, [awareness of subgrid](https://2021.stateofcss.com/en-US/features/layout/#subgrid) is also growing. Subgrid is already available in Firefox and will land in Chrome as part of the work by the Microsoft Team on [GridNG](https://blogs.windows.com/msedgedev/2021/08/10/compat2021-css-grid-gridng/).
+
+Other features with strong growth in usage and awareness are 
+[`aspect-ratio`](https://2021.stateofcss.com/en-US/features/layout/#aspect_ratio), [scroll snap](https://2021.stateofcss.com/en-US/features/interactions/#scroll_snap), and [custom properties](https://2021.stateofcss.com/en-US/features/other-features/#variables).
+
+# Browser compatibility
+
+Browser compatibility is a common pain point for web developers and, to learn more about what CSS features cause the most issues, the survey asked, "Are there any CSS features you have difficulties using because of differences between browsers?"
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/rjslQmdTEZr8lNz0EbHC.png", alt="Survey results for features with differences between browsers. The top three responses are grid, flexbox gap, and subgrid.", width="800", height="909" %} 
+
+Survey results like these help guide prioritization for browser vendors. Many of the features are part of the [Compat 2021 effort](/compat2021-holiday-update/) based on the [MDN Browser Compatibility Report 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html), and others like subgrid are now being [proposed](https://github.com/web-platform-tests/interop-2022/issues/1) as focus areas for Interop 2022.
+
+# What's missing in CSS?
+
+The survey also asked, "Which feature would you most like to be able to use in CSS today?"
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/cZesmseagvBYouHVaRJO.png", alt="Survey results for the question what's missing in CSS. The top three responses are container queries, parent selector, and browser support.", width="800", height="617" %}
+
+Container Queries was the overall "winner", matching the [2020 results](https://2020.stateofcss.com/en-US/opinions/#currently_missing_from_css). Container queries enable [component-based responsive](/new-responsive/) design by allowing elements to query their parent selector for style changes. This is a much more local, specified scope than is currently possible with media queries. 
+
+Chrome is currently working on an experimental implementation, and funding the work of [Miriam Suzanne](https://twitter.com/TerribleMia/), as she develops the [specification](https://drafts.csswg.org/css-contain-3/) in the CSS Working Group. You can try it out by going to `about:flags`, searching for, and enabling, the **Container Queries** flag in Canary, or by using the [container query polyfill](https://www.npmjs.com/package/container-query-polyfill). You can learn more about container queries, as well as see some demos that use them in the latest series of [Designing in the Browser](https://www.youtube.com/watch?v=gCNMyYr7F6w&list=PLNYkxOF6rcIDI0QtJvW6vKonTxn6azCsD&index=14) or trying them yourself [here](https://codepen.io/web-dot-dev/pen/LYzxgxP).
+
+{% YouTube "gCNMyYr7F6w" %}
+
+# Learn more
+
+Please see the [full report](https://2021.stateofcss.com/en-US/) to learn more, see recommended resources, or dig into the data yourself.
+
+Thanks to [Sacha Greif](https://sachagreif.com/) for running the survey, and to the over 8,000 web developers who generously took the time to answer it.
diff --git a/src/site/content/en/blog/state-of-css-2022/index.md b/src/site/content/en/blog/state-of-css-2022/index.md
new file mode 100644
index 00000000000..2f598035768
--- /dev/null
+++ b/src/site/content/en/blog/state-of-css-2022/index.md
@@ -0,0 +1,1991 @@
+---
+layout: post
+title: State of CSS 2022
+subhead: Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.
+authors:
+  - adamargyle
+description: Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.
+date: 2022-05-11
+updated: 2022-05-12
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/iOfuipzyniP6aec4cOss.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uT454OnumDCJbV0PWmvu.png
+alt: Colorful lettering using a Colr Font saying State of CSS 2022
+tags:
+  - blog
+  - css
+  - html
+---
+
+The year 2022 is set to be one of CSS's greatest years, in both features and
+cooperative browser feature releases, with a collaborative goal to implement 14
+features!
+
+{% Aside %}
+  Watch the talk [The State of CSS](https://www.youtube.com/watch?v=Xy9ZXRRgpLk) from Google I/O '22:
+  {% YouTube "Xy9ZXRRgpLk" %}
+{% endAside %}
+
+## Overview
+
+This post is the article form of [the talk](https://www.youtube.com/watch?v=Xy9ZXRRgpLk) given at Google IO 2022. It's not
+meant to be an in-depth guide on each feature, rather an introduction and brief
+overview to pique your interest, providing breadth instead of depth. If your
+interest is piqued, check the end of a section for resource links to more information.
+
+### Table of contents
+
+Use the list below to jump to topics of interest:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><b>Fresh in 2022</b></th>
+        <th><b>2022 and beyond</b></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="#browser-compatibility">2022 Browser compatibility</a>
+        </td>
+        <td>
+          <a href="#scoping-styles-is-really-hard">@scope</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#cascade-layers">@layer</a>
+        </td>
+        <td>
+          <a href="#nesting-selectors-is-so-nice">@nest</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#subgrid">subgrid</a>
+        </td>
+        <td>
+          <a href="#css-cant-help-users-reduce-data">@media (prefers-reduced-data)</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#container-queries">@container</a>
+        </td>
+        <td>
+          <a href="#no-media-query-variables">@custom-media</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#hwb">hwb()</a>
+        </td>
+        <td>
+          <a href="#was-in-min-width-or-max-width">Media query ranges</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#color-spaces">lch, oklch, lab, oklab, display-p3, etc</a>
+        </td>
+        <td>
+          <a href="#loosely-typed-custom-properties">@property</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#color-mix">color-mix()</a>
+        </td>
+        <td>
+          <a href="#scroll-start">scroll-start</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#color-contrast">color-contrast()</a>
+        </td>
+        <td>
+          <a href="#snap-target">:snap-target</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#relative-color-syntax">Relative color syntax</a>
+        </td>
+        <td>
+          <a href="#snapchanging">snapChanging() and snapChanged()</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#gradient-color-spaces">Gradient color spaces</a>
+        </td>
+        <td>
+          <a href="#cycling-between-known-states">toggle()</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#accent-color">accent-color</a>
+        </td>
+        <td>
+          <a href="#anchoring-an-element-to-another">anchor()</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#inert">inert</a>
+        </td>
+        <td>
+          <a href="#customizing-select-elements">&#60;selectmenu&#62;</a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#colrv1-fonts">Color fonts v1</a>
+        </td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#viewport-units">Viewport unit variants</a>
+        </td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#has">:has()</a>
+        </td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Browser compatibility
+
+A primary reason so many CSS features are set to cooperatively release is due to
+the efforts of [Interop 2022](/interop-2022/). Before studying
+the Interop efforts, it's important to look at [Compat
+2021](/compat2021/)’s efforts.
+
+### Compat 2021
+
+The goals for 2021, driven by developer feedback via surveys, were to stabilize
+current features, improve the test suite and increase passing scores of browsers
+for five features:
+
+1. `sticky` positioning
+1. `aspect-ratio` sizing
+1. `flex` layout
+1. `grid` layout
+1. `transform` positioning and animation
+
+Test scores were raised across the board, demonstrating upgraded stability and
+reliability. Big congratulations to the teams here!
+
+### Interop 2022
+
+This year, browsers met together to discuss the features and priorities they
+intended to work on, uniting their efforts. They planned to deliver the
+following web features for developers:
+
+1. `@layer`
+1. Color spaces and functions
+1. Containment
+1. `<dialog>`
+1. Form compatibility
+1. Scrolling
+1. Subgrid
+1. Typography
+1. Viewport units
+1. Web compat
+
+This is an exciting and ambitious list that I can't wait to see unfold.
+
+## Fresh for 2022
+
+Unsurprisingly, the state of CSS 2022 is dramatically impacted by the Interop
+2022 work.
+
+### Cascade layers
+
+{% BrowserCompat 'css.at-rules.layer' %}
+
+Before `@layer`, the discovered order of loaded stylesheets was very important,
+as styles loaded last can overwrite previously loaded styles. This led to
+meticulously managed entry stylesheets, where developers needed to load less
+important styles first and more important styles later. Entire methodologies
+exist to assist developers in managing this importance, such as
+[ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4).
+
+With `@layer`, the entry file can pre-define layers, and their order, ahead of
+time. Then, as styles load, are loaded or defined, they can be placed within a
+layer, allowing a preservation of style override importance but without the
+meticulously managed loading orchestration.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/MQJ5WhdqY78qTwIU2Bt6.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+The video shows how the defined cascade layers allow for a more liberated and
+freestyle authoring and loading process, while still maintaining the cascade as
+needed.
+
+Chrome DevTools is helpful for visualizing which styles are coming from which
+layers:
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/17n44fLAbpo0wd6O6Gae.png",
+  alt="Screenshot of the Styles sidebar of Chrome Devtools, highlighting how styles appear within new Layer groups.",
+  width="771",
+  height="689"
+%}
+
+#### Resources
+
+- [CSS Cascade 5 specification](https://www.w3.org/TR/css-cascade-5/#layering)
+- [Cascade layers explainer](https://css.oddbird.net/layers/explainer/)
+- [Cascade layers on MDN](https://developer.mozilla.org/docs/Web/CSS/@layer)
+- [Una Kravets](https://twitter.com/Una): [Cascade
+  Layers](https://developer.chrome.com/blog/cascade-layers/)
+- [Ahmad Shadeed](https://twitter.com/shadeed9): [Hello, CSS Cascade
+  Layers](https://ishadeed.com/article/cascade-layers/)
+
+### Subgrid
+
+{% BrowserCompat 'css.properties.grid-template-rows.subgrid' %}
+
+Before `subgrid`, a grid inside of another grid couldn't align itself to its
+parent cells or grid lines. Each grid layout was unique. Many designers place a
+single grid over their whole design and constantly align items within it, which
+couldn't be done in CSS.
+
+After `subgrid`, a child of a grid can adopt its parents’ columns or rows as its
+own, and align itself or children to them!
+
+In the following demo, the body element creates a classic grid of three columns:
+the middle column is called `main`, and the left and right columns [name their
+lines](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained)
+`fullbleed`. Then, each element in the body, `<nav>` and `<main>`, adopts the
+named lines from body by setting `grid-template-columns: subgrid`.
+
+```css
+​​body {
+  display: grid;
+  grid-template-columns:
+    [fullbleed-start]
+    auto [main-start] min(90%, 60ch) [main-end] auto
+    [fullbleed-end]
+  ;
+}
+
+body > * {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+```
+
+Lastly, children of `<nav>` or `<main>` can align or size themselves using the
+`fullbleed` and `main` columns and lines.
+
+```css
+.main-content {
+  grid-column: main;
+}
+
+.fullbleed {
+  grid-column: fullbleed;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'JjMQzVV',
+ tab: 'result'
+} %}
+
+Devtools can help you see the lines and subgrids (Firefox only at the moment).
+In the following image, the parent grid and subgrids have been overlaid. It now
+resembles how designers were thinking about the layout.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/9V3fShGvncWBFIkfetY3.png",
+  alt="Screenshot of a subgrid demo, using the Chrome Devtools grid overlay tooling to show the lines defined by CSS.",
+  width="800",
+  height="765"
+%}
+
+In the elements panel of devtools you can see which elements are grids and
+subgrids, which is very helpful for debugging or validating layout.
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/2kDFaCapNPGWL2a8XCwI.png",
+    alt="Screenshot of the Chrome Devtools Elements panel labelling which elements have grid or subgrid layouts.",
+    width="800",
+    height="509"
+  %}
+  <figcaption>
+    Screenshot from Firefox Devtools
+  </figcaption>
+</figure>
+
+#### Resources
+
+- [Subgrid specification](https://www.w3.org/TR/css-grid-2/#subgrids)
+- [Subgrid on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [Bramus](https://twitter.com/bramus): [Practical CSS Subgrid Video
+  Tutorials](https://www.bram.us/2021/11/04/practical-css-subgrid-video-tutorials/)
+
+### Container queries
+
+{% BrowserCompat 'css.at-rules.container' %}
+
+Before `@container`, elements of a webpage could only respond to the size of the
+whole viewport. This is great for macro layouts, but for micro layouts, where
+their outer container isn't the whole viewport, it's impossible for the layout
+to adjust accordingly.
+
+After `@container`, elements can respond to a parent container size or style!
+The only caveat is the containers must declare themselves as possible query
+targets, which is a small requirement for a large benefit.
+
+```css
+/* establish a container */
+.day {
+  container-type: inline-size;
+  container-name: calendar-day;
+}
+```
+
+These styles are what make the Mon, Tues, Wed, Thurs, and Fri columns in the
+following video able to be queried by the event elements.
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/XihhgjHu2BuxrxctmPvd.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="adjusted-aspect-ratio"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/una/pen/RwodQZw">Demo</a>
+    by <a href="https://twitter.com/Una">Una Kravets</a>
+  </figcaption>
+</figure>
+
+Here is the CSS for querying the `calendar-day` container for its size, then
+adjusting a layout and font sizes:
+
+```css
+@container calendar-day (max-width: 200px) {
+  .date {
+    display: block;
+  }
+
+  .date-num {
+    font-size: 2.5rem;
+    display: block;
+  }
+}
+```
+
+Here's another example: one book component adapts itself to the space available
+in the column that it's dragged to:
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/tkapAWihYLshmp4w7Dcp.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true",
+    class="adjusted-aspect-ratio"
+  %}
+  <figcaption>
+    <a href="https://codepen.io/mxbck/full/XWMrMOp">Demo</a>
+    by <a href="https://twitter.com/mxbck">Max Böck</a>
+  </figcaption>
+</figure>
+
+Una is correct in assessing the situation as [the new
+responsive](/new-responsive/#responsive-to-the-container). There
+are many exciting and meaningful design decisions to make when using
+`@container`.
+
+#### Resources
+
+- [Container Queries specification](https://www.w3.org/TR/css-contain-3/#container-queries)
+- [Container Queries explainer](https://css.oddbird.net/rwd/query/explainer/)
+- [Container Queries on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries)
+- [The new responsive on web.dev](/new-responsive/#responsive-to-the-container)
+- [Calendar demo by Una](https://codepen.io/una/pen/RwodQZw)
+- [Awesome container queries collection](https://github.com/sturobson/Awesome-Container-Queries)
+- [How we built Designcember on web.dev](/how-we-built-designcember/)
+- [Ahmad Shadeed](https://twitter.com/shadeed9): [Say Hello To CSS
+  Container
+  Queries](https://ishadeed.com/article/say-hello-to-css-container-queries/)
+
+### `accent-color`
+
+{% BrowserCompat 'css.properties.accent-color' %}
+
+Before `accent-color`, when you wanted a form with brand matching colors, you
+could end up with complex libraries or CSS solutions that became hard to manage
+over time. While they gave you all the options, and hopefully included
+accessibility, the choice to use the built-in components or adopt your own
+becomes tedious to continue to choose.
+
+After `accent-color`, one line of CSS brings a brand color to the built-in
+components. In addition to a tint, the browser intelligently chooses proper
+contrasting colors for ancillary parts of the component and adapts to system
+color schemes (light or dark).
+
+```css
+/* tint everything */
+:root {
+  accent-color: hotpink;
+}
+
+/* tint one element */
+progress {
+  accent-color: indigo;
+}
+```
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/s0P0uAcTQiyQpwKGwLiA.png",
+  alt="Light and dark accented HTML elements side by side for comparison.",
+  width="800",
+  height="348"
+%}
+
+To learn more about `accent-color`, [check out my post on
+web.dev](/accent-color/) where I explore many more aspects of
+this useful CSS property.
+
+#### Resources
+
+- [accent-color specification](https://www.w3.org/TR/css-ui-4/#widget-accent)
+- [accent-color on MDN](https://developer.mozilla.org/docs/Web/CSS/accent-color)
+- [accent-color on web.dev](/accent-color/)
+- [Bramus](https://twitter.com/bramus): [Tint User-Interface Controls with CSS
+  accent-color](https://www.bram.us/2021/08/23/tint-user-interface-controls-with-css-accent-color/)
+
+### Color level 4 and 5
+
+The web has been dominated by sRGB for the past decades, but in an expanding
+digital world of high-definition displays and mobile devices pre-equipped with
+OLED or QLED screens, sRGB is not enough. Furthermore, dynamic pages that adapt
+to user preferences are expected, and color management has been a growing
+concern for designers, design systems, and code maintainers.
+
+Not in 2022 though—CSS has a number of new color functions and spaces:
+- Colors that reach into the HD color capabilities of displays.
+- Color spaces that match an intent, such as perceptual uniformity.
+- Color spaces for gradients that drastically change the interpolation outcomes.
+- Color functions to help you mix and contrast, and choose which space you do
+  the work in.
+
+Before all these color features, design systems needed to precalculate proper
+contrasting colors, and ensure appropriately vibrant palettes, all while
+preprocessors or JavaScript did the heavy lifting.
+
+After all these color features, the browser and CSS can do all the work,
+dynamically and just in time. Instead of sending many KBs of CSS and JavaScript
+to users to enable theming and data visualization colors, CSS can do the
+orchestrating and calculations. CSS is also better equipped to check for support
+before usage or handle fallbacks gracefully.
+
+```css
+@media (dynamic-range: high) {
+  .neon-pink {
+    --neon-glow: color(display-p3 1 0 1);
+  }
+}
+
+@supports (color: lab(0% 0 0)) {
+  .neon-pink {
+    --neon-glow: lab(150% 160 0);
+  }
+}
+```
+
+#### `hwb()`
+
+{% BrowserCompat 'css.types.color.hwb' %}
+
+HWB stands for hue, whiteness, and blackness. It presents itself as a
+human-friendly way of articulating color, as it's just a hue and an amount of
+white or black to lighten or darken. Artists who mix colors with white or black
+may find themselves appreciating this color syntax addition.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'KKZdeep',
+ height: 500,
+ tab: 'css,result'
+} %}
+
+Using this color function results in colors from the sRGB color space, the same
+as HSL and RGB. In terms of newness for 2022, this doesn’t give you new colors,
+but it may make some tasks easier for fans of the syntax and mental model.
+
+##### Resources
+
+- [HWB specification](https://www.w3.org/TR/css-color-4/#the-hwb-notation)
+- [HWB on MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb())
+- [Stefan Judis](https://twitter.com/stefanjudis/): [hwb() – a color notation for
+  humans?](https://www.stefanjudis.com/blog/hwb-a-color-notation-for-humans/)
+
+#### Color spaces
+
+The way colors are represented is done with a color space. Each color space
+offers various features and trade-offs for working with color. Some may pack all
+the bright colors together; some may line them up first based on their
+lightness.
+
+2022 CSS is set to offer 10 new color spaces, each with unique features to
+assist designers and developers in displaying, picking, and mixing colors.
+Previously, sRGB was the only option for working with color, but now CSS unlocks
+new potential and a new default color space, LCH.
+
+#### `color-mix()`
+
+{% BrowserCompat 'css.types.color.color-mix' %}
+
+Before `color-mix()`, developers and designers needed preprocessors like
+[Sass](https://sass-lang.com/) to mix the colors before the browser saw them.
+Most color-mixing functions also didn't provide the option to specify which
+color space to do the mixing in, sometimes resulting in confusing results.
+
+After `color-mix()`, developers and designers can mix colors in the browser,
+alongside all their other styles, without running build processes or including
+JavaScript. Additionally, they can specify which color space to do the mixing
+in, or use the default mixing color space of LCH.
+
+Often, a brand color is used as a base and variants are created from it, such as
+lighter or darker colors for hover styles. Here's what that looks like with
+`color-mix()`:
+
+```css
+.color-mix-example {
+  --brand: #0af;
+
+  --darker: color-mix(var(--brand) 25%, black);
+  --lighter: color-mix(var(--brand) 25%, white);
+}
+```
+
+and if you wanted to mix those colors in a different color space, like srgb,
+change it:
+
+```css
+.color-mix-example {
+  --brand: #0af;
+
+  --darker: color-mix(in srgb, var(--brand) 25%, black);
+  --lighter: color-mix(in srgb, var(--brand) 25%, white);
+}
+```
+
+Here follows a theming demo using `color-mix()`. Try changing the brand color
+and watch the theme update:
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'yLpYqVb',
+ height: 500,
+ tab: 'css,result'
+} %}
+
+Enjoy mixing colors in various color spaces in your stylesheets in 2022!
+
+##### Resources
+
+- [color-mix() specification](https://www.w3.org/TR/css-color-5/#color-mix)
+- [color-mix() on MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix())
+- [Theming demo](https://codepen.io/argyleink/pen/WNoWadG)
+- [Another theming demo](https://codepen.io/argyleink/pen/YzZQYMq)
+- [Fabio Giolito](https://twitter.com/fabiogiolito): [Create a color theme with
+  these upcoming CSS
+  features](https://dev.to/fabiogiolito/create-a-color-theme-with-these-upcoming-css-features-4o83)
+
+#### `color-contrast()`
+
+{% BrowserCompat 'css.types.color.color-contrast' %}
+
+Before `color-contrast()`, stylesheet authors needed to know accessible colors
+ahead of time. Often a palette would show black or white text on a color swatch,
+to indicate to a user of the color system which text color would be needed to
+properly contrast with that swatch.
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DZbWoSszQOrV0ts5oSu7.png",
+    alt="Screenshot of 3 Material palettes, showing 14 colors and their appropriate white or black contrast colors for text.",
+    width="760",
+    height="632"
+  %}
+  <figcaption>
+    Example from <a href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors">2014 Material Design color palettes</a>
+  </figcaption>
+</figure>
+
+After `color-contrast()`, stylesheet authors can offload the task entirely to
+the browser. Not only can you employ the browser to automatically pick a black
+or white color, you can give it a list of design system appropriate colors and
+have it pick the first to pass your desired contrast ratio.
+
+Here's a screenshot of an [HWB color palette set
+demo](https://codepen.io/web-dot-dev/pen/qBpzwZW) where the text colors are
+automatically chosen by the browser based on the swatch color:
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/LvVQghfnQr2aEXmLUnn4.png",
+    alt="Screenshot of the HWB demo where each palette has a different pairing of light or dark text, as determined by the browser.",
+    width="800",
+    height="394"
+  %}
+  <figcaption>
+    Try the <a href="https://codepen.io/web-dot-dev/pen/qBpzwZW">demo</a>
+  </figcaption>
+</figure>
+
+The basics of the syntax look like this, where gray is passed to the function
+and the browser determines if black or white have the most contrast:
+
+```css
+color: color-contrast(gray);
+```
+
+The function can also be customized with a list of colors, from which it will
+pick the highest contrasting color from the selection:
+
+```css
+color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
+```
+
+Lastly, in case it's preferable not to pick the highest contrasting color from
+the list, a target contrast ratio can be provided, and the first color to pass
+it is chosen:
+
+```css
+color: color-contrast(
+  var(--bg-blue-1)
+  vs
+  var(--text-lightest), var(--text-light), var(--text-subdued)
+  to AA /* 4.5 could also be passed */
+);
+```
+
+This function can be used for more than just text color, though I estimate that
+will be its primary use case. Think about how much easier it will be to deliver
+accessible and legible interfaces once the choosing of proper contrasting colors
+is built into the CSS language itself.
+
+##### Resources
+
+- [color-contrast()
+  specification](https://www.w3.org/TR/css-color-5/#colorcontrast)
+- [color-contrast() on
+  MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/color-contrast())
+- [Demo](https://codepen.io/web-dot-dev/pen/qBpzwZW)
+
+#### Relative color syntax
+
+{% BrowserCompat 'css.types.color.color' %}
+
+Before relative color syntax, to compute on color and make adjustments, the
+color channels needed to be individually placed into custom properties. This
+limitation also made HSL the primary color function for manipulating colors
+because the hue, saturation, or lightness could all be adjusted in a
+straightforward way with `calc()`.
+
+After relative color syntax, any color in any space can be deconstructed,
+modified, and returned as a color, all in one line of CSS. No more limitations
+to HSL—manipulations can be done in any color space desired, and many less
+custom properties need to be created to facilitate it.
+
+In the following syntax example, a base hex is provided and two new colors are
+created relative to it. The first color `--absolute-change` creates a new color
+in LCH from the base color, then proceeds to replace the base color’s lightness
+with `75%`, maintaining the chroma (`c`) and hue (`h`). The second color
+`--relative-change` creates a new color in LCH from the base color, but this
+time reduces the chroma (`c`) by 20%.
+
+```css
+.relative-color-syntax {
+  --color: #0af;
+  --absolute-change: lch(from var(--color) 75% c h);
+  --relative-change: lch(from var(--color) l calc(c-20%) h);
+}
+```
+
+It's akin to mixing colors, but it's more similar to alterations than it is
+mixing. You get to cast a color from another color, getting access to the three
+channel values as named by the color function used, with an opportunity to
+adjust those channels. All in all, this is a very cool and powerful syntax for
+color.
+
+In the following demo I've used relative color syntax to create lighter and
+darker variants of a base color, and used `color-contrast()` to ensure the
+labels have proper contrast:
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lwCQAQJ3qc80Ap96Bn1J.png",
+    alt="Screenshot with 3 columns, each column is either darker or lighter than the center column.",
+    width="800",
+    height="449"
+  %}
+  <figcaption>
+    Try the <a href="https://codepen.io/web-dot-dev/pen/dyJBLWG">demo</a>
+  </figcaption>
+</figure>
+
+This function can also be used for color palette generation. Here is a demo
+where entire palettes are generated off a provided base color. This one set of
+CSS powers all the various palettes, each palette simply provides a different
+base. As a bonus, since I've used LCH, look at how perceptually even the
+palettes are—no hot or dead spots to be seen, thanks to this color space.
+
+```css
+:root {
+  --_color-base: #339af0;
+
+  --color-0:  lch(from var(--_color-base) 98% 10 h);
+  --color-1:  lch(from var(--_color-base) 93% 20 h);
+  --color-2:  lch(from var(--_color-base) 85% 40 h);
+  --color-3:  lch(from var(--_color-base) 75% 46 h);
+  --color-4:  lch(from var(--_color-base) 66% 51 h);
+  --color-5:  lch(from var(--_color-base) 61% 52 h);
+  --color-6:  lch(from var(--_color-base) 55% 57 h);
+  --color-7:  lch(from var(--_color-base) 49% 58 h);
+  --color-8:  lch(from var(--_color-base) 43% 55 h);
+  --color-9:  lch(from var(--_color-base) 39% 52 h);
+  --color-10: lch(from var(--_color-base) 32% 48 h);
+  --color-11: lch(from var(--_color-base) 25% 45 h);
+  --color-12: lch(from var(--_color-base) 17% 40 h);
+  --color-13: lch(from var(--_color-base) 10% 30 h);
+  --color-14: lch(from var(--_color-base) 5% 20 h);
+  --color-15: lch(from var(--_color-base) 1% 5 h);
+}
+```
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/crmXDxirpYLGCl1jutSW.png",
+    alt="Screenshot of 15 palettes all generated dynamically by CSS.",
+    width="800",
+    height="433"
+  %}
+  <figcaption>
+    Try the <a href="https://codepen.io/web-dot-dev/pen/dyJBLWG">demo</a>
+  </figcaption>
+</figure>
+
+Hopefully by now you can see how color spaces and different color functions can
+all be used for different purposes, based on their strengths and weaknesses.
+
+##### Resources
+
+- [Relative color syntax
+  specification](https://www.w3.org/TR/css-color-5/#relative-color-function)
+- [Building color palettes with relative color
+  syntax](https://codepen.io/web-dot-dev/pen/GRybLvm)
+- [Building color variants with relative color
+  syntax](https://codepen.io/web-dot-dev/pen/dyJBLWG)
+
+#### Gradient color spaces
+
+Before gradient color spaces, sRGB was the default color space used. sRGB is
+generally reliable, but does have some weaknesses like the [gray dead
+zone](https://css-tricks.com/the-gray-dead-zone-of-gradients/).
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/9mFuKPk1iIt47F9Z08An.png",
+  alt="4 gradients in a grid, all from cyan to deeppink. LCH and LAB have more consistent vibrancy, where sRGB goes a bit desaturated in the middle.",
+  width="800",
+  height="430"
+%}
+
+After gradient color spaces, tell the browser which color space to use for the
+color interpolation. This gives developers and designers the ability to choose
+the gradient they prefer. The default color space also changes to LCH instead of
+sRGB.
+
+The syntax addition goes after the gradient direction, uses the new `in` syntax,
+and is optional:
+
+```css
+background-image: linear-gradient(
+  to right in hsl,
+  black, white
+);
+
+background-image: linear-gradient(
+  to right in lch,
+  black, white
+);
+```
+
+Here's a basic and essential gradient from black to white. Look at the range of
+results in each color space. Some reach dark black earlier than others, some
+fade to white too late.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/LJXw2oaCcDOY8XIlgNa5.png",
+  alt="11 color spaces shown comparing black to white.",
+  width="800",
+  height="1157"
+%}
+
+In this next example, black is transitioned to blue because it's a known problem
+space for gradients. Most color spaces creep into purple during color
+interpolation or, as I like to think of it, as colors travel inside their color
+space from point A to point B. Since the gradient will take a straight line from
+point A to point B, the shape of the color space drastically changes the stops
+that the path takes along the way.
+
+{% Aside %}
+`okLCH` and `okLAB` are specialized color spaces that account for various drifts,
+like this one into purple, making them especially accurate for gradients.
+{% endAside %}
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lIQwuIMIe58R76IOhnRS.png",
+  alt="11 color spaces shown comparing blue to black.",
+  width="800",
+  height="1160"
+%}
+
+For more deep explorations, examples and comments, read [this Twitter
+thread](https://twitter.com/argyleink/status/1490376117064065025?s=20&t=r1JAaqTwoeEitkVmUhTw0Q).
+
+##### Resources
+
+- [Gradient interpolation
+  specification](https://drafts.csswg.org/css-images-4/#linear-gradients)
+- [Demo comparing gradients in spaces](https://codepen.io/argyleink/pen/OJObWEW)
+- [Observable notebook comparing
+  gradients](https://observablehq.com/@argyleink/colorjs-notebook-fade-to-white)
+
+### `inert`
+
+{% BrowserCompat 'api.HTMLElement.inert' %}
+
+Before `inert`, it was good practice to guide the user's focus to areas of the
+page or app that needed immediate attention. This guided focus strategy became
+known as focus trapping because developers would place focus into an interactive
+space, listen for focus change events and, if the focus left the interactive
+space, then it was forced back in. Users on keyboards or screen readers are
+guided back to the interactive space to ensure the task is complete before
+moving on.
+
+After `inert`, no trapping is required because you can freeze or guard entire
+sections of the page or app. Clicks and focus change attempts are just simply
+not available while those parts of a document are inert. One could also think of
+this like guards instead of a trap, where `inert` is not interested in making
+you stay somewhere, rather making other places unavailable.
+
+A good example of this is the JavaScript `alert()` function:
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/gjWn8LZ22HdGX8pGZgwv.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Website is shown as interactive, then an alert() is called, and the page is no longer active.
+  </figcaption>
+</figure>
+
+Notice in the preceding video how the page was mouse and keyboard accessible
+until an `alert()` was called. Once the alert dialog popup was shown, the rest
+of the page was frozen, or `inert`. Users’ focus is placed inside the alert
+dialog and has nowhere else to go. Once the user interacts and completes the
+alert function request, the page is interactive again. `inert` empowers
+developers to achieve this same guided focus experience with ease.
+
+Here's a small code sample to show how it works:
+
+```css/7
+<body>
+  <div class="modal">
+    <h2>Modal Title</h2>
+    <p>...<p>
+    <button>Save</button>
+    <button>Discard</button>
+  </div>
+  <main inert>
+    <!-- cannot be keyboard focused or clicked -->
+  </main>
+</body>
+```
+
+A dialog is a great example, but `inert` is also helpful for things such as the
+slide-out side menu user experience. When a user slides out the side menu, it's
+not OK to let the mouse or keyboard interact with the page behind it; that's a
+bit tricky for users. Instead, when the side menu is showing, make the page
+inert, and now users must close or navigate within that side menu, and won't
+ever find themselves lost somewhere else in the page with an open menu.
+
+#### Resources
+
+- [Inert
+  specification](https://html.spec.whatwg.org/multipage/interaction.html#inert)
+- [Inert on MDN](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert)
+- [Chrome Developers: Introducing
+  inert](https://developer.chrome.com/blog/inert/)
+
+### COLRv1 Fonts
+
+Before COLRv1 fonts, the web had
+[OT-SVG](https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html) fonts,
+also an open format for fonts with gradients and built-in colors and effects.
+These could grow very large though, and while they allowed editing the text,
+there wasn't much scope for customization.
+
+After [COLRv1](https://developer.chrome.com/blog/colrv1-fonts/) fonts, the web
+has smaller footprint, vector-scalable, repositionable, gradient-featuring, and
+blend-mode powered fonts that accept parameters to customize the font per use
+case or to match a brand.
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/vnSKm0j2gzr0uFfticVT.png",
+    alt="Comparison visualization and bar chart, showing how COLRv1 fonts are sharper and smaller.",
+    width="800",
+    height="240"
+  %}
+  <figcaption>
+    Image sourced from <a href="https://developer.chrome.com/blog/colrv1-fonts/">https://developer.chrome.com/blog/colrv1-fonts/</a>
+  </figcaption>
+</figure>
+
+Here's an example from the Chrome Developer blog post about emojis. Maybe you've
+noticed that if you scale up the font size on an emoji, it doesn't stay sharp.
+It's an image and not vector art. Often in applications when an emoji is used,
+it's swapped out for a higher quality asset. With COLRv1 fonts, the emojis are
+vector and beautiful:
+
+{% Glitch {
+  id: 'colrv1-emoji-grid'
+} %}
+
+Icon fonts could do some amazing things with this format, offering custom
+duo-tone color palettes, and more. Loading a COLRv1 font is just like any other
+font file:
+
+```css
+@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
+```
+
+Customizing the COLRv1 font is done with `@font-palette-values`, a special CSS
+at-rule for grouping and naming a set of customization options into a bundle for
+later reference. Notice how you specify a custom name just like a custom
+property, starting with `--`:
+
+```css/2-6
+@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
+
+@font-palette-values --colorized {
+  font-family: "Bungee Spice";
+  base-palette: 0;
+  override-colors: 0 hotpink, 1 cyan, 2 white;
+}
+```
+
+With `--colorized` as an alias for the customizations, the last step is to apply
+the palette to an element that is using the color font family:
+
+```css/8-11
+@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
+
+@font-palette-values --colorized {
+  font-family: "Bungee Spice";
+  base-palette: 0;
+  override-colors: 0 hotpink, 1 cyan, 2 white;
+}
+
+.spicy {
+  font-family: "Bungee Spice";
+  font-palette: --colorized;
+}
+```
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/nccC2TpW80F5xXfLF6hq.png",
+    alt="Screenshot of the Bungee Spice font with the word DUNE.",
+    width="564",
+    height="169"
+  %}
+  <figcaption>
+    Bungee Spice font shown with custom colors, source from <a href="https://developer.chrome.com/blog/colrv1-fonts/">https://developer.chrome.com/blog/colrv1-fonts/</a>
+  </figcaption>
+</figure>
+
+With more and more variable fonts and color fonts becoming available, web
+typography is on a very magnificent path towards rich customization and creative
+expression.
+
+#### Resources
+
+- [Colrv1 specification on
+  Github](https://github.com/googlefonts/colr-gradients-spec)
+- [Chrome Developers: Colrv1
+  Fonts](https://developer.chrome.com/blog/colrv1-fonts/)
+- [BlinkOn developer explainer
+  video](https://www.youtube.com/watch?v=BmqYm5Wwz8M)
+
+### Viewport units
+
+{% BrowserCompat 'css.types.length.dvh' %}
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jE6JZPgLnHO8HQWtfgNE.png",
+  alt="Graphic showing how the device screen and the browser window and an iframe, all have different viewports.",
+  width="800",
+  height="501"
+%}
+
+Before the new viewport variants, the web offered physical units to assist in
+fitting viewports. There was one for height, width, smallest size (vmin), and
+largest side (vmax). These worked well for many things, but mobile browsers
+introduced a complexity.
+
+On mobile, when loading a page, the status bar with the url is shown, and this
+bar consumes some of the viewport space. After a few seconds and some
+interactivity, the status bar may slide away to allow a bigger viewport
+experience for the user. But when that bar slides out, the viewport height has
+changed, and any `vh` units would shift and resize as their target size changed.
+In later years, the `vh` unit specifically needed to decide which of the two
+viewport sizes it was going to use, because it was causing jarring visual layout
+issues on mobile devices. It was determined that the `vh` would always represent
+the largest viewport.
+
+```css
+.original-viewport-units {
+  height: 100vh;
+  width: 100vw;
+  --size: 100vmin;
+  --size: 100vmax;
+}
+```
+
+After the new viewport variants, small, large, and dynamic viewport units are
+made available, with the addition of [logical
+equivalents](/learn/css/logical-properties/) to the physical ones. The idea is
+to give developers and designers the ability to choose which unit they want to
+use for their given scenario. Maybe it's ok to have a small jarring layout shift
+when the status bar goes away, so then `dvh` (dynamic viewport height) could be
+used without worry.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KtZ9bXwtzmo7hguwQOWO.png",
+  alt="A graphic with three phones to help illustrate DVH, LVH and SVH. The DVH
+   example phone has two vertical lines, one between the bottom of the search bar
+   and the bottom of the viewport and one between above the search bar (under the
+   system status bar) to the bottom of the viewport; showing how DVH can be either
+   of these two lengths. LVH is shown in the middle with one line between the
+   bottom of the device status bar and the button of the phone viewport. The last is
+   the SVH unit example, showing a line from the bottom of the browser search bar
+   to the bottom of the viewport",
+  width="800",
+  height="664"
+%}
+
+Here's a complete list of all the new viewport unit options made available with
+the new viewport variants:
+
+<div class="switcher">
+{% Compare 'better', 'Height viewport units' %}
+```css
+​​.new-height-viewport-units {
+  height: 100vh;
+  height: 100dvh;
+  height: 100svh;
+  height: 100lvh;
+  block-size: 100vb;
+  block-size: 100dvb;
+  block-size: 100svb;
+  block-size: 100lvb;
+}
+```
+{% endCompare %}
+
+{% Compare 'better', 'Width viewport units' %}
+```css
+.new-width-viewport-units {
+  width: 100vw;
+  width: 100dvw;
+  width: 100svw;
+  width: 100lvw;
+  inline-size: 100vi;
+  inline-size: 100dvi;
+  inline-size: 100svi;
+  inline-size: 100lvi;
+}
+```
+{% endCompare %}
+</div>
+
+<div class="switcher">
+{% Compare 'better', 'Smallest viewport side units' %}
+```css
+.new-min-viewport-units {
+  --size: 100vmin;
+  --size: 100dvmin;
+  --size: 100svmin;
+  --size: 100lvmin;
+}
+```
+{% endCompare %}
+
+{% Compare 'better', 'Largest viewport side units' %}
+```css
+.new-max-viewport-units {
+  --size: 100vmax;
+  --size: 100dvmax;
+  --size: 100svmax;
+  --size: 100lvmax;
+}
+```
+{% endCompare %}
+</div>
+
+Hopefully these will give developers and designers the flexibility needed to
+achieve their viewport responsive designs.
+
+#### Resources
+
+- [Viewport relative units
+  specification](https://drafts.csswg.org/css-values-4/#viewport-relative-lengths)
+- [Bramus](https://twitter.com/bramus): [The Large, Small, and Dynamic
+  Viewports](https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/)
+
+### `:has()`
+
+{% BrowserCompat 'css.selectors.has' %}
+
+Before `:has()`, the
+[subject](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors#:~:text=The%20element%20or%20elements%20which%20are%20selected%20by%20the%20selector%20are%20referred%20to%20as%20the%20subject%20of%20the%20selector.)
+of a [selector](/learn/css/selectors/) was always at the end. For example, the
+subject of this selector is a list item: `ul > li`. Pseudo selectors can alter
+the selector but they don't change the subject: `ul > li:hover` or `ul >
+li:not(.selected)`.
+
+After `:has()`, a subject higher in the element tree can remain the subject
+while providing a query about children: `ul:has(> li)`. It is easy to understand
+how `:has()` got a common name of "parent selector", as the subject of the
+selector is now the parent in this case.
+
+Here's a basic syntax example where the class `.parent` remains the subject but
+is only selected if a child element has the `.child` class:
+
+```css
+.parent:has(.child) {...}
+```
+
+Here's an example where a `<section>` element is the subject, but the selector
+only matches if one of the children has `:focus-visible`:
+
+```css
+section:has(*:focus-visible) {...}
+```
+
+{% Aside %}
+[`:focus-within`](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible)
+already behaves similarly to `section:has(*:focus-visible)` and
+should be used instead.
+{% endAside %}
+
+The `:has()` selector starts to become a fantastic utility once more practical
+use cases become apparent. For example, it's not currently possible to select
+`<a>` tags when they wrap images, making it difficult to teach the anchor tag
+how to change its styles when in that use case. It is possible with `:has()`
+though:
+
+```css
+a:has(> img) {...}
+```
+
+These have all been examples where `:has()` only looks like a parent selector.
+Consider the use case of images inside of `<figure>` elements and adjusting
+styles on the images if the figure has a `<figcaption>`. In the following
+example, figures with figcaptions are selected and then images within that
+context. `:has()` is used and doesn't change the subject, as the subject we're
+targeting is images not figures:
+
+```css
+figure:has(figcaption) img {...}
+```
+
+The combinations are seemingly endless. Combine `:has()` with [quantity
+queries](https://alistapart.com/article/quantity-queries-for-css/) and adjust
+CSS grid layouts based on the number of children. Combine `:has()` with
+[interactive pseudo class
+states](/learn/css/pseudo-classes/#interactive-states) and create
+applications that respond in new creative ways.
+
+Checking for support is made simple with
+[`@supports`](https://developer.mozilla.org/docs/Web/CSS/@supports) and
+its
+[`selector()`](https://developer.mozilla.org/docs/Web/CSS/@supports#function_syntax)
+function, which tests if the browser understands the syntax before using it:
+
+```css
+@supports (selector(:has(works))) {
+  /* safe to use :has() */
+}
+```
+
+#### Resources
+
+- [:has() specification](https://www.w3.org/TR/selectors-4/#relational)
+- [:has() on MDN](https://developer.mozilla.org/docs/Web/CSS/:has)
+- [The CSS `:has()` selector is way more than a "parent
+  selector"](https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-selector/)
+
+## 2022 and beyond
+
+There are still a number of things that will be hard to do after all these
+amazing features land in 2022. The next section takes a look at some of the
+remaining problems and the solutions that are actively being developed to
+resolve them. These solutions are experimental, even though they may be
+specified or available behind flags in browsers.
+
+The upshot from the next sections should be comfort that the problems listed
+have many people from many companies seeking resolution—not that these solutions
+are going to be released in 2023.
+
+### Loosely typed custom properties
+
+{% BrowserCompat 'css.at-rules.property' %}
+
+CSS [custom properties](https://developer.mozilla.org/docs/Web/CSS/--*)
+are amazing. They allow all sorts of things to be stored inside of a named
+variable, which then can be extended, calculated upon, shared, and more. In
+fact, they're so flexible, it would be nice to have some that are less flexible.
+
+Consider a scenario where a `box-shadow` uses custom properties for its values:
+
+```css
+box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
+```
+
+This all works well until any one of the properties is changed into a value that
+CSS doesn't accept there, such as `--x: red`. The entire shadow breaks if any
+one of the nested variables is missing or is set to an invalid value type.
+
+This is where [`@property`](/at-property/) comes in: `--x` can
+become a typed custom property, no longer loose and flexible, but safe with some
+defined boundaries:
+
+```css
+@property --x {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: false;
+}
+```
+
+Now, when the `box-shadow` uses `var(--x)` and later `--x: red` is attempted,
+`red` will be ignored as it's not a `<length>`. This means the shadow continues
+to work, even though an invalid value was given to one of its custom properties.
+Instead of failing, it reverts to its `initial-value` of `0px`.
+
+#### Animation
+
+In addition to type safety, it also opens up many doors for animation. The
+flexibility of CSS syntax makes animating some things impossible, such as
+gradients. `@property` helps here because the typed CSS property can inform the
+browser about a developer's intent inside of otherwise overly complex
+interpolation. It essentially limits the scope of possibility insomuch that a
+browser can animate aspects of a style that it couldn't before.
+
+Consider this demo example, where a radial gradient is used to make a portion of
+an overlay, creating a spotlight focus effect. JavaScript sets the mouse x and y
+when the alt/opt key is pressed, and then changes the focal-size to a smaller
+value such as 25%, creating the spotlight focus circle at the mouse position:
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/xFOY3xaBXBjszS1tCkuq.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Try the <a href="https://codepen.io/web-dot-dev/pen/gOoVWrz">demo</a>
+  </figcaption>
+</figure>
+
+```css
+.focus-effect {
+  --focal-size: 100%;
+  --mouse-x: center;
+  --mouse-y: center;
+
+  mask-image: radial-gradient(
+    circle at var(--mouse-x) var(--mouse-y),
+    transparent 0%,
+    transparent var(--focal-size),
+    black 0%
+  );
+}
+```
+
+Gradients can't be animated though. They are too flexible and too complex for
+the browser to "just derive" how you want them to animate. With `@property`,
+though, one property can be typed and animated in isolation, for which the
+browser can easily understand the intent.
+
+Video games that use this focus effect always animate the circle, from a large
+circle to a pinhole circle. Here's how to use `@property` with our demo so the
+browser animates the gradient mask:
+
+```css/0-4/18
+@property --focal-size {
+  syntax: '<length-percentage>';
+  initial-value: 100%;
+  inherits: false;
+}
+
+.focus-effect {
+  --focal-size: 100%;
+  --mouse-x: center;
+  --mouse-y: center;
+
+  mask-image: radial-gradient(
+    circle at var(--mouse-x) var(--mouse-y),
+    transparent 0%,
+    transparent var(--focal-size),
+    black 0%
+  );
+
+  transition: --focal-size .3s ease;
+}
+```
+
+<figure data-size="full">
+  {% Video
+    src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/SfL7gzXbGW0Ct5Zucbyx.mp4",
+    autoplay="true",
+    loop="true",
+    muted="true"
+  %}
+  <figcaption>
+    Try the <a href="https://codepen.io/web-dot-dev/pen/RwxXVGx">demo</a>
+  </figcaption>
+</figure>
+
+The browser is now able to animate the gradient size because we've reduced the
+surface area of the modification to just one property and typed the value so the
+browser can intelligently interpolate the lengths.
+
+`@property` can do so much more, but these small enablements can go a long way.
+
+#### Resources
+
+- [@property
+  specification](https://www.w3.org/TR/css-properties-values-api-1/#at-property-rule)
+- [@property on MDN](https://developer.mozilla.org/docs/Web/CSS/@property)
+- [@property on web.dev](/at-property/)
+- [Zoom focus demo](https://codepen.io/argyleink/pen/rNwWwor)
+- [CSS Tricks: Exploring @property and its animating
+  powers](https://css-tricks.com/exploring-property-and-its-animating-powers/)
+
+### Was in `min-width` or `max-width`
+
+{% BrowserCompat 'css.at-rules.media.ranges' %}
+
+Before media query ranges, a CSS media query uses `min-width` and `max-width` to
+articulate over and under conditions. It may look like this:
+
+```css
+@media (min-width: 320px) {
+  …
+}
+```
+
+After media query ranges, the same media query could look like this:
+
+```css
+@media (width >= 320px) {
+  …
+}
+```
+
+A CSS media query using both `min-width` and `max-width` may look like this:
+
+```css
+@media (min-width: 320px) and (max-width: 1280px) {
+  …
+}
+```
+
+After media query ranges, the same media query could look like this:
+
+```css
+@media (320px <= width <= 1280px) {
+  …
+}
+```
+
+Depending on your coding background, one of those will look much more legible
+than the other. Thanks to the spec additions, developers will be able to choose
+which they prefer, or even use them interchangeably.
+
+#### Resources
+
+- [Media query range syntax
+  specification](https://www.w3.org/TR/mediaqueries-5/#mq-range-context)
+- [Media query range syntax on
+  MDN](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
+- [Media query range syntax PostCSS
+  plugin](https://github.com/postcss/postcss-media-minmax)
+
+### No media query variables
+
+{% BrowserCompat 'css.at-rules.media.custom' %}
+
+Before `@custom-media`, media queries had to repeat themselves over and over, or
+rely on preprocessors to generate the proper output based on static variables
+during build time.
+
+After `@custom-media`, CSS allows aliasing media queries and the referencing of
+them, just like a custom property.
+
+Naming things is very important: it can align purpose with the syntax, making
+things easier to share and easier to use in teams. Here are a few custom media
+queries that follow me between projects:
+
+```css
+@custom-media --OSdark  (prefers-color-scheme: dark);
+@custom-media --OSlight (prefers-color-scheme: light);
+
+@custom-media --pointer (hover) and (pointer: coarse);
+@custom-media --mouse   (hover) and (pointer: fine);
+
+@custom-media --xxs-and-above (width >= 240px);
+@custom-media --xxs-and-below (width <= 240px);
+```
+
+Now that they're defined, I can use one of them like this:
+
+```css
+@media (--OSdark) {
+  :root {
+    …
+  }
+}
+```
+
+Find a [full list of custom media
+queries](https://open-props.style/#media-queries) I use inside my CSS custom
+property library [Open Props](https://open-props.style).
+
+#### Resources
+
+- [Custom media queries
+  specification](https://www.w3.org/TR/mediaqueries-5/#custom-mq)
+- [Custom media queries PostCSS
+  plugin](https://github.com/postcss/postcss-custom-media)
+
+### Nesting selectors is so nice
+
+{% BrowserCompat 'css.at-rules.nest' %}
+
+Before `@nest`, there was a lot of repetition in stylesheets. It became
+especially unwieldy when selectors were long and each was targeting small
+differences. The convenience of nesting is one of the most common reasons for
+adopting a preprocessor.
+
+After `@nest`, the repetition is gone. Nearly every feature of
+preprocessor-enabled nesting will be made available built into CSS.
+
+```css
+article {
+  color: darkgray;
+}
+
+article > a {
+  color: var(--link-color);
+}
+
+/* with @nest becomes */
+
+article {
+  color: darkgray;
+
+  & > a {
+    color: var(--link-color);
+  }
+}
+```
+
+{% Aside %}
+Use the syntax today with [PostCSS](https://postcss.org/) and the
+[PostCSS
+Nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
+plugin.
+{% endAside %}
+
+What's most important about nesting to me, besides not repeating `article` in
+the nested selector, is the styling context remains within one style block.
+Instead of bouncing from one selector, and its styles, to another selector with
+styles (example 1), the reader can remain within the context of an article and
+see the article owns links inside of it. The relationship and style intent are
+bundled together, so `article` gets to appear to own its own styles.
+
+The ownership could also be thought of as centralization. Instead of looking
+around a stylesheet for relevant styles, they can all be found nested together
+within a context. This works with parent to child relationships, but also with
+child to parent relationships.
+
+Consider a component child that wants to adjust itself when in a different
+parent context, as opposed to the parent owning the style and changing a child:
+
+```css
+/* parent owns this, adjusting children */
+section:focus-within > article {
+  border: 1px solid hotpink;
+}
+
+/* with @nest becomes */
+
+/* article owns this, adjusting itself when inside a section:focus-within */
+article {
+  @nest section:focus-within > & {
+     border: 1px solid hotpink;
+  }
+}
+```
+
+`@nest` helps overall with healthier style organization, centralization, and
+ownership. Components can group and own their own styles, instead of having them
+spread amongst other style blocks. It may seem small in these examples, but it
+can have very large impacts, for both convenience and legibility.
+
+{% Aside 'warning' %}
+Nesting more than four or five levels can become more troublesome
+than repeating selectors. We advise you to not nest so deep, and instead
+begin a new selector blog and nest within it.
+{% endAside %}
+
+#### Resources
+
+- [@nest specification](https://www.w3.org/TR/css-nesting-1/)
+- [@nest PostCSS
+  plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
+- [Bramus](https://twitter.com/bramus): [The future of CSS: Nesting
+  Selectors](https://www.bram.us/2019/03/17/the-future-of-css-nesting-selectors/)
+
+### Scoping styles is really hard
+
+{% BrowserCompat 'css.at-rules.scope' %}
+
+Before `@scope`, many strategies existed because styles in CSS cascade, inherit,
+and are globally scoped by default. These features of CSS are very convenient
+for many things, but for complex sites and applications, with potentially many
+different styles of components, the global space and nature of the cascade can
+make styles feel like they're leaking.
+
+After `@scope`, not only can styles be scoped to only within a context, like a
+class, they can also articulate where the styles end and do not continue to
+cascade or inherit.
+
+In the following example, [BEM](http://getbem.com/naming/) naming convention
+scoping can be reversed into the actual intent. The BEM selector is attempting
+to scope the color of a `header` element to a `.card` container with naming
+conventions. This requires that the header has this classname on it, completing
+the goal. With `@scope`, no naming conventions are required in order to complete
+the same goal without marking up the header element:
+
+```css
+.card__header {
+  color: var(--text);
+}
+
+/* with @scope becomes */
+
+@scope (.card) {
+  header {
+    color: var(--text);
+  }
+}
+```
+
+Here's another example, less component-specific and more about the global scope
+nature of CSS. Dark and light themes have to coexist inside a stylesheet, where
+order matters in determining a winning style. Usually this means dark theme
+styles come after the light theme; this establishes light as the default and
+dark as the optional style. Avoid the ordering and scope battling with `@scope`:
+
+```css
+​​@scope (.light-theme) {
+  a { color: purple; }
+}
+
+@scope (.dark-theme) {
+  a { color: plum; }
+}
+```
+
+To complete the story here, `@scope` also allows the establishing of where the
+style scope ends. This can't be done with any naming convention or preprocessor;
+it's special and only something CSS built-in to the browser can do. In the
+following example, `img` and `.content` styles are exclusively applied when a
+child of a `.media-block` is a sibling or parent of `.content`:
+
+```css
+@scope (.media-block) to (.content) {
+  img {
+    border-radius: 50%;
+  }
+
+  .content {
+    padding: 1em;
+  }
+}
+```
+
+#### Resources
+
+- [@scope specification](https://www.w3.org/TR/css-scoping-1/)
+- [@scope explainer](https://css.oddbird.net/scope/explainer/)
+
+### No CSS way for a masonry layout
+
+Before CSS masonry with grid, JavaScript was the best way to achieve a masonry
+layout, as any of the CSS methods with columns or flexbox would inaccurately
+represent the content order.
+
+After CSS masonry with grid, no JavaScript libraries will be required and the
+content order will be correct.
+
+<figure data-size="full">
+  {% Img
+    src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/xfOiyctwsXa8wnfkuoS2.png",
+    alt="Screenshot of the masonry layout which shows numbers traveling along the top, then going down.",
+    width="800",
+    height="547"
+  %}
+  <figcaption>
+    Image and demo from Smashing Magazine<br>
+    <a href="https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/">https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/</a>
+  </figcaption>
+</figure>
+
+The preceding demo is achieved with the following CSS:
+
+```css/3
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: masonry;
+}
+```
+
+It's comforting to know that this is on the radar as a missing layout strategy,
+plus you can [try it today in
+Firefox](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout).
+
+#### Resources
+
+- [Masonry layout
+  specification](https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithm)
+- [Masonry layout on
+  MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)
+- [Smashing Magazine: Native CSS Masonry Layout with CSS
+  Grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)
+
+### CSS can't help users reduce data
+
+{% BrowserCompat 'css.at-rules.media.prefers-reduced-data' %}
+
+Before the `prefers-reduced-data` media query, JavaScript and a server could
+change their behavior based on a user’s operating system or browser "data saver"
+option, but CSS could not.
+
+After the `prefers-reduced-data` media query, CSS can join the user experience
+enhancement and play its part in saving data.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/3Vwnp23TzTTBjFCan6oG.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+```css
+@media (prefers-reduced-data: reduce) {
+  picture, video {
+    display: none;
+  }
+}
+```
+
+The preceding CSS is used in [this media scroll
+component](https://gui-challenges.web.app/media-scroller/dist/) and the savings
+can be huge. Depending on how large the visiting viewport is, the more savings
+to be had on page load. Saving continues as users interact with the media
+scrollers. The images all have `loading="lazy"` attributes on them and that,
+combined with CSS hiding the element entirely, means a network request for the
+image is never made.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BgbeJDFy5t2i8EfaBW8i.jpeg",
+  alt="Screenshot of a TV show carousel interface with many thumbnails and titles shown.",
+  width="800",
+  height="528"
+%}
+
+For my testing, on a medium sized viewport, 40 requests and 700kb of resources
+were initially loaded. As a user scrolls the media selection, more requests and
+resources are loaded. With CSS and the reduced data media query, 10 requests and
+172kb of resources are loaded. That's half a megabyte of savings and the user
+hasn't even scrolled any of the media, at which point there are no additional
+requests made.
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/BcSDhqSWMsbCnNH4zXbR.jpeg",
+  alt="Screenshot of a TV show carousel interface with no thumbnails and many titles shown.",
+  width="800",
+  height="528"
+%}
+
+There are more advantages to this reduced data experience than just data
+savings. More titles can be seen and there's no distracting cover images to
+steal attention. Many users browse in a data saver mode because they pay per
+megabyte of data—it's really nice to see CSS able to help out here.
+
+#### Resources
+
+- [prefers-reduced-data
+  specification](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-data)
+- [prefers-reduced-data on
+  MDN](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-data)
+- [prefers-reduced-data in a GUI
+  Challenge](https://gui-challenges.web.app/media-scroller/dist/)
+- [Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case
+  Study](https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/#savedata-and-prefers-reduced-data)
+
+### Scroll snap features are too limited
+
+Before these scroll snap proposals, writing your own JavaScript to manage a
+carousel, slider, or gallery could quickly get complex, with all the observers
+and state management. Also, if not careful, the natural scrolling speeds could
+get normalized by script, making user interaction feel a bit unnatural and
+potentially clunky.
+
+#### New APIs
+
+##### `snapChanging()`
+
+As soon as the browser has released a snap child, this event fires. This allows
+UI to reflect the lack of a snap child and the indeterminate snap state of the
+scroller, as it's now being used and will land somewhere new.
+
+```js
+document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
+  console.log('Snap is changing', event.snappedTargetsList);
+});
+```
+
+##### `snapChanged()`
+
+As soon as the browser has snapped to a new child and the scroller is rested,
+this event fires. This lets any UI that depends on the snapped child to update
+and reflect the connection.
+
+```js
+document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
+  console.log('Snap changed', event.snappedTargetsList);
+});
+```
+
+##### `scroll-start`
+
+Scrolling doesn't always begin at the start. Consider swipeable components where
+swiping left or right triggers different events, or a search bar that on page
+load is initially hidden until you scroll to the top. This CSS property lets
+developers specify that a scroller should begin at a specific point.
+
+```css
+:root { --nav-height: 100px }
+
+.snap-scroll-y {
+  scroll-start-y: var(--nav-height);
+}
+```
+
+##### `:snap-target`
+
+This CSS selector will match elements in a scroll snap container that are
+currently snapped by the browser.
+
+```css
+.card {
+  --shadow-distance: 5px;
+  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
+  transition: box-shadow 350ms ease;
+}
+
+.card:snapped {
+  --shadow-distance: 30px;
+}
+```
+
+After these scroll snap proposals, making a slider, carousel, or gallery is much
+easier as the browser now offers conveniences for the task, eliminating
+observers and scroll orchestration code in favor of using built-in APIs.
+
+It's still very early days for these CSS and JS features, but be on the lookout
+for polyfills that can help adoption, and testing, of them soon.
+
+#### Resources
+
+- [Scroll Snap 2 draft
+  specification](https://drafts.csswg.org/css-scroll-snap-2/)
+- [Scroll Snap 2
+  explainers](https://github.com/argyleink/ScrollSnapExplainers/blob/main/css-snap-target/readme.md)
+- [Snap demos](https://snap-gallery.netlify.app/)
+
+### Cycling between known states
+
+Before `toggle()`, only states built into the browser already could be leveraged
+for styling and interaction. The checkbox input, for example, has `:checked`, an
+internally managed browser state for the input that CSS is able to use for
+changing the element visually.
+
+After `toggle()`, custom states can be created on any element for CSS to change
+and use for styling. It allows groups, cycling, directed toggling, and more.
+
+In the following example, the same effect of a list item strikethrough on
+complete is achieved but without any checkbox elements:
+
+```html
+<ul class='ingredients'>
+   <li>1 banana
+   <li>1 cup blueberries
+  ...
+</ul>
+```
+
+And the relevant CSS `toggle()` styles:
+
+```css
+li {
+  toggle-root: check self;
+}
+
+li:toggle(check) {
+  text-decoration: line-through;
+}
+```
+
+If you're familiar with state machines, you may notice how much crossover there
+is with `toggle()`. This feature will let developers build more of their state
+into CSS, hopefully resulting in clearer and more semantic ways of orchestrating
+interaction and state.
+
+#### Resources
+
+- [toggle() draft specification](https://tabatkins.github.io/css-toggle/)
+- [Bramus](https://twitter.com/bramus): [The Future of CSS: CSS
+  Toggles](https://www.bram.us/2022/04/20/the-future-of-css-css-toggles/)
+
+### Customizing select elements
+
+Before `<selectmenu>`, CSS didn't have the ability to customize `<option>`
+elements with rich HTML or change much about the display of a list of options.
+This led developers to load external libraries that recreated much of the
+functionality of a `<select>`, which ended up being a lot of work.
+
+After `<selectmenu>`, developers can provide rich HTML for options elements and
+style them as much as they need, while still meeting accessibility requirements
+and providing semantic HTML.
+
+In the following example, taken from the `<selectmenu>` [explainer
+page](https://open-ui.org/prototypes/selectmenu), a new select menu is created
+with some basic options:
+
+```html
+<selectmenu>
+  <option>Option 1</option>
+  <option>Option 2</option>
+  <option>Option 3</option>
+</selectmenu>
+```
+
+CSS can target and style the element's parts:
+
+```css
+.my-select-menu::part(button) {
+  color: white;
+  background-color: red;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.my-select-menu::part(listbox) {
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid red;
+  border-radius: 5px;
+}
+```
+
+{% Img
+  src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wOUKMguhg268udindKlK.png",
+  alt="A select looking menu with red accent colors.",
+  width="186",
+  height="265"
+%}
+
+You can try the `<selectmenu>` element on Chromium in Canary with the web
+experiments flag enabled. Watch out in 2023 and beyond for customizable select
+menu elements.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/tpPE2zZPCWW6e63mjP1I.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+#### Resources
+
+- [Selectmenu specification](https://open-ui.org/prototypes/selectmenu)
+- [Selectmenu demo](https://microsoftedge.github.io/Demos/selectmenu/)
+
+### Anchoring an element to another
+
+Before `anchor()`, position absolute and relative were position strategies
+provided for developers to have child elements move around within a parent
+element.
+
+After `anchor()`, developers can position elements to other elements, regardless
+of them being a child or not. It also allows developers to specify which edge to
+position against, and other niceties for creating position relationships between
+elements.
+
+The explainer has a few great examples and code samples provided, if you're
+interested in learning more.
+
+#### Resources
+
+- [anchor()
+  explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md)
diff --git a/src/site/content/en/blog/stick-to-compositor-only-properties-and-manage-layer-count/index.md b/src/site/content/en/blog/stick-to-compositor-only-properties-and-manage-layer-count/index.md
new file mode 100644
index 00000000000..ea65104f99d
--- /dev/null
+++ b/src/site/content/en/blog/stick-to-compositor-only-properties-and-manage-layer-count/index.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Stick to Compositor-Only Properties and Manage Layer Count
+subhead: |
+  Compositing is where the painted parts of the page are put together for displaying on screen.
+authors:
+  - paullewis
+date: 2015-03-20
+updated: 2018-08-17
+description: |
+  Compositing is where the painted parts of the page are put together for displaying on screen.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Compositing is where the painted parts of the page are put together for
+displaying on screen.
+
+There are two key factors in this area that affect page performance: the number of compositor layers that need to be managed, and the properties that you use for animations.
+
+### Summary
+
+* Stick to transform and opacity changes for your animations.
+* Promote moving elements with `will-change` or `translateZ`.
+* Avoid overusing promotion rules; layers require memory and management.
+
+## Use transform and opacity changes for animations
+
+The best-performing version of the pixel pipeline avoids both layout and paint, and only requires compositing changes:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4to9zPKpICVNFCPl7qwV.jpg", alt="The pixel pipeline with no layout or paint.", width="800", height="122" %}
+</figure>
+
+In order to achieve this you will need to stick to changing properties that can be handled by the compositor alone. Today there are only two properties for which that is true - `transform`s and `opacity`:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VoLzvR2akAnQfKFVyyM9.jpg", alt="The properties you can animate without triggering layout or paint.", width="800", height="600" %}
+</figure>
+
+The caveat for the use of `transform`s and `opacity` is that the element on which you change these properties should be on _its own compositor layer_. In order to make a layer you must promote the element, which we will cover next.
+
+{% Aside %}
+If you're concerned that you may not be able to limit your animations to just those properties, take a look at the [FLIP principle](https://aerotwist.com/blog/flip-your-animations), which may help you remap animations to changes in transforms and opacity from more expensive properties.
+{% endAside %}
+
+## Promote elements that you plan to animate
+
+As we mentioned in the "[Simplify paint complexity and reduce paint areas](/simplify-paint-complexity-and-reduce-paint-areas/)" section, you should promote elements that you plan to animate (within reason, don't overdo it!) to their own layer:
+
+```css
+.moving-element {
+  will-change: transform;
+}
+```
+
+Or, for older browsers, or those that don't support will-change:
+
+```css
+.moving-element {
+  transform: translateZ(0);
+}
+```
+
+## Manage layers and avoid layer explosions
+
+It's perhaps tempting, then, knowing that layers often help performance, to promote all the elements on your page with something like the following:
+
+```css
+* {
+  will-change: transform;
+  transform: translateZ(0);
+}
+```
+
+Which is a roundabout way of saying that you'd like to promote every single element on the page. The problem here is that every layer you create requires memory and management, and that's not free. In fact, on devices with limited memory the impact on performance can far outweigh any benefit of creating a layer. Every layer's textures needs to be uploaded to the GPU, so there are further constraints in terms of bandwidth between CPU and GPU, and memory available for textures on the GPU.
+
+{% Aside 'warning '%}
+Do not promote elements unnecessarily.
+{% endAside %}
+
+## Use Chrome DevTools to understand the layers in your app
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QNAAH0VJDRjtu9iC6KVE.jpg", alt="The toggle for the paint profiler in Chrome DevTools.", width="278", height="129" %}
+</figure>
+
+To get an understanding of the layers in your application, and why an element has a layer you must enable the Paint profiler in Chrome DevTools' Timeline:
+
+With this switched on you should take a recording. When the recording has finished you will be able to click individual frames, which is found between the frames-per-second bars and the details:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7zZkTVCqwvqYrty8m8Oy.jpg", alt="A frame the developer is interested in profiling.", width="397", height="229" %}
+</figure>
+
+Clicking on this will provide you with a new option in the details: a layer tab.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/f2yHHn8kTJLm6WVn3vnR.jpg", alt="The layer tab button in Chrome DevTools.", width="333", height="260" %}
+</figure>
+
+This option will bring up a new view that allows you to pan, scan and zoom in on all the layers during that frame, along with reasons that each layer was created.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/spj7LxeccWat0sWddxo3.jpg", alt="The layer view in Chrome DevTools.", width="800", height="600" %}
+</figure>
+
+
+Using this view you can track the number of layers you have. If you're spending a lot time in compositing during performance-critical actions like scrolling or transitions (you should aim for around **4-5ms**), you can use the information here to see how many layers you have, why they were created, and from there manage layer counts in your app.
diff --git a/src/site/content/en/blog/storage-for-the-web/hero.jpg b/src/site/content/en/blog/storage-for-the-web/hero.jpg
deleted file mode 100644
index 7387436da72..00000000000
Binary files a/src/site/content/en/blog/storage-for-the-web/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/storage-for-the-web/index.md b/src/site/content/en/blog/storage-for-the-web/index.md
index 6c44edef4ea..1656320cd95 100644
--- a/src/site/content/en/blog/storage-for-the-web/index.md
+++ b/src/site/content/en/blog/storage-for-the-web/index.md
@@ -5,15 +5,16 @@ authors:
   - petelepage
 description: There are many different options for storing data in the browser. Which one is best for your needs?
 date: 2020-04-27
-updated: 2020-05-07
+updated: 2022-03-08
 tags:
   - blog
   - progressive-web-apps
   - storage
-  - indexeddb
-  - cachestorage
-hero: hero.jpg
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
 alt: Stack of shipping containers
+feedback:
+  - api
 ---
 
 Internet connections can be flakey or non-existent on the go, which is why
@@ -68,7 +69,7 @@ reading and writing files to a sandboxed file system. While it is asynchronous,
 it is not recommended because it is
 [only available in Chromium-based browsers][caniuse-fs].
 
-The [Native File System API](/native-file-system/) was designed to make it
+The [File System Access API](/file-system-access/) was designed to make it
 easy for users to read and edit files on their local file system. The user
 must grant permission before a page can read or write to any local file, and
 permissions are not persisted across sessions.
@@ -90,17 +91,32 @@ hundreds of gigabytes or more. Browser implementations vary, but the amount
 of storage available is usually based on the amount of storage available on the
 device.
 
-* Chrome allows the browser to use up to 60% of total disk space. You can use the
-  [StorageManager API](#check) to determine the maximum quota available. Other
-  Chromium-based browsers may allow the browser to use more storage.
+* Chrome allows the browser to use up to 80% of total disk space. An origin can
+  use up to 60% of the total disk space. You can use the [StorageManager
+  API](#check) to determine the maximum quota available. Other Chromium-based
+  browsers may be different.
+  * In incognito mode, Chrome reduces the amount of storage an origin can use
+    to approximately 5% of the total disk space.
+  * If the user has enabled "Clear cookies and site data when you close all
+    windows" in Chrome, the storage quota is significantly reduced to a
+    maximum of approximately 300MB.
+  * See [PR #3896](https://github.com/GoogleChrome/web.dev/pull/3896) for
+    details about Chrome's implementation.
 * Internet Explorer 10 and later can store up to 250MB and will prompt the
   user when more than 10MB has been used.
-* Firefox allows an [origin to use up to 2GB][ff-usage-limits]. You can use
-  the [StorageManager API](#check-available) to determine how much space is
-  still available.
-* Safari (both desktop and mobile) appears to allow up to 1GB. When the limit
+* Firefox allows the browser to use up to 50% of free disk space. An
+  [eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix)
+  group (e.g., `example.com`, `www.example.com` and `foo.bar.example.com`)
+  [may use up to 2GB][ff-usage-limits]. You can use the
+  [StorageManager API](#check-available) to determine how much space is still
+  available.
+* Safari (both desktop and mobile) appears to allow about 1GB. When the limit
   is reached, Safari will prompt the user, increasing the limit in 200MB
   increments. I was unable to find any official documentation on this.
+  * If a PWA is added to the home screen on mobile Safari, it appears to
+    create a new storage container, and nothing is shared between the PWA
+    and mobile Safari. Once the quota has been hit for an installed PWA, there
+    doesn't appear to be any way to request additional storage.
 
 In the past, if a site exceeded a certain threshold of data stored, the
 browser would prompt the user to grant permission to use more data. For
@@ -109,7 +125,8 @@ to allow it to store up to 100MB, then ask again at 50MB increments.
 
 Today, most modern browsers will not prompt the user, and will allow a site
 to use up to its allotted quota. The exception appears to be Safari, which
-prompts at 750MB, asking permission to store up to 1.1GB. If an origin
+prompts when the storage quota is exceeded, requesting permission to increase
+the allocated quota. If an origin
 attempts to use more than its allotted quota, further attempts to write data
 will fail.
 
@@ -150,7 +167,14 @@ of stored cross origin resources.
 During development, you can use your browser's DevTools to inspect the
 different storage types, and easily clear all stored data.
 
-<img class="w-screenshot w-screenshot-filled" alt="Storage test tool." src="storage-test-tool.png">
+A new feature was added in Chrome 88 that lets you override the site's storage
+quota in the Storage Pane. This feature gives you the ability to simulate
+different devices and test the behavior of your apps in low disk availability
+scenarios. Go to **Application** then **Storage**, enable the
+**Simulate custom storage quota** checkbox, and enter any valid number to
+simulate the storage quota.
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="DevTools Storage pane.", width="800", height="567" %}
 
 While working on this article, I wrote a [simple tool][glitch-storage] to
 attempt to quickly use as much storage as possible. It's a quick and easy way
@@ -278,25 +302,24 @@ into Safari to figure out its storage limits.
 The hero image is by Guillaume Bolduc on
 [Unsplash](https://unsplash.com/photos/uBe2mknURG4).
 
-
 [mdn-sessionstorage]: https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage
 [mdn-localstorage]: https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
-[mdn-indexeddb]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
-[mdn-storagemanager]: https://developer.mozilla.org/en-US/docs/Web/API/StorageManager/estimate
-[mdn-fileapi]: https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction
-[mdn-appcache]: https://developer.mozilla.org/en-US/docs/Web/API/Window/applicationCache
-[mdn-cookies]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-[cache-primer]: https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api
-[sw-primer]: https://developers.google.com/web/fundamentals/primers/service-workers
+[mdn-indexeddb]: https://developer.mozilla.org/docs/Web/API/IndexedDB_API
+[mdn-storagemanager]: https://developer.mozilla.org/docs/Web/API/StorageManager/estimate
+[mdn-fileapi]: https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction
+[mdn-appcache]: https://developer.mozilla.org/docs/Web/API/Window/applicationCache
+[mdn-cookies]: https://developer.mozilla.org/docs/Web/HTTP/Cookies
+[cache-primer]: /cache-api-quick-guide/
+[sw-primer]: https://developer.chrome.com/docs/workbox/service-worker-overview/
 [idb-wrapper]: https://www.npmjs.com/package/idb
 [w3c-websql]: https://www.w3.org/TR/webdatabase/
 [caniuse-fs]: https://caniuse.com/#feat=filesystem
 [caniuse-sm]: https://caniuse.com/#feat=mdn-api_storagemanager
-[ff-usage-limits]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits
-[persistent-storage]: https://developers.google.com/web/updates/2016/06/persistent-storage
+[ff-usage-limits]: https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits
+[persistent-storage]: /persistent-storage/
 [storage-abuser]: http://demo.agektmr.com/storage/
 [webkit-itp-blog]: https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/
 [caniuse-websql]: https://caniuse.com/#feat=sql-storage
 [glitch-storage]: https://storage-quota.glitch.me/
-[idb-best-practices]: https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/indexeddb-best-practices
+[idb-best-practices]: /indexeddb-best-practices/
 [chrome-storage-doc]: https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview
diff --git a/src/site/content/en/blog/storage-for-the-web/storage-test-tool.png b/src/site/content/en/blog/storage-for-the-web/storage-test-tool.png
deleted file mode 100644
index ad09de021ad..00000000000
Binary files a/src/site/content/en/blog/storage-for-the-web/storage-test-tool.png and /dev/null differ
diff --git a/src/site/content/en/blog/streaming-screenshare/index.md b/src/site/content/en/blog/streaming-screenshare/index.md
new file mode 100644
index 00000000000..0f339eda43e
--- /dev/null
+++ b/src/site/content/en/blog/streaming-screenshare/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: Screensharing a browser tab in HTML5?
+authors:
+  - ericbidelman
+date: 2012-09-21
+tags:
+  - blog
+---
+
+In the past couple of years, I've helped a few different companies achieve screensharing-like functionality using only browser technologies. From my experience, implementing [VNC](http://en.wikipedia.org/wiki/Virtual_Network_Computing) solely in web platform technologies (i.e. no plugins) is a hard problem. There are a lot of things to consider and a lot of challenges to overcome. Relaying mouse pointer position, forwarding keystrokes, and achieving full 24-bit color repaints at 60fps are just a few of the issues.
+
+## Capturing tab content
+
+If we remove the complexities of traditional screen sharing and focus on sharing the contents of a browser tab, the problem greatly simplifies to a.) capturing the visible tab in its current state, and b.) sending that "frame" across the wire. Essentially, we need a way to snapshot the DOM and share it out.
+
+The sharing part is easy. Websockets are very capable of sending data in different formats (string, JSON, binary). The snapshotting part is a much harder problem. **Projects like [html2canvas](http://html2canvas.hertzen.com/) have tackled screencapturing HTML by re-implementing the browser's rendering engine…in JavaScript!** Another example is [Google Feedback](http://www.google.com/tools/feedback/intl/), though it's not open-source. These types of projects are *very* cool, but they're also dreadfully slow. You'd be lucky to get 1fps throughput, much less that covetted 60fps.
+
+This article discusses a few of my favorite proof-of-concept solutions for "screensharing" a tab.
+
+## Method 1: Mutation Observers + WebSocket
+
+One approach for mirroring a tab was demonstrated by +[Rafael Weinstein](https://plus.google.com/111386188573471152118/) earlier this year. His technique uses [Mutation Observers](https://developer.mozilla.org/docs/DOM/DOM_Mutation_Observers) and a WebSocket.
+
+Essentially, the tab that the presenter is sharing watches for changes to the page and sends diffs to the viewer using a websocket. As the user scrolls or interacts with the page, the observers pick up these changes and report them back to the viewer using Rafael's [mutation summary library](https://code.google.com/p/mutation-summary/). This keeps things performant. The entire page isn't sent for every frame.
+
+{% YouTube id="eRZ4pO0gVWw", startTime="106" %}
+
+As Rafael points out in the video, this is merely a proof of concept. Still, I think it's a neat way to combine a newer platform feature like Mutation Observers with an older one like Websockets.
+
+## Method 2: Blob from an HTMLDocument + Binary WebSocket
+
+This next method is one that recently dawned on me. It's similar to the Mutation Observers approach, but instead of sending summary diffs, it creates a Blob clone of the entire `HTMLDocument` and sends it across a binary websocket. Here's the setup by setup:
+
+1. Rewrite all URLs on the page to be absolute. This prevents static image and CSS assets from containing broken links.
+1. Clone the page's document element: `document.documentElement.cloneNode(true);`
+1. Make the clone readonly, non-selectable, and prevent scrolling using CSS `pointer-events: 'none';user-select:'none';overflow:hidden;`
+1. Capture the current scroll position of the page and add them as `data-*` attributes on the duplicate.
+1. Create a `new Blob()` from the `.outerHTML` of the duplicate.
+
+The code looks something like this (I've made simplifications from the full source):
+
+```js
+function screenshotPage() {
+    // 1. Rewrite current doc's imgs, css, and script URLs to be absolute before
+    // we duplicate. This ensures no broken links when viewing the duplicate.
+    urlsToAbsolute(document.images);
+    urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
+    urlsToAbsolute(document.scripts);
+
+    // 2. Duplicate entire document tree.
+    var screenshot = document.documentElement.cloneNode(true);
+
+    // 3. Screenshot should be readyonly, no scrolling, and no selections.
+    screenshot.style.pointerEvents = 'none';
+    screenshot.style.overflow = 'hidden';
+    screenshot.style.userSelect = 'none'; // Note: need vendor prefixes
+
+    // 4. … read on …
+
+    // 5. Create a new .html file from the cloned content.
+    var blob = new Blob([screenshot.outerHTML], {type: 'text/html'});
+
+    // Open a popup to new file by creating a blob URL.
+    window.open(window.URL.createObjectURL(blob));
+}
+```
+
+`urlsToAbsolute()` contains simple regexs to rewrite relative/schemeless URLs to absolute ones. That's necessary so images, css, fonts, and scripts don't break when viewed in the context of a blob URL (e.g. from a different origin).
+
+One last tweak I made was to add scroll support. When presenter scrolls the page, the viewer should follow along. To do that, I stash the current `scrollX` and `scrollY` positions as `data-*` attributes on the duplicate `HTMLDocument`. Before the final Blob is created, a bit of JS is injected that fires on page load:
+
+```js
+// 4. Preserve current x,y scroll position of this page. See addOnPageLoad().
+screenshot.dataset.scrollX = window.scrollX;
+screenshot.dataset.scrollY = window.scrollY;
+
+// 4.5. When screenshot loads (e.g. in blob URL), scroll it to the same location
+// of this page. Do this by appending a window.onDOMContentLoaded listener
+// which pulls out the screenshot (dupe's) saved scrollX/Y state on the DOM.
+var script = document.createElement('script');
+script.textContent = '(' + addOnPageLoad_.toString() + ')();'; // self calling.
+screenshot.querySelector('body').appendChild(script);
+
+// NOTE: Not to be invoked directly. When the screenshot loads, scroll it
+// to the same x,y location of original page.
+function addOnPageLoad() {
+    window.addEventListener('DOMContentLoaded', function(e) {
+    var scrollX = document.documentElement.dataset.scrollX || 0;
+    var scrollY = document.documentElement.dataset.scrollY || 0;
+    window.scrollTo(scrollX, scrollY);
+    });
+```
+
+Faking the scrolling gives the impression that we've screenshoted a portion of the original page, when in fact, we've duplicated the entire thing and merely repositioned it. #clever
+
+### Demo
+
+{% Aside %}
+You may need to unblock the popup if the browser blocks it.
+{% endAside %}
+
+But for tab sharing, we need to continuously capture the tab and send it to viewers. For that I've written a small Node websocket server, app, and bookmarklet that demonstrates
+the flow. If you're not interested in [the code](https://github.com/ebidel/html5demos/tree/master/screenshoter), here's a short video of things in action:
+
+{% YouTube id="2Ke_qEZGMeo" %}
+
+### Future Improvements
+
+One optimization is not to duplicate the entire document on every frame. That's wasteful and something the Mutation Observer example does well at. Another improvement is
+to handle relative CSS background images in `urlsToAbsolute()`. That's something
+the current script doesn't consider.
+
+## Method 3: Chrome Extension API + Binary WebSocket
+
+At [Google I/O 2012](https://developers.google.com/events/io/sessions/gooio2012/204/), I demonstrated another approach for screensharing the contents of a browser tab. However, this one is a cheat. It requires a Chrome Extension API: not pure HTML5 magic.
+
+{% YouTube id="X_ek1wSe66o" , startTime="2318"%}
+
+The [source](https://github.com/ebidel/html5can/tree/master/demos/screenshare) for
+this one is also up on Github, but the gist is:
+
+1. Capture the current tab as a .png dataURL. Chrome Extensions have an API for that [`chrome.tabs.captureVisibleTab()`](http://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab).
+1. Convert the dataURL to a `Blob`. See [`convertDataURIToBlob()`](https://github.com/ebidel/html5can/blob/master/demos/screenshare/app.js#L40) helper.
+1. Send each Blob (frame) to the viewer using a binary websocket by setting `socket.responseType='blob'`.
+
+### Example
+
+Here's code to screenshot the current tab as a png and send the frame through a websocket:
+
+```js
+var IMG_MIMETYPE = 'images/jpeg'; // Update to image/webp when crbug.com/112957 is fixed.
+var IMG_QUALITY = 80; // [0-100]
+var SEND_INTERVAL = 250; // ms
+
+var ws = new WebSocket('ws://…', 'dumby-protocol');
+ws.binaryType = 'blob';
+
+function captureAndSendTab() {
+    var opts = {format: IMG_MIMETYPE, quality: IMG_QUALITY};
+    chrome.tabs.captureVisibleTab(null, opts, function(dataUrl) {
+    // captureVisibleTab returns a dataURL. Decode it -> convert to blob -> send.
+    ws.send(convertDataURIToBlob(dataUrl, IMG_MIMETYPE));
+    });
+}
+
+var intervalId = setInterval(function() {
+    if (ws.bufferedAmount == 0) {
+    captureAndSendTab();
+    }
+}, SEND_INTERVAL);
+```
+
+### Future Improvements
+
+The framerate is surprisingly good for this one, but it could be even better. One improvement would be to remove the overhead of converting the dataURL to a Blob. Unfortunately, `chrome.tabs.captureVisibleTab()` only gives us a dataURL. If it returned a Blob or Typed Array, we could send that directly through the websocket rather than doing the conversion to a Blob ourselves. Please star [crbug.com/32498](http://crbug.com/32498) to make that happen!
+
+{% Aside %}
+Side rant: it would be killer if FF ([bug 648610](https://bugzilla.mozilla.org/show_bug.cgi?id=648610)) and Chrome ([crbug.com/67587](http://crbug.com/67587)) implemented  `<canvas>.toBlob()`. I want to add filters/effects to an image without having to induce the overhead of a dataURL! FF has [`canvas.mozGetAsFile()`](https://developer.mozilla.org/docs/DOM/HTMLCanvasElement), but it's non-standard :(
+{% endAside %}
+
+## Method 4: WebRTC - the true future
+
+Last but not least!
+
+The future of screensharing in the browser will be realized by [WebRTC](http://webrtc.org). In August 14, 2012, the team proposed a [WebRTC Tab Content Capture](http://www.chromium.org/developers/design-documents/extensions/proposed-changes/apis-under-development/webrtc-tab-content-capture) API for sharing tab contents:
+
+{% Aside %}
+The proposed APIs enable tab output to be captured as a media stream, and transmitted using WebRTC.  Supporting APIs are also defined to notify and query the capture status for tabs….This API enables a special form of screencasting, but in which users are able to share the contents of a tab rather than sharing their entire desktop.*
+{% endAside %}
+
+Until this guy is ready we're left with methods 1-3.
+
+## Conclusion
+
+So browser tab sharing is possible with today's web technology!
+
+But…that statement should be taken with a grain of salt. While neat, the techniques in this article fall short of a great sharing UX in one way or another. That will all change
+with the [WebRTC Tab Content Capture](#toc-webrtc) effort, but until it's a reality, we're left with browser plugins or limited solutions like the ones covered here.
+
+Have more techniques? Post a comment!
\ No newline at end of file
diff --git a/src/site/content/en/blog/streams/index.md b/src/site/content/en/blog/streams/index.md
new file mode 100644
index 00000000000..db8dbc50c46
--- /dev/null
+++ b/src/site/content/en/blog/streams/index.md
@@ -0,0 +1,1082 @@
+---
+title: Streams—The definitive guide
+subhead: Learn how to use readable, writable, and transform streams with the Streams API.
+description: |
+  The Streams API allows JavaScript to programmatically access streams of data received over the
+  network and process them as desired.
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2022-06-01
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: A forest stream with colored fallen leaves.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  # - streams
+---
+
+The Streams API allows you to programmatically access streams of data received over the network
+or created by whatever means locally and
+process them with JavaScript. Streaming involves breaking down a resource that you want to receive, send, or transform
+into small chunks, and then processing these chunks bit by bit. While streaming is something
+browsers do anyway when receiving assets like HTML or videos to be shown on webpages, this
+capability has never been available to JavaScript before `fetch` with streams was introduced in 2015.
+
+{% Aside %}
+  Streaming was technically possible with `XMLHttpRequest`, but it
+  [really was not pretty](https://gist.github.com/igrigorik/5736866).
+{% endAside %}
+
+Previously, if you wanted to process a resource of some kind (be it a video, or a text file, etc.),
+you would have to download the entire file, wait for it to be deserialized into a suitable format,
+and then process it. With streams being available to
+JavaScript, this all changes. You can now process raw data with JavaScript progressively as
+soon as it is available on the client, without needing to generate a buffer, string, or blob.
+This unlocks a number of use cases, some of which I list below:
+
+- **Video effects:** piping a readable video stream through a transform stream that applies effects
+  in real time.
+- **Data (de)compression:** piping a file stream through a transform stream that selectively
+  (de)compresses it.
+- **Image decoding:** piping an HTTP response stream through a transform stream that decodes bytes
+  into bitmap data, and then through another transform stream that translates bitmaps into PNGs. If
+  installed inside the `fetch` handler of a service worker, this allows you to transparently polyfill
+  new image formats like AVIF.
+
+## Browser support
+
+### ReadableStream and WritableStream
+
+{% BrowserCompat 'api.ReadableStream' %}
+
+### TransformStream
+
+{% BrowserCompat 'api.TransformStream' %}
+
+{% Aside %}
+  For additional support, there is a [polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) available. If possible, load the polyfill conditionally and only if the built-in feature is not available.
+{% endAside %}
+
+## Core concepts
+
+Before I go into details on the various types of streams, let me introduce some core concepts.
+
+### Chunks
+
+A chunk is a **single piece of data** that is written to or read from a stream. It can be of any
+type; streams can even contain chunks of different types. Most of the time, a chunk will not be the most atomic
+unit of data for a given stream. For example, a byte stream might contain chunks consisting of 16
+KiB `Uint8Array` units, instead of single bytes.
+
+### Readable streams
+
+A readable stream represents a source of data from which you can read. In other words, data **comes
+out** of a readable stream. Concretely, a readable stream is an instance of the `ReadableStream`
+class.
+
+### Writable streams
+
+A writable stream represents a destination for data into which you can write. In other words, data
+**goes in** to a writable stream. Concretely, a writable stream is an instance of the
+`WritableStream` class.
+
+### Transform streams
+
+A transform stream consists of a **pair of streams**: a writable stream, known as its writable side,
+and a readable stream, known as its readable side.
+A real-world metaphor for this would be a
+[simultaneous interpreter](https://en.wikipedia.org/wiki/Simultaneous_interpretation)
+who translates from one language to another on-the-fly.
+In a manner specific to the transform stream, writing
+to the writable side results in new data being made available for reading from the
+readable side. Concretely, any object with a `writable` property and a `readable` property can serve
+as a transform stream. However, the standard `TransformStream` class makes it easier to create
+such a pair that is properly entangled.
+
+### Pipe chains
+
+Streams are primarily used by **piping** them to each other. A readable stream can be piped directly
+to a writable stream, using the readable stream's `pipeTo()` method, or it can be piped through one
+or more transform streams first, using the readable stream's `pipeThrough()` method. A **set of
+streams piped together** in this way is referred to as a pipe chain.
+
+### Backpressure
+
+Once a pipe chain is constructed, it will propagate signals regarding how fast chunks should flow
+through it. If any step in the chain cannot yet accept chunks, it propagates a signal backwards
+through the pipe chain, until eventually the original source is told to stop producing chunks so
+fast. This process of **normalizing flow** is called backpressure.
+
+### Teeing
+
+A readable stream can be teed (named after the shape of an uppercase 'T') using its `tee()` method.
+This will **lock** the stream, that is, make it no longer directly usable; however, it will create **two new
+streams**, called branches, which can be consumed independently.
+Teeing also is important because streams cannot be rewound or restarted, more about this later.
+
+<figure>
+  <!-- Original source file located at https://drive.google.com/file/d/17apgoyo6E5RAA_nwwM5Xg4FGiMr8y3mk/view?usp=sharing -->
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="Diagram of a pipe chain consisting of a readable stream coming from a call to the fetch API that is then piped through a transform stream whose output is teed and then sent to the browser for the first resulting readable stream and to the service worker cache for the second resulting readable stream.", width="800", height="430" %}
+  <figcaption>A pipe chain.</figcaption>
+</figure>
+
+## The mechanics of a readable stream
+
+A readable stream is a data source represented in JavaScript by a
+[`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) object that
+flows from an underlying source. The
+[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream)
+constructor creates and returns a readable stream object from the given handlers. There are two
+types of underlying source:
+
+- **Push sources** constantly push data at you when you have accessed them, and it is up to you to
+  start, pause, or cancel access to the stream. Examples include live video streams, server-sent events,
+  or WebSockets.
+- **Pull sources** require you to explicitly request data from them once connected to. Examples
+  include HTTP operations via `fetch()` or `XMLHttpRequest` calls.
+
+Stream data is read sequentially in small pieces called **chunks**.
+The chunks placed in a stream are said to be **enqueued**. This means they are waiting in a queue
+ready to be read. An **internal queue** keeps track of the chunks that have not yet been read.
+
+A **queuing strategy** is an object that determines how a stream should signal backpressure based on
+the state of its internal queue. The queuing strategy assigns a size to each chunk, and compares the
+total size of all chunks in the queue to a specified number, known as the **high water mark**.
+
+The chunks inside the stream are read by a **reader**. This reader retrieves the data one chunk at a
+time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other
+processing code that goes along with it is called a **consumer**.
+
+The next construct in this context is called a **controller**. Each readable stream has an associated
+controller that, as the name suggests, allows you to control the stream.
+
+Only one reader can read a stream at a time; when a reader is created and starts reading a stream
+(that is, becomes an **active reader**), it is **locked** to it. If you want another reader to take over
+reading your stream, you typically need to **release** the first reader before you do anything else
+(although you can **tee** streams).
+
+### Creating a readable stream
+
+You create a readable stream by calling its constructor
+[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream).
+The constructor has an optional argument `underlyingSource`, which represents an object
+with methods and properties that define how the constructed stream instance will behave.
+
+#### The `underlyingSource`
+
+This can use the following optional, developer-defined methods:
+
+- `start(controller)`: Called immediately when the object is constructed. The
+  method can access the stream source, and do anything else
+  required to set up the stream functionality. If this process is to be done asynchronously, the method can
+  return a promise to signal success or failure. The `controller` parameter passed to this method is
+  a
+  [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController).
+- `pull(controller)`: Can be used to control the stream as more chunks are fetched. It
+  is called repeatedly as long as the stream's internal queue of chunks is not full, up until the queue
+  reaches its high water mark. If the result of calling `pull()` is a promise,
+  `pull()` will not be called again until said  promise fulfills.
+  If the promise rejects, the stream will become errored.
+- `cancel(reason)`: Called when the stream consumer cancels the stream.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+The `ReadableStreamDefaultController` supports the following methods:
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close)
+  closes the associated stream.
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue)
+  enqueues a given chunk in the associated stream.
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error)
+  causes any future interactions with the associated stream to error.
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('The first chunk!');
+},
+/* … */
+```
+
+#### The `queuingStrategy`
+
+The second, likewise optional, argument of the `ReadableStream()` constructor is `queuingStrategy`.
+It is an object that optionally defines a queuing strategy for the stream, which takes two
+parameters:
+
+- `highWaterMark`: A non-negative number indicating the high water mark of the stream using this queuing strategy.
+- `size(chunk)`: A function that computes and returns the finite non-negative size of the given chunk value.
+  The result is used to determine backpressure, manifesting via the appropriate `ReadableStreamDefaultController.desiredSize` property.
+  It also governs when the underlying source's `pull()` method is called.
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} You could define your own custom `queuingStrategy`, or use an instance of
+[`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy)
+or [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)
+for this object's value. If no `queuingStrategy` is supplied, the default used is the same as a
+`CountQueuingStrategy` with a `highWaterMark` of `1`. {% endAside %}
+
+#### The `getReader()` and `read()` methods
+
+To read from a readable stream, you need a reader, which will be a
+[`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader).
+The `getReader()` method of the `ReadableStream` interface creates a reader and locks the stream to
+it. While the stream is locked, no other reader can be acquired until this one is released.
+
+The [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read)
+method of the `ReadableStreamDefaultReader` interface returns a promise providing access to the next
+chunk in the stream's internal queue. It fulfills or rejects with a result depending on the state of
+the stream. The different possibilities are as follows:
+
+- If a chunk is available, the promise will be fulfilled with an object of the form<br>
+  `{ value: chunk, done: false }`.
+- If the stream becomes closed, the promise will be fulfilled with an object of the form<br>
+  `{ value: undefined, done: true }`.
+- If the stream becomes errored, the promise will be rejected with the relevant error.
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('The stream is done.');
+    break;
+  }
+  console.log('Just read a chunk:', value);
+}
+```
+
+#### The `locked` property
+
+You can check if a readable stream is locked by accessing its
+[`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked)
+property.
+
+```js
+const locked = readableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Readable stream code samples
+
+The code sample below shows all the steps in action. You first create a `ReadableStream` that in its
+`underlyingSource` argument (that is, the `TimestampSource` class) defines a `start()` method.
+This method tells the stream's `controller` to
+`enqueue()` a timestamp every second during ten seconds.
+Finally, it tells the controller to `close()` the stream. You consume this
+stream by creating a reader via the `getReader()` method and calling `read()` until the stream is
+`done`.
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // Add the string to the stream.
+      controller.enqueue(string);
+      console.log(`Enqueued ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // Close the stream after 10s.
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // This is called if the reader cancels.
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // The `read()` method returns a promise that
+    // resolves when a value has been received.
+    const { done, value } = await reader.read();
+    // Result objects contain two properties:
+    // `done`  - `true` if the stream has already given you all its data.
+    // `value` - Some data. Always `undefined` when `done` is `true`.
+    if (done) return result;
+    result += value;
+    console.log(`Read ${result.length} characters so far`);
+    console.log(`Most recently read chunk: ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('Stream complete', result));
+```
+
+### Asynchronous iteration
+
+Checking upon each `read()` loop iteration if the stream is `done` may not be the most convenient API.
+Luckily there will soon be a better way to do this: asynchronous iteration.
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %}
+  Asynchronous iteration is not yet implemented in any browser.
+{% endAside %}
+
+A workaround to use asynchronous iteration today is to implement the behavior with a polyfill.
+
+```js
+if (!ReadableStream.prototype[Symbol.asyncIterator]) {
+  ReadableStream.prototype[Symbol.asyncIterator] = async function* () {
+    const reader = this.getReader();
+    try {
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          return;
+          }
+        yield value;
+      }
+    }
+    finally {
+      reader.releaseLock();
+    }
+  }
+}
+```
+
+### Teeing a readable stream
+
+The [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) method of the
+`ReadableStream` interface tees the current readable stream, returning a two-element array
+containing the two resulting branches as new `ReadableStream` instances. This allows
+two readers to read a stream simultaneously. You might do this, for example, in a service worker if
+you want to fetch a response from the server and stream it to the browser, but also stream it to the
+service worker cache. Since a response body cannot be consumed more than once, you need two copies
+to do this. To cancel the stream, you then need to cancel both resulting branches. Teeing a stream
+will generally lock it for the duration, preventing other readers from locking it.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called `read()` when the controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+// Create two `ReadableStream`s.
+const [streamA, streamB] = readableStream.tee();
+
+// Read streamA iteratively one by one. Typically, you
+// would not do it this way, but you certainly can.
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// Read streamB in a loop. This is the more common way
+// to read data from the stream.
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## Readable byte streams
+
+For streams representing bytes, an extended version of the readable stream is provided to handle
+bytes efficiently, in particular by minimizing copies. Byte streams allow for bring-your-own-buffer
+(BYOB) readers to be acquired. The default implementation can give a range of different outputs such
+as strings or array buffers in the case of WebSockets, whereas byte streams guarantee byte output.
+In addition, BYOB readers have stability benefits. This is
+because if a buffer detaches, it can guarantee that one does not write into the same buffer twice,
+hence avoiding race conditions. BYOB readers can reduce the number of times the browser needs to run
+garbage collection, because it can reuse buffers.
+
+### Creating a readable byte stream
+
+You can create a readable byte stream by passing an additional `type` parameter to the
+`ReadableStream()` constructor.
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### The `underlyingSource`
+
+The underlying source of a readable byte stream is given a `ReadableByteStreamController` to
+manipulate. Its `ReadableByteStreamController.enqueue()` method takes a `chunk` argument whose value
+is an `ArrayBufferView`. The property `ReadableByteStreamController.byobRequest` returns the current
+BYOB pull request, or null if there is none. Finally, the `ReadableByteStreamController.desiredSize`
+property returns the desired size to fill the controlled stream's internal queue.
+
+### The `queuingStrategy`
+
+The second, likewise optional, argument of the `ReadableStream()` constructor is `queuingStrategy`.
+It is an object that optionally defines a queuing strategy for the stream, which takes one
+parameter:
+
+- `highWaterMark`: A non-negative number of bytes indicating the high water mark of the stream using this queuing strategy.
+  This is used to determine backpressure, manifesting via the appropriate `ReadableByteStreamController.desiredSize` property.
+  It also governs when the underlying source's `pull()` method is called.
+
+{% Aside %}
+  Unlike queuing strategies for other stream types, a queuing strategy for a readable byte stream
+  does not have a `size(chunk)` function. The size of each chunk is always determined by its
+  `byteLength` property.
+{% endAside %}
+
+{% Aside %}
+  If no `queuingStrategy` is supplied, the default used is one with a `highWaterMark` of `0`.
+{% endAside %}
+
+#### The `getReader()` and `read()` methods
+
+You can then get access to a `ReadableStreamBYOBReader` by setting the `mode` parameter accordingly:
+`ReadableStream.getReader({ mode: "byob" })`. This allows for more precise control over buffer
+allocation in order to avoid copies. To read from the byte stream, you need to call
+`ReadableStreamBYOBReader.read(view)`, where `view` is an
+[`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView).
+
+#### Readable byte stream code sample
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("The first 1024 bytes, or less:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+The following function returns readable byte streams that allow for efficient zero-copy reading of a
+randomly generated array. Instead of using a predetermined chunk size of 1,024, it attempts to fill
+the developer-supplied buffer, allowing for full control.
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // Even when the consumer is using the default reader,
+      // the auto-allocation feature allocates a buffer and
+      // passes it to us via `byobRequest`.
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## The mechanics of a writable stream
+
+A writable stream is a destination into which you can write data, represented in JavaScript by a
+[`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) object. This
+serves as an abstraction over the top of an **underlying sink**—a lower-level I/O sink into which
+raw data is written.
+
+The data is written to the stream via a **writer**, one chunk at a time. A chunk can take a
+multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce
+the chunks ready for writing; the writer plus the associated code is called a **producer**.
+
+When a writer is created and starts writing to a stream (an **active writer**), it is said to be
+**locked** to it. Only one writer can write to a writable stream at one time. If you want another
+writer to start writing to your stream, you typically need to release it, before you then attach
+another writer to it.
+
+An **internal queue** keeps track of the chunks that have been written to the stream but not yet
+been processed by the underlying sink.
+
+A **queuing strategy** is an object that determines how a stream should signal backpressure based on
+the state of its internal queue. The queuing strategy assigns a size to each chunk, and compares the
+total size of all chunks in the queue to a specified number, known as the **high water mark**.
+
+The final construct is called a **controller**. Each writable stream has an associated controller that
+allows you to control the stream (for example, to abort it).
+
+### Creating a writable stream
+
+The [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) interface of
+the Streams API provides a standard abstraction for writing streaming data to a destination, known
+as a sink. This object comes with built-in backpressure and queuing. You create a writable stream by
+calling its constructor
+[`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream).
+It has an optional `underlyingSink` parameter, which represents an object
+with methods and properties that define how the constructed stream instance will behave.
+
+#### The `underlyingSink`
+
+The `underlyingSink` can include the following optional, developer-defined methods. The `controller`
+parameter passed to some of the methods is a
+[`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController).
+
+- `start(controller)`: This method is called immediately when the object is constructed. The
+  contents of this method should aim to get access to the underlying sink. If this process is to be
+  done asynchronously, it can return a promise to signal success or failure.
+- `write(chunk, controller)`: This method will be called when a new chunk of data (specified in the
+  `chunk` parameter) is ready to be written to the underlying sink. It can return a promise to
+  signal success or failure of the write operation. This method will be called only after previous
+  writes have succeeded, and never after the stream is closed or aborted.
+- `close(controller)`: This method will be called if the app signals that it has finished writing
+  chunks to the stream. The contents should do whatever is necessary to finalize writes to the
+  underlying sink, and release access to it. If this process is asynchronous, it can return a
+  promise to signal success or failure. This method will be called only after all queued-up writes
+  have succeeded.
+- `abort(reason)`: This method will be called if the app signals that it wishes to abruptly close
+  the stream and put it in an errored state. It can clean up any held resources, much like
+  `close()`, but `abort()` will be called even if writes are queued up. Those chunks will be thrown
+  away. If this process is asynchronous, it can return a promise to signal success or failure. The
+  `reason` parameter contains a `DOMString` describing why the stream was aborted.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+The
+[`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController)
+interface of the Streams API represents a controller allowing control of a `WritableStream`'s state
+during set up, as more chunks are submitted for writing, or at the end of writing. When constructing
+a `WritableStream`, the underlying sink is given a corresponding `WritableStreamDefaultController`
+instance to manipulate. The `WritableStreamDefaultController` has only one method:
+[`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error),
+which causes any future interactions with the associated stream to error.
+`WritableStreamDefaultController` also supports a `signal` property which returns an instance of
+[`AbortSignal`](https://developer.mozilla.org/docs/Web/API/AbortSignal),
+allowing a `WritableStream` operation to be stopped if needed.
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // Try to do something dangerous with `chunk`.
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### The `queuingStrategy`
+
+The second, likewise optional, argument of the `WritableStream()` constructor is `queuingStrategy`.
+It is an object that optionally defines a queuing strategy for the stream, which takes two
+parameters:
+
+- `highWaterMark`: A non-negative number indicating the high water mark of the stream using this queuing strategy.
+- `size(chunk)`: A function that computes and returns the finite non-negative size of the given chunk value.
+  The result is used to determine backpressure, manifesting via the appropriate `WritableStreamDefaultWriter.desiredSize` property.
+
+{% Aside %} You could define your own custom `queuingStrategy`, or use an instance of
+[`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy)
+or [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)
+for this object value. If no `queuingStrategy` is supplied, the default used is the same as a
+`CountQueuingStrategy` with a `highWaterMark` of `1`. {% endAside %}
+
+#### The `getWriter()` and `write()` methods
+
+To write to a writable stream, you need a writer, which will be a
+`WritableStreamDefaultWriter`. The `getWriter()` method of the `WritableStream` interface returns a
+new instance of `WritableStreamDefaultWriter` and locks the stream to that instance. While the
+stream is locked, no other writer can be acquired until the current one is released.
+
+The [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write)
+method of the
+[`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter)
+interface writes a passed chunk of data to a `WritableStream` and its underlying sink, then returns
+a promise that resolves to indicate the success or failure of the write operation. Note that what
+"success" means is up to the underlying sink; it might indicate that the chunk has been accepted,
+and not necessarily that it is safely saved to its ultimate destination.
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('The first chunk!');
+```
+
+#### The `locked` property
+
+You can check if a writable stream is locked by accessing its
+[`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked)
+property.
+
+```js
+const locked = writableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Writable stream code sample
+
+The code sample below shows all steps in action.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[start]');
+  },
+  async write(chunk, controller) {
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // Wait to add to the write queue.
+  await writer.ready;
+  console.log('[ready]', Date.now() - start, 'ms');
+  // The Promise is resolved after the write finishes.
+  writer.write(char);
+}
+await writer.close();
+```
+
+### Piping a readable stream to a writable stream
+
+A readable stream can be piped to a writable stream through the readable stream's
+[`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo) method.
+`ReadableStream.pipeTo()` pipes the current `ReadableStream`to a given `WritableStream` and returns a
+promise that fulfills when the piping process completes successfully, or rejects if any errors were
+encountered.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start readable]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called when controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // Called by constructor
+    console.log('[start writable]');
+  },
+  async write(chunk, controller) {
+    // Called upon writer.write()
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[finished]');
+```
+
+## Creating a transform stream
+
+The `TransformStream` interface of the Streams API represents a set of transformable data. You
+create a transform stream by calling its constructor `TransformStream()`, which creates and returns
+a transform stream object from the given handlers. The `TransformStream()` constructor accepts as
+its first argument an optional JavaScript object representing the `transformer`. Such objects can
+contain any of the following methods:
+
+### The `transformer`
+
+- `start(controller)`: This method is called immediately when the object is constructed. Typically
+  this is used to enqueue prefix chunks, using `controller.enqueue()`. Those chunks will be read
+  from the readable side but do not depend on any writes to the writable side. If this initial
+  process is asynchronous, for example because it takes some effort to acquire the prefix chunks,
+  the function can return a promise to signal success or failure; a rejected promise will error the
+  stream. Any thrown exceptions will be re-thrown by the `TransformStream()` constructor.
+- `transform(chunk, controller)`: This method is called when a new chunk originally written to the
+  writable side is ready to be transformed. The stream implementation guarantees that this function
+  will be called only after previous transforms have succeeded, and never before `start()` has
+  completed or after `flush()` has been called. This function performs the actual transformation
+  work of the transform stream. It can enqueue the results using `controller.enqueue()`. This
+  permits a single chunk written to the writable side to result in zero or multiple chunks on the
+  readable side, depending on how many times `controller.enqueue()` is called. If the process of
+  transforming is asynchronous, this function can return a promise to signal success or failure of
+  the transformation. A rejected promise will error both the readable and writable sides of the
+  transform stream. If no `transform()` method is supplied, the identity transform is used, which
+  enqueues chunks unchanged from the writable side to the readable side.
+- `flush(controller)`: This method is called after all chunks written to the writable side have been
+  transformed by successfully passing through `transform()`, and the writable side is about to be
+  closed. Typically this is used to enqueue suffix chunks to the readable side, before that too
+  becomes closed. If the flushing process is asynchronous, the function can return a promise to
+  signal success or failure; the result will be communicated to the caller of
+  `stream.writable.write()`. Additionally, a rejected promise will error both the readable and
+  writable sides of the stream. Throwing an exception is treated the same as returning a rejected
+  promise.
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### The `writableStrategy` and `readableStrategy` queueing strategies
+
+The second and third optional parameters of the `TransformStream()` constructor are optional
+`writableStrategy` and `readableStrategy` queueing strategies. They are defined as outlined in the
+[readable](#the-queuingstrategy) and the [writable](#the-queuingstrategy-3) stream
+sections respectively.
+
+### Transform stream code sample
+
+The following code sample shows a simple transform stream in action.
+
+```js
+// Note that `TextEncoderStream` and `TextDecoderStream` exist now.
+// This example shows how you would have done it before.
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+### Piping a readable stream through a transform stream
+
+The [`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough)
+method of the `ReadableStream` interface provides a chainable way of piping the current stream
+through a transform stream or any other writable/readable pair. Piping a stream will generally lock
+it for the duration of the pipe, preventing other readers from locking it.
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // called by constructor
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // called read when controller's queue is empty
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close(); // or controller.error();
+  },
+  cancel(reason) {
+    // called when rs.cancel(reason)
+    console.log('[cancel]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+The next code sample (a bit contrived) shows how you could implement a "shouting" version of `fetch()`
+that uppercases all text by consuming the returned response promise
+[as a stream](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream)
+and uppercasing chunk by chunk. The advantage of this approach is that you do not need to wait for
+the whole document to be downloaded, which can make a huge difference when dealing with large files.
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## Demo
+
+The demo below shows readable, writable, and transform streams in action. It also includes examples
+of `pipeThrough()` and `pipeTo()` pipe chains, and also demonstrates `tee()`. You can optionally run
+the [demo](https://streams-demo.glitch.me/) in its own window or view the
+[source code](https://glitch.com/edit/#!/streams-demo?path=script.js).
+
+{% Glitch 'streams-demo' %}
+
+## Useful streams available in the browser
+
+There are a number of useful streams built right into the browser. You can easily create a
+`ReadableStream` from a blob. The [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)
+interface's [stream()](https://developer.mozilla.org/docs/Web/API/Blob/stream) method returns
+a `ReadableStream` which upon reading returns the data contained within the blob. Also recall that a
+[`File`](https://developer.mozilla.org/docs/Web/API/File) object is a specific kind of a
+`Blob`, and can be used in any context that a blob can.
+
+```js
+const readableStream = new Blob(['hello world'], { type: 'text/plain' }).stream();
+```
+
+The streaming variants of `TextDecoder.decode()` and `TextEncoder.encode()` are called
+[`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) and
+[`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream) respectively.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+Compressing or decompressing a file is easy with the
+[`CompressionStream`](https://wicg.github.io/compression/#compression-stream) and
+[`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream) transform streams
+respectively. The code sample below shows how you can download the Streams spec, compress (gzip) it
+right in the browser, and write the compressed file directly to disk.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+The [File System Access API](/file-system-access/)'s
+[`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream)
+and the experimental [`fetch()` request streams](/fetch-upload-streaming/#writable-streams) are
+examples of writable streams in the wild.
+
+The [Serial API](/serial/) makes heavy use of both readable and writable streams.
+
+```js
+// Prompt user to select any serial port.
+const port = await navigator.serial.requestPort();
+// Wait for the serial port to open.
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// Listen to data coming from the serial device.
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // Allow the serial port to be closed later.
+    reader.releaseLock();
+    break;
+  }
+  // value is a Uint8Array.
+  console.log(value);
+}
+
+// Write to the serial port.
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
+await writer.write(data);
+// Allow the serial port to be closed later.
+writer.releaseLock();
+```
+
+Finally, the [`WebSocketStream`](/websocketstream/) API integrates streams with the WebSocket API.
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## Useful resources
+
+- [Streams specification](https://streams.spec.whatwg.org/)
+- [Accompanying demos](https://streams.spec.whatwg.org/demos/)
+- [Streams polyfill](https://github.com/MattiasBuelens/web-streams-polyfill)
+- [2016—the year of web streams](https://jakearchibald.com/2016/streams-ftw/)
+- [Async iterators and generators](https://jakearchibald.com/2017/async-iterators-and-generators/)
+- [Stream Visualizer](https://surma.dev/lab/whatwg-stream-visualizer/lab.html)
+
+## Acknowledgements
+
+This article was reviewed by
+[Jake Archibald](https://jakearchibald.com/),
+[François Beaufort](https://github.com/beaufortfrancois),
+[Sam Dutton](https://samdutton.com/),
+[Mattias Buelens](https://github.com/MattiasBuelens),
+[Surma](https://surma.dev/),
+[Joe Medley](https://github.com/jpmedley), and
+[Adam Rice](https://github.com/ricea).
+[Jake Archibald](https://jakearchibald.com/)'s blog posts have helped me a lot in understanding
+streams. Some of the code samples are inspired by GitHub user
+[@bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac)'s explorations and
+parts of the prose build heavily on the
+[MDN Web Docs on Streams](https://developer.mozilla.org/docs/Web/API/Streams_API). The
+[Streams Standard](https://streams.spec.whatwg.org/)'s
+[authors](https://github.com/whatwg/streams/graphs/contributors) have done a tremendous job on
+writing this spec. Hero image by [Ryan Lara](https://unsplash.com/@ryanlara) on
+[Unsplash](https://unsplash.com/).
diff --git a/src/site/content/en/blog/strict-csp/index.md b/src/site/content/en/blog/strict-csp/index.md
new file mode 100644
index 00000000000..b06fc698b3d
--- /dev/null
+++ b/src/site/content/en/blog/strict-csp/index.md
@@ -0,0 +1,665 @@
+---
+layout: post
+title: Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)
+subhead: How to deploy a CSP based on script nonces or hashes as a defense-in-depth against cross-site scripting.
+description: |
+    Learn how to deploy a CSP based on script nonces or hashes as a defense-in-depth
+    against cross-site scripting.
+authors:
+  - lwe
+date: 2021-03-15
+updated: 2023-06-10
+hero: image/3lmWcR1VGYVMicNlBh4aZWBTcSg1/mhE0NYvP3JFyvNyiQ1dj.jpg
+alt: A screenshot of JavaScript code setting a strict Content Security Policy.
+tags:
+  - blog
+  - security
+---
+
+## Why should you deploy a strict Content Security Policy (CSP)?
+
+[Cross-site scripting
+(XSS)](https://www.google.com/about/appsecurity/learning/xss/)—the ability to
+inject malicious scripts into a web application—has been one of the biggest web
+security vulnerabilities for over a decade.
+
+[Content Security Policy
+(CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) is an added layer
+of security that helps to mitigate XSS. Configuring a CSP involves adding the
+Content-Security-Policy HTTP header to a web page and setting values to control
+what resources the user agent is allowed to load for that page. This article
+explains how to use a CSP based on nonces or hashes to mitigate XSS instead of
+the commonly used host-allowlist-based CSPs which often leave the page exposed
+to XSS as they can be [bypassed in most
+configurations](https://research.google.com/pubs/pub45542.html).
+
+{% Aside 'key-term' %}
+A _nonce_ is a random number used only once that can be
+used to mark a `<script>` tag as trusted.
+{% endAside %}
+
+{% Aside 'key-term' %}
+A hash function is a mathematical function that converts
+an input value into a compressed numerical value—a hash. A _hash_ (such as
+[SHA-256](https://en.wikipedia.org/wiki/SHA-2)) can be used to mark an inline
+`<script>` tag as trusted.
+{% endAside %}
+
+A Content Security Policy based on nonces or hashes is often called a _strict
+CSP_. When an application uses a strict CSP, attackers who find HTML injection
+flaws will generally not be able to use them to force the browser to execute
+malicious scripts in the context of the vulnerable document. This is because
+strict CSP only permits hashed scripts or scripts with the correct nonce value
+generated on the server, so attackers cannot execute the script without knowing
+the correct nonce for a given response.
+
+{% Aside %}
+To protect your site from XSS, make sure to sanitize user input
+_and_ use CSP as an extra security layer. CSP is a
+[defense-in-depth](https://en.wikipedia.org/wiki/Defense_in_depth_(computing))
+technique that can prevent the execution of malicious scripts, but it's not a
+substitute for avoiding (and promptly fixing) XSS bugs.
+{% endAside %}
+
+## Browser compatibility {: #compatibility }
+
+Strict CSP is supported in all modern browser engines.
+
+{% BrowserCompat 'http.headers.Content-Security-Policy.strict-dynamic' %}
+
+### Why a strict CSP is recommended over allowlist CSPs
+
+If your site already has a CSP that looks like this: `script-src
+www.googleapis.com`, it may not be effective against cross-site scripting! This
+type of CSP is called an allowlist CSP and it has a couple of downsides:
+
+- It requires a lot of customization.
+- It can be [bypassed in most
+   configurations](https://research.google.com/pubs/pub45542.html).
+
+This makes allowlist CSPs generally ineffective at preventing attackers from
+exploiting XSS. That's why it's recommended to use a strict CSP based on
+cryptographic nonces or hashes, which avoids the pitfalls outlined above.
+
+<div class="switcher">
+{% Compare 'worse', 'Allowlist CSP' %}
+
+- Doesn't effectively protect your site. ❌
+- Must be highly customized. 😓
+
+{% endCompare %}
+
+{% Compare 'better', 'Strict CSP' %}
+
+- Effectively protects your site. ✅
+- Always has the same structure. 😌
+
+{% endCompare %}
+</div>
+
+## What is a strict Content Security Policy?
+
+A strict Content Security Policy has the following structure and is enabled by
+setting one of the following HTTP response headers:
+
+- **Nonce-based strict CSP**
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/er4BaGCJzBwDaESFKfZd.jpg",
+alt="", width="800", height="279" %}
+
+- **Hash-based strict CSP**
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside warning %}
+This is the most stripped-down version of a strict CSP.
+You'll need to tweak it to make it effective across browsers. See [add a
+fallback to support Safari and older
+browsers](#step-4:-add-fallbacks-to-support-safari-and-older-browsers) for
+details.
+{% endAside %}
+
+The following properties make a CSP like the one above "strict" and hence
+secure:
+
+- Uses nonces `'nonce-{RANDOM}'` or hashes `'sha256-{HASHED_INLINE_SCRIPT}'` to
+  indicate which `<script>` tags are trusted by the site's developer and should
+  be allowed to execute in the user's browser.
+- Sets [`'strict-dynamic'`](https://www.w3.org/TR/CSP3/#strict-dynamic-usage) to
+  reduce the effort of deploying a nonce- or hash-based CSP by automatically
+  allowing the execution of scripts that are created by an already trusted
+  script. This also unblocks the use of most third party JavaScript libraries
+  and widgets.
+- Not based on URL allowlists and therefore doesn't suffer from [common CSP
+  bypasses](https://speakerdeck.com/lweichselbaum/csp-is-dead-long-live-strict-csp-deepsec-2016?slide=15).
+
+- Blocks untrusted inline scripts like inline event handlers or `javascript:`
+  URIs.
+- Restricts `object-src` to disable dangerous plugins such as Flash.
+- Restricts `base-uri` to block the injection of `<base>` tags. This prevents
+  attackers from changing the locations of scripts loaded from relative URLs.
+
+{% Aside %}
+Another advantage of a strict CSP is that the CSP always has the
+same structure and doesn't need to be customized for your application.
+{% endAside %}
+
+## Adopting a strict CSP
+
+To adopt a strict CSP, you need to:
+
+1. Decide if your application should set a nonce- or hash-based CSP.
+1. Copy the CSP from the [What is a strict Content Security
+   Policy](#what-is-a-strict-content-security-policy) section and set it as a
+   response header across your application.
+1. Refactor HTML templates and client-side code to remove patterns that are
+   incompatible with CSP.
+1. Deploy your CSP.
+
+You can use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+(v7.3.0 and above with flag `--preset=experimental`) **Best Practices** audit throughout this process to check
+whether your site has a CSP, and whether it's strict enough to be effective
+against XSS.
+
+{% Img src="image/9B7J9oWjgsWbuE84mmxDaY37Wpw2/42a4iEEKsD4T3yU47vNQ.png",
+alt="Lighthouse report warning that no CSP is found in enforcement mode.",
+width="730", height="78" %}
+
+### Step 1: Decide if you need a nonce- or hash-based CSP
+
+There are two types of strict CSPs, nonce- and hash-based. Here's how they work:
+
+- **Nonce-based CSP**: You generate a random number _at runtime_, include it in
+  your CSP, and associate it with every script tag in your page. An attacker
+  can't include and run a malicious script in your page, because they would need
+  to guess the correct random number for that script. This only works if the
+  number is not guessable and newly generated at runtime for every response.
+- **Hash-based CSP**: The hash of every inline script tag is added to the CSP.
+  Note that each script has a different hash. An attacker can't include and run
+  a malicious script in your page, because the hash of that script would need to
+  be present in your CSP.
+
+Criteria for choosing a strict CSP approach:
+
+<div>
+  <table>
+      <caption>Criteria for choosing a strict CSP approach</caption>
+      <thead>
+      <tr>
+        <th>Nonce-based CSP</th>
+        <td>For HTML pages rendered on the server where you can create a new random token
+(nonce) for every response.</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>Hash-based CSP</th>
+        <td>For HTML pages served statically or those that need to be cached. For example,
+single-page web applications built with frameworks such as Angular, React or others, that are
+statically served without server-side rendering.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Step 2: Set a strict CSP and prepare your scripts
+
+When setting a CSP, you have a few options:
+
+- Report-only mode (`Content-Security-Policy-Report-Only`) or enforcement mode
+  (`Content-Security-Policy`). In report-only, the CSP won't block resources
+  yet—nothing will break—but you'll be able to see errors and receive reports
+  for what would have been blocked. Locally, when you're in the process of
+  setting a CSP, this doesn't really matter, because both modes will show you
+  the errors in the browser console. If anything, enforcement mode will make it
+  even easier for you to see blocked resources and tweak your CSP, since your
+  page will look broken. Report-only mode becomes most useful later in the
+  process (see [Step 5](#step-5:-deploy-your-csp)).
+- Header or HTML `<meta>` tag. For local development, a `<meta>` tag may be more
+  convenient for tweaking your CSP and quickly seeing how it affects your site.
+  However:
+  - Later on, when deploying your CSP in production, it is recommended to set it
+    as an HTTP header.
+  - If you want to set your CSP in report-only mode, you'll need to set it as a
+    header—CSP meta tags don't support report-only mode.
+
+<span id="nonce-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %}
+Option A: Nonce-based CSP
+{% endDetailsSummary %}
+
+Set the following `Content-Security-Policy` HTTP response header in your
+application:
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside 'caution' %}
+Replace the `{RANDOM}` placeholder with a _random_ nonce that is regenerated
+**on every server response**.
+{% endAside %}
+
+#### Generate a nonce for CSP
+
+A nonce is a random number used only once per page load. A nonce-based CSP can
+only mitigate XSS if the nonce value is **not guessable** by an attacker. A
+nonce for CSP needs to be:
+
+- A cryptographically **strong random** value (ideally 128+ bits in length)
+- Newly **generated for every response**
+- Base64 encoded
+
+Here are some examples on how to add a CSP nonce in server-side frameworks:
+
+- [Django (python)](https://django-csp.readthedocs.io/en/latest/nonce.html)
+- Express (JavaScript):
+
+```javascript
+const app = express();
+app.get('/', function(request, response) {
+    // Generate a new random nonce value for every response.
+    const nonce = crypto.randomBytes(16).toString("base64");
+    // Set the strict nonce-based CSP response header
+    const csp = `script-src 'nonce-${nonce}' 'strict-dynamic'; object-src 'none'; base-uri 'none';`;
+    response.set("Content-Security-Policy", csp);
+    // Every <script> tag in your application should set the `nonce` attribute to this value.
+    response.render(template, { nonce: nonce });
+  });
+}
+```
+
+#### Add a `nonce` attribute to `<script>` elements
+
+With a nonce-based CSP, every `<script>` element must have a `nonce` attribute
+which matches the random nonce value specified in the CSP header (all scripts
+can have the same nonce). The first step is to add these attributes to all
+scripts:
+
+{% Compare 'worse', 'Blocked by CSP'%}
+
+```html
+<script src="/path/to/script.js"></script>
+<script>foo()</script>
+```
+
+{% CompareCaption %}
+CSP will block these scripts, because they don't have
+`nonce` attributes.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script nonce="${NONCE}" src="/path/to/script.js"></script>
+<script nonce="${NONCE}">foo()</script>
+```
+
+{% CompareCaption %}
+CSP will allow the execution of these scripts if `${NONCE}`
+is replaced with a value matching the nonce in the CSP response header. Note
+that some browsers will hide the `nonce` attribute when inspecting the page
+source.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %}
+With `'strict-dynamic'` in your CSP, you'll only have to
+add nonces to `<script>` tags that are present in the initial HTML
+response.`'strict-dynamic'` allows the execution of scripts dynamically added to
+the page, as long as they were loaded by a safe, already-trusted script (see the
+[specification](https://www.w3.org/TR/CSP3/#strict-dynamic-usage)).
+{% endAside %}
+
+{% endDetails %}
+
+<span id="hash-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %}
+Option B: Hash-based CSP Response Header
+{% endDetailsSummary %}
+
+Set the following `Content-Security-Policy` HTTP response header in your
+application:
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+For several inline scripts, the syntax is as follows:
+`'sha256-{HASHED_INLINE_SCRIPT_1}'  'sha256-{HASHED_INLINE_SCRIPT_2}'`.
+
+{% Aside 'caution' %}
+The `{HASHED_INLINE_SCRIPT}` placeholder must be replaced
+with a base64-encoded SHA-256 hash of an inline script that can be used to load
+other scripts (see next section). You can calculate SHA hashes of static inline
+`<script>` blocks with this
+[tool](https://strict-csp-codelab.glitch.me/csp_sha256_util.html). An
+alternative is to inspect the CSP violation warnings in Chrome's developer
+console, which contains hashes of blocked scripts, and add these hashes to the
+policy as 'sha256-…'.
+
+A script injected by an attacker will be blocked by the browser as only the
+hashed inline script and any scripts dynamically added by it will be allowed to
+execute by the browser.
+{% endAside %}
+
+#### Load sourced scripts dynamically
+
+All scripts that are externally sourced need to be loaded dynamically via an
+inline script, because CSP hashes are supported across browsers only for inline
+scripts (hashes for sourced scripts are [not well-supported across
+browsers](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned)).
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/B2YsfJDYw8PRI6kJI7Bs.jpg",
+alt="", width="800", height="333" %}
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<script src="https://example.org/foo.js"></script>
+<script src="https://example.org/bar.js"></script>
+```
+
+{% CompareCaption %}
+CSP will block these scripts since only inline-scripts can
+be hashed.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script>
+var scripts = [ 'https://example.org/foo.js', 'https://example.org/bar.js'];
+scripts.forEach(function(scriptUrl) {
+  var s = document.createElement('script');
+  s.src = scriptUrl;
+  s.async = false; // to preserve execution order
+  document.head.appendChild(s);
+});
+</script>
+```
+
+{% CompareCaption %}
+To allow execution of this script, the hash of the inline
+script must be calculated and added to the CSP response header, replacing the
+`{HASHED_INLINE_SCRIPT}` placeholder. To reduce the amount of hashes, you can
+optionally merge all inline scripts into a single script. To see this in action
+checkout the [example](https://strict-csp-codelab.glitch.me/solution_hash_csp#)
+and examine the
+[code](https://glitch.com/edit/#!/strict-csp-codelab?path=demo%2Fsolution_hash_csp.html%3A1%3A).
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %}
+When calculating a CSP hash for inline scripts, whitespace
+characters between the opening and closing `<script>` tags matter. You can
+calculate CSP hashes for inline scripts using this
+[tool](https://strict-csp-codelab.glitch.me/csp_sha256_util.html).
+{% endAside %}
+
+#### Script loading considerations
+
+In the code snippet above, `s.async = false` is added to ensure that foo
+executes before bar (even if bar loads first). **In this snippet, `s.async =
+false` does not block the parser while the scripts load**; that's because the
+scripts are added dynamically. The parser will only stop as the scripts are
+being executed, just like it would behave for `async` scripts. However, with
+this snippet, keep in mind:
+
+- One/both scripts may execute before the document has finished downloading. If
+   you want the document to be ready by the time the scripts execute, you need
+   to wait for the [`DOMContentLoaded`
+   event](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event)
+   before you append the scripts. If this causes a performance issue (because
+   the scripts don't start downloading early enough), you can use [preload
+   tags](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)
+   earlier in the page.
+- `defer = true` won't do anything. If you need that behaviour, you'll have to
+   manually run the script at the time you want to run it.
+
+{% endDetails %}
+
+### Step 3:  Refactor HTML templates and client-side code to remove patterns incompatible with CSP
+
+Inline event handlers (such as `onclick="…"`, `onerror="…"`) and JavaScript URIs
+(`<a href="javascript:…">`) can be used to run scripts. This means that an
+attacker who finds an XSS bug could inject this kind of HTML and execute
+malicious JavaScript. A nonce- or hash-based CSP disallows the use of such
+markup. If your site makes use of any of the patterns described above, you'll
+need to refactor them into safer alternatives.
+
+If you enabled CSP in the previous step, you'll be able to see CSP violations in
+the console every time CSP blocks an incompatible pattern.
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/mRWfNxAhQXzInOLCgtv8.jpg",
+alt="CSP violation reports in the Chrome developer console.", width="800", height="235" %}
+
+In most cases, the fix is straightforward:
+
+#### To refactor inline event handlers, rewrite them to be added from a JavaScript block
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<span onclick="doThings();">A thing.</span>
+```
+
+{% CompareCaption %}
+CSP will block inline event handlers.
+{% endCompareCaption%}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<span id="things">A thing.</span>
+<script nonce="${nonce}">
+  document.getElementById('things')
+          .addEventListener('click', doThings);
+</script>
+```
+
+{% CompareCaption %}
+CSP will allow event handlers that are registered via JavaScript.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+#### For `javascript:` URIs, you can use a similar pattern
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<a href="javascript:linkClicked()">foo</a>
+```
+
+{% CompareCaption %}
+CSP will block javascript: URIs.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<a id="foo">foo</a>
+<script nonce="${nonce}">
+  document.getElementById('foo')
+          .addEventListener('click', linkClicked);
+</script>
+```
+
+{% CompareCaption %}
+CSP will allow event handlers that are registered via JavaScript.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+#### Use of `eval()` in JavaScript
+
+If your application uses `eval()` to convert JSON string serializations into JS
+objects, you should refactor such instances to `JSON.parse()`, which is also
+[faster](https://v8.dev/blog/cost-of-javascript-2019#json).
+
+If you cannot remove all uses of `eval()`, you can still set a strict
+nonce-based CSP, but you will have to use the `'unsafe-eval'` CSP keyword which
+will make your policy slightly less secure.
+
+You can find these and more examples of such refactoring in this strict CSP
+Codelab:
+{% Glitch {
+  id: 'strict-csp-codelab',
+  path: 'demo/solution_nonce_csp.html',
+  highlights: '14,20,28,39,40,41,42,43,44,45,54,55,56,57,58,59,60',
+  previewSize: 35,
+  allow: []
+} %}
+
+### Step 4 (Optional):  Add fallbacks to support old browser versions
+
+{% Aside 'caution' %}
+Strict CSP (in particular the `'strict-dynamic'` keyword) is supported by all
+browser enigines, so there is no need to add fallbacks to your CSP unless you
+need to support users on outdated browser versions (see version details below).
+While setting fallbacks doesn't reduce the security of your policy in modern 
+browsers, they can lead to confusion as many developers are not familar with 
+the complex CSP fallback mechanisms. 
+{% endAside %}
+
+{% BrowserCompat 'http.headers.Content-Security-Policy.strict-dynamic' %}
+
+If you need to support browser versions older than the one listed above:
+
+- Using `'strict-dynamic'` requires adding `https:` as a fallback for old
+  versions of Safari. By doing so:
+  - All browsers that support `'strict-dynamic'` will ignore the `https:`
+    fallback, so this won't reduce the strength of the policy.
+  - In old browser, externally sourced scripts will be allowed to load only if
+     they come from an HTTPS origin. This is less secure than a strict CSP–it's
+     a fallback–but would still prevent certain common XSS causes like injections
+     of `javascript:` URIs because `'unsafe-inline'` is not present or ignored
+     in presence of a hash or nonce.
+
+- To ensure compatibility with very old browser versions (4+ years), you can add
+  `'unsafe-inline'` as a fallback. All recent browsers will ignore
+  `'unsafe-inline'` if a CSP nonce or hash is present.
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{random}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside %}
+`https:` and `unsafe-inline` don't make your policy less safe
+because they will be ignored by all modern browsers which support
+`strict-dynamic`.
+{% endAside %}
+
+### Step 5:  Deploy your CSP
+
+After confirming that no legitimate scripts are being blocked by CSP in your
+local development environment, you can proceed with deploying your CSP to your
+(staging, then) production environment:
+
+1. (Optional) Deploy your CSP in report-only mode using the
+   `Content-Security-Policy-Report-Only` header. Learn more about the [Reporting
+   API](/reporting-api).
+   Report-only mode is handy to test a potentially breaking change like a new
+   CSP in production, before actually enforcing CSP restrictions. In report-only
+   mode, your CSP does not affect the behavior of your application (nothing will
+   actually break). But the browser will still generate console errors and
+   violation reports when patterns incompatible with CSP are encountered (so you
+   can see what would have broken for your end-users).
+2. Once you're confident that your CSP won't induce breakage for your end-users,
+   deploy your CSP using the `Content-Security-Policy` response header. **Only
+   once you've completed this step, will CSP begin to protect your application
+   from XSS**. Setting your CSP via a HTTP header server-side is more secure
+   than setting it as a `<meta>` tag; use a header if you can.
+
+{% Aside 'gotchas' %}
+Make sure that the CSP you're using is "strict" by
+checking it with the [CSP Evaluator](https://csp-evaluator.withgoogle.com) or
+Lighthouse. This is very important, as even small changes to a policy can
+significantly reduce its security.
+{% endAside %}
+
+{% Aside 'caution' %}
+When enabling CSP for production traffic, you may see some
+noise in the CSP violation reports due to browser extensions and malware.
+{% endAside %}
+
+## Limitations
+
+Generally speaking, a strict CSP provides a strong added layer of security that
+helps to mitigate XSS. In most cases, CSP reduces the attack surface
+significantly (dangerous patterns like `javascript:` URIs are completely turned
+off). However, based on the type of CSP you're using (nonces, hashes, with or
+without `'strict-dynamic'`), there are cases where CSP doesn't protect:
+
+- If you nonce a script, but there's an injection directly into the body or into
+  the `src` parameter of that `<script>` element.
+- If there are injections into the locations of dynamically created scripts
+  (`document.createElement('script')`), including into any library functions
+  which create `script` DOM nodes based on the value of their arguments. This
+  includes some common APIs such as jQuery's `.html()`, as well as `.get()` and
+  `.post()` in jQuery < 3.0.
+- If there are template injections in old AngularJS applications. An attacker
+  who can inject an AngularJS template can use it to [execute arbitrary
+  JavaScript](https://sites.google.com/site/bughunteruniversity/nonvuln/angularjs-expression-sandbox-bypass).
+- If the policy contains `'unsafe-eval'`, injections into `eval()`,
+  `setTimeout()` and a few other rarely used APIs.
+
+Developers and security engineers should pay particular attention to such
+patterns during code reviews and security audits. You can find more details on
+the cases described above in [this CSP
+presentation](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf#page=27).
+
+{% Aside %}
+Trusted Types complements strict CSP very well and can efficiently
+protect against some of the limitations listed above. Learn more about [how to
+use Trusted Types at web.dev](/trusted-types).
+{% endAside %}
+
+## Further reading
+
+- [CSP Is Dead, Long Live CSP! On the Insecurity of Whitelists and the Future of
+  Content Security Policy](https://research.google/pubs/pub45542/)
+- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)
+- [LocoMoco Conference: Content Security Policy - A successful mess between
+  hardening and
+  mitigation](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf)
+- [Google I/O talk: Securing Web Apps with Modern Platform
+  Features](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)
diff --git a/src/site/content/en/blog/structured-clone/index.md b/src/site/content/en/blog/structured-clone/index.md
new file mode 100644
index 00000000000..69e6bd3978c
--- /dev/null
+++ b/src/site/content/en/blog/structured-clone/index.md
@@ -0,0 +1,122 @@
+---
+layout: post
+title: Deep-copying in JavaScript using structuredClone
+authors:
+  - surma
+hero: image/i9nJGvw3SnTPH63zKOYWtI6cP5m2/e1QXRf64ylK8blZ45H1X.jpeg
+alt: Clones. Lots of clones.
+subhead: The Platform now ships with structuredClone(), a built-in function for deep-copying.
+description: >
+  For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with `structuredClone()`, a built-in function for deep-copying.
+date: 2021-12-16
+updated: 2022-07-25
+is_baseline: true
+tags:
+  - performance
+  - blog
+---
+
+For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with `structuredClone()`, a built-in function for deep-copying.
+
+{% BrowserCompat 'api.structuredClone' %}
+
+## Shallow copies
+
+Copying a value in JavaScript is almost always _shallow_, as opposed to _deep_.  That means that changes to deeply nested values will be visible in the copy as well as the original. 
+
+One way to create a shallow copy in JavaScript using the [object spread operator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax) `...`:
+
+```js
+const myOriginal = {
+  someProp: "with a string value",
+  anotherProp: {
+    withAnotherProp: 1,
+    andAnotherProp: true
+  }
+};
+
+const myShallowCopy = {...myOriginal};
+```
+
+Adding or changing a property directly on the shallow copy will only affect the copy, not the original:
+
+```js
+myShallowCopy.aNewProp = "a new value";
+console.log(myOriginal.aNewProp)
+// ^ logs `undefined`
+```
+
+However, adding or changing a deeply nested property affects _both_ the copy and the original:
+
+```js
+myShallowCopy.anotherProp.aNewProp = "a new value";
+console.log(myOriginal.anotherProp.aNewProp) 
+// ^ logs `a new value`
+```
+
+The expression `{...myOriginal}` iterates over the (enumerable) properties of `myOriginal` using the [Spread Operator]. It uses the property name and value, and assigns them one by one to a freshly created, empty object. As such, the resulting object is identical in shape, but with its own copy of the list of properties and values. The values are copied, too, but so-called primitive values are handled differently by the JavaScript value than non-primitive values. To quote [MDN][MDN Primitive]:
+
+{% Blockquote 'MDN — Primitive' %}
+In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are seven primitive data types: string, number, bigint, boolean, undefined, symbol, and null.
+{% endBlockquote %}
+
+Non-primitive values are handled as _references_, meaning that the act of copying the value is really just copying a reference to the same underlying object, resulting in the shallow copy behavior.
+
+## Deep copies
+
+The opposite of a shallow copy is a deep copy. A deep copy algorithm also copies an object’s properties one by one, but invokes itself recursively when it finds a reference to another object, creating a copy of that object as well. This can be very important to make sure that two pieces of code don’t accidentally share an object and unknowingly manipulate each others’ state. 
+
+There used to be no easy or nice way to create a deep-copy of a value in JavaScript. Many people relied on third-party libraries like [Lodash’s `cloneDeep()`][lodash clonedeep]  function. Arguably the most common solution to this problem was a JSON-based hack:
+
+```js
+const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));
+``` 
+
+In fact, this was such a popular workaround, that [V8 aggressively optimized][V8 JSON] `JSON.parse()` and specifically the pattern above to make it as fast as possible. And while it is fast, it comes with a couple of shortcomings and tripwires:
+
+- **Recursive data structures**: `JSON.stringify()` will throw when you give it a recursive data structure. This can happen quite easily when working with linked lists or trees.
+- **Built-in types**: `JSON.stringify()` will throw if the value contains other JS built-ins like `Map`, `Set`, `Date`, `RegExp` or `ArrayBuffer`.
+- **Functions**: `JSON.stringify()` will quietly discard functions.
+
+## Structured cloning
+
+The platform already needed the ability to create deep copies of JavaScript values in a couple of places: Storing a JS value in IndexedDB requires some form of serialization so it can be stored on disk and later deserialized to restore the JS value. Similarly, sending messages to a WebWorker via `postMessage()` requires transferring a JS value from one JS realm to another. The algorithm that is used for this is called “Structured Clone”, and until recently, wasn’t easily accessible to developers.
+
+That has now changed! The HTML spec was amended to expose a function called `structuredClone()` that runs exactly that algorithm as a means for developers to easily create deep copies of JavaScript values.
+
+```js
+const myDeepCopy = structuredClone(myOriginal);
+```
+
+That’s it! That’s the entire API. If you want to dive deeper into the details, take a look at the [MDN article][mdn structuredclone].
+
+### Features and limitations
+
+Structured cloning addresses many (although not all) shortcomings of the `JSON.stringify()` technique. Structured cloning can handle cyclical data structures, support many built-in data types and is generally more robust and often faster.
+
+However, it still has some limitations that may catch you off-guard:
+ 
+- **Prototypes**: If you use `structuredClone()` with a class instance, you’ll get a plain object as the return
+value, as structured cloning discards the object’s prototype chain. 
+- **Functions**: If your object contains functions, they will be _quietly_ discarded.
+- **Non-cloneables**: Some values are not structured cloneable, most notably `Error` and DOM nodes. It
+will cause `structuredClone()` to throw.
+ 
+If any of these limitations are a deal-breaker for your use-case, libraries like Lodash still provide custom implementations of other deep-cloning algorithms that may or may not fit your use-case.
+
+### Performance
+
+While I haven’t done a new micro-benchmark comparison, [I did a comparison in early 2018][surma blog], before `structuredClone()` was exposed. Back then, `JSON.parse()` was the fastest option for very small objects. I expect that to remain the same. Techniques that relied on structured cloning were (significantly) faster for bigger objects. Considering that the new `structuredClone()` comes without the overhead of abusing other APIs and is more robust  than `JSON.parse()`, I recommend you make it your default approach for creating deep copies.
+ 
+## Conclusion
+
+If you need to create a deep-copy of a value in JS—maybe that be because you use immutable data structures or you want to make sure a function can manipulate an object without affecting the original—you no longer need to reach for workarounds or libraries. The JS ecosystem now has [`structuredClone()`][mdn structuredclone]. Huzzah.
+ 
+[Spread Operator]:
+https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+[MDN Primitive]: https://developer.mozilla.org/docs/Glossary/Primitive
+[V8 JSON]: https://v8.dev/blog/cost-of-javascript-2019#json
+[pushState]: https://developer.mozilla.org/docs/Web/API/History/pushState
+[surma blog]: https://surma.dev/things/deep-copy/index.html
+[lodash clonedeep]: https://lodash.com/docs/#cloneDeep
+[mdn structuredclone]: https://developer.mozilla.org/docs/Web/API/structuredClone
diff --git a/src/site/content/en/blog/submit-your-proposals-for-interop-2023/index.md b/src/site/content/en/blog/submit-your-proposals-for-interop-2023/index.md
new file mode 100644
index 00000000000..b0b697a197b
--- /dev/null
+++ b/src/site/content/en/blog/submit-your-proposals-for-interop-2023/index.md
@@ -0,0 +1,37 @@
+---
+layout: post
+title: "Submit your proposals for Interop 2023"
+subhead:
+    "We are thrilled at the progress of Interop 2022 that we’ve made together and are excited to announce that Interop 2023 is happening!"
+description:
+    "Learn more about how to submit a proposal for Interop 2023."
+authors:
+  - rachelandrew
+  - robertnyman
+  - foolip
+hero: "image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/ZZjlTqQijYN8FocvisWC.jpg"
+alt: "A picture of three post-its and a marker pen."
+date: 2022-09-21
+tags:
+  - blog
+  - css
+---
+
+The Chrome team has worked with other browser vendors and partners in the ecosystem to help improve browser compatibility since 2019, starting with the [MDN Developer Needs Assessment](https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2019.html) survey and most recently on [Interop 2022](/interop-2022/). For Interop 2022, all major browser vendors and other stakeholders worked together to improve top browser compatibility issues identified by web developers. We are thrilled at [the progress that we’ve made together](https://wpt.fyi/interop-2022) and are excited to announce Interop 2023 is happening!
+
+<figure>
+  {% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/8ryQRYl1NBObumG4IA97.png", alt="Showing three circles with scores: 71 for Chrome Dev and Edge Dev, 74 for Firefox Nightly, and 73 for Safari Technology Preview.", width="800", height="375" %}
+  <figcaption>March 2022.</figcaption>
+</figure>
+
+
+
+
+<figure>
+  {% Img src="image/RYmV5NPuMZRoF3PVwIXTUpdYeQ23/8fXDfdtPWAh2xMF6iiYT.png", alt="Showing three circles with scores: 80 for Chrome Dev and Edge Dev, 82 for Firefox Nightly, and 86 for Safari Technology Preview.", width="800", height="501" %}
+  <figcaption>September 2022.</figcaption>
+</figure>
+
+The Interop 2023 proposal process is now open for submissions. Suggestions can include features that behave differently across browsers, or features that are not yet implemented in all browsers. Keep in mind that proposals with high quality specifications and web platform tests are more likely to be included, as this project is about reaching interoperability rather than specifying new features. [The proposal submission process](https://github.com/web-platform-tests/interop/issues/new?template=focus-area-proposal.yml) ends October 15, 2022.
+
+Once the proposal period ends, the [collected submissions](https://github.com/web-platform-tests/interop/issues?q=is%3Aissue+is%3Aopen+label%3Afocus-area-proposal) will be discussed by browser vendors and other partners to determine the final list.  It’s likely that there will be more proposals than can be achieved during 2023, so some high quality proposals may not be selected. We are looking forward to reviewing all the submissions, and we’ll post the final list here once Interop 2023 gets underway.
diff --git a/src/site/content/en/blog/subsonic/index.md b/src/site/content/en/blog/subsonic/index.md
new file mode 100644
index 00000000000..fda89b303a4
--- /dev/null
+++ b/src/site/content/en/blog/subsonic/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Case Study - SONAR, HTML5 Game Development
+authors:
+  - seanmiddleditch
+date: 2012-07-25
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+Last summer I worked as the technical lead on a commercial WebGL game called [SONAR](https://chrome.google.com/webstore/detail/bnnkhdiodblfknjkjcifnpcmbkckmiaf). The project took around three months to complete, and was done completely from scratch in JavaScript. During the development of SONAR, we had to find innovative solutions to a number of problems in the new and untested HTML5 waters. In particular, we needed a solution to a seemingly simple problem: how do we download and cache 70+ MB of game data when the player starts the game?
+
+Other platforms have ready-made solutions for this problem. Most consoles and PC games load resources off of a local CD/DVD or from a hard-drive. Flash can package all resources as part of the SWF file that contains the game, and Java can do the same with JAR files. Digital distribution platforms like Steam or the App Store ensure that all resources are downloaded and installed before the player can even start the game.
+
+HTML5 doesn'’'t give us these mechanisms, but it does give us all of the tools we need to build our own game resource download system. The upside to building our own system is that we get all the control and flexibility we need, and can build a system that exactly matches our needs.
+
+## Retrieval
+
+Before we had resource caching at all we had a simple chained resource loader.  This system allowed us to request individual resources by relative path, which could in turn request more resources.  Our loading screen presented a simple progress meter that gauged how much more data needed to be loaded, and transitioned to the next screen only after the resource loader queue was empty.
+
+The design of this system allowed us to easily switch between packaged resources and loose (unpackaged) resources served over a local HTTP server, which was really instrumental in ensuring that we could rapidly iterate on both game code and data.
+
+The following code illustrates the basic design of our chained resource loader, with error handling and the more advanced XHR/image loading code removed to keep things readable.
+
+```js
+function ResourceLoader() {
+  this.pending = 0;
+  this.baseurl = './';
+  this.oncomplete = function() {};
+}
+
+ResourceLoader.prototype.request = function(path, callback) {
+  var xhr = new XmlHttpRequest();
+  xhr.open('GET', this.baseurl + path);
+  var self = this;
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      callback(path, xhr.response, self);
+
+      if (--self.pending == 0) {
+        self.oncomplete();
+      }
+    }
+  };
+
+  xhr.send();
+};
+```
+
+The usage of this interface is pretty simple but also quite flexible. The initial game code can request some data files that describe the initial game level and game objects. These might be simple JSON files, for instance. The callback used for these files then inspect that data and can make additional requests (chained requests) for dependencies. The game objects definition file might list models and materials, and the callback for materials might then request texture images.
+
+The `oncomplete` callback attached to the main `ResourceLoader` instance will only be called after all resources are loaded. The game loading screen can just wait for that callback to be invoked before transitioning to the next screen.
+
+Quite a bit more can be done with this interface, of course. As exercises for the reader, a few additional features that are worth investigating are adding progress/percentage support, adding image loading (using the Image type), adding automatic parsing of JSON files, and of course, error handling.
+
+The most important feature for this article is the baseurl field, which allows us to easily switch the source of files we request. It's easy to set up the core engine to allow a `?uselocal` type of query parameter in the URL to request resources from a URL served by the same local Web server (like `python -m SimpleHTTPServer`) that served the main HTML document for the game, while using the cache system if the parameter is not set.
+
+## Packaging Resources
+
+One problem with chained loading of resources is that there's no way to get a complete byte count of all the data. The consequence of this is that there's no way to make a simple, reliable progress dialog for downloads. Since we're going to be downloading all the content and caching it, and this can take a rather long time for larger games, giving the player a nice progress dialog is pretty important.
+
+The easiest fix for this problem (which also gives us a few other nice advantages) is to package all the resource files into a single bundle, which we'll download with a single XHR call, which gives us the progress events we need to display a nice progress bar.
+
+Building a custom bundle file format is not terribly hard, and would even solve a few problems, but would require creating a tool for creating the bundle format. An alternative solution is to use an existing archive format for which tools already exist, and then need to write a decoder to run in the browser. We don't need a compressed archive format because HTTP can already compress data using gzip or deflate algorithms just fine. For these reasons, we settled on the TAR file format.
+
+TAR is a relatively simple format. Every record (file) has a 512 byte header, followed by the file contents padded out to 512 bytes. The header has only a few relevant or interesting fields for our purposes, mainly the file type and name, which are stored at fixed positions within the header.
+
+Header fields in the TAR format are stored at fixed locations with fixed sizes in the header block. For example, the last modification timestamp of the file is stored at 136 bytes from the start of the header, and is 12 bytes long. All numeric fields are encoded as octal numbers stored in ASCII format. To parse the fields, then, we extract the fields from our array buffer, and for numeric fields we call `parseInt()` being sure to pass in the second parameter to indicate the desired octal base.
+
+One of the most important fields is the type field. This is a single digit octal number which tells us what type of file the record contains. The only two interesting record types for our purposes are regular files (`'0'`) and directories (`'5'`). If we were dealing with arbitrary TAR files we might also care about symbolic links (`'2'`) and possibly hard links (`'1'`).
+
+Each header is followed immediately by the contents of the file described by the header (excepting file types that have no contents of their own, like directories). The file contents are then followed by padding to ensure that every header begins on a 512-byte boundary. Thus, to calculate the total length of a file record in a TAR file, we first must read the header for the file. We then add the length of the header (512 bytes) with the length of the file contents extracted from the header. Finally, we add any padding bytes necessary to make the offset align to 512 bytes, which can be done easily by dividing the file length by 512, taking the ceiling of the number, and then multiplying by 512.
+
+```js
+// Read a string out of an array buffer with a maximum string length of 'len'.
+// state is an object containing two fields: the array buffer in 'buffer' and
+// the current input index in 'index'.
+function readString (state, len) {
+  var str = '';
+
+  // We read out the characters one by one from the array buffer view.
+  // this actually is a lot faster than it looks, at least on Chrome.
+  for (var i = state.index, e = state.index + len; i != e; ++i) {
+    var c = state.buffer[i];
+
+    if (c == 0) { // at NUL byte, there's no more string
+      break;
+    }
+
+    str += String.fromCharCode(c);
+  }
+
+  state.index += len;
+
+  return str;
+}
+
+// Read the next file header out of a tar file stored in an array buffer.
+// state is an object containing two fields: the array buffer in 'buffer' and
+// the current input index in 'index'.
+function readTarHeader (state) {
+  // The offset of the file this header describes is always 512 bytes from
+  // the start of the header
+  var offset = state.index + 512;
+
+  // The header is made up of several fields at fixed offsets within the
+  // 512 byte block allocated for the header.  fields have a fixed length.
+  // all numeric fields are stored as octal numbers encoded as ASCII
+  // strings.
+  var name = readString(state, 100);
+  var mode = parseInt(readString(state, 8), 8);
+  var uid = parseInt(readString(state, 8), 8);
+  var gid = parseInt(readString(state, 8), 8);
+  var size = parseInt(readString(state, 12), 8);
+  var modified = parseInt(readString(state, 12), 8);
+  var crc = parseInt(readString(state, 8), 8);
+  var type = parseInt(readString(state, 1), 8);
+  var link = readString(state, 100);
+
+  // The header is followed by the file contents, then followed
+  // by padding to ensure that the next header is on a 512-byte
+  // boundary.  advanced the input state index to the next
+  // header.
+  state.index = offset + Math.ceil(size / 512) * 512;
+
+  // Return the descriptor with the relevant fields we care about
+  return {
+    name : name,
+    size : size,
+    type : type,
+    offset : offset
+  };
+};
+```
+
+I looked around for existing TAR readers, and found a few, but none that did not have other dependencies or which would easily fit into our existing codebase. For this reason, I chose to write my own. I also took the time to optimize the loading as best as possible, and ensure that the decoder easily handles both binary and string data within the archive.
+
+One of the first problems I had to solve was how to actually get the data loaded from an XHR request. I originally started with a "binary string" approach. Unfortunately, converting from binary strings to more readily usable binary forms like an `ArrayBuffer` is not straightforward, nor are such conversions particularly quick. Converting to `Image` objects is equally painful.
+
+I settled on loading the TAR files as an `ArrayBuffer` directly from the XHR request and adding a small convenience function for converting chunks from the `ArrayBuffer` to a string. Currently my code only handles basic ANSI/8-bit characters, but this can be fixed once a more convenient conversion API is available in browsers.
+
+The code simply scans over the `ArrayBuffer` parsing out record headers, which includes all of the relevant TAR header fields (and a few not-so-relevant ones) as well as the location and size of the file data within the `ArrayBuffer`. The code can also optionally extract the data as an `ArrayBuffer` view and store that in the returned record headers list.
+
+The code is freely available under a friendly, permissive Open Source license at [https://github.com/subsonicllc/TarReader.js](https://github.com/subsonicllc/TarReader.js).
+
+## FileSystem API
+
+For actually storing file contents and accessing them later, we used the FileSystem API. The API is quite new but already has some great documentation, including the excellent [HTML5 Rocks FileSystem article](https://www.html5rocks.com/tutorials/file/filesystem/).
+
+The FileSystem API is not without its caveats. For one thing, its an event-driven interface; this both makes the API non-blocking which is great for UI but also makes it a pain to use. [Using the FileSystem API from a WebWorker](https://www.html5rocks.com/tutorials/file/filesystem-sync/) can alleviate this problem, but that would require splitting the entire downloading and unpacking system into a WebWorker. That might even be the best approach, but it's not the one I went with due to time constraints (I was not familiar with WorkWorkers yet), so I had to deal with the asynchronous event-driven nature of the API.
+
+Our needs are mostly focused on writing out files into a directory structure. This requires a series of steps for each file. First, we need to take the file path and turn it into a list, which is easily done by splitting the path string on the path separator character (which is always the forward-slash, like URLs). Then we need to iterate over each element in the resulting list save for the last, recursively creating a directory (if necessary) in the local filesystem. Then we can create the file, and then create a `FileWriter`, and finally write out the file contents.
+
+A second important thing to take into account is the file size limit of the FileSystem API's `PERSISTENT` storage. We wanted persistent storage because the temporary storage can be cleared at any time, including while the user is in the middle of playing our game right before it tries to load the evicted file.
+
+For apps targeting the Chrome Web Store, there are no storage limits when using the `unlimitedStorage` permission in the application's manifest file. However, regular web apps can still request space with the experimental quota request interface.
+
+```js
+function allocateStorage(space_in_bytes, success, error) {
+  webkitStorageInfo.requestQuota(
+    webkitStorageInfo.PERSISTENT,
+    space_in_bytes,
+    function() {
+      webkitRequestFileSystem(PERSISTENT, space_in_bytes, success, error);      
+    },
+    error
+  );
+}
+```
\ No newline at end of file
diff --git a/src/site/content/en/blog/sunlight-streamcongress/index.md b/src/site/content/en/blog/sunlight-streamcongress/index.md
new file mode 100644
index 00000000000..eb6affcd010
--- /dev/null
+++ b/src/site/content/en/blog/sunlight-streamcongress/index.md
@@ -0,0 +1,162 @@
+---
+layout: post
+title: Case Study - Real-time Updates in Stream Congress
+authors:
+  - luigimontanez
+date: 2011-03-17
+tags:
+  - blog
+  - case-study
+---
+
+## Introduction
+
+Through [WebSockets](http://www.html5rocks.com/tutorials/websockets/basics/) and [EventSource](http://www.html5rocks.com/tutorials/eventsource/basics/), HTML5 enables developers to build web apps that communicate in real time with a server. [Stream Congress](http://streamcongress.com) (available in the [Chrome Web Store](https://chrome.google.com/webstore/detail/ahebmhmbjonbglfkghfennmigkcmpbjp)) provides live updates about the workings of the United States Congress. It streams floor updates from both the House and Senate, relevant news updates, tweets from members of Congress, and other social media updates. The app is meant to be left open all day as it captures the business of Congress.
+
+## Starting with WebSockets
+
+The WebSockets spec has gotten quite a bit of attention for what it enables: a stable, bi-directional [TCP socket](http://www.csc.villanova.edu/~mdamian/Sockets/TcpSockets.htm) between the browser and server. There is no data format imposed on the TCP socket; the developer is free to define a messaging protocol. In practice, passing JSON objects around as strings is most convenient. The client-side JavaScript code to listen for live updates is clean and simple:
+
+```js
+var liveSocket = new WebSocket("ws://streamcongress.com:8080/live");
+
+liveSocket.onmessage = function (payload) {
+  addToStream(JSON.parse(payload.data).reverse());
+};
+```
+
+While browser support for WebSockets is straightforward, server-side support is still in the formative stage. [Socket.IO](http://socket.io/) on Node.js provides one of the most mature and robust server-side solutions. An event-driven server like Node.js is the right fit for WebSockets. For alternative implementations, Python developers can use [Twisted](http://twistedmatrix.com/trac/) and [Tornado](http://www.tornadoweb.org/), while Ruby developers have [EventMachine](http://rubyeventmachine.com/).
+
+### Introducing Cramp
+
+[Cramp](https://github.com/lifo/cramp) is an asynchronous Ruby web framework that runs on top of EventMachine. It's written by [Pratik Naik](http://m.onkey.org/), a member of the Ruby on Rails core team. Providing a domain specific language (DSL) for real-time web apps, Cramp is an ideal choice for Ruby web developers. Those familiar with writing controllers in Ruby on Rails will recognize Cramp's style:
+
+```ruby
+require "rubygems"
+require "bundler"
+Bundler.require
+require 'cramp'
+require 'http_router'
+require 'active_support/json'
+require 'thin'
+
+Cramp::Websocket.backend = :thin
+
+class LiveSocket < Cramp::Websocket
+periodic_timer :check_activities, :every => 15
+
+def check_activities
+    @latest_activity ||= nil
+    new_activities = find_activities_since(@latest_activity)
+    @latest_activity = new_activities.first unless new_activities.empty?
+    render new_activities.to_json
+end
+end
+
+routes = HttpRouter.new do
+add('/live').to(LiveSocket)
+end
+run routes
+```
+
+Because Cramp sits on top of the non-blocking EventMachine, there are several considerations to keep in mind:
+
+- Non-blocking database drivers must be used, like [MySQLPlus](https://github.com/oldmoe/mysqlplus) and [em-mongo](https://github.com/bcg/em-mongo). 
+- Event-driven web servers must be used. Support is built in for [Thin](http://code.macournoyer.com/thin/) and [Rainbows](http://rainbows.rubyforge.org/).
+- The Cramp app must be run separately from the main Rails app that powers Stream Congress, restarted and monitored independently.
+
+### Current Limitations
+
+WebSockets suffered a setback on December 8, 2010 when a security vulnerability was publicized. Both [Firefox and Opera](http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/) removed browser support for WebSockets. While no pure JavaScript polyfill exists, there is a [Flash fallback](https://github.com/gimite/web-socket-js/) that has been widely adopted. However, relying on Flash is far from ideal. Even though Chrome and Safari continue to support WebSockets, it became clear that to support all modern browsers without relying on Flash, WebSockets would need to be replaced.
+
+## Rolling back to AJAX polling
+
+The decision was made to move away from WebSockets and back to "old-school" AJAX polling. While much less efficient from a disk and network I/O perspective, AJAX polling simplified the technical implementation of Stream Congress. Most significantly, the need for a separate Cramp app was eliminated. The AJAX endpoint was instead provided by the Rails app. The client-side code was modified to support jQuery AJAX polling:
+
+```js
+var fillStream = function(mostRecentActivity) {
+  $.getJSON(requestURL, function(data) {
+    addToStream(data.reverse());
+
+    setTimeout(function() {
+      fillStream(recentActivities.last());
+    }, 15000);
+  });
+};
+
+AJAX polling, though, is not without its downsides. Relying on the HTTP request/response cycle means that the server sees constant load even when there aren't any new updates. And of course, AJAX polling doesn't take advantage of what HTML5 has to offer.
+
+## EventSource: The right tool for the job
+
+Up to this point, a key factor was ignored about the nature of Stream Congress: the app only needs to stream updates one way, from server to client - downstream. It didn't need to be real-time, upstream client-to-server communication. 
+
+In this sense, WebSockets is overkill for Stream Congress. Server-to-client communication is so common that it's been given a general term: push. In fact, many existing solutions for WebSockets, from the hosted [PusherApp](http://pusherapp.com) to the Rails library [Socky](https://github.com/socky), optimize for push and don't support client-to-server communication at all.
+
+Enter EventSource, also called Server-Sent Events. The specification compares favorably to WebSockets in the context to server to client push:
+
+- A similar, simple JavaScript API on the browser side.
+- The open connection is HTTP-based, not dropping to the low level of TCP.
+- Automatic reconnection when the connection is closed.
+
+### Going Back to Cramp
+
+In recent months, Cramp has added support for EventSource. The code is very similar to the WebSockets implementation:
+
+```ruby
+class LiveEvents < Cramp::Action
+self.transport = :sse
+
+periodic_timer :latest, :every => 15
+
+def latest
+@latest_activity ||= nil
+new_activities = find_activities_since(@latest_activity)
+@latest_activity = new_activities.first unless new_activities.empty?
+render new_activities.to_json
+end
+end
+
+routes = HttpRouter.new do
+add('/').to(LiveEvents)
+end
+run routes
+```
+
+A significant issue to keep in mind with EventSource is that cross-domain connections are not allowed. This means that the Cramp app must be served from the same streamcongress.com domain as the main Rails app. This can be accomplished with proxying at the web server. Assuming the Cramp app is powered by Thin and running on port 8000, the Apache configuration looks like so:
+
+```apacheconf
+LoadModule  proxy_module             /usr/lib/apache2/modules/mod_proxy.so
+LoadModule  proxy_http_module        /usr/lib/apache2/modules/mod_proxy_http.so
+LoadModule  proxy_balancer_module    /usr/lib/apache2/modules/mod_proxy_balancer.so
+
+<VirtualHost *:80>
+  ServerName streamcongress.com
+  DocumentRoot /projects/streamcongress/www/current/public
+  RailsEnv production
+  RackEnv production
+
+  <Directory /projects/streamcongress/www/current/public>
+    Order allow,deny
+    Allow from all
+    Options -MultiViews
+  </Directory>
+
+  <Proxy balancer://thin>
+    BalancerMember http://localhost:8000
+  </Proxy>
+
+  ProxyPass /live balancer://thin/
+  ProxyPassReverse /live balancer://thin/
+  ProxyPreserveHost on
+</VirtualHost>
+```
+
+This configuration sets an EventSource endpoint at `streamcongress.com/live`.
+
+### Stable Polyfill
+
+One of the most significant advantages of EventSource over WebSockets is that fallback is completely JavaScript-based, with no dependence on Flash. Remy Sharp's [polyfill](https://github.com/remy/polyfills) accomplishes this by implementing long-polling in browsers that don't support EventSource natively. Thus, EventSource works today on all modern browsers with JavaScript enabled.
+
+## Conclusion
+
+HTML5 opens the door to many new and exciting web development possibilities. With WebSockets and EventSource, web developers now have clean, well-defined standards to enable real-time web apps. But not all users run modern browsers. Graceful degradation must be considered when choosing to implement these technologies. And tooling on the server side for WebSockets and EventSource is still in the early stages. It's important to keep these factors in mind when developing real-time HTML5 apps.
diff --git a/src/site/content/en/blog/supercharging-your-gruntfile/index.md b/src/site/content/en/blog/supercharging-your-gruntfile/index.md
new file mode 100644
index 00000000000..94f9697bdde
--- /dev/null
+++ b/src/site/content/en/blog/supercharging-your-gruntfile/index.md
@@ -0,0 +1,322 @@
+---
+layout: post
+title: Supercharging your gruntfile
+subhead: How to squeeze the most out of your build configuration
+authors:
+  - pbakaus
+date: 2014-02-13
+tags:
+  - blog
+---
+
+## Introduction
+
+If the Grunt world is new to you, an ideal place to start is Chris Coyier’s excellent article “[Grunt for People Who Think Things Like Grunt are Weird and Hard](http://24ways.org/2013/grunt-is-not-weird-and-hard/)”. After Chris’ introduction, you will have set up your own Grunt project and have tasted a slice of the power Grunt offers.
+
+In this article, we won’t focus on what numerous Grunt plugins do to your actual project code, but on the Grunt build process itself. We will give you practical ideas on:
+
+- How to keep your Gruntfile neat and tidy,
+- How to dramatically improve your build time,
+- And how to be notified when a build happens.
+
+Time for a quick disclaimer: Grunt is just one of many tools you could use to accomplish the task. If Gulp is more your style, great! If after surveying the options out there, you’d still like to build your own toolchain, that’s ok too!  We chose to focus on Grunt for this article due to its strong ecosystem and long-standing user base.
+
+## Organizing your Gruntfile
+
+Whether you include a lot of Grunt plugins or have to write a lot of manual tasks in your Gruntfile, it can quickly become very unwieldy and hard to maintain. Fortunately, there are quite a few plugins that focus on exactly that problem: Making your Gruntfile neat and tidy again.
+
+### The Gruntfile, before optimization
+
+Here is how our Gruntfile looks like before we’ve done any optimization on it:
+
+```js
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    concat: {
+      dist: {
+        src: ['src/js/jquery.js','src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'],
+        dest: 'dist/build.js',
+      }
+    },
+    uglify: {
+      dist: {
+        files: {
+          'dist/build.min.js': ['dist/build.js']
+        }
+      }
+    },
+    imagemin: {
+      options: {
+        cache: false
+      },
+
+      dist: {
+        files: [{
+          expand: true,
+          cwd: 'src/',
+          src: ['**/*.{png,jpg,gif}'],
+          dest: 'dist/'
+        }]
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-imagemin');
+
+  grunt.registerTask('default', ['concat', 'uglify', 'imagemin']);
+
+};
+```
+
+If now you’re saying “Hey! I was expecting much worse! That is actually maintainable!”, you’re probably right. For the sake of simplicity, we’ve only included three plugins without much customization. Using an actual production Gruntfile building a moderately sized project would require infinite scrolling in this article. So let’s see what we can do!
+
+### Autoload your Grunt plugins
+
+{% Aside %}
+Hint: load-grunt-config includes load-grunt-tasks, so if you don’t want to learn about what it does in detail and skip this block, it won’t hurt my feelings.
+{% endAside %}
+
+When adding a new Grunt plugin you want to use to your project, you will have to add it both to your __package.json__ file as an npm dependency and then load it within the Gruntfile. For the plugin “__grunt-contrib-concat__”, that might look like the following:
+
+```js
+// tell Grunt to load that plugin
+grunt.loadNpmTasks('grunt-contrib-concat');
+```
+
+If you now uninstall the plugin via npm and update your package.json, but forget to update your Gruntfile, your build will break. This is where the nifty plugin [load-grunt-tasks](https://npmjs.org/package/load-grunt-tasks) comes to help.
+
+While before, we’ve had to manually load our Grunt plugins, like so:
+
+```js
+grunt.loadNpmTasks('grunt-contrib-concat');
+grunt.loadNpmTasks('grunt-contrib-uglify');
+grunt.loadNpmTasks('grunt-contrib-imagemin');
+```
+
+With load-grunt-tasks, you can collapse that down to the following one-liner:
+
+```js
+require('load-grunt-tasks')(grunt);
+```
+
+After requiring the plugin, it will analyze your package.json file, determine which of the dependencies are Grunt plugins and load them all automatically.
+
+### Splitting your Grunt configuration into different files
+
+__load-grunt-tasks__ shrunk your Gruntfile in code and complexity a little, but as you configure a large application, it will still become a very large file. This is where [load-grunt-config](https://npmjs.org/package/load-grunt-config) comes into play. __load-grunt-config__ lets you break up your Gruntfile config by task. Moreover, it encapsulates __load-grunt-tasks__ and its functionality!
+
+Important, however: Splitting your Gruntfile might not always work for every situation. If you have lots of shared configuration between your tasks (i.e. use a lot of the Grunt templating), you should be a little careful.
+
+With __load-grunt-config__, your Gruntfile.js will look like this:
+
+```js
+module.exports = function(grunt) {
+  require('load-grunt-config')(grunt);
+};
+```
+
+Yes, that’s really it, the whole file! Now where do our task configurations live?
+
+Create a folder called __grunt/__ in the directory of your Gruntfile. By default, the plugin includes files within that folder that match the name of the task you want to use. Our directory structure should look like this:
+
+```js
+- myproject/
+-- Gruntfile.js
+-- grunt/
+--- concat.js
+--- uglify.js
+--- imagemin.js
+```
+
+Let’s now put the task configuration of each of our tasks directly into the respective files (you’ll see that these are mostly just copy and pastes from the original Gruntfile into a new structure):
+
+**grunt/concat.js**
+
+```js
+module.exports = {
+  dist: {
+    src: ['src/js/jquery.js', 'src/js/intro.js', 'src/js/main.js', 'src/js/outro.js'],
+    dest: 'dist/build.js',
+  }
+};
+```
+
+**grunt/uglify.js**
+
+```js
+module.exports = {
+  dist: {
+    files: {
+      'dist/build.min.js': ['dist/build.js']
+    }
+  }
+};
+```
+
+**grunt/imagemin.js**
+
+```js
+module.exports = {
+  options: {
+    cache: false
+  },
+
+  dist: {
+    files: [{
+      expand: true,
+      cwd: 'src/',
+      src: ['**/*.{png,jpg,gif}'],
+      dest: 'dist/'
+    }]
+  }
+};
+```
+
+If JavaScript configuration blocks are not really your thing, __load-grunt-tasks__ even allows you to use YAML or CoffeeScript syntax instead. Let’s write our final required file in YAML – the “__aliases__” file. This is a special file that registers task aliases, something we had to do as part of the Gruntfile before via the <code>registerTask</code> function. Here’s ours:
+
+**grunt/aliases.yaml**
+
+```js
+default:
+  - 'concat'
+  - 'uglify'
+  - 'imagemin'
+```
+
+And that’s it! Execute the following command in your terminal:
+
+```shell
+$ grunt
+```
+
+If everything worked, this will now look at the “default” task and run everything in order. Now that we stripped down our main Gruntfile to three lines of code we never need to touch and externalized every task configuration, we’re done here. But man, it’s still pretty slow to get everything built. Let’s see what we can do to improve that.
+
+## Minimizing your build time
+
+Even though your web app’s runtime and load time performance is much more business critical than the time required to execute a build, a slow build is still problematic. It will render it difficult to execute automatic builds with plugins like [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) or after a Git commit fast enough, and introduces a “penalty” to actually run the build – the faster the build time, the more agile your workflow. If your production build takes longer than 10 minutes to run, you’ll only run the build when you absolutely have to, and you’ll wander off to get coffee while it runs. That’s a productivity killer. We’ve got things to speed up.
+
+### Only build files that actually changed: grunt-newer
+
+After an initial build of your site, it’s likely that you’ll have only touched a few files in the project when you get around to building again. Let’s say that in our example, you changed an image in the __src/img/__ directory – running imagemin to re-optimize images would make sense, but only for that single image – and of course, re-running __concat__ and __uglify__ is just wasting precious CPU cycles.
+
+Of course, you could always run <code>$ grunt imagemin</code> from your terminal instead of <code>$ grunt</code> to only selectively execute a task at hand, but there is a smarter way. It’s called [grunt-newer](https://npmjs.org/package/grunt-newer).
+
+
+Grunt-newer has a local cache in which it stores information about what files have actually changed, and only executes your tasks for the files that did, in fact, change. Let’s take a look on how to activate it.
+
+Remember our __aliases.yaml__ file? Change it from this:
+
+```js
+default:
+  - 'concat'
+  - 'uglify'
+  - 'imagemin'
+```
+
+to this:
+
+```js
+default:
+  - 'newer:concat'
+  - 'newer:uglify'
+  - 'newer:imagemin'
+```
+
+Simply prepending “newer:” to any of your tasks **pipes your source and destination files through the grunt-newer plugin first, which then determines for what files, if any, the task should run**.
+
+### Run multiple tasks in parallel: grunt-concurrent
+
+[grunt-concurrent](https://npmjs.org/package/grunt-concurrent) is a plugin that becomes really useful when you have plenty of tasks that are independent from each other and consume a lot of time. It utilizes the number of CPUs in your device and executes multiple tasks in parallel.
+
+Best of all, its configuration is super simple. Assuming you use load-grunt-config, create the following new file:
+
+**grunt/concurrent.js**
+
+```js
+module.exports = {
+  first: ['concat'],
+  second: ['uglify', 'imagemin']
+};
+```
+
+We just setup to parallel execution tracks with the names “__first__” and “__second__”. The __concat__ task needs to run first, and there’s nothing else to run in the meantime in our example. In our second track, we put both __uglify__ and __imagemin__, since these two are independent from each other, and both take a considerable amount of time.
+
+This on its own does not do anything yet. We have to change our __default__ task alias to point to the concurrent jobs instead of the direct ones. Here’s the new content of __grunt/aliases.yaml__:
+
+```js
+default:
+  - 'concurrent:first'
+  - 'concurrent:second'
+```
+
+If you now rerun your grunt build, the concurrent plugin will run the concat task first, and then spawn two threads on two different CPU cores to run both imagemin and uglify in parallel. Yay!
+
+A word of advice though: Chances are that in our basic example, grunt-concurrent will not make your build significantly faster. The reason for this is the overhead created by spawning different instances of Grunt in different threads: In my case, at least +300ms pro spawn.
+
+### How much time did it take? time-grunt
+
+Now that we’re optimizing every of our tasks, it would be really helpful to understand how much time every individual task required to execute. Fortunately, there’s a plugin for that as well: [time-grunt](https://npmjs.org/package/time-grunt).
+
+time-grunt is not a classical grunt plugin that you load as npm task, but rather a plugin you include directly, similar to load-grunt-config. We’ll add a require for time-grunt to our Gruntfile, just like we did with load-grunt-config. Our Gruntfile should look like this now:
+
+```js
+module.exports = function(grunt) {
+
+  // measures the time each task takes
+  require('time-grunt')(grunt);
+
+  // load grunt config
+  require('load-grunt-config')(grunt);
+
+};
+```
+
+And I’m sorry to disappoint, but that’s it – try rerunning Grunt from your Terminal and for every task (and additionally the total build), you should see a nicely formatted info panel on execution time:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/x1jlIVoSZWnuYfAAUK9k.png", alt="Grunt time", width="800", height="115" %}
+</figure>
+
+## Automatic system notifications
+
+Now that you have a heavily optimized Grunt build that executes swiftly, and provided you auto-build it in some way (i.e. by watching files with grunt-contrib-watch, or after commits), wouldn’t it be great if your system could notify you when your fresh build is ready to consume, or when anything bad happened? Meet [grunt-notify](https://npmjs.org/package/grunt-notify).
+
+By default, grunt-notify provides automatic notifications for all Grunt errors and warnings using whatever notification system available on your OS: Growl for OS X or Windows, Mountain Lion’s and Mavericks’ Notification Center, and Notify-send. Amazingly, all you need in order to get this functionality is to install [the plugin](https://npmjs.org/package/grunt-notify) from npm and load it in your Gruntfile (remember, if you’re using grunt-load-config above, this step is automated!).
+
+Here is how it will look like, depending on your operating system:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ag7FPvabaJFAAST14nOy.png", alt="Notify", width="664", height="355" %}
+</figure>
+
+In addition to errors and warnings, let’s configure it so it runs after our last task finished executing. Assuming you are using grunt-load-config to split up tasks across files, this is the file we’ll need:
+
+**grunt/notify.js**
+
+```js
+module.exports = {
+  imagemin: {
+    options: {
+      title: 'Build complete',  // optional
+        message: '<%= pkg.name %> build finished successfully.' //required
+      }
+    }
+  }
+}
+```
+
+In the first level of our config object, the key has to match the name of the task we want to connect it to. This example will cause the message to appear right after the __imagemin__ task has executed, which is the last one in our build chain.
+
+## Wrapping it all up
+
+If you’ve followed from the top, you are now the proud owner of a build process that is super tidy and organized, is blazingly fast due to parallelization and selective processing and notifies you when anything goes wrong.
+
+If you discover another gem that improves Grunt and its plugins further, please do let us know! Until then, happy grunting!
+
+**Update (2/14/2014): To grab a copy of the full, working example Grunt project, [click here](https://github.com/html5rocks/www.html5rocks.com/tree/master/content/tutorials/tooling/supercharging-your-gruntfile/static/sample).**
+
+
diff --git a/src/site/content/en/blog/suumo/index.md b/src/site/content/en/blog/suumo/index.md
new file mode 100644
index 00000000000..ff307ac5500
--- /dev/null
+++ b/src/site/content/en/blog/suumo/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: Suumo
+date: 2016-05-11
+updated: 2016-05-11
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VFyNSzxuxA1BmBagsWhN.gif", alt="Suumo site", width="582", height="1000" %}
+</figure>
+
+### Summary
+
+Japan's top real estate site supercharges new listings with web Push
+Notifications and sees a 31% open rate for notifications.
+
+### Results
+
+- 75% decrease in load time
+- 31% open rate from web Push Notifications
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/18XNDoSm22tETLWXrN1L.pdf)
+
+## About Suumo
+
+SUUMO is Japan’s top real estate site, serving nearly 11% of the country’s
+population. Fourteen million unique users, many on smartphones, search for
+new homes on SUUMO every month.
+
+## Challenge
+
+More and more users rely on search engines to stay on top of the
+ever-increasing number of housing listings online. This means SUUMO saw a lot
+of traffic coming into their mobile website. The company found it difficult,
+however, to build an engaging experience on the web that was as fast as their
+mobile app. The resulting high bounce and low retention rates prompted the
+company to encourage users to download their native app. Actually getting
+people to download and re-engage with the app, though, was challenging and
+costly.
+
+## Solution
+
+SUUMO looked to Progressive Web App technologies, including offline support
+and web Push Notifications, to provide a fast, app-like user experience and
+re-engage their mobile web users. The company added service workers and
+streamlined the landing page to help consumers quickly find properties they
+were looking for. The new strategy worked, decreasing the load time on the
+landing page by 75%.
+
+The real estate site also implemented Push Notifications for mobile web
+users on Android, to alert them instantly to new property listings. They
+understood the value of Push Notifications, thanks to their native app
+experience. The new strategy delivered a 31% open rate.
+
+“We finally have a way to retain users on the mobile web,” says Dai
+Shibayama, manager of the Smart Device Division, Recruit Sumai Company Ltd.,
+which operates the SUUMO portal site. “This has been a game changer for us!”
diff --git a/src/site/content/en/blog/svg-mobile-fundamentals/index.md b/src/site/content/en/blog/svg-mobile-fundamentals/index.md
new file mode 100644
index 00000000000..5c02d3a8175
--- /dev/null
+++ b/src/site/content/en/blog/svg-mobile-fundamentals/index.md
@@ -0,0 +1,339 @@
+---
+layout: post
+title: Splash vector graphics on your responsive site
+authors:
+  - alexdanilo
+date: 2012-10-15
+tags:
+  - blog
+---
+
+
+Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact.
+Vector graphics are a great way to deliver stunning visual results using minimal bandwidth.
+
+Many people think of canvas as the only way to draw a mixture of vectors and rasters on the web, but there are alternatives that have some advantages.
+A great way to achieve vector drawing is through the use of [Scalable Vector Graphics (SVG)](http://www.w3.org/TR/SVG/) which is a key part of [HTML5](http://dev.w3.org/html5/spec/single-page.html).
+
+We all know responsive design is a big part of handling varying screen sizes, and SVG is ideal for handling different size screens with ease.
+
+SVG is a great way to present vector based line drawings and is a great complement to bitmaps,  the latter being better suited for continuous tone images.
+
+One of the most useful things about SVG is that it’s resolution independent, meaning that you don’t need to think about how many pixels you have on your device, the result will always scale and be optimized by the browser to look great.
+
+Popular authoring tools like the Drawing application in Google Drive, Inkscape, Illustrator, Corel Draw and lots of others generate SVG so there are lots of ways to generate content.
+We'll dive into some ways to use SVG assets, plus some optimization tips to get you going.
+
+## Scaling fundamentals
+
+Let's start with a simple scenario - you want a full page graphic to be the background of your web page.
+It'd be really useful to have your company logo, or anything like that full-screen in the background at all
+times, but of course that's super hard to do nicely with all the different screen sizes out there.
+So to illustrate, we'll start with the humble HTML5 logo.
+
+The HTML5 logo is shown below - and you guessed it, it originates as an SVG file.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PHOLckhUWFre4i5MMKA7.svg", alt="HTML5 logo", width="150", height="150" %}
+</figure>
+
+Click on the logo and take a look at it in any modern browser and you'll see that it scales beautifully to any size window.
+Try opening it up in your favorite browser, resize the window and observe that the image is crisp at any magnification.
+If we were to try that with a bitmap image, we'd either have to serve many different sizes for each screen we could encounter,
+or be forced to put up with horribly pixelated scaled images.
+
+So what's the big deal?
+Well if you hadn't noticed, this is the only format that scales independently of the device we're using to look at it with.
+So we only need to serve one asset to our users, without ever needing to know what their screen or window size is - neat!
+
+But wait, there's more - the HTML5 logo is just 1427 bytes! Yikes, that's so small that it will hardly dent any mobile
+data plan when loading it, which makes it fast to load and that makes it cheap and fast for your users!
+
+Another nice thing about SVG files is that they can be GZIP compressed to further shrink them.
+When you compress SVG that way, the file extension has to be changed to ‘.svgz’.
+In the case of the HTML5 logo, it shrinks to just 663 bytes when compressed - and most modern browsers handle it with ease!
+
+{% Aside %}
+Note, some browsers can load the GZIP files OK but fail on loading via the `<img>` tag. Luckily HTTP can use GZIP compression so setting up the web server
+properly may be a better way to take advantage of GZIP compression.
+{% endAside %}
+
+With our example file on some of the latest devices we see something like a 60x advantage using compressed vector data!
+Also, note that these comparisons are being made between the JPEG and the SVG, rather than PNG.
+However, the JPEG is a lossy format which results in lower quality than either the SVG or PNG. If we were to use PNG, the advantage would be over 80x which is astounding!
+
+But of course PNG and JPEG are not created equal. A number of optimization tips tell you to use JPEG instead of PNG, but that's not always such a great idea.
+Take a look at the images below. The image on the left is a PNG image of the top right part of the HTML5 logo enlarged 6x.
+The image on the right is the same thing but encoded with JPEG.
+
+<div>
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/24hKDdM72OrvlnXaeSh7.jpg", alt="PNG image", width="222", height="396" %}
+    <figcaption>PNG image</figcaption>
+  </figure>
+
+  <figure >
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UtI3HHIRcc9Q9bwIvWcU.jpg", alt="JPEG image<", width="222", height="395" %}
+    <figcaption>JPEG image</figcaption>
+  </figure>
+</div>
+
+It's easy to see that the file size saving in JPEG comes at a cost, with color artifacts at the sharp edges - probably making your retina think it needs glasses:-)
+To be fair, JPEG is optimized for photos, and that's why it's not as good for vector art.
+In any case, the SVG version is the same as the PNG in quality so wins on all accounts - both file size and clarity.
+
+## Making Vector Backgrounds
+
+Lets take a look at how you could use a vector file as the background of a page.
+One easy way is to declare your background file using CSS fixed positioning:
+
+```html
+<style>
+#bg {
+  position:fixed; 
+  top:0; 
+  left:0; 
+  width:100%;
+  z-index: -1;
+}
+</style>
+<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
+```
+
+You'll notice that no matter what the size of the display, the image is sized nicely with crisp clean
+edges.
+
+Then of course, we'd like to put some content over the background.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s3jQUknkm4nuNUs7YYmV.jpg", alt="Logo with background", width="389", height="472" %} 
+</figure>
+
+But as you can see, the result is less than ideal since we can't read the text. So what do we do?
+
+### Adjusting the background to look nicer
+
+The obvious thing we need to do is make all the color in the background image be lighter.
+This is easily achieved by use of the CSS opacity property - or using opacity in the SVG file itself.
+You could make this work by simply adding this code to your CSS content:
+
+```css
+#bg {
+  opacity: 0.2;
+}
+```
+
+That would give you a result like so:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/avJfWjXTTabg2Na6npTv.jpg", alt="Adjusting the background to look nicer", width="389", height="479" %}
+</figure>
+
+This solution whilst easy, is likely to be a performance pain point on a mobile device.
+For most existing mobile browsers, use of the opacity property can be a lot slower to draw with compared with opaque objects.
+
+### A better solution
+
+Modifying the color in the original SVG content is far better than setting opacity with CSS.
+Here is our HTML5 logo modified to look faded out by changing the colors used, and in the process avoiding the opacity property altogether. So the background image below looks identical to the result from changing the opacity, but will actually paint a lot
+faster and save us CPU time and save precious battery life in the process.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WM48VBQG4c6Fu7YMYSGw.jpg", alt="Logo faded", width="407", height="506" %}
+</figure>
+
+So now we have a decent grasp of some fundamentals, let's move on to some other features.
+
+## Using Gradients Efficiently
+  
+Let's say we want to build a button.
+We could start by creating a rectangle with nice rounded corners.
+Then we could add a nice linear gradient to give the button some nice texture. The code to do so could look something like:
+  
+```html
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blueshiny">
+      <stop stop-color="#a0caf6" offset="0"/>
+      <stop stop-color="#1579df" offset="0.5" />
+      <stop stop-color="#1675d6" offset="0.5"/>
+      <stop stop-color="#115ca9" offset="1"/>
+    </linearGradient>
+  </defs>
+  <g id="button" onclick="alert('ouch!');">
+    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
+    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
+  </g>
+</svg>
+```
+
+The resultant button would end up with something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iUW3UQQ68xBRBnuDpoy7.svg", alt="Glossy button", width="300", height="150" %}
+</figure>
+
+Notice how the gradient we've added goes from left to right. This is the default gradient direction in SVG.
+But we can do better, for a couple of different reasons: aesthetics and performance.
+Let's try to change the gradient direction to make it look a bit nicer.
+Setting the 'x1', 'y1', 'x2', and 'y2' attributes on the linear gradient controls the direction of the fill color.
+
+
+Setting just the 'y2' attribute lets us change the gradient to be diagonal. So this small code change:
+
+```html
+<linearGradient id="blueshiny" y2="1">
+```
+
+gives us a different look for our button, it ends up looking like the image below.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OVXIEosmvAlrlYjnHLMn.svg", alt="Glossy button slanted", width="300", height="150" %}
+</figure>
+
+We can also easily change the gradient to go from top to bottom with this small code change:
+
+```css
+<linearGradient id="blueshiny" x2="0" y2="1">
+```
+
+and that ends up looking like the image below.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Gyr2cmK5eAA4776Zdbjb.svg", alt="Glossy button vertical", width="300", height="150" %}
+</figure>
+
+So what's with all the discussion about different angles of the gradient I hear you ask?
+
+{% Aside %}
+Tip: use top to bottom gradients for better performance.
+{% endAside %}
+
+Well it turns out that the last example - the one with the gradient running from top to bottom is the fastest to draw on most devices.
+It's a very little known secret amongst the graphic geeks who write browser code that vertical (top to bottom) gradients paint almost as fast as a solid color. (The reason is that painting an object is done in horizontal lines down the page - and the guts of the
+drawing code understand that the color doesn't change across each line, and so they optimize it).
+
+So when you choose to use gradients in your page design, vertical gradients will be faster and use less battery as a side effect.
+This speedup applies to CSS gradients as well, so it's not just an SVG thing.
+
+{% Aside %}
+Note, that radial gradients should be avoided unless you know they'll be hardware accelerated - in software
+they are painfully slow.
+{% endAside %}
+
+If we feel really adventurous with this new gradient knowledge, then we can perhaps add a cool gradient behind our HTML5 logo by adding the code below:
+
+```html
+<defs>
+<linearGradient id="grad1" x2="0" y2="1">
+    <stop stop-color="#FBE6FB" offset="0" />
+    <stop stop-color="#CCCCFF" offset="0.2" />
+    <stop stop-color="#CCFFCC" offset="0.4" />
+    <stop stop-color="#FFFFCC" offset="0.6" />
+    <stop stop-color="#FFEDCC" offset="0.8" />
+    <stop stop-color="#FFCCCC" offset="1" />
+</linearGradient>
+</defs>
+<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
+```
+
+The code above adds a faded vertical linear gradient to the backgound of our HTML5 logo to give a subtle multi-color tinge that runs fast - as fast as a solid color background.
+
+{% Aside %}
+Note, also that the choice of the size of the background rectangle guarantees the color fills the screens on all
+of our mobile devices listed at the start of this article (their screen aspect ratios range from 10/16 through 18/10).
+{% endAside %}
+
+If you load the content in a desktop browser and resize to extreme aspect ratios, you'll see white bars appear at the top/bottom or left/right sides.
+Anyway, after the code changes made above the resultant background will look like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/E8XOmVLuBskwOwa4E7Hm.svg", alt="Logo faded with gradient", width="150", height="150" %}
+</figure>
+
+## Animate With Ease
+
+By now you might be wondering what's the point of using an SVG gradient as the backdrop for your page.
+Indeed it might make sense to do that with CSS gradients, but one advantage of SVG is that the gradient itself lives in the DOM.
+This means that you can modify it with script, but more importantly you can take advantage of SVG's built in animation capability to add subtle changes to your content.
+
+As an example, we'll modify our colorful HTML5 logo by changing the linear gradient definition to the code below:
+
+```html
+<linearGradient id="grad1" x2="0" y2="1">
+    <stop stop-color="#FBE6FB" offset="0">
+    <animate attributeName="stop-color"
+        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+    <stop stop-color="#CCCCFF" offset="0.2">
+    <animate attributeName="stop-color"
+        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+    <stop stop-color="#CCFFCC" offset="0.4">
+    <animate attributeName="stop-color"
+        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+    <stop stop-color="#FFFFCC" offset="0.6">
+    <animate attributeName="stop-color"
+        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+    <stop stop-color="#FFEDCC" offset="0.8">
+    <animate attributeName="stop-color"
+        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+    <stop stop-color="#FFCCCC" offset="1">
+    <animate attributeName="stop-color"
+        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
+        begin="0s" dur="20s" repeatCount="indefinite"/>
+    </stop>
+</linearGradient>
+```
+
+Take a look at the image below to see the result of these changes above.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/z5zMKZqHVIkfz3JyVJFi.svg", alt="Linear gradient", width="150", height="150" %}
+</figure>
+
+The code is changing the colors of our linear gradient through all the different color stops we've defined
+in a continuous cycle that takes 20 seconds to run. The effect of that is that the gradient looks like it's moving up
+the page in a continuous motion that never stops.
+
+The beauty of this is that there's no script required! 
+That's why it runs as a referenced image from this page, but also it reduces workload on a mobile CPU by removing the need for script.
+
+Also, the browser itself can take advantage of its knowledge of the painting to ensure minimal CPU overhead is used to do the fancy animation.
+
+There is one caveat: some browsers don't handle this style of animation at all, but in that case you'll still get a nice
+colored background but it just won't change - this could be worked around by using script (and [requestAnimationFrame](http://www.html5rocks.com/en/tutorials/speed/animations/)) but that's a bit beyond this article.
+
+One more thing to note, is that this uncompressed SVG file is only 2922 bytes - incredibly small to supply such a rich graphics effect, keeping your users and those data plans happy in the process.
+
+## Where to from here?
+
+There are many cases where SVG is less than ideal, photos and videos being better represented in other formats.
+Text is another one, where native HTML and CSS work much better in general.
+However, as a tool in the arsenal for line drawn artwork it can be the ideal choice.
+
+
+We've touched on a few basic fundamental uses for SVG graphics, showing how easy it is to generate tiny content that provides
+full screen vivid graphics with a minimal amount of download. Small enhancements to the content can create amazing
+graphical results easily with trivial amounts of markup. In the next article we'll explore some more details about how the animation
+built into SVG can be used for more simple and powerful effects and compare the use of canvas with SVG to choose the right
+tool for authoring your mobile graphics site.
+
+
+## Other good resources
+
+- [Inkscape](http://inkscape.org/) an open source drawing application that uses SVG as its file format.
+- [Open Clip Art](http://openclipart.org/) a huge open source clip art library containing thousands of SVG images.
+- [W3C SVG Page](http://www.w3.org/Graphics/SVG/) containing links to specifications, resources, etc.
+- [Raphaël](http://raphaeljs.com/) a Javascript library that provides a convenient API to draw and animate SVG content with great fallback for older browsers.
+- [SVG Resources](http://srufaculty.sru.edu/david.dailey/svg/) from Slippery Rock University - includes a link to a great [SVG Primer](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html).
+
+
diff --git a/src/site/content/en/blog/svgcode/index.md b/src/site/content/en/blog/svgcode/index.md
new file mode 100644
index 00000000000..3c66bdd28d6
--- /dev/null
+++ b/src/site/content/en/blog/svgcode/index.md
@@ -0,0 +1,399 @@
+---
+layout: post
+title: "SVGcode: a PWA to convert raster images to SVG vector graphics"
+subhead: >
+  SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP,
+  AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async
+  Clipboard API, the File Handling API, and Window Controls Overlay
+  customization.
+authors:
+  - thomassteiner
+description: >
+  Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or
+  monochrome vector images (SVG).
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/lqecVwtwI01kJ7n52Sqp.jpg
+alt: SVGcode logo
+date: 2021-11-19
+updated: 2022-05-09
+tags:
+  - capabilities
+  - progressive-web-apps
+  - case-study
+  - blog
+---
+
+{% Aside %}
+In a hurry? Go [straight to the SVGcode app](https://svgco.de/)
+and read the article later.
+{% endAside %}
+
+<figure data-size="full">
+  {% YouTube "kcvfyQh6J-0" %}
+  <figcaption>
+    (If you prefer watching over reading, this article is also available as a <a href="https://youtu.be/kcvfyQh6J-0">video</a>.)
+  </figcaption>
+</figure>
+
+## From raster to vector
+
+Have you ever scaled an image and the result was pixelated and unsatisfactory? If
+so, you have probably dealt with a raster image format such as WebP, PNG, or JPG.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/bIiC6vyZLqgGWPuFF9od.mp4" %}
+  <figcaption>
+    Scaling up a raster image makes it look pixelated.
+  </figcaption>
+</figure>
+
+In contrast, vector graphics are images that are defined by points in a coordinate system. These
+points are connected by lines and curves to form polygons and other shapes. Vector graphics have an
+advantage over raster graphics in that they may be scaled up or down to any resolution
+without pixelation.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/yM32DfKFp8ooBAshjlUE.mp4" %}
+  <figcaption>
+    Scaling up a vector image with no loss of quality.
+  </figcaption>
+</figure>
+
+## Introducing SVGcode
+
+I have built a PWA called [SVGcode](https://svgco.de/) that can help you convert raster images to
+vectors. Credit where credit is due: I didn't invent this. With SVGcode, I just stand on the
+shoulders of a command line tool called [Potrace](http://potrace.sourceforge.net/) by
+[Peter Selinger](https://www.mathstat.dal.ca/~selinger/) that I have
+[converted to Web Assembly](https://www.npmjs.com/package/esm-potrace-wasm), so it can be used in a
+Web app.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/xMosQFxacBsz116CcFwy.png", alt="SVGcode application screenshot.", width="800", height="483" %}
+  <figcaption>
+    The <a href="https://svgco.de/">SVGcode</a> app.
+  </figcaption>
+</figure>
+
+### Using SVGcode
+
+First, I want to show you how to use the app. I start with the teaser image for Chrome Dev Summit
+that I downloaded from the ChromiumDev Twitter channel. This is a PNG raster image that I then
+drag onto the SVGcode app. When I drop the file, the app traces the image color by color,
+until a vectorized version of the input appears. I can now zoom into the image, and as you can see,
+the edges stay sharp. But zooming in on the Chrome logo, you can see that the tracing wasn't
+perfect, and especially the outlines of the logo look a bit speckled. I can improve the result by
+de-speckling the tracing by suppressing speckles of up to, say, five pixels.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/WvmYtNTHAbINP3ec1h1w.mp4" %}
+  <figcaption>
+    Converting a dropped image to SVG.
+  </figcaption>
+</figure>
+
+### Posterization in SVGcode
+
+An important step for vectorization, especially for photographic images, is posterizing the input
+image to reduce the number of colors. SVGcode allows me to do this per color channel, and see the
+resulting SVG as I make changes. When I'm happy with the result, I can save the SVG to my hard disk
+and use it wherever I like.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/BzcR6yPyuQ0TIgzwYbLy.mp4" %}
+  <figcaption>
+    Posterizing an image to reduce the number of colors.
+  </figcaption>
+</figure>
+
+## APIs used in SVGcode
+
+Now that you have seen what the app is capable of, let me show you some of the APIs that help make
+the magic happen.
+
+### Progressive Web App
+
+SVGcode is an installable Progressive Web App and therefore fully offline enabled. The app is based
+on the
+[Vanilla JS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla)
+for [Vite.js](https://github.com/vitejs/vite) and uses the popular
+[Vite plugin PWA](https://github.com/antfu/vite-plugin-pwa), which creates a service worker that
+uses [Workbox.js](https://developer.chrome.com/docs/workbox/) under the hood. Workbox is a set
+of libraries that can power a production-ready service worker for Progressive Web Apps, This pattern
+may not necessarily work for all apps, but for SVGcode's use case it's great.
+
+#### Window Controls Overlay
+
+To maximize the available screen real estate, SVGcode uses
+[Window Controls Overlay](/window-controls-overlay/) customization by moving its main menu up into
+the titlebar area. You can see this get activated at the end of the install flow.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/aDk3LFxexL6g2NbH4RCA.mp4" %}
+  <figcaption>
+    Installing SVGcode and activating the Window Controls Overlay customization.
+  </figcaption>
+</figure>
+
+### File System Access API
+
+To open input image files and save the resulting SVGs, I use the
+[File System Access API](/file-system-access/). This allows me to keep a reference to previously
+opened files and to continue where I left off, even after an app reload. Whenever an image gets
+saved, it is optimized via the [svgo](https://github.com/svg/svgo) library, which may take a moment,
+depending on the complexity of the SVG. Showing the file save dialog requires a user gesture. It is
+therefore important to obtain the file handle before the SVG optimization happens, so the user
+gesture is not invalidated by the time the optimized SVG is ready.
+
+```js
+try {
+  let svg = svgOutput.innerHTML;
+  let handle = null;
+  // To not consume the user gesture obtain the handle before preparing the
+  // blob, which may take longer.
+  if (supported) {
+    handle = await showSaveFilePicker({
+      types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
+    });
+  }
+  showToast(i18n.t('optimizingSVG'), Infinity);
+  svg = await optimizeSVG(svg);
+  showToast(i18n.t('savedSVG'));
+  const blob = new Blob([svg], {type: 'image/svg+xml'});
+  await fileSave(blob, {description: 'SVG file'}, handle);
+} catch (err) {
+  console.error(err.name, err.message);
+  showToast(err.message);
+}
+```
+
+#### Drag an drop
+
+For opening an input image, I can either use the file open feature, or, as you have seen above, just
+drag and drop an image file onto the app. The file open feature is pretty straightforward, more
+interesting is the drag and drop case. What's particularly nice about this is that you can
+get a file system handle from the data transfer item via the
+[`getAsFileSystemHandle()`](https://developer.mozilla.org/docs/Web/API/DataTransferItem/getAsFileSystemHandle)
+method. As mentioned before, I can persist this handle, so it's ready when the app gets reloaded.
+
+```js
+document.addEventListener('drop', async (event) => {
+  event.preventDefault();
+  dropContainer.classList.remove('dropenter');
+  const item = event.dataTransfer.items[0];
+  if (item.kind === 'file') {
+    inputImage.addEventListener(
+      'load',
+      () => {
+        URL.revokeObjectURL(blobURL);
+      },
+      {once: true},
+    );
+    const handle = await item.getAsFileSystemHandle();
+    if (handle.kind !== 'file') {
+      return;
+    }
+    const file = await handle.getFile();
+    const blobURL = URL.createObjectURL(file);
+    inputImage.src = blobURL;
+    await set(FILE_HANDLE, handle);
+  }
+});
+```
+
+For more details, check out the article on the [File System Access API](/file-system-access/) and,
+if you're interested, study the SVGcode source code in
+[`src/js/filesystem.js`](https://github.com/tomayac/SVGcode/blob/main/src/js/filesystem.js).
+
+### Async Clipboard API
+
+SVGcode is also fully integrated with the operating system's clipboard via the Async Clipboard API.
+You can paste images from the operating system's file explorer into the app either by clicking the
+paste image button or by pressing command or control plus v on your keyboard.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/9wHL0Uc7eHFEFF99anaB.mp4" %}
+  <figcaption>
+    Pasting an image from the file explorer into SVGcode.
+  </figcaption>
+</figure>
+
+The Async Clipboard API has recently gained the ability to deal with SVG images as well, so you can
+also copy an SVG image and paste it into another application for further processing.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/KiGt5UHOvZZEvPhtwIny.mp4" %}
+  <figcaption>
+    Copying an image from SVGcode into SVGOMG.
+  </figcaption>
+</figure>
+
+```js
+copyButton.addEventListener('click', async () => {
+  let svg = svgOutput.innerHTML;
+  showToast(i18n.t('optimizingSVG'), Infinity);
+  svg = await optimizeSVG(svg);
+  const textBlob = new Blob([svg], {type: 'text/plain'});
+  const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
+  navigator.clipboard.write([
+    new ClipboardItem({
+      [svgBlob.type]: svgBlob,
+      [textBlob.type]: textBlob,
+    }),
+  ]);
+  showToast(i18n.t('copiedSVG'));
+});
+```
+
+To learn more, read the [Async Clipboard](/async-clipboard/) article, or see the file
+[`src/js/clipboard.js`](https://github.com/tomayac/SVGcode/blob/main/src/js/clipboard.js).
+
+### File Handling
+
+One of my favorite features of SVGcode is how well it blends in with the operating system. As an
+installed PWA, it can become a file handler, or even the default file handler, for image files. This
+means that when I'm in the Finder on my macOS machine, I can right-click an image and open it with
+SVGcode. This feature is called File Handling and works based on the file_handlers property in the
+Web App Manifest and the launch queue, which allows the app to consume the passed file.
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/DEQLkm1vrt226xsAoysI.mp4" %}
+  <figcaption>
+    Opening a file from the desktop with installed SVGcode app.
+  </figcaption>
+</figure>
+
+```js
+window.launchQueue.setConsumer(async (launchParams) => {
+  if (!launchParams.files.length) {
+    return;
+  }
+  for (const handle of launchParams.files) {
+    const file = await handle.getFile();
+    if (file.type.startsWith('image/')) {
+      const blobURL = URL.createObjectURL(file);
+      inputImage.addEventListener(
+        'load',
+        () => {
+          URL.revokeObjectURL(blobURL);
+        },
+        {once: true},
+      );
+      inputImage.src = blobURL;
+      await set(FILE_HANDLE, handle);
+      return;
+    }
+  }
+});
+```
+
+For more information, see [Let installed web applications be file handlers](/file-handling/), and view the source code in
+[`src/js/filehandling.js`](https://github.com/tomayac/SVGcode/blob/main/src/js/filehandling.js).
+
+### Web Share (Files)
+
+Another example of blending in with the operating system is the app's share feature. Assuming I want
+to make edits to an SVG created with SVGcode, one way to deal with this would be to save the file,
+launch the SVG editing app, and then open the SVG file from there. A smoother flow, though, is to
+use the [Web Share API](/web-share/#sharing-files), which allows for files to be shared directly. So if
+the SVG editing app is a share target, it can directly receive the file without deviation.
+
+```js
+shareSVGButton.addEventListener('click', async () => {
+  let svg = svgOutput.innerHTML;
+  svg = await optimizeSVG(svg);
+  const suggestedFileName =
+    getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
+  const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
+  const data = {
+    files: [file],
+  };
+  if (navigator.canShare(data)) {
+    try {
+      await navigator.share(data);
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+      }
+    }
+  }
+});
+```
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/p3Dn9FXrNLPtb4syXnfl.mp4" %}
+  <figcaption>
+    Sharing an SVG image to Gmail.
+  </figcaption>
+</figure>
+
+### Web Share Target (Files)
+
+The other way round, SVGcode can also act as a share target and receive files from other apps. To
+make this work, the app needs to let the operating system know via the
+[Web Share Target API](/web-share-target/) what types of data it can accept. This happens via a
+dedicated field in the Web App Manifest.
+
+```json
+{
+  "share_target": {
+    "action": "https://svgco.de/share-target/",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "image",
+          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
+        }
+      ]
+    }
+  }
+}
+```
+
+The `action` route does not actually exist, but is handled purely in the service worker's `fetch`
+handler, which then passes on received files for actual processing in the app.
+
+```js
+self.addEventListener('fetch', (fetchEvent) => {
+  if (
+    fetchEvent.request.url.endsWith('/share-target/') &&
+    fetchEvent.request.method === 'POST'
+  ) {
+    return fetchEvent.respondWith(
+      (async () => {
+        const formData = await fetchEvent.request.formData();
+        const image = formData.get('image');
+        const keys = await caches.keys();
+        const mediaCache = await caches.open(
+          keys.filter((key) => key.startsWith('media'))[0],
+        );
+        await mediaCache.put('shared-image', new Response(image));
+        return Response.redirect('./?share-target', 303);
+      })(),
+    );
+  }
+});
+```
+
+<figure>
+  {% Video autoplay=true, muted=true, loop=true, playsinline=true, src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/SVtll3ShgNigvkVLu7cn.mp4" %}
+  <figcaption>
+    Sharing a screenshot to SVGcode.
+  </figcaption>
+</figure>
+
+## Conclusion
+
+Alright, this was a quick tour through some of the advanced app features in SVGcode. I hope this app
+can become an essential tool for your image processing needs alongside other amazing apps like
+[Squoosh](https://squoosh.app/) or [SVGOMG](https://jakearchibald.github.io/svgomg/).
+
+SVGcode is available at [svgco.de](https://svgco.de/). See what I did there? You can
+[review its source code on GitHub](https://github.com/tomayac/SVGcode). Note that since Potrace is
+GPL-licensed, so is SVGcode. And with that, happy vectorizing! I hope SVGcode will be useful, and
+some of its features can inspire your next app.
+
+## Acknowledgements
+
+This article was reviewed by [Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/en/blog/svgomg/index.md b/src/site/content/en/blog/svgomg/index.md
new file mode 100644
index 00000000000..d492c8bc342
--- /dev/null
+++ b/src/site/content/en/blog/svgomg/index.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: SVGOMG
+date: 2015-03-24
+updated: 2015-03-24
+authors:
+  - pbakaus
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JBaM0M3E1sG5xURP28m7.png", alt="Svgomg screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[SVGOMG](https://jakearchibald.github.io/svgomg/): A beautiful, material,
+responsive frontend for SVGO.
+
+### What we like?
+
+Built by our own [Jake Archibald](https://jakearchibald.com/), SVGOMG is an
+almost perfect example of a fully responsive and capable tool written with web
+technologies. It features a beautiful Material Design look, ServiceWorker
+ensures that the app loads quickly and is available offline, and the
+transitions are smooth on mobile.
+
+### Possible Improvements
+
+The only real nitpick we'd have to offer is that the initial UX is confusing
+due to the main UI missing. Other than that, job well done!
+
+## Q & A with Jake Archibald
+
+### Why the web?
+
+Laziness. Total laziness. I'm not an expert in developing Windows native apps,
+I'm not an expert in OSX native apps, nor am I an expert in creating native
+apps for iOS, Android, Windows Phone or Linux. I can however do the web, and
+that one skill set let me build something *once* that worked on all those
+platforms.
+
+### What worked really well during development?
+
+I'm really happy with the performance of it. I ensure the page renders before
+JS is available. In fact, it gets to first render with only 5k of HTML with
+some inlined CSS and SVG. The main scripts and CSS are all loaded in the
+background. This means the site appears to load in 1.5s even on 3G with an
+empty cache, and most of that is DNS and SSL.
+
+The opening screen is really simple, so doing that in 5k wasn’t a
+challenge. It really bothers me that so many sites wait on JS for their
+first render, some even require their JS to make further requests before
+rendering. This pushes 3G render time towards 10s – as a mobile user I know
+I wouldn’t put up with that.
+
+The main JS is 15k, but doesn’t include the parts that parse and minify the
+SVG, that’s loaded as an extra phase in the background. It’s great because
+interactivity lands really quickly, and the user doesn’t notice the extra
+loading. If the user manages to select an SVG before that script is available,
+the loading of that script appears to be part of the processing time.
+
+I also used ServiceWorker to make the whole thing work offline. Working
+offline is a pretty cool feature, but I’m mostly doing it for performance.
+Subsequent visits to SVGOMG render almost instantly, whatever connection the
+user has. Given the variations in mobile connectivity, that’s really valuable!
+
+### If you could have any API to improve your app, what would it be?
+
+I used Babel so I could make use of future JavaScript stuff. It'd be great
+to have some of that working natively in the platform. Specifically,
+async/await, arrow functions, argument defaults and destructuring.
+
+I had to use a library to gzip the output to find out its gzipped size.
+Using a library for this is kinda annoying as that code is already in the
+browser for HTTP stuff, there's just no API to it. Ideally it should be some
+kind of transform stream so I can count the size of the output without having
+the whole thing in memory.
diff --git a/src/site/content/en/blog/sw-range-requests/index.md b/src/site/content/en/blog/sw-range-requests/index.md
new file mode 100644
index 00000000000..4b7b2f89e70
--- /dev/null
+++ b/src/site/content/en/blog/sw-range-requests/index.md
@@ -0,0 +1,95 @@
+---
+title: Handling range requests in a service worker
+subhead: Make sure your service worker knows what to do when a partial response is requested.
+authors:
+  - jeffposnick
+description: Make sure your service worker knows what to do when a partial response is requested.
+date: 2020-10-06
+updated: 2020-10-06
+hero: image/admin/5HWlDEheVYh9LAs0p8vg.jpg
+hero_position: center
+alt: |
+  Photo of sliced cucumbers.
+tags:
+  - blog
+  - audio
+  # - caching
+  - media
+  - offline
+  - service-worker
+  # - video
+feedback:
+  - api
+---
+
+Some HTTP requests contain a [`Range:` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range), indicating that only a portion of the full resource should be returned. They're commonly used for streaming audio or video content to allow smaller chunks of media to be loaded on demand, instead of requesting the entirety of the remote file all at once.
+
+A [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/) is JavaScript code that sits in between your web app and the network, potentially intercepting outgoing network requests and generating responses for them.
+
+Historically, range requests and service workers haven't played nicely together. It's been necessary to take special steps to avoid bad outcomes in your service worker. Fortunately, this is starting to change. In browsers exhibiting the correct behavior, range requests will "just work" when passing through a service worker.
+
+## What's the issue?
+
+Consider a service worker with the following `fetch` event listener, which takes every incoming request and passes it to the network:
+
+```javascript
+self.addEventListener('fetch', (event) => {
+  // The Range: header will not pass through in
+  // browsers that behave incorrectly.
+  event.respondWith(fetch(event.request));
+});
+```
+
+{% Aside %}
+This sort of trivial `fetch` event listener should [normally be avoided](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#never_use_a_passthrough_fetch_handler); it's used here for illustrative purposes.
+{% endAside %}
+
+In browsers with the incorrect behavior, if `event.request` included a `Range:` header, that header would be silently dropped. The request that was received by the remote server would not include `Range:` at all. This would not necessarily "break" anything, since a server is _technically_ allowed to return the full response body, with a [`200` status code](https://developer.mozilla.org/docs/Web/HTTP/Status/200), even when a `Range:` header is present in the original request. But it would result in more data being transferred than is strictly needed from the perspective of the browser.
+
+Developers who were aware of this behavior could work around it by explicitly checking for the presence of a `Range:` header, and not calling `event.respondWith()` if one is present. By doing this, the service worker effectively removes itself from the response generation picture, and the default browser networking logic, which knows how to preserve range requests, is used instead.
+
+```javascript
+self.addEventListener('fetch', (event) => {
+  // Return without calling event.respondWith()
+  // if this is a range request.
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
+  event.respondWith(fetch(event.request));
+});
+```
+
+It's safe to say that most developers were not aware of the need to do this, though. And it wasn't clear _why_ that should be required. Ultimately, this limitation was due to [browsers](https://bugs.chromium.org/p/chromium/issues/detail?id=847428) needing to catch up to [changes in the underlying specification](https://github.com/whatwg/fetch/pull/560), which added support for this functionality.
+
+## What's been fixed?
+
+Browsers that behave correctly preserve the `Range:` header when `event.request` is passed to `fetch()`. This means the service worker code in my initial example will allow the remote server to see the `Range:` header, if it was set by the browser:
+
+```javascript
+self.addEventListener('fetch', (event) => {
+  // The Range: header will pass through in browsers
+  // that behave correctly.
+  event.respondWith(fetch(event.request));
+});
+```
+
+The server now gets a chance to properly handle the range request and return a partial response with a [`206` status code](https://developer.mozilla.org/docs/Web/HTTP/Status/206).
+
+## Which browsers behave correctly?
+
+Recent versions of Safari have the [correct functionality](https://trac.webkit.org/changeset/252047/webkit). Chrome and Edge, starting with [version 87](https://chromestatus.com/feature/5648276147666944), behave correctly as well.
+
+As of this October 2020, Firefox has not yet fixed this behavior, so you may still need to account for it while deploying your service worker's code to production.
+
+Checking the "Include range header in network request" row of the [Web Platform Tests dashboard](https://wpt.fyi/results/fetch/range/sw.https.window.html?label=master&label=experimental&aligned) is the best way to confirm whether or not a given browser has corrected this behavior.
+
+## What about serving range requests from the cache?
+
+Service workers can do much more than just pass a request through to the network. A common use case is to add resources, like audio and video files, to a [local cache](https://developer.mozilla.org/docs/Web/API/CacheStorage). A service worker can then fulfill requests from that cache, bypassing the network entirely.
+
+All browsers, including Firefox, support inspecting a request inside a `fetch` handler, checking for the presence of the `Range:` header, and then locally fulfilling the request with a [`206` response](https://developer.mozilla.org/docs/Web/HTTP/Status/206) that comes from a cache. The service worker code to properly parse the `Range:` header and return only the appropriate segment of the complete cached response is not trivial, though.
+
+Fortunately, developers who want some help can turn to [Workbox](https://developer.chrome.com/docs/workbox/), which is a set of libraries that simplifies common service worker use cases. The [`workbox-range-request module`](https://developer.chrome.com/docs/workbox/modules/workbox-range-request/) implements all the logic necessary to serve partial responses directly from the cache. A full recipe for this use case can be found [in the Workbox documentation](https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/).
+
+_The hero image on this post is by [Natalie Rhea Riggs](https://unsplash.com/photos/OnAwTs0tu3k) on Unsplash._
diff --git a/src/site/content/en/blog/swappie/index.md b/src/site/content/en/blog/swappie/index.md
new file mode 100644
index 00000000000..164d01aaaab
--- /dev/null
+++ b/src/site/content/en/blog/swappie/index.md
@@ -0,0 +1,164 @@
+---
+layout: post
+title: How Swappie increased mobile revenue by 42% by focusing on Core Web Vitals
+subhead: Finding correlation between site performance and business metrics was the key to driving the success of their optimization efforts.
+authors:
+  - linahansson
+date: 2021-09-15
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2aneaEewLLPNYYAUXXck.png
+thumbnail: image/VbAJIREinuYvovrBzzvEyZOpw5w1/3NkZrkyqQUMM0b7osxiH.png
+alt: The Swappie logo.
+description: |
+  This case study explains how Swappie team increased conversions
+  and revenue by optimizing their web app for Core Web Vitals.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+  - performance
+  - web-vitals
+---
+
+Swappie is a successful start-up that sells refurbished phones. For a few years
+they prioritized adding new features over site performance, however when they
+noticed that business results on the mobile site were lagging behind the desktop
+version, a shift happened. They focused on optimizing performance and soon saw
+an uptick in mobile revenue.
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">42<sub>%</sub></p>
+    <p>Increase in revenue coming from mobile visitors</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">10<sub>pp*</sub></p>
+    <p>*percentage point Rel mCvR increase</p>
+  </div>
+</div>
+
+### Highlighting the opportunity
+
+[Relative Mobile Conversion Rate](https://www.blog.google/products/marketingplatform/analytics/mobile-challenge-and-how-measure-it/)
+(Rel mCvR) is calculated by dividing the Mobile Conversion Rate with the Desktop
+Conversion Rate. There are many opportunities for tracking speed metrics, but
+connecting them to business metrics can be quite tricky. Since the same
+campaigns and seasonalities reach both mobile and desktop, the Rel mCvR metric
+strips away the influence of these external parameters, and only shows if the
+mobile site is improving or not.
+
+The
+[average for the ten biggest e-commerce sites in the United States is a Rel mCvR of 50%](https://d34w0339mx0ifp.cloudfront.net/content/2020%20Ecommerce%20Stats%20Report.pdf),
+but Swappie was at 24%. This indicated that the mobile site had challenges and
+that the company was missing out on revenue, which led to launching the
+performance improvement project.
+
+### Measuring the impact of performance improvements
+
+Swappie used Google Analytics to set up daily tracking of Rel mCvR and Mobile
+Average Page Load Time, using
+[this template spreadsheet](https://docs.google.com/spreadsheets/d/13BnREVWPhIiDYdEvOSYP3ovlMggPbnRQPMTSir6y__I/edit?usp=sharing).
+(Read the
+[instructions for how to use the spreadsheet](/value-of-speed/#doing-the-analysis).)
+They also started
+[tracking Core Web Vitals through Google Analytics and BigQuery](/vitals-ga4/).
+With tracking in place, the developers started working on site performance.
+
+After only three months of work, the impact was clear–Rel mCvR went from 24% to
+34% and mobile revenue had increased 42%!
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/CNuIW0SPMXYGlzMRUcds.png", alt="A graph showing the correlation between decreased average page load time and increased Rel mCVR.", width="800", height="502", class="screenshot" %}
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">23<sub>%</sub></p>
+    <p>Lower average page load time</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">55<sub>%</sub></p>
+    <p>Lower LCP</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">91<sub>%</sub></p>
+    <p>Lower CLS</p>
+  </div>
+    <div class="stats__item">
+    <p class="stats__figure">90<sub>%</sub></p>
+    <p>Lower FID</p>
+  </div>
+</div>
+
+### Optimizations
+
+#### Optimizing for LCP and CLS
+
+Swappie's development team found that there was lots of room for improvement of
+small things that were overlooked for a long time. Studying the site on
+different viewports, and in different languages, highlighted issues with LCP and
+CLS that were easy to solve and had a big impact on overall performance.
+For example, rendering the LCP element on the server instead of the client when
+possible led to decreased LCP.
+
+Detecting layout shifts was challenging, since they might vary a lot based on
+the viewport and connection. After getting [CWV metrics from users to their
+analytics](/vitals-ga4/), they knew they were on the right track
+as CLS had decreased.
+
+#### Images
+
+Images were optimised with preloading, lazy loading and proper sizing. They
+preload major images (for example LCP), while loading images outside of the
+viewport only when needed.
+
+#### Fonts
+
+Swappie optimised fonts by switching providers. This made a big impact as they
+needed an optimal way to handle typefaces required by different languages.
+
+#### Third-party scripts
+
+Swappie put a lot of effort into reviewing each third-party script and widget,
+where it was used, and the functionalities it provided. After discussions with
+all the stakeholders, they made plans to reduce the scripts' impact on the site,
+while keeping the functionalities. They removed what was unnecessary and
+optimized the rest, significantly decreasing the amount of third-party
+JavaScript on the site.
+
+#### Removing unused code and optimizing bundling
+
+Optimising imports and removing unused JS and CSS contributed small improvements
+to Swappie's site performance, however those small improvements add up over
+time. They also optimised their bundling setup.
+
+### Creating a performance culture at Swappie
+
+The result Swappie achieved stems not only from the changes in the code, but
+also the changes in the organization and its priorities.
+
+The engineering lead, Teemu Huovinen, explains:
+
+{% Blockquote 'Teemu Huovinen' %}
+You need to link site speed to business metrics to truly highlight the
+importance of it. It all comes down to prioritisation when you're short on time
+and resources, which is always the case. Prioritising customer value is the way
+to go, but it's all too easy to focus on new features and more direct conversion
+improvements if you see site speed as only improving the "feel" of the site.
+Linking site speed to business metrics is not always easy, and that's where the
+[calculation with Rel mCvR](https://docs.google.com/spreadsheets/d/13BnREVWPhIiDYdEvOSYP3ovlMggPbnRQPMTSir6y__I/edit?usp=sharing)
+helped us a lot.
+{% endBlockquote %}
+
+Once the team of developers was given the opportunity to focus completely on
+site speed for a quarter, they were more motivated to dive deeper.
+
+{% Blockquote 'Teemu Huovinen' %}
+Combining our impact with our team's growth is what makes it even more
+impressive. Four of our seven developers had started within the month when we
+began working on performance. All credit to the team, it's truly amazing how we
+were able to rally around the topic and have such great impact.
+{% endBlockquote %}
+
+Teemu also points out the importance of spending time at the start to make
+data-informed plans, learning how to use the DevTools Performance tab, and
+setting up user analytics before making any improvements. Graphs (especially the
+ones going in the right direction) are a great source of feedback and validation
+for your work! Looking at user CWV metrics alongside Lighthouse scores helped
+them focus on optimizing the right things that would affect the most people.
diff --git a/src/site/content/en/blog/synchronized-cross-device-testing/index.md b/src/site/content/en/blog/synchronized-cross-device-testing/index.md
new file mode 100644
index 00000000000..cbd30f3b1dd
--- /dev/null
+++ b/src/site/content/en/blog/synchronized-cross-device-testing/index.md
@@ -0,0 +1,415 @@
+---
+layout: post
+title: Synchronized cross-device mobile testing
+authors:
+  - addyosmani
+date: 2013-11-25
+tags:
+  - blog
+---
+
+## Introduction
+
+If you're a web developer targeting the multi-device web, you likely have to
+test your sites and web apps across a number of different devices and
+configurations. Synchronized testing can help here and is an effective way to
+automatically perform the same interaction across a number of devices and
+browsers at the same time.
+
+Synchronized testing can help solve two particularly time-consuming problems:
+
+- **Keeping all your devices in sync with the URL you want to test.** Manually
+  loading them on each device is so yesterday, takes longer and makes it easier
+  to miss out on regressions.
+- **Synchronizing interactions.** Being able to load up a page is great for
+  visual testing, but for interaction testing you ideally also want to be able
+  to synchronize scrolls, clicks and other behaviours.
+
+Thankfully if you have access to some of your target devices, there are a number
+of tools aimed at improving the flow from your desktop to your mobile devices.
+In this article, we will look at Ghostlab, Remote Preview, Adobe Edge Inspect
+and Grunt.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rfxmvUNtDJ2uOtnIblYH.jpg", alt="This is my desk. Well, it used to be my desk. It's now just a mobile museum.", width="800", height="598" %}
+  <figcaption>This is my desk. Well, it used to be my desk. It's now just a mobile museum.</figcpation>
+</figure>
+
+## Tools
+
+### GhostLab (Mac)
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tykqmqiVwnOsRrmQektw.png", alt="GhostLab for Mac by Vanamco", width="800", height="517" %}
+  <figcaption>GhostLab for Mac by Vanamco</figcpation>
+</figure>
+
+[Ghostlab](http://vanamco.com/ghostlab/) is a commercial Mac application ($49)
+designed to synchronise testing for sites and web apps across multiple devices.
+With minimum setup it allows you to simultaneously sync:
+
+- Clicks
+- Navigation
+- Scrolls
+- Form input (e.g login forms, sign-up)
+
+This makes testing your site's end-to-end user experience on multiple devices
+very straightforward. Once you've opened your page in a browser on your devices,
+any changes to navigation (including refreshes) cause any other connected
+devices to refresh instantly. Ghostlab supports watching local directories, so
+this refresh also happens when you save edits to local files, keeping everything
+in sync always!
+
+I found setting up Ghostlab a painless process. To get started, download,
+install and run the
+[trial](http://awesome.vanamco.com/downloads/ghostlab/latest/Ghostlab.dmg) (or
+full version if you're in the buying mood). You will then want to connect your
+Mac and the devices you wish to test to the same Wifi network so that they're
+discoverable.
+
+Once Ghostlab is running, you can either click "+" to add a URL for testing or
+simply drag it from your browser's address bar. Alternatively, drag the local
+folder you wish to test over into the main window and a new site entry will be
+created. For this article, I'm testing a live version of
+[http://html5rocks.com](http://html5rocks.com). Cheeky, eh? ; )
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OU4JcU5JRVLazL3tUgdf.png", alt="Choose a URL or local directory on your machine", width="800", height="410" %}
+  <figcaption>Choose a URL or local directory on your machine</figcpation>
+</figure>
+
+
+You can then kick-start off a new Ghostlab server by clicking the ">" play
+button next to the name of your site. This starts a new server, available at an
+IP address specific to your network (e.g
+[http://192.168.21.43:8080](http://192.168.21.43:8080)).
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hAHpmYqgtsXruQhdUsIO.jpg", alt="Ghostlab server locally proxying content from our URL", width="800", height="598" %}
+  <figcaption>Ghostlab server locally proxying content from our URL</figcpation>
+</figure>
+
+Here, I've connected up a Nexus 4 and pointed Chrome for Android to the IP
+address Ghostlab gave me. That's all I have to do. Ghostlab doesn't require that
+you install a dedicated client per device like some other solutions and it means
+you can start testing even more quickly.
+
+Any device you connect to the Ghostlab URL will be added to the list of
+connected clients in the sidebar to the right of the main Ghostlab window.
+Double-clicking the device name displays additional details such as the screen
+size, OS and so on. You should now be able to test navigating and synchronizing
+clicks! Yay.
+
+Ghostlab is also able to display some stats about connected devices like the UA
+string, viewport width and height, device pixel density, aspect ratio and more.
+At any time, you can manually change the base URL you are inspecting by clicking
+the settings cog next to an entry. This opens up a configuration window that
+looks like the below:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/a9Zxmwcg1V108mX42H2e.png", alt="Configure files to watch, HTTP headers, character sets and more.", width="800", height="508" %}
+  <figcaption>Configure files to watch, HTTP headers, character sets and more.</figcpation>
+</figure>
+
+I can now select one of my other connected devices, click on different links
+around HTML5Rocks and the navigation is synchronized both on my desktop Chrome
+(where I entered in the same Ghostlab URL) as well as across all of my devices.
+
+What's even better is that Ghostlab has an option allowing you to proxy all
+links going through the network so that instead of a click on
+[http://192.168.21.43:8080/www.html5rocks.com](http://192.168.21.43:8080/www.html5rocks.com)
+navigating to
+[www.html5rocks.com/en/performance](http://www.html5rocks.com/performance)
+(for example), which would break the automatic cross-device refresh suffered by
+other solutions, it can just translate this link into
+[http://192.168.21.43/www.htm5rocks.com/en/performance](http://192.168.21.43/www.htm5rocks.com/performance)
+so that navigating is completely seamless across all my devices.
+
+To enable, check "Load all content through Ghostlab" under the "Content Loading"
+tab.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xO5WRNa2fc9vzQLZb1QS.png", alt="Ghostlab can rewrite URLs so all resources are loaded through the Ghostlab proxy. Useful for synchronizing navigations to multiple pages", width="800", height="504" %}
+  <figcaption>Ghostlab can rewrite URLs so all resources are loaded through the Ghostlab proxy. Useful for synchronizing navigations to multiple pages</figcpation>
+</figure>
+
+Seeing it in action:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eQE7t4VygF5xq7CJpoQV.jpg", alt="Synchronized testing of an Android, Windows 8 and Firefox OS phone with Ghostlab", width="800", height="598" %}
+  <figcaption>Synchronized testing of an Android, Windows 8 and Firefox OS phone with Ghostlab</figcpation>
+</figure>
+
+Ghostlab is capable of loading any number of sites or windows across any
+supported browser. This doesn't just let you test your site at different
+resolutions, but how your code behaves on different browsers and platforms. Yay!
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EkUMeViMnNTjdRLrVKQG.gif", alt="Synchronizing scroll, clicks and navigation across all of the test devices", width="623", height="351" %}
+  <figcaption>Synchronizing scroll, clicks and navigation across all of the test devices</figcpation>
+</figure>
+
+Ghostlab allows you to configure the setup for the project workspace you're
+previewing and you can specify whether you would like changes to the directory
+to be watched and refreshed when detected. This means changes cause all
+connected clients to be refreshed. No more manual refreshes!
+
+You may be wondering what else Ghostlab can help with. Whilst it's certainly not
+a swiss-army knife, it also supports remote code inspection on connected
+devices. Through the main interface, double-clicking on any device name should
+bring up a "debug" option which will launch a version of the [Chrome DevTools](http://devtools.chrome.com) for
+you to play around with.
+
+Ghostlab makes this possible via the bundled [Weinre](http://people.apache.org/~pmuellr/weinre/docs/latest/) remote web inspector, which
+lets you debug scripts and tweak styles on connected devices. Similar to the [remote debugging](https://developer.chrome.com/docs/devtools/remote-debugging/) experience available for Chrome for Android, you can select elements, run some
+performance profiling and debug scripts.
+
+All in all, I was impressed with how quickly I was able to use Ghostlab for
+everyday testing across devices. If you're a freelancer, you might find the cost
+of the commercial license a little high (see below for more options).  However,
+I'm happy to recommend Ghostlab otherwise.
+
+### Adobe Edge Inspect CC (Mac, Windows)
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8U2DXCGXtItfi82pNOv1.png", alt="Adobe's Creative Cloud subscription includes Edge Inspect", width="800", height="512" %}
+  <figcaption>Adobe's Creative Cloud subscription includes Edge Inspect</figcpation>
+</figure>
+
+Adobe Edge Inspect is part of the Adobe Creative Cloud subscription package, but
+also comes available as a free trial. It allows you to drive multiple iOS and
+Android devices with Chrome (via the Edge Inspector Chrome extension), so that
+if you browse to a particular URL all of your connected devices stay in sync.
+
+To get set up, first sign up for an [Adobe Creative
+Cloud](http://creative.adobe.com/) account or login to an existing account if
+you already have one.  Next, download and install [Edge
+Inspect](https://creative.adobe.com/inspect) from Adobe.com (available for Mac
+and Windows at present, but not Linux - sorry!).  Note the
+[docs](http://forums.adobe.com/docs/DOC-2535) for Edge Inspect are useful to
+keep at hand.
+
+Once installed, you'll want to get the [Edge inspect
+extension](http://www.adobe.com/go/edgeinspect_chrome) for Chrome so that you
+can synchronize browsing between connected devices.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cae6RFljZG7BS6zuNMrK.png", alt="The Edge Inspect CC Chrome Extension", width="325", height="214" %}
+  <figcaption>The Edge Inspect CC Chrome Extension</figcpation>
+</figure>
+
+You will also need to install an Edge Inspect client on each device you wish to
+sync actions with. Thankfully clients are available for
+[iOS](http://www.adobe.com/go/edgeinspect_ios),
+[Android](http://www.adobe.com/go/edgeinspect_android) and
+[Kindle](http://www.adobe.com/go/edgeinspect_amazon).
+
+With the installation process behind us, we can now start inspecting our pages.
+You'll need to make sure all your devices are connected to the same network for
+this to work.
+
+Start up Edge Inspect on your desktop, the Edge Inspect extension in Chrome and
+then the app on your devices (see below):
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RrPK7JYnuiGoC77xcj1Q.png", alt="Connecting a device up to the Edge Inspect extension", width="605", height="451" %}
+  <figcaption>Connecting a device up to the Edge Inspect extension</figcpation>
+</figure>
+
+We can now navigate to a site like HTML5Rocks.com on desktop and our mobile
+device will automatically navigate to the same page.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/XAvQlt7WHiuPELPsHJKv.jpg", alt="Driving navigation of a URL across multiple connected devices", width="800", height="598" %}
+  <figcaption>Driving navigation of a URL across multiple connected devices</figcpation>
+</figure>
+
+In the extension, you'll also now see your device listed with a <> symbol next
+to it as in the screenshot below. Clicking this will launch an instance of Weinre allowing you to inspect and debug your page.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rWsxtUuWj17uJA92rrzG.png", alt="Connected devices appear with a <> symbol next to them, which can be used to launch the Weinre debugger", width="800", height="549" %}
+  <figcaption>Connected devices appear with a <> symbol next to them, which can be used to launch the Weinre debugger</figcpation>
+</figure>
+
+Weinre is a DOM viewer and console, and lacks features from the Chrome DevTools like JavaScript debugging, profiling, and network waterfall. While it is the bare minimum of developer tooling, it's useful for sanity-checking DOM and JavaScript state.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vGeQ7zaldu9MPJCu8iFf.png", alt="Debugging with Weinre", width="800", height="456" %}
+  <figcaption>Debugging with Weinre</figcpation>
+</figure>
+
+The Edge Inspect extension also supports generating screenshots from connected devices with ease. Useful for layout testing or just getting captures of your page to share with others.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Nc1Lf9Fv72IDRWD8o2v1.png", alt="Screenshot generation with Edge Inspect", width="547", height="296" %}
+  <figcaption>Screenshot generation with Edge Inspect</figcpation>
+</figure>
+
+For developers already paying for CC, Edge Inspect is a great solution. It does
+however come with a few caveats such as each device requiring a dedicated client
+to be installed and a little extra setup work that you may not find with an
+alternative like Ghostlab.
+
+### Remote Preview (Mac, Windows, Linux)
+
+[Remote Preview](http://viljamis.com/blog/2012/remote-preview/) is an open
+source tool where you host HTML pages and content that you can display on
+multiple devices.
+
+Remote preview executes an XHR call at an interval of every 1100ms to check if a
+URL in a configuration file has changed. If it finds that it has, the script
+updates the src attribute of an iframe loaded into the page for each device,
+loading the page into it. If there are no changes detected, the script will
+continue polling until a change is made.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ekGQXOwVV8IPlwEkwVDm.gif", alt="Synchronized URL testing across 27+ devices", width="800", height="450" %}
+  <figcaption>Synchronized URL testing across 27+ devices</figcpation>
+</figure>
+
+This is great for chaining devices together and easily changing a URL across all
+of them. To get started:
+
+1. [Download](https://github.com/viljamis/Remote-Preview) Remote Preview and move all of the files for it into a locally accessible server. This can be Dropbox,
+a development server or something else.
+1. Load up "index.html" from this download on all of your target devices. This
+page will be used as a driver and will load up the page you want to test using
+an iframe.
+1. Edit "url.txt" (included in the download and now served on your server) with
+the URL you wish to preview. Save this file.
+1. Remote Preview will notice that the url.txt file has changed and will refresh
+all connected devices to load up your URL.
+
+Whilst a lo-fi solution, Remote Preview is free and works.
+
+### Grunt + Live-Reload (Mac, Windows, Linux)
+
+[Grunt](http://gruntjs.com) (and [Yeoman](http://yeoman.io)) are command-line
+tools used for scaffolding and building projects on the front-end. If you're
+already using these tools and have live-reload setup, it's easy to update your
+workflow to enable cross-device testing where each change you make in your
+editor causes a reload in any of the devices you've opened up your local app on.
+
+You're probably used to using `grunt server`. When run from the root directory
+of your project, it watches for any changes to your source files and
+automatically refreshes the browser window. This is thanks to the
+grunt-contrib-watch task which we run as part of the server.
+
+If you happen to have used Yeoman to scaffold out your project, it will have
+created a Gruntfile with everything you need to get live-reload working on your
+desktop. To get it functioning cross-device, you just need to change one
+property, which is the `hostname` (on your desktop). It should be listed under
+`connect`. If you notice `hostname` is set to `localhost` just change it to
+0.0.0.0. Next run `grunt server` and as usual, a new window should open
+displaying a preview of your page. The URL will probably look like
+[http://localhost:9000](http://localhost:9000) (9000 is the port).
+
+Fire up a new tab or terminal and use `ipconfig | grep inet` to discover your
+system's internal IP. It may look like `192.168.32.20`. The last step is to open
+up a browser like Chrome on the device you would like to synchronize livereloads
+to and type in this IP address followed by the port number from earlier. i.e
+`192.169.32.20:9000`.
+
+That's it! Live-reload should now cause any edits you make to source files on
+your desktop to trigger reloads in both your desktop browser *and* the browser
+on your mobile device. Awesome!
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lpWoeIDEbXAI917RMrii.jpg", alt="Saved edits on desktop now trigger a live-reload in your desktop browser as well as mobile browsers on devices with the same URL", width="800", height="598" %}
+  <figcaption>Saved edits on desktop now trigger a live-reload in your desktop browser as well as mobile browsers on devices with the same URL</figcpation>
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MzRPsvU8WIadYdcUf81K.gif", alt="Cross-device live-reload in action. Each edit/save gives you a real-time for of your current page, great for responsive design testing.", width="735", height="413" %}
+  <figcaption>Cross-device live-reload in action. Each edit/save gives you a real-time for of your current page, great for responsive design testing.</figcpation>
+</figure>
+
+Yeoman also has a [Mobile generator](https://github.com/yeoman/generator-mobile)
+available which makes setting this workflow up a breeze.
+
+### Emmet LiveStyle
+
+Emmet LiveStyle is a browser and editor plugin that brings live CSS editing to
+your development workflow. It is currently available for Chrome, Safari and
+Sublime Text and supports bi-directional (editor to browser and vice-versa)
+editing.
+
+Emmet LiveStyle doesn't force a complete browser refresh when you make changes,
+but instead pushes CSS edits across the DevTools remote debugging protocol. What
+this means is that you can see changes made in your desktop editor in any
+connected version of Chrome, whether it be on desktop Chrome or Chrome for
+Android.
+
+LiveStyle has what it calls "multi-view mode", which is ideal for testing and
+tweaking responsive designs across windows and devices. In multi-view mode, all
+editor updates are applied to all windows as are DevTools updates for the same
+page.
+
+**With the LiveStyle package installed, to get started with live CSS editing:**
+
+1. Start up Sublime Text and open up a CSS file in a project
+1. Start Chrome and go to the page with the CSS you would like to edit
+1. Open DevTools and go to the LiveStyle panel. Check the "Enable LiveStyle"
+option. Note: DevTools will need to be kept open during your live editing
+session for each window in order for style updates to be applied.
+1. When this has been enabled, a list of stylesheets will be displayed on the
+left and a list of your editor files on the right. Select the editor file to be
+associated with the browser. That's it! Boom.
+
+Now the list of editor files will be automatically updated when you edit,
+create, open or close files.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LHsl7cCjGBztNAN77XKr.gif", alt="Changes to CSS in Sublime being instantly patched across different browser windows and an emulator.", width="781", height="586" %}
+  <figcaption>Changes to CSS in Sublime being instantly patched across different browser windows and an emulator. </figcpation>
+</figure>
+
+## Conclusions
+
+Cross-device testing is still a new and fast moving space with many new
+contenders in development. Thankfully there exist a number of free and
+commercial tools for assuring your compatibility and testing across a wide
+number of device sets.
+
+That said, there's still a lot of potential for improvement in this area and we
+would encourage you to think about how the tooling for testing across devices
+can be further improved. Anything that reduces setup time and improves your
+cross-device workflow is a win.
+
+### Issues
+
+Perhaps the largest issues I ran into during testing with these tools was
+devices regularly going to sleep. This isn't a deal-breaker, but does get
+annoying after a while. Where possible it's a good idea to set your devices to
+not sleep as a workaround, however, keep in mind that this can drain your
+battery unless you're always plugged in.
+
+I didn't personally run into any major issues with GhostLab. At $49 some may
+find the price a little steep; however, keep in mind if you're using it
+regularly it more or less pays for itself. One of the nicest things about the
+setup was not having to worry about installing and managing a client per target
+device. The same URL worked everywhere.
+
+With Adobe Edge Inspect, I found having to install and use specific clients on
+each device a little bit tedious. I also found it didn't consistently refresh
+all of the clients connected up, meaning I had to do this myself from the Chrome
+extension. It also requires a subscription to Creative Cloud and is limited to
+loading up sites in the client rather than in a selected browser on your
+devices. This may limit your ability to accurately test.
+
+Remote Preview functioned as advertised, but is extremely lightweight. This
+means for anything more than refreshing your site across devices, you'll need a
+more advanced tooling option. It won't for example, synchronize clicks or
+scrolls.
+
+## Recommendations
+
+If you're looking for a free cross-platform solution to get you started, I
+recommend using Remote Preview. For those working in a company looking for a
+paid-for solution, GhostLab has been consistently excellent in my experience but
+is only available for the Mac. For Windows users, Adobe Edge Inspect is your
+best call and minus some quirks, does generally get the job done.
+
+Grunt and LiveStyle are also excellent for augmenting your live iteration during
+development.
diff --git a/src/site/content/en/blog/ta-code-coverage/index.md b/src/site/content/en/blog/ta-code-coverage/index.md
new file mode 100644
index 00000000000..114e7df0f43
--- /dev/null
+++ b/src/site/content/en/blog/ta-code-coverage/index.md
@@ -0,0 +1,410 @@
+---
+layout: post
+title: Four common types of code coverage
+date: 2023-09-06
+subhead: >
+  Learn what code coverage is and discover four common ways to measure it.
+description: >
+  Learn what code coverage is and discover four common ways to measure it.
+authors:
+  - ramona
+  - jecelynyeen
+hero: image/NJdAV9UgKuN8AhoaPBquL7giZQo1/A5IWi1Y1jqjDCqmQQxD6.jpg
+alt: 'A gree fence with a 100% sign.'
+tags:
+  - blog
+  - test-automation
+  - testing
+---
+
+Have you heard the phrase "code coverage"? In this post, we will explore what code coverage in tests is and four common ways to measure it.
+
+## What is code coverage?
+
+Code coverage is a metric that measures the percentage of source code your tests execute. It helps you identify areas that may lack proper testing. 
+
+Often, recording these metrics looks like this:
+
+<style type="text/css">
+  .tg {
+    border: 1px solid var(--color-stroke);
+  }
+
+  .tg tbody {
+    background-color: var(--color-mid-bg);
+  }
+  .tg-zo2y span {
+    color: var(--color-state-bad-text);
+  }
+  .tg-bsyc span {
+    color: var(--color-state-good-text);
+  }
+  .tg-kfug span {
+    color: var(--color-state-warn-text);
+  }
+</style>
+<table class="tg">
+<thead>
+  <tr>
+    <th class="tg-1wig"><span>File</span></th>
+    <th class="tg-1wig"><span>% Statements</span></th>
+    <th class="tg-1wig"><span>% Branch</span></th>
+    <th class="tg-1wig"><span>% Functions</span></th>
+    <th class="tg-1wig"><span>% Lines</span></th>
+    <th class="tg-1wig"><span>Uncovered lines</span></th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td class="tg-0lax"><span>file.js</span></td>
+    <td class="tg-bsyc"><span>90%</span></td>
+    <td class="tg-bsyc"><span>100%</span></td>
+    <td class="tg-bsyc"><span>90%</span></td>
+    <td class="tg-bsyc"><span>80%</span></td>
+    <td class="tg-zo2y"><span>89,256</span></td>
+  </tr>
+  <tr>
+    <td class="tg-0lax"><span>coffee.js</span></td>
+    <td class="tg-kfug"><span>55.55%</span></td>
+    <td class="tg-bsyc"><span>80%</span></td>
+    <td class="tg-kfug"><span>50%</span></td>
+    <td class="tg-kfug"><span>62.5%</span></td>
+    <td class="tg-zo2y"><span>10-11, 18</span></td>
+  </tr>
+</tbody>
+</table>
+
+
+As you add new features and tests, increasing code coverage percentages can give you more confidence that your application has been thoroughly tested. However, there is more to discover.
+
+## Four common types of code coverage
+
+There are four common ways to collect and calculate code coverage: function, line, branch, and statement coverage.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/W9iaHL2YtKeBz5vRmWFQ.png", alt="Four types of text coverage.", width="800", height="449" %}
+
+To see how each type of code coverage calculates its percentage, consider the following code example for calculating coffee ingredients:
+
+
+```js
+/* coffee.js */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  let espresso, water;
+
+  if (coffeeName === 'espresso') {
+    espresso = 30 * cup;
+    return { espresso };
+  }
+
+  if (coffeeName === 'americano') {
+    espresso = 30 * cup; water = 70 * cup;
+    return { espresso, water };
+  }
+
+  return {};
+}
+
+export function isValidCoffee(name) {
+  return ['espresso', 'americano', 'mocha'].includes(name);
+}
+```
+
+The tests that verify the `calcCoffeeIngredient` function are:
+
+```js
+/* coffee.test.js */
+
+import { describe, expect, assert, it } from 'vitest';
+import { calcCoffeeIngredient } from '../src/coffee-incomplete';
+
+describe('Coffee', () => {
+  it('should have espresso', () => {
+    const result = calcCoffeeIngredient('espresso', 2);
+    expect(result).to.deep.equal({ espresso: 60 });
+  });
+
+  it('should have nothing', () => {
+    const result = calcCoffeeIngredient('unknown');
+    expect(result).to.deep.equal({});
+  });
+});
+```
+
+You can run the code and tests on this [live demo](https://stackblitz.com/edit/vitest-coffee-coverage?file=README.md ) or check out the [repository](https://github.com/leichteckig/vitest-coffee-example). 
+
+### Function coverage
+
+**Code coverage: 50%**
+
+
+<style>del {text-decoration: none; !important}</style>
+
+```text/1-4/5-8
+/* coffee.js */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  // ...
+}
+
+function isValidCoffee(name) {
+  // ...
+}
+```
+
+*Function coverage* is a straightforward metric. It captures the percentage of functions in your code that your tests call.
+
+In the code example, there are two functions: `calcCoffeeIngredient` and `isValidCoffee`. The tests only call the `calcCoffeeIngredient` function, so the function coverage is 50%.
+
+### Line coverage
+
+**Code coverage: 62.5%**
+
+```text/5-7,10,15/11-12,19
+/* coffee.js */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  let espresso, water;
+
+  if (coffeeName === 'espresso') {
+    espresso = 30 * cup;
+    return { espresso };
+  }
+
+  if (coffeeName === 'americano') {
+    espresso = 30 * cup; water = 70 * cup;
+    return { espresso, water };
+  }
+
+  return {};
+}
+
+export function isValidCoffee(name) {
+  return ['espresso', 'americano', 'mocha'].includes(name);
+}
+```
+
+*Line coverage* measures the percentage of executable code lines that your test suite executed. If a line of code remains unexecuted, it means that some part of the code hasn't been tested.
+
+The code example has eight lines of executable code (highlighted in red and green)  but the tests don’t execute the `americano` condition (two lines) and the `isValidCoffee` function (one line). This results in a line coverage of 62.5%.
+
+Note that line coverage doesn’t take into account declaration statements, such as `function isValidCoffee(name)` and `let espresso, water;`, because they are not executable.
+
+### Branch coverage
+
+**Code coverage: 80%**
+
+```text/1-2,7,15/12
+/* coffee.js */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  // ...
+
+  if (coffeeName === 'espresso') {
+    // ...
+    return { espresso };
+  }
+
+  if (coffeeName === 'americano') {
+    // ...
+    return { espresso, water };
+  }
+
+  return {};
+}
+…
+```
+
+*Branch coverage* measures the percentage of executed branches or decision points in the code, such as if statements or loops. It determines whether tests examine both the true and false branches of conditional statements.
+
+There are five branches in the code example:
+
+<style type="text/css">
+  li img.custom-icon {
+    margin-top:0 !important;
+    display:inline;
+  }
+</style>
+
+1. Calling `calcCoffeeIngredient` with just `coffeeName` {% Img class="custom-icon", src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/CpHz0pF9m750yTrbDveT.svg", alt="Chek mark.", width="20", height="20" %}
+1. Calling `calcCoffeeIngredient` with `coffeeName` and `cup` {% Img class="custom-icon", src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/CpHz0pF9m750yTrbDveT.svg", alt="Chek mark.", width="20", height="20" %}
+1. Coffee is Espresso {% Img class="custom-icon", src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/CpHz0pF9m750yTrbDveT.svg", alt="Chek mark.", width="20", height="20" %}
+1. Coffee is Americano {% Img class="custom-icon", src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/ufOsI388YJ9gqjrXjZuQ.svg", alt="X mark.", width="20", height="20" %}
+1. Other coffee {% Img class="custom-icon", src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/CpHz0pF9m750yTrbDveT.svg", alt="Chek mark.", width="20", height="20" %}
+
+The tests cover all branches except the `Coffee is Americano` condition. So branch coverage is 80%.
+
+### Statement coverage
+
+**Code coverage: 55.55%**
+
+```text/5-7,10,15/11,12,19
+/* coffee.js */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  let espresso, water;
+
+  if (coffeeName === 'espresso') {
+    espresso = 30 * cup;
+    return { espresso };
+  }
+
+  if (coffeeName === 'americano') {
+    espresso = 30 * cup; water = 70 * cup;
+    return { espresso, water };
+  }
+
+  return {};
+}
+
+export function isValidCoffee(name) {
+  return ['espresso', 'americano', 'mocha'].includes(name);
+}
+```
+
+*Statement coverage* measures the percentage of statements in your code that your tests execute. At first glance, you might wonder, “isn’t this the same as line coverage?” Indeed, statement coverage is similar to line coverage but takes into account single lines of code that contain multiple statements.
+
+In the code example, there are eight lines of executable code, but there are nine statements. Can you spot the line containing two statements?
+
+{% Details %}
+{% DetailsSummary %}
+Check your answer
+{% endDetailsSummary %}
+It's the following line: `espresso = 30 * cup; water = 70 * cup;`
+{% endDetails %}
+
+The tests cover only five of the nine statements, therefore the statement coverage is 55.55%.
+
+If you always write one statement per line, your line coverage will be similar to your statement coverage.
+
+## What type of code coverage should you choose?
+
+Most code coverage tools include these four types of common code coverage. Choosing which code coverage metric to prioritize depends on specific project requirements, development practices, and testing goals.
+
+In general, statement coverage is a good starting point because it is a simple and easy-to-understand metric. Unlike statement coverage, branch coverage and function coverage measure whether tests call a condition (branch) or a function. Therefore, they are a natural progression *after* statement coverage.
+
+Once you have achieved high statement coverage, you can then move on to branch coverage and function coverage.
+
+## Is test coverage the same as code coverage?
+
+No. Test coverage and code coverage are often confused but they are different:
+
+- **Test coverage**: A qualitative metric that measures how well the test suite covers the features of the software. It helps determine the level of risk involved.
+- **Code coverage**: A quantitative metric that measures the proportion of code executed during testing. It is about how much code the tests cover.
+
+Here is a simplified analogy: imagine a web application as a house.
+
+- Test coverage measures how well the tests cover the rooms in the house.
+- Code coverage measures how much of the house the tests have walked through.
+
+## 100% code coverage doesn’t mean no bugs
+
+While it is certainly desirable to achieve high code coverage in testing, 100% code coverage doesn’t guarantee the absence of bugs or flaws in your code.
+
+### A meaningless way to achieve 100% code coverage
+
+Consider the following test:
+
+```js
+/* coffee.test.js */
+
+// ...
+describe('Warning: Do not do this', () => {
+  it('is meaningless', () => { 
+    calcCoffeeIngredient('espresso', 2);
+    calcCoffeeIngredient('americano');
+    calcCoffeeIngredient('unknown');
+    isValidCoffee('mocha');
+    expect(true).toBe(true); // not meaningful assertion
+  });
+});
+```
+
+This test achieves 100% function, line, branch, and statement coverage, but it doesn’t make sense because it doesn’t actually test the code. The `expect(true).toBe(true)` assertion will always pass regardless of whether the code works correctly.
+
+### A bad metric is worse than no metric
+
+A bad metric can give you a false sense of security, which is worse than having no metric at all. For example, if you have a test suite that achieves 100% code coverage but the tests are all meaningless, then you may get a false sense of security that your code is well tested. If you accidentally delete or break a part of the application code, the tests will still pass, even though the application no longer works correctly.
+
+To avoid this scenario:
+
+- **Test review.** Write and review tests to make sure they are meaningful and test the code in a variety of different scenarios.
+- **Use code coverage as a guideline**, not as the only measure of test effectiveness or code quality.
+
+## Using code coverage in different types of testing
+
+Let’s take a closer look at how you can use code coverage with the [three common types of test](/ta-what-to-test/#test-specifics-dos-and-donts):
+
+- **Unit tests.** They are the best test type for gathering code coverage because they are designed to cover multiple small scenarios and testing paths.
+- **Integration tests.** They can help collect code coverage for integration tests, but use them with caution. In this case, you calculate the coverage of a larger portion of the source code, and it can be difficult to determine which tests actually cover which parts of the code. Nonetheless, calculating code coverage of integration tests may be useful for legacy systems that don’t have well-isolated units.
+- **End-to-end (E2E) tests.** Measuring code coverage for E2E tests is difficult and challenging due to the intricate nature of these tests. Instead of using code coverage, requirement coverage might be the better way to go. This is because the focus of E2E tests is to cover the requirements of your test, not to focus on the source code.
+
+## Conclusion
+
+Code coverage can be a useful metric for measuring the effectiveness of your tests. It can help you to improve the quality of your application by ensuring that the crucial logic in your code is well tested.
+
+However, remember that code coverage is just one metric. Make sure to also consider other factors, such as the quality of your tests and your application requirements.
+
+Aiming for 100% code coverage is not the goal. Instead, you should use code coverage along with a well-rounded testing plan that incorporates a variety of testing methods, including unit tests, integration tests, end-to-end tests, and manual tests.
+
+See the full code example and tests with good code coverage. You can also run the code and tests with this [live demo](https://stackblitz.com/edit/vitest-coffee-coverage?file=README.md). 
+
+```js
+/* coffee.js - a complete example */
+
+export function calcCoffeeIngredient(coffeeName, cup = 1) {
+  if (!isValidCoffee(coffeeName)) return {};
+
+  let espresso, water;
+
+  if (coffeeName === 'espresso') {
+    espresso = 30 * cup;
+    return { espresso };
+  }
+
+  if (coffeeName === 'americano') {
+    espresso = 30 * cup; water = 70 * cup;
+    return { espresso, water };
+  }
+
+  throw new Error (`${coffeeName} not found`);
+}
+
+function isValidCoffee(name) {
+  return ['espresso', 'americano', 'mocha'].includes(name);
+}
+```
+
+```js
+/* coffee.test.js - a complete test suite */
+
+import { describe, expect, it } from 'vitest';
+import { calcCoffeeIngredient } from '../src/coffee-complete';
+
+describe('Coffee', () => {
+  it('should have espresso', () => {
+    const result = calcCoffeeIngredient('espresso', 2);
+    expect(result).to.deep.equal({ espresso: 60 });
+  });
+
+  it('should have americano', () => {
+    const result = calcCoffeeIngredient('americano');
+    expect(result.espresso).to.equal(30);
+    expect(result.water).to.equal(70);
+  });
+
+  it('should throw error', () => {
+    const func = () => calcCoffeeIngredient('mocha');
+    expect(func).toThrowError(new Error('mocha not found'));
+  });
+
+  it('should have nothing', () => {
+    const result = calcCoffeeIngredient('unknown')
+    expect(result).to.deep.equal({});
+  });
+});
+```
+
+{% Aside %}
+This blog post was written by Ramona and [Jecelyn Yeen](/authors/jecelynyeen/) ([Twitter](https://twitter.com/jecfish)), with input and review from [Michael Hablich](https://www.linkedin.com/in/michael-hablich-2128646/) ([Twitter](https://twitter.com/MHablich)), [Rachel Andrew](/authors/rachelandrew/), and [Sofia Emelianova](https://www.linkedin.com/in/sofia-yemelianova/).
+{% endAside %}
diff --git a/src/site/content/en/blog/ta-strategies/index.md b/src/site/content/en/blog/ta-strategies/index.md
new file mode 100644
index 00000000000..fdd2f2ff1ba
--- /dev/null
+++ b/src/site/content/en/blog/ta-strategies/index.md
@@ -0,0 +1,264 @@
+---
+layout: post
+title: Pyramid or Crab? Find a testing strategy that fits 
+date: 2023-07-26
+subhead: >
+  Discover how to combine different testing types into a reasonable strategy that matches your project.
+description: >
+  Discover how to combine different testing types into a reasonable strategy that matches your project.
+authors:
+  - ramona
+hero: image/dPDCek3EhZgLQPGtEG3y0fTn4v82/CS0pyEGhIFszXNpM6Ndv.jpg
+alt: A lot of test tubes to depict testing.
+tags:
+  - blog
+  - test-automation
+  - testing
+---
+
+Welcome back! The [last article](/ta-types) laid down lots of groundwork about how to approach the different testing types and what they contain, and clarified the testing type definitions. Remember this [little meme image](/ta-types/#testing-in-all-shapes-how-does-this-all-work-together)? You might have wondered how all those testing types you learned about could work together.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg", alt="A cupboard with two drawers you can open at the same time.", width="800", height="450" %}
+
+Next, you will learn exactly that. This article gives an introduction on how to combine these testing types into reasonable strategies and choose one that matches your project.
+
+You can compare the strategies to a number of shapes to better grasp their meaning. Here's a list of strategies with respective sizes and development scopes.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+          Application size
+        </th>
+        <th>
+          Team composition
+        </th>
+        <th>
+          Reliance on manual testing
+        </th>
+        <th>
+          Testing strategy
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Small</td>
+        <td>Developers only</td>
+        <td>High</td>
+        <td>Testing Ice Cone<br>Testing Crab</td>
+      </tr>
+      <tr>
+        <td>Small</td>
+        <td>Developers & QA engineers</td>
+        <td>High</td>
+        <td>Testing Ice Cone<br>Testing Crab</td>
+      </tr>
+      <tr>
+        <td>Small</td>
+        <td>Developers only</td>
+        <td>Low</td>
+        <td>Test Pyramid</td>
+      </tr>
+      <tr>
+        <td>Large</td>
+        <td>Developers only</td>
+        <td>High</td>
+        <td>Testing Trophy<br>Testing Diamond</td>
+      </tr>
+      <tr>
+        <td>Large</td>
+        <td>Developers & QA engineers</td>
+        <td>High</td>
+        <td>Testing Trophy<br>Testing Crab</td>
+      </tr>
+      <tr>
+        <td>Large</td>
+        <td>Developers only</td>
+        <td>Low</td>
+        <td>Testing Trophy<br>Testing Honeycomb</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Let's take a closer look at the strategies and learn the meaning behind their names.
+
+## Determine testing goals: What do you want to achieve with these tests?
+
+Before you can start building a good strategy, figure out your testing goal. When do you consider that your application has been sufficiently tested?
+
+Achieving high test coverage is often viewed as the ultimate goal for developers when it comes to testing. But is it always the best approach? There might be another critical factor to consider when deciding on a testing strategy—serving your users' needs.
+
+As a developer, you also use many other applications and devices. In this respect, you are the user who relies on all these systems to “just work”. In turn, you rely on countless developers to do their best to make their applications and devices work. To turn this back around, as a developer, you also strive to live up to this trust. So your first goal should always be to ship working software and serve your users. This extends to the tests you write to ensure application quality. [Kent C. Dodds](https://kentcdodds.com/about) sums it up very well in his [Static vs Unit vs Integration vs E2E Testing for Frontend Apps](https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests) post:
+
+<blockquote>
+  <p>
+    The more your tests resemble the way your software is used, the more confidence they can give you.
+  </p>
+  <cite>
+    by Kent C. Dodds
+  </cite>
+</blockquote>
+
+Kent describes it as gaining confidence in tests. The closer you get to the users by choosing a testing type that fits, the more you can trust your tests to have valid results. In other words, the higher up you climb the pyramid, the more confident you get. But wait, what is the pyramid?
+
+## Determining test strategies: How to choose a testing strategy
+
+As a first step, determine which parts of the requirements you need to check to make sure they are met. Find out what test types to use and at what level of detail you can achieve the most confidence while maintaining an efficient cost structure. Many developers approach this topic by using analogies. Here are the most common ones, starting with the well-known classic.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg", alt="A lot of shapes like pyramid, diamonds, ice cone, honeycombs and a trophy; representing test strategies.", width="800", height="450" %}
+
+### The classic: The test pyramid
+
+As soon as you start looking for test strategies, you will probably come across the test automation pyramid as the first analogy. Mike Cohn introduced this concept in his book "Succeeding with Agile". Later, Martin Fowler expanded upon the concept in his [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html) article. You can represent the pyramid visually as the following:
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg", alt="The test pyramid.", width="800", height="450" %}
+
+As shown in this drawing, the test pyramid consists of three layers:
+
+1. **Unit**. You find these tests at the base layer of the pyramid because they are fast to execute and simple to maintain. They are isolated and target the most minor test units. For example, see a typical [unit test](https://github.com/leichteckig/phpmagazin-jest-example/blob/main/product.test.js) for a very small product.
+
+1. **Integration**. These tests are in the middle of the pyramid, because they have an acceptable execution speed but bring you closer to the user than the unit tests can. An example of an integration test is an [API test](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/api/api-users.spec.ts). You can also classify [component tests](https://github.com/leichteckig/nuxt-leichteckig/blob/main/test/components/MediaGrid.spec.js) as this type.
+
+1. **E2E tests** (also called **UI tests**). These tests simulate a genuine user and their interaction. Such tests need more time to execute and thus are more expensive. They are at at the top of the pyramid.
+
+### Confidence versus resources
+
+As briefly covered before, the order of the layers is no coincidence. They show the priorities and the corresponding costs. This gives you a clear picture of how many tests you should write for each layer. You have already seen this in the definition of the testing types.
+
+Because E2E tests are closest to your users, they give you the most confidence that you application is working as intended. However, they require a complete application stack and a simulated user, therefore, they are also potentially the most expensive. So the confidence is in direct competition with the resources you need to execute the tests.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg", alt="The test pyramid with arrows showing the direction of confidence and resources required for different testing types.", width="800", height="450" %}
+
+The pyramid tries to solve this problem by making you focus more on unit tests and strictly prioritize the cases covered by E2E tests. For example, your most crucial user journeys or the places most vulnerable to defects. As Martin Fowler emphasizes, the two most essential points in Cohn's pyramid are as follows:
+
+1. Write tests with different granularity.
+1. The more high level you get, the fewer tests you should have.
+
+## Pyramid evolved! Adaptations of the test pyramids
+
+For several years, discussions have revolved around the pyramid. The pyramid seems to oversimplify testing strategies, leaves out a lot of testing types, and no longer fits all the real-world projects. Therefore, it may be misleading. Has the pyramid fallen out of shape?
+[Guillermo Rauch](https://rauchg.com/about) has an opinion about it:
+
+<blockquote>
+  <p>
+    Write tests. Not too many. Mostly integration.
+  </p>
+  <cite>
+    by Guillermo Rauch
+  </cite>
+</blockquote>
+
+It's one of the most commonly cited quotes on this subject, so let's break it down:
+
+- "Write tests". Not only because it builds trust, but also because it saves time in maintenance.
+- "Not too many". 100% coverage is not always good because then your testing isn't prioritized and there will be a lot of maintenance.
+- "Mostly integration". Here again the emphasis is on integration tests: they have the most business value by giving you a daily high confidence level while maintaining a reasonable execution time.
+
+This makes you think again about the testing pyramid and shift your focus to integration testing. Over the last few years, many adaptations have been proposed, so let's look at the most common ones.
+
+### Test diamond
+
+The first adaptation removes the overemphasis on unit testing, as seen in the test pyramid. Imagine that you have reached 100% coverage on unit tests. However, the next time you refactor, you will have to update many of these unit tests and you might be tempted to skip them. So they erode.
+
+As a result, and together with the higher focus on integration testing, the following shape may arise:
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg", alt="The test diamond.", width="800", height="450" %}
+
+A pyramid evolves into a diamond. You can see the previous three layers, but with a different size, and the unit layer has been cut:
+
+- **Unit**. Write unit tests the way you defined them before. However, because they tend to erode, prioritize and cover only the most critical cases.
+- **Integration**. The integration tests you know, testing the combination of single units.
+- **E2E**. This layer handles the UI tests similar to the test pyramid. Take care to only write E2E tests for the most critical test cases.
+
+
+### Testing honeycomb
+
+There is another adaptation, introduced by [Spotify](https://engineering.atspotify.com/2018/01/testing-of-microservices/), that is similar to the test diamond but further specialized for microservices-based software systems. The testing honeycomb is another visual analogy for the granularity, scope, and number of tests to write for a [microservices-based software system](https://notes.paulswail.com/public/Testing+microservices). Due to their small size, the most considerable complexity in a microservice is not within the service itself, but in how it interacts with others. So a testing strategy for a microservice should primarily focus on integration tests.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg", alt="The testing honeycomb.", width="800", height="450" %}
+
+This shape reminds us of a honeycomb, thus the name. It has the following layers:
+
+- **Integrated tests**. The article by Spotify uses a quote from [J. B. Rainsberger](https://blog.thecodewhisperer.com/permalink/integrated-tests-are-a-scam) to define this layer: “A test that will pass or fail based on the correctness of another system.” Such tests have external dependencies that you need to consider, and on the contrary, your system might be a dependency that breaks other systems. Similar to E2E tests in other analogies, use these tests carefully, only for the most essential cases.
+- **Integration tests**. Similar to other adaptations, you should focus on this layer. It contains tests that verify the correctness of your service in a more isolated fashion, but still in combination with other services. That means the tests will include some other systems too and focus on the interaction points, for example, via API tests. 
+- **Tests on implementation details**. These tests resemble unit tests—tests that focus on parts of the code that are naturally isolated and thus have their own internal complexity.
+
+If you want to find out more about this testing strategy, see the [post that compares the test pyramid to the honeycomb](https://martinfowler.com/articles/2021-test-shapes.html) by Martin Fowler and the [original article from Spotify](https://engineering.atspotify.com/2018/01/testing-of-microservices/).
+
+
+### Testing trophy
+
+You can already see a repeating focus on integration tests. However, another type you came across in the previous article is not testing in theory but is still an important aspect you should consider in a testing strategy. Static analysis is missing from the test pyramid and in most of the adaptations you have seen so far. There's the testing trophy adaptation that takes static analysis into account while maintaining the focus on integration tests. The testing trophy originated from the earlier quote by Guillermo Rauch and was developed by Kent C. Dodds:
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg", alt="The testing trophy.", width="800", height="450" %}
+
+The testing trophy is an analogy depicting the granularity of tests in a slightly different way. It has four layers:
+
+- **Static analysis**. It plays a vital role in this analogy and lets you catch typos, style mistakes, and other bugs by merely running the debugging steps already outlined.
+- **Unit tests**. They ensure that your smallest unit is appropriately tested, but the testing trophy won't emphasize them to the same extent as the test pyramid.
+- **Integration**. This is the main focus as it balances the cost and the higher confidence in the best way, as with other adaptations.
+- **UI tests**. Including E2E and visual tests, they are at the top of the testing trophy, similar to their role in the test pyramid.
+
+To read more about the testing trophy, see the [blog post by Kent C. Dodds](https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests) on this subject.
+
+
+## Some more UI-focused approaches
+
+That's all well and good but no matter how you call your strategy, a “pyramid”, “honeycomb,” or “diamond”, there's still something missing. While test automation is valuable, it's important to remember that manual testing is still essential. Automated testing should alleviate routine tasks and free the quality assurance engineers to focus on crucial areas. Instead of replacing manual testing, automation should complement it. Is there a way to integrate manual testing with automation for optimal results?
+
+
+### Testing ice cone and testing crab
+
+There are indeed two adaptations of the testing pyramid that focus more on these UI-focused ways of testing. Both have the advantage of high confidence, but are naturally more costly due to slower test execution.
+
+The first one, the test ice cone, looks like the pyramid in reverse. Without the manual testing step, it is also known as the testing pizza.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg", alt="The testing ice cone.", width="800", height="450" %}
+
+The ice cone has bigger focus on manual or UI testing and the least focus on unit testing. It often takes shape in projects where developers started work with only a few thoughts on the testing strategy. The ice code is considered an anti-pattern and rightfully so. It is costly in terms of resources and manual work.
+
+The test crab is similar to the test ice cone, but with more emphasis on E2E and visual testing:
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg", alt="The testing crab.", width="800", height="450" %}
+
+This testing strategy includes one more aspect: it verifies that your application functions and looks good. The testing crab highlights the importance of [visual testing](https://docs.cypress.io/guides/tooling/visual-testing), defined in the [previous article](/ta-types/#visual-ui-testing). Integration testing, divided into component and API testing, moves further into the background, and unit testing plays an even more secondary role here. You can find further details on this testing strategy in this [article on the testing crab](https://changelog.com/posts/the-testing-pyramid-should-look-more-like-a-crab).
+
+While being more costly, these two testing strategies have their place: for example, in smaller projects where fewer tests are needed, or less complexity needs to be covered. In this case, a full-blown testing strategy focusing on integration testing might be over-engineered.
+
+Although these two testing strategies are more costly, they have their place, for example, in smaller projects that require fewer tests and don't need to cover a lot of complexity. In this case, a full scale testing strategy focused on integration testing may be unnecessarily complex.
+
+
+## Practical advice: Let's strategize!
+
+You have now learned about the most common testing strategies. You started with the classic—the test pyramid—and got to know its many adaptations. Now you need to evaluate them for your product and decide which is be the best for your project. The answer to this question should start with everyone's favorite "**It depends**". That doesn't make it any less accurate though.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg", alt="It depends.", width="800", height="450" %}
+
+The choice of the most appropriate testing strategy from those described—and even the ones left out—depends on your application. It should fir your architecture, your requirements, and last but not least, your users and their requirements. All this might differ from application to application. That's completely normal. Remember that your most important goal is to serve your users, not a textbook definition.
+
+More often than not, real-world tests are difficult to separate and define individually. Even Martin Fowler himself emphasizes the [positive aspect of differing definitions](https://martinfowler.com/articles/2021-test-shapes.html), such as in the case of unit tests. As [Justin Searls](https://justin.searls.co/about/) states correctly in [his tweet](https://twitter.com/searls/status/1393385209089990659):
+
+<blockquote>
+  <p>
+    […] write expressive tests that establish clear boundaries, run quickly & reliably, and only fail for useful reasons.
+  </p>
+  <cite>
+    by Justin Searls
+  </cite>
+</blockquote>
+
+Focus on the tests that report actual errors that the users might encounter, and don't get distracted from your goal. Tests should be designed to benefit the user, not just provide 100% coverage or to debate which percentage of which testing type to write.
+
+Focus on tests that report real-life errors that your users might encounter and don't get distracted from your goal. Tests should be designed to benefit the user, not just provide 100% coverage or spark debates on what percentage of a particular testing type you should write.
+
+
+{% Aside %}
+This blog post was written by Ramona, with input and review from
+[Jecelyn Yeen](/authors/jecelynyeen/)
+([Twitter](https://twitter.com/jecfish)),
+[Michael Hablich](https://www.linkedin.com/in/michael-hablich-2128646/)
+([Twitter](https://twitter.com/MHablich)), and [Sofia Emelianova](https://www.linkedin.com/in/sofia-yemelianova/).
+{% endAside %}
diff --git a/src/site/content/en/blog/ta-test-cases/index.md b/src/site/content/en/blog/ta-test-cases/index.md
new file mode 100644
index 00000000000..41be0610379
--- /dev/null
+++ b/src/site/content/en/blog/ta-test-cases/index.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: Defining test cases and priorities
+date: 2023-08-09
+subhead: >
+  Determine what to test, define your test cases, and prioritize.
+description: >
+  Determine what to test, define your test cases, and prioritize.
+authors:
+  - ramona
+hero: image/dPDCek3EhZgLQPGtEG3y0fTn4v82/reTqGo078zXM3UQ9wgHf.jpg
+alt: 
+tags:
+  - blog
+  - test-automation
+  - testing
+---
+
+In the [previous post](/ta-strategies/), you learned about testing strategies, the number of tests needed to test an application, and how to find the best fit to gain the most confidence in the results while bearing in mind your resources. However, this only gives us an idea of how much to test. You still need to determine exactly what to test.
+The following three criteria can be helpful in understanding what to expect in a test and to see what testing type and level of detail might fit best:
+
+1. **Take care of your happy path**. This is the most generic or primary user story of your application, where your user will notice an error very quickly. 
+2. **Decide carefully on the level of detail**. Get into more detail if your use case is vulnerable or where an error would cause high damage.
+3. **Prioritize lower-level tests**, such as unit and integration tests, over higher-level end-to-end tests whenever possible.
+
+The rest of this article explores these criteria, and how they apply as you define test cases.
+
+## What is a test case?
+
+In software development, a test case is a sequence of actions or circumstances that are devised to confirm the effectiveness of a software program or application. 
+A test case aims to ensure that the software operates as planned and that all its features and functions perform correctly. Software testers or developers typically create these test cases to guarantee that the software meets the specified requirements and specifications.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/Am7IXUF5DVMprZQsSA5p.jpeg", alt="Test case is verifying.", width="800", height="450" %}
+
+When a test case is run, the software performs a series of checks to ensure it produces the desired results. While doing that, a test fulfills the following tasks:
+
+- **Verification**. The process of thoroughly checking software to ensure it functions without errors. Determining whether the created product meets all the necessary non-functional requirements and successfully achieves its intended purpose is crucial. The question it answers is: “Are we building the product right?”
+- **Validation**. The process of ensuring that the software product meets the necessary standards or high-level requirements. It involves checking whether the actual product aligns with the expected product. Essentially, we’re answering the question: “Are we building the right product for the user’s requirements?”
+
+Suppose the program fails to deliver the expected outcome. In that case, the test case will be the messenger—thus reporting an unsuccessful result, and the developer or tester will need to investigate the issue and find a solution.
+Think of the checks and actions as paths the computer follows, regardless of the testing type.  Groups of input data or conditions used for checking are called "equivalence classes". They should get similar behavior or results from the system under test. The specific paths executed inside a test may vary but should match the activities and assertions done in your test. 
+
+## Test paths: Typical kinds of test cases
+
+In software development, a [test case](https://en.wikipedia.org/wiki/Happy_path) is a code execution scenario from which a certain behavior is expected and tested. Typically, there are three scenarios to form test cases from.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/SyLaoC8VQymTbBwIUd11.jpeg", alt="The happy path.", width="800", height="450" %}
+
+The first one is the most well known, which you are probably already using. It’s the *happy path*, also known as the “happy day scenario” or “golden path”. It defines the most common use case of your feature, application, or change—the way it should work out for the customer. 
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/7F0MGozRfVyyi3vn65No.jpeg", alt="The scary path.", width="800", height="450" %}
+
+The second most crucial test path to cover in your test cases is often left out as it’s uncomfortable—as its name may imply. It’s the “scary path” or, in other words, the *negative test*. This path targets scenarios that cause the code to misbehave or enter an error state. Testing these scenarios is especially important if you have highly vulnerable use cases imposing a high risk on the stakeholders or users.
+
+There are some other paths you might want to know about and consider using, but typically they are less commonly used. The following table summarizes them:
+
+| Test path  | Explanation |
+|---|---|
+| Angry path  | This leads to an error, but an expected one; for example, if you want to ensure error handling works correctly. |
+| Delinquent path  | This path takes care of any security-related scenarios your application needs to fulfill. |
+| Desolate path  | The path testing the scenario in your application doesn’t get enough data to function, for example, testing null values. |
+| Forgetful path  | Testing the behavior of your application with insufficient resources, for example, triggering a data loss. |
+| Indecisive path  | Testing with a user who is trying to do actions or following user stories in your application but hasn’t completed those workflows. This could be the case, for example, when the user interrupts their workflow.  |
+| Greedy path  | Trying to test using vast amounts of inputs or data.  |
+| Stressful path  | Trying to put a load on your application by any means necessary until it no longer functions (similar to a load test). |
+
+There are several methods to categorize those paths. Two common approaches are:
+
+- **Equivalence partitioning**. A testing method that categorizes test cases into groups or partitions and, as a result, helps create equivalence classes. This is based on the idea that if one test case in a partition uncovers a defect, other test cases in the same partition will likely reveal similar defects. As all inputs within a specific equivalence class should exhibit identical behavior, you can decrease the number of test cases. [Learn more about equivalence partitioning](https://en.wikipedia.org/wiki/Equivalence_partitioning). 
+- **Limit analysis**. A testing method, also known as [boundary-value analysis](https://en.wikipedia.org/wiki/Boundary-value_analysis), that examines the limits or extremes of input values to find any potential issues or errors that might arise at the system's limits of capabilities or constraints.
+
+## Best practice: Writing test cases
+
+A classical test case written by a tester will contain specific data to help you grasp the content of the test you want to conduct and, of course, execute the test. A typical tester would document their testing efforts in a table. There are two patterns we can use at this stage, helping us to structure our test cases and later, our tests themselves, too:
+
+- **Arrange, act, assert** pattern. The "arrange, act, assert" (also known as the "AAA" or "Triple A") testing pattern is a way of organizing tests into three distinct steps: arranging the test, then performing the test, and last but not least, drawing conclusions.
+- **Given, when, then** pattern. This pattern is similar to the AAA pattern but has some roots in [behavior-driven development](https://en.wikipedia.org/wiki/Behavior-driven_development).
+
+Future articles will go into more details on these patterns, as soon as we cover the structure of a test itself. If you want to go deeper into these patterns at this stage, check out these two articles: [Arrange-Act-Assert: A pattern for writing good tests](https://automationpanda.com/2020/07/07/arrange-act-assert-a-pattern-for-writing-good-tests/) and [Given-When-Then](https://martinfowler.com/bliki/GivenWhenThen.html).
+
+According to all the learnings from this article, the following table summarizes a classic example:
+
+| Information  | Explanation |
+|---|---|
+| Prerequisites  | Everything which needs to be done before writing the test. |
+| Object under test  | What needs to be verified? |
+| Input data  | Variables and their values.  |
+| Steps to be executed  | All the things you will do to bring your test to life: all actions or interactions you do in your tests. |
+| Expected result  | What should happen and which expectations are to be fulfilled. |
+| Actual result  | What actually happens. |
+
+In automated testing, you don’t need to document all these test cases in the way that a tester needs to, even though it’s undoubtedly helpful to do so. You can find all this information in your test if you pay attention. So let’s translate this classical test case into an automated test.
+
+| Information  | Translation into test automation |
+|---|---|
+| Prerequisites  | All the things you need, arranging the test, and thinking about what is given to make your test’s scenario happen. |
+| Object under test  | This “object” can be various things: an application, flow, unit, or component under test. |
+| Input data  | Parameter values.  |
+| Steps to be executed  | All the actions and commands executed inside your test, the things you act upon, and finding out what happens when you do certain things. |
+| Expected result  | The assertion you use to validate your application, the things you assert upon in your application. |
+| Actual result  | The result of your automated test. |
+
+{% Aside %}
+This blog post was written by Ramona, with input and review from
+[Jecelyn Yeen](/authors/jecelynyeen/)
+([Twitter](https://twitter.com/jecfish)),
+[Michael Hablich](https://www.linkedin.com/in/michael-hablich-2128646/)
+([Twitter](https://twitter.com/MHablich)), and [Rachel Andrew](/authors/rachelandrew/). Special thanks to [Sofia Emelianova](https://www.linkedin.com/in/sofia-yemelianova/) for supporting the publication process.
+{% endAside %}
diff --git a/src/site/content/en/blog/ta-types/index.md b/src/site/content/en/blog/ta-types/index.md
new file mode 100644
index 00000000000..76c132b085b
--- /dev/null
+++ b/src/site/content/en/blog/ta-types/index.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Three common types of test automation
+date: 2023-07-12
+subhead: >
+  Let's start with the basics! Exploring the two general testing modes and three common types of test automation.
+description: >
+  Let's start with the basics! Exploring the two general testing modes and three common types of test automation.
+authors:
+  - ramona
+hero: image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Ry1V42EY9YKOBeoWlLaY.jpg
+alt: A lot of test tubes to depict testing.
+tags:
+  - blog
+  - test-automation
+  - testing
+---
+
+We've all been there: what is a recurring coding meme that happens all too often in real life?
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg", alt="A cupboard with two drawers you cannot open at the same time.", width="800", height="450" %}
+
+This meme sums it up quite nicely: each drawer works perfectly well individually, but in combination with the other drawer, they block each other and fail to function. You want both drawers to work well with each other and be operable at the same time.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg", alt="The same cupboard but with two drawers you can open at the same time.", width="800", height="450" %}
+
+Apply this to web development: you wrote some tests, maybe even achieved 100% test coverage, but your application still needs to work once other parts fall into place. The units may work well on their own but not in relation to each other. Writing some tests is crucial but it's only one part of the ideal test setup for your project. As a very first step, you need to determine what parts of the application quality you need to ensure and how you can achieve that.
+
+Simply put, you need a plan before you start writing the actual test code. To approach the topic of how to test practically, let's start with a clean slate and answer two basic questions:
+
+- How do you want to test?
+- What do you want to test?
+
+This article focuses on the general things you need to know to answer the first question. To start from a common ground, let's first learn what testing modes exist and then focus on the common types of testing. In later articles, we will answer the second question, combine the answers, and find the testing strategy that works best for your project. Let's go! 🙌
+
+## Start with the basics: General testing modes
+
+When answering the question of how to test, the first point to clarify is very abstract. Should you test manually or let a computer take over? It's important, however, not to fall into binary thinking here.
+
+### Manual testing versus automated testing
+
+If you ask quality assurance engineers to define testing, they will probably break it down into two "modes" first:
+
+* **Manual testing**. This is a typical testing method conducted by actual people. A quality assurance engineer click through the application, check if it works and, at the same time, try to break it. The most common way is exploratory testing, where the engineer investigates the application using their knowledge of the application against a predefined path or checklist.
+* **Automated testing**. This is a type of testing conducted by a computer. Quality assurance engineers implement it to automate away repetitive and monotonous tests.
+
+This series of guides will mostly focus on automated testing. However, you shouldn't focus on only one way of testing. Even if automation saves a lot of time and effort, humans and manual testing will always play a vital role. Rather, test automation should free up people to focus on exploratory testing and creative problem-solving. For example, ensuring the quality of user experiences or protecting the high-risk business logic. In other words, automation has your back. ❤️
+
+### Opaque box versus clear box
+
+So, you have defined the general modes of testing. However, that's not enough yet. To plan the testing strategy, there is one more question to answer: should you know how your application works under the hood or is it better to test without this knowledge? Depending on the answer, there are two procedures to choose from for deriving and selecting test cases:
+
+- **Opaque box testing** (or black box testing). It is based on analyzing a component or system's functional or non-functional requirements (specifications) without considering its internal structure.
+- **Clear box testing** (or white box testing) is a procedure that takes into account the internal structure of said box. In other words, how your application works under the hood.
+
+Both procedures can be applied to manual and automated testing. However, some aspects of general testing modes may focus more on one of the two—we will cover that later. For now, let's further break down test automation into types.
+
+## Test automation types: How do you want to test?
+
+As you get closer to answering the "how" question, you have already decided to do some manual testing. However, choosing and applying test automation types is a bit more challenging. The types of automation testing are closely related to the metrics you want to create in your projects. So let's take a closer look at the most important ones.
+
+As illustrated in the meme mentioned earlier, you have already come across two types: unit testing and integration testing. End-to-end testing is the third important one to consider. But that isn't all of them still. Let's take a closer look.
+
+### Unit testing
+
+Unit testing is a testing type in which minor testable parts or units of an application are individually and independently tested for proper operation. These units can vary in scope from functions, classes, or interfaces, to services or complete components. Their primary attributes are execution speed, isolation, and comfortable maintainability. If you want to dive deeper into unit testing, head over to this [guide on unit testing](https://en.wikipedia.org/wiki/Unit_testing).
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg", alt="A simplified depiction of unit testing showing input and output.", width="800", height="450" %}
+
+{% Aside %}
+Possible tools include but aren't limited to [Vitest](https://vitest.dev/) and [Jest](https://jestjs.io/).
+{% endAside %}
+
+### Integration testing
+
+Integration testing focuses on interactions between components or systems. In other words, on how well they work together. Typical examples of integration tests are API or component tests.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg", alt="A simplified depiction of integration testing showing how two unit working together.", width="800", height="450" %}
+
+{% Aside %}
+The tools you may consider using are often the same as those mentioned in the [unit testing section](#unit-testing) and can also include frameworks providing component testing, for example, [WebdriverIO](https://webdriver.io/) and [Cypress](https://www.cypress.io/).
+{% endAside %}
+
+### End-to-end testing
+
+These tests are often called UI tests and this name explains their function even better. These tests interact with your application's UI, including the complete application stack, and test your application from one end to the other.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg", alt="A simplified depiction of end-to-end testing showing a computer as a robot, looking at a workflow.", width="800", height="450" %}
+
+They resemble a system test if you refer to the theory of quality assurance. These tests simulate a genuine user and their interactions. End-to-end tests take more runtime because they involve the whole system and more runtime requires more computing power. As a result, this additional effort results in higher maintenance costs. 
+
+{% Aside %}
+The tools you might use for end-to-end testing include but aren't limited to [WebdriverIO](https://webdriver.io/), [Cypress](https://www.cypress.io/), [Playwright](https://playwright.dev/), [Selenium](https://www.selenium.dev/).
+{% endAside %}
+
+#### Visual UI testing
+
+An interesting subcategory of UI tests is visual tests. These tests are extended end-to-end tests that provide a means to verify the visible output of an application. Such a test takes a screenshot after a change and another screenshot containing the “status quo” (or golden file), then provides those results to a human reviewer to inspect and check. In other words, it helps find “visual bugs” in the appearance of a page, beyond purely functional bugs and not explicitly written down into assertions.
+
+### Static analysis
+
+There's one more thing to introduce here: static analysis. It isn't a testing type in the textbook sense. However, it will be an essential aspect in quality assurance strategies later on. You can imagine it working like a spell check function: it scans your code for more significant defects and syntax errors without running the program, thus detecting code style issues. This simple measure can prevent many bugs. This is a good point to learn about Static Analysis if you want to get to know it in more detail.
+
+{% Aside %}
+The tools you might use for static analysis include but aren't limited to [Eslint](https://eslint.org/) and [StyleLint](https://stylelint.io/).
+
+{% endAside %}
+
+## Testing in all shapes: How does this all work together?
+
+While searching for answers to all these questions, you might find a possible solution in some analogies. In the web and testing communities specifically, developers tend to use these analogies to give you an idea of how many tests you should use of which type.
+
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg", alt="A lot of shapes like pyramid, diamonds, ice cone, honeycombs and a trophy; representing test strategies.", width="800", height="450" %}
+
+The following five strategies depicted in this image are the most common ones:
+
+- Test Pyramid
+- Test Diamond
+- Test Ice Cone (also known as Test Pizza)
+- Test Honeycomb
+- Test Trophy
+
+This is truly a lot of information to process. How should you decide on a matching test strategy based on all this? Don't worry, we've got you covered. In the next article, we will discuss these different strategies in more detail and explain how to choose the best fit for your project. Stay tuned! 🔥
+
+{% Aside %}
+This blog post was written by Ramona, with input and review from
+[Jecelyn Yeen](/authors/jecelynyeen/)
+([Twitter](https://twitter.com/jecfish)),
+[Michael Hablich](https://www.linkedin.com/in/michael-hablich-2128646/)
+([Twitter](https://twitter.com/MHablich)), and [Sofia Emelianova](https://www.linkedin.com/in/sofia-yemelianova/).
+{% endAside %}
diff --git a/src/site/content/en/blog/ta-what-to-test/index.md b/src/site/content/en/blog/ta-what-to-test/index.md
new file mode 100644
index 00000000000..ec9304ed6d4
--- /dev/null
+++ b/src/site/content/en/blog/ta-what-to-test/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: To test or not to test, a technical perspective
+date: 2023-08-23
+subhead: >
+  Determine what you need to test and what you can rule out.
+description: >
+  Determine what you need to test and what you can rule out.
+authors:
+  - ramona
+hero: image/NJdAV9UgKuN8AhoaPBquL7giZQo1/gC8XPLucM5Uc4wRTvbOY.jpg
+alt: 
+tags:
+  - blog
+  - test-automation
+  - testing
+---
+
+The [previous article](/ta-types/) covered the basics of test cases and what they should contain. This article delves deeper into the creation of test cases from a technical perspective, detailing what should be included in each test and what to avoid. Essentially, you'll learn the answer to the age-old questions of "What to test" or "What not to test".
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/lwKU8pzIWPZiDg8ss7ad.jpeg", alt="What to test or not to test.", width="800", height="450" %}
+
+## General guidelines and patterns
+
+It's worth noting that specific patterns and points are crucial, regardless of whether you're conducting unit, integration, or end-to-end tests. These principles can and should be applied to both types of testing, so they are a good place to start.
+
+### Keep it simple
+
+When it comes to writing tests, one of the most important things to remember is to keep it simple. It's important to consider the brain's capacity. The main production code takes up significant space, leaving little room for additional complexity. This is especially true for testing.
+
+If there's less headspace available, you may become more relaxed in your testing efforts. That's why it's crucial to prioritize simplicity in testing. In fact, Yoni Goldberg's [JavaScript testing best practices](https://github.com/goldbergyoni/javascript-testing-best-practices#%EF%B8%8F-0-the-golden-rule-design-for-lean-testing) emphasize the importance of the Golden Rule—your test should feel like an assistant and not like a complex mathematical formula. In other words, you should be able to understand your test's intent at first glance.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/3r1qa9Ai1EMhb47Yiuuq.jpeg", alt="Don't make tests complex, they shouldn't feel this way.", width="800", height="450" %}
+
+You should aim for simplicity in all types of tests, regardless of their complexity. In fact, the more complex a test is, the more critical it is to simplify it. One way to achieve this is through a flat test design, where tests are kept as simple as possible, and to only test what is necessary. This means each test should contain only one test case, and the test case should be focused on testing a single, specific functionality or feature.
+
+Think about it from this perspective: it should be easy to identify what went wrong when reading a failing test. This is why keeping tests simple and easy to understand is important. Doing so lets you quickly identify and fix issues when they arise.
+
+### Test what's worth it
+
+The flat test design also encourages focus and helps ensure your tests are meaningful. Remember, you don't want to create tests just for the sake of coverage—they should always have a purpose.
+
+{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/halb4R8zvaEdr85qhIIT.jpeg", alt="Don't test all the things.", width="800", height="450" %}
+
+{% Aside %}
+In our [previous article](/ta-types/), we discussed three key points to remember when prioritizing your testing efforts. These three priorities may help you decide whether the case in question should be included in your test.
+{% endAside %}
+
+### Don't test implementation details
+
+One common problem in testing is that tests are often designed to test implementation details, such as using selectors in components or end-to-end tests. Implementation details refer to things that users of your code will not typically use, see, or even know about. This can lead to two major problems in tests: false negatives and false positives.
+
+False negatives occur when a test fails, even though the tested code is correct. This can happen when the implementation details change due to a refactoring of the application code. On the other hand, false positives occur when a test passes, even though the code being tested is incorrect.
+
+One solution to this problem is to consider the different types of users you have. End users and developers can differ in their approach, and they may interact with the code differently. When planning tests, it is essential to consider what users will see or interact with, and make the tests dependent on those things instead of the implementation details.
+
+For example, choosing selectors that are less prone to change can make tests more reliable: data-attributes instead of CSS selectors. For more details, refer to [Kent C. Dodds' article](https://kentcdodds.com/blog/testing-implementation-details) on this topic, or stay tuned—an article on this topic is coming later.
+
+{% Aside %}
+On the contrary, if you write tests well, this can also have positive implications on your source code structure, for example, when you consider the testability of your code.
+{% endAside %}
+
+### Mocking: Don't lose control
+
+Mocking is a broad concept used in unit testing and sometimes in integration testing. It involves creating fake data or components to simulate dependencies that have complete control over the application. This allows for isolated testing.
+
+Using mocks in your tests can improve predictability, separation of concerns, and performance. And, if you need to conduct a test that requires human involvement (such as passport verification), you'll have to conceal it using a mock. For all these reasons, mocks are a valuable tool to consider.
+
+At the same time, mocking may affect the accuracy of the test because they are mocks, not the real user experiences. So you need to be mindful when using mocks and stubs.
+
+#### Should you mock in end-to-end tests?
+
+In general, no. However, mocking can be a lifesaver sometimes—so let's not rule it out completely. 
+
+Imagine this scenario: you're writing a test for a feature involving a third-party payment provider service. You're in a sandbox environment that they have provided, meaning no real transactions are taking place. Unfortunately, the sandbox is malfunctioning, thereby causing your tests to fail. The fix needs to be done by the payment provider. All you can do is wait for the issue to be resolved by the provider. 
+
+In this case, it might be more beneficial to lessen the dependency on services you cannot control.
+It's still advisable to use mocking carefully in integration or end-to-end tests as it decreases the confidence level of your tests.
+
+## Test specifics: Dos and don'ts
+
+So, all in all, what does a test contain? And are there differences between the testing types? Let's take a closer look at some specific aspects tailored to the main testing types.
+
+### What belongs to a good unit test?
+
+An ideal and effective unit test should:
+
+- Concentrate on specific aspects.
+- Operate independently.
+- Encompass small-scale scenarios.
+- Use descriptive names.
+- Follow the AAA pattern if applicable.
+- Guarantee comprehensive test coverage.
+
+| Do ✅  | Don't ❌ |
+| --- | --- |
+| Keep the tests as small as possible. Test one thing per test case. | Write tests over large units. |
+| Always keep tests isolated and mock the things you need which are outside your unit. | Include other components or services. |
+| Keep tests independent. | Rely on previous tests or share test data. |
+| Cover [different scenarios and paths](/ta-test-cases/#test-paths-typical-kinds-of-test-cases). | Limit yourself to the happy path or negative tests at maximum. |
+| Use descriptive test titles, so you can immediately see what your test is about. | Test by function name only, not being descriptive enough as a result: `testBuildFoo()` or `testGetId()`. |
+| Aim for good code coverage or a broader range of test cases, especially at this stage. | Test from every class down to database (I/O) level. |
+
+### What belongs to a good integration test?
+
+An ideal integration test shares some criteria with unit tests, too. However, there are a couple of additional points that you need to consider. A great integration test should:
+
+- Simulate interactions between components.
+- Cover real-world scenarios, and use mocks or stubs.
+- Consider performance.
+
+| Do ✅  | Don't ❌ |
+| --- | --- |
+| Test the integration points: verify that each unit works together gracefully when integrated with each other. | Test each unit in isolation—that's what unit tests are for. |
+| Test real-world scenarios: use test data derived from real-world data. | Use repetitive auto-generated test data or other data which doesn't reflect real-world use cases. |
+| Use mocks and stubs for external dependencies to maintain control of your complete test. | Create dependencies on third-party services, for example, network requests to outside services. |
+| Use a clean-up routine before and after each test. | Forget to use clean-up measures inside your tests, otherwise this can lead to test failures or false positives, due to lack of proper test isolation. |
+
+### What belongs to a good end-to-end test?
+
+A comprehensive end-to-end test should:
+
+- Replicate user interactions.
+- Encompass vital scenarios.
+- Span multiple layers.
+- Manage asynchronous operations.
+- Verify results.
+- Account for performance.
+
+| Do ✅  | Don't ❌ |
+| --- | --- |
+| Use API-driven shortcuts. [Learn more](https://docs.cypress.io/guides/references/best-practices#Organizing-Tests-Logging-In-Controlling-State). | Use UI interactions for every step, including the `beforeEach` hook. |
+| Use a clean-up routine before each test. Take even more care of test isolation than you do in unit and integration tests because there's a higher risk of side effects here. | Forget to clean up after each test. If you don't clean up the leftover state, data or side effects, they will affect other tests executed later. |
+| Regard end-to-end tests as system tests. This means you need to test the whole application stack. | Test each unit in isolation—that's what unit tests are for.  |
+| Use minimal or no mocking inside the test. Consider carefully if you want to mock external dependencies. | Rely heavily on mocks. |
+| Consider performance and workload by, for example, not over-testing large scenarios in the same test. | Cover large workflows without using shortcuts. |
+
+{% Aside %}
+This blog post was written by Ramona, with input and review from [Jecelyn Yeen](/authors/jecelynyeen/) ([Twitter](https://twitter.com/jecfish)), [Michael Hablich](https://www.linkedin.com/in/michael-hablich-2128646/) ([Twitter](https://twitter.com/MHablich)), [Rachel Andrew](/authors/rachelandrew/), and [Sofia Emelianova](https://www.linkedin.com/in/sofia-yemelianova/).
+{% endAside %}
diff --git a/src/site/content/en/blog/tabbed-application-mode/index.md b/src/site/content/en/blog/tabbed-application-mode/index.md
new file mode 100644
index 00000000000..f8d6e51b17d
--- /dev/null
+++ b/src/site/content/en/blog/tabbed-application-mode/index.md
@@ -0,0 +1,231 @@
+---
+layout: post
+title: Tabbed application mode for PWAs
+subhead: Work on more than one document at a time with tabs in your Progressive Web App
+authors:
+  - thomassteiner
+date: 2021-02-25
+updated: 2022-12-05
+description: |
+  Tabbed application mode allows Progressive Web App developers to add a tabbed document interface
+  to their standalone PWAs.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/N08W5skJmcYgS7346DBS.jpg
+alt: Dictionary thumb index.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - progressive-web-apps
+  - capabilities
+---
+
+{% Aside %} Tabbed application mode is part of the
+[capabilities project](https://developer.chrome.com/blog/fugu-status/) and is currently in
+development. This post will be updated as the implementation progresses. Tabbed application mode is
+an early-stage exploration of the Chrome team. It is not ready for production yet. {% endAside %}
+
+In the world of computing, the [desktop metaphor](https://en.wikipedia.org/wiki/Desktop_metaphor) is
+an interface metaphor that is a set of unifying concepts used by graphical user interfaces (GUI) to
+help users interact more easily with the computer. In keeping with the desktop metaphor, GUI tabs
+are modeled after traditional card tabs inserted in books, paper files, or card indexes. A _tabbed
+document interface_ (TDI) or tab is a graphical control element that allows multiple documents or
+panels to be contained within a single window, using tabs as a navigational widget for switching
+between sets of documents.
+
+Progressive Web Apps can run in [various display modes](/add-manifest/#display) determined by the
+`display` property in the web app manifest. Examples are `fullscreen`, `standalone`, `minimal-ui`,
+and `browser`. These display modes follow a
+[well-defined fallback chain](https://w3c.github.io/manifest/#dfn-fallback-display-mode)
+(`"fullscreen"` → `"standalone"` → `"minimal-ui"` → `"browser"`). If a browser does not support a
+given mode, it falls back to the next display mode in the chain. Via the
+[`"display_override"`](/display-override/) property, developers can specify their own fallback chain
+if they need to.
+
+## What is tabbed application mode
+
+Something that has been missing from the platform so far is a way to let PWA developers offer their
+users a tabbed document interface, for example, to enable editing different files in the same PWA
+window. Tabbed application mode closes this gap.
+
+{% Aside %} This feature is about having a standalone app window with multiple tabs (containing
+separate documents inside the app scope) inside it. It is not to be confused with the existing
+`"display": "browser"`, which has a separate meaning (specifically, that the app is opened in a
+regular browser tab). {% endAside %}
+
+### Suggested use cases for tabbed application mode
+
+Examples of sites that may use tabbed application mode include:
+
+- Productivity apps that let the user edit more than one document (or file) at the same time.
+- Communication apps that let the user have conversations in different rooms per tab.
+- Reading apps that open article links in new in-app tabs.
+
+### Differences to developer-built tabs
+
+Having documents in separate browser tabs comes with resource isolation for free, which is not
+possible using the web today. Developer-built tabs would not scale acceptably to hundreds of tabs
+like browser tabs do. Browser affordances such as navigation history, "Copy this page URL", "Cast
+this tab" or "Open this page in a web browser" would be applied to the developer-built tabbed
+interface page, but not the currently selected document page.
+
+### Differences to `"display": "browser"`
+
+The current `"display": "browser"` already has a
+[specific meaning](https://w3c.github.io/manifest/#dom-displaymodetype-browser):
+
+> Opens the web application using the platform-specific convention for opening hyperlinks in the
+> user agent (e.g., in a browser tab or a new window).
+
+While browsers can do whatever they want regarding UI, it would clearly be a pretty big subversion
+of developer expectations if `"display": "browser"` suddenly meant "run in a separate
+application-specific window with no browser affordances, but a tabbed document interface".
+
+Setting `"display": "browser"` is effectively the way you _opt out_ of being put into an application
+window.
+
+## Current status
+
+<div>
+
+| Step                                     | Status                   |
+| ---------------------------------------- | ------------------------ |
+| 1. Create explainer                      | [Completed][explainer]   |
+| 2. Create initial draft of specification | Not started              |
+| 3. Gather feedback & iterate on design   | [In progress](#feedback) |
+| 4. Origin trial                          | Not started              |
+| 5. Launch                                | Not started              |
+
+</div>
+
+## Using tabbed application mode
+
+To use tabbed application mode, developers need to opt their apps in by setting a specific
+[`"display_override"`](/display-override/) mode value in the web app manifest.
+
+```json
+{
+  "display": "standalone",
+  "display_override": ["tabbed"]
+}
+```
+
+Next, the property `"tab_strip"` can optionally be used to fine-tune the tab behavior. It has two
+allowed sub-properties, `"home_tab"` and `"new_tab_button"`. If the `"tab_strip"` property is not
+present, the particular properties' `"auto"` values are used. The browser determines what values to
+use for `"auto"`.
+
+### Home tab
+
+The home tab is a pinned tab that, if enabled for an app, should always be present when the app is
+open. This tab should never navigate. Links clicked from this tab should open in a new app tab. Apps
+can choose to customize the URL this tab is locked to and the icon displayed on the tab.
+
+The allowed values for `"home_tab"` are:
+
+- `"auto"` to let the browser determine what to do.
+- `"absent"` to tell the browser to not show a home tab.
+- An object with two sub-properties:
+  - `"url"` with the allowed values of `"auto"` or a URL to lock the home tab to.
+  - `"icons"` with the allowed values of `"auto"` or an array of icons as in the main
+    [`"icons"` property](/add-manifest/#icons).
+
+### New tab button
+
+The new tab button, if present, should open a new tab at a URL that is within the scope of the app.
+The app may choose to set a custom URL and icon for this button. Browsers can decide how to handle
+dragging these tabs around to create new windows or combine with browser tabs.
+
+The allowed values for `"new_tab_button"` are:
+
+- `"auto"` to let the browser determine what to do.
+- `"absent"` to tell the browser to not show a new tab button.
+- An object with two sub-properties:
+  - `"url"` with the allowed values of `"auto"` or an in-scope URL to open new tabs on.
+  - `"icons"` with the allowed values of `"auto"` or an array of icons as in the main
+    [`"icons"` property](/add-manifest/#icons).
+
+### Complete example
+
+A complete example to configure the behavior of an app with a tabbed interface may look as follows:
+
+```json
+{
+  "display_override": ["tabbed"],
+  "tab_strip": {
+    "home_tab": {
+      "url": "./home/",
+      "icons": [
+        {
+          "src": "./home.svg",
+          "sizes": "any",
+          "type": "image/svg+xml"
+        }
+      ]
+    },
+    "new_tab_button": {
+      "url": "./new-tab/",
+      "icons": [
+        {
+          "src": "./new-tab.svg",
+          "sizes": "any",
+          "type": "image/svg+xml"
+        }
+      ]
+    }
+  }
+}
+```
+
+### Demo
+
+You can try tabbed application mode by setting a browser flag:
+
+1. Set the `#enable-desktop-pwas-tab-strip` flag.
+1. Install the app [tabbed-application-mode.glitch.me](https://tabbed-application-mode.glitch.me/)
+   ([source code](https://glitch.com/edit/#!/tabbed-application-mode?path=manifest.json)).
+1. Click the different links on the different tabs.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/piz5g2gsqkkQMNmgJ1db.png", alt="Screenshot of the tabbed application mode demo at tabbed-application-mode.glitch.me.", width="800", height="706" %}
+
+## Feedback
+
+The Chrome team wants to hear about your experiences with tabbed application mode.
+
+### Tell us about the API design
+
+Is there something about tabbed application mode that does not work like you expected? Comment on
+the [web app manifest Issue][issue] that we have created.
+
+### Report a problem with the implementation
+
+Did you find a bug with Chrome's implementation? File a bug at
+[new.crbug.com](https://new.crbug.com). Be sure to include as much detail as you can, simple
+instructions for reproducing, and enter `UI>Browser>WebAppInstalls` in the **Components** box.
+[Glitch](https://glitch.com/) works great for sharing quick and easy reproduction cases.
+
+### Show support for the API
+
+Are you planning to use tabbed application mode? Your public support helps the Chrome team
+prioritize features and shows other browser vendors how critical it is to support them.
+
+Send a tweet to [@ChromiumDev][cr-dev-twitter] using the hashtag
+[`#TabbedApplicationMode`](https://twitter.com/search?q=%23TabbedApplicationMode&src=typed_query&f=live)
+and let us know where and how you are using it.
+
+## Useful links
+
+- [Explainer][explainer]
+- [Web app manifest spec issue][issue]
+- [Chromium bug](https://crbug.com/897314)
+- Blink Component: [`UI>Browser>WebAppInstalls`][blink-component]
+
+## Acknowledgements
+
+Tabbed application mode was explored by [Matt Giuca](https://github.com/mgiuca). The experimental
+implementation in Chrome was the work of [Alan Cutter](https://github.com/alancutter). This article
+was reviewed by [Joe Medley](https://github.com/jpmedley). Hero image by
+[Till Niermann](https://commons.wikimedia.org/wiki/User:Till.niermann) on
+[Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Dictionary_indents_headon.jpg).
+
+[blink-component]: https://chromestatus.com/features#component%3ABlink%3EUI>Browser>WebAppInstalls
+[cr-dev-twitter]: https://twitter.com/ChromiumDev
+[issue]: https://github.com/w3c/manifest/issues/737
+[explainer]: https://github.com/WICG/manifest-incubations/blob/gh-pages/tabbed-mode-explainer.md
diff --git a/src/site/content/en/blog/tag-best-practices/index.md b/src/site/content/en/blog/tag-best-practices/index.md
new file mode 100644
index 00000000000..6b6b322b12b
--- /dev/null
+++ b/src/site/content/en/blog/tag-best-practices/index.md
@@ -0,0 +1,646 @@
+---
+layout: post
+title: Best practices for tags and tag managers
+subhead: Optimize tags and tag managers for Core Web Vitals.
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/aIZgX5qHUBalZz0dUNqN.jpg
+authors:
+  - katiehempenius
+  - tunetheweb
+description: |
+  Optimize tags for Core Web Vitals.
+date: 2021-07-29
+updated: 2022-08-24
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Tags](https://support.google.com/tagmanager/answer/3281060?hl=en) are snippets
+of third-party code that are inserted into a site, typically via a tag manager.
+Tags are most commonly used for marketing and analytics.
+
+{% Aside %}
+Although tags and third-party scripts are often fundamentally the exact same
+thing, the separate terminology reflects the different ways that these scripts
+are used: "tags" are typically owned by marketing departments and added via tag
+managers; whereas "third-party scripts" more commonly refer to resources added
+through code changes made by engineering departments.
+{% endAside %}
+
+The performance impact of tags and tag managers varies wildly from site to site.
+Tag managers can be compared to an envelope: the tag manager provides a
+vessel—but what you fill it with and how you use it is mostly up to you.
+
+This article discusses techniques for optimizing tags and tag managers for
+performance and Web Vitals. Although this article references Google Tag Manager,
+many of the ideas discussed are also applicable to other tag managers.
+
+## Impact on Core Web Vitals
+
+Tag Managers can often impact your Core Web Vitals indirectly by using up resources needed to load your page quickly and keep it responsive. Bandwidth can be spent downloading the tag manager JavaScript for your sites, or the subsequent calls this makes. CPU time on the main thread can be spent evaluating and executing JavaScript contained within the tag manager and the tags.
+
+[Largest Contentful Paint](/lcp/) (LCP) is vulnerable to bandwidth contention during the critical page load time. Additionally, blocking the main thread can [delay the LCP render time](/optimize-lcp/#2-eliminate-element-render-delay).
+
+[Cumulative Layout Shift](/cls/) (CLS) can be impacted, either by delaying loading critical resources before the first render, or by tag managers injecting content into the page.
+
+[First Input Delay](/fid/) (FID) is susceptible to CPU contention on the main thread. This can also impact the newer [Interaction to Next Paint](/inp/) (INP) metric and we have seen a correlation between the size of tag managers, and poorer INP scores.
+
+## Tag types
+
+The impact of tags on performance varies by tag type. Generally speaking, image
+tags ("pixels") are the most performant, followed by custom templates, and
+lastly, custom HTML tags. Vendor tags vary depending on the functionality they
+allow.
+
+However, keep in mind that how you use a tag greatly influences its performance
+impact. "Pixels" are highly performant largely because the nature of this tag
+type imposes tight restrictions on how they can be used; custom HTML tags aren't
+necessarily always bad for performance, but due to the level of freedom they
+offer users, they can be easy to misuse in a way that is bad for performance.
+
+When thinking about tags, keep scale in mind: the performance impact of any
+single tag may be negligible—but can become significant when tens or hundreds of
+tags are used on the same page.
+
+### Not all scripts should be loaded using a tag manager
+
+Tag managers are typically not a good mechanism for loading resources that
+implement immediate visual or functional aspects of the user experience—for
+example, cookie notices, hero images, or site features. Using a tag manager to
+load these resources typically delays their delivery. This is bad for the user
+experience and can also increase metrics like LCP and CLS.  In addition, keep in
+mind that some users block tag managers. Using a tag manager to implement UX
+features may result in a broken website for some of your users.
+
+{% Aside %}
+Resources requested via tag manager will typically load later than resources
+requested directly. This is not always a bad thing. If a tag manager is
+primarily used to deliver non-essential resources, this delay can be used
+constructively by providing a mechanism for delaying non-essential requests.
+{% endAside %}
+
+### Be careful with Custom HTML tags
+
+[Custom HTML
+tags](https://support.google.com/tagmanager/answer/6107167/custom-tags?hl=en#CustomHTML)
+have been around for many years and are heavily used on most sites. Custom HTML
+tags allow you to enter your own code with few restrictions as, despite the name,
+the main use of this tag is to add custom `<script>` elements to a page.
+
+Custom HTML tags can be used in a wide variety of ways and their performance impact
+varies significantly. When measuring the performance of your site, be aware that
+most tools will attribute the performance impact of a Custom HTML tag to the tag
+manager that injected it—rather than the tag itself.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/cjLFJStmZvkQkr4DYPlk.png",
+  alt="Screenshot of creating a custom tag in Google Tag Manager",
+  width="800",
+  height="470",
+  class="screenshot"
+%}
+
+Custom HTML tags can insert an element into the surrounding page. The act
+of inserting elements into the page can be a source of performance issues, and
+in some cases, also cause layout shifts.
+
+*   In most situations, if an element is inserted into the page, the browser
+    must recalculate the size and position of each item on the page—this process
+    is known as
+    [layout](https://developer.chrome.com/blog/inside-browser-part3/#layout).
+    The performance impact of a single layout is minimal, but when it occurs
+    excessively it can become a source of performance issues. The impact of this
+    phenomenon is larger on lower-end devices and pages with a high number of
+    DOM elements.
+*   If a visible page element is inserted into the DOM after the surrounding
+    area has already been rendered, it can cause a layout shift. This phenomenon
+    is not unique to tag managers—however, because tags typically load later
+    than other parts of the page, it's common for them to be inserted into the
+    DOM after the surrounding page has already been rendered.
+
+{% Aside %}
+If you're adding or changing visible content on a page, keep in mind that search
+engines will need to be able to fetch and process the JavaScript used. For
+Google, you can [verify rendering of a
+page](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering#verify)
+for Search; other search engines may have similar testing tools available.
+{% endAside %}
+
+### Consider using Custom Templates
+
+[Custom templates](https://developers.google.com/tag-platform/tag-manager/templates) support
+some of the same operations as Custom HTML tags but are built upon a sandboxed
+version of JavaScript that provides
+[APIs](https://developers.google.com/tag-manager/templates/api) for common use
+cases like script injection and pixel injection. As the name implies, they allow
+a template to be created, by a power user who can build this with performance in
+mind. Less technical users can then use the template. This is often safer
+than providing full Custom HTML access.
+
+Due to the greater restrictions imposed on custom templates, these tags are much
+less likely to exhibit performance or security issues; however, for these same
+reasons, custom templates will not work for all use cases.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QRz6pn83YE6plVivynA7.png",
+  alt="Screenshot of using a custom template in Google Tag Manager",
+  width="800",
+  height="388",
+  class="screenshot"
+%}
+
+### Inject scripts correctly
+
+Using a tag manager to inject a script is a very common use case. The
+recommended way to do this is to use a Custom Template and the
+[`injectScript`](https://developers.google.com/tag-manager/templates/api#injectscript)
+API.
+
+For information on using the injectScript API to convert an existing Custom HTML
+tag, see [Convert an existing
+tag](https://developers.google.com/tag-manager/templates/convert-existing-tag).
+
+If you must use a Custom HTML tag, here are some things to keep in mind:
+
+*   Libraries and large third-party scripts should be loaded via a script tag
+    that downloads an external file (for example, `<script
+    src="external-scripts.js">`), rather than directly copy-pasting the script's
+    contents into the tag. Although forgoing use of the `<script>` tag
+    eliminates a separate round-trip to download the script's contents, this
+    practice increases container size and prevents the script from being cached
+    separately by the browser.
+*   Many vendors recommend placing their `<script>` tag at the top of the
+    `<head>`. However, for scripts loaded via tag manager, this recommendation
+    is usually unnecessary: in most situations, the browser has already finished
+    parsing the `<head>` by the time that the tag manager executes.
+
+### Use pixels
+
+In some situations third-party scripts can be replaced with image or iframe
+"pixels". Compared to their script-based counterparts, pixels may support
+less functionality, so are often seen as a less-preferred implementation because
+of that. However, when used inside tag managers, pixels can be more dynamic
+as they can fire on triggers and pass different variables. They are the most
+performant and secure type of tag because there is no JavaScript execution after
+it is fired. Pixels have a very small resource size (less than 1&nbsp;KB) and do
+not cause layout shifts.
+
+Check with your third-party provider for more information on their support for
+pixels. Additionally, you can try inspecting their code for a `<noscript>` tag.
+If a vendor supports pixels, they will often include them within the
+`<noscript>` tag.
+
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/zJPC30RE3axvUDiWUdqW.png",
+  alt="Screenshot of custom image tag in Google Tag Manager",
+  width="800",
+  height="342"
+%}
+
+#### Alternatives to pixels
+
+Pixels became popular largely because at one time they were one of the cheapest
+and most reliable ways to make a HTTP request in situations where the server
+response is not relevant ( for example, when sending data to analytics
+providers). The
+[`navigator.sendBeacon()`](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)
+and [`fetch()
+keepalive`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters)
+APIs are designed to address this same use case but are arguably more reliable
+than pixels.
+
+{% Aside %}
+The `sendBeacon()` and `fetch() keepalive` APIs will both still work in
+situations where the browser is
+[unloading](https://developer.mozilla.org/docs/Web/API/Window/unload_event)
+the page: for example, both of these APIs can be used to track outbound link
+clicks. By contrast, techniques like pixels and
+[`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)
+would likely fail in those cases.
+{% endAside %}
+
+There is nothing wrong with continuing to use pixels—they are well supported and
+have minimal performance impact. However, if you are building your own beacons,
+it is worth considering using one of these APIs.
+
+
+##### `sendBeacon()`
+
+The
+[`navigator.sendBeacon()`](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)
+API is designed for sending small amounts of data to web servers in situations
+where the server response does not matter.
+
+```js
+const url = "https://example.com/analytics";
+const data = JSON.stringify({
+    event: "checkout",
+    time: performance.now()
+});
+
+navigator.sendBeacon(url, data);
+```
+
+`sendBeacon()` has a limited API: it only supports making POST requests and does
+not support setting custom headers. It is
+[supported](https://caniuse.com/beacon) by all modern browsers.
+
+##### `fetch() keepalive`
+
+[`keepalive`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters)
+is a flag that allows the [Fetch
+API](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch) to
+be used to make non-blocking requests like event reporting and analytics. It is
+used by including `keepalive: true` in the parameters passed to `fetch()`.
+
+```js
+const url = "https://example.com/analytics";
+const data = JSON.stringify({
+  event: "checkout",
+  time: performance.now()
+});
+
+fetch(url, {
+    method: 'POST',
+    body: data,
+    keepalive: true
+});
+```
+
+If `fetch() keepalive` and `sendBeacon()` seem very similar, it's because they
+are. In fact, in Chromium browsers, `sendBeacon()` is now built upon `fetch()
+keepalive`.
+
+When choosing between `fetch() keepalive` and `sendBeacon()`, it's important to
+consider the features and browser support that you need. The fetch() API is
+significantly more flexible; however, `keepalive` has less browser
+[support](https://caniuse.com/?search=keepalive) than `sendBeacon()`.
+
+### Get clarification
+
+Tags are often created by following guidance provided by a third-party vendor.
+If it is unclear what a vendor's code does—consider asking someone who knows.
+Getting a second opinion can help identify if a tag has the potential to create
+performance or security issues.
+
+Labeling tags with an owner in the tag manager is also recommended. It is far
+too easy to forget who owns a tag, and be afraid to remove it just in case!
+
+## Triggers
+
+At a high-level, optimizing [tag
+triggers](https://support.google.com/tagmanager/topic/7679108?hl=en&ref_topic=7679384)
+generally consists of making sure to not trigger tags more than necessary and
+choosing a trigger that balances business needs with performance costs.
+
+Triggers themselves are JavaScript code that will increase the size—and execution
+cost—of the tag manager. While most triggers are small, the cumulative effect can
+add up. Having many click events for example, or timer triggers can dramatically
+increase the workload of the tag manager.
+
+### Choose an appropriate trigger event
+
+The performance impact of a tag is not fixed: generally speaking, the earlier
+that a tag fires, the greater its impact on performance. Resources are typically
+constrained during the initial page load and therefore loading or executing a
+particular resource (or tag) takes resources away from something else.
+
+Although it is important to choose appropriate triggers for all tags, it is
+particularly important for tags that load large resources or execute long
+scripts.
+
+Tags can be triggered on
+[Page Views](https://support.google.com/tagmanager/answer/7679319?hl=en)
+(typically `Page load`, on `DOM Ready`, on `Window Loaded`), or based on a
+custom event. To avoid impacting page load, it is recommended to fire
+non-essential tags after `Window Loaded`.
+
+### Use custom events
+
+[Custom events](https://support.google.com/tagmanager/answer/7679219?hl=en)
+allow you to fire triggers in response to page events that aren't covered by
+Google Tag Manager's built-in triggers. For example, many tags use [page view
+triggers](https://support.google.com/tagmanager/answer/7679319?hl=en); however,
+the time period between `DOM Ready` and `Window Loaded` can be lengthy on many
+pages and this can make it difficult to fine-tune when a tag fires. Custom
+events provide a solution to this problem.
+
+To use custom events, first create a custom event trigger and update your tags
+to use this trigger.
+
+{% Img
+  src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/FsoFKKxRishTMunJAl3W.png",
+  alt="Screenshot of a Custom Event trigger in Google Tag Manager",
+  width="800",
+  height="348"
+%}
+
+To fire the trigger, push the corresponding event to the data layer.
+
+```js
+// Custom event trigger that fires after 2 seconds
+setTimeout(() => {
+  dataLayer.push({
+    'event' : 'my-custom-event'
+  });
+}, 2000);
+```
+
+### Use specific trigger conditions
+
+Using specific trigger conditions helps avoid firing a tag unnecessarily.
+Although there are many ways to apply this concept, one of the simplest yet most
+useful things you can do is ensure that a tag only fires on pages where it is
+actually used.
+
+{% Img
+  src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/B05L2hNj1RUO9duvvdYX.png",
+  alt="Screenshot showing trigger conditions in Google Tag Manager",
+  width="800",
+  height="454"
+%}
+
+[Built-in variables](https://support.google.com/tagmanager/answer/7182738) can
+also be incorporated into trigger conditions to limit tag firing.
+
+However, be aware that having complex trigger conditions or exceptions takes
+processing time in and off itself, so do not make them too complex.
+
+### Load your tag manager at an appropriate time
+
+Adjusting when you tag manager itself loads can have a significant impact on
+performance. Triggers, regardless of how they are configured, can't fire until
+after a tag manager loads. Although it is important to choose good triggers for
+individual tags (as explained above), experimenting with when you load your tag
+manager can often have an equal or greater impact given that this single
+decision will impact all tags on a page.
+
+Loading the tag manager later also adds a layer of control and can avoid future
+performance issues as it will prevent a tag manager user inadvertently loading
+a tag too early, without realizing the impact this can have.
+
+## Variables
+
+Variables allow data to be read from the page. They are useful in triggers, and
+in tags themselves.
+
+Like triggers, variables result in JavaScript code being added to the tag manager,
+and so can cause performance issues. Variables can be relatively simple built-in
+types that can, for example, read parts of the URL, cookies, data layer, or DOM.
+Or they can be custom JavaScript that is basically unlimited in what it can do.
+
+Keep variables simple and to a minimum, since they will need to be evaluated
+continually by the tag manager. Remove old variables that are no longer used
+to reduce both the size of the tag manager script, and the processing time it
+uses.
+
+## Tag management
+
+Using the tags efficiently will reduce the risk of performance issues.
+
+### Use the data layer
+
+The [data layer](https://developers.google.com/tag-manager/devguide) "contains
+all of the information that you want to pass to Google Tag Manager". More
+concretely, it is a JavaScript array of objects that contain information about
+the page. It can also be used to trigger tags.
+
+```javascript
+// Contents of the data layer
+window.dataLayer = [{
+    'pageCategory': 'signup',
+    'visitorType': 'high-value'
+  }];
+
+// Pushing a variable to the data layer
+window.dataLayer.push({'variable_name': 'variable_value'});
+
+// Pushing an event to the data layer
+window.dataLayer.push({'event': 'event_name'});
+```
+
+Although Google Tag Manager can be used without the data layer, its use is
+strongly recommended. The data layer provides a way to consolidate the data
+being accessed by third-party scripts into a single place thereby providing
+better visibility into its usage. Amongst other things, this can help reduce
+redundant variable calculations and script execution. Using a data layer also
+controls the data being accessed by the tags, rather than giving full JavaScript
+variable or DOM access.
+
+{% Aside %}
+The performance benefits of the data layer might seem non-intuitive given that
+updating the data layer causes Google Tag Manager to reevaluate all container
+variables and potentially trigger tags—all of which entails JavaScript
+execution. Although it is possible to misuse the data layer, generally speaking,
+if working with the data layer is a source of performance issues, it probably
+indicates that the container itself has performance issues—the data layer is
+merely making these issues more apparent.
+{% endAside %}
+
+### Remove duplicate and unused tags
+
+Duplicate tags can occur when a tag is included in a page's HTML markup in
+addition to being injected through a tag manager.
+
+Unused tags should be paused or removed rather than blocked through use of a
+[trigger exception](https://support.google.com/tagmanager/answer/7679318?hl=en).
+Pausing or removing a tag removes the code from the container; blocking does
+not.
+
+When unused tags are removed, the triggers and variables should also be
+reviewed to see if any of them can be removed if they were only used by those
+tags.
+
+### Use allow and deny lists
+
+[Allow and deny lists](https://developers.google.com/tag-manager/web/restrict)
+allow you to configure highly granular restrictions on the tags, triggers, and
+variables allowed on a page. This can be used to help enforce performance best
+practices and other policies.
+
+Allow and deny lists are configured through the data layer.
+
+```js
+window.dataLayer = [{
+  'gtm.allowlist': ['<id>', '<id>', ...],
+  'gtm.blocklist': ['customScripts']
+}];
+```
+
+For example, it is possible to not allow any Custom HTML tags, JavaScript
+variables, or direct DOM access. This means only pixels and pre-defined tags
+can be used, with data from the data layer. While this is certainly restrictive,
+it can result in a much more performant, and secure, tag manager implementation.
+
+### Consider using server-side tagging
+
+Switching to server-side tagging is not a trivial task, but it is worth
+considering - particularly for larger sites that want more control over their
+data. Server-side tagging removes vendor code from the client, and with it,
+offloads processing from the client to the server.
+
+For example, when using client-side tagging, sending data to multiple analytics
+accounts entails that the client initiates separate requests for each endpoint.
+By contrast, with server-side tagging, a single request is made by the client to
+the server-side container, and from there, this data is forwarded to different
+analytics accounts.
+
+Keep in mind that server-side tagging only works with some tags; tag
+compatibility varies depending on vendor.
+
+For more information, see [An introduction to server-side
+tagging](https://developers.google.com/tag-manager/serverside/intro).
+
+## Containers
+
+Tag managers typically allow multiple instances or "containers" within their
+set up. This allows multiple containers to be controlled within the one tag
+manager account.
+
+### Use only one container per page
+
+Using multiple
+[containers](https://developers.google.com/tag-manager/api/v1/reference/accounts/containers)
+on a single page can create significant performance issues as it introduces
+additional overhead and script execution. At the very least it duplicates the
+core tag code itself which, as it is delivered as part of the container's
+JavaScript, cannot be reused between the containers.
+
+It is rare for multiple containers to be used effectively. However, there can be
+instances when this can work—if controlled well—including:
+- Having a lighter "early load" container, and a heavier "later load" container,
+  rather than one large container.
+- Having a restricted container used by less technical users, with a less
+  restricted, but more tightly controlled, container for tags that cannot be used
+  in the restricted container.
+
+If you must use multiple containers per page, [follow Google Tag manager
+guidance for setting up multiple
+containers](https://developers.google.com/tag-manager/devguide#multiple-containers).
+
+### Use separate containers if needed
+
+If you use a tag manager for multiple properties (for example, a web app and a
+mobile app)—the number of containers you use can help or hurt your workflow
+productivity. It can also impact performance.
+
+Generally speaking, a single container can effectively be used across multiple
+sites if the sites are similar in use and structure. For example, although a
+brand's mobile and web apps might serve similar functions, it's likely that the
+apps will be structured differently, and therefore more effectively managed
+through separate containers.
+
+Trying to reuse a single container too broadly typically unnecessarily increases
+the complexity and size of the container by forcing the adoption of complex logic
+to manage tags and triggers.
+
+### Keep an eye on container size
+
+The size of a container is determined by its tags, triggers, and variables.
+Although a small container may still negatively impact page performance, a large
+container almost certainly will.
+
+Container size should not be your north-star metric when optimizing your tag
+usage; however, a large container size is often a warning sign that a container
+is not well maintained and possibly misused.
+
+Google Tag Manager
+[limits](https://support.google.com/tagmanager/answer/2772488?hl=en) container
+size to 200&nbsp;KB and will warn about container size starting at 140&nbsp;KB. However,
+most sites should aim to keep their containers far smaller than this. For
+perspective, the median site container is around 50&nbsp;KB.
+
+To determine the size of your container, look at the size of the response
+returned by `https://www.googletagmanager.com/gtag/js?id=YOUR_ID`. This
+response contains the Google Tag Manager library plus the contents of the
+container. By itself, the Google Tag Manager library is around 33&nbsp;KB
+compressed.
+
+### Name your container versions
+
+A [container
+version](https://developers.google.com/tag-manager/api/v1/reference/accounts/containers/versions)
+is a snapshot of a container's content at a particular point in time. Using a
+meaningful name and along with including a short description of meaningful
+changes within can go a long way in making it easier to debug future performance
+issues.
+
+## Tagging workflows
+
+Managing changes to your tags is important to ensure they do not have a
+negative impact on page performance.
+
+### Test tags before deploying
+
+Testing your tags before deployment can help catch issues (performance and
+otherwise) before they ship.
+
+Things to consider when testing a tag include:
+- Is the tag working correctly?
+- Does the tag cause any layout shifts?
+- Does the tag load any resources? How large are these resources?
+- Does the tag trigger a long-running script?
+
+#### Preview mode
+
+[Preview mode](https://support.google.com/tagmanager/answer/6107056) allows you
+to test tag changes on your actual site without having to deploy them to the
+public first. Preview mode includes a debugging console that provides
+information about tags.
+
+The execution time of Google Tag Manager will be different (slightly slower)
+when run in Preview mode due to the additional overhead required to expose
+information in the debugging console. Thus, comparing Web Vitals measurements
+collected in preview mode to those collected in production is not recommended.
+However, this discrepancy should not affect the execution behavior of the tags
+themselves.
+
+#### Standalone testing
+
+An alternative approach to testing tags is to set up an empty page containing a
+container with a single tag—the tag you are testing. This testing setup is less
+realistic and won't catch some issues (for example, whether a tag causes layout
+shifts)—however it can make it easier to isolate and measure the impact of the
+tag on things like script execution. Check out how [Telegraph uses this
+isolation approach to improve
+performance](https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5)
+of third-party code.
+
+### Monitor tag performance
+
+The Google Tag Manager [Monitoring
+API](https://developers.google.com/tag-manager/templates/monitoring) can be used
+to gather information about the [execution
+time](https://developers.google.com/tag-manager/templates/monitoring#execution_times)
+of a particular tag. This information is reported to an endpoint of your
+choosing.
+
+For more information, see [How to build a Google Tag Manager
+Monitor](https://www.simoahava.com/analytics/google-tag-manager-monitor/).
+
+### Require approval for container changes
+
+First-party code typically goes through review and testing before deployment -
+treat your tags the same. Adding [two-step
+verification](https://support.google.com/tagmanager/answer/4525539/tag-manager-and-2-step-verification?hl=en),
+which requires administrator approval for container changes, is one way to do
+this. Alternatively, if you don't want to require two-step verification but
+would still like to keep an eye on changes, you can set up [container
+notifications](https://support.google.com/tagmanager/answer/9713667?hl=en) to
+receive email alerts about container events of your choosing.
+
+### Periodically audit tag usage
+
+One of the challenges of working with tags is that they tend to accumulate over
+time: tags get added but are rarely removed. Auditing tags periodically is one
+way to reverse this trend. The ideal frequency for doing this will depend on how
+often your site's tags are updated.
+
+Labeling each tag so the owner is obvious allows easier identification of who
+is responsive for that tag and can say whether it is still needed.
+
+When auditing tags, do not forget about cleaning up triggers and variables as
+well. They can easily be the cause of performance issues too.
+
+For more information, see [Keeping third-party scripts under
+control](/controlling-third-party-scripts/).
diff --git a/src/site/content/en/blog/technitone/index.md b/src/site/content/en/blog/technitone/index.md
new file mode 100644
index 00000000000..588ab27e4b0
--- /dev/null
+++ b/src/site/content/en/blog/technitone/index.md
@@ -0,0 +1,523 @@
+---
+layout: post
+title: Case Study - Building Technitone.com
+authors:
+  - gskinnerdotcom
+date: 2012-02-27
+tags:
+  - blog
+  - case-study
+---
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/n7RpXa3NM0GtkXIyec38.jpeg", alt="Technitone — a web audio experience.", width="754", height="255" %}
+</figure>
+
+[Technitone.com](http://www.technitone.com) is a fusion of WebGL, Canvas, Web Sockets, CSS3, Javascript, Flash, and the new [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) in Chrome.
+
+This article will touch base on every aspect of production: the plan, the server, the sounds, the visuals, and some of the workflow we leverage to design for interactive. Most sections contain code snippets, a demo, and a download. At the end of the article, there is a download link where you can grab them all as one zip file.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bZ0A2m55hacSQzLtrcoq.png", alt="The gskinner.com production Team.", width="750", height="263" %}
+</figure>
+
+## The gig
+
+We're by no means audio engineers at gskinner.com — but tempt us with a challenge and we'll figure out a plan:
+
+- Users [plot tones on a grid](http://www.technitone.com/view/68k21dr24vb),"inspired" by [Andre's](http://lab.andre-michelle.com/) [ToneMatrix](http://lab.andre-michelle.com/tonematrix)
+- Tones are wired to sampled instruments, drum kits, or even users' [own recordings](http://www.technitone.com/view/m923dgxnwbg)
+- Multiple connected users play on the same grid simultaneously
+- …or go into solo mode to explore on their own
+- Invitational sessions allow users to organize a band and have an impromptu jam
+
+We offer users an opportunity to explore the Web Audio API by means of a tools panel that applies audio filters and effects on their tones.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RAWSPBmXjb2u6e6uJAef.png", alt="Technitone by gskinner.com", width="750", height="471" %}
+</figure>
+
+We also:
+
+- Store users' compositions and effects as data and sync it across clients
+- Provide some color options so they can draw [cool looking songs](http://www.technitone.com/view/8vec1djzfxv)
+- Offer a gallery so people can listen, love, or even edit, other people's work
+
+We stuck with the familiar grid metaphor, floated it in 3D space, added some lighting, texture and particle effects, housed it in a flexible (or fullscreen) CSS and JS-driven interface.
+
+## Road trip
+
+Instrument, effect, and grid data is consolidated and serialized on the client, then sent off to our custom [Node.js](http://nodejs.org/) backend to resolve for multiple users à la [Socket.io](http://socket.io/). This data is sent back to the client with each players' contributions included, before being dispersed to the relative CSS, WebGL, and WebAudio layers in charge of rendering the UI, samples, and effects during multi-user playback.
+
+Real-time communication with sockets feeds Javascript on the client and Javascript on the server.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HpmPCTvFFVK2vkUxbGsv.png", alt="Technitone Server Diagram", width="751", height="923" %}
+</figure>
+
+We use Node for every aspect of the server. It's a static web server and our socket server all in one. [Express](http://expressjs.com/) is what we ended up using, it's a full web server built entirely on Node. It's super scalable, highly customizable, and handles the low-level server aspects for you (just like Apache or Windows Server would). Then you, as the developer, only have to focus on building your application.
+
+### Multi-User Demo (ok, it's really just a screenshot)
+
+This demo requires to be run off a Node server, and since this article isn't one, we've included a screenshot of what the demo looks like after you've installed Node.js, configured your web server, and run it locally. Every time a new user visits your demo installation, a new grid will be added and everyone's work is visible to one another.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/y03Skm6l0vM3q8yZUuZF.gif", alt="Screenshot of Node.js Demo", width="750", height="426" %}
+</figure>
+
+Node is easy. Using a combo of Socket.io and custom POST requests, we didn't have to build complex routines for synchronization. Socket.io transparently handles this; [JSON](http://en.wikipedia.org/wiki/JSON) gets passed around.
+
+How easy? Watch this.
+
+With 3 lines of Javascript we have a web server up and running with Express.
+
+```js
+//Tell  our Javascript file we want to use express.
+var express = require('express');
+
+//Create our web-server
+var server = express.createServer();
+
+//Tell express where to look for our static files.
+server.use(express.static(__dirname + '/static/'));
+```
+
+A few more to tie socket.io in for real-time communication.
+
+```js
+var io = require('socket.io').listen(server);
+//Start listening for socket commands
+io.sockets.on('connection', function (socket) {
+	//User is connected, start listening for commands.
+	socket.on('someEventFromClient', handleEvent);
+
+});
+```
+
+Now we just start listening for incoming connections from the HTML page.
+
+```js
+<!-- Socket-io will serve it-self when requested from this url. -->
+<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+
+ <!-- Create our socket and connect to the server -->
+ var sock = io.connect('http://localhost:8888');
+ sock.on("connect", handleConnect);
+
+ function handleConnect() {
+ 	//Send a event to the server.
+ 	sock.emit('someEventFromClient', 'someData');
+ }
+ ```
+
+## Sound check
+
+A big unknown was the effort entailed with using the Web Audio API. Our initial findings confirmed that [Digital Signal Processing](http://en.wikipedia.org/wiki/Digital_Signal_Processing) (DSP) is very complex, and we were likely in way over our heads. Second realization: [Chris Rogers](http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) has already done the heavy lifting in the API.
+Technitone isn't using any really complex math or audioholicism; this functionality is easily accessible to interested developers. We really just needed to brush up on some terminology and [read the docs](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html). Our advice? Don't skim them. Read them. Start at the top and end at the bottom. They are peppered with diagrams and photos, and it's really cool stuff.
+
+If this is the first you've heard of the Web Audio API, or don't know what it can do, hit up Chris Rogers' [demos](http://chromium.googlecode.com/svn/trunk/samples/audio/index.html). Looking for inspiration? You'll definitely find it there.
+
+### Web Audio API Demo
+
+Load in a sample (sound file)…
+
+```js
+/**
+ * The XMLHttpRequest allows you to get the load
+ * progress of your file download and has a responseType
+ * of "arraybuffer" that the Web Audio API uses to
+ * create its own AudioBufferNode.
+ * Note: the 'true' parameter of request.open makes the
+ * request asynchronous - this is required!
+ */
+var request = new XMLHttpRequest();
+request.open("GET", "mySample.mp3", true);
+request.responseType = "arraybuffer";
+request.onprogress = onRequestProgress; // Progress callback.
+request.onload = onRequestLoad; // Complete callback.
+request.onerror = onRequestError; // Error callback.
+request.onabort = onRequestError; // Abort callback.
+request.send();
+
+// Use this context to create nodes, route everything together, etc.
+var context = new webkitAudioContext();
+
+// Feed this AudioBuffer into your AudioBufferSourceNode:
+var audioBuffer = null;
+
+function onRequestProgress (event) {
+	var progress = event.loaded / event.total;
+}
+
+function onRequestLoad (event) {
+	// The 'true' parameter specifies if you want to mix the sample to mono.
+	audioBuffer = context.createBuffer(request.response, true);
+}
+
+function onRequestError (event) {
+	// An error occurred when trying to load the sound file.
+}
+```
+
+…set up modular routing…
+
+```js
+/**
+ * Generally you'll want to set up your routing like this:
+ * AudioBufferSourceNode > [effect nodes] > CompressorNode > AudioContext.destination
+ * Note: nodes are designed to be able to connect to multiple nodes.
+ */
+
+// The DynamicsCompressorNode makes the loud parts
+// of the sound quieter and quiet parts louder.
+var compressorNode = context.createDynamicsCompressor();
+compressorNode.connect(context.destination);
+
+// [other effect nodes]
+
+// Create and route the AudioBufferSourceNode when you want to play the sample.
+```
+
+…apply a runtime effect (convolution using an impulse response)…
+
+```js
+/**
+ * Your routing now looks like this:
+ * AudioBufferSourceNode > ConvolverNode > CompressorNode > AudioContext.destination
+ */
+
+var convolverNode = context.createConvolver();
+convolverNode.connect(compressorNode);
+convolverNode.buffer = impulseResponseAudioBuffer;
+```
+
+…apply another runtime effect (delay)…
+
+```js
+/**
+ * The delay effect needs some special routing.
+ * Unlike most effects, this one takes the sound data out
+ * of the flow, reinserts it after a specified time (while
+ * looping it back into itself for another iteration).
+ * You should add an AudioGainNode to quieten the
+ * delayed sound...just so things don't get crazy :)
+ *
+ * Your routing now looks like this:
+ * AudioBufferSourceNode -> ConvolverNode > CompressorNode > AudioContext.destination
+ *                       |  ^
+ *                       |  |___________________________
+ *                       |  v                          |
+ *                       -> DelayNode > AudioGainNode _|
+ */
+
+var delayGainNode = context.createGainNode();
+delayGainNode.gain.value = 0.7; // Quieten the feedback a bit.
+delayGainNode.connect(convolverNode);
+
+var delayNode = context.createDelayNode();
+delayNode.delayTime = 0.5; // Re-sound every 0.5 seconds.
+delayNode.connect(delayGainNode);
+
+delayGainNode.connect(delayNode); // make the loop
+```
+
+…and then make it audible.
+
+```js
+/**
+ * Once your routing is set up properly, playing a sound
+ * is easy-shmeezy. All you need to do is create an
+ * AudioSourceBufferNode, route it, and tell it what time
+ * (in seconds relative to the currentTime attribute of
+ * the AudioContext) it needs to play the sound.
+ *
+ * 0 == now!
+ * 1 == one second from now.
+ * etc...
+ */
+
+var sourceNode = context.createBufferSource();
+sourceNode.connect(convolverNode);
+sourceNode.connect(delayNode);
+sourceNode.buffer = audioBuffer;
+sourceNode.noteOn(0); // play now!
+```
+
+Our approach to playback in Technitone is all about scheduling. Instead of setting a timer interval equal to our tempo to process sounds every beat, we set up a smaller interval that manages and schedules sounds in a queue. This allows the API to perform the up-front labour of resolving audio data and processing filters and effects before we task the CPU with actually making it audible. When that beat finally comes around, it already has all the information it needs to present the net result to the speakers.
+
+Overall, everything needed to be optimized. When we pushed our CPUs too hard, processes were skipped (pop, click, scratch) in order to keep up with the schedule; we put serious effort into halting all the madness if you jump over to another tab in Chrome.
+
+## Light show
+
+Front and center is our grid and particle tunnel. This is Technitone's [WebGL](http://www.khronos.org/webgl/) layer.
+
+WebGL offers considerably superior performance than most other approaches to rendering visuals on the web, by tasking the GPU to work in conjunction with the processor. That performance gain comes with the cost of significantly more involved development with a much steeper learning curve. That said, if you're truly passionate about interactive on the web, and want as few performance restraints as possible, WebGL offers a solution [comparable to Flash.](http://www.airtightinteractive.com/2011/10/stage3d-vs-webgl-performance/)
+
+## WebGL Demo
+
+WebGL content is rendered to a canvas (literally, the HTML5 Canvas) and is comprised of these core building blocks:
+
+- object vertices (geometry)
+- position matrices (3D coordinates)
+    - shaders (a description of geometry appearance, linked directly to the GPU)
+    - the context ("shortcuts" to the elements that the GPU makes reference to)
+    - buffers (pipelines for passing context data to the GPU)
+    - the main code (the business logic specific to the desired interactive)
+    - the"draw" method (activates the shaders and draws pixels to the canvas)
+
+The basic process to render WebGL content to the screen looks like:
+
+1. Set the perspective matrix (adjusts settings for the camera that peers into the 3D space, defining the picture plane).
+1. Set the position matrix (declare an origin in the 3D coordinates that positions are measured relative to).
+1. Fill the buffers up with data (vertex position, color, textures…) to pass to the context through the shaders.
+1. Extract and organize data from the buffers with the shaders and pass it into the GPU.
+1. Call the draw method to tell the context to activate shaders, run with the data, and update the canvas.
+
+It looks like this in action:
+
+Set the perspective matrix…
+
+```js
+// Aspect ratio (usually based off the viewport,
+// as it can differ from the canvas dimensions).
+var aspectRatio = canvas.width / canvas.height;
+
+// Set up the camera view with this matrix.
+mat4.perspective(45, aspectRatio, 0.1, 1000.0, pMatrix);
+
+// Adds the camera to the shader. [context = canvas.context]
+// This will give it a point to start rendering from.
+context.uniformMatrix4fv(shader.pMatrixUniform, 0, pMatrix);
+```
+
+…set the position matrix…
+
+```js
+// This resets the mvMatrix. This will create the origin in world space.
+mat4.identity(mvMatrix);
+
+// The mvMatrix will be moved 20 units away from the camera (z-axis).
+mat4.translate(mvMatrix, [0,0,-20]);
+
+// Sets the mvMatrix in the shader like we did with the camera matrix.
+context.uniformMatrix4fv(shader.mvMatrixUniform, 0, mvMatrix);
+```
+
+…define some geometry and appearance…
+
+```js
+// Creates a square with a gradient going from top to bottom.
+// The first 3 values are the XYZ position; the last 4 are RGBA.
+this.vertices = new Float32Array(28);
+this.vertices.set([-2,-2, 0, 	0.0, 0.0, 0.7, 1.0,
+                   -2, 2, 0, 	0.0, 0.4, 0.9, 1.0,
+                    2, 2, 0, 	0.0, 0.4, 0.9, 1.0,
+                    2,-2, 0, 	0.0, 0.0, 0.7, 1.0
+                  ]);
+
+// Set the order of which the vertices are drawn. Repeating values allows you
+// to draw to the same vertex again, saving buffer space and connecting shapes.
+this.indices = new Uint16Array(6);
+this.indices.set([0,1,2, 0,2,3]);
+```
+
+…fill the buffers up with data and pass it to the context…
+
+```js
+// Create a new storage space for the buffer and assign the data in.
+context.bindBuffer(context.ARRAY_BUFFER, context.createBuffer());
+context.bufferData(context.ARRAY_BUFFER, this.vertices, context.STATIC_DRAW);
+
+// Separate the buffer data into its respective attributes per vertex.
+context.vertexAttribPointer(shader.vertexPositionAttribute,3,context.FLOAT,0,28,0);
+context.vertexAttribPointer(shader.vertexColorAttribute,4,context.FLOAT,0,28,12);
+
+// Create element array buffer for the index order.
+context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, context.createBuffer());
+context.bufferData(context.ELEMENT_ARRAY_BUFFER, this.indices, context.STATIC_DRAW);
+```
+
+…and call the draw method
+
+```js
+// Draw the triangles based off the order: [0,1,2, 0,2,3].
+// Draws two triangles with two shared points (a square).
+context.drawElements(context.TRIANGLES, 6, context.UNSIGNED_SHORT, 0);
+```
+
+Every frame, remember to clear the canvas if you don't want alpha-based visuals to stack up on one another.
+
+## The venue
+
+Besides the grid and particle tunnel, every other UI element was built in HTML / CSS and interactive logic in Javascript.
+
+From the onset, we decided users should be interacting with the grid as quickly as possible. No splash screen, no instructions, no tutorials, just 'Go.' If the interface is loaded — there should be nothing slowing them down.
+
+This required us to look carefully at how to guide a first-time user through their interactions. We included subtle cues, like having the CSS cursor property change based on the user's mouse position within the WebGL space. If the cursor is over the grid, we switch it to a hand cursor (because they can interact by plotting tones). If it's hovered in the whitespace around the grid, we swap it out for a directional cross cursor (to indicate they can rotate, or explode the grid into layers).
+
+### Getting Ready for the Show
+
+[LESS](http://lesscss.org/) (a CSS pre-processor), and [CodeKit](http://incident57.com/codekit/) (web development on steroids) really cut down on the time it took to translate design files into stubbed out HTML/CSS. These let us organize, write, and optimize CSS in a much more versatile fashion — leveraging variables, mix-ins (functions), and even math!
+
+## Stage Effects
+
+Using [CSS3 transitions](http://www.w3schools.com/css3/css3_transitions.asp) and [backbone.js](http://documentcloud.github.com/backbone/) we created some really simple effects that help bring the application to life and provide users with visual queues that indicate which instrument they are using.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/347uJ8Xov5CXd7Rvnpfs.jpeg", alt="The colors of Technitone.", width="750", height="540" %}
+</figure>
+
+Backbone.js allows us to catch color change events and apply the new color to the appropriate DOM elements. GPU accelerated CSS3 transitions handled the color style changes with little-to-no impact on performance.
+
+Most of the color transitions on interface elements were created by transitioning background colors. On top of this background color, we place background images with strategic areas of transparency to let the background color shine through.
+
+
+### HTML: The Foundation
+
+We needed three color regions for the demo: two user selected color regions and a third mixed color region. We built the simplest DOM structure we could think of that support CSS3 transitions and the fewest HTTP requests for our illustration.
+
+```html
+<!-- Basic HTML Setup -->
+<div class="illo color-mixed">
+  <div class="illo color-primary"></div>
+  <div class="illo color-secondary"></div>
+</div>
+```
+
+### CSS: Simple Structure with Style
+
+We used absolute positioning to place each region in its correct location and adjusted the background-position property to align the background illustration within each region. This makes all the regions (each with the same background image), look like a single element.
+
+```css
+.illo {
+  background: url('../img/illo.png') no-repeat;
+  top:        0;
+  cursor:     pointer;
+}
+  .illo.color-primary, .illo.color-secondary {
+    position: absolute;
+    height:   100%;
+  }
+  .illo.color-primary {
+    width:                350px;
+    left:                 0;
+    background-position:  top left;
+  }
+  .illo.color-secondary {
+    width:                355px;
+    right:                0;
+    background-position:  top right;
+  }
+```
+
+GPU accelerated transitions were applied that listen for color change events. We increased the duration and [modified the easing](http://cubic-bezier.com/#.78,0,.53,1) on .color-mixed to create the impression that it took time for the colors to mix.
+
+```css
+/* Apply Transitions To Backgrounds */
+.color-primary, .color-secondary {
+  -webkit-transition: background .5s linear;
+  -moz-transition:    background .5s linear;
+  -ms-transition:     background .5s linear;
+  -o-transition:      background .5s linear;
+}
+
+.color-mixed {
+  position:           relative;
+  width:              750px;
+  height:             600px;
+  -webkit-transition: background 1.5s cubic-bezier(.78,0,.53,1);
+  -moz-transition:    background 1.5s cubic-bezier(.78,0,.53,1);
+  -ms-transition:     background 1.5s cubic-bezier(.78,0,.53,1);
+  -o-transition:      background 1.5s cubic-bezier(.78,0,.53,1);
+}
+```
+
+[Visit HTML5please for current browser support and recommended usage for CSS3 transitions.](http://html5please.us/#transition)
+
+### Javascript: Making it Work
+
+Assigning colors dynamically is simple. We search the DOM for any element with our color class and set the background-color based on the user's color selections. We apply our transition effect to any element in the DOM  by adding a class.
+This creates an architecture that is lightweight, flexible and scalable.
+
+```js
+function createPotion() {
+
+	var primaryColor = $('.picker.color-primary > li.selected').css('background-color');
+	var secondaryColor = $('.picker.color-secondary > li.selected').css('background-color');
+	console.log(primaryColor, secondaryColor);
+	$('.illo.color-primary').css('background-color', primaryColor);
+	$('.illo.color-secondary').css('background-color', secondaryColor);
+
+	var mixedColor = mixColors (
+			parseColor(primaryColor),
+			parseColor(secondaryColor)
+	);
+
+	$('.color-mixed').css('background-color', mixedColor);
+}
+```
+
+Once the primary and secondary colors are selected, we calculate their mixed color value and assign the resulting value to the appropriate DOM element.
+
+```js
+// take our rgb(x,x,x) value and return an array of numeric values
+function parseColor(value) {
+	return (
+			(value = value.match(/(\d+),\s*(\d+),\s*(\d+)/)))
+			? [value[1], value[2], value[3]]
+			: [0,0,0];
+}
+
+// blend two rgb arrays into a single value
+function mixColors(primary, secondary) {
+
+	var r = Math.round( (primary[0] * .5) + (secondary[0] * .5) );
+	var g = Math.round( (primary[1] * .5) + (secondary[1] * .5) );
+	var b = Math.round( (primary[2] * .5) + (secondary[2] * .5) );
+
+	return 'rgb('+r+', '+g+', '+b+')';
+}
+```
+
+### Illustrating for HTML/CSS Architecture: Giving Three Color Shifting Boxes Personality
+
+Our goal was to create a fun and realistic lighting effect that maintained its integrity when contrasting colors were placed in adjacent color regions.
+
+A 24-bit PNG allows the background-color of our HTML elements to show through the transparent areas of the image.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oZoiOeii4Ay77GXjEi1v.png", alt="Image Transparencies", width="750", height="600" %}
+</figure>
+
+The colored boxes create hard edges where different colors meet. This gets in the way of realistic lighting effects and was one of the bigger challenges when designing the illustration.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ksuKOxSPh5gEEtw3cnpZ.png", alt="Color Regions", width="750", height="600" %}
+</figure>
+
+The solution was to design the illustration so that it never allows the edges of color regions to show through the transparent areas.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6DzJhF0kdqf6rwn293fd.png", alt="Color Region Edges", width="750", height="400" %}
+</figure>
+
+Planning for the build was critical. A quick planning session between designer, developer, and illustrator helped the team understand how everything needed to be built so it would work together when assembled.
+
+Check out the Photoshop file as an example of how layer naming can communicate information about CSS construction.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/DdUuR77g7274uRabQsXT.png", alt="Color Region Edges", width="749", height="276" %}
+</figure>
+
+## Encore
+
+For users without Chrome, we set a goal to distill the essence of the application into a single static image. The grid node became the hero, the background tiles allude to the purpose of the application, and the perspective present in the reflection hints at the immersive 3D environment of the grid.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RdCrxXGnV72xd8iBYvfH.png", alt="Color Region Edges.", width="750", height="514" %}
+</figure>
+
+If you're interested in learning more about Technitone, stay tuned in to our [blog.](http://www.gskinner.com/blog)
+
+## The band
+
+Thanks for reading, maybe we'll be [jamming with you](http://www.technitone.com) soon!
diff --git a/src/site/content/en/blog/telegraph/index.md b/src/site/content/en/blog/telegraph/index.md
new file mode 100644
index 00000000000..983fd692998
--- /dev/null
+++ b/src/site/content/en/blog/telegraph/index.md
@@ -0,0 +1,291 @@
+---
+layout: post
+title: Improving Cumulative Layout Shift at Telegraph Media Group
+subhead: |
+    Within a couple of months the leading UK news website managed to improve their
+    75th percentile CLS by 250% from 0.25 to 0.1.
+description: |
+    How Telegraph, the leading UK news website managed to improve their
+    75th percentile CLS by 250% from 0.25 to 0.1 in a couple of months.
+authors:
+  - chrisboakes
+date: 2021-06-14
+updated: 2022-07-18
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/wqtXsd9ZcxILt6oaA7rk.jpeg
+thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yDxN8dVjj4JCYvsoWTVg.jpg
+alt: The telegraph logo
+tags:
+  - blog
+  - case-study
+  - web-vitals
+---
+
+{% Aside %} Chris is a principal software engineer at [The
+Telegraph](https://www.telegraph.co.uk/). {% endAside %}
+
+## The visual stability challenge
+
+Layout shifts can be very disruptive. At Telegraph Media Group (TMG) visual stability
+is particularly important because readers predominantly use our applications to
+consume the news. If the layout shifts while reading an article, the reader will
+likely lose their place. This can be a frustrating and distracting experience.
+
+From an engineering perspective, ensuring the pages don't shift and interrupt
+the reader can be challenging, especially when areas of your application are
+loaded asynchronously and added to the page dynamically.
+
+At TMG, we have multiple teams contributing code client-side:
+
++   **Core engineering.** Implementing third-party solutions to power areas such
+    as content recommendations and commenting.
++   **Marketing.** Running A/B tests to assess how our readers interact with new
+    features or changes.
++   **Advertising.** Managing advert requests and advert pre-bidding.
++   **Editorial.** Embedding code within articles such as tweets or videos, as
+    well as custom widgets (for example, Coronavirus case tracker).
+
+Ensuring each of these teams do not cause the layout of the page to jolt can be
+difficult. Using the [Cumulative Layout Shift](/cls/) metric to measure how
+often it's occurring for our readers, the teams got more insight into the real
+user experience and a clear goal to strive to. This resulted in our 75th
+percentile CLS improving from 0.25 to 0.1 and our passing bucket growing from
+57% to 72%.
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">250<sub>%</sub></p>
+    <p>75th percentile CLS improvement</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">15<sub>%</sub></p>
+    <p>More users with good CLS score</p>
+  </div>
+</div>
+
+
+## Where we started
+
+Using [CrUX dashboards](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) we were able
+to establish that our pages were shifting more than we'd like.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/JvZwGUWfJ0bxKBQmD11P.png", alt="CrUX Dashboard showing about 55-60% good, 15% needs improvement, and 25% of poor scores.", width="780", height="472" %}
+    <figcaption>Our Cumulative Layout Shift scores between June 2020 and February 2021.</figcaption>
+</figure>
+
+
+We ideally wanted at least 75% of our readers to have a "good" experience so we
+started identifying the causes of the layout instability.
+
+## How we measured the layout shifts
+
+We used a combination of [Chrome
+DevTools](https://developer.chrome.com/docs/devtools/) and
+[WebPageTest](https://www.webpagetest.org/) to help recognize what was causing
+the layout to shift. In DevTools, we used the [Experience
+section](https://developer.chrome.com/blog/new-in-devtools-84/#cls) of the
+[Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/)
+tab to highlight individual instances of shifting layout and how they
+contributed to the overall score.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/zfpYNnnpwtcG7YAmf7E5.jpg", alt="The front page of Telegraph with an ad in the header highlughted with a blue overlay.", width="800", height="465" %}
+    <figcaption>Identifying a layout shift caused by the advert loading client-side above the header using the Experience section of Chrome DevTools.</figcaption>
+</figure>
+
+[WebPageTest](https://www.webpagetest.org/) helpfully highlights where the
+layout shift occurs in the timeline view when "Highlight Layout Shifts" is
+selected.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qaa60OEaFLoKVzWtntVw.png", alt="WebPageTest filmstrip view of the Telegraph website with the layoutshift highlighted with a red overlay.", width="800", height="369" %}
+    <figcaption>WebPageTest highlighting where the layout shifted.</figcaption>
+</figure>
+
+After reviewing each shift across our most visited templates we came up with a
+list of ideas as to how we could improve.
+
+## Reducing layout shifts
+
+We focused on four areas where we could reduce layout shifts:
+- adverts
+- images
+- headers
+- embeds
+
+### Adverts
+
+The adverts load after the initial paint via JavaScript. Some of the containers
+they loaded in did not have any reserved height on them.
+
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/klpZyS7okn4DwfPbL5qZ.gif", alt="Animation of the Telegraph website. The list of stories gets pushed down when an ad loads above it.", width="387", height="438" %}
+    <figcaption>The "More stories" block below the advert is shifted down after the advert loads.</figcaption>
+</figure>
+
+
+Although we don't know the exact height, we're able to reserve space by using
+the most common advert size loaded in the slot.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/aA7rq5NGK1f1cA5FkT8n.gif", alt="Animation of the Telegraph website. A placeholder rectangle for the ad is placed above the list of stories. The ad loads in place of the placeholder without causing a layout shift.", width="387", height="438" %}
+    <figcaption>By reserving space for the advert, the "More stories" block below remains static before and after the advert loads.</figcaption>
+</figure>
+
+We had misjudged the average height of the advert in some cases. For tablet
+readers, the slot was collapsing.
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/by1xeAvvBKNjiZTVbQ1v.gif", alt="Animation of a tablet view of the Telegraph website. The placeholder slot is bigger than the ad so the content shifts up after ad loads.", width="600", height="313" %}
+<figcaption>The advert slot collapsing after it loaded for readers on tablet sized devices.</figcaption>
+</figure>
+
+We revisited the slot and adjusted the height to use the most common size.
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/arV5fG7O7CUUHb7mdt54.gif", alt="Animation of a tablet view of the Telegraph website. With the placeholder matching the ad size, there's no layoutshift when the ad loads.", width="600", height="205" %}
+<figcaption>Ensuring the space we reserved for the advert slot matched the most commonly served height of the advert.
+</figcaption>
+</figure>
+
+### Images
+
+A lot of the images across the website are lazy loaded and have their space
+reserved for them.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/IFeiuIif24EDbbpObx4n.gif", alt="Animation of article preview cards loading.", width="600", height="352" %}
+    <figcaption>Lazy loading images without disrupting the layout.</figcaption>
+</figure>
+
+However the inline images at the top of the articles did not have any space
+reserved on the container, nor did they have width and height attributes
+associated with the tags. This caused the layout to shift as they loaded in.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/G7PnNyKZhURv7mpYMx9Q.gif", alt="Animation of the article page loading. When the main image loads at the top of the page, the text moves down.", width="360", height="612" %}
+    <figcaption>A layout shift caused by the article's main image.</figcaption>
+</figure>
+
+
+Simply adding the width and height attributes to the images ensured the layout
+did not shift.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/LuYayFKwpXN889Fk3GLG.gif", alt="Animation of the article page loading with placeholder reserved for the main image. When the main image loads at the top of the page, there's no layout shift.", width="360", height="630" %}
+    <figcaption>The main article image loading without causing the layout to shift.</figcaption>
+</figure>
+
+### Header
+
+The header was below the content in the markup and was positioned at the top
+using CSS. The original idea was to prioritise the content loading before the
+navigation however this caused the page to momentarily shift.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/ym64zcKRzey40Ov0JYX5.png", alt="ALT_TEXT_HERE", width="800", height="333" %}
+    <figcaption>The header of the page loading inelegantly.</figcaption>
+</figure>
+
+Moving the header to the top of the markup allowed the page to render without
+this shift.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/drYhZauv1oWZyp7mpQz9.png", alt="ALT_TEXT_HERE", width="800", height="303" %}
+    <figcaption>The layout is no longer disrupted by the header of the page loading.</figcaption>
+</figure>
+
+### Embeds
+
+Some of the frequently used embeds have a defined aspect ratio. For example,
+YouTube videos. While the player is loading, we pull the thumbnail from YouTube
+and use it as a placeholder while the video loads.
+<figure>
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/BKPbdBJROUIUqoT8coFW.gif", alt="The video player slot loading a low resolution thumbnail while the video player loads.", width="360", height="612" %}
+    <figcaption>The video player slot loading a low resolution thumbnail while the video player loads.
+</figcaption>
+</figure>
+
+## Measuring the impact
+
+We were able to measure the impact at a feature level quite easily using the
+tooling mentioned towards the start of the article. However we wanted to measure
+CLS both at a template level and at a site level. Synthetically, we used
+[SpeedCurve](https://speedcurve.com/) to validate changes both in pre-production
+and production.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/kVRCtjeFVTbN7aOV4O0z.png", alt="SpeedCurve chart showing a steep drop in CLS score.", width="800", height="343" %}
+    <figcaption>Tracking CLS progress synthetically using SpeedCurve.</figcaption>
+</figure>
+
+We're able to then validate the results in our RUM data (provided by
+[mPulse](https://www.akamai.com/uk/en/products/performance/mpulse-real-user-monitoring.jsp))
+once the code reached production.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Bv8QeCPy9zQ4eru2qrhU.png", alt="mPulse chart showing a drop in CLS score.", width="800", height="550" %}
+    <figcaption>Validating site-wide CLS improvements with mPulse RUM data before and after making changes.</figcaption>
+</figure>
+
+Checking the RUM data provides us with a good level of confidence that the
+changes we're making are having a positive impact for our readers.
+
+The final numbers we looked at are for the RUM data Google collects. This is
+especially relevant now as they will soon [have an impact on page
+ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience#page-experience-ranking).
+For starters we used the [Chrome UX Report](/chrome-ux-report/), both in the
+monthly origin level data available through the [CrUX
+dashboard](https://g.co/chromeuxdash), as well as by [querying
+BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery/) to retrieve historic p75 data. This way
+we were easily able to see that for all of the traffic measured by CrUX, **our
+75th percentile CLS improved by 250% from 0.25 to 0.1 and our passing bucket
+grew from 57% to 72%**.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/vmmokEtVcn7FJzmOIJB8.png", alt="CrUX dashboard showing p75 CLS for telegraph.co.uk is 0.1.", width="800", height="449" %}
+    <figcaption>Results from the Crux Dashboard.</figcaption>
+</figure>
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/8d8UOEi5GPcIitsTcQMA.png", alt="BigQuery showing p75 values improving month to month, from 0.25 to 0.1.", width="488", height="517" %}
+    <figcaption>BigQuery run displaying the p75 values of 2021 to date.</figcaption>
+</figure>
+
+In addition, we were able to make use of the [Chrome UX Report
+API](https://developer.chrome.com/docs/crux/api/)
+and create some internal dashboards split into templates.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/aYW2QPaFucKThXxZfFAD.png", alt="Internal dashboard showing average good score of 76.2, needs improvement of 9.3, and poor score of 14.6.", width="800", height="402" %}
+    <figcaption>Internal dashboards making use of the Chrome UX Report API highlighting our average score and the worst performing pages using that template.</figcaption>
+</figure>
+
+## Avoiding CLS regressions
+
+An important aspect of making performance improvements is avoiding regressions.
+We've set up some basic [performance budgets](/performance-budgets-101/) for our
+key metrics and included CLS in those.
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/9ggBNUTAptmnmxVlXZGo.png", alt="", width="800", height="343" %}
+    <figcaption>A performance budget dashboard which shows synthetic checks measuring CLS on some of our high traffic templates. The budget is currently set at 0.025.</figcaption>
+</figure>
+
+If the test exceeds the budget it'll send a message to a Slack channel so we can
+investigate the cause. We've also set up weekly reports, so that even if the
+templates remain in budget we're aware of any changes that have had a negative
+impact.
+
+We're also planning to expand our budgets to use RUM data as well as synthetic
+data, using mPulse to set both [static
+alerts](https://learn.akamai.com/en-us/webhelp/mpulse/mpulse-help/GUID-CEE8FE75-2CD9-423A-BB3E-26EC9D8735A9.html)
+and potentially [anomaly
+detection](https://learn.akamai.com/en-us/webhelp/mpulse/mpulse-help/GUID-C6C446C4-E545-471F-A943-2CE6D885E60C.html)
+which would make us aware of any changes that are out of the ordinary.
+
+It's important for us to approach new features with CLS in mind. A lot of the
+changes I've mentioned are those we've had to fix after they've been released to
+our readers. Layout stability will be a consideration for the solution design of
+any new feature going forward so that we can avoid any unexpected layout shifts
+from the start.
+
+## Conclusion
+
+The improvements we've made so far were quite easy to implement and have had a
+significant impact. A lot of changes I've outlined in this article didn't take
+much time to deliver and they were applied to all of the most commonly used
+templates which means they've had a widespread positive impact for our readers.
+
+There are still areas of the site we need to improve. We're exploring ways we
+might be able to do more of our client-side logic server-side which will improve
+CLS even more. We will keep tracking and monitoring our metrics with an aim to
+constantly improve them and provide our readers with the best user experience
+possible.
diff --git a/src/site/content/en/blog/terminal-for-js-devs/index.md b/src/site/content/en/blog/terminal-for-js-devs/index.md
new file mode 100644
index 00000000000..f56e1c5d5cb
--- /dev/null
+++ b/src/site/content/en/blog/terminal-for-js-devs/index.md
@@ -0,0 +1,23 @@
+---
+layout: post
+title: The Front-End Developer's Guide to the Terminal
+subhead: This resource can help you quickly find your way around the terminal.
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/qsVn1RRbBlbQUprp1chE.jpg
+alt: An airport terminal sign.
+authors:
+  - rachelandrew
+description: This resource can help you quickly find your way around the terminal.
+date: 2022-05-20
+tags:
+  - blog
+---
+
+If you are used to working in a GUI, then the terminal can seem a complicated and unforgiving place. By learning a few commands however, you can achieve most tasks quickly and easily.
+
+Josh Comeau has written an excellent guide for front-end developers who are new to the terminal. Providing the information that many tutorials seem to assume you already know, in easy to follow steps.
+
+> "It's the missing manual of terminal fundamentals needed to work with modern JS frameworks like React, so you can move onto the fun stuff: building user interfaces!"
+
+Check it out at [The Front-End Developer's Guide to the Terminal](https://www.joshwcomeau.com/javascript/terminal-for-js-devs/). 
+  
+_Photo by [Etienne Girardet](https://unsplash.com/@etiennegirardet)._
\ No newline at end of file
diff --git a/src/site/content/en/blog/terra-dark-mode/index.md b/src/site/content/en/blog/terra-dark-mode/index.md
new file mode 100644
index 00000000000..cb99ec00314
--- /dev/null
+++ b/src/site/content/en/blog/terra-dark-mode/index.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: How Terra improved user engagement thanks to Dark Mode
+subhead: |
+  By displaying a dark theme to users that prefer dark mode on their devices, Terra reduced the bounce rate by 60% and increased the pages read per session by 170%.
+description: |
+  In this article, we'll analyze Terra's journey from identifying the size of the "dark mode" cohort, to applying a custom dark theme, and finally measuring the impact of this implementation on their main KPIs.
+authors:
+  - demianrenzulli
+  - andreban
+  - mobtec
+date: 2021-12-18
+hero: image/26V1DWN36MZr3mUo8ChSBlCpzp43/0dvTpUWcW7A9b1vecUXT.png
+alt: Terra's logo next to a group of developers working on a device with a dark background.
+thumbnail: image/26V1DWN36MZr3mUo8ChSBlCpzp43/6o0rt0IM5XkqXsqyulwX.png
+tags:
+  - blog
+  - case-study
+  - css
+---
+
+Terra, one of Brazil's largest media companies with 75 million monthly users, reduced the bounce rate by 60% and increased the pages read per session by 170% on desktop for users that prefer dark mode by providing a custom dark theme.
+
+In this article, we'll analyze Terra's journey from identifying the size of the "dark mode" cohort, to applying a custom dark theme, and finally measuring the impact of this implementation on their main KPIs.
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">60<sub>%</sub></p>
+    <p>Reduction in Bounce Rates</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">170<sub>%</sub></p>
+    <p>More pages per session</p>
+  </div>
+</ul>
+
+## What is dark mode?
+
+Historically user interfaces in devices are displayed in "light mode", which usually means displaying black text on top of light interfaces. The alternative is "dark mode", with light text on a dark background, such as gray or black.
+
+Dark Mode has [benefits](/prefers-color-scheme/#why-dark-mode) for user experience. Some people prefer it for aesthetic or accessibility reasons. It has  other advantages, such as preserving battery life in devices. Users can express that they prefer dark mode via a setting in their devices, [which depends on the operating system](/prefers-color-scheme/#activating-dark-mode-in-the-operating-system). For example, the following screenshot shows what the **Dark Theme** configuration option looks like in devices that run **Android Q**:
+
+<figure>
+  {% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Android Q dark mode settings.", width="218", height="250", style="max-width: 218px; margin: 0 auto;" %}
+  <figcaption>Android&nbsp;Q dark theme settings.</figcaption>
+</figure>
+
+To offer a better experience to users who prefer "dark mode", you can use the [`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) media query, with a value of `light` or `dark`. This media query reflects the user's choice in their device. You can then load a [custom dark theme](/prefers-color-scheme/#dark-mode-in-practice) for those that prefer dark. For example, by loading a "dark" CSS file, and changing values such as font and background colors. The following code shows an example of that:
+
+```css
+@media (prefers-color-scheme: dark) {
+   // apply a dark theme
+}
+
+@media (prefers-color-scheme: light) {
+  // apply a light theme
+}
+```
+
+{% BrowserCompat 'css.at-rules.media.prefers-color-scheme' %}
+
+{% Aside %}
+This article will only cover the technique of applying a custom dark theme, provided by the developer. Chrome 96 has introduced an [origin trial](https://developer.chrome.com/blog/auto-dark-theme/#sign-up-for-the-origin-trial) for "Auto Dark Themes" on Android, for which the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the operating system, without requiring the developer to provide styles for it. For more information about "Chrome Auto Dark Mode", check out [this article](https://developer.chrome.com/blog/auto-dark-theme/).
+{% endAside %}
+
+## Identifying the "prefers light" vs "dark" user cohorts
+
+At the time of writing (December 2021), [Chrome Platform Status](https://chromestatus.com/features) determines that approximately [22% of the web traffic](https://chromestatus.com/metrics/feature/timeline/popularity/3581) comes from users with the "prefer dark" setting.
+
+This is aggregated data, so the real percentage of users who prefer dark that come to a site can vary. For that reason, to understand the size of this group it is advisable to run in house measurement.
+
+The following code creates an analytics dimension, to measure the performance of users that prefer `light` vs. `dark`:
+
+```javascript
+function getColorScheme() {
+    let colorScheme = 'Unknown';
+    if (window.matchMedia) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            colorScheme = 'Dark';
+        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+            colorScheme = 'Light';
+        }
+    }
+    return colorScheme;
+}
+
+window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
+ga.l=+new Date; ga('create', 'UA-ID', 'auto');
+ga('set', 'color-scheme-preference', getColorScheme());
+ga('send', 'pageview');
+```
+
+Terra implemented this code in their site and compared the behavior of both groups in mobile (Android) and desktop (Windows) devices. At that moment Terra wasn't providing a custom dark theme, so the goals of this experiment were:
+
+- Determining the size of the group of users who prefer dark.
+- Identifying patterns: for example, do users that prefer dark leave the site more quickly compared to those that prefer light?
+
+Knowing this can inform decisions, for example: if it's necessary to provide a custom dark theme.
+These are the results Terra obtained after testing for 14 days:
+
+### Mobile (Android)
+
+In the case of mobile (Android) the numbers for bounce rate and pages per session didn't show big differences between the users that prefer "light", compared to those that prefer "dark":
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Display Mode</th>
+        <th>Bounce Rate</th>
+        <th>Pages Per Session</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Prefers Light</td>
+        <td>25.84%</td>
+        <td>3.96</td>
+      </tr>
+      <tr>
+        <td>Prefers Dark</td>
+        <td>26.10%</td>
+        <td>3.75</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Desktop (Windows)
+
+In the case of desktop (Windows), the group of users that preferred "dark" stayed much less on the site: they had almost **twice the bounce rate and read a little more than half of the pages** than those users that preferred "light":
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Display Mode</th>
+        <th>Bounce Rate</th>
+        <th>Pages Per Session</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Prefers Light</td>
+        <td>13.20%</td>
+        <td>7.42</td>
+      </tr>
+      <tr>
+        <td>Prefers Dark</td>
+        <td>24.12%</td>
+        <td>4.68</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Based on this data, Terra hypothesized that users who prefer "dark" stay less in desktop devices, due to the lack of support of a dark theme in their site.
+
+As a next step Terra decided to work on a "dark theme" strategy to see if they could improve the engagement for the group of users that preferred dark.
+
+## Implementing a dark theme
+
+Most websites implement a dark theme by using the simple strategy shown previously of listening to user's configuration changes via the [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media query and changing styles based on that.
+
+Terra decided to give more control to the user: when they detect that they have the "prefer dark" setting turned on in their devices (via the media query), they show them a prompt to ask them if they want to navigate in "night mode". As long as the user doesn't deny the prompt (by clicking on the "Ignore" button), they honor the user's OS-setting, and apply a custom dark theme:
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/TRqfCAmBe025456JyX1b.png", alt="Screenshot of Terra's light theme prompting the user to accept dark mode.", width="266", height="146", style="max-width: 266px; margin: 0 auto;" %}
+  <figcaption>Terra shows a prompt to the user asking if they want to navigate in dark mode after detecting that they prefer dark in their devices.</figcaption>
+</figure>
+
+As a complement of this strategy they provide additional configuration options in the "settings" screen, where the user can decide if they explicitly prefer "light", "dark", or want to rely on the underlying device settings.
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/B7g0uvq2QB0eWVjnuMAl.png", alt="Screenshots of Terra's configuration screen to opt in and out of dark mode.", width="480", height="417", style="max-width: 480px; margin: 0 auto;" %}
+  <figcaption>Terra's themes configurations allow users to choose between "Dark" and "Light" themes or rely on the device's settings.</figcaption>
+</figure>
+
+This is how Terra's "Night Mode" looks like:
+
+<figure>
+  {% Img src="image/26V1DWN36MZr3mUo8ChSBlCpzp43/QRW06FYeMghUI8obAQWC.png", alt="Screenshot of Terra's dark theme.", width="286", height="468", style="max-width: 286px; margin: 0 auto;" %}
+  <figcaption>Terra's dark theme, "Night Mode".</figcaption>
+</figure>
+
+{% Aside %}
+We have used mobile screenshots for simplicity, but Terra has applied the same strategy across mobile and desktop devices.
+{% endAside %}
+
+## Measuring the impact of Terra's dark theme
+
+To measure the impact of the dark theme, Terra took the group of users that have the "Prefer Dark" setting turned on in their devices and compared engagement metrics when showing a "Light" vs. a "DarK" theme.
+Here are the results for mobile (Android) and desktop (Windows):
+
+### Mobile (Android)
+
+While bounce rates remained similar, pages and sessions almost doubled (from 2.47 to 5.24) when users were exposed to a dark theme:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Display Mode</th>
+        <th>Bounce Rate</th>
+        <th>Pages Per Session</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Prefers Light</td>
+        <td>26.91%</td>
+        <td>2.47</td>
+      </tr>
+      <tr>
+        <td>Prefers Dark</td>
+        <td>23.91%</td>
+        <td>5.24</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">2<sub>X</sub></p>
+    <p>More pages per session</p>
+  </div>
+</ul>
+
+### Desktop (Windows)
+
+Both metrics improved when showing a dark theme: bounce rates went from 27.25% to 10.82% and pages per session almost tripled (from 3.7 to 9.99).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Display Mode</th>
+        <th>Bounce Rate</th>
+        <th>Pages Per Session</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Prefers Light</td>
+        <td>27.5%</td>
+        <td>3.7</td>
+      </tr>
+      <tr>
+        <td>Prefers Dark</td>
+        <td>10.82%</td>
+        <td>9.99</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">60<sub>%</sub></p>
+    <p>Reduction in Bounce Rates</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">170<sub>%</sub></p>
+    <p>More pages per session</p>
+  </div>
+</ul>
+
+Based on this data, Terra could confirm the benefits for the users from implementing a dark theme, and has decided to continue maintaining it as a core feature of the site.
+
+## Conclusion
+
+Dark Mode is a preference that users can turn on in their devices  to change the style of the screens into dark themes. This technique has reported benefits from the user experience and for different aspects of the user's devices such as saving  battery life.
+
+In this article we saw how providing a custom dark theme improved engagement metrics for the group of Terra's users that have the preferred dark mode setting turned on in their devices.
+
+For companies with the resources to implement an alternative dark theme this is the recommended approach. For those that don't have the time to invest in such a feature, Chrome is starting to roll out an [Auto Dark Mode feature](https://developer.chrome.com/blog/auto-dark-theme/).
diff --git a/src/site/content/en/blog/terra-prefetching-case-study/index.md b/src/site/content/en/blog/terra-prefetching-case-study/index.md
new file mode 100644
index 00000000000..a401793290f
--- /dev/null
+++ b/src/site/content/en/blog/terra-prefetching-case-study/index.md
@@ -0,0 +1,154 @@
+---
+layout: post
+title: How prefetching helped Terra increase ads click-through rate by 30% and speed up Largest Contentful Paint.
+subhead: |
+  Prefetching resources speeds up page load times and improves business metrics.
+description: |
+  Prefetching is a technique used to speed up page loading by downloading resources—or even entire pages—which are likely to be needed in the near future. Research has shown that faster load times result in higher conversion rates and better user experiences.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/v2HlksdTOBRKk77JtixN.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/SSNjeq1z2euzy4ar5QfN.png
+alt: The Terra logo, set on a white backdrop.
+authors:
+  - guilhermems
+  - thiernothiam
+date: 2023-09-01
+tags:
+  - blog
+  - performance
+  - case-study
+---
+
+Prefetching is a technique used to speed up page loading by downloading resources—or even entire pages—which are likely to be needed in the near future. Research has shown that [faster load times result in higher conversion rates](https://wpostats.com/) and better user experiences.
+
+[Terra](https://www.terra.com/) is one of the largest content portals from Brazil, offering entertainment, news, and sports with more than 63 million unique visitors per month. We’ve collaborated with Terra’s engineering team to improve the loading time of articles by using prefetching techniques on certain sections of their website.
+
+This case study describes Terra’s journey implementation which resulted in a 11% ads click-through rate (CTR) increase on mobile, 30% ads CTR on desktop, and 50% reduction in the [Largest Contentful Paint (LCP)](/lcp/) times.
+
+## Prefetching strategy 
+
+Prefetching has been around for a while, but it is important to use it carefully as it consumes extra bandwidth for resources that are not immediately necessary. This technique should be applied thoughtfully to avoid unnecessary data usage. In the case of Terra, articles are prefetched if the following conditions are met:
+
+- **Visibility of links to prefetched articles:** Terra used the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) to detect viewability of the section containing the articles that they wanted to prefetch.
+- **Favorable conditions for increased data usage:** As mentioned previously, prefetching is a speculative performance improvement that consumes extra data, and that may not be a desirable outcome in every situation. To reduce the likelihood of wasting bandwidth, Terra uses the [Network Information API](https://wicg.github.io/netinfo/) along with the [Device Memory API](https://developer.chrome.com/blog/device-memory/) to determine whether to fetch the next article. Terra only fetches the next article when:
+  - The connection speed is at least 3G and the device has at least 4GB of memory,
+  - or if the device is running iOS.
+- **CPU idle:** Finally, Terra checks if the CPU is idle and able to perform extra work by using [`requestIdleCallback`](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback), which takes a callback to be processed when the main thread is idle, or by a specific (optional) deadline—whichever comes first.
+
+Adhering to these conditions ensures that Terra only fetches data when necessary, which saves bandwidth and battery life, and minimizes the impact of prefetches that end up going unused.
+
+When these conditions are met, Terra prefetches the articles present in the sections: "Related Content" and "Recommended for you" highlighted in blue below.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Z5yUqXEgRMMMUqXtYCw1.png", alt="A screenshot of the two sections on the Terra website in which links were prefetched. At left, the 'Related content' section is highlighted, whereas on the right, the 'Recommended for you' section is highlighted.", width="800", height="494" %}
+</figure>
+
+## Business Impact
+
+In order to measure the impact of this technique, Terra first launched this feature in the "Related content" section of the article page. A UTM code helped them to differentiate between prefetched and non-prefetched articles for comparison purposes. After two weeks of successful A/B testing, Terra decided to add the prefetching functionality to the "Recommended for you" section.
+
+As a result of prefetching articles, an overall increase of ads metrics and a reduction of LCP and [Time to First Byte (TTFB)](/ttfb/) times were observed:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Metric</th>
+        <th>Mobile</th>
+        <th>Desktop</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Ads CTR</td>
+        <td>+11%</td>
+        <td>+30%</td>
+      </tr>
+      <tr>
+        <td>Ads viewability</td>
+        <td>+10.5%</td>
+        <td>+6%</td>
+      </tr>
+      <tr>
+        <td>LCP</td>
+        <td>-51%</td>
+        <td>-73%</td>
+      </tr>
+      <tr>
+        <td>TTFB</td>
+        <td>-83%</td>
+        <td>-84%</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Prefetching—when used with care—greatly improves page load time, increases ads metrics, and reduces LCP time.
+
+## Technical details
+
+Prefetching can be achieved through the use of resource hints such as [`rel=prefetch`](https://developer.mozilla.org/docs/Glossary/Prefetch) or [`rel=preload`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload), via libraries such as [quicklink](https://github.com/GoogleChromeLabs/quicklink) or [Guess.js](https://github.com/guess-js), or using the newer Speculation Rules API. Terra has chosen to implement this by using the [fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) with a [low priority](https://developer.mozilla.org/docs/Web/API/fetch#:~:text=priority) in combination with an Intersection Observer instance. Terra made this choice as it allows them to support Safari, which doesn't yet support other prefetching methods like `rel=prefetch` or the Speculation Rules API, and a full-featured JavaScript library wasn't necessary for Terra's needs.
+
+
+The below JavaScript is approximately equivalent to the code used by Terra:
+
+```js
+function prefetch(nodeLists) {
+  // Exclude slow ECTs < 3g
+  if (navigator.connection &&
+    (navigator.connection.effectiveType === 'slow-2g'
+      || navigator.connection.effectiveType === '2g')
+  ) {
+    return;
+  }
+
+  // Exclude low end device which is device with memory <= 2GB
+  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
+    return;
+  }
+
+  const fetchLinkList = {};
+
+  const observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        if (!fetchLinkList[entry.target.href]) {
+          fetchLinkList[entry.target.href] = true;
+
+          fetch(entry.target, {
+            priority: 'low'
+          });
+        }
+
+        observer.unobserve(entry = entry.target);
+      }
+    });
+  });
+}
+
+const idleCallback = window.requestIdleCallback || function (cb) {
+  let start = Date.now();
+
+  return setTimeout(function () {
+    cb({
+      didTimeout: false,
+      timeRemaining: function () {
+        return Math.max(0, 50 - (Date.now() - start));
+      }
+    });
+  }, 1);
+}
+
+idleCallback(function () {
+  prefetch(nodeLists)
+})
+```
+
+- The `prefetch` function first checks for a minimum connection quality and device memory before initiating prefetching.
+- Then it uses an `IntersectionObserver` to monitor when elements become visible in the viewport, and subsequently adds URLs to a list for prefetching.
+- The prefetch process is scheduled with `requestIdleCallback`, aiming to execute the `prefetch` function when the main thread is idle.
+
+## Conclusion
+
+When used with care, prefetching can significantly reduce load times for future navigation requests, thereby reducing friction in the user journey and increasing engagement. Prefetching results in loading of extra bytes that may not be used, so Terra took extra steps to only prefetch under good network conditions and on capable devices, where this information is available.
+
+_Special thanks to Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, and Leonardo Bellini and Lucca Paradeda from Terra's Engineering team for their contribution to this work._
diff --git a/src/site/content/en/blog/test-post/a.jpg b/src/site/content/en/blog/test-post/a.jpg
deleted file mode 100644
index 6414c7029e6..00000000000
Binary files a/src/site/content/en/blog/test-post/a.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/hero.jpg b/src/site/content/en/blog/test-post/hero.jpg
deleted file mode 100644
index cd3b60fe3a3..00000000000
Binary files a/src/site/content/en/blog/test-post/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/image-inline.png b/src/site/content/en/blog/test-post/image-inline.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/blog/test-post/image-inline.png and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/image-screenshot.png b/src/site/content/en/blog/test-post/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/blog/test-post/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/image-small.png b/src/site/content/en/blog/test-post/image-small.png
deleted file mode 100644
index 69bedd75087..00000000000
Binary files a/src/site/content/en/blog/test-post/image-small.png and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/img1.png b/src/site/content/en/blog/test-post/img1.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/blog/test-post/img1.png and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/img2.png b/src/site/content/en/blog/test-post/img2.png
deleted file mode 100644
index 36beb235c56..00000000000
Binary files a/src/site/content/en/blog/test-post/img2.png and /dev/null differ
diff --git a/src/site/content/en/blog/test-post/index.md b/src/site/content/en/blog/test-post/index.md
deleted file mode 100644
index 6c6ad293a3c..00000000000
--- a/src/site/content/en/blog/test-post/index.md
+++ /dev/null
@@ -1,511 +0,0 @@
----
-title: An example blog post used for screenshot testing.
-subhead: |
-  A catchy subhead that previews the content and is a bit wordy to test what
-  happens when a subhead wraps.
-description: |
-  A description of the article that will appear in search results.
-draft: true
-
-# A list of authors. Supports more than one.
-authors:
-  - robdodson
-
-date: 2019-10-31
-# Add an updated date to your post if you edit in the future.
-updated: 2020-11-01
-
-# !!! IMPORTANT: If your post does not contain a hero image it will not appear
-# on the homepage.
-hero: hero.jpg
-# You can adjust the fit of your hero image with this property.
-# Values: contain | cover (default)
-# hero_fit: contain
-
-# You can adjust the position of your hero image with this property.
-# Values: top | bottom | center (default)
-# hero_position: bottom
-
-# You can provide an optional cropping of your hero image to be used as a
-# thumbnail. Note the alt text will be the same for both the thumbnail and
-# the hero.
-# thumbnail: thumbnail.jpg
-
-alt: A description of the hero image for screen reader users.
-
-# You can provide a custom thumbnail and description for social media cards.
-# Images should be 1200 x 630.
-# If no social thumbnail is provided then the post will attempt to fallback to
-# the post's thumbnail or hero from above. It will also reuse the alt.
-# social:
-#   google:
-#     title: A title for Google search card.
-#     description: A description for Google search card.
-#     thumbnail: google_thumbnail.jpg
-#     alt: Provide an alt for your thumbnail.
-#   facebook:
-#     title: A title for Facebook card.
-#     description: A description for Facebook card.
-#     thumbnail: facebook_thumbnail.jpg
-#     alt: Provide an alt for your thumbnail.
-#   twitter:
-#     title: A title for Twitter card.
-#     description: A description for Twitter card.
-#     thumbnail: twitter_thumbnail.jpg
-#     alt: Provide an alt for your thumbnail.
-
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - accessibility
-  - ux
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam
-scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
-sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
-tempus enim.
-
-{% Aside 'codelab' %}
-  [Using Imagemin with Grunt](#)
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam
-scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
-sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
-tempus enim.
-
-<figure class="w-figure w-figure--fullbleed">
-  <img src="a.jpg" alt="">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    Large image.
-  </figcaption>
-</figure>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<figure class="w-figure">
-  <img src="image-small.png" alt="" width="400">
-  <figcaption class="w-figcaption">
-    Small image.
-  </figcaption>
-</figure>
-
-{% Aside %}
-  Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Proin dictum a
-  massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
-  varius at. `Cras ligula lacus`, porta vitae maximus a, ultrices a mauris.
-  [`Vestibulum porta`](#) dolor erat, vel molestie dolor posuere in. Nam vel
-  elementum augue.
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-## Image, Inline
-
-<figure class="w-figure w-figure--inline-right">
-  <img class="w-screenshot" src="image-inline.png" alt="" width="200">
-  <figcaption class="w-figcaption">
-    Inline right, outlined image.
-  </figcaption>
-</figure>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
-a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
-varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum
-augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
-aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
-velit. Morbi at quam sem.
-
-<figure class="w-figure w-figure--inline-left">
-  <img class="w-screenshot" src="image-inline.png" alt="" width="200">
-  <figcaption class="w-figcaption">
-    Inline left, outlined image.
-  </figcaption>
-</figure>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
-a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
-varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum
-augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
-aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
-velit. Morbi at quam sem.
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-  <figcaption class="w-figcaption">
-    Filled screenshot.
-  </figcaption>
-</figure>
-
-{% Aside 'caution' %}
-  [This type of callout](#) suggests proceeding with caution.
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Image Format</th>
-        <th>Lossy Plugin(s)</th>
-        <th>Lossless Plugin(s)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>JPEG</td>
-        <td><a href="#">imagemin-mozjpeg</a></td>
-        <td><a href="#">imagemin-jpegtran</a></td>
-      </tr>
-      <tr>
-        <td>PNG</td>
-        <td><a href="#">imagemin-pngquant</a></td>
-        <td><a href="#">imagemin-optipng</a></td>
-      </tr>
-      <tr>
-        <td>GIF</td>
-        <td><a href="#">imagemin-giflossy</a></td>
-        <td><a href="#">imagemin-gifsicle</a></td>
-      </tr>
-      <tr>
-        <td>SVG</td>
-        <td><a href="#">Imagemin-svgo</a></td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>WebP</td>
-        <td><a href="#">imagemin-webp</a></td>
-        <td></td>
-      </tr>
-    </tbody>
-    <caption>Table 1 — Imagemin plugins for filetypes.</caption>
-  </table>
-</div>
-
-{% Aside 'warning' %}
-  This type of callout is stronger than a Caution; it means "Don't do this."
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-## Ordered list
-
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<ol>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  </li>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-    <figcaption class="w-figcaption">
-      Filled screenshot.
-    </figcaption>
-  </figure>
-  </li>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  </li>
-</ol>
-
-{% Aside 'success' %}
-  This type of callout describes a successful action or an error-free status.
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-## Unordered list
-
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<ul>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  </li>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  <figure class="w-figure">
-    <img class="w-screenshot w-screenshot--filled" src="image-screenshot.png" alt="">
-    <figcaption class="w-figcaption">
-      Filled screenshot.
-    </figcaption>
-  </figure>
-  </li>
-  <li>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-  </li>
-</ul>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-```js
-const imagemin = require("imagemin");
-const imageminMozjpeg = require("imagemin-mozjpeg");
-
-(async () => {
-  const files = await imagemin(
-    ["source_dir/*.jpg", "another_dir/*.jpg"],
-    "destination_dir",
-    { plugins: [imageminMozjpeg({ quality: 50 })] }
-  );
-  console.log(files);
-})();
-```
-
-{% Aside 'objective' %}
-  This type of callout defines the goal of a procedure.
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-```js/1
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-
-{% Aside 'gotchas' %}
-  The value of the `type` attribute should be the MIME type corresponding to the
-  image format. An image's MIME type and its file extension are often similar,
-  but they aren't necessarily the same thing (e.g. `.jpg` vs. `image/jpeg`).
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-```js//1
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-```js/6/5
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg'],
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<blockquote>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
-    a massa sit amet ullamcorper.
-  </p>
-  <cite>
-    by Jon Doe
-  </cite>
-</blockquote>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-{% if site.percy %}
-<div style="background: aquamarine; width: 400px; height: 400px;">
-  Glitch iframe placeholder
-</div>
-{% else %}
-{% Glitch {
-  id: 'tabindex-zero',
-  path: 'index.html'
-} %}
-{% endif %}
-
-{% Aside 'key-term' %}
-  This type of callout defines important terminology.
-{% endAside %}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
-
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
-  </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
-  </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">4<sub class="w-stat__sub">x</sub></p>
-    <p class="w-stat__desc">Faster load times</p>
-  </div>
-</div>
-
-<div class="w-text--center">
-  <a href="https://example.com/some.pdf" class="w-button w-button--with-icon" data-icon="file_download">
-    Download case study 
-  </a>
-</div>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
-quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
-ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
-quam sem.
\ No newline at end of file
diff --git a/src/site/content/en/blog/testing-web-design-color-contrast/index.md b/src/site/content/en/blog/testing-web-design-color-contrast/index.md
new file mode 100644
index 00000000000..fa694ba05c3
--- /dev/null
+++ b/src/site/content/en/blog/testing-web-design-color-contrast/index.md
@@ -0,0 +1,433 @@
+---
+layout: post
+title: Testing Web Design Color Contrast
+subhead: |
+  An overview of three tools and techniques for testing and verifying accessible color contrast of your design.
+description: |
+  An overview of three tools and techniques for testing and verifying accessible color contrast of your design.
+authors:
+  - adamargyle
+  - superhighfives
+date: 2022-09-22
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/q6qpUvm2TwTyRWKbYCQd.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/93UiiPbes6SjeGjB8w1N.png
+alt: Text becoming progressively lower contrast.
+tags:
+  - blog
+  - accessibility
+  - ux
+---
+
+Say you have some text on a light background, like this:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/VVHanPxNDUxheyZRy3wj.png",
+alt="The phrase 'The quick brown fox jumps over the lazy dog again' is shown, where each word or couple of words are a lighter blue. Above each section of progressively faded words is their contrast ratio score. The last few words are very difficult to read because of low contrast.", width="800", height="240" %}
+
+While all of the examples may be readable to you, this isn't the case for
+everyone.
+
+Accessible color contrast is a practice that ensures text is readable for
+everyone. Sometimes testing contrast is easy and sometimes it's really hard. By
+the end of this post you'll have three new tools and techniques for inspecting,
+correcting, and verifying your web design contrast so you can tackle the hardest
+scenarios.
+
+## WCAG and color contrast
+
+[W3C’s Web Accessibility Initiative](https://www.w3.org/WAI/) provides
+strategies, standards, and resources to ensure that the internet is accessible
+for as many people as possible. The guidelines that underpin these standards are
+called the Web Content Accessibility Guidelines, or WCAG. The latest stable
+version, [WCAG 2.1](https://www.w3.org/TR/WCAG21/), covers an important
+accessibility requirement: [minimum
+contrast](https://www.w3.org/WAI/standards-guidelines/act/rules/afw4f7/proposed/).
+
+The relationship between two colors in WCAG 2.1 is described by their contrast
+ratio—that is, the number you get when you compare the luminance of two colors.
+Luminance is a way of describing how close a color is to black (0%) or white
+(100%). WCAG defines some rules and calculation algorithms around what that
+contrast ratio needs to be in order for the web to be accessible. There are
+[known issues](https://www.cedc.tools/article.html) with this calculation,
+though. Eventually an even more reliable way will be adopted, but, currently,
+WCAG is the best we have.
+
+### What are the rules?
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+        <th>AA</th>
+        <th>AAA</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Body text (< 24px)</td>
+        <td>4.5</td>
+        <td>7</td>
+      </tr>
+      <tr>
+        <td>Large text (> 24px)</td>
+        <td>3</td>
+        <td>4.5</td>
+      </tr>
+      <tr>
+        <td>UI (icons, graphs, etc.)</td>
+        <td>3</td>
+        <td>not defined</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+A higher contrast ratio is scored with a higher number, like 4.5 or 7 instead of
+3. To get more familiar with the scoring table, check out [Polypane's Contrast
+Checker](https://polypane.app/color-contrast/).
+
+
+
+<figure>
+  {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WKZJY7co0BADkMfwuqxO.png", alt="Text is shown over purple: one pairing is black text over purple and the other is white text over purple.", width="800", height="438" %}
+  <figcaption>
+    Which of these color pairings do you feel contrast more?
+  </figcaption>
+</figure>
+
+## Testing contrast between colors
+
+So, now that we know what we’re looking for, how do we test this? Here are three
+free tools to assist you in inspecting, correcting and measuring your web site's
+contrast. The strengths and weaknesses of each will be outlined so you can
+confidently test the accessibility of your site’s colors and content in a
+multitude of ways.
+
+1. [Pika](https://superhighfives.com/pika)<br>
+A MacOS app, uniquely capable of showing the contrast of any colors
+on the entire screen, colors on gradients, colors with transparency, and more.
+Intent is explicit, users manually choose the pixels to compare. A tiny bit less
+automated with a huge feature gain.
+1. [VisBug](https://visbug.web.app)<br>
+A cross browser extension, uniquely able to show more than one contrast overlay
+at a time, but like DevTools, sometimes isn't able to detect intent.
+1. [Chrome DevTools](https://developer.chrome.com/docs/devtools/)<br>
+DevTools is built into Chrome and is packed with various ways to inspect,
+correct, and debug color issues, but has shortcomings when inspecting gradients
+and semi-transparent colors, and sometimes isn't able to detect intent.
+
+### Pika (macOS application)
+
+If DevTools or VisBug can't assess the contrast properly, like when you need to
+test a color outside the browser, or when transparency or gradients are
+involved, then **Pika is here to save the day**. Pika has access to every pixel
+on the screen because it's a system tool and not a web tool.
+
+<a href="https://superhighfives.com/pika" class="button"
+data-type="primary">Download Pika</a>
+
+{% Aside %}
+Pika is macOS only—for PC,
+[PowerToys](https://docs.microsoft.com/en-us/windows/powertoys/)
+includes a color picker
+{% endAside %}
+
+This also means the UX for using Pika is different to DevTools or VisBug.
+DevTools and VisBug do their best to show the text and background colors from
+the browser DOM, while the colors Pika compares are chosen manually from any
+point on screen. This gives Pika more control, and opens up some additional use
+cases:
+
+- Comparing any two colors regardless of whether or not they’re in the
+  browser—if you can see it on your screen, you can test it.
+- Comparing colors with transparency.
+- Comparing colors within gradients.
+- Comparing colors that are using blend modes, like mix-blend-mode in CSS.
+
+#### Comparing any two colors
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/X14wQzs23ozvMQs0FiET.mov",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+Compare text to a background color:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qJutaWyNQZvDBcQxZHUT.png",
+alt="Two grays are compared in a side by side, they have a contrast ratio of 13.01 and is passing AA and AAA targets.", width="800", height="553" %}
+
+Compare stroke and fill colors of vector graphics:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/awGWrJlqYytjJe0aUcDZ.png",
+alt="Two purples are compared from a duo-toned icon, they have a contrast ratio of 1.63 and are not passing any WCAG targets.", width="800", height="691" %}
+
+#### Comparing colors with transparency
+
+Compare text color to a variety of background sample pixels. Here, the lightest
+gray from the [frosted glass effect](https://codepen.io/argyleink/pen/qBmJyvv)
+is used as the background comparison color.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/D7IiPPGcppmBrDlDZ9zM.png",
+alt="Two colors that look like gray but are actually very desaturated purples are compared from an image with a blurry semi-transparent caption, they have a contrast ratio of 4.65 and are passing the AA target.", width="800", height="339" %}
+
+#### Comparing colors with gradients
+
+Compare text on a gradient or on an image. Here the L from "Lasso" is
+compared against the light blue of the image:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/pvFbvPiUoSKVFkay28Cs.png",
+alt="A screenshot from a TV show has the show title overtop, the L is white and the blue behind it are compared. They have a contrast ratio of 8 and are passing the AA and AAA targets.", width="800", height="476" %}
+
+### VisBug
+
+VisBug is a [FireBug](https://getfirebug.com/) inspired tool for designers and
+developers to visually inspect, debug, and play with their website design. It's
+meant to have a lower barrier to entry than the Chrome DevTools by emulating the
+UI and UX of the design tools that folks have come to know and love to use.
+
+[Try VisBug](https://visbug.web.app/) or install on
+[Chrome](https://chrome.google.com/webstore/detail/cdockenadnadldjbbgcallicgledbeoc),
+[Firefox](https://addons.mozilla.org/en-US/firefox/addon/visbug/),
+[Edge](https://microsoftedge.microsoft.com/addons/detail/visbug/kdmdoinnkaeognnpegpkepdnggeaodkn),
+[Brave](https://brave.com/learn/installing-chrome-extensions/) or
+[Safari](https://apps.apple.com/app/id1538509686).
+
+One of its tool offerings is the Accessibility Inspect tool.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eBATv3Jt8iONLM5YrOSQ.png",
+alt="Screenshot of the VisBug toolbar on the left side of a blank page, the accessibility tool icon is pink and a popover is shown that provides instruction of the tool.", width="800", height="469" %}
+
+#### Inspect across browsers (and even on mobile)
+
+Once the Accessibility Inspect tool has been clicked, anything the user points to, or keyboard navigates to, will have its accessibility information reported in the tooltip. This tooltip includes color comparisons between discovered foreground and background colors.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/47Csfarpjv0NdZFsgXgv.png",
+alt="A component with a title and an icon are shown with a pink bounding box around it, a VisBug accessibility tooltip points to the pink box with a color comparison report of the text color and it's background. The ratio is 13.86 and is passing both AA and AAA targets.", width="800", height="833" %}
+
+{% Aside %}
+VisBug's color contrast UI is heavily inspired by the fantastic design of
+[Pika](https://docs.google.com/document/d/1BSWE83huQ2tjoUl8Y0OlUmc3xKmBabVbVR_jmvhpbV8/edit#heading=h.twmsyyxfn58k).
+{% endAside %}
+
+#### Inspect one or many
+
+DevTools can either look at a single color pairing or get a report of all of
+your color pairings in the page, but VisBug offers a nice middle ground by
+allowing multiple color pairings. Click an element and the tooltip will stay
+put. Hold Shift and continue clicking other elements and all of the tooltips
+will stay put:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/axWMocJEUs0CCfVTXwVL.png",
+alt="A list of links on a webpage are shown with multiple VisBug accessibility overlays, each contextually pointing to and reporting the discovered text and background color contrasts.", width="800", height="583" %}
+
+This is especially important for component based design, where multiple parts of
+a component need to pass contrast ratio scores. This method allows seeing all of
+those component parts at once. Also great for design reviews.
+
+### Chrome DevTools
+
+If you have [Chrome](https://www.google.com/intl/en_us/chrome/) installed then
+you're already equipped with many contrast testing tools:
+
+- [The color picker](#the-chrome-devtools-color-picker)
+- [Inspection tooltip](#inspection-tooltip)
+- [CSS Overview](#css-overview)
+- [Lighthouse](#lighthouse)
+- [The JS console](#the-js-console)
+- [Colorblind emulation tools](#colorblind-emulation)
+- [System color contrast preference
+  emulation](#color-contrast-system-preference-emulation)
+- [WCAG 3.0 APCA experiment](#try-wcag-30-apca)
+
+#### The Chrome DevTools color picker
+
+In the Chrome DevTools Styles pane of the Elements panel, color values will have
+a little visual square color swatch next to them. When this swatch is clicked
+you'll see the color picker tool. If possible, the middle of the tool will show
+the contrast of the color against a foreground or background.
+
+In the following example, the color picker is opened for a custom property color
+value. The contrast ratio score is reported as 15.79 and has two green check
+marks, indicating the score passes AA and AAA WCAG 2.1 requirements:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/RialptHZZEuHttshMLdy.png", alt="Screenshot of DevTools Elements panel, in the styles the color picker is shown and in the middle is reporting the contrast ratio of the color of 4.98.", width="800", height="602" %}
+
+##### Color Picker autocorrection
+
+Seeing the score while picking colors is handy, but Chrome DevTools has an
+additional feature for autocorrection. When the color picker reports a failed
+accessible color contrast score it can be expanded to reveal the AA and AAA
+score targets, plus an [eye
+dropper](https://developer.chrome.com/blog/new-in-chrome-95/#eyedropper) tool.
+Next to AA and AAA are swatches and a refresh icon that when clicked will find
+the nearest passing color for you:
+
+<style>
+  .auto-aspect {
+    aspect-ratio: auto;
+  }
+</style>
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fa74vzYyHK5vbk6lH2ok.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true",
+  class="auto-aspect"
+%}
+
+If you're not picky about colors, the auto correction feature is a great way to
+meet accessibility guidelines and not work too hard to get the task done.
+
+#### Inspection tooltip
+
+The element selection tool has a special feature during page hover that reports
+general font, color, and accessibility information. The element selection tool
+is the icon on the left in the following screenshot. It’s the box with an arrow
+cursor over the bottom right corner. It can also be selected using the hotkey
+`Control+Shift+C` (or `Command+Shift+C` on MacOS).
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/ZhRJEcge2Dowm36zBU35.png",
+alt="Screenshot of the box and arrow icon in DevTools that invokes the element select tool.", width="446", height="172" %}
+
+Once activated, the icon will turn blue, and pointing to anything in the page
+will show the following quick inspect tooltip:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jnpoQugZCrUJTvUG6RC1.png",
+alt="A screenshot of an overlay very similar to VisBug, it shows some style information and an accessibility section that shows a contrast score of 15.79 that passes the AA target.", width="708", height="550" %}
+
+Instead of the color picker tool, which requires you to find the color swatch in
+the Styles pane, this tool lets you simply point around the page to see contrast
+scores. Like the color picker, it can only show one contrast score at a time.
+
+{% Aside %}
+This tool and interaction pattern was inspired from VisBug's user experience.
+{% endAside %}
+
+#### Bump bump 'til you pass 🎶
+
+I often inspect a color pairing with this quick inspect tool and find it just
+short of passing the required ratio. Instead of using the autocorrection feature
+of the color picker (because I'm picky) I nudge color channels in the CSS and
+watch until I pass the ratio I need. I call this process "[bump bump til you
+pass](https://twitter.com/argyleink/status/1402694231118946304?s=20&t=kW9Q6J03nbjyAW27Sxn7hw)"
+because I'm bumping color channel numbers until they pass WCAG 2.1.
+
+The steps are as follows, and must be done in the exact order:
+
+1. Set keyboard focus inside a color in the Styles panel.
+1. Activate the inspect element tool with the keyboard shortcut
+   `Control+Shift+C` (or `Command+Shift+C` on MacOS).
+1. Point over a target.
+1. Press up/down on the keyboard to change the numbers in the color value.
+
+{% Video
+  src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/n7aKGgeh4nGFymLK9ypL.mp4",
+  autoplay="true",
+  loop="true",
+  muted="true"
+%}
+
+This works because the CSS style value still has your keyboard focus, while the
+mouse is allowing you to point over a target. Make sure not to click your target
+or focus will move from the color value area and not let you nudge values
+anymore until refocused.
+
+#### CSS overview
+
+Up to this point, Chrome DevTools has provided ways to look at one color pairing
+at a time, but the [CSS
+Overview](https://developer.chrome.com/docs/devtools/css-overview/) can crawl
+your entire page and present all the inaccessible pairings at once:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/wGFo3rxvWyACrT6ZVxtm.png",
+alt="Screenshot of the Overview Summary from running the CSS Overview capture tool. It shows 7 contrast issues, showing the discovered color pairings and their failing results.", width="800", height="283" %}
+
+Read more about this feature in this post [CSS Overview: Identify potential CSS
+improvements](https://developer.chrome.com/docs/devtools/css-overview/) or watch
+Jecelyn Yeen on YouTube in their series DevTools Tips teach you how to [Identify
+potential CSS improvements with the CSS Overview
+panel](https://www.youtube.com/watch?v=OAP_Sr0zb5I).
+
+#### Lighthouse
+
+Lighthouse is another auditing tool in Chrome DevTools. It can crawl your page
+and report inaccessible color pairings. It features tiny screenshots of each
+color pairing for you to review, passing and failing. Any failing combinations
+will negatively impact your Lighthouse score.
+
+Here's what those results can look like:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/uo97bt52l87Tbk6C6NZC.png",
+alt="A screenshot of a Lighthouse evaluation, showing results of low-contrast text of the color combinations of 2 words.", width="800", height="567" %}
+
+#### The JS console
+
+Maybe all the tools listed so far just aren’t where you are. Maybe where you are
+(all day) is JavaScript. [Here's an experiment to
+try](https://developer.chrome.com/blog/new-in-devtools-90/?utm_source=devtools#low-contrast).
+The Issues pane of the console can constantly report any color contrast
+accessibility issues as you build. Enable the feature in Settings > Experiments,
+as shown in the following:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/pz17vgSpdFuU0NYGZJhc.png", alt="Screenshot of an enabled checkbox: 'Enable automatic contrast issue reporting via the Issues panel.'", width="800", height="47" %}
+
+Then open the Issue pane and see if it's made any discoveries. If it does, they
+can look like this:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qtXnfLI296d57IWhdPP5.png",
+alt="Screenshot of the Issues panel inside the Console, it reports 6 errors around contrast.", width="800", height="521" %}
+
+#### Colorblind emulation
+
+While on the topic of color contrast and ensuring accessible color pairings,
+it's worth pointing out the vision deficiencies emulation tool. This will change
+the colors or appearance of your design to demonstrate the results of different
+varieties of color blindness, giving you the opportunity to modify your design
+so that color isn't the only way the UX is communicating to a user.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/R9FpuGeUS9GlYfToWvfK.png",
+alt="Screenshot of the options in the emulation DevTools for emulating vision deficiencies: no emulation, blurred vision, protanopia, deuteranopia, tritanopia, achromatopsia.", width="800", height="558" %}
+
+It's not a safe accessibility practice to exclusively use color to depict
+information, like red for bad and green for good. Some folks don't see greens or
+reds the same and this emulation tool will help you experience and remember
+that.
+
+#### Color contrast system preference emulation
+
+More and more, users are changing their contrast settings in their operating
+system, giving them the ability to ask for less or more contrast personalization
+in their UI. CSS can tap into this setting, just as it can with light or dark
+theme preferences. Chrome DevTools offers the ability to emulate this preference
+so designs can test and adapt to the user request without toggling the setting
+from the system.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zSpeqvfJk9V2XrFZWNsb.png",
+alt="Screenshot of the options in the emulation DevTools for emulating the CSS media query prefers-contrast: no emulation, more, less, custom.", width="800", height="315" %}
+
+#### Try WCAG 3.0 APCA
+
+Another experiment to try is testing your color pairings with the experimental
+APCA color ratio scoring system. Enabled through Settings > Experiments, it
+replaces the WCAG 2.1 ratio system with a newer and improved contrast checker
+algorithm, letting you preview its results as the proposal works towards a
+standard.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/k3P5tDwEueZFFGqQH40m.png",
+alt="Screenshot of an enabled checkbox: 'Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines.'", width="800", height="131" %}
+
+Once enabled, use the point inspect tooltip or the color picker to see the color
+pairing score and see if it passes:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/s2qRDE5RRswXWwwKewRI.png",
+alt="Devtools inspect element tooltip is showing -100.2% for the contrast score on a dd element.", width="800", height="365" %}
+
+## Conclusion
+
+Color contrast is an important piece of the puzzle for accessibility on the web,
+and adhering to it makes the web more usable for the greatest number of people
+in the most varied situations. Hopefully these three tools help you feel
+empowered to make great color choices.
diff --git a/src/site/content/en/blog/text-alternatives-for-images/index.md b/src/site/content/en/blog/text-alternatives-for-images/index.md
new file mode 100644
index 00000000000..4372b54aaa4
--- /dev/null
+++ b/src/site/content/en/blog/text-alternatives-for-images/index.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: Text Alternatives for Images
+subhead: Using the alt attribute to provide text alternatives for images
+description: Using the alt attribute to provide text alternatives for images
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2018-09-20
+#tags:
+
+---
+
+Images are an important component of most web pages, and are of course a
+particular sticking point for low-vision users. We must consider the role an
+image plays in a page to work out what type of text alternative it should have.
+Take a look at this image.
+
+```html
+<article>
+    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
+    <img src="imgs/160204193356-01-cat-500.jpg">
+</article>
+```
+
+## Study shows 9 out of 10 cats quietly judging their owners as they sleep
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/y9kqrXvh2GbMLAfvGANE.jpg", alt="cat", width="400", height="250" %}
+</figure>
+
+In the page we have a picture of a cat, illustrating an article on cats'
+well-known judgmental behavior. A screen reader will announce this image using
+its literal name, `"/160204193356-01-cat-500.jpg"`. That's accurate, but not at
+all useful.
+
+You can use the `alt` attribute to provide a useful text alternative to this
+image &mdash; for example, "A cat staring menacingly off into space."
+
+```html
+<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
+```
+
+Then the screen reader can announce a succinct description of the image (
+seen in the black VoiceOver bar) and the user can choose whether to move on to
+the article.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6UW687JO230zmcTrPwFO.png", alt="an image with improved alt text", width="653", height="303" %}
+</figure>
+
+A couple of comments about `alt`:
+
+ - `alt` allows you to specify a simple string to be used any time the image
+   isn't available, such as when the image fails to load, or is accessed by web
+   crawling bot, or is encountered by a screen reader.
+ - `alt` differs from `title`, or any type of caption, in that it is *only* used
+   if the image is not available.
+
+Writing useful alt text is a bit of an art. In order for a string to be a usable
+text alternative, it needs to convey the same concept as the image, in the same
+context.
+
+Consider a linked logo image in the masthead of a page like those shown above.
+We can describe the image pretty accurately as "The Funion logo".
+
+```html
+<img class="logo" src="logo.jpg" alt="The Funion logo">
+```
+
+It might be tempting to give it a simpler text alternative of "home" or "main
+page", but that does a disservice to both low-vision and sighted users.
+
+But imagine a screen reader user who wants to locate the masthead logo on the
+page; giving it an alt value of "home" actually creates a more confusing
+experience. And a sighted user faces the same challenge &mdash; figuring out
+what clicking the site logo does &mdash; as a screen reader user.
+
+On the other hand, it's not always useful to describe an image. For example,
+consider a magnifying glass image inside a search button that has the text
+"Search". If the text wasn't there, you would definitely give that image an alt
+value of "search". But because we have the visible text, the screen reader will
+pick up and read aloud the word "search"; thus, an identical `alt` value on the
+image is redundant.
+
+However, we know that if we leave the `alt` text out, we'll probably hear the
+image file name instead, which is both useless and potentially confusing. In
+this case you can just use an empty `alt` attribute, and the screen reader will
+skip the image altogether.
+
+```html
+<img src="magnifying-glass.jpg" alt="">
+```
+
+To summarize, all images should have an `alt` attribute, but they need not all
+have text. Important images should have descriptive alt text that succinctly
+describes what the image is, while decorative images should have empty alt
+attributes &mdash; that is, `alt=""`.
+
diff --git a/src/site/content/en/blog/text-fragments/blog-red-ids.png b/src/site/content/en/blog/text-fragments/blog-red-ids.png
deleted file mode 100644
index 689ca637716..00000000000
Binary files a/src/site/content/en/blog/text-fragments/blog-red-ids.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/correct-text.png b/src/site/content/en/blog/text-fragments/correct-text.png
deleted file mode 100644
index 3460e1c761e..00000000000
Binary files a/src/site/content/en/blog/text-fragments/correct-text.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/extension.png b/src/site/content/en/blog/text-fragments/extension.png
deleted file mode 100644
index f42d5e0d3f3..00000000000
Binary files a/src/site/content/en/blog/text-fragments/extension.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/first-text.png b/src/site/content/en/blog/text-fragments/first-text.png
deleted file mode 100644
index f817964c2e4..00000000000
Binary files a/src/site/content/en/blog/text-fragments/first-text.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/google-help.png b/src/site/content/en/blog/text-fragments/google-help.png
deleted file mode 100644
index 7c2861898db..00000000000
Binary files a/src/site/content/en/blog/text-fragments/google-help.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/google-serp.png b/src/site/content/en/blog/text-fragments/google-serp.png
deleted file mode 100644
index 689a936ab13..00000000000
Binary files a/src/site/content/en/blog/text-fragments/google-serp.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/hero.jpg b/src/site/content/en/blog/text-fragments/hero.jpg
deleted file mode 100644
index 4712803f836..00000000000
Binary files a/src/site/content/en/blog/text-fragments/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/id-html1.png b/src/site/content/en/blog/text-fragments/id-html1.png
deleted file mode 100644
index a2ec53ff5fc..00000000000
Binary files a/src/site/content/en/blog/text-fragments/id-html1.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/id-missing.png b/src/site/content/en/blog/text-fragments/id-missing.png
deleted file mode 100644
index a382e4331fb..00000000000
Binary files a/src/site/content/en/blog/text-fragments/id-missing.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/index.md b/src/site/content/en/blog/text-fragments/index.md
index bebe896c94e..bf587b0dd3b 100644
--- a/src/site/content/en/blog/text-fragments/index.md
+++ b/src/site/content/en/blog/text-fragments/index.md
@@ -8,8 +8,8 @@ subhead: |
 authors:
   - thomassteiner
 date: 2020-06-17
-updated: 2020-08-07
-hero: hero.jpg
+updated: 2023-03-27
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
 alt:
 description: |
   Text Fragments let you specify a text snippet in the URL fragment.
@@ -17,29 +17,29 @@ description: |
   and/or bring it to the user's attention.
 tags:
   - blog
-  - text-fragments
+  # - text-fragments
   - capabilities
+feedback:
+  - api
 ---
+
 ## Fragment Identifiers
 
-Chrome&nbsp;80 was a big release.
-It contained a number of highly anticipated features like
-[ECMAScript Modules in Web Workers](https://web.dev/module-workers/),
+Chrome&nbsp;80 was a big release. It contained a number of highly anticipated features like
+[ECMAScript Modules in Web Workers](/module-workers/),
 [nullish coalescing](https://v8.dev/features/nullish-coalescing),
-[optional chaining](https://v8.dev/features/optional-chaining), and more.
-The release was, as usual, announced through a
-[blog post](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)
-on the Chromium blog.
-You can see an excerpt of the blog post in the screenshot below.
-
-<figure class="w-figure">
-  <img src="blog-red-ids.png" alt="" class="w-screenshot" width="400">
-  <figcaption class="w-figcaption">Chromium blog post with red boxes around elements with an <code>id</code> attribute.</figcaption>
+[optional chaining](https://v8.dev/features/optional-chaining), and more. The release was, as usual,
+announced through a
+[blog post](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) on the
+Chromium blog. You can see an excerpt of the blog post in the screenshot below.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %}
+  <figcaption>Chromium blog post with red boxes around elements with an <code>id</code> attribute.</figcaption>
 </figure>
 
-You are probably asking yourself what all the red boxes mean.
-They are the result of running the following snippet in DevTools.
-It highlights all elements that have an `id` attribute.
+You are probably asking yourself what all the red boxes mean. They are the result of running the
+following snippet in DevTools. It highlights all elements that have an `id` attribute.
 
 ```js
 document.querySelectorAll('[id]').forEach((el) => {
@@ -48,19 +48,18 @@ document.querySelectorAll('[id]').forEach((el) => {
 ```
 
 I can place a deep link to any element highlighted with a red box thanks to the
-[fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)
-which I then use in the [hash](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash)
-of the page's URL.
-Assuming I wanted to deep link to the *Give us feedback in our
-[Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)*
-box in the aside, I could do so by handcrafting the URL
+[fragment identifier](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)
+which I then use in the [hash](https://developer.mozilla.org/docs/Web/API/URL/hash) of the
+page's URL. Assuming I wanted to deep link to the _Give us feedback in our
+[Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)_ box in the
+aside, I could do so by handcrafting the URL
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#HTML1</mark></code></a>.
-As you can see in the Elements panel of the Developer Tools, the element in question
-has an `id` attribute with the value `HTML1`.
+As you can see in the Elements panel of the Developer Tools, the element in question has an `id`
+attribute with the value `HTML1`.
 
-<figure class="w-figure">
-  <img src="id-html1.png" alt="" class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">Dev Tools showing the <code>id</code> of an element.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %}
+  <figcaption>Dev Tools showing the <code>id</code> of an element.</figcaption>
 </figure>
 
 If I parse this URL with JavaScript's `URL()` constructor, the different components are revealed.
@@ -86,214 +85,205 @@ URL {
 */
 ```
 
-The fact though that I had to open the Developer Tools to find the `id`
-of an element speaks volumes about the probability this particular section of the page
-was meant to be linked to by the author of the blog post.
+The fact though that I had to open the Developer Tools to find the `id` of an element speaks volumes
+about the probability this particular section of the page was meant to be linked to by the author of
+the blog post.
 
-What if I want to link to something without an `id`?
-Say I want to link to the *ECMAScript Modules in Web Workers* heading.
-As you can see in the screenshot below, the `<h1>` in question does not have an `id` attribute,
-meaning there is no way I can link to this heading.
-This is the problem that Text Fragments solve.
+What if I want to link to something without an `id`? Say I want to link to the _ECMAScript Modules
+in Web Workers_ heading. As you can see in the screenshot below, the `<h1>` in question does not
+have an `id` attribute, meaning there is no way I can link to this heading. This is the problem that
+Text Fragments solve.
 
-<figure class="w-figure">
-  <img src="id-missing.png" alt="" class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">Dev Tools showing a heading without an <code>id</code>.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %}
+  <figcaption>Dev Tools showing a heading without an <code>id</code>.</figcaption>
 </figure>
 
 ## Text Fragments
 
-The [Text Fragments](https://wicg.github.io/ScrollToTextFragment/) proposal adds support
-for specifying a text snippet in the URL hash.
-When navigating to a URL with such a text fragment, the user agent can emphasize
-and/or bring it to the user's attention.
+The [Text Fragments](https://wicg.github.io/ScrollToTextFragment/) proposal adds support for
+specifying a text snippet in the URL hash. When navigating to a URL with such a text fragment, the
+user agent can emphasize and/or bring it to the user's attention.
 
 ### Browser compatibility
 
-The Text Fragments feature is supported in version 80 and beyond of Chromium-based browsers.
-At the time of writing, Safari and Firefox have not publicly signaled an intent to implement
-the feature. See [Related links](#related-links) for pointers to the Safari and Firefox discussions.
+{% BrowserCompat 'css.selectors.target-text' %}
 
-Note that these links currently do not work when served across
-[client-side redirects](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections)
-that some common services like Twitter use.
-You can follow [crbug.com/1055455](https://crbug.com/1055455) for progress on this issue.
-Regular [HTTP redirects](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#Principle)
-work fine.
+{% Aside 'success' %} These links used to not work when served across
+[client-side redirects](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections)
+that some common services like Twitter use. This issue was tracked as
+[crbug.com/1055455](https://crbug.com/1055455) and is now fixed. Regular
+[HTTP redirects](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle) always
+worked fine. {% endAside %}
 
 For [security](#security) reasons, the feature requires links to be opened in a
-[`noopener`](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener)
-context.
+[`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener) context.
 Therefore, make sure to include
-[`rel="noopener"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel)
-in your `<a>` anchor markup or add [`noopener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#noopener)
-to your `Window.open()` list of window functionality features.
+[`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel) in your
+`<a>` anchor markup or add
+[`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener) to your
+`Window.open()` list of window functionality features.
 
-### `textStart`
+### `start`
 
-In its simplest form, the syntax of Text Fragments is as follows:
-The hash symbol `#` followed by `:~:text=` and finally `textStart`, which represents the
-[percent-encoded](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
+In its simplest form, the syntax of Text Fragments is as follows: The hash symbol `#` followed by
+`:~:text=` and finally `start`, which represents the
+[percent-encoded](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
 text I want to link to.
 
 ```bash
-#:~:text=textStart
+#:~:text=start
 ```
 
-For example, say that I want to link to the
-*ECMAScript Modules in Web Workers* heading in the [blog post announcing features in Chrome 80](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html), the URL in this case would be:
+For example, say that I want to link to the _ECMAScript Modules in Web Workers_ heading in the
+[blog post announcing features in Chrome 80](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html),
+the URL in this case would be:
 
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers</mark></code></a>
 
 The text fragment is emphasized <mark class="highlight-line highlight-line-active">like this</mark>.
-If you click the link in a supporting browser like Chrome, the text fragment is
-highlighted and scrolls into view:
+If you click the link in a supporting browser like Chrome, the text fragment is highlighted and
+scrolls into view:
 
-<figure class="w-figure">
-  <img src="syntax-simple.png" alt="" class="w-screenshot" width="400">
-  <figcaption class="w-figcaption">Text fragment scrolled into view and highlighted.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %}
+  <figcaption>Text fragment scrolled into view and highlighted.</figcaption>
 </figure>
 
-### `textStart` and `textEnd`
+### `start` and `end`
 
-Now what if I want to link to the entire *section* titled *ECMAScript Modules in Web Workers*, not just its heading?
-Percent-encoding the entire text of the section would make the resulting URL impracticably long.
+Now what if I want to link to the entire _section_ titled _ECMAScript Modules in Web Workers_, not
+just its heading? Percent-encoding the entire text of the section would make the resulting URL
+impracticably long.
 
-Luckily there is a better way. Rather than the entire text, I can frame the desired text
-using the `textStart,textEnd` syntax.
-Therefore, I specify a couple of percent-encoded words at the beginning of the desired text,
-and a couple of percent-encoded words at the end of the desired text, separated by a comma&nbsp;`,`.
+Luckily there is a better way. Rather than the entire text, I can frame the desired text using the
+`start,end` syntax. Therefore, I specify a couple of percent-encoded words at the beginning
+of the desired text, and a couple of percent-encoded words at the end of the desired text, separated
+by a comma&nbsp;`,`.
 
 That looks like this:
 
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.</mark></code></a>.
 
-For `textStart`, I have `ECMAScript%20Modules%20in%20Web%20Workers`, then a comma&nbsp;`,`
-followed by `ES%20Modules%20in%20Web%20Workers.` as `textEnd`.
-When you click through on a supporting browser like Chrome, the whole section is highlighted
-and scrolled into view:
+For `start`, I have `ECMAScript%20Modules%20in%20Web%20Workers`, then a comma&nbsp;`,` followed
+by `ES%20Modules%20in%20Web%20Workers.` as `end`. When you click through on a supporting browser
+like Chrome, the whole section is highlighted and scrolled into view:
 
-<figure class="w-figure">
-  <img src="syntax-end.png" alt="" class="w-screenshot" width="400">
-  <figcaption class="w-figcaption">Text fragment scrolled into view and highlighted.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %}
+  <figcaption>Text fragment scrolled into view and highlighted.</figcaption>
 </figure>
 
-Now you may wonder about my choice of `textStart` and `textEnd`.
-Actually, the slightly shorter URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules,Web%20Workers.</mark></code></a>
-with only two words on each side would have worked, too.
-Compare `textStart` and `textEnd` with the previous values.
-
-If I take it one step further and now use only one word for both `textStart` and `textEnd`,
-you can see that I am in trouble.
-The URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript,Workers.</mark></code></a>
-is even shorter now, but the highlighted text fragment is no longer the originally desired one.
-The highlighting stops at the first occurrence of the word `Workers.`, which is correct,
-but not what I intended to highlight.
-The problem is that the desired section is not uniquely identified
-by the current one-word `textStart` and `textEnd` values:
-
-<figure class="w-figure">
-  <img src="syntax-end-wrong.png" alt="" class="w-screenshot" width="400">
-  <figcaption class="w-figcaption">Non-intended text fragment scrolled into view and highlighted.</figcaption>
+Now you may wonder about my choice of `start` and `end`. Actually, the slightly shorter URL
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules,Web%20Workers.</mark></code></a>
+with only two words on each side would have worked, too. Compare `start` and `end` with the
+previous values.
+
+If I take it one step further and now use only one word for both `start` and `end`, you can
+see that I am in trouble. The URL
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript,Workers.</mark></code></a>
+is even shorter now, but the highlighted text fragment is no longer the originally desired one. The
+highlighting stops at the first occurrence of the word `Workers.`, which is correct, but not what I
+intended to highlight. The problem is that the desired section is not uniquely identified by the
+current one-word `start` and `end` values:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %}
+  <figcaption>Non-intended text fragment scrolled into view and highlighted.</figcaption>
 </figure>
 
 ### `prefix-` and `-suffix`
 
-Using long enough values for `textStart` and `textEnd` is one solution for obtaining a unique link.
-In some situations, however, this is not possible.
-On a side note, why did I choose the Chrome&nbsp;80 release blog post as my example?
-The answer is that in this release Text Fragments were introduced:
-
-<figure class="w-figure">
-  <img src="text-fragments.png" alt="Blog post text: Text URL Fragments.
-    Users or authors can now link to a specific portion of a page
-    using a text fragment provided in a URL.
-    When the page is loaded, the browser highlights the text and scrolls the fragment into view.
-    For example, the URL below loads a wiki page for 'Cat'
-    and scrolls to the content listed in the `text` parameter." class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">Text Fragments announcement blog post excerpt.</figcaption>
+Using long enough values for `start` and `end` is one solution for obtaining a unique link.
+In some situations, however, this is not possible. On a side note, why did I choose the
+Chrome&nbsp;80 release blog post as my example? The answer is that in this release Text Fragments
+were introduced:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="Blog post text: Text URL Fragments. Users or authors can now link to a specific portion of a page using a text fragment provided in a URL. When the page is loaded, the browser highlights the text and scrolls the fragment into view. For example, the URL below loads a wiki page for 'Cat' and scrolls to the content listed in the `text` parameter.", width="800", height="200" %}
+  <figcaption>Text Fragments announcement blog post excerpt.</figcaption>
 </figure>
 
-Notice how in the screenshot above the word "text" appears four times.
-The forth occurrence is written in a green code font.
-If I wanted to link to this particular word,
-I would set `textStart` to `text`.
-Since the word "text" is, well, only one word, there cannot be a `textEnd`.
-What now?
-The URL
+Notice how in the screenshot above the word "text" appears four times. The forth occurrence is
+written in a green code font. If I wanted to link to this particular word, I would set `start`
+to `text`. Since the word "text" is, well, only one word, there cannot be a `end`. What now? The
+URL
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=text</mark></code></a>
 matches at the first occurrence of the word "Text" already in the heading:
 
-<figure class="w-figure">
-  <img src="first-text.png" alt="" class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">Text Fragment matching at the first occurrence of "Text".</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %}
+  <figcaption>Text Fragment matching at the first occurrence of "Text".</figcaption>
 </figure>
 
-{% Aside 'caution' %}
-  Note that text fragment matching is case-insensitive.
-{% endAside %}
+{% Aside 'caution' %} Note that text fragment matching is case-insensitive. {% endAside %}
 
-Luckily there is a solution.
-In cases like this, I can specify a `prefix​-` and a `-suffix`.
-The word before the green code font "text" is "the", and the word after is "parameter".
-None of the other three occurrences of the word "text" has the same surrounding words.
-Armed with this knowledge, I can tweak the previous URL and add the `prefix-` and the `-suffix`.
-Like the other parameters, they, too, need to be percent-encoded
-and can contain more than one word.
+Luckily there is a solution. In cases like this, I can specify a `prefix​-` and a `-suffix`. The
+word before the green code font "text" is "the", and the word after is "parameter". None of the
+other three occurrences of the word "text" has the same surrounding words. Armed with this
+knowledge, I can tweak the previous URL and add the `prefix-` and the `-suffix`. Like the other
+parameters, they, too, need to be percent-encoded and can contain more than one word.
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=the-,text,-parameter</mark></code></a>.
-To allow the parser to clearly identify the `prefix-` and the `-suffix`,
-they need to be separated from the `textStart` and the optional `textEnd` with a dash&nbsp;`-`.
+To allow the parser to clearly identify the `prefix-` and the `-suffix`, they need to be separated
+from the `start` and the optional `end` with a dash&nbsp;`-`.
 
-<figure class="w-figure">
-  <img src="correct-text.png" alt="" class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">Text Fragment matching at the desired occurrence of "text".</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %}
+  <figcaption>Text Fragment matching at the desired occurrence of "text".</figcaption>
 </figure>
 
 ### The full syntax
 
 The full syntax of Text Fragments is shown below. (Square brackets indicate an optional parameter.)
-The values for all parameters need to be percent-encoded.
-This is especially important for the dash `-`, ampersand `&`, and comma `,` characters,
-so they are not being interpreted as part of the text directive syntax.
+The values for all parameters need to be percent-encoded. This is especially important for the dash
+`-`, ampersand `&`, and comma `,` characters, so they are not being interpreted as part of the text
+directive syntax.
 
 ```bash
-#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+#:~:text=[prefix-,]start[,end][,-suffix]
 ```
 
-Each of `prefix-`, `textStart`, `textEnd`, and `-suffix` will only match text within a single
-[block-level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements),
-but full `textStart,textEnd` ranges *can* span multiple blocks.
-For example, `:~:text=The quick,lazy dog` will fail to match in the following example,
-because the starting string "The quick" does not appear within a single,
-uninterrupted block-level element:
+Each of `prefix-`, `start`, `end`, and `-suffix` will only match text within a single
+[block-level element](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements),
+but full `start,end` ranges _can_ span multiple blocks. For example,
+`:~:text=The quick,lazy dog` will fail to match in the following example, because the starting
+string "The quick" does not appear within a single, uninterrupted block-level element:
 
 ```html
-  <div>The<div> </div>quick brown fox</div>
-  <div>jumped over the lazy dog</div>
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
 ```
 
 It does, however, match in this example:
 
 ```html
-  <div>The quick brown fox</div>
-  <div>jumped over the lazy dog</div>
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
 ```
 
 ### Creating Text Fragment URLs with a browser extension
 
-Creating Text Fragments URLs by hand is tedious,
-especially when it comes to making sure they are unique.
-If you really want to, the specification has some tips and lists the exact
+Creating Text Fragments URLs by hand is tedious, especially when it comes to making sure they are
+unique. If you really want to, the specification has some tips and lists the exact
 [steps for generating Text Fragment URLs](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives).
-We provide a browser extension called
-[Link to Text Fragment](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
-that lets you link to any text by selecting it, and then clicking "Copy Link to Selected Text"
-in the context menu.
-
-<figure class="w-figure">
-  <img src="extension.png" alt="" class="w-screenshot" width="100%">
-  <figcaption class="w-figcaption">
-    <a href="https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg">
+We provide an open-source browser extension called
+[Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment) that lets you
+link to any text by selecting it, and then clicking "Copy Link to Selected Text" in the context
+menu. This extension is available for the following browsers:
+
+- [Link to Text Fragment for Google Chrome](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Link to Text Fragment for Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Link to Text Fragment for Mozilla Firefox](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Link to Text Fragment for Apple Safari](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %}
+  <figcaption>
+    <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">
       Link to Text Fragment
     </a>
     browser extension.
@@ -302,56 +292,48 @@ in the context menu.
 
 ### Multiple text fragments in one URL
 
-Note that multiple text fragments can appear in one URL.
-The particular text fragments need to be separated by an ampersand character `&`.
-Here is an example link with three text fragments:
-<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet<mark class="highlight-line highlight-line-active"></code></a>.
+Note that multiple text fragments can appear in one URL. The particular text fragments need to be
+separated by an ampersand character `&`. Here is an example link with three text fragments:
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:<mark class="highlight-line highlight-line-active">text=Text%20URL%20Fragments</mark>&<mark class="highlight-line highlight-line-active">text=text,-parameter</mark>&<mark class="highlight-line highlight-line-active">text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet</mark></code></a>.
 
-<figure class="w-figure">
-  <img src="three-text-fragments.png" alt="" class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">Three text fragments in one URL.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %}
+  <figcaption>Three text fragments in one URL.</figcaption>
 </figure>
 
 ### Mixing element and text fragments
 
-Traditional element fragments can be combined with text fragments.
-It is perfectly fine to have both in the same URL, for example,
-to provide a meaningful fallback in case the original text on the page changes,
-so that the text fragment does not match anymore.
-The URL
+Traditional element fragments can be combined with text fragments. It is perfectly fine to have both
+in the same URL, for example, to provide a meaningful fallback in case the original text on the page
+changes, so that the text fragment does not match anymore. The URL
 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.</mark></code></a>
-linking to the *Give us feedback in our
-[Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)* section
+linking to the _Give us feedback in our
+[Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)_ section
 contains both an element fragment (`HTML1`), as well as a text fragment
 (`text=Give%20us%20feedback%20in%20our%20Product%20Forums.`):
 
-<figure class="w-figure">
-  <img src="text-feedback.png" alt="" class="w-screenshot" width="237">
-  <figcaption class="w-figcaption">Linking with both element fragment and text fragment.</figcaption>
+<figure>
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %}
+  <figcaption>Linking with both element fragment and text fragment.</figcaption>
 </figure>
 
 ### The fragment directive
 
-There is one element of the syntax I have not explained yet:
-the fragment directive `:~:`.
-To avoid compatibility issues with existing URL element fragments as shown above,
-the [Text Fragments specification](https://wicg.github.io/ScrollToTextFragment/)
-introduces the fragment directive.
-The fragment directive is a portion of the URL fragment delimited by the code sequence `:~:`.
-It is reserved for user agent instructions, such as `text=`,
-and is stripped from the URL during loading so that author scripts cannot directly interact with it.
-User agent instructions are also called *directives*.
-In the concrete case, `text=` is therefore called a *text directive*.
+There is one element of the syntax I have not explained yet: the fragment directive `:~:`. To avoid
+compatibility issues with existing URL element fragments as shown above, the
+[Text Fragments specification](https://wicg.github.io/ScrollToTextFragment/) introduces the fragment
+directive. The fragment directive is a portion of the URL fragment delimited by the code sequence
+`:~:`. It is reserved for user agent instructions, such as `text=`, and is stripped from the URL
+during loading so that author scripts cannot directly interact with it. User agent instructions are
+also called _directives_. In the concrete case, `text=` is therefore called a _text directive_.
 
 ### Feature detection
 
-To detect support, test for the read-only `fragmentDirective` property on `document`.
-The fragment directive is a mechanism for URLs to specify instructions
-directed to the browser rather than the document.
-It is meant to avoid direct interaction with author script,
-so that future user agent instructions can be added without fear
-of introducing breaking changes to existing content.
-One potential example of such future additions could be translation hints.
+To detect support, test for the read-only `fragmentDirective` property on `document`. The fragment
+directive is a mechanism for URLs to specify instructions directed to the browser rather than the
+document. It is meant to avoid direct interaction with author script, so that future user agent
+instructions can be added without fear of introducing breaking changes to existing content. One
+potential example of such future additions could be translation hints.
 
 ```js
 if ('fragmentDirective' in document) {
@@ -359,81 +341,137 @@ if ('fragmentDirective' in document) {
 }
 ```
 
-{% Aside %}
-  In the initial version, the `fragmentDirective` property was defined on
-  `Location.prototype`. For details on this change, see
-  [WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130).
+{% Aside %} From Chrome&nbsp;80 to Chrome&nbsp;85, the `fragmentDirective` property was defined on
+`Location.prototype`. For details on this change, see
+[WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130).
 {% endAside %}
 
-Feature detection is mainly intended for cases where links are dynamically generated
-(for example by search engines) to avoid serving text fragments links
-to browsers that do not support them.
+Feature detection is mainly intended for cases where links are dynamically generated (for example by
+search engines) to avoid serving text fragments links to browsers that do not support them.
+
+### Styling text fragments
+
+By default, browsers style text fragments the same way they style
+[`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) (typically black on yellow,
+the CSS [system colors](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors)
+for `mark`). The user-agent stylesheet contains CSS that looks like this:
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+As you can see, the browser exposes a pseudo selector
+[`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text) that you can use to
+customize the applied highlighting. For example, you could design your text fragments to be black
+text on a red background. As always, be sure to
+[check the color contrast](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast)
+so your override styling does not cause accessibility issues and make sure the highlighting actually
+visually stands out from the rest of the content.
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
 
 ### Polyfillability
 
-The Text Fragments feature can be polyfilled to some extent.
-There is early [work in progress](https://github.com/GoogleChromeLabs/text-fragments-polyfill)
-to create an extension for browsers that do not support Text Fragments natively
-where the functionality is implemented in JavaScript.
+The Text Fragments feature can be polyfilled to some extent. We provide a
+[polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill), which is used internally by
+the [extension](https://github.com/GoogleChromeLabs/link-to-text-fragment), for browsers that do not
+provide built-in support for Text Fragments where the functionality is implemented in JavaScript.
+
+### Programmatic Text Fragment link generation
+
+The [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill) contains a file
+`fragment-generation-utils.js` that you can import and use to generate Text Fragment links. This is
+outlined in the code sample below:
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const start = encodeURIComponent(fragment.textStart);
+  const end = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${start}${end}${suffix}`;
+  console.log(url);
+}
+```
+
+### Obtaining Text Fragments for analytics purposes
+
+Plenty of sites use the fragment for routing, which is why browsers strip out Text Fragments
+so as to not break those pages. There is an
+[acknowledged need](https://github.com/WICG/scroll-to-text-fragment/issues/128)
+to expose Text Fragments links to pages, for example, for analytics purposes,
+but the proposed solution is not implemented yet.
+As a workaround for now, you can use the code below to extract
+the desired information.
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
 
 ### Security
 
-Text fragment directives are invoked only on full (non-same-page) navigations
-that are the result of a
+Text fragment directives are invoked only on full (non-same-page) navigations that are the result of
+a
 [user activation](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation).
-Additionally, navigations originating from a different origin than the destination
-will require the navigation to take place in a
-[`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) context,
-such that the destination page is known to be sufficiently isolated.
-Text fragment directives are only applied to the main frame.
-This means that text will not be searched inside iframes,
-and iframe navigation will not invoke a text fragment.
+Additionally, navigations originating from a different origin than the destination will require the
+navigation to take place in a
+[`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) context, such
+that the destination page is known to be sufficiently isolated. Text fragment directives are only
+applied to the main frame. This means that text will not be searched inside iframes, and iframe
+navigation will not invoke a text fragment.
 
 ### Privacy
 
-It is important that implementations of the Text Fragments specification
-do not leak whether a text fragment was found on a page or not.
-While element fragments are fully under the control of the original page author,
-text fragments can be created by anyone.
-Remember how in my example above there was no way to link to the
-*ECMAScript Modules in Web Workers* heading, since the `<h1>` did not have an `id`,
-but how anyone, including me, could just link to anywhere by carefully crafting the text fragment?
-
-Imagine I ran an evil ad network `evil-ads.example.com`.
-Further imagine that in one of my ad iframes I dynamically created a hidden cross-origin iframe
-to `dating.example.com` with a Text Fragment URL
+It is important that implementations of the Text Fragments specification do not leak whether a text
+fragment was found on a page or not. While element fragments are fully under the control of the
+original page author, text fragments can be created by anyone. Remember how in my example above
+there was no way to link to the _ECMAScript Modules in Web Workers_ heading, since the `<h1>` did
+not have an `id`, but how anyone, including me, could just link to anywhere by carefully crafting
+the text fragment?
+
+Imagine I ran an evil ad network `evil-ads.example.com`. Further imagine that in one of my ad
+iframes I dynamically created a hidden cross-origin iframe to `dating.example.com` with a Text
+Fragment URL
 <code>dating.example.com<mark class="highlight-line highlight-line-active">#:~:text=Log%20Out</mark></code>
-once the user interacts with the ad.
-If the text "Log Out" is found, I know the victim is currently logged in to `dating.example.com`,
-which I could use for user profiling.
-Since a naive Text Fragments implementation might decide
-that a successful match should cause a focus switch,
-on `evil-ads.example.com` I could listen for the `blur` event and thus know when a match occurred.
-In Chrome, we have implemented Text Fragments in such a way that the above scenario cannot happen.
-
-Another attack might be to exploit network traffic based on scroll position.
-Assume I had access to network traffic logs of my victim, like as the admin of a company intranet.
-Now imagine there existed a long human resources document *What to Do If You Suffer From…*
-and then a list of conditions like *burn out*, *anxiety*, etc.
-I could place a tracking pixel next to each item on the list.
-If I then determine that loading the document temporally co-occurs
-with the loading of the tracking pixel next to, say, the *burn out* item,
-I can then, as the intranet admin, determine that an employee has clicked through
-on a text fragment link with `:~:text=burn%20out`
-that the employee may have assumed was confidential and not visible to anyone.
-Since this example is somewhat contrived to begin with
-and since its exploitation requires *very* specific preconditions to be met,
+once the user interacts with the ad. If the text "Log Out" is found, I know the victim is currently
+logged in to `dating.example.com`, which I could use for user profiling. Since a naive Text
+Fragments implementation might decide that a successful match should cause a focus switch, on
+`evil-ads.example.com` I could listen for the `blur` event and thus know when a match occurred. In
+Chrome, we have implemented Text Fragments in such a way that the above scenario cannot happen.
+
+Another attack might be to exploit network traffic based on scroll position. Assume I had access to
+network traffic logs of my victim, like as the admin of a company intranet. Now imagine there
+existed a long human resources document _What to Do If You Suffer From…_ and then a list of
+conditions like _burn out_, _anxiety_, etc. I could place a tracking pixel next to each item on the
+list. If I then determine that loading the document temporally co-occurs with the loading of the
+tracking pixel next to, say, the _burn out_ item, I can then, as the intranet admin, determine that
+an employee has clicked through on a text fragment link with `:~:text=burn%20out` that the employee
+may have assumed was confidential and not visible to anyone. Since this example is somewhat
+contrived to begin with and since its exploitation requires _very_ specific preconditions to be met,
 the Chrome security team evaluated the risk of implementing scroll on navigation to be manageable.
 Other user agents may decide to show a manual scroll UI element instead.
 
-For sites that still wish to opt-out, we have proposed a
-[Document Policy](https://github.com/w3c/webappsec-feature-policy/blob/master/document-policy-explainer.md)
-header value that they can send, so user agents will not process Text Fragment URLs.
-Since Document Policy is not yet shipped, we are running an
-[origin trial](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)
-to apply this policy as an intermediate solution.
-The [ForceLoadAtTop](https://developers.chrome.com/origintrials/#/view_trial/3253850730775183361)
-origin trial is running from Chrome version 83 to 85.
+For sites that wish to opt-out, Chromium supports a
+[Document Policy](https://wicg.github.io/document-policy/)
+header value that they can send so user agents will not process Text Fragment URLs.
 
 ```bash
 Document-Policy: force-load-at-top
@@ -441,57 +479,62 @@ Document-Policy: force-load-at-top
 
 ## Disabling text fragments
 
-If you really dislike the feature, you can opt out using the enterprise setting
+The easiest way for disabling the feature is by using an extension that can inject HTTP response
+headers, for example,
+[ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj)
+(not a Google product), to insert a response (_not_ request) header as follows:
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+Another, more involved, way to opt out is by using the enterprise setting
 [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled).
-To use it on macOS, paste the command below in the terminal.
+To do this on macOS, paste the command below in the terminal.
 
 ```bash
 defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
 ```
 
-On Windows, follow the documentation on the 
-[Google Chrome Enterprise Help](https://support.google.com/chrome/a/answer/9131254?hl=en) support site.
+On Windows, follow the documentation on the
+[Google Chrome Enterprise Help](https://support.google.com/chrome/a/answer/9131254?hl=en) support
+site.
 
-{% Aside 'warning' %}
-  Please only try this when you know what you are doing.
-{% endAside %}
+{% Aside 'warning' %} Only try this when you know what you are doing. {% endAside %}
 
 ## Text fragments in web search
 
-For some searches, the search engine Google provides a quick answer or summary
-with a content snippet from a relevant website.
-These *featured snippets* are most likely to show up when a search is in the form of a question.
-Clicking a featured snippet takes the user directly to the featured snippet text on the source web page.
-This works thanks to automatically created Text Fragments URLs.
+For some searches, the search engine Google provides a quick answer or summary with a content
+snippet from a relevant website. These _featured snippets_ are most likely to show up when a search
+is in the form of a question. Clicking a featured snippet takes the user directly to the featured
+snippet text on the source web page. This works thanks to automatically created Text Fragments URLs.
 
-<figure class="w-figure">
-  <img src="google-serp.png" alt="" class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">Google search engine results page showing a featured snippet. The status bar shows the Text Fragments URL.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %}
+  <figcaption>Google search engine results page showing a featured snippet. The status bar shows the Text Fragments URL.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="google-help.png" alt="" class="w-screenshot" width="80%">
-  <figcaption class="w-figcaption">After clicking through, the relevant section of the page is scrolled into view.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %}
+  <figcaption>After clicking through, the relevant section of the page is scrolled into view.</figcaption>
 </figure>
 
 ## Conclusion
 
-Text Fragments URL is a powerful feature to link to arbitrary text on webpages.
-The scholarly community can use it to provide highly accurate citation or reference links.
-Search engines can use it to deeplink to text results on pages.
-Social networking sites can use it to let users share specific passages of a webpage
-rather than inaccessible screenshots.
-I hope you start
+Text Fragments URL is a powerful feature to link to arbitrary text on webpages. The scholarly
+community can use it to provide highly accurate citation or reference links. Search engines can use
+it to deeplink to text results on pages. Social networking sites can use it to let users share
+specific passages of a webpage rather than inaccessible screenshots. I hope you start
 [using Text Fragment URLs](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet)
-and find them as useful as I do.
-Be sure to install the
-[Link to Text Fragment](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
-browser extension.
+and find them as useful as I do. Be sure to install the
+[Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment) browser
+extension.
 
 ## Related links
 
+- [Spec draft](https://wicg.github.io/scroll-to-text-fragment/)
 - [TAG Review](https://github.com/w3ctag/design-reviews/issues/392)
-- [Chrome Platform Status entry](https://chromestatus.com/features/4733392803332096)
+- [Chrome Platform Status entry](https://chromestatus.com/feature/4733392803332096)
 - [Chrome tracking bug](https://crbug.com/919204)
 - [Intent to Ship thread](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
 - [WebKit-Dev thread](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
@@ -499,10 +542,8 @@ browser extension.
 
 ## Acknowledgements
 
-Text Fragments was implemented and specified by
-[Nick Burris](https://github.com/nickburris)
-and [David Bokan](https://github.com/bokand),
-with contributions from [Grant Wang](https://github.com/grantjwang).
-Thanks to [Joe Medley](https://github.com/jpmedley) for the thorough review of this article.
-Hero image by [Greg Rakozy](https://unsplash.com/@grakozy) on
+Text Fragments was implemented and specified by [Nick Burris](https://github.com/nickburris) and
+[David Bokan](https://github.com/bokand), with contributions from
+[Grant Wang](https://github.com/grantjwang). Thanks to [Joe Medley](https://github.com/jpmedley) for
+the thorough review of this article. Hero image by [Greg Rakozy](https://unsplash.com/@grakozy) on
 [Unsplash](https://unsplash.com/photos/oMpAz-DN-9I).
diff --git a/src/site/content/en/blog/text-fragments/syntax-end-wrong.png b/src/site/content/en/blog/text-fragments/syntax-end-wrong.png
deleted file mode 100644
index 4f301d55c9e..00000000000
Binary files a/src/site/content/en/blog/text-fragments/syntax-end-wrong.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/syntax-end.png b/src/site/content/en/blog/text-fragments/syntax-end.png
deleted file mode 100644
index ffecb6447d5..00000000000
Binary files a/src/site/content/en/blog/text-fragments/syntax-end.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/syntax-simple.png b/src/site/content/en/blog/text-fragments/syntax-simple.png
deleted file mode 100644
index 13a11db5ba7..00000000000
Binary files a/src/site/content/en/blog/text-fragments/syntax-simple.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/text-feedback.png b/src/site/content/en/blog/text-fragments/text-feedback.png
deleted file mode 100644
index c8dccc94542..00000000000
Binary files a/src/site/content/en/blog/text-fragments/text-feedback.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/text-fragments.png b/src/site/content/en/blog/text-fragments/text-fragments.png
deleted file mode 100644
index 2b4f17103cc..00000000000
Binary files a/src/site/content/en/blog/text-fragments/text-fragments.png and /dev/null differ
diff --git a/src/site/content/en/blog/text-fragments/three-text-fragments.png b/src/site/content/en/blog/text-fragments/three-text-fragments.png
deleted file mode 100644
index 37aac19f616..00000000000
Binary files a/src/site/content/en/blog/text-fragments/three-text-fragments.png and /dev/null differ
diff --git a/src/site/content/en/blog/the-accessibility-tree/index.md b/src/site/content/en/blog/the-accessibility-tree/index.md
new file mode 100644
index 00000000000..6572da93add
--- /dev/null
+++ b/src/site/content/en/blog/the-accessibility-tree/index.md
@@ -0,0 +1,191 @@
+---
+layout: post
+title: The Accessibility Tree
+subhead: Introduction to the Accessibility Tree
+description: Introduction to the Accessibility Tree
+authors:
+  - megginkearney
+  - dgash
+  - aliceboxhall
+date: 2016-10-04
+updated: 2019-06-08
+#tags:
+
+---
+
+Imagine that you're building a user interface *for screen reader users only*.
+Here, you don't need to create any visual UI at all, but just provide enough
+information for the screen reader to use.
+
+What you'd be creating is a kind of API describing the page structure, similar
+to the DOM API, but you can get away with less information and fewer nodes,
+because a lot of that information is only useful for visual presentation. It
+might look something like this.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oVhpmyLS5pMVZOrtd6j9.jpg", alt="screen reader DOM API mockup", width="800", height="387" %}
+</figure>
+
+This is basically what the browser actually presents to the screen reader. The
+browser takes the DOM tree and modifies it into a form that is useful to
+assistive technology. We refer to this modified tree as the *Accessibility
+Tree*.
+
+You might visualize the accessibility tree as looking a bit like an old web page
+from the '90s: a few images, lots of links, perhaps a field and a button.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7vls7AdHtbkVikDgHFIw.png", alt="a 1990s style web page", width="640", height="304" %}
+</figure>
+
+Visually scanning down a page like this case gives you an experience similar to
+what a screen reader user would get. The interface is there, but it is simple
+and direct, much like an accessibility tree interface.
+
+The accessibility tree is what most assistive technologies interact with. The
+flow goes something like this.
+
+ 1. An application (the browser or other app) exposes a semantic version of its
+    UI to assistive technology via an API.
+ 1. The assistive technology may use the information it reads via the API to
+    create an alternative user interface presentation for the user. For example,
+    a screen reader creates an interface in which the user hears a spoken
+    representation of the app.
+ 1. The assistive technology may also allow the user to interact with the app in
+    a different way. For example, most screen readers provide hooks to allow a
+    user to easily simulate a mouse click or finger tap.
+ 1. The assistive technology relays the user intent (such as "click") back to
+    the app via the accessibility API. The app then has the responsibility to
+    interpret the action appropriately in the context of the original UI.
+
+For web browsers, there's an extra step in each direction, because the browser
+is in fact a platform for web apps that run inside it. So the browser needs to
+translate the web app into an accessibility tree, and must make sure that the
+appropriate events get fired in JavaScript based on the user actions that come
+in from the assistive technology.
+
+But that is all the browser's responsibility. Our job as web developers is just
+to be aware that this is going on, and to develop web pages that take advantage
+of this process to create an accessible experience for our users.
+
+We do this by ensuring that we express the semantics of our pages correctly:
+making sure that the important elements in the page have the correct accessible
+roles, states, and properties, and that we specify accessible names and
+descriptions. The browser can then let the assistive technology access that
+information to create a customized experience.
+
+## Semantics in native HTML
+
+A browser can transform the DOM tree into an accessibility tree because much of
+the DOM has *implicit* semantic meaning. That is, the DOM uses native HTML
+elements that are recognized by browsers and work predictably on a variety of
+platforms. Accessibility for native HTML elements such as links or buttons is
+thus handled automatically. We can take advantage of that built-in accessibility
+by writing HTML that expresses the semantics of our page elements.
+
+However, sometimes we use elements that look like native elements but aren't.
+For example, this "button" isn't a button at all.
+
+<style>
+    .fancy-btn {
+        display: inline-block;
+        background: #BEF400;
+        border-radius: 8px;
+        padding: 10px;
+        font-weight: bold;
+        user-select: none;
+        cursor: pointer;
+    }
+</style>
+<div class="fancy-btn">Give me tacos</div>
+
+
+It might be constructed in HTML in any number of ways; one way is shown below.
+
+```html
+<div class="button-ish">Give me tacos</div>
+```
+
+When we don't use an actual button element, the screen reader has no way to know
+what it has landed on. Also, we would have to do the extra work [of adding
+tabindex](/using-tabindex/) to make it
+usable to keyboard-only users because, as it is coded now, it can only be used
+with a mouse.
+
+We can easily fix this by using a regular `button` element instead of a `div`.
+Using a native element also has the benefit of taking care of keyboard
+interactions for us. And remember that you don't have to lose your spiffy visual
+effects just because you use a native element; you can style native elements to
+make them look the way you want and still retain the implicit semantics and
+behavior.
+
+Earlier we noted that screen readers will announce an element's role, name,
+state, and value. By using the right semantic element, role, state, and value
+are covered, but we must also ensure that we make an element's name
+discoverable.
+
+Broadly, there are two types of names:
+
+ - *Visible labels*, which are used by all users to associate meaning with an
+   element, and
+ - *Text alternatives*, which are only used when there is no need for a visual
+   label.
+
+For text-level elements, we don't need to do anything, because by definition it
+will have some text content. However, for input or control elements, and visual
+content like images, we need to make sure that we specify a name. In fact,
+providing text alternatives for any non-text content is [the very
+first item on the WebAIM checklist](https://webaim.org/standards/wcag/checklist#g1.1).
+
+One way to do that is to follow their recommendation that "Form inputs have
+associated text labels." There are two ways to associate a label with a form
+element, such as a checkbox. Either of the methods causes the label text to also
+become a click target for the checkbox, which is also helpful for mouse or
+touchscreen users. To associate a label with an element, either
+
+ - Place the input element inside a label element
+
+
+```html
+<label>
+    <input type="checkbox">Receive promotional offers?
+</label>
+```
+
+
+<div style="margin: 10px;">
+    <label style="font-size: 16px; color: #212121;">
+        <input type="checkbox">Receive promotional offers?
+    </label>
+</div>
+
+
+or
+
+ - Use the label's `for` attribute and refer to the element's `id`
+
+```html
+<input id="promo" type="checkbox">
+<label for="promo">Receive promotional offers?</label>
+```
+
+<div style="margin: 10px;">
+    <input id="promo" type="checkbox">
+    <label for="promo">Receive promotional offers?</label>
+</div>
+
+
+When the checkbox has been labeled correctly, the screen reader can report that
+the element has a role of checkbox, is in a checked state, and is named "Receive
+promotional offers?".
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/16hxTfkqd3OTHoB8joMo.png", alt="on-screen text output from VoiceOver showing the spoken label for a checkbox", width="640", height="174" %}
+</figure>
+
+{% Aside 'success' %}
+You can actually use the screen reader to find improperly-associated
+labels by tabbing through the page and verifying the spoken roles, states, and
+names.
+{% endAside %}
+
diff --git a/src/site/content/en/blog/the-amazing-powers-of-css/index.md b/src/site/content/en/blog/the-amazing-powers-of-css/index.md
new file mode 100644
index 00000000000..dbb30942bd7
--- /dev/null
+++ b/src/site/content/en/blog/the-amazing-powers-of-css/index.md
@@ -0,0 +1,97 @@
+---
+title: The amazing powers of CSS 
+authors:
+  - ilmariheikkinen
+date: 2012-06-19 
+updated: 2019-02-09
+tags:
+  - blog
+  - css
+
+---
+
+Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible:
+
+```css
+a[href = ""] {
+    background: red;
+    color: white;
+    font-size: x-large;
+}
+```
+
+Check out the [live example at jsFiddle](https://jsfiddle.net/VWYsk/)
+
+You can also style absolute links differently from relative links:
+
+```css
+a[href ^= http] {
+    display: inline-block;
+    color: red;
+    transform: rotate(180deg);
+}
+```
+
+Check out the [live example at jsFiddle](https://jsfiddle.net/RShhf/1/)
+
+If you want to have a different style for links pointing out of your domain, you can use the :not() selector. This is actually how we do the little arrows next to external links at HTML5Rocks.
+
+```css
+a[href ^= 'http']:not([href *= 'html5rocks.']) {
+    background: transparent url(arrow.png) no-repeat center right;
+    padding-right: 16px;
+}
+```
+
+Check out the [live example at jsFiddle](http://jsfiddle.net/Sts9H/1/)
+
+Just to remind you that you're not limited to styling links, here's how to make all PNG images inverted:
+
+```css
+img[src $= .png] {
+    filter: invert(100%);
+}
+```
+
+Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there?
+
+```css
+head {
+    display: block;
+    border-bottom: 5px solid red;
+}
+script, style, link {
+    display: block;
+    white-space: pre;
+    font-family: monospace;
+}
+```
+
+Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content?
+
+```css
+script:before {
+    content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
+}
+script:after {
+    content: "</script>";
+}
+
+style:before {
+    content: "<style type=\"" attr(type) "\">";
+}
+style:after {
+    content: "< /style>";
+}
+
+/* And for a finish, <link> */
+link:before {
+    content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
+}
+```
+
+Check out the [live example at jsFiddle](http://jsfiddle.net/Wedjf/1/)
+
+Note that attr() reads in the attribute values of the matching element, so if you use it for #foo:before, it reads the attributes from #foo.
+
+
diff --git a/src/site/content/en/blog/the-basics-of-easing/index.md b/src/site/content/en/blog/the-basics-of-easing/index.md
new file mode 100644
index 00000000000..53505870432
--- /dev/null
+++ b/src/site/content/en/blog/the-basics-of-easing/index.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: The Basics of easing
+subhead: Learn how to soften and give weighting to your animations.
+authors:
+  - paullewis
+date: 2014-08-08
+updated: 2019-08-04
+description: Learn how to soften and give weighting to your animations.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+
+Nothing in nature moves linearly from one point to another. In reality, things tend to accelerate or decelerate as they move. Our brains are wired to expect this kind of motion, so when animating, you should use this to your advantage. Natural motion makes your users feel more comfortable with your apps, which in turn leads to a better overall experience.
+
+### Summary
+* Easing makes your animations feel more natural.
+* Choose ease-out animations for UI elements.
+* Avoid ease-in or ease-in-out animations unless you can keep them short; they tend to feel sluggish to end users.
+
+
+In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively. Sometimes the two are combined, which is called "ease in out." Easing, then, is really the process of making the animation less severe or pronounced.
+
+## Easing keywords
+
+CSS transitions and animations both let you [choose the kind of easing you want to use for your animations](choosing-the-right-easing). You can use keywords that affect the easing (or `timing`, as it's sometimes called) of the animation in question. You can also [go completely custom with your easing](custom-easing), which gives you a lot more freedom to express your app's personality.
+
+Here are some of the keywords that you can use in CSS:
+
+* `linear`
+* `ease-in`
+* `ease-out`
+* `ease-in-out`
+
+Source: [CSS Transitions, W3C](http://www.w3.org/TR/css3-transitions/#transition-timing-function-property)
+
+You can also use a `steps` keyword, which allows you to create transitions that have discrete steps, but the keywords listed above are the most useful for creating animations that feel natural.
+
+## Linear animations
+
+  <figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fJVZYp1enwR3A0xHieyv.png", alt="Linear ease animation curve.", width="640", height="600" %}
+  </figure>
+
+Animations without any kind of easing are referred to as **linear**. A graph of a linear transition looks like this:
+
+As time moves along, the value increases in equal amounts. With linear motion, things tend to feel robotic and unnatural, and this is something that users find jarring. Generally speaking, you should avoid linear motion.
+
+Whether you’re coding your animations using CSS or JavaScript, you’ll find that there is always an option for linear motion.
+
+[See a linear animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-linear.html)
+
+
+To achieve the effect above with CSS, the code would look something like this:
+
+```css
+transition: transform 500ms linear;
+```
+
+## Ease-out animations
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/J1CgJeztL7W6P7z5tvIs.png", alt="Ease-out animation curve.", width="640", height="600" %}
+</figure>
+
+
+Easing out causes the animation to start more quickly than linear ones, and it also has deceleration at the end.
+
+Easing out is typically the best for user interface work, because the fast start gives your animations a feeling of responsiveness, while still allowing for a natural slowdown at the end.
+
+[See an ease-out animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-ease-out.html)
+
+
+There are many ways to achieve an ease out effect, but the simplest is the `ease-out` keyword in CSS:
+
+```css
+transition: transform 500ms ease-out;
+```
+
+
+
+## Ease-in animations
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Uphxp5GQJId8zdmorpHe.png", alt="Ease-in animation curve.", width="640", height="600" %}
+</figure>
+
+Ease-in animations start slowly and end fast, which is the opposite of ease-out animations.
+
+This kind of animation is like a heavy stone falling, where it starts slowly and hits the ground quickly with a deadening thump.
+
+From an interaction point of view, however, ease-ins can feel a little unusual because of their abrupt end; things that move in the real world tend to decelerate rather than simply stopping suddenly. Ease-ins also have the detrimental effect of feeling sluggish when starting, which negatively impacts the perception of responsiveness in your site or app.
+
+[See an ease-in animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-ease-in.html)
+
+To use an ease-in animation, similarly to ease-out and linear animations, you can use its keyword:
+
+```css
+transition: transform 500ms ease-in;
+```
+
+
+## Ease-in-out animations
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CJejZhK53zGmYGoFCBSp.png", alt="Ease-in-out animation curve.", width="640", height="600" %}
+</figure>
+
+Easing both in and out is akin to a car accelerating and decelerating and, used judiciously, can provide a more dramatic effect than just easing out.
+
+Do not use an overly long animation duration, because of the sluggishness of an ease-in start to the animation. Something in the range of 300-500ms is typically suitable, but the exact number depends heavily on the feel of your project. That said, because of the slow start, fast middle, and slow end, there is increased contrast in the animation, which can be quite satisfying for users.
+
+[See an ease-in-out animation](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/animations/box-move-ease-in-out.html)
+
+
+To get an ease-in-out animation, you can use the `ease-in-out` CSS keyword:
+
+```css
+transition: transform 500ms ease-in-out;
+```
diff --git a/src/site/content/en/blog/the-end-of-ie/index.md b/src/site/content/en/blog/the-end-of-ie/index.md
new file mode 100644
index 00000000000..3737669477a
--- /dev/null
+++ b/src/site/content/en/blog/the-end-of-ie/index.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: "The end of Internet Explorer"
+subhead: >
+  What ending support for Internet Explorer meant for the customers and developers at Maersk.com. 
+description: >
+  What ending support for Internet Explorer meant for the customers and developers at Maersk.com.
+date: 2022-07-01
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/4TgI61hOlKOSFv7qnkRr.jpg
+alt: A sign reading End.
+authors:
+  - steveworkman
+tags:
+  - blog
+---
+
+I'm Steve Workman and I'm the Lead Engineer for [Maersk.com](https://maersk.com). Maersk is the global leader in integrated supply chain logistics, helping customers to move goods around the world for 118 years, with bookings online for over twenty years. At the start of May 2022, [@Maersk](https://twitter.com/Maersk) officially stopped supporting Internet Explorer (IE) on its customer-facing systems, off the back of Microsoft formally ending support for IE in June, 2022. This is the end of an important era of the web, and the start of a new one.
+
+I joined Maersk in 2018, and my first project was to build a new global navigation bar. It had to be fully testable, easy to deploy and update globally without downtime, be mobile-first, responsive, support multiple brands, be configurable, localised into 11 languages… and support IE9.
+
+In 2018, Windows 7, and its default browser IE9, were still very popular, with Windows 10 and IE11 only reaching critical mass in early 2020 (according to stats counter). Looking at our data, we found a significant amount of trade coming from customers using IE9, or worse, IE11 in compatibility mode. This traffic was significantly slanted towards emerging markets and in areas where Maersk's customer base was growing rapidly.
+
+If the navigation menu doesn't work, it's hard to find the login button. If login doesn't work, they can't book containers, and suddenly you have a big problem, caused by legacy browsers.
+
+To solve this we took a progressive enhancement stance with the navigation component and all future web apps. We'd make it "work" but there may be significant polyfills and restrictions to do that—for example, IE doesn't support the [Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API) API, but there are polyfills that go back to IE10 that we include for those browsers. For IE9, we coded XMLHttpRequest calls in a separate file, to be loaded only in cases where `fetch` couldn't be polyfilled.
+
+When it came time to drop IE9 support, when only a handful of customers remained, we were able to simply drop this code from our applications, with minimal effort and maximum benefit to our users on modern browsers.
+
+As Maersk's digital transformation continued, we rebuilt many parts of the site in VueJS powered micro-front-ends. Vue had a lot of features that made it future friendly, with a great preset configuration for advanced tree-shaking and bundle optimisation, to a [modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode) where two versions of the application are built—one that uses the latest ES Module syntax for evergreen browsers, and one for legacy applications that don't understand ES6 modules. This legacy version is served to browsers such as IE and is often 100KB larger in its gzipped polyfill bundle simply from the amount of features that the browser is missing.
+
+We found we could also use most of the modern CSS layout techniques such as CSS grid thanks to Microsoft having started the spec way back in IE10. With the help of [autoprefixer](https://github.com/postcss/autoprefixer), and [this CSS Tricks article](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/) to help us get really good at naming different areas of a page, we had a layout system that is lightweight, suitable for any project and extremely flexible. Still, there were compatibility issues that cost a lot of time to fix.
+
+Suddenly we're back at the cost-benefit analysis stage, but for any version of IE this time, and just like with IE9, it's a trade-off between supporting everyone, and weeks of painful development time for each project. Confident that using a modern browser is a better experience for our customers, we nudged our users away from IE when they visited the website. We found that this was successful in small amounts for active customers who had got into the habit of opening IE for their interactions with us. This message was good, but not quite enough to make the maths work.
+
+As visits from IE trailed off, Maersk decided to follow the lead of many others before them and end official support for IE, even though the numbers still say that we should be supporting it. So, why now?
+
+
+<figure>
+
+  {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/LdJ381qMIfLBNGANmtsv.png", alt="A website with a horizontal navigation bar.", width="800", height="320" %}
+  <figcaption>Maersk's homepage with the global navigation component.</figcaption>
+</figure>
+
+Simply put, the web platform has moved on, and IE11 cannot do the things we need it to do, even with a small army of polyfills. Take the navigation component—in a modern web platform world this is a custom element, with its own encapsulated styles, driven by CSS variables and container queries so it controls everything in one component. Without these pieces of the platform, the style of these components can be completely changed from the application, and styles can leak to other components or back to the application. There are polyfills that will let you emulate most of the features here, including [custom elements](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements), [ShadyCSS](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss), [ShadyDOM](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom), and the [template](https://github.com/webcomponents/polyfills/tree/master/packages/template) element.
+
+In practice, these polyfills work great for isolated components—but when combining multiple components in a complex application, IE grinds to a halt with tens of seconds of white screen while the JavaScript runtime tries to calculate the style tree for the forty-second time. In short, the user experience was severely compromised to support the browser.
+
+In the past, we had small interruptions—polyfills that might add half a second to first paint, but not much more. This was different, and these apps became unusable. Polyfills can only do so much when challenged with the complexity of the modern web platform.
+
+And you know what's happened since we dropped IE support? Very, very little. There has been no avalanche of customer support tickets, or negative feedback. Our engineers are happier and our applications have an upgrade path to Vue 3 (which [doesn't support IE11](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md) as the Proxy object can't be polyfilled) and smaller bundle sizes. Full support for CSS variables and variable fonts allows for simpler theming across brands, and the ability to use the tokens within Vue's single file components also reduces cognitive complexity, making a better developer experience.
+
+From a customer perspective, usage of IE continues to decline slowly. IE has not been shut off from the site, but as progressive enhancement turns into graceful degradation, features and applications will stop working. Customers will gain from the advances in our technology—getting a more consistent experience from the site as best practices, accessibility and design are baked into an evolving [Lit](https://lit.dev/)-based design system, with full interoperability to any framework that is around now, or in the future.
+
+I'm excited to see how the new web platform features can be used within the company—from making use of dark mode so that vessel systems are easier to use at night, to [Web Bluetooth](/bluetooth/), [WebXR](/tags/webxr/) and [PWAs](/progressive-web-apps/) so that our web apps can interact with the physical world around us in any conditions. Thank you, Internet Explorer, for many things; we're now free to catch up with the web platform.
+
+_Hero image by [Matt Botsford](https://unsplash.com/@mattbotsford)._
diff --git a/src/site/content/en/blog/third-party-origin-trials/index.md b/src/site/content/en/blog/third-party-origin-trials/index.md
new file mode 100644
index 00000000000..c2692d85db6
--- /dev/null
+++ b/src/site/content/en/blog/third-party-origin-trials/index.md
@@ -0,0 +1,91 @@
+---
+title: What are third-party origin trials?
+subhead: Origin trials are a way to test a new or experimental web platform feature. A third-party origin trial makes it possible for providers of embedded content to try out a new feature across multiple sites.
+authors:
+  - samdutton
+date: 2020-10-01
+updated: 2020-10-07
+hero: image/admin/YCJ38YPL2YlvllSTbOUO.jpg
+thumbnail: image/admin/hk8e8X9hwfIdxyw5ZHa1.jpg
+alt: Person wearing medical gloves pouring purple liquid from glass beaker into flask. Bristol Robotics Laboratory, UK.
+tags:
+  - blog
+  - origin-trials
+---
+
+[Origin trials](/origin-trials) are a way to test a new or experimental web platform
+feature.
+
+Origin trials are usually only available on a first-party basis: they only work for a single
+registered [origin](/same-site-same-origin/#origin). If a developer wants to test an
+experimental feature on other origins where their content is embedded, those origins all need to be
+registered for the origin trial, each with a unique trial token. This is not a scalable approach for
+testing scripts that are embedded across a number of sites.
+
+Third-party origin trials make it possible for providers of embedded content to try out a new
+feature across multiple sites.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3lDDKsr313oJfWuEMckG.png", alt="Diagram showing how third-party origin trials enable a single registration token to be used across multiple origins", width="800", height="400" %}
+
+Third-party origin trials don't make sense for all features. Chrome will only make the third-party
+origin trial option available for features where embedding code on third-party sites is a common use
+case.  [Getting started with Chrome's origin trials](https://developers.chrome.com/origintrials/)
+provides more general information about how to participate in Chrome origin trials.
+
+If you participate in an origin trial as a third-party provider, it will be your responsibility to
+notify and set expectations with any partners or customers whose sites you intend to include in the
+origin trial. Experimental features may cause unexpected issues and browser vendors may not be able
+to provide troubleshooting support.
+
+{% Aside %}
+Supporting third-party origin trials allows for broader participation, but also increases the
+potential for overuse or abuse of experimental features, so a "trusted tester" approach is more
+appropriate. The greater reach of third-party origin trials requires additional scrutiny and
+additional responsibility for web developers that participate as third-party providers. Requests to
+enable a third-party origin trial may be reviewed in order to avoid problematic third-party scripts
+affecting multiple sites. The Origin Trials Developer Guide explains the
+[approval process](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#18-how-can-i-enable-an-experimental-feature-as-embedded-content-on-different-domains).
+{% endAside %}
+
+Check [Chrome Platform Status](https://www.chromestatus.com/features/5691464711405568) for updates
+on progress with third-party origin trials.
+
+## How to register for a third-party origin trial
+
+1. Select a trial from the [list of active
+   trials](https://developers.chrome.com/origintrials/#/trials/active).
+1. On the trial's registration page, enable the option to request a third-party token, if
+   available.
+1. Select one of the choices for restricting usage for a third-party token:
+   1. Standard Limit: This is the usual limit of
+      [0.5% of Chrome page loads](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#3-what-happens-if-a-large-site-such-as-a-google-service-starts-depending-on-an-experimental-feature).
+   1. User Subset: A small percentage of Chrome users will always be excluded from the trial,
+      even when a valid third-party token is provided. The exclusion percentage varies (or might
+      not apply) for each trial, but is typically less than 5%.
+
+1. Click the Register button to submit your request.
+1. Your third-party token will be issued immediately, unless further review of the request is
+   required. (Depending on the trial, token requests may require review.)
+1. If review is required, you'll be notified by email when the review is complete and your
+   third-party token is ready.
+
+   <figure>
+     {% Img src="image/admin/RKAubZHAdOh7HIdQgDkQ.png", alt="Chrome origin trials registration page for the Conversion Measurement API, with third-party matching checkbox selected.", width="800", height="618" %}
+     <figcaption>Registration page for the Conversion Measurement trial.</figcaption>
+   </figure>
+
+## How to provide feedback
+
+If you're registering for a third-party origin trial and have feedback to share on the process or
+ideas on how we can improve it, please [create an
+issue](https://github.com/GoogleChrome/OriginTrials/issues/new) on the Origin Trials GitHub code
+repo.
+
+## Find out more
+
+-  [Getting started with Chrome's origin trials](/origin-trials)
+-  [Origin Trials Guide for Web Developers](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)
+-  [Chrome Platform Status](https://www.chromestatus.com/features/5691464711405568)
+
+Photo by [Louis Reed
+](https://unsplash.com/@_louisreed) on [Unsplash](https://unsplash.com/photos/JeInkKlI2Po).
diff --git a/src/site/content/en/blog/three-intro/index.md b/src/site/content/en/blog/three-intro/index.md
new file mode 100644
index 00000000000..cc49e2ec97d
--- /dev/null
+++ b/src/site/content/en/blog/three-intro/index.md
@@ -0,0 +1,271 @@
+---
+layout: post
+title: Getting started with Three.js
+authors:
+  - paullewis
+date: 2011-06-02
+tags:
+  - blog
+---
+
+## Introduction
+
+I have used [Three.js](https://github.com/mrdoob/three.js/) for some of [my experiments](http://aerotwist.com/lab/), and it does a really great job of
+abstracting away the headaches of getting going with 3D in the browser.
+With it you can create cameras, objects, lights, materials and more, and
+you have a choice of renderer, which means you can decide if you want
+your scene to be drawn using HTML 5's canvas, WebGL or SVG. And since it's
+open source you could even get involved with the project. But right now
+I'll focus on what I've learned by playing with it as an engine, and talk
+you through some of the basics.
+
+For all the awesomeness of Three.js, there can be times where you
+might struggle. Typically you will need to spend quite a large amount of time with
+the examples, reverse engineering and (in my case certainly) hunting down
+specific functionality and occasionally [asking questions via GitHub](https://github.com/mrdoob/three.js/issues). If you
+have to as questions, by the way, I've found [Mr. doob](http://mrdoob.com/) and [AlteredQualia](http://alteredqualia.com/) are
+extremely helpful!
+
+## 1. The basics
+I will assume that you have at
+least a passing knowledge of 3D, and reasonable proficiency with
+JavaScript. If you don't it may be worth learning a bit before you try
+and play with this stuff, as it can get a little confusing.
+
+In our 3D world we will have some of the following, which I will
+guide you through the process of creating:
+
+1. A scene
+1. A renderer
+1. A camera
+1. An object or two (with materials)
+
+You can, of course, do some cool things, and my hope is that you will
+go on to do that and start to experiment with 3D in your browser.
+
+## 2. Support
+
+Just a quick note on support in the browsers. Google's Chrome browser is, in my experience,
+the best browser to work with in terms of which renderers are supported, and
+the speed of the underlying JavaScript engine. Chrome supports
+Canvas, WebGL and SVG and it's blazingly fast. Firefox is a close second, with the
+advent of version 4. Its JavaScript engine does seem to be a touch slower than
+Chrome's, but again its support for the render technologies is great. Opera and Safari
+are in the process of adding WebGL support, but their current versions only support canvas.
+Internet Explorer (version 9+) support canvas rendering only, and I've not heard
+anything of Microsoft planning to add WebGL capabilities.
+
+## 3. Set the Scene
+
+I'll assume you've chosen a browser that supports all the rendering technologies,
+and that you want to render with canvas or WebGL, since they're the more standard
+choices. Canvas is more widely supported than WebGL, but it's worth noting that
+WebGL runs on your graphics card's GPU, which means that your CPU can concentrate
+on other non-rendering tasks like any physics or user interaction you're trying to
+do.
+
+Irrespective of your chosen renderer you should bear in mind that the JavaScript
+will need to optimised for performance. 3D isn't a lightweight task for a browser
+(and it's awesome that it's even possible), so be careful to understand where any
+bottlenecks are in your code, and remove them if you can!
+
+So with that said, and on the assumption [you have downloaded](https://github.com/mrdoob/three.js/archives/master) and included three.js
+in your HTML file, how do you go about setting up a scene? Like this:
+
+```js
+// set the scene size
+var WIDTH = 400,
+HEIGHT = 300;
+
+// set some camera attributes
+var VIEW_ANGLE = 45,
+ASPECT = WIDTH / HEIGHT,
+NEAR = 0.1,
+FAR = 10000;
+
+// get the DOM element to attach to
+// - assume we've got jQuery to hand
+var $container = $('#container');
+
+// create a WebGL renderer, camera
+// and a scene
+var renderer = new THREE.WebGLRenderer();
+var camera = new THREE.PerspectiveCamera(
+                VIEW_ANGLE,
+                ASPECT,
+                NEAR,
+                FAR );
+
+var scene = new THREE.Scene();
+
+// the camera starts at 0,0,0 so pull it back
+camera.position.z = 300;
+
+// start the renderer
+renderer.setSize(WIDTH, HEIGHT);
+
+// attach the render-supplied DOM element
+$container.append(renderer.domElement);
+```
+
+Not too tricky, really!
+
+## 4. Making a Mesh
+
+So we have a scene, a camera and a renderer (I opted for a WebGL one in my sample
+code) but we have nothing to actually draw. Three.js actually comes with support
+for loading a few different standard file types, which is great if you are outputting
+models from Blender, Maya, Cinema4D or anything else. To keep things simple (this
+is about getting started after all!) I'll talk about primitives. Primitives are
+geometric meshes, relatively basic ones like Spheres, Planes, Cubes and Cylinders.
+Three.js lets you create these types of primitives easily:
+
+```js
+// set up the sphere vars
+var radius = 50, segments = 16, rings = 16;
+
+// create a new mesh with sphere geometry -
+// we will cover the sphereMaterial next!
+var sphere = new THREE.Mesh(
+new THREE.SphereGeometry(radius,
+segments,
+rings),
+
+sphereMaterial);
+
+// add the sphere to the scene
+scene.add(sphere);
+```
+
+All good, but what about the material for the sphere? In the code we've used a
+variable **sphereMaterial** but we've not defined it yet. First we need
+to talk about materials in a bit more detail.
+
+
+## 5. Materials
+
+Without doubt this is one of the most useful parts of Three.js. It provides
+for you a number of common (and very handy) materials to apply to your meshes:
+
+1. 'Basic' - which just means that it renders 'unlit'
+1. Lambert
+1. Phong
+
+There are more, but again in the interests of simplicity I'll let you discover
+those for yourself. In the case of WebGL particularly these materials can be a
+life-saver. Why? Well because in WebGL you have to write shaders for everything
+being rendered. Shaders are a huge topic in themselves, but in short they are
+written in GLSL (OpenGL Shader Language), which tells the GPU
+how something should look. This means you need to mimic the maths of lighting,
+reflection and so on. It can get very complicated very quickly. Thanks to Three.js you don't have to do this
+if you don't want to because it abstracts that
+away for you. If you want to write shaders, however, you can do that too with
+a MeshShaderMaterial, so it's a flexible setup.
+
+For now, however, let's apply a lambert material to the sphere:
+
+```js
+// create the sphere's material
+var sphereMaterial = new THREE.MeshLambertMaterial(
+{
+// a gorgeous red.
+color: 0xCC0000
+});
+```
+
+It's worth pointing out as well that there are other properties you can specify
+when you create a material besides the colour, such as smoothing or environment maps.
+You should [check out the Wiki page](https://github.com/mrdoob/three.js/wiki/API-Reference) for the various properties you can set on
+the materials and, in fact, any object that the engine provides for you. Also [threejs.org](http://threejs.org/) recently sprung up, which offers a more attractive view of the API.
+
+## 6. Lights!
+
+If you were to render the scene right now you'd see a red circle. Even
+though we have a Lambert material applied there's no light in the scene so
+by default Three.js will revert to a full ambient light, which is the same
+as flat colouring. Let's fix that with a simple point of light:
+
+```js
+// create a point light
+var pointLight = new THREE.PointLight( 0xFFFFFF );
+
+// set its position
+pointLight.position.x = 10;
+pointLight.position.y = 50;
+pointLight.position.z = 130;
+
+// add to the scene
+scene.add(pointLight);
+```
+
+## 7. Render
+
+We now actually have everything set up to render, remarkably. But we actually
+need to go ahead and do just that:
+
+```js
+// draw!
+renderer.render(scene, camera);
+```
+
+You're probably going to want to render more than once, though, so if you're
+going to do a loop you should really use requestAnimationFrame; it's by
+far the smartest way of handling animation in the browser. It's not fully
+supported as yet, so I'd totally recommend that you take a look at [Paul Irish's shim](http://paulirish.com/2011/requestanimationframe-for-smart-animating/).
+
+## 8. Common Object Properties
+
+If you take time to look through the code for Three.js you'll see a lot
+of objects 'inherit' from Object3D. This is a base object which contains some very useful
+properties, such as the **position**, **rotation** and **scale** information. In particular
+our Sphere is a Mesh which inherits from Object3D, to which it adds its own properties:
+**geometry** and **materials**. Why do I mention these? Well it's unlikely you're going
+to want to just have a sphere on your screen that does nothing, and these
+properties are worth investigating as they allow you to manipulate the underlying
+details of the meshes and materials on the fly.
+
+```js
+// sphere geometry
+sphere.geometry
+
+// which contains the vertices and faces
+sphere.geometry.vertices // an array
+sphere.geometry.faces // also an array
+
+// its position
+sphere.position // has x, y and z properties
+sphere.rotation // same
+sphere.scale // ... same
+```
+
+## 9. Dirty Little Secrets
+
+I just wanted to quickly point out a quick gotcha for Three.js, which is that
+if you modify, for example, the vertices of a mesh, you will notice in your render
+loop that nothing changes. Why? Well because Three.js (as far as I can tell) caches
+the data for a mesh as something of
+an optimisation. What you actually need to do is to flag to Three.js that something
+has changed so it can recalculate whatever it needs to. You do this with the following:
+
+```js
+// changes to the vertices
+sphere.geometry.__dirtyVertices = true;
+
+// changes to the normals
+sphere.geometry.__dirtyNormals = true;
+```
+
+Again there are more, but those two I've found are the most useful. You should obviously
+only flag the things that have changed to avoid unnecessary calculations.
+
+## Conclusion
+
+Well I hope you've found this brief introduction to Three.js helpful. There's
+nothing quite like actually getting your hands dirty and trying something, and
+I can't recommend it highly enough. 3D running natively in the browser
+is a lot of fun, and using an engine like Three.js takes away a lot of the
+headaches for you and lets you get to making some seriously cool stuff.
+To help you out a bit I've [wrapped up the source code](http://aerotwist.com/lab/getting-started-with-three-js/sample.zip) in this lab article, so you can
+use that as a reference.
+If you've enjoyed this let me know via [Twitter](http://twitter.com/aerotwist), it's always good
+to say hello!
diff --git a/src/site/content/en/blog/tokopedia/index.md b/src/site/content/en/blog/tokopedia/index.md
new file mode 100644
index 00000000000..7439fdd2cc1
--- /dev/null
+++ b/src/site/content/en/blog/tokopedia/index.md
@@ -0,0 +1,157 @@
+---
+layout: post
+title: How focusing on web performance improved Tokopedia's click-through rate by 35%
+subhead: >
+  Creating a web performance dashboard and optimizing JavaScript, resources, and the
+  homepage to achieve business success.
+date: 2020-10-13
+updated: 2022-07-18
+hero: image/admin/MaUpfoZXyw4uhTEBLuV1.png
+thumbnail: image/admin/SI5jNv7NqnjkfIIXyZOa.png
+alt: An illustration of e-commerce icons next to the text "Scale on web"
+description: >
+  Creating a web performance dashboard and optimizing JavaScript, resources, and the
+  homepage to achieve business success.
+tags:
+  - blog
+  - case-study
+  - performance
+  - web-vitals
+  - scale-on-web
+---
+
+Tokopedia is one of the largest e-commerce companies in Indonesia. With 2.7M+ nationwide merchant
+networks, 18M+ product listings, and 50M+ monthly visitors, the web team knew  that investment in
+web performance was essential. By building a performance-first culture, they achieved a 35% increase
+in click-through rates (CTR) and an 8% increase in conversions (CVR).
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">35<sub>%</sub></p>
+    <p>Increase in CTR</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">8<sub>%</sub></p>
+    <p>Increase in CVR</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">4<sub>sec</sub></p>
+    <p>Improvement in TTI</p>
+  </div>
+</div>
+
+## Highlighting the opportunity
+
+The web team talked to their leadership team on the importance of investing in web performance to
+improve user experience and engagement, and also showed the impact of performance using advanced
+patterns and APIs.
+
+{% Aside %}
+Check out web.dev's [Build a performance culture](/fast/#build-a-performance-culture)
+collection for tips on how to persuade your cross-functional stakeholders to focus on website
+performance.
+{% endAside %}
+
+## The approach they used
+
+### JavaScript and resource optimization
+
+<div class="switcher">
+  <div>
+    <p>
+      Render-blocking or long-running <a href="/fast/#optimize-your-javascript">JavaScript</a>
+      is a common cause of performance issues. The team took several steps to minimize this:
+    </p>
+    <ul>
+      <li>
+        Built a script controller library to selectively load third-party scripts to optimize for
+        critical rendering path.
+      </li>
+      <li>
+        Replaced heavier libraries with lighter ones.
+      </li>
+      <li>
+        Implemented <a href="/reduce-javascript-payloads-with-code-splitting/">code splitting</a>
+        and optimized for above-the-fold content.
+      </li>
+      <li>
+        Implemented <a href="/adaptive-loading-cds-2019/">adaptive loading</a>, e.g. only
+        loading high-quality images for devices on fast networks and using lower-quality images for
+        devices on slow networks.
+      </li>
+      <li>
+        <a href="/lazy-loading-images/">Lazy-loaded</a> below-the-fold images.
+      </li>
+      <li>
+        Deferred loading of non-critical JavaScript.
+      </li>
+    </ul>
+  </div>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/G8s0LNl7BwXuNJkCsPwV.png", alt="Script controller library improved TTI by 4 seconds", width="800", height="707" %}
+  </figure>
+</div>
+
+### Homepage optimization
+
+<div class="switcher">
+  <p>
+    The team used <a href="https://svelte.dev/">Svelte</a> to build a lite version of the homepage
+    for first-time visitors, ensuring a fast website experience. This version also used a service
+    worker to cache the non-lite assets in the background.
+  </p>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gSJXd2GT8nT7Uzsth4Gg.png", alt="Reduced app JavaScript size by 88% (from 320 KB to 37 KB). Boosted Lighthouse score by 90 points. Achieved FCP of less than 1 second. 35% CTR increase. 8% CVR increase.", width="800", height="657" %}
+  </figure>
+</div>
+
+### Performance budgeting and monitoring
+
+<div class="switcher">
+  <div>
+    <p>
+      The team built a performance monitoring dashboard using
+      <a href="/lighthouse-whats-new-6.0/">Lighthouse</a>
+      and other tools to improve the quality of web pages:
+    </p>
+    <ul>
+      <li>
+        Measures network quality, infrastructure monitoring, frontend performance, and server
+        performance.
+      </li>
+      <li>
+        Uses a combination of web platform APIs (such as the
+        <a href="https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">
+          Resource Timing API
+        </a> and the
+        <code><a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing">Server-Timing</a></code>
+        header), the <a href="https://developers.google.com/speed/docs/insights/v5/get-started">
+          PageSpeed Insights (PSI) API</a>, and
+        <a href="https://developer.chrome.com/docs/crux/">
+          Chrome User Experience Report</a> data to monitor field and lab metrics.
+      </li>
+      <li>
+        Analyzes images from Lighthouse to help identify image optimization opportunities.
+      </li>
+      <li>
+        Enforces a bundle-size budget during continuous integration (CI). The CI run fails if the
+        bundle size is over budget.
+      </li>
+    </ul>
+  </div>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gObv2y7p7ozM190w61M3.png", alt="2.2 second TTI score on the homepage (Lighthouse score: 88). 1.9 second TTI score on product pages (Lighthouse score: 86).", width="800", height="1097" %}
+  </figure>
+</div>
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    Being an e-commerce business, user acquisition is at the heart of our success. We acknowledge
+    the importance of the web and thus we are passionate about investing in all
+    the tools and features that will give the best user experience to our users.
+  </p>
+  <cite>Dendi Sunardi, Engineering Manager, Web Platform, Tokopedia</cite>
+</blockquote>
+
+Check out the [Scale on web case studies](/scale-on-web) page for more success
+stories from India and Southeast Asia.
diff --git a/src/site/content/en/blog/top-cwv-2023/index.md b/src/site/content/en/blog/top-cwv-2023/index.md
new file mode 100644
index 00000000000..b6ecaba7540
--- /dev/null
+++ b/src/site/content/en/blog/top-cwv-2023/index.md
@@ -0,0 +1,212 @@
+---
+layout: post
+title: Our top Core Web Vitals recommendations for 2023
+subhead: A collection of the best practices that the Chrome DevRel team believes are the most effective ways to improve Core Web Vitals performance in 2023.
+description: A collection of best practices for optimizing websites' Core Web Vitals performance based on the state of the web in 2023.
+authors:
+  - philipwalton
+  - rviscomi
+  - tunetheweb
+  - bckenny
+  - jlwagner
+date: 2023-01-10
+#updated: 2023-01-10
+hero: image/STd8eW8CSiNp5B1bX0R6Dww2eH32/5YsYz2bJSPUpNSPHRQRx.jpg
+alt: A handheld lens in the foreground focuses a far away city skyline.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Over the years, we at Google have made a lot of recommendations to web developers on how to improve performance.
+
+While each of these recommendations, individually, may improve performance for many sites, the full set of recommendations is admittedly overwhelming and, realistically, there's no way any one person or site could follow all of them.
+
+Unless web performance is your day job, it's probably not obvious which recommendations are going to have the largest positive impact on your site. For example, you might have read that implementing critical CSS can improve load performance, and you may have also heard that it's important to optimize your images. But, if you don't have time to work on both things, how would you decide which one to pick?
+
+On the Chrome team, we've spent the last year trying to answer this question: *what are the most important recommendations we can give to developers to help them improve performance for their users?*
+
+To adequately answer this question we have to consider not just the technical merits of any given recommendation, but also human and organizational factors that influence the likelihood that developers will actually be able to adopt these recommendations. In other words, some recommendations may be hugely impactful in theory, but in reality very few sites will have the time or resources to implement them. Similarly, some recommendations are critical, but most websites are already following these practices.
+
+In short, we wanted our list of top web performance recommendations to focus on:
+
+- Recommendations we believe will have the **largest real-world impact**
+- Recommendations that are **relevant and applicable to most sites**
+- Recommendations that are **realistic for most developers to implement**
+
+Over the past year we've spent a lot of time auditing the full set of performance recommendations we make, and assessing each of them (both qualitatively and quantitatively) against the above three criteria.
+
+This post outlines our top recommendations to improve performance for each of the [Core Web Vitals](/vitals/#core-web-vitals) metrics. If you're new to web performance, or if you're trying to decide what will give you the biggest bang for your buck, we think these recommendations are the best place to start.
+
+## Largest Contentful Paint (LCP)
+
+Our first set of recommendations are for [Largest Contentful Paint (LCP)](/lcp/), which is a measure of load performance. Of the three Core Web Vitals metrics, LCP is the one that the largest number of sites struggle with—only [about half](https://datastudio.google.com/s/nw4gcbKA5o4) of all sites on the web today meet the [recommended threshold](/lcp/#what-is-a-good-lcp-score)—so let's start there.
+
+### Ensure the LCP resource is discoverable from the HTML source
+
+According to the [2022 Web Almanac](https://almanac.httparchive.org/en/2022/) by HTTP Archive, [72%](https://almanac.httparchive.org/en/2022/performance#fig-8) of mobile pages have an image as their LCP element, which means that for most sites to optimize their LCP, they'll need to ensure those images can load quickly.
+
+What may not be obvious to many developers is that the time it takes to load an image is just one part of the challenge. Another critical part is the time *before* an image starts loading, and HTTP Archive data suggests that's actually where many sites get tripped up.
+
+In fact, of the pages where the LCP element was an image, [39%](https://almanac.httparchive.org/en/2022/performance#lcp-static-discoverability) of those images had source URLs that were not [discoverable](/optimize-lcp/#optimize-when-the-resource-is-discovered) from the HTML document source. In other words, those URLs were not found in standard HTML attributes (such as `<img src="...">` or `<link rel="preload" href="...">`), which would allow the browser to quickly discover them and start loading them right away.
+
+If a page needs to wait for CSS or JavaScript files to be fully downloaded, parsed, and processed before the image can even start loading, it may already be too late.
+
+As a general rule, if your LCP element is an image, the image's URL should always be discoverable from the HTML source. Some tips to make that possible are:
+
+- **Load the image using an `<img>` element with the `src` or `srcset` attribute.** Do not use non-standard attributes like `data-src` that require JavaScript in order to render, as that will always be slower. [9%](https://almanac.httparchive.org/en/2022/performance#lcp-lazy-loading) of pages obscure their LCP image behind `data-src`.
+
+- **Prefer server-side rendering (SSR) over client-side rendering (CSR),** as SSR implies that the full page markup (including the image) is present in the HTML source. CSR solutions require JavaScript to run before the image can be discovered.
+
+- **If your image needs to be referenced from an external CSS or JS file, you can still include it in the HTML source via a `<link rel="preload">` tag.** Note that images referenced by inline styles are not discoverable by the browser's [preload scanner](/preload-scanner/), so even though they're found in the HTML source, discovery of them might still be blocked on the loading of other resources, so preloading can help in these cases.
+
+To help you understand if your LCP image has discoverability problems, Lighthouse will be releasing a [new audit](https://github.com/GoogleChrome/lighthouse/issues/13738) in version 10.0 (expected January 2023).
+
+Ensuring the LCP resource is discoverable from the HTML source can lead to measurable improvements and it also unlocks additional opportunities to prioritize the resource, which is our next recommendation.
+
+### Ensure the LCP resource is prioritized
+
+Making sure the LCP resource can be discovered from the HTML source is a critical first step in ensuring the LCP resource can start loading early, but another important step is ensuring that the loading of that resource is [prioritized](/optimize-lcp/#optimize-the-priority-the-resource-is-given) and doesn't get queued behind a bunch of other, less important resources.
+
+For example, even if your LCP image is present in the HTML source using a standard `<img>` tag, if your page includes a dozen `<script>` tags in the `<head>` of your document before that `<img>` tag, it may be a while before your image resource starts loading.
+
+The easiest way to solve this problem is to provide a hint to the browser about what resources are the highest priority by setting the new [`fetchpriority="high"`](/fetch-priority/) attribute on the `<img>` or `<link>` tag that loads your LCP image. This instructs the browser to load it earlier, rather than waiting for those scripts to complete.
+
+According to the Web Almanac, only [0.03%](https://almanac.httparchive.org/en/2022/performance#lcp-prioritization) of eligible pages are taking advantage of this new API, meaning there is plenty of opportunity for most sites on the web to improve LCP with very little work. While the `fetchpriority` attribute is currently only supported in Chromium-based browsers, this API is a progressive enhancement that other browsers just ignore, so we strongly recommend developers use it now.
+
+For non-Chromium browsers, the only way to ensure the LCP resource is prioritized above other resources is to reference it earlier in the document. Using the example again of a site with lots of `<script>` tags in the `<head>` of the document, if you wanted to ensure your LCP resource was prioritized ahead of those script resources, you could add a `<link rel="preload">` tag before any of those scripts, or you could move those scripts to below the `<img>` later in the `<body>`. While this works, it's less ergonomic than using `fetchpriority`, so we hope other browsers add support soon.
+
+Another critical aspect of prioritizing the LCP resource is to ensure you don't do anything that causes it to be **deprioritized**, such as adding the `loading="lazy"` attribute. Today, [10%](https://almanac.httparchive.org/en/2022/performance#lcp-lazy-loading) of pages actually set `loading="lazy"` on their LCP image. Beware of image optimization solutions that indiscriminately apply lazy-loading behavior to all images. If they provide a way to override that behavior, be sure to use it for the LCP image. If you're not sure which image will be the LCP, try using heuristics to pick a reasonable candidate.
+
+Deferring non-critical resources is another way to effectively boost the relative priority of the LCP resource. For example, scripts that are not powering the user interface (like analytics scripts or social widgets) can be safely postponed until after the `load` event fires, which ensures they won't compete with other critical resources (such as the LCP resource) for network bandwidth.
+
+To summarize, you should follow these best practices to ensure that the LCP resource is loaded early, and at high priority:
+
+- **Add `fetchpriority="high"` to the `<img>` tag of your LCP image.** If the LCP resource is loaded via a` <link rel="preload">` tag, fear not because you can also set `fetchpriority="high"` on that!
+- **Never set `loading="lazy"` on the `<img>` tag of your LCP image.** Doing this will deprioritize your image and delay when it starts loading.
+- **Defer non-critical resources when possible.** Either by moving them to the end of your document, using native lazy-loading for [images](/browser-level-image-lazy-loading/) or [iframes](/iframe-lazy-loading/), or loading them asynchronously via JavaScript.
+
+### Use a CDN to optimize document and resource TTFB
+
+The previous two recommendations focused on making sure your LCP resource is discovered early and prioritized so it can start loading right away. The final piece to this puzzle is making sure the initial document response arrives as quickly as possible too.
+
+The browser cannot start loading any subresources until it receives the first byte of the initial HTML document response, and the sooner that happens, the sooner everything else can start happening as well.
+
+This time is known as [Time to First Byte (TTFB)](/ttfb/), and the best way to reduce TTFB is to:
+
+- Serve your content as geographically close to your users as possible
+- Cache that content so recently-requested content can be served again quickly.
+
+The best way to do both of these things is to [use a CDN](/content-delivery-networks/). CDNs distribute your resources to edge servers, which are spread across the globe, thus limiting the distance those resources have to travel over the wire to your users. CDNs also usually have fine-grained caching controls that can be customized and optimized for your site's needs.
+
+Many developers are familiar with using a CDN to host static assets, but CDNs can serve and cache HTML documents as well, even those that are dynamically generated.
+
+According to the Web Almanac, only [29%](https://almanac.httparchive.org/en/2022/cdn#cdn-adoption) of HTML document requests were served from a CDN, which means there is significant opportunity for sites to claim additional savings.
+
+Some tips for configuring your CDNs are:
+
+- Consider increasing how long content is cached for (for example, is it actually critical that content is always fresh? Or can it be a few minutes stale?).
+- Consider maybe even caching content indefinitely, and then purging the cache if/when you make an update.
+- Explore whether you can move dynamic logic currently running on your origin server to the [edge](https://en.wikipedia.org/wiki/Edge_computing) (a feature of most modern CDNs).
+
+In general, any time you can serve content directly from the edge (avoiding a trip to your origin server) it's a performance win. And even in cases where you *do* have to make the journey all the way back to your origin server, CDNs are generally optimized to do that much more quickly, so it's a win either way.
+
+## Cumulative Layout Shift (CLS)
+
+The next set of recommendations are for [Cumulative Layout Shift (CLS)](/cls/), which is a measure of visual stability on web pages. While CLS has [improved a lot](https://datastudio.google.com/s/gFjrTptD140) on the web since 2020, about a quarter of websites still do not meet the [recommended threshold](/cls/#what-is-a-good-cls-score), so there remains a big opportunity for many sites to improve their user experience.
+
+### Set explicit sizes on any content loaded from the page
+
+[Layout shifts](/cls/#layout-shifts-in-detail) usually happen when existing content moves after other content finishes loading. Therefore, the primary way to mitigate this is to reserve any required space in advance as much as possible.
+
+The most straightforward way to fix layout shifts caused by unsized images is to **explicitly set `width` and `height` attributes** (or equivalent CSS properties). However, according to HTTP Archive, [72%](https://almanac.httparchive.org/en/2022/performance#explicit-dimensions) of pages have at least one unsized image. Without an explicit size, browsers will initially set a default height of `0px` and may cause a noticeable layout shift when the image is finally loaded and the dimensions are discovered. This represents both a huge opportunity for the collective web—and that opportunity requires much less effort than some of the other recommendations suggested in this article.
+
+It's also important to keep in mind that images are not the only contributors to CLS. Layout shifts may be caused by other content that typically loads in after the page is initially rendered, including third-party ads or embedded videos. The [`aspect-ratio`](/aspect-ratio/) property can help combat this. It's a relatively new CSS feature that allows developers to explicitly provide an aspect ratio to images as well as non-image elements. This will allow you to set a dynamic  `width` (for example based on screen size), and have the browser automatically calculate the appropriate height, in much the same way as they do for images with dimensions.
+
+Sometimes it's not possible to know the exact size of dynamic content since it is, by its very nature, dynamic. However, even if you don't know the exact size, you can still take steps to reduce the severity of layout shifts. **Setting a sensible `min-height`** is almost always better than allowing the browser to use the default height of `0px` for an empty element. Using a `min-height` is also usually an easy fix as it still allows the container to grow to the final content height if needed—it has just reduced that amount of growth from the full amount to a hopefully more tolerable level.
+
+### Ensure pages are eligible for bfcache
+
+Browsers use a navigation mechanism called the [back/forward cache](/bfcache/)—or bfcache for short—to instantly load a page from earlier or later in the browser history directly from a memory snapshot.
+
+The bfcache is a significant browser-level performance optimization, and it entirely eliminates the layout shifts during page load, which for many sites is where most of their CLS occurs. The introduction of the bfcache caused [the biggest improvement in CLS](https://twitter.com/anniesullie/status/1491399685961293828?s=20&t=k7JgTjdO21uMpeOuOofroA) that we saw in 2022.
+
+Despite this, [a significant number of websites](https://almanac.httparchive.org/en/2022/performance#bfcache-eligibility) are ineligible for the bfcache and so are missing out on this free web performance win for a significant number of navigations. Unless your page is loading sensitive information that you don't want to be restored from memory, you'll want to make sure that your pages are eligible.
+
+Site owners should check that their pages are [eligible for the bfcache](/bfcache/#optimize-your-pages-for-bfcache) and work on any reasons why they are not. Chrome already [has a bfcache tester in DevTools](/bfcache/#test-to-ensure-your-pages-are-cacheable) and this year we plan to enhance tooling here with [a new Lighthouse audit performing a similar test](https://github.com/GoogleChrome/lighthouse/issues/13960) and [an API to measure this in the field](https://chromestatus.com/feature/5684908759449600).
+
+While we have included the bfcache in the CLS section, as we saw the biggest gains there so far, the bfcache will generally also improve other Core Web Vitals too. It is one of [a number of instant navigations](https://calendar.perfplanet.com/2022/fast-is-good-instant-is-better/) available to drastically improve page navigations.
+
+### Avoid animations/transitions that use layout-inducing CSS properties
+
+Another common source of layout shifts is when elements are animated. For example, cookie banners or other notification banners that slide in from the top or bottom are often a contributor to CLS. This is particularly problematic when these banners push other content out of the way, but even when they don't, animating them can still impact CLS.
+
+While HTTP Archive data can't conclusively connect animations to layout shifts, the data does show that pages that animate any CSS property that *could* affect layout are 15% less likely to have "good" CLS than pages overall. Some properties are associated with worse CLS than others. For instance, pages that animate `margin` or `border` widths have "poor" CLS at almost twice the rate that pages overall are assessed as poor.
+
+This is perhaps not surprising, because any time you transition or animate *any* layout-inducing CSS property, it will result in [layout shifts](/cls/#layout-shifts-in-detail), and if those layout shifts are not within 500 milliseconds of a user interaction, they will impact CLS.
+
+What may be surprising to some developers is that this is true even in cases where the element is taken outside of the normal document flow. For example, absolutely positioned elements that animate `top` or `left` will cause layout shifts, even if they aren't pushing other content around. However, if instead of animating `top` or `left` you animate `transform:translateX()` or `transform:translateY()`, it won't cause the browser to update page layout and thus won't produce any layout shifts.
+
+Preferring animation of CSS properties that can be updated on the browser's compositor thread has long been [a performance best practice](/animations-guide/) because it moves that work onto the GPU and off the main thread. And in addition to it being a general performance best practice, it can also help improve CLS.
+
+As a general rule, never animate or transition any CSS property that requires the browser to update the page layout, unless you're doing it in response to a user tap or key press (though [not `hover`](/cls/#user-initiated-layout-shifts)). And whenever possible, prefer transitions and animations using the CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) property.
+
+The Lighthouse audit [Avoid non-composited animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/) will warn when a page animates potentially slow CSS properties.
+
+## First Input Delay (FID)
+
+Our last set of recommendations are for [First Input Delay (FID)](/fid/), which is a measure of a page's responsiveness to user interactions. While most sites on the web currently [score very well](https://datastudio.google.com/s/vax9YUKhRN0) on FID, we've [documented](/better-responsiveness-metric/#what-improvements-are-we-considering) shortcomings of the FID metric in the past, and we believe there is still a lot of opportunity for sites to improve their overall responsiveness to user interactions.
+
+Our new [Interaction to Next Paint (INP)](/inp/) metric is a possible successor to FID, and all of the recommendations below apply equally well to both FID and INP. Given that sites [perform worse](https://almanac.httparchive.org/en/2022/performance#inp-as-a-hypothetical-cwv-metric) on INP than FID, especially on mobile, we encourage developers to seriously consider these responsiveness recommendations, despite having "good" FID.
+
+### Avoid or break up long tasks
+
+Tasks are any piece of discrete work that the browser does. Tasks include rendering, layout, parsing, and compiling and executing scripts. When tasks become [long tasks](/long-tasks-devtools/#what-are-long-tasks)—that is, 50 milliseconds or longer—they block the main thread from being able to respond quickly to user inputs.
+
+Per the Web Almanac, there's [plenty of evidence](https://almanac.httparchive.org/en/2022/javascript#long-tasksblocking-time) to suggest that developers could be doing more to avoid or break up long tasks. While breaking up long tasks may not be as low of an effort as other recommendations in this article, it's less effort than other techniques not offered in this article.
+
+While you should always strive to do as little work as possible in JavaScript, you can help the main thread quite a bit by [breaking up long tasks into smaller ones](/optimize-long-tasks/). You can accomplish this by [yielding to the main thread](/optimize-long-tasks/#use-asyncawait-to-create-yield-points) often so that rendering updates and other user interactions can occur more quickly.
+
+Another option is to consider using APIs such as [`isInputPending`](/optimize-long-tasks/#yield-only-when-necessary) and the [Scheduler API](/optimize-long-tasks/#a-dedicated-scheduler-api). `isInputPending` is a function that returns a boolean value that indicates whether a user input is pending. If it returns `true`, you can yield to the main thread so it can handle the pending user input.
+
+The Scheduler API is a more advanced approach, which allows you to schedule work based on a system of priorities that take into account whether the work being done is user-visible or backgrounded.
+
+By breaking up long tasks, you're giving the browser more opportunities to fit in critical user-visible work, such as dealing with interactions and any resulting rendering updates.
+
+### Avoid unnecessary JavaScript
+
+There's no doubt about it: [websites are shipping more JavaScript than ever before](https://almanac.httparchive.org/en/2022/javascript#how-much-javascript-do-we-load), and the trend doesn't look like it's changing any time soon. When you ship too much JavaScript, you're creating an environment where tasks are competing for the main thread's attention. This can definitely affect your website's responsiveness, especially during that crucial startup period.
+
+This is not an unsolvable problem, however. You do have some options:
+
+- Use the [coverage tool](https://developer.chrome.com/docs/devtools/coverage/) in Chrome DevTools to find unused code in your website's resources. By reducing the size of the resources you need during startup, you can ensure your website spends less time parsing and compiling code, which leads to a smoother initial user experience.
+- Sometimes the unused code you find using the coverage tool is marked "unused" because it wasn't executed during startup, but is still necessary for some functionality in the future. This is code that you can move to a separate bundle via [code splitting](/reduce-javascript-payloads-with-code-splitting/).
+- If you're using a tag manager, be sure to [periodically check your tags to make sure they are optimized](/tag-best-practices/), or even if they're still being used. Older tags with unused code can be cleared out to make your tag manager's JavaScript smaller and more efficient.
+
+### Avoid large rendering updates
+
+JavaScript isn't the only thing that can affect your website's responsiveness. Rendering can be a type of expensive work in its own right—and when large rendering updates happen, they can interfere with your website's ability to respond to user inputs.
+
+Optimizing rendering work isn't a straightforward process, and it often depends on what you're trying to achieve. Even so, there are some things you can do to ensure that your rendering updates are reasonable, and don't sprawl into long tasks:
+
+- Avoid using [`requestAnimationFrame()`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) for doing any non-visual work. `requestAnimationFrame()` calls are handled during the rendering phase of the event loop, and when too much work is done during this step, rendering updates can be delayed. It's essential that any work you're doing with `requestAnimationFrame()` is reserved strictly for tasks that involve rendering updates.
+- [Keep your DOM size small](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). DOM size and the intensity of layout work are correlated. When the renderer has to update the layout for a very large DOM, the work required to recalculate its layout can increase significantly.
+- [Use CSS containment](https://developer.mozilla.org/docs/Web/CSS/CSS_Containment). CSS containment relies on the CSS `contain` property, which gives instructions to the browser about how to do layout work for the container the `contain` property is set on, including even isolating the scope of layout and rendering to a specific root in the DOM. It's not always an easy process, but by isolating areas containing complex layouts, you can avoid doing layout and rendering work for them that isn't necessary.
+
+## Conclusion
+
+Improving page performance can seem like a daunting task, especially given that there is a mountain of guidance across the web to consider. By focusing on these recommendations, however, you can approach the problem with focus and purpose, and hopefully move the needle for your website's Core Web Vitals.
+
+While the recommendations listed here are by no means exhaustive, we do believe—based on careful analysis of the state of the web—that these recommendations are the most effective ways that sites can improve their Core Web Vitals performance in 2023.
+
+If you'd like to go beyond the recommendations listed here, check out these optimization guides for more information:
+
+- [Optimize LCP](/optimize-lcp/)
+- [Optimize CLS](/optimize-cls/)
+- [Optimize FID](/optimize-fid/)
+- [Optimize INP](/optimize-inp/)
+
+Here's to a new year, and a faster web for all! May your sites be fast for your users in all the ways that matter most.
+
+_Photo by [Devin Avery](https://unsplash.com/@devintavery)_
diff --git a/src/site/content/en/blog/transformstream/index.md b/src/site/content/en/blog/transformstream/index.md
new file mode 100644
index 00000000000..5c3c5cf99db
--- /dev/null
+++ b/src/site/content/en/blog/transformstream/index.md
@@ -0,0 +1,67 @@
+---
+title: TransformStream is now supported cross-browser
+subhead: >
+  Now that transform streams are supported in Chrome, Safari, and Firefox, they're finally ready for
+  prime time!
+date: 2022-07-01
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/mYb1fWj36xhm6z1hQnz5.jpg
+alt: Transformer toy figurine.
+author: thomassteiner
+tags:
+  - blog
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% endAside %}
+
+The [Streams API](/streams/) allows you to break down a resource that you want to receive, send, or transform into small chunks, and then process these chunks bit by bit. Recently, Firefox 102
+[started to support `TransformStream`](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/102#apis),
+which means [`TransformStream`](https://developer.mozilla.org/docs/Web/API/TransformStream) is now
+finally usable across browsers. Transform streams allow you to pipe from a
+[`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) to a
+[`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream), executing a
+transformation on the chunks, or consume the transformed result directly,
+as shown in the following example.
+
+```js
+class UpperCaseTransformStream {
+  constructor() {
+    return new TransformStream({
+      transform(chunk, controller) {
+        controller.enqueue(chunk.toUpperCase());
+      },
+    });
+  }
+}
+
+button.addEventListener('click', async () => {
+  const response = await fetch('/script.js');
+  const readableStream = response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(new UpperCaseTransformStream());
+
+  const reader = readableStream.getReader();
+  pre.textContent = '';
+  while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      pre.textContent += value;
+  }
+});
+```
+
+## Demo
+
+{% Glitch 'transformstream-demo' %}
+
+## Browser support
+
+{% BrowserCompat 'api.TransformStream' %}
+
+## Acknowledgements
+
+Hero image by <a href="https://unsplash.com/@tetrakiss">Arseny Togulev</a> on <a href="https://unsplash.com/s/photos/transformer">Unsplash</a>
diff --git a/src/site/content/en/blog/transport-layer-security/index.md b/src/site/content/en/blog/transport-layer-security/index.md
new file mode 100644
index 00000000000..5d753cf9c0a
--- /dev/null
+++ b/src/site/content/en/blog/transport-layer-security/index.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: Confound malicious middlemen with HTTPS and HTTP Strict transport security
+authors:
+  - mikewest
+date: 2013-02-14
+tags:
+  - blog
+---
+
+Given the amount of personal data that flows through the great series of
+tubes that is the internet, encryption isn't something that we can or should
+lightly ignore. Modern browsers offer several mechanisms you can use to ensure
+that your users' data is secure while in transit: [secure cookies](#lock-the-cookie-jar)
+and [Strict Transport Security](#closing-the-open-window) are two of the
+most important. They allow you to seamlessly protect your users, upgrading
+their connections to HTTPS, and providing a guarantee that user data is never
+sent in the clear.
+
+Why should you care? Consider this:
+
+Delivering a web page over an unencrypted HTTP connection is more or less the
+same as handing an unsealed envelope to the first person you see on the street
+who looks like she's walking in the direction of the post office. If you're
+lucky, she might take it all the way there herself, or she might hand it off to
+the next person she sees who's headed the right way. That person might do the
+same, and so on.
+
+Most strangers in this impromptu chain are trustworthy, and would never peek at
+your open letter or alter it. The more times the letter changes hands, however,
+the greater the number of people with complete access to the letter you're
+sending. In the end, it's quite likely that your letter's intended recipient
+will get _something_ in the mail, but whether that something is the _same_
+something that you handed off in the first place is an open question. Maybe you
+should have sealed that envelope…
+
+## Middlemen
+
+For better or worse, huge swaths of the internet rely on the trustworthiness of
+strangers. Servers aren't directly connected to each other, but pass requests
+and responses along from router to router in an enormous game of Telephone.
+
+You can see these hops in action with traceroute. The route from my computer to
+HTML5Rocks looks something like this:
+
+```shell
+$ traceroute html5rocks.com
+traceroute to html5rocks.com (173.194.71.102), 30 hops max, 60 byte packets
+ 1  router1-lon.linode.com (212.111.33.229)  0.453 ms
+ 2  212.111.33.233 (212.111.33.233)  1.067 ms
+ 3  217.20.44.194 (217.20.44.194)  0.704 ms
+ 4  google1.lonap.net (193.203.5.136)  0.804 ms
+ 5  209.85.255.76 (209.85.255.76)  0.925 ms
+ 6  209.85.253.94 (209.85.253.94)  1.226 ms
+ 7  209.85.240.28 (209.85.240.28)  48.714 ms
+ 8  216.239.47.12 (216.239.47.12)  22.575 ms
+ 9  209.85.241.193 (209.85.241.193)  36.033 ms
+10  72.14.233.180 (72.14.233.180)  43.222 ms
+11  72.14.233.170 (72.14.233.170)  43.242 ms
+12  *
+13  lb-in-f102.1e100.net (173.194.71.102)  44.523 ms
+```
+
+13 hops isn't bad, really. However, if I'm sending requests via HTTP, then each
+of those intermediate routers has complete access to my requests and to the
+servers' responses. All the data is being transferred as unencrypted plaintext,
+and any of those intermediaries could act as a [Man in the
+Middle](http://en.wikipedia.org/wiki/Man-in-the-middle_attack), reading through
+my data, or even manipulating it in transit.
+
+Worse, this sort of interception is virtually undetectable. A maliciously
+modified HTTP response looks exactly like a valid response, as no mechanism
+exists that would enable you to ensure that the data received is _exactly _the
+data sent. If someone decides to [turn my Internet upside-down for
+laughs](http://www.ex-parrot.com/pete/upside-down-ternet.html), then I'm more or
+less out of luck.
+
+## Is this a secure line?
+
+Switching from plaintext HTTP to a secured HTTPS connection offers your best
+defense against middlemen. HTTPS connections encrypt the entire channel
+end-to-end before any data is sent, making it impossible for machines between
+you and your destination to read or modify data in transit.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/c3uAMNblwOgLbCmue6Bl.png", alt="Chrome's Omnibox gives quite a bit of detail about a connection's status.", width="578", height="390" %}
+  <figcaption>
+  Chrome's Omnibox gives quite a bit of detail about a connection's status.
+  </figcaption>
+</figure>
+
+The security HTTPS provides is rooted in the concept of public and private
+cryptographic keys. A deep discussion of the details is (happily) well beyond
+the scope of this article, but the core premise is fairly straightforward: data
+encrypted with a given public key can _only_ be decrypted with the corresponding
+private key. When a browser kicks off an HTTPS handshake to create a secure
+channel, the server provides a certificate which gives the browser all the
+information necessary in order to verify its identity by checking that the
+server is in possession of the proper private key. All communication from that
+point forward is encrypted in such a way that proves that requests are delivered
+to and responses received from the authenticated server.
+
+HTTPS, therefore, gives you some assurance that you're talking to the server you
+think you're talking to, and that no one else is listening in or twiddling bits
+on the wire. This kind of encryption is an absolute prerequisite for security on
+the web; if your application isn't currently delivered over HTTPS, it's
+vulnerable to attack. Fix it. Ars Technica has a great [guide to obtaining and
+installing a certificate (for free)](http://arstechnica.com/security/2009/12/how-to-get-set-with-a-secure-sertificate-for-free/)
+that I'd recommend you take a look at for technical details. Configuration will
+differ from provider to provider and server to server, but the certificate
+request process is the same everywhere.
+
+## Secure by default
+
+Once you've requested and installed a certificate, make sure your users benefit
+from your hard work: migrate your existing users to HTTPS connections
+transparently via the magic of HTTP redirection, and ensure that cookies are
+_only_ delivered over secure connections.
+
+### This way, please
+
+When a user visits `http://example.com/`, redirect them to
+`https://example.com/` by sending a `301 Moved
+Permanently` response with an appropriate `Location` header:
+
+```shell
+$ curl -I http://mkw.st/
+HTTP/1.1 301 Moved Permanently
+Server: nginx/1.3.7
+...
+Keep-Alive: timeout=20
+Location: https://mkw.st/
+```
+
+You can set up this sort of redirection easily in servers like Apache or Nginx.
+For example, an Nginx configuration that redirects from `http://example.com/`
+to `https://example.com/` looks like this:
+
+```apacheconf
+server {
+    listen [YOUR IP ADDRESS HERE]:80;
+    server_name example.com www.example.com;
+    location "/" {
+        rewrite ^(.*) https://www.example.com$1 permanent;
+    }
+}
+```
+
+### Lock the cookie jar
+
+Cookies give us the ability to provide users with seamless logged-in experiences
+over the stateless HTTP protocol. Data stored in cookies, including sensitive
+information like session IDs, is sent along with every request, allowing the
+server to make sense of which user it's responding to at the moment. Once we've
+ensured that users are hitting our site over HTTPS, we should also ensure that
+the sensitive data stored in cookies is only ever transferred over a secure
+connection, and never sent in the clear.
+
+Setting a cookie generally involves an HTTP header that looks something like
+this:
+
+```http
+set-Cookie: KEY=VALUE; path=/; expires=Sat, 01-Jan-2022 00:00:00 GMT
+```
+
+You can instruct the browser to restrict the cookie's use to secure sessions by
+tacking on a single keyword:
+
+```http
+Set-Cookie: KEY=VALUE; path=/; expires=Sat, 01-Jan-2022 00:00:00 GMT; secure
+```
+Cookies set with the **secure** keyword won't be sent over HTTP, ever.
+
+## Closing the open window
+
+Transparent redirection to HTTPS means that the vast majority of the time your
+users are on your site, they'll be using a secure connection. It does, however,
+leave a small window of opportunity for attack: the initial HTTP connection is
+wide open, vulnerable to [SSL
+stripping](http://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security#Applicability)
+and related attacks. Given that a man in the middle has complete access to the
+initial HTTP request, it can act as a proxy between you and the server, keeping
+you on an insecure HTTP connection regardless of the server's intentions.
+
+You can mitigate the risk of this class of attack by asking the browser to
+enforce [HTTP Strict Transport Security
+(HSTS)](http://tools.ietf.org/html/rfc6797). Sending the
+`Strict-Transport-Security` HTTP header instructs the browser to do the HTTP to
+HTTPS redirection _client-side_, without ever touching the network (this also
+happens to be great for performance; the best request is the one you don't have
+to make):
+
+```shell
+$ curl -I https://mkw.st/
+HTTP/1.1 200 OK
+Server: nginx/1.3.7
+...
+Strict-Transport-Security: max-age=2592000
+```
+
+Browsers that support this header (currently [Firefox, Chrome, and Opera: caniuse has details](http://caniuse.com/#feat=stricttransportsecurity))
+will make a note that this particular site has requested HTTPS-only access,
+meaning that regardless of how a user comes to the site, she'll be visiting over
+HTTPS. Even if she types [http://example.com/](http://example.com/) into the browser, she'll end up
+on HTTPS without ever making an HTTP connection. Better yet, if the browser
+detects an invalid certificate (potentially trying to spoof your server's
+identity), users won't be allowed to continue on via HTTP; it's all or nothing,
+which is excellent.
+
+The browser will expire the server's HSTS status after `max-age` seconds
+(about a month in this example); set this to something reasonably high.
+
+You can also ensure that all of an origin's subdomains are protected by adding
+the `includeSubDomains` directive to the header:
+
+```http
+$ curl -I https://mkw.st/
+HTTP/1.1 200 OK
+Server: nginx/1.3.7
+...
+Strict-Transport-Security: max-age=2592000
+```
+
+## Go forth, securely
+
+HTTPS the only way to be even remotely sure that data you send reaches the
+intended recipient intact. You should set up secure connections for your sites
+and applications, today. It's a fairly straightforward process, and will help
+keep your customers' data safe. Once you've gotten an encrypted channel in
+place, you should transparently redirect users to this secure connection
+regardless of how they come to your site by sending a 301 HTTP response. Then
+make sure that that all your users' sensitive session information uses _only_
+that secure connection by adding the **secure** keyword when setting cookies.
+Once you've done all that, ensure that your users never accidentally fall off
+the bus: protect them by ensuring that their browser does the right thing by
+sending a `Strict-Transport-Security` header.
+
+Setting up HTTPS isn't much work, and has huge benefits for your site and its
+users. It's well worth the effort.
+
+## Resources
+
+- [StartSSL](https://www.startssl.com/) offers free domain-verified
+  certificates. You can't beat free. Stepping up to higher grades of
+  verification is, of course, both possible and reasonably priced.
+- [SSL Server Test](https://www.ssllabs.com/ssltest/): Once you've set up HTTPS
+  for your servers, verify that you've done it right by running it through SSL
+  Labs' server test. You'll get a [nicely detailed
+  report](https://www.ssllabs.com/ssltest/analyze.html?d=mkw.st) that shows you
+  whether you're really up and running.
+- Ars Technica's recent article ["Securing your Web Server with
+  SSL/TLS"](http://arstechnica.com/information-technology/2012/11/securing-your-web-server-with-ssltls/2/)
+  is worth reading for a little more background detail about the nuts and bolts
+  of setting up a server.
+- The [HTTP Strict Transport Security specification
+  (RFC6797)](http://tools.ietf.org/html/rfc6797) is worth skimming for all the
+  technical information about the `Strict-Transport-Security` header you could
+  possibly want.
+- Once you really know what you're doing, one possible next step would be to
+  advertise that your site should only be reachable via a specific set of
+  certificates. There's some work underway at the IETF which would allow you to
+  do just that via [the `Public-Key-Pins` header](http://tools.ietf.org/html/draft-ietf-websec-key-pinning);
+  still early days, but interesting, and worth following.
diff --git a/src/site/content/en/blog/trip-meter/index.md b/src/site/content/en/blog/trip-meter/index.md
new file mode 100644
index 00000000000..9e9f95e151a
--- /dev/null
+++ b/src/site/content/en/blog/trip-meter/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: A Simple Trip Meter using the Geolocation API
+authors:
+  - mahemoff
+date: 2010-05-24
+tags:
+  - blog
+---
+
+## Introduction
+
+The [Geolocation API](http://dev.w3.org/geo/api/) lets you find out where the user is and keep tabs on them as they move around, always with the user's consent. This functionality could be used as part of user queries, e.g. to guide someone to a destination point. It could also be used for "geo-tagging" some content the user has created, e.g. to mark where a photo was taken. The API is device-agnostic; it doesn't care how the browser determines location, so long as clients can request and receive location data in a standard way. The underlying mechanism might be via GPS, wifi, or simply asking the user to enter their location manually. Since any of these lookups is going to take some time, the API is asynchronous; you pass it a callback method whenever you request a location.
+
+The example here is a trip meter showing the initial location and maintaining a display of the distance they have travelled since the page was loaded.
+
+## Step 1. Check for Compatibility
+
+{% BrowserCompat 'api.Geolocation' %}
+
+You can easily check for compatibility by testing for the presence of the geolocation object:
+
+```js
+// check for Geolocation support
+if (navigator.geolocation) {
+  console.log('Geolocation is supported!');
+}
+else {
+  console.log('Geolocation is not supported for this Browser/OS version yet.');
+}
+```
+
+## Step 2. Declare the Trip Meter HTML
+
+In this example, you're building a trip meter, so declare the following HTML:
+
+```html
+<div id="tripmeter">
+<p>
+Starting Location (lat, lon):<br/>
+<span id="startLat">???</span>°, <span id="startLon">???</span>°
+</p>
+<p>
+Current Location (lat, lon):<br/>
+<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
+</p>
+<p>
+Distance from starting location:<br/>
+<span id="distance">0</span> km
+</p>
+</div>
+```
+
+The next few steps will use the Geolocation API to populate all those empty spans.
+
+## Step 3. Determine the User's Current Location
+
+`getCurrentPosition()` will asynchronously report on the user's current location. Call it as soon as the page loads, so that it will correctly populate - and save for later - the starting position:
+
+```js
+window.onload = function() {
+var startPos;
+navigator.geolocation.getCurrentPosition(function(position) {
+startPos = position;
+document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+});
+};
+```
+
+If this is the first time an application on this domain has requested permissions, the browser will
+typically check for user consent. Depending on the browser, there may also be preferences to always
+allow - or disallow - permission lookups, in which case the confirmation process will be bypassed.
+
+Having run this code, you should now be able to see the starting position. Depending on the location
+device your browser is using, the position object might actually contain a lot more than just latitude
+and longitude, e.g. it could include an altitude or a direction. You can explore further by logging
+the position variable to the console.
+
+## Step 4. Handle Errors
+
+Unfortunately, not all location lookups are successful. Perhaps a GPS could not be located or
+the user has suddenly disabled location lookups. A second, optional, argument to `getCurrentPosition()`
+will be called in the event of an error, so you can notify the user inside the callback:
+
+```js
+window.onload = function() {
+var startPos;
+navigator.geolocation.getCurrentPosition(function(position) {
+// same as above
+}, function(error) {
+alert('Error occurred. Error code: ' + error.code);
+// error.code can be:
+//   0: unknown error
+//   1: permission denied
+//   2: position unavailable (error response from locaton provider)
+//   3: timed out
+});
+};
+```
+
+## Step 5. Monitor the User's Location
+
+The previous call to `getCurrentPosition()` was only executed once, on page load. To track changes,
+use `watchPosition()`. It will automatically notify a callback function whenever the user moves:
+
+```js
+navigator.geolocation.watchPosition(function(position) {
+document.getElementById('currentLat').innerHTML = position.coords.latitude;
+document.getElementById('currentLon').innerHTML = position.coords.longitude;
+});
+```
+
+## Step 6. Show Distance Travelled
+
+This step isn't directly related to the Geolocation API, but rounds off the demo and provides an
+example of how you might use location data. Add an extra line to the `watchPosition()` handler to populate the distance travelled:
+
+```js
+navigator.geolocation.watchPosition(function(position) {
+// same as above
+document.getElementById('distance').innerHTML =
+    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
+                    position.coords.latitude, position.coords.longitude);
+});
+```
+
+The `calculateDistance()` function performs a geometric algorithm to determine
+the distance between two co-ordinates. The Javascript implementation is adapted from [a script provided by Moveable Type](http://www.movable-type.co.uk/scripts/latlong.html)
+under a [Creative Commons license](http://creativecommons.org/licenses/by/3.0/):
+
+```js
+function calculateDistance(lat1, lon1, lat2, lon2) {
+var R = 6371; // km
+var dLat = (lat2 - lat1).toRad();
+var dLon = (lon2 - lon1).toRad();
+var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2);
+var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+var d = R * c;
+return d;
+}
+Number.prototype.toRad = function() {
+return this * Math.PI / 180;
+}
+```
diff --git a/src/site/content/en/blog/truebil-lite/chunking.png b/src/site/content/en/blog/truebil-lite/chunking.png
deleted file mode 100755
index e6d57a96419..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/chunking.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/contextual-prompts.png b/src/site/content/en/blog/truebil-lite/contextual-prompts.png
deleted file mode 100755
index 5fca06b2681..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/contextual-prompts.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/default-banners.png b/src/site/content/en/blog/truebil-lite/default-banners.png
deleted file mode 100755
index 4c2f88ffb9e..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/default-banners.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/first-meaningful-paint.png b/src/site/content/en/blog/truebil-lite/first-meaningful-paint.png
deleted file mode 100755
index 10c2e7f2603..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/first-meaningful-paint.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/grayscale.png b/src/site/content/en/blog/truebil-lite/grayscale.png
deleted file mode 100755
index 37f6d590626..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/grayscale.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/hero.png b/src/site/content/en/blog/truebil-lite/hero.png
deleted file mode 100755
index 185af679641..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/index.md b/src/site/content/en/blog/truebil-lite/index.md
index d3e4e90256b..8acc1294d0e 100644
--- a/src/site/content/en/blog/truebil-lite/index.md
+++ b/src/site/content/en/blog/truebil-lite/index.md
@@ -1,24 +1,26 @@
 ---
+layout: post
 title: How Truebil made the web its channel of growth
 subhead: A startup's story of building a best-in-class web experience.
 authors:
   - hbatra
 date: 2019-08-16
+updated: 2021-11-30
 # Add an updated date to your post if you edit in the future.
 # updated: 2019-06-27
-hero: hero.png
+hero: image/admin/fRR1RuZTZdMm95ibKQu4.png
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
-thumbnail: thumbnail.png
+thumbnail: image/admin/7aqJGgqNmVMxuRYk5DUt.png
 alt: The Truebil logo and a screenshot of the Truebil Lite web app.
 description: |
   This case study explains how the Truebil team increased conversions and
   engagement by optimizing their web app for speed and reliability.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - reliable
-  - e-commerce
+  # - reliable
+  # - e-commerce
   - case-study
   - performance
   - progressive-web-apps
@@ -32,7 +34,7 @@ Founded in 2015, Truebil is an Indian online marketplace that sells 100% certifi
 
 Truebil is a lean startup with low-frequency, high-value transactions, so it was critical to choose the right platform to prioritize and invest in.
 
-Truebil identified mobile as their target platform, and they chose the web for their first app, [Truebil Lite](https://m.truebil.com), because of the web's easy discovery and low friction. Web technology provides lower development costs, less data and memory usage, and significantly lower customer acquisition costs than building a native app. And by building a progressive web app (PWA), Truebil could get all the perks of the web _and_ the benefits of native.
+Truebil identified mobile as their target platform, and they chose the web for their first app, [Truebil Lite](https://m.truebil.com), because of the web's easy discovery and low friction. Web technology provides lower development costs, less data and memory usage, and significantly lower customer acquisition costs than building an Android/iOS app. And by building a progressive web app (PWA), Truebil could get all the perks of the web _and_ the benefits of iOS/Android.
 
 ## Solution
 
@@ -45,7 +47,7 @@ An in-house team took four months to develop Truebil Lite using React, Django, a
 
 ### Optimize for fast first load and navigations
 
-Using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to guide performance optimizations, the team adopted a performance-first culture while implementing new features. Truebil was able to significantly improve user experience by prioritizing the [First Contentful Paint](/first-contentful-paint) and [Time to Interactive (TTI)](/interactive) metrics and optimizing for fast first loads, repeat visits, and smooth navigation. The team achieved those results by setting performance budgets and using a variety of techniques to achieve them.
+Using [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to guide performance optimizations, the team adopted a performance-first culture while implementing new features. Truebil was able to significantly improve user experience by prioritizing the [First Contentful Paint](/fcp/) and [Time to Interactive (TTI)](/tti/) metrics and optimizing for fast first loads, repeat visits, and smooth navigation. The team achieved those results by setting performance budgets and using a variety of techniques to achieve them.
 
 #### Set performance budgets
 
@@ -57,48 +59,40 @@ The team set strict milestone-based budgets for TTI with the goal of keeping it
 
 The team started with the basics by using the [PRPL pattern](/apply-instant-loading-with-prpl) to precache and optimize JavaScript payloads and by moving to HTTP/2 to serve critical JavaScript bundles.
 
-To lazy-load non-critical resources, they used their framework-level lazy-loading components to load below-the-fold fragments.
+To lazy load non-critical resources, they used their framework-level lazy loading components to load below-the-fold fragments.
 
-To remove any JavaScript bundle bottlenecks, the team [reduced payloads via code splitting](/reduce-javascript-payloads-with-code-splitting). They used component- and route-based chunking to to reduce main bundle size and **improve their loading time by 44%,** with TTI falling from 6 seconds to about 5 seconds and [First Meaningful Paint (FMP)](/first-meaningful-paint) from 4.1 seconds to 3.6 seconds.
+To remove any JavaScript bundle bottlenecks, the team [reduced payloads via code splitting](/reduce-javascript-payloads-with-code-splitting). They used component- and route-based chunking to reduce main bundle size and **improve their loading time by 44%,** with TTI falling from 6 seconds to about 5 seconds and [First Meaningful Paint (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) from 4.1 seconds to 3.6 seconds.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="chunking.png" alt="Screenshots of Chrome DevTools showing Truebil Lite's build size before and after code splitting.">
-  <figcaption class="w-figcaption">
-    Impact of reducing chunk size.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/BHIhtRrQcc2Ec22vLYtT.png", alt="Screenshots of Chrome DevTools showing Truebil Lite's build size before and after code splitting.", width="800", height="350" %}
+  <figcaption>Impact of reducing chunk size.</figcaption>
 </figure>
 
 #### Inline critical CSS
 
 To further improve FMP, the team used Lighthouse to find opportunities for and validate the impact of performance optimizations. Lighthouse indicated that reducing render blocking CSS would have the biggest effect, so Truebil inlined all critical CSS and [deferred non-critical CSS](/defer-non-critical-css). This technique **reduced FMP by around 2 seconds**.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="first-meaningful-paint.png" alt="Screenshots of Chrome DevTools showing Truebil Lite's time to First Meaningful Paint before and after inlining CSS.">
-  <figcaption class="w-figcaption">
-    Impact of inlining critical CSS.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/GnQDJz27SuLuLgdvM6Q3.png", alt="Screenshots of Chrome DevTools showing Truebil Lite's time to First Meaningful Paint before and after inlining CSS.", width="800", height="496" %}
+  <figcaption>Impact of inlining critical CSS.</figcaption>
 </figure>
 
 #### Avoid multiple, costly round trips to any origin
 
-To mitigate overhead from DNS and TLS, Truebil used [`<link rel="preconnect">`](/uses-rel-preconnect) and `<link rel="dns-prefetch">`. This approach causes the browser to complete the TLS handshake as soon as possible on page load and pre-resolve cross-origin domain names, allowing for a secure, snappy user experience.
+To mitigate overhead from DNS and TLS, Truebil used [`<link rel="preconnect">`](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) and `<link rel="dns-prefetch">`. This approach causes the browser to complete the TLS handshake as soon as possible on page load and pre-resolve cross-origin domain names, allowing for a secure, snappy user experience.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="preconnect.png" alt="Screenshots of Chrome DevTools showing the effect of rel=preconnect.">
-  <figcaption class="w-figcaption">
-    Impact of adding <code>&#60;link rel=preconnect&#62;</code>.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/e1taLW99INISJAsEP0xe.png", alt="Screenshots of Chrome DevTools showing the effect of rel=preconnect.", width="800", height="350" %}
+  <figcaption>Impact of adding <code>&#60;link rel=preconnect&#62;</code>.</figcaption>
 </figure>
 
 #### Dynamically prefetch the next page
 
 By analyzing their data, the team identified the most common user journeys that they could optimize for. In these cases, the app dynamically downloads the next page resource by using `<link rel=prefetch>` to ensure smooth navigation for users. While the team manually identifies the links to prefetch, they use webpack to bundle the JS for those links.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="prefetch.png" alt="Screenshots of the Truebil Lit app and Chrome DevTools showing that network requests aren't needed on common navigations because the assets have already been prefetched.">
-  <figcaption class="w-figcaption">
-    The effect of prefetching assets for common user journeys.
-  </figcaption>
+<figure>
+  {% Img src="image/admin/fuxD2hQlNcTPKUHMQpN2.png", alt="Screenshots of the Truebil Lit app and Chrome DevTools showing that network requests aren't needed on common navigations because the assets have already been prefetched.", width="800", height="1006" %}
+  <figcaption>The effect of prefetching assets for common user journeys.</figcaption>
 </figure>
 
 #### Optimize images and fonts
@@ -131,9 +125,9 @@ Even though a large part of Truebil's content is highly dynamic—cars can be ad
 
 Using [service workers](/service-workers-cache-storage/), the team was able to cache both static data and the dynamic data that a user has already interacted with so that the user can view it offline. To make sure users know that content might change when they come back online, the team changed the UI to grayscale to indicate offline mode. Browsing product pages is a critical part of the Truebil user journey. Users who have visited the PWA at least once can browse listings and product pages that they have visited before but won't be able to see any updates to the listing or the product.
 
-<figure class="w-figure">
-  <img src="grayscale.png" alt="A screenshot of the Truebil Lite app in offline mode.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/XMJug442wdtUbxe86r2h.png", alt="A screenshot of the Truebil Lite app in offline mode.", width="800", height="384" %}
+  <figcaption>
     Truebil Lite in offline mode.
   </figcaption>
 </figure>
@@ -162,20 +156,20 @@ To ensure that their users weren't spammed and to increase the probability that
 
 The team decided to show an installation banner when a user completes a task or is on high-traffic pages but idle (that is, not taking an action, such as scrolling or filling out a form). This approach allowed them to avoid interrupting the user's activity.
 
-![Screenshots of Truebil Lite's installation banner.](default-banners.png)
+{% Img src="image/admin/geEMVQf4YjnkVr9HPRzt.png", alt="Screenshots of Truebil Lite's installation banner.", width="800", height="549" %}
 
 #### Contextual prompts for mature users
 
 For users who had interacted with the app for a while, the team used highly contextual custom messages to show the value of installing the app to the home screen:
 
-![Screenshots of Truebil Lite's contextual installation prompts for mature users.](contextual-prompts.png)
+{% Img src="image/admin/uPxqbyldE0kNurRPsk2S.png", alt="Screenshots of Truebil Lite's contextual installation prompts for mature users.", width="800", height="514" %}
 
 #### A custom banner for time-based prompts
 
 Finally, the team built in a non-intrusive banner with a notification-like design that's triggered at specific events, such as opening a listing page or after the user has spent a set amount of time spent in the app:
 
-<figure class="w-figure">
-  <img src="notification.png" alt="A screenshot of Truebil Lite's time-based installation prompt banner.">
+<figure>
+  {% Img src="image/admin/5UN2g9g7NWq85CMVoRYf.png", alt="A screenshot of Truebil Lite's time-based installation prompt banner.", width="452", height="868" %}
 </figure>
 
 Because of these improvements, Truebil's conversion and engagement rates have grown significantly with **26% longer user sessions** and **61% more conversions**, which is significant for their business given the high transaction value of each conversion.
@@ -185,21 +179,21 @@ Because of these improvements, Truebil's conversion and engagement rates have gr
   <cite>Rakesh Raman, Co-Founder and Chief of Product & Data Science at Truebil</cite>
 </blockquote>
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">44<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Improvement in loading time</p>
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">44<sub>%</sub></p>
+    <p>Improvement in loading time</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">26<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Longer user sessions</p>
+  <div class="stats__item">
+    <p class="stats__figure">26<sub>%</sub></p>
+    <p>Longer user sessions</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">61<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Increase in conversions</p>
+  <div class="stats__item">
+    <p class="stats__figure">61<sub>%</sub></p>
+    <p>Increase in conversions</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">80<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Increase in revenue-to-marketing spend</p>
+  <div class="stats__item">
+    <p class="stats__figure">80<sub>%</sub></p>
+    <p>Increase in revenue-to-marketing spend</p>
   </div>
 </div>
diff --git a/src/site/content/en/blog/truebil-lite/notification.png b/src/site/content/en/blog/truebil-lite/notification.png
deleted file mode 100755
index dc2a32caa90..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/notification.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/preconnect.png b/src/site/content/en/blog/truebil-lite/preconnect.png
deleted file mode 100755
index f699b18b09f..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/preconnect.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/prefetch.png b/src/site/content/en/blog/truebil-lite/prefetch.png
deleted file mode 100755
index 47e8de3d00c..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/prefetch.png and /dev/null differ
diff --git a/src/site/content/en/blog/truebil-lite/thumbnail.png b/src/site/content/en/blog/truebil-lite/thumbnail.png
deleted file mode 100644
index b3ae1a0c0c6..00000000000
Binary files a/src/site/content/en/blog/truebil-lite/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/trust-tokens/hero.jpg b/src/site/content/en/blog/trust-tokens/hero.jpg
deleted file mode 100644
index 4ed0c61c753..00000000000
Binary files a/src/site/content/en/blog/trust-tokens/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/trust-tokens/index.md b/src/site/content/en/blog/trust-tokens/index.md
index 36d8040d5bb..bdd86c40bd9 100644
--- a/src/site/content/en/blog/trust-tokens/index.md
+++ b/src/site/content/en/blog/trust-tokens/index.md
@@ -1,80 +1,117 @@
 ---
 title: Getting started with Trust Tokens
-subhead: Trust Tokens is a new API to help combat fraud and distinguish bots from real humans, without passive tracking.
+subhead: Trust Tokens is a new API to enable a website to convey a limited amount of information from one browsing context to another (for example, across sites) to help combat fraud, without passive tracking.
 authors:
   - samdutton
 date: 2020-06-22
-updated: 2020-06-23
-hero: hero.jpg
-thumbnail: thumbnail.jpg
+updated: 2021-12-10
+hero: image/admin/okxi2ttRG3h1Z4F3cylI.jpg
+thumbnail: image/admin/cTo0l2opcfNxg1TEjxSg.jpg
 alt: Black and white photograph of hand holding token
 tags:
   - blog
   - privacy
   - security
+feedback:
+  - api
 ---
 
-{% YouTube 'WnCKlNE52tc' %}
+{% Aside %}
+
+This API [has been renamed](https://developer.chrome.com/blog/rename-trust-tokens/) Private State Tokens.
+
+The developer.chrome.com article [Private State Tokens](https://developer.chrome.com/docs/privacy-sandbox/trust-tokens/) provides implementation status updates, and explains how to engage and share feedback.
+
+{% endAside %}
+
+
+{% Aside  'caution' %}
+**⚠️ Warning: you may need to update your app!**
+
+**TrustTokenV3** is a collection of backwards-incompatible changes to Chromium's Trust Tokens
+implementation. The changes arrived in Chrome 92, which reached Chrome Stable towards the end of
+July 2021.
+
+If you haven't already, you will need to update existing applications
+[testing the API](https://www.chromestatus.com/feature/5078049450098688).
+
+Find out more: [What's TrustTokenV3?](https://bit.ly/what-is-trusttokenv3).
+{% endAside %}
+
+<br><br>
+
+{% YouTube
+  id='bXB1Iwq6Eq4'
+%}
 
 ## Summary
 
-Trust tokens enable an origin to issue cryptographic tokens to a user it trusts.
-The tokens are stored by the user's browser. The browser can then use the tokens 
-in other contexts to evaluate the user's authenticity.   
+Trust tokens enable an origin to issue cryptographic tokens to a user it trusts. The tokens are
+stored by the user's browser. The browser can then use the tokens in other contexts to evaluate the
+user's authenticity.
 
-The Trust Token API allows trust of a user in one context (such as gmail.com) to
-be conveyed to another context (such as an ad running on nytimes.com) without
+The Trust Token API enables trust of a user in one context to be conveyed to another context without
 identifying the user or linking the two identities.
 
+You can try out the API with our [demo](https://trust-token-demo.glitch.me), and
+[inspect tokens](https://developer.chrome.com/blog/new-in-devtools-89/#trust-token) in the
+Chrome DevTools **Network** and **Application** tabs.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/krrI292OLd6awb4dxkN0.jpg",
+  alt="Screenshot showing Trust Tokens in the Chrome DevTools Network tab.", width="800", height="584" %}
+  <figcaption>Trust Tokens in the Chrome DevTools <b>Network</b> tab.</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cwR9JdoVo1M4VDovP2oM.jpg", alt="Screenshot showing Trust Tokens in the Chrome DevTools Application tab.", width="800", height="584" %}
+  <figcaption>Trust Tokens in the Chrome DevTools <b>Application</b> tab.</figcaption>
+</figure>
+
 {% Aside %}
-The Privacy Sandbox is a series of proposals to satisfy third-party use cases
-without third-party cookies or other tracking mechanisms. See
-[Digging into the Privacy Sandbox](http://web.dev/digging-into-the-privacy-sandbox)
+The Privacy Sandbox is a series of proposals to satisfy third-party use cases without third-party
+cookies or other tracking mechanisms. See [Digging into the Privacy Sandbox](/digging-into-the-privacy-sandbox)
 for an overview of all the proposals.
 
-**This proposal needs your feedback!** If you have comments, please [create an
-issue](https://github.com/WICG/trust-token-api/issues/new) on the [Trust Token
-explainer](https://github.com/WICG/trust-token-api) repository.
+**This proposal needs your feedback!** If you have comments, please [create an issue](https://github.com/WICG/trust-token-api/issues/new)
+on the [Trust Token explainer](https://github.com/WICG/trust-token-api) repository.
 {% endAside %}
 
 ## Why do we need Trust Tokens?
 
-The web needs ways to establish trust signals which show that a user is who they
-say they are, and not a bot pretending to be a human, or a malicious third-party
-defrauding a real person or service. Fraud protection is particularly important
-for advertisers, ad providers, and CDNs.   
-  
-Unfortunately, many existing mechanisms to gauge and propagate
-trustworthiness—to work out if an interaction with a site is from a real human, 
-for example—take advantage of techniques that can also be used for
-fingerprinting.
-
-{% Aside 'key-term' %}  
-**Fingerprinting** enables sites to identify and track individual users by
-getting data about their device, operating system, and browser setup (such as
-language preferences,
-[user agent](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent), and available fonts) or changes in device state. This may be done on the server
-by checking request headers or on the client with JavaScript.
-
-Fingerprinting uses mechanisms that users aren't aware of and can't control.
-Sites such as [Panopticlick](https://panopticlick.eff.org/) and
-[amiunique.org](https://amiunique.org/) show how fingerprint data can be
-combined to identify you as an individual.  
-{% endAside %} 
-
-The API must preserve privacy, enabling trust to be propagated across sites 
-without individual user tracking.
+The web needs ways to establish trust signals which show that a user is who they say they are, and
+not a bot pretending to be a human, or a malicious third-party defrauding a real person or service.
+Fraud protection is particularly important for advertisers, ad providers, and CDNs.
+
+Unfortunately, many existing mechanisms to gauge and propagate trustworthiness—to work out if an
+interaction with a site is from a real human, for example—take advantage of techniques that can also
+be used for fingerprinting.
+
+{% Aside 'key-term' %}
+**Fingerprinting** enables sites to identify and track individual users by getting data about their
+device, operating system, and browser setup (such as language preferences,
+[user agent](https://developer.mozilla.org/docs/Web/API/NavigatorID/userAgent), and available
+fonts) or changes in device state. This may be done on the server by checking request headers or on
+the client with JavaScript.
+
+Fingerprinting uses mechanisms that users aren't aware of and can't control. Sites such as
+[Panopticlick](https://panopticlick.eff.org/) and [amiunique.org](https://amiunique.org/) show how
+fingerprint data can be combined to identify you as an individual.
+{% endAside %}
+
+The API must preserve privacy, enabling trust to be propagated across sites without individual user
+tracking.
 
 ## What's in the Trust Tokens proposal?
 
-The web relies on building trust signals to detect fraud and spamming. One way
-to do this is by tracking browsing with global, cross-site per-user identifiers.
-For a privacy-preserving API, that's not acceptable.  
+The web relies on building trust signals to detect fraud and spamming. One way to do this is by
+tracking browsing with global, cross-site per-user identifiers. For a privacy-preserving API, that's
+not acceptable.
 
 From the proposal
-[**explainer**](https://github.com/WICG/trust-token-api#overview): 
-  
-<blockquote>  
+[**explainer**](https://github.com/WICG/trust-token-api#overview):
+
+<blockquote>
 <p>This API proposes a new per-origin storage area for "Privacy Pass" style
 cryptographic tokens, which are accessible in third party contexts. These
 tokens are non-personalized and cannot be used to track users, but are
@@ -85,98 +122,109 @@ context where the user would otherwise be unknown or less trusted.
 Crucially, the tokens are indistinguishable from one another, preventing
 websites from tracking users through them.</p>
 <p>We further propose an extension mechanism for the browser to sign outgoing
-  requests with keys bound to a particular token redemption.</p>  
+  requests with keys bound to a particular token redemption.</p>
 </blockquote>
 
 
 ## Sample API usage
 
 The following is adapted from
-[sample code in the API explainer](https://github.com/WICG/trust-token-api#sample-api-usage).  
-  
-Imagine that a user visits a news website (`publisher.example`) which embeds 
-advertising from a third party ad network (`foo.example`). The user has 
-previously used a social media site that issues trust tokens (`issuer.example`).
+[sample code in the API explainer](https://github.com/WICG/trust-token-api#sample-api-usage).
+
+{% Aside %}
+The code in this post uses updated syntax available since Chrome 88.
+{% endAside %}
+
+Imagine that a user visits a news website (`publisher.example`) which embeds advertising from a
+third party ad network (`foo.example`). The user has previously used a social media site that issues
+trust tokens (`issuer.example`).
 
 The sequence below shows how trust tokens work.
 
-1.&nbsp;The user visits `issuer.example`.
+**1.**&nbsp;The user visits `issuer.example` and performs actions that lead the site to believe they
+are a real human, such as account activity, or passing a CAPTCHA challenge.
 
-2.&nbsp;`issuer.example` verifies the user is a human, and runs the following
-JavaScript:  
+**2.**&nbsp;`issuer.example` verifies the user is a human, and runs the following JavaScript to
+issue a trust token to the user's browser:
 
 ```js
-fetch('https://issuer.example/issue', {  
-  trustToken: {  
-    type: 'token-request'  
+fetch('https://issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request',
+    issuer: 'https://issuer.example'
   }
-});
+}).then(...)
 ```
 
-3.&nbsp;The user's browser stores the trust tokens associated with `issuer.example`.
+**3.**&nbsp;The user's browser stores the trust token, associating it with `issuer.example`.
+
+**4.**&nbsp;Some time later, the user visits `publisher.example`.
+
+**5.**&nbsp;`publisher.example` wants to know if the user is a real human. `publisher.example` trusts
+`issuer.example`, so they check if the user's browser has valid tokens from that origin:
+
+```js
+document.hasTrustToken('https://issuer.example');
+```
 
-4.&nbsp;Some time later, the user visits `publisher.example`.
+**6.**&nbsp;If this returns a promise that resolves to `true`, that means the user has tokens from
+`issuer.example`, so `publisher.example` can attempt to redeem a token:
 
-5.&nbsp;`publisher.example` wants to know if the user is a human, so they ask 
-`issuer.example` by running the following JavaScript:  
-  
- ```js
- fetch('https://issuer.example/redeem', {
-   trustToken: {
-     type: 'srr-token-redemption'
-   }  
- });    
+```js
+fetch('https://issuer.example/trust-token', {
+trustToken: {
+  type: 'token-redemption',
+  issuer: 'https://issuer.example',
+  refreshPolicy: {none, refresh}
+}
+}).then(...)
 ```
 
 With this code:
 
- 1. The browser requests a redemption.
- 1. The issuer returns a Signed Redemption Record (SRR) which indicates
-    that at some point they issued a valid token to this browser.
- 1. When the promise returned resolves, the SRR can be used in
-    subsequent resource requests.
-
-6.&nbsp;`publisher.example` can then run the following JavaScript in a top-level
-document:  
-
-```js  
-fetch('foo.example/get-content', {  
-  trustToken: {  
-    type: 'send-srr',   
-    issuer: 'https://issuer.example'  
-  }  
-});  
+ 1. The redeemer `publisher.example` requests a redemption.
+ 1. If the redemption is successful, the issuer `issuer.example` returns a redemption record which
+ indicates that at some point they issued a valid token to this browser.
+
+ **7.**&nbsp;Once the promise returned by `fetch()` has resolved, the redemption record can be used
+ in subsequent resource requests:
+
+```js
+fetch('https://foo.example/get-content', {
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['https://issuer.example', ...]
+  }
+});
 ```
 
 With this code:
 
-1. `foo.example`  receives the SRR, and now has some indication that
+1. Redemption records are included as a request header `Sec-Redemption-Record`.
+1. `foo.example` receives the redemption record and can parse the record to determine whether
   `issuer.example` thought this user was a human.
 1. `foo.example` responds accordingly.
 
 {% Details %}
-{% DetailsSummary %}  
-How can a website work out whether to trust you?  
-{% endDetailsSummary %}  
-You might have shopping history with an ecommerce site, checkins on a location
-platform, or account history at a bank. Issuers might also look at other factors
-such as how long you've had an account, or other interactions (such as CAPTCHAs
-or form submission) that increase the issuer's trust in the likelihood that
-you're a real human.  
+{% DetailsSummary %}
+How can a website work out whether to trust you?
+{% endDetailsSummary %}
+You might have shopping history with an e-commerce site, check-ins on a location platform, or account
+history at a bank. Issuers might also look at other factors such as how long you've had an account,
+or other interactions (such as CAPTCHAs or form submission) that increase the issuer's trust in the
+likelihood that you're a real human.
 {% endDetails %}
 
-### Trust token issuance
 
-If the user is deemed to be trustworthy by a trust token issuer such as
-`issuer.example`, the issuer can fetch trust tokens for the user by making a
-`fetch()` request with a new `trustToken` parameter:
+### Trust token issuance
 
+If the user is deemed to be trustworthy by a trust token issuer such as `issuer.example`, the issuer
+can fetch trust tokens for the user by making a `fetch()` request with a `trustToken` parameter:
 
 ```js
-fetch('issuer.example/.well-known/trust-token', {
+fetch('issuer.example/trust-token', {
   trustToken: {
-    type: 'token-request',
-    issuer: <issuer>
+    type: 'token-request'
   }
 }).then(...)
 ```
@@ -185,92 +233,87 @@ This invokes an extension of the [Privacy Pass](https://privacypass.github.io/)
 protocol using a [new cryptographic primitive](https://eprint.iacr.org/2020/072.pdf):
 
 1. Generate a set of pseudo-random numbers known as _nonces_.
- 
-1. Blind the nonces (encode them so the issuer can't view their contents) and attach them to the request in a `Sec-Trust-Token` header.
- 
+
+1. Blind the nonces (encode them so the issuer can't view their contents) and attach them to the
+request in a `Sec-Trust-Token` header.
+
 1. Send a POST request to the endpoint provided.
- 
-The endpoint responds with blinded tokens (signatures on the blind nonces), then the tokens are unblinded and stored internally together with the associated nonces by the browser as trust tokens.
 
+The endpoint responds with [blinded tokens](https://en.wikipedia.org/wiki/Blind_signature)
+(signatures on the blind nonces), then the tokens are unblinded and stored internally together with
+the associated nonces by the browser as trust tokens.
 
-### Trust token redemption
 
-A publisher site (such as `publisher.example` in the example above) can check if
-there are trust tokens available for the user:
+### Trust token redemption
 
+A publisher site (such as `publisher.example` in the example above) can check if there are trust
+tokens available for the user:
 
 ```js
-const userHasTokens = await document.hasTrustToken(<issuer>);
+const userHasTokens = await document.hasTrustToken('issuer.example/trust-token');
 ````
 
-If there are tokens available, the publisher site can redeem them to get a
-signed redemption record:
+If there are tokens available, the publisher site can redeem them to get a redemption record:
 
 ```js
-fetch('issuer.example/.well-known/trust-token', {
+fetch('issuer.example/trust-token', {
   ...
   trustToken: {
-    type: 'srr-token-redemption',
-    issuer: 'issuer.example',
+    type: 'token-redemption',
     refreshPolicy: 'none'
   }
   ...
 }).then(...)
 ```
 
-Then the publisher site can send the SRR to requests it makes using the
-following API:
- 
+The publisher can include redemption records in requests that require a trust token—such as
+posting a comment, liking a page, or voting in a poll—by using a `fetch()` call like
+the following:
+
 ```js
-fetch('<url>', {
+fetch('https://foo.example/post-comment', {
   ...
   trustToken: {
-    type: 'send-srr',
-    issuer: <issuer>,
+    type: 'send-redemption-record',
+    issuers: ['issuer.example/trust-token', ...]
   }
   ...
 }).then(...);
 ```
 
-The publisher should include the SRR in requests that will require a trust
-token, such as posting a comment, liking a page, or voting in a poll.  
-  
-{% Aside %}  
-Trust tokens are only accessible through options to Fetch, XHR, and the HTML
-`<iframe>` element: they cannot be accessed directly.  
-{% endAside%}  
+Redemption records are included as a `Sec-Redemption-Record` request header.
+
+{% Aside %}
+Trust tokens are only accessible through options to Fetch, XHR, and the HTML `<iframe>` element:
+they cannot be accessed directly.
+{% endAside%}
 
 ### Privacy considerations
 
-Tokens are designed to be 'unlinkable'. An issuer can learn aggregate
-information about which sites its users visit, but can't link issuance with
-redemption: when a user redeems a token, the issuer can't tell the token apart
-from other tokens it has created. However, trust tokens currently do not exist
-in a vacuum: there are other ways an issuer could currently—in theory—join a
-user's identity across sites, such as third-party cookies and covert tracking
-techniques. It is important for sites to understand this ecosystem transition as
-they plan their support. This is a general aspect of the transition for many
-Privacy Sandbox APIs, so not discussed further here.
+Tokens are designed to be 'unlinkable'. An issuer can learn aggregate information about which sites
+its users visit, but can't link issuance with redemption: when a user redeems a token, the issuer
+can't tell the token apart from other tokens it has created. However, trust tokens currently do not
+exist in a vacuum: there are other ways an issuer could currently—in theory—join a user's identity
+across sites, such as third-party cookies and covert tracking techniques. It is important for sites
+to understand this ecosystem transition as they plan their support. This is a general aspect of the
+transition for many Privacy Sandbox APIs, so not discussed further here.
 
 ### Security considerations
 
-**Trust token exhaustion:** a malicious site could deliberately deplete a user's
-supply of tokens from a particular issuer. There are several mitigations against
-this kind of attack, such as enabling issuers to provide many tokens at once, so
-users have an adequate supply of ensuring browsers only ever redeem one token
-per top-level page view.  
-  
-**Double-spend prevention:** malware might attempt to access all of a user's
-trust tokens. However, tokens will run out over time, since every redemption is
-sent to the same token issuer, which can verify that each token is used only
-once. To mitigate risk, issuers could also sign fewer tokens.
+**Trust token exhaustion:** a malicious site could deliberately deplete a user's supply of tokens
+from a particular issuer. There are several mitigations against this kind of attack, such as
+enabling issuers to provide many tokens at once, so users have an adequate supply of ensuring
+browsers only ever redeem one token per top-level page view.
+
+**Double-spend prevention:** malware might attempt to access all of a user's trust tokens. However,
+tokens will run out over time, since every redemption is sent to the same token issuer, which can
+verify that each token is used only once. To mitigate risk, issuers could also sign fewer tokens.
 
 ### Request mechanisms
 
-It might be possible to allow for sending SRRs outside of `fetch()`, for example
-with navigation requests. Sites might also be able to include issuer data in
-HTTP response headers to enable token redemption in parallel with page
-loading.
+It might be possible to allow for sending redemption records outside of `fetch()`, for example with
+navigation requests. Sites might also be able to include issuer data in HTTP response headers to
+enable token redemption in parallel with page loading.
 
 **To reiterate: this proposal needs your feedback!** If you have comments, please
 [create an issue](https://github.com/WICG/trust-token-api/issues/new) on the
@@ -278,15 +321,18 @@ Trust Token [explainer repository](https://github.com/WICG/trust-token-api).
 
 ## Find out more
 
--  [Digging in to the Privacy Sandbox](https://web.dev/digging-into-the-privacy-sandbox/)
+-  [Trust Tokens demo](https://trust-token-demo.glitch.me)
+-  [Getting started with Chrome's origin trials](https://developer.chrome.com/blog/origin-trials/)
+-  [Digging in to the Privacy Sandbox](/digging-into-the-privacy-sandbox/)
 -  [Trust Token API Explainer](https://github.com/WICG/trust-token-api)
 -  [Chromium Projects: Trust Token API](https://sites.google.com/a/chromium.org/dev/updates/trust-token)
 -  [Intent to Implement: Trust Token API](https://groups.google.com/a/chromium.org/g/blink-dev/c/X9sF2uLe9rA/m/1xV5KEn2DgAJ)
+-  [Chrome Platform Status](https://www.chromestatus.com/feature/5078049450098688)
 -  [Privacy Pass](https://privacypass.github.io/)
 -  [Extensions of Privacy Pass](https://eprint.iacr.org/2020/072.pdf)
 
 ---
 
-Thanks to Kayce Basques, David Van Cleve, Steven Valdez, Tancrède Lepoint and Marshall Vale for their help with writing and reviewing this post.
+Thanks to all those who helped write and review this post.
 
 Photo by [ZSun Fu](https://unsplash.com/photos/b4D7FKAghoE) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
diff --git a/src/site/content/en/blog/trust-tokens/thumbnail.jpg b/src/site/content/en/blog/trust-tokens/thumbnail.jpg
deleted file mode 100644
index 6e62be717ee..00000000000
Binary files a/src/site/content/en/blog/trust-tokens/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/trusted-types/hero.png b/src/site/content/en/blog/trusted-types/hero.png
deleted file mode 100644
index 820445e4b17..00000000000
Binary files a/src/site/content/en/blog/trusted-types/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/trusted-types/index.md b/src/site/content/en/blog/trusted-types/index.md
index bb50da0a1fa..68472dc28c1 100644
--- a/src/site/content/en/blog/trusted-types/index.md
+++ b/src/site/content/en/blog/trusted-types/index.md
@@ -6,7 +6,7 @@ authors:
 date: 2020-03-25
 # Add an updated date to your post if you edit in the future.
 # updated: 2019-06-27
-hero: hero.png
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -18,7 +18,9 @@ description: |
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - security
-  - trusted-types
+  # - trusted-types
+feedback:
+  - api
 ---
 
 ## Why should you care?
@@ -30,7 +32,7 @@ give you the tools to write, security
 review, and maintain applications free of DOM XSS vulnerabilities by making the dangerous web API
 functions secure by default. Trusted Types are supported in Chrome 83, and
 a [polyfill](https://github.com/w3c/webappsec-trusted-types#polyfill) is available
-for other browsers. See [Browser compatibility](https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#Browser_compatibility) for up-to-date
+for other browsers. See [Browser compatibility](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility) for up-to-date
 cross-browser support information.
 
 {% Aside 'key-term' %}
@@ -64,15 +66,15 @@ You might already recognize some of them, as browsers vendors and [web framework
 these features for security reasons.
 
   * **Script manipulation**:<br>
-    [`<script src>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src) and setting text content of [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) elements.
+    [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) and setting text content of [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script) elements.
   * **Generating HTML from a string**:<br>
 
-    [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML), [`outerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML),[`insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML),
-    [`<iframe> srcdoc`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc),
-    [`document.write`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write), [`document.writeln`](https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln),
-    and [`DOMParser.parseFromString`](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser.parseFromString)
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML), [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML),[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML),
+    [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc),
+    [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write), [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln),
+    and [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
   * **Executing plugin content**:<br>
-    [`<embed src>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed#attr-src), [`<object data>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#attr-data) and [`<object codebase>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#attr-codebase)
+    [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src), [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) and [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
   * **Runtime JavaScript code compilation**: <br>
     `eval`, `setTimeout`, `setInterval`, `new Function()`
 
@@ -119,7 +121,7 @@ You can deploy a report collector
 or use one of the commercial equivalents.
 You can also debug the violations in the browser:
 ```js
-window.addEventListener('securitypolicyviolation',
+document.addEventListener('securitypolicyviolation',
     console.error.bind(console));
 ```
 
@@ -135,7 +137,7 @@ Now all the violations are reported to `//my-csp-endpoint.example`,
 but the website continues to work. The next section explains how `//my-csp-endpoint.example` works.
 
 {% Aside 'caution' %}
-Trusted Types are only available in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)
+Trusted Types are only available in a [secure context](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)
 like HTTPS and `localhost`.
 {% endAside %}
 
@@ -206,7 +208,7 @@ sanitize an HTML snippet, removing XSS payloads.
 
 ```javascript
 import DOMPurify from 'dompurify';
-el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true);
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
 ```
 
 DOMPurify [supports Trusted Types](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types) and will return sanitized
@@ -224,7 +226,7 @@ Sometimes it's not possible to remove the functionality, and there is no
 library to sanitize the value and create a Trusted Type for you.
 In those cases, create a Trusted Type object yourself.
 
-For that, first create a [policy](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr). Policies are factories for Trusted Types that enforce certain security rules on their input:
+For that, first create a [policy](https://w3c.github.io/trusted-types/dist/spec/#policies-hdr). Policies are factories for Trusted Types that enforce certain security rules on their input:
 
 ```javascript/2
 if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
@@ -253,12 +255,12 @@ wraps the return value in a correct type - in this case `TrustedHTML`.
 
 #### Use a default policy
 Sometimes you can't change the offending code. For example, this is the case if you're loading a third-party library from a CDN. In that case, use a
-[default policy](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr):
+[default policy](https://w3c.github.io/trusted-types/dist/spec/#default-policy-hdr):
 
 ```javascript
 if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
   trustedTypes.createPolicy('default', {
-    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true});
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
   });
 }
 ```
@@ -283,11 +285,11 @@ Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp
 
 Voila! Now, no matter how complex your web application is, the only thing that
 can introduce a DOM XSS vulnerability, is the code in one of your policies - and
-you can lock that down even more by [limiting policy creation](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive).
+you can lock that down even more by [limiting policy creation](https://w3c.github.io/trusted-types/dist/spec//#trusted-types-csp-directive).
 
 ## Further reading
 
 - [Trusted Types GitHub](https://github.com/w3c/webappsec-trusted-types)
-- [W3C specification draft](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [W3C specification draft](https://w3c.github.io/trusted-types/dist/spec/)
 - [FAQ](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
 - [Integrations](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/en/blog/twitter/index.md b/src/site/content/en/blog/twitter/index.md
new file mode 100644
index 00000000000..907c3c36061
--- /dev/null
+++ b/src/site/content/en/blog/twitter/index.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
+description: | 
+  The Twitter Lite Progressive Web App combines the best of the modern web and native features to deliver a more robust experience, with explicit goals for instant loading, user engagement and lower data consumption 
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - case-study
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7FJZDBnszKhWl7pRtwJu.jpg", alt="Twitter detail", width="800", height="800" %}
+</figure>
+
+Twitter is a platform to find out what’s happening in the world. It has 328
+million monthly active users around the world who consume, create and share
+information. With over 80% of users on mobile, Twitter wanted their mobile web
+experience to be faster, more reliable, and more engaging.  The Twitter Lite
+Progressive Web App combines the best of the modern web and native features. It
+became the default mobile web experience for all users globally in April 2017.
+Twitter developed Twitter Lite to deliver a more robust experience, with
+explicit goals for instant loading, user engagement and lower data consumption.
+
+- 65% increase in pages per session
+- 75% increase in Tweets sent
+- 20% decrease in bounce rate
+
+{% Blockquote 'Nicolas Gallagher, Engineering Lead for Twitter Lite' %}
+Twitter Lite is now the fastest, least expensive, and most reliable way
+to use Twitter. The web app rivals the performance of our native apps but
+requires less than 3% of the device storage space compared to Twitter
+for Android.
+{% endBlockquote %}
+
+## Increasing engagement with “Add to Homescreen” prompt and web push notifications
+
+Twitter’s website reaches millions of users, but it’s traditionally been
+difficult to re-engage users on the mobile web. After implementing the “Add to
+Homescreen” prompt asking users to save Twitter Lite to their homescreens,
+Twitter has seen 250,000 unique daily users launch Twitter Lite from the
+homescreen 4 times a day on average.
+
+Twitter implemented web push notifications that work the same as those from
+native apps and arrive even if the user’s browser is closed. The implementation
+is delivering over 10M push notifications a day.
+
+## Lowering data consumption
+
+Twitter Lite uses less data by default, serving smaller media resources and
+relying on cached data as much as possible. The PWA also optimizes images to
+help reduce data consumption by as much as 70% as users scroll through their
+timelines. The
+[data saver mode](https://blog.twitter.com/2017/introducing-twitter-lite)
+helps users preserve even more mobile data by giving them control over when
+Twitter Lite downloads media assets.
+
+Reaching a broad set of users is important for Twitter, including those in
+emerging markets where lower download speeds and less powerful mobile devices
+are common. Twitter Lite helps reach this audience more effectively by making
+Twitter faster and easier to use in low-bandwidth conditions.
+
+Twitter Lite users benefit from data consumption savings; the PWA is only 600KB
+over the wire vs. 23.5MB of downloaded data needed to install the native Android
+app.
+
+## Nearly instant loading with service worker scripts
+
+First loads for Twitter Lite clock in at under 5 seconds over 3G networks on
+most devices, and subsequent loads are nearly instant, even on flaky networks.
+The app streams the initial HTML response to the browser, sending instructions
+to preload critical resources. Resources are broken up into granular pieces so
+that the initial load only requires the resources needed for the visible screen.
+A service worker script caches additional resources, enabling fast navigation to
+other screens.
+
+Mobile accounts for over 80% of Twitter’s usage, with many Twitter Lite users
+reaching the site via 2G or 3G networks. A fast user experience on first load
+and subsequent views is essential for enabling users to view and create Tweets
+as quickly as possible. Twitter rolled out intelligent loading strategies like
+service workers and parts of the [PRPL (Push, Render, Pre-cache and Lazy-
+load)](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) pattern to dramatically
+reduce load times for both activities. Repeat visits are nearly instant thanks
+to service worker caching of current views, feed updates, notifications,
+messages and settings. Twitter Lite users experience a 50% reduction in 99th
+percentile time-to-interactive latency and logged in users have a 30% reduction
+in average load time.
+
+Twitter adopted an incremental approach to leveraging service workers for
+offline and network resilience, starting with a custom offline page presented
+whenever a network connection wasn’t available. Next, they transitioned to
+offline caching of static resources like CSS, images and JavaScript bundles to
+speed up repeat visits. Lastly, they added support for offline caching of their
+[application shell](https://developers.google.com/web/fundamentals/architecture/app-shell). The result:
+Twitter Lite boots up in under 3 seconds when a user returns to the PWA, even on
+slow mobile devices or networks.
+ 
+### Further Reading
+- [How we built Twitter Lite](https://blog.twitter.com/2017/how-we-built-twitter-lite)
+- [Twitter Lite and high-performance React Progressive Web Apps at scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)
diff --git a/src/site/content/en/blog/ui-fund/index.md b/src/site/content/en/blog/ui-fund/index.md
new file mode 100644
index 00000000000..db24a4043a2
--- /dev/null
+++ b/src/site/content/en/blog/ui-fund/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: 'The UI fund'
+authors: 
+  - nsull
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/Shi0nSvYtbZLu9s4jSDW.png
+alt: 'Designcember'
+thumbnail: image/kheDArv5csY6rvQUJDbWRscckLr1/QfroGbNObyuqpqGeza5z.png
+subhead: >
+  Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
+description: >
+  Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
+date: 2021-12-06
+tags:
+  - blog
+  - css
+---
+
+Chrome has launched a fund to support the UI ecosystem. We designed this fund to provide grants to people who work on design tools, CSS, and HTML.
+
+All of us who work on the web regularly benefit from the work of people who create specifications, tools, demos, tutorials, and polyfills. Many of these resources are side projects, made available and supported free of charge. They exist because someone saw a need, created something to meet it, then shared it with the rest of the ecosystem.
+
+We want to recognize and help support this work and invest in the CSS ecosystem. We're excited to enable people to spend time on these projects and create more value for the web.
+
+## What type of projects can apply?
+
+The following ideas are examples of the types of projects that would be a candidate for this fund. However, we are keen to hear your ideas.
+
+### Open UI work
+
+Design research projects, for example researching the date range component or another component you care about, in order to create a [new proposal](https://open-ui.org/proposal-guide).
+
+### Specification writers
+
+We are keen to help more people become involved in writing specifications. In addition to funding we can help you to make the right contacts and work with experienced specification editors.
+
+### Accessibility work and research
+
+Work on Open UI and new CSS layout techniques are raising accessibility issues that need research and testing before they can be resolved. For example, researching the impact of a pattern such as toggle.
+
+We'd be interested in projects that involved the accessibility community in ensuring that new proposals are underpinned by solid research with real users.
+
+### Polyfills, tools, and demos
+
+Are you working on a polyfill that will enable the use of an API across more browsers? Are you involved in tooling such as Sass and PostCSS? Do you have an idea for an advanced demo that would clearly show the possibilities of some newer or experimental APIs? How about a plugin for Figma? All of these things and more could be a great candidate for a grant.
+
+### Solving problems in key areas
+
+There are a number of key places where developers struggle to realize their UI goals. Some of these are:
+
+- Scrolling
+- Form elements
+- Toggle
+- Mobile layout and UI elements
+- Layout in general-for example regions
+
+Projects around these key areas would be of interest. The shape of that project is up to you. It could be a pure research project, design ideas, specification development. We can provide funding and also connections for people with solid ideas in these spaces.
+
+## Who can apply?
+
+You need an Open Collective account. You can apply for a project you own or nominate a project that you think deserves support. If you don't own the project, you'll need a thumbs up from one of the core maintainers that they would accept a change such as the one you are proposing. 
+
+## How will the submissions be judged?
+
+The project is owned by [Sarah Drasner](http://twitter.com/sarah_edo) and [Nicole Sullivan](http://twitter.com/stubbornella), in order to make decisions on the suitability of a project they will work with specialists in that area to assess the idea. They will be assessing ideas based on the potential impact of the work. Therefore, when making your proposal demonstrate how it will have an impact on standards, tooling, design, or accessibility. 
+
+## How do I apply?
+
+This is a rolling fund, therefore there is no deadline for submissions. 
+
+Create a GitHub issue or document describing the project, if one doesn't already exist. If your proposal is an addition to an existing project, then an issue will allow you to demonstrate interest from the core maintainers.
+
+For new ideas and research proposals, create a document that explains the project, your interest and experience in the area, and the impact that you believe this project can have on the CSS ecosystem.
+
+[Complete the form](https://forms.gle/7knaw5FvFtGVEthV7) to make your initial application.
+
+After applying we'll be in touch, perhaps initially to discuss the idea and find out more before making a decision. We are so excited to read your ideas, and to help you be a part of improving the CSS ecosystem.
+
+_Image credit [#WOCinTech](https://wocintechchat.com)._
diff --git a/src/site/content/en/blog/understanding-cookies/index.md b/src/site/content/en/blog/understanding-cookies/index.md
new file mode 100644
index 00000000000..cfd814a43e2
--- /dev/null
+++ b/src/site/content/en/blog/understanding-cookies/index.md
@@ -0,0 +1,171 @@
+---
+title: Understanding cookies
+subhead:
+  A cookie is a chunk of data stored in the browser that is used to persist state and other information a website needs to execute its features.
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2023-03-20
+hero: image/admin/V0dgwWTA61NTc55CAhSD.jpg
+description: |
+  Learn about how cookies work and what are first-party and third-party cookies.
+tags:
+  - blog
+  - cookies
+feedback:
+  - api
+---
+
+{% Aside %}
+This article is part of a series on the `SameSite` cookie attribute changes that includes:
+
+<ul>
+<li><a href="/samesite-cookies-explained/">SameSite cookies explained</a></li>
+<li><a href="/samesite-cookie-recipes/">SameSite cookies recipes</a></li>
+<li><a href="/schemeful-samesite/">Schemeful Same-Site</a></li>
+</ul>
+{% endAside %}
+
+
+A cookie is a small file that websites store on their users’ machine, the information it stores travels back and forth between the browser and the website.
+
+Each cookie is a key-value pair along with a number of attributes that control when and where that cookie is used. These attributes are used to set things like expiration dates or indicating the cookie should only be sent over HTTPS. You can set a cookie in an HTTP header or through JavaScript interface. 
+
+Cookies are one of the methods available for adding persistent state to web sites. Over the years their capabilities have grown and evolved, but left the platform with some problematic legacy issues. To address this, browsers (including Chrome, Firefox, and Edge) are changing their behavior to enforce more privacy-preserving defaults.
+
+{% Aside %}
+Learn more about [Chrome’s effort to protect people's privacy online](https://developer.chrome.com/docs/privacy-sandbox/) and give companies and developers tools to build thriving digital businesses. 
+{% endAside %}
+
+## Cookies in action
+
+Say you have a blog where you want to display a "What's new" promo to your
+users. Users can dismiss the promo and then they won't see it again for a while.
+You can store that preference in a cookie, set it to expire in a month
+(2,600,000 seconds), and only send it over HTTPS. That header would look like
+this:
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Three cookies being sent to a browser from a server in a response", width="800", height="276", style="max-width: 35vw" %}
+  <figcaption>
+    Servers set cookies using the <code>Set-Cookie</code> header.
+  </figcaption>
+</figure>
+
+When your reader views a page that meets those requirements—they're on a
+secure connection and the cookie is less than a month old—their browser
+will send this header in its request:
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Three cookies being sent from a browser to a server in a request", width="800", height="165", style="max-width: 35vw" %}
+  <figcaption>
+    Your browser sends cookies back in the <code>Cookie</code> header.
+  </figcaption>
+</figure>
+
+You can also add and read the cookies available to that site in JavaScript using
+`document.cookie`. Making an assignment to `document.cookie` will create or
+override a cookie with that key. For example, you can try the following in your
+browser's JavaScript console:
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+Reading `document.cookie` will output all the cookies accessible in the current
+context, with each cookie separated by a semicolon:
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript accessing cookies within the browser", width="600", height="382", style="max-width: 35vw" %}
+  <figcaption>
+    JavaScript can access cookies using <code>document.cookie</code>.
+  </figcaption>
+</figure>
+
+If you try this on a selection of popular sites you will notice that most of
+them set significantly more than just three cookies. In most cases, those
+cookies are sent on every single request to that domain, which has a number of
+implications. Upload bandwidth is often more restricted than download for your
+users, so that overhead on all outbound requests is adding a delay on your time
+to first byte. Be conservative in the number and size of cookies you set. Make
+use of the `Max-Age` attribute to help ensure that cookies don't hang around
+longer than needed.
+
+## What are first-party and third-party cookies?
+
+If you go back to that same selection of sites you were looking at before, you
+probably noticed that there were cookies present for a variety of domains, not
+just the one you were currently visiting. Cookies that match the domain of the
+current site, that is, what's displayed in the browser's address bar, are referred
+to as **first-party** cookies. Similarly, cookies from domains other than the
+current site are referred to as **third-party** cookies. This isn't an absolute
+label but is relative to the user's context; the same cookie can be either
+first-party or third-party depending on which site the user is on at the time.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Three cookies being sent to a browser from different requests on the same page", width="800", height="346", style="max-width: 35vw" %}
+  <figcaption>
+    Cookies may come from a variety of different domains on one page.
+  </figcaption>
+</figure>
+
+Continuing the example from above, let's say one of your blog posts has a
+picture of a particularly amazing cat in it and it's hosted at
+`/blog/img/amazing-cat.png`. Because it's such an amazing image, another person
+uses it directly on their site. If a visitor has been to your blog and has the
+`promo_shown` cookie, then when they view `amazing-cat.png` on the other
+person's site that cookie **will be sent** in that request for the image. This
+isn't particularly useful for anyone since `promo_shown` isn't used for anything
+on this other person's site, it's just adding overhead to the request.
+
+If that's an unintended effect, why would you want to do this? It's this
+mechanism that allows sites to maintain state when they are being used in a
+third-party context. For example, if you embed a YouTube video on your site then
+visitors will see a "Watch later" option in the player. If your visitor is
+already signed in to YouTube, that session is being made available in the
+embedded player by a third-party cookie—meaning that "Watch later" button will
+just save the video in one go rather than prompting them to sign in or having to
+navigate them away from your page and back over to YouTube.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="The same cookie being sent in three different contexts", width="800", height="433", style="max-width: 35vw" %}
+  <figcaption>
+    A cookie in a third-party context is sent when visiting different pages.
+  </figcaption>
+</figure>
+
+One of the cultural properties of the web is that it's tended to be open by
+default. This is part of what has made it possible for so many people to create
+their own content and apps there. However, this has also brought a number of
+security and privacy concerns. Cross-site request forgery (CSRF) attacks rely on
+the fact that cookies are attached to any request to a given origin, no matter
+who initiates the request. For example, if you visit `evil.example` then it can
+trigger requests to `your-blog.example`, and your browser will happily attach
+the associated cookies. If your blog isn't careful with how it validates those
+requests then `evil.example` could trigger actions like deleting posts or adding
+their own content.
+
+Users are also becoming more aware of how cookies can be used to track their
+activity across multiple sites. However until now there hasn't been a way to
+explicitly state your intent with the cookie. Your `promo_shown` cookie should
+only be sent in a first-party context, whereas a session cookie for a widget
+meant to be embedded on other sites is intentionally there for providing the
+signed-in state in a third-party context.
+
+You can explicitly state your intent with a cookie by setting the appropriate [SameSite attribute](/samesite-cookies-explained).
+
+To identify your first-party cookies and set appropriate attributes, check out [First-party cookie recipes](/first-party-cookie-recipes/).
diff --git a/src/site/content/en/blog/understanding-css/index.md b/src/site/content/en/blog/understanding-css/index.md
new file mode 100644
index 00000000000..703bd1ef537
--- /dev/null
+++ b/src/site/content/en/blog/understanding-css/index.md
@@ -0,0 +1,293 @@
+---
+title: Understanding CSS filter effects
+authors:
+  - alexdanilo
+date: 2012-05-25
+tags:
+  - blog
+---
+
+## Introduction
+
+Filters are a powerful tool that web authors can use to achieve interesting visual effects. In this article we’ll cover the history of filter effects, what they do and how to use them. We’ll cover examples of all the predefined filters defined for CSS with some examples. We’ll also cover performance considerations for using them on desktop and mobile devices since knowing the speed impact of filters is important for a good user experience. Finally we’ll review the current state of implementation in modern browsers.
+
+## The past, present and future of filter effects
+
+Filter effects originated as part of the Scalable Vector Graphics (SVG) specification. They were created to apply a number of different pixel based image effects to a vector drawing. Over time as browser vendors added SVG capabilities into their browsers, the usefulness of filters became evident. Robert O’Callahan from Mozilla came up with
+[the brilliant idea](http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html) of using SVG filters through the application of CSS to ‘normal’ HTML content. Robert prototyped an early version that showed how powerful the combination of filters and CSS styling could be. The CSS and SVG working groups in the W3C decided to harmonize the use of filters for both HTML and SVG via CSS styling, and thus the ‘filter’ property for CSS was born. Right now a joint task force of people working on CSS and SVG is doing a ton of work to make filters universally useful. You can find the current specification for all this stuff [here](http://dev.w3.org/fxtf/filters).
+
+## A new life for the ‘filter’ CSS property
+
+Deja Vu sometimes strikes a web developer when seeing ‘filter’ in CSS styles. This is due to the fact that old versions of Internet Explorer had a ‘filter’ property exposed via CSS to perform some platform specific functionality. This has been [deprecated](http://www.fred.net/dhark/demos/css/css_filter_examples.html)
+in favor of the standard ‘filter’ property which is now part of CSS3. So when you see ‘filter’ out in the wild on some old web pages, there’s no need to be confused. The new ‘filter’ property is where all the action is, and new versions of IE are implementing it just the same as all modern browsers.
+
+## How filters work
+
+So what does a filter do exactly? The easiest way to think of a filter is as a post processing step that does something magical after all your page content has been laid out and drawn.
+
+When a browser loads a web page it needs to apply styles, perform layout and then render the page so there's something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image. One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter.
+
+This of course means that there's time consumed when drawing a page with filters on it, but using them properly will have minimal impact on the speed of your site.
+
+Also, just as you can stack a number of filters in front of each other on your camera lens, you can apply an arbitrary number of filters one after the other to achieve all sorts of effects.
+
+## Filters defined using SVG and CSS
+
+Since filters originally came from SVG there are different ways to define and use them. SVG itself has a `<filter>` element that wraps up definitions of various filter effects using XML syntax. The set of filters defined by CSS take advantage of the same graphics model, but they are much simpler definitions that are easy to use in a style sheet.
+
+Most of the CSS filters can be expressed in terms of SVG filters, and CSS also allows you to reference a filter specified in SVG if you want. The CSS filter designers have taken great pains to make the application of a filter easier for web authors, and so this article will just cover the filters available directly from CSS, ignoring the SVG definitions for the time being.
+
+## How to apply a CSS filter
+
+{% Aside %}
+The description and examples below use the official W3C syntax that will be available in all modern browsers eventually. To use filters now, you need to use the vendor prefixed version of the ‘filter’ property. But don’t worry there’s an easy way to handle that at the end of this article.
+{% endAside %}
+
+Using filters from CSS is done by using the ‘filter’ property applied to any visible element on your web page. For a very simple example you could write something like
+
+```css
+div { { % mixin filter: grayscale(100%); % } }
+```
+
+and that would make the content inside all `<div>`elements on the page turn gray. Great for making your page look like a TV image from the 1940s.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/52cn4DVhxFyI0Lf1vijP.jpg", alt="Original image.", width="400", height="300" %}
+    <figcaption>Original image.</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qRYtPG7YHOUXmRzdHoql.jpg", alt="Grayscale filtered image.", width="400", height="300" %}
+    <figcaption>Grayscale filtered image.</figcaption>
+</figure>
+
+Most filters take some form of parameter to control how much filtering is done. So for example if you wanted to style your content to be half way between the original color and a grayscale version you’d do it like this:
+
+```css
+div { { % mixin filter: grayscale(50%); % } }
+```
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KFNkg4zlAfOKvO6nIRcZ.jpg", alt="Original image above but 50% gray filtered.", width="400", height="300" %}
+    <figcaption>Original image above but 50% gray filtered.</figcaption>
+</figure>
+
+If you want to apply a number of different filters one after another, it’s easy - just place them in order in your CSS like so:
+
+```css
+div { { % mixin filter: grayscale(100%) sepia(100%); % } }
+```
+
+That example will first make all the original color grayscale and then apply a sepia effect, and would end up looking like:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8afK306QeaZheetc1aIn.jpg", alt="Sepia effect", width="400", height="300" %}
+</figure>
+
+With the flexibility available for applying filters one after the other, all sorts of effects can be achieved - it’s totally up to your imagination to experiment with creating amazing results.
+
+## What filters effects are available using CSS
+
+So the original SVG filter mechanism is both powerful but at the same time can be daunting to use. Because of that, CSS introduces a bunch of standard filter effects that make using them really easy.
+
+Let’s take a look at each of them and see what they do.
+
+grayscale(amount)
+: This converts color in our input image to a shade of gray. The ‘amount’ applied controls how much gray conversion is applied. If it’s 100% then everything will be a shade of gray, if it’s 0% the colors are unchanged. You can use a floating point number here if you prefer it over percentages, i.e. 0 works the same as 0% whilst 1.0 works the same as 100%.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FuY5ANyW0IHgBTQeYNn8.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EKzLnmlLwnk8LZsuTbS7.jpg", alt="grayscale(100%)", width="512", height="512" %}
+    <figcaption>grayscale(100%)</figcaption>
+</figure>
+
+sepia(amount)
+: This gives the colors passed in a sepia tinge like in old photographs. The ‘amount’ applied works in the same way as for the ‘grayscale’ filter - namely 100% makes all the colors completely sepia toned and smaller values allow the effect to be applied in smaller proportions.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VZlx4SxF4FEq2hAIiqLE.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jxM5zsr5uXQKUwBOYy0T.jpg", alt="sepia(100%)", width="512", height="512" %}
+    <figcaption>sepia(100%)</figcaption>
+</figure>
+
+saturate(amount)
+: This applies a color saturation effect to the colors which makes them look more vivid. It’s a cool effect that can make photos look like posters or cartoons.This effect also allows you to use a value greater than 100% to really emphasize the saturation. Definitely an effect that can make things look pretty funky!
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/322WihbKQ14yPtzCAS5O.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ILgiZ7EPYhDoRpCqkTF4.jpg", alt="saturate(10)", width="512", height="512" %}
+    <figcaption>saturate(10)</figcaption>
+</figure>
+{% Aside %}
+In Chrome version 19, the saturate() function takes an integer (without the percentage sign) instead of the decimal or percentage, as per the W3C spec. Not to worry, this known bug will be fixed.
+{% endAside %}
+
+hue-rotate(angle)
+: This one is a bit of a color geek effect that can be used for interesting results. What it does is shift the colors around to make an input image look completely different. If you can imagine a color spectrum going from red to violet around a <a href="http://colorschemedesigner.com/">color wheel</a>, then this effect takes the original color on the wheel as input and rotates it by the ‘angle’ parameter to produce the color on the wheel to which it rotated as the output color value. So all the colors in the image are shifted by the same 'angle' on the wheel. This is of course a simplification of what it does, but hopefully close enough that it makes sense.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pRWQh1MyJxr8vfvcGYCl.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WLTmZG4w3scZR1NIxojH.jpg", alt="hue-rotate(90deg)", width="512", height="512" %}
+    <figcaption>hue-rotate(90deg)</figcaption>
+</figure>
+
+invert(amount)
+: This effect flips the colors - so that if the ‘amount’ applied is 100% the output looks like a photo negative back from the old film days of cameras! Just like before, using values smaller than 100% will progressively apply the invert effect.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AWUdr5qU0Rcj20rXrr1g.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5ItjUJLW8Mkb0fdCIeAI.jpg", alt="invert(100%)", width="512", height="512" %}
+    <figcaption>invert(100%)</figcaption>
+</figure>
+
+opacity(amount)
+: If you want the content being filtered to look semi-transparent, this is the one for you. The ‘amount’ value defines how opaque the output will be. So a value of 100% is completely opaque so the output will be exactly the same as the input. As the value drops below 100% the output image will become less opaque (more transparent) and you’ll see less and less of it. This of course means if it overlaps something else on the page, the stuff underneath will start to become visible. An ‘amount’ of 0% means it will completely disappear - but note, you can still get events like mouse clicks etc. to happen on completely transparent objects so this is handy if you want to create clickable areas without displaying anything.
+
+This works the same as the ‘opacity’ property you already know. In general the CSS ‘opacity’ property isn’t hardware accelerated, but some browsers that implement filters using hardware acceleration will accelerate the filter version of opacity for much better performance.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/e9uUj0kePvbX6hmOCASL.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/4dMzoGDHY5rxyJc2p59N.jpg", alt="opacity(50%)", width="512", height="512" %}
+    <figcaption>opacity(50%)</figcaption>
+</figure>
+
+brightness(amount)
+: This is just like the brightness control on your TV. It adjusts the colors between completely black and the original color in proportion to the ‘amount’ parameter. If you set this one to 0% you’ll see nothing but black, but as the value goes up towards 100% you see more and more of the original image brightening up, until you hit 100% where it’s the same as the input image. Of course you can just keep going - so setting something like 200% will make the image twice as bright as the original - great for adjusting those low light shots!
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FuY5ANyW0IHgBTQeYNn8.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ATJ62CPM2OfkWnmzAfSa.jpg", alt="brightness(140%)", width="512", height="512" %}
+    <figcaption>brightness(140%)</figcaption>
+</figure>
+
+contrast(amount)
+: More controls from your TV set! This will adjust the difference between the darkest and lightest parts of the input image. If you use 0% you end up with black just like with ‘brightness’, so not too interesting. However as you increase the value towards 100% the difference in darkness changes until you hit 100% and it’s the original image again. You can also go beyond 100% for this effect too, which increases the difference between light and dark colors even more.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/utpM4PER8NOB7U7xh7GL.jpg", alt="Original", width="256", height="256" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZDlhsG7yEXfidAuGRBO2.jpg", alt="contrast(200%)", width="258", height="256" %}
+    <figcaption>contrast(200%)</figcaption>
+</figure>
+
+blur(radius)
+: If you want a soft edge for your content, you can add a blur. This one looks like the classic Vaseline on a sheet of glass look that used to be a popular movie making technique. It smudges all the colors together and spreads their effect out - kind of like when your eyes are out of focus. The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AWUdr5qU0Rcj20rXrr1g.jpg", alt="Original", width="512", height="512" %}
+    <figcaption>Original</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/znBK7cC7kgdpN3gmlejA.jpg", alt="blur(10px)", width="529", height="532" %}
+    <figcaption>blur(10px)</figcaption>
+</figure>
+
+drop-shadow(shadow)
+: It’s so nice to be able to make your content look like it’s outside in the sun with a shadow on the ground behind it, and that of course is what ‘drop-shadow’ does. It takes a snapshot of the image, makes it a single color, blurs it, then offsets the result a bit so it looks like a shadow of the original content. The ‘shadow’ parameter passed in is a bit more complicated than just a single value. It is a series of values separated by a space - and some values are optional too! The ‘shadow’ values control where the shadow is placed, how much blur is applied, the color of the shadow, etc. For full details of what the ‘shadow’ values do, the [CSS3 Backgrounds](http://www.w3.org/TR/css3-background/#the-box-shadow) specification defines ‘box-shadow’ in great detail. A few examples below should give you a decent idea of what the various possibilities are.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5350PABIKdjx78Pu2Ovq.jpg", alt="drop-shadow(16px 16px 20px black", width="542", height="542" %}
+    <figcaption>drop-shadow(16px 16px 20px black)</figcaption>
+</figure>
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5WTAF7ckSULYc6rJSVqu.jpg", alt="drop-shadow(10px -16px 30px purple)", width="542", height="552" %}
+    <figcaption>drop-shadow(10px -16px 30px purple)</figcaption>
+</figure>
+
+This is another filter operation that is similar to existing CSS functionality available via the ‘box-shadow’ property. Using the filter approach means that it may get hardware accelerated by some browsers as we described for the ‘opacity’ operation above.
+
+url referencing SVG filters
+: Since filters originated as part of SVG, it’s only logical that you should be able to style your content using an SVG filter. This is easy with the current ‘filter’ property proposal. All filters in SVG are defined with an ‘id’ attribute that can be used to reference the filter effect. So, to use any SVG filter from CSS all you need to do is reference it using the ‘url’ syntax.
+
+For example, the SVG markup for a filter could be something like:
+
+```html
+<filter id="foo">...</filter>
+```
+
+then from CSS you could do something as simple as:
+
+```css
+div { { % mixin filter: url(#foo); % } }
+```
+
+and voila! All the `<div`>s in your document will be styled with the SVG filter definitions.
+
+custom (coming soon)
+: Coming soon on the horizon are custom filters. These tap into the power of your graphics GPU to use a [special shading](http://www.adobe.com/devnet/html5/articles/css-shaders.html) language to perform amazing effects bounded only by your own imagination. This part of the ‘filter’ specification is still under discussion and in flux, but as soon as this starts to come to a browser near you, we’ll be sure to write more about what is possible.
+
+## Performance considerations
+
+One thing that every web developer cares about is performance of their web page or application. CSS filters are a powerful tool for visual effects, but at the same time might have an impact on the performance of your site.
+
+Understanding what they do and how this affects performance matters, especially if you want your site to work well on mobile devices if they support CSS filters.
+
+Firstly, not all filters are created equal! In fact, most filters will run really quickly on any platform and have very minor performance impact. However, filters that do any kind of blurring tend to be slower than the others. This of course means ‘blur’ and ‘drop-shadow’. This doesn’t mean you shouldn’t use them but understanding how they work might help.
+
+When you do a `blur`, it mixes the colors from pixels all around the output pixel to generate a blurred result. So, say if your `radius` parameter is 2, then the filter needs to look at 2 pixels in every direction around each output pixel to generate the mixed color. This happens for each output pixel, so that means a lot of calculations that just get bigger when you increase the `radius`. Since `blur` looks in every direction, doubling the ‘radius’ means you need to look at 4 times as many pixels so in fact it’s 4 times slower for each doubling of the `radius`. The `drop-shadow` filter contains a `blur` as part of its effect, so it too behaves just like `blur` when you change the `radius` and `spread` parts of the `shadow` parameter.
+
+All is not lost with `blur` since on some platforms it’s possible to use the GPU to accelerate it, but that’s not necessarily going to be available in every browser. When in doubt the best thing is to experiment with the ‘radius’ that gives you the effect you want, then try to reduce it as much as possible while still maintaining an acceptable visual effect. Tuning this way will make your users happier especially if they use your site from a phone.
+
+If you’re using `url` based filters that reference SVG filters, they can contain any arbitrary filter effect so be aware that they too could be slow, so try to make sure you know what the filter effect does and experiment on a mobile device to make sure the performance is OK.
+
+## Availability in modern browsers
+
+Right now a number of the CSS `filter` effects are being made available in WebKit based browsers and Mozilla. We expect to see them soon in Opera as well as IE10. As the specification is still under development, some browser vendors have implemented this stuff using vendor prefixes. So in WebKit you need to use `-webkit-filter`, in Mozilla you will need to use
+`-moz-filter` and keep your eye out for other browser implementations as they appear.
+
+Not all browsers will support all filter effects right away, so your mileage will vary. Presently, the Mozilla browser supports only the `filter: url()` function - without the vendor prefix, as that implementation pre-dates the other effects functions.
+
+We’ve summarized the CSS filter effects available in the various browsers below with rough performance indicators for when they’re implemented in software. Note, that a number of modern browsers are beginning to implement these in hardware (GPU accelerated). When these are built with GPU support, performance will be greatly improved for the slower effects. As usual, testing on different browsers is the best way to evaluate the performance.
+
+<table border="1px">
+<thead>
+    <tr>
+        <th>Filter effect</th>
+        <th>Browser support</th>
+        <th>Performance</th>
+    </tr>
+</thead>
+<tbody>
+    <tr><td>grayscale</td><td>Chrome</td><td>very fast</td></tr>
+    <tr><td>sepia</td><td>Chrome</td><td>very fast</td></tr>
+    <tr><td>saturate</td><td>Chrome</td><td>very fast</td></tr>
+    <tr><td>hue-rotate</td><td>Chrome</td><td>fast</td></tr>
+    <tr><td>invert</td><td>Chrome</td><td>very fast</td></tr>
+    <tr><td>opacity</td><td>Chrome</td><td>can be slow</td></tr>
+    <tr><td>brightness</td><td>Chrome</td><td>fast</td></tr>
+    <tr><td>contrast</td><td>Chrome</td><td>fast</td></tr>
+    <tr><td>blur</td><td>Chrome</td><td>slow unless accelerated</td></tr>
+    <tr><td>drop-shadow</td><td>Chrome</td><td>can be slow</td></tr>
+    <tr><td>url()</td><td>Chrome, Mozilla</td><td>Varies, fast to slow</td></tr>
+</tbody>
+</table>
+
+## Other good resources
+
+An awesome [interactive abstract painting with filters](http://cssfilters.appspot.com/) application which lets you experiment and share your artwork
+Be sure to check out Eric Bidelman’s excellent [interactive filter](http://html5-demos.appspot.com/static/css/filters/index.html) page
+A great [tutorial about filters](http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/) with examples
+The official W3C Filter Effects 1.0 draft specification [http://dev.w3.org/fxtf/filters/](http://dev.w3.org/fxtf/filters/)
+Example [UI created using filters](http://simurai.com/lab/2010/09/14/stars/)
diff --git a/src/site/content/en/blog/use-long-term-caching/index.md b/src/site/content/en/blog/use-long-term-caching/index.md
new file mode 100644
index 00000000000..0d35e6100ba
--- /dev/null
+++ b/src/site/content/en/blog/use-long-term-caching/index.md
@@ -0,0 +1,765 @@
+---
+title: Make use of long-term caching
+subhead: |
+  How webpack helps with asset caching
+date: 2018-02-08
+updated: 2018-02-08
+authors:
+  - iamakulov
+description: |
+  How webpack helps with asset caching
+tags:
+  - blog
+---
+
+The next thing (after [optimizing the app size](/decrease-frontend-size/) that
+improves the app loading time is caching. Use it to keep parts of the app on the
+client and avoid re-downloading them every time.
+
+## Use bundle versioning and cache headers
+
+The common approach of doing caching is to:
+
+1. tell the browser to cache a file for a very long time (e.g., a year):
+
+    ```http
+    # Server header
+    Cache-Control: max-age=31536000
+    ```
+
+    If you aren't familiar what `Cache-Control` does, see Jake Archibald's
+    excellent post [on caching best
+    practices](https://jakearchibald.com/2016/caching-best-practices/).
+
+
+1. and rename the file when it's changed to force the re-download:
+
+    ```html
+    <!-- Before the change -->
+    <script src="./index-v15.js"></script>
+
+    <!-- After the change -->
+    <script src="./index-v16.js"></script>
+    ```
+
+
+This approach tells the browser to download the JS file, cache it and use the
+cached copy. The browser will only hit the network only if the file name changes
+(or if a year passes).
+
+With webpack, you do the same, but instead of a version number, you specify the
+file hash. To include the hash into the file name, use
+[`[chunkhash]`](https://webpack.js.org/configuration/output/#output-filename):
+
+```js
+// webpack.config.js
+module.exports = {
+  entry: './index.js',
+  output: {
+    filename: 'bundle.[chunkhash].js' // → bundle.8e0d62a03.js
+  }
+};
+```
+
+{% Aside %}
+Webpack could generate a different hash even if the bundle stays the same
+– e.g. if you rename a file or compile the bundle under a different OS. This is
+a bug, and there's no clear solution yet. [See the discussion on GitHub](https://github.com/webpack/webpack/issues/1479)
+{% endAside %}
+
+If you need the
+file name to send it to the client, use either the `HtmlWebpackPlugin` or the
+`WebpackManifestPlugin`.
+
+The [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) is a
+simple, but less flexible approach. During compilation, this plugin generates an
+HTML file which includes all compiled resources. If your server logic isn't
+complex, then it should be enough for you:
+
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<!-- ... -->
+<script src="bundle.8e0d62a03.js"></script>
+```
+
+The
+[`WebpackManifestPlugin`](https://github.com/danethurber/webpack-manifest-plugin)
+is a more flexible approach which is useful if you have a complex server part.
+During the build, it generates a JSON file with a mapping between file names
+without hash and file names with hash. Use this JSON on the server to find out
+which file to work with:
+
+```json
+// manifest.json
+{
+  "bundle.js": "bundle.8e0d62a03.js"
+}
+```
+
+### Further reading
+
+* Jake Archibald [about caching best
+  practices](https://jakearchibald.com/2016/caching-best-practices/)
+
+## Extract dependencies and runtime into a separate file
+
+### Dependencies
+
+App dependencies tend to change less often than the actual app code. If you move
+them into a separate file, the browser will be able to cache them separately –
+and won't re-download them each time the app code changes.
+
+Key Term: In webpack terminology, separate files with the app code are called
+_chunks_. We'll use this name later.
+
+To extract dependencies into a separate chunk, perform three steps:
+
+1. Replace the output filename with `[name].[chunkname].js`:
+
+    ```js
+    // webpack.config.js
+    module.exports = {
+      output: {
+        // Before
+        filename: 'bundle.[chunkhash].js',
+        // After
+        filename: '[name].[chunkhash].js'
+      }
+    };
+    ```
+
+    When webpack builds the app, it replaces [`[name]`](https://webpack.js.org/configuration/output/#output-filename)
+    with a name of a chunk. If we don't add the `[name]` part, we'll have
+    to differentiate between chunks by their hash – which is pretty hard!
+
+1. Convert the `entry` field into an object:
+
+    ```js
+    // webpack.config.js
+    module.exports = {
+      // Before
+      entry: './index.js',
+      // After
+      entry: {
+        main: './index.js'
+      }
+    };
+    ```
+
+    In this snippet, "main" is a name of a chunk. This name will be substituted in
+    place of `[name]` from step 1.
+
+    By now, if you build the app, this chunk will include the whole app code – just
+    like we haven't done these steps. But this will change in a sec.
+
+1. **In webpack 4**, add the `optimization.splitChunks.chunks: 'all'` option
+    into your webpack config:
+
+    ```js
+    // webpack.config.js (for webpack 4)
+    module.exports = {
+      optimization: {
+        splitChunks: {
+          chunks: 'all'
+        }
+      }
+    };
+    ```
+
+    This option enables smart code splitting. With it, webpack would extract the vendor code if
+    it gets larger than 30 kB (before minification and gzip). It would also extract the common code –
+    this is useful if your build produces several bundles (e.g.
+    [if you split your app into routes](#split-the-code-into-routes-and-pages)).
+
+    **In webpack 3**, add the [`CommonsChunkPlugin`](https://webpack.js.org/plugins/commons-chunk-plugin/):
+
+    ```js
+    // webpack.config.js (for webpack 3)
+    module.exports = {
+      plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+        // A name of the chunk that will include the dependencies.
+        // This name is substituted in place of [name] from step 1
+        name: 'vendor',
+
+        // A function that determines which modules to include into this chunk
+        minChunks: module => module.context && module.context.includes('node_modules'),
+        })
+      ]
+    };
+    ```
+
+    This plugin takes all modules which paths include `node_modules` and
+    moves them into a separate file called `vendor.[chunkhash].js`.
+
+
+After these changes, each build will generate two files instead of one: `main.[chunkhash].js` and
+`vendor.[chunkhash].js` (`vendors~main.[chunkhash].js` for webpack 4). In case of webpack 4,
+the vendor bundle might not be generated if dependencies are small – and that's fine:
+
+```shell
+$ webpack
+Hash: ac01483e8fec1fa70676
+Version: webpack 3.8.1
+Time: 3816ms
+                        Asset      Size  Chunks             Chunk Names
+ ./main.00bab6fd3100008a42b0.js   82 kB       0  [emitted]  main
+./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor
+```
+
+The browser would cache these files separately – and redownload only code that changes.
+
+### Webpack runtime code
+
+Unfortunately, extracting just the vendor code is not enough. If you try to
+change something in the app code:
+
+```js
+// index.js
+…
+…
+
+// E.g. add this:
+console.log('Wat');
+```
+
+you'll notice that the `vendor` hash also changes:
+
+```shell
+                           Asset   Size  Chunks             Chunk Names
+./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor
+```
+
+↓
+
+```shell
+                            Asset   Size  Chunks             Chunk Names
+./vendor.e6ea4504d61a1cc1c60b.js  47 kB       1  [emitted]  vendor
+```
+
+This happens because the webpack bundle, apart from the code of modules, has [_a
+runtime_](https://webpack.js.org/concepts/manifest/) – a small piece of code
+that manages the module execution. When you split the code into multiple files,
+this piece of code starts including a mapping between chunk ids and
+corresponding files:
+
+```js
+// vendor.e6ea4504d61a1cc1c60b.js
+script.src = __webpack_require__.p + chunkId + "." + {
+    "0": "2f2269c7f0a55a5c1871"
+}[chunkId] + ".js";
+```
+
+Webpack includes this runtime into the last generated chunk, which is `vendor`
+in our case. And every time any chunk changes, this piece of code changes too,
+causing the whole `vendor` chunk to change.
+
+To solve this, let's move the runtime into a separate file. **In webpack 4,** this is
+achieved by enabling the `optimization.runtimeChunk` option:
+
+```js
+// webpack.config.js (for webpack 4)
+module.exports = {
+  optimization: {
+    runtimeChunk: true
+  }
+};
+```
+
+**In webpack 3,** do this by creating an extra empty chunk with the `CommonsChunkPlugin`:
+
+```js
+// webpack.config.js (for webpack 3)
+module.exports = {
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: module => module.context && module.context.includes('node_modules')
+    }),
+    // This plugin must come after the vendor one (because webpack
+    // includes runtime into the last chunk)
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'runtime',
+      // minChunks: Infinity means that no app modules
+      // will be included into this chunk
+      minChunks: Infinity
+    })
+  ]
+};
+```
+
+After these changes, each build will be generating three files:
+
+```shell
+$ webpack
+Hash: ac01483e8fec1fa70676
+Version: webpack 3.8.1
+Time: 3816ms
+                            Asset     Size  Chunks             Chunk Names
+   ./main.00bab6fd3100008a42b0.js    82 kB       0  [emitted]  main
+ ./vendor.26886caf15818fa82dfa.js    46 kB       1  [emitted]  vendor
+./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
+```
+
+Include them into `index.html` in the reverse order – and you're done:
+
+```html
+<!-- index.html -->
+<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
+<script src="./vendor.26886caf15818fa82dfa.js"></script>
+<script src="./main.00bab6fd3100008a42b0.js"></script>
+```
+
+### Further reading
+
+* Webpack guide [on long term caching](https://webpack.js.org/guides/caching/)
+* Webpack docs [about webpack runtime and
+  manifest](https://webpack.js.org/concepts/manifest/)
+* ["Getting the most out of the
+  CommonsChunkPlugin"](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318)
+* [How `optimization.splitChunks` and `optimization.runtimeChunk` work](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693)
+
+## Inline webpack runtime to save an extra HTTP request
+
+To make things even better, try inlining the webpack runtime into the HTML
+response. I.e., instead of this:
+
+```html
+<!-- index.html -->
+<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
+```
+
+do this:
+
+```html
+<!-- index.html -->
+<script>
+!function(e){function n(r){if(t[r])return t[r].exports;…}} ([]);
+</script>
+```
+
+The runtime is small, and inlining it will help you save an HTTP request (pretty
+important with HTTP/1; less important with HTTP/2 but might still play an
+effect).
+
+Here's how to do it.
+
+### If you generate HTML with the HtmlWebpackPlugin
+
+If you use the
+[HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin) to generate
+an HTML file, the
+[InlineSourcePlugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin)
+is all you need:
+
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const InlineSourcePlugin = require('html-webpack-inline-source-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      inlineSource: 'runtime~.+\\.js',
+    }),
+    new InlineSourcePlugin()
+  ]
+};
+```
+
+### If you generate HTML using a custom server logic
+
+**With webpack 4:**
+
+1. Add the
+    [`WebpackManifestPlugin`](https://github.com/danethurber/webpack-manifest-plugin)
+    to know the generated name of the runtime chunk:
+
+    ```js
+    // webpack.config.js (for webpack 4)
+    const ManifestPlugin = require('webpack-manifest-plugin');
+
+    module.exports = {
+      plugins: [
+        new ManifestPlugin()
+      ]
+    };
+    ```
+
+    A build with this plugin would create a file that looks like this:
+
+    ```json
+    // manifest.json
+    {
+      "runtime~main.js": "runtime~main.8e0d62a03.js"
+    }
+    ```
+
+1. Inline the content of the runtime chunk in a convenient way. E.g. with Node.js and Express:
+
+    ```js
+    // server.js
+    const fs = require('fs');
+    const manifest = require('./manifest.json');
+    const runtimeContent = fs.readFileSync(manifest['runtime~main.js'], 'utf-8');
+
+    app.get('/', (req, res) => {
+      res.send(`
+        …
+        <script>${runtimeContent}</script>
+        …
+      `);
+    });
+    ```
+
+**Or with webpack 3:**
+
+1. Make the runtime name static by specifying `filename`:
+
+    ```js
+    module.exports = {
+      plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+          name: 'runtime',
+          minChunks: Infinity,
+          filename: 'runtime.js'
+        })
+      ]
+    };
+    ```
+
+1. Inline the `runtime.js` content in a convenient way. E.g. with Node.js and Express:
+
+    ```js
+    // server.js
+    const fs = require('fs');
+    const runtimeContent = fs.readFileSync('./runtime.js', 'utf-8');
+
+    app.get('/', (req, res) => {
+      res.send(`
+        …
+        <script>${runtimeContent}</script>
+        …
+      `);
+    });
+    ```
+
+## Lazy-load code that you don't need right now
+
+Sometimes, a page has more and less important parts:
+
+* If you load a video page on YouTube, you care more about the video than about
+  comments. Here, the video is more important than comments.
+* If you open an article on a news site, you care more about the text of the
+  article than about ads. Here, the text is more important than ads.
+
+In such cases, improve the initial loading performance by downloading only the
+most important stuff first, and lazy loading the remaining parts later. Use [the
+`import()` function](https://webpack.js.org/api/module-methods/#import-) and
+[code-splitting](https://webpack.js.org/guides/code-splitting/) for this:
+
+
+```js
+// videoPlayer.js
+export function renderVideoPlayer() { … }
+
+// comments.js
+export function renderComments() { … }
+
+// index.js
+import {renderVideoPlayer} from './videoPlayer';
+renderVideoPlayer();
+
+// …Custom event listener
+onShowCommentsClick(() => {
+  import('./comments').then((comments) => {
+    comments.renderComments();
+  });
+});
+```
+
+`import()` specifies that you want to load a specific module dynamically. When
+webpack sees `import('./module.js')`, it moves this module into a separate
+chunk:
+
+```shell
+$ webpack
+Hash: 39b2a53cb4e73f0dc5b2
+Version: webpack 3.8.1
+Time: 4273ms
+                            Asset     Size  Chunks             Chunk Names
+      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
+   ./main.f7e53d8e13e9a2745d6d.js    60 kB       1  [emitted]  main
+ ./vendor.4f14b6326a80f4752a98.js    46 kB       2  [emitted]  vendor
+./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
+```
+
+and downloads it only when execution reaches the `import()` function.
+
+This will make the `main` bundle smaller, improving the initial loading time.
+Even more, it will improve caching – if you change the code in the main chunk,
+comments chunk won't get affected.
+
+{% Aside %}
+If you compile this code with Babel, you'll have a syntax error because
+Babel doesn't understand `import()` out of the box. To avoid the error, add the
+[`syntax-dynamic-import`](https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import)
+plugin.
+{% endAside %}
+
+### Further reading
+
+* Webpack docs [for the `import()`
+  function](https://webpack.js.org/api/module-methods/#import-)
+* The JavaScript proposal [for implementing the `import()`
+  syntax](https://github.com/tc39/proposal-dynamic-import)
+
+## Split the code into routes and pages
+
+If your app has multiple routes or pages, but there's only a single JS file with
+the code (a single `main` chunk), it's likely that you're serving extra bytes on
+each request. For example, when a user visits a home page of your site:
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BJfZOSkibMwm5QKkN9Yg.png", alt="A WebFundamentals home page", width="800", height="416" %}
+</figure>
+
+they don't need to load the code for rendering an article that's on a different
+page – but they will load it. Moreover, if the user always visits only the home
+page, and you make a change in the article code, webpack will invalidate the
+whole bundle – and the user will have to re-download the whole app.
+
+If we split the app into pages (or routes, if it's a single-page app), the user
+will download only the relevant code. Plus, the browser will cache the app code
+better: if you change the home page code, webpack will invalidate only the
+corresponding chunk.
+
+### For single-page apps
+
+To split single-page apps by routes, use `import()` (see the [“Lazy-load code
+that you don't need right now”](#lazy-loading) section). If you use a framework,
+it might have an existing solution for this:
+
+* ["Code
+  Splitting"](https://reacttraining.com/react-router/web/guides/code-splitting)
+  in `react-router`'s docs (for React)
+* ["Lazy Loading
+  Routes"](https://router.vuejs.org/en/advanced/lazy-loading.html) in
+  `vue-router`'s docs (for Vue.js)
+
+### For traditional multi-page apps
+
+To split traditional apps by pages, use webpack's [entry
+points](https://webpack.js.org/concepts/entry-points/). If your app has three
+kinds of pages: the home page, the article page and the user account page, – it
+should have three entries:
+
+```js
+// webpack.config.js
+module.exports = {
+  entry: {
+    home: './src/Home/index.js',
+    article: './src/Article/index.js',
+    profile: './src/Profile/index.js'
+  }
+};
+```
+
+For each entry file, webpack will build a separate dependency tree and generate
+a bundle that includes only modules that are used by that entry:
+
+```shell
+$ webpack
+Hash: 318d7b8490a7382bf23b
+Version: webpack 3.8.1
+Time: 4273ms
+                            Asset     Size  Chunks             Chunk Names
+      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
+   ./home.91b9ed27366fe7e33d6a.js    18 kB       1  [emitted]  home
+./article.87a128755b16ac3294fd.js    32 kB       2  [emitted]  article
+./profile.de945dc02685f6166781.js    24 kB       3  [emitted]  profile
+ ./vendor.4f14b6326a80f4752a98.js    46 kB       4  [emitted]  vendor
+./runtime.318d7b8490a7382bf23b.js  1.45 kB       5  [emitted]  runtime
+```
+
+So, if only the article page uses Lodash, the `home` and the `profile` bundles
+won't include it – and the user won't have to download this library when
+visiting the home page.
+
+Separate dependency trees have their drawbacks though. If two entry points use
+Lodash, and you haven't moved your dependencies into a vendor bundle, both entry
+points will include a copy of Lodash. To solve this, **in webpack 4,** add the
+`optimization.splitChunks.chunks: 'all'` option into your webpack config:
+
+```js
+// webpack.config.js (for webpack 4)
+module.exports = {
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  }
+};
+```
+
+This option enables smart code splitting. With this option, webpack would automatically
+look for common code and extract it into separate files.
+
+Or, **in webpack 3,** use the [`CommonsChunkPlugin`](https://webpack.js.org/plugins/commons-chunk-plugin/)
+– it will move common dependencies into a new specified file:
+
+```js
+module.exports = {
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'common',
+      minChunks: 2    // 2 is the default value
+    })
+  ]
+};
+```
+
+Feel free to play with the `minChunks` value to find the best one. Generally,
+you want to keep it small, but increase if the number of chunks grows. For
+example, for 3 chunks, `minChunks` might be 2, but for 30 chunks, it might be 8
+– because if you keep it at 2, too many modules will get into the common file,
+inflating it too much.
+
+### Further reading
+
+* Webpack docs [about the concept of entry
+  points](https://webpack.js.org/concepts/entry-points/)
+* Webpack docs [about the
+  CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/)
+* ["Getting the most out of the
+  CommonsChunkPlugin"](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318)
+* [How `optimization.splitChunks` and `optimization.runtimeChunk` work](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693)
+
+## Make module ids more stable
+
+When building the code, webpack assigns each module an ID. Later, these IDs are
+used in `require()`s inside the bundle. You usually see IDs in the build output
+right before the module paths:
+
+```shell
+$ webpack
+Hash: df3474e4f76528e3bbc9
+Version: webpack 3.8.1
+Time: 2150ms
+                           Asset      Size  Chunks             Chunk Names
+      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
+   ./main.4e50a16675574df6a9e9.js    60 kB       1  [emitted]  main
+ ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
+./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
+```
+
+↓ Here
+
+```shell
+[0] ./index.js 29 kB {1} [built]
+[2] (webpack)/buildin/global.js 488 bytes {2} [built]
+[3] (webpack)/buildin/module.js 495 bytes {2} [built]
+[4] ./comments.js 58 kB {0} [built]
+[5] ./ads.js 74 kB {1} [built]
++ 1 hidden module
+```
+
+By default, IDs are calculated using a counter (i.e. the first module has ID 0,
+the second one has ID 1, and so on). The problem with this is that when you add
+a new module, it might appear in the middle of the module list, changing all the
+next modules' IDs:
+
+```shell
+$ webpack
+Hash: df3474e4f76528e3bbc9
+Version: webpack 3.8.1
+Time: 2150ms
+                           Asset      Size  Chunks             Chunk Names
+      ./0.5c82c0f337fcb22672b5.js    22 kB       0  [emitted]
+   ./main.0c8b617dfc40c2827ae3.js    82 kB       1  [emitted]  main
+ ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
+./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
+   [0] ./index.js 29 kB {1} [built]
+   [2] (webpack)/buildin/global.js 488 bytes {2} [built]
+   [3] (webpack)/buildin/module.js 495 bytes {2} [built]
+```
+
+↓ We've added a new
+module…
+
+```shell
+[4] ./webPlayer.js 24 kB {1} [built]
+```
+
+↓ And look what it has done! `comments.js` now has ID 5 instead of 4
+
+```shell
+[5] ./comments.js 58 kB {0} [built]
+```
+
+↓ `ads.js` now has ID 6 instead of 5
+
+```shell
+[6] ./ads.js 74 kB {1} [built]
+       + 1 hidden module
+```
+
+This invalidates all chunks that include or depend on modules with changed IDs –
+even if their actual code hasn't changed. In our case, the `0` chunk (the chunk
+with `comments.js`) and the `main` chunk (the chunk with the other app code) get
+invalidated – whereas only the `main` one should've been.
+
+To solve this, change how module IDs are calculated using the
+[`HashedModuleIdsPlugin`](https://webpack.js.org/plugins/hashed-module-ids-plugin/).
+It replaces counter-based IDs with hashes of module paths:
+
+```shell
+$ webpack
+Hash: df3474e4f76528e3bbc9
+Version: webpack 3.8.1
+Time: 2150ms
+                           Asset      Size  Chunks             Chunk Names
+      ./0.6168aaac8461862eab7a.js  22.5 kB       0  [emitted]
+   ./main.a2e49a279552980e3b91.js    60 kB       1  [emitted]  main
+ ./vendor.ff9f7ea865884e6a84c8.js    46 kB       2  [emitted]  vendor
+./runtime.25f5d0204e4f77fa57a1.js  1.45 kB       3  [emitted]  runtime
+```
+
+↓ Here
+
+```shell
+[3IRH] ./index.js 29 kB {1} [built]
+[DuR2] (webpack)/buildin/global.js 488 bytes {2} [built]
+[JkW7] (webpack)/buildin/module.js 495 bytes {2} [built]
+[LbCc] ./webPlayer.js 24 kB {1} [built]
+[lebJ] ./comments.js 58 kB {0} [built]
+[02Tr] ./ads.js 74 kB {1} [built]
+    + 1 hidden module
+```
+
+With this approach, the ID of a module only changes if you rename or move that
+module. New modules won't affect other modules' IDs.
+
+To enable the plugin, add it to the `plugins` section of the config:
+
+```js
+// webpack.config.js
+module.exports = {
+  plugins: [
+    new webpack.HashedModuleIdsPlugin()
+  ]
+};
+```
+
+### Further reading
+
+* Webpack docs [about the
+  HashedModuleIdsPlugin](https://webpack.js.org/plugins/hashed-module-ids-plugin/)
+
+## Summing up
+
+* Cache the bundle and differentiate between versions by changing the bundle name
+* Split the bundle into app code, vendor code and runtime
+* Inline the runtime to save an HTTP request
+* Lazy-load non-critical code with `import`
+* Split code by routes/pages to avoid loading unnecessary stuff
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/devtools-headers-for-cloudinary-image.png b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/devtools-headers-for-cloudinary-image.png
deleted file mode 100644
index f4ef91ad051..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/devtools-headers-for-cloudinary-image.png and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/http-archive.svg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/http-archive.svg
deleted file mode 100644
index 889fd1b5870..00000000000
--- a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/http-archive.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="700" height="320" viewBox="0 110 700 350" aria-label="Pie chart with data from HTTP Archive showing the proportion of page weight for each resource type"><path fill="#fff" d="M0 0H700V300H0z"/><path fill="none" d="M542 174H740V326H542z"/><g stroke-width="0"><path fill="none" d="M542 174H740V188H542z"/><text x="561" y="185.9" font-family="Google Sans" font-size="14" fill="#222">Images</text><circle cx="549" cy="181" r="7" fill="#36c"/></g><g stroke-width="0"><path fill="none" d="M542 197H740V211H542z"/><text x="561" y="208.9" font-family="Google Sans" font-size="14" fill="#222">JavaScript</text><circle cx="549" cy="204" r="7" fill="#dc3912"/></g><g stroke-width="0"><path fill="none" d="M542 220H740V234H542z"/><text x="561" y="231.9" font-family="Google Sans" font-size="14" fill="#222">Fonts</text><circle cx="549" cy="227" r="7" fill="#f90"/></g><g stroke-width="0"><path fill="none" d="M542 243H740V257H542z"/><text x="561" y="254.9" font-family="Google Sans" font-size="14" fill="#222">CSS</text><circle cx="549" cy="250" r="7" fill="#109618"/></g><g stroke-width="0"><path fill="none" d="M542 266H740V280H542z"/><text x="561" y="277.9" font-family="Google Sans" font-size="14" fill="#222">Video</text><circle cx="549" cy="273" r="7" fill="#909"/></g><g stroke-width="0"><path fill="none" d="M542 289H740V303H542z"/><text x="561" y="300.9" font-family="Google Sans" font-size="14" fill="#222">HTML</text><circle cx="549" cy="296" r="7" fill="#0099c6"/></g><g stroke-width="0"><path fill="none" d="M542 312H740V326H542z"/><text x="561" y="323.9" font-family="Google Sans" font-size="14" fill="#222">Other</text><circle cx="549" cy="319" r="7" fill="#d47"/></g><g><path d="M340 235.6v30.8l-1.851-123.191v-30.8" stroke="#a63359" fill="#a63359"/><path d="M340 235.6l-1.851-123.191A154 123.2 0 0 1 340 112.4v123.2" stroke="#d47" fill="#d47"/></g><g><path d="M340 235.6v30.8l-18.47-122.31v-30.8" stroke="#007395" fill="#007395"/><path d="M340 235.6l-18.47-122.31a154 123.2 0 0 1 16.619-.881L340 235.6" stroke="#0099c6" fill="#0099c6"/></g><g><path d="M340 235.6v30.8l-39.187-119.145v-30.8" stroke="#730073" fill="#730073"/><path d="M340 235.6l-39.187-119.145a154 123.2 0 0 1 20.716-3.166L340 235.6" stroke="#909" fill="#909"/></g><g><path d="M340 235.6v30.8l-75.472-107.39v-30.8" stroke="#0c7112" fill="#0c7112"/><path d="M340 235.6l-75.472-107.39a154 123.2 0 0 1 36.285-11.755L340 235.6" stroke="#109618" fill="#109618"/></g><g><path d="M340 235.6v30.8l-109.515-86.617v-30.8" stroke="#bf7300" fill="#bf7300"/><path d="M340 235.6l-109.515-86.617a154 123.2 0 0 1 34.043-20.774L340 235.6" stroke="#f90" fill="#f90"/></g><g><path d="M195.489 278.177v30.8A154 123.2 0 0 1 186 266.4v-30.8a154 123.2 0 0 0 9.489 42.577M340 235.6v30.8l-144.511 42.577v-30.8" stroke="#a52b0e" fill="#a52b0e"/><path d="M340 235.6l-144.511 42.577a154 123.2 0 0 1 34.996-129.194L340 235.6" stroke="#dc3912" fill="#dc3912"/></g><g><path d="M494 235.6v30.8a154 123.2 0 0 1-298.511 42.577v-30.8A154 123.2 0 0 0 494 235.6" stroke="#264d99" fill="#264d99"/><path d="M340 235.6V112.4a154 123.2 0 1 1-144.511 165.777L340 235.6" stroke="#36c" fill="#36c"/><text x="377.427" y="247.864" font-family="Google Sans" font-size="20" stroke-width="0" fill="#fff">1,813 KB</text></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/index.md b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/index.md
index 74e9f31adc8..98435aa8900 100644
--- a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/index.md
+++ b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Top tips for web performance
 subhead: Use srcset to automatically choose the right image size.
 authors:
@@ -7,17 +8,19 @@ date: 2019-06-24
 description: Use srcset to automatically choose the right image size.
 tags:
   - blog
-  - top tips
+  # - top tips
   - images
   - performance
-  - responsive design
-  - responsive images
-  - srcset
-  - sizes
+  # - responsive design
+  # - responsive images
+  # - srcset
+  # - sizes
 codelabs:
   - codelab-art-direction
   - codelab-density-descriptors
   - codelab-specifying-multiple-slot-widths
+feedback:
+  - api
 ---
 
 {% YouTube 'SyVKRnusyqM' %}
@@ -26,17 +29,17 @@ According to [HTTP Archive](https://httparchive.org/reports/state-of-images), a
 typical mobile web page weighs over 2.6 MB, and more than two thirds of that
 weight is images. That's a great opportunity for optimization!
 
-<figure class="w-figure">
-  <img src="http-archive.svg">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8A7JasX5JOADmB1XkjMC.svg", alt="", width="700", height="320" %}
+  <figcaption>
     <a href="https://mobile.httparchive.org/">Average mobile page bytes by content type</a>
   </figcaption>
 </figure>
 
-## tl;dr
+## Summary
 * Don't save images larger than their display size.
 * Save multiple sizes for each image and use the
-[`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)
+[`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset)
 attribute to enable the browser to choose the smallest.
 The `w` value tells the browser the width of each version:
 
@@ -60,14 +63,14 @@ Take a look at the images below.
 They appear nearly identical, but the file size of one is more than 10 times
 larger than the other.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img class="w-screenshot" src="kittens-1000.jpg" alt="Little Puss and Lias: two ten week old tabby kittens." width="300">
-    <figcaption class="w-figcaption">Saved width 1000 px, file size 184 KB</figcaption>
+<div class="switcher">
+  <figure>
+    {% Img src="image/admin/IHpM8DG6qiNlRcbfxnt8.jpg", alt="Little Puss and Lias: two ten week old tabby kittens.", width="800", height="534" %}
+    <figcaption>Saved width 1000 px, file size 184 KB</figcaption>
   </figure>
-  <figure class="w-figure">
-    <img class="w-screenshot" src="kittens-300.jpg" alt="Little Puss and Lias: two ten week old tabby kittens." width="300">
-    <figcaption class="w-figcaption">Saved width 300 px, file size 16 KB</figcaption>
+  <figure>
+    {% Img src="image/admin/XThwdsYxfx6KHkMxgbYI.jpg", alt="Little Puss and Lias: two ten week old tabby kittens.", width="300", height="200" %}
+    <figcaption>Saved width 300 px, file size 16 KB</figcaption>
   </figure>
 </div>
 
@@ -107,7 +110,7 @@ tell the browser the width of each version:
 ```
 
 The `w` values show the width of each image in pixels. For example,
-`small.jpg 500w` tells the browser that <a href="small.jpg">small.jpg</a> is 500
+`small.jpg 500w` tells the browser that <a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/scLPehGom3IZLxPJiPPF.jpg' | imgix }}">small.jpg</a> is 500
 pixels wide. This enables the browser to choose the smallest possible image,
 depending on the screen type and the viewport size—without having to
 download images to check their size.
@@ -125,10 +128,7 @@ Then use the Network panel of your browser tools to check which image was used.
 (You'll need to do that in an Incognito or Private window, otherwise the
 original image file will be cached.)
 
-<img
-  src="small.jpg"
-  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
-  alt="Lias and Little Puss: two ten week old grey tabby kittens">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/scLPehGom3IZLxPJiPPF.jpg", alt="Lias and Little Puss: two ten week old grey tabby kittens", width="500", height="334" %}
 
 ## How can I create multiple image sizes?
 
@@ -168,8 +168,7 @@ delivered to browsers that support WebP, without changing the `.jpg` file
 extension.
 {% endAside %}
 
-<img class="w-screenshot" src="devtools-headers-for-cloudinary-image.png" alt="Chrome
-DevTools showing WebP content-type header for file served by Cloudinary">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y0ra5DLlntYoLV46uU1f.png", alt="Chrome DevTools showing WebP content-type header for file served by Cloudinary", width="800", height="146" %}
 
 
 ## What if the image doesn't look right at different sizes?
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-1000.jpg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-1000.jpg
deleted file mode 100644
index b34f1683a5b..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-1000.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-300.jpg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-300.jpg
deleted file mode 100644
index ec80c9256c7..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/kittens-300.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/large.jpg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/large.jpg
deleted file mode 100644
index 035f893733d..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/large.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/medium.jpg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/medium.jpg
deleted file mode 100644
index 0930e4a388f..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/medium.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/small.jpg b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/small.jpg
deleted file mode 100644
index 86a30ae6efa..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/small.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/youtube-screenshot.png b/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/youtube-screenshot.png
deleted file mode 100644
index e1131abafc1..00000000000
Binary files a/src/site/content/en/blog/use-srcset-to-automatically-choose-the-right-image/youtube-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor0.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor0.jpg
deleted file mode 100644
index 7b1b92271ad..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor0.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor1.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor1.jpg
deleted file mode 100644
index 528467bd6dd..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor1.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor10.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor10.jpg
deleted file mode 100644
index 11977b28912..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor10.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor11.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor11.jpg
deleted file mode 100644
index a02d307f74e..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor11.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor2.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor2.jpg
deleted file mode 100644
index 4e4c789d808..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor3.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor3.jpg
deleted file mode 100644
index f43fbdd7ce1..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor3.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor4.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor4.jpg
deleted file mode 100644
index 5b1f8d5e1fe..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor4.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor5.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor5.jpg
deleted file mode 100644
index 0d925208086..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor5.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor6.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor6.jpg
deleted file mode 100644
index e9279a282ad..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor6.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor7.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor7.jpg
deleted file mode 100644
index ba1142d8522..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor7.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor8.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor8.jpg
deleted file mode 100644
index 3b209cf4a2d..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor8.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/Use-thumbor9.jpg b/src/site/content/en/blog/use-thumbor/Use-thumbor9.jpg
deleted file mode 100644
index ecc66059d76..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/Use-thumbor9.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/hero.jpg b/src/site/content/en/blog/use-thumbor/hero.jpg
deleted file mode 100644
index ebb084ecacc..00000000000
Binary files a/src/site/content/en/blog/use-thumbor/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/use-thumbor/index.md b/src/site/content/en/blog/use-thumbor/index.md
index 208f53ac01c..a60881a2972 100644
--- a/src/site/content/en/blog/use-thumbor/index.md
+++ b/src/site/content/en/blog/use-thumbor/index.md
@@ -4,13 +4,13 @@ subhead: Thumbor can be used for free to resize, compress, and transform images
 authors:
   - katiehempenius
 date: 2019-09-23
-hero: hero.jpg
+hero: image/admin/yNqbzg2R9PIkqTfywZSw.jpg
 alt: A pile of photos.
 description: |
   Instructions on how to optimize images with Thumbor. Thumbor is an open-source image CDN and can be used for free to resize, compress, and transform images.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - perforamnce
+  - performance
   - images
 ---
 
@@ -19,21 +19,21 @@ tags:
 
 ## Prequisites
 
-This post assumes that you understand how image CDNs can improve your load performance. If not, check out [Use image CDNs to optimize images](https://web.dev/image-cdns). It also assumes that you've built basic websites before.
+This post assumes that you understand how image CDNs can improve your load performance. If not, check out [Use image CDNs to optimize images](/image-cdns). It also assumes that you've built basic websites before.
 
 {% Aside %}
 
-If you would like to install Thumbor on your own server and then follow along with this post, check out [How to install the Thumbor image CDN](https://web.dev/install-thumbor). Whenever you see `http://34.67.235.246:8888` in this post you'll need to replace that origin with your Thumbor instance's origin.
+If you would like to install Thumbor on your own server and then follow along with this post, check out [How to install the Thumbor image CDN](/install-thumbor). Whenever you see `http://34.67.235.246:8888` in this post you'll need to replace that origin with your Thumbor instance's origin.
 
 {% endAside %}
 
 
 ## Thumbor URL Format
 
-As mentioned in [Use Image CDNs to Optimize Images](https://web.dev/image-cdns), each image CDN uses a slightly different URL format for images. Figure 1 represents Thumbor's format.
+As mentioned in [Use Image CDNs to Optimize Images](/image-cdns), each image CDN uses a slightly different URL format for images. Figure 1 represents Thumbor's format.
 
-<figure class="w-figure">
-  <img src="./Use-thumbor0.jpg" alt="A Thumbor URL has the following components: origin, security key, size, filters and image." class="w-screenshot">
+<figure>
+  {% Img src="image/admin/lo1hS8qn53XCztrlgvl7.jpg", alt="A Thumbor URL has the following components: origin, security key, size, filters and image.", width="800", height="89" %}
   <figcaption>Thumbor's URL format</figcaption>
 </figure>
 
@@ -56,15 +56,15 @@ Try it now:
 
 1. Click the following URL to view the image served at its original size in a new tab: <a href="http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg</a>
 
-    <figure class="w-figure">
-      <img src="./Use-thumbor1.jpg" alt="Image at original size" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/R2Xp5XxJi4CFGjXlPx4X.jpg", alt="Image at original size", width="800", height="500" %}
       <figcaption>Original image</figcaption>
     </figure>
 
 2. Resize the image to 100x100 pixels: <a href="http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor2.jpg" alt="Image at 100x100 pixels" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/QXf1r4Ov6gXDtbrcmLWZ.jpg", alt="Image at 100x100 pixels", width="800", height="505" %}
   <figcaption>Image resized to 100x100 pixels</figcaption>
 </figure>
 
@@ -77,16 +77,16 @@ Try it now:
 
 1. Apply a single filter: a Gaussian [blur](https://thumbor.readthedocs.io/en/latest/blur.html) effect with a radius of 25 pixels: <a href="http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-    <figure class="w-figure">
-      <img src="./Use-thumbor3.jpg" alt="Blurred image" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/e5zG6ghl8IADjEKMGBzf.jpg", alt="Blurred image", width="800", height="505" %}
       <figcaption>Blurred image</figcaption>
     </figure>
 
 
 2. Apply multiple filter. Convert to [grayscale](https://thumbor.readthedocs.io/en/latest/grayscale.html) and [rotate](https://thumbor.readthedocs.io/en/latest/rotate.html) the image 90 degrees: <a href="http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor4.jpg" alt="Grayscale image that has been rotated 90 degrees" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/U9atnYPla5L93UmVx9di.jpg", alt="Grayscale image that has been rotated 90 degrees", width="800", height="505" %}
   <figcaption>Grayscale, rotated image</figcaption>
 </figure>
 
@@ -105,15 +105,15 @@ Try it now:
 
 1. Compress the image to a quality of 1 (very bad): <a href="http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-    <figure class="w-figure">
-      <img src="./Use-thumbor5.jpg" alt="Low-quality image" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/DyC3mcwd1vn0Xnv7GUco.jpg", alt="Low-quality image", width="800", height="505" %}
       <figcaption>Low-quality image</figcaption>
     </figure>
 
 2. Compress the image using Thumbor's default compression settings: <a href="http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor6.jpg" alt="Compressed image with no noticible quality issues" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/vOZpDiHEPMTQOEZ3YG7e.jpg", alt="Compressed image with no noticible quality issues", width="800", height="505" %}
   <figcaption>Compressed image</figcaption>
 </figure>
 
@@ -126,16 +126,16 @@ Try it now:
 1. Resize the image to a width of 200 pixels while maintaining original proportions: <a href="http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg</a>
 
     <!-- lint disable code-block-style -->
-    <figure class="w-figure">
-      <img src="./Use-thumbor7.jpg" alt="Image that is 200 pixels wide" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/afo1UErx1tzpBz5mO0nQ.jpg", alt="Image that is 200 pixels wide", width="800", height="505" %}
       <figcaption>Image resized to a width of 200 pixels</figcaption>
     </figure>
 
 
 2. Resize the image to a height of 500 pixels while maintaining original proportion: <a href="http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor8.jpg" alt="Image that is 500 pixels tall" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/ln4jTuQjlK8DDsutTH9i.jpg", alt="Image that is 500 pixels tall", width="800", height="505" %}
   <figcaption>Image resized to a height of 500 pixels<figcaption>
 </figure>
 
@@ -147,16 +147,16 @@ Try it now:
 
 1. Resize the image to 50% of the original: <a href="http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-    <figure class="w-figure">
-      <img src="./Use-thumbor9.jpg" alt="Image that is 50% the size of the original" class="w-screenshot">
+    <figure>
+      {% Img src="image/admin/KmAi5ht9IUiFPkyu6zjA.jpg", alt="Image that is 50% the size of the original", width="800", height="505" %}
       <figcaption>Image resized to 50% the size of the original</figcaption>
     </figure>
 
 
 2. Resize the image to a width of 1000 pixels, then resize the image to 10% of its current size: <a href="http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor10.jpg" alt="Image that is 100 pixels wide" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/F4jHvji47nFA7RiVdsAF.jpg", alt="Image that is 100 pixels wide", width="800", height="505" %}
   <figcaption>Image resized to a width of 100 pixels</figcaption>
 </figure>
 
@@ -166,14 +166,14 @@ These methods are just a few of Thumbor's many cropping and resizing options. To
 
 ### File Formats
 
-The [format](https://thumbor.readthedocs.io/en/latest/format.html) filter converts images to `jpeg`, `webp`, `gif`, or `png`. Keep in mind that if you're optimizing for performance you should [use either JPEG or WebP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization) as PNG and GIF files tend to be significantly larger and do not compress as well.
+The [format](https://thumbor.readthedocs.io/en/latest/format.html) filter converts images to `jpeg`, `webp`, `gif`, or `png`. Keep in mind that if you're optimizing for performance you should [use either JPEG or WebP](/fast/#optimize-your-images) as PNG and GIF files tend to be significantly larger and do not compress as well.
 
 Try it now:
 
 1. Convert the image to WebP. If you open the **Network** panel of DevTools the document's **Content-Type response header** shows that the server returned a WebP image: <a href="http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg" target="_blank" rel="noreferrer">http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg</a>
 
-<figure class="w-figure">
-  <img src="./Use-thumbor11.jpg" alt="DevTools screenshot showing the content-type (WebP) of an image" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/78Jp9l7N0gUQtiuxbNSn.jpg", alt="DevTools screenshot showing the content-type (WebP) of an image", width="800", height="469" %}
   <figcaption>The <code>content-type</code> response header shown in DevTools</figcaption>
 </figure>
 
diff --git a/src/site/content/en/blog/user-agent-client-hints/index.md b/src/site/content/en/blog/user-agent-client-hints/index.md
deleted file mode 100644
index 7719d96666f..00000000000
--- a/src/site/content/en/blog/user-agent-client-hints/index.md
+++ /dev/null
@@ -1,447 +0,0 @@
----
-title: Improving user privacy and developer experience with User-Agent Client Hints
-subhead:
-  User-Agent Client Hints are a new expansion to the Client Hints API, that
-  enables developers to access information about a user's browser in a
-  privacy-preserving and ergonomic way.
-authors:
-  - rowan_m
-  - yoavweiss
-date: 2020-06-25
-updated: 2020-06-29
-hero: uach-hero.jpg
-thumbnail: uach-thumbnail.jpg
-alt: A variety of different footprints in the snow. A hint at who's been there.
-tags:
-  - blog
-  - privacy
-  - security
----
-
-Client Hints enable developers to actively request
-information about the user's device or conditions, rather than needing to parse
-it out of the User-Agent (UA) string. Providing this alternative route is the
-first step to eventually reducing User-Agent string granularity.
-
-Learn how to update your existing functionality that relies on parsing the
-User-Agent string to make use of User-Agent Client Hints instead.
-
-## Background
-
-When web browsers make requests they include information about the browser and
-its environment so that servers can enable analytics and customize the response.
-This was defined all the way back in 1996 (RFC 1945 for HTTP/1.0), where you can
-find the [original definition for the User-Agent
-string](https://tools.ietf.org/html/rfc1945#section-10.15), which includes an
-example:
-
-```text
-User-Agent: CERN-LineMode/2.15 libwww/2.17b3
-```
-
-This header was intended to specify, in order of significance, the product (e.g.
-browser or library) and a comment (e.g. version).
-
-### The state of the User-Agent string
-
-Over the intervening _decades_, this string has accrued a variety of additional
-details about the client making the request (as well as cruft, due to backwards
-compatibility). We can see that when looking at Chrome's current User-Agent
-string:
-
-```text
-Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
-```
-
-The above string contains information about the user's operating system and
-version, the device model, the browser's brand and full version, enough clues to
-infer it's a mobile browser, and not to mention a number of references to other
-browsers for historical reasons.
-
-The combination of these parameters with the sheer diversity of possible values
-means the User-Agent string could contain enough information to allow individual
-users to be uniquely identified. If you test your own browser at
-[AmIUnique](https://amiunique.org/), you can see just how closely **your**
-User-Agent string identifies **you**. The lower your resulting "Similarity
-ratio" is, the more unique your requests are, the easier it is for servers to
-covertly track you.
-
-The User-Agent string enables many legitimate [use
-cases](https://github.com/WICG/ua-client-hints/blob/master/README.md#use-cases),
-and serves an important purpose for developers and site owners. However, it is
-also critical that users' privacy is protected against covert tracking methods,
-and sending UA information by default goes against that goal.
-
-There's also a need to improve web compatibility when it comes to the User-Agent
-string. It is unstructured, so parsing it results in unnecessary complexity,
-which is often the cause for bugs and site compatibility issues that hurt users.
-These issues also disproportionately hurt users of less common browsers, as
-sites may have failed to test against their configuration.
-
-## Introducing the new User-Agent Client Hints
-
-[User-Agent Client
-Hints](https://github.com/WICG/ua-client-hints#explainer-reducing-user-agent-granularity)
-enable access to the same information but in a more privacy-preserving way, in
-turn enabling browsers to eventually reduce the User-Agent string's default of
-broadcasting everything. [Client
-Hints](https://tools.ietf.org/html/draft-ietf-httpbis-client-hints) enforce a
-model where the server must ask the browser for a set of data about the client
-(the hints) and the browser applies its own policies or user configuration to
-determine what data is returned. This means that rather than exposing **all**
-the User-Agent information by default, access is now managed in an explicit and
-auditable fashion. Developers also benefit from a simpler API - no more regular
-expressions!
-
-The current set of Client Hints primarily describes the browser's display and
-connection capabilities. You can explore the details in [Automating Resource
-Selection with Client
-Hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints),
-but here's a quick refresher on the process.
-
-The server asks for specific Client Hints via a header:
-
-⬇️ _Response from server_
-
-```text
-Accept-CH: Viewport-Width, Width
-```
-
-Or a meta tag:
-
-```html
-<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
-```
-
-The browser can then choose to send the following headers back in subsequent
-requests:
-
-⬆️ _Subsequent request_
-
-```text
-Viewport-Width: 460
-Width: 230
-```
-
-The server can choose to vary its responses, for example by serving images at an
-appropriate resolution.
-
-{% Aside %}
-  There are ongoing discussions on enabling Client Hints on an initial request,
-  but you should be considering [responsive
-  design](/responsive-web-design-basics) or progressive enhancement before going
-  down this route.
-{% endAside %}
-
-User-Agent Client Hints expand the range of properties that can be specified via
-the `Accept-CH` server response header. When the browser returns information it
-will use the `Sec-CH-UA` prefix. For all the details, start with [the
-explainer](https://github.com/WICG/ua-client-hints/blob/master/README.md) and
-then dive into the [full proposal](https://wicg.github.io/ua-client-hints/).
-
-{% Aside %}
-  Client Hints are **only sent over secure connections**, so make sure you have
-  [migrated your site to HTTPS](https://web.dev/why-https-matters/).
-{% endAside %}
-
-The new set of hints is available from Chromium 84, so let's explore how it
-all works.
-
-## User-Agent Client Hints in Chromium 84
-
-User-Agent Client Hints will only be enabled gradually on Chrome Stable as
-[compatibility
-concerns](https://bugs.chromium.org/p/chromium/issues/detail?id=1091285) are
-resolved. To force the functionality on for testing, ensure you:
-
-  * are on Chrome 84 **beta** or equivalent
-  * enable the `chrome://flags/#enable-experimental-web-platform-features` flag
-
-By default, the browser returns the browser brand, significant / major version,
-and an indicator if the client is a mobile device:
-
-⬆️ _All requests_
-
-```text
-Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
-Sec-CH-UA-Mobile: ?0
-```
-
-{% Aside 'caution' %}
-  These properties are more complex than just a single value, so [Structured
-  Headers](https://httpwg.org/http-extensions/draft-ietf-httpbis-header-structure.html)
-  are used for representing lists and booleans.
-{% endAside %}
-
-### User-Agent response and request headers
-
-<style>
-.w-table-wrapper th:nth-of-type(4) {
-    width: 28ch;
-}
-
-.w-table-wrapper td {
-  font-size: 88%;
-  padding: 4px 8px 4px 0;
-}
-</style>
-
-| ⬇️ Response<br>`Accept-CH` | ⬆️ Request<br>header         | ⬆️ Request<br>Example value                      | <br>Description                                                                                                                                                              |
-| -------------------------- | ---------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `UA`                       | `Sec-CH-UA`                  | `"Chromium";v="84",`<br>`"Google Chrome";v="84"` | List of browser brands and their significant version.                                                                                                                        |
-| `UA-Mobile`                | `Sec-CH-UA-Mobile`           | `?1`                                             | Boolean indicating if the browser is on a mobile device (`?1` for true) or not (`?0` for false).                                                                             |
-| `UA-Full-Version`          | `Sec-CH-UA-Full-Version`     | `"84.0.4143.2"`                                  | The complete version for the browser.                                                                                                                                        |
-| `UA-Platform`              | `Sec-CH-UA-Platform`         | `"Android"`                                      | The platform for the device, usually the operating system (OS).                                                                                                              |
-| `UA-Platform-Version`      | `Sec-CH-UA-Platform-Version` | `"10"`                                           | The version for the platform or OS.                                                                                                                                          |
-| `UA-Arch`                  | `Sec-CH-UA-Arch`             | `"ARM64"`                                        | The underlying architecture for the device. While this may not be relevant to displaying the page, the site may want to offer a download which defaults to the right format. |
-| `UA-Model`                 | `Sec-CH-UA-Model`            | `"Pixel 3"`                                      | The device model.                                                                                                                                                            |
-
-{% Aside 'gotchas' %}
-  Privacy and compatibility considerations mean the value may be blank, not
-  returned, or populated with a varying value. This is referred to as
-  [GREASE](https://wicg.github.io/ua-client-hints/#grease).
-{% endAside %}
-
-### Example exchange
-
-An example exchange would look like this:
-
-⬆️ _Initial request from browser_<br> The browser is requesting the `/downloads`
-page from the site and sends its default basic User-Agent.
-
-```text
-GET /downloads HTTP/1.1
-Host: example.site
-
-Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
-Sec-CH-UA-Mobile: ?0
-```
-
-⬇️ _Response from server_<br> The server sends the page back and additionally
-asks for the full browser version and the platform.
-
-```text
-HTTP/1.1 200 OK
-Accept-CH: UA-Full-Version, UA-Platform
-```
-
-⬆️ _Subsequent requests_<br> The browser grants the server access to the
-additional information and sends the extra hints back in all subsequent
-responses.
-
-```text
-GET /downloads/app1 HTTP/1.1
-Host: example.site
-
-Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
-Sec-CH-UA-Mobile: ?0
-Sec-CH-UA-Full-Version: "84.0.4143.2"
-Sec-CH-UA-Platform: "Android"
-```
-
-### JavaScript API
-
-Alongside the headers, the User-Agent can also be accessed in JavaScript via
-`navigator.userAgentData`. The default `Sec-CH-UA` and `Sec-CH-UA-Mobile` header
-information can be accessed via the `brands` and `mobile` properties,
-respectively:
-
-```js
-// Log the brand data
-console.log(navigator.userAgentData.brands);
-
-// output
-[
-  {
-    brand: 'Chromium',
-    version: '84',
-  },
-  {
-    brand: 'Google Chrome',
-    version: '84',
-  },
-];
-
-// Log the mobile indicator
-console.log(navigator.userAgentData.mobile);
-
-// output
-false;
-```
-
-The additional values are accessed via the `getHighEntropyValues()` call. The
-"high entropy" term is a reference to [information
-entropy](<https://en.wikipedia.org/wiki/Entropy_(information_theory)>), in other
-words - the amount of information that these values reveal about the user's
-browser. As with requesting the additional headers, it's down to the browser
-what values, if any, are returned.
-
-```js
-// Log the full user-agent data
-navigator
-  .userAgentData.getHighEntropyValues(
-    ["architecture", "model", "platform", "platformVersion",
-     "uaFullVersion"])
-  .then(ua => { console.log(ua) });
-
-// output
-{
-  "architecture": "x86",
-  "model": "",
-  "platform": "Linux",
-  "platformVersion": "",
-  "uaFullVersion": "84.0.4143.2"
-}
-```
-
-### Demo
-
-You can try out both the headers and the JavaScript API on your own device at
-[user-agent-client-hints.glitch.me](https://user-agent-client-hints.glitch.me).
-
-{% Glitch {
-  id: 'user-agent-client-hints',
-  path: 'README.md',
-  height: 600
-} %}
-
-{% Aside %}
-  Ensure you're using Chrome 84 Beta or equivalent with
-  `chrome://flags/#enable-experimental-web-platform-features` enabled.
-{% endAside %}
-
-### Hint life-time and resetting
-
-Hints specified via the `Accept-CH` header will be sent for the duration of the
-browser session or until a different set of hints are specified.
-
-That means if the server sends:
-
-⬇️ _Response_
-
-```text
-Accept-CH: UA-Full-Version
-```
-
-Then the browser will send the `Sec-CH-UA-Full-Version` header on all requests
-for that site until the browser is closed.
-
-⬆️ _Subsequent requests_
-
-```text
-Sec-CH-UA-Full-Version: "84.0.4143.2"
-```
-
-However, if another `Accept-CH` header is received then that will **completely
-replace** the current hints the browser is sending.
-
-⬇️ _Response_
-
-```text
-Accept-CH: UA-Platform
-```
-
-⬆️ _Subsequent requests_
-
-```text
-Sec-CH-UA-Platform: "Android"
-```
-
-The previously asked-for `Sec-CH-UA-Full-Version` **will not be sent**.
-
-It's best to think of the `Accept-CH` header as specifying the complete set of
-hints desired for that page, meaning the browser then sends the specified hints
-for all the subresources on that page. While hints will persist to the next
-navigation, the site should not rely or assume they will be delivered.
-
-{% Aside 'success' %}
-  Always ensure you can still deliver a meaningful experience without this
-  information. This is to enhance the user experience, not define it. That's why
-  they're called "hints" and not "answers" or "requirements"!
-{% endAside%}
-
-You can also use this to effectively clear all hints being sent by the browser
-by sending a blank `Accept-CH` in the response. Consider adding this anywhere
-that the user is resetting preferences or signing out of your site.
-
-This pattern also matches how hints work via the
-`<meta http-equiv="Accept-CH" …>` tag. The requested hints will only be sent on
-requests initiated by the page and not on any subsequent navigation.
-
-### Hint scope and cross-origin requests
-
-By default, Client Hints will only be sent on same-origin requests. That means
-if you ask for specific hints on `https://example.com`, but the resources you
-want to optimize are on `https://downloads.example.com` they **will not**
-receive any hints.
-
-To allow hints on cross-origin requests each hint and origin must be specified
-by a `Feature-Policy` header. This specifies each hint (prefixed with `ch-`) and
-the allowlist of origins that should receive the hint. For example:
-
-⬇️ _Response from `example.com`_
-
-```text
-Accept-CH: UA-Platform, DPR
-Feature-Policy: ch-UA-Platform downloads.example.com;
-                ch-DPR cdn.provider img.example.com
-```
-
-⬆️ _Request to `downloads.example.com`_
-
-```text
-Sec-CH-UA-Platform: "Android"
-```
-
-⬆️ _Requests to `cdn.provider` or `img.example.com`_
-
-```text
-DPR: 2
-```
-
-## Where to use User-Agent Client Hints?
-
-The quick answer is that you should refactor any instances where you are parsing
-either the User-Agent header or making use of any of the JavaScript calls that
-access the same information (i.e. `navigator.userAgent`, `navigator.appVersion`,
-or `navigator.platform`) to make use of User-Agent Client Hints instead.
-
-Taking this a step further, you should re-examine your use of User-Agent
-information, and replace it with other methods whenever possible. Often, you can
-accomplish the same goal by making use of progressive enhancement, feature
-detection, or [responsive design](https://web.dev/responsive-web-design-basics).
-The base problem with relying on the User-Agent data is that you are always
-maintaining a mapping between the property you're inspecting and the behavior it
-enables. It's a maintenance overhead to ensure that your detection is
-comprehensive and remains up-to-date.
-
-With these caveats in mind, the [User-Agent Client Hints repo lists some valid
-use cases](https://github.com/WICG/ua-client-hints#use-cases) for sites.
-
-## What happens to the User-Agent string?
-
-The plan is to minimize the ability for covert tracking on the web by reducing
-the amount of identifying information exposed by the existing User-Agent string
-while not causing undue disruption on existing sites. Introducing User-Agent
-Client Hints now gives you a chance to understand and experiment with the new
-capability, before any changes are made to User-Agent strings.
-
-[Eventually](https://groups.google.com/a/chromium.org/d/msg/blink-dev/-2JIRNMWJ7s/u-YzXjZ8BAAJ),
-the information in the User-Agent string will be reduced so it maintains the
-legacy format while only providing the same high-level browser and significant
-version information as per the default hints. In Chromium, this change has been
-deferred until at least 2021 to provide additional time for the ecosystem to
-evaluate the new User Agent Client Hints capabilities.
-
-You can test a version of this by enabling the
-`chrome://flags/#freeze-user-agent` flag from Chrome 84. This will return a
-string with the historical entries for compatibility reasons, but with sanitized
-specifics. For example, something like:
-
-```text
-Mozilla/5.0 (Linux; Android 9; Unspecified Device) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.0.0 Mobile Safari/537.36
-```
-
-_Photo by [Sergey Zolkin](https://unsplash.com/@szolkin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
-on
-[Unsplash](https://unsplash.com/photos/m9qMoh-scfE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/user-agent-client-hints/uach-hero.jpg b/src/site/content/en/blog/user-agent-client-hints/uach-hero.jpg
deleted file mode 100644
index 4c58171d164..00000000000
Binary files a/src/site/content/en/blog/user-agent-client-hints/uach-hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/user-agent-client-hints/uach-thumbnail.jpg b/src/site/content/en/blog/user-agent-client-hints/uach-thumbnail.jpg
deleted file mode 100644
index 24446e5bd1b..00000000000
Binary files a/src/site/content/en/blog/user-agent-client-hints/uach-thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/user-location/index.md b/src/site/content/en/blog/user-location/index.md
new file mode 100644
index 00000000000..42b65b36634
--- /dev/null
+++ b/src/site/content/en/blog/user-location/index.md
@@ -0,0 +1,420 @@
+---
+layout: post
+title: User Location
+subhead: The Geolocation API lets you discover the user's location, given their consent.
+description: >
+  Most browsers and devices have access to the user's geographic location. Learn how to work with the user's location in your site and apps.
+authors:
+  - paulkinlan
+date: 2014-01-01
+updated: 2018-09-20
+---
+
+The Geolocation API lets you discover, with the user's consent, the user's location. You can use this functionality for things like guiding a user to their destination and geo-tagging user-created content; for example, marking where a photo was taken.
+
+The Geolocation API also lets you see where the user is and keep tabs on them as
+they move around, always with the user's consent (and only while the page is open). This
+creates a lot of interesting use cases, such as integrating with backend systems to prepare an order for collection if the user is close by.
+
+You need to be aware of many things when using the Geolocation API. This guide walks you through the common use cases and solutions.
+
+{% Aside %}
+As of Chrome 50, the [Geolocation API only works on secure contexts (HTTPS)](/web/updates/2016/04/geolocation-on-secure-contexts-only). If your site is hosted on a non-secure origin (such as `HTTP`), any requests for the user's location **no longer** function.
+{% endAside %}
+
+### Summary
+
+- Use geolocation when it benefits the user.
+- Ask for permission as a clear response to a user gesture.
+- Use feature detection in case a user's browser doesn't support geolocation.
+- Don't just learn how to implement geolocation; learn the best way to use geolocation.
+- Test geolocation with your site.
+
+## When to use geolocation
+
+- Find where the user is closest to a specific physical location to tailor
+  the user experience.
+- Tailor information (such as news) to the user's location.
+- Show the position of a user on a map.
+- Tag data created inside your application with the user's location
+  (that is, geo-tag a picture).
+
+## Ask permission responsibly
+
+Recent user studies [have shown](http://static.googleusercontent.com/media/www.google.com/en/us/intl/ALL_ALL/think/multiscreen/pdf/multi-screen-moblie-whitepaper_research-studies.pdf)
+that users are distrustful of sites that simply prompt the user to give away their
+position on page load. So what are the best practices?
+
+### Assume users will not give you their location
+
+Many of your users won't want to give you their
+location, so you need to adopt a defensive development style.
+
+1.  Handle all errors out of the geolocation API so that you can adapt your
+    site to this condition.
+2.  Be clear and explicit about your need for the location.
+3.  Use a fallback solution if needed.
+
+### Use a fallback if geolocation is required
+
+We recommend that your site or application not require
+access to the user's current location. However, if your site or application
+requires the user's current location, there are third-party solutions that allow you to obtain
+a best guess of where the person currently is.
+
+These solutions often work by looking at the user's IP address and mapping that
+to the physical addresses registered with the RIPE database. These locations
+are often not very accurate, normally giving you the position of the
+telecommunications hub or cell phone tower that is nearest to the user. In many
+cases, they might not even be that accurate, especially if the user is on VPN
+or some other proxy service.
+
+### Always request access to location on a user gesture
+
+Make sure that users understand why you’re asking for their location, and what
+the benefit to them will be. Asking for it immediately on the homepage as
+the site loads results in a poor user experience.
+
+<div class="switcher">
+<figure>
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/qn1gpMoMl6ho9iXZotf9.png", alt="A site requesting permission on a store finder page.", width="325", height="550" %}
+<figcaption class="success">
+    <b>DO</b>: Always request access to location on a user gesture.
+    </figcaption>
+</figure>
+<figure id="fig1">
+{% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/IjhzpxZecuHdV0tUCIxm.png", alt="A site requesting permission on the homepage.", width="325", height="550" %}
+<figcaption class="warning">
+    <b>DON'T</b>: Ask for it on the homepage, as the site loads; this results in a poor user experience.
+</figcaption>
+</figure>
+</div>
+
+Instead, give the user a clear call to action or an indication that
+an operation will require access to their location. The user can then more easily associate the system prompt for access with the action
+just initiated.
+
+### Give a clear indication that an action will request their location
+
+[In a study by the Google Ads team](http://static.googleusercontent.com/media/www.google.com/en/us/intl/ALL_ALL/think/multiscreen/pdf/multi-screen-moblie-whitepaper_research-studies.pdf),
+when a user was asked to book a hotel room in Boston for an upcoming conference
+on one particular hotels site, they were prompted to share their GPS location
+immediately after tapping the "Find and Book" call to action on the homepage.
+
+In some cases, the user became frustrated because they didn't understand why
+they were being shown hotels in San Francisco when they wanted to book a room in
+Boston.
+
+A better experience is to make sure users understand why you’re asking
+them for their location. Add a well-known signifier that is common across
+devices, such as a range finder, or an explicit call to action such as
+“Find Near Me.”
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/ZuaG9vfBWZTXrYR2486u.png", alt="A range finder.", width="800", height="170" %}
+    <figcaption>
+      Use a range finder
+     </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/C47gYyWYVMMhDmtYSLOWazuyePF2/rlGQ3rvswe4M1nhKeYw8.png", alt="A form with a find near me button.", width="740", height="314" %}
+    <figcaption>
+      A specific call to action to find near me
+    </figcaption>
+  </figure>
+</div>
+
+### Gently nudge users to grant permission to their location
+
+You don't have access to anything users are doing. You know
+exactly when users disallow access to their locations but you don't know
+when they grant you access; you only know you obtained access when results
+appear.
+
+It's good practice to "nudge" users into action if you need them to
+complete the action.
+
+We recommend:
+
+1.  Set up a timer that triggers after a short period; 5 seconds is a
+    good value.
+2.  If you get an error message, show a message to the user.
+3.  If you get a positive response, disable the timer and process the results.
+4.  If, after the timeout, you haven't gotten a positive response, show a
+    notification to the user.
+5.  If the response comes in later and the notification is still present,
+    remove it from the screen.
+
+```js
+button.onclick = function () {
+  var startPos;
+  var nudge = document.getElementById('nudge');
+
+  var showNudgeBanner = function () {
+    nudge.style.display = 'block';
+  };
+
+  var hideNudgeBanner = function () {
+    nudge.style.display = 'none';
+  };
+
+  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
+
+  var geoSuccess = function (position) {
+    hideNudgeBanner();
+    // We have the location, don't display banner
+    clearTimeout(nudgeTimeoutId);
+
+    // Do magic with location
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  var geoError = function (error) {
+    switch (error.code) {
+      case error.TIMEOUT:
+        // The user didn't accept the callout
+        showNudgeBanner();
+        break;
+    }
+  };
+
+  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
+};
+```
+
+## Browser support
+
+The majority of browsers now support the Geolocation API but it's a
+good practice to always check for support before you do anything.
+
+You can easily check for compatibility by testing for the presence of the
+geolocation object:
+
+```js
+// check for Geolocation support
+if (navigator.geolocation) {
+  console.log('Geolocation is supported!');
+} else {
+  console.log('Geolocation is not supported for this Browser/OS.');
+}
+```
+
+## Determining the user's current location
+
+The Geolocation API offers a simple, "one-shot" method to obtain the user's
+location: `getCurrentPosition()`. A call to this method asynchronously
+reports on the user's current location.
+
+```js
+window.onload = function () {
+  var startPos;
+  var geoSuccess = function (position) {
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  navigator.geolocation.getCurrentPosition(geoSuccess);
+};
+```
+
+If this is the first time that an application on this domain has requested
+permissions, the browser typically checks for user consent. Depending on
+the browser, there may also be preferences to always allow&mdash;or disallow&mdash;permission lookups, in which case the confirmation process is bypassed.
+
+Depending on the location device your browser is using, the position object
+might actually contain a lot more than just latitude and longitude; for
+example, it might include an altitude or a direction. You can't tell what
+extra information that location system uses until it actually returns
+the data.
+
+## Watching the user's location
+
+The Geolocation API allows you to obtain the user's location (with user
+consent) with a single call to `getCurrentPosition()`.
+
+If you want to continually monitor the user's location, use the Geolocation
+API method, `watchPosition()`. It operates in a similar way to
+`getCurrentPosition()`, but it fires multiple times as the positioning
+software:
+
+1.  Gets a more accurate lock on the user.
+2.  Determines that the user's position is changing.
+
+```js
+var watchId = navigator.geolocation.watchPosition(function (position) {
+  document.getElementById('currentLat').innerHTML = position.coords.latitude;
+  document.getElementById('currentLon').innerHTML = position.coords.longitude;
+});
+```
+
+### When to use geolocation to watch the user's location
+
+- You want to obtain a more precise lock on the user location.
+- Your application needs to update the user interface based on new location
+  information.
+- Your application needs to update business logic when the user enters a certain
+  defined zone.
+
+## Best practices when using geolocation
+
+### Always clear up and conserve battery
+
+Watching for changes to a geolocation is not a free operation. While
+operating systems might be introducing platform features to let applications
+hook in to the geo subsystem, you, as a web developer, have no idea what support
+the user's device has for monitoring the user's location, and, while you're watching
+a position, you are engaging the device in a lot of extra processing.
+
+After you no longer need to track the user's position, call `clearWatch` to turn
+off the geolocation systems.
+
+### Handle errors gracefully
+
+Unfortunately, not all location lookups are successful. Perhaps a GPS could
+not be located or the user has suddenly disabled location lookups. In the event of an
+error, a second, optional argument to `getCurrentPosition()` is called so that you can notify the user inside the callback:
+
+```js
+window.onload = function () {
+  var startPos;
+  var geoSuccess = function (position) {
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  var geoError = function (error) {
+    console.log('Error occurred. Error code: ' + error.code);
+    // error.code can be:
+    //   0: unknown error
+    //   1: permission denied
+    //   2: position unavailable (error response from location provider)
+    //   3: timed out
+  };
+  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
+};
+```
+
+### Reduce the need to start geolocation hardware
+
+For many use cases, you don't need the user's most up-to-date location;
+you just need a rough estimate.
+
+Use the `maximumAge` optional property to tell the browser to use a recently
+obtained geolocation result. This not only returns more quickly if the user has
+requested the data before, but it also prevents the browser from starting
+its geolocation hardware interfaces such as Wifi triangulation or the GPS.
+
+```js
+window.onload = function () {
+  var startPos;
+  var geoOptions = {
+    maximumAge: 5 * 60 * 1000,
+  };
+
+  var geoSuccess = function (position) {
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  var geoError = function (error) {
+    console.log('Error occurred. Error code: ' + error.code);
+    // error.code can be:
+    //   0: unknown error
+    //   1: permission denied
+    //   2: position unavailable (error response from location provider)
+    //   3: timed out
+  };
+
+  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
+};
+```
+
+### Don't keep the user waiting, set a timeout
+
+Unless you set a timeout, your request for the current position might never return.
+
+```js
+window.onload = function () {
+  var startPos;
+  var geoOptions = {
+    timeout: 10 * 1000,
+  };
+
+  var geoSuccess = function (position) {
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  var geoError = function (error) {
+    console.log('Error occurred. Error code: ' + error.code);
+    // error.code can be:
+    //   0: unknown error
+    //   1: permission denied
+    //   2: position unavailable (error response from location provider)
+    //   3: timed out
+  };
+
+  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
+};
+```
+
+### Prefer a coarse location over a fine-grained location
+
+If you want to find the nearest store to a user, it's unlikely that you need
+1-meter precision. The API is designed to give a coarse
+location that returns as quickly as possible.
+
+If you do need a high level of precision, it's possible to override the default setting
+with the `enableHighAccuracy` option. Use this sparingly: it's slower
+to resolve and uses more battery.
+
+```js
+window.onload = function () {
+  var startPos;
+  var geoOptions = {
+    enableHighAccuracy: true,
+  };
+
+  var geoSuccess = function (position) {
+    startPos = position;
+    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
+  };
+  var geoError = function (error) {
+    console.log('Error occurred. Error code: ' + error.code);
+    // error.code can be:
+    //   0: unknown error
+    //   1: permission denied
+    //   2: position unavailable (error response from location provider)
+    //   3: timed out
+  };
+
+  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
+};
+```
+
+## Emulate geolocation with Chrome DevTools {: #devtools }
+
+<figure>
+{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/eyujkgsO6S5KupD8L7Ev.png", alt="The sensor tab in DevTools.", width="800", height="485" %}
+</figure>
+
+Once you've got geolocation set up, you'll want to:
+
+- Test out how your app works in different geolocations.
+- Verify that your app degrades gracefully when geolocation is not available.
+
+You can do both from Chrome DevTools.
+
+1. [Open Chrome DevTools](/web/tools/chrome-devtools/#open).
+2. Press <kbd>Esc</kbd> to [Open the Console drawer](/web/tools/chrome-devtools/console/#open_as_drawer).
+3. [Open the Console drawer menu](/web/tools/chrome-devtools/settings#drawer-tabs)
+4. Click the **Sensors** option to show the Sensors tab.
+
+From here you can override the location to a preset major city,
+enter a custom location, or disable geolocation by setting the override
+to **Location unavailable**.
+
+## Feedback {: #feedback }
diff --git a/src/site/content/en/blog/user-preference-media-features-headers/index.md b/src/site/content/en/blog/user-preference-media-features-headers/index.md
new file mode 100644
index 00000000000..29d5b9e18e6
--- /dev/null
+++ b/src/site/content/en/blog/user-preference-media-features-headers/index.md
@@ -0,0 +1,214 @@
+---
+title: User preference media features client hints headers
+subhead:
+  A set of client hint headers allows sites to obtain the user's media preferences optionally
+  at request time, allowing servers to inline the right CSS for performance reasons.
+authors:
+  - thomassteiner
+  - beaufortfrancois
+date: 2021-08-02
+updated: 2022-09-30
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/8O1JKZ6YxdA0IIuYtECB.jpg
+alt: Sun and moon
+tags:
+  - blog
+  # - dark-mode
+  # - dark-theme
+  # - prefers-color-scheme
+  # - color-scheme
+  - css
+---
+
+CSS media queries, and specifically
+[user preference media features](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) like
+[`prefers-color-scheme`](/prefers-color-scheme/) or
+[`prefers-reduced-motion`](/prefers-reduced-motion/), have a potentially
+[significant impact](https://webkit.org/blog/8892/dark-mode-in-web-inspector/#:~:text=Implementing%20Dark%20Mode%20took%20over%201%2C000%20lines%20of%20CSS.)
+on the amount of CSS that needs to be delivered by a page, and on the experience the user is going
+to have when the page loads.
+
+Focusing on `prefers-color-scheme`—but highlighting that the reasoning applies to other user
+preference media features as well—it is a best practice to not load CSS for the particular
+non-matching color scheme in the critical rendering path, and instead to initially only load the
+currently relevant CSS. One way of doing so is
+[via `<link media>`](/prefers-color-scheme/#loading-strategy).
+
+However, high-traffic sites like [Google Search](https://www.google.com/) that wish to honor user
+preference media features like `prefers-color-scheme` and that inline CSS for performance reasons,
+need to know about the preferred color scheme (or other user preference media features respectively)
+ideally at request time, so that the initial HTML payload already has the right CSS inlined.
+
+Additionally, and specifically for `prefers-color-scheme`, sites by all means want to avoid a
+[flash of inaccurate color theme](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/).
+
+The `Sec-CH-Prefers-Color-Scheme` and the `Sec-CH-Prefers-Reduced-Motion` client hint headers are the first of a
+[series of user preference media features client hints headers](https://wicg.github.io/user-preference-media-features-headers/)
+that aims to solve this issue.
+
+### Background on client hints
+
+[HTTP Client Hints](https://datatracker.ietf.org/doc/html/rfc8942) defines an `Accept-CH` response
+header that servers can use to advertise their use of request headers for proactive content
+negotiation, colloquially referred to as client hints. The
+[User Preference Media Features Client Hints Headers](https://wicg.github.io/user-preference-media-features-headers/)
+proposal defines a set of client hints aimed at conveying user preference media features. These
+client hints are named after the corresponding user preference media feature that they report on.
+For example, the currently preferred color scheme as per `prefers-color-scheme` is reported via the
+aptly named `Sec-CH-Prefers-Color-Scheme` client hint.
+
+### Background on critical client hints
+
+The client hints proposed in
+[User Preference Media Features Client Hints Headers](https://wicg.github.io/user-preference-media-features-headers/)
+will presumably most commonly be used as
+[Critical Client Hints](https://tools.ietf.org/html/draft-davidben-http-client-hint-reliability-02).
+Critical Client Hints are Client Hints which meaningfully change the resulting resource. Such a
+resource should be fetched consistently across page loads (including the _initial_ page load) to
+avoid jarring user-visible switches.
+
+### Client hint syntax
+
+User preference media features consist of a name (like `prefers-reduced-motion`) and allowed values
+(like `no-preference` or `reduce`). Each client hint header field is represented as
+[Structured Headers for HTTP](https://tools.ietf.org/html/draft-ietf-httpbis-header-structure-15)
+object containing an
+[item](https://tools.ietf.org/html/draft-ietf-httpbis-header-structure-15#section-3.3) whose value
+is a [string](https://tools.ietf.org/html/draft-ietf-httpbis-header-structure-15#section-3.3.3). For
+example, to convey that the user prefers a dark theme and reduced motion, the client hints look like
+in the example below.
+
+```bash
+GET / HTTP/2
+Host: example.com
+Sec-CH-Prefers-Color-Scheme: "dark"
+Sec-CH-Prefers-Reduced-Motion: "reduce"
+```
+
+The CSS equivalent of the information conveyed in the above client hints is
+`@media (prefers-color-scheme: dark) {}` and `@media (prefers-reduced-motion: reduce) {}`
+respectively.
+
+## Complete list of the client hints
+
+{% Aside %} While the
+[User Preference Media Features Client Hints Headers](https://wicg.github.io/user-preference-media-features-headers/)
+proposal defines a set of client hints, Chromium at the time of writing only supports
+`Sec-CH-Prefers-Color-Scheme` and `Sec-CH-Prefers-Reduced-Motion`. {% endAside %}
+
+The list of the client hints is modeled after the
+[user preference media features](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) in
+[Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme).
+
+| Client Hint                           | Allowed Values                                                                                                                                                                                                                                                                                                                                                                   | Corresponding User Preference Media Feature                                                             |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `Sec-CH-Prefers-Reduced-Motion`       | [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-motion-no-preference), [`reduce`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-motion-reduce)                                                                                                                                                                   | [`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)             |
+| `Sec-CH-Prefers-Reduced-Transparency` | [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-transparency-no-preference), [`reduce`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-transparency-reduce)                                                                                                                                                       | [`prefers-reduced-transparency`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency) |
+| `Sec-CH-Prefers-Contrast`             | [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-no-preference), [`less`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-less), [`more`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-more), [`custom`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-custom) | [`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)                         |
+| `Sec-CH-Forced-Colors`                | [`active`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-forced-colors-active), [`none`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-forced-colors-none)                                                                                                                                                                                                       | [`forced-colors`](https://drafts.csswg.org/mediaqueries-5/#forced-colors)                               |
+| `Sec-CH-Prefers-Color-Scheme`         | [`light`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-light), [`dark`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-color-scheme-dark)                                                                                                                                                                                           | [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)                 |
+| `Sec-CH-Prefers-Reduced-Data`         | [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-data-no-preference), [`reduce`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-reduced-data-reduce)                                                                                                                                                                       | [`prefers-reduced-data`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data)                 |
+
+## Browser support
+
+The `Sec-CH-Prefers-Color-Scheme` client hint header is supported on Chromium&nbsp;93.
+The `Sec-CH-Prefers-Reduced-Motion` client hint header is supported on Chromium&nbsp;108.
+Other vendors' feedback, namely [WebKit's](https://lists.webkit.org/pipermail/webkit-dev/2021-May/031856.html)
+and [Mozilla's](https://github.com/mozilla/standards-positions/issues/526), is pending.
+
+## Demo of `Sec-CH-Prefers-Color-Scheme`
+
+Try the [demo](https://sec-ch-prefers-color-scheme.glitch.me/) in Chromium&nbsp;93 and notice how
+the inlined CSS changes according to the user's preferred color scheme.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/pKAKyrN18CjhAYUNpJyk.png", alt="Sec-CH-Prefers-Color-Scheme: dark", width="800", height="541" %}
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/6Xujcgyveo0QY0E3LQOF.png", alt="Sec-CH-Prefers-Color-Scheme: light", width="800", height="541" %}
+
+## Demo of `Sec-CH-Prefers-Reduced-Motion`
+
+Try the [demo](https://sec-ch-prefers-reduced-motion.glitch.me/) in Chromium&nbsp;108 and notice how
+the inlined CSS changes according to the user's motion preferences.
+
+## How it works
+
+1. The client makes an initial request to the server.
+   ```bash
+   GET / HTTP/2
+   Host: example.com
+   ```
+1. The server responds, telling the client via `Accept-CH` that it accepts the
+   `Sec-CH-Prefers-Color-Scheme` and the `Sec-CH-Prefers-Contrast` Client Hints, out of which as per
+   `Critical-CH` it considers `Sec-CH-Prefers-Color-Scheme` a Critical Client Hint that it also
+   varies the response on as conveyed by `Vary`.
+   ```bash
+   HTTP/2 200 OK
+   Content-Type: text/html
+   Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast
+   Vary: Sec-CH-Prefers-Color-Scheme
+   Critical-CH: Sec-CH-Prefers-Color-Scheme
+   ```
+1. The client then retries the request, telling the server via `Sec-CH-Prefers-Color-Scheme` that it
+   has a user preference for dark-schemed content.
+   ```bash
+   GET / HTTP/2
+   Host: example.com
+   Sec-CH-Prefers-Color-Scheme: "dark"
+   ```
+1. The server can then tailor the response to the client's preferences accordingly and, for example,
+   inline the CSS responsible for the dark theme into the response body.
+
+## Node.js example
+
+The Node.js example below, written for the popular Express.js framework, shows how
+dealing with the `Sec-CH-Prefers-Color-Scheme` client hint header could look like in practice.
+This code is what actually powers the [demo](#demo-of-sec-ch-prefers-color-scheme) above.
+
+```js
+app.get("/", (req, res) => {
+  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
+  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
+  // …and that the server's response will vary based on its value…
+  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
+  // …and that the server considers this client hint a _critical_ client hint.
+  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
+  // Read the user's preferred color scheme from the headers…
+  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
+  // …and send the adequate HTML response with the right CSS inlined.
+  res.send(getHTML(prefersColorScheme));
+});
+```
+
+## Privacy and security considerations
+
+The Chromium team designed and implemented User Preference Media Features Client Hints Headers
+using the core principles defined in [Controlling Access to Powerful Web Platform
+Features][powerful-apis], including user control, transparency, and ergonomics.
+
+The [Security Considerations](https://datatracker.ietf.org/doc/html/rfc8942#section-4) of HTTP
+Client Hints and the
+[Security Considerations](https://tools.ietf.org/html/draft-davidben-http-client-hint-reliability-02#section-5)
+of Client Hint Reliability likewise apply to this proposal.
+
+## References
+
+- [Spec draft](https://wicg.github.io/user-preference-media-features-headers/)
+- [Explainer](https://github.com/WICG/user-preference-media-features-headers#readme)
+- [Sec-CH-Prefers-Color-Scheme - Chrome Status entry](https://chromestatus.com/feature/5642300464037888)
+- [Sec-CH-Prefers-Color-Scheme - Chromium bug](https://crbug.com/1207897)
+- [Sec-CH-Prefers-Reduced-Motion - Chrome Status entry](https://chromestatus.com/feature/5141804190531584)
+- [Sec-CH-Prefers-Reduced-Motion - Chromium bug](https://crbug.com/1361871)
+- [WebKit thread](https://lists.webkit.org/pipermail/webkit-dev/2021-May/031856.html)
+- [Mozilla Standards Position](https://github.com/mozilla/standards-positions/issues/526)
+- [Client Hints](https://datatracker.ietf.org/doc/html/rfc8942)
+- [Client Hint Reliability](https://tools.ietf.org/html/draft-davidben-http-client-hint-reliability-02)
+- [Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme)
+- [Structured Headers for HTTP](https://tools.ietf.org/html/draft-ietf-httpbis-header-structure-19)
+
+## Acknowledgements
+
+Many thanks for valuable feedback and advice from
+[Yoav Weiss](https://github.com/yoavweiss).
+Hero image by [Tdadamemd](https://commons.wikimedia.org/wiki/User:Tdadamemd) on
+[Wikimedia Commons](<https://commons.wikimedia.org/wiki/File:Sun%26Moon_apparent_sizes_(min-max_halved).jpg>).
+
+[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
diff --git a/src/site/content/en/blog/usertiming/index.md b/src/site/content/en/blog/usertiming/index.md
new file mode 100644
index 00000000000..78b4c0c1764
--- /dev/null
+++ b/src/site/content/en/blog/usertiming/index.md
@@ -0,0 +1,178 @@
+---
+title: User timing API
+subhead: Understanding your Web App
+authors:
+  - alexdanilo
+date: 2014-01-21
+tags:
+  - blog
+---
+
+High performance web applications are crucial to a great user experience. As web applications become more and more complex, understanding performance impact is vital to creating a compelling experience. Over the past few years, a number of different APIs have appeared in the browser to help analyse performance of the network, load times, etc. but these don’t necessarily give fine-grained detail with sufficient flexibility to find what’s slowing down your application. Enter the [User Timing API](http://www.w3.org/TR/user-timing/) which provides a mechanism you can use to instrument your web application to identify where your application is spending its time. In this article we’ll cover the API plus examples of how to use it.
+
+## You can’t optimize what you can’t measure
+
+The first step in speeding up a slow web application is working out where time is being spent. Measuring the time impact of areas of Javascript code is the ideal way to identify hot spots, which is the first step in finding how to improve performance. Fortunately the [User Timing API](http://www.w3.org/TR/user-timing/) provides a way that you can insert API calls at different parts of your Javascript and then extract detailed timing data that can be used to help you optimize.
+
+## High Resolution time and `now()`
+
+A fundamental part of accurate time measurement is precision. In the old days we had timing based around millisecond measurement which is OK, but building a jank-free 60 FPS site means each frame needs to be drawn in 16ms. So when you only have millisecond accuracy it lacks the precision needed for good analysis. Enter [High Resolution Time](http://www.w3.org/TR/hr-time/), a new timing type that’s built into modern browsers. [High Resolution Time](http://www.w3.org/TR/hr-time/) gives us floating point time stamps that can be accurate to microsecond resolution - a thousand times better than before.
+
+To get the current time in your web application, call the [`now()`](http://www.w3.org/TR/hr-time/#dom-performance-now) method which forms an [extension](http://www.w3.org/TR/hr-time/#sec-extenstions-performance-interface) of the [Performance](http://www.w3.org/TR/navigation-timing/#performance) interface. The following code shows how to do that:
+
+```js
+var myTime = window.performance.now();
+```
+
+There is another interface called [PerformanceTiming](http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) which provides a number of different times related to how your web application is loaded. The `now()` method returns the time elapsed from when the [`navigationStart`](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart)time in [PerformanceTiming](http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) happened.
+
+### The DOMHighResTimeStamp type
+
+When trying to time web applications in the past you’d use something like `Date.now()` which returns a [DOMTimeStamp](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Core-DOMTimeStamp). DOMTimeStamp returns an integer number of milliseconds as its value. In order to provide the higher accuracy needed for High Resolution time, a new type called [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp) was introduced. This type is a floating point value that also returns the time in milliseconds. But since it’s floating point, the value can represent fractional milliseconds, and so can yield an accuracy of one thousandth of a millisecond.
+
+## The User Timing Interface
+
+So now that we have high resolution time stamps, let’s use the [User Timing](http://www.w3.org/TR/user-timing/) interface to pull out timing information.
+
+The User Timing interface provides functions that let us call methods at different places in our application that can provide a Hansel and Gretel style breadcrumb trail to let us track where the time is being spent.
+
+### Using `mark()`
+
+The [`mark()`](http://www.w3.org/TR/user-timing/#dom-performance-mark) method is the main tool in our timing analysis toolkit. What `mark()` does is store a time stamp for us. What’s super useful about `mark()` is that we can name the time stamp, and the API will remember the name and the time stamp as a single unit.
+
+Calling `mark()` at various places in your application lets you work out how much time it took you hit that ‘mark’ in your web application.
+
+The specification calls out a number of suggested names for marks that might be interesting and are fairly self explanatory, such as `mark_fully_loaded`, `mark_fully_visible`,`mark_above_the_fold`, etc.
+
+For example, we could set a mark for when the application is fully loaded by using the following code:
+
+```js
+window.performance.mark('mark_fully_loaded');
+```
+
+By setting named marks throughout our web application we can gather a whole bunch of timing data and analyze it at our leisure to work out what the application is doing and when.
+
+### Calculating measurements with `measure()`
+
+Once you’ve set a bunch of timing marks, you’ll want to find out the elapsed time between them. You use the [`measure()`](http://www.w3.org/TR/user-timing/#dom-performance-measure) method to do that.
+
+The `measure()` method calculates the elapsed time between marks, and can also measure the time between your mark and any of the well-known event names in the [PerformanceTiming](http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) interface.
+
+For example, you could work out the time from the DOM being complete until your application state is fully loaded by using code like:
+
+```js
+window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
+```
+
+{% Aside %}
+In that example we are passing the well-known name [`domComplete`](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-domcomplete) from the [PerformanceTiming](http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) interface.
+{% endAside %}
+
+When you call `measure()` it stores the result independent of the marks you set, so you can retrieve them later. By storing away times as your application runs, the application remains responsive, and you can dump all the data out after your application has finished some work so it can be analyzed later.
+
+### Discarding marks with `clearMarks()`
+
+Sometimes it’s useful to be able to get rid of a bunch of marks that you’ve set up. For example, you might do batch runs on your web application and so you want to start fresh each run.
+
+It’s easy enough to get rid of any marks you’ve set up by calling [`clearMarks()`](http://www.w3.org/TR/user-timing/#dom-performance-clearmarks).
+
+So the example code below would blow away all the existing marks you have, so that you can set up a timing run again if you want.
+
+```js
+window.performance.clearMarks();
+```
+
+Of course, there are some scenarios where you might not want to clear all of your marks. So if you want to get rid of specific marks, you can just pass the name of the mark you want to remove. For example, the code below:
+
+```js
+window.peformance.clearMarks('mark_fully_loaded');
+```
+
+gets rid of the mark we set in the first example while leaving any other marks we set unchanged.
+
+You might want to get rid of any measures you’ve made as well, and there’s a corresponding method to do that called [`clearMeasures()`](http://www.w3.org/TR/user-timing/#dom-performance-clearmeasures). It works exactly the same as `clearMarks()` does, but instead working on any measurements you’ve made. For example, the code:
+
+```js
+window.performance.clearMeasures('measure_load_from_dom');
+```
+
+will remove the measure we made in the above `measure()` example. If you want to remove all measures, it works just the same as `clearMarks()` - in that you just call `clearMeasures()` without arguments.
+
+## Getting the timing data out
+
+It’s all well and good to set marks and measure intervals, but at some point you want to get at that timing data to perform some analysis. This is really simple too, all you have to do is use the [`PerformanceTimeline`](http://www.w3.org/TR/performance-timeline/#sec-performance-timeline) interface.
+
+For example, the [`getEntriesByType()`](http://www.w3.org/TR/performance-timeline/#dom-performance-getentriesbytype) method lets us get all our mark times, or all of our measure times out as a list so we can iterate over it and digest the data. What’s nice is that the list gets returned in chronological order, so you can see the marks in the order they were hit in your web application.
+
+The code below:
+
+```js
+var items = window.performance.getEntriesByType('mark');
+```
+
+returns us a list of all the marks that have been hit in our web application, whilst the code:
+
+```js
+var items = window.performance.getEntriesByType('measure');
+```
+
+returns us a list of all the measures we’ve made.
+
+You can also get back a list of entries by using the [specific name](http://www.w3.org/TR/performance-timeline/#dom-performance-getentriesbyname) you’ve given them. So for example, the code:
+
+```js
+var items = window.performance.getEntriesByName('mark_fully_loaded');
+```
+
+would return us a list with one item in it containing the ‘mark_fully_loaded’ time stamp in the [`startTime`](http://www.w3.org/TR/performance-timeline/#dom-performanceentry-starttime) property.
+
+## Timing an XHR request (example)
+
+Now that we have a decent picture of the User Timing API we can use it to analyze how long all our [XMLHttpRequests](http://www.w3.org/TR/XMLHttpRequest/) take in our web application.
+
+
+First we’ll modify all of our [`send()`](http://www.w3.org/TR/XMLHttpRequest/#the-send()-method) requests to issue a function call that sets up the marks, and at the same time change our success callbacks with a function call that sets another mark and then generates a measure of how long the request took.
+
+So normally our XMLHttpRequest would look something like:
+
+```js
+var myReq = new XMLHttpRequest();
+myReq.open('GET', url, true);
+myReq.onload = function(e) {
+  do_something(e.responseText);
+}
+myReq.send();
+```
+
+For our example we’ll add a global counter to track the number of requests and also to use it to store a measure for each request that’s made. The code to do this looks like:
+
+```js
+var reqCnt = 0;
+
+var myReq = new XMLHttpRequest();
+myReq.open('GET', url, true);
+myReq.onload = function(e) {
+  window.performance.mark('mark_end_xhr');
+  reqCnt++;
+  window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
+  do_something(e.responseText);
+}
+window.performance.mark('mark_start_xhr');
+myReq.send();
+```
+
+The code above generates a measure with a unique name value for every XMLHttpRequest we send. We’re assuming the requests run in sequence - the code for parallel requests would need to be a bit more complex to handle requests that return out of order, we’ll leave that as an exercise for the reader.
+
+Once the web application has done a bunch of requests we could dump them all to the console using the code below:
+
+```js
+var items = window.performance.getEntriesByType('measure');
+for (var i = 0; i &lt; items.length; ++i) {
+  var req = items[i];
+  console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
+}
+```
+
+## Conclusion
+
+The User Timing API gives you a lot of great tools to apply to any aspect of your web application. Narrowing down the hot-spots in your application can be easily achieved by sprinkling API calls throughout your web application and post-processing the timing data generated to create a clear picture of where time is being spent. But what if your browser doesn’t support this API? No problem, you can find a [great polyfill here](https://gist.github.com/pmeenan/5902672) that emulates the API really well and plays nicely with [webpagetest.org](http://www.webpagetest.org/) as well. So what are you waiting for? Try out the User Timing API on your applications now, you’ll work out how to speed them up and your users will thank you for making their experience so much better.
diff --git a/src/site/content/en/blog/using-tabindex/index.md b/src/site/content/en/blog/using-tabindex/index.md
new file mode 100644
index 00000000000..47a3e73515e
--- /dev/null
+++ b/src/site/content/en/blog/using-tabindex/index.md
@@ -0,0 +1,436 @@
+---
+layout: post
+title: Using tabindex
+subhead: Modifying the DOM order with tabindex
+description: |
+  Modifying the DOM order with tabindex
+authors:
+  - megginkearney
+  - dgash
+  - robdodson
+date: 2016-10-04
+updated: 2019-06-08
+---
+
+The default tab order provided by the DOM position of native elements is
+convenient, but there are times when you'll want to modify the tab order, and
+physically moving elements in the HTML isn't always an optimal, or even a
+feasible, solution. For these cases you can use the `tabindex` HTML attribute to
+explicitly set an element's tab position.
+
+{% BrowserCompat 'html.global_attributes.tabindex' %}
+
+`tabindex` can be applied to any element - although it is not necessarily
+useful on every element - and takes a range of integer values. Using
+`tabindex`, you can specify an explicit order for focusable page elements,
+insert an otherwise unfocusable element into the tab order, and remove elements
+from the tab order. For example:
+
+`tabindex="0"`: Inserts an element into the natural tab order. The element can
+be focused by pressing the `Tab` key, and the element can be focused by calling
+its `focus()` method
+
+```html
+<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>
+```
+
+<style>
+  custom-button {
+    margin: 10px;
+  }
+</style>
+<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>
+
+
+`tabindex="-1"`: Removes an element from the natural tab order, but the element
+can still be focused by calling its `focus()` method
+
+```html
+<button id="foo" tabindex="-1">I'm not keyboard focusable</button>
+<button onclick="foo.focus();">Focus my sibling</button>
+```
+
+
+<button id="foo" tabindex="-1">I'm not keyboard focusable</button>
+<button onclick="foo.focus();">Focus my sibling</button>
+
+
+`tabindex="5"`: Any tabindex greater than 0 jumps the element to the front of
+the natural tab order. If there are multiple elements with a tabindex greater
+than 0, the tab order starts from the lowest value that is greater than zero and
+works its way up. Using a tabindex greater than 0 is considered an
+**anti-pattern**.
+
+```html
+<button>I should be first</button>
+<button>And I should be second</button>
+<button tabindex="5">But I jumped to the front!</button>
+```
+
+<button>I should be first</button>
+<button>And I should be second</button>
+<button tabindex="5">But I jumped to the front!</button>
+
+
+This is particularly true of non-input elements like headers, images, or article
+titles. Adding `tabindex` to those kinds of elements is counter-productive. If
+possible, it's best to arrange your source code so the DOM sequence provides a
+logical tab order. If you do use `tabindex`, restrict it to custom interactive
+controls like buttons, tabs, dropdowns, and text fields; that is, elements the
+user might expect to provide input to.
+
+Don't worry about screen reader users missing important content because it
+doesn't have a `tabindex`. Even if the content is very important, like an image,
+if it's not something the user can interact with, there's no reason to make it
+focusable. Screen reader users can still understand the content of the image so
+long as you provide proper `alt` attribute support, which we'll cover shortly.
+
+## Managing focus at the page level
+
+Here's a scenario where `tabindex` is not only useful, but necessary. You might
+be building a robust single page with different content sections, not all of
+which are simultaneously visible. In this kind of page, clicking a navigation
+link might change the visible content without doing a page refresh.
+
+When this happens, you would probably identify the selected content area, give
+it a `tabindex` of -1 so that it doesn't appear in the natural tab order, and
+call its `focus` method. This technique, called *managing focus*, keeps the
+user's perceived context in sync with the site's visual content.
+
+## Managing focus in components
+
+Managing focus when you change something on the page is important, but sometimes
+you need to manage focus at the control level &mdash; for example, if you're
+building a custom component.
+
+Consider the native `select` element. It can receive basic focus but, once
+there, you can use the arrow keys to expose additional functionality (the
+selectable options). If you were building a custom `select` element, you would
+want to expose these same kinds of behaviors so that users who rely primarily on
+the keyboard could still interact with your control.
+
+```html
+<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
+<select>
+    <option>Aisle seat</option>
+    <option>Window seat</option>
+    <option>No preference</option>
+</select>
+```
+
+<select>
+  <option>Aisle seat</option>
+  <option>Window seat</option>
+  <option>No preference</option>
+</select>
+
+Knowing which keyboard behaviors to implement can be difficult, but there is a
+helpful document you can refer to. The
+[Accessible Rich Internet Applications (ARIA) Authoring
+Practices](https://www.w3.org/TR/wai-aria-practices/)
+guide lists types of components and what kinds of keyboard actions they support.
+We will cover ARIA in more detail later, but for now let's use the guide to help
+us add keyboard support to a new component.
+
+Perhaps you're working on some new [Custom
+Elements](/custom-elements-v1/) that
+resemble a set of radio buttons, but with your unique take on appearance and
+behavior.
+
+```html
+<radio-group>
+    <radio-button>Water</radio-button>
+    <radio-button>Coffee</radio-button>
+    <radio-button>Tea</radio-button>
+    <radio-button>Cola</radio-button>
+    <radio-button>Ginger Ale</radio-button>
+</radio-group>
+```
+
+To determine what kind of keyboard support they need, you would check the
+[ARIA Authoring Practices
+guide](https://www.w3.org/TR/wai-aria-practices/).
+Section 2 contains a list of design patterns, and in that list is a
+[characteristics table for radio
+groups](https://www.w3.org/TR/wai-aria-practices/#radiobutton),
+the existing component that most closely matches your new element.
+
+As you can see in the table, one of the common keyboard behaviors that should be
+supported is the up/down/left/right arrow keys. To add this behavior to the new
+component, we'll use a technique called *roving tabindex*.
+
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UU2j5d9g5JzYPlBi7rMo.png", alt="W3C spec excerpt for radio buttons.", width="640", height="359" %}
+</figure>
+
+Roving tabindex works by setting `tabindex` to -1 for all children except the
+currently-active one.
+
+```html
+<radio-group>
+    <radio-button tabindex="0">Water</radio-button>
+    <radio-button tabindex="-1">Coffee</radio-button>
+    <radio-button tabindex="-1">Tea</radio-button>
+    <radio-button tabindex="-1">Cola</radio-button>
+    <radio-button tabindex="-1">Ginger Ale</radio-button>
+</radio-group>
+```
+
+The component then uses a keyboard event listener to determine which key the
+user presses; when this happens, it sets the previously focused child's
+`tabindex` to -1, sets the to-be-focused child's `tabindex` to 0, and calls the
+focus method on it.
+
+```html
+<radio-group>
+    // Assuming the user pressed the down arrow, we'll focus the next available child
+    <radio-button tabindex="-1">Water</radio-button>
+    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
+    <radio-button tabindex="-1">Tea</radio-button>
+    <radio-button tabindex="-1">Cola</radio-button>
+    <radio-button tabindex="-1">Ginger Ale</radio-button>
+</radio-group>
+```
+
+When the user reaches the last (or first, depending on the direction they're
+moving the focus) child, you will loop around and focus the first (or last)
+child again.
+
+You can give the completed example a try down below. Inspect the element in the
+DevTools to observe the tabindex moving from one radio to the next.
+
+
+<style>
+  .demo {
+    margin-left: 80px;
+  }
+  radio-button {
+    position: relative;
+    display: block;
+    font-size: 18px;
+  }
+  radio-button:focus {
+    outline: none;
+  }
+  radio-button::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    border: 1px solid black;
+    position: absolute;
+    left: -18px;
+    top: 7px;
+    border-radius: 50%;
+  }
+  radio-button:focus::before {
+    box-shadow: 0 0 3px 3px #83BEFF;
+  }
+  radio-button[aria-checked="true"]::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background: red;
+    position: absolute;
+    left: -18px;
+    top: 7px;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="demo">
+  <radio-group>
+    <radio-button>Water</radio-button>
+    <radio-button>Coffee</radio-button>
+    <radio-button>Tea</radio-button>
+    <radio-button>Cola</radio-button>
+    <radio-button>Ginger Ale</radio-button>
+  </radio-group>
+</div>
+
+<script src="https://www.gstatic.com/devrel-devsite/v9dcc115658e2b070ea1ae9baed63d566/developers/js/custom-elements.min.js">
+</script>
+
+<script>
+  class RadioButton extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.setAttribute('role', 'radio');
+      this.setAttribute('tabindex', -1);
+      this.setAttribute('aria-checked', false);
+    }
+  }
+
+  window.customElements.define('radio-button', RadioButton);
+
+  // Define values for keycodes
+  const VK_LEFT       = 37;
+  const VK_UP         = 38;
+  const VK_RIGHT      = 39;
+  const VK_DOWN       = 40;
+
+  class RadioGroup extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.setAttribute('role', 'radiogroup');
+      this.radios = Array.from(this.querySelectorAll('radio-button'));
+
+      // Setup initial state
+      if (this.hasAttribute('selected')) {
+        let selected = this.getAttribute('selected');
+        this._selected = selected;
+        this.radios[selected].setAttribute('tabindex', 0);
+        this.radios[selected].setAttribute('aria-checked', true);
+      } else {
+        this._selected = 0;
+        this.radios[0].setAttribute('tabindex', 0);
+      }
+
+      this.addEventListener('keydown', this.handleKeyDown.bind(this));
+      this.addEventListener('click', this.handleClick.bind(this));
+    }
+
+    handleKeyDown(e) {
+      switch(e.keyCode) {
+
+        case VK_UP:
+        case VK_LEFT: {
+          e.preventDefault();
+
+          if (this.selected === 0) {
+            this.selected = this.radios.length - 1;
+          } else {
+            this.selected--;
+          }
+          break;
+
+        }
+
+        case VK_DOWN:
+        case VK_RIGHT: {
+          e.preventDefault();
+
+          if (this.selected === this.radios.length - 1) {
+            this.selected = 0;
+          } else {
+            this.selected++;
+          }
+          break;
+        }
+
+      }
+    }
+
+    handleClick(e) {
+      const idx = this.radios.indexOf(e.target);
+      if (idx === -1) {
+        return;
+      }
+      this.selected = idx;
+    }
+
+    set selected(idx) {
+      if (isFinite(this.selected)) {
+        // Set the old button to tabindex -1
+        let previousSelected = this.radios[this.selected];
+        previousSelected.tabIndex = -1;
+        previousSelected.removeAttribute('aria-checked', false);
+      }
+
+      // Set the new button to tabindex 0 and focus it
+      let newSelected = this.radios[idx];
+      newSelected.tabIndex = 0;
+      newSelected.focus();
+      newSelected.setAttribute('aria-checked', true);
+
+      this.setAttribute('selected', idx);
+      this._selected = idx;
+    }
+
+    get selected() {
+      return this._selected;
+    }
+  }
+
+  window.customElements.define('radio-group', RadioGroup);
+</script>
+
+
+You can view
+[the complete source for this
+element](https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47)
+over on GitHub.
+
+## Modals and keyboard traps
+
+Sometimes when you're managing focus you can get into a situation you can't get
+out of. Consider an autocomplete widget that tries to manage focus and captures
+the tab behavior, but prevents the user from leaving it until it's complete.
+This is called a *keyboard trap*, and it can be very frustrating for the user.
+Section 2.1.2 of the Web AIM checklist addresses this issue, stating that
+[keyboard focus should never be locked or trapped at one particular page
+element](https://webaim.org/standards/wcag/checklist#sc2.1.2).
+The user should be able to navigate to and from all page elements using only the
+keyboard.
+
+Oddly, there are times when this behavior is actually desirable, like in a modal
+window. Normally, when the modal is displayed, you don't want the user to access
+the content behind it. You might add an overlay to cover the page visually, but
+that doesn't stop keyboard focus from accidentally traveling outside the modal.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/34igvq1J0jtvgSp3Tybo.png", alt="A modal window asking the user to save their work.", width="640", height="357" %}
+</figure>
+
+In instances like this you can implement a temporary keyboard trap to ensure
+that you trap focus only while the modal is displayed and then restore focus to
+the previously-focused item when the modal is closed.
+
+> There are some proposals on how to make this easier for developers,
+> including the `<dialog>` element, but they don't yet have widespread
+> browser support.
+>
+> See this [MDN
+> article](https://developer.mozilla.org/docs/Web/HTML/Element/dialog)
+> for more information on `<dialog>`, and this
+> [modal example](https://github.com/gdkraus/accessible-modal-dialog) for
+> more information on modal windows.
+
+Consider a modal dialog represented by a `div` that contains a few elements, and
+another `div` that represents a background overlay. Let's walk through the basic
+steps needed to implement a temporary keyboard trap in this situation.
+
+ 1. Using `document.querySelector`, select the modal and overlay divs and store
+    their references.
+ 1. As the modal opens, store a reference to the element that was focused when
+    the modal was opened so you can return focus to that element.
+ 1. Use a *keydown listener* to grab keys as they are pressed while the modal is
+    open. You could also listen for a click on the background overlay, and close
+    the modal if the user clicks it.
+ 1. Next, get the collection of focusable elements within the modal. The first
+    and last focusable elements will act as "sentinels" to let you know when to
+    loop focus forward or backward to stay inside the modal.
+ 1. Display the modal window and focus the first focusable element.
+ 1. As the user presses `Tab` or `Shift+Tab`, move focus forward or backward,
+    looping at the last or first elements as appropriate.
+ 1. If the user presses `Esc`, close the modal. This is very helpful because it
+    allows the user to close the modal without searching for a specific close
+    button, and it benefits even users who are using a mouse.
+ 1. When the modal is closed, hide it and the background overlay, and restore
+    focus to the previously-focused element saved earlier.
+
+This procedure gives you a usable, non-frustrating modal window that everyone
+can use effectively.
+
+For more details, you can examine this [sample
+code](https://github.com/udacity/ud891/blob/gh-pages/lesson2-focus/07-modals-and-keyboard-traps/solution){: .external },
+and view a live example from a [completed
+page](http://udacity.github.io/ud891/lesson2-focus/07-modals-and-keyboard-traps/solution/index.html){: .external }.
diff --git a/src/site/content/en/blog/ux-basics/index.md b/src/site/content/en/blog/ux-basics/index.md
new file mode 100644
index 00000000000..4112764f5e2
--- /dev/null
+++ b/src/site/content/en/blog/ux-basics/index.md
@@ -0,0 +1,377 @@
+---
+title: Basics of UX 
+subhead: A step-by-step guide to the basics of UX design.
+date: 2016-10-01
+updated: 2018-09-20
+authors:
+  - mustafa
+description: A step-by-step guide to the basics of UX design.
+tags:
+  - blog
+---
+
+This article introduces a workflow that can help teams, products, startups and
+companies create a robust and meaningful process for developing a better user
+experience for their customers. You could use different parts of the process
+separately but they ideally work best as a series of steps.
+
+This guide borrows heavily from the Design Sprint methodology that multiple
+teams across Google use to troubleshoot and solve challenges such as the
+[Self Driving Car](https://www.google.com/selfdrivingcar/)
+and [Project Loon](https://www.solveforx.com/loon/).
+
+### Double Diamond
+
+This flow work is based on what we in UX circles call the double diamond, made
+popular by the [British Design Council](https://www.designcouncil.org.uk/),
+where your team diverges to understand an idea through research and then
+converges to define the challenge, diverges to sketch it individually, share the
+ideas, decide on what the best way forward is, test and validate.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jMtIpRNbjzbb4b2qdkRk.png", alt="Phases of a project include; uderstand, define, diverge, decide, prototype and validate.", width="800", height="513" %}
+  <figcaption>The 'double diamond' design process model pioneered by the British Design Council, the steps involve these phases of a project; <em>Understand</em>, <em>Define</em>, <em>Diverge</em>, <em>Decide</em>, <em>Prototype</em> and <em>Validate</em>.</figcaption>
+</figure>
+
+## Setting the stage
+
+First thing is to start with the underlying challenge at hand and write it out
+like a proposal, asking yourself, “what is the problem I’m actually trying to
+solve?”.  The challenge statement is the brief you are setting for the project
+that includes your goal.
+
+This challenge could be for an existing product feature that needs to be refined
+or a completely new product altogether. Whatever your task may be, simply adjust
+the language to fit the goal you are trying to achieve. A statement should be
+tied to your team goals, focused on your audience, inspiring and concise.
+
+These are some real life examples of products that I have worked on in the
+past;
+
+* Design a system to manage the treatment and follow-up care of patients with
+  clubfoot.
+
+* Create an app that simplifies complex financial systems and pare them down to
+  the essentials.
+
+* Design a consistent mobile app across different platforms without sacrificing
+  the brand.
+
+### Updating your challenge statement
+
+Once you have written several variations of the goal, present it to your team to
+get a consensus. You may want to include a deadline as this will help the team
+focus on the problem. So with the added adjustments, the list above could
+be:
+
+* Design a system to manage the treatment and follow-up care of children under
+  the age of 2 with clubfoot for launch in Q1 this year.
+* Create a simple financial app that allows you to buy and sell shares at the tap
+  of a button without prior knowledge of the financial world, with initial launch
+  on July 2017.
+* Produce a design guide that is flexible across multiple platforms and positions
+  the company's brand effectively on each platform by the end of this year.
+
+When the challenge statement is finished, display it in a prominent place so
+that you can see it while you work. You will need to refer back to it
+constantly, perhaps even updating or modifying it throughout your project.
+
+## Validating the problem
+
+The next step is to research the challenge and learn about the problem. What you
+need to discover is whether your team's understanding of the problem is valid.
+Quite often we look at problems from our own point of view, which is dangerous
+as most of us in tech are actually power users and are in fact a minority of
+users. We are a vocal minority and can be fooled into thinking something is
+actually a problem when it isn’t.
+
+There are various methods of collecting data to validate the challenge. Each one
+depends on your team and if you have access to users. The objective is to have a
+better understanding of the problem at hand.
+
+### Internal interviews with stakeholders
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/D6Yk52U3tx3j4apIG4Q6.jpg", alt="Interviews with stakeholders can be informative for discovering insights across a company or team.", width="350", height="306" %}
+  <figcaption>Interviews with stakeholders can be informative for discovering insights across a company or team.</figcaption>
+</figure>
+
+The interviewing process involves interviewing each team member and stakeholder
+at your company, from marketing to accounts. This will help you find what they
+think the real challenges are and what they think potential solutions could be.
+When I say solution I am not speaking about technical solutions here, but rather
+what would be the best case scenario and end goal for the company or product.
+For example using the challenges above “having our clubfoot software in 80% of
+medical facilities by the end of the year” would be a great goal to aim for.
+
+There is one caveat. This method of validation is the least favoured as it
+prevents team discussion and collaboration, potentially creating a siloed
+atmosphere in an organization. Nevertheless it can yield some good information
+about the clients and the design challenge that you could otherwise miss.
+
+### Lightning talks
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uLLoF4jJ7DGTTdoHbH7A.jpg", alt="A lightning talk is a very short presentation lasting only a few minutes.", width="800", height="356" %}
+  <figcaption>A lightning talk is a very short presentation lasting only a few minutes.</figcaption>
+</figure>
+
+This is similar to the internal interviews, but this time you get every
+stakeholder into a single room. Then you Elect five or six of those stakeholders
+(marketing, sales, design, accounts, research etc.) to give a talk, each
+focusing on the challenge from their perspective for a maximum of 10 minutes.
+The topics they must cover in their presentation should be:
+
+* Goals of the business
+* Challenges of the project from their point of view (these could be technical,
+  research gathering, design creation etc…)
+* User research that you have currently
+
+Leave 5 minutes at the end for questions, with an elected person taking notes
+throughout. Once you are done you might want to update the challenge to reflect
+new learnings. The goal is to collect a list of bullet points that can drive a
+feature or flow that helps your achieve your products goal.
+
+### User interviews
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6r8ut4qbfLcY7R1wGuJF.jpg", alt="User interviews are a great way to learn about a persons pain points in any given task.", width="800", height="356" %}
+  <figcaption>User interviews are a great way to learn about a person's pain points in any given task.</figcaption>
+</figure>
+
+This is perhaps the best way of learning about the user's journey, pain points,
+and flow. Arrange at least five user interviews, more if you have access to
+them. The sorts of questions you ask them should include:
+
+- How do they complete an existing task? For example, say you want to solve the
+  challenge for the financial app above, you could ask them “how do you buy shares
+  and stocks at the moment?”
+- What do they like about this flow?
+- What do they dislike about this flow?
+- What similar products does the user currently use?
+    *  What do they like?
+    *  What do they dislike?
+- If they had a magic wand and could change one thing about this process what
+  would it be?
+
+The idea of interviewing is to get the user to speak about the challenges they
+have. It is not a discussion point for you, which is why you must remain as
+quiet as possible. This is even true when a user stops speaking, always wait a
+moment as they could be gathering their thoughts. You would be surprised at how
+much someone will continue to speak after they have stopped for a few seconds.
+
+Take notes throughout and if possible record the conversation to help you
+capture anything you might have missed. The goal is to compare the challenge to
+the user insights that you gather. Do they align? Did you learn anything that
+helps you update your challenge statement?
+
+### Ethnographic field research
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GJlShhFwlV4cUXNsHihp.jpg", alt="Seeing users in their natural environment is a great way to understand how they solve their own challenges.", width="350", height="307" %}
+  <figcaption>Seeing users in their natural environment is a great way to understand how they solve their own challenges.</figcaption>
+</figure>
+
+This is where you observe the user in the field, in context while doing
+something like how they do their shopping, how they travel to work,
+how they send SMS messages etc… The reason is in some cases people will tell
+you what they think you want to hear. But if you watch users perform actions and
+tasks on their own it can be insightful. Basically you are observing without
+interfering, noting things which they find easy or difficult and things they 
+may have missed. The goal is to immerse yourself in the user's environment to
+better empathize with their pain points.
+
+This technique usually involves some work done over a longer period of time and
+requires a researcher to lead this part of the project. But it is perhaps the
+most insightful as you get to see a group of people that you are studying in
+their natural environments.
+
+### Gathering it altogether
+
+Once you have completed the learnings phase of your project you need to take one
+last look at your challenge. Are you on the right path? Is there anything you
+need to adjust? Write down all of the things you have learnt and group them into
+categories. These could become the basis of a feature or a flow, depending on
+the problem you are solving. They could also be used to update and revise the
+challenge.
+
+Once you have enough feedback and insight it is time to apply that knowledge to
+creating a project map.
+
+## Project Map
+
+The problem you are trying to solve is usually made up of different types of
+people (or players), each with a stake in the project's flow. Based on your
+learnings you need to list out the possible players. It could be a user type or
+stakeholder, for example, “a doctor who treats clubfoot”, “a patient who has
+clubfoot”, “a care giver who looks after patient”, etc… Write down each player
+on a the left hand side of a sheet of paper or if you have access to one, on a
+whiteboard. On the right hand side write each player's goals.
+
+Finally for each player, write down the number of steps required for them to
+reach their goal. For example for "a doctor who treats clubfoot” the goal would
+be “cure a patient with clubfoot”, so the steps could be “register the patient
+in the system”, “start them on medical a plan”, “create a review cycle of their
+medical health” and “perform medical procedure”.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Dr4Yv1bFsbLdSzNWPM3H.jpg", alt="Project maps plot out the main steps for each user or player in a flow.", width="800", height="294" %}
+  <figcaption>Project maps plot out the main steps for each user or player in a flow.</figcaption>
+</figure>
+
+The result is a project map with the main steps in the process. Think of it as
+an overview of the project without too many details. It also lets team members
+judge whether the map matches the challenge statement. Later, when you break
+down each step, there will be more details. But for now a project map gives you
+a high level breakdown of the steps a user will take to complete their end goal.
+
+## Wireframing and storyboarding
+
+### Crazy 8s
+
+For this, I recommend a method called crazy 8s that involves folding a piece of
+paper twice over so that you have eight panels. Then in each panel you draw out
+an idea based on all that you have learnt so far. Give yourself ten minutes to
+come up with ideas to fill all eight panels. If you give yourself more than 20
+minutes you may start to procrastinate, go make yourself a coffee, check email,
+have a general chat with your team and essentially avoid doing the work. You
+want to create a sense of urgency in this step as it forces you to work quickly
+and more effectively.
+
+If you are working with a team get everyone to do their own as well. This
+process will kick start your brain and get you thinking about the challenge.
+Generally the sketch will be an interface design wireframe.
+
+Afterwards, you and everyone on your team presents their ideas to the group.
+Everyone must explain each of their eight ideas in detail and why they chose to
+go down a specific path. Remind each team member to use the learnings for
+justification of their ideas. Once everyone has presented it's time to vote on
+the ideas. Each person gets two sticky dots and can vote on any idea. They can
+give both votes to a single idea if they really like it.
+
+
+<!-- <figure>
+  <img src="images/voting-ideas.jpg"   alt="You can take notes on post-its and vote on concepts or the sketches themselves">
+  <figcaption>You can take notes on post-its and vote on concepts or the sketches themselves.</figcaption>
+</figure> -->
+<div class="switcher">
+    <figure>
+         {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/cAa4LgW7hT5AZKgoIel0.jpg", alt="Crazy 8s are a great way to get all of your ideas onto one page.", width="350", height="250" %}
+        <figcaption>Crazy 8s are a great way to get all of your ideas onto one page.</figcaption>
+    </figure>
+    <figure>
+        {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CiwnycWZijFyUzcVet1p.jpg", alt="Now you need to do a detailed design based on what you have learned.", width="350", height="253" %}
+        <figcaption>Now you need to do a detailed design based on what you have learned.</figcaption>
+    </figure>
+</div>
+
+
+### Refine your design
+
+After the voting take the idea with the most votes and sketch out a final idea.
+You can borrow from the other ideas that you heard from your colleagues as well.
+Give yourself another ten minutes to complete this task. Once you are done,
+again present the ideas to your team and vote like before.
+
+### Storyboard the idea
+
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KHvcNfPK7lkuvYiTmErN.jpg", alt="The storyboard involves combining your sketches and ideas into a comprehensive flow.", width="552", height="399" %}
+    <figcaption>The storyboard involves combining your sketches and ideas into a comprehensive flow.</figcaption>
+</figure>
+
+With your design in hand, it's time to storyboard it's engagement with the user.
+By this point you should have already thought about the different steps a user
+takes. It's quite common to incorporate one of your colleagues' designs into the
+flow as well. You want to have a clear step-by-step process with some points
+where the user might diverge. Refer back to the project map to validate your
+design against the goal.
+
+
+## Creating a prototype
+
+Creating a prototype is not about molding the perfect piece of code but to make
+something that is believable when used by someone. Tools used to create a
+prototype vary from person to person. Some like Keynote or Powerpoint as it
+forces you to think of the flow and not design details. You might want to invest
+time into learning tools like Balsamiq, Marvel or Framer which can give you more
+behavioral controls. Whatever tool you use make sure it is one that makes you
+focus on the flow and looks real. You need to test the prototype on real people
+so it needs to be as believable as possible but at the same time it shouldn’t
+take weeks of work to create.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KmhXoxh2BmVQqrKjalCa.jpg", alt="Prototypes need to be real enough to be believable", width="800", height="367" %}
+  <figcaption>Prototypes need to be real enough to be believable.</figcaption>
+</figure>
+
+Creating a prototype is a balance between time and realness, so be careful not
+to sway to much into either extreme. Either way, you could end up wasting time.
+
+## Usability-test your designs
+
+It's great if you have a testing lab. If you don't, creating one isn't difficult
+as long as you're mindful of creating a comfortable environment for your users
+that isn't distracting. Testing usually involves the user and two people from
+your team, one taking notes and the other asking questions. A good set up is to
+use an app like Hangouts and record their actions, this is also handy if you
+want the rest of the team to observe from a different room. This can be quite
+scary for us as app makers to do as we are seeing our designs out in the wild.
+It can be both a refreshing and sobering experience.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pindpn2SzXUQBc124OgW.jpg", alt="The storyboard involves putting all of your sketches and ideas together into a comprehensive flow.", width="800", height="360" %}
+  <figcaption>The storyboard involves putting all of your sketches and ideas together into a comprehensive flow.</figcaption>
+</figure>
+
+### Questions to ask
+
+When testing your design, ask the user to perform tasks in your app and get them
+to speak aloud and verbalize what they're doing and why. This is an odd thing to
+do but it helps you hear what they're thinking. Try not to interrupt or tell
+them what they should do when they get stuck. Simply ask them why they took a
+particular flow after they have completed (or NOT completed).
+
+What you need to find out is:
+
+- What do they like about the prototype?
+- What do they dislike about the prototype?
+- What are the pain points?
+    - Why did a flow work
+    - Why did a flow not work
+- What would they like to improve?
+- Does the overall design/flow meet their needs?
+
+## Revisit designs and another round of testing
+
+You have a working prototype with feedback. Now it’s time to revise your
+designs, and analyze what worked and what didn’t. Don't be afraid to create a
+completely new wireframe storyboard and make a new prototype. Starting over can
+create a better flow than trying to move things on your earlier prototype. Try
+not to be too precious of it because it is just a prototype.
+
+Once you are happy with your designs you can test it again and refine it some
+more. In cases where the prototype didn’t hit the mark at all, well you might
+think the project has failed. In actual fact it hasn’t. You've likely spent less
+development time than if you had actually built the design and you know more
+bout what user's actually like. With design sprints we have a philosophy where
+you either win or you learn, so don’t beat yourself up too much if the idea
+didn't work as planned.
+
+## Make it!
+
+You have tested your ideas. The user likes them. The stakeholders are invested
+because they've been involved since the beginning. Now it's time to make the
+thing. By now you should have a clear idea of what needs to be made and what the
+priorities of the experience are. At each milestone of the project you may want
+to introduce usability testing to help validate your work and keeping you on
+track.
+
+I can’t stress how important it is to find out as much as possible before you
+commit to a lot of work, time and energy on something that might not be the
+right solution.
+
+This article should now give you a basic grounding in UX and its importance. UX
+isn’t something that should be looked upon as a role for a designer or
+researcher. It is actually the responsibility of everyone involved in a project
+so I would recommend involvement at every opportunity.
diff --git a/src/site/content/en/blog/variable-fonts-in-real-life/index.md b/src/site/content/en/blog/variable-fonts-in-real-life/index.md
new file mode 100644
index 00000000000..2a4114547d1
--- /dev/null
+++ b/src/site/content/en/blog/variable-fonts-in-real-life/index.md
@@ -0,0 +1,26 @@
+---
+layout: post
+title: Variable fonts in real life
+subhead: Sharing a practical guide to variable fonts, with lots of examples.
+description: >
+  Sharing a practical guide to variable fonts, with lots of examples.
+authors:
+  - rachelandrew
+date: 2022-05-06
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/SMvXC1vR6rVMFCllGHYn.jpg
+alt: The word typography.
+tags:
+  - fonts
+  - resources
+  - blog
+---
+
+If you have not yet taken the plunge into using [variable fonts](/variable-fonts/), the article [Variable fonts in real life](https://evilmartians.com/chronicles/variable-fonts-in-real-life-how-to-use-and-love-them) from [Roman Shamin](https://twitter.com/romanshamin_en) and [Travis Turner](https://twitter.com/_Travis_Turner) at Evil Martians gives some excellent use cases, 
+and reasons why your next project should make the change.
+
+Variable fonts now have excellent browser support. They can help with performance, as the browser only needs to download a single font file for all variations. 
+However, as this article shows, they can also help match font weights to logos and other elements, assist with contrast issues between light and dark mode, and make small text more readable.
+
+{% BrowserCompat 'css.properties.font-variation-settings' %}
+
+_Hero image by [Florian Klauer](https://unsplash.com/@florianklauer)_
diff --git a/src/site/content/en/blog/variable-fonts/Amstelvar-Alpha-example.png b/src/site/content/en/blog/variable-fonts/Amstelvar-Alpha-example.png
deleted file mode 100644
index 9a2f4cc0ad5..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/Amstelvar-Alpha-example.png and /dev/null differ
diff --git a/src/site/content/en/blog/variable-fonts/Amstelvar-Ital-axis.png b/src/site/content/en/blog/variable-fonts/Amstelvar-Ital-axis.png
deleted file mode 100644
index 2739977b105..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/Amstelvar-Ital-axis.png and /dev/null differ
diff --git a/src/site/content/en/blog/variable-fonts/grass-mandy.png b/src/site/content/en/blog/variable-fonts/grass-mandy.png
deleted file mode 100644
index caa2422f4e0..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/grass-mandy.png and /dev/null differ
diff --git a/src/site/content/en/blog/variable-fonts/hero.jpg b/src/site/content/en/blog/variable-fonts/hero.jpg
deleted file mode 100644
index f3e9f22e412..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/variable-fonts/index.md b/src/site/content/en/blog/variable-fonts/index.md
index f54de3651d6..0ce1fe861b1 100644
--- a/src/site/content/en/blog/variable-fonts/index.md
+++ b/src/site/content/en/blog/variable-fonts/index.md
@@ -1,4 +1,5 @@
 ---
+layout: post
 title: Introduction to variable fonts on the web
 subhead: A new font specification that can significantly reduce font file sizes
 description: >
@@ -7,20 +8,25 @@ description: >
 authors:
   - mustafakurtuldu
   - thomassteiner
+  - dcrossland
+  - roeln
 date: 2018-02-19
-updated: 2020-05-12
-hero: hero.jpg
+updated: 2022-01-19
+hero: image/admin/SHy7jOlEVPU1lsyfgvlG.jpg
 tags:
   - blog
   - fonts
+  - performance
+  - ux
+feedback:
+  - api
 ---
 
-Variable fonts can significantly reduce the size of your font files and make
-it possible to animate your font characters. This guide explains how
-variable fonts work, how typographers implement variable fonts, and how
-to work with variable fonts in CSS.
+In this article, we will look at what variable fonts are, the benefits they
+offer, and how we can use them in our work. First, let's review how typography
+works on the web, and what innovations variable fonts bring.
 
-## Browser compatibility {: #compatibility }
+## Browser compatibility
 
 As of May 2020 variable fonts are supported in most browsers. See
 [Can I use variable fonts?](https://caniuse.com/#feat=variable-fonts)
@@ -28,337 +34,723 @@ and [Fallbacks](#fallbacks).
 
 ## Introduction
 
-The terms font and typeface are used interchangeably in the developer industry.
-However there is a difference: A typeface includes an entire family of designs,
-such as the [Roboto](https://fonts.google.com/specimen/Roboto) typeface.
-Meanwhile a font is one of the digital files of that family, like "Roboto Bold"
-or "Roboto Italic." In other words, a typeface is what you _see_, and the font is
-what you _use_.
-
-<figure class="w-figure">
-  <img src="robot-specimen.png" alt="A specimen of Roboto">
-  <figcaption class="w-figcaption">
-    Examples of the Roboto typeface that was designed and developed
-    Christian Robertson.
-  </figcaption>
-</figure>
+The terms font and typeface are often used interchangeably by developers.
+However there is a difference: A typeface is the underlying visual design that
+can exist in many different typesetting technologies, and a font is one of these
+implementations, in a digital file format. In other words, a typeface is what
+you _see_, and the font is what you _use_.
+
+Another concept that is often overlooked is the distinction between a style, and
+a family. A style is a single and specific typeface, such as Bold Italic, and a
+family is the complete set of styles.
 
-<figure class="w-figure">
-  <img src="roboto-family.png" alt="Different members of the Roboto family">
-  <figcaption class="w-figcaption">
-    Different fonts within the Roboto family.
+Before variable fonts, each style was implemented as a separate font file. With
+variable fonts, all styles can be contained in a single file.
+
+<figure>
+  {% Img src="image/admin/RbhgXwS81Y9PVRJnTjPX.png", alt="A specimen composition and list of different styles of the Roboto family", width="800", height="600" %}
+  <figcaption>
+    Left: a specimen of the Roboto typeface family. Right: named styles within the family.
   </figcaption>
 </figure>
 
-### Challenges for the Designer and Developer
-
-When a graphic designer prepares their work, they typically export the final
-artwork in a way that either embeds all of the fonts used, or they provide
-an export archive that contains all of the assets used separately, a bit like a
-basic website. The cost to the designer depends on the suitability of the
-typeface for the rendering context  (is it legible at small sizes, for example)
-and the license to use the fonts.
-
-On the web, we have to consider both aspects, plus the associated bandwidth
-costs. For every member of a typeface family used in our designs, we have had to
-require another font file to be downloaded by our users before they can see that
-text. Only including the Regular and Bold styles, plus their italic
-counterparts, can amount to 500&nbsp;KB or more of data. This has been a sticking point
-for web designers and developers, as a richer typographic experience comes
-at a cost. This is even before we have dealt with how the fonts are rendered, and the
-fallback or delayed-loading patterns we are going to use to prevent [FOIT and
-FOUT](https://css-tricks.com/fout-foit-foft/).
+## Challenges for the designer and developer
+
+When a designer creates a print project they face some constraints, such as the
+physical size of the page layout, the number of colors they can use (which is
+determined by the kind of printing press that will be used), and so on. But they
+can use as many typeface styles as they like. This means that the typography of
+print media is often rich and sophisticated, so that the reading experience is
+truly delightful. Think of the last time you enjoyed browsing an excellent
+magazine.
+
+Web designers and developers have different constraints than print designers,
+and an important one is the associated bandwidth costs of our designs. This
+has been a sticking point for richer typographic experiences, as they come at
+a cost. With traditional web fonts, each style used in our designs requires
+users to download a separate font file, which increases latency and page
+rendering time. Only including the Regular and Bold styles, plus their italic
+counterparts, can amount to 500 KB or more of font data. This is even before
+we have dealt with how the fonts are rendered, the fallback patterns we need
+to use, or undesirable side-effects such as [FOIT and
+FOUT](https://www.zachleat.com/web/fout-vs-foit/).
+
+Many font families offer a much wider range of styles, from Thin to Black
+weights, narrow and wide widths, a variety of stylistic details, and even
+size-specific designs (optimized for large or small text sizes.) Since you'd
+have to load a new font file for every style (or combinations of styles), many
+web developers choose not to use these capabilities, reducing the reading
+experience of their users.
 
 ## Anatomy of a variable font
 
-A variable font is a collection of master styles, with one central "default"
-master (usually the Regular font style) and multiple registered "axes" which
-tie the central master to the other masters. For example, the **Weight** axis
-might connect a Light style master to the default style and through to the Bold
-style master. The individual styles that can be located along this axis are
-called instances.
-
-For example, the variable font [Amstelvar](https://github.com/TypeNetwork/Amstelvar)
-has three masters for its **Weight** axis: The Regular master is at the center,
-and two masters, Thinner and Bolder, are at the opposite ends of the axis.
-Between these there are potentially 200 instances that can be chosen by the
-designer or developer:
-
-<figure class="w-figure">
-  <img src="Amstelvar-Alpha-example.png"
-  alt="Example of the Weight Axes for the typeface Amstelvar">
-  <figcaption class="w-figcaption">
-    Typeface Amstelvar, designed by David Berlow, type designer and
-    typographer at Font Bureau.
+Variable fonts address these challenges, by packing styles into a single file.
+
+This works by starting with a central or 'default' style, usually the
+'Regular'–an upright roman design with the most typical weight and width that
+is most suitable for plain text. This is then connected to other styles in a
+continuous range, called an 'axis.' The most common axis is **Weight**, which
+can connect the default style through to a Bold style. Any individual style
+can be located along an axis, and is called an 'instance' of the variable
+font. Some instances are named by the font developer, for example Weight axis
+location 600 is called SemiBold.
+
+The variable font [Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex)
+has three styles for its **Weight** axis. The Regular style is at the center,
+and there are two styles at the opposite ends of the axis, one lighter and
+the other heavier. Between these, you can choose from 900 instances:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ecr5godvTKunVXP7W8aU.png", alt="The letter 'A' shown in different weights", width="800", height="218" %}
+  <figcaption>
+    Above: Illustrated anatomy of the Weight axis for the typeface Roboto.
+  </figcaption>
+</figure>
+
+The font developer can offer a set of different axes. You can combine them
+because they all share the same default styles. Roboto has three styles in a
+Width axis: the Regular is at the center of the axis, and two styles, narrower
+and wider, are at each end. These provide all the widths of the Regular style,
+and combine with the Weight axis to provide all the widths for every weight.
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Roboto Flex in random combinations of Width and Weight
   </figcaption>
 </figure>
 
-The [OpenType specification](https://docs.microsoft.com/en-gb/typography/opentype/spec/dvaraxisreg)
-specifies other axis, such as **Width**, **Optical Size**, **Italic** and
-**Slant**. All of these axes share the same default master, and we can combine
-them to explore an exponential number of typographic styles, like powers of 2,
-3, and 4 do to numbers.
-
-Amstelvar also has three masters in a Width axis: Again the Regular is at the
-center of the axis, and two masters, narrow and wider, are at the opposite ends
-of this axis. These not only provide all the widths of the Regular style, but
-also all the widths and weights combined.
-
-Among Amstelvar's registered axes (Width, Weight and Optical Size) there are
-thousands of styles. This may seem like massive overkill, but consider that
-Amstelvar only supports the Latin writing system. Considering the needs of all
-the world's scripts, and many of today's typography applications, the quality
-of the reading experience can be remarkably enhanced by this diversity of type
-styles within a font. And, if it is without performance penalty, the user can
-use a few or as many styles as they wish–it's up to their design.
-
-### Italics are slightly different
-
-The way that italics are handled in variable fonts is interesting, as there are
-two different approaches. Typefaces like Helvetica or Roboto have 
-interpolation-compatible contours, so their Roman and Italic styles can be interpolated
+This means there are thousands of styles! This may seem like massive overkill,
+but the quality of the reading experience can be remarkably enhanced by this
+diversity of type styles. And, if it is without performance penalty, web
+developers can use a few or as many styles as they wish–it's up to their design.
+
+### Italics
+
+The way that Italics are handled in variable fonts is interesting, as there are
+two difference approaches. Typefaces like Helvetica or Roboto have interpolation
+compatible contours, so their Roman and Italic styles can be interpolated
 between and the **Slant** axis can be used to get from Roman to Italic.
 
 Other typefaces (such as Garamond, Baskerville, or Bodoni) have Roman and Italic
-glyph contours that are not interpolation-compatible. For example, the contours
+glyph contours that are not interpolation compatible. For example, the contours
 that typically define a Roman lowercase "n" do not match the contours used to
 define an Italic lowercase "n". Instead of interpolating one contour to the
 other, the **Italic** axis toggles from Roman to Italic contours.
 
-<figure class="w-figure">
-  <img src="Amstelvar-Ital-axis.png"
-  alt="Example of the Weight Axes for the typeface Amstelvar">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EySl1LIfX1QIrGq654PO.png", alt="Example of the Weight Axes for the typeface Amstelvar", width="800", height="520" %}
+  <figcaption>
     Amstelvar's "n" contours in Italic (12 point, regular weight, normal width),
     and in Roman. Image supplied by David Berlow, type designer and typographer
     at Font Bureau.
   </figcaption>
 </figure>
 
-After the switch to Italic, the axes available to the user should be the same
-as those for the Roman, just as the character set should be the same.
+After the switch to Italic, the axes available to the user should be the same as
+those for the Roman, just as the character set should be the same.
 
 A glyph substitution capability can also be seen for individual glyphs, and used
 anywhere in the design space of a variable font. For example, a dollar sign
 design with two vertical bars works best at larger point sizes, but at smaller
-point sizes a design with only one bar is better. When we have fewer pixels
-for rendering the glyph, a two bar design can become illegible. To combat this,
-much like the Italic axis, a glyph substitution of one glyph for another can
-occur along the **Optical Size** axis at a point decided by the type designer.
+point sizes a design with only one bar is better. When we have fewer pixels for
+rendering the glyph, a two bar design can become illegible. To combat this, much
+like the Italic axis, a glyph substitution of one glyph for another can occur
+along the **Optical Size** axis at a point decided by the type designer.
 
 In summary, where the contours allow for it, type designers can create fonts
-that interpolate between various masters in a multi-dimensional design space.
+that interpolate between various styles in a multi-dimensional design space.
 This gives you granular control over your typography, and a great deal of power.
 
-## Axes Definitions
+## Axes definitions
 
-Since the font developers define which axes are available in their fonts, it is
-essential to check the font's documentation to know what is available. For
-example, in the Gingham variable font designed by Christoph Koeberlin, there are
-two axes available, Width and Weight. The Amstelvar variable font does not
-contain a Slant axis, but does have an axis it calls Grade, plus many more axes.
+There are five [registered
+axes](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags),
+which control known, predictable features of the font: weight, width, optical
+size, slant and italics. Besides those, a font can contain custom axes. These
+can control any design aspect of the font the type designer wishes: the size of
+serifs, the length of swashes, the height of ascenders or the size of the dot on
+the i.
 
-A Grade axis is interesting as it changes the weight of the font without
-changing the widths, so line breaks do not change. By playing with a
-Grade axis, you can avoid being forced to fiddle with changes to the Weight axis
-that effects the overall width, and then changes to the Width axis that effect
-the overall weight. This is possible because the Amstelvar default style has
-been deconstructed in the 4 fundamental aspects of form: black or positive
-shapes, white or negative shapes, and the X and Y dimensions. These 4 aspects
-can be mixed to form the other styles, such as Width and Weight, in the way
-that primary colors can be mixed to create any other color.
-
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/amstel-grade-e.mp4" 
-            type="video/mp4">
+Even though axes can control the same feature, they might use different values.
+For example, in the Oswald and Hepta Slab variable fonts there is only one axis
+available, Weight, but the ranges are different–Oswald has the same range as
+before it was upgraded to be variable, 200 to 700, but Hepta Slab has an extreme
+hairline weight at 1 that goes all the up to 900.
+
+The five registered axes have 4-character lowercase tags that are used to
+set their values in CSS:
+
+<table>
+	<tbody>
+		<tr>
+			<th colspan="2">Axis names and CSS values</th>
+		</tr>
+		<tr>
+			<td>
+				Weight
+			</td>
+			<td>
+				<code>wght</code>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				Width
+			</td>
+			<td>
+				<code>wdth</code>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				Slant
+			</td>
+			<td>
+				<code>slnt</code>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				Optical Size
+			</td>
+			<td>
+				<code>opsz</code>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				Italics
+			</td>
+			<td>
+				<code>ital</code>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+
+Since the font developer defines which axes are available in a variable font,
+and which values they can have, it is essential to find out what each font
+offers. The font's documentation should provide this, or you can inspect the
+font using a tool like [Wakamai Fondue](https://wakamaifondue.com).
+
+## Use cases and benefits
+
+Setting the axes values comes down to personal taste and applying typographic
+best practices. The danger with any new technology is possible misuse, and
+settings that are overly artistic or exploratory could also decrease legibility
+of the actual text. For titles, exploring different axes to create great
+artistic designs are exciting, but for body copy this risks making the text
+illegible.
+
+### Exciting expression
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rh7wLaBLauEF02D2dqMC.png", alt="Grass example by Mandy Michael", width="495", height="174" %}
+</figure>
+
+One great example of artistic expression is shown above, an exploration of the
+typeface
+[Decovar](https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow)
+by Mandy Michael.
+
+You can view the working example and source code for the above sample
+[here](https://codepen.io/mandymichael/pen/YYaWop).
+
+### Animation
+
+<figure>
+  {% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2Du2L0Ii5nUqz8n6S3Vz.mp4",
+   controls=false,
+  autoplay=true,
+  loop=true,
+  muted=true,
+  playsinline=true
+  %}
+  <figcaption>
+    Typeface Zycon, designed for animation by David Berlow, type designer and
+    typographer at Font Bureau.
+  </figcaption>
+</figure>
+
+There is also a possibility to explore animating characters with variable fonts.
+Above is an example of different axes being used with the typeface Zycon. See
+the live [animation example on Axis
+Praxis](https://www.axis-praxis.org/specimens/zycon).
+
+[Anicons](https://typogram.github.io/Anicons) is the world's first animated
+color icon font, based on Material Design Icons. Anicons is an experiment that
+combines two cutting edge font technologies: variable fonts and color fonts.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/anicons-animation.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-figcaption">
-    Grade axis being changed on the fly.
+  <figcaption>
+    A few examples of hover animations from Anicon's color icon font
   </figcaption>
 </figure>
 
-{% Glitch {
-  id: 'variable-font-experiments',
-  height: 480
-} %}
+### Finesse
 
-The five registered axes plus Grade have 4-character tags that are used to
-set their values in CSS:
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/larger-widths.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Amstelvar using little bits of XTRA in opposite directions so the words' widths are evened out
+  </figcaption>
+</figure>
 
-<div class="w-table-wrapper">
-  <table>
-    <tbody>
-      <tr>
-        <th colspan=2>Axis names and CSS values</th>
-      </tr>
-      <tr>
-        <td>
-          Weight
-        </td>
-        <td>
-          <code>wght</code>
-        </td>
-      </tr>
-        <tr>
-        <td>
-          Width
-        </td>
-        <td>
-          <code>wdth</code>
-        </td>
-      </tr>
-            <tr>
-        <td>
-          Slant
-        </td>
-        <td>
-          <code>slnt</code>
-        </td>
-      </tr>
-            <tr>
-        <td>
-          Optical Size
-        </td>
-        <td>
-          <code>opsz</code>
-        </td>
-      </tr>
-            <tr>
-        <td>
-          Italics
-        </td>
-        <td>
-          <code>ital</code>
-        </td>
-      </tr>
-            <tr>
-        <td>
-          Grade
-        </td>
-        <td>
-          <code>GRAD</code>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-In order to add a variable font first we must link it, as with any custom font;
+[Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) and
+[Amstelvar](https://github.com/TypeNetwork/Amstelvar) offer a set of
+"Parametric Axes." In these axes, the letters are deconstructed into 4
+fundamental aspects of form: black or positive shapes, white or negative
+shapes, and the x and y dimensions. In the same way that primary colors can be
+blended with any other color to adjust it, these 4 aspects can be used to fine
+tune any other axis.
+
+The XTRA axis in Amstelvar allows you to adjust the "white" per mille value,
+as shown above. Using little bits of XTRA in opposite directions, the words'
+widths are evened out.
+
+## Variable fonts in CSS
+
+### Loading variable font files
+
+Variable fonts are loaded though the same `@font-face` mechanism as traditional
+static web fonts, but with two new enhancements:
 
 ```css
 @font-face {
-  font-family: 'AmstelvarAlpha';
-  src: url('../fonts/AmstelvarAlpha-VF.ttf');
+	font-family: 'Roboto Flex';
+	src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations'),
+	     url('RobotoFlex-VF.woff2') format('woff2-variations');
+	font-weight: 100 1000;
+	font-stretch: 25% 151%;
 }
 ```
 
-The way we define an axis value is by using the CSS property `font-variations`
-which has a series of values that pair the axis tag with an instance location:
+**1. Source Formats:** We don't want the browser to download the font if it
+doesn't support variable fonts, so we add `format` and `tech` descriptions: once in the
+[future
+syntax](https://www.w3.org/TR/css-fonts-4/#font-face-src-parsing)
+(`format('woff2') tech('variations')`), once in the deprecated but supported among browsers
+syntax (`format('woff2-variations')`). If the browser supports variable fonts and supports
+the upcoming syntax, it will use the first declaration. If it supports variable
+fonts and the current syntax, it will use the second declaration. They both
+point to the same font file.
+
+<!-- TODO 2021 Q1 revisit this, based on progress in
+     https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types
+     to allow removing the 2nd src -->
+
+**2. Style Ranges:** You'll notice we're supplying two values for `font-weight`
+and `font-stretch`. Instead of telling the browser which specific weight this
+font provides (for example `font-weight: 500;`), we now give it the **range** of
+weights supported by the font. For Roboto Flex, the Weight axis ranges from 100
+to 1000, and CSS directly maps the axis range to the `font-weight` style
+property. By specifying the range in `@font-face`, any value outside this range
+will be "capped" to the nearest valid value. The Width axis range is mapped in
+the same way to the `font-stretch` property.
+
+If you're using the Google Fonts API, this will all be taken care of. Not only
+will the CSS contain the proper source formats and ranges, Google Fonts will
+also send static fallback fonts in case variable fonts aren't supported.
+
+### Using weights and widths
+
+Currently, the axes you can reliably set from CSS are the `wght` axis through
+`font-weight`, and the `wdth` axis through `font-stretch`.
+
+Traditionally, you would set `font-weight` as a keyword (`light`, `bold`) or as
+a numerical value between 100 and 900, in steps of 100. With variable fonts, you
+can set any value within the font's Width range:
 
 ```css
-#font-amstelvar {
-  font-family: 'AmstelvarAlpha';
-  font-variation-settings: 'wdth' 400, 'wght' 98;
+.kinda-light {
+  font-weight: 125;
+}
+
+.super-heavy {
+  font-weight: 1000;
 }
 ```
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/gingham-weight-e.mp4" 
-            type="video/mp4">
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-weight.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-figcaption">
-    A demonstration of the Weight and Width axes being changed on the fly.
+  <figcaption>
+    Roboto Flex' Weight axis being changed from its minimum to its maximum.
   </figcaption>
 </figure>
 
-## Responsibility of the typesetter
+Likewise, we can set `font-stretch` with keywords (`condensed`,
+`ultra-expanded`) or with percentage values:
 
-Setting the axes values comes down to personal taste and applying typographic
-best practices. The danger with any new technology is possible misuse, and
-settings that are overly artistic or exploratory could also decrease legibility
-of the actual text. For titles, exploring different axes to create great
-artistic designs are exciting, but for body copy this risks making the text
-illegible.
+```css
+.kinda-narrow {
+  font-stretch: 33.3%;
+}
 
-<figure class="w-figure">
-  <img src="grass-mandy.png" alt="Grass example by Mandy Michael">
-  <figcaption class="w-figcaption">
-    A great example of artistic expression is 
-    <a href="https://codepen.io/mandymichael/pen/YYaWop">Mandy Michael's exploration</a> of the typeface
-    <a href="https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow">Decovar</a>.
+.super-wide {
+  font-stretch: 151%;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-width.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Roboto Flex' Width axis being changed from its minimum to its maximum.
   </figcaption>
 </figure>
 
-It's also possible to animate characters with variable fonts.
+### Using italics and obliques
+
+The `ital` axis is intended for fonts that contain both a regular style, and an
+italic style. The axis is meant to be an on/off switch: value `0` is off and
+will show the regular style, value `1` will show the italics. Unlike other axes,
+there's no transition. A value of `0.5` won't give you "half italics".
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/axis-praxis.mp4" 
-            type="video/mp4">
+The `slnt` axis is different from italics in that it's not a new _style_, but
+just slants the regular style. By default its value is `0`, which means the
+default upright letter shapes. Roboto Flex has a maximum slant of -10 degrees,
+meaning the letters will lean to the right when going from 0 to -10.
+
+It would be intuitive to set these axis through the `font-style` property, but
+as of April 2020, how to exactly do this is [still being worked
+out](https://github.com/w3c/csswg-drafts/issues/3125). So for now, you should
+treat these as custom axes, and set them through `font-variation-settings`:
+
+```css
+i, em, .italic {
+	/* Should be font-style: italic; */
+	font-variation-settings: 'ital' 1;
+}
+
+.slanted {
+	/* Should be font-style: oblique 10deg; */
+	font-variation-settings: 'slnt' 10;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-slant.mp4" type="video/mp4">
   </video>
-  <figcaption class="w-figcaption">
-    <a href="https://www.axis-praxis.org/specimens/zycon">An example of using different axes to animate characters</a>
-    with the typeface Zycon. Zycon was designed for animation by David Berlow, type designer and
-    typographer at Font Bureau.
+  <figcaption>
+    Roboto Flex' Slant axis being changed from its minimum to its maximum.
   </figcaption>
 </figure>
 
-## Variable fonts performance gains {: #performance }
+### Using optical sizes
 
-OpenType variable fonts allow us to store multiple variations of a type
-family into a single font file. [Monotype](https://goo.gl/9gonHT)
-ran an experiment by combining 12 input fonts to
-generate eight weights, across three widths, across both the Italic and Roman
-styles. Storing 48 individual fonts in a single variable font file meant a
-**88% reduction in file size**.
+A typeface can be rendered very small (a 12px footnote) or very large (a 80px
+headline). Fonts can respond to these size changes by changing its letter shapes
+to better suit its size. A small size might be better off without fine details,
+while a large size might benefit from more details and thinner strokes.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wrVCGSQNaGWhNp97BoRS.png", alt="The letter 'a' shown at different optical sizes", width="800", height="147" %}
+  <figcaption>
+    The letter 'a' in Roboto Flex at different pixel sizes, then scaled to be the same size,
+    shows the differences in design.
+    <a href="https://codepen.io/RoelN/pen/PoPvdeV">Try it yourself on Codepen</a>
+  </figcaption>
+</figure>
+
+A new CSS property has been introduced for this axis: `font-optical-sizing`. By
+default it's set to `auto`, which makes the browser set the axis value based on
+the `font-size`. This means the browser will pick the best optical size
+automatically, but if you wish to turn this off you can set
+`font-optical-sizing` to `none`.
+
+You can also set a custom value for the `opsz` axis, if you deliberately want an
+optical size that doesn't match the font size. The following CSS would cause
+text to be displayed at a large size, but at an optical size as if it were
+printed in `8pt`:
+
+```css
+.small-yet-large {
+  font-size: 100px;
+  font-variation-settings: 'opsz' 8;
+}
+```
 
-On the flip side, if you are animating the font between settings, this may
-cause the browser performance issues. Learn more about this in
-the Supercharged episode on variable fonts.
+### Using custom axes
 
-{% YouTube 'B42rUMdcB7c' %}
+Unlike registered axes, custom axes will not be mapped to an existing CSS
+property, so you will always have to set them through `font-variation-settings`.
+Tags for custom axes are always in uppercase, to distinguish them from
+registered axes.
 
-With variable fonts, app and website makers can offer really rich typography
-experiences that express each brand, without the previous bandwidth and latency
-costs. However, if you are using a single font such as Roboto Regular and
-nothing else, you might see a net gain in font size if you were to switch to a
+Roboto Flex offers a few custom axes, and the most important is Grade (`GRAD`).
+A Grade axis is interesting as it changes the weight of the font without
+changing the widths, so line breaks do not change. By playing with a Grade axis,
+you can avoid being forced to fiddle with changes to Weight axis that affects
+the overall width, and then changes to the Width axis that affect the overall
+weight.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-grade.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Roboto Flex' Grade axis being changed from its minimum to its maximum.
+  </figcaption>
+</figure>
+
+As `GRAD` is a custom axis, with a range of -200 to 150 in Roboto Flex.
+We need to address it with `font-variation-settings`:
+
+```css
+.grade-light {
+	font-variation-settings: `GRAD` -200;
+}
+
+.grade-normal {
+	font-variation-settings: `GRAD` 0;
+}
+
+.grade-heavy {
+	font-variation-settings: `GRAD` 150;
+}
+```
+
+### Variable fonts on Google Fonts
+
+Google Fonts has expanded their catalog with [variable
+fonts](https://fonts.google.com/?vfonly=true), and adding new ones regularly.
+The interface is currently aimed at picking single instances from the font:
+you select the variation you want, click "Select this style", and it will be
+added to the `<link>` element that fetches the CSS and fonts from Google Fonts.
+
+To use all the available axes, or ranges of values, you will have to [manually
+compose](https://developers.google.com/fonts/docs/css2) the URL to the Google
+Fonts API. The [variable fonts overview](https://fonts.google.com/variablefonts) lists all axes and values.
+
+The [Google Variable Fonts Links](https://github.com/RoelN/google-variable-fonts-links)
+tool can also give you the latest URLs for the full variable fonts.
+
+## Font-variation-settings inheritance
+
+While all registered axes will soon be supported through existing CSS
+properties, for the time being you might need to rely on
+`font-variation-settings` as a fallback. And if your font has custom axes,
+you'll need `font-variation-settings` too.
+
+However, here's a little gotcha with `font-variation-settings`. Every property
+you _don't explicitly set_ will automatically be reset to its default.
+Previously set values aren't inherited! This means the following will not work
+as expected:
+
+```html
+<span class="slanted grade-light">
+	I should be slanted and have a light grade
+</span>
+```
+
+First the browser will apply `font-variation-settings: 'slnt' 10` from the
+`.slanted` class. Then it will apply `font-variation-settings: 'GRAD' -200` from
+the `.grade-light` class. But this will reset the `slnt` back to its default of
+0! The result will be text in a light grade, but not slanted.
+
+Luckily, we can work around this by using CSS variables:
+
+```css
+/* Set the default values */
+:root {
+	--slnt: 0;
+	--GRAD: 0;
+}
+
+/* Change value for these elements and their children */
+.slanted {
+	--slnt: 10;
+}
+
+.grade-light {
+	--GRAD: -200;
+}
+
+.grade-normal {
+	--GRAD: 0;
+}
+
+.grade-heavy {
+	--GRAD: 150;
+}
+
+/* Apply whatever value is kept in the CSS variables */
+.slanted,
+.grade-light,
+.grade-normal,
+.grade-heavy {
+	font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
+}
+```
+
+CSS variables will cascade, so if an element (or one of its parents) will have
+set the `slnt` to `10`, it will keep that value, even if you set `GRAD` to
+something else. See
+[Fixing variable font inheritance](https://pixelambacht.nl/2019/fixing-variable-font-inheritance/)
+for an in-depth explanation of this technique.
+
+Note that animating CSS variables doesn't work (by design), so something like
+this doesn't work:
+
+```css
+@keyframes width-animation {
+   from { --wdth: 25; }
+   to   { --wdth: 151; }
+}
+```
+
+These animations will have to happen directly on `font-variation-settings`.
+
+## Performance gains
+
+OpenType variable fonts allow us to store multiple variations of a type family
+into a single font file.
+[Monotype](https://medium.com/@monotype/part-2-from-truetype-gx-to-variable-fonts-4c28b16997c3)
+ran an experiment by combining 12 input fonts to generate eight weights,
+across three widths, across both the Italic and Roman styles. Storing 48
+individual fonts in a single variable font file meant a _88% reduction in file
+size_.
+
+However, if you are using a single font such as Roboto Regular and nothing
+else, you might not see a net gain in font size if you were to switch to a
 variable font with many axes. As always, it depends on your use-case.
 
-## Fallbacks {: #fallbacks }
+On the flip side, animating the font between settings may cause performance
+issues. Although this will improve once variable font support in browsers gets
+more mature, the problem can be reduced somewhat by only animating fonts that are
+currently on screen. This handy snippet by
+[Dinamo](https://abcdinamo.com/news/using-variable-fonts-on-the-web) pauses
+animations in elements with the class `vf-animation`, when they're not on
+screen:
+
+```javascript
+var observer = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(function(entry) {
+    // Pause/Play the animation
+    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
+    else entry.target.style.animationPlayState = "paused"
+  });
+});
+
+var variableTexts = document.querySelectorAll(".vf-animation");
+variableTexts.forEach(function(el) { observer.observe(el); });
+```
+
+If your font responds to user interaction, it's a good idea to [throttle or
+debounce](https://css-tricks.com/debouncing-throttling-explained-examples/)
+input events. This will prevent the browser from rendering instances of the
+variable font that changed so little from the previous instance the human eye
+wouldn't see the difference.
+
+If you're using Google Fonts, it's a good idea to
+[preconnect](/preconnect-and-dns-prefetch/) to `https://fonts.gstatic.com`,
+the domain where Google's fonts are hosted. This will make sure the browser
+knows early on where to get the fonts when it comes across them in the CSS:
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+```
+
+This tip works for other CDNs as well: the sooner you let the browser set up a
+network connection, the sooner it can download your fonts.
+
+Find more performance tips for loading Google Fonts in [The Fastest
+Google Fonts](https://csswizardry.com/2020/05/the-fastest-google-fonts/).
 
-As mentioned in [Browser compatibility](#compatibility), most browsers support
-variable fonts. For the remaining browsers that do not, you can use `@supports`
-to create a viable fallback:
+## Fallbacks and browser support {: #fallbacks }
+
+All modern browsers [support variable
+fonts](https://caniuse.com/#feat=variable-fonts). In case you need to support
+older browsers, you can choose to build your site with static fonts, and use
+variable fonts as progressive enhancement:
 
 ```css
-@supports (font-variation-settings: 'wdth' 200) {
+/* Set up Roboto for old browsers, only regular + bold */
+@supports not (font-variation-settings: normal) {
   @font-face {
-    /* https://github.com/TypeNetwork/Amstelvar */
-    font-family: AmstelvarAlpha;
-    src: url('../fonts/AmstelvarAlpha-VF.ttf');
+    font-family: Roboto;
+    src: url('Roboto-Regular.woff2');
     font-weight: normal;
-    font-style: normal;
   }
 
-  #font-amstelvar {
-    font-family: AmstelvarAlpha;
-    font-variation-settings: 'wdth' 400, 'wght' 98;
+  @font-face {
+    font-family: Roboto;
+    src: url('Roboto-Bold.woff2');
+    font-weight: bold;
+  }
+
+  body {
+    font-family: Roboto;
+  }
+
+  .super-bold {
+    font-weight: bold;
+  }
+}
+
+/* Set up Roboto for modern browsers, all weights */
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Roboto';
+    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations'),
+         url('RobotoFlex-VF.woff2') format('woff2-variations');
+    font-weight: 100 1000;
+    font-stretch: 25% 151%;
+  }
+
+  .super-bold {
+    font-weight: 1000;
   }
 }
 ```
 
+For older browsers, text with the class `.super-bold` will get rendered in the
+normal bold, as that's the only bold font we have available. When variable fonts
+are supported, we can actually use the heaviest weight of 1000.
+
+The `@supports` rule is not supported by Internet Explorer, so this browser would
+not show any styling. If this is a problem, you could always use one of the
+[oldschool hacks](https://stackoverflow.com/a/20541859/6255000) to target relevant
+older browsers.
+
+If you are using the Google Fonts API, it will take care of loading the proper
+fonts for your visitor's browsers. Say you request the font Oswald in weight
+range 200 to 700, like so:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
+```
+
+Modern browsers that can handle variable fonts will get the variable font, and
+will have every weight between 200 and 700 available. Older browsers will get
+served individual static fonts for every weight. In this case, this means
+they'll download 6 font files: one for weight 200, one for weight 300, and so
+on.
+
 ## Thanks
 
-This article would not have been possible without the help of the following
+This article would have only been made possible with the help of the following
 people:
 
-* David Berlow, type designer and typographer at
+* [Mustafa Kurtuldu](https://twitter.com/mustafa_x), UX designer and design advocate at Google
+* [Roel Nieskens](https://twitter.com/PixelAmbacht), UX designer/developer and typography expert at [Kabisa](https://kabisa.nl)
+* [Dave Crossland](https://twitter.com/davelab6), Program Manager, Google Fonts
+* [David Berlow](https://twitter.com/dberlow), type designer and typographer at
   [Font Bureau](https://fontbureau.typenetwork.com/)
-* Laurence Penney, developer of [axis-praxis.org](https://axis-praxis.org)
-* [Mandy Michael](https://twitter.com/Mandy_Kerr)
-* Dave Crossland, Program Manager, Google Fonts
+* [Laurence Penney](https://twitter.com/lorp), developer of [axis-praxis.org](https://axis-praxis.org)
+* [Mandy Michael](https://twitter.com/Mandy_Kerr), developer of [variablefonts.dev](https://variablefonts.dev)
 
-Hero image by [Bruno Martins](https://unsplash.com/@brunus) on
-[Unsplash](https://unsplash.com/photos/OhJmwB4XWLE).
+Hero image by [Bruno Martins](https://unsplash.com/@brunus) on [Unsplash](https://unsplash.com/photos/OhJmwB4XWLE).
diff --git a/src/site/content/en/blog/variable-fonts/robot-specimen.png b/src/site/content/en/blog/variable-fonts/robot-specimen.png
deleted file mode 100644
index 7c6ef99d3d1..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/robot-specimen.png and /dev/null differ
diff --git a/src/site/content/en/blog/variable-fonts/roboto-family.png b/src/site/content/en/blog/variable-fonts/roboto-family.png
deleted file mode 100644
index c8b3f468d1e..00000000000
Binary files a/src/site/content/en/blog/variable-fonts/roboto-family.png and /dev/null differ
diff --git a/src/site/content/en/blog/video-basics/hero.jpg b/src/site/content/en/blog/video-basics/hero.jpg
deleted file mode 100644
index 3a471ee67e7..00000000000
Binary files a/src/site/content/en/blog/video-basics/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/video-basics/index.md b/src/site/content/en/blog/video-basics/index.md
index 66bdb1969e0..b0e2ccad100 100644
--- a/src/site/content/en/blog/video-basics/index.md
+++ b/src/site/content/en/blog/video-basics/index.md
@@ -1,17 +1,18 @@
 ---
+layout: post
 title: Going beyond images with basic video for the web
 subhead: Learn basic video. Increase engagement.
 authors:
   - dougsillars
 date: 2019-09-03
-hero: hero.jpg
+hero: image/admin/ZzDrBdBMFxBtALr0uCz6.jpg
 alt: A description of the hero image for screen reader users.
 description: |
   Research shows that web video lead to higher engagement and sales. Even if you haven't added video to your sites yet, it's just a matter of time until you do.
 tags:
   - media
   - blog
-  - video
+  # - video
 ---
 
 Are you thinking about adding video to your website? As devices and network
@@ -63,11 +64,11 @@ This references three separate source files. The browser starts at the top, and
 picks the first format and codec that it can use. In the video world, the file
 format, usually called the container, can be saved with different codecs, each
 with different attributes. ([More on this
-here](https://developers.google.com/web/fundamentals/media/manipulating/applications).)
+here](/media-application-basics/).)
 In the example above, the first choice is the WebM format ([which can be encoded
 with VP8 or VP9 codecs](https://www.webmproject.org/about/)), and is supported
 (at the time of writing) by 78% of [global
-users](https://caniuse.com/#search=webm). The second choice is the the H.265
+users](https://caniuse.com/#search=webm). The second choice is the H.265
 codec of mp4, which is supported on [iOS and newer
 Macs](https://caniuse.com/#search=h265). These codecs are newer and have
 improved data compression, while delivering the same quality video as older
@@ -79,7 +80,7 @@ users](https://caniuse.com/#search=h264),
 but is an older format, and as such, is generally a lot larger than WebM or H.265
 videos. In one example, you can see the difference for a two minute movie:
 
-<div class="w-table-wrapper">
+<div>
   <table>
     <thead>
       <tr>
@@ -156,15 +157,15 @@ window before the video starts playing:
 <video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
 ```
 
-<figure class="w-figure">
-  <img src="no-poster.png" alt="A video without a poster shows a black screen before it starts.">
+<figure>
+  {% Img src="image/admin/g25bdsYqmAWM39KhjGTj.png", alt="A video without a poster shows a black screen before it starts.", width="478", height="269" %}
 </figure>
 {% Compare 'worse', 'No poster image' %}
   A video without a poster shows a black screen before it starts.
 {% endCompare %}
 
-<figure class="w-figure">
-  <img src="poster.png" alt="A video with a poster is much more engaging.">
+<figure>
+  {% Img src="image/admin/QVLwk1zEOzqllD8eY3pc.png", alt="A video with a poster is much more engaging.", width="478", height="269" %}
 </figure>
 {% Compare 'better', 'With a poster image' %}
   A video with a poster is much more engaging.
@@ -193,7 +194,7 @@ further reduces the size of the video file being delivered to the customer.
 As with containers and codecs, removing the audio file, also called demuxing, is
 also beyond the scope of this article. You can find instructions in the [Media
 Manipulation Cheat
-Sheet](https://developers.google.com/web/fundamentals/media/manipulating/cheatsheet#demux_split_audio_and_video).
+Sheet](/media-conversion/#demux-separate-the-audio-and-video-streams).
 
 ## loop
 
diff --git a/src/site/content/en/blog/video-basics/no-poster.png b/src/site/content/en/blog/video-basics/no-poster.png
deleted file mode 100644
index 754156f85be..00000000000
Binary files a/src/site/content/en/blog/video-basics/no-poster.png and /dev/null differ
diff --git a/src/site/content/en/blog/video-basics/poster.png b/src/site/content/en/blog/video-basics/poster.png
deleted file mode 100644
index abc201229a8..00000000000
Binary files a/src/site/content/en/blog/video-basics/poster.png and /dev/null differ
diff --git a/src/site/content/en/blog/viewport-units/index.md b/src/site/content/en/blog/viewport-units/index.md
new file mode 100644
index 00000000000..ff6114458ec
--- /dev/null
+++ b/src/site/content/en/blog/viewport-units/index.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: The large, small, and dynamic viewport units
+subhead: >
+  New CSS units that account for mobile viewports with dynamic toolbars.
+authors:
+  - bramus
+description: >
+  New CSS units that account for mobile viewports with dynamic toolbars.
+date: 2022-11-29
+hero: image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/3ZKf0cQWs0eESL5WZzb0.png
+alt: Visualization of the small viewport (left) and large viewport (right).
+is_baseline: true
+tags:
+  - blog
+  - css
+  - newly-interoperable
+---
+
+{% Aside 'celebration' %}
+This web feature is now available in all three browser engines!
+{% endAside %}
+
+## The viewport and its units
+
+To size something as tall as the viewport, you can use the `vw` and `vh` units.
+
+- `vw` = 1% of the width of the viewport size.
+- `vh` = 1% of the height of the viewport size.
+
+Give an element a width of `100vw` and a height of `100vh`, and it will cover the viewport entirely.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/IpR2qrX8ENZ1MRMJfehn.png", alt="A light blue element set to be 100vw by 100vh, covering the entire viewport. The viewport itself is indicated using a blue dashed border.", width="800", height="450", class="screenshot" %}
+  <figcaption>A light blue element set to be 100vw by 100vh, covering the entire viewport.<br />The viewport itself is indicated using a blue dashed border.</figcaption>
+</figure>
+
+The `vw` and `vh` units landed in browsers with these additional units
+
+- `vi` = 1% of the size of the viewport’s inline axis.
+- `vb` = 1% of the size of the viewport’s block axis.
+- `vmin` = the smaller of `vw` or `vh`.
+- `vmax` = the larger of `vw` or `vh`.
+
+These units have good browser support.
+
+{% BrowserCompat 'css.types.length.vw' %}
+
+## The need for new viewport units
+
+While the existing units work well on desktop, it’s a different story on mobile devices. There, the viewport size is influenced by the presence or absence of dynamic toolbars. These are user interfaces such as address bars and tab bars.
+
+Although the viewport size can change, the `vw` and `vh` sizes do not. As a result, elements sized to be `100vh` tall will bleed out of the viewport.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/bWbl71iEuR5Gu9a2eAxD.png", alt="100vh on mobile is too tall on load.", width="800", height="450", class="screenshot" %}
+  <figcaption>100vh on mobile is too tall on load.</figcaption>
+</figure>
+
+When scrolling down these dynamic toolbars will retract. In this state, elements sized to be `100vh` tall will cover the entire viewport.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/kuGqSsKtDI1PNUDEVx8n.png", alt="100vh on mobile is “correct” when the User-Agent user interfaces are retracted.", width="800", height="450", class="screenshot" %}
+  <figcaption>100vh on mobile is “correct” when the User-Agent user interfaces are retracted.</figcaption>
+</figure>
+
+To solve this problem, the various states of the viewport have been specified at the CSS Working Group.
+
+- **Large viewport**: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
+- **Small Viewport**: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/ZwgiN6CI2ERg04ntpnNG.png", alt="Visualizations of the large and small viewports.", width="800", height="450", class="screenshot" %}
+  <figcaption>Visualizations of the large and small viewports.</figcaption>
+</figure>
+
+The new viewports also have units assigned to them:
+
+- Units representing the large viewport have the `lv` prefix. The units are `lvw`, `lvh`, `lvi`, `lvb`, `lvmin`, and `lvmax`.
+- Units representing the small viewport have the `sv` prefix. The units are `svw`, `svh`, `svi`, `svb`, `svmin`, and `svmax`.
+
+The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/ScGKMyzS1WyS7ByoVvn8.png", alt="Two mobile browser visualizations positioned next to each other. One has an element sized to be 100svh and the other 100lvh.", width="800", height="450", class="screenshot" %}
+  <figcaption>Two mobile browser visualizations positioned next to each other.<br />One has an element sized to be 100svh and the other 100lvh.</figcaption>
+</figure>
+
+In addition to the large and small viewports, there‘s also a dynamic viewport which has dynamic consideration of the UA UI:
+
+- When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
+- When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.
+
+Its accompanied units have the `dv` prefix: `dvw`, `dvh`, `dvi`, `dvb`, `dvmin`, and `dvmax`. Their sizes are clamped between their `lv*` and `sv*` counterparts.
+
+<figure>
+  {% Img src="image/AeNB0cHNDkYPUYzDuv8gInYA9rY2/UCWsRe1PmYg7nvAvTu86.png", alt="100dvh adapts itself to be either the large or small viewport size.", width="800", height="450", class="screenshot" %}
+  <figcaption>100dvh adapts itself to be either the large or small viewport size.</figcaption>
+</figure>
+
+These units ship in Chrome 108, joining Safari and Firefox which already have support.
+
+{% BrowserCompat 'css.types.length.viewport_percentage_units_large' %}
+
+{%Aside%}
+In browsers that don’t have dynamic UA UI–such as Chrome on desktop–the size of the large, small, and dynamic viewports are the same.
+{%endAside%}
+
+## Caveats
+
+There‘s a few caveats to know about Viewport Units:
+
+- None of the viewport units take the size of scrollbars into account. On systems that have classic scrollbars enabled, an element sized to `100vw` will therefore be a little bit too wide. This is as [per specification](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths:~:text=In%20all%20cases%2C%20scrollbars%20are%20assumed%20not%20to%20exist.).
+
+- The values for the dynamic viewport do not update at 60fps. In all browsers updating is throttled as the UA UI expands or retracts. Some browsers even debounce updating entirely depending on the gesture (a slow scroll versus a swipe) used.
+
+- The on-screen keyboard (also known as the virtual keyboard) is not considered part of the UA UI. Therefore it does not affect the size of the viewport units. In Chrome [you can opt-in to a behavior where the presence of the virtual keyboard does affect the viewport units](https://developer.chrome.com/blog/viewport-resize-behavior/#opting-in-to-a-different-behavior).
+
+## Additional resources
+
+To learn more about viewports and these units check out [this episode of HTTP 203](https://www.youtube.com/watch?v=xl9R8aTOW_I). In it, [Bramus](/authors/bramus/) tells [Jake](/authors/jakearchibald/) all about the various viewports and explains how exactly the sizes of these units are determined.
+
+{% YouTube id="xl9R8aTOW_I" %}
+
+Additional reading material:
+
+- [CSS Values 4 Specification: Viewport-relative lengths](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths)
+- [ChromeStatus Entry](https://chromestatus.com/feature/5170718078140416?context=myfeatures)
+- [Layout Viewport explainer](https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/layout-viewport.md)
+- [Viewport Units explainer](https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/viewport-units.md)
diff --git a/src/site/content/en/blog/vitals-business-impact/index.md b/src/site/content/en/blog/vitals-business-impact/index.md
new file mode 100644
index 00000000000..d2e2a4313be
--- /dev/null
+++ b/src/site/content/en/blog/vitals-business-impact/index.md
@@ -0,0 +1,289 @@
+---
+layout: post
+title: "The business impact of Core Web Vitals"
+subhead: >
+  This article will help you understand how Core Web Vitals correlate with
+  key business metrics by exploring examples of companies which have already see
+  positive impact for their users and business.
+description: >
+  This article will help you understand how Core Web Vitals correlate with
+  key business metrics by exploring examples of companies which have already seen
+  positive impact for their users and business.
+authors:
+  - saurabhrajpal
+  - swethagopalakrishnan
+date: 2021-05-18
+updated: 2021-09-30
+hero: image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/m80oUd2zASInyKJJ7QNc.png
+# thumbnail: image/admin/i2nyfqyVr4XWqilOxPrY.png
+alt: LCP, FID, CLS.
+tags:
+  - blog
+  - web-vitals
+  - performance
+  - case-study
+---
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/m80oUd2zASInyKJJ7QNc.png",
+alt="LCP, FID, CLS",
+width="800", height="232" %}
+
+Are you struggling to convince your stakeholders to adopt
+[Core Web Vitals](/learn-core-web-vitals/)?
+Or are you wondering if it actually helps your business?
+This article will help you understand how Core Web Vitals correlate with
+key business metrics by exploring examples of companies which have already seen
+positive impact for their users and business.
+
+If you prefer video, check out this talk from Google I/O:
+
+{% YouTube "nPmAE0YjGK0" %}
+
+## Why Core Web Vitals matter to your users and business
+
+Different stakeholders in an organization can have different priorities.
+Core Web Vitals can bring them all on the same page by focusing on
+optimizing user-centric metrics and the resulting business growth.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/zqgaPavQTlKrJVTs9ttR.png",
+alt="Thinking about CWV.", width="800", height="318" %}
+
+The path to good Core Web Vitals can vary from site to site
+depending on where they are in the performance journey and how complex the site design is.
+It can range from grabbing the low-hanging fruit and getting meaningful results;
+to implementing complex solutions that fix challenging issues.
+Regardless of the amount of time spent,
+decision makers should treat this as a long term investment into growth of their business.
+Delivering a fast and seamless navigation experience delights users
+and helps turn them into loyal and returning customers.
+For product managers, performance should be an important criteria
+that defines the quality and success of new product features.
+And product excellence and working on interesting challenges improves developer satisfaction as well.
+
+While [Core Web Vitals as a ranking signal](https://developers.google.com/search/blog/2021/04/more-details-page-experience)
+gives additional motivation to invest time in performance,
+adopting Core Web Vitals has many other short- and long-term benefits beyond ranking.
+Let's explore several case studies of global and local brands who adopted Core Web Vitals
+(before it had impact on ranking) because of its focus on user experience.
+
+## Case studies
+
+### Vodafone
+
+[Vodafone (Italy) improved LCP](/vodafone) by **31%** to achieve **8% more sales**.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/OThyIjGk0YMLgXbvMbFT.png",
+alt="8% more sales",
+width="800", height="368" %}
+
+#### Techniques
+
+- Server Side Render the critical HTML.
+- Reduce render blocking Javascript.
+- Image optimization techniques.
+- Resize hero image; defer non critical resources.
+
+#### Key learnings
+
+- A/B testing is the best way to measure the meaningful impact.
+- A/B should be a server side one.
+
+### iCook
+
+iCook improved CLS by 15% to achieve 10% more ad revenue.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/VUyTBGhoj9Tr17yhAcD7.png",
+alt="Chart showing ad revenue increasing.",
+width="800", height="422" %}
+
+#### Techniques
+
+- Less variability in ad unit size and fixed size ad slots pre-allocated in UI.
+- Optimized ad script loading logic to prioritize header bidding and defer non-critical JS.
+
+#### Key learnings
+
+Fill rate might get impacted but eventually revenue uplifts with ads viewability improvement.
+
+### Tokopedia
+
+Tokopedia improved LCP by 55% and saw 23% better average session duration.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/HsbbXe0pp73pfZvAlwNl.png",
+alt="Before 3.78s, after 1.72s.",
+width="800", height="722" %}
+
+#### Techniques
+
+- Server-side render (SSR) LCP element.
+- Preload LCP Element.
+- Image optimization (compression, WebP, lazy load non-critical images).
+
+#### Key learnings
+
+- Built a performance monitoring dashboard
+to monitor progress and impact across teams.
+- Experimented with different rendering techniques
+(for example, SSR LCP element vs SSR above the fold content vs Full client-side rendering).
+
+### Redbus
+
+CWV fixes contributed to 80-100% mobile conversion rates(mCVR) and significant domain ranking uplift across Redbus’s global market properties.
+
+{% Img
+src="image/akX10MMTHtVhXYWSgqNknjak5KQ2/1988aZMNJ7viKhj8U3aS.png",
+alt="192% domain ranking uplift in Columbia",
+width="800", height="360" %}
+
+#### Techniques
+
+- Fixing slots for page components and removing unoptimized tag insertion scripts [improved CLS](/optimize-cls).
+- [Optimizing third-party scripts](/controlling-third-party-scripts) and building microservices with single responsibility principle significantly reduced TTI and TBT.
+
+#### Key learnings
+
+- Reducing CLS from 1.65 to 0 significantly uplifted their domain rankings globally.
+- Reducing TTI from around 8&nbsp;s to  around 4&nbsp;s and TBT from around 1200&nbsp;ms to around 700&nbsp;ms contributed to an 80-100% increase in mCVR across global properties.
+- [Using RUM tools](/vitals-measurement-getting-started) helped capture the real world performance metrics in lower tier markets.
+- Adopting a [performance culture](/performance-budgets-101) is very important to avoid regression. This also improves team productivity thanks to optimized code, faster releases, and fewer production issues.
+
+The case studies above show that you can achieve a lot
+by adopting best practices and implementing quick wins.
+Here are a few more real-world examples of this point.
+
+{% Img
+src="image/akX10MMTHtVhXYWSgqNknjak5KQ2/zqcmwjQjSsuTqswQOxqR.png",
+alt="Netzwelt saw 18 percent increase ads revenue,
+Lazada saw 3x LCP and 16.9 percent increase in conversion rate on mobile,
+GYAO saw 3.1x LCP and 108 percent improvement in click-through rate",
+width="800", height="437" %}
+
+The above results were achieved by grabbing low hanging fruit such as:
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th><a href="/fast/#i18n.paths.fast.topics.optimize_your_images">
+        Image optimization</a></th>
+        <th><a href="/optimize-lcp/">JavaScript optimization</a></th>
+        <th><a href="/optimize-cls/#ads-embeds-and-iframes-without-dimensions">
+        Ads and dynamic content</a></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Using WebP image format</td>
+        <td>Deferring third-party JS</td>
+        <td>Reserving space for ads above-the-fold</td>
+      </tr>
+      <tr>
+        <td>Using image CDNs</td>
+        <td>Removing render-blocking and unused JS</td>
+        <td>Setting height for dynamic content</td>
+      </tr>
+      <tr>
+        <td>Compression</td>
+        <td>Lazy loading non-critical JS</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Deferring non-critical images</td>
+        <td>Preloading critical JS</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Preloading hero images</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><a href="/image-aspect-ratio/">Specifying aspect ratio</a></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+For more best practices, check out the
+[Web Vitals guidance](/learn-core-web-vitals/).
+Use
+[PageSpeed Insights](https://pagespeed.web.dev/)
+to audit your website and get actionable recommendations immediately.
+
+There are several more global brands which have also benefited from investing in Core Web Vitals.
+
+{% Img
+src="image/akX10MMTHtVhXYWSgqNknjak5KQ2/uKMplYNMdeDswi14lWhM.png",
+alt="",
+width="800", height="400" %}
+
+- Tencent Video saw **70% better CTR** for videos by passing Core Web Vitals.
+- Cdiscount improved all 3 metrics which contributed to **6% revenue uplift** in their Black Friday sale.
+- Wix increased mobile origins passing Core Web Vitals by **over 250% year-on-year**.
+- Nykaa found that a 40% improvement in LCP led to **28% more organic traffic** from T2/T3 cities.
+- NIKKEI STYLE's 18% LCP improvement resulted in **9% more pageviews per session**.
+- <a href="/ndtv">NDTV gained a **50% better bounce rate** after halving LCP, along with other product changes.</a>.
+- <a href="/agrofy/">Agrofy Market's 70% better LCP correlated to **76% reduction in load abandonment**.</a>.
+- Flipkart achieved **2.6% reduction in bounce rate** by improving Core Web Vitals metrics.
+- Ameba Manga improved the **number of comics read by 2-3 times** by improving the CLS score 10 times.
+- <a href="/yahoo-japan-news/">Yahoo! Japan fixed CLS which led to a 98% reduction in poor pages and **15% uplift in page views per session**.</a>.
+- AliExpress improved CLS by 10 times and LCP by double, which translated to **15% lesser bounce rates**.
+- GEDI saw 77% reduction in CLS and an **8% reduction in bounce rate**.
+
+## How can you get started now?
+
+### Step 1: Start measuring
+
+Start by measuring field data for your site using Real User Monitoring (RUM) tools. There are various Google and third-party (3P) RUM tools available already.
+
+{% Img src="image/akX10MMTHtVhXYWSgqNknjak5KQ2/RR58abBFQBGphUgjvHaa.png", alt="RUM tools", width="800", height="397" %}
+
+#### Google RUM tools
+
+- Search Console
+- PageSpeed Insights
+- web-vitals JavaScript library
+- Chrome User Experience Report (CrUX)
+
+#### Third-party RUM tools
+
+- Cloudflare
+- New Relic
+- Akamai
+- Calibre
+- Blue Triangle
+- Sentry
+- SpeedCurve
+- Raygun
+
+Pick the tool that works best for you.
+You can go a step further and [integrate with
+Google Analytics 4](/vitals-ga4)
+to correlate Core Web Vitals with your business metrics.
+
+### Step 2: Convince your stakeholders
+
+- Educate your stakeholders about the importance of adopting Core Web Vitals
+to improve user experience and its correlation with company's business metrics.
+- Get a sponsor internally to start a small experiment.
+- Create a shared goal among stakeholders to improve Core Web Vitals across teams.
+
+### Step 3: Deliver successful implementation using these tips
+
+- **Prioritize**: Pick a page with high traffic and/or conversion significance
+to deliver meaningful results (for example, ads landing page, conversion page, or popular pages).
+- **A/B Test**: Use server side testing to avoid any rendering cost.
+Compare results between optimized and unoptimized versions.
+- **Monitor**: Use continuous monitoring to prevent regressions.
+
+Lastly, we believe that performance is a journey not a destination.
+On that note, we plan to keep this article updated with the latest case study highlights.
+If you also have a compelling business win and would like to be featured in this article,
+[submit a content proposal](/handbook/quick-start/).
diff --git a/src/site/content/en/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/en/blog/vitals-field-measurement-best-practices/index.md
index 86e5976d07e..0c3c4c2f26f 100644
--- a/src/site/content/en/blog/vitals-field-measurement-best-practices/index.md
+++ b/src/site/content/en/blog/vitals-field-measurement-best-practices/index.md
@@ -5,8 +5,8 @@ authors:
   - philipwalton
 description: How to measure Web Vitals with your current analytics tool
 date: 2020-05-27
-updated: 2020-07-21
-hero: /vitals/web-vitals-hero.png
+updated: 2022-05-11
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
 alt: How to measure Web Vitals with your current analytics tool
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
@@ -17,7 +17,7 @@ tags:
 Having the ability to measure and report on the real-world performance of your
 pages is critical for diagnosing and improving performance over time. Without
 [field
-data](https://github.com/user-centric-performance-metrics/#how-metrics-are-measured),
+data](/user-centric-performance-metrics/#in-the-field),
 it's impossible to know for sure whether the changes you're making to your site
 are actually achieving their desired results.
 
@@ -67,7 +67,7 @@ The following code sample shows how easy it can be to track these metrics in
 code and send them to an analytics service.
 
 ```js
-import {getCLS, getFID, getLCP} from 'web-vitals';
+import {onCLS, onFID, onLCP} from 'web-vitals';
 
 function sendToAnalytics({name, value, id}) {
   const body = JSON.stringify({name, value, id});
@@ -76,11 +76,32 @@ function sendToAnalytics({name, value, id}) {
       fetch('/analytics', {body, method: 'POST', keepalive: true});
 }
 
-getCLS(sendToAnalytics);
-getFID(sendToAnalytics);
-getLCP(sendToAnalytics);
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
 ```
 
+## Avoid averages
+
+It's tempting to sum up a range of values for a performance metric by
+calculating an average. Averages seem convenient at first glance, as they're a
+tidy summary of a large quantity of data, but you should resist the urge to rely
+on them to interpret page performance.
+
+[Averages are problematic](https://www.igvita.com/2016/01/12/the-average-page-is-a-myth/)
+because they don't represent any single user's session. Outliers at either range
+of the distribution may skew the average in ways that are misleading.
+
+For example, a small group of users may be on extremely slow networks or devices
+that are toward the maximum range of values, but don't account for enough user
+sessions to impact the average in a way that suggests there's a problem.
+
+Whenever possible, rely on percentiles instead of averages. Percentiles across a
+distribution for a given performance metric better describe the full range of
+user experiences for your website. This allows you to focus on subsets of
+_actual_ experiences, which will give you more insight than a single value ever
+could.
+
 ## Ensure you can report a distribution
 
 Once you've computed the values for each of the Core Web Vitals metrics and sent
@@ -91,6 +112,12 @@ To ensure you're meeting the [recommended Core Web Vitals
 thresholds](/vitals/#core-web-vitals), you'll need your report
 to display the value of each metric at the 75th percentile.
 
+{% Aside %}
+While the 75th percentile is a great place to start, it may be worth observing
+the 90th or even the 95th percentile. This will help you to understand the user
+experience for those who are on very slow networks or devices.
+{% endAside %}
+
 If your analytics tool does not offer quantile reporting as a built-in feature,
 you can probably still get this data manually by generating a report that lists
 every metric value sorted in ascending order. Once this report is generated, the
@@ -108,21 +135,21 @@ you should be able to generate a report, broken down by individual metric
 instances, if you include the custom dimension in the report configuration.
 Since each instance will have a unique dimension value, no grouping will occur.
 
-For example the following histogram was generated from Google Analytics using
-the technique described above (since Google Analytics does not support quantile
-reporting in any of its standard reports). The data was queried using the
-[Analytics Reporting
-API](https://developers.google.com/analytics/devguides/reporting/core/v4) and
-displayed using a JavaScript data visualization library:
+The [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report)
+is an example of this technique that uses Google Analytics. The code for the
+report is [open source](https://github.com/GoogleChromeLabs/web-vitals-report),
+so developers can reference it as an example of the techniques outlined in this
+section.
 
-![Largest Contentful Paint histogram](lcp-histogram.png)
+![Screenshots of the Web Vitals
+Report](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)
 
 {% Aside %}
-  Tip: The [`web-vitals`](https://github.com/GoogleChrome/web-vitals) library
-  provides an ID for each metric instance reported making it easy to build
-  distributions in most analytics tools. See the
-  [`Metric`](https://github.com/GoogleChrome/web-vitals#metric) interface
-  documentation for more details.
+Tip: The [`web-vitals`](https://github.com/GoogleChrome/web-vitals)
+JavaScript library provides an ID for each metric instance reported making
+it possible to build distributions in most analytics tools. See the
+[`Metric`](https://github.com/GoogleChrome/web-vitals#metric) interface
+documentation for more details.
 {% endAside %}
 
 ## Send your data at the right time
@@ -133,9 +160,9 @@ final once the page has started unloading.
 
 This can be problematic, however, since both the `beforeunload` and `unload`
 events are not reliable (especially on mobile) and their use is [not
-recommended](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#legacy-lifecycle-apis-to-avoid)
+recommended](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid)
 (since they can prevent a page from being eligible for the [Back-Forward
-Cache](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#page-navigation-cache)).
+Cache](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache)).
 
 For metrics that track the entire lifespan of a page, it's best to send whatever
 the metric's current value is during the `visibilitychange` event, whenever the
@@ -152,12 +179,12 @@ a new page. This makes the `visibilitychange` event far more reliable than the
 `unload` or `beforeunload` events.
 
 {% Aside 'gotchas' %}
-  Due to [some browser
-  bugs](https://github.com/w3c/page-visibility/issues/59#issue-554880545), there
-  are a few cases where the `visibilitychange` event does not fire. If you're
-  building your own analytics library, it's important to be aware of these bugs.
-  Note that the [web-vitals](https://github.com/GoogleChrome/web-vitals)
-  JavaScript library does account for all of these bugs.
+Due to [some browser
+bugs](https://github.com/w3c/page-visibility/issues/59#issue-554880545), there
+are a few cases where the `visibilitychange` event does not fire. If you're
+building your own analytics library, it's important to be aware of these bugs.
+Note that the [web-vitals](https://github.com/GoogleChrome/web-vitals)
+JavaScript library does account for all of these bugs.
 {% endAside %}
 
 ## Monitor performance over time
@@ -196,10 +223,10 @@ confidence that a change does indeed improve performance, you can roll it out to
 all users.
 
 {% Aside %}
-  Experiment groups should always be set on the server. Avoid using any
-  experimentation or A/B testing tool that runs on the client. These tools will
-  typically block rendering until a user's experiment group is determined, which
-  can be detrimental to your LCP times.
+Experiment groups should always be set on the server. Avoid using any
+experimentation or A/B testing tool that runs on the client. These tools will
+typically block rendering until a user's experiment group is determined, which
+can be detrimental to your LCP times.
 {% endAside %}
 
 ## Ensure measurement doesn't affect performance
@@ -228,7 +255,7 @@ there's no need to rush to get your scripts loaded early.
 In the event that you're measuring a metric that cannot be computed later in the
 page load timeline, you should inline _only_ the code that needs to run early
 into the `<head>` of your document (so it's not a [render-blocking
-request](/render-blocking-resources/)) and defer the rest. Do not load all your
+request](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)) and defer the rest. Do not load all your
 analytics early just because a single metric requires it.
 
 ### Do not create long tasks
@@ -237,7 +264,7 @@ Analytics code often runs in response to user input, but if your analytics code
 is conducting a lot of DOM measurements or using other processor-intensive APIs
 the analytics code itself can cause poor input responsiveness. In addition, if
 the JavaScript file containing your analytics code is large, executing that file
-can block the main thread and negatively affect FID.
+can block the main thread and negatively affect [First Input Delay (FID)](/fid/) or [Interaction to Next Paint (INP)](/inp/).
 
 ### Use non-blocking APIs
 
@@ -255,11 +282,11 @@ In general, all analytics beacons should be sent using the `sendBeacon()` API
 idle periods.
 
 {% Aside %}
-  For guidance on how to maximize the use of idle time, while still
-  ensuring code can be run urgently when needed (like when a user is unloading
-  the page), refer to the
-  [idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/)
-  pattern.
+For guidance on how to maximize the use of idle time, while still
+ensuring code can be run urgently when needed (like when a user is unloading
+the page), refer to the
+[idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/)
+pattern.
 {% endAside %}
 
 ### Don't track more than what you need
diff --git a/src/site/content/en/blog/vitals-field-measurement-best-practices/lcp-histogram.png b/src/site/content/en/blog/vitals-field-measurement-best-practices/lcp-histogram.png
deleted file mode 100644
index fe056c830b5..00000000000
Binary files a/src/site/content/en/blog/vitals-field-measurement-best-practices/lcp-histogram.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-ga4/index.md b/src/site/content/en/blog/vitals-ga4/index.md
new file mode 100644
index 00000000000..a77a05ab3d4
--- /dev/null
+++ b/src/site/content/en/blog/vitals-ga4/index.md
@@ -0,0 +1,693 @@
+---
+layout: post
+title: Measure and debug performance with Google Analytics 4 and BigQuery
+subhead: |
+  Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Looker Studio.
+description: |
+  Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Looker Studio.
+authors:
+  - philipwalton
+  - mkazi
+date: 2021-05-18
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Web Vitals logo
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Google provides a number of tools—[Search
+Console](https://support.google.com/webmasters/answer/9205520), [PageSpeed
+Insights](https://pagespeed.web.dev/) (PSI), and
+the [Chrome User Experience
+Report](https://developer.chrome.com/docs/crux/)
+(CrUX)—that let developers see how their sites perform against the [Core Web
+Vitals](/vitals/#core-web-vitals) metrics for their real users [in the
+field](/user-centric-performance-metrics/#in-the-field).
+
+These tools are great in that they give you a high-level view of your site's
+real-user performance, and they require absolutely no setup to start using.
+
+However, there are a few critical reasons why you don't want to rely on these
+tools alone to measure your site's performance:
+
+* CrUX-based tools report data by either monthly or previous 28-day periods.
+  This means you'll have to wait a long time after making any changes before you
+  can see the results.
+* CrUX-based tools can only be segment by a limited number of dimensions, such as
+  country, connection type, and device category (desktop or mobile). You can't
+  slice the data by dimensions specific to your business (for example: engaged
+  users, users in a particular experiment group, etc.).
+* CrUX-based tools can tell you _what_ your performance is, but they can't tell
+  you _why_. With analytics tools you can send additional data to help you track
+  down and debug issues.
+
+For these reasons, we recommend all site owners monitor Core Web Vitals metrics
+using their existing analytics tool. This post explains how you can use free
+tools offered by Google to do just that.
+
+Once you have everything set up, you'll be able to create dashboards like these:
+
+{% Img src="image/dTS0rVPXlWfkJ67VZYPxGwaAj7j1/Qxzm5QpwjaVAsqi28g5J.png",
+       alt="Web Vitals Connector report screenshot",
+       width="800",
+       height="452" %}
+
+{% Img src="image/dTS0rVPXlWfkJ67VZYPxGwaAj7j1/eJcnoFjJhPVeZCkS1gsG.png",
+       alt="Web Vitals Connector report screenshot",
+       width="800",
+       height="474" %}
+
+And If you want a visual overview of all the steps outlined here, check out [our talk from Google I/O '21](https://www.youtube.com/watch?v=xg47r3Y6K8I):
+
+{% YouTube "xg47r3Y6K8I" %}
+
+## Measure
+
+Measuring performance has always been possible with Google Analytics using
+[custom metrics](https://support.google.com/analytics/answer/2709829), but there
+are a few new features in [Google Analytics
+4](https://support.google.com/analytics/answer/10089681) (GA4) that developers
+in particular should be excited about.
+
+* Zero-config, [custom
+  event](https://developers.google.com/analytics/devguides/collection/ga4/events#custom_events)
+  parameters
+* Free [BigQuery export](https://support.google.com/analytics/answer/9358801),
+  so you can query your data using SQL
+
+While the Google Analytics web interface does have powerful analysis tools, it's
+hard to beat the power and flexibility of raw event data access using a query
+language you likely already know.
+
+To get started measuring Core Web Vitals using Google Analytics 4 and BigQuery,
+you need to do three things:
+
+1. [Create a Google Analytics 4
+   property](https://support.google.com/analytics/answer/10089681#start) and a
+   [BigQuery project](https://cloud.google.com/bigquery).
+2. Enable [BigQuery export](https://support.google.com/analytics/answer/9358801)
+   in your Google Analytics property config, so all data you receive will be
+   automatically populated in your BigQuery project tables.
+3. Add the [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript
+   library to your site, so you can measure the Core Web Vitals metrics and
+   [send the data to Google Analytics
+   4](https://github.com/GoogleChrome/web-vitals#using-gtagjs-google-analytics-4).
+
+## Analyze
+
+Once you're all set up, you should see event data populating in the BigQuery
+interface, and you should be able to query the data like this:
+
+```sql
+SELECT * FROM `my_project_id.analytics_XXXXX.events_*`
+WHERE event_name IN ('LCP', 'FID', 'CLS')
+```
+
+Here's a preview of the results from that query:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/CfzjCEhryDJbVgrWSKV6.png",
+       alt="Web Vitals event data in BigQuery",
+       width="800",
+       height="418" %}
+
+### Query Web Vitals data
+
+Before you start querying your Web Vitals event data, it's important to
+understand how the data is aggregated.
+
+The most important thing to understand is that, in some cases, [multiple events
+may be
+received](https://github.com/GoogleChrome/web-vitals#:~:text=In%20other%20cases%2C%20a%20metric%20callback%20may%20be%20called%20more%20than%20once%3A)
+for the same metric, on the same page. This can happen if the metric value
+changes and an updated value is reported (a common occurrence with CLS).
+
+For Web Vitals events, the last value sent is always the most accurate one, so
+before performing any analysis, it's important to filter for just those values.
+The code snippet provided by the web-vitals JavaScript library to send data to
+Google Analytics 4 includes sending a unique ID per metric, so you can use the
+following query to limit your results to just the last-received value for each
+metric ID:
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+```
+
+Note that all other queries referenced in this post will start with this
+subquery.
+
+The next few sections show a few examples of common Web Vitals queries you might
+want to run.
+
+### Example queries
+
+#### LCP, FID, and CLS at the 75% percentile (p75) across the whole site
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  metric_name,
+  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS p75,
+  COUNT(1) as count
+FROM (
+  SELECT
+    metric_name,
+    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
+  FROM web_vitals_events
+)
+GROUP BY 1
+```
+
+#### All individual LCP values from highest to lowest
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
+FROM web_vitals_events
+WHERE metric_name = 'LCP'
+ORDER BY metric_value DESC
+```
+
+#### LCP scores (p75) of the 10 most popular pages
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  page_path,
+  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS LCP,
+  COUNT(1) as count
+FROM (
+  SELECT
+    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
+    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
+  FROM web_vitals_events
+  WHERE metric_name = 'LCP'
+)
+GROUP BY 1
+ORDER BY count DESC
+LIMIT 10
+```
+
+#### Top 10 pages with the worst CLS (p75)
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  page_path,
+  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS CLS,
+  COUNT(1) as count
+FROM (
+  SELECT
+    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
+    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
+  FROM web_vitals_events
+  WHERE metric_name = 'CLS'
+)
+GROUP BY 1
+HAVING count > 50 # Limit to relatively popular pages
+ORDER BY CLS DESC
+LIMIT 10
+```
+
+## Debug
+
+The above queries show how to query the Web Vitals metric data, which is helpful
+for understanding your current performance and how it's trending over time. But
+what can you do if your performance is worse than expected but you're not sure
+why?
+
+Knowing _what_ your scores are is not helpful if you're not able to take action
+and fix the problems.
+
+[Debug performance in the field](/debug-performance-in-the-field/) explains how
+you can send additional debug information with your analytics data. If you
+follow the instructions detailed in that post, you should see that debug
+information appear in BigQuery as well.
+
+The following queries show how to use the `debug_target` event parameter to help
+identify the root cause of performance issues.
+
+### Example queries
+
+#### Top elements contributing to CLS
+
+The `debug_target` is a CSS selector string that corresponds to the element on
+the page that is most relevant to the metric value.
+
+With CLS, the `debug_target` represents the largest element from the largest
+layout shift that contributed to the CLS value. If no elements shifted then the
+`debug_target` value will be `null`.
+
+The following query will list pages from worst to best by their CLS at the 75th
+percentile, grouped by `debug_target`:
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  page_path,
+  debug_target,
+  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS CLS,
+  COUNT(1) as count
+FROM (
+  SELECT
+    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
+    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
+    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
+    *
+  FROM web_vitals_events
+  WHERE metric_name = 'CLS'
+)
+GROUP BY 1, 2
+HAVING count > 50 # Limit to relatively popular pages
+ORDER BY CLS DESC
+```
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/0rgPwLXOplwT706jvmuy.png",
+       alt="Query result for top elements contributing to CLS",
+       width="800",
+       height="445" %}
+
+Knowing what elements on the page are shifting should make it much easier to
+identify and fix the root cause of the problem.
+
+Keep in mind that the elements reported here might not be the same elements that
+you see shifting when you're debugging your pages locally, which is why it's so
+important to capture this data in the first place. It's very hard to fix things
+that you don't realize are problems!
+
+#### Debug other metrics
+
+The above query shows the results for the CLS metric, but the exact same
+technique can be used to report on the debug targets for LCP and FID. Just
+replace the where clause with the relevant metric to debug:
+
+```sql/1/0
+WHERE metric_name = 'CLS'
+WHERE metric_name = 'LCP'
+```
+
+Again, you can refer to [Debug performance in the
+field](/debug-performance-in-the-field/) for instructions on how to collect and
+send debug information for each of the Core Web Vitals metrics.
+
+## Visualize
+
+It can be challenging to get insights just by looking at the query results
+alone. For example, the following query lists daily 75th percentile values for
+LCP in the dataset.
+
+```sql
+# Subquery all Web Vitals events from the last 28 days
+WITH web_vitals_events AS (
+  SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM (
+    SELECT *, IF (ROW_NUMBER() OVER (
+      PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+      ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
+    ) = 1, true, false) AS is_last_received_value
+    FROM `bigquery_project_id.analytics_XXXXX.events_*`
+    WHERE event_name in ('CLS', 'FID', 'LCP') AND
+      _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
+  ) WHERE is_last_received_value
+)
+# Main query logic
+SELECT
+  event_date,
+  metric_name,
+  APPROX_QUANTILES(ROUND(metric_value, 2), 100)[OFFSET(75)] AS p75
+FROM
+  (
+    SELECT
+      event_date,
+      metric_name,
+      ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value'), 3) AS metric_value
+    FROM web_vitals_events
+    WHERE
+      metric_name = 'LCP'
+  )
+GROUP BY
+  1, 2
+ORDER BY event_date
+```
+
+From these query results, it's difficult to identify trends or outliers just by
+looking at the data.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/uDQWTwIEelkSTu1ExyRB.png",
+       alt="Daily metric value query results",
+       width="400",
+       height="386" %}
+
+In such cases, visualizing the data can help you derive insights more quickly.
+
+### Visualize query results in Looker Studio
+
+BigQuery provides a quick way to visualize any query results through Data
+Studio. [Looker Studio](https://lookerstudio.google.com/) is a data visualization
+and dashboarding tool that is free to use. To visualize your query results,
+after running your query in the BigQuery UI, click the _Explore Data button_ and
+select _Explore with Looker Studio_.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/CFQ8JK7UlZsxUbWZXCO0.png",
+       alt="Explore with Looker Studio option in BigQuery",
+       width="800",
+       height="191" %}
+
+This will create a direct link from BigQuery into Looker Studio in the explore
+view. In this view, you can select the fields you want to visualize, choose
+chart types, setup filters, and create ad hoc charts for quick visual analysis.
+From the above query results, you can create this line chart to see the trend of
+LCP values over time:
+
+{% Img src="image/dTS0rVPXlWfkJ67VZYPxGwaAj7j1/mhTsDWbzpveguHadWhS0.PNG",
+       alt="Line chart of daily LCP values in Looker Studio",
+       width="800",
+       height="413" %}
+
+With this direct link between BigQuery and Looker Studio, you can create quick
+charts from any of your queries and do visual analysis. However, if you want to
+do additional analysis, you might want to look at several charts in an
+interactive dashboard to get a more holistic view or to be able to drill down
+into the data. Having a handy dashboard means you don't have to write queries
+and generate charts manually every time you want to analyze your metrics.
+
+You can create a dashboard in Looker Studio using the [native BigQuery
+connector](https://support.google.com/datastudio/answer/6370296). To do so,
+navigate to [datastudio.google.com](https://datastudio.google.com), create a new
+data source, select the BigQuery connector, and choose the dataset you want to
+work with:
+
+{% Img src="image/dTS0rVPXlWfkJ67VZYPxGwaAj7j1/NoLpS3R5OnX52QEu6rnN.PNG",
+       alt="Using the BigQuery native connector in Looker Studio",
+       width="800",
+       height="302" %}
+
+### Materialize Web Vitals data
+
+When creating dashboards of the Web Vitals event data as described above, it's
+not efficient to use the Google Analytics 4 export dataset directly. Due to the
+structure of the GA4 data and the preprocessing required for the Web Vitals
+metrics, parts of your query will end up running multiple times. This creates
+two problems: dashboard performance and BigQuery costs.
+
+You can use the [BigQuery sandbox
+mode](https://cloud.google.com/bigquery/docs/sandbox) for free. With BigQuery's
+[free usage tier](https://cloud.google.com/bigquery/pricing#free-tier), the
+first 1 TB of query data processed per month is free. For the analysis methods
+discussed in this post, unless you are using a significantly large dataset or
+are heavily querying the dataset regularly, you should be able to stay within
+this free limit every month. But if you have a high traffic website and want to
+regularly monitor different metrics using a fast interactive dashboard, we
+suggest preprocessing and materializing your web vitals data while making use of
+BigQuery efficiency features like partitioning, clustering, and caching.
+
+The following script will preprocess your BigQuery data (source table) and
+create a materialized table (target table). When using this query for your own
+dataset, you might also want to define a date range for the source table to
+lower the amount of data processed.
+
+```sql
+# Materialize Web Vitals metrics from GA4 event export data
+
+# Replace target table name
+CREATE OR REPLACE TABLE bigquery_project_id.ga4_demo_dev.web_vitals_summary
+  PARTITION BY DATE(event_timestamp)
+  CLUSTER BY metric_name
+AS
+SELECT
+  ga_session_id,
+  IF(
+    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
+    'New user',
+    'Returning user') AS user_type,
+  IF(
+    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
+    AS session_engagement,
+  evt.* EXCEPT (session_engaged, event_name),
+  event_name AS metric_name,
+  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
+FROM
+  (
+    SELECT
+      ga_session_id,
+      ARRAY_AGG(custom_event) AS events
+    FROM
+      (
+        SELECT
+          ga_session_id,
+          STRUCT(
+            country,
+            device_category,
+            device_os,
+            traffic_medium,
+            traffic_name,
+            traffic_source,
+            page_path,
+            debug_target,
+            event_timestamp,
+            event_name,
+            metric_id,
+            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
+            user_pseudo_id,
+            session_engaged,
+            session_revenue) AS custom_event
+        FROM
+          (
+            SELECT
+              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
+                AS ga_session_id,
+              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
+                AS metric_id,
+              ANY_VALUE(device.category) AS device_category,
+              ANY_VALUE(device.operating_system) AS device_os,
+              ANY_VALUE(traffic_source.medium) AS traffic_medium,
+              ANY_VALUE(traffic_source.name) AS traffic_name,
+              ANY_VALUE(traffic_source.source) AS traffic_source,
+              ANY_VALUE(
+                REGEXP_SUBSTR(
+                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
+                  r'^[^?]+')) AS page_path,
+              ANY_VALUE(
+                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
+                AS debug_target,
+              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
+              ANY_VALUE(geo.country) AS country,
+              ANY_VALUE(event_name) AS event_name,
+              SUM(ecommerce.purchase_revenue) AS session_revenue,
+              MAX(
+                (
+                  SELECT
+                    COALESCE(
+                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
+                  FROM UNNEST(event_params)
+                  WHERE key = 'session_engaged'
+                )) AS session_engaged,
+              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
+              MAX(
+                (
+                  SELECT COALESCE(value.double_value, value.int_value)
+                  FROM UNNEST(event_params)
+                  WHERE key = 'metric_value'
+                )) AS metric_value,
+            FROM
+              # Replace source table name
+              `bigquery_project_id.analytics_XXXXX.events_*`
+            WHERE
+              event_name IN ('LCP', 'FID', 'CLS', 'first_visit', 'purchase')
+            GROUP BY
+              1, 2
+          )
+      )
+    WHERE
+      ga_session_id IS NOT NULL
+    GROUP BY ga_session_id
+  )
+CROSS JOIN UNNEST(events) AS evt
+WHERE evt.event_name NOT IN ('first_visit', 'purchase');
+```
+
+This materialized dataset has several advantages:
+
+* The data structure is flattened and easier to query.
+* It retains only the Web Vitals events from the original GA4 dataset.
+* Session ID, user type (new vs returning), and session engagement information
+  is directly available in columns.
+* The table is
+  [partitioned](https://cloud.google.com/bigquery/docs/partitioned-tables) by
+  date and [clustered](https://cloud.google.com/bigquery/docs/clustered-tables)
+  by metric name. This usually reduces the amount of data processed for each
+  query.
+* Since you don't need to use wildcards to query this table, query results can
+  get cached for upto 24 hours. This reduces costs from repeating the same
+  query.
+* If you use the BigQuery BI engine, you can run [optimized SQL functions and
+  operators](https://cloud.google.com/bi-engine/docs/optimized-sql) on this
+  table.
+
+You can directly query this materialized table from within BigQuery UI or use it
+in Looker Studio using the BigQuery connector.
+
+### Using the Web Vitals Connector
+
+Since making a dashboard from scratch is time consuming, we developed a packaged
+solution that will create a template dashboard for you. First make sure that you
+have materialized your Web Vitals table using the above query. Then access the
+Web Vitals connector for Looker Studio using this link:
+[goo.gle/web-vitals-connector](https://goo.gle/web-vitals-connector)
+
+After providing a one time authorization, you should see the following
+configuration screen:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/SHtnSZLE4iRz5r1Pf3K8.png",
+       alt="Web Vitals Connector authorization screen",
+       width="800",
+       height="502" %}
+
+Provide the materialized BigQuery table ID (i.e. the target table) and your
+BigQuery billing project ID. After clicking connect, Looker Studio will create a
+new templated dashboard and associate your data with it.  You can edit, modify,
+and share the dashboard as you like. If you create a dashboard once, you don't
+have to visit the connector link again, unless you want to create multiple
+dashboards from different datasets.
+
+### Navigate the dashboard
+
+As you navigate the dashboard, you can see the daily trends of the Web Vitals
+metrics and some usage information for your website like users and sessions, in
+the _Summary_ tab.
+
+In the _User Analysis_ tab, you can select a metric and then get a breakdown of
+the metrics percentile as well as user count by different usage and business
+metrics.
+
+The _Page Path Analysis_ tab will help you to identify problem areas on your
+website. Here, You can pick a metric to see the overview. But you also see the
+scatter-map of all the page paths with the percentile value on y axis and record
+count on x axis. The scatter map can help to identify pages which have lower
+than expected metric values. Once you select the pages either via the scatter
+chart of the _Page path_ table, you can further drill down the problem area by
+viewing the _Debug Target_ table.
+
+The _Revenue Analysis_ tab is an example of how you can monitor your business
+and performance metrics in the same place. This section plots all sessions where
+the user made a purchase. You can compare the revenue earned vs user experience
+during a specific session .
+
+### Advanced usage
+
+As you become more familiar with the dataset, you can edit the dashboard and add
+your own charts for richer and targeted analysis. To make the dashboard more
+useful, you can take the following steps:
+
+* Setup scheduled query in BigQuery to get updated data. The materialization
+  query we ran above only takes a snapshot of your data at that moment. If you
+  want to keep your dashboard updated with new data, you can run a scheduled
+  query that will run every day and append your materialized table with the new
+  data.
+* Join first party data (e.g. CRM) for business insights. In the materialized
+  table, you can add `user_id` as a separate column. This will let you join your
+  first party data. If your first party data is not already in BigQuery, you can
+  either [load the data](https://cloud.google.com/bigquery/docs/loading-data) or
+  use a [federated data
+  source](https://cloud.google.com/bigquery/external-data-sources).
+* Report your site or app version as a parameter in the data you send to Google
+  Analytics and add it as a column in the materialized table. Then you can add
+  that version data as a dimension in your charts to make it easier to see
+  version changes affect performance.
+* If you are expecting significantly heavy usage of the dataset through direct
+  query or the dashboard, you can try using the paid version of [BigQuery BI
+  Engine](https://cloud.google.com/bi-engine/docs/introduction).
+
+## Summary
+
+This post covered the basics of how to use Google Analytics 4 and BigQuery to
+measure and debug performance with real-user data collected in the field. It
+also explained how to build automated reports and dashboards using Looker Studio
+and the [Web Vitals Connector](https://goo.gle/web-vitals-connector) to make
+visualizing the data as easy as possible.
+
+Some key takeaways from this post:
+
+* Measuring performance with real user data is critical for understanding,
+  debugging, and optimizing your site.
+* You can get deeper insights when your performance metrics and your business
+  metrics are in the same system. Google Analytics and BigQuery make this
+  possible.
+* BigQuery export of raw Google Analytics data gives you unlimited potential for
+  in-depth, custom analysis using a query language you likely already know.
+* Google has a number of APIs and visualization tools like Looker Studio that give
+  you the freedom to build your reports exactly the way you want them to be
+  built.
diff --git a/src/site/content/en/blog/vitals-measurement-getting-started/hero.png b/src/site/content/en/blog/vitals-measurement-getting-started/hero.png
deleted file mode 100644
index 0323ddcabb9..00000000000
Binary files a/src/site/content/en/blog/vitals-measurement-getting-started/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-measurement-getting-started/index.md b/src/site/content/en/blog/vitals-measurement-getting-started/index.md
index 7396414c585..673e5a60d75 100644
--- a/src/site/content/en/blog/vitals-measurement-getting-started/index.md
+++ b/src/site/content/en/blog/vitals-measurement-getting-started/index.md
@@ -1,11 +1,10 @@
 ---
-title: |
-  Getting started with measuring Web Vitals
+title: Getting started with measuring Web Vitals
 authors:
   - katiehempenius
 date: 2020-05-27
-updated: 2020-05-27
-hero: hero.png
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
 alt: Monthly graph overlayed with stopwatches labeled LCP, FID, and CLS.
 description: |
   Learn how to measure your site's Web Vitals in both real-world and lab environments.
@@ -20,13 +19,13 @@ Collecting data on your site's Web Vitals is the first step towards improving th
 
 ## Measuring Web Vitals using RUM data
 
-[Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) data, also known as field data, captures the performance experienced by a site's actual users. RUM data is what Google uses to determine whether a site meets the [recommended Core Web Vitals thresholds.](https://web.dev/vitals/)
+[Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) data, also known as field data, captures the performance experienced by a site's actual users. RUM data is what Google uses to determine whether a site meets the [recommended Core Web Vitals thresholds.](/vitals/)
 
 ### Getting started
 
-If you don't have a RUM setup, the following tools will quickly provide you with data about the real-world performance of your site. These tools are all based on the same underlying data set (the [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report)), but have slightly different use cases:
+If you don't have a RUM setup, the following tools will quickly provide you with data about the real-world performance of your site. These tools are all based on the same underlying data set (the [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)), but have slightly different use cases:
 
-* **PageSpeed Insights (PSI)**: [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) reports on the aggregate page-level and origin-level performance over the past 28 days. In addition, it provides suggestions on how to improve performance. If you're looking for a single action to take in order to get started with measuring and improving your site's Web Vitals, we recommend using PSI to audit your site. PSI is available on the [web](https://developers.google.com/speed/pagespeed/insights/) and as an [API](https://developers.google.com/speed/docs/insights/v5/get-started).
+* **PageSpeed Insights (PSI)**: [PageSpeed Insights](https://pagespeed.web.dev/) reports on the aggregate page-level and origin-level performance over the past 28 days. In addition, it provides suggestions on how to improve performance. If you're looking for a single action to take in order to get started with measuring and improving your site's Web Vitals, we recommend using PSI to audit your site. PSI is available on the [web](https://pagespeed.web.dev/) and as an [API](https://developers.google.com/speed/docs/insights/v5/get-started).
 * **Search Console**: [Search Console](https://search.google.com/search-console/welcome) reports performance data on a per-page basis. This makes it well-suited for identifying specific pages that need improvement. Unlike PageSpeed Insights, Search Console reporting includes historical performance data. Search Console can only be used with sites that you own and have verified ownership of.
 * **CrUX dashboard**: [CrUX dashboard](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard) is a pre-built dashboard that surfaces CrUX data for an origin of your choosing. It is built on top of Data Studio and the setup process takes about a minute. Compared to PageSpeed Insights and Search Console, CrUX dashboard reporting includes more dimensions - for example, data can be broken down by device and connection type.
 
@@ -48,11 +47,11 @@ If you don't have a RUM provider, you may be able to augment your existing analy
 
 ### The web-vitals JavaScript library
 
-If you're implementing your own RUM setup for Web Vitals, the easiest way to collect Web Vitals measurements is to use the [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript library. `web-vitals` is a small, modular library (~1KB) that provides a convenient API for collecting and reporting each of the [field-measurable](https://web.dev/user-centric-performance-metrics/#in-the-field) Web Vitals metrics.
+If you're implementing your own RUM setup for Web Vitals, the easiest way to collect Web Vitals measurements is to use the [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript library. `web-vitals` is a small, modular library (~1KB) that provides a convenient API for collecting and reporting each of the [field-measurable](/user-centric-performance-metrics/#in-the-field) Web Vitals metrics.
 
-The metrics that make up Web Vitals are not all directly exposed by the browser's native performance APIs - but rather built on top of them. For example, [Cumulative Layout Shift (CLS)](https://web.dev/cls/) is implemented using the [Layout Instability API](https://wicg.github.io/layout-instability/). By using `web-vitals`, you don't need to worry about implementing these metrics yourself; it also ensures that the data you collect matches the methodology and best practices for each metric.
+The metrics that make up Web Vitals are not all directly exposed by the browser's built-in performance APIs - but rather built on top of them. For example, [Cumulative Layout Shift (CLS)](/cls/) is implemented using the [Layout Instability API](https://wicg.github.io/layout-instability/). By using `web-vitals`, you don't need to worry about implementing these metrics yourself; it also ensures that the data you collect matches the methodology and best practices for each metric.
 
-For more information on implementing `web-vitals`, refer to the [documentation](https://github.com/GoogleChrome/web-vitals) and the [Best practices for measuring Web Vitals in the field](https://web.dev/vitals-field-measurement-best-practices/) guide.
+For more information on implementing `web-vitals`, refer to the [documentation](https://github.com/GoogleChrome/web-vitals) and the [Best practices for measuring Web Vitals in the field](/vitals-field-measurement-best-practices/) guide.
 
 ### Data aggregation
 
@@ -60,24 +59,24 @@ It is essential that you report the measurements collected by `web-vitals`. If t
 
 If you already have a favorite reporting tool, consider using that. If not, Google Analytics is free and can be used for this purpose.
 
-When considering which tool to use, it is helpful to think about who will need to have access to the data. Businesses typically achieve the biggest performance wins when the whole company, rather than a single department, is interested in improving performance. See [Fixing website speed cross-functionally](https://web.dev/fixing-website-speed-cross-functionally/) to learn how to get buy-in from different departments.
+When considering which tool to use, it is helpful to think about who will need to have access to the data. Businesses typically achieve the biggest performance wins when the whole company, rather than a single department, is interested in improving performance. See [Fixing website speed cross-functionally](/fixing-website-speed-cross-functionally/) to learn how to get buy-in from different departments.
 
 ### Data interpretation
 
-When analyzing performance data, it's important to pay attention to the tails of the distribution. RUM data often reveals that performance varies widely - some users have fast experiences, others have slow experiences. However, using the median to summarize data can easily mask this behavior. 
+When analyzing performance data, it's important to pay attention to the tails of the distribution. RUM data often reveals that performance varies widely - some users have fast experiences, others have slow experiences. However, using the median to summarize data can easily mask this behavior.
 
 With regards to Web Vitals, Google uses the percentage of "good" experiences, rather than statistics like medians or averages, to determine whether a site or page meets the recommended thresholds. Specifically, for a site or page to be considered as meeting the Core Web Vitals thresholds, 75% of page visits should meet the "good" threshold for each metric.
 
 ## Measuring Web Vitals using lab data
 
-[Lab data](https://web.dev/user-centric-performance-metrics/#in-the-lab), also known as synthetic data, is collected from a controlled environment, rather than actual users. Unlike RUM data, lab data can be collected from pre-production environments and therefore incorporated into developer workflows and continuous integration processes. Examples of tools that collect synthetic data are Lighthouse and WebPageTest. 
+[Lab data](/user-centric-performance-metrics/#in-the-lab), also known as synthetic data, is collected from a controlled environment, rather than actual users. Unlike RUM data, lab data can be collected from pre-production environments and therefore incorporated into developer workflows and continuous integration processes. Examples of tools that collect synthetic data are Lighthouse and WebPageTest.
 
 ### Considerations
 
 There will always be discrepancies between RUM data and lab data - particularly if the network conditions, device type, or location of the lab environment differs significantly from that of users. However, when it comes to collecting lab data on Web Vitals metrics in particular, there are a couple specific considerations that are important to note:
 
-* **Cumulative Layout Shift (CLS):** The [Cumulative Layout Shift](https://web.dev/cls/) measured in lab environments can be artificially lower than the CLS observed in RUM data. CLS is defined as the "sum total of all individual layout shift scores for every unexpected layout shift that occurs _during the entire lifespan of the page_." However, the lifespan of a page is typically very different depending on whether it is being loaded by a real user or a synthetic performance measurement tool. Many lab tools only load the page - they don't interact with it. As a result, they only capture layout shifts that occur during initial page load. By contrast, the CLS measured by RUM tools captures [unexpected layout shifts](https://web.dev/cls/#expected-vs.-unexpected-layout-shifts) that occur throughout the entire lifespan of the page.
-*  **First Input Delay (FID):** [First Input Delay](https://web.dev/fid/) can't be measured in lab environments because it requires user interactions with the page. As a result, [Total Blocking Time](https://web.dev/tbt/) (TBT) is the recommended lab proxy for FID. TBT measures the "total amount of time between First Contentful Paint and Time to Interactive during which the page is blocked from responding to user input". Although FID and TBT are calculated differently, they are both reflections of a blocked main thread during the bootstrap process. When the main thread is blocked, the browser is delayed in responding to user interactions. FID measures the delay, if any, that occurs the first time a user tries to interact with a page.
+* **Cumulative Layout Shift (CLS):** The [Cumulative Layout Shift](/cls/) measured in lab environments can be artificially lower than the CLS observed in RUM data. CLS is defined as the "sum total of all individual layout shift scores for every unexpected layout shift that occurs _during the entire lifespan of the page_." However, the lifespan of a page is typically very different depending on whether it is being loaded by a real user or a synthetic performance measurement tool. Many lab tools only load the page - they don't interact with it. As a result, they only capture layout shifts that occur during initial page load. By contrast, the CLS measured by RUM tools captures [unexpected layout shifts](/cls/#expected-vs-unexpected-layout-shifts) that occur throughout the entire lifespan of the page.
+*  **First Input Delay (FID):** [First Input Delay](/fid/) can't be measured in lab environments because it requires user interactions with the page. As a result, [Total Blocking Time](/tbt/) (TBT) is the recommended lab proxy for FID. TBT measures the "total amount of time between First Contentful Paint and Time to Interactive during which the page is blocked from responding to user input". Although FID and TBT are calculated differently, they are both reflections of a blocked main thread during the bootstrap process. When the main thread is blocked, the browser is delayed in responding to user interactions. FID measures the delay, if any, that occurs the first time a user tries to interact with a page.
 
 ### Tooling
 
diff --git a/src/site/content/en/blog/vitals-spa-faq/index.md b/src/site/content/en/blog/vitals-spa-faq/index.md
new file mode 100644
index 00000000000..45592da817d
--- /dev/null
+++ b/src/site/content/en/blog/vitals-spa-faq/index.md
@@ -0,0 +1,337 @@
+---
+title: "How SPA architectures affect Core Web Vitals"
+subhead: "Answers to common questions about SPAs, Core Web Vitals, and Google's plan to address current measurement limitations."
+description: "Answers to common questions about SPAs, Core Web Vitals, and Google's plan to address current measurement limitations."
+authors:
+  - philipwalton
+  - yoavweiss
+date: 2021-09-14
+updated: 2023-02-10
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/FITOGeO0PDyPrBveixB7.jpeg
+alt: "Exterior view of the Walt Disney Concert Hall"
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Since first introducing the [Web Vitals](/vitals/) initiative in May of 2020, we
+on the Chrome team have received a lot of great questions and feedback about the
+program.
+
+Perhaps the topic we've received the most questions about, which is also
+probably the hardest question to answer, is how to measure Core Web Vitals in a
+[single-page application](https://en.wikipedia.org/wiki/Single-page_application)
+(SPA), as well as how SPA architectures affect Core Web Vitals scores.
+
+These questions are hard to answer because the problem is quite nuanced, so in
+this post we're going to do our best to answer the most common questions,
+providing as much detail and context as we can.
+
+Before getting into specifics, though, it's important to state that Google does
+not have any preference as to what architecture or technology is used to build a
+site. We believe that SPAs and multi-page applications (MPAs) are both capable
+of delivering high quality experiences to users, and our intention with the Web
+Vitals initiative is to provide metrics that measure the experience independent
+of the technology. While this is not possible in every case today (due to
+limitations in the web platform), we are [actively working on closing those
+gaps](#what-is-google-doing-to-ensure-mpas-do-not-have-an-unfair-advantage-compared-to-spas).
+
+{% Aside %}
+Update (February 2023): The work is now available for sites to experiment with. See the [Experimenting with measuring soft navigations](https://developer.chrome.com/blog/soft-navigations-experiment/) post for more details.
+{% endAside %}
+
+
+## Frequently asked questions
+
+### Do Core Web Vitals metrics include SPA route transitions?
+
+No. Each of the Core Web Vitals metrics is measured relative to the current,
+top-level page navigation. If a page dynamically loads new
+content and updates the URL of the page in the address bar, it will have no
+effect on how the Core Web Vitals metrics are measured. Metric values are not
+reset, and the URL associated with each metric measurement is the URL the user
+navigated to that initiated the page load.
+
+### Can the Core Web Vitals metrics treat SPA route changes the same as traditional page loads?
+
+Unfortunately, no. Not yet anyway.
+
+There is no standardized way of building an SPA today, and even among the
+popular SPA and routing libraries, the user experience can be quite different
+from app to app:
+
+* Some SPAs update the URL only when loading new "full page" content, whereas
+  other sites update the URL for tiny content changes or even just UI state
+  changes.
+* Some SPAs update the URL using the History API, whereas others use hash
+  changes in order to support older browsers (and others do not update the URL
+  at all).
+* Some SPAs load content and then update the URL, whereas others update the URL
+  before loading content.
+* Some SPAs load content all at once, synchronously, in a single JavaScript
+  task, whereas others transition content in, asynchronously, across multiple
+  tasks (with no clear transition end event).
+* Some SPAs always load content from the network, whereas others preload all
+  content upfront so that route changes load instantly from memory.
+
+These differences make defining and identifying what constitutes an SPA route
+change, or even an SPA itself, very difficult to do _at scale_.
+
+In some cases an SPA route change is logically identical to an MPA page load,
+and in such cases it would be great if the existing Core Web Vitals metrics
+could be applied.
+
+However, without solid heuristics to reliably identify "real" route changes from
+all other URL changes—as well as clear signals marking the beginning and end of
+such transitions—reporting Core Web Vitals metrics in these cases would muddy
+the data and make it less useful or representative of the real user experience
+on the site.
+
+### Is it harder for SPAs to do well on Core Web Vitals than MPAs?
+
+There is nothing inherent in the SPA architecture that would prevent a page in
+an SPA from loading just as quickly—and scoring just as well on all of the Core
+Web Vitals metrics—as a similar page in an MPA.
+
+However, properly optimized MPAs do have some advantages in meeting the Core Web
+Vitals thresholds that SPAs currently do not. The reason is because with the MPA
+architecture, each "page" is loaded as a full-page navigation (rather than
+dynamically fetching content and inserting it into the existing page), which
+means users who visit an MPA are more likely to load more than one page from the
+site, which in turn means that a larger percentage of the distribution of all
+page loads for an MPA will involve some or all of the sub-resources being
+cached.
+
+Granted, for an MPA to perform better on the Core Web Vitals metrics than an SPA
+requires a few things to be true:
+
+* The MPA needs to have optimized sub-resource caching in order to ensure
+  same-origin page loads are indeed faster than cross-origin page loads at the
+  75th percentile.
+* Users who visit MPAs need to visit multiple pages in order for the site to
+  receive the caching benefits that result in faster page loads.
+
+Since Core Web Vitals assessments [consider the 75th
+percentile](/defining-core-web-vitals-thresholds/#choice-of-percentile) of page
+visits, having more, well-performing page visits in the dataset will increase
+the likelihood that the visit at the 75th percentile of the distribution will be
+within the recommended thresholds.
+
+Note that an important thing to consider when comparing Core Web Vitals scores
+is how the data is aggregated—that is, whether the dataset in the distribution
+includes all pages from your site or origin, or just page loads for a particular
+page URL.
+
+When aggregating the scores of all pages in an origin, individual fast pages can
+improve the 75th percentile for the origin as a whole. However, when aggregating
+by individual pages, the scores of one page will not affect the scores of the
+next. In other words, when aggregating the scores of an MPA by page, fast cache
+loads seen on the checkout page will _not_ improve the scores of slow initial
+loads experienced on the site's [landing
+page](https://en.wikipedia.org/wiki/Landing_page).
+
+You can check your site's score for different aggregation methods using
+[PageSpeed Insights](https://pagespeed.web.dev/) or
+the [Chrome User Experience Report
+API](https://developer.chrome.com/blog/chrome-ux-report-api/),
+which reports scores for both individual page URLs and the entire origin.
+
+Another way the SPA architecture can affect Core Web Vitals scores is for
+metrics that consider the full lifespan of a page. Since users visiting SPAs
+tend to stay on the same "page" for the entire session, metrics that accumulate
+over time can be harsher on SPAs than MPAs.
+
+In April 2021, we announced [changes to the CLS metric](/evolving-cls/) that
+partially addressed this problem. Previously CLS would accumulate over the
+entire page lifespan, whereas now it only accumulates over a specific window of
+time—essentially the worst burst of layout shifts on a given page.
+
+However, even with the new CLS definition, SPAs are still at a disadvantage
+because the CLS value doesn't "reset" after a route transitions like it does
+with full page loads in an MPA. This can also lead to confusion because layout
+shifts that occur after a route transition will be attributed to the URL of the
+page when it was loaded, not the URL in the address bar at the time of the shift
+([more details
+below](#if-core-web-vitals-scores-are-only-reported-for-an-spa's-landing-pages-how-can-i-debug-issues-that-occur-on-pages-after-a-route-transition)).
+
+### If SPA architectures improve the user experience, shouldn't that improvement be reflected in the metrics?
+
+Yes, it should. Though as mentioned previously, quantifying just how much the
+experience has improved is difficult to do at scale, given all the different
+ways SPAs are implemented on the web today.
+
+The truth is the web performance industry (Google included) has historically not
+invested nearly as much time and effort into developing [user-centric
+metrics](/user-centric-performance-metrics/) for the post-load performance of a
+page as it has for the page load itself. This isn't because post-load
+performance isn't important, it's because post-load UX and interactions are so
+much more varied and less well-defined—making it hard to design metrics for
+them.
+
+But even if we did have well defined post-load metrics to measure SPA
+performance, we wouldn't want to ignore the load experience just because the
+post load experience got better.
+
+One of the goals of the Web Vitals initiative is to promote and incentivize good
+user experiences across as many aspects of loading and using a web page as
+possible. We don't want to encourage scenarios where bad experiences are
+justified if you can have enough good experiences to make up for them. Users
+want pages to load fast _and_ transition to new content fast, and we've tried to
+design metrics that favor those types of experiences.
+
+So while it's true that an MPA version of a site may fare better on the Core Web
+Vitals metrics at the 75th percentile than an SPA version of the exact same
+site, the SPA version should still strive to meet the "good" threshold. If the
+SPA version doesn't meet the "good" threshold for most users, then the initial
+load experience is probably still not perceived as good—even if the subsequent,
+in-page navigation experience is excellent.
+
+In the future we plan to develop metrics that encourage great, post-load
+experiences, and we believe this is the best path to incentivize high-quality
+SPAs in a way that doesn't compromise the initial load experience. We have
+already delivered a new metric named [Interaction to Next Paint (INP)](/inp/) that measures interaction latency throughout the entire page lifecycle, and we're actively working on other
+post-load metrics as well, including metrics that measure SPA route transitions
+([see below](#design-new-apis-that-enable-better-spa-measurement)).
+
+### We switched our site from an MPA to an SPA and our scores regressed. Is that expected?
+
+It depends. There are a number of reasons why your scores could change after a
+major architecture migration, but a decrease in the number of warm cache loads
+could account for some of the change.
+
+A quick way to check would be to test both an MPA and SPA version of one of your
+landing pages with
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). If the
+Lighthouse score is lower on any of the Core Web Vitals metric for the SPA
+version, then it's likely that the load experience did get worse after the
+update.
+
+### Should I switch my site from an SPA to an MPA to score better on Core Web Vitals?
+
+Probably not. You should only switch from an SPA to an MPA if you are not happy
+with your SPA stack and you have reason to believe an MPA will provide a better
+user experience.
+
+Over time, as the Core Web Vitals metrics improve and cover more of the full
+browsing experience, teams with well-built SPAs that provide great UX should
+expect to see their Core Web Vitals scores reflect that.
+
+### If Core Web Vitals scores are only reported for an SPA's landing pages, how can I debug issues that occur on "pages" after a route transition?
+
+Google tools that report field data for the Core Web Vitals metric (like Search
+Console and PageSpeed Insights) get their data from the [Chrome User Experience
+Report](https://developer.chrome.com/docs/crux/)
+(CrUX). And CrUX aggregates data either by origin or by page URL (that is, the
+page URL at load time).
+
+For all the reasons already listed above, CrUX is not able to aggregate data by
+SPA route. However, as a site owner who is familiar with your own architecture,
+it is possible to measure this yourself, and many analytics tools allow you to
+signal when an SPA route change is occurring and they update your measurement
+data accordingly.
+
+When measuring Web Vitals metrics with an analytics tool, make sure you're
+measuring both the current route URL as well as the original page URL. This will
+allow you to both debug individual issues that occur throughout the page
+lifecycle as well as aggregate by original page URL in order to match how Google
+tools measure and report on the metrics.
+
+For more details and best practices on this topic, see: [Debug performance in the
+field](/debug-performance-in-the-field/).
+
+### What is Google doing to ensure MPAs do not have an unfair advantage compared to SPAs?
+
+As mentioned above, a properly-optimized MPA can, in some cases, report better
+Web Vitals scores at the 75th percentile due to the fact that it will likely
+have a higher percentage of cached page visits. Conversely, real improvements to
+the user experience in properly-optimized SPAs are not currently being captured
+by any of the Core Web Vitals metrics.
+
+At Google, we recognize that this creates incentives that do not fully align
+with the goals of the Web Vitals initiative, and we are actively looking at ways
+to fix this. Currently, we're exploring two potential solutions, one short term
+and one longer term:
+
+1. Assess cross-origin and same-origin page visits separately.
+2. Design new APIs that enable better SPA measurement.
+
+#### Assess cross-origin and same-origin page visits separately
+
+Today the Core Web Vitals metrics aggregate all page visits into a single
+bucket—they do not differentiate between new versus returning visits or landing
+pages versus checkout pages or any other aggregation type where cache state
+could have an effect on performance.
+
+One way to normalize the differences between SPA and MPA performance would be to
+apply different weighting to different types of visits, potentially even with
+completely different [threshold
+recommendations](/defining-core-web-vitals-thresholds/).
+
+While we definitely do want to reward effective cache implementations, we don't
+want fast intra-site navigations to be able to cover up for slow landing page
+loads. We also don't want to incentivize sites to break up long pages into a
+collection of shorter pages just for the sake of improving metric scores.
+
+By separately assessing cross-origin and same-origin page visits we can help
+ensure that both types of experiences are important without letting the relative
+popularity of one type on a given site skew the distribution of any particular
+metric.
+
+#### Design new APIs that enable better SPA measurement
+
+Another solution that is actively being worked on (in parallel to the above) is
+a new [App History API](/app-history-api/), which would help standardize current
+SPA patterns and make it easier to measure and understand SPA usage at scale.
+
+The App History API introduces a new
+[`navigate`](https://wicg.github.io/app-history/#navigate-event) event, which
+has two key features specific to SPA measurement:
+
+* A
+  [`userInitiated`](https://wicg.github.io/app-history/#ref-for-dom-apphistorynavigateevent-userinitiated%E2%91%A0)
+  flag, which will only be set to true if the navigation was initiated via a
+  link click, form submission, or the browser's back or forward UI.
+* A
+  [`transitionWhile()`](https://wicg.github.io/app-history/#ref-for-dom-apphistorynavigateevent-transitionwhile%E2%91%A0%E2%91%A8)
+  method, which takes a promise allowing the developer to signal when the work
+  they've initiated to perform the navigation is complete.
+
+The `userInitiated` flag can be used to determine a semantic starting point for
+an SPA route transition, indicating clear user intent. The `transitionWhile()`
+promise resolving can help the browser correlate paints with the specific route
+transition, such that it may be able to determine the largest contentful paint
+related to that transition.
+
+Building on top of the idea presented in the previous section, it might even be
+possible to aggregate SPA route transition time into the same bucket as
+same-origin page loads in an MPA. This is exciting because it would allow a site
+migrating from an MPA to an SPA to actually compare the performance before and
+after.
+
+{% Aside %}
+Update (February 2023): See the [Experimenting with measuring soft navigations](https://developer.chrome.com/blog/soft-navigations-experiment/) post for more information on a new "soft-navigations" API that is intended to allow better Core Web Vitals measurements for SPAs.
+{% endAside %}
+
+Of course, more research is needed before we'll know whether we can accurately
+make these determinations. If you have suggestions or feedback on these
+proposals, please email
+[web-vitals-feedback@googlegroups.com](mailto:web-vitals-feedback@googlegrouops.com).
+
+## Final thoughts
+
+Google is deeply committed to improving the Web Vitals metrics, and ensuring
+they measure and incentivize high-quality experiences that are important to
+users. That being said, we do acknowledge that measurement gaps exist today. The
+metrics do not currently cover every aspect of user experience, but we are
+actively working to close these gaps.
+
+Despite the current limitations, we believe the areas the existing metrics do
+capture are critical to the health and success of the web, and to the extent
+that sites (regardless of architecture) do not meet the recommended thresholds,
+we believe there is room for improvement.
+
+I hope this post has helped shed some light on this complex and nuanced subject.
+As always, if you have feedback on the current or future Web Vitals metrics,
+please email
+[web-vitals-feedback@googlegroups.com](mailto:web-vitals-feedback@googlegrouops.com).
diff --git a/src/site/content/en/blog/vitals-tools-2020/index.md b/src/site/content/en/blog/vitals-tools-2020/index.md
new file mode 100644
index 00000000000..94958b3be69
--- /dev/null
+++ b/src/site/content/en/blog/vitals-tools-2020/index.md
@@ -0,0 +1,185 @@
+---
+title: "Tools to measure Core Web Vitals"
+subhead: Your favorite developer tools can now measure the Core Web Vitals.
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+updated: 2022-07-18
+description: |
+  Read about the newly announced Core Web Vitals measurement support across popular web developer tools like Lighthouse, PageSpeed Insights, Chrome UX Report, and many others.
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Chrome User Experience logo, PageSpeed Insights logo, Lighthouse logo, Search Console logo, Chrome DevTools logo, Web Vitals extension logo.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - web-vitals
+  - performance
+---
+
+The recently announced [Web Vitals](/vitals/) initiative provides unified guidance about quality signals that are essential for all sites to deliver a great user experience on the web. We're happy to announce that **all of Google's popular tools for web developers now support measurement of Core Web Vitals**, helping you more easily diagnose and fix user experience issues. This includes [Lighthouse](https://github.com/GoogleChrome/lighthouse), [PageSpeed Insights](https://pagespeed.web.dev/), [Chrome DevTools](https://developer.chrome.com/docs/devtools/), [Search Console](https://search.google.com/search-console/about), [web.dev's measure tool](/measure/), the [Web Vitals Chrome extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and a new (!) [Chrome UX Report](https://developer.chrome.com/docs/crux/) API.
+
+With Google Search now including Core Web Vitals as the foundation for evaluating [page experience](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html), it's important that these metrics are as available and actionable as possible.
+
+<figure>
+  {% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Summary of Chrome and Search Tools that support the Core Web Vitals metrics", width="800", height="509" %}
+</figure>
+
+{% Aside 'key-term' %}
+**Lab tools** provide insight into how a _potential user_ will likely experience your website and offer reproducible results for debugging. **Field** tools provide insight into how your _real users_ are experiencing your website; this type of measurement is often called Real User Monitoring (RUM). Each [lab or field tool](/how-to-measure-speed/#lab-data-vs-field-data) offers distinct value for optimizing your user experience.
+{% endAside %}
+
+To begin your journey optimizing user-experience with Core Web Vitals, try the following workflow:
+
+* Use Search Console's new Core Web Vitals report to identify groups of pages that require attention (based on the field data).
+* Once you've identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. PageSpeed Insights (PSI) is available via Search Console or you can enter a URL on PSI directly.
+* Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get actionable guidance on exactly what to fix. The Web Vitals Chrome extension can give you a real-time view of metrics on desktop.
+* Need a custom dashboard of Core Web Vitals? Use the updated CrUX Dashboard or new Chrome UX Report API for field data or PageSpeed Insights API for lab data.
+* Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and codelabs for optimization, using PSI data.
+* Finally, use Lighthouse CI on pull requests to ensure there are no regressions in Core Web Vitals before you deploy a change to production.
+
+With that introduction, let's dive into the specific updates for each tool!
+
+### Lighthouse
+
+Lighthouse is an automated website auditing tool that helps developers diagnose issues and identify opportunities to improve the user experience of their sites. It measures several dimensions of user experience quality in a lab environment, including performance and accessibility. The latest version of Lighthouse ([6.0](/lighthouse-whats-new-6.0/), released mid-May 2020) includes additional audits, new metrics, and a newly composed performance score.
+
+<figure>
+  {% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="Lighthouse 6.0 showing the latest Core Web Vitals metrics", width="800", height="527" %}
+</figure>
+
+Lighthouse 6.0 introduces three new metrics to the report. Two of these new metrics—[Largest Contentful Paint](/lcp/) (LCP) and [Cumulative Layout Shift](/cls/) (CLS)—are lab implementations of Core Web Vitals and provide important diagnostic information for optimizing user experience. Given their importance for assessing user experience, the new metrics are not only measured and included in the report, they are also factored in calculating the performance score.
+
+The third new metric included in Lighthouse—[Total Blocking Time](/tbt/) (TBT)—correlates well with the field metric [First Input Delay](/fid/) (FID), another Core Web Vitals metric. Following the recommendations provided in the Lighthouse report and optimizing against your scores sets you up to provide the best possible experience to your users.
+
+All of the products that Lighthouse powers are updated to reflect the latest version, including [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) which enables you to easily measure your Core Web Vitals on pull requests before they're merged and deployed.
+
+<figure>
+  {% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="Lighthouse CI displaying a diff view with Largest Contentful Paint", width="800", height="498" %}
+</figure>
+
+To learn more about the latest updates to Lighthouse, check out our
+[What's New in Lighthouse 6.0](/lighthouse-whats-new-6.0/) blog post.
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/) (PSI) reports on the lab and field performance of a page on both mobile and desktop devices. The tool provides an overview of how real-world users experience the page (powered by the Chrome UX Report) and a set of actionable recommendations on how a site owner can improve page experience (provided by Lighthouse).
+
+PageSpeed Insights and the [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) have also been upgraded to use Lighthouse 6.0 under the hood and now support measuring Core Web Vitals in both the lab and field sections of the report! Core Web Vitals are annotated with a blue ribbon as shown below.
+
+<figure>
+  {% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="PageSpeed Insights with Core Web Vitals data displayed for field and lab", width="800", height="873" %}
+</figure>
+
+While [Search Console](https://search.google.com/search-console/) provides site owners with a great overview of groups of pages that need attention, PSI helps identify per-page opportunities to improve page experience. In PSI, you are able to clearly see whether or not your page meets the thresholds for a good experience across all Core Web Vitals at the top of the report, indicated by **passes the Core Web Vitals assessment** or **does not pass the Core Web Vitals assessment**.
+
+### CrUX
+
+The [Chrome UX Report](https://developer.chrome.com/docs/crux/) (CrUX) is a public dataset of real user experience data on millions of websites. It measures field versions of all the Core Web Vitals. Unlike lab data, CrUX data comes from [opted-in users](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) in the field. Using this data, developers are able to understand the distribution of real-world user experiences on their own or even competitors' websites. Even if you don't have RUM on your site, CrUX can provide a quick and easy way to assess your Core Web Vitals. The [CrUX dataset on BigQuery](https://developer.chrome.com/docs/crux/bigquery/) includes fine-grained performance data for all Core Web Vitals and is available in monthly snapshots at the origin-level.
+
+The only way to truly know how your site performs for your users is to actually measure its performance in the field as those users are loading and interacting with it. This type of measurement is commonly referred to as Real User Monitoring—or RUM for short. Even if you don't have RUM on your site, CrUX can provide a quick and easy way to assess your Core Web Vitals.
+
+**Introducing the CrUX API**
+
+Today we're happy to announce the [CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/), a fast and free way to easily integrate your development workflows with origin and URL-level quality measurement for the following field metrics:
+
+* Largest Contentful Paint
+* Cumulative Layout Shift
+* First Input Delay
+* First Contentful Paint
+
+Developers can query for an origin or URL and segment results by different form factors. The API updates daily and summarizes the previous 28 days worth of data (unlike the BigQuery dataset, which is aggregated monthly). The API also has the same relaxed public API quotas we place on our other API, the PageSpeed Insights API (25,000 requests per day).
+
+Below is a demo using the [CrUX API](https://developer.chrome.com/docs/crux/api/) to visualize the Core Web Vitals metrics with distributions for **good**, **needs improvement**, and **poor**:
+
+<figure>
+  {% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Chrome User Experience Report API demo showing Core Web Vitals metrics", width="800", height="523" %}
+</figure>
+
+In future releases, we plan to expand the API to enable access to additional CrUX dataset dimensions and metrics.
+
+**Revamped CrUX Dashboard**
+
+The newly redesigned [CrUX Dashboard](http://g.co/chromeuxdash) allows you to easily track an origin's performance over time, and now you can use it to monitor the distributions of all of the Core Web Vitals metrics. To get started with the dashboard, check out our [tutorial](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) on web.dev.
+
+<figure>
+  {% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="Chrome UX Report dashboard displaying the Core Web Vitals metrics in a new landing page", width="800", height="497" %}
+</figure>
+
+We've introduced a new Core Web Vitals landing page to make it even easier to see how your site is performing at a glance. We welcome your feedback on all CrUX tooling; to share your thoughts and questions reach us at the [@ChromeUXReport](https://twitter.com/chromeuxreport) Twitter account or [Google Group](https://groups.google.com/a/chromium.org/g/chrome-ux-report).
+
+
+### Chrome DevTools Performance panel
+
+**Debug Layout Shift events in the Experience section**
+
+The Chrome DevTools **Performance** panel has a new **[Experience section](https://developers.google.com/web/updates/2020/05/devtools#cls)** that can help you detect unexpected layout shifts. This is helpful for finding and fixing visual instability issues on your page that contribute to Cumulative Layout Shift.
+
+<figure>
+  {% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="Cumulative Layout Shift displayed with red records in the Performance panel", width="800", height="517" %}
+</figure>
+
+Select a Layout Shift to view its details in the **Summary** tab. To visualize where the shift itself occurred, hover over the **Moved from** and **Moved to** fields.
+
+**Debug interaction readiness with Total Blocking Time in the footer**
+
+The Total Blocking Time (TBT) metric can be measured in lab tools and is an excellent proxy for First Input Delay. TBT measures the total amount of time between [First Contentful Paint (FCP)](/fcp/) and [Time to Interactive (TTI)](/tti/) where the main thread was blocked for long enough to prevent input responsiveness. Performance optimizations that improve TBT in the lab should improve FID in the field.
+
+<figure>
+  {% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="Total Blocking Time displayed in the footer of the DevTools performance panel", width="800", height="517" %}
+</figure>
+
+TBT is now shown in the footer of the Chrome DevTools **Performance** panel when you measure page performance:
+
+{% Instruction 'devtools-performance', 'ol' %}
+1.  Click **Record**.
+1.  Manually reload the page.
+1.  Wait for the page to load and then stop recording.
+
+For more information, see [What's New In DevTools (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls).
+
+
+### Search Console
+
+The new [Core Web Vitals report](https://support.google.com/webmasters/answer/9205520) in Search Console helps you identify groups of pages across your site that require attention, based on real-world (field) data from CrUX. URL performance is grouped by status, metric type and URL group (groups of similar web pages).
+
+<figure>
+  {% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Search Console's new Core Web Vitals Report", width="800", height="1000" %}
+</figure>
+
+The report is based on the three Core Web Vitals metrics: LCP, FID, and CLS.  If a URL does not have a minimum amount of reporting data for these metrics, it's omitted from the report. Try the new report to get a holistic view of performance for your origin.
+
+Once you identify a type of page that has Core Web Vitals related issues, you can use PageSpeed Insights to learn about specific optimization suggestions for representative pages.
+
+#### web.dev
+
+[web.dev/measure](/measure/) allows you to measure the performance of your page over time, providing a prioritized list of guides and codelabs on how to improve. It's measurement is powered by PageSpeed Insights. The measure tool now also supports the Core Web Vitals metrics, as shown below:
+
+<figure>
+  {% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="Measure Core Web Vitals metrics over time and get prioritized guidance with the web.dev measure tool", width="800", height="459" %}
+</figure>
+
+### Web Vitals extension
+
+The Web Vitals extension measures the three Core Web Vitals metrics in real-time for (desktop) Google Chrome. This is helpful for catching issues early on during your development workflow and as a diagnostic tool to assess performance of Core Web Vitals as you browse the web.
+
+The extension is now available to install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)! We hope you find it useful. We welcome any contributions to improve it as well as feedback on the project's [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) repository.
+
+<figure>
+  {% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Core Web Vitals displayed in real-time with the Web Vitals Chrome Extension", width="800", height="459" %}
+</figure>
+
+#### Quick highlights
+
+That's a wrap! What can you do next:
+
+* Use **Lighthouse** in DevTools to optimize your user experience and ensure you are setting yourself up for success with Core Web Vitals in the field.
+* Use **PageSpeed Insights** to compare your lab and field Core Web Vitals performance.
+* Try out the new **Chrome User Experience Report API** to easily access how well your origin and URL have performed against Core Web Vitals over the last 28 days.
+* Use the **Experience** section and footer in DevTools **Performance** panel to dive deep and debug against specific Core Web Vitals.
+* Use **Search Console's Core Web Vitals report** for a summary of how your origins are performing in the field.
+* Use the **Web Vitals Extension** to track a page's performance against Core Web Vitals in real-time.
+
+We will cover more about our Core Web Vitals tooling at [web.dev Live](/live/) in June. Sign up to get updates on the event!
+
+~ by Elizabeth and Addy, WebPerf Janitors
diff --git a/src/site/content/en/blog/vitals-tools/Vitals-Tools1.png b/src/site/content/en/blog/vitals-tools/Vitals-Tools1.png
deleted file mode 100644
index eeb11c796b6..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/Vitals-Tools1.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/Vitals-Tools10.png b/src/site/content/en/blog/vitals-tools/Vitals-Tools10.png
deleted file mode 100644
index f6836811230..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/Vitals-Tools10.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/Vitals-Tools5.png b/src/site/content/en/blog/vitals-tools/Vitals-Tools5.png
deleted file mode 100644
index 15bda14c635..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/Vitals-Tools5.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/Vitals-Tools7.png b/src/site/content/en/blog/vitals-tools/Vitals-Tools7.png
deleted file mode 100644
index 87edcb14cc6..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/Vitals-Tools7.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/Vitals-Tools8.png b/src/site/content/en/blog/vitals-tools/Vitals-Tools8.png
deleted file mode 100644
index 194a8e84b4d..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/Vitals-Tools8.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/crux-dashboard.png b/src/site/content/en/blog/vitals-tools/crux-dashboard.png
deleted file mode 100644
index 56468171358..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/crux-dashboard.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/hero.png b/src/site/content/en/blog/vitals-tools/hero.png
deleted file mode 100644
index f1f6c9cb5d9..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/index.md b/src/site/content/en/blog/vitals-tools/index.md
index b7e96ddf527..32b55bf58c8 100644
--- a/src/site/content/en/blog/vitals-tools/index.md
+++ b/src/site/content/en/blog/vitals-tools/index.md
@@ -1,184 +1,353 @@
 ---
-title: "Tools to measure Core Web Vitals"
-subhead: Your favorite developer tools can now measure the Core Web Vitals.
+layout: post
+title: Core Web Vitals workflows with Google tools
+subhead: Combine Google tools to audit, improve and monitor your website effectively.
 authors:
+  - tunetheweb
+  - antoinebisch
+  - gmimani
   - addyosmani
   - egsweeny
-date: 2020-05-28
-description: |
-  Read about the newly announced Core Web Vitals measurement support across popular web developer tools like Lighthouse, PageSpeed Insights, Chrome UX Report, and many others.
-hero: hero.png
-thumbnail: thumbnail.png
-alt: Chrome User Experience logo, PageSpeed Insights logo, Lighthouse logo, Search Console logo, Chrome DevTools logo, Web Vitals extension logo.
+date: 2021-08-09
+updated: 2023-09-29
+hero: image/PTlEGTxNW2XkfI8mA3pIGDFxdYY2/1qMzdR1XGj3HKzuW4PFG.jpg
+thumbnail: image/PTlEGTxNW2XkfI8mA3pIGDFxdYY2/ApVe49OiB4KIJwcC7njy.jpg
+alt: An image of icons of the various Google tools described in this article.
+description: >
+  With the growing importance of Core Web Vitals, site owners and developers increasingly focus on performance and key user experiences. Google provides many tools to help evaluate, optimize, and monitor pages, but users are often confused by the different sources of data and how to leverage them effectively. This article proposes a workflow combining several tools and clarifies where and how they make sense along the development process.
 tags:
-  - blog # blog is a required tag for the article to show up in the blog.
+  - blog
   - web-vitals
   - performance
 ---
 
-The recently announced [Web Vitals](/vitals/) initiative provides unified guidance about quality signals that are essential for all sites to deliver a great user experience on the web. We're happy to announce that **all of Google's popular tools for web developers now support measurement of Core Web Vitals**, helping you more easily diagnose and fix user experience issues. This includes [Lighthouse](https://github.com/GoogleChrome/lighthouse), [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/), [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools), [Search Console](https://search.google.com/search-console/about), [web.dev's measure tool](/measure/), the [Web Vitals Chrome extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and a new (!) [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report) API. 
+[Core Web Vitals](/vitals/) are a set of metrics that assess the user experience on criteria such as load performance, responsiveness to user input, and layout stability.
 
-With Google Search now including Core Web Vitals as the foundation for evaluating [page experience](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html), it's important that these metrics are as available and actionable as possible. 
+A workflow for improving Core Web Vitals for your website will be explored in this guide, but where that workflow begins depends on whether you're collecting your own field data. Where it ends may depend on which of Google's tools you'll find useful in diagnosing and fixing user experience problems.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./Vitals-Tools1.png" alt="Summary of Chrome and Search Tools that support the Core Web Vitals metrics">
-</figure>
+## Core Web Vitals are best measured in the field
+
+Core Web Vitals are specifically designed to measure how users experience your website—they are [user centric metrics](/user-centric-performance-metrics/). Lab-based tools such as Lighthouse are diagnostic tools to highlight potential performance problems and best practices. Lab-based tools are run under certain, predefined conditions and may not reflect the real-life Core Web Vitals measurements your users experience.
 
 {% Aside 'key-term' %}
-**Lab tools** provide insight into how a _potential user_ will likely experience your website and offer reproducible results for debugging. **Field** tools provide insight into how your _real users_ are experiencing your website; this type of measurement is often called Real User Monitoring (RUM). Each [lab or field tool](/how-to-measure-speed/#lab-data-vs-field-data) offers distinct value for optimizing your user experience.
+[**Lab data**](/lab-and-field-data-differences/#lab-data) describes how _hypothetical_ users _may_ experience your website. [**Field data**](/lab-and-field-data-differences/#field-data) describes how _real_ users _actually_ experienced your website. Field data is also known as Real User Monitoring (RUM), and is typically collected by monitoring real user experiences using JavaScript on the pages they load, and reporting various metrics to an analytics solution.
+{% endAside %}
+
+For example, Lighthouse is a lab-based tool that runs tests with simulated throttling in a simulated desktop or mobile environment. While such simulations of slower network and device conditions are helpful when trying to diagnose performance problems, [they're just a single slice](/lab-and-field-data-differences/) of the large variety in network conditions and device capabilities, and so may not reflect what users on your sites are experiening.
+
+Lab-based tools like Lighthouse also typically do a "cold load" of a webpage as a totally new visitor. This is often the slowest load, but in real life, visitors may have some assets cached if they have visited before, or when they are browsing around the site. New visitors, and tools, also may experience the site differently with cookie banners or other content present to them.
+
+In short, while lab-based tools can give an indication of potential performance problems and help you debug and iterate, they may not represent how many of your visitors actually experience your website. Use field data for measuring real-world performance, and lab-based tools like Lighthouse for diagnostics of how to improve it. See also the [When to use Lighthouse](#when-to-use-lighthouse) section.
+
+Google measures Core Web Vitals through the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/). This is a public dataset collected from real Chrome users. It is the backbone of many Google and third-party tools which report a site's Core Web Vitals.
+
+
+CrUX has its limitations, though. It can often tell you _when_ there is a problem, but often has insufficient data to tell you _why_.
+
+### Collect your own field data if possible
+
+The best dataset for improving website performance in the field is the one _you_ build. That starts with collecting field data from your website's visitors. How you do this depends on the size of your organization, and whether you want to pay for [a third-party solution](https://en.wikipedia.org/wiki/Real_user_monitoring#RUM_software) or create your own.
+
+Paid solutions will almost certainly measure Core Web Vitals (and other performance metrics) and usually provide a variety of tools to dig into the resulting data. In large organizations with significant resources, this may be the preferred method.
+
+However, you may not be part of a large organization—or even one with the means to afford a third-party solution. In these cases, Google's [`web-vitals` library](https://github.com/GoogleChrome/web-vitals) will help you gather _all_ Web Vitals. However, you'll be responsible for how that data is reported, stored, and analyzed.
+
+{% Aside %}
+If you're building your own metrics collection and reporting system, [this guide of best practices](/vitals-field-measurement-best-practices/) is worth a read to avoid common pitfalls.
+{% endAside %}
+
+If you're already using Google Analytics, but you haven't started collecting your own field data, there may be an opportunity for you to use the `web-vitals` library to [send Web Vitals collected in the field to Google Analytics](/debug-performance-in-the-field/#usage-with-the-web-vitals-javascript-library) and use the [BigQuery exports of GA4](/vitals-ga4/) to report on the data.
+
+## Understanding Google's tools
+
+Regardless of whether you're collecting your own field data, there are several Google tools that may be useful in analyzing Core Web Vitals. Before establishing a workflow, a high-level overview of each tool can help you to understand which tools may—or may not—be best for you.
+
+{% Aside %}
+As you continue, understand that it's not necessary for you to use _all_ of the tools in this guide—only those that you believe will help you in improving your website's Core Web Vitals.
 {% endAside %}
 
-To begin your journey optimizing user-experience with Core Web Vitals, try the following workflow: 
+### Chrome User Experience Report (CrUX)
+
+As mentioned previously, CrUX is a public data set of field data gathered from [a segment of real Google Chrome users](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) from millions of websites. It includes Core Web Vital metrics and other metrics for websites with sufficient traffic.
+
+CrUX is available as a monthly [BigQuery dataset](https://developer.chrome.com/docs/crux/bigquery/) at the origin level, or as a [daily API](https://developer.chrome.com/docs/crux/api/) at the URL or origin-level, provided a URL or origin has enough samples in the CrUX dataset. The BigQuery data is also viewable in an easy to use [CrUX Dashboard](https://developer.chrome.com/docs/crux/dashboard/) allowing sites to review historical trends for their site.
+
+#### When to use CrUX
+
+Even if you gather your own field data, CrUX is still useful. Though CrUX represents a subset of Chrome users, it's helpful to compare your website's field data to see how it aligns with its CrUX data. There are advantages and disadvantages to each, which [can result in differences](/crux-and-rum-differences/). If you currently don't gather _any_ field data for your website, CrUX is especially valuable to provide a high-level overview—provided your website is represented in its dataset.
+
+You can use CrUX directly, or via another tool (including those mentioned below). Using the CrUX dataset directly, either via BigQuery or the API, is useful to surface data that is not currently shown in other tools—for example country-level data is often not available on other tools, or to view the [additional metrics in CrUX](https://developer.chrome.com/docs/crux/methodology/#metrics) which again are often not surfaced in other tooling.
 
-* Use Search Console's new Core Web Vitals report to identify groups of pages that require attention (based on the field data).
-* Once you've identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page. PageSpeed Insights (PSI) is available via Search Console or you can enter a URL on PSI directly.
-* Ready to optimize your site locally in the lab? Use Lighthouse and Chrome DevTools to measure Core Web Vitals and get actionable guidance on exactly what to fix. The Web Vitals Chrome extension can give you a real-time view of metrics on desktop.
-* Need a custom dashboard of Core Web Vitals? Use the updated CrUX Dashboard or new Chrome UX Report API for field data or PageSpeed Insights API for lab data.
-* Looking for guidance? web.dev/measure can measure your page and show you a prioritized set of guides and codelabs for optimization, using PSI data.
-* Finally, use Lighthouse CI on pull requests to ensure there are no regressions in Core Web Vitals before you deploy a change to production.
+#### When _not_ to use CrUX
 
-With that introduction, let's dive into the specific updates for each tool! 
+CrUX only represents Chrome users, and even then, [only a subset of Chrome users](https://developer.chrome.com/docs/crux/methodology/#user-eligibility). A full RUM solution can include more experiences across Chrome and other browsers where they support the Web Vital metrics.
+
+Websites that don't receive enough traffic are not represented in the CrUX dataset. If this is the case for you, you'll need to gather your own field data to understand how your website performs in the field, as CrUX won't be an option. Alternatively, you will need to depend on lab data, but with the limitations that it may not be representative above.
+
+Since the data CrUX provides is a rolling average over the previous 28 days, it's not an ideal tool during development, as it will take a fair amount of time for improvements to be reflected in the CrUX dataset.
+
+Finally, as a public dataset, CrUX is limited to how much information it can make available, and how this data can be queried. Capturing your own RUM data allows you to gather more details (for example, [the LCP element](/debug-performance-in-the-field/#lcp)), and slice and dice the data more to identify problems. Do logged in users experience better or worse Core Web Vitals than logged out users? Do users with a slow LCP have a particular LCP element? Which interactions are causing high FID and INP values?
+
+### PageSpeed Insights (PSI)
+
+[PSI](https://pagespeed.web.dev/) is a tool that reports field data from CrUX _and_ lab from Lighthouse for a given page. See those individual sections for more details.
+
+#### When to use PSI
+
+PSI is great for assessing CrUX performance at the page level or origin-level, for both mobile and desktop users. It's a good choice for an initial overview of Core Web Vitals for a page or site. It also allows you to easily view Core Web Vitals data for other sites like competitors.
+
+PSI also provides Lighthouse data, which gives useful recommendations to improve your Core Web Vitals—if the metrics align. Where these do not align, Lighthouse recommendations may be less relevant.
+
+Since Lighthouse is run from the server, it can form a more consistent baseline than running Lighthouse from DevTools.
+
+#### When _not_ to use PSI
+
+PSI is only available for public URLs. It cannot be used on development sites that are not publicly accessible.
+
+CrUX data is only available when sites meet certain [eligibility criteria](https://developer.chrome.com/docs/crux/methodology/#eligibility), including site popularity thresholds. PSI is less useful when CrUX data is not available for a page or origin as it can only show the Lighthouse lab data in these cases.
+
+Similarly, if you only have origin-level CrUX data rather than the specific URL being tested, then this also limits its usefulness of correlating the origin-level field data to the page-level lab diagnostics. Having the origin-level field data is still very useful information to have as a summary of the site's performance and the Lighthouse audits may help, but extra caution should be used in this case.
+
+Finally, where page-level data is available in CrUX, but differs from the Lighthouse lab data, recommendations from Lighthouse may be of limited value. This can happen particularly for [post-load CLS issues](/optimize-cls/#identifying-post-load-cls-issues), and for interactivity Core Web Vitals (FID and INP) where lab-based audits are less useful.
+
+### Search Console
+
+[Search Console](https://search.google.com/search-console/about) measures your site's search traffic and performance, [including Core Web Vitals](https://support.google.com/webmasters/answer/9205520). It is only available to site owners who have [confirmed their ownership of the site](https://support.google.com/webmasters/answer/34592).
+
+A valuable feature of Search Console is that it groups similar pages (for example, pages that use the same template) into a single group assessment. Search Console also includes a Core Web Vitals report based on field data from CrUX.
+
+#### When to use Search Console
+
+Search Console is well-suited for both developers and those in non-developer roles to assess both search and page performance in ways other Google tools don't. Its presentation of CrUX data and grouping of pages by similarity offers novel insight into how performance improvements impact entire categories of pages.
+
+#### When _not_ to use Search Console
+
+Search Console may not be a fit for projects that use different third-party tools which group pages by similarity, or if a website isn't represented in the CrUX dataset.
+
+Page grouping can also be somewhat confusing when the example pages in a group have different characteristics than the rest of the group—for example, if the group fails particular Core Web Vitals overall, but the example pages all seem to pass the same Core Web Vitals. This can happen when a group contains a long tail or seldomly visited pages that may be slower to load, as they're less likely to be cached. When there are sufficient volumes of these pages in the long tail, they can influence the group's overall pass rate.
 
 ### Lighthouse
 
-Lighthouse is an automated website auditing tool that helps developers diagnose issues and identify opportunities to improve the user experience of their sites. It measures several dimensions of user experience quality in a lab environment, including performance and accessibility. The latest version of Lighthouse ([6.0](/lighthouse-whats-new-6.0/), released mid-May 2020) includes additional audits, new metrics, and a newly composed performance score.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is a lab tool that provides specific opportunities for improving page performance. [Lighthouse user flows](/lighthouse-user-flows/) also allow developers to script interaction flows for performance testing beyond page load.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse.png" alt="Lighthouse 6.0 showing the latest Core Web Vitals metrics">
-</figure>
+{% Aside %}
+Because Lighthouse is a lab tool, and [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/) are field metrics, it reports [Total Blocking Time](/tbt/) instead.
+{% endAside %}
 
-Lighthouse 6.0 introduces three new metrics to the report. Two of these new metrics—[Largest Contentful Paint](/lcp/) (LCP) and [Cumulative Layout Shift](/cls/) (CLS)—are lab implementations of Core Web Vitals and provide important diagnostic information for optimizing user experience. Given their importance for assessing user experience, the new metrics are not only measured and included in the report, they are also factored in calculating the performance score.
+[Lighthouse-CI](https://github.com/GoogleChrome/lighthouse-ci) is a related tool that runs Lighthouse during project builds and deploys to assist with performance regression testing. It presents a Lighthouse report along with pull requests, and tracks performance metrics over time.
 
-The third new metric included in Lighthouse—[Total Blocking Time](/tbt/) (TBT)—correlates well with the field metric [First Input Delay](/fid/) (FID), another Core Web Vitals metric. Following the recommendations provided in the Lighthouse report and optimizing against your scores sets you up to provide the best possible experience to your users. 
+#### When to use Lighthouse
 
-All of the products that Lighthouse powers are updated to reflect the latest version, including [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) which enables you to easily measure your Core Web Vitals on pull requests before they're merged and deployed.
+Lighthouse is excellent for finding performance improvement opportunities during development in both local and staging environments. Lighthouse CI is similarly useful in the build and deploy phases to staging and production environments, where performance regression testing is needed to preserve good user experiences.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lhci.png" alt="Lighthouse CI displaying a diff view with Largest Contentful Paint">
-</figure>
+{% Aside 'caution' %}
+Don't rely solely on Lighthouse CI during production deployments, as you may miss performance regressions that you'd otherwise catch in local and staging environments during development with Lighthouse.
+{% endAside %}
 
-To learn more about the latest updates to Lighthouse, check out our 
-[What's New in Lighthouse 6.0](/lighthouse-whats-new-6.0/) blog post. 
+#### When _not_ to use Lighthouse
 
-### PageSpeed Insights
+Lighthouse (or Lighthouse CI) **is _not_ a substitute for field data**. Lighthouse is primarily a diagnostic tool listing potential issues and best practices from a predefined page load. The recommendations it surfaces may not always match the performance experienced by your users.
 
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) (PSI) reports on the lab and field performance of a page on both mobile and desktop devices. The tool provides an overview of how real-world users experience the page (powered by the Chrome UX Report) and a set of actionable recommendations on how a site owner can improve page experience (provided by Lighthouse). 
+{% Aside 'important' %}
+**Always concentrate on field Core Web Vitals over Lighthouse metrics and scores**. In particular, the Performance Score of Lighthouse is a broad measure of that lab test and [often does not correlate](https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/) with field Core Web Vitals.
+{% endAside %}
 
-PageSpeed Insights and the [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) have also been upgraded to use Lighthouse 6.0 under the hood and now support measuring Core Web Vitals in both the lab and field sections of the report! Core Web Vitals are annotated with a blue ribbon as shown below.
+While Lighthouse can be used to diagnose production sites through tools like PageSpeed Insights, Lighthouse would ideally be used in development and continuous integration environments to address performance issues before they reach production.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./pagespeed.png" alt="PageSpeed Insights with Core Web Vitals data displayed for field and lab">
-</figure>
+### Web Vitals extension
+
+The [Web Vitals Chrome extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) is a diagnostic tool that surfaces Core Web Vitals metrics as you browse the web. It also includes CrUX data for the current page if it is represented in the CrUX dataset, and provides [debugging information](/debug-cwvs-with-web-vitals-extension/) to help you identify Core Web Vitals performance problems.
+
+#### When to use the Web Vitals extension
+
+The Web Vitals extension can be used by anyone in any role to assess a page's Core Web Vitals at all points of the page lifecycle. It is useful as a "live" view of performance as you interact with the page to attempt to uncover performance issues—particularly for post-load issues you might see with the CLS and INP metrics.
+
+#### When _not_ to use the Web Vitals extension
+
+The Web Vitals extension isn't a holistic assessment of page performance. In addition, the metrics it reports are highly dependent the environment in which it runs, and developers often have higher powered machines or access to faster networks.
+
+### The Performance panel in Chrome DevTools
 
-While [Search Console](https://search.google.com/search-console/) provides site owners with a great overview of groups of pages that need attention, PSI helps identify per-page opportunities to improve page experience. In PSI, you are able to clearly see whether or not your page meets the thresholds for a good experience across all Core Web Vitals at the top of the report, indicated by **passes the Core Web Vitals assessment** or **does not pass the Core Web Vitals assessment**. 
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/) is a collection of in-browser development tools, including the [Performance panel](https://developer.chrome.com/docs/devtools/#performance). The Performance panel is a lab tool that profiles all page activity during page load or a recorded time period. It offers deep insight into everything it observes across dimensions such as network, rendering, painting, and scripting activity, as well as a page's Core Web Vitals.
 
-### CrUX
+#### When to use the Performance panel
 
-The [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/) (CrUX) is a public dataset of real user experience data on millions of websites. It measures field versions of all the Core Web Vitals. Unlike lab data, CrUX data comes from [opted-in users](https://developers.google.com/web/tools/chrome-user-experience-report/#methodology) in the field. Using this data, developers are able to understand the distribution of real-world user experiences on their own or even competitors' websites. Even if you don't have RUM on your site, CrUX can provide a quick and easy way to assess your Core Web Vitals. The [CrUX dataset on BigQuery](https://developers.google.com/web/tools/chrome-user-experience-report/bigquery/getting-started) includes fine-grained performance data for all Core Web Vitals and is available in monthly snapshots at the origin-level. 
+The Performance panel should be used by developers during development to gain deep insight into page performance. This is particularly useful to debug responsiveness issues affecting FID or INP. Once a poorly responding interaction is identified and repeatable, the Performance panel can provide a wealth of data as to what is going on in the browser to help understand the issue, from main thread blocking, to JavaScript call stacks, to rendering work.
 
-The only way to truly know how your site performs for your users is to actually measure its performance in the field as those users are loading and interacting with it. This type of measurement is commonly referred to as Real User Monitoring—or RUM for short. Even if you don't have RUM on your site, CrUX can provide a quick and easy way to assess your Core Web Vitals. 
+#### When _not_ to use the Performance panel
 
-**Introducing the CrUX API**
+The Performance panel is a developer tool that provides lab data only. It's not a substitute for field data. It contains a lot of debugging information, but because of that, it may not be easy to use for novice developers or those in non-developer roles.
 
-Today we're happy to announce the [CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/), a fast and free way to easily integrate your development workflows with origin and URL-level quality measurement for the following field metrics:
+## A three step workflow for ensuring your website's Core Web Vitals stay healthy
 
-* Largest Contentful Paint
-* Cumulative Layout Shift
-* First Input Delay
-* First Contentful Paint 
+When working to improve the user experience, it's best to think of the process as a continuous cycle. For improving Core Web Vitals and other performance metrics, one approach could be:
 
-Developers can query for an origin or URL and segment results by different form factors. The API updates daily and summarizes the previous 28 days worth of data (unlike the BigQuery dataset, which is aggregated monthly). The API also has the same relaxed public API quotas we place on our other API, the PageSpeed Insights API (25,000 requests per day). 
+1. Evaluate website health and identify pain points.
+2. Debug and optimize.
+3. Monitor with continuous integration tools to catch and prevent regressions.
 
-Below is a [demo](https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started) using the CrUX API to visualize the Core Web Vitals metrics with distributions for **good**, **needs improvement**, and **poor**:
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/9k3o679FUq63WT1kbxHe.png", alt="A diagram of a three step process, rendered as a continuous cycle. The first step reads 'Evaluate website health and identify paint points', the second 'Debug and optimize', and the third 'Monitor and continuous development'.", width="800", height="465" %}
+</figure>
+
+### Step 1: Evaluate website health and identify opportunities for improvement
+
+It is best to start with field data to evaluate website health.
+
+1. Use [PageSpeed Insights](https://pagespeed.web.dev/) to view overall Core Web Vitals experience metrics on the origin, and specific information on an individual URL.
+2. [Search Console](https://search.google.com/search-console/about) can be useful to identify pages which need improvement where its page grouping feature works well for your site.
+3. If you have RUM data, then that is often the best option to be able to identify particular pages or traffic segments with issues.
+
+Whether you analyze field data you collect yourself or CrUX data, this first step is vital. If you're not gathering field data, CrUX data may be enough to guide you—again, provided your website is represented in the dataset.
+
+#### Analyze site performance with PageSpeed Insights
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./Vitals-Tools5.png" alt="Chrome User Experience Report API demo showing Core Web Vitals metrics">
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/YEe3RQwgIWgQTHFV5sc0.png", alt="A screenshot of how PageSpeed Insights portrays CrUX data for a URL's Core Web Vitals. Each of the Core Web Vitals is displayed separately, while grouping each Core Web Vital in the 'Good', 'Needs Improvement', and 'Poor' thresholds for the last 28 days.", width="800", height="477" %}
 </figure>
 
-In future releases, we plan to expand the API to enable access to additional CrUX dataset dimensions and metrics. 
+PageSpeed Insights displays the CrUX data covering the last 28 days of user experience data at the 75th percentile. This means that if 75% of user experiences meet the [threshold set for a given metric](/defining-core-web-vitals-thresholds/), then the experience is considered "good".
 
-**Revamped CrUX Dashboard**
+If you have a specific page in mind to look at the performance of, then use that. For an overall view of a site when you first start optimizing, you may wish to start with the home page, as it is typically one of the most popular pages on many sites.
 
-The newly redesigned [CrUX Dashboard](http://g.co/chromeuxdash) allows you to easily track an origin's performance over time, and now you can use it to monitor the distributions of all of the Core Web Vitals metrics. To get started with the dashboard, check out our [tutorial](/chrome-ux-report-data-studio-dashboard/) on web.dev. 
+Concentrate on the **what your real users are experiencing** section of PSI initially. You will see up to four views of the data: mobile and desktop for the URL entered and the whole origin. Compare these and see how they differ. Mobile is typically less performant than desktop since it is a more resource-constrained device operating under potentially less stable network conditions. If the URL and origin data are significantly different, then try to understand why: home pages are often the first pages visited (that is, a landing page) so can be slower than the origin users take the full brunt of an unprimed browser cache. Subsequent pages will likely load faster, as any shared assets will be cached, bringing down the aggregate origin-level data.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./crux-dashboard.png" alt="Chrome UX Report dashboard displaying the Core Web Vitals metrics in a new landing page">
+PSI also shows all three Core Web Vitals (LCP, CLS, and FID) and the pending INP metric, plus the diagnostic TTFB and FCP metrics. Are any of the Core Web Vitals failing, and by how much? This will indicate where to concentrate your efforts.
+
+Understand the relationships between these numbers—particularly for LCP. If LCP is slow, as it is in this example, then look at TTFB and FCP which are both milestones to that metric. In this example we have a 1.8 second TTFB, which is going to make it very tough to meet the 2.5 second recommended threshold for good LCP. This suggests either a slow backend (server issues or a lack of CDN), slower networks, or redirects delaying the first HTML bytes. Look at the [Optimize TTFB guide](/optimize-ttfb/) for more information. FCP takes another second on top of that, which again may be indicative of slower networks. LCP is not long after FCP in this example suggesting the LCP resource is well optimized once the page itself loads.
+
+For CLS, look at the CrUX CLS and the Lighthouse CLS scores to see if this is a load CLS issue (which Lighthouse will catch and advise on), or a post-load CLS issue that Lighthouse won't catch. More for information [see the Optimize CLS guide](/optimize-cls/#understanding-where-your-shifts-are-coming-from).
+
+For responsiveness, look at the FID and INP scores. Look at the TBT audits in Lighthouse to see if a lot of JavaScript processing is happening during the initial page load, which is likely to impact INP. INP can be a tricky metric to improve, so consult the [Optimize INP guide](/optimize-inp/) for more information.
+
+#### Identify poorly performing pages in Search Console
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/DWdv878oyTdEWQViRh06.png", alt="A screenshot of a Core Web Vitals report in Search Console. The report is broken down into Desktop and Mobile categories, with line graphs detailing the distribution of pages with Core Web Vitals in the 'Good', 'Needs Improvement', and 'Poor' categories over time.", width="800", height="639" %}
 </figure>
 
-We've introduced a new Core Web Vitals landing page to make it even easier to see how your site is performing at a glance. We welcome your feedback on all CrUX tooling; to share your thoughts and questions reach us at the [@ChromeUXReport](https://twitter.com/chromeuxreport) Twitter account or [Google Group](https://groups.google.com/a/chromium.org/g/chrome-ux-report).
+While PSI is useful when you have a specific URL you want to test or the site as a whole, Search Console can help target your efforts to particular types of pages. This is particularly useful if many pages share common themes or technologies and Search Console can successfully identify these.
+
+The [Core Web Vitals report in Search Console](https://support.google.com/webmasters/answer/9205520) shows the big picture of your website's performance, but you can still drill down into specific pages that need attention. With Search Console, you can also:
 
+- Identify individual page groups that need improvement, and those that currently provide a good user experience.
+- Get granular data on performance by URL grouped by status, metric, and groups of similar web pages (such as product detail pages on an e-commerce website).
+- Get detailed reports that bucket URLs in each user experience quality category for both mobile and desktop.
 
-### Chrome DevTools Performance panel
+{% Aside 'caution' %}
+The data in Search Console is different from what's shown in the PageSpeed Insights origin view or the CrUX dashboard. This is because Search Console organizes information by URL, whereas PageSpeed Insights origin view and CrUX Dashboard organizes data by origin. If you have few poorly performing URLs, but those URLs receive a large portion of overall traffic, Search Console will only show a few poorly performing URLs while CrUX dashboard will show a high percentage of poor user experiences.
+{% endAside %}
+
+Once you have some specific pages to look at, you can use PSI as explained previously to gather further understanding of the issues for those pages.
+
+### Step 2: Debug and optimize
+
+In step 1, you should have identified pages which require performance improvements, and also which of the Core Web Vitals metrics you want to improve. You can use the Google tooling to get further information to understand the root cause to identify the issue.
+
+1. Run a [Lighthouse](#Lighthouse) audit to get page-level guidance
+2. Use the [Web Vitals extension](#web-vitals-extension) to analyze Core Web Vitals in real time.
+3. Use the [Performance panel](#the-performance-panel-in-chrome-devtools) in Chrome DevTools to debug performance issues and test code changes.
+
+For more detailed guidance, see these guides:
 
-**Debug Layout Shift events in the Experience section**
+- [Optimizing LCP](/optimize-lcp/)
+- [Optimizing CLS](/optimize-cls/)
+- [Optimizing FID](/optimize-fid/)
+- [Optimizing INP](/optimize-inp/)
 
-The Chrome DevTools **Performance** panel has a new **[Experience section](https://developers.google.com/web/updates/2020/05/devtools#cls)** that can help you detect unexpected layout shifts. This is helpful for finding and fixing visual instability issues on your page that contribute to Cumulative Layout Shift. 
+#### Uncover opportunities with Lighthouse
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./Vitals-Tools7.png" alt="Cumulative Layout Shift displayed with red records in the Performance panel">
+PageSpeed Insights runs Lighthouse for you, but for local development it is also possible to run Lighthouse from Chrome DevTools, which is useful to validate fixes locally.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/k6HffrY6tUbreyzi2mVk.png", alt="A screenshot of a Lighthouse report within Chrome DevTools. The report breaks down scores across five categories, with the report focused on the 'Performance' category, with results at the bottom of the report window.", width="800", height="526" %}
 </figure>
 
-Select a Layout Shift to view its details in the **Summary** tab. To visualize where the shift itself occurred, hover over the **Moved from** and **Moved to** fields.
+A key point is to validate that the Lighthouse audit replicates the issues you are trying to solve (for example, slow LCP, or CLS issues). Out of the box, Lighthouse only assesses the user experience during page load. Since it's a lab tool, it also excludes FID and INP in favor of TBT.
+
+{% Aside 'caution' %}
+By default, Lighthouse simulates a mid-tier mobile device on a throttled slow 4G connection. This may find issues that wouldn't ordinarily appear on high-speed devices and fast internet connections. This simulated throttling may not be representative of the variety of user experiences among your website's user base at the 75th percentile. However, these metrics are an indicator of where performance problems exist, and may translate into better performance overall in the field if the problems Lighthouse finds are addressed.
+{% endAside %}
 
-**Debug interaction readiness with Total Blocking Time in the footer**
+When the Lighthouse metrics suggest a similar problem as the one you are trying to solve, the wealth of information in its audits can help identify issues and suggest solutions.
 
-The Total Blocking Time (TBT) metric can be measured in lab tools and is an excellent proxy for First Input Delay. TBT measures the total amount of time between [First Contentful Paint (FCP)](/fcp/) and [Time to Interactive (TTI)](/tti/) where the main thread was blocked for long enough to prevent input responsiveness. Performance optimizations that improve TBT in the lab should improve FID in the field. 
+You can filter the audits to just the Core Web Vitals you are interested in to focus on fixes for issues related to a specific metric:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./Vitals-Tools8.png" alt="Total Blocking Time displayed in the footer of the DevTools performance panel">
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/wae09J8FYUe0PvFBkH4b.png", alt="Lighthouse filter options for key metrics", width="700", height="100" %}
 </figure>
 
-TBT is now shown in the footer of the Chrome DevTools **Performance** panel when you measure page performance:
+For FID and INP, use the TBT audits to identify issues that can potentially affect those metrics, but be aware that without interactions, Lighthouse is limited in how much it can diagnose.
 
-{% Instruction 'devtools-performance', 'ol' %}
-1.  Click **Record**.
-1.  Manually reload the page.
-1.  Wait for the page to load and then stop recording. 
+#### Analyze in real time with the Web Vitals extension
 
-For more information, see [What's New In DevTools (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls). 
+The Web Vitals Chrome extension shows Core Web Vitals in real time during page load _and_ while browsing a page. Because of this, it can capture FID and INP as well as layout shifts that occur after load. The debugging options show more detailed information on each metric:
 
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png", alt="Web Vitals Extension console logging showing INP target, event type, and breakdown", width="800", height="448" %}
+</figure>
 
-### Search Console
+It's best to think of the Web Vitals extension as a spot-checking tool to find performance issues, not a comprehensive debugging tool—that's a job for the Performance panel in Chrome DevTools.
+
+#### Drill down with the Performance panel
 
-The new [Core Web Vitals report](https://support.google.com/webmasters/answer/9205520) in Search Console helps you identify groups of pages across your site that require attention, based on real-world (field) data from CrUX. URL performance is grouped by status, metric type and URL group (groups of similar web pages). 
+The Performance panel in Chrome DevTools profiles all page behavior during a recorded period of time.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./search-console.png" alt="Search Console's new Core Web Vitals Report">
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/JmVcoLckgeukluuJONDe.png", alt="ALT_TEXT_HERE", width="800", height="466" %}
 </figure>
 
-The report is based on the three Core Web Vitals metrics: LCP, FID, and CLS.  If a URL does not have a minimum amount of reporting data for these metrics, it's omitted from the report. Try the new report to get a holistic view of performance for your origin. 
+Key timings—such as LCP, for example—are shown in the Timings track. Click on these for more details.
 
-Once you identify a type of page that has Core Web Vitals related issues, you can use PageSpeed Insights to learn about specific optimization suggestions for representative pages.
+The **Layout Shifts** track highlights layout shifts and clicking on these provides more details about the elements that shifted for debugging CLS.
 
-#### web.dev
+Long Tasks (that can lead to FID and INP issues) are also highlighted with red triangles.
 
-[web.dev/measure](/measure/) allows you to measure the performance of your page over time, providing a prioritized list of guides and codelabs on how to improve. It's measurement is powered by PageSpeed Insights. The measure tool now also supports the Core Web Vitals metrics, as shown below:
+These features—as well as information in other parts of the [Performance panel](https://developer.chrome.com/docs/devtools/#performance)—can help you determine whether fixes are having any effect on a page's Core Web Vitals.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./web-dev-measure.png" alt="Measure Core Web Vitals metrics over time and get prioritized guidance with the web.dev measure tool">
+#### Debug Core Web Vitals in the field
+
+Lab tools can't always identify the cause of all Core Web Vitals issues affecting your users. This is one reason why it's so important to collect your own field data, as it takes factors into account that lab data cannot.
+
+See [debug performance in the field](/debug-performance-in-the-field/) for more information.
+
+### Step 3: Monitor for changes
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/LqEnonUKd8j3QGK3Ax7w.png", alt="A collection of icons for Google tools. From left to right, the icons represent 'CrUX on BigQuery', 'CrUX API', 'PSI API', 'web-vitals.js', with 'Lighthouse CI' at the far right.", width="800", height="185" %}
 </figure>
 
-### Web Vitals extension
+Once you have fixed any issues, you want to ensure they have the desired effect and that new issues do not disrupt your Core Web Vitals. This requires monitoring for performance issues as part of developer workflow to prevent performance issues being released to production, and monitoring the field data regularly to ensure this is the case.
+
+{% Aside %}
+[Research by Google](https://youtu.be/YJGCZCaIZkQ?t=112) has shown that most performance improvements tend to regress within six months. A website needs continuous monitoring in both the lab _and_ the field to identify worsening trends in Core Web Vitals and other performance metrics to avoid regressions.
+{% endAside %}
+
+#### Monitor for performance requisitions in Continuous Integration (CI) environments
+
+[Lighthouse-CI](https://github.com/GoogleChrome/lighthouse-ci) allows you to automatically run Lighthouse audits on code commits to prevent performance regressions entering code. This can check performance timings (which [are subject to variability](https://developers.google.com/web/tools/lighthouse/variability)), or for just [the performance audits](https://developer.chrome.com/docs/lighthouse/performance/), as a linting tool to prevent bad practices in the code.
 
-The Web Vitals extension measures the three Core Web Vitals metrics in real-time for (desktop) Google Chrome. This is helpful for catching issues early on during your development workflow and as a diagnostic tool to assess performance of Core Web Vitals as you browse the web. 
+#### View website health trends with field data
 
-The extension is now available to install from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)! We hope you find it useful. We welcome any contributions to improve it as well as feedback on the project's [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) repository.
+While you should aim to catch and fix all performance issues before they make it to production, monitoring your field data via RUM is essential to find any that slip through. There are many commercial RUM products available that can help with this. The [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript library can automate a website's field data collection, and optionally use this data to power custom dashboards and alerting systems.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./Vitals-Tools10.png" alt="Core Web Vitals displayed in real-time with the Web Vitals Chrome Extension">
+For sites without a RUM solution, you can [use the CrUX Dashboard](https://developer.chrome.com/docs/crux/dashboard/) as a basic trend analysis of field data. It reports the following for sites in CrUX:
+
+- **Site overview**, which segments Core Web Vitals into desktop and mobile device types.
+- **Historical trend by metric type**, which is a distribution of metrics over time for each available monthly release of CrUX report data.
+- **User demographics**, which illustrates the distribution of page views across an entire origin for users in each demographic including device and [effective connection](https://developer.mozilla.org/docs/Glossary/Effective_connection_type) types.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/oF2PQELFtdICPN10aZge.png", alt="A screenshot of the CrUX dashboard. The dashboard breaks down LCP, FID, and CLS into desktop and mobile categories, with each category showing the distribution of values that lie within 'Good', 'Needs Improvement' and 'Poor' thresholds for the previous month.", width="800", height="837" %}
 </figure>
 
-#### Quick highlights
+The CrUX Dashboard is based on the [CrUX BigQuery dataset](https://developer.chrome.com/blog/chrome-ux-report-bigquery/), which is updated once a month. This can be a good reminder to regularly check in on your Core Web Vitals.
 
-That's a wrap! What can you do next:
+{% Aside 'important' %}
+Even if your website is represented in CrUX, you should still collect your own field data, since CrUX doesn't include _all_ users of Chrome or even other browsers—but it's certainly a good place to start in the absence of any field data.
+{% endAside %}
 
-* Use **Lighthouse** in DevTools to optimize your user experience and ensure you are setting yourself up for success with Core Web Vitals in the field. 
-* Use **PageSpeed Insights** to compare your lab and field Core Web Vitals performance.
-* Try out the new **Chrome User Experience Report API** to easily access how well your origin and URL have performed against Core Web Vitals over the last 28 days.
-* Use the **Experience** section and footer in DevTools **Performance** panel to dive deep and debug against specific Core Web Vitals.
-* Use **Search Console's Core Web Vitals report** for a summary of how your origins are performing in the field.
-* Use the **Web Vitals Extension** to track a page's performance against Core Web Vitals in real-time.
+## Conclusion
 
-We will cover more about our Core Web Vitals tooling at [web.dev Live](/live/) in June. Sign up to get updates on the event!
+Ensuring fast and delightful user experiences requires a performance-first mindset and adoption of a workflow to ensure progress. With the right tools and processes to audit, debug, and monitor, building great user experiences and staying within the thresholds defined for good Core Web Vitals is within your reach.
 
-~ by Elizabeth and Addy, WebPerf Janitors
diff --git a/src/site/content/en/blog/vitals-tools/lhci.png b/src/site/content/en/blog/vitals-tools/lhci.png
deleted file mode 100644
index 4166cc7a7c5..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/lhci.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/lighthouse.png b/src/site/content/en/blog/vitals-tools/lighthouse.png
deleted file mode 100644
index ae469b2ca55..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/lighthouse.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/pagespeed.png b/src/site/content/en/blog/vitals-tools/pagespeed.png
deleted file mode 100644
index 4bd9bbb457b..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/pagespeed.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/search-console.png b/src/site/content/en/blog/vitals-tools/search-console.png
deleted file mode 100644
index 8d4c6b98a71..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/search-console.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/thumbnail.png b/src/site/content/en/blog/vitals-tools/thumbnail.png
deleted file mode 100644
index 70f4e1c0878..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/thumbnail.png and /dev/null differ
diff --git a/src/site/content/en/blog/vitals-tools/web-dev-measure.png b/src/site/content/en/blog/vitals-tools/web-dev-measure.png
deleted file mode 100644
index 943b1a568e6..00000000000
Binary files a/src/site/content/en/blog/vitals-tools/web-dev-measure.png and /dev/null differ
diff --git a/src/site/content/en/blog/vodafone/index.md b/src/site/content/en/blog/vodafone/index.md
new file mode 100644
index 00000000000..897e7e35d8c
--- /dev/null
+++ b/src/site/content/en/blog/vodafone/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: "Vodafone: A 31% improvement in LCP increased sales by 8%"
+subhead: >
+  By running an A/B test specifically focused on optimizing Web Vitals,
+  Vodafone found that a 31% improvement in LCP led to 8% more sales,
+  a 15% improvement in their lead to visit rate, and a 11% improvement
+  in their cart to visit rate.
+description: >
+  By running an A/B test specifically focused on optimizing Web Vitals,
+  Vodafone found that a 31% improvement in LCP led to 8% more sales,
+  a 15% improvement in their lead to visit rate, and a 11% improvement
+  in their cart to visit rate.
+date: 2021-03-17
+hero: image/BrQidfK9jaQyIHwdw91aVpkPiib2/EEaOcO1E9B4ZI4hHgJAb.png
+# thumbnail: image/admin/i2nyfqyVr4XWqilOxPrY.png
+alt: An illustration of an A/B test.
+tags:
+  - blog
+  - case-study
+  - web-vitals
+  - performance
+  - scale-on-web
+---
+
+[Vodafone](https://www.vodafone.com/) is a leading telecommunications company in
+Europe and Africa operating fixed and mobile networks in 21 countries and
+partnering with mobile networks in 48 more. By running an A/B test on a landing
+page (where version A was optimized for Web Vitals and had a 31% better LCP
+score in the
+[field](https://www.searchenginejournal.com/google-explains-why-field-data-is-more-reliable-than-lab-data/372404/)
+than version B), Vodafone determined that optimizing for Web Vitals generated 8%
+more sales.
+
+<div class="stats">
+ <div class="stats__item">
+   <p class="stats__figure">31<sub>%</sub></p>
+   <p>A 31% improvement in LCP led to…</p>
+ </div>
+ <div class="stats__item">
+   <p class="stats__figure"><sub>+</sub>8<sub>%</sub></p>
+   <p>Increase in total sales</p>
+ </div>
+ <div class="stats__item">
+   <p class="stats__figure"><sub>+</sub>15<sub>%</sub></p>
+   <p>Uplift in the lead to visit rate</p>
+ </div>
+ <div class="stats__item">
+   <p class="stats__figure"><sub>+</sub>11<sub>%</sub></p>
+   <p>Uplift in the cart to visit rate</p>
+ </div>
+</div>
+
+## Highlighting the opportunity {: #opportunity }
+
+Vodafone knew that faster websites generally correlate to improved business metrics and were
+interested in optimizing their Web Vitals scores as a potential strategy for increasing sales, but
+they needed to determine exactly what kind of ROI they would get.
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/3OKAembHLoX5QAdP1vya.png", alt="Two screenshots of the Vodafone website.", width="800", height="751" %}
+  <figcaption>
+    Some example screenshots of Vodafone's website. Note that these are <b>not</b> version
+    A and version B from the A/B test. Both versions were visually and functionally identical.
+  </figcaption>
+</figure>
+
+## The approach they used {: #approach }
+
+### A/B test
+
+The traffic for the A/B test came from different paid media channels, including display,
+iOS/Android, search, and social. 50% of the traffic was sent to the optimized landing page (version
+A), and 50% was sent to the baseline page (version B). Version A and version B both got around 100K
+clicks and 34K visits per day. As mentioned before, the only difference between version A and
+version B was that version A was optimized for Web Vitals. There were no functional or visual
+differences between the two versions other than that. Vodafone used the
+[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) API to
+measure LCP on real user sessions and sent the
+[field data](https://www.searchenginejournal.com/google-explains-why-field-data-is-more-reliable-than-lab-data/372404/)
+to their analytics provider.
+
+{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/bDOhlrGwsiuknDTBjUJg.png", alt="A diagram of the A/B test setup.", width="800", height="398" %}
+
+### Optimizations
+
+Vodafone made the following changes on the optimized page (version A):
+
+-  **Moved the rendering logic for a widget from client-side to server-side**, which resulted in
+   less [render-blocking JavaScript](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+-  **Server-side rendered** critical HTML
+-  **Optimized images**, including [resizing](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/) the hero
+   image, [optimizing SVG images](https://jakearchibald.github.io/svgomg/), using media queries to
+   [avoid loading images](/browser-level-image-lazy-loading/) that weren't yet
+   visible in the viewport, and [optimizing PNG images](/squoosh-v2/)
+
+## Overall business results {: #results }
+
+<div class="switcher">
+  <div>
+    <p>
+      After optimizing version A for Web Vitals and comparing it to the
+      unoptimized version B, Vodafone found that version A led to:
+    </p>
+    <ul>
+      <li>An 8% increase in sales</li>
+      <li>
+        A 15% improvement in the lead to visit rate (the number of users who became
+        a lead versus the total number of visitors)
+      </li>
+      <li>
+        An 11% improvement in the cart to visit rate (the number of users
+        who visited their cart versus the total number of visitors)
+      </li>
+    </ul>
+  </div>
+  <figure>
+    {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/ADfHPOlQ19oaiuRrzmWZ.png", alt="An illustration that reiterates the business results.", width="800", height="1175" %}
+  </figure>
+</div>
+
+The following table shows the values for `DOMContentLoaded` ("DCL") and LCP that
+Vodafone observed on version A ("Optimized Page") and version B ("Default
+Page"). Note that DCL actually *increased* 15%. The absolute values related to
+business metrics have been redacted.
+
+{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/cvDjZ2T3CfWzp8BlFw6Z.png", alt="Optimized Page had a DCL of 4.05s and a LCP of 5.7s. Default Page had a DCL of 3.52s and a LCP of 8.3s.", width="800", height="413" %}
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">
+    At Vodafone, we test new solutions, measure results, keep what worked and question what didn't,
+    learning from mistakes. We call it "Experiment, Learn Fast". Thanks to the collaboration with Google
+    and the introduction of LCP as the main KPI for page performance, it was possible to
+    significantly improve the customer experience of our e-commerce.
+  </p>
+  <cite>Davide Grossi, Head of Digital Marketing, Business</cite>
+</blockquote>
+
+Check out the [Scale on web case studies](/tags/scale-on-web) page for more
+success stories.
diff --git a/src/site/content/en/blog/voot/index.md b/src/site/content/en/blog/voot/index.md
new file mode 100644
index 00000000000..a166d50f496
--- /dev/null
+++ b/src/site/content/en/blog/voot/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: Progressive Web App at Voot
+date: 2017-04-20
+updated: 2017-04-20
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jqr5aH5HOZmNBzN3YEg0.png", alt="Voot Lite logo", width="800", height="500" %}
+</figure>
+
+### Summary
+
+Voot.com launches their media Progressive Web App in India. Within days of
+implementation, session time per user increased by 39% and daily views per user
+by 15%.
+
+#### Results
+
+- 80% reduction in page load time
+- 39% increase in session time per user
+- 19% reduction in bounce rate
+- 77% increase in conversion from visitor to video viewer
+- 15% increase in average daily video views per user
+
+## About voot.com
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jlhv8OJFePlkQzFQxNtt.jpg", alt="Voot screenshot", width="374", height="640" %}
+</figure>
+
+Voot is one of India's top video-on-demand products, available as both a native
+app and a mobile web app. It offers close to 35,000 hours of premium content
+online, including exclusive shows from networks such as Colors and MTV, as well
+as Voot Originals and over 8,000 videos for children. Voot is run by Viacom18, a
+joint venture between Viacom and Network18 Group.
+
+## Challenge
+
+Mobile devices are a primary form of media consumption in India. Such devices
+often have limited storage for native apps, making the mobile web a critical
+part of the Voot product strategy.
+
+Most mobile Voot users access the Internet via metered 2G and 3G networks. Data
+transfer is expensive, and while users become highly committed to a video once
+it starts playing, slow load times lead to users giving up before the experience
+can even start. To address that challenge and increase mobile web usage, Voot
+looked to enhance their site with Progressive Web App features.
+
+## Solution
+
+To improve the overall user experience, Voot.com turned their site into a
+Progressive Web App, using features such as Add to Homescreen and a service
+worker.
+
+While 4G services have recently launched, most users in India
+reach the Internet via 2G and 3G networks, with slow and sometimes
+expensive data transfer rates. To reduce the data being transferred, Voot.com
+optimized their images specifically for mobile, and the
+site now dynamically serves either JPEG or WebP images depending upon browser
+capabilities.
+
+Voot.com also decreased load times by adding a service worker to preload images
+as the user navigates, and to cache images for repeat visits. The site was also
+analyzed with [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to gain performance insights,
+which in turn allowed a reduction in JavaScript and CSS overhead and the
+implementation of synchronous server calls.
+
+These optimizations resulted in a 63% reduction in first-view page load data
+transfer and an 86% reduction in data transfer for returning visitors. Page
+loads became 5 times faster for first-time visitors, and almost 7 times faster
+for returning users.
+
+To offer a true app-like experience, Voot.com also implemented
+[add to home screen](https://developers.google.com/web/fundamentals/app-install-banners),
+allowing users to launch the page from their home screen like a native app. This
+combined with a streamlined login process allows users to quickly and easily
+re-engage with the site and watch their favorite shows.
+
+Voot launched its new UI first on mobile web, ahead of desktop web and native
+app. Within days of launch, the improvements translated to a 19% reduction in
+user abandonment and a 77% increase in conversion from visitor to video viewer.
+Users also showed higher levels of engagement, with a 39% increase in average
+user session time and a 15% increase in average daily video views per user.
+These user engagement metrics show Voot.com performing similarly to the native
+app, without requiring the user to install anything.
+
+“We have moved the needle very significantly when it comes to user experience
+on the Mobile Web by adopting PWA” says Rajneel Kumar, SVP - Head of Product
+and Technology for OTT and Digital Ventures at Viacom18. “All the time and
+effort we’ve spent on technology and UI changes as well as optimizations seem
+to be showing very positive results. We are going to continue to refine this
+further and we are confident that we will continue to see significant consumer
+lift.”
+
diff --git a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/hero.jpg b/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/hero.jpg
deleted file mode 100644
index 06125b32190..00000000000
Binary files a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/index.md b/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/index.md
index 5805cda20c7..479176133e8 100644
--- a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/index.md
+++ b/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/index.md
@@ -4,7 +4,7 @@ subhead: All about the frame loop
 authors:
   - joemedley
 date: 2020-02-13
-hero: hero.jpg
+hero: image/admin/2OEKtIp4RJNtX0stioZF.jpg
 alt: A person using a virtual reality headset.
 description:
   Virtual reality came to the web in Chrome 79. Based on the WebXR Device API,
@@ -21,9 +21,9 @@ tags:
 ---
 
 Recently, I published [Virtual reality comes to the
-web](https://web.dev/vr-comes-to-the-web/), an article that introduced basic
+web](/vr-comes-to-the-web/), an article that introduced basic
 concepts behind the [WebXR Device
-API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API). I
+API](https://developer.mozilla.org/docs/Web/API/WebXR_Device_API). I
 also provided instructions for requesting, entering, and ending an XR session.
 
 This article describes the frame loop, which is a user-agent controlled
@@ -38,7 +38,7 @@ a WebXR App. Fortunately many frameworks provide a layer of abstraction on top
 of WebGL and WebGL2. Such frameworks include [three.js](https://threejs.org/),
 [babylonjs](https://www.babylonjs.com/), and
 [PlayCanvas](https://playcanvas.com/), while [A-Frame](https://aframe.io/) and
-[React 360](https://facebook.github.io/react-360/) are designed for interacting
+[React 360](https://github.com/facebookarchive/react-360) was designed for interacting
 with WebXR.
 
 This article is neither a WebGL nor a framework tutorial. It explains basics of
@@ -68,7 +68,7 @@ origin. The origin is specified based on the requested reference space type when
 calling `XRSession.requestReferenceSpace()`.
 
 Reference spaces take a bit to explain. I cover them in depth in [Augmented
-reality](https://web.dev/web-ar/). The sample I'm using as the basis for this
+reality](/web-ar/). The sample I'm using as the basis for this
 article uses a `'local'` reference space which means the origin is at the
 viewer's position at the time of session creation without a well-defined floor,
 and its precise position may vary by platform.
@@ -118,9 +118,9 @@ Notice the relationship between `XRWebGLLayer` and `WebGLRenderingContext`. One
 corresponds to the viewer's device and the other corresponds to the web page.
 `WebGLFramebuffer` and `XRViewport` are passed from the former to the latter.
 
-<figure class="w-figure">
-  <img src="./players.png" style="max-width: 100%;" alt="The relationship between XRWebGLLayer and WebGLRenderingContext"/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Img src="image/admin/ZdH8cIApe8jUr7F1WNgC.png", alt="The relationship between XRWebGLLayer and WebGLRenderingContext", width="711", height="94" %}
+  <figcaption>
     The relationship between <code>XRWebGLLayer</code> and <code>WebGLRenderingContext</code>
   </figcaption>
 </figure>
@@ -129,7 +129,7 @@ corresponds to the viewer's device and the other corresponds to the web page.
 
 Now that we know who the players are, let's look at the game they play. It's a
 game that starts over with every frame. Recall that frames are part of a [frame
-loop](https://web.dev/vr-comes-to-the-web/#running-a-frame-loop) that happens at
+loop](/vr-comes-to-the-web/#running-a-frame-loop) that happens at
 a rate that depends on the underlying hardware. For VR applications the frames
 per second can be anywhere from 60 to 144. AR for Android runs at 30 frames per
 second. Your code should not assume any particular frame rate.
@@ -157,12 +157,12 @@ Because steps 1 and 2a were covered in the previous article, I'll start at step
 It probably goes without saying. To draw anything in AR or VR, I need to know
 where the viewer is and where they're looking. The viewer's position and
 orientation are provided by an [XRViewerPose
-object](https://developer.mozilla.org/en-US/docs/Web/API/XRViewerPose). I
+object](https://developer.mozilla.org/docs/Web/API/XRViewerPose). I
 get the viewer's pose by calling `XRFrame.getViewerPose()` on the current
 animation frame. I pass it the reference space I acquired when I set up the
 session. The values returned by this object are always relative to the reference
 space I requested when I [entered the current
-session](https://web.dev/vr-comes-to-the-web/#entering-a-session). As you may
+session](/vr-comes-to-the-web/#entering-a-session). As you may
 recall, I have to pass the current reference space when requesting the pose.
 
 ```js/3-4
@@ -177,7 +177,7 @@ function onXRFrame(hrTime, xrFrame) {
 ```
 
 There's one viewer pose that represents the user's overall position, meaning
-either the viewer's head or the the phone camera in the case of a smartphone.
+either the viewer's head or the phone camera in the case of a smartphone.
 The pose tells your application where the viewer is. Actual image rendering uses
 `XRView` objects, which I'll get to in a bit.
 
@@ -199,7 +199,7 @@ loop will continue. If not, the user agent will end the session and call the
 ### A short detour
 
 The next step requires objects created during [session
-set-up](https://web.dev/vr-comes-to-the-web/#requesting-a-session). Recall that
+set-up](/vr-comes-to-the-web/#requesting-a-session). Recall that
 I created a canvas and instructed it to create an XR-compatible Web GL rendering
 context, which I got by calling `canvas.getContext()`. All drawing is done using
 the WebGL API, the WebGL2 API, or a WebGL-based framework such as Three.js. This
@@ -311,7 +311,7 @@ top](#what-this-article-is-not).
 
 This is not the end of WebXR updates or articles. You can find a [reference for
 all of WebXR's interfaces and
-members](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)
+members](https://developer.mozilla.org/docs/Web/API/WebXR_Device_API)
 at MDN. For upcoming enhancements to the interfaces themselves, follow
 individual features on [Chrome
 Status](https://www.chromestatus.com/features#WebXR).
diff --git a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/players.png b/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/players.png
deleted file mode 100644
index aea3b42d821..00000000000
Binary files a/src/site/content/en/blog/vr-comes-to-the-web-pt-ii/players.png and /dev/null differ
diff --git a/src/site/content/en/blog/vr-comes-to-the-web/hero.jpg b/src/site/content/en/blog/vr-comes-to-the-web/hero.jpg
deleted file mode 100644
index 06125b32190..00000000000
Binary files a/src/site/content/en/blog/vr-comes-to-the-web/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/vr-comes-to-the-web/immersive-spectrum.png b/src/site/content/en/blog/vr-comes-to-the-web/immersive-spectrum.png
deleted file mode 100644
index 7f778e1914c..00000000000
Binary files a/src/site/content/en/blog/vr-comes-to-the-web/immersive-spectrum.png and /dev/null differ
diff --git a/src/site/content/en/blog/vr-comes-to-the-web/index.md b/src/site/content/en/blog/vr-comes-to-the-web/index.md
index db7466cef9e..0d8df7571ff 100644
--- a/src/site/content/en/blog/vr-comes-to-the-web/index.md
+++ b/src/site/content/en/blog/vr-comes-to-the-web/index.md
@@ -5,7 +5,7 @@ authors:
   - joemedley
 date: 2019-10-31
 updated: 2020-03-02
-hero: hero.jpg
+hero: image/admin/5TAFoyhWvniJzDchNzPT.jpg
 alt: A person using a virtual reality headset.
 description:
   Virtual reality came to the web in Chrome 79. Based on the WebXR Devicer API,
@@ -19,6 +19,8 @@ tags:
   - augmented-reality
   - virtual-reality
   - webxr
+feedback:
+  - api
 ---
 
 Immersive experiences came to the web in Chrome 79. The WebXR Device API brings
@@ -30,7 +32,7 @@ among others.
 
 This article begins a series on the immersive web. This installment covers
 setting up a basic WebXR application as well as entering and exiting an XR
-session. Later articles will cover the frame loop (the workhourse of WebXR
+session. Later articles will cover the frame loop (the workhorse of WebXR
 experience), the specifics of augmented reality, and the WebXR Hit Test API, a
 means of detecting surfaces in an AR session. Unless stated otherwise,
 everything I cover in this and succeeding articles applies equally to both AR
@@ -44,9 +46,9 @@ reality to completely virtual, with degrees of immersion in between. The 'X' in
 XR is intended to reflect that thinking by being a sort of algebraic variable
 that stands for anything in the spectrum of immersive experiences.
 
-<figure class="w-figure">
-  <img src="./immersive-spectrum.png" style="max-width: 100%;" alt="A graph illustrating the spectrum of visual experiences from complete reality to completely immersive."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure>
+  {% Img src="image/admin/iQ99APUTFIgjdRPyS1C4.png", alt="A graph illustrating the spectrum of visual experiences from complete reality to completely immersive.", width="800", height="204" %}
+  <figcaption>
     The spectrum of immersive experiences
   </figcaption>
 </figure
@@ -67,7 +69,7 @@ I'll explain a few basics of using the WebXR Device API. If you need more depth
 than I've provided, check out the Immersive Web Working Group's [WebXR
 samples](https://immersive-web.github.io/webxr-samples/) or [MDN's growing
 reference
-materials](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API).
+materials](https://developer.mozilla.org/docs/Web/API/WebXR_Device_API).
 If you're familiar with early versions of the WebXR Device API, you should
 glance over all of this material. There have been changes.
 
@@ -93,9 +95,9 @@ detection to test for `XRSystem` (via `navigator.xr`) and make a call to
 In the example below, I've indicated that I
 want a virtual reality session with the `'immersive-vr'` session type. The
 [other session
-types](https://developer.mozilla.org/en-US/docs/Web/API/XR/isSessionSupported#Syntax)
+types](https://developer.mozilla.org/docs/Web/API/XR/isSessionSupported#Syntax)
 are `'immersive-ar'` and `'inline'`. An inline session is for presenting content
-within HTML and is maily used for teaser content. The [Immersive AR
+within HTML and is mainly used for teaser content. The [Immersive AR
 Session](https://immersive-web.github.io/webxr-samples/immersive-ar-session.html)
 sample demonstrates this. I'll explain that in a later article.
 
@@ -143,9 +145,9 @@ web page can be reset when the user exits.
 
 I'll also need a `<canvas>` element to draw my scene on. It needs to be an
 XR-compatible
-[WebGLRenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
+[WebGLRenderingContext](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext)
 or
-[WebGL2RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext).
+[WebGL2RenderingContext](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext).
 All drawing is done using them or a WebGL-based framework such as
 [Three.js](https://threejs.org/).
 
@@ -157,7 +159,7 @@ Once I'm in a session, I need a way of determining where things are in virtual
 reality. I'll need a reference space. A `'local-floor'` reference space is one
 where the origin is located near the viewer and the y-axis is 0 at floor level
 and is not expected to move. There are [other types of reference
-spaces](https://developer.mozilla.org/en-US/docs/Web/API/XRSession/requestReferenceSpace),
+spaces](https://developer.mozilla.org/docs/Web/API/XRSession/requestReferenceSpace),
 but that is a more complicated topic than I can go into here. I save the
 reference space to a variable because I'll need it when I draw to the screen.
 
diff --git a/src/site/content/en/blog/wakelock/hero.jpg b/src/site/content/en/blog/wakelock/hero.jpg
deleted file mode 100644
index 9ec3cfbdfe4..00000000000
Binary files a/src/site/content/en/blog/wakelock/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/wakelock/index.md b/src/site/content/en/blog/wakelock/index.md
deleted file mode 100644
index 515b8644415..00000000000
--- a/src/site/content/en/blog/wakelock/index.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: Stay awake with the Screen Wake Lock API
-subhead: The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
-authors:
-  - petelepage
-  - thomassteiner
-description: To avoid draining the battery, most devices will quickly fall asleep when left idle. While this is fine most of the time, there are some applications that need to keep the screen awake in order to complete some work. The Screen Wake Lock API provides a way to prevent the device from dimming or locking the screen when an application needs to keep running.
-date: 2018-12-18
-updated: 2020-07-02
-hero: hero.jpg
-hero_position: center
-alt: |
-  Cat sleeping. Photo by Kate Stone Matheson on Unsplash.
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/902971725287784449
-tags:
-  - blog
-  - capabilities
-  - wake-lock
----
-
-{% Aside 'success' %}
-  The Screen Wake Lock API, part of Google's
-  [capabilities project](https://developers.google.com/web/updates/capabilities),
-  launched in Chrome 84.
-{% endAside %}
-
-## What is the Screen Wake Lock API? {: #what }
-
-To avoid draining the battery, most devices quickly go to sleep when left
-idle. While this is fine most of the time, some applications need to keep the
-screen awake to complete their work. Examples include cooking apps
-that show the steps of a recipe or a game
-like [Ball Puzzle](https://ball-puzzle.appspot.com/), which uses the device
-motion APIs for input.
-
-The [Screen Wake Lock API][spec-ed] provides a way to prevent the device from dimming
-and locking the screen. This
-capability enables new experiences that, until now, required a native app.
-
-The Screen Wake Lock API reduces the need for hacky and potentially
-power-hungry workarounds. It addresses the shortcomings of an older API
-that was limited to simply keeping the screen on and had a number of
-security and privacy issues.
-
-## Suggested use cases for the Screen Wake Lock API {: #use-cases }
-
-[RioRun](https://www.theguardian.com/sport/2016/aug/06/rio-running-app-marathon-course-riorun),
-a web app developed by [The Guardian](https://www.theguardian.com/),
-was a perfect use case (though it's no longer available).
-The app takes you on a virtual audio tour of Rio, following the route of the 2016
-Olympic marathon.
-Without wake locks, users' screens would turn off frequently while the tour played,
-making it hard to use.
-
-Of course, there are plenty of other use cases:
-
-* A recipe app that keeps the screen on while you bake a cake or cook
-  dinner
-* A boarding pass or ticket app that keeps the screen
-  on until the barcode has been scanned
-* A kiosk-style app that keeps the screen on continuously
-* A web-based presentation app that keeps the screen
-  on during a presentation
-
-{% Aside 'success' %}
-  After implementing the Screen Wake Lock API,
-  *Betty Crocker*, a major cooking site in the US,
-  saw a 300% increase in purchase intent indicators for their users.
-  Read more in the 🍰&nbsp;[Betty Crocker case study](/betty-crocker/).
-{% endAside %}
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | N/A                          |
-| 2. Create initial draft of specification   | [Complete][spec-ed]          |
-| 3. Gather feedback and iterate design      | [Complete](#feedback)        |
-| 4. Origin trial                            | Complete                     |
-| **5. Launch**                              | **Complete**                 |
-
-</div>
-
-{% Aside %}
-  Big thanks to the folks at Intel, specifically Mrunal Kapade, for implementing
-  this API. Chrome depends on a community of committers
-  working together to move the Chromium project forward. Not every Chromium
-  committer is a Googler, and these contributors deserve special recognition!
-{% endAside %}
-
-## Using the Screen Wake Lock API {: #use }
-
-### Wake lock types {: #wake-lock-types }
-
-The Screen Wake Lock API currently provides just one type of wake lock: `screen`.
-
-#### `screen` wake lock
-
-A `screen` wake lock prevents the device's screen from turning
-off so that the user can see the information that's displayed on screen.
-
-{% Aside 'caution' %}
-An earlier version of the specification allowed an additional `system` wake lock
-that prevents the device's CPU from entering standby mode so
-that your app can continue running.
-We have decided to not proceed with this type for the moment.
-{% endAside %}
-
-### Feature detection
-
-Browser support for the Screen Wake Lock API can be tested as follows:
-
-```js
-if ('wakeLock' in navigator) {
-  // Screen Wake Lock API supported 🎉
-}
-```
-
-### Getting a screen wake lock {: #get-wake-lock }
-
-To request a screen wake lock, you need to call the `navigator.wakeLock.request()` method
-that returns a `WakeLockSentinel` object.
-You pass this method the desired wake lock type as a parameter,
-which *currently* is limited to just `'screen'`.
-The browser can refuse the request for various reasons (for example,
-because the battery charge level is too low),
-so it's a good practice to wrap the call in a `try…catch` statement.
-The exception's message will contain more details in case of failure.
-
-### Releasing a screen wake lock {: #release-wake-lock }
-
-You also need a way to release the screen wake lock, which is achieved by calling the
-`release()` method of the `WakeLockSentinel` object.
-If you don't store a reference to the `WakeLockSentinel`, there's no way
-to release the lock manually, but it will be released once the current tab is invisible.
-
-If you want to automatically release the screen wake lock
-after a certain period of time has passed,
-you can use `window.setTimeout()` to call `release()`, as shown in the example below.
-
-```js
-// The wake lock sentinel.
-let wakeLock = null;
-
-// Function that attempts to request a screen wake lock.
-const requestWakeLock = async () => {
-  try {
-    wakeLock = await navigator.wakeLock.request('screen');
-    wakeLock.addEventListener('release', () => {
-      console.log('Screen Wake Lock was released');
-    });
-    console.log('Screen Wake Lock is active');
-  } catch (err) {
-    console.error(`${err.name}, ${err.message}`);
-  }
-};
-
-// Request a screen wake lock…
-await requestWakeLock();
-// …and release it again after 5s.
-window.setTimeout(() => {
-  wakeLock.release();
-  wakeLock = null;
-}, 5000);
-```
-
-### The screen wake lock lifecycle {: #wake-lock-lifecycle }
-
-When you play with the [screen wake lock demo][demo], you'll notice that screen wake locks
-are sensitive to [page visibility][page-visibility-api].
-This means that the screen wake lock
-will automatically be released when you minimize a
-tab or window, or switch away from a tab or window where a screen wake lock is active.
-
-To reacquire the screen wake lock,
-listen for the [`visibilitychange`][visibility-change] event
-and request a new screen wake lock when they occur:
-
-```js
-const handleVisibilityChange = () => {
-  if (wakeLock !== null && document.visibilityState === 'visible') {
-    requestWakeLock();
-  }
-};
-
-document.addEventListener('visibilitychange', handleVisibilityChange);
-```
-
-## Minimize your impact on system resources {: #best-practices }
-
-Should you use a screen wake lock in your app?
-The approach you take depends on the needs of your app. Regardless, you should
-use the most lightweight approach possible for your app to minimize its
-impact on system resources.
-
-Before adding a screen wake lock to your app, consider whether your use cases could
-be solved with one of the following alternative solutions:
-
-* If your app is performing long-running downloads, consider using
-  [background fetch](https://developers.google.com/web/updates/2018/12/background-fetch).
-* If your app is synchronizing data from an external server, consider using
-  [background sync](https://developers.google.com/web/updates/2015/12/background-sync).
-
-{% Aside %}
-  Like most other powerful web APIs, the Screen Wake Lock API is only available
-  when served over **HTTPS**.
-{% endAside %}
-
-### Demo
-
-Check out the [Screen Wake Lock demo][demo] and [demo source][demo-source].
-Notice how the screen wake lock is automatically released when you switch tabs
-or apps.
-
-## Feedback {: #feedback }
-
-The [Web Platform Incubator Community Group (WICG)](https://www.w3.org/community/wicg/)
-and the Chrome team want to hear about your
-thoughts and experiences with the Screen Wake Lock API.
-
-### Tell us about the API design
-
-Is there something about the API that doesn't work as expected? Or
-are there missing methods or properties that you need to implement your idea?
-
-* File a spec issue on the [Screen Wake Lock API GitHub repo][issues]
-  or add your thoughts to an existing issue.
-
-### Report a problem with the implementation
-
-Did you find a bug with Chrome's implementation? Or is the implementation
-different from the spec?
-
-* File a bug at [https://new.crbug.com][new-bug]. Be sure to include as much
-  detail as you can, provide simple instructions for reproducing the bug, and
-  set *Components* to `Blink>WakeLock`. [Glitch](https://glitch.com) works great
-  for sharing quick and easy repros.
-
-### Show support for the API
-
-Are you planning to use the Screen Wake Lock API? Your public support helps the
-Chrome team prioritize features and shows other browser vendors how
-critical it is to support them.
-
-* Share how you plan to use the API on the [WICG Discourse thread][wicg-discourse].
-* Send a Tweet to [@ChromiumDev][cr-dev-twitter] with `#wakelock` and
-  let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* Specification [Candidate Recommendation][spec-cr] | [Editor's Draft][spec-ed]
-* [Screen Wake Lock Demo][demo] | [Screen Wake Lock Demo source][demo-source]
-* [Origin Trial][ot]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* [Experimenting with the Wake Lock API](https://medium.com/dev-channel/experimenting-with-the-wake-lock-api-b6f42e0a089f)
-* Blink Component: [`Blink>WakeLock`](https://chromestatus.com/features#component%3ABlink%3EWakeLock)
-
-## Acknowledgements
-
-[Hero image](https://unsplash.com/photos/uy5t-CJuIK4) by
-[Kate Stone Matheson](https://unsplash.com/@kstonematheson) on Unsplash.
-
-[spec-ed]: https://w3c.github.io/wake-lock/
-[spec-cr]: https://www.w3.org/TR/wake-lock/
-[demo]: https://wake-lock-demo.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/wake-lock-demo?path=script.js:1:0
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=257511
-[cr-status]: https://www.chromestatus.com/feature/4636879949398016
-[issues]: https://github.com/w3c/wake-lock/issues
-[wicg-discourse]: https://discourse.wicg.io/t/wake-lock-api-suppressing-power-management-screensavers/769
-[page-visibility-api]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
-[visibility-change]: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
-[new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EWakeLock
-[cr-dev-twitter]: https://twitter.com/chromiumdev
-[ot]: https://developers.chrome.com/origintrials/#/view_trial/902971725287784449
diff --git a/src/site/content/en/blog/wapo/index.md b/src/site/content/en/blog/wapo/index.md
new file mode 100644
index 00000000000..62322fe5ff4
--- /dev/null
+++ b/src/site/content/en/blog/wapo/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: The Washington Post
+date: 2016-07-20
+updated: 2016-07-20
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rTadjNpxkUGJHDs5t0MU.gif", alt="Washington Post detail", width="559", height="1000" %}
+</figure>
+
+### Summary
+
+AMP helps the Washington Post increase returning users from mobile search by 23%
+
+### Results
+
+- 23% increase in mobile search users who return within 7 days
+- 88% improvement in load time for AMP content versus traditional mobile web
+- 1000+ articles The Washington Post publishes in AMP HTML daily
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/214iT7lHCYfvPxJ6a8ds.pdf)
+
+## Using AMP
+
+With nearly 55% of their traffic coming from mobile devices, The Washington
+Post knows that providing a great reading experience on mobile devices is
+critical to their long-term success.
+
+In particular, The Post is focused on making their mobile content load as quickly
+as possible, because data shows that people abandon websites after just three
+seconds if the content doesn’t load quickly.
+
+In June 2015, The Washington Post joined a group of publishers and technology
+companies to create the [Accelerated Mobile
+Pages Project](https://www.ampproject.org/), a new open standard for publishing content which loads
+instantly, anywhere across the mobile web.
+
+> We are committed to improving speed across the board,” said David Merrell,
+Senior Product Manager at The Washington Post. “If our site takes a long time
+to load, it doesn’t matter how great our journalism is, some people will leave
+the page before they see what’s there.”
+
+The Post publishes over 1,000 articles in AMP every day, and they’re already
+seeing concrete benefits. “We have seen load times average 400 milliseconds,
+an 88% improvement over our traditional mobile website. This has made
+readers more likely to tap on Washington Post stories because they know
+our articles will load consistently fast.”
+
+AMP has been great for retention as well. Traditionally 51% of mobile search
+users return to The Washington Post within 7 days. For users who read stories
+published in AMP, this number jumps to 63%.
+
+> Getting started with AMP was easy because it is built on existing web
+technologies. And since AMP is not a template based system, we were able
+to host our content, style it as we see fit, and easily integrate our existing
+advertising, analytics and other business tools,” Merrell said.
diff --git a/src/site/content/en/blog/wasm-av1/index.md b/src/site/content/en/blog/wasm-av1/index.md
new file mode 100644
index 00000000000..af098022267
--- /dev/null
+++ b/src/site/content/en/blog/wasm-av1/index.md
@@ -0,0 +1,475 @@
+---
+layout: post
+title: Extending the browser with WebAssembly
+subhead: WebAssembly lets us extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser.
+date: 2018-08-22
+updated: 2018-08-22
+authors:
+  - alexdanilo
+
+description: |
+  WebAssembly lets us extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser.
+tags:
+  - blog
+  - webassembly
+  - media
+
+---
+
+One of the best things about [WebAssembly](https://webassembly.org/) is the
+ability experiment with new capabilities and implement new ideas before the
+browser ships those features natively (if at all). You can think of using
+WebAssembly this way as a high-performance polyfill mechanism, where you
+write your feature in C/C++ or Rust rather than JavaScript.
+
+With a plethora of existing code available for porting, it's possible to do
+things in the browser that weren't viable until WebAssembly came along.
+
+This article will walk through an example of how to take the existing AV1
+video codec source code, build a wrapper for it, and try it out inside your
+browser and tips to help with building a test harness to debug the wrapper.
+Full source code for the example here is available at
+[github.com/GoogleChromeLabs/wasm-av1](https://github.com/GoogleChromeLabs/wasm-av1) for reference.
+
+Download one of these two 24fps test
+[video](http://alex-wasm.appspot.com/av1/video/big_buck_bunny_360p24.ivf)
+[files](http://alex-wasm.appspot.com/av1/video/elephants_dream_360p24.ivf)
+and try them on our built [demo](http://alex-wasm.appspot.com/av1/index.html).
+
+## Choosing an interesting code-base
+
+For a number of years now, we've seen that a large percentage of traffic on
+the web consists of video data, Cisco
+[estimates it](https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/complete-white-paper-c11-481360.html#_Toc484813971) as much as 80% in fact! Of course, browser
+vendors and video sites are hugely aware of the desire to reduce the data
+consumed by all this video content. The key to that, of course, is better
+compression, and as you'd expect there is a lot of research into
+next-generation video compression aimed at reducing the data burden of shipping
+video across the internet.
+
+As it happens, the [Alliance for Open Media](https://aomedia.org/) has been
+working on a next generation video compression scheme called
+[AV1](https://aomedia.org/av1-features/get-started/) that promises to shrink
+video data size considerably. In the future, we'd expect browsers to ship
+native support for AV1, but luckily the source code for the compressor and
+decompressor are [open source](https://aomedia.googlesource.com/aom/), which
+makes that an ideal candidate for trying to compile it into WebAssembly so
+we can experiment with it in the browser.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Nxc2in5sTnWc8T1slk0h.png", alt="Bunny movie image.", width="360", height="240" %}
+</figure>
+
+
+
+## Adapting for use in the browser
+
+One of the first things we need to do to get this code into the browser is to
+get to know the existing code to understand what the API is like. When first
+looking at this code, two things stand out:
+
+
+
+1.  The source tree is built using a tool called `cmake`; and
+1.  There are a number of examples that all assume some kind of file-based interface.
+
+All the examples that get built by default can be run on the command line, and
+that is likely to be true in many other code bases available in the community.
+So, the interface we're going to build to make it run in the browser could be
+useful for many other command line tools.
+
+
+### Using `cmake` to build the source code
+
+Fortunately, the AV1 authors have been experimenting with
+[Emscripten](http://kripken.github.io/emscripten-site/), the SDK we're going to
+use to build our WebAssembly version. In the root of the
+[AV1 repository](https://aomedia.googlesource.com/aom/+/master), the file
+`CMakeLists.txt`contains these build rules:
+
+
+```wasm
+if(EMSCRIPTEN)
+add_preproc_definition(_POSIX_SOURCE)
+append_link_flag_to_target("inspect" "-s TOTAL_MEMORY=402653184")
+append_link_flag_to_target("inspect" "-s MODULARIZE=1")
+append_link_flag_to_target("inspect"
+                            "-s EXPORT_NAME=\"\'DecoderModule\'\"")
+append_link_flag_to_target("inspect" "--memory-init-file 0")
+
+if("${CMAKE_BUILD_TYPE}" STREQUAL "")
+    # Default to -O3 when no build type is specified.
+    append_compiler_flag("-O3")
+endif()
+em_link_post_js(inspect "${AOM_ROOT}/tools/inspect-post.js")
+endif()
+```
+
+
+The Emscripten toolchain can generate output in two formats, one is called
+[`asm.js`](http://asmjs.org/) and the other is WebAssembly.
+We'll be targeting WebAssembly as it produces smaller output and can run
+faster. These existing build rules are meant to compile an
+`asm.js` version of the library for use in an
+inspector application that's leveraged to look at the content of a video
+file. For our usage, we need WebAssembly output so we add these lines just
+before the closing `endif()`statement in the
+rules above.
+
+
+```wasm
+# Force generation of Wasm instead of asm.js
+append_link_flag_to_target("inspect" "-s WASM=1")
+append_compiler_flag("-s WASM=1")
+```
+
+
+{% Aside %}
+It's important to create a build directory that's separate from the
+source code tree, and run all the commands below inside that build directory.
+{% endAside %}
+
+Building with `cmake` means first generating some
+`Makefiles` by running
+`cmake` itself, followed by running the command
+`make` which will perform the compilation step.
+Note, that since we are using Emscripten we need to use the
+Emscripten compiler toolchain rather than the default host compiler.
+That's achieved by using `Emscripten.cmake` which
+is part of the [Emscripten SDK](https://github.com/juj/emsdk) and
+passing it's path as a parameter to `cmake` itself.
+The command line below is what we use to generate the Makefiles:
+
+
+```bash
+cmake path/to/aom \
+  -DENABLE_CCACHE=1 -DAOM_TARGET_CPU=generic -DENABLE_DOCS=0 \
+  -DCONFIG_ACCOUNTING=1 -DCONFIG_INSPECTION=1 -DCONFIG_MULTITHREAD=0 \
+  -DCONFIG_RUNTIME_CPU_DETECT=0 -DCONFIG_UNIT_TESTS=0
+  -DCONFIG_WEBM_IO=0 \
+  -DCMAKE_TOOLCHAIN_FILE=path/to/emsdk-portable/.../Emscripten.cmake
+```
+
+
+The parameter `path/to/aom` should be set to the full path of
+the location of the AV1 library source files. The
+`path/to/emsdk-portable/…/Emscripten.cmake` parameter needs
+to be set to the path for the Emscripten.cmake toolchain description file.
+
+For convenience we use a shell script to locate that file:
+
+
+```bash
+#!/bin/sh
+EMCC_LOC=`which emcc`
+EMSDK_LOC=`echo $EMCC_LOC | sed 's?/emscripten/[0-9.]*/emcc??'`
+EMCMAKE_LOC=`find $EMSDK_LOC -name Emscripten.cmake -print`
+echo $EMCMAKE_LOC
+```
+
+
+If you look at the top-level `Makefile` for this project, you
+can see how that script is used to configure the build.
+
+Now that all of the setup has been done, we simply call `make`
+which will build the entire source tree, including samples, but most
+importantly generate `libaom.a` which contains the
+video decoder compiled and ready for us to incorporate into our project.
+
+
+### Designing an API to interface to the library
+
+Once we've built our library, we need to work out how to interface with it to
+send compressed video data to it and then read back frames of video that we
+can display in the browser.
+
+Taking a look inside the AV1 code tree, a good starting point is an example
+video decoder which can be found in the file
+`[simple_decoder.c](https://aomedia.googlesource.com/aom/+/master/examples/simple_decoder.c)`.
+That decoder reads in an [IVF](https://wiki.multimedia.cx/index.php/IVF) file
+and decodes it into a series of images that represent the frames in the video.
+
+We implement our interface in the source file
+`[decode-av1.c](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/decode-av1.c)`.
+
+Since our browser can't read files from the file system, we need to design some
+form of interface that lets us abstract away our I/O so that we can build
+something similar to the example decoder to get data into our AV1 library.
+
+On the command line, file I/O is what's known as a stream interface, so we can
+just define our own interface that looks like stream I/O and build whatever we
+like in the underlying implementation.
+
+We define our interface as this:
+
+
+```c
+DATA_Source *DS_open(const char *what);
+size_t      DS_read(DATA_Source *ds,
+                    unsigned char *buf, size_t bytes);
+int         DS_empty(DATA_Source *ds);
+void        DS_close(DATA_Source *ds);
+// Helper function for blob support
+void        DS_set_blob(DATA_Source *ds, void *buf, size_t len);
+```
+
+
+The `open/read/empty/close` functions look a lot like normal
+file I/O operations which allows us to map them easily onto file I/O for a
+command line application, or implement them some other way when run inside
+a browser. The `DATA_Source` type is opaque from
+the JavaScript side, and just serves to encapsulate the interface. Note, that
+building an API that closely follows file semantics makes it easy to reuse in
+many other code-bases that are intended to be  used from a command line
+(e.g. diff, sed, etc.).
+
+We also need to define a helper function called `DS_set_blob`
+that binds raw binary data to our stream I/O functions. This lets the blob be
+'read' as if it's a stream (i.e. looking like a sequentially read file).
+
+Our example implementation enables reading the passed in blob  as if it was a
+sequentially read data source. The reference code can be found in the file
+[`blob-api.c`](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/blob-api.c),
+and the entire implementation is just this:
+
+
+```c
+struct DATA_Source {
+    void        *ds_Buf;
+    size_t      ds_Len;
+    size_t      ds_Pos;
+};
+
+DATA_Source *
+DS_open(const char *what) {
+    DATA_Source     *ds;
+
+    ds = malloc(sizeof *ds);
+    if (ds != NULL) {
+        memset(ds, 0, sizeof *ds);
+    }
+    return ds;
+}
+
+size_t
+DS_read(DATA_Source *ds, unsigned char *buf, size_t bytes) {
+    if (DS_empty(ds) || buf == NULL) {
+        return 0;
+    }
+    if (bytes > (ds->ds_Len - ds->ds_Pos)) {
+        bytes = ds->ds_Len - ds->ds_Pos;
+    }
+    memcpy(buf, &ds->ds_Buf[ds->ds_Pos], bytes);
+    ds->ds_Pos += bytes;
+
+    return bytes;
+}
+
+int
+DS_empty(DATA_Source *ds) {
+    return ds->ds_Pos >= ds->ds_Len;
+}
+
+void
+DS_close(DATA_Source *ds) {
+    free(ds);
+}
+
+void
+DS_set_blob(DATA_Source *ds, void *buf, size_t len) {
+    ds->ds_Buf = buf;
+    ds->ds_Len = len;
+    ds->ds_Pos = 0;
+}
+```
+
+
+
+## Building a test harness to test outside the browser
+
+One of the best practices in software engineering is to build unit tests for
+code in conjunction with integration tests.
+
+When building with WebAssembly in the browser, it makes sense to build some
+form of unit test for the interface to the code we're working with so we can
+debug outside of the browser and also be able to test out the interface we've
+built.
+
+In this example we've been emulating a stream based API as the interface to
+the AV1 library. So, logically it makes sense to build a test harness that we
+can use to build a version of our API that runs on the command line and does
+actual file I/O under the hood by implementing the file I/O itself underneath
+our `DATA_Source` API.
+
+The stream I/O code for our test harness is straightforward, and looks like
+this:
+
+
+```c
+DATA_Source *
+DS_open(const char *what) {
+    return (DATA_Source *)fopen(what, "rb");
+}
+
+size_t
+DS_read(DATA_Source *ds, unsigned char *buf, size_t bytes) {
+    return fread(buf, 1, bytes, (FILE *)ds);
+}
+
+int
+DS_empty(DATA_Source *ds) {
+    return feof((FILE *)ds);
+}
+
+void
+DS_close(DATA_Source *ds) {
+    fclose((FILE *)ds);
+}
+```
+
+
+By abstracting the stream interface we can build our WebAssembly module to
+use binary data blobs when in the browser, and interface to real files when
+we build the code to test from the command line. Our test harness code can be
+found in the example source file
+[`test.c`](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/test.c).
+
+
+## Implementing a buffering mechanism for multiple video frames
+
+When playing back video, it's common practice to buffer a few frames to help
+with smoother playback. For our purposes we'll just implement a buffer of 10
+frames of video, so we'll buffer 10 frames before we start playback. Then each
+time a frame is displayed, we'll try to decode another frame so we keep the
+buffer full. This approach makes sure frames are available in advance to help
+stop the video stuttering.
+
+With our simple example, the entire compressed video is available to read, so
+the buffering isn't really needed. However, if we're to extend the source data
+interface to support streaming input from a server, then we need to have the
+buffering mechanism in place.
+
+The code in
+[`decode-av1.c`](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/decode-av1.c)
+for reading frames of video data from the AV1 library and storing in the buffer
+as this:
+
+
+```c
+void
+AVX_Decoder_run(AVX_Decoder *ad) {
+    ...
+    // Try to decode an image from the compressed stream, and buffer
+    while (ad->ad_NumBuffered < NUM_FRAMES_BUFFERED) {
+        ad->ad_Image = aom_codec_get_frame(&ad->ad_Codec,
+                                           &ad->ad_Iterator);
+        if (ad->ad_Image == NULL) {
+            break;
+        }
+        else {
+            buffer_frame(ad);
+        }
+    }
+
+
+```
+
+
+We've chosen to make the buffer contain 10 frames of video, which is just an
+arbitrary choice. Buffering more frames means more waiting time for the video
+to begin playback, whilst buffering too few frames can cause stalling during
+playback. In a native browser implementation, buffering of frames is far more
+complex than this implementation.
+
+
+## Getting the video frames onto the page with WebGL
+
+The frames of video that we've buffered need to be displayed on our page. Since
+this is dynamic video content, we want to be able to do that as fast as
+possible. For that, we turn to
+[WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+
+WebGL lets us take an image, such as a frame of video, and use it as a texture
+that gets painted on to some geometry. In the WebGL world, everything consists
+of triangles. So, for our case we can use a convenient built in feature of
+WebGL, called gl.TRIANGLE_FAN.
+
+However, there is a minor problem. WebGL textures are supposed to be RGB
+images, one byte per color channel. The output from our AV1 decoder is images
+in a so-called YUV format, where the default output has 16 bits per channel,
+and also each U or V value corresponds to 4 pixels in the actual output image.
+This all means we need to color convert the image before we can pass it to
+WebGL for display.
+
+To do so, we implement a function `AVX_YUV_to_RGB()` which you
+can find in the source file
+[`yuv-to-rgb.c`](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/yuv-to-rgb.c).
+That function converts the output from the AV1 decoder into something we can
+pass to WebGL. Note, that when we call this function from JavaScript we need
+to make sure that the memory we're writing the converted image into has been
+allocated inside the WebAssembly module's memory - otherwise it can't get
+access to it. The function to get an image out from the WebAssembly module and
+paint it to the screen is this:
+
+
+```javascript
+function show_frame(af) {
+    if (rgb_image != 0) {
+        // Convert The 16-bit YUV to 8-bit RGB
+        let buf = Module._AVX_Video_Frame_get_buffer(af);
+        Module._AVX_YUV_to_RGB(rgb_image, buf, WIDTH, HEIGHT);
+        // Paint the image onto the canvas
+        drawImageToCanvas(new Uint8Array(Module.HEAPU8.buffer,
+                rgb_image, 3 * WIDTH * HEIGHT), WIDTH, HEIGHT);
+    }
+}
+```
+
+
+The `drawImageToCanvas()` function that implements the WebGL painting can be
+found in the source file
+[`draw-image.js`](https://github.com/GoogleChromeLabs/wasm-av1/blob/master/draw-image.js)
+for reference.
+
+
+## Future work and takeaways
+
+Trying our [demo](http://alex-wasm.appspot.com/av1/index.html) out on two test
+[video](http://alex-wasm.appspot.com/av1/video/big_buck_bunny_360p24.ivf)
+[files](http://alex-wasm.appspot.com/av1/video/elephants_dream_360p24.ivf)
+(recorded as 24 f.p.s. video) teaches us a few things:
+
+
+
+1.  It's entirely feasible to build a complex code-base to run performantly in the browser using WebAssembly; and
+1.  Something as CPU intensive as advanced video decoding is feasible via WebAssembly.
+
+There are some limitations though: the implementation is all running on the
+main thread and we interleave painting and video decoding on that single
+thread. Offloading the decoding into a web worker could provide us with
+smoother playback, as the time to decode frames is highly dependent on the
+content of that frame and can sometimes take more time than we have budgeted.
+
+The compilation into WebAssembly uses the AV1 configuration for a generic CPU
+type. If we compile natively on the command line for a generic CPU we see
+similar CPU load to decode the video as with the WebAssembly version, however
+the AV1 decoder library also includes
+[SIMD](https://en.wikipedia.org/wiki/SIMD) implementations that run up to
+5 times faster. The WebAssembly Community Group is currently working on
+extending the standard to include
+[SIMD primitives](https://github.com/WebAssembly/simd/blob/master/proposals/simd/SIMD.md),
+and when that comes along it promises to speed up decoding considerably.
+When that happens, it'll be entirely feasible to decode 4k HD video in
+real-time from a WebAssembly video decoder.
+
+In any case, the example code is useful as a guide to help port any existing
+command line utility to run as a WebAssembly module and shows what's possible
+on the web already today.
+
+
+## Credits
+
+Thanks to Jeff Posnick, Eric Bidelman and Thomas Steiner for providing
+valuable review and feedback.
+
+
diff --git a/src/site/content/en/blog/wasm-libraries/index.md b/src/site/content/en/blog/wasm-libraries/index.md
new file mode 100644
index 00000000000..e22264fb614
--- /dev/null
+++ b/src/site/content/en/blog/wasm-libraries/index.md
@@ -0,0 +1,55 @@
+---
+title: New functionality for developers—brought to you by WebAssembly
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UgDbKE3G0klQHevSBbQr.jpg
+alt: Low angle photo of a library in Dublin, Ireland.
+subhead: |
+  A showcase of tools now available on the web thanks to WebAssembly.
+authors:
+ - nattestad
+date: 2023-04-03
+description: |
+  A showcase of tools now available on the web thanks to WebAssembly.
+tags:
+ - blog
+ - webassembly
+---
+
+WebAssembly enables developers to bring new performant functionality to the web from other languages. Over the past few years developers have really taken advantage of the possibilities. This post showcases just a few of the shiny new tools that you can benefit from, thanks in part to WebAssembly.
+
+## Tools and libraries you can use now
+
+Without further ado, let's jump into the good stuff :D
+
+### SQLite
+
+This complete port of SQLite brings a lightweight, embedded, relational database management system into your hands. To learn more read this [blog post that showcases this incredible port and how to use it](https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/).
+
+### FFmpeg.wasm
+
+FFmpeg is a free and open-source software project consisting of a suite of libraries and programs for handling video, audio, and other multimedia files and streams. You can find [a wasm compiled version here](https://ffmpegwasm.netlify.app/) ([github repo](https://github.com/ffmpegwasm/ffmpeg.wasm)) that lets you do all of this functionality directly in the browser.
+
+### Universal Scene Description (USD)
+
+Universal Scene Description (USD) is a framework for 3D computer graphics data that focuses on collaboration, non-destructive editing, and enabling multiple views and opinions about graphics data. It's an industry standard supported by the likes of Pixar, Autodesk, Nvidia, and many more. It's still early days for their web support but [Autodesk already open sourced a web based USD viewer](https://www.keanw.com/2022/02/autodesk-open-sources-web-based-usd-viewing-implementation.html) which you can [see here](https://github.com/autodesk-forks/USD/tree/hdJavaScript).
+
+### CanvasKit
+
+[CanvasKit](https://skia.org/docs/user/modules/canvaskit/) is Skia, the rendering engine of Chrome and Android, compiled directly to WebAssembly. With it, you get simple JavaScript API access to practically all the power of the Skia rendering engine. The functionality includes complex rendering, text shaping, animation, inking, and more. Check out the [npm package](https://www.npmjs.com/package/canvaskit-wasm) and [quickstart guide](https://skia.org/docs/user/modules/quickstart/).
+
+### TensorFlow.js
+
+[TensorFlow.js](https://www.tensorflow.org/js) brings the power of TensorFlow directly into the browser with a simple JavaScript API. Under the hood, it optimizes models both across the GPU and CPU (including SIMD optimizations) to maximize performance. You can see the [getting started guide](https://www.tensorflow.org/js/tutorials) or look at [some of their demos directly](https://www.tensorflow.org/js/demos).
+
+### OpenCV
+
+OpenCV is an industry standard of programming functions mainly for real-time computer vision. There is an [easy-to-use npm package here](https://www.npmjs.com/package/opencv-wasm), and for Emscripten users there are also [detailed instructions for doing a full build](https://docs.opencv.org/4.x/d4/da1/tutorial_js_setup.html). For a look at how SIMD and threads are improving performance of these workloads, you can watch [this section of the Modern WebAssembly Chrome Dev Summit talk](https://youtu.be/kZrl91SPSpc?t=688).
+
+### Cocos
+
+[Cocos](https://www.cocos.com/en) is a powerful and popular game engine that enables developers to build games with cross platform support and this now includes the web. It joins the long list of game engines that enable web export through wasm. To get started, jump into the Cocos editor and follow [these instructions](https://docs.cocos.com/creator/2.3/manual/en/publish/publish-web.html). 
+
+## Conclusion
+
+In addition to these specific examples, there is much to be excited about in terms of [WebAssembly's potential to change the pace of new web functionality](https://blog.chromium.org/2023/04/how-webassembly-is-accelerating-new-web.html). Chrome has even set up [the Advanced Web Apps Fund](https://developer.chrome.com/blog/advanced-web-apps-fund/) that can help developers fund their work to advance the web functionality available to all developers!
+
+_Hero image from [Pexels](https://www.pexels.com/photo/low-angle-photography-of-library-1296000/), by [Ann Marie Kennon](https://www.pexels.com/@ann-marie-kennon-547933/)._
diff --git a/src/site/content/en/blog/wasm-threads/index.md b/src/site/content/en/blog/wasm-threads/index.md
new file mode 100644
index 00000000000..358459311e2
--- /dev/null
+++ b/src/site/content/en/blog/wasm-threads/index.md
@@ -0,0 +1,242 @@
+---
+layout: post
+title: WebAssembly Threads ready to try in Chrome 70
+subhead: WebAssembly thread support has shipped in Chrome 70 under an origin-trial.
+date: 2018-10-29
+updated: 2019-09-25
+authors:
+  - alexdanilo
+description: |
+  WebAssembly thread support has shipped in Chrome 70 under an origin-trial.
+tags:
+  - blog
+  - webassembly
+
+---
+
+{% Aside %}
+WebAssembly threads are enabled by default in Chrome 74 for desktop.
+The origin trial mentioned in this article ended in Chrome 75.
+{% endAside %}
+
+WebAssembly (Wasm) enables compilation of code written in C++ and other
+languages to run on the web. One very useful feature of native applications
+is the ability to use threads - a primitive for parallel computation. Most C
+and C++ developers would be familiar with
+**[_pthreads_](https://en.wikipedia.org/wiki/POSIX_Threads)** which is a
+standardized API for thread management in an application.
+
+The [WebAssembly Community Group](https://www.w3.org/community/webassembly/) has
+been working on bringing threads to the web to enable real multi-threaded
+applications. As part of this effort, V8 has implemented necessary support for
+threads in the WebAssembly engine, available through an
+[Origin Trial](https://github.com/GoogleChrome/OriginTrials). Origin Trials
+allow developers to experiment with new web features before they are fully
+standardized. This allows us to gather real-world feedback from intrepid
+developers, which is critical to validate and improve new features.
+
+The Chrome 70 release supports threads for WebAssembly and we encourage
+interested developers to start using them and give us feedback.
+
+## Threads? What about Workers?
+
+Browsers have supported parallelism via Web Workers since 2012 in Chrome 4; in
+fact it's normal to hear terms like 'on the main thread' etc. However, Web
+Workers do not share mutable data between them, instead relying on
+message-passing for communication. In fact, Chrome allocates a new V8 engine
+for each of them (called isolates). Isolates share neither compiled code nor
+JavaScript objects, and thus they cannot share mutable data like pthreads.
+
+WebAssembly threads, on the other hand, are threads that can share the same Wasm
+memory. The underlying storage of the shared memory is accomplished with a
+[SharedArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer),
+a JavaScript primitive that allows sharing a single ArrayBuffer's contents
+concurrently between workers. Each WebAssembly thread runs in a Web Worker, but
+their shared Wasm memory allows them to work much like they do on native
+platforms. This means that the applications that use Wasm threads are
+responsible for managing access to the shared memory as in any traditional
+threaded application. There are many existing code libraries written in C or C++
+that use **_pthreads_**, and those can be compiled to Wasm and run in true
+threaded mode, allowing more cores to work on the same data simultaneously. 
+
+## A simple example
+
+Here's an example of a simple 'C' program that uses threads.
+
+```c
+#include <pthread.h>
+#include <stdio.h>
+
+// Calculate Fibonacci numbers shared function
+int fibonacci(int iterations) {
+    int     val = 1;
+    int     last = 0;
+
+    if (iterations == 0) {
+        return 0;
+    }
+    for (int i = 1; i < iterations; i++) {
+        int     seq;
+
+        seq = val + last;
+        last = val;
+        val = seq;
+    }
+    return val;
+}
+// Start function for the background thread
+void *bg_func(void *arg) {
+    int     *iter = (void *)arg;
+
+    *iter = fibonacci(*iter);
+    return arg;
+}
+// Foreground thread and main entry point
+int main(int argc, char *argv[]) {
+    int         fg_val = 54;
+    int         bg_val = 42;
+    pthread_t   bg_thread;
+
+    // Create the background thread
+    if (pthread_create(&bg_thread, NULL, bg_func, &bg_val)) {
+        perror("Thread create failed");
+        return 1;
+    }
+    // Calculate on the foreground thread
+    fg_val = fibonacci(fg_val);
+    // Wait for background thread to finish
+    if (pthread_join(bg_thread, NULL)) {
+        perror("Thread join failed");
+        return 2;
+    }
+    // Show the result from background and foreground threads
+    printf("Fib(42) is %d, Fib(6 * 9) is %d\n", bg_val, fg_val);
+
+    return 0;
+}
+```
+
+That code begins with the **<code>main()</code>** function which declares 2
+variables <strong><code>fg_val</code></strong> and
+<strong><code>bg_val</code></strong>. There is also a function called
+<strong><code>fibonacci()</code></strong>, which will be called by both of the
+threads in this example. The <strong><code>main()</code></strong> function
+creates a background thread using <strong><code>pthread_create()</code></strong>
+whose task is to calculate the fibonacci number sequence value corresponding to
+the value of the <strong><code>bg_val</code></strong> variable. Meanwhile, the
+<strong><code>main()</code></strong> function running in the foreground thread
+calculates it for the <strong><code>fg_val</code></strong> variable. Once the
+background thread has completed running, the results are printed out.
+
+## Compile for thread support
+
+First, you should have the [emscripten SDK](https://github.com/juj/emsdk)
+installed, preferably version 1.38.11 or later. To build our example code with
+[threads enabled](https://kripken.github.io/emscripten-site/docs/porting/pthreads.html)
+for running in the browser, we need to pass a couple of extra flags to the
+[emscripten](http://kripken.github.io/emscripten-site/) **_emcc_** compiler. Our
+command line looks like this:
+
+```bash
+emcc -O2 -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=2 -o test.js test.c
+```
+
+The command line argument '`-s USE_PTHREADS=1`' turns on threading support for
+the compiled WebAssembly module and the argument '`-s PTHREAD_POOL_SIZE=2`'
+tells the compiler to generate a pool of two (2) threads.
+
+When the program is run, under the hood it will load the WebAssembly module,
+create a Web Worker for each of the threads in the thread pool, share the module
+with each of the workers, in this case it's 2, and those will be used whenever a
+call to **<code>pthread_create()</code>** is made. Each worker instantiates the
+Wasm module with the same memory, allowing them to cooperate. V8's newest
+changes in 7.0 share the compiled native code of Wasm modules that are passed
+between workers, which allows even very large applications to scale to many
+workers. Note, it makes sense to make sure the thread pool size is equal to the
+maximum number of threads your application needs, or thread creation may fail.
+At the same time, if the thread pool size is too large, you'll be creating
+unnecessary Web Workers that'll sit around doing nothing but using memory.
+
+## How to try it out
+
+The quickest way to test out our WebAssembly module is to turn on the
+experimental WebAssembly threads support in Chrome 70 onwards. Navigate to the
+URL **<code>about://flags</code>** in your browser as shown below:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/AX0ONsIeZ00KYkft5CIn.png", alt="Chrome flags page", width="620", height="74" %}
+</figure>
+
+Next, find the experimental WebAssembly threads setting which looks like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/J1Jud3AKlKeaki7cEZoo.png", alt="WebAssembly threads setting", width="800", height="114" %}
+</figure>
+
+Change the setting to **_Enabled_** as shown below, then restart your browser.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9YF7oXOYmC9AAghNrHFL.png", alt="WebAssembly threads setting enabled", width="800", height="106" %}
+</figure>
+
+After the browser has restarted, we can try loading the threaded WebAssembly
+module with a minimal HTML page, containing just this content:
+
+```html
+<!DOCTYPE html>
+<html>
+  <title>Threads test</title>
+  <body>
+    <script src="test.js"></script>
+  </body>
+</html>
+```
+
+To try this page, you'll need to run some form of web server and load it from
+your browser. That will cause the WebAssembly module to load and run. Opening
+DevTools shows us the output from the run, and you should see something like the
+output image below in the console:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xDbn862GMbUOS2E1oNqi.png", alt="Console output from fibonacci program", width="556", height="117" %}
+</figure>
+
+Our WebAssembly program with threads has executed successfully! We'd encourage
+you to try out your own threaded application using the steps outlined above.
+
+## Testing in the field with an Origin Trial
+
+Trying out threads by turning on experimental flags in the browser is fine for
+development purposes, but if you'd like to test your application out in the
+field, you can do so with what's known as an
+[origin trial](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md).
+
+Origin trials let you try out experimental features with your users by obtaining
+a testing token that's tied to your domain. You can then deploy your app and
+expect it to work in a browser that can support the feature you're testing (in
+this case Chrome 70 onwards). To obtain your own token to run an origin trial,
+use the application
+[form here](https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform).
+
+We've hosted our simple example above using an origin trial token, so you can
+[try it out for yourself](https://alex-wasm.appspot.com/threads/index.html)
+without needing to build anything.
+
+If you want to see what 4 threads running in parallel can do for ASCII art, then
+you must take a
+[look at this demo](https://alex-wasm.appspot.com/threads/pthread.html) as well!
+
+## Give us feedback
+
+WebAssembly threads are an extremely useful new primitive for porting
+applications to the web. It's now possible to run C and C++ applications and
+libraries which require **_pthreads_** support in the WebAssembly environment.
+
+We're looking for feedback from developers trying out this feature as it'll help
+inform the standardization process as well as validate its usefulness. The best
+way to send feedback is to
+[report issues](https://bugs.chromium.org/p/chromium/issues/list) and/or get
+involved with the [standardization](https://github.com/WebAssembly/threads)
+process in the
+[WebAssembly Community Group](https://www.w3.org/community/webassembly/).
+
diff --git a/src/site/content/en/blog/weather-channel/index.md b/src/site/content/en/blog/weather-channel/index.md
new file mode 100644
index 00000000000..c0ba69bf839
--- /dev/null
+++ b/src/site/content/en/blog/weather-channel/index.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: The Weather Channel
+description: |
+    The Weather Company, an IBM Business, serves an average of 40 billion forecast requests every day, helping people plan their daily lives and make better decisions based on weather.
+date: 2016-11-09
+updated: 2017-02-15
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lkfmhjIvUfvE9XFQfHmD.png", alt="Weather channel detail", width="582", height="1000" %}
+</figure>
+
+### Summary
+
+**The Weather Channel sees mobile web success with Progressive Web App,
+launching in 62 languages to 178 countries.**
+
+### Results
+
+- Progressive web app now available in 62 languages and 178 countries
+- 80% improvement in load time
+- Based on this successful global test, the
+team will expand the PWA to its U.S. site in 2017
+
+[Download PDF Case study](https://storage.googleapis.com/web-dev-uploads/file/T4FyVKpzu4WKF1kBNvXepbi08t52/7HV4Io4CeB2IgncZyGFg.pdf)
+
+## About The Weather Channel
+
+The Weather Channel has been forecasting since the 1980s and now serves people
+all around the world across many platforms. Its weather.com website sees traffic
+from every country and is a top-20 site in the United States. And its parent,
+The Weather Company, an IBM Business, serves an average of 40 billion forecast
+requests every day, helping people plan their daily lives and make better
+decisions based on weather.
+
+
+## Challenge
+
+The Weather Channel has always leveraged the latest technology innovations to
+help do its job in being the number one destination for weather reporting. The
+team’s goal is to supply timely, accurate information when it matters most.
+Weather is volatile, and delivering important data when people need it isn’t
+always easy, so the team was interested in improving its mobile web experience.
+
+On mobile, The Weather Channel has pushed vital information to their native-app
+users for some time. But this represents only half of their mobile traffic, with
+the other fifty percent accessing their site via the mobile web. The mobile web
+is also an extremely important discovery portal in markets where users don’t
+have the latest smartphones, reliable connectivity, or there’s significant cost
+for downloading an app.
+
+
+Weather looked to progressive web app technologies for a solution, approaching
+it in steps. Being a site that focuses on immediacy, especially related to real-
+time weather notifications in severe situations, the first area the team tackled
+was to create browser push notifications when severe weather hits. They also
+wanted to re-engage mobile users who hadn’t downloaded their app but were likely
+to be affected by severe weather.
+
+## Solution
+
+To scale quickly, The Weather Channel implemented push notifications for mobile
+web users on Android and desktop users on Chrome. The experience looks and feels
+like a native app, and works even if the browser isn't running. The team used a
+technology called service workers to provide offline processing and deliver
+messages quickly. Within three months, The Weather Channel had seen almost 1
+million users opt in to receive web push notifications, with 52 percent coming
+from mobile.
+
+
+After success with testing push, they continued along the full journey to build
+a Progressive Web App (PWA). Given the complexity of its U.S. site, Weather
+turned to its international sites first and have now rolled out progressive web
+apps in 178 countries, serving 62 languages. After upgrading their site to a
+PWA, they saw a 80% improvement in load time.
+
+The Weather Channel has a global audience, so being able to provide a PWA
+experience with the most reliable weather information to people across the world
+in their local language has been key in growing that user base. On a technical
+level they made this efficient by enabling support for over 60 languages using
+one code base.
+
+
+“A web experience, especially weather forecasts and notifications, must be
+timely and relevant to be useful, and we deliver the most relevant information
+when needed most,” says Wendy Frazier, vice president of web development at
+The Weather Company, which runs weather.com. “We provide a helpful service
+with accurate science and crucial information. And we use the most innovative
+technology to help people know what kind of weather is heading their way, no
+matter what platform they’re on.”
+
+
+“For the first time, we can reach people anywhere, which extends our mission
+to keep people safe and informed,” she adds. “It’s amazing to be able to do
+that globally, but with local presence and in language to make it relevant.
+We have the most accurate forecasts and the best data, and progressive
+technologies give us the ability to provide weather info to users in their
+preferred experience.”
diff --git a/src/site/content/en/blog/web-animations/hero.jpg b/src/site/content/en/blog/web-animations/hero.jpg
deleted file mode 100644
index 2e5faaf078a..00000000000
Binary files a/src/site/content/en/blog/web-animations/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/web-animations/index.md b/src/site/content/en/blog/web-animations/index.md
index 5061c91c41d..35b4c82dc87 100644
--- a/src/site/content/en/blog/web-animations/index.md
+++ b/src/site/content/en/blog/web-animations/index.md
@@ -5,14 +5,16 @@ authors:
   - una
   - kevinellis
 date: 2020-05-27
-hero: hero.jpg
+hero: image/admin/FHGNLoi8kcbaHlFTYb4H.jpg
 alt: Option screen with illustrated characters and a moving blue target.
 description: Wrangling your web animations is about to get much easier.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
   - animations
-  - chrome84
+  - chrome-84
   - javascript
+feedback:
+  - api
 ---
 
 When used correctly, [animations improve user perception and memory](https://www.researchgate.net/publication/229351931_The_Effects_of_Animation_and_Format_on_the_Perception_and_Memory_of_Online_Advertising) of your brand, guide user actions, and help users navigate your application—providing context in a digital space.
@@ -20,12 +22,12 @@ When used correctly, [animations improve user perception and memory](https://www
 
 The [Web Animations API](https://www.w3.org/TR/web-animations-1/) is a tool that enables developers to write [imperative animations with JavaScript](https://www.youtube.com/watch?v=WaNoqBAp8NI). It was written to underpin both CSS animation and transition implementations and enable future effects to be developed, as well as existing effects to be composed and timed.
 
-While it has a long history, originally launching in Chromium 36, the latest release, Chromium 84, brings us a slew of previously unsupported features. 
+While [Firefox](https://mozilla.github.io/standards-positions/) and [Safari](https://webkit.org/status/#specification-web-animations) have already implemented the full set of spec [features](https://caniuse.com/#feat=web-animation), Chromium 84 brings a slew of previously unsupported features to [Chrome and Edge](https://developer.microsoft.com/en-us/microsoft-edge/status/webanimationsjavascriptapi/) enabling cross-browser interoperability.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src='./waapi-timeline.png' alt="The Web Animations API first hit Chromium in version 36, July of 2014. Now the spec is going to be complete, in version 84, launching July 2020.">
-  <figcaption class="w-figcaption">
-    The long history of the Web Animations API.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mdsjLgrX6rngEnBZo5Nu.png", alt="The Web Animations API first hit Chromium in version 36, July of 2014. Now the spec is going to be complete, in version 84, launching July 2020.", width="800", height="374" %}
+  <figcaption>
+    The long history of the Web Animations API in Chromium.
   </figcaption>
 </figure>
 
@@ -48,8 +50,8 @@ would look like [this](https://codepen.io/una/pen/abvYXJX) in JavaScript:
 
 ```js
 const openAnimation = [
-  { transform: 'scale(0)' }, 
-  { transform: 'scale(1)' }, 
+  { transform: 'scale(0)' },
+  { transform: 'scale(1)' },
 ];
 ```
 
@@ -91,7 +93,7 @@ However, with the update, the Web Animations API is no longer restricted to anim
   height: 480
 } %}
 
-You first `"get"` the keyframes for the transition to determine where we are transitioning from. Then, you create two new opacity animations, enabling the   cross fade effect. Once the cross-fade completes, you delete the copy. 
+You first `"get"` the keyframes for the transition to determine where we are transitioning from. Then, you create two new opacity animations, enabling the   cross fade effect. Once the cross-fade completes, you delete the copy.
 
 ## Orchestrating animations with promises
 
@@ -100,13 +102,13 @@ In Chromium 84, you now have two methods that can be used with promises: `animat
 - `animation.ready` enables you to wait for pending changes to take effect (i.e. switching between playback control methods such as play and pause).
 - `animation.finished` provides a means of executing custom JavaScript code when an animation is complete.
 
-Let's continue with our example, and create an orchestrated animation chain with `animation.finished`. Here, you have a vertical transformation (`scaleY`), followed by a horizontal transformation (`scaleX`), followed by an opacity change on a child element: 
+Let's continue with our example, and create an orchestrated animation chain with `animation.finished`. Here, you have a vertical transformation (`scaleY`), followed by a horizontal transformation (`scaleX`), followed by an opacity change on a child element:
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/modal-open.mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     Applying transformations and opacity to an opening modal element. <a href="https://codepen.io/una/pen/dyYKJMz">See Demo on Codepen</a>
   </figcaption>
 </figure>
@@ -122,15 +124,15 @@ Within CSS, this would be cumbersome to recreate, especially when applying uniqu
 
 ### Example: Play, pause, and reverse
 
-What can open, should close! Luckily, since [Chromium 39](https://developers.google.com/web/updates/2014/12/web-animation-playback), the Web Animations API has provided us the ability to play, pause, and reverse our animations.
+What can open, should close! Luckily, since [Chromium 39](https://developer.chrome.com/blog/web-animation-playback/), the Web Animations API has provided us the ability to play, pause, and reverse our animations.
 
 You can take the above animation, and give it a smooth, reversed animation when clicking the button again using `.reverse()`. This way, you can create a smoother and more contextual interaction for our modal.
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/modal-reverse.mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
     An example of a modal opening and closing upon button click. <a href="https://glitch.com/~waapi-promises">See Demo on Glitch </a>
   </figcaption>
 </figure>
@@ -145,20 +147,20 @@ What you can do is create two play-pending animations (`openModal`, and an inlin
 
 ### Example: Dynamic interactions with partial keyframes
 
-<figure class="w-figure">
-<video controls autoplay loop muted class="w-screenshot">
+<figure>
+<video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/retargetting.mp4">
-  </video>  <figcaption class="w-figcaption">
+  </video>  <figcaption>
     Retargeting example, where a mouse click adjusts the animation to a new location. <a href="https://glitch.com/~waapi-retargetting">See Demo on Glitch </a>
   </figcaption>
 </figure>
 
 ```js
-selector.animate([{transform: `translate(${x}px, ${y}px)`}], 
+selector.animate([{transform: `translate(${x}px, ${y}px)`}],
     {duration: 1000, fill: 'forwards'});
 ```
 
-In this example, there is only one keyframe, and no specified start position. This is an example of using **partial keyframes**. The mouse handler does a few things here: it sets a new end location and triggers a new animation. The new start position is inferred from the current underlying position. 
+In this example, there is only one keyframe, and no specified start position. This is an example of using **partial keyframes**. The mouse handler does a few things here: it sets a new end location and triggers a new animation. The new start position is inferred from the current underlying position.
 
 New transitions can be triggered while existing ones are still running. This means that the current transition is interrupted, and a new one is created.
 
@@ -166,11 +168,11 @@ New transitions can be triggered while existing ones are still running. This mea
 
 When creating animations based on events, such as on `'mousemove'`, a new animation is created each time, which can quickly consume memory and degrade performance.  To address this problem, replaceable animations were introduced in Chromium 83, enabling automated cleanup, where finished animations are flagged as replaceable and automatically removed if replaced by another finished animation. Consider the following example:
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/comet-trail.mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
   A comet trail animates when the mouse moves. <a href="https://glitch.com/~waapi-replaced">See Demo on Glitch</a>
   </figcaption>
 </figure>
@@ -208,10 +210,10 @@ With the Web Animations API, you can now set the composite mode of your animatio
 
 When you composite animations, a developer can write short, distinct effects and see them combined together. In the example below, we are applying a rotation and scale keyframe to each box, with the only adjustment being the composite mode, added as an option:
 
-<figure class="w-figure">
-<video controls autoplay loop muted class="w-screenshot">
+<figure>
+<video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/replace-add-accumulate.mp4">
-  </video>  <figcaption class="w-figcaption">
+  </video>  <figcaption>
     A demo showing the default, add, and accumulate composite modes. <a href="https://glitch.com/~waapi-composite-demos">See Demo on Glitch</a>
   </figcaption>
 </figure>
@@ -220,11 +222,11 @@ In the default `'replace'` composite mode, the final animation replaces the tran
 
 Let's take a look at a UI element example:
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/web-animations/dropdown.mp4">
   </video>
-  <figcaption class="w-figcaption">
+  <figcaption>
   A bouncy dropdown menu which has two composited animations applied to it. <a href="https://glitch.com/~waapi-composited">See Demo on Glitch</a>
   </figcaption>
 </figure>
diff --git a/src/site/content/en/blog/web-animations/waapi-timeline.png b/src/site/content/en/blog/web-animations/waapi-timeline.png
deleted file mode 100644
index bf06c4cbf02..00000000000
Binary files a/src/site/content/en/blog/web-animations/waapi-timeline.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-ar/hero2.jpg b/src/site/content/en/blog/web-ar/hero2.jpg
deleted file mode 100644
index f6eb5fe0f16..00000000000
Binary files a/src/site/content/en/blog/web-ar/hero2.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/web-ar/index.md b/src/site/content/en/blog/web-ar/index.md
index 8afff636bea..60ef2047c98 100644
--- a/src/site/content/en/blog/web-ar/index.md
+++ b/src/site/content/en/blog/web-ar/index.md
@@ -4,7 +4,7 @@ subhead: If you've used the WebXR Device API already, you're most of the way the
 authors:
   - joemedley
 date: 2020-02-13
-hero: hero2.jpg
+hero: image/admin/VMTT5zbuFgXWfTj7Hlvv.jpg
 alt: A person using augmented reality with a smartphone.
 description:
   If you've already used the WebXR Device API, you'll be happy to know there's
@@ -17,6 +17,8 @@ tags:
   - augmented-reality
   - virtual-reality
   - webxr
+feedback:
+  - api
 ---
 
 The WebXR Device API shipped last fall in Chrome 79. As stated then, Chrome's
@@ -33,11 +35,11 @@ differences lie in configurations that allow content to be shown appropriately
 for augmented reality. If you're not familiar with the basic concepts of WebXR,
 you should read my earlier posts on the WebXR Device API, or at least be
 familiar with the topics covered therein. You should know how to [request and
-enter a session](https://web.dev/vr-comes-to-the-web/) and you should know how
-to run [a frame loop](https://web.dev/vr-comes-to-the-web-pt-ii).
+enter a session](/vr-comes-to-the-web/) and you should know how
+to run [a frame loop](/vr-comes-to-the-web-pt-ii).
 
 For information on hit testing, see the companion article [Positioning virtual
-objects in real-world views](https://web.dev/ar-hit-test). The code in this
+objects in real-world views](/ar-hit-test). The code in this
 article is based on the Immersive AR Session sample
 ([demo](https://immersive-web.github.io/webxr-samples/immersive-ar-session.html)
 [source](https://github.com/immersive-web/webxr-samples/blob/master/immersive-vr-session.html)) from
@@ -190,7 +192,7 @@ right, up, and backward, respectively.
 
 The coordinates returned by `XRFrame.getViewerPose()` depend on the requested
 [reference space
-type](https://developer.mozilla.org/en-US/docs/Web/API/XRReferenceSpace#Reference_space_types).
+type](https://developer.mozilla.org/docs/Web/API/XRReferenceSpace#Reference_space_types).
 More about that when we get to the frame loop. Right now we need to select a
 reference type that's appropriate for augmented reality. Again, this uses my
 convenience property.
@@ -227,7 +229,7 @@ by moving the device. The modes use different reference space types. The
 highlighted text above shows how this is selected. It uses the following
 reference types:
 
-`local` - The native origin is at the viewer's position at the time of session
+`local` - The origin is at the viewer's position at the time of session
 creation. This means the experience doesn't necessarily have a well-defined
 floor and the exact position of the origin may vary by platform. Though there
 are no pre-established boundaries to the space, it's expected that content can
diff --git a/src/site/content/en/blog/web-bundles/chromeflag.png b/src/site/content/en/blog/web-bundles/chromeflag.png
deleted file mode 100644
index 427d45b7319..00000000000
Binary files a/src/site/content/en/blog/web-bundles/chromeflag.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-bundles/hero.png b/src/site/content/en/blog/web-bundles/hero.png
deleted file mode 100644
index 36f8576d99f..00000000000
Binary files a/src/site/content/en/blog/web-bundles/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-bundles/index.md b/src/site/content/en/blog/web-bundles/index.md
deleted file mode 100644
index fc706b398a8..00000000000
--- a/src/site/content/en/blog/web-bundles/index.md
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: Get started with Web Bundles
-subhead: |
-  Share websites as a single file over Bluetooth and run them offline in your origin's context
-date: 2019-11-11
-hero: hero.png
-alt: The Web Bundle logo
-authors:
-  - uskay
-  - kenjibaheux
-description: |
-  Web Bundles enable you to share websites as a single file over Bluetooth and run them
-  offline in your origin's context.
-tags:
-  - blog
-  - web-bundles
----
-
-Bundling a full website as a single file and making it shareable
-opens up new use cases for the web. Imagine a world where you can:
-
-* Create your own content and distribute it in all sorts of ways without being
-  restricted to the network
-* Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct
-* Carry your site on your own USB or even host it on your own local network
-
-The Web Bundles API is a bleeding edge proposal that lets you do all of this.
-
-## Browser compatibility
-
-The Web Bundles API is currently only supported in Chromium-based browsers behind
-an experimental flag.
-
-## Introducing the Web Bundles API
-
-A Web Bundle is a file format for encapsulating one or more HTTP resources in a
-single file. It can include one or more HTML files, JavaScript files,
-images, or stylesheets.
-
- Web Bundles, more formally known as [Bundled HTTP
- Exchanges](https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html),
- are part of the [Web Packaging](https://github.com/WICG/webpackage)
- proposal.
-
-<figure class="w-figure">
-  <img src="webbundle.png"
-       alt="A figure demonstrating that a Web Bundle is a collection of web resources."
-       style="max-width: 75%">
-  <figcaption class="w-figcaption">
-    How Web Bundles work
-  </figcaption>
-</figure>
-
-HTTP resources in a Web Bundle are indexed by request URLs, and can optionally
-come with signatures that vouch for the resources. Signatures allow browsers to
-understand and verify where each resource came from, and treats each as coming
-from its true origin. This is similar to how [Signed HTTP Exchanges][exchanges],
-a feature for signing a single HTTP resource, are handled.
-
-This article walks you through what a Web Bundle is and how to use one.
-
-## Explaining Web Bundles
-
-To be precise, a Web Bundle is a [CBOR file](https://cbor.io/) with a `.wbn` extension (by convention) which
-packages HTTP resources into a binary format, and is served with the `application/webbundle` MIME
-type. You can read more about this in the [Top-level structure](https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html#top-level)
-section of the spec draft.
-
-Web Bundles have multiple unique features:
-
-* Encapsulates multiple pages, enabling bundling of a complete website into a single file
-* Enables executable JavaScript, unlike MHTML
-* Uses [HTTP Variants](https://tools.ietf.org/id/draft-ietf-httpbis-variants-00.html) to do
-  content negotiation, which enables internationalization with the `Accept-Language`
-  header even if the bundle is used offline
-* Loads in the context of its origin when cryptographically signed by its publisher
-* Loads nearly instantly when served locally
-
-These features open multiple scenarios. One common scenario is the ability to
-build a self-contained web app that's easy to share and usable without an
-internet connection. For example, say you're on an airplane from Tokyo to San Francisco with
-your friend. You don't like the in-flight entertainment. Your friend is playing an interesting
-web game called [PROXX](https://proxx.app/), and tells you that she downloaded the game as a Web
-Bundle before boarding the plane. It works flawlessly offline. Before Web
-Bundles, the story would end there and you would either have to take turns
-playing the game on your friend's device, or find something else to pass the
-time. But with Web Bundles, here's what you can now do:
-
-1. Ask your friend to share the `.wbn` file of the game. For example the file
-   could easily be shared peer-to-peer using a file sharing app.
-2. Open the `.wbn` file in a browser that supports Web Bundles.
-3. Start playing the game on your own device and try to beat your friend's high
-   score.
-
-Here's a video that explains this scenario.
-
-{% YouTube 'xAujz66la3Y' %}
-
-As you can see, a Web Bundle can contain every resource, making it work offline
-and load instantly.
-
-{% Aside %}
-  Currently Chrome 80 only supports unsigned bundles (that is, Web Bundles without
-  origin signatures). Bundling PROXX without signatures doesn't work
-  well due to web worker cross-origin issues. Chrome is working on fixing this. In
-  the meantime, check out [Dealing with Common Problems in Unsigned
-  Bundles](https://chromium.googlesource.com/chromium/src/+/refs/heads/master/content/browser/web_package/using_web_bundles.md#Dealing-with-Common-Problems-in-Unsigned-Bundles)
-  to learn how to avoid cross-origin issues.
-{% endAside %}
-
-## Building Web Bundles
-
-The [`go/bundle`](https://github.com/WICG/webpackage/tree/master/go/bundle) CLI is currently the
-easiest way to bundle a website. `go/bundle` is a reference implementation of the Web Bundles
-specification built in [Go](https://golang.org/).
-
-1. [Install Go](https://golang.org/doc/install).
-1. Install `go/bundle`.
-
-   ```bash
-   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
-   ```
-
-1. Clone the [preact-todomvc](https://github.com/developit/preact-todomvc) repository and build
-   the web app to get ready to bundle the resources.
-
-    ```bash
-    git clone https://github.com/developit/preact-todomvc.git
-    cd preact-todomvc
-    npm i
-    npm run build
-    ```
-
-2. Use the `gen-bundle` command to build a `.wbn` file.
-
-    ```bash
-    gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
-    ```
-
-Congratulations! TodoMVC is now a Web Bundle.
-
-There are other options for bundling and more are coming. The `go/bundle` CLI
-lets you build a Web Bundle using a HAR file or a custom list of resource
-URLs. Visit the [GitHub
-repo](https://github.com/WICG/webpackage/tree/master/go/bundle) to learn more
-about `go/bundle`. You can also try out the experimental Node.js module for bundling,
-[`wbn`](https://www.npmjs.com/package/wbn). Note that `wbn` is still in the early stages of
-development.
-
-## Playing around with Web Bundles
-
-To try out a Web Bundle:
-
-1. Go to `chrome://version` to see what version of Chrome you're running. If you're running version
-   80 or later, skip the next step.
-1. Download [Chrome Canary](https://www.google.com/chrome/canary/) if you're not running Chrome 80
-   or later.
-1. Open `chrome://flags/#web-bundles`.
-1. Set the **Web Bundles** flag to **Enabled**.
-
-   <figure class="w-figure">
-     <img src="chromeflag.png" alt="A screenshot of chrome://flags" style="max-width: 75%">
-     <figcaption class="w-figcaption">
-       Enabling Web Bundles in <code>chrome://flags</code>
-     </figcaption>
-   </figure>
-
-1. Relaunch Chrome.
-1. Drag-and-drop the `todomvc.wbn` file into Chrome if you're on desktop, or tap it in a file
-   management app if you're on Android.
-
-Everything magically works.
-
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/web-bundles/preact-todomvc.mp4"
-            type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
-    The Preact implementation of TodoMVC working offline as a web bundle
-  </figcaption>
-</figure>
-
-You could also try out other sample web bundles:
-
-- [web.dev.wbn](https://storage.googleapis.com/web-dev-assets/web-bundles/web.dev.wbn) is a
-   snapshot of the entire web.dev site, as of 2019 October 15.
-- [proxx.wbn](https://storage.googleapis.com/web-dev-assets/web-bundles/proxx.wbn):
-  [PROXX](/proxx-announce/) is a Minesweeper clone that works offline.
-- [squoosh.wbn](https://storage.googleapis.com/web-dev-assets/web-bundles/squoosh.wbn):
-  [Squoosh](https://squoosh.app) is a convenient and fast image optimization tool that
-  lets you do side-by-side comparisons of various image compression formats, with support for
-  resizing and format conversions.
-
-{% Aside %}
-  Currently you can only navigate into a Web Bundle stored in a local file, but
-  that's only a temporary restriction.
-{% endAside %}
-
-## Send feedback
-
-The Web Bundle API implementation in Chrome is experimental and incomplete.
-Not everything is working and it might fail or crash. That's why
-it's behind an experimental flag. But the API is ready enough for you to explore it in Chrome.
-Feedback from web developers is crucial to the design of
-new APIs, so please try it out and tell the people working on Web Bundles what you think.
-
-* Send general feedback to
-  [webpackage-dev@chromium.org](mailto:webpackage-dev@chromium.org).
-* If you have feedback on the spec visit
-  [https://github.com/WICG/webpackage/issues/new](https://github.com/WICG/webpackage/issues/new)
-  to file a new spec issue, or email [wpack@ietf.org](mailto:wpack@ietf.org).
-* If you find any issues in Chrome's behavior visit
-  [https://crbug.com/new](https://crbug.com/new) to file a Chromium bug.
-* Any contributions to the spec discussion and tooling are also more than
-  welcome. Visit the [spec repo](https://github.com/WICG/webpackage) to get involved.
-
-**Acknowledgements**
-
-We would like to give a big shout-out to the wonderful Chrome engineering team,
-[Kunihiko Sakamoto](https://github.com/irori), [Tsuyoshi
-Horo](https://twitter.com/horo), [Takashi
-Toyoshima](https://twitter.com/toyoshim), [Kinuko
-Yasuda](https://twitter.com/kinu) and [Jeffrey
-Yasskin](https://twitter.com/jyasskin) that worked hard contributing to the
-spec, building the feature on Canary and reviewing this article. During the
-standardization process [Dan York](http://danyork.me/) has helped navigate the
-IETF discussion and also [Dave Cramer](https://twitter.com/dauwhe) has been a
-great resource on what publishers actually need. We also want to thank [Jason
-Miller](https://twitter.com/_developit) for the amazing preact-todomvc and his
-restless effort on making the framework better.
-
-[exchanges]: https://developers.google.com/web/updates/2018/11/signed-exchanges
-[go/bundle]: https://github.com/WICG/webpackage/tree/master/go/bundle
diff --git a/src/site/content/en/blog/web-bundles/webbundle.png b/src/site/content/en/blog/web-bundles/webbundle.png
deleted file mode 100644
index 1245136cd63..00000000000
Binary files a/src/site/content/en/blog/web-bundles/webbundle.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-components-io-2019/hero.jpg b/src/site/content/en/blog/web-components-io-2019/hero.jpg
deleted file mode 100644
index c90684f18e8..00000000000
Binary files a/src/site/content/en/blog/web-components-io-2019/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/web-components-io-2019/index.md b/src/site/content/en/blog/web-components-io-2019/index.md
index 9c9a0ada007..5d741b88ec0 100644
--- a/src/site/content/en/blog/web-components-io-2019/index.md
+++ b/src/site/content/en/blog/web-components-io-2019/index.md
@@ -4,7 +4,7 @@ subhead: Web components at I/O 2019
 authors:
   - arthurevans
 date: 2019-06-18
-hero: hero.jpg
+hero: image/admin/WPxFy8Y2JsLcTD9xKHIH.jpg
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
 # hero_position: bottom
@@ -14,7 +14,7 @@ description: |
   given by Kevin Schaaf of the Polymer Project and Caridy Patiño of Salesforce.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - web-components
+  # - web-components
 ---
 
 
@@ -26,8 +26,8 @@ At Google I/O 2019, Kevin Schaaf of the Polymer Project and Caridy Patiño of Sa
 
 If you've used the web today, you've probably used web components. By our count, somewhere between 5% and 8% of all page loads today use one or more web components. That makes web components one of the most successful new web platform features shipped in the last five years.
 
-<figure class="w-figure w-figure--fullbleed">
-  <img class="w-screenshot" src="./usage-graph.png" alt="A graph showing that 8% of sites use v1 custom elements. This figure eclipses the 5% highpoint for v0 custom elements.">
+<figure data-size="full">
+  {% Img src="image/admin/RYVwr119hwQIps5UL0u4.png", alt="A graph showing that 8% of sites use v1 custom elements. This figure eclipses the 5% highpoint for v0 custom elements.", width="800", height="493" %}
 </figure>
 
 You can find web components on sites you probably use every day, like YouTube and GitHub. They're also used on many news and publishing sites built with [AMP](http://amp.dev)—AMP components are also web components. And many enterprises are also adopting web components.
@@ -77,8 +77,8 @@ AMP is a great example of how quickly and easily Web Components slotted into the
 
 More and more companies are unifying the way they present themselves using a design system—a set of components and guidelines that define the common look and feel for an organization's sites and applications. Web components are a great fit here, too.
 
-<figure class="w-figure w-figure--fullbleed">
-  <img src="./material-design.png" alt="The material design homepage, https://material.io.">
+<figure data-size="full">
+  {% Img src="image/admin/xFG8pvgZDYTWQvx4W5i2.png", alt="The material design homepage, https://material.io.", width="800", height="736" %}
 </figure>
 
 Often, designers have to contend with many teams building their own versions of the design system components on top of React, Angular, and all the other frameworks, instead of having a single set of canonical components.
@@ -117,9 +117,9 @@ If you're building a web app, consider using some of the many off-the-shelf web
 
 *   Google vends its own Material design system as web components: [Material Web Components](https://github.com/material-components/material-components-web-components).
 *   The [Wired Elements](https://wiredjs.com/) are a cool set of web components that feature a sketchy, hand-drawn look.
-*   There are great special-purpose Web Components like [<model-viewer>](https://github.com/GoogleWebComponents/model-viewer), which you can drop into any app to add 3D content.
+*   There are great special-purpose Web Components like [`<model-viewer>`](https://github.com/GoogleWebComponents/model-viewer), which you can drop into any app to add 3D content.
 
-If you're developing a design system for your company, or you're vending a single component or library that you want to be usable in any environment, consider authoring your components using web components. You can use the native web components APIs, but they're pretty low-level, so there are a number of libraries available to make the process easier.
+If you're developing a design system for your company, or you're vending a single component or library that you want to be usable in any environment, consider authoring your components using web components. You can use the built-in web components APIs, but they're pretty low-level, so there are a number of libraries available to make the process easier.
 
 To get started building your own components, you can check out LitElement, a web component base class developed by Google that has a great functional rendering experience similar to React.
 
@@ -142,8 +142,8 @@ More resources:
 
 
 *   [open-wc.org](https://open-wc.org/) features great getting started information, as well as tips and default configurations for build and development tooling.
-*   [Web Fundamentals](https://developers.google.com/web/fundamentals/web-components/) provides primers on the basic web components APIs, and best practices for designing web components.
-*   [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components) provides reference docs for the web components APIs, plus some tutorials. \
+*   [Web Fundamentals](/web-components/) provides primers on the basic web components APIs, and best practices for designing web components.
+*   [MDN](https://developer.mozilla.org/docs/Web/Web_Components) provides reference docs for the web components APIs, plus some tutorials. \
 
 _Hero image by Jason Tuinstra on Unsplash._
 
diff --git a/src/site/content/en/blog/web-components-io-2019/material-design.png b/src/site/content/en/blog/web-components-io-2019/material-design.png
deleted file mode 100644
index c3384d08d5c..00000000000
Binary files a/src/site/content/en/blog/web-components-io-2019/material-design.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-components-io-2019/usage-graph.png b/src/site/content/en/blog/web-components-io-2019/usage-graph.png
deleted file mode 100644
index e15e9d1e9e0..00000000000
Binary files a/src/site/content/en/blog/web-components-io-2019/usage-graph.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-components/index.md b/src/site/content/en/blog/web-components/index.md
new file mode 100644
index 00000000000..3c1565c02d4
--- /dev/null
+++ b/src/site/content/en/blog/web-components/index.md
@@ -0,0 +1,79 @@
+---
+title: Building components
+subhead: Components are the building blocks of modern web applications. What best practices should you follow when building your own components so they can stand the test of time?
+date: 2017-08-14
+updated: 2018-09-20
+description: Components are the building blocks of modern web applications. What best practices should you follow when building your own components so they can stand the test of time?
+tags:
+  - blog
+---
+Components are the building blocks of modern web applications. What best
+practices should you follow when building your own components so they can stand
+the test of time?
+
+
+<div class="switcher">
+<div>
+  <figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d2unXi9wTsX0y2X3bee4.svg", alt="Code icon.", width="24", height="24" %}
+  </figure>
+
+  ## Custom Elements
+
+  Custom elements give developers the ability to extend HTML and create their
+  own tags. Because custom elements are standards based they benefit from the
+  Web's built-in component model. The result is more modular code that can be
+  reused in many different contexts.
+
+  <a href="/custom-elements-v1/" >Learn more</a>
+</div>
+
+<div>
+  <figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pQzEa7Rl3fDmejk5DODq.svg", alt="Boder style icon", width="24", height="24" %}
+  </figure>
+
+  ## Shadow DOM
+
+  Shadow DOM is a web standard that offers component style and markup
+  encapsulation. It is a critically important piece of the Web Components
+  story as it ensures that a component will work in any environment 
+  even if other CSS or JavaScript is at play on the page.
+
+  <a href="/shadowdom-v1/">Learn more</a>
+  
+</div>
+</div>
+
+<div class="switcher">
+<div>
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pQzEa7Rl3fDmejk5DODq.svg", alt="Done icon.", width="24", height="24" %}
+</figure>
+
+## Best Practices
+
+Because custom elements and shadow DOM are low-level primitives, it's not
+always clear how best to combine them to create a component that is robust
+and works well in many different environments. While you really can do just
+about anything with these APIs, here are a few best practices to help ensure
+your components work well anywhere.
+
+  <a href="/custom-elements-best-practices/">Learn more</a>
+
+</div>
+<div>
+  <figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y1iaJxaSJSMfXUxb09tk.svg", alt="Explore icon.", width="24", height="24" %}
+  </figure>
+
+  ## Examples
+
+  HowTo-Components are a set of elements which demonstrate Custom Element
+  and Shadow DOM best practices. These elements are not intended to be used
+  in production, but are instead presented as a teaching aide to help map
+  best practice suggestions to actual implementations.
+
+  <a href="/components-examples-overview/">Learn more</a>
+</div>
+</div>
diff --git a/src/site/content/en/blog/web-dev-io-2019/hero.jpg b/src/site/content/en/blog/web-dev-io-2019/hero.jpg
deleted file mode 100644
index 15b944f8465..00000000000
Binary files a/src/site/content/en/blog/web-dev-io-2019/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/web-dev-io-2019/html5rocks.png b/src/site/content/en/blog/web-dev-io-2019/html5rocks.png
deleted file mode 100644
index 02584cecafb..00000000000
Binary files a/src/site/content/en/blog/web-dev-io-2019/html5rocks.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-dev-io-2019/index.md b/src/site/content/en/blog/web-dev-io-2019/index.md
index dc0217c7038..53fa8563fb2 100644
--- a/src/site/content/en/blog/web-dev-io-2019/index.md
+++ b/src/site/content/en/blog/web-dev-io-2019/index.md
@@ -2,7 +2,7 @@
 title: web.dev at I/O 2019
 subhead: New look. New docs. New blog!
 date: 2019-05-04
-hero: hero.jpg
+hero: image/admin/fQkZjpeFbi9CZ9xHlsdu.jpg
 alt: A group of colorful hot air balloons launching into the sky.
 description: |
   For Google I/O 2019, the folks on the web.dev team have shipped a number of
@@ -26,8 +26,8 @@ plan to ship in the coming months, but we hope you like this new visual style 
 
 ## Improved Lighthouse support
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="/images/collections/lighthouse-performance.svg" alt="" width="200">
+<figure data-float="right">
+  {% Img src="image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/wpGZrgY08B0x6jbLnWPU.svg", alt="Lighthouse performance cover", width="330", height="220" %}
 </figure>
 
 In the Learn section, we've rolled out
@@ -48,8 +48,8 @@ Not that long ago, our team used to produce a site called
 folks coming together to share their collective excitement about what was
 possible on the web.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./html5rocks.png" alt="The HTML5Rocks logo." width="200">
+<figure data-float="right">
+  {% Img src="image/admin/4CTdRl9npyxrlqZHxbdJ.png", alt="The HTML5Rocks logo.", width="280", height="280" %}
 </figure>
 
 As we've been building web.dev, we've often said that we want to bring back some
diff --git a/src/site/content/en/blog/web-filter/index.md b/src/site/content/en/blog/web-filter/index.md
new file mode 100644
index 00000000000..482c9730cd9
--- /dev/null
+++ b/src/site/content/en/blog/web-filter/index.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: Web Filter
+date: 2015-03-24
+updated: 2015-03-24
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ksqXaLIGDbKhes09L8a4.png", alt="Web filter screenshot", width="800", height="1570" %}
+</figure>
+
+### Summary
+
+[Web Filters](http://exp.bartekdrozdz.com/app/webfilter/): Fast, quick and
+dirty camera filters.
+
+Warning: This app is not currently working, `getUserMedia` requires a secure
+context and this page is not served over HTTPS.
+
+### What we like?
+
+A rather awesome web based camera app that lets you apply filters in real
+time.  It automatically saves the image to your local device, which means it
+usually gets synchronized to your cloud storage provider of choice (i.e. G+)
+making it trivial to share the autcome.
+
+### Possible Improvements
+
+The app can be installed to the home screen but at least on Android, the user
+is asked for permission to use the camera every time the app launches. That's
+obviously not an issue on the developer side but on Chrome/Android, and a memo
+to ourselves to fix.
+
+## Q & A with Bartek Drozdz
+
+### Why the web?
+
+I work with the web since Netscape 4, so this is a natural choice for
+any experiment that I do :)
+
+### What worked really well during development?
+
+The mobile browser - Chrome - worked really well. I didn't really have to
+figure out any hacky workarounds for anything. I'm very impressed with the
+performance of WebGL on mobile. It tends to be better than on many desktop
+computers. I think it also was the first time I used WebRTC on mobile. The
+support here is also pretty solid. Finally, it was nice to see that I can
+save/download the photo directly to the users gallery. There is a small issue
+where, if you keep taking photos and downloading them, the browser will issue
+a warning. I can see why this security feature exists, but it would be nice to
+be able to work around that.
+
+### If you could have any API to improve your app, what would it be?
+
+By the time I was working on this, I think Chrome didn't support orientation
+lock. This feature is very important for app dev, because being forced to
+support both portrait and landscape creates a lot extra work, often totally
+unnecessary.
diff --git a/src/site/content/en/blog/web-on-android/hero.svg b/src/site/content/en/blog/web-on-android/hero.svg
deleted file mode 100644
index 531ef572eab..00000000000
--- a/src/site/content/en/blog/web-on-android/hero.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3200" height="960"><svg viewBox="0 0 467.046 250.164"><path d="M293.91 212.775c-6.025 0-10.926-4.905-10.926-10.93s4.901-10.926 10.926-10.926c6.026 0 10.927 4.9 10.927 10.926s-4.901 10.93-10.927 10.93m-120.774 0c-6.025 0-10.926-4.905-10.926-10.93s4.9-10.926 10.926-10.926c6.025 0 10.926 4.9 10.926 10.926s-4.9 10.93-10.926 10.93m124.693-65.82l21.838-37.822a4.548 4.548 0 0 0-1.663-6.206 4.549 4.549 0 0 0-6.206 1.663l-22.111 38.3c-16.91-7.716-35.9-12.015-56.164-12.015-20.264 0-39.254 4.299-56.163 12.015l-22.112-38.3a4.549 4.549 0 0 0-6.206-1.663 4.545 4.545 0 0 0-1.663 6.206l21.838 37.822c-37.499 20.395-63.146 58.358-66.898 103.209h262.408c-3.755-44.85-29.402-82.814-66.898-103.21" fill="#3ddb85"/><path fill="none" d="M0 0h467.046v250.164H0z"/></svg></svg>
\ No newline at end of file
diff --git a/src/site/content/en/blog/web-on-android/index.md b/src/site/content/en/blog/web-on-android/index.md
index e126f5e48fe..eda2c6968d0 100644
--- a/src/site/content/en/blog/web-on-android/index.md
+++ b/src/site/content/en/blog/web-on-android/index.md
@@ -6,13 +6,15 @@ authors:
   - andreban
 date: 2020-07-30
 updated: 2020-08-05
-hero: hero.svg
+hero: image/admin/874Rka3L44UJd5zLIyR5.svg
 alt: Android robot
 description: |
   Learn how different components can be used to render web content inside Android apps.
 tags:
-  - android
+  # - android
   - blog # blog is a required tag for the article to show up in the blog.
+feedback:
+  - api
 ---
 
 
@@ -22,7 +24,7 @@ web inside their own Android Apps. More than that, Android allows developers to
 browser engine into the platform, fostering competition and innovation.
 
 Developers can include the web in their Android applications in many ways. WebView is frequently
-used to render ads, as a layout component used along with native UI elements, or for packaging HTML 5
+used to render ads, as a layout component used along with Android UI elements, or for packaging HTML 5
 games. Custom Tabs allows developers to build in-app browsers and provide a seamless navigation
 experience to third-party web content, and Trusted Web Activity allows developers to use their
 Progressive Web Apps (PWAs) in Android apps, which can be downloaded from the Play Store.
@@ -40,7 +42,7 @@ lacks the security, features, and capabilities of the web platform.
 
 ### The in-app browser challenge
 
-Over time, more and more developers have built brower experiences 
+Over time, more and more developers have built browser experiences
 incorporating third-party content into their Android application, with the goal
 of creating a more seamless experience for their users when navigating to
 third-party websites. Those experiences became known
@@ -49,14 +51,53 @@ as in-app browsers.
 WebView has extensive support for the modern web tech stack and supports many modern web APIs, like
 WebGL. But WebView is primarily a web UI toolkit. It
 [is not meant to - and does not - support all features of the web platform][1]. When an API already
-has a native alternative, like Web Bluetoooth, or it requires browser UI to be implemented, like
+has an OS-level alternative, like Web Bluetooth, or it requires browser UI to be implemented, like
 push notifications, it may not be supported. As the web platform evolves and adds more features
-that were only available to native apps, this gap will become even larger. As app developers don't
+that were only available to Android apps, this gap will become even larger. As app developers don't
 control which features are used when opening third-party content, it makes WebView a poor choice
 for in-app browsers or opening Progressive Web Apps. Even if WebView implemented support for all
 web platform features, developers would still need to write code and implement their own UI for
 functionality like permissions or push notifications, making it hard to achieve consistency for
-users. 
+users.
+
+#### Security Considerations for using WebView as an in-app browser
+
+WebView gives the embedder application full access to the rendered content, including cookies and
+the DOM. Those are powerful features that require a high level of trust from users.
+
+Since WebView is not intended as a framework for building browsers, it lacks security features
+available in modern browsers.
+
+##### Multi-process architecture and site isolation
+
+Browsers are designed to be secure while rendering and executing content that is untrusted. To
+ensure the user stays safe while navigating content that is potentially untrustworthy or even
+malicious, modern browsers employ techniques such as using [multi-process architecture][9] and
+[site isolation][10].
+
+Without the multi-process architecture, a crash caused by the web page can crash the entire browser app, or
+a vulnerability can be exploited to take control of the entire device. Site isolation adds another
+layer of security that makes it harder for untrustworthy sites to access and steal information from
+other sites.
+
+Until Android 8.0 Oreo, the WebView renderer used the same process as the embedder application. On
+newer versions of the OS, and when devices are capable enough, the renderer runs in a different
+process. However, a single process is still shared between all pages and WebView instances running
+them, making it impossible to fully implement site isolation.
+
+The lack of a multi-process architecture and site isolation is not an issue for applications that
+render content that they own and trust, but can be a problem for applications running untrusted
+third-party content, like in-app browsers, and leaves users exposed to vulnerabilities like
+[Meltdown][11] and [Spectre][12], which could be used for stealing cookies, banking details,
+personal information, and more.
+
+##### Secure UI Indicators
+
+It is also important to provide good security indicators to users, and browsers put a lot of effort
+and are [always evolving][13] in this area. However, the WebView lacks an API for checking if a
+site's connection is secure that allows application developers to build trustworthy security
+indicators. The lack of such an API could cause, for instance, a URL displayed in the address bar to
+not match the page displayed to the user, even over secure HTTPS connections.
 
 Another option available to developers is embedding a browser engine in their application. Besides
 leading to increased application size, this approach is both complex and time-consuming.
@@ -83,8 +124,8 @@ browser powering it.
 
 ### Open Progressive Web Apps using Trusted Web Activity
 
-[Progressive Web Apps][4] bring many behaviours and capabilities that were once only available to
-native apps to the web. With the introduction of app-like behaviour, the desire from developers to
+[Progressive Web Apps][4] bring many behaviors and capabilities that were once only available to
+platform-specific apps to the web. With the introduction of app-like behaviour, the desire from developers to
 re-use those experiences on Android increased, and developers started asking for ways to integrate
 PWAs into their apps.
 
@@ -100,7 +141,7 @@ but introduces APIs that allow developers to verify (through [Digital Asset Link
 control both the Android app and the URL being opened and remove the URL bar when both are true.
 
 They also introduced APIs for creating splash screens when opening the PWA or delegating web
-notifications to be handled by native code. More features like support for Play Billing are coming
+notifications to be handled by Android code. More features like support for Play Billing are coming
 soon.
 
 Since URLs opened in Trusted Web Activities are expected to be PWAs and have a set of behaviors and
@@ -127,11 +168,11 @@ doesn't use more advanced features and capabilities available on the modern web
 Notifications, Web Bluetooth and others. It is not recommended when opening content that has been
 designed for the modern web platform, as it may not be displayed in the way the developer intended.
 WebView is not recommended for creating in-app browsers. On the other hand displaying first-party
-web content is an area where WebViews really shine. 
+web content is an area where WebViews really shine.
 
 Trusted Web Activity should be used when the developers want to render their own Progressive Web
 App in fullscreen inside their Android application. It can be used as the only activity in the app
-or used along with other native activities.
+or used along with other Android activities.
 
 Custom Tabs is the recommended way for opening third-party content that is designed for the web
 platform, also known as in-app browsers.
@@ -139,8 +180,13 @@ platform, also known as in-app browsers.
 [1]: https://research.google/pubs/pub46739/
 [2]: https://android-developers.googleblog.com/2015/09/chrome-custom-tabs-smooth-transition.html
 [3]: https://developer.android.com/reference/androidx/browser/customtabs/package-summary
-[4]: https://web.dev/progressive-web-apps/
-[5]: https://developers.google.com/web/android/trusted-web-activity/
-[6]: https://web.dev/using-a-pwa-in-your-android-app/
+[4]: /progressive-web-apps/
+[5]: https://developer.chrome.com/docs/android/trusted-web-activity/
+[6]: /using-a-pwa-in-your-android-app/
 [7]: https://developers.google.com/digital-asset-links
-[8]: https://web.dev/using-a-pwa-in-your-android-app/#quality-criteria
+[8]: /using-a-pwa-in-your-android-app/#quality-criteria
+[9]: https://blog.chromium.org/2008/09/multi-process-architecture.html
+[10]: https://www.chromium.org/Home/chromium-security/site-isolation
+[11]: https://en.wikipedia.org/wiki/Meltdown_(security_vulnerability)
+[12]: https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)
+[13]: https://blog.chromium.org/2018/05/evolving-chromes-security-indicators.html
diff --git a/src/site/content/en/blog/web-otp-iframe/index.md b/src/site/content/en/blog/web-otp-iframe/index.md
new file mode 100644
index 00000000000..e646520735b
--- /dev/null
+++ b/src/site/content/en/blog/web-otp-iframe/index.md
@@ -0,0 +1,196 @@
+---
+title: Fill OTP forms within cross-origin iframes with WebOTP API
+subhead: WebOTP API can now receive OTPs from within iframes.
+authors:
+  - yigu
+  - agektmr
+date: 2021-04-21
+hero: image/YLflGBAPWecgtKJLqCJHSzHqe2J2/cjCJPMZpWEK9MgnH3MK1.jpg
+alt: A man entering the credit card number on a computer.
+
+description: |
+  WebOTP API can now receive an OTP from within an iframe.
+
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - identity
+  - capabilities
+feedback:
+  - api
+---
+SMS OTPs (one-time passwords) are commonly used to verify phone numbers, for
+example as a second step in authentication, or to verify payments on the web. 
+However, switching between the browser and the SMS app, to copy-paste or manually
+enter the OTP makes it easy to make mistakes and adds friction to the user experience.
+
+The [WebOTP API](/web-otp) gives websites the ability to programmatically
+obtain the one-time password from a SMS message and enter it
+automatically in the form for the users with just one tap without switching the
+app. The SMS is specially-formatted and bound to the origin, so it mitigates
+chances for phishing websites to steal the OTP as well.
+
+One use case that has yet to be supported in WebOTP was targeting an origin
+inside an iframe. This is typically used for payment confirmation, especially
+with [3D Secure](https://en.wikipedia.org/wiki/3-D_Secure). Having [the common
+format to support cross-origin
+iframes](https://wicg.github.io/sms-one-time-codes/), WebOTP API now delivers
+OTPs bound to nested origins starting in Chrome 91.
+
+## How WebOTP API works
+
+WebOTP API itself is simple enough:
+
+```js
+…
+  const otp = await navigator.credentials.get({
+    otp: { transport:['sms'] }
+  });
+…
+```
+
+The SMS message must be [formatted with the origin-bound one-time
+codes](/web-otp/#format).
+
+```text
+Your OTP is: 123456.
+
+@web-otp.glitch.me #12345
+```
+
+Notice that at the last line it contains the origin to be bound to preceded with
+a `@` followed by the OTP preceded with a `#`.
+
+When the text message arrives, an info bar pops up and prompts the user to
+verify their phone number. After the user clicks the `Verify` button, the
+browser automatically forwards the OTP to the site and resolves the
+`navigator.credentials.get()`. The website can then extract the OTP and complete
+the verification process.
+
+Learn the basics of using WebOTP at [Verify phone numbers on the web with the
+WebOTP API](/web-otp/).
+
+## Cross-origin iframes use cases
+
+Entering an OTP in a form within a cross-origin iframe is common in payment
+scenarios. Some credit card issuers require an additional verification step to
+check the payer's authenticity. This is called 3D Secure and the form is
+typically exposed within an iframe on the same page as if it's a part of the
+payment flow.
+
+For example:
+
+* A user visits `shop.example` to purchase a pair of shoes with a credit card.
+* After entering the credit card number, the integrated payment provider shows a
+  form from `bank.example` within an iframe asking the user to verify their
+  phone number for fast checkout.
+* `bank.example` sends an SMS that contains an OTP to the user so that they can
+  enter it to verify their identity.
+
+## How to use WebOTP API from a cross-origin iframe
+
+To use WebOTP API from within a cross-origin iframe, you need to do two
+things:
+
+* Annotate both the top-frame origin and the iframe origin in the SMS text
+  message.
+* Configure permissions policy to allow the cross-origin iframe to receive OTP
+  from the user directly.
+
+<figure>
+{% Video
+  src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/Ba3OSkSsB4NwFkHGOuvc.mp4",
+  autoplay="true",
+  controls="true",
+  loop="true",
+  muted="true",
+  preload="auto",
+  width="300",
+  height="600" %}
+  <figcaption>
+    WebOTP API within an iframe in action.
+  </figcaption>
+</figure>
+
+You can try the demo yourself at
+[https://web-otp-iframe-demo.stackblitz.io](https://web-otp-iframe-demo.stackblitz.io).
+
+### Annotate bound-origins to the SMS text message
+
+When WebOTP API is called from within an iframe, the SMS text message must
+include the top-frame origin preceded by `@` followed by the OTP preceded by `#`
+followed by the iframe origin preceded by `@`.
+
+```text
+@shop.example #123456 @bank.exmple
+```
+
+### Configure Permissions Policy
+
+To use WebOTP in a cross-origin iframe, the embedder must grant access to this
+API via otp-credentials [permissions policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) to avoid unintended
+behavior. In general there are two ways to achieve this goal:
+
+- via HTTP Header:
+
+```http
+Permissions-Policy: otp-credentials=(self "https://bank.example")
+```
+
+- via iframe `allow` attribute:
+
+```html
+<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
+```
+
+See [more examples on how to specify a permission policy
+](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/#example-permissions-policy-setups/).
+
+### Caveats
+
+#### Nesting levels
+
+At the moment Chrome only supports WebOTP API calls from cross-origin iframes
+that have **no more than one** unique origin in its ancestor chain. In the
+following scenarios:
+
+* a.com -> b.com
+* a.com -> b.com -> b.com
+* a.com -> a.com -> b.com
+* a.com -> b.com -> c.com
+
+using WebOTP in b.com is supported but using it in c.com is not.
+
+Note that the following scenario is also not supported because of lack of demand
+and UX complexities.
+
+* a.com -> b.com -> a.com (calls WebOTP API)
+
+## Interoperability
+
+While browser engines other than Chromium do not implement the WebOTP API,
+Safari shares the same [SMS format](https://wicg.github.io/sms-one-time-codes/)
+with its `input[autocomplete="one-time-code"]` support. In Safari, as soon as an
+SMS that contains an origin-bound one-time code format arrives with the matched
+origin, the keyboard suggests to enter the OTP to the input field.
+
+As of April 2021, Safari supports iframe with [a unique SMS format using
+`%`](https://github.com/WICG/sms-one-time-codes/issues/4#issuecomment-709557866).
+However, as the spec discussion concluded to go with `@` instead, we hope the
+implementation of supported SMS format will converge.
+
+## Feedback
+
+Your feedback is invaluable in making WebOTP API better, so go on and try it out
+and [let us know](https://bugs.chromium.org/p/chromium/issues/detail?id=1136506)
+what you think.
+
+## Resources
+
+* [Verify phone numbers on the web with the Web OTP
+  API](/web-otp/)
+* [SMS OTP form best practices](/sms-otp-form/)
+* [WebOTP API](https://wicg.github.io/web-otp/)
+* [Origin-bound one-time codes delivered via
+  SMS](https://wicg.github.io/sms-one-time-codes/)
+
+Photo by [rupixen.com](https://unsplash.com/@rupixen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/online-payment?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/en/blog/web-otp/diagram.png b/src/site/content/en/blog/web-otp/diagram.png
deleted file mode 100644
index 620aac97974..00000000000
Binary files a/src/site/content/en/blog/web-otp/diagram.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-otp/hero.png b/src/site/content/en/blog/web-otp/hero.png
deleted file mode 100644
index 6c2277f8c1e..00000000000
Binary files a/src/site/content/en/blog/web-otp/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-otp/index.md b/src/site/content/en/blog/web-otp/index.md
deleted file mode 100644
index facb5138792..00000000000
--- a/src/site/content/en/blog/web-otp/index.md
+++ /dev/null
@@ -1,393 +0,0 @@
----
-title: Verify phone numbers on the web with the Web OTP API
-subhead: Help users with OTPs received through SMS
-authors:
-  - agektmr
-date: 2019-10-07
-updated: 2020-06-11
-hero: hero.png
-alt: A drawing of a woman using OTP to log in to a web app.
-
-description: |
-  Finding, memorizing, and typing OTPs sent via SMS is cumbersome. The
-  Web OTP API simplifies the OTP workflow for users.
-
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - identity
-  - capabilities
-  - otp
----
-
-## What is the Web OTP API?
-
-These days, most people in the world own a mobile device and developers are
-commonly using phone numbers as an identifier for users of their services.
-
-There are a variety of ways to verify phone numbers, but a randomly generated
-one-time password (OTP) sent by SMS is one of the most common. Sending this code
-back to the developer's server demonstrates control of the phone number.
-
-{% Aside %}
-The Web OTP API was originally called the SMS Receiver API. You may still see it
-named that way in some places. If you used that API, you should still read this
-article. [There are significant differences](#differences) between the current
-and earlier versions of the API.
-{% endAside %}
-
-This idea is already deployed in many scenarios to achieve:
-
-* **Phone number as an identifier for the user.** When signing up for a new
-  service, some websites ask for a phone number instead of an email address and
-  use it as an account identifier.
-* **Two step verification.** When signing in, a website asks for a one-time code
-  sent via SMS on top of a password or other knowledge factor for extra
-  security.
-* **Payment confirmation.** When a user is making a payment, asking for a
-  one-time code sent via SMS can help verify the person's intent.
-
-The current process creates friction for users. Finding an OTP within an SMS
-message, then copying and pasting it to the form is cumbersome, lowering
-conversion rates in critical user journeys. Easing this has been a long standing
-request for the web from many of the largest global developers. Android has [an
-API that does exactly
-this](https://developers.google.com/identity/sms-retriever/). So does
-[iOS](https://developer.apple.com/documentation/security/password_autofill/about_the_password_autofill_workflow)
-and
-[Safari](https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element).
-
-The Web OTP API lets your app receive specially-formatted messages bound to
-your app's origin. From this, you can programmatically obtain an OTP from an SMS
-message and verify a phone number for the user more easily.
-
-{% Aside 'warning' %}
-Attackers can spoof SMS and hijack a person's phone number. Carriers can also
-recycle phone numbers to new users after an account is closed. While SMS OTP is
-useful to verify a phone number for the use cases above, we recommend using
-additional and stronger forms of authentication (such as multiple factors and
-the [Web Authentication
-API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API) to
-establish new sessions for these users.
-{% endAside %}
-
-## Current status
-
-The table below explains the current status of the Web OTP API.
-
-<table>
-<tr>
-<th markdown="block">
-Step
-</th>
-<th markdown="block">
-Status
-</th>
-</tr>
-<tr>
-<td markdown="block">
-1. Create explainer
-</td>
-<td markdown="block">
-<a href="https://github.com/WICG/WebOTP/blob/master/explainer.md">Complete</a>
-</td>
-</tr>
-<tr>
-<td markdown="block">
-2. Create initial draft of specification
-</td>
-<td markdown="block">
-<a href="https://wicg.github.io/WebOTP/">Complete</a>
-</td>
-</tr>
-<tr>
-<td markdown="block">
-3. Gather feedback and iterate on design
-</td>
-<td markdown="block">
-Complete
-</td>
-</tr>
-<tr>
-<td markdown="block">
-4. Origin trial
-</td>
-<td markdown="block">
-Complete
-</td>
-</tr>
-<tr>
-<td markdown="block">
-<strong>5. Launch</strong>
-</td>
-<td markdown="block">
-Chrome 84
-</td>
-</tr>
-</table>
-
-## Changes from earlier versions
-
-Early versions of this API were called SMS Receiver. If you are famillar with
-that version of the API be aware of the changes made to it. Improvements from
-SMS Receiver API include:
-
-* The SMS message format is now aligned with WebKit's.
-* The web page only receives an OTP code regardless of whatever else is in the
-  message.
-* The browser's application hash code is no longer required in the message.
-
-## See it in action
-
-Let's say a user wants to verify their phone number with a website. The website
-sends a text message to the user over SMS and the user enters the OTP from the
-message to verify the ownership of the phone number.
-
-With the Web OTP API, these steps are as easy as one tap for the user, as
-demonstrated in the video. When the text message arrives, a bottom sheet pops up
-and prompts the user to verify their phone number. After clicking the **Verify**
-button on the bottom sheet, the browser pastes the OTP into the form and the
-form is submitted without the user needing to press **Continue**.
-
-<video autoplay loop muted playsinline>
-  <source src="https://storage.googleapis.com/web-dev-assets/web-otp/demo.mp4" type="video/mp4">
-  <source src="https://storage.googleapis.com/web-dev-assets/web-otp/demo.webm" type="video/webm">
-</video>
-
-The whole process is diagrammed in the image below.
-
-<figure class="w-figure">
-  <img src="./diagram.png" width="494" height="391" />
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    Web OTP API diagram
-  </figcaption>
-</figure>
-
-Try [the demo](https://web-otp-demo.glitch.me) yourself. It doesn't ask for
-your phone number or send an SMS to your device, but you can send one from
-another device by copying the text displayed in the demo. This works because it
-doesn't matter who the sender is when using the Web OTP API.
-
-1. Go to
-   [https://web-otp-demo.glitch.me](https://web-otp-demo.glitch.me) in Chrome 84 or later.
-1. Press **Copy** to copy the text message.
-1. Using your SMS app send it to another phone.
-1. Press **Verify**.
-1. From the other phone, send yourself the copied text message via SMS.
-
-Did you receive the SMS and see the prompt to enter the code to the input area?
-That is how the Web OTP API works for users.
-
-{% Aside 'caution' %}
-* If the sender's phone number is included in the receiver's contact list, this API
-  will not be triggered due to the design of the underlying [SMS
-User Consent  API](https://developers.google.com/identity/sms-retriever/user-consent/request#2_start_listening_for_incoming_messages).
-* If you are using a work profile on your Android device and the Web OTP does
-  not work, try installing and using Chrome on your personal profile instead
-  (i.e. the same profile in which you receive SMS messages).
-{% endAside %}
-
-## Use the Web OTP API
-
-Using the Web OTP API consists of two parts: JavaScript in your web app and
-formatted message text sent via SMS. I'll cover the JavaScript first.
-
-{% Aside %}
-The Web OTP API requires a secure origin (HTTPS).
-{% endAside %}
-
-### Feature detection
-
-Feature detection is the same as for many other APIs:
-
-```js
-if ('OTPCredential' in window) {
-  ...
-}
-```
-
-### Process the OTP
-
-The Web OTP API itself is simple enough. Use
-[`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get)
-to obtain the OTP. Web OTP adds a new `otp` option to that method. It only has
-one property: `transport`, whose value must be an array with the string `'sms'`.
-
-```js
-const content = await navigator.credentials.get({
-  otp: {
-    transport:['sms']
-  }
-});
-```
-
-This triggers the browser's permission flow when an SMS message arrives. If permission is
-granted, the returned promise resolves with an `OTPCredential` object.
-
-```json
-{
-  code: "123456" // Obtained OTP
-  type: "otp"  // `type` is always "otp"
-}
-```
-
-Next, pass the OTP value to an `input` field and submit it on behalf of the user.
-
-```js
-document.querySelector('#input').value = content.code;
-```
-
-### Aborting the message {: #aborting }
-
-To set a timeout that aborts the `get()` call, pass an `AbortController`
-instance in the [`options`
-object](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get#Parameters).
-
-```js
-const abortController = new AbortController();
-let timer = setTimeout(() => {
-  abortController.abort();
-}, 10 * 1000);
-
-const content = await navigator.credentials.get({
-  otp: { transport:['sms'] },
-  signal: abortController.signal
-});
-```
-
-### Use the API declaratively
-
-The code below demonstrates a Web Component that extends `input`.
-
-```js
-if ('customElements' in window && 'OTPCredential' in window) {
-  customElements.define("one-time-code",
-    class extends HTMLInputElement {
-      connectedCallback() {
-        this.abortController = new AbortController();
-        this.receive();
-      }
-      disconnectedCallback() {
-        this.abort();
-      }
-      abort() {
-        this.abortController.abort();
-      }
-      async receive() {
-        try {
-          const content = await navigator.credentials.get({
-            otp: {transport:['sms']}, signal: this.abortController.signal
-          });
-          this.value = content.code;
-          this.dispatchEvent(new Event('autocomplete'));
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    }, {
-      extends: "input"
-  });
-}
-```
-
-After this declaration you can add `is="one-time-code"` to any `input` element.
-As soon as the element is added to the document tree, it starts waiting
-for SMS messages to arrive and emits an `autocomplete` event as soon
-as an OTP is passed.
-
-```html
-<form>
-  <input is="one-time-code" autocomplete="one-time-code" required/>
-  <input type="submit">
-</form>
-```
-
-```js
-const otp = document.querySelector('#otp');
-otp.addEventListener('autocomplete', e => {
-  this.form.submit();
-});
-```
-
-### Format the SMS message {: #format }
-
-The API itself should look simple enough, but a critical part is to
-format your SMS text message according to a specific convention. The message has
-to be sent after `navigator.credentials.get()` is called and must comply with the
-formatting convention.
-
-The SMS message must be received on the device where `navigator.credentials.get()`
-was called.
-
-The message must adhere to the following formatting:
-
-* The host part of the URL of the website that invoked the API must be
-  preceded by `@`.
-* The URL must contain a pound sign ('`#`') followed by the OTP.
-* Optionally, the message may contain additional text for the user.
-
-For example:
-
-```text
-Your OTP is: 123456.
-
-@www.example.com #123456
-```
-
-### Demos
-
-Try various messages with the demo:
-[https://web-otp-demo.glitch.me](https://web-otp-demo.glitch.me)
-
-You may also fork it and create your version:
-[https://glitch.com/edit/#!/web-otp-demo](https://glitch.com/edit/#!/web-otp-demo).
-
-### Problem with the implementation?
-
-Did you find a bug with Chrome's implementation?
-
-* File a bug at
-  [https://new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ESMS).
-  Include as much detail as you can, simple instructions for reproducing, and
-  set **Components** to `Blink>SMS`.
-
-### Planning to use the API?
-
-Are you planning to use the Web OTP API? Your public support helps us prioritize
-features, and shows other browser vendors how critical it is to support them.
-Send a Tweet to [@ChromiumDev](https://twitter.com/chromiumdev) with
-`#webotp` and let us know where and how you're using it.
-
-## Differences from SMS Receiver API {: #differences }
-Consider Web OTP API an evolved version of the SMS Receiver API. Web OTP API has
-a few significant differences compared to the SMS Receiver API.
-
-* The [expected text format](#format) for the SMS message has changed.
-* It no longer requires an app hash string to be included in the SMS message.
-* The method called is now `navigator.credentials.get()` rather than
-  `navigator.sms.receive()`.
-* The `get()` receives only the OTP rather than the entire SMS message as
-  `receive()` did before.
-* It's now possible to [abort the call to `get()`](#aborting).
-
-## FAQ
-### Is this API compatible between different browsers?
-
-Chromium and WebKit agreed on the SMS text message format. Find WebKit's
-documentation here:
-[Delivering origin-bound one-time codes over SMS](https://github.com/wicg/sms-one-time-codes)
-
-
-### Is it safe to use SMS as a way to authenticate?
-
-While SMS OTP is useful to verify a phone number when the number is first
-provided, phone number verification via SMS must be used carefully for
-re-authentication since phone numbers can be hijacked and recycled by carriers.
-Web OTP is a convenient re-auth and recovery mechanism, but services should
-combine it with additional factors, such as a knowledge challenge, or use the
-[Web Authentication
-API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)
-for strong authentication.
-
-{% Aside %}
-Find more questions at [the FAQ section in the explainer](https://github.com/WICG/WebOTP/blob/master/FAQ.md).
-{% endAside %}
diff --git a/src/site/content/en/blog/web-payments-updates/hero.jpg b/src/site/content/en/blog/web-payments-updates/hero.jpg
deleted file mode 100644
index c73009dc7e4..00000000000
Binary files a/src/site/content/en/blog/web-payments-updates/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/web-payments-updates/index.md b/src/site/content/en/blog/web-payments-updates/index.md
index 1e1858d414b..75b56f1ac95 100644
--- a/src/site/content/en/blog/web-payments-updates/index.md
+++ b/src/site/content/en/blog/web-payments-updates/index.md
@@ -6,8 +6,8 @@ authors:
   - danyao
   - agektmr
 date: 2019-06-13
-hero: hero.jpg
-alt: Transfering money from a phone
+hero: image/admin/BBvuUcrVtDPtSK0R1x3v.jpg
+alt: Transferring money from a phone
 description: |
   Since the launch of the Payment Request API in Chrome 53 and the Payment
   Handler API in Chrome 68, there have been quite a few changes made to their
@@ -15,7 +15,9 @@ description: |
   continue accumulating those API changes.
 tags:
   - blog # blog is a required tag for the article to show up in the blog.
-  - payment
+  # - payment
+feedback:
+  - api
 ---
 
 Web Payments have been publicly available in browsers since 2016. The core
@@ -33,7 +35,7 @@ those updates and will continue accumulating those API changes.
 
 {% Aside 'note' %}
 If you want to subscribe to further upcoming changes to
-Chrome's Web Payments implementation, please join the [Public Payment Request
+Chrome's Web Payments implementation, join the [Public Payment Request
 Announcements
 group](https://groups.google.com/a/chromium.org/forum/#!forum/paymentrequest).
 
@@ -42,7 +44,7 @@ Alternatively, join the
 updates. You may ask questions there as well.
 
 If you want to check older updates to Chrome, head over to
-["Changes in the Payment Request API" article at Web Fundamentals](https://developers.google.com/web/updates/2017/01/payment-request-updates).
+["Changes in the Payment Request API" article at Web Fundamentals](https://developer.chrome.com/blog/payment-request-updates/).
 {% endAside %}
 
 ## New method: `hasEnrolledInstrument()`
diff --git a/src/site/content/en/blog/web-performance-made-easy/index.md b/src/site/content/en/blog/web-performance-made-easy/index.md
new file mode 100644
index 00000000000..ed2e805cee1
--- /dev/null
+++ b/src/site/content/en/blog/web-performance-made-easy/index.md
@@ -0,0 +1,784 @@
+---
+layout: post
+title: Web Performance Made Easy - Google I/O 2018 edition
+subhead: At Google IO 2018, we presented a roundup of tools, libraries and optimization techniques that make improving web performance easier. Here we explain them using The Oodles Theater app. We also  talk about our experiments with predictive loading and the new Guess.js initiative.
+date: 2018-08-21
+updated: 2018-08-21
+authors:
+  - ewagasperowicz
+  - addyosmani
+
+description: |
+  At Google IO 2018, we presented a roundup of tools, libraries and optimization techniques that make improving web performance easier. Here we explain them using The Oodles Theater app. We also  talk about our experiments with predictive loading and the new Guess.js initiative.
+tags:
+  - blog
+  - ux
+  - performance
+  - lighthouse
+
+---
+
+We've been pretty busy over the past year trying to figure out how to make the Web faster and
+more performant. This led to new tools, approaches and libraries that we’d like share with you
+in this article. In the first part, we’ll show you some optimization techniques we used in practice
+when developing [The Oodles Theater app](https://github.com/google/oodle-demo). In the second part,
+we’ll talk about our experiments with predictive loading and the new
+[Guess.js](https://github.com/guess-js/guess) initiative.
+
+{% Aside %}
+Prefer a video to an article? You can watch the presentation on which this
+was based instead:
+{% endAside %}
+
+{% YouTube id="Mv-l3-tJgGk" %}
+
+## The need for performance
+
+The Internet gets heavier and heavier every year. If we check
+[the state of the web](https://httparchive.org/reports/state-of-the-web) we can see that a median
+page on mobile weights at about 1.5MB, with the majority of that being JavaScript and images.
+
+The growing size of the websites, together with other factors, like network latency,
+CPU limitations, render blocking patterns or superfluous third-party code, contributes to
+the complicated performance puzzle.
+
+Most users rate speed as being at the very top of the UX hierarchy of their needs. This isn't too
+surprising, because you can't really do a whole lot until a page is finished loading. You can't
+derive value from the page, you can't admire its aesthetics.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Z1NCy55gqEtPfksngiqo.png", alt="UX hierarchy piramide", width="800", height="338" %}
+  <figcaption>
+    <strong>Fig. 1.</strong> How important is speed to users? (Speed Matters, Vol. 3)
+  </figcaption>
+</figure>
+
+We know that performance matters to the users, but it can also feel like a secret discovering
+where to start optimizing. Fortunately, there are tools that can help you on the way.
+
+## Lighthouse - a base for performance workflow
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is a part of Chrome DevTools
+that allows you to make an audit of your website, and gives you hints on how to make it better.
+
+We recently launched a bunch of
+[new performance audits](https://developer.chrome.com/blog/lighthouse-load-performance/)
+that are really useful in everyday development workflow.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fnXQDZFYbg9SDNagLlew.png", alt="New Lighthouse audits", width="800", height="347" %}
+  <figcaption>
+    <strong>Fig. 2.</strong> New Lighthouse audits
+  </figcaption>
+</figure>
+
+Let’s explore how you can take advantage of them on a practical example:
+[The Oodles Theater app](https://oodle-demo.firebaseapp.com/). It’s a little demo web app,
+where you can try out some of our favourite interactive Google Doodles and even play a game or two.
+
+While building the app, we wanted to make sure that it was as performant as possible. The starting
+point for optimization was a Lighthouse report.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/euuEKKlTGjpPfLVdyN1i.png", alt="Lighthouse report for Oodles app", width="800", height="490" %}
+  <figcaption>
+    <strong>Fig. 3.</strong> Lighthouse report for Oodles app
+  </figcaption>
+</figure>
+
+The initial performance of our app as seen on Lighthouse report was pretty terrible.
+On a 3G network, the user needed to wait for 15 seconds for the first meaningful paint, or for
+the app to get interactive. Lighthouse highlighted a ton of issues with our site, and the overall
+performance score of **23** mirrored exactly that.
+
+The page weighted about **3.4MB** - we desperately needed to cut some fat.
+
+This started our first performance challenge: find things that we can easily remove without
+affecting the overall experience.
+
+## Performance optimization opportunities
+
+### Remove unnecessary resources
+
+There are some obvious things that can be safely removed:  whitespace and comments.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/fX7mxoJmL1y6ZYTuSp6A.png", alt="Gains from minification", width="586", height="325" %}
+  <figcaption>
+    <strong>Fig. 4.</strong> Minify and compress JavaScript and CSS
+  </figcaption>
+</figure>
+
+Lighthouse highlights this opportunity in the **Unminified CSS & JavaScript audit**. We were using
+webpack for our build process, so in order to get minification we simply used the
+[Uglify JS plugin](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/).
+
+Minification is a common task, so you should be able to find a ready-made solution for whichever
+build process you happen to use.
+
+Another useful audit in that space is **Enable text compression**. There is no reason to
+send uncompressed files, and most of
+the [CDNs](https://developer.mozilla.org/docs/Glossary/CDN) support this out of the
+box these days.
+
+We were using [Firebase Hosting](https://firebase.google.com/docs/hosting/) to host our code,
+and Firebase enables [gzipping](https://www.gnu.org/software/gzip/) by default, so by the sheer
+virtue of hosting our code on a reasonable CDN we got that for free.
+
+While gzip is a very popular way of compressing, other mechanisms like
+[Zopfli](https://github.com/google/zopfli) and [Brotli](https://github.com/google/brotli) are
+getting traction as well. Brotli enjoys support in most browsers, and you can use a binary
+to pre-compress your assets before sending them to the server.
+
+### Use efficient cache policies
+
+Our next step was to ensure that we don’t send resources twice if unnecessary.
+
+The **Inefficient cache policy** audit in Lighthouse helped us notice that we could be optimizing
+our caching strategies in order to achieve exactly that. By setting a max-age expiration header
+in our server, we made sure that on a repeated visit the user can reuse the resources they have
+downloaded before.
+
+Ideally you should aim at caching as many resources as securely possible for the longest possible
+period of time and provide validation tokens for efficient revalidation of the resources
+that got updated.
+
+### Remove unused code
+
+So far we removed the obvious parts of the unnecessary download, but what about the less obvious
+parts? For example, unused code.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1FjR76i7lLptY08Djx1R.png", alt="Code coverage in DevTools", width="800", height="275" %}
+  <figcaption>
+    <strong>Fig. 5.</strong> Check code coverage
+  </figcaption>
+</figure>
+
+Sometimes we include in our apps code that is not really necessary. This happens especially
+if you work on your app for a longer period of time, your team or your dependencies change,
+and sometimes an orphan library gets left behind. That's exactly what happened to us.
+
+At the beginning we were using Material Components library to quickly prototype our app.
+In time we moved to a more custom look and feel and we forgot entirely about that library.
+Fortunately, the **code coverage** check helped us rediscover it in our bundle.
+
+You can check your code coverage stats in DevTools, both for the runtime as well as load time of
+your application. You can see the two big red stripes in the bottom screenshot - we had over 95%
+of our CSS unused, and a big bunch of JavaScript as well.
+
+Lighthouse also picked up this issue in the unused CSS rules audit. It showed a potential saving
+of over 400kb. So we got back to our code and we removed both the JavaScript and CSS part
+of that library.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WjgWvff6PiQwMrRL5ObT.png", alt="If we drop MVC adapter our styles drop to 10KB", width="800", height="272" %}
+  <figcaption>
+    <strong>Fig. 6.</strong> If we drop MVC adapter our styles drop to 10KB!
+  </figcaption>
+</figure>
+
+This brought our CSS bundle down 20-fold, which is pretty good for a tiny, two-line-long commit.
+
+Of course, it made our performance score go up, and also the
+[Time to Interactive](https://developer.akamai.com/blog/2017/04/12/gauge-user-experience-time-interactive/)
+got much better.
+
+However, with changes like this, it’s not enough to check your metrics and scores alone.
+Removing actual code is never risk-free, so you should always look out for potential regressions.
+
+Our code was unused in 95% - there’s still this 5% somewhere. Apparently one of our components
+was still using the styles from that library - the little arrows in the doodle slider. Because it
+was so small though, we could just go and manually incorporate those styles back into the buttons.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ah5S9a2Ki5oq9lHlzrGK.png", alt="Buttons got broken by missing library", width="588", height="196" %}
+  <figcaption>
+    <strong>Fig. 7.</strong> One component was still using the removed library
+  </figcaption>
+</figure>
+
+So if you remove code, just make sure you have a proper testing workflow in place to help you
+guard against potential visual regressions.
+
+### Avoid enormous network payloads
+
+We know that large resources can slow down web page loads. They can cost our users money and
+they can have a big impact on their data plans, so it's really important to be mindful of this.
+
+Lighthouse was able to detect that we had an issue with some of our network payloads using the
+[Enormous network payload](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight)
+audit.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QvmoocK29nYcmZBiVP6o.png", alt="Detect enormous network payloads", width="800", height="473" %}
+  <figcaption>
+    <strong>Fig. 8.</strong> Detect enormous network payloads
+  </figcaption>
+</figure>
+
+Here we saw that we had over 3mb worth of code that was being shipped down – which is quite a lot,
+especially on mobile.
+
+At the very top of this list, Lighthouse highlighted that we had a JavaScript vendor bundle
+that was 2mb of uncompressed code. This is also a problem highlighted by webpack.
+
+As the saying goes: the fastest request is the one that's not made.
+
+Ideally you should be measuring the value of every single asset you're serving down to your users,
+measuring the performance of those assets, and making a call on whether it's worth actually shipping
+down with the initial experience. Because sometimes these assets can be deferred, or lazily loaded,
+or processed during idle time.
+
+In our case, because we're dealing with a lot of JavaScript bundles, we were fortunate because
+the JavaScript community has a rich set of JavaScript bundle auditing tools.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GLlPM0f586jIEl1xRVoQ.png", alt="JavaScript bundle auditing", width="800", height="398" %}
+  <figcaption>
+    <strong>Fig. 9.</strong> JavaScript bundle auditing
+  </figcaption>
+</figure>
+
+We started off with webpack bundle analyzer, which informed us that we were including a
+dependency called unicode which was 1.6mb of parsed JavaScript, so quite a lot.
+
+We then went over to our editor and using the
+[Import Cost Plugin for Visual code](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
+we were able to
+visualize the cost of every module that we were importing. This allowed us to discover which
+component was including code that was referencing this module.
+
+We then switched over to another tool, [BundlePhobia](https://bundlephobia.com/). This is a tool
+which allows you to enter in the name of any NPM package and actually see what its minified and
+gzipped size is estimated to be. We found a nice alternative for the slug module we were using
+that only weighed 2.2kb, and so we switched that up.
+
+This had a big impact on our performance. Between this change and discovering other opportunities
+to trim down our JavaScript bundle size, we saved 2.1mb of code.
+
+We saw 65% improvements overall, once you factor in the gzipped and minified size of these bundles.
+And we found that this was really worth doing as a process.
+
+So, in general, try to eliminate unnecessary downloads in your sites and apps.
+Make an inventory of your assets and measure their performance impact can make a really big
+difference, so make sure that you're auditing your assets fairly regularly.
+
+### Lower JavaScript boot-up time with code splitting
+
+Although large network payloads can have a big impact on our app, there's another thing that can
+have a really big impact, and that is JavaScript.
+
+JavaScript is your
+[most expensive asset](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e).
+On mobile, if you're sending
+down large bundles of JavaScript, it can delay how soon your users are able to interact with your
+user interface components. That means they can be tapping on UI without anything meaningful
+actually happening. So it's important for us to understand why JavaScript costs so much.
+
+This is how a browser processes JavaScript.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8cEoOq6exz9QLDLfNB6q.png", alt="JavaScript processing", width="589", height="328" %}
+  <figcaption>
+    <strong>Fig. 10.</strong> JavaScript processing
+  </figcaption>
+</figure>
+
+We first of all have to download that script, we have a JavaScript engine which then needs to parse
+that code, needs to compile it and execute it.
+
+Now these phases are something that don't take a whole lot of time on a high-end device like
+a desktop machine or a laptop, maybe even a high-end phone. But on a median mobile phone this
+process can take anywhere between five and ten times longer. This is what delays interactivity,
+so it's important for us to try trimming this down.
+
+To help you discover these issues with your app, we introduced a new
+[JavaScript boot-up time audit](https://developer.chrome.com/docs/lighthouse/performance/bootup-time) to Lighthouse.
+
+<figure>
+ {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KDj3tb1r3VrmPbrDo1kr.png", alt="JavaScript boot up time", width="800", height="223" %}
+  <figcaption>
+    <strong>Fig. 11.</strong> JavaScript boot up time audit
+  </figcaption>
+</figure>
+
+And in the case of the Oodle app, it told us that we had 1.8 seconds of time spent in JavaScript
+boot-up. What was happening was that we were statically importing in all of our routes and
+components into one monolithic JavaScript bundle.
+
+One technique for working around this is using code splitting.
+
+<figure class="float-right">
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RH8lhpMF9WUaqtLD69VB.png", alt="Code splitting is like pizza", width="300", height="257" %}
+</figure>
+
+Code splitting is this notion of instead of giving your users a whole pizza’s worth of JavaScript,
+what if you only gave them one slice at a time as they needed it?
+
+Code splitting can be applied at a route level or a component level. It works great with React and
+React Loadable, Vue.js, Angular, Polymer, Preact, and multiple other libraries.
+
+We incorporated code splitting into our application, we switched over from static imports to
+dynamic imports, allowing us to asynchronously lazy load code in as we needed it.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/a0wDugnVMM1WjNyAvLEv.png", alt="Code splitting with dynamic imports", width="800", height="382" %}
+  <figcaption>
+    <strong>Fig. 13.</strong> Code splitting with dynamic imports
+  </figcaption>
+</figure>
+
+The impact this had was both shrinking down the size of our bundles, but also decreasing our
+JavaScript boot up time. It took it down to 0.78 seconds, making the app 56% faster.
+
+In general, if you're building a JavaScript-heavy experience, be sure to only send code to
+the user that they need.
+
+Take advantage of concepts like code splitting, explore ideas like tree shaking, and check out
+[webpack-libs-optimizations](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)
+repo for a few ideas on how you can trim down your library size if you happen to be using webpack.
+
+### Optimize images
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UeTyldEMnrV4Bn67mdJO.png", alt="Image loading performance joke", width="586", height="323" %}
+</figure>
+
+In the Oodle app we're using a lot of images. Unfortunately, Lighthouse was much less enthusiastic
+about it than we were. As a matter of fact, we failed on all three image-related audits.
+
+We forgot to optimize our images, we were not sizing them correctly, and also we could get some
+gain from using other image formats.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lH2NxcPFVetLrvV7KZOG.png", alt="Image audits", width="588", height="325" %}
+  <figcaption>
+    <strong>Fig. 14.</strong> Lighthouse image audits
+  </figcaption>
+</figure>
+
+We started with optimizing our images.
+
+For one-off optimization round you can use visual tools like
+[ImageOptim](https://imageoptim.com/mac) or [XNConvert](https://www.xnview.com/en/xnconvert/).
+
+A more automated approach is to add an image optimization step to your build process, with
+libraries like [imagemin](https://github.com/imagemin/imagemin).
+
+This way you make sure that the images added in the future get optimized automatically.
+Some CDNs, for example [Akamai](https://www.akamai.com) or third-party solutions like
+[Cloudinary](https://cloudinary.com/), [Fastly](https://www.fastly.com/)
+or [Uploadcare](https://uploadcare.com/) offer you comprehensive
+image optimization solutions. so you can also simply host your images on those services.
+
+If you don't want to do that because of the cost, or latency issues, projects like
+[Thumbor](http://thumbor.org/) or [Imageflow](https://github.com/imazen/imageflow) offer
+self-hosted alternatives.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1Jyf3Tn6cA4Z2slp26QF.png", alt="Before and after optimization", width="513", height="164" %}
+  <figcaption>
+    <strong>Fig. 15.</strong> Before and after optimization
+  </figcaption>
+</figure>
+
+Our background PNG was flagged in webpack as big, and rightly so. After sizing it correctly to
+the viewport and running it through ImageOptim, we went down to 100kb, which is acceptable.
+
+Repeating this for multiple images on our site allowed us to bring down the overall page weight
+significantly.
+
+### Use the right format for animated content
+
+GIFs can get really expensive. Surprisingly, the GIF format was never intended as an animation
+platform in the first place. Therefore, switching to a more suitable video format offers you large
+savings in terms of file size.
+
+In Oodle app, we were using a GIF as an intro sequence on the home page. According to Lighthouse,
+we could be saving over 7mb by switching to a more efficient video format. Our clip weighted about
+7.3mb, way too much for any reasonable website, so instead we turned it into a video element with
+two source files - an mp4 and WebM for wider browser support.
+
+<figure style="text-align: center;">
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PXR11JRtDWpkMEXrx48Z.png", alt="Replace Animated GIFs with video", width="800", height="302" %}
+  <figcaption>
+    <strong>Fig. 16.</strong> Replace Animated GIFs with video
+  </figcaption>
+</figure>
+
+We used the [FFmpeg](https://ffmpeg.org/) tool to convert our animation GIF into the mp4 file.
+The WebM format offers you even larger savings - the ImageOptim API can do such conversion for you.
+
+```shell
+ffmpeg -i animation.gif -b:v 0 -crf 40 -vf scale=600:-1 video.mp4
+```
+
+We managed to save over 80% of our overall weight thanks to this conversion. This brought
+us down to around 1mb.
+
+Still, 1mb is a large resource to push down the wire, especially for a user on a restricted
+bandwidth. Luckily we could use
+[Effective Type API](https://developer.mozilla.org/docs/Web/API/NetworkInformation/effectiveType)
+to realize they're on a slow bandwidth, and give them a much smaller JPEG instead.
+
+This interface uses the effective round-trip time and downing values to estimate the network type
+the user is using. It simply returns a string, slow 2G, 2G, 3G or 4G. So depending on
+this value, if the user is on below 4G we could replace the video element with the image.
+
+```js
+if (navigator.connection.effectiveType) { ... }
+```
+
+It does remove a little bit from the experience, but at least the site is usable on a slow
+connection.
+
+### Lazy-load off-screen images
+
+Carousels, sliders, or really long pages often load images, even though the user cannot see them
+on the page straight away.
+
+Lighthouse will flag this behavior in the off-screen images audit, and you can also see it
+for yourself in the network panel of DevTools. If you see a lot of images incoming while only
+a few are visible on the page, it means that maybe you could consider lazy loading them instead.
+
+Lazy loading is not yet supported natively in the browser, so we have to use JavaScript to add this
+capability. We used [Lazysizes library](https://www.npmjs.com/package/lazysizes) to add lazy
+loading behavior to our Oodle covers.
+
+```html
+<!-- Import library -->
+import lazysizes from 'lazysizes'  <!-- or -->
+<script src="lazysizes.min.js"></script>
+
+<!-- Use it -->
+
+<img data-src="image.jpg" class="lazyload"/>
+<img class="lazyload"
+    data-sizes="auto"
+    data-src="image2.jpg"
+    data-srcset="image1.jpg 300w,
+    image2.jpg 600w,
+    image3.jpg 900w"/>
+```
+
+Lazysizes is smart because it does not only track the visibility changes of the element, but it
+also proactively prefetches elements that are near the view for the optimal user experience.
+It also offers an optional integration of the `IntersectionObserver`, which gives you very
+efficient visibility lookups.
+
+After this change our images are being fetched on-demand. If you want to dig deeper into that
+topic, check out [images.guide](https://images.guide/) - a very handy and comprehensive resource.
+
+### Help browser deliver critical resources early
+
+Not every byte that's shipped down the wire to the browser has the same degree of importance,
+and the browser knows this. A lot of browsers have heuristics to decide what they should be
+fetching first. So sometimes they'll fetch CSS before images or scripts.
+
+Something that could be useful is us, as authors of the page, informing the browser what's
+actually really important to us. Thankfully, over the last couple of years browser vendors have
+been adding a number of features to help us with this, e.g.
+[resource hints]((https://www.keycdn.com/blog/resource-hints/)) like `link rel=preconnect`,
+or `preload` or `prefetch`.
+
+These capabilities that were brought to the web platform help the browser fetch the right thing
+at the right time, and they can be a little bit more efficient than some of the custom loading,
+logic-based approaches that are done using script instead.
+
+Let's see how Lighthouse actually guides us towards using some of these features effectively.
+
+The first thing Lighthouse tells us to do is avoid multiple costly round trips to any origin.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GWsRfe3VEFOuHwgycWMS.png", alt="Avoid multiple, costly round trips to any origin", width="800", height="360" %}
+  <figcaption>
+    <strong>Fig. 17.</strong> Avoid multiple, costly round trips to any origin
+  </figcaption>
+</figure>
+
+In the case of the Oodle app, we’re actually heavily using Google Fonts. Whenever you drop a
+Google Font stylesheet into your page it's going to connect up to two subdomains. And what
+Lighthouse is telling us is that if we were able to warm up that connection, we could save
+anywhere up to 300 milliseconds in our initial connection time.
+
+Taking advantage of link rel preconnect, we can effectively mask that connection latency.
+
+Especially with something like Google Fonts where our font face CSS is hosted
+on [googleapis.com](https://en.wikipedia.org/wiki/Google_APIs), and our font
+resources are hosted on [Gstatic](https://superuser.com/a/64724), this can have a really big
+impact. So we applied this optimization and we shaved off a few hundred milliseconds.
+
+The next thing that Lighthouse suggests is that we preload key requests.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lt3Nvi9UtaejjVYHbGp9.png", alt="Preload key requests", width="800", height="366" %}
+  <figcaption>
+    <strong>Fig. 18.</strong> Preload key requests
+  </figcaption>
+</figure>
+
+`<link rel=preload>` is really powerful, it informs the browser that a resource is needed as
+part of the current navigation, and it tries to get the browser fetching it as soon as possible.
+
+Now here Lighthouse is telling us that we should be going and preloading our key web font
+resources, because we're loading in two web fonts.
+
+Preloading in a web font looks like this - specifying `rel=preload`, you pass in `as` with
+the type of font, and then you specify the type of font you're trying to load in, such as woff2.
+
+The impact this can have on your page is quite stark.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jDWc5PChSWiCbVZKlMDt.png", alt="Impact of preloading resources", width="585", height="326" %}
+  <figcaption>
+    <strong>Fig. 19.</strong> Impact of preloading resources
+  </figcaption>
+</figure>
+
+Normally, without using link rel preload, if web fonts happen to be critical to your page, what
+the browser has to do is it first of all has to fetch your HTML, has to parse your CSS, and
+somewhere much later down the line, it'll finally go and fetch your web fonts.
+
+Using link rel preload, as soon as the browser has parsed your HTML it can actually start fetching
+those web fonts much earlier on. In the case of our app, this was able to shave a second off the
+time it took for us to render text using our web fonts.
+
+Now it's not quite that straightforward if you're going to try preloading fonts using Google Fonts,
+there is one gotcha.
+
+The Google Font URLs that we specify on our font faces in our stylesheets happened to be something
+that the fonts team update fairly regularly. These URLs can expire, or get updated on a regular
+frequency, and so what we would suggest to do if you want complete control over your font loading
+experience is to self-host your web fonts. This can be great because it gives you access
+to things like link rel preload.
+
+In our case we found the tool
+[Google Web Fonts Helper](https://google-webfonts-helper.herokuapp.com/fonts)
+really useful in helping us offline some of those web fonts and set them up locally, so check that
+tool out.
+
+Whether you're using web fonts as part of your critical resources, or it happens to be JavaScript,
+try to help the browser deliver your critical resources as soon as possible.
+
+### Experimental: Priority Hints
+
+We've got something special to share with you today. In addition to features like resource hints,
+as well as preload, we've been working on a brand new experimental browser feature we’re calling
+priority hints.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jx7YvykNpmjO39vsrST5.png", alt="Set priority for the initially visible content", width="585", height="326" %}
+  <figcaption>
+    <strong>Fig. 20.</strong> Priority hints
+  </figcaption>
+</figure>
+
+This is a new feature that allows you to hint to the browser how important a resource is. It
+exposes a new attribute - importance - with the values low, high or auto.
+
+This allows us to convey lowering the priority of less important resources, such as non-critical
+styles, images, or fetch API calls to reduce contention. We can also boost the priority of more
+important things, like our hero images.
+
+In the case of our Oodle app, this actually led to one practical place where we could optimize.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IZtNqC7SDTVYQol6OOTF.png", alt="Set priority for the initially visible content", width="587", height="334" %}
+  <figcaption>
+    <strong>Fig. 21.</strong> Set priority for the initially visible content
+  </figcaption>
+</figure>
+
+Before we added lazy loading to our images, what the browser was doing is, we had this image
+carousel with all of our doodles and the browser was fetching all the images at the very start
+of the carousel with a high priority early on. Unfortunately, it was the images in the middle
+of the carousel that were most important to the user. So what we did was, we set the importance
+of those background images to very low, the foreground ones to very high, and what this had was
+a two second impact over slow 3G, and how quickly we were able to fetch and render those images.
+So a nice positive experience.
+
+We're hoping to bring this feature to [Canary](https://www.google.com/chrome/browser/canary.html)
+in a few weeks, so keep an eye out for that.
+
+### Have a web font loading strategy
+
+Typography is fundamental to good design, and if you're using web fonts you ideally don't want to
+block rendering of your text, and you definitely don't want to show invisible text.
+
+We highlight this in Lighthouse now, with the **avoid invisible text while web fonts are loading**
+audit.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CamYoLwwQHGXmDyBXIr1.png", alt="Avoid invisible text while Web Fonts are loading", width="800", height="400" %}
+  <figcaption>
+    <strong>Fig. 22.</strong> Avoid invisible text while Web Fonts are loading
+  </figcaption>
+</figure>
+
+If you load your web fonts using a font face block, you're letting the browser decide what to do
+if it takes a long time for that web font to fetch. Some browsers will wait anywhere up
+to three seconds for this before falling back to a system font, and they'll eventually swap it
+out to the font once it's downloaded.
+
+We're trying to avoid this invisible text, so in this case we wouldn't have been able to see this
+week's classic doodles if the web font had taken too long. Thankfully, with a new feature called
+`font-display`, you actually get a lot more control over this process.
+
+```css
+    @font-face {
+      font-family: 'Montserrat';
+      font-style: normal;
+      font-display: swap;
+      font-weight: 400;
+      src: local('Montserrat Regular'), local('Montserrat-Regular'),
+          /* Chrome 26+, Opera 23+, Firefox 39+ */
+          url('montserrat-v12-latin-regular.woff2') format('woff2'),
+            /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+          url('montserrat-v12-latin-regular.woff') format('woff');
+    }
+```
+
+Font display helps you decide how web fonts will render or fallback based on how long it takes
+for them to swap.
+
+In this case we're using font display swap. Swap gives the font face a zero second block period,
+and an infinite swap period. This means the browser's going to draw your text pretty immediately
+with a fallback font if the font takes a while to load. And it's going to swap it once the font
+face is available.
+
+In the case of our app, why this was great is that it allowed us to display some meaningful text
+very early on, and transition over to the web font once it was ready.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/54dx67WBnfcKzjduM4HT.png", alt="Font display outcome", width="585", height="331" %}
+  <figcaption>
+    <strong>Fig. 23.</strong> Font display outcome
+  </figcaption>
+</figure>
+
+In general, if you happen to be using web fonts, as a large percentage of the web does, have
+a good web font loading strategy in place.
+
+There are a lot of web platform features you can use to optimize your loading experience for fonts,
+but also check out Zach Leatherman's [Web Font Recipes repo](https://www.zachleat.com/web/recipes/),
+because it's really great.
+
+### Reduce render-blocking scripts
+
+There are other parts of our application that we could push earlier in the download chain to provide
+at least some basic user experience a little bit earlier.
+
+On the Lighthouse timeline strip you can see that during these first few seconds when all the
+resources are loading, the user cannot really see any content.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HX1xfdh4LrEeUrMJWWYc.png", alt="Reduce render-blocking stylesheets opportunity", width="800", height="259" %}
+  <figcaption>
+    <strong>Fig. 24.</strong> Reduce render-blocking stylesheets opportunity
+  </figcaption>
+</figure>
+
+Downloading and processing external stylesheets is blocking our rendering process from making
+any progress.
+
+We can try to optimize our critical rendering path by delivering some of the styles a bit earlier.
+
+If we extract the styles that are responsible for this initial render and inline them in our HTML,
+the browser is able to render them straight away without waiting for the external stylesheets
+to arrive.
+
+In our case, we used an NPM module called [Critical](https://www.npmjs.com/package/critical)
+to inline our critical content in index.html during a build step.
+
+While this module did most of the heavy lifting for us, it was still a little bit tricky to get
+this working smoothly across different routes.
+
+If you are not careful or your site structure is really complex, it might be really difficult to
+introduce this type of pattern if you did not plan for
+[app shell architecture](/learn/pwa/architecture/)
+from the beginning.
+
+This is why it's so important to take performance considerations early on. If you don't design for
+performance from the start, there is a high chance that you will you run into issues doing it later.
+
+In the end our risk paid off, we managed to make it work and the app started delivering content much
+earlier, improving our first meaningful paint time significantly.
+
+## The outcome
+
+That was a long list of performance optimizations we applied to our site. Let's take a look at the
+outcome. This is how our app loaded on a medium mobile device on a 3G network, before and after
+the optimization.
+
+<figure>
+  {% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/rGDjStPqX0zUn0X2D52W.mp4" %}
+</figure>
+
+The Lighthouse performance score went up from 23 to 91. That's pretty nice progress in terms
+of speed. All of the changes were fueled by us continuously checking and following the Lighthouse
+report. If you'd like to check out how we technically implemented all of the improvements, feel
+free to take a look at [our repo](http://github.com/google/oodle-demo), especially at the PRs that
+landed there.
+
+## Predictive performance  - data-driven user experiences
+
+We believe that machine learning represents an exciting opportunity for the future in many areas.
+One idea that we hope will spark more experimentation in the future, is that real data can really
+guide the user experiences we’re creating.
+
+Today, we make a lot of arbitrary decisions about what the user might want or need, and therefore
+what is worth being prefetched, or preloaded, or pre-cached. If we guess right we are able to
+prioritize a small amount of resources, but it's really hard to scale it to the whole website.
+
+We actually have data available to better inform our optimizations today.
+Using the [Google Analytics reporting API](https://developers.google.com/analytics/devguides/reporting/core/v4/)
+we can take a look at the next top page and exit
+percentages for any URL on our site and therefore drive conclusions on which resources we should
+prioritize.
+
+If we combine this with a good probability model, we avoid wasting our user’s data by aggressively
+over-prefetching content. We can take advantage of that Google
+Analytics data, and use machine learning and models like
+[Markov chains](https://en.wikipedia.org/wiki/Markov_chain) or
+[neural network](https://en.wikipedia.org/wiki/Artificial_neural_network) in order
+to implement such models.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eNZRHsxXBbFLRFSz3HOq.png", alt="Data-driven Bundling for Web Apps", width="800", height="348" %}
+  <figcaption>
+    <strong>Fig. 25.</strong> Data-driven Bundling for Web Apps
+  </figcaption>
+</figure>
+
+In order to facilitate this experiments, we're happy to announce a new initiative we're calling
+[Guess.js](https://github.com/guess-js/guess).
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zRGcCvp2LeX0aPebJK7K.png", alt="Guess.js", width="584", height="324" %}
+  <figcaption>
+    <strong>Fig. 26.</strong> Guess.js
+  </figcaption>
+</figure>
+
+Guess.js is a project focused on data-driven user experiences for the web. We hope that it's going
+to inspire exploration of using data to improve web performance and go beyond that. It's all
+open source and available on GitHub today. This was built in collaboration with the open source
+community by Minko Gechev, Kyle Matthews from Gatsby, Katie Hempenius, and a number of others.
+
+Check out Guess.js, let us know what you think.
+
+## Summary
+
+Scores and metrics are helpful in improving speed of the Web, but they are just the means,
+not the goals themselves.
+
+We've all experienced slow page loads on the go, but we now have an opportunity to give our
+users more delightful experiences that load really quickly.
+
+Improving performance is a journey. Lots of small changes can lead to big gains. By using the
+right optimization tools and keeping an eye on the Lighthouse reports, you can provide better
+and more inclusive experience to your users.
+
+With special thanks to: Ward Peeters, Minko Gechev, Kyle Mathews, Katie Hempenius, Dom Farolino,
+Yoav Weiss, Susie Lu, Yusuke Utsunomiya, Tom Ankers, Lighthouse & Google Doodles.
diff --git a/src/site/content/en/blog/web-platform-01-2022/index.md b/src/site/content/en/blog/web-platform-01-2022/index.md
new file mode 100644
index 00000000000..9455a89b90e
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-01-2022/index.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: "New to the web platform in January"
+subhead: >
+  Discover some of the interesting features that have landed in stable and beta web browsers during January 2022. 
+description: >
+  Discover some of the interesting features that have landed in stable and beta web browsers during January 2022.
+date: 2022-02-01
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/8j6GZWWy9wpuQfTOkrJy.png
+alt: Balloons launching.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In January, Chrome 97 and Firefox 96 became stable.
+
+Firefox 96 shipped the color function [`hwb()`](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb()). This function expresses a color by hue, whiteness, and blackness.
+
+{% BrowserCompat 'css.types.color.hwb' %}
+
+Also in Firefox 96 is the CSS [`color-scheme`](https://developer.mozilla.org/docs/Web/CSS/color-scheme) property. This property gives you a way to indicate the color schemes an element can be rendered in. For example, to indicate that `.widget` can be rendered in the operating system's light or dark modes, use the following CSS.
+
+```css
+.widget {
+  color-scheme: light dark;
+}
+```
+
+With color-scheme landing in Firefox, this means the property is available in Chrome, Firefox, and Safari.
+
+{% BrowserCompat 'css.properties.color-scheme' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+The betas for January were [Chrome 98](https://blog.chromium.org/2022/01/chrome-98-beta-color-gradient-vector.html), [Firefox 97](https://www.mozilla.org/en-US/firefox/97.0beta/releasenotes/), and Safari 15.4 Beta 1.
+
+Chrome 98 supports COLRv1 color gradient vector fonts as an additional new font format. A color font contains glyphs with multiple colors in them, which can be for example an emoji or a country flag or a multi-colored letter.
+
+Read more about this new font format in [COLRv1 Color Gradient Vector Fonts in Chrome 98](https://developer.chrome.com/blog/colrv1-fonts/).
+
+Also included is the [structuredClone()](/structured-clone/) method for making deep copies of objects, and the CSS media queries `dynamic-range` and `video-dynamic-range`. Find more features to test in the [Chrome 98 Beta post](https://blog.chromium.org/2022/01/chrome-98-beta-color-gradient-vector.html).
+
+[Chrome 98 DevTools](https://developer.chrome.com/blog/new-in-devtools-98/) brings you a whole collection of new features including the new [Full Accessibility Tree](https://developer.chrome.com/blog/full-accessibility-tree/).
+
+Firefox 97 Beta supports the `cap` and `ic` units for [`length`](https://developer.mozilla.org/docs/Web/CSS/length), and also implements the [`scrollbar-gutter`](https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter) property. 
+
+There is a whole collection of good things included in Safari 15.4 Beta. Features include implementation of the [::backdrop](https://developer.mozilla.org/docs/Web/CSS/::backdrop) pseudo-element, [:focus-visible](https://developer.mozilla.org/docs/Web/CSS/:focus-visible) pseudo-class, the [accent-color](/accent-color/) property, and CSS Containment with the [contain](https://developer.mozilla.org/docs/Web/CSS/contain) property. This beta also includes the HTML [&lt;dialog&gt;](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) element, the `lazy` attribute on images to enable [lazy-loading](/browser-level-image-lazy-loading/), plus support for Web App Manifest icons.
+
+All of these beta features will land in stable browsers soon.
+
+_Hero image by [ian dooley](https://unsplash.com/@sadswim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
+  
diff --git a/src/site/content/en/blog/web-platform-01-2023/index.md b/src/site/content/en/blog/web-platform-01-2023/index.md
new file mode 100644
index 00000000000..5b9dd9b9923
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-01-2023/index.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: "New to the web platform in January"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during January 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during January 2023.
+date: 2023-01-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/FCGhFWoTI2Rmlc6vDDzh.jpg
+alt: A winter scene with snow.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In January 2023, [Firefox 109](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/109), [Chrome 109](https://developer.chrome.com/blog/new-in-chrome-109/), and [Safari 16.3](https://developer.apple.com/documentation/safari-release-notes/safari-16_3-release-notes) became stable. Let's take a look at what this means for the web platform.
+
+## MathML
+
+Chrome 109 supports [MathML](https://developer.mozilla.org/docs/Web/MathML) Core, a language for describing mathematical notation embeddable in HTML and SVG. This release means that MathML is now interoperable across all the major engines.
+
+## The `scrollend` event
+
+Firefox 109 implements `scrollend`. This event provides a reliable way to detect that a scroll is complete. Find out more about this event, which is also being implemented in Chrome, in the article [Scrollend, a new JavaScript event](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/).
+
+{% BrowserCompat 'api.Element.scrollend_event' %}
+
+## The `lh` CSS length unit and `hyphenate-limit-chars`
+
+For CSS in Chrome we have the `lh` length unit. This unit is equivalent to the computed value of the `line-height` property on the element on which it is used. 
+
+{% BrowserCompat 'css.types.length.lh' %}
+
+Also, the `hyphenate-limit-chars` property specifying the minimum number of characters in a hyphenated word.
+
+{% BrowserCompat 'css.properties.hyphenate-limit-chars' %}
+
+## Content-Security-Policy (CSP) `prefetch-src`
+
+Safari 16.3 is mostly a release of fixes, and resolves a number of CSS sizing issues. The only new feature listed in the notes, is the addition of the Content-Security-Policy (CSP) [`prefetch-src`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/prefetch-src) directive.
+
+{% BrowserCompat 'http.headers.Content-Security-Policy.prefetch-src' %}
+
+## Features for Chrome on Android
+
+New in Chrome on Android is [Secure Payment Confirmation](https://developer.chrome.com/blog/spc-on-android/) (SPC). This is a proposed web standard that allows customers to authenticate with a credit card issuer, bank, or other payment service provider using a platform authenticator—typically activated with a device's screen unlock feature such as a fingerprint sensor.
+
+Also new for Chrome on Android is the [Origin Private File System (OPFS)](https://developer.mozilla.org/docs/Web/API/File_System_Access_API#origin_private_file_system), part of the File System Access API on Android. This includes all of the File System Access API surface, minus the `show{OpenFile, SaveFile, Directory}Picker()` methods and the Drag and Drop API integration.
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 110](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/110), and [Chrome 110](https://developer.chrome.com/blog/chrome-110-beta/). 
+
+Chrome 110 includes the CSS `initial-letter` property. This property provides a way to set the number of lines that an initial letter should sink into the text. Learn more in the article [Control your drop caps with CSS initial-letter](https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter/).
+
+Also, for CSS in Chrome 110 is the `:picture-in-picture` pseudo-class. This gives you a way to target and customize the media player when videos enter and exit picture-in-picture mode.
+
+Chrome includes the `setSinkID()` method of the `AudioContext` API. This method provides a way to [change the destination audio device when using Web Audio](https://developer.chrome.com/blog/audiocontext-setsinkid/).
+
+Firefox 110 includes size [Container Queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries), which will bring us interoperability across the three main browser engines for this long-awaited feature.
+  
+_Photo by [Denys Nevozhai](https://unsplash.com/images/nature/winter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/web-platform-02-2022/index.md b/src/site/content/en/blog/web-platform-02-2022/index.md
new file mode 100644
index 00000000000..f2c8e619fa7
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-02-2022/index.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: "New to the web platform in February"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during February 2022. 
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during February 2022.
+date: 2022-03-02
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/BSVGQQg5QVVwhibIwsTG.jpg
+alt: Layers of color.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In February, Chrome 98 and Firefox 97 became stable.
+
+Chrome 98 shipped the `self.structuredClone` method. It creates a deep clone of a value using the structured clone algorithm. [Read more about `structuredClone()`](/structured-clone/).
+
+{% BrowserCompat 'api.structuredClone' %}
+
+Firefox 97 includes [Cascade Layers](https://developer.mozilla.org/docs/Web/CSS/@layer). The `@layer` at-rule defines a cascade layer, helping you to control specificity.
+
+```css
+@layer framework {
+  /* creates a new layer named framework */
+}
+```
+
+Firefox is the first browser to land this in a release version. However, check out the section of this post on [beta releases](#beta-browser-releases), as it won't be too long before this feature is available everywhere. Find out more about Cascade Layers in [Cacade layers are coming to your browser](https://developer.chrome.com/blog/cascade-layers/).
+
+{% BrowserCompat 'css.at-rules.layer' %}
+
+Firefox also lands the [`scrollbar-gutter`](https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter) property. This property helps to remove layout shifts caused by a scrollbar appearing as content grows. 
+
+A scrollbar gutter is the space between the inner border edge and the outer padding edge. This is where a scrollbar will appear if needed. If no scrollbar is present, the gutter displays as an extension of the padding. The following CSS would add spacing accounting for the scrollbar size to both sides of the box, to keep the appearance symmetrical.
+
+```css
+.container {
+  scrollbar-gutter: stable both-edges;
+}
+```
+
+{% BrowserCompat 'css.properties.scrollbar-gutter' %}
+
+Chrome 98 supports COLRv1 color gradient vector fonts as an additional new font format. A color font contains glyphs with multiple colors in them, which can be for example an emoji or a country flag or a multi-colored letter.
+
+Read more about this new font format in [COLRv1 Color Gradient Vector Fonts in Chrome 98](https://developer.chrome.com/blog/colrv1-fonts/).
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+New betas in February were [Chrome 99](https://blog.chromium.org/2022/02/chrome-99-css-cascade-layers-new-picker.html), and [Firefox 98](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/98). Safari Beta 15.4 is still ongoing, I covered some of the things included [last month](/web-platform-01-2022/).
+
+Chrome 99 includes Cascade Layers, with Cascade Layers also in [Safari Beta 15.4](https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes) we can expect to see this feature in all evergreen browsers very soon.
+
+Also in Chrome 99 are several new attributes for `CanvasRenderingContext2D`, and a new `showPicker()` method on `HTMLInputElement` which is a way to [show a browser picker for date, time, color, and files](https://developer.chrome.com/blog/show-picker/). 
+
+In Firefox 98 you'll find the [`<dialog>`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) element. Another feature that will be in all evergreen browsers once the Firefox and Safari betas become stable. 
+
+All of these beta features will land in stable browsers soon.
+
+_Hero image by [Erfan Moradi](https://unsplash.com/@eurphan)_
+  
\ No newline at end of file
diff --git a/src/site/content/en/blog/web-platform-02-2023/index.md b/src/site/content/en/blog/web-platform-02-2023/index.md
new file mode 100644
index 00000000000..0ea7db02b53
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-02-2023/index.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: "New to the web platform in February"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during February 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during February 2023.
+date: 2023-02-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/B99XwoFGRglrLQZuEcUL.jpg
+alt: Colorful wooden boards.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In February 2023, [Firefox 110](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/110) and [Chrome 110](https://developer.chrome.com/blog/new-in-chrome-110/) became stable. Let's take a look at what this means for the web platform.
+
+### Container queries in all three engines
+
+Firefox 110 included support for [size container queries](/cq-stable/), making this key feature available in all three engines. 
+
+{% BrowserCompat 'css.at-rules.container' %}
+
+### CSS initial letters
+
+Chrome 110 adds support for the CSS [`initial-letter`](https://developer.mozilla.org/docs/Web/CSS/initial-letter) property. This property sets the number of lines an initial letter should sink into the following lines of text. Learn more in the post [Control your drop caps with CSS initial-letter](https://developer.chrome.com/blog/control-your-drop-caps-with-css-initial-letter/).
+
+{% BrowserCompat 'css.properties.initial-letter' %}
+
+### ReadableStream async iteration
+
+Firefox added support for the [async interable protocol in `ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream#async_iteration). 
+
+{% BrowserCompat 'api.ReadableStream.async_iterable' %}
+
+### AudioContext.setSinkId()
+
+In Chrome [`AudioContext.setSinkId`](https://developer.mozilla.org/docs/Web/API/AudioContext/setSinkId) sets the ID of the audio device to use for output. This allows the `AudioContext` to route audio to a connected output device of the user's choosing.
+
+Learn more about this feature in the post [Change the destination output device in Web Audio](https://developer.chrome.com/blog/audiocontext-setsinkid/).
+
+{% BrowserCompat 'api.AudioContext.setSinkId' %}
+
+### IFrame credentialless
+
+Also in Chrome, [IFrame credentialless](https://developer.mozilla.org/docs/Web/Security/IFrame_credentialless) gives developers a way to load documents in third party iframes using new and ephemeral contexts. Iframe credentialless are a generalization of COEP credentialless to support third-party iframes that may not deploy COEP. This removes the constraint that third-party iframes must support COEP in order to be embedded in a COEP page and will unblock developers looking to adopt cross-origin-isolation.
+
+Learn more about [iframe credentialless](https://developer.chrome.com/blog/iframe-credentialless/).
+
+{% BrowserCompat 'html.elements.iframe.credentialless' %}
+
+### Early stable
+
+Chrome 110 also marked a change in the Chrome release schedule. The _early stable_ release will roll out a week earlier than the general release, to a small percentage of users. You can learn more about this change in the article [change in release schedule from Chrome 110](https://developer.chrome.com/blog/early-stable/).
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 111](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/111), [Safari 16.4](https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes), and [Chrome 111](https://developer.chrome.com/blog/chrome-111-beta/). These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Firefox adds support for the [Origin Private File System (OPFS)](https://developer.mozilla.org/docs/Web/API/File_System_Access_API#origin_private_file_system) when using the File System Access API.
+
+Chrome includes all features described in CSS Color Level 4. This includes four device-independent color types (lab, Oklab, lch and Oklch), the `color()` function, and user-defined color spaces for gradients and animations. Also included is the [`color-mix()`](https://developer.chrome.com/blog/css-color-mix/) function from CSS Color 5.
+
+Read the [High definition CSS color guide](https://developer.chrome.com/articles/high-definition-css-color-guide/) to learn about these new color types and spaces.
+
+Chrome also includes the View Transitions API, that enables polished transitions in Single-Page Applications (SPAs). Find out more in the documentation for [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/).
+
+Also in Chrome 111 is the [declarative shadow DOM](https://developer.chrome.com/articles/declarative-shadow-dom/), a new way to implement and use shadow DOM directly in HTML.
+
+Safari 16.4 promises to be a huge release for the platform. For CSS the release includes support for the [`:user-invalid`](https://developer.mozilla.org/docs/web/css/:user-invalid) and [`:user-valid`](https://developer.mozilla.org/docs/web/css/:user-valid) pseudo-classes, the [`margin-trim`](https://developer.mozilla.org/docs/web/css/margin-trim) property, the [range syntax for media queries](https://developer.chrome.com/blog/media-query-range-syntax/), and support for the CSS Properties and Values API and [`@property`](https://developer.mozilla.org/docs/web/css/@property).
+
+Safari also includes support for Web Push, and the [Badging API](https://developer.mozilla.org/docs/Web/API/Badging_API), along with a number of other Web APIs. It's a really exciting release that will see a number of features [reach interoperability](/tags/newly-interoperable/).
+  
+_Photo by [Robert Katzki](https://unsplash.com/fr/@ro_ka?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/web-platform-03-2022/index.md b/src/site/content/en/blog/web-platform-03-2022/index.md
new file mode 100644
index 00000000000..1589246c6d0
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-03-2022/index.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: "New to the web platform in March"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during March 2022. 
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during March 2022.
+date: 2022-03-31
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PTLdV9YgDfQdXSW9PnL2.jpg
+alt: A DJ cross-fading tracks.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In March, [Chrome 99](https://developer.chrome.com/blog/new-in-chrome-99/), [Chrome 100](https://developer.chrome.com/blog/new-in-chrome-100/), [Firefox 98](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/98), and [Safari 15.4](https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes) became stable. This brought a whole batch of new features to the platform, and many of these additions meant that the feature became available in all three browser engines. In this post I've concentrated on those additions that give us interoperability cross-browser, but do check out the release notes to see all of the features added to each engine. 
+
+{% Aside %}
+With Chrome reaching version 100 we had a look back at some of the fun, cool, and interesting things that have happened over the past 14 years. Take a look at [#100CoolWebMoments](https://developer.chrome.com/100/).
+{% endAside %}
+
+Chrome 99 and Safari 15.4 included [Cascade Layers](https://developer.mozilla.org/docs/Web/CSS/@layer). The `@layer` at-rule defines a cascade layer, helping you to control specificity. They join Firefox, and so Cascade Layers is now available in all three browser engines. Find out more about Cascade Layers in [Cascade layers are coming to your browser](https://developer.chrome.com/blog/cascade-layers/).
+
+{% BrowserCompat 'css.at-rules.layer' %}
+
+Chrome 100 includes the new value of `plus-lighter` for the CSS [mix-blend-mode](https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode) property. This value is useful when cross-fading two elements when all or a subset of pixels have the same values. You can read more about the problem this solves in [Cross-fading any two DOM elements is currently impossible](https://jakearchibald.com/2021/dom-cross-fade/). 
+
+{% BrowserCompat 'css.properties.mix-blend-mode.plus-lighter' %}
+
+Safari 15.4 includes the [`contain`](https://developer.mozilla.org/docs/Web/CSS/contain) property, allowing for CSS containment. 
+
+{% BrowserCompat 'css.properties.contain' %}
+
+Also in Safari 15.4 is [`accent-color`](/accent-color/), which gives control over the accent color used on some form controls. 
+
+{% BrowserCompat 'css.properties.accent-color' %}
+
+Firefox 98 and Safari 15.4 landed the [`<dialog>`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) element, which represents a dialog box. 
+
+{% BrowserCompat 'html.elements.dialog' %}
+
+Safari 15.4 also completed support for the [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible) pseudo-class. The [implementation work](https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/) on this was by Igalia.
+
+{% BrowserCompat 'css.selectors.focus-visible' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+New betas in March were [Chrome 101](https://blog.chromium.org/2022/03/chrome-101-federated-credential.html), and [Firefox 99](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/99). 
+
+Chrome 101 beta includes [hwb color notation](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb). This specifies color according to its hue, whiteness, and blackness. As with other color notation, an optional alpha component specifies opacity.
+
+```css
+h1 {
+  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
+}
+```
+
+{% BrowserCompat 'css.types.color.hwb' %}
+
+Firefox 99 includes the [`pdfViewerEnabled`](https://developer.mozilla.org/docs/Web/API/Navigator/pdfViewerEnabled) property of the Navigator interface. This property indicates if the browser supports inline display of PDF files.
+
+```js
+if (!navigator.pdfViewerEnabled) {
+  // The browser does not support inline viewing of PDF files.
+}
+```
+
+{% BrowserCompat 'api.Navigator.pdfViewerEnabled' %}
+
+These beta features will land in stable browsers soon.
+
+_Hero image by [Brandon Zack](https://unsplash.com/@brandonzack)_
+  
+  
\ No newline at end of file
diff --git a/src/site/content/en/blog/web-platform-03-2023/index.md b/src/site/content/en/blog/web-platform-03-2023/index.md
new file mode 100644
index 00000000000..dba0173a424
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-03-2023/index.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: "New to the web platform in March"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during March 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during March 2023.
+date: 2023-03-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/pI6R8rAPgyCUhAKQLmUe.jpg
+alt: Spring blossom.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In March 2023, [Firefox 111](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/111), [Chrome 111](https://developer.chrome.com/blog/new-in-chrome-111/), and [Safari 16.4](https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes) became stable. Let's take a look at what this means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have updated for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+### Global HTML attributes
+
+Firefox 111 adds support for a couple of useful [global HTML attributes](/learn/html/attributes/#global-attributes). The [`autocapitalize`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autocapitalize) attribute controls whether text may be automatically capitalized when the user is typing on a virtual keyboard. 
+
+{% BrowserCompat 'html.global_attributes.autocapitalize' %}
+
+The [`translate`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/translate) attribute indicates whether an element should be translated when a page is localized. 
+
+{% BrowserCompat 'html.global_attributes.translate' %}
+
+### Origin Private File System (OPFS)
+
+Firefox adds support for the [Origin Private File System (OPFS)](https://developer.mozilla.org/docs/Web/API/File_System_Access_API#origin_private_file_system) when using the File System Access API. [Learn more about the OPFS](https://developer.chrome.com/articles/origin-private-file-system/).
+
+### The View Transitions API
+
+Chrome 111 adds the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API), making the creation of polished transitions in Single-Page Apps (SPAs) simpler by snapshotting views and allowing the DOM to change without any overlap between states.
+
+Find out more in the launch post [SPA view transitions land in Chrome 111](https://developer.chrome.com/blog/spa-view-transitions-land/).
+
+{% BrowserCompat 'api.ViewTransition' %}
+
+### New CSS color spaces and functions
+
+Also included in Chrome 111 are a whole new set of ways to use color on the web. Chrome now supports color spaces that access colors outside of the RGB gamut, along with the `color()` and `color-mix()` functions. Learn more in our [High definition CSS color guide](https://developer.chrome.com/articles/high-definition-css-color-guide/) and [blog post on `color-mix()`](https://developer.chrome.com/blog/css-color-mix/).
+
+{% BrowserCompat 'css.types.color.color-mix' %}
+
+The Chrome release also includes [new DevTools](https://developer.chrome.com/blog/new-in-devtools-111/#color) to help you work with this new color functionality.
+
+{% Aside %}
+You can also test the new color functions `color()`, `lab()`, `lch()`, `oklab()`, and `oklch()` in Firefox 111, currently behind a preference `layout.css.more_color_4.enabled`.
+{% endAside %}
+
+### More control over `:nth-child()` selections
+
+Chrome 111 adds the ability to pass a selector list into `:nth-child()` and `nth-last-child()`. Learn more about this, and see examples in the post [More control over :nth-child() selections with the of S syntax](https://developer.chrome.com/articles/css-nth-child-of-s/).
+
+{% BrowserCompat 'css.selectors.nth-child.of_syntax' %}
+
+### Support for previous and next slide in the Media Session API
+
+Finally in this list of Chrome 111 additions are the [Presenting slides actions](/media-session/#presenting-slides-actions) for the media session API—`"previousslide"` and `"nextslide"`.
+
+{% BrowserCompat 'api.MediaSession.setActionHandler.nextslide_type' %}
+
+### Pseudo-class support in Safari
+
+Safari 16.4 is an amazing release for the web platform. This article won't cover all of the additions, so check out the full list of features in the [Safari 16.4 release notes](https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes). 
+
+There's a bunch of additional CSS pseudo-classes with support in this release: `:user-invalid`, `:user-valid`, `:dir()`, `:modal`, and `:fullscreen`.
+
+### New range syntax for media queries
+
+This Safari release makes the far more elegant and useful range syntax for media queries interoperable across all three engines. See examples of this syntax in [this post](https://developer.chrome.com/blog/media-query-range-syntax/), published when the syntax shipped in Chrome. 
+
+{% BrowserCompat 'css.at-rules.media.range_syntax' %}
+
+### CSS Properties and Values
+
+Safari 16.4 adds support for [`@property`](https://developer.mozilla.org/docs/Web/CSS/@property), enabling CSS custom property registration directly in a stylesheet. Learn more about this in [@property: giving superpowers to CSS variables](/at-property/).
+
+{% BrowserCompat 'css.at-rules.property' %}
+
+### CSS API support
+
+The great additions for CSS keep coming, with support for the [CSS Typed OM](https://developer.mozilla.org/docs/Web/API/CSS_Typed_OM_API). This API exposes CSS values as typed JavaScript objects rather than strings. It makes working with CSS from JavaScript easier, and is more performant than existing methods.
+
+{% BrowserCompat 'api.CSSStyleValue' %}
+
+There is also support for constructable stylesheets with `CSSStyleSheet()`. This enables the sharing of stylesheets between a document and its shadow DOM subtrees. With this version of Safari, constructable stylesheets are now supported in all three engines.
+
+{% BrowserCompat 'api.CSSStyleSheet.CSSStyleSheet' %}
+
+### Web Push and the Badging API
+
+Safari now suports Web Push, along with the [Badging API](https://developer.mozilla.org/docs/Web/API/Badging_API), which is great news for app developers. In particular, this version means that [push notifications are supported](/push-notifications-in-all-modern-browsers/) in all major engines. 
+
+{% BrowserCompat 'api.PushEvent.PushEvent' %}
+
+### Import maps
+
+Another addition that brings a feature to interoperable status is the addition of JavaScript [Import maps](/import-maps-in-all-modern-browsers/), making importing ES modules much easier.
+
+{% BrowserCompat 'html.elements.script.type.importmap' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 112](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/112), [Safari 16.5](https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes), and [Chrome 112](https://developer.chrome.com/blog/chrome-112-beta/). These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Firefox 112 adds support for the `inert` attribute, which will make this useful attribute available across all engines. You can learn more about inert in [Introducing inert](https://developer.chrome.com/articles/inert/). Firefox will also enable support for the `linear()` easing function.
+
+Chrome 112 and Safari 16.5 both add support for [CSS Nesting](https://developer.chrome.com/articles/css-nesting/), a feature that is highly anticipated by many developers. 
+
+Chrome 112 also includes support for `animation-composition`. Learn how this property works in [Specify how multiple animation effects should composite with animation-composition](https://developer.chrome.com/articles/css-animation-composition/).
+
+If you use Chrome's Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in [Chrome's Headless mode gets an upgrade](https://developer.chrome.com/articles/new-headless/).
+
+_Photo by [Tali Khrab](https://unsplash.com/@taliscope?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/web-platform-04-2022/index.md b/src/site/content/en/blog/web-platform-04-2022/index.md
new file mode 100644
index 00000000000..58dbd235381
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-04-2022/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: "New to the web platform in April"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during April 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during April 2022.
+date: 2022-04-29
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/0fQKPX21U9INqtEspLze.jpg
+alt: Colorful stripes.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In April, Chrome 101 and [Firefox 99](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/99) became stable. After the bumper crop of features landing [last month](/web-platform-03-2022/), it was a bit quieter during April, but a few interesting things landed for us to use.
+
+Chrome 101 includes [hwb color notation](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb). This specifies color according to its hue, whiteness, and blackness. As with other color notation, an optional alpha component specifies opacity.
+
+```css
+h1 {
+  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
+}
+```
+
+To learn more about `hwb()`, read this article by [Stefan Judis](https://twitter.com/stefanjudis/): [hwb() – a color notation for humans?](https://www.stefanjudis.com/blog/hwb-a-color-notation-for-humans/).
+
+{% BrowserCompat 'css.types.color.hwb' %}
+
+Also in Chrome 101 is the [Fetch Priority](/fetch-priority/) feature. This gives you a way to hint to the browser which order resources should be downloaded in, by using the `fetchpriority` attribute. In the example below, a low priority image is indicated with `fetchpriority="low"`.
+
+```html
+<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
+```
+
+Fetch Priority isn't yet available in other browsers, however you can start using them right now to benefit anyone with a browser based on Chromium 101.
+
+{% BrowserCompat 'api.HTMLImageElement.fetchPriority' %}
+
+Firefox 99 includes the [`pdfViewerEnabled`](https://developer.mozilla.org/docs/Web/API/Navigator/pdfViewerEnabled) property of the Navigator interface. This property indicates if the browser supports inline display of PDF files.
+
+```js
+if (!navigator.pdfViewerEnabled) {
+  // The browser does not support inline viewing of PDF files.
+}
+```
+
+{% BrowserCompat 'api.Navigator.pdfViewerEnabled' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+New betas in April were [Chrome 102](https://blog.chromium.org/2022/04/chrome-102-window-controls-overlay-host.html), [Firefox 100](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/100), and [Safari 15.5](https://developer.apple.com/documentation/safari-release-notes/safari-15_5-release-notes).
+
+Chrome 102, Safari 15.5, and Firefox preview versions include [the `inert` attribute](https://developer.chrome.com/blog/inert/). This removes elements from the tab order and accessibility tree if they are non-interactive. For example, an element that is currently offscreen or hidden.
+
+Chrome 102 includes the new value `until-found` for the HTML `hidden` attribute. This enables find-in-page and scroll to text fragment on text that is inside a collapsed area of the page, as you might find in an accordion pattern. Find out more in the post [Making collapsed content accessible with hidden=until-found](https://developer.chrome.com/blog/hidden-until-found/).
+
+{% BrowserCompat 'html.global_attributes.hidden.until-found_value' %}
+
+Chrome 102 also includes the [Local Font Access API](/local-fonts/), which allows access to the user's locally installed fonts.
+
+These beta features will land in stable browsers soon.
+
+_Hero image by [Jason Leung](https://unsplash.com/@ninjason)_
+
diff --git a/src/site/content/en/blog/web-platform-04-2023/index.md b/src/site/content/en/blog/web-platform-04-2023/index.md
new file mode 100644
index 00000000000..3c74ec38ef4
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-04-2023/index.md
@@ -0,0 +1,86 @@
+---
+layout: post
+title: "New to the web platform in April"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during April 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during April 2023.
+date: 2023-04-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/3vEfHlKANPV72jfIhUcR.jpg
+alt: A nest with eggs in it.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In April 2023, [Firefox 112](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/112), and [Chrome 112](https://developer.chrome.com/blog/new-in-chrome-112/) became stable. Let's take a look at what this means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have updated for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+### The `inert` attribute
+
+Firefox 112 includes the `inert` global attribute. This attribute tells the browser to ignore the element, indicating content that should not be interactive. It:
+
+- Prevents `click` events being fired.
+- Prevents the element from gaining focus.
+- Excludes the element and its contents from the accessibility tree.
+
+This attribute is now interoperable in all three engines. 
+
+{% BrowserCompat 'html.global_attributes.inert' %}
+
+### The `linear()` easing function
+
+The `linear()` easing function enables linear interpolation between a number of points. This enables more complex animations such as bounce and elastic effects. This function is in Firefox 112.
+
+{% BrowserCompat 'css.types.easing-function.linear-function' %}
+
+### CSS nesting
+
+Chrome 112 adds support for [CSS Nesting](https://developer.chrome.com/articles/css-nesting/), a feature that is highly anticipated by many developers. This introduces a new nesting selector `>`, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:
+
+```css
+.nesting {
+  color: hotpink;
+
+  > .is {
+    color: rebeccapurple;
+
+    > .awesome {
+      color: deeppink;
+    }
+  }
+}
+```
+
+{% BrowserCompat 'css.selectors.nesting' %}
+
+### CSS `animation-composition`
+
+Chrome 112 also includes support for `animation-composition`. Learn how this property works in [Specify how multiple animation effects should composite with animation-composition](https://developer.chrome.com/articles/css-animation-composition/).
+
+{% BrowserCompat 'css.properties.animation-composition' %}
+
+### New headless mode
+
+If you use Chrome's Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in [Chrome's Headless mode gets an upgrade](https://developer.chrome.com/articles/new-headless/).
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 113](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/113) and [Chrome 113](https://developer.chrome.com/blog/chrome-113-beta/), with the [Safari 16.5](https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes) beta still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Firefox 113 includes the `color()`, `lab()`, `lch()`, `oklab()`, and `oklch()` functions. Also included is the [`color-mix()`](https://developer.chrome.com/blog/css-color-mix/) function from CSS Color 5, and the `forced-color-adjust` property.
+
+Firefox also includes the [`nth-child of <selector>`](https://developer.mozilla.org/docs/Web/CSS/:nth-child#the_of_selector_syntax) syntax, giving finer control of which elements you want to select. Read more in [More control over :nth-child() selections with the of S syntax](https://developer.chrome.com/articles/css-nth-child-of-s/).
+
+For CSS, Chrome 113 includes the `overflow-inline`, `overflow-block`, and `update` media features. Also included in the `linear()` easing function, and the unprefixed `image-set()` type.
+
+Chrome 113 also includes [WebGPU](https://developer.chrome.com/blog/webgpu-release/), the successor to the WebGL and WebGL 2 graphics APIs for the Web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.
+
+_Photo by [Karen Ciocca](https://unsplash.com/@moonflowerstudiocreativet)._
diff --git a/src/site/content/en/blog/web-platform-05-2022/index.md b/src/site/content/en/blog/web-platform-05-2022/index.md
new file mode 100644
index 00000000000..a14681f51eb
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-05-2022/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: "New to the web platform in May"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during May 2022. 
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during May 2022.
+date: 2022-05-31
+updated: 2022-06-01
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/eZEXEaB9RiOw8fB7OUtD.jpg
+alt: A balloon ascending into a bright blue sky.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In May, Chrome 102, [Safari 15.5](https://developer.apple.com/documentation/safari-release-notes/safari-15_5-release-notes), [Firefox 100](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/100), and [Firefox 101](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/101) became stable.
+
+Chrome 102 and Safari 15.5 include [the `inert` attribute](https://developer.chrome.com/blog/inert/). This removes elements from the tab order and accessibility tree if they are non-interactive. For example, an element that is currently offscreen or hidden. 
+
+{% BrowserCompat 'html.global_attributes.inert' %}
+
+Chrome 102 includes the new value `until-found` for the HTML `hidden` attribute. This enables find-in-page and scroll to text fragment on text that is inside a collapsed area of the page, as you might find in an accordion pattern. Find out more in the post [Making collapsed content accessible with hidden=until-found](https://developer.chrome.com/blog/hidden-until-found/).
+
+{% BrowserCompat 'html.global_attributes.hidden.until-found_value' %}
+
+Chrome 102 ships the [Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/), an API that standardizes client-side routing in single-page applications. This API was previously named the App History API. 
+
+{% BrowserCompat 'api.Navigation' %}
+
+Firefox 101 supports [constructable stylesheets](/constructable-stylesheets/). Support includes the `CSSStyleSheet()` constructor, and the `replace()`, and `replaceSync()` methods. Constructable stylesheets make it easier to create stylesheets for use with the Shadow DOM. In the following example, a stylesheet is created using the `CSSStyleSheet()` constructor, a CSS rule is added with the `replaceSync()` method, and the resulting rule is printed to the console.
+
+```js
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync('body { color: red; }');
+console.log(stylesheet.rules[0].cssText);
+```
+
+{% BrowserCompat 'api.CSSStyleSheet.CSSStyleSheet' %}
+
+Also in Firefox 101 is the [`prefers-contrast`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast) media feature, making this feature available cross-browser.
+
+{% BrowserCompat 'css.at-rules.media.prefers-contrast' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+New betas in April were [Chrome 103](https://blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html) and [Firefox 102](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/102). 
+
+Firefox 102 includes the [`update`](https://developer.mozilla.org/docs/Web/CSS/@media/update-frequency) media feature. This is used to query whether the output device can modify the appearance of content once it has been rendered. It accepts the following values:
+
+`none`
+: Once rendered the content cannot be updated. For example, a printed document.
+
+`slow`
+: The device can update the content, but too slowly to display smooth animation. For example, E-ink screens.
+
+`fast`
+: The content can change dynamically, and quickly enough to render animations. For example, a computer or phone screen.
+
+{% BrowserCompat 'css.at-rules.media.update' %}
+
+Chrome 103 includes the [Local Font Access API](/local-fonts/), which allows access to the user's locally installed fonts.
+
+These beta features will land in stable browsers soon.
+
+_Edit: A previous version of this post included mention of the [`Element.isVisible()`](https://chromestatus.com/feature/5163102852087808) method, which is not shipping in this release._
\ No newline at end of file
diff --git a/src/site/content/en/blog/web-platform-05-2023/index.md b/src/site/content/en/blog/web-platform-05-2023/index.md
new file mode 100644
index 00000000000..63e294cd65f
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-05-2023/index.md
@@ -0,0 +1,120 @@
+---
+layout: post
+title: "New to the web platform in May"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during May 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during May 2023.
+date: 2023-05-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/ozivqeizYMb6e6KTwiob.jpg
+alt: A selection of colored pencils.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In May 2023, [Firefox 113](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/113), [Chrome 113](https://developer.chrome.com/blog/new-in-chrome-113/), [Chrome 114](https://developer.chrome.com/blog/new-in-chrome-114/), and [Safari 16.5](https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes) became stable. Let's take a look at what this means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+### WebGPU
+
+Chrome 113 includes [WebGPU](https://developer.chrome.com/blog/webgpu-release/), the successor to the WebGL and WebGL 2 graphics APIs for the web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.
+
+{% BrowserCompat 'api.GPU' %}
+
+### First-Party Sets
+
+[First-Party Sets (FPS)](https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/) is part of the [Privacy Sandbox](https://privacysandbox.com/). It is a way for organizations to declare relationships among sites, so that browsers can decide when to allow limited third-party cookie access for sites within a set. FPS began a staged rollout in Chrome 113. 
+
+### CSS media features and more
+
+For CSS, Chrome 113 includes the `overflow-inline` and `overflow-block` media features. 
+
+{% BrowserCompat 'css.at-rules.media.overflow-inline' %}
+
+And the `update` media feature.
+
+{% BrowserCompat 'css.at-rules.media.update' %}
+
+Also included is the `linear()` easing function, which you can learn more about in the article [Create complex animation curves in CSS with the `linear()` easing function](https://developer.chrome.com/articles/css-linear-easing-function/).
+
+{% BrowserCompat 'css.types.easing-function.linear-function' %}
+
+### CSS Color Level 4 features
+
+Firefox 113 includes the `color()`, `lab()`, `lch()`, `oklab()`, `oklch()`, and `color-mix()` functional notations, along with the forced-color-adjust property. This means that the new color spaces and functions are now supported across all three major engines. You can learn more about these color spaces and functions in the [High definition CSS color guide](/articles/high-definition-css-color-guide/).
+
+{% BrowserCompat 'css.types.color.color-mix' %}
+
+### More control over `:nth-child()` selections
+
+Firefox 113 also adds the ability to pass a selector list into `:nth-child()` and `nth-last-child()`. Learn more about this, and see examples in the post [More control over :nth-child() selections with the of S syntax](https://developer.chrome.com/articles/css-nth-child-of-s/).
+
+{% BrowserCompat 'css.selectors.nth-child.of_syntax' %}
+
+### Compressions Streams API
+
+Now supported in all three major engines due to inclusion in Firefox 113, the Compressions Streams API enables the compression and decompression of streams. This means that JavaScript applications no longer need to bundle a compression library.
+
+{% BrowserCompat 'api.CompressionStream' %}
+
+### CSS nesting
+
+Safari 16.5 mostly resolved issues, but also adds support for [CSS Nesting](https://developer.chrome.com/articles/css-nesting/), with the new nesting selector `>`, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:
+
+```css
+.nesting {
+  color: hotpink;
+
+  > .is {
+    color: rebeccapurple;
+
+    > .awesome {
+      color: deeppink;
+    }
+  }
+}
+```
+
+{% BrowserCompat 'css.selectors.nesting' %}
+
+### Balancing headlines with `text-wrap: balance`
+
+From Chrome 114 you can use `text-wrap: balance`. This allows you to balance headlines, avoiding the issue of having a single word on the final line, providing a more pleasing and readable result. You can find out more in [CSS text-wrap: balance](https://developer.chrome.com/blog/css-text-wrap-balance/).
+
+{% BrowserCompat 'css.properties.text-wrap' %}
+
+### CHIPS: Cookies Having Independent Partitioned State
+
+As part of the work to [phase out third-party cookies](https://developer.chrome.com/docs/privacy-sandbox/third-party-cookie-phase-out/), [CHIPS](https://developer.chrome.com/docs/privacy-sandbox/chips/) enables opting-in to third-party cookies being partitioned by top-level site using the new cookie attribute `Partitioned`. CHIPS is available in Chrome 114. 
+
+### The Popover API
+
+Also in Chrome 114 is the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API) making it easier to build transient user interface (UI) elements that are displayed on top of all other web app UI.
+
+These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI.
+
+The new popover attribute enables any element to be displayed in the [top layer](https://developer.chrome.com/blog/top-layer-devtools/) automatically. This means no more worrying about positioning, stacking elements, focus or keyboard interactions for the developer.
+
+Learn more in [Introducing the popover API](https://developer.chrome.com/blog/introducing-popover-api/).
+
+{% BrowserCompat 'api.ToggleEvent' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 114](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/114), [Chrome 115](https://developer.chrome.com/blog/chrome-115-beta/), and [Safari 16.6](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes). These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Chrome 115 includes multiple values for the CSS `display` property. This means that `display: flex` becomes `display: block flex` and `display: block` becomes `display: block flow`. The single values are maintained as legacy keywords, and once in Chrome Stable this makes the multiple values available accross all engines. 
+
+Also in Chrome 115 are the `ScrollTimeline` and `ViewTimeline` extensions to the Web Animations specification. These enable [scroll-driven animations](https://developer.chrome.com/articles/scroll-driven-animations/) via CSS and JavaScript. 
+
+Firefox 114 includes the [WebTransport API](https://developer.mozilla.org/docs/Web/API/WebTransport_API), a modern update to WebSockets providing support for multiple streams, unidirectional streams, and out-of-order delivery.
+
+_Photo by [Photoz ace](https://unsplash.com/@photozace)._
diff --git a/src/site/content/en/blog/web-platform-06-2022/index.md b/src/site/content/en/blog/web-platform-06-2022/index.md
new file mode 100644
index 00000000000..bdf67e16bcf
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-06-2022/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: "New to the web platform in June"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during June 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during June 2022.
+date: 2022-06-30
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/gsCJhyYRooIGDjTpOK09.jpg
+alt: A typewriter with the word news on the paper.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In June, [Chrome 103](https://developer.chrome.com/blog/new-in-chrome-103/) and [Firefox 102](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/102) became stable.
+
+### Transform streams and readable byte streams
+
+Firefox 102 includes support for [Transform Streams](https://developer.mozilla.org/docs/Web/API/TransformStream). This enables piping from `ReadableStream` to a `WritableStream`, executing a transformation on the chunks. It's great to see this feature become available in all three engines, making this a very good time to learn about [Streams](/streams/).
+
+{% BrowserCompat 'api.TransformStream' %}
+
+[Readable byte streams](https://developer.mozilla.org/docs/Web/API/Streams_API#bytestream-related_interfaces) are also now supported in Firefox 102, enabling a BYOB (bring your own buffer) reader with the [`ReadableStreamBYOBReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamBYOBReader) interface. This can be used to stream data supplied by the developer.
+
+{% BrowserCompat 'api.ReadableStreamBYOBReader' %}
+
+### Access locally installed fonts
+
+Chrome 103 includes the [Local Font Access API](/local-fonts/), which allows access to the user's locally installed fonts. After requesting access to the fonts installed on the device, call `window.queryLocalFonts()` to get an array of the installed fonts.
+
+```js
+const pickedFonts = await window.queryLocalFonts();
+for (const fontData of pickedFonts) {
+  console.log(fontData.postscriptName);
+  console.log(fontData.fullName);
+  console.log(fontData.family);
+  console.log(fontData.style);
+}
+```
+
+### The `update` media feature
+
+Firefox 102 includes the [`update`](https://developer.mozilla.org/docs/Web/CSS/@media/update-frequency) media feature. This is used to query whether the output device can modify the appearance of content once it has been rendered.
+
+{% BrowserCompat 'css.at-rules.media.update' %}
+
+### A new HTTP status code—103 early hints
+
+Chrome 103 adds a new status code HTTP 103 Early Hints. If the server or CDN knows that a certain set of subresources is required to load a page, it can advise the browser to preconnect to origins or even preload resources as the page that requires them comes in. This requires updates to your server or CDN to take advantage of the feature, [find out more about Early Hints](https://developer.chrome.com/blog/early-hints/).
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+New betas in April were [Chrome 104](https://blog.chromium.org/2022/06/chrome-104-beta-new-media-query-syntax.html), [Firefox 103](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/103), and [Safari 16](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes).
+
+### New syntax for range media queries
+
+Chrome 104 includes the new syntax for [range media queries](https://developer.chrome.com/blog/media-query-range-syntax/), from the Media Queries Level 4 specification. For example, a media query previously written like this:
+
+```css
+@media (min-width: 400px) { … }
+```
+
+Can now be written like this:
+
+```css
+@media (width >= 400px) { … }
+```
+
+{% BrowserCompat 'css.at-rules.media.range_syntax' %}
+
+### Region Capture API
+
+Chrome 104 on desktop also includes the [Region Capture API](https://developer.chrome.com/docs/web-platform/region-capture/). This enables cropping and removing content from captured video before sharing it.
+
+### Safari 16 brings several key features to the browser
+
+Safari 16 looks to be another exciting release from the Safari team. This release adds many of the features that are included in [Interop 2022](/interop-2022/), it's great to see so much landing at this mid-year point. I'm highlighting a few of my favorite features here, but do check out the [release notes](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes) for more.
+
+{% Aside %}
+To try out the Safari 16 beta you need to be running the macOS beta, however many of these features can also be found in [Safari Technology Preview from version 147](https://webkit.org/blog/12960/release-notes-for-safari-technology-preview-147-with-safari-16-features/).
+{% endAside %}
+
+Along with many developers, I'm really excited to see size queries support for Container Queries, a feature that is also behind a flag in Chrome currently.
+
+Also in Safari 16 is support for the `subgrid` value for `grid-template-columns` and `grid-template-rows`. This feature is already in Firefox, and in development in Chrome, and enables grid track sizing to be inherited by nested grids.
+
+{% BrowserCompat 'css.properties.grid-template-columns.subgrid' %}
+
+Also for grid layout is the ability to animate grid tracks.
+
+{% BrowserCompat 'css.properties.grid-template-columns.animation' %}
+
+The [`showPicker()`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/showPicker) method, enabling a canonical way to show a browser picker for dates, time, color, and files is included. You can find out more about this in [show a browser picker for date, time, color, and files](https://developer.chrome.com/blog/show-picker/).
+
+{% BrowserCompat 'api.HTMLInputElement.showPicker' %}
+
+[Accessibility issues](https://hidde.blog/more-accessible-markup-with-display-contents/) for `display: contents` have also been addressed, making this useful feature safe to use without danger of removing elements from the accessibility tree.
+
+These beta features will land in stable browsers soon.
+
+_Hero image by [Nick Fewings](https://unsplash.com/@jannerboy62)._
diff --git a/src/site/content/en/blog/web-platform-06-2023/index.md b/src/site/content/en/blog/web-platform-06-2023/index.md
new file mode 100644
index 00000000000..e68023a7b30
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-06-2023/index.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: "New to the web platform in June"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during June 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during June 2023.
+date: 2023-06-30
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/NM89OHbrQizcSeWCjbaG.jpg
+alt: ''
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In June 2023 [Firefox 114](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/114) became stable, so it's a single browser issue this month. Check out the beta browser releases section for details of several features that are about to become interoperable once those betas become stable.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+### WebTransport API
+
+Firefox 114 includes the [WebTransport API](https://developer.mozilla.org/docs/Web/API/WebTransport_API), a modern update to WebSockets providing support for multiple streams, unidirectional streams, and out-of-order delivery.
+
+{% BrowserCompat 'api.WebTransport' %}
+
+### The SVG `crossorigin` attribute
+
+Firefox 114 also includes the [`crossorigin` attribute](https://developer.mozilla.org/docs/Web/SVG/Attribute/crossorigin), on the `<image>` and `<feImage>` elements in SVG, provides support for configuration of the Cross-Origin Resource Sharing (CORS) requests for the element's fetched data. This works in the same way as the HTML [`crossorigin`](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin) attribute.
+
+{% BrowserCompat 'api.SVGImageElement.crossOrigin' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 115](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/115), and [Safari 17](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes) with [Chrome 115](https://developer.chrome.com/blog/chrome-115-beta/) and [Safari 16.6](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes) still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Firefox 115 supports the CSS [`animation-composition`](https://developer.mozilla.org/docs/Web/CSS/animation-composition) property. Once this version of Firefox becomes stable on July 4th, `animation-composition` will be supported in all three major engines. Learn more in the article [Specify how multiple animation effects should composite with animation-composition](https://developer.chrome.com/articles/css-animation-composition/).
+
+Also reaching interoperability with Firefox 115 are a set of methods for `Array` and `TypedArray`.  `Array.toReversed()`, `Array.toSorted()`, `Array.toSpliced()`, `Array.with()`, `TypedArrays.toReversed()`, `TypedArrays.toSorted()`, and `TypedArrays.with()` return a new array with elements that have been shallow copied.
+
+There is a whole stack of new features and fixes in the Safari 17 beta. Safari 17 adds [Web Apps](https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/) to macOS Sonoma. This means you can add a website to the Dock from the File menu or Share Sheet, and it will open in its own window.
+
+Safari 17 also brings some features to interoperable status—[`contain-intrinsic-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size), [`@counter-style`](https://developer.mozilla.org/docs/Web/CSS/@counter-style), [@font-face size-adjust](https://developer.mozilla.org/docs/Web/CSS/@font-face/size-adjust), and the [`overflow-block`](https://developer.mozilla.org/docs/Web/CSS/@media/overflow-block) and [`overflow-inline`](https://developer.mozilla.org/docs/Web/CSS/@media/overflow-inline) media features will be available in all major engines when Safari 17 ships.
+
+
+_Photo by [Rodrigo Abreu](https://unsplash.com/@rodrigospabreu)._
diff --git a/src/site/content/en/blog/web-platform-07-2022/index.md b/src/site/content/en/blog/web-platform-07-2022/index.md
new file mode 100644
index 00000000000..e4a4ffdc9b6
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-07-2022/index.md
@@ -0,0 +1,57 @@
+---
+layout: post
+title: "New to the web platform in July"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during July 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during July 2022.
+date: 2022-07-29
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/hW4gJsL1RMhkKWMgKn71.jpg
+alt: A balloon heading towards the bright sun.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In July, [Firefox 103](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/103) and [Safari 15.6](https://developer.apple.com/documentation/safari-release-notes/safari-15_6-release-notes) became stable, and with this we get interoperability on a couple of nice CSS features.
+
+### The `backdrop-filter` property
+
+Firefox 103 includes the [`backdrop-filter`](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter) property which is used to apply effects such as blurring to the area behind an element. With this value in Firefox, it is now available in all three engines, though Safari requires the `-webkit` prefix.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYdOrLv',
+  height: 520,
+  tab: 'result'
+} %}
+
+{% BrowserCompat 'css.properties.backdrop-filter' %}
+
+### The `scroll-snap-stop` property
+
+Firefox also implemented the [`scroll-snap-stop`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) property. This property gives you control over whether a scrolling element passes over possible snap positions (with the default value of `normal`) or must snap to the first (with the value `always`). The `scroll-snap-stop` property is now in all three browser engines.
+
+{% BrowserCompat 'css.properties.scroll-snap-stop' %}
+
+Safari 15.6 was a release mostly dedicated to resolving issues, however it did land one new CSS feature with the `:modal` pseudo-class. This feature was also shipped in Firefox 103. The `:modal` pseudo-class selects an element when everything outside of that element cannot be interacted with until the element is dismissed. For example, a [`dialog`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) element opened with `showModal()`.
+
+{% BrowserCompat 'css.selectors.modal' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+Due to release dates falling just outside the month, the only new beta in June was [Firefox 104](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/104).
+
+Included in Firefox 104 is the [CSS Font Loading API](https://developer.mozilla.org/docs/Web/API/CSS_Font_Loading_API) in Web Workers, and the CSS `animation-composition` property, that defines the composition operation used when multiple animations affect the same property simultaneously.
+
+The Safari 16 beta [mentioned last month](/web-platform-06-2022/#safari-16-brings-several-key-features-to-the-browser) is also still ongoing. 
+
+These beta features will land in stable browsers soon.
+
+_Hero image by [Nick Fewings](https://unsplash.com/@jannerboy62)._
diff --git a/src/site/content/en/blog/web-platform-07-2023/index.md b/src/site/content/en/blog/web-platform-07-2023/index.md
new file mode 100644
index 00000000000..3f13d398819
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-07-2023/index.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: "New to the web platform in July"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during July 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during July 2023.
+date: 2023-07-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/2sZ4etEBuCrtkddUJeH6.jpg
+alt: ''
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In July 2023 [Firefox 115](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/115) and [Chrome 115](https://developer.chrome.com/blog/new-in-chrome-115/) became stable. This post takes a look at what that means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+### Multiple values for the CSS `display` property
+
+Chrome 115 includes multiple values for the CSS `display` property. This means that `display: flex` becomes `display: block flex` and `display: block` becomes `display: block flow`. The single values are maintained as legacy keywords, these values are now available in the three major engines.
+
+{% BrowserCompat 'css.properties.display.multi-keyword_values' %}
+
+### Scroll-driven animations
+
+Also in Chrome 115 are the `ScrollTimeline` and `ViewTimeline` extensions to the Web Animations specification. These enable [scroll-driven animations](https://developer.chrome.com/articles/scroll-driven-animations/) via CSS and JavaScript. 
+
+{% BrowserCompat 'api.ScrollTimeline' %}
+
+### Privacy Sandbox APIs
+
+The Privacy Sandbox [relevance and measurement APIs](https://developer.chrome.com/blog/privacy-sandbox-launch/) shipped in Chrome 115. This includes the Topics, Protected Audience, Attribution Reporting, Private Aggregation, Shared Storage, and Fenced Frames APIs.
+
+To understand more about these APIs check out the [Privacy Sandbox demos](https://developer.chrome.com/blog/privacy-sandbox-demos/). 
+
+### The `animation-composition` property
+
+Firefox 115 supports the CSS [`animation-composition`](https://developer.mozilla.org/docs/Web/CSS/animation-composition) property. Making `animation-composition` supported in all three major engines. Learn more in the article [Specify how multiple animation effects should composite with animation-composition](https://developer.chrome.com/articles/css-animation-composition/).
+
+{% BrowserCompat 'css.properties.animation-composition' %}
+
+### Array methods
+
+Also reaching interoperability with Firefox 115 are a set of methods for `Array` and `TypedArray`.  `Array.toReversed()`, `Array.toSorted()`, `Array.toSpliced()`, `Array.with()`, `TypedArrays.toReversed()`, `TypedArrays.toSorted()`, and `TypedArrays.with()` return a new array with elements that have been shallow copied.
+
+{% BrowserCompat 'javascript.builtins.Array.toReversed' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 116](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/116) and [Chrome 116](https://developer.chrome.com/blog/chrome-116-beta/). The [Safari 17](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes)  and [Safari 16.6](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes) betas are still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+Firefox 116 supports the [Audio Output Devices API](https://developer.mozilla.org/docs/Web/API/Audio_Output_Devices_API) on all platforms except for Android. This API allows web applications to redirect audio output to a permitted Bluetooth headset, speakerphone, or other device, instead of having to use the browser or underlying OS default.
+
+Chrome 116 includes CSS Motion Path allowing any graphical object to be animated it along a path specified by the developer. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the `ray()` function) rather than the standard rectangular coordinates used by the `translate()` function, or animating an element along a defined path. This makes it easier to define complex and beautiful 2d spatial transitions. A path can be specified as `circle()`, `ellipse()`, `rect()`, `inset()`, `xywh()`, `polygon()`, `ray()` and `url()`.
+
+Also in Chrome 116 is the [Document Picture-in-Picture API](https://developer.chrome.com/docs/web-platform/document-picture-in-picture/). This enables an always-on-top window that can be populated with arbitrary HTMLElements. This is an expansion upon the existing HTMLVideoElement API that only allows for an HTMLVideoElement to be put into a Picture-in-Picture (PiP) window. 
+
+_Photo by [Jason Leung](https://unsplash.com/@ninjason)._
diff --git a/src/site/content/en/blog/web-platform-08-2022/index.md b/src/site/content/en/blog/web-platform-08-2022/index.md
new file mode 100644
index 00000000000..42fd3e31f5b
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-08-2022/index.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: "New to the web platform in August"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during August 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during August 2022.
+date: 2022-08-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/S1QCCeuPNPnSGPMLqOgn.JPG
+alt: A balloon and ferris wheel.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In August, [Firefox 104](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/104), [Chrome 104](https://developer.chrome.com/blog/new-in-chrome-104/), and [Chrome 105](https://developer.chrome.com/blog/new-in-chrome-105/) became stable.
+
+### Individual transforms
+
+Chrome 104 includes [individual properties for CSS Transforms](/css-individual-transform-properties/). The properties are `scale`, `rotate`, and `translate`, which you can use to individually define those parts of a transformation.
+
+By doing so, Chrome joins Firefox and Safari which already support these properties.
+
+{% BrowserCompat 'css.properties.scale' %}
+
+### New media query syntax
+
+Chrome 104 also includes [the media query range syntax](https://developer.chrome.com/blog/media-query-range-syntax/). This has already been shipped by Firefox, and helps streamline media queries. For example the following media query:
+
+```css
+@media (min-width: 400px) {
+  // Styles for viewports with a width of 400 pixels or greater.
+}
+``` 
+
+Can be written using a comparison operator:
+
+```css
+@media (width >= 400px) {
+  // Styles for viewports with a width of 400 pixels or greater.
+}
+```
+
+{% BrowserCompat 'css.at-rules.media.range_syntax' %}
+
+### Container queries
+
+Chrome 105 is an exciting release bringing the long-awaited feature of container queries to the web platform. While media queries give you a way to query against the size of the viewport, container queries provide a method of querying against the size of a container.
+
+{% BrowserCompat 'css.at-rules.container' %}
+
+To use container queries, turn on containment using the `container-type` property.
+
+```css
+.card-container {
+  container-type: inline-size;
+}
+```
+
+Setting the `container-type` to `inline-size` queries the inline-direction size of the parent. In latin languages like english, this would be the width of the card, since the text flows inline from left to right.
+
+Now, we can use that container to apply styles to any of its children using `@container`:
+
+```css
+.card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@container (max-width: 400px) {
+  .card {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+You can find out more about container queries in the post [@container and :has(): two powerful new responsive APIs landing in Chromium 105](https://developer.chrome.com/blog/has-with-cq-m105/).
+
+### The :has() parent pseudo-class
+
+The post mentioned above also mentions `:has()`. This new pseudo-class The CSS :has() pseudo-class gives you a way to target the parent element and siblings based on conditions. Learn more in [:has() the family selector](https://developer.chrome.com/blog/has-m105/).
+
+{% BrowserCompat 'css.selectors.has' %}
+
+### Sanitizer API
+
+Also in Chrome 105 is the [Sanitizer API](https://developer.chrome.com/blog/new-in-chrome-105/#sanitizer-api). This API builds sanitization into the platform to help remove cross-site scripting vulnerabilities. 
+
+{% BrowserCompat 'api.Sanitizer' %}
+
+Also in Chrome 105 is the [:modal](https://developer.mozilla.org/docs/Web/CSS/:modal) CSS pseudo-class. This matches an element that is in a state in which it excludes all interaction with elements outside it. For example, a `<dialog>` opened with the `showModal()` API.
+
+{% BrowserCompat 'css.selectors.modal' %}
+
+### The findLast() and findLastIndex() methods
+
+Firefox 104 adds support behind a flag for the methods [Array.prototype.findLast()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast), 
+[Array.prototype.findLastIndex()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex), 
+[TypedArray.prototype.findLast()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findLast), and [TypedArray.prototype.findLastIndex()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findLastIndex). These are used to find the value and index (respectively) of the last element in an Array or TypedArray that matches a supplied test function.
+
+{% BrowserCompat 'javascript.builtins.Array.findLast' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.
+
+Due to release dates falling just outside the month, the only new beta in August was [Firefox 105](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/105), which is currently light on details.
+
+The Safari 16 beta [mentioned in June](/web-platform-06-2022/#safari-16-brings-several-key-features-to-the-browser) is also still ongoing. 
diff --git a/src/site/content/en/blog/web-platform-08-2023/index.md b/src/site/content/en/blog/web-platform-08-2023/index.md
new file mode 100644
index 00000000000..7102c2090b6
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-08-2023/index.md
@@ -0,0 +1,54 @@
+---
+layout: post
+title: "New to the web platform in August"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during August 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during August 2023.
+date: 2023-08-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/ygBqztUvoZg39i0SM2MZ.jpg
+alt: ''
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In August 2023 [Firefox 116](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/116), [Firefox 117](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/117), [Safari 16.6](https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes), and [Chrome 116](https://developer.chrome.com/blog/new-in-chrome-116/) became stable. This post takes a look at what that means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+Firefox 116 supports the [Audio Output Devices API](https://developer.mozilla.org/docs/Web/API/Audio_Output_Devices_API) on all platforms except for Android. This API allows web applications to redirect audio output to a permitted Bluetooth headset, speakerphone, or other device, instead of having to use the browser or underlying OS default.
+
+{% BrowserCompat 'api.MediaDevices.selectAudioOutput' %}
+
+Chrome 116 includes CSS Motion Path allowing any graphical object to be animated it along a path specified by the developer. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the `ray()` function) rather than the standard rectangular coordinates used by the `translate()` function, or animating an element along a defined path. This makes it easier to define complex and beautiful 2d spatial transitions. A path can be specified as `circle()`, `ellipse()`, `rect()`, `inset()`, `xywh()`, `polygon()`, `ray()` and `url()`.
+
+{% BrowserCompat 'css.properties.offset-path.basic-shape' %}
+
+Also in Chrome 116 is the [Document Picture-in-Picture API](https://developer.chrome.com/docs/web-platform/document-picture-in-picture/). This enables an always-on-top window that can be populated with arbitrary HTMLElements. This is an expansion upon the existing HTMLVideoElement API that only allows for an HTMLVideoElement to be put into a Picture-in-Picture (PiP) window. 
+
+{% BrowserCompat 'api.DocumentPictureInPicture' %}
+
+Firefox 117 supports [CSS Nesting](https://developer.mozilla.org/docs/Web/CSS/CSS_nesting) and the [`&` nesting selector](https://developer.mozilla.org/docs/Web/CSS/Nesting_selector). This enables the nesting of one style rule inside another. This makes CSS Nesting interoperable with a caveat, Safari and Chrome implemented an older version of the spec, which did not allow nesting of [type selectors](https://developer.mozilla.org/docs/Web/CSS/Type_selectors). Firefox has implemented the new version of the spec which does not require the `&` nesting selector. You can see examples of both versions in [Using CSS Nesting](https://developer.mozilla.org/docs/Web/CSS/CSS_nesting/Using_CSS_nesting).
+
+{% BrowserCompat 'css.selectors.nesting' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 118](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/118) and [Chrome 117](https://developer.chrome.com/blog/chrome-117-beta/). The [Safari 17](https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes) beta is still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+There's not a lot of information available as yet for the next Firefox release. However, Chrome 117 promises some exciting features. For example, some new CSS features that [enable entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/).
+
+The `subgrid` value for `grid-template-columns` and `grid-template-rows` is included in Chrome 117, making this longed for feature interoperable.
+
+Also in Chrome 117 is JavaScript array grouping with the [Object.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy) and [Map.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy) static methods.
+
+Safari 17 beta includes the `popover` attribute, to add support for the [Popover API](https://developer.chrome.com/blog/introducing-popover-api/). 
+
+_Photo by [Courtney Cook](https://unsplash.com/@courtneymcook)._
diff --git a/src/site/content/en/blog/web-platform-09-2022/index.md b/src/site/content/en/blog/web-platform-09-2022/index.md
new file mode 100644
index 00000000000..3b71adfc21d
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-09-2022/index.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: "New to the web platform in September"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during September 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during September 2022.
+date: 2022-09-30
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/CEhqfqUeK6vcU2YpPcqK.jpg
+alt: A globe and some blocks with letters on them.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In September, [Firefox 105](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/105), [Chrome 106](https://developer.chrome.com/blog/new-in-chrome-106/), and [Safari 16](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes) became stable. This means that the September post is full of exciting things for the web platform.
+
+### Container queries
+
+Safari 16 adds support for [container queries](/blog/has-with-cq-m105/), a feature which is now available in two engines. Safari also adds support for the new [container query units](https://www.bram.us/2021/09/21/css-container-queries-container-relative-lengths/). 
+
+{% BrowserCompat 'css.at-rules.container' %}
+
+### Grid layout
+
+Safari has landed support for the `subgrid` value of `grid-template-columns` and `grid-template-rows`. Using this value on a grid that is also a grid item means that instead of defining new tracks, the grid uses those that it spans of the parent. 
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWzqrLR',
+  height: 500,
+  theme: 'dark',
+  tab: 'result'
+} %}
+
+<figcaption>In Safari or Firefox the headers and footers in these cards will align, as their tracks are a subgrid of the parent.</figcaption>
+</figure>
+
+{% BrowserCompat 'css.properties.grid-template-columns.subgrid' %}
+
+Also, in Safari, for grid layout is the ability to animate grid tracks. 
+
+{% BrowserCompat 'css.properties.grid-template-columns.animation' %}
+
+Safari has also added support for [offset-path](https://developer.mozilla.org/docs/Web/CSS/offset-path), [overscroll-behavior](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior), [text-align-last](https://developer.mozilla.org/docs/Web/CSS/text-align-last), and the [resolution](https://developer.mozilla.org/docs/Web/CSS/@media/resolution) media query.
+
+### Encoding API
+
+Firefox 105 supports the [TextDecoderStream](https://developer.mozilla.org/docs/Web/API/TextDecoderStream) and [TextEncoderStream](https://developer.mozilla.org/docs/Web/API/TextEncoderStream) interfaces of the Encoding API. 
+
+{% BrowserCompat 'api.TextEncoderStream' %}
+
+### New Intl APIs
+
+The [Intl APIs](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) help to display content in a localized format and Chrome 106 adds a slew of new number format functionality.
+
+Like other Intl APIs, this shifts the burden to the system—so you don’t need to ship or maintain complex localization code to every user. The API knows where the currency symbol goes, how to format dates and times, or compile a list.
+
+
+### The showPicker() method
+
+Safari 16 contains the [`showPicker()`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/showPicker) method, enabling a canonical way to show a browser picker for dates, time, color, and files is included. You can find out more about this in [show a browser picker for date, time, color, and files](https://developer.chrome.com/blog/show-picker/).
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas this month are [Chrome 107](/blog/chrome-107-beta/), [Safari 16.1](https://developer.apple.com/documentation/safari-release-notes/safari-16_1-release-notes), and [Firefox 106](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/106).
+
+Chrome 107 includes the ability to animate grid tracks, that also shipped in Safari this month. Once this lands in Chrome it will be supported in all three major engines. 
+
+Also in Chrome are some additions to [`getDisplayMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) that aim to prevent [accidental oversharing when screen sharing]((https://developer.chrome.com/blog/avoiding-oversharing-when-screen-sharing/)). 
+
+- The [`displaySurface`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#displaySurface) option can indicate that the web app prefers to offer a specific display surface type (tabs, windows, or screens).
+- The [`surfaceSwitching`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#surfaceSwitching) option indicates whether Chrome should allow the user to dynamically switch between shared tabs.
+- The [`selfBrowserSurface`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#selfBrowserSurface) option can be used to prevent the user from sharing the current tab. This avoids the "hall of mirrors" effect.
+- The [`systemAudio`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#systemAudio) option ensures Chrome only offers relevant audio-capture to the user.
+
+Safari 16.1 includes an additional fix to accessibility of `display: contents`, a fix to dynamic viewport height (`dvh`) units, and support for scroll to text fragments.
+
+_Photo by [Alexandr Podvalny](https://unsplash.com/@freestockpro?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
+  
diff --git a/src/site/content/en/blog/web-platform-09-2023/index.md b/src/site/content/en/blog/web-platform-09-2023/index.md
new file mode 100644
index 00000000000..6a8cdcbc628
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-09-2023/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: "New to the web platform in September"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during September 2023.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during September 2023.
+date: 2023-10-02
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/MjXxPpwmG0mrW7nXz1OY.jpg
+alt: ''
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In September 2023 [Firefox 118](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/118), [Safari 17](https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes), and [Chrome 117](https://developer.chrome.com/blog/new-in-chrome-117/) became stable. This post takes a look at what that means for the web platform.
+
+{% Aside 'caution' %}
+We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the [browser-compat-data release](https://github.com/mdn/browser-compat-data/releases).
+{% endAside %}
+
+The `subgrid` value for `grid-template-columns` and `grid-template-rows` is included in Chrome 117, making this longed for feature interoperable. You can learn more about subgrid in the article [CSS subgrid](/css-subgrid/).
+
+{% BrowserCompat 'css.properties.grid-template-columns.subgrid' %}
+
+Chrome also includes three new CSS features to easily add entry and exit animations, and smoothly animate to and from the top layer dismissible elements such as dialogs and popovers. You can learn about the `transition-behavior` property, `@starting-style` rule, and `overlay` property in the article [Four new CSS features for entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/).
+
+{% BrowserCompat 'css.properties.grid-transition-behavior' %}
+
+Also in Chrome 117 is JavaScript array grouping with the [Object.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy) and [Map.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy) static methods.
+
+{% BrowserCompat 'javascript.builtins.Object.groupBy' %}
+
+Safari 17 includes the `popover` attribute, to add support for the [Popover API](https://developer.chrome.com/blog/introducing-popover-api/). 
+
+{% BrowserCompat 'html.attributes.popover' %}
+
+Safari 17 and Firefox 118 include the HTML [`<search>`](https://developer.mozilla.org/docs/Web/HTML/Element/search) element. This element represents the parts of the page or application that contain funtionality for search or filtering content.
+
+{% BrowserCompat 'html.elements.search' %}
+
+There are lots of new CSS features included in Safari 17, including [`@counter-style`](https://developer.mozilla.org/docs/Web/CSS/@counter-style). This rule lets you define counter styles that are outside the predefined list of style. This feature is now available in all three engines.
+
+{% BrowserCompat 'css.at-rules.counter-style' %}
+
+Firefox 118 includes several additional CSS math functions: `abs()`, `sign()`, `round()`, `mod()`, `rem()`, `pow()`, `sqrt()`, `hypot()`, `log()`, and `exp()`. 
+
+{% BrowserCompat 'css.types.exp' %}
+
+Safari 17 also includes support for HEIC/HEIF images, and JPEG XL.
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 119](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/119), [Safari 17.1](https://developer.apple.com/documentation/safari-release-notes/safari-17_1-release-notes), and [Chrome 118](https://developer.chrome.com/blog/chrome-118-beta/). These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.
+
+The `<search>` element, shipping in Firefox and Safari this month is included in Chrome 118, meaning this feature is quickly landing across all three engines. 
+
+The [Object.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy) and [Map.groupBy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy) static methods are part of Firefox 119.
+
+Chrome 118 includes [CSS scoped styles](https://drafts.csswg.org/css-cascade-6/#scoped-styles) with the `@scope` rule and new media features with `prefers-reduced-transparency` and `scripting`.
+
+Safari 17.1 is currently a release that fixes a range of issues across the platform.
+
+_Photo by [Charles Deluvio](https://unsplash.com/@charlesdeluvio)._
diff --git a/src/site/content/en/blog/web-platform-10-2022/index.md b/src/site/content/en/blog/web-platform-10-2022/index.md
new file mode 100644
index 00000000000..aeafd2b0239
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-10-2022/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: "New to the web platform in October"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during October 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during October 2022.
+date: 2022-10-31
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/Gld0PunAHpxPzZSTPWDv.jpg
+alt: Train tracks and a colorful sunset.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In October, [Firefox 106](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/106), [Chrome 107](https://developer.chrome.com/blog/new-in-chrome-107/), and [Safari 16.1](https://developer.apple.com/documentation/safari-release-notes/safari-16_1-release-notes) became stable. Let's take a look at what this means for the web platform.
+
+### Animation of grid tracks
+
+Thanks to the work of our contributors at Microsoft, Chrome is now able to interpolate `grid-template-columns` and `grid-template-rows` values. This means that grid layouts can smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWqVowx',
+  height: 480,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+<figcaption>Hover over the avatars to see the animation. This example is from the article <a href="/css-animated-grid-layouts/">CSS animated grid layouts</a>, where you can find out more.</figcaption>
+</figure>
+
+{% BrowserCompat 'css.properties.grid-template-columns.animation' %}
+
+### Additions to `getDisplayMedia()`
+
+Also in Chrome are some additions to [`getDisplayMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) that aim to prevent [accidental oversharing when screen sharing](https://developer.chrome.com/blog/avoiding-oversharing-when-screen-sharing/). 
+
+- The [`displaySurface`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#displaySurface) option can indicate that the web app prefers to offer a specific display surface type (tabs, windows, or screens).
+- The [`surfaceSwitching`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#surfaceSwitching) option indicates whether Chrome should allow the user to dynamically switch between shared tabs.
+- The [`selfBrowserSurface`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#selfBrowserSurface) option can be used to prevent the user from sharing the current tab. This avoids the "hall of mirrors" effect.
+- The [`systemAudio`](https://developer.chrome.com/docs/web-platform/screen-sharing-controls/#systemAudio) option ensures Chrome only offers relevant audio-capture to the user.
+
+Safari 16.1 also includes support for `getDisplayMedia`, adding support for capturing a specific Safari window.
+
+### Testing for support of font technology and features from CSS
+
+Firefox has added the `font-tech()` and `font-format()` functions to feature queries with `@supports`. The following example tests for support of [COLRv1 fonts](https://developer.chrome.com/blog/colrv1-fonts/).
+
+```css
+@supports font-tech(color-COLRv1) {
+
+}
+```
+
+You can find more examples [on MDN](https://developer.mozilla.org/docs/Web/CSS/@supports#testing_for_the_support_of_a_font_technology).
+
+### Scroll to text fragment
+
+Safari 16.1 includes support for [scroll to text fragment](https://wicg.github.io/scroll-to-text-fragment/) which adds support for navigating to a URL with a particular text fragment specified. 
+
+### AVIF support
+
+Safari 16 included support for still AVIF images, Safari 16.1 includes support for animated AVIF images on macOS Ventura, iOS 16, and iPadOS 16. 
+
+### Web Push for Safari
+
+Safari 16.1 brings Web Push support to Safari on macOS Ventura. This uses the Push API and Notifications API, you can read more about this in the article [Meet Web Push](https://webkit.org/blog/12945/meet-web-push/). Web Push landing in Safari means that it is now available across all three major engines. 
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas this month are [Chrome 108](https://developer.chrome.com/blog/chrome-108-beta/), [Firefox 107](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/107), and [Safari 16.2](https://developer.apple.com/documentation/safari-release-notes/safari-16_2-release-notes).
+
+Chrome 108 includes support for the `avoid` value of the CSS fragmentation properties `break-before`, `break-after`, and `break-inside` when printing. This value tell the browser to avoid breaking before, after or inside the element it is applied to. For example, the following CSS avoids a figure being broken at a page break.
+
+```css
+figure {
+    break-inside: avoid;
+}
+```
+
+Chrome 108 starts to roll out a change to the way overflow behaves on replaced elements, which may cause visual changes in some circumstances. Read the article [A change to overflow on replaced elements in CSS](https://developer.chrome.com/blog/overflow-replaced-elements/) for more details and to see how to address any issues you see.
+
+There's a change to how the Layout Viewport behaves in Chrome on Android when the on-screen keyboard is shown. Read [Prepare for viewport resize behavior changes coming to Chrome on Android](https://developer.chrome.com/blog/viewport-resize-behavior/) to learn more and find out how to prepare for this shipping to stable next month.
+
+Also in Chrome are the new CSS Viewport Units. These include small (`svw`, `svh`, `svi`, `svb`, `svmin`, `svmax`), large (`lvw`, `lvh`, `lvi`, `lvb`, `lvmin`, `lvmax`), dynamic (`dvw`, `dvh`, `dvi`, `dvb`, `dvmin`, `dvmax`), and logical (`vi`, `vb`) units. These units are already implemented in Firefox and Safari.
+
+Firefox 107 enables COLRv1 font support, joining Chrome in supporting this font technology. Also in fonts, Chrome 108 adds support for the `font-tech()` and `font-format()` functions to feature queries with `@supports`.
+
+Firefox also adds [`contain-intrinsic-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size) support, joining Chrome to make two browsers with support for this feature.
+
+Safari 16.2 Beta includes a bunch of CSS fixes including sizing and scroll snap.
+
+_Photo by [ahmed zid](https://unsplash.com/@ahmedzaid?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/web-platform-11-2022/index.md b/src/site/content/en/blog/web-platform-11-2022/index.md
new file mode 100644
index 00000000000..07a9e778611
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-11-2022/index.md
@@ -0,0 +1,65 @@
+---
+layout: post
+title: "New to the web platform in November"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during November 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during November 2022.
+date: 2022-11-30
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/zS2ZSLPhuxBXwPuelJNi.jpg
+alt: View through a porthole to the sea.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In November, [Firefox 107](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/107), and [Chrome 108](https://developer.chrome.com/blog/new-in-chrome-108/) became stable. Let's take a look at what this means for the web platform.
+
+### A change to Layout Viewport behavior in Chrome on Android
+
+There's a change to how the Layout Viewport behaves from Chrome 108 on Android when the on-screen keyboard is shown. Read [Prepare for viewport resize behavior changes coming to Chrome on Android](https://developer.chrome.com/blog/viewport-resize-behavior/) to learn more.
+
+### New viewport units
+
+Also in Chrome 108 are the new CSS Viewport Units. These include small (`svw`, `svh`, `svi`, `svb`, `svmin`, `svmax`), large (`lvw`, `lvh`, `lvi`, `lvb`, `lvmin`, `lvmax`), dynamic (`dvw`, `dvh`, `dvi`, `dvb`, `dvmin`, `dvmax`), and logical (`vi`, `vb`) units. These units are already implemented in Firefox and Safari, meaning that we now have interop across the three main browser engines for these units.
+
+Read [The large, small, and dynamic viewport units](/viewport-units/).
+
+{% BrowserCompat 'css.types.length.viewport_percentage_units_large' %}
+
+The [`contain-intrinsic-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size) shorthand CSS property is supported in Firefox 107, along with the longhand [`contain-intrinsic-width`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width), [`contain-intrinsic-height`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height) and logical properties [`contain-intrinsic-block-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size) and [`contain-intrinsic-inline-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size).
+
+These are applied to specify the size of a UI element that is subject to size containment. This allows a user agent to determine the size of an element without needing to render its child elements. They are useful when an element is subject to [size containment](https://developer.mozilla.org/docs/Web/CSS/CSS_Containment#size_containment).
+
+{% BrowserCompat 'css.properties.contain-intrinsic-size' %}
+
+### Support for the CSS fragmentation `avoid` keyword
+
+Chrome 108 includes support for the `avoid` value of the CSS fragmentation properties `break-before`, `break-after`, and `break-inside` when printing. This value tell the browser to avoid breaking before, after or inside the element it is applied to. For example, the following CSS avoids a figure being broken at a page break.
+
+```css
+figure {
+    break-inside: avoid;
+}
+```
+
+This addition is due to the inclusion of print support using LayoutNG, this brings a modern, lessy buggy experience. [Learn more about LayoutNG](https://developer.chrome.com/articles/layoutng/).
+
+### Federated Credential Management API
+
+The Federated Credential Management API (FedCM) provides an abstraction for federated identity flows on the web. It exposes a browser mediated dialog that allows users to choose accounts from identify providers to login to websites. FedCM is shipping in Chrome 108, find out more about it in the [FedCM announcement blog post](https://developer.chrome.com/blog/fedcm-shipping/).
+
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. Due to where release dates fall, the only new beta this month is [Firefox 108](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/108), with [Safari 16.2 beta](https://developer.apple.com/documentation/safari-release-notes/safari-16_2-release-notes) still ongoing.
+
+Firefox 108 supports `height` and `width` attributes for the [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) element, when it is a child of a `<picture>` element. These attributes accept the height or width of the image, in pixels, as an integer without a unit.
+
+Implementation of container queries is underway in Firefox. Behind the `layout.css.container-queries.enabled` flag in Firefox 108 beta, you will find the container query length units—`cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax`. These are units of length relative to the size of a query container.
+
+_Photo by [Matt Seymour](https://unsplash.com/@mattseymour?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
diff --git a/src/site/content/en/blog/web-platform-12-2022/index.md b/src/site/content/en/blog/web-platform-12-2022/index.md
new file mode 100644
index 00000000000..50d51ab26f3
--- /dev/null
+++ b/src/site/content/en/blog/web-platform-12-2022/index.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: "New to the web platform in December"
+subhead: >
+  Discover some of the interesting features that landed in stable and beta web browsers during December 2022.
+description: >
+  Discover some of the interesting features that landed in stable and beta web browsers during December 2022.
+date: 2022-12-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/OtTl9DZJArFDEmUfbF7b.jpg
+alt: Tree and winter lights in soft focus.
+authors:
+  - rachelandrew
+tags:
+  - blog
+  - new-to-the-web
+---
+
+## Stable browser releases
+
+In December, [Firefox 108](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/108), and [Safari 16.2](https://developer.apple.com/documentation/safari-release-notes/safari-16_2-release-notes) became stable. Let's take a look at what this means for the web platform.
+
+### Support for `height` and `width` attributes of `<source>`
+
+Firefox 108 supports `height` and `width` attributes for the [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) element, when it is a child of a `<picture>` element. These attributes accept the height or width of the image, in pixels, as an integer without a unit.
+
+{% BrowserCompat 'html.elements.source.height' %}
+
+### Trigonometric CSS functions
+
+Firefox also now supports trigonometric functions in CSS—`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()`.
+
+{% BrowserCompat 'css.types.sin' %}
+
+### Support for last baseline in all three engines
+
+In addition to a number of CSS fixes, Safari 16.2 includes `last baseline` alignment for CSS grid and flexbox layout, which means this feature now supported in the three main browser engines. 
+
+### CSS `font-variant-alternates`
+
+Safari also adds support for additional values for the `font-variant-alternates` CSS property: annotation(value-name), character-variant(value-name), ornaments(value-name), styleset(value-name), stylistic(value-name), swash(value-name), along with the associated `@font-feature-values` at-rule.
+
+{% BrowserCompat 'css.properties.font-variant-alternates' %}
+
+## Beta browser releases
+
+Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are [Firefox 109](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/109), [Safari 16.3](https://developer.apple.com/documentation/safari-release-notes/safari-16_3-release-notes), and [Chrome 109](https://developer.chrome.com/blog/chrome-109-beta/). 
+
+The only new feature listed for Safari 16.3 is the addition of the Content-Security-Policy (CSP) [`prefetch-src`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/prefetch-src) directive. There are also a number of fixes in this beta.
+
+Chrome 109 supports [MathML](https://developer.mozilla.org/docs/Web/MathML) Core, a language for describing mathematical notation embeddable in HTML and SVG. 
+
+New in Chrome on Android is [Secure Payment Confirmation](https://developer.chrome.com/blog/spc-on-android/) (SPC). This is a proposed web standard that allows customers to authenticate with a credit card issuer, bank, or other payment service provider using a platform authenticator—typically activated with a device's screen unlock feature such as a fingerprint sensor.
+
+Also new for Chrome on Android is the Origin Private File System (OPFS), part of the File System Access API on Android. This includes all of the File System Access API surface, minus the `show{OpenFile, SaveFile, Directory}Picker()` methods and the Drag and Drop API integration.
+
+For CSS in Chrome we have the `lh` length unit. This unit is equivalent to the computed value of the line-height property on the element on which it is used. Also, the `hyphenate-limit-chars` property specifying the minimum number of characters in a hyphenated word. 
+
+At the time of writing, and perhaps due to the holiday season, Firefox release notes haven't been updated.
+
+## Other news
+
+This post marks the 12th edition of this [blog post series](/tags/new-to-the-web/), bringing you a selection of interesting things landing in browsers each month in 2022. I'll be back in 2023 to continue sharing some of the interesting things landing on the web platform each month.
+
+Many of the features landing in browsers over this past year, and lots of those things mentioned as "CSS fixes," were part of Interop 2022. For more information, read the Chrome team's [end-of-year report](/interop-2022-wrapup/) on this cross-browser initiative to improve some of the top interoperability pain points on the web platform.
+
+And finally, of interest to people who read this post, is this [list of updates](https://developer.mozilla.org//plus/updates) based on the MDN browser compatibility data, released by our friends over at MDN. 
+  
+_Photo by [Patrick Hendry](https://unsplash.com/@worldsbetweenlines?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)._
+  
\ No newline at end of file
diff --git a/src/site/content/en/blog/web-share-target/hero.png b/src/site/content/en/blog/web-share-target/hero.png
deleted file mode 100644
index b3c023ad310..00000000000
Binary files a/src/site/content/en/blog/web-share-target/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-share-target/index.md b/src/site/content/en/blog/web-share-target/index.md
deleted file mode 100644
index 44c1368597f..00000000000
--- a/src/site/content/en/blog/web-share-target/index.md
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: Receiving shared data with the Web Share Target API
-subhead: Sharing on mobile made simple with the Web Share Target API
-authors:
-  - petelepage
-  - joemedley
-date: 2019-11-08
-updated: 2020-08-05
-hero: hero.png
-alt: An illustration demonstrating that native apps can now share content with web apps.
-description: |
-  On a mobile device, sharing should be as simple as clicking the Share button,
-  choosing an app, then choosing who to share with. The Web Share Target API
-  allows installed web apps to register with the underlying operating system to receive shared content.
-tags:
-  - blog
-  - capabilities
-  - progressive-web-apps
----
-
-On a mobile device, sharing should be as simple as clicking the **Share** button,
-choosing an app, and choosing who to share with. For example, you may want to
-share an interesting article, either by emailing it to friends or tweeting it to
-the world.
-
-In the past, only native apps could register with the operating system to
-receive shares from other installed apps. But with the Web Share Target API,
-installed web apps can register with the underlying operating system
-as a share target to receive shared content.
-Support for text and data was added in Chrome 71, and
-support for files was added in Chrome 76.
-
-{% Aside %}
-The Web Share Target API is only half of the magic. Web apps can share data,
-files, links, or text using the Web Share API. See
-[Share like a native](/web-share/) for details.
-{% endAside %}
-
-<figure class="w-figure w-figure--inline-right">
-  <img src="./wst-send.png" style="max-width: 400px;" alt="Android phone with the 'Share via' drawer open."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    System-level share target picker with an installed PWA as an option.
-  </figcaption>
-</figure>
-
-## See Web Share Target in action
-
-1. Using Chrome 76 or later (Android only), open the [Web Share Target demo][demo].
-2. When prompted, click **Install** to add the app to your home screen, or
-   use the Chrome menu to add it to your home screen.
-3. Open any app that supports native sharing, or use the Share button
-   in the demo app.
-4. From the target picker, choose **Web Share Test**.
-
-After sharing, you should see all of the shared information in
-the web share target web app.
-
-## Register your app as a share target
-
-To register your app as a share target, it needs to meet [Chrome's
-installability criteria][installability]. In addition, before a user can share
-to your app, they must add it to their home screen. This prevents sites from
-randomly adding themselves to the user's share intent chooser and ensures that
-sharing is something that users want to do with your app.
-
-## Update your web app manifest
-
-To register your app as a share target, add a `share_target` entry to its [web
-app manifest][manifest]. This tells the operating system to include your app as
-an option in the intent chooser. What you add to the manifest controls the data
-that your app will accept. There are three common scenarios for the `share_target`
-entry:
-
-- Accepting basic information
-- Accepting application changes
-- Accepting files
-
-{% Aside %}
-You can only have one `share_target` per manifest, if you want to share to
-different places within your app, provide that as an option within the share
-target landing page.
-{% endAside %}
-
-### Accepting basic information
-
-If your target app is merely accepting basic information such as data, links,
-and text, add the following to the `manifest.json` file:
-
-```json
-"share_target": {
-  "action": "/share-target/",
-  "method": "GET",
-  "params": {
-    "title": "title",
-    "text": "text",
-    "url": "url"
-  }
-}
-```
-
-If your application already has a share URL scheme, you can replace the `param`
-values with your existing query parameters. For example, if your share URL
-scheme uses `body` instead of `text`, you could replace `"text": "text"` with `"text":
-"body"`.
-
-The `method` value defaults to `"GET"` if not provided. The `enctype` field, not
-shown in this example, indicates the [type of encoding][encoding] for the data.
-For the `"GET"` method, `enctype` defaults to `"application/x-www-form-urlencoded"` and
-is ignored if it's set to anything else.
-
-### Accepting application changes
-
-If the shared data changes the target app in some way—for example, saving a
-bookmark in the target application—set the `method` value to `"POST"` and include
-the `enctype` field. The example below creates a bookmark in the target app,
-so it uses `"POST"` for the `method` and `"multipart/form-data"` for the
-`enctype`:
-
-```json/4-5
-{
-  "name": "Bookmark",
-  "share_target": {
-    "action": "/bookmark",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "url": "link"
-    }
-  }
-}
-```
-
-### Accepting files
-
-As with application changes, accepting files requires that `method` be `"POST"`
-and that `enctype` be present. Additionally, `enctype` must be
-`"multipart/form-data"`, and a `files` entry must be added.
-
-You must also add a `files` array defining the types of files your app accepts. The
-array elements are entries with two members: a `name` field and an `accept`
-field. The `accept` field takes a MIME type, a file extension, or an array
-containing both. It's best to provide an array that includes both a
-MIME type and a file extension since operating systems differ in which
-they prefer.
-
-```json/5,10-19
-{
-  "name": "Aggregator",
-  "share_target": {
-    "action": "/cgi-bin/aggregate",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "title": "name",
-      "text": "description",
-      "url": "link",
-      "files": [
-        {
-          "name": "records",
-          "accept": ["text/csv", ".csv"]
-        },
-        {
-          "name": "graphs",
-          "accept": "image/svg+xml"
-        }
-      ]
-    }
-  }
-}
-```
-
-## Handle the incoming content
-
-How you deal with the incoming shared data is up to you and depends on your
-app. For example:
-
-* An email client could draft a new email using `title` as the subject of an
-  email, with `text` and `url` concatenated together as the body.
-* A social networking app could draft a new post ignoring `title`, using
-  `text` as the body of the message, and adding `url` as a link. If `text` is
-  missing, the app might use `url` in the body as well. If `url` is missing,
-  the app might scan `text` looking for a URL and add that as a link.
-* A photo sharing app could create a new slideshow using `title` as the
-  slideshow title, `text` as a description, and `files` as the slideshow images.
-* A text messaging app could draft a new message using `text` and `url`
-  concatenated together and dropping `title`.
-
-### Processing GET shares
-
-If the user selects your application, and your `method` is `"GET"` (the
-default), the browser opens a new window at the `action` URL. The browser then
-generates a query string using the URL-encoded values supplied in the manifest.
-For example, if the sharing app provides `title` and `text`, the query string is
-`?title=hello&text=world`. To process this, use a `DOMContentLoaded` event
-listener in your foreground page and parse the query string:
-
-```js
-window.addEventListener('DOMContentLoaded', () => {
-  const parsedUrl = new URL(window.location);
-  // searchParams.get() will properly handle decoding the values.
-  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
-  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
-  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
-});
-```
-
-Be sure to use a service worker to precache the `action` page so that it will
-load quickly and work reliably, even if the user is offline.
-
-### Processing POST shares
-
-If your `method` is `"POST"`, as it would be if your target app accepts a saved
-bookmark or shared files, then the body of the incoming `POST` request contains
-the data passed by the sharing application, encoded using the `enctype` value
-provided in the manifest.
-
-The foreground page cannot process this data directly. Since the page sees the data as
-a request, the page passes it to the service worker, where you can intercept it with a
-`fetch` event listener. From here, you can pass the data back to the foreground
-page using `postMessage()` or pass it on to the server:
-
-```js
-self.addEventListener('fetch', event => {
-  if (event.request.method !== 'POST') {
-    event.respondWith(fetch(event.request));
-    return;
-  }
-
-  event.respondWith((async () => {
-    const formData = await event.request.formData();
-    const link = formData.get('link') || '';
-    const responseUrl = await saveBookmark(link);
-    return Response.redirect(responseUrl, 303);
-  })());
-});
-```
-
-### Verifying shared content
-
-<figure class="w-figure w-figure--inline-right">
-  <img src="./wst-receive.png" style="max-width: 400px;" alt="An Android phone displaying the demo app with shared content."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    The sample sharing target app.
-  </figcaption>
-</figure>
-
-Be sure to verify incoming data. Unfortunately, there is no guarantee that other
-apps will share the appropriate content in the right parameter.
-
-For example, on Android, the [`url` field will be
-empty](https://bugs.chromium.org/p/chromium/issues/detail?id=789379) because
-it's not supported in Android's share system. Instead, URLs will often appear in
-the `text` field, or occasionally in the `title` field.
-
-<div class="w-clearfix"></div>
-
-[spec]: https://wicg.github.io/web-share-target/
-[demo]: https://web-share.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/web-share?path=index.html
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=668389
-[cr-status]: https://www.chromestatus.com/feature/5662315307335680
-[explainer]: https://github.com/WICG/web-share-target/blob/master/docs/explainer.md
-[issues]: https://github.com/WICG/web-share-target/issues
-[wicg-discourse]: https://discourse.wicg.io/t/web-share-target-api-for-websites-to-receive-shared-content/1854
-[manifest]:/add-manifest/
-[installability]:https://developers.google.com/web/fundamentals/app-install-banners/#criteria
-[encoding]:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype
diff --git a/src/site/content/en/blog/web-share-target/wst-receive.png b/src/site/content/en/blog/web-share-target/wst-receive.png
deleted file mode 100644
index f7d1a9f68f6..00000000000
Binary files a/src/site/content/en/blog/web-share-target/wst-receive.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-share-target/wst-send.png b/src/site/content/en/blog/web-share-target/wst-send.png
deleted file mode 100644
index b35e11cb030..00000000000
Binary files a/src/site/content/en/blog/web-share-target/wst-send.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-share/hero.png b/src/site/content/en/blog/web-share/hero.png
deleted file mode 100644
index f94b516323e..00000000000
Binary files a/src/site/content/en/blog/web-share/hero.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-share/index.md b/src/site/content/en/blog/web-share/index.md
index ca4ab9e22ab..59dbfd420ee 100644
--- a/src/site/content/en/blog/web-share/index.md
+++ b/src/site/content/en/blog/web-share/index.md
@@ -1,58 +1,56 @@
 ---
-title: Share like a native app with the Web Share API
-subhead: Web apps can use the same system-provided share capabilities as native apps.
+title: Integrate with the OS sharing UI with the Web Share API
+subhead: Web apps can use the same system-provided share capabilities as platform-specific apps.
 authors:
   - joemedley
 date: 2019-11-08
-updated: 2020-05-12
-hero: hero.png
+updated: 2023-02-02
+hero: image/admin/ruvEms3AeSZvlEI01DKo.png
 alt: An illustration demonstrating that web apps can use the system-provided sharing UI.
 description: |
   With the Web Share API, web apps are able to use the same system-provided
-  share capabilities as native apps. The Web Share API makes it possible for web
+  share capabilities as platform-specific apps. The Web Share API makes it possible for web
   apps to share links, text, and files to other apps installed on the device in
-  the same way as native apps.
+  the same way as platform-specific apps.
 tags:
   - blog
   - capabilities
+feedback:
+  - api
+stack_overflow_tag: web-share
 ---
 
 With the Web Share API, web apps are able to use the same system-provided share
-capabilities as native apps. The Web Share API makes it possible for web apps to
+capabilities as platform-specific apps. The Web Share API makes it possible for web apps to
 share links, text, and files to other apps installed on the device in the same
-way as native apps.
+way as platform-specific apps.
 
 {% Aside %}
   Sharing is only half of the magic. Web apps can also be share
   targets, meaning they can receive data, links, text, and files from
-  native or web apps. See the [Receive shared data](/web-share-target/)
-  post for details on how to register your app as a share target.
+  platform-specific or web apps. Read [Receive shared data](/web-share-target/)
+  to learn how to register your app as a share target.
 {% endAside %}
 
-## Concepts and usage
-
-<figure class="w-figure w-figure--inline-right">
-  <img src="./wst-send.png" style="max-width: 370px" alt="System-level share target picker with an installed PWA as an option."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-float="right">
+  {% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="System-level share target picker with an installed PWA as an option.", width="370", height="349" %}
+  <figcaption>
     System-level share target picker with an installed PWA as an option.
   </figcaption>
 </figure>
 
-### Capabilities and limitations
+## Capabilities and limitations
 
 Web share has the following capabilities and limitations:
-* It can only be used on a site that supports HTTPS.
+* It can only be used on a site that is [accessed via HTTPS](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
+* If the share happens in a third-party iframe, the `allow` attribute must be used.
 * It must be invoked in response to a user action such as a click. Invoking it
   through the `onload` handler is impossible.
-* It can share, URLs, text, or files.
-* As of mid 2020, it is only available on Safari and on Android in Chromium
-  forks. See
-  [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#Browser_compatibility)
-  for details.
+* It can share URLs, text, or files.
 
-<div class="w-clearfix"></div>
+{% BrowserCompat 'api.Navigator.share' %}
 
-### Sharing links and text
+## Sharing links and text
 
 To share links and text, use the `share()` method, which is a promise-based
 method with a required properties object.
@@ -92,15 +90,15 @@ const canonicalElement = document.querySelector('link[rel=canonical]');
 if (canonicalElement !== null) {
     url = canonicalElement.href;
 }
-navigator.share({url: url});
+navigator.share({url});
 ```
 
-### Sharing files
+## Sharing files
 
 To share files, first test for and call `navigator.canShare()`. Then include an
 array of files in the call to `navigator.share()`:
 
-```js/0-4
+```js/0-5
 if (navigator.canShare && navigator.canShare({ files: filesArray })) {
   navigator.share({
     files: filesArray,
@@ -115,17 +113,32 @@ if (navigator.canShare && navigator.canShare({ files: filesArray })) {
 ```
 
 Notice that the sample handles feature detection by testing for
-`naviagator.canShare()` rather than for `navigator.share()`.
+`navigator.canShare()` rather than for `navigator.share()`.
 The data object passed to `canShare()` only supports the `files` property.
-Image, video, audio, and text files can be shared. (See
-[Permitted File Extensions in Chromium](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing).)
-More file types may be added in the future.
+Certain types of audio, image, pdf, video, and text files can be shared.
+See [Permitted File Extensions in Chromium](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing)
+for a complete list. More file types may be added in the future.
+
+## Sharing in third-party iframes
+
+To trigger the share action from within a third-party iframe,
+embed the iframe with the `allow` attribute with a value of `web-share`:
+
+```html
+<!-- On https://example.com/index.html -->
+<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
+```
+
+You can see this in action in a [demo on Glitch](https://web-share-in-third-party-iframe.glitch.me/)
+and view the [source code](https://glitch.com/edit/#!/web-share-in-third-party-iframe?path=index.html%3A17%3A44).
+Failing to provide the attribute will result in a `NotAllowedError` with the message
+`Failed to execute 'share' on 'Navigator': Permission denied`.
 
 ## Santa Tracker case study
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./santa-phone.png" style="max-width: 400px;" alt="The Santa Tracker app showing a share button."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-float="right">
+  {% Img src="image/admin/2I5iOXaOpzEJlEbM694n.png", alt="The Santa Tracker app showing a share button.", width="343", height="600" %}
+  <figcaption>
     Santa Tracker share button.
   </figcaption>
 </figure>
@@ -136,17 +149,42 @@ with games and educational experiences.
 
 In 2016, the Santa Tracker team used the Web Share API on Android.
 This API was a perfect fit for mobile.
-In previous years, the team disabled share buttons on mobile because space is
+In previous years, the team removed share buttons on mobile because space is
 at a premium, and they couldn't justify having several share targets.
 
-But with the Web Share API, they were able to present just one button,
+But with the Web Share API, they were able to present one button,
 saving precious pixels.
 They also found that users shared with Web Share around 20% more than
 users without the API enabled. Head to
 [Santa Tracker](https://santatracker.google.com/) to see Web Share in action.
 
-<div class="w-clearfix"></div>
+## Browser support
+
+Browser support for the Web Share API is nuanced, and it's recommended that you use feature
+detection (as described in the earlier code samples) instead of assuming that a particular method is
+supported.
+
+Here's a rough outline of support for this feature. For detailed information, follow either of the support links.
+
+<dl>
+  <dt><code>navigator.canShare()</code></dt>
+  <dd>{% BrowserCompat 'api.Navigator.canShare' %}</dd>
+  <dt><code>navigator.share()</code></dt>
+  <dd>{% BrowserCompat 'api.Navigator.share' %}</dd>
+</dl>
+
+## Show support for the API
+
+Are you planning to use the Web Share API? Your public support helps the Chromium team
+prioritize features and shows other browser vendors how critical it is to support them.
+
+Send a tweet to [@ChromiumDev][cr-dev-twitter] using the hashtag
+[`#WebShare`](https://twitter.com/search?q=%23WebShare&src=recent_search_click&f=live)
+and let us know where and how you're using it.
 
 ## Helpful Links
 
-[Web Share Demos](https://w3c.github.io/web-share/demos/share-files.html)
+- [Web Share Demos](https://w3c.github.io/web-share/demos/share-files.html)
+- [Scrapbook PWA](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/README.md#web-share-demo)
+
+[cr-dev-twitter]: https://twitter.com/ChromiumDev
diff --git a/src/site/content/en/blog/web-share/santa-phone.png b/src/site/content/en/blog/web-share/santa-phone.png
deleted file mode 100644
index c869c98ce10..00000000000
Binary files a/src/site/content/en/blog/web-share/santa-phone.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-share/wst-send.png b/src/site/content/en/blog/web-share/wst-send.png
deleted file mode 100644
index b35e11cb030..00000000000
Binary files a/src/site/content/en/blog/web-share/wst-send.png and /dev/null differ
diff --git a/src/site/content/en/blog/web-storage/index.md b/src/site/content/en/blog/web-storage/index.md
new file mode 100644
index 00000000000..261a4cc5b91
--- /dev/null
+++ b/src/site/content/en/blog/web-storage/index.md
@@ -0,0 +1,119 @@
+---
+title: Web storage overview
+date: 2016-09-28
+updated: 2018-09-20
+authors:
+  - mco
+tags:
+  - blog
+---
+
+It’s important to choose the right storage mechanisms, both for local device
+storage and for cloud based server storage. A good storage engine makes sure
+your information is saved reliably, reduces bandwidth, and improves
+responsiveness. The right storage caching strategy is a core building block for
+enabling offline mobile web experiences.
+
+This article provides a brief foundation for evaluating storage APIs and
+services, after which we’ll provide a comparison table and some general
+guidance. In the near future, we plan to add resources for understanding
+selected storage topics in greater depth.
+
+## Storage Taxonomy
+
+Let’s start by understanding some of the dimensions by which we can analyze data
+storage for web apps. Later, we’ll use this framework to enumerate and evaluate
+the many storage options available to web developers.
+
+### Data Model
+
+The model for storing units of data determines how data is organized internally,
+which impacts ease of use, cost and performance of storage and retrieval
+requests.
+
+* **Structured:** Data stored in tables with predefined fields, as is typical
+of SQL based database management systems, lends itself well to flexible and
+dynamic queries, where the full range of query types may not be be known a
+priori. A prominent example of a structured datastore in the
+browser is IndexedDB.
+
+* **Key/Value:** Key/Value datastores, and related NoSQL databases, offer the
+ability to store and retrieve unstructured data indexed by a unique key.
+Key/Value datastores are like hash tables in that they allow constant-time
+access to indexed, opaque data. Prominent examples of key/value datastores are
+the Cache API in the browser and Apache Cassandra on the server.
+
+* **Byte Streams:** This simple model stores data as a variable length, opaque
+string of bytes, leaving any form of internal organization to the application
+layer. This model is particularly good for file systems and other hierarchically
+organized blobs of data. Prominent examples of byte stream datastores include
+file systems and cloud storage services.
+
+### Persistence
+
+Storage methods for web apps can be analyzed according to the scope over which
+data is made persistent.
+
+* **Session Persistence:** Data in this category is retained only as long as a
+single web session or browser tab remains active. An example of a storage
+mechanism with session persistence is the Session Storage API.
+
+* **Device Persistence:** Data in this category is retained across sessions and
+browser tabs/windows, within a particular device. An example of a storage
+mechanism with device persistence is the Cache API.
+
+* **Global Persistence:** Data in this category is retained across sessions and
+devices. As such, it is the most robust form of data persistence. An example of
+a storage mechanism with global persistence is Google Cloud Storage.
+
+### Browser Support
+
+Developers should choose an API best suited to their problem domain; however,
+they should also take into account the fact that standardized and well
+established APIs are preferable to custom or proprietary interfaces, because
+they tend to be longer lived and more widely supported. They may also enjoy a
+broader knowledge base and a richer developer ecosystem.
+
+### Transactions
+
+Often, it is important for a collection of related storage operations to
+succeed or fail atomically. Database management systems have traditionally
+supported this feature using the transaction model, where related updates may be
+grouped into arbitrary units. While not always necessary, this is a convenient,
+and sometimes essential, feature in some problem domains.
+
+### Sync/Async
+
+Some storage APIs are synchronous in the sense that storage or retrieval
+requests block the currently active thread until the request is completed. This
+is particularly onerous in web browsers, where the storage request is sharing
+the main thread with the UI. For efficiency and performance reasons,
+asynchronous storage APIs are to be preferred.
+
+## Debugging storage in Chrome DevTools
+
+Check out the following docs to learn more about using Chrome DevTools to
+inspect and debug your web storage API of choice. APIs not mentioned
+here are either not supported in DevTools or are not applicable.
+
+* [Local Storage](https://developer.chrome.com/docs/devtools/storage/localstorage/)
+* [Session Storage](https://developer.chrome.com/docs/devtools/storage/sessionstorage/)
+* [Cookies](https://developer.chrome.com/docs/devtools/storage/cookies/)
+* [Cache](https://developer.chrome.com/docs/devtools/storage/cache/)
+* [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb/)
+
+If you're using multiple storage APIs, check out the Clear Storage feature of
+DevTools. This feature lets you clear multiple stores with a single button
+click. See [Clear service workers, storage, databases, and
+caches](https://developer.chrome.com/docs/devtools/progressive-web-apps/#clear-storage) for
+more information.
+
+## Where to go next…
+
+Now that we’ve reviewed some of the relevant ways to think about storage
+mechanisms and compared the most popular APIs and services available today,
+we'll be adding more content soon to dive more deeply into one or more topics
+of interest:
+
+* [Storage for the web](/storage-for-the-web/)
+* [Cache API: An introduction](/cache-api-quick-guide/)
diff --git a/src/site/content/en/blog/webapks/index.md b/src/site/content/en/blog/webapks/index.md
new file mode 100644
index 00000000000..bcb1340e077
--- /dev/null
+++ b/src/site/content/en/blog/webapks/index.md
@@ -0,0 +1,213 @@
+---
+title: WebAPKs on Android
+subhead: When the user adds your Progressive Web App to their home screen on Android, Chrome automatically generates an APK for you, which we sometimes call a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
+date: 2017-05-21
+updated: 2020-10-14
+authors:
+  - petelepage
+description: |
+  When the user adds your Progressive Web App to their home screen on Android, Chrome automatically generates an APK for you, which we sometimes call a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
+tags:
+  - blog
+---
+
+[Installing a PWA](/progressive-web-apps/) on Android does
+more than just add the Progressive Web App to the user's Home Screen. Chrome
+automatically generates and installs a special APK of your app. We sometimes
+refer to this as a **WebAPK**. Being installed via an APK makes it possible
+for your app to show up in the app launcher, in Android's app settings and
+to register a set of intent filters.
+
+To
+[generate the WebAPK](https://chromium.googlesource.com/chromium/src/+/master/chrome/android/webapk/README.md),
+Chrome looks at the [web app manifest](/add-manifest/) and
+other metadata. [When an update to the manifest is detected](#update-webapk),
+Chrome will need to generate a new APK.
+
+Note: Since the WebAPK is regenerated each time an updated manifest is detected,
+we recommend changing it only when necessary. Don't use the manifest to store
+user specific identifiers, or other other data that might be customized.
+Frequently changing the manifest will increase the overall install time.
+
+## Android intent filters
+
+When a Progressive Web App is installed on Android, it will register a set of
+[intent filters](https://developer.android.com/guide/components/intents-filters)
+for all URLs within the scope of the app. When a user clicks on a link that
+is within the scope of the app, the app will be opened, rather than opening
+within a browser tab.
+
+Consider the following partial `manifest.json`:
+
+```text
+"start_url": "/",
+"display": "standalone",
+```
+
+When a web app using it is launched from the app launcher, it would open
+`https://example.com/` as a standalone app, without any browser chrome.
+
+The WebAPK would include the following intent filters:
+
+```xml
+<intent-filter>
+  <action android:name="android.intent.action.VIEW" />
+  <category android:name="android.intent.category.DEFAULT" />
+  <category android:name="android.intent.category.BROWSABLE" />
+  <data
+    android:scheme="https"
+    android:host="example.com"
+    android:pathPrefix="/" />
+</intent-filter>
+```
+
+If the user clicks on a link within an installed app to
+`https://example.com/read`, it would be caught by the intent and opened
+in the Progressive Web App.
+
+Note: Navigating directly to `https://example.com/app/` from the address bar in
+Chrome will work exactly the same as it does for native apps that have an
+intent filter. Chrome assumes the user **intended** to visit the site and
+will open this site.
+
+### Using `scope` to restrict intent filters
+
+If you don't want your Progressive Web App to handle all URLs within your site,
+you can add the [`scope`](/add-manifest/#scope) property to
+your web app manifest. The `scope` property tells Android to only open your web
+app if the URL matches the `origin` + `scope`. It gives you control over which
+URLs will be handled by your app, and which should be opened in the browser.
+This is helpful when you have your app and other non-app content on the same
+domain.
+
+Consider the following partial `manifest.json`:
+
+```text
+"scope": "/app/",
+"start_url": "/app/",
+"display": "standalone",
+```
+
+When launched from the app launcher, it would open `https://example.com/app/`
+as a standalone app, without any browser chrome.
+
+Like before, the generated WebAPK would include an intent filter, but with a
+different `android:pathPrefix` attribute in the APK's `AndroidManifest.xml`:
+
+```xml
+<intent-filter>
+  <action android:name="android.intent.action.VIEW" />
+  <category android:name="android.intent.category.DEFAULT" />
+  <category android:name="android.intent.category.BROWSABLE" />
+  <data
+    android:scheme="https"
+    android:host="example.com"
+    android:pathPrefix="/app/" />
+</intent-filter>
+```
+
+Let's take a look at a few examples:<br>
+
+{% Compare 'better'%}
+`https://example.com/app/` - within `/app/`
+{% endCompare %}
+
+{% Compare 'better'%}
+`https://example.com/app/read/book` - within `/app/`
+{% endCompare %}
+
+{% Compare 'worse'%}
+`https://example.com/help/` - not in `/app/`
+{% endCompare %}
+
+{% Compare 'worse'%}
+`https://example.com/about/` - not in `/app/`
+{% endCompare %}
+
+
+See [`scope`](/add-manifest/#scope) for more information about
+`scope`, what happens when you don't set it, and how you can use it to define
+the scope of your app.
+
+## Managing permissions
+
+Permissions work in the same way as other web apps and cannot be requested at
+install time. Instead, they must be requested at run time, ideally only when
+you really need them. For example, don't ask for camera permission on first
+load, but instead wait until the user attempts to take a picture.
+
+Note: Android normally grants immediate permission to show notifications for
+installed apps, but apps installed via WebAPKs are not granted this at install
+time; you must request it at runtime within your app.
+
+## Managing storage and app state
+
+Even though the progressive web app is installed via an APK, Chrome uses the
+current profile to store any data, and it will not be segregated away. This
+allows a shared experience between the browser and the installed app. Cookies
+are shared and active, any client side storage is accessible and the service
+worker is installed and ready to go.
+
+Note: Keep in mind that if the user clears their Chrome profile, or chooses
+to delete site data, that will apply to the WebAPK as well.
+
+## Updating the WebAPK
+
+Information on how a WebAPK is updated has moved to
+[How Chrome handles updates to the web app manifest](/manifest-updates/).
+
+## Frequently asked questions
+
+What icons are used to generate the splash screen? :
+
+: We recommend you provide at least two icons:
+[192px and 512px](/add-manifest/#splash-screen) for the splash screen.
+We heard from you that icons
+on the splash screen were too small. WebAPKs generated in Chrome 71 or later
+will show a larger icon on the splash screen. No action is required, as
+long as the recommended icons are provided.
+
+What happens if the user has already installed the native app for the site?
+
+: Like add to home screen today, users will be able to add a site independent
+of any native apps. If you expect users to potentially install both, we
+recommend differentiating the icon or name of your site from your native
+app.
+
+Will my installed site's storage be cleared if the user clears Chrome's cache?
+
+: Yes.
+
+Will my app be re-installed when I get a new device?
+
+: Not at this time, but we think it is an important area and we are
+investigating ways to make it work.
+
+How are permissions handled? Will I see the Chrome prompt or Android's?
+
+: Permissions will still be managed through Chrome. Users will see the Chrome
+prompts to grant permissions and will be able to edit them in Chrome
+settings.
+
+What versions of Android will this work on?
+
+: Progressive web apps can be installed on all versions of Android that
+run Chrome for Android, specifically Jelly Bean and above.
+
+Does this use the WebView?
+
+: No, the site opens in the version of Chrome the user added the site from.
+
+Can we upload the APKs that are created to the Play Store?
+
+: No. If you want to upload your own APK, check out[Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/).
+
+Are these listed in the Play Store?
+
+: No. If you want to upload your own APK for listing in the Play Store, check
+out [Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/).
+
+I am a developer of another browser on Android, can I have this seamless install process? :
+
+: We are working on it. We are committed to making this available to all
+browsers on Android and we will have more details soon.
diff --git a/src/site/content/en/blog/webassembly-feature-detection/index.md b/src/site/content/en/blog/webassembly-feature-detection/index.md
new file mode 100644
index 00000000000..0f1a38c2a0d
--- /dev/null
+++ b/src/site/content/en/blog/webassembly-feature-detection/index.md
@@ -0,0 +1,112 @@
+---
+title: WebAssembly feature detection
+subhead: Learn how to use the newest WebAssembly features while supporting users across all browsers.
+description: Learn how to use the newest WebAssembly features while supporting users across all browsers.
+date: 2022-01-27
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/AQnv9b8SVDwo3y5wSQdG.png
+alt: Spectral lines of phosphorus.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+---
+
+WebAssembly 1.0 was released four years ago, but development didn't stop there. New features are added through the [proposal standardization process](https://github.com/WebAssembly/meetings/blob/main/process/phases.md). As is generally the case with new features on the web, their implementation order and timelines can differ significantly between different engines. If you want to use those new features, you need to ensure that none of your users are left out. In this article you’ll learn an approach for achieving this.
+
+Some new features improve code size by adding new instructions for common operations, some add powerful performance primitives, and others improve developer experience and integration with the rest of the web.
+
+You can find the complete list of proposals and their respective stages in the [official repo](https://github.com/WebAssembly/proposals) or track their implementation status in engines on the official [feature roadmap](https://webassembly.org/roadmap/) page.
+
+To ensure that users of all browsers can use your application, you need to figure out which features you want to use. Then, split them up into groups based on browser support. Then, compile your codebase separately for each of those groups. Finally, on the browser side you need to detect supported features and load the corresponding JavaScript and Wasm bundle.
+
+## Picking and grouping features
+
+Let's walk through those steps by picking some arbitrary feature set as an example. Let's say I've identified that I want to use SIMD, threads, and exception handling in my library for size and performance reasons. Their [browser support](https://webassembly.org/roadmap/) is as follows:
+
+<figure>
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/2HAGqxkbSoNhK03itXBK.png", alt="A table showing browser support of the chosen features.", width="800", height="813" %}
+  <figcaption>
+    View this feature table on <a href="https://webassembly.org/roadmap/">webassembly.org/roadmap</a>.
+  </figcaption>
+</figure>
+
+You can split browsers into the following cohorts to make sure that each user gets the most optimized experience:
+
+* Chrome-based browsers: Threads, SIMD, and exception handling are all supported.
+* Firefox: Thread and SIMD are supported, exception handling is not.
+* Safari: Threads are supported, SIMD and exception handling are not.
+* Other browsers: assume only baseline WebAssembly support.
+
+This breakdown splits by feature support in the latest version of each browser. Modern browsers are evergreen and auto-update, so in the majority of cases you only need to worry about the latest release. However, as long as you include baseline WebAssembly as a fallback cohort, you can still provide a working application even for users with outdated browsers.
+
+## Compiling for different feature sets
+
+WebAssembly doesn't have a built-in way to detect supported features in runtime,  therefore all instructions in the module must be supported on the target. Because of that, you need to compile the source code into Wasm separately for each of those different feature sets.
+
+Each toolchain and build system is different, and you'll need to consult the documentation of your own compiler for how to tweak those features. For the sake of simplicity, I'll use a single-file C++ library in the following example and show how to compile it with Emscripten.
+
+I'll use [SIMD](https://v8.dev/features/simd) via [SSE2 emulation](https://emscripten.org/docs/porting/simd.html#compiling-simd-code-targeting-x86-sse-instruction-set), threads via [Pthreads](https://emscripten.org/docs/porting/pthreads.html) library support, and choose between [Wasm exception handling](https://emscripten.org/docs/porting/exceptions.html#webassembly-exception-handling-proposal) and the [fallback JavaScript implementation](https://emscripten.org/docs/porting/exceptions.html#javascript-based-exception-support):
+
+```bash
+# First bundle: threads + SIMD + Wasm exceptions
+$ emcc main.cpp -o main.threads-simd-exceptions.mjs -pthread -msimd128 -msse2 -fwasm-exceptions
+# Second bundle: threads + SIMD + JS exceptions fallback
+$ emcc main.cpp -o main.threads-simd.mjs -pthread -msimd128 -msse2 -fexceptions
+# Third bundle: threads + JS exception fallback
+$ emcc main.cpp -o main.threads.mjs -pthread -fexceptions
+# Fourth bundle: basic Wasm with JS exceptions fallback
+$ emcc main.cpp -o main.basic.mjs -fexceptions
+```
+
+The C++ code itself can use `#ifdef __EMSCRIPTEN_PTHREADS__` and `#ifdef __SSE2__` to conditionally choose between parallel (threads and SIMD) implementations of the same functions and the serial implementations at compile-time. It would look like this:
+
+```cpp
+void process_data(std::vector<int>& some_input) {
+#ifdef __EMSCRIPTEN_PTHREADS__
+#ifdef __SSE2__
+  // …implementation using threads and SIMD for max speed
+#else
+  // …implementation using threads but not SIMD
+#endif
+#else
+  // …fallback implementation for browsers without those features
+#endif
+}
+```
+
+The exception handling doesn't need `#ifdef` directives, because it can be used in the same way from C++ regardless of the underlying implementation chosen via the compilation flags.
+
+## Loading the correct bundle
+
+Once you have built bundles for all feature cohorts, you need to load the correct one from the main JavaScript application. To do that, first, detect which features are supported in the current browser. You can do that with the [wasm-feature-detect](https://github.com/GoogleChromeLabs/wasm-feature-detect) library. By combining it with [dynamic import](https://v8.dev/features/dynamic-import), you can load the most optimized bundle in any browser:
+
+```js
+import { simd, threads, exceptions } from 'https://unpkg.com/wasm-feature-detect?module';
+
+let initModule;
+if (await threads()) {
+  if (await simd()) {
+    if (await exceptions()) {
+      initModule = import('./main.threads-simd-exceptions.mjs');
+    } else {
+      initModule = import('./main.threads-simd.mjs');
+    }
+  } else {
+    initModule = import('./main.threads.mjs');
+  }
+} else {
+  initModule = import('./main.basic.mjs');
+}
+
+const Module = await initModule();
+// now you can use `Module` Emscripten object like you normally would
+```
+
+## Final words
+
+In this post, I've shown how to choose, build and switch between bundles for different feature sets.
+
+As the number of features grows,the number of feature cohorts may become unmaintainable. To alleviate this problem, you can choose feature cohorts based on your real-world user data, skip the less popular browsers and let them fall back to slightly less optimal cohorts. As long as your application still works for all users, this approach can provide a reasonable balance between progressive enhancement and runtime performance.
+
+In the future, WebAssembly might get a built-in way to detect supported features and switch between different implementations of the same function within the module. However, such a mechanism would itself be a post-MVP feature that you would need to detect and load conditionally using the approach above. Until then, this approach remains the only way to build and load code using new WebAssembly features across all browsers.
diff --git a/src/site/content/en/blog/webassembly-memory-debugging/index.md b/src/site/content/en/blog/webassembly-memory-debugging/index.md
new file mode 100644
index 00000000000..0c6e1ead358
--- /dev/null
+++ b/src/site/content/en/blog/webassembly-memory-debugging/index.md
@@ -0,0 +1,612 @@
+---
+title: Debugging memory leaks in WebAssembly using Emscripten
+subhead: While JavaScript is fairly forgiving in cleaning up after itself, static languages are definitely not…
+description: Learn how to use WebAssembly to bring libraries, written in other languages, to the Web in a safe and idiomatic manner.
+date: 2020-08-13
+hero: image/admin/b6lB9C3Fz4es4D2rPAxC.jpg
+alt: A WebAssembly-branded hose leaking water onto the street.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - memory
+  - security
+  - devtools
+---
+
+[Squoosh.app](https://squoosh.app/) is a PWA that illustrates just how much different image codecs
+and settings can improve image file size without significantly affecting quality. However, it's also
+a technical demo showcasing how you can take libraries written in C++ or Rust and bring them to the
+web.
+
+Being able to port code from existing ecosystems is incredibly valuable, but there are some key
+differences between those static languages and JavaScript. One of those is in their different
+approaches to memory management.
+
+While JavaScript is fairly forgiving in cleaning up after itself, such static languages are
+definitely not. You need to explicitly ask for a new allocated memory and you really need to make
+sure you give it back afterwards, and never use it again. If that doesn't happen, you get leaks… and
+it actually happens fairly regularly. Let's take a look at how you can debug those memory leaks and,
+even better, how you can design your code to avoid them next time.
+
+## Suspicious pattern
+
+Recently, while starting to work on Squoosh, I couldn't help but notice an interesting pattern in
+C++ codec wrappers. Let's take a look at an [ImageQuant](https://pngquant.org/lib/) wrapper as an
+example (reduced to show only object creation and deallocation parts):
+
+```cpp
+liq_attr* attr;
+liq_image* image;
+liq_result* res;
+uint8_t* result;
+
+RawImage quantize(std::string rawimage,
+                  int image_width,
+                  int image_height,
+                  int num_colors,
+                  float dithering) {
+  const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
+  int size = image_width * image_height;
+
+  attr = liq_attr_create();
+  image = liq_image_create_rgba(attr, image_buffer, image_width, image_height, 0);
+  liq_set_max_colors(attr, num_colors);
+  liq_image_quantize(image, attr, &res);
+  liq_set_dithering_level(res, dithering);
+  uint8_t* image8bit = (uint8_t*)malloc(size);
+  result = (uint8_t*)malloc(size * 4);
+
+  // …
+
+  free(image8bit);
+  liq_result_destroy(res);
+  liq_image_destroy(image);
+  liq_attr_destroy(attr);
+
+  return {
+    val(typed_memory_view(image_width * image_height * 4, result)),
+    image_width,
+    image_height
+  };
+}
+
+void free_result() {
+  free(result);
+}
+```
+
+JavaScript (well, TypeScript):
+
+```ts
+export async function process(data: ImageData, opts: QuantizeOptions) {
+  if (!emscriptenModule) {
+    emscriptenModule = initEmscriptenModule(imagequant, wasmUrl);
+  }
+  const module = await emscriptenModule;
+
+  const result = module.quantize(/* … */);
+
+  module.free_result();
+
+  return new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+}
+```
+
+Do you spot an issue? Hint: it's
+[use-after-free](https://owasp.org/www-community/vulnerabilities/Using_freed_memory), but in
+JavaScript!
+
+In Emscripten, `typed_memory_view` returns a JavaScript `Uint8Array` backed by the WebAssembly (Wasm)
+memory buffer, with `byteOffset` and `byteLength` set to the given pointer and length. The main
+point is that this is a TypedArray *view* into a WebAssembly memory buffer, rather than a
+JavaScript-owned copy of the data.
+
+When we call `free_result` from JavaScript, it, in turn, calls a standard C function `free` to mark
+this memory as available for any future allocations, which means the data that our `Uint8Array` view
+points to, can be overwritten with arbitrary data by any future call into Wasm.
+
+Or, some implementation of `free` might even decide to zero-fill the freed memory immediately. The
+`free` that Emscripten uses doesn't do that, but we are relying on an implementation detail here
+that cannot be guaranteed.
+
+Or, even if the memory behind the pointer gets preserved, new allocation might need to grow the
+WebAssembly memory. When `WebAssembly.Memory` is grown either via JavaScript API, or corresponding
+`memory.grow` instruction, it invalidates the existing `ArrayBuffer` and, transitively, any views
+backed by it.
+
+Let me use the DevTools (or Node.js) console to demonstrate this behavior:
+
+```js
+> memory = new WebAssembly.Memory({ initial: 1 })
+Memory {}
+
+> view = new Uint8Array(memory.buffer, 42, 10)
+Uint8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+// ^ all good, we got a 10 bytes long view at address 42
+
+> view.buffer
+ArrayBuffer(65536) {}
+// ^ its buffer is the same as the one used for WebAssembly memory
+//   (the size of the buffer is 1 WebAssembly "page" == 64KB)
+
+> memory.grow(1)
+1
+// ^ let's say we grow Wasm memory by +1 page to fit some new data
+
+> view
+Uint8Array []
+// ^ our original view is no longer valid and looks empty!
+
+> view.buffer
+ArrayBuffer(0) {}
+// ^ its buffer got invalidated as well and turned into an empty one
+```
+
+Finally, even if we don't explicitly call into Wasm again between `free_result` and `new
+Uint8ClampedArray`, at some point we might add multithreading support to our codecs. In that case it
+could be a completely different thread that overwrites the data just before we manage to clone it.
+
+## Looking for memory bugs
+
+Just in case, I've decided to go further and check if this code exhibits any issues in practice.
+This seems like a perfect opportunity to try out the new(ish) [Emscripten sanitizers
+support](https://emscripten.org/docs/debugging/Sanitizers.html) that was added last year
+and presented in our WebAssembly talk at the Chrome Dev Summit:
+
+{% YouTube 'kZrl91SPSpc' %}
+
+{% Aside %} [Sanitizers](https://github.com/google/sanitizers) are special tools that instrument the
+code with auto-generated checks during compilation, which can then help catch common bugs during
+runtime. Since they introduce runtime overhead, they're primarily used during development, although
+in some critical applications they're sometimes enabled on a [subset of] production environments as
+well. {% endAside %}
+
+In this case, we're interested in the
+[AddressSanitizer](https://emscripten.org/docs/debugging/Sanitizers.html#address-sanitizer), which
+can detect various pointer- and memory-related issues. To use it, we need to recompile our codec
+with `-fsanitize=address`:
+
+```shell/11/
+emcc \
+  --bind \
+  ${OPTIMIZE} \
+  --closure 1 \
+  -s ALLOW_MEMORY_GROWTH=1 \
+  -s MODULARIZE=1 \
+  -s 'EXPORT_NAME="imagequant"' \
+  -I node_modules/libimagequant \
+  -o ./imagequant.js \
+  --std=c++11 \
+  imagequant.cpp \
+  -fsanitize=address \
+  node_modules/libimagequant/libimagequant.a
+```
+
+This will automatically enable pointer safety checks, but we also want to find potential memory
+leaks. Since we're using ImageQuant as a library rather than a program, there is no "exit point" at
+which Emscripten could automatically validate that all memory has been freed.
+
+Instead, for such cases the LeakSanitizer (included in the AddressSanitizer) provides the functions
+[`__lsan_do_leak_check` and
+`__lsan_do_recoverable_leak_check`](https://emscripten.org/docs/debugging/Sanitizers.html#memory-leaks),
+which can be manually invoked whenever we expect all memory to be freed and want to validate that
+assumption. `__lsan_do_leak_check` is meant to be used at the end of a running application, when you
+want to abort the process in case any leaks are detected, while `__lsan_do_recoverable_leak_check`
+is more suitable for library use-cases like ours, when you want to print leaks to the console, but
+keep the application running regardless.
+
+Let's expose that second helper via Embind so that we can call it from JavaScript at any time:
+
+```cpp/0,12/
+#include <sanitizer/lsan_interface.h>
+
+// …
+
+void free_result() {
+  free(result);
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  function("zx_quantize", &zx_quantize);
+  function("version", &version);
+  function("free_result", &free_result);
+  function("doLeakCheck", &__lsan_do_recoverable_leak_check);
+}
+```
+
+And invoke it from the JavaScript side once we're done with the image. Doing this from the
+JavaScript side, rather than the C++ one, helps to ensure that all the scopes have been
+exited and all the temporary C++ objects were freed by the time we run those checks:
+
+```typescript/7/
+  // …
+
+  const result = opts.zx
+    ? module.zx_quantize(data.data, data.width, data.height, opts.dither)
+    : module.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
+
+  module.free_result();
+  module.doLeakCheck();
+
+  return new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+}
+```
+
+This gives us a report like the following in the console:
+
+{% Img src="image/admin/6gm8BJfm97IWnBD5vYBc.png", alt="Screenshot of a message &quot;Direct leak of 12 bytes&quot; coming from an anonymous wasm-function[…].", width="768", height="239" %}
+
+Uh-oh, there are some small leaks, but the stacktrace is not very helpful as all the function names
+are mangled. Let's recompile with a basic debugging info to preserve them:
+
+```shell/12/
+emcc \
+  --bind \
+  ${OPTIMIZE} \
+  --closure 1 \
+  -s ALLOW_MEMORY_GROWTH=1 \
+  -s MODULARIZE=1 \
+  -s 'EXPORT_NAME="imagequant"' \
+  -I node_modules/libimagequant \
+  -o ./imagequant.js \
+  --std=c++11 \
+  imagequant.cpp \
+  -fsanitize=address \
+  -g2 \
+  node_modules/libimagequant/libimagequant.a
+```
+
+This looks much better:
+
+{% Img src="image/admin/mISFSSAJBklHqRj8WcaC.png", alt="Screenshot of a message &quot;Direct leak of 12 bytes&quot; coming from a `GenericBindingType<RawImage>::toWireType` function", width="768", height="271" %}
+
+Some parts of the stacktrace still look obscure as they point to Emscripten internals, but we can
+tell that the leak is coming from a `RawImage` conversion to "wire type" (to a JavaScript value) by
+Embind. Indeed, when we look at the code, we can see that we return `RawImage` C++ instances to
+JavaScript, but we never free them on either side.
+
+As a reminder, currently there is no garbage collection integration between JavaScript and
+WebAssembly, although [one is being developed](https://github.com/WebAssembly/gc). Instead, you have
+to manually free any memory and call destructors from the JavaScript side once you're done with the
+object. For Embind specifically, the [official
+docs](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html#memory-management)
+suggest to call a `.delete()` method on exposed C++ classes:
+
+> JavaScript code must explicitly delete any C++ object handles it has received, or the Emscripten
+> heap will grow indefinitely.
+>
+> ```js
+> var x = new Module.MyClass;
+> x.method();
+> x.delete();
+> ```
+
+Indeed, when we do that in JavaScript for our class:
+
+```ts/7/
+  // …
+
+  const result = opts.zx
+    ? module.zx_quantize(data.data, data.width, data.height, opts.dither)
+    : module.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
+
+  module.free_result();
+  result.delete();
+  module.doLeakCheck();
+
+  return new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+}
+```
+
+The leak goes away as expected.
+
+### Discovering more issues with sanitizers
+
+Building other Squoosh codecs with sanitizers reveals both similar as well as some new issues. For
+example, I've got this error in MozJPEG bindings:
+
+{% Img src="image/admin/ArR34HLUVjU5violfalT.png", alt="Screenshot of a message &quot;memory access out of bounds&quot; coming from a `jpeg_start_compress` function", width="768", height="174" %}
+
+Here, it's not a leak, but us writing to a memory outside of the allocated boundaries 😱
+
+Digging into the code of MozJPEG, we find that the problem here is that `jpeg_mem_dest`—the
+function that we use to allocate a memory destination for JPEG—[reuses existing values of
+`outbuffer` and `outsize` when they're
+non-zero](https://github.com/mozilla/mozjpeg/blob/1d2320994dd0d293d39cfaea3d13060b60f32c45/jdatadst.c#L282-L288):
+
+```cpp/0
+if (*outbuffer == NULL || *outsize == 0) {
+  /* Allocate initial buffer */
+  dest->newbuffer = *outbuffer = (unsigned char *) malloc(OUTPUT_BUF_SIZE);
+  if (dest->newbuffer == NULL)
+    ERREXIT1(cinfo, JERR_OUT_OF_MEMORY, 10);
+  *outsize = OUTPUT_BUF_SIZE;
+}
+```
+
+However, we invoke it without initialising either of those variables, which means MozJPEG writes the
+result into a potentially random memory address that happened to be stored in those variables at the
+time of the call!
+
+```cpp/0-1
+uint8_t* output;
+unsigned long size;
+// …
+jpeg_mem_dest(&cinfo, &output, &size);
+```
+
+Zero-initialising both variables before the invocation solves this issue, and now the code reaches a
+memory leak check instead. Luckily, the check passes successfully, indicating that we don't have any
+leaks in this codec.
+
+## Issues with shared state
+
+…Or do we?
+
+We know that our codec bindings store some of the state as well as results in global static
+variables, and MozJPEG has some particularly complicated structures.
+
+```cpp
+uint8_t* last_result;
+struct jpeg_compress_struct cinfo;
+
+val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
+  // …
+}
+```
+
+What if some of those get lazily initialized on the first run, and then improperly reused on future
+runs? Then a single call with a sanitizer would not report them as problematic.
+
+Let's try and process the image a couple of times by randomly clicking at different quality levels
+in the UI. Indeed, now we get the following report:
+
+{% Img src="image/admin/3X5eGopvZ9m5mxySmoWj.png", alt="Screenshot of a message &quot;Direct leak of 262144 bytes&quot; coming from a `jpeg_finish_compress` function", width="768", height="265" %}
+
+262,144 bytes—looks like the whole sample image is leaked from `jpeg_finish_compress`!
+
+After checking out the docs and the official examples, it turns out that `jpeg_finish_compress`
+doesn't free the memory allocated by our earlier `jpeg_mem_dest` call—it only frees the
+compression structure, even though that compression structure already knows about our memory
+destination… Sigh.
+
+We can fix this by freeing the data manually in the `free_result` function:
+
+```cpp/3/
+void free_result() {
+  /* This is an important step since it will release a good deal of memory. */
+  free(last_result);
+  jpeg_destroy_compress(&cinfo);
+}
+```
+
+I could keep hunting those memory bugs one by one, but I think by now it's clear enough that the
+current approach to memory management leads to some nasty systematic issues.
+
+Some of them can be caught by the sanitizer right away. Others require intricate tricks to be caught.
+Finally, there are issues like in the beginning of the post that, as we can see from the logs,
+aren't caught by the sanitizer at all. The reason is that the actual mis-use happens on the
+JavaScript side, into which the sanitizer has no visibility. Those issues will reveal themselves
+only in production or after seemingly unrelated changes to the code in the future.
+
+## Building a safe wrapper
+
+Let's take a couple of steps back, and instead fix all of these problems by restructuring the code
+in a safer way. I'll use ImageQuant wrapper as an example again, but similar refactoring rules apply
+to all the codecs, as well as other similar codebases.
+
+First of all, let's fix the use-after-free issue from the beginning of the post. For that, we need
+to clone the data from the WebAssembly-backed view before marking it as free on the JavaScript side:
+
+```ts/4-8,19/14-18
+  // …
+
+  const result = /* … */;
+
+  const imgData = new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+
+  module.free_result();
+  result.delete();
+  module.doLeakCheck();
+
+  return new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+  return imgData;
+}
+```
+
+Now, let's make sure that we don't share any state in global variables between invocations. This
+will both fix some of the issues we've already seen, as well as will make it easier to use our
+codecs in a multithreaded environment in the future.
+
+To do that, we refactor the C++ wrapper to make sure that each call to the function manages its own
+data using local variables. Then, we can change the signature of our `free_result` function to
+accept the pointer back:
+
+```cpp/15-16,18,23,29/0-3,13-14,22,28
+liq_attr* attr;
+liq_image* image;
+liq_result* res;
+uint8_t* result;
+
+RawImage quantize(std::string rawimage,
+                  int image_width,
+                  int image_height,
+                  int num_colors,
+                  float dithering) {
+  const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
+  int size = image_width * image_height;
+
+  attr = liq_attr_create();
+  image = liq_image_create_rgba(attr, image_buffer, image_width, image_height, 0);
+  liq_attr* attr = liq_attr_create();
+  liq_image* image = liq_image_create_rgba(attr, image_buffer, image_width, image_height, 0);
+  liq_set_max_colors(attr, num_colors);
+  liq_result* res = nullptr;
+  liq_image_quantize(image, attr, &res);
+  liq_set_dithering_level(res, dithering);
+  uint8_t* image8bit = (uint8_t*)malloc(size);
+  result = (uint8_t*)malloc(size * 4);
+  uint8_t* result = (uint8_t*)malloc(size * 4);
+
+  // …
+}
+
+void free_result() {
+void free_result(uint8_t *result) {
+  free(result);
+}
+```
+
+But, since we're already using Embind in Emscripten to interact with JavaScript, we might as well
+make the API even safer by hiding C++ memory management details altogether!
+
+For that, let's move the `new Uint8ClampedArray(…)` part from JavaScript to the C++ side with
+Embind. Then, we can use it to clone the data into the JavaScript memory even *before* returning
+from the function:
+
+```ts/8,11,18-23/0-7,10,13-17
+class RawImage {
+ public:
+  val buffer;
+  int width;
+  int height;
+
+  RawImage(val b, int w, int h) : buffer(b), width(w), height(h) {}
+};
+thread_local const val Uint8ClampedArray = val::global("Uint8ClampedArray");
+
+RawImage quantize(/* … */) {
+val quantize(/* … */) {
+  // …
+  return {
+    val(typed_memory_view(image_width * image_height * 4, result)),
+    image_width,
+    image_height
+  };
+  val js_result = Uint8ClampedArray.new_(typed_memory_view(
+    image_width * image_height * 4,
+    result
+  ));
+  free(result);
+  return js_result;
+}
+```
+
+{% Aside %}
+
+In this case we can return `Uint8ClampedArray`, because JavaScript already knows the
+width and height of the resulting image. If this wasn't the case, then we could return an
+`ImageData` instance instead, which is functionally equivalent to our previous `RawImage` wrapper,
+but is a standard JavaScript-owned object:
+
+```ts
+  // …
+  val js_result = Uint8ClampedArray.new_(typed_memory_view(
+    image_width * image_height * 4,
+    result
+  ));
+  free(result);
+  return ImageData.new_(js_result, image_width, image_height);
+}
+```
+
+{% endAside %}
+
+Note how, with a single change, we both ensure that the resulting byte array is owned by JavaScript
+and not backed by WebAssembly memory, ***and*** get rid of the previously leaked `RawImage` wrapper
+too.
+
+Now JavaScript doesn't have to worry about freeing data at all anymore, and can use the result like
+any other garbage-collected object:
+
+```ts/15/2-14
+  // …
+
+  const result = /* … */;
+
+  const imgData = new ImageData(
+    new Uint8ClampedArray(result.view),
+    result.width,
+    result.height
+  );
+
+  module.free_result();
+  result.delete();
+  // module.doLeakCheck();
+
+  return imgData;
+  return new ImageData(result, result.width, result.height);
+}
+```
+
+This also means we no longer need a custom `free_result` binding on the C++ side:
+
+```cpp//0-3,5-9,13
+void free_result(uint8_t* result) {
+  free(result);
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  class_<RawImage>("RawImage")
+      .property("buffer", &RawImage::buffer)
+      .property("width", &RawImage::width)
+      .property("height", &RawImage::height);
+
+  function("quantize", &quantize);
+  function("zx_quantize", &zx_quantize);
+  function("version", &version);
+  function("free_result", &free_result, allow_raw_pointers());
+}
+```
+
+All in all, our wrapper code became both cleaner and safer at the same time.
+
+After this I went through some further minor improvements to the code of the ImageQuant wrapper and
+replicated similar memory management fixes for other codecs. If you're interested in more details,
+you can see the resulting PR here: [Memory fixes for C++
+codecs](https://github.com/GoogleChromeLabs/squoosh/pull/780).
+
+## Takeaways
+
+What lessons can we learn and share from this refactoring that could be applied to other codebases?
+
+- Don't use memory views backed by WebAssembly—no matter which language it's built from—beyond a
+   single invocation. You can't rely on them surviving any longer than that, and you won't be able
+   to catch these bugs by conventional means, so if you need to store the data for later, copy it to
+   the JavaScript side and store it there.
+- If possible, use a safe memory management language or, at least, safe type wrappers, instead of
+   operating on raw pointers directly. This won't save you from bugs on the JavaScript ↔ WebAssembly
+   boundary, but at least it will reduce the surface for bugs self-contained by the static language code.
+- No matter which language you use, run code with sanitizers during development—they can help to
+   catch not only problems in the static language code, but also some issues across the JavaScript ↔
+   WebAssembly boundary, such as forgetting to call `.delete()` or passing in invalid pointers from
+   the JavaScript side.
+- If possible, avoid exposing unmanaged data and objects from WebAssembly to JavaScript altogether.
+   JavaScript is a garbage-collected language, and manual memory management is not common in it.
+   This can be considered an abstraction leak of the memory model of the language your WebAssembly
+   was built from, and incorrect management is easy to overlook in a JavaScript codebase.
+- This might be obvious, but, like in any other codebase, avoid storing mutable state in global
+   variables. You don't want to debug issues with its reuse across various invocations or even
+   threads, so it's best to keep it as self-contained as possible.
diff --git a/src/site/content/en/blog/webassembly-threads/index.md b/src/site/content/en/blog/webassembly-threads/index.md
new file mode 100644
index 00000000000..c802dca5fe5
--- /dev/null
+++ b/src/site/content/en/blog/webassembly-threads/index.md
@@ -0,0 +1,497 @@
+---
+title: Using WebAssembly threads from C, C++ and Rust
+subhead: Learn how to bring multithreaded applications written in other languages to WebAssembly.
+description: Learn how to bring multithreaded applications written in other languages to WebAssembly.
+date: 2021-07-12
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/YrOqDnzjHFqmZdiNBmbw.jpg
+alt: A needle acting as a prism—splitting a single white thread into multiple colourful ones.
+authors:
+  - rreverser
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - webassembly
+  - performance
+---
+
+WebAssembly threads support is one of the most important performance additions to WebAssembly. It
+allows you to either run parts of your code in parallel on separate cores, or the same code over
+independent parts of the input data, scaling it to as many cores as the user has and significantly
+reducing the overall execution time.
+
+In this article you will learn how to use WebAssembly threads to bring multithreaded applications
+written in languages like C, C++, and Rust to the web.
+
+## How WebAssembly threads work
+
+WebAssembly threads is not a separate feature, but a combination of several components that allows
+WebAssembly apps to use traditional multithreading paradigms on the web.
+
+### Web Workers
+
+First component is the regular
+[Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers) you know and
+love from JavaScript. WebAssembly threads use the `new Worker` constructor to create new underlying
+threads. Each thread loads a JavaScript glue, and then the main thread uses
+[`Worker#postMessage`](https://developer.mozilla.org/docs/Web/API/Worker/postMessage) method to
+share the compiled
+[`WebAssembly.Module`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module)
+as well as a shared
+[`WebAssembly.Memory`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory)
+(see below) with those other threads. This establishes communication and allows all those threads to
+run the same WebAssembly code on the same shared memory without going through JavaScript again.
+
+Web Workers have been around for over a decade now, are widely supported, and don't require any
+special flags.
+
+### `SharedArrayBuffer`
+
+WebAssembly memory is represented by a
+[`WebAssembly.Memory`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory)
+object in the JavaScript API. By default `WebAssembly.Memory` is a wrapper around an
+[`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)—a
+raw byte buffer that can be accessed only by a single thread.
+
+```js
+> new WebAssembly.Memory({ initial:1, maximum:10 }).buffer
+ArrayBuffer { … }
+```
+
+To support multithreading, `WebAssembly.Memory` gained a shared variant too. When created with a
+`shared` flag via the JavaScript API, or by the WebAssembly binary itself, it becomes a wrapper
+around a
+[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)
+instead. It's a variation of `ArrayBuffer` that can be shared with other threads and read or
+modified simultaneously from either side.
+
+```js
+> new WebAssembly.Memory({ initial:1, maximum:10, shared:true }).buffer
+SharedArrayBuffer { … }
+```
+
+Unlike [`postMessage`](https://developer.mozilla.org/docs/Web/API/Worker/postMessage), normally used
+for communication between main thread and Web Workers,
+[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)
+doesn't require copying data or even waiting for the event loop to send and receive messages.
+Instead, any changes are seen by all threads nearly instantly, which makes it a much better
+compilation target for traditional synchronisation primitives.
+
+`SharedArrayBuffer` has a complicated history. It was initially shipped in several browsers
+mid-2017, but had to be disabled in the beginning of 2018 due to discovery of [Spectre
+vulnerabilities](https://developer.chrome.com/blog/meltdown-spectre/). The particular
+reason was that data extraction in Spectre relies on timing attacks—measuring execution time of a
+particular piece of code. To make this kind of attack harder, browsers reduced precision of standard
+timing APIs like `Date.now` and `performance.now`. However, shared memory, combined with a simple
+counter loop running in a separate thread [is also a very reliable way to get high-precision
+timing](https://github.com/tc39/security/issues/3), and it's much harder to mitigate without
+significantly throttling runtime performance.
+
+Instead, Chrome 68 (mid-2018) re-enabled `SharedArrayBuffer` again by leveraging [Site
+Isolation](https://developer.chrome.com/blog/site-isolation)—a feature that puts
+different websites into different processes and makes it much more difficult to use side-channel
+attacks like Spectre. However, this mitigation was still limited only to Chrome desktop, as Site
+Isolation is a fairly expensive feature, and couldn't be enabled by default for all sites on
+low-memory mobile devices nor was it yet implemented by other vendors.
+
+Fast-forward to 2020, Chrome and Firefox both have implementations of Site Isolation, and a standard
+way for websites to opt-in to the feature with [COOP and COEP headers](/coop-coep/). An opt-in
+mechanism allows to use Site Isolation even on low-powered devices where enabling it for all the
+websites would be too expensive. To opt-in, add the following headers to the main document in your
+server configuration:
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+Once you opt-in, you get access to `SharedArrayBuffer` (including `WebAssembly.Memory` backed by a
+`SharedArrayBuffer`), precise timers, memory measurement and other APIs that require an isolated
+origin for security reasons. Check out the [Making your website "cross-origin isolated" using COOP
+and COEP](/coop-coep/) for more details.
+
+### WebAssembly atomics
+
+While `SharedArrayBuffer` allows each thread to read and write to the same memory, for correct
+communication you want to make sure they don't perform conflicting operations at the same time. For example, it's
+possible for one thread to start reading data from a shared address, while another thread is writing
+to it, so the first thread will now get a corrupted result. This category of bugs is known as race
+conditions. In order to prevent race conditions, you need to somehow synchronize those accesses.
+This is where atomic operations come in.
+
+[WebAssembly
+atomics](https://webassembly.github.io/threads/core/syntax/instructions.html#atomic-memory-instructions)
+is an extension to the WebAssembly instruction set that allow to read and write small cells of data
+(usually 32- and 64-bit integers) "atomically". That is, in a way that guarantees that no two
+threads are reading or writing to the same cell at the same time, preventing such conflicts at a low
+level. Additionally, WebAssembly atomics contain two more instruction kinds—"wait" and "notify"—that
+allow one thread to sleep ("wait") on a given address in a shared memory until another thread wakes
+it up via "notify".
+
+All the higher-level synchronisation primitives, including channels, mutexes, and read-write locks
+build upon those instructions.
+
+## How to use WebAssembly threads
+
+### Feature detection
+
+WebAssembly atomics and `SharedArrayBuffer` are relatively new features and aren't yet available in
+all browsers with WebAssembly support. You can find which browsers support new WebAssembly features
+on the [webassembly.org roadmap](https://webassembly.org/roadmap/).
+
+To ensure that all users can load your application, you'll need to implement progressive enhancement
+by building two different versions of Wasm—one with multithreading support and one without it. Then
+load the supported version depending on feature detection results. To detect WebAssembly threads
+support at runtime, use [wasm-feature-detect
+library](https://github.com/GoogleChromeLabs/wasm-feature-detect) and load the module like this:
+
+```js
+import { threads } from 'wasm-feature-detect';
+
+const hasThreads = await threads();
+
+const module = await (
+  hasThreads
+    ? import('./module-with-threads.js')
+    : import('./module-without-threads.js')
+);
+
+// …now use `module` as you normally would
+```
+
+Now let's take a look at how to build a multithreaded version of the WebAssembly module.
+
+### C
+
+In C, particularly on Unix-like systems, the common way to use threads is via [POSIX
+Threads](https://en.wikipedia.org/wiki/POSIX_Threads) provided by the `pthread` library. Emscripten
+[provides an API-compatible implementation](https://emscripten.org/docs/porting/pthreads.html) of
+the `pthread` library built atop Web Workers, shared memory and atomics, so that the same code can
+work on the web without changes.
+
+Let's take a look at an example:
+
+{% Label %}example.c:{% endLabel %}
+
+```c/2,17,19
+#include <stdio.h>
+#include <unistd.h>
+#include <pthread.h>
+
+void *thread_callback(void *arg)
+{
+    sleep(1);
+    printf("Inside the thread: %d\n", *(int *)arg);
+    return NULL;
+}
+
+int main()
+{
+    puts("Before the thread");
+
+    pthread_t thread_id;
+    int arg = 42;
+    pthread_create(&thread_id, NULL, thread_callback, &arg);
+
+    pthread_join(thread_id, NULL);
+
+    puts("After the thread");
+
+    return 0;
+}
+```
+
+Here the headers for the `pthread` library are included via `pthread.h`. You can also see a couple
+of crucial functions for dealing with threads.
+
+[`pthread_create`](https://man7.org/linux/man-pages/man3/pthread_create.3.html) will create a
+background thread. It takes a destination to store a thread handle in, some thread creation
+attributes (here not passing any, so it's just `NULL`), the callback to be executed in the new
+thread (here `thread_callback`), and an optional argument pointer to pass to that callback in case
+you want to share some data from the main thread—in this example we're sharing a pointer to a
+variable `arg`.
+
+[`pthread_join`](https://man7.org/linux/man-pages/man3/pthread_join.3.html) can be called later at
+any time to wait for the thread to finish the execution, and get the result returned from the
+callback. It accepts the earlier assigned thread handle as well as a pointer to store the result. In
+this case, there aren't any results so the function takes a `NULL` as an argument.
+
+To compile code using threads with Emscripten, you need to invoke `emcc` and pass a `-pthread`
+parameter, as when compiling the same code with Clang or GCC on other platforms:
+
+```shell
+emcc -pthread example.c -o example.js
+```
+
+However, when you try to run it in a browser or Node.js, you'll see a warning and then the program
+will hang:
+
+```text
+Before the thread
+Tried to spawn a new thread, but the thread pool is exhausted.
+This might result in a deadlock unless some threads eventually exit or the code
+explicitly breaks out to the event loop.
+If you want to increase the pool size, use setting `-s PTHREAD_POOL_SIZE=...`.
+If you want to throw an explicit error instead of the risk of deadlocking in those
+cases, use setting `-s PTHREAD_POOL_SIZE_STRICT=2`.
+[…hangs here…]
+```
+
+What happened? The problem is, most of the time-consuming APIs on the web are asynchronous and rely
+on the event loop to execute. This limitation is an important distinction compared to traditional
+environments, where applications normally run I/O in synchronous, blocking manner. Check out the
+blog post about [Using asynchronous web APIs from WebAssembly](/asyncify/) if you'd like to learn
+more.
+
+In this case, the code synchronously invokes `pthread_create` to create a background thread, and
+follows up by another synchronous call to `pthread_join` that waits for the background thread to
+finish execution. However, Web Workers, that are used behind the scenes when this code is compiled
+with Emscripten, are asynchronous. So what happens is, `pthread_create` only _schedules_ a new
+Worker thread to be created on the next event loop run, but then `pthread_join` immediately blocks
+the event loop to wait for that Worker, and by doing so prevents it from ever being created. It's a
+classic example of a [deadlock](https://en.wikipedia.org/wiki/Deadlock).
+
+One way to solve this problem is to create a pool of Workers ahead of time, before the program has
+even started. When `pthread_create` is invoked, it can take a ready-to-use Worker from the pool, run
+the provided callback on its background thread, and return the Worker back to the pool. All of this
+can be done synchronously, so there won't be any deadlocks as long as the pool is sufficiently
+large.
+
+This is exactly what Emscripten allows with the [`-s
+PTHREAD_POOL_SIZE=...`](https://emsettings.surma.technology/#PTHREAD_POOL_SIZE) option. It allows to
+specify a number of threads—either a fixed number, or a JavaScript expression like
+[`navigator.hardwareConcurrency`](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency)
+to create as many threads as there are cores on the CPU. The latter option is helpful when your code
+can scale to an arbitrary number of threads.
+
+In the example above, there is only one thread being created, so instead of reserving all cores it's
+sufficient to use `-s PTHREAD_POOL_SIZE=1`:
+
+```shell
+emcc -pthread -s PTHREAD_POOL_SIZE=1 example.c -o example.js
+```
+
+This time, when you execute it, things work successfully:
+
+
+```text
+Before the thread
+Inside the thread: 42
+After the thread
+Pthread 0x701510 exited.
+```
+
+There is another problem though: see that `sleep(1)` in the code example? It executes in the thread
+callback, meaning off the main thread, so it should be fine, right? Well, it isn't.
+
+When `pthread_join` is called, it has to wait for the thread execution to finish, meaning that if
+the created thread is performing long-running tasks—in this case, sleeping 1 second—then the main
+thread will also have to block for the same amount of time till the results are back. When this JS
+is executed in the browser, it will block the UI thread for 1 second until the thread callback
+returns. This leads to poor user experience.
+
+There are few solutions to this:
+ - `pthread_detach`
+ - `-s PROXY_TO_PTHREAD`
+ - Custom Worker and Comlink
+
+#### pthread_detach
+
+First, if you only need to run some tasks off the main thread, but don't need to wait for the
+results, you can use [`pthread_detach`](https://man7.org/linux/man-pages/man3/pthread_detach.3.html)
+instead of `pthread_join`. This will leave the thread callback running in the background. If you're
+using this option, you can switch off the warning with [`-s
+PTHREAD_POOL_SIZE_STRICT=0`](https://emsettings.surma.technology/#PTHREAD_POOL_SIZE_STRICT).
+
+#### PROXY_TO_PTHREAD
+
+Second, if you're compiling a C application rather than a library, you can use [`-s
+PROXY_TO_PTHREAD`](https://emsettings.surma.technology/#PROXY_TO_PTHREAD) option, which will offload
+the main application code to a separate thread in addition to any nested threads created by the
+application itself. This way, main code can block safely at any time without freezing the UI.
+Incidentally, when using this option, you don't have to precreate the thread pool either—instead,
+Emscripten can leverage the main thread for creating new underlying Workers, and then block the
+helper thread in `pthread_join` without deadlocking.
+
+#### Comlink
+
+Third, if you're working on a library and still need to block, you can create your own Worker,
+import the Emscripten-generated code and expose it with
+[Comlink](https://github.com/GoogleChromeLabs/comlink) to the main thread. Main thread will be able
+to invoke any exported methods as asynchronous functions, and that way will also avoid blocking the
+UI.
+
+In a simple application such as the previous example `-s PROXY_TO_PTHREAD` is the best option:
+
+```shell
+emcc -pthread -s PROXY_TO_PTHREAD example.c -o example.js
+```
+
+### C++
+
+All the same caveats and logic apply in the same way to C++. The only new thing you gain is access
+to higher-level APIs like [`std::thread`](https://en.cppreference.com/w/cpp/thread/thread) and
+[`std::async`](https://en.cppreference.com/w/cpp/thread/async), which use the previously discussed
+`pthread` library under the hood.
+
+So the example above can be rewritten in more idiomatic C++ like this:
+
+{% Label %}example.cpp:{% endLabel %}
+
+```cpp/1,9,14
+#include <iostream>
+#include <thread>
+#include <chrono>
+
+int main()
+{
+    puts("Before the thread");
+
+    int arg = 42;
+    std::thread thread([&]() {
+        std::this_thread::sleep_for(std::chrono::seconds(1));
+        std::cout << "Inside the thread: " << arg << std::endl;
+    });
+
+    thread.join();
+
+    std::cout << "After the thread" << std::endl;
+
+    return 0;
+}
+```
+
+When compiled and executed with similar parameters, it will behave in the same way as the C example:
+
+```shell
+emcc -std=c++11 -pthread -s PROXY_TO_PTHREAD example.cpp -o example.js
+```
+
+Output:
+
+```text
+Before the thread
+Inside the thread: 42
+Pthread 0xc06190 exited.
+After the thread
+Proxied main thread 0xa05c18 finished with return code 0. EXIT_RUNTIME=0 set, so
+keeping main thread alive for asynchronous event operations.
+Pthread 0xa05c18 exited.
+```
+
+### Rust
+
+Unlike Emscripten, Rust doesn't have a specialized end-to-end web target, but instead provides a
+generic `wasm32-unknown-unknown` target for generic WebAssembly output.
+
+If Wasm is intended to be used in a web environment, any interaction with JavaScript APIs is left to
+external libraries and tooling like [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/)
+and [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/). Unfortunately, this means that the
+standard library is not aware of Web Workers and standard APIs such as
+[`std::thread`](https://doc.rust-lang.org/std/thread/) won't work when compiled to WebAssembly.
+
+Luckily, the majority of the ecosystem depends on higher-level libraries to take care of
+multithreading. At that level it's much easier to abstract away all the platform differences.
+
+In particular, [Rayon](https://crates.io/crates/rayon) is the most popular choice for
+data-parallelism in Rust. It allows you to take method chains on regular iterators and, usually with
+a single line change, convert them in a way where they'd run in parallel on all available threads
+instead of sequentially. For example:
+
+```rust/3/2
+pub fn sum_of_squares(numbers: &[i32]) -> i32 {
+  numbers
+  .iter()
+  .par_iter()
+  .map(|x| x * x)
+  .sum()
+}
+```
+
+With this small change, the code will split up the input data, calculate `x * x` and partial sums in
+parallel threads, and in the end add up those partial results together.
+
+To accommodate for platforms without working `std::thread`, Rayon provides hooks that allow to
+define custom logic for spawning and exiting threads.
+
+[wasm-bindgen-rayon](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon) taps into those hooks
+to spawn WebAssembly threads as Web Workers. To use it, you need to add it as a dependency and
+follow the configuration steps described in the
+[docs](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon#setting-up). The example above will
+end up looking like this:
+
+```rust/0-2/
+pub use wasm_bindgen_rayon::init_thread_pool;
+
+#[wasm_bindgen]
+pub fn sum_of_squares(numbers: &[i32]) -> i32 {
+  numbers
+  .par_iter()
+  .map(|x| x * x)
+  .sum()
+}
+```
+
+Once done, the generated JavaScript will export an extra `initThreadPool` function. This function
+will create a pool of Workers and reuse them throughout the lifetime of the program for any
+multithreaded operations done by Rayon.
+
+This pool mechanism is similar to the `-s PTHREAD_POOL_SIZE=...` option in Emscripten explained
+earlier, and also needs to be initialized before the main code to avoid deadlocks:
+
+```js/0,5-7
+import init, { initThreadPool, sum_of_squares } from './pkg/index.js';
+
+// Regular wasm-bindgen initialization.
+await init();
+
+// Thread pool initialization with the given number of threads
+// (pass `navigator.hardwareConcurrency` if you want to use all cores).
+await initThreadPool(navigator.hardwareConcurrency);
+
+// ...now you can invoke any exported functions as you normally would
+console.log(sum_of_squares(new Int32Array([1, 2, 3]))); // 14
+```
+
+Note that the same [caveats](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon#caveats) about
+blocking the main thread apply here too. Even the `sum_of_squares` example still needs to block the
+main thread to wait for the partial results from other threads.
+
+It might be a very short wait or a long one, depending on the complexity of iterators and number of
+available threads, but, to be on the safe side, browser engines actively prevent blocking the main
+thread altogether and such code will throw an error. Instead, you should create a Worker, import the
+`wasm-bindgen`-generated code there, and expose its API with a library like
+[Comlink](https://github.com/GoogleChromeLabs/comlink) to the main thread.
+
+Check out [the wasm-bindgen-rayon
+example](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/tree/main/demo) for an end-to-end
+demo showing:
+
+*   [Feature detection of
+    threads.](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/wasm-worker.js#L27)
+*   [Building single- and multi-threaded versions of the same Rust
+    app.](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/package.json#L4-L5)
+*   [Loading the JS+Wasm generated by wasm-bindgen in a
+    Worker.](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/wasm-worker.js#L28-L31)
+*   [Using wasm-bindgen-rayon to initialize a thread
+    pool.](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/wasm-worker.js#L32)
+*   Using Comlink to [expose Worker's
+    API](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/wasm-worker.js#L44-L46)
+    to [the main
+    thread](https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/blob/e13485d6d64a062b890f5bb3a842b1fe609eb3c1/demo/index.js#L25-L29).
+
+## Real-world use cases
+
+We actively use WebAssembly threads in [Squoosh.app](https://squoosh.app/) for client-side image
+compression—in particular, for formats like AVIF (C++), JPEG-XL (C++), OxiPNG (Rust) and WebP v2
+(C++). Thanks to the multithreading alone, we've seen consistent 1.5x-3x speed-ups (exact ratio
+differs per codec), and were able to push those numbers even further by combining WebAssembly threads
+with [WebAssembly SIMD](https://v8.dev/features/simd)!
+
+Google Earth is another notable service that's using WebAssembly threads for its [web
+version](https://earth.google.com/web/).
+
+[FFMPEG.WASM](https://ffmpegwasm.netlify.app) is a WebAssembly version of a popular
+[FFmpeg](https://www.ffmpeg.org/) multimedia toolchain that uses WebAssembly threads to efficiently
+encode videos directly in the browser.
+
+There are many more exciting examples using WebAssembly threads out there. Be sure to check out
+the demos and bring your own multithreaded applications and libraries to the web!
diff --git a/src/site/content/en/blog/webaudio-fieldrunners/index.md b/src/site/content/en/blog/webaudio-fieldrunners/index.md
new file mode 100644
index 00000000000..68b7b22eb55
--- /dev/null
+++ b/src/site/content/en/blog/webaudio-fieldrunners/index.md
@@ -0,0 +1,328 @@
+---
+layout: post
+title: Case Study - A Tale of an HTML5 Game with Web Audio
+authors:
+  - zgoddard
+date: 2012-04-24
+tags:
+  - blog
+---
+
+## Fieldrunners
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9cFnKkN7rru58JS1RevH.png", alt="Fieldrunners screenshot", width="800", height="601" %}
+  <figcaption>Fieldrunners screenshot</figcaption>
+</figure>
+
+Fieldrunners is an award-winning tower-defense style game that was originally released for [iPhone](http://itunes.apple.com/us/app/fieldrunners/id292421271?mt=8) in 2008. Since then it has been ported to many other platforms. One of the most recent platforms was the [Chrome browser](https://chrome.google.com/webstore/detail/lkpikhjbfbffdblahfidklcohlaeabak) in October 2011. One of the challenges of porting Fieldrunners to an HTML5 platform was how to play sound.
+
+Fieldrunners does not make complicated use of sound effects, but it does comes with some expectations of how it can interact with its sound effects. The game has 88 sound effects of which a large number can be expected to playing at one time. Most of these sounds are very short and need to be played in as timely a fashion as possible to avoid creating any disconnect with the graphical presentation.
+
+## Some Challenges Appeared
+
+While porting Fieldrunners to HTML5 we encountered issues with audio playback with the Audio tag and early on decided to focus on the [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) instead. Using WebAudio helped us solve issues like giving us the high number of concurrent effects playing back that Fieldrunners requires. Still, while developing an audio system for Fieldrunners HTML5 we hit a few nuanced problems that other developers may want to be aware of.
+
+### Nature of AudioBufferSourceNodes
+
+AudioBufferSourceNodes are your primary method of playing sounds with WebAudio. It is very important to understand that they are a one time use object. You create an AudioBufferSourceNode, assign it a buffer, connect it to the graph, and play it with noteOn or noteGrainOn. After that you can call noteOff to stop playback, but you won't be able to play the source again by calling noteOn or noteGrainOn - you have to create another AudioBufferSourceNode. You can - and this is key - reuse the same underlying AudioBuffer object, however (in fact, you can even have multiple active AudioBufferSourceNodes that point to the same AudioBuffer instance!).  You can find a playback snippet from Fieldrunners in Give Me a Beat.
+
+### Non-caching content
+
+At release the Fieldrunners HTML5 server showed a massive number of requests for music files. This result arose from the Chrome 15 proceeding to download the file in chunks and then not cache it. In response at the time we decided to load music files like the rest of our audio files. Doing so is suboptimal but some versions of other browsers still do this.
+
+### Silencing when out of focus
+
+Detecting when your game's tab is out of focus was difficult previously. Fieldrunners began porting before Chrome 13 where the [Page Visibility API](http://www.w3.org/TR/2011/WD-page-visibility-20110602/) replaced the need for our convoluted code to detect tab blurring. Every game should use the Visibility API to write a small snippet to mute or pause their sound if not pause the whole game. Since Fieldrunners used the [requestAnimationFrame](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) API, game pausing was implicitly handled, but not sound pausing.
+
+### Pausing sounds
+
+Oddly enough while getting feedback to this article we were informed that the technique we were using for pausing sounds wasn't appropriate - we were utilizing a bug in Web Audio's current implementation to pause playback of sounds. Since this will be fixed in the future, you cannot just pause sound by disconnecting a node or subgraph to halt playback.
+
+## A Simple Web Audio Node Architecture
+
+Fieldrunners has a very simple audio model. That model can support the following feature set:
+
+- Control the volume of sound effects.
+- Control the volume of the background music track.
+- Mute all audio. 
+- Turn off playing sounds when the game is paused.
+- Turn those same sounds back on when the game is resumed.
+- Turn off all audio when the game's tab loses focus.
+- Restart playback after a sound is played as needed.
+
+To achieve the above features with Web Audio, it used 3 of the provided possible nodes: DestinationNode, GainNode, AudioBufferSourceNode. The AudioBufferSourceNodes play the sounds. The GainNodes connect the AudioBufferSourceNodes together. The DestinationNode, created by the Web Audio context, called destination, plays sounds for the player. Web Audio has many more types of nodes but with only these we can create a very simple graph for sounds in a game.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CYp9mdaf3OPvfd4d1ivg.png", alt="Node Graph Chart", width="683", height="235" %}
+</figure>
+
+A Web Audio node graph leads from the leaf nodes to the destination node. Fieldrunners used 6 permanent gain nodes, but 3 is enough to allow easy control over volume and connect a larger number of temporary nodes that will playback buffers. First a master gain node attaching every child node to the destination. Immediately attached to the master gain node is two gain nodes, one for a music channel and another to link all sound effects.
+
+Fieldrunners had 3 extra gain nodes due to the incorrect usage of a bug as a feature. We used those nodes to clip off groups of playing sounds from the graph which stops their progress. We did this to pause sounds. As it is not correct, we would now only use 3 total gain nodes as described above. Many of the snippets following will include our incorrect nodes, showing what we did, and how we would fix that in the short term. But in the long term you would want to not use our nodes after our coreEffectsGain node.
+
+```js
+function AudioManager() {
+  // map for loaded sounds
+  this.sounds = {};
+
+  // create our permanent nodes
+  this.nodes = {
+    destination: this.audioContext.destination,
+    masterGain: this.audioContext.createGain(),
+
+    backgroundMusicGain: this.audioContext.createGain(),
+
+    coreEffectsGain: this.audioContext.createGain(),
+    effectsGain: this.audioContext.createGain(),
+    pausedEffectsGain: this.audioContext.createGain()
+  };
+
+  // and setup the graph
+  this.nodes.masterGain.connect( this.nodes.destination );
+
+  this.nodes.backgroundMusicGain.connect( this.nodes.masterGain );
+
+  this.nodes.coreEffectsGain.connect( this.nodes.masterGain );
+  this.nodes.effectsGain.connect( this.nodes.coreEffectsGain );
+  this.nodes.pausedEffectsGain.connect( this.nodes.coreEffectsGain );
+}
+```
+
+Most games allow separate control of the sound effects and the music. This can be easily accomplished with our above graph. Each gain node has a "gain" attribute that can be set to any decimal value between 0 and 1, which can be used to essentially control volume. Since we want to control the volume of the music and sound effect channels separately we have a gain node for each where we could control their volume.
+
+```js
+function setArbitraryVolume() {
+  var musicGainNode = this.nodes.backgroundMusicGain;
+
+  // set music volume to 50%
+  musicGainNode.gain.value = 0.5;
+}
+```
+
+We can use this same ability to control the volume of everything, of sound effects and music. Setting the gain of the master node will affect all sound from the game. If you set the gain value to 0, you will mute the sound and music.
+AudioBufferSourceNodes have a gain parameter as well. You could track a list of all playing sound and adjust their gain values individually for overall volume. If you were making sound effects with Audio tags, this is what you would have to do. Instead Web Audio's node graph makes it much easier to modify the sound volume of countless sounds.
+Controlling volume this way also gives you extra power without complication. We could just attach a AudioBufferSourceNode directly to the master node for playing music and control its own gain. But you would have to set this value every time you create a AudioBufferSourceNode for the purpose of playing music. Instead you change one node only when a player changes the music volume and at launch. Now we have a gain value on buffer sources to do something else. For music one common use can be for creating a cross fade from one audio track to another as one leaves and another comes in. Web Audio provides a nice method for performing this easily.
+
+```js
+function arbitraryCrossfade( track1, track2 ) {
+  track1.gain.linearRampToValueAtTime( 0, 1 );
+  track2.gain.linearRampToValueAtTime( 1, 1 );
+}
+```
+
+Fieldrunners did not make specific use of crossfading. Had we known of WebAudio's value setting functionality during our original pass of the sound system we would likely have.
+
+## Pausing Sounds
+
+When a player pauses a game they can expect some sounds to still play. Sound is a great part of feedback for the common pressing of user interface elements in game menus. As Fieldrunners has a number of interfaces for the user to interact with while the game is paused we still want those playing. However we do not want any long or looping sounds to keep playing. It is pretty easy to stop those sounds with Web Audio or at least we thought so.
+
+```js
+AudioManager.prototype.pauseEffects = function() {
+  this.nodes.effectsGain.disconnect();
+}
+```
+
+The paused effects node is still connected. Any sounds that are allowed to ignore the paused state of the game will continue to play through that. When the game unpauses we can reconnect those nodes and have all sound playing again instantly.
+
+```js
+AudioManager.prototype.resumeEffects = function() {
+  this.nodes.effectsGain.connect( this.nodes.coreEffectsGain );
+}
+```
+
+After shipping Fieldrunners, we discovered that disconnecting a node or subgraph alone will not pause the playback of the AudioBufferSourceNodes. We actually took advantage of a bug in WebAudio that currently stops playback of nodes not connected to the Destination node in the graph. So to make sure we are ready for that future fix we need some code like the following:
+
+```js
+AudioManager.prototype.pauseEffects = function() {
+  this.nodes.effectsGain.disconnect();
+
+  var now = Date.now();
+  for ( var name in this.sounds ) {
+    var sound = this.sounds[ name ];
+
+    if ( !sound.ignorePause &amp;&amp; ( now - sound.source.noteOnAt &lt; sound.buffer.duration * 1000 ) ) {
+      sound.pausedAt = now - sound.source.noteOnAt;
+      sound.source.noteOff();
+    }
+  }
+}
+
+AudioManager.prototype.resumeEffects = function() {
+  this.nodes.effectsGain.connect( this.nodes.coreEffectsGain );
+
+  var now = Date.now();
+  for ( var name in this.sounds ) {
+    if ( sound.pausedAt ) {
+      this.play( sound.name );
+      delete sound.pausedAt;
+    }
+  }
+};
+```
+
+If we had known this earlier, that we were abusing a bug, our audio code's structure would be very different. As such, this has affected a number of sections of this article. It has a direct effect here but also in our code snippets in Losing Focus and Give Me a Beat. Knowing how this actually works requires changes in both the Fieldrunners node graph (since we created nodes for shorting out playback) and the additional code that will record and provide the paused states that Web Audio does not do on its own.
+
+## Losing Focus
+
+Our master node comes into play for this feature. When a browser user switches to another tab, the game is no longer visible. Out of sight, out of mind, and so should the sound be gone. There are tricks that can be done to determine specific visibility states for a game's page but it has become vastly easier with the Visibility API.
+
+Fieldrunners will only play as the active tab thanks to using requestAnimationFrame for calling its update loop. But the Web Audio context will continue to play looped effects and background tracks while a user is in another tab. But we can stop that with a very small Visibility API aware snippet.
+
+```js 
+function AudioManager() {
+  // map and node setup
+  // ...
+
+  // disable all sound when on other tabs
+  var self = this;
+  window.addEventListener( 'webkitvisibilitychange', function( e ) {
+    if ( document.webkitHidden ) {
+      self.nodes.masterGain.disconnect();
+
+      // As noted in Pausing Sounds disconnecting isn't enough.
+      // For Fieldrunners calling our new pauseEffects method would be
+      // enough to accomplish that, though we may still need some logic
+      // to not resume if already paused.
+      self.pauseEffects();
+    } else {
+      self.nodes.masterGain.connect( this.nodes.destination );
+      self.resumeEffects();
+    }
+  });
+}
+```
+
+Before writing this article, we thought disconnecting the master would be enough to pause all sound instead of muting it. By disconnecting the node at the time, we stopped it and its children from processing and playing. When it was reconnected all of the sounds and music would begin playing where they left at just as the game play will continue where it left at. But this is unexpected behaviour. It isn't enough to just disconnect to halt playback.
+
+The Page Visibility API makes it very easy to know when your tab is no longer in focus. If you already have effective code to pause sounds, it only takes a few lines to write in sound pausing when the games tab is hidden.
+
+## Give Me a Beat
+
+We have a few things set up now. We have a graph of nodes. We can pause sounds when the player pauses the game, and play new sounds for elements such as game menus. We can pause all sound and music when the user switches to a new tab. Now we need to actually play a sound.
+
+Instead of playing multiple copies of the sound for multiple instances of a game entity like a character dying, Fieldrunners plays one sound only once for its duration. If the sound is needed after it has finished playing then it can restart but not while already playing. This is a decision for Fieldrunners' audio design as it has sounds that are requested to be played rapidly which would otherwise stutter if allowed to restart or create an un-enjoyable cacophony if allowed to play multiple instances. AudioBufferSourceNodes are expected to be used as one-shots. Create a node, attach a buffer, set loop boolean value if needed, connect to a node on the graph that will lead to destination, call noteOn or noteGrainOn, and optionally call noteOff.
+
+For Fieldrunners it looks something like:
+
+```js
+AudioManager.prototype.play = function( options ) {
+  var now = Date.now(),
+    // pull from a map of loaded audio buffers
+    sound = this.sounds[ options.name ],
+    channel,
+    source,
+    resumeSource;
+
+  if ( !sound ) {
+    return;
+  }
+
+  if ( sound.source ) {
+    var source = sound.source;
+    if ( !options.loop &amp;&amp; now - source.noteOnAt &gt; sound.buffer.duration * 1000 ) {
+      // discard the previous source node
+      source.stop( 0 );
+      source.disconnect();
+    } else {
+      return;
+    }
+  }
+
+  source = this.audioContext.createBufferSource();
+  sound.source = source;
+  // track when the source is started to know if it should still be playing
+  source.noteOnAt = now;
+
+  // help with pausing
+  sound.ignorePause = !!options.ignorePause;
+
+  if ( options.ignorePause ) {
+    channel = this.nodes.pausedEffectsGain;
+  } else {
+    channel = this.nodes.effectsGain;
+  }
+
+  source.buffer = sound.buffer;
+  source.connect( channel );
+  source.loop = options.loop || false;
+
+  // Fieldrunners' current code doesn't consider sound.pausedAt.
+  // This is an added section to assist the new pausing code.
+  if ( sound.pausedAt ) {
+    source.start( ( sound.buffer.duration * 1000 - sound.pausedAt ) / 1000 );
+    source.noteOnAt = now + sound.buffer.duration * 1000 - sound.pausedAt;
+
+    // if you needed to precisely stop sounds, you'd want to store this
+    resumeSource = this.audioContext.createBufferSource();
+    resumeSource.buffer = sound.buffer;
+    resumeSource.connect( channel );
+    resumeSource.start(
+      0,
+      sound.pausedAt,
+      sound.buffer.duration - sound.pausedAt / 1000
+    );
+  } else {
+    // start play immediately with a value of 0 or less
+    source.start( 0 );
+  }
+}
+```
+
+## Too Much Streaming
+
+Fieldrunners was originally launched with background music played with an Audio tag. At release, we discovered that music files were being requested an disproportionate number of times to that which the rest of the game content was requested. After some research we discovered that at the time the Chrome browser was not caching the streamed chunks of the music files. This resulted in the browser requesting the playing track every few minutes as it finished. In more recent testing, Chrome cached streamed tracks however other browsers may not be doing this yet. Streaming large audio files with the Audio tag for functionality like music playback is optimal but for some browser versions you may want to load your music the same way you load sound effects.
+
+Since all the sound effects were playing through Web Audio we moved playing of the background music to Web Audio as well. This meant that we would load the tracks the same way we loaded all the effects with XMLHttpRequests and the arraybuffer response type.
+
+```js
+AudioManager.prototype.load = function( options ) {
+  var xhr,
+      // pull from a map of name, object pairs
+      sound = this.sounds[ options.name ];
+
+  if ( sound ) {
+    // this is a great spot to add success methods to a list or use promises
+    // for handling the load event or call success if already loaded
+    if ( sound.buffer &amp;&amp; options.success ) {
+      options.success( options.name );
+    } else if ( options.success ) {
+      sound.success.push( options.success );
+    }
+
+    // one buffer is enough so shortcut here
+    return;
+  }
+
+  sound = {
+    name: options.name,
+    buffer: null,
+    source: null,
+    success: ( options.success ? [ options.success ] : [] )
+  };
+  this.sounds[ options.name ] = sound;
+
+  xhr = new XMLHttpRequest();
+  xhr.open( 'GET', options.path, true );
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function( e ) {
+    sound.buffer = self._context.createBuffer( xhr.response, false );
+
+    // call all waiting handlers
+    sound.success.forEach( function( success ) {
+      success( sound.name );
+    });
+    delete sound.success;
+  };
+  xhr.onerror = function( e ) {
+
+    // failures are uncommon but you want to do deal with them
+
+  };
+  xhr.send();
+}
+```
+
+## Summary
+
+Fieldrunners was a blast to bring to Chrome and HTML5. Outside of its own mountain of work bringing thousands of C++ lines into javascript, some interesting dilemmas and decisions specific to HTML5 arouse. To reiterate one if none of the others, AudioBufferSourceNodes are one time use objects. Create them, attach an Audio Buffer, connect it to the Web Audio graph, and play with noteOn or noteGrainOn. Need to play that sound again? Then create another AudioBufferSourceNode.
diff --git a/src/site/content/en/blog/webaudio-games/index.md b/src/site/content/en/blog/webaudio-games/index.md
new file mode 100644
index 00000000000..0147ea10172
--- /dev/null
+++ b/src/site/content/en/blog/webaudio-games/index.md
@@ -0,0 +1,505 @@
+---
+layout: post
+title: Developing game audio with the Web Audio API
+authors:
+  - smus
+date: 2012-02-28
+tags:
+  - blog
+---
+
+## Introduction
+
+Audio is a huge part of what makes multimedia experiences so
+compelling. If you've ever tried watching a movie with the sound off,
+you've probably noticed this.
+
+Games are no exception! My fondest video game memories are of the music
+and sound effects. Now, in many cases nearly two decades after playing
+my favorites, I still can't get [Koji Kondo][kondo]'s Zelda
+[compositions][zelda] and [Matt Uelmen][uelmen]'s atmospheric [Diablo
+soundtrack][diablo] out of my head. The same catchiness applies to sound
+effects, such as the instantly recognizable unit click responses from
+Warcraft, and samples from Nintendo's classics.
+
+Game audio presents some interesting challenges. To create convincing
+game music, designers need to adjust to  potentially unpredictable game
+state a player finds themselves in. In practice, parts of the game can
+go on for an unknown duration, sounds can interact with the environment
+and mix in complex ways, such as room effects and relative sound
+positioning. Finally, there can be a large number of sounds playing at
+once, all of which need to sound good together and render without
+introducing performance penalties.
+
+## Game Audio on the Web
+
+For simple games, using the `<audio>` tag may be sufficient. However, many
+browsers provide poor implementations, which result in audio glitches
+and high latency. This is hopefully a temporary problem, since vendors
+are working hard to improve their respective implementations. For a
+glimpse into the state of the `<audio>` tag, there is a nice test suite
+at [areweplayingyet.org](http://areweplayingyet.org).
+
+Looking deeper into the `<audio>` tag specification, however, it becomes
+clear that there are many things that simply can't be done with it,
+which isn't surprising, since it was designed for media playback. Some
+limitations include:
+
+- No ability to apply filters to the sound signal
+- No way to access the raw PCM data
+- No concept of position and direction of sources and listeners
+- No fine-grained timing.
+
+In the rest of the article, I'll dive into some of these topics in the
+context of game audio written with the Web Audio API. For a brief
+introduction to this API, take a look at the [getting started
+tutorial][wa-intro].
+
+## Background music
+
+Games often have background music playing on a loop. 
+
+It can get very annoying if your loop is short and predictable. If a player
+is stuck in an area or level, and the same sample continuously plays in
+the background, it may be worthwhile to gradually fade out the track to
+prevent further frustration. Another strategy is to have mixes of
+various intensity that gradually crossfade into one another, depending
+on the context of the game.
+
+For example, if your player is in a zone with an epic boss battle, you
+might have several mixes varying in emotional range from atmospheric to
+foreshadowing to intense. Music synthesis software often allows you to
+export several mixes (of the same length) based on a piece by picking
+the set of tracks to use in the export. That way you have some internal
+consistency and avoid having jarring transitions as you cross-fade from
+one track to another.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JhCRz1ycPc08Ai6ZVcFR.png", alt="Garageband", width="552", height="200" %}
+</figure>
+
+Then, using the Web Audio API, you can import all of these samples using
+something like the [BufferLoader class][bufferloader] via XHR (this is
+covered in depth in the [introductory Web Audio API article][wa-intro].
+Loading sounds takes time, so assets that are used in the game should be
+loaded on page load, at the start of the level, or perhaps incrementally
+while the player is playing.
+
+Next, you create a source for each node, and a gain node for each
+source, and connect the graph.
+
+After doing this, you can play back all of these sources simultaneously
+on a loop, and since they are all the same length, the Web Audio API
+will guarantee that they will remain aligned. As the character gets
+nearer or further from the final boss battle, the game can vary the gain
+values for each of the respective nodes in the chain, using a gain
+amount algorithm like the following:
+
+```js
+// Assume gains is an array of AudioGainNode, normVal is the intensity
+// between 0 and 1.
+var value = normVal - (gains.length - 1);
+// First reset gains on all nodes.
+for (var i = 0; i < gains.length; i++) {
+    gains[i].gain.value = 0;
+}
+// Decide which two nodes we are currently between, and do an equal
+// power crossfade between them.
+var leftNode = Math.floor(value);
+// Normalize the value between 0 and 1.
+var x = value - leftNode;
+var gain1 = Math.cos(x - 0.5*Math.PI);
+var gain2 = Math.cos((1.0 - x) - 0.5*Math.PI);
+// Set the two gains accordingly.
+gains[leftNode].gain.value = gain1;
+// Check to make sure that there's a right node.
+if (leftNode < gains.length - 1) {
+    // If there is, adjust its gain.
+    gains[leftNode + 1].gain.value = gain2;
+}
+```
+
+In the above approach, two sources play at once, and we crossfade
+between them using equal power curves (as described in the
+[intro][wa-intro]). 
+
+### The missing link: Audio tag to Web Audio
+
+Many game developers today use the `<audio>` tag for their background
+music, because it is well suited to streaming content. Now you can bring
+content from the `<audio>` tag into a Web Audio context.
+
+This technique can be useful since the `<audio>` tag can work with
+streaming content, which lets you immediately play the background music
+instead of having to wait for it all to download. By bringing the stream
+into the Web Audio API, you can manipulate or analyze the stream. The
+following example applies a low pass filter to the music played through
+the `<audio>` tag:
+
+```js
+var audioElement = document.querySelector('audio');
+var mediaSourceNode = context.createMediaElementSource(audioElement);
+// Create the filter
+var filter = context.createBiquadFilter();
+// Create the audio graph.
+mediaSourceNode.connect(filter);
+filter.connect(context.destination);
+```
+
+For a more complete discussion about integrating the `<audio>` tag with the
+Web Audio API, see this [short article][audiotag].
+
+## Sound effects
+
+Games often play back sound effects in response to user input or changes
+in game state. Like background music, however, sound effects can get
+annoying very quickly. To avoid this, it's often useful to have a pool
+of similar but different sounds to play. This can vary from mild
+variations of footstep samples, to drastic variations, as seen in the
+[Warcraft series][war-sounds] in response to clicking on units.
+
+Another key feature of sound effects in games is that there can be many
+of them simultaneously. Imagine you're in the middle of a gunfight with
+multiple actors shooting machine guns. Each machine gun fires many times
+per second, causing tens of sound effects to be played at the same time.
+Playing back sound from multiple, precisely timed sources simultaneously
+is one place the Web Audio API really shines.
+
+The following example creates a machine gun round from multiple
+individual bullet samples by creating multiple sound sources whose
+playback is staggered in time.
+
+```js
+var time = context.currentTime;
+for (var i = 0; i < rounds; i++) {
+    var source = this.makeSource(this.buffers[M4A1]);
+    source.noteOn(time + i - interval);
+}
+```
+
+Now, if all of the machine guns in your game sounded exactly like this,
+that would be pretty boring. Of course they would vary by sound based on
+distance from the target and relative position (more on this later), but
+even that might not be enough. Luckily the Web Audio API provides a way
+to easily tweak the example above in two ways:
+
+1. With a subtle shift in time between bullets firing
+1. By altering playbackRate of each sample (also changing pitch) to
+   better simulate randomness of the real world.
+
+For a more real-life example of these techniques in action, take a look
+at the [Pool Table demo][pooltable], which uses random sampling and varies
+playbackRate for a more interesting ball collision sound.
+
+
+## 3D positional sound
+
+Games are often set in a world with some geometric properties, either in
+2D or in 3D. If this is the case, stereo positioned audio can greatly
+increase the immersiveness of the experience. Luckily, Web Audio API
+comes with built-in hardware accelerated positional audio features that
+are quite straight forward to use. By the way, you should make sure that
+you've got stereo speakers (preferably headphones) for the following
+example to make sense. 
+
+In the above example, there is a listener (person icon) in the middle of
+the canvas, and the mouse affects the position of the source (speaker
+icon). The above is a simple example of using [AudioPannerNode][] to
+achieve this sort of effect. The basic idea of the sample above is to
+respond to mouse movement by setting the position of the audio source,
+as follows:
+
+```js
+PositionSample.prototype.changePosition = function(position) {
+    // Position coordinates are in normalized canvas coordinates
+    // with -0.5 < x, y < 0.5
+    if (position) {
+    if (!this.isPlaying) {
+        this.play();
+    }
+    var mul = 2;
+    var x = position.x / this.size.width;
+    var y = -position.y / this.size.height;
+    this.panner.setPosition(x - mul, y - mul, -0.5);
+    } else {
+    this.stop();
+    }
+};
+```
+
+Things to know about Web Audio's treatment of spatialization:
+
+- The listener is at the origin (0, 0, 0) by default.
+- Web Audio positional APIs are unitless, so I introduced a multiplier
+  to make the demo sound better.
+- Web Audio uses the y-is-up cartesian coordinates (the opposite of most
+  computer graphics systems). That's why I'm swapping the y-axis in the
+  snippet above
+
+### Advanced: sound cones
+
+The positional model is very powerful and quite advanced, largely based
+on [OpenAL][openal]. For more details, see sections 3 and 4 of the
+above-linked spec.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/j53QhZyQVM7dI9LA0byD.png", alt="Position model", width="441", height="231" %}
+</figure>
+
+There is a single AudioListener attached to the Web Audio API
+context which can be configured in space through position and
+orientation. Each source can be passed through an AudioPannerNode, which
+spatializes the input audio. The panner node has position and
+orientation, as well as a distance and directional model.
+
+The distance model specifies the amount of gain depending on proximity
+to the source, while the directional model can be configured by
+specifying  an inner and outer cone, which determine amount of (usually
+negative) gain if the listener is within the inner cone, between the
+inner and outer cone, or outside the outer cone. 
+
+```js
+var panner = context.createPanner();
+panner.coneOuterGain = 0.5;
+panner.coneOuterAngle = 180;
+panner.coneInnerAngle = 0;
+```
+
+Though my example is in 2D, this model generalizes easily to the third
+dimension. For an example of sound spatialized in 3D, see this
+[positional sample][3d-sample]. In addition to position, the Web Audio
+sound model also optionally includes velocity for doppler shifts. This
+example shows the [doppler effect][doppler] in more detail.
+
+For more information on this topic, read this detailed tutorial on
+[mixing positional audio and WebGL][webgl].
+
+## Room effects and filters
+
+In reality, the way sound is perceived greatly depends on the room in
+which that sound is heard. The same creaky door will sound very
+different in a basement, compared to an large open hall. Games with high
+production value will want to imitate these effects, since creating a
+separate set of samples for each environment is prohibitively expensive,
+and would lead to even more assets, and a larger amount of game data.
+
+Loosely speaking, the audio term for the difference between the raw
+sound and the way it sounds in reality is the [impulse
+response][ir-wiki]. These impulse responses can be painstakingly
+recorded, and in fact there are [sites that host][ir-google] many of
+these pre-recorded impulse response files (stored as audio) for your
+convenience.
+
+For a lot more information about how impulse responses can be created
+from a given environment, read through the "Recording Setup" section in
+the [Convolution][convolution] part of the Web Audio API spec.
+
+More importantly for our purposes, the Web Audio API provides an easy
+way to apply these impulse responses to our sounds using the
+[ConvolverNode][].
+
+```js
+// Make a source node for the sample.
+var source = context.createBufferSource();
+source.buffer = this.buffer;
+// Make a convolver node for the impulse response.
+var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);
+```
+
+Also see this [demo of room effects][effects] on the Web Audio API spec
+page, as well as [this example][drywet] which gives you control over dry
+(raw) and wet (processed via convolver) mixing of a great Jazz standard.
+
+## The final countdown
+
+So you've built a game, configured your positional audio, and now you
+have a large number of AudioNodes in your graph, all playing back
+simultaneously. Great, but there's still one more thing to consider:
+
+Since multiple sounds just stack on top of one another with no
+normalization, you may find yourself in a situation where you are
+exceeding the threshold of your speaker's capability. Like images
+exceeding past their canvas boundaries, sounds can also clip if the
+waveform exceeds its maximum threshold, producing a distinct distortion.
+The waveform looks something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/j3CSxOfegwYj1wk2aLXf.png", alt="Clipping", width="800", height="259" %}
+</figure>
+
+Here's a real example of clipping in action. The waveform looks bad:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/QMULrVsb7ddmX0P1debJ.png", alt="Clipping", width="589", height="288" %}
+</figure>
+
+It's important to listen to harsh distortions like the one above, or
+conversely, overly subdued mixes that force your listeners to crank up
+the volume. If you're in this situation, you really need to fix it!
+
+### Detect clipping
+
+From a technical perspective, clipping happens when the value of the
+signal in any channel exceeds the valid range, namely between -1 and 1.
+Once this is detected, it's useful to give visual feedback that this is
+happening. To do this reliably, put a [JavaScriptAudioNode][jsan] into
+your graph. The audio graph would be setup as follows:
+
+```js
+// Assume entire sound output is being piped through the mix node.
+var meter = context.createJavaScriptNode(2048, 1, 1);
+meter.onaudioprocess = processAudio;
+mix.connect(meter);
+meter.connect(context.destination);
+```
+
+And clipping could be detected in the following `processAudio` handler:
+
+```js
+function processAudio(e) {
+    var buffer = e.inputBuffer.getChannelData(0);
+
+    var isClipping = false;
+    // Iterate through buffer to check if any of the |values| exceeds 1.
+    for (var i = 0; i < buffer.length; i++) {
+    var absValue = Math.abs(buffer[i]);
+    if (absValue >= 1) {
+        isClipping = true;
+        break;
+    }
+    }
+}
+```
+
+In general, be careful not to overuse the `JavaScriptAudioNode` for
+performance reasons. In this case, an alternative implementation of
+metering could poll a `RealtimeAnalyserNode` in the audio graph for
+`getByteFrequencyData`, at render time, as determined by
+`requestAnimationFrame`. This approach is more efficient, but misses
+most of the signal (including places where it potentially clips), since
+rendering happens at most at 60 times a second, whereas the audio signal
+changes far more quickly.
+
+Because clip detection is so important, it's likely that we will see a
+built-in `MeterNode` Web Audio API node in the future.
+
+### Prevent clipping
+
+By adjusting the gain on the master AudioGainNode, you can subdue your
+mix to a level that prevents clipping. However, in practice, since the
+sounds playing in your game may depend on a huge variety of factors, it
+can be difficult to decide on the master gain value that prevents
+clipping for all states. In general, you should tweak gains to
+anticipate the worst case, but this is more of an art than a science.
+
+### Add a bit of sugar
+
+Compressors are commonly used in music and game production to smooth
+over the signal and control spikes in the overall signal. This
+functionality is available in the Web Audio world via the
+`DynamicsCompressorNode`, which can be inserted in your audio graph to
+give a louder, richer and fuller sound, and also help with clipping.
+Directly quoting the spec, this node
+
+{% Aside %}
+…lowers the volume of the loudest parts of the signal and raises the
+ volume of the softest parts… It is especially important in games and
+ musical applications where large numbers of individual sounds are
+played simultaneous to control the overall signal level and help avoid
+clipping.
+{% endAside %}
+
+Using dynamics compression is generally a good idea, especially in a
+game setting, where, as previously discussed, you don't know exactly
+what sounds will play and when. [Plink][plink] from DinahMoe labs is a
+great example of this, since the sounds that are played back completely
+depends on you and other participants. A compressor is useful in most
+cases, except some rare ones, where you're dealing with painstakingly
+mastered tracks that have been tuned to sound "just right" already.
+
+Implementing this is simply a matter of including a
+DynamicsCompressorNode in your audio graph, generally as the last node
+before the destination.:
+
+```js
+// Assume the output is all going through the mix node.
+var compressor = context.createDynamicsCompressor();
+mix.connect(compressor);
+compressor.connect(context.destination);
+```
+
+For more detail about dynamics compression, [this Wikipedia
+article][dcwp] is very informative.
+
+To summarize, listen carefully for clipping and prevent it by inserting
+a master gain node. Then tightening the whole mix by using a dynamics
+compressor node. Your audio graph might look something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/783OhZNEAjZnQp7xXKeB.png", alt="Final result", width="488", height="166" %}
+</figure>
+
+## Conclusion
+
+That covers what I think are the most important aspects of game audio
+development using the Web Audio API. With these techniques, you can
+build truly compelling audio experiences right in your browser. Before I
+sign off, let me leave you with a browser-specific tip: be sure to
+pause sound if your tab goes to the background using the [page
+visibility API][vapi], otherwise you will create a potentially
+frustrating experience for your user.
+
+For additional information about Web Audio, take a look at the
+more introductory [getting started article][wa-intro], and if you have a
+question, see if it's already answered in the [web audio FAQ][wa-faq].
+Finally, if you have additional questions, ask them on [Stack
+Overflow][so] using the [web-audio][so] tag.
+
+Before I sign off, let me leave you with some awesome uses of the Web
+Audio API in real games today:
+
+- [Field Runners][fieldrunners], and a writeup about some of the
+  [technical details][fieldrunners-bocoup].
+- [Angry Birds][angrybirds], recently switched to Web Audio API. See
+  [this writeup][angrybirds-wa] for more information.
+- [Skid Racer][skid], which makes great use of spatialized audio.
+
+[kondo]: http://en.wikipedia.org/wiki/Koji_Kondo
+[uelmen]: http://en.wikipedia.org/wiki/Matt_Uelmen
+[diablo]: http://www.youtube.com/watch?v=Q2evIg-aYw8
+[zelda]: http://www.youtube.com/watch?v=4qJ-xEZhGms
+[wa-intro]: http://www.html5rocks.com/tutorials/webaudio/intro/
+[areweplayingyet.org]: http://areweplayingyet.org/
+[bufferloader]: http://www.html5rocks.com/tutorials/webaudio/intro/js/buffer-loader.js
+[audiotag]: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
+[AudioPannerNode]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioPannerNode-section
+[AudioListener]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioListener-section
+[doppler]: http://chromium.googlecode.com/svn/trunk/samples/audio/doppler.html
+[openal]: http://connect.creativelabs.com/openal/Documentation/OpenAL%201.1%20Specification.pdf
+[3d-sample]: http://chromium.googlecode.com/svn/trunk/samples/audio/simple.html
+[convolution]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#Convolution-section
+[ConvolverNode]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#ConvolverNode-section
+[ir-google]: https://www.google.com/search?q=impulse+responses
+[ir-wiki]: http://en.wikipedia.org/wiki/Impulse_response
+[effects]: http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html
+[drywet]: http://kevincennis.com/audio/
+[jsan]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#JavaScriptAudioNode-section
+[dcn]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#DynamicsCompressorNode-section
+[dcwp]: http://en.wikipedia.org/wiki/Dynamic_range_compression
+[ct-remix]: http://ocremix.org/remix/OCR00883/
+[ct-composer]: http://en.wikipedia.org/wiki/Yasunori_Mitsuda
+[plink]: http://labs.dinahmoe.com/plink
+[angrybirds]: http://chrome.angrybirds.com
+[angrybirds-wa]: http://googlecode.blogspot.com/2012/01/angry-birds-chrome-now-uses-web-audio.html
+[fieldrunners]: http://fieldrunnershtml5.appspot.com/
+[fieldrunners-bocoup]: http://weblog.bocoup.com/fieldrunners-playing-to-the-strengths-of-html5-audio-and-web-audio/
+[wa-faq]: http://updates.html5rocks.com/2012/01/Web-Audio-FAQ
+[so]: http://stackoverflow.com/questions/tagged/web-audio
+[skid]: https://skid.gamagio.com/play/
+[vapi]: http://www.samdutton.com/pageVisibility/
+[pooltable]: http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html
+[war-sounds]: http://www.youtube.com/watch?v=MXgr6SYYNZM
\ No newline at end of file
diff --git a/src/site/content/en/blog/webaudio-intro/index.md b/src/site/content/en/blog/webaudio-intro/index.md
new file mode 100644
index 00000000000..bf5dcb2840b
--- /dev/null
+++ b/src/site/content/en/blog/webaudio-intro/index.md
@@ -0,0 +1,470 @@
+---
+layout: post
+title: Getting started with Web Audio API
+authors:
+  - smus
+date: 2011-10-14
+updated: 2013-10-29
+tags:
+  - blog
+---
+
+Before the HTML5 `<audio>` element, Flash or another plugin was required
+to break the silence of the web. While audio on the web no longer
+requires a plugin, the audio tag brings significant limitations for
+implementing sophisticated games and interactive applications.
+
+The Web Audio API is a high-level JavaScript API for processing and
+synthesizing audio in web applications. The goal of this API is to
+include capabilities found in modern game audio engines and some of the
+mixing, processing, and filtering tasks that are found in modern desktop
+audio production applications. What follows is a gentle introduction to
+using this powerful API.
+
+## Getting started with the AudioContext
+
+An AudioContext is for managing and playing all sounds. To produce
+a sound using the Web Audio API, create one or more sound sources
+and connect them to the sound destination provided by the `AudioContext`
+instance. This connection doesn't need to be direct, and can go through
+any number of intermediate [AudioNodes][] which act as processing
+modules for the audio signal. This [routing][] is described in greater
+detail at the Web Audio [specification][spec].
+
+A single instance of `AudioContext` can support multiple sound inputs
+and complex audio graphs, so we will only need one of these for each
+audio application we create.
+
+The following snippet creates an `AudioContext`:
+
+```js
+var context;
+window.addEventListener('load', init, false);
+function init() {
+    try {
+    context = new AudioContext();
+    }
+    catch(e) {
+    alert('Web Audio API is not supported in this browser');
+    }
+}
+```
+
+For older WebKit-based browsers, use the `webkit` prefix, as with
+`webkitAudioContext`.
+
+Many of the interesting Web Audio API functionality such as creating
+AudioNodes and decoding audio file data are methods of `AudioContext`.
+
+## Loading sounds
+
+The Web Audio API uses an AudioBuffer for short- to medium-length
+sounds.  The basic approach is to use [XMLHttpRequest][xhr] for
+fetching sound files.
+
+The API supports loading audio file data in multiple formats, such as
+WAV, MP3, AAC, OGG and [others][formats]. Browser support for different
+audio formats [varies][formats2].
+
+The following snippet demonstrates loading a sound sample:
+
+```js
+var dogBarkingBuffer = null;
+var context = new AudioContext();
+
+function loadDogSound(url) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url, true);
+    request.responseType = 'arraybuffer';
+
+    // Decode asynchronously
+    request.onload = function() {
+    context.decodeAudioData(request.response, function(buffer) {
+        dogBarkingBuffer = buffer;
+    }, onError);
+    }
+    request.send();
+}
+```
+
+The audio file data is binary (not text), so we set the `responseType`
+of the request to `'arraybuffer'`. For more information about
+`ArrayBuffers`, see this [article about XHR2][xhr2].
+
+Once the (undecoded) audio file data has been received, it can be kept
+around for later decoding, or it can be decoded right away using the
+AudioContext `decodeAudioData()` method. This method takes the
+`ArrayBuffer` of audio file data stored in `request.response` and
+decodes it asynchronously (not blocking the main JavaScript execution
+thread).
+
+When `decodeAudioData()` is finished, it calls a callback function which
+provides the decoded PCM audio data as an `AudioBuffer`.
+
+## Playing sounds
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZC6uytCyqSnBjfdI6GAT.png", alt="A simple audio graph", width="305", height="128" %}
+<figcaption>A simple audio graph</figcaption>
+</figure>
+
+Once one or more `AudioBuffers` are loaded, then we're ready to play
+sounds. Let's assume we've just loaded an `AudioBuffer` with the sound
+of a dog barking and that the loading has finished. Then we can play
+this buffer with a the following code.
+
+```js
+var context = new AudioContext();
+
+function playSound(buffer) {
+    var source = context.createBufferSource(); // creates a sound source
+    source.buffer = buffer;                    // tell the source which sound to play
+    source.connect(context.destination);       // connect the source to the context's destination (the speakers)
+    source.noteOn(0);                          // play the source now
+}
+```
+
+This `playSound()` function could be called every time somebody presses a key or
+clicks something with the mouse.
+
+The `noteOn(time)` function makes it easy to schedule precise sound
+playback for games and other time-critical applications. However, to get
+this scheduling working properly, ensure that your sound buffers are
+pre-loaded.
+
+## Abstracting the Web Audio API
+
+Of course, it would be better to create a more general loading system
+which isn't hard-coded to loading this specific sound. There are many
+approaches for dealing with the many short- to medium-length sounds that
+an audio application or game would use–here's one way using a BufferLoader (not part of web standard).
+
+The following is an example of how you can use the `BufferLoader` class.
+Let's create two `AudioBuffers`; and, as soon as they are loaded,
+let's play them back at the same time.
+
+```js
+window.onload = init;
+var context;
+var bufferLoader;
+
+function init() {
+    context = new AudioContext();
+
+    bufferLoader = new BufferLoader(
+    context,
+    [
+        '../sounds/hyper-reality/br-jam-loop.wav',
+        '../sounds/hyper-reality/laughter.wav',
+    ],
+    finishedLoading
+    );
+
+    bufferLoader.load();
+}
+
+function finishedLoading(bufferList) {
+    // Create two sources and play them both together.
+    var source1 = context.createBufferSource();
+    var source2 = context.createBufferSource();
+    source1.buffer = bufferList[0];
+    source2.buffer = bufferList[1];
+
+    source1.connect(context.destination);
+    source2.connect(context.destination);
+    source1.noteOn(0);
+    source2.noteOn(0);
+}
+```
+
+## Dealing with time: playing sounds with rhythm
+
+The Web Audio API lets developers precisely schedule playback. To
+demonstrate this, let's set up a simple rhythm track. Probably the
+most widely known drumkit pattern is the following:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/up8ymqCZECvUWIUdLN3x.png", alt="A simple rock drum pattern", width="500", height="144" %}
+<figcaption>A simple rock drum pattern</figcaption>
+</figure>
+
+in which a hihat is played every eighth note, and kick and snare are
+played alternating every quarter, in 4/4 time.
+
+Supposing we have loaded the `kick`, `snare` and `hihat` buffers, the
+code to do this is simple:
+
+```js
+for (var bar = 0; bar < 2; bar++) {
+    var time = startTime + bar * 8 * eighthNoteTime;
+    // Play the bass (kick) drum on beats 1, 5
+    playSound(kick, time);
+    playSound(kick, time + 4 * eighthNoteTime);
+
+    // Play the snare drum on beats 3, 7
+    playSound(snare, time + 2 * eighthNoteTime);
+    playSound(snare, time + 6 * eighthNoteTime);
+
+    // Play the hi-hat every eighth note.
+    for (var i = 0; i < 8; ++i) {
+    playSound(hihat, time + i * eighthNoteTime);
+    }
+}
+```
+
+Here, we make only one repeat instead of the unlimited loop we see in
+the sheet music. The function `playSound` is a method that plays a
+buffer at a specified time, as follows:
+
+```js
+function playSound(buffer, time) {
+    var source = context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(context.destination);
+    source.noteOn(time);
+}
+```
+
+## Changing the volume of a sound
+
+One of the most basic operations you might want to do to a sound is
+change its volume. Using the Web Audio API, we can route our source to
+its destination through an [AudioGainNode][] in order to manipulate the
+volume:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/13mtS9N4QlPK5riWY45G.png", alt="Audio graph with a gain node", width="405", height="145" %}
+<figcaption>Audio graph with a gain node</figcaption>
+</figure>
+
+This connection setup can be achieved as follows:
+
+```js
+// Create a gain node.
+var gainNode = context.createGainNode();
+// Connect the source to the gain node.
+source.connect(gainNode);
+// Connect the gain node to the destination.
+gainNode.connect(context.destination);
+```
+
+After the graph has been set up, you can programmatically change the
+volume by manipulating the `gainNode.gain.value` as follows:
+
+```js
+// Reduce the volume.
+gainNode.gain.value = 0.5;
+```
+
+## Cross-fading between two sounds
+
+Now, suppose we have a slightly more complex scenario, where we're
+playing multiple sounds but want to cross fade between them. This is a
+common case in a DJ-like application, where we have two turntables and
+want to be able to pan from one sound source to another.
+
+This can be done with the following audio graph:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qEZqDhwWU9F74BghKtZ6.png", alt="Audio graph with two sources connected through gain nodes", width="406", height="266" %}
+<figcaption>Audio graph with two sources connected through gain nodes</figcaption>
+</figure>
+
+To set this up, we simply create two [AudioGainNodes][AudioGainNode], and connect
+each source through the nodes, using something like this function:
+
+```js
+function createSource(buffer) {
+    var source = context.createBufferSource();
+    // Create a gain node.
+    var gainNode = context.createGainNode();
+    source.buffer = buffer;
+    // Turn on looping.
+    source.loop = true;
+    // Connect source to gain.
+    source.connect(gainNode);
+    // Connect gain to destination.
+    gainNode.connect(context.destination);
+
+    return {
+    source: source,
+    gainNode: gainNode
+    };
+}
+```
+
+### Equal power crossfading
+
+A naive linear crossfade approach exhibits a volume dip as you pan
+between the samples.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iB9cw4RuxbViCNeKNjAp.png", alt="A linear crossfade", width="393", height="226" %}
+<figcaption>A linear crossfade</figcaption>
+</figure>
+
+To address this issue, we use an equal power curve, in which the
+corresponding gain curves are non-linear, and intersect at a higher
+amplitude. This minimizes volume dips between audio regions, resulting
+in a more even crossfade between regions that might be slightly
+different in level.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/sosgEa1pg8gFYiIDj2xL.png", alt="An equal power crossfade.", width="393", height="226" %}
+<figcaption>An equal power crossfade</figcaption>
+</figure>
+
+### Playlist crossfading
+
+Another common crossfader application is for a music player application.
+When a song changes, we want to fade the current track out, and fade the
+new one in, to avoid a jarring transition. To do this, schedule a
+crossfade into the future. While we could use `setTimeout` to do this
+scheduling, this is [not precise][jstimer]. With the Web Audio API, we
+can use the [AudioParam][] interface to schedule future values for
+parameters such as the gain value of an `AudioGainNode`.
+
+Thus, given a playlist, we can transition between tracks by scheduling a
+gain decrease on the currently playing track, and a gain increase on the
+next one, both slightly before the current track finishes playing:
+
+```js
+function playHelper(bufferNow, bufferLater) {
+    var playNow = createSource(bufferNow);
+    var source = playNow.source;
+    var gainNode = playNow.gainNode;
+    var duration = bufferNow.duration;
+    var currTime = context.currentTime;
+    // Fade the playNow track in.
+    gainNode.gain.linearRampToValueAtTime(0, currTime);
+    gainNode.gain.linearRampToValueAtTime(1, currTime + ctx.FADE_TIME);
+    // Play the playNow track.
+    source.noteOn(0);
+    // At the end of the track, fade it out.
+    gainNode.gain.linearRampToValueAtTime(1, currTime + duration-ctx.FADE_TIME);
+    gainNode.gain.linearRampToValueAtTime(0, currTime + duration);
+    // Schedule a recursive track change with the tracks swapped.
+    var recurse = arguments.callee;
+    ctx.timer = setTimeout(function() {
+    recurse(bufferLater, bufferNow);
+    }, (duration - ctx.FADE_TIME) - 1000);
+}
+```
+
+The Web Audio API provides a convenient set of `RampToValue` methods to
+gradually change the value of a parameter, such as
+`linearRampToValueAtTime` and `exponentialRampToValueAtTime`.
+
+While the transition timing function can be picked from built-in linear
+and exponential ones (as above), you can also specify your own value
+curve via an array of values using the `setValueCurveAtTime` function.
+
+## Applying a simple filter effect to a sound
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NqA6kYKPeryYyb6Zrj57.png", alt="An audio graph with a BiquadFilterNode", width="464", height="145" %}
+<figcaption>An audio graph with a BiquadFilterNode</figcaption>
+</figure>
+
+The Web Audio API lets you pipe sound from one audio node into another,
+creating a potentially complex chain of processors to add complex
+effects to your soundforms.
+
+One way to do this is to place [BiquadFilterNode][]s between your sound
+source and destination. This type of audio node can do a variety of
+low-order filters which can be used to build graphic equalizers and even
+more complex effects, mostly to do with selecting which parts of the
+frequency spectrum of a sound to emphasize and which to subdue.
+
+Supported types of filters include:
+
+- Low pass filter
+- High pass filter
+- Band pass filter
+- Low shelf filter
+- High shelf filter
+- Peaking filter
+- Notch filter
+- All pass filter
+
+And all of the filters include parameters to specify some amount of
+[gain][], the frequency at which to apply the filter, and a quality factor.
+The low-pass filter keeps the lower frequency range, but discards high
+frequencies. The break-off point is determined by the frequency value,
+and the [Q factor][qfactor] is unitless, and determines the shape of the
+graph. The gain only affects certain filters, such as the low-shelf and
+peaking filters, and not this low-pass filter.
+
+Let's setup a simple low-pass filter to extract only the bases from a
+sound sample:
+
+```js
+// Create the filter
+var filter = context.createBiquadFilter();
+// Create the audio graph.
+source.connect(filter);
+filter.connect(context.destination);
+// Create and specify parameters for the low-pass filter.
+filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
+filter.frequency.value = 440; // Set cutoff to 440 HZ
+// Playback the sound.
+source.noteOn(0);
+```
+
+In general, frequency controls need to be tweaked to work on a
+logarithmic scale since human hearing itself works on the same principle
+(that is, A4 is 440hz, and A5 is 880hz). For more details, see the
+`FilterSample.changeFrequency` function in the source code link above.
+
+Lastly, note that the sample code lets you connect and disconnect the
+filter, dynamically changing the AudioContext graph. We can disconnect
+AudioNodes from the graph by calling `node.disconnect(outputNumber)`.
+For example, to re-route the graph from going through a filter, to a
+direct connection, we can do the following:
+
+```js
+// Disconnect the source and filter.
+source.disconnect(0);
+filter.disconnect(0);
+// Connect the source directly.
+source.connect(context.destination);
+```
+
+## Further listening
+
+We've covered the basics of the API, including loading and playing audio
+samples. We've built audio graphs with gain nodes and filters, and
+scheduled sounds and audio parameter tweaks to enable some common sound
+effects. At this point, you are ready to go and build some sweet web
+audio applications!
+
+If you are seeking inspiration, many developers have already created
+[great work][samples] using the Web Audio API. Some of my favorite
+include:
+
+- [AudioJedit][jedit], an in-browser sound splicing tool that uses
+  SoundCloud permalinks.
+- [ToneCraft][tcraft], a sound sequencer where sounds are created by
+  stacking 3D blocks.
+- [Plink][plink], a collaborative music-making game using Web Audio and Web
+  Sockets.
+
+[AudioContext]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioContext-section
+[AudioNodes]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioNode-section
+[routing]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#ModularRouting-section
+[spec]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
+[xhr]: https://developer.mozilla.org/XMLHttpRequest/Using_XMLHttpRequest
+[xhr2]: http://www.html5rocks.com/tutorials/file/xhr2/
+[formats]: http://en.wikipedia.org/wiki/Audio_file_format
+[formats2]: https://developer.mozilla.org/Media_formats_supported_by_the_audio_and_video_elements#Browser_compatibility
+[BufferLoader]: js/buffer-loader.js
+[jstimer]: http://stackoverflow.com/questions/2779154/understanding-javascript-timer-thread-issues
+[AudioParam]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioParam-section
+[AudioGainNode]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioGainNode-section
+[BiquadFilterNode]: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
+[gain]: http://en.wikipedia.org/wiki/Gain
+[qfactor]: http://en.wikipedia.org/wiki/Audio_filter#Self_oscillation
+[samples]: http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html
+[plink]: http://labs.dinahmoe.com/plink/
+[jedit]: http://audiojedit.herokuapp.com/
+[tcraft]: http://labs.dinahmoe.com/ToneCraft/
diff --git a/src/site/content/en/blog/webaudio-positional-audio/index.md b/src/site/content/en/blog/webaudio-positional-audio/index.md
new file mode 100644
index 00000000000..d50154df09d
--- /dev/null
+++ b/src/site/content/en/blog/webaudio-positional-audio/index.md
@@ -0,0 +1,304 @@
+---
+layout: post
+title: Mixing positional audio and WebGL
+authors:
+  - ilmariheikkinen
+date: 2012-02-16
+tags:
+  - blog
+---
+
+## Introduction
+
+In this article I’m going to talk about how to use the positional audio feature in the [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) to add 3D sound into your WebGL scenes. To make the audio more believable, I will also introduce you to the environmental effects possible with the Web Audio API. To get a more thorough introduction to the Web Audio API, check out the [Getting started with Web Audio API](http://www.html5rocks.com/tutorials/webaudio/intro/) article by Boris Smus.
+
+To do positional audio, you use the AudioPannerNode in the Web Audio API. The AudioPannerNode defines the position, orientation and velocity of a sound. Additionally, the Web Audio API audio context has a listener attribute that lets you define the position, orientation and velocity of the listener. With these two things you can create directional sounds with doppler effects and 3D panning.
+
+Let's see what the audio code looks like for the above scene. This is very basic Audio API code. You create a bunch of Audio API nodes and connect them together. The audio nodes are individual sounds, volume controllers, effect nodes and analyzers and suchlike. After you have built this graph, you need to hook it up to the audio context destination to make it audible.
+
+```js
+// Detect if the audio context is supported.
+window.AudioContext = (
+  window.AudioContext ||
+  window.webkitAudioContext ||
+  null
+);
+
+if (!AudioContext) {
+  throw new Error("AudioContext not supported!");
+} 
+
+// Create a new audio context.
+var ctx = new AudioContext();
+
+// Create a AudioGainNode to control the main volume.
+var mainVolume = ctx.createGain();
+// Connect the main volume node to the context destination.
+mainVolume.connect(ctx.destination);
+
+// Create an object with a sound source and a volume control.
+var sound = {};
+sound.source = ctx.createBufferSource();
+sound.volume = ctx.createGain();
+
+// Connect the sound source to the volume control.
+sound.source.connect(sound.volume);
+// Hook up the sound volume control to the main volume.
+sound.volume.connect(mainVolume);
+
+// Make the sound source loop.
+sound.source.loop = true;
+
+// Load a sound file using an ArrayBuffer XMLHttpRequest.
+var request = new XMLHttpRequest();
+request.open("GET", soundFileName, true);
+request.responseType = "arraybuffer";
+request.onload = function(e) {
+
+  // Create a buffer from the response ArrayBuffer.
+  ctx.decodeAudioData(this.response, function onSuccess(buffer) {
+    sound.buffer = buffer;
+
+    // Make the sound source use the buffer and start playing it.
+    sound.source.buffer = sound.buffer;
+    sound.source.start(ctx.currentTime);
+  }, function onFailure() {
+    alert("Decoding the audio buffer failed");
+  });
+};
+request.send();
+```
+  
+## Position
+
+Positional audio uses the position of your audio sources and the position of the listener to determine how to mix the sound to the speakers. An audio source on the left side of the listener would be louder in the left speaker, and vice versa for the right side.
+
+To get started, create an audio source and attach it to an AudioPannerNode. Then set the position of the AudioPannerNode. Now you have a movable 3D sound. The audio context listener position is at (0,0,0) by default, so when used in this way, the AudioPannerNode position is relative to the camera position. Whenever you move the camera, you need to update the AudioPannerNode position. To make the AudioPannerNode position relative to the world, you need to change the audio context listener position to your camera position.
+
+To set up the position tracking, we need to create an AudioPannerNode and wire it up to the main volume.
+
+```js
+...
+sound.panner = ctx.createPanner();
+// Instead of hooking up the volume to the main volume, hook it up to the panner.
+sound.volume.connect(sound.panner);
+// And hook up the panner to the main volume.
+sound.panner.connect(mainVolume);
+...
+```
+
+On every frame, update the positions of the AudioPannerNodes. I'm going to be using Three.js in the examples below.
+
+```js
+...
+// In the frame handler function, get the object's position.
+object.position.set(newX, newY, newZ);
+object.updateMatrixWorld();
+var p = new THREE.Vector3();
+p.setFromMatrixPosition(object.matrixWorld);
+
+// And copy the position over to the sound of the object.
+sound.panner.setPosition(p.x, p.y, p.z);
+...
+```
+
+To track the listener position, set the audio context's listener position to match the camera position.
+
+```js
+...
+// Get the camera position.
+camera.position.set(newX, newY, newZ);
+camera.updateMatrixWorld();
+var p = new THREE.Vector3();
+p.setFromMatrixPosition(camera.matrixWorld);
+
+// And copy the position over to the listener.
+ctx.listener.setPosition(p.x, p.y, p.z);
+...
+```
+
+## Velocity
+
+Now that we have the positions of the listener and the AudioPannerNode, let’s turn our attention to their velocities. By changing the velocity properties of the listener and the AudioPannerNode, you can add a doppler effect to the sound. There are some nice doppler effect examples on the Web Audio API [examples page](http://chromium.googlecode.com/svn/trunk/samples/audio/index.html).
+
+The easiest way to get the velocities for the listener and the AudioPannerNode is to keep track of their per-frame positions. The velocity of the listener is the camera’s current position minus the camera’s position in the previous frame. Similarly, the velocity of the AudioPannerNode is its current position minus its previous position.
+
+Tracking the velocity can be done by getting the object's previous position, subtracting it from the current position and dividing the result by the time elapsed since last frame. Here's how to do it in Three.js:
+
+```js
+...
+var dt = secondsSinceLastFrame;
+
+var p = new THREE.Vector3();
+p.setFromMatrixPosition(object.matrixWorld);
+var px = p.x, py = p.y, pz = p.z;
+
+object.position.set(newX, newY, newZ);
+object.updateMatrixWorld();
+
+var q = new THREE.Vector3();
+q.setFromMatrixPosition(object.matrixWorld);
+var dx = q.x-px, dy = q.y-py, dz = q.z-pz;
+
+sound.panner.setPosition(q.x, q.y, q.z);
+sound.panner.setVelocity(dx/dt, dy/dt, dz/dt);
+...
+```
+
+
+## Orientation
+
+Orientation is the direction the sound source is pointing to and the direction the listener is facing. With orientation, you can simulate directional sound sources. For an example, think of a directional speaker. If you stand in front of the speaker, the sound is going to be louder than if you stand behind the speaker. More importantly, you need listener orientation to determine which side of the listener the sounds are coming from. A sound coming from your left needs to switch to the right when you turn around.
+
+To get the orientation vector for the AudioPannerNode, you need to take the rotation part of the model matrix of the sound-emitting 3D object and multiply a vec3(0,0,1) with it to see where it ends up pointing. For the context listener orientation, you need to get the camera’s orientation vector. The listener orientation also needs an up vector, since it needs to know the roll angle of the listener's head. To compute the listener orientation, get the rotation part of the camera's view matrix and multiply a vec3(0,0,1) for the orientation and a vec3(0,-1,0) for the up-vector.
+
+For orientation to have an effect on your sounds, you also need to define the cone for the sound. The sound cone takes an inner angle, outer angle and outer gain. The sound plays at the normal volume inside the inner angle and gradually changes gain to outer gain as you approach the outer angle. Outside the outer angle the sound plays at outer gain.
+
+Tracking the orientation in Three.js is a bit trickier as it involves some vector math and zeroing the translation part of the 4x4 world matrices. Still, not many lines of code.
+
+```js
+...
+var vec = new THREE.Vector3(0,0,1);
+var m = object.matrixWorld;
+
+// Save the translation column and zero it.
+var mx = m.elements[12], my = m.elements[13], mz = m.elements[14];
+m.elements[12] = m.elements[13] = m.elements[14] = 0;
+
+// Multiply the 0,0,1 vector by the world matrix and normalize the result.
+vec.applyProjection(m);
+vec.normalize();
+
+sound.panner.setOrientation(vec.x, vec.y, vec.z);
+
+// Restore the translation column.
+m.elements[12] = mx;
+m.elements[13] = my;
+m.elements[14] = mz;
+...
+```
+
+Camera orientation tracking also requires the up vector, so you need to multiply an up vector with the transformation matrix.
+
+```js
+...
+// The camera's world matrix is named "matrix".
+var m = camera.matrix;
+
+var mx = m.elements[12], my = m.elements[13], mz = m.elements[14];
+m.elements[12] = m.elements[13] = m.elements[14] = 0;
+
+// Multiply the orientation vector by the world matrix of the camera.
+var vec = new THREE.Vector3(0,0,1);
+vec.applyProjection(m);
+vec.normalize();
+
+// Multiply the up vector by the world matrix.
+var up = new THREE.Vector3(0,-1,0);
+up.applyProjection(m);
+up.normalize();
+
+// Set the orientation and the up-vector for the listener.
+ctx.listener.setOrientation(vec.x, vec.y, vec.z, up.x, up.y, up.z);
+
+m.elements[12] = mx;
+m.elements[13] = my;
+m.elements[14] = mz;
+...
+```
+
+To set the sound cone for your sound, you set the appropriate properties of the panner node. The cone angles are in degrees and run from 0 to 360.
+
+```js
+...
+sound.panner.coneInnerAngle = innerAngleInDegrees;
+sound.panner.coneOuterAngle = outerAngleInDegrees;
+sound.panner.coneOuterGain = outerGainFactor;
+...
+```
+
+## All together
+
+Putting it all together, the audio context listener follows the position, orientation and velocity of the camera, and the AudioPannerNodes follow the positions, orientations and velocities of their respective audio sources. You need to update the positions, velocities and orientations of the AudioPannerNodes and the audio context listener on every frame.
+  
+## Environmental effects
+
+After you’ve got positional audio set up, you can set the environmental effects for your audio to enhance the immersiveness of your 3D scene. Suppose your scene is set inside a large cathedral. On default settings, the sounds in your scene sound like you’re standing outdoors. This discrepancy between the visuals and audio breaks immersion and makes your scene less impressive.
+
+The Web Audio API has a ConvolverNode that lets you set the environmental effect for a sound. Add it to the processing graph for the audio source and you’ll be able to make the sound fit the setting. You can find impulse response samples on the web that you can use with ConvolverNodes, and you can also make your own. It may be slightly cumbersome experience as you need to record the impulse response of the place you wish to simulate, but the capability is there if you need it.
+
+Using ConvolverNodes to do environmental audio requires rewiring the audio processing graph. Instead of passing sound directly to the main volume, you need to route it through the ConvolverNode. And as you may want to control the strength of the environmental effect, you also need to route the audio around the ConvolverNode. To control the mix volumes the ConvolverNode and the plain audio need to have GainNodes attached to them.
+  
+The final audio processing graph I'm using has the audio from the objects going through a GainNode used as a pass-through mixer. From the mixer I pass the audio into the ConvolverNode and another GainNode, which is used to control the volume of the plain audio. The ConvolverNode is hooked into its own GainNode to control the convolved audio volume. The outputs of the GainNodes are connected to the main volume controller.
+  
+```js
+...
+var ctx = new webkitAudioContext();
+var mainVolume = ctx.createGain();
+
+// Create a convolver to apply environmental effects to the audio.
+var convolver = ctx.createConvolver();
+
+// Create a mixer that receives sound from the panners.
+var mixer = ctx.createGain();
+
+sounds.forEach(function(sound){
+  sound.panner.connect(mixer);
+});
+
+// Create volume controllers for the plain audio and the convolver.
+var plainGain = ctx.createGain();
+var convolverGain = ctx.createGain();
+
+// Send audio from the mixer to plainGain and the convolver node.
+mixer.connect(plainGain);
+mixer.connect(convolver);
+
+// Hook up the convolver to its volume control.
+convolver.connect(convolverGain);
+
+// Send audio from the volume controls to the main volume control.
+plainGain.connect(mainVolume);
+convolverGain.connect(mainVolume);
+
+// Finally, connect the main volume to the audio context's destination.
+volume.connect(ctx.destination);
+...
+``` 
+
+To make the ConvolverNode work, you need to load an impulse response sample into a buffer and make the ConvolverNode use it. Loading the sample happens in the same way as with normal sound samples. Below is an example of one way to do it:
+
+```js
+...
+loadBuffer(ctx, "impulseResponseExample.wav", function(buffer){
+  convolver.buffer = buffer;
+  convolverGain.gain.value = 0.7;
+  plainGain.gain.value = 0.3;
+})
+...
+function loadBuffer(ctx, filename, callback) {
+  var request = new XMLHttpRequest();
+  request.open("GET", soundFileName, true);
+  request.responseType = "arraybuffer";
+  request.onload = function() {
+    // Create a buffer and keep the channels unchanged.
+    ctx.decodeAudioData(request.response, callback, function() {
+      alert("Decoding the audio buffer failed");
+    });
+  };
+  request.send();
+}
+```
+## Summary
+
+In this article you learned how to add positional audio to your 3D scenes using the Web Audio API. The Web Audio API gives you a way to set the position, orientation and velocity of audio sources and the listener. By setting those to track the objects in your 3D scene, you can create a rich soundscape for your 3D applications.
+
+To make the audio experience even more compelling, you can use the ConvolverNode in the Web Audio API to set up the general sound of the environment. From cathedrals to closed rooms, you can simulate a variety of effects and environments using the Web Audio API.
+
+## References
+
+- [Web Audio API specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)
+- [Impulse response](http://en.wikipedia.org/wiki/Impulse_response)
+- [Three.js](https://github.com/mrdoob/three.js)
+- [A cool 3D Positional Audio example](http://apps.playcanvas.com/dave/tutorials/3d_audio)
+- [Web Audio Examples](http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) has a lot of good examples on using Web Audio API features.
diff --git a/src/site/content/en/blog/webauthn-credential-management/index.md b/src/site/content/en/blog/webauthn-credential-management/index.md
new file mode 100644
index 00000000000..6e5f2f9f73f
--- /dev/null
+++ b/src/site/content/en/blog/webauthn-credential-management/index.md
@@ -0,0 +1,184 @@
+---
+layout: post
+title: Credential Management API Feature Detection Check-up
+authors:
+  - agektmr
+description: |
+  Credential Management API Feature Detection Check-up
+date: 2018-03-14
+updated: 2018-03-14
+tags:
+  - blog
+
+---
+
+## Summary
+[WebAuthn](https://www.w3.org/TR/webauthn/) helps increase security by bringing
+public-key credential based authentication to the Web, and is soon to be
+supported in Chrome, Firefox and Edge ([with the updated
+spec](https://docs.microsoft.com/microsoft-edge/dev-guide/device/web-authentication#differences-between-microsoft-edge-and-the-spec)).
+It adds a new kind of `Credential` object, which, however, may break websites
+that use [the Credential Management
+API](https://www.w3.org/TR/credential-management-1/) without feature-detecting
+the specific credential types they're using.
+
+### If you are currently doing this for feature detection
+
+```js
+if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+    // use CM API
+}
+```
+
+### Do these instead
+
+```js
+if (window.PasswordCredential || window.FederatedCredential) {
+    // Call navigator.credentials.get() to retrieve stored
+    // PasswordCredentials or FederatedCredentials.
+}
+
+if (window.PasswordCredential) {
+    // Get/Store PasswordCredential
+}
+
+if (window.FederatedCredential) {
+    // Get/Store FederatedCredential
+}
+
+if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+    // Call navigator.credentials.preventSilentAccess()
+}
+```
+
+See [changes](https://github.com/GoogleChromeLabs/credential-management-sample/pull/15/files
+) made to the sample code as an example.
+
+Read on to learn more.
+
+{% Aside %}
+If you are using Google identity as a primary way for your users to
+sign-in, consider using the [one tap sign-up and automatic
+sign-in](https://developers.google.com/identity/gsi/web/guides/overview) JavaScript library
+built on the Credential Management API. It combines Google sign-in and
+password-based sign-in into one API call, and adds support for one-tap account
+creation.
+{% endAside %}
+
+## What is the Credential Management API
+[The Credential Management API](https://www.w3.org/TR/credential-management-1/)
+(CM API) gives websites programmatic access to the user agent’s credential store
+for storing/retrieving user credentials for the calling origin.
+
+Basic APIs are:
+
+* `navigator.credentials.get()`
+* `navigator.credentials.store()`
+* `navigator.credentials.create()`
+* `navigator.credentials.preventSilentAccess()`
+
+The original CM API specification defines 2 credential types:
+
+* `PasswordCredential`
+* `FederatedCredential`
+
+The `PasswordCredential` is a credential that contains user's id and password.
+The `FederatedCredential` is a credential that contains user's id and a string
+that represents an identity provider.
+
+With these 2 credentials, websites can:
+
+* Let the user sign-in with a previously saved password-based or federated
+  credential as soon as they land (auto sign-in),
+* Store the password-based or federated credential the user has signed in with,
+* Keep the user's sign-in credentials up-to-date (e.g. after a password change)
+
+## What is WebAuthn
+[WebAuthn](https://www.w3.org/TR/webauthn/) (Web Authentication) adds public-key
+credentials to the CM API. For example, it gives websites a standardized way to
+implement second-factor authentication using [FIDO
+2.0](https://fidoalliance.org/) compliant authenticator devices.
+
+On a technical level, WebAuthn extends the CM API with the `PublicKeyCredential`
+interface.
+
+## What is the problem?
+Previously we have been guiding developers to feature detect the CM API with
+following code:
+
+```js
+if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+  // Use CM API
+}
+
+But as you can see from the descriptions above, the `navigator.credentials` is
+now expanded to support public-key credentials in addition to password
+credentials and federated credentials.
+
+The problem is that user agents don't necessarily support all kinds of
+credentials. If you continue feature detect using `navigator.credentials`, your
+website may break when you are using a certain credential type not supported by
+the browser.
+
+**Supported credential types by browsers**
+<table class="properties with-heading-tint"><tbody><tr>
+<th></th>
+<th>PasswordCredential / FederatedCredential</th>
+<th>PublicKeyCredential</th>
+</tr><tr><th>Chrome
+</th><td>Available
+</td><td>In development
+</td></tr><tr><th>Firefox
+</th><td>N/A
+</td><td>Aiming to ship on 60
+</td></tr><tr><th>Edge
+</th><td>N/A
+</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
+</td></tr></tbody></table>
+
+
+## The solution
+You can avoid this by modifying feature detection code as follows to explicitly
+test for the credential type that you intend to use.
+
+```js
+if (window.PasswordCredential || window.FederatedCredential) {
+    // Call navigator.credentials.get() to retrieve stored
+    // PasswordCredentials or FederatedCredentials.
+}
+
+if (window.PasswordCredential) {
+    // Get/Store PasswordCredential
+}
+
+if (window.FederatedCredential) {
+    // Get/Store FederatedCredential
+}
+
+if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+    // Call navigator.credentials.preventSilentAccess()
+}
+```
+
+See [actual
+changes](https://github.com/GoogleChromeLabs/credential-management-sample/pull/15/files
+) made to the sample code as an example.
+
+For a reference, here's how to detect `PublicKeyCredential` added in WebAuthn:
+
+```js
+if (window.PublicKeyCredential) {
+    // use CM API with PublicKeyCredential added in the WebAuthn spec
+}
+```
+
+## Timeline
+
+Earliest available implementation of WebAuthn is Firefox and is [planned to be stable around early May 2018](https://wiki.mozilla.org/RapidRelease/Calendar).
+
+
+## Finally
+If you have any questions, send them over to
+[@agektmr](https://twitter.com/agektmr) or
+&#x61;&#x67;&#x65;&#x6b;&#x74;&#x6d;&#x72;&#x40;chromium.org.
+
diff --git a/src/site/content/en/blog/webcomponents-org/index.md b/src/site/content/en/blog/webcomponents-org/index.md
new file mode 100644
index 00000000000..85d8bde3fbe
--- /dev/null
+++ b/src/site/content/en/blog/webcomponents-org/index.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Web Components v1 - the next generation
+subhead: Web Components are gaining cross-browser support, the community is growing in leaps and bounds, and there’s a brand-new Web Component catalog to find exactly the component you need.
+authors:
+  - taylorsavage
+description: |
+  Web Components are gaining cross-browser support, the community is growing in leaps and bounds, and there’s a brand-new Web Component catalog to find exactly the component you need.
+date: 2017-01-10
+updated: 2017-01-10
+tags:
+  - blog
+
+---
+
+Ever wanted to build your own self-contained JavaScript component, that you can
+easily use across multiple projects or share with other developers regardless of
+what JavaScript framework they use? Web Components may be for you.
+
+Web Components are a set of new web platform features that let you create your
+own HTML elements. Each new custom element can have a custom tag like
+`<my-button>`, and have all the goodness of built-in elements - custom elements
+can have properties and methods, fire and respond to events, and even have an
+encapsulated style and DOM trees to bring along their own look and feel.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xJG9oEv9gPswKbN6hyzo.gif", alt="Animation of paper-progress element.", width="576", height="174" %}
+</figure>
+
+By providing a platform-based, low-level component model, Web Components let you
+build and share re-usable elements for everything from specialized buttons to
+complex views like datepickers. Because Web Components are built with platform
+API’s which include powerful encapsulation primitives, you can even use these
+components within other JavaScript libraries or frameworks as if they were
+standard DOM elements.
+
+You may have heard of Web Components before - an early version of the Web
+Components spec - v0 - was [shipped in Chrome
+33](https://www.chromestatus.com/feature/4642138092470272).
+
+Today, thanks to broad collaboration between browser vendors, the
+next-generation of the Web Components spec - v1 - is gaining wide support.
+Chrome supports the two major specs that make up Web Components - [Shadow
+DOM](/shadowdom-v1/) and [Custom
+Elements](/custom-elements-v1/)
+- as of [Chrome 53](https://www.chromestatus.com/feature/4667415417847808) and
+[Chrome 54](https://www.chromestatus.com/feature/4696261944934400) respectively.
+Safari shipped support for [Shadow DOM v1 in Safari
+10](https://webkit.org/status/#feature-shadow-dom), and has completed
+implementation of [Custom Elements v1 in
+WebKit](https://webkit.org/blog/7027/introducing-custom-elements/). Firefox is
+currently developing [Shadow
+DOM](https://mozilla.github.io/standards-positions/#declarative-shadow-dom) and [Custom
+Elements](https://mozilla.github.io/standards-positions/#custom-elements) v1, and both
+[Shadow
+DOM](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shadowdom/)
+and [Custom
+Elements](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/customelements/)
+are on the roadmap for Edge.
+
+To define a new custom element using the v1 implementation, you simply create a
+new class that extends `HTMLElement` using ES6 syntax and register it with the
+browser:
+
+```js
+class MyElement extends HTMLElement {...}
+window.customElements.define('my-element', MyElement);
+```
+
+The new v1 specs are extremely powerful - we’ve put together tutorials on using
+[Custom Elements v1](/custom-elements-v1/)
+and [Shadow DOM v1](/shadowdom-v1/) to help
+you get started.
+
+## webcomponents.org
+
+The Web Component community is also growing in leaps and bounds. We’re excited
+to see the launch of an updated
+[webcomponents.org](https://www.webcomponents.org/) site - the focal point of
+the web components community - including an integrated catalog for developers to
+share their elements.
+
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/b3XhRqdMM107Vb3P8pKI.gif", alt="webcomponents.org", width="600", height="652" %}
+</figure>
+
+The webcomponents.org site contains information about the Web Components
+[specs](https://www.webcomponents.org/specs), updates and content from the [web
+components community](https://www.webcomponents.org/community), and displays
+documentation for [open-source
+elements](https://www.webcomponents.org/element/PolymerElements/paper-button)
+and [collections of
+elements](https://www.webcomponents.org/collection/PolymerElements/paper-elements)
+built by other developers.
+
+You can get started building your first element using a library like Google’s
+[Polymer](https://www.polymer-project.org/), or just use the low-level Web
+Component API’s directly. Then [publish your
+element](https://www.webcomponents.org/publish) on webcomponents.org.
+
+Happy componentizing!
diff --git a/src/site/content/en/blog/webcomponents-template/index.md b/src/site/content/en/blog/webcomponents-template/index.md
new file mode 100644
index 00000000000..770333c1af1
--- /dev/null
+++ b/src/site/content/en/blog/webcomponents-template/index.md
@@ -0,0 +1,329 @@
+---
+layout: post
+title: HTML's New Template Tag
+subhead: Standardizing client-side templating
+authors:
+  - ericbidelman
+date: 2013-02-26
+updated: 2013-12-18
+tags:
+  - blog
+---
+
+## Introduction
+
+The concept of templating is not new to web development. In fact, server-side
+[templating languages/engines](http://en.wikipedia.org/wiki/Template_engine_(web)) like Django (Python), ERB/Haml (Ruby), and Smarty (PHP)
+have been around for a long time. In the last couple of years however, we've seen
+an explosion of MVC frameworks spring up. All of them are slightly different,
+yet most share a common mechanic for rendering their presentational layer (aka da view): templates.
+
+Let's face it. Templates are fantastic. Go ahead, ask around. Even its [definition](http://www.thefreedictionary.com/template) makes you feel warm and cozy:
+
+{% Aside %}
+**template** (n) - A document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.
+{% endAside %}
+
+"…does not have to be recreated each time…" Don't know about you, but I love
+avoiding extra work. Why then does the web platform lack
+native support for something developers clearly care about?
+
+The [WhatWG HTML Templates specification][spec-link] is the answer. It defines a
+new `<template>` element which describes a standard DOM-based approach
+for client-side templating. Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated
+later on at runtime. To quote [Rafael Weinstein](https://plus.google.com/111386188573471152118/posts):
+
+{% Blockquote 'Rafael Weinstein (spec author)' %}
+They're a place to put a big wad of HTML that you don't want the browser to mess with at all…for any reason.
+{% endBlockquote %}
+
+### Feature Detection
+
+To feature detect `<template>`, create the DOM element and check that the `.content` property exists:
+
+```js
+function supportsTemplate() {
+    return 'content' in document.createElement('template');
+}
+
+if (supportsTemplate()) {
+    // Good to go!
+} else {
+    // Use old templating techniques or libraries.
+}
+```
+
+## Declaring template content
+
+The HTML `<template>` element represents a template in your markup. It contains
+"template contents"; essentially **inert chunks of cloneable DOM**.
+Think of templates as pieces of scaffolding that you can use (and reuse) throughout
+the lifetime of your app.
+
+To create a templated content, declare some markup and wrap it in the `<template>` element:
+
+```html
+<template id="mytemplate">
+    <img src="" alt="great image">
+    <div class="comment"></div>
+</template>
+```
+
+{% Aside %}
+The observant reader may notice the empty image. That's perfectly fine
+and intentional. A broken image won't 404 or produce console errors because it
+won't be fetched on page load. We can dynamically generate the source URL later on.
+{% endAside %}
+
+## The pillars
+
+Wrapping content in a `<template>` gives us few important properties.
+
+1. Its **content is effectively inert until activated**. Essentially,
+your markup is hidden DOM and does not render.
+
+1. Any content within a template won't have side effects. **Script doesn't run,
+images don't load, audio doesn't play**,…until the template is used.
+
+1. **Content is considered not to be in the document**. Using
+`document.getElementById()` or `querySelector()` in the main page won't return
+child nodes of a template.
+
+1. Templates **can** be placed anywhere inside of `<head>`, `<body>`, or `<frameset>` and can
+contain any type of content which is allowed in those elements. Note that "anywhere" means
+that `<template>` can safely be used in places that the HTML parser disallows…all
+but [content model](http://www.w3.org/TR/html5-diff/#content-model) children. It can  also be placed as a child of `<table>` or `<select>`:
+
+```html
+<table>
+  <tr>
+    <template id="cells-to-repeat">
+      <td>some content</td>
+    </template>
+  </tr>
+</table>
+```
+
+## Activating a template
+
+To use a template, you need to activate it. Otherwise its content will never render.
+The simplest way to do this is by creating a deep copy of its `.content` using `document.importNode()`. The `.content` property is a read-only `DocumentFragment` containing the guts of the template.
+
+```js
+var t = document.querySelector('#mytemplate');
+// Populate the src at runtime.
+t.content.querySelector('img').src = 'logo.png';
+
+var clone = document.importNode(t.content, true);
+document.body.appendChild(clone);
+```
+
+After stamping out a template, its content "goes live". In this particular example, the content is cloned, the image request is made, and the final markup is rendered.
+
+## Demos
+
+### Example: Inert script
+
+This example demonstrates the inertness of template content. The `<script>` only
+runs when the button is pressed, stamping out the template.
+
+```html
+<button onclick="useIt()">Use me</button>
+<div id="container"></div>
+<script>
+  function useIt() {
+    var content = document.querySelector('template').content;
+    // Update something in the template DOM.
+    var span = content.querySelector('span');
+    span.textContent = parseInt(span.textContent) + 1;
+    document.querySelector('#container').appendChild(
+      document.importNode(content, true)
+    );
+  }
+</script>
+
+<template>
+  <div>Template used: <span>0</span></div>
+  <script>alert('Thanks!')</script>
+</template>
+```
+
+### Example: Creating Shadow DOM from a template
+
+Most people attach [Shadow DOM](/shadowdom/) to a host by setting a string of markup to `.innerHTML`:
+
+```html
+<div id="host"></div>
+<script>
+  var shadow = document.querySelector('#host').createShadowRoot();
+  shadow.innerHTML = '<span>Host node</span>';
+</script>
+```
+
+The problem with this approach is that the more complex your Shadow DOM gets,
+the more string concatenation you're doing. It doesn't scale, things get messy
+fast, and babies start to cry. This approach is also how XSS was born in the first
+place! `<template>` to the rescue.
+
+Something more sane would be to work with DOM directly by appending template
+content to a shadow root:
+
+```html
+<template>
+<style>
+  :host {
+    background: #f8f8f8;
+    padding: 10px;
+    transition: all 400ms ease-in-out;
+    box-sizing: border-box;
+    border-radius: 5px;
+    width: 450px;
+    max-width: 100%;
+  }
+  :host(:hover) {
+    background: #ccc;
+  }
+  div {
+    position: relative;
+  }
+  header {
+    padding: 5px;
+    border-bottom: 1px solid #aaa;
+  }
+  h3 {
+    margin: 0 !important;
+  }
+  textarea {
+    font-family: inherit;
+    width: 100%;
+    height: 100px;
+    box-sizing: border-box;
+    border: 1px solid #aaa;
+  }
+  footer {
+    position: absolute;
+    bottom: 10px;
+    right: 5px;
+  }
+</style>
+<div>
+  <header>
+    <h3>Add a Comment
+  </header>
+  <content select="p"></content>
+  <textarea></textarea>
+  <footer>
+    <button>Post</button>
+  </footer>
+</div>
+</template>
+
+<div id="host">
+  <p>Instructions go here</p>
+</div>
+
+<script>
+  var shadow = document.querySelector('#host').createShadowRoot();
+  shadow.appendChild(document.querySelector('template').content);
+</script>
+```
+
+## Gotchas
+
+Here are a few gotchas I've come across when using `<template>` in the wild:
+
+- If you're using [modpagespeed](http://code.google.com/p/modpagespeed/), be careful
+of this [bug](http://code.google.com/p/modpagespeed/issues/detail?id=625). Templates
+that define inline `<style scoped>`, many be moved to the head with PageSpeed's CSS rewriting
+rules.
+- There's no way to "prerender" a template, meaning you cannot preload assets,
+process JS, download initial CSS, etc. That goes for both server and client.
+The only time a template renders is when it goes live.
+- Be careful with nested templates. They don't behave as you might expect. For example:
+
+    ```html
+    <template>
+      <ul>
+        <template>
+          <li>Stuff</li>
+        </template>
+      </ul>
+    </template>
+    ```
+
+    Activating the outer template will not active inner templates. That is to say,
+    nested templates require that their children also be manually activated.
+
+### The road to a standard
+
+Let's not forget where we came from. The road to standards-based HTML templates
+has been a long one. Over the years, we've come up with some pretty clever tricks
+for creating reusable templates. Below are two common ones that I've come across.
+I'm including them in this article for comparison.
+
+### Method 1: Offscreen DOM
+
+One approach people have been using for a long time is to create "offscreen"
+DOM and hide it from view using the `hidden` attribute or `display:none`.
+
+```html
+<div id="mytemplate" hidden>
+  <img src="logo.png">
+  <div class="comment"></div>
+</div>
+```
+
+While this technique works, there are a number of downsides. The rundown of this technique:
+
+- *Using DOM* - the browser knows DOM. It's good at it. We can easily clone it.
+- *Nothing is rendered* - adding `hidden` prevents the block from showing.
+- *Not inert* - even though our content is hidden,
+a network request is still made for the image.
+- *Painful styling and theming* - an embedding page must prefix all of its
+CSS rules with `#mytemplate` in order to scope styles down to the template. This
+is brittle and there are no guarantees we won't encounter future naming collisions.
+For example, we're hosed if the embedding page already has an element with that id.
+
+### Method 2: Overloading script
+
+Another technique is overloading `<script>` and manipulating its content
+as a string. John Resig was probably the first to show this back in 2008 with
+his [Micro Templating utility](http://ejohn.org/blog/javascript-micro-templating/).
+Now there are many others, including some new kids on the block like [handlebars.js](http://handlebarsjs.com/).
+
+For example:
+
+```html
+<script id="mytemplate" type="text/x-handlebars-template">
+  <img src="logo.png">
+  <div class="comment"></div>
+</script>
+```
+
+The rundown of this technique:
+
+- *Nothing is rendered* - the browser doesn't render this block because
+`<script>` is `display:none` by default.
+- *Inert* - the browser doesn't parse the script content
+as JS because its type is set to something other than "text/javascript".
+- *Security issues* - encourages the use of `.innerHTML`.
+Run-time string parsing of user-supplied data can easily lead to XSS vulnerabilities.
+
+## Conclusion
+
+Remember when jQuery made working with DOM dead simple? The result was `querySelector()`/`querySelectorAll()`
+being added to the platform. Obvious win, right? A library popularized fetching DOM
+with CSS selectors and standards later adopted it. It doesn't always work that way, but I *love* when it does.
+
+I think `<template>` is a similar case. It standardizes the way we do client-side
+templating, but more importantly, it removes the need for our 2008 hacks.
+Making the entire web authoring process more sane, more maintainable, and more
+full-featured is always a good thing in my book.
+
+## Additional resources
+
+- [WhatWG Specification][spec-link]
+- [Introduction to Web Components](https://www.w3.org/TR/2012/WD-components-intro-20120522/#template-section)
+- [&lt;web>components&lt;/web>](http://html5-demos.appspot.com/static/webcomponents/index.html) ([video](http://www.youtube.com/watch?v=eJZx9c6YL8k)) - a fantastically comprehensive presentation by yours truly.
+
+[spec-link]: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
diff --git a/src/site/content/en/blog/webdatabase-todo/index.md b/src/site/content/en/blog/webdatabase-todo/index.md
new file mode 100644
index 00000000000..389a883e2d5
--- /dev/null
+++ b/src/site/content/en/blog/webdatabase-todo/index.md
@@ -0,0 +1,216 @@
+---
+layout: post
+title: A simple TODO list using HTML5 WebDatabases
+authors:
+- paulkinlan
+date: 2010-02-17
+updated: 2022-07-25
+tags:
+- blog
+---
+
+{% Aside 'warning' %}
+On November 18, 2010, the [W3C announced](http://www.w3.org/TR/webdatabase/)
+that Web SQL database is a deprecated specification. This is a
+recommendation for web developers to no longer use the technology as
+effectively the spec will receive no new updates and browser vendors aren't
+encouraged to support this technology.
+
+Instead, developers are encouraged to use [IndexedDB](/indexeddb/), the
+replacement technology.
+{% endAside%}
+
+## Introduction
+
+[Web Databases](http://dev.w3.org/html5/webdatabase) are new
+in HTML5. Web Databases are hosted and persisted inside a user's browser.
+By allowing developers to create applications with rich query abilities 
+it is envisioned that a new breed of web applications will emerge that
+have the ability to work online and off-line.
+
+The example code in this article demonstrates how to create a very simple
+todo list manager.  It is a very high level tour of some of the features
+available in HTML5.
+
+## Pre-requisites
+
+This sample uses a namespace to encapsulate the database logic.
+
+```js
+var html5rocks = {};
+html5rocks.webdb = {};
+```
+
+## Asynchronous and Transactional
+
+In the majority of cases where you are using Web Database 
+support you will be using the [Asynchronous API](http://dev.w3.org/html5/webdatabase/#asynchronous-database-api).  The Asynchronous API
+is a non-blocking system and as such will not get data
+through return values, but rather will get data delivered to a defined
+callback function.
+
+
+The Web Database support through HTML is transactional.  It is no possible to execute SQL statements outside of a transaction. 
+There are two types of transactions: read/write transactions (`transaction()`) and read
+only transactions (`readTransaction()`). Please note, read/write will lock the entire database.
+
+## Step 1. Opening the database
+
+The database needs to be opened before it can be accessed.  
+You need to define the name, version, description and the size of the database.
+
+```js
+html5rocks.webdb.db = null;
+
+html5rocks.webdb.open = function() {
+var dbSize = 5 * 1024 * 1024; // 5MB
+html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
+}
+
+html5rocks.webdb.onError = function(tx, e) {
+alert("There has been an error: " + e.message);
+}
+
+html5rocks.webdb.onSuccess = function(tx, r) {
+// re-render the data.
+// loadTodoItems is defined in Step 4a
+html5rocks.webdb.getAllTodoItems(loadTodoItems);
+}
+```
+
+## Step 2. Creating a table
+
+You can only create a table by executing a CREATE TABLE SQL statemen inside a transaction.
+
+
+We have defined a function that will create a table in the body onload event. If the table doesn't already exist, a table will be created.  
+
+The table is called todo and has 3 columns.
+
+- ID - a incrementing sequential ID column
+- todo - a text column that is the body of the item
+- added_on - the time that the todo item was created
+
+
+```js
+html5rocks.webdb.createTable = function() {
+var db = html5rocks.webdb.db;
+db.transaction(function(tx) {
+tx.executeSql("CREATE TABLE IF NOT EXISTS " +
+                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
+});
+}
+```
+
+## Step 3. Adding data to a table
+
+We are building a todo list manager so it is pretty important that
+we are able to add todo items in to the database.
+
+A transaction is created, inside the transaction an INSERT into the todo
+table is performed.
+
+executeSql takes several parameters, the SQL to execute and the parameters
+values to bind the query.
+
+```js
+html5rocks.webdb.addTodo = function(todoText) {
+var db = html5rocks.webdb.db;
+db.transaction(function(tx){
+var addedOn = new Date();
+tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
+    [todoText, addedOn],
+    html5rocks.webdb.onSuccess,
+    html5rocks.webdb.onError);
+});
+}
+```
+
+## Step 4. Selecting data from a table
+
+Now that the data is in the database, you need a function that gets 
+the data back out.  In Chrome, Webdatabase's use standard SQLite SELECT queries.
+
+```js
+html5rocks.webdb.getAllTodoItems = function(renderFunc) {
+var db = html5rocks.webdb.db;
+db.transaction(function(tx) {
+tx.executeSql("SELECT * FROM todo", [], renderFunc,
+    html5rocks.webdb.onError);
+});
+}
+```
+
+Note that all of these commands used in this sample
+are asynchronous and as such the data is not returned from the transaction
+or the executeSql call.  The results are passed through to the success
+callback. 
+
+## Step 4a. Rendering data from a table
+
+Once the data has been fetched from the table, the loadTodoItems method
+will be called.
+
+The onSuccess callback takes two parameters.  The first being the 
+transaction of the query and the second being the result set.  It is 
+fairly simple to iterate across the data:
+
+```js
+function loadTodoItems(tx, rs) {
+var rowOutput = "";
+var todoItems = document.getElementById("todoItems");
+for (var i=0; i < rs.rows.length; i++) {
+rowOutput += renderTodo(rs.rows.item(i));
+}
+
+todoItems.innerHTML = rowOutput;
+}
+function renderTodo(row) {
+return "<li>" + row.todo + 
+        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
+        row.ID +");\'>Delete</a>]</li>";
+}
+```
+
+The effect of this method call is that the todo list is rendered into
+a DOM Element called "todoItems".
+
+## Step 5. Deleting data from a table
+
+```js
+html5rocks.webdb.deleteTodo = function(id) {
+var db = html5rocks.webdb.db;
+db.transaction(function(tx){
+tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
+    html5rocks.webdb.onSuccess,
+    html5rocks.webdb.onError);
+});
+}
+```
+
+## Step 6. Hooking it all up
+
+When the page loads, open the database and create the table (if needed) and render any todo items that might already be in the database.
+
+```js
+....
+function init() {
+html5rocks.webdb.open();
+html5rocks.webdb.createTable();
+html5rocks.webdb.getAllTodoItems(loadTodoItems);
+}
+</script>
+
+<body onload="init();">
+```
+
+A function that takes the data out of the DOM is needed so,
+call the html5rocks.webdb.addTodo method
+
+```js
+function addTodo() {
+var todo = document.getElementById("todo");
+html5rocks.webdb.addTodo(todo.value);
+todo.value = "";
+}
+```
diff --git a/src/site/content/en/blog/webfonts-quick/index.md b/src/site/content/en/blog/webfonts-quick/index.md
new file mode 100644
index 00000000000..7e9097c13b5
--- /dev/null
+++ b/src/site/content/en/blog/webfonts-quick/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Quick guide to webfonts via @font-face
+authors:
+- paulirish
+date: 2010-08-02
+tags:
+- blog
+---
+
+## Introduction
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Mh7GSbU9speflpdFO00u.png", alt="Font Previewer", width="350", height="275" %}
+<figcaption>
+View the Font Previewer for a taste of how flexible webfonts are</figcaption>
+</figure>
+
+The @font-face feature from CSS3 allows us to use custom typefaces on the web in an accessible, manipulable, and scalable way. But, you might say, "Why would we use @font-face if we have Cufon, sIFR, and using text in images?" 
+A few benefits of leveraging @font-face for custom fonts:
+
+- Full searchability by Find (`ctrl-F`)
+- Accessibility to assistive technologies like screen readers
+- Text is translatable, through in-browser translation or translation services
+- CSS has full ability to tweak the typographical display: `line-height`, `letter-spacing`, `text-shadow`, `text-align`, and selectors like `::first-letter` and `::first-line`
+
+## @font-face at its essence
+At its most basic, we declare a new custom remote font to be used like so:
+
+```css
+@font-face {
+  font-family: 'Tagesschrift';
+  src: url('tagesschrift.ttf');
+}
+```
+
+Then put it to use:
+
+```css
+h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
+```
+
+In this @font-face declaration we're using the `font-family` property to explicitly name the font. It can be anything, regardless of what the font is actually called; `font-family: 'SuperDuperComicSans';` would work out just fine, though perhaps not for your reputation. In the `src` property we point to where the browser can find the font asset. Depending on the browser, some valid font types are eot, ttf, otf, svg, or a [data URI](http://en.wikipedia.org/wiki/Data_URI_scheme) embedding the entire font data inline.
+
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>otf & ttf</th>
+      <th>svg</th>
+      <th>woff</th>
+      <th>eot</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>IE</th>
+      <td>IE9</td>
+      <td></td>
+      <td>IE9</td>
+      <td>IE5+</td>
+    </tr>
+    <tr>
+      <th>Firefox</th>
+      <td>FF3.5</td>
+      <td>FF3.5</td>
+      <td>FF3.6</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>Chrome</th>
+      <td>Chrome 4</td>
+      <td>Chrome 0.3</td>
+      <td>Chrome 5</td> 
+      <td></td>
+    </tr>
+    <tr>
+      <th>Safari</th>
+      <td>3.1</td>
+      <td>3.1</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>Opera</th>
+      <td>Opera 10.00</td>
+      <td>Opera 9</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>iOS</th>
+      <td></td>
+      <td>iOS 1</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>Android</th>
+      <td>2.2</td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+
+Of course, nothing is ever as simple as it should be. The initial limitation of the above code was that it did not serve an EOT to IE 6-8. The [bulletproof @font-face syntax](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/) proposed a way of solving this; a robust version follows.
+
+```css
+@font-face {
+  font-family: 'Tagesschrift';
+  src: url('tagesschrift.eot'); /* IE 5-8 */ 
+  src: local('&#9786;'),             /* sneakily trick IE */
+        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
+        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
+        url('tagesschrift.svg#font') format('svg'); /* iOS */
+}
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/uA2HtNFdzL80mPDSUxxk.png", alt="Font squirrel generator", width="350", height="227" %}
+<figcaption>
+The Font Squirrel generator</figcaption
+></figure>
+
+
+Inducing a headache yet? If you'd rather just get this off the ground quickly, head to the [Font Squirrel generator](http://www.fontsquirrel.com/fontface/generator), a tool that simplifies the whole process for you, taking your font and preparing its variants and CSS for you. It's indispensable for putting webfonts into practice today. 
+
+### Mobile support?
+
+Mobile Safari [supports](http://mwhenry.com/blog/2009/12/font-face-support-table/) SVG webfonts as of iOS 3.1 and Android supports otf/ttf as of version 2.2. But should your mobile users get this enhanced typographic experience? I'd recommend no. The predominant reason is due to how WebKit handles text that is awaiting a custom font via @font-face: the text is invisible. So on a low-bandwidth mobile connection, your users will see no text at all until the ~50k of font data has loaded. The Webkit team is pursuing a solution of turning on a fallback font after a few seconds have expired, but until that has landed, I wouldn't consider it fair to subject your users to such roadblocks between them and your content.
+
+## Webfont services
+A number of services wrap the @font-face feature in an easy API, oftentimes letting you add a single CSS or script line to your HTML and some configuration and you're all done. Many like [WebInk](http://www.extensis.com/en/WebINK/), [Typekit](http://typekit.com/), and [Fontslive](http://www.fontslive.com/) will allow you to use the fonts (sometimes up to a bandwidth cap) for a monthly fee. Using these services is very convenient for the casual developer, handing off some of the complications of serving a cross-browser solution
+
+The [Google Font API](http://code.google.com/apis/webfonts/) lets you use a small, curated set of freely licensed fonts by just linking to a stylesheet and letting Google handle the cross-browser and performance concerns. It's the fastest way to get off the ground and running with webfonts.
+  
+## Finding professional typefaces for @font-face
+
+A common surprise to designers is that just because you purchase a font license (to use in your graphic design, for example), that doesn't mean you can use it in @font-face. Licenses for @font-face (or web embedding) are typically sold separately. Read the agreement carefully, and feel free to contact the font foundry if you have questions.
+[Fontspring](http://fontspring.com) is a font boutique, selling hundreds of quality professional fonts, all of them cleared for use with @font-face. [FontFont](http://fontshop.com), and other foundries, have begun selling @font-face licenses directly, though currently only targeting WOFF and EOT, which leave out a sizable (but shrinking) portion of the browser market. Many foundries are adding webfont licenses to their catalog, but if you can't find one for your chosen typeface, get in touch with them to ask about it.
+
+## Dealing with FOUT
+
+The [Flash of Unstyled Text](http://paulirish.com/2009/fighting-the-font-face-fout/) is a phenomenon in Firefox and Opera that few web designers are fond of. When you apply a custom typeface via @font-face, there is a brief moment, when loading the page, where the font hasn't been downloaded and applied yet, and the next font in the `font-family` stack is used. This causes a flash of a different (typically less good looking) font, before it gets upgraded.
+
+<figure class="big">
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hQ4Vdl0qMHQstmYRqJLW.png", alt="ALT_TEXT_HERE", width="600", height="184" %}
+<figcaption>The Flash of Unstyled Text happening to the HTML5 Slide deck.</figcaption>
+</figure>
+
+Accompanying the Google Font API is the [WebFont Loader](http://code.google.com/apis/webfonts/docs/webfont_loader.html), a javascript library aiming to provide a number of event hooks giving you a lot of control over the loading. Let's take a look at how you can get other browsers to mimic WebKit's behavior of hiding the fallback text while the @font-face font loads.
+
+```html
+<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
+<script>
+WebFont.load({
+  custom: {
+    families: ['Tagesschrift'],
+    urls: ['http://paulirish.com/tagesschrift.css']
+  }
+});
+</script>
+```
+
+```css
+/* we want Tagesschrift to apply to all h2's */
+.wf-loading h2 {
+  visibility: hidden;
+}
+.wf-active h2, .wf-inactive h2 {
+  visibility: visible;
+  font-family: 'Tagesschrift', 'Georgia', serif;
+}
+```
+
+If JavaScript is disabled, the text will remain visible the whole time, and if the font errors somehow, it'll fall back to a basic serif safely. Consider this a stop-gap measure for now; most webfont experts desire hiding the fallback text for 2-5 seconds, then revealing it. Low-bandwidth and mobile devices benefit greatly by this timeout. Understandably, Mozilla is looking to rectify this soon.
+
+A more lightweight but less effective solution is the `font-size-adjust` property, currently only supported in Firefox. It gives you an opportunity to normalize [x-height](http://en.wikipedia.org/wiki/X-height) across a font-stack, reducing the amount of visible change in the FOUT. In fact, the [Font Squirrel generator](http://www.fontsquirrel.com/fontface/generator) just added a feature where it tells you the x-height ratio of the fonts you upload, so you can accurately set the `font-size-adjust` value.
+
+## Summary
+Webfonts deliver quite a bit of freedom to designers and with upcoming features like [discretionary ligatures and stylistic alternates](http://hacks.mozilla.org/2009/10/font-control-for-designers/), they will have a lot more flexibility. For now, you can feel confident implementing this part of CSS3 as it covers 98% of deployed browsers. Enjoy!
diff --git a/src/site/content/en/blog/webgl-fundamentals/index.md b/src/site/content/en/blog/webgl-fundamentals/index.md
new file mode 100644
index 00000000000..e046425c945
--- /dev/null
+++ b/src/site/content/en/blog/webgl-fundamentals/index.md
@@ -0,0 +1,658 @@
+---
+layout: post
+title: WebGL Fundamentals
+authors:
+- gman
+date: 2012-02-09
+tags:
+- blog
+---
+
+## WebGL Fundamentals
+WebGL makes it possible to display amazing realtime 3D graphics in your browser but what many people don't know is that WebGL is actually a 2D API, not a 3D API. Let me explain.
+
+WebGL only cares about 2 things. Clipspace coordinates in 2D and colors. Your job as a programmer using WebGL is to provide WebGL with those 2 things. You provide 2 "shaders" to do this. A Vertex shader which provides the clipspace coordinates and a fragment shader that provides the color.
+Clipspace coordinates always go from -1 to +1 no matter what size your canvas is. Here is a simple WebGL example that shows WebGL in its simplest form.
+
+```js
+// Get A WebGL context
+var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("experimental-webgl");
+
+// setup a GLSL program
+var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
+var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
+var program = createProgram(gl, [vertexShader, fragmentShader]);
+gl.useProgram(program);
+
+// look up where the vertex data needs to go.
+var positionLocation = gl.getAttribLocation(program, "a_position");
+
+// Create a buffer and put a single clipspace rectangle in
+// it (2 triangles)
+var buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+        -1.0, -1.0,
+         1.0, -1.0,
+        -1.0,  1.0,
+        -1.0,  1.0,
+         1.0, -1.0,
+         1.0,  1.0]),
+    gl.STATIC_DRAW);
+gl.enableVertexAttribArray(positionLocation);
+gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+// draw
+gl.drawArrays(gl.TRIANGLES, 0, 6);
+```
+
+Here's the 2 shaders
+
+```js
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+void main() {
+  gl_Position = vec4(a_position, 0, 1);
+}
+</script>
+
+<script id="2d-fragment-shader" type="x-shader/x-fragment">
+void main() {
+  gl_FragColor = vec4(0,1,0,1);  // green
+}
+</script>
+```
+
+Again, clipspace coordinates always go from -1 to +1 regardless of the size of the canvas. In the case above you can see we are doing nothing but passing on our position data directly. Since the position data is already in clipspace there is no work to do. **If you want 3D it's up to you to supply shaders that convert from 3D to 2D because WebGL IS A 2D API!**
+For 2D stuff you would probably rather work in pixels than clipspace so let's change the shader so we can supply rectangles in pixels and have it convert to clipspace for us. Here's the new vertex shader
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+
+void main() {
+   // convert the rectangle from pixels to 0.0 to 1.0
+   vec2 zeroToOne = a_position / u_resolution;
+
+   // convert from 0->1 to 0->2
+   vec2 zeroToTwo = zeroToOne * 2.0;
+
+   // convert from 0->2 to -1->+1 (clipspace)
+   vec2 clipSpace = zeroToTwo - 1.0;
+
+   gl_Position = vec4(clipSpace, 0, 1);
+}
+</script>
+```
+
+Now we can change our data from clipspace to pixels
+
+```js
+// set the resolution
+var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
+gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+
+// setup a rectangle from 10,20 to 80,30 in pixels
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    10, 20,
+    80, 20,
+    10, 30,
+    10, 30,
+    80, 20,
+    80, 30]), gl.STATIC_DRAW);
+```
+
+You might notice the rectangle is near the bottom of that area. WebGL considers the bottom left corner to be 0,0. To get it to be the more traditional top left corner used for 2d graphics APIs we just flip the y coordinate.
+
+```js
+gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+```
+
+Let's make the code that defines a rectangle into a function so we can call it for different sized rectangles. While we're at it we'll make the color settable.
+First we make the fragment shader take a color uniform input.
+
+```html
+<script id="2d-fragment-shader" type="x-shader/x-fragment">
+precision mediump float;
+
+uniform vec4 u_color;
+
+void main() {
+   gl_FragColor = u_color;
+}
+</script>
+```
+
+And here's the new code that draws 50 rectangles in random places and random colors.
+
+```js
+...
+
+  var colorLocation = gl.getUniformLocation(program, "u_color");
+  ...
+  // Create a buffer
+  var buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(positionLocation);
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+  // draw 50 random rectangles in random colors
+  for (var ii = 0; ii < 50; ++ii) {
+    // Setup a random rectangle
+    setRectangle(
+        gl, randomInt(300), randomInt(300), randomInt(300), randomInt(300));
+
+    // Set a random color.
+    gl.uniform4f(colorLocation, Math.random(), Math.random(), Math.random(), 1);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+}
+
+// Returns a random integer from 0 to range - 1.
+function randomInt(range) {
+  return Math.floor(Math.random() * range);
+}
+
+// Fills the buffer with the values that define a rectangle.
+function setRectangle(gl, x, y, width, height) {
+  var x1 = x;
+  var x2 = x + width;
+  var y1 = y;
+  var y2 = y + height;
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+     x1, y1,
+     x2, y1,
+     x1, y2,
+     x1, y2,
+     x2, y1,
+     x2, y2]), gl.STATIC_DRAW);
+}
+```
+
+I hope you can see that WebGL is actually a pretty simple API. While it can get more complicated to do 3D that complication is added by you, the programmer, in the form of more complex shaders. The WebGL API itself is 2D and fairly simple.
+
+### What do type="x-shader/x-vertex" and type="x-shader/x-fragment" mean?
+
+`<script>` tags default to having JavaScript in them. You can put no type or you can put `type="javascript"` or `type="text/javascript"` and the browser will interpret the contents as JavaScript. If you put anything else the browser ignores the contents of the script tag.
+
+
+We can use this feature to store shaders in script tags. Even better, we can make up our own type and in our javascript look for that to decide whether to compile the shader as a vertex shader or a fragment shader.
+
+
+In this case the function `createShaderFromScriptElement` looks for a script with specified `id` and then looks at the `type` to decide what type of shader to create.
+
+## WebGL Image Processing
+
+Image processing is easy in WebGL. How easy? Read below.
+
+To draw images in WebGL we need to use textures. Similarly to the way WebGL expects clipspace coordinates when rendering instead of pixels, WebGL expects texture coordinates when reading a texture. Texture coordinates go from 0.0 to 1.0 no matter the dimensions of the texture.
+Since we are only drawing a single rectangle (well, 2 triangles) we need to tell WebGL which place in the texture each point in the rectangle corresponds to. We'll pass this information from the vertex shader to the fragment shader using a special kind of variable called a 'varying'. It's called a varying because it varies. WebGL will interpolate the values we provide in the vertex shader as it draws each pixel using the fragment shader.
+Using the vertex shader from the end of previous section we need to add an attribute to pass in texture coordinates and then pass those on to the fragment shader.
+
+```js
+attribute vec2 a_texCoord;
+...
+varying vec2 v_texCoord;
+
+void main() {
+   ...
+   // pass the texCoord to the fragment shader
+   // The GPU will interpolate this value between points
+   v_texCoord = a_texCoord;
+}
+```
+
+Then we supply a fragment shader to look up colors from the texture.
+
+```html
+<script id="2d-fragment-shader" type="x-shader/x-fragment">
+precision mediump float;
+
+// our texture
+uniform sampler2D u_image;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+   // Look up a color from the texture.
+   gl_FragColor = texture2D(u_image, v_texCoord);
+}
+</script>
+```
+
+Finally we need to load an image, create a texture and copy the image into the texture. Because we are in a browser images load asynchronously so we have to re-arrange our code a little to wait for the texture to load. Once it loads we'll draw it.
+
+```js
+function main() {
+  var image = new Image();
+  image.src = "http://someimage/on/our/server";  // MUST BE SAME DOMAIN!!!
+  image.onload = function() {
+    render(image);
+  }
+}
+
+function render(image) {
+  ...
+  // all the code we had before.
+  ...
+  // look up where the texture coordinates need to go.
+  var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+
+  // provide texture coordinates for the rectangle.
+  var texCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      0.0,  0.0,
+      1.0,  0.0,
+      0.0,  1.0,
+      0.0,  1.0,
+      1.0,  0.0,
+      1.0,  1.0]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(texCoordLocation);
+  gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+
+  // Create a texture.
+  var texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Set the parameters so we can render any size image.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+  // Upload the image into the texture.
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  ...
+}
+```
+
+Not too exciting so let's manipulate that image. How about just swapping red and blue?
+
+```js
+...
+gl_FragColor = texture2D(u_image, v_texCoord).bgra;
+...
+```
+
+What if we want to do image processing that actually looks at other pixels? Since WebGL references textures in texture coordinates which go from 0.0 to 1.0 then we can calculate how much to move for 1 pixel with the simple math `onePixel = 1.0 / textureSize`.
+Here's a fragment shader that averages the left and right pixels of each pixel in the texture.
+
+```html
+<script id="2d-fragment-shader" type="x-shader/x-fragment">
+precision mediump float;
+
+// our texture
+uniform sampler2D u_image;
+uniform vec2 u_textureSize;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+   // compute 1 pixel in texture coordinates.
+   vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
+
+   // average the left, middle, and right pixels.
+   gl_FragColor = (
+       texture2D(u_image, v_texCoord) +
+       texture2D(u_image, v_texCoord + vec2(onePixel.x, 0.0)) +
+       texture2D(u_image, v_texCoord + vec2(-onePixel.x, 0.0))) / 3.0;
+}
+</script>
+```
+
+We then need to pass in the size of the texture from JavaScript.
+
+```js
+...
+var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");
+...
+// set the size of the image
+gl.uniform2f(textureSizeLocation, image.width, image.height);
+...
+```
+
+Now that we know how to reference other pixels let's use a convolution kernel to do a bunch of common image processing. In this case we'll use a 3x3 kernel. A convolution kernel is just a 3x3 matrix where each entry in the matrix represents how much to multiply the 8 pixels around the pixel we are rendering. We then divide the result by the weight of the kernel (the sum of all values in the kernel) or 1.0, which ever is greater. [Here's a pretty good article on it](http://docs.gimp.org/en/plug-in-convmatrix.html). And [here's another article showing some actual code if you were to write this by hand in C++](http://www.codeproject.com/KB/graphics/ImageConvolution.aspx).
+In our case we're going to do that work in the shader so here's the new fragment shader.
+
+```js
+<script id="2d-fragment-shader" type="x-shader/x-fragment">
+precision mediump float;
+
+// our texture
+uniform sampler2D u_image;
+uniform vec2 u_textureSize;
+uniform float u_kernel[9];
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+   vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
+   vec4 colorSum =
+     texture2D(u_image, v_texCoord + onePixel * vec2(-1, -1)) * u_kernel[0] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 0, -1)) * u_kernel[1] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 1, -1)) * u_kernel[2] +
+     texture2D(u_image, v_texCoord + onePixel * vec2(-1,  0)) * u_kernel[3] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 0,  0)) * u_kernel[4] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 1,  0)) * u_kernel[5] +
+     texture2D(u_image, v_texCoord + onePixel * vec2(-1,  1)) * u_kernel[6] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 0,  1)) * u_kernel[7] +
+     texture2D(u_image, v_texCoord + onePixel * vec2( 1,  1)) * u_kernel[8] ;
+   float kernelWeight =
+     u_kernel[0] +
+     u_kernel[1] +
+     u_kernel[2] +
+     u_kernel[3] +
+     u_kernel[4] +
+     u_kernel[5] +
+     u_kernel[6] +
+     u_kernel[7] +
+     u_kernel[8] ;
+
+   if (kernelWeight <= 0.0) {
+     kernelWeight = 1.0;
+   }
+
+   // Divide the sum by the weight but just use rgb
+   // we'll set alpha to 1.0
+   gl_FragColor = vec4((colorSum / kernelWeight).rgb, 1.0);
+}
+</script>
+```
+
+In JavaScript we need to supply a convolution kernel.
+
+```js
+...
+var kernelLocation = gl.getUniformLocation(program, "u_kernel[0]");
+...
+var edgeDetectKernel = [
+    -1, -1, -1,
+    -1,  8, -1,
+    -1, -1, -1
+];
+gl.uniform1fv(kernelLocation, edgeDetectKernel);
+...
+```
+
+I hope this has convinced you image processing in WebGL is pretty simple. Next up I'll go over how to apply more than one effect to the image.
+
+### What's with the a_, u_, and v_ prefixes in from of variables in GLSL?
+
+That's just a naming convention. `a_` for attributes which is the data provided by buffers. `u_` for uniforms which are inputs to the shaders, `v_` for varyings which are values passed from a vertex shader to a fragment shader and interpolated (or varied) between the vertices for each pixel drawn.
+
+
+## Applying multiple effects
+The next most obvious question for image processing is how do apply multiple effects?
+
+Well, you could try to generate shaders on the fly. Provide a UI that lets the user select the effects he wants to use then generate a shader that does all of the effects. That might not always be possible though that technique is often used to create effects for [real time graphics](https://www.youtube.com/watch?v=cQUn0Zeh-0Q).
+A more flexible way is to use 2 more textures and render to each texture in turn, ping ponging back and forth and applying the next effect each time.
+
+```markup
+Original Image -> [Blur]        -> Texture 1
+Texture 1      -> [Sharpen]     -> Texture 2
+Texture 2      -> [Edge Detect] -> Texture 1
+Texture 1      -> [Blur]        -> Texture 2
+Texture 2      -> [Normal]      -> Canvas
+```
+
+To do this we need to create framebuffers. In WebGL and OpenGL, a Framebuffer is actually a poor name. A WebGL/OpenGL Framebuffer is really just a collection of state and not actually a buffer of any kind. But, by attaching a texture to a framebuffer we can render into that texture. 
+First let's turn the old texture creation code into a function
+
+```js
+function createAndSetupTexture(gl) {
+  var texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Set up texture so we can render any size image and so we are
+  // working with pixels.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+  return texture;
+}
+
+// Create a texture and put the image in it.
+var originalImageTexture = createAndSetupTexture(gl);
+gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+```
+
+And now let's use that function to make 2 more textures and attach them to 2 framebuffers.
+
+```js
+// create 2 textures and attach them to framebuffers.
+var textures = [];
+var framebuffers = [];
+for (var ii = 0; ii < 2; ++ii) {
+  var texture = createAndSetupTexture(gl);
+  textures.push(texture);
+
+  // make the texture the same size as the image
+  gl.texImage2D(
+      gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0,
+      gl.RGBA, gl.UNSIGNED_BYTE, null);
+
+  // Create a framebuffer
+  var fbo = gl.createFramebuffer();
+  framebuffers.push(fbo);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+
+  // Attach a texture to it.
+  gl.framebufferTexture2D(
+      gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+}
+```
+
+Now let's make a set of kernels and then a list of them to apply.
+
+```js
+// Define several convolution kernels
+var kernels = {
+  normal: [
+    0, 0, 0,
+    0, 1, 0,
+    0, 0, 0
+  ],
+  gaussianBlur: [
+    0.045, 0.122, 0.045,
+    0.122, 0.332, 0.122,
+    0.045, 0.122, 0.045
+  ],
+  unsharpen: [
+    -1, -1, -1,
+    -1,  9, -1,
+    -1, -1, -1
+  ],
+  emboss: [
+     -2, -1,  0,
+     -1,  1,  1,
+      0,  1,  2
+  ]
+};
+
+// List of effects to apply.
+var effectsToApply = [
+  "gaussianBlur",
+  "emboss",
+  "gaussianBlur",
+  "unsharpen"
+];
+```
+
+And finally let's apply each one, ping ponging which texture we are rendering too
+
+```js
+// start with the original image
+gl.bindTexture(gl.TEXTURE_2D, originalImageTexture);
+
+// don't y flip images while drawing to the textures
+gl.uniform1f(flipYLocation, 1);
+
+// loop through each effect we want to apply.
+for (var ii = 0; ii < effectsToApply.length; ++ii) {
+  // Setup to draw into one of the framebuffers.
+  setFramebuffer(framebuffers[ii % 2], image.width, image.height);
+
+  drawWithKernel(effectsToApply[ii]);
+
+  // for the next draw, use the texture we just rendered to.
+  gl.bindTexture(gl.TEXTURE_2D, textures[ii % 2]);
+}
+
+// finally draw the result to the canvas.
+gl.uniform1f(flipYLocation, -1);  // need to y flip for canvas
+setFramebuffer(null, canvas.width, canvas.height);
+drawWithKernel("normal");
+
+function setFramebuffer(fbo, width, height) {
+  // make this the framebuffer we are rendering to.
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+
+  // Tell the shader the resolution of the framebuffer.
+  gl.uniform2f(resolutionLocation, width, height);
+
+  // Tell webgl the viewport setting needed for framebuffer.
+  gl.viewport(0, 0, width, height);
+}
+
+function drawWithKernel(name) {
+  // set the kernel
+  gl.uniform1fv(kernelLocation, kernels[name]);
+
+  // Draw the rectangle.
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+```
+
+Some things I should go over.
+
+Calling `gl.bindFramebuffer` with `null` tells WebGL you want to render to the canvas instead of to one of your framebuffers.
+WebGL has to convert from clipspace back into pixels. It does this based on the settings of `gl.viewport`. The settings of `gl.viewport` default to the size of the canvas when we initialize WebGL. Since the framebuffers we are rendering into are a different size then the canvas we need to set the viewport appropriately.
+Finally in the WebGL fundamentals examples we flipped the Y coordinate when rendering because WebGL displays the canvas with 0,0 being the bottom left corner instead of the more traditional for 2D top left. That's not needed when rendering to a framebuffer. Because the framebuffer is never displayed, which part is top and bottom is irrelevant. All that matters is that pixel 0,0 in the framebuffer corresponds to 0,0 in our calculations. To deal with this I made it possible to set whether to flip or not by adding one more input into the shader.
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+...
+uniform float u_flipY;
+...
+
+void main() {
+   ...
+   gl_Position = vec4(clipSpace * vec2(1, u_flipY), 0, 1);
+   ...
+}
+</script>
+```
+
+And then we can set it when we render with
+
+```js
+...
+var flipYLocation = gl.getUniformLocation(program, "u_flipY");
+...
+// don't flip
+gl.uniform1f(flipYLocation, 1);
+...
+// flip
+gl.uniform1f(flipYLocation, -1);
+```
+
+I kept this example simple by using single GLSL program that can achieve multiple effects. If you wanted to do full on image processing you'd probably need many GLSL programs. A program for hue, saturation and luminance adjustment. Another for brightness and contrast. One for inverting, another for adjusting levels, etc. You'd need to change the code to switch GLSL programs and update the parameters for that particular program. I'd considered writing that example but it's an exercise best left to the reader because multiple GLSL programs each with their own parameter needs probably means some major refactoring to keep it all from becoming a big mess of spaghetti. 
+I hope this and the preceding examples have made WebGL seem a little more approachable and I hope starting with 2D helps make WebGL a little easier to understand. If I find the time I'll try to write a few more articles about how to do 3D as well as more details on what WebGL is really doing under the hood.
+
+## WebGL and Alpha
+
+I've noticed some OpenGL developers having issues with how WebGL treats alpha in the backbuffer (ie, the canvas), so I thought it might be good to go over some of the differences between WebGL and OpenGL related to alpha.
+
+The biggest difference between OpenGL and WebGL is that OpenGL renders to a backbuffer that is not composited with anything so, or effectively not composited with anything by the OS's window manager, so it doesn't matter what your alpha is.
+WebGL is composited by the browser with the web page and the default is to use pre-multiplied alpha the same as .png `<img>` tags with transparency and 2d canvas tags.
+WebGL has several ways to make this more like OpenGL.
+
+### #1) Tell WebGL you want it composited with non-premultiplied alpha
+
+```js
+gl = canvas.getContext("experimental-webgl", {premultipliedAlpha: false});
+```
+
+The default is true.
+Of course the result will still be composited over page with whatever background color ends up being under the canvas  (the canvas's background color, the canvas's container background color, the page's background color, the stuff behind the canvas if the canvas has a z-index > 0, etc…) in other words, the color CSS defines for that area of the webpage.
+I really good way to find if you have any alpha problems is to set the canvas's background to a bright color like red. You'll immediately see what is happening.
+
+```html
+<canvas style="background: red;"></canvas>
+```
+
+You could also set it to black which will hide any alpha issues you have.
+
+### #2) Tell WebGL you don't want alpha in the backbuffer
+
+```js
+gl = canvas.getContext("experimental-webgl", {alpha: false});
+```
+
+This will make it act more like OpenGL since the backbuffer will only have RGB. This is probably the best option because a good browser could see that you have no alpha and actually optimize the way WebGL is composited. Of course that also means it actually won't have alpha in the backbuffer so if you are using alpha in the backbuffer for some purpose that might not work for you. Few apps that I know of use alpha in the backbuffer. I think arguably this should have been the default.
+
+### #3) Clear alpha at the end of your rendering
+
+```js
+..
+renderScene();
+..
+// Set the backbuffer's alpha to 1.0
+gl.clearColor(1, 1, 1, 1);
+gl.colorMask(false, false, false, true);
+gl.clear(gl.COLOR_BUFFER_BIT);
+```
+
+Clearing is generally very fast as there is a special case for it in most hardware. I did this in most of my demos. If I was smart I'd switch to method #2 above. Maybe I'll do that right after I post this. It seems like most WebGL libraries should default to this method. Those few developers that are actually using alpha for compositing effects can ask for it. The rest will just get the best perf and the least surprises.
+
+### #4) Clear the alpha once then don't render to it anymore
+
+```js
+// At init time. Clear the back buffer.
+gl.clearColor(1,1,1,1);
+gl.clear(gl.COLOR_BUFFER_BIT);
+
+// Turn off rendering to alpha
+gl.colorMask(true, true, true, false);
+```
+
+Of course if you are rendering to your own framebuffers you may need to turn rendering to alpha back on and then turn it off again when you switch to rendering to the canvas.
+
+### #5) Handling Images
+
+Also, if you are loading PNG files with alpha into textures, the default is that their alpha is pre-multiplied which is generally NOT the way most games do things. If you want to prevent that behavior you need to tell WebGL with
+
+```js
+gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+```
+
+### #6) Using a blending equation that works with pre-multiplied alpha
+
+Almost all OpenGL apps I've writing or worked on use
+
+```js
+gl.blendFunc(gl.SRC_ALPHA, gl_ONE_MINUS_SRC_ALPHA);
+```
+
+That works for non pre-multiplied alpha textures.
+If you actually want to work with pre-multiplied alpha textures then you probably want
+
+```js
+gl.blendFunc(gl.ONE, gl_ONE_MINUS_SRC_ALPHA);
+```
+
+Those are the methods I'm aware of. If you know of more please post them below.
diff --git a/src/site/content/en/blog/webgl-globe/index.md b/src/site/content/en/blog/webgl-globe/index.md
new file mode 100644
index 00000000000..f687707ad8c
--- /dev/null
+++ b/src/site/content/en/blog/webgl-globe/index.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: Making of the World Wonders 3D Globe
+authors:
+- ilmariheikkinen
+date: 2012-07-26
+tags:
+- blog
+---
+
+## Introduction to the World Wonders 3D globe
+
+If you've viewed the recently launched [Google World Wonders](http://google.com/worldwonders/) site on a WebGL-capable browser, you might have spotted a fancy spinning globe at the bottom of the screen. This article lets you in on how the globe works and what we used to build it.
+
+To give you a quick overview, the World Wonders globe is a heavily tweaked version of the WebGL Globe by the Google Data Arts Team. We took the original globe, stripped out the bar graph bits, changed the shaders, added fancy clickable HTML markers and Natural Earth continent geometry from Mozilla's GlobeTweeter demo (big thanks to Cedric Pinson!) All to make a nice animated globe that matches the site's color scheme and adds an extra layer of sophistication to the site.
+
+The design brief for the globe was to have a nice-looking animated map with clickable markers placed on top of World Heritage Sites. With that in mind, I started looking for something suitable. The first thing that came to mind was the WebGL Globe built by the Google Data Arts Team. It's a globe and it looks cool. What else do you need, eh?
+
+## Setting up the WebGL Globe
+
+The first step in making the globe widget was to download the WebGL Globe and get it up and running. The WebGL Globe is online at [Google Code](http://code.google.com/p/webgl-globe/), and it's simple to download and run. Download and extract [the zip](http://code.google.com/p/webgl-globe/downloads/detail?name=webgl-globe.zip), cd into it and run a basic webserver: `python -m SimpleHTTPServer`. (Do note, this doesn't have UTF-8 on by default; [you can use this](https://github.com/mathiasbynens/dotfiles/blob/73201f63481e6a9daf24652714af408c3e8f3fc7/.functions#L97-L104).) Now if you navigate to `http://localhost:8000/globe/globe.html` you should see the WebGL Globe.
+
+With the WebGL Globe up and running it was time to cut off all the unneeded parts. I edited the HTML to excise the UI bits and removed the globe bar graph setup stuff from the globe initialization function. At the end of that process, I had a very barebones WebGL Globe on my screen. You can spin it around and it looks cool, but that's about it.
+
+To cut the unneeded stuff, I deleted all the UI elements from the globe's index.html and edited the initialization script in to look like this:
+
+```js
+if(!Detector.webgl){
+  Detector.addGetWebGLMessage();
+} else {
+  var container = document.getElementById('container');
+  var globe = new DAT.Globe(container);
+  globe.animate();
+}
+```
+
+## Adding the continent geometry
+
+We wanted to have the camera close to the globe surface, but when we tested the globe zoomed in the lack of texture resolution became apparent. Zoomed in, the WebGL Globe's texture becomes blocky and blurry. We could have used a larger image, but that would make the globe slower to download and run, so we opted to go with a vector representation of the landmasses and borders.
+
+For the landmass geometry, I turned to the open source GlobeTweeter demo and loaded the 3D model in that to Three.js. With the model loaded and rendering, it was time to start polishing the look for the globe. First problem was that the globe landmass model wasn't spherical enough to be flush with the WebGL Globe, so I ended up writing a quick mesh splitting algorithm that made the landmass model more spherical.
+
+With a spherical landmass model, I was able to place it just slightly offset from the globe surface, creating floating continents outlined with a black 2px line below them for a shadow of sorts. I also experimented with neon-colored outlines to make for a sort of Tron-like look.
+
+With the globe and the landmasses rendering, I started to experiment with different looks for the globe. As we wanted to go with a understated monochrome look, I stuck with a greyscale globe and landmasses. In addition to the aforementioned neon outlines, I tried out a dark globe with dark landmasses on a light background, which actually looks pretty cool. But it was too low-contrast to be easily readable and it didn't fit the feel of the project so I scrapped that.
+
+Another early thought I had for the globe look was to make it look like glazed porcelain. That one I didn't manage to try out as I didn't manage to write a shader to do the porcelain look (visual material editor would be nice). The closest thing I tried was this white glowing globe with black landmasses. It's kinda neat but too high-contrast. And it doesn't look super nice. So another one for the scrapheap.
+
+The shaders in the black and white globes are using a sort of bogus diffuse backlit lighting. The lightness of the globe depends on the distance of the surface normal to the screen plane. So pixels at the middle of the globe that are pointing at the screen are dark and pixels at the edges of the globe are light. Combined with a light background you get a look where the globe is reflecting the diffuse bright background, creating a classy showroom look. The black globe is also using the WebGL Globe texture as a gloss map, so that the continental shelves (shallow water areas) look shiny compared to the other parts of the globe.
+
+Here's what the ocean shader for the black globe looks like. Very basic vertex shader and a hacky "oh that looks kinda neat *tweak tweak*" fragment shader.
+
+```js
+    'ocean' : {
+      uniforms: {
+        'texture': { type: 't', value: 0, texture: null }
+      },
+      vertexShader: [
+        'varying vec3 vNormal;',
+        'varying vec2 vUv;',
+        'void main() {',
+          'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+          'vNormal = normalize( normalMatrix * normal );',
+          'vUv = uv;',
+        '}'
+      ].join('\n'),
+      fragmentShader: [
+        'uniform sampler2D texture;',
+        'varying vec3 vNormal;',
+        'varying vec2 vUv;',
+        'void main() {',
+          'vec3 diffuse = texture2D( texture, vUv ).xyz;',
+          'float intensity = pow(1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 4.0);',
+          'float i = 0.8-pow(clamp(dot( vNormal, vec3( 0, 0, 1.0 )), 0.0, 1.0), 1.5);',
+          'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * intensity;',
+          'float d = clamp(pow(max(0.0,(diffuse.r-0.062)*10.0), 2.0)*5.0, 0.0, 1.0);',
+          'gl_FragColor = vec4( (d*vec3(i)) + ((1.0-d)*diffuse) + atmosphere, 1.0 );',
+        '}'
+      ].join('\n')
+    }
+```
+
+In the end we went with a dark globe with light-grey landmasses lit from above. It was closest to the design brief and looked nice and readable. In addition, having the globe be a bit low-contrast makes the markers and the rest of the content stand out more in comparison. The version below is using completely black oceans, whereas the production version has dark gray oceans and slightly different markers.
+
+## Creating the markers with CSS
+
+Speaking of markers, with the globe and landmasses working, I started work on the placemarkers. I decided to go with CSS-style HTML elements for the markers, to make it easier to make and style the markers, and to potentially reuse the markers in the 2D map the team was working on. At the time I also didn't know of an easy way to make the WebGL markers clickable and didn't want to write extra code for loading / creating the marker models. In hindsight, the CSS markers worked well but had a tendency to occasionally run into performance issues when browser compositors and renderers were in periods of flux. From a performance point of view, doing the markers in WebGL would've been a better option. Then again, the CSS markers saved a good deal of dev time.
+
+The CSS markers consist of a couple of divs absolute-positioned with the CSS transform property. The background of the markers is a CSS gradient and the triangle part of the marker is a rotated div. The markers have a small drop shadow to pop them from the background. The biggest problem with the markers was to make them perform well enough. Sad as it may sound, drawing a few dozen divs that move around and change their z-index on every frame is a pretty good way to trigger all sorts of browser rendering pitfalls.
+
+The way the markers are synchronized with the 3D scene is not too complicated. Each marker has a corresponding Object3D in the Three.js scene, which are used to track the markers. To get screen space coordinates, I take the Three.js matrices for the globe and the marker, and multiply a zero vector with those. From that I get the scene position of the marker. To get the screen position of the marker, I project the scene position through the camera. The resulting projected vector has the screen space coordinates for the marker, ready for use in CSS.
+
+```js
+var mat = new THREE.Matrix4();
+var v = new THREE.Vector3();
+
+for (var i=0; i<locations.length; i++) {
+  mat.copy(scene.matrix);
+  mat.multiplySelf(locations[i].point.matrix);
+  v.set(0,0,0);
+  mat.multiplyVector3(v);
+  projector.projectVector(v, camera);
+  var x = w * (v.x + 1) / 2; // Screen coords are between -1 .. 1, so we transform them to pixels.
+  var y = h - h * (v.y + 1) / 2; // The y coordinate is flipped in WebGL.
+  var z = v.z;
+}
+```
+
+In the end, the fastest approach was to use CSS transforms for moving the markers, not use opacity fading as it was triggering a slow path on Firefox and keeping all the markers in the DOM, not removing them when they went behind the globe. We also experimented with using 3D transforms instead of z-indexes, but for some reason it didn't work right in the app (but it did work in a reduced test case, go figure), and we were a few days from the launch at that point so had to leave that part to post-launch maintenance.
+
+When you click on a marker it expands into a list of clickable placenames. This is all normal HTML DOM stuff, so it was super easy to write. All the links and text rendering just work with no extra work on our part.
+
+## Squeezing the filesize
+
+With the demo working and hooked up to the rest of the World Wonders site, there was still one big issue to solve. The JSON-format mesh for the globe landmasses was about 3 megs in size. Not good for the front page of a showcase site. The good thing was that compressing the mesh with gzip brought it down to 350 kB. But hey, 350 kB is still a bit big. A couple emails later we managed to recruit Won Chun -- who worked on compressing the huge Google Body meshes -- to give us a hand at compressing the mesh. He [squeezed](http://code.google.com/p/webgl-loader/) the mesh down from a big flat list of triangles given as JSON coordinates to compressed 11-bit coords with indexed triangles and got the file size down to 95 kB gzipped.
+
+Using compressed meshes does not only save bandwidth, but the meshes are also faster to parse. Turning 3 megs of stringified numbers into native numbers takes a good deal more work than parsing a hundred kB of binary data. And the resulting 250 kB size reduction for the page is very nifty as well as it gets the initial load time below a second on a 2 Mbps connection. Faster and smaller, awesomesauce!
+
+At the same time, I was doodling around with loading the original Natural Earth Shapefiles from which the GlobeTweeter mesh is derived. I managed to load the Shapefiles but rendering them as flat landmasses requires triangulating them (with holes for lakes, natch.) I got the shapes triangulated using THREE.js utils but not the holes. And the resulting meshes had very long edges, which required splitting the mesh down to smaller tris. Long story short, I didn't manage to get it working in time, but the neat thing was that the further-compressed Shapefile format would've gotten you a 8 kB landmass model. Oh well, maybe next time.
+
+## Future work
+
+One thing that could use a bit of extra work are making the marker animations nicer. Now when they go over the horizon, the effect is a bit tacky. Additionally, having a cool animation for the marker opening would be nice.
+
+Performance-wise the two things lacking are optimizing the mesh splitting algorithm and making the markers faster. Apart from that, things are dandy.  Hurrah!
+
+## Summary
+
+In this article I described how we built the 3D globe for the Google World Wonders project. I hope you enjoyed the examples and will try out building your own custom globe widget.
+
+## References
+
+- [WebGL Globe](http://code.google.com/p/webgl-globe/)
+- [GlobeTweeter](http://plopbyte.com/globetweeter/)
+- [Natural Earth](http://www.naturalearthdata.com/)
+- [Shapefile](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf)
+- [shp.js](https://github.com/kig/shp.js/)
+- [Three.js](https://github.com/mrdoob/three.js/)
diff --git a/src/site/content/en/blog/webgl-jsartoolkit-webrtc/index.md b/src/site/content/en/blog/webgl-jsartoolkit-webrtc/index.md
new file mode 100644
index 00000000000..270660c8862
--- /dev/null
+++ b/src/site/content/en/blog/webgl-jsartoolkit-webrtc/index.md
@@ -0,0 +1,293 @@
+---
+layout: post
+title: Writing augmented reality applications using JSARToolKit
+authors:
+- ilmariheikkinen
+date: 2012-02-28
+tags:
+- blog
+---
+
+## Introduction
+
+This article is about using the [JSARToolKit](https://github.com/kig/JSARToolKit) library with the [WebRTC](http://webrtc.org) getUserMedia API to do augmented reality applications on the web. For rendering, I'm using WebGL due to the increased performance it offers. The end result of this article is a demo application that puts a 3D model on top of an augmented reality marker in webcam video.
+
+JSARToolKit is an augmented reality library for JavaScript. It's an open source library released under the GPL and a direct port of the Flash [FLARToolKit](http://www.libspark.org/wiki/saqoosha/FLARToolKit/en) that I made for the Mozilla [Remixing Reality demo](https://developer.mozilla.org/demos/detail/remixing-reality/launch). FLARToolKit itself is port of the Java [NyARToolKit](http://nyatla.jp/nyartoolkit/wp/), which is a port of the C [ARToolKit](http://www.hitl.washington.edu/artoolkit/). Long way, but here we are.
+
+JSARToolKit operates on canvas elements. As it needs to read the image off the canvas, the image needs to come from the same origin as the page or [use CORS](http://updates.html5rocks.com/2011/07/Using-Cross-domain-images-in-WebGL) to get around same-origin policy. In a nutshell, set the `crossOrigin`-property on the image or video element you want to use as a texture to `''` or `'anonymous'`.
+
+When you pass a canvas to JSARToolKit for analysis, JSARToolKit returns a list of AR markers found in the image and the corresponding transformation matrices. To draw a 3D object on top of a marker, you pass the transformation matrix to whatever 3D rendering library you're using so that your object is transformed using the matrix. Then, draw the video frame in your WebGL scene and draw the object on top of that and you're good to go.
+
+To analyze video using the JSARToolKit, draw the video on a canvas, then pass the canvas to JSARToolKit. Do this for every frame and you've got video AR tracking. JSARToolKit is fast enough on modern JavaScript engines to do this in realtime even on 640x480 video frames. However, the larger the video frame, the longer it takes to process. A good video frame size is 320x240, but if you expect to use small markers or multiple markers, 640x480 is preferable.
+
+## Demo
+
+To view the webcam demo, you need to have WebRTC enabled in your browser (on Chrome, go the about:flags and enable MediaStream). You also need to print out the AR marker below. You can also try opening the marker image on your phone or tablet and showing it to the webcam.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/SMr11auuTnZDCW1CbJpv.png", alt="AR marker.", width="390", height="390" %}
+  <figcaption>
+    AR marker.
+  </figcaption>
+</figure>
+
+## Setting up JSARToolKit
+The JSARToolKit API is quite Java-like, so you'll have to do some contortions to use it. The basic idea is that you have a detector object that operates on a raster object. Between the detector and the raster is a camera parameter object that transforms raster coordinates to camera coordinates. To get the detected markers from the detector, you iterate over them and copy their transformation matrices over to your code.
+
+The first step is to create the raster object, the camera parameter object and the detector object.
+
+```js
+// Create a RGB raster object for the 2D canvas.
+// JSARToolKit uses raster objects to read image data.
+// Note that you need to set canvas.changed = true on every frame.
+var raster = new NyARRgbRaster_Canvas2D(canvas);
+
+// FLARParam is the thing used by FLARToolKit to set camera parameters.
+// Here we create a FLARParam for images with 320x240 pixel dimensions.
+var param = new FLARParam(320, 240);
+
+// The FLARMultiIdMarkerDetector is the actual detection engine for marker detection.
+// It detects multiple ID markers. ID markers are special markers that encode a number.
+var detector = new FLARMultiIdMarkerDetector(param, 120);
+
+// For tracking video set continue mode to true. In continue mode, the detector
+// tracks markers across multiple frames.
+detector.setContinueMode(true);
+
+// Copy the camera perspective matrix from the FLARParam to the WebGL library camera matrix.
+// The second and third parameters determine the zNear and zFar planes for the perspective matrix.
+param.copyCameraMatrix(display.camera.perspectiveMatrix, 10, 10000);
+```
+
+## Using getUserMedia to access the webcam
+
+Next, I'm going to create a video element that's getting webcam video through the WebRTC APIs. For pre-recorded videos, just set the source attribute of the video to the video URL. If you're doing marker detection from still images, you can use a image element in much the same way.
+
+As WebRTC and getUserMedia are still new emerging technologies, you need to feature detect them. For more details, check out Eric Bidelman's article on [Capturing Audio & Video in HTML5](https://www.html5rocks.com/tutorials/getusermedia/intro/).
+
+```js
+var video = document.createElement('video');
+video.width = 320;
+video.height = 240;
+
+var getUserMedia = function(t, onsuccess, onerror) {
+  if (navigator.getUserMedia) {
+    return navigator.getUserMedia(t, onsuccess, onerror);
+  } else if (navigator.webkitGetUserMedia) {
+    return navigator.webkitGetUserMedia(t, onsuccess, onerror);
+  } else if (navigator.mozGetUserMedia) {
+    return navigator.mozGetUserMedia(t, onsuccess, onerror);
+  } else if (navigator.msGetUserMedia) {
+    return navigator.msGetUserMedia(t, onsuccess, onerror);
+  } else {
+    onerror(new Error("No getUserMedia implementation found."));
+  }
+};
+
+var URL = window.URL || window.webkitURL;
+var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
+if (!createObjectURL) {
+  throw new Error("URL.createObjectURL not found.");
+}
+
+getUserMedia({'video': true},
+  function(stream) {
+    var url = createObjectURL(stream);
+    video.src = url;
+  },
+  function(error) {
+    alert("Couldn't access webcam.");
+  }
+);
+```
+
+## Detecting markers
+
+Once we have the detector running a-ok, we can start feeding it images to detect AR matrices. First draw the image onto the raster object canvas, then run the detector on the raster object. The detector returns the number of markers found in the image.
+
+```js
+// Draw the video frame to the raster canvas, scaled to 320x240.
+canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);
+
+// Tell the raster object that the underlying canvas has changed.
+canvas.changed = true;
+
+// Do marker detection by using the detector object on the raster object.
+// The threshold parameter determines the threshold value
+// for turning the video frame into a 1-bit black-and-white image.
+//
+var markerCount = detector.detectMarkerLite(raster, threshold);
+```
+
+The last step is to iterate through the detected markers and get their transformation matrices. You use the transformation matrices for putting 3D objects on top of the markers.
+
+```js
+// Create a NyARTransMatResult object for getting the marker translation matrices.
+var resultMat = new NyARTransMatResult();
+
+var markers = {};
+
+// Go through the detected markers and get their IDs and transformation matrices.
+for (var idx = 0; idx &lt; markerCount; idx++) {
+  // Get the ID marker data for the current marker.
+  // ID markers are special kind of markers that encode a number.
+  // The bytes for the number are in the ID marker data.
+  var id = detector.getIdMarkerData(idx);
+
+  // Read bytes from the id packet.
+  var currId = -1;
+  // This code handles only 32-bit numbers or shorter.
+  if (id.packetLength <= 4) {
+    currId = 0;
+    for (var i = 0; i &lt; id.packetLength; i++) {
+      currId = (currId << 8) | id.getPacketData(i);
+    }
+  }
+
+  // If this is a new id, let's start tracking it.
+  if (markers[currId] == null) {
+    markers[currId] = {};
+  }
+  // Get the transformation matrix for the detected marker.
+  detector.getTransformMatrix(idx, resultMat);
+
+  // Copy the result matrix into our marker tracker object.
+  markers[currId].transform = Object.asCopy(resultMat);
+}
+```
+
+## Matrix mapping
+
+Here's the code to copy JSARToolKit matrices over to glMatrix matrices (which are 16-element [FloatArrays](https://developer.mozilla.org/JavaScript_typed_arrays) with the translation column in the last four elements). It works by magic (read: I don't know how ARToolKit matrices are setup. Inverted Y-axis is my guess.) Anyway, this bit of sign-reversing voodoo makes a JSARToolKit matrix work the same as a glMatrix.
+
+To use the library with another library, such as Three.js, you need to write a function that converts the ARToolKit matrices to the library's matrix format. You also need to hook into the FLARParam.copyCameraMatrix method. The copyCameraMatrix method writes the FLARParam perspective matrix into a glMatrix-style matrix.
+
+```js
+function copyMarkerMatrix(arMat, glMat) {
+  glMat[0] = arMat.m00;
+  glMat[1] = -arMat.m10;
+  glMat[2] = arMat.m20;
+  glMat[3] = 0;
+  glMat[4] = arMat.m01;
+  glMat[5] = -arMat.m11;
+  glMat[6] = arMat.m21;
+  glMat[7] = 0;
+  glMat[8] = -arMat.m02;
+  glMat[9] = arMat.m12;
+  glMat[10] = -arMat.m22;
+  glMat[11] = 0;
+  glMat[12] = arMat.m03;
+  glMat[13] = -arMat.m13;
+  glMat[14] = arMat.m23;
+  glMat[15] = 1;
+}
+```
+
+## Three.js integration
+
+Three.js is a popular JavaScript 3D engine. I'm going to go through how to use JSARToolKit output in Three.js. You need three things: a full screen quad with the video image drawn onto it, a camera with the FLARParam perspective matrix and an object with marker matrix as its transform. I'll walk you through the integration in the code below.
+
+```js
+// I'm going to use a glMatrix-style matrix as an intermediary.
+// So the first step is to create a function to convert a glMatrix matrix into a Three.js Matrix4.
+THREE.Matrix4.prototype.setFromArray = function(m) {
+  return this.set(
+    m[0], m[4], m[8], m[12],
+    m[1], m[5], m[9], m[13],
+    m[2], m[6], m[10], m[14],
+    m[3], m[7], m[11], m[15]
+  );
+};
+
+// glMatrix matrices are flat arrays.
+var tmp = new Float32Array(16);
+
+// Create a camera and a marker root object for your Three.js scene.
+var camera = new THREE.Camera();
+scene.add(camera);
+
+var markerRoot = new THREE.Object3D();
+markerRoot.matrixAutoUpdate = false;
+
+// Add the marker models and suchlike into your marker root object.
+var cube = new THREE.Mesh(
+  new THREE.CubeGeometry(100,100,100),
+  new THREE.MeshBasicMaterial({color: 0xff00ff})
+);
+cube.position.z = -50;
+markerRoot.add(cube);
+
+// Add the marker root to your scene.
+scene.add(markerRoot);
+
+// Next we need to make the Three.js camera use the FLARParam matrix.
+param.copyCameraMatrix(tmp, 10, 10000);
+camera.projectionMatrix.setFromArray(tmp);
+
+
+// To display the video, first create a texture from it.
+var videoTex = new THREE.Texture(videoCanvas);
+
+// Then create a plane textured with the video.
+var plane = new THREE.Mesh(
+  new THREE.PlaneGeometry(2, 2, 0),
+  new THREE.MeshBasicMaterial({map: videoTex})
+);
+
+// The video plane shouldn't care about the z-buffer.
+plane.material.depthTest = false;
+plane.material.depthWrite = false;
+
+// Create a camera and a scene for the video plane and
+// add the camera and the video plane to the scene.
+var videoCam = new THREE.Camera();
+var videoScene = new THREE.Scene();
+videoScene.add(plane);
+videoScene.add(videoCam);
+
+...
+
+// On every frame do the following:
+function tick() {
+  // Draw the video frame to the canvas.
+  videoCanvas.getContext('2d').drawImage(video, 0, 0);
+  canvas.getContext('2d').drawImage(videoCanvas, 0, 0, canvas.width, canvas.height);
+
+  // Tell JSARToolKit that the canvas has changed.
+  canvas.changed = true;
+
+  // Update the video texture.
+  videoTex.needsUpdate = true;
+
+  // Detect the markers in the video frame.
+  var markerCount = detector.detectMarkerLite(raster, threshold);
+  for (var i=0; i&lt;markerCount; i++) {
+    // Get the marker matrix into the result matrix.
+    detector.getTransformMatrix(i, resultMat);
+
+    // Copy the marker matrix to the tmp matrix.
+    copyMarkerMatrix(resultMat, tmp);
+
+    // Copy the marker matrix over to your marker root object.
+    markerRoot.matrix.setFromArray(tmp);
+  }
+
+  // Render the scene.
+  renderer.autoClear = false;
+  renderer.clear();
+  renderer.render(videoScene, videoCam);
+  renderer.render(scene, camera);
+}
+```
+
+## Summary
+
+In this article we went through the basics of JSARToolKit. Now you are ready to build your own webcam-using augmented reality applications with JavaScript.
+
+Integrating JSARToolKit with Three.js is a bit of a hassle, but it is certainly possible. I'm not 100% certain if I'm doing it right in my demo, so please let me know if  you know of a better way of achieving the integration. [Patches are welcome](http://code.google.com/p/html5rocks/wiki/ContributorsGuide) :)
+
+## References
+
+- [JSARToolKit](https://github.com/kig/JSARToolKit/)
+- [Magi](https://github.com/kig/magi/)
+- [Three.js](https://github.com/mrdoob/three.js/)
diff --git a/src/site/content/en/blog/webgl-million-letters/index.md b/src/site/content/en/blog/webgl-million-letters/index.md
new file mode 100644
index 00000000000..9e84e610242
--- /dev/null
+++ b/src/site/content/en/blog/webgl-million-letters/index.md
@@ -0,0 +1,332 @@
+---
+layout: post
+title: Animating a million letters using Three.js
+authors:
+- ilmariheikkinen
+date: 2012-01-30
+tags:
+- blog
+---
+
+## Introduction
+
+My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This task should be quite possible with modern GPUs. Each letter consists of two textured triangles, so we're only talking about two million triangles per frame.
+
+If you're coming from a traditional JavaScript animation background, this all sounds like madness. Two million triangles updated every frame is definitely not something you would like to do with JavaScript today. But thankfully we have [WebGL](http://www.khronos.org/webgl/wiki/Getting_Started), which lets us tap into the awesome power of modern GPUs. And two million animated triangles is quite doable with a modern GPU and some shader magic.
+
+## Writing efficient WebGL code
+Writing efficient WebGL code requires a certain mindset. The usual way to draw using WebGL is to set up your uniforms, buffers and shaders for each object, followed by a call to draw the object. This way of drawing works when drawing a small number of objects. To draw a large number of objects, you should minimize the amount of WebGL state changes. To start with, draw all objects using the same shader after each other, so that you don't have to change shaders between objects. For simple objects like particles, you could bundle several objects into a single buffer and edit it using JavaScript. That way you'd only have to reupload the vertex buffer instead of changing shader uniforms for every single particle.
+
+But to go really fast, you need to push most of your computation to the shaders. That's what I'm trying to do here. Animate a million letters using shaders.
+
+The article's code uses the [Three.js](https://github.com/mrdoob/three.js/) library, which abstracts away all the tedious boilerplate from writing WebGL code. Instead of having to write hundreds of lines of WebGL state setup and error handling, with Three.js you only need to write a couple lines of code. It's also easy to tap into the WebGL shader system from Three.js.
+
+### Drawing multiple objects using a single draw call
+
+Here's a small pseudo-code example of how you might draw multiple objects using a single draw call. The traditional way is to draw one object at a time like this:
+
+```js
+for (var i=0; i<objects.length; i++) {
+  // each added object requires a separate WebGL draw call
+  scene.add(createNewObject(objects[i]));
+}
+renderer.render(scene, camera);
+```
+
+But the above method requires a separate draw call for each object. To draw multiple objects at once, you can bundle the objects into a single geometry and get away with a single draw call:
+
+```js
+var geo = new THREE.Geometry();
+for (var i=0; i<objects.length; i++) {
+  // bundle the objects into a single geometry
+  // so that they can be drawn with a single draw call
+  addObjectToGeometry(geo, objects[i]);
+}
+// GOOD! Only one object to add to the scene!
+scene.add(new THREE.Mesh(geo, material));
+renderer.render(scene, camera);
+```
+
+Alright, now that you've got the basic idea, let's get back to writing the demo and start animating those million letters!
+
+## Setting up the geometry and textures
+As the first step, I'm going to create a texture with the letter bitmaps on it. I'm using the 2D canvas for this. The resulting texture has all the letters I want to draw. The next step is to create a buffer with the texture coordinates to the letter sprite sheet. While this is an easy and straightforward method to set up the letters, it’s a bit wasteful as it uses two floats per vertex for the texture coordinates. A shorter way - left as an exercise to the reader - would be to pack the letter index and corner index into one number and convert that back to texture coordinates in the vertex shader.
+
+Here's how I build the letter texture using Canvas 2D:
+
+```js
+var fontSize = 16;
+
+// The square letter texture will have 16 * 16 = 256 letters, enough for all 8-bit characters.
+var lettersPerSide = 16;
+
+var c = document.createElement('canvas');
+c.width = c.height = fontSize*lettersPerSide;
+var ctx = c.getContext('2d');
+ctx.font = fontSize+'px Monospace';
+
+// This is a magic number for aligning the letters on rows. YMMV.
+var yOffset = -0.25;
+
+// Draw all the letters to the canvas.
+for (var i=0,y=0; y<lettersPerSide; y++) {
+  for (var x=0; x<lettersPerSide; x++,i++) {
+    var ch = String.fromCharCode(i);
+    ctx.fillText(ch, x*fontSize, yOffset*fontSize+(y+1)*fontSize);
+  }
+}
+
+// Create a texture from the letter canvas.
+var tex = new THREE.Texture(c);
+// Tell Three.js not to flip the texture.
+tex.flipY = false;
+// And tell Three.js that it needs to update the texture.
+tex.needsUpdate = true;
+```
+
+I also upload the triangle array to the GPU. These vertices are used by the vertex shader to put the letters on the screen. The vertices are set to the letter positions in the text so that if you render the triangle array as-is, you get a basic layout rendering of the text.
+
+Creating the geometry for the book:
+
+```js
+var geo = new THREE.Geometry();
+
+var i=0, x=0, line=0;
+for (i=0; i<BOOK.length; i++) {
+  var code = BOOK.charCodeAt(i); // This is the character code for the current letter.
+  if (code > lettersPerSide * lettersPerSide) {
+    code = 0; // Clamp character codes to letter map size.
+  }
+  var cx = code % lettersPerSide; // Cx is the x-index of the letter in the map.
+  var cy = Math.floor(code / lettersPerSide); // Cy is the y-index of the letter in the map.
+
+  // Add letter vertices to the geometry.
+  var v,t;
+  geo.vertices.push(
+    new THREE.Vector3( x*1.1+0.05, line*1.1+0.05, 0 ),
+    new THREE.Vector3( x*1.1+1.05, line*1.1+0.05, 0 ),
+    new THREE.Vector3( x*1.1+1.05, line*1.1+1.05, 0 ),
+    new THREE.Vector3( x*1.1+0.05, line*1.1+1.05, 0 )
+  );
+  // Create faces for the letter.
+  var face = new THREE.Face3(i*4+0, i*4+1, i*4+2);
+  geo.faces.push(face);
+  face = new THREE.Face3(i*4+0, i*4+2, i*4+3);
+  geo.faces.push(face);
+
+  // Compute texture coordinates for the letters.
+  var tx = cx/lettersPerSide, 
+      ty = cy/lettersPerSide,
+      off = 1/lettersPerSide;
+  var sz = lettersPerSide*fontSize;
+  geo.faceVertexUvs[0].push([
+    new THREE.Vector2( tx, ty+off ),
+    new THREE.Vector2( tx+off, ty+off ),
+    new THREE.Vector2( tx+off, ty )
+  ]);
+  geo.faceVertexUvs[0].push([
+    new THREE.Vector2( tx, ty+off ),
+    new THREE.Vector2( tx+off, ty ),
+    new THREE.Vector2( tx, ty )
+  ]);
+
+  // On newline, move to the line below and move the cursor to the start of the line.
+  // Otherwise move the cursor to the right.
+  if (code == 10) {
+    line--;
+    x=0;
+  } else {
+    x++;
+  }
+}
+```
+
+
+## Vertex shader for animating the letters
+
+With a simple vertex shader, I get a flat view of the text. Nothing fancy. Runs well, but if I want to animate it, I need to do the animation in JavaScript. And JavaScript is kinda slow for animating the six million vertices involved, especially if you want to do it on every frame. Maybe there is there a faster way.
+
+Why yes, we can do procedural animation. What that means is that we do all our position and rotation math in the vertex shader. Now I don't need to run any JavaScript to update the positions of the vertices. The vertex shader runs very fast and I get a smooth frame rate even with a million triangles being individually animated every frame. To address the individual triangles, I round down the vertex coordinates so that all four points of a letter quad map to a single unique coordinate. Now I can use this coordinate to set the animation parameters for the letter in question.
+
+To be able to successfully round down coordinates, coordinates from two different letters can't overlap. The easiest way to do this is by using square letter quads with a small offset separating the letter from the one on its right side and the line above it. For example, you could use a width and height of 0.5 for the letters and align the letters on integer coordinates. Now when you round down the coordinate of any letter vertex, you get the bottom-left coordinate of the letter.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/amaOeyBKJBgBbMCEmqfh.png", alt="Rounding down vertex coordinates to find the top-left corner of a letter.", width="360", height="444" %}
+  <figcaption>Rounding down vertex coordinates to find the top-left corner of a letter.</figcaption>
+</figure>
+
+To better understand the animated vertex shader, I'm going to go through a simple run-of-the-mill vertex shader first. This is what normally happens when you draw a 3D model to the screen. The vertices of the model are transformed by a couple transformation matrices to project each 3D vertex onto the 2D screen. Whenever a triangle defined by three of these vertices lands inside the viewport, the pixels it covers are processed by the fragment shader to color them. Anyway, here's the simple vertex shader:
+
+```js
+varying float vUv;
+
+void main() {
+  // modelViewMatrix, position and projectionMatrix are magical
+  // attributes that Three.js defines for us.
+
+  // Transform current vertex by the modelViewMatrix
+  // (bundled model world position & camera world position matrix).
+  vec4 mvPosition = modelViewMatrix * position;
+
+  // Project camera-space vertex to screen coordinates
+  // using the camera's projection matrix.
+  vec4 p = projectionMatrix * mvPosition;
+
+  // uv is another magical attribute from Three.js.
+  // We're passing it to the fragment shader unchanged.
+  vUv = uv;
+
+  gl_Position = p;
+}
+```
+
+And now, the animated vertex shader. Basically, it does the same thing as the simple vertex shader, but with a small twist. Instead of transforming each vertex by just the transformation matrices, it applies a time-dependent animated transformation as well. To make each letter animate a bit differently, the animated vertex shader also modifies the animation based on the coordinates of the letter. It's going to look a good deal more complicated than the simple vertex shader because, well, it <i>is</i> more complicated.
+
+```js
+uniform float uTime;
+uniform float uEffectAmount;
+
+varying float vZ;
+varying vec2 vUv;
+
+// rotateAngleAxisMatrix returns the mat3 rotation matrix
+// for given angle and axis.
+mat3 rotateAngleAxisMatrix(float angle, vec3 axis) {
+  float c = cos(angle);
+  float s = sin(angle);
+  float t = 1.0 - c;
+  axis = normalize(axis);
+  float x = axis.x, y = axis.y, z = axis.z;
+  return mat3(
+    t*x*x + c,    t*x*y + s*z,  t*x*z - s*y,
+    t*x*y - s*z,  t*y*y + c,    t*y*z + s*x,
+    t*x*z + s*y,  t*y*z - s*x,  t*z*z + c
+  );
+}
+
+// rotateAngleAxis rotates a vec3 over the given axis by the given angle and
+// returns the rotated vector.
+vec3 rotateAngleAxis(float angle, vec3 axis, vec3 v) {
+  return rotateAngleAxisMatrix(angle, axis) * v;
+}
+
+void main() {
+  // Compute the index of the letter (assuming 80-character max line length).
+  float idx = floor(position.y/1.1)*80.0 + floor(position.x/1.1);
+
+  // Round down the vertex coords to find the bottom-left corner point of the letter.
+  vec3 corner = vec3(floor(position.x/1.1)*1.1, floor(position.y/1.1)*1.1, 0.0);
+
+  // Find the midpoint of the letter.
+  vec3 mid = corner + vec3(0.5, 0.5, 0.0);
+
+  // Rotate the letter around its midpoint by an angle and axis dependent on
+  // the letter's index and the current time.
+  vec3 rpos = rotateAngleAxis(idx+uTime,
+    vec3(mod(idx,16.0), -8.0+mod(idx,15.0), 1.0), position - mid) + mid;
+
+  // uEffectAmount controls the amount of animation applied to the letter.
+  // uEffectAmount ranges from 0.0 to 1.0.
+  float effectAmount = uEffectAmount;
+
+  vec4 fpos = vec4( mix(position,rpos,effectAmount), 1.0 );
+  fpos.x += -35.0;
+
+  // Apply spinning motion to individual letters.
+  fpos.z += ((sin(idx+uTime*2.0)))*4.2*effectAmount;
+  fpos.y += ((cos(idx+uTime*2.0)))*4.2*effectAmount;
+
+  vec4 mvPosition = modelViewMatrix * fpos;
+
+  // Apply wavy motion to the entire text.
+  mvPosition.y += 10.0*sin(uTime*0.5+mvPosition.x/25.0)*effectAmount;
+  mvPosition.x -= 10.0*cos(uTime*0.5+mvPosition.y/25.0)*effectAmount;
+
+  vec4 p = projectionMatrix * mvPosition;
+
+  // Pass texture coordinates and the vertex z-coordinate to the fragment shader.
+  vUv = uv;
+  vZ = p.z;
+
+  // Send the final vertex position to WebGL.
+  gl_Position = p;
+}
+```
+
+To use the vertex shader, I use a [`THREE.ShaderMaterial`](https://github.com/mrdoob/three.js/blob/master/src/materials/ShaderMaterial.js), a material type that lets you use custom shaders and specify uniforms for them. Here's how I'm using THREE.ShaderMaterial in the demo:
+
+```js
+// First, set up uniforms for the shader.
+var uniforms = {
+
+  // map contains the letter map texture.
+  map: { type: "t", value: 1, texture: tex },
+
+  // uTime is the urrent time.
+  uTime: { type: "f", value: 1.0 },
+
+  // uEffectAmount controls the amount of animation applied to the letters.
+  uEffectAmount: { type: "f", value: 0.0 }
+};
+
+// Next, set up the THREE.ShaderMaterial.
+var shaderMaterial = new THREE.ShaderMaterial({
+  uniforms: uniforms,
+
+  // I have my shaders inside HTML elements like
+  // <script id="vertex" type="text/x-glsl-vert">... shaderSource ... <script>
+
+  // The below gets the contents of the vertex shader script element.
+  vertexShader: document.querySelector('#vertex').textContent,
+
+  // The fragment shader is a bit special as well, drawing a rotating
+  // rainbow gradient.
+  fragmentShader: document.querySelector('#fragment').textContent
+});
+
+// I set depthTest to false so that the letters don't occlude each other.
+shaderMaterial.depthTest = false;
+```
+
+On every animation frame, I update the shader uniforms:
+
+```js
+// I'm controlling the uniforms through a proxy control object.
+// The reason I'm using a proxy control object is to
+// have different value ranges for the controls and the uniforms.
+var controller = {
+  effectAmount: 0
+};
+
+// I'm using <a href="http://code.google.com/p/dat-gui/">DAT.GUI</a> to do a quick & easy GUI for the demo.
+var gui = new dat.GUI();
+gui.add(controller, 'effectAmount', 0, 100);
+
+var animate = function(t) {
+  uniforms.uTime.value += 0.05;
+  uniforms.uEffectAmount.value = controller.effectAmount/100;
+  bookModel.position.y += 0.03;
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate, renderer.domElement);
+};
+animate(Date.now());
+```
+
+And there you have it, shader-based animation. It looks pretty complex, but the only thing it really does is move the letters around in a way that depends on the current time and each letter's index. If performance wasn't a concern, you could have this logic running in JavaScript. However, at tens of thousands of animated objects, JavaScript stops being a viable solution.
+
+## Remaining concerns
+One problem now is that JavaScript doesn’t know about the particle positions. If you really need to know where your particles are, you could duplicate the vertex shader logic in JavaScript and recalculate the vertex positions using a web worker every time you need the positions. That way your rendering thread doesn’t have to wait for the math and you can continue animating at a smooth frame rate.
+
+For more controllable animation, you could use render-to-texture functionality to animate between two sets of positions provided by JavaScript. First, render the current positions to a texture, then animate towards positions defined in a separate texture provided by JavaScript. The nice thing about this is that you can update a small fraction of the JavaScript-provided positions per frame and still continue animating all the letters every frame with the vertex shader tweening the positions.
+
+Another concern is that 256 characters is far too few to do non-ASCII texts. If push the texture map size to 4096x4096 while decreasing the font size to 8px, you can fit the entire UCS-2 character set into the texture map. However, 8px font size is not very readable. To do larger font sizes, you can use multiple textures for your font. See this [sprite atlas demo](http://code.google.com/p/webglsamples/source/browse/#hg%2Fsprites) for an example. Another thing that would help is to create only the letters used in your text.
+
+## Summary
+In this article, I walked you through implementing a vertex shader -based animation demo using Three.js. The demo animates a million letters in real-time on a 2010 MacBook Air. The implementation bundled an entire book into a single geometry object for efficient drawing. The individual letters were animated by figuring out out which vertices belong to which letter and animating the vertices based on the index of the letter in the book text.
+
+## References
+
+- [Three.js](https://github.com/mrdoob/three.js/)
+- [Metamorphosis by Franz Kafka on Project Gutenberg](http://www.gutenberg.org/ebooks/5200)
+- [Sprite Atlas demo](http://code.google.com/p/webglsamples/source/browse/#hg%2Fsprites)
\ No newline at end of file
diff --git a/src/site/content/en/blog/webgl-orthographic-3d/index.md b/src/site/content/en/blog/webgl-orthographic-3d/index.md
new file mode 100644
index 00000000000..bf707ad9c20
--- /dev/null
+++ b/src/site/content/en/blog/webgl-orthographic-3d/index.md
@@ -0,0 +1,478 @@
+---
+title: WebGL orthographic 3D
+authors:
+  - gman
+date: 2012-06-20
+tags:
+  - blog
+---
+
+
+## WebGL Orthographic 3D
+
+This post is a continuation of a series of posts about WebGL.
+The first [started with fundamentals](https://www.html5rocks.com/tutorials/webgl/webgl_fundamentals/) and
+the previous was about 2d matrices [about 2D matrices](https://www.html5rocks.com/tutorials/webgl/webgl_transforms/).
+If you haven't read those please view them first.
+In the last post we went over how 2d matrices worked. We talked
+about translation, rotation, scaling, and even projecting from
+pixels into clip space can all be done by 1 matrix and some magic
+matrix math. To do 3D is only a small step from there.
+In our previous 2D examples we had 2D points (x, y) that we multiplied by
+a 3x3 matrix. To do 3D we need 3D points (x, y, z) and a 4x4 matrix.
+Let's take our last example and change it to 3D. We'll use an F again but this time a 3D 'F'.
+The first thing we need to do is change the vertex shader to handle 3D. Here's the old shader.
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform mat3 u_matrix;
+
+void main() {
+// Multiply the position by the matrix.
+gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
+}
+</script>
+```
+
+And here's the new one
+
+```html
+<script id="3d-vertex-shader" type="x-shader/x-vertex">
+attribute vec4 a_position;
+
+uniform mat4 u_matrix;
+
+void main() {
+// Multiply the position by the matrix.
+gl_Position = u_matrix * a_position;
+}
+</script>
+```
+
+It got even simpler!
+Then we need to provide 3D data.
+
+```js
+...
+
+gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
+
+...
+
+// Fill the buffer with the values that define a letter 'F'.
+function setGeometry(gl) {
+gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+        // left column
+        0,   0,  0,
+        30,   0,  0,
+        0, 150,  0,
+        0, 150,  0,
+        30,   0,  0,
+        30, 150,  0,
+
+        // top rung
+        30,   0,  0,
+        100,   0,  0,
+        30,  30,  0,
+        30,  30,  0,
+        100,   0,  0,
+        100,  30,  0,
+
+        // middle rung
+        30,  60,  0,
+        67,  60,  0,
+        30,  90,  0,
+        30,  90,  0,
+        67,  60,  0,
+        67,  90,  0]),
+    gl.STATIC_DRAW);
+}
+```
+
+Next we need to change all the matrix functions from 2D to 3D
+Here's the 2D (before) versions of makeTranslation, makeRotation and makeScale
+
+```js
+function makeTranslation(tx, ty) {
+return [
+1, 0, 0,
+0, 1, 0,
+tx, ty, 1
+];
+}
+
+function makeRotation(angleInRadians) {
+var c = Math.cos(angleInRadians);
+var s = Math.sin(angleInRadians);
+return [
+c,-s, 0,
+s, c, 0,
+0, 0, 1
+];
+}
+
+function makeScale(sx, sy) {
+return [
+sx, 0, 0,
+0, sy, 0,
+0, 0, 1
+];
+}
+```
+
+And here's the updated 3D versions.
+
+```js
+function makeTranslation(tx, ty, tz) {
+return [
+    1,  0,  0,  0,
+    0,  1,  0,  0,
+    0,  0,  1,  0,
+    tx, ty, tz, 1
+];
+}
+
+function makeXRotation(angleInRadians) {
+var c = Math.cos(angleInRadians);
+var s = Math.sin(angleInRadians);
+
+return [
+1, 0, 0, 0,
+0, c, s, 0,
+0, -s, c, 0,
+0, 0, 0, 1
+];
+};
+
+function makeYRotation(angleInRadians) {
+var c = Math.cos(angleInRadians);
+var s = Math.sin(angleInRadians);
+
+return [
+c, 0, -s, 0,
+0, 1, 0, 0,
+s, 0, c, 0,
+0, 0, 0, 1
+];
+};
+
+function makeZRotation(angleInRadians) {
+var c = Math.cos(angleInRadians);
+var s = Math.sin(angleInRadians);
+return [
+    c, s, 0, 0,
+-s, c, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1,
+];
+}
+
+function makeScale(sx, sy, sz) {
+return [
+sx, 0,  0,  0,
+0, sy,  0,  0,
+0,  0, sz,  0,
+0,  0,  0,  1,
+];
+}
+```
+
+Notice we now have 3 rotations functions.  We only needed one in 2D as we
+were effectively only rotating around the Z axis.  Now though to do 3D we
+also want to be able to rotate around the x axis and y axis as well.  You
+can see from looking at them they are all very similar.  If we were to
+work them out you'd see them simplify just like before
+
+Z rotation
+
+```js
+newX = x * c + y * s;
+newY = x * -s + y * c;
+```
+
+Y rotation
+```js
+
+newX = x * c + z * s;
+newZ = x * -s + z * c;
+```
+
+X rotation
+```js
+newY = y * c + z * s;
+newZ = y * -s + z * c;
+```
+
+We also need to update the projection function. Here's the old one
+
+```js
+function make2DProjection(width, height) {
+// Note: This matrix flips the Y axis so 0 is at the top.
+return [
+2 / width, 0, 0,
+0, -2 / height, 0,
+-1, 1, 1
+];
+}
+```
+
+which converted from pixels to clip space. For our first attempt at expanding it to 3D let's try
+
+```js
+function make2DProjection(width, height, depth) {
+// Note: This matrix flips the Y axis so 0 is at the top.
+return [
+    2 / width, 0, 0, 0,
+    0, -2 / height, 0, 0,
+    0, 0, 2 / depth, 0,
+-1, 1, 0, 1,
+];
+}
+```
+
+Just like we needed to convert from pixels to clipspace for x and y, for
+z we need to do the same thing.  In this case I'm making the Z space pixel
+units as well.  I'll pass in some value similar to `width` for the depth
+so our space will be 0 to width pixels wide, 0 to height pixels tall, but
+for depth it will be -depth / 2 to +depth / 2.
+Finally we need to to update the code that computes the matrix.
+
+```js
+// Compute the matrices
+var projectionMatrix =
+    make2DProjection(canvas.width, canvas.height, canvas.width);
+var translationMatrix =
+    makeTranslation(translation[0], translation[1], translation[2]);
+var rotationXMatrix = makeXRotation(rotation[0]);
+var rotationYMatrix = makeYRotation(rotation[1]);
+var rotationZMatrix = makeZRotation(rotation[2]);
+var scaleMatrix = makeScale(scale[0], scale[1], scale[2]);
+
+// Multiply the matrices.
+var matrix = matrixMultiply(scaleMatrix, rotationZMatrix);
+matrix = matrixMultiply(matrix, rotationYMatrix);
+matrix = matrixMultiply(matrix, rotationXMatrix);
+matrix = matrixMultiply(matrix, translationMatrix);
+matrix = matrixMultiply(matrix, projectionMatrix);
+
+// Set the matrix.
+gl.uniformMatrix4fv(matrixLocation, false, matrix);
+```
+
+The first problem we have is that our geometry is a flat F which makes it
+hard to see any 3D.  To fix that let's expand the geometry to 3D.  Our
+current F is made of 3 rectangles, 2 triangles each.  To make it 3D will
+require a total of 16 rectangles.  That's quite a few to list out here.
+16 rectangles x 2 triangles per rectangle x 3 vertices per triangle is 96
+vertices.  If you want to see all of them view source on the sample.
+We have to draw more vertices so
+
+```js
+// Draw the geometry.
+gl.drawArrays(gl.TRIANGLES, 0, 16 * 6);
+```
+
+Moving the sliders it's pretty hard to tell that it's 3D.  Let's try
+coloring each rectangle a different color.  To do this we will add another
+attribute to our vertex shader and a varying to pass it from the vertex
+shader to the fragment shader.
+Here's the new vertex shader
+
+```html
+<script id="3d-vertex-shader" type="x-shader/x-vertex">
+attribute vec4 a_position;
+attribute vec4 a_color;
+
+uniform mat4 u_matrix;
+
+varying vec4 v_color;
+
+void main() {
+// Multiply the position by the matrix.
+gl_Position = u_matrix * a_position;
+
+// Pass the color to the fragment shader.
+v_color = a_color;
+}
+</script>
+```
+
+And we need to use that color in the fragment shader
+
+```html
+<script id="3d-vertex-shader" type="x-shader/x-fragment">
+precision mediump float;
+
+// Passed in from the vertex shader.
+varying vec4 v_color;
+
+void main() {
+gl_FragColor = v_color;
+}
+</script>
+```
+
+We need to lookup the location to supply the colors, then setup another
+buffer and attribute to give it the colors.
+
+```js
+...
+var colorLocation = gl.getAttribLocation(program, "a_color");
+
+...
+// Create a buffer for colors.
+var buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(colorLocation);
+
+// We'll supply RGB as bytes.
+gl.vertexAttribPointer(colorLocation, 3, gl.UNSIGNED_BYTE, true, 0, 0);
+
+// Set Colors.
+setColors(gl);
+
+...
+// Fill the buffer with colors for the 'F'.
+
+function setColors(gl) {
+gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Uint8Array([
+        // left column front
+    200,  70, 120,
+    200,  70, 120,
+    200,  70, 120,
+    200,  70, 120,
+    200,  70, 120,
+    200,  70, 120,
+
+        // top rung front
+    200,  70, 120,
+    200,  70, 120,
+    ...
+    ...
+    gl.STATIC_DRAW);
+}
+```
+
+Uh oh, what's that's mess?  Well, it turns out all the various parts of
+that 3D 'F', front, back, sides, etc get drawn in the order they appear in
+our geometry.  That doesn't give us quite the desired results as sometimes
+the ones in the back get drawn after the ones in the front.
+Triangles in WebGL have the concept of front facing and back facing.  A
+front facing triangle has its vertices go in a clockwise direction.  A
+back facing triangle has its vertices go in a counter clockwise direction.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UhRnPmZRSTZCSOk0X9Es.svg", alt="Triangle winding.", width="562", height="364" %}
+</figure>
+
+WebGL has the ability to draw only forward facing or back facing
+triangles.  We can turn that feature on with
+
+```js
+gl.enable(gl.CULL_FACE);
+```
+
+which we do just once, right at the start of our program.  With that
+feature turned on, WebGL defaults to "culling" back facing triangles.
+"Culling" in this case is a fancy word for "not drawing".
+Note that as far as WebGL is conserned, whether or not a triangle is
+considered to be going clockwise or counter clockwise depends on the
+vertices of that triangle in clipspace.  In other words, WebGL figures out
+whether a triangle is front or back AFTER you've applied math to the
+vertices in the vertex shader.  That means for example a clockwise
+triangle that is scaled in X by -1 becomes a counter clockwise triangle or
+a clockwise triangle rotated 180 degrees around the X or Y axis becomes a counter clockwise triangle.
+Because we had CULL_FACE disabled we can see both
+clockwise(front) and counter clockwise(back) triangles.  Now that we've
+turned it on, any time a front facing triangle flips around either because
+of scaling or rotation or for whatever reason, WebGL won't draw it.
+That's a good thing since as your turn something around in 3D you
+generally want which ever triangles are facing you to be considered front
+facing.
+
+Hey!  Where did all the triangles go?  It turns out, many of them are
+facing the wrong way.  Rotate it and you'll see them appear when you look
+at the other side.  Fortunately it's easy to fix.  We just look at which
+ones are backward and exchange 2 of their vertices.  For example if one
+backward triangle is
+
+```js
+1,   2,   3,
+40,  50,  60,
+700, 800, 900,
+```
+
+we just flip the last 2 vertices to make it forward.
+
+```js
+1,   2,   3,
+700, 800, 900,
+40,  50,  60,
+```
+
+That's closer but there's still one more problem.  Even with all the
+triangles facing in the correct direction and with the back facing ones
+being culled we still have places where triangles that should be in back
+are being drawn in over triangles that should be in front.
+Enter the DEPTH BUFFER.
+A Depth buffer, sometimes called a Z-Buffer, is a rectangle of `depth`
+pixels, one depth pixel for each color pixel used to make the image.  As
+WebGL draws each color pixel it can also draw a depth pixel.  It does this
+based on the values we return from the vertex shader for Z.  Just like we
+had to convert to clip space for X and Y, so to Z is in clip space or (-1
+to +1).  That value is then converted into a depth space value (0 to +1).
+Before WebGL draws a color pixel it will check the corresponding depth
+pixel.  If the depth value for the pixel it's about to draw is greater
+than the value of the corresponding depth pixel then WebGL does not draw
+the new color pixel.  Otherwise it draws both the new color pixel with the
+color from your fragment shader AND it draws the depth pixel with the new
+depth value.  This means, pixels that are behind other pixels won't get
+drawn.
+We can turn on this feature nearly as simply as we turned on culling with
+
+```js
+gl.enable(gl.DEPTH_TEST);
+```
+
+We also need to clear the depth buffer back to 1.0 before we start drawing.
+
+```js
+// Draw the scene.
+function drawScene() {
+// Clear the canvas AND the depth buffer.
+gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+...
+```
+
+In the next post I'll go over how to make it have perspective.
+
+### Why is the attribute vec4 but gl.vertexAttribPointer size 3
+
+For those of you who are detail oriented you might have noticed we defined our 2 attributes as
+
+```js
+attribute vec4 a_position;
+attribute vec4 a_color;
+```
+
+both of which are 'vec4' but when we tell WebGL how to take data out of our buffers we used
+
+```js
+gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
+gl.vertexAttribPointer(colorLocation, 3, gl.UNSIGNED_BYTE, true, 0, 0);
+```
+
+That '3' in each of those says only to pull out 3 values per attribute.
+This works because in the vertex shader WebGL provides defaults for those
+you don't supply.  The defaults are 0, 0, 0, 1 where x = 0, y = 0, z = 0
+and w = 1.  This is why in our old 2D vertex shader we had to explicitly
+supply the 1.  We were passing in x and y and we needed a 1 for z but
+because the default for z is 0 we had to explicitly supply a 1.  For 3D
+though, even though we don't supply a 'w' it defaults to 1 which is what
+we need for the matrix math to work.
diff --git a/src/site/content/en/blog/webgl-shaders/index.md b/src/site/content/en/blog/webgl-shaders/index.md
new file mode 100644
index 00000000000..902bf6351be
--- /dev/null
+++ b/src/site/content/en/blog/webgl-shaders/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: An introduction to shaders
+authors:
+- paullewis
+date: 2011-06-02
+tags:
+- blog
+---
+
+## Introduction
+
+I've previously given you [an introduction to Three.js](https://www.html5rocks.com/tutorials/three/intro/). If you've
+not read that you might want to as it's the foundation on which I will
+be building during this article.
+
+What I want to do is discuss shaders. WebGL is brilliant, and as I've 
+said before [Three.js](https://github.com/mrdoob/three.js/) (and other libraries) do a fantastic job of abstracting
+away the difficulties for you. But there will be times you want to achieve
+a specific effect, or you will want to dig a little deeper into how that
+amazing stuff appeared on your screen, and shaders will almost certainly be
+a part of that equation. Also if you're like me you may well want to go from
+the basic stuff in the last tutorial to something a little more tricky. I'll
+work on the basis that you're using Three.js, since it does a lot of the donkey
+work for us in terms of getting the shader going.
+I'll say up front as well that at the start I will be explaining
+the context for shaders, and that the latter part of this tutorial is where
+we will get into slightly more advanced territory. The reason for this is that
+shaders are unusual at first sight and take a bit of explaining.
+
+## 1. Our Two Shaders
+
+WebGL does not offer the use of the Fixed
+Pipeline, which is a shorthand way of saying that it doesn't give you any means
+of rendering your stuff out of the box. What it __does__ offer, however, is
+the Programmable Pipeline, which is more powerful but also more
+difficult to understand and use. In short the Programmable Pipeline means as the
+programmer you take responsibility for getting the vertices and so forth rendered
+to the screen. Shaders are a part of this pipeline, and there are two types
+of them:
+
+1. Vertex shaders
+1. Fragment shaders
+
+Both of which, I'm sure you'll agree, mean absolutely nothing by themselves. What you
+should know about them is that they both run entirely on your graphics card's GPU. This means
+that we want to offload all that we can to them, leaving our CPU to do other work.
+A modern GPU is heavily optimised for the functions that shaders require so it's great
+to be able to use it.
+
+## 2. Vertex Shaders
+
+Take a standard primitive shape, like a sphere. It's made up of vertices, right?
+A vertex shader is given every single one of these vertices in turn and can mess around with them.
+It's up to the vertex shader
+what it actually does with each one, but it has one responsibility: it must at some point set
+something called **gl_Position**, a 4D float vector, which is the final position of the
+vertex on screen. In and of itself that's quite an interesting process, because we're
+actually talking about getting a 3D position (a vertex with x,y,z) onto, or projected,
+to a 2D screen. Thankfully for us
+if we're using something like Three.js we will have a shorthand way of setting the
+**gl_Position** without things getting too heavy.
+
+
+## 3. Fragment Shaders
+
+So we have our object with its vertices, and we've projected them to the 2D screen,
+but what about the colours we use? What about texturing and lighting? That's exactly
+what the fragment shader is there for.
+Very much like the vertex shader, the fragment shader also only has one must-do
+job: it must set or discard the **gl_FragColor** variable, another 4D float vector, which the final colour of our fragment.
+But what is a fragment? Think of three vertices which make a triangle. Each pixel within that triangle needs to be
+drawn out. A fragment is the data provided by those three vertices for the purpose of drawing each pixel in that triangle.
+Because of this the fragments receive interpolated values from their constituent vertices. If one vertex is coloured red, and
+its neighbour is blue we would see the colour values interpolate from red, through purple, to blue.
+
+## 4. Shader Variables
+
+When talking about variables there are three declarations you can make: **Uniforms**,
+**Attributes** and **Varyings**. When I first heard of those three I was very confused since they don't match anything else
+I'd ever worked with. But here's how you can think of them: 
+
+1. **Uniforms** are sent to **both**
+vertex shaders and fragment shaders and contain values that stay the same across the
+entire frame being rendered. A good example of this might be a light's position.
+
+1. **Attributes** are values that are applied to individual vertices. Attributes
+are **only** available to the vertex shader. This could be something like each vertex
+having a distinct colour. Attributes have a one-to-one relationship with vertices.
+
+1. **Varying**s are variables declared in
+the vertex shader that we want to share with the fragment shader. To do this we make
+sure we declare a varying variable of the same type and name in both the vertex shader
+and the fragment shader. A classic use of this would be a vertex's normal since this can
+be used in the lighting calculations.
+
+Later on we'll use all three types so you can
+get a feel for how they are applied for real.
+
+Now we've talked about vertex shaders and fragment shaders and the types
+of variables they deal with, it's now worth looking at the simplest shaders
+we can create.
+
+## 5. Bonjourno World
+Here, then, is the Hello World of vertex shaders:
+
+```js
+/**
+* Multiply each vertex by the model-view matrix
+* and the projection matrix (both provided by
+* Three.js) to get a final vertex position
+*/
+void main() {
+gl_Position = projectionMatrix *
+                modelViewMatrix *
+                vec4(position,1.0);
+}   
+```
+
+and here's the same for the fragment shader:
+
+```js
+/**
+* Set the colour to a lovely pink.
+* Note that the color is a 4D Float
+* Vector, R,G,B and A and each part
+* runs from 0.0 to 1.0
+*/
+void main() {
+gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}
+
+```
+
+Not too complicated though, right?
+
+In the vertex shader we are sent a couple of uniforms by Three.js. These two uniforms are
+4D matrices, called the Model-View Matrix and the Projection Matrix. You
+don't desperately need to know exactly how these work, although it's always
+best to understand how things do what they do if you can. The short version is
+that they are how the 3D position of the vertex is actually projected to
+the final 2D position on the screen.
+
+I've actually left them out of the snippet above because
+Three.js adds them to the top of your shader code itself so you don't need
+to worry about doing it. Truth be told it actually adds a lot more than
+that, such as light data, vertex colours and vertex normals. If you were doing
+this without Three.js you would have to create and set all those uniforms
+and attributes yourself. True story.
+
+## 6. Using a MeshShaderMaterial
+
+OK, so we have a shader set up, but how do we use it with Three.js? It
+turns out that it's terribly easy. It's rather like this:
+
+```js
+/**
+* Assume we have jQuery to hand and pull out
+* from the DOM the two snippets of text for
+* each of our shaders
+*/
+var shaderMaterial = new THREE.MeshShaderMaterial({
+vertexShader:   $('vertexshader').text(),
+fragmentShader: $('fragmentshader').text()
+});
+```
+
+From there Three.js will compile and run your shaders attached to the
+mesh to which you give that material. It doesn't get much easier than that
+really. Well it probably does, but we're talking about 3D running in your
+browser so I figure you expect a certain amount of complexity.
+
+We can actually add two more properties to our MeshShaderMaterial: uniforms
+and attributes. They can both take vectors, integers or floats but as I mentioned
+before uniforms are the same for the whole frame, i.e. for all vertices, so they
+tend to be single values. Attributes, however, are per-vertex variables, so they
+are expected to be an array. There should be a one-to-one relationship
+between the number of values in the attributes array and the number of vertices
+in the mesh.
+
+## 7. Next Steps
+
+Now we are going to spend a bit of time adding in an animation loop,
+vertex attributes and a uniform. We'll also add in a varying variable
+so that the vertex shader can send some data to the fragment shader.
+The end result is that our sphere
+that was pink is going to appear to be lit from above and to the side and
+is going to pulsate. It's kind of trippy, but hopefully it will lead
+you to a good understanding of the three variable types as well as how they
+relate to each other and the underlying geometry.
+
+## 8. A Fake Light
+
+Let's update the colouring so it's not a flat coloured object. We could take a look at
+how Three.js handles lighting, but as I'm sure you can appreciate
+it's more complex than we need right now, so we're going to fake it. You should
+totally look through [the fantastic shaders](https://github.com/mrdoob/three.js/blob/master/src/extras/ShaderUtils.js) that are a part of Three.js, and also [the ones](http://ro.me/tech) from the recent amazing WebGL project by Chris Milk and Google, [Rome](http://ro.me/).
+Back to our shaders. We'll update our Vertex Shader to provide each vertex
+normal to the Fragment Shader. We do this with a varying:
+
+```js
+// create a shared variable for the
+// VS and FS containing the normal
+varying vec3 vNormal;
+
+void main() {
+
+// set the vNormal value with
+// the attribute value passed
+// in by Three.js
+vNormal = normal;
+
+gl_Position = projectionMatrix *
+                modelViewMatrix *
+                vec4(position,1.0);
+}
+```
+
+and in the Fragment Shader we're going to set up the same variable name
+and then use the dot product of the vertex normal with a vector that
+represents a light shining from above and to the right of the sphere.
+The net result of this gives us an effect
+similar to a directional light in a 3D package.
+
+```js
+// same name and type as VS
+varying vec3 vNormal;
+
+void main() {
+
+// calc the dot product and clamp
+// 0 -> 1 rather than -1 -> 1
+vec3 light = vec3(0.5,0.2,1.0);
+    
+// ensure it's normalized
+light = normalize(light);
+
+// calculate the dot product of
+// the light to the vertex normal
+float dProd = max(0.0, dot(vNormal, light));
+
+// feed into our frag colour
+gl_FragColor = vec4(dProd, dProd, dProd, 1.0);
+
+}
+```
+
+So the reason the dot product works is that given two vectors it comes
+out with a number that tells you how 'similar' the two vectors are. With
+normalised vectors, if they point in exactly the same direction, you get
+a value of 1. If they point in opposite directions you get a -1. What we
+do is take that number and apply it to our lighting. So a vertex in the
+top right will have a value near or equal to 1, i.e. fully lit, whereas a vertex on
+the side would have a value near 0 and round the back would be -1. We
+clamp the value to 0 for anything negative, but when you plug the numbers
+in you end up with the basic lighting we're seeing.
+        
+What's next? Well it would be nice to maybe
+try messing with some vertex positions.
+
+## 9. Attributes
+
+What I'd like us to do now is attach a random number to each vertex
+via an attribute. We'll use this number to push the vertex out along
+its normal. The net result will be some kind of weird spike ball that
+will change every time you refresh the page. It won't be animated just
+yet (that happens next) but a few page refreshes will show you it's randomised.
+
+Let's start by adding in the attribute to the vertex shader:
+
+```js
+attribute float displacement;
+varying vec3 vNormal;
+
+void main() {
+
+vNormal = normal;
+
+// push the displacement into the three
+// slots of a 3D vector so it can be
+// used in operations with other 3D
+// vectors like positions and normals
+vec3 newPosition = position + 
+                    normal * 
+                    vec3(displacement);
+
+gl_Position = projectionMatrix *
+                modelViewMatrix *
+                vec4(newPosition,1.0);
+}
+
+```
+How does it look?
+
+Not much different really! This is because the attribute
+hasn't been set up in the MeshShaderMaterial so effectively the
+shader uses a zero value instead. It's kind of like a placeholder
+right now. In a second we'll add the attribute to the
+MeshShaderMaterial in the JavaScript and Three.js will tie the two
+together for us automatically.
+
+Also of note is the fact that I had to
+assign the updated position to a __new__ vec3 variable because the
+original attribute, like all attributes, is read only.
+
+## 10. Updating the MeshShaderMaterial
+
+Let's hop straight into updating our MeshShaderMaterial
+with the attribute needed to power our displacement. A reminder:
+attributes are per-vertex values so we need one value per vertex
+in our sphere. Like this:
+
+```js
+var attributes = {
+displacement: {
+    type: 'f', // a float
+    value: [] // an empty array
+}
+};
+
+// create the material and now
+// include the attributes property
+var shaderMaterial = new THREE.MeshShaderMaterial({
+attributes:     attributes,
+vertexShader:   $('#vertexshader').text(),
+fragmentShader: $('#fragmentshader').text()
+});
+
+// now populate the array of attributes
+var vertices = sphere.geometry.vertices;
+var values = attributes.displacement.value
+for(var v = 0; v < vertices.length; v++) {
+values.push(Math.random() * 30);
+}
+
+```
+
+Now we're seeing a mangled sphere, but the cool
+thing is that all the displacement is happening on the GPU.
+
+
+## 11. Animating That Sucker
+We should totally make this animate. How do we do it? Well there
+are two things we need to get in place:
+
+1. A uniform to animate how much displacement should be applied
+ in each frame. We can use sine or cosine for that since they run from -1 to 1
+1. An animation loop in the JS
+
+We're going to add the uniform to both
+the MeshShaderMaterial and the Vertex Shader. First the Vertex Shader:
+
+```js
+uniform float amplitude;
+attribute float displacement;
+varying vec3 vNormal;
+
+void main() {
+
+vNormal = normal;
+
+// multiply our displacement by the
+// amplitude. The amp will get animated
+// so we'll have animated displacement
+vec3 newPosition = position + 
+                    normal * 
+                    vec3(displacement *
+                        amplitude);
+
+gl_Position = projectionMatrix *
+                modelViewMatrix *
+                vec4(newPosition,1.0);
+}
+```
+
+Next we update the MeshShaderMaterial:
+
+```js
+// add a uniform for the amplitude
+var uniforms = {
+amplitude: {
+    type: 'f', // a float
+    value: 0
+}
+};
+
+// create the final material
+var shaderMaterial = new THREE.MeshShaderMaterial({
+uniforms:       uniforms,
+attributes:     attributes,
+vertexShader:   $('#vertexshader').text(),
+fragmentShader: $('#fragmentshader').text()
+});
+```
+
+Our shaders are done for now. But right we would appear to have taken a step backwards.
+This is largely because
+our amplitude value is at 0 and since we multiply that with the 
+displacement we're seeing nothing change. We also haven't set up the
+animation loop so we never see that 0 change to anything else.
+
+In our JavaScript we now need to wrap up the render call into a function and
+then use requestAnimationFrame to call it. In there we also need
+to update the uniform's value.
+
+```js
+var frame = 0;
+function update() {
+
+// update the amplitude based on
+// the frame value
+uniforms.amplitude.value = Math.sin(frame);
+frame += 0.1;
+
+renderer.render(scene, camera);
+
+// set up the next call
+requestAnimFrame(update);
+}
+requestAnimFrame(update);
+
+```
+
+## 12. Conclusion
+
+And that's it! You can now see it's animating  in a strange (and slightly trippy) pulsating manner.
+    
+There's so much more we can cover
+on shaders as a topic, but I hope you've found this introduction
+helpful. You should now be able to understand shaders when you see them
+as well as having the confidence to create some amazing shaders of your own!
diff --git a/src/site/content/en/blog/webgl-transforms/index.md b/src/site/content/en/blog/webgl-transforms/index.md
new file mode 100644
index 00000000000..006e9ba098f
--- /dev/null
+++ b/src/site/content/en/blog/webgl-transforms/index.md
@@ -0,0 +1,746 @@
+---
+title: WebGL transforms
+authors:
+  - gman
+date: 2012-04-18
+tags:
+  - blog
+---
+
+## WebGL 2D Translation
+
+Before we move on to 3D let's stick with 2D for a little while longer. Bear with me please. This article might seem exceedingly obvious to some but I'll build up to a point in a few articles.
+
+This article is a continuation of a series starting with [WebGL Fundamentals](https://www.html5rocks.com/tutorials/webgl/webgl_fundamentals/). If you haven't read it I suggest you read at least the first chapter then come back here.
+Translation is some fancy math name that basically means "to move" something. I suppose moving a sentence from English to Japanese fits as well but in this case we're talking about moving geometry. Using the sample code we ended up with in [the first post](https://www.html5rocks.com/tutorials/webgl/webgl_fundamentals/) you could easily translate our rectangle just by changing the values passed to setRectangle right? Here's a sample based on our [previous sample](https://www.html5rocks.com/tutorials/webgl/webgl_fundamentals/).
+
+```js
+  // First lets make some variables 
+  // to hold the translation of the rectangle
+  var translation = [0, 0];
+  // then let's make a function to
+  // re-draw everything. We can call this
+  // function after we update the translation.
+  // Draw the scene.
+  function drawScene() {
+     // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    // Setup a rectangle
+    setRectangle(gl, translation[0], translation[1], width, height);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+```
+
+So far so good. But now imagine we wanted to do the same thing with a more complicated shape.
+Let's say we wanted to draw an 'F' that consists of 6 triangles like this.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FP0CiVAJKRd0rC2TrPF6.svg", alt="F letter", width="182", height="254" %}
+</figure>
+
+Well, following are current code we'd have to change setRectangle to something more like this.
+
+```js
+// Fill the buffer with the values that define a letter 'F'.
+function setGeometry(gl, x, y) {
+  var width = 100;
+  var height = 150;
+  var thickness = 30;
+  gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([
+          // left column
+          x, y,
+          x + thickness, y,
+          x, y + height,
+          x, y + height,
+          x + thickness, y,
+          x + thickness, y + height,
+
+          // top rung
+          x + thickness, y,
+          x + width, y,
+          x + thickness, y + thickness,
+          x + thickness, y + thickness,
+          x + width, y,
+          x + width, y + thickness,
+
+          // middle rung
+          x + thickness, y + thickness * 2,
+          x + width * 2 / 3, y + thickness * 2,
+          x + thickness, y + thickness * 3,
+          x + thickness, y + thickness * 3,
+          x + width * 2 / 3, y + thickness * 2,
+          x + width * 2 / 3, y + thickness * 3]),
+      gl.STATIC_DRAW);
+}
+```
+
+You can hopefully see that's not going to scale well. If we want to draw some very complex geometry with hundreds or thousands of lines we'd have to write some pretty complex code. On top of that, every time we draw JavaScript has to update all the points.
+There's a simpler way. Just upload the geometry and do the translation in the shader.
+Here's the new shader
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+
+void main() {
+   // Add in the translation.
+   vec2 position = a_position + u_translation;
+
+   // convert the rectangle from pixels to 0.0 to 1.0
+   vec2 zeroToOne = position / u_resolution;
+   ...
+```
+
+and we'll restructure the code a little. For one we only need to set the geometry once. 
+
+```js
+// Fill the buffer with the values that define a letter 'F'.
+function setGeometry(gl) {
+  gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([
+          // left column
+          0, 0,
+          30, 0,
+          0, 150,
+          0, 150,
+          30, 0,
+          30, 150,
+
+          // top rung
+          30, 0,
+          100, 0,
+          30, 30,
+          30, 30,
+          100, 0,
+          100, 30,
+
+          // middle rung
+          30, 60,
+          67, 60,
+          30, 90,
+          30, 90,
+          67, 60,
+          67, 90]),
+      gl.STATIC_DRAW);
+}
+```
+
+Then we just need to update `u_translation` before we draw with the translation that we desire.
+
+```js
+  ...
+  var translationLocation = gl.getUniformLocation(
+             program, "u_translation");
+  ...
+  // Set Geometry.
+  setGeometry(gl);
+  ..
+  // Draw scene.
+  function drawScene() {
+    // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Set the translation.
+    gl.uniform2fv(translationLocation, translation);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 18);
+  }
+```
+
+Notice `setGeometry` is called only once. It is no longer inside drawScene.
+
+Now when we draw WebGL is doing practically everything. All we are doing is setting a translation and asking it to draw. Even if our geometry had tens of thousands of points the main code would stay the same.
+
+## WebGL 2D Rotation
+
+I'm going to admit right up front I have no idea if how I explain this will make sense but what the heck, might as well try.
+
+First I want to introduce you to what's called a "unit circle". If you remember your junior high school math (don't go to sleep on me!) a circle has a radius. The radius of a circle is the distance from the center of the circle to the edge. A unit circle is a circle with a radius of 1.0.
+
+If you remember from basic 3rd grade math if you multiply something by 1 it stays the same. So 123 * 1 = 123. Pretty basic right? Well, a unit circle, a circle with a radius of 1.0 is also a form of 1. It's a rotating 1.  So you can multiply something by this unit circle and in a way it's kind of like multiplying by 1 except magic happens and things rotate.
+We're going to take that X and Y value from any point on the unit circle and we'll multiply our geometry by them from <a href="webgl-2d-translation.html">our previous sample</a>.
+Here's are the updates to our shader.
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+uniform vec2 u_rotation;
+
+void main() {
+  // Rotate the position
+  vec2 rotatedPosition = vec2(
+     a_position.x * u_rotation.y + a_position.y * u_rotation.x,
+     a_position.y * u_rotation.y - a_position.x * u_rotation.x);
+
+  // Add in the translation.
+  vec2 position = rotatedPosition + u_translation;
+```
+
+And we update the JavaScript so that we can pass those 2 values in. 
+
+```js
+  ...
+  var rotationLocation = gl.getUniformLocation(program, "u_rotation");
+  ...
+  var rotation = [0, 1];
+  ..
+  // Draw the scene.
+  function drawScene() {
+    // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Set the translation.
+    gl.uniform2fv(translationLocation, translation);
+
+    // Set the rotation.
+    gl.uniform2fv(rotationLocation, rotation);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 18);
+  }
+```
+
+Why does it work? Well, look at the math. 
+
+```js
+rotatedX = a_position.x * u_rotation.y + a_position.y * u_rotation.x;
+rotatedY = a_position.y * u_rotation.y - a_position.x * u_rotation.x;
+```
+
+Let's stay you have a rectangle and you want to rotate it. Before you start rotating it the top right corner is at 3.0, 9.0. Let's pick a point on the unit circle 30 degrees clockwise from 12 o'clock.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GDnYKnGcbHiAp85M75mg.png", alt="30deg rotation", width="201", height="201" %}
+</figure>
+
+The position on the circle there is 0.50 and 0.87
+
+```js
+3.0 * 0.87 + 9.0 * 0.50 = 7.1
+9.0 * 0.87 - 3.0 * 0.50 = 6.3
+```
+
+That's exactly where we need it to be
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9A1VokxUGUC6qERlujsQ.svg", alt="Rotation drawing", width="588", height="182" %}
+</figure>
+
+The same for 60 degrees clockwise
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jw7iICMtFr2D8Dys9BFo.png", alt="60deg rotation", width="201", height="201" %}
+</figure>
+
+The position on the circle there is 0.87 and 0.50
+
+```js
+3.0 * 0.50 + 9.0 * 0.87 = 9.3
+9.0 * 0.50 - 3.0 * 0.87 = 1.9
+```
+You can see that as we rotate that point clockwise to the right the X value gets bigger and the Y gets smaller. If kept going past 90 degrees X would start getting smaller again and Y would start getting bigger. That pattern gives us rotation.
+There's another name for the points on a unit circle. They're call the sine and cosine. So for any given angle we can just look up the sine and cosine like this.
+
+```js
+function printSineAndCosineForAnAngle(angleInDegrees) {
+  var angleInRadians = angleInDegrees * Math.PI / 180;
+  var s = Math.sin(angleInRadians);
+  var c = Math.cos(angleInRadians);
+  console.log("s = " + s + " c = " + c);
+}
+```
+
+If you copy and paste the code into your JavaScript console and type `printSineAndCosignForAngle(30)` you see it prints `s = 0.49 c= 0.87` (note: I rounded off the numbers.)
+If you put it all together you can rotate your geometry to any angle you desire. Just set the rotation to the sine and cosine of the angle you want to rotate to.
+
+```js
+  ...
+  var angleInRadians = angleInDegrees * Math.PI / 180;
+  rotation[0] = Math.sin(angleInRadians);
+  rotation[1] = Math.cos(angleInRadians);
+```
+
+I hope that made some sense. Next up a simpler one. Scale.
+
+### What are radians?
+
+Radians are a unit of measurement used with circles, rotation and angles. Just like we can measure distance in inches, yards, meters, etc we can measure angles in degrees or radians. 
+
+
+You're probably aware that math with metric measurements is easier than math with imperial measurements. To go from inches to feet we divide by 12. To go from inches to yards we divide by 36. I don't know about you but I can't divide by 36 in my head. With metric it's much easier. To go from millimeters to centimeters we divide by 10. To from millimeters to meters we divide by 1000. I **can** divide by 1000 in my head.
+
+
+Radians vs degrees are similar. Degrees make the math hard. Radians make the math easy. There are 360 degrees in a circle but there are only 2π radians. So a full turn is 2π radians. A half turn is π radians. A 1/4 turn, ie 90 degress is π/2 radian. So if you want to rotate something 90 degrees just use `Math.PI * 0.5`. If you want to rotate it 45 degrees use `Math.PI * 0.25` etc.
+
+
+Nearly all math involving angles, circles or rotation works very simply if you start thinking in radians. So give it try. Use radians, not degrees except in UI displays.
+
+## WebGL 2D Scale
+
+Scaling is just as easy as translation.
+
+We multiply the position by our desired scale. Here are the changes from our previous sample.
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+uniform vec2 u_rotation;
+uniform vec2 u_scale;
+
+void main() {
+  // Scale the positon
+  vec2 scaledPosition = a_position * u_scale;
+
+  // Rotate the position
+  vec2 rotatedPosition = vec2(
+     scaledPosition.x * u_rotation.y +
+        scaledPosition.y * u_rotation.x,
+     scaledPosition.y * u_rotation.y -
+        scaledPosition.x * u_rotation.x);
+
+  // Add in the translation.
+  vec2 position = rotatedPosition + u_translation;
+```
+
+and we add the JavaScript needed to set the scale when we draw.
+
+```js
+  ...
+  var scaleLocation = gl.getUniformLocation(program, "u_scale");
+  ...
+  var scale = [1, 1];
+  ...
+  // Draw the scene.
+  function drawScene() {
+    // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Set the translation.
+    gl.uniform2fv(translationLocation, translation);
+
+    // Set the rotation.
+    gl.uniform2fv(rotationLocation, rotation);
+
+    // Set the scale.
+    gl.uniform2fv(scaleLocation, scale);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 18);
+  }
+```
+
+One thing to notice is that scaling by a negative value flips our geometry.
+I hope these last 3 chapters were helpful in understanding translation, rotation and scale. Next we'll go over the magic that is matrices that combine all 3 of these into a much simpler and often more useful form.
+
+### Why an 'F'?
+
+The first time I saw someone use a 'F' was on a texture. The 'F' itself is not important. What is important is that you can tell its orientation from any direction. If we used a heart ♥ or a triangle △ for example we couldn't tell if it was flipped horizontally. A circle ○ would be even worse. A colored rectangle would arguably work with different colors on each corner but then you'd have to remember which corner was which. An F's orientation is instantly recognizable. 
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gFSxjWiFNX7ApENi3BDC.svg", alt="F orientation", width="427", height="63" %}
+</figure>
+
+Any shape that you can tell the orientation of would work, I've just used 'F' ever since I was 'F'irst introduced to the idea.
+
+## WebGL 2D Matrices
+
+In the last 3 chapters we went over how to translate geometry, rotate geometry, and scale geometry. Translation, rotation and scale are each considered a type of 'transformation'. Each of these transformations required changes to the shader and each of the 3 transformations was order dependent. 
+
+For example here is a scale of 2, 1, rotation of 30%, and translation of 100, 0.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2ewvFl4YaHvWoCnhbxTn.svg", alt="F rotation and translation", width="800", height="379" %}
+</figure>
+
+And here is a translation of 100,0, rotation of 30% and scale of 2, 1
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/nJ9PbNzsB7v70ZGJKXvn.svg", alt="F rotation and scale", width="800", height="380" %}
+</figure>
+
+The results are completely different. Even worse, if we needed the second example we'd have to write a different shader that applied the translation, rotation, and scale in our new desired order.
+Well, some people way smarter than me, figured out that you can do all the same stuff with matrix math. For 2d we use a 3x3 matrix. A 3x3 matrix is like grid with 9 boxes. 
+
+<table>
+<tbody>
+    <tr>
+        <td>1.0</td>
+        <td>2.0</td>
+        <td>3.0</td>
+    </tr>
+    <tr>
+        <td>4.0</td>
+        <td>5.0</td>
+        <td>6.0</td>
+    </tr>
+    <tr>
+        <td>7.0</td>
+        <td>8.0</td>
+        <td>9.0</td>
+    </tr>
+</tbody>
+</table>
+
+To do the math we multiply the position down the columns of the matrix and add up the results. Our positions only have 2 values, x and y but to do this math we need 3 values so we'll use 1 for the third value.
+in this case our result would be
+
+```js
+newX = x * 1.0 + y * 4.0 + 1 * 7.0
+
+newY = x * 2.0 + y * 5.0 + 1 * 8.0
+
+extra = x * 3.0 + y * 6.0 + 1 * 9.0
+```
+
+You're probably looking at that and thinking "WHAT'S THE POINT". Well, Let's assume we have a translation. We'll call the amount we want to translate tx and ty. Let's make a matrix like this
+
+<table>
+    <tbody>
+        <tr><td>1.0</td><td>0.0</td><td>0.0</td></tr>
+        <tr><td>0.0</td><td>1.0</td><td>0.0</td></tr>
+        <tr><td>tx</td><td>ty</td><td>1.0</td></tr>
+    <tbody>
+</table>
+
+And now check it out
+
+```js
+newX = x * 1.0 + y * 0.0 + 1 * tx
+
+newY = x * 0.0 + y * 1.0 + 1 * ty
+
+extra = x * 0.0 + y * 0.0 + 1 * 1
+```
+
+If you remember your algebra, we can delete any place that multiplies by zero. Multiplying by 1 effectively does nothing so let's simplify to see what's happening
+
+```js
+newX = x + tx;
+newY = y + ty;
+```
+
+And extra we don't really care about. That looks surprisingly like the translation code from our translation example.
+Similarly let's do rotation. Like we pointed out in the rotation post we just need the sine and cosine of the angle at which we want to rotate so.
+
+```js
+s = Math.sin(angleToRotateInRadians);
+c = Math.cos(angleToRotateInRadians);
+```
+
+And we build a matrix like this
+
+<table>
+    <tbody>
+        <tr><td>c</td><td>-s</td><td>0.0</td></tr>
+        <tr><td>s</td><td>c</td><td>0.0</td></tr>
+        <tr><td>0.0</td><td>0.0</td><td>1.0</td></tr>
+    </tbody>
+</table>
+
+Applying the matrix we get this
+
+```js
+newX = x * c + y * s + 1 * 0
+
+newY = x * -s + y * c + 1 * 0
+
+extra = x * 0.0 + y * 0.0 + 1 * 1
+```
+
+Blacking out all multiply by 0s and 1s we get
+
+```js
+newX = x *  c + y * s;
+newY = x * -s + y * c;
+```
+
+Which is exactly what we had in our rotation sample.
+And lastly scale. We'll call our 2 scale factors sx and sy
+And we build a matrix like this
+
+<table>
+    <tbody>
+        <tr><td>sx</td><td>0.0</td><td>0.0</td></tr>
+        <tr><td>0.0</td><td>sy</td><td>0.0</td></tr>
+        <tr><td>0.0</td><td>0.0</td><td>1.0</td></tr>
+    </tbody>
+</table>
+
+Applying the matrix we get this
+
+```js
+newX = x * sx + y * 0 + 1 * 0
+
+newY = x * 0 + y * sy + 1 * 0
+
+extra = x * 0.0 + y * 0.0 + 1 * 1
+```
+
+which is really
+
+```js
+newX = x * sx;
+newY = y * sy;
+```
+
+Which is the same as our scaling sample.
+Now I'm sure you might still be thinking. So what? What's the point. That seems like a lot of work just to do the same thing we were already doing?
+This is where the magic comes in. It turns out we can multiply matrices together and apply all the transformations at once. Let's assume we have function, `matrixMultiply`, that takes two matrices, multiplies them and returns the result.
+To make things clearer let's make functions to build matrices for translation, rotation and scale.
+
+```js
+function makeTranslation(tx, ty) {
+  return [
+    1, 0, 0,
+    0, 1, 0,
+    tx, ty, 1
+  ];
+}
+
+function makeRotation(angleInRadians) {
+  var c = Math.cos(angleInRadians);
+  var s = Math.sin(angleInRadians);
+  return [
+    c,-s, 0,
+    s, c, 0,
+    0, 0, 1
+  ];
+}
+
+function makeScale(sx, sy) {
+  return [
+    sx, 0, 0,
+    0, sy, 0,
+    0, 0, 1
+  ];
+}
+```
+
+Now let's change our shader. The old shader looked like this
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+uniform vec2 u_rotation;
+uniform vec2 u_scale;
+
+void main() {
+  // Scale the positon
+  vec2 scaledPosition = a_position * u_scale;
+
+  // Rotate the position
+  vec2 rotatedPosition = vec2(
+     scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
+     scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
+
+  // Add in the translation.
+  vec2 position = rotatedPosition + u_translation;
+  ...
+```
+
+Our new shader will be much simpler.
+
+```html
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform vec2 u_resolution;
+uniform mat3 u_matrix;
+
+void main() {
+  // Multiply the position by the matrix.
+  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
+  ...
+```
+
+And here's how we use it
+
+```js
+  // Draw the scene.
+  function drawScene() {
+    // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Compute the matrices
+    var translationMatrix =
+       makeTranslation(translation[0], translation[1]);
+    var rotationMatrix = makeRotation(angleInRadians);
+    var scaleMatrix = makeScale(scale[0], scale[1]);
+
+    // Multiply the matrices.
+    var matrix = matrixMultiply(scaleMatrix, rotationMatrix);
+    matrix = matrixMultiply(matrix, translationMatrix);
+
+    // Set the matrix.
+    gl.uniformMatrix3fv(matrixLocation, false, matrix);
+
+    // Draw the rectangle.
+    gl.drawArrays(gl.TRIANGLES, 0, 18);
+  }
+```
+
+Still, you might be asking, so what? That doesn't seem like much of a benefit . But, now if we want to change the order we don't have to write a new shader. We can just change the math.
+
+```js
+    ...
+    // Multiply the matrices.
+    var matrix = matrixMultiply(translationMatrix, rotationMatrix);
+    matrix = matrixMultiply(matrix, scaleMatrix);
+    ...
+```
+
+Being able to apply matrices like this is especially important for hierarchical animation like arms on a body, moons on a planet around a sun, or branches on a tree. For a simple example of hierarchical animation lets draw draw our 'F' 5 times but each time lets start with the matrix from the previous 'F'.
+
+```js
+  // Draw the scene.
+  function drawScene() {
+    // Clear the canvas.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Compute the matrices
+    var translationMatrix = makeTranslation(translation[0], translation[1]);
+    var rotationMatrix = makeRotation(angleInRadians);
+    var scaleMatrix = makeScale(scale[0], scale[1]);
+
+    // Starting Matrix.
+    var matrix = makeIdentity();
+
+    for (var i = 0; i < 5; ++i) {
+      // Multiply the matrices.
+      matrix = matrixMultiply(matrix, scaleMatrix);
+      matrix = matrixMultiply(matrix, rotationMatrix);
+      matrix = matrixMultiply(matrix, translationMatrix);
+
+      // Set the matrix.
+      gl.uniformMatrix3fv(matrixLocation, false, matrix);
+
+      // Draw the geometry.
+      gl.drawArrays(gl.TRIANGLES, 0, 18);
+    }
+  }
+```
+
+To do this we had introduce the function, `makeIdentity`, that makes an identity matrix. An identity matrix is a matrix that effectively represents 1.0 so that if you multiply by the identity nothing happens. Just like 
+
+```js
+X * 1 = X
+```
+
+so too 
+
+```js
+matrixX * identity = matrixX
+```
+
+Here's the code to make an identity matrix.
+
+```js
+function makeIdentity() {
+  return [
+    1, 0, 0,
+    0, 1, 0,
+    0, 0, 1
+  ];
+}
+```
+
+One more example, In every sample so far our 'F' rotates around its top left corner. This is because the math we are using always rotates around the origin and the top left corner of our 'F' is at the origin, (0, 0)
+But now, because we can do matrix math and we can choose the order that transforms are applied we can move the origin before the rest of the transforms are applied.
+
+```js
+    // make a matrix that will move the origin of the 'F' to
+    // its center.
+    var moveOriginMatrix = makeTranslation(-50, -75);
+    ...
+
+    // Multiply the matrices.
+    var matrix = matrixMultiply(moveOriginMatrix, scaleMatrix);
+    matrix = matrixMultiply(matrix, rotationMatrix);
+    matrix = matrixMultiply(matrix, translationMatrix);
+```
+
+Using that technique you can rotate or scale from any point. Now you know how Photoshop or Flash let you move the rotation point.
+Let's go even more crazy. If you go back to the first article on <a href="/tutorials/webgl/webgl_fundamentals/">WebGL fundamentals</a> you might remember we have code in the shader to convert from pixels to clipspace that looks like this.
+
+```js
+  ...
+  // convert the rectangle from pixels to 0.0 to 1.0
+  vec2 zeroToOne = position / u_resolution;
+
+  // convert from 0->1 to 0->2
+  vec2 zeroToTwo = zeroToOne * 2.0;
+
+  // convert from 0->2 to -1->+1 (clipspace)
+  vec2 clipSpace = zeroToTwo - 1.0;
+
+  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+```
+
+If you look at each of those steps in turn, the first step, "convert from pixels to 0.0 to 1.0", is really a scale operation. The second is also a scale operation. The next is a translation and the very last scales Y by -1. We can actually do that all in the matrix we pass into the shader. We could make 2 scale matrices, one to scale by 1.0/resolution, another to scale by 2.0, a 3rd to translate by -1.0,-1.0 and a 4th to scale Y by -1 then multiply them all together but instead, because the math is simple, we'll just make a function that makes a 'projection' matrix for a given resolution directly.
+
+```js
+function make2DProjection(width, height) {
+  // Note: This matrix flips the Y axis so that 0 is at the top.
+  return [
+    2 / width, 0, 0,
+    0, -2 / height, 0,
+    -1, 1, 1
+  ];
+}
+```
+
+Now we can simplify the shader even more. Here's the entire new vertex shader.
+
+```js
+<script id="2d-vertex-shader" type="x-shader/x-vertex">
+attribute vec2 a_position;
+
+uniform mat3 u_matrix;
+
+void main() {
+  // Multiply the position by the matrix.
+  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
+}
+</script>
+```
+
+And in JavaScript we need to multiply by the projection matrix
+
+```js
+  // Draw the scene.
+  function drawScene() {
+    ...
+    // Compute the matrices
+    var projectionMatrix =
+       make2DProjection(canvas.width, canvas.height);
+    ...
+
+    // Multiply the matrices.
+    var matrix = matrixMultiply(scaleMatrix, rotationMatrix);
+    matrix = matrixMultiply(matrix, translationMatrix);
+    matrix = matrixMultiply(matrix, projectionMatrix);
+    ...
+  }
+```
+
+We also removed the code that set the resolution. With this last step we've gone from a rather complicated shader with 6-7 steps to a very simple shader with only 1 step all do to the magic of matrix math.
+
+I hope this article has helped demystify matrix math. I'll move on to 3D next. In 3D matrix math follows the same principles and usage. I started with 2D to hopefully keep it simple to understand.
diff --git a/src/site/content/en/blog/webgl-typed-arrays/index.md b/src/site/content/en/blog/webgl-typed-arrays/index.md
new file mode 100644
index 00000000000..3852d60f701
--- /dev/null
+++ b/src/site/content/en/blog/webgl-typed-arrays/index.md
@@ -0,0 +1,481 @@
+---
+layout: post
+title: Typed arrays - Binary data in the browser
+authors:
+- ilmariheikkinen
+date: 2012-07-20
+tags:
+- blog
+---
+
+## Introduction
+
+Typed Arrays are a relatively recent addition to browsers, born out of the need to have an efficient way to handle binary data in WebGL. A Typed Array is a slab of memory with a typed view into it, much like how arrays work in C. Because a Typed Array is backed by raw memory, the JavaScript engine can pass the memory directly to native libraries without having to painstakingly convert the data to a native representation. As a result, typed arrays perform a lot better than JavaScript arrays for passing data to WebGL and other APIs dealing with binary data.
+
+Typed array views act like single-type arrays to a segment of an ArrayBuffer. There are views for all the usual numeric types, with self-descriptive names like Float32Array, Float64Array, Int32Array and Uint8Array. There's also a special view which has replaced the pixel array type in Canvas's ImageData: Uint8ClampedArray.
+
+DataView is the second type of view and it is meant for handling heterogeneous data. Instead of having an array-like API, the DataView object provides you a get/set API to read and write arbitrary data types at arbitrary byte offsets. DataView works great for reading and writing file headers and other such struct-like data.
+
+## Basics of using Typed Arrays
+
+### Typed array views
+
+To use Typed Arrays, you need to create an ArrayBuffer and a view to it. The easiest way is to create a typed array view of the desired size and type.
+
+```js
+// Typed array views work pretty much like normal arrays.
+var f64a = new Float64Array(8);
+f64a[0] = 10;
+f64a[1] = 20;
+f64a[2] = f64a[0] + f64a[1];
+```
+
+There are several different types of typed array views. They all share the same API, so once you know how to use one, you pretty much know how to use them all. I'm going to create one of each currently existing typed array views in the next example.
+
+```js
+// Floating point arrays.
+var f64 = new Float64Array(8);
+var f32 = new Float32Array(16);
+
+// Signed integer arrays.
+var i32 = new Int32Array(16);
+var i16 = new Int16Array(32);
+var i8 = new Int8Array(64);
+
+// Unsigned integer arrays.
+var u32 = new Uint32Array(16);
+var u16 = new Uint16Array(32);
+var u8 = new Uint8Array(64);
+var pixels = new Uint8ClampedArray(64);
+```
+
+The last one is a bit special, it clamps input values between 0 and 255.
+This is especially handy for Canvas image processing algorithms since
+now you don’t have to manually clamp your image processing math to
+avoid overflowing the 8-bit range.
+
+For example, here’s how you’d apply a gamma factor to an image stored
+in a Uint8Array. Not very pretty:
+
+```js
+u8[i] = Math.min(255, Math.max(0, u8[i] * gamma));
+```
+
+With Uint8ClampedArray you can skip the manual clamping:
+
+```js
+pixels[i] *= gamma;
+```
+
+The other way to create typed array views is to create an ArrayBuffer first and then create views that point to it. The APIs that get you external data usually deal in ArrayBuffers, so this is the way you get a typed array view to those.
+
+```js
+var ab = new ArrayBuffer(256); // 256-byte ArrayBuffer.
+var faFull = new Uint8Array(ab);
+var faFirstHalf = new Uint8Array(ab, 0, 128);
+var faThirdQuarter = new Uint8Array(ab, 128, 64);
+var faRest = new Uint8Array(ab, 192);
+```
+
+You can also have several views to the same ArrayBuffer.
+
+```js
+var fa = new Float32Array(64);
+var ba = new Uint8Array(fa.buffer, 0, Float32Array.BYTES_PER_ELEMENT); // First float of fa.
+```
+
+To copy a typed array to another typed array, the fastest way is to use the typed array set method. For a memcpy-like use, create Uint8Arrays to the buffers of the views and use set to copy the data over.
+
+```js
+function memcpy(dst, dstOffset, src, srcOffset, length) {
+  var dstU8 = new Uint8Array(dst, dstOffset, length);
+  var srcU8 = new Uint8Array(src, srcOffset, length);
+  dstU8.set(srcU8);
+};
+```
+
+### DataView
+
+To use ArrayBuffers that contain data with heterogenous types, the easiest way is to use a DataView to the buffer. Suppose we have a file format that has a header with an 8-bit unsigned int followed by two 16-bit ints, followed by a payload array of 32-bit floats. Reading this back with typed array views is doable but a bit of a pain. With a DataView we can read the header and use a typed array view for the float array.
+
+```js
+var dv = new DataView(buffer);
+var vector_length = dv.getUint8(0);
+var width = dv.getUint16(1); // 0+uint8 = 1 bytes offset
+var height = dv.getUint16(3); // 0+uint8+uint16 = 3 bytes offset
+var vectors = new Float32Array(width*height*vector_length);
+for (var i=0, off=5; i<vectors.length; i++, off+=4) {
+  vectors[i] = dv.getFloat32(off);
+}
+```
+
+In the above example, all the values I read are big-endian. If the values in the buffer are little-endian, you can pass the optional littleEndian parameter to the getter:
+
+```js
+...
+var width = dv.getUint16(1, true);
+var height = dv.getUint16(3, true);
+...
+vectors[i] = dv.getFloat32(off, true);
+...
+```
+
+Note that typed array views are always in the native byte order. This is to make them fast. You should use a DataView to read and write data where endianness is going to be an issue.
+
+The DataView also has methods for writing values to buffers. These setters are named in the same fashion as the getters, "set" followed by the data type.
+
+```js
+dv.setInt32(0, 25, false); // set big-endian int32 at byte offset 0 to 25
+dv.setInt32(4, 25); // set big-endian int32 at byte offset 4 to 25
+dv.setFloat32(8, 2.5, true); // set little-endian float32 at byte offset 8 to 2.5
+```
+
+### A discussion of endianness
+
+Endianness, or byte order, is the order in which multi-byte numbers are stored in the computer's memory. The term __big-endian__ describes a CPU architecture which stores the most significant byte first; __little-endian__, the least significant byte first. Which endianness is used in a given CPU architecture is completely arbitrary; there are good reasons to choose either one. In fact, some CPUs can be configured to support both big-endian and little-endian data.
+
+Why do you need to be concerned about endianness? The reason is simple. When reading or writing data from the disk or the network, the endianness of the data must be specified. This ensures that the data is interpreted properly, regardless of the endianness of the CPU that is working with it. In our increasingly networked world, it is essential to properly support all kinds of devices, big- or little-endian, that might need to work with binary data coming from servers or other peers on the network.
+
+The DataView interface is specifically designed to read and write data to and from files and the network. DataView operates upon data with a __specified endianness__. The endianness, big or little, must be specified with every access of every value, ensuring that you get consistent and correct results when reading or writing binary data, no matter what the endianness of the CPU on which the browser is running.
+
+Typically, when your application reads binary data from a server, you’ll need to scan through it once in order to convert it into the data structures your application uses internally. DataView should be used during this phase. It’s not a good idea to use the multi-byte typed array views (Int16Array, Uint16Array, etc.) directly with data fetched via XMLHttpRequest, FileReader, or any other input/output API, because the typed array views use the CPU’s native endianness. More on this later.
+
+Let’s look at a couple of simple examples. The [Windows BMP](http://en.wikipedia.org/wiki/BMP_file_format#Bitmap_file_header) file format used to be the standard format for storing images in the early days of Windows. The documentation linked above clearly indicates that all of the integer values in the file are stored in little-endian format. Here is a snippet of code which parses the beginning of the BMP header using the [DataStream.js](http://github.com/kig/DataStream.js) library which accompanies this article:
+
+```js
+function parseBMP(arrayBuffer) {
+  var stream = new DataStream(arrayBuffer, 0,
+    DataStream.LITTLE_ENDIAN);
+  var header = stream.readUint8Array(2);
+  var fileSize = stream.readUint32();
+  // Skip the next two 16-bit integers
+  stream.readUint16();
+  stream.readUint16();
+  var pixelOffset = stream.readUint32();
+  // Now parse the DIB header
+  var dibHeaderSize = stream.readUint32();
+  var imageWidth = stream.readInt32();
+  var imageHeight = stream.readInt32();
+  // ...
+}
+```
+
+Here’s another example, this one from the [High Dynamic Range rendering demo](http://webglsamples.googlecode.com/hg/hdr/hdr.html) in the [WebGL samples project](https://code.google.com/p/webglsamples/). This demo downloads raw, little-endian floating-point data representing high dynamic range textures, and needs to upload it to WebGL. Here is the snippet of code which properly interprets the floating-point values on all CPU architectures. Assume the variable “arrayBuffer” is an ArrayBuffer which has just been downloaded from the server via XMLHttpRequest:
+
+```js
+var arrayBuffer = ...;
+var data = new DataView(arrayBuffer);
+var tempArray = new Float32Array(
+  data.byteLength / Float32Array.BYTES_PER_ELEMENT);
+var len = tempArray.length;
+// Incoming data is raw floating point values
+// with little-endian byte ordering.
+for (var jj = 0; jj < len; ++jj) {
+  tempArray[jj] =
+    data.getFloat32(jj * Float32Array.BYTES_PER_ELEMENT, true);
+}
+gl.texImage2D(...other arguments...,
+  gl.RGB, gl.FLOAT, tempArray);
+```
+
+The rule of thumb is: upon receiving binary data from the web server, make one pass over it with a DataView. Read the individual numeric values and store them in some other data structure, either a JavaScript object (for small amounts of structured data) or a typed array view (for large blocks of data). This will ensure that your code works correctly on all kinds of CPUs. Also use DataView to write data to a file or the network, and make sure to appropriately specify the __littleEndian__ argument to the various __set__ methods in order to produce the file format you are creating or using.
+
+Remember, all data that goes over the network implicitly has a format and an endianness (at least, for any multi-byte values). Make sure to clearly define and document the format of all data your application sends over the network.
+
+## Browser APIs that use Typed Arrays
+
+I'm going to give you a brief overview of the different browser APIs that are currently using Typed Arrays. The current crop includes WebGL, Canvas, Web Audio API, XMLHttpRequests, WebSockets, Web Workers, Media Source API and File APIs. From the list of APIs you can see that Typed Arrays are well suited for performance-sensitive multimedia work as well as passing data around in an efficient fashion.
+
+### WebGL
+
+The first use of Typed Arrays was in WebGL, where it is used to pass around buffer data and image data. To set the contents of a WebGL buffer object, you use the gl.bufferData() call with a Typed Array.
+
+```js
+var floatArray = new Float32Array([1,2,3,4,5,6,7,8]);
+gl.bufferData(gl.ARRAY_BUFFER, floatArray);
+```
+
+Typed Arrays are also used to pass around texture data. Here's a basic example of passing in texture content using a Typed Array.
+
+```js
+var pixels = new Uint8Array(16*16*4); // 16x16 RGBA image
+gl.texImage2D(
+  gl.TEXTURE_2D, // target
+  0, // mip level
+  gl.RGBA, // internal format
+  16, 16, // width and height
+  0, // border
+  gl.RGBA, //format
+  gl.UNSIGNED_BYTE, // type
+  pixels // texture data
+);
+```
+
+You also need Typed Arrays to read pixels from the WebGL context.
+
+```js
+var pixels = new Uint8Array(320*240*4); // 320x240 RGBA image
+gl.readPixels(0, 0, 320, 240, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+```
+
+### Canvas 2D
+
+Recently the Canvas ImageData object was made to work with the Typed Arrays spec. Now you can get a Typed Arrays representation of the pixels on a canvas element. This is helpful since now you can also create and edit canvas pixel arrays without having to fiddle around with the canvas element.
+
+```js
+var imageData = ctx.getImageData(0,0, 200, 100);
+var typedArray = imageData.data // data is a Uint8ClampedArray
+```
+
+### XMLHttpRequest2
+
+XMLHttpRequest got a Typed Array boost and now you can receive a Typed Array response instead of having to parse a JavaScript string into a Typed Array. This is really neat for passing fetched data directly to multimedia APIs and for parsing binary files fetched from the network.
+
+All you have to do is set the responseType of the XMLHttpRequest object to 'arraybuffer'.
+
+```js
+xhr.responseType = 'arraybuffer';
+```
+
+Recall that you must be aware of endianness issues when downloading data from the network! See the section on endianness above.
+
+### File APIs
+
+The FileReader can read file contents as an ArrayBuffer. You can then attach typed array views and DataViews to the buffer to manipulate its contents.
+
+```js
+reader.readAsArrayBuffer(file);
+```
+
+You should keep endianness in mind here as well. Check out the endianness section for details.
+
+### Transferable objects
+
+Transferable objects in postMessage make passing binary data to other windows and Web Workers a great deal faster. When you send an object to a Worker as a Transferable, the object becomes inaccessible in the sending thread and the receiving Worker gets ownership of the object. This allows for a highly optimized implementation where the sent data is not copied, just the ownership of the Typed Array is transferred to the receiver.
+
+To use Transferable objects with Web Workers, you need to use the webkitPostMessage method on the worker. The webkitPostMessage method works just like postMessage, but it takes two arguments instead of just one. The added second argument is an array of objects you wish to transfer to the worker.
+
+```js
+worker.webkitPostMessage(oneGBTypedArray, [oneGBTypedArray]);
+```
+
+To get the objects back from the worker, the worker can pass them back to the main thread in the same fashion.
+
+```js
+webkitPostMessage({results: grand, youCanHaveThisBack: oneGBTypedArray}, [oneGBTypedArray]);
+```
+
+Zero copies, woo!
+
+### Media Source API
+
+Recently, the media elements also got some Typed Array goodness in the form of the [Media Source API](http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html). You can directly pass a Typed Array containing video data to a video element using webkitSourceAppend. This makes the video element append the video data after the existing video. SourceAppend is awesome for doing interstitials, playlists, streaming and other uses where you might want to play several videos using a single video element.
+
+```js
+video.webkitSourceAppend(uint8Array);
+```
+
+### Binary WebSockets
+
+You can also use Typed Arrays with WebSockets to avoid having to stringify all your data. Great for writing efficient protocols and minimizing network traffic.
+
+```js
+socket.binaryType = 'arraybuffer';
+```
+
+Whew! That wraps up the API review. Let's move onto looking at third-party libraries for handling Typed Arrays.
+
+## Third-party libraries
+
+### jDataView
+
+[jDataView](https://https://github.com/vjeux/jDataView) implements a DataView shim for all browsers. DataView used to be a WebKit-only feature, but now it's supported by most other browsers. The Mozilla developer team is in the process of landing a patch to enable DataView on Firefox as well.
+
+Eric Bidelman on the Chrome Developer Relations team wrote a [small MP3 ID3 tag reader example](http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript) that uses jDataView. Here's a usage example from the blog post:
+
+```js
+var dv = new jDataView(arraybuffer);
+
+// "TAG" starts at byte -128 from EOF.
+// See http://en.wikipedia.org/wiki/ID3
+if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
+  var title = dv.getString(30, dv.tell());
+  var artist = dv.getString(30, dv.tell());
+  var album = dv.getString(30, dv.tell());
+  var year = dv.getString(4, dv.tell());
+} else {
+  // no ID3v1 data found.
+}
+```
+
+### stringencoding
+
+Working with strings in Typed Arrays is a bit of a pain at the moment, but there’s the [stringencoding library](http://code.google.com/p/stringencoding) that helps there. Stringencoding implements the proposed [Typed Array string encoding spec](http://wiki.whatwg.org/wiki/StringEncoding), so it’s also a good way to get a feel for what’s coming.
+
+Here's a basic usage example of stringencoding:
+
+```js
+var uint8array = new TextEncoder(encoding).encode(string);
+var string = new TextDecoder(encoding).decode(uint8array);
+```
+
+### BitView.js
+
+I have written a small bit manipulation library for Typed Arrays called BitView.js. As the name says, it works much like the DataView, except it works with bits. With BitView you can get and set the value of a bit at a given bit offset in an ArrayBuffer. BitView also has methods for storing and loading 6-bit and 12-bit ints at arbitrary bit offsets.
+
+12-bit ints are nice for working with screen coordinates, as displays tend to have fewer than 4096 pixels along the longer dimension. By using 12-bit ints instead of 32-bit ints, you get a 62% size reduction. For a more extreme example, I was working with Shapefiles that use 64-bit floats for the coordinates, but I didn't need the precision because the model was only going to be shown at screen size. Switching over to 12-bit base coordinates with 6-bit deltas to encode changes from the previous coordinate brought the filesize down to a tenth. You can see the demo of that at [here](http://fhtr.org/shp.js/).
+
+Here's an example of using BitView.js:
+
+```js
+var bv = new BitView(arrayBuffer);
+bv.setBit(4, 1); // Set fourth bit of arrayBuffer to 1.
+bv.getBit(17); // Get 17th bit of arrayBuffer.
+
+bv.getBit(50*8 + 3); // Get third bit of 50th byte in arrayBuffer.
+
+bv.setInt6(3, 18); // Write 18 as a 6-bit int to bit position 3 in arrayBuffer.
+bv.getInt12(9); // Read a 12-bit int from bit position 9 in arrayBuffer.
+```
+
+### DataStream.js
+
+One of the most exciting things about typed arrays is how they make it easier to deal with binary files in JavaScript. Instead of parsing a string character by character and manually converting the characters into binary numbers and such, you can now get an ArrayBuffer with XMLHttpRequest and directly process it using a DataView. This makes it easy to e.g. load in an MP3 file and read the metadata tags for use in your audio player. Or load in a shapefile and turn it into a WebGL model. Or read the EXIF tags off a JPEG and show them in your slideshow app.
+
+The problem with ArrayBuffer XHRs is that reading struct-like data from the buffer is a bit of a pain. DataView is good for reading a few numbers at a time in an endian-safe fashion, typed array views are good for reading arrays of element-size-aligned native endian numbers. What we felt missing is a way to read in arrays and structs of data in a convenient endian-safe fashion. Enter DataStream.js.
+
+[DataStream.js](http://github.com/kig/DataStream.js) is a Typed Arrays library that read and writes scalars, strings, arrays and structs of data from ArrayBuffers in a file-like fashion.
+
+Example of reading in an array of floats from an ArrayBuffer:
+
+```js
+// without DataStream.js
+var dv = new DataView(buffer);
+var f32 = new Float32Array(buffer.byteLength / 4);
+var littleEndian = true;
+for (var i = 0; i<f32.length; i++) {
+  f32[i] = dv.getFloat32(i*4, littleEndian);
+}
+
+// with DataStream.js
+var ds = new DataStream(buffer);
+ds.endianness = DataStream.LITTLE_ENDIAN;
+var f32 = ds.readFloat32Array(ds.byteLength / 4);
+```
+
+Where DataStream.js gets really useful is in reading more complex data. Suppose you have a method that reads in JPEG markers:
+
+```js
+// without DataStream.js
+var dv = new DataView(buffer);
+var objs = [];
+for (var i=0; i<buffer.byteLength;) {
+  var obj = {};
+  obj.tag = dv.getUint16(i);
+  i += 2;
+  obj.length = dv.getUint16(i);
+  i += 2;
+  obj.data = new Uint8Array(obj.length - 2);
+  for (var j=0; j<obj.data.length; j++,i++) {
+    obj.data[j] = dv.getUint8(i);
+  }
+  objs.push(obj);
+}
+
+// with DataStream.js
+var ds = new DataStream(buffer);
+ds.endianness = ds.BIG_ENDIAN;
+var objs = [];
+while (!ds.isEof()) {
+  var obj = {};
+  obj.tag = ds.readUint16();
+  obj.length = ds.readUint16();
+  obj.data = ds.readUint8Array(obj.length - 2);
+  objs.push(obj);
+}
+```
+
+Or use the DataStream.readStruct method to read in structs of data. The readStruct method takes in a struct definition array that contains the types of the struct members. It’s got callback functions for handling complex types and handles arrays of data and nested structs as well:
+
+```js
+// with DataStream.readStruct
+ds.readStruct([
+  'objs', ['[]', [ // objs: array of tag,length,data structs
+    'tag', 'uint16',
+    'length', 'uint16',
+    'data', ['[]', 'uint8', function(s,ds){ return s.length - 2; }], // get length with a function
+  '*'] // read in as many struct as there are
+]);
+```
+
+As you can see, the struct definition is a flat array of [name, type]-pairs. Nested structs are done by having an array for the type. Arrays are defined by using a three-element array where the second element is the array element type and the third element is the array length (either as a number, as a reference to previously read field or as a callback function). The first element of the array definition is unused.
+
+The possible values for the type are as follows:
+
+```js
+Number types
+
+Unsuffixed number types use DataStream endianness.
+To explicitly specify endianness, suffix the type with
+'le' for little-endian or 'be' for big-endian,
+e.g. 'int32be' for big-endian int32.
+
+  'uint8' -- 8-bit unsigned int
+  'uint16' -- 16-bit unsigned int
+  'uint32' -- 32-bit unsigned int
+  'int8' -- 8-bit int
+  'int16' -- 16-bit int
+  'int32' -- 32-bit int
+  'float32' -- 32-bit float
+  'float64' -- 64-bit float
+
+String types
+
+  'cstring' -- ASCII string terminated by a zero byte.
+  'string:N' -- ASCII string of length N.
+  'string,CHARSET:N' -- String of byteLength N encoded with given CHARSET.
+  'u16string:N' -- UCS-2 string of length N in DataStream endianness.
+  'u16stringle:N' -- UCS-2 string of length N in little-endian.
+  'u16stringbe:N' -- UCS-2 string of length N in big-endian.
+
+Complex types
+
+  [name, type, name_2, type_2, ..., name_N, type_N] -- Struct
+
+  function(dataStream, struct) {} -- Callback function to read and return data.
+
+  {get: function(dataStream, struct) {}, set: function(dataStream, struct) {}}
+  -- Getter/setter functions to reading and writing data. Handy for using the
+     same struct definition for both reading and writing.
+
+  ['', type, length] -- Array of given type and length. The length can be either
+                        a number, a string that references a previously-read
+                        field, or a callback function(struct, dataStream, type){}.
+                        If length is set to '*', elements are read from the
+                        DataStream until a read fails.
+```
+
+You can see a live example of reading in JPEG metadata [here](http://fhtr.org/DataStream.js/jpeg.html). The demo's using DataStream.js for reading the tag-level structure of the JPEG file (along with some EXIF parsing), and [jpg.js](https://github.com/notmasteryet/jpgjs) for decoding and displaying the JPEG image in JavaScript.
+
+## History of Typed Arrays
+
+Typed Arrays got their start in the early implementation stage of WebGL, when we found that passing JavaScript arrays to the graphics driver was causing performance problems. With JavaScript arrays, the WebGL binding had to allocate a native array and fill it by walking over the JavaScript array and cast every JavaScript object in the array to the required native type.
+
+To fix the data conversion bottleneck, Mozilla's Vladimir Vukicevic wrote CanvasFloatArray: a C-style float array with a JavaScript interface. Now you could edit the CanvasFloatArray in JavaScript and pass it directly to WebGL without having to do any extra work in the binding. In further iterations, CanvasFloatArray was renamed to WebGLFloatArray, which was further renamed to Float32Array and split into a backing ArrayBuffer and the typed Float32Array-view to access the buffer. Types were also added for other integer and floating-point sizes and signed/unsigned variants.
+
+## Design considerations
+
+From the beginning, the design of Typed Arrays was driven by the need to efficiently pass binary data to native libraries. For this reason, the typed array views operate upon aligned data in the host CPU’s __native endianness__. These decisions make it possible for JavaScript to reach maximum performance during operations such as sending vertex data to the graphics card.
+
+DataView is specifically designed for file and network I/O, where the data always has a __specified endianness__, and might not be aligned for maximum performance.
+
+The design split between in-memory data assembly (using the typed array views) and I/O (using DataView) was a conscious one. Modern JavaScript engines optimize the typed array views heavily, and achieve high performance on numerical operations with them. The current levels of performance of the typed array views were made possible by this design decision.
+
+## References
+
+- [Typed Array Specification](http://www.khronos.org/registry/typedarray/specs/latest/0)
+- [jDataView](https://github.com/vjeux/jDataView)
+- [DataStream.js](https://github.com/kig/DataStream.js)
+- [BitView.js](https://github.com/kig/BitView.js)
+- [stringencoding](http://code.google.com/p/stringencoding/)
+- [On webkitSourceAppend](http://blog.gingertech.net/2011/10/)
diff --git a/src/site/content/en/blog/webpack-conclusion/index.md b/src/site/content/en/blog/webpack-conclusion/index.md
new file mode 100644
index 00000000000..2f727c577e6
--- /dev/null
+++ b/src/site/content/en/blog/webpack-conclusion/index.md
@@ -0,0 +1,38 @@
+---
+layout: post
+title: Webpack conclusion
+subhead: |
+  Summing up Webpack
+date: 2018-02-08 
+updated: 2018-08-17 
+authors:
+  - iamakulov
+description: |
+  Summing up Webpack
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Summing up:
+
+* **Cut unnecessary bytes.** Compress everything, strip unused code, be wise when adding
+  dependencies
+* **Split code by routes.** Load only what’s really necessary right now and lazy-load other stuff
+  later
+* **Cache code.** Some parts of your app are updated less often than other ones. Separate these
+  parts into files so that they are only re-downloaded when necessary
+* **Keep track of the size.** Use tools like
+  [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard/) and
+  [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
+  to stay aware how large is your app.
+  Take a fresh look at your app’s performance at whole every few months
+
+Webpack is not the only tool that could help you make an app faster. Consider making your
+application [a Progressive Web App](/progressive-web-apps/) for even better experience and use
+automated profiling tools like [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to get improvement suggestions.
+
+Don’t forget to read [webpack docs](https://webpack.js.org/guides/) – they have plenty of other
+useful information.
+
+And make sure to play [with the training app](https://github.com/GoogleChromeLabs/webpack-training-project)!
diff --git a/src/site/content/en/blog/webpack/index.md b/src/site/content/en/blog/webpack/index.md
new file mode 100644
index 00000000000..2c8ea167941
--- /dev/null
+++ b/src/site/content/en/blog/webpack/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: Webpack
+subhead: |
+  Bundling for modern web applications
+date: 2018-02-08
+updated: 2018-08-17
+authors:
+  - addyosmani
+description: |
+  Bundling for modern web applications
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+
+---
+
+Modern web applications often use a **bundling tool** to create a production
+"bundle" of files (scripts, stylesheets, etc.) that is
+[optimized](/optimizing-content-efficiency-javascript-startup-optimization/),
+[minified](/optimizing-content-efficiency-optimize-encoding-and-transfer/)
+and can be downloaded in less time by your users. In **Web Performance
+Optimization with webpack**, we will walk through how to effectively optimize
+site resources using [webpack](https://webpack.js.org/). This can help users
+load and interact with your sites more quickly.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/14nTVvq5PEzMdpksfenJ.png", alt="Webpack logo.", width="800", height="311" %}
+</figure>
+
+webpack is one of the most popular bundling tools in use today. Taking advantage
+of its features for optimizing modern code,
+[code-splitting](/use-long-term-caching/#lazy-load-code-that-you-dont-need-right-now)
+scripts into critical and non-critical pieces and stripping out unused code (to
+name but a few optimizations) can ensure your app has a minimal network and
+processing cost.
+
+<figure>
+    {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9IVFhBrXUo9CU1Hwl0FK.png", alt="Before and after applying JavaScript
+  optimizations. Time-to-Interactive is improved", width="800", height="575" %}
+  <p>Inspired by <a href="http://www.susielu.com/data-viz/bundle-buddy">
+    Code-splitting in Bundle Buddy</a> by Susie Lu</p>
+</figure>
+
+{% Aside %}
+We created a training app to play with optimizations described in this
+article. Try squeezing the most out of it to practice the tips:
+[`webpack-training-project`](https://github.com/GoogleChromeLabs/webpack-training-project)
+{% endAside %}
+
+Let’s get started by looking at optimizing one of the costliest resources in a
+modern app – JavaScript.
+
+* [Decrease Front-end
+  Size](/decrease-frontend-size)
+* [Make Use of Long-term
+  Caching](/use-long-term-caching)
+* [Monitor and analyze the
+  app](/monitor-and-analyze)
+* [Conclusions](/webpack-conclusion/)
+
+
diff --git a/src/site/content/en/blog/webrtc-basics/index.md b/src/site/content/en/blog/webrtc-basics/index.md
new file mode 100644
index 00000000000..8cdef466143
--- /dev/null
+++ b/src/site/content/en/blog/webrtc-basics/index.md
@@ -0,0 +1,601 @@
+---
+title: Get started with WebRTC
+authors:
+  - samdutton
+date: 2012-07-23
+updated: 2020-11-24
+tags:
+  - blog
+---
+
+{% Blockquote 'Brendan Eich, inventor of JavaScript' %}
+  WebRTC is a new front in the long war for an open and unencumbered web.
+{% endBlockquote %}
+
+## Real-time communication without plugins
+
+Imagine a world where your phone, TV, and computer could communicate on a common platform. Imagine it was easy to add video chat and peer-to-peer data sharing to your web app. That's the vision of WebRTC.
+
+Want to try it out? WebRTC is available on desktop and mobile in Google Chrome, Safari, Firefox, and Opera. A good place to start is the simple video chat app at [appr.tc](https://appr.tc):
+
+1. Open [appr.tc](https://appr.tc) in your browser.
+1. Click **Join** to join a chat room and let the app use your webcam.
+1. Open the URL displayed at the end of the page in a new tab or, better still, on a different computer.
+
+## Quick start
+
+Haven't got time to read this article or only want code?
+
+- To get an overview of WebRTC, watch the following Google I/O video or view [these slides](https://io13webrtc.appspot.com/):
+    {% YouTube id="p2HzZkd2A40" %}
+- If you haven't used the `getUserMedia` API, see [Capture audio and video in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro) and [simpl.info getUserMedia](https://www.simpl.info/getusermedia).
+- To learn about the `RTCPeerConnection` API, see the following example and ['simpl.info RTCPeerConnection'](https://simpl.info/rtcpeerconnection).
+- To learn how WebRTC uses servers for signaling, and firewall and NAT traversal, see the code and console logs from [appr.tc](https://appr.tc).
+- Can’t wait and just want to try WebRTC right now? Try some of the [more-than 20 demos](https://webrtc.github.io/samples) that exercise the WebRTC JavaScript APIs.
+- Having trouble with your machine and WebRTC? Visit the [WebRTC Troubleshooter](https://test.webrtc.org).
+
+Alternatively, jump straight into the [WebRTC codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/), a step-by-step guide that explains how to build a complete video chat app, including a simple signaling server.
+
+## A very short history of WebRTC
+
+One of the last major challenges for the web is to enable human communication through voice and video: real-time communication or RTC for short. RTC should be as natural in a web app as entering text in a text input. Without it, you're limited in your ability to innovate and develop new ways for people to interact.
+
+Historically, RTC has been corporate and complex, requiring expensive audio and video technologies to be licensed or developed in house. Integrating RTC technology with existing content, data, and services has been difficult and time-consuming, particularly on the web.
+
+Gmail video chat became popular in 2008 and, in 2011, Google introduced Hangouts, which uses Talk (as did Gmail). Google bought GIPS, a company that developed many components required for RTC, such as codecs and echo cancellation techniques. Google open sourced the technologies developed by GIPS and engaged with relevant standards bodies at the Internet Engineering Task Force (IETF) and World Wide Web Consortium (W3C) to ensure industry consensus. In May 2011, Ericsson built [the first implementation of WebRTC](https://labs.ericsson.com/developer-community/blog/beyond-html5-peer-peer-conversational-video).
+
+WebRTC implemented open standards for real-time, plugin-free video, audio, and data communication. The need was real:
+
+- Many web services used RTC, but needed downloads, native apps, or plugins. These included Skype, Facebook, and Hangouts.
+- Downloading, installing, and updating plugins is complex, error prone, and annoying.
+- Plugins are difficult to deploy, debug, troubleshoot, test, and maintain - and may require licensing and integration with complex, expensive technology. It's often difficult to persuade people to install plugins in the first place!
+
+The guiding principles of the WebRTC project are that its APIs should be open source, free, standardized, built into web browsers, and more efficient than existing technologies.
+
+## Where are we now?
+WebRTC is used in various apps, such as Google Meet. WebRTC has also been integrated with [WebKitGTK+](https://labs.ericsson.com/developer-community/blog/beyond-html5-conversational-voice-and-video-implemented-webkit-gtk) and Qt native apps.
+
+WebRTC implements these three APIs:
+- `MediaStream` (also known as `getUserMedia`)
+- `RTCPeerConnection`
+- `RTCDataChannel`
+
+The APIs are defined in these two specs:
+
+- [WebRTC](https://w3c.github.io/webrtc-pc/)
+- [`getUserMedia`](https://www.w3.org/TR/mediacapture-streams)
+
+All three APIs are supported on mobile and desktop by Chrome, Safari, Firefox, Edge, and Opera.
+
+`getUserMedia`: For demos and code, see [WebRTC samples](https://webrtc.github.io/samples) or try Chris Wilson's [amazing examples](https://webaudiodemos.appspot.com) that use `getUserMedia` as input for web audio.
+
+`RTCPeerConnection`: For a simple demo and a fully functional video-chat app, see [WebRTC samples Peer connection](https://webrtc.github.io/samples/src/content/peerconnection/pc1/) and [appr.tc](https://appr.tc), respectively. This app uses [adapter.js](https://github.com/webrtc/adapter), a JavaScript shim maintained by Google with help from the [WebRTC community](https://github.com/webrtc/adapter/graphs/contributors), to abstract away browser differences and spec changes.
+
+`RTCDataChannel`: To see this in action, see [WebRTC samples](https://webrtc.github.io/samples/) to check out one of the data-channel demos.
+
+The [WebRTC codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/#0) shows how to use all three APIs to build a simple app for video chat and file sharing.
+
+## Your first WebRTC
+
+WebRTC apps need to do several things:
+
+- Get streaming audio, video, or other data.
+- Get network information, such as IP addresses and ports, and exchange it with other WebRTC clients (known as __peers__) to enable connection, even through [NATs](https://en.wikipedia.org/wiki/NAT_traversal) and firewalls.
+- Coordinate signaling communication to report errors and initiate or close sessions.
+- Exchange information about media and client capability, such as resolution and codecs.
+- Communicate streaming audio, video, or data.
+
+To acquire and communicate streaming data, WebRTC implements the following APIs:
+
+- [`MediaStream`](https://dvcs.w3.org/hg/audio/raw-file/tip/streams/StreamProcessing.html) gets access to data streams, such as from the user's camera and microphone.
+- [`RTCPeerConnection`](https://dev.w3.org/2011/webrtc/editor/webrtc.html#rtcpeerconnection-interface) enables audio or video calling with facilities for encryption and bandwidth management.
+- [`RTCDataChannel`](https://dev.w3.org/2011/webrtc/editor/webrtc.html#rtcdatachannel) enables peer-to-peer communication of generic data.
+
+(There is detailed discussion of the network and signaling aspects of WebRTC later.)
+
+## `MediaStream` API (also known as `getUserMedia` API)
+
+The [`MediaStream` API](https://dev.w3.org/2011/webrtc/editor/getusermedia.html) represents synchronized streams of media. For example, a stream taken from camera and microphone input has synchronized video and audio tracks. (Don't confuse `MediaStreamTrack` with the `<track>` element, which is something [entirely different](https://www.html5rocks.com/en/tutorials/track/basics/).)
+
+Probably the easiest way to understand the `MediaStream` API is to look at it in the wild:
+
+1. In your browser, navigate to [WebRTC samples `getUserMedia`](https://webrtc.github.io/samples/src/content/getusermedia/gum/).
+1. Open the console.
+1. Inspect the `stream` variable, which is in global scope.
+
+Each `MediaStream` has an input, which might be a `MediaStream` generated by `getUserMedia()`, and an output, which might be passed to a video element or an `RTCPeerConnection`.
+
+The `getUserMedia()` method takes a `MediaStreamConstraints` object parameter and returns a `Promise` that resolves to a `MediaStream` object.
+
+Each `MediaStream` has a `label`, such as `'Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ'`. An array of `MediaStreamTrack`s is returned by the `getAudioTracks()` and `getVideoTracks()` methods.
+
+For the [`getUserMedia`](https://webrtc.github.io/samples/src/content/getusermedia/gum/) example, `stream.getAudioTracks()` returns an empty array (because there's no audio) and, assuming a working webcam is connected, `stream.getVideoTracks()` returns an array of one `MediaStreamTrack` representing the stream from the webcam. Each `MediaStreamTrack` has a kind (`'video'` or `'audio'`), a `label` (something like `'FaceTime HD Camera (Built-in)'`), and represents one or more channels of either audio or video. In this case, there is only one video track and no audio, but it is easy to imagine use cases where there are more, such as a chat app that gets streams from the front camera, rear camera, microphone, and an app sharing its screen.
+
+A `MediaStream` can be attached to a video element by setting the [`srcObject` attribute](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/srcObject). Previously, this was done by setting the  `src` attribute to an object URL created with `URL.createObjectURL()`, but [this has been deprecated](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL).
+
+{% Aside %}
+The `MediaStreamTrack` is actively using the camera, which takes resources, and keeps the camera open and camera light on. When you are no longer using a track, make sure to call `track.stop()` so that the camera can be closed.
+{% endAside %}
+
+`getUserMedia` can also be used [as an input node for the Web Audio API](https://developer.chrome.com/blog/live-web-audio-input-enabled/):
+
+```js
+// Cope with browser differences.
+let audioContext;
+if (typeof AudioContext === 'function') {
+  audioContext = new AudioContext();
+} else if (typeof webkitAudioContext === 'function') {
+  audioContext = new webkitAudioContext(); // eslint-disable-line new-cap
+} else {
+  console.log('Sorry! Web Audio not supported.');
+}
+
+// Create a filter node.
+var filterNode = audioContext.createBiquadFilter();
+// See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
+filterNode.type = 'highpass';
+// Cutoff frequency. For highpass, audio is attenuated below this frequency.
+filterNode.frequency.value = 10000;
+
+// Create a gain node to change audio volume.
+var gainNode = audioContext.createGain();
+// Default is 1 (no change). Less than 1 means audio is attenuated
+// and vice versa.
+gainNode.gain.value = 0.5;
+
+navigator.mediaDevices.getUserMedia({audio: true}, (stream) => {
+  // Create an AudioNode from the stream.
+  const mediaStreamSource =
+    audioContext.createMediaStreamSource(stream);
+  mediaStreamSource.connect(filterNode);
+  filterNode.connect(gainNode);
+  // Connect the gain node to the destination. For example, play the sound.
+  gainNode.connect(audioContext.destination);
+});
+```
+
+Chromium-based apps and extensions can also incorporate `getUserMedia`. Adding `audioCapture` and/or `videoCapture` [permissions](https://developer.chrome.com/extensions/permission_warnings) to the manifest enables permission to be requested and granted only once upon installation. Thereafter, the user is not asked for permission for camera or microphone access.
+
+Permission only has to be granted once for `getUserMedia()`. First time around, an Allow button is displayed in the browser's [infobar](https://dev.chromium.org/user-experience/infobars). HTTP access for `getUserMedia()` was deprecated by Chrome at the end of 2015 due to it being classified as a [Powerful feature](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins).
+
+The intention is potentially to enable a `MediaStream` for any streaming data source, not only a camera or microphone. This would enable streaming from stored data or arbitrary data sources, such as sensors or other inputs.
+
+`getUserMedia()` really comes to life in combination with other JavaScript APIs and libraries:
+
+- [Webcam Toy](https://webcamtoy.com/app/) is a photobooth app that uses WebGL to add weird and wonderful effects to photos that can be shared or saved locally.
+- [FaceKat](https://www.auduno.com/2012/06/15/head-tracking-with-webrtc/) is a face-tracking game built with [headtrackr.js](https://github.com/auduno/headtrackr).
+- [ASCII Camera](https://idevelop.ro/ascii-camera/) uses the Canvas API to generate ASCII images.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/B99U1vBIpQofujY67roL.png", alt="ASCII image generated by idevelop.ro/ascii-camera", width="800", height="661" %}
+  <figcaption>gUM ASCII art!</figcaption>
+</figure>
+
+### Constraints
+
+[Constraints](https://tools.ietf.org/html/draft-alvestrand-constraints-resolution-00#page-4) can be used to set values for video resolution for `getUserMedia()`. This also allows [support for other constraints](https://w3c.github.io/mediacapture-main/getusermedia.html#the-model-sources-sinks-constraints-and-settings), such as aspect ratio; facing mode (front or back camera); frame rate, height and width; and an [`applyConstraints()`](https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediastreamtrack-applyconstraints) method.
+
+For an example, see [WebRTC samples `getUserMedia`: select resolution](https://webrtc.github.io/samples/src/content/getusermedia/resolution).
+
+{% Aside 'gotcha' %}
+`getUserMedia` constraints may affect the available configurations of a shared resource. For example, if a camera was opened in 640 x 480 mode by one tab, another tab will not be able to use constraints to open it in a higher-resolution mode because it can only be opened in one mode. Note that this is an implementation detail. It would be possible to let the second tab reopen the camera in a higher resolution mode and use video processing to downscale the video track to 640 x 480 for the first tab, but this has not been implemented.
+{% endAside %}
+
+Setting a disallowed constraint value gives a `DOMException` or an `OverconstrainedError` if, for example, a resolution requested is not available. To see this in action, see [WebRTC samples `getUserMedia`: select resolution](https://webrtc.github.io/samples/src/content/getusermedia/resolution/) for a demo.
+
+#### Screen and tab capture
+
+Chrome apps also make it possible to share a live video of a single browser tab or the entire desktop through [`chrome.tabCapture`](https://developer.chrome.com/dev/extensions/tabCapture) and [`chrome.desktopCapture`](https://developer.chrome.com/extensions/desktopCapture) APIs. (For a demo and more information, see [Screensharing with WebRTC](https://developer.chrome.com/blog/screensharing-with-webrtc). The article is a few years old, but it's still interesting.)
+
+It's also possible to use screen capture as a `MediaStream` source in Chrome using the experimental `chromeMediaSource` constraint. Note that screen capture requires HTTPS and should only be used for development due to it being enabled through a command-line flag as explained in this [post](https://groups.google.com/forum/#!msg/discuss-webrtc/TPQVKZnsF5g/Hlpy8kqaLnEJ).
+
+## Signaling: Session control, network, and media information
+
+WebRTC uses `RTCPeerConnection` to communicate streaming data between browsers (also known as peers), but also needs a mechanism to coordinate communication and to send control messages, a process known as signaling. Signaling methods and protocols are __not__ specified by WebRTC. Signaling is not part of the `RTCPeerConnection` API.
+
+Instead, WebRTC app developers can choose whatever messaging protocol they prefer, such as SIP or XMPP, and any appropriate duplex (two-way) communication channel. The [appr.tc](https://appr.tc) example uses XHR and the Channel API as the signaling mechanism. The [codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/#0) uses [Socket.io](https://socket.io) running on a [Node server](https://nodejs.org/).
+
+Signaling is used to exchange three types of information:
+
+- Session control messages: to initialize or close communication and report errors.
+- Network configuration: to the outside world, what's your computer's IP address and port?
+- Media capabilities: what codecs and resolutions can be handled by your browser and the browser it wants to communicate with?
+
+The exchange of information through signaling must have completed successfully before peer-to-peer streaming can begin.
+
+For example, imagine Alice wants to communicate with Bob. Here's a code sample from the [W3C WebRTC spec](https://w3c.github.io/webrtc-pc/#simple-peer-to-peer-example), which shows the signaling process in action. The code assumes the existence of some signaling mechanism created in the `createSignalingChannel()` method. Also note that on Chrome and Opera, `RTCPeerConnection` is currently prefixed.
+
+```js
+// handles JSON.stringify/parse
+const signaling = new SignalingChannel();
+const constraints = {audio: true, video: true};
+const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
+const pc = new RTCPeerConnection(configuration);
+
+// Send any ice candidates to the other peer.
+pc.onicecandidate = ({candidate}) => signaling.send({candidate});
+
+// Let the "negotiationneeded" event trigger offer generation.
+pc.onnegotiationneeded = async () => {
+  try {
+    await pc.setLocalDescription(await pc.createOffer());
+    // Send the offer to the other peer.
+    signaling.send({desc: pc.localDescription});
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+// Once remote track media arrives, show it in remote video element.
+pc.ontrack = (event) => {
+  // Don't set srcObject again if it is already set.
+  if (remoteView.srcObject) return;
+  remoteView.srcObject = event.streams[0];
+};
+
+// Call start() to initiate.
+async function start() {
+  try {
+    // Get local stream, show it in self-view, and add it to be sent.
+    const stream =
+      await navigator.mediaDevices.getUserMedia(constraints);
+    stream.getTracks().forEach((track) =>
+      pc.addTrack(track, stream));
+    selfView.srcObject = stream;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+signaling.onmessage = async ({desc, candidate}) => {
+  try {
+    if (desc) {
+      // If you get an offer, you need to reply with an answer.
+      if (desc.type === 'offer') {
+        await pc.setRemoteDescription(desc);
+        const stream =
+          await navigator.mediaDevices.getUserMedia(constraints);
+        stream.getTracks().forEach((track) =>
+          pc.addTrack(track, stream));
+        await pc.setLocalDescription(await pc.createAnswer());
+        signaling.send({desc: pc.localDescription});
+      } else if (desc.type === 'answer') {
+        await pc.setRemoteDescription(desc);
+      } else {
+        console.log('Unsupported SDP type.');
+      }
+    } else if (candidate) {
+      await pc.addIceCandidate(candidate);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+};
+```
+
+First, Alice and Bob exchange network information. (The expression __finding candidates__ refers to the process of finding network interfaces and ports using the ICE framework.)
+
+1. Alice creates an `RTCPeerConnection` object with an `onicecandidate` handler, which runs when network candidates become available.
+1. Alice sends serialized candidate data to Bob through whatever signaling channel they are using, such as WebSocket or some other mechanism.
+1. When Bob gets a candidate message from Alice, he calls `addIceCandidate` to add the candidate to the remote peer description.
+
+WebRTC clients (also known as **peers**, or Alice and Bob in this example) also need to ascertain and exchange local and remote audio and video media information, such as resolution and codec capabilities. Signaling to exchange media configuration information proceeds by exchanging an __offer__ and an __answer__ using the Session Description Protocol (SDP):
+
+1. Alice runs the `RTCPeerConnection` `createOffer()` method. The return from this is passed an `RTCSessionDescription` - Alice's local session description.
+1. In the callback, Alice sets the local description using `setLocalDescription()` and then sends this session description to Bob through their signaling channel. Note that `RTCPeerConnection` won't start gathering candidates until `setLocalDescription()` is called. This is codified in the [JSEP IETF draft](https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-4.2.4).
+1. Bob sets the description Alice sent him as the remote description using `setRemoteDescription()`.
+1. Bob runs the `RTCPeerConnection` `createAnswer()` method, passing it the remote description he got from Alice so a local session can be generated that is compatible with hers. The `createAnswer()` callback is passed an `RTCSessionDescription`. Bob sets that as the local description and sends it to Alice.
+1. When Alice gets Bob's session description, she sets that as the remote description with `setRemoteDescription`.
+1. Ping!
+
+{% Aside %}
+Make sure to allow the `RTCPeerConnection` to be garbage collected by calling `close()` when it's no longer needed. Otherwise, threads and connections are kept alive. It's possible to leak heavy resources in WebRTC!
+{% endAside %}
+
+`RTCSessionDescription` objects are blobs that conform to the [Session Description Protocol](https://en.wikipedia.org/wiki/Session_Description_Protocol), SDP. Serialized, an SDP object looks like this:
+
+```js
+v=0
+o=- 3883943731 1 IN IP4 127.0.0.1
+s=
+t=0 0
+a=group:BUNDLE audio video
+m=audio 1 RTP/SAVPF 103 104 0 8 106 105 13 126
+
+// ...
+
+a=ssrc:2223794119 label:H4fjnMzxy3dPIgQ7HxuCTLb4wLLLeRHnFxh810
+```
+
+The acquisition and exchange of network and media information can be done simultaneously, but both processes must have completed before audio and video streaming between peers can begin.
+
+The offer/answer architecture previously described is called [JavaScript Session Establishment Protocol](https://rtcweb-wg.github.io/jsep/), or JSEP. (There's an excellent animation explaining the process of signaling and streaming in [Ericsson's demo video](https://www.ericsson.com/research-blog/context-aware-communication/beyond-html5-peer-peer-conversational-video/) for its first WebRTC implementation.)
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/n9vVzOGhttG2TljRbdxN.png", alt="JSEP architecture diagram", width="800", height="499" %}
+  <figcaption>JSEP architecture</figcaption>
+</figure>
+
+Once the signaling process has completed successfully, data can be streamed directly peer to peer, between the caller and callee - or, if that fails, through an intermediary relay server (more about that later). Streaming is the job of `RTCPeerConnection`.
+
+## RTCPeerConnection
+
+`RTCPeerConnection` is the WebRTC component that handles stable and efficient communication of streaming data between peers.
+
+The following is a WebRTC architecture diagram showing the role of `RTCPeerConnection`. As you will notice, the green parts are complex!
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/q28219742nq0IXphvneQ.png", alt="WebRTC architecture diagram", width="740", height="482" %}
+<figcaption>WebRTC architecture (from <a href="https://webrtc.github.io/webrtc-org/architecture/" title="webrtc.org: architecture diagram">webrtc.org</a>)</figcaption>
+</figure>
+
+From a JavaScript perspective, the main thing to understand from this diagram is that `RTCPeerConnection` shields web developers from the myriad complexities that lurk beneath. The codecs and protocols used by WebRTC do a huge amount of work to make real-time communication possible, even over unreliable networks:
+
+- Packet-loss concealment
+- Echo cancellation
+- Bandwidth adaptivity
+- Dynamic jitter buffering
+- Automatic gain control
+- Noise reduction and suppression
+- Image-cleaning
+
+The previous W3C code shows a simplified example of WebRTC from a signaling perspective. The following are walkthroughs of two working WebRTC apps. The first is a simple example to demonstrate `RTCPeerConnection` and the second is a fully operational video chat client.
+
+### RTCPeerConnection without servers
+
+The following code is taken from [WebRTC samples Peer connection](https://webrtc.github.io/samples/src/content/peerconnection/pc1/), which has local __and__ remote `RTCPeerConnection` (and local and remote video) on one web page. This doesn't constitute anything very useful - caller and callee are on the same page - but it does make the workings of the `RTCPeerConnection` API a little clearer because the `RTCPeerConnection` objects on the page can exchange data and messages directly without having to use intermediary signaling mechanisms.
+
+In this example, `pc1` represents the local peer (caller) and `pc2` represents the remote peer (callee).
+
+### Caller
+
+1. Create a new `RTCPeerConnection` and add the stream from `getUserMedia()`:
+    ```js
+    // Servers is an optional configuration file. (See TURN and STUN discussion later.)
+    pc1 = new RTCPeerConnection(servers);
+    // ...
+    localStream.getTracks().forEach((track) => {
+    pc1.addTrack(track, localStream);
+    });
+
+1. Create an offer and set it as the local description for `pc1` and as the remote description for `pc2`. This can be done directly in the code without using signaling because both caller and callee are on the same page:
+    ```js
+    pc1.setLocalDescription(desc).then(() => {
+        onSetLocalSuccess(pc1);
+        },
+        onSetSessionDescriptionError
+    );
+    trace('pc2 setRemoteDescription start');
+    pc2.setRemoteDescription(desc).then(() => {
+        onSetRemoteSuccess(pc2);
+        },
+        onSetSessionDescriptionError
+    );
+    ```
+
+### Callee
+
+1. Create `pc2` and, when the stream from `pc1` is added, display it in a video element:
+    ```js
+    pc2 = new RTCPeerConnection(servers);
+    pc2.ontrack = gotRemoteStream;
+    //...
+    function gotRemoteStream(e){
+    vid2.srcObject = e.stream;
+    }
+    ```
+
+### `RTCPeerConnection` API plus servers
+
+In the real world, WebRTC needs servers, however simple, so the following can happen:
+
+- Users discover each other and exchange real-world details, such as names.
+- WebRTC client apps (peers) exchange network information.
+- Peers exchange data about media, such as video format and resolution.
+- WebRTC client apps traverse [NAT gateways](https://en.wikipedia.org/wiki/NAT_traversal) and firewalls.
+
+In other words, WebRTC needs four types of server-side functionality:
+
+- User discovery and communication
+- Signaling
+- NAT/firewall traversal
+- Relay servers in case peer-to-peer communication fails
+
+NAT traversal, peer-to-peer networking, and the requirements for building a server app for user discovery and signaling are beyond the scope of this article. Suffice to say that the [STUN](https://en.wikipedia.org/wiki/STUN) protocol and its extension, [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relay_NAT), are used by the [ICE](https://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment) framework to enable `RTCPeerConnection` to cope with NAT traversal and other network vagaries.
+
+ICE is a framework for connecting peers, such as two video chat clients. Initially, ICE tries to connect peers __directly__ with the lowest possible latency through UDP. In this process, STUN servers have a single task: to enable a peer behind a NAT to find out its public address and port. (For more information about STUN and TURN, see [Build the backend services needed for a WebRTC app](https://www.html5rocks.com/tutorials/webrtc/infrastructure/).)
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9ECRhjzepzfBJ9FdsKpX.png", alt="Finding connection candidates", width="800", height="499" %}
+  <figcaption>Finding connection candidates</figcaption>
+</figure>
+
+If UDP fails, ICE tries TCP. If direct connection fails - in particular because of enterprise NAT traversal and firewalls - ICE uses an intermediary (relay) TURN server. In other words, ICE first uses STUN with UDP to directly connect peers and, if that fails, falls back to a TURN relay server. The expression __finding candidates__ refers to the process of finding network interfaces and ports.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1RuU3YjeG2QvudekRJcG.png", alt="WebRTC data pathways", width="800", height="499" %}
+  <figcaption>WebRTC data pathways</figcaption>
+</figure>
+
+WebRTC engineer Justin Uberti provides more information about ICE, STUN, and TURN in the [2013 Google I/O WebRTC presentation](https://www.youtube.com/watch?v=p2HzZkd2A40&t=21m12s). (The presentation [slides](https://io13webrtc.appspot.com/#52) give examples of TURN and STUN server implementations.)
+
+#### A simple video-chat client
+
+A good place to try WebRTC, complete with signaling and NAT/firewall traversal using a STUN server, is the video-chat demo at [appr.tc](https://appr.tc). This app uses [adapter.js](https://github.com/webrtc/adapter), a shim to insulate apps from spec changes and prefix differences.
+
+The code is deliberately verbose in its logging. Check the console to understand the order of events. The following is a detailed walkthrough of the code.
+
+{% Aside %}
+If you find this somewhat baffling, you may prefer the [WebRTC codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/). This step-by-step guide explains how to build a complete video-chat app, including a simple signaling server running on a [Node server](https://nodejs.org/).
+{% endAside %}
+
+### Network topologies
+
+WebRTC, as currently implemented, only supports one-to-one communication, but could be used in more complex network scenarios, such as with multiple peers each communicating with each other directly or through a [Multipoint Control Unit](https://en.wikipedia.org/wiki/Multipoint_control_unit) (MCU), a server that can handle large numbers of participants and do selective stream forwarding, and mixing or recording of audio and video.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Bhswo1WPoUT0QK9qKPmo.png", alt="Multipoint Control Unit topology diagram", width="800", height="585" %}
+  <figcaption>Multipoint Control Unit topology example</figcaption>
+</figure>
+
+Many existing WebRTC apps only demonstrate communication between web browsers, but gateway servers can enable a WebRTC app running on a browser to interact with devices, such as  [telephones](https://en.wikipedia.org/wiki/Public_switched_telephone_network) (also known as [PSTN](https://en.wikipedia.org/wiki/Public_switched_telephone_network)) and with [VOIP](https://en.wikipedia.org/wiki/Voice_over_IP) systems. In May 2012, Doubango Telecom open sourced the [sipml5 SIP client](https://sipml5.org/) built with WebRTC and WebSocket, which (among other potential uses) enables video calls between browsers and apps running on iOS and Android. At Google I/O, Tethr and Tropo demonstrated [a framework for disaster communications](https://tethr.tumblr.com/) __in a briefcase__ using an [OpenBTS cell](https://en.wikipedia.org/wiki/OpenBTS) to enable communications between feature phones and computers through WebRTC. Telephone communication without a carrier!
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oc1xnYE727oqMPYfWnt9.jpg", alt="Tethr/Tropo demo at Google I/O 2012", width="800", height="598" %}
+  <figcaption>Tethr/Tropo: Disaster communications in a briefcase</figcaption>
+</figure>
+
+## `RTCDataChannel` API<
+
+As well as audio and video, WebRTC supports real-time communication for other types of data.
+
+The `RTCDataChannel` API enables peer-to-peer exchange of arbitrary data with low latency and high throughput. For single-page demos and to learn how to build a simple file-transfer app, see [WebRTC samples](https://webrtc.github.io/samples/#datachannel) and the [WebRTC codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/#0), respectively.
+
+There are many potential use cases for the API, including:
+
+- Gaming
+- Remote desktop apps
+- Real-time text chat
+- File transfer
+- Decentralized networks
+
+The API has several features to make the most of `RTCPeerConnection` and enable powerful and flexible peer-to-peer communication:
+
+- Leveraging of `RTCPeerConnection` session setup
+- Multiple simultaneous channels with prioritization
+- Reliable and unreliable delivery semantics
+- Built-in security (DTLS) and congestion control
+- Ability to use with or without audio or video
+
+The syntax is deliberately similar to WebSocket with a `send()` method and a `message` event:
+
+```js
+const localConnection = new RTCPeerConnection(servers);
+const remoteConnection = new RTCPeerConnection(servers);
+const sendChannel =
+  localConnection.createDataChannel('sendDataChannel');
+
+// ...
+
+remoteConnection.ondatachannel = (event) => {
+  receiveChannel = event.channel;
+  receiveChannel.onmessage = onReceiveMessage;
+  receiveChannel.onopen = onReceiveChannelStateChange;
+  receiveChannel.onclose = onReceiveChannelStateChange;
+};
+
+function onReceiveMessage(event) {
+  document.querySelector("textarea#send").value = event.data;
+}
+
+document.querySelector("button#send").onclick = () => {
+  var data = document.querySelector("textarea#send").value;
+  sendChannel.send(data);
+};
+```
+
+Communication occurs directly between browsers, so `RTCDataChannel` can be much faster than WebSocket even if a relay (TURN) server is required when hole-punching to cope with firewalls and NATs fails.
+
+`RTCDataChannel` is available in Chrome, Safari, Firefox, Opera, and Samsung Internet. The [Cube Slam](https://experiments.withgoogle.com/cube-slam) game uses the API to communicate game state. Play a friend or play the bear! The innovative platform [Sharefest](https://github.com/Peer5/ShareFest) enabled file sharing through `RTCDataChannel` and [peerCDN](https://techcrunch.com/2013/12/17/yahoo-acquires-peercdn/) offered a glimpse of how WebRTC could enable peer-to-peer content distribution.
+
+For more information about `RTCDataChannel`, take a look at the IETF's [draft protocol spec](https://tools.ietf.org/html/draft-jesup-rtcweb-data-protocol-00).
+
+## Security
+
+There are several ways a real-time communication app or plugin might compromise security. For example:
+
+- Unencrypted media or data might be intercepted between browsers, or between a browser and a server.
+- An app might record and distribute video or audio without the user knowing.
+- Malware or viruses might be installed alongside an apparently innocuous plugin or app.
+
+WebRTC has several features to avoid these problems:
+
+- WebRTC implementations use secure protocols, such as [DTLS](https://en.wikipedia.org/wiki/Datagram_Transport_Layer_Security) and [SRTP](https://en.wikipedia.org/wiki/Secure_Real-time_Transport_Protocol).
+- Encryption is mandatory for all WebRTC components, including signaling mechanisms.
+- WebRTC is not a plugin. Its components run in the browser sandbox and not in a separate process. Components do not require separate installation and are updated whenever the browser is updated.
+- Camera and microphone access must be granted explicitly and, when the camera or microphone are running, this is clearly shown by the user interface.
+
+A full discussion of security for streaming media is out of scope for this article. For more information, see the [Proposed WebRTC Security Architecture](https://www.ietf.org/proceedings/82/slides/rtcweb-13.pdf) proposed by the IETF.
+
+## In conclusion
+
+The APIs and standards of WebRTC can democratize and decentralize tools for content creation and communication, including telephony, gaming, video production, music making, and news gathering.
+
+Technology doesn't get much more [disruptive](https://en.wikipedia.org/wiki/Disruptive_innovation) than this.
+
+As blogger Phil Edholm [put it](https://www.nojitter.com/webrtc-it-game-changer), "Potentially, WebRTC and HTML5 could enable the same transformation for real-time communication that the original browser did for information."
+
+## Developer tools
+
+- WebRTC stats for an ongoing session can be found at:
+    - about://webrtc-internals in Chrome
+    - opera://webrtc-internals in Opera
+    - about:webrtc in Firefox
+        <figure>
+          {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/URO18HhhtphzDB2n8qu8.png", alt="chrome://webrtc-internals page", width="800", height="538" %}
+          <figcaption>chrome://webrtc-internals screenshot</figcaption>
+        </figure>
+- Cross browser [interop notes](https://webrtc.github.io/webrtc-org/web-apis/interop/)
+- [adapter.js](https://github.com/webrtc/adapter) is a JavaScript shim for WebRTC maintained by Google with help from the [WebRTC community](https://github.com/webrtc/adapter/graphs/contributors) that abstracts vendor prefixes, browser differences, and spec changes.
+- To learn more about WebRTC signaling processes, check the [appr.tc](https://appr.tc) log output to the console.
+- If it's all too much, you may prefer to use a [WebRTC framework](https://io13webrtc.appspot.com/#69) or even a complete [WebRTC service](https://io13webrtc.appspot.com/#72).
+- Bug reports and feature requests are always appreciated:
+    - [WebRTC bugs](https://code.google.com/p/webrtc/issues/entry)
+    - [Chrome bugs](https://www.crbug.com/new)
+    - [Opera bugs](https://bugs.opera.com/wizard/)
+    - [Firefox bugs](https://bugzilla.mozilla.org/)
+    - [WebRTC demo bugs](https://github.com/webrtc/samples/issues/new)
+    - [Adapter.js bugs](https://github.com/webrtcHacks/adapter/issues/new)
+
+## Learn more
+
+- [Justin Uberti's WebRTC session at Google I/O 2012](https://www.youtube.com/watch?v=E8C8ouiXHHk)
+- Alan B. Johnston and Daniel C. Burnett maintain a WebRTC book now in its third edition in print and eBook formats at [webrtcbook.com](https://www.webrtcbook.com).
+- [webrtc.org](https://www.webrtc.org/) is home to all things WebRTC, including demos, documentation, and discussion.
+- [discuss-webrtc](https://groups.google.com/forum/?fromgroups#!forum/discuss-webrtc) is a Google Group for technical WebRTC discussion.
+- [@webrtc](https://twitter.com/webrtc)
+- Google Developers [Talk documentation](https://developers.google.com/talk/talk_developers_home) provides more information about NAT traversal, STUN, relay servers, and candidate gathering.
+- [WebRTC on GitHub](https://github.com/webrtc)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/webrtc) is a good place to look for answers and ask questions about WebRTC.
+
+## Standards and protocols
+
+- [The WebRTC W3C Editor's Draft](https://dev.w3.org/2011/webrtc/editor/webrtc.html)
+- [W3C Editor's Draft: Media Capture and Streams](https://dev.w3.org/2011/webrtc/editor/getusermedia.html) (also known as `getUserMedia`)
+- [IETF Working Group Charter](https://tools.ietf.org/wg/rtcweb/charters)
+- [IETF WebRTC Data Channel Protocol Draft](https://tools.ietf.org/html/draft-jesup-rtcweb-data-protocol-01)
+- [IETF JSEP Draft](https://tools.ietf.org/html/draft-uberti-rtcweb-jsep-02)
+- [IETF proposed standard for ICE](https://tools.ietf.org/html/rfc5245)
+- IETF RTCWEB Working Group Internet-Draft: [Web Real-Time Communication Use-cases and Requirements](https://tools.ietf.org/html/draft-ietf-rtcweb-use-cases-and-requirements-10)
+
+## WebRTC support summary
+
+### `MediaStream` and `getUserMedia` APIs
+
+- Chrome desktop 18.0.1008 and higher; Chrome for Android 29 and higher
+- Opera 18 and higher; Opera for Android 20 and higher
+- Opera 12, Opera Mobile 12 (based on the Presto engine)
+- Firefox 17 and higher
+- Microsoft Edge 16 and higher
+- Safari 11.2 and higher on iOS, and 11.1 and higher on MacOS
+- UC 11.8 and higher on Android
+- Samsung Internet 4 and higher
+
+### `RTCPeerConnection` API
+
+- Chrome desktop 20 and higher; Chrome for Android 29 and higher (flagless)
+- Opera 18 and higher (on by default); Opera for Android 20 and higher (on by default)
+- Firefox 22 and higher (on by default)
+- Microsoft Edge 16 and higher
+- Safari 11.2 and higher on iOS, and 11.1 and higher on MacOS
+- Samsung Internet 4 and higher
+
+### `RTCDataChannel` API
+
+- Experimental version in Chrome 25, but more stable (and with Firefox interoperability) in Chrome 26 and higher; Chrome for Android 29 and higher
+- Stable version (and with Firefox interoperability) in Opera 18 and higher; Opera for Android 20 and higher
+- Firefox 22 and higher (on by default)
+
+For more detailed information about cross-platform support for APIs, such as `getUserMedia` and `RTCPeerConnection`, see [caniuse.com](https://caniuse.com) and [Chrome Platform Status](https://chromestatus.com).
+
+Native APIs for `RTCPeerConnection` are also available at [documentation on webrtc.org](https://webrtc.googlesource.com/src/+/refs/heads/master/docs/native-code/index.md).
diff --git a/src/site/content/en/blog/webrtc-datachannels/index.md b/src/site/content/en/blog/webrtc-datachannels/index.md
new file mode 100644
index 00000000000..e74b9b06cb6
--- /dev/null
+++ b/src/site/content/en/blog/webrtc-datachannels/index.md
@@ -0,0 +1,201 @@
+---
+title: Send data between browsers with WebRTC data channels
+authors:
+  - samdutton
+  - danristic
+date: 2014-02-04
+updated: 2020-11-24
+tags:
+  - blog
+---
+
+Sending data between two browsers for communication, gaming, or file transfer can be a rather involved process. It requires setting up and paying for a server to relay data, and perhaps scaling this to multiple data centers. In this scenario, there is potential for high latency and it's difficult to keep data private.
+
+These problems can be alleviated by using WebRTC's `RTCDataChannel` API to transfer data directly from one peer to another. This article covers the basics of how to set up and use data channels, as well as the common use cases on the web today.
+
+{% Aside %}
+To make the most of this article, you need some knowledge of the `RTCPeerConnection` API, and an understanding of how STUN, TURN, and signaling work. For more information, see [Getting Started With WebRTC](https://www.html5rocks.com/tutorials/webrtc/basics/).
+{% endAside %}
+
+## Why another data channel?
+
+We have [WebSocket](https://www.html5rocks.com/tutorials/websockets/basics/), [AJAX](https://www.html5rocks.com/tutorials/file/xhr2/) and [Server Sent Events](https://www.html5rocks.com/tutorials/eventsource/basics/). Why do we need another communication channel? WebSocket is bidirectional, but all these technologies are designed for communication to or from a server.
+
+`RTCDataChannel` takes a different approach:
+
+- It works with the `RTCPeerConnection` API, which enables peer-to-peer connectivity. This can result in lower latency - no intermediary server and fewer 'hops'.
+- `RTCDataChannel` uses [Stream Control Transmission Protocol](https://en.wikipedia.org/wiki/Stream_Control_Transmission_Protocol#Features) (SCTP), allowing configurable delivery semantics-out-of-order delivery and retransmit configuration.
+
+`RTCDataChannel` is available now with SCTP support on desktop and Android in Google Chrome, Opera, and Firefox.
+
+## A caveat: Signaling, STUN, and TURN
+
+WebRTC enables peer-to-peer communication, but it still needs servers for **signaling** to exchange media and network metadata to bootstrap a peer connection. 
+
+WebRTC copes with NATs and firewalls with: 
+
+- [The ICE framework](https://www.html5rocks.com/tutorials/webrtc/basics/#ice) to establish the best possible network path between peers.
+- [STUN servers](https://www.html5rocks.com/tutorials/webrtc/basics/#stun) to ascertain a publicly accessible IP and port for each peer.
+- [TURN servers](https://webrtc.org/getting-started/turn-server) if direct connection fails and data relaying is required.
+
+For more information about how WebRTC works with servers for signaling and networking, see [WebRTC inthe real world: STUN, TURN, and signaling](https://www.html5rocks.com/tutorials/webrtc/infrastructure/).
+
+## The capabilities
+
+The `RTCDataChannel` API supports a flexible set of data types. The API is designed to mimic WebSocket exactly, and `RTCDataChannel` supports [strings](https://www.w3.org/TR/webrtc/#widl-RTCDataChannel-send-void-DOMString-data) as well as some of the binary types in JavaScript, such as [Blob](https://www.w3.org/TR/webrtc/#widl-RTCDataChannel-send-void-Blob-data), [ArrayBuffer](https://www.w3.org/TR/webrtc/#widl-RTCDataChannel-send-void-ArrayBuffer-data), and [ArrayBufferView](https://www.w3.org/TR/webrtc/#widl-RTCDataChannel-send-void-ArrayBufferView-data). These types can be helpful when working with file transfer and multiplayer gaming.
+
+`RTCDataChannel` can work in unreliable and unordered mode (analogous to User Datagram Protocol or UDP), reliable and ordered mode (analogous to Transmission Control Protocol or TCP), and partial reliable modes:
+
+- __Reliable and ordered mode guarantees the transmission of messages and also the order in which they are delivered__. This takes extra overhead, thus potentially making this mode slower. 
+- __Unreliable and unordered mode does not guarantee every message gets to the other side nor what order they get there in__. This removes the overhead, allowing this mode to work much faster.
+- __Partial reliable mode guarantees the transmission of message under a specific condition, such as a retransmit timeout or a maximum amount of retransmissions__. The ordering of messages is also configurable.
+
+Performance for the first two modes is about the same when there are no packet losses. However, in reliable and ordered mode, a lost packet causes other packets to get blocked behind it, and the lost packet might be stale by the time that it is retransmitted and arrives. It is, of course, possible to use multiple data channels within the same app, each with their own reliable or unreliable semantics.
+
+Here's a helpful table from [High Performance Browser Networking](https://www.oreilly.com/library/view/high-performance-browser/9781449344757/) by [Ilya Grigorik](https://www.igvita.com/):
+
+<table>
+    <thead>
+        <th>
+            <td>TCP</td><td>UDP</td><td>SCTP</td>
+        </th>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Reliability</td><td>Reliable</td><td>Unreliable</td><td>Configurable</td>
+        </tr>
+        <tr>
+            <td>Delivery</td><td>Ordered</td><td>Unordered</td><td>Configurable</td>
+        </tr>
+        <tr>
+            <td>Transmission</td><td>Byte-oriented</td><td>Message-oriented</td><td>Message-oriented</td>
+        </tr>
+        <tr>
+            <td>Flow control</td><td>Yes</td><td>No</td><td>Yes</td>
+        </tr>
+        <tr>
+            <td>Congestion control</td><td>Yes</td><td>No</td><td>Yes</td>
+        </tr>
+    <tbody>
+</table>
+
+Next, you learn how to configure `RTCDataChannel` to use reliable and ordered or unreliable and unordered mode.
+
+## Configuring data channels
+
+There are several simple demos of `RTCDataChannel` online:
+
+- [simpl.info `RTCDataChannel`](https://simpl.info/dc)
+- [WebRTC samples Transmit text](https://webrtc.github.io/samples/src/content/datachannel/basic/)
+- [WebRTC samples Transfer a file](https://webrtc.github.io/samples/src/content/datachannel/filetransfer/)
+
+In these examples, the browser makes a peer connection to itself, then creates a data channel and sends a message through the peer connection. It is then creating a data channel and sending the message along the peer connection. Finally, your message appears in the box on the other side of the page!
+
+The code to get started with this is short:
+
+```js
+const peerConnection = new RTCPeerConnection();
+
+// Establish your peer connection using your signaling channel here
+const dataChannel =
+  peerConnection.createDataChannel("myLabel", dataChannelOptions);
+
+dataChannel.onerror = (error) => {
+  console.log("Data Channel Error:", error);
+};
+
+dataChannel.onmessage = (event) => {
+  console.log("Got Data Channel Message:", event.data);
+};
+
+dataChannel.onopen = () => {
+  dataChannel.send("Hello World!");
+};
+
+dataChannel.onclose = () => {
+  console.log("The Data Channel is Closed");
+};
+```
+
+The `dataChannel` object is created from an already-established peer connection. It can be created before or after signaling happens. You then pass in a label to distinguish this channel from others and a set of optional configuration settings:
+
+```js
+const dataChannelOptions = {
+  ordered: false, // do not guarantee order
+  maxPacketLifeTime: 3000, // in milliseconds
+};
+```
+
+It is also possible to add a `maxRetransmits` option (the number of times to try before failing), but you can only specify maxRetransmits or maxPacketLifeTime, not both. For UDP semantics, set `maxRetransmits` to `0` and `ordered` to `false`. For more information, see these IETF RFCs: [Stream Control Transmission Protocol](https://tools.ietf.org/html/rfc4960) and [Stream Control Transmission Protocol Partial Reliability Extension](https://tools.ietf.org/html/rfc3758).
+
+- `ordered`: if the data channel should guarantee order or not
+- `maxPacketLifeTime`: the maximum time to try and retransmit a failed message
+- `maxRetransmits`: the maximum number of times to try and retransmit a failed message
+- `protocol`: allows a subprotocol to be used, which provides meta information toward the app
+- `negotiated`: if set to true, removes the automatic setting up of a data channel on the other peer, providing your own way to create a data channel with the same ID on the other side
+- `id`: allows you to provide your own ID for the channel that can only be used in combination with `negotiated` set to `true`)
+
+The only options that most people need to use are the first three: `ordered`, `maxPacketLifeTime`, and `maxRetransmits`. With [SCTP](https://en.wikipedia.org/wiki/Stream_Control_Transmission_Protocol) (now used by all browsers that support WebRTC) reliable and ordered is true by default. It makes sense to use unreliable and unordered if you want full control from the app layer, but in most cases, partial reliability is helpful.
+
+Note that, as with WebSocket, `RTCDataChannel` fires events when a connection is established, closed, or errors, and when it receives a message from the other peer.
+
+## Is it safe?
+
+Encryption is mandatory for all WebRTC components. With `RTCDataChannel`, all data is secured with [Datagram Transport Layer Security](https://en.wikipedia.org/wiki/Datagram_Transport_Layer_Security) (DTLS). DTLS is a derivative of SSL, meaning your data will be as secure as using any standard SSL-based connection. DTLS is standardized and built into all browsers that support WebRTC. For more information, see [Wireshark wiki](https://wiki.wireshark.org/DTLS).
+
+## Change how you think about data
+
+Handling large amounts of data can be a pain point in JavaScript. As the developers of [Sharefest](https://github.com/Peer5/ShareFest) pointed out, this required thinking about data in a new way. If you are transferring a file that is larger than the amount of memory you have available, you have to think about new ways to save this information. This is where technologies, such as the [FileSystem API](https://www.html5rocks.com/tutorials/file/filesystem/), come into play, as you see next.
+
+## Build a file-sharing app
+
+Creating a web app that can share files in the browser is now possible with `RTCDataChannel`. Building on top of `RTCDataChannel` means that the transferred file data is encrypted and does not touch an app provider's servers. This functionality, combined with the possibility of connecting to multiple clients for faster sharing, makes WebRTC file sharing a strong candidate for the web.
+
+Several steps are required to make a successful transfer:
+
+1. Read a file in JavaScript using the [File API](https://www.html5rocks.com/tutorials/file/dndfiles/).
+1. Make a peer connection between clients with `RTCPeerConnection`.
+1. Create a data channel between clients with `RTCDataChannel`.
+
+There are several points to consider when trying to send files over `RTCDataChannel`:
+
+- **File size:** if file size is reasonably small and can be stored and loaded as one Blob, you can load into memory using the File API and then send the file over a reliable channel as is (though bear in mind that browsers impose limits on maximum transfer size). As file size gets larger, things get trickier. When a chunking mechanism is required, file chunks are loaded and sent to another peer, accompanied with `chunkID` metadata so the peer can recognize them. Note that, in this case, you also need to save the chunks first to offline storage (for example, using the FileSystem API) and save it to the user's disk only when you have the file in its entirety.
+- **Chunk size:** these are the smallest "atoms" of data for your app. Chunking is required because there is currently a send size limit (though this will be fixed in a future version of data channels). The current recommendation for maximum chunk size is 64KiB.
+
+Once the file is fully transferred to the other side, it can be downloaded using an anchor tag:
+
+```js
+function saveFile(blob) {
+  const link = document.createElement('a');
+  link.href = window.URL.createObjectURL(blob);
+  link.download = 'File Name';
+  link.click();
+};
+```
+
+These file-sharing apps on [PubShare](https://pubnub.github.io/rtc-pubnub-fileshare/) and [GitHub](https://github.com/Peer5/ShareFest) use this technique. They are both open source and provide a good foundation for a file-sharing app based on `RTCDataChannel`.
+
+## So what can you do?
+
+`RTCDataChannel` opens the doors to new ways to build apps for file sharing, multiplayer gaming, and content delivery.
+
+- Peer-to-peer file sharing as previously described
+- Multiplayer gaming, paired with other technologies, such as WebGL, as seen in Mozilla's [BananaBread](https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/)
+- Content delivery as being reinvented by [PeerCDN](https://techcrunch.com/2013/12/17/yahoo-acquires-peercdn/), a framework that delivers web assets through peer-to-peer data communication
+
+## Change the way you build apps
+
+You can now provide more-engaging apps by using high-performance, low-latency connections through `RTCDataChannel`. Frameworks, such as [PeerJS](https://peerjs.com/) and the [PubNub WebRTC SDK](https://github.com/pubnub/webrtc), make `RTCDataChannel` easier to implement and the API now has wide support across platforms.
+
+The advent of `RTCDataChannel` can change the way that you think about data transfer in the browser.
+
+## Find out more
+
+- [Getting started with WebRTC](https://www.html5rocks.com/tutorials/webrtc/basics/)
+- [WebRTC in the real world: STUN, TURN, and signaling](https://www.html5rocks.com/tutorials/webrtc/infrastructure/)
+- [WebRTC and Web Audio resources](https://bit.ly/webrtcwebaudio)
+- [Peer-to-peer Data API](https://www.w3.org/TR/webrtc/#peer-to-peer-data-api)
+- [IETF WebRTC DCP Draft](https://tools.ietf.org/html/draft-jesup-rtcweb-data-protocol-04)
+- [How to send a File Using WebRTC Data API](https://bloggeek.me/send-file-webrtc-data-api/)
+- [7 Creative Uses of WebRTC’s Data Channel](https://bloggeek.me/webrtc-data-channel-uses/)
+- [BananaBread](https://developer.mozilla.org/demos/detail/bananabread)
diff --git a/src/site/content/en/blog/webrtc-infrastructure/index.md b/src/site/content/en/blog/webrtc-infrastructure/index.md
new file mode 100644
index 00000000000..72d837cf66e
--- /dev/null
+++ b/src/site/content/en/blog/webrtc-infrastructure/index.md
@@ -0,0 +1,568 @@
+---
+title: Build the backend services needed for a WebRTC app
+authors:
+  - samdutton
+date: 2013-11-04
+updated: 2020-11-24
+tags:
+  - blog
+---
+
+{% Aside %}
+
+WebRTC enables peer-to-peer communication, but it still needs servers so that clients can exchange metadata to coordinate communication through a process called signaling, and to cope with network address translators (NATs) and firewalls.
+
+This article shows you how to build a signaling service, and how to deal with the quirks of real-world connectivity with STUN and TURN servers. It also explains how WebRTC apps can handle multiparty calls and interact with services, such as VoIP and PSTN (also known as telephones).
+
+If you're not familiar with the basics of WebRTC, see [Get started with WebRTC](https://www.html5rocks.com/tutorials/webrtc/basics) before you read this article.
+
+{% endAside %}
+
+## What is signaling?
+
+Signaling is the process of coordinating communication. In order for a WebRTC app to set up a call, its clients need to exchange the following information:
+
+- Session-control messages used to open or close communication
+- Error messages
+- Media metadata, such as codecs, codec settings, bandwidth, and media types
+- Key data used to establish secure connections
+- Network data, such as a host's IP address and port as seen by the outside world
+
+This signaling process needs a way for clients to pass messages back and forth. That mechanism is not implemented by the WebRTC APIs. You need to build it yourself. Later in this article, you learn ways to build a signaling service. First, however, you need a little context.
+
+### Why is signaling not defined by WebRTC?
+
+To avoid redundancy and to maximize compatibility with established technologies, signaling methods and protocols are not specified by WebRTC standards. This approach is outlined by the [JavaScript Session Establishment Protocol (JSEP)](https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-1.1):
+
+{% Aside %}
+The thinking behind WebRTC call setup has been to fully specify and control the media plane, but to leave the signaling plane up to the app as much as possible. The rationale is that different apps may prefer to use different protocols, such as the existing SIP or Jingle call signaling protocols, or something custom to the particular app, perhaps for a novel use case. In this approach, the key information that needs to be exchanged is the multimedia session description, which specifies the necessary transport and media configuration information necessary to establish the media plane.
+{% endAside %}
+
+JSEP's architecture also avoids a browser having to save state, that is, to function as a signaling state machine. This would be problematic if, for example, signaling data was lost each time a page was reloaded. Instead, signaling state can be saved on a server.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/EzU1PV2xaYrKCARCFIW9.png", alt="JSEP architecture diagram", width="800", height="499" %}
+  <figcaption>JSEP architecture</figcaption>
+</figure>
+
+JSEP requires the exchange between peers of __offer__ and __answer__, the media metadata mentioned above. Offers and answers are communicated in Session Description Protocol (SDP) format, which look like this:
+
+```http
+v=0
+o=- 7614219274584779017 2 IN IP4 127.0.0.1
+s=-
+t=0 0
+a=group:BUNDLE audio video
+a=msid-semantic: WMS
+m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
+c=IN IP4 0.0.0.0
+a=rtcp:1 IN IP4 0.0.0.0
+a=ice-ufrag:W2TGCZw2NZHuwlnf
+a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW
+a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
+a=mid:audio
+a=rtcp-mux
+a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe
+a=rtpmap:111 opus/48000/2
+…
+```
+
+Want to know what all this SDP gobbledygook actually means? Take a look at the [Internet Engineering Task Force (IETF) examples](https://datatracker.ietf.org/doc/draft-nandakumar-rtcweb-sdp/?include_text=1).
+
+Bear in mind that WebRTC is designed so that the offer or answer can be tweaked before being set as the local or remote description by editing the values in the SDP text. For example, the `preferAudioCodec()` function in [appr.tc](https://appr.tc) can be used to set the default codec and bitrate. SDP is somewhat painful to manipulate with JavaScript and there is discussion about whether future versions of WebRTC should use JSON instead, but there are [some advantages](https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-3.3) to sticking with SDP.
+
+### `RTCPeerConnection` API and signaling: Offer, answer, and candidate
+
+`RTCPeerConnection` is the API used by WebRTC apps to create a connection between peers, and communicate audio and video.
+
+To initialize this process, `RTCPeerConnection` has two tasks:
+
+- Ascertain local media conditions, such as resolution and codec capabilities. This is the metadata used for the offer-and-answer mechanism.
+- Get potential network addresses for the app's host, known as _candidates_.
+
+Once this local data has been ascertained, it must be exchanged through a signaling mechanism with the remote peer.
+
+Imagine [Alice is trying to call Eve](https://xkcd.com/177/). Here's the full offer/answer mechanism in all its gory detail:
+
+1. Alice creates an `RTCPeerConnection` object.
+1. Alice creates an offer (an SDP session description) with the `RTCPeerConnection` `createOffer()` method.
+1. Alice calls `setLocalDescription()` with her offer.
+1. Alice stringifies the offer and uses a signaling mechanism to send it to Eve.
+1. Eve calls `setRemoteDescription()` with Alice's offer, so that her `RTCPeerConnection` knows about Alice's setup.
+1. Eve calls `createAnswer()` and the success callback for this is passed a local session description - Eve's answer.
+1. Eve sets her answer as the local description by calling `setLocalDescription()`.
+1. Eve then uses the signaling mechanism to send her stringified answer to Alice.
+1. Alice sets Eve's answer as the remote session description using `setRemoteDescription()`.
+
+{% Aside %}
+[Strewth!](https://www.urbandictionary.com/define.php?term=strewth)
+{% endAside %}
+
+Alice and Eve also need to exchange network information. The expression "finding candidates" refers to the process of finding network interfaces and ports using the [ICE framework](https://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment).
+
+1. Alice creates an `RTCPeerConnection` object with an `onicecandidate` handler.
+1. The handler is called when network candidates become available.
+1. In the handler, Alice sends stringified candidate data to Eve through their signaling channel.
+1. When Eve gets a candidate message from Alice, she calls `addIceCandidate()` to add the candidate to the remote peer description.
+
+JSEP supports [ICE Candidate Trickling](https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-3.4.1), which allows the caller to incrementally provide candidates to the callee after the initial offer, and for the callee to begin acting on the call and set up a connection without waiting for all candidates to arrive.
+
+### Code WebRTC for signaling
+
+The following code snippet is a [W3C code example](https://w3c.github.io/webrtc-pc/#simple-peer-to-peer-example) that summarizes the complete signaling process. The code assumes the existence of some signaling mechanism, `SignalingChannel`. Signaling is discussed in greater detail later.
+
+```js
+// handles JSON.stringify/parse
+const signaling = new SignalingChannel();
+const constraints = {audio: true, video: true};
+const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
+const pc = new RTCPeerConnection(configuration);
+
+// Send any ice candidates to the other peer.
+pc.onicecandidate = ({candidate}) => signaling.send({candidate});
+
+// Let the "negotiationneeded" event trigger offer generation.
+pc.onnegotiationneeded = async () => {
+  try {
+    await pc.setLocalDescription(await pc.createOffer());
+    // send the offer to the other peer
+    signaling.send({desc: pc.localDescription});
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+// After remote track media arrives, show it in remote video element.
+pc.ontrack = (event) => {
+  // Don't set srcObject again if it is already set.
+  if (remoteView.srcObject) return;
+  remoteView.srcObject = event.streams[0];
+};
+
+// Call start() to initiate.
+async function start() {
+  try {
+    // Get local stream, show it in self-view, and add it to be sent.
+    const stream =
+      await navigator.mediaDevices.getUserMedia(constraints);
+    stream.getTracks().forEach((track) =>
+      pc.addTrack(track, stream));
+    selfView.srcObject = stream;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+signaling.onmessage = async ({desc, candidate}) => {
+  try {
+    if (desc) {
+      // If you get an offer, you need to reply with an answer.
+      if (desc.type === 'offer') {
+        await pc.setRemoteDescription(desc);
+        const stream =
+          await navigator.mediaDevices.getUserMedia(constraints);
+        stream.getTracks().forEach((track) =>
+          pc.addTrack(track, stream));
+        await pc.setLocalDescription(await pc.createAnswer());
+        signaling.send({desc: pc.localDescription});
+      } else if (desc.type === 'answer') {
+        await pc.setRemoteDescription(desc);
+      } else {
+        console.log('Unsupported SDP type.');
+      }
+    } else if (candidate) {
+      await pc.addIceCandidate(candidate);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+};
+```
+
+To see the offer/answer and candidate-exchange processes in action, see [simpl.info RTCPeerConnection](https://simpl.info/rtcpeerconnection/) and look at the console log for a single-page video chat example. If you want more, download a complete dump of WebRTC signaling and stats from the about://webrtc-internals page in Google Chrome or the opera://webrtc-internals page in Opera.
+
+### Peer discovery
+
+This is a fancy way of asking, "How do I find someone to talk to?"
+
+For telephone calls, you have telephone numbers and directories. For online video chat and messaging, you need identity and presence management systems, and a means for users to initiate sessions. WebRTC apps need a way for clients to signal to each other that they want to start or join a call.
+
+Peer discovery mechanisms are not defined by WebRTC and you don't go into the options here. The process can be as simple as emailing or messaging a URL. For video chat apps, such as [Talky](https://talky.io), [tawk.to](https://tawk.com) and [Browser Meeting](https://browsermeeting.com), you invite people to a call by sharing a custom link. Developer Chris Ball built an intriguing [serverless-webrtc](https://blog.printf.net/articles/2013/05/17/webrtc-without-a-signaling-server/) experiment that enables WebRTC call participants to exchange metadata by any messaging service they like, such as IM, email, or homing pigeon.
+
+## How can you build a signaling service?
+
+To reiterate, signaling protocols and mechanisms are not defined by WebRTC standards. Whatever you choose, you need an intermediary server to exchange signaling messages and app data between clients. Sadly, a web app cannot simply shout into the internet, "Connect me to my friend!"
+
+Thankfully signaling messages are small and mostly exchanged at the start of a call. In testing with [appr.tc](https://appr.tc) for a video chat session, a total of around 30-45 messages were handled by the signaling service with a total size for all messages of around 10KB.
+
+As well as being relatively undemanding in terms of bandwidth, WebRTC signaling services don't consume much processing or memory because they only need to relay messages and retain a small amount of session state data, such as which clients are connected.
+
+{% Aside %}
+The signaling mechanism used to exchange session metadata can also be used to communicate app data. It's just a messaging service!
+{% endAside %}
+
+### Push messages from the server to the client
+
+A message service for signaling needs to be bidirectional: client to server and server to client. Bidirectional communication goes against the HTTP client/server request/response model, but various hacks such as [long polling](https://en.wikipedia.org/wiki/Comet_(programming)) have been developed over many years in order to push data from a service running on a web server to a web app running in a browser.
+
+More recently, the [`EventSource` API](https://www.html5rocks.com/tutorials/eventsource/basics/) has been [widely implemented](https://caniuse.com/?search=eventsource). This enables server-sent events - data sent from a web server to a browser client through HTTP. `EventSource` is designed for one-way messaging, but it can be used in combination with XHR to build a service for exchanging signaling messages. A signaling service passes a message from a caller, delivered by XHR request, by pushing it through `EventSource` to the callee.
+
+[WebSocket](https://www.html5rocks.com/tutorials/websockets/basics/) is a more-natural solution, designed for full duplex client–server communication - messages that can flow in both directions at the same time. One advantage of a signaling service built with pure WebSocket or server-sent events (`EventSource`) is that the backend for these APIs can be implemented on a variety of web frameworks common to most web-hosting packages for languages such as PHP, Python, and Ruby.
+
+All modern browsers except Opera Mini [support WebSocket](https://caniuse.com/#search=websocket) and, more importantly, all browsers that support WebRTC also support WebSocket, both on desktop and mobile. [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) should be used for all connections to ensure messages cannot be intercepted unencrypted and also to  [reduce problems with proxy traversal](https://www.infoq.com/articles/Web-Sockets-Proxy-Servers). (For more information about WebSocket and proxy traversal see the [WebRTC chapter](https://hpbn.co/webrtc) in Ilya Grigorik's __High Performance Browser Networking__.)
+
+It is also possible to handle signaling by getting WebRTC clients to poll a messaging server repeatedly through Ajax, but that leads to a lot of redundant network requests, which is especially problematic for mobile devices. Even after a session has been established, peers need to poll for signaling messages in case of changes or session termination by other peers. The [WebRTC Book](https://webrtcbook.com) app example takes this option with some optimizations for polling frequency.
+
+### Scale signaling
+
+Although a signaling service consumes relatively little bandwidth and CPU per client, signaling servers for a popular app may have to handle a lot of messages from different locations with high levels of concurrency. WebRTC apps that get a lot of traffic need signaling servers able to handle considerable load.
+You don't go into detail here, but there are a number of options for high-volume, high-performance messaging, including the following:
+
+- [eXtensible Messaging and Presence Protocol](https://en.wikipedia.org/wiki/Xmpp) (XMPP), originally known as Jabber-a protocol developed for instant messaging that can be used for signaling (Server implementations include [ejabberd](https://en.wikipedia.org/wiki/Ejabberd) and [Openfire](https://en.wikipedia.org/wiki/Openfire). JavaScript clients, such as [Strophe.js](https://strophe.im/strophejs/), use [BOSH](https://en.wikipedia.org/wiki/BOSH) to emulate bidirectional streaming, but for [various reasons](https://stackoverflow.com/questions/7327153/xmpp-bosh-vs-comet), BOSH may not be as efficient as WebSocket and, for the same reasons, may not scale well.) (On a tangent, [Jingle](https://en.wikipedia.org/wiki/Jingle_(protocol)) is an XMPP extension to enable voice and video. The WebRTC project uses network and transport components from the [libjingle](https://developers.google.com/talk/libjingle/developer_guide) library - a C++ implementation of Jingle.)
+
+- Open source libraries, such as [ZeroMQ](https://zeromq.org/) (as used by TokBox for their [Rumour](https://www.tokbox.com/blog/tokbox-builds-it%E2%80%99s-own-internal-messaging-infrastructure/) service) and [OpenMQ](https://en.wikipedia.org/wiki/Open_Message_Queue) ([NullMQ](https://avalanche123.com/blog/2012/02/25/interacting-with-zeromq-from-the-browser/) applies ZeroMQ concepts to web platforms using the [STOMP protocol](https://stomp.github.io/) over WebSocket.)
+
+- Commercial cloud-messaging platforms that use WebSocket (though they may fall back to long polling), such as [Pusher](https://pusher.com/), [Kaazing](https://kaazing.com/), and [PubNub](https://pubnub.com) (PubNub also has an [API for WebRTC](https://github.com/pubnub/webrtc).)
+
+- Commercial WebRTC platforms, such as [vLine](https://vline.com/)
+
+(Developer Phil Leggetter's [Real-Time Web Technologies Guide](https://www.leggetter.co.uk/real-time-web-technologies-guide) provides a comprehensive list of messaging services and libraries.)
+
+### Build a signaling service with Socket.io on Node
+
+The following is code for a simple web app that uses a signaling service built with [Socket.io](https://socket.io) on [Node](https://nodejs.org/). The design of Socket.io makes it simple to build a service to exchange messages and Socket.io is particularly suited to WebRTC signaling because of its built-in concept of rooms. This example is not designed to scale as a production-grade signaling service, but is simple to understand for a relatively small number of users.
+
+Socket.io uses WebSocket with fallbacks: AJAX long polling, AJAX multipart streaming, Forever Iframe, and JSONP polling. It has been ported to various backends, but is perhaps best known for its Node version used in this example. 
+
+There's no WebRTC in this example. It's designed only to show how to build signaling into a web app. View the console log to see what's happening as clients join a room and exchange messages. This [WebRTC codelab](https://codelabs.developers.google.com/codelabs/webrtc-web/#0) gives step-by-step instructions for how to integrate this into a complete WebRTC video chat app.
+
+Here is the client `index.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>WebRTC client</title>
+  </head>
+  <body>
+    <script src='/socket.io/socket.io.js'></script>
+    <script src='js/main.js'></script>
+  </body>
+</html>
+```
+
+Here's the JavaScript file `main.js` referenced in the client:
+
+```js
+const isInitiator;
+
+room = prompt('Enter room name:');
+
+const socket = io.connect();
+
+if (room !== '') {
+  console.log('Joining room ' + room);
+  socket.emit('create or join', room);
+}
+
+socket.on('full', (room) => {
+  console.log('Room ' + room + ' is full');
+});
+
+socket.on('empty', (room) => {
+  isInitiator = true;
+  console.log('Room ' + room + ' is empty');
+});
+
+socket.on('join', (room) => {
+  console.log('Making request to join room ' + room);
+  console.log('You are the initiator!');
+});
+
+socket.on('log', (array) => {
+  console.log.apply(console, array);
+});
+```
+
+Here's the complete server app:
+
+```js
+const static = require('node-static');
+const http = require('http');
+const file = new(static.Server)();
+const app = http.createServer(function (req, res) {
+  file.serve(req, res);
+}).listen(2013);
+
+const io = require('socket.io').listen(app);
+
+io.sockets.on('connection', (socket) => {
+
+  // Convenience function to log server messages to the client
+  function log(){
+    const array = ['>>> Message from server: '];
+    for (const i = 0; i < arguments.length; i++) {
+      array.push(arguments[i]);
+    }
+      socket.emit('log', array);
+  }
+
+  socket.on('message', (message) => {
+    log('Got message:', message);
+    // For a real app, would be room only (not broadcast)
+    socket.broadcast.emit('message', message);
+  });
+
+  socket.on('create or join', (room) => {
+    const numClients = io.sockets.clients(room).length;
+
+    log('Room ' + room + ' has ' + numClients + ' client(s)');
+    log('Request to create or join room ' + room);
+
+    if (numClients === 0){
+      socket.join(room);
+      socket.emit('created', room);
+    } else if (numClients === 1) {
+      io.sockets.in(room).emit('join', room);
+      socket.join(room);
+      socket.emit('joined', room);
+    } else { // max two clients
+      socket.emit('full', room);
+    }
+    socket.emit('emit(): client ' + socket.id +
+      ' joined room ' + room);
+    socket.broadcast.emit('broadcast(): client ' + socket.id +
+      ' joined room ' + room);
+
+  });
+
+});
+```
+
+(You don't need to learn about node-static for this. It just happens to be used in this example.)
+
+To run this app on localhost, you need to have Node, Socket.IO, and [node-static](https://github.com/cloudhead/node-static) installed. Node can be downloaded from [Node.js](https://nodejs.org/) (installation is straightforward and quick). To install Socket.IO and node-static, run Node Package Manager from a terminal in your app directory:
+
+```shell
+npm install socket.io
+npm install node-static
+```
+
+To start the server, run the following command from a terminal in your app directory:
+
+```shell
+node server.js
+```
+
+From your browser, open `localhost:2013`. Open a new tab or window in any browser and open `localhost:2013` again. To see what's happening, check the console. In Chrome and Opera, you can access the console through Google Chrome Developer Tools with `Ctrl+Shift+J` (or `Command+Option+J` on Mac).
+
+Whatever approach you choose for signaling, your backend and client app - at the very least - need to provide services similar to this example.
+
+### Signaling gotchas
+
+- `RTCPeerConnection` won't start gathering candidates until `setLocalDescription()` is called. This is mandated in the [JSEP IETF draft](https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-4.2.4).
+- Take advantage of Trickle ICE. Call `addIceCandidate()` as soon as candidates arrive.
+
+### Readymade signaling servers
+
+If you don't want to roll your own, there are several WebRTC signaling servers available, which use Socket.IO like the previous example and are integrated with WebRTC client JavaScript libraries:
+
+- [webRTC.io](https://github.com/webRTC/webRTC.io) is one of the first abstraction libraries for WebRTC.
+- [Signalmaster](https://github.com/andyet/signalmaster) is a signaling server created for use with the [SimpleWebRTC](https://github.com/HenrikJoreteg/SimpleWebRTC) JavaScript client library.
+
+If you don't want to write any code at all, complete commercial WebRTC platforms are available from companies, such as [vLine](https://www.vline.com/), [OpenTok](https://tokbox.com/opentok), and [Asterisk](https://wiki.asterisk.org/wiki/display/AST/Asterisk+WebRTC+Support).
+
+For the record, Ericsson built a [signaling server using PHP on Apache](https://labs.ericsson.com/blog/a-web-rtc-tutorial) in the early days of WebRTC. This is now somewhat obsolete, but it's worth looking at the code if you're considering something similar.
+
+### Signaling security
+
+{% Blockquote 'Salman Rushdie' %}
+"Security is the art of making nothing happen."
+{% endBlockquote %}
+
+Encryption is [mandatory](https://www.ietf.org/proceedings/82/slides/rtcweb-13.pdf) for all WebRTC components.
+
+However, signaling mechanisms aren't defined by WebRTC standards, so it's up to you to make signaling secure. If an attacker manages to hijack signaling, they can stop sessions, redirect connections, and record, alter, or inject content.
+
+The most important factor in securing signaling is to use secure protocols - HTTPS and WSS (for example, TLS) - which ensure that messages cannot be intercepted unencrypted. Also, be careful not to broadcast signaling messages in a way that they can be accessed by other callers using the same signaling server.
+
+{% Aside %}
+To secure a WebRTC app, it is absolutely imperative that signaling uses [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security).
+{% endAside %}
+
+## After signaling: Use ICE to cope with NATs and firewalls
+
+For metadata signaling, WebRTC apps use an intermediary server, but for actual media and data streaming once a session is established, `RTCPeerConnection` attempts to connect clients directly or peer-to-peer.
+
+In a simpler world, every WebRTC endpoint would have a unique address that it could exchange with other peers in order to communicate directly.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/LrErdUdxSBf8XaSJ1XhO.png", alt="Simple peer to peer connection", width="800", height="188" %}
+  <figcaption>A world without NATs and firewalls</figcaption>
+</figure>
+
+In reality, most devices live behind one or more layers of [NAT](https://www.howstuffworks.com/nat.htm), some have antivirus software that blocks certain ports and protocols, and many are behind proxies and corporate firewalls. A firewall and NAT may in fact be implemented by the same device, such as a home WIFI router.
+
+<figure>   
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZVsek1SKMsrPTLQcRA63.png", alt="Peers behind NATs and firewalls", width="800", height="494" %}
+  <figcaption>The real world</figcaption>
+</figure>
+
+WebRTC apps can use the [ICE](https://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment) framework to overcome the complexities of real-world networking. To enable this to happen, your app must pass ICE server URLs to `RTCPeerConnection`, as described in this article.
+
+ICE tries to find the best path to connect peers. It tries all possibilities in parallel and chooses the most efficient option that works. ICE first tries to make a connection using the host address obtained from a device's operating system and network card. If that fails (which it will for devices behind NATs), ICE obtains an external address using a STUN server and, if that fails, traffic is routed through a TURN relay server.
+
+In other words, a STUN server is used to get an external network address and TURN servers are used to relay traffic if direct (peer-to-peer) connection fails.
+
+Every TURN server supports STUN. A TURN server is a STUN server with additional built-in relaying functionality. ICE also copes with the complexities of NAT setups. In reality, NAT hole-punching may require more than just a public IP:port address.
+
+URLs for STUN and/or TURN servers are (optionally) specified by a WebRTC app in the `iceServers` configuration object that is the first argument to the `RTCPeerConnection` constructor. For [appr.tc](https://appr.tc), that value looks like this:
+
+```json
+{
+  'iceServers': [
+    {
+      'urls': 'stun:stun.l.google.com:19302'
+    },
+    {
+      'urls': 'turn:192.158.29.39:3478?transport=udp',
+      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+      'username': '28224511:1379330808'
+    },
+    {
+      'urls': 'turn:192.158.29.39:3478?transport=tcp',
+      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+      'username': '28224511:1379330808'
+    }
+  ]
+}
+```
+
+{% Aside %}
+The TURN credentials example was time-limited and expired in September 2013. TURN servers are expensive to run and you need to pay for your own servers or find a service provider. To test credentials, you can use the [candidate gathering sample](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice) and check if you get a candidate with type `relay`.
+{% endAside %}
+
+Once `RTCPeerConnection` has that information, the ICE magic happens automatically. `RTCPeerConnection` uses the ICE framework to work out the best path between peers, working with STUN and TURN servers as necessary.
+
+### STUN
+
+[NATs](https://www.howstuffworks.com/nat.htm) provide a device with an IP address for use within a private local network, but this address can't be used externally. Without a public address, there's no way for WebRTC peers to communicate. To get around this problem, WebRTC uses [STUN](https://en.wikipedia.org/wiki/STUN).
+
+STUN servers live on the public internet and have one simple task - check the IP:port address of an incoming request (from an app running behind a NAT) and send that address back as a response. In other words, the app uses a STUN server to discover its IP:port from a public perspective. This process enables a WebRTC peer to get a publicly accessible address for itself and then pass it to another peer through a signaling mechanism in order to set up a direct link. (In practice, different NATs work in different ways and there may be multiple NAT layers, but the principle is still the same.)
+
+STUN servers don't have to do much or remember much, so relatively low-spec STUN servers can handle a large number of requests.
+
+Most WebRTC calls successfully make a connection using STUN - 86% according to [Webrtcstats.com](https://webrtcstats.com/), though this can be less for calls between peers behind firewalls and complex NAT configurations.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YGV8R7cI2RxpDtC0KMhl.png", alt="Peer to peer connection using a STUN server", width="800", height="545" %}
+  <figcaption>Using STUN servers to get public IP:port addresses</figcaption>
+</figure>
+
+### TURN
+
+`RTCPeerConnection` tries to set up direct communication between peers over UDP. If that fails, `RTCPeerConnection` resorts to TCP. If that fails, TURN servers can be used as a fallback, relaying data between endpoints.
+
+Just to reiterate, TURN is used to relay audio, video, and data streaming between peers, not signaling data!
+
+TURN servers have public addresses, so they can be contacted by peers even if the peers are behind firewalls or proxies. TURN servers have a conceptually simple task - to relay a stream. However, unlike STUN servers, they inherently consume a lot of bandwidth. In other words, TURN servers need to be beefier.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/sXMerfYKQmlGTWOwUCe1.png", alt="Peer to peer connection using a STUN server", width="800", height="545" %}
+  <figcaption>The full Monty: STUN, TURN, and signaling</figcaption>
+</figure>
+
+This diagram shows TURN in action. Pure STUN didn't succeed, so each peer resorts to using a TURN server.
+
+### Deploying STUN and TURN servers
+
+For testing, Google runs a public STUN server, stun.l.google.com:19302, as used by [appr.tc](https://appr.tc). For a production STUN/TURN service, use the rfc5766-turn-server. Source code for STUN and TURN servers is available on [GitHub](https://github.com/coturn/rfc5766-turn-server/), where you can also find links to several sources of information about server installation. A [VM image for Amazon Web Services](https://groups.google.com/forum/#!msg/discuss-webrtc/X-OeIUC0efs/XW5Wf7Tt1vMJ) is also available.
+
+An alternative TURN server is restund, available as [source code](https://www.creytiv.com/restund.html) and also for AWS. Here are instructions for how to set up restund on Compute Engine.
+
+1. Open firewall as necessary for tcp=443, udp/tcp=3478.
+1. Create four instances, one for each public IP, Standard Ubuntu 12.06 image.
+1. Set up local firewall config (allow ANY from ANY).
+1. Install tools:
+    ```shell
+    sudo apt-get install make
+    sudo apt-get install gcc
+    ```
+1. Install libre from [creytiv.com/re.html](https://creytiv.com/re.html).
+1. Fetch restund from [creytiv.com/restund.html](https://creytiv.com/restund.html) and unpack./
+1. `wget` [hancke.name/restund-auth.patch](https://hancke.name/restund-auth.patch) and apply with `patch -p1 < restund-auth.patch`.
+1. Run `make`, `sudo make install` for libre and restund.
+1. Adapt `restund.conf` to your needs (replace IP addresses and make sure it contains the same shared secret) and copy to `/etc`.
+1. Copy `restund/etc/restund` to `/etc/init.d/`.
+1. Configure restund:
+    1. Set `LD_LIBRARY_PATH`.
+    1. Copy `restund.conf` to `/etc/restund.conf`.
+    1. Set `restund.conf` to use the right 10. IP address.
+1. Run restund
+1. Test using stund client from remote machine: `./client IP:port`
+
+## Beyond one-to-one: Multiparty WebRTC
+
+You may also want to take a look at Justin Uberti's proposed IETF standard for a [REST API for access to TURN Services](https://tools.ietf.org/html/draft-uberti-rtcweb-turn-rest-00).
+
+It's easy to imagine use cases for media streaming that go beyond a simple one-to-one call. For example, video conferencing between a group of colleagues or a public event with one speaker and hundreds or millions of viewers.
+
+A WebRTC app can use multiple RTCPeerConnections so that every endpoint connects to every other endpoint in a mesh configuration. This is the approach taken by apps, such as [talky.io](https://talky.io), and works remarkably well for a small handful of peers. Beyond that, processing and bandwidth consumption becomes excessive, especially for mobile clients.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/wnlggGjq35kOISPOfV0a.png", alt="Mesh: small N-way call", width="300", height="288" %}
+  <figcaption>Full mesh topology: Everyone connected to everyone</figcaption>
+</figure>
+
+Alternatively, a WebRTC app could choose one endpoint to distribute streams to all others in a star configuration. It would also be possible to run a WebRTC endpoint on a server and construct your own redistribution mechanism (a [sample client app](https://code.google.com/p/webrtc/source/browse/#svn%2Ftrunk%2Ftalk) is provided by webrtc.org).
+
+Since Chrome 31 and Opera 18, a `MediaStream` from one `RTCPeerConnection` can be used as the input for another. This can enable more flexible architectures because it enables a web app to handle call-routing by choosing which other peer to connect to. To see this in action, see [WebRTC samples Peer connection relay](https://webrtc.github.io/samples/src/content/peerconnection/multiple-relay/) and [WebRTC samples Multiple peer connections](https://webrtc.github.io/samples/src/content/peerconnection/multiple/).
+
+### Multipoint Control Unit
+
+A better option for a large number of endpoints is to use a [Multipoint Control Unit](https://en.wikipedia.org/wiki/Multipoint_control_unit) (MCU). This is a server that works as a bridge to distribute media between a large number of participants. MCUs can cope with different resolutions, codecs, and frame rates in a video conference; handle transcoding; do selective stream forwarding; and mix or record audio and video. For multiparty calls, there are a number of issues to consider, particularly how to display multiple video inputs and mix audio from multiple sources. Cloud platforms, such as [vLine](https://www.vline.com/), also attempt to optimize traffic routing.
+
+It's possible to buy a complete MCU hardware package or build your own.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/d8MN1t22X6P7lD5ql9AZ.png", alt="Rear view of Cisco MCU5300", width="300", height="51" %}
+  <figcaption>The back of a <a href="https://cisco.com/en/US/products/ps12283">Cisco MCU</a></figcaption>
+</figure>
+
+Several open source MCU software options are available. For example, [Licode](https://lynckia.com/) (previously known as Lynckia) produces an open source MCU for WebRTC. OpenTok has [Mantis](https://www.tokbox.com/blog/mantis-next-generation-cloud-technology-for-webrtc/).
+
+## Beyond browsers: VoIP, telephones, and messaging
+
+The standardized nature of WebRTC makes it possible to establish communication between a WebRTC app running in a browser and a device or platform running on another communication platform, such as a telephone or a video-conferencing system.
+
+[SIP](https://en.wikipedia.org/wiki/Session_Initiation_Protocol) is a signaling protocol used by VoIP and video-conferencing systems. To enable communication between a WebRTC web app and a SIP client, such as a video-conferencing system, WebRTC needs a proxy server to mediate signaling. Signaling must flow through the gateway but, once communication has been established, SRTP traffic (video and audio) can flow directly peer to peer.
+
+The [Public Switched Telephone Network (PSTN)](https://en.wikipedia.org/wiki/Public_switched_telephone_network) is the [circuit-switched](https://en.wikipedia.org/wiki/Circuit_switching) network of all "plain old" analog telephones. For calls between WebRTC web apps and telephones, traffic must go through a PSTN gateway. Likewise, WebRTC web apps need an intermediary XMPP server to communicate with [Jingle](https://en.wikipedia.org/wiki/Jingle_(protocol)) endpoints such as IM clients. Jingle was developed by Google as an extension to XMPP to enable voice and video for messaging services. Current WebRTC implementations are based on the C++ [libjingle](https://developers.google.com/talk/libjingle/developer_guide) library, an implementation of Jingle initially developed for Talk.
+
+A number of apps, libraries, and platforms make use of WebRTC's ability to communicate with the outside world:
+
+- [sipML5](https://code.google.com/p/sipml5/): an open source JavaScript SIP client
+- [jsSIP](https://www.jssip.net/): JavaScript SIP library
+- [Phono](https://phono.com/): open source JavaScript phone API built as a plugin
+- [Zingaya](https://zingaya.com/product/): an embeddable phone widget
+- [Twilio](https://www.twilio.com/): voice and messaging
+- [Uberconference](https://www.uberconference.com/): conferencing
+
+The sipML5 developers have also built the [webrtc2sip](https://code.google.com/p/webrtc2sip/) gateway. Tethr and Tropo have demonstrated [a framework for disaster communications](https://tethr.tumblr.com/) "in a briefcase" using an [OpenBTS cell](https://en.wikipedia.org/wiki/OpenBTS) to enable communications between feature phones and computers through WebRTC. That's telephone communication without a carrier!
+
+## Find out more
+
+The [WebRTC codelab](https://bitbucket.org/webrtc/codelab) provides step-by-step instructions for how to build a video and text chat app using a Socket.io signaling service running on Node.
+
+[Google I/O WebRTC presentation from 2013](https://www.youtube.com/watch?v=p2HzZkd2A40) with WebRTC tech lead, Justin Uberti
+
+Chris Wilson's SFHTML5 presentation - [Introduction to WebRTC Apps](https://www.youtube.com/watch?v=3Ifbqaw5l_I)
+
+The 350-page book [WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web](https://webrtcbook.com) provides a lot of detail about data and signaling pathways, and includes a number of detailed network topology diagrams.
+
+[WebRTC and Signaling: What Two Years Has Taught Us](https://www.tokbox.com/blog/webrtc-and-signaling-what-two-years-has-taught-us/) - TokBox blog post about why leaving signaling out of the spec was a good idea
+
+[Ben Strong's](https://www.linkedin.com/in/strongben) [A Practical Guide to Building WebRTC Apps](https://thenewcircle.com/s/post/1548/a_practical_guide_to_building_webrtc_apps_ben_strong_video) provides a lot of information about WebRTC topologies and infrastructure.
+
+The [WebRTC chapter](https://chimera.labs.oreilly.com/books/1230000000545/ch18.html) in [Ilya Grigorik's](https://www.igvita.com/) __High Performance Browser Networking__ goes deep into WebRTC architecture, use cases, and performance.
+
diff --git a/src/site/content/en/blog/webrtc-standard-announcement/index.md b/src/site/content/en/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..f97466facd8
--- /dev/null
+++ b/src/site/content/en/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,103 @@
+---
+title: WebRTC is now a W3C and IETF standard
+subhead: >
+  A brief overview of the history, architecture, use cases, and future of WebRTC.
+description: >
+  A brief overview of the history, architecture, use cases, and future of WebRTC.
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+The process of defining a web standard is a lengthy process that ensures usefulness, consistency and
+compatibility across browsers. Today [the W3C and
+IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en) mark the completion of perhaps one
+of the most important standards during the pandemic: WebRTC.
+
+{% Aside %}
+  Check out the [Real-time communication with WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web)
+  codelab for a hands-on walkthrough of implementing WebRTC.
+{% endAside %}
+
+## History {: #history }
+
+WebRTC is a platform giving browsers, mobile apps, and desktop apps real-time communication
+capabilities, typically used for video calling. The platform consists of a comprehensive set of
+technologies and standards. Google initiated the idea to create WebRTC in 2009, as an alternative to
+Adobe Flash and desktop applications that couldn't run in the browser. The previous generation of
+browser-based products were built on top of licensed proprietary technology. Various products were
+built with this technology, including Hangouts. Google then acquired the companies it had been
+licensing the technology from and made it available as the open source WebRTC project. This codebase
+is integrated in Chrome and used by the majority of applications using WebRTC. Together with other
+browser vendors and industry leaders such as Mozilla, Microsoft, Cisco, and Ericsson, the
+standardization of WebRTC was kicked off in both the W3C and IETF.  In 2013, Mozilla and Google
+[demonstrated](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html) video
+calling between their browsers. Through the evolution of the standard, many architectural
+discussions had led to implementation differences across browsers and challenged compatibility and
+interoperability. Most of these disagreements were ultimately settled as the standard became
+finalized in the past years. The WebRTC specification is now accompanied with a
+[full set of platform tests](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned)
+and tools to address compatibility and browsers have largely adapted their implementations
+accordingly. This brings an end to a challenging period where web developers had to continuously
+adopt their services to different browser implementations and specification changes.
+
+## Architecture and functionality {: #architecture }
+
+The [`RTCPeerConnection` API](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection) is
+the central part of the WebRTC specification. `RTCPeerConnection` deals with connecting two
+applications on different endpoints to communicate using a peer-to-peer protocol. The `PeerConnection`
+API interacts closely with
+[`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) for
+accessing camera and microphone, and
+[`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) for
+capturing screen content. WebRTC allows you to send and receive streams that include audio and/or
+video content, as well as arbitrary binary data through the `DataChannel`. The media functionality for
+processing, encoding, and decoding audio and video provides the core of any WebRTC implementation.
+WebRTC supports various audio codecs, with Opus being the most used and versatile. WebRTC
+implementations are required to support both Google's free-to-use VP8 video codec and H.264 for
+processing video. WebRTC connections are always encrypted, which is achieved through two existing
+protocols: DTLS and SRTP.  WebRTC leans heavily on existing standards and technologies, from video
+codecs (VP8, H264), network traversal (ICE), transport (RTP, SCTP), to media description protocols
+(SDP). This is tied together in over 50 RFCs.
+
+## Use cases: when it's a matter of milliseconds {: #use-cases }
+
+WebRTC is widely used in time-critical applications such as remote surgery, system monitoring, and
+remote control of autonomous cars, and voice or video calls built on UDP where buffering is not
+possible. Nearly all browser-based video callings services from companies such as Google, Facebook,
+Cisco, RingCentral, and Jitsi use WebRTC. Google Stadia and NVIDIA GeForce NOW use WebRTC to get the
+stream of gameplay from the cloud to the web browser without perceivable delay.
+
+## Pandemic puts focus on video calling performance {: #performance }
+
+Over the past year, WebRTC has seen a 100X increase of usage in Chrome due to increased video
+calling from within the browser. Recognizing that video calling has become a fundamental part of
+many people's lives during the pandemic, browser vendors have begun to optimize the technologies
+that video calling depends on. This was particularly important as resource demanding large meetings
+and video effects in video meetings became more common when employees and students started to work
+and study from home.  In the past year Chrome has become up to 30% more battery friendly for video
+calling, with more optimizations to come for heavy usage scenarios. Mozilla, Apple, and Microsoft
+all [have made significant improvements](https://www.youtube.com/watch?v=YZROn-WsyO4) in their
+implementation of WebRTC through the pandemic, in particular in making sure they adhere to the now
+formalized standard.
+
+## The future of WebRTC {: # future }
+
+While WebRTC is now completed as a W3C standard, improvements continue. The new video codec AV1
+which
+[saves up to 50% of bandwidth](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/)
+is becoming available in WebRTC and web browsers. Continued improvements in the open source code
+base are expected to further reduce delay and improve the quality of video that can be streamed.
+[WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/) gathers the initiative to create
+supplementary APIs to enable new use cases. These consist of extensions to existing APIs to give
+more control over existing functionality such as [Scalable Video
+Coding](https://www.w3.org/TR/webrtc-svc/) as well as APIs that give access to
+[lower-level components](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md).
+The latter gives more flexibility to web developers to innovate by integrating high-performance
+custom WebAssembly components. With emerging 5G networks and demand for more interactive services,
+we're expecting to see a continued increase of services building on top of WebRTC in the year to
+come.
diff --git a/src/site/content/en/blog/website-navigation/index.md b/src/site/content/en/blog/website-navigation/index.md
new file mode 100644
index 00000000000..6ae2353a6bc
--- /dev/null
+++ b/src/site/content/en/blog/website-navigation/index.md
@@ -0,0 +1,771 @@
+---
+layout: post
+title: "Building the main navigation for a website"
+subhead: >
+  This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good.
+description: >
+  This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good.
+date: 2022-09-07
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/tRG45IUUaywMyn4CtTR2.jpg
+alt: A compass.
+authors:
+  - mmatuzo
+tags:
+  - blog
+  - accessibility
+---
+
+There are many different ways of building the main navigation of a website, in terms of styling, functionality, and the underlying markup and semantic information. If the implementation is too minimalist, it works for most people, but the user experience (UX) might not be great. 
+If it's over-engineered, it might confuse users or even hinder them from being able to access it at all.  
+
+For most websites, you want to build something that's neither too simple, nor too complicated.
+
+## Building layer by layer
+
+In this tutorial you start with a basic setup and add features layer by layer up to a point where you provide just enough information, styling, and functionality to please most users. To achieve that you make use of the progressive enhancement principle, which states that you start with the most fundamental and robust solution and progressively add layers of functionality. If one layer fails to work for some reason, the navigation will still work because it gracefully falls back to the underlying layer.
+
+## Basic structure
+
+For a basic navigation you need two things: `<a>` elements and a few lines of CSS to improve the default styling and layout of your links.  
+
+
+```html
+<a href="/home">Home</a>
+<a href="/about-us">About us</a>
+<a href="/pricing">Pricing</a>
+<a href="/contact">Contact</a>
+```
+
+
+```css
+/* Define variables for your colors */
+:root {
+  --color-shades-dark: rgb(25, 25, 25);
+}
+
+/* Use the alternative box model
+Details: <https://web.dev/learn/css/box-model/> */
+*{
+  box-sizing: border-box;
+}
+
+/* Basic font styling */
+body {
+  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
+  font-size: 1.6rem;
+}
+
+/* Link styling */
+a {
+  --text-color: var(--color-shades-dark);
+  border-block-end: 3px solid var(--border-color, transparent);
+  color: var(--text-color);
+  display: inline-block;
+  margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
+  margin-inline-end: 0.5rem;
+  padding: 0.1rem;
+  text-decoration: none;
+}
+
+/* Change the border-color on :hover and :focus */
+a:where(:hover, :focus) {
+  --border-color: var(--text-color);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'wvjvJrw',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/wvjvJrw">Step 1: Basic HTML and CSS" on CodePen</a>.</figcaption>
+</figure> 
+
+This works well for most users, no matter how they're accessing the site. The navigation is accessible with a mouse, a keyboard, a touch device, or a screen reader, but there's room for improvement. You can enhance the experience by extending this basic pattern with additional functionality and information.  
+
+Here's what you can do:
+
+-  Highlight the active page.
+-  Announce the number of items to screen reader users.
+-  Add a landmark and allow screen reader users to access the navigation directly using a shortcut.
+-  Hide the navigation on narrow viewports.
+-  Improve focus styling.
+
+{% Aside %}
+`margin-inline-end` and `margin-block-end` are known as [logical properties](/learn/css/logical-properties/) and an alternative to writing `margin-right` and `margin-bottom`. Logical properties are a new way of working with directions and dimensions, one that allows you to control layout through logical, rather than physical mappings. This is especially useful, if you're dealing with websites that are presented in different languages and writing modes, like right-to-left. Have a look at ["Physical vs. logical properties" on CodePen](https://codepen.io/matuzo/pen/zYWmemQ?editors=1100) for an example.
+{% endAside %}
+
+## Highlight the active page
+
+To highlight the active page, you can add a class to the corresponding link.
+
+```html
+<a href="/about-us" class="active-page">About us</a>
+```
+
+The issue with this approach is that it conveys the information which link is active purely visually. A blind screen reader user couldn't tell the difference between the active page and other pages. Fortunately, the [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria/) standard offers a way to communicate this information semantically, as well. Use the [aria-current="page"](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-current) attribute and value instead of a class.  
+
+<blockquote>
+<code>aria-current</code> (state) indicates the element that represents the current item within a container or set of related elements.  
+
+A page token used to indicate a link within a set of pagination links, where the link is visually styled to represent the currently-displayed page.  
+
+[Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)
+</blockquote>
+
+With the additional attribute, a screen reader now announces something like "current page, link, About Us" instead of just "link, About Us".
+
+```html
+<a href="/about-us" aria-current="page" class="active-page">About us</a>
+```
+
+A convenient side effect is that you can use the attribute to select the active link in CSS, making the `active-page` class obsolete.
+
+```html
+<a href="/home">Home</a>
+<a href="/about-us" aria-current="page">About us</a>
+<a href="/pricing">Pricing</a>
+<a href="/contact">Contact</a>
+```
+
+```css
+/* Change border-color and color for the active page */
+[aria-current="page"] {
+  --border-color: var(--color-highlight);
+  --text-color: var(--color-highlight);
+}
+```
+
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJZJpOe',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/OJZJpOe">Step 2: Highlight the active page on CodePen</a>.</figcaption>
+</figure> 
+
+
+## Announce the number of items
+
+By looking at the navigation, sighted users can tell that it only contains four links. A blind screen reader user can't obtain this information as quickly. They may have to work their way through the whole list of links. This might not be an issue if the list is short like in this example, but if it contains 40 links this task can be cumbersome. If a screen reader user knows upfront that the navigation contains a lot of links, they might decide to use a different, more efficient way of navigation, like the site search.  
+A nice way of communicating the number of items upfront, is wrapping each link in a list item (`<li>`), nested in an unordered list (`<ul>`).
+
+```html
+<ul>
+  <li>
+     <a href="/home">Home</a>
+  </li>
+  <li>
+    <a href="/about-us" aria-current="page">About us</a>
+  </li>
+  <li>
+    <a href="/pricing">Pricing</a>
+  </li>
+  <li>
+    <a href="/contact">Contact</a>
+  </li>
+</ul>
+```
+
+When a screen reader user finds the list, their software will announce something like "list, 4 items".  
+
+Here's a demo of the navigation used with the screen reader NVDA on Windows.  
+
+<figure>
+{% Video src="video/kheDArv5csY6rvQUJDbWRscckLr1/vfuNO0UE0xNG4DiKKqQG.mov", autoplay="true", loop="true", controls="true" %}
+</figure>
+
+Now you have to adapt the styling to make it look like before.
+
+
+```css
+/* Remove the default list styling and create a flexible layout for the list */
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Basic link styling */
+a {
+  --text-color: var(--color-shades-dark);
+
+  border-block-end: 3px solid var(--border-color, transparent);
+  color: var(--text-color);
+  padding: 0.1rem;
+  text-decoration: none;
+}
+```
+
+
+Using lists can have many advantages for screen reader users:
+
+-  They can get the total number of items before they interact with the items.
+-  They may use shortcuts to jump from list item to list item.
+-  They may use shortcuts to jump from list to list.
+-  The screen reader may announce the index of the current item (for example, "list item, two of four").
+
+On top of that, if the page is presented without CSS, the list shows the links as a coherent group of items instead of just a pile of links. 
+
+A notable detail about VoiceOver in Safari is that you lose all these advantages, when you set `list-style: none`. This is by design. The WebKit team decided to [remove list semantics, when a list doesn't look like a list](https://bugs.webkit.org/show_bug.cgi?id=170179). Depending on the complexity of your navigation, this may or may not be an issue. On one hand, the navigation is still usable and it only affects VoiceOver in Safari. VoiceOver with Chrome or Firefox still announces the number of items, as well as other screen readers, like NVDA. On the other hand, the semantic information could be really useful in some situations. To make that decision, you should test the navigation with actual screen reader users and get their feedback. If you decide that you need VoiceOver in Safari to behave like all the other screen readers, you can work around the issue by setting the ARIA list role explicitly on the `<ul>`. This reverts the behaviour to the state before you've removed the list styling. Visually, the list still looks the same.
+
+```html
+<ul role="list">
+  <li>
+     <a href="/home">Home</a>
+  </li>
+  ...
+</ul>
+```
+
+{% Aside %}
+If you validate your HTML and the validation service reports a warning like "The list role is unnecessary for element ul", you can safely ignore that. 
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGMGqxd',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/bGMGqxd">Step 3: Announcing the number of items on CodePen</a>.</figcaption>
+</figure> 
+
+
+## Add a landmark
+
+With little effort, you've made great improvements for screen reader users, but there's one more thing you can do. The navigation is semantically still just a list of links and it's hard to tell that this specific list is the main navigation of your website. You can turn this ordinary list into a navigational list by wrapping the `<ul>` in a `<nav>` element.
+
+Using the `<nav>` element has several advantages. Notably, a screen reader announces something like "navigation", when the user interacts with it, and it adds a [landmark](/headings-and-landmarks/) to the page. Landmarks are special regions on the page, like the `<header>`, `<footer>` or `<main>`, to which a screen reader can jump. Having landmarks on a page can be useful, because it allows screen reader users to access important regions on the page directly without having to interact with the rest of the page. For example, you can jump from landmark to landmark by pressing the **D** key in NVDA. In Voice Over you can use the rotor to list all landmarks on the page by pressing **VO** + **U**.
+
+<figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/ietbB6hSonYQR65N7NBG.png", alt="A list of four landmarks: banner, navigation, main, content information.", width="800", height="457" %}
+    <figcaption>Rotor in VoiceOver listing all the landmarks on a page. </figcaption>
+</figure>
+
+
+In this list you see 4 landmarks: **banner** which is the `<header>` element, **navigation** is the `<nav>`, **main** the `<main>` element, and **content information** is the `<footer>`. This list shouldn't be too long, you really only want to mark critical parts of your UI as landmarks, like the site search, a local navigation, or a pagination.  
+
+If you have a site-wide navigation, a local navigation for the page, and a pagination on a single page, you might also have 3 `<nav>` elements. That's fine, but now there are three navigation landmarks and semantically they all look the same. It's hard to tell them apart, unless you know the structure of the page really well.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/4gvD6LQ2lyILiWaWmH4K.png", alt="Image showing three landmarks that all say 'navigation'.", width="800", height="457" %}
+
+  <figcaption>The rotor in VoiceOver listing three unlabelled navigation landmarks. </figcaption> 
+</figure>
+
+To make them distinguishable, you should label them by either using `aria-labelledby` or `aria-label`.
+
+```html
+<nav aria-label="Main">
+    <ul>
+      <li>
+         <a href="/home">Home</a>
+      </li>
+      ...
+  </ul>
+</nav>
+...
+<nav aria-label="Select page">
+    <ul>
+      <li>
+         <a href="/page-1">1</a>
+      </li>
+      ...
+    </ul>
+</nav>
+```
+
+If the label you've picked already exists somewhere in the page, you can use `aria-labelledby` instead and reference the existing label using the `id` attribute.
+
+```html
+<nav aria-labelledby="pagination_heading">
+  <h2 id="pagination_heading">Select a page</h2>
+  <ul>
+    <li>
+       <a href="/page-1">1</a>
+    </li>
+    ...
+  </ul>
+</nav>
+```
+
+A concise label is sufficient, don't get too wordy. Omit expressions like "navigation" or "menu" because the screen reader already provides users with this information.
+
+<figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/tmDUEwjcXnymsvjIqGSC.png", alt='Landmarks "banner", "main navigation", "main", "page navigation", "select page navigation" and "content information".', width="800", height="457" %}
+  <figcaption>VoiceOver listing the landmarks "banner", "main navigation", "main", "page navigation", "select page navigation" and "content information". </figcaption> 
+</figure>
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWGWpqp',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/MWGWpqp">Step 4: Adding a landmark on CodePen</a>.</figcaption>
+</figure> 
+
+## Hide the navigation on narrow viewports
+
+Personally, I'm not a big fan of hiding the main navigation on narrow viewports, but if the list of links gets too long, there's no way around it. If that's the case, instead of the list, users see a button labelled "Menu" or a burger icon or a combination. Clicking the button shows and hides the list. If you know basic JavaScript and CSS, that's a doable task, but there are several things in terms of UX and accessibility you have to take care of.
+
+-  You have to hide the list in an accessible manner.
+-  The navigation must be keyboard accessible.
+-  The navigation must communicate whether or not it's visible.
+
+### Adding a burger button
+
+Since you're following the progressive enhancement principle, you want to make sure that your navigation still works and makes sense even with JavaScript turned off.  
+The first thing your navigation needs is a burger button. You create it in HTML in a template element, clone it in JavaScript, and add it to the navigation.
+
+<figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/dB0jgtJ2fnsKXP9sWhaA.png", alt="A page displaying a burger button.", width="800", height="495" %}
+    <figcaption>Result: Instead of links, the navigation shows a burger button on narrow viewports. </figcaption>
+</figure>
+
+
+```html
+<nav id="mainnav">
+  ...
+</nav>
+
+<template id="burger-template">
+  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
+    <svg width="24" height="24" aria-hidden="true">
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
+    </svg>
+  </button>
+</template>
+```
+
+1. The `aria-expanded` attribute tells the screen reader software whether or not the element the button controls is expanded.
+1. `aria-label` gives the button a so-called accessible name, a text alternative for the burger icon.
+1. You hide the `<svg>` from assistive technology using `aria-hidden` because it already has a text label provided by `aria-label`.
+1. `aria-controls` tells assistive technology, that supports the attribute (for example JAWS), which element the button controls.
+
+```js
+const nav = document.querySelector('#mainnav')
+const list = nav.querySelector('ul');
+const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
+const button = burgerClone.querySelector('button');
+
+// Toggle aria-expanded attribute
+button.addEventListener('click', e => {
+  // aria-expanded="true" signals that the menu is currently open
+  const isOpen = button.getAttribute('aria-expanded') === "true"
+  button.setAttribute('aria-expanded', !isOpen);
+});
+
+// Hide list on keydown Escape
+nav.addEventListener('keyup', e => {
+  if (e.code === 'Escape') {
+    button.setAttribute('aria-expanded', false);
+  }
+});
+
+// Add the button to the page
+nav.insertBefore(burgerClone, list);
+```
+
+1. It's convenient for users to have the ability to close the navigation whenever they want, for example by pressing the Escape key.
+1. It's important to use `insertBefore` instead of `appendChild` because the button should be the first element in your navigation. If a keyboard or screen reader user presses **Tab** after clicking the button, they expect to focus the first item in the list. If the button comes after the list, that would not be the case.
+
+Next, you reset the default styling of the button and make sure that it's only visible on narrow viewports.
+
+```css
+@media (min-width: 48em) {
+  nav {
+    --nav-button-display: none;
+  }
+}
+
+/* Reset button styling */
+button {
+  all: unset;
+  display: var(--nav-button-display, flex);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjvjWaZ',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/JjvjWaZ">Step 5: Adding a burger button on CodePen</a>.</figcaption>
+</figure> 
+
+### Hiding the list
+
+Before you hide the list, position and style the navigation and list so that the layout is optimised for narrow viewports, but still looks good on larger screens.  
+First, remove the `<nav>` from the natural flow of the page and place it at the top end corner of the viewport.
+
+```css
+@media (min-width: 48em) {
+  nav {
+    --nav-button-display: none;
+    --nav-position: static;
+  }
+}
+
+nav {
+  position: var(--nav-position, fixed);
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+}
+```
+
+Next, change the layout on narrow viewports by adding a new custom property `(—-nav-list-layout)`. The layout is column by default and switches to row on larger screens.
+
+```css
+@media (min-width: 48em) {
+  nav {
+    --nav-button-display: none;
+    --nav-position: static;
+  }
+
+  ul {
+    --nav-list-layout: row;
+  }
+}
+
+ul {
+  display: flex;
+  flex-direction: var(--nav-list-layout, column);
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+```
+
+Your navigation should look something like this on narrow viewports.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/fl6W5M221mboQckgvco4.png", alt="The page showing the navigation list and the burger button.", width="800", height="495" %}
+  <figcaption>Both the burger button and the list are placed in the top end corner of the viewport.</figcaption>
+</figure>
+
+The list obviously needs some CSS. We'll move it up to the top end corner, make it fill the whole screen vertically, apply a `background-color` and a `box-shadow`.
+
+```css
+@media (min-width: 48em) {
+  nav {
+    --nav-button-display: none;
+    --nav-position: static;
+  }
+  
+  ul {
+    --nav-list-layout: row;
+    --nav-list-position: static;
+    --nav-list-padding: 0;
+    --nav-list-height: auto;
+    --nav-list-width: 100%;
+    --nav-list-shadow: none;
+  }
+}
+
+ul {
+  background: rgb(255, 255, 255);
+  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
+  display: flex;
+  flex-direction: var(--nav-list-layout, column);
+  flex-wrap: wrap;
+  gap: 1rem;
+  height: var(--nav-list-height, 100vh);
+  list-style: none;
+  margin: 0;
+  padding: var(--nav-list-padding, 2rem);
+  position: var(--nav-list-position, fixed);
+  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
+  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
+  width: var(--nav-list-width, min(22rem, 100vw));
+}
+
+button {
+  all: unset;
+  display: var(--nav-button-display, flex);
+  position: relative;
+  z-index: 1;
+}
+```
+
+The list should look something like this on narrow viewports, more like a sidebar than a simple list.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/mwbiCwTVcMomSvlTQTIP.png", alt="The navigation list open.", width="800", height="495" %}
+</figure>
+
+Finally, hide the list, only show it when the user clicks the button once and hide it when they click again. It's important to only hide the list and not the whole navigation because hiding the navigation would also mean hiding an important landmark. 
+
+Earlier, you added a click event to the button to toggle the value of the `aria-expanded` attribute. You can use that information as a condition for showing and hiding the list in CSS.
+
+```css
+@media (min-width: 48em) {
+  ul {
+    --nav-list-visibility: visible;
+  }
+}
+
+ul {
+  visibility: var(--nav-list-visibility, visible);
+}
+
+/* Hide the list on narrow viewports, if it comes after an element with
+   aria-expanded set to "false". */
+[aria-expanded="false"] + ul {
+  visibility: var(--nav-list-visibility, hidden);
+}
+```
+
+It's important to use a property declaration like `visibility: hidden` or `display: none` instead of `opacity: 0` or `translateX(100%)` to hide the list. These properties make sure that the links are not focusable when the navigation is hidden. Using `opacity` or `translate` will remove content visually so the links would be invisible yet still accessible using the keyboard which would be confusing and frustrating. Using `visibility` or `display` hides it visually and makes it inaccessible, therefore hiding it for all users. 
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwywpYO',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/RwywpYO">Step 6: Hiding the list</a>.</figcaption>
+</figure> 
+
+### Animating the list
+
+If you're wondering why to use `visibility: hidden;` over `display: none;`, it's because you can animate visibility. It only has two states, `hidden` and `visible`, but you can combine it with another property like `transform` or `opacity` to create a slide- or fade-in effect. That wouldn't work with display: none because the display property is not animatable. 
+
+The following CSS transitions `opacity` to create a fade-in and fade-out effect.
+
+```css
+ul {
+  transition: opacity 0.6s linear, visibility 0.3s linear;
+  visibility: var(--nav-list-visibility, visible);
+}
+
+[aria-expanded="false"] + ul {
+  opacity: 0;
+  visibility: var(--nav-list-visibility, hidden);
+}
+```
+
+If you want to animate motion instead, you should consider wrapping the `transition` property in a [prefers-reduced-motion](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion) media query because animations can trigger [nausea, dizziness, and headaches](https://alistapart.com/article/accessibility-for-vestibular/) in some users.
+
+```css
+ul {
+  visibility: var(--nav-list-visibility, visible);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  ul {
+    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
+  }
+}
+
+[aria-expanded="false"] + ul {
+  transform: var(--nav-list-transform, translateX(100%));
+  visibility: var(--nav-list-visibility, hidden);
+}
+```
+
+This makes sure that only people who have no preference for reduced motion will see the animation.  
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOxOBeM',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/jOxOBeM">Step 7: Animating the list on CodePen</a>.</figcaption>
+</figure> 
+
+## Improve focus styling
+
+Keyboard users rely on the focus styles of elements for orientation and navigation on a page. Default focus styles are better than no focus styles (which happens if you set `outline: none`), but having more clearly visible custom focus styles improves the user experience.  
+
+Here's how the default focus styles on the link look in Chrome 103.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/wcNrqh5i0lVD1zAznxsk.png", alt="A blue 2px outline around a focused link in Chrome 103.", width="800", height="495" %}
+</figure>  
+
+You can improve that by providing your own styles in your own colors. By using `:focus-visible` instead of `:focus` you let the browser decide when it's appropriate to show focus styles. `:focus` styles will be visible to everyone, mouse, keyboard and touch users, no matter whether they need them or not. With `:focus-visible` the browser uses internal heuristics to decide whether to show them just to keyboard users or to everyone.
+
+```css
+/* Remove the default :focus outline */
+*:focus {
+  outline: none;
+}
+
+/* Show a custom outline on :focus-visible */
+*:focus-visible {
+  outline: 2px solid var(--color-shades-dark);
+  outline-offset: 4px;
+}
+```
+
+### Browser support for `:focus-visible`
+
+{% BrowserCompat 'css.selectors.focus-visible' %}
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/rLVEARIKPeDR1ahwaxjm.png", alt="Clearly visible dark 2px outline with spacing inside.", width="800", height="496" %}
+</figure>
+
+There are different ways of highlighting items when they're focused. Using the `outline` property is recommended because it doesn't break layout, which could happen with `border`, and it works well with [high contrast mode on Windows](/color-and-contrast-accessibility/#high-contrast-mode). Properties that don't work well are `background-color` or `box-shadow`, because they might not be displayed at all with custom contrast settings.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/iAziYKbiDIMw0w1TrEK8.png", alt="A site with a dark background with the focus highlighted in purple.", width="800", height="495" %}
+</figure>
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExLxWdQ',
+  height: 500,
+  theme: 'light',
+  tab: 'result'
+} %}
+
+  <figcaption>View <a href="https://codepen.io/web-dot-dev/pen/ExLxWdQ">Step 8: Improve focus styles on CodePen</a>.</figcaption>
+</figure> 
+
+Congratulations! You've built a progressively enhanced, semantically rich, accessible, and mobile friendly main navigation.  
+
+There's always something that can be improved, for example:
+
+-  You could consider [trapping focus](https://hidde.blog/using-javascript-to-trap-focus-in-an-element/) inside the navigation or making the rest of the page [inert](https://developer.chrome.com/articles/inert/) on narrow viewports.
+-  You can add a [skip link](/headings-and-landmarks/#bypass-repetitive-content-with-skip-links) at the top of the page to allow keyboard users to skip the navigation.
+
+If you remember how this article started, with the aim that the solution should "neither be too simple, nor too complicated", that's where we are now. It's possible however to over-engineer a navigation. 
+
+## Navigations versus menus
+
+There's a clear difference between navigations and menus. Navigations are collections of links for navigating related documents. Menus are collections of actions to perform in a document. Sometimes these tasks overlap. You might have a navigation that also includes a button that performs an action, like opening a modal window, or you might have a menu where one action is navigating to another page, like a help page. When that's the case, it's important that you don't mash-up ARIA roles, but identify the main purpose of your component and pick the markup and the roles accordingly.  
+
+The `<nav>` element has an implicit ARIA role of navigation which is sufficient to communicate that the element is a navigation, but often you see sites also use menu, menubar, and menuitem. Since we sometimes use these terms interchangeably, thinking that combining them to improve the experience for screen reader users might make sense. Before we learn why that's usually not the case, let's have a look at the official definition of these roles.
+
+### The navigation role
+
+<blockquote><p>A collection of navigational <a href="https://www.w3.org/TR/wai-aria-1.1/#dfn-element">elements</a> (usually links) for navigating the document or related documents.</p>  
+<cite><a href="https://www.w3.org/TR/wai-aria/#navigation">navigation (role) WAI-ARIA 1.1</a></cite>
+</blockquote>
+
+### The menu role
+
+<blockquote><p>A menu is often a list of common actions or functions that the user can invoke. The menu <a href="https://www.w3.org/TR/wai-aria-1.1/#dfn-role">role</a> is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.  </p>
+<cite><a href="https://www.w3.org/TR/wai-aria/#menu">menu (role) WAI-ARIA 1.1</a></cite>
+</blockquote>
+
+### The menubar role
+
+<blockquote><p>A presentation of menu that usually remains visible and is usually presented horizontally.  
+The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors <em>should</em> ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface. </p>
+<cite><a href="https://www.w3.org/TR/wai-aria/#menubar">menubar (role) WAI-ARIA 1.1</a></cite>
+</blockquote>
+
+### The menuitem role
+
+<blockquote><p>An option in a set of choices contained by a <a href="https://www.w3.org/TR/wai-aria-1.1/#menu">menu</a> or <a href="https://www.w3.org/TR/wai-aria-1.1/#menubar">menubar</a>. </p> 
+<cite><a href="https://www.w3.org/TR/wai-aria/#menuitem">menuitem (role) WAI-ARIA 1.1</a></cite>
+</blockquote>
+
+The specification is very clear here, use navigation for navigating the document or related documents and menu only for a list of actions or functions similar to menus in desktop applications. If you're not building the next Google Docs, you probably don't need any of the menu roles for the main navigation.
+
+### When is a menu appropriate?
+
+The primary use of menu items isn't navigation, but to perform actions. Let's say you have a list or table of data and users can perform certain actions on each item in the list. You could add a button to each row and show the actions when the users click the button.
+
+```html
+<ul>
+  <li>
+    Product 1
+
+    <button aria-expanded="false" aria-controls="options1">Edit</button>
+
+    <div role="menu" id="options1">
+      <button role="menuitem">
+        Duplicate
+      </button>
+      <button role="menuitem">
+        Delete
+      </button>
+      <button role="menuitem">
+        Disable
+      </button>
+    </div>
+  </li>
+  <li>
+    Product 2
+    ...
+  </li>
+</ul>
+```
+
+### Implications of using menu roles
+
+It's really important to use these menu roles wisely because a lot can go wrong. 
+
+
+Menus expect a certain DOM structure. `menuitem` must be a direct child item of `menu`. The following code could break the semantic behaviour:
+
+```html
+ <!-- Wrong, don't do this -->
+<ul role="menu">
+  <li>
+    <a href="#" role="menuitem">Item 1</a>
+  </li>
+</ul>
+```
+
+Savvy users expect certain keyboard shortcuts to work with menus and menubars. Based on the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/), this includes:
+
+-  **Enter** and **Space** to select menu items.
+-  Arrow keys in all directions to navigate between items.
+-  The **Home** and **End** keys to move focus to the first or last items respectively.
+-  a-z to move focus to the next menu item with a label that starts with the typed character.
+-  **Esc** to close the menu.
+
+If a screen reader detects a menu, the software might automatically change the browsing mode, enabling usage of the previously mentioned shortcuts. Inexperienced screen reader users might not be able to use the menu because they don't know these shortcuts or how to use them.  
+
+That's the same for keyboard users who might expect that they can use **Shift** and **Shift** + **Tab**.  
+  
+There's a lot to consider when you create menus and menu bars, with whether it's appropriate to use them in the first place leading the way. When you're building a typical website, the nav element with a list and links is all you need. This also includes Single Page Applications (SPA) or web apps. The underlying stack doesn't matter. Unless you're building something that's very close to a desktop application, avoid menu roles.
+
+## Additional Resources
+
+-  [Fixing Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) by Scott O'hara.
+-  [Don't Use ARIA Menu Roles for Site Nav](https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html) by Adrian Roselli.
+-  [Menus & Menu Buttons](https://inclusive-components.design/menus-menu-buttons/) by Heydon Pickering.
+-  [WAI-ARIA menus, and why you should handle them with great care](https://www.marcozehe.de/wai-aria-menus-use-with-care/) by Marco Zehe.
+-  [Hiding content responsibly](https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/) by Kitty Giraudel.
+-  [:focus-visible Is Here](https://matthiasott.com/notes/focus-visible-is-here) by Matthias Ott.
+
+_Hero image by [Mick Haupt](https://unsplash.com/@rocinante_11?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/en/blog/websockets-basics/index.md b/src/site/content/en/blog/websockets-basics/index.md
new file mode 100644
index 00000000000..a0a5fc39ce9
--- /dev/null
+++ b/src/site/content/en/blog/websockets-basics/index.md
@@ -0,0 +1,159 @@
+---
+title: Introducing WebSockets - Bringing Sockets to the Web
+authors:
+  - malteubl
+  - agektmr
+date: 2012-10-20
+tags:
+  - blog
+---
+## The problem: Low latency client-server and server-client connections
+
+The web has been largely built around the so-called request/response paradigm of HTTP. A client loads up a web page and then nothing happens until the user clicks onto the next page. Around 2005, AJAX started to make the web feel more dynamic. Still, all HTTP communication was steered by the client, which required user interaction or periodic polling to load new data from the server.
+
+Technologies that enable the server to send data to the client in the very moment when it knows that new data is available have been around for quite some time. They go by names such as 'Push' or ['Comet'](http://en.wikipedia.org/wiki/Comet_(programming)). One of the most common hacks to create the illusion of a server initiated connection is called long polling. With long polling, the client opens an HTTP connection to the server which keeps it open until sending response. Whenever the server actually has new data it sends the response (other techniques involve [Flash](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/Socket.html), [XHR multipart](http://cometdaily.com/2007/12/27/a-standards-based-approach-to-comet-communication-with-rest/) requests and so called [htmlfiles](http://cometdaily.com/2007/10/25/http-streaming-and-internet-explorer/)).
+Long polling and the other techniques work quite well. You use them every day in applications such as GMail chat.
+
+However, all of these work-arounds share one problem: They carry the overhead of HTTP, which doesn't make them well suited for low latency applications. Think multiplayer first person shooter games in the browser or any other online game with a realtime component.
+
+## Introducing WebSocket: Bringing sockets to the web
+
+The [WebSocket](http://dev.w3.org/html5/websockets/) specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.
+
+## Getting Started
+
+You open up a WebSocket connection simply by calling the WebSocket constructor:
+
+```js
+var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);
+```
+
+Notice the `ws:`. This is the new URL schema for WebSocket connections. There is also
+`wss:` for secure WebSocket connection the same way `https:` is used for secure HTTP
+connections.
+
+Attaching some event handlers immediately to the connection allows you to know when the connection is opened, received incoming messages, or there is an error.
+
+The second argument accepts optional sub-protocols. It can be a string or an array of strings. Each string should represent a sub-protocol name and server accepts only one of passed sub-protocols in the array. Accepted sub-protocol can be determined by accessing `protocol` property of WebSocket object.
+
+The sub-protocol names must be one of registered sub-protocol names in [IANA registry](http://www.iana.org/assignments/websocket/websocket.xml). There is currently only one sub-protocol name (soap) registered as of February 2012.
+
+```js
+// When the connection is open, send some data to the server
+connection.onopen = function () {
+connection.send('Ping'); // Send the message 'Ping' to the server
+};
+
+// Log errors
+connection.onerror = function (error) {
+console.log('WebSocket Error ' + error);
+};
+
+// Log messages from the server
+connection.onmessage = function (e) {
+console.log('Server: ' + e.data);
+};
+```
+
+### Communicating with the server
+
+As soon as we have a connection to the server (when the `open` event is fired) we can start sending data to the server using the `send('your message')` method on the connection object. It used to support only strings, but in the latest spec it now can send binary messages too. To send binary data, you can use either `Blob` or `ArrayBuffer` object.
+
+```js
+// Sending String
+connection.send('your message');
+
+// Sending canvas ImageData as ArrayBuffer
+var img = canvas_context.getImageData(0, 0, 400, 320);
+var binary = new Uint8Array(img.data.length);
+for (var i = 0; i < img.data.length; i++) {
+binary[i] = img.data[i];
+}
+connection.send(binary.buffer);
+
+// Sending file as Blob
+var file = document.querySelector('input[type="file"]').files[0];
+connection.send(file);
+```
+
+Equally the server might send us messages at any time. Whenever this happens the `onmessage` callback fires. The callback receives an event object and the actual message is accessible via the `data` property.
+
+WebSocket can also receive binary messages in the latest spec. Binary frames can be received in `Blob` or `ArrayBuffer` format. To specify the format of the received binary, set the binaryType property of WebSocket object to either 'blob' or 'arraybuffer'. The default format is 'blob'. (You don't have to align binaryType param on sending.)
+
+```js
+// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
+connection.binaryType = 'arraybuffer';
+connection.onmessage = function(e) {
+console.log(e.data.byteLength); // ArrayBuffer object if binary
+};
+```
+
+Another newly added feature of WebSocket is extensions. Using extensions, it will be possible to send frames [compressed](http://tools.ietf.org/html/draft-tyoshino-hybi-websocket-perframe-deflate-05), [multiplexed](http://tools.ietf.org/html/draft-tamplin-hybi-google-mux-02), etc. You can find server accepted extensions by examining the extensions property of the WebSocket object after the open event. There is no officially published extensions spec just yet as of February 2012.
+
+```js
+// Determining accepted extensions
+console.log(connection.extensions);
+```
+
+## Cross-origin communication
+
+Being a modern protocol, cross origin communication is baked right into WebSocket. While you should still make sure only to communicate with clients and servers that you trust, WebSocket enables communication between parties on any domain. The server decides whether to make its service available to all clients or only those that reside on a set of well defined domains.
+
+## Proxy servers
+
+Every new technology comes with a new set of problems. In the case of WebSocket it is the compatibility with proxy servers which mediate HTTP connections in most company networks. The WebSocket protocol uses the HTTP upgrade system (which is normally used for HTTP/SSL) to 'upgrade' an HTTP connection to a WebSocket connection. Some proxy servers do not like this and will drop the connection. Thus, even if a given client uses the WebSocket protocol, it may not be possible to establish a connection. This makes the next section even more important :)
+
+## Use WebSockets today
+
+WebSocket is still a young technology and not fully implemented in all browsers. However, you can use WebSocket today with libraries that use one of the fallbacks mentioned above whenever WebSocket is not available. A library that has become very popular in this domain is [socket.io](http://socket.io/) which comes with a client and a server implementation of the protocol and includes fallbacks (socket.io doesn't support binary messaging yet as of Februrary 2012). There are also commercial solutions such as [PusherApp](http://pusherapp.com/) which can be easily integrated into any web environment by providing a HTTP API to send WebSocket messages to clients. Due to the extra HTTP request there will always be extra overhead compared to pure WebSocket.
+
+## The server side
+
+Using WebSocket creates a whole new usage pattern for server side applications. While traditional server stacks such as LAMP are designed around the HTTP request/response cycle they often do not deal well with a large number of open WebSocket connections. Keeping a large number of connections open at the same time requires an architecture that receives high concurrency at a low performance cost. Such architectures are usually designed around either threading or so called non-blocking IO.
+
+### Server side implementations
+
+- Node.js
+    - [Socket.IO](http://socket.io/)
+    - [WebSocket-Node](https://github.com/Worlize/WebSocket-Node)
+    - [ws](https://github.com/einaros/ws)
+- Java
+    - [Jetty](http://www.eclipse.org/jetty/)
+- Ruby
+    - [EventMachine](http://github.com/igrigorik/em-websocket)
+- Python
+    - [pywebsocket](http://code.google.com/p/pywebsocket/)
+    - [Tornado](https://github.com/facebook/tornado)
+- Erlang
+    - [Shirasu](https://github.com/michilu/shirasu)
+- C++
+    - [libwebsockets](http://git.warmcat.com/cgi-bin/cgit/libwebsockets/)
+- .NET
+    - [SuperWebSocket](http://superwebsocket.codeplex.com/)
+
+### Protocol versions
+
+The wire protocol (a handshake and the data transfer between client and server) for WebSocket is now [RFC6455](http://tools.ietf.org/html/rfc6455). The latest Chrome and Chrome for Android are fully compatible with RFC6455 including binary messaging. Also, Firefox will be compatible on version 11, Internet Explorer on version 10. You can still use older protocol versions but it is not recommended since they are known to be vulnerable. If you have server implementations for older versions of WebSocket protocol, we recommend you to upgrade it to the latest version.
+
+## Use cases
+
+Use WebSocket whenever you need a truly low latency, near realtime connection between the client and the server. Keep in mind that this might involve rethinking how you build your server side applications with a new focus on technologies such as event queues. Some example use cases are:
+
+- Multiplayer online games
+- Chat applications
+- Live sports ticker
+- Realtime updating social streams
+
+## Demos
+- [Plink](http://labs.dinahmoe.com/plink/)
+- [Paint With Me](http://paintwith.me/)
+- [Pixelatr](http://connorhd.co.uk/project/pixelatr/)
+- [Dashed](http://www.dashed.com/)
+- [Massively multiplayer online crossword](http://scrabb.ly/)
+- [Ping server (used in examples above)](http://www.websockets.org/echo.html)
+- [HTML5demos sample](http://html5demos.com/web-socket)
+
+## References
+- [The WebSocket API](https://websockets.spec.whatwg.org/)
+- [The WebSocket Protocol](https://datatracker.ietf.org/doc/html/draft-ietf-hybi-thewebsocketprotocol-03)
+- [WebSockets - MDN](https://developer.mozilla.org/docs/Web/API/WebSocket)
diff --git a/src/site/content/en/blog/websocketstream/hero.jpg b/src/site/content/en/blog/websocketstream/hero.jpg
deleted file mode 100644
index 66a28ce7707..00000000000
Binary files a/src/site/content/en/blog/websocketstream/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/websocketstream/index.md b/src/site/content/en/blog/websocketstream/index.md
deleted file mode 100644
index 4b1a4d8a2ff..00000000000
--- a/src/site/content/en/blog/websocketstream/index.md
+++ /dev/null
@@ -1,322 +0,0 @@
----
-title: |
-  WebSocketStream: integrating streams with the WebSocket API
-subhead: |
-  Prevent your app from getting drowned in WebSocket messages
-  or flooding a WebSocket server with messages by applying backpressure.
-authors:
-  - thomassteiner
-date: 2020-03-27
-hero: hero.jpg
-alt: A fire hose with water dripping out of it.
-description: |
-  WebSocketStream integrates streams with the WebSocket API.
-  This allows your app to apply backpressure to received messages.
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - backpressure
-  - websocket
-  - websocketstream
-  - capabilities
-origin_trial:
-  url: https://developers.chrome.com/origintrials/#/view_trial/1977080236415647745
----
-## Background
-
-### The WebSocket API
-
-The [WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
-provides a JavaScript interface to the [WebSocket protocol](https://tools.ietf.org/html/rfc6455),
-which makes it possible to open a two-way interactive communication session
-between the user's browser and a server.
-With this API, you can send messages to a server and receive event-driven responses
-without polling the server for a reply.
-
-### The Streams API
-
-The [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)
-allows JavaScript to programmatically access streams of data chunks received over the network
-and process them as desired.
-An important concept in the context of streams is
-[backpressure](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Concepts#Backpressure).
-This is the process by which a single stream or a pipe chain
-regulates the speed of reading or writing.
-When the stream itself or a stream later in the pipe chain is still busy
-and isn't yet ready to accept more chunks,
-it sends a signal backwards through the chain to slow delivery as appropriate.
-
-### The Problem with the current WebSocket API
-
-#### Applying backpressure to received messages is impossible
-
-With the current WebSocket API, reacting to a message happens in
-[`WebSocket.onmessage`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onmessage),
-an `EventHandler` called when a message is received from the server.
-
-Let's assume you had an application that needs to perform heavy data crunching operations
-whenever a new message is received.
-You would probably set up the flow similar to the code below,
-and since you `await` the result of the `process()` call, you should be good, right?
-
-```js
-// A heavy data crunching operation.
-const process = async (data) => {
-  return new Promise((resolve) => {
-    window.setTimeout(() => {
-      console.log('WebSocket message processed:', data);
-      return resolve('done');
-    }, 1000);
-  });
-};
-
-webSocket.onmessage = async (event) => {
-  const data = event.data;
-  // Await the result of the processing step in the message handler.
-  await process(data);
-};
-```
-
-Wrong! The problem with the current WebSocket API is that there is no way to apply backpressure.
-When messages arrive faster than the `process()` method can handle them,
-the render process will either fill up memory by buffering those messages,
-become unresponsive due to 100% CPU usage, or both.
-
-#### Applying backpressure to sent messages is non-ergonomic
-
-Applying backpressure to sent messages is possible, but involves polling the
-[`WebSocket.bufferedAmount`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/bufferedAmount)
-property, which is inefficient and non-ergonomic.
-This read-only property returns the number of bytes of data that have been queued
-using calls to
-[`WebSocket.send()`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send),
-but not yet transmitted to the network.
-This value resets to zero once all queued data has been sent,
-but if you keep calling `WebSocket.send()`,
-it will continue to climb.
-
-## What is the WebSocketStream API? {: #what }
-
-The WebSocketStream API deals with the problem of non-existent or non-ergonomic backpressure
-by integrating streams with the WebSocket API.
-This means backpressure can be applied "for free", without any extra cost.
-
-### Suggested use cases for the WebSocketStream API {: #use-cases }
-
-Examples of sites that can use this API include:
-
-* High-bandwidth WebSocket applications that need to retain interactivity,
-  in particular video and screen-sharing.
-* Similarly, video capture and other applications that generate a lot of data in the browser
-  that needs to be uploaded to the server.
-  With backpressure, the client can stop producing data rather than accumulating data in memory.
-
-## Current status {: #status }
-
-<div class="w-table-wrapper">
-
-| Step                                       | Status                       |
-| ------------------------------------------ | ---------------------------- |
-| 1. Create explainer                        | [Complete][explainer]        |
-| 2. Create initial draft of specification   | [In progress][spec]          |
-| 3. Gather feedback & iterate on design     | [In progress](#feedback)     |
-| 4. Origin trial                            | [Complete][ot]               |
-| 5. Launch                                  | Not started                  |
-
-</div>
-
-## How to use the WebSocketStream API {: #use }
-
-### Introductory example
-
-The WebSocketStream API is promise-based, which makes dealing with it feel natural
-in a modern JavaScript world.
-You start by constructing a new `WebSocketStream` and passing it the URL of the WebSocket server.
-Next, you wait for the `connection` to be established,
-which results in a
-[`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/ReadableStream)
-and/or a
-[`WritableStream`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream/WritableStream).
-
-By calling the
-[`ReadableStream.getReader()`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader)
-method, you finally obtain a
-[`ReadableStreamDefaultReader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader),
-which you can then [`read()`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/read)
-data from until the stream is done, that is, until it returns an object of the form
-`{value: undefined, done: true}`.
-
-Accordingly, by calling the
-[`WritableStream.getWriter()`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream/getWriter)
-method, you finally obtain a
-[`WritableStreamDefaultWriter`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter),
-which you can then [`write()`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter/write)
-data to.
-
-```js
-  const wss = new WebSocketStream(WSS_URL);
-  const {readable, writable} = await wss.connection;
-  const reader = readable.getReader();
-  const writer = writable.getWriter();
-
-  while (true) {
-    const {value, done} = await reader.read();
-    if (done) {
-      break;
-    }
-    const result = await process(value);
-    await writer.write(result);
-  }
-```
-
-#### Backpressure
-
-What about the promised backpressure feature?
-As I wrote above, you get it "for free", no extra steps needed.
-If `process()` takes extra time, the next message will only be consumed once the pipeline is ready.
-Likewise the `WritableStreamDefaultWriter.write()` step
-will only proceed if it is safe to do so.
-
-### Advanced examples
-
-The second argument to WebSocketStream is an option bag to allow for future extension.
-Currently the only option is `protocols`,
-which behaves the same as the
-[second argument to the WebSocket constructor](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#Parameters:~:text=respond.-,protocols):
-
-```js
-const chatWSS = new WebSocketStream(CHAT_URL, {protocols: ['chat', 'chatv2']});
-const {protocol} = await chatWSS.connection;
-```
-
-The selected `protocol` as well as potential `extensions` are part of the dictionary
-available via the `WebSocketStream.connection` promise.
-All the information about the live connection is provided by this promise,
-since it is not relevant if the connection fails.
-
-```js
-const {readable, writable, protocol, extensions} = await chatWSS.connection;
-```
-
-### Information about closed WebSocketStream connection
-
-The information that was available from the
-[`WebSocket.onclose`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onclose) and
-[`WebSocket.onerror`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onerror) events
-in the WebSocket API is now available via the `WebSocketStream.closed` promise.
-The promise rejects in the event of an unclean close,
-otherwise it resolves to the code and reason sent by the server.
-
-All possible status codes and their meaning is explained in the
-[list of `CloseEvent` status codes](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes).
-
-```js
-const {code, reason} = await chatWSS.closed;
-```
-
-### Closing a WebSocketStream connection
-
-A WebSocketStream can be closed with an
-[`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
-Therefore, pass an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)
-to the `WebSocketStream` constructor.
-
-```js
-const controller = new AbortController();
-const wss = new WebSocketStream(URL, {signal: controller.signal});
-setTimeout(() => controller.abort(), 1000);
-```
-
-As an alternative, you can also use the `WebSocketStream.close()` method,
-but its main purpose is to permit specifying the
-[code](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes)
-and reason which is sent to the server.
-
-```js
-wss.close({code: 4000, reason: 'Game over'});
-```
-
-### Progressive enhancement and interoperability
-
-Chrome is currently the only browser to implement the WebSocketStream API.
-For interoperability with the classic WebSocket API,
-applying backpressure to received messages is not possible.
-Applying backpressure to sent messages is possible, but involves polling the
-[`WebSocket.bufferedAmount`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/bufferedAmount)
-property, which is inefficient and non-ergonomic.
-
-#### Feature detection
-
-To check if the WebSocketStream API is supported, use:
-
-```javascript
-if ('WebSocketStream' in window) {
-  // `WebSocketStream` is supported!
-}
-```
-
-## Demo
-
-On supporting browsers, you can see the WebSocketStream API in action in the embedded iframe,
-or [directly on Glitch](https://websocketstream-demo.glitch.me/).
-
-{% Glitch {
-  id: 'websocketstream-demo',
-  path: 'public/index.html'
-} %}
-
-## Feedback {: #feedback }
-
-The Chrome team wants to hear about your experiences with the WebSocketStream API.
-
-### Tell us about the API design
-
-Is there something about the API that doesn't work like you expected?
-Or are there missing methods or properties that you need to implement your idea?
-Have a question or comment on the security model?
-File a spec issue on the corresponding [GitHub repo][issues],
-or add your thoughts to an existing issue.
-
-### Report a problem with the implementation
-
-Did you find a bug with Chrome's implementation?
-Or is the implementation different from the spec?
-File a bug at [new.crbug.com](https://new.crbug.com).
-Be sure to include as much detail as you can, simple instructions for reproducing,
-and enter `Blink>Network>WebSockets` in the **Components** box.
-[Glitch](https://glitch.com/) works great for sharing quick and easy reproduction cases.
-
-### Show support for the API
-
-Are you planning to use the WebSocketStream API?
-Your public support helps the Chrome team to prioritize features
-and shows other browser vendors how critical it is to support them.
-
-Send a Tweet to [@ChromiumDev][cr-dev-twitter] with the `#WebSocketStream` hashtag
-and let us know where and how you're using it.
-
-## Helpful links {: #helpful }
-
-* [Public explainer][explainer]
-* [WebSocketStream API Demo][demo] | [WebSocketStream API Demo source][demo-source]
-* [Tracking bug][cr-bug]
-* [ChromeStatus.com entry][cr-status]
-* Blink Component: [`Blink>Network>WebSockets`][blink-component]
-
-## Acknowledgements
-
-The WebSocketStream API was implemented by [Adam Rice](https://github.com/ricea) and
-[Yutaka Hirano](https://github.com/yutakahirano).
-Hero image by [Daan Mooij](https://unsplash.com/@daanmooij) on
-[Unsplash](https://unsplash.com/photos/91LGCVN5SAI).
-
-[spec]: https://github.com/ricea/websocketstream-explainer/blob/master/README.md
-[issues]: https://github.com/ricea/websocketstream-explainer/issues
-[demo]: https://websocketstream-demo.glitch.me/
-[demo-source]: https://glitch.com/edit/#!/websocketstream-demo
-[explainer]: https://github.com/ricea/websocketstream-explainer/blob/master/README.md
-[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=983030
-[cr-status]: https://chromestatus.com/feature/5189728691290112
-[blink-component]: https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ENetwork%3EWebSockets
-[cr-dev-twitter]: https://twitter.com/ChromiumDev
-[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
-[ot]: https://developers.chrome.com/origintrials/#/view_trial/1977080236415647745
diff --git a/src/site/content/en/blog/wego/index.md b/src/site/content/en/blog/wego/index.md
new file mode 100644
index 00000000000..00b58d940f5
--- /dev/null
+++ b/src/site/content/en/blog/wego/index.md
@@ -0,0 +1,15 @@
+---
+layout: post
+title: Wego
+date: 2017-05-17
+updated: 2017-05-17
+tags:
+  - blog
+  - case-study
+
+---
+
+There's a new way to deliver amazing user experiences on the web. Travel
+company Wego has built a successful AMP based Progressive Web App (PWA).
+
+{% YouTube id="_pmjBZi5zY0" %}
diff --git a/src/site/content/en/blog/welcome-to-immersive/index.md b/src/site/content/en/blog/welcome-to-immersive/index.md
new file mode 100644
index 00000000000..4519d094b00
--- /dev/null
+++ b/src/site/content/en/blog/welcome-to-immersive/index.md
@@ -0,0 +1,412 @@
+---
+title: Welcome to the immersive web
+subhead: The immersive web means virtual world experiences hosted through the browser. This entire virtual reality experiences surfaced in the browser or in VR enabled headsets.
+date: 2018-05-08
+updated: 2018-07-30
+description: The immersive web means virtual world experiences hosted through the browser. This entire virtual reality experiences surfaced in the browser or in VR enabled headsets.
+authors:
+  - joemedley
+tags:
+  - blog
+---
+
+The immersive web means virtual world experiences hosted through the
+browser. This covers entire virtual reality (VR) experiences surfaced in the
+browser or in VR enabled headsets like Google's Daydream, Oculus Rift, Samsung
+Gear VR, HTC Vive, and Windows Mixed Reality Headsets, as well as augmented
+reality experiences developed for AR-enabled mobile devices.
+
+Though we use two terms to describe immersive experiences, they should be
+thought of as a spectrum from complete reality to a completely immersive VR
+environment, with various levels of AR in between.
+
+
+Examples of immersive experiences include:
+
++  Immersive 360° videos
++  Traditional 2D (or 3D) videos presented in immersive surroundings
++  Data visualizations
++  Home shopping
++  Art
++  Something cool nobody's thought of yet
+
+## How do I get there?
+
+The immersive web has been available for nearly a year now in embryonic form.
+This was done through the [WebVR 1.1
+API](https://www.chromestatus.com/features/4532810371039232), which has been
+available in an [origin trial](https://github.com/GoogleChrome/OriginTrials)
+since Chrome 62. That API is also supported by Firefox and Edge as well as a
+polyfill for Safari.
+
+But it's time to move on.
+
+The origin trial ended on July 24, 2018, and the spec has been superseded
+by the [WebXR Device API](https://www.chromestatus.com/features/5680169905815552)
+and a new origin trial.
+
+{% Aside %}
+If you're participating in the WebVR origin trial, you need a
+separate registration for the WebXR Origin Trial
+([explainer](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md),
+[sign-up form](http://bit.ly/OriginTrialSignup)).
+{% endAside %}
+
+## What happened to WebVR 1.1?
+
+We learned a lot from WebVR 1.1, but over time, it became clear that some major
+changes were needed to support the types of applications developers want to
+build. The full list of lessons learned is too long to go into here, but
+includes issues like the API being explicitly tied to the main JavaScript
+thread, too many opportunities  for developers to set up obviously wrong
+configurations, and common uses like magic window being a side effect rather
+than an intentional feature. (Magic window is a technique for viewing immersive
+content without a headset wherein the app renders a single view based on the
+device's orientation sensor.)
+
+The new design facilitates simpler implementations and large performance
+improvements. At the same time, AR and other use cases were emerging and it
+became important that the API be extensible to support those in the future.
+
+The WebXR Device API was designed and named with these expanded use cases in
+mind and provides a better path forward. Implementors of WebVR have committed
+to migrating to the WebXR Device API.
+
+## What is the WebXR Device API?
+
+Like the WebVR spec before it, the WebXR Device API is a product of the
+[Immersive Web Community Group](https://github.com/immersive-web) which has
+contributors from Google, Microsoft, Mozilla, and others. The 'X in XR is
+intended as a sort of algebraic variable that stands for anything in the
+spectrum of immersive experiences. It's available in the previously mentioned
+[origin trial](https://github.com/GoogleChrome/OriginTrials) as well as through
+a [polyfill](https://github.com/immersive-web/webxr-polyfill).
+
+When this article was originally published during the Chrome 67 beta period,
+only VR capabilities were enabled. Augmented reality arrived in Chrome 69. Read
+about it in [Augmented reality for the
+web](https://developer.chrome.com/blog/ar-for-the-web/).
+
+There's more to this new API than I can go to in an article like this. I want
+to give you enough to start making sense of the [WebXR
+samples](https://github.com/immersive-web/webxr-samples). You can find more
+information in both the [original
+explainer](https://github.com/immersive-web/webxr/blob/master/explainer.md) and
+our [Immersive Web Early Adopters
+Guide](https://immersive-web.github.io/webxr-reference/). I'll be expanding the
+latter as the origin trial progresses. Feel free to open issues or submit pull
+requests.
+
+{% Aside %}
+The Early Adopters Guide is updated when spec changes land in Chrome. To
+be notified of those updates watch [its repo on
+GitHub](https://github.com/immersive-web/webxr-reference).
+{% endAside %}
+
+For this article, I'm going to discuss starting, stopping and running
+an XR session, plus a few basics about processing input.
+
+What I'm not going to cover is how to draw AR/VR content to the screen. The
+WebXR Device API does not provide image rendering features. That's up to you.
+Drawing is done using WebGL APIs. You can do that if you're really ambitious.
+Though, we recommend using a framework. The immersive web samples use one
+created just for the demos called
+[Cottontail](https://github.com/immersive-web/webxr-samples/tree/master/js/cottontail).
+Three.js has supported WebXR since May. I've heard nothing about
+A-Frame.
+
+## Starting and running an app
+
+The basic process is this:
+
+1. Request an XR device.
+1. If it's available, request an XR session. If you want the user to put their
+phone in a headset, it's called an immersive session and requires a user
+gesture to enter.
+1. Use the session to run a render loop which provides 60 image frames per
+second. Draw appropriate content to the screen in each frame.
+1. Run the render loop until the user decides to exit.
+1. End the XR session.
+
+Let's look at this in a little more detail and include some code. You won't be
+able to run an app from what I'm about to show you. But again, this is just to
+give a sense of it.
+
+### Request an XR device
+
+Here, you'll recognize the standard feature detection code. You could wrap this
+in a function called something like `checkForXR()`.
+
+If you're not using an immersive session you can skip advertising the
+functionality and getting a user gesture and go straight to requesting a
+session. An immersive session is one that requires a headset. A non-immersive
+session simply shows content on the device screen. The former is what most
+people think of when you refer to virtual reality or augmented reality. The
+latter is sometimes called a 'magic window'.
+
+```js
+if (navigator.xr) {
+    navigator.xr.requestDevice()
+    .then(xrDevice => {
+    // Advertise the AR/VR functionality to get a user gesture.
+    })
+    .catch(err => {
+    if (err.name === 'NotFoundError') {
+        // No XRDevices available.
+        console.error('No XR devices available:', err);
+    } else {
+        // An error occurred while requesting an XRDevice.
+        console.error('Requesting XR device failed:', err);
+    }
+    })
+} else{
+    console.log("This browser does not support the WebXR API.");
+}
+```
+
+### Request an XR session
+
+Now that we have our device and our user gesture, it's time to get a session.
+To create a session, the browser needs a canvas on which to draw.
+
+```js
+xrPresentationContext = htmlCanvasElement.getContext('xrpresent');
+let sessionOptions = {
+    // The immersive option is optional for non-immersive sessions; the value
+    //   defaults to false.
+    immersive: false,
+    outputContext: xrPresentationContext
+}
+xrDevice.requestSession(sessionOptions)
+.then(xrSession => {
+    // Use a WebGL context as a base layer.
+    xrSession.baseLayer = new XRWebGLLayer(session, gl);
+    // Start the render loop
+})
+```
+
+### Run the render loop
+
+The code for this step takes a bit of untangling. To untangle it, I'm about to
+throw a bunch of words at you. If you want a peek at the final code, [jump
+ahead](#the-whole-render-loop) to have a quick look then come back for the full
+explanation. There's quite a bit that you may not be able to infer.
+
+The basic process for a render loop is this:
+
+1. Request an animation frame.
+1. Query for the position of the device.
+1. Draw content to the position of the device based on it's position.
+1. Do work needed for the input devices.
+1. Repeat 60 times a second until the user decides to quit.
+
+#### Request a presentation frame
+
+The word 'frame' has several meanings in a Web XR context. The first is the
+_frame of reference_ which defines where the origin of the coordinate system is
+calculated from, and what happens to that origin when the device moves. (Does
+the view stay the same when the user moves or does it shift as it would in real
+life?)
+
+The second type of frame is the _presentation frame_, represented by an
+`XRFrame` object. This object contains the information needed to
+render a single frame of an AR/VR scene to the device. This is a bit confusing
+because a presentation frame is retrieved by calling `requestAnimationFrame()`.
+This makes it compatible with `window.requestAnimationFrame()`.
+
+Before I give you any more to digest, I'll offer some code. The sample below
+shows how the render loop is started and maintained. Notice the dual use of the
+word frame. And notice the recursive call to `requestAnimationFrame()`. This
+function will be called 60 times a second.
+
+```js
+xrSession.requestFrameOfReference('eye-level')
+.then(xrFrameOfRef => {
+    xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
+    // The time argument is for future use and not implemented at this time.
+    // Process the frame.
+    xrFrame.session.requestAnimationFrame(onFrame);
+    }
+});
+```
+
+#### Poses
+
+Before drawing anything to the screen, you need to know where the display
+device is pointing and you need access to the screen. In general, the position
+and orientation of a thing in AR/VR is called a pose. Both viewers and input
+devices have a pose. (I cover input devices later.) Both viewer and input
+device poses are defined as a 4 by 4 matrix stored in a `Float32Array` in column
+major order. You get the viewer's pose by calling
+`XRFrame.getDevicePose()` on the current animation frame object.
+Always test to see if you got a pose back. If something went wrong you don't
+want to draw to the screen.
+
+```js
+let pose = xrFrame.getDevicePose(xrFrameOfRef);
+if (pose) {
+    // Draw something to the screen.
+}
+```
+
+#### Views
+
+After checking the pose, it's time to draw something. The object you draw to is
+called a view (`XRView`). This is where the session type becomes important. Views
+are retrieved from the `XRFrame` object as an array. If you're in a
+non-immersive session the array has one view. If you're in an immersive
+session, the array has two, one for each eye.
+
+```js
+for (let view of xrFrame.views) {
+    // Draw something to the screen.
+}
+```
+
+This is an important difference between WebXR and other immersive systems.
+Though it may seem pointless to iterate through one view, doing so allows you
+to have a single rendering path for a variety of devices.
+
+#### The whole render loop
+
+If I put all this together, I get the code below. I've left a placeholder for
+the input devices, which I'll cover in a later section.
+
+```js
+xrSession.requestFrameOfReference('eye-level')
+.then(xrFrameOfRef => {
+    xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
+    // The time argument is for future use and not implemented at this time.
+    let pose = xrFrame.getDevicePose(xrFrameOfRef);
+    if (pose) {
+        for (let view of xrFrame.views) {
+        // Draw something to the screen.
+        }
+    }
+    // Input device code will go here.
+    frame.session.requestAnimationFrame(onFrame);
+    }
+}
+```
+
+### End the XR session
+
+An XR session may end for several reasons, including ending by your own code
+through a call to `XRSession.end()`. Other causes include the headset being
+disconnected or another application taking control of it. This is why a
+well-behaved application should monitor the end event and when it occurs,
+discard the session and renderer objects. An XR session once ended cannot be
+resumed.
+
+```js
+xrDevice.requestSession(sessionOptions)
+.then(xrSession => {
+    // Create a WebGL layer and initialize the render loop.
+    xrSession.addEventListener('end', onSessionEnd);
+});
+
+// Restore the page to normal after immersive access has been released.
+function onSessionEnd() {
+    xrSession = null;
+
+    // Ending the session stops executing callbacks passed to the XRSession's
+    // requestAnimationFrame(). To continue rendering, use the window's
+    // requestAnimationFrame() function.
+    window.requestAnimationFrame(onDrawFrame);
+}
+```
+
+## How does interaction work?
+
+As with the application lifetime, I'm just going to give you a taste for how to
+interact with objects in AR or VR.
+
+The WebXR Device API adopts a "point and click" approach to user input. With
+this approach every input source has a defined _pointer ray_ to indicate where
+an input device is pointing and events to indicate when something was selected.
+Your app draws the pointer ray and shows where it's pointed. When the user
+clicks the input device, events are fired - `select`, `selectStart`, and
+`selectEnd`, specifically. Your app determines what was clicked and responds
+appropriately.
+
+### The input device and the pointer ray
+
+To users, the pointer ray is just a faint line between the controller and
+whatever they're pointing at. But your app has to draw it. That means getting
+the pose of the input device and drawing a line from its location to an object
+in AR/VR space. That process looks roughly like this:
+
+```js
+let inputSources = xrSession.getInputSources();
+for (let xrInputSource of inputSources) {
+    let inputPose = frame.getInputPose(inputSource, xrFrameOfRef);
+    if (!inputPose) {
+    continue;
+    }
+    if (inputPose.gripMatrix) {
+    // Render a virtual version of the input device
+    //   at the correct position and orientation.
+    }
+    if (inputPose.pointerMatrix) {
+    // Draw a ray from the gripMatrix to the pointerMatrix.
+    }
+}
+```
+
+This is a stripped down version of the [Input Tracking
+sample](https://github.com/immersive-web/webxr-samples/blob/master/input-tracking.html#L198)
+from the Immersive Web Community Group. As with frame rendering, drawing the
+pointer ray and the device is up to you. As alluded to earlier, this code must
+be run as part of the render loop.
+
+### Selecting items in virtual space
+
+Merely pointing at things in AR/VR is pretty useless. To do anything useful,
+users need the ability to select things. The WebXR Device API provides three
+events for responding to user interactions: `select`, `selectStart`, and
+`selectEnd`. They have a quirk I didn't expect: they only tell you that an
+input device was clicked. They don't tell you what item in the environment was
+clicked. Event handlers are added to the `XRSession` object and should be added
+as soon as its available.
+
+```js
+xrDevice.requestSession(sessionOptions)
+.then(xrSession => {
+    // Create a WebGL layer and initialize the render loop.
+    xrSession.addEventListener('selectstart', onSelectStart);
+    xrSession.addEventListener('selectend', onSelectEnd);
+    xrSession.addEventListener('select', onSelect);
+});
+```
+
+
+This code is based on an [Input Selection
+example](https://github.com/immersive-web/webxr-samples/blob/master/input-selection.html)
+, in case you want more context.
+
+To figure out what was clicked you use a pose. (Are you surprised? I didn't
+think so.) The details of that are specific to your app or whatever framework
+you're using, and hence beyond the scope of this article. Cottontail's approach
+is in the Input Selection example.
+
+```js
+function onSelect(ev) {
+    let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
+    if (!inputPose) {
+    return;
+    }
+    if (inputPose.pointerMatrix) {
+    // Figure out what was clicked and respond.
+    }
+}
+```
+
+## Conclusion: looking ahead
+
+As I said earlier, augmented reality is expected in Chrome 69 (Canary some time
+in June 2018). Nevertheless, I encourage you try what we've got so far. We
+need feedback to make it better. Follow it's progress by watching
+ChromeStatus.com for [WebXR Hit
+Test](https://www.chromestatus.com/features/4755348300759040). You can also
+follow [WebXR Anchors](https://www.chromestatus.com/features/5129925015109632)
+which will improve pose tracking.
diff --git a/src/site/content/en/blog/what-s-the-CSS-scope-pseudo-class-for/index.md b/src/site/content/en/blog/what-s-the-CSS-scope-pseudo-class-for/index.md
new file mode 100644
index 00000000000..7a1ea5085c6
--- /dev/null
+++ b/src/site/content/en/blog/what-s-the-CSS-scope-pseudo-class-for/index.md
@@ -0,0 +1,117 @@
+---
+title: What's the CSS :scope pseudo-class for?
+authors:
+  - ericbidelman
+date: 2013-03-21
+updated: 2019-03-09
+tags:
+  - blog
+  - dom
+
+---
+
+`:scope` is defined in [CSS Selectors 4](https://www.w3.org/TR/selectors-4/#scope-pseudo) as:
+
+> A pseudo-class which represents any element that is in the contextual reference element set. This is is a (potentially empty) explicitly-specified set of elements, such as that specified by the `querySelector()`, or the parent element of a `<style scoped>` element, which is used to "scope" a selector so that it only matches within a subtree.
+
+An example of using this is within a `<style scoped>` ([more info](https://developer.chrome.com/blog/a-new-experimental-feature-style-scoped)):
+
+```html
+<style>
+    li {
+    color: blue;
+    }
+</style>
+
+<ul>
+    <style scoped>
+    li {
+        color: red;
+    }
+    :scope {
+        border: 1px solid red;
+    }
+    </style>
+    <li>abc</li>
+    <li>def</li>
+    <li>efg</li>
+</ul>
+
+<ul>
+    <li>hij</li>
+    <li>klm</li>
+    <li>nop</li>
+</ul>
+```
+
+
+{% Aside %}
+`<style scoped>` can be enabled in Chrome using the "Enable experimental WebKit features" flag in about:flags.
+{% endAside %}
+
+
+This colors the `li` elements in the first `ul` red and, because of the `:scope` rule, puts a border around the `ul`. That's because in the context of this `<style scoped>`, the `ul` matches `:scope`. It's the local context. If we were to add a `:scope` rule in the outer `<style>` it would match the entire document. Essentially, equivalent to `:root`.
+
+## Contextual elements
+
+You're probably aware of the `Element` version of `querySelector()` and `querySelectorAll()`. Instead of querying the entire document, you can restrict the result set to a contextual element:
+
+```html
+<ul>
+    <li id="scope"><a>abc</a></li>
+    <li>def</li>
+    <li><a>efg</a></li>
+</ul>
+<script>
+    document.querySelectorAll('ul a').length; // 2
+
+    var scope = document.querySelector('#scope');
+    scope.querySelectorAll('a').length; // 1
+</script>
+```
+
+
+When these are called, the browser returns a `NodeList` that's filtered to only include the set of nodes that a.) match the selector and b.) which are also descendants of the context element. So in the second example, the browser finds all `a` elements, then filters out the ones not in the `scope` element. This works, but it can lead to some bizarre behavior if you're not careful. Read on.
+
+## When querySelector goes wrong
+
+There's a _really_ [important point](https://www.w3.org/TR/selectors-api/#examples0) in the [Selectors spec](https://www.w3.org/TR/selectors-api/) that people often overlook. Even when `querySelector[All]()` is invoked on an element, **selectors still evaluate in the context of the entire document**. This means unanticipated things can happen:
+
+```js
+    scope.querySelectorAll('ul a').length); // 1
+    scope.querySelectorAll('body ul a').length); // 1
+```
+
+WTF! In the first example, `ul` _is_ my element, yet I'm still able to use it and matches nodes. In the second, `body` isn't even a descendant of my element, but "`body ul a`" still matches. Both of these are confusing and not what you'd expect.
+
+It's worth making the comparison to jQuery here, which takes the right approach and does what you'd expect:
+
+```js
+    $(scope).find('ul a').length // 0
+    $(scope).find('body ul a').length // 0
+```
+
+…enter `:scope` to solve these semantic shenanigans.
+
+## Fixing querySelector with :scope
+
+WebKit [recently landed](https://trac.webkit.org/changeset/145691/webkit) support for using the `:scope` pseudo-class in `querySelector[All]()`. You can test it in Chrome Canary 27.
+
+You can use it **restrict selectors to a context element**. Let's see an example. In the following, `:scope` is used to "scope" the selector to the scope element's subtree. That's right, I said scope three times!
+
+```js
+    scope.querySelectorAll(':scope ul a').length); // 0
+    scope.querySelectorAll(':scope body ul a').length); // 0
+    scope.querySelectorAll(':scope a').length); // 1
+```
+
+Using `:scope` makes the semantics of the `querySelector()` methods a little more predictable and inline with what others like jQuery are already doing.
+
+## Performance win?
+
+Not yet :(
+
+I was curious if using `:scope` in qS/qSA gives a performance boost. So… like a good engineer I threw together a [test](https://output.jsbin.com/icahoc/1/). My rationale: less surface area for the browser to do selector matching means speedier lookups.
+
+In my experiment, WebKit currently takes ~1.5-2x longer than not using `:scope`. Drats! When [crbug.com/222028](https://bugs.chromium.org/p/chromium/issues/detail?id=222028) gets fixed, **using it should theoretically give you a slight performance boost** over not using it.
+
diff --git a/src/site/content/en/blog/whats-new-pagespeed-insights/index.md b/src/site/content/en/blog/whats-new-pagespeed-insights/index.md
new file mode 100644
index 00000000000..57300cc4b72
--- /dev/null
+++ b/src/site/content/en/blog/whats-new-pagespeed-insights/index.md
@@ -0,0 +1,272 @@
+---
+title: What's new in PageSpeed Insights
+authors:
+  - leenasohoni
+  - addyosmani
+  - egsweeny
+description: Learn about the latest in PageSpeed Insights to help you better measure and optimize your page and site quality.
+subhead: Learn about the latest in PageSpeed Insights to help you better measure and optimize your page and site quality.
+date: 2021-11-03
+updated: 2022-07-18
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/6zX4bWZp46B9dGbMHhb4.jpeg
+alt: A photo of a Chevrolet Corvette Speedometer.
+tags:
+  - performance
+  - web-vitals
+  - lighthouse
+  - blog
+---
+
+
+Over the years, [PageSpeed
+Insights](https://pagespeed.web.dev/) (PSI) has
+evolved into a one-stop source for both
+[field](/speed-tools/#field-data)
+and
+[lab data](/speed-tools/#lab-data).
+It integrates information from the
+[Chrome UX Report](hhttps://developer.chrome.com/docs/crux/)
+(CrUX) and [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)
+diagnostics to provide insights that help improve the performance of your
+website.
+
+Today, we are excited to announce an updated version of PSI! While it is a
+critical element in our [speed tooling suite](/vitals-tools/),
+the PSI code base was ten years old, contained a lot of legacy code, and was due
+for a redesign. We used this as an opportunity to address interface-related
+issues in PSI which have sometimes made it difficult for users to navigate the
+report. Our primary goals were to:
+
++   Make the UI more intuitive by clearly differentiating between data
+    derived from a synthetic environment and data collected from users in the
+    field.
++   Clearly communicate how the [Core Web Vitals](/vitals/) assessment is calculated in the UI.
++   Modernize the look and feel of PSI, leveraging [Material Design](https://material.io/design).
+
+This post introduces the new features in PSI which will be released later this
+year.
+
+## What's new?
+
+The PSI UI redesign aims to improve the presentation of the report data and add
+clarity and granularity to the data available in the report. The new UI is aimed
+to be more intuitive and helps developers quickly discover lab and field
+performance insights for their pages. The fundamental changes to the UI
+include:
+
+### Clear separation of field and lab data
+
+We have changed the UI to distinctly separate field data from lab data. Labels
+for "Field Data" and "Lab data" have been replaced with text that indicates what
+the data means and how it can help. We have also brought the Field data section
+to the top. The traditional lab-based performance score, which is currently
+shown at the top, has been moved down to the Lab data section to avoid ambiguity
+about the origin of the score.
+
+{% Aside %}
+If you don't know the difference between lab and field data, check
+out the [explainer on web.dev](/how-to-measure-speed/).
+{% endAside %}
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/jM0GYMrQZcPymVXdLOLP.png", alt="discover what your real users are experiencing", width="800", height="436" %}
+  <figcaption>
+    Section for field data
+  </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/wQ9RGcJAcBBc4SUDK7Dz.png", alt="Diagnose performance issues", width="800", height="355" %}
+  <figcaption>
+    Section for lab data
+  </figcaption>
+</figure>
+
+
+### Core Web Vitals assessment
+
+The Core Web Vitals assessment result, which earlier appeared as a single word
+"passed" or "failed" in Field Data, now stands out as a separate subsection with
+a distinct icon.
+
+Note that there is no change in the assessment process for Core Web Vitals. The
+Core Web Vitals metrics FID, LCP, and CLS, may be aggregated at either the page
+or origin level. For aggregations with sufficient data in all three metrics, the
+aggregation passes the Core Web Vitals assessment if the 75th percentiles of all
+three metrics are Good. Otherwise, the aggregation does not pass the assessment.
+If the aggregation has insufficient FID data, it will pass the assessment if
+both the 75th percentiles of LCP and CLS are Good. If either LCP or CLS has
+insufficient data, the page or origin-level aggregation cannot be assessed.
+
+### Labels for mobile and desktop performance
+
+We changed the navigation menu at the top and included links for mobile and
+desktop centrally on the report page. The links are now easily visible and
+distinctly indicate the platform for which the data is being shown. Doing this
+also helped make the navigation bar cleaner.
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/hEv5XuTeVV98Z3AS59bQ.png", alt="Older (at the time of writing) version of PageSpeed Insights", width="800", height="97" %}
+  <figcaption>
+    PSI mobile and desktop labels before
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/vi5j7ouZtmWwqN9BRsUD.png", alt="Newer version of the navigation bar", width="800", height="149" %}
+  <figcaption>
+        PSI mobile and desktop labels after
+  </figcaption>
+</figure>
+
+
+### Origin Summary
+
+The Origin Summary, which provides the aggregated CrUX score for all pages from
+the origin, currently appears on click of a checkbox. We have moved this report
+section to a new tab, "Origin", under the Field Data section.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/5Kn5meWq0sWwCLT69lMb.png", alt="Origin summary for the new PageSpeed Insights refresh.", width="800", height="381" %}
+
+### Additional helpful information
+
+The report now includes a new information section at the bottom of each field
+and lab card sharing the following details about the sampled data:
+
++   Data collection period
++   Visit durations
++   Devices
++   Network connections
++   Sample size
++   Chrome versions
+
+This information should enhance the distinction between lab and field data and
+help users who have previously been uncertain how the two data sources (lab and
+field) might differ.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/jVxqisC0x6I5viUGgjAD.png", alt="Enhanced section of information sharing data about field and lab sampling and configuration data", width="800", height="368" %}
+
+### Expand view
+
+We have a new "Expand view" feature that adds a drill-down function to the field
+data section and allows you to view granular details for the Core Web Vitals
+metrics.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/UFVgoK1gJBYk5DLhFwIn.png", alt="Newly expanded view with a drill-down for field data metrics.", width="800", height="515" %}
+
+### Page image
+
+We have removed the image of the loaded page, which appears right next to the
+field data. The image and thumbnails of the page displaying the loading sequence
+will both be available in the lab data section.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/dnIsJA35tj7vs6qgybRM.png", alt="Loaded page image next to the lab data.", width="800", height="444" %}
+
+For up to date product documentation, visit
+[https://developers.google.com/speed/docs/insights/.](https://developers.google.com/speed/docs/insights/v5/about)
+
+## Updates to web.dev/measure
+
+To reduce inconsistency between the different tools in our performance toolbox,
+we are also updating [web.dev/measure](/measure/) to be directly powered by the [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started).
+
+Previously, developers would run reports via both the PSI tool and /measure
+and see different Lighthouse numbers. One of the main reasons for differences
+was because /measure originated all tests from the U.S. (due to it previously
+having a cloud backend that was US-based).
+
+With /measure calling the same API directly as the PSI UI, developers will get
+ a more consistent experience when using PSI and /measure. We have also made
+ a few tweaks to /measure based on how users use the tool. This means that the
+ signed-in experience for /measure will be going away, but the most used
+ functionality—seeing multiple categories—will still be available for use.
+
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/KFZmLMU2iSxkPDph7FTV.png", alt="The old version of the measure page.", width="800", height="377" %}
+  <figcaption>
+    web.dev/measure before
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/C04zQEkxtSQqPEQedNN7.png", alt="The refreshed version of the measure tool focusing on offering page quality measurement.", width="800", height="696" %}
+  <figcaption>
+    web.dev/measure after
+  </figcaption>
+</figure>
+
+
+## PSI today
+
+Taking a step back, let's look at what the current PageSpeed Insights report
+offers. The PSI report includes performance data for both mobile and desktop
+devices in individual tabs and suggests how you may improve a page. The key
+components of the report in each case are similar and consist of the
+following:
+
+**Performance Score:** The performance score appears at the top of the PSI
+report and summarizes the overall page performance. This score is determined by
+running [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to
+collect and analyze [lab
+data](https://developers.google.com/speed/docs/insights/v5/about#lab) about the
+page. A score of 90 or above is considered good, 50-90 needs improvement, and
+below 50 is poor.
+
+**Field Data:** Field data, sourced from the
+[CrUX report](https://developer.chrome.com/docs/crux/)
+dataset, provides insights into the real-world user experience. The data
+includes metrics such as [First Contentful Paint](/fcp/) (FCP),
+and measures Core Web Vitals  ([First Input Delay](/fid/) (FID),
+[Largest Contentful Paint](/lcp/) (LCP), and [Cumulative Layout
+Shift](/cls/) (CLS). Along with the metric values, you can also
+see the distribution of pages where the value of a particular metric was Good,
+Needs Improvement, or Poor, indicated by green, amber, and red bars,
+respectively. The distribution and scores are shown based on page loads for
+users in the CrUX dataset. Scores are calculated for the last 28 days and are
+not available for new pages where sufficient real-user data may not be
+available.
+
+{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/A7xrSBFuqf9puSgBJH4l.png", alt="breakdown of different sections of data in the current PageSpeed Insight report", width="800", height="497" %}
+
+**Origin Summary:** Users can click on the _Show Origin Summary_ checkbox to
+view the aggregated score for the metrics for all pages served from the same
+origin over the last 28 days.
+
+**Lab Data:** Lab performance score, calculated using Lighthouse, helps debug
+performance issues, as it is collected in a controlled environment. The report
+shows the performance using metrics like[First Contentful
+Paint](/fcp/), [Largest Contentful Paint](/lcp/),
+[Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/), [Cumulative Layout
+Shift](/cls/), [Time to
+Interactive](/tti/), and [Total Blocking
+Time](/tbt/). Each metric is
+[scored](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) and labeled with an icon
+indicating Good, Needs improvement, or Poor. This section provides a good
+indication of performance bottlenecks pre-release and can help to diagnose
+problems, but may not capture real-world issues.
+
+**Audits:** This section lists all the audits run by Lighthouse and lists down
+the passed audits along with opportunities for improvement and additional
+diagnostic information.
+
+### Challenges with the current PSI design
+
+As seen in the screenshot above, the different data points from lab and field
+data are not isolated clearly, and developers who are new to PSI may not easily
+understand the context of the data and what to do next. This confusion has
+resulted in many "How to" blog posts on deciphering the PSI report.
+
+With the redesign, we hope to make interpreting the report easier for developers
+so that they move quickly from generating the PSI report to acting upon the
+insights included in it.
+
+## Learn more
+
+For more details on performance tooling updates, watch the keynote for [Chrome
+Dev Summit 2021](https://developer.chrome.com/devsummit/schedule/keynote/).
+We will keep you posted on the release date for PSI and the changes to web.dev/measure.
+
+*With thanks to Milica Mihajlija, Philip Walton, Brendan Kenny and
+Ewa Gasperowicz for their feedback on this article*
+
diff --git a/src/site/content/en/blog/when-to-use-local-https/index.md b/src/site/content/en/blog/when-to-use-local-https/index.md
new file mode 100644
index 00000000000..87ecb74c1f2
--- /dev/null
+++ b/src/site/content/en/blog/when-to-use-local-https/index.md
@@ -0,0 +1,101 @@
+---
+title: When to use HTTPS for local development
+subhead: Using http://localhost for local development is fine most of the time, except in some special cases. This post explains when you need to run your local development site with HTTPS.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/rIRKS6XfdH4ZU6N1y4zE.jpg
+tags:
+  - blog
+  - security
+---
+
+Also see: [How to use HTTPS for local development](/how-to-use-local-https).
+
+_In this post, statements about `localhost` are valid for `127.0.0.1` and `[::1]` as well, since they both describe the local computer address, also called "loopback address". Also, to keep things simple, the port number isn't specified._
+_So when you see `http://localhost`, read it as `http://localhost:{PORT}` or `http://127.0.0.1:{PORT}`._
+
+## Summary
+
+When developing locally, use `http://localhost` by default. Service Workers, Web Authentication API, and more will work.
+However, in the following cases, you'll need HTTPS for local development:
+
+- Setting Secure cookies in a consistent way across browsers
+- Debugging mixed-content issues
+- Using HTTP/2 and later
+- Using third-party libraries or APIs that require HTTPS
+- Using a custom hostname
+
+  <figure>
+    {% Img src="image/admin/ifswaep3VUkY7cjArbIc.png", alt="A list of cases when you need to use HTTPS for local development.", width="800", height="450" %}
+    <figcaption>When to use HTTPS for local development.</figcaption>
+  </figure>
+
+{% Aside %}
+If you need HTTPS for one of the above use cases, check out [How to use HTTPS for local development](/how-to-use-local-https).
+{% endAside %}
+
+✨ This is all you need to know. If you're interested in more details keep reading!
+
+## Why your development site should behave securely
+
+To avoid running into unexpected issues, you want your local development site to behave as much as possible like your production website. So, if your production website uses HTTPS, you want your local development site to behave **like an HTTPS site**.
+
+{% Aside 'warning' %}
+If your production website doesn't use HTTPS, [make it a priority](/why-https-matters/).
+{% endAside %}
+
+## Use `http://localhost` by default
+
+Browsers treat `http://localhost` in a special way: **although it's HTTP, it mostly behaves like an HTTPS site**.
+
+On `http://localhost`, Service Workers, Sensor APIs, Authentication APIs, Payments, and [other features that require certain security guarantees](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts) are supported and behave exactly like on an HTTPS site.
+
+## When to use HTTPS for local development
+
+You may encounter special cases where `http://localhost` _doesn't_ behave like an HTTPS site—or you may simply want to use a custom site name that's not `http://localhost`.
+
+You need to use HTTPS for local development in the following cases:
+
+- You need to [set a cookie](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) locally that is `Secure`, or `SameSite:none`, or has the `__Host` prefix. `Secure` cookies are set only on HTTPS, but not on `http://localhost` for all browsers. And because `SameSite:none` and `__Host` also require the cookie to be `Secure`, setting such cookies on your local development site requires HTTPS as well.
+
+  {% Aside 'gotchas' %}
+  When it comes to setting `Secure` cookies locally, not all browsers behave in the same way! For example, Chrome and Safari don't set `Secure` cookies on localhost, but Firefox does. In Chrome, this is considered a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1056543&q=localhost%20secure%20cookie&can=2).
+  {% endAside %}
+
+- You need to debug locally an issue that only occurs on an HTTPS website but not on an HTTP site, not even `http://localhost`, such as a [mixed-content](https://developer.mozilla.org/docs/Web/Security/Mixed_content) issue.
+- You need to locally test or reproduce a behaviour specific to HTTP/2 or newer. For example, if you need to test loading performance on HTTP/2 or newer. Insecure HTTP/2 or newer is not supported, not even on `localhost`.
+- You need to locally test third-party libraries or APIs that require HTTPS (for example OAuth).
+- You're not using `localhost`, but a custom host name for local development, for example `mysite.example`. Typically, this means you've overridden your local hosts file:
+  <figure>
+    {% Img src="image/admin/i7dPGFARXLbg9oIAUol2.jpg", alt="Screenshot of a terminal editing a hosts file", width="740", height="318" %}
+    <figcaption>Editing a hosts file to add a custom hostname.</figcaption>
+  </figure>
+
+  In this case, Chrome, Edge, Safari, and Firefox by default do _not_ consider `mysite.example` to be secure, even though it's a local site. So it won't behave like an HTTPS site.
+
+- Other cases! This is not an exhaustive list, but if you encounter a case that's not listed here, you'll know: things will break on `http://localhost`, or it won't quite behave like your production site. 🙃
+
+**In all of these cases, you need to use HTTPS for local development.**
+
+## How to use HTTPS for local development
+
+If you need to use HTTPS for local development, head over to [How to use HTTPS for local development](/how-to-use-local-https).
+
+## Tips if you're using a custom hostname
+
+**If you're using a custom hostname, for example, editing your hosts file:**
+
+- Don't use a bare hostname like `mysite` because if there's a [top-level domain (TLD)](https://en.wikipedia.org/wiki/Top-level_domain) that happens to have the same name (`mysite`), you'll run into issues. And it's not that unlikely: in 2020, there are over 1,500 TLDs, and the list is growing. `coffee`, `museum`, `travel`, and many large company names (maybe even the company you're working at!) are TLDs. [See the full list here](https://data.iana.org/TLD/tlds-alpha-by-domain.txt).
+- Only use domains that are yours, or that are reserved for this purpose. If you don't have a domain of your own, you can use either `test` or `localhost` (`mysite.localhost`). `test` doesn't have special treatment in browsers, but `localhost` does: Chrome and Edge support `http://<name>.localhost` out of the box, and it will behave securely when localhost does. Try it out: run any site on localhost and access `http://<whatever name you like>.localhost:<your port>` in Chrome or Edge. This may soon be possible in Firefox and [Safari](https://bugs.webkit.org/show_bug.cgi?id=160504) as well. The reason you can do this (have subdomains like `mysite.localhost`) is because `localhost` is not just a hostname: it's also a full TLD, like `com`.
+
+## Learn more
+
+- [Secure contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)
+- [localhost as a secure context](https://www.w3.org/TR/secure-contexts/#localhost)
+- [localhost as a secure context in Chrome](https://www.chromestatus.com/feature/6269417340010496)
+
+_With many thanks for contributions and feedback to all reviewers—especially Ryan Sleevi,
+Filippo Valsorda, Milica Mihajlija, Rowan Merewood and Jake Archibald. 🙌_
+
+_Hero image by [@moses_lee](https://unsplash.com/@moses_lee) on [Unsplash](https://unsplash.com/photos/Q2Xy_hYzrgg), edited._
diff --git a/src/site/content/en/blog/why-coop-coep/browsing-context-group.png b/src/site/content/en/blog/why-coop-coep/browsing-context-group.png
deleted file mode 100644
index 09f8f73ae0f..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/browsing-context-group.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/coep.png b/src/site/content/en/blog/why-coop-coep/coep.png
deleted file mode 100644
index 65dde42a622..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/coep.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/coop1.png b/src/site/content/en/blog/why-coop-coep/coop1.png
deleted file mode 100644
index 9d86a653f57..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/coop1.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/coop2.png b/src/site/content/en/blog/why-coop-coep/coop2.png
deleted file mode 100644
index e71ced3b016..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/coop2.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/coop3.png b/src/site/content/en/blog/why-coop-coep/coop3.png
deleted file mode 100644
index c5d43c406da..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/coop3.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/evil-actor.png b/src/site/content/en/blog/why-coop-coep/evil-actor.png
deleted file mode 100644
index 421affff1c9..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/evil-actor.png and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/hero.jpg b/src/site/content/en/blog/why-coop-coep/hero.jpg
deleted file mode 100644
index ad69ee9928c..00000000000
Binary files a/src/site/content/en/blog/why-coop-coep/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/why-coop-coep/index.md b/src/site/content/en/blog/why-coop-coep/index.md
index 02abd6d3315..bb041637992 100644
--- a/src/site/content/en/blog/why-coop-coep/index.md
+++ b/src/site/content/en/blog/why-coop-coep/index.md
@@ -2,49 +2,52 @@
 title: Why you need "cross-origin isolated" for powerful features
 subhead: >
   Learn why cross-origin isolation is needed to use powerful features such as
-  `SharedArrayBuffer`, `performance.measureMemory()`, and the JS Self-Profiling
-  API.
+  `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` and high
+  resolution timer with better precision.
 description: >
   Some web APIs increase the risk of side-channel attacks like Spectre. To
   mitigate that risk, browsers offer an opt-in-based isolated environment called
   cross-origin isolated. Learn why cross-origin isolation is needed to use
-  powerful features such as `SharedArrayBuffer`, `performance.measureMemory()`,
-  and the JS Self-Profiling API.
+  powerful features such as `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()`
+  and high resolution timer with better precision.
 authors:
   - agektmr
   - domenic
-hero: hero.jpg
+hero: image/admin/h8g1TQjkfkJSpWJrPakB.jpg
 date: 2020-05-04
+updated: 2021-08-05
 tags:
   - blog
   - security
+feedback:
+  - api
 ---
 ## Introduction
 In [Making your website "cross-origin isolated" using COOP and
-COEP](https://web.dev/coop-coep/) we explained how to adopt to "cross-origin
+COEP](/coop-coep/) we explained how to adopt to "cross-origin
 isolated" state using COOP and COEP. This is a companion article that explains
 why cross-origin isolation is required to enable powerful features on the browser.
 
 {% Aside 'key-term' %}
-This article uses many similar-sounding terminologies. To make things 
+This article uses many similar-sounding terminologies. To make things
 clearer, let's define them:
 
-* [COEP: Cross Origin Embedder 
+* [COEP: Cross Origin Embedder
   Policy](https://wicg.github.io/cross-origin-embedder-policy/)
-* [COOP: Cross Origin Opener 
+* [COOP: Cross Origin Opener
   Policy](https://github.com/whatwg/html/pull/5334/files)
-* [CORP: Cross Origin Resource 
+* [CORP: Cross Origin Resource
   Policy](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
-* [CORS: Cross Origin Resource 
+* [CORS: Cross Origin Resource
   Sharing](https://developer.mozilla.org/docs/Web/HTTP/CORS)
-* [CORB: Cross Origin Read 
+* [CORB: Cross Origin Read
   Blocking](https://www.chromium.org/Home/chromium-security/corb-for-developers)
 {% endAside %}
 
 ## Background
 
 The web is built on the [same-origin
-policy](https://web.dev/same-origin-policy/): a security feature that restricts
+policy](/same-origin-policy/): a security feature that restricts
 how documents and scripts can interact with resources from another origin. This
 principle restricts the ways websites can access cross-origin resources. For
 example, a document from `https://a.example` is prevented from accessing data
@@ -71,7 +74,7 @@ fails unless CORS is applied to the image.
 
 All these policy decisions are happening within a browsing context group.
 
-![Browsing Context Group](browsing-context-group.png)
+{% Img src="image/admin/z1Gr4mmJMo383dR9FQUk.png", alt="Browsing Context Group", width="800", height="469" %}
 
 For a long time, the combination of CORS and opaque resources was enough to make
 browsers safe. Sometimes edge cases (such as [JSON
@@ -83,11 +86,16 @@ successful.
 This all changed with
 [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)), which
 makes any data that is loaded to the same browsing context group as your code
-potentially readable. If `evil.com` embeds a cross-origin image, they can use a
+potentially readable. By measuring the time certain operations take, attackers
+can guess the contents of the CPU caches, and through that, the contents of the
+process' memory. Such timing attacks are possible with low-granularity timers
+that exist in the platform, but can be sped up with high-granularity timers,
+both explicit (like `performance.now()`) and implicit (like
+`SharedArrayBuffer`s). If `evil.com` embeds a cross-origin image, they can use a
 Spectre attack to read its pixel data, which makes protections relying on
 "opaqueness" ineffective.
 
-![Spectr](evil-actor.png)
+{% Img src="image/admin/wN636enwMtBrrOfhzEoq.png", alt="Spectr", width="800", height="500" %}
 
 Ideally, all cross-origin requests should be explicitly vetted by the server
 that owns the resource. If vetting is not provided by
@@ -98,17 +106,19 @@ This is exactly what COOP+COEP is about.
 
 Under a cross-origin isolated state, the requesting site is considered less
 dangerous and this unlocks powerful features such as `SharedArrayBuffer`,
-`performance.measureMemory` and the JS Self-Profiling API which could otherwise be
-used for Spectre-like attacks. It also prevents modifying `document.domain`.
+`performance.measureUserAgentSpecificMemory()` and [high resolution
+timers](https://www.w3.org/TR/hr-time/) with better precision which could
+otherwise be used for Spectre-like attacks. It also prevents modifying
+`document.domain`.
 
 ### Cross Origin Embedder Policy {: #coep }
 [Cross Origin Embedder
 Policy (COEP)](https://wicg.github.io/cross-origin-embedder-policy/) prevents a
 document from loading any cross-origin resources that don't explicitly grant
 the document permission (using CORP or CORS). With this feature, you can declare
-that a document cannot load such resources. 
+that a document cannot load such resources.
 
-![How COEP works](coep.png)
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="How COEP works", width="800", height="410" %}
 
 To activate this policy, append the following HTTP header to the document:
 
@@ -125,7 +135,7 @@ Cross Origin Resource Sharing (CORS) or Cross Origin Resource Policy (CORP).
 
 ### Cross Origin Resource Sharing {: #cors }
 If a cross origin resource supports [Cross Origin Resource Sharing
-(CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), you may use the
+(CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), you may use the
 [`crossorigin`
 attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)
 to load it to your web page without being blocked by COEP.
@@ -142,11 +152,11 @@ prevents the image from being loaded unless it sets CORS headers.
 Similarly, you may fetch cross origin data through the `fetch()` method, which
 doesn't require special handling as long as the server responds with [the right
 HTTP
-headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers).
+headers](https://developer.mozilla.org/docs/Web/HTTP/CORS#The_HTTP_response_headers).
 
 ### Cross Origin Resource Policy {: #corp }
 [Cross Origin Resource Policy
-(CORP)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_%28CORP%29)
+(CORP)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
 was originally introduced as an opt-in to protect your resources from being
 loaded by another origin. In the context of COEP, CORP can specify the resource
 owner's policy for who can load a resource.
@@ -189,7 +199,7 @@ top-level window. For example, if a document with COOP opens a pop-up, its
 `window.opener` property will be `null`. Also, the `.closed` property of the
 opener's reference to it will return `true`.
 
-![COOP](coop1.png)
+{% Img src="image/admin/eUu74n3GIlK1fj9ACxF8.png", alt="COOP", width="800", height="452" %}
 
 The `Cross-Origin-Opener-Policy` header takes three possible values:
 
@@ -200,7 +210,7 @@ Cross-Origin-Opener-Policy: same-origin
 Documents that are marked `same-origin` can share the same browsing context
 group with same-origin documents that are also explicitly marked `same-origin`.
 
-![COOP](coop2.png)
+{% Img src="image/admin/he8FaRE2ef67lamrFG60.png", alt="COOP", width="800", height="507" %}
 
 ```http
 Cross-Origin-Opener-Policy: same-origin-allow-popups
@@ -210,7 +220,7 @@ A top-level document with `same-origin-allow-popups` retains references to any
 of its popups which either don't set COOP or which opt out of isolation by
 setting a COOP of `unsafe-none`.
 
-![COOP](coop3.png)
+{% Img src="image/admin/AJdm6vFq4fQXUWOTFeFa.png", alt="COOP", width="800", height="537" %}
 
 ```http
 Cross-Origin-Opener-Policy: unsafe-none
@@ -221,7 +231,7 @@ browsing context group unless the opener itself has a COOP of `same-origin`.
 
 {% Aside %}
 The
-[`noopener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)
+[`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#Window_features)
 attribute has a similar effect to what you would expect from COOP except that it
 works only from the opener side. (You can't disassociate your window when it is opened
 by a third party.) When you attach `noopener` by doing something such as
@@ -236,16 +246,17 @@ protect your website in browsers that don't support COOP.
 ## Summary {: #summary }
 
 If you want guaranteed access to powerful features like `SharedArrayBuffer`,
-`performance.measureMemory` or JS Self-Profiling API, just remember that your
-document needs to use both COEP with the value of `require-corp` and COOP with
-the value of `same-origin`. In the absence of either, the browser will not
-guarantee sufficient isolation to safely enable those powerful features. You can
-determine your page's situation by checking if
+`performance.measureUserAgentSpecificMemory()` or [high resolution
+timers](https://www.w3.org/TR/hr-time/) with better precision, just remember
+that your document needs to use both COEP with the value of `require-corp` and
+COOP with the value of `same-origin`. In the absence of either, the browser will
+not guarantee sufficient isolation to safely enable those powerful features. You
+can determine your page's situation by checking if
 [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)
 returns `true`.
 
 Learn the steps to implement this at [Making your website "cross-origin
-isolated" using COOP and COEP](https://web.dev/coop-coep/).
+isolated" using COOP and COEP](/coop-coep/).
 
 ## Resources
 * [COOP and COEP
diff --git a/src/site/content/en/blog/window-controls-overlay/index.md b/src/site/content/en/blog/window-controls-overlay/index.md
new file mode 100644
index 00000000000..eb95bd4fef8
--- /dev/null
+++ b/src/site/content/en/blog/window-controls-overlay/index.md
@@ -0,0 +1,521 @@
+---
+layout: post
+title: Customize the window controls overlay of your PWA's title bar
+subhead: |
+  Use the title bar area next to the window controls to make your PWA feel more like an app.
+authors:
+  - thomassteiner
+  - amandabaker
+date: 2021-04-22
+updated: 2022-08-29
+description: |
+  With the Window Controls Overlay feature, developers can customize the title bar of installed PWAs
+  so that their PWAs feel more like apps.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/KEHQXWqr6s7VnEfTqVOC.jpeg
+alt: Kid drawing, crafting, and painting rocks.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - progressive-web-apps
+  - capabilities
+---
+
+If you remember my article [Make your PWA feel more like an app](/app-like-pwas/), you may recall
+how I mentioned [customizing the title bar of your app](/app-like-pwas/#customized-title-bar) as a
+strategy for creating a more app-like experience. Here is an example of how this can look
+showing the macOS Podcasts app.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/o5gZ3GSKyUZOPhFxX7js.png", alt="A macOS Podcasts app title bar showing media control buttons and metadata about the currently playing podcast.", width="800", height="63" %}
+  <figcaption>
+     A custom title bar makes your PWA feel more like a platform-specific app.
+  </figcaption>
+</figure>
+
+Now you may be tempted to object by saying that Podcasts is a platform-specific macOS app that does
+not run in a browser and therefore can do what it wants without having to play by the browser's
+rules. True, but the good news is that the Window Controls Overlay feature, which is the topic of
+this very article, soon lets you create similar user interfaces for your PWA.
+
+## Window Controls Overlay components
+
+Window Controls Overlay consists of four sub-features:
+
+1. The `"window-controls-overlay"` value for the [`"display_override"`](/display-override/) field in
+   the web app manifest.
+1. The CSS environment variables `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, and
+   `titlebar-area-height`.
+1. The standardization of the previously proprietary CSS property `-webkit-app-region` as the
+   `app-region` property to define draggable regions in web content.
+1. A mechanism to query for and work around the window controls region via the
+   `windowControlsOverlay` member of `window.navigator`.
+
+## What is Window Controls Overlay
+
+The title bar area refers to the space to the left or right of the window controls (that is, the
+buttons to minimize, maximize, close, etc.) and often contains the title of the application. Window
+Controls Overlay lets progressive web applications (PWAs) provide a more app-like feel by swapping
+the existing full-width title bar for a small overlay containing the window controls. This allows
+developers to place custom content in what was previously the browser-controlled title bar area.
+
+## Current status {: #status }
+
+<div>
+
+| Step                                     | Status                              |
+| ---------------------------------------- | ----------------------------------- |
+| 1. Create explainer                      | [Complete][explainer]               |
+| 2. Create initial draft of specification | [Complete][spec]                    |
+| 3. Gather feedback & iterate on design   | [In progress](#feedback)            |
+| 4. Origin trial                          | Complete                            |
+| 5. **Launch**                            | **Complete** (in Chromium&nbsp;104) |
+
+</div>
+
+## How to use Window Controls Overlay
+
+### Adding `window-controls-overlay` to the web app manifest
+
+A progressive web app can opt-in to the window controls overlay by adding
+`"window-controls-overlay"` as the primary `"display_override"` member in the web app manifest:
+
+```json
+{
+  "display_override": ["window-controls-overlay"]
+}
+```
+
+The window controls overlay will be visible only when all of the following conditions are satisfied:
+
+1. The app is _not_ opened in the browser, but in a separate PWA window.
+1. The manifest includes `"display_override": ["window-controls-overlay"]`. (Other values are
+   allowed thereafter.)
+1. The PWA is running on a desktop operating system.
+1. The current origin matches the origin for which the PWA was installed.
+
+The result of this is an empty title bar area with the regular window controls on the left or the
+right, depending on the operating system.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/zVuuiMs37fGrDK8J7PXK.png", alt="An app window with an empty titlebar with the window controls on the left.", width="800", height="182" %}
+  <figcaption>
+    An empty title bar ready for custom content.
+  </figcaption>
+</figure>
+
+### Moving content into the title bar
+
+Now that there is space in the title bar, you can move something there. For this article, I
+built a Wikimedia Featured Content PWA. A useful feature for this app may be a search for words in
+the article titles. The HTML for the search feature looks like this:
+
+```html
+<div class="search">
+  <img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
+  <label>
+    <input type="search" />
+    Search for words in articles
+  </label>
+</div>
+```
+
+To move this `div` up into the title bar, some CSS is needed:
+
+```css
+.search {
+  /* Make sure the `div` stays there, even when scrolling. */
+  position: fixed;
+  /**
+   * Gradient, because why not. Endless opportunities.
+   * The gradient ends in `#36c`, which happens to be the app's
+   * `<meta name="theme-color" content="#36c">`.
+   */
+  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
+  /* Use the environment variable for the left anchoring with a fallback. */
+  left: env(titlebar-area-x, 0);
+  /* Use the environment variable for the top anchoring with a fallback. */
+  top: env(titlebar-area-y, 0);
+  /* Use the environment variable for setting the width with a fallback. */
+  width: env(titlebar-area-width, 100%);
+  /* Use the environment variable for setting the height with a fallback. */
+  height: env(titlebar-area-height, 33px);
+}
+```
+
+You can see the effect of this code in the screenshot below. The title bar is fully responsive. When
+you resize the PWA window, the title bar reacts as if it were composed of regular HTML content,
+which, in fact, it is.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/z59JyFopfQC35WrEyA6g.png", alt="An app window with a search bar in the title bar.", width="800", height="182" %}
+  <figcaption>
+    The new title bar is active and responsive.
+  </figcaption>
+</figure>
+
+### Determining which parts of the title bar are draggable
+
+While the screenshot above suggests that you are done, you are not done quite yet. The PWA window is
+no longer draggable (apart from a very small area), since the window controls buttons are not drag
+areas, and the rest of the title bar consists of the search widget. Fix this using
+the `app-region` CSS property with a value of `drag`. In the concrete case, it is fine to make
+everything besides the `input` element draggable.
+
+```css
+/* The entire search `div` is draggable… */
+.search {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+/* …except for the `input`. */
+input {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+```
+
+{% Aside %} For now, `app-region` has not been standardized, so the plan is to continue using
+the prefixed `-webkit-app-region` until `app-region` is standardized. Currently, only
+`-webkit-app-region` is supported in the browser. {% endAside %}
+
+With this CSS in place, the user can drag the app window as usual by dragging the `div`, the `img`,
+or the `label`. Only the `input` element is interactive so the search query can be entered.
+
+### Feature detection
+
+Support for Window Controls Overlay can be detected by testing for the existence of
+`windowControlsOverlay`:
+
+```js
+if ('windowControlsOverlay' in navigator) {
+  // Window Controls Overlay is supported.
+}
+```
+
+### Querying the window controls region with `windowControlsOverlay`
+
+The code so far has one problem: on some platforms the window controls are on the right, on
+others they are on the left. To make matters worse, the "three dots" Chrome menu will change
+position, too, based on the platform. This means that the linear gradient background image needs to
+be dynamically adapted to run from `#131313`→`maroon` or `maroon`→`#131313`→`maroon`, so that it
+blends in with the title bar's `maroon` background color which is determined by
+`<meta name="theme-color" content="maroon">`. This can be achieved by querying the
+`getTitlebarAreaRect()` API on the `navigator.windowControlsOverlay` property.
+
+```js
+if ('windowControlsOverlay' in navigator) {
+  const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
+  // Window controls are on the right (like on Windows).
+  // Chrome menu is left of the window controls.
+  // [ windowControlsOverlay___________________ […] [_] [■] [X] ]
+  if (x === 0) {
+    div.classList.add('search-controls-right');
+  }
+  // Window controls are on the left (like on macOS).
+  // Chrome menu is right of the window controls overlay.
+  // [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
+  else {
+    div.classList.add('search-controls-left');
+  }
+} else {
+  // When running in a non-supporting browser tab.
+  div.classList.add('search-controls-right');
+}
+```
+
+Rather than having the background image in the `.search` class CSS rules directly (as before), the
+modified code now uses two classes that the code above sets dynamically.
+
+```css
+/* For macOS: */
+.search-controls-left {
+  background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
+}
+
+/* For Windows: */
+.search-controls-right {
+  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
+}
+```
+
+### Determining if the window controls overlay is visible
+
+The window controls overlay will not be visible in the title bar area in all circumstances. While it
+will naturally not be there on browsers that do not support the Window Controls Overlay feature, it
+will also not be there when the PWA in question runs in a tab. To detect this situation, you can
+query the `visible` property of the `windowControlsOverlay`:
+
+```js
+if (navigator.windowControlsOverlay.visible) {
+  // The window controls overlay is visible in the title bar area.
+}
+```
+
+{% Aside %} The window controls overlay visibility is not to be confused with the visibility in the
+CSS sense of whatever HTML content you place next to the window controls overlay. Even if you set
+`display: none` on the `div` placed into the window controls overlay, the `visible` property of the
+window controls overlay would still report `true`. {% endAside %}
+
+Alternatively, you can also use the `display-mode` media query in JavaScript and/or CSS:
+
+```js
+// Create the query list.
+const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');
+
+// Define a callback function for the event listener.
+function handleDisplayModeChange(mql) {
+  // React on display mode changes.
+}
+
+// Run the display mode change handler once.
+handleOrientationChange(mediaQueryList);
+
+// Add the callback function as a listener to the query list.
+mediaQueryList.addEventListener('change', handleDisplayModeChange);
+```
+
+```css
+@media (display-mode: window-controls-overlay) { 
+  /* React on display mode changes. */ 
+}
+```
+
+### Being notified of geometry changes
+
+Querying the window controls overlay area with `getTitlebarAreaRect()` can suffice for one-off
+things like setting the correct background image based on where the window controls are, but in
+other cases, more fine-grained control is necessary. For example, a possible use case could be to
+adapt the window controls overlay based on the available space and to add a joke right in the window
+control overlay when there is enough space.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/uDWjKo827ntEHp5S8tyW.png", alt="Window controls overlay area on a narrow window with shortened text.", width="800", height="303" %}
+  <figcaption>
+    Title bar controls adapted to a narrow window.
+  </figcaption>
+</figure>
+
+You can be notified of geometry changes by subscribing to
+`navigator.windowControlsOverlay.ongeometrychange` or by setting up an event listener for the
+`geometrychange` event. This event will only fire when the window controls overlay is visible, that
+is, when `navigator.windowControlsOverlay.visible` is `true`.
+
+{% Aside %} Since this event fires frequently (comparable to how a scroll listener fires), I always
+recommend you use a
+[debounce function](https://css-tricks.com/the-difference-between-throttling-and-debouncing/#debouncing-enforces-that-a-function-not-be-called-again-until-a-certain-amount-of-time-has-passed-without-it-being-called-as-in-execute-this-function-only-if-100-milliseconds-have-passed-witho)
+so the event does not fire too often. {% endAside %}
+
+```js
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+if ('windowControlsOverlay' in navigator) {
+  navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
+    span.hidden = e.titlebarAreaRect.width < 800;
+  }, 250);
+}
+```
+
+Rather than assigning a function to `ongeometrychange`, you can also add an event listener to
+`windowControlsOverlay` as below. You can read about the difference between the two on
+[MDN](https://developer.mozilla.org/docs/Web/Guide/Events/Event_handlers).
+
+```js
+navigator.windowControlsOverlay.addEventListener(
+  'geometrychange',
+  debounce((e) => {
+    span.hidden = e.titlebarAreaRect.width < 800;
+  }, 250),
+);
+```
+
+### Compatibility when running in a tab and on non-supporting browsers
+
+There are two possible cases to consider:
+
+- The case where an app is running in a browser that _supports_ Window Controls Overlay, but
+  where the app is used in a browser tab.
+- The case where an app is running in a browser that _does not support_ Window Controls Overlay.
+
+In both cases, by default the HTML built for the window controls
+overlay will display inline like regular HTML content and the `env()` variables' fallback values
+will kick in for the positioning. On supporting browsers, you can also decide to not display the
+HTML designated for the window controls overlay by checking the overlay's `visible` property, and if
+it reports `false`, then hiding that HTML content.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/2rAm7saFWnCnaIzukTlO.png", alt="A PWA running in a browser tab with the window controls overlay displayed in the body.", width="800", height="428" %}
+  <figcaption>
+    Controls meant for the title bar can be easily displayed in the body on older browsers.
+  </figcaption>
+</figure>
+
+As a reminder, non-supporting browsers will either not consider the
+[`"display_override"`](/display-override/) web app manifest property at all, or not recognize the
+`"window-controls-overlay"` and thus use the next possible value according to the fallback chain,
+for example, `"standalone"`.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/1VonSc0jOiOureeSkqtf.png", alt="A PWA running in standalone mode with the window controls overlay displayed in the body.", width="800", height="428" %}
+  <figcaption>
+    Controls meant for the title bar can be easily displayed in the body on older browsers.
+  </figcaption>
+</figure>
+
+## UI considerations
+
+While it may be tempting, creating a classic dropdown menu in the Window Controls Overlay area is not recommended. Doing so would violate the
+[design guidelines on macOS](https://developer.apple.com/design/human-interface-guidelines/macos/menus/menu-bar-menus/),
+a platform on which users expect menu bars (both system-provided ones and
+custom ones) at the top of the screen.
+
+{% Aside %}
+Having a proper App Menu API, similar to [`Menu`](https://www.electronjs.org/docs/latest/api/menu)
+available to Electron.js apps, is tracked as [crbug/1295253](https://crbug.com/1295253).
+{% endAside %}
+
+If your app provides a fullscreen experience, carefully consider whether it makes sense
+for your Window Controls Overlay to be part of the fullscreen view. Potentially you may
+want to rearrange your layout when the
+[`onfullscreenchange`](https://developer.mozilla.org/docs/Web/API/Document/onfullscreenchange)
+event fires.
+
+## Demo
+
+I have created a [demo](https://window-controls-overlay.glitch.me/) that you can play with in
+different supporting and non-supporting browsers and in the installed and non-installed state. For
+the actual Window Controls Overlay experience, you need to install the app and set the
+[flag](#enabling-via-chrome:flags). You can see two screenshots of what to expect below. The
+[source code](https://glitch.com/edit/#!/window-controls-overlay) for the app is available on Glitch.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/g8uxpFCkWhmFUkrIAVrJ.png", alt="The Wikimedia Featured Content demo app with Window Controls Overlay.", width="800", height="543" %}
+  <figcaption>
+    The demo app is available for experimentation.
+  </figcaption>
+</figure>
+
+The search feature in the window controls overlay is fully functional:
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/J3nvcwbrHznRFw5ZxaJS.png", alt="The Wikimedia Featured Content demo app with Window Controls Overlay and active search for the term 'cleopa…' highlighting one of the articles with the matched term 'Cleopatra'.", width="800", height="543" %}
+  <figcaption>
+    A search feature using the Window Controls Overlay.
+  </figcaption>
+</figure>
+
+## Security considerations
+
+The Chromium team designed and implemented the Window Controls Overlay API using the core principles
+defined in [Controlling Access to Powerful Web Platform Features][powerful-apis], including user
+control, transparency, and ergonomics.
+
+### Spoofing
+
+Giving sites partial control of the title bar leaves room for developers to spoof content in what
+was previously a trusted, browser-controlled region. Currently, in Chromium browsers, standalone
+mode includes a title bar which on initial launch displays the title of the webpage on the left, and
+the origin of the page on the right (followed by the "settings and more" button and the window
+controls). After a few seconds, the origin text disappears. If the browser is set to a right-to-left
+(RTL) language, this layout is flipped such that the origin text is on the left. This opens the
+window controls overlay to spoof the origin if there is insufficient padding between the origin and
+the right edge of the overlay. For example, the origin "evil.ltd" could be appended with a trusted
+site "google.com", leading users to believe that the source is trustworthy. The plan is to keep this
+origin text so that users know what the origin of the app is and can ensure that it matches their
+expectations. For RTL configured browsers, there must be enough padding to the right of the origin
+text to prevent a malicious website from appending the unsafe origin with a trusted origin.
+
+### Fingerprinting
+
+Enabling the window controls overlay and draggable regions do not pose
+considerable privacy concerns other than feature detection. However, due to
+differing sizes and positions of the window control buttons across operating
+systems, the
+<code>navigator.<wbr>windowControlsOverlay.<wbr>getTitlebarAreaRect()</code>
+method returns a [`DOMRect`](https://developer.mozilla.org/docs/Web/API/DOMRect)
+whose position and dimensions reveal information about the operating system upon
+which the browser is running. Currently, developers can already discover the OS
+from the user agent string, but due to fingerprinting concerns, there is
+discussion about freezing the UA string and unifying OS versions. There is an
+ongoing effort within the browser community to understand how frequently the
+size of the window controls overlay changes across platforms, as the current
+assumption is that these are fairly stable across OS versions and thus would not
+be useful for observing minor OS versions. Although this is a potential
+fingerprinting issue, it only applies to installed PWAs that use the custom
+title bar feature and does not apply to general browser usage. Additionally, the
+<code>navigator.<wbr>windowControlsOverlay</code> API will not be available to
+iframes embedded inside of a PWA.
+
+### Navigation
+
+Navigating to a different origin within a PWA will cause it to fall back to the normal standalone
+title bar, even if it meets the above criteria and is launched with the window controls overlay.
+This is to accommodate the black bar that appears on navigation to a different origin. After
+navigating back to the original origin, the window controls overlay will be used again.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/oUxysbNURuPZgAodB5hU.png", alt="A black URL bar for out-of-origin navigation.", width="800", height="543" %}
+  <figcaption>
+    A black bar is shown when the user navigates to a different origin.
+  </figcaption>
+</figure>
+
+## Feedback {: #feedback }
+
+The Chromium team wants to hear about your experiences with the Window Controls Overlay API.
+
+### Tell us about the API design
+
+Is there something about the API that doesn't work like you expected? Or are there missing methods
+or properties that you need to implement your idea? Have a question or comment on the security
+model? File a spec issue on the corresponding [GitHub repo][issues], or add your thoughts to an
+existing issue.
+
+### Report a problem with the implementation
+
+Did you find a bug with Chromium's implementation? Or is the implementation different from the spec?
+File a bug at [new.crbug.com](https://new.crbug.com). Be sure to include as much detail as you can,
+simple instructions for reproducing, and enter `UI>Browser>WebAppInstalls` in the **Components**
+box. [Glitch](https://glitch.com/) works great for sharing quick and easy repros.
+
+### Show support for the API
+
+Are you planning to use the Window Controls Overlay API? Your public support helps the Chromium team
+to prioritize features and shows other browser vendors how critical it is to support them.
+
+Send a Tweet to [@ChromiumDev][cr-dev-twitter] with the
+[`#WindowControlsOverlay`](https://twitter.com/search?q=%23WindowControlsOverlay&src=recent_search_click&f=live)
+hashtag and let us know where and how you're using it.
+
+## Helpful links {: #helpful }
+
+- [Explainer][explainer]
+- [Spec draft][spec]
+- [Chromium bug](https://crbug.com/937121)
+- [Chrome Platform Status entry](https://chromestatus.com/feature/5741247866077184)
+- [TAG review](https://github.com/w3ctag/design-reviews/issues/481)
+- [Microsoft Edge's related docs](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/experimental-features/#window-controls-overlay-for-installed-desktop-web-apps)
+
+## Acknowledgements
+
+Window Controls Overlay was implemented and specified by
+[Amanda Baker](https://www.linkedin.com/in/amanda-baker-20a2b962/) from the Microsoft Edge team.
+This article was reviewed by [Joe Medley](https://github.com/jpmedley) and
+[Kenneth Rohde Christiansen](https://github.com/kenchris). Hero image by
+[Sigmund](https://unsplash.com/@sigmund) on [Unsplash](https://unsplash.com/photos/OV44gxH71DU).
+
+[explainer]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md
+[spec]: https://wicg.github.io/window-controls-overlay/
+[cr-dev-twitter]: https://twitter.com/ChromiumDev
+[issues]: https://github.com/WICG/window-controls-overlay/issues
+[powerful-apis]:
+  https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md
diff --git a/src/site/content/en/blog/within/index.md b/src/site/content/en/blog/within/index.md
new file mode 100644
index 00000000000..fff6a387a6e
--- /dev/null
+++ b/src/site/content/en/blog/within/index.md
@@ -0,0 +1,355 @@
+---
+layout: post
+title: Rendering Text in WebVR
+description: |
+    Within is a platform for storytelling in virtual reality and is available everywhere VR is. This includes the web. Leveraging WebVR, viewers are able to go to a website, click a link, and immediately watch Within’s films in immersive VR - including high end head-mounted displays. During the development process the team discovered rendering text is difficult in this new environment, and they created an example using shaders to make it a smoother process.
+date: 2017-02-02
+updated: 2017-02-02
+tags:
+  - blog
+  - case-study
+
+---
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xE2bMbYkwAw5oXpuIN5k.jpg", alt="Within Detail", width="800", height="450" %}
+</figure>
+
+[View the site](https://vr.with.in/)
+
+Within ([https://with.in/](https://with.in/)) is a platform for storytelling in
+virtual reality. So when the team heard about [WebVR](https://developer.chrome.com/blog/ar-for-the-web/) in
+2015 we were immediately interested in its potential. Today, that interest
+manifests into a unique subdomain of our Web platform,
+[https://vr.with.in/](https://vr.with.in/). Anyone with a VR-enabled browser can
+go to the site, click a button and throw on a headset to be immersed in our
+portfolio of VR films.
+
+Today that includes but is not limited to Chrome on Daydream View. For
+information on your device and head-mounted display check out
+[https://webvr.info/](https://webvr.info/).
+
+Like other virtual reality specific rendering environments, the web
+predominantly relies on a three-dimensional representation of a scene. This
+scene has a camera, your perspective, and any number of objects. To help manage
+this scene, camera, and objects we use a library called
+[Three.js](https://threejs.org/) which leverages the `<canvas>` element to throw
+rendering onto your computer's GPU. There are many useful Three.js add-ons to
+make your scene viewable in WebVR. The main two are
+[THREE.VREffect](https://github.com/mrdoob/three.js/blob/dev/examples/js/effects/VREffect.js)
+for creating a viewport for each eye and
+[THREE.VRControls](https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/VRControls.js)
+for translating the perspective (e.g the rotation and position of the
+head-mounted display) convincingly into your scene. There are many examples of
+how to implement this. Check out the
+[Three.js WebVR examples](https://threejs.org/examples/?q=webvr)
+for ways to get started.
+
+As we got further into our exploration of WebVR we ran into an issue. If we look
+at the contents of the web, text is an integral part of it. While the majority
+of our content is video based, if you go to the
+[Within site](https://with.in/#films) text surrounds the content;
+the user interface and additional information about a film or related films are all
+constructed with text. Furthermore all of this text is created in the DOM. Our
+WebVR explorations and [https://vr.with.in/](https://vr.with.in/) are all in
+`<canvas>`.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jX3gkPhFpeTL9lbY0HXi.jpg", alt="Text used in WebVR", width="800", height="800" %}
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7eQw7WsXQghVDsGdcshr.jpg", alt="Text used in WebVR", width="800", height="800" %}
+  <figcaption>
+    Text used in WebVR for <a href="https://vr.with.in/">vr.with.in</a>
+  </figcaption>
+</figure>
+
+## What are my Options?
+
+Luckily, there is work being done to make this possible. In fact in our research
+we found a number of effective ways to render text in a three-dimensional
+environment on a `<canvas>` element. Below is a matrix of a few we found
+marked with pros and cons for each:
+
+<table>
+  <tr>
+   <th></th>
+   <th>Resolution Independent</th>
+   <th>Typographic Features</th>
+   <th>Performance</th>
+   <th>Ease of Implementation</th>
+  </tr>
+  <tr>
+   <td><a href="https://vr.with.in/archive/text-2d-canvas/">2D canvas text</a></td>
+   <td></td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</span></td>
+  </tr>
+  <tr>
+   <td><a href="https://vr.with.in/archive/text-triangulated-vector/">Triangulated vector text</a></td>
+   <td>Yes</span></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://threejs.org/examples/webgl_geometry_text.html">Extruded 3D text</a></td>
+   <td>Yes</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://vr.with.in/archive/text-sdf-bitmap/">Signed distance field bitmap text</a></td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+</table>
+
+
+## Our Decision: SDF Bitmap Font
+
+2D canvas with `ctx.fillText()` can do text wrapping, letter spacing and line
+height, but overflow gets cut off, and text will be blurry if you zoom in really
+far. You could increase the size of the canvas texture, but might hit an upper
+limit in texture size or performance could suffer if the texture is too big.
+
+Extruded 3D text is essentially the same as triangulated vector text, but with
+depth and possibly a bevel so it has at least twice as much geometry. Either of
+these could work in small doses for titles or logos, but wouldn't perform as
+well for large quantities of text and neither has typographic features.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/NGvF4Cy2irDhTW1PoKaR.png", alt="Font to SDF bitmap workflow", width="519", height="170" %}
+  <figcaption>Font to SDF bitmap workflow</figcaption>
+</figure>
+
+Bitmap fonts use one quad (two triangles) per character, so they use less
+geometry and perform better than
+[triangulated vectors](https://vr.with.in/archive/text-triangulated-vector/).
+They're still raster based since they use a texture map sprite, but with an SDF
+shader they're basically resolution-independent so they look nicer than a 2D
+canvas texture.
+[Matt DesLauriers'](https://mattdesl.svbtle.com/material-design-on-the-gpu)
+three-bmfont-text also includes reliable typographic features for text wrapping,
+letter spacing, line height and alignment. Overflow doesn't get cut off. Font
+size is controlled through scale. We chose this route because it gave us the
+best options for design while staying performant. Unfortunately, it wasn't as
+easy to implement so we'll go through the steps in the hopes of helping fellow
+developers working in WebVR.
+
+## 1. Generate a bitmap font (.png + .fnt)
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/gqRSq5JcJFyDXUtdxRMV.png", alt="Hiero interface", width="800", height="753" %}
+  <figcaption>Hiero interface</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Y6dc1N4jMEWDuDHw5wkM.png", alt="Hiero output (Bitmap PNG and .fnt file)", width="455", height="448" %}
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/65AI0E525qSn0YhBPsXD.png", alt="Hiero output (Bitmap PNG and .fnt file)", width="512", height="512" %}
+  <figcaption>Hiero output (Bitmap PNG and .fnt file)</figcaption>
+</figure>
+
+[Hiero](https://github.com/libgdx/libgdx/wiki/Hiero) is a bitmap font packing
+tool that runs with Java. The Hiero documentation doesn't really explain how to
+run it without going through a complicated build process. First, install Java if
+you haven't already. Then, if double-click on the runnable-hiero.jar doesn't
+open Hiero, try running it with this command in the console:
+
+```shell
+java -jar runnable-hiero.jar
+```
+
+Once Hiero is running, open a .ttf or .otf desktop font, enter any extra
+characters you want included, change rendering to Java to enable effects,
+increase the size so that your characters fill up the entire glyph cache square,
+add a distance field effect, adjust the distance field's scale and spread. The
+scale value is like a resolution. The higher it is, the less blurry it will be,
+but the longer it will take for Hiero to render the preview. Then save your
+bitmap font. It generates a bitmap font consisting of a .png image and an
+AngelCode .fnt font description file.
+
+## 2. Convert AngelCode to JSON
+
+Now that the bitmap font has been generated, we have to load it into our
+javascript app with Matt DesLauriers'
+[load-bmfont npm package](https://www.npmjs.com/package/load-bmfont).
+
+We could browserify load-bmfont and use that on the front end, but instead we're
+going to run
+[load-bmfont.js](https://vr.with.in/archive/text-sdf-bitmap/load-bmfont.js) with
+Node to convert and save Hiero's AngelCode .fnt to a
+[.json file](https://vr.with.in/archive/text-sdf-bitmap/fonts/roboto/bitmap/roboto-bold.json):
+
+```shell
+npm install
+node load-bmfont.js
+```
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lqRV6zKx4t29C2iyOLxW.png", alt="Example of output JSON", width="449", height="428" %}
+  <figcaption>Example of output JSON</figcaption>
+</figure>
+
+Now we can bypass load-bmfont and just do an XHR (XMLHttpRequest) request on the
+.json font file.
+
+```js
+var r = new XMLHttpRequest();
+r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');
+
+r.onreadystatechange = function() {
+    if (r.readyState === 4 && r.status === 200) {
+    setup(JSON.parse(r.responseText));
+    }
+};
+
+r.send();
+
+function setup(font) {
+    // pass font into TextBitmap object
+}
+```
+
+## 3. Browserify three-bmfont-text
+
+Once we have the font loaded, Matt's three-bmfont-text will take care of the
+rest. Since we're not using Node for our own app, we're going to
+[browserify](http://browserify.org/)
+[three-bmfont-text.js](https://vr.with.in/archive/text-sdf-bitmap/three-bmfont-text.js)
+into a usable [three-bmfont-text-bundle.js](https://vr.with.in/archive/text-sdf-bitmap/three-bmfont-text-bundle.js)
+
+```shell
+npm install -g browserify
+browserify three-bmfont-text.js -o three-bmfont-text-bundle.js
+```
+
+## 4. SDF shader
+
+Adjust the **afwidth** and **threshold** sliders on
+[vr.with.in/archive/text-sdf-bitmap/](https://vr.with.in/archive/text-sdf-bitmap/)
+to see the affect of the signed distance field shader.
+
+## 5. Usage
+
+For convenience, I created a
+[TextBitmap wrapper class](https://vr.with.in/archive/text-sdf-bitmap/text-bitmap.js)
+for the browserified three-bmfont-text.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZuSlohAf0rwGdUh1Nctk.png", alt="Text-sdf-bitmap in action", width="800", height="396" %}
+  <figcaption>Text-sdf-bitmap in action</figcaption>
+</figure>
+
+```html
+<script src="three-bmfont-text-bundle.js"></script>
+<script src="sdf-shader.js"></script>
+<script src="text-bitmap.js"></script>
+```
+
+Create an XHR request for the .json font file and create a text object in the
+callback:
+
+```js
+var bmtext = new TextBitmap({ options });
+```
+
+To change text:
+
+```js
+bmtext.text = 'The quick brown fox jumps over the lazy dog.';
+
+scene.add( bmtext.group );
+hitBoxes.push( bmtext.hitBox );
+```
+
+The bitmap font's .png is loaded with THREE.TextureLoader in text-bitmap.js
+
+TextBitmap also includes an invisible hitbox for three.js raycast interaction
+through a mouse, camera, or hand tracked motion controllers like Oculus Touch or
+the Vive controllers. The hitbox's size auto-updates when you change the text
+options.
+
+Bmtext.group is added to the three.js scene. If you need to access the children
+/ Object3D's, the scene graph for the text looks like:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/38XlqLFu31jVetooepgF.png", alt="File system diagram", width="125", height="159" %}
+</figure>
+
+## 6. Unminify json and modify xoffsets
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lIwwhhWV9sFsN5S3KpIX.gif", alt="Within text gif", width="800", height="297" %}
+</figure>
+
+If your kerning look off, you may need to edit the xoffsets in the json. Paste
+the json into [Jsbeautifier.org](http://jsbeautifier.org/) to get an
+unminified version of the file.
+
+The xoffset is essentially global kerning for one character. Kerning is for two
+specific characters that appear next to each other. The default values in the
+kerning array don't actually make a difference, and it would be too tedious to
+edit, so you can empty that array to decrease the file size of the json. Then
+edit the xoffsets for kerning.
+
+First you'll have to figure out which characters go with which char ID in the
+json. In [three-bmfont-text-bundle.js](https://vr.with.in/archive/text-sdf-bitmap/three-bmfont-text-bundle.js),
+insert `console.log` after line 240:
+
+```js
+    var id = text.charCodeAt(i)
+    // console.log(id);
+```
+
+Then type into dat.gui text field on
+[https://vr.with.in/archive/text-sdf-bitmap/](https://vr.with.in/archive/text-sdf-bitmap/)
+and check the console to find the corresponding ID of a character.
+
+For example, in our bitmap font, "j" is consistently too far to the right. Its
+char ID is 106. So find `"id": 106` in the json and change its xoffset from -1
+to -10.
+
+## 7. Layout
+
+If you have multiple blocks of text and want it to flow from top to bottom like
+HTML, everything has to be manually positioned, similar to absolute positioning
+every dom element yourself with CSS. Can you imagine doing this in CSS?
+
+```css
+    * { position: absolute; }
+```
+
+That's what text layout in 3D is like. In the detail view: title, author,
+description, and duration are each a new TextBitmap object with their own
+styles, color, scale, etc.:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/SXdLB0TTJNyAxYuZFXdK.jpg", alt="3d layout", width="800", height="800" %}
+</figure>
+
+```js
+author.group.position.y = title.group.position.y - title.height - padding;
+description.group.position.y = author.group.position.y - author.height - padding;
+duration.group.position.y = description.group.position.y - description.height - padding;
+```
+
+This assumes that the local origin of each TextBitmap group is vertically
+aligned with the top of the TextBitmap mesh (see centering in
+[text-bitmap.js](https://vr.with.in/archive/text-sdf-bitmap/text-bitmap.js)
+update). If you change the text for any of those objects later, and the height
+of that object changes, you will also need to recalculate those positions. Here,
+only the y-position of the text is modified, but one opportunity of working in
+3D is that we can push and pull the text in the z-direction, as well as rotate
+around the x, y and z axes.
+
+## Conclusion
+
+Text and layout in WebVR have a long way to go before they're as easy and as
+widely-used as HTML and CSS. But working solutions exist and you can do way more
+in WebVR than you can with a traditional HTML web page. WebVR exists today.
+There will probably be better tools tomorrow. Until then, try it out and
+experiment. Developing without a ubiquitous framework leads to more unique
+projects, and that's exciting.
diff --git a/src/site/content/en/blog/wix/index.md b/src/site/content/en/blog/wix/index.md
new file mode 100644
index 00000000000..03b3f86eb79
--- /dev/null
+++ b/src/site/content/en/blog/wix/index.md
@@ -0,0 +1,394 @@
+---
+layout: post
+title: How Wix improved website performance by evolving their infrastructure
+subhead: >
+  A case study of some major changes introduced at Wix to improve website loading
+  performance for millions of sites, clearing the path for them to receive good PageSpeed Insights and
+  Core Web Vitals scores.
+authors:
+  - alonko
+description: >
+  A case study of some major changes introduced at Wix to improve website loading
+  performance for millions of sites, clearing the path for them to receive good PageSpeed Insights and
+  Core Web Vitals scores.
+date: 2021-03-10
+updated: 2022-07-18
+hero: image/BrQidfK9jaQyIHwdw91aVpkPiib2/HNGPDotyTYOuPE0YxLQ9.jpg
+alt: "A fast train (source: https://unsplash.com/photos/60VrGk-bfeA)"
+tags:
+  - blog
+  # - fast
+  - performance
+  - web-vitals
+  - case-study
+---
+
+{% Aside %}
+  Alon leads the core backend team at [Wix](https://www.wix.com).
+{% endAside %}
+
+Thanks to leveraging industry standards, cloud providers, and CDN capabilities,
+combined with a major rewrite of our website runtime, the percentage of Wix
+sites reaching good 75th percentile scores on all Core Web Vitals (CWV) metrics
+**more than tripled** year over year, according to data from
+[CrUX](https://developer.chrome.com/docs/crux/)
+and
+[HTTPArchive](https://httparchive.org/faq#how-do-i-use-bigquery-to-write-custom-queries-over-the-data).
+
+Wix adopted a performance-oriented culture, and further improvements will
+continue rolling out to users. As we focus on performance KPIs, we expect to see
+the number of sites passing CWV thresholds grow.
+
+## Overview
+
+The world of performance is [beautifully complex](https://youtu.be/ctavZT87syI),
+with many variables and intricacies. Research shows that site [speed has a
+direct impact on conversion rates and revenues](/milliseconds-make-millions) for
+businesses. In recent years, the industry has put more emphasis on performance
+visibility and [making the web faster](/fast). Starting in May 2021, [page
+experience
+signals](https://developers.google.com/search/blog/2020/11/timing-for-page-experience)
+will be included in Google Search ranking.
+
+The unique challenge at Wix is supporting **millions** of sites, some of which
+were built _many years ago_ and have not been updated since. We have various
+[tools and
+articles](https://support.wix.com/en/performance-and-technical-issues/site-performance)
+to assist our users on what they can do to analyze and improve the performance
+of their sites.
+
+Wix is a managed environment and not everything is in the hands of the user.
+Sharing common infrastructures presents many challenges for all these sites, but
+also opens opportunities for major enhancements across the board, i.e.
+leveraging the economies of scale.
+
+{% Aside%}
+_In this post I will focus on enhancements done around serving the initial HTML, which
+initiates the page loading process._
+{% endAside %}
+
+
+### Speaking in a common language
+
+One of the core difficulties with performance is finding a common terminology to
+discuss different aspects of the user experience, while considering both the
+technical and perceived performance. Using a well-defined, common language
+within the organization enabled us to easily discuss and categorize the
+different technical parts and trade-offs, clarified our performance reports and
+tremendously helped to understand what aspects we should focus on improving
+first.
+
+We adjusted all our monitoring and internal discussions to include industry
+standard metrics such as [Web Vitals](/vitals/), which include:
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/PLF62sx8lHkpKbnvYKKR.jpg", alt="A diagram of the 2020 Core Web Vitals: LCP, FID, and CLS.", width="800", height="215" %}
+  <figcaption>Core Web Vitals</figcaption>
+</figure>
+
+### Site complexity and performance scores
+
+It's pretty easy to create a site that loads instantly so long as you
+[make it very simple](https://justinjackson.ca/words.html) using only
+HTML and serve it via a CDN.
+
+<figure data-float="left">
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/xMUN9CUVvgnHofImPcV5.jpg", alt="PageSpeed Insights Example", width="800", height="647" %}
+</figure>
+
+However, the reality is that sites are getting more and more complex and
+sophisticated, operating more like applications rather than documents, and
+supporting functionalities such as blogs, e-commerce solutions, custom code,
+etc.
+
+Wix offers a very large [variety of
+templates](https://www.wix.com/website/templates), enabling its users to easily
+build a site with many business capabilities. Those additional features often
+come with _some_ performance costs.
+
+## The journey
+
+### In the beginning, there was HTML
+
+Every time a webpage is loaded, it always starts with an initial request to a
+URL in order to retrieve the HTML document. This HTML response triggers all the
+additional client requests and browser logic to run and render your site. This
+is the most important part of the page loading, because nothing happens until
+the beginning of the response arrives (known as TTFB - time to first byte).
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/b1KKSlUQQTuNCDj4ndyJ.jpg", alt="WebPageTest First View", width="800", height="411" %}
+  <figcaption>WebPageTest First View</figcaption>
+</figure>
+
+#### The past: client-side rendering (CSR)
+
+When operating large scale systems, you always have trade-offs you need to
+consider, such as performance, reliability and costs. Up to a few years ago, Wix
+used client-side rendering (CSR), in which the actual HTML content was generated
+via JavaScript on the client side (i.e. in the browser) allowing us to support a
+high scale of sites without having huge backend operational costs.
+
+CSR enabled us to use a common HTML document, which was essentially empty. All
+it did was trigger the download of the required code and data which was then
+used to generate the full HTML on the client device.
+
+#### Today: server-side rendering (SSR)
+
+A few years ago we transitioned to server-side rendering (SSR), as that was
+beneficial both to SEO and performance, improving initial page visibility times
+and ensuring better indexing for search engines that do not have full support
+for running JavaScript.
+
+This approach improved the visibility experience, especially on slower
+devices/connections, and opened the door for further performance optimizations.
+However, it also meant that for each web page request, a unique HTML response
+was generated on the fly, which is **far** from optimal, especially for sites
+with a large amount of views.
+
+
+### Introducing caching in multiple locations
+
+The HTML for each site was mostly static, but it had a few caveats:
+
+1. It frequently changes. Each time a user edits their site, or makes changes in site data,
+   such as on the website store inventory.
+2. It had certain data and cookies that were **visitor specific**,
+   meaning two people visiting the same site would see somewhat different HTML. For example,
+   to support products features such as remembering what items a visitor put in the cart,
+   or the chat the visitor started with the business earlier, and more.
+3. Not all pages are cacheable. For example a page with custom user code on it,
+   that displays the current time as part of the document, is not eligible for caching.
+
+Initially, we took the relatively safe approach of caching the HTML <span
+style="text-decoration:underline;">without</span> visitor data, and then only
+modified specific parts of the HTML response on the fly for each visitor, for
+each cache hit.
+
+#### In-house CDN solution
+
+We did this by deploying an in-house solution: Using [Varnish HTTP
+Cache](https://varnish-cache.org/) for proxying and caching, Kafka for
+invalidation messages, and a Scala/Netty-based service which proxies these HTML
+responses, but mutates the HTML and adds visitor-specific data and cookies to
+the cached response.
+
+This solution enabled us to deploy these **slim** components in many more
+geographic locations and multiple cloud provider regions, which are spread
+across the world. In 2019, we introduced **over 15 new regions**, and gradually
+enabled caching for over 90% of our page views that were eligible for caching.
+Serving sites from additional locations reduced the [network
+latency](https://www.cloudping.co/grid) between the clients and the servers
+serving the HTML response, by bringing the content closer to the website's
+visitors.
+
+We also started caching certain read-only API responses by using the same
+solution and invalidating the cache on any change to the site content. For
+example, the list of blog posts on the site is cached and invalidated when a
+post is published/modified.
+
+#### Reducing complexities
+
+Implementing caching improved performance substantially, mostly on the
+[TTFB](/ttfb/) and [FCP](/fcp/) phases, and improved our
+reliability by serving the content from a location closer to the end user.
+
+However, the need to modify the HTML for each response introduced an unnecessary
+complexity that, if removed, presented an opportunity for further performance
+improvements.
+
+### Browser caching (and preparations for CDNs)
+
+<div>
+  <div class="stats">
+    <div class="stats__item">
+     <p class="stats__figure">~ 13<sub>%</sub></p>
+     <p>HTML requests served directly from the browser cache,
+     saving much bandwidth and reducing loading times for repeat views</p>
+    </div>
+  </div>
+</div>
+
+The next step was to actually remove this visitor-specific data from the HTML
+<span style="text-decoration:underline;">entirely</span>, and retrieve it from a
+separate endpoint, called by the client for this purpose, after the HTML has
+arrived.
+
+We carefully migrated this data and cookies to a new endpoint, which is called
+on each page load, but returns a slim JSON, which is required only for the
+[hydration process](https://reactjs.org/docs/react-dom.html#hydrate), to reach
+full page interactivity.
+
+This allowed us to enable browser caching of the HTML, which means that browsers
+now save the HTML response for repeating visits, and only call the server to
+validate that the content hasn't changed. This is done using [HTTP
+ETag](https://en.wikipedia.org/wiki/HTTP_ETag), which is basically an identifier
+assigned to a specific version of an HTML resource. If the content is still the
+same, a [304 Not
+Modified](https://developer.mozilla.org/docs/Web/HTTP/Status/304) response
+is sent by our servers to the client, without a body.
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/hr1xnQccJEkHTBGxS5wF.jpg", alt="ALT_TEXT_HERE", width="800", height="410" %}
+  <figcaption>WebPageTest Repeat View</figcaption>
+</figure>
+
+In addition, this change means that our HTML is no longer visitor-specific and
+contains no cookies. In other words it can basically be cached anywhere, opening
+the door to using CDN providers that have much better geo presence in hundreds
+of locations around the world.
+
+
+### DNS, SSL and HTTP/2
+
+With caching enabled, wait times were reduced and other important parts of the
+initial connection became more substantial. Enhancing our networking
+infrastructure and monitoring enabled us to improve our DNS, connection, and SSL
+times.
+
+<figure data-float="right">
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/Uuvh9xTItQ8wMA9s13RP.jpg", alt="A response time graph.", width="800", height="441" %}
+</figure>
+
+[HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) was enabled for all user domains,
+reducing both the amount of connections required and the overhead that comes
+with each new connection. This was a relatively easy change to deploy, while
+taking advantage of the [performance and resilience
+benefits](https://developers.google.com/web/fundamentals/performance/http2) that
+come with HTTP/2.
+
+
+### Brotli compression (vs. gzip)
+
+<div>
+  <div class="stats">
+    <div class="stats__item">
+     <p class="stats__figure">21 - 25<sub>%</sub></p>
+     <p>Reduction of median file transfer size</p>
+    </div>
+  </div>
+</div>
+
+Traditionally, all our files were compressed using [gzip
+compression](https://en.wikipedia.org/wiki/Gzip), which is the most prevalent
+HTML compression option on the web. This compression protocol was initially
+implemented almost 30 years ago!
+
+<figure data-float="right">
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/h7KzeAfg2THMdDGMYvlR.jpg", alt="Brotli compression", width="800", height="805" %}
+  <figcaption>
+    <a href="https://tools.paulcalvano.com/compression.php">Brotli Compression Level Estimator</a>
+  </figcaption>
+</figure>
+
+
+The newer [Brotli compression](https://en.wikipedia.org/wiki/Brotli) introduces
+compression improvements with almost no trade-offs, and is slowly becoming more
+popular, as described in the yearly Web Almanac [Compression
+chapter](https://almanac.httparchive.org/en/2020/compression#what-type-of-content-should-we-compress).
+It has been supported by [all the major browsers](https://caniuse.com/brotli)
+for a while.
+
+We enabled Brotli support on our nginx proxies in the edges, for all clients
+that support it.
+
+Moving to use Brotli compression reduced our median file transfer sizes by
+**21% to 25%** resulting in a reduced bandwidth usage and improved loading times.
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/392RWYamrwkdFozk91LC.jpg", alt="Mobile and Desktop Median Response Sizes", width="800", height="173" %}
+  <figcaption>Median Response Sizes</figcaption>
+</figure>
+
+## Content delivery networks (CDNs)
+
+### Dynamic CDN selection
+
+At Wix, we have always used [CDNs](/content-delivery-networks/) to serve all the
+JavaScript code and images on user websites.
+
+Recently, we integrated with a solution by our DNS provider, to automatically
+select the best performing CDN according to the client's network and origin.
+This enables us to serve the static files from the best location for each
+visitor, and avoid availability issues on a certain CDN.
+
+### Coming soon… user domains served by CDNs
+
+The final piece of the puzzle is serving the last, and most critical part,
+through a CDN: the HTML from the user domain.
+
+As described above, we created our own in-house solution to cache and serve the
+site-specific HTML and API results. Maintaining this solution in so many new
+regions also has its operational costs, and adding new locations becomes a
+process we need to manage and continually optimize.
+
+We are currently integrating with various CDN providers to support serving the
+entire Wix site directly from CDN locations to improve the distribution of our
+servers across the globe and thus further improve response times. This is a
+challenge due to the large amount of domains we serve, which require SSL
+termination at the edge.
+
+Integrating with CDNs brings Wix websites closer than ever to the customer and
+comes with more improvements to the loading experience, including newer
+technologies such as HTTP/3 without added effort on our side.
+
+<hr>
+
+### A few words on performance monitoring
+
+If you run a Wix site, you're probably wondering how this translates to your Wix
+site performance results, and how we compare against other website platforms.
+
+Most of the work done above has been deployed in the past year, and some is
+still being rolled out.
+
+The Web Almanac by HTTPArchive recently published the [2020
+edition](https://almanac.httparchive.org/en/2020) which includes an excellent
+chapter on [CMS user experience](https://almanac.httparchive.org/en/2020/cms).
+Keep in mind that many of the numbers described in this article are from the
+middle of 2020.
+
+We look forward to seeing the updated report in 2021, and are actively
+monitoring
+[CrUX](https://developer.chrome.com/docs/crux/)
+reports for our sites as well as our internal performance metrics.
+
+We are committed to continuously improve loading times and provide our users
+with a platform where they can build sites as they imagine, without compromising
+on performance.
+
+<figure>
+  {% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/AADz7d1yVOWZlq0iSb6P.jpg", alt="LCP, Speed Index and FCP for a mobile site over time", width="800", height="259" %}
+  <figcaption>LCP, Speed Index and FCP for a mobile site over time</figcaption>
+</figure>
+
+DebugBear recently released a very interesting [Website Builder Performance
+Review](https://www.debugbear.com/blog/website-builder-performance-review),
+which touches on some of the areas I mentioned above and examines the
+performance of very simple sites built on each platform. This
+[site](https://matt05041.wixsite.com/bizsolutions) was built almost two years
+ago, and not modified since, but the platform is continually improving, and the
+site performance along with it, which can be witnessed by [viewing its
+data](https://www.debugbear.com/project/175/pageLoad/873/overview?dateRange=2019-03-31T21%3A00Z-to-2021-03-31T21%3A59Z)
+over the past year and a half.
+
+## Conclusion
+
+We hope our experience inspires you to adopt a performance-oriented culture at
+your organisation and that the details above are helpful and applicable to your
+platform or site.
+
+To sum up:
+
+* Pick a set of metrics that you can track consistently using tools endorsed by
+  the industry. We recommend Core Web Vitals.
+* Leverage browser caching and CDNs.
+* Migrate to HTTP/2 (or HTTP/3 if possible).
+* Use Brotli compression.
+
+Thanks for learning our story and we invite you to ask questions, share ideas on
+[Twitter](https://twitter.com/alonkochba) and
+[GitHub](https://github.com/alonkochba) and join the web performance
+conversation on your favorite channels.
+
+## So, how does **your** recent Wix site performance look like?
diff --git a/src/site/content/en/blog/wordico/index.md b/src/site/content/en/blog/wordico/index.md
new file mode 100644
index 00000000000..136ca6b6844
--- /dev/null
+++ b/src/site/content/en/blog/wordico/index.md
@@ -0,0 +1,426 @@
+---
+layout: post
+title: Case Study - Converting Wordico from Flash to HTML5
+authors:
+  - adammark
+  - adriangould
+date: 2011-03-10
+tags:
+  - blog
+  - case-study
+---
+## Introduction
+
+When we converted our [Wordico](http://www.wordico.com) crossword game from Flash to HTML5, our first task was to unlearn everything we knew about creating a rich user experience in the browser. While Flash offered a single, comprehensive API for all aspects of application development - from vector drawing to polygon hit detection to XML parsing - HTML5 offered a jumble of specifications with varying browser support. We also wondered if HTML, a document-specific language, and CSS, a box-centric language, were suitable for building a game. Would the game display uniformly across browsers, as it did in Flash, and would it look and behave as nicely? For Wordico, the answer was <i>yes.</i>
+
+## What's your vector, Victor?
+
+We developed the original version of Wordico using only vector graphics: lines, curves, fills, and gradients. The result was both highly compact and infinitely scalable:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3eBecIcEkaaVpW7bo4Ng.jpg", alt="Wordico Wireframe", width="600", height="400" %}
+<figcaption>In Flash, every display object was made of vector shapes.</figcaption>
+</figure>
+
+We also took advantage of the Flash timeline to create objects having multiple states. For example, we used nine named keyframes for the `Space` object:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ea3v3u4mPkuT0kcIARwl.png", alt="A triple-letter space in Flash.", width="472", height="469" %}
+<figcaption>A triple-letter space in Flash.</figcaption>
+</figure>
+
+In HTML5, however, we use a bitmapped sprite:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ng5ulpGG0pXwOBMLgOu3.png", alt="A PNG sprite showing all nine spaces.", width="630", height="70" %}
+<figcaption>A PNG sprite showing all nine spaces.</figcaption>
+</figure>
+
+To create the 15x15 gameboard from individual spaces, we iterate over a 225-character string notation in which each space is represented by a different character (such as "t" for triple letter and "T" for triple word). This was a straightforward operation in Flash; we simply stamped out spaces and arranged them in a grid:
+
+```js
+var spaces:Array = new Array();
+
+for (var i:int = 0; i < 225; i++) {
+  var space:Space = new Space(i, layout.charAt(i));
+  ...
+  spaces.push(addChild(space));
+}
+
+LayoutUtil.grid(spaces, 15);
+```
+
+In HTML5, it's a bit more complicated. We use the [`<canvas>` element](http://diveintohtml5.info/canvas.html), a bitmap drawing surface, to paint the gameboard one square at a time. The first step is to load the image sprite. Once it's loaded, we iterate through the layout notation, drawing a different portion of the image with each iteration:
+
+```js
+var x = 0;  // x coordinate
+var y = 0;  // y coordinate
+var w = 35; // width and height of a space
+
+for (var i = 0; i < 225; i++) {
+  if (i && i % 15 == 0) {
+    x = 0;
+    y += w;
+  }
+
+  var imageX = "_dDFtTqQxm".indexOf(layout.charAt(i)) * 70;
+
+  canvas.drawImage("spaces.png", imageX, 0, 70, 70, x, y, w, w);
+
+  x += w;
+}
+```
+
+Here's the result in the web browser. Note that the canvas itself has a CSS drop shadow:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/T5036Q7IziNYCm9K96Nl.png", alt="In HTML5, the gameboard is a single canvas element.", width="280", height="242" %}
+<figcaption>In HTML5, the gameboard is a single canvas element.</figcaption>
+</figure>
+
+Converting the tile object was a similar exercise. In Flash, we used [text fields](http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html) and vector shapes:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/WD1gT3k3AwTwnrZ9JCgA.png", alt="The Flash tile was a combination of text fields and vector shapes", width="165", height="168" %}
+<figcaption>The Flash tile was a combination of text fields and vector shapes.</figcaption>
+</figure>
+
+In HTML5, we combine three image sprites on a single `<canvas>` element at runtime:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FT43exDZpzqZ88og01l0.png", alt="The HTML tile is a composite of three images.", width="600", height="89" %}
+<figcaption>The HTML tile is a composite of three images.</figcaption>
+</figure>
+
+Now we have 100 canvases (one for each tile) plus a canvas for the gameboard. Here's the markup for an "H" tile:
+
+```html
+<canvas width="35" height="35" class="tile tile-racked" title="H-2"/>
+```
+
+Here's the corresponding CSS:
+
+```css
+.tile {
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.tile-drag {
+  -moz-box-shadow: 1px 1px 7px rgba(0,0,0,0.8);
+  -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.8);
+  -moz-transform: scale(1.10);
+  -webkit-transform: scale(1.10);
+  -webkit-box-reflect: 0px;
+  opacity: 0.85;
+}
+
+.tile-locked {
+  cursor: default;
+}
+
+.tile-racked {
+  -webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%,  
+    from(transparent), color-stop(0.70, transparent), to(white));
+}
+```
+
+We apply CSS3 effects when the tile is being dragged (shadow, opacity, and scaling) and when the tile is sitting on the rack (reflection):
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MzE7dGX78tZvynN3EGmZ.png", alt="The dragged tile is slightly larger, slightly transparent, and has a drop shadow.", width="371", height="112" %}
+<figcaption>The dragged tile is slightly larger, slightly transparent, and has a drop shadow.</figcaption>
+</figure>
+
+Using raster images has some obvious advantages. First, the result is pixel-precise. Second, these images can be cached by the browser. Third, with a little extra work, we can swap out the images to create new tile designs - such as a metal tile - and this design work can be done in Photoshop instead of in Flash.
+
+The downside? By using images, we give up programmatic access to the text fields. In Flash, it was a simple operation to change the color or other properties of the type; in HTML5, these properties are baked into the images themselves. (We tried HTML text, but it required a lot of extra markup and CSS. We also tried canvas text, but the results were inconsistent across browsers.)
+
+## Fuzzy logic
+
+We wanted to make full use of the browser window at any size - and avoid scrolling. This was a relatively simple operation in Flash, since the entire game was drawn in vectors and could be scaled up or down without losing fidelity. But it was trickier in HTML. We tried using CSS scaling but ended up with a blurred canvas:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UUqxfXDXcVPaHcHTh3jb.png", alt="CSS scaling (left) vs. redrawing (right).", width="301", height="149" %}
+<figcaption>CSS scaling (left) vs. redrawing (right).</figcaption>
+</figure>
+
+Our solution is to redraw the gameboard, rack, and tiles whenever the user resizes the browser:
+
+```js
+window.onresize = function (evt) {
+...
+gameboard.setConstraints(boardWidth, boardWidth);
+
+...
+rack.setConstraints(rackWidth, rackHeight);
+
+...
+tileManager.resizeTiles(tileSize);
+});
+```
+
+We end up with crisp images and pleasing layouts at any screen size:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/oaQ9mopWjWipGwcTTeVS.jpg", alt="The gameboard fills the vertical space; other page elements flow around it.", width="745", height="191" %}
+<figcaption>The gameboard fills the vertical space; other page elements flow around it.</figcaption>
+</figure>
+
+## Get to the point
+
+Since each tile is absolutely positioned and must align precisely with the gameboard and rack, we need a reliable positioning system. We use two functions, `Bounds` and `Point`, to help manage the location of elements in the global space (the HTML page). `Bounds` describes a rectangular area on the page, while `Point` describes an <i>x,y</i> coordinate relative to the top left corner of the page (0,0), otherwise known as the registration point.
+
+With `Bounds`, we can detect the intersection of two rectangular elements (such as when a tile crosses the rack) or whether a rectangular area (such as a double-letter space) contains an arbitrary point (such as the center point of a tile). Here's the implementation of Bounds:
+
+```js
+// bounds.js
+function Bounds(element) {
+var x = element.offsetLeft;
+var y = element.offsetTop;
+var w = element.offsetWidth;
+var h = element.offsetHeight;
+
+this.left = x;
+this.right = x + w;
+this.top = y;
+this.bottom = y + h;
+this.width = w;
+this.height = h;
+this.x = x;
+this.y = y;
+this.midx = x + (w / 2);
+this.midy = y + (h / 2);
+this.topleft = new Point(x, y);
+this.topright = new Point(x + w, y);
+this.bottomleft = new Point(x, y + h);
+this.bottomright = new Point(x + w, y + h);
+this.middle = new Point(x + (w / 2), y + (h / 2));
+}
+
+Bounds.prototype.contains = function (point) {
+return point.x > this.left &amp;&amp;
+point.x < this.right &amp;&amp;
+point.y > this.top &amp;&amp;
+point.y < this.bottom;
+}
+
+Bounds.prototype.intersects = function (bounds) {
+return this.contains(bounds.topleft) ||
+this.contains(bounds.topright) ||
+this.contains(bounds.bottomleft) ||
+this.contains(bounds.bottomright) ||
+bounds.contains(this.topleft) ||
+bounds.contains(this.topright) ||
+bounds.contains(this.bottomleft) ||
+bounds.contains(this.bottomright);
+}
+
+Bounds.prototype.toString = function () {
+return [this.x, this.y, this.width, this.height].join(",");
+}
+```
+
+We use `Point` to determine the absolute coordinate (top-left corner) of any element on the page or of a mouse event. `Point` also contains methods for calculating distance and direction, which are necessary for creating animation effects. Here's the implementation of `Point`:
+
+```js
+// point.js
+
+function Point(x, y) {
+this.x = x;
+this.y = y;
+}
+
+Point.prototype.distance = function (point) {
+var a = point.x - this.x;
+var b = point.y - this.y;
+
+return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+}
+
+Point.prototype.distanceX = function (point) {
+return Math.abs(this.x - point.x);
+}
+
+Point.prototype.distanceY = function (point) {
+return Math.abs(this.y - point.y);
+}
+
+Point.prototype.interpolate = function (point, pct) {
+var x = this.x + ((point.x - this.x) * pct);
+var y = this.y + ((point.y - this.y) * pct);
+
+return new Point(x, y);
+}
+
+Point.prototype.offset = function (x, y) {
+return new Point(this.x + x, this.y + y);
+}
+
+Point.prototype.vector = function (point) {
+return new Point(point.x - this.x, point.y - this.y);
+}
+
+Point.prototype.toString = function () {
+return this.x + "," + this.y;
+}
+
+// static
+Point.fromElement = function (element) {
+return new Point(element.offsetLeft, element.offsetTop);
+}
+
+// static
+Point.fromEvent = function (evt) {
+return new Point(evt.x || evt.clientX, evt.y || evt.clientY);
+}
+```
+
+These functions form the basis of drag-and-drop and animation capabilities. For example, we use `Bounds.intersects()` to determine if a tile overlaps a space on the gameboard; we use `Point.vector()` to determine the direction of a dragged tile; and we use `Point.interpolate()` in combination with a timer to create a motion tween, or easing effect.
+
+## Go with the flow
+
+While fixed-size layouts are easier to produce in Flash, fluid layouts are much easier to generate with HTML and the CSS box model. Consider the following grid view, with its variable width and height:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rKTDof6hhP0GxiPmORR5.jpg", alt="This layout has no fixed dimensions: thumbnails flow left to right, top to bottom.", width="500", height="403" %}
+<figcaption>This layout has no fixed dimensions: thumbnails flow left to right, top to bottom.</figcaption>
+</figure>
+
+Or consider the chat panel. The Flash version required multiple event handlers to respond to mouse actions, a mask for the scrollable area, math for computing the scroll position, and a lot of other code to glue it together.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bdp0fUK8kmWEM0BY45ad.jpg", alt="The chat panel in Flash was pretty but complex.", width="259", height="317" %}
+<figcaption>The chat panel in Flash was pretty but complex.</figcaption>
+</figure>
+
+The HTML version, by comparison, is just a `<div>` with a fixed height and the overflow property set to hidden. Scrolling costs us nothing.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/tj47VhDgbeFG6PDiutB1.jpg", alt="The CSS box model at work.", width="284", height="323" %}
+<figcaption>The CSS box model at work.</figcaption>
+</figure>
+
+In cases like this - ordinary layout tasks - HTML and CSS outshine Flash.
+
+## Can you hear me now?
+
+We struggled with the `<audio>` tag - it simply wasn't capable of playing short sounds effects repeatedly in certain browsers. We tried two workarounds. First, we padded the sound files with dead air to make them longer. Then we tried alternating playback across multiple audio channels. Neither technique was completely effective or elegant.
+
+Ultimately we decided to roll our own Flash audio player and use HTML5 audio as a fallback. Here's the basic code in Flash:
+
+```js
+var sounds = new Array();
+
+function playSound(path:String):void {
+var sound:Sound = sounds[path];
+
+if (sound == null) {
+sound = new Sound();
+sound.addEventListener(Event.COMPLETE, function (evt:Event) {
+    sound.play();
+});
+sound.load(new URLRequest(path));
+sounds[path] = sound;
+}
+else {
+sound.play();
+}
+}
+
+ExternalInterface.addCallback("playSound", playSound);
+```
+
+In JavaScript, we attempt to detect the embedded Flash player.  If that fails, we create an `<audio>` node for each sound file:
+
+```js
+function play(String soundId) {
+var src = "/audio/" + soundId + ".mp3";
+
+// Flash
+try {
+var swf = window["swfplayer"] || document["swfplayer"];
+swf.playSound(src);
+}
+// or HTML5 audio
+catch (e) {
+var sound = document.getElementById(soundId);
+if (sound == null || sound == undefined) {
+    var sound = document.createElement("audio");
+    sound.id = soundId;
+    sound.src = src;
+    document.body.appendChild(sound);
+}
+sound.play();
+}
+}
+```
+
+Note that this works for MP3 files only - we never bothered to support OGG. We hope the industry will settle on a single format in the near future.
+
+## Poll position
+
+We use the same technique in HTML5 as we did in Flash to refresh the game state: every 10 seconds, the client asks the server for updates. If the game state has changed since the last poll, the client receives and handles the changes; otherwise, nothing happens. This traditional polling technique is acceptable, if not quite elegant. However, we'd like to switch to [long polling](http://en.wikipedia.org/wiki/Long_polling#Long_polling) or [WebSockets](http://en.wikipedia.org/wiki/Web_Sockets) as the game matures and users come to expect real-time interaction over the network. WebSockets, in particular, would present many opportunities to enhance the game play.
+
+## What a tool!
+
+We used [Google Web Toolkit](http://code.google.com/webtoolkit/) (GWT) to develop both the front-end user interface and back-end control logic (authentication, validation, persistence, and so on). The JavaScript itself is compiled from Java source code. For example, the Point function is adapted from `Point.java`:
+
+```js
+package com.wordico.client.view.layout;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.event.dom.client.DomEvent;
+
+public class Point {
+public double x;
+public double y;
+
+public Point(double x, double y) {
+this.x = x;
+this.y = y;
+}
+
+public double distance(Point point) {
+double a = point.x - this.x;
+double b = point.y - this.y;
+
+return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+}
+...
+}
+```
+
+Some UI classes have corresponding template files in which page elements are "bound" to class members. For example, `ChatPanel.ui.xml` corresponds to `ChatPanel.java`:
+
+```html
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+
+<ui:UiBinder
+xmlns:ui="urn:ui:com.google.gwt.uibinder"
+xmlns:g="urn:import:com.google.gwt.user.client.ui"
+xmlns:w="urn:import:com.wordico.client.view.widget">
+
+<g:HTMLPanel>
+<div class="palette">
+<g:ScrollPanel ui:field="messagesScroll">
+    <g:FlowPanel ui:field="messagesFlow"></g:FlowPanel>
+</g:ScrollPanel>
+<g:TextBox ui:field="chatInput"></g:TextBox>
+</div>
+</g:HTMLPanel>
+
+</ui:UiBinder>
+```
+
+The full details are beyond the scope of this article, but we encourage you to check out GWT for your next HTML5 project.
+
+Why use Java? First, for strict typing. While dynamic typing is useful in JavaScript - for example, the ability of an array to hold values of different types - it can be a headache in large, complex projects. Second, for refactoring capabilities. Consider how you'd change a JavaScript method signature across thousands of lines of code - not easily! But with a good Java IDE, it's a snap. Finally, for testing purposes. Writing unit tests for Java classes beats the time-honored technique of "save and refresh."
+
+## Summary
+
+Except for our audio troubles, HTML5 greatly exceeded our expectations. Not only does Wordico look as good as it did in Flash, it's every bit as fluid and responsive. We couldn't have done it without Canvas and CSS3. Our next challenge: adapting Wordico for mobile use.
diff --git a/src/site/content/en/blog/wordpress-playground/index.md b/src/site/content/en/blog/wordpress-playground/index.md
new file mode 100644
index 00000000000..f5fcf28a41f
--- /dev/null
+++ b/src/site/content/en/blog/wordpress-playground/index.md
@@ -0,0 +1,235 @@
+---
+title: Build in-browser WordPress experiences with WordPress Playground and WebAssembly
+subhead: The full WordPress powered by PHP running solely in the browser with WebAssembly
+description: The full WordPress powered by PHP running solely in the browser with WebAssembly
+authors:
+  - adamzielinski
+  - nattestad
+date: 2023-04-12
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/gaEAYfVaiHsMEz07wZSn.jpg
+alt: A developer with a WordPress t-shirt sitting in front of a computer.
+tags:
+  - blog
+  - webassembly
+---
+
+When you first see [WordPress Playground](http://wasm.wordpress.net/), it seems
+like an ordinary site–maybe except for the colorful background. It's anything
+but. What you're actually looking at is an entire WordPress tech stack,
+including PHP and a database, running directly in your browser.
+
+In this post, Adam Zieliński (lead of WordPress Playground) and Thomas Nattestad
+(Product Manager for V8) explore:
+
+- How WordPress Playground can help you as a WordPress developer.
+- How it works under the hood.
+- What it means for the future of WordPress.
+
+## Use WordPress without installation, embed it in your app, and even control it with JavaScript
+
+You can use and customize the WordPress embedded at
+[playground.wordpress.net](http://playground.wordpress.net/) for free. There's
+no cloud infrastructure and support to pay for, because that site lives entirely
+in your browser–no one else can visit it. It's also temporary. As soon as you
+refresh the page, it's gone. You can get as many of these sites as you want for
+prototyping, trying out plugins, and quickly exploring ideas.
+
+You can even use them to test your code in different environments using the
+built-in PHP and WordPress version switcher:
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/tVA8iwBfR187eUUwCLAL.png", alt="phpinfo page.", width="800", height="699" %}
+
+WordPress Playground is an entirely new way of using WordPress. Its full power,
+however, is only unlocked by including it in your app. The easy way is to embed
+WordPress Playground in an `<iframe>` and configure it using the
+[query parameters API](https://wordpress.github.io/wordpress-playground/pages/embedding-wordpress-playground-on-other-websites.html).
+That's what the [official showcase](https://developer.wordpress.org/playground)
+does. When you select, for example, the
+[Pendant theme](https://wordpress.org/themes/pendant/) and the
+[Coblocks plugin](https://wordpress.org/plugins/coblocks/), the embedded iframe
+gets updated to point to
+[https://playground.wordpress.net/?theme=pendant&plugin=coblocks](https://playground.wordpress.net/?theme=pendant&plugin=coblocks).
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/lPMfWljMKZbMluoN4971.png", alt="WordPress Playground showcase.", width="800", height="740" %}
+
+The iframe is an easy way of getting started, but it's also limited to just the
+basic configuration option. If you need more than that, there is another, more
+powerful API.
+
+### The WordPress Playground JavaScript client enables full control over the embedded site
+
+You can control the entire WordPress site, including the filesystem and PHP,
+using the full API available via the
+[@wp-playground/client](https://www.npmjs.com/package/@wp-playground/client) npm
+package. The following example shows to use it—check
+[the interactive tutorial](https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/)
+for even more examples:
+
+```js
+import {
+  connectPlayground,
+  login,
+  connectPlayground,
+} from '@wp-playground/client';
+
+const client = await connectPlayground(
+  document.getElementById('wp'), // An iframe
+  { loadRemote: 'https://playground.wordpress.net/remote.html' },
+);
+await client.isReady();
+
+// Login the user as admin and go to the post editor:
+await login(client, 'admin', 'password');
+await client.goTo('/wp-admin/post-new.php');
+
+// Run arbitrary PHP code:
+await client.run({ code: '<?php echo "Hi!"; ?>' });
+
+// Install a plugin:
+const plugin = await fetchZipFile();
+await installPlugin(client, plugin);
+```
+
+### Use WebAssembly PHP even without WordPress
+
+WordPress Playground is not a monolith. WebAssembly PHP is released
+independently from WordPress and you can use it separately as well. For the web,
+you may use the [@php-wasm/web](https://www.npmjs.com/package/@php-wasm/web) npm
+package optimized for a low bundle size, and in Node.js you can lean
+on [@php-wasm/node](https://www.npmjs.com/package/@php-wasm/node) which provides
+more PHP extensions. Adam used the former to add interactive PHP snippets
+to [this WP_HTML_Tag_Processor tutorial](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/).
+Here's a sneak peek of how to use it:
+
+```js
+import { PHP } from '@php-wasm/web';
+const php = await PHP.load('8.0', {
+  requestHandler: {
+    documentRoot: '/www',
+  },
+});
+
+// Create and run a script directly
+php.mkdirTree('/www');
+php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
+php.run({ scriptPath: '/www/index.php' });
+
+// Or use the familiar HTTP concepts:
+const response = php.request({
+  method: 'POST',
+  relativeUrl: '/index.php',
+  data: { name: 'John' },
+});
+console.log(response.text); // Hello John
+```
+
+At this point you must be thinking–_how does that even work?_ Great question!
+Let's dive into the internals and find out. Buckle up!
+
+## Under the hood, there's WebAssembly PHP, a SQL translator, and an in-browser server
+
+### PHP runs as a WebAssembly binary
+
+PHP doesn't just work in the browser out of the box. WordPress Playground
+developed a
+[dedicated pipeline](https://github.com/WordPress/wordpress-playground/blob/0d451c33936a8db5b7a158fa8aad288c19370a7d/packages/php-wasm/compile/Dockerfile)
+to build [the PHP interpreter](https://github.com/php/php-src) to WebAssembly
+using [Emscripten](https://emscripten.org/docs/porting/networking.html).
+Building vanilla PHP isn't overly complex–it only takes
+[adjusting a function signature here](https://github.com/WordPress/wordpress-playground/blob/0d451c33936a8db5b7a158fa8aad288c19370a7d/packages/php-wasm/compile/build-assets/php7.1.patch#L8-L9),
+[forcing a config variable there](https://github.com/WordPress/wordpress-playground/blob/0d451c33936a8db5b7a158fa8aad288c19370a7d/packages/php-wasm/compile/Dockerfile#L495),
+and applying
+[a few small patches](https://github.com/WordPress/wordpress-playground/tree/0d451c33936a8db5b7a158fa8aad288c19370a7d/packages/php-wasm/compile/build-assets).
+Here's how you can build it yourself:
+
+```bash
+git clone https://github.com/WordPress/wordpress-playground
+cd wordpress-playground && npm install
+# Below, you can replace "8.2" with any other valid PHP version number.
+npm run recompile:php:web:8.2
+```
+
+However, vanilla PHP builds aren't very useful in the browser. As a server
+software, PHP doesn't have a JavaScript API to pass the request body, upload
+files, or populate the `php://stdin` stream. WordPress Playground had to build
+one from scratch. The WebAssembly binary comes with a
+[dedicated PHP API module](https://github.com/WordPress/wordpress-playground/blob/0d451c33936a8db5b7a158fa8aad288c19370a7d/packages/php-wasm/compile/build-assets/php_wasm.c)
+written in C and a
+[JavaScript PHP class](https://github.com/WordPress/wordpress-playground/blob/da38192af57a95699d8731c855b82ac0222df61b/packages/php-wasm/common/src/lib/php.ts) that
+exposes methods like `writeFile()` or `run()`.
+
+Because every PHP version is just a static `.wasm` file, the PHP version
+switcher is actually pretty boring. It simply tells the browser to download, for
+example, `php_7_3.wasm` instead of, say, `php_8_2.wasm`.
+
+### Database is supported with a SQL translation layer
+
+WordPress requires MySQL. However, there isn't a WebAssembly version of MySQL
+you could run in the browser. WordPress Playground therefore ships PHP with the
+[native SQLite driver](https://www.php.net/manual/en/ref.pdo-sqlite.php) and
+leans on SQLite.
+
+But how can WordPress run on a different database?
+
+Behind the scenes, the official
+[SQLite Database Integration](https://github.com/WordPress/sqlite-database-integration)
+plugin intercepts all MySQL queries and rewrites them in SQLite dialect. The 2.0
+release ships
+[a new WordPress Playground-informed translation layer](https://github.com/WordPress/sqlite-database-integration/pull/9)
+that allows WordPress on SQLite to pass 99% of the WordPress unit test suite.
+
+### The web server lives inside the browser
+
+In a regular WordPress, clicking on a link, say _Blog,_ would initiate an HTTP
+request to the remote backend to fetch the `blog` page. However, WordPress
+Playground has no remote backend. It has a
+[Service Worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
+that intercepts all the outgoing requests and passes them to an in-browser PHP
+instance running in a separate
+[Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers).
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/EAYGDJ5cBGHFnQuFYjEw.png", alt="Flow diagram starting with an iframe pointing at the resource wp-admin, calls to which are intercepted by the service worker, rendered in the worker thread, and ultimately translated to a WordPress response by the in-browser server.", width="800", height="675" %}
+
+### Networking is supported through WebSockets
+
+When it comes to networking, WebAssembly programs are limited to calling
+JavaScript APIs. It is a safety feature, but also presents a challenge. How do
+you support low-level, synchronous networking code used by PHP with the
+high-level asynchronous APIs available in JavaScript?
+
+For WordPress Playground, the answer involves a WebSocket to TCP socket proxy,
+[Asyncify](https://emscripten.org/docs/porting/asyncify.html), and patching deep
+PHP internals like `php_select`. It's complex, but there's a reward. The
+Node.js-targeted PHP build can request web APIs, install composer packages, and
+even connect to a MySQL server.
+
+## WordPress can be used in even more places than the browser
+
+Since WordPress can now run on WebAssembly, you could also run it in a Node.js
+server—it's the same V8 engine! Of course with StackBlitz you can also run
+Node.js directly in the browser, meaning that you could run WordPress and PHP
+compiled to WebAssembly, executing in Node.js, which is also compiled to
+WebAssembly running
+[in the browser](https://stackblitz.com/edit/node-zt3hpi?file=todo-list%2Fsrc%2Fedit.js).
+WebAssembly is also exploding in popularity in the serverless space, and in the
+future this could run on that infrastructure as well.
+
+## The future may bring zero-setup, interactive, and collaborative WordPress apps
+
+Imagine jumping straight into a code editor where you're free to just get
+building right away, with all of the setup completed. You could even share a
+simple link and start a multiplayer editing session, such as in Google Docs. And
+when you're done, it would only take a single click to seamlessly deploy your
+creations to a variety of hosting services–all without ever installing anything
+locally!
+
+And that's just a glimpse! We may see interactive tutorials, live plugin demos,
+staging sites, decentralized WordPress on edge servers, and even building
+plugins on your phone.
+
+The future is exciting and you can be a part of it! Your ideas and contributions
+are the oxygen of WordPress Playground. Visit
+[the GitHub repository](https://github.com/WordPress/wordpress-playground), say
+hi in the #meta-playground
+[WordPress.org Slack channel](https://make.wordpress.org/chat/), and feel free
+to contact Adam at [adam@adamziel.com](mailto:adam@adamziel.com).
\ No newline at end of file
diff --git a/src/site/content/en/blog/wordpress-playground/request-flow.excalidraw b/src/site/content/en/blog/wordpress-playground/request-flow.excalidraw
new file mode 100644
index 00000000000..d9ffcf065ff
--- /dev/null
+++ b/src/site/content/en/blog/wordpress-playground/request-flow.excalidraw
@@ -0,0 +1,1182 @@
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "https://excalidraw.com",
+  "elements": [
+    {
+      "type": "text",
+      "version": 398,
+      "versionNonce": 289135974,
+      "isDeleted": false,
+      "id": "4cuNEjF7O6sFWXyDriSvF",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 31.13146052479135,
+      "y": 753.6039556002615,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 380.947265625,
+      "height": 69,
+      "seed": 344579770,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 2,
+      "text": "Heavy computations are delegated\nto a separate thread so the Service Worker\ncan keep handling requests",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Heavy computations are delegated\nto a separate thread so the Service Worker\ncan keep handling requests",
+      "lineHeight": 1.15,
+      "baseline": 65
+    },
+    {
+      "type": "arrow",
+      "version": 78,
+      "versionNonce": 386372602,
+      "isDeleted": false,
+      "id": "5Y_qmttxtw8VZS3iFZXiq",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -27.44463916494749,
+      "y": 703.7287033530956,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 0,
+      "height": 0,
+      "seed": 949223910,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 183,
+      "versionNonce": 1843871910,
+      "isDeleted": false,
+      "id": "xAOCwWmytM5OqLEa17bds",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 509.8829482910455,
+      "y": 754.902431055838,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 337.646484375,
+      "height": 69,
+      "seed": 1276245882,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 2,
+      "text": "PHP+SQLite run as WebAssembly.\nJavaScript \"server\" translates browser\nrequests into WordPress responses.",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "PHP+SQLite run as WebAssembly.\nJavaScript \"server\" translates browser\nrequests into WordPress responses.",
+      "lineHeight": 1.15,
+      "baseline": 65
+    },
+    {
+      "type": "text",
+      "version": 207,
+      "versionNonce": 933692602,
+      "isDeleted": false,
+      "id": "0twHxBlD6LAM9W53frngB",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -436.59116475429846,
+      "y": 753.2772034487061,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 323.515625,
+      "height": 46,
+      "seed": 801559846,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 2,
+      "text": "The request is handled in JavaScript\nand never reach the server",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "The request is handled in JavaScript\nand never reach the server",
+      "lineHeight": 1.15,
+      "baseline": 42
+    },
+    {
+      "type": "rectangle",
+      "version": 1189,
+      "versionNonce": 1319510970,
+      "isDeleted": false,
+      "id": "LfCsz0_CX0N9ygIq6ezd3",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -90.85462613708265,
+      "y": 130.35169560445678,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 584.6529346426425,
+      "height": 349.9081898988016,
+      "seed": 882440250,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287920024,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "line",
+      "version": 973,
+      "versionNonce": 1896516838,
+      "isDeleted": false,
+      "id": "cBbqhazjf4Mw_OSQPC0eM",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -95.7719902273582,
+      "y": 179.50329425215062,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 589.0331126843364,
+      "height": 0,
+      "seed": 935149670,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1681287920024,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": null,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          589.0331126843364,
+          0
+        ]
+      ]
+    },
+    {
+      "type": "ellipse",
+      "version": 999,
+      "versionNonce": 1578058234,
+      "isDeleted": false,
+      "id": "xlxd4clcsFrl3c73OqoOw",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": -79.8664970292702,
+      "y": 145.11113208100707,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fa5252",
+      "width": 22.867679536931846,
+      "height": 20.753719019538668,
+      "seed": 503439610,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287927338,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 1086,
+      "versionNonce": 1822156838,
+      "isDeleted": false,
+      "id": "-5RHpEUbvTCYiFmO4WJ8t",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": -47.13166137234012,
+      "y": 143.6420776455006,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fab005",
+      "width": 22.867679536931846,
+      "height": 21.32904020259806,
+      "seed": 608453542,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287923945,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 1027,
+      "versionNonce": 1848114490,
+      "isDeleted": false,
+      "id": "QVxXwZrYpCT5-76tCqR7N",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 0,
+      "opacity": 100,
+      "angle": 0,
+      "x": -15.66666706523111,
+      "y": 143.32867633148174,
+      "strokeColor": "#000000",
+      "backgroundColor": "#40c057",
+      "width": 22.867679536931846,
+      "height": 22.867679536931846,
+      "seed": 1674555834,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287920024,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 599,
+      "versionNonce": 1716325222,
+      "isDeleted": false,
+      "id": "xFgbmY-ZV0mKpEWCr-ZDs",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 27.84400254050817,
+      "y": 141.47049102110708,
+      "strokeColor": "#495057",
+      "backgroundColor": "#fff",
+      "width": 263.979736328125,
+      "height": 25,
+      "seed": 1200152294,
+      "groupIds": [
+        "Lvn-GARDRVhMULTD7rXQm"
+      ],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287920024,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "https://wasm.wordpress.net",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "https://wasm.wordpress.net",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "rectangle",
+      "version": 408,
+      "versionNonce": 15121830,
+      "isDeleted": false,
+      "id": "Q1ifx7SLgvGDEHlCjKmRL",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -66.65279822465175,
+      "y": 200.38325804262604,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ced4da",
+      "width": 531.2264055337678,
+      "height": 252.58437468244028,
+      "seed": 2032495226,
+      "groupIds": [],
+      "roundness": {
+        "type": 3
+      },
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 551,
+      "versionNonce": 1948899258,
+      "isDeleted": false,
+      "id": "XvxTGeGCo_rqhh_6GQMGj",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -31.274139921771507,
+      "y": 342.0422155907563,
+      "strokeColor": "#000000",
+      "backgroundColor": "#ced4da",
+      "width": 460.8797607421875,
+      "height": 35,
+      "seed": 639111718,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "<iframe src=\"/wp-admin\"></iframe>",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "<iframe src=\"/wp-admin\"></iframe>",
+      "lineHeight": 1.25,
+      "baseline": 25
+    },
+    {
+      "type": "text",
+      "version": 695,
+      "versionNonce": 499914982,
+      "isDeleted": false,
+      "id": "m0ppO4zGoGdiczac1rtjq",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 17.467816065974034,
+      "y": 273.5009969810908,
+      "strokeColor": "#000000",
+      "backgroundColor": "#ced4da",
+      "width": 357.50384521484375,
+      "height": 35,
+      "seed": 1959136058,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "an iframe with WordPress:",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "an iframe with WordPress:",
+      "lineHeight": 1.25,
+      "baseline": 25
+    },
+    {
+      "type": "text",
+      "version": 198,
+      "versionNonce": 122343546,
+      "isDeleted": false,
+      "id": "GzXz-vZtJsuUmmXzNUc2B",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": -404.0436057499726,
+      "y": 662.2340280946055,
+      "strokeColor": "#000000",
+      "backgroundColor": "#ced4da",
+      "width": 262.07989501953125,
+      "height": 70,
+      "seed": 719248742,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "dVwaYw4OEATmX9w22A8E4",
+          "type": "arrow"
+        },
+        {
+          "id": "u88zs7UXQNiVdfedzmuvQ",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "Intercepted by the\nService Worker",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Intercepted by the\nService Worker",
+      "lineHeight": 1.25,
+      "baseline": 60
+    },
+    {
+      "type": "text",
+      "version": 363,
+      "versionNonce": 555456358,
+      "isDeleted": false,
+      "id": "e1rZuE8EC0qU3HJKGwFC4",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 109.64005416996633,
+      "y": 664.3904780686189,
+      "strokeColor": "#000000",
+      "backgroundColor": "#ced4da",
+      "width": 214.087890625,
+      "height": 70,
+      "seed": 487887866,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "u88zs7UXQNiVdfedzmuvQ",
+          "type": "arrow"
+        },
+        {
+          "id": "RqLRve-fQJe02Z7bCFKhs",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "Rendered in the\nWorker Thread",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Rendered in the\nWorker Thread",
+      "lineHeight": 1.25,
+      "baseline": 60
+    },
+    {
+      "type": "text",
+      "version": 467,
+      "versionNonce": 1797991098,
+      "isDeleted": false,
+      "id": "RXyNgJQivCeHf5z55VRw0",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 548.0246754449877,
+      "y": 664.8082676755239,
+      "strokeColor": "#000000",
+      "backgroundColor": "#ced4da",
+      "width": 265.9998779296875,
+      "height": 70,
+      "seed": 1529495718,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "...by the in-browser\nWordPress instance",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "...by the in-browser\nWordPress instance",
+      "lineHeight": 1.25,
+      "baseline": 60
+    },
+    {
+      "type": "arrow",
+      "version": 548,
+      "versionNonce": 182235110,
+      "isDeleted": false,
+      "id": "dVwaYw4OEATmX9w22A8E4",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": -45.38852413632435,
+      "y": 444.67800712473127,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ced4da",
+      "width": 209.31589275623764,
+      "height": 207.43113956150046,
+      "seed": 1947468986,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1681287918018,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "GzXz-vZtJsuUmmXzNUc2B",
+        "focus": -0.09592636486162824,
+        "gap": 10.124881408373767
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -119.25106087755307,
+          85.57014355804313
+        ],
+        [
+          -209.31589275623764,
+          207.43113956150046
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 355,
+      "versionNonce": 1487520634,
+      "isDeleted": false,
+      "id": "RpIX1p85aBUMYhuE7YkVM",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 70,
+      "angle": 0,
+      "x": -166.55596604964944,
+      "y": 534.7545262005287,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ced4da",
+      "width": 243.17991638183594,
+      "height": 70,
+      "seed": 178732006,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 28,
+      "fontFamily": 1,
+      "text": "HTTP request to\n/wp-admin",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "HTTP request to\n/wp-admin",
+      "lineHeight": 1.25,
+      "baseline": 60
+    },
+    {
+      "type": "arrow",
+      "version": 249,
+      "versionNonce": 1355399974,
+      "isDeleted": false,
+      "id": "u88zs7UXQNiVdfedzmuvQ",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": -131.99745436348212,
+      "y": 691.8877300400327,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ced4da",
+      "width": 236.7285738368414,
+      "height": 34.009861092194114,
+      "seed": 1130847610,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1681287918018,
+      "link": null,
+      "locked": false,
+      "startBinding": {
+        "elementId": "GzXz-vZtJsuUmmXzNUc2B",
+        "focus": 0.4635717927264672,
+        "gap": 9.966256366959215
+      },
+      "endBinding": {
+        "elementId": "e1rZuE8EC0qU3HJKGwFC4",
+        "focus": -0.41366093049067265,
+        "gap": 4.908934696607048
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          115.2457931407489,
+          -30.974453294389605
+        ],
+        [
+          236.7285738368414,
+          3.0354077978045098
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 338,
+      "versionNonce": 1275324986,
+      "isDeleted": false,
+      "id": "RqLRve-fQJe02Z7bCFKhs",
+      "fillStyle": "cross-hatch",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 330.43695331452227,
+      "y": 700.1128810834052,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ced4da",
+      "width": 199.90870669883225,
+      "height": 25.224903487598567,
+      "seed": 258133798,
+      "groupIds": [],
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": null,
+      "updated": 1681287918018,
+      "link": null,
+      "locked": false,
+      "startBinding": {
+        "elementId": "e1rZuE8EC0qU3HJKGwFC4",
+        "focus": 0.4621267913457183,
+        "gap": 6.709008519555937
+      },
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          104.94313163725019,
+          -25.224903487598567
+        ],
+        [
+          199.90870669883225,
+          -3.5719049540989545
+        ]
+      ]
+    },
+    {
+      "type": "rectangle",
+      "version": 1566,
+      "versionNonce": 316257382,
+      "isDeleted": false,
+      "id": "dv4xyRjxB1P6fa8bUHQ23",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 541.1914589846546,
+      "y": 847.5025500485262,
+      "strokeColor": "#ced4da",
+      "backgroundColor": "#ced4da",
+      "width": 281.0156618629228,
+      "height": 276.4817952203143,
+      "seed": 676437562,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "rectangle",
+      "version": 2669,
+      "versionNonce": 1746316538,
+      "isDeleted": false,
+      "id": "p3axPnqea6VunXFCHruYj",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 569.708555152364,
+      "y": 994.3258003612555,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 229,
+      "height": 46,
+      "seed": 1976171110,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "GMTZNJkY3Hh74TPQl-_GP",
+          "type": "arrow"
+        },
+        {
+          "type": "text",
+          "id": "6eIQUy6wZzdE9SazhSqHh"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 2786,
+      "versionNonce": 1269970854,
+      "isDeleted": false,
+      "id": "6eIQUy6wZzdE9SazhSqHh",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 608.3986338877156,
+      "y": 1004.8258003612555,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 151.61984252929688,
+      "height": 25,
+      "seed": 532006650,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "WordPress files",
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "p3axPnqea6VunXFCHruYj",
+      "originalText": "WordPress files",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "rectangle",
+      "version": 2747,
+      "versionNonce": 694877626,
+      "isDeleted": false,
+      "id": "ntye4r4LvjeVgMSB7rOA6",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 570.3362464789983,
+      "y": 1052.3295728787334,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 229,
+      "height": 46,
+      "seed": 883539366,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "GMTZNJkY3Hh74TPQl-_GP",
+          "type": "arrow"
+        },
+        {
+          "type": "text",
+          "id": "C0z70xHWicBus8vOAUg3s"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 2869,
+      "versionNonce": 890786534,
+      "isDeleted": false,
+      "id": "C0z70xHWicBus8vOAUg3s",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 652.4062766914006,
+      "y": 1062.8295728787334,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 64.85993957519531,
+      "height": 25,
+      "seed": 303486906,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "SQLite",
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "ntye4r4LvjeVgMSB7rOA6",
+      "originalText": "SQLite",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "rectangle",
+      "version": 2409,
+      "versionNonce": 91698810,
+      "isDeleted": false,
+      "id": "1n7kxdDmcbTC6y3_l9u0n",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 566.6396534631461,
+      "y": 943.224124132169,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 114,
+      "height": 40,
+      "seed": 1630476518,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "GMTZNJkY3Hh74TPQl-_GP",
+          "type": "arrow"
+        },
+        {
+          "type": "text",
+          "id": "nxENEqvhzdHNZ7CaLNEOR"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 2525,
+      "versionNonce": 429458982,
+      "isDeleted": false,
+      "id": "nxENEqvhzdHNZ7CaLNEOR",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 592.3896839807243,
+      "y": 950.724124132169,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 62.49993896484375,
+      "height": 25,
+      "seed": 1603784826,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "/php.js",
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "1n7kxdDmcbTC6y3_l9u0n",
+      "originalText": "/php.js",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "rectangle",
+      "version": 2539,
+      "versionNonce": 754865978,
+      "isDeleted": false,
+      "id": "dXFPGgFYsMyH1ZXChIimq",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 685.965203697478,
+      "y": 942.7841684630775,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 114,
+      "height": 40,
+      "seed": 1659309094,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "GMTZNJkY3Hh74TPQl-_GP",
+          "type": "arrow"
+        },
+        {
+          "type": "text",
+          "id": "o_nTEJCsh_FJ5ltOHBVLa"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 2668,
+      "versionNonce": 1780568422,
+      "isDeleted": false,
+      "id": "o_nTEJCsh_FJ5ltOHBVLa",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 695.905244285857,
+      "y": 950.2841684630775,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 94.11991882324219,
+      "height": 25,
+      "seed": 1811657018,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "/php.wasm",
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "dXFPGgFYsMyH1ZXChIimq",
+      "originalText": "/php.wasm",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "rectangle",
+      "version": 2735,
+      "versionNonce": 1080254458,
+      "isDeleted": false,
+      "id": "2tQE7lyNr0cK9YNGrCAil",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 570.9668662938317,
+      "y": 889.1233257041904,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 229,
+      "height": 46,
+      "seed": 666802022,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "GMTZNJkY3Hh74TPQl-_GP",
+          "type": "arrow"
+        },
+        {
+          "id": "DtRTJZeudobPamxju7HQj",
+          "type": "arrow"
+        },
+        {
+          "type": "text",
+          "id": "Y8cFznNxoAT2f0p09ilj2"
+        }
+      ],
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 2885,
+      "versionNonce": 1912485030,
+      "isDeleted": false,
+      "id": "Y8cFznNxoAT2f0p09ilj2",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 636.5569084080895,
+      "y": 899.6233257041904,
+      "strokeColor": "#000000",
+      "backgroundColor": "#fff",
+      "width": 97.81991577148438,
+      "height": 25,
+      "seed": 715487738,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "PHP class",
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "2tQE7lyNr0cK9YNGrCAil",
+      "originalText": "PHP class",
+      "lineHeight": 1.25,
+      "baseline": 18
+    },
+    {
+      "type": "text",
+      "version": 936,
+      "versionNonce": 1537822906,
+      "isDeleted": false,
+      "id": "scJD9pCr_BWQ2zr3zvSKZ",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 628.2107428658089,
+      "y": 854.7483019705387,
+      "strokeColor": "#495057",
+      "backgroundColor": "#ccc",
+      "width": 104.0399169921875,
+      "height": 25,
+      "seed": 1476573862,
+      "groupIds": [],
+      "roundness": null,
+      "boundElements": null,
+      "updated": 1681287917967,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 1,
+      "text": "PHP Stack",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "PHP Stack",
+      "lineHeight": 1.25,
+      "baseline": 18
+    }
+  ],
+  "appState": {
+    "gridSize": null,
+    "viewBackgroundColor": "#ffffff"
+  },
+  "files": {}
+}
\ No newline at end of file
diff --git a/src/site/content/en/blog/workbox-share-targets/hero.jpg b/src/site/content/en/blog/workbox-share-targets/hero.jpg
deleted file mode 100644
index fa9e078d3ed..00000000000
Binary files a/src/site/content/en/blog/workbox-share-targets/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/workbox-share-targets/index.md b/src/site/content/en/blog/workbox-share-targets/index.md
index 82b69c2a50a..841d1be7e10 100644
--- a/src/site/content/en/blog/workbox-share-targets/index.md
+++ b/src/site/content/en/blog/workbox-share-targets/index.md
@@ -1,37 +1,39 @@
 ---
-title: Integrate PWAs into native sharing UIs with Workbox
-subhead: How to get your PWA to show up next to native apps in system-level sharing UIs
+title: Integrate PWAs into built-in sharing UIs with Workbox
+subhead: How to get your PWA to show up next to platform-specific apps in system-level sharing UIs
 description: |
   How to register routes in Workbox so that your Progressive Web App shows up in system-level
-  sharing UIs, alongside native apps.
+  sharing UIs, alongside platform-specific apps.
 authors:
   - samrichard
   - joemedley
   - jeffposnick
 date: 2019-12-19
-hero: hero.jpg
+hero: image/admin/Cos9WFMqJGVZjBdQHcMU.jpg
 alt: Two pairs of hands holding a cup of tomatoes.
 tags:
   - blog
   - capabilities
-  - workbox
+  # - workbox
   - test-post
+feedback:
+  - api
 ---
 
-The [Web Share Target API](https://web.dev/web-share-target/) lets you display
-your [Progressive Web App](https://developers.google.com/web/progressive-web-apps/checklist) in a
-user's native share [sheet] after it's been installed. While it works great if you have a server
+The [Web Share Target API](/web-share-target/) lets you display
+your [Progressive Web App](/pwa-checklist/) in a
+user's system-level share [sheet] after it's been installed. While it works great if you have a server
 available to receive the request, it's much harder to get working if you don't.
 
 In this article we'll use
-[Workbox](https://developers.google.com/web/tools/workbox), a set of JavaScript
+[Workbox](https://developer.chrome.com/docs/workbox/), a set of JavaScript
 libraries for adding offline support to web apps, to create a share target URL
 that lives entirely inside your [service worker](/service-workers-cache-storage/). This lets static sites and
 single-page apps serve as share targets without a dedicated server endpoint.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./wst-send.png" style="max-width: 400px;" alt="Android phone with the 'Share via' drawer open."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+<figure data-float="right">
+  {% Img src="image/admin/mp2bdiP2gVeMQ4UX12vd.png", alt="Android phone with the 'Share via' drawer open.", width="400", height="377" %}
+  <figcaption>
     System-level share target picker with an installed PWA called
     <code>Share Target Test</code> as an option.
   </figcaption>
@@ -40,7 +42,7 @@ single-page apps serve as share targets without a dedicated server endpoint.
 ## On the same page
 
 If you're unfamiliar with how Web Share Target Works, [Receiving shared data with the Web Share
-Target API](https://web.dev/web-share-target/) gives you an in-depth introduction.
+Target API](/web-share-target/) gives you an in-depth introduction.
 Here's a quick review.
 
 There are two parts to implementing web share target functionality. First,
@@ -75,7 +77,7 @@ While normally handled by a server endpoint, a neat trick you can do for a share
 target is to register a route directly in your service worker to handle the
 request. This will let your app be a share target without a backend.
 
-You do this in [Workbox](https://developers.google.com/web/tools/workbox) by
+You do this in [Workbox](https://developer.chrome.com/docs/workbox/) by
 registering a route that's handled by your service worker. Start by importing
 `registerRoute` from `'workbox-routing'`. Notice that it's registered for the
 `/share` route, the same one listed in the example web app manifest. In
@@ -113,8 +115,8 @@ You can then do whatever you'd like with these files. You can cache them. You
 can send them somewhere with a fetch request. You can even use the other
 manifest options, maybe serving a page with some query parameters for the other
 shared items or storing the data and pointers to the media in the [Cache Storage
-API](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api)
-or [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).
+API](/cache-api-quick-guide/)
+or [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API).
 
 You can try it out on the sample app [Fugu
 Journal](https://fugu-journal.web.app/) and see its service worker
@@ -123,12 +125,12 @@ code](https://github.com/chromeos/bridging-the-native-app-gap/blob/master/fugu-j
 
 One common thing you might do is hold shared resources until better network
 connections are available. Workbox also supports [periodic background
-sync](https://web.dev/periodic-background-sync/).
+sync](/periodic-background-sync/).
 
 ## Conclusion
 
 The Share Target API is a simple way to deeply integrate your Progressive Web
-App into user's devices, putting them on-par with native applications for the
+App into user's devices, putting them on-par with platform-specific applications for the
 critical task of sharing content between apps. But doing so usually requires a
 server available to receive the request. By leveraging Workbox to create a share
 target route directly in your service worker, your app is free of this
diff --git a/src/site/content/en/blog/workbox-share-targets/wst-send.png b/src/site/content/en/blog/workbox-share-targets/wst-send.png
deleted file mode 100644
index 86829b19a94..00000000000
Binary files a/src/site/content/en/blog/workbox-share-targets/wst-send.png and /dev/null differ
diff --git a/src/site/content/en/blog/workers-basics/index.md b/src/site/content/en/blog/workers-basics/index.md
new file mode 100644
index 00000000000..7a84ce662b2
--- /dev/null
+++ b/src/site/content/en/blog/workers-basics/index.md
@@ -0,0 +1,507 @@
+---
+title: The Basics of Web Workers
+authors:
+  - malteubl
+  - agektmr
+date: 2012-10-20
+tags:
+  - blog
+---
+## The problem: JavaScript concurrency
+
+There are a number of bottlenecks preventing interesting applications from being ported
+(say, from server-heavy implementations) to client-side JavaScript. Some of these include
+browser compatibility, static typing, accessibility, and performance. Fortunately, the latter
+is quickly becoming a thing of the past as browser vendors rapidly improve the speed of their JavaScript engines.
+
+One thing that's remained a hindrance for JavaScript is actually the language itself. JavaScript is
+a single-threaded environment, meaning multiple scripts cannot run at the same time. As an example, imagine
+a site that needs to handle UI events, query and process large amounts of API data,
+and manipulate the DOM. Pretty common, right? Unfortunately all of that can't be simultaneous
+due to limitations in browsers' JavaScript runtime. Script execution happens within a single thread.
+
+Developers mimic 'concurrency' by using techniques like
+`setTimeout()`, `setInterval()`, `XMLHttpRequest`, and event handlers.
+Yes, all of these features run asynchronously, but non-blocking doesn't necessarily mean concurrency.
+Asynchronous events are processed after the current executing script has yielded. The good news is
+that HTML5 gives us something better than these hacks!
+
+## Introducing Web Workers: bring threading to JavaScript
+
+The [Web Workers](http://www.whatwg.org/specs/web-workers/current-work/) specification defines
+an API for spawning background scripts in your web application. Web Workers allow you to do things like
+fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other
+scripts to handle user interactions. They're going to help put and end to that nasty 'unresponsive script' dialog
+that we've all come to love:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/6hbuQjRRxR5TaLSCeJWV.gif", alt="Unresponsive script dialog", width="450", height="100" %}
+<figcaption>Common unresponsive script dialog.</figcaption>
+</figure>
+
+Workers utilize thread-like message passing to achieve parallelism. They're perfect for keeping your
+UI refresh, performant, and responsive for users.
+
+### Types of Web Workers
+
+It's worth noting that the [specification](http://www.whatwg.org/specs/web-workers/current-work/) discusses
+two kinds of Web Workers, [Dedicated Workers](http://www.whatwg.org/specs/web-workers/current-work/#dedicated-workers-and-the-worker-interface)
+and [Shared Workers](http://www.whatwg.org/specs/web-workers/current-work/#sharedworker). This article will
+only cover dedicated workers. I'll refer to them as 'web workers' or 'workers' throughout.
+
+## Getting started
+
+Web Workers run in an isolated thread. As a result, the code that they execute needs to be contained in a separate file.
+But before we do that, the first thing to do is create a new `Worker` object in your main page. The
+constructor takes the name of the worker script:
+
+```js
+var worker = new Worker('task.js');
+```
+
+If the specified file exists, the browser will spawn a new worker thread, which is downloaded asynchronously.
+The worker will not begin until the file has completely downloaded and executed. If the path to your worker returns an 404,
+the worker will fail silently.
+
+After creating the worker, start it by calling the `postMessage()` method:
+
+```js
+worker.postMessage(); // Start the worker.
+```
+
+### Communicating with a worker via message passing
+
+Communication between a work and its parent page is done using an event model and the `postMessage()`
+method. Depending on your browser/version, `postMessage()` can accept either a string or JSON object as its single argument.
+The latest versions of the modern browsers support passing a JSON object.
+
+Below is a example of using a string to pass 'Hello World' to a worker in doWork.js. The worker simply returns
+the message that is passed to it.
+
+Main script:
+
+```js
+var worker = new Worker('doWork.js');
+
+worker.addEventListener('message', function(e) {
+console.log('Worker said: ', e.data);
+}, false);
+
+worker.postMessage('Hello World'); // Send data to our worker.
+```
+
+doWork.js (the worker):
+
+```js
+self.addEventListener('message', function(e) {
+self.postMessage(e.data);
+}, false);
+```
+
+When `postMessage()` is called from the main page, our worker handles that message by
+defining an `onmessage` handler for the `message` event. The message payload (in this case 'Hello World')
+is accessible in `Event.data`. Although this particular example isn't very exciting, it demonstrates
+that `postMessage()` is also your means for passing data back to the main thread. Convenient!
+
+Messages passed between the main page and workers are copied, not shared. For example, in the next example
+the 'msg' property of the JSON message is accessible in both locations. It appears that the object is
+being passed directly to the worker even though it's running in a separate, dedicated space. In actuality, what is happening
+is that the object is being serialized as it's handed to the worker, and subsequently, de-serialized on the other end. The page and
+worker do not share the same instance, so the end result is that a duplicate is created on each pass. Most browsers implement this feature by automatically JSON encoding/decoding the value on either end.
+
+The following is a more complex example that passes messages using JSON objects.
+
+Main script:
+
+```html
+<button onclick="sayHI()">Say HI</button>
+<button onclick="unknownCmd()">Send unknown command</button>
+<button onclick="stop()">Stop worker</button>
+<output id="result"></output>
+
+<script>
+function sayHI() {
+worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
+}
+
+function stop() {
+// worker.terminate() from this script would also stop the worker.
+worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
+}
+
+function unknownCmd() {
+worker.postMessage({'cmd': 'foobard', 'msg': '???'});
+}
+
+var worker = new Worker('doWork2.js');
+
+worker.addEventListener('message', function(e) {
+document.getElementById('result').textContent = e.data;
+}, false);
+</script>
+```
+
+doWork2.js:
+
+```js
+self.addEventListener('message', function(e) {
+var data = e.data;
+switch (data.cmd) {
+case 'start':
+    self.postMessage('WORKER STARTED: ' + data.msg);
+    break;
+case 'stop':
+    self.postMessage('WORKER STOPPED: ' + data.msg +
+                    '. (buttons will no longer work)');
+    self.close(); // Terminates the worker.
+    break;
+default:
+    self.postMessage('Unknown command: ' + data.msg);
+};
+}, false);
+```
+
+{% Aside %}
+There are two ways to stop a worker: by calling `worker.terminate()` from the main page
+or by calling `self.close()` inside of the worker itself.
+{% endAside %}
+
+## Transferrable objects
+
+Most browsers implement the [structured cloning](https://developer.chrome.com/blog/workers-arraybuffer/) algorithm, which allows you to pass more complex types in/out of Workers such as `File`, `Blob`, `ArrayBuffer`, and JSON objects. However, when passing these types of data using
+`postMessage()`, a copy is still made. Therefore, if you're passing
+a large 50MB file (for example), there's a noticeable overhead in getting
+that file between the worker and the main thread.
+
+Structured cloning is great, but a copy can take
+hundreds of milliseconds. To combat the perf hit, you can use [Transferable Objects](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects).
+
+With Transferable Objects, data is transferred from one context to another. It is zero-copy, which vastly improves the performance of sending data to a Worker. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred to the new context. For example, when transferring an ArrayBuffer from your main app to Worker, the original `ArrayBuffer` is cleared and no longer usable. Its contents are (quiet literally) transferred to the Worker context.
+
+To use transferrable objects, use a slightly different signature of `postMessage()`:
+
+```js
+worker.postMessage(arrayBuffer, [arrayBuffer]);
+window.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]);
+```
+
+The worker case, the first argument is the data and the second is the
+list of items that should be transferred. The first argument doesn't have
+to be an `ArrayBuffer` by the way. For example, it can be a JSON
+object:
+
+```js
+worker.postMessage({data: int8View, moreData: anotherBuffer},
+                [int8View.buffer, anotherBuffer]);
+```
+
+The important point being: the second argument must be an array of `ArrayBuffer`s.
+This is your list of transferrable items.
+
+For more information on transferrables, see [our post at developer.chrome.com](https://developer.chrome.com/blog/transferable-objects-lightning-fast/).
+
+## The worker environment
+
+### Worker scope
+
+In the context of a worker, both `self` and `this` reference the global scope
+for the worker. Thus, the previous example could also be written as:
+
+```js
+addEventListener('message', function(e) {
+var data = e.data;
+switch (data.cmd) {
+case 'start':
+    postMessage('WORKER STARTED: ' + data.msg);
+    break;
+case 'stop':
+...
+}, false);
+```
+
+Alternatively, you could set the `onmessage` event handler directly
+(though `addEventListener` is always encouraged by JavaScript ninjas).
+
+```js
+onmessage = function(e) {
+var data = e.data;
+...
+};
+```
+
+### Features available to workers
+
+Due to their multithreaded behavior, Web Workers only has access to a subset of JavaScript's features:
+
+- The `navigator` object
+- The `location` object (read-only)
+- `XMLHttpRequest`
+- `setTimeout()/clearTimeout()` and `setInterval()/clearInterval()`
+- The [Application Cache](/appcache-beginner/)
+- Importing external scripts using the `importScripts()` method
+- Spawning other web workers
+
+Workers do NOT have access to:
+
+- The DOM (it's not thread-safe)
+- The `window` object
+- The `document` object
+- The `parent` object
+
+### Loading external scripts
+
+You can load external script files or libraries into a worker with the `importScripts()` function. The method
+takes zero or more strings representing the filenames for the resources to import.
+
+This example loads `script1.js` and `script2.js` into the worker:
+
+worker.js:
+
+```js
+importScripts('script1.js');
+importScripts('script2.js');
+```
+
+Which can also be written as a single import statement:
+
+```js
+importScripts('script1.js', 'script2.js');
+```
+
+### Subworkers
+
+Workers have the ability to spawn child workers. This is great for further breaking up large
+tasks at runtime. However, subworkers come with a few caveats:
+
+- Subworkers must be hosted within the same origin as the parent page.
+- URIs within subworkers are resolved relative to their parent worker's location (as opposed to the main page).
+
+Keep in mind most browsers spawn separate processes for each worker. Before you go spawning a worker
+farm, be cautious about hogging too many of the user's system resources. One reason for this is that messages
+passed between main pages and workers are copied, not shared. See Communicating with a Worker via Message Passing.
+
+For an sample of how to spawn a subworker, see [the example](http://www.whatwg.org/specs/web-workers/current-work/#delegation)
+in the specification.
+
+## Inline workers
+
+What if you want to create your worker script on the fly, or create a self-contained
+page without having to create separate worker files? With `Blob()`,
+you can "inline" your worker in the same HTML file as your main logic by creating
+a URL handle to the worker code as a string:
+
+```js
+var blob = new Blob([
+"onmessage = function(e) { postMessage('msg from worker'); }"]);
+
+// Obtain a blob URL reference to our worker 'file'.
+var blobURL = window.URL.createObjectURL(blob);
+
+var worker = new Worker(blobURL);
+worker.onmessage = function(e) {
+// e.data == 'msg from worker'
+};
+worker.postMessage(); // Start the worker.
+```
+
+### Blob URLs
+
+The magic comes with the call to [`window.URL.createObjectURL()`](http://dev.w3.org/2006/webapi/FileAPI/#dfn-createObjectURL).
+This method creates a simple URL string which can be used to reference data stored in a
+DOM `File` or `Blob` object. For example:
+
+```js
+blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1
+```
+
+Blob URLs are unique and last for the lifetime of your application (e.g. until the `document`
+is unloaded). If you're creating many Blob URLs, it's a good idea to release references that are
+no longer needed. You can explicitly release a Blob URLs by passing it to[`window.URL.revokeObjectURL()`](http://dev.w3.org/2006/webapi/FileAPI/#dfn-revokeObjectURL):
+
+```js
+window.URL.revokeObjectURL(blobURL);
+```
+
+In Chrome, there's a nice page to view all of the created blob URLs: `chrome://blob-internals/`.
+
+### Full example
+
+Taking this one step further, we can get clever with how the worker's JS
+code is inlined in our page. This technique uses a `<script>` tag
+to define the worker:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+</head>
+<body>
+
+<div id="log"></div>
+
+<script id="worker1" type="javascript/worker">
+// This script won't be parsed by JS engines
+// because its type is javascript/worker.
+self.onmessage = function(e) {
+    self.postMessage('msg from worker');
+};
+// Rest of your worker code goes here.
+</script>
+
+<script>
+function log(msg) {
+    // Use a fragment: browser will only render/reflow once.
+    var fragment = document.createDocumentFragment();
+    fragment.appendChild(document.createTextNode(msg));
+    fragment.appendChild(document.createElement('br'));
+
+    document.querySelector("#log").appendChild(fragment);
+}
+
+var blob = new Blob([document.querySelector('#worker1').textContent]);
+
+var worker = new Worker(window.URL.createObjectURL(blob));
+worker.onmessage = function(e) {
+    log("Received: " + e.data);
+}
+worker.postMessage(); // Start the worker.
+</script>
+</body>
+</html>
+```
+
+In my opinion, this new approach is a bit cleaner and more legible.
+It defines a script tag with `id="worker1"` and
+`type='javascript/worker'` (so the browser doesn't parse the JS). That code is extracted as a
+string using `document.querySelector('#worker1').textContent` and passed to
+`Blob()` to create the file.
+
+### Loading external scripts
+
+When using these techniques to inline your worker code,
+`importScripts()` will only work if you supply an absolute URI. If
+you attempt to pass a relative URI, the browser will complain with a security
+error. The reason being: the worker (now created from a blob URL) will be resolved with a
+`blob:` prefix, while your app will be running from a different (presumably `http://`)
+scheme. Hence, the failure will be due to cross origin restrictions.
+
+One way to utilize `importScripts()` in an inline worker is to
+"inject" the current url of your main script is running from by passing it
+to the inline worker and constructing the absolute URL manually. This
+will insure the external script is imported from the same origin. Assuming your
+main app is running from `http://example.com/index.html`:
+
+```html
+...
+<script id="worker2" type="javascript/worker">
+self.onmessage = function(e) {
+var data = e.data;
+
+if (data.url) {
+var url = data.url.href;
+var index = url.indexOf('index.html');
+if (index != -1) {
+    url = url.substring(0, index);
+}
+importScripts(url + 'engine.js');
+}
+...
+};
+</script>
+<script>
+var worker = new Worker(window.URL.createObjectURL(bb.getBlob()));
+worker.postMessage(<b>{url: document.location}</b>);
+</script>
+```
+
+## handling errors
+
+As with any JavaScript logic, you'll want to handle any errors that are thrown in your web workers.
+If an error occurs while a worker is executing, the an `ErrorEvent` is fired. The interface contains three useful properties for figuring out what went wrong: `filename` - the name of the worker script
+that caused the error, `lineno` - the line number where the error occurred, and `message` - a meaningful
+description of the error. Here is an example of setting up an `onerror` event handler to print the properties of the error:
+
+```html
+<output id="error" style="color: red;"></output>
+<output id="result"></output>
+
+<script>
+function onError(e) {
+document.getElementById('error').textContent = [
+    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
+].join('');
+}
+
+function onMsg(e) {
+document.getElementById('result').textContent = e.data;
+}
+
+var worker = new Worker('workerWithError.js');
+worker.addEventListener('message', onMsg, false);
+worker.addEventListener('error', onError, false);
+worker.postMessage(); // Start worker without a message.
+</script>
+```
+
+<strong>Example</strong>: workerWithError.js tries to perform 1/x, where x is undefined.
+
+<div class="example">
+<button onclick="startErrorWorker()">Run it</button>
+<output id="error" style="color:red;"></output>
+<output id="result2"></output>
+</div>
+
+workerWithError.js:
+
+```js
+self.addEventListener('message', function(e) {
+postMessage(1/x); // Intentional error.
+};
+```
+
+## A word on security
+
+### Restrictions with local access
+
+Due to Google Chrome's security restrictions, workers will not run locally (e.g. from `file://`) in the latest
+versions of the browser. Instead, they fail silently!  To run your app from the `file://` scheme, run Chrome with the
+`--allow-file-access-from-files` flag set.
+
+{% Aside %}
+It is not recommended to run your primary browser with this flag set. It should only be used for testing purposes
+and not regular browsing.
+{% endAside %}
+
+Other browsers do not impose the same restriction.
+
+### Same-origin considerations
+
+Worker scripts must be external files with the same scheme as their calling page. Thus,
+you cannot load a script from a `data:` URL or `javascript:` URL, and an `https:`
+page cannot start worker scripts that begin with `http:` URLs.
+
+## Use cases
+
+So what kind app would utilize web workers? Here are a few more ideas to get your brain churning:
+
+- Prefetching and/or caching data for later use.
+- Code syntax highlighting or other real-time text formatting.
+- Spell checker.
+- Analyzing video or audio data.
+- Background I/O or polling of webservices.
+- Processing large arrays or humungous JSON responses.
+- Image filtering in `<canvas>`.
+- Updating many rows of a local web database.
+
+For more information about use cases involving the Web Workers API, visit [Workers Overview](/workers-overview/#use-cases).
+
+## Demos
+
+- [HTML5demos sample](http://html5demos.com/worker)
+
+## References
+
+- [Web Workers](https://html.spec.whatwg.org/multipage/workers.html) specification
+- ["Using web workers"](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers) from the Mozilla Developer Network Web Docs.
+- ["Web Workers rise up!"](http://dev.opera.com/articles/view/web-workers-rise-up/) from Dev.Opera
diff --git a/src/site/content/en/blog/world-wide-maze/index.md b/src/site/content/en/blog/world-wide-maze/index.md
new file mode 100644
index 00000000000..87994df13a4
--- /dev/null
+++ b/src/site/content/en/blog/world-wide-maze/index.md
@@ -0,0 +1,419 @@
+---
+layout: post
+title: Case Study - Inside World Wide Maze
+authors:
+  - saqoosha
+date: 2013-06-06
+tags:
+  - blog
+  - case-study
+---
+
+[World Wide Maze](http://chrome.com/maze/) is a game in which you use your smartphone to navigate a rolling ball through 3D mazes created from websites in order to try to reach their goal points.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/h1X0VHLvBGJ29bsv9mT7.jpg", alt="World Wide Maze", width="620", height="349" %}
+</figure>
+
+The game features abundant use of HTML5 features. For example, the [DeviceOrientation](http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation) event retrieves tilt data from the smartphone, which is then sent to the PC via WebSocket, where players find their way through 3D spaces built by [WebGL](http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation) and [Web Workers](http://www.w3.org/TR/workers/).
+
+In this article, I'll explain precisely how these features are used, the overall development process, and key points for optimization.
+
+## DeviceOrientation
+
+The DeviceOrientation event ([example](http://simpl.info/deviceorientation/)) is used to retrieve tilt data from the smartphone. When `addEventListener` is used with the `DeviceOrientation` event, a callback with the `DeviceOrientationEvent` object is invoked as an argument at regular intervals. The intervals themselves vary with the device used. For example, in iOS + Chrome and iOS + Safari, the callback is invoked about every 1/20th of a second, while in Android 4 + Chrome it's invoked about every 1/10th of a second.
+
+```js
+window.addEventListener('deviceorientation', function (e) {
+  // do something here..
+});
+```
+
+The `DeviceOrientationEvent` object contains tilt data for each of the `X`, `Y`, and `Z` axes in degrees (not radians) ([Read more on HTML5Rocks](http://www.html5rocks.com/tutorials/device/orientation/)). However, the return values also vary with the combination of device and browser used. The ranges of the actual return values are laid out in the table below:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3jthuywYio6XSYslGnOS.png", alt="Device orientation.", width="620", height="277" %}
+</figure>
+
+The values at the top highlighted in blue are those defined in W3C specifications. Those highlighted in green match these specifications, while those highlighted in red deviate. Surprisingly, only the Android-Firefox combination returned values that matched specifications. Nonetheless, when it comes to implementation it makes more sense to accommodate values that occur frequently. World Wide Maze therefore uses the iOS return values as standard and adjusts for Android devices accordingly.
+
+```js
+if android and event.gamma > 180 then event.gamma -= 360
+```
+
+This still does not support the Nexus 10, however. Although the Nexus 10 returns the same range of values as other Android devices, there's a bug which reverses the beta and gamma values. This is being addressed separately. (Perhaps it's defaulting to landscape orientation?)
+
+As this demonstrates, even if APIs involving physical devices have set specifications, there is no guarantee that the values returned will match those specifications. Testing them on all prospective devices is therefore crucial. It also means that unexpected values may be entered, which requires creating workarounds. World Wide Maze prompts first-time players to calibrate their devices as step 1 of its tutorial, but it won't calibrate to the zero position properly if it receives unexpected tilt values. It therefore has an internal time limit and prompts the player to switch to keyboard controls if it cannot calibrate within that time limit.
+
+## WebSocket
+
+In World Wide Maze, your smartphone and PC are connected via WebSocket. More accurately, they are connected via a relay server between them, i.e. smartphone to server to PC. This is because WebSocket lacks the ability to connect browsers directly to each other. (Using WebRTC data channels allows peer-to-peer connectivity and eliminates the need for a relay server, but at the time of implementation this method [could only be used with Chrome Canary and Firefox Nightly](https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/).)
+
+I chose to implement using a library called Socket.IO (v0.9.11), which includes features for reconnecting in the event of a connection timeout or disconnection. I used it together with NodeJS, as this NodeJS + Socket.IO combination showed the best server-side performance in several WebSocket implementation tests.
+
+### Pairing by numbers
+
+1. Your PC connects to the server.
+1. The server gives your PC a randomly generated number and remembers the combination of number and PC.
+1. From your mobile device, specify a number and connect to the server.
+1. If the number specified is the same as from a connected PC, your mobile device is paired with that PC.
+1. If there is no designated PC, an error occurs.
+1. When data comes in from your mobile device, it is sent to the PC with which it is paired, and vice versa.
+
+You can also make the initial connection from your mobile device instead. The devices are simply reversed in that case.
+
+### Tab Sync
+
+The Chrome-specific Tab Sync feature makes the pairing process even easier. With it, pages that are open on the PC can be opened on a mobile device easily (and vice versa). The PC takes the connection number issued by the server and appends it to a page's URL using `history.replaceState`.
+
+```js
+history.replaceState(null, null, '/maze/' + connectionNumber)
+```
+
+If Tab Sync is enabled, the URL is synced after a few seconds and the same page can be opened on the mobile device. The mobile device checks the URL of the open page, and if a number is appended it begins connecting immediately. This eliminates the need to enter numbers manually or scan QR codes with a camera.
+
+### Latency
+
+Since the relay server is located in the US, accessing it from Japan results in a delay of approximately 200ms before the smartphone's tilt data reaches the PC. Response times were clearly sluggish compared to those of the local environment used during development, but inserting something like a low-pass filter (I used [EMA](http://en.wikipedia.org/wiki/Exponential_Moving_Average#Exponential_moving_average)) improved this to unobtrusive levels. (In practice, a low-pass filter was needed for presentation purposes as well; return values from the tilt sensor included a considerable amount of noise, and applying those values to the screen as is resulted in a lot of shaking.) This didn't work with jumps, which were clearly sluggish, but nothing could be done to resolve this.
+
+Since I expected latency issues from the start, I considered setting up relay servers around the world so that clients could connect to the closest available (thus minimizing latency). However, I ended up using [Google Compute Engine (GCE)](https://cloud.google.com/products/compute-engine), which existed only in the US at the time, so this wasn't possible.
+
+### The Nagle Algorithm problem
+
+The [Nagle algorithm](http://en.wikipedia.org/wiki/Nagle%27s_algorithm) is typically incorporated into operating systems for efficient communication by buffering at the TCP level, but I found that I couldn't send data in real time while this algorithm was enabled. (Specifically when combined with [TCP delayed acknowledgment](http://en.wikipedia.org/wiki/TCP_delayed_acknowledgment). Even with no delayed `ACK`, the same problem occurs if `ACK` is delayed to a certain degree due to factors like the server being located overseas.)
+
+The Nagle latency issue did not occur with WebSocket in Chrome for Android, which includes the `TCP_NODELAY` option for disabling Nagle, but it did occur with the WebKit WebSocket used in Chrome for iOS, which does not have this option enabled. (Safari, which uses the same WebKit, also had this problem. [The issue was reported to Apple via Google and has apparently been resolved in the development version of WebKit](https://bugs.webkit.org/show_bug.cgi?id=102079).
+
+When this issue occurs, tilt data sent out every 100ms is combined into chunks that only reach the PC every 500ms. The game cannot function under these conditions, so it avoids this latency by having the server side send out data at short intervals (every 50ms or so). I believe that receiving `ACK` at short intervals fools the Nagle algorithm into thinking that it's okay to send out data.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/p7E719M6tDEWDEwtTPCq.png", alt="Nagle algorithm 1", width="500", height="125" %}
+</figure>
+
+The above graphs the intervals of actual data received. It indicates the time intervals between packets; the green represents output intervals and the red represents input intervals. The minimum is 54ms, the maximum is 158ms, and the middle is close to 100ms. Here I used an iPhone with a relay server located in Japan. Both output and input are around 100ms, and operation is smooth.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/pdfzctuj4xfvKGcdt5qP.png", alt="Nagle algorithm 2", width="500", height="125" %}
+</figure>
+
+In contrast, this graph shows the results of using the server in the US. While the green output intervals hold steady at 100ms, the input intervals fluctuate between lows of 0ms and highs of 500ms, indicating that the PC is receiving data in chunks.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/t5u9aStKeVDgRVuj0lgJ.png", alt="ALT_TEXT_HERE", width="500", height="156" %}
+</figure>
+
+Finally, this graph shows the results of avoiding latency by having the server send out placeholder data. While it doesn't perform quite as well as using the Japanese server, it's clear that the input intervals remain relatively stable at around 100ms.
+
+### A bug?
+
+Despite the default browser in Android 4 (ICS) having a WebSocket API, it cannot connect, resulting in a Socket.IO connect_failed event. Internally it times out, and the server side cannot verify a connection either. (I haven't tested this with WebSocket alone, so it could be a Socket.IO problem.)
+
+### Scaling relay servers
+
+Since the relay server's role isn't that complicated, scaling up and increasing numer of servers shouldn't be difficult so long as you ensure that the same PC and the mobile device are always connected to the same server.
+
+## Physics
+
+In-game ball movement (rolling downhill, colliding with the ground, colliding with walls, collecting items, etc.) is all done with a 3D physics simulator. I used [Ammo.js](https://github.com/kripken/ammo.js/)—a port of the widely used [Bullet](http://bulletphysics.org/wordpress/) physics engine into JavaScript using [Emscripten](http://emscripten.org/)—along with [Physijs](http://chandlerprall.github.com/Physijs/) to utilize it as a "Web Worker."
+
+### Web Workers
+
+Web Workers is an API for running JavaScript in separate threads. JavaScript launched as a Web Worker runs as a thread separate from the one that originally called it, so heavy tasks can be performed while keeping the page responsive. Physijs uses Web Workers efficiently to help the normally intensive 3D physics engine run smoothly. World Wide Maze handles the physics engine and WebGL image rendering at completely different frame rates, so even if frame rate drops on a low-spec machine due to heavy WebGL rendering load, the physics engine itself will more or less maintain 60 fps and not impede game controls.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yBl90vAq6oSpQt5E119l.png", alt="FPS", width="235", height="202" %}
+</figure>
+
+This image shows the resulting frame rates on a [Lenovo G570](http://shop.lenovo.com/us/notebooks/essential/g-series/g570). The upper box shows the frame rate for WebGL (image rendering), and the lower one shows the frame rate for the physics engine. The GPU is an integrated Intel HD Graphics 3000 chip, so the image rendering frame rate didn't attain the expected 60 fps. However, since the physics engine achieved the expected frame rate, the gameplay isn't that different from performance on a high-spec machine.
+
+Since threads with active Web Workers don't have console objects, data must be sent to the main thread via postMessage to produce debugging logs. Using [console4Worker](http://blog.jetienne.com/blog/2011/09/12/console4worker/) creates the equivalent of a console object in the Worker, making the debugging process significantly easier.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hvlpSHVHZcbDFW2maF6O.png", alt="Service workers", width="373", height="142" %}
+</figure>
+
+Recent versions of Chrome allow you to set breakpoints when launching Web Workers, which is also useful for debugging. This can be found in the "Workers" panel in Developer Tools.
+
+### Performance
+
+Stages with high polygon counts sometimes exceed 100,000 polygons, but performance didn't particularly suffer even when they were generated entirely as `Physijs.ConcaveMesh` (`btBvhTriangleMeshShape` in Bullet).
+
+Initially, frame rate dropped as the number of objects requiring collision detection increased, but eliminating unnecessary processing in Physijs improved performance. This improvement was made to a [fork](https://github.com/Saqoosha/Physijs) of the original Physijs.
+
+### Ghost objects
+
+Objects that have collision detection but no impact upon collision and thus no effect on other objects are called "ghost objects" in Bullet. Although Physijs does not officially support ghost objects, it's possible to create them there by tinkering with flags after generating a `Physijs.Mesh`. World Wide Maze uses ghost objects for the collision detection of items and goal points.
+
+```js
+hit = new Physijs.SphereMesh(geometry, material, 0)
+hit._physijs.collision_flags = 1 | 4
+scene.add(hit)
+```
+
+For `collision_flags`, 1 is `CF_STATIC_OBJECT`, and 4 is `CF_NO_CONTACT_RESPONSE`. Try searching the Bullet [forum](http://www.bulletphysics.org/Bullet/phpBB3/), [Stack Overflow](http://stackoverflow.com/), or [Bullet documentation](http://bulletphysics.org/Bullet/BulletFull/) for more information. Since Physijs is a wrapper for Ammo.js and Ammo.js is basically identical to Bullet, most things that can be done in Bullet can also be done in Physijs.
+
+### The Firefox 18 problem
+
+The Firefox update from version 17 to 18 changed the way Web Workers exchanged data, and Physijs stopped working as a result. The [issue](https://github.com/chandlerprall/Physijs/issues/62) was reported on GitHub and resolved after a few days. While this open source efficiency impressed me, the incident also reminded me how World Wide Maze is comprised of several different open source frameworks. I'm writing this article in hopes of providing some sort of feedback.
+
+### asm.js
+
+Although this doesn't concern World Wide Maze directly, Ammo.js already supports Mozilla's recently announced [asm.js](http://asmjs.org/) (not surprising since asm.js was basically created to speed up JavaScript generated by Emscripten, and the creator of Emscripten is also the creator of Ammo.js). If Chrome supports asm.js as well, the physics engine's computing load should diminish considerably. Speed was noticeably faster when tested with Firefox Nightly. Perhaps it would be best to write sections that require more speed in C/C++ and then port them to JavaScript using Emscripten?
+
+## WebGL
+
+For WebGL implementation I used the most actively developed library, [three.js](http://mrdoob.github.com/three.js/) (r53). Although revision 57 was already released by the latter stages of development, major changes had been made to the API, so I stuck with the original revision for release.
+
+### Glow effect
+
+The glow effect added to the ball's core and to items is implemented using a simple version of the so-called "[Kawase Method MGF](https://www.google.co.jp/search?q=%E5%B7%9D%E7%80%AC%E5%BC%8F)". However, while the Kawase Method makes all bright areas bloom, World Wide Maze creates separate render targets for areas that need to glow. This is because a website screenshot must be used for stage textures, and simply extracting all bright areas would result in the entire website glowing if, for instance, it has a white background. I also considered processing everything in HDR, but I decided against it this time since implementation would have gotten quite complicated.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/o7kG87kPyTEAb3PP18Zu.jpg", alt="Glow", width="620", height="349" %}
+</figure>
+
+The top left shows the first pass, where the glow areas were rendered separately and then a blur applied. The bottom right shows the second pass, where the image size was reduced by 50% and then a blur applied. The top right shows the third pass, where the image was again reduced by 50% and then blurred. The three were then overlaid to create the final composite image shown at the bottom left. For the blur I used `VerticalBlurShader` and `HorizontalBlurShader`, included in three.js, so there's still room for further optimization.
+
+### Reflective ball
+
+The reflection on the ball is based on a [sample](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_dynamic2.html) from three.js. All directions are rendered from the ball's position and used as environment maps. Environment maps need to be updated every time the ball moves, but since updating at 60 fps is intensive, they're updated every three frames instead. The result isn't quite as smooth as updating every frame, but the difference is virtually imperceptible unless pointed out.
+
+### Shader, shader, shader…
+
+WebGL requires shaders (vertex shaders, fragment shaders) for all rendering. While the shaders included in three.js already allow for a wide range of effects, writing your own is unavoidable for more elaborate shading and optimization. Since World Wide Maze keeps the CPU busy with its physics engine, I tried to utilize the GPU instead by writing as much as possible in shading language (GLSL), even when CPU processing (via JavaScript) would have been easier. The ocean wave effects rely on shaders, naturally, as do the fireworks at goal points and the mesh effect used when the ball appears.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CMZY9KfGSudN7l6H1Ool.png", alt="Shader balls", width="620", height="199" %}
+</figure>
+
+The above is from tests of the mesh effect used when the ball appears. The one on the left is the one used in-game, composed of 320 polygons. The one in the center uses about 5,000 polygons, and the one on the right uses about 300,000 polygons. Even with this many polygons, processing with shaders can keep a steady frame rate of 30 fps.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ap8yISIVD8O3bxDQN3Bv.png", alt="Shader mesh", width="620", height="378" %}
+</figure>
+
+The small items scattered throughout the stage are all integrated into one mesh, and individual movement relies on shaders moving each of the polygon tips. This is from a test to see whether performance would suffer with large numbers of objects present. About 5,000 objects are laid out here, composed of roughly 20,000 polygons. Performance didn't suffer at all.
+
+### poly2tri
+
+Stages are formed based on outline information received from the server and then polygonized by JavaScript. Triangulation, a key part of this process, is implemented poorly by three.js and usually fails. I therefore decided to integrate a different triangulation library called [poly2tri](https://code.google.com/p/poly2tri/) myself. As it turns out, three.js had evidently attempted the same thing in the past, so I got it working simply by commenting part of it out. Errors decreased significantly as a result, allowing many more playable stages. The occasional error persists, and for some reason poly2tri handles errors by issuing alerts, so I modified it to throw exceptions instead.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/iqUZuwpies8sUS2HGk3u.jpg", alt="poly2tri", width="620", height="246" %}
+</figure>
+
+The above shows how the blue outline is triangulated and red polygons generated.
+
+### Anisotropic filtering
+
+Since standard isotropic MIP mapping downsizes images on both horizontal and vertical axes, viewing polygons from oblique angles makes textures on the far end of World Wide Maze stages look like horizontally elongated, low-resolution textures. The top right image on [this Wikipedia page](http://en.wikipedia.org/wiki/Anisotropic_filtering) shows a good example of this. In practice, more horizontal resolution is required, which WebGL (OpenGL) resolves by using a method called anisotropic filtering. In three.js, setting a value greater than 1 for `THREE.Texture.anisotropy` enables anisotropic filtering. However, this feature is an extension and may not be supported by all GPUs.
+
+### Optimize
+
+As this [WebGL best practices](https://developer.mozilla.org/docs/WebGL/WebGL_best_practices) article also mentions, the most crucial way to improve WebGL (OpenGL) performance is to minimize draw calls. During initial development of World Wide Maze, all in-game islands, bridges, and guard rails were separate objects. This sometimes resulted in over 2,000 draw calls, making complex stages unwieldy. However, once I packed the same types of objects all into one mesh, draw calls dropped to fifty or so, improving performance significantly.
+
+I used the Chrome tracing feature for further optimization. Profilers included in Chrome's Developer Tools can determine overall method processing times to some degree, but tracing can tell you precisely how long each part takes, down to 1/1000th of a second. Have a look at [this article](http://www.html5rocks.com/tutorials/games/abouttracing/) for details on how to use tracing.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/aE8XKpELRoSijYCsN3tB.png", alt="Optimization", width="620", height="232" %}
+</figure>
+
+The above are trace results from creating environment maps for the ball's reflection. Inserting `console.time` and `console.timeEnd` into seemingly relevant locations in three.js gives us a graph that looks like this. Time flows from left to right, and each layer is something like a call stack. Nesting a console.time within a `console.time` allows further measurements. The top graph is pre-optimization and the bottom is post-optimization. As the top graph shows, the `updateMatrix` (though the word is truncated) was called for each of renders 0-5 during pre-optimization. I modified it so that it's called only once, however, as this process is required only when objects change position or orientation.
+
+The tracing process itself takes up resources, naturally, so inserting `console.time` excessively can cause a significant deviation from actual performance, making it difficult to pinpoint areas for optimization.
+
+### Performance adjuster
+
+Due to the nature of the Internet, the game will likely be played on systems with widely varying specs. [Find Your Way to Oz](http://www.findyourwaytooz.com/), released in early February, uses a class called [`IFLAutomaticPerformanceAdjust`](https://code.google.com/p/oz-experiment/source/browse/project/develop/coffee/ifl/IFLAutomaticPerformanceAdjust.coffee) to scale back effects according to fluctuations in frame rate, helping to ensure smooth playback. World Wide Maze builds on the same `IFLAutomaticPerformanceAdjust` class and scales back effects in the following order to make gameplay as smooth as possible:
+
+1. If frame rate falls below 45 fps, environment maps stop updating.
+1. If it still falls below 40 fps, rendering resolution is reduced to 70% (50% of surface ratio).
+1. If it still falls below 40 fps, FXAA (anti-aliasing) is eliminated.
+1. If it still falls below 30 fps, glow effects are eliminated.
+
+### Memory leak
+
+Eliminating objects neatly is sort of a hassle with three.js. But leaving them alone would obviously lead to memory leaks, so I devised the method below. `@renderer` refers to `THREE.WebGLRenderer`. (The latest revision of three.js uses a slightly different method of deallocation, so this probably won't work with it as is.)
+
+```js
+destructObjects: (object) =>
+  switch true
+    when object instanceof THREE.Object3D
+      @destructObjects(child) for child in object.children
+      object.parent?.remove(object)
+      object.deallocate()
+      object.geometry?.deallocate()
+      @renderer.deallocateObject(object)
+      object.destruct?(this)
+
+    when object instanceof THREE.Material
+      object.deallocate()
+      @renderer.deallocateMaterial(object)
+
+    when object instanceof THREE.Texture
+      object.deallocate()
+      @renderer.deallocateTexture(object)
+
+    when object instanceof THREE.EffectComposer
+      @destructObjects(object.copyPass.material)
+      object.passes.forEach (pass) =>
+        @destructObjects(pass.material) if pass.material
+        @renderer.deallocateRenderTarget(pass.renderTarget) if pass.renderTarget
+        @renderer.deallocateRenderTarget(pass.renderTarget1) if pass.renderTarget1
+        @renderer.deallocateRenderTarget(pass.renderTarget2) if pass.renderTarget2
+```
+
+## HTML
+
+Personally, I think the best thing about the WebGL app is the ability to design page layout in HTML. Building 2D interfaces such as score or text displays in Flash or openFrameworks (OpenGL) is kind of a pain. Flash at least has an IDE, but openFrameworks is tough if you aren't used to it (using something like Cocos2D may make it easier). HTML, on the other hand, allows precise control of all frontend design aspects with CSS, just as when building websites. Although complex effects like particles condensing into a logo are impossible, some 3D effects within the capabilities of CSS Transforms are possible. World Wide Maze's "GOAL" and "TIME IS UP" text effects are animated using scale in CSS Transition (implemented with [Transit](http://ricostacruz.com/jquery.transit/)). (Obviously the background gradations use WebGL.)
+
+Each page in the game (the title, RESULT, RANKING, etc.) has its own HTML file, and once these are loaded as templates, `$(document.body).append()` is called with the appropriate values at the appropriate time. One hiccup was that mouse and keyboard events could not be set before appending, so attempting `el.click (e) -> console.log(e)` before appending didn't work.
+
+### Internationalization (i18n)
+
+Working in HTML was also convenient for creating the English language version. I chose to use [i18next](http://jamuhl.github.com/i18next/), a web i18n library, for my internationalization needs, which I was able to use as is without modification.
+
+Editing and translation of in-game text was done in Google Docs Spreadsheet. Since i18next requires [JSON file](http://chrome.com/maze/locales/en/translation.json)s, I exported the spreadsheets to TSV and then converted them with a custom converter. I made a lot of updates just before release, so automating the export process from Google Docs Spreadsheet would have made things much easier.
+
+Chrome's [automatic translation feature](http://support.google.com/chrome/bin/answer.py?hl=en&amp;answer=173424) also functions normally since the pages are built with HTML. However, it sometimes fails to detect language correctly, instead mistaking it for a totally different one (e.g., Vietnamese), so this feature is currently disabled. ([It can be disabled using meta tags](http://googlewebmastercentral.blogspot.jp/2008/10/helping-you-break-language-barrier.html).)
+
+## RequireJS
+
+I chose [RequireJS](http://requirejs.org/) as my JavaScript module system. The game's 10,000 lines of source code are divided into about 60 classes (= coffee files) and compiled into individual js files. RequireJS loads these individual files in appropriate order based on dependency.
+
+```js
+define ->
+  class Hoge
+    hogeMethod: ->
+```
+
+The class defined above (hoge.coffee) can be used as follows:
+
+```js
+define ['hoge'], (Hoge) ->
+  class Moge
+    constructor: ->
+      @hoge = new Hoge()
+      @hoge.hogeMethod()
+```
+
+To work, hoge.js must be loaded before moge.js, and since "hoge" is designated as the first argument of "define," hoge.js is always loaded first (called back once hoge.js is done loading). This mechanism is called [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD), and any third-party library can be used for the same kind of callback so long as it supports AMD. Even those that do not (e.g., three.js) will perform similarly as long as d[ependencies are specified in advance](http://requirejs.org/docs/api.html#config-shim).
+
+This is similar to importing AS3, so it shouldn't seem that strange. If you end up with more dependent files, [this](http://requirejs.org/docs/whyamd.html#sugar) is a possible solution.
+
+### r.js
+
+RequireJS includes an optimizer called [r.js](http://requirejs.org/docs/optimization.html). This bundles the main js with all dependent js files into one, then minifies it using UglifyJS (or Closure Compiler). This reduces the number of files and total amount of data that the browser needs to load. The total JavaScript file size for World Wide Maze is around 2 MB and can be reduced to about 1 MB with r.js optimization. If the game could be distributed using gzip, this would be further reduced to 250 KB. (GAE has an issue that won't allow transmission of gzip files 1 MB or larger, so the game is currently distributed uncompressed as 1 MB of plain text.)
+
+## Stage builder
+
+Stage data is generated as follows, performed entirely on the GCE server in the US:
+
+1. The URL of the website to be converted into a stage is sent via WebSocket.
+1. PhantomJS takes a screenshot, and div and img tag positions are retrieved and output in JSON format.
+1. Based on the screenshot from step 2 and positioning data of HTML elements, a custom C++ (OpenCV, Boost) program deletes unnecessary areas, generates islands, connects the islands with bridges, calculates guard rail and item positions, sets the goal point, etc. The results are output in JSON format and returned to the browser.
+
+### PhantomJS
+
+PhantomJS is a browser that requires no screen. It can load web pages without opening windows, so it can be used in automated tests or to capture screenshots on the server side. Its browser engine is WebKit, the same one used by Chrome and Safari, so its layout and JavaScript execution results are also more or less the same as those of standard browsers.
+
+With PhantomJS, JavaScript or CoffeeScript is used to write the processes you want executed. Capturing screenshots is very easy, as shown in [this sample](https://github.com/ariya/phantomjs/blob/master/examples/rasterize.coffee). I was working on a Linux server (CentOS), so I needed to install fonts to display Japanese ([M+ FONTS](http://mplus-fonts.sourceforge.jp/)). Even then, font rendering is handled differently than in Windows or Mac OS, so the same font can look different on other machines (the difference is minimal, though).
+
+Retrieving img and div tag positions is basically handled the same way as on standard pages. jQuery can also be used without any problems.
+
+### stage_builder
+
+I initially considered using a more DOM-based approach to generate stages (similar to the [Firefox 3D Inspector](https://www.google.com/search?q=firefox+3d+inspector&amp;tbm=isch&amp;hl=en)) and attempted something like a DOM analysis in PhantomJS. In the end, though, I settled on an image processing approach. To this end I wrote a C++ program that uses OpenCV and Boost called "stage_builder." It performs the following:
+
+1. Loads the screenshot and JSON file(s).
+1. Converts images and text into "islands."
+1. Creates bridges to connect the islands.
+1. Eliminates unnecessary bridges to create a maze.
+1. Places large items.
+1. Places small items.
+1. Places guard rails.
+1. Outputs positioning data in JSON format.
+
+Each step is detailed below.
+
+### Loading the screenshot and JSON file(s)
+
+The usual `cv::imread` is used to load screenshots. I tested several libraries for the JSON files, but [picojson](https://github.com/kazuho/picojson) seemed the easiest to work with.
+
+### Converting images and text into "islands"
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/mOx1vcwAl5S0LQFAArh4.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+The above is a screenshot of the News section of [aid-dcc.com](http://www.aid-dcc.com/) (click to view actual size). The images and text elements must be converted into islands. In order to isolate these sections, we should delete the white background color—in other words the most prevalent color in the screenshot. Here's what it looks like once this is done:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ATEAYBim1HObyI4nCJHy.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+The white sections are the potential islands.
+
+The text is too fine and sharp, so we'll thicken it with `cv::dilate`, `cv::GaussianBlur`, and `cv::threshold`. Image content is also missing, so we'll fill those areas with white, based on the img tag data output from PhantomJS. The resulting image looks like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/zSwqqM5ydoBgCxEKC63p.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+The text now forms suitable clumps, and each image is a proper island.
+
+### Creating bridges to connect the islands
+
+Once the islands are ready, they are connected with bridges. Each island looks for adjacent islands left, right, above, and below, then connects a bridge to the closest point of the closest island, resulting in something like this:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/558tMaIBBUHgzvlq4N7y.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+### Eliminating unnecessary bridges to create a maze
+
+Keeping all the bridges would make the stage too easy to navigate, so some must be eliminated to create a maze. One island (e.g., the one at the top left) is chosen as a starting point, and all but one bridge (selected at random) connecting to that island are deleted. Then the same thing is done for the next island connected by the remaining bridge. Once the path reaches a dead end or leads back to a previously visited island, it backtracks to a point that allows access to a new island. The maze is completed once all islands are processed in this way.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/yXMArBXt4MuSG9BzXyvL.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+### Placing large items
+
+One or more large items are placed on each island depending on its dimensions, choosing from points furthest from the islands' edges. Although not very clear, these points are shown in red below:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/BwmXDvmisAmeHqC66ask.jpg", alt="Stage build", width="545", height="166" %}
+</figure>
+
+From all of these possible points, the one at top left is set as the starting point (red circle), the one at bottom right is set as the goal (green circle), and a maximum of six of the rest are chosen for large item placement (purple circle).
+
+### Placing small items
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8sDe2oCkoXcmsthh05yc.jpg", alt="Stage build", width="620", height="253" %}
+</figure>
+
+Suitable numbers of small items are placed along lines at set distances from the island edges. The image above (not from aid-dcc.com) shows the projected placement lines in gray, offset and placed at regular intervals from the edges of the island. The red dots indicate where the small items are placed. Since this image is from a mid-development version, the items are laid out in straight lines, but the final version scatters the items a little more irregularly to either side of the gray lines.
+
+### Placing guard rails
+
+The guard rails are basically placed along the outer boundaries of the islands but must be cut off at bridges to allow access. The Boost [Geometry library](http://www.boost.org/doc/libs/1_53_0/libs/geometry/doc/html/index.html) proved useful for this, simplifying geometric calculations such as determining where island boundary data intersects with the lines on either side of a bridge.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dOT6oazeJkNv89wyXDAA.jpg", alt="Stage build", width="620", height="242" %}
+</figure>
+
+The green lines outlining the islands are the guard rails. It may be difficult to see in this image, but there are no green lines where the bridges are. This is the final image used for debugging, where all objects that need to be output into JSON are included. The light blue dots are small items, and the gray dots are proposed restarting points. When the ball falls into the ocean, the game is resumed from the nearest restarting point. Restarting points are arranged more or less the same way small items are, at regular intervals at a set distance from the edge of the island.
+
+### Outputting positioning data in JSON format
+
+I used picojson for output as well. It writes the data to standard output, which is then received by the caller (Node.js).
+
+### Creating a C++ program on a Mac to be run in Linux
+
+The game was developed on a Mac and deployed in Linux, but since OpenCV and Boost existed for both operating systems, development itself was not difficult once the compile environment was established. I used Command Line Tools in Xcode to debug the build on the Mac, then created a configure file using automake/autoconf so that the build could be compiled in Linux. Then I simply had to use "configure && make" in Linux to create the executable file. I encountered some Linux-specific bugs due to compiler version differences but was able to resolve them relatively easily using gdb.
+
+## Conclusion
+
+A game like this could be created with Flash or Unity, which would bring numerous advantages. However, this version requires no plugins, and the layout features of HTML5 + CSS3 proved to be extremely powerful. It's definitely important to have the right tools for each task. I was personally surprised at how well the game turned out for one made entirely in HTML5, and although it's still lacking in many areas, I look forward to seeing how it develops in the future.
diff --git a/src/site/content/en/blog/xhr2/index.md b/src/site/content/en/blog/xhr2/index.md
new file mode 100644
index 00000000000..0f16757922a
--- /dev/null
+++ b/src/site/content/en/blog/xhr2/index.md
@@ -0,0 +1,491 @@
+---
+title: New tricks in XMLHttpRequest2
+authors:
+  - ericbidelman
+date: 2011-05-27
+tags:
+  - blog
+---
+
+## Introduction
+
+One of the unsung heros in the HTML5 universe is `XMLHttpRequest`.
+Strictly speaking XHR2 isn't HTML5. However, it's part of the incremental improvements
+browser vendors are making to the core platform. I'm including XHR2 in our new bag of
+goodies because it plays such an integral part in today's complex web apps.
+
+Turns out our old friend got a huge makeover but many folks
+are unaware of its new features. [XMLHttpRequest Level 2](http://dev.w3.org/2006/webapi/XMLHttpRequest-2/)
+introduces a slew of new capabilities which put an end to complicated hacks in our web apps;
+things like cross-origin requests, uploading progress events,
+and support for uploading/downloading binary data. These allow AJAX
+to work in concert with many of the bleeding edge HTML5 APIs such as [File System API](https://www.html5rocks.com/tutorials/file/filesystem/),
+[Web Audio API](http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html),
+and WebGL.
+
+This tutorial highlights some of the new features in `XMLHttpRequest`,
+especially those that can be used for [working with files](https://www.html5rocks.com/tutorials/file/dndfiles/).
+
+## Fetching data
+
+Fetching a file as a binary blob has been painful with XHR. Technically,
+it wasn't even possible. One trick that has been well documented involves
+overriding the mime type with a user-defined charset as seen below.
+
+The old way to fetch an image:
+
+```js
+var xhr = new XMLHttpRequest();
+xhr.open('GET', '/path/to/image.png', true);
+
+// Hack to pass bytes through unprocessed.
+xhr.overrideMimeType('text/plain; charset=x-user-defined');
+
+xhr.onreadystatechange = function(e) {
+  if (this.readyState == 4 && this.status == 200) {
+    var binStr = this.responseText;
+    for (var i = 0, len = binStr.length; i < len; ++i) {
+      var c = binStr.charCodeAt(i);
+      //String.fromCharCode(c & 0xff);
+      var byte = c & 0xff;  // byte at offset i
+    }
+  }
+};
+
+xhr.send();
+```
+
+While this works, what you actually get back in the `responseText`
+is not a binary blob. It is a binary string representing the image file.
+We're tricking the server into passing the data back, unprocessed.
+Even though this little gem works, I'm going to call it black magic and advise
+against it. Anytime you resort to character code hacks and string manipulation
+for coercing data into a desirable format, that's a problem.
+
+### Specifying a response format
+
+In the previous example, we downloaded the image as a binary "file"
+by overriding the server's mime type and processing the response text as a binary string.
+Instead, let's leverage `XMLHttpRequest`'s new
+`responseType` and `response` properties to inform
+the browser what format we want the data returned as.
+
+
+xhr.**responseType**
+: Before sending a request, set the `xhr.responseType`
+to "text", "arraybuffer", "blob", or "document", depending on your data needs.
+Note, setting `xhr.responseType = ''` (or omitting) will default
+the response to "text".
+
+xhr.**response**
+: After a successful request, the xhr's response property will
+contain the requested data as a `DOMString`, `ArrayBuffer`,
+`Blob`, or `Document` (depending on what was set for
+`responseType`.)
+
+With this new awesomeness, we can rework the previous example, but this time,
+fetch the image as an `Blob` instead of a string:
+
+```js
+var xhr = new XMLHttpRequest();
+xhr.open('GET', '/path/to/image.png', true);
+xhr.responseType = 'blob';
+
+xhr.onload = function(e) {
+  if (this.status == 200) {
+    // Note: .response instead of .responseText
+    var blob = new Blob([this.response], {type: 'image/png'});
+    ...
+  }
+};
+
+xhr.send();
+```
+
+Much nicer!
+
+#### ArrayBuffer responses
+
+An [`ArrayBuffer`](https://developer.mozilla.org/JavaScript_typed_arrays/ArrayBuffer)
+is a generic fixed-length container for binary data. They are super handy if you
+need a generalized buffer of raw data, but the real power behind these guys is that
+you can create "views" of the underlying data using [JavaScript typed arrays](https://developer.mozilla.org/JavaScript_typed_arrays).
+In fact, multiple views can be created from a single `ArrayBuffer` source.
+For example, you could create an 8-bit integer array that shares the same `ArrayBuffer`
+as an existing 32-bit integer array from the same data. The underlying data
+remains the same, we just create different representations of it.
+
+As an example, the following fetches our same image as an `ArrayBuffer`,
+but this time, creates an unsigned 8-bit integer array from that data buffer:
+
+```js
+var xhr = new XMLHttpRequest();
+xhr.open('GET', '/path/to/image.png', true);
+xhr.responseType = 'arraybuffer';
+
+xhr.onload = function(e) {
+  var uInt8Array = new Uint8Array(this.response); // this.response == uInt8Array.buffer
+  // var byte3 = uInt8Array[4]; // byte at offset 4
+  ...
+};
+
+xhr.send();
+```
+
+#### Blob responses
+
+If you want to work directly with a [`Blob`](https://developer.mozilla.org/DOM/Blob) and/or
+don't need to manipulate any of the file's bytes, use `xhr.responseType='blob'`:
+
+```js
+window.URL = window.URL || window.webkitURL;  // Take care of vendor prefixes.
+
+var xhr = new XMLHttpRequest();
+xhr.open('GET', '/path/to/image.png', true);
+xhr.responseType = 'blob';
+
+xhr.onload = function(e) {
+  if (this.status == 200) {
+    var blob = this.response;
+
+    var img = document.createElement('img');
+    img.onload = function(e) {
+      window.URL.revokeObjectURL(img.src); // Clean up after yourself.
+    };
+    img.src = window.URL.createObjectURL(blob);
+    document.body.appendChild(img);
+    ...
+  }
+};
+
+xhr.send();
+```
+
+A `Blob` can be used in a number of places, including saving
+it to [indexedDB](https://www.html5rocks.com/tutorials/indexeddb/todo/), writing it to the HTML5 [File System](https://www.html5rocks.com/tutorials/file/filesystem/),
+or [creating an Blob URL](https://www.html5rocks.com/tutorials/workers/basics/#toc-inlineworkers-bloburis), as seen
+in this example.
+
+## Sending data
+
+Being able to download data in different formats is great, but it doesn't
+get us anywhere if we can't send these rich formats back to home base (the server).
+`XMLHttpRequest` has limited us to sending `DOMString`
+or `Document` (XML) data for some time. Not anymore. A revamped `send()`
+method has been overridden to accept any of the following types:
+`DOMString`, `Document`, `FormData`, `Blob`,
+`File`, `ArrayBuffer`. The examples in the rest of this
+section demonstrate sending data using each type.
+
+### Sending string data: xhr.send(DOMString)
+
+```js
+function sendText(txt) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      console.log(this.responseText);
+    }
+  };
+
+  xhr.send(txt);
+}
+
+sendText('test string');
+```
+
+```js
+function sendTextNew(txt) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.responseType = 'text';
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      console.log(this.response);
+    }
+  };
+  xhr.send(txt);
+}
+
+sendTextNew('test string');
+```
+
+There's nothing new here, though the right snippet is slightly different.
+It sets `responseType='text'` for comparison. Again, omitting that line
+yields the same results.
+
+### Submitting forms: xhr.send(FormData)
+
+Many people are probably accustomed to using [jQuery plugins](http://jquery.malsup.com/form/)
+or other libraries to handle AJAX form submissions. Instead, we can use [`FormData`](https://developer.mozilla.org/XMLHttpRequest/FormData),
+another new data type conceived for XHR2. `FormData`
+is convenient for creating an HTML `<form>` on-the-fly, in JavaScript.
+That form can then be submitted using AJAX:
+
+```js
+function sendForm() {
+  var formData = new FormData();
+  formData.append('username', 'johndoe');
+  formData.append('id', 123456);
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.onload = function(e) { ... };
+
+  xhr.send(formData);
+}
+```
+
+Essentially, we're just dynamically creating a `<form>` and tacking on
+`<input>` values to it by calling the append method.
+
+Of course, you don't need to create a `<form>` from scratch.
+`FormData` objects can be initialized from and existing `HTMLFormElement`
+on the page. For example:
+
+```html
+<form id="myform" name="myform" action="/server">
+  <input type="text" name="username" value="johndoe">
+  <input type="number" name="id" value="123456">
+  <input type="submit" onclick="return sendForm(this.form);">
+</form>
+```
+
+```js
+function sendForm(form) {
+  var formData = new FormData(form);
+
+  formData.append('secret_token', '1234567890'); // Append extra data before send.
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', form.action, true);
+  xhr.onload = function(e) { ... };
+
+  xhr.send(formData);
+
+  return false; // Prevent page from submitting.
+}
+```
+
+An HTML form can include file uploads (e.g. `<input type="file">`)
+and  `FormData` can handle that too. Simply append the file(s) and the browser will
+construct a `multipart/form-data` request when `send()` is called:
+
+```js
+function uploadFiles(url, files) {
+  var formData = new FormData();
+
+  for (var i = 0, file; file = files[i]; ++i) {
+    formData.append(file.name, file);
+  }
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', url, true);
+  xhr.onload = function(e) { ... };
+
+  xhr.send(formData);  // multipart/form-data
+}
+
+document.querySelector('input[type="file"]').addEventListener('change', function(e) {
+  uploadFiles('/server', this.files);
+}, false);
+```
+
+### Uploading a file or blob: xhr.send(Blob)
+
+We can also send `File` or `Blob` data using XHR.
+Keep in mind all `File`s are `Blob`s, so either works here.
+
+This example creates a new text file from scratch using the `Blob()` constructor
+and uploads that `Blob` to the server. The code also sets up a handler
+to inform the user of the upload's progress:
+
+```html
+<progress min="0" max="100" value="0">0% complete</progress>
+```
+
+```js
+function upload(blobOrFile) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.onload = function(e) { ... };
+
+  // Listen to the upload progress.
+  var progressBar = document.querySelector('progress');
+  xhr.upload.onprogress = function(e) {
+    if (e.lengthComputable) {
+      progressBar.value = (e.loaded / e.total) * 100;
+      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
+    }
+  };
+
+  xhr.send(blobOrFile);
+}
+
+upload(new Blob(['hello world'], {type: 'text/plain'}));
+```
+
+### Uploading a chunk of bytes: xhr.send(ArrayBuffer)
+
+Last but not least, we can send `ArrayBuffer`s as the XHR's payload.
+
+```js
+function sendArrayBuffer() {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.onload = function(e) { ... };
+
+  var uInt8Array = new Uint8Array([1, 2, 3]);
+
+  xhr.send(uInt8Array.buffer);
+}
+```
+
+## Cross Origin Resource Sharing (CORS)
+
+[CORS](http://dev.w3.org/2006/waf/access-control/) allows web applications
+on one domain to make cross domain AJAX requests to another domain.
+It's dead simple to enable, only requiring a single response header to be sent by the server.
+
+### Enabling CORS requests
+
+Let's say your application lives on `example.com` and you
+want to pull data from `www.example2.com`. Normally if you
+tried to make this type of AJAX call, the request would fail and the browser
+would throw an origin mismatch error. With CORS, `www.example2.com`
+can choose to allow requests from `example.com` by simply adding a header:
+
+```http
+Access-Control-Allow-Origin: http://example.com
+```
+
+`Access-Control-Allow-Origin` can be added to a single resource
+under a site or across the entire domain. To allow __any__ domain to make
+a request to you, set:
+
+```http
+Access-Control-Allow-Origin: *
+```
+
+In fact, this site (html5rocks.com) has enabled CORS on all of its pages. Fire up
+the Developer Tools and you'll see the `Access-Control-Allow-Origin`
+in our response:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/m3sHhrvJHxqjcpxUgGLS.png", alt="Access-Control-Allow-Origin header on html5rocks.com", width="705", height="411" %}
+<figcaption>`Access-Control-Allow-Origin` header on html5rocks.com</figcaption>
+</figure>
+
+Enabling cross-origin requests is easy, so please, please, please [enable CORS](http://enable-cors.org/) if your data is public!
+
+### Making a cross-domain request
+
+If the server endpoint has enabled CORS, making the cross-origin request
+is no different than a normal `XMLHttpRequest` request. For example,
+here is a request `example.com` can now make to
+`www.example2.com`:
+
+```js
+var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://www.example2.com/hello.json');
+xhr.onload = function(e) {
+  var data = JSON.parse(this.response);
+  ...
+}
+xhr.send();
+```
+
+
+## Practical examples
+
+### Download + save files to the HTML5 file system
+
+Let's say you have an image gallery and want to fetch a bunch
+of images then save them locally using the [HTML5 File System](https://www.html5rocks.com/tutorials/file/filesystem/).
+One way to accomplish this would be to request images as `Blob`s
+and write them out using `FileWriter`:
+
+```js
+window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
+
+function onError(e) {
+  console.log('Error', e);
+}
+
+var xhr = new XMLHttpRequest();
+xhr.open('GET', '/path/to/image.png', true);
+xhr.responseType = 'blob';
+
+xhr.onload = function(e) {
+
+  window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
+    fs.root.getFile('image.png', {create: true}, function(fileEntry) {
+      fileEntry.createWriter(function(writer) {
+
+        writer.onwrite = function(e) { ... };
+        writer.onerror = function(e) { ... };
+
+        var blob = new Blob([xhr.response], {type: 'image/png'});
+
+        writer.write(blob);
+
+      }, onError);
+    }, onError);
+  }, onError);
+};
+
+xhr.send();
+```
+
+{% Aside %}
+To use this code, see [browser support and storage limitations](https://www.html5rocks.com/tutorials/file/filesystem/#toc-support)</a>
+in the "[Exploring the FileSystem APIs](https://www.html5rocks.com/tutorials/file/filesystem/)" tutorial.
+{% endAside %}
+
+### Slicing a file and uploading each portion
+
+Using the [File APIs](https://www.html5rocks.com/tutorials/file/dndfiles/), we can minimize
+the work to upload a large file. The technique is to slice the upload into multiple chunks,
+spawn an XHR for each portion, and put the file together on the server. This is
+similar to how GMail uploads large attachments so quickly. Such a technique could also be
+used to get around Google App Engine's 32MB http request limit.
+
+```js
+function upload(blobOrFile) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/server', true);
+  xhr.onload = function(e) { ... };
+  xhr.send(blobOrFile);
+}
+
+document.querySelector('input[type="file"]').addEventListener('change', function(e) {
+  var blob = this.files[0];
+
+  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
+  const SIZE = blob.size;
+
+  var start = 0;
+  var end = BYTES_PER_CHUNK;
+
+  while(start < SIZE) {
+    upload(blob.slice(start, end));
+
+    start = end;
+    end = start + BYTES_PER_CHUNK;
+  }
+}, false);
+
+})();
+```
+
+What is not shown here is the code to reconstruct the file on the server.
+
+
+
+## References
+
+- [XMLHttpRequest Level 2](http://dev.w3.org/2006/webapi/XMLHttpRequest-2/) specification
+- [Cross Origin Resource Sharing (CORS)](http://dev.w3.org/2006/waf/access-control/) specification
+- [File API](http://www.w3.org/TR/file-upload/) specification
+- [FileSystem API](http://dev.w3.org/2009/dap/file-system/pub/FileSystem/) specification
diff --git a/src/site/content/en/blog/yahoo-japan-identity-case-study/index.md b/src/site/content/en/blog/yahoo-japan-identity-case-study/index.md
new file mode 100644
index 00000000000..ceb96615c4d
--- /dev/null
+++ b/src/site/content/en/blog/yahoo-japan-identity-case-study/index.md
@@ -0,0 +1,441 @@
+---
+layout: post
+title: Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x
+subhead: >
+    Learn about how Yahoo! Japan built a passwordless identity system.
+description: |
+    Yahoo! JAPAN achieved a passwordless identity system. Learn their approach and the consequences of the effort.
+authors:
+  - yuyaito
+  - agektmr
+  - alexandrawhite
+date: 2022-05-10
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/tqK2Tb4rUrxheagyYbDj.png
+alt: Many identical keys.
+tags:
+  - blog
+  - case-study
+---
+
+Yahoo! JAPAN is one of the largest media companies in Japan, providing
+services such as search, news, e-commerce, and e-mail. Over 50 million users
+log in to Yahoo! JAPAN services every month.
+
+Over the years, there were many attacks on user accounts and issues that led
+to lost account access. Most of these issues were related to password usage
+for authentication.
+
+With recent advances in authentication technology, Yahoo! JAPAN has decided to
+move from password-based to passwordless authentication.
+
+## Why passwordless?
+
+As Yahoo! JAPAN offers e-commerce and other money-related services, there's a
+risk of significant damage to users in the event of unauthorized access or
+account loss.
+
+The most common attacks related to passwords were password list attacks and
+phishing scams. One of the reasons why password list attacks are common and
+effective is many people's habit of using the same password for multiple
+applications and websites.
+
+The following figures are the results of a survey conducted by Yahoo! JAPAN. 
+
+<ul class="stats">
+<div class="stats__item">
+<p class="stats__figure">
+50
+<sub>%</sub>
+</p>
+<p>use the same ID and password on six or more sites</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+60
+<sub>%</sub>
+</p>
+<p>Use the same password across multiple sites</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+70
+<sub>%</sub>
+</p>
+<p>use a password as the primary way to login</p>
+</div>
+</ul>
+
+Users often forget their passwords, which accounted for the majority of
+password-related inquiries. There were also inquiries from users who had
+forgotten their login IDs in addition to their passwords. At their peak, these
+inquiries accounted for more than a third of all account-related inquiries.
+
+By going passwordless, Yahoo! JAPAN aimed to improve not only security, but
+also usability, without placing any extra burden on users.
+
+From a security perspective, eliminating passwords from the user
+authentication process reduces the damage from list-based attacks, and from a
+usability perspective, providing an authentication method that does not rely
+on remembering passwords prevents situations where a user is unable to login
+because they forgot their password.
+
+## Yahoo! JAPAN's passwordless initiatives
+
+Yahoo! JAPAN is taking a number of steps to promote passwordless
+authentication, which can be broadly divided into three categories:
+
+1. Provide an alternative means of authentication to passwords.
+2. Password deactivation.
+3. Passwordless account registration.
+
+The first two initiatives aimed at existing users, while passwordless
+registration is aimed at new users.
+
+### 1. Providing an alternative means of authentication to passwords
+
+Yahoo! JAPAN offers the following alternatives to passwords.
+
+1.  [SMS authentication](/sms-otp-form/)
+2.  [FIDO with WebAuthn](https://developers.google.com/identity/fido)
+
+In addition, we also offer authentication methods such as e-mail
+authentication, password combined with SMS OTP (one time password), and
+password combined with email OTP.
+
+{% Aside 'important' %}
+Yahoo! JAPAN restricts their service to phone carriers
+operating inside Japan and prohibits VoIP SMS.
+{% endAside %}
+
+#### SMS authentication
+
+SMS authentication is a system which allows a registered user to receive a
+six-digit authentication code through SMS. Once the user receives the SMS,
+they can enter the authentication code in the app or website.
+
+<figure class="screenshot">
+{% Img
+   alt="",
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/h08m9uzVJg9uNzM3LE5k.jpg", width="668", height="437"
+%}
+</figure>
+
+Apple has long allowed iOS to read SMS messages and suggest authentication
+codes from the text body. Recently, it's become possible to use suggestions by
+specifying "one-time-code" in the `autocomplete` attribute of the input
+element. Chrome on Android, Windows, and Mac can provide the same experience
+using the [WebOTP API](https://developer.mozilla.org/docs/Web/API/WebOTP_API).
+
+For example:
+
+```html
+<form>
+  <input type="text" id="code" autocomplete="one-time-code"/>
+  <button type="submit">sign in</button>
+</form>
+```
+
+```javascript
+if ('OTPCredential' in window) {
+  const input = document.getElementById('code');
+  if (!input) return;
+  const ac = new AbortController();
+  const form = input.closest('form');
+  if (form) {
+    form.addEventListener('submit', e => {
+      ac.abort();
+    });
+  }
+  navigator.credentials.get({
+    otp: { transport:['sms'] },
+    signal: ac.signal
+  }).then(otp => {
+    input.value = otp.code;
+  }).catch(err => {
+    console.log(err);
+  });
+}
+```
+
+Both approaches are designed to prevent phishing by including the domain in
+the SMS body and providing suggestions only for the specified domain.
+
+For more information about the WebOTP API and `autocomplete="one-time-code"`,
+check out [SMS OTP form best practices](/sms-otp-form/).
+
+<figure class="screenshot">
+{% Img
+   alt="",
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/Szaf3C0hfjLNkTWAVf9B.png", width="387", height="523"
+%}
+</figure>
+
+#### FIDO with WebAuthn
+
+FIDO with WebAuthn uses a hardware authenticator to generate a public key
+cipher pair and prove possession. When a smartphone is used as the
+authenticator, it can be combined with biometric authentication (such as
+fingerprint sensors or facial recognition) to perform one-step two-factor
+authentication. In this case, only the signature and the success indication
+from the biometric authentication are sent to the server, so there is no risk
+of biometric data theft.
+
+The following diagram shows the server-client configuration for FIDO. The
+client authenticator authenticates the user with biometrics and signs the
+result using public key cryptography. The private key used to create the
+signature is securely stored in a [TEE (Trusted Execution Environment)](https://en.wikipedia.org/wiki/Trusted_execution_environment)
+or similar location. A service provider that uses FIDO is called an RP
+(relying party). 
+
+<figure>
+   {% Img
+      src="image/VbsHyyQopiec0718rMq2kTE1hke2/PkFYWnOZABjPu7Zc7rXN.png", alt="", width="800", height="400"
+   %}
+<figcaption style="text-align:left">
+<p>Once the user performs the authentication (commonly with a biometric scan or PIN), the authenticator uses a private key to send a signed verification signal to the browser. The browser then shares that signal with the RP's website.</p><p>The RP website then sends the signed verification signal to the RP's server, which verifies the signature against the public key to complete the authentication.</p>
+</figcaption>
+</figure>
+
+For more information, read
+[authentication guidelines from the FIDO Alliance](https://fidoalliance.org/fido-authentication/).
+
+Yahoo! JAPAN supports FIDO on Android (mobile app and web), iOS (mobile app
+and web), Windows (Edge, Chrome, Firefox), and macOS (Safari, Chrome). As a
+consumer service, FIDO can be used on almost any device, which makes it a good
+option for promoting passwordless authentication.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+       <tr>
+   <td>
+    <strong>Operating System</strong>
+   </td>
+   <td>
+    <strong>Support for FIDO</strong>
+   </td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+   <td>
+    Android
+   </td>
+   <td>
+    Apps, Browser (Chrome)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    iOS
+   </td>
+   <td>
+    Apps (iOS14 or later), Browser (Safari 14 or later)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    Windows
+   </td>
+   <td>
+    Browser (Edge, Chrome, Firefox)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    Mac (Big Sur or later)
+   </td>
+   <td>
+    Browser (Safari, Chrome)
+   </td>
+  </tr>
+</tbody>
+  </table>
+</div>
+
+<figure class="alignright">
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/iq0dODcbp3WcPUGTwHkl.png", width="520", height="497", class="screenshot", alt="" %}
+  <figcaption>Sample Yahoo! JAPAN prompt to authenticate with FIDO.</figcaption>
+</figure>
+
+Yahoo! JAPAN recommends that users register for FIDO with WebAuthn, if they've
+not already authenticated through other means. When a user needs to log in
+with the same device, they can quickly authenticate using a biometric sensor.
+
+Users must set up FIDO authentication with all devices they use to log in to
+Yahoo! JAPAN.
+
+To promote passwordless authentication and be considerate of users who are
+transitioning away from passwords, we provide multiple means of
+authentication. This means that different users can have different
+authentication method settings, and the authentication methods they can use
+may differ from browser to browser. We believe it's a better experience if
+users log in using the same authentication method each time.
+
+To meet these requirements, it's necessary to track previous authentication
+methods and link this information to the client by storing it in the form of
+cookies, etc. We can then analyze how different browsers and applications are
+used for authentication. The user is asked to provide appropriate
+authentication based on the user's settings, the previous authentication
+methods used, and the minimum level of authentication required.
+
+### 2. Password deactivation
+
+Yahoo! JAPAN asks users to set up an alternative authentication method and
+then disable their password so that it cannot be used. In addition to setting
+up alternative authentication, disabling password authentication (therefore
+making it impossible to sign in with only a password) helps protect users from
+list-based attacks.
+
+We've taken the following steps to encourage users to disable their
+passwords.
+
+*  Promoting alternative authentication methods when users reset their passwords.
+*  Encouraging users to set up easy-to-use authentication methods (such as
+   FIDO) and disable passwords for situations that require frequent
+   authentication.
+*  Urging users to disable their passwords before using high-risk services,
+   such as e-commerce payments.
+
+If a user forgets their password, they can run an account recovery. Previously
+this involved a password reset. Now, users can choose to set up a different
+authentication method, and we encourage them to do so.
+
+### 3. Passwordless account registration
+
+New users can create password-free Yahoo! JAPAN accounts. Users are first
+required to register with an SMS authentication. Once they've logged in, we
+encourage the user to set up FIDO authentication.
+
+Since FIDO is a per-device setting, it can be difficult to recover an account,
+should the device become inoperable. Therefore, we require users to keep their
+phone number registered, even after they've set up additional authentication.
+
+### Key challenges for passwordless authentication
+
+Passwords rely on human memory and are device-independent. On the other hand,
+the authentication methods introduced thus far in our passwordless initiative
+are device-dependent. This poses several challenges.
+
+When multiple devices are used, there are some issues related to usability:
+
+*  When using SMS authentication to log in from a PC, users must check their
+   mobile phone for incoming SMS messages. This may be inconvenient, as it
+   requires the user's phone to be available and easy to access at any time.
+*  With FIDO, especially with platform authenticators, a user with multiple
+   devices will be unable to authenticate on unregistered devices.
+   Registration must be completed for each device they intend to use.
+
+FIDO authentication is tied to specific devices, which requires they remain in
+the user's possession and active.
+
+*  If the service contract is canceled, it will no longer be possible to send
+   SMS messages to the registered phone number.
+*  FIDO stores private keys on a specific device. If the device is lost, those
+   keys are unusable.
+
+Yahoo! JAPAN is taking various steps to address these problems.
+
+The most important solution is to encourage users to set up multiple
+authentication methods. This provides alternative account access when devices
+are lost. Since FIDO keys are device-dependent, it is also good practice to
+register FIDO private keys on multiple devices.
+
+Alternatively, users can use the [WebOTP API to pass SMS verification
+codes](/sms-otp-form/) from an Android phone to Chrome on a PC.
+
+{% Aside %}
+Apple recently announced the [passkeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys)
+feature. Apple uses iCloud Keychain to share the private key (stored on
+the device) among devices that are signed in with the same Apple ID,
+which eliminates the need for registration for each device.
+
+The FIDO Alliance recognizes the importance of account recovery issues
+and has published a [white paper](https://fidoalliance.org/white-paper-multiple-authenticators-for-reducing-account-recovery-needs-for-fido-enabled-consumer-accounts/).
+{% endAside %}
+
+We believe that addressing these issues will become even more important as
+passwordless authentication spreads.
+
+### Promoting passwordless authentication
+
+Yahoo! JAPAN has been working on these passwordless initiatives since 2015.
+This began with the acquisition of FIDO server certification in May 2015,
+followed by the introduction of SMS authentication, a password deactivation
+feature, and FIDO support for each device.
+
+Today, more than 30 million monthly active users have already disabled their
+passwords and are using non-password authentication methods. Yahoo! JAPAN's
+support for FIDO started with Chrome on Android, and now more than 10 million
+users have set up FIDO authentication.
+
+As a result of Yahoo! JAPAN's initiatives, the percentage of inquiries
+involving forgotten login IDs or passwords has decreased by 25% compared to the
+period when the number of such inquiries was at its highest, and we have also
+been able to confirm that unauthorized access has declined as a result of the
+increase in the number of passwordless accounts.
+
+Since FIDO is so easy to set up, it has a particularly high conversion rate.
+In fact, Yahoo! JAPAN has found that FIDO has a higher CVR than SMS
+authentication.
+
+<ul class="stats">
+<div class="stats__item">
+<p class="stats__figure">
+25
+<sub>%</sub>
+</p>
+<p>Decrease in requests for forgotten credentials</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+74
+<sub>%</sub>
+</p>
+<p>Users succeed with FIDO authentication</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+65
+<sub>%</sub>
+</p>
+<p>Succeed with SMS verification</p>
+</div>
+</ul>
+
+FIDO has a higher success rate than SMS authentication, and faster average and
+median authentication times. As for passwords, some groups have short
+authentication times, and we suspect that this is due to the browser's
+[`autocomplete="current-password"`](/sign-in-form-best-practices/#current-password).
+
+<figure class="screenshot">
+{% Img
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/KhkGTZgYgmUM9pJGrg5h.png",
+   alt="Graph comparison of authentication time for passwords, SMS, and FIDO.",
+   width="799", height="478"
+%}
+<figcaption>On average, FIDO takes 8 seconds to authenticate, while passwords take 21 seconds, and SMS verification takes 27.</figcaption>
+</figure>
+
+The greatest difficulty for offering passwordless accounts is not the addition
+of authentication methods, but **popularizing the use of authenticators**.
+If the experience of using a passwordless service is not user-friendly, the
+transition will not be easy. 
+
+We believe that to achieve improved security we must first improve usability,
+which will require unique innovations for each service.
+
+## Conclusion
+
+Password authentication is risky in terms of security, and it also poses
+challenges in terms of usability. Now that technologies supporting
+non-password authentication, such as WebOTP API and FIDO, are more widely
+available, it's time to start working toward passwordless authentication. 
+
+At Yahoo! JAPAN, taking this approach has had a definite effect on both
+usability and security. However, many users are still using passwords, so we
+will continue to encourage more users to switch to passwordless authentication
+methods. We will also continue improving our products to optimize the user
+experience for passwordless authentication methods.
+
+_Photo by olieman.eth on [Unsplash](https://unsplash.com)_
diff --git a/src/site/content/en/blog/yahoo-japan-news-bfcache/index.md b/src/site/content/en/blog/yahoo-japan-news-bfcache/index.md
new file mode 100644
index 00000000000..e513ccd897a
--- /dev/null
+++ b/src/site/content/en/blog/yahoo-japan-news-bfcache/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
+subhead: |
+  Instant page loading by Back/forward Cache provides users with seamless experience
+description: |
+  Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a 9% increase in ads revenue.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/iyoxhI76AJ7l8sH6OtUe.png
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/stTQH6TS9oLBON1LvoKG.png
+alt: A hero image displaying the Yahoo JAPAN News logo at left. At right is a comparison of two filmstrips showing the benefits of bfcache (page loads in 0.3 seconds) versus without (page loads in 3.3 seconds).
+authors:
+  - yurikohirota
+date: 2023-07-25
+tags:
+  - blog
+  - performance
+  - case-study
+---
+
+{% Blockquote 'web.dev article on bfcache ' %}
+[Back/forward cache](/bfcache/) (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth navigations.
+{% endBlockquote %}
+
+Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a **9% increase in ads revenue**.
+
+This case study will explain how Yahoo! JAPAN News removed the blockers for bfcache, and how bfcache drastically improved the user experience.
+
+## Removing blockers for bfcache
+
+bfcache has been available since Chrome 86, and is also available on all modern browsers. However, taking full advantage of bfcache requires removing potential blockers on one's website. Some major blockers that Yahoo! JAPAN News faced were:
+
+1. Use of `unload` handlers
+2. Use of the [`no-store` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#no-store) on `Cache-control` headers
+
+You can check what major blockers there are for your website by going to **Chrome Dev Tools > Applications > Back/forward Cache** ([more details](/bfcache/#test-to-ensure-your-pages-are-cacheable)), or by using the [`notRestoredReasons` API](https://developer.chrome.com/docs/web-platform/bfcache-notrestoredreasons/) to get a more comprehensive view of blockers based on actual usage in the field.
+
+Here's how Yahoo! JAPAN News has removed their blockers:
+
+- **Unload Handlers:** Use the `pagehide` event instead of `unload` event, as the `unload` event is [very unreliable](/bfcache/#never-use-the-unload-event). Also, `permission-policy: unload` was [launched in Chrome 115](https://chromestatus.com/feature/5579556305502208) so that the websites can reliably remove `unload` handlers for specific origins. Chrome is also planning to [gradually deprecate `unload` handlers](https://github.com/fergald/docs/blob/master/explainers/permissions-policy-deprecate-unload.md#logistics-of-deprecation).
+- **`Cache-control: no-store`** (or CCNS for short): Changing the `Cache-control` header from **`no-store`** to **`no-cache`** can enable bfcache. Chrome is also planning to start [caching for bfcache even with a `no-store` header in certain circumstances](https://chromestatus.com/feature/6705326844805120).
+
+CCNS is intended for pages that should never be cached under any circumstances. This comes with the caveat that any page with CCNS will not be able to benefit from any caching technology, including CDN edge servers and local caches.
+
+If you have a CCNS header, this is a great opportunity to discuss what the right `Cache-control` strategies are for your website. Here are the main differences between `no-store` and `no-cache`.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><code>Cache-control: <strong>no-store</strong></code></th>
+        <th><code>Cache-control: <strong>no-cache</strong></code></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <ul>
+            <li>The response is not allowed to be stored in caches.</li>
+            <li>Consequently, the response is fetched in full on every request.</li>
+            <li>This should be used for private responses.</li>
+          </ul>
+        </td>
+        <td>
+          <ul>
+            <li>The response is allowed to be stored in caches as long as it's revalidated with the server before each use.</li>
+            <li>This should be public responses you want revalidated every time (for example, the home page of a news website - though even then a very short caching time can improve performance and offload work from the main servers).</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+If you are interested in learning more about `Cache-control` options, [this flowchart](/http-cache/?hl=en#flowchart) is a great help.
+
+## Impact of bfcache in numbers
+
+To measure the impact of bfcache, Yahoo! JAPAN News conducted an A/B test for 2 weeks, where they served a version of their pages with their bfcache fixes to one group, and a version with pages ineligible for bfcache to another. They picked the URL paths with a significant amount of traffic so that the test could achieve meaningful results. There were no other visual or functional difference between the 2 versions.
+
+Here's a video comparing the website with bfcache and without bfcache. You can see that the website with bfcache enabled loads significantly faster during a back or forward navigation.
+
+<style>
+  .bfcache-video video {
+    height: auto;
+  }
+</style>
+<figure class="bfcache-video">
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/2qqiTs9XuedWvtjfKuMu.mp4", controls="true", autoplay="true", loop="true", width="800", height="800", muted="true" %}
+</figure>
+
+What's really promising is that the group with bfcache enabled had a **significant increase in page views and ads revenue**, especially on mobile devices.
+
+Here are details about the impact observed by Yahoo! JAPAN News with their bfcache A/B test. (Further information can be found in [their case study article](https://techblog.yahoo.co.jp/entry/2023072430429932/)).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <td>
+        <strong>Metrics</strong>
+      </td>
+      <td>
+        <strong>Uplift % (mobile)</strong>
+      </td>
+      <td>
+        <strong>Uplift % (desktop)</strong>
+      </td>
+    </thead>
+    <tbody>
+      <tr>
+        <td>bfcache hit rate</td>
+        <td>
+          <strong>+54.03 points</strong> (0.04% → 54.07%)
+        </td>
+        <td>+47.28 points (0.02% → 47.30%)</td>
+      </tr>
+      <tr>
+        <td>Page views</td>
+        <td>
+          <strong>+2.26%</strong>
+        </td>
+        <td>+0.65%</td>
+      </tr>
+      <tr>
+        <td>Ads revenue</td>
+        <td>
+          <strong>+9.0%</strong>
+        </td>
+        <td>+0.6%</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+When back/forward navigations between pages become instantaneous with bfcache, users tend to stay on pages longer, thus increasing ad views, leading to an increase of ad revenue.
+
+## bfcache enhances seamless user experience on the website
+
+When pages load instantly, **navigations feel more seamless.**
+
+In Yahoo! JAPAN News, one of the major user journey is as follows:
+
+1. Go to the article list
+2. Click on one article to read
+3. Go back to the article list
+4. Click on another article to read
+
+Before bfcache, when users finished reading an article (step 2), they had to wait for the article list page to load again. This could be a friction factor for users who just want to go back to the article list to pick out another article to read.
+
+Another source of friction during backward navigation was the scroll position. In practice, the browser tries to restore the scroll position when a backward navigation happens. However, because of dynamically-added ads or other layout changes, the scroll position often gets incorrectly restored, which could cause users to lose their bearings or even leave the page. This is never an issue when a backward navigation is powered by bfcache: the scroll position is immediately and correctly restored.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png", alt="Two filmstrips of a backward navigation from an article to the article listing page. The top is a filmstrip of the process being handled with bfcache which takes 0.3 seconds, whereas the bottom is of the same process being handled without bfcache, which takes 3.3 seconds.", width="800", height="343" %}
+</figure>
+
+Now with bfcache, the friction in the user journey is gone—users can instantly navigate back to the article list page and pick another article to read without having to wait for the article list page to load.
+
+The same thing happens when users browse from one article directly to another and back:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif", alt="An animated image showing the backward navigation flow from an article to the article listing page with and without bfcache. With bfcache, the backward navigation is not only faster, but the scroll position is accurately maintained. Without bfcache, these guarantees cannot be made.", width="800", height="450" %}
+</figure>
+
+In a nutshell, the benefits of using bfcache for Yahoo! JAPAN News includes:
+
+- Increased pageviews: Users were more likely to navigate within the website when pages were cached with bfcache.
+- Increased revenue: As a result of increased pageviews per session, ads impression increased, which resulted in a 9% increase in revenue on mobile compared with the test group without bfcache.
+
+## Conclusion
+
+In short, bfcache not only makes your website instant, but can also reduce friction in overall user experience and increase engagement within your website.
+
+The Chrome team is continually looking at bfcache blockers—especially the two reasons listed in this article as they are common reasons bfcache is not used. In the future, these may not prevent bfcache usage, but there's no need to wait until then. You can benefit from bfcache by looking at your bfcache blockers and avoiding these common, and other less common, patterns.
diff --git a/src/site/content/en/blog/yahoo-japan-news/index.md b/src/site/content/en/blog/yahoo-japan-news/index.md
new file mode 100644
index 00000000000..9f3a44e5ec6
--- /dev/null
+++ b/src/site/content/en/blog/yahoo-japan-news/index.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%
+subhead: >
+  Optimizing CLS by 0.2 led to a 15% increase in page
+  views per session, 13% longer session durations, and a 1.72
+  percentage point decrease in bounce rate.
+description: |
+    Using Search Console and Lighthouse to monitor Core Web Vitals, they discovered
+    opportunities for optimizing CLS score by 0.2 which led to 15% increase in page
+    views per session, 13% longer session duration, and 1.72 percentage point
+    decrease in bounce rate.
+authors:
+  - sisidovski
+  - gladenjoy
+  - mihajlija
+date: 2021-03-09
+updated: 2021-03-15
+hero: image/iEYkFAI5LNQv7oLlIBv9DuB265a2/CT42V29q9DyjsktM03Wi.png
+thumbnail: image/iEYkFAI5LNQv7oLlIBv9DuB265a2/SYCpuPDC7QTj1runSA2C.png
+alt:
+tags:
+  - blog
+  - case-study
+  - web-vitals
+---
+
+[Yahoo! JAPAN](https://www.yahoo.co.jp) is one of the largest media companies in Japan,
+providing over 79 billion page views per month. Their news platform, [Yahoo!
+JAPAN News](https://news.yahoo.co.jp) has more than 22 billion page views per
+month and an engineering team dedicated to improving the user experience.
+
+By continuously monitoring Core Web Vitals (CWV), they correlated the site's
+improved [Cumulative Layout Shift (CLS)](/cls) score with a 15%
+increase in page views per session and 13% increase in session duration.
+
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">0.2</p>
+    <p>CLS improvement</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">15.1<sub>%</sub></p>
+    <p>More page views per session</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">13.3<sub>%</sub></p>
+    <p>Longer session duration</p>
+  </div>
+</div>
+
+{% Aside `keyterm` %}
+[Cumulative Layout Shift](/cls) measures how visually stable a
+website is—it helps quantify how often users experience unexpected layout
+shifts.
+{% endAside %}
+
+Page content moving around unexpectedly often causes accidental clicks,
+disorientation on the page, and ultimately user frustration. Frustrated users
+tend not to stick around for long. To keep users happy, the page layout should
+stay stable through the entire lifecycle of the user journey. For Yahoo! JAPAN
+News this improvement had a significant positive impact on business critical
+engagement metrics.
+
+For technical details on how they improved the CLS, read the
+[Yahoo! JAPAN News engineering team's post](https://techblog.yahoo.co.jp/entry/2021022230076263/).
+
+## Identifying the issue
+
+Monitoring Core Web Vitals, including CLS, is crucial in catching issues and
+identifying where they're coming from. At Yahoo! JAPAN News, [Search
+Console](https://search.google.com/search-console/about) provided a great
+overview of groups of pages with performance issues and
+[Lighthouse](/learn/#lighthouse) helped identify per-page
+opportunities to improve page experience. Using these tools, they discovered
+that the article detail page had poor CLS.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/GhORGAous9gyou5yTmHj.png", alt="Google Search Console Core Web Vitals Report showing high CLS for article details page.", width="800", height="719" %}
+  <figcaption>
+    Google Search Console Core Web Vitals Report.
+  </figcaption>
+</figure>
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/3YwmCzVBl78a9TdOKu90.png", alt="Lighthouse Avoid large layout shifts audit showing DOm elements that contribute the most to the CLS on the page.", width="800", height="265" %}
+  <figcaption>
+    Lighthouse "Avoid large layout shifts" audit shows which elements are
+    contributing to CLS score and how much.
+  </figcaption>
+</figure>
+
+It's important to keep in mind the _cumulative_ part of the Cumulative Layout
+Shift—the score is captured through the entire page lifecycle. In the
+real-world, the score can include shifts that happen as a result of user
+interactions such as scrolling a page or tapping a button. To collect CLS scores
+from the [field
+data](/how-to-measure-speed/#lab-data-vs-field-data), the team
+integrated [web-vitals](https://github.com/GoogleChrome/web-vitals/) JavaScript
+library reporting.
+
+{% Aside %}
+As a part of performance monitoring strategy, they're also working on building
+an internal tool with [Lighthouse CI](/lighthouse-ci/) to
+continuously audit performance across businesses in the company.
+{% endAside %}
+
+The team used Chrome DevTools to identify which elements were making layout
+shifts on the page.
+[Layout Shift Regions](https://developer.chrome.com/blog/new-in-devtools-77/)
+in DevTools visualizes elements that contribute to CLS by highlighting them with
+a blue rectangle whenever a layout shift happens.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/scvRgLxkZVQoGfOtjZ4z.png", alt="Article details page with blue rectangles overlayed on the hero image and the text.", width="376", height="668" %}
+  <figcaption>
+    Visualized layout shifts.
+  </figcaption>
+</figure>
+
+They figured out that a layout shift occurred after the hero image at the top of
+the article was loaded for the first view.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/HdGiCh7O8ZhqcOkfVGEv.jpg", alt="Screenshots of the article details page showing side by side comparison before and after layout shift.", width="798", height="455" %}
+  <figcaption>
+    Layout shift on the article detail page.
+  </figcaption>
+</figure>
+
+
+In the example above, when the image finishes loading, the text gets pushed down
+(the position change is indicated with the red line).
+
+## Improving CLS for images
+
+For fixed-size images, layout shifts can be prevented by specifying the `width`
+and `height` attributes in the `img` element and using the CSS
+[`aspect-ratio`](/aspect-ratio)
+property available in modern browsers. However, Yahoo! JAPAN News needed to
+support not only modern browsers, but also browsers installed in relatively old
+operating systems such as iOS 9.
+
+They used [Aspect Ratio Boxes](https://css-tricks.com/aspect-ratio-boxes/)—a
+method which uses markup to reserve the space on the page before the image is
+loaded. This method requires knowing the aspect ratio of the image in advance,
+which they were able to get from the backend API.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/gUbS3jB6zMBZwEU3wmW6.jpg", alt="Screenshots of the article details page showing side by side comparison before and after CLS optimization.", width="800", height="439" %}
+  <figcaption>
+    Left: reserved blank space for the image at the top of the page; right: the
+    hero image loaded in the reserved space without layout shifts.
+    </figcaption>
+</figure>
+
+## Results
+
+The number of URLs with poor performance in Search Console decreased by 98% and
+CLS in lab data decreased from about 0.2 to 0. More importantly, there were
+several
+[correlated improvements in business metrics](https://nicj.net/cumulative-layout-shift-in-the-real-world/).
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Q5pRaIvOgzb4tqgv5dWo.png", alt="Search Console report showing a significant drop in pages with performance issues.", width="800", height="509" %}
+  <figcaption>
+    Search Console after improvements.
+  </figcaption>
+</figure>
+
+
+{% Aside %}
+Search Console doesn't reflect improvements in real-time.
+{% endAside %}
+
+When Yahoo! JAPAN News compared user engagement metrics before and after CLS
+optimization, they saw multiple improvements:
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">15.1<sub>%</sub></p>
+    <p>More page views per session</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">13.3<sub>%</sub></p>
+    <p>Longer session duration</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">1.72<sub>%*</sub></p>
+    <p>Lower bounce rate (*percentage points)</p>
+  </div>
+</div>
+
+
+By improving CLS and other Core Web Vitals metrics, Yahoo! JAPAN News also got
+the
+["Fast page" label](https://blog.chromium.org/2020/08/highlighting-great-user-experiences-on.html)
+in the context menu of Chrome Android.
+
+<figure>
+    {% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/ivyeENjT9NKZLhdn9WJm.png", alt="Fast page label in Chrome on Android.", width="400", height="600" %}
+  <figcaption>
+    "Fast page" label in Chrome on Android.
+  </figcaption>
+</figure>
+
+Layout shifts are frustrating and discourage users from reading more pages, but
+that can be improved by using the appropriate tools, identifying issues, and
+applying best practices. Improving CLS is a chance to improve your business.
+
+For more information, read the
+[Yahoo! JAPAN engineering team's post](https://techblog.yahoo.co.jp/entry/2021022230076263/).
diff --git a/src/site/content/en/blog/yeoman/index.md b/src/site/content/en/blog/yeoman/index.md
new file mode 100644
index 00000000000..e9d6bb69e6a
--- /dev/null
+++ b/src/site/content/en/blog/yeoman/index.md
@@ -0,0 +1,697 @@
+---
+layout: post
+title: Building web apps with Yeoman and Polymer
+subhead: Scaffold your webapps with modern tooling
+authors:
+  - addyosmani
+date: 2013-10-10
+tags:
+  - blog
+---
+
+## Introduction
+
+Allo’ Allo’. Anyone writing a web app knows how important it is to keep oneself productive. It's a challenge when you have to worry about tedious tasks like finding the right boilerplate, setting up a development and testing workflow and minifying and compressing all your sources.
+
+Fortunately modern front-end tooling can help automate much of this, leaving you to focus on writing a kick-ass app. This article will show you how to use [Yeoman](http://yeoman.io), a workflow of tools for web apps to streamline creating apps using [Polymer](http://polymer-project.org), a library of polyfills and sugar for developing apps using [Web Components](http://html5-demos.appspot.com/static/webcomponents/index.html#1).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KpmUdvaxPewJIqbzdH8m.png", alt="Yeoman", width="800", height="741" %}
+</figure>
+
+{% Aside %}
+If you're new to Web Components, I recommend reading the fantastic [docs](http://www.polymer-project.org/getting-started.html) about the web platform features they provide. Guides on how to use them via Polymer are available for [Custom Elements](http://www.polymer-project.org/platform/custom-elements.html), [Shadow DOM](http://www.polymer-project.org/platform/shadow-dom.html), [HTML Imports](http://www.polymer-project.org/platform/html-imports.html) and more.
+{% endAside %}
+
+## Meet Yo, Grunt and Bower
+
+Yeoman is a man in a hat with three tools for improving your productivity:
+
+- [yo](http://yeoman.io) is a scaffolding tool that offers an ecosystem of framework-specific scaffolds, called generators that can be used to perform some of the tedious tasks I mentioned earlier.
+- [grunt](http://gruntjs.com) is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and [grunt-contrib](https://github.com/gruntjs/grunt-contrib).
+- [bower](http://bower.io) is used for dependency management, so that you no longer have to manually download and manage your scripts.
+
+With just a command or two, Yeoman can write boilerplate code for your app (or individual pieces like Models), compile your Sass, minimize and concatenate your CSS, JS, HTML and images and fire up a simple web server in your current directory. It can also run your unit tests and more.
+
+You can install generators from [Node Packaged Modules](http://npmjs.org) (npm) and there are over [220 generators](http://yeoman.io/community-generators.html) now available, many of which have been written by the open-source community. Popular generators include [generator-angular](https://github.com/yeoman/generator-angular), [generator-backbone](https://github.com/yeoman/generator-backbone) and [generator-ember](https://github.com/yeoman/generator-ember).
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/CLISe3G54Uv0ivqJq9zD.png", alt="Yeoman homepage", width="800", height="583" %}
+</figure>
+
+With a recent version of [Node.js](http://nodejs.org) installed, head to your nearest terminal and run:
+
+```shell
+$ npm install -g yo
+```
+
+That's it! You now have Yo, Grunt and Bower and can run them directly from the command-line. Here’s the output of running `yo`:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/c5HA1pi9f2c38SrlJykb.png", alt="Yeoman installation", width="800", height="358" %}
+</figure>
+
+{% Aside %}
+If you’re interested in reading more about how to use Yeoman to write a complete application using other frameworks like Backbone, you may be interested in [Building Apps With The Yeoman Workflow](http://net.tutsplus.com/tutorials/javascript-ajax/building-apps-with-the-yeoman-workflow/).
+{% endAside %}
+
+## Polymer Generator
+
+As I mentioned earlier, Polymer is a library of polyfills and sugar which enables the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/KdEguasjtibQOiOGkp2h.png", alt="Polymer generator hompage", width="800", height="597" %}
+</figure>
+
+<a href="https://github.com/yeoman/generator-polymer">generator-polymer</a> is a new generator that helps you scaffold out Polymer apps using Yeoman, letting you easily create and customize Polymer (custom) elements via the command line, and import them using HTML Imports. This saves you time by writing the boilerplate code for you.
+
+Next, install Polymer’s generator by running:
+
+```shell
+$ npm install generator-polymer -g
+```
+
+That's it.  Now your app has Web Component super-powers!
+
+Our newly installed generator has a few specific bits you’ll have access to:
+
+- `polymer:element` is used to scaffold out new individual Polymer elements. For example: `yo polymer:element carousel`
+- `polymer:app` is used to scaffold your initial index.html, a Gruntfile.js containing build-time configuration for your project as well as Grunt tasks and a folder structure recommended for the project. It will also give you the option of using Sass Bootstrap for your project’s styles.
+
+## Let’s build a Polymer app
+
+We're going to build a simple blog using some custom Polymer elements and our new generator.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/sYx7sIeA15FBWX5GkxYO.png", alt="Polymer app", width="800", height="664" %}
+</figure>
+
+To begin, go to the terminal, make a new directory and cd into it using `mkdir my-new-project && cd $_`. You can now kick-start your Polymer app by running:
+
+```shell
+$ yo polymer
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lFnx4GQEyNi3ObAqPdWK.png", alt="Polymer app building", width="800", height="338" %}
+</figure>
+
+This gets the latest version of Polymer from Bower and scaffolds out an index.html, directory structure and Grunt tasks for your workflow. Why not grab a coffee while we wait for the app to finish getting ready?
+
+Okay, so next we can run `grunt server` to preview what the app looks like:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8y5tiYtk2hck0e4Tn27X.png", alt="Grunt server", width="800", height="478" %}
+</figure>
+
+The server supports LiveReload, meaning you can fire up a text editor, edit a custom element and the browser will reload on save. This gives you a nice real-time view of your app’s current state.
+
+Next, let's create a new Polymer element to represent a Blog post.
+
+```shell
+$ yo polymer:element post
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5B877XHV5vMrHQu2Y9vc.png", alt="Create post element", width="800", height="389" %}
+</figure>
+
+Yeoman asks us a few questions such as whether we would like to include a constructor or use an HTML Import to include the post element in `index.html`. Let's say No to the first two options for now and leave the third option blank.
+
+{% Aside %}
+If we say 'yes' to the second question, the generator imports post.html and includes it in index.html. It also declares `<post-element>` so the element renders on page load.
+{% endAside %}
+
+```shell
+$ yo polymer:element post
+
+[?] Would you like to include constructor=''? No
+
+[?] Import to your index.html using HTML imports? No
+
+[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)
+
+    create app/elements/post.html
+```
+
+This creates a new Polymer element in the `/elements` directory named post.html:
+
+```html
+<polymer-element name="post-element"  attributes="">
+
+    <template>
+
+    <style>
+        @host { :scope {display: block;} }
+    </style>
+
+    <span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
+
+    </template>
+
+    <script>
+
+    Polymer('post-element', {
+
+        //applyAuthorStyles: true,
+
+        //resetStyleInheritance: true,
+
+        created: function() { },
+
+        enteredView: function() { },
+
+        leftView: function() { },
+
+        attributeChanged: function(attrName, oldVal, newVal) { }
+
+    });
+
+    </script>
+
+</polymer-element>
+```
+
+It contains:
+
+- Boilerplate code for your [custom element](http://www.polymer-project.org/platform/custom-elements.html), allowing you to use a custom DOM element type in your page (e.g `<post-element>`)
+- A [template tag](http://www.html5rocks.com/tutorials/webcomponents/template/) for ‘native’ client-side templating and sample [scoped styles](http://www.html5rocks.com/tutorials/webcomponents/shadowdom-201/) for encapsulating the styles of your element
+- Element [registration](http://www.polymer-project.org/polymer.html#element-declaration) boilerplate and [lifecycle events](http://www.polymer-project.org/polymer.html#lifecyclemethods).
+
+### Working with a real source of data
+
+Our blog will need a place to write and read new posts. To demonstrate working with a real data service, we’re going to use the [Google Apps Spreadsheets API](https://developers.google.com/google-apps/spreadsheets/). This allows us to easily read in the content of any spreadsheet created using Google Docs.
+
+Let’s get this set up:
+
+1. In your browser (for these steps, Chrome is recommended) open up [this](https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0) Google Docs Spreadsheet. It contains sample post data under the following fields:
+
+    - ID
+    - Title
+    - Author
+    - Content
+    - Date
+    - Keywords
+    - E-mail (of the author)
+    - Slug (for your post’s slug URL)
+
+1. Go to the **File** menu and select **Make a copy** to create your own copy of the spreadsheet. You are free to edit the content at your leisure, adding or removing posts.
+
+1. Go to the **File** menu once again and select **Publish to the web**.
+
+1. Click **start publishing**
+
+1. Under **Get a link to the published data**, from the last text box, copy the **key** portion of the URL provided. It looks like this: [https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0](https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0)
+
+1. Paste the **key** into the following URL where it says **your-key-goes-here**: **[https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=](https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=)**. An example using the key above might look like [https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script](https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script).
+
+1. You can paste the URL into your browser and navigate to it to view the JSON version of your blog content. Take note of the URL then spend a little time reviewing the format of this data as you will need to iterate over it in order to display it on screen later.
+
+The JSON output in your browser may look a little daunting, but don’t worry!. We’re really only interested in the data for your posts.
+
+The Google Spreadsheets API outputs each of the fields in your blog spreadsheet with a special prefix `post.gsx$`. For example: `post.gsx$title.$t`, `post.gsx$author.$t`, `post.gsx$content.$t` and so on. When we iterate over each “row” in our JSON output, we’ll reference these fields to get back the relevant values for each post.
+
+You can now edit your newly scaffolded post element to [bind](http://www.polymer-project.org/docs/polymer/databinding.html) portions of markup to the data in your spreadsheet. To do so, we introduce an attribute `post`, which will read for the post title, author, content and other fields we created earlier. The `selected` attribute (which we will populate later) is used to only show a post if a user navigates to the correct slug for it.
+
+```html
+<polymer-element name="post-element" attributes="post selected">
+
+    <template>
+
+    <style>
+        @host { :scope {display: block;} }
+    </style>
+
+        <div class="col-lg-4">
+
+            <template if="[[post.gsx$slug.$t === selected]]">
+
+            <h2>
+                <a href="#[[post.gsx$slug.$t]]">
+                [[post.gsx$title.$t  ]]
+                </a>
+            </h2>
+
+            <p>By [[post.gsx$author.$t]]</p>
+
+            <p>[[post.gsx$content.$t]]</p>
+
+            <p>Published on: [[post.gsx$date.$t]]</p>
+
+            <small>Keywords: [[post.gsx$keywords.$t]]</small>
+
+            </template>
+
+        </div>
+
+    </template>
+
+    <script>
+
+    Polymer('post-element', {
+
+        created: function() { },
+
+        enteredView: function() { },
+
+        leftView: function() { },
+
+        attributeChanged: function(attrName, oldVal, newVal) { }
+
+    });
+
+    </script>
+
+</polymer-element>
+```
+
+Next, let's create a blog element which contains both a collection of posts and the layout for your blog by running `yo polymer:element blog`.
+
+```shell
+$ yo polymer:element blog
+
+[?] Would you like to include constructor=''? No
+
+[?] Import to your index.html using HTML imports? Yes
+
+[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html
+
+    create app/elements/blog.html
+```
+
+This time we import the blog into index.html using [HTML imports](http://www.polymer-project.org/platform/html-imports.html) as we would like it to appear in the page. For the third prompt specifically, we specify `post.html` as the element we would like to include.
+
+As before, a new element file is created (blog.html) and added to /elements, this time importing post.html and including `<post-element>` within the template tag:
+
+```html
+<link rel="import" href="post.html">
+
+<polymer-element name="blog-element"  attributes="">
+
+    <template>
+
+    <style>
+        @host { :scope {display: block;} }
+    </style>
+
+    <span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
+
+        <post-element></post-element>
+
+    </template>
+
+    <script>
+
+    Polymer('blog-element', {
+
+        //applyAuthorStyles: true,
+
+        //resetStyleInheritance: true,
+
+        created: function() { },
+
+        enteredView: function() { },
+
+        leftView: function() { },
+
+        attributeChanged: function(attrName, oldVal, newVal) { }
+
+    });
+
+    </script>
+
+</polymer-element>
+```
+
+As we asked for the blog element to be imported using [HTML imports](http://www.polymer-project.org/platform/html-imports.html) (a way to include and reuse HTML documents in other HTML documents) to our index, we can also verify that it has been correctly added to the document `<head>`:
+
+```html
+<!doctype html>
+    <head>
+
+        <meta charset="utf-8">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+        <title></title>
+
+        <meta name="description" content="">
+
+        <meta name="viewport" content="width=device-width">
+
+        <link rel="stylesheet" href="styles/main.css">
+
+        <!-- build:js scripts/vendor/modernizr.js -->
+
+        <script src="bower_components/modernizr/modernizr.js"></script>
+
+        <!-- endbuild -->
+
+        <!-- Place your HTML imports here -->
+
+        <link rel="import" href="elements/blog.html">
+
+    </head>
+
+    <body>
+
+        <div class="container">
+
+            <div class="hero-unit" style="width:90%">
+
+                <blog-element></blog-element>
+
+            </div>
+
+        </div>
+
+        <script>
+        document.addEventListener('WebComponentsReady', function() {
+            // Perform some behaviour
+        });
+        </script>
+
+        <!-- build:js scripts/vendor.js -->
+
+        <script src="bower_components/polymer/polymer.min.js"></script>
+
+        <!-- endbuild -->
+
+</body>
+
+</html>
+```
+
+Fantastic.
+
+### Adding dependencies using Bower
+
+Next, let’s edit our element to use the [Polymer JSONP](https://github.com/Polymer/polymer-elements/tree/master/polymer-jsonp) utility element to read in posts.json. You can either get the adapter by git cloning the repository or installing `polymer-elements` via Bower by running `bower install polymer-elements`.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rLhfQZTcemXKjcvtwVNo.png", alt="Bower dependencies", width="800", height="379" %}
+</figure>
+
+Once you have the utility, you’ll need to include it as an import in your blog.html element with:
+
+```html
+<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
+```
+
+Next, include the tag for it and supply the `url` to our blog posts spreadsheet from earlier, adding `&callback=` to the end:
+
+```html
+<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
+```
+
+{% Aside %}
+If you find yourself stuck, feel free to use my spreadsheet [https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script](https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script) as the value of your URL so you can continue with the tutorial.
+{% endAside %}
+
+With this in place, we can now add templates to iterate over our spreadsheet once it has been read in. The first outputs a table of contents, with a linked title for a post pointing at the slug for it.
+
+```html
+<!-- Table of contents -->
+
+<ul>
+
+    <template repeat="[[post in posts.feed.entry]]">
+
+    <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
+
+    </template>
+
+</ul>
+```
+
+The second renders one instance of `post-element` for each entry found, passing the post content through to it accordingly. Notice that we’re passing through a `post` attribute representing the post content for a single spreadsheet row and a `selected` attribute which we will populate with a route.
+
+```html
+<!-- Post content -->
+
+<template repeat="[[post in posts.feed.entry]]">
+
+    <post-element post="[[post]]" selected="[[route]]"></post-element>
+
+</template>
+```
+
+The `repeat` attribute you see being used in our template creates and maintains an instance with [[ bindings ]] for every element in the array collection of our posts, when it is provided.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/8CnsYnqdA7RiZTcTnn7W.png", alt="Polymer app", width="800", height="457" %}
+</figure>
+
+Now in order for us to get the current [[route]] populated, we’re going to cheat and use a library called Flatiron director which binds to [[route]] whenever the URL hash changes.
+
+Thankfully there’s a [Polymer element](https://github.com/Polymer/more-elements/tree/master/flatiron-director) (part of the [more-elements](https://github.com/Polymer/more-elements) package) that we can grab for it. Once copied to the /elements directory, we can reference it with `<flatiron-director route="[[route]]" autoHash></flatiron-director>`, specifying `route` as the property we wish to bind to and tell it to automatically read the value of any hash changes (autoHash).
+
+Putting everything together we now get:
+
+```html
+    <link rel="import" href="post.html">
+
+    <link rel="import" href="polymer-jsonp/polymer-jsonp.html">
+
+    <link rel="import" href="flatiron-director/flatiron-director.html">
+
+    <polymer-element name="blog-element"  attributes="">
+
+      <template>
+
+        <style>
+          @host { :scope {display: block;} }
+        </style>
+
+        <div class="row">
+
+          <h1><a href="/#">My Polymer Blog</a></h1>
+
+          <flatiron-director route="[[route]]" autoHash></flatiron-director>
+
+          <h2>Posts</h2>
+
+          <!-- Table of contents -->
+
+          <ul>
+
+            <template repeat="[[post in posts.feed.entry]]">
+
+              <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
+
+            </template>
+
+          </ul>
+
+          <!-- Post content -->
+
+          <template repeat="[[post in posts.feed.entry]]">
+
+            <post-element post="[[post]]" selected="[[route]]"></post-element>
+
+          </template>
+
+        </div>
+
+        <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
+
+      </template>
+
+      <script>
+
+        Polymer('blog-element', {
+
+          created: function() {},
+
+          enteredView: function() { },
+
+          leftView: function() { },
+
+          attributeChanged: function(attrName, oldVal, newVal) { }
+
+        });
+
+      </script>
+
+    </polymer-element>
+```
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/MXeOmOGy9BDkzNqmmJNN.png", alt="Polymer App", width="800", height="635" %}
+</figure>
+
+Woo! We now have a simple blog that's reading data from JSON and using two Polymer elements scaffolded with Yeoman.
+
+### Working with 3rd party elements
+
+The element ecosystem around Web Components has been growing lately with component gallery sites like [customelements.io](http://customelements.io/) beginning to appear. Looking through the elements created by the community, I found one for fetching [gravatar profiles](https://github.com/djalmaaraujo/gravatar-element) and we can actually grab and add it to our blog site too.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/GVdMm7i2VwAgBR3iGfFC.png", alt="Custom elements homepage", width="800", height="560" %}
+</figure>
+
+Copy the gravatar element sources to your `/elements` directory, include it via HTML imports in post.html and then add <gravatar-element> to your template, passing in the email field from our spreadsheet as the source of the username. Boom!
+
+```html
+<link rel="import" href="gravatar-element/src/gravatar.html">
+
+<polymer-element name="post-element" attributes="post selected">
+
+    <template>
+
+    <style>
+        @host { :scope {display: block;} }
+    </style>
+
+        <div class="col-lg-4">
+
+            <template if="[[post.gsx$slug.$t === selected]]">
+
+            <h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>
+
+            <p>By [[post.gsx$author.$t]]</p>
+
+            <gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>
+
+            <p>[[post.gsx$content.$t]]</p>
+
+            <p>[[post.gsx$date.$t]]</p>
+
+            <small>Keywords: [[post.gsx$keywords.$t]]</small>
+
+            </template>
+
+        </div>
+
+    </template>
+
+    <script>
+
+    Polymer('post-element', {
+
+        created: function() { },
+
+        enteredView: function() { },
+
+        leftView: function() { },
+
+        attributeChanged: function(attrName, oldVal, newVal) { }
+
+    });
+
+    </script>
+
+</polymer-element>
+```
+
+Let’s take a look at what this gives us:
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FsMsZGDViaUkyzHwq0Na.png", alt="Polymer app with custom elements", width="800", height="646" %}
+</figure>
+
+Beautiful!
+
+In a relatively short time, we've created a simple application composed of several web components without having to worry about writing boilerplate code, manually downloading dependencies or setting up a local server or build workflow.
+
+### Optimizing your application
+
+The Yeoman workflow includes another open-source project called <a href="http://gruntjs.com">Grunt</a> - a task runner that can run a number of build-specific tasks (defined in a Gruntfile) to produce an optimized version of your application. Running `grunt` on its own will execute a `default` task the generator has setup for linting, testing and building:
+
+```js
+grunt.registerTask('default', [
+
+    'jshint',
+
+    'test',
+
+    'build'
+
+]);
+```
+
+The `jshint` task above will check with your `.jshintrc` file to learn your preferences, then run it against all of the JavaScript files in your project. To get the full run down of your options with JSHint, check [the docs](http://www.jshint.com/docs/#options).
+
+The `test` task looks a little like this, and can create and serve your app for the test framework we recommend out of the box, Mocha. It will also execute your tests for you:
+
+```js
+grunt.registerTask('test', [
+
+    'clean:server',
+
+    'createDefaultTemplate',
+
+    'jst',
+
+    'compass',
+
+    'connect:test',
+
+    'mocha'
+
+]);
+```
+
+As our app in this case is fairly simplistic, we'll leave writing tests up to you as a separate exercise. There are a few other things we'll need to have our build process handle, so let's take a look at what the `grunt build` task defined in our `Gruntfile.js` will do:
+
+```js
+grunt.registerTask('build', [
+
+    'clean:dist',    // Clears out your .tmp/ and dist/ folders
+
+    'compass:dist',  // Compiles your Sassiness
+
+    'useminPrepare', // Looks for <!-- special blocks --> in your HTML
+
+    'imagemin',      // Optimizes your images!
+
+    'htmlmin',       // Minifies your HTML files
+
+    'concat',        // Task used to concatenate your JS and CSS
+
+    'cssmin',        // Minifies your CSS files
+
+    'uglify',        // Task used to minify your JS
+
+    'copy',          // Copies files from .tmp/ and app/ into dist/
+
+    'usemin'         // Updates the references in your HTML with the new files
+
+]);
+```
+
+Run `grunt build` and a production ready version of your app should be built, ready for you to ship. Let’s try it out.
+
+<figure>
+{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rmcqUgIwXA1fDJ71epMq.png", alt="Grunt build", width="800", height="543" %}
+</figure>
+Success!
+
+If you get stuck, a pre-built version of polymer-blog is available for you to check out [https://github.com/addyosmani/polymer-blog](https://github.com/addyosmani/polymer-blog).
+
+{% Aside %}
+The most common issues users run into with Yeoman, Grunt and Bower are related to not having the sufficient administrator permissions. Ensure you’ve followed the [recommended](https://gist.github.com/isaacs/579814) installation steps for Node and NPM.
+{% endAside %}
+
+### What more do we have in store?
+
+Web Components are still in a state of evolution and as such so is the tooling around them.
+
+We’re currently looking at how one might go about concatenating their HTML imports for improved loading performance via projects like [Vulcanize](https://github.com/Polymer/labs/tree/master/vulcanize) (a tool by the Polymer project) and how the ecosystem for components might work with a package manager like Bower.
+
+We’ll let you know as and when we have better answers to these questions, but there are lots of exciting times ahead.
+
+### Installing Polymer standalone with Bower
+
+If you would prefer a lighter start to Polymer, you can install it standalone directly from Bower by running:
+
+```shell
+bower install polymer
+```
+
+which will add it to your bower_components directory. You can then reference it in your application index manually and rock the future.
+
+## What do you think?
+
+Now you know how to scaffold out a Polymer app using Web Components with Yeoman. If you have feedback on the generator, please do let us know in the comments or file a bug or post to the Yeoman issue tracker. We would love to know if there is anything else you would like to see the generator do better as it's only through your use and feedback that we can improve :)
+
diff --git a/src/site/content/en/blog/youtube-media-capabilities/hero.jpg b/src/site/content/en/blog/youtube-media-capabilities/hero.jpg
deleted file mode 100644
index 4c11d17ea45..00000000000
Binary files a/src/site/content/en/blog/youtube-media-capabilities/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/blog/youtube-media-capabilities/index.md b/src/site/content/en/blog/youtube-media-capabilities/index.md
index 7c1e521edce..5d2143564e6 100644
--- a/src/site/content/en/blog/youtube-media-capabilities/index.md
+++ b/src/site/content/en/blog/youtube-media-capabilities/index.md
@@ -4,7 +4,7 @@ subhead: Ensuring buttery smooth video playback across all devices.
 authors:
   - beaufortfrancois
 date: 2019-06-12
-hero: hero.jpg
+hero: image/admin/cuUZo9Ed6tzFgwRxbFgF.jpg
 hero_position: top
 alt: Youtube application screenshot
 description: |
diff --git a/src/site/content/en/blog/zalando/index.md b/src/site/content/en/blog/zalando/index.md
new file mode 100644
index 00000000000..f657fdc071c
--- /dev/null
+++ b/src/site/content/en/blog/zalando/index.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: How Zalando reduced performance feedback time from 1 day to 15 minutes with Lighthouse CI
+subhead: |
+  The web team at Zalando found that integrating Lighthouse CI enabled a proactive approach to performance,
+  with automated status checks able to compare the current commit to the main branch to prevent performance regressions.
+description: |
+  The web team at Zalando found that integrating Lighthouse CI enabled a proactive approach to performance,
+  with automated status checks able to compare the current commit to the main branch to prevent performance regressions.
+authors:
+  - jcolin
+  - jbrockmeyer
+date: 2021-04-13
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/D3aV6VLiccC31BJIwo3z.jpg
+alt: Zalando web store on laptop, phone, and tablet.
+thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/CWMTBHzJ9UCpZ89fNcxJ.jpg
+tags:
+  - blog
+  - web-vitals
+  - case-study
+---
+
+{% Aside %}
+  This case study was authored by Jeremy Colin and Jan Brockmeyer from the Zalando web infrastructure team.
+{% endAside %}
+
+With more than 35 million active customers,
+[Zalando](https://www.zalando.com) is Europe's leading online fashion platform.
+In this post we explain why we started to use Lighthouse CI,
+the ease of implementation,
+and the advantages to our team.
+
+At Zalando, we know the relationship between website performance and revenue.
+In the past,
+[we tested how artificially increasing the loading time on Catalog pages](https://engineering.zalando.com/posts/2018/06/loading-time-matters.html)
+affected bounce rates,
+conversion rates, and revenue per user.
+The results were clear.
+A 100 milliseconds page load time improvement led to increased engagement with lower bounce rate and a 0.7% uplift in revenue per session.
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">100<sub>ms</sub></p>
+    <p>Page load time improvement</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">0.7<sub>%</sub></p>
+    <p>Increased revenue per session</p>
+  </div>
+</div>
+
+## Company buy-in does not always translate to performance
+
+Despite the strong performance buy-in inside the company,
+if performance is not set as a product delivery criteria
+it can easily slip away. When we were redesigning Zalando website in 2020
+we focused on delivering
+[new features](https://corporate.zalando.com/en/newsroom/news-stories/zalando-sets-out-revolutionize-pre-owned-fashion-europe)
+while  maintaining excellent user experience and applying a facelift
+to the website with custom fonts and more vibrant colors.
+However, when the redesigned website and app were ready for release,
+early adopter metrics revealed that the new version was slower.
+First Contentful Paint was up to 53% slower,
+and our measured Time to Interactive reported up to 59% slower.
+
+## The web at Zalando
+
+The Zalando website is created by a core team developing a framework,
+[with over 15 feature teams contributing frontend microservices](https://engineering.zalando.com/posts/2021/03/micro-frontends-part1.html).
+While supporting the new release,
+we also transitioned part of our website to a more centralized architecture.
+
+The previous architecture called [Mosaic](https://www.mosaic9.org/)
+included a way to measure page performance with in-house metrics.
+However, it was difficult to compare performance metrics prior to rolling out to real users
+as we lacked internal lab performance monitoring tools.
+Despite deploying every day,
+there was a feedback loop of around one day for developers working on performance improvements.
+
+## Web Vitals and Lighthouse to the rescue
+
+We were not entirely satisfied with our in-house metrics as they did not adapt well to our new setup.
+More importantly, they were not centered on customer experience.
+We switched to [Core Web Vitals](/vitals/)
+as they provided a condensed, yet comprehensive and user-centric set of metrics.
+
+In order to improve the performance before the release,
+we needed to create a proper
+[lab environment](/how-to-measure-speed/#lab-data-vs-field-data).
+This provided reproducible measurements,
+in addition to testing conditions representing our 90th percentile of field data.
+Now, engineers working on performance improvements knew where to focus their
+efforts to make the biggest impact.
+We were already using Lighthouse audit reports locally.
+So our first iteration was to develop a service based on [Lighthouse node module](https://github.com/GoogleChrome/lighthouse#using-the-node-module),
+where changes could be tested from our staging environment.
+This gave us a reliable performance feedback loop of around one hour,
+which enabled us to bring the performance on par and save our release!
+
+## Giving performance feedback to developers on pull requests
+
+We did not want to stop there,
+as we wanted to take the opportunity to not only be reactive towards performance but also proactive.
+Making the jump from Lighthouse node module to [Lighthouse CI (LHCI) server](/lighthouse-ci/)
+was not too difficult.
+We opted for the self hosted solution in order to give us a a better integration with our existing company services.
+Our LHCI server application gets built as a Docker image,
+which is then deployed to our Kubernetes cluster together with a PostgreSQL database, and reports to our GitHub.
+
+Our framework was already providing some performance feedback to developers&mdash;
+component bundle sizes were being compared to threshold values on every commit.
+Now we are able to report Lighthouse metrics as GitHub status checks.
+These cause the CI pipeline to fail if they do not meet the performance thresholds,
+with a link to the detailed Lighthouse reports as shown in the following images.
+
+<figure>
+  {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/vPqK9LEp3dKrHSSqULRe.png", alt="Image of GitHub UI showing lines of successful checks.", width="800", height="126" %}
+  <figcaption>Lighthouse CI GitHub status checks make it easy for developers
+    to understand the regression and address it before it reaches production.</figcaption>
+</figure>
+
+
+<figure>
+  {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/PRQBzVBLG7wG1Ftngp6B.png", alt="Comparison image in Lighthouse CI showing how the commit compares to the main branch", width="800", height="370" %}
+  <figcaption>Lighthouse CI detailed commit report compared to the main branch.</figcaption>
+</figure>
+
+## Extending the performance coverage
+
+We started with a very pragmatic approach.
+Currently Lighthouse only runs on two of our most important pages:
+the home page and product detail page.
+Fortunately, Lighthouse CI makes it easy to extend the run configurations.
+Feature teams working on specific pages of our website are able to set up their matching URL pattern and assertions.
+With this in place, we are pretty confident that our performance coverage will increase.
+
+We are now much more confident when building larger releases,
+and developers can enjoy a much shorter feedback loop on the performance of their code.
diff --git a/src/site/content/en/blog/zdf/index.md b/src/site/content/en/blog/zdf/index.md
new file mode 100644
index 00000000000..628fab29401
--- /dev/null
+++ b/src/site/content/en/blog/zdf/index.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: How ZDF created a video PWA with offline and dark mode
+subhead: >
+  Learn how ZDF created a progressive web app (PWA) with modern
+  features like offline support, installability, and dark mode.
+authors:
+  - scottfriesen
+  - martinschierle
+date: 2020-10-07
+hero: image/admin/8NYB8FoRFfEIIurhIwsS.jpg
+alt: A person looking at the ZDF PWA on a smartphone.
+description: >
+  Learn how ZDF created a progressive web app (PWA) with modern features
+  like offline support, installability, and dark mode.
+tags:
+  - blog
+  - case-study
+  - capabilities
+  - progressive-web-apps
+---
+
+When broadcaster ZDF was considering redesigning their frontend technology
+stack, they decided to take a closer look at [Progressive Web Apps](/pwa/) for their
+streaming site [ZDFmediathek](https://pwa.zdf.de/). Development agency
+[Cellular](https://www.cellular.de/) took on the challenge to build a web-based
+experience that is on par with ZDF's platform-specific iOS and Android apps. The
+PWA offers installability, offline video playback, transition animations, and a
+dark mode.
+
+## Adding a service worker
+
+A key feature of a PWA is offline support. For ZDF most of the heavy lifting is done by
+[Workbox](/workbox/), a set of libraries
+and Node modules that make it easy to support different caching strategies. The
+ZDF PWA is built with TypeScript and React, so it uses the Workbox library
+already built into
+[create-react-app](https://reactjs.org/docs/create-a-new-react-app.html) to
+precache static assets. This lets the application focus on making the dynamic
+content available offline, in this case the videos and their metadata.
+
+The basic idea is quite simple: fetch the video and store it as a blob in
+IndexedDB. Then during playback, listen for online/offline events, and switch to
+the downloaded version when the device goes offline.
+
+Unfortunately things turned out to be a little more complex. One of the project
+requirements was to use the official ZDF web player which doesn't provide any
+offline support. The player takes a content ID as input, talks to the ZDF API,
+and plays back the associated video.
+
+This is where one of the web's most powerful features comes to the rescue:
+[service workers](/service-worker-mindset/).
+
+The service worker can intercept the various requests done by the player and
+respond with the data from IndexedDB. This transparently adds offline
+capabilities without having to change a single line of the player's code.
+
+Since offline videos tend to be quite large, a big question is how many of them
+can actually be stored on a device. With the help of the [StorageManager
+API](/storage-for-the-web/#how-much) the app can estimate the
+available space and inform the user when there is insufficient space before even
+starting the download. Unfortunately Safari isn't on the list of browsers
+implementing this API and at the time of writing there wasn't much up-to-date
+information about how other browsers applied quotas. Therefore, the team wrote a
+[small utility](https://cellular.github.io/quota) to test the behavior on
+various devices. By now a [comprehensive
+article](/storage-for-the-web/) exists that sums up all the
+details.
+
+## Adding a custom install prompt
+
+The ZDF PWA offers a custom in-app installation flow and prompts users to
+install the app as soon as they want to download their first video. This is a
+good point in time to prompt for install because the user has expressed a clear intention to
+use the app offline.
+
+<figure>
+  <div class="switcher">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sj4J2JMlYdgf4BrhaRsT.jpg", alt="Custom invitation to install.", width="800", height="1595" %}
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FT4Xt5xpjCp57C8BwLtn.jpg", alt="Custom install prompt being triggered when downloading a video for offline consumption.", width="800", height="1595" %}
+  </div>
+  <figcaption>Custom install prompt being triggered when downloading a video for offline consumption.</figcaption>
+</figure>
+
+## Building an offline page to access downloads
+
+When the device is not connected to the internet and the user navigates to a
+page that is not available in offline mode, a special page is shown instead that
+lists all videos that have previously been downloaded or (in case no content has
+been downloaded yet) a short explanation of the offline feature.
+
+<figure>
+  <div class="switcher">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FcWDhtuSSpHg04krFqUD.png", alt="Offline page showing all content available for watching offline.", width="800", height="1418" %}
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PUvFyyaVfhh7PFyXDwCo.png", alt="Offline page showing that no content is available for watching offline.", width="800", height="1423" %}
+  </div>
+  <figcaption>Offline page showing all content available for watching offline.</figcaption>
+</figure>
+
+## Using frame loading rate for adaptive features
+
+To offer a rich user experience the ZDF PWA includes some subtle transitions
+that happen when the user scrolls or navigates. On low-end devices such
+animations usually have the opposite effect and make the app feel sluggish and
+less responsive if they don't run at 60 frames per second. To take this into
+account the app measures the actual frame rate via `requestAnimationFrame()` while
+the application loads and disables all animations when the value drops below a
+certain threshold.
+
+```js
+const frameRate = new Promise(resolve => {
+  let lastTick;
+  const samples = [];
+
+  function measure() {
+    const tick = Date.now();
+    if (lastTick) samples.push(tick - lastTick);
+    lastTick = tick;
+    if (samples.length < 20) requestAnimationFrame(measure);
+    else {
+      const avg = samples.reduce((a, b) => a + b) / samples.length;
+      const fps = 1000 / avg;
+      resolve(fps);
+    }
+  }
+  measure();
+});
+```
+
+Even if this measurement provides only a rough indication of the device's
+performance and varies on each load, it was still a good basis for
+decision-making. It's worth mentioning that depending on the use case there are
+[other techniques for adaptive loading](/adaptive-loading-with-service-workers/)
+that developers can implement. One great advantage of this approach is that it
+is available on all platforms.
+
+## Dark mode
+
+A popular feature for modern mobile experiences is
+[dark mode](/prefers-color-scheme/).
+Especially when
+watching videos in low ambient light many people prefer a dimmed UI. The ZDF PWA
+not only provides a switch that allows users to toggle between a light and a
+dark theme, it also reacts to changes of the OS-wide color preferences. This way
+the app will automatically change its appearance on devices that have set up a
+schedule to change the theme base on the time of day.
+
+## Results
+
+The new progressive web app was silently launched as a public beta in March 2020
+and has received a lot of positive feedback since then. While the beta phase
+continues, the PWA still runs under its own temporary domain. Even though the
+PWA wasn't publicly promoted there is a steadily growing number of users. Many
+of these are from the Microsoft Store which allows Windows 10 users to discover
+PWAs and install them like platform-specific apps.
+
+## What's next?
+
+ZDF plans to continue adding features to their PWA, including login for
+personalization, cross-device and platform viewing, and push notifications.
diff --git a/src/site/content/en/chrometober-2022/index.njk b/src/site/content/en/chrometober-2022/index.njk
new file mode 100644
index 00000000000..ea4efcdd74a
--- /dev/null
+++ b/src/site/content/en/chrometober-2022/index.njk
@@ -0,0 +1,13 @@
+---
+layout: 'base'
+---
+{# This is the standard layout that most pages will use. #}
+<a href="#main" class="skip-link button" data-type="primary">{{ 'i18n.common.skip_link' | i18n(locale) }}</a>
+{% include 'partials/site-header.njk' %}
+<main id="main">
+  {% if show_banner %}
+    {% include 'partials/banner.njk' %}
+  {% endif %}
+  <iframe title="Chrometober 2022. Scroll horizontally to navigate" tabindex="0" style="width: 100%; max-width: 100%; min-height: 480px; aspect-ratio: 16 / 10; max-height: 90vh;" src="/third_party/chrometober-2022/chrometober.html"></iframe>
+</main>
+{% include 'partials/site-footer.njk' %}
\ No newline at end of file
diff --git a/src/site/content/en/demo/url-parts/index.njk b/src/site/content/en/demo/url-parts/index.njk
new file mode 100644
index 00000000000..5e5ea69fdf7
--- /dev/null
+++ b/src/site/content/en/demo/url-parts/index.njk
@@ -0,0 +1,82 @@
+
+<!DOCTYPE html>
+
+<!-- Copyright 2023 Google LLC.
+SPDX-License-Identifier: Apache-2.0 -->
+
+<html lang="en">
+
+<head>
+
+  <title>URL parts</title>
+
+  <link rel="apple-touch-icon" href="images/icons/icon180.png">
+  <link rel="shortcut icon" href="images/icons/icon72.png">
+  <link href="favicon.ico" rel="shortcut icon">
+
+  <link rel="canonical" href="https://url-parts.glitch.me">
+  <!-- <link rel="manifest" href="manifest.json"> -->
+
+  <link rel="stylesheet" href="/third_party/demo/url-parts/css/main.css">
+
+  {% include 'partials/script-loader.njk' %}
+  {% set scripts %}
+    loadScript('/third_party/demo/url-parts/js/main.js', 'module');
+  {% endset %}
+  <script>{{ scripts | minifyJs | cspHash | safe }}</script>
+
+
+  <meta charset="utf-8">
+  <meta id="theme-color" name="theme-color" content="#fff">
+  <meta itemprop="image" content="images/icons/icon192.png">
+  <meta itemprop="name" content="Interactive tool for showing the names of URL components">
+  <meta name="author" content="https://samdutton.com">
+  <meta name="description" content="Interactive tool for showing the names of URL components">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:image" content="https://url-parts.glitch.me/images/icons/icon256.png">
+  <meta property="og:site_name" content="url-parts.glitch.me">
+  <meta property="og:title" content="url-parts.glitch.me">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://url-parts.glitch.me">
+
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org/",
+      "@type": "Organization",
+      "name": "url-parts.glitch.me",
+      "logo": "https://url-parts.glitch.me/images/icons/icon256.png",
+      "url": "https://url-parts.glitch.me"
+    }
+  </script>
+
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@type": "WebSite",
+      "name": "url-parts.glitch.me",
+      "url": "https://url-parts.glitch.me"
+    }
+  </script>
+
+  <base target="_blank">
+
+</head>
+
+<body>
+
+  <main>
+
+<!--     <h1>URL parts</h1>
+ -->
+    <div id="container">
+<!--       <p>View the site, origin, and other parts of a URL.</p> -->
+      <label for="url">URL:</label>
+      <input id="url" autofocus autocomplete="off" autocapitalize="off" value="https://foo.com.au:1234/bar/foo.html#bar">
+      <div id="url-parts"></div>
+    </div>
+
+  </main>
+
+</body>
+
+</html>
diff --git a/src/site/content/en/design-system/colors.njk b/src/site/content/en/design-system/colors.njk
new file mode 100644
index 00000000000..4db13f7344d
--- /dev/null
+++ b/src/site/content/en/design-system/colors.njk
@@ -0,0 +1,115 @@
+---
+permalink: '/design-system/colors/index.html'
+title: 'Colors'
+---
+
+{% extends "design-system.njk" %}{% set title = 'Colors' %}{% set summary %}
+You can either use colors directly, using a Sass function or CSS Custom
+Property, or more preferably, use the theme mechanism which abstracts color
+design tokens into usage contexts to help you work with light and dark mode.
+
+{% endset %}
+{% block inner %}
+<nav class="cluster" aria-label="table of contents">
+  <a href="#design-tokens">Design tokens</a>
+  <a href="#theme-usage">Theme usage</a>
+</nav>
+
+<h2 id="design-tokens">Design tokens</h2>
+<p>Colors that are set with design tokens, which are located here: <code>src/site/_data/design/tokens.json</code>.</p>
+{% for group in design.tokens.colors %}
+  {% if group.group != 'Backgrounds' %}
+  <h3>{{ group.group }}</h3>
+  <div class="table-wrapper breakout scrollbar">
+    <table>
+      <thead>
+        <tr>
+          <th>Name and codes</th>
+          <th>Sass function</th>
+          <th>Custom Property</th> 
+          <th>Color Utility Class</th>
+          <th>BG Utility Class</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for color in group.items %}
+          <tr>
+            <td>
+              <div class="cluster flex-align-center gutter-base" style="flex-wrap: nowrap">
+                <div class="design-system__swatch" style="background: {{ color.value }}" role="presentation"></div>
+                <div>
+                  <h4>{{ color.name }}</h4>
+                  <p class="color-mid-text font-mono text-base">{{ color.value }}</p>
+                </div>
+              </div>
+            </td>
+            <td><code>get-color('{{ group.group | slug }}-{{ color.name | slug }}')</code></td>
+            <td><code>var('--color-{{ group.group | slug }}-{{ color.name | slug }}')</code></td>
+            <td><code>.t-color-{{ group.group | slug }}-{{ color.name | slug }}</code></td>
+            <td><code>.t-bg-{{ group.group | slug }}-{{ color.name | slug }}</code></td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% endif %}
+{% endfor %}
+
+<h2 id="theme-usage">Theme usage</h2>
+<p>Colors that are set with themes (dark/light), which are located here: <code>src/site/_data/design/themes.js</code>.</p>
+<p>Go ahead and <a href="#theme-toggle">toggle the current theme</a> to see how they change.</p>
+<h3>Backgrounds</h3>
+
+<div class="table-wrapper breakout scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+        <th>Utility class</th>
+        <th>Sass mixin</th>
+        <th>Sass function</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for background in design.themes.backgroundUtilities %}
+        <tr>
+          <td>
+            <div class="design-system__swatch {{ background.utilityClass }}" role="presentation"></div>
+          </td>
+          <td><code>{{ background.utilityClass }}</code></td>
+          <td><code>{{ background.sassMixin }}</code></td>
+          <td><code>{{ background.sassFunction }}</code></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+<h3>Text Colors</h3>
+
+<div class="table-wrapper breakout scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+        <th>Utility class</th>
+        <th>Sass mixin</th>
+        <th>Sass function</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for text in design.themes.textUtilities %}
+        <tr>
+          <td>
+            <div class="font-mono {{ text.utilityClass }}" role="presentation">Sample</div>
+          </td>
+          <td><code>{{ text.utilityClass }}</code></td>
+          <td><code>{{ text.sassMixin }}</code></td>
+          <td><code>{{ text.sassFunction }}</code></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/site/content/en/design-system/components-preview.njk b/src/site/content/en/design-system/components-preview.njk
new file mode 100644
index 00000000000..3e5a4d5eb29
--- /dev/null
+++ b/src/site/content/en/design-system/components-preview.njk
@@ -0,0 +1,53 @@
+---
+title: 'Preview'
+pagination:
+  data: design.components.previews
+  size: 1
+  addAllPagesToCollections: true
+  alias: item
+permalink: '{{ item.previewUrl }}/index.html'
+pageScripts:
+  - '/js/design-system.js'
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include 'partials/head.njk' %}
+
+    <style>
+      /* Extra padding for theme toggle */
+      body {
+        padding: 1rem 1rem 5rem 1rem;
+      }
+
+      .theme-toggle {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        padding: 1rem;
+        z-index: 10;
+        background: var(--color-mid-bg);
+      }
+
+      {{ item.data.extraSampleCSS }}
+    </style>
+  </head>
+  <body>
+    <div class="preview">
+      {{ item.rendered | safe }}
+    </div>
+    <div class="theme-toggle">
+      {% include "partials/standard-theme-toggle.njk" %}
+    </div>
+    <!-- Sets a specific state for windowed previews -->
+    <script>
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      const params = Object.fromEntries(urlSearchParams.entries());
+
+      const state = params.state || '';
+
+      document.documentElement.setAttribute('data-state', state);
+    </script>
+  </body>
+</html>
diff --git a/src/site/content/en/design-system/components.11tydata.js b/src/site/content/en/design-system/components.11tydata.js
new file mode 100644
index 00000000000..1b304fad081
--- /dev/null
+++ b/src/site/content/en/design-system/components.11tydata.js
@@ -0,0 +1,6 @@
+module.exports = {
+  eleventyComputed: {
+    title: ({item}) => `${item.data.title} - web.dev Design System Component`,
+    summary: ({item}) => item.data.summary || '',
+  },
+};
diff --git a/src/site/content/en/design-system/components.njk b/src/site/content/en/design-system/components.njk
new file mode 100644
index 00000000000..d0c23e61f88
--- /dev/null
+++ b/src/site/content/en/design-system/components.njk
@@ -0,0 +1,58 @@
+---
+pagination:
+  data: design.components.items
+  size: 1
+  addAllPagesToCollections: true
+  alias: item
+permalink: '{{ item.url }}/index.html'
+pageScripts:
+  - '/js/design-system.js'
+---
+
+{% from 'macros/design-system-component.njk' import designSystemComponent with context %}
+
+{% set pageTitle = item.data.title ~ ' - Component' %}
+{% extends "design-system.njk" %}
+
+{% block inner %}
+  
+  {% if item.variants | length %}
+  <nav class="cluster" aria-label="variants">
+    {% for variant in item.variants %}
+      <a href="#{{ variant.data.title | slug }}">{{ variant.data.title }}</a>
+    {% endfor %}
+  </nav>
+  {% endif %}
+
+  <div class="breakout pad-block-size-2"> 
+    {{ designSystemComponent(item.previewUrl, item.markup, item.rendered, item.handle) }}  
+  </div>
+
+  {% if item.docs %}
+  <article class="flow">
+    <h2>Information</h2>
+    {{ item.docs | md | safe }}
+    {% if item.data.keyLinks | length %}
+      <h3>Key links</h3>
+      <ul>
+        {% for link in item.data.keyLinks %}
+        <li>
+          <a href="{{ link.url }}">{{ link.label }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+  </article>
+  {% endif %}
+
+  {% if item.variants | length %}
+    <h2>Variants</h2>
+    {% for variant in item.variants %}
+    <h3 id="{{ variant.data.title | slug }}">{{ variant.data.title }}</h3>
+    <div class="breakout gap-top-size-1">
+      {{ designSystemComponent(variant.previewUrl, variant.markup, variant.rendered, variant.handle) }} 
+    </div>
+    {% endfor %}
+  {% endif %}
+{% endblock %}
+
diff --git a/src/site/content/en/design-system/css-compositions.njk b/src/site/content/en/design-system/css-compositions.njk
new file mode 100644
index 00000000000..aaa7b490752
--- /dev/null
+++ b/src/site/content/en/design-system/css-compositions.njk
@@ -0,0 +1,495 @@
+---
+title: 'CSS Compositions'
+permalink: '/design-system/css-compositions/index.html'
+---
+
+{% extends "design-system.njk" %}
+
+<!-- prettier-ignore -->
+{% block inner %}
+<p>
+  These are flexible, compositional layouts that follow the
+  <a href="https://cube.fyi/composition.html">CUBE CSS composition principles</a
+  >.
+</p>
+
+<h2>Configuration</h2>
+<p>
+  If you want to change the value of a custom property, you can either set a
+  value in your context, or target the composition itself (E.G
+  <code>.sidebar</code>) for extra specificity.
+</p>
+<p>
+  The default values are fallbacks for custom properties, so are easily
+  overridden.
+</p>
+
+<h2>Gutters and Spacing</h2>
+<p>
+  All compositions use a consistent <code>--gutter</code> Custom Property to
+  manage spacing between items. You can either set a value for this in context,
+  just like in the configuration section above, or you can use the
+  <code>gutter</code> utility classes.
+</p>
+
+<p>
+  For example, you could increase the gutter on the sidebar like this:
+  <code>&lt;div class=&quot;sidebar gutter-size-2&quot;&gt;</code>.
+</p>
+
+<h2>Justification and alignment</h2>
+
+<p>
+  Each composition has a vertical and horizontal alignment Custom Property
+  <strong>if applicable</strong>, but you can also use the
+  <code>flex-align</code> and <code>flex-justify</code> utility classes like
+  this: <code>&lt;div class=&quot;repel flex-align-center&quot;&gt;</code>.
+</p>
+
+<hr />
+
+<h2 id="auto-grid">Auto Grid</h2>
+<p><code>.auto-grid</code></p>
+
+<p>
+  A flexible layout that will create an auto-fill grid with configurable grid
+  item sizes.
+</p>
+
+<h3>Configuration</h3>
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--gutter</code></td>
+        <td><code>$global-gutter</code></td>
+        <td>This defines the space between each item.</td>
+      </tr>
+      <tr>
+        <td><code>--auto-grid-min-item-size</code></td>
+        <td><code>20rem</code></td>
+        <td>How large each item should be, as a minimum</td>
+      </tr>
+      <tr>
+        <td><code>--auto-grid-placement</code></td>
+        <td><code>auto-fill</code></td>
+        <td>
+          Set either auto-fit or auto-fill to change how empty grid tracks are
+          handled
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<div class="breakout gap-top-size-1">
+  <div class="auto-grid">
+    <div class="bg-mid-bg pad-size-1">Item 1</div>
+    <div class="bg-mid-bg pad-size-1">Item 2</div>
+    <div class="bg-mid-bg pad-size-1">Item 3</div>
+    <div class="bg-mid-bg pad-size-1">Item 4</div>
+    <div class="bg-mid-bg pad-size-1">Item 5</div>
+    <div class="bg-mid-bg pad-size-1">Item 6</div>
+    <div class="bg-mid-bg pad-size-1">Item 7</div>
+    <div class="bg-mid-bg pad-size-1">Item 8</div>
+  </div>
+</div>
+
+<h3 id="breakout">Breakout</h3>
+<p><code>.breakout</code></p>
+
+<p>
+  A layout that allows you to break a an element out of the
+  bounds of its parent, with a sensible lock to prevent it bleeding out.
+</p>
+
+<h3>Configuration</h3>
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--breakout-max-width</code></td>
+        <td><code>65rem</code></td>
+        <td>This defines the maximum width of the element.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<div class="region bg-mid-bg">
+  <div class="breakout">
+    <div class="region pad-inline-size-1 bg-reversed-bg color-reversed-text ta-center">I am a breakout element and bleed out of my parent's bounds.</div>
+  </div>
+</div>
+
+<h2 id="cluster">Cluster</h2>
+<p><code>.cluster</code></p>
+
+<p>
+  A layout that lets you automatically distribute items with consistent spacing,
+  regardless of their size.
+</p>
+
+<h3>Configuration</h3>
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--gutter</code></td>
+        <td><code>$global-gutter</code></td>
+        <td>This defines the space between each item.</td>
+      </tr>
+      <tr>
+        <td><code>--cluster-horizontal-alignment</code></td>
+        <td><code>flex-start</code></td>
+        <td>
+          How items should align horizontally. Can be any acceptable
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"
+            >flexbox alignment value.</a
+          >.
+        </td>
+      </tr>
+      <tr>
+        <td><code>--cluster-vertical-alignment</code></td>
+        <td><code>center</code></td>
+        <td>
+          How items should align vertically. Can be any acceptable
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"
+            >flexbox alignment value.</a
+          >.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<div class="breakout gap-top-size-1">
+  <div class="cluster">
+    <div class="bg-mid-bg pad-size-1">Item 1</div>
+    <div class="bg-mid-bg pad-size-1">Item 2</div>
+    <div class="bg-mid-bg pad-size-1">Item 3</div>
+    <div class="bg-mid-bg pad-size-1">Item 4</div>
+    <div class="bg-mid-bg pad-size-1">Item 5</div>
+    <div class="bg-mid-bg pad-size-1">Item 6</div>
+    <div class="bg-mid-bg pad-size-1">Item 7</div>
+    <div class="bg-mid-bg pad-size-1">Item 8</div>
+  </div>
+</div>
+
+<h2 id="reel">Reel</h2>
+<p><code>.reel</code></p>
+
+<p>
+  The Reel provides a scrollable, overflow container. To add a scrollbar, you
+  apply the
+  <a href="/design-system/css-utilities/#scrollbar"
+    ><code>.scrollbar</code> utility</a
+  >, which provides consistent scrollbars where needed.
+</p>
+
+<h3>Configuration</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--reel-item-width</code></td>
+        <td><code>33.333%</code> (one third)</td>
+        <td>This defines the size of each child element.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Exceptions</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Exception</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.reel[data-scroll='snap']</code></td>
+        <td>Enables scroll snapping</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<div class="breakout gap-top-size-1">
+  <div class="reel">
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+  </div>
+</div>
+
+<h4>With scrollbar</h4>
+
+<div class="breakout gap-top-size-1">
+  <div class="reel scrollbar">
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+  </div>
+</div>
+
+<h4>With scroll snapping</h4>
+
+<div class="breakout gap-top-size-1">
+  <div class="reel scrollbar" data-scroll="snap">
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+    <div class="region bg-mid-bg pad-inline-size-1">Item</div>
+  </div>
+</div>
+
+<h2 id="repel">Repel</h2>
+<p>
+  A little layout that pushes items away from each other where there is space in
+  the viewport and stacks on small viewports.
+</p>
+<p><code>.repel</code></p>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--gutter</code></td>
+        <td><code>$global-gutter</code></td>
+        <td>This defines the space between items.</td>
+      </tr>
+      <tr>
+        <td><code>--repel-vertical-alignment</code></td>
+        <td><code>20rem</code></td>
+        <td>
+          How items should align vertically. Can be any acceptable
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"
+            >flexbox alignment value.</a
+          >.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+<div class="breakout gap-top-size-1">
+  <div class="repel">
+    <div class="bg-mid-bg pad-size-1">Item 1 repels item 2</div>
+    <div class="bg-mid-bg pad-size-1">Item 2 repels item 1</div>
+  </div>
+</div>
+
+<h2 id="sidebar">Sidebar</h2>
+<p><code>.sidebar</code></p>
+
+<p>
+  A layout that allows you to have a flexible main content area and a
+  &quot;fixed&quot; width sidebar that sits on the left or right. If there is
+  not enough viewport space to fit both the sidebar width <em>and</em> the main
+  content minimum width, they will stack on top of each other
+</p>
+
+<h3>Configuration</h3>
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--gutter</code></td>
+        <td><code>$global-gutter</code></td>
+        <td>This defines the space between the sidebar and main content.</td>
+      </tr>
+      <tr>
+        <td><code>--sidebar-target-width</code></td>
+        <td><code>20rem</code></td>
+        <td>How large the sidebar should be</td>
+      </tr>
+      <tr>
+        <td><code>--sidebar-content-min-width</code></td>
+        <td><code>50%</code></td>
+        <td>The minimum size of the main content area</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Exceptions</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Exception</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.sidebar[data-direction='rtl']</code></td>
+        <td>Flips the sidebar to be on the right</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<p>A standard sidebar.</p>
+
+<div class="breakout gap-top-size-1">
+  <div class="sidebar">
+    <div class="bg-mid-bg pad-size-1">I am the sidebar</div>
+    <div class="flow bg-mid-bg pad-size-1">
+      <h4>I am the content</h4>
+      <p>
+        Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur
+        purus sit amet fermentum.
+      </p>
+      <p>
+        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus. Vestibulum id ligula porta felis euismod semper.
+      </p>
+    </div>
+  </div>
+</div>
+
+<p>Flipped sidebar.</p>
+
+<div class="breakout gap-top-size-1">
+  <div class="sidebar" data-direction="rtl">
+    <div class="flow bg-mid-bg pad-size-1">
+      <h4>I am the content</h4>
+      <p>
+        Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur
+        purus sit amet fermentum.
+      </p>
+      <p>
+        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus. Vestibulum id ligula porta felis euismod semper.
+      </p>
+    </div>
+    <div class="bg-mid-bg pad-size-1">I am the RTL sidebar</div>
+  </div>
+</div>
+
+<h2>Switcher</h2>
+<p><code>.switcher</code></p>
+
+<p>
+  A layout that allows you to lay <strong>2</strong> items next to each other
+  until there is not enough horizontal space to allow that.
+</p>
+
+<h3>Configuration</h3>
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>--switcher-gutter</code></td>
+        <td><code>$global-gutter</code></td>
+        <td>This defines the space between each item</td>
+      </tr>
+      <tr>
+        <td><code>--switcher-vertical-alignment</code></td>
+        <td><code>flex-start</code></td>
+        <td>
+          How items should align vertically. Can be any acceptable
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"
+            >flexbox alignment value.</a
+          >
+        </td>
+      </tr>
+      <tr>
+        <td><code>--switcher-target-container-width</code></td>
+        <td><code>30rem</code></td>
+        <td>
+          How large the container needs to be to allow items to sit inline with
+          each other
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Examples</h3>
+
+<div class="breakout gap-top-size-1">
+  <div class="switcher">
+    <div class="bg-mid-bg pad-size-1">Item 1</div>
+    <div class="bg-mid-bg pad-size-1">Item 2</div>
+  </div>
+</div>
+
+{% endblock %}
diff --git a/src/site/content/en/design-system/css-utilities.md b/src/site/content/en/design-system/css-utilities.md
new file mode 100644
index 00000000000..53c52089ffc
--- /dev/null
+++ b/src/site/content/en/design-system/css-utilities.md
@@ -0,0 +1,188 @@
+---
+title: 'CSS Utilities'
+permalink: '/design-system/css-utilities/index.html'
+layout: 'design-system-documentation.njk'
+summary: 'Flexible utilities that solve common UI problems, using the [CUBE CSS utilities principles](https://cube.fyi/utility.html).'
+---
+
+## All center
+
+Does what it says on the tin. It center-aligns text with `text-align` and uses
+`margin-inline: auto` to center align on the reading mode direction.
+
+```html
+<header class="all-center">
+  <h1>A page header</h1>
+  <p>
+    Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a
+    ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam.
+    Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit
+    tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Duis
+    mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
+    odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient
+    montes, nascetur ridiculus mus.
+  </p>
+</header>
+```
+
+## Avatar
+
+The avatar utility adds a consistent treatment to images of authors and prevents
+them being shrunk/grown by flexbox layouts.
+
+You can affect the size of the avatar in your context by setting a value for
+`--avatar-size`, which has a default value of `65px`.
+
+The `.avatar` class can be added directly to an image, or a direct parent, such
+as a link.
+
+```html
+<img class="avatar" src="/path-to-image.jpg" alt="Example's profile shot" />
+
+<a href="#" class="avatar">
+  <img class="avatar" src="/path-to-image.jpg" alt="Example's profile shot" />
+</a>
+```
+
+## Flow
+
+The flow utility provides flow and rhythm between direct sibling elements.
+Where `--flow-space` is not defined: the default value is 1em, which equals
+the font size of the affected element.
+
+[More info](https://piccalil.li/quick-tip/flow-utility/)
+
+```html
+<article class="flow">
+  <p>
+    Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit
+    libero, a pharetra augue.
+  </p>
+  <p>
+    Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac
+    facilisis in, egestas eget quam.
+  </p>
+  <p style="--flow-space: 2em">
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  </p>
+</article>
+```
+
+You can also use the `flow-space` generated utility that allows you to use
+the **spacing design tokens**. For example, If you want that last paragraph
+to have a `Size 2` spacing, you would change the code to the following:
+
+```html
+<article class="flow">
+  <p>
+    Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit
+    libero, a pharetra augue.
+  </p>
+  <p>
+    Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac
+    facilisis in, egestas eget quam.
+  </p>
+  <p class="flow-space-size-2">
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  </p>
+</article>
+```
+
+## Focus ring
+
+A box-shadow powered focus ring that uses a transparent outline to provide
+focus for high contrast users. The box-shadow helps to support border-radius
+elements.
+
+```html
+<button class="my-cool-button focus-ring">My cool button</button>
+```
+
+You can customise the `--focus-ring-padding-color`, which creates the
+illusion of space, but it's actually just the background.
+
+```css
+.my-cool-button {
+  --focus-ring-padding-color: goldenrod;
+}
+```
+
+## Region
+
+A container that provides consistent vertical spacing for
+chunks/sections/regions of content.
+
+```html
+<div class="region">I have consistent space now.</div>
+```
+
+## Over Scroll
+
+Provides a container that _contains_ overflowing content. This should be sized externally, either with [flex basis](https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/#heading-making-the-nav-shrinkable), or with units, like the example below.
+
+```html
+<div class="over-scroll" style="max-height: 10rem">
+  <p>
+    Leo malesuada nibh sed quam curae sollicitudin laoreet aptent fermentum
+    tristique elit feugiat ultricies eget pulvinar rutrum venenatis turpis
+    integer neque blandit aliquet morbi ligula risus hendrerit inceptos metus
+    senectus mollis convallis vulputate scelerisque dictum vehicula etiam massa
+    justo
+  </p>
+  <p>
+    Leo malesuada nibh sed quam curae sollicitudin laoreet aptent fermentum
+    tristique elit feugiat ultricies eget pulvinar rutrum venenatis turpis
+    integer neque blandit aliquet morbi ligula risus hendrerit inceptos metus
+    senectus mollis convallis vulputate scelerisque dictum vehicula etiam massa
+    justo
+  </p>
+</div>
+```
+
+## Scrollbar
+
+Provides a scrollbar only if there is overflow content. This utility only provides the scrollbar and **not** the rule which determines which direction scrolling occurs (`overflow-x`, `overflow-y`, `overflow`), so the element that this is applied to needs to deal with that.
+
+### Example
+
+```html
+<div class="table-wrapper scrollbar">
+  <table></table>
+</div>
+```
+
+## Visually hidden
+
+If you hide an element with `display: none`, it can also hide it from assistive
+technology, such as screen readers. This utility allows you to get the effect
+of `display: none`, without the a11y issues.
+
+```html
+<p class="visually-hidden">
+  You can't see me, but a screen reader can still access me
+</p>
+```
+
+## Wrapper
+
+A horizontally centered wrapper that provides a consistent central column.
+This should be used in all contexts where the content needs to be in the
+center of the page.
+
+```html
+<div class="wrapper">I am centered and have a nice, consistent gutter.</div>
+```
+
+You can add an [exception](https://cube.fyi/exception.html) to create a narrow
+wrapper, too. Add `data-size="narrow"` to the element and it will have a reduced
+width and **no gutter**.
+
+```html
+<div class="wrapper" data-size="narrow">I am a reduced width wrapper</div>
+```
+
+You can also remove inline padding by adding `data-flush`.
+
+```html
+<div class="wrapper" data-flush>I am a flush wrapper</div>
+```
diff --git a/src/site/content/en/design-system/design-system.11tydata.json b/src/site/content/en/design-system/design-system.11tydata.json
new file mode 100644
index 00000000000..47a89fe4d18
--- /dev/null
+++ b/src/site/content/en/design-system/design-system.11tydata.json
@@ -0,0 +1,31 @@
+{
+  "noindex": true,
+  "sideLinks": [
+    {
+      "text": "Welcome",
+      "url": "/design-system/"
+    },
+    {
+      "text": "Colors",
+      "url": "/design-system/colors/"
+    },
+    {
+      "text": "Typography",
+      "url": "/design-system/typography/"
+    },
+    {
+      "text": "Spacing",
+      "url": "/design-system/spacing/"
+    }
+  ],
+  "cssLinks": [
+    {
+      "text": "Utilities",
+      "url": "/design-system/css-utilities/"
+    },
+    {
+      "text": "Compositions",
+      "url": "/design-system/css-compositions/"
+    }
+  ]
+}
diff --git a/src/site/content/en/design-system/pages.11tydata.js b/src/site/content/en/design-system/pages.11tydata.js
new file mode 100644
index 00000000000..76eec1df7eb
--- /dev/null
+++ b/src/site/content/en/design-system/pages.11tydata.js
@@ -0,0 +1,6 @@
+module.exports = {
+  eleventyComputed: {
+    title: ({item}) => `${item.title} - web.dev Design System Page`,
+    summary: ({item}) => item.summary || '',
+  },
+};
diff --git a/src/site/content/en/design-system/prototype.njk b/src/site/content/en/design-system/prototype.njk
new file mode 100644
index 00000000000..4ca41dd6857
--- /dev/null
+++ b/src/site/content/en/design-system/prototype.njk
@@ -0,0 +1,7 @@
+---
+layout: default
+permalink: '/design-system/prototype/index.html'
+show_banner: false
+---
+
+<p>This page is using the new default layout</p>
diff --git a/src/site/content/en/design-system/spacing.njk b/src/site/content/en/design-system/spacing.njk
new file mode 100644
index 00000000000..d0f9d5f3e9c
--- /dev/null
+++ b/src/site/content/en/design-system/spacing.njk
@@ -0,0 +1,56 @@
+---
+permalink: '/design-system/spacing/index.html'
+title: 'Spacing'
+---
+
+{% extends "design-system.njk" %}
+
+{% block inner %}
+<p>Spacing follows a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.</p>
+
+{% for size in design.tokens.spacing %}
+  <div class="bg-mid-bg box-flex flex-dir-column flex-justify-center flex-align-center" style="width: 100px; min-height: {{ size.max }}px; padding: 0.2em">{{ size.name }}</div>
+{% endfor %}
+
+<hr />
+
+<h3>Usage</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Vertical Padding Utility</th>
+        <th>Horizontal Padding Utility</th>
+        <th>Margin Top Utility</th>
+        <th>Flow Space Utility</th>
+        <th>Gutter Utility</th>
+        <th>Sass function</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for size in design.tokens.spacing %}
+        <tr>
+          <td>
+            <code>.pad-block-{{ size.name | slug }}</code>
+          </td>
+          <td>
+            <code>.pad-inline-{{ size.name | slug }}</code>
+          </td>
+          <td>
+            <code>.gap-top-{{ size.name | slug }}</code>
+          </td>
+          <td>
+            <code>.flow-space-{{ size.name | slug }}</code>
+          </td>
+          <td>
+            <code>.gutter-{{ size.name | slug }}</code>
+          </td>
+          <td><code>get-space('{{ size.name | slug }}')</code></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/site/content/en/design-system/typography.njk b/src/site/content/en/design-system/typography.njk
new file mode 100644
index 00000000000..dd70824e0ee
--- /dev/null
+++ b/src/site/content/en/design-system/typography.njk
@@ -0,0 +1,80 @@
+---
+permalink: '/design-system/typography/index.html'
+title: 'Typography'
+---
+
+{% extends "design-system.njk" %}
+{% set title = 'Typography' %}
+
+{% block inner %}
+<nav class="cluster" aria-label="table of contents">
+  <a href="#sizes">Sizes</a>
+  <a href="#sizes">Fonts</a>
+</nav>
+
+<h2 id="sizes">Sizes</h2>
+<div class="aside flow bg-state-info-bg color-state-info-text">
+<p>Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.</p>
+</div>
+
+{% for size in design.tokens.textSizes %}
+  <p class="text-{{ size.name | slug }} weight-bold leading-flat">{{ size.name }} (min: {{ size.min }}px / max: {{ size.max }}px)</p>
+{% endfor %}
+
+<hr />
+
+<h3>Usage</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Utility Class</th>
+        <th>Sass function</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for size in design.tokens.textSizes %}
+        <tr>
+          <td>
+            <code>.text-{{ size.name | slug }}</code>
+          </td>
+          <td><code>get-size('{{ size.name | slug }}')</code></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+<h2 id="sizes">Fonts</h2>
+
+{% for font in design.tokens.fonts %}
+  <p class="font-{{ font.name | slug }} text-size-4">{{ font.name }}</p>
+  <p class="flow-space-base"><em>{{ font.description }}</em></p>
+{% endfor %}
+
+<hr />
+
+<h3>Usage</h3>
+
+<div class="table-wrapper breakout">
+  <table>
+    <thead>
+      <tr>
+        <th>Utility Class</th>
+        <th>Sass mixin</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for font in design.tokens.fonts %}
+        <tr>
+          <td>
+            <code>.font-{{ font.name | slug }}</code>
+          </td>
+          <td><code>@include apply-utility('font', '{{ font.name | slug }}')</code></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/site/content/en/design-system/welcome.md b/src/site/content/en/design-system/welcome.md
new file mode 100644
index 00000000000..eec620586f3
--- /dev/null
+++ b/src/site/content/en/design-system/welcome.md
@@ -0,0 +1,176 @@
+---
+permalink: '/design-system/index.html'
+title: 'Welcome to the web.dev design system'
+layout: 'design-system-documentation.njk'
+quickLinks:
+  - title: 'Colors'
+    url: '/design-system/colors'
+    summary: 'All the available colors and guides for their usage'
+  - title: 'Themes'
+    url: '/design-system/colors/#theme-usage'
+    summary: 'How the theming stying works and how to use it'
+  - title: 'Typography'
+    url: '/design-system/typography/'
+    summary: 'Font sizes, the size scale and available fonts'
+  - title: 'Spacing'
+    url: '/design-system/spacing/'
+    summary: 'The spacing scale and spacing utilities'
+  - title: 'CSS Compositions'
+    url: '/design-system/css-compositions/'
+    summary: 'Flexible and skeletal compositional layouts that work site-wide'
+  - title: 'Utilities'
+    url: '/design-system/css-utilities/'
+    summary: 'Flexible utilities that solve common UI problems'
+  - title: 'CUBE CSS'
+    url: 'https://cube.fyi/'
+    summary: 'The CSS Methodology all of the CSS in this system uses'
+  - title: 'Gorko CSS Framework'
+    url: 'https://github.com/hankchizljaw/gorko'
+    summary: 'Documentation for the CSS (Sass) framework that’s used in this design system'
+---
+
+<nav class="cluster" aria-label="key sections">
+<a href="#for-developers">For developers</a>
+<a href="#for-authors">For authors</a>
+<a href="#about-the-css">About the CSS</a>
+</nav>
+
+{% Aside %}
+
+This design system will help you to maintain consistency around the web.dev website by providing CSS structure, design tokens, typography rules and spacing rules, along with a comprehensive component library.
+
+{% endAside %}
+
+## Quick start
+
+<div class="breakout">
+<div class="auto-grid gap-top-size-2">
+  {% for item in quickLinks -%}
+  <a class="card flow bg-mid-bg" href="{{ item.url }}">
+    <h3>{{ item.title }}</h3>
+    <p>{{ item.summary }}</p>
+  </a>
+  {%- endfor %}
+</div>
+</div>
+
+## For developers
+
+This design system should be treated as the source of truth for **any** front-end development work that requires CSS.
+
+### About the CSS
+
+The design system is built around [CUBE CSS](https://cube.fyi/), a methodology that’s orientated towards simplicity and pragmatism. Versus the previous system on web.dev, a lot of CSS is declared as high up as possible—globally—rather than concentrated on complex BEM components.
+
+The CSS is pre-processed using SCSS, which in turn, uses [Gorko](https://github.com/hankchizljaw/gorko) to provide structure, mixins and generated utility classes. The design system uses utilities regularly, so ensure you read up on [how Gorko generates them](https://github.com/hankchizljaw/gorko#utility-class-generator). They are [defined here](https://github.com/GoogleChrome/web.dev/blob/main/src/scss/_config.scss#L19).
+
+Everything in CSS is powered by [design tokens](https://piccalil.li/tutorial/what-are-design-tokens/), which are [defined here](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/design/tokens.json). The design tokens mainly define colors, fonts, spacing, sizes, transitions and decorative elements, such as border radius.
+
+Lastly, the whole design system is **theme-driven**. This means that tokens are applied to contexts, rather than directly to elements. This makes working with dark/light themes much easier with less authored code. [Read more in the color section](/design-system/colors/#theme-usage).
+
+### SCSS file and folder structure
+
+The structure is as follows:
+
+```plaintext
+src
+└── scss
+    ├── blocks
+    ├── compositions
+    ├── functions
+    ├── mixins
+    ├── pages
+    ├── utilities
+    ├── web-components
+    ├── _config.scss
+    ├── _fonts.scss
+    ├── _reset.scss
+    ├── _rollout.scss
+    ├── _themes.scss (generated)
+    ├── _tokens.scss (generated)
+    └── next.scss
+```
+
+The Sass folder mostly resembles the CUBE CSS structure and is as follows:
+
+1. `blocks`: [contained components](https://cube.fyi/block.htm)
+2. `compositions`: [layout compositions](/design-system/css-compositions/)
+3. `functions`: Sass functions used across the SCSS files
+4. `mixins`: Sass mixins used across the SCSS files
+5. `pages`: specific styles for pages and page types
+6. `utilities`: [core utilities](/design-system/css-utilities/)
+7. `web-components`: styles for [specific web-components](https://github.com/GoogleChrome/web.dev/tree/main/src/lib/components)
+8. `_config.scss`: core [Gorko configuration](https://github.com/andy-piccalilli/gorko#configuration)
+9. `_fonts.scss`: `@font-face` declarations
+10. `_reset.scss`: a [lightweight CSS reset](https://piccalil.li/blog/a-modern-css-reset/)
+11. `_rollout.scss`: Temporary styles to provide a bridge between the old system and new system while the new system is rolled out
+12. `_themes.scss`: an auto-generated file by `src/site/_data/design/themes.js`
+13. `_tokens.scss`: an auto-generated file by `src/site/_data/design/tokens.js`
+14. `next.css`: the main SCSS file that pulls everything together and defines [global CSS](https://cube.fyi/css.html)
+
+## For authors
+
+Please use the same [component guide in the handbook](/handbook/web-dev-components/) as always.
+
+## How to use the pattern/component generator
+
+To prevent repetitive file creation, you can use the pattern generator to create a new pattern, or pattern's variant with a npm task.
+
+### Example
+
+Let's say you want a new pattern called "my-pattern":
+
+```bash
+npm run patterns:create -- -p my-pattern -n my-pattern -t My\ Pattern
+```
+
+This will create the following folder and file structure:
+
+```plaintext
+web.dev
+└── src/
+    └── component-library/
+        └── my-pattern/
+            ├── my-pattern.njk
+            ├── my-pattern.json
+            └── my-pattern.md
+```
+
+Let's you want to create a variant of "my-pattern":
+
+```bash
+npm run patterns:create -- -p my-pattern/variants -n my-pattern-primary -t Primary
+```
+
+It'll result in this structure:
+
+```plaintext
+web.dev
+└── src/
+    └── components/
+        └── patterns/
+            └── my-pattern/
+                ├── my-pattern.njk
+                ├── my-pattern.json
+                ├── my-pattern.md
+                └── variants/
+                    ├── my-pattern-primary.njk
+                    └── my-pattern-primary.json
+```
+
+### Arguments
+
+There are 2 required arguments to pass in—`-p` and `-n`. The rest are optional.
+
+{% Aside %}
+
+Make sure you add the `--` _after_ `npm run patterns:create` so the arguments get passed into the task.
+
+Also make sure you escape spaces with a `\`.
+
+{% endAside %}
+
+- `-p` is the path from `src/components/patterns`
+- `-n` is the file name
+- `-t` is the title. If this is not set, the `-n` will be used
+- `-sm` allows you to skip markup being generated if you are generating a variant
diff --git a/src/site/content/en/developer-satisfaction/index.md b/src/site/content/en/developer-satisfaction/index.md
new file mode 100644
index 00000000000..ba5a1e07bfd
--- /dev/null
+++ b/src/site/content/en/developer-satisfaction/index.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Web Developer Satisfaction
+description:
+  Web Developer Satisfaction is a Google project to gather information about
+  the needs of web developers. The goal is a more reliable, predictable and
+  interoperable web platform, enabling developers to invest in and trust it,
+  and adopt and use new features to grow the platform and their business.
+date: 2021-03-22
+updated: 2021-03-23
+---
+
+Web Developer Satisfaction, shortened DevSAT, is a Google project to gather
+information about the needs of web developers. Our goal is to make sure
+developers are being heard, know what's happening with their feedback, and see
+issues being addressed. DevSAT is how we ensure we are focusing on the right
+areas with our Engineering and Developer Relations work. The goal is a more
+reliable, predictable, and interoperable web platform, enabling developers to
+invest in and trust it, and to adopt and use new features to grow the platform and
+their business.
+
+## Ongoing research to understand developer needs
+
++   [MDN DNA (Developer Needs Assessment) surveys](https://insights.developer.mozilla.org/)
++   [MDN Browser Compatibility Report 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
++   MDN Web Testing Research is in progress, results will be announced soon
+
+## 2021 focus on compatibility
+
+Compatibility on the web has always been a big challenge for developers. The
+goal in 2021 is to eliminate browser compatibility problems in five key focus areas
+so developers can confidently rely on these areas not having bugs. This effort
+is called [#Compat2021](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live).
+
+You can follow along with the process in the Compat 2021 dashboard to see how
+each major browser engine is doing in the five areas:
+
+<iframe src="https://wpt.fyi/compat2021?embedded"
+frameborder="0" style="height: 1000px; width: 100%;"></iframe>
+
+The dashboard and all related bugs are listed at
+[wpt.fyi/compat2021](https://wpt.fyi/compat2021).
+
+### The five top compat focus areas in 2021
+
+Here are the areas which are committed to being fixed in 2021, and they are
+outlined in more detail in [Compat2021: Eliminating five top
+compatibility pain points on the web](/compat2021).
+
++   CSS Flexbox
++   CSS Grid
++   CSS `position: sticky`
++   CSS `aspect-ratio` property
++   CSS transforms
+
+### Contributing and following along
+
+Follow any updates on [@ChromiumDev](https://twitter.com/ChromiumDev) or through
+the [Compat 2021 public mailing list](https://groups.google.com/g/compat2021).
+Make sure bugs exist, or [file them](/how-to-file-a-good-bug/)
+for issues you have been experiencing, and if there's anything missing, reach
+out through the above channels.
+
+## Testing on the web
+
+In both
+[MDN DNA 2019](https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2019.html)
+and
+[2020](https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2020.html),
+testing across browsers stood out among the top pain points. To understand this
+area better, we're collaborating with MDN on further research. The results of
+this will be published on
+[https://insights.developer.mozilla.org/](https://insights.developer.mozilla.org/)
+at the end of March 2021.
+
+We're already working together with all browser vendors on [WebDriver
+BiDi](https://w3c.github.io/webdriver-bidi/), a new protocol for browser
+automation, and on using WebDriver BiDi in
+[Puppeteer](https://github.com/puppeteer/puppeteer). This will allow Puppeteer
+to support more browsers on more platforms, and will enable other popular test
+and automation tools to do the same. We believe this is a crucial first step to
+making it easier to test all browsers you need to support. To follow and
+contribute to this work, consider joining the [Browser Testing and Tools Working
+Group](https://www.w3.org/testing/browser/).
+
+## Follow this space!
+
+We will continually update this page to share more efforts and work as they are
+underway!
diff --git a/src/site/content/en/devices/index.md b/src/site/content/en/devices/index.md
new file mode 100644
index 00000000000..f93ec301fde
--- /dev/null
+++ b/src/site/content/en/devices/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2020-10-15
+pathName: devices
+---
diff --git a/src/site/content/en/discoverable/codelab-fix-sneaky-404/index.md b/src/site/content/en/discoverable/codelab-fix-sneaky-404/index.md
index be884c7bc15..77b441007d9 100644
--- a/src/site/content/en/discoverable/codelab-fix-sneaky-404/index.md
+++ b/src/site/content/en/discoverable/codelab-fix-sneaky-404/index.md
@@ -13,7 +13,7 @@ related_post: fix-http-status-codes
 
 Single Page Apps can show different content without loading a new page. To do
 so, they use click handlers on links and the History API. The [History
-API](https://developer.mozilla.org/en-US/docs/Web/API/History) allows to
+API](https://developer.mozilla.org/docs/Web/API/History) allows to
 manipulate the browser session history. This way we can update the URL when
 showing a different page (usually called a "view" in Single Page Apps). It also
 makes sure the browser's back button still works as expected.
diff --git a/src/site/content/en/discoverable/how-search-works/index.md b/src/site/content/en/discoverable/how-search-works/index.md
index 38627269f98..8831bed0f05 100644
--- a/src/site/content/en/discoverable/how-search-works/index.md
+++ b/src/site/content/en/discoverable/how-search-works/index.md
@@ -50,7 +50,7 @@ local storage (like IndexedDB) are available.
 After retrieving a document, the crawler hands the content to the search engine
 to add it to the index. The search engine now renders and analyzes the content
 to understand it. Rendering means displaying the page as a browser would
-([with some limitations](https://developers.google.com/search/docs/guides/rendering)).
+([with some limitations](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)).
 
 Search engines look at keywords, the title, links, headings, text, and many
 other things. These are called **signals** which describe the content and
@@ -65,7 +65,7 @@ the same content.
 
 ## Serving the most useful results
 
-Search engines do more work then just matching the query to keywords in the
+Search engines do more work than just matching the query to keywords in the
 index. To give useful results, they might consider context, alternative wording,
 location of the user, and more. For example, "silicon valley" might refer to the
 geographic region or the TV show. But if the query is "silicon valley cast",
@@ -86,4 +86,4 @@ Optimization.' By making sure search engines can find and automatically
 understand your content, you are improving the visibility of your site for
 relevant searches. This can result in more interested users coming to your site.
 Audit your site with Lighthouse and check the SEO results to see how well search
-engines can surface your content.
+engines can make users aware of your content.
diff --git a/src/site/content/en/discoverable/index.md b/src/site/content/en/discoverable/index.md
new file mode 100644
index 00000000000..20ec061194d
--- /dev/null
+++ b/src/site/content/en/discoverable/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: discoverable
+---
\ No newline at end of file
diff --git a/src/site/content/en/discoverable/index.njk b/src/site/content/en/discoverable/index.njk
deleted file mode 100644
index accc8cfddf2..00000000000
--- a/src/site/content/en/discoverable/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: discoverable
----
\ No newline at end of file
diff --git a/src/site/content/en/discoverable/pass-lighthouse-seo-audit/index.md b/src/site/content/en/discoverable/pass-lighthouse-seo-audit/index.md
index 88a74133d37..254e29166d1 100644
--- a/src/site/content/en/discoverable/pass-lighthouse-seo-audit/index.md
+++ b/src/site/content/en/discoverable/pass-lighthouse-seo-audit/index.md
@@ -31,7 +31,7 @@ Lighthouse generates a report for your page so you can see areas where you can
 improve SEO for your site.
 
 To learn how to fix issues flagged by Lighthouse, see the
-[SEO audits](/lighthouse-seo) collection.
+[SEO audits](https://developer.chrome.com/docs/lighthouse/seo/) collection.
 
 ## Next steps
 
diff --git a/src/site/content/en/en.11tydata.js b/src/site/content/en/en.11tydata.js
index 7fe3e44e311..90e9adf0cf7 100644
--- a/src/site/content/en/en.11tydata.js
+++ b/src/site/content/en/en.11tydata.js
@@ -12,7 +12,7 @@ const lang = require('./lang');
 
 module.exports = function () {
   const paths = [
-    allPaths['vitals'],
+    allPaths['learn-core-web-vitals'],
     allPaths['progressive-web-apps'],
     allPaths['accessible'],
     allPaths['fast'],
diff --git a/src/site/content/en/explore/explore.11tydata.js b/src/site/content/en/explore/explore.11tydata.js
new file mode 100644
index 00000000000..6f3ee98ee3b
--- /dev/null
+++ b/src/site/content/en/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../learn/learn.11tydata');
diff --git a/src/site/content/en/explore/index.md b/src/site/content/en/explore/index.md
new file mode 100644
index 00000000000..6be24b8b282
--- /dev/null
+++ b/src/site/content/en/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: Explore
+date: 2022-12-10
+---
diff --git a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/index.md b/src/site/content/en/fast/adaptive-serving-based-on-network-quality/index.md
index e52a62b55e0..bd251456c4c 100755
--- a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/index.md
+++ b/src/site/content/en/fast/adaptive-serving-based-on-network-quality/index.md
@@ -20,12 +20,10 @@ with a laptop on slow coffee-shop Wi-Fi, it's a different story.
 
 One way to deal with this is by adapting which assets you're serving to users
 based on the quality of their connection. This is now possible with the
-[Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
+[Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
 which enables web applications to access information about the user's network.
 
-{% Aside %}
-  You can see which browsers support [the Network Information API on caniuse.com](https://caniuse.com/#feat=netinfo).
-{% endAside %}
+{% BrowserCompat 'api.NetworkInformation' %}
 
 ## Usage
 
@@ -47,8 +45,8 @@ Netflix and most other video (or video calling) services automatically adjust
 the resolution during streaming. When Gmail is loading, it provides users with a
 link to "load basic HTML (for slow connections)".
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./loading_gmail_slow_connection.png" alt="A link to load basic HTML version of Gmail when users are on slow connections">
+<figure>
+  {% Img src="image/admin/zSTd1IMrb3UJfefdeRAt.png", alt="A link to load basic HTML version of Gmail when users are on slow connections", width="528", height="236" %}
 </figure>
 
 ## How it works
@@ -56,7 +54,7 @@ link to "load basic HTML (for slow connections)".
 The `navigator.connection` object contains information about a client's
 connection. Its properties are explained in the table bellow.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>Property</th>
@@ -87,7 +85,7 @@ connection. Its properties are explained in the table bellow.
 
 Here's what this looks like when you run it in the browser's console:
 
-<img class="w-screenshot" src="./network_information_in_console.jpg" alt="Chrome DevTools console displaying the values of navigator.connection object's properties">
+{% Img src="image/admin/ayW8uxhh3S6I4MTipr0m.jpg", alt="Chrome DevTools console displaying the values of navigator.connection object's properties", width="800", height="523" %}
 
 The `effectiveType` values are also available via
 [Client Hints](https://www.chromestatus.com/feature/5407907378102272)
@@ -95,7 +93,7 @@ and allow you to communicate the browser's connection type to servers.
 
 {% Aside %}
 You can access Network Information API inside
-[Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker)
+[Service Workers](https://developer.mozilla.org/docs/Web/API/ServiceWorker)
 to adapt to situations when users are offline.
 {% endAside %}
 
diff --git a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/loading_gmail_slow_connection.png b/src/site/content/en/fast/adaptive-serving-based-on-network-quality/loading_gmail_slow_connection.png
deleted file mode 100755
index 1451e63f473..00000000000
Binary files a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/loading_gmail_slow_connection.png and /dev/null differ
diff --git a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/network_information_in_console.jpg b/src/site/content/en/fast/adaptive-serving-based-on-network-quality/network_information_in_console.jpg
deleted file mode 100755
index 6ce65f14a61..00000000000
Binary files a/src/site/content/en/fast/adaptive-serving-based-on-network-quality/network_information_in_console.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/defer-offscreen-images.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/defer-offscreen-images.png
deleted file mode 100644
index b8195b50d0c..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/defer-offscreen-images.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/eliminate-render-blocking.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/eliminate-render-blocking.png
deleted file mode 100644
index 52abca5ed18..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/eliminate-render-blocking.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/enormous-payloads.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/enormous-payloads.png
deleted file mode 100644
index ea4b3aec19e..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/enormous-payloads.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/en/fast/apply-instant-loading-with-prpl/index.md
index 3e2e1309fa7..c2003798d4a 100644
--- a/src/site/content/en/fast/apply-instant-loading-with-prpl/index.md
+++ b/src/site/content/en/fast/apply-instant-loading-with-prpl/index.md
@@ -9,6 +9,7 @@ description: |
   fit together but still can be used independently to achieve performance
   results.
 date: 2018-11-05
+updated: 2022-08-18
 tags:
   - performance
 ---
@@ -16,7 +17,7 @@ tags:
 PRPL is an acronym that describes a pattern used to make web pages load and
 become interactive, faster:
 
-+  **Push** (or **preload**) the most important resources.
++  **Preload** the most important resources.
 +  **Render** the initial route as soon as possible.
 +  **Pre-cache** remaining assets.
 +  **Lazy load** other routes and non-critical assets.
@@ -40,9 +41,9 @@ For more information, see [Discover performance opportunities with Lighthouse](/
 Lighthouse shows the following failed audit if a certain resource is parsed and
 fetched late:
 
-<img class="w-screenshot" src="./preload-requests.png" alt="Lighthouse: Preload key requests audit">
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse: Preload key requests audit", width="745", height="97" %}
 
-[**Preload**](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
+[**Preload**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)
 is a declarative fetch request that tells the browser to request a resource as
 soon as possible. Preload critical resources by adding a `<link>` tag with
 `rel="preload"` to the head of your HTML document:
@@ -59,14 +60,14 @@ For more information about preloading critical resources, refer to the
 
 ## Render the initial route as soon as possible
 
-Lighthouse provides a warning if there are resources that delay [**First Paint**](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint),
+Lighthouse provides a warning if there are resources that delay [**First Paint**](/user-centric-performance-metrics/#important-metrics-to-measure),
 the moment when your site renders pixels to the screen:
 
-<img class="w-screenshot" src="./eliminate-render-blocking.png" alt="Lighthouse: Eliminate render-blocking resources audit">
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Lighthouse: Eliminate render-blocking resources audit", width="800", height="111" %}
 
 To improve First Paint, Lighthouse recommends inlining critical JavaScript and
 deferring the rest using
-[`async`](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript),
+[`async`](/critical-rendering-path-adding-interactivity-with-javascript/),
 as well as inlining critical CSS used above-the-fold. This improves performance
 by eliminating round-trips to the server to fetch render-blocking assets.
 However, inline code is harder to maintain from a development perspective and
@@ -75,7 +76,7 @@ cannot be cached separately by the browser.
 Another approach to improve First Paint is to **server-side render** the initial
 HTML of your page. This displays content immediately to the user while scripts
 are still being fetched, parsed, and executed. However, this can increase the
-payload of the HTML file significantly, which can harm [**Time to Interactive**](/interactive),
+payload of the HTML file significantly, which can harm [**Time to Interactive**](/tti/),
 or the time it takes for your application to become interactive and can respond
 to user input.
 
@@ -87,8 +88,8 @@ learn more about both of these concepts with the following resources.
 +  [Optimize CSS Delivery](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
 +  [What is Server-Side Rendering?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./service-workers.png" alt="Requests/responses with service worker" style="width: 300px">
+<figure data-float="right">
+  {% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="Requests/responses with service worker", width="800", height="1224" %}
 </figure>
 
 ## Pre-cache assets
@@ -110,13 +111,13 @@ refer to the [service worker guide](/service-workers-cache-storage) in the relia
 
 Lighthouse displays a failed audit if you send too much data over the network.
 
-<img class="w-screenshot" src="./enormous-payloads.png" alt="Lighthouse: Has enormous network payloads audit">
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse: Has enormous network payloads audit", width="800", height="99" %}
 
 This includes all asset types, but large JavaScript payloads are especially
 costly due to the time it takes the browser to parse and compile them.
 Lighthouse also provides a warning for this when appropriate.
 
-<img class="w-screenshot" src="./js-bootup-high.png" alt="Lighthouse: JavaScript boot-up time audit">
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse: JavaScript boot-up time audit", width="797", height="100" %}
 
 To send a smaller JavaScript payload that contains only the code needed when a
 user initially loads your application, split the entire bundle and [lazy load](/reduce-javascript-payloads-with-code-splitting) chunks on demand.
@@ -127,9 +128,9 @@ Preloading ensures more important resources are fetched and downloaded sooner
 by the browser.
 
 Aside from splitting and loading different JavaScript chunks on demand,
-Lighthouse also provides an audit for lazy-loading non-critical images.
+Lighthouse also provides an audit for lazy loading non-critical images.
 
-<img class="w-screenshot" src="./defer-offscreen-images.png" alt="Lighthouse: Defer offscreen images audit">
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse: Defer offscreen images audit", width="800", height="90" %}
 
 If you load many images on your web page, defer all that are below the fold, or
 outside the device viewport, when a page is loaded (see [Use lazysizes to lazyload images](/use-lazysizes-to-lazyload-images)).
@@ -142,7 +143,9 @@ It's important to remember that not all of the techniques need to be
 applied together. Any efforts made with any of the following will provide
 noticeable performance improvements.
 
-+  **Push** (or **preload**) critical resources.
++  **Preload** critical resources.
 +  **Render** the initial route as soon as possible.
 +  **Pre-cache** remaining assets.
 +  **Lazy load** other routes and non-critical assets.
+
+You can read up more about [PRPL](https://www.patterns.dev/posts/prpl/) patterns.
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/js-bootup-high.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/js-bootup-high.png
deleted file mode 100644
index 309b47aae7f..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/js-bootup-high.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/offline-audits.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/offline-audits.png
deleted file mode 100644
index dedb1c6481a..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/offline-audits.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/preload-requests.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/preload-requests.png
deleted file mode 100644
index ffad95e22ff..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/preload-requests.png and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/prpl-pug.gif b/src/site/content/en/fast/apply-instant-loading-with-prpl/prpl-pug.gif
deleted file mode 100644
index 0fa808012f3..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/prpl-pug.gif and /dev/null differ
diff --git a/src/site/content/en/fast/apply-instant-loading-with-prpl/service-workers.png b/src/site/content/en/fast/apply-instant-loading-with-prpl/service-workers.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/fast/apply-instant-loading-with-prpl/service-workers.png and /dev/null differ
diff --git a/src/site/content/en/fast/avoid-invisible-text/index.md b/src/site/content/en/fast/avoid-invisible-text/index.md
index ee5752ea81f..663de5fa1ad 100644
--- a/src/site/content/en/fast/avoid-invisible-text/index.md
+++ b/src/site/content/en/fast/avoid-invisible-text/index.md
@@ -13,6 +13,8 @@ codelabs:
   - codelab-avoid-invisible-text
 tags:
   - performance
+feedback:
+  - api
 ---
 
 ## Why should you care?
@@ -33,7 +35,7 @@ you'll actually implement and maintain.
 
 ## Option #1: Use font-display
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -61,18 +63,19 @@ you'll actually implement and maintain.
   </table>
 </div>
 
-[`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display)
 is an API for specifying font display strategy. `swap` tells the browser that
 text using this font should be displayed immediately using a system font. Once
 the custom font is ready, the system font is swapped out.
 
+{% BrowserCompat 'css.at-rules.font-face.font-display' %}
+
 If a browser does not support `font-display`, the browser continues to follow
-it's default behavior for loading fonts. Check which browsers support
-`font-display` [here](https://caniuse.com/#search=font-display).
+its default behavior for loading fonts.
 
 These are the default font-loading behaviors for common browsers:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -120,7 +123,7 @@ There are three parts to this approach:
     couple lines of JavaScript code, thanks to the [FontFaceObserver](https://github.com/bramstein/fontfaceobserver) library.
 +  Update page styling to use the custom font.
 
-Here are the changes you can expect to make in order to implement this:
+Here are the changes you can expect to make to implement this:
 
 +  Refactor your CSS to not use a custom font on initial page load.
 +  Add a script to your page. This script detects when the custom font is
diff --git a/src/site/content/en/fast/browser-level-image-lazy-loading/index.md b/src/site/content/en/fast/browser-level-image-lazy-loading/index.md
new file mode 100644
index 00000000000..1c973b37e9f
--- /dev/null
+++ b/src/site/content/en/fast/browser-level-image-lazy-loading/index.md
@@ -0,0 +1,292 @@
+---
+layout: post
+title: Browser-level image lazy loading for the web
+subhead: Built-in lazy loading is finally here!
+authors:
+  - houssein
+  - addyosmani
+  - mathiasbynens
+  - tunetheweb
+date: 2019-08-06
+updated: 2023-06-02
+hero: image/admin/F6VE4QkpCsomiJilTFNG.png
+alt: Phone outline with loading image and assets
+description: |
+  This post covers the loading attribute and how it can be used
+  to control the loading of images.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+feedback:
+  - api
+---
+
+Browser-level support for lazy loading images is now supported on the web! This video shows a [demo](https://mathiasbynens.be/demo/img-loading-lazy) of the feature:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
+  </video>
+</figure>
+
+You can use the `loading` attribute to lazy-load images without the need to write custom lazy loading code or use a separate JavaScript library. Let's dive into the details.
+
+## Browser compatibility
+
+{% BrowserCompat 'html.elements.img.loading' %}
+
+Browsers that do not support the `loading` attribute simply ignore it without side effects.
+
+## Why browser-level lazy loading?
+
+According to the [HTTP Archive](https://httparchive.org/reports/page-weight), images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send over 5 MB of images on desktop and mobile. That's a lot of [cat pictures](https://en.wikipedia.org/wiki/Cats_and_the_Internet).
+
+Previously, there were two ways to defer the loading of off-screen images:
+
+- Using the [Intersection Observer API](https://developer.chrome.com/blog/intersectionobserver/)
+- Using `scroll`, `resize`, or `orientationchange` [event handlers](/lazy-loading-images/)
+
+Either option can let developers include lazy loading functionality, and many developers have built third-party libraries to provide abstractions that are even easier to use. With lazy loading supported directly by the browser, however, there's no need for an external library. Browser-level lazymloading also ensures that deferred loading of images still works even if JavaScript is disabled on the client.
+
+## The `loading` attribute
+
+Chrome loads images at different priorities depending on where they're located with respect to the device viewport. Images below the viewport are loaded with a lower priority, but they're still fetched as the page loads.
+
+You can use the `loading` attribute to completely defer the loading of offscreen images that are reached by scrolling:
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Here are the supported values for the `loading` attribute:
+
+- `lazy`: Defer loading of the resource until it reaches a [calculated distance](#distance-from-viewport-thresholds) from the viewport.
+- `eager`: Default loading behavior of the browser, which is the same as not including the attribute and means the image is loaded regardless of where it's located on the page. While this is the default, it can be useful to explicitly set this if your tooling automatically adds `loading="lazy"` if there is no explicit value, or if your linter complains if it is not explicitly set.
+
+{% Aside 'caution' %}
+  Images that are highly likely to be in-viewport, and in particular [LCP](/lcp/) images, [should not be lazy-loaded](#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport).
+{% endAside %}
+
+### Relationship between the `loading` attribute and fetch priority
+
+The `eager` value is simply an instruction to load the image as usual, without delaying the load further if it is off-screen. It does not imply that the image is loaded any quicker than another image without the `loading="eager"` attribute.
+
+Browsers prioritize resources based on various heuristics, and the `loading` attribute just states _when_ the image resource is queued, not _how_ it is prioritized in that queue. `eager` just implies the usual eager queueing browsers use by default.
+
+If you want to increase the fetch priority of an important image (for example the LCP image), then [Fetch Priority](/fetch-priority/) should be used with `fetchpriority="high"`.
+
+Note that an image with `loading="lazy"` and `fetchpriority="high"` will still be delayed while it is off-screen, and then fetched with a high priority when it is nearly within the viewport. It would likely be fetched with a high priority in this case anyway, so this combination should not really be needed nor used.
+
+### Distance-from-viewport thresholds
+
+All images that are above the fold—that is, immediately viewable without scrolling—load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.
+
+Chromium's implementation of lazy loading tries to ensure that offscreen images are loaded early enough so that they have finished loading once the user scrolls near to them. By fetching nearby images well before they become visible in the viewport, we maximize the chance they are already loaded by the time they become visible.
+
+Compared to JavaScript lazy loading libraries, the thresholds for fetching images that scroll into view may be considered conservative.
+
+{% Aside %}
+Experiments conducted using Chrome on Android suggest that on 4G, 97.5% of below-the-fold images that are lazy-loaded were fully loaded within 10ms of becoming visible. Even on slow 2G networks, 92.6% of below-the-fold images were fully loaded within 10ms. This means browser-level lazy loading offers a stable experience regarding the visibility of elements that are scrolled into view.
+{% endAside %}
+
+The distance threshold is not fixed and varies depending on several factors:
+
+- The type of image resource being fetched
+- The [effective connection type](https://googlechrome.github.io/samples/network-information/)
+
+You can find the default values for the different effective connection types in the [Chromium source](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/settings.json5;l=963-995). These numbers, and even the approach of fetching only when a certain distance from the viewport is reached, may change in the future as the Chrome team improves heuristics to determine when to begin loading.
+
+{% Aside %}
+You can experiment with these different thresholds by [throttling the network](https://developer.chrome.com/docs/devtools/network/#throttle) in DevTools.
+{% endAside %}
+
+## Improved data-savings and distance-from-viewport thresholds
+
+As of July 2020, Chrome has made significant improvements to align the image lazy loading distance-from-viewport thresholds to better meet developer expectations.
+
+On fast connections (4G), we reduced Chrome's distance-from-viewport thresholds from `3000px` to `1250px` and on slower connections (3G or lower), changed the threshold from `4000px` to `2500px`. This change achieves two things:
+
+* `<img loading=lazy>` behaves closer to the experience offered by JavaScript lazy loading libraries.
+* The new distance-from-viewport thresholds still allow us to guarantee images have probably loaded by the time a user has scrolled to them.
+
+You can find a comparison between the old vs. new distance-from-viewport thresholds for one of our demos on a fast connection (4G) below:
+
+Old thresholds. vs new thresholds:
+
+<figure>
+  {% Img src="image/admin/xSZMqpbioBRwRTnenK8f.png", alt="The new and improved thresholds for image lazy loading, reducing the distance-from-viewport thresholds for fast connections from 3000px down to 1250px", width="800", height="460" %}
+</figure>
+
+and the new thresholds vs. LazySizes (a popular JS lazy loading library):
+
+<figure>
+  {% Img src="image/admin/oHMFvflk9aesT7r0iJbx.png", alt="The new  distance-from-viewport thresholds in Chrome loading 90KB of images compared to LazySizes loading in 70KB under the same network conditions", width="800", height="355" %}
+</figure>
+
+We are committed to working with the web standards community to explore better alignment in how distance-from-viewport thresholds are approached across different browsers.
+
+### Images should include dimension attributes
+
+While the browser loads an image, it does not immediately know the image's dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all `<img>` tags include both `width` and `height` attributes. Without dimensions specified, [layout shifts](/cls/) can occur, which are more noticeable on pages that take some time to load.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Alternatively, specify their values directly in an inline style:
+
+```html
+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+```
+
+The best practice of setting dimensions applies to `<img>` tags regardless of whether or not they are being loaded lazily. With lazy loading, this can become more relevant. Setting `width` and `height` on images in modern browsers also allows browsers to infer their intrinsic size.
+
+In most scenarios images still lazy-load if dimensions are not included, but there are a few edge cases you should be aware of. Without `width` and `height` specified, image dimensions are 0×0 pixels at first. If you have a gallery of such images, the browser may conclude that all of them fit inside the viewport at the start, as each takes up practically no space and no image is pushed offscreen. In this case the browser determines that all of them are visible to the user and decides to load everything.
+
+Also, [specifying image dimensions decreases the chances of layout shifts happening](https://www.youtube.com/watch?v=4-d_SoCHeWE). If you are unable to include dimensions for your images, lazy loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift.
+
+While lazy loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, there is still a small chance that they might not be loaded yet. In this case, missing `width` and `height` attributes on such images increase their impact on Cumulative Layout Shift.
+
+{% Aside %}
+  Take a look at this [demo](https://mathiasbynens.be/demo/img-loading-lazy) to see how the `loading` attribute works with 100 pictures.
+{% endAside %}
+
+Images that are defined using the `<picture>` element can also be lazy-loaded:
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
+  <img src="photo.jpg" loading="lazy">
+</picture>
+```
+
+Although a browser will decide which image to load from any of the `<source>` elements, the `loading` attribute only needs to be included to the fallback `<img>` element.
+
+
+## Avoid lazy loading images that are in the first visible viewport
+
+You should avoid setting `loading=lazy` for any images that are in the first visible viewport. This is particularly relevant for LCP images. See the article [The performance effects of too much lazy-loading](/lcp-lazy-loading/) for more information.
+
+It is recommended to only add `loading=lazy` to images which are positioned below the fold, if possible. Images that are eagerly loaded can be fetched right away, while images which are loaded lazily the browser currently needs to wait until it knows where the image is positioned on the page, which relies on the `IntersectionObserver` to be available.
+
+Generally, any images within the viewport should be loaded eagerly using the browser's defaults. You do not need to specify `loading=eager` for this to be the case for in-viewport images.
+
+```html
+<!-- visible in the viewport -->
+<img src="product-1.jpg" alt="..." width="200" height="200">
+<img src="product-2.jpg" alt="..." width="200" height="200">
+<img src="product-3.jpg" alt="..." width="200" height="200">
+
+<!-- offscreen images -->
+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
+```
+
+## Graceful degradation
+
+Browsers that do not support the `loading` attribute will ignore its presence. While these browsers will of course not get the benefits of lazy loading, including the attribute has no negative impact on them.
+
+## FAQ
+
+### Are there plans to automatically lazy-load images in Chrome?
+
+Previously, Chromium automatically lazy-loaded any images that were well suited to being deferred if [Lite mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) was enabled on Chrome for Android and the `loading` attribute was either not provided or set as `loading="auto"`. However, [Lite mode has been deprecated](https://support.google.com/chrome/thread/151853370/sunsetting-chrome-lite-mode-in-m100-and-older?hl=en) (as was the non-standard `loading="auto"`) and there are currently no plans to provide automatically lazy-load of images in Chrome.
+
+### Can I change how close an image needs to be before a load is triggered?
+
+These values are hardcoded and can't be changed through the API. However, they may change in the
+future as browsers experiment with different threshold distances and variables.
+
+### Can CSS background images take advantage of the `loading` attribute?
+
+No, it can currently only be used with `<img>` tags.
+
+### Is there a downside to lazy loading images that are within the device viewport?
+
+It is safer to avoid putting `loading=lazy` on above-the-fold images, as Chrome won't preload `loading=lazy` images in the [preload scanner](/preload-scanner/) and will also delay fetching such images until all layout is complete. See [Avoid lazy-loading images that are in the first visible viewport](#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport) for more information.
+
+### How does the `loading` attribute work with images that are in the viewport but not immediately visible (for example: behind a carousel, or hidden by CSS for certain screen sizes)?
+
+Using `loading="lazy"` _may_ prevent them being loaded when they are not visible but within the [calculated-distance](#distance-from-viewport-thresholds). For example, Chrome, Safari and Firefox do not load images using `display: none;` styling—either on the image element or on a parent element. However, other techniques to hide images—such as using `opacity:0` styling—will still result in the images being loaded. Always test your implementation thoroughly to ensure it's acting as intended.
+
+### What if I'm already using a third-party library or a script to lazy-load images?
+
+With full support of native lazy loading now available in modern browsers, you may wish to reconsider if you still need a third-party library or script to lazy-load images.
+
+One reason to continue to use a third-party library along with `loading="lazy"` is to provide a polyfill for browsers that do not support the attribute, or to have more control over when lazy loading is triggered.
+
+### How do I handle browsers that don't support lazy loading?
+
+Create a polyfill or use a third-party library to lazy-load images on your site. The `loading`
+property can be used to detect if the feature is supported in the browser:
+
+```js
+if ('loading' in HTMLImageElement.prototype) {
+  // supported in browser
+} else {
+  // fetch polyfill/third-party library
+}
+```
+
+For example, [lazysizes](https://github.com/aFarkas/lazysizes) is a popular JavaScript lazy loading library. You can detect support for the `loading` attribute to load lazysizes as a fallback library only when `loading` isn't supported. This works as follows:
+
+- Replace `<img src>` with `<img data-src>` to avoid an eager load in unsupported browsers. If the `loading` attribute is supported, swap `data-src` for `src`.
+- If `loading` is not supported, load a fallback (lazysizes) and initiate it. As per lazysizes docs, you use the `lazyload` class as a way to indicate to lazysizes which images to lazy-load.
+
+```html
+<!-- Let's load this in-viewport image normally -->
+<img src="hero.jpg" alt="…">
+
+<!-- Let's lazy-load the rest of these images -->
+<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
+
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+</script>
+```
+
+Here's a [demo](https://lazy-loading.firebaseapp.com/lazy_loading_lib.html) of this pattern. Try it out in an older browser to see the fallback in action.
+
+{% Aside %}
+  The lazysizes library also provides a [loading plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading)
+  that uses browser-level lazy loading when available but falls back to the library's custom functionality when needed.
+{% endAside %}
+
+### Is lazy loading for iframes also supported in browsers?
+
+{% BrowserCompat 'html.elements.iframe.loading' %}
+
+`<iframe loading=lazy>` has also been standardized and is already implemented in Chromium and Safari. This allows you to lazy-load iframes using the `loading` attribute. See [this dedicated article about iframe lazy-loading](/iframe-lazy-loading/) for more information.
+
+### How does browser-level lazy loading affect advertisements on a web page?
+
+All ads displayed to the user in the form of an image or iframe lazy-load just like any other image or iframe.
+
+### How are images handled when a web page is printed?
+
+All images and iframes are immediately loaded if the page is printed. See [issue #875403](https://bugs.chromium.org/p/chromium/issues/detail?id=875403) for details.
+
+### Does Lighthouse recognize browser-level lazy loading?
+
+[Lighthouse 6.0](/lighthouse-whats-new-6.0/) and above factor in approaches for offscreen image lazy loading that may use different thresholds, allowing them to pass the [Defer offscreen images](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/) audit.
+
+## Conclusion
+
+Baking in support for lazy loading images can make it significantly easier for you to improve the performance of your web pages.
+
+Are you noticing any unusual behavior with this feature enabled in Chrome? [File a bug](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C)!
diff --git a/src/site/content/en/fast/choose-the-right-image-format/css-vs-device-pixels.png b/src/site/content/en/fast/choose-the-right-image-format/css-vs-device-pixels.png
deleted file mode 100644
index e21a0eb7538..00000000000
Binary files a/src/site/content/en/fast/choose-the-right-image-format/css-vs-device-pixels.png and /dev/null differ
diff --git a/src/site/content/en/fast/choose-the-right-image-format/index.md b/src/site/content/en/fast/choose-the-right-image-format/index.md
index fd7795aebcd..ee289e57589 100644
--- a/src/site/content/en/fast/choose-the-right-image-format/index.md
+++ b/src/site/content/en/fast/choose-the-right-image-format/index.md
@@ -3,10 +3,11 @@ layout: post
 title: Choose the right image format
 authors:
   - ilyagrigorik
+  - jlwagner
 description: |
   Selecting the right image format is the first step in delivering optimized images on your website. This post helps you to make the right choice.
 date: 2018-08-30
-updated: 2020-06-18
+updated: 2022-07-31
 tags:
   - performance
   - images
@@ -43,8 +44,8 @@ but it addresses all of these concerns and is always a better choice for display
 
 If you are sure an image is the correct option, you should carefully select the right kind of image for the job.
 
-<figure class="w-figure">
-  <img src="./vector-raster-zoom.png" alt="Zoomed-in vector and raster images">
+<figure>
+  {% Img src="image/admin/dJuB2DQcbhtwD5VdPVlR.png", alt="Zoomed-in vector and raster images", width="585", height="313" %}
   <figcaption>Zoomed-in vector image (L) raster image (R)</figcaption>
 </figure>
 
@@ -62,7 +63,7 @@ However, vector formats fall short when the scene is complicated (for example, a
 the amount of SVG markup to describe all the shapes can be prohibitively high
 and the output may still not look "photorealistic".
 When that's the case, that's when you should be using a raster image format
-such as PNG, JPEG, or WebP.
+such as PNG, JPEG, WebP, or AVIF.
 
 Raster images do not have the same nice properties of being resolution or zoom independent
 &mdash;when you scale up a raster image you'll see jagged and blurry graphics.
@@ -75,13 +76,13 @@ There are two different kinds of pixels: CSS pixels and device pixels.
 A single CSS pixel may correspond directly to a single device pixel, or may be backed by multiple device pixels.
 What's the point? Well, the more device pixels there are, the finer the detail of the displayed content on the screen.
 
-<figure class="w-figure">
-  <img src="./css-vs-device-pixels.png" alt="Three images showing the difference between CSS pixels and device pixels.">
-  <figcaption class="w-figcaption">The difference between CSS pixels and device pixels.</figcaption>
+<figure>
+  {% Img src="image/admin/oQV7qJ9fUMkYsKlUMrL4.png", alt="Three images showing the difference between CSS pixels and device pixels.", width="470", height="205" %}
+  <figcaption>The difference between CSS pixels and device pixels.</figcaption>
 </figure>
 
 High DPI (HiDPI) screens produce beautiful results, but there is one obvious tradeoff:
-image assets require more detail in order to take advantage of the higher device pixel counts.
+image assets require more detail to take advantage of the higher device pixel counts.
 The good news is, vector images are ideally suited for this task,
 as they can be rendered at any resolution with sharp results&mdash;
 you might incur a higher processing cost to render the finer detail,
@@ -91,7 +92,7 @@ On the other hand, raster images pose a much larger challenge because they encod
 Hence, the larger the number of pixels, the larger the filesize of a raster image.
 As an example, let's consider the difference between a photo asset displayed at 100x100 (CSS) pixels:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
 <table>
 <thead>
   <tr>
@@ -138,7 +139,7 @@ In addition to different lossy and lossless compression algorithms,
 different image formats support different features such as animation and transparency (alpha) channels.
 As a result, the choice of the "right format" for a particular image is a combination of desired visual results and functional requirements.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
 <table>
 <thead>
   <tr>
@@ -150,34 +151,39 @@ As a result, the choice of the "right format" for a particular image is a combin
 </thead>
 <tbody>
 <tr>
-  <td data-th="format"><a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></td>
+  <td data-th="format"><a rel="noopener" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></td>
   <td data-th="transparency">Yes</td>
   <td data-th="animation">No</td>
   <td data-th="browser">All</td>
 </tr>
 <tr>
-  <td data-th="format"><a href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></td>
+  <td data-th="format"><a rel="noopener" href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></td>
   <td data-th="transparency">No</td>
   <td data-th="animation">No</td>
   <td data-th="browser">All</td>
 </tr>
 <tr>
-  <td data-th="format"><a href="http://en.wikipedia.org/wiki/WebP">WebP</a></td>
+  <td data-th="format"><a rel="noopener" href="http://en.wikipedia.org/wiki/WebP">WebP</a></td>
   <td data-th="transparency">Yes</td>
   <td data-th="animation">Yes</td>
   <td data-th="browser">All modern browsers. See <a href="https://caniuse.com/#feat=webp">Can I use?</a></td>
 </tr>
+<tr>
+  <td data-th="format"><a rel="noopener" href="http://en.wikipedia.org/wiki/AVIF">AVIF</a></td>
+  <td data-th="transparency">Yes</td>
+  <td data-th="animation">Yes</td>
+  <td data-th="browser">No. See <a href="https://caniuse.com/avif">Can I use?</a></td>
+</tr>
 </tbody>
 </table>
 </div>
 
 There are two universally supported raster image formats: PNG and JPEG.
-In addition to these formats, modern browsers support the newer format WebP,
-which offers better overall compression and more features. So, which format should you use?
+In addition to these formats, modern browsers support the newer format WebP, while only some support the newer AVIF format. Both of the newer formats offer better overall compression and more features. So, which format should you use?
 
-The WebP format will generally provide better compression than older formats,
+WebP and AVIF will generally provide better compression than older formats,
 and should be used where possible.
-You can use WebP along with another image format as a fallback.
+You can use WebP or AVIF images along with a JPEG or PNG image as a fallback.
 See [Use WebP images](/serve-images-webp/) for more details.
 
 In terms of older image formats, consider the following:
@@ -186,17 +192,25 @@ In terms of older image formats, consider the following:
     * What about GIF? GIF limits the color palette to at most 256 colors,
       and creates significantly larger file sizes than `<video>` elements. See
       [Replace animated GIFs with video](/replace-gifs-with-videos/).
-1. **Do you need to preserve fine detail with highest resolution? Use PNG.**
+1. **Do you need to preserve fine detail with highest resolution? Use PNG or lossless WebP.**
     * PNG does not apply any lossy compression algorithms beyond the choice of the size of the color palette.
     As a result, it will produce the highest quality image,
     but at a cost of significantly higher filesize than other formats. Use judiciously.
+    * WebP has a lossless encoding mode that may be more efficient than PNG.
     * If the image asset contains imagery composed of geometric shapes, consider converting it to a vector (SVG) format!
     * If the image asset contains text, stop and reconsider. Text in images is not selectable, searchable, or "zoomable".
     If you need to convey a custom look (for branding or other reasons), use a web font instead.
-1. **Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG.**
+1. **Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG, lossy WebP, or lossy AVIF.**
     * JPEG uses a combination of lossy and lossless optimization to reduce filesize of the image asset. Try several JPEG quality levels to find the best quality versus filesize tradeoff for your asset.
+    * Lossy WebP or lossy AVIF may be acceptable JPEG alternatives, but be aware that WebP's lossy mode in particular discards some chroma information to achieve smaller images. This means that select colors may not be the same as an equivalent JPEG.
 
-Finally, note that if you are using a WebView to render content in your native application,
+Finally, note that if you are using a WebView to render content in your platform-specific application,
 then you have full control of the client and can use WebP exclusively!
 Facebook and many others use WebP to deliver all of their images within their applications&mdash;
 the savings are definitely worth it.
+
+## Impact on Largest Contentful Paint (LCP)
+
+Images may be [LCP candidates](/lcp/#what-elements-are-considered). That means the size of an image affects its [load time](/optimize-lcp/#3-reduce-resource-load-time). When an image is an LCP candidate, efficiently encoding that image is crucial to improving LCP.
+
+You should strive to apply the advice given in this article so that the perceptual performance of a page is as fast as it can possibly be for all users. LCP is part of perceptual performance, as it measures how fast the largest (and therefore most perceivable) element on the page displays.
diff --git a/src/site/content/en/fast/choose-the-right-image-format/vector-raster-zoom.png b/src/site/content/en/fast/choose-the-right-image-format/vector-raster-zoom.png
deleted file mode 100644
index ceee7b34156..00000000000
Binary files a/src/site/content/en/fast/choose-the-right-image-format/vector-raster-zoom.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-api/hero.png b/src/site/content/en/fast/chrome-ux-report-api/hero.png
deleted file mode 100644
index 0323ddcabb9..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-api/hero.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-api/index.md b/src/site/content/en/fast/chrome-ux-report-api/index.md
deleted file mode 100644
index 1ed9118e37a..00000000000
--- a/src/site/content/en/fast/chrome-ux-report-api/index.md
+++ /dev/null
@@ -1,394 +0,0 @@
----
-layout: post
-title: Using the Chrome UX Report API
-subhead: >
-  Learn how to use the Chrome UX Report API to get easy, RESTful access to 
-  real-user experience data across millions of websites.
-authors:
-  - rviscomi
-  - exterkamp
-hero: hero.png
-description: |
-  Learn how to use the Chrome UX Report API to get easy, RESTful access to 
-  real-user experience data across millions of websites.
-date: 2020-06-25
-tags:
-  - blog
-  - chrome-ux-report
-  - web-vitals
-  - performance
-  - metrics
----
-
-The [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report) (CrUX) dataset represents how real-world Chrome users experience popular destinations on the web. Since 2017, when the queryable dataset was first released on [BigQuery](/chrome-ux-report-bigquery/), field data from CrUX has been integrated into developer tools like [PageSpeed Insights](/chrome-ux-report-pagespeed-insights/), the [CrUX Dashboard](/chrome-ux-report-data-studio-dashboard/), and Search Console's [Core Web Vitals report](https://support.google.com/webmasters/answer/9205520), enabling developers to easily measure and monitor real-user experiences. The piece that has been missing all this time has been a tool that provides free and RESTful access to CrUX data programmatically. To help bridge that gap, we're excited to announce the release of the all new [Chrome UX Report API](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference)!
-
-This API has been built with the goal of providing developers with simple, fast, and comprehensive access to CrUX data. The CrUX API only reports [_field_](/how-to-measure-speed/#lab-data-vs-field-data) user experience data, unlike the existing [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started), which also reports _lab_ data from the Lighthouse performance audits. The CrUX API is streamlined and can quickly serve user experience data, making it ideally suited for real-time auditing applications.
-
-To ensure that developers have access to all of the metrics that matter the most—the [Core Web Vitals](/vitals/#core-web-vitals)—the CrUX API audits and monitors [Largest Contentful Paint](/lcp/) (LCP), [First Input Delay](/fid/) (FID), and [Cumulative Layout Shift](/cls/) (CLS) at both the origin and URL level.
-
-So let's dive in and see how to use it!
-
-## Querying origin data
-
-Origins in the CrUX dataset encompass all underlying page-level experiences. The example below demonstrates how to query the CrUX API for an origin's user experience data using cURL on the command line.
-
-```bash/0,3
-API_KEY="[YOUR_API_KEY]"
-curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
-  --header 'Content-Type: application/json' \
-  --data '{"origin": "https://web.dev"}'
-```
-
-Run this query interactively in the [CrUX API explorer](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord?apix=true&apix_params=%7B%22resource%22%3A%7B%22origin%22%3A%22https%3A%2F%2Fwww.google.com%22%7D%7D).
-
-{% Aside %}
-All API requests must provide a value for the `key` parameter—`[YOUR_API_KEY]` in the example above is left as a placeholder. Get your own private CrUX API key at the click of a button in the official [CrUX API documentation](https://goo.gle/crux-api-key). For convenience, the interactive [CrUX API explorer](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord?apix=true) does not require an API key.
-{% endAside %}
-
-The `curl` command is made up of three parts:
-
-1. The URL endpoint of the API, including the caller's private API key.
-2. The `Content-Type: application/json` header, indicating that the request body contains JSON.
-3. The JSON-encoded [request body](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#request-body), specifying the `https://web.dev` origin.
-
-To do the same thing in JavaScript, use the <a name="crux-api-util">`CrUXApiUtil`</a> utility, which makes the API call and returns the decoded response.
-
-```js/2
-const CrUXApiUtil = {};
-// Get your CrUX API key at https://goo.gle/crux-api-key.
-CrUXApiUtil.API_KEY = '[YOUR_API_KEY]';
-CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
-CrUXApiUtil.query = function (requestBody) {
-  if (CrUXApiUtil.API_KEY == '[YOUR_API_KEY]') {
-    throw 'Replace "YOUR_API_KEY" with your private CrUX API key. Get a key at https://goo.gle/crux-api-key.';
-  }
-  return fetch(CrUXApiUtil.API_ENDPOINT, {
-    method: 'POST',
-    body: JSON.stringify(requestBody)
-  }).then(response => response.json()).then(response => {
-    if (response.error) {
-      return Promise.reject(response);
-    }
-    return response;
-  });
-};
-```
-
-Replace `[YOUR_API_KEY]` with your [key](https://goo.gle/crux-api-key). Next, call the `CrUXApiUtil.query` function and pass in the [request body](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#request-body) object.
-
-```js/1
-CrUXApiUtil.query({
-  origin: 'https://web.dev'
-}).then(response => {
-  console.log(response);
-}).catch(response => {
-  console.error(response);
-});
-```
-
-If data exists for this origin, the API response is a JSON-encoded object containing [metrics](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/Metric) representing the distribution of user experiences. The distribution metrics are histogram bins and percentiles.
-
-```json/11,24
-{
-  "record": {
-    "key": {
-      "origin": "https://web.dev"
-    },
-    "metrics": {
-      "largest_contentful_paint": {
-        "histogram": [
-          {
-            "start": 0,
-            "end": 2500,
-            "density": 0.7925068547983514
-          },
-          {
-            "start": 2500,
-            "end": 4000,
-            "density": 0.1317422195536863
-          },
-          {
-            "start": 4000,
-            "density": 0.07575092564795324
-          }
-        ],
-        "percentiles": {
-          "p75": 2216
-        }
-      },
-      // ...
-    }
-  }
-}
-```
-
-The `start` and `end` properties of the `histogram` object represent the range of values users experience for the given metric. The `density` property represents the proportion of user experiences within that range. In this example, 79% of LCP user experiences across all web.dev pages are under 2,500 milliseconds, which is the "[good](/lcp/#what-is-lcp)" LCP threshold. The `percentiles.p75` value means that 75% of user experiences in this distribution are less than 2,216 milliseconds. Learn more about the response structure in the [response body](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#response-body) documentation.
-
-### Errors
-
-When the CrUX API doesn't have any data for a given origin, it responds with a JSON-encoded error message:
-
-```json
-{
-  "error": {
-    "code": 404,
-    "message": "chrome ux report data not found",
-    "status": "NOT_FOUND"
-  }
-}
-```
-
-To debug this error, first check that the requested origin is publicly navigable. You can test this by entering the origin into your browser's URL bar and comparing it against the final URL after any redirects. Common problems include unnecessarily adding or omitting the subdomain and using the wrong HTTP protocol.
-
-{% Compare 'worse', 'Error' %}
-```json
-{"origin": "http://www.web.dev"}
-```
-{% CompareCaption %}
-This origin incorrectly includes the `http://` protocol and `www.` subdomain.
-{% endCompareCaption %}
-{% endCompare %}
-
-{% Compare 'better', 'Success' %}
-```json
-{"origin": "https://web.dev"}
-```
-{% CompareCaption %}
-This origin is publicly navigable.
-{% endCompareCaption %}
-{% endCompare %}
-
-If the requested origin _is_ the navigable version, this error may also occur if the origin has an insufficient number of samples. All origins and URLs included in the dataset must have a sufficient number of samples to anonymize individual users. Additionally, origins and URLs must be [publicly crawlable](https://developers.google.com/search/reference/robots_txt). Refer to the [CrUX methodology](https://developers.google.com/web/tools/chrome-user-experience-report#methodology) to learn more about how websites are included in the dataset.
-
-## Querying URL data
-
-You've seen how to query the CrUX API for the overall user experience on an origin. To restrict the results to a particular page, use the `url` request parameter.
-
-```bash/0,3
-API_KEY="[YOUR_API_KEY]"
-curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
-  --header 'Content-Type: application/json' \
-  --data '{"url": "https://web.dev/fast/"}'
-```
-
-This cURL command is similar to the origin example, except that the request body uses the `url` parameter to specify the page to look up.
-
-To query URL data from the CrUX API in JavaScript, call the [`CrUXApiUtil.query`](#crux-api-util) function using the `url` parameter in the request body.
-
-```js/1
-CrUXApiUtil.query({
-  url: 'https://web.dev/fast/'
-}).then(response => {
-  console.log(response);
-}).catch(response => {
-  console.error(response);
-});
-```
-
-If data for this URL exists in the CrUX dataset, the API will return a JSON-encoded response like the one below.
-
-```json/11,24
-{
-  "record": {
-    "key": {
-      "url": "https://web.dev/fast/"
-    },
-    "metrics": {
-      "largest_contentful_paint": {
-        "histogram": [
-          {
-            "start": 0,
-            "end": 2500,
-            "density": 0.8477304539092148
-          },
-          {
-            "start": 2500,
-            "end": 4000,
-            "density": 0.08988202359528057
-          },
-          {
-            "start": 4000,
-            "density": 0.062387522495501155
-          }
-        ],
-        "percentiles": {
-          "p75": 1947
-        }
-      },
-      // ...
-    }
-  }
-}
-```
-
-True to form, the results show that `https://web.dev/fast/` has 85% "good" LCP experiences and a 75th percentile of 1,947 milliseconds, which is slightly better than the origin-wide distribution.
-
-### URL normalization
-
-The CrUX API may normalize requested URLs to better match the list of known URLs. For example, querying for the URL `https://web.dev/fast/#measure-performance-in-the-field` will result in data for `https://web.dev/fast/` due to normalization. When this happens, a `urlNormalizationDetails` object will be included in the response.
-
-```json/8-9
-{
-  "record": {
-    "key": {
-      "url": "https://web.dev/fast/"
-    },
-    "metrics": { ... }
-  },
-  "urlNormalizationDetails": {
-    "normalizedUrl": "https://web.dev/fast/",
-    "originalUrl": "https://web.dev/fast/#measure-performance-in-the-field"
-  }
-}
-```
-
-Learn more about [URL normalization](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#urlnormalization) in the CrUX documentation.
-
-## Querying by form factor
-
-{% Aside 'key-term' %}
-A form factor is the type of device on which a user visits a website. Common device types include desktop, phone, and tablet.
-{% endAside%}
-
-User experiences can vary significantly depending on website optimizations, network conditions, and users' devices. To better understand these differences, drill down into origin and URL performance using the [`formFactor`](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#formfactor) dimension of the CrUX API.
-
-The API supports three explicit form factor values: `DESKTOP`, `PHONE`, and `TABLET`. In addition to the origin or URL, specify one of these values in the [request body](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference/rest/v1/records/queryRecord#request-body) to restrict results to only those user experiences. The example below demonstrates how to query the API by form factor using cURL.
-
-```bash/0,3
-API_KEY="[YOUR_API_KEY]"
-curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
-  --header 'Content-Type: application/json' \
-  --data '{"url": "https://web.dev/fast/", "formFactor": "PHONE"}'
-```
-
-To query the CrUX API for form factor-specific data using JavaScript, call the [`CrUXApiUtil.query`](#crux-api-util) function using the `url` and `formFactor` parameters in the request body.
-
-```js/1-2
-CrUXApiUtil.query({
-  url: 'https://web.dev/fast/',
-  formFactor: 'PHONE'
-}).then(response => {
-  console.log(response);
-}).catch(response => {
-  console.error(response);
-});
-```
-
-Omitting the `formFactor` parameter is equivalent to requesting data for all form factors combined.
-
-```json/11,24
-{
-  "record": {
-    "key": {
-      "url": "https://web.dev/fast/",
-      "formFactor": "PHONE"
-    },
-    "metrics": {
-      "largest_contentful_paint": {
-        "histogram": [
-          {
-            "start": 0,
-            "end": 2500,
-            "density": 0.778631284916204
-          },
-          {
-            "start": 2500,
-            "end": 4000,
-            "density": 0.13943202979515887
-          },
-          {
-            "start": 4000,
-            "density": 0.08193668528864119
-          }
-        ],
-        "percentiles": {
-          "p75": 2366
-        }
-      },
-    // ...
-    }
-  }
-}
-```
-
-The `key` field of the response will echo back the `formFactor` request configuration to confirm that only phone experiences are included.
-
-{% Aside 'caution' %}
-The more fine-grained the request is, for example a specific combination of URL and form factor, the fewer user experiences it will include. This may lead to more frequent "not found" errors, especially when querying less popular URLs or the less popular tablet device type.
-{% endAside %}
-
-Recall from the previous section that 85% of user experiences on this page had "good" LCP. Compare that to phone-specific experiences, of which only 78% are considered "good". The 75th percentile is also slower among phone experiences, up from 1,947 milliseconds to 2,366 milliseconds. Segmenting by form factor has the potential to highlight more extreme disparities in user experiences.
-
-## Assessing Core Web Vitals performance
-
-The [Core Web Vitals](/vitals/#core-web-vitals) program defines targets that help determine whether a user experience or a distribution of experiences can be considered "good". In the following example, we use the CrUX API and the [`CrUXApiUtil.query`](#crux-api-util) function to assess whether a web page's distribution of Core Web Vitals metrics (LCP, FID, CLS) are "good".
-
-```js/1
-CrUXApiUtil.query({
-  url: 'https://web.dev/fast/'
-}).then(response => {
-  assessCoreWebVitals(response);
-}).catch(response => {
-  console.error(response);
-});
-
-function assessCoreWebVitals(response) {
-  // See https://web.dev/vitals/#core-web-vitals.
-  const CORE_WEB_VITALS = [
-    'largest_contentful_paint',
-    'first_input_delay',
-    'cumulative_layout_shift'
-  ];
-  CORE_WEB_VITALS.forEach(metric => {
-    const data = response.record.metrics[metric];
-    if (!data) {
-      console.log('No data for', metric);
-      return;
-    }
-    const p75 = data.percentiles.p75;
-    const threshold = data.histogram[0].end;
-    // A Core Web Vitals metric passes the assessment if
-    // its 75th percentile is under the "good" threshold.
-    const passes = p75 < threshold;
-    console.log(`The 75th percentile (${p75}) of ${metric} ` +
-        `${passes ? 'passes' : 'does not pass'} ` +
-        `the Core Web Vitals "good" threshold (${threshold}).`)
-  });
-}
-```
-
-{% Aside 'gotchas' %}
-The API may only be called with one origin or URL at a time. To assess multiple websites or pages, make separate calls to the API.
-{% endAside %}
-
-The results show that this page passes the Core Web Vitals assessments for all three metrics.
-
-```text
-The 75th percentile (1973) of largest_contentful_paint passes the Core Web Vitals "good" threshold (2500).
-The 75th percentile (20) of first_input_delay passes the Core Web Vitals "good" threshold (100).
-The 75th percentile (0.05) of cumulative_layout_shift passes the Core Web Vitals "good" threshold (0.10).
-```
-
-Combined with an automated way to monitor API results, data from CrUX can be used to ensure that real-user experiences **get fast** and **stay fast**. For more information about Core Web Vitals and how to measure them, check out [Web Vitals](/vitals) and [Tools to measure Core Web Vitals](/vitals-tools).
-
-## What's next?
-
-The features included in the initial version of the CrUX API only scratch the surface of the kinds of insights that are possible with CrUX. Users of the [CrUX dataset on BigQuery](/chrome-ux-report-bigquery/) may be familiar with some of the more advanced features including:
-
-- Additional metrics
-  - `first_paint`
-  - `dom_content_loaded`
-  - `onload`
-  - `time_to_first_byte`
-  - `notification_permissions`
-- Additional dimensions
-  - month
-  - country
-  - effective connection type (ECT)
-- Additional granularity
-  - detailed histograms
-  - more percentiles
-
-Over time, we hope to integrate more of these features with the CrUX API's ease of use and free pricing to enable new ways of exploring the data and discovering insights about the state of user experiences on the web.
-
-Check out the official [CrUX API docs](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference) to [acquire your API key](https://goo.gle/crux-api-key) and explore more example applications. We hope you'll give it a try and we'd love to hear any questions or feedback you may have, so please reach out to us on the [CrUX discussion forum](https://groups.google.com/a/chromium.org/forum/#!forum/chrome-ux-report). And to stay up to date on everything we have planned for the CrUX API, subscribe to the [CrUX announcement forum](https://groups.google.com/a/chromium.org/forum/#!forum/chrome-ux-report-announce) or follow us on Twitter at [@ChromeUXReport](https://twitter.com/ChromeUXReport).
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery.png b/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery.png
deleted file mode 100755
index c3b9893f17a..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fast_fcp.png b/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fast_fcp.png
deleted file mode 100755
index dc2441756bf..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fast_fcp.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp.png b/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp.png
deleted file mode 100755
index 14f6c56954d..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp_sum.png b/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp_sum.png
deleted file mode 100755
index ae702051703..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_fcp_sum.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_timeseries.png b/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_timeseries.png
deleted file mode 100755
index 5eee48e98d8..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-bigquery/bigquery_timeseries.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-bigquery/index.md b/src/site/content/en/fast/chrome-ux-report-bigquery/index.md
deleted file mode 100644
index 7c03c417f43..00000000000
--- a/src/site/content/en/fast/chrome-ux-report-bigquery/index.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-layout: post
-title: Using the Chrome UX Report on BigQuery
-authors:
-  - rviscomi
-description: |
-  In this guide, learn how to use BigQuery to write queries against the CrUX 
-  dataset to extract insightful results about the state of user experiences on 
-  the web.
-date: 2020-06-12
-tags:
-  - performance
----
-
-The raw data of the Chrome UX Report 
-([CrUX](https://developers.google.com/web/tools/chrome-user-experience-report/)) 
-is available on 
-[BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report), a 
-database on the Google Cloud Platform (GCP). Using BigQuery requires a 
-[GCP project](https://developers.google.com/web/tools/chrome-user-experience-report/getting-started#getting-started) 
-and basic knowledge of SQL.
-
-In this guide, learn how to use BigQuery to write queries against the CrUX 
-dataset to extract insightful results about the state of user experiences on 
-the web:
-
-- Understand how the data is organized
-- Write a basic query to evaluate an origin's performance
-- Write an advanced query to track performance over time
-
-## Data organization
-
-Start by looking at a basic query:
-
-```sql
-SELECT COUNT(DISTINCT origin) FROM `chrome-ux-report.all.201809`
-```
-
-To run the query, enter it into the query editor and press the 
-"Run query" button:
-
-<img class="w-screenshot" src="./bigquery.png" alt="Enter a simple query into editor and press Run.">
-
-There are two parts to this query:
-
-- `SELECT COUNT(DISTINCT origin)` means querying for the number of origins in 
-the table. Roughly speaking, two URLs are part of the same origin if they have 
-the same scheme, host, and port.
-
-- `FROM `chrome-ux-report.all.201809`` specifies the address of the source 
-table, which has three parts:
-  - The Cloud project name `chrome-ux-report` within which all CrUX data is organized
-  - The dataset `all`, representing data across all countries
-  - The table `201809`, the year and month of the data in YYYYMM format
-
-There are also datasets for every country. For example, 
-`chrome-ux-report.country_ca.201809` represents only the user experience data 
-originating from Canada.
-
-Within each dataset there are tables for every month since 201710. New tables 
-for the previous calendar month are published regularly.
-
-The structure of the data tables (also known as the _schema_) contains:
-
-- The origin, e.g., `origin = 'https://www.example.com'`, which represents the 
-aggregate user experience distribution for all pages on that website
-- The connection speed at the time of page load, e.g., 
-`effective_connection_type.name = '4G'`
-- The device type, e.g., `form_factor.name = 'desktop'`
-- The UX metrics themselves
-  - first_paint (FP)
-  - first_contentful_paint (FCP)
-  - dom_content_loaded (DCL)
-  - onload (OL)
-  - experimental.first_input_delay (FID)
-
-The data for each metric is organized as an array of objects. In JSON notation, 
-`first_contentful_paint.histogram.bin` would look similar to this:
-
-```json
-[
-	{"start": 0, "end": 100, "density": 0.1234},
-	{"start": 100, "end": 200, "density": 0.0123},
-	...
-]
-```
-
-Each bin contains a start and an end time in milliseconds and a density 
-representing the percent of user experiences within that time range. In other 
-words, 12.34% of FCP experiences for this hypothetical origin, connection speed, 
-and device type are less than 100ms. The sum of all bin densities is 100%.
-
-[Browse the structure of the tables in BigQuery.](https://bigquery.cloud.google.com/table/chrome-ux-report:all.201809?tab=preview)
-
-## Evaluating performance
-
-Let's use our knowledge of the table schema to write a query that extracts this 
-performance data.
-
-```sql
-SELECT
-  fcp
-FROM
-  `chrome-ux-report.all.201809`,
-  UNNEST(first_contentful_paint.histogram.bin) AS fcp
-WHERE
-  origin = 'https://developers.google.com' AND
-  effective_connection_type.name = '4G' AND
-  form_factor.name = 'phone' AND
-  fcp.start = 0
-```
-
-<img class="w-screenshot" src="./bigquery_fcp.png" alt="Querying CrUX FCP on BigQuery">
-
-The result is `0.0013`, meaning that 0.13% of user experiences on this origin 
-are between 0 and 100ms on 4G and on a phone. If we want to generalize our 
-query to any connection and any device type, we can omit them from the `WHERE` 
-clause and simply use the `SUM` aggregator function to add up all of their 
-respective bin densities:
-
-```sql
-SELECT
-  SUM(fcp.density)
-FROM
-  `chrome-ux-report.all.201809`,
-  UNNEST(first_contentful_paint.histogram.bin) AS fcp
-WHERE
-  origin = 'https://developers.google.com' AND
-  fcp.start = 0
-```
-
-<img class="w-screenshot" src="./bigquery_fcp_sum.png" alt="Summing CrUX FCP on BigQuery">
-
-The result is `0.0399`, or 3.99% across all devices and connection types. 
-Let's modify the query slightly and add up the densities for all bins that are 
-in the "fast" FCP range of 0–1000ms:
-
-```sql
-SELECT
-  SUM(fcp.density) AS fast_fcp
-FROM
-  `chrome-ux-report.all.201809`,
-  UNNEST(first_contentful_paint.histogram.bin) AS fcp
-WHERE
-  origin = 'https://developers.google.com' AND
-  fcp.start < 1000
-```
-
-<img class="w-screenshot" src="./bigquery_fast_fcp.png" alt="Querying fast FCP on BigQuery">
-
-This gives us `0.3913`. In other words, 39.13% of the FCP user experiences on 
-developers.google.com are considered "fast" according to the FCP range 
-definition.
-
-## Tracking performance
-
-Now that we've extracted performance data about an origin, let's compare it to 
-the historical data available in older tables. To do that, we could rewrite the 
-table address to an earlier month, or we could use the wildcard syntax to query 
-all months:
-
-```sql
-SELECT
-  _TABLE_SUFFIX AS yyyymm,
-  SUM(fcp.density) AS fast_fcp
-FROM
-  `chrome-ux-report.all.*`,
-  UNNEST(first_contentful_paint.histogram.bin) AS fcp
-WHERE
-  origin = 'https://developers.google.com' AND
-  fcp.start < 1000
-GROUP BY
-  yyyymm
-ORDER BY
-  yyyymm
-```
-
-<img class="w-screenshot" src="./bigquery_timeseries.png" alt="Querying a timeseries of CrUX FCP on BigQuery">
-
-Here, we see that the percent of fast FCP experiences varies by a few percentage 
-points each month.
-
-yyyymm | fast_fcp
--- | --
-201711 | 40.17%
-201712 | 38.27%
-201801 | 39.89%
-201802 | 39.76%
-201803 | 41.17%
-201804 | 41.31%
-201805 | 41.55%
-201806 | 40.73%
-201807 | 40.63%
-201808 | 37.75%
-201809 | 39.13%
-
-With these techniques, you're able to look up the performance for an origin, 
-calculate the percent of fast experiences, and track it over time. 
-As a next step, try querying for two or more origins and comparing their 
-performance.
-
-## FAQ
-
-### When would I use BigQuery as opposed to other tools?
-
-BigQuery is only needed when you can't get the same information from other tools 
-like the CrUX Dashboard and PageSpeed Insights. For example, BigQuery allows you 
-to slice the data in meaningful ways and even join it with other public datasets 
-like the [HTTP Archive](https://httparchive.org/) to do some advanced data 
-mining.
-
-### Are there any limitations to using BigQuery?
-
-Yes, the most important limitation is that by default users can only query 1TB 
-worth of data per month. Beyond that, the standard rate of $5/TB applies.
-
-### Where can I learn more about BigQuery?
-
-Check out the [BigQuery documentation](https://cloud.google.com/bigquery/) for 
-more info.
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_connector.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_connector.png
deleted file mode 100644
index 76ec91a545c..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_connector.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv.png
deleted file mode 100644
index 3b285b4d560..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv_tablet.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv_tablet.png
deleted file mode 100644
index 0c866fd4102..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_cwv_tablet.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_device.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_device.png
deleted file mode 100644
index 8d3634f33b6..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_device.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_embed.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_embed.png
deleted file mode 100755
index 7001a358b48..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_embed.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_error.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_error.png
deleted file mode 100644
index e254ffd6cb0..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_error.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_lcp.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_lcp.png
deleted file mode 100644
index 2b235673fbe..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_lcp.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_schema.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_schema.png
deleted file mode 100644
index 0bc7acbb004..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/dash_schema.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/hero.png b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/hero.png
deleted file mode 100644
index 2611ab4396a..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/hero.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/index.md b/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/index.md
deleted file mode 100644
index a163cd4c429..00000000000
--- a/src/site/content/en/fast/chrome-ux-report-data-studio-dashboard/index.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-layout: post
-title: Using the CrUX Dashboard on Data Studio
-authors:
-  - rviscomi
-hero: hero.png
-description: |
-  Data Studio is a powerful data visualization tool that enables you to build
-  dashboards on top of big data sources, like the Chrome UX Report. In this
-  guide, learn how to create your own custom CrUX Dashboard to track an origin's
-  user experience.
-date: 2020-06-22
-tags:
-  - performance
-  - blog
----
-
-[Data Studio](https://marketingplatform.google.com/about/data-studio/) is a
-powerful data visualization tool that enables you to build dashboards on top of
-big data sources, like the [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/)
-(CrUX). In this guide, learn how to create your own custom CrUX Dashboard to
-track an origin's user experience trends.
-
-<img class="w-screenshot" src="./dash_lcp.png" alt="CrUX Dashboard">
-
-The CrUX Dashboard is built with a Data Studio feature called [Community
-Connectors](https://developers.google.com/datastudio/connector/).
-This connector is a pre-established link between the raw CrUX data on
-[BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report) 
-and the visualizations of Data Studio. It eliminates the need for users of the 
-dashboard to write any queries or generate any charts. Everything is built for 
-you; all you need is to provide an origin and a custom dashboard will be 
-generated for you.
-
-## Creating a dashboard
-
-To get started, go to [g.co/chromeuxdash](https://g.co/chromeuxdash).
-This will take you to the CrUX community connector page where you can provide
-the origin for which the dashboard will be generated. Note that first-time 
-users may need to complete permission or marketing preference prompts.
-
-<img class="w-screenshot" src="./dash_connector.png" alt="CrUX Dashboard connector">
-
-The text input field only accepts origins, not full URLs. For example:
-
-{% Compare 'better', 'Origin (Supported)' %}
-```text
-https://developers.google.com
-```
-{% endCompare %}
-
-{% Compare 'worse', 'URL (Not supported)' %}
-```text
-https://developers.google.com/web/tools/chrome-user-experience-report/
-```
-{% endCompare %}
-
-If you omit the protocol, HTTPS is assumed. Subdomains matter, for example
-`https://developers.google.com` and `https://www.google.com` are considered to 
-be different origins.
-
-Some common issues with origins are providing the wrong protocol, for example
-`http://` instead of `https://`, and omitting the subdomain when needed.
-Some websites include redirects, so if `http://example.com` redirects to
-`https://www.example.com`, then you should use the latter, which is the 
-canonical version of the origin. As a rule of thumb, use whichever origin 
-users see in the URL bar.
-
-If your origin is not included in the CrUX dataset, you may get an error message
-like the one below. There are over 4 million origins in the dataset, but the one
-you want may not have sufficient data to be included.
-
-<img class="w-screenshot" src="./dash_error.png" alt="CrUX Dashboard error message">
-
-If the origin exists, you'll be taken to the schema page for the dashboard.
-This shows you all of the fields that are included: each effective connection
-type, each form factor, the month of the dataset release, the distribution of
-performance for each metric, and of course the name of the origin. There's
-nothing you need to do or change on this page, just click **Create Report** to 
-continue.
-
-<img class="w-screenshot" src="./dash_schema.png" alt="CrUX Dashboard schema">
-
-## Using the dashboard
-
-Each dashboard comes with three types of pages:
-
-1. Core Web Vitals overview
-2. Metric performance
-3. User demographics
-
-Each page includes a chart showing distributions over time for each available
-monthly release. As new datasets are released, you can simply refresh the
-dashboard to get the latest data.
-
-The monthly datasets are released on the second Tuesday of every month. For 
-example, the dataset consisting of user experience data from the month of May 
-is released on the second Tuesday of June.
-
-### Core Web Vitals overview
-
-The first page is an overview of the origin's monthly
-[Core Web Vitals](/vitals/) performance. These are the most important UX metrics that Google recommends you focus on.
-
-<img class="w-screenshot" src="./dash_cwv.png" alt="CrUX Dashboard Core Web Vitals overview">
-
-Use the Core Web Vitals page to understand how the origin is experienced by 
-desktop and phone users. By default, the most recent month at the time you 
-created the dashboard is selected. To change between older or newer monthly 
-releases, use the **Month** filter at the top of the page.
-
-Note that tablet is omitted from these charts by default, but if needed you 
-could remove the **No Tablet** filter in the bar chart configuration, shown 
-below.
-
-<img class="w-screenshot" src="./dash_cwv_tablet.png" alt="Editing the CrUX Dashboard to show tablets on the Core Web Vitals page">
-
-### Metric performance
-
-After the Core Web Vitals page, you'll find standalone pages for all
-[metrics](https://developers.google.com/web/tools/chrome-user-experience-report/#metrics)
-in the CrUX dataset.
-
-<img class="w-screenshot" src="./dash_lcp.png" alt="CrUX Dashboard LCP page">
-
-Atop each page is the **Device** filter, which you can use to restrict the form 
-factors included in the experience data. For example, you can drill down 
-specifically into phone experiences. This setting persists across pages.
-
-The primary visualizations on these pages are the monthly distributions of
-experiences categorized as "Good", "Needs Improvement", and "Poor". The 
-color-coded legend below the chart indicates the range of experiences included
-in the category. For example, in the screenshot above, you can see the 
-percent of "good"
-[Largest Contentful Paint](/lcp/#what-is-a-good-lcp-score) (LCP) experiences
-fluctuating and getting slightly worse in recent months.
-
-The most recent month's percentages of "good" and "poor" experiences are shown 
-above the chart along with an indicator of the percent difference from the 
-previous month. For this origin, "good" LCP experiences fell by 3.2% to 56.04% 
-month-over-month.
-
-{% Aside 'caution' %}
-Due to a quirk with Data Studio, you may sometimes see `No Data` here. This is
-normal and due to the previous month's release not being available until the
-second Tuesday.
-{% endAside %}
-
-Additionally, for metrics like LCP and other Core Web Vitals that provide 
-explicit percentile recommendations, you'll find the "P75" metric between the 
-"good" and "poor" percentages. This value corresponds to the origin's 75th 
-percentile of user experiences. In other words, 75% of experiences are better
-than this value. One thing to note is that this applies to the overall 
-distribution across _all devices_ on the origin. Toggling specific devices 
-with the **Device** filter will not recalculate the percentile.
-
-{% Details %}
-{% DetailsSummary %}
-Boring technical caveats about percentiles
-{% endDetailsSummary%}
-
-Be aware that the percentile metrics are based on the histogram data from 
-[BigQuery](/chrome-ux-report-bigquery/), so the granularity will be coarse: 
-1000ms for LCP, 100ms for FID, and 0.05 for CLS. In other words, a P75 LCP of
-3800ms indicates that the true 75th percentile is somewhere between 3800ms and
-3900ms.
-
-Additionally, the BigQuery dataset uses a technique called "bin spreading" in 
-which densities of user experiences are intrinsically grouped into very coarse 
-bins of decreasing granularity. This allows us to include minute densities in 
-the tail of the distribution without having to exceed four digits of 
-precision. For example, LCP values less than 3 seconds are grouped into bins 
-200ms wide. Between 3 and 10 seconds, bins are 500ms wide. Beyond 10 seconds, 
-bins are 5000ms wide, etc. Rather than having bins of varying widths, bin 
-spreading ensures that all bins are a constant 100ms wide (the greatest common 
-divisor), and the distribution is linearly interpolated across each bin.
-
-Corresponding P75 values in tools like PageSpeed Insights are not based on the 
-public BigQuery dataset and are able to provide millisecond-precision values.
-{% endDetails %}
-
-### User demographics
-
-There are two [dimensions](https://developers.google.com/web/tools/chrome-user-experience-report/#dimensions)
-included on the user demographic pages: devices and effective connection
-types (ECTs). These pages illustrate the distribution of page views across the 
-entire origin for users in each demographic.
-
-The device distribution page shows you the breakdown of phone, desktop, and
-tablet users over time. Many origins tend to have little to no tablet data so
-you'll often see "0%" hanging off the edge of the chart.
-
-<img class="w-screenshot" src="./dash_device.png" alt="CrUX Dashboard device page">
-
-Similarly, the ECT distribution page shows you the breakdown of 4G, 3G, 2G, 
-slow 2G, and offline experiences.
-
-{% Aside 'key-term' %}
-Effective connection types are considered _effective_ because they're based 
-on bandwidth measurements on users' devices, and don't imply any particular 
-technology used. For example, a desktop user on fast Wi-Fi may be labelled as 
-4G while a slower mobile connection might be labelled as 2G.
-{% endAside %}
-
-The distributions for these dimensions are calculated using segments of the 
-[First Contentful Paint](/fcp/) (FCP) histogram data.
-
-## FAQ
-
-### When would I use the CrUX Dashboard as opposed to other tools?
-
-The CrUX Dashboard is based on the same underlying data available on BigQuery,
-but you don't need to write a single line of SQL to extract the data and you
-don't ever have to worry about exceeding any free quotas. Setting up a 
-dashboard is quick and easy, all of the visualizations are generated for you,
-and you have the control to share it with anyone you want.
-
-### Are there any limitations to using the CrUX Dashboard?
-
-Being based on BigQuery means that the CrUX Dashboard inherits all of its 
-limitations as well. It is restricted to origin-level data at monthly 
-granularity.
-
-The CrUX Dashboard also trades away some of the versatility of the raw data on 
-BigQuery for simplicity and convenience. For example, metric distributions are 
-only given as "good", "needs improvement", and "poor", as opposed to the full 
-histograms. The CrUX Dashboard also provides data at a global level, while the 
-BigQuery dataset allows you to zoom in on particular countries.
-
-### Where can I learn more about Data Studio?
-
-Check out the [Data Studio features page](https://marketingplatform.google.com/about/data-studio/features/)
-for more info.
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/index.md b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/index.md
deleted file mode 100644
index 313d3632633..00000000000
--- a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/index.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-layout: post
-title: Using the Chrome UX Report on PageSpeed Insights
-authors:
-  - rviscomi
-description: |
-  PageSpeed Insights (PSI) is a tool for web developers to understand what a
-  page's performance is and how to improve it. In this guide, learn how to use
-  PSI to extract insights from CrUX and better understand the user experience.
-date: 2020-05-28
-tags:
-  - performance
----
-
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
-(PSI) is a tool for web developers to understand what a page's performance is
-and how to improve it. It uses [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-to audit the page and identify opportunities to improve performance. It also
-integrates with the [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/) (CrUX)
-to show how real users experience the page and the origin in
-aggregate. In this guide, learn how to use PSI to extract insights from CrUX
-and better understand the user experience.
-
-<img class="w-screenshot" src="./psi.png" alt="Field data from CrUX in PageSpeed Insights">
-
-## Reading the data
-
-To get started, go to [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)
-and enter the URL of the page you want to test.
-
-<img class="w-screenshot" src="./psi_url.png" alt="Enter a URL to get started on PageSpeed Insights">
-
-After a few seconds, Lighthouse
-audits will be performed and you will see sections for Field and Lab data. CrUX
-is a collection of real user experiences from the field, while Lighthouse is a
-controlled test in the lab.
-
-<img class="w-screenshot" src="./psi_page.png" alt="Field data from CrUX in PageSpeed Insights">
-
-In the **Field Data** section, you'll see four metrics: 
-[First Contentful Paint](/fcp/) (FCP), [First Input Delay](/fid/) (FID), 
-[Largest Contentful Paint](/lcp/) (LCP), and 
-[Cumulative Layout Shift](/cls/) (CLS). FID, LCP, and CLS are
-considered the [Core Web Vitals](/vitals/#core-web-vitals) metrics. These 
-metrics are representative of the user experience in different ways:
-
-- **FCP** measures the time until the page displays something in the
- foreground, like some text or a logo.
-- **FID** measures the interactivity of the page, from the user's first
-  interaction to the time the page responds to it.
-- **LCP** measures the time until the page displays what is likely its main
-  content, like a hero image or heading.
-- **CLS** measures the degree of layout instability on the page, due to shifts
-  like asynchronously loaded content being injected.
-
-Metric | "Good" | "Needs Improvement" | "Poor"
--- | -- | -- | --
-FCP | 0–1000ms | 1000ms–3000ms | 3000ms+
-FID | 0–100ms | 100–300ms | 300ms+
-LCP | 0–2500ms | 2500–4000ms | 4000ms+
-CLS | 0.00-0.10 | 0.10–0.25 | 0.25+
-
-This table describes how values for these metrics are categorized as either
-"good", "needing improvement", or "poor".
-
-There are three ways that the user experience is displayed in PSI:
-
-- a label summarizing the page as passing or not passing the Core Web Vitals 
-  assessment
-- percentiles measured in seconds or milliseconds (CLS is unitless)
-- a distribution representing the percent of "good", "needing improvement", and
-  "poor" experiences
-
-In the screenshot above, the page is labelled as "passing" the Core Web Vitals
-assessment. To pass, the percentile must be categorized as "good".
-Otherwise, the page is labelled as "not passing".
-
-The percentiles shown for all metrics correspond to the 75th percentile. In
-statistics, a percentile is a measure that indicates the value below which a
-given percentage of samples fall. For example, the screenshot above shows that
-FID's 75th percentile is 15ms, meaning that 75% of FID experiences are faster
-than 15ms. These values are color-coded according to the threshold table above
-where "good" values are green, values "needing improvement" are orange, and 
-"poor" values are red.
-
-Finally, the distributions for each metric are illustrated using the "good",
-"needs improvement", and "poor" grouping. For example, FCP experiences on this
-page are "good" (less than 1 second) 44% of the time. FID is "poor" (at least
-300 milliseconds) 1% of the time. These distributions represent all user
-experiences on the page and their shapes indicate the tendency to be either
-"good" or "poor".
-
-## Summary of origin performance
-
-PSI also includes a summary of origin performance. This is an aggregation of
-user experiences across all pages of an origin. You can get the same stats for an entire origin that are available for individual pages. This data is
-closely aligned with what is available on [BigQuery](/chrome-ux-report-bigquery/), while the page-level
-performance is not made available to query.
-
-<img class="w-screenshot" src="./psi_origin.png" alt="Origin CrUX performance in PageSpeed Insights">
-
-There is one major difference between the origin-level data on PSI versus
-BigQuery. The datasets on BigQuery are released once a month and encompass the data from the previous calendar month. For example, the 202005 dataset
-includes all user experiences that occurred in May 2020. On the other
-hand, PSI aggregates new data every day encompassing the previous 28 days. So
-the results you see today may be different tomorrow and they would not
-necessarily be the same as what you'd see in the monthly aggregations on
-BigQuery.
-
-## Null response when URL not available
-
-If the URL you entered is not available in CrUX, you will see a null response
-like the one below, indicating that there is not enough field data.
-Lab data from Lighthouse is still available to give you an approximation of the page's performance.
-
-<img class="w-screenshot" src="./psi_no_data.png" alt="No CrUX data on PageSpeed Insights">
-
-## FAQ
-
-### When would I use PageSpeed Insights as opposed to other tools?
-
-PSI combines the real-world user experience data of CrUX with the lab-based
-performance diagnostics of Lighthouse. This makes it easy to see how fast a
-page is experienced and how to make it faster all in one place. The daily
-aggregation of field data in PSI makes it a great place to more closely
-monitor origin or URL performance than tools with less frequent aggregations.
-
-### Are there any limitations to using PageSpeed Insights?
-
-PSI only provides the most recent daily aggregation, so you wouldn't necessarily be able to see how a site's performance is trending. There are also some non-vital metrics included in the CrUX dataset that are not exposed in PSI.
-
-### Where can I learn more about PageSpeed Insights?
-
-Check out the [PSI documentation](https://developers.google.com/speed/docs/insights/v5/about)
-for more info.
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi.png b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi.png
deleted file mode 100644
index 693db62b508..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_no_data.png b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_no_data.png
deleted file mode 100644
index da675f4f2c4..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_no_data.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_origin.png b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_origin.png
deleted file mode 100644
index 5d0e25dfa24..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_origin.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_page.png b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_page.png
deleted file mode 100644
index e808745c64a..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_page.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_url.png b/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_url.png
deleted file mode 100644
index 36b3ed4e71d..00000000000
Binary files a/src/site/content/en/fast/chrome-ux-report-pagespeed-insights/psi_url.png and /dev/null differ
diff --git a/src/site/content/en/fast/chrome-ux-report/index.md b/src/site/content/en/fast/chrome-ux-report/index.md
index 42551296cc7..b05ea5d86fc 100644
--- a/src/site/content/en/fast/chrome-ux-report/index.md
+++ b/src/site/content/en/fast/chrome-ux-report/index.md
@@ -8,17 +8,19 @@ description: |
   user experience data on millions of websites. Unlike lab data, CrUX data
   actually comes from opted-in users in the field.
 date: 2020-07-13
+updated: 2023-04-25
 tags:
   - performance
+  - chrome-ux-report
 ---
 
-The [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/) (informally known as CrUX) is a public dataset of real user experience data on millions of websites. Unlike lab data, CrUX data actually comes from [opted-in users](https://developers.google.com/web/tools/chrome-user-experience-report/#methodology) in the field. It measures the [Core Web Vitals](/vitals/) metrics, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), as well as diagnostic metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP).
+The [Chrome UX Report](https://developer.chrome.com/docs/crux/) (informally known as CrUX) is a public dataset of real user experience data on millions of websites. Unlike lab data, CrUX data actually comes from [opted-in users](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) in the field. It measures the [Core Web Vitals](/vitals/) metrics, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), as well as diagnostic metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP).
 
 The dataset also contains qualitative dimensions
 about the user experience, for example, the device and connection types, which
 enables drilling down into user experiences grouped by similar technologies.
 See the
-[CrUX documentation](https://developers.google.com/web/tools/chrome-user-experience-report/#metrics)
+[CrUX documentation](https://developer.chrome.com/docs/crux/methodology/#metrics)
 for the full list of metrics.
 
 Using this data, developers are able to understand the wide distribution of real
@@ -30,27 +32,27 @@ competition and industry.
 ## How to use it
 
 There are four primary ways to extract insights from the Chrome UX Report,
-ranging in complexity. For quick and easy analysis of website performance, the [CrUX Dashboard](http://g.co/chromeuxdash) and
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
-are the recommended tools. [BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report)
+ranging in complexity. For quick and easy analysis of website performance, the [CrUX Dashboard](https://developer.chrome.com/docs/crux/dashboard/) and
+[PageSpeed Insights](https://pagespeed.web.dev/)
+are the recommended tools. [BigQuery](https://developer.chrome.com/docs/crux/bigquery/)
 trades some of the simplicity of the analysis for the power of customization
-and more granular insights. And the [API](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference) enables the integration of high-level data with other applications.
+and more granular insights. And the [API](https://developer.chrome.com/docs/crux/api/) enables the integration of high-level data with other applications, and the [History API](https://developer.chrome.com/docs/crux/history-api/) provides historical data for trend analysis.
 
 ### CrUX Dashboard
 
-The [CrUX Dashboard](http://g.co/chromeuxdash) is a customizable data
+The [CrUX Dashboard](https://developer.chrome.com/docs/crux/dashboard/) is a customizable data
 visualization tool of websites' historical performance built on
-[Data Studio](https://marketingplatform.google.com/about/data-studio/).
+[Looker Studio](https://cloud.google.com/looker-studio).
 The data is sourced from the BigQuery dataset and all of the SQL queries are
 handled for you under the hood. The dashboard shows the distribution of user
 experiences, as captured by key performance metrics, and how it changes over
 time. It also shows how the distributions of qualitative metrics like device
 type and effective connection type change over time. Try the
-[Data Studio Dashboard guide](/chrome-ux-report-data-studio-dashboard).
+[Looker Studio Dashboard guide](https://developer.chrome.com/docs/crux/dashboard/).
 
 ### PageSpeed Insights
 
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+[PageSpeed Insights](https://pagespeed.web.dev/)
 (PSI) shows the most recent performance distributions broken down by desktop and
 mobile users. Performance data is available for individual web pages
 (in addition to entire origins) and is aggregated for the most recent 28 days of
@@ -58,11 +60,11 @@ data (as opposed to the previous calendar month on BigQuery). Using this tool is
 as easy as entering a URL or origin in the search box on the web interface, and
 the field performance data is displayed alongside prescriptive suggestions to
 optimize the page. Try the
-[PageSpeed Insights guide](/chrome-ux-report-pagespeed-insights).
+[PageSpeed Insights guide](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights).
 
 ### CrUX on BigQuery
 
-The CrUX database on [BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report),
+The CrUX database on [BigQuery](https://developer.chrome.com/docs/crux/bigquery/),
 part of the Google Cloud Platform (GCP) with a web and command line interface,
 hosts the raw data that aggregates key UX performance metrics for top origins
 on the web. New tables are periodically added to the database covering the
@@ -71,11 +73,15 @@ for specific insights. BigQuery requires knowledge of SQL and a GCP project with
 billing enabled to run the queries. This is an especially useful tool for power
 users who require low-level access to the data to create custom reports,
 benchmarks, and reports about the state of the web. Try the
-[BigQuery guide](/chrome-ux-report-bigquery).
+[BigQuery guide](https://developer.chrome.com/blog/chrome-ux-report-bigquery).
 
 ### CrUX API
 
-The CrUX API is a free and RESTful interface for looking up origin or URL-level user experience data. The data is updated daily and aggregates the previous 28 days of data, similar to PageSpeed Insights. You can use this API to build your own applications on top of the real-user experience data in CrUX. Try the [CrUX API](/chrome-ux-report-api) guide.
+The [CrUX API](https://developer.chrome.com/docs/crux/api/) is a free and RESTful interface for looking up origin or URL-level user experience data. The data is updated daily and aggregates the previous 28 days of data, similar to PageSpeed Insights. You can use this API to build your own applications on top of the real-user experience data in CrUX. Try the [CrUX API guide](https://developer.chrome.com/blog/chrome-ux-report-api).
+
+### CrUX History API
+
+The [CrUX History API](https://developer.chrome.com/docs/crux/history-api/) is a free and RESTful interface, similar to the daily API, for looking up origin or URL-level user experience data. The data is updated weekly and aggregates the previous 28 days of data, over a period of 6 months. You can use this API to build your own applications on top of the real-user experience data in CrUX. Try the [CrUX History API guide](https://developer.chrome.com/blog/chrome-ux-report-history-api/).
 
 ## How to get help
 
@@ -91,11 +97,11 @@ can follow to ask questions and listen for product announcements.
 
 ## See it in action
 
-In order to get more acquainted with the available data, walk through
-step-by-step guides for using BigQuery, Data Studio Dashboard, and PageSpeed
-Insights:
+To get more acquainted with the available data, walk through
+step-by-step guides for using Looker Studio Dashboard, PageSpeed Insights, Bigquery, and both the daily and history API:
 
-- [CrUX: Data Studio Dashboard](/chrome-ux-report-data-studio-dashboard)
-- [CrUX: PageSpeed Insights](/chrome-ux-report-pagespeed-insights)
-- [CrUX: BigQuery](/chrome-ux-report-bigquery)
-- [CrUX: API](/chrome-ux-report-api)
+- [CrUX: Looker Studio Dashboard](https://developer.chrome.com/docs/crux/dashboard/)
+- [CrUX: PageSpeed Insights](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights)
+- [CrUX: BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery)
+- [CrUX: API](https://developer.chrome.com/blog/chrome-ux-report-api)
+- [CrUX: History API](https://developer.chrome.com/blog/chrome-ux-report-history-api/)
diff --git a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/devtools_network_throttling.png b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/devtools_network_throttling.png
deleted file mode 100755
index ab84345207c..00000000000
Binary files a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/devtools_network_throttling.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/index.md b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/index.md
index 5dca9f6c395..1920abed313 100755
--- a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/index.md
+++ b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/index.md
@@ -20,14 +20,16 @@ quality. This page's background video will load only when users are on a fast
 network. On slower networks, an image will load instead.
 
 The
-[Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation)
+[Network Information API](https://developer.mozilla.org/docs/Web/API/NetworkInformation)
 enables you to access information about the user's connection quality. You will
 use its `effectiveType` property to decide when to serve a video and when to
 serve an image. `effectiveType` can be `'slow-2g'`, `'2g'`, `'3g'`, or `'4g'`.
 
+{% BrowserCompat 'api.NetworkInformation' %}
+
 ## Step 1: Check connection type
 
-The `index.html` file contains a `<video>` tag to display the background video (line 22). The code in `script.js` loads the video by setting the video tag's `src` attribute. (The video loading code is described in more detail in [Step 2](/codelab-adapt-video-to-image-serving-based-on-network-quality#step-2:-load-video).)
+The `index.html` file contains a `<video>` tag to display the background video (line 22). The code in `script.js` loads the video by setting the video tag's `src` attribute. (The video loading code is described in more detail in [Step 2](/codelab-adapt-video-to-image-serving-based-on-network-quality/#step-2-load-video).)
 
 To load the video conditionally, first check if the Network Information API is available; if it is, check the connection type.
 
@@ -85,7 +87,7 @@ Here's how the video loading code works: the `<video>` tag doesn't download or d
 <video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
 ```
 
-[Data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) allow you to store extra information on standard HTML elements. A data element can be named anything, as long as it starts with "data-".
+[Data attributes](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) allow you to store extra information on standard HTML elements. A data element can be named anything, as long as it starts with "data-".
 
 To actually display the video on the page, you need to get the value from `data-src` and set it as the video element's `src` attribute.
 
@@ -152,11 +154,11 @@ To test it yourself:
 {% Instruction 'devtools-network', 'ol' %}
 1. Click the **Throttling** drop-down, which is set to **No throttling** by default. Select **Fast 3G**.
 
-<img class="w-screenshot" src="./devtools_network_throttling.png" alt='DevTools Network tab with Fast 3G throttling option highlighted'>
+{% Img src="image/admin/um0BRQOmsqGgZzWeLDHY.png", alt="DevTools Network tab with Fast 3G throttling option highlighted", width="723", height="198" %}
 
 Now reload the page with Fast 3G still enabled. The app loads an image in the background instead of the video:
 
-<img class="w-screenshot" src="./netinfo_app_image.png" alt='Matrix-like image background with "NETWORK INFORMATION" text overlay'>
+{% Img src="image/admin/wtQs6oCU8c5q23SQOnHo.png", alt="Matrix-like image background with 'NETWORK INFORMATION' text overlay", width="800", height="456" %}
 
 ## Extra Credit: Respond to changes
 
@@ -186,7 +188,7 @@ displayNetworkInfo();
 
 Here's the final state of the [app on Glitch](https://glitch.com/~adaptive-serving-netinfo).
 
-<img class="w-screenshot" src="./netinfo_app_video_background.png" alt='Matrix-like video background with "NETWORK INFORMATION 4g" text overlay'>
+{% Img src="image/admin/0cTTeeAMgl5lD1PKRjy2.png", alt="Matrix-like video background with 'NETWORK INFORMATION 4g' text overlay", width="800", height="447" %}
 
 To test it again:
 
@@ -197,4 +199,4 @@ To test it again:
 
 The app will update the network information to **3g**:
 
-<img class="w-screenshot" src="./netinfo_app_3g.png" alt='Matrix-like video background with "NETWORK INFORMATION 3g" text overlay'>
+{% Img src="image/admin/WRp4ceBiuDQZoWmuaZx4.png", alt="Matrix-like video background with 'NETWORK INFORMATION 3g' text overlay", width="800", height="447" %}
diff --git a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_3g.png b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_3g.png
deleted file mode 100755
index 3e72cd75973..00000000000
Binary files a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_3g.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_image.png b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_image.png
deleted file mode 100644
index 7f58513d3ae..00000000000
Binary files a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_image.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_video_background.png b/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_video_background.png
deleted file mode 100755
index f0a2568ff99..00000000000
Binary files a/src/site/content/en/fast/codelab-adapt-video-to-image-serving-based-on-network-quality/netinfo_app_video_background.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-art-direction/index.md b/src/site/content/en/fast/codelab-art-direction/index.md
index 3bc1bd6247b..eed35286c74 100644
--- a/src/site/content/en/fast/codelab-art-direction/index.md
+++ b/src/site/content/en/fast/codelab-art-direction/index.md
@@ -22,7 +22,7 @@ tags:
 
 ## What's going on here?
 
-[Art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)
+[Art direction](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)
 shows different images on different display sizes.
 
 A responsive image loads different sizes of the same image. Art direction takes
@@ -41,8 +41,8 @@ purely aesthetic; it provides no performance benefit over responsive images.
 ## How the code works
 
 Art direction uses the
-[`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture),
-[`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source),
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture),
+[`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source),
 and `<img>` tags.
 
 **picture**
@@ -53,7 +53,7 @@ The `<picture>` tag provides a wrapper for zero or more `<source>` tags and one
 
 The `<source>` tag specifies a media resource.
 
-The browser uses the first `<source>` tag with a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+The browser uses the first `<source>` tag with a [media query](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries)
  that returns true. If none of the media queries match, the
 browser falls back to loading the image specified by the `<img>`.
 tag.
diff --git a/src/site/content/en/fast/codelab-avoid-invisible-text/fancy-header.png b/src/site/content/en/fast/codelab-avoid-invisible-text/fancy-header.png
deleted file mode 100755
index 803e1278d16..00000000000
Binary files a/src/site/content/en/fast/codelab-avoid-invisible-text/fancy-header.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-avoid-invisible-text/index.md b/src/site/content/en/fast/codelab-avoid-invisible-text/index.md
index f318d1d5cd8..7bac59bd6fe 100644
--- a/src/site/content/en/fast/codelab-avoid-invisible-text/index.md
+++ b/src/site/content/en/fast/codelab-avoid-invisible-text/index.md
@@ -54,7 +54,7 @@ observers for the "Pacifico" and "Roboto" font families:
 If you're ever unsure what font face observers you need to create, just look for
 the `font-family` declarations in your CSS. Pass the `font-family` name of these declarations to
 `FontFaceObserver()`. There is no need to create a font observer for
-[fallback fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#%3Cgeneric-name%3E).
+[fallback fonts](https://developer.mozilla.org/docs/Web/CSS/font-family#%3Cgeneric-name%3E).
 
 For example, if your CSS was:
 
@@ -77,7 +77,7 @@ robotoObserver.load().then(function(){
 
 `robotoObserver.load()` is a promise that resolves when the font loads.
 
-The demo site uses two different fonts, so you need to use [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+The demo site uses two different fonts, so you need to use [`Promise.all()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
 to wait until both fonts have loaded.
 
 - Add this promise to your script, right below the FontFaceObservers that you
@@ -118,7 +118,7 @@ Promise.all([
 document.documentElement.classList.add("fonts-loaded");
 ```
 
-This adds the `fonts-loaded` class to the document's root element (i.e. the
+This adds the `fonts-loaded` class to the document's root element (the
 `<html>` tag) once both fonts have loaded.
 
 #### ✔️Check-in
@@ -165,4 +165,4 @@ html.fonts-loaded .text {
 If the page looks like this, then you've successfully implemented Font Face
 Observer and gotten rid of the "Flash of Invisible Text."
 
-![A heading in a cursive font.](./fancy-header.png)
+{% Img src="image/admin/st2aEbPzhPIwyJiobkgO.png", alt="A heading in a cursive font.", width="572", height="246" %}
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-1.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-1.png
deleted file mode 100755
index c0b242a95c0..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-1.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-2.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-2.png
deleted file mode 100755
index 50782e26363..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-2.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-3.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-3.png
deleted file mode 100755
index 1e183180cee..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-3.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-4.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-4.png
deleted file mode 100755
index 11f02f49215..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-4.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-5.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-5.png
deleted file mode 100755
index eedab192750..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-5.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-6.png b/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-6.png
deleted file mode 100755
index b07c8243f3c..00000000000
Binary files a/src/site/content/en/fast/codelab-code-splitting/codelab-code-splitting-6.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-code-splitting/index.md b/src/site/content/en/fast/codelab-code-splitting/index.md
index f45cbcb79b7..39784b425b0 100644
--- a/src/site/content/en/fast/codelab-code-splitting/index.md
+++ b/src/site/content/en/fast/codelab-code-splitting/index.md
@@ -23,7 +23,7 @@ improves page performance.
 This codelab shows how to use **code splitting** to improve the performance of a
 simple application that sorts three numbers.
 
-![A browser window shows an application titled Magic Sorter with three fields for inputting numbers and a sort button.](./codelab-code-splitting-1.png)
+{% Img src="image/admin/1lb0XbGP6M4eShkmYaQW.png", alt="A browser window shows an application titled Magic Sorter with three fields for inputting numbers and a sort button.", width="800", height="504" %}
 
 ## Measure
 
@@ -39,7 +39,7 @@ attempting to add any optimizations.
 {% Instruction 'disable-cache', 'ol' %}
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" src="./codelab-code-splitting-3.png" alt="Network panel showing 71.2 KB JavaScript bundle.">
+{% Img src="image/admin/pyzLwutSzSx2qztQMXTM.png", alt="Network panel showing 71.2 KB JavaScript bundle.", width="800", height="153" %}
 
 71.2 KB worth of JavaScript just to sort a few numbers in a simple application.
 What gives?
@@ -115,7 +115,7 @@ form.addEventListener("submit", e => {
 Reload the application, open DevTools, and take a look at the **Network** panel
 once again.
 
-<img class="w-screenshot" src="./codelab-code-splitting-4.png" alt="Network panel showing 15.2 KB JavaScript bundle.">
+{% Img src="image/admin/J8c1PhqMDOJKjoenzMCN.png", alt="Network panel showing 15.2 KB JavaScript bundle.", width="800", height="148" %}
 
 For this application, the bundle size was reduced by over 4X with very little
 work, but there's still more room for improvement.
@@ -163,7 +163,7 @@ out by the proposal.
 
 {% Aside %}
 Read more about how dynamic imports work in this [Web Updates
-article](https://developers.google.com/web/updates/2017/11/dynamic-import).
+article](https://v8.dev/features/dynamic-import).
 {% endAside %}
 
 
@@ -226,12 +226,12 @@ Reload the application one last time and keep a close eye on the **Network**
 panel again. Only a small initial bundle is downloaded as soon as the app
 loads.
 
-<img class="w-screenshot" src="./codelab-code-splitting-5.png" alt="Network panel showing 2.7 KB JavaScript bundle.">
+{% Img src="image/admin/f1QZcSozkaA1rj52YWGV.png", alt="Network panel showing 2.7 KB JavaScript bundle.", width="800", height="151" %}
 
 After the button is pressed to sort the input numbers, the chunk that contains
 the sorting code gets fetched and executed.
 
-<img class="w-screenshot" src="./codelab-code-splitting-6.png" alt="Network panel showing 2.7 KB JavaScript bundle followed by a 13.9 KB JavaScript bundle.">
+{% Img src="image/admin/LPNj3JpAmzsGppwJl5fs.png", alt="Network panel showing 2.7 KB JavaScript bundle followed by a 13.9 KB JavaScript bundle.", width="800", height="211" %}
 
 Notice how the numbers still get sorted!
 
@@ -275,7 +275,7 @@ method recommended by your framework/library to lazy load specific modules.
 ### Preloading and prefetching
 
 Where possible, take advantage of browser hints such as `<link rel="preload">`
-or `<link rel="prefetch">` in order to try and load critical modules even
+or `<link rel="prefetch">` to try and load critical modules even
 sooner. webpack supports both hints through the use of magic comments in import
 statements. This is explained in more detail in the
 [Preload critical chunks](/preload-critical-assets) guide.
diff --git a/src/site/content/en/fast/codelab-density-descriptors/index.md b/src/site/content/en/fast/codelab-density-descriptors/index.md
index f23f9ef5827..a4a5957b0ad 100644
--- a/src/site/content/en/fast/codelab-density-descriptors/index.md
+++ b/src/site/content/en/fast/codelab-density-descriptors/index.md
@@ -22,7 +22,7 @@ tags:
 You can use the device emulator for this. If you're looking for specific display
 densities, here are some devices to try:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tbody>
       <tr>
@@ -126,7 +126,7 @@ So how do you actually apply this information?
 In order for images to look their very best on high resolution screens, it's
 necessary to provide different image versions for different `devicePixelRatios`.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/console-success.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/console-success.png
deleted file mode 100644
index e96ec547fd4..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/console-success.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/eliminate-render-blocking-resources.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/eliminate-render-blocking-resources.png
deleted file mode 100644
index 39e84d3a8cb..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/eliminate-render-blocking-resources.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/index.md b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/index.md
index c0c07a8bc5c..dcc696e9aa6 100755
--- a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/index.md
+++ b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/index.md
@@ -34,16 +34,16 @@ To run a Lighthouse audit on this site:
 1. Select the **Clear Storage** checkbox. With this option selected, Lighthouse will not load resources from the cache, which simulates how first-time visitors would experience the page.
 1. Click **Run Audits**.
 
-![Audits panel of Chrome DevTools, powered by Lighthouse](lighthouse-audits.png)
+{% Img src="image/admin/bk0impRv9Mo0yDpbuIQi.png", alt="Audits panel of Chrome DevTools, powered by Lighthouse", width="800", height="1068" %}
 
-When you run an audit on your machine, the exact results may vary, but in the filmstrip view, you'll notice the app has a blank screen for quite a while before finally rendering the content. This is why [First Contentful Paint (FCP)](/first-contentful-paint/) is high and why overall performance score is not great.
+When you run an audit on your machine, the exact results may vary, but in the filmstrip view, you'll notice the app has a blank screen for quite a while before finally rendering the content. This is why [First Contentful Paint (FCP)](/fcp/) is high and why overall performance score is not great.
 
-<img src="lighthouse-audit-before.png" alt='Lighthouse audit showing performance score of 84, FCP 3 seconds and a filmstrip view of loading the app' class="w-screenshot">
+{% Img src="image/admin/otfxnEjhjP9cNpSF8W4o.png", alt="Lighthouse audit showing performance score of 84, FCP 3 seconds and a filmstrip view of loading the app", width="710", height="356" %}
 
 Lighthouse is here to help you fix performance issues, so look for solutions in the **Opportunities** section. **Eliminate render-blocking resources** is listed as an opportunity and that's where Critical shines!
 
 
-<img src="eliminate-render-blocking-resources.png" alt='Lighthouse audit "Opportunities" section listing "Eliminate render-blocking resources"' class="w-screenshot">
+{% Img src="image/admin/L0i6jb8G1eT0vr2V45vH.png", alt="Lighthouse audit 'Opportunities' section listing 'Eliminate render-blocking resources'", width="743", height="449" %}
 
 ## Optimize
 
@@ -71,7 +71,7 @@ Error handling isn't mandatory, but it's an easy way to gauge the operation succ
 
 ### Configure Critical
 
-The table below contains some useful Critical options. You can check out all of the [available options on Github](https://github.com/addyosmani/critical#usage).
+The table below contains some useful Critical options. You can check out all of the [available options on GitHub](https://github.com/addyosmani/critical#usage).
 
 <table>
     <th>Option</th>
@@ -168,9 +168,9 @@ npm run critical
 refresh
 ```
 
-<figure class="w-figure">
-  <img src="console-success.png" alt='Success message saying "Generated critical CSS" in the console]()' style="max-width: 243px">
-  <figcaption class="w-figcaption">Success message in the console</figcaption>
+<figure data-size="full">
+  {% Img src="image/admin/alfJqwxI2WU3bUOT4xUZ.png", alt="Success message saying 'Generated critical CSS' in the console]()", width="243", height="45", class="fixed-width-img" %}
+  <figcaption>Success message in the console</figcaption>
 </figure>
 
 {% Aside 'note' %}
@@ -179,16 +179,16 @@ Glitch console and editor don't automatically sync, so `refresh` command is necc
 
 Now in the `<head>` tag of `index.html`, generated critical CSS is inlined between `<style>` tags, followed by a script that loads the rest of the CSS asynchronously.
 
-<figure class="w-figure">
-  <img src="inline-critical-css.png" alt="index.html with inlined critical CSS" class="w-screenshot">
-  <figcaption class="w-figcaption">Inlined critical CSS</figcaption>
+<figure>
+  {% Img src="image/admin/NEQAkJJDV712y944PAxo.png", alt="index.html with inlined critical CSS", width="800", height="325" %}
+  <figcaption>Inlined critical CSS</figcaption>
 </figure>
 
 ## Measure again
 
 Follow the steps from the beginning of the codelab to run Lighthouse performance audit again. The results you get will look similar to this:
 
- <img src="lighthouse-audit-after.png" alt='Lighthouse audit showing performance score of 100, FCP 0.9 seconds and improved filmstrip view of loading the app' class="w-screenshot">
+ {% Img src="image/admin/7be1SdC4JpavF7338VuT.png", alt="Lighthouse audit showing performance score of 100, FCP 0.9 seconds and improved filmstrip view of loading the app", width="716", height="407" %}
 
 {% Aside 'success' %}
 The filmstrip view shows that content is rendered much sooner and this is reflected in improved paint metrics. And "Eliminate render-blocking resources" has been eliminated! 🎉
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/inline-critical-css.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/inline-critical-css.png
deleted file mode 100644
index d8f247210c7..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/inline-critical-css.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-after.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-after.png
deleted file mode 100755
index e30a65ff0ed..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-after.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-before.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-before.png
deleted file mode 100755
index d97a7c2093a..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audit-before.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audits.png b/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audits.png
deleted file mode 100755
index 2fa8a6b271a..00000000000
Binary files a/src/site/content/en/fast/codelab-extract-and-inline-critical-css/lighthouse-audits.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-imagemin-grunt/index.md b/src/site/content/en/fast/codelab-imagemin-grunt/index.md
index 517b3c1b770..f8759a95d0d 100644
--- a/src/site/content/en/fast/codelab-imagemin-grunt/index.md
+++ b/src/site/content/en/fast/codelab-imagemin-grunt/index.md
@@ -15,12 +15,12 @@ tags:
 
 ## Setup the Imagemin Grunt plugin
 
-This Glitch already contains `grunt`, `grunt-cli`, and the `grunt-contrib-imagemin` 
-plugin. To add the configuration for Imagemin, you'll need to edit your 
+This Glitch already contains `grunt`, `grunt-cli`, and the `grunt-contrib-imagemin`
+plugin. To add the configuration for Imagemin, you'll need to edit your
 `gruntfile.js` file.
 
 {% Instruction 'remix' %}
-- In `gruntfile.js`, replace the `//Add configuration here` comment  
+- In `gruntfile.js`, replace the `//Add configuration here` comment
 with this code block:
 
 ```javascript
@@ -87,13 +87,13 @@ grunt.registerTask('default', ['imagemin']);
 
 ## Customize your Imagemin Configuration
 
-`imagemin-pngquant` is a plugin for specifying compression quality levels. 
-We've already added `imagemin-pngquant` to this project in the `package.json` 
+`imagemin-pngquant` is a plugin for specifying compression quality levels.
+We've already added `imagemin-pngquant` to this project in the `package.json`
 file so that you can use it to compress your PNGs. To use it, declare the plugin
 and specify a compression quality level in your Gruntfile.
 
 
-- Declare the `imagemin-pngquant` plugin by adding this line to the top of your 
+- Declare the `imagemin-pngquant` plugin by adding this line to the top of your
 `gruntfile.js`:
 
 <pre class="prettyprint">
@@ -155,7 +155,7 @@ they are compressed as well.
 
 ## Customize your Imagemin configuration (continued)
 
-Use the `imagemin-mozjpeg` plugin, which has already been installed for you, to 
+Use the `imagemin-mozjpeg` plugin, which has already been installed for you, to
 compress JPEG images.
 
 - Declare the `imagemin-mozjpeg` plugin by putting this line at the top your
@@ -236,6 +236,6 @@ know if the JPEG images on your page are optimally compressed.
   the live version of your Glitch and verify that the "Efficiently encode
   images" audit was passed.
 
-<img class="screenshot" src="./lighthouse_passing.png" width="100%" alt="Passing 'Efficiently encode images' audit in Lighthouse">
+{% Img src="image/admin/TTrEG19zxZRSWNv2pRG4.png", alt="Passing 'Efficiently encode images' audit in Lighthouse", width="766", height="976", class="screenshot" %}
 
 Success! You have used Imagemin to optimally compress the images on your page.
diff --git a/src/site/content/en/fast/codelab-imagemin-grunt/lighthouse_passing.png b/src/site/content/en/fast/codelab-imagemin-grunt/lighthouse_passing.png
deleted file mode 100755
index 836834c648f..00000000000
Binary files a/src/site/content/en/fast/codelab-imagemin-grunt/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-imagemin-gulp/index.md b/src/site/content/en/fast/codelab-imagemin-gulp/index.md
index d25d2155efb..b6642df0fd2 100644
--- a/src/site/content/en/fast/codelab-imagemin-gulp/index.md
+++ b/src/site/content/en/fast/codelab-imagemin-gulp/index.md
@@ -191,6 +191,6 @@ the JPEG images on your page are optimally compressed.
   the live version of your Glitch and verify that the "Efficiently encode
   images" audit was passed.
 
-<img class="screenshot" src="./lighthouse_passing.png" width="100%" alt="Passing 'Efficiently encode images' audit in Lighthouse">
+{% Img src="image/admin/vNZSjlHVQpG3R8SmojFi.png", alt="Passing 'Efficiently encode images' audit in Lighthouse", width="766", height="976", class="screenshot" %}
 
 Success! You have used Imagemin to optimally compress the images on your page.
diff --git a/src/site/content/en/fast/codelab-imagemin-gulp/lighthouse_passing.png b/src/site/content/en/fast/codelab-imagemin-gulp/lighthouse_passing.png
deleted file mode 100755
index 836834c648f..00000000000
Binary files a/src/site/content/en/fast/codelab-imagemin-gulp/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-imagemin-webpack/index.md b/src/site/content/en/fast/codelab-imagemin-webpack/index.md
index 5eaf743411b..4cbaf2288bb 100644
--- a/src/site/content/en/fast/codelab-imagemin-webpack/index.md
+++ b/src/site/content/en/fast/codelab-imagemin-webpack/index.md
@@ -239,6 +239,6 @@ the JPEG images on your page are optimally compressed.
   on the live version of your Glitch and verify that the **Efficiently encode
   images** audit was passed.
 
-<img class="screenshot" src="./lighthouse_passing.png" width="100%" alt="Passing 'Efficiently encode images' audit in Lighthouse">
+{% Img src="image/admin/abAeMMdJEj9j2osonskn.png", alt="Passing 'Efficiently encode images' audit in Lighthouse", width="766", height="976", class="screenshot" %}
 
 Success! You have used Imagemin to optimally compress the images on your page.
diff --git a/src/site/content/en/fast/codelab-imagemin-webpack/lighthouse_passing.png b/src/site/content/en/fast/codelab-imagemin-webpack/lighthouse_passing.png
deleted file mode 100755
index 836834c648f..00000000000
Binary files a/src/site/content/en/fast/codelab-imagemin-webpack/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/app.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/app.png
deleted file mode 100755
index de7680b4955..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/app.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.md b/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.md
index 20fbe468a01..37b5381714c 100644
--- a/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.md
+++ b/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.md
@@ -20,7 +20,7 @@ tags:
 
 * Deferring script loading
 
-* Lazy-loading non-critical resources
+* Lazy loading non-critical resources
 
 * Preconnecting to required origins
 
@@ -32,9 +32,9 @@ The included sample app features a simple web page with three features coming fr
 
 * A social media sharing widget
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./app.png" alt="Screenshot of the page with third-party resources highlighted.">
-  <figcaption class="w-figcaption">Third-party resources in the sample app.</figcaption>
+<figure>
+  {% Img src="image/admin/cuWcC16X6oKRbXJXIIt7.png", alt="Screenshot of the page with third-party resources highlighted.", width="800", height="1294" %}
+  <figcaption>Third-party resources in the sample app.</figcaption>
 </figure>
 
 You'll start by measuring the performance of the app and then apply each technique to improve different aspects of app performance.
@@ -45,7 +45,7 @@ First open the sample app in the fullscreen view:
 {% Instruction 'remix', 'ol' %}
 {% Instruction 'preview', 'ol' %}
 
-Run a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) [performance audit](/lighthouse-performance) on the page to establish baseline performance:
+Run a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [performance audit](https://developer.chrome.com/docs/lighthouse/performance/) on the page to establish baseline performance:
 
 {% Instruction 'devtools-lighthouse', 'ol' %}
 1. Click **Mobile**.
@@ -54,33 +54,33 @@ Run a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) [perform
 1. Select the **Clear Storage** checkbox.
 1. Click **Run audits**.
 
-When you run an audit on your machine, [the exact results may vary](https://developers.google.com/web/tools/lighthouse/variability), but you should notice that the [First Contentful Paint (FCP)](/first-contentful-paint) time is pretty high, and that Lighthouse suggests two opportunities to investigate: **Eliminate render-blocking resources** and **Preconnect to required origins**. (Even if the metrics are all in the green, optimizations will still yield improvements.)
+When you run an audit on your machine, [the exact results may vary](https://developers.google.com/web/tools/lighthouse/variability), but you should notice that the [First Contentful Paint (FCP)](/fcp/) time is pretty high, and that Lighthouse suggests two opportunities to investigate: **Eliminate render-blocking resources** and **Preconnect to required origins**. (Even if the metrics are all in the green, optimizations will still yield improvements.)
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lighthouse-audit.png" alt="Screenshot of Lighthouse audit showing 2.4 second FCP and two opportunities: Eliminate render-blocking resources and Preconnect to required origins.">
+<figure>
+  {% Img src="image/admin/gIkIJM2OaocxImjLLjev.png", alt="Screenshot of Lighthouse audit showing 2.4 second FCP and two opportunities: Eliminate render-blocking resources and Preconnect to required origins.", width="741", height="700" %}
 </figure>
 
 ## Defer third-party JavaScript
 
 The **Eliminate render-blocking resources** audit identified that you can save some time by deferring a script coming from d3js.org:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./render-blocking.png" alt="Screenshot of Eliminate render-blocking resources audit with the d3.v3.min.js script highlighted.">
+<figure>
+  {% Img src="image/admin/P9ejh4JMzdpu8N3aZ7bC.png", alt="Screenshot of Eliminate render-blocking resources audit with the d3.v3.min.js script highlighted.", width="718", height="337" %}
 </figure>
 
 [D3.js](https://d3js.org/) is a JavaScript library for creating data visualizations. The `script.js` file in the sample app uses D3 utility functions to create the SVG line chart and append it to the page. The order of operations here matters: `script.js` has to run after the document is parsed and the D3 library has loaded, which is why it's included right before the closing `</body>` tag in `index.html`.
 
 However, the D3 script is included in the page's `<head>`, which blocks the parsing of the rest document:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./index.png" alt="Screenshot of index.html with highlighted script tag in the head.">
+<figure>
+  {% Img src="image/admin/vRP2oYmijq0sVyLRb2nU.png", alt="Screenshot of index.html with highlighted script tag in the head.", width="718", height="265" %}
 </figure>
 
 Two magic attributes can unblock the parser when added to the script tag:
 
-* [`async`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) ensures that scripts download in the background and execute **at the first opportunity** after they finish downloading.
+* [`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) ensures that scripts download in the background and execute **at the first opportunity** after they finish downloading.
 
-* [`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) ensures that scripts download in the background and execute **after parsing** is completely finished.
+* [`defer`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-defer) ensures that scripts download in the background and execute **after parsing** is completely finished.
 
 Since this chart is not really critical to the overall page and will most likely be below the fold, use `defer` to make sure there's no parser blocking.
 
@@ -107,9 +107,9 @@ Scripts with the `defer` attribute execute in the order in which they were speci
 
 ## Lazy-load third-party resources
 
-All resources that are below the fold are good candidates for [lazy-loading](/efficiently-load-third-party-javascript/#lazy-load-third-party-resources).
+All resources that are below the fold are good candidates for [lazy loading](/efficiently-load-third-party-javascript/#lazy-load-third-party-resources).
 
-The sample app has a YouTube video embedded in an [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). To check out how many requests the page makes and which come from the embedded YouTube iframe:
+The sample app has a YouTube video embedded in an [iframe](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). To check out how many requests the page makes and which come from the embedded YouTube iframe:
 
 {% Instruction 'preview', 'ol' %}
 {% Instruction 'devtools-network', 'ol' %}
@@ -117,7 +117,7 @@ The sample app has a YouTube video embedded in an [iframe](https://developer.moz
 1. Select *Fast 3G* in the **Throttling** dropdown menu.
 {% Instruction 'reload-page', 'ol' %}
 
-![Screenshot of DevTools Network panel.](network.png)
+{% Img src="image/admin/DjnRutx27trV4YkYcKhr.png", alt="Screenshot of DevTools Network panel.", width="783", height="618" %}
 
 The **Network** panel reveals that the page made a total of 28 requests and transferred almost 1 MB of compressed resources.
 
@@ -133,7 +133,7 @@ The new sorting reveals that there are additional requests to Google domains. In
 
 By waiting to lazy-load the video until a user scrolls down to that section of the page, you cut the number of requests the page initially makes. This approach saves users' data and speeds up the initial load.
 
-One way to implement lazy-loading is by using the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), a browser API that notifies you when an element enters or exits the browser's viewport.
+One way to implement lazy loading is by using the [Intersection Observer](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API), a browser API that notifies you when an element enters or exits the browser's viewport.
 
 ### Step 1: Prevent video from loading initially
 
@@ -143,7 +143,7 @@ To lazy-load the video iframe, you must first prevent it from loading in the usu
 <iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 ```
 
-`data-src` is a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), which allows you to store extra information on standard HTML elements. A data attribute can be named anything, as long as it starts with "data-".
+`data-src` is a [data attribute](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes), which allows you to store extra information on standard HTML elements. A data attribute can be named anything, as long as it starts with "data-".
 
 An iframe without a `src` simply won't load.
 
@@ -178,7 +178,7 @@ const element = document.querySelector('iframe');
 observer.observe(element);
 ```
 
-`callback` receives a list of [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) objects and the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) object itself. Each entry contains a [`target`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/target) element and properties that describe its dimensions, position, the time it entered the viewport, and more. One of the properties of `IntersectionObserverEntry` is [`isIntersecting`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/isIntersecting)—a boolean value that equals `true` when the element enters the viewport.
+`callback` receives a list of [`IntersectionObserverEntry`](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry) objects and the [`IntersectionObserver`](https://developer.mozilla.org/docs/Web/API/IntersectionObserver) object itself. Each entry contains a [`target`](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/target) element and properties that describe its dimensions, position, the time it entered the viewport, and more. One of the properties of `IntersectionObserverEntry` is [`isIntersecting`](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/isIntersecting)—a boolean value that equals `true` when the element enters the viewport.
 
 In this example, the `target` is the `iframe`. `isIntersecting` equals `true` when `target` enters the viewport. To see this in action, replace `callback` with the following function:
 
@@ -196,7 +196,7 @@ let observer = new IntersectionObserver(function(entries, observer) {
 
 Try scrolling up and down. You should see the value of `isIntersecting` change and the target element logged to the console.
 
-To load the video when the user scrolls to its position, use `isIntersecting` as a condition to run a `loadElement` function, which gets the value from the `iframe` element's `data-src` and sets it as the `iframe` element's `src` attribute. That replacement triggers the loading of the video. Then, once the video is loaded, call the [`unobserve`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve) method on the `observer` to stop watching the target element:
+To load the video when the user scrolls to its position, use `isIntersecting` as a condition to run a `loadElement` function, which gets the value from the `iframe` element's `data-src` and sets it as the `iframe` element's `src` attribute. That replacement triggers the loading of the video. Then, once the video is loaded, call the [`unobserve`](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/unobserve) method on the `observer` to stop watching the target element:
 
 ```js/6-13,15-18/2-5
 let observer = new IntersectionObserver(function (entries, observer) {
@@ -226,23 +226,21 @@ To see how the size and number of resources changed, open the DevTools **Network
 
 Now scroll down the page and keep an eye on the **Network** panel. When you get to the video, you should see the page trigger additional requests.
 
-<video autoplay="" loop="" muted="" playsinline="">
-    <source src="./lazy-load-3g.mp4" type="video/mp4">
-  </video>
+{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bJHFfNjxvIthfRWeidbx.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}
 
 {% Aside %}
-In this example, the element is loaded when it enters the viewport, which you can see happening in the video above. You can avoid that delay and create a smoother user experience by loading elements a little before they enter the viewport. To do that, use the [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer) property to define margins around the target element, which effectively grows (or shrinks) the area that triggers the `isIntersecting` change.
+In this example, the element is loaded when it enters the viewport, which you can see happening in the video above. You can avoid that delay and create a smoother user experience by loading elements a little before they enter the viewport. To do that, use the [`rootMargin`](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer) property to define margins around the target element, which effectively grows (or shrinks) the area that triggers the `isIntersecting` change.
 {% endAside %}
 
 ## Preconnect to required origins
 
-You've deferred non-critical Javascript and lazy-loaded the YouTube requests, so now it's time to optimize the remaining third-party content.
+You've deferred non-critical JavaScript and lazy-loaded the YouTube requests, so now it's time to optimize the remaining third-party content.
 
 Adding the `rel=preconnect` attribute to a link tells the browser to establish a connection to a domain before the request for that resource is made. This attribute is best used on origins that provide resources you are certain the page needs.
 
 The Lighthouse audit you ran in the first step suggested in **Preconnect to required origins** that you can save around 400 ms by [establishing early connections](/preconnect-and-dns-prefetch/) to staticxx.facebook.com and youtube.com:
 
-![Preconnect to required origins audit with the staticxx.facebook.com domain highlighted.](preconnect.png)
+{% Img src="image/admin/k4PDdjh77dXS1ZdGBSko.png", alt="Preconnect to required origins audit with the staticxx.facebook.com domain highlighted.", width="720", height="279" %}
 
 Since the YouTube video is now lazy-loaded, that leaves only staticxx.facebook.com, the source of the social media sharing widget. Establishing an early connection to this domain is as simple as adding a `<link>` tag to the document's `<head>`:
 
@@ -254,7 +252,7 @@ Since the YouTube video is now lazy-loaded, that leaves only staticxx.facebook.c
 
 Here's the state of the page [after optimization](https://glitch.com/~3rd-party-optimizations). Follow the steps from the [Measure performance](#measure-performance) section of the codelab to run another Lighthouse audit.
 
-![Lighthouse audit showing 1 second FCP and the performance score of 99.](success.png)
+{% Img src="image/admin/Iv12shtGoURq2CTqO6jN.png", alt="Lighthouse audit showing 1 second FCP and the performance score of 99.", width="727", height="511" %}
 
 {% Aside 'success' %}
 You should see that FCP and the performance score have improved! 🎉 The page now loads faster and consumes less data⁠—and all without negatively affecting the user-experience. 🤝
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.png
deleted file mode 100755
index 09b127e2a9e..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/index.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/lazy-load-3g.mp4 b/src/site/content/en/fast/codelab-optimize-third-party-javascript/lazy-load-3g.mp4
deleted file mode 100644
index 48ef26d9d65..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/lazy-load-3g.mp4 and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/lighthouse-audit.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/lighthouse-audit.png
deleted file mode 100755
index afa596a89b3..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/lighthouse-audit.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/network.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/network.png
deleted file mode 100644
index 3542abc2f7d..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/network.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/preconnect.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/preconnect.png
deleted file mode 100755
index 5457244745a..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/preconnect.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/render-blocking.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/render-blocking.png
deleted file mode 100755
index 8a4ba5b77aa..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/render-blocking.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-optimize-third-party-javascript/success.png b/src/site/content/en/fast/codelab-optimize-third-party-javascript/success.png
deleted file mode 100755
index a324000f299..00000000000
Binary files a/src/site/content/en/fast/codelab-optimize-third-party-javascript/success.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/another-network-panel.png b/src/site/content/en/fast/codelab-preload-critical-assets/another-network-panel.png
deleted file mode 100644
index 3704dc3a584..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/another-network-panel.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/console.png b/src/site/content/en/fast/codelab-preload-critical-assets/console.png
deleted file mode 100644
index 15f628683a1..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/console.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/details-css.png b/src/site/content/en/fast/codelab-preload-critical-assets/details-css.png
deleted file mode 100644
index 92d379563b6..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/details-css.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/details.png b/src/site/content/en/fast/codelab-preload-critical-assets/details.png
deleted file mode 100644
index a29f41afe99..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/details.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/devtools-elements.png b/src/site/content/en/fast/codelab-preload-critical-assets/devtools-elements.png
deleted file mode 100644
index 38e634a5cb6..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/devtools-elements.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/disable-cache.png b/src/site/content/en/fast/codelab-preload-critical-assets/disable-cache.png
deleted file mode 100644
index d7e000a536a..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/disable-cache.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/index.md b/src/site/content/en/fast/codelab-preload-critical-assets/index.md
index dcafe0d2ae4..442bd158556 100644
--- a/src/site/content/en/fast/codelab-preload-critical-assets/index.md
+++ b/src/site/content/en/fast/codelab-preload-critical-assets/index.md
@@ -1,13 +1,14 @@
 ---
 layout: codelab
-title: Preload critical assets to improve loading speed
+title: "Codelab: Preload critical assets to improve loading speed"
 authors:
   - houssein
 description: |
   In this codelab, learn how to improve the performance of a page by preloading
   and prefetching resources.
-date: 2018-04-24
+date: 2019-04-24
 glitch: preload-critical-assets
+related_post: preload-critical-assets
 tags:
   - performance
 ---
@@ -17,7 +18,7 @@ tags:
 In this codelab, the performance of the following web page is improved
 by preloading and prefetching a few resources:
 
-![App Screenshot](./san-francisco.png)
+{% Img src="image/admin/Ln5Oxy5vp8QWTn0GoOFh.png", alt="App Screenshot", width="800", height="578" %}
 
 ## Measure
 
@@ -32,11 +33,15 @@ the live version of your Glitch (see also
 Lighthouse shows the following failed audit for a resource that is fetched
 late:
 
-<img class="w-screenshot" src="./preload-requests-codelab.png" alt="Lighthouse: Preload key requests audit">
+<figure>
+  {% Img src="image/admin/AMhzorWlWYejd0tA11rY.png", alt="Lighthouse: Preload key requests audit", width="800", height="231" %}
+</figure>
 
 {% Instruction 'devtools-network' %}
 
-<img class="w-screenshot" src="./network-panel-one.png" alt="Network panel with late-discovered resource">
+<figure>
+  {% Img src="image/admin/pO1f6x9pOqzYwPciKnTy.png", alt="Network panel with late-discovered resource", width="800", height="166" %}
+</figure>
 
 The `main.css` file is not fetched by a Link element (`<link>`) placed in the HTML
 document, but a separate JavaScript file, `fetch-css.js`, attaches
@@ -50,9 +55,9 @@ prioritized and fetched by the browser. For this web page, it currently looks
 like this:
 
 ```bash
-├─┬ / (initial HTML file)  
+├─┬ / (initial HTML file)
   └── fetch-css.js
-    └── main.css  
+    └── main.css
       └── K2D.woff2
 ```
 
@@ -80,7 +85,9 @@ fetched, and `as="style"` is used to preload stylesheet files.
 
 Reload the application and take a look at the **Network** panel in DevTools.
 
-<img class="w-screenshot" src="./network-panel-two.png" alt="Network panel with preloaded resource">
+<figure>
+  {% Img src="image/admin/3xjh4kLTps0fCqs7wRwP.png", alt="Network panel with preloaded resource", width="800", height="166" %}
+</figure>
 
 Notice how the browser fetches the CSS file before the JavaScript
 responsible for fetching it has even been finished parsing. With preload, the browser
@@ -114,12 +121,16 @@ preload hint for this resource as well.
 Reload the application and take a look at the **Network** panel.
 A request is made to retrieve `details.css` even though it is not being used by the web page.
 
-<img class="w-screenshot" src="./network-panel-three.png" alt="Network panel with unecessary preload">
+<figure>
+  {% Img src="image/admin/vOyq8M3X2UPd5JUTvex0.png", alt="Network panel with unecessary preload", width="800", height="189" %}
+</figure>
 
 Chrome displays a warning in the **Console** panel when a preloaded resource is
 not used by the page within a few seconds after it has loaded.
 
-<img class="w-screenshot" src="./console.png" alt="Preload warning in console">
+<figure>
+  {% Img src="image/admin/elfGvORyRu1s0slntYHo.png", alt="Preload warning in console", width="800", height="150" %}
+</figure>
 
 Use this warning as an indicator to identify if you have any preloaded resources
 that are not being used immediately by your web page. You can now remove the
@@ -135,7 +146,7 @@ unnecessary preload link for this page.
 
 For a list of all the types of resources that can be fetched along with the
 correct values that should be used for the `as` attribute, refer to the
-[MDN article on Preloading](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded).
+[MDN article on Preloading](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded).
 
 {% Aside %}
 Cross-origin resources can also be preloaded using the `crossorigin` attribute.
@@ -154,7 +165,7 @@ a lower priority than other important assets needed for the current page.
 In this website, clicking the image takes you to a separate `details/`
 route.
 
-![Details route](./details.png)
+{% Img src="image/admin/KLzVOClmdtwTZ3nhzGz5.png", alt="Details route", width="800", height="585" %}
 
 A separate CSS file, `details.css`, contains all the styles needed for this
 simple page. Add a link element to `index.html` to prefetch this resource.
@@ -169,23 +180,31 @@ simple page. Add a link element to `index.html` to prefetch this resource.
 To understand how this triggers a request for the file, open the **Network** panel in DevTools
 and uncheck the **Disable cache** option.
 
-<img class="w-screenshot" src="./disable-cache.png" alt="Disable cache in Chrome DevTools">
+<figure>
+  {% Img src="image/admin/dddEy2ERtrha2WZKN5Ou.png", alt="Disable cache in Chrome DevTools", width="800", height="145" %}
+</figure>
 
 Reload the application and notice how a very low priority request is made for
 `details.css` after all the other files have been fetched.
 
-<img class="w-screenshot" src="./network-panel-five.png" alt="Network panel with prefetched resource">
+<figure>
+  {% Img src="image/admin/STiBaCDoaZ1Ghzbp5fOH.png", alt="Network panel with prefetched resource", width="800", height="211" %}
+</figure>
 
 With DevTools open, click the image on the website to navigate to the `details` page.
 Since a link element is used in `details.html` to fetch `details.css`, a request is made for the
 resource as expected.
 
-<img class="w-screenshot" src="./network-panel-six.png" alt="Details page network requests">
+<figure>
+  {% Img src="image/admin/AfkaIGXdHifq8n1xD8YQ.png", alt="Details page network requests", width="800", height="106" %}
+</figure>
 
 Click the `details.css` network request in DevTools to view its details. You'll notice
 that the file is retrieved from the browser's disk cache.
 
-<img class="w-screenshot" src="./details-css.png" alt="Details request fetched from disk cache">
+<figure>
+  {% Img src="image/admin/3pPpPCjbwugX1nnqCf5e.png", alt="Details request fetched from disk cache", width="800", height="170" %}
+</figure>
 
 By taking advantage of browser idle time, prefetch makes an early request for a
 resource needed for a different page. This speeds up future navigation requests
@@ -200,7 +219,9 @@ post explores the use of dynamic imports to split a bundle into multiple chunks.
 This is demonstrated with a simple application that
 dynamically imports a module from [Lodash](https://lodash.com/) when a form is submitted.
 
-<img class="w-screenshot" src="./magic.gif" alt="Magic Sorter app that demonstrates code splitting">
+<figure>
+  {% Img src="image/admin/yg2lFaDyWQFBvw7YaJ3g.gif", alt="Magic Sorter app that demonstrates code splitting", width="600", height="375" %}
+</figure>
 
 You can access [the Glitch for this application here](https://glitch.com/edit/#!/code-splitting).
 
@@ -240,12 +261,14 @@ Once the application is reloaded, webpack injects a prefetch tag for the
 resource into the head of the document. This can be seen in the **Elements**
 panel in DevTools.
 
-![Elements panel with prefetch tag](./devtools-elements.png)
+{% Img src="image/admin/5Zs5L6UMnkUJXyfwtru7.png", alt="Elements panel with prefetch tag", width="800", height="520" %}
 
 Observing the requests in the **Network** panel also shows that this chunk is
 fetched with a low priority after all other resources have been requested.
 
-<img class="w-screenshot" src="./another-network-panel.png" alt="Network panel with prefetched request">
+<figure>
+  {% Img src="image/admin/nGh06M2LqgTfBUwPaXK7.png", alt="Network panel with prefetched request", width="800", height="181" %}
+</figure>
 
 Although prefetch makes more sense for this use case, webpack also provides support for preloading
 chunks that are dynamically imported.
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/magic.gif b/src/site/content/en/fast/codelab-preload-critical-assets/magic.gif
deleted file mode 100755
index 8d10afe9fe2..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/magic.gif and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-five.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-five.png
deleted file mode 100644
index 62e7e15177f..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-five.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-four.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-four.png
deleted file mode 100644
index 1e4d583966f..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-four.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-one.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-one.png
deleted file mode 100644
index d7cb8df8f26..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-one.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-six.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-six.png
deleted file mode 100644
index 9e7e87c4850..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-six.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-three.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-three.png
deleted file mode 100644
index 0d10bac0239..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-three.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-two.png b/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-two.png
deleted file mode 100644
index 75ec7aebc32..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/network-panel-two.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/preload-requests-codelab.png b/src/site/content/en/fast/codelab-preload-critical-assets/preload-requests-codelab.png
deleted file mode 100644
index 812fac4eb92..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/preload-requests-codelab.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-critical-assets/san-francisco.png b/src/site/content/en/fast/codelab-preload-critical-assets/san-francisco.png
deleted file mode 100644
index 9d496bce3c2..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-critical-assets/san-francisco.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-web-fonts/index.md b/src/site/content/en/fast/codelab-preload-web-fonts/index.md
index 8507289a127..ac5106b7551 100644
--- a/src/site/content/en/fast/codelab-preload-web-fonts/index.md
+++ b/src/site/content/en/fast/codelab-preload-web-fonts/index.md
@@ -7,7 +7,8 @@ description: |
   In this codelab, learn how to improve the performance of a page by preloading
   web fonts.
 date: 2018-04-23
-glitch: web-dev-preload-webfont
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
 tags:
   - performance
 ---
@@ -25,16 +26,16 @@ First measure how the website performs before adding any optimizations.
 
 The Lighthouse report that is generated will show you the fetching sequence of resources under **Maximum critical path latency**.
 
-<img class="w-screenshot" src="./lighthouse-audit-before-preload.png" alt="Webfonts are present in the critical request chain.">
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="Webfonts are present in the critical request chain.", width="704", height="198" %}
 
-In the above audit the web fonts are part of the critical request chain and fetched last. The [**critical request chain**](/critical-request-chains) represents the order of resources that are prioritized and fetched by the browser. In this application, the web fonts (Pacfico and Pacifico-Bold) are defined using the [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) rule and are the last resource fetched by the browser in the critical request chain. Typically, webfonts are lazy loaded which means that they are not loaded until the critical resources are downloaded (CSS, JS).
+In the above audit the web fonts are part of the critical request chain and fetched last. The [**critical request chain**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/) represents the order of resources that are prioritized and fetched by the browser. In this application, the web fonts (Pacfico and Pacifico-Bold) are defined using the [@font-face](/font-best-practices/#understanding-font-face) rule and are the last resource fetched by the browser in the critical request chain. Typically, webfonts are lazy loaded which means that they are not loaded until the critical resources are downloaded (CSS, JS).
 
 Here is the sequence of the resources fetched in the application:
 
-<img class="w-screenshot" src="./network-before-preload.png" alt="Webfonts are lazy loaded.">
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="Webfonts are lazy loaded.", width="583", height="256" %}
 
 ## Preloading Web fonts
-In order to avoid FOUT, you can preload web fonts that are required immediately. Add the `Link` element for this application at the head of the document:
+To avoid FOUT, you can preload web fonts that are required immediately. Add the `Link` element for this application at the head of the document:
 
 ```html
 <head>
@@ -51,10 +52,10 @@ Since Pacifico-Bold is used in the page header, we added a preload tag to fetch
 
 Reload the application and run lighthouse again. Check the **Maximum critical path latency** section.
 
-<img class="w-screenshot" src="./lighthouse-audit-after-preload.png" alt="Pacifico-Bold webfont is preloaded and removed from the cricical request chain">
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="Pacifico-Bold webfont is preloaded and removed from the cricical request chain", width="645", height="166" %}
 
 Notice how the `Pacifico-Bold.woff2` is removed from the critical request chain. It is fetched earlier in the application.
 
-<img class="w-screenshot" src="./network-after-preload.png" alt="Pacifico-Bold webfont is preloaded">
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="Pacifico-Bold webfont is preloaded", width="553", height="254" %}
 
  With preload, the browser knows that it needs to download this file earlier. It is important to note that if not used correctly, preload can harm performance by making unnecessary requests for resources that are not used.
diff --git a/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-after-preload.png b/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-after-preload.png
deleted file mode 100644
index 6292ac351cc..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-after-preload.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-before-preload.png b/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-before-preload.png
deleted file mode 100644
index 1808eca76b3..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-web-fonts/lighthouse-audit-before-preload.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-web-fonts/network-after-preload.png b/src/site/content/en/fast/codelab-preload-web-fonts/network-after-preload.png
deleted file mode 100644
index 9f6474ba074..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-web-fonts/network-after-preload.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-preload-web-fonts/network-before-preload.png b/src/site/content/en/fast/codelab-preload-web-fonts/network-before-preload.png
deleted file mode 100644
index e1ad2ce6ed3..00000000000
Binary files a/src/site/content/en/fast/codelab-preload-web-fonts/network-before-preload.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/bundle-visualization.png b/src/site/content/en/fast/codelab-remove-unused-code/bundle-visualization.png
deleted file mode 100755
index b66d69f5998..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/bundle-visualization.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/displayed-warning.png b/src/site/content/en/fast/codelab-remove-unused-code/displayed-warning.png
deleted file mode 100755
index f382cc739da..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/displayed-warning.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/index.md b/src/site/content/en/fast/codelab-remove-unused-code/index.md
index 3ad3fb8125a..9851f9d6c4b 100644
--- a/src/site/content/en/fast/codelab-remove-unused-code/index.md
+++ b/src/site/content/en/fast/codelab-remove-unused-code/index.md
@@ -18,7 +18,7 @@ tags:
 In this codelab, improve the performance of the following application by
 removing any unused and unneeded dependencies.
 
-![App screenshot](./kitties.png)
+{% Img src="image/admin/A6WweLPrgyud8VNCP3Dc.png", alt="App screenshot", width="800", height="567" %}
 
 ## Measure
 
@@ -42,7 +42,7 @@ synchronized with every other person using the application. 🐈
 {% Instruction 'disable-cache', 'ol' %}
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" src="./main-bundle.png" alt="Original bundle size of 992 KB">
+{% Img src="image/admin/GnvBzXKQwy2az8Gyxl6D.png", alt="Original bundle size of 992 KB", width="800", height="169" %}
 
 Almost 1 MB worth of JavaScript is being shipped to load this simple application!
 
@@ -52,11 +52,11 @@ Take a look at the project warnings in DevTools.
 - Make sure that `Warnings` is enabled in the levels dropdown next to the
   `Filter` input.
 
-<img class="screenshot" src="./warnings.png" alt="Warnings filter">
+{% Img src="image/admin/DMdUUxzxNMEGZ6HsTd3P.png", alt="Warnings filter", width="800", height="244", class="screenshot" %}
 
 - Take a look at the displayed warning.
 
-<img class="screenshot" src="./displayed-warning.png" alt="Console warning">
+{% Img src="image/admin/QGn9dHsaWNjTpMCwc0Rc.png", alt="Console warning", width="800", height="295", class="screenshot" %}
 
 Firebase, which is one of the libraries used in this application, is being a
 good samaritan by providing a warning to let developers know to not import its
@@ -125,13 +125,13 @@ module.exports = {
 When the application reloads, you should see a visualization of the entire
 bundle instead of the app itself.
 
-![Webpack Bundle Analyzer](./bundle-visualization.png)
+{% Img src="image/admin/QhYbNr23tGbcHwFZGKIQ.png", alt="Webpack Bundle Analyzer", width="800", height="468" %}
 
 Not as cute as seeing some kittens 🐱, but incredibly helpful nonetheless.
 Hovering over any of the packages shows its size represented in three
 different ways:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -211,7 +211,7 @@ import 'firebase/database';
 Now when the app reloads, the DevTools warning does not show. Opening the
 DevTools **Network** panel also shows a _nice_ reduction in bundle size:
 
-<img class="screenshot" src="./reduced-main-bundle.png" alt="Bundle size reduced to 480 KB">
+{% Img src="image/admin/8agHvjw7351Yj8U1rIla.png", alt="Bundle size reduced to 480 KB", width="800", height="152", class="screenshot" %}
 
 More than half the bundle size was removed. Firebase provides many different
 services and gives developers the option to only include those that are actually
@@ -235,7 +235,7 @@ easily, but maybe it can be removed entirely?
 The birthday of each cute kitten is stored in **Unix** format (milliseconds) in
 the Firebase database.
 
-<img class="screenshot" src="./kitty-birthdays.png" alt="Birthdates stored in Unix format">
+{% Img src="image/admin/D1ufo1PdyzW3wFSu9sE1.png", alt="Birthdates stored in Unix format", width="560", height="236", class="screenshot" %}
 
 This is a timestamp of a particular date and time represented by the number of
 milliseconds that have elapsed since January 1, 1970 00:00 UTC. If the current
@@ -302,7 +302,7 @@ favoritesRef.on("value", (snapshot) => {
 
 Now reload the application and take a look at the **Network** panel once more.
 
-<img class="screenshot" src="./smallest-bundle.png" alt="Bundle size reduced to 225 KB">
+{% Img src="image/admin/ixTpGQBkJimzUmEFBMsR.png", alt="Bundle size reduced to 225 KB", width="800", height="154", class="screenshot" %}
 
 The size of our bundle was reduced by more than half again!
 
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/kitties.png b/src/site/content/en/fast/codelab-remove-unused-code/kitties.png
deleted file mode 100755
index 7924d4862ca..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/kitties.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/kitty-birthdays.png b/src/site/content/en/fast/codelab-remove-unused-code/kitty-birthdays.png
deleted file mode 100755
index 69c8424b637..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/kitty-birthdays.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/main-bundle.png b/src/site/content/en/fast/codelab-remove-unused-code/main-bundle.png
deleted file mode 100755
index f436b873dff..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/main-bundle.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/network.png b/src/site/content/en/fast/codelab-remove-unused-code/network.png
deleted file mode 100755
index 50a9c5980fc..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/network.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/reduced-main-bundle.png b/src/site/content/en/fast/codelab-remove-unused-code/reduced-main-bundle.png
deleted file mode 100755
index 43168e04e40..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/reduced-main-bundle.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/smallest-bundle.png b/src/site/content/en/fast/codelab-remove-unused-code/smallest-bundle.png
deleted file mode 100755
index ebca95e546f..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/smallest-bundle.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-remove-unused-code/warnings.png b/src/site/content/en/fast/codelab-remove-unused-code/warnings.png
deleted file mode 100755
index aa97332da8a..00000000000
Binary files a/src/site/content/en/fast/codelab-remove-unused-code/warnings.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-replace-gifs-with-video/index.md b/src/site/content/en/fast/codelab-replace-gifs-with-video/index.md
index 5cf7fa82ce1..f8e0846cc8f 100644
--- a/src/site/content/en/fast/codelab-replace-gifs-with-video/index.md
+++ b/src/site/content/en/fast/codelab-replace-gifs-with-video/index.md
@@ -35,7 +35,7 @@ There are a number of ways you can convert GIFs to video; this guide uses
 **[FFmpeg](https://www.ffmpeg.org/)**. It's already installed in the Glitch VM,
 and, if you want, you can follow [these instructions to install it on your
 local
-machine](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/#converting_animated_gifs_to_video)
+machine](/replace-gifs-with-videos/#create-mpeg-videos)
 as well.
 
 ## Open the console
@@ -80,7 +80,7 @@ second to run. When the command finishes, you should be able to type `ls` again
 and see two files:
 
 ```bash
-$ ls  
+$ ls
 cat-herd.gif  cat-herd.mp4
 ```
 
@@ -109,8 +109,8 @@ You should have one GIF, and two videos:
 ```bash
 $ ls -lh
 total 4.5M
--rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif  
--rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4  
+-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
+-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
 -rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
 ```
 
@@ -135,15 +135,15 @@ Luckily, you can recreate these behaviors using the `<video>` element.
 ```
 
 A `<video>` element using these attributes will play automatically, loop
-endlessly, play no audio, and play inline (i.e., not fullscreen), all the
+endlessly, play no audio, and play inline (that is, not fullscreen), all the
 behaviors expected of animated GIFs! 🎉
 
 ## Specify your sources
 
 All that's left to do is specify your video sources. The `<video>` element requires
 one or more `<source>` child elements pointing to different video files the
-browser can choose from, depending on format support.  
-Update the `<video>` with `<source>` elements that link to your cat-herd videos:  
+browser can choose from, depending on format support.
+Update the `<video>` with `<source>` elements that link to your cat-herd videos:
 
 ```html/1-2
 <video autoplay loop muted playsinline>
@@ -163,7 +163,7 @@ instead. If you prefer a WebM `<source>` be used first, specify it first!
 
 {% Instruction 'preview' %}
 
-The experience should look the same. So far so good.  
+The experience should look the same. So far so good.
 
 ## Verify with Lighthouse
 
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-logo.png b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-logo.png
deleted file mode 100755
index 5c48be3deb1..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-logo.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-photo.png b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-photo.png
deleted file mode 100755
index e6c34c7979d..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/elements-panel-photo.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/fixed-properly-size-images.png b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/fixed-properly-size-images.png
deleted file mode 100755
index a90ae3f65a6..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/fixed-properly-size-images.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/index.md b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/index.md
index 86402207d62..40cd59782e0 100644
--- a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/index.md
+++ b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/index.md
@@ -22,8 +22,7 @@ for most websites, using a tool like Lighthouse to automate this is essential.
 {% Instruction 'audit-performance', 'ol' %}
 1. Look for the results of the **Properly Size Images** audit.
 
-<img class="w-screenshot" src="./notfixed-properly-size-images.png" alt="The
-properly size images audit failing in Lighthouse.">
+{% Img src="image/admin/rGu0xlOX97DGQlujoHad.png", alt="The properly size images audit failing in Lighthouse.", width="800", height="320" %}
 
 The Lighthouse audit shows that both of this page's images need to be resized.
 
@@ -33,8 +32,7 @@ Start at the top of the page and fix the logo image.
 
 - Inspect `flower_logo.png` in the DevTools Elements panel.
 
-<img class="w-screenshot" src="./elements-panel-logo.png" alt="The DevTools
-elements panel">
+{% Img src="image/admin/W7Ig8iyp6dKpQyNkJX3S.png", alt="The DevTools elements panel", width="800", height="316" %}
 
 This is the CSS for `flower_logo.png`:
 
@@ -64,8 +62,7 @@ Next, fix the photo of the purple flowers.
 
 - Inspect `flower_photo.jpg` in the DevTools elements panel.
 
-<img class="w-screenshot" src="./elements-panel-photo.png" alt="The DevTools
-elements panel">
+{% Img src="image/admin/zGpgvrz00hsMHKYvQoyU.png", alt="The DevTools elements panel", width="800", height="275" %}
 
 This is the CSS for `flower_photo.jpg`:
 
@@ -78,8 +75,8 @@ This is the CSS for `flower_photo.jpg`:
 ```
 
 `50vw` sets the CSS width of `flower_photo.jpg` to "half the width of
-the browser."  
-([1vw](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
+the browser."
+([1vw](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
 is equal to 1% the width of the browser).
 
 The ideal size for this image would depend on the device it is being viewed on,
@@ -87,13 +84,12 @@ so you should resize it to a size that works well for most of your users. You
 can check your analytics data to learn which screen resolutions are common
 amongst your users:
 
-<img class="w-screenshot" src="./screen-resolution.png" alt="Google analytics of
-screen resolutions.">
+{% Img src="image/admin/6j3106xF9uxWCZGh7PrL.png", alt="Google analytics of screen resolutions.", width="684", height="865" %}
 
 This data indicates that 95%+ of the visitors to this site use screen
 resolutions 1920 pixels wide or less.
 
-Using this information we can calculate how wide the image should be:  
+Using this information we can calculate how wide the image should be:
 (1920 pixels wide) * (50% of browser width) = 960 pixels
 
 On resolutions greater than 1920 pixels wide, the image will be stretched to
@@ -122,8 +118,7 @@ for when you only care about an image's dimensions in one direction.
 - Re-run the Lighthouse Performance audit to verify that you have successfully
 re-sized the images.
 
-<img class="w-screenshot" src="./fixed-properly-size-images.png" alt="Lighthouse
-properly size images audit.">
+{% Img src="image/admin/ShzwI5v2hLhHR7CGDRqV.png", alt="Lighthouse properly size images audit.", width="800", height="271" %}
 
 … And it fails! Why is that?
 
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/notfixed-properly-size-images.png b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/notfixed-properly-size-images.png
deleted file mode 100755
index 8052aafd6d8..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/notfixed-properly-size-images.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/screen-resolution.png b/src/site/content/en/fast/codelab-serve-images-correct-dimensions/screen-resolution.png
deleted file mode 100755
index 45f3af6dbc0..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-correct-dimensions/screen-resolution.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-images-webp/index.md b/src/site/content/en/fast/codelab-serve-images-webp/index.md
index 50f8bbb93be..8f5550019d3 100644
--- a/src/site/content/en/fast/codelab-serve-images-webp/index.md
+++ b/src/site/content/en/fast/codelab-serve-images-webp/index.md
@@ -140,6 +140,6 @@ know if all the images on your site are using next-gen formats like WebP.
 {% Instruction 'audit-performance', 'ol' %}
 1. Verify the **Serve images in next-gen formats** audit is passed.
 
-<img class="w-screenshot" src="./lighthouse_passing.png" alt="Passing 'Serve images in next-gen formats' audit in Lighthouse">
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Passing 'Serve images in next-gen formats' audit in Lighthouse", width="701", height="651" %}
 
 Success! You are now serving WebP images on your site.
diff --git a/src/site/content/en/fast/codelab-serve-images-webp/lighthouse_passing.png b/src/site/content/en/fast/codelab-serve-images-webp/lighthouse_passing.png
deleted file mode 100755
index 43c71f75a7d..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-images-webp/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/app-screenshot.png b/src/site/content/en/fast/codelab-serve-modern-code/app-screenshot.png
deleted file mode 100644
index 8dcd62662da..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/app-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/code-coverage.png b/src/site/content/en/fast/codelab-serve-modern-code/code-coverage.png
deleted file mode 100755
index b65e324eb5c..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/code-coverage.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/debug-target-browsers.png b/src/site/content/en/fast/codelab-serve-modern-code/debug-target-browsers.png
deleted file mode 100755
index d5fe088254b..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/debug-target-browsers.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/entry-polyfills.gif b/src/site/content/en/fast/codelab-serve-modern-code/entry-polyfills.gif
deleted file mode 100755
index ee7c6a5f732..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/entry-polyfills.gif and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/index.md b/src/site/content/en/fast/codelab-serve-modern-code/index.md
index 1220bb31c7c..ea4ae392018 100644
--- a/src/site/content/en/fast/codelab-serve-modern-code/index.md
+++ b/src/site/content/en/fast/codelab-serve-modern-code/index.md
@@ -19,7 +19,7 @@ In this codelab, improve the performance of this simple application that allows
 users to rate random cats. Learn how to optimize the JavaScript bundle by
 minizming how much code is transpiled.
 
-![App screenshot](./app-screenshot.png)
+{% Img src="image/admin/E8nNmPiUnD9unvl0ydwT.png", alt="App screenshot", width="800", height="681" %}
 
 In the sample app,
 you can select a word or emoji to convey how much you like each cat.
@@ -40,25 +40,25 @@ optimizations:
 {% Instruction 'disable-cache', 'ol' %}
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" src="./original-bundle-size.png" alt="Original bundle size request">
+{% Img src="image/admin/WOLgtkSsnLlAVqXXkvS2.png", alt="Original bundle size request", width="717", height="127" %}
 
 Over 80 KB is used for this application! Time to find out if parts of the bundle
 aren't being used:
 
 {% Instruction 'devtools-command', 'ol' %}
 <!--lint disable code-block-style-->
-    <img class="w-screenshot" src="./show-coverage-command-menu.png" alt="Command Menu">
+    {% Img src="image/admin/bUJOV2XobvxF0LrIvML4.png", alt="Command Menu", width="800", height="170" %}
 
 1. Enter `Show Coverage` and hit `Enter` to display the **Coverage** tab.
 1. In the **Coverage** tab, click **Reload** to reload the
 application while capturing coverage.
 
-    <img class="w-screenshot" src="./record-with-code-coverage.png" alt="Reload app with code coverage">
+    {% Img src="image/admin/MVS59W0Ei307x4Ab3FvU.png", alt="Reload app with code coverage", width="800", height="363" %}
 
 1. Take a look at how much code was used versus how much was loaded for
 the main bundle:
 
-    <img class="w-screenshot" src="./code-coverage.png" alt="Code coverage of bundle">
+    {% Img src="image/admin/YaXfH1OcPENdyMeBBrqK.png", alt="Code coverage of bundle", width="800", height="77" %}
 <!--lint enable code-block-style-->
 Over half the bundle (44 KB) is not even utilized. This is because a lot of the
 code within consists of polyfills to ensure that the application works in older
@@ -76,15 +76,15 @@ of supporting these features.
 <!-- note "..." is used in the url for "For…of loop" -->
 The following ES2015 features are used in the application:
 
-+  [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
-+  [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-+  [For…of loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
-+  [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
++  [Arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
++  [Template literals](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals)
++  [For…of loop](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)
++  [Destructuring assignment](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
 <!-- lint enable no-repeat-punctuation -->
 
 The following ES2017 feature is used as well:
 
-+  [Async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
++  [Async functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)
 
 Feel free to dive into the source code in `src/index.js` to see how all of this
 is used.
@@ -97,7 +97,7 @@ understand. It does this in two ways:
 
 + **Polyfills** are included to emulate newer ES2015+ functions so that their APIs
 can be used even if it is not supported by the browser. Here is an example of a
-[polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Polyfill)
+[polyfill](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Polyfill)
 of the `Array.includes` method.
 + **Plugins** are used to transform ES2015 code (or later) into older ES5 syntax.
 Since these are syntax related changes (such as arrow functions), they cannot be emulated with polyfills.
@@ -206,7 +206,7 @@ of the editor.
 Babel logs a number of details to the console about the compilation process,
 including all the target environments that the code has been compiled for.
 
-<img class="w-screenshot" src="./debug-target-browsers.png" alt="Targeted browsers">
+{% Img src="image/admin/X6nauvGqKuyWoBekgCbw.png", alt="Targeted browsers", width="464", height="457" %}
 
 Notice how discontinued browsers, such as Internet Explorer, are included in
 this list. This is a problem because unsupported browsers won't have newer
@@ -216,14 +216,14 @@ browser to access your site.
 
 Babel also logs a list of transform plugins used:
 
-<img class="w-screenshot" src="./plugins-list.png" alt="List of plugins used">
+{% Img src="image/admin/clNXHWSfeD2RKDkIrJo8.png", alt="List of plugins used", width="800", height="604" %}
 
 That's a pretty long list! These are all the plugins that Babel needs to use to
 transform any ES2015+ syntax to older syntax for all the targeted browsers.
 
 However, Babel doesn't show any specific polyfills that are used:
 
-<img class="w-screenshot" src="./no-polyfills-added.png" alt="No polyfills added">
+{% Img src="image/admin/xPhc2usfwfIJkoK4EubY.png", alt="No polyfills added", width="800", height="38" %}
 
 This is because the entire `@babel/polyfill` is being imported directly.
 
@@ -250,7 +250,7 @@ the target browsers, add a `useBuiltIns: 'entry'` to the configuration.
 
 Reload the application. You can now see all the specific polyfills included:
 
-<img class="w-screenshot" src="./entry-polyfills.gif" alt="List of polyfills imported">
+{% Img src="image/admin/VQHDI6qG94zbTiorG3aT.gif", alt="List of polyfills imported", width="800", height="465" %}
 
 Although only needed polyfills for `"last 2 versions"` is now included, it is still a super long list! This is because
 polyfills needed for the target browsers for _every_ newer feature is still included. Change the value of the attribute to `usage`
@@ -282,11 +282,11 @@ import "@babel/polyfill";
 
 Now only the required polyfills needed for the application are included.
 
-<img class="w-screenshot" src="./usage-polyfills.png" alt="List of polyfills automatically included">
+{% Img src="image/admin/ir2qkYhxoJDWoQUhD8KD.png", alt="List of polyfills automatically included", width="800", height="114" %}
 
 The application bundle size is reduced significantly.
 
-<img class="w-screenshot" src="./usage-polyfills-bundle-size.png" alt="Bundle size reduced to 30.1 KB">
+{% Img src="image/admin/6cIW1H9dYz38h3jp9QpK.png", alt="Bundle size reduced to 30.1 KB", width="796", height="135" %}
 
 ## Narrowing the list of supported browsers
 
@@ -312,7 +312,7 @@ to the following:
 
 Take a look at the details for the fetched bundle.
 
-<img class="w-screenshot" src="./network-use-browser-share.png" alt="Bundle size of 30.0 KB">
+{% Img src="image/admin/LQrCZtEqujASX2KBR9ku.png", alt="Bundle size of 30.0 KB", width="793", height="131" %}
 
 Since the application is so small, there really isn't much of a difference with
 these changes. However, using a browser market share percentage (such as
@@ -354,7 +354,7 @@ browser:
 
 ## Using ES Modules with Babel
 
-In order to have separate `@babel/preset-env` settings for the two versions of
+To have separate `@babel/preset-env` settings for the two versions of
 the application, remove the `.babelrc` file. Babel settings can be added to the
 webpack configuration by specifying two different compilation formats for each
 version of the application.
@@ -549,7 +549,7 @@ Add the following to `src/index.js` at the end of the file:
 Now load the application in a browser that supports modules, such as the latest
 version of Chrome.
 
-<img class="w-screenshot" src="./module-network-request.png" alt="5.2 KB module fetched over network for newer browsers">
+{% Img src="image/admin/7DHv0rPqfFE14Qp7OtqJ.png", alt="5.2 KB module fetched over network for newer browsers", width="800", height="100" %}
 
 Only the module is fetched, with a much smaller bundle size due to it being
 largely untranspiled! The other script element is completely ignored by the
@@ -560,7 +560,7 @@ script with all the needed polyfills and transforms are be fetched. Here is a
 screenshot for all the requests made on an older version of Chrome (version
 38).
 
-<img class="w-screenshot" src="./legacy-script.png" alt="30 KB script fetched for older browsers">
+{% Img src="image/admin/xapbFvWftJjVdsekOAFJ.png", alt="30 KB script fetched for older browsers", width="800", height="324" %}
 
 ## Conclusion
 
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/legacy-script.png b/src/site/content/en/fast/codelab-serve-modern-code/legacy-script.png
deleted file mode 100755
index 6bf204f9b27..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/legacy-script.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/module-network-request.png b/src/site/content/en/fast/codelab-serve-modern-code/module-network-request.png
deleted file mode 100755
index 2fcfae1fbc6..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/module-network-request.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/network-panel.png b/src/site/content/en/fast/codelab-serve-modern-code/network-panel.png
deleted file mode 100755
index d5fe92467ae..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/network-panel.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/network-use-browser-share.png b/src/site/content/en/fast/codelab-serve-modern-code/network-use-browser-share.png
deleted file mode 100755
index c887a3aebc0..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/network-use-browser-share.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/no-polyfills-added.png b/src/site/content/en/fast/codelab-serve-modern-code/no-polyfills-added.png
deleted file mode 100755
index 84d62d874ed..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/no-polyfills-added.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/original-bundle-size.png b/src/site/content/en/fast/codelab-serve-modern-code/original-bundle-size.png
deleted file mode 100755
index e521968cb1a..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/original-bundle-size.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/plugins-list.png b/src/site/content/en/fast/codelab-serve-modern-code/plugins-list.png
deleted file mode 100755
index 30f45cd73cf..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/plugins-list.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/record-with-code-coverage.png b/src/site/content/en/fast/codelab-serve-modern-code/record-with-code-coverage.png
deleted file mode 100755
index 0bb24a722b3..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/record-with-code-coverage.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/show-coverage-command-menu.png b/src/site/content/en/fast/codelab-serve-modern-code/show-coverage-command-menu.png
deleted file mode 100755
index 87919113889..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/show-coverage-command-menu.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills-bundle-size.png b/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills-bundle-size.png
deleted file mode 100755
index 96e5fc6c89f..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills-bundle-size.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills.png b/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills.png
deleted file mode 100755
index 89b079f724f..00000000000
Binary files a/src/site/content/en/fast/codelab-serve-modern-code/usage-polyfills.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/countdown-app.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/countdown-app.png
deleted file mode 100644
index c1d5a195df1..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/countdown-app.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/index.md b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/index.md
index 30e0661f131..8cf2f3584df 100644
--- a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/index.md
+++ b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/index.md
@@ -13,7 +13,7 @@ tags:
   - performance
 ---
 
-[Webpack](https://developers.google.com/web/fundamentals/performance/webpack/)
+[Webpack](/webpack/)
 combines all your imported files and packages them into one or more output
 files known as bundles. Bundling is neat, but as your app grows your bundles
 will grow too. You need to monitor bundle sizes to ensure that they don't grow
@@ -25,7 +25,7 @@ To see it in action, here's an app that counts the days left until New Year's.
 It's built with [React](https://reactjs.org/) and [moment.js](https://momentjs.com/).
 (Just like real-world apps that increasingly rely on frameworks and libraries. 😉)
 
-![An app that counts the days left until New Year's day](countdown-app.png)
+{% Img src="image/admin/xG1cKnEmDUJk6Dd4892x.png", alt="An app that counts the days left until New Year's day", width="800", height="459" %}
 
 ## Measure
 
@@ -48,9 +48,9 @@ seen before. 1 "KiB" and 1 "KB" are fairly close in size: 1 KiB is 1024 bytes,
 while 1 KB is 1000 bytes.
 {% endAside %}
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./webpack-bundle-sizes.png" alt="Webpack output showing bundle size of 323 KiB">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/MpeaVZE4nJHOAAnlQ8Sz.png", alt="Webpack output showing bundle size of 323 KiB", width="640", height="59" %}
+  <figcaption>
     Webpack warning you about bulky JS bundle ⚠️
   </figcaption>
 </figure>
@@ -60,9 +60,9 @@ and the default threshold is **244 KiB uncompressed**, for both assets and
 [entry points](https://webpack.js.org/concepts/entry-points/)
 (the combination of all assets used during the initial load of a page).
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./webpack-warning.png" alt="Webpack warning that the asset exceeds the recommended size limit">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/tXgrsOqdJAzf6LTelr0v.png", alt="Webpack warning that the asset exceeds the recommended size limit", width="642", height="108" %}
+  <figcaption>
     Webpack warning you about bulky JS bundle ⚠️
   </figcaption>
 </figure>
@@ -71,9 +71,9 @@ Webpack will not only warn you, but it will also give you a recommendation on
 how to downsize your bundles. You can learn more about the recommended techniques on
 [Web Fundamentals](https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching#lazy-loading).
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="webpack-performance-recommendation.png" alt="Webpack performance optimization recommendation">
-  <figcaption class="w-figcaption">Webpack performance optimization recommendation 💁</figcaption>
+<figure>
+  {% Img src="image/admin/pygtt0At7nmByNKm38hr.png", alt="Webpack performance optimization recommendation", width="641", height="96" %}
+  <figcaption>Webpack performance optimization recommendation 💁</figcaption>
 </figure>
 
 ## Set a custom performance budget
@@ -82,7 +82,7 @@ An appropriate performance budget will depend on the nature of your project.
 It's always best to [do your own research](/your-first-performance-budget).
 A [good rule](/your-first-performance-budget#budget-for-quantity-based-metrics)
 of thumb is to deliver under 170 KB of compressed/minified
-[critical-path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
+[critical-path](/critical-rendering-path/)
 resources.
 
 {% Aside %}
@@ -119,9 +119,9 @@ Possible values for **hints** are:
    setting is recommended for production builds.
 3. **`false`**: No warnings or errors are shown.
 
-<figure class="w-figure">
-  <img src="webpack-error.png" alt="Webpack performance error in red font" class="w-screenshot w-screenshot--filled">
-  <figcaption class="w-figcaption">Webpack performance hint "error" 🚨</figcaption>
+<figure>
+  {% Img src="image/admin/ZFP0SZfO4zzD0lyD29Vk.png", alt="Webpack performance error in red font", width="606", height="107" %}
+  <figcaption>Webpack performance hint "error" 🚨</figcaption>
 </figure>
 
 ## Optimize
@@ -177,7 +177,9 @@ again to build the optimized bundle.
 
 Ta-da! You have shaved off 223 KiB (230KB) and the app is under budget.🎉
 
-<img class="w-screenshot w-screenshot--filled" src="./optimized-webpack-bundle-size.png" alt="Webpack bundle size output after optimization is 97.7 KiB">
+<figure>
+  {% Img src="image/admin/A6TIDToLthjRrHvxluND.png", alt="Webpack bundle size output after optimization is 97.7 KiB", width="473", height="58" %}
+</figure>
 
 ## Monitor
 
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/optimized-webpack-bundle-size.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/optimized-webpack-bundle-size.png
deleted file mode 100644
index bdfa1176798..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/optimized-webpack-bundle-size.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-bundle-sizes.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-bundle-sizes.png
deleted file mode 100644
index 6e022050e91..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-bundle-sizes.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-error.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-error.png
deleted file mode 100644
index 9ac4db2082c..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-error.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-performance-recommendation.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-performance-recommendation.png
deleted file mode 100644
index b58aaf8dfc2..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-performance-recommendation.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-warning.png b/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-warning.png
deleted file mode 100644
index 6b5ccf1c42b..00000000000
Binary files a/src/site/content/en/fast/codelab-setting-performance-budgets-with-webpack/webpack-warning.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-specifying-multiple-slot-widths/index.md b/src/site/content/en/fast/codelab-specifying-multiple-slot-widths/index.md
index 940dba3c231..2006fd86601 100644
--- a/src/site/content/en/fast/codelab-specifying-multiple-slot-widths/index.md
+++ b/src/site/content/en/fast/codelab-specifying-multiple-slot-widths/index.md
@@ -38,7 +38,7 @@ width" on screens 481–1024px wide, and 800px on screens wider than 1024px. The
 widths match the widths specified in the CSS.
 
 The ability to specify multiple slot widths accommodates page layouts that use
-different styling (i.e. image widths) for different viewport sizes.
+different styling (that is, image widths) for different viewport sizes.
 
 ## How to specify multiple slot widths
 
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/app-screenshot.png b/src/site/content/en/fast/codelab-text-compression-brotli/app-screenshot.png
deleted file mode 100755
index 5af9576ab44..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression-brotli/app-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/console-static-compression-brotli.png b/src/site/content/en/fast/codelab-text-compression-brotli/console-static-compression-brotli.png
deleted file mode 100644
index 64f58cac404..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression-brotli/console-static-compression-brotli.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/index.md b/src/site/content/en/fast/codelab-text-compression-brotli/index.md
index 1ae78ce2f0f..e2cd87e313b 100644
--- a/src/site/content/en/fast/codelab-text-compression-brotli/index.md
+++ b/src/site/content/en/fast/codelab-text-compression-brotli/index.md
@@ -22,7 +22,7 @@ compared to other compression algorithms like `gzip`, this codelab explores how
 Brotli compression can further reduce compression ratios and your app's overall
 size.
 
-![App screenshot](./app-screenshot.png)
+{% Img src="image/admin/k94QI9lhJ39aXpwUrMNk.png", alt="App screenshot", width="800", height="535" %}
 
 ## Measure
 
@@ -73,7 +73,9 @@ You can determine which compression algorithm is used via the `Content-Encoding`
 field in the Chrome Developer Tools Network tab (`Command+Option+I` or
 `Ctrl+Alt+I`):
 
-<img class="w-screenshot" src="./network-content-encoding-brotli.png" alt="Network panel">
+<figure>
+  {% Img src="image/admin/ZddI1FFjEckeO8mabgYl.png", alt="Network panel", width="800", height="136" %}
+</figure>
 
 ## Enabling Brotli
 
@@ -134,19 +136,21 @@ var shrinkRay = require('shrink-ray');
 
 And add it as a middleware before `express.static` is mounted:
 
-```js/6
+```js/4
 //...
 var app = express();
 
-app.use(express.static('public'));
-
 // compress all requests
 app.use(shrinkRay());
+
+app.use(express.static('public'));
 ```
 
 Now reload the app, and take a look at the bundle size in the Network panel:
 
-<img class="w-screenshot" src="./network-dynamic-compression-brotli.png"  alt="Bundle size with dynamic Brotli compression">
+<figure>
+  {% Img src="image/admin/KXDWBC6aH4o6MVJvBu8X.png", alt="Bundle size with dynamic Brotli compression", width="724", height="97" %}
+</figure>
 
 You can now see `brotli` is applied from `bz` in the `Content-Encoding` header.
 `main.bundle.js` is reduced from **225 KB to 53.1 KB**! This is ~14% smaller
@@ -205,24 +209,24 @@ var BrotliPlugin = require('brotli-webpack-plugin');
 
 And include it within the plugins array:
 
-<pre>
+```js/4-7
 module.exports = {
   // ...
   plugins: [
     // ...
-    <strong>new BrotliPlugin({
+    new BrotliPlugin({
       asset: '[file].br',
       test: /\.(js)$/
-    })</strong>
+    })
   ]
 },
-</pre>
+```
 
-The following arguments are used in the plugin array:
+The plugin array uses the following arguments:
 +  `asset`: The target asset name.
-+  `[file]` is replaced with the original asset file name
-+  `test`: All assets that match this RegExp (i.e. javascript assets ending in
-   `.js`) are processed
++  `[file]` is replaced with the original asset file name.
++  `test`: All assets that match this RegExp (that is, JavaScript assets ending in
+   `.js`) are processed.
 
 For example, `main.js` would be renamed to `main.js.br`.
 
@@ -240,7 +244,9 @@ cd public
 ls -lh
 ```
 
-<img class="w-screenshot" src="./console-static-compression-brotli.png"  alt="Bundle size with static Brotli compression">
+<figure>
+  {% Img src="image/admin/GOlRrAhdDWO7yi7Bm1Pg.png", alt="Bundle size with static Brotli compression", width="489", height="133" %}
+</figure>
 
 The brotli compressed version of the bundle, `main.bundle.js.br`, is now saved
 here as well and is **~76% smaller in size** (225 KB vs. 53 KB) than
@@ -250,20 +256,20 @@ Next, tell the server to send these brotli-compressed files whenever their
 original JS versions are being requested. This can be done by defining a new
 route in `server.js` before the files are served with `express.static`.
 
-<pre>
+```js/4-9
 var express = require('express');
 
 var app = express();
 
-<strong>app.get('*.js', (req, res, next) => {
+app.get('*.js', (req, res, next) => {
   req.url = req.url + '.br';
   res.set('Content-Encoding', 'br');
   res.set('Content-Type', 'application/javascript; charset=UTF-8');
   next();
-});</strong>
+});
 
 app.use(express.static('public'));
-</pre>
+```
 
 `app.get` is used to tell the server how to respond to a `GET` request for a
 specific endpoint. A callback function is then used to define how to handle this
@@ -299,10 +305,11 @@ app.get('*.js', (req, res, next) => {
 app.use(express.static('public'));
 ```
 
-
 Once the app reloads, take a look at the Network panel once more.
 
-<img class="w-screenshot" src="./network-static-compression-brotli.png"  alt="Bundle size of 53.1 KB (from 225KB)">
+<figure>
+  {% Img src="image/admin/2rJrkqLzWt3MT4XxNsYn.png", alt="Bundle size of 53.1 KB (from 225KB)", width="724", height="97" %}
+</figure>
 
 Success! You have used Brotli compression to further compress your assets!
 
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/network-content-encoding-brotli.png b/src/site/content/en/fast/codelab-text-compression-brotli/network-content-encoding-brotli.png
deleted file mode 100644
index a773ebc419a..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression-brotli/network-content-encoding-brotli.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/network-dynamic-compression-brotli.png b/src/site/content/en/fast/codelab-text-compression-brotli/network-dynamic-compression-brotli.png
deleted file mode 100644
index 726d940938d..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression-brotli/network-dynamic-compression-brotli.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression-brotli/network-static-compression-brotli.png b/src/site/content/en/fast/codelab-text-compression-brotli/network-static-compression-brotli.png
deleted file mode 100644
index 726d940938d..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression-brotli/network-static-compression-brotli.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/accept-encoding.png b/src/site/content/en/fast/codelab-text-compression/accept-encoding.png
deleted file mode 100755
index 3fef6808588..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/accept-encoding.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/app-screenshot.png b/src/site/content/en/fast/codelab-text-compression/app-screenshot.png
deleted file mode 100755
index 5af9576ab44..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/app-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/console-commands.png b/src/site/content/en/fast/codelab-text-compression/console-commands.png
deleted file mode 100755
index 22f76bb3a01..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/console-commands.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/content-encoding.png b/src/site/content/en/fast/codelab-text-compression/content-encoding.png
deleted file mode 100755
index f914709e92a..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/content-encoding.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/index.md b/src/site/content/en/fast/codelab-text-compression/index.md
index 9fbcea74314..7415bc60fe8 100644
--- a/src/site/content/en/fast/codelab-text-compression/index.md
+++ b/src/site/content/en/fast/codelab-text-compression/index.md
@@ -20,7 +20,7 @@ This codelab explores how both minifying and compressing the JavaScript
 bundle for the following application improves page performance by reducing
 the app's request size.
 
-![App screenshot](./app-screenshot.png)
+{% Img src="image/admin/Ga0pUShY7cQ0BDAPgPuh.png", alt="App screenshot", width="800", height="535" %}
 
 ## Measure
 
@@ -45,7 +45,7 @@ Now take a look at how large this application is:
 {% Instruction 'disable-cache', 'ol' %}
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" src="./network-original.png" alt="Original bundle size in Network panel">
+{% Img src="image/admin/Zzm8kiE2W29yGEZC7C2u.png", alt="Original bundle size in Network panel", width="800", height="186" %}
 
 Although a lot of progress was made in the ["Remove unused code"](/remove-unused-code)
 codelab to trim this bundle size down, 225 KB is still quite large.
@@ -109,7 +109,7 @@ To get an idea of what the minified code looks like, go ahead and click
 `main.bundle.js` while still in the DevTools **Network** panel. Now click the
 **Response** tab.
 
-<img class="w-screenshot" src="./minified-response.png" alt="Minified response">
+{% Img src="image/admin/uti2q15O2MtiEsegYoV9.png", alt="Minified response", width="800", height="249" %}
 
 The code in its final form, minified and mangled, is shown in the response body.
 To find out how large the bundle may have been if it was not minified, open
@@ -125,7 +125,7 @@ module.exports = {
 Reload the application and take a look at the bundle size again through the
 DevTools **Network** panel
 
-<img class="w-screenshot" src="./network-no-minify.png" alt="Bundle size of 767 KB">
+{% Img src="image/admin/H0lINRmM2gF6NHnzmkGM.png", alt="Bundle size of 767 KB", width="700", height="129" %}
 
 That's a pretty big difference! 😅
 
@@ -171,7 +171,7 @@ compression algorithm. Unlike minification which ends up providing perfectly
 valid code, compressed code needs to be _decompressed_ before being used.
 
 With every HTTP request and response, browsers and web servers can add
-[headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) to include
+[headers](https://developer.mozilla.org/docs/Web/HTTP/Headers) to include
 additional information about the asset being fetched or received. This can be
 seen in the `Headers` tab within the DevTools Network panel where three types
 are shown:
@@ -185,7 +185,7 @@ are shown:
 
 Take a look at the `accept-encoding` header in the `Request Headers`.
 
-<img class="w-screenshot" src="./accept-encoding.png" alt="Accept encoding header">
+{% Img src="image/admin/shmaD9cmjjFMITKL0TAW.png", alt="Accept encoding header", width="800", height="361" %}
 
 `accept-encoding` is used by the browser to specify which content
 encoding formats, or compression algorithms, it supports. There are many
@@ -279,12 +279,12 @@ app.use(express.static('public'));
 
 Now reload the app and take a look at the bundle size in the **Network** panel.
 
-<img class="w-screenshot" src="./network-dynamic-compress.png" alt="Bundle size with dynamic compression">
+{% Img src="image/admin/MMtTKWPKfht8RYd8BMYF.png", alt="Bundle size with dynamic compression", width="800", height="161" %}
 
 From 225 KB to 61.6 KB! In the `Response Headers` now, a `content-encoding`
 header shows that the server is sending down this file encoded with `gzip`.
 
-<img class="w-screenshot" src="./content-encoding.png" alt="Content encoding header">
+{% Img src="image/admin/523FjNSQOK95lGzg0B6D.png", alt="Content encoding header", width="800", height="470" %}
 
 ## Static compression
 
@@ -350,8 +350,8 @@ now created. Open the Glitch Console to take a look at what's inside the
 final `public/` directory that's served by the Node server.
 
 {% Aside %}
-The `public/` directory is included in the `.gitignore` file. Directories that
-contain build files are usually included here in order to be ignored by Git, and
+The `git.ignore` file includes the `public/` directory. Directories that
+contain build files are usually included here.
 Glitch also hides these files from the editor tree.
 {% endAside %}
 
@@ -365,7 +365,7 @@ cd public
 ls
 ```
 
-<img class="w-screenshot" src="./console-commands.png" alt="Final outputted files in public directory">
+{% Img src="image/admin/YQwCT87xMfMwWiH63lTS.png", alt="Final outputted files in public directory", width="800", height="188" %}
 
 The gzipped version of the bundle, `main.bundle.js.gz`, is now saved here as
 well. `CompressionPlugin` also compresses `index.html` by default.
@@ -403,7 +403,7 @@ that may be next.
 
 Once the app reloads, take a look at the `Network` panel once more.
 
-<img class="w-screenshot" src="./network-static-compress.png" alt="Bundle size reduction with static compression">
+{% Img src="image/admin/b7xYRsSdNhWX5Lc8zE51.png", alt="Bundle size reduction with static compression", width="800", height="176" %}
 
 Just like before, a significant reduction in bundle size!
 
diff --git a/src/site/content/en/fast/codelab-text-compression/minified-response.png b/src/site/content/en/fast/codelab-text-compression/minified-response.png
deleted file mode 100755
index 3acb4ed6cc3..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/minified-response.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/network-dynamic-compress.png b/src/site/content/en/fast/codelab-text-compression/network-dynamic-compress.png
deleted file mode 100755
index e64874fb4e0..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/network-dynamic-compress.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/network-no-minify.png b/src/site/content/en/fast/codelab-text-compression/network-no-minify.png
deleted file mode 100755
index 14df54131bf..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/network-no-minify.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/network-original.png b/src/site/content/en/fast/codelab-text-compression/network-original.png
deleted file mode 100755
index f7f84e39cba..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/network-original.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/network-static-compress.png b/src/site/content/en/fast/codelab-text-compression/network-static-compress.png
deleted file mode 100755
index 7f7f661b0d6..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/network-static-compress.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-text-compression/network-tab.png b/src/site/content/en/fast/codelab-text-compression/network-tab.png
deleted file mode 100755
index 50a9c5980fc..00000000000
Binary files a/src/site/content/en/fast/codelab-text-compression/network-tab.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/index.md b/src/site/content/en/fast/codelab-two-ways-to-prefetch/index.md
index 16d4e95e06d..077a5cfcc18 100644
--- a/src/site/content/en/fast/codelab-two-ways-to-prefetch/index.md
+++ b/src/site/content/en/fast/codelab-two-ways-to-prefetch/index.md
@@ -7,6 +7,7 @@ description: |
   Learn how to speed up future navigations by prefetching resources.
 date: 2019-09-12
 glitch: two-ways-to-prefetch
+related_post: link-prefetch
 tags:
   - performance
 ---
@@ -30,7 +31,7 @@ First establish the baseline performance:
 
 The `product-details.html` page takes about 600 ms to load:
 
-<img class="w-screenshot" src="./network-panel-one.png" alt="Network panel showing load times for product-details.html">
+{% Img src="image/admin/MVpybZcY1aF8slLFgJ0n.png", alt="Network panel showing load times for product-details.html", width="800", height="186" %}
 
 ## Prefetch the product page with `<link rel="prefetch">`
 
@@ -51,7 +52,7 @@ To improve navigation, insert a `prefetch` tag in the landing page to prefetch t
 </head>
 ```
 
-The `as` attribute is optional but recommended; it helps the browser set the right headers and determine whether the resource is already in the cache.  Example values for this attribute include: `document`, `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes).
+The `as` attribute is optional but recommended; it helps the browser set the right headers and determine whether the resource is already in the cache.  Example values for this attribute include: `document`, `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
 
 To verify that prefetching is working:
 
@@ -64,9 +65,9 @@ To verify that prefetching is working:
 
 Now when the landing page loads, the `product-details.html` page loads too, but at the lowest priority:
 
-<img class="w-screenshot" src="./network-panel-two.png" alt="Network panel showing product-details.html prefetched.">
+{% Img src="image/admin/LDkU6zNbFU7GhPuUcaCR.png", alt="Network panel showing product-details.html prefetched.", width="800", height="172" %}
 
-The page is kept in the [HTTP cache](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching) for five minutes, after which the normal [`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) rules for the document apply. In this case, `product-details.html` has  a `cache-control` header with a value of `public, max-age=0`, which means that the page is kept for a total of five minutes.
+The page is kept in the [HTTP cache](https://developer.mozilla.org/docs/Web/HTTP/Caching) for five minutes, after which the normal [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) rules for the document apply. In this case, `product-details.html` has  a `cache-control` header with a value of `public, max-age=0`, which means that the page is kept for a total of five minutes.
 
 ### Reevaluate performance
 
@@ -80,11 +81,11 @@ Take a look at the **Network** panel. There are two differences compared to the
 
 This is approximately a 98% reduction compared to the previous version, which took about 600 ms.
 
-<img class="w-screenshot" src="./network-panel-three.png" alt="Network panel showing product-details.html retrieved from prefetch cache.">
+{% Img src="image/admin/gJZPsifaqFPozkhnMznX.png", alt="Network panel showing product-details.html retrieved from prefetch cache.", width="800", height="223" %}
 
 ## Extra credit: Use `prefetch` as a progressive enhancement
 
-Prefetching is best implemented as a progressive enhancement for the users who are browsing on fast connections. You can use the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to check the network conditions and based on that dynamically inject prefetch tags. That way, you can minimize data consumption and save costs for users on slow or expensive data plans.
+Prefetching is best implemented as a progressive enhancement for the users who are browsing on fast connections. You can use the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) to check the network conditions and based on that dynamically inject prefetch tags. That way, you can minimize data consumption and save costs for users on slow or expensive data plans.
 
 To implement adaptive prefetching, first remove the `<link rel="prefetch">` tag from `views/index.html`:
 
@@ -95,7 +96,7 @@ To implement adaptive prefetching, first remove the `<link rel="prefetch">` tag
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
-	   <link rel="prefetch" href="/product-details.html" as="document"> 
+	   <link rel="prefetch" href="/product-details.html" as="document">
 	   ...
 	</head>
 ```
@@ -103,23 +104,23 @@ To implement adaptive prefetching, first remove the `<link rel="prefetch">` tag
 Then add the following code to `public/script.js` to declare a function that dynamically injects the `prefetch` tag when the user is on a fast connection:
 
 ```js/0-14/
-function injectLinkPrefetchIn4g(url) { 
-	if (window.navigator.connection.effectiveType === '4g') { 
-		//generate link prefetch tag 
-		const linkTag = document.createElement('link'); 
-		linkTag.rel = 'prefetch'; 
-		linkTag.href = url; 
-		linkTag.as = 'document'; 
-
-		//inject tag in the head of the document 
-		document.head.appendChild(linkTag); 
-	} 
+function injectLinkPrefetchIn4g(url) {
+	if (window.navigator.connection.effectiveType === '4g') {
+		//generate link prefetch tag
+		const linkTag = document.createElement('link');
+		linkTag.rel = 'prefetch';
+		linkTag.href = url;
+		linkTag.as = 'document';
+
+		//inject tag in the head of the document
+		document.head.appendChild(linkTag);
+	}
 }
 ```
 
 The function works as follows:
 
-- It checks the [effectiveType](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType) property of the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to determine if the user is on a 4G (or faster) connection.
+- It checks the [effectiveType](https://developer.mozilla.org/docs/Web/API/NetworkInformation/effectiveType) property of the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) to determine if the user is on a 4G (or faster) connection.
 - If that condition is fulfilled, it generates a `<link>` tag with `prefetch` as the type of hint, passes the URL that will be prefetched in the `href` attribute, and indicates that the resource is an HTML `document` in the `as` attribute.
 - Finally, it injects the script dynamically in the `head` of the page.
 
@@ -159,7 +160,7 @@ The landing page now prefetches `product-details.html` only on fast connections.
 
 You should see `product-details.html` in the Network panel:
 
-<img class="w-screenshot" src="./network-panel-four.png" alt="Network panel showing product-details.html prefetched.">
+{% Img src="image/admin/NCoFDNGs0iSfBkDjiwzd.png", alt="Network panel showing product-details.html prefetched.", width="800", height="201" %}
 
 To verify that the product page isn't prefetched on slow connections:
 
@@ -168,7 +169,7 @@ To verify that the product page isn't prefetched on slow connections:
 
 The **Network** panel should include only the resources for the landing page without `product-details.html`:
 
-<img class="w-screenshot" src="./network-panel-five.png" alt="Network panel showing product-details.html not being prefetched.">
+{% Img src="image/admin/xpHuregNQIEKrVylhG3G.png", alt="Network panel showing product-details.html not being prefetched.", width="800", height="171" %}
 
 ## Prefetch the stylesheet for the product page with the HTTP `Link` header
 
@@ -192,14 +193,14 @@ app.get('/', function(request, response) {
 
 The `style-product.css` is now prefetched at the lowest priority after the landing page loads:
 
-<img class="w-screenshot" src="./network-panel-six.png" alt="Network panel showing style-product.css prefetched.">
+{% Img src="image/admin/Memd8AIP4Yr5dhGGi240.png", alt="Network panel showing style-product.css prefetched.", width="800", height="205" %}
 
 To navigate to the product page, click **Buy now**. Take a look at the **Network** panel:
 
-<img class="w-screenshot" src="./network-panel-seven.png" alt="Network panel showing style-product.css retrieved from prefetch cache.">
+{% Img src="image/admin/12tQkKKPqx4JjaWofEYK.png", alt="Network panel showing style-product.css retrieved from prefetch cache.", width="800", height="223" %}
 
 The `style-product.css` file is retrieved from the "prefetch cache" and it took only 12 ms to load.
 
 {% Aside %}
-When using HTTP `Link` header, you can decide whether to prefetch depending on the network conditions based on the information available in [client hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/).
+When using HTTP `Link` header, you can decide whether to prefetch depending on the network conditions based on the information available in [client hints](/performance-optimizing-content-efficiency-client-hints//).
 {% endAside %}
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-five.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-five.png
deleted file mode 100644
index 2f73bec4804..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-five.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-four.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-four.png
deleted file mode 100644
index 7b20c7467bd..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-four.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-one.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-one.png
deleted file mode 100644
index 9d44578bb0d..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-one.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-seven.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-seven.png
deleted file mode 100644
index 2ae8f47da64..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-seven.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-six.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-six.png
deleted file mode 100644
index 2ca877aecf2..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-six.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-three.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-three.png
deleted file mode 100644
index abae5b72c2f..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-three.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-two.png b/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-two.png
deleted file mode 100644
index 649059f133a..00000000000
Binary files a/src/site/content/en/fast/codelab-two-ways-to-prefetch/network-panel-two.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/index.md
index d9b0fd461e5..eb0cb183222 100644
--- a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/index.md
+++ b/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -79,12 +79,12 @@ That's it! To see these changes in action, follow these steps:
 - Open the console and find the images that were just added. Their classes
   should change from `lazyload` to `lazyloaded` as you scroll down the page.
 
-![Images being lazy loaded](./lazyload-console.png)
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="Images being lazy loaded", width="428", height="252" %}
 
 - Watch the network panel to see the image files load individually as you scroll
   down the page.
 
-![Images being lazy loaded](./lazysizes-waterfall.png)
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="Images being lazy loaded", width="418", height="233" %}
 
 ## Verify using Lighthouse
 
@@ -96,6 +96,6 @@ add lazy loading to any offscreen images.
 {% Instruction 'audit-performance', 'ol' %}
 1. Verify the **Defer offscreen images** audit was passed.
 
-![Passing 'Efficiently encode images' audit in Lighthouse](./lighthouse_passing.png)
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Passing 'Efficiently encode images' audit in Lighthouse", width="800", height="774" %}
 
 Success! You have used lazysizes to lazy load the images on your page.
diff --git a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazyload-console.png b/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazyload-console.png
deleted file mode 100755
index be8818f605a..00000000000
Binary files a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazyload-console.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazysizes-waterfall.png b/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazysizes-waterfall.png
deleted file mode 100755
index 196c4407acb..00000000000
Binary files a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lazysizes-waterfall.png and /dev/null differ
diff --git a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lighthouse_passing.png b/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lighthouse_passing.png
deleted file mode 100755
index 88e4a4da597..00000000000
Binary files a/src/site/content/en/fast/codelab-use-lazysizes-to-lazyload-images/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/compress-images/artifacts.png b/src/site/content/en/fast/compress-images/artifacts.png
deleted file mode 100644
index bd47326c157..00000000000
Binary files a/src/site/content/en/fast/compress-images/artifacts.png and /dev/null differ
diff --git a/src/site/content/en/fast/compress-images/index.md b/src/site/content/en/fast/compress-images/index.md
index b6e2fd40fcb..984c585cf14 100644
--- a/src/site/content/en/fast/compress-images/index.md
+++ b/src/site/content/en/fast/compress-images/index.md
@@ -3,6 +3,7 @@ layout: post
 title: Choose the correct level of compression
 authors:
   - ilyagrigorik
+  - jlwagner
 description: |
   Many images can be heavily compressed, giving excellent performance improvements. This post helps you to choose the right level of compression to maintain the look of images while getting the best performance.
 date: 2018-08-30
@@ -99,7 +100,7 @@ This can be an important constraint for large images and devices which do not ha
 &mdash;for example, low-end mobile devices.
 {% endAside %}
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
 <table>
 <thead>
   <tr>
@@ -149,8 +150,8 @@ What if you reduce the palette to 256 colors?
 Then you would only need 8 bits in total for the RGB channels and immediately save two bytes per pixel&mdash;that's 50% compression savings over the original 4 bytes per pixel format!
 
 
-<figure class="w-figure">
-  <img src="./artifacts.png" alt="Compression artifacts">
+<figure>
+  {% Img src="image/admin/ssek7uXzhs67joEbp0P8.png", alt="Compression artifacts", width="612", height="266" %}
   <figcaption>Left to right (PNG): 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors).</figcaption>
 </figure>
 
@@ -229,6 +230,14 @@ quality 90 JPEG will produce a very different result than a quality 90 WebP.
 In fact, even quality levels for the same image format may produce visibly different output based on implementation of the compressor!
 {% endAside %}
 
+## Effects of image compression on Core Web Vitals
+
+Because images are often candidates for [Largest Contentful Paint](/lcp/), reducing the resource load time of an image can translate into better LCP in both [the lab](/lab-and-field-data-differences/#lab-data) and in [the field](/lab-and-field-data-differences/#field-data).
+
+When playing with compression settings on raster image formats, be sure to experiment with WebP and AVIF formats to see if you can deliver the same image in a small footprint as compared to older formats.
+
+You want to be careful not to _overcompress_ raster images, though. A good solution is to use an image optimization CDN to find the best compression settings for you, but an alternative may be to use tools like [Butteraugli](https://github.com/google/butteraugli) to estimate visual differences so that you don't encode images _too_ aggressively and lose too much quality.
+
 ## Image optimization checklist
 
 Some tips and techniques to keep in mind as you work on optimizing your images:
@@ -238,7 +247,7 @@ which makes them a perfect fit for the multi-device and high-resolution world.
 * **Minify and compress SVG assets:** XML markup produced by most drawing applications
 often contains unnecessary metadata which can be removed;
 Ensure that your servers are configured to apply GZIP compression for SVG assets.
-* **Prefer WebP over older raster formats**: [WebP images](/serve-images-webp/) will usually be far smaller than older images.
+* **Prefer WebP or AVIF over older raster formats**: [WebP](/serve-images-webp/) and [AVIF images](/compress-images-avif/) will usually be far smaller than older image formats.
 * **Pick best raster image format:** determine your functional requirements and [select the one that suits each particular asset](/choose-the-right-image-format/).
 * **Experiment with optimal quality settings for raster formats:** don't be afraid to dial down the "quality" settings,
 the results are often very good and byte savings are significant.
diff --git a/src/site/content/en/fast/content-delivery-networks/index.md b/src/site/content/en/fast/content-delivery-networks/index.md
new file mode 100644
index 00000000000..47d9eea7089
--- /dev/null
+++ b/src/site/content/en/fast/content-delivery-networks/index.md
@@ -0,0 +1,291 @@
+---
+layout: post
+title: Content delivery networks (CDNs)
+authors:
+  - katiehempenius
+description: |
+  This article provides a comprehensive overview of content delivery networks (CDNs).
+  In addition, it explains how to choose, configure, and optimize a CDN setup.
+subhead: |
+  Improve performance by using a content delivery network.
+date: 2020-09-22
+#updated: 2020-09-14
+hero: image/admin/22YYRBuQy8gvQhgllLKq.jpg
+tags:
+  - blog
+  - performance
+  - network
+---
+
+Content delivery networks (CDNs) improve site performance by using a distributed network of servers to deliver resources to users. Because CDNs reduce server load, they reduce server costs and are well-suited to handling traffic spikes. This article discusses how CDNs work and provides platform-agnostic guidance on choosing, configuring, and optimizing a CDN setup.
+
+## Overview
+
+A content delivery network consists of a network of servers that are optimized for quickly delivering content to users. Although CDNs are arguably best known for serving cached content, CDNs can also improve the delivery of uncacheable content. Generally speaking, the more of your site delivered by your CDN, the better.
+
+At a high-level, the performance benefits of CDNs stem from a handful of principles: CDN servers are located closer to users than [origin servers](https://en.wikipedia.org/wiki/Upstream_server) and therefore have a shorter [round-trip time (RTT)](https://en.wikipedia.org/wiki/Round-trip_delay) latency; networking optimizations allow CDNs to deliver content more quickly than if the content was loaded "directly" from the origin server; lastly, CDN caches eliminate the need for a request to travel to the origin server.
+
+{% Aside 'key-term' %}
+**Origin server** refers to the server that a CDN retrieves content from.
+{% endAside %}
+
+### Resource delivery
+
+Although it may seem non-intuitive, using a CDN to deliver resources (even uncacheable ones) will typically be faster than having the user load the resource "directly" from your servers.
+
+When a CDN is used to deliver resources from the origin, a new connection is established between the client and a nearby CDN server. The remainder of the journey (in other words, the data transfer between the CDN server and origin) occurs over the CDN's network - which often includes existing, persistent connections with the origin. The benefits of this are twofold: terminating the new connection as close to the user as possible eliminates unnecessary connection setup costs (establishing a new connection is expensive and requires multiple roundtrips); using a pre-warmed connection allows data to be immediately transferred at the maximum possible throughput.
+
+
+<figure>
+  {% Img src="image/admin/M9kzM7J7FenUyO7E9MF0.png", alt="Comparison of connection setup with and without a CDN", width="800", height="512" %}
+</figure>
+
+Some CDNs improve upon this even further by routing traffic to the origin through multiple CDN servers spread across the Internet. Connections between CDN servers occur over reliable and highly optimized routes, rather than routes determined by the [Border Gateway Protocol (BGP)](https://en.wikipedia.org/wiki/Border_Gateway_Protocol). Although BGP is the internet's de facto routing protocol, its routing decisions are not always performance-oriented. Therefore, BGP-determined routes are likely to be less performant than the finely-tuned routes between CDN servers.
+
+<figure>
+  {% Img src="image/admin/ZLMPFySQgBkpWvgujuJP.png", alt="Comparison of connection setup with and without a CDN", width="800", height="449" %}
+</figure>
+
+
+### Caching
+
+Caching resources on a CDN's servers eliminates the need for a request to travel all the way to the origin in order to be served. As a result, the resource is delivered more quickly; this also reduces the load on the origin server.
+
+#### Adding resources to the cache
+
+The most commonly used method of populating CDN caches is to have the CDN "pull" resources as they are needed - this is known as "origin pull". The first time that a particular resource is requested from the cache the CDN will request it from the origin server and cache the response. In this manner, the contents of the cache are built-up over time as additional uncached resources are requested.
+
+#### Removing resources from the cache
+
+CDNs use cache eviction to periodically remove not-so-useful resources from the cache. In addition, site owners can use purging to explicitly remove resources.
+
+
+*  **Cache eviction**
+
+    Caches have a finite storage capacity. When a cache nears its capacity, it makes room for new resources by removing resources that haven't been accessed recently, or which take up a lot of space. This process is known as cache eviction. A resource being evicted from one cache does not necessarily mean that it has been evicted from all caches in a CDN network.
+
+*  **Purging**
+
+    Purging (also known as "cache invalidation") is a mechanism for removing a resource from a CDN's caches without having to wait for it to expire or be evicted. It is typically executed via an API. Purging is critical in situations where content needs to be retracted (for example, correcting typos, pricing errors, or incorrect news articles). On top of that, it can also play a crucial role in a site's caching strategy.
+
+    If a CDN supports near instant purging, purging can be used as a mechanism for managing the caching of dynamic content: cache dynamic content using a long TTL, then purge the resource whenever it is updated. In this way, it is possible to maximize the caching duration of a dynamic resource, despite not knowing in advance when the resource will change. This technique is sometimes referred to as "hold-till-told caching".
+
+    When purging is used at scale it is typically used in conjunction with a concept known as "cache tags" or "surrogate cache keys". This mechanism allows site owners to associate one or more additional identifiers (sometimes referred to as "tags") with a cached resource. These tags can then be used to carry out highly granular purging. For example, you might add a "footer" tag to all resources (for example, `/about`, `/blog`) that contain your site footer. When the footer is updated, instruct your CDN to purge all resources associated with the "footer" tag.
+
+#### Cacheable resources
+
+If and how a resource should be cached depends on whether it is public or private; static or dynamic.
+
+##### Private and public resources
+
+*  **Private Resources**
+
+    Private resources contain data intended for a single user and therefore should not be cached by a CDN. Private resources are indicated by the `Cache-Control: private` header.
+
+*  **Public Resources**
+
+    Public resources do not contain user-specific information and therefore are cacheable by a CDN. A resource may be considered cacheable by a CDN if it does not have a `Cache-Control: no-store` or `Cache-Control: private` header. The length of time that a public resource can be cached depends on how frequently the asset changes.
+
+##### Dynamic and static content
+
+*   **Dynamic content**
+
+    Dynamic content is content that changes frequently. An API response and a store homepage are examples of this content type. However, the fact that this content changes frequently doesn't necessarily preclude it from being cached. During periods of heavy traffic, caching these responses for very short periods of time (for example, 5 seconds) can significantly reduce the load on the origin server, while having minimal impact on data freshness.
+
+*   **Static content**
+
+    Static content changes infrequently, if ever. Images, videos, and versioned libraries are typically examples of this content type. Because static content does not change, it should be cached with a long Time to Live (TTL) - for example, 6 months or 1 year.
+
+## Choosing a CDN
+
+Performance is typically a top consideration when choosing a CDN. However, the other features that a CDN offers (for example, security and analytics features), as well as a CDN's pricing, support, and onboarding are all important to consider when choosing a CDN.
+
+
+### Performance
+
+At a high-level, a CDN's performance strategy can be thought of in terms of the tradeoff between minimizing latency and maximizing cache hit ratio. CDNs with many points of presence (PoPs) can deliver lower latency but may experience lower cache hit ratios as a result of traffic being split across more caches. Conversely, CDNs with fewer PoPs may be located geographically further from users, but can achieve higher cache hit ratios.
+
+As a result of this tradeoff, some CDNs use a tiered approach to caching: PoPs located close to users (also known as "edge caches") are supplemented with central PoPs that have higher cache hit ratios. When an edge cache can't find a resource, it will look to a central PoP for the resource. This approach trades slightly greater latency for a higher likelihood that the resource can be served from a CDN cache - though not necessarily an edge cache.
+
+The tradeoff between minimizing latency and maximizing cache hit ratio is a spectrum. No particular approach is universally better; however, depending on the nature of your site and its user base, you may find that one of these approaches delivers significantly better performance than the other.
+
+It's also worth noting that CDN performance can vary significantly depending on geography, time of day, and even current events. Although it's always a good idea to do your own research on a CDN's performance, it can be difficult to predict the exact performance you'll get from a CDN.
+
+
+### Additional features
+
+CDNs typically offer a wide variety of features in addition to their core CDN offering. Commonly offered features include: load balancing, image optimization, video streaming, edge computing, and security products.
+
+
+## How to setup and configure a CDN
+
+Ideally you should use a CDN to serve your entire site. At a high-level, the setup process for this consists of signing up with a CDN provider, then updating your CNAME DNS record to point at the CDN provider. For example, the CNAME record for `www.example.com` might point to `example.my-cdn.com`. As a result of this DNS change, traffic to your site will be routed through the CDN.
+
+If using a CDN to serve all resources is not an option, you can configure a CDN to only serve a subset of resources - for example, only static resources. You can do this by creating a separate CNAME record that will only be used for resources that should be served by the CDN. For example, you might create a `static.example.com` CNAME record that points to `example.my-cdn.com`. You would also need to rewrite the URLs of resources being served by the CDN to point to the `static.example.com` subdomain that you created.
+
+Although your CDN will be set up at this point, there will likely be inefficiencies in your configuration. The next two sections of this article will explain how to get the most out of your CDN by increasing cache hit ratio and enabling performance features.
+
+
+## Improving cache hit ratio
+
+An effective CDN setup will serve as many resources as possible from the cache. This is commonly measured by cache hit ratio (CHR). Cache hit ratio is defined as the number of cache hits divided by the number of total requests during a given time interval.
+
+A freshly initialized cache will have a CHR of 0 but this increases as the cache is populated with resources. A CHR of 90% is a good goal for most sites. Your CDN provider should supply you with analytics and reporting regarding your CHR.
+
+When optimizing CHR, the first thing to verify is that all cacheable resources are being cached and cached for the correct length of time. This is a simple assessment that should be undertaken by all sites.
+
+The next level of CHR optimization, broadly speaking, is to fine tune your CDN settings to make sure that logically equivalent server responses aren't being cached separately. This is a common inefficiency that occurs due to the impact of factors like query params, cookies, and request headers on caching.
+
+
+### Initial audit
+
+Most CDNs will provide cache analytics. In addition, tools like [WebPageTest](https://webpagetest.org/) and [Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/) can also be used to quickly verify that all of a page's static resources are being cached for the correct length of time. This is accomplished by checking the HTTP Cache headers of each resource. Caching a resource using the maximum appropriate Time To Live (TTL) will avoid unnecessary origin fetches in the future and therefore increase CHR.
+
+At a minimum, one of these headers typically needs to be set in order for a resource to be cached by a CDN:
+
+*   `Cache-Control: max-age=`
+*   `Cache-Control: s-maxage=`
+*   `Expires`
+
+In addition, although it does not impact if or how a resource is cached by a CDN, it is good practice to also set the [`Cache-Control: immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading) directive.`Cache-Control: immutable` indicates that a resource "will not be updated during its freshness lifetime". As a result, the browser will not revalidate the resource when serving it from the browser cache, thereby eliminating an unnecessary server request. Unfortunately, this directive is only [supported](https://caniuse.com/#feat=mdn-http_headers_cache-control_immutable) by Firefox and Safari - it is not supported by Chromium-based browsers. This [issue](https://bugs.chromium.org/p/chromium/issues/detail?id=611416) tracks Chromium support for `Cache-Control: immutable`. Starring this issue can help encourage support for this feature.
+
+For a more detailed explanation of HTTP caching, refer to [Prevent unnecessary network requests with the HTTP Cache](/http-cache/).
+
+
+### Fine tuning
+
+A slightly simplified explanation of how CDN caches work is that the URL of a resource is used as the key for caching and retrieving the resource from the cache. In practice, this is still overwhelmingly true, but is complicated slightly by the impact of things like request headers and query params. As a result, rewriting request URLs is an important technique for both maximizing CHR and ensuring that the correct content is served to users. A properly configured CDN instance strikes the correct balance between overly granular caching (which hurts CHR) and insufficiently granular caching (which results in incorrect responses being served to users).
+
+#### Query params
+
+By default, CDNs take query params into consideration when caching a resource. However, small adjustments to query param handling can have a significant impact on CHR. For example:
+
+
+
+*   **Unnecessary query params**
+
+    By default, a CDN would cache `example.com/blog` and `example.com/blog?referral_id=2zjk` separately even though they are likely the same underlying resource. This is fixed by adjusting a CDN's configuration to ignore the `referral\_id` query param.
+
+*   **Query param order**
+
+    A CDN will cache `example.com/blog?id=123&query=dogs` separately from `example.com/blog?query=dogs&id=123`. For most sites, query param order does not matter, so configuring the CDN to sort the query params (thereby normalizing the URL used to cache the server response) will increase CHR.
+
+
+#### Vary
+
+The [Vary](https://developer.mozilla.org/docs/Web/HTTP/Headers/Vary) response header informs caches that the server response corresponding to a particular URL can vary depending on the headers set on the request (for example, the [Accept-Language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) or [Accept-Encoding](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Encoding) request headers). As a result, it instructs a CDN to cache these responses separately. The Vary header is not widely supported by CDNs and may result in an otherwise cacheable resource not being served from a cache.
+
+Although the Vary header can be a useful tool, inappropriate usage hurts CHR. In addition, if you do use `Vary`, normalizing request headers will help improve CHR. For example, without normalization the request headers `Accept-Language: en-US` and `Accept-Language: en-US,en;q=0.9` would result in two separate cache entries, even though their contents would likely be identical.
+
+
+#### Cookies
+
+Cookies are set on requests via the [`Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cookie) header; they are set on responses via the `Set-Cookie` header. Unnecessary use of [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header should be avoided given that caches will typically not cache server responses containing this header.
+
+
+## Performance features
+
+This section discusses performance features that are commonly offered by CDNs as part of their core product offering. Many sites forget to enable these features, thereby losing out on easy performance wins.
+
+
+### Compression
+
+All text-based responses should be [compressed](/reduce-network-payloads-using-text-compression/#data-compression) with either gzip or Brotli. If you have the choice, choose Brotli over gzip. Brotli is a newer compression algorithm, and compared to gzip, it can achieve higher compression ratios.
+
+There are two types of CDN support for Brotli compression: "Brotli from origin" and "automatic Brotli compression".
+
+
+#### Brotli from origin
+
+Brotli from origin is when a CDN serves resources that were Brotli-compressed by the origin. Although this may seem like a feature that all CDNs should be able to support out of the box, it requires that a CDN be able to cache multiple versions (in other words, gzip-compressed and Brotli-compressed versions) of the resource corresponding to a given URL.
+
+
+#### Automatic Brotli compression
+
+Automatic Brotli compression is when resources are Brotli compressed by the CDN. CDNs can compress both cacheable and non-cacheable resources.
+
+The first time that a resource is requested it is served using "good enough" compression - for example, Brotli-5. This type of compression is applicable to both cacheable and non-cacheable resources.
+
+Meanwhile, if a resource is cacheable, the CDN will use offline processing to compress the resource at a more powerful but far slower compression level - for example, Brotli-11. Once this compression completes, the more compressed version will be cached and used for subsequent requests.
+
+
+#### Compression best practices
+
+Sites that want to maximize performance should apply Brotli compression at both their origin server and CDN. Brotli compression at the origin minimizes the transfer size of resources that can't be served from the cache. To prevent delays in serving requests, the origin should compress dynamic resources using a fairly conservative compression level - for example, Brotli-4; static resources can be compressed using Brotli-11. If an origin does not support Brotli, gzip-6 can be used to compress dynamic resources; gzip-9 can be used to compress static resources.
+
+
+### TLS 1.3
+
+TLS 1.3 is the newest version of [Transport Layer Security (TLS)](https://en.wikipedia.org/wiki/Transport_Layer_Security), the cryptographic protocol used by [HTTPS](https://en.wikipedia.org/wiki/HTTPS). TLS 1.3 provides better privacy and performance compared to TLS 1.2.
+
+TLS 1.3 shortens the TLS handshake from two roundtrips to one. For connections using HTTP/1 or HTTP/2, shortening the TLS handshake to one roundtrip effectively reduces connection setup time by 33%.
+
+<figure>
+  {% Img src="image/admin/FnCSj1W23jXaiOWCp0Bw.png", alt="Comparison of the TLS 1.2 and TLS 1.3 handshakes", width="800", height="448" %}
+</figure>
+
+### HTTP/2 and HTTP/3
+
+HTTP/2 and HTTP/3 both provide performance benefits over HTTP/1. Of the two, HTTP/3 offers greater _potential_ performance benefits. HTTP/3 isn't fully standardized yet, but it will be widely [supported](https://caniuse.com/#feat=http3) once this occurs.
+
+
+#### HTTP/2
+
+If your CDN hasn't already enabled [HTTP/2](https://almanac.httparchive.org/en/2019/http2) by default, you should consider turning it on. HTTP/2 provides multiple [performance benefits](https://hpbn.co/http2) over HTTP/1 and is [supported](https://caniuse.com/#feat=http2) by all major browsers. Performance features of HTTP/2 include: [multiplexing](https://hpbn.co/http2/#request-and-response-multiplexing), [stream prioritization](https://hpbn.co/http2/#stream-prioritization), [server push](https://almanac.httparchive.org/en/2019/http2#http2-push), and [header compression](https://tools.ietf.org/html/rfc7541/).
+
+*  **Multiplexing**
+
+    Multiplexing is arguably the most important feature of HTTP/2. Multiplexing enables a single TCP connection to serve multiple request-response pairs at the same time. This eliminates the overhead of unnecessary connection setups; given that the number of connections that a browser can have open at a given time is limited, this also has the implication that the browser is now able to request more of a page's resources in parallel. Multiplexing theoretically removes the need for HTTP/1 optimizations like concatenation and sprite sheets - however, in practice, these techniques will remain relevant given that larger files compress better.
+
+
+*  **Stream prioritization**
+
+    Multiplexing enables multiple concurrent streams; [stream prioritization](https://httpwg.org/specs/rfc7540.html#StreamPriority) provides an interface for communicating relative priority of each of these streams. This helps the server to send the most important resources first - even if they weren't requested first.
+
+Stream prioritization is expressed by the browser via a dependency tree and is merely a statement of _preference_: in other words, the server is not obligated to meet (or even consider) the priorities supplied by the browser. Stream prioritization becomes more effective when more of a site is served through a CDN.
+
+CDN implementations of HTTP/2 resource prioritization vary wildly. To identify whether your CDN fully and properly supports HTTP/2 resource prioritization, check out [Is HTTP/2 Fast Yet?](https://ishttp2fastyet.com/).
+
+
+Although switching your CDN instance to HTTP/2 is largely a matter of flipping a switch, it's important to thoroughly test this change before enabling it in production. HTTP/1 and HTTP/2 use the same conventions for request and response headers - but HTTP/2 is far less forgiving when these conventions aren't adhered to. As a result, non-spec practices like including non-ASCII or uppercase characters in headers may begin causing errors once HTTP/2 is enabled. If this occurs, a browser's attempts to download the resource will fail. The failed download attempt will be visible in the "Network" tab of DevTools. In addition, the error message "ERR_HTTP2_PROTOCOL_ERROR" will be displayed in the console.
+
+
+#### HTTP/3
+
+[HTTP/3](https://en.wikipedia.org/wiki/HTTP/3) is the successor to [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2). As of September 2020, all major browsers have experimental [support](https://caniuse.com/#feat=http3) for HTTP/3 and some CDNs support it. Performance is the primary benefit of HTTP/3 over HTTP/2. Specifically, HTTP/3 eliminates head-of-line blocking at the connection level and reduces connection setup time.
+
+
+*  **Elimination of head-of-line blocking**
+
+    HTTP/2 introduced multiplexing, a feature that allows a single connection to be used to transmit multiple streams of data simultaneously. However, with HTTP/2, a single dropped packet blocks all streams on a connection (a phenomena known as a head-of-line blocking). With HTTP/3, a dropped packet only blocks a single stream. This improvement is largely the result of HTTP/3 using [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol) (HTTP/3 uses UDP via [QUIC](https://en.wikipedia.org/wiki/QUIC)) rather than [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol). This makes HTTP/3 particularly useful for data transfer over congested or lossy networks.
+
+<figure>
+  {% Img src="image/admin/B7YKfqGG4eS2toSoTDdS.png", alt="Diagram showing the differences in data transmission between HTTP/1, HTTP/2, and HTTP/3", width="800", height="449" %}
+</figure>
+
+*  **Reduced connection setup time**
+
+    HTTP/3 uses TLS 1.3 and therefore shares its performance benefits: establishing a new connection only requires a single round-trip and resuming an existing connection does not require any roundtrips.
+
+<figure>
+  {% Img src="image/admin/7ffDEjblsisTNsfkynt6.png", alt="Comparison of connection resumption between TLS 1.2, TLS 1.3, TLS 1.3 0-RTT, and HTTP/3", width="800", height="400" %}
+</figure>
+
+HTTP/3 will have the biggest impact on users on poor network connections: not only because HTTP/3 handles packet loss better than its predecessors, but also because the absolute time savings resulting from a 0-RTT or 1-RTT connection setup will be greater on networks with high latency.
+
+
+### Image optimization
+
+CDN image optimization services typically focus on image optimizations that can be applied automatically in order to reduce image transfer size. For example: stripping [EXIF](https://en.wikipedia.org/wiki/Exif) data, applying lossless compression, and converting images to newer file formats (for example, WebP). Images make up ~50% of the transfer bytes on the median web page, so optimizing images can significantly reduce page size.
+
+
+### Minification
+
+[Minification](/reduce-network-payloads-using-text-compression/#minification) removes unnecessary characters from JavaScript, CSS, and HTML. It's preferable to do minification at the origin server, rather than the CDN. Site owners have more context about the code to be minified and therefore can often use more aggressive minification techniques than those employed by CDNs. However, if minifying code at the origin is not an option, minification by the CDN is a good alternative.
+
+
+## Conclusion
+
+*   **Use a CDN:** CDNs deliver resources quickly, reduce load on the origin server, and are helpful for dealing with traffic spikes.
+*   **Cache content as aggressively as possible:** Both static and dynamic content can and should be cached - albeit for varying durations. Periodically audit your site to make sure that you are optimally cacheing content.
+*   **Enable CDN performance features:** Features like Brotli, TLS 1.3, HTTP/2, and HTTP/3 further improve performance.
diff --git a/src/site/content/en/fast/cookie-notice-best-practices/index.md b/src/site/content/en/fast/cookie-notice-best-practices/index.md
new file mode 100644
index 00000000000..7a7e811c348
--- /dev/null
+++ b/src/site/content/en/fast/cookie-notice-best-practices/index.md
@@ -0,0 +1,457 @@
+---
+layout: post
+title: Best practices for cookie notices
+subhead: |
+  Optimize cookie notices for performance and usability.
+authors:
+  - katiehempenius
+date: 2021-03-30
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/V8rNgYUkkAWET3EkBL6H.png
+alt: Picture of cookie notices.
+description: |
+  Learn about how cookie notices affect performance, performance measurement, and UX.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+This article discusses how cookie notices can affect performance, performance
+measurement, and user experience.
+
+
+## Performance
+
+Cookie notices can have a significant impact on page performance due to
+the fact that they are typically loaded early in the page load process, are
+shown to all users, and can potentially influence the loading of ads and other
+page content.
+
+Here's how cookie notices can impact Web Vitals metrics:
+
+
+
+*  **Largest Contentful Paint (LCP):**
+    Most cookie consent notices are fairly small and therefore typically don't
+    contain a page's LCP element. However, this can happen—particularly on mobile
+    devices. On mobile devices, a cookie notice typically takes up a larger portion
+    of the screen. This usually occurs when a cookie notice contains a large
+    block of text (text blocks can be LCP elements too).
+
+*  **First Input Delay (FID):**
+    Generally speaking, your cookie consent solution in and of itself should have a
+    minimal impact on FID—cookie consent requires little JavaScript execution.
+    However, the technologies that these cookies enable—namely advertising and
+    tracking scripts—may have a significant impact on page interactivity. Delaying
+    these scripts until cookie acceptance can serve as a technique to decrease
+    First Input Delay (FID).
+
+*  **Cumulative Layout Shift (CLS):**
+    Cookie consent notices are a very common source of layout shifts.
+
+Generally speaking, you can expect a cookie notice from third-party providers to
+have a greater impact on performance than a cookie notice that you build
+yourself. This is not a problem unique to cookie notices—but rather the nature
+of third-party scripts in general.
+
+
+### Best practices
+
+The best practices in this section focus on third-party cookie notices. Some,
+but not all, of these best practices will also be applicable to first-party
+cookie notices.
+
+
+#### Load cookie notices scripts asynchronously
+
+Cookie notice scripts should be loaded asynchronously. To do this, add the
+[`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async)
+attribute to the script tag.
+
+```html
+<script src="https://cookie-notice.com/script.js" async>
+```
+
+Scripts that are not asynchronous block the browser parser. This delays page
+load and LCP. For more information, see [Efficiently load third-party
+JavaScript](/efficiently-load-third-party-javascript/).
+
+{% Aside %}
+If you must use synchronous scripts (for example, some cookie notices rely on
+synchronous scripts to implement cookie blocking) you should make sure that this
+request loads as quickly as possible. One way to do this is to [use resource
+hints](/preconnect-and-dns-prefetch/).
+{% endAside %}
+
+
+#### Load cookie notice scripts directly
+
+Cookie notice scripts should be loaded "directly" by placing the script tag in
+the HTML of the main document—rather than loaded by a tag manager or other
+script. Using a tag manager or secondary script to inject the cookie notice
+script delays the loading of the cookie notice script: it obscures the script
+from the browser's lookahead parser and it prevents the script from loading
+before JavaScript execution.
+
+
+#### Establish an early connection with the cookie notice origin
+
+All sites that load their cookie notice scripts from a third-party location
+should use either the `dns-prefetch` or `preconnect` resource hints to help
+establish an early connection with the origin that hosts cookie notice
+resources. For more information, see [Establish network connections early to
+improve perceived page speed](/preconnect-and-dns-prefetch/).
+
+```html
+<link rel="preconnect" href="https://cdn.cookie-notice.com/">
+```
+
+{% Aside %}
+It is common for cookie notices to load resources from multiple origins—
+for example, loading resources from both
+`www.cookie-notice.com` and
+`cdn.cookie-notice.com`. Separate origins require separate connections and
+therefore separate resource hints.
+{% endAside %}
+
+
+#### Preload cookie notices as appropriate
+
+Some sites would benefit from using the
+[`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)
+resource hint to load their cookie notice script. The `preload` resource hint
+informs the browser to initiate an early request for the specified resource.
+
+```html
+<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
+```
+
+`preload` is most powerful when its usage is limited to fetching a couple key
+resources per page. Thus, the usefulness of preloading the cookie notice script
+will vary depending on the situation.
+
+
+#### Be aware of performance tradeoffs when styling cookie notices
+
+Customizing the look and feel of a third-party cookie notice may incur
+additional performance costs. For example, third-party cookie notices aren't
+always able to reuse the same resources (for example, web fonts) that are used
+elsewhere on the page. In addition, third-party cookie notices tend to load
+styling at the end of long request chains. To avoid any surprises, be aware of
+how your cookie notice loads and applies styling and related resources.
+
+
+#### Avoid layout shifts
+
+These are some of the most common layout shift issues associated with cookie
+notices:
+
+
+*   **Top-of-screen cookie notices:** Top-of-screen cookie notices are a very
+    common source of layout shift. If a cookie notice is inserted into the DOM
+    after the surrounding page has already rendered, it will push the page
+    elements below it further down the page. This type of layout shift can be
+    eliminated by reserving space in the DOM for the consent notice. If this is
+    not a feasible solution—for example, if the dimensions of your cookie
+    notice vary by geography, consider using a sticky footer or modal to
+    display the cookie notice. Because both of these alternative approaches
+    display the cookie notice as an "overlay" on top of the rest of the page,
+    the cookie notice should not cause content shifts when it loads.
+*   **Animations**: Many cookie notices use animations—for example, "sliding in"
+    a cookie notice is a common design pattern. Depending on how these effects
+    are implemented, they can cause layout shifts. For more information, see
+    [Debugging layout shifts](/debugging-layout-shifts/).
+*   **Fonts**: Late-loading fonts can block render and or cause layout shifts.
+    This phenomena is more apparent on slow connections.
+
+#### Advanced loading optimizations
+
+These techniques take more work to implement but can further optimize the
+loading of cookie notice scripts:
+
+*   Caching and serving third-party cookie notice scripts from your own servers
+    can improve the delivery speed of these resources.
+*   Using [service
+    workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+    can allow you more control over the [fetching and caching of
+    third-party
+    scripts](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)
+    such as cookie notice scripts.
+
+
+## Performance measurement
+
+Cookie notices can impact performance measurements. This section discusses some
+of these implications and techniques for mitigating them.
+
+
+### Real User Monitoring (RUM)
+
+Some analytics and RUM tools use cookies to collect performance data. In the
+event that a user declines usage of cookies these tools cannot capture
+performance data.
+
+Sites should be aware of this phenomenon; it is also worthwhile to understand
+the mechanisms that your RUM tooling uses to collect its data. However, for the
+typical site this discrepancy probably isn't a cause for alarm given the
+direction and magnitude of the data skew. Cookie usage is not a technical
+requirement for performance measurement. The
+[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript library is
+an example of a library that does not use cookies.
+
+Depending on how your site uses cookies to collect
+performance data (that is, whether the cookies contain personal information), as
+well as the legislation in question, the use of cookies for performance
+measurement might not be subject to the same legislative requirements as some of
+the cookies used on your site for other purposes—for example, advertising
+cookies. Some sites choose to break out performance cookies as a separate
+category of cookies when asking for user consent.
+
+
+### Synthetic monitoring
+
+
+Without custom configuration, most synthetic tools (such as Lighthouse and WebPageTest) will only measure the
+experience of a first-time user who has not responded to a cookie consent
+notice. However, not only do variations in cache state (for example, an initial
+visit versus a repeat visit) need to be considered when collecting performance
+data, but also variations in cookie acceptance state—accepted, rejected, or
+unresponded.
+
+
+The following sections discuss WebPageTest and Lighthouse settings that can be
+helpful for incorporating cookie notices into performance measurement workflows.
+However, cookies and cookie notices are just one of many factors that can be
+difficult to perfectly simulate in lab environments. For this reason, it is
+important to make [RUM
+data](/user-centric-performance-metrics/#how-metrics-are-measured)
+the cornerstone of your performance benchmarking, rather than synthetic tooling.
+
+
+### Testing cookie notices with WebPageTest
+
+#### Scripting
+
+You can use scripting to have a [WebPageTest](https://webpagetest.org/) "click"
+the cookie consent banner while collecting a trace.
+
+Add a script by going to the **Script** tab. The script below navigates to the URL
+to be tested and then clicks the DOM element with the id `cookieButton`.
+
+{% Aside 'caution' %}
+WebPageTest scripts are
+[tab-delimited](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#scripting).
+{% endAside %}
+
+```shell
+combineSteps
+navigate    %URL%
+clickAndWait    id=cookieButton
+```
+
+When using this script be aware that:
+
+*   `combineSteps` tells WebPageTest to "combine" the results of the scripting
+    steps that follow into a single set of traces and measurements. Running this
+    script without `combineSteps` can also be useful—separate traces make it
+    easy to see whether resources were loaded before or after cookie acceptance.
+*   `%URL%` is a WebPageTest convention that refers to the URL that is being
+    tested.
+*   `clickAndWait` tells WebPageTest to click on the element indicated by
+    `attribute=value` and wait for the subsequent browser activity to complete.
+    It follows the format `clickAndWait attribute=Value`.
+
+
+If you've configured this script correctly, the screenshot taken by WebPageTest
+should not show a cookie notice (the cookie notice has been accepted).
+
+For more information on WebPageTest scripting, check out [WebPageTest
+documentation](https://docs.webpagetest.org/scripting/).
+
+#### Set cookies
+
+To run WebPageTest with a cookie set, go to the **Advanced** tab and add the
+cookie header to the **Custom headers** field:
+
+
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/qSccrAxF0H4yoSzYRYdh.png", alt="Screeshot showing the 'Custom headers' field in WebPageTest", width="800", height="181" %}
+
+
+#### Change the test location
+
+To change the test location used by WebPageTest, click the **Test Location**
+dropdown located on the **Advanced Testing** tab.
+
+
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/J27NcDQ5LTtXYloaA1DN.png", alt="Screenshot of the 'Test Location' dropdown in WebPageTest", width="800", height="267" %}
+
+
+
+### Testing cookie notices with Lighthouse
+
+Setting cookies on a Lighthouse run can serve as a mechanism for getting a
+page into a particular state for testing by Lighthouse. Lighthouse's cookie
+behavior varies slightly by context (DevTools, CLI, or PageSpeed Insights).
+
+
+#### DevTools
+
+Cookies are not cleared when Lighthouse is run from DevTools. However, other
+types of storage are cleared by default. This behavior can be changed by using
+the **Clear Storage** option in the **Lighthouse** settings panel.
+
+
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/nmNDeSoGEQUVKeTP7q7R.png", alt="Screenshot higlighting the Lighthouse 'Clear Storage' option", width="800", height="304" %}
+
+
+
+#### CLI
+
+Running Lighthouse from the CLI uses a fresh Chrome instance, so no cookies
+are set by default. To run Lighthouse from the CLI with a particular cookie set,
+use the following
+[command](https://github.com/GoogleChrome/lighthouse#cli-options):
+
+```shell
+lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
+```
+
+For more information on setting custom request headers in Lighthouse CLI, see
+[Running Lighthouse on Authenticated
+Pages](https://github.com/GoogleChrome/lighthouse/blob/master/docs/authenticated-pages.md).
+
+
+#### PageSpeed Insights
+
+Running Lighthouse from PageSpeed Insights uses a fresh Chrome instance and does
+not set any cookies. PageSeed Insights cannot be configured to set particular
+cookies.
+
+
+## User experience
+
+The user experience (UX) of different cookie consent notices is primarily the
+result of two decisions: the location of the cookie notice within the page and
+the extent to which the user can customize a site's use of cookies. This section
+discusses potential approaches to these two decisions.
+
+{% Aside 'caution' %}
+Cookie notice UX is often heavily influenced by legislation which can vary
+widely by geography. Thus, some of the design patterns discussed in this section
+may not be relevant to your particular situation. This article should not be
+considered a substitute for legal advice.
+{% endAside %}
+
+When considering potential designs for your cookie notice, here are some things
+to think about:
+
+*   UX: Is this a good user experience? How will this particular design affect
+    existing page elements and user flows?
+*   Business: What is your site's cookie strategy? What are your goals for the
+    cookie notice?
+*   Legal: Does this comply with legal requirements?
+*   Engineering: How much work would this be to implement and maintain? How
+    difficult would it be to change?
+
+
+
+### Placement
+
+Cookie notices can be displayed as a header, inline element, or footer. They can
+also be displayed on top of page content using a modal or served as an
+[interstitial](https://en.wikipedia.org/wiki/Interstitial_webpage).
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/LLqHAhp7W6x4E3rZh0Oc.png", alt="Diagram showing examples of different placement options for cookie notices", width="800", height="345" %}
+
+
+
+#### Header, footer, and inline cookie notices
+
+Cookie notices are commonly placed in the header or footer. Of these two
+options, the footer placement is generally preferable because it is unobtrusive,
+does not compete for attention with banner ads or notifications, and typically
+does not cause CLS. In addition, it is a common place for placing privacy
+policies and terms of use.
+
+Although inline cookie notices are an option, they can be difficult to integrate
+into existing user interfaces, and therefore are uncommon.
+
+#### Modals
+
+Modals are cookie consent notices that are displayed on top of page content.
+Modals can look and perform quite differently depending on their size.
+
+Smaller, partial-screen modals can be a good alternative for sites that are
+struggling to implement cookie notices in a way that doesn't cause [layout
+shifts](/cls/).
+
+On the other hand, large modals that obscure the majority of page content should
+be used carefully. In particular, smaller sites may find that users bounce
+rather than accept the cookie notice of an unfamiliar site with obscured
+content. Although they are not necessarily synonymous concepts, if you are
+considering using a full-screen cookie consent modal, you should be aware of
+legislation regarding [cookie
+walls](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/).
+
+
+{% Aside %}
+Large modals can be considered a type of interstitial. Google Search [does not
+penalize](https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on)
+the usage of interstitials when they are used to comply with legal regulations
+such as in the case of cookie banners. However, their usage of interstitials in
+other contexts—particularly if they are intrusive or create a poor user
+experience—may be penalized.
+{% endAside %}
+
+
+### Configurability
+
+Cookie notice interfaces give users varying levels of control over which cookies
+they accept.
+
+
+#### No configurability
+
+These notice-style cookie banners do not present users with direct UX controls
+for opting out of cookies. Instead, they typically include a link to the site's
+cookie policy which may provide users with information about managing cookies
+using their web browser. These notices typically include either a "dismiss" and/or
+"Accept" button.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/RlAg8DCjBC0bX7Ki5MuE.png", alt="Diagram showing examples of cookie notices with no cookie configurability", width="800", height="518" %}
+
+#### Some configurability
+
+These cookie notices give the user the option of declining cookies but do not
+support more granular controls. This approach to cookie notices is less common.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/MOl8u9NcnyjCWogxzjdz.png", alt="Diagram showing examples of cookie notices with some cookie configurability", width="800", height="508" %}
+
+#### Full configurability
+
+These cookie notices provide users with more fine-grained controls for
+configuring the cookie usage that they accept.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QfFoqkkmdKHAYlftIH0n.png", alt="Diagram showing examples of chookie notices with full cookie configurability", width="800", height="467" %}
+
+*  **UX:**
+    Controls for configuring cookie usage are most commonly displayed using a
+    separate modal that is launched when the user responds to the initial cookie
+    consent notice. However, if space permits, some sites will display these
+    controls inline within the initial cookie consent notice.
+
+*  **Granularity:**
+    The most common approach to cookie configurability is to allow users to
+    opt-in to cookies by cookie "category". Examples of common cookie categories
+    include functional, targeting, and social media cookies.
+
+    However, some sites will go a step further and allow users to opt-in on a
+    per-cookie basis. Alternatively, another way of providing users with more
+    specific controls is to break down cookie categories like "advertising" into
+    specific use cases—for example, allowing users to separately opt-in to
+    "basic ads" and "personalized ads".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/z7zFPtCkFi8GEpkfubek.png", alt="Diagram showing examples of cookie notices with full cookie configurability", width="800", height="372" %}
diff --git a/src/site/content/en/fast/debug-layout-shifts/index.md b/src/site/content/en/fast/debug-layout-shifts/index.md
new file mode 100644
index 00000000000..3c141a44d1b
--- /dev/null
+++ b/src/site/content/en/fast/debug-layout-shifts/index.md
@@ -0,0 +1,444 @@
+---
+layout: post
+title: Debug layout shifts
+subhead: |
+  Learn how to identify and fix layout shifts.
+authors:
+  - katiehempenius
+date: 2021-03-11
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/N65l8ccOUEDESpnnEkje.png
+alt: Picture of a layout shift.
+description: |
+  Learn how to identify and fix layout shifts.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+
+The first part of this article discusses tooling for debugging layout shifts,
+while the second part discusses the thought process to use when
+identifying the cause of a layout shift.
+
+
+## Tooling
+
+
+### Layout Instability API
+
+The [Layout Instability API](https://wicg.github.io/layout-instability/) is the
+browser mechanism for measuring and reporting layout shifts. All tools for
+debugging layout shifts, including DevTools, are ultimately built upon the
+Layout Instability API. However, using the Layout Instability API directly is a
+powerful debugging tool due to its flexibility.
+
+{% Aside %}
+The Layout Instability API is only
+[supported](https://caniuse.com/mdn-api_layoutshift) by Chromium browsers. At
+the current time there is no way to measure or debug layout shifts in
+non-Chromium browsers.
+{% endAside %}
+
+
+#### Usage
+
+The same code [snippet](/cls/#measure-cls-in-javascript) that
+measures [Cumulative Layout Shift (CLS)](/cls/) can also
+serve to debug layout shifts. The snippet below logs information about layout
+shifts to the console. Inspecting this log will provide you information
+about when, where, and how a layout shift occurred.
+
+```javascript
+let cls = 0;
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    if (!entry.hadRecentInput) {
+      cls += entry.value;
+      console.log('Current CLS value:', cls, entry);
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+When running this script be aware that:
+
+
+
+*   The `buffered: true` option indicates that the
+    [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+    should check the browser's [performance entry
+    buffer](https://www.w3.org/TR/performance-timeline-2/#dfn-performance-entry-buffer)
+    for performance entries that were created before the observer's
+    initialization. As a result, the `PerformanceObserver` will report layout
+    shifts that happened both before and after it was initialized. Keep this in
+    mind when inspecting the console logs. An initial glut of layout shifts can
+    reflect a reporting backlog, rather than the sudden occurrence of numerous
+    layout shifts.
+*   To avoid impacting performance, the `PerformanceObserver` waits until the main
+    thread is idle to report on layout shifts. As a result, depending on how
+    busy the main thread is, there may be a slight delay between when a layout
+    shift occurs and when it is logged in the console.
+*   This script ignores layout shifts that occurred within 500&nbsp;ms of user input
+    and therefore do not count towards CLS.
+
+
+
+Information about layout shifts is reported using a combination of two APIs: the
+[`LayoutShift`](https://wicg.github.io/layout-instability/#layoutshift) and
+[`LayoutShiftAttribution`](https://wicg.github.io/layout-instability/#sec-layout-shift-attribution)
+interfaces. Each of these interfaces are explained in more detail in the
+following sections.
+
+
+#### LayoutShift
+
+Each layout shift is reported using the `LayoutShift` interface. The contents of
+an entry look like this:
+
+```javascript
+duration: 0
+entryType: "layout-shift"
+hadRecentInput: false
+lastInputTime: 0
+name: ""
+sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
+startTime: 11317.934999999125
+value: 0.17508567530168798
+```
+
+The entry above indicates a layout shift during which three DOM elements changed
+position. The layout shift score of this particular layout shift was `0.175`.
+
+These are the properties of a `LayoutShift` instance that are most relevant to
+debugging layout shifts:
+
+
+
+| Property | Description |
+|----------|-------------|
+|`sources`| The `sources` property lists the DOM elements that moved during the layout shift. This array can contain up to five sources. In the event that there are more than five elements impacted by the layout shift, the five largest (as measured by impact on layout stability) sources of layout shift are reported. This information is reported using the LayoutShiftAttribution interface (explained in more detail below).|
+|`value`| The `value` property reports the [layout shift score](/cls/#layout-shift-score) for a particular layout shift.|
+|`hadRecentInput`| The `hadRecentInput` property indicates whether a layout shift occurred within 500 milliseconds of user input.|
+|`startTime`| The `startTime` property indicates when a layout shift occurred. `startTime` is indicated in milliseconds and is measured relative to the [time that the page load was initiated](https://www.w3.org/TR/hr-time-2/#sec-time-origin).|
+|`duration`| The `duration` property will always be set to `0`. This property is inherited from the [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) interface (the `LayoutShift` interface extends the `PerformanceEntry` interface). However, the concept of duration does not apply to layout shift events, so it is set to `0`. For information on the `PerformanceEntry` interface, refer to the [spec](https://w3c.github.io/performance-timeline/#the-performanceentry-interface).|
+
+{% Aside %}
+The [Web Vitals
+Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
+can log layout shift info to the console. To enable this feature, go to
+**Options > Console Logging**.
+{% endAside %}
+
+#### LayoutShiftAttribution
+
+The `LayoutShiftAttribution` interface describes a single shift of a single DOM
+element. If multiple elements shift during a layout shift, the `sources`
+property contains multiple entries.
+
+For example, the JSON below corresponds to a layout shift with one source: the
+downward shift of the `<div id='banner'>` DOM element from `y: 76` to
+`y:246`.
+
+```json
+// ...
+  "sources": [
+    {
+      "node": "div#banner",
+      "previousRect": {
+        "x": 311,
+        "y": 76,
+        "width": 4,
+        "height": 18,
+        "top": 76,
+        "right": 315,
+        "bottom": 94,
+        "left": 311
+      },
+      "currentRect": {
+        "x": 311,
+        "y": 246,
+        "width": 4,
+        "height": 18,
+        "top": 246,
+        "right": 315,
+        "bottom": 264,
+        "left": 311
+      }
+    }
+  ]
+```
+
+The `node` property identifies the HTML element that shifted. Hovering on this
+property in DevTools highlights the corresponding page element.
+
+The `previousRect` and `currentRect` properties report the size and position of
+the node.
+
+
+
+*   The `x` and `y` coordinates report the x-coordinate and y-coordinate
+    respectively of the top-left corner of the element
+*   The `width` and `height` properties report the width and height respectively
+    of the element.
+*   The `top`, `right`, `bottom`, and `left` properties report the x or y
+    coordinate values corresponding to the given edge of the element. In other
+    words, the value of `top` is equal to `y`; the value of `bottom` is equal to
+    `y+height`.
+
+If all properties of `previousRect` are set to 0 this means that the element has
+shifted into view. If all properties of `currentRect` are set to 0 this means
+that the element has shifted out of view.
+
+{% Aside 'caution' %}
+Layout Instability API currently does not ignore elements that shifted but were not
+visible due to another element being positioned in front of them.
+Use `display: none`, `visibility: hidden`, or `opacity: 0` to avoid layout shifts in
+cases where you need to run layout on some elements before you make them visible to
+the user.
+{% endAside %}
+
+One of the most important things to understand when interpreting these outputs
+is that elements listed as _sources_ are the elements that shifted during the
+layout shift. However, it's possible that these elements are only indirectly
+related to the "root cause" of layout instability. Here are a few examples.
+
+**Example #1**
+
+This layout shift would be reported with one source: element B. However, the
+root cause of this layout shift is the change in size of element A.
+
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/oaM41OYL7mFtGcpIN8KF.png",
+  alt="Example showing a layout shift caused by a change in element dimensions",
+  width="800",
+  height="452"
+ %}
+
+
+**Example #2**
+
+The layout shift in this example would be reported with two sources: element A
+and element B. The root cause of this layout shift is the change in position of
+element A.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/AhaslIEWb5fFMMgiZcI2.png",
+  alt="Example showing a layout shift caused by a change in element position",
+  width="800",
+  height="451"
+ %}
+
+
+**Example #3**
+
+The layout shift in this example would be reported with one source: element B.
+Changing the position of element B resulted in this layout shift.
+
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/6zKjd4Ua6YJ94LMlqiMR.png",
+  alt="Example showing a layout shift caused by a change in element position",
+  width="800",
+  height="451"
+ %}
+
+**Example #4**
+
+Although element B changes size, there is no layout shift in this example.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/ZujHWxsXI3C7tupe42oD.png",
+  alt="Example showing a element changing size but not causing a layout shift",
+  width="800",
+  height="446"
+ %}
+
+
+Check out a [demo of how DOM changes are reported by the Layout Instability API](https://desert-righteous-router.glitch.me/).
+
+
+### DevTools
+
+
+#### Performance panel
+
+The **Experience** pane of the DevTools **Performance** panel displays all
+layout shifts that occur during a given performance trace—even if they occur
+within 500&nbsp;ms of a user interaction and therefore don't count towards CLS.
+Hovering over a particular layout shift in the **Experience** panel highlights
+the affected DOM element.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Uug2fnJT8mOc2YQmxo2l.png",
+  alt="Screenshot of a layout shift displayed in the DevTools Network panel",
+  width="724",
+  height="629"
+ %}
+
+To view more information about the layout shift, click on the layout shift, then
+open the **Summary** drawer. Changes to the element's dimensions are listed
+using the format `[width, height]`; changes to the element's position are listed
+using the format `[x,y]`. The **Had recent input** property indicates whether a
+layout shift occurred within 500&nbsp;ms of a user interaction.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/AfVjsH9Nl9w0lJwQZEjR.png",
+  alt="Screenshot of the DevTools 'Summary' tab for a layout shift",
+  width="612",
+  height="354"
+ %}
+
+For information on the duration of a layout shift, open the **Event Log** tab.
+The duration of a layout shift can also be approximated by looking in the
+**Experience** pane for the length of the red layout shift rectangle.
+
+{% Img
+  src="image/j2RDdG43oidUy6AL6LovThjeX9c2/124Dm7vV3EGM7M9fiugs.png",
+  alt="Screenshot of the DevTools 'Event Log' tab for a layout shift",
+  width="612",
+  height="354"
+ %}
+
+{% Aside %}
+The duration of a layout shift has no impact on its layout shift score.
+{% endAside %}
+
+For more information on using the **Performance** panel, refer to [Performance
+Analysis
+Reference](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/).
+
+
+#### Highlight layout shift regions
+
+Highlighting layout shift regions can be a helpful technique for getting a
+quick, at-a-glance feel for the location and timing of the layout shifts
+occurring on a page.
+
+To enable Layout Shift Regions in DevTools, go to **Settings > More Tools >
+Rendering > Layout Shift Regions** then refresh the page that you wish to debug.
+Areas of layout shift will be briefly highlighted in purple.
+
+
+## Thought process for identifying the cause of layout shifts
+
+You can use the steps below to identify the cause of layout shifts
+regardless of when or how the layout shift occurs. These steps can be
+supplemented with running Lighthouse—however, keep in mind that Lighthouse can
+only identify layout shifts that occurred during the initial page load. In
+addition, Lighthouse also can only provide suggestions for some causes of layout
+shifts—for example, image elements that do not have explicit width and height.
+
+
+### Identifying the cause of a layout shift
+
+Layout shifts can be caused by the following events:
+
+
+
+*   Changes to the position of a DOM element
+*   Changes to the dimensions of a DOM element
+*   Insertion or removal of a DOM element
+*   Animations that trigger layout
+
+In particular, the DOM element immediately preceding the shifted element is the
+element most likely to be involved in "causing" layout shift. Thus, when
+investigating why a layout shift occurred consider:
+
+
+
+*   Did the position or dimensions of the preceding element change?
+*   Was a DOM element inserted or removed before the shifted element?
+*   Was the position of the shifted element explicitly changed?
+
+If the preceding element did not cause the layout shift, continue your search by
+considering other preceding and nearby elements.
+
+In addition, the direction and distance of a layout shift can provide hints
+about root cause. For example, a large downward shift often indicates the
+insertion of a DOM element, whereas a 1&nbsp;px or 2&nbsp;px layout shift often indicates
+the application of conflicting CSS styles or the loading and application of a
+web font.
+
+<figure>
+  {% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png",
+    alt="Diagram showing a layout shift caused by a font swap",
+    width="800",
+    height="452"
+  %}
+  <figcaption>
+    In this example, font swapping caused page elements to shift upwards by five pixels.
+  </figcaption>
+</figure>
+
+
+
+These are some of the specific behaviors that most frequently cause layout shift
+events:
+
+#### Changes to the position of an element (that aren't due to the movement of another element)
+
+This type of change is often a result of:
+*   Stylesheets that are loaded late or overwrite previously declared styles.
+*   Animation and transition effects.
+
+#### Changes to the dimensions of an element
+
+This type of change is often a result of:
+*   Stylesheets that are loaded late or overwrite previously declared styles.
+*   Images and iframes without `width` and `height` attributes that load after
+    their "slot" has been rendered.
+*   Text blocks without `width` or `height` attributes that swap fonts after the
+    text has been rendered.
+
+#### The insertion or removal of DOM elements
+
+This is often the result of:
+*   Insertion of ads and other third-party embeds.
+*   Insertion of banners, alerts, and modals.
+*   Infinite scroll and other UX patterns that load additional content above
+    existing content.
+
+#### Animations that trigger layout
+
+Some animation effects can [trigger
+layout](https://gist.github.com/paulirish/5d52fb081b3570c81e3a). A common
+example of this is when DOM elements are 'animated' by incrementing properties
+like `top` or `left` rather than using CSS's
+[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)
+property. Read [How to create high-performance CSS animations](/animations-guide/)
+for more information.
+
+
+### Reproducing layout shifts
+
+You can't fix layout shifts that you can't reproduce. One of the simplest, yet
+most effective things you can do to get a better sense of your site's layout
+stability is take 5-10 minutes to interact with your site with the goal
+triggering layout shifts. Keep the console open while doing this and use the
+Layout Instability API to report on layout shifts.
+
+For hard to locate layout shifts, consider repeating this exercise with
+different devices and connection speeds. In particular, using a slower
+connection speed can make it easier to identify layout shifts. In addition,
+you can use a `debugger` statement to make it easier to step through layout
+shifts.
+
+```javascript/4
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    if (!entry.hadRecentInput) {
+      cls += entry.value;
+      debugger;
+      console.log('Current CLS value:', cls, entry);
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+Lastly, for layout issues that aren't reproducible in development, consider
+using the Layout Instability API in conjunction with your front-end logging tool
+of choice to collect more information on these issues. Check out
+the example [code for how to track the largest shifted element on a page](https://github.com/GoogleChromeLabs/web-vitals-report/blob/71b0879334798c732f460945ded5267cab5a36bf/src/js/analytics.js#L104-L118).
diff --git a/src/site/content/en/fast/defer-non-critical-css/cdt-perf-optimized.png b/src/site/content/en/fast/defer-non-critical-css/cdt-perf-optimized.png
deleted file mode 100644
index 9d93bc4ceb2..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/cdt-perf-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/defer-non-critical-css/cdt-perf-unoptimized.png b/src/site/content/en/fast/defer-non-critical-css/cdt-perf-unoptimized.png
deleted file mode 100644
index 5d6d011cee6..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/cdt-perf-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/defer-non-critical-css/coverage-unoptimized.png b/src/site/content/en/fast/defer-non-critical-css/coverage-unoptimized.png
deleted file mode 100644
index ede30eb45a0..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/coverage-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/defer-non-critical-css/index.md b/src/site/content/en/fast/defer-non-critical-css/index.md
index e9a425d6f77..7b1d94bb009 100644
--- a/src/site/content/en/fast/defer-non-critical-css/index.md
+++ b/src/site/content/en/fast/defer-non-critical-css/index.md
@@ -7,16 +7,16 @@ description: |
   Learn how to defer non-critical CSS with the goal of optimizing the Critical
   Rendering Path, and improving FCP (First Contentful Paint).
 date: 2019-02-17
-updated: 2020-06-12
+updated: 2023-03-08
 tags:
   - performance
 ---
 
-CSS files are [render-blocking resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources):
+CSS files are [render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/):
 they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles
 take longer to render.
 
-In this guide, you'll learn how to defer non-critical CSS with the goal of optimizing the [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/), and improving [First Contentful Paint (FCP)](/first-contentful-paint).
+In this guide, you'll learn how to defer non-critical CSS with the goal of optimizing the [Critical Rendering Path](/critical-rendering-path/), and improving [First Contentful Paint (FCP)](/fcp/).
 
 ## Loading CSS in a suboptimal way
 
@@ -42,9 +42,8 @@ The report shows the **First Contentful Paint** metric with a value of "1s", and
 the opportunity **Eliminate render-blocking resources**, pointing to the
 **style.css** file:
 
-<figure class="w-figure">
-  <img src="./lighthouse-unoptimized.png"
-       alt="Lighthouse report for unoptimized page, showing FCP of '1s' and 'Eliminate blocking resources' under 'Opportunities'" class="screenshot">
+<figure>
+  {% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="Lighthouse report for unoptimized page, showing FCP of '1s' and 'Eliminate blocking resources' under 'Opportunities'", width="800", height="640" %}
 </figure>
 
 {% Aside %}
@@ -65,8 +64,7 @@ In the resulting trace, you'll see that the **FCP** marker is placed immediately
 after the CSS finishes loading:
 
 <figure>
-  <img src="./cdt-perf-unoptimized.png"
-       alt="DevTools performance trace for unoptimized page, showing FCP starting after CSS loads." class="w-screenshot">
+  {% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="DevTools performance trace for unoptimized page, showing FCP starting after CSS loads.", width="800", height="352" %}
 </figure>
 
 This means that the browser needs to wait for all CSS to load and get processed
@@ -75,17 +73,15 @@ before painting a single pixel on the screen.
 ## Optimize
 
 To optimize this page, you need to know which classes are considered "critical".
-You'll use the the [Coverage Tool](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) for that:
+You'll use the [Coverage Tool](https://developer.chrome.com/docs/devtools/css/reference/#coverage) for that:
 
-1. In DevTools, open the [Command Menu](https://developers.google.com/web/tools/chrome-devtools/command-menu), by pressing `Control+Shift+P` or `Command+Shift+P` (Mac).
+1. In DevTools, open the [Command Menu](https://developer.chrome.com/docs/devtools/command-menu/), by pressing `Control+Shift+P` or `Command+Shift+P` (Mac).
 1. Type "Coverage" and select **Show Coverage**.
 1. Click the **Reload** button, to reload the page and start capturing the
    coverage.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-       src="./coverage-unoptimized.png"
-       alt="Coverage for CSS file, showing 55.9% unused bytes.">
+<figure>
+  {% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="Coverage for CSS file, showing 55.9% unused bytes.", width="800", height="82" %}
 </figure>
 
 
@@ -125,10 +121,15 @@ This is not the standard way of loading CSS. Here's how it works:
 * The reference to the stylesheet inside of a `noscript` element works as a fallback for browsers that don't execute JavaScript.
 
 {% Aside %}
+<p>
 In this guide, you used vanilla code to implement this optimization. In a real
 production scenario, it's a good practice to use functions like
 [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md), that
-can encapsulate this behavior and work well across browsers. 
+can encapsulate this behavior and work well across browsers, and can support a [Content Security Policy](/csp/) that may not allow inline `onload` JavaScript.
+</p>
+<p>
+Alternatively, placing the CSS link at the bottom of the page, allows content above this to be rendered in Firefox and Chrome—though not in Safari—without waiting for the stylesheet. However, it still prioritizes that stylesheet, so it can still block other, more critical, content in all browsers.
+</p>
 {% endAside %}
 
 The [resulting page](https://defer-css-optimized.glitch.me/) looks exactly like the previous version, even when most styles load asynchronously. Here's how the inlined styles and asynchronous request to the CSS file look like in the HTML file:
@@ -148,9 +149,8 @@ page](https://defer-css-optimized.glitch.me/).
 The **FCP** marker appears before the page requests the CSS, which means the
 browser doesn't need to wait for the CSS to load before rendering the page:
 
-<figure class="w-figure">
-  <img src="./cdt-perf-optimized.png"
-       alt="DevTools performance trace for unoptimized page, showing FCP starting before CSS loads." class="w-screenshot">
+<figure>
+  {% Img src="image/admin/0mVq3q760y37JSn2MmCP.png", alt="DevTools performance trace for unoptimized page, showing FCP starting before CSS loads.", width="800", height="389" %}
 </figure>
 
 As a final step, run Lighthouse on the optimized page.
@@ -158,18 +158,15 @@ As a final step, run Lighthouse on the optimized page.
 In the report you'll see that the FCP page has been reduced by **0.2s** (a 20%
 improvement!):
 
-<figure class="w-figure">
-  <img src="./lighthouse-metrics-optimized.png"
-       alt="Lighthouse report, showing an FCP value of '0.8s'."
-       class="w-screenshot">
+<figure>
+  {% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="Lighthouse report, showing an FCP value of '0.8s'.", width="800", height="324" %}
 </figure>
 
 The **Eliminate render-blocking resources** suggestion is no longer under
 **Opportunities**, and now belongs to the **Passed Audits** section:
 
-<figure class="w-figure">
-  <img src="./lighthouse-opportunities-optimized.png"
-       alt="Lighthouse report, showing 'Eliminate blocing resources' on the 'Passed Audits' section." class="w-screenshot">
+<figure>
+  {% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="Lighthouse report, showing 'Eliminate blocing resources' on the 'Passed Audits' section.", width="800", height="237" %}
 </figure>
 
 ## Next steps & references
diff --git a/src/site/content/en/fast/defer-non-critical-css/lighthouse-metrics-optimized.png b/src/site/content/en/fast/defer-non-critical-css/lighthouse-metrics-optimized.png
deleted file mode 100644
index d050faa3073..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/lighthouse-metrics-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/defer-non-critical-css/lighthouse-opportunities-optimized.png b/src/site/content/en/fast/defer-non-critical-css/lighthouse-opportunities-optimized.png
deleted file mode 100644
index 281bb7c06b3..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/lighthouse-opportunities-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/defer-non-critical-css/lighthouse-unoptimized.png b/src/site/content/en/fast/defer-non-critical-css/lighthouse-unoptimized.png
deleted file mode 100644
index 2b0747df3da..00000000000
Binary files a/src/site/content/en/fast/defer-non-critical-css/lighthouse-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/efficiently-load-third-party-javascript/async@2x.png b/src/site/content/en/fast/efficiently-load-third-party-javascript/async@2x.png
deleted file mode 100644
index 2c3d7ffaabf..00000000000
Binary files a/src/site/content/en/fast/efficiently-load-third-party-javascript/async@2x.png and /dev/null differ
diff --git a/src/site/content/en/fast/efficiently-load-third-party-javascript/defer@2x.png b/src/site/content/en/fast/efficiently-load-third-party-javascript/defer@2x.png
deleted file mode 100644
index 3286d6f12e8..00000000000
Binary files a/src/site/content/en/fast/efficiently-load-third-party-javascript/defer@2x.png and /dev/null differ
diff --git a/src/site/content/en/fast/efficiently-load-third-party-javascript/hero.jpg b/src/site/content/en/fast/efficiently-load-third-party-javascript/hero.jpg
deleted file mode 100644
index 9f790d56e6d..00000000000
Binary files a/src/site/content/en/fast/efficiently-load-third-party-javascript/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/en/fast/efficiently-load-third-party-javascript/index.md
index 736389cdebf..d1a72ef66e6 100644
--- a/src/site/content/en/fast/efficiently-load-third-party-javascript/index.md
+++ b/src/site/content/en/fast/efficiently-load-third-party-javascript/index.md
@@ -5,14 +5,15 @@ subhead: Avoid the common pitfalls of using third-party scripts to improve load
 authors:
   - mihajlija
 date: 2019-08-14
+updated: 2022-08-18
 description: |
   Learn how to avoid the common pitfalls of using third-party scripts to improve load times and user experience.
-hero: hero.jpg
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
 alt: Aerial view of shipping containers.
 codelabs: codelab-optimize-third-party-javascript
 tags:
   - performance
-  - third-party
+  # - third-party
   - javascript
 ---
 
@@ -28,7 +29,7 @@ This post explains how to optimize the loading process of third-party scripts wi
 
 2. Establishing early connections to required origins
 
-3. Lazy-loading
+3. Lazy loading
 
 4. Optimizing how you serve third-party scripts
 
@@ -48,15 +49,15 @@ The difference between `async` and `defer` is when they start executing the scri
 
 ### `async`
 
-Scripts with the `async` attribute execute at the first opportunity after they finish downloading and before the window's [load](https://developer.mozilla.org/en-US/docs/Web/Events/load) event. This means it's possible (and likely) that `async` scripts will not be executed in the order in which they appear in the HTML. It also means they can interrupt DOM building if they finish downloading while the parser is still at work.
+Scripts with the `async` attribute execute at the first opportunity after they finish downloading and before the window's [load](https://developer.mozilla.org/docs/Web/Events/load) event. This means it's possible (and likely) that `async` scripts will not be executed in the order in which they appear in the HTML. It also means they can interrupt DOM building if they finish downloading while the parser is still at work.
 
-![Diagram of parser blocking script with async attribute](async@2x.png)
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="Diagram of parser blocking script with async attribute", width="800", height="252" %}
 
 ### `defer`
 
-Scripts with the `defer` attribute execute after HTML parsing is completely finished, but before the [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) event. `defer` guarantees scripts will be executed in the order they appear in the HTML and will not block the parser.
+Scripts with the `defer` attribute execute after HTML parsing is completely finished, but before the [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) event. `defer` guarantees scripts will be executed in the order they appear in the HTML and will not block the parser.
 
-![Diagram of parser flow with a script with defer attribute](defer@2x.png)
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="Diagram of parser flow with a script with defer attribute", width="800", height="253" %}
 
 * Use `async` if it's important to have the script run earlier in the loading process.
 
@@ -73,7 +74,7 @@ Analytics scripts are usually loaded early so you don't miss any valuable analyt
 
 You can save 100–500 ms by [establishing early connections](/preconnect-and-dns-prefetch/) to important third-party origins.
 
-Two [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) types can help here:
+Two [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) types can help here:
 
 * `preconnect`
 
@@ -107,27 +108,28 @@ The `preconnect` hint is best used for only the most critical connections; for l
 <link rel="preconnect" href="http://example.com">
 <link rel="dns-prefetch" href="http://example.com">
 ```
+
 ## Lazy-load third-party resources
 
-Embedded third-party resources can be a big contributor to slow page speed when constructed poorly. If they aren't critical or are below the fold (that is, if users have to scroll to view them), lazy-loading is a good way to improve page speed and paint metrics. This way, users will get the main page content faster and have a better experience.
+Embedded third-party resources can be a big contributor to slow page speed when constructed poorly. If they aren't critical or are below the fold (that is, if users have to scroll to view them), lazy loading is a good way to improve page speed and paint metrics. This way, users will get the main page content faster and have a better experience.
 
-<figure class='w-figure w-figure--inline-left'>
-<img src="lazy-load.png" alt="A diagram of a webpage shown on a mobile device with scrollable content extending beyond the screen. The content that's below-the-fold is desaturated because it's not loaded yet.">
+<figure data-float="left">
+{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="A diagram of a webpage shown on a mobile device with scrollable content extending beyond the screen. The content that's below-the-fold is desaturated because it's not loaded yet.", width="366", height="438" %}
 </figure>
 
 One effective approach is to lazy-load third-party content after the main page content loads. Ads are a good candidate for this approach.
 
-Ads are an important source of income for many sites, but users come for the content. By lazy-loading ads and delivering the main content faster, you can increase the overall viewability percentage of an ad. For example, MediaVine switched to [lazy-loading ads](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/) and saw a 200% improvement in page load speed. DoubleClick have guidance on how to lazy-load ads in their [official documentation](https://support.google.com/dfp_premium/answer/4578089#lazyloading).
+Ads are an important source of income for many sites, but users come for the content. By lazy loading ads and delivering the main content faster, you can increase the overall viewability percentage of an ad. For example, MediaVine switched to [lazy-loading ads](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/) and saw a 200% improvement in page load speed. DoubleClick have guidance on how to lazy-load ads in their [official documentation](https://support.google.com/dfp_premium/answer/4578089#lazyloading).
 
 An alternative approach is to load third-party content only when users scroll down to that section of the page.
 
-[Intersection Observer](https://developers.google.com/web/updates/2016/04/intersectionobserver) is a browser API that efficiently detects when an element enters or exits the browser's viewport and it can be used to implement this technique. [lazysizes](/use-lazysizes-to-lazyload-images/) is a popular JavaScript library for lazy-loading images and [`iframes`](http://afarkas.github.io/lazysizes/#examples). It supports YouTube embeds and [widgets](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks). It also has [optional support](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js) for IntersectionObserver.
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/) is a browser API that efficiently detects when an element enters or exits the browser's viewport and it can be used to implement this technique. [lazysizes](/use-lazysizes-to-lazyload-images/) is a popular JavaScript library for lazy loading images and [`iframes`](http://afarkas.github.io/lazysizes/#examples). It supports YouTube embeds and [widgets](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks). It also has [optional support](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js) for IntersectionObserver.
 
 {% Aside 'caution' %}
-Be careful when lazy-loading resources with JavaScript. If JavaScript fails to load, perhaps due to flaky network conditions, your resources won't load at all.
+Be careful when lazy loading resources with JavaScript. If JavaScript fails to load, perhaps due to flaky network conditions, your resources won't load at all.
 {% endAside %}
 
-Using the [`loading` attribute for lazy-loading images and iframes](/native-lazy-loading) is a great alternative to JavaScript techniques, and it has recently become available in Chrome 76!
+Using the [`loading` attribute for lazy loading images and iframes](/browser-level-image-lazy-loading/) is a great alternative to JavaScript techniques, and it has recently become available in Chrome 76!
 
 ## Optimize how you serve third-party scripts
 
@@ -145,8 +147,8 @@ When you use files from third-party servers, you rarely have control over cachin
 Self-hosting third-party scripts is an option that gives you more control over a script's loading process. By self-hosting you can:
 
 * Reduce DNS lookup and round-trip times.
-* Improve [HTTP caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) headers.
-* Take advantage of [HTTP/2 server push](https://developers.google.com/web/fundamentals/performance/http2/).
+* Improve [HTTP caching](/http-cache/) headers.
+* Take advantage of [HTTP/2](/performance-http2/), or the newer HTTP/3.
 
 For example, Casper managed to [shave 1.7 seconds](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) off load time by self-hosting an A/B testing script.
 
@@ -159,4 +161,4 @@ Manually updating scripts can add a lot of overhead to your development process
 
 ### Use service workers to cache scripts from third-party servers
 
-An alternative to self-hosting that allows you greater control over caching while still getting the third-party CDN benefits is [using service workers to cache scripts from third-party servers](https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests). This gives you control over how often scripts are re-fetched from the network and makes it possible to create a loading strategy that throttles requests for non-essential third-party resources until the page reaches a key user moment. Using `preconnect` to establish early connections in this case can also mitigate the network costs to an extent.
+An alternative to self-hosting that allows you greater control over caching while still getting the third-party CDN benefits is [using service workers to cache scripts from third-party servers](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations). This gives you control over how often scripts are re-fetched from the network and makes it possible to create a loading strategy that throttles requests for non-essential third-party resources until the page reaches a key user moment. Using `preconnect` to establish early connections in this case can also mitigate the network costs to an extent.
diff --git a/src/site/content/en/fast/efficiently-load-third-party-javascript/lazy-load.png b/src/site/content/en/fast/efficiently-load-third-party-javascript/lazy-load.png
deleted file mode 100644
index b45f2b04fa5..00000000000
Binary files a/src/site/content/en/fast/efficiently-load-third-party-javascript/lazy-load.png and /dev/null differ
diff --git a/src/site/content/en/fast/extract-critical-css/above-the-fold.png b/src/site/content/en/fast/extract-critical-css/above-the-fold.png
deleted file mode 100644
index 618c498ec9b..00000000000
Binary files a/src/site/content/en/fast/extract-critical-css/above-the-fold.png and /dev/null differ
diff --git a/src/site/content/en/fast/extract-critical-css/filmstrip-comparison.png b/src/site/content/en/fast/extract-critical-css/filmstrip-comparison.png
deleted file mode 100644
index 648f234894b..00000000000
Binary files a/src/site/content/en/fast/extract-critical-css/filmstrip-comparison.png and /dev/null differ
diff --git a/src/site/content/en/fast/extract-critical-css/hero.jpg b/src/site/content/en/fast/extract-critical-css/hero.jpg
deleted file mode 100644
index 80d8b416405..00000000000
Binary files a/src/site/content/en/fast/extract-critical-css/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/extract-critical-css/index.md b/src/site/content/en/fast/extract-critical-css/index.md
index 61dd047bc62..300b6d9041f 100755
--- a/src/site/content/en/fast/extract-critical-css/index.md
+++ b/src/site/content/en/fast/extract-critical-css/index.md
@@ -5,7 +5,7 @@ subhead: Learn how to improve render times with critical CSS technique.
 authors:
   - mihajlija
 date: 2019-05-29
-hero: hero.jpg
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
 alt: A flatlay photo of wrenches and screwdrivers.
 description: |
   Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
@@ -22,8 +22,8 @@ The browser must download and parse CSS files before it can show the page, which
 Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.
 {% endAside %}
 
-<figure class="w-figure">
-  <img class="" src="./above-the-fold.png" alt="An illustration of a laptop and a mobile device with web pages overflowing the edges of screens" style="max-width: 600px; width: 100%;">
+<figure>
+  {% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="An illustration of a laptop and a mobile device with web pages overflowing the edges of screens", width="800", height="469", class="" %}
 </figure>
 
 {% Aside 'note' %}
@@ -32,25 +32,25 @@ Above-the-fold is all the content a viewer sees on page load, before scrolling.
 
 Inlining extracted styles in the `<head>` of the HTML document eliminates the need to make an additional request to fetch these styles. The remainder of the CSS can be loaded asynchronously.
 
-<figure class="w-figure">
-    <img class="w-screenshot" src="./inline-critical-css.png" alt="HTML file with critical CSS inlined in the head">
-    <figcaption class="w-figcaption">
+<figure>
+    {% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="HTML file with critical CSS inlined in the head", width="800", height="325" %}
+    <figcaption>
     Inlined critical CSS
     </figcaption>
 </figure>
 
-Improving render times can make a huge difference in [perceived performance](https://developers.google.com/web/fundamentals/performance/rail#ux), especially under poor network conditions. On mobile networks, high latency is an issue regardless of bandwidth.
+Improving render times can make a huge difference in [perceived performance](/user-centric-performance-metrics/), especially under poor network conditions. On mobile networks, high latency is an issue regardless of bandwidth.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./filmstrip-comparison.png" alt="Filmstrip view comparison of loading a page with render-blocking CSS (top) and the same page with inlined critical CSS (bottom) on a 3G connection. Top filmstrip shows six blank frames before finally displaying content. Bottom filmstrip displays meaningful content in the first frame.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="Filmstrip view comparison of loading a page with render-blocking CSS (top) and the same page with inlined critical CSS (bottom) on a 3G connection. Top filmstrip shows six blank frames before finally displaying content. Bottom filmstrip displays meaningful content in the first frame.", width="800", height="363" %}
+  <figcaption>
     Comparison of loading a page with render-blocking CSS (top) and the same page with inlined critical CSS (bottom) on a 3G connection
   </figcaption>
 </figure>
 
-If you have poor [First Contentful Paint (FCP)](/first-contentful-paint) and see "Eliminate render-blocking resource" opportunity in Lighthouse audits it's a good idea to give critical CSS a go.
+If you have poor [First Contentful Paint (FCP)](/fcp/) and see "Eliminate render-blocking resource" opportunity in Lighthouse audits it's a good idea to give critical CSS a go.
 
-<img class="w-screenshot" src="./lighthouse-audit.png" alt="Lighthouse audit with 'Eliminate render-blocking resource' or 'Defer unused CSS' opportunities">
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="Lighthouse audit with 'Eliminate render-blocking resource' or 'Defer unused CSS' opportunities", width="743", height="449" %}
 
 {% Aside 'gotchas' %}
 Keep in mind that if you inline a large amount of CSS, it delays the transmission of the rest of the HTML document. If everything is prioritized then nothing is. Inlining also has some downsides in that it prevents the browser from caching the CSS for reuse on subsequent page loads, so it's best to use it sparingly.
diff --git a/src/site/content/en/fast/extract-critical-css/inline-critical-css.png b/src/site/content/en/fast/extract-critical-css/inline-critical-css.png
deleted file mode 100644
index d8f247210c7..00000000000
Binary files a/src/site/content/en/fast/extract-critical-css/inline-critical-css.png and /dev/null differ
diff --git a/src/site/content/en/fast/extract-critical-css/lighthouse-audit.png b/src/site/content/en/fast/extract-critical-css/lighthouse-audit.png
deleted file mode 100644
index 39e84d3a8cb..00000000000
Binary files a/src/site/content/en/fast/extract-critical-css/lighthouse-audit.png and /dev/null differ
diff --git a/src/site/content/en/fast/fetch-priority/index.md b/src/site/content/en/fast/fetch-priority/index.md
new file mode 100644
index 00000000000..cc16aac3149
--- /dev/null
+++ b/src/site/content/en/fast/fetch-priority/index.md
@@ -0,0 +1,568 @@
+---
+layout: post
+title: Optimizing resource loading with the Fetch Priority API
+authors:
+  - leenasohoni
+  - addyosmani
+  - patmeenan
+  - tunetheweb
+description: The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
+subhead: The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
+date: 2021-10-20
+updated: 2023-04-18
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WqBkrvs5LRwPIfrSOQyz.jpg
+alt: A photo of a brown wooden plank fence, with a signboard attached to it. The signboard reads 'this way', with an arrow pointing to the right.
+tags:
+  - performance
+  - network
+  - blog
+---
+
+{% BrowserCompat 'api.HTMLImageElement.fetchPriority' %}
+
+{% Aside %}
+This feature was originally called Priority Hints but was renamed to Fetch Priority after standardization. See [History](#history) below for more details.
+{% endAside %}
+
+When a browser parses a web page and begins to discover and download resources such as images, scripts, or CSS, it assigns them a fetch `priority` in an attempt to download resources in an optimal order. These priorities can depend on the kind of resource and where it is in the document. For example, in-viewport images may have a `High` priority while the priority for early loaded, render-blocking CSS via `<link>`s in the `<head>` could be `Very High`. Browsers are pretty good at assigning priorities that work well but may not be optimal in all cases.
+
+In this article, we'll discuss the Fetch Priority API and the `fetchpriority` HTML attribute, which allow you to hint at the relative priority of a resource (`high` or `low`). Fetch Priority can help optimize the Core Web Vitals.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UQ60oFwWrVCPbFYx3pJY.png", alt="A filmstrip view comparing two tests of the Google Flights homepage. At bottom, Fetch Priority are used to boost the priority of the hero image, resulting in a 0.7 second decrease in LCP.
+", width="800", height="400" %}
+  <figcaption>Fetch Priority improving Largest Contentful Paint from 2.6&nbsp;s to 1.9&nbsp;s in a test of Google Flights</figcaption>
+</figure>
+
+## Summary
+
+**A few key areas where Fetch Priority can help:**
+
+- Boost the priority of the LCP image by specifying `fetchpriority="high"` on the image element, causing LCP to happen sooner.
+- Increase the priority of `async` scripts using better semantics than the current hack that is commonly used (inserting a <code>&lt;link rel="preload"&gt;</code> for the `async` script).
+- Decrease the priority of late-body scripts to allow for better sequencing with images.
+
+Historically, developers have had some, but limited, influence over resource priority using [preload](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) and [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/). Fetch Priority complements these [Resource Hints](https://www.w3.org/TR/resource-hints/), but it's essential to understand where they all fit in. Preload lets you tell the browser about critical resources you want to load early before they are discovered naturally. This is especially useful for resources that are not easily discovered, such as fonts included in stylesheets, background images, or resources loaded from a script. Preconnect helps warm up connections to cross-origin servers and can help improve metrics like [Time-to-first-byte](/ttfb/) and is useful when you know an origin but not necessarily the exact URL of a resource that will be needed.
+
+Fetch Priority is a markup-based signal (available through the `fetchpriority` attribute) that developers can use to indicate the relative priority of a particular resource. You can also use these hints via JavaScript and the [Fetch API](/introduction-to-fetch/) with the `priority` property to influence the priority of resource fetches made for data. Fetch Priority can also complement preload. Take a Largest Contentful Paint image, which, when preloaded, will still get a low priority. If it is pushed back by other early low-priority resources, using Fetch Priority can help how soon the image gets loaded.
+
+Fetch Priority is [available](https://www.chromestatus.com/feature/5273474901737472) in Chrome 101 or later.
+
+## Resource priority
+
+The resource download sequence depends on the browser's assigned priority for every resource on the page. Different factors can affect priority computation logic. For example,
+
+- CSS, fonts, scripts, images, and third-party resources are assigned different priorities.
+- The location or order in which you reference resources in the document also affects the priority of resources.
+- The [`preload`](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) resource hint helps the browser to discover a resource faster and thus load it before the document loads it and affects priority.
+- Priority computation changes for [`async` or `defer`](/efficiently-load-third-party-javascript/#use-async-or-defer) scripts.
+
+The following table considers such factors to show how most resources are currently prioritized and sequenced in Chrome.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th>Layout-blocking</th>
+        <th>Load in layout-blocking phase</th>
+        <th colspan="3">Load one-at-a-time in layout-blocking phase</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>Blink<br>Priority</strong></td>
+        <td><strong>VeryHigh</strong></td>
+        <td><strong>High</strong></td>
+        <td><strong>Medium</strong></td>
+        <td><strong>Low</strong></td>
+        <td><strong>VeryLow</strong></td>
+      </tr>
+      <tr>
+        <td><strong>DevTools<br>Priority</strong></td>
+        <td><strong>Highest</strong></td>
+        <td><strong>High</strong></td>
+        <td><strong>Medium</strong></td>
+        <td><strong>Low</strong></td>
+        <td><strong>Lowest</strong></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>Main resource</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>CSS*** (early**)</td>
+        <td></td>
+        <td>CSS*** (late**)</td>
+        <td></td>
+        <td>CSS (mismatch)</td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td>Script (early** or not from preload scanner)</td>
+        <td>Script (**late)</td>
+        <td>Script (async)</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>Font</td>
+        <td>Font (preload)</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td>Import</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td>Image (in viewport)</td>
+        <td></td>
+        <td>Image</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td>Media</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td>SVG document</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td>Prefetch</td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td>Preload*</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <td>XSL</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>XHR (sync)</td>
+        <td>XHR/fetch* (async)</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}
+\* Preload using `"as"` or fetch using `"type"` use the priority of the type they are requesting (e.g., preload `as="stylesheet"` will use Highest priority). With no `"as"`, they will behave like an XHR.<br>
+\*\* "Early" is defined as being requested before any non-preloaded images have been requested ("late" is after).<br>
+\*\*\* CSS where the media type doesn't match is not fetched by the preload scanner and is only processed when the main parser reaches it, which usually means it will be fetched very late and with a "late" priority.
+{% endAside %}
+
+The browser downloads resources with the same computed priority in the order they are discovered. You can check the priority assigned to different resources when loading a page under the Chrome Dev Tools **Network** tab. (Ensure that you include the priority column by right-clicking on the table headings).
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Lwm9jwJF5sQ3gQ7PHSs1.png", alt="A screenshot of assets listed in the network tab of Chrome's DevTools. The columns read, from left to right: name, status, type, initiator, size, time, and priority.", width="800", height="263" %}
+  <figcaption>Priority for resource <code>type = &quot;font&quot;</code> on BBC news detail page</figcaption>
+</figure>
+
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/K5U3maOt2TFBbtScW7TY.png", alt="A screenshot of assets listed in the network tab of Chrome's DevTools. The columns read, from left to right: name, status, type, initiator, size, time, and priority.", width="800", height="175" %}
+  <figcaption>Priority for resource type = &quot;script&quot; on BBC news detail page</figcaption>
+</figure>
+
+## When would you need Fetch Priority?
+
+Knowledge of the browser's prioritization logic provides you with a few existing knobs to tweak the order of downloads. You can
+
+1.  Place resource tags such as `<script>` and `<link>` depending on the order you want to download them. Resources with the same priority are generally loaded in the order they are discovered.
+2.  [Use the `preload` resource hint](/preload-critical-assets/) to download necessary resources earlier, particularly for resources that are not easily discovered early by the browser.
+3.  Use [`async` or `defer`](/efficiently-load-third-party-javascript/#use-async-or-defer) to download scripts without blocking other resources.
+4.  Lazy-load below-the-fold content so that the browser can use the available bandwidth for more critical above-the-fold resources.
+
+These techniques help to control the browser's priority computation, thereby improving performance and [Core Web Vitals](/vitals/). For example, when a critical background image is preloaded, it can be discovered much earlier, improving the Largest Contentful Paint ([LCP](/lcp/)).
+
+Sometimes these handles may not be enough to prioritize resources optimally for your application. Here are some of the scenarios where Fetch Priority could be helpful:
+
+1. You have several above-the-fold images, but all of them need not have the same priority. For example, in an image carousel, only the first visible image needs a higher priority compared to the others.
+2. Hero images inside the viewport start at a "Low" priority. After the layout is complete, Chrome discovers they are in the viewport and boosts their priority (unfortunately, dev tools only shows the final priority—WebPageTest will show both). This usually adds a significant delay to loading the image. Providing the Fetch Priority in markup lets the image start at a "High" priority and start loading much earlier.<br><br>Note that preload is still required for the early discovery of LCP images included as CSS backgrounds and can be combined with Fetch Priority by including the `fetchpriority='high'` on the preload, otherwise it will still start with the default "Low" priority for images.
+3. Declaring scripts as `async` or `defer` tells the browser to load them asynchronously. However, as seen in the figure above, these scripts are also assigned a "low" priority. You may want to bump up their priority while ensuring asynchronous download, particularly for any scripts that are critical for the user experience.
+4. You may use the JavaScript [`fetch()`](/introduction-to-fetch/) API to fetch resources or data asynchronously. Fetch is assigned a "High" priority by the browser. There may be situations where you do not want all your fetches to be executed with "High" priority and prefer using different Fetch Priority instead. This can be helpful when running background API calls and mixing them with API calls that are responding to user input, like with autocomplete. The background API calls can be tagged as "Low" priority and the interactive API calls marked as "High" priority.
+5. The browser assigns CSS and fonts a "High" priority, but all such resources may not be equally important or required for LCP. You can use Fetch Priority to lower the priority of some of these resources.
+
+## The `fetchpriority` attribute
+
+You can provide a Fetch Priority using the `fetchpriority` HTML attribute. You can use the attribute with `link`, `img`, and `script` tags. The attribute allows you to specify the priority for resource types such as CSS, fonts, scripts, and images when downloaded using the supported tags.
+The `fetchpriority` attribute accepts one of three values:
+
+- `high`: You consider the resource a high priority and want the browser to prioritize it as long as the browser's heuristics don't prevent that from happening.
+- `low`: You consider the resource a low priority and want the browser to deprioritize it if it's heuristics permit.
+- `auto`: This is the default value where you don't have a preference and let the browser decide the appropriate priority.
+
+Here are a few examples of using the `fetchpriority` attribute in markup and the script-equivalent `priority` property.
+
+```html
+<!-- We don't want a high priority for this above-the-fold image -->
+<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
+
+<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
+<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
+
+<script>
+  fetch('https://example.com/', {priority: 'low'})
+  .then(data => {
+    // Trigger a low priority fetch
+  });
+</script>
+```
+
+### Browser priority and `fetchpriority`
+
+You can apply the `fetchpriority` attribute to different resources as shown in the following figure to potentially increase or reduce their computed priority. `fetchpriority="auto"` (◉) in each row denotes the default priority for that type of resource.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th>Layout-blocking</th>
+        <th>Load in layout-blocking phase</th>
+        <th colspan="3">Load one-at-a-time in layout-blocking phase</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>Blink<br>Priority</strong></td>
+        <td><strong>VeryHigh</strong></td>
+        <td><strong>High</strong></td>
+        <td><strong>Medium</strong></td>
+        <td><strong>Low</strong></td>
+        <td><strong>VeryLow</strong></td>
+      </tr>
+      <tr>
+        <td><strong>DevTools<br>Priority</strong></td>
+        <td><strong>Highest</strong></td>
+        <td><strong>High</strong></td>
+        <td><strong>Medium</strong></td>
+        <td><strong>Low</strong></td>
+        <td><strong>Lowest</strong></td>
+      </tr>
+      <tr>
+        <td>Main Resource</td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>CSS*** (early**)</td>
+        <td>⬆◉</td>
+        <td>⬇</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>CSS*** (late**)</td>
+        <td></td>
+        <td>⬆</td>
+        <td>◉</td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Script (early** or not from preload scanner)</td>
+        <td></td>
+        <td>⬆◉</td>
+        <td></td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Script*** (late**)</td>
+        <td></td>
+        <td>⬆</td>
+        <td>◉</td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Script (async/defer)</td>
+        <td></td>
+        <td>⬆</td>
+        <td></td>
+        <td>◉⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Font</td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Font (preload)</td>
+        <td></td>
+        <td>⬆◉</td>
+        <td></td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Import</td>
+        <td></td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Image (in viewport)</td>
+        <td></td>
+        <td>⬆◉</td>
+        <td></td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Image</td>
+        <td></td>
+        <td>⬆</td>
+        <td></td>
+        <td>◉⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Media (video/audio)</td>
+        <td></td>
+        <td>⬆</td>
+        <td></td>
+        <td>◉⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>SVG document</td>
+        <td></td>
+        <td>⬆</td>
+        <td></td>
+        <td>◉⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>XHR (sync) - deprecated</td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>XHR/fetch* (async)</td>
+        <td></td>
+        <td>⬆◉</td>
+        <td></td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Preload*</td>
+        <td></td>
+        <td>⬆◉</td>
+        <td></td>
+        <td>⬇</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Prefetch</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td>◉</td>
+      </tr>
+      <tr>
+        <td>Favicon</td>
+        <td></td>
+        <td></td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>XSL</td>
+        <td></td>
+        <td>◉</td>
+        <td></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}
+\* Preload using `"as"` or fetch using `"type"` use the priority of the type they are requesting (e.g., preload `as="stylesheet"` will use Highest priority). With no `"as"`, they will behave like an XHR.<br>
+\*\* "Early" is defined as being requested before any non-preloaded images have been requested ("late" is after).<br>
+\*\*\* CSS where the media type doesn't match is not fetched by the preload scanner and is only processed when the main parser reaches it, which usually means it will be fetched very late and with a "late" priority.<br>
+◉: `fetchpriority="auto"`<br>
+⬆: `fetchpriority="high"`<br>
+⬇: `fetchpriority="low"`<br>
+Images within the viewport start at "Low" priority and then at layout time are boosted to "High". By tagging it in markup using `fetchpriority="high"`, it can start at "High" immediately and load much faster.
+{% endAside %}
+
+Note that `fetchpriority` sets the _relative priority_—that is it raises or lowers the default priority by an appropriate amount, rather than explicitly setting the priority to "High" or "Low" and the browser decides the relative priority. Often this is "High" or "Low", but not always. For example, critical CSS with `fetchpriority="high"` will still retain the "VeryHigh"/"Highest" priority, and using `fetchpriority="low"` on these will still retain the "High" priority—in neither case is the Priority explicitly set to "High" or "Low".
+
+### Use cases
+
+You can use the `fetchpriority` attribute to address scenarios where you may wish to provide the browser with an extra hint as to what priority to fetch a resource with.
+
+#### Increase the priority of the LCP image
+
+You can specify `fetchpriority="high"` to boost the priority of the LCP or other critical images.
+
+```html
+<img src="lcp-image.jpg" fetchpriority="high">
+```
+
+The following comparison shows the Google Flights page with an LCP background image loaded with and without Fetch Priority. With the priority set to high, the [LCP improved from 2.6s to 1.9s](https://www.webpagetest.org/video/compare.php?tests=211006_AiDcG3_40871b05d6040112a05be4524565cf5d%2C211006_BiDcHR_bebed947f1b6607f2d97e8a899fdc36b&thumbSize=200&ival=100&end=visual).
+
+<figure>
+  {% Video src="video/1L2RBhCLSnXjCnSlevaDjy3vba73/BCngJfoVOy0YbUz8wFrM.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+  <figcaption>An experiment conducted using Cloudflare workers to rewrite the Google Flights page to use Fetch Priority.</figcaption>
+</figure>
+
+#### Lower the priority of above-the-fold images
+
+You can use `fetchpriority="low"` to lower the priority of above-the-fold images that may not be important for example in an image carousel.
+
+```html
+<ul class="carousel">
+  <img src="img/carousel-1.jpg" fetchpriority="high">
+  <img src="img/carousel-2.jpg" fetchpriority="low">
+  <img src="img/carousel-3.jpg" fetchpriority="low">
+  <img src="img/carousel-4.jpg" fetchpriority="low">
+</ul>
+```
+
+In an earlier experiment with the [Oodle](https://github.com/google/oodle-demo) app, we used this to lower the priority of images that do not appear on load. It helped to cut down the load time by 2 seconds.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Tn4OkGpqPbrSQtd1j3GV.png", alt="A side-by-side comparison of Fetch Priority when used on the Oodle app's image carousel. On the left, the browser sets default priorities for carousel images, but downloads and paints those images around two seconds slower than the example on the right, which sets a higher priority on only the first carousel image.", width="800", height="460" %}
+</figure>
+
+#### Lower the priority of preloaded resources
+
+To stop preloaded resources from competing with other critical resources, you could provide a hint to reduce their priority. You can use this technique with images, scripts, and CSS.
+
+```html
+<!-- Lower priority only for non-critical preloaded scripts -->
+<link rel="preload" as="script" href="critical-script.js">
+<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
+
+<!-- Preload CSS without blocking other resources -->
+<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
+```
+
+#### Reprioritize scripts
+
+Scripts required to make some parts of the page interactive are essential but should not block other resources. You can mark these as async with high priority.
+
+```html
+<script src="async_but_important.js" async fetchpriority="high"></script>
+```
+
+Scripts cannot be marked as async if they rely on specific DOM states. However if they are lower down on the page, they may be downloaded with a lower priority as shown.
+
+```html
+<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
+```
+
+#### Lower the priority for non-critical data fetches
+
+The browser executes `fetch` with a high priority. If you have multiple fetches that may be fired simultaneously, you can use the high default priority for the more critical data fetches and lower it for less critical data.
+
+```javascript
+// Important validation data (high by default)
+let authenticate = await fetch('/user');
+
+// Less important content data (suggested low)
+let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
+```
+
+## Fetch Priority implementation notes
+
+Fetch Priority can improve performance in specific use cases, as discussed above. There are some things to be aware of:
+
+- The `fetchpriority` attribute is a hint and not a directive. The browser will try to respect the developer's preference. It is also possible that the browser will apply its preferences for resource priority as deemed necessary in case of conflicts.
+- Fetch Priority should not be confused with a preload. They are both distinct because:
+    - Preload is a mandatory fetch and not a hint.
+    - Preload allows the browser to discover the resource early, but it will still fetch it with the default priority. Conversely, Fetch Priority does not aid discoverability, but does allow you to increase or decrease the fetch priority.
+    - It is easier to observe and measure the effects of a preload.
+
+  Fetch Priority can complement preloads by increasing the granularity of prioritization. If you had already specified a preload as one of the first items in the `<head>` for an LCP image, then a `high` Fetch Priority may not result in significant gains. However, if the preload was after other resources, then a `high` Fetch Priority can improve the LCP. If a critical image is a CSS background image, you should preload it with `fetchpriority = "high"`.
+- The noticeable gains due to prioritization will be more relevant in environments where more resources contend for the available network bandwidth. This is common for HTTP/1.x connections where parallel downloads are not possible or in low bandwidth HTTP/2 connections. Prioritization can resolve bottlenecks in these conditions.
+- CDNs do [not uniformly implement HTTP/2 prioritization](https://github.com/andydavies/http2-prioritization-issues#cdns--cloud-hosting-services). Even if the browser communicates the priority suggested using Fetch Priority; the CDN may not reprioritize resources in the required order. This makes testing of Fetch Priority difficult. The priorities are applied both internally within the browser and with protocols that support prioritization (HTTP/2 and HTTP/3). It is still worth using even for just the internal browser prioritization independent of CDN or origin support, as that will often change when resources are requested by the browser—for example low priority resources like images are often held back from being requested while the browser processes the critical `<head>` items.
+- It may not be possible to introduce Fetch Priority as a best practice in your initial design. It is an optimization that you can apply later in the development cycle. You can check the priorities being assigned to different resources on the page, and if they do not match your expectations, you could introduce Fetch Priority for further optimization.
+
+### Using Preload after Chrome 95
+
+The Fetch Priority feature was available for trial in Chrome 73 to 76 but was not released due to prioritization issues with preloads fixed in Chrome 95. Prior to Chrome 95, requests issued via `<link rel=preload>` always start before other requests seen by the preload scanner, even if the other requests have a higher priority.
+
+With the fix in Chrome 95 and the enhancement for Fetch Priority, we hope that developers will start using preload for its [intended purpose](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#loading-of-late-discovered-resources)—to preload resources not detected by the parser (fonts, imports, background LCP images). The placement of the `preload` hint will affect when the resource is preloaded. Some key points on using preload are:
+
+- Including the preload in HTTP headers will cause it to jump ahead of everything else.
+- Generally, preloads will load in the order the parser gets to them for anything above &quot;Medium&quot; priority—so be careful if you are including preloads at the beginning of the HTML.
+- Font preloads will probably work best towards the end of the head or beginning of the body.
+- Import preloads (dynamic `import()` or `modulepreload`) should be done after the script tag that needs the import (so the actual script gets loaded/parsed first). Basically, if the script tag loads a script that will trigger the load of dependencies, make sure the `<link rel=preload>` for the dependencies is after the parent script tag, otherwise the dependencies may end up loading before the main script. In the proper order, the main script can be parsed/eval'd while the dependencies are loading.
+- Image preloads will have a "Low" priority (without Fetch Priority) and should be ordered relative to async scripts and other low or lowest priority tags.
+
+## History
+
+Fetch Priority was first experimented with in Chrome as an origin trial in 2018 and then again in 2021 using the `importance` attribute. At that time it was known as [Priority Hints](https://github.com/WICG/priority-hints). The interface has since changed to `fetchpriority` for HTML and `priority` for JavaScript's Fetch API as part of the web standards process. To reduce confusion we now refer to this API as Fetch Priority.
+
+## Browser compatibility
+
+{% BrowserCompat 'api.HTMLImageElement.fetchPriority' %}
+
+As of this writing, Fetch Priority is only available in Chromium-based browsers. Other browser engines or earlier versions of Chromium browsers will ignore the attribute and use their default prioritization heuristics. Until another browser implements Fetch Priority, you may notice some references—[such as MDN](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority)—mark this as [_Experimental_](https://developer.mozilla.org/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental), however Fetch Priority is now standardized and included in the [HTML living standard](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#fetch-priority-attributes) and [Fetch living standard](https://fetch.spec.whatwg.org/#request-priority).
+
+## Conclusion
+
+Developers are likely to be interested in Fetch Priority with the fixes in preload behavior and the recent focus on Core Web Vitals and LCP. They now have additional knobs available to achieve their desired loading sequence.
diff --git a/src/site/content/en/fast/fixing-website-speed-cross-functionally/index.md b/src/site/content/en/fast/fixing-website-speed-cross-functionally/index.md
index 982e9f9e7e5..4e28595aa56 100644
--- a/src/site/content/en/fast/fixing-website-speed-cross-functionally/index.md
+++ b/src/site/content/en/fast/fixing-website-speed-cross-functionally/index.md
@@ -18,36 +18,36 @@ to prioritize site speed, get help from different departments while optimizing,
 of your optimization project's success.
 
 {% Aside %}
-This guide has a slight focus on e-commerce (particularly the business stakeholders section), but a 
+This guide has a slight focus on e-commerce (particularly the business stakeholders section), but a
 lot of the guidance is general enough to be useful to any website that wants to improve mobile conversions.
 {% endAside %}
 
 ## Fix speed with the help of your business stakeholders {: #stakeholders }
-  
+
 Many companies are in the middle of a disruptive shift in consumer behavior, where the growth of
 people buying on digital platforms instead of physical stores tells the tale that companies need to
 adjust quickly or risk facing decreasing revenue. This will require both new organizational
-processes and mindsets, and a strong buy-in from the stakeholders in order to succeed.   
-   
-### The shared challenge  
-   
+processes and mindsets, and a strong buy-in from the stakeholders in order to succeed.
+
+### The shared challenge
+
 The way companies organize themselves will most likely need to change within several levels. First
 of all, a speed project, with the potential uplift in revenue that it can create, will be difficult
 to perform without developers getting time to work on it. The resource allocation needs to be in
 place, and the collaboration with other departments such as marketing and web designers will often
-go smoother if stakeholders and executives show that it's a priority project.   
-   
+go smoother if stakeholders and executives show that it's a priority project.
+
 Apart from this operational level, it's also important for stakeholders to understand that there are
-two shifts happening right now: 
+two shifts happening right now:
 
 -  Even though a larger proportion of your sales
-   might come from the physical stores, [most customers will use a digital platform such as your 
+   might come from the physical stores, [most customers will use a digital platform such as your
    site before the purchase in the stores](https://www.thinkwithgoogle.com/marketing-resources/micro-moments/meet-needs-i-want-to-know-moments/).
    If the site doesn't give visitors a good user experience, then the revenue in physical stores
    risk suffering as well. Plus, studies show that it also affects
    [customers' willingness to recommend your business and their loyalty to your
    business](https://www.thinkwithgoogle.com/intl/en-154/marketing-collections/mobile/why-mobile-speed-means-loyal-customers-and-how-make-it-happen/).
-   
+
 -  The growth of mobile visitors is stronger than desktop visitors, making mobile-first either a
    current or future state to prepare for. Also, there's a strong correlation
    between site speed and conversions on mobile, with
@@ -57,19 +57,19 @@ two shifts happening right now:
 This means that companies that make executive decisions informed by the people who are experts on
 digital platforms will have an edge. One suggestion could thereby be to invite one developer
 to the meetings where business decisions are being made, to ensure that the site and its
-constraints are being considered from the start, and that way, secure increased sales.  
-   
+constraints are being considered from the start, and that way, secure increased sales.
+
 ### Send a proposal to your stakeholders
-   
+
 > In general, around 10% of sales happen on digital platforms, but studies show that as much as
 > [85% of the sales in physical stores are influenced digitally first](https://www.thinkwithgoogle.com/marketing-resources/micro-moments/meet-needs-i-want-to-know-moments/).
 > Having a site that performs well, especially on mobile (which is becoming the primary device), is
 > thereby crucial for our business's revenue. We propose a speed project that will help the site
 > increase conversions, and to set up streams of communication so that the insights in technical
 > teams can be better put to use before decisions that will affect the site are made.
-   
+
 ### Prepare for meeting with your stakeholders
-   
+
 Before meeting with stakeholders, make sure you're prepared with data for your website and your
 competitors' sites, and data that demonstrates high ROI for the changes you're suggesting.
 Gather data around the importance of speed. The best scenario is if it's connected to the company's
@@ -82,18 +82,18 @@ revenue. Here are some ways to achieve this:
    mobile conversions heavily. Through the analysis you can calculate how much revenue the company
    lost during the period of bad speed, proving the value of speed. If load times have stayed at
    about the same level, the analysis will be difficult to perform and the below alternatives can
-   give more answers. 
--  **Estimate the value of speed from statistical models**. 
+   give more answers.
+-  **Estimate the value of speed from statistical models**.
    With the help of Google's [TestMySite](https://www.thinkwithgoogle.com/feature/testmysite) you
    can run a test and then calculate the impact that a faster site can have on your business. All
    you need is data around average monthly visitors, conversion rate, and average order value, which
-   your analytics team can help you with. 
+   your analytics team can help you with.
 -  **Provide best practice case studies**.
    You can also use cases from other companies, who've made their site faster and seen the effect.
    [How Page Load Time Affects Conversion Rates: 12 Case Studies](https://blog.hubspot.com/marketing/page-load-time-conversion-rates)
    provides some examples.
 -  **Show the importance of mobile**.
-   Ask the analytics team to provide data around what percentage of your traffic comes from mobile versus desktop. 
+   Ask the analytics team to provide data around what percentage of your traffic comes from mobile versus desktop.
 -  **Research how much it will cost**.
    The above calculations are ways to show stakeholders the possible revenue uplift from speed, but
    in order for stakeholders to make decisions they need to know the ROI, so if you come prepared
@@ -123,16 +123,16 @@ revenue. Here are some ways to achieve this:
    broken down and knowledge sharing can become a competitive advantage.
 
 ## Fix speed with the help of your marketing team {: #marketing }
-   
-### The shared challenge  
-   
+
+### The shared challenge
+
 Marketing teams need tools to handle ads and data in order to make informed decisions, but most
 tools slow down websites and are often implemented with render-blocking scripts which makes visitors
 who enter the site have to wait until they see anything on the screen. There is therefore a need for
 a balance; the marketing department needs data and tools, but for the site to get low bounce rates
 and high conversion rates it has to be fast, so that marketing gets a good return on their
-investments.   
-   
+investments.
+
 The balance is achieved by being careful with scripts:
 
 -  Avoid duplicates that measure approximately the same thing.
@@ -141,10 +141,10 @@ The balance is achieved by being careful with scripts:
 
 Since it's difficult for the developers to know what the marketing department is dependent on, and
 since the marketing department might not know which tools are especially heavy for the site, you
-need to collaborate.  
-   
+need to collaborate.
+
 ### Send a proposal to your marketing team
-   
+
 > Tools used for tracking and ads often block how quickly visitors see content when they enter the
 > site. This reduces the value of marketing investments, since we pay for ads, people get
 > interested, they click but then have to wait. This risks them getting annoyed and leaving. [One
@@ -152,7 +152,7 @@ need to collaborate.
 > conversion rate decreased from around 50% to around 35% when the speed metric [Time to
 > Interactive](/tti) increased from 0.15 s to 0.3 s. Can we work together on solving this to create a
 > balance between the tools you need and site performance, making increased return on marketing
-> investments a result?  
+> investments a result?
 
 ### Prepare for meeting with your marketing team
 
@@ -161,7 +161,7 @@ need to collaborate.
 -  **Send the list to marketing and ask them to take a look at it in advance and sort them into
    three buckets**:
    -  **Business-critical**. These scripts must stay.
-   -  **Nice-to-have**. Scripts that might be able to be used less or removed. For instance, 
+   -  **Nice-to-have**. Scripts that might be able to be used less or removed. For instance,
       sometimes companies collect heat maps or screen
       recordings, but the data might only be reviewed infrequently and not lead to action or
       increased conversions. In cases such as these it can be better to agree to only run the tools
@@ -171,29 +171,29 @@ need to collaborate.
 -  **Check how much each script slows down your site by comparing site speed with and without it**.
    In [WebPageTest](https://www.webpagetest.org/) this can be set up
    via the [Block tab in Advanced Settings](https://andydavies.me/blog/2018/02/19/using-webpagetest-to-measure-the-impact-of-3rd-party-tags/).
-   Or you can [block network requests in Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/network/#block).
+   Or you can [block network requests in Chrome DevTools](https://developer.chrome.com/docs/devtools/network/#block).
 
 ### Meet with your marketing team
 
 -  **Go through the list of scripts and give your view on each script**.
    For instance, are any of the nice-to-have scripts very damaging to site
    performance? By receiving recommendations it's easier for the marketing team to prioritize, and
-   by hearing about what is business-critical for them it's easier for you understand their point of
+   by hearing about what is business-critical for them it's easier for you to understand their point of
    view.
 -  **Discuss the following topics**:
    -  Are the benefits of the data collected leading to an uplift in conversions that exceeds
       the decrease caused by the site getting slower? Data can guide the decision.
    -  Has your company chosen a provider that has the fastest version of the tool on the
       market? The marketing department might need help from developers to work out whether
-      business critical tools can be replaced by faster alternatives. 
+      business critical tools can be replaced by faster alternatives.
    -  Are there alternatives to any of the scripts on the site? For instance, instead of
       heatmaps it might be possible to start doing [usability
       tests](https://winonmobile.withgoogle.com/5-qualitative-research/#content) where you also
-      hear about the "why" behind user behavior, often leading to deeper insights.  
+      hear about the "why" behind user behavior, often leading to deeper insights.
 
 {% Aside %}
 One common challenge is that be that people become defensive when approached with suggestions.
-The key might be to always emphasise respect for the knowledge areas of other departments.
+The key might be to always emphasize respect for the knowledge areas of other departments.
 By formulating that you want to understand and listen, an openness can be created for listening
 to your ideas as well. And finally, try inviting other teams to social gatherings or coffee and
 bakery with different discussion topics. Sometimes the most powerful meetings take place outside the meeting room.
@@ -207,27 +207,27 @@ bakery with different discussion topics. Sometimes the most powerful meetings ta
    tools and their impact on speed before implementation? Or should marketing get a performance
    budget where they learn how to check speed and they themselves can prioritize which tools they
    want as long as they meet the speed target?
- 
+
 ## Fix speed with the help of your web design team {: #design }
-   
+
 One of the biggest challenges for web performance is that while connectivity might be getting faster
 in many regions, [websites are becoming
 heavier](https://speedcurve.com/blog/web-performance-page-bloat/) and as a result actually getting
-slower. Developers need to collaborate with web designers in order to solve this.  
-   
-### The shared challenge  
-   
+slower. Developers need to collaborate with web designers in order to solve this.
+
+### The shared challenge
+
 In the end, all departments within a company are usually dependent on the site leading to
 conversions, whether that's for revenue generation or something else. And the harsh truth is that
 it doesn't matter how beautiful web pages are if they take such a long time to load that people
-don't stick around to see them.   
-   
+don't stick around to see them.
+
 But slim web pages are a shared responsibility. Developers can use various image optimization techniques
 to make images load faster. Web designers can create pages that help keep page weight below an
-agreed level.  
-   
+agreed level.
+
 ### Send a proposal to your web design team
-   
+
 > Studies show that pages with fewer images and less elements create more conversions. For example,
 > [a study by Google and SOASTA](https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/)
 > found that sessions that converted users had 38% fewer images than sessions
@@ -235,14 +235,14 @@ agreed level.
 > collaboration that can increase conversions on the site? Examples of what we can achieve
 > together include finding the right level of image compression with a balance between quality and
 > speed, or reducing complex layouts or functionalities that often result
-> in heavy, slow sites.   
-   
+> in heavy, slow sites.
+
 ### Prepare for a meeting with your web design team
-   
+
 -  **Track which pages on the site have the highest load time and highest page weight**. For
    instance, if you're working with an e-commerce site, make sure you check not just the home page,
    but also any campaign pages, some of the biggest category pages, some of the product pages, and
-   the checkout flow. 
+   the checkout flow.
 -  **Prepare a [performance budget](/performance-budgets-101) proposal for the
    designers**. One alternative is to start as simple as possible with page weight as the metric and
    set 1 MB as the target for all pages (or 1.5 MB if branding is very important for conversions).
@@ -262,34 +262,34 @@ agreed level.
    pages have a page weight below 1 MB (or at maximum 1.5 MB).
 
 ## Fix speed with the help of your analytics team {: #analytics }
-   
+
 Businesses need data to know what to focus on and to get a basis for decisions. But even though many
 talk about the importance of site speed and its connection to revenue and sales, there are still
 many companies that don't include speed in their weekly reports outside tech teams. This can be
-changed if developers start collaborating with analytics teams.  
-   
-### The shared challenge  
-   
+changed if developers start collaborating with analytics teams.
+
+### The shared challenge
+
 The reality is this: what's not reported will not be focused on. If site speed is not part of
 weekly or monthly reports to business stakeholders, it will easily be forgotten and you will have a hard time
 getting resources to focus on it. But since analytics teams often aren't experienced with tracking speed, they will need
 help from developers. And the developers will need help from the analytics team to calculate the
 effect on revenue when speed improvements are made. These departments are more dependent on each
-other than one might at first think.  
-   
+other than one might at first think.
+
 ### Send a proposal to your analytics team
-   
+
 > Many [case studies](https://blog.hubspot.com/marketing/page-load-time-conversion-rates) show the
 > effect site speed has on revenue and bounce rate. Could we possibly collaborate to set up site
 > speed tracking for our company, and perhaps get speed as a part of the reports going to
 > stakeholders so that we get more buy-in?
-   
+
 ### Prepare for a meeting with your analytics team
 
 -  **Track speed regularly**. One recommendation is to use an API with a tool like [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci),
    [PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started), or
    [WebPageTest](https://github.com/andydavies/WPT-Bulk-Tester), enabling you to collect stats
-   regularly in a controlled lab setting for easy benchmarking across different time periods.  
+   regularly in a controlled lab setting for easy benchmarking across different time periods.
 -  **Forward [The value of speed][value] to the analytics team
    and ask if they can perform the analysis** so that you have the chart ready to be analyzed during
    the meeting.
@@ -303,21 +303,21 @@ other than one might at first think.
 -  **Decide if the load time metric in Google Analytics is good enough for simplified business reports**.
    [The value of speed][value] uses this metric. As many developers
    know, this is only one of many important [speed metrics](/metrics/), and since it's in Google Analytics it's also [field
-   data](/user-centric-performance-metrics/#in-the-field) instead of [lab data](/user-centric-performance-metrics/#in-the-lab). 
+   data](/user-centric-performance-metrics/#in-the-field) instead of [lab data](/user-centric-performance-metrics/#in-the-lab).
    But, is it good enough to be used for simplified business reports?
    Check the result you get from the analysis above, and see if it is possible to observe the
    relative mobile conversion rate going down when load times have been high for at least 2–3
    months, and if the relative mobile conversion rate goes up when load times have been low for 2–3
    months. If your load times have remained pretty stable, it will be difficult to know if the
    analysis is working for you until you've improved speed heavily. If so, go with the next
-   alternative. 
+   alternative.
 -  **Show your charts for the speed metrics the developers use**. Explain them to the analytics team
    and see if you discover correlations with the conversion rate or the relative mobile conversion
-   rate. 
+   rate.
 -  **Give the analytics team time to think about ways to use speed in
    calculations connected to revenue and how to report this to stakeholders**. This is often a new topic for them.
    Then meet again and try out an approach that you agree upon. As always, you need to revise data collection until you
-   find the right fit, but this is a way to start the collaboration. 
+   find the right fit, but this is a way to start the collaboration.
 
 ### Next steps
 
diff --git a/src/site/content/en/fast/font-best-practices/index.md b/src/site/content/en/fast/font-best-practices/index.md
new file mode 100644
index 00000000000..b7903a9011f
--- /dev/null
+++ b/src/site/content/en/fast/font-best-practices/index.md
@@ -0,0 +1,344 @@
+---
+layout: post
+title: Best practices for fonts
+subhead: Optimize web fonts for Core Web Vitals.
+authors:
+  - katiehempenius
+  - tunetheweb
+date: 2021-06-03
+updated: 2022-10-04
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/T4kc8pjG9mvfZwynORjM.jpg
+alt: A photo of letterpress type.
+description: Learn about how to optimize web fonts for Core Web Vitals.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+This article discusses performance best practices for fonts. There are a variety of ways in which web fonts impact performance:
+
+- **Delayed text rendering:** If a web font has not loaded, browsers typically delay text rendering. In many situations, this delays [First Contentful Paint (FCP)](/fcp). In some situations, this delays [Largest Contentful Paint (LCP)](/lcp/).
+- **Layout shifts:** The practice of font swapping has the potential to [cause layout shifts](/debug-layout-shifts/#identifying-the-cause-of-a-layout-shift) and so impact [Cumulative Layout Shift (CLS)](/cls/). These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.
+
+This article is broken down into three sections: **font loading**, **font delivery**, and **font rendering**. Each section explains how that particular aspect of the font lifecycle works and provides corresponding best practices.
+
+## Font loading
+
+Fonts are typically important resources, as without them the user might be unable to view page content. Thus, best practices for font loading generally focus on making sure that fonts get loaded as early as possible. Particular care should be given to fonts loaded from third-party sites as downloading these font files requires separate connection setups.
+
+If you're unsure if your page's fonts are being requested in time, check the **Timing** tab within the **Network** panel in Chrome DevTools for more information.
+
+{% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/hFVGVzDQHymbC5aIAtD9.png",
+    alt="Screenshot of the Timing tab in DevTools",
+    width="800",
+    height="472"
+%}
+
+### Understanding `@font-face`
+
+Before diving into best practices for font loading it's important to understand how [`@font-face`](https://developer.mozilla.org/docs/Web/CSS/@font-face) works and how this impacts font loading.
+
+The [`@font-face`](https://developer.mozilla.org/docs/Web/CSS/@font-face) declaration is an essential part of working with any web font. At a minimum, it declares the name that will be used to refer to the font and indicates the location of the corresponding font file.
+
+```css
+@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+}
+```
+
+A common misconception is that a font is requested when a `@font-face` declaration is encountered—this is not true. By itself, `@font-face` declaration does not trigger font download. Rather, a font is downloaded only if it is referenced by styling that is used on the page. For example, like this:
+
+```css
+@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+}
+
+h1 {
+  font-family: "Open Sans"
+}
+```
+
+In other words, in the example above, `Open Sans` would only be downloaded if the page contained a `<h1>` element.
+
+{% Aside %}
+    Other ways of loading a font are the [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) resource hint and the [Font Loading API](/optimize-webfont-loading/#the-font-loading-api).
+{% endAside %}
+
+Thus, when thinking about font optimization, it's important to give stylesheets just as much consideration as the font files themselves. Changing the contents or delivery of stylesheets can have a significant impact on when fonts arrive. Similarly, removing unused CSS and splitting stylesheets can reduce the number of fonts loaded by a page.
+
+### Inline font declarations
+
+Most sites would strongly benefit from inlining font declarations and other critical styling in the `<head>` of the main document rather than including them in an external stylesheet. This allows the browser to discover the font declarations sooner as the browser doesn't need to wait for the external stylesheet to download.
+
+```html
+<head>
+  <style>
+    @font-face {
+        font-family: "Open Sans";
+        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+    }
+
+    body {
+        font-family: "Open Sans";
+    }
+
+    ...etc.
+
+  </style>
+</head>
+```
+
+{% Aside %}
+    Note that if only some of the CSS is inlined, then the browser will still need to wait for all the CSS to be loaded, before it can discover if fonts are needed.<br>
+    <br>
+    Also note that inlining the font files themselves is not recommended. Inlining large resources like fonts is likely to delay the delivery of the main document, and with it, the discovery of other resources.
+{% endAside %}
+
+
+Inlining critical CSS can be a more advanced technique that not all sites will be able to achieve. The performance benefits are clear, but it requires additional processes and build tools to ensure the necessarily CSS—and ideally only the critical CSS—is inlined correctly and that any additional CSS is delivered in a non-render blocking fashion.
+
+### Preconnect to critical third-party origins
+
+If your site loads fonts from a third-party site, it is highly recommended that you use the [`preconnect`](https://developer.mozilla.org/docs/Web/HTML/Link_types/preconnect) resource hint to establish early connection(s) with the third-party origin. Resource hints should be placed in the `<head>` of the document. The resource hint below sets up a connection for loading the font stylesheet.
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.com">
+</head>
+```
+
+To preconnect the connection that is used to download the font file, add a separate `preconnect` resource hint that uses the `crossorigin` attribute. Unlike stylesheets, font files must be sent over a [CORS connection](https://developer.mozilla.org/docs/Web/HTTP/CORS#what_requests_use_cors).
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.com">
+  <link rel="preconnect" href="https://fonts.com" crossorigin>
+</head>
+```
+
+When using the `preconnect` resource hint, keep in mind that a font provider may serve stylesheets and fonts from separate origins. For example, this is how the `preconnect` resource hint would be used for Google Fonts.
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>
+```
+
+{% Aside %}
+  [Google Fonts](https://fonts.google.com/) provides the option to load fonts via `<link>` tags or an `@import` statement. The `<link>` code snippet includes a `preconnect` resource hint and therefore will likely result in faster stylesheet
+  delivery than using `@import` version. These `<link>` tags should be placed as early in the document as possible.
+{% endAside %}
+
+### Be cautious when using `preload` to load fonts
+
+Although `preload` is highly effective at making fonts discoverable early in the page load process, this comes at the cost of taking away browser resources from the loading of other resources.
+
+Inlining font declarations and adjusting stylesheets may be a more effective approach. These adjustments come closer to addressing the root cause of late-discovered fonts—rather than just providing a workaround.
+
+In addition, using `preload` as a font-loading strategy should also be used carefully as it bypasses some of the browser's built-in content negotiation strategies. For example, `preload` ignores `unicode-range` declarations, and if used prudently, should only be used to load a single font format.
+
+However, when using external stylesheets, preloading the most important fonts can be very effective since the browser will not otherwise discover whether the font is needed until much later.
+
+## Font delivery
+
+Faster font delivery yields faster text rendering. In addition, if a font is delivered early enough, this can help eliminate layout shifts resulting from font swapping.
+
+### Using self-hosted fonts
+
+On paper, using a self-hosted font should deliver better performance as it eliminates a third-party connection setup. However, in practice, the performance differences between these two options is less clear cut: for example, the [Web Almanac](https://almanac.httparchive.org/en/2020/fonts#fig-7) found that sites using third-party fonts had a faster render than fonts that used first-party fonts.
+
+If you are considering using self-hosted fonts, confirm that your site is using a [Content Delivery Network (CDN)](/content-delivery-networks/) and [HTTP/2](/content-delivery-networks/#http2-and-http3). Without use of these technologies, it is much less likely that self-hosted fonts will deliver better performance. For more information, see [Content Delivery Networks](/content-delivery-networks/).
+
+{% Aside %}
+    If you're unsure if using self-hosted fonts will deliver better performance, try serving a font file from your own servers and compare the transfer time (including connection setup) with that of a third-party font. If you have slow servers, don't use a CDN, or don't use HTTP/2 it becomes less likely that the self-hosted font will be more performant.
+{% endAside %}
+
+If you use a self-hosted font, it is recommended that you also apply some of the font file optimizations that third-party font providers typically provide automatically—for example, font subsetting and WOFF2 compression. The amount of effort required to apply these optimizations will depend somewhat on the languages that your site supports. In particular, be aware that optimizing fonts for [CJK languages](https://en.wikipedia.org/wiki/CJK_characters) can be particularly challenging.
+
+### Use WOFF2
+
+Of the modern font fonts, [WOFF2](https://www.w3.org/TR/WOFF2/) is the newest, has the widest browser support, and offers the best compression. Because it uses Brotli, WOFF2 compresses 30% better than WOFF, leading to less data to download and therefore faster performance.
+
+Given the browser support, experts now recommend only using WOFF2:
+
+<blockquote>
+  <p>
+    In fact, we think it is also time to proclaim: Use only WOFF2 and forget about everything else.<br>
+    <br>
+    This will simplify your CSS and workflow massively and also prevents any accidental double or incorrect font downloads. WOFF2 is now supported everywhere. So, unless you need to support really ancient browsers, just use WOFF2. If you can't, consider not serving any web fonts to those older browsers at all. This will not be a problem if you have a robust fallback strategy in place. Visitors on older browsers will simply see your fallback fonts.
+  </p>
+  <cite>
+    <a href="https://almanac.httparchive.org/en/2022/fonts#performance">Bram Stein, from the 2022 Web Almanac</a>
+  </cite>
+</blockquote>
+
+### Subset fonts
+
+Font files typically include a large number of [glyphs](https://en.wikipedia.org/wiki/Glyph) for all the various characters they support. But you may not need all the characters on your page and can reduce the size of font files by subsetting fonts.
+
+The [`unicode-range`](https://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-range) descriptor in the `@font-face` declartion informs the browser which characters a font can be used for.
+
+```css
+@font-face {
+    font-family: "Open Sans";
+    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+    unicode-range: U+0025-00FF;
+}
+```
+
+A font file will be downloaded if the page contains one or more characters matching the unicode range. `unicode-range` is commonly used to serve different font files depending on the language used by page content.
+
+`unicode-range` is often used in conjunction with the technique of subsetting. A subset font includes a smaller portion of the that were contained in the original font file. For example, rather than serve all characters to all users, a site might generate separate subset fonts for Latin and Cyrillic characters. The number of glyphs per font varies wildly: Latin fonts are usually on the magnitude of 100 to 1000 glyphs per font; [CJK](https://en.wikipedia.org/wiki/CJK_characters) fonts may have over 10,000 characters. Removing unused glyphs can significantly reduce the filesize of a font.
+
+Some font providers may provide different versions of fonts files with different subsets automatically. For example, [Google Fonts](https://fonts.google.com/) does this by default:
+
+```css
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+```
+
+When moving to self-hosting, this is an optimization that can easily be missed and lead to larger font files locally.
+
+It is also possible to manually subset fonts if your font provider allows this, either through an API ([Google Fonts supports this by providing a `text` parameter](https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets)), or by manually editing the font files and then self-hosting. Tools for generating font subsets include [subfont](https://github.com/Munter/subfont) and [glyphanger](https://github.com/zachleat/glyphhanger). However, do [check the licence for the fonts you use allow subsetting](https://subsetting.xyz/) and self-hosting.
+
+### Use fewer web fonts
+
+The fastest font to deliver is a font that isn't requested in the first place. System fonts and variable fonts are two ways to potentially reduce the number of web fonts used on your site.
+
+A **system font** is the default font used by the user interface of a user's device. System fonts typically vary by operating system and version. Because the font is already installed, the font does not need to be downloaded. System fonts can work particularly well for body text.
+
+To use the system font in your CSS, list `system-ui` as the font-family:
+
+```css
+font-family: system-ui
+```
+The idea behind **[variable fonts](/variable-fonts/)** is that a single variable font can be used as a replacement for multiple font files. Variable fonts work by defining a "default" font style and providing ["axes"](/variable-fonts/#axes-definitions) for manipulating the font. For example, a variable font with a `Weight` axis could be used to implement lettering that would previously require separate fonts for light, regular, bold, and extra bold.
+
+{% Aside %}
+    We often refer to "Times New Roman" and "Helvetica" as fonts. However, technically speaking, these are font _families_. A family is composed of styles, which are particular variations of the typeface (for example, light, medium, or bold italic). A font file contains a single style unless it is a variable font. A typeface is the underlying design, which can be expressed as digital fonts—and in physical type, like carved woodblocks or metal.
+{% endAside %}
+
+Not everyone will benefit from switching to variable fonts. [Variable fonts](/variable-fonts/) contain many styles, so typically have larger file sizes than individual non-variable fonts that only contain one style. Sites that will see the largest improvement from using variable fonts are those that use (and need to use) a variety of font styles and weights.
+
+## Font rendering
+
+When faced with a web font that has not yet loaded, the browser is faced with a dilemma: should it hold off on rendering text until the web font has arrived? Or should it render the text in a fallback font until the web font arrives?
+
+Different browsers handle this scenario differently. By default, Chromium-based and Firefox browsers will block text rendering for up to 3 seconds if the associated web font has not loaded; Safari will block text rendering indefinitely.
+
+This behavior can be configured by using the `font-display` attribute. This choice can have significant implications: `font-display` has the potential to impact LCP, FCP, and layout stability.
+
+### Choose an appropriate `font-display` strategy
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) informs the browser how it should proceed with text rendering when the associated web font has not loaded. It is defined per font-face.
+
+
+```css
+@font-face {
+  font-family: Roboto, Sans-Serif
+  src: url(/fonts/roboto.woff) format('woff'),
+  font-display: swap;
+}
+```
+
+There are five possible values for `font-display`:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Value</strong></th>
+        <th><strong>Block period</strong></th>
+        <th><strong>Swap period</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Auto</td>
+        <td>Varies by browser</td>
+        <td>Varies by browser</td>
+      </tr>
+      <tr>
+        <td>Block</td>
+        <td>2-3 seconds</td>
+        <td>Infinite</td>
+      </tr>
+      <tr>
+        <td>Swap</td>
+        <td>0ms</td>
+        <td>Infinite</td>
+      </tr>
+      <tr>
+        <td>Fallback</td>
+        <td>100ms</td>
+        <td>3 seconds</td>
+      </tr>
+      <tr>
+        <td>Optional</td>
+        <td>100ms</td>
+        <td>None</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+- **Block period**: The block period begins when the browser requests a web font. During the block period, if the web font is not available, the font is rendered in an _invisible_ fallback font and thus the text will not be visible to the user. If the font is not available at the end of the block period, it will be rendered in the fallback font.
+- **Swap period**: The swap period comes after the block period. If the web font becomes available during the swap period, it will be "swapped" in.
+
+`font-display` strategies reflect different viewpoints about the tradeoff between performance and aesthetics. As such it's difficult to give a recommended approach as it does depend on individual preferences, how important the web font is to the page and brand, and how jarring a late-arriving font can be when swapped in.
+
+For most sites, these are the three strategies that will be most applicable:
+
+- **If performance is a top priority:** Use `font-display: optional`. This is the most "performant" approach: text render is delayed for no longer than 100ms and there is assurance that there will be no font-swap related layout shifts. However, the downside here is the web font will not be used if it arrives late.
+
+- **If displaying text quickly is a top priority, but you want to still ensure the web-font is used:** Use `font-display: swap` but make sure to deliver the font early enough that it does not cause a layout shift. The downside of this option is the jarring shift when the font arrives late.
+
+- **If ensuring text is displayed in a web font is a top priority:** Use `font-display: block` but make sure to deliver the font early enough that it minimises the delay of the text. The downside of this is the initial text display will be delayed. Note despite this deplay, it can still cause a layout shift as the text is actually drawn invisible, and the fallback font space is therefore user to reserver the space. Once the web font loads, this may require difference space and hence a shift. This may, however, be a less jarring shift than `font-display: swap` as the text itself will not be seen to shift.
+
+{% Aside %}
+    `font-display: auto`, `font-display: block`, `font-display: swap`, and `font-display: fallback` all have the potential to cause layout shifts when the font is swapped. However, of these approaches, `font-display: swap` will delay text render the least. Thus, it can be the preferred approach for situations where it is important that text is displayed as quickly as possible, but ultimately gets rendered as a web font.
+{% endAside %}
+
+Also keep in mind that these two approaches can be combined: for example, use `font-display: swap` for branding and other visually distinctive page elements; use `font-display: optional` for fonts used in body text.
+
+{% Aside %}
+    The `font-display` strategies that work well for traditional web fonts don't work nearly as well for icon fonts. The fallback font for an icon font typically looks significantly different than the icon font and its characters may convey a completely different meaning. As a result, icon fonts are more likely to cause significant layout shifts. In addition, using a fallback font may not be practical. If possible, it's best to replace icon fonts with SVG (this is also better for accessibility). Newer versions of popular icon fonts typically support SVG. For more information on switching to SVG, see [Font Awesome](https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/svg-sprites) and [Material Icons](https://google.github.io/material-design-icons/#svg).
+{% endAside %}
+
+### Reduce the shift between your fallback font and your webfont
+
+To reduce the CLS impact, you can use the new `size-adjust` attributes. For more information see [this article](/css-size-adjust/). This is a very new addition to our toolset, so is more advanced and a bit manual at present. But definitely one to experiment with and watch for tooling improvements in the future!
+
+## Conclusion
+
+Web fonts still be a performance bottleneck but we have an ever-growing range of options to allow us to optimize them to reduce this bottleneck as much as possible.
diff --git a/src/site/content/en/fast/how-can-performance-improve-conversion/funnel1.png b/src/site/content/en/fast/how-can-performance-improve-conversion/funnel1.png
deleted file mode 100644
index b02df5ac2ba..00000000000
Binary files a/src/site/content/en/fast/how-can-performance-improve-conversion/funnel1.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-can-performance-improve-conversion/funnel2.png b/src/site/content/en/fast/how-can-performance-improve-conversion/funnel2.png
deleted file mode 100644
index af8fd418551..00000000000
Binary files a/src/site/content/en/fast/how-can-performance-improve-conversion/funnel2.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-can-performance-improve-conversion/ga_flow.png b/src/site/content/en/fast/how-can-performance-improve-conversion/ga_flow.png
deleted file mode 100644
index 445cdd84391..00000000000
Binary files a/src/site/content/en/fast/how-can-performance-improve-conversion/ga_flow.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-can-performance-improve-conversion/hero.jpg b/src/site/content/en/fast/how-can-performance-improve-conversion/hero.jpg
deleted file mode 100644
index 2f206e1689b..00000000000
Binary files a/src/site/content/en/fast/how-can-performance-improve-conversion/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/how-can-performance-improve-conversion/index.md b/src/site/content/en/fast/how-can-performance-improve-conversion/index.md
index bd2be9c2f58..24b96aacaf0 100644
--- a/src/site/content/en/fast/how-can-performance-improve-conversion/index.md
+++ b/src/site/content/en/fast/how-can-performance-improve-conversion/index.md
@@ -5,23 +5,23 @@ subhead: Optimize your site's performance and improve conversions.
 authors:
   - martinschierle
 date: 2019-06-11
-hero: hero.jpg
+hero: image/admin/jL9cdglp5D9NPKiANa2u.jpg
 alt: A man at a whiteboard draws a flow diagram depicting shopping cart abandonment.
 description: |
   Learn what impact website performance has on different parts of the e-commerce funnel
 tags:
   - blog
   - performance
-  - e-commerce
+  # - e-commerce
 ---
 
 In our other e-commerce guides you have learned about [what you should measure
 to improve performance](/what-should-you-measure-to-improve-performance/), and
-[how to measure and report metrics to build a performance culture](how-to-report-metrics/).
+[how to measure and report metrics to build a performance culture](/how-to-report-metrics/).
 
-<figure class="w-figure">
-  <img src="https://web.dev/what-should-you-measure-to-improve-performance/funnel.png" alt="A conversion funnel going from discover to engage to convert to re-engage." style="max-width: 600px; width: 100%;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/tRFlwIEQJcf52vGBEoDp.png", alt="A conversion funnel going from discover to engage to convert to re-engage.", width="800", height="399" %}
+  <figcaption>
     A conversion funnel.
   </figcaption>
 </figure>
@@ -30,10 +30,10 @@ In this guide we'll address the different ways in which a website should be opti
 
 ## Discovery
 
-New users discover a website in most cases through organic search, social sharing, website links or paid campaigns. Some important discovery mechanisms are directly affected by website performance. Website crawlers may have difficulty indexing sites that are slow to load or have extensive [client side rendering and Javascript](https://developers.google.com/search/docs/guides/dynamic-rendering).
+New users discover a website in most cases through organic search, social sharing, website links or paid campaigns. Some important discovery mechanisms are directly affected by website performance. Website crawlers may have difficulty indexing sites that are slow to load or have extensive [client side rendering and JavaScript](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering).
 
-Speed can also be a direct ranking factor, for example on [web search](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html), [ad campaigns](https://developers.google.com/web/updates/2018/07/search-ads-speed#the_mobile_speed_score_for_ads_landing_pages) or [social networks](https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/).
-Keep in mind that new users who discover your website will get an uncached first load, so basically the worst possible experience. This can be especially frustrating if good money was spent to get the user to the website, just to see her dropping off due to a long first load.
+Speed can also be a direct ranking factor, for example on [web search](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html), [ad campaigns](https://developer.chrome.com/blog/search-ads-speed/#the-mobile-speed-score-for-ads-landing-pages) or [social networks](https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/).
+Keep in mind that new users who discover your website will get an uncached first load, so basically the worst possible experience. This can be especially frustrating if good money was spent to get the user to the website, just to see them dropping off due to a long first load.
 
 Make sure to use appropriate tools as described in [Fast Load Times](/fast) to optimize towards a first load, because first impressions matter—if the first load is too slow, the user may never see the optimized second load or stay around to look at your products. In general [loading times of a website map very well to bounce rates](https://developer.akamai.com/blog/2015/09/01/mobile-web-performance-monitoring-conversion-rate), which in turn often correlate well with conversions.
 
@@ -41,18 +41,18 @@ Make sure to use appropriate tools as described in [Fast Load Times](/fast) to o
 
 After getting users to your site, you need to keep them engaged with your content, which you can verify in your analytics of choice by looking at session length, time-on-page, pages-per-session and general [user flows](https://support.google.com/analytics/answer/1709395?hl=en).
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./ga_flow.png" alt="A Google Analytics dashboard shows the number of users that drop off from starting page to first and second interactions.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/Apz0cUkUGVR7m9gKepkt.png", alt="A Google Analytics dashboard shows the number of users that drop off from starting page to first and second interactions.", width="800", height="416" %}
+  <figcaption>
     A user flow through the funnel as seen by Google Analytics.
   </figcaption>
 </figure>
 
-Besides various UX best practices, a smooth, fast and responsive experience is key here. While optimizing a website for discovery means optimizing for first load, optimizing for engagement means fast navigations and fast repeat loads. Analyze at which steps of the flow users drop out, and then relate back to speed metrics for these navigations. This can be analyzed for example via [WebPageTest](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-Sample-scripts), [Puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md) or via the Chrome DevTools [Record](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/#record) feature. We will show you more examples of those in the following guides.
+Besides various UX best practices, a smooth, fast and responsive experience is key here. While optimizing a website for discovery means optimizing for first load, optimizing for engagement means fast navigations and fast repeat loads. Analyze at which steps of the flow users drop out, and then relate back to speed metrics for these navigations. This can be analyzed for example via [WebPageTest](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#sample-scripts), [Puppeteer](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md) or via the Chrome DevTools [Record](https://developer.chrome.com/docs/devtools/evaluate-performance/#record) feature. We will show you more examples of those in the following guides.
 
 ## Conversion
 
-While website conversions are often bound to good discovery paired with great engagement, there are a couple of additional points to remember. Users expect hero images to [load fast](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_fmp_using_hero_elements), call-to-action buttons should be rendered and [labeled](https://developers.google.com/web/updates/2018/05/lighthouse#all_text_remains_visible_during_web_font_loads) quickly, page should be [responsive](https://developers.google.com/web/updates/2018/05/first-input-delay) and [layout jumps](https://css-tricks.com/content-jumping-avoid/) should be avoided. A user won't buy anything if she can't click the _Buy Now_ button due to busy CPU or a jumping or unlabeled button.
+While website conversions are often bound to good discovery paired with great engagement, there are a couple of additional points to remember. Users expect hero images to [load fast](/user-centric-performance-metrics/), call-to-action buttons should be rendered and [labeled](https://developer.chrome.com/blog/lighthouse-load-performance/#all-text-remains-visible-during-web-font-loads) quickly, page should be [responsive](/fid/) and [layout jumps](https://css-tricks.com/content-jumping-avoid/) should be avoided. A user won't buy anything if they can't click the _Buy Now_ button due to busy CPU or a jumping or unlabeled button.
 In general it's best to measure and track the time-to-action towards a conversion or a subgoal for it, for example the median time it takes shoppers to get from landing on your site, to viewing a product, to completing payment .
 
 ## Re-Engagement
@@ -64,15 +64,15 @@ Make sure to optimize for fast repeat loads and smooth UX flows to increase chan
 
 E-commerce sites always strive for conversions, which are at the end of a purchase funnel. Every step along the funnel needs to be optimized for website speed to minimize bounce rates and drop-offs, and for each step there are different things to optimize, different pitfalls and culprits:
 
-<figure class="w-figure">
-  <img src="https://web.dev/what-should-you-measure-to-improve-performance/funnel.png" alt="A conversion funnel going from discover to engage to convert to re-engage." style="max-width: 600px; width: 100%;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/tRFlwIEQJcf52vGBEoDp.png", alt="A conversion funnel going from discover to engage to convert to re-engage.", width="800", height="399" %}
+  <figcaption>
     An e-commerce funnel showing which metric to optimize in which step.
   </figcaption>
 </figure>
 
 To learn more, be sure to check out the other posts in this series on [measuring
 to improve performance](/what-should-you-measure-to-improve-performance/), and
-[how report metrics to build a performance culture](how-to-report-metrics/).
+[how report metrics to build a performance culture](/how-to-report-metrics/).
 
 _Hero image by Campaign Creators on Unsplash_.
diff --git a/src/site/content/en/fast/how-to-measure-speed/index.md b/src/site/content/en/fast/how-to-measure-speed/index.md
index 74b798b54c0..d74b803dd50 100644
--- a/src/site/content/en/fast/how-to-measure-speed/index.md
+++ b/src/site/content/en/fast/how-to-measure-speed/index.md
@@ -10,6 +10,7 @@ description: |
   tools that can help you collect lab or field data to assess page performance.
 web_lighthouse: N/A
 date: 2019-05-01
+updated: 2022-07-18
 tags:
   - performance
 ---
@@ -18,11 +19,11 @@ Real-world performance is highly variable due to differences in users' devices,
 
 ## Lab data vs Field data
 
-<img src="./measure-speed-cover.png" alt="Speed tools graphics">
+{% Img src="image/admin/6OMEfvIKRuDWWSiVDto4.png", alt="Speed tools graphics", width="800", height="232" %}
 
 **Lab data** is performance data collected within a controlled environment with predefined device and network settings, while **Field data** is performance data collected from real page loads experienced by your users in the wild. Each type has its own strengths and limitations.
 
-**Lab data** offers reproducible results and a debugging environment, but might not capture real-world bottlenecks and cannot correlate against real-world page KPIs. With lab data, you need to understand your users' typical devices and networks and appropriately mirror those conditions when you test performance. Have in mind that even in areas with 4G, users may still experience slower or intermittent connections when in elevators, while commuting, or in comparable environments.
+**Lab data** offers reproducible results and a debugging environment, but might not capture real-world bottlenecks and cannot correlate against real-world page [KPIs](https://www.thinkwithgoogle.com/intl/en-145/future-of-marketing/creativity/kpis-essential-framework/). With lab data, you need to understand your users' typical devices and networks and appropriately mirror those conditions when you test performance. Have in mind that even in areas with 4G, users may still experience slower or intermittent connections when in elevators, while commuting, or in comparable environments.
 
 **Field data** (also called Real User Monitoring or RUM) captures true real-world user experience and enables correlation to business KPIs, but has a restricted set of metrics and limited debugging capabilities.
 
@@ -31,14 +32,14 @@ Real-world performance is highly variable due to differences in users' devices,
 
 ### Lab data
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) takes a URL and runs a series of audits against the page, generating a report on how well the page did. There are multiple ways to run Lighthouse, including an option to easily audit a page from within Chrome DevTools.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) takes a URL and runs a series of audits against the page, generating a report on how well the page did. There are multiple ways to run Lighthouse, including an option to easily audit a page from within Chrome DevTools.
 
 ### Field data
 
-[Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) provides metrics showing how real-world Chrome users experience popular destinations on the web.
+[Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/) provides metrics showing how real-world Chrome users experience popular destinations on the web.
 
 ### Other tools
 
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) provides both lab and field data about a page. It uses Lighthouse to collect and analyze lab data about the page, while real-world field data is based on the Chrome User Experience Report dataset.
+[PageSpeed Insights](https://pagespeed.web.dev/) provides both lab and field data about a page. It uses Lighthouse to collect and analyze lab data about the page, while real-world field data is based on the Chrome User Experience Report dataset.
 
-[Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) is a set of web developer tools built directly into the Google Chrome browser. It allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks.
+[Chrome Developer Tools](https://developer.chrome.com/docs/devtools/) is a set of web developer tools built directly into the Google Chrome browser. It allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks.
diff --git a/src/site/content/en/fast/how-to-measure-speed/measure-speed-cover.png b/src/site/content/en/fast/how-to-measure-speed/measure-speed-cover.png
deleted file mode 100644
index e9a7b183c0f..00000000000
Binary files a/src/site/content/en/fast/how-to-measure-speed/measure-speed-cover.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-to-report-metrics/ghostery.png b/src/site/content/en/fast/how-to-report-metrics/ghostery.png
deleted file mode 100644
index a2f95d52574..00000000000
Binary files a/src/site/content/en/fast/how-to-report-metrics/ghostery.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-to-report-metrics/hero.jpg b/src/site/content/en/fast/how-to-report-metrics/hero.jpg
deleted file mode 100644
index bcaaf4cefd3..00000000000
Binary files a/src/site/content/en/fast/how-to-report-metrics/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/how-to-report-metrics/index.md b/src/site/content/en/fast/how-to-report-metrics/index.md
index 236172bb4f6..0a8289061d5 100644
--- a/src/site/content/en/fast/how-to-report-metrics/index.md
+++ b/src/site/content/en/fast/how-to-report-metrics/index.md
@@ -5,14 +5,14 @@ subhead: Understand why performance matters when it comes to conversion.
 authors:
   - martinschierle
 date: 2019-05-05
-hero: hero.jpg
+hero: image/admin/1bX6ydHTmi5UrEFx3PDc.jpg
 alt: Image of laptop with mouse pointing to checkout button on a web page
 description: |
   Learn what impact website performance has on different parts of the e-commerce funnel
 wf_blink_components: Blink>Performance
 tags:
   - blog
-  - e-commerce
+  # - e-commerce
   - performance
 ---
 
@@ -38,7 +38,7 @@ misleading. There are several ways to deal with this:
 -   Gather multiple metrics and try to narrow and filter afterwards on
     what might be relevant for the task at hand.
 -   Abstract metrics into an overall score, as for example
-    [Lighthouse does](https://developers.google.com/web/tools/lighthouse/v3/scoring#perf).
+    [Lighthouse does](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring).
     This can be especially useful for non-technical staff and other
     stakeholders, but is probably insufficient for deeper technical analysis.
 -   Try to find the one metric which is most relevant as a predictor for
@@ -52,9 +52,9 @@ Finding this metric can be done by using your analytics tool of choice
 to map performance metrics to user engagement, conversions and transaction values.
 For example, a custom report to do so looks like this in Google Analytics:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./speed_report.png" alt="A Google Analytics dashboard shows a number of fields being added to a custom report.">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/admin/YI31t9fE82uEhrrYKTVg.png", alt="A Google Analytics dashboard shows a number of fields being added to a custom report.", width="800", height="430" %}
+  <figcaption>
     Fig 1: Custom report in Google Analytics to analyze the impact of speed on conversions and engagement.
   </figcaption>
 </figure>
@@ -62,7 +62,7 @@ For example, a custom report to do so looks like this in Google Analytics:
 {% Aside 'caution' %}
   **Metrics can be deceiving.**
   Unfortunately metrics can sometimes be misleading with respect to performance.
-  Keep reading for specifics.   
+  Keep reading for specifics.
 {% endAside %}
 
 ## Increasing bounce rate
@@ -73,12 +73,12 @@ Often it is assumed that bounce rate will drop when page load speed
 increases. While this normally does hold true, measurements sometimes show the
 opposite. This is because analytics can only measure a bounce after the
 analytics library is loaded. A faster page load means analytics code also loads
-faster, so analytics may see more bounces even if there aren't more happening.  
+faster, so analytics may see more bounces even if there aren't more happening.
 
 ### Solution
 
 This can be eased by measuring
-[real page abandonment](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#load_abandonment) instead.
+[real page abandonment](/user-centric-performance-metrics/) instead.
 
 ## Decreasing relative conversions
 
@@ -88,7 +88,7 @@ Relative conversions may sometimes seem to drop for faster sites.
 This is because faster pages reach a bigger audience who might be less engaged
 or committed. While incremental traffic and conversions increase with faster
 pages, relative conversions (the ratio of conversions to page views or visitors)
-might still drop.  
+might still drop.
 
 ### Solution
 
@@ -99,7 +99,7 @@ even calculate Cost Per Sales (conversions divided with investment level) or ROI
 
 ### Problem
 
-Page engagement may seem to drop for a faster page.  
+Page engagement may seem to drop for a faster page.
 
 ### Solution
 
@@ -117,7 +117,7 @@ _[Everything You Know About Latency Is Wrong](https://bravenewgeek.com/everythin
 Similar to a chain being just as strong as the weakest link, the performance of
 a funnel is only as good as its slowest load. A single slow load may be enough
 to lose the user. Therefore averages and medians are more likely to hide the
-real performance issues, than to reveal them.  
+real performance issues, than to reveal them.
 
 ### Solution
 
@@ -130,20 +130,20 @@ While performance measurement is highly important, make sure to keep an open
 mind and question unexpected results—and make sure to not report misleading
 numbers to stakeholders and management. If unsure on what to pick and report,
 we'd advise as a minimum for 90th percentile
-[First Contentful Paint](/first-contentful-paint), which is also what we use
+[First Contentful Paint](/fcp/), which is also what we use
 across our public tooling.
 
 ## Third party content
 
 Website performance is especially prone to being dragged down
 by third party content
-(see [Eliminate render-blocking resources](/render-blocking-resources)).
+(see [Eliminate render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)).
 This is a particular problem for e-commerce, often due to trackers and widgets.
 
 Some ways to handle third party content with respect to performance:
 
 -   Always keep third party content out of the
-    [critical rendering path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/).
+    [critical rendering path](/critical-rendering-path/).
     If the third party has server problems and times out, it will impact your
     website heavily. You can test and simulate this via
     [WebPageTest Single-Point-of-Failure](https://css-tricks.com/use-webpagetest-api/#single-point-of-failure)
@@ -159,28 +159,28 @@ Some ways to handle third party content with respect to performance:
 -   Try to stay on one stack from one vendor if possible. For example, if
     you have a tag manager and analytics on one stack, you may only need a
     single script, and may be able to
-    [take advantage of HTTP2 synergies](https://developers.google.com/web/fundamentals/performance/http2/)
+    [take advantage of HTTP2 synergies](/performance-http2/)
      as there is only one host involved.
 -   Make sure not to use the same functionality from two different vendors.
     You shouldn't need two tag managers or two analytics platforms.
 -   Routinely audit and clean out redundant third party scripts, trackers
     and widgets. This can easily be done via [Ghostery Extension](https://chrome.google.com/webstore/detail/ghostery-%E2%80%93-privacy-ad-blo/mlomiejdfkolichcflejclcbmpeaniij?hl=en) or tools like [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en):
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./ghostery.png" alt="A Ghostery report showing all loaded trackers.">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/admin/w2xb4mUJ7kDpt254fq0k.png", alt="A Ghostery report showing all loaded trackers.", width="800", height="710" %}
+  <figcaption>
     A Ghostery report showing all loaded trackers
   </figcaption>
 </figure>
 
 Learn more in
-[Loading Third-Party JavaScript](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).
+[Loading Third-Party JavaScript](/optimizing-content-efficiency-loading-third-party-javascript/).
 
 ## Performance Culture
 
 Unfortunately performance is often seen as a one-off optimization task, and then
 regresses over time as stakeholders raise new feature requests or insist on
-adding new trackers and widgets.  
+adding new trackers and widgets.
 
 Performance must be a continuous goal to improve acquisition, discovery, and
 conversion rates as well as safeguarding the reputation of your brand. This can
@@ -199,7 +199,7 @@ to do this:
 -   [Facebook](https://www.theverge.com/2015/10/28/9625062/facebook-2g-tuesdays-slow-internet-developing-world)
     and Google do this by providing slow networks across the company for testing.
 -   Make average, low-spec devices with low
-    [bandwidth or high latencies](https://developers.google.com/web/fundamentals/performance/poor-connectivity/) available
+    [bandwidth or high latencies](/performance-poor-connectivity/) available
     to management and other stakeholders.
 -   Consider adding overlays showing performance metrics on your development
     or staging servers. Connections to these servers from mobile can
diff --git a/src/site/content/en/fast/how-to-report-metrics/speed_report.png b/src/site/content/en/fast/how-to-report-metrics/speed_report.png
deleted file mode 100755
index 0b8f3c88770..00000000000
Binary files a/src/site/content/en/fast/how-to-report-metrics/speed_report.png and /dev/null differ
diff --git a/src/site/content/en/fast/how-to-stay-fast/index.md b/src/site/content/en/fast/how-to-stay-fast/index.md
index 2d553b8d409..14ae17b4a36 100644
--- a/src/site/content/en/fast/how-to-stay-fast/index.md
+++ b/src/site/content/en/fast/how-to-stay-fast/index.md
@@ -21,7 +21,7 @@ Brands that optimize speed will often find they regress quickly. This is because
 
 Performance budgets are one way to address this. A performance budget is a set of limits on metrics that affect site performance. The concept is similar to a financial budget: you set a limit and make sure you stay within it. In general, a good performance budget combines different types of metrics; so, for example, the performance budget for a product page might look as follows:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tbody>
       <tr>
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/audits-panel.png b/src/site/content/en/fast/identify-slow-third-party-javascript/audits-panel.png
deleted file mode 100644
index 81e17eb7972..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/audits-panel.png and /dev/null differ
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/hero.jpg b/src/site/content/en/fast/identify-slow-third-party-javascript/hero.jpg
deleted file mode 100644
index 0863dd67c6c..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/index.md b/src/site/content/en/fast/identify-slow-third-party-javascript/index.md
index e8f86beaebc..996b49bc02e 100644
--- a/src/site/content/en/fast/identify-slow-third-party-javascript/index.md
+++ b/src/site/content/en/fast/identify-slow-third-party-javascript/index.md
@@ -7,7 +7,7 @@ authors:
 date: 2019-08-14
 # Add an updated date to your post if you edit in the future.
 # updated: 2020-04-29
-hero: hero.jpg
+hero: image/admin/8ZJRM6xxTNs8wBPph7ZO.jpg
 alt: Inspecting a laptop with a magnifying glass.
 # You can adjust the position of your hero image with this property.
 # Values: top | bottom | center (default)
@@ -20,11 +20,11 @@ tags:
 
 As a developer, you often don't have control over [which third-party scripts](/third-party-javascript/#network) your site loads. Before you can optimize third-party content you have to do some detective work to find out what's making your site slow. 🕵️
 
-In this post, you'll learn how to use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) and [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) to identify slow third-party resources. The post walks through increasingly robust techniques which are best used in combination.
+In this post, you'll learn how to use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and [Chrome DevTools](https://developer.chrome.com/docs/devtools/) to identify slow third-party resources. The post walks through increasingly robust techniques which are best used in combination.
 
 ## If you only have 5 minutes
 
-The Lighthouse [Performance audit](/lighthouse-performance) helps you discover opportunities to speed up page loads. Slow third-party scripts are likely to appear in the **Diagnostics** section under the **Reduce JavaScript execution time** and **Avoid enormous network payloads** audits.
+The Lighthouse [Performance audit](https://developer.chrome.com/docs/lighthouse/performance/) helps you discover opportunities to speed up page loads. Slow third-party scripts are likely to appear in the **Diagnostics** section under the **Reduce JavaScript execution time** and **Avoid enormous network payloads** audits.
 
 To run an audit:
 
@@ -35,44 +35,46 @@ To run an audit:
 1. Select the **Clear Storage** checkbox.
 1. Click **Run audits**.
 
-![Screenshot of the Chrome DevTools Audits panel.](./audits-panel.png)
+{% Img src="image/admin/XLNFxdEOc7739bcIwERq.png", alt="Screenshot of the Chrome DevTools Audits panel.", width="800", height="1068" %}
 
 ### Third-party usage
 
 The Lighthouse **Third-party usage** audit shows a list of the third-party providers a page uses. This overview can help you better understand the big picture and identify redundant third-party code. The audit is available in the [Lighthouse extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) and will soon be added to DevTools in Chrome 77.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./third-party-usage.png" alt='Screenshot showing that 51 third-parties were found and a list of imaginary startups.'>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/4JXHK0FkgJIfKED16BnF.png", alt="Screenshot showing that 51 third-parties were found and a list of imaginary startups.", width="728", height="646" %}
+  <figcaption>
   Third-party provider names generated with <a href="http://tiffzhang.com/startup/?s=641553836036">Startup generator</a>. Any similarity to actual startups, living or dead, is purely coincidental.
   </figcaption>
 </figure>
 
 ### Reduce JavaScript execution time
-The Lighthouse [Reduce JavaScript execution time](/bootup-time) audit highlights scripts that take a long time to parse, compile, or evaluate. Select the **Show 3rd-party resources** checkbox to discover CPU-intensive third-party scripts.
 
-<img class="w-screenshot" src="./show-third-party.png" alt='Screenshot showing that the "Show third-party resources" checkbox is checked.'>
+The Lighthouse [Reduce JavaScript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/) audit highlights scripts that take a long time to parse, compile, or evaluate. Select the **Show 3rd-party resources** checkbox to discover CPU-intensive third-party scripts.
+
+{% Img src="image/admin/O7vN1En6dtbL3Q8TbufC.png", alt="Screenshot showing that the 'Show third-party resources' checkbox is checked.", width="800", height="981" %}
 
 ### Avoid enormous network payloads
-The Lighthouse [Avoid enormous network payloads](/total-byte-weight) audit identifies network requests—including those from third-parties—that may slow down page load time. The audit fails when your network payload exceeds 4,000 KB.
 
-<img class="w-screenshot" src="./network-payloads.png" alt='Screenshot of the Chrome DevTools "Avoid enormous network payloads" audit.'>
+The Lighthouse [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/) audit identifies network requests—including those from third-parties—that may slow down page load time. The audit fails when your network payload exceeds 4,000 KB.
+
+{% Img src="image/admin/9Pnoz73MLeNzooUQLuam.png", alt="Screenshot of the Chrome DevTools 'Avoid enormous network payloads' audit.", width="799", height="631" %}
 
 ## Block network requests in Chrome DevTools
 
-Chrome DevTools [network request blocking](https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests) allows you to see how your page behaves when a particular script, stylesheet, or other resource isn't available. After you identify third-party scripts that you suspect affect performance, measure how your load time changes by blocking the requests to those scripts.
+Chrome DevTools [network request blocking](https://developer.chrome.com/docs/devtools/network/#block) allows you to see how your page behaves when a particular script, stylesheet, or other resource isn't available. After you identify third-party scripts that you suspect affect performance, measure how your load time changes by blocking the requests to those scripts.
 
 To enable request blocking:
 {% Instruction 'devtools-network', 'ol' %}
 1. Right-click any request in the **Network** panel.
 1. Select **Block request URL**.
 
-<img class="w-screenshot" src="./request-blocking.png" alt='A screenshot of the context menu in the Chrome DevTools Performance panel. The "Block request URL" option is highlighted.'>
+{% Img src="image/admin/UbedvjrtP9si1l0X2QVA.png", alt="A screenshot of the context menu in the Chrome DevTools Performance panel. The 'Block request URL' option is highlighted.", width="800", height="529" %}
 
 A **Request blocking** tab will appear in the DevTools drawer. You can manage which requests have been blocked there.
 
 To measure the impact of third-party scripts:
-1. Measure how long your page takes to load using the **Network** panel. To emulate real-world conditions, turn on [network throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/#emulate) and [CPU throttling](https://developers.google.com/web/updates/2017/07/devtools-release-notes#throttling). (On faster connections and desktop hardware, the impact of expensive scripts may not be as representative as it would be on a mobile phone.)
+1. Measure how long your page takes to load using the **Network** panel. To emulate real-world conditions, turn on [network throttling](https://developer.chrome.com/docs/devtools/network/#throttle) and [CPU throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling). (On faster connections and desktop hardware, the impact of expensive scripts may not be as representative as it would be on a mobile phone.)
 1. Block the URLs or domains responsible for third-party scripts you believe are an issue.
 1. Reload the page and re-measure how long it takes to load without the blocked third-party scripts.
 
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/network-payloads.png b/src/site/content/en/fast/identify-slow-third-party-javascript/network-payloads.png
deleted file mode 100644
index 318ea71458b..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/network-payloads.png and /dev/null differ
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/request-blocking.png b/src/site/content/en/fast/identify-slow-third-party-javascript/request-blocking.png
deleted file mode 100644
index bd8d293ecb3..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/request-blocking.png and /dev/null differ
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/show-third-party.png b/src/site/content/en/fast/identify-slow-third-party-javascript/show-third-party.png
deleted file mode 100644
index 04a85a1532c..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/show-third-party.png and /dev/null differ
diff --git a/src/site/content/en/fast/identify-slow-third-party-javascript/third-party-usage.png b/src/site/content/en/fast/identify-slow-third-party-javascript/third-party-usage.png
deleted file mode 100644
index a5b2d78ba37..00000000000
Binary files a/src/site/content/en/fast/identify-slow-third-party-javascript/third-party-usage.png and /dev/null differ
diff --git a/src/site/content/en/fast/image-cdns/image-cdn-requests.jpg b/src/site/content/en/fast/image-cdns/image-cdn-requests.jpg
deleted file mode 100644
index 8677b3a51c5..00000000000
Binary files a/src/site/content/en/fast/image-cdns/image-cdn-requests.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/image-cdns/image-cdn-url.jpg b/src/site/content/en/fast/image-cdns/image-cdn-url.jpg
deleted file mode 100644
index 5b96d4ec845..00000000000
Binary files a/src/site/content/en/fast/image-cdns/image-cdn-url.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/image-cdns/index.md b/src/site/content/en/fast/image-cdns/index.md
index 0679f9e252a..b3fdb080110 100644
--- a/src/site/content/en/fast/image-cdns/index.md
+++ b/src/site/content/en/fast/image-cdns/index.md
@@ -3,10 +3,13 @@ layout: post
 title: Use image CDNs to optimize images
 authors:
   - katiehempenius
+  - jlwagner
+  - tunetheweb
 description: |
   Image CDNs are excellent at optimizing images.
   Switching to an image CDN can yield a 40–80% savings in image bytes.
 date: 2019-08-14
+updated: 2023-03-08
 codelabs:
   - install-thumbor
 tags:
@@ -17,80 +20,71 @@ tags:
 
 Image content delivery networks (CDNs) are excellent at optimizing images. Switching to an image CDN can yield a [40–80% savings](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s) in image file size. In theory, it's possible to achieve the same results using only build scripts, but it's rare in practice.
 
-
 ## What's an image CDN?
 
 Image CDNs specialize in the transformation, optimization, and delivery of images. You can also think of them as APIs for accessing and manipulating the images used on your site. For images loaded from an image CDN, an image URL indicates not only which image to load, but also parameters like size, format, and quality. This makes it easy to create variations of an image for different use cases.
 
-
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="./image-cdn-requests.jpg" alt="Shows the request/response flow between the image CDN and the client. Parameters like size and format are used to request variations of the same image.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="Shows the request/response flow between the image CDN and the client. Parameters like size and format are used to request variations of the same image.", width="800", height="408" %}
+  <figcaption>
     Examples of transformations image CDNs can perform based on parameters in image URLs.
   </figcaption>
 </figure>
 
-
 Image CDNs are different from build-time image optimization scripts in that they create new versions of images as they're needed. As a result, CDNs are generally better suited to creating images that are heavily customized for each individual client than build scripts are.
 
-
 ## How image CDNs use URLs to indicate optimization options
 
 Image URLs used by image CDNs convey important information about an image and the transformations and optimizations that should be applied to it. URL formats will vary depending on image CDN, but at a high-level, they all have similar features. Let's walk through some of the most common features.
 
-
-
-<figure class="w-figure">
-  <img src="./image-cdn-url.jpg" alt="Image URLs typically consist of the following components: origin, image, security key, and transformations.">
+<figure>
+  {% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="Image URLs typically consist of the following components: origin, image, security key, and transformations.", width="800", height="127" %}
 </figure>
 
-
-
 ### Origin
 
 An image CDN can live on your own domain or the domain of your image CDN. Third-party image CDNs typically offer the option of using a custom domain for a fee. Using your own domain makes it easier to switch image CDNs at a later date because no URL changes will be needed.
 
 The example above uses the image CDN's domain ("example-cdn.com") with a personalized subdomain, rather than a custom domain.
 
-
 ### Image
 
 Image CDNs can usually be configured to automatically retrieve images from their existing locations when they're needed. This capability is often achieved by including the complete URL of the _existing image_ within the URL for the image generated by the image CDN. For example, you might see a URL that looks like this: `https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`. This URL would retrieve and optimize the image that exists at `https://flowers.com/daisy.jpg`.
 
-Another widely supported way of uploading images to an image CDN is to send them via an HTTP POST request to the image CDN's API.
+{% Aside %}
+As the above example shows, the file exension requested (`.jpg` is this case) may not be the same as the image file format returned (WebP in this example). The `content-type` HTTP Header will inform the browser which format the URL is in so it can process it appropriately. However, this may cause some confusion if the file is saved to disk and used by another program that expects the file format to match the file extension.
+{% endAside %}
 
+Another widely supported way of uploading images to an image CDN is to send them via an HTTP POST request to the image CDN's API.
 
 ### Security key
 
 A security key prevents other people from creating new versions of your images. If this feature is enabled, each new version of an image requires a unique security key. If someone tries to change the parameters of the image URL but doesn't provide a valid security key, they won't be able to create a new version. Your image CDN will take care of the details of generating and tracking security keys for you.
 
-
 ### Transformations
 
 Image CDNs offer tens, and in some cases hundreds, of different image transformations. These transformations are specified via the URL string, and there are no restrictions on using multiple transformations at the same time. In the context of web performance, the most important image transformations are size, pixel density, format, and compression. These transformations are the reason why switching to an image CDN typically results in a significant reduction in image size.
 
 There tends to be an objectively best setting for performance transformations, so some image CDNs support an "auto" mode for these transformations. For example, instead of specifying that images be transformed to the WebP format, you could allow the CDN to automatically select and serve the optimal format. Signals that an image CDN can use to determine the best way to transform an image include:
 
-* [Client hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints) (for example, viewport width, DPR, and image width)
-* The [`Save-Data`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data) header
-* The [User-Agent](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) request header
-* The [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
-
-For example, the image CDN might serve JPEG XR to an Edge browser, WebP to a Chrome browser, and JPEG to a very old browser. Auto settings are popular because they allow you to take advantage of image CDNs' significant expertise in optimizing images without the need for code changes to adopt new technologies once they're supported by the image CDN.
+* [Client hints](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/) (for example, viewport width, DPR, and image width)
+* The [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data) header
+* The [User-Agent](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) request header
+* The [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
 
+For example, the image CDN might serve AVIF to a Chrome browser, WebP to an Edge browser, and JPEG to a very old browser. Auto settings are popular because they allow you to take advantage of image CDNs' significant expertise in optimizing images without the need for code changes to adopt new technologies once they're supported by the image CDN.
 
 ## Types of Image CDNs
 
 Image CDNs can be broken down into two categories: self-managed and third-party-managed.
 
-
 ### Self-managed image CDNs
 
 Self-managed CDNs can be a good choice for sites with engineering staff who are comfortable maintaining their own infrastructure.
 
-[Thumbor](https://github.com/thumbor/thumbor) is the only self-managed image CDN available today. While it is open-source and free to use, it generally has fewer features than most commercial CDNs, and its documentation is somewhat limited. [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor), [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87), and [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/) are three sites that use Thumbor. See the [How to install the Thumbor image CDN](/install-thumbor) post for instructions on setting it up.
-
+- [Thumbor](https://github.com/thumbor/thumbor) is the most popular self-managed image CDN. While it is open-source and free to use, it generally has fewer features than most commercial CDNs, and its documentation is somewhat limited. [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor), [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87), and [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/) are three sites that use Thumbor. See the [How to install the Thumbor image CDN](/install-thumbor) post for instructions on setting it up.
+- [Imaginary](https://github.com/h2non/imaginary)
+- [Imagor](https://github.com/cshum/imagor)
 
 ### Third-party image CDNs
 
@@ -101,3 +95,14 @@ Third-party image CDNs provide image CDNs as a service. Just as cloud providers
 There are many good options for image CDNs. Some will have more features than others, but all of them will probably help you save bytes on your images and therefore load your pages faster. Besides feature sets, other factors to consider when choosing an image CDN are cost, support, documentation, and ease of setup or migration.
 
 Trying them out yourself before making a decision can also be helpful. Below you can find codelabs with instructions on how to quickly get started with several image CDNs.
+
+## Effects on Largest Contentful Paint (LCP)
+
+Images are a vital part of the user experience on many websites, and thus factor into how well sites do when it comes to [Largest Contentful Paint](/lcp/). Here are a few things to keep in mind if you decide to use an image CDN:
+
+1. Images served from CDNs may come from a cross-origin server, which involves extra connection setup time. When possible, try to use an image CDN that proxies through the primary origin so that you're not adding extra origins for the browser to connect to. This has the same effect as self-hosting images on the primary origin.
+2. Consider using a [`fetchpriority` attribute value of `"high"`](/fetch-priority/#summary) on the LCP image element so that the browser can begin loading that image as soon as possible.
+3. If an image is not immediately discoverable in the initial HTML, consider using a [`rel=preload`](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) hint for your LCP candidate image so that the browser can load that image ahead of time.
+4. If proxying through your origin is not possible, and the exact image to be loaded will not be known until later during page load, [you should set up a connection to the cross-origin image CDN as early as possible](/preconnect-and-dns-prefetch/) to shorten the resource loading phase of what could be your page's LCP candidate image.
+
+Image CDNs are indispensable tools that eliminate the toil of manually optimizing images, and should be considered. As always, though, there are trade-offs to consider, and keeping an eye on your website's LCP candidate images and adding hints as appropriate can mitigate any added latency to those key requests.
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-fail.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-fail.png
deleted file mode 100644
index 070f6817767..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-fail.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-pass.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-pass.png
deleted file mode 100644
index 929c411a657..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-pass.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-status.jpg b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-status.jpg
deleted file mode 100644
index 3e63942a0ec..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/bundlesize-status.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/index.md b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/index.md
index 6c83d84b169..ac14d2e768b 100644
--- a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/index.md
+++ b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/index.md
@@ -21,9 +21,9 @@ how to choose one that best fits your needs and current setup. 🕵️‍♀️
 
 ## Lighthouse performance budgets
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) is an auditing tool that tests sites in a few key areas—performance, accessibility, best practices and how well your site performs as a progressive web application.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is an auditing tool that tests sites in a few key areas—performance, accessibility, best practices and how well your site performs as a progressive web application.
 
-The [command line version](https://developers.google.com/web/tools/lighthouse/#cli) of Lighthouse (v5+) supports setting [performance budgets](https://developers.google.com/web/tools/lighthouse/audits/budgets) based on:
+The [command line version](https://developer.chrome.com/docs/lighthouse/overview/#cli) of Lighthouse (v5+) supports setting [performance budgets](/use-lighthouse-for-performance-budgets/) based on:
 
 - resource size
 - resource count
@@ -41,33 +41,33 @@ You can set budgets for any of the following resource types:
 
 Budgets are set in a JSON file and after defining them the new "Over Budget" column tells you whether you're exceeding any limits.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./lightwallet.png" alt="Budgets section in Lighthouse report">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/fsRNXJXQ5JESUuwsIlLn.png", alt="Budgets section in Lighthouse report", width="800", height="199" %}
+  <figcaption>
     "Budgets" section in Lighthouse report
   </figcaption>
 </figure>
 
 ## Webpack performance hints
 
-[Webpack](https://developers.google.com/web/fundamentals/performance/webpack/) is a powerful build tool for optimizing how your code is delivered to the users. It also supports setting performance budgets based on **asset size**.
+[Webpack](/webpack/) is a powerful build tool for optimizing how your code is delivered to the users. It also supports setting performance budgets based on **asset size**.
 
 Turn on [performance hints](https://webpack.js.org/configuration/performance/) in `webpack.config.js` to get command line warnings or errors when your bundle size grows over the limit. It's a great way to stay mindful about asset sizes throughout the development.
 
 After the build step, webpack outputs a color-coded list of assets and their sizes. Anything over budget is highlighted in yellow.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./webpack-output.png" alt="Webpack output highlighting bundle.js">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/G96Z2pZVL6aowVRa49rA.png", alt="Webpack output highlighting bundle.js", width="617", height="86" %}
+  <figcaption>
     The highlighted bundle.js is bigger than your budget
   </figcaption>
 </figure>
 
 The default limit for both assets and entry-points is **250 KB**. You can set your own targets in the configuration file.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./webpack-warning.jpg" alt="Webpack bundle size warning">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/StfxwSScNVzmeM70gwp4.jpg", alt="Webpack bundle size warning", width="566", height="104" %}
+  <figcaption>
     Webpack bundle size warning ⚠️
   </figcaption>
 </figure>
@@ -78,9 +78,9 @@ The budgets are compared against **uncompressed asset sizes**. Uncompressed [Jav
 Compressed asset sizes affect the transfer time, which is very important on slow networks.
 {% endAside %}
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./webpack-recommendation.jpg" alt="Webpack performance optimization recommendation">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/ogH1cMiF96iyhj8CiENK.jpg", alt="Webpack performance optimization recommendation", width="556", height="84" %}
+  <figcaption>
     Bonus feature: webpack won’t only warn you, it will give you a recommendation on how to downsize your bundles. 💁
   </figcaption>
 </figure>
@@ -99,16 +99,16 @@ bundlesize -f "dist/bundle.js" -s 170kB
 
 Bundlesize outputs color-coded test results in one line.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./bundlesize-fail.png" alt="Failing bundlesize CLI test">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/6YsTnhpUlzbTB1ja23yP.png", alt="Failing bundlesize CLI test", width="473", height="36" %}
+  <figcaption>
     Failing bundlesize CLI test ❌
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./bundlesize-pass.png" alt="Passing bundlesize CLI test">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/TjynyaIzZlRa6xE2uVcD.png", alt="Passing bundlesize CLI test", width="460", height="36" %}
+  <figcaption>
     Passing bundlesize CLI test ✔️
   </figcaption>
 </figure>
@@ -117,10 +117,10 @@ Bundlesize outputs color-coded test results in one line.
 
 You'll get the most value out of bundlesize if you integrate it with a CI to automatically enforce size limits on pull requests. **If bundlesize test fails, that pull request is not merged.** It works for pull requests on GitHub with [Travis CI](https://travis-ci.org/), [CircleCI](https://circleci.com/), [Wercker](http://www.wercker.com/), and [Drone](http://readme.drone.io/).
 
-<figure class="w-figure">
-  <img class="screenshot" src="./bundlesize-status.jpg" alt="Bundlesize check status on Github">
-  <figcaption class="w-figcaption">
-    Bundlesize check status on Github
+<figure>
+  {% Img src="image/admin/RKpNwfcXRoKZ34qDoxcO.jpg", alt="Bundlesize check status on GitHub", width="800", height="326", class="screenshot" %}
+  <figcaption>
+    Bundlesize check status on GitHub
   </figcaption>
 </figure>
 
@@ -132,17 +132,17 @@ By default, **it tests gzipped asset sizes**. You can use the compression option
 
 ## Lighthouse Bot
 
-<figure class="w-figure">
-  <img src="./lighthouse-travis.png" alt="Lighthouse Bot">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/5zLlIEUm06wEbu3J1WjG.png", alt="Lighthouse Bot", width="800", height="267" %}
+  <figcaption>
   </figcaption>
 </figure>
 
 [Lighthouse Bot](https://github.com/ebidel/lighthouse-ci) integrates with Travis CI and enforces budgets based on any of the five Lighthouse audit categories. For example, a budget of 100 for your Lighthouse performance score. It's sometimes simpler to keep an eye on a single number than individual asset budgets and Lighthouse scores take many things into account.
 
-<figure class="w-figure">
-  <img class="screenshot" src="./lighthouse-scores.png" alt="Lighthouse scores 💯">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/6yVLSYcr0eCytJixZ1bK.png", alt="Lighthouse scores 💯", width="800", height="211", class="screenshot" %}
+  <figcaption>
     Lighthouse scores 💯
   </figcaption>
 </figure>
@@ -157,27 +157,27 @@ after_success:
 
 If the scores for a pull request on GitHub fall below the threshold you've set, **Lighthouse Bot can prevent pull request from being merged**. ⛔
 
-<figure class="w-figure">
-  <img class="screenshot" src="./lighthouse-check.png" alt="Lighthouse Bot check status on Github">
-  <figcaption class="w-figcaption">
-    Lighthouse Bot check status on Github
+<figure>
+  {% Img src="image/admin/nVDqJAA1DZDFqpOaQA9J.png", alt="Lighthouse Bot check status on GitHub", width="800", height="175", class="screenshot" %}
+  <figcaption>
+    Lighthouse Bot check status on GitHub
   </figcaption>
 </figure>
 
 **Lighthouse Bot** then comments on your pull request with updated scores. This is a neat feature which encourages conversation about performance as code changes are happening.
 
-<figure class="w-figure">
-  <img src="./lighthouse-bot.png" alt="Lighthouse reporting scores on pull request">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/q1BUp838y2oSs70Suxyb.png", alt="Lighthouse reporting scores on pull request", width="800", height="383" %}
+  <figcaption>
     Lighthouse reporting scores on pull request 💬
   </figcaption>
 </figure>
 
-If you find your pull request blocked by a poor Lighthouse score, run an audit with [Lighthouse CLI](https://developers.google.com/web/tools/lighthouse/#cli) or in [Dev Tools](https://developers.google.com/web/tools/lighthouse/#devtools). It generates a report with details about bottlenecks and hints for simple optimizations.
+If you find your pull request blocked by a poor Lighthouse score, run an audit with [Lighthouse CLI](https://developer.chrome.com/docs/lighthouse/overview/#cli) or in [Dev Tools](https://developer.chrome.com/docs/lighthouse/overview/#devtools). It generates a report with details about bottlenecks and hints for simple optimizations.
 
 ## Summary
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <th>Tool</th>
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-bot.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-bot.png
deleted file mode 100644
index 3bc205e7b26..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-bot.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-check.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-check.png
deleted file mode 100644
index a7fadba14e0..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-check.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-scores.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-scores.png
deleted file mode 100644
index 1626a3d50d7..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-scores.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-travis.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-travis.png
deleted file mode 100644
index 77143ccf842..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lighthouse-travis.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lightwallet.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lightwallet.png
deleted file mode 100644
index 9f3c21e5f12..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/lightwallet.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-output.png b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-output.png
deleted file mode 100644
index d3ee3c20049..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-output.png and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-recommendation.jpg b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-recommendation.jpg
deleted file mode 100644
index b4c1bd3d028..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-recommendation.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-warning.jpg b/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-warning.jpg
deleted file mode 100644
index 7c72533efc1..00000000000
Binary files a/src/site/content/en/fast/incorporate-performance-budgets-into-your-build-tools/webpack-warning.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/index.md b/src/site/content/en/fast/index.md
new file mode 100644
index 00000000000..f7b007b9c97
--- /dev/null
+++ b/src/site/content/en/fast/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: fast
+---
\ No newline at end of file
diff --git a/src/site/content/en/fast/index.njk b/src/site/content/en/fast/index.njk
deleted file mode 100644
index 66b731b022a..00000000000
--- a/src/site/content/en/fast/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: fast
----
\ No newline at end of file
diff --git a/src/site/content/en/fast/lazy-loading-best-practices/index.md b/src/site/content/en/fast/lazy-loading-best-practices/index.md
index bcbf6359fb8..a091dbc5d17 100644
--- a/src/site/content/en/fast/lazy-loading-best-practices/index.md
+++ b/src/site/content/en/fast/lazy-loading-best-practices/index.md
@@ -1,18 +1,18 @@
 ---
 layout: post
-title: Lazy-loading best practices
+title: Lazy loading best practices
 authors:
-  - jeremywagner
+  - jlwagner
   - rachelandrew
 date: 2019-08-16
 updated: 2020-06-11
 description: |
-  This post details how to navigate the potential pitfalls of lazy-loading.
+  This post details how to navigate the potential pitfalls of lazy loading.
 tags:
   - performance
 ---
 
-While lazy-loading images and video have positive and measurable performance
+While lazy loading images and video have positive and measurable performance
 benefits, it's not a task to be taken lightly. If you get it wrong, there could
 be unintended consequences. As such, it's important to keep the following
 concerns in mind.
@@ -24,7 +24,7 @@ JavaScript, but you need to resist this temptation. Anything resting above the
 fold shouldn't be lazy-loaded. Such resources should be considered critical
 assets, and thus should be loaded normally.
 
-Lazy-loading delays the loading of resources until after the DOM is interactive
+Lazy loading delays the loading of resources until after the DOM is interactive
 when scripts have finished loading and begin execution. For images below the
 fold, this is fine, but critical resources above the fold should be loaded with
 the standard `<img>` element so they're displayed as soon as possible.
@@ -37,12 +37,12 @@ inventory of your page's critical assets, and load those images in typical
 fashion.
 
 Additionally, you may not want to be so strict about the fold line as the
-threshold for triggering lazy-loading. It may be more ideal for your purposes to
+threshold for triggering lazy loading. It may be more ideal for your purposes to
 establish a buffer zone some distance below the fold so that images begin
 loading well before the user scrolls them into the viewport. For example, the
 Intersection Observer API allows you to specify a `rootMargin` property in an
 options object when you create a new `IntersectionObserver` instance. This
-effectively gives elements a buffer, which triggers lazy-loading behavior before
+effectively gives elements a buffer, which triggers lazy loading behavior before
 the element is in the viewport:
 
 ```javascript
@@ -66,7 +66,7 @@ To achieve this same effect in browsers that don't support Intersection Observe,
 
 ## Layout shifting and placeholders {: #wrong-layout-shifting }
 
-Lazy-loading media can cause [shifting in the layout](/cls) if placeholders aren't used.
+Lazy loading media can cause [shifting in the layout](/cls) if placeholders aren't used.
 These changes can be disorienting for users and trigger expensive DOM layout
 operations that consume system resources and contribute to jank. At a minimum,
 consider using a solid color placeholder occupying the same dimensions as the
@@ -89,7 +89,7 @@ main thread, causing the user interface to be unresponsive for a short period of
 time while decoding occurs. [Asynchronously decoding images using the `decode`
 method](https://medium.com/dailyjs/image-loading-with-image-decode-b03652e7d2d2)
 prior to inserting them into the DOM can cut down on this sort of jank, but
-beware: It's not available everywhere yet, and it adds complexity to lazy-loading logic.
+beware: It's not available everywhere yet, and it adds complexity to lazy loading logic.
 If you want to use it, you'll need to check for it. Below shows
 how you might use `Image.decode()` with a fallback:
 
@@ -111,7 +111,7 @@ if ("decode" in newImage) {
 Check out [this CodePen link](https://codepen.io/malchata/pen/WzeZGW) to see
 code similar to this example in action. If most of your images are fairly small,
 this may not do much for you, but it can certainly help cut down on jank when
-lazy-loading large images and inserting them into the DOM.
+lazy loading large images and inserting them into the DOM.
 
 ## When stuff doesn't load {: #wrong-loading-failure }
 
@@ -126,7 +126,7 @@ altogether. By the time the user lazy-loads the image, the resource is
 unavailable, and thus fails.
 
 While these are relatively rare occurrences, it may behoove you to have a backup
-plan if lazy-loading fails. For images, such a solution may look something like
+plan if lazy loading fails. For images, such a solution may look something like
 this:
 
 ```javascript
@@ -157,14 +157,12 @@ lazy-load images, consider offering `<noscript>` markup that will show images in
 case JavaScript is unavailable. The simplest possible fallback example involves
 using `<noscript>` elements to serve images if JavaScript is turned off:
 
-```html
 <!-- An image that eventually gets lazy-loaded by JavaScript -->
 <img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load.jpg" alt="I'm an image!">
 <!-- An image that is shown if JavaScript is turned off -->
 <noscript>
   <img src="image-to-lazy-load.jpg" alt="I'm an image!">
 </noscript>
-```
 
 If JavaScript is turned off, users will see _both_ the placeholder image and the
 image contained with the `<noscript>` elements. To get around this, place
diff --git a/src/site/content/en/fast/lazy-loading-images/index.md b/src/site/content/en/fast/lazy-loading-images/index.md
index 91c8bfb9adf..72b4cd8a9e7 100644
--- a/src/site/content/en/fast/lazy-loading-images/index.md
+++ b/src/site/content/en/fast/lazy-loading-images/index.md
@@ -1,16 +1,18 @@
 ---
 layout: post
-title: Lazy-loading images
+title: Lazy loading images
 authors:
-  - jeremywagner
+  - jlwagner
   - rachelandrew
 date: 2019-08-16
-updated: 2020-06-09
+updated: 2022-08-11
 description: |
-  This post explains lazy-loading and the options available to you when lazy-loading images.
+  This post explains lazy loading and the options available to you when lazy loading images.
 tags:
   - performance
   - images
+feedback:
+  - api
 ---
 
 Images can appear on a webpage due to being inline in the HTML as `<img>` elements
@@ -18,17 +20,16 @@ or as CSS background images. In this post you will find out how to lazy-load bot
 
 ## Inline images {: #images-inline }
 
-The most common lazy-loading candidates are images as used in `<img>` elements.
-With inline images we have three options for lazy-loading,
+The most common lazy loading candidates are images as used in `<img>` elements.
+With inline images we have three options for lazy loading,
 which may be used in combination for the best compatibility across browsers:
 
-- [Using native browser lazy-loading](#images-inline-native)
+- [Using browser-level lazy loading](#images-inline-browser-level)
 - [Using Intersection Observer](#images-inline-intersection-observer)
-- [Using scroll and resize event handlers](#images-inline-event-handlers)
 
-### Using native browser lazy-loading {: #images-inline-native }
+### Using browser-level lazy loading {: #images-inline-browser-level }
 
-Chrome and Firefox both support native browser lazy-loading with the `loading` attribute.
+Chrome and Firefox both support lazy loading with the `loading` attribute.
 This attribute can be added to `<img>` elements, and also to `<iframe>` elements.
 A value of `lazy` tells the browser to load the image immediately if it is in the viewport,
 and to fetch other images when the user scrolls near them.
@@ -40,35 +41,29 @@ and to fetch other images when the user scrolls near them.
 {% endAside %}
 
 See the `loading` field of MDN's
-[browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility)
-table for details of browser support for native lazy-loading.
-If the browser does not support native lazy-loading then the attribute will be ignored
+[browser compatibility](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility)
+table for details of browser support.
+If the browser does not support lazy loading then the attribute will be ignored
 and images will load immediately, as normal.
 
 For most websites, adding this attribute to inline images will be a performance boost
 and save users loading images that they may not ever scroll to.
-If you have large numbers of images and want to be sure that users of browsers without support for native lazy-loading benefit
+If you have large numbers of images and want to be sure that users of browsers without support for lazy loading benefit
 you will need to combine this with one of the methods explained next.
 
-To learn more, check out [Native lazy-loading for the web](/native-lazy-loading/).
+To learn more, check out [Browser-level lazy loading for the web](/browser-level-image-lazy-loading/).
+
 ### Using Intersection Observer {: #images-inline-intersection-observer }
 
-To polyfill lazy-loading of `<img>` elements, we use JavaScript to check if they're in the
+To polyfill lazy loading of `<img>` elements, we use JavaScript to check if they're in the
 viewport. If they are, their `src` (and sometimes `srcset`) attributes are
 populated with URLs to the desired image content.
 
-If you've written lazy-loading code before, you may have accomplished your task
+If you've written lazy loading code before, you may have accomplished your task
 by using event handlers such as `scroll` or `resize`. While this approach is the
 most compatible across browsers, modern browsers offer a more performant and
 efficient way to do the work of checking element visibility via [the
-Intersection Observer API](https://developers.google.com/web/updates/2016/04/intersectionobserver).
-
-{% Aside %}
-  Intersection Observer is not supported in all browsers, notably IE11 and below.
-  If compatibility across browsers is crucial,
-  be sure to read [the next section](#images-inline-event-handlersy),
-  which shows you how to lazy-load images using less performant (but more compatible!) scroll and resize event handlers.
-{% endAside %}
+Intersection Observer API](https://developer.chrome.com/blog/intersectionobserver/).
 
 Intersection Observer is easier to use and read than code relying on various
 event handlers, because you only need to register an observer to watch
@@ -130,65 +125,22 @@ viewport.
 } %}
 
 Intersection Observer is available in all modern browsers.
-Therefore using it as a polyfill for `loading="lazy"` will ensure that lazy-loading is available for most visitors.
-It is not available in Internet Explorer. If Internet Explorer support is critical, read on.
-
-### Using event handlers for Internet Explorer support {: #images-inline-event-handlers }
-
-While you _should_ use Intersection Observer for lazy-loading, your application
-requirements may be such that browser compatibility is critical. [You _can_
-polyfill Intersection Observer
-support](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) (and
-this would be easiest), but you could also fall back to code using
-[`scroll`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll),
-[`resize`](https://developer.mozilla.org/en-US/docs/Web/Events/resize), and
-possibly
-[`orientationchange`](https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange)
-event handlers in concert with
-[`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-to determine whether an element is in the viewport.
-
-Assuming the same markup pattern from before,
-this Glitch example uses `getBoundingClientRect` in a `scroll` event handler to check if
-any of `img.lazy` elements are in the viewport. A `setTimeout` call is used to
-delay processing, and an `active` variable contains the processing state which
-is used to throttle function calls. As images are lazy-loaded, they're removed
-from the elements array. When the elements array reaches a `length` of `0`, the
-scroll event handler code is removed.
-
-{% Glitch {
-  id: 'lazy-loading-fallback',
-  path: 'lazy.js',
-  previewSize: 0
-} %}
-
-While this code works in pretty much any browser, it has potential performance
-issues in that repetitive `setTimeout` calls can be wasteful, even if the code
-within them is throttled. In this example, a check is being run every 200
-milliseconds on document scroll or window resize regardless of whether there's
-an image in the viewport or not. Plus, the tedious work of tracking how many
-elements are left to lazy-load and unbinding the scroll event handler are left
-to the developer. You can find out more about this technique in
- [The Complete Guide to Lazy Loading Images](https://css-tricks.com/the-complete-guide-to-lazy-loading-images/#method-1-trigger-the-image-load-using-javascript-events).
-
-Simply put: Use native lazy-loading with a fallback Intersection Observer implementation wherever possible, and only use event
-handlers if the widest possible compatibility is a critical application
-requirement.
+Therefore using it as a polyfill for `loading="lazy"` will ensure that lazy loading is available for most visitors.
 
 ## Images in CSS {: #images-css }
 
 While `<img>` tags are the most common way of using images on web pages, images
 can also be invoked via the CSS
-[`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
-property (and other properties). Native browser lazy-loading does not apply to CSS background images,
+[`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image)
+property (and other properties). Browser-level lazy loading does not apply to CSS background images,
 so you need to consider other methods if you have background images to lazy-load.
 
 Unlike `<img>` elements which load regardless
 of their visibility, image loading behavior in CSS is done with more
 speculation. When [the document and CSS object
-models](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)
+models](/critical-rendering-path-constructing-the-object-model/)
 and [render
-tree](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)
+tree](/critical-rendering-path-render-tree-construction/)
 are built, the browser examines how CSS is applied to a document before
 requesting external resources. If the browser has determined a CSS rule
 involving an external resource doesn't apply to the document as it's currently
@@ -210,7 +162,7 @@ large hero background image:
 ```
 
 The `div.lazy-background` element would normally contain the hero background
-image invoked by some CSS. In this lazy-loading example, however, you can isolate
+image invoked by some CSS. In this lazy loading example, however, you can isolate
 the `div.lazy-background` element's `background-image` property via a `visible`
 class added to the element when it's in the viewport:
 
@@ -255,12 +207,21 @@ document.addEventListener("DOMContentLoaded", function() {
   previewSize: 0
 } %}
 
-As indicated earlier, if you need Internet Explorer support for lazy-loading of background images,
-you will need to polyfill the Intersection Observer code, due to lack of support in that browser.
+### Effects on Largest Contentful Paint (LCP)
+
+Lazy loading is a great optimization that reduces both overall data usage and network contention during startup by deferring the loading of images to when they're actually needed. This can improve startup time, and reduce processing on the main thread by reducing time needed for image decodes.
+
+However, lazy loading is a technique that can affect your website's [Largest Contentful Paint LCP](/lcp/) in a negative way if you're too eager with the technique. One thing you will want to avoid is lazy loading images that are in the viewport during startup.
+
+When using JavaScript-based lazy loaders, you will want to avoid lazy loading in-viewport images because these solutions often use a `data-src` or `data-srcset` attribute as a placeholder for `src` and `srcset` attributes. The problem here is that the loading of these images will be delayed because [the browser preload scanner can't find them during startup](/preload-scanner/#lazy-loading-with-javascript).
+
+Even using browser-level lazy loading to lazy load an in-viewport image can backfire. When `loading="lazy"` is applied to an in-viewport image, [that image will be delayed until the browser knows for sure it's in the viewport](/optimize-lcp/#optimize-the-priority-the-resource-is-given), which can affect a page's LCP.
+
+_Never_ lazy load images that are visible in the viewport during startup. It's a pattern that will affect your site's LCP negatively, and therefore the user experience. If you need an image at startup, load it at startup as quickly as possible by not lazy loading it!
 
-## Lazy-loading libraries {: #libraries }
+## Lazy loading libraries {: #libraries }
 
-The following libraries can be used to lazy-load images.
+You should use browser-level lazy loading whenever possible, but if you find yourself in a situation where that isn't an option&mdash;such as a significant group of users still reliant on older browsers&mdash;the following libraries can be used to lazy-load images:
 
 - [lazysizes](https://github.com/aFarkas/lazysizes) is a full-featured lazy
 loading library that lazy-loads images and iframes. The pattern it uses is quite
@@ -271,13 +232,14 @@ into `src` and/or `srcset` attributes, respectively. It uses Intersection
 Observer (which you can polyfill), and can be extended with [a number of
 plugins](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo) to
 do things like lazy-load video. [Find out more about using lazysizes](/use-lazysizes-to-lazyload-images/).
-- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) is a super lightweight
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) is a
+  lightweight option for lazy loading images, background images, videos, iframes,
+  and scripts. It leverages Intersection Observer, supports responsive images, and
+  enables browser-level lazy loading.
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) is a another lightweight
 option that uses Intersection Observer only. As such, it's highly performant,
 but will need to be polyfilled before you can use it on older browsers.
-- [yall.js](https://github.com/malchata/yall.js) is a library that uses
-Intersection Observer and falls back to event handlers. It's compatible with IE11
-and major browsers.
-- If you need a React-specific lazy-loading library, consider
+- If you need a React-specific lazy loading library, consider
 [react-lazyload](https://github.com/jasonslyvia/react-lazyload). While it
 doesn't use Intersection Observer, it _does_ provide a familiar method of lazy
 loading images for those accustomed to developing applications with React.
diff --git a/src/site/content/en/fast/lazy-loading-video/index.md b/src/site/content/en/fast/lazy-loading-video/index.md
index 1a68de9ac46..b5b18b93718 100644
--- a/src/site/content/en/fast/lazy-loading-video/index.md
+++ b/src/site/content/en/fast/lazy-loading-video/index.md
@@ -1,15 +1,17 @@
 ---
 layout: post
-title: Lazy-loading video
+title: Lazy loading video
 authors:
-  - jeremywagner
+  - jlwagner
   - rachelandrew
 date: 2019-08-16
-updated: 2020-06-05
+updated: 2022-08-15
 description: |
-  This post explains lazy-loading and the options available to you when lazy-loading video.
+  This post explains lazy loading and the options available to you when lazy loading video.
 tags:
   - performance
+feedback:
+  - api
 ---
 
 As with [image elements](/lazy-loading-images), you can also lazy-load video. Videos are commonly loaded with the `<video>` element (although [an
@@ -21,9 +23,9 @@ different solution.
 
 ## For video that doesn't autoplay {: #video-no-autoplay }
 
-For videos where playback is initiated by the user (i.e., videos that _don't_
+For videos where playback is initiated by the user (that is, videos that _don't_
 autoplay), specifying the [`preload`
-attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload)
+attribute](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload)
 on the `<video>` element may be desirable:
 
 ```html
@@ -33,6 +35,10 @@ on the `<video>` element may be desirable:
 </video>
 ```
 
+{% Aside 'important' %}
+A video `poster` image can qualify as an [LCP candidates](/lcp/#what-elements-are-considered). If your `poster` image is an LCP candidate, you should [preload it](/preload-critical-assets/) with a [`fetchpriority` attribute value of `"high"`](/fetch-priority/#the-fetchpriority-attribute) so the user sees it as soon as possible.
+{% endAside %}
+
 The example above uses a `preload` attribute with a value of `none` to prevent browsers
 from preloading _any_ video data. The `poster`
 attribute gives the `<video>` element a placeholder that will occupy the space while the video loads. The reason for this is
@@ -40,8 +46,7 @@ that default behaviors for loading video can vary from browser to browser:
 
 - In Chrome, the default for `preload` used to be `auto`, but as of Chrome 64, it now
 defaults to `metadata`. Even so, on the desktop version of Chrome, a portion of
-the video may be preloaded using the `Content-Range` header. Firefox, Edge and
-Internet Explorer 11 behave similarly.
+the video may be preloaded using the `Content-Range` header. Other Chromium-based browsers and Firefox behave similarly.
 - As with Chrome on desktop, 11.0 desktop versions of Safari will preload a range
 of the video.
 From version 11.2, only the video metadata is preloaded. [In Safari on iOS, videos are never
@@ -54,7 +59,7 @@ being explicit is probably your best bet. In this cases where the user initiates
 playback, using `preload="none"` is the easiest way to defer loading of video on
 all platforms. The `preload` attribute isn't the only way to defer the loading
 of video content. [_Fast Playback with Video
-Preload_](https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload) may give you
+Preload_](/fast-playback-with-preload/) may give you
 some ideas and insight into working with video playback in JavaScript.
 
 Unfortunately, it doesn't prove useful when you want to use video in place of
@@ -88,26 +93,22 @@ The `autoplay`, `muted`, and `loop` attributes are self-explanatory.
 [`playsinline` is necessary for autoplaying to occur in
 iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/). Now you have a
 serviceable video-as-GIF replacement that works across platforms. But how to go
-about lazy-loading it? [Chrome will lazy-load video for
-you](https://www.google.com/url?q=https://developers.google.com/web/updates/2017/03/chrome-58-media-updates%23offscreen&sa=D&ust=1521096956530000&usg=AFQjCNHPv7wM_yxmkOWKA0sZ-MXYKUdUXg),
-but you can't count on all browsers to provide this optimized behavior.
-Depending on your audience and application requirements, you may need to take
-matters into your own hands. To start, modify your `<video>` markup accordingly:
+about lazy loading it? To start, modify your `<video>` markup accordingly:
 
 ```html
-<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
   <source data-src="one-does-not-simply.webm" type="video/webm">
   <source data-src="one-does-not-simply.mp4" type="video/mp4">
 </video>
 ```
 
 You'll notice the addition of the [`poster`
-attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster),
+attribute](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster),
 which lets you specify a placeholder to occupy the `<video>` element's space
 until the video is lazy-loaded. As with the [`<img>` lazy-loading examples](/lazy-loading-images/),
  stash the video URL in the `data-src` attribute on each `<source>`
 element. From there, use JavaScript code similar to the
-Intersection Observer-based image lazy-loading examples:
+Intersection Observer-based image lazy loading examples:
 
 ```javascript
 document.addEventListener("DOMContentLoaded", function() {
@@ -148,20 +149,20 @@ Using this method, you have a video solution that emulates animated GIF behavior
 but doesn't incur the same intensive data usage as animated GIFs do,
 and you can lazy-load that content.
 
-## Lazy-loading libraries {: #libraries }
+## Lazy loading libraries {: #libraries }
 
 The following libraries can help you to lazy-load video:
 
-- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) is a super lightweight
-option that uses Intersection Observer only. As such, it's highly performant,
-but will need to be polyfilled before you can use it on older browsers.
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) and
+[lozad.js](https://github.com/ApoorvSaxena/lozad.js) are super lightweight options
+that use Intersection Observer only. As such, they are highly performant, but
+will need to be polyfilled before you can use them on older browsers.
 - [yall.js](https://github.com/malchata/yall.js) is a library that uses
-Intersection Observer and falls back to event handlers. It's compatible with IE11
-and major browsers.
-- If you need a React-specific lazy-loading library, you might consider
+Intersection Observer and falls back to event handlers. It can also lazy load video `poster` images using a `data-poster` attribute.
+- If you need a React-specific lazy loading library, you might consider
 [react-lazyload](https://github.com/jasonslyvia/react-lazyload). While it
 doesn't use Intersection Observer, it _does_ provide a familiar method of lazy
 loading images for those accustomed to developing applications with React.
 
-Each of these lazy-loading libraries is well documented, with plenty of markup
-patterns for your various lazy-loading endeavors.
+Each of these lazy loading libraries is well documented, with plenty of markup
+patterns for your various lazy loading endeavors.
diff --git a/src/site/content/en/fast/lazy-loading/index.md b/src/site/content/en/fast/lazy-loading/index.md
index f5eb6dae8a6..12fd132076d 100644
--- a/src/site/content/en/fast/lazy-loading/index.md
+++ b/src/site/content/en/fast/lazy-loading/index.md
@@ -1,19 +1,18 @@
 ---
 layout: post
-title: Use lazy-loading to improve loading speed
+title: Use lazy loading to improve loading speed
 authors:
-  - jeremywagner
+  - jlwagner
   - rachelandrew
 date: 2019-08-16
-updated: 2020-06-09
+updated: 2022-08-17
 description: |
-  This post explains lazy-loading and why you might want to lazy-load elements on your site.
+  This post explains lazy loading and why you might want to lazy-load elements on your site.
 tags:
   - performance
   - images
 ---
 
-
 The portion of
 [images](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest)
 and [video](http://beta.httparchive.org/reports/page-weight#bytesVideo) in the
@@ -23,47 +22,44 @@ applications.
 Such impasses are frustrating,
 especially when all parties involved want to improve site performance,
 but can't agree on how to get there.
-Fortunately, lazy-loading is a solution that lowers initial page payload _and_
+Fortunately, lazy loading is a solution that lowers initial page payload _and_
 load time, but doesn't skimp on content.
 
-## What is lazy-loading? {: #what }
+## What is lazy loading? {: #what }
 
-Lazy-loading is a technique that defers loading of non-critical resources at page
+Lazy loading is a technique that defers loading of non-critical resources at page
 load time. Instead, these non-critical resources are loaded at the moment of
 need. Where images are concerned, "non-critical" is often synonymous with
 "off-screen". If you've used Lighthouse and examined some opportunities for
 improvement, you may have seen some guidance in this realm in the form of the
-[Defer offscreen images audit](/offscreen-images/):
+[Defer offscreen images audit](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/):
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./offscreen-audit.png" alt="A screenshot of the Defer offscreen images
-audit in Lighthouse.">
-  <figcaption class="w-figcaption">One of Lighthouse's performance audits is to
-identify off screen images, which are candidates for lazy-loading.</figcaption>
+<figure>
+  {% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="A screenshot of the Defer offscreen images audit in Lighthouse.", width="800", height="102" %}
+  <figcaption>One of Lighthouse's performance audits is to
+identify off screen images, which are candidates for lazy loading.</figcaption>
 </figure>
 
-You've probably already seen lazy-loading in action, and it goes something like
+You've probably already seen lazy loading in action, and it goes something like
 this:
 
 - You arrive at a page, and begin to scroll as you read content.
 - At some point, you scroll a placeholder image into the viewport.
 - The placeholder image is suddenly replaced by the final image.
 
-An example of image lazy-loading can be found on the popular publishing platform
+An example of image lazy loading can be found on the popular publishing platform
 [Medium](https://medium.com/), which loads lightweight placeholder images at
 page load, and replaces them with lazily-loaded images as they're scrolled into
 the viewport.
 
-<figure class="w-figure">
-  <img src="./lazy-loading-example.jpg" alt="A screenshot of the website
-Medium in the browsing, demonstrating lazy-loading in action. The blurry
-placeholder is on the left, and the loaded resource is on the right.">
-  <figcaption class="w-figcaption">An example of image lazy-loading in action. A
+<figure>
+  {% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="A screenshot of the website Medium in the browsing, demonstrating lazy loading in action. The blurry placeholder is on the left, and the loaded resource is on the right.", width="800", height="493" %}
+  <figcaption>An example of image lazy loading in action. A
 placeholder image is loaded at page load (left), and when scrolled into the
 viewport, the final image loads at the time of need.</figcaption>
 </figure>
 
-If you're unfamiliar with lazy-loading, you might be wondering just how useful
+If you're unfamiliar with lazy loading, you might be wondering just how useful
 the technique is, and what its benefits are. Read on to find out!
 
 ## Why lazy-load images or video instead of just _loading_ them? {: #why }
@@ -80,37 +76,38 @@ of their money.
 resource is downloaded, the browser must decode it and render its content in the
 viewport.
 
-Lazy-loading images and video reduces initial page load time, initial
+Lazy loading images and video reduces initial page load time, initial
 page weight, and system resource usage, all of which have positive impacts on
 performance.
 
-## Implementing lazy-loading {: #implementing }
+## Implementing lazy loading {: #implementing }
 
-There are a number of ways to implement lazy-loading.
+There are a number of ways to implement lazy loading.
 Your choice of solution must take into account the browsers you support,
 and also what you are trying to lazy-load.
 
-Modern browsers implement [native lazy-loading](/native-lazy-loading/), which can be enabled using the `loading` attribute on images and iframes.
+Modern browsers implement [browser-level lazy loading](/browser-level-image-lazy-loading/),
+which can be enabled using the `loading` attribute on images and iframes.
 To provide compatibility with older browsers
-or to perform lazy-loading on elements without native lazy-loading
+or to perform lazy loading on elements without built-in lazy loading
 you can implement a solution with your own JavaScript.
 There are also a number of existing libraries to help you to do this.
 See the posts on this site for full details of all of these approaches:
 
-- [Lazy-loading images](/lazy-loading-images/)
-- [Lazy-loading video](/lazy-loading-video/)
+- [Lazy loading images](/lazy-loading-images/)
+- [Lazy loading video](/lazy-loading-video/)
 
-Also, we have compiled a list of [potential issues with lazy-loading](/lazy-loading-best-practices),
+Also, we have compiled a list of [potential issues with lazy loading](/lazy-loading-best-practices),
 and things to watch out for in your implementation.
 
 ## Conclusion
 
-Used with care, lazy-loading images and video can seriously lower the initial
-load time and page payloads on your site. Users won't incur unnecessary network
-activity and processing costs of media resources they may never see, but they
+Used with care, lazy loading images and video can seriously lower the initial
+load time and page payloads on your site, including [Core Web Vitals](/vitals/). Users won't incur unnecessary network
+activity&mdash;including network contention on slower connections&mdash;and processing costs of media resources they may never see, but they
 can still view those resources if they want.
 
-As far as performance improvement techniques go, lazy-loading is reasonably
+As far as performance improvement techniques go, lazy loading is reasonably
 uncontroversial. If you have a lot of inline imagery in your site, it's a
 perfectly fine way to cut down on unnecessary downloads. Your site's users and
 project stakeholders will appreciate it!
diff --git a/src/site/content/en/fast/lazy-loading/lazy-loading-example.jpg b/src/site/content/en/fast/lazy-loading/lazy-loading-example.jpg
deleted file mode 100644
index 2b1acae003e..00000000000
Binary files a/src/site/content/en/fast/lazy-loading/lazy-loading-example.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/lazy-loading/offscreen-audit.png b/src/site/content/en/fast/lazy-loading/offscreen-audit.png
deleted file mode 100644
index 2cee630fec1..00000000000
Binary files a/src/site/content/en/fast/lazy-loading/offscreen-audit.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/cdt-css-optimized.png b/src/site/content/en/fast/minify-css/cdt-css-optimized.png
deleted file mode 100644
index 81b75677c0b..00000000000
Binary files a/src/site/content/en/fast/minify-css/cdt-css-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/cdt-css-unoptimized-res.png b/src/site/content/en/fast/minify-css/cdt-css-unoptimized-res.png
deleted file mode 100644
index 3691a7ef9fd..00000000000
Binary files a/src/site/content/en/fast/minify-css/cdt-css-unoptimized-res.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/cdt-css-unoptimized.png b/src/site/content/en/fast/minify-css/cdt-css-unoptimized.png
deleted file mode 100644
index d747890219d..00000000000
Binary files a/src/site/content/en/fast/minify-css/cdt-css-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/glitch-console.png b/src/site/content/en/fast/minify-css/glitch-console.png
deleted file mode 100644
index 19efba72d8a..00000000000
Binary files a/src/site/content/en/fast/minify-css/glitch-console.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/index.md b/src/site/content/en/fast/minify-css/index.md
index 699066be628..a39a1e9af41 100644
--- a/src/site/content/en/fast/minify-css/index.md
+++ b/src/site/content/en/fast/minify-css/index.md
@@ -64,7 +64,7 @@ As a first step, you need to understand what would be the opportunity after mini
 
 The resulting report shows that up to **16&nbsp;KB** can be saved from the **animate.css** file:
 
-<img class="screenshot" width="700px" height="150px" src="./lighthouse-unoptimized.png" alt="Lighthouse: Minify CSS opportunity.">
+{% Img src="image/admin/RFMk5OMAIvOlkUZJTsh4.png", alt="Lighthouse: Minify CSS opportunity.", width="800", height="172", class="screenshot" %}
 
 Now inspect the content of the CSS:
 
@@ -74,7 +74,7 @@ Now inspect the content of the CSS:
 1. Select the **Disable cache** checkbox.
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" width="700px" height="120px" src="./cdt-css-unoptimized.png" alt="DevTools CSS unoptimized trace">
+{% Img src="image/admin/WgneNAyftk8jneyXxMih.png", alt="DevTools CSS unoptimized trace", width="800", height="138" %}
 
 The page is requesting two CSS files, of **1.9KB** and **76.2KB** respectively.
 
@@ -83,7 +83,7 @@ The page is requesting two CSS files, of **1.9KB** and **76.2KB** respectively.
 
 Note that the stylesheet contains characters for whitespaces and indentation:
 
-<img class="w-screenshot" width="700px" height="120px" src="./cdt-css-unoptimized-res.png" alt="DevTools CSS unoptimized response">
+{% Img src="image/admin/UEB5Xxe5IHhGtMx3XfKD.png", alt="DevTools CSS unoptimized response", width="800", height="286" %}
 
 Next, you'll add some webpack plugins to your build process to minify these files.
 
@@ -160,7 +160,7 @@ To inspect the size and content of the files:
 1. Select the **Disable cache** checkbox if it isn't already.
 {% Instruction 'reload-app', 'ol' %}
 
-<img class="w-screenshot" width="700px" height="120px" src="./cdt-css-optimized.png" alt="DevTools CSS unoptimized response">
+{% Img src="image/admin/id5kWwB3NilmVPWPTM59.png", alt="DevTools CSS unoptimized response", width="800", height="130" %}
 
 You can inspect these files, and see that the new versions don't contain any whitespaces. Both files are much smaller, in particular, the [animate.css](http://fav-kitties-animated-min.glitch.me/animate.css) has been reduced in **~26%**, saving **~20KB**!
 
@@ -173,9 +173,9 @@ As a final step:
 
 The report doesn't show "Minify CSS" as "Opportunity" anymore, and has now moved to "Passed Audits" section:
 
-<img class="w-screenshot" width="700px" height="150px" src="./lighthouse-optimized.png" alt="Lighthouse Passed Audits for optimized page.">
+{% Img src="image/admin/zegn2qIHYYK58w1GhgYd.png", alt="Lighthouse Passed Audits for optimized page.", width="800", height="163" %}
 
-Since CSS files are [render-blocking resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources), if you apply minification on sites that use large CSS files, you can see improvements on metrics like [First Contentful Paint](/first-contentful-paint).
+Since CSS files are [render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources), if you apply minification on sites that use large CSS files, you can see improvements on metrics like [First Contentful Paint](/fcp/).
 
 ## Next steps and resources
 
diff --git a/src/site/content/en/fast/minify-css/lighthouse-optimized.png b/src/site/content/en/fast/minify-css/lighthouse-optimized.png
deleted file mode 100644
index fa8a76f95c0..00000000000
Binary files a/src/site/content/en/fast/minify-css/lighthouse-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/minify-css/lighthouse-unoptimized.png b/src/site/content/en/fast/minify-css/lighthouse-unoptimized.png
deleted file mode 100644
index 999d28845cb..00000000000
Binary files a/src/site/content/en/fast/minify-css/lighthouse-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/native-lazy-loading/better-thresholds.png b/src/site/content/en/fast/native-lazy-loading/better-thresholds.png
deleted file mode 100644
index 4377020feac..00000000000
Binary files a/src/site/content/en/fast/native-lazy-loading/better-thresholds.png and /dev/null differ
diff --git a/src/site/content/en/fast/native-lazy-loading/hero.png b/src/site/content/en/fast/native-lazy-loading/hero.png
deleted file mode 100644
index f88571a7f5f..00000000000
Binary files a/src/site/content/en/fast/native-lazy-loading/hero.png and /dev/null differ
diff --git a/src/site/content/en/fast/native-lazy-loading/index.md b/src/site/content/en/fast/native-lazy-loading/index.md
deleted file mode 100644
index 10694b1a43e..00000000000
--- a/src/site/content/en/fast/native-lazy-loading/index.md
+++ /dev/null
@@ -1,346 +0,0 @@
----
-layout: post
-title: Native image lazy-loading for the web
-subhead: Browser-level native lazy-loading is finally here!
-authors:
-  - houssein
-  - addyosmani
-  - mathiasbynens
-date: 2019-08-06
-updated: 2020-07-16
-hero: hero.png
-alt: Phone outline with loading image and assets
-description: |
-  This post covers the loading attribute and how it can be used
-  to control the loading of images.
-tags:
-  - blog # blog is a required tag for the article to show up in the blog.
-  - performance
----
-
-Support for natively lazy-loading images is now supported on the web! This video shows
-a [demo](https://mathiasbynens.be/demo/img-loading-lazy) of the feature:
-
-<figure class="w-figure w-figure--fullbleed">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
-  </video>
-</figure>
-
-In Chrome 76 onwards, you can use the `loading` attribute to lazy-load images
-without the need to write custom lazy-loading code or use a separate JavaScript library. Let's dive into the details.
-
-## Browser compatibility
-
-`<img loading=lazy>` is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera)
-and [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75#HTML).
-The implementation for WebKit (Safari) [is in progress](https://bugs.webkit.org/show_bug.cgi?id=200764).
-[caniuse.com](https://caniuse.com/#feat=loading-lazy-attr) has detailed information on cross-browser
-support. Browsers that do not support the `loading` attribute simply ignore it without side-effects.
-
-## Why native lazy-loading?
-
-According to [HTTPArchive](https://httparchive.org/reports/page-weight), images are the most
-requested asset type for most websites and usually take up more bandwidth than any other
-resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile. That's a
-lot of [cat pictures](https://en.wikipedia.org/wiki/Cats_and_the_Internet).
-
-Currently, there are two ways to defer the loading of off-screen images:
-
-- Using the [Intersection Observer
-  API](https://developers.google.com/web/updates/2016/04/intersectionobserver)
-- Using `scroll`, `resize`, or `orientationchange` [event
-  handlers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way)
-
-Either option can let developers include lazy-loading functionality, and many developers have built
-third-party libraries to provide abstractions that are even easier to use. With lazy-loading
-supported directly by the browser, however, there's no need for an external library. Native lazy
-loading also ensures that deferred loading of images still works even if JavaScript is
-disabled on the client.
-
-## The `loading` attribute
-
-Today, Chrome already loads images at different priorities depending on where they're located with
-respect to the device viewport. Images below the viewport are loaded with a lower priority, but they're
-still fetched as soon as possible.
-
-In Chrome 76+, you can use the `loading` attribute to completely defer the loading of offscreen images that can be reached by scrolling:
-
-```html
-<img src="image.png" loading="lazy" alt="…" width="200" height="200">
-```
-
-Here are the supported values for the `loading` attribute:
-
-- `auto`: Default lazy-loading behavior of the browser, which is the same as not
-  including the attribute.
-- `lazy`: Defer loading of the resource until it reaches a [calculated distance](#load-in-distance-threshold) from the viewport.
-- `eager`: Load the resource immediately, regardless of where it's located on the page.
-
-{% Aside 'caution' %}
-  Although available in Chromium, the `auto` value is not mentioned in the [specification](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes). Since it may be subject to change, we recommend not to use it until it gets included.
-{% endAside %}
-
-### Distance-from-viewport thresholds
-
-All images that are above the fold—that is, immediately viewable without scrolling—load
-normally. Those that are far below the device viewport are only fetched when the user scrolls near them.
-
-Chromium's implementation of native lazy-loading tries to ensure that offscreen images are loaded early enough so that they have finished loading once the user scrolls near to them. By fetching nearby images before they become visible in the viewport, we maximize the chance they are already loaded by the time they become visible. 
-
-Compared to JavaScript lazy-loading libraries, the thresholds for fetching images that scroll into view may be considered conservative. Chromium is looking at better aligning these thresholds with developer expectations. 
-
-{% Aside %}
-Experiments conducted using Chrome on Android suggest that on 4G, 97.5% of below-the-fold images that are lazy-loaded were fully loaded within 10ms of becoming visible. Even on slow 2G networks, 92.6% of below-the-fold images were fully loaded within 10ms. This means native lazy-loading offers a stable experience regarding the visibility of elements that are scrolled into view.
-{% endAside %}
-
-The distance threshold is not fixed and varies depending on several factors:
-
-- The type of image resource being fetched 
-- Whether [Lite mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) is enabled
-  on Chrome for Android
-- The [effective connection type](https://googlechrome.github.io/samples/network-information/)
-
-You can find the default values for the different effective connection types in the [Chromium
-source](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad).
-These numbers, and even the approach of fetching only when a certain distance from the viewport is
-reached, may change in the near future as the Chrome team improves heuristics to determine when to
-begin loading.
-
-{% Aside %}
-In Chrome 77+, you can experiment with these different thresholds by [throttling the
-network](https://developers.google.com/web/tools/chrome-devtools/network/#throttle) in DevTools. In
-the meantime, you will need to override the effective connection type of the browser using the
-`chrome://flags/#force-effective-connection-type` flag.
-{% endAside %}
-
-## Improved data-savings and distance-from-viewport thresholds
-
-As of July 2020, Chrome has made significant improvements to align the native image lazy-loading distance-from-viewport thresholds to better meet developer expectations. 
-
-On fast connections (e.g 4G), we reduced Chrome's distance-from-viewport thresholds from `3000px` to `1250px` and on slower connections (e.g 3G), changed the threshold from `4000px` to `2500px`. This change achieves two things:
-
-* `<img loading=lazy>` behaves closer to the experience offered by JavaScript lazy-loading libraries.
-* The new distance-from-viewport thresholds still allow us to guarantee images have probably loaded by the time a user has scrolled to them.
-
-You can find a comparison between the old vs. new distance-from-viewport thresholds for one of our demos on a fast connection (4G) below:
-
-Old thresholds. vs new thresholds:
-
-<figure class="w-figure">
-  <img src="./better-thresholds.png" alt="The new and improved thresholds for native image lazy-loading, reducing the distance-from-viewport thresholds for fast connections from 3000px down to 1250px">
-</figure>
-
-and the new thresholds vs. LazySizes (a popular JS lazy-loading library):
-
-<figure class="w-figure">
-  <img src="./lazysizes-threshold.png" alt="The new  distance-from-viewport thresholds in Chrome loading 90KB of images compared to LazySizes loading in 70KB under the same network conditions">
-</figure>
-
-
-{% Aside %}
-  To ensure Chrome users on recent versions also benefit from the new thresholds, we have backported these changes so that Chrome 79 - 85 inclusive also uses them. Please keep this in mind if attempting to compare data-savings from older versions of Chrome to newer ones.
-{% endAside %}
-
-We are committed to working with the web standards community to explore better alignment in how distance-from-viewport thresholds are approached across different browsers.
-
-### Images should include dimension attributes
-
-While the browser loads an image, it does not immediately know the image's dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all `<img>` tags include both `width` and `height` attributes. Without dimensions specified, [layout shifts](/cls) can occur, which are more noticeable on pages that take some time to load.
-
-```html
-<img src="image.png" loading="lazy" alt="…" width="200" height="200">
-```
-
-Alternatively, specify their values directly in an inline style:
-
-```html
-<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
-```
-
-The best practice of setting dimensions applies to `<img>` tags regardless of whether or not they are being loaded lazily. With lazy-loading, this can become more relevant. Setting `width` and `height` on images in modern browsers also allows browsers to infer their instrinsic size.
-
-Images will still lazy-load if dimensions are not included, but [specifying them decreases the chance of layout shift](https://www.youtube.com/watch?v=4-d_SoCHeWE). If you are unable to include dimensions for your images, lazy-loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift. 
-
-While native lazy-loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, there is still a small chance that they might not be loaded yet. In this case, missing `width` and `height` attributes on such images increase their impact on Cumulative Layout Shift.
-
-{% Aside %}
-  Take a look at this [demo](https://mathiasbynens.be/demo/img-loading-lazy) to see how the `loading` attribute works with 100 pictures.
-{% endAside %}
-
-Images that are defined using the `<picture>` element can also be lazy-loaded:
-
-```html
-<picture>
-  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
-  <img src="photo.jpg" loading="lazy">
-</picture>
-```
-
-Although a browser will decide which image to load from any of the `<source>` elements, the `loading`
-attribute only needs to be included to the fallback `<img>` element.
-
- 
-## Avoid lazy-loading images that are in the first visible viewport 
-
-You should avoid setting `loading=lazy` for any images that are in the first visible viewport.
-
-It is recommended to only add `loading=lazy` to images which are positioned below the fold, if possible. Images that are eagerly loaded can be fetched right away, while images which are loaded lazily the browser currently needs to wait until it knows where the image is positioned on the page, which relies on the IntersectionObserver to be available. 
-
-{% Aside %}
-  In Chromium, the impact of images in the initial viewport being marked with `loading=lazy` on Largest Contentful Paint is fairly small, with a regression of <1% at the 75th and 99th percentiles compared to eagerly loaded images.
-{% endAside %}
-
-Generally, any images within the viewport should be loaded eagerly using the browser's defaults. You do not need to specify `loading=eager` for this to be the case for in-viewport images.
- 
-```html
-<!-- visible in the viewport -->
-<img src="product-1.jpg" alt="..." width="200" height="200">
-<img src="product-2.jpg" alt="..." width="200" height="200">
-<img src="product-3.jpg" alt="..." width="200" height="200">
- 
-<!-- offscreen images -->
-<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
-<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
-<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
-```
-
-## Graceful degredation 
-
-Browsers that do not yet support the `loading` attribute will ignore its presence. While these browsers will of course not get the benefits of lazy-loading, including the attribute has no negative impact on them.
-
-## FAQ
-
-### Are there plans to automatically lazy-load images in Chrome?
-
-Chromium already automatically
-lazy-loads any images that are well suited to being deferred if [Lite
-mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) is enabled on Chrome for Android. This is primarily aimed at users who are conscious about data-savings.
-
-### Can I change how close an image needs to be before a load is triggered?
-
-These values are hardcoded and can't be changed through the API. However, they may change in the
-future as browsers experiment with different threshold distances and variables.
-
-### Can CSS background images take advantage of the `loading` attribute?
-
-No, it can currently only be used with `<img>` tags.
-
-### Is there a downside to lazy-loading images that are within the device viewport?
-
-It is safer to avoid putting `loading=lazy` on above-the-fold images, as Chrome won't preload `loading=lazy` images in the preload scanner.
-
-### How does the `loading` attribute work with images that are in the viewport but not immediately visible (for example: behind a carousel, or hidden by CSS for certain screen sizes)?
-
-Only images that are below the device viewport by the [calculated
-distance](#load-in-distance-threshold) load lazily. All images above the viewport, regardless of
-whether they're immediately visible, load normally.
-
-### What if I'm already using a third-party library or a script to lazy-load images?
-
-The `loading` attribute should not affect code that currently lazy-loads your assets in any way, but
-there are a few important things to consider:
-
-1. If your custom lazy-loader attempts to load images or frames sooner than when Chrome loads them
-   normally—that is, at a distance greater than the [load-in distance threshold](#load-in-distance-threshold)—
-   they are still deferred and load based on normal browser behavior.
-2. If your custom lazy-loader uses a shorter distance to determine when to load a particular image than the browser, then the behavior would conform to your custom settings.
-
-One of the important reasons to continue to use a third-party library along with `loading="lazy"` is
-to provide a polyfill for browsers that do not yet support the attribute.
-
-
-### How do I handle browsers that don't yet support native lazy-loading?
-
-Create a polyfill or use a third-party library to lazy-load images on your site. The `loading`
-property can be used to detect if the feature is supported in the browser:
-
-```js
-if ('loading' in HTMLImageElement.prototype) {
-  // supported in browser
-} else {
-  // fetch polyfill/third-party library
-}
-```
-
-For example, [lazysizes](https://github.com/aFarkas/lazysizes) is a popular JavaScript lazy-loading
-library. You can detect support for the `loading` attribute to load lazysizes as a fallback
-library only when `loading` isn't supported. This works as follows:
-
-- Replace `<img src>` with `<img data-src>` to avoid an eager load in unsupported browsers. If the
-  `loading` attribute is supported, swap `data-src` for `src`.
-- If `loading` is not supported, load a fallback (lazysizes) and initiate it. As per lazysizes docs, you use the
-  `lazyload` class as a way to indicate to lazysizes which images to lazy-load.
-
-```html
-<!-- Let's load this in-viewport image normally -->
-<img src="hero.jpg" alt="…">
-
-<!-- Let's lazy-load the rest of these images -->
-<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
-<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
-<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
-
-<script>
-  if ('loading' in HTMLImageElement.prototype) {
-    const images = document.querySelectorAll('img[loading="lazy"]');
-    images.forEach(img => {
-      img.src = img.dataset.src;
-    });
-  } else {
-    // Dynamically import the LazySizes library
-    const script = document.createElement('script');
-    script.src =
-      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
-    document.body.appendChild(script);
-  }
-</script>
-```
-
-Here's a [demo](https://lazy-loading.firebaseapp.com/lazy_loading_native.html) of this pattern. Try
-it out in a browser like Firefox or Safari to see the fallback in action.
-
-{% Aside %}
-  The lazysizes library also provides a [native loading plugin](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading)
-  that uses native lazy-loading when available but falls back to the library's custom functionality when needed.
-{% endAside %}
-
-### Is lazy-loading for iframes also supported in Chrome?
-
-`<iframe loading=lazy>` was recently standardized and is already implemented in Chromium. This allows you to lazy-load iframes using the `loading` attribute. A dedicated article about iframe lazy-loading will be published on web.dev shortly.
-
-The `loading` attribute affects iframes differently than images, depending on whether the iframe is
-hidden. (Hidden iframes are often used for analytics or communication purposes.) Chrome uses the
-following criteria to determine whether an iframe is hidden:
-
-- The iframe's width and height are 4 px or smaller.
-- `display: none` or `visibility: hidden` is applied.
-- The iframe is placed off-screen using negative X or Y positioning.
-
-If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in
-most cases. Iframes that _aren't_ hidden will only load when they're within the [load-in distance threshold](#load-in-distance-threshold).
-A placeholder shows for lazy-loaded iframes that are still being fetched.
-
-### How does native lazy-loading affect advertisements on a web page?
-
-All ads displayed to the user in the form of an image or iframe lazy-load just
-like any other image or iframe.
-
-### How are images handled when a web page is printed?
-
-Although the functionality isn't in Chrome currently, there's an [open
-issue](https://bugs.chromium.org/p/chromium/issues/detail?id=875403) to ensure that all images and
-iframes are immediately loaded if a page is printed.
-
-### Does Lighthouse recognize native lazy-loading?
-
-Earlier versions of Lighthouse would still highlight that pages using `loading=lazy` on images required a strategy for loading offscreen images. [Lighthouse 6.0](/lighthouse-whats-new-6.0/) and above better factor in approaches for offscreen image lazy-loading that may use different thresholds, allowing them to pass the [Defer offscreen images](/offscreen-images/) audit.
-
-## Conclusion
-
-Baking in native support for lazy-loading images can make it significantly easier for
-you to improve the performance of your web pages.
-
-Are you noticing any unusual behavior with this feature enabled in Chrome? [File a
-bug](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C)!
diff --git a/src/site/content/en/fast/native-lazy-loading/lazysizes-threshold.png b/src/site/content/en/fast/native-lazy-loading/lazysizes-threshold.png
deleted file mode 100644
index 9b04ea9a602..00000000000
Binary files a/src/site/content/en/fast/native-lazy-loading/lazysizes-threshold.png and /dev/null differ
diff --git a/src/site/content/en/fast/native-lazy-loading/range-request.png b/src/site/content/en/fast/native-lazy-loading/range-request.png
deleted file mode 100644
index 896120245d1..00000000000
Binary files a/src/site/content/en/fast/native-lazy-loading/range-request.png and /dev/null differ
diff --git a/src/site/content/en/fast/navigation-and-resource-timing/index.md b/src/site/content/en/fast/navigation-and-resource-timing/index.md
new file mode 100644
index 00000000000..f2f3f7113fc
--- /dev/null
+++ b/src/site/content/en/fast/navigation-and-resource-timing/index.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Assessing loading performance in the field with Navigation Timing and Resource Timing
+subhead: Learn the basics of using the Navigation and Resource Timing APIs to assess loading performance in the field.
+description: Learn the basics of using the Navigation and Resource Timing APIs to assess loading performance in the field.
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/MUBswEscMLnKkCODccWz.jpg
+alt: A photo of a fallow field in late fall, with many hay bales strewn about.
+authors:
+  - jlwagner
+tags:
+  - performance
+  - javascript
+  - metrics
+  - network
+  - blog
+date: 2021-10-08
+updated: 2023-02-20
+---
+
+If you've used connection throttling in the network panel in a browser's developer tools (or [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) in Chrome) to assess loading performance, you know how convenient those tools are for performance tuning. You can quickly measure the impact of performance optimizations with a consistent and stable baseline connection speed. The only problem is that this is synthetic testing, which yields [lab data](/lab-and-field-data-differences/#lab-data), not [field data](/lab-and-field-data-differences/#field-data).
+
+Synthetic testing isn't inherently _bad_, but it's not representative of how fast your website is loading for real users. That requires field data, which you can collect from the Navigation Timing and Resource Timing APIs.
+
+## APIs to help you assess loading performance in the field
+
+Navigation Timing and Resource Timing are two similar APIs with significant overlap that measure two distinct things:
+
+- [Navigation Timing](https://w3c.github.io/navigation-timing/) measures the speed of requests for HTML documents (that is, navigation requests).
+- [Resource Timing](https://w3c.github.io/resource-timing/) measures the speed of requests for document-dependent resources such as CSS, JavaScript, images, and so on.
+
+These APIs expose their data in a _performance entry buffer_, which can be accessed in the browser with JavaScript. There are multiple ways to query a performance buffer, but a common way is by using [`performance.getEntriesByType`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType):
+
+```javascript
+// Get Navigation Timing entries:
+performance.getEntriesByType('navigation');
+
+// Get Resource Timing entries:
+performance.getEntriesByType('resource');
+```
+
+`performance.getEntriesByType` accepts a string describing the type of entries you want to retrieve from the performance entry buffer. `'navigation'` and `'resource'` retrieve timings for the Navigation Timing and Resource Timing APIs, respectively.
+
+{% Aside %}
+Try loading a website and then enter either of the commands in the above code snippet in your browser's console to see actual timings captured by your browser.
+{% endAside %}
+
+The amount of information these APIs provide can be overwhelming, but they're your key to measuring loading performance in the field, as you can gather these timings from users as they visit your website.
+
+## The life and timings of a network request
+
+Gathering and analyzing navigation and resource timings is sort of like archeology in that you're reconstructing the fleeting life of a network request after the fact. Sometimes it helps to visualize concepts, and where network requests are concerned, your browser's developer tools can help.
+
+<figure>
+{% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/BxgZyzAEyFnk846wvzNa.png", alt="A diagram of network timings as shown in Chrome's DevTools. The timings depicted are for request queueing, connection negotiation, the request itself, and the response in color-coded bars.", width="800", height="583" %}
+  <figcaption>A visualization of a network request in the <a href="https://developer.chrome.com/docs/devtools/network/" rel="noopener">network panel of Chrome's DevTools</a></figcaption>
+</figure>
+
+The life of a network request has distinct phases, such as DNS lookup, connection establishment, TLS negotiation, and so on. These timings are represented as a [`DOMHighResTimestamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp). Depending on your browser, the granularity of timings may be down to the microsecond, or be rounded up to milliseconds. Let's examine these phases in detail, and how they relate to Navigation Timing and Resource Timing.
+
+{% Aside %}
+As you read this guide, [this diagram](https://www.w3.org/TR/navigation-timing-2/#processing-model) for both Navigation Timing and Resource Timing may help you to visualize the order of the timings they provide.
+{% endAside %}
+
+### DNS lookup
+
+When a user goes to a URL, the Domain Name System (DNS) is queried to translate a domain to an IP address. This process may take significant time&mdash;time you'll want to measure in the field, even. Navigation Timing and Resource Timing expose two DNS-related timings:
+
+- `domainLookupStart` is when DNS lookup begins.
+- `domainLookupEnd` is when DNS lookup ends.
+
+Calculating total DNS lookup time can be done by subtracting the start metric from the end metric:
+
+```javascript
+// Measuring DNS lookup time
+const [pageNav] = performance.getEntriesByType('navigation');
+const totalLookupTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;
+```
+
+{% Aside 'caution' %}
+You can't _always_ rely on timings to be populated. Timings provided in both APIs will have a value of `0` in some cases. For example, a DNS lookup may be served by a local cache. Additionally, any timings for cross-origin requests may be unavailable if those origins don't set a [`Timing-Allow-Origin` response header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin).
+{% endAside %}
+
+### Connection negotiation
+
+Another contributing factor to loading performance is connection negotiation, which is latency incurred when connecting to a web server. If HTTPS is involved, this process will also include TLS negotiation time. The connection phase consists of three timings:
+
+- `connectStart` is when the browser starts to open a connection to a web server.
+- `secureConnectionStart` marks when the client begins TLS negotiation.
+- `connectEnd` is when the connection to the web server has been established.
+
+Measuring total connection time is similar to measuring total DNS lookup time: you subtract the start timing from the end timing. However, there's an additional `secureConnectionStart` property that may be `0` if HTTPS isn't used or [if the connection is persistent](https://en.wikipedia.org/wiki/HTTP_persistent_connection). If you want to measure TLS negotiation time, you'll need to keep that in mind:
+
+```javascript
+// Quantifying total connection time
+const [pageNav] = performance.getEntriesByType('navigation');
+const connectionTime = pageNav.connectEnd - pageNav.connectStart;
+let tlsTime = 0; // <-- Assume 0 to start with
+
+// Was there TLS negotiation?
+if (pageNav.secureConnectionStart > 0) {
+  // Awesome! Calculate it!
+  tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart;
+}
+```
+
+Once DNS lookup and connection negotiation ends, timings related to fetching documents and their dependent resources come into play.
+
+### Requests and responses
+
+Loading performance is affected by two types of factors:
+
+- **Extrinsic factors:** These are things like latency and bandwidth. Beyond choosing a hosting company and a CDN, they're (mostly) out of our control, as users can access the web from anywhere.
+- **Intrinsic factors:** These are things like server and client-side architectures, as well as resource size and our ability to optimize for those things, which are within our control.
+
+Both types of factors affect loading performance. Timings related to these factors are vital, as they describe how long resources take to download. Both Navigation Timing and Resource Timing describe loading performance with the following metrics:
+
+- `fetchStart` marks when the browser begins to fetch a resource (Resource Timing) or a document for a navigation request (Navigation Timing). This precedes the actual request, and is the point at which the browser is checking caches (for example, HTTP and [`Cache` instances](https://developer.mozilla.org/docs/Web/API/Cache)).
+- `workerStart` marks when a request starts being handled within a service worker's [`fetch` event handler](https://developer.mozilla.org/docs/Web/API/FetchEvent). This will be `0` when no service worker is controlling the current page.
+- `requestStart` is when the browser makes the request.
+- `responseStart` is when the first byte of the response arrives.
+- `responseEnd` is when the last byte of the response arrives.
+
+These timings allow you to measure multiple aspects of loading performance, such as cache lookup within a service worker _and_ download time:
+
+```javascript
+// Cache seek plus response time of the current document
+const [pageNav] = performance.getEntriesByType('navigation');
+const fetchTime = pageNav.responseEnd - pageNav.fetchStart;
+
+// Service worker time plus response time
+let workerTime = 0;
+
+if (pageNav.workerStart > 0) {
+  workerTime = pageNav.responseEnd - pageNav.workerStart;
+}
+```
+
+You can also measure other aspects of request/response latency:
+
+```javascript
+const [pageNav] = performance.getEntriesByType('navigation');
+
+// Request time only (excluding redirects, DNS, and connection/TLS time)
+const requestTime = pageNav.responseStart - pageNav.requestStart;
+
+// Response time only (download)
+const responseTime = pageNav.responseEnd - pageNav.responseStart;
+
+// Request + response time
+const requestResponseTime = pageNav.responseEnd - pageNav.requestStart;
+```
+
+### Other measurements you can make
+
+Navigation Timing and Resource Timing is useful for more than what the examples above outline. Here are some other situations with relevant timings that may be worth exploring:
+
+- **Page redirects:** Redirects are an overlooked source of added latency, especially redirect chains. Latency gets added in a number of ways, such as HTTP-to-HTTPs hops, as well as 302/uncached 301 redirects. The `redirectStart`, `redirectEnd`, and `redirectCount` timings are helpful in assessing redirect latency.
+- **Document unloading:** In pages that run code in an [`unload` event handler](https://developer.mozilla.org/docs/Web/Events/unload), the browser must execute that code before it can navigate to the next page. `unloadEventStart` and `unloadEventEnd` measure document unloading.
+- **Document processing:** Document processing time may not be consequential unless your website sends very large HTML payloads. If this describes your situation, the `domInteractive`, `domContentLoadedEventStart`, `domContentLoadedEventEnd`, and `domComplete` timings may be of interest.
+
+{% Aside 'warning' %}
+Timings related to document unloading and processing are available only in Navigation Timing, as they only apply to navigation requests.
+{% endAside %}
+
+## Acquiring timings in application code
+
+All of the examples shown so far use `performance.getEntriesByType`, but there are other ways to query the performance entry buffer, such as [`performance.getEntriesByName`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName) and [`performance.getEntries`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries). These methods are fine when only light analysis is needed. In other situations, though, they can introduce excessive main thread work by iterating over a large number of entries, or even repeatedly polling the performance buffer to find new entries.
+
+The recommended approach for collecting entries from the performance entry buffer is to use a [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver). `PerformanceObserver` listens for performance entries, and provides them as they're added to the buffer:
+
+```javascript
+// Create the performance observer:
+const perfObserver = new PerformanceObserver((observedEntries) => {
+  // Get all resource entries collected so far:
+  const entries = observedEntries.getEntries();
+
+  // Iterate over entries:
+  for (let i = 0; i < entries.length; i++) {
+    // Do the work!
+  }
+});
+
+// Run the observer for Navigation Timing entries:
+perfObserver.observe({
+  type: 'navigation',
+  buffered: true
+});
+
+// Run the observer for Resource Timing entries:
+perfObserver.observe({
+  type: 'resource',
+  buffered: true
+});
+```
+
+{% Aside %}
+Adding the `buffered` option to a performance observer's `observe` event ensures that performance entries added to the buffer prior to the instantiation of the performance observer are observable.
+{% endAside %}
+
+This method of collecting timings may feel awkward when compared to directly accessing the performance entry buffer, but it's preferable to tying up the main thread with work that doesn't serve a critical and user-facing purpose.
+
+## Phoning home
+
+Once you've collected all the timings you need, you can send them to an endpoint for further analysis. Two ways to do this are with either [`navigator.sendBeacon`](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon) or a [`fetch` with the `keepalive` option](https://developer.mozilla.org/docs/Web/API/fetch) set. Both methods will send a request to a specified endpoint in a non-blocking way, and the request will be queued in a way that outlives the current page session if need be:
+
+```javascript
+// Caution: If you have lots of performance entries, don't
+// do this. This is an example for illustrative purposes.
+const data = JSON.stringify(performance.getEntries()));
+
+// The endpoint to transmit the encoded data to
+const endpoint = '/analytics';
+
+// Check for fetch keepalive support
+if ('keepalive' in Request.prototype) {
+  fetch(endpoint, {
+    method: 'POST',
+    body: data,
+    keepalive: true,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+} else if ('sendBeacon' in navigator) {
+  // Use sendBeacon as a fallback
+  navigator.sendBeacon(endpoint, data);
+}
+```
+
+In this example, the JSON string will arrive in a `POST` payload that you can decode and process/store in an application backend as needed.
+
+## Wrapping up
+
+Once you have metrics collected, it's up to you to figure out how to analyze that field data. When analyzing field data, there are a few general rules to follow to ensure you're drawing meaningful conclusions:
+
+- [Avoid averages](https://www.igvita.com/2016/01/12/the-average-page-is-a-myth/), as they're not representative of any one user's experience, and may be skewed by outliers.
+- Rely on percentiles. In datasets of time-based performance metrics, lower is better. This means that when you prioritize low percentiles, you're only paying attention to the fastest experiences.
+- [Prioritize the long tail of values](https://timkadlec.com/remembers/2018-06-07-prioritizing-the-long-tail-of-performance/). When you prioritize experiences at the 75th percentile or higher, you're putting your focus where it belongs: on the slowest experiences.
+
+This guide isn't meant to be an exhaustive resource on Navigation or Resource Timing, but a starting point. Below are some additional resources you may find helpful:
+
+- [Navigation Timing Spec](https://www.w3.org/TR/navigation-timing-2/).
+- [Resource Timing Spec](https://www.w3.org/TR/resource-timing-2/).
+- [ResourceTiming in Practice](https://nicj.net/resourcetiming-in-practice/).
+- [Navigation Timing API (MDN)](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API)
+- [Resource Timing API (MDN)](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API)
+
+With these APIs and the data they provide, you'll be better equipped to understand how loading performance is experienced by real users, which will give you more confidence in diagnosing and addressing loading performance problems in the field.
diff --git a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-optimized.png b/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-optimized.png
deleted file mode 100644
index 24143d71b61..00000000000
Binary files a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-optimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-unoptimized.png b/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-unoptimized.png
deleted file mode 100644
index 68326bd4a2f..00000000000
Binary files a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/cdt-background-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/index.md b/src/site/content/en/fast/optimize-css-background-images-with-media-queries/index.md
index f08ba781e0c..8af7801eda6 100644
--- a/src/site/content/en/fast/optimize-css-background-images-with-media-queries/index.md
+++ b/src/site/content/en/fast/optimize-css-background-images-with-media-queries/index.md
@@ -4,19 +4,20 @@ title: Optimize CSS background images with media queries
 authors:
   - demianrenzulli
 description: |
-  Use media queries to send images that are only as large as they need to be, 
+  Use media queries to send images that are only as large as they need to be,
   a technique commonly known as responsive images.
 date: 2020-03-05
-updated: 2020-03-05
+updated: 2022-08-18
 tags:
   - performance
+  - web-vitals
 ---
 
 Many sites request heavy resources, like images, that are not optimized for certain screens, and send large CSS files containing styles that some devices will never use. Using media queries is a popular technique for delivering tailored stylesheets and assets to different screens to reduce the amount of data transferred to users and improve page load performance. This guide shows you how to use media queries to send images that are only as large as they need to be, a technique commonly known as **responsive images**.
 
 ## Prerequisites
 
-This guide assumes that you're familiar with [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools). You can use another browser's DevTools instead if you prefer. You'll just need to map the Chrome DevTools screenshots in this guide back to the relevant features in your browser of choice.
+This guide assumes that you're familiar with [Chrome DevTools](https://developer.chrome.com/docs/devtools/). You can use another browser's DevTools instead if you prefer. You'll just need to map the Chrome DevTools screenshots in this guide back to the relevant features in your browser of choice.
 
 ## Understand responsive background images
 
@@ -27,14 +28,13 @@ First, analyze the network traffic of the unoptimized demo:
 {% Instruction 'reload-page', 'ol' %}
 
 {% Aside %}
-Check out [Inspect Network Activity With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/network/) if you need more help with DevTools.
+Check out [Inspect Network Activity With Chrome DevTools](https://developer.chrome.com/docs/devtools/network/) if you need more help with DevTools.
 {% endAside %}
 
 You'll see that the only image that's being requested is `background-desktop.jpg`, which has a size of **1006KB**:
 
 <figure>
-  <img src="./cdt-background-unoptimized.png"
-       alt="DevTools network trace for the unoptimized background image." class="w-screenshot">
+  {% Img src="image/admin/K8P4MHp2FSnZYTw3ZVkG.png", alt="DevTools network trace for the unoptimized background image.", width="800", height="126" %}
 </figure>
 
 Resize the browser window and notice that the Network Log isn't showing any new requests being made by the page. This means that the same image background is being used for all screen sizes.
@@ -42,11 +42,11 @@ Resize the browser window and notice that the Network Log isn't showing any new
 You can see the styles that control the background image in [style.css](https://use-media-queries-unoptimized.glitch.me/style.css):
 
 ```css
-body { 
-  background-position: center center; 
-  background-attachment: fixed; 
-  background-repeat: no-repeat; background-size: cover; 
-  background-image: url(images/background-desktop.jpg); 
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
 }
 ```
 
@@ -54,7 +54,7 @@ Here's the meaning of each of the properties used:
 
 - `background-position: center center`: Center the image vertically and horizontally.
 - `background-repeat: no-repeat`: Show the image only once.
-- `background-attachment: fixed`: Avoid making the background image scroll.   
+- `background-attachment: fixed`: Avoid making the background image scroll.
 - `background-size: cover`: Resize the image to cover the entire container.
 - `background-image: url(images/background-desktop.jpg)`: The URL of the image.
 
@@ -69,19 +69,19 @@ In the next section, you'll learn how to apply an optimization to load different
 
 ## Use media queries
 
-Using media queries is a common technique to declare stylesheets that will only apply to certain media or device types. They are implemented by using [@media rules](https://developer.mozilla.org/en-US/docs/Web/CSS/@media), which let you define a set of breakpoints, where specific styles are defined. 
+Using media queries is a common technique to declare stylesheets that will only apply to certain media or device types. They are implemented by using [@media rules](https://developer.mozilla.org/docs/Web/CSS/@media), which let you define a set of breakpoints, where specific styles are defined.
 When the conditions defined by the `@media` rule are met (for example, a certain screen width), the group of styles defined inside the breakpoint will be applied.
 
 The following steps can be used to apply media queries to [the site](https://use-media-queries-unoptimized.glitch.me/) so that different images are used, depending on the maximum width of the device requesting the page.
 
-- In `style.css` remove the line that contains the background image URL: 
+- In `style.css` remove the line that contains the background image URL:
 
 ```css//4
-body { 
-  background-position: center center; 
-  background-attachment: fixed; 
-  background-repeat: no-repeat; background-size: cover; 
-  background-image: url(images/background-desktop.jpg); 
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
 }
 ```
 
@@ -120,7 +120,7 @@ For desktop devices:
 Open the optimized version of [style.css](https://use-media-queries-optimized.glitch.me/style.css) in your browser to see the changes made.
 
 {% Aside %}
-The images used in the optimized demo are already resized to fit into different screen sizes. Showing how to resize images is out of the scope of this guide, but if you want to know more about this, the [Serve responsive images guide](https://web.dev/serve-responsive-images/) covers some useful tools, like the [sharp npm package](https://www.npmjs.com/package/sharp) and the [ImageMagick CLI](https://www.imagemagick.org/script/index.php).
+The images used in the optimized demo are already resized to fit into different screen sizes. Showing how to resize images is out of the scope of this guide, but if you want to know more about this, the [Serve responsive images guide](/serve-responsive-images/) covers some useful tools, like the [sharp npm package](https://www.npmjs.com/package/sharp) and the [ImageMagick CLI](https://www.imagemagick.org/script/index.php).
 {% endAside %}
 
 ## Measure for different devices
@@ -139,14 +139,21 @@ When the width of the browser screen is changed, new images are requested.
 In particular when the width is below the value defined in the mobile breakpoint (480px), you see the following Network Log:
 
 <figure>
-  <img src="./cdt-background-optimized.png"
-       alt="DevTools network trace for the optimized background image." class="w-screenshot">
+  {% Img src="image/admin/jd2kHIefYf91udpFEmvx.png", alt="DevTools network trace for the optimized background image.", width="800", height="125" %}
 </figure>
 
 The size of the new mobile background is **67% smaller** than the desktop one.
 
+## Effects on Largest Contentful Paint (LCP)
+
+Elements with CSS background images are considered a candidate for [Largest Contentful Paint (LCP)](/lcp/), however, CSS background images [are not discoverable by the browser preload scanner](/preload-scanner/#css-background-images), which means you could be delaying your site's LCP if you're not careful.
+
+The first option you should consider is whether your LCP candidate image could work in an `<img>` element with `srcset` and `sizes` attributes for responsiveness. The browser preload scanner _will_ discover `<img>` elements, and send requests for them while the parser is blocked on rendering.
+
+If you can't (or don't want to) avoid using a CSS background image, the second option would be to [preload responsive images](/preload-responsive-images/) to ensure you preload the right image for the proper viewport size. The `<link>` elements `media`, `imagesrcset`, and `imagesizes` attributes hint to the browser that a given resource hint only applies in certain viewport conditions, avoiding multiple wasted preloads when you only want to load the one resource that's a fit for the current viewport.
+
 ## Summary
 
 In this guide you've learned to apply media queries to request background images tailored to specific screen sizes and save bytes when accessing the site on smaller devices, like mobile phones.
-You used the `@media` rule to implement a responsive background. This technique is widely supported by all browsers. 
-A new CSS feature: [image-set()](https://drafts.csswg.org/css-images-4/#image-set-notation), can be used for the same purpose with fewer lines of code. At the time of this writing, this feature is not supported in all browsers, but you might want to keep an eye on how adoption evolves, as it can represent an interesting alternative to this technique.
+You used the `@media` rule to implement a responsive background. This technique is widely supported by all browsers.
+A new CSS feature: [image-set()](https://www.w3.org/TR/css-images-4/#image-set-notation), can be used for the same purpose with fewer lines of code. At the time of this writing, this feature is not supported in all browsers, but you might want to keep an eye on how adoption evolves, as it can represent an interesting alternative to this technique.
diff --git a/src/site/content/en/fast/optimize-webfont-loading/font-crp.png b/src/site/content/en/fast/optimize-webfont-loading/font-crp.png
deleted file mode 100644
index ae94d0067d2..00000000000
Binary files a/src/site/content/en/fast/optimize-webfont-loading/font-crp.png and /dev/null differ
diff --git a/src/site/content/en/fast/optimize-webfont-loading/index.md b/src/site/content/en/fast/optimize-webfont-loading/index.md
index f0090acf1e7..f0e76b39d43 100644
--- a/src/site/content/en/fast/optimize-webfont-loading/index.md
+++ b/src/site/content/en/fast/optimize-webfont-loading/index.md
@@ -10,6 +10,8 @@ description: |
 tags:
   - performance
   - fonts
+feedback:
+  - api
 ---
 
 A "full" WebFont that includes all stylistic variants,
@@ -30,23 +32,23 @@ it can also create a performance bottleneck in the critical rendering path and d
 
 ### The default behavior
 
-Lazy loading of fonts carries an important hidden implication that may delay text rendering:
-the browser must [construct the render tree](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction),
+Lazy loading of fonts carries an important hidden implication that may delay text rendering.
+The browser must [construct the render tree](/critical-rendering-path-render-tree-construction/),
 which is dependent on the DOM and CSSOM trees,
-before it knows which font resources it needs in order to render the text.
+before it knows which font resources it needs to render the text.
 As a result, font requests are delayed well after other critical resources,
 and the browser may be blocked from rendering text until the resource is fetched.
 
-<img src="./font-crp.png"  alt="Font critical rendering path">
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="Font critical rendering path", width="800", height="303" %}
 
 1. The browser requests the HTML document.
-1. The browser begins parsing the HTML response and constructing the DOM.
-1. The browser discovers CSS, JS, and other resources and dispatches requests.
-1. The browser constructs the CSSOM after all of the CSS content is received and combines it with
+2. The browser begins parsing the HTML response and constructing the DOM.
+3. The browser discovers CSS, JS, and other resources and dispatches requests.
+4. The browser constructs the CSSOM after all of the CSS content is received and combines it with
 the DOM tree to construct the render tree.
     - Font requests are dispatched after the render tree indicates which font variants are needed to
     render the specified text on the page.
-1. The browser performs layout and paints content to the screen.
+5. The browser performs layout and paints content to the screen.
     - If the font is not yet available, the browser may not render any text pixels.
     - After the font is available, the browser paints the text pixels.
 
@@ -61,7 +63,7 @@ you can prevent blank pages and layout shifts due to font loading.
 ### Preload your WebFont resources
 
 If there's a high probability that your page will need a specific WebFont hosted at a URL you know in advance,
-you can take advantage of [resource prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization).
+you can take advantage of [resource prioritization](/prioritize-resources/).
 Using `<link rel="preload">` will trigger a request for the WebFont early in the critical rendering path,
 without having to wait for the CSSOM to be created.
 
@@ -73,7 +75,9 @@ You still need to consider how browsers behave when rendering text that uses a `
 
 In the post [Avoid invisible text during font loading](/avoid-invisible-text/) you can see that default browser behavior is not consistent.
 However, you can tell modern browsers how you want them to behave by using
-[`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display).
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display).
+
+{% BrowserCompat 'css.at-rules.font-face.font-display' %}
 
 Similar to the existing font timeout behaviors that some browsers implement,
 `font-display` segments the lifetime of a font download into three major periods:
@@ -121,9 +125,9 @@ To work with the `font-display` property, add it to your `@font-face` rules:
 
 For more information on preloading fonts, and the `font-display` property, see the following posts:
 
-- [Avoid invisible text during font loading](https://web.dev/avoid-invisible-text/)
-- [Controlling font performance using font-display](https://developers.google.com/web/updates/2016/02/font-display)
-- [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts](https://web.dev/preload-optional-fonts/)
+- [Avoid invisible text during font loading](/avoid-invisible-text/)
+- [Controlling font performance using font-display](https://developer.chrome.com/blog/font-display/)
+- [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts](/preload-optional-fonts/)
 
 ### The Font Loading API
 
@@ -137,6 +141,8 @@ track their download progress, and override their default lazyload behavior.
 For example, if you're sure that a particular font variant is required,
 you can define it and tell the browser to initiate an immediate fetch of the font resource:
 
+{% BrowserCompat 'api.FontFace' %}
+
 ```javascript
 var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
   style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
@@ -183,14 +189,14 @@ albeit with even more overhead from an additional JavaScript dependency.
 
 Font resources are, typically, static resources that don't see frequent updates.
 As a result, they are ideally suited for a long max-age expiry&mdash;
-ensure that you specify both a [conditional ETag header](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags),
-and an [optimal Cache-Control policy](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control) for all font resources.
+ensure that you specify both a [conditional ETag header](/http-cache/),
+and an [optimal Cache-Control policy](/http-cache/) for all font resources.
 
-If your web application uses a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/),
-serving font resources with a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network) is appropriate for most use cases.
+If your web application uses a [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/),
+serving font resources with a [cache-first strategy](/offline-cookbook/#cache-then-network) is appropriate for most use cases.
 
-You should not store fonts using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
-or [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API);
+You should not store fonts using [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+or [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API);
 each of those has its own set of performance issues.
 The browser's HTTP cache provides the best and most robust mechanism to deliver font resources to the browser.
 
@@ -207,11 +213,11 @@ worker, a cache-first strategy is appropriate.
 
 ## Automated testing for WebFont loading behavior with Lighthouse
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse)
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
 can help automate the process of making sure that you're following web font optimization best practices.
 
 The following audits can help you make sure that your pages are continuing to follow web font optimization best practices over time:
 
-* [Preload key requests](https://web.dev/uses-rel-preload/)
-* [Uses inefficient cache policy on static assets](https://web.dev/uses-long-cache-ttl/)
-* [All text remains visible during WebFont loads](https://web.dev/font-display/)
+* [Preload key requests](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+* [Uses inefficient cache policy on static assets](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+* [All text remains visible during WebFont loads](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/en/fast/performance-budgets-101/index.md b/src/site/content/en/fast/performance-budgets-101/index.md
index 75dcac8e5f2..4896c0b1640 100644
--- a/src/site/content/en/fast/performance-budgets-101/index.md
+++ b/src/site/content/en/fast/performance-budgets-101/index.md
@@ -32,25 +32,25 @@ We've already mentioned a few things you can include in a performance budget suc
 * Maximum size of scripts, including frameworks
 * Total number of external resources, such as third-party scripts
 
-However, these numbers don't tell you much about the user experience. Two pages with the same number of requests or same weight can render differently depending on the order in which resources get requested. If a [critical resource](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) like a hero image or a stylesheet on one of the pages is loaded late in the process, the users will wait longer to see something useful and perceive the page as slower. If on the other page the most important parts load quickly, they may not even notice if the rest of the page doesn't.
+However, these numbers don't tell you much about the user experience. Two pages with the same number of requests or same weight can render differently depending on the order in which resources get requested. If a [critical resource](/critical-rendering-path/) like a hero image or a stylesheet on one of the pages is loaded late in the process, the users will wait longer to see something useful and perceive the page as slower. If on the other page the most important parts load quickly, they may not even notice if the rest of the page doesn't.
 
-<figure class="w-figure">
-  <img src="./progressive-page-rendering.png" alt="Image of progressive page rendering based on the critical-path" class="w-screenshot">
+<figure>
+  {% Img src="image/admin/U0QhA82KFyED4r1y3tAq.png", alt="Image of progressive page rendering based on the critical-path", width="611", height="300" %}
 </figure>
 
 This is why it's important to keep track of another type of metric.
 
 ### Milestone timings ⏱️
 
-Milestone timings mark events that happen during page load, such as [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) or [load](https://developer.mozilla.org/en-US/docs/Web/Events/load) event. The most useful timings are [user-centric performance metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics) that tell you something about the experience of loading a page. These metrics are available through [browser APIs](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#measuring_these_metrics_on_real_users_devices) and as part of [Lighthouse](https://developers.google.com/web/tools/lighthouse/) reports.
+Milestone timings mark events that happen during page load, such as [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) or [load](https://developer.mozilla.org/docs/Web/Events/load) event. The most useful timings are [user-centric performance metrics](/user-centric-performance-metrics/) that tell you something about the experience of loading a page. These metrics are available through [browser APIs](/user-centric-performance-metrics/#in-the-field) and as part of [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) reports.
 
-[First Contentful Paint (FCP)](/first-contentful-paint) measures when the browser displays the first bit of content from the DOM, like text or images.
+[First Contentful Paint (FCP)](/fcp/) measures when the browser displays the first bit of content from the DOM, like text or images.
 
-[Time to Interactive (TTI)](/interactive) measures how long it takes for a page to become fully interactive and reliably respond to user input. It's a very important metric to track if you expect any kind of user interaction on the page like clicking links, buttons, typing or using form elements.
+[Time to Interactive (TTI)](/tti/) measures how long it takes for a page to become fully interactive and reliably respond to user input. It's a very important metric to track if you expect any kind of user interaction on the page like clicking links, buttons, typing or using form elements.
 
 ### Rule-based metrics 💯
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) and [WebPageTest](https://www.webpagetest.org/) calculate [performance scores](https://developers.google.com/web/tools/lighthouse/scoring#perf-scoring) based on general best practice rules, that you can use as guidelines. As a bonus, Lighthouse also offers you hints for simple optimizations.
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and [WebPageTest](https://www.webpagetest.org/) calculate [performance scores](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/#perf-scoring) based on general best practice rules, that you can use as guidelines. As a bonus, Lighthouse also offers you hints for simple optimizations.
 
 You'll get the best results if you keep track of a combination of quantity-based and user-centric performance metrics. Focus on asset sizes in the early phases of a project and start tracking FCP and TTI as soon as possible.
 
@@ -61,7 +61,7 @@ The only way to really know what works best for your site is to try it—researc
 If you don't have time for that, here are good default numbers to get you started:
 
 * Under **5 s** Time to Interactive
-* Under **170 KB** of [critical-path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) resources (compressed/minified)
+* Under **170 KB** of [critical-path](/critical-rendering-path/) resources (compressed/minified)
 
 These [numbers](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) are calculated based on real-world baseline devices and **3G network speed**. [Over half of the internet traffic](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/) today happens on mobile networks, so you should use 3G network speed as a starting point.
 
@@ -76,7 +76,7 @@ You should have a budget in place for different types of pages on your site sinc
 
 ## Add performance budgets to your build process
 
-![Webpack, bundlesize and Lighthouse logos](./performance-budgeting-tools.png)
+{% Img src="image/admin/YKJcgI9Yd8qEZM0nzPuv.png", alt="Webpack, bundlesize and Lighthouse logos", width="800", height="267" %}
 
 Choosing a tool for this will depend a lot on the scale of your project and resources that you can dedicate to the task. There are a few open-source tools that can help you add budgeting to your build process:
 
@@ -92,7 +92,7 @@ If something goes over a defined threshold, you can either:
 
 ## Track performance
 
-Making sure your site is fast enough means you have to keep measuring after the initial launch. Monitoring these metrics over time and [getting data from real users](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/) will show you how changes in performance impact key business metrics.
+Making sure your site is fast enough means you have to keep measuring after the initial launch. Monitoring these metrics over time and [getting data from real users](/navigation-and-resource-timing/) will show you how changes in performance impact key business metrics.
 
 ## Wrap up
 
diff --git a/src/site/content/en/fast/performance-budgets-101/performance-budgeting-tools.png b/src/site/content/en/fast/performance-budgets-101/performance-budgeting-tools.png
deleted file mode 100644
index bd5b03f3e17..00000000000
Binary files a/src/site/content/en/fast/performance-budgets-101/performance-budgeting-tools.png and /dev/null differ
diff --git a/src/site/content/en/fast/performance-budgets-101/progressive-page-rendering.png b/src/site/content/en/fast/performance-budgets-101/progressive-page-rendering.png
deleted file mode 100644
index fef41af0eea..00000000000
Binary files a/src/site/content/en/fast/performance-budgets-101/progressive-page-rendering.png and /dev/null differ
diff --git a/src/site/content/en/fast/preload-critical-assets/console-warning.png b/src/site/content/en/fast/preload-critical-assets/console-warning.png
deleted file mode 100755
index 798b98ad293..00000000000
Binary files a/src/site/content/en/fast/preload-critical-assets/console-warning.png and /dev/null differ
diff --git a/src/site/content/en/fast/preload-critical-assets/index.md b/src/site/content/en/fast/preload-critical-assets/index.md
index e7ad42ac013..66755053ae7 100644
--- a/src/site/content/en/fast/preload-critical-assets/index.md
+++ b/src/site/content/en/fast/preload-critical-assets/index.md
@@ -4,18 +4,21 @@ title: Preload critical assets to improve loading speed
 authors:
   - houssein
   - mihajlija
+  - jlwagner
 description: |
   As soon as you open any web page, the browser requests an HTML document from a
   server, parses the contents of the HTML file, and submits separate requests
   for any other external references. The critical request chain represents the
   order of resources that are prioritized and fetched by the browser.
 date: 2018-11-05
-updated: 2020-05-27
+updated: 2020-08-01
 codelabs:
   - codelab-preload-critical-assets
   - codelab-preload-web-fonts
 tags:
   - performance
+feedback:
+  - api
 ---
 
 When you open a web page, the browser requests the HTML document from a server, parses its contents, and submits separate requests for any referenced resources. As a developer, you already know about all the resources your page needs and which of them are the most important. You can use that knowledge to request the critical resources ahead of time and speed up the loading process. This post explains how to achieve that with `<link rel="preload">`.
@@ -24,21 +27,21 @@ When you open a web page, the browser requests the HTML document from a server,
 
 Preloading is best suited for resources typically discovered late by the browser.
 
-<figure class="w-figure">
-<img src="./network-waterfall-before.png" alt="Screenshot of Chrome DevTools Network panel.">
-<figcaption class="w-figcaption">In this example, Pacifico font is defined in the stylesheet with a <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a> rule. The browser loads the font file only after it has finished downloading and parsing the stylesheet.</figcaption>
+<figure>
+{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Screenshot of Chrome DevTools Network panel.", width="701", height="509" %}
+<figcaption>In this example, Pacifico font is defined in the stylesheet with a <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a> rule. The browser loads the font file only after it has finished downloading and parsing the stylesheet.</figcaption>
 </figure>
 
 By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.
 
-<figure class="w-figure">
-<img src="./network-waterfall-after.png" alt="Screenshot of Chrome DevTools Network panel after applying preloading.">
-<figcaption class="w-figcaption">In this example, Pacifico font is preloaded, so the download happens in parallel with the stylesheet.</figcaption>
+<figure>
+{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="Screenshot of Chrome DevTools Network panel after applying preloading.", width="701", height="509" %}
+<figcaption>In this example, Pacifico font is preloaded, so the download happens in parallel with the stylesheet.</figcaption>
 </figure>
 
-The critical request chain represents the order of resources that are prioritized and fetched by the browser. Lighthouse identifies assets that are on the third level of this chain as late-discovered. You can use the [**Preload key requests**](/uses-rel-preload) audit to identify which resources to preload.
+The critical request chain represents the order of resources that are prioritized and fetched by the browser. Lighthouse identifies assets that are on the third level of this chain as late-discovered. You can use the [**Preload key requests**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) audit to identify which resources to preload.
 
-<img class="w-screenshot" src="./preload-requests.png" alt="Lighthouse's preload key requests audit.">
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="Lighthouse's preload key requests audit.", width="745", height="97" %}
 
 You can preload resources by adding a `<link>` tag with `rel="preload"` to the head of your HTML document:
 
@@ -49,17 +52,18 @@ You can preload resources by adding a `<link>` tag with `rel="preload"` to the h
 The browser caches preloaded resources so they are available immediately when needed. (It doesn't execute the scripts or apply the stylesheets.)
 
 {% Aside %}
-After implementing preloading, many sites, including [Shopify, Financial Times and Treebo, saw 1-second improvements](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) in user-centric metrics such as [Time to Interactive](/interactive) and [First Contentful Paint](/first-contentful-paint).
+After implementing preloading, many sites, including [Shopify, Financial Times and Treebo, saw 1-second improvements](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) in user-centric metrics such as [Time to Interactive](/tti/) and [First Contentful Paint](/fcp/).
 {% endAside %}
 
 Resource hints, for example, [`preconnect`](/preconnect-and-dns-prefetch)and [`prefetch`](/link-prefetch), are executed as the browser sees fit. The `preload`, on the other hand, is mandatory for the browser. Modern browsers are already pretty good at prioritizing resources, that's why it's important to use `preload` sparingly and only preload the most critical resources.
 
 Unused preloads trigger a Console warning in Chrome, approximately 3 seconds after the `load` event.
 
-<img class="w-screenshot" src="./console-warning.png" alt="Chrome DevTools Console warning about unused preloaded resources.">
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="Chrome DevTools Console warning about unused preloaded resources.", width="800", height="228" %}
 
 {% Aside %}
-[`preload` is supported](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Browser_compatibility) in all modern browsers except Firefox.
+`preload` is supported  in all modern browsers.
+{% BrowserCompat 'html.elements.link.rel.preload' %}
 {% endAside %}
 
 ## Use cases
@@ -81,7 +85,7 @@ If you are using the [critical CSS approach](/extract-critical-css), you split y
 
 ### Preloading JavaScript files
 
-Because browsers don't execute preloaded files, preloading is useful to separate fetching from [execution](/bootup-time) which can improve metrics such as Time to Interactive. Preloading works best if you [split](/reduce-javascript-payloads-with-code-splitting) your JavaScript bundles and only preload critical chunks.
+Because browsers don't execute preloaded files, preloading is useful to separate fetching from [execution](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/) which can improve metrics such as Time to Interactive. Preloading works best if you [split](/reduce-javascript-payloads-with-code-splitting) your JavaScript bundles and only preload critical chunks.
 
 ## How to implement rel=preload
 
@@ -93,14 +97,14 @@ The simplest way to implement `preload` is to add a `<link>` tag to the `<head>`
 </head>
 ```
 
-Supplying the `as` attribute helps the browser set the priority of the prefetched resource according to its type, set the right headers, and determine whether the resource already exists in the cache. Accepted values for this attribute include: `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes).
+Supplying the `as` attribute helps the browser set the priority of the prefetched resource according to its type, set the right headers, and determine whether the resource already exists in the cache. Accepted values for this attribute include: `script`, `style`, `font`, `image`, and [others](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
 
 {% Aside %}
 Take a look at the [Chrome Resource Priorities and Scheduling](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) document to learn more about how the browser prioritizes different types of resources.
 {% endAside %}
 
 {% Aside 'caution' %}
-Omitting the `as` attribute, or having an invalid value is equivalent to an [XHR request,](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) where the browser doesn't know what it is fetching so it can't determine the correct priority. It can also cause some resources, such as scripts, to be fetched twice.
+Omitting the `as` attribute, or having an invalid value is equivalent to an [XHR request,](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) where the browser doesn't know what it is fetching so it can't determine the correct priority. It can also cause some resources, such as scripts, to be fetched twice.
 {% endAside %}
 
 Some types of resources, such as fonts, are loaded in [anonymous mode](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements). For those you must set the `crossorigin` attribute with `preload`:
@@ -113,13 +117,13 @@ Some types of resources, such as fonts, are loaded in [anonymous mode](https://w
 Fonts preloaded without the `crossorigin` attribute will be fetched twice!
 {% endAside %}
 
-`<link>` elements also accept a [`type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-type), which contains the [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) of the linked resource. The browsers use the value of the `type` attribute to make sure that resources get preloaded only if their file type is supported. If a browser doesn't support the specified resource type, it will ignore the `<link rel="preload">`.
+`<link>` elements also accept a [`type` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-type), which contains the [MIME type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) of the linked resource. The browsers use the value of the `type` attribute to make sure that resources get preloaded only if their file type is supported. If a browser doesn't support the specified resource type, it will ignore the `<link rel="preload">`.
 
 {% Aside 'codelab' %}
 [Improve the performance of a page by preloading web fonts](/codelab-preload-web-fonts).
 {% endAside %}
 
-You can also preload any type of resource via the [`Link` HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link):
+You can also preload any type of resource via the [`Link` HTTP header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link):
 
 `Link: </css/style.css>; rel="preload"; as="style"`
 
@@ -135,6 +139,36 @@ import(_/* webpackPreload: true */_ "CriticalChunk")
 
 If you are using an older version of webpack, use a third-party plugin such as [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin).
 
+## Effects of preloading on Core Web Vitals
+
+Preloading is a powerful performance optimization that has an effect on loading speed. Such optimizations can lead to changes in your site's [Core Web Vitals](/vitals/), and it's important to be aware them.
+
+### Largest Contentful Paint (LCP)
+
+Preloading has a powerful effect on [Largest Contentful Paint (LCP)](/lcp/) when it comes to fonts and images, as both images and text nodes can be [LCP candidates](/lcp/#what-elements-are-considered). Hero images and large runs of text that are rendered using web fonts can benefit significantly from a well-placed preload hint, and should be used when there are opportunities to deliver these important bits of content to the user faster.
+
+However, you want to be careful when it comes to preloading&mdash;and other optimizations! In particular, avoid preloading too many resources. If too many resources are prioritized, effectively none of them are. The effects of excessive preload hints will be especially detrimental to those on slower networks where bandwidth contention will be more evident.
+
+Instead, focus on a few high-value resources that you know will benefit from a well-placed preload. When preloading fonts, ensure that you're serving fonts in WOFF 2.0 format to reduce resource load time as much as possible. Since WOFF 2.0 has [excellent browser support](https://caniuse.com/woff2), using older formats such as WOFF 1.0 or TrueType (TTF) will delay your LCP if the LCP candidate is a text node.
+
+When it comes to LCP and JavaScript, you'll want to ensure that you're sending complete markup from the server in order for the [browser's preload scanner](/preload-scanner/) to work properly. If you're serving up an experience that relies entirely on JavaScript to render markup and can't send server-rendered HTML, it would be advantageous to step in where the browser preload scanner can't and preload resources that would only otherwise be discoverable when the JavaScript finishes loading and executing.
+
+### Cumulative Layout Shift (CLS)
+
+[Cumulative Layout Shift (CLS)](/cls/) is an especially important metric where web fonts are concerned, and CLS has significant interplay with web fonts that use the [`font-display` CSS property](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) to manage how fonts are loaded. To minimize web font-related layout shifts, consider the following strategies:
+
+1. **Preload fonts while using the default `block` value for `font-display`.** This is a delicate balance. Blocking the display of fonts without a fallback can be considered a user experience problem. On one hand, loading fonts with `font-display: block;` eliminates web font-related layout shifts. On the other hand, you still want to get those web fonts loaded as soon as possible if they're crucial to the user experience. Combining a preload with `font-display: block;` may be an acceptable compromise.
+2. **Preload fonts while using the `fallback` value for `font-display`.** `fallback` is a compromise between `swap` and `block`, in that it has an extremely short blocking period.
+3. **Use the `optional` value for `font-display` without a preload.** If a web font isn't crucial to the user experience, but it is still used to render a significant amount of page text, consider using the `optional` value. In adverse conditions, `optional` will display page text in a fallback font while it loads the font in the background for the next navigation. The net result in these conditions is improved CLS, as system fonts will render immediately, while subsequent page loads will load the font immediately without layout shifts.
+
+CLS is a difficult metric to optimize for when it comes to web fonts. As always, experiment in the [lab](/lab-and-field-data-differences/#lab-data), but trust your [field data](/lab-and-field-data-differences/#field-data) to determine if your font loading strategies are improving CLS or making it worse.
+
+### Responsiveness metrics
+
+[First Input Delay (FID)](/fid/) and [Interaction to Next Paint](/inp/) are two metrics that gauge responsiveness to user input. Since the lion's share of interactivity on the web is driven by JavaScript, preloading JavaScript that powers important interactions may help to keep your FID and INP metrics as low as they can possibly be. However, be aware that FID is a load responsiveness metric and INP observes interactions throughout the entire page lifecycle&mdash;including during startup. Preloading too much JavaScript during startup can carry unintended negative consequences if too many resources are contending for bandwidth.
+
+You'll also want to be careful about how you go about [code splitting](/reduce-javascript-payloads-with-code-splitting/). Code splitting is an excellent optimization for reducing the amount of JavaScript loaded during startup, but interactions can be delayed if they rely on JavaScript loaded right at the start of the interaction. To compensate for this, you'll need to examine the user's intent, and inject a preload for the necessary chunk(s) of JavaScript before the interaction takes place. One example could be preloading JavaScript required for validating a form's contents when any of the fields in the form are focused.
+
 ## Conclusion
 
 To improve page speed, preload important resources that are discovered late by the browser. Preloading everything would be counterproductive so use `preload` sparingly and [measure the impact in the real-world](/fast#measure-performance-in-the-field).
diff --git a/src/site/content/en/fast/preload-critical-assets/network-waterfall-after.png b/src/site/content/en/fast/preload-critical-assets/network-waterfall-after.png
deleted file mode 100755
index 7488e8a367d..00000000000
Binary files a/src/site/content/en/fast/preload-critical-assets/network-waterfall-after.png and /dev/null differ
diff --git a/src/site/content/en/fast/preload-critical-assets/network-waterfall-before.png b/src/site/content/en/fast/preload-critical-assets/network-waterfall-before.png
deleted file mode 100755
index 972e627b0d0..00000000000
Binary files a/src/site/content/en/fast/preload-critical-assets/network-waterfall-before.png and /dev/null differ
diff --git a/src/site/content/en/fast/preload-critical-assets/preload-requests.png b/src/site/content/en/fast/preload-critical-assets/preload-requests.png
deleted file mode 100644
index ffad95e22ff..00000000000
Binary files a/src/site/content/en/fast/preload-critical-assets/preload-requests.png and /dev/null differ
diff --git a/src/site/content/en/fast/prioritize-resources/index.md b/src/site/content/en/fast/prioritize-resources/index.md
index 0c3ee5f9af3..cce9f2375aa 100644
--- a/src/site/content/en/fast/prioritize-resources/index.md
+++ b/src/site/content/en/fast/prioritize-resources/index.md
@@ -9,12 +9,13 @@ date: 2018-08-17
 updated: 2020-08-05
 tags:
   - performance
+feedback:
+  - api
 ---
 
 Not every byte that is sent down the wire to the browser has the same degree of importance,
 and the browser knows this.
-Browsers have heuristics that attempt to make a best-guess at the most important resources to load first
-— such as CSS before scripts and images.
+Browsers have heuristics that attempt to make a best-guess at the most important resources to load first—such as CSS before scripts and images.
 
 That said, as with any heuristic, it doesn't always work out;
 the browser might make the wrong decision,
@@ -29,19 +30,18 @@ So, for example, a `<script>` tag in your page's `<head>` would be loaded in Chr
 but that priority would change to **Low** if it has the `async` attribute (meaning it can be loaded and run asynchronously).
 
 Priorities become important when investigating loading performance in your site.
-Beyond the usual techniques of [measuring](/web/fundamentals/performance/critical-rendering-path/measure-crp)
-and [analyzing the critical rendering path](/web/fundamentals/performance/critical-rendering-path/analyzing-crp),
+Beyond the usual techniques of [measuring](/critical-rendering-path-measure-crp/)
+and [analyzing the critical rendering path](/critical-rendering-path-analyzing-crp/),
 it's useful to know Chrome's priority for each resource.
 You can find that in the **Network** panel in Chrome DevTools.
 Here's what it looks like:
 
 
-<figure class="w-figure">
-    <img src="./res-prio-priorities.png" class="w-screenshot"
-    alt="An example of how priorities are displayed in Chrome Developer Tools">
+<figure>
+    {% Img src="image/admin/oqcdfVAVj2RajVWfs6ap.png", alt="An example of how priorities are displayed in Chrome Developer Tools", width="800", height="249" %}
   <figcaption>
     The <b>Priority</b> column, which is hidden by default (see
-    <a href="https://developers.google.com/web/tools/chrome-devtools/network/reference#columns">
+    <a href="https://developer.chrome.com/docs/devtools/network/reference/#columns">
       Add or remove columns
     </a>.
   </figcaption>
diff --git a/src/site/content/en/fast/prioritize-resources/res-prio-priorities.png b/src/site/content/en/fast/prioritize-resources/res-prio-priorities.png
deleted file mode 100644
index a16568bcb55..00000000000
Binary files a/src/site/content/en/fast/prioritize-resources/res-prio-priorities.png and /dev/null differ
diff --git a/src/site/content/en/fast/publish-modern-javascript/index.md b/src/site/content/en/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..0bb9de30599
--- /dev/null
+++ b/src/site/content/en/fast/publish-modern-javascript/index.md
@@ -0,0 +1,437 @@
+---
+layout: post
+title: Publish, ship, and install modern JavaScript for faster applications
+subhead: Improve performance by turning on modern JavaScript dependencies and output.
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: |
+  Modern JavaScript offers size and performance improvements over transpiled ES5,
+  and is supported in 95% of web browsers. Enabling modern JavaScript output brings
+  these benefits to your application, but the impact is limited by dependencies that
+  are already transpiled to ES5. This guide demonstrates how to publish modern packages
+  to npm, and how to install and optimally bundle modern JavaScript packages.
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - codelab-serve-modern-code
+tags:
+  - performance
+  - blog
+---
+
+Over 90% of browsers are capable of running modern JavaScript, but the
+prevalence of legacy JavaScript remains a large source of performance problems
+on the web today.
+
+## Modern JavaScript
+
+Modern JavaScript is not characterized as code written in a specific ECMAScript
+specification version, but rather in syntax that is supported by all modern
+browsers. Modern web browsers like Chrome, Edge, Firefox, and Safari make up
+more than [90% of the browser market](https://www.caniuse.com/usage-table), and
+different browsers that rely on the same underlying rendering engines make up an
+additional 5%. This means that 95% of global web traffic comes from browsers
+that support the most widely used JavaScript language features from the past 10
+years, including:
+
+- Classes (ES2015)
+- Arrow functions (ES2015)
+- Generators (ES2015)
+- Block scoping (ES2015)
+- Destructuring (ES2015)
+- Rest and spread parameters (ES2015)
+- Object shorthand (ES2015)
+- Async/await (ES2017)
+
+Features in newer versions of the language specification generally have less
+consistent support across modern browsers. For example, many ES2020 and ES2021
+features are only supported in 70% of the browser market—still the majority of
+browsers, but not enough that it's safe to rely on those features directly. This
+means that although "modern" JavaScript is a moving target, ES2017 has the
+widest range of browser compatibility
+[while including most of the commonly used modern syntax features](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c).
+In other words, **ES2017 is the closest to modern syntax today**.
+
+## Legacy JavaScript
+
+Legacy JavaScript is code that specifically avoids using all the above language
+features. Most developers write their source code using modern syntax, but
+compile everything to legacy syntax for increased browser support. Compiling
+to legacy syntax does increase browser support, however the effect is often
+smaller than we realize. In many cases the support increases from around 95%
+to 98% while incurring a significant cost:
+
+- Legacy JavaScript is typically around 20% larger and slower than
+  equivalent modern code. Tooling deficiencies and misconfiguration often
+  widen this gap even further.
+
+- Installed libraries account for as much as 90% of typical production
+  JavaScript code. Library code incurs an even higher legacy JavaScript
+  overhead due to polyfill and helper duplication that could be avoided
+  by publishing modern code.
+
+## Modern JavaScript on npm
+
+Recently, Node.js has standardized an `"exports"` field to define
+[entry points for a package](https://nodejs.org/api/packages.html#packages_package_entry_points):
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+Modules referenced by the `"exports"` field imply a Node version of at least
+12.8, which supports ES2019. This means that any module referenced using the
+`"exports"` field can be _written in modern JavaScript_. Package consumers must
+assume modules with an `"exports"` field contain modern code and transpile if
+necessary.
+
+### Modern-only
+
+If you want to publish a package with modern code and leave it up to the
+consumer to handle transpiling it when they use it as a dependency—use only the
+`"exports"` field.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %}
+This approach is _not recommended_. In a perfect world, every developer
+would have already configured their build system to transpile all dependencies
+(`node_modules`) to their required syntax. However, this is not currently the
+case, and publishing your package using only modern syntax would prevent its
+usage in applications that would be accessed through legacy browsers.
+{% endAside %}
+
+### Modern with legacy fallback
+
+Use the `"exports"` field along with `"main"` in order to publish your package
+using modern code but also include an ES5 + CommonJS fallback for legacy
+browsers.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### Modern with legacy fallback and ESM bundler optimizations
+
+In addition to defining a fallback CommonJS entrypoint, the `"module"` field can
+be used to point to a similar legacy fallback bundle, but one that uses
+JavaScript module syntax (`import` and `export`).
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+Many bundlers, such as webpack and Rollup, rely on this field to take advantage
+of module features and enable
+[tree shaking](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size).
+This is still a legacy bundle that does not contain any modern code aside from
+`import`/`export` syntax, so use this approach to ship modern code with a
+legacy fallback that is still optimized for bundling.
+
+## Modern JavaScript in applications
+
+Third-party dependencies make up the vast majority of typical production
+JavaScript code in web applications. While npm dependencies have historically
+been published as legacy ES5 syntax, this is no longer a safe assumption and
+risks dependency updates breaking browser support in your application.
+
+With an increasing number of npm packages moving to modern JavaScript, it's
+important to ensure that the build tooling is set up to handle them. There's a
+good chance some of the npm packages you depend on are already using modern
+language features. There are a number of options available to use modern code
+from npm without breaking your application in older browsers, but the general
+idea is to have the build system transpile dependencies to the same syntax
+target as your source code.
+
+## webpack
+
+As of webpack 5, it is now possible to configure what syntax webpack will use
+when generating code for bundles and modules. This doesn't transpile your
+code or dependencies, it only affects the "glue" code generated by webpack.
+To specify the browser support target, add a
+[browserslist configuration](https://github.com/browserslist/browserslist#readme)
+to your project, or do it directly in your webpack configuration:
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+It is also possible to configure webpack to generate optimized bundles that
+omit unnecessary wrapper functions when targeting a modern ES Modules
+environment. This also configures webpack to load code-split bundles using
+`<script type="module">`.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+There are a number of webpack plugins available that make it possible to
+compile and ship modern JavaScript while still supporting legacy browsers,
+such as Optimize Plugin and BabelEsmPlugin.
+
+### Optimize Plugin
+
+[Optimize Plugin](https://github.com/developit/optimize-plugin) is a webpack
+plugin that transforms final bundled code from modern to legacy JavaScript
+instead of each individual source file. It's a self-contained setup that allows
+your webpack configuration to assume everything is modern JavaScript with no
+special branching for multiple outputs or syntaxes.
+
+Since Optimize Plugin operates on bundles instead of individual modules, it
+processes your application's code and your dependencies equally. This makes it
+safe to use modern JavaScript dependencies from npm, because their code will be
+bundled and transpiled to the correct syntax. It can also be faster than
+traditional solutions involving two compilation steps, while still generating
+separate bundles for modern and legacy browsers. The two sets of bundles are
+designed to be loaded using the
+[module/nomodule pattern](/serve-modern-code-to-modern-browsers/).
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+`Optimize Plugin` can be faster and more efficient than custom webpack
+configurations, which typically bundle modern and legacy code separately. It
+also handles running [Babel](https://babeljs.io/) for you, and minifies
+bundles using [Terser](https://terser.org/) with separate optimal settings for
+the modern and legacy outputs. Finally, polyfills needed by the generated
+legacy bundles are extracted into a dedicated script so they are never
+duplicated or unnecessarily loaded in newer browsers.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Comparison: transpiling source modules twice versus transpiling generated bundles.
+  </figcaption>
+</figure>
+
+### BabelEsmPlugin
+
+[BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin) is a webpack
+plugin that works along with
+[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)
+to generate modern versions of existing bundles to ship less transpiled code to
+modern browsers. It is the most popular off-the-shelf solution for
+module/nomodule, used by [Next.js](https://nextjs.org/) and
+[Preact CLI](https://preactjs.com/cli/).
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // your existing babel-loader configuration:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+`BabelEsmPlugin` supports a wide array of webpack configurations, because it
+runs two largely separate builds of your application. Compiling twice can take a
+little bit of extra time for large applications, however this technique allows
+`BabelEsmPlugin` to integrate seamlessly into existing webpack configurations
+and makes it one of the most convenient options available.
+
+### Configure babel-loader to transpile node_modules
+
+If you are using `babel-loader` without one of the previous two plugins,
+there's an important step required in order to consume modern JavaScript npm
+modules. Defining two separate `babel-loader` configurations makes it possible
+to automatically compile modern language features found in `node_modules` to
+ES2017, while still transpiling your own first-party code with the Babel
+plugins and presets defined in your project's configuration. This doesn't
+generate modern and legacy bundles for a module/nomodule setup, but it does
+make it possible to install and use npm packages that contain modern JavaScript
+without breaking older browsers.
+
+[webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm)
+uses this technique to compile npm dependencies that have an `"exports"` field
+in their `package.json`, since these may contain modern syntax:
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // auto-transpile modern stuff found in node_modules
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+Alternatively, you can implement the technique manually in your webpack
+configuration by checking for an `"exports"` field in the `package.json` of
+modules as they are resolved. Omitting caching for brevity, a custom
+implementation might look like this:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Transpile for your own first-party code:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // Transpile modern dependencies:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+When using this approach, you'll need to ensure modern syntax is supported by
+your minifier. Both [Terser](https://github.com/terser/terser#minify-options)
+and [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options)
+have an option to specify `{ecma: 2017}` in order to preserve and in some cases
+generate ES2017 syntax during compression and formatting.
+
+## Rollup
+
+Rollup has built-in support for generating multiple sets of bundles as part of
+a single build, and generates modern code by default. As a result, Rollup can
+be configured to generate modern and legacy bundles with the official plugins
+you're likely already using.
+
+### @rollup/plugin-babel
+
+If you use Rollup, the
+[`getBabelOutputPlugin()` method](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code)
+(provided by Rollup's
+[official Babel plugin](https://github.com/rollup/plugins/tree/master/packages/babel))
+transforms the code in generated bundles rather than individual source modules.
+Rollup has built-in support for generating multiple sets of bundles as part of
+a single build, each with their own plugins. You can use this to produce
+different bundles for modern and legacy by passing each through a different
+Babel output plugin configuration:
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // modern bundles:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // legacy (ES5) bundles:
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## Additional build tools
+
+Rollup and webpack are highly-configurable, which generally means each project
+must update its configuration enable modern JavaScript syntax in dependencies.
+There are also higher-level build tools that favor convention and defaults over
+configuration, like [Parcel], [Snowpack], [Vite] and [WMR]. Most of these tools
+assume npm dependencies may contain modern syntax, and will transpile them to
+the appropriate syntax level(s) when building for production.
+
+In addition to dedicated plugins for webpack and Rollup, modern JavaScript
+bundles with legacy fallbacks can be added to any project using
+[devolution](https://github.com/theKashey/devolution). Devolution is a
+standalone tool that transforms the output from a build system to produce legacy
+JavaScript variants, allowing bundling and transformations to assume a modern
+output target.
+
+[parcel]: https://parceljs.org/
+[snowpack]: https://www.snowpack.dev/
+[vite]: https://github.com/vitejs/vite
+[wmr]: https://github.com/preactjs/wmr
diff --git a/src/site/content/en/fast/rail/index.md b/src/site/content/en/fast/rail/index.md
index a49ce865569..027c502fc5b 100644
--- a/src/site/content/en/fast/rail/index.md
+++ b/src/site/content/en/fast/rail/index.md
@@ -4,6 +4,7 @@ title: Measure performance with the RAIL model
 description: |
   RAIL model enables designers and developers to reliably target the performance optimization work that has the highest impact on user experience. Learn what goals and guidelines the RAIL model sets out and which tools you can use to achieve them.
 date: 2020-06-10
+updated: 2023-01-06
 tags:
   - performance
   - animations
@@ -21,15 +22,19 @@ thinking about performance. The model breaks down the user's experience into key
 actions (for example, tap, scroll, load) and helps you define performance goals
 for each of them.
 
+{% Aside 'important' %}
+[Core Web Vitals](/vitals/) is a newer initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. It is the recommended approach for defining performance goals over RAIL, and has [different thresholds](/defining-core-web-vitals-thresholds/) than those detailed here.
+{% endAside %}
+
 RAIL stands for four distinct aspects of web app life cycle: response,
 animation, idle, and load. Users have different performance expectations for
 each of these contexts, so performance goals are defined based on the context
 and [UX research on how users perceive
 delays](https://www.nngroup.com/articles/response-times-3-important-limits/).
 
-<figure class="w-figure">
-  <img src="./rail.png" alt="The 4 parts of the RAIL performance model: response, animation, idle, and load.">
-  <figcaption class="w-figcaption">The 4 parts of the RAIL performance model
+<figure>
+  {% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="The 4 parts of the RAIL performance model: response, animation, idle, and load.", width="800", height="290" %}
+  <figcaption>The 4 parts of the RAIL performance model
 </figcaption>
 </figure>
 
@@ -39,7 +44,7 @@ delays](https://www.nngroup.com/articles/response-times-3-important-limits/).
 Make users the focal point of your performance effort. The table below describes
 key metrics of how users perceive performance delays:
 
-<table class="w-table-wrapper">
+<table class="table-wrapper">
   <thead>
   User perception of performance delays
   </thead>
@@ -118,9 +123,9 @@ actual input handling. This effect is visualized in the diagram below which
 shows how input received during an idle task is queued, reducing the available
 processing time:
 
-<figure class="w-figure">
-  <img src="./rail-response-details.png" alt="Diagram showing how input received during an idle task is queued, reducing available input processing time to 50ms">
-  <figcaption class="w-figcaption">How idle tasks affect input response budget.</figcaption>
+<figure>
+  {% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="Diagram showing how input received during an idle task is queued, reducing available input processing time to 50ms", width="800", height="400" %}
+  <figcaption>How idle tasks affect input response budget.</figcaption>
 </figure>
 
 ## Animation: produce a frame in 10&nbsp;ms
@@ -142,7 +147,7 @@ processing time:
   your chances of hitting 60&nbsp;fps.
 
 * See [Rendering
-  Performance](https://developers.google.com/web/fundamentals/performance/rendering)
+  Performance](/rendering-performance/)
   for various animation optimization strategies.
 
 {% Aside %} Recognize all the types of animations. Animations aren't just fancy
@@ -154,7 +159,7 @@ UI effects. Each of these interactions are considered animations:
 * Scrolling. This includes flinging, which is when the user starts scrolling,
   then lets go, and the page continues scrolling.
 * Dragging. Animations often follow user interactions, such as panning a map or
-  pinching to zoom. {% endAside %}    
+  pinching to zoom. {% endAside %}
 
 ## Idle: maximize idle time
 
@@ -165,7 +170,7 @@ input within 50&nbsp;ms.
 
 * Use idle time to complete deferred work. For example, for the initial page
   load, load as little data as possible, then use [idle
-  time](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
+  time](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)
   to load the rest.
 
 * Perform work during idle time in 50&nbsp;ms or less. Any longer, and you risk
@@ -185,11 +190,11 @@ viewability](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/re
 
 * Optimize for fast loading performance relative to the device and network
   capabilities of your users. Currently, a good target for first loads is to
-  load the page and be [interactive](https://web.dev/interactive/) in [5 seconds
+  load the page and be [interactive](/tti/) in [5 seconds
   or less on mid-range mobile devices with slow 3G
-  connections](https://web.dev/performance-budgets-101/#establish-a-baseline). 
+  connections](/performance-budgets-101/#establish-a-baseline).
 
-* For subsequent loads, a good target is to load the page in under 2 seconds. 
+* For subsequent loads, a good target is to load the page in under 2 seconds.
 
 {% Aside %}
 
@@ -201,8 +206,8 @@ Be aware that these targets may change over time.
 
 * Test your load performance on the mobile devices and network connections that
   are common among your users. You can use [Chrome User Experience
-  Report](https://web.dev/chrome-ux-report/) to find out the [connection
-  distribution](https://web.dev/chrome-ux-report-data-studio-dashboard/#using-the-dashboard)
+  Report](/chrome-ux-report/) to find out the [connection
+  distribution](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard)
   of your users. If the data is not available for your site, [The Mobile Economy
   2019](https://www.gsma.com/mobileeconomy/) suggests that a good global
   baseline is a mid-range Android phone, such as a Moto G4, and a slow 3G
@@ -211,25 +216,28 @@ Be aware that these targets may change over time.
 
 * Keep in mind that although your typical mobile user's device might claim that
   it's on a 2G, 3G, or 4G connection, in reality the [effective connection
-  speed](https://web.dev/adaptive-serving-based-on-network-quality/#how-it-works)
+  speed](/adaptive-serving-based-on-network-quality/#how-it-works)
   is often significantly slower, due to packet loss and network variance.
 
 * [Eliminate render blocking
-  resources](https://web.dev/render-blocking-resources/).
+  resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
 
 * You don't have to load everything in under 5 seconds to produce the perception
-  of a complete load. Consider [lazy-loading
-  images](https://web.dev/native-lazy-loading/), [code-splitting JavaScript
-  bundles](https://web.dev/reduce-javascript-payloads-with-code-splitting/), and
-  other [optimizations suggested on web.dev](https://web.dev/fast/).
-
-{% Aside %} Recognize the factors that affect page load performance:
+  of a complete load. Consider [lazy loading
+  images](/browser-level-image-lazy-loading/), [code-splitting JavaScript
+  bundles](/reduce-javascript-payloads-with-code-splitting/), and
+  other [optimizations suggested on web.dev](/fast/).
 
-* Network speed and latency
-* Hardware (slower CPUs, for example)
-* Cache eviction
-* Differences in L2/L3 caching
-* Parsing JavaScript {% endAside %}
+{% Aside %}
+<p>Recognize the factors that affect page load performance:</p>
+<ul>
+<li>Network speed and latency</li>
+<li>Hardware (slower CPUs, for example)</li>
+<li>Cache eviction</li>
+<li>Differences in L2/L3 caching</li>
+<li>Parsing JavaScript</li>
+</ul>
+{% endAside %}
 
 ## Tools for measuring RAIL
 
@@ -239,119 +247,119 @@ prefer.
 
 ### Chrome DevTools
 
-[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/)
 provides in-depth analysis on everything that happens while your page loads or
 runs. See [Get Started With Analyzing Runtime
-Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)
+Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/)
 to get familiar with the **Performance** panel UI.
 
 The following DevTools features are especially relevant:
 
 * [Throttle your
-  CPU](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#cpu-throttle)
+  CPU](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle)
   to simulate a less-powerful device.
 
 * [Throttle the
-  network](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#network-throttle)
+  network](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle)
   to simulate slower connections.
 
 * [View main thread
-  activity](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#main)
+  activity](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main)
   to view every event that occurred on the main thread while you were recording.
 
 * [View main thread activities in a
-  table](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#activities)
+  table](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities)
   to sort activities based on which ones took up the most time.
 
 * [Analyze frames per second
-  (FPS)](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#fps)
+  (FPS)](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps)
   to measure whether your animations truly run smoothly.
 
 * [Monitor CPU usage, JS heap size, DOM nodes, layouts per second, and
-  more](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor)
+  more](https://developer.chrome.com/blog/new-in-devtools-64/#perf-monitor)
   in real-time with the **Performance Monitor**.
 
 * [Visualize network
-  requests](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#network)
+  requests](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network)
   that occurred while you were recording with the **Network** section.
 
 * [Capture screenshots while
-  recording](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#screenshots)
+  recording](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots)
   to play back exactly how the page looked while the page loaded, or an
   animation fired, and so on.
 
 * [View
-  interactions](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#interactions)
+  interactions](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions)
   to quickly identify what happened on a page after a user interacted with it.
 
 * [Find scroll performance issues in
-  real-time](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#scrolling-performance-issues)
+  real-time](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues)
   by highlighting the page whenever a potentially problematic listener fires.
 
 * [View paint events in
-  real-time](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#paint-flashing)
+  real-time](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)
   to identify costly paint events that may be harming the performance of your
   animations.
 
 ### Lighthouse
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse) is available in
-Chrome DevTools,  at [web.dev/measure](https://web.dev/measure/), as a
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is available in
+Chrome DevTools,  at [PageSpeed Insights](https://pagespeed.web.dev/), as a
 Chrome Extension, as a Node.js module, and within WebPageTest. You give it a
 URL, it simulates a mid-range device with a slow 3G connection, runs a series of
 audits on the page, and then gives you a report on load performance, as well as
-suggestions on how to improve. 
+suggestions on how to improve.
 
 The following audits are especially relevant:
 
 **Response**
 
 * [Max Potential First Input
-  Delay](https://web.dev/lighthouse-max-potential-fid/). Estimates how long your
+  Delay](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/). Estimates how long your
   app will take to respond to user input, based on main thread idle time.
 
 * [Does not use passive listeners to improve scrolling
-  performance](https://web.dev/uses-passive-event-listeners/).
+  performance](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/).
 
-* [Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/).
+* [Total Blocking Time](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/).
   Measures the total amount of time that a page is blocked from responding to
-  user input, such as mouse clicks, screen taps, or keyboard presses. 
+  user input, such as mouse clicks, screen taps, or keyboard presses.
 
 * [Time To
-  Interactive](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive).
+  Interactive](https://developer.chrome.com/docs/lighthouse/performance/interactive/).
   Measures when a user can consistently interact with all page elements.
 
 **Load**
 
 * [Does not register a service worker that controls page and
-  start_url](https://web.dev/service-worker/). A service worker can cache common
+  start_url](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/). A service worker can cache common
   resources on a user's device, reducing time spent fetching resources over the
   network.
 
 * [Page load is not fast enough on mobile
-  networks](https://web.dev/load-fast-enough-for-pwa/).
+  networks](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/).
 
 * [Eliminate render-blocking
-  resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
+  resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
 
-* [Defer offscreen images](https://web.dev/offscreen-images/). Defer the loading
+* [Defer offscreen images](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/). Defer the loading
   of offscreen images until they're needed.
 
-* [Properly size images](https://web.dev/uses-responsive-images/). Don't serve
+* [Properly size images](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/). Don't serve
   images that are significantly larger than the size that's rendered in the
   mobile viewport.
 
-* [Avoid chaining critical requests](https://web.dev/critical-request-chains/). 
+* [Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).
 
-* [Does not use HTTP/2 for all of its resources](https://web.dev/uses-http2/).
+* [Does not use HTTP/2 for all of its resources](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).
 
-* [Efficiently encode images](https://web.dev/uses-optimized-images/).
+* [Efficiently encode images](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
 
-* [Enable text compression](https://web.dev/uses-text-compression/).
+* [Enable text compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
 
-* [Avoid enormous network payloads](https://web.dev/total-byte-weight/).
+* [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).
 
-* [Avoid an excessive DOM size](https://web.dev/dom-size/). Reduce network bytes
+* [Avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). Reduce network bytes
   by only shipping DOM nodes that are needed for rendering the page.
 
 ### WebPageTest
diff --git a/src/site/content/en/fast/rail/rail-response-details.png b/src/site/content/en/fast/rail/rail-response-details.png
deleted file mode 100644
index 3751d6b1105..00000000000
Binary files a/src/site/content/en/fast/rail/rail-response-details.png and /dev/null differ
diff --git a/src/site/content/en/fast/rail/rail.png b/src/site/content/en/fast/rail/rail.png
deleted file mode 100644
index d625d71fdd8..00000000000
Binary files a/src/site/content/en/fast/rail/rail.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/index.md
index 330cb56e32b..2be02ae7cc0 100644
--- a/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/index.md
+++ b/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -3,12 +3,14 @@ layout: post
 title: Reduce JavaScript payloads with code splitting
 authors:
   - houssein
+  - jlwagner
 description: |
   Sending large JavaScript payloads impacts the speed of your site
   significantly. Instead of shipping all the JavaScript to your user as soon as
   the first page of your application is loaded, split your bundle into
   multiple pieces and only send what's necessary at the very beginning.
 date: 2018-11-05
+updated: 2022-08-24
 codelabs:
   - codelab-code-splitting
 tags:
@@ -23,12 +25,24 @@ significantly. Instead of shipping all the JavaScript to your user as soon as
 the first page of your application is loaded, split your bundle into
 multiple pieces and only send what's necessary at the very beginning.
 
+## Why is code splitting beneficial?
+
+Code splitting is a technique that seeks to minimize startup time. When we ship less JavaScript at startup, we can get applications to be [interactive faster](/tti/) by minimizing main thread work during this critical period.
+
+When it comes to [Core Web Vitals](/vitals/), reducing JavaScript payloads downloaded at startup will contribute to better [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/) times. The reasoning behind this is that, by freeing up the main thread, the application is able to respond to user inputs more quickly by reducing JavaScript parse, compile, and execution-related startup costs.
+
+Depending on your website's architecture&mdash;particularly if your website relies heavily on client-side rendering&mdash;reducing the size of JavaScript payloads responsible for rendering markup may lead to improved [Largest Contentful Paint (LCP)](/lcp/) times. This can occur when the LCP resource is [delayed in being discovered by the browser](/optimize-lcp/#optimize-when-the-resource-is-discovered) until after client-side markup is completed, or when the main thread is too busy to [render that LCP element](/optimize-lcp/#2-eliminate-element-render-delay). Both scenarios can delay the LCP time for the page.
+
+{% Aside 'important' %}
+If your website relies on client-side rendering exclusively, you should seek to use [Server-Side Rendering (SSR)](/rendering-on-the-web/#server-rendering) to ensure that the server is sending meaningful markup to the client in response to the navigation request. This can help [the browser preload scanner](/preload-scanner/) to opportunistically fetch resources [more effectively](/preload-scanner/#rendering-markup-with-client-side-javascript).
+{% endAside %}
+
 ## Measure
 
 Lighthouse displays a failed audit when a significant amount of time is taken to
 execute all the JavaScript on a page.
 
-<img class="w-screenshot" src="./reduce-javascript-payloads-with-code-splitting-2.png" alt="A failing Lighthouse audit showing scripts taking too long to execute.">
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="A failing Lighthouse audit showing scripts taking too long to execute.", width="797", height="100" %}
 
 Split the JavaScript bundle to only send the code needed for the initial route when the
 user loads an application. This minimizes the amount of script that needs to be
@@ -37,7 +51,7 @@ parsed and compiled, which results in faster page load times.
 Popular module bundlers like [webpack](https://webpack.js.org/guides/code-splitting/),
 [Parcel](https://parceljs.org/code_splitting.html), and
 [Rollup](https://rollupjs.org/guide/en#dynamic-import) allow you to split your
-bundles using [dynamic imports](https://developers.google.com/web/updates/2017/11/dynamic-import).
+bundles using [dynamic imports](https://v8.dev/features/dynamic-import).
 For example, consider the following code snippet that shows an example of a
 `someFunction` method that gets fired when a form is submitted.
 
@@ -63,7 +77,7 @@ form.addEventListener("submit", e => {
   e.preventDefault();
   import('library.moduleA')
     .then(module => module.default) // using the default export
-    .then(someFunction())
+    .then(() => someFunction())
     .catch(handleError());
 });
 
diff --git a/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/reduce-javascript-payloads-with-code-splitting-2.png b/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/reduce-javascript-payloads-with-code-splitting-2.png
deleted file mode 100755
index 309b47aae7f..00000000000
Binary files a/src/site/content/en/fast/reduce-javascript-payloads-with-code-splitting/reduce-javascript-payloads-with-code-splitting-2.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-javascript-payloads-with-tree-shaking/index.md b/src/site/content/en/fast/reduce-javascript-payloads-with-tree-shaking/index.md
new file mode 100644
index 00000000000..7f869e0d6b8
--- /dev/null
+++ b/src/site/content/en/fast/reduce-javascript-payloads-with-tree-shaking/index.md
@@ -0,0 +1,246 @@
+---
+layout: post
+title: Reduce JavaScript payloads with tree shaking
+authors:
+  - jlwagner
+description: |
+  Knowing where to begin optimizing your application's JavaScript can be daunting. If you're taking advantage of modern tooling such as webpack, however, tree shaking might be a good place to start!
+date: 2018-06-14
+updated: 2018-10-23
+tags:
+  - performance
+---
+
+Today's web applications can get pretty big, especially the JavaScript part of them. As of mid-2018, HTTP Archive puts the [median transfer size of JavaScript on mobile devices](https://httparchive.org/reports/state-of-javascript#bytesJs) at approximately 350 KB. And this is just transfer size! JavaScript is often compressed when sent over the network, meaning that the _actual_ amount of JavaScript is quite a bit more after the browser decompresses it. That's important to point out, because as far as resource _processing_ is concerned, compression is irrelevant. 900 KB of decompressed JavaScript is still 900 KB to the parser and compiler, even though it may be roughly 300 KB when compressed.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/VytWruOnBN3nHJnSm18w.svg", alt="A diagram illustrating the process of downloading, decompressing, parsing, compiling, and executing JavaScript.", width="600", height="106" %}
+  <figcaption>
+    The process of downloading and running JavaScript. Note that even though the transfer size of the script is 300 KB compressed, it is still 900 KB worth of JavaScript that must be parsed, compiled, and executed.
+  </figcaption>
+</figure>
+
+JavaScript is an expensive resource to process. Unlike images which only incur relatively trivial decode time once downloaded, JavaScript must be parsed, compiled, and then finally executed. Byte for byte, this makes JavaScript more expensive than other types of resources.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/rEdnN5fuzBC6DOjUqgEL.png", alt="A diagram comparing the processing time of 170 KB of JavaScript versus an equivalently sized JPEG image. The JavaScript resource is far more resource-intensive byte for byte than the JPEG.", width="800", height="504" %}
+  <figcaption>
+    The processing cost of parsing/compiling 170 KB of JavaScript vs decode time of an equivalently sized JPEG. (<a href="https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e" rel="noopener">source</a>).
+  </figcaption>
+</figure>
+
+[While improvements are continually being made](https://v8.dev/blog/background-compilation) to [improve the efficiency of JavaScript engines](https://blog.mozilla.org/javascript/2017/12/12/javascript-startup-bytecode-cache/), improving JavaScript performance is&mdash;as always&mdash;a task for developers.
+
+To that end, there are techniques to improve JavaScript performance. [Code splitting](/reduce-javascript-payloads-with-code-splitting/), is one such technique that improves performance by partitioning application JavaScript into chunks, and serving those chunks to only the routes of an application that need them.
+
+While this technique works, it doesn't address a common problem of JavaScript-heavy applications, which is the inclusion of code that's never used. Tree shaking attempts to solve this problem.
+
+## What is tree shaking?
+
+[Tree shaking](https://en.wikipedia.org/wiki/Tree_shaking) is a form of dead code elimination. [The term was popularized by Rollup](https://github.com/rollup/rollup#tree-shaking), but the concept of dead code elimination has existed for some time. The concept has also found purchase in [webpack](https://webpack.js.org/guides/tree-shaking/), which is demonstrated in this article by way of a sample app.
+
+The term "tree shaking" comes from the mental model of your application and its dependencies as a tree-like structure. Each node in the tree represents a dependency that provides distinct functionality for your app. In modern apps, these dependencies are brought in via [static `import` statements](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) like so:
+
+```js
+// Import all the array utilities!
+import arrayUtils from "array-utils";
+```
+
+{% Aside %}
+Note: If you're not sure what ES6 modules are, [this explainer at Pony Foo](https://ponyfoo.com/articles/es6-modules-in-depth) is worth a look. This guide assumes you have working knowledge of how ES6 modules work, so if you don't know anything about them, give that article a read!
+{% endAside %}
+
+When an app is young&mdash;a sapling, if you will&mdash;it may have few dependencies. It's also using most&mdash;if not all&mdash;the dependencies you add. As your app matures, however, more dependencies can get added. To compound matters, older dependencies fall out of use, but may not get pruned from your codebase. The end result is that an app ends up shipping with a lot of [unused JavaScript](/unused-javascript/). Tree shaking addresses this by taking advantage of how static `import` statements pull in specific parts of ES6 modules:
+
+```js
+// Import only some of the utilities!
+import { unique, implode, explode } from "array-utils";
+```
+
+The difference between this `import` example and the previous one is that rather than importing _everything_ from the `"array-utils"` module&mdash;which could be a lot of code)&mdash;this example imports only specific parts of it. In dev builds, this doesn't change anything, as the entire module gets imported regardless. In production builds, webpack can be configured to "shake" off [exports](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) from ES6 modules that weren't explicitly imported, making those production builds smaller. In this guide, you'll learn how to do just that!
+
+## Finding opportunities to shake a tree
+
+For illustrative purposes, [a sample one-page app](https://github.com/malchata/webpack-tree-shaking-example) is available that demonstrates how tree shaking works. You can clone it and follow along if you like, but we'll cover every step of the way together in this guide, so cloning isn't necessary (unless hands-on learning is your thing).
+
+The sample app is a searchable database of guitar effect pedals. You enter a query and a list of effect pedals will appear.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bBmp460zNYmTVeAgQhw5.png", alt="A screenshot of a sample one page application for searching a database of guitar effect pedals.", width="800", height="673" %}
+  <figcaption>
+    A screenshot of the sample app.
+  </figcaption>
+</figure>
+
+The behavior that drives this app is separated into vendor (i.e., [Preact](https://preactjs.com/) and [Emotion](https://emotion.sh/)) and app-specific code bundles (or "chunks", as webpack calls them):
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/oreVh5rQcXxIDenvQxE7.png", alt="A screenshot of two application code bundles (or chunks) shown in the network panel of Chrome's DevTools.", width="800", height="282" %}
+  <figcaption>
+    The app's two JavaScript bundles. These are uncompressed sizes.
+  </figcaption>
+</figure>
+
+The JavaScript bundles shown in the figure above are production builds, meaning they're optimized through uglification. 21.1 KB for an app-specific bundle isn't bad, but it should be noted that no tree shaking is occurring whatsoever. Let's look at the app code and see what can be done to fix that.
+
+{% Aside %}
+If you don't care for a long-winded explanation, and want to dive into code, go ahead and check out [the `tree-shake` branch](https://github.com/malchata/webpack-tree-shaking-example/tree/tree-shake) in the app's GitHub repo. You can also [diff this branch](https://github.com/malchata/webpack-tree-shaking-example/compare/tree-shake) to see exactly what was changed to make tree shaking work!
+{% endAside %}
+
+In any application, finding tree shaking opportunities are going to involve looking for static `import` statements. [Near the top of the main component file](https://github.com/malchata/webpack-tree-shaking-example/blob/master/src/components/FilterablePedalList/FilterablePedalList.js#L4), you'll see a line like this:
+
+```js
+import * as utils from "../../utils/utils";
+```
+
+You can [import ES6 modules in a variety of ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#description), but ones like this should get your attention. This specific line says "`import` _everything_ from the `utils` module, and put it in a namespace called `utils`." The big question to ask here is, "just how much _stuff_ is in that module?"
+
+If you look at [the `utils` module source code](https://github.com/malchata/webpack-tree-shaking-example/blob/master/src/utils/utils.js), you'll find there's about 1,300 lines of code.
+
+Do you _need_ all that stuff? Let's double check by searching [the main component file](https://github.com/malchata/webpack-tree-shaking-example/blob/master/src/components/FilterablePedalList/FilterablePedalList.js) that imports the `utils` module to see how many instances of that namespace come up.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Grk6jcj6IiMHIiJPqiEM.png", alt="A screenshot of a search in a text editor for 'utils.', returning only 3 results.", width="800", height="117" %}
+  <figcaption>
+    The <code>utils</code> namespace we've imported tons of modules from is only invoked three times within the main component file.
+  </figcaption>
+</figure>
+
+As it turns out, the `utils` namespace appears in only three spots in our application&mdash;but for what functions? If you take a look at the main component file again, it appears to be only one function, which is `utils.simpleSort`, which is used to sort the search results list by a number of criteria when the sorting dropdowns are changed:
+
+```js
+if (this.state.sortBy === "model") {
+  // `simpleSort` gets used here...
+  json = utils.simpleSort(json, "model", this.state.sortOrder);
+} else if (this.state.sortBy === "type") {
+  // ..and here...
+  json = utils.simpleSort(json, "type", this.state.sortOrder);
+} else {
+  // ..and here.
+  json = utils.simpleSort(json, "manufacturer", this.state.sortOrder);
+}
+```
+
+Out of a 1,300 line file with a bunch of exports, only one of them is used. This results in shipping a lot of unused JavaScript.
+
+{% Aside %}
+Note: This project is purposefully kept simple, so it's a bit easier in this case to find out where the bloat is coming from. In large projects with many modules, however, things get more complicated. Tools such as [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) and [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) may provide further insight.
+{% endAside %}
+
+While this example app is admittedly a bit contrived, it doesn't change the fact that this synthetic sort of scenario resembles actual optimization opportunities you may encounter in a production web app. Now that you've identified an opportunity for tree shaking to be useful, how is it actually done?
+
+## Keeping Babel from transpiling ES6 modules to CommonJS modules
+
+[Babel](https://babeljs.io/) is an indispensable tool, but it may make the effects of tree shaking a bit more difficult to observe. If you're using [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env), Babel _may_ transform ES6 modules into more widely compatible CommonJS modules&mdash;that is, modules you `require` instead of `import`.
+
+Because tree shaking is more difficult to do for CommonJS modules, webpack won't know what to prune from bundles if you decide to use them. The solution is to configure `@babel/preset-env` to explicitly leave ES6 modules alone. Wherever you configure Babel&mdash;be it in `babel.config.js` or `package.json`&mdash;this involves adding a little something extra:
+
+```js
+// babel.config.js
+export default {
+  presets: [
+    [
+      "@babel/preset-env", {
+        modules: false
+      }
+    ]
+  ]
+}
+```
+
+Specifying `modules: false` in your `@babel/preset-env` config gets Babel to behave as desired, which allows webpack to analyze your dependency tree and shake off unused dependencies.
+
+## Keeping side effects in mind
+
+Another aspect to consider when shaking dependencies from your app is whether
+your project's modules have side effects. An example of a side effect is when a
+function modifies something outside of its own scope, which is a _side effect_
+of its execution:
+
+```js
+let fruits = ["apple", "orange", "pear"];
+
+console.log(fruits); // (3) ["apple", "orange", "pear"]
+
+const addFruit = function(fruit) {
+  fruits.push(fruit);
+};
+
+addFruit("kiwi");
+
+console.log(fruits); // (4) ["apple", "orange", "pear", "kiwi"]
+```
+
+In this example, `addFruit` produces a side effect when it modifies the `fruits` array, which is outside its scope.
+
+Side effects also apply to ES6 modules, and that matters in the context of tree shaking. Modules that take predictable inputs and produce equally predictable outputs without modifying anything outside of their own scope are dependencies that can be safely dropped if we're not using them. They're self-contained, _modular_ pieces of code. Hence, "modules".
+
+Where webpack is concerned, a hint can be used to specify that a package and its dependencies are free of side effects by specifying `"sideEffects": false` in a project's `package.json` file:
+
+```json
+{
+  "name": "webpack-tree-shaking-example",
+  "version": "1.0.0",
+  "sideEffects": false
+}
+```
+
+Alternatively, you can tell webpack which specific files are not side effect-free:
+
+```json
+{
+  "name": "webpack-tree-shaking-example",
+  "version": "1.0.0",
+  "sideEffects": [
+    "./src/utils/utils.js"
+  ]
+}
+```
+
+In the latter example, any file that isn't specified will be assumed to be free of side effects. If you don't want to add this to your `package.json` file, [you can also specify this flag in your webpack config via `module.rules`](https://github.com/webpack/webpack/issues/6065#issuecomment-351060570).
+
+## Importing only what's needed
+
+After instructing Babel to leave ES6 modules alone, a slight adjustment to our `import` syntax is required to bring in only the functions needed from the `utils` module. In this guide's example, all that's needed is the `simpleSort` function:
+
+```js
+import { simpleSort } from "../../utils/utils";
+```
+
+Because only `simpleSort` is being imported instead of the entire `utils` module, every instance of `utils.simpleSort` will need to changed to `simpleSort`:
+
+```js
+if (this.state.sortBy === "model") {
+  json = simpleSort(json, "model", this.state.sortOrder);
+} else if (this.state.sortBy === "type") {
+  json = simpleSort(json, "type", this.state.sortOrder);
+} else {
+  json = simpleSort(json, "manufacturer", this.state.sortOrder);
+}
+```
+
+This should be all that's needed for tree shaking to work in this example. This is the webpack output before shaking the dependency tree:
+
+```shell
+                 Asset      Size  Chunks             Chunk Names
+js/vendors.16262743.js  37.1 KiB       0  [emitted]  vendors
+   js/main.797ebb8b.js  20.8 KiB       1  [emitted]  main
+```
+
+This is the output _after_ tree shaking is successful:
+
+```shell
+                 Asset      Size  Chunks             Chunk Names
+js/vendors.45ce9b64.js  36.9 KiB       0  [emitted]  vendors
+   js/main.559652be.js  8.46 KiB       1  [emitted]  main
+```
+
+While both bundles shrank, it's really the `main` bundle that benefits most. By shaking off the unused parts of the `utils` module, the `main` bundle shrinks by about 60%. This not only lowers the amount of time the script takes to the download, but processing time as well.
+
+## Go shake some trees!
+
+Whatever mileage you get out of tree shaking depends on your app and its dependencies and architecture. Try it! If you know for a fact you haven't set up your module bundler to perform this optimization, there's no harm trying and seeing how it benefits your application.
+
+You may realize a significant performance gain from tree shaking, or not much at all. But by configuring your build system to take advantage of this optimization in production builds and selectively importing only what your application needs, you'll be proactively keeping your application bundles as small as possible.
+
+_Special thanks to Kristofer Baxter, [Jason Miller](/authors/developit/), [Addy Osmani](/authors/addyosmani/), [Jeff Posnick](/authors/jeffposnick/), Sam Saccone, and [Philip Walton](/authors/philipwalton/) for their valuable feedback, which significantly improved the quality of this article._
diff --git a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/console.png b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/console.png
deleted file mode 100755
index cf42a460c56..00000000000
Binary files a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/console.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/index.md b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/index.md
index 7df65372b64..ec2649f0a31 100755
--- a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/index.md
+++ b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/index.md
@@ -29,13 +29,13 @@ improves page load times.
 Lighthouse displays a failed audit if it detects any CSS or JS resources on your
 page that can be minified.
 
-<img class="w-screenshot" src="./reduce-network-payloads-using-text-compression-1.png" alt="Lighthouse Minify CSS Audit">
+{% Img src="image/admin/ZT9ESeCStegt0SklYbni.png", alt="Lighthouse Minify CSS Audit", width="800", height="90" %}
 
-<img class="w-screenshot" src="./reduce-network-payloads-using-text-compression-2.png" alt="Lighthouse Minify JS Audit">
+{% Img src="image/admin/vDaAnUSvQxmGcoasQj1k.png", alt="Lighthouse Minify JS Audit", width="800", height="112" %}
 
 It also audits for any uncompressed assets.
 
-<img class="w-screenshot" src="./reduce-network-payloads-using-text-compression-3.png" alt="Lighthouse: Enable text compression">
+{% Img src="image/admin/xfqzdLuu3w3lanxo5Ggc.png", alt="Lighthouse: Enable text compression", width="800", height="123" %}
 
 ## Minification
 
diff --git a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-1.png b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-1.png
deleted file mode 100755
index 584d47f9217..00000000000
Binary files a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-1.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-2.png b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-2.png
deleted file mode 100755
index aecf266f1c3..00000000000
Binary files a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-2.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-3.png b/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-3.png
deleted file mode 100755
index 3e2ab2baa14..00000000000
Binary files a/src/site/content/en/fast/reduce-network-payloads-using-text-compression/reduce-network-payloads-using-text-compression-3.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-webfont-size/font-synthesis.png b/src/site/content/en/fast/reduce-webfont-size/font-synthesis.png
deleted file mode 100644
index 1b6fcd70d25..00000000000
Binary files a/src/site/content/en/fast/reduce-webfont-size/font-synthesis.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-webfont-size/font-weights.png b/src/site/content/en/fast/reduce-webfont-size/font-weights.png
deleted file mode 100644
index 445c6c2167d..00000000000
Binary files a/src/site/content/en/fast/reduce-webfont-size/font-weights.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-webfont-size/glyphs.png b/src/site/content/en/fast/reduce-webfont-size/glyphs.png
deleted file mode 100644
index 73be82384e5..00000000000
Binary files a/src/site/content/en/fast/reduce-webfont-size/glyphs.png and /dev/null differ
diff --git a/src/site/content/en/fast/reduce-webfont-size/index.md b/src/site/content/en/fast/reduce-webfont-size/index.md
index 9818989a0b6..d0ed32fd961 100644
--- a/src/site/content/en/fast/reduce-webfont-size/index.md
+++ b/src/site/content/en/fast/reduce-webfont-size/index.md
@@ -1,122 +1,72 @@
 ---
 layout: post
-title: Reduce WebFont Size
+title: Reduce web font size
 authors:
   - ilyagrigorik
+  - jlwagner
 date: 2019-08-16
-updated: 2020-07-03
+updated: 2022-08-18
 description: |
   This post explains how to reduce the size of the WebFonts that you use on your site, so that good typography doesn't mean a slow site.
 tags:
   - performance
   - fonts
+  - web-vitals
 ---
 
-Typography is fundamental to good design, branding, readability, and accessibility.
-WebFonts enable all of the above and more:
-the text is selectable, searchable, zoomable, and high-DPI friendly,
-providing consistent and sharp text rendering regardless of the screen size and resolution.
-WebFonts are critical to good design, UX, and performance.
+Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. WebFonts are critical to good design, UX, and performance.
 
-WebFont optimization is a critical piece of the overall performance strategy.
-Each font is an additional resource, and some fonts may block rendering of the text,
-but just because the page is using WebFonts doesn't mean that it has to render slower.
-On the contrary, optimized fonts,
-combined with a judicious strategy for how they are loaded and applied on the page,
-can help reduce the total page size and improve page rendering times.
+Web font optimization is a critical piece of the overall performance strategy. Each font is an additional resource, and some fonts may block rendering of the text, but just because the page is using WebFonts doesn't mean that it has to render slower. On the contrary, optimized fonts, combined with a judicious strategy for how they are loaded and applied on the page, can help reduce the total page size and improve page rendering times.
 
-## Anatomy of a WebFont
+## Anatomy of a web font
 
-A *WebFont* is a collection of glyphs,
-and each glyph is a vector shape that describes a letter or symbol.
-As a result, two simple variables determine the size of a particular font file:
-the complexity of the vector paths of each glyph and the number of glyphs in a particular font.
-For example, Open Sans, which is one of the most popular WebFonts,
-contains 897 glyphs, which include Latin, Greek, and Cyrillic characters.
+A *web font* is a collection of glyphs, and each glyph is a vector shape that describes a letter or symbol. As a result, two simple variables determine the size of a particular font file: the complexity of the vector paths of each glyph and the number of glyphs in a particular font. For example, Open Sans, which is one of the most popular WebFonts, contains 897 glyphs, which include Latin, Greek, and Cyrillic characters.
 
-<img src="./glyphs.png"  alt="Font glyph table">
+<figure>
+  {% Img src="image/admin/B92rhiBJD9sx88a5CvVy.png", alt="Font glyph table", width="800", height="309" %}
+</figure>
 
-When picking a font, it's important to consider which character sets are supported.
-If you need to localize your page content to multiple languages,
-you should use a font that can deliver a consistent look and experience to your users.
-For example, [Google's Noto font family](https://www.google.com/get/noto/) aims to support all the world's languages.
-Note, however, that the total size of Noto, with all languages included, results in a 1.1GB+ ZIP download.
+When picking a font, it's important to consider which character sets are supported. If you need to localize your page content to multiple languages, you should use a font that can deliver a consistent look and experience to your users. For example, [Google's Noto font family](https://www.google.com/get/noto/) aims to support all the world's languages. Note, however, that the total size of Noto, with all languages included, results in a 1.1GB+ ZIP download.
 
-In this post you will find out how to reduce the delivered filesize of your WebFonts.
+In this post you will find out how to reduce the delivered filesize of your web fonts.
 
-### WebFont formats
+### Web font formats
 
-Today there are four font container formats in use on the web:
+Today there are two recommeded font container formats in use on the web:
 
 * [EOT](https://en.wikipedia.org/wiki/Embedded_OpenType)
 * [TTF](https://en.wikipedia.org/wiki/TrueType)
 * [WOFF](https://en.wikipedia.org/wiki/Web_Open_Font_Format)
 * [WOFF2](https://www.w3.org/TR/WOFF2/).
 
-[WOFF](http://caniuse.com/#feat=woff) and [WOFF 2.0](http://caniuse.com/#feat=woff2) enjoy the widest support,
-however for compatibility with older browsers you may need to include other formats:
+[WOFF](http://caniuse.com/#feat=woff) and [WOFF 2.0](http://caniuse.com/#feat=woff2) enjoy wide support and are supported by all modern browsers.
 
-* Serve WOFF 2.0 variant to browsers that support it.
-* Serve WOFF variant to the majority of browsers.
-* Serve TTF variant to old Android (below 4.4) browsers.
-* Serve EOT variant to old IE (below IE9) browsers.
+* Serve WOFF 2.0 variant to modern browsers.
+* If absolutely necessary&mdash;such as if you still need to support Internet Explorer 11, for example&mdash;serve the WOFF as a fallback.
+* Alternatively, consider not using web fonts for legacy browsers and falling back to the system fonts. This may be more performant for older, more constrained, devices as well.
+* Since WOFF and WOFF 2.0 cover all bases for modern and legacy browsers still in use, use of EOT and TTF are no longer necessary and can result in longer web font download times.
 
-{% Aside %}
-There's technically another container format, the [SVG
-font container](http://caniuse.com/svg-fonts), but IE and Firefox never supported it, and it is now deprecated in Chrome. As
-such, it's of limited use and it's intentionally omitted it in this guide.
-{% endAside %}
+### Web fonts and compression
 
-### Reduce font size with compression
-
-A font is a collection of glyphs, each of which is a set of paths describing the letter form.
-The individual glyphs are different,
-but they contain a lot of similar information that can be compressed with GZIP or a compatible compressor:
-
-* EOT and TTF formats are not compressed by default. Ensure that your servers are configured to
-apply [GZIP compression](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip)
-when delivering these formats.
-* WOFF has built-in compression.
-Ensure that your WOFF compressor is using optimal compression settings.
-* WOFF2 uses custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.
-For more information, see [the WOFF 2.0 evaluation report](http://www.w3.org/TR/WOFF20ER/).
-
-Finally, it's worth noting that some font formats contain additional metadata,
-such as [font hinting](https://en.wikipedia.org/wiki/Font_hinting) and [kerning](https://en.wikipedia.org/wiki/Kerning)
-information that may not be necessary on some platforms,
-which allows for further file-size optimization.
-Consult your font compressor for available optimization options,
-and if you take this route, ensure that you have the appropriate infrastructure to test and deliver these optimized fonts to each browser.
-For example, [Google Fonts](https://fonts.google.com/)
-maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser.
 
-{% Aside %}
-Consider using [Zopfli compression](http://en.wikipedia.org/wiki/Zopfli) for the EOT, TTF, and WOFF formats.
-Zopfli is a zlib compatible compressor that delivers ~5% file-size reduction over gzip.
-{% endAside %}
+Both WOFF and WOFF 2.0 have built-in compression. WOFF 2.0's internal compression uses Brotli, and offers up to 30% better compression than WOFF. For more information, see [the WOFF 2.0 evaluation report](http://www.w3.org/TR/WOFF20ER/).
 
-## Define a font family with @font-face
 
-The `@font-face` CSS at-rule allows you to define the location of a particular font resource, its
-style characteristics, and the Unicode codepoints for which it should be used. A combination of such
-`@font-face` declarations can be used to construct a "font family," which the browser will use to
-evaluate which font resources need to be downloaded and applied to the current page.
+Finally, it's worth noting that some font formats contain additional metadata, such as [font hinting](https://en.wikipedia.org/wiki/Font_hinting) and [kerning](https://en.wikipedia.org/wiki/Kerning) information that may not be necessary on some platforms, which allows for further file-size optimization. For example, [Google Fonts](https://fonts.google.com/) maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser.
+
+## Define a font family with `@font-face`
+
+The `@font-face` CSS at-rule allows you to define the location of a particular font resource, its style characteristics, and the Unicode codepoints for which it should be used. A combination of such `@font-face` declarations can be used to construct a "font family," which the browser will use to evaluate which font resources need to be downloaded and applied to the current page.
 
 ### Consider a variable font
 
-Variable fonts can significantly reduce the filesize of your fonts in cases where you need multiple variants of a font.
-Instead of needing to load the regular and bold styles plus their italic versions,
-you can load a single file that contains all of the information.
+Variable fonts can significantly reduce the filesize of your fonts in cases where you need multiple variants of a font. Instead of needing to load the regular and bold styles plus their italic versions, you can load a single file that contains all of the information. However, variable font file sizes will be larger than an individual font variant—though smaller than the combination of many variants. Rather than one large variable font, it may be better to serve critical font variants first, with other variants downloaded later.
 
-Variable fonts are now supported by all modern browsers,
-find out more in the [Introduction to variable fonts on the web](https://web.dev/variable-fonts/).
+Variable fonts are now supported by all modern browsers, find out more in the [Introduction to variable fonts on the web](/variable-fonts/).
 
 ### Select the right format
 
-Each `@font-face` declaration provides the name of the font family, which acts as a logical group of
-multiple declarations, [font properties](http://www.w3.org/TR/css3-fonts/#font-prop-desc) such as
-style, weight, and stretch, and the [src descriptor](http://www.w3.org/TR/css3-fonts/#src-desc),
-which specifies a prioritized list of locations for the font resource.
+Each `@font-face` declaration provides the name of the font family, which acts as a logical group of multiple declarations, [font properties](http://www.w3.org/TR/css3-fonts/#font-prop-desc) such as style, weight, and stretch, and the [src descriptor](http://www.w3.org/TR/css3-fonts/#src-desc), which specifies a prioritized list of locations for the font resource.
 
 ```css
 @font-face {
@@ -124,10 +74,10 @@ which specifies a prioritized list of locations for the font resource.
   font-style: normal;
   font-weight: 400;
   src: local('Awesome Font'),
-        url('/fonts/awesome.woff2') format('woff2'),
-        url('/fonts/awesome.woff') format('woff'),
-        url('/fonts/awesome.ttf') format('truetype'),
-        url('/fonts/awesome.eot') format('embedded-opentype');
+       url('/fonts/awesome.woff2') format('woff2'),
+       /* Only serve WOFF if necessary. Otherwise,
+          WOFF 2.0 is fine by itself. */
+       url('/fonts/awesome.woff') format('woff');
 }
 
 @font-face {
@@ -135,63 +85,39 @@ which specifies a prioritized list of locations for the font resource.
   font-style: italic;
   font-weight: 400;
   src: local('Awesome Font Italic'),
-        url('/fonts/awesome-i.woff2') format('woff2'),
-        url('/fonts/awesome-i.woff') format('woff'),
-        url('/fonts/awesome-i.ttf') format('truetype'),
-        url('/fonts/awesome-i.eot') format('embedded-opentype');
+       url('/fonts/awesome-i.woff2') format('woff2'),
+       url('/fonts/awesome-i.woff') format('woff');
 }
 ```
 
-First, note that the above examples define a single _Awesome Font_ family with two styles
-(normal and _italic_), each of which points to a different set of font resources.
-In turn, each `src` descriptor contains a prioritized, comma-separated list of resource variants:
+First, note that the above examples define a single _Awesome Font_ family with two styles (normal and _italic_), each of which points to a different set of font resources. In turn, each `src` descriptor contains a prioritized, comma-separated list of resource variants:
 
-* The `local()` directive allows you to reference, load, and use locally installed fonts.
-* The `url()` directive allows you to load external fonts, and are allowed to contain an optional
-`format()` hint indicating the format of the font referenced by the provided URL.
+* The `local()` directive allows you to reference, load, and use locally installed fonts. If the user already has the font installed on their system, this bypasses the network entirely, and is the fastest.
+* The `url()` directive allows you to load external fonts, and are allowed to contain an optional `format()` hint indicating the format of the font referenced by the provided URL.
 
 {% Aside %}
-Unless you're referencing one of the default system fonts,
-it is rare for the user to have it locally installed,
-especially on mobile devices,
-where it is effectively impossible to "install" additional fonts.
-You should always start with a `local()` entry "just in case," and then provide a list of `url()` entries.
+Unless you're referencing one of the default system fonts, it is rare for the user to have it locally installed, especially on mobile devices, where it is effectively impossible to "install" additional fonts. Even if you start with a `local()` entry, you should always provide a list of `url()` entries for those that do not have it downloaded.
 {% endAside %}
 
-When the browser determines that the font is needed,
-it iterates through the provided resource list in the specified order and tries to load the appropriate resource.
-For example, following the example above:
+When the browser determines that the font is needed, it iterates through the provided resource list in the specified order and tries to load the appropriate resource. For example, following the example above:
 
-1. The browser performs page layout and determines which font variants are required to render the
-specified text on the page.
-1. For each required font, the browser checks if the font is available locally.
-1. If the font is not available locally, the browser iterates over external definitions:
-    * If a format hint is present, the browser checks if it supports the hint before initiating the
-      download. If the browser doesn't support the hint, the browser advances to the next one.
-    * If no format hint is present, the browser downloads the resource.
+1. The browser performs page layout and determines which font variants are required to render the specified text on the page. Fonts that aren't part of the page's [CSS Object Model (CSSOM)](/critical-rendering-path-constructing-the-object-model/#css-object-model-cssom) are not downloaded by the browser, as they are not required.
+2. For each required font, the browser checks if the font is available locally.
+3. If the font is not available locally, the browser iterates over external definitions:
+  * If a format hint is present, the browser checks if it supports the hint before initiating the download. If the browser doesn't support the hint, the browser advances to the next one.
+  * If no format hint is present, the browser downloads the resource.
 
-The combination of local and external directives with appropriate format hints allows you to specify
-all of the available font formats and let the browser handle the rest. The browser determines which
-resources are required and selects the optimal format.
+The combination of local and external directives with appropriate format hints allows you to specify all of the available font formats and let the browser handle the rest. The browser determines which resources are required and selects the optimal format.
 
-{% Aside %}
-The order in which the font variants are specified matters.
-The browser picks the first format it supports.
-Therefore, if you want the newer browsers to use WOFF 2.0,
-then you should place the WOFF 2.0 declaration above WOFF.
+{% Aside 'important' %}
+If you're shipping more formats than just WOFF 2.0, the order in which the font variants are specified matters. The browser picks the first format it supports. Therefore, if you want the newer browsers to use WOFF 2.0, then you should place the WOFF 2.0 declaration above WOFF.
 {% endAside %}
 
 ### Unicode-range subsetting
 
-In addition to font properties such as style, weight, and stretch,
-the `@font-face` rule allows you to define a set of Unicode codepoints supported by each resource.
-This enables you to split a large Unicode font into smaller subsets
-(for example, Latin, Cyrillic, and Greek subsets)
- and only download the glyphs required to render the text on a particular page.
+In addition to font properties such as style, weight, and stretch, the `@font-face` rule allows you to define a set of Unicode codepoints supported by each resource. This enables you to split a large Unicode font into smaller subsets (for example, Latin, Cyrillic, and Greek subsets) and only download the glyphs required to render the text on a particular page.
 
-The [unicode-range descriptor](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range) allows you to
-specify a comma-delimited list of range values, each of which can be in one of three different
-forms:
+The [`unicode-range` descriptor](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range) allows you to specify a comma-delimited list of range values, each of which can be in one of three different forms:
 
 * Single codepoint (for example, `U+416`)
 * Interval range (for example, `U+400-4ff`): indicates the start and end codepoints of a range
@@ -206,11 +132,9 @@ subsets, each of which the browser downloads on an as-needed basis:
   font-style: normal;
   font-weight: 400;
   src: local('Awesome Font'),
-        url('/fonts/awesome-l.woff2') format('woff2'),
-        url('/fonts/awesome-l.woff') format('woff'),
-        url('/fonts/awesome-l.ttf') format('truetype'),
-        url('/fonts/awesome-l.eot') format('embedded-opentype');
-  unicode-range: U+000-5FF; /* Latin glyphs */
+       url('/fonts/awesome-l.woff2') format('woff2');
+  /* Latin glyphs */
+  unicode-range: U+000-5FF;
 }
 
 @font-face {
@@ -218,70 +142,54 @@ subsets, each of which the browser downloads on an as-needed basis:
   font-style: normal;
   font-weight: 400;
   src: local('Awesome Font'),
-        url('/fonts/awesome-jp.woff2') format('woff2'),
-        url('/fonts/awesome-jp.woff') format('woff'),
-        url('/fonts/awesome-jp.ttf') format('truetype'),
-        url('/fonts/awesome-jp.eot') format('embedded-opentype');
-  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
+       url('/fonts/awesome-jp.woff2') format('woff2');
+  /* Japanese glyphs */
+  unicode-range: U+3000-9FFF, U+ff??;
 }
 ```
 
-{% Aside %}
-Unicode-range subsetting is particularly important for Asian languages, where the number of
-glyphs is much larger than in Western languages and a typical "full" font is often measured in
-megabytes instead of tens of kilobytes.
+{% Aside 'important' %}
+Unicode-range subsetting is particularly important for Asian languages, where the number of glyphs is much larger than in Western languages and a typical "full" font is often measured in megabytes instead of tens of kilobytes.
 {% endAside %}
 
-The use of Unicode range subsets and separate files for each stylistic variant of the font allows
-you to define a composite font family that is both faster and more efficient to download. Visitors
-only download the variants and subsets they need, and they aren't forced to download subsets that
-they may never see or use on the page.
+The use of Unicode range subsets and separate files for each stylistic variant of the font allows you to define a composite font family that is both faster and more efficient to download. Visitors only download the variants and subsets they need, and they aren't forced to download subsets that they may never see or use on the page.
 
-Most browsers [now support unicode-range](http://caniuse.com/#feat=font-unicode-range).
-For compatibility with older browsers you may need to fall back to "manual subsetting".
-In this case you have to fall back to providing a single font resource
-that contains all the necessary subsets and hide the rest from the browser.
-For example, if the page is only using Latin characters,
-then you can strip other glyphs and serve that particular subset as a standalone resource.
+Nearly all browsers [support `unicode-range`](https://caniuse.com/font-unicode-range). For compatibility with older browsers you may need to fall back to "manual subsetting". In this case you have to fall back to providing a single font resource that contains all the necessary subsets and hide the rest from the browser. For example, if the page is only using Latin characters, then you can strip other glyphs and serve that particular subset as a standalone resource.
 
 1. **Determine which subsets are needed:**
-    * If the browser supports unicode-range subsetting,
-    then it will automatically select the right subset.
-    The page just needs to provide the subset files and specify appropriate unicode-ranges in the `@font-face` rules.
-    * If the browser doesn't support unicode-range subsetting,
-      then the page needs to hide all unnecessary subsets;
-      that is, the developer must specify the required subsets.
+   * If the browser supports unicode-range subsetting, then it will automatically select the right subset. The page just needs to provide the subset files and specify appropriate unicode-ranges in the `@font-face` rules.
+   * If the browser doesn't support unicode-range subsetting, then the page needs to hide all unnecessary subsets; that is, the developer must specify the required subsets.
 1. **Generate font subsets:**
-    - Use the open-source [pyftsubset tool](https://github.com/behdad/fonttools/) to subset and optimize your fonts.
-    - Some font services allow manual subsetting via custom query parameters,
-    which you can use to manually specify the required subset for your page.
-    Consult the documentation from your font provider.
+   - Use the open-source [pyftsubset tool](https://github.com/behdad/fonttools/) to subset and optimize your fonts.
+   - Some font servers—such as Google Font—will automatically subset by default.
+   - Some font services allow manual subsetting via custom query parameters, which you can use to manually specify the required subset for your page. Consult the documentation from your font provider.
 
 ### Font selection and synthesis
 
-Each font family is composed of multiple stylistic variants
-(regular, bold, italic) and multiple weights for each style,
-each of which, in turn, may contain very different glyph shapes&mdash;for example,
-different spacing, sizing, or a different shape altogether.
+Each font family may be composed of multiple stylistic variants (regular, bold, italic) and multiple weights for each style. Each of which, in turn, may contain very different glyph shapes&mdash;for example, different spacing, sizing, or a different shape altogether.
+
+<figure>
+  {% Img src="image/admin/FNtAc2xRmx2MuUt2MADj.png", alt="Font weights", width="697", height="127" %}
+</figure>
 
-<img src="./font-weights.png"  alt="Font weights">
+The above diagram illustrates a font family that offers three different bold weights:
+
+- 400 (regular).
+- 700 (bold).
+- 900 (extra bold).
 
-For example, the above diagram illustrates a font family that offers three different bold weights:
-400 (regular), 700 (bold), and 900 (extra bold).
 All other in-between variants (indicated in gray) are automatically mapped to the closest variant by the browser.
 
 <blockquote>
-  <p>When a weight is specified for which no face exists,
-a face with a nearby weight is used.
-In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.</p>
-<cite><a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm">CSS font matching algorithm</a></cite>
+  <p>
+    When a weight is specified for which no face exists, a face with a nearby weight is used. In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.
+  </p>
+  <cite>
+    <a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm" rel="noopener">CSS font matching algorithm</a>
+  </cite>
 </blockquote>
 
-Similar logic applies to _italic_ variants.
-The font designer controls which variants they will produce,
-and you control which variants you'll use on the page.
-Because each variant is a separate download, it's a good idea to keep the number of variants small.
-For example, you can define two bold variants for the _Awesome Font_ family:
+Similar logic applies to _italic_ variants. The font designer controls which variants they will produce, and you control which variants you'll use on the page. Because each variant is a separate download, it's a good idea to keep the number of variants small. For example, you can define two bold variants for the _Awesome Font_ family:
 
 ```css
 @font-face {
@@ -289,11 +197,9 @@ For example, you can define two bold variants for the _Awesome Font_ family:
   font-style: normal;
   font-weight: 400;
   src: local('Awesome Font'),
-        url('/fonts/awesome-l.woff2') format('woff2'),
-        url('/fonts/awesome-l.woff') format('woff'),
-        url('/fonts/awesome-l.ttf') format('truetype'),
-        url('/fonts/awesome-l.eot') format('embedded-opentype');
-  unicode-range: U+000-5FF; /* Latin glyphs */
+       url('/fonts/awesome-l.woff2') format('woff2');
+  /* Latin glyphs */
+  unicode-range: U+000-5FF;
 }
 
 @font-face {
@@ -301,60 +207,44 @@ For example, you can define two bold variants for the _Awesome Font_ family:
   font-style: normal;
   font-weight: 700;
   src: local('Awesome Font'),
-        url('/fonts/awesome-l-700.woff2') format('woff2'),
-        url('/fonts/awesome-l-700.woff') format('woff'),
-        url('/fonts/awesome-l-700.ttf') format('truetype'),
-        url('/fonts/awesome-l-700.eot') format('embedded-opentype');
-  unicode-range: U+000-5FF; /* Latin glyphs */
+       url('/fonts/awesome-l-700.woff2') format('woff2');
+  /* Latin glyphs */
+  unicode-range: U+000-5FF;
 }
 ```
 
-The above example declares the _Awesome Font_ family
-that is composed of two resources that cover the same set of Latin glyphs (`U+000-5FF`)
-but offer two different "weights": normal (400) and bold (700).
-However, what happens if one of your CSS rules specifies a different font weight,
-or sets the font-style property to italic?
+The above example declares the _Awesome Font_ family that is composed of two resources that cover the same set of Latin glyphs (`U+000-5FF`) but offer two different "weights": normal (400) and bold (700). However, what happens if one of your CSS rules specifies a different font weight, or sets the `font-style` property to `italic`?
 
 - If an exact font match isn't available, the browser substitutes the closest match.
-- If no stylistic match is found (for example, no italic variants were declared in the example above),
-then the browser synthesizes its own font variant.
+- If no stylistic match is found (for example, no italic variants were declared in the example above), then the browser synthesizes its own font variant.
 
-<img src="./font-synthesis.png"  alt="Font synthesis">
+<figure>
+  {% Img src="image/admin/a8Jo2cIO1tPsj71AzftS.png", alt="Font synthesis", width="800", height="356" %}
+</figure>
 
 {% Aside 'warning' %}
-Be aware that synthesized approaches may not be suitable for scripts like Cyrillic,
-where italic forms are very different in shape.
-For proper fidelity in those scripts, use an actual italic font.
+Be aware that synthesized approaches may not be suitable for scripts like Cyrillic, where italic forms are very different in shape. For proper fidelity in those scripts, use an actual italic font.
 {% endAside %}
 
-The example above illustrates the difference between the actual vs. synthesized font results for Open Sans.
-All synthesized variants are generated from a single 400-weight font.
-As you can see, there's a noticeable difference in the results.
-The details of how to generate the bold and oblique variants are not specified.
-Therefore, the results vary from browser to browser, and are highly dependent on the font.
+The example above illustrates the difference between the actual vs. synthesized font results for Open Sans. All synthesized variants are generated from a single 400-weight font. As you can see, there's a noticeable difference in the results. The details of how to generate the bold and oblique variants are not specified. Therefore, the results vary from browser to browser, and are highly dependent on the font.
 
 {% Aside %}
-For best consistency and visual results, don't rely on font synthesis.
-Instead, minimize the number of used font variants and specify their locations,
-such that the browser can download them when they are used on the page.
-Or, choose to use a variable font.
-That said, in some cases a synthesized variant [may be a viable option](https://www.igvita.com/2014/09/16/optimizing-WebFont-selection-and-synthesis/),
-but be cautious in using synthesized variants.
+For best consistency and visual results, don't rely on font synthesis. Instead, minimize the number of used font variants and specify their locations, such that the browser can download them when they are used on the page. Or, choose to use a variable font. That said, in some cases a synthesized variant [may be a viable option](https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/), but be cautious in using synthesized variants.
 {% endAside %}
 
-## WebFont size optimization checklist
+## Web font size optimization checklist
 
-- **Audit and monitor your font use:** don't use too many fonts on your pages, and, for each font,
-minimize the number of used variants. This helps produce a more consistent and a faster experience
-for your users.
-- **Subset your font resources:** many fonts can be subset, or split into multiple unicode-ranges to
-deliver just the glyphs that a particular page requires. This reduces the file size and improves the
-download speed of the resource. However, when defining the subsets, be careful to optimize for font
-re-use. For example, don't download a different but overlapping set of characters on each page. A
+- **Audit and monitor your font use:** don't use too many fonts on your pages, and, for each font, minimize the number of used variants. This helps produce a more consistent and a faster experience for your users.
+- **Avoid legacy formats if possible:** EOT, TTF, and WOFF formats are larger than WOFF 2.0. EOT and TTF are strictly unnecessary formats, where as WOFF may be acceptable if you need to support Internet Explorer 11. If you're only target modern browsers, using WOFF 2.0 only is the simplest and most performant option.
+- **Subset your font resources:** many fonts can be subset, or split into multiple unicode-ranges to deliver just the glyphs that a particular page requires. This reduces the file size and improves the download speed of the resource. However, when defining the subsets, be careful to optimize for font re-use. For example, don't download a different but overlapping set of characters on each page. A
 good practice is to subset based on script: for example, Latin, and Cyrillic.
-- **Deliver optimized font formats to each browser:** provide each font in WOFF 2.0, WOFF, EOT, and TTF
-formats. Make sure to apply GZIP compression to the EOT and TTF formats, because they are not
-compressed by default.
-- **Give precedence to `local()` in your `src` list:** listing `local('Font Name')` first in your
-`src` list ensures that HTTP requests aren't made for fonts that are already installed.
-- **Use [Lighthouse](https://developers.google.com/web/tools/lighthouse)** to test for [text compression](https://web.dev/uses-text-compression/).
+- **Give precedence to `local()` in your `src` list:** listing `local('Font Name')` first in your `src` list ensures that HTTP requests aren't made for fonts that are already installed.
+- **Use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)** to test for [text compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
+
+## Effects on Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)
+
+Depending on your page's content, text nodes can be considered candidates for [Largest Contentful Paint (LCP)](/lcp/). It's therefore vital to ensure your web fonts are as small as possible by following the advice in this article so that your users will see the text on your page [as soon as they possibly can](/optimize-webfont-loading/).
+
+If you're concerned that, despite your optimization efforts, page text might take too long to appear because of large web font resource, the `font-display` property has a number of settings that can help you to [avoid invisible text](/avoid-invisible-text) while a font is downloading. However, using the `swap` value may cause significant layout shifts that affect your site's [Cumulative Layout Shift (CLS)](/cls/). Consider using the `optional` or `fallback` values if possible.
+
+If your web fonts are crucial to your branding&mdash;and by extension, the user experience&mdash; consider preloading your fonts so that the browser has a head start on requesting them. This can reduce both the swap period if you use `font-display: swap`, or the blocking period if you're not using `font-display`.
diff --git a/src/site/content/en/fast/remove-unused-code/bundle-view.png b/src/site/content/en/fast/remove-unused-code/bundle-view.png
deleted file mode 100755
index b66d69f5998..00000000000
Binary files a/src/site/content/en/fast/remove-unused-code/bundle-view.png and /dev/null differ
diff --git a/src/site/content/en/fast/remove-unused-code/bundle.png b/src/site/content/en/fast/remove-unused-code/bundle.png
deleted file mode 100755
index f436b873dff..00000000000
Binary files a/src/site/content/en/fast/remove-unused-code/bundle.png and /dev/null differ
diff --git a/src/site/content/en/fast/remove-unused-code/devtools-sources.png b/src/site/content/en/fast/remove-unused-code/devtools-sources.png
deleted file mode 100755
index 0e4e3b10f3b..00000000000
Binary files a/src/site/content/en/fast/remove-unused-code/devtools-sources.png and /dev/null differ
diff --git a/src/site/content/en/fast/remove-unused-code/index.md b/src/site/content/en/fast/remove-unused-code/index.md
index f351e920838..b1eabecab95 100644
--- a/src/site/content/en/fast/remove-unused-code/index.md
+++ b/src/site/content/en/fast/remove-unused-code/index.md
@@ -7,6 +7,7 @@ subhead: |
 authors:
   - houssein
 date: 2018-11-05
+updated: 2022-08-29
 description: |
   Registries like npm have transformed the JavaScript world for the better by
   allowing anyone to easily download and use over half a million public
@@ -22,7 +23,15 @@ Registries like [npm](https://docs.npmjs.com/getting-started/what-is-npm) have
 transformed the JavaScript world for the better by allowing anyone to easily
 download and use over _half a million_ public packages. But we often include
 libraries we're not fully utilizing. To fix this issue, **analyze your bundle**
-to detect unused code. Then remove **unused** and **unneeded** libraries.
+to detect unused code. Then remove **unused** and **unnecessary** libraries.
+
+## Impact on Core Web Vitals
+
+By removing unused code, you can improve your website's [Core Web Vitals](/vitals/). [Largest Contentful Paint](/lcp/), for example, can be affected by unused code by increased bandwidth contention caused by larger than necessary assets. LCP can also be affected if large JavaScript assets that render markup solely on the client [contain references to LCP candidates](/preload-scanner/#rendering-markup-with-client-side-javascript) by [delaying when these resources can load](/optimize-lcp/#1-eliminate-resource-load-delay).
+
+Other metrics such as [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/) can also be affected by unused code, because even unused JavaScript must be downloaded, parsed, compiled, and then executed. The unused code can introduce unnecessary delays in resource load time, memory usage, and main thread activity that contribute to poor page responsiveness.
+
+This guide will help you get a handle on your project's unused code by showing you how to analyze your project's codebase, and offer strategies for pruning unused code from the JavaScript assets you ship to your users in production.
 
 ## Analyze your bundle
 
@@ -31,19 +40,19 @@ DevTools makes it easy to see the size of all network requests:
 {% Instruction 'disable-cache', 'ol' %}
 {% Instruction 'reload-page', 'ol' %}
 
-<img class="w-screenshot" src="./bundle.png" alt="Network panel with bundle request">
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="Network panel with bundle request", width="800", height="169" %}
 
-The [Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)
+The [Coverage](https://developer.chrome.com/docs/devtools/coverage/)
 tab in DevTools will also tell you how much CSS and JS code in your application
 is unused.
 
-<img class="w-screenshot w-screenshot--filled" src="./devtools-sources.png" alt="Code Coverage in DevTools">
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="Code Coverage in DevTools", width="800", height="562" %}
 
 By specifying a full Lighthouse configuration through its Node CLI, an "Unused
 JavaScript" audit can also be used to trace how much unused code is being
 shipped with your application.
 
-<img class="w-screenshot" src="./unused-js.png" alt="Lighthouse Unused JS Audit">
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Lighthouse Unused JS Audit", width="800", height="347" %}
 
 If you happen to be using [webpack](https://webpack.js.org/) as your bundler,
 [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
@@ -68,7 +77,7 @@ can use to analyze your bundle.
 Reloading the application with this plugin included shows a zoomable treemap of
 your entire bundle.
 
-![Webpack Bundle Analyzer](./bundle-view.png)
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468" %}
 
 Using this visualization allows you to inspect which parts of your bundle are
 larger than others, as well as get a better idea of all the libraries that
@@ -103,7 +112,7 @@ that automatically remove unused code from popular libraries](https://github.com
 [Remove unused code.](/codelab-remove-unused-code)
 {% endAside %}
 
-## Remove unneeded libraries
+## Remove unnecessary libraries
 
 Not all libraries can be easily broken down into parts and selectively imported.
 In these scenarios, consider if the library could be removed entirely. Building
diff --git a/src/site/content/en/fast/remove-unused-code/unused-js.png b/src/site/content/en/fast/remove-unused-code/unused-js.png
deleted file mode 100755
index 0ed619cdfc5..00000000000
Binary files a/src/site/content/en/fast/remove-unused-code/unused-js.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/animated-gif.png b/src/site/content/en/fast/replace-gifs-with-videos/animated-gif.png
deleted file mode 100755
index 69bedd75087..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/animated-gif.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/audits-passing.png b/src/site/content/en/fast/replace-gifs-with-videos/audits-passing.png
deleted file mode 100755
index b8821b5ef0d..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/audits-passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/console.png b/src/site/content/en/fast/replace-gifs-with-videos/console.png
deleted file mode 100755
index 8aff5a1e580..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/console.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/cost-savings.png b/src/site/content/en/fast/replace-gifs-with-videos/cost-savings.png
deleted file mode 100755
index cd03b1bf0a8..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/cost-savings.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/index.md b/src/site/content/en/fast/replace-gifs-with-videos/index.md
index 7003e828551..1ef63edd463 100644
--- a/src/site/content/en/fast/replace-gifs-with-videos/index.md
+++ b/src/site/content/en/fast/replace-gifs-with-videos/index.md
@@ -3,25 +3,27 @@ layout: post
 title: Replace animated GIFs with video for faster page loads
 authors:
   - houssein
+  - jlwagner
 description: |
   Have you ever seen an animated GIF on a service like Imgur or Gfycat,
   inspected it in your dev tools, only to find out that GIF was really a video?
   There's a good reason for that. Animated GIFs can be downright huge! By
   converting large GIFs to videos, you can save big on users' bandwidth.
 date: 2018-11-05
-updated: 2019-08-29
+updated: 2022-07-18
 codelabs:
   - codelab-replace-gifs-with-video
 tags:
   - performance
+feedback:
+  - api
 ---
 
 Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected
 it in your dev tools, only to find out that GIF was really a video? There's a
 good reason for that. Animated GIFs can be downright _huge_.
 
-<img class="w-screenshot w-screenshot--filled" src="./animated-gif.png"
-  alt="DevTools network panel showing a 13.7 MB gif.">
+{% Img src="image/admin/3UZ0b9dDotVIXWQT5Auk.png", alt="DevTools network panel showing a 13.7 MB gif.", width="800", height="155" %}
 
 Thankfully, this is one of those areas of loading performance where you can do
 relatively little work to realize huge gains! **By converting large GIFs to
@@ -35,8 +37,7 @@ Lighthouse and check the report.
 If you have any GIFs that can be converted, you should see a suggestion to "Use
 video formats for animated content":
 
-<img class="w-screenshot" src="./use-video-format.png" alt="A failing Lighthouse
-audit, use video formats for animated content.">
+{% Img src="image/admin/KOSr9IivnkyaFk6RJ5u1.png", alt="A failing Lighthouse audit, use video formats for animated content.", width="800", height="173" %}
 
 ## Create MPEG videos
 
@@ -52,6 +53,14 @@ ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420
 This tells FFmpeg to take `my-animation.gif` as the **input**, signified by the
 `-i` flag, and to convert it to a video called `my-animation.mp4`.
 
+The libx264 encoder only works with files that have even dimensions, like 320px
+by 240px. If the input GIF has odd dimensions you can include a crop filter to
+avoid FFmpeg throwing a 'height/width not divisible by 2' error:
+
+```bash
+ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
 ## Create WebM videos
 
 While MP4 has been around since 1999, WebM is a relatively new file format
@@ -69,8 +78,7 @@ ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
 
 The cost savings between a GIF and a video can be pretty significant.
 
-<img class="w-screenshot" src="./cost-savings.png" alt="File size comparison
-showing 3.7 MB for the gif, 551 KB for the mp4 and 341 KB for the webm.">
+{% Img src="image/admin/LWzvOWaOdMnNLTPWjayt.png", alt="File size comparison showing 3.7 MB for the gif, 551 KB for the mp4 and 341 KB for the webm.", width="800", height="188" %}
 
 In this example, the initial GIF is 3.7 MB, compared to the MP4 version, which
 is 551 KB, and the WebM version, which is only 341 KB!
@@ -90,7 +98,7 @@ Luckily, you can recreate these behaviors using the `<video>` element.
 ```
 
 A `<video>` element with these attributes plays automatically, loops endlessly,
-plays no audio, and plays inline (i.e., not full screen), all the hallmark
+plays no audio, and plays inline (that is, not full screen), all the hallmark
 behaviors expected of animated GIFs! 🎉
 
 Finally, the `<video>` element requires one or more `<source>` child elements
@@ -115,3 +123,9 @@ Browsers don't speculate about which `<source>` is optimal, so the order of
 browser supports WebM, browsers will skip the WebM `<source>` and use the MPEG-4
 instead. If you prefer a WebM `<source>` be used first, specify it first!
 {% endAside %}
+
+## Effect on Largest Contentful Paint (LCP)
+
+It should be noted that while `<img>` elements are candidates for LCP, `<video>` elements without a [`poster` image](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster) are not [LCP candidates](/lcp/#what-elements-are-considered). The solution in the case of emulating animated GIFs is _not_ to add `poster` attribute to your `<video>` elements, because that image will go unused.
+
+What does this mean for your website? The recommendation is to stick with using a `<video>` instead of an animated GIF, but with the understanding that such media will not be a candidate for LCP, and the next largest candidate will be used instead. As GIFs and `<video>`s are typically larger and so slower to download, moving to a different LCP candidate will likely even improve the site's LCP.
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/logs.png b/src/site/content/en/fast/replace-gifs-with-videos/logs.png
deleted file mode 100755
index 62761ad591b..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/logs.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/use-video-format.png b/src/site/content/en/fast/replace-gifs-with-videos/use-video-format.png
deleted file mode 100755
index 4ee23649280..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/use-video-format.png and /dev/null differ
diff --git a/src/site/content/en/fast/replace-gifs-with-videos/use-video-formats.png b/src/site/content/en/fast/replace-gifs-with-videos/use-video-formats.png
deleted file mode 100755
index 80fc47396a3..00000000000
Binary files a/src/site/content/en/fast/replace-gifs-with-videos/use-video-formats.png and /dev/null differ
diff --git a/src/site/content/en/fast/serve-images-webp/index.md b/src/site/content/en/fast/serve-images-webp/index.md
index 36079bfd0e6..002c5dea6f3 100644
--- a/src/site/content/en/fast/serve-images-webp/index.md
+++ b/src/site/content/en/fast/serve-images-webp/index.md
@@ -8,11 +8,14 @@ description: |
   magnitude of a 25–35% reduction in filesize. This decreases page sizes and
   improves performance.
 date: 2018-11-05
-updated: 2020-04-06
+updated: 2022-07-18
 codelabs:
   - codelab-serve-images-webp
 tags:
   - performance
+  - web-vitals
+feedback:
+  - api
 ---
 
 ## Why should you care?
@@ -47,7 +50,7 @@ for simple projects or if you'll only need to convert images once.
 When you convert images to WebP, you have the option to set a wide variety of
 compression settings—but for most people the only thing you'll ever need to
 care about is the quality setting. You can specify a quality level from 0
-(worst) to 100 (best). It's worth playing around with this find
+(worst) to 100 (best). It's worth playing around with this, find
 which level is the right tradeoff between image quality and filesize for your
 needs.
 
@@ -118,16 +121,16 @@ serve WebP to newer browsers and a fallback image to older browsers:
 ```
 
 The
-[`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture),
-[`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source),
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture),
+[`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source),
 and `<img>` tags, including how they are ordered relative to each other, all
 interact to achieve this end result.
 
-### picture
+### `<picture>`
 
 The `<picture>` tag provides a wrapper for zero or more `<source>` tags and one `<img>` tag.
 
-### source
+### `<source>`
 
 The `<source>` tag specifies a media resource.
 
@@ -137,11 +140,11 @@ The browser uses the first listed source that's in a format it supports. If the
 
 - The `<source>` tag for the "preferred" image format (in this case that is WebP) should be listed first, before other `<source>` tags.
 
-- The value of the `type` attribute should be the MIME type corresponding to the image format. An image's [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) and its file extension are often similar, but they aren't necessarily the same thing (e.g. `.jpg` vs. `image/jpeg`).
+- The value of the `type` attribute should be the MIME type corresponding to the image format. An image's [MIME type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) and its file extension are often similar, but they aren't necessarily the same thing (e.g. `.jpg` vs. `image/jpeg`).
 
 {% endAside %}
 
-### img
+### `<img>`
 
 The `<img>` tag is what makes this code work on browsers
 that don't support the `<picture>` tag.
@@ -150,10 +153,46 @@ ignore the tags it doesn't support. Thus, it only "sees" the
 `<img src="flower.jpg" alt="">` tag and loads that image.
 
 {% Aside 'gotchas' %}
-- The `<img>` tag should always be included, and it should always be listed last, after all `<source>` tags.
-- The resource specified by the `<img>` tag should be in a universally supported format (e.g. JPEG), so it can be used as a fallback.
+<ul>
+  <li>The `<img>` tag should always be included, and it should always be listed last, after all `<source>` tags.</li>
+  <li>The resource specified by the `<img>` tag should be in a universally supported format (e.g. JPEG), so it can be used as a fallback.</li>
+</ul>
 {% endAside %}
 
+### Reading the HTTP `Accept` header
+
+If you have an application back end or web server that allows you to rewrite requests, you can read the value of the [HTTP `Accept` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept), which will advertise what alternative image formats are supported:
+
+```http
+Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
+```
+
+Reading this request header and rewriting the response based on its contents has the benefit of simplifying your image markup. `<picture>` markup can get rather long with many sources. Below is an Apache `mod_rewrite` rule that can serve WebP alternates:
+
+```apacheconf
+RewriteEngine On
+RewriteCond %{HTTP:Accept} image/webp [NC]
+RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
+RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
+RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
+```
+
+If you go this route, you'll need to set the [HTTP `Vary` response header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Vary) to ensure caches will understand that the image may be served with varying content types:
+
+```apacheconf
+<FilesMatch ".(jpe?g|png)$">
+  <IfModule mod_headers.c>
+    Header set Vary "Content-Type"
+  </IfModule>
+</FilesMatch>
+```
+
+The rewrite rule above will look for a WebP version of any requested JPEG or PNG image. If a WebP alternate is found, it will be served with the proper `Content-Type`  header. This will allow you to use image markup similar to the following with automatic WebP support:
+
+```html
+<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
+```
+
 ## Verify WebP usage
 
 Lighthouse can be used to verify that all images on your site are being served
diff --git a/src/site/content/en/fast/serve-images-with-correct-dimensions/elements-panel.png b/src/site/content/en/fast/serve-images-with-correct-dimensions/elements-panel.png
deleted file mode 100644
index e84e338c5a9..00000000000
Binary files a/src/site/content/en/fast/serve-images-with-correct-dimensions/elements-panel.png and /dev/null differ
diff --git a/src/site/content/en/fast/serve-images-with-correct-dimensions/index.md b/src/site/content/en/fast/serve-images-with-correct-dimensions/index.md
index b46ec3f22bc..43b6953ac8c 100644
--- a/src/site/content/en/fast/serve-images-with-correct-dimensions/index.md
+++ b/src/site/content/en/fast/serve-images-with-correct-dimensions/index.md
@@ -8,6 +8,7 @@ description: |
   page. The image looks fine, but it is wasting users' data and hurting page
   performance.
 date: 2018-11-05
+updated: 2022-08-07
 wf_blink_components: N/A
 codelabs:
   - codelab-serve-images-correct-dimensions
@@ -62,12 +63,14 @@ provides information about the displays of many common devices.
 The DevTools Elements panel can be used to determine what size an image is
 displayed at.
 
-<img src="./elements-panel.png" alt="DevTools element's panel" class="w-screenshot">
+{% Img src="image/admin/pKQa0Huu0KGInOekdz6M.png", alt="DevTools element's panel", width="800", height="364" %}
 
 ### The "Better" approach
 
-For images with sizing based on…
-- **Absolute units:** Use [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset) and [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attributes to serve different images to different display densities. (Read the guide on Responsive Images [here](/serve-responsive-images).)
+For images with both absolute and relative sizing, use [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset)
+and [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes)
+attributes to serve different images to different display densities.
+Read the [guide on responsive images](/serve-responsive-images).
 
 "Display density" refers to the fact that different displays have different
 densities of pixels. All other things being equal, a high pixel density
@@ -86,12 +89,9 @@ Responsive image techniques make this possible by allowing you to list
 multiple image versions and for the device to choose the image that works
 best for it.
 
-- **Relative units:** Use responsive images to serve different images to display sizes. (Read
-the guide [here](/serve-responsive-images).)
-
 An image that works across all devices will be unnecessarily large for
-smaller devices. Responsive image techniques, specifically [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset")
-and [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes), allow you to specify multiple image versions and for the device to choose
+smaller devices. Responsive image techniques, specifically [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset)
+and [sizes](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes), allow you to specify multiple image versions and for the device to choose
 the size that works best for it.
 
 ## Resize images
@@ -122,6 +122,26 @@ If you'll be resizing many images, you may find it more convenient to use a
 script or service to automate the process. You can learn more about this in the
 Responsive Images guide.
 
+## Avoid layout shifts by specifying dimensions
+
+While this guide discusses image dimensions in the context of reducing the amount of unnecessary bytes downloaded, it's important to note that reserving the correct space for images in the layout is another crucial component of minimizing a page's [Cumulative Layout Shift](/cls/) metric. When serving images in HTML, be sure to use proper `width` and `height` attributes so that the browser knows how much space to allocate in the layout for the image:
+
+```html
+<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
+```
+
+Without these attributes, or the equivalent CSS sizing, the browser has no idea how much space the image will take up until it has loaded. This will cause layout shifts in the document, which can be frustrating to users when content moves after they have started consuming it. This can result in users losing their place when reading, or to "miss" their intended hit target and end up clicking on something else they didn't intend to during page load.
+
+An alternative to providing the width and height explicitly, is to use the  CSS [`aspect-ratio` property](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) on the image. This has a similar effect on an element's size that `width` and `height` attributes do in the sense that the container will maintain a consistent aspect ratio. However, the difference is that this may result in a different aspect-ratio being used than the image is provided in, so you will likely want to use an `object-fit` setting to ensure the image is not distorted in this explicit 16/9 view:
+
+```css
+img {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  object-fit: cover;
+}
+```
+
 ## Verify
 
 Once you've resized all your images, re-run Lighthouse to verify that you didn't
diff --git a/src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md b/src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md
index 95d0fbf6346..81cca8fdd67 100755
--- a/src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md
+++ b/src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md
@@ -8,7 +8,7 @@ description: |
   open web ecosystem. However, this means additional work of ensuring that all
   of the code you write is supported in each browser that you plan to target. If
   you want to use new JavaScript language features, you need to transpile these
-  features to backwards-compatible formats.  
+  features to backwards-compatible formats.
 date: 2018-11-05
 updated: 2020-06-23
 codelabs:
@@ -52,10 +52,9 @@ informed decision.
 
 ## Use @babel/preset-env
 
-Transpiling code usually results in a file that is larger than the
-original larger file sizes than their original forms. By minimizing the amount of
-compilation that you do you can reduce the size of your bundles to improve the
-performance of a web page.
+Transpiling code usually results in a file that is larger in file size than
+their original forms. By minimizing the amount of compilation that you do you
+can reduce the size of your bundles to improve the performance of a web page.
 
 Instead of including specific plugins to selectively compile certain language
 features you are using, Babel provides a number of presets that bundles plugins
@@ -115,7 +114,7 @@ them based on the target browsers specified. Although this works well, an entire
 syntax features is transformed when a targeted browser contains a bug with just a single feature.
 This often results in more transformed code than is necessary.
 
-Originally developed as a [separate preset](https://github.com/babel/preset-modules), the 
+Originally developed as a [separate preset](https://github.com/babel/preset-modules), the
 [bugfixes option](https://babeljs.io/docs/en/babel-preset-env#bugfixes) in `@babel/preset-env`
 solves this problem by converting modern syntax that is broken in some browsers to the closest
 equivalent syntax that is not broken in those browsers. The result is nearly identical modern code
@@ -147,7 +146,7 @@ also use them with `@babel/preset-env` to only target browsers that support
 them.
 
 
-Instead of querying for specific browser versions or market share, consider 
+Instead of querying for specific browser versions or market share, consider
 specifying `"esmodules" : true` inside your `.babelrc` file's `targets` field.
 
 ```json
diff --git a/src/site/content/en/fast/serve-responsive-images/index.md b/src/site/content/en/fast/serve-responsive-images/index.md
index d4c094e29af..e685bae1d8b 100644
--- a/src/site/content/en/fast/serve-responsive-images/index.md
+++ b/src/site/content/en/fast/serve-responsive-images/index.md
@@ -8,6 +8,7 @@ description: |
   needed. Instead of a "one-size-fits-all" approach to images, serve different
   image sizes to different devices.
 date: 2018-11-05
+updated: 2022-11-29
 codelabs:
   - codelab-specifying-multiple-slot-widths
   - codelab-art-direction
@@ -20,6 +21,26 @@ Serving desktop-sized images to mobile devices can use 2–4x more data than
 needed. Instead of a "one-size-fits-all" approach to images, serve different
 image sizes to different devices.
 
+## Responsive images and Core Web Vitals
+
+When you serve responsive images, you're evaluating the display capabilities of
+the user's device and choosing one of a set of image candidates that are optimal
+for display based on those criteria. The result&mdash;as stated previously&mdash;is
+rather than delivering too much image data to devices that won't benefit from it,
+you're serving an appropriately sized image for the device. For smaller devices such
+as phones and tablets, this equates to reduced data usage as compared to devices
+with larger screens, such as laptops.
+
+The effects of faster image loading can also extend to your page's [Largest Contentful Paint (LCP)](/lcp/).
+For example, if your page's [LCP element](/lcp/#what-elements-are-considered) is an image,
+you're reducing that LCP candidate's [resource load time](/optimize-lcp/#3-reduce-resource-load-time).
+
+Lower resource load times will lower the load time for an LCP image, which will improve
+the page's LCP score. A lower LCP means users will perceive that your site is loading faster,
+particularly the largest piece of content visible in the viewport during page load. Serving
+responsive images can also reduce bandwidth contention for other resources on the page,
+which can improve how fast your page loads in general.
+
 ## Resize images
 
 Two of the most popular image resizing tools are the [sharp npm
@@ -89,7 +110,7 @@ images.
 Specify multiple image versions and the browser will choose the best one to
 use:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -113,10 +134,10 @@ use:
 
 
 The `<img>` tag's
-[`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src),
-[`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset),
+[`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src),
+[`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset),
 and
-[`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
+[`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
 attributes all interact to achieve this end result.
 
 ### The "src" attribute
@@ -155,7 +176,7 @@ Use the `w` unit (instead of `px`) to write width descriptors. For example, a
 You don't need to know about density descriptors to serve different image sizes.
 However, if you're curious about how density descriptors work, check out the
 [Resolution Switching code lab](/codelab-density-descriptors).
-Density descriptors are used to serve different images based on the_ device's
+Density descriptors are used to serve different images based on the device's
 [pixel density](https://en.wikipedia.org/wiki/Pixel_density).
 
 ### The "sizes" attribute
@@ -197,7 +218,7 @@ to learn how to do this.
 
 In addition to all the extra credit already listed (images are complex!), you
 can also use these same concepts for
-[art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction).
+[art direction](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction).
 Art direction is the practice of serving completely different looking images
 (rather than different versions of the same image) to different viewports. You
 can learn more in the [Art Direction code lab](/codelab-art-direction).
diff --git a/src/site/content/en/fast/signed-exchanges-webpackager/index.md b/src/site/content/en/fast/signed-exchanges-webpackager/index.md
new file mode 100644
index 00000000000..634235e6814
--- /dev/null
+++ b/src/site/content/en/fast/signed-exchanges-webpackager/index.md
@@ -0,0 +1,385 @@
+---
+layout: post
+title: How to set up Signed Exchanges using Web Packager
+subhead: |
+  Learn how to serve signed exchanges (SXGs) using Web Packager.
+authors:
+  - katiehempenius
+date: 2020-02-19
+update: 2020-02-28
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/f7TRFlVQv5w58A2Cbpg7.jpg
+alt: Abstract photo
+description: |
+  Learn how to serve signed exchanges (SXGs) using Web Packager.
+tags:
+  - blog
+  - performance
+---
+
+A [signed exchange (SXG)](/signed-exchanges) is a delivery mechanism that makes it
+possible to authenticate the origin of a resource independently of how it was delivered.
+The following instructions explain how to set up Signed Exchanges using
+[Web Packager](https://github.com/google/webpackager). Instructions are included for
+both self-signed and `CanSignHttpExchanges` certificates.
+
+
+## Serve SXGs using a self-signed certificate
+
+Using a self-signed certificate to serve SXGs is primarily used for
+demonstration and testing purposes. SXGs signed with a self-signed certificate
+will generate error messages in the browser when used outside of testing
+environments and should not be served to crawlers.
+
+### Prerequisites
+
+To follow these instructions you will need to have
+[openssl](https://github.com/openssl/openssl#build-and-install) and
+[Go](https://golang.org/doc/install) installed in your development environment.
+
+
+### Generate a self-signed certificate
+
+This section explains how to generate a self-signed certificate that can be
+used with signed exchanges.
+
+#### Instructions
+
+1. Generate a private key.
+
+    ```shell
+    openssl ecparam -out priv.key -name prime256v1 -genkey
+    ```
+
+    The private key will be saved as a file named `priv.key`.
+
+2. Create a [certificate signing
+   request](https://en.wikipedia.org/wiki/Certificate_signing_request) (CSR).
+
+    ```shell
+    openssl req -new -sha256 -key priv.key -out cert.csr -subj '/O=Web Packager Demo/CN=example.com'
+    ```
+
+    A certificate signing request is a block of encoded text that conveys the
+    information necessary to request a certificate from a [certificate authority(CA)](https://en.wikipedia.org/wiki/Certificate_authority). Although you will not be requesting a certificate from a
+    CA, it is still necessary to create a certificate signing request.
+
+    The command above creates a certificate signing request for an organization
+    named `Web Packager Demo` that has the [common
+    name](https://knowledge.digicert.com/solution/SO7239.html) `example.com`. The
+    common name should be the fully qualified domain name of the site that contains
+    the content that you want to package as SXG.
+
+    In a production SXG setup, this would be a site that you own. However, in a
+    testing environment like the one described in these instructions, it can be any
+    site.
+
+3. Create a certificate that has the `CanSignHttpExchanges` extension.
+
+    ```shell
+    openssl x509 -req -days 90 -in cert.csr -signkey priv.key -out cert.pem -extfile <(echo -e "1.3.6.1.4.1.11129.2.1.22 = ASN1:NULL\nsubjectAltName=DNS:example.com")
+    ```
+
+    This command uses the private key and the CSR created in steps 1 and 2 to create the
+    certificate file `cert.pem`. The `-extfile` flag associates the certificate with
+    the `CanSignHttpExchanges` certificate extension (`1.3.6.1.4.1.11129.2.1.22` is
+    the [object
+    identifier](https://access.redhat.com/documentation/en-us/red_hat_certificate_system/9/html/administration_guide/standard_x.509_v3_certificate_extensions)
+    for the `CanSignHttpExchanges` extension). In addition, the `-extfile` flag also
+    defines `example.com` as a [Subject Alternative
+    Name](https://en.wikipedia.org/wiki/Subject_Alternative_Name).
+
+    If you are curious about the contents of `cert.pem`, you can view them using the
+    following command:
+
+    ```shell
+    openssl x509 -in cert.pem -noout -text
+    ```
+
+    You are done creating private keys and certificates. You will need the
+    `priv.key` and `cert.pem` files in the next section.
+
+
+### Setup the Web Packager server for testing
+
+
+#### Prerequisites
+
+
+
+1. Install [Web Packager](https://github.com/google/webpackager).
+
+    ```shell
+    git clone https://github.com/google/webpackager.git
+    ```
+
+
+
+2. Build `webpkgserver`.
+
+    ```shell
+    cd webpackager/cmd/webpkgserver
+    go build .
+    ```
+
+    `webpkgserver` is a specific binary within the Web Packager project.
+
+
+
+3. Verify that `webpkgserver` has been installed correctly.
+
+    ```shell
+    ./webpkgserver --help
+    ```
+
+    This command should return information about the usage of `webpkgserver`. If
+    this does not work, a good first troubleshooting step is to verify that your
+    [GOPATH](https://golang.org/doc/gopath_code.html#GOPATH) is configured
+    correctly.
+
+
+#### Instructions
+
+
+
+1. Navigate to the `webpkgserver` directory (you might already be in this
+   directory).
+
+    ```shell
+    cd /path/to/cmd/webpkgserver
+    ```
+
+
+
+2. Create a `webpkgsever.toml` file by copying the example.
+
+    ```shell
+    cp ./webpkgserver.example.toml ./webpkgserver.toml
+    ```
+
+    This file contains the configuration options for `webpkgserver`.
+
+
+
+3. Open `webpkgserver.toml` with an editor of your choice and make the following
+   changes:
+    *   Change the line `#AllowTestCert = false` to `AllowTestCert = true`.
+    *   Change the line `PEMFile = 'path/to/your.pem'` to reflect the path to
+        the PEM certificate, `cert.pem`, that you created. Do not change the
+        line mentioning `TLS.PEMFile`—this is a different configuration option.
+    *   Change the line `KeyFile = 'priv.key'` to reflect the path of the
+        private key, `priv.key`, that you created. Do not change the line
+        mentioning `TLS.KeyFile`—this is a different configuration option.
+    *   Change the line `#CertURLBase = '/webpkg/cert'` to `CertURLBase =
+        'data:'`. `CertURLBase` indicates the serving location of the SXG
+        certificate. This information is used to set the `cert-url` parameter in
+        the
+        [`Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-the-signature-header)
+        header of the SXG. In production environments, `CertURLBase` is used
+        like this: `CertURLBase = 'https://mysite.com/'`. However, for local
+        testing, `CertURLBase = 'data:'` can be used to instruct `webpkgserver`
+        to use a [data
+        URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+        to inline the certificate in the `cert-url` field. For local testing,
+        this is the most conveninent way to serve the SXG certificate.
+    *   Change the line `Domain = 'example.org'` to reflect the domain that you
+        created a certificate for. If you have followed the instructions in this
+        article verbatim, this should be changed to `example.com`.
+        `webpkgserver` will only fetch content from the domain indicated by
+        `webpkgserver.toml`. If you try to fetch pages from a different domain
+        without updating `webpkgserver.toml`, the `webpkgserver` logs will show
+        the error message `URL doesn't match the fetch targets`.
+
+    **Optional**
+
+    If you want to enable or disable [subresource
+    preloading](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md),
+    the following `webpkgserver.toml` configuration options are relevant:
+
+    *   To have `webpkgserver` insert directives for preloading stylesheet
+        and script subresources as SXGs, change the line `#PreloadCSS = false`
+        to `PreloadCSS = true`. In addition, change the line `#PreloadJS =
+        false` to `PreloadJS = true`.
+
+        As an alternative to using this configuration option, you can manually
+        add `Link: rel="preload"` headers and `<link rel="preload">` tags to a
+        page's HTML.
+
+    *   By default, `webpkgserver` replaces existing `<link rel="preload">` tags
+        with the equivalent `<link>` tags necessary for fetching this content as
+        SXG. In doing so, `webpkgserver` will set the
+        [`allowed-alt-sxg`](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md#use-cases)
+        and
+        [`header-integrity`](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md#use-cases)
+        directives as needed—HTML authors do not need to add these by hand. To
+        override this behavior and keep existing non-SXG preloads, change
+        `#KeepNonSXGPreloads (default = false)` to `KeepNonSXGPreloads = true`.
+        Keep in mind that enabling this option may make the SXG ineligible for
+        the Google SXG cache per these
+        [requirements](https://github.com/google/webpackager/blob/main/docs/cache_requirements.md).
+
+4. Start `webpkgserver`.
+
+    ```shell
+    ./webpkgserver
+    ```
+
+    If the server has started successfully, you should see the following log messages:
+    ```shell
+    Listening at 127.0.0.1:8080
+    Successfully retrieved valid OCSP.
+    Writing to cache in /private/tmp/webpkg
+    ```
+
+    Your log messages may look slightly different. In particular, the directory
+    that `webpkgserver` uses to cache certificates varies by operating system.
+
+    If you do not see these messages, a good first troubleshooting
+    step is to double-check `webpkgserver.toml`.
+
+    If you update `webpkgserver.toml` you should restart `webpkgserver`.
+
+5. Launch Chrome using the following command:
+    ```shell
+    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
+    --user-data-dir=/tmp/udd \
+    --ignore-certificate-errors-spki-list=`openssl x509 -noout -pubkey -in cert.pem | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64`
+    ```
+
+    This command instructs Chrome to ignore the certificate errors associated
+    with `cert.pem`. This makes it possible to test SXGs using a test
+    certificate. If Chrome is launched without this command, inspecting the SXG
+    in DevTools will display the error `Certificate verification error:
+    ERR_CERT_INVALID`.
+
+    **Note:**
+
+    You may need to adjust this command to reflect the location of Chrome on
+    your machine, as well as the location of `cert.pem`. If you've done this
+    correctly, you should see a warning displayed below the address bar. The
+    warning should be similar to this: `You are using an unsupported
+    command-line flag:
+    --ignore-certificate-errors-spki-list=9uxADcgc6/ho0mJLRMBcOjfBaN21k0sOInoMchr9CMY=.`
+
+    If the warning does not include a hash string, you have not correctly
+    indicated the location of the SXG certificate.
+
+
+6. Open the DevTools **Network** tab, then visit the following URL:
+   `http://localhost:8080/priv/doc/https://example.com`.
+
+   This makes a request to the `webpackager` instance running at
+   `http://localhost:8080` for a SXG containing the contents of
+   `https://example.com`. `/priv/doc/` is the default API endpoint used by
+   `webpackager`.
+
+  {% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/DPw05KcHLdWOgHYiDsgf.png",
+    alt="Screenshot of the DevTools Network tab showing a SXG and its certificate.",
+    width="800",
+    height="236"
+  %}
+
+  The following resources are listed in the **Network** tab:
+  * A resource with the type `signed-exchange`. This is the SXG.
+  * A resource with the type `cert-chain+cbor`. This the SXG certificate. SXG certificates must use the `application/cert-chain+cbor` format.
+  * A resource with the type `document`. This is the content that has been delivered via SXG.
+
+  If you don't see these resources, try clearing the browser cache, then
+  reloading `http://localhost:8080/priv/doc/https://example.com`.
+
+
+  Click on the **Preview** tab to see more information about the Signed Exchange
+  and its signature.
+
+  {% Img
+    src="image/j2RDdG43oidUy6AL6LovThjeX9c2/x9hfT6ZJ8OuB4M1ImWic.png",
+    alt="Screenshot of the Preview tab showing a SXG",
+    width="800",
+    height="541"
+  %}
+
+
+## Serve signed exchanges using a `CanSignHttpExchanges` certificate
+
+  The instructions in this section explain how to serve SXGs using a
+  `CanSignHttpExchanges` certificate. Production use of SXGs requires a
+  `CanSignHttpExchanges` certificate.
+
+  For the sake of brevity, these instructions are written with the assumption
+  that you understand the concepts discussed in the [Setup Signed Exchanges
+  using a self-signed
+  certificate](/signed-exchanges-webpackager/#serve-sxgs-using-a-self-signed-certificate)
+  section.
+
+
+### Prerequisites
+
+*  You have a `CanSignHttpExchanges` certificate. This
+     [page](https://github.com/google/webpackager/wiki/Certificate-Authorities)
+     lists the CAs that offer this type of certificate.
+   
+*  If you don't have a certificate, then you can configure your webpkgserver to
+   automatically retrieve certificates from your CA. You can follow the
+   directions for what goes in `webpkgserver.toml` in this
+   [page](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md#configuration).
+
+*  Although not a requirement, it is strongly recommended that you run
+   `webpkgserver` behind an edge server. If you do not use an edge server, you
+   will need to configure the `TLS.PEMFile` and `TLS.KeyFile` options in
+   `webpkgserver.toml`. By default, `webpkgserver` runs over HTTP. However, SXG
+   certificates must be served over HTTPS to be considered valid by the browser.
+   Configuring `TLS.PEMFile` and `TLS.KeyFile` allows `webpkgserver` to use
+   HTTPS and therefore serve the SXG certificate directly to the browser.
+
+
+
+
+
+#### Instructions
+
+
+1. Create a PEM file by concatenating your site's SXG certificate followed by
+   your site's CA certificate. More instructions on this can be found
+   [here](https://www.digicert.com/kb/ssl-support/pem-ssl-creation.htm).
+
+   [PEM](https://en.wikipedia.org/wiki/X.509#Certificate_filename_extensions) is
+   a file format that is commonly used as a "container" for storing multiple
+   certificates.
+
+2. Create a fresh `webpkgsever.toml` file by copying the example.
+
+    ```shell
+    cp ./webpkgserver.example.toml ./webpkgserver.toml
+    ```
+
+3. Open `webpkgserver.toml` with the editor of your choice and make the
+   following changes:
+    *   Change the line `PEMFile = cert.pem` to reflect the location of the PEM
+        file containing your full certificate chain.
+    *   Change the line `KeyFile = 'priv.key'` to reflect the location of the
+        private key corresponding to your PEM File.
+    *   Change the line `Domain = 'example.org'` to reflect your site.
+    *   (Optional) To have `webpkgserver` auto-renew the SXG certificate every
+        90 days (45 days for Google), configure the options in the `[SXG.ACME]` section of
+        `webpkgserver.toml`. This option only applies to sites with a DigiCert
+        or Google ACME account setup.
+
+3.  Configure your edge server to forward traffic to the `webpkgserver`
+    instance.
+
+    There are two primary types of requests handled by `webpkgserver`: requests
+    for SXGs (which are served by the `/priv/doc/` endpoint) and requests for
+    the SXG certificate (which are served by the `/webpkg/cert/` endpoint). The
+    URL rewriting rules for each of these request types varies slightly. For
+    more information, see [Running behind front end edge
+    server](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md#running-behind-front-end-edge-server).
+
+    **Note:**
+
+    By default, `webpkgserver` serves the SXG certificate at
+    `/webpkg/cert/$CERT_HASH`—for example,
+    `/webpkg/cert/-0QmE0gvoedn92gtwI3s7On9zPevJGm5pn2RYhpZxgY`.
+    To generate `$CERT_HASH`, run the following command:
+    ```shell
+    openssl base64 -in cert.pem -d | openssl dgst -sha256 -binary | base64 | tr /+ _- | tr -d =
+    ```
diff --git a/src/site/content/en/fast/signed-exchanges/index.md b/src/site/content/en/fast/signed-exchanges/index.md
new file mode 100644
index 00000000000..e55578df134
--- /dev/null
+++ b/src/site/content/en/fast/signed-exchanges/index.md
@@ -0,0 +1,361 @@
+---
+layout: post
+title: Signed Exchanges (SXGs)
+subhead: |
+  An SXG is a delivery mechanism that makes it possible to authenticate the
+  origin of a resource independently of how it was delivered.
+authors:
+  - katiehempenius
+  - twifkak
+date: 2020-10-14
+updated: 2022-09-03
+hero: image/admin/6ll3P8MYWxvtb1ZjXIzb.jpg
+alt: A pile of envelopes.
+description: |
+  An SXG is a delivery mechanism that makes it possible to authenticate the
+  origin of a resource independently of how it was delivered.
+tags:
+  - blog
+  - performance
+---
+
+Signed exchanges (SXG) are a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered. Implementing SXG can improve Largest Contentful Paint (LCP) by enabling [privacy-preserving cross-origin prefetch](#speeding-up-page-loads-with-signed-exchanges). Additionally, this decoupling advances a variety of use cases such as offline internet experiences and serving from third-party caches.
+
+This article provides a comprehensive overview of SXG: how it works, use cases, and tooling.
+
+## Browser compatibility {: #browser-compatibility }
+
+SXG is [supported](https://caniuse.com/#feat=sxg) by Chromium-based browsers
+(starting with versions: Chrome 73, Edge 79, and Opera 64).
+
+## Overview
+
+As its primary use case, SXG uses a cache to prefetch and serve content that has been cryptographically signed by the origin. This helps speed cross origin navigations from referer sites while also ensuring that pages remain unaltered and properly attributed to their origin. Any potentially identifying information is hidden until after the user navigates to a site thereby protecting the user’s privacy.
+Google Search is an early adopter of SXG prefetching capabilities and for sites that receive a large portion of their traffic from Google Search, SXG can be an important tool for delivering faster page loads to users. Over time, we hope this impact will expand to additional referrers. 
+
+### How it Works
+
+A site signs a request/response pair (an "HTTP exchange") in a way that makes it possible for
+the browser to verify the origin and integrity of the content independently of
+how the content was distributed. As a result, the browser can display the URL of
+the origin site in the address bar, rather than the URL of the server that
+delivered the content.
+
+{% Img src="image/GiC3si2rdySvEXRggAJBPhgTHFr2/kGUL8NalZ2OaC81a5q8g.PNG", alt="Diagram explaining how Signed Exchanges Works. Browser communicating with the cache which communicates with the destination site", width="800", height="392" %}
+
+Historically, the only way for a
+site to use a third-party to distribute its content while maintaining
+attribution has been for the site to share its SSL certificates with the
+distributor. This has security drawbacks; moreover, it is a far stretch from
+making content truly portable.
+
+### The SXG format
+
+An SXG is encapsulated in a [binary-encoded](https://cbor.io/) file that has two
+primary components: an HTTP exchange and a
+[signature](https://developer.mozilla.org/docs/Glossary/Signature/Security)
+that covers the exchange. The HTTP exchange consists of a request URL, content
+negotiation information, and an HTTP response.
+
+{% Details %}
+{% DetailsSummary %}
+
+Here's an example of a decoded SXG file.
+{% endDetailsSummary %}
+
+```html
+format version: 1b3
+request:
+  method: GET
+  uri: https://example.org/
+  headers:
+response:
+  status: 200
+  headers:
+    Cache-Control: max-age=604800
+    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
+    Expires: Mon, 24 Aug 2020 16:08:24 GMT
+    Content-Type: text/html; charset=UTF-8
+    Content-Encoding: mi-sha256-03
+    Date: Mon, 17 Aug 2020 16:08:24 GMT
+    Vary: Accept-Encoding
+signature:
+    label;cert-sha256=*ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=*;
+    cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
+    date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=*MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=*;
+    validity-url="https://example.org/webpkg/validity"
+header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=
+
+The exchange has a valid signature.
+payload [1256 bytes]:
+<!doctype html>
+<html>
+<head>
+    <title>SXG example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+<div>
+    <h1>Hello</h1>
+</div>
+</body>
+</html>
+```
+
+{% endDetails %}
+
+The `expires` parameter in the signature indicates a SXG's expiration date. A
+SXG may be valid for at most 7 days. Find more information on
+the signature header in the [Signed HTTP Exchanges
+spec](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-3.1).
+
+#### Support for server-side personalization
+
+An SXG containing a `Vary: Cookie` header will be shown only to users who don't
+have cookies for the signed request URL. If your site presents different HTML
+to its logged-in users, you can use this feature to take advantage of SXGs
+without altering that experience. See details on [server-side personalization
+with Dynamic SXG](/blog/sxg-desktop/#support-for-server-side-personalization).
+
+### Web Packaging
+
+SXG is part of the broader [Web
+Packaging](https://github.com/WICG/webpackage) spec proposal family. In addition
+to SXGs, the other major component of the Web Packaging spec is [Web Bundles](/web-bundles/)
+("bundled HTTP exchanges"). Web Bundles are a collection of HTTP resources and
+the metadata necessary to interpret the bundle.
+
+The relationship between SXGs and Web Bundles is a common point of confusion.
+SXG and Web Bundles are two distinct technologies that don't depend on each
+other—Web Bundles can be used with both signed and unsigned exchanges. A common
+goal advanced by both SXGs and Web Bundles is the creation of a "web packaging"
+format that allows sites to be shared in their entirety for offline consumption.
+
+
+## Speeding up Page Loads with Signed Exchanges
+
+Enabling Signed Exchanges can help speed up web page performance and thereby impact your site’s Core Web Vitals, in Particular [Largest Contentful Paint (LCP)](/lcp/). As an early adopter, Google Search uses SXG to provide users with a faster page load experience for pages loaded from the search results page. 
+
+
+Google Search crawls and caches SXGs when available and prefetches SXG that the user is likely to visit—for example, the page corresponding to the first search result.
+
+SXG works best in tandem with other performance optimizations such as use of CDNs and reduction of render-blocking subresources. After implementing, follow [these recommendations](https://developer.chrome.com/blog/optimizing-lcp-using-signed-exchanges/) to maximize the LCP benefit from prefetching SXGs. In many cases, such optimization can result in nearly instant page loads coming from Google Search:
+
+{% Video src="video/rULxC7pPw3PFS4o9xr7v8isFmCv1/MQwtXWQD41XWNTzRHLie.mp4", controls=true, poster="image/rULxC7pPw3PFS4o9xr7v8isFmCv1/cdP5lEt76GS8N3Bix2X2.jpg" %}
+
+### Impact of Signed Exchanges 
+
+From past experiments we have observed an average of 300ms to 400ms reduction in LCP from SXG-enabled prefetches. This helps sites make a better first-impression on users and often has a positive impact on business metrics. 
+
+Several global brands and sites have already benefited from Signed Exchanges. As a case study, lets look at how implementing Signed Exchanges helped [RebelMouse](https://www.rebelmouse.com/signed-exchange?utm_medium=post&utm_source=google&utm_campaign=signed-exchange-co-marketing&utm_content=signed-exchange), a prominent Content Management System (CMS), improve their customers' performance and business metrics:
+
+- Narcity **improved LCP by 41%**
+- Paper Magazine noticed a **27% increase in Sessions per user** 
+- MLT Blog **decreased Page Load time by 21%**
+
+[Cloudflare found](https://blog.cloudflare.com/automatic-signed-exchanges-desktop-android/) that SXG **improved TTFB for 98% of sites** it tested, and **improved LCP for 85% of sites**, with a median improvement of over 20% in SXG-eligible page loads.
+
+{% Aside %}
+SXG enables [cross-origin prefetching](https://developer.chrome.com/blog/cross-origin-prefetch/) because it allows prefetch requests via an SXG cache server operated by the referrer, ensuring that the user's potentially identifying information is not revealed to the origin server until they navigate. This technique is available to any site that wishes to make its outlinks faster or more resilient to limited network access.
+{% endAside %}
+
+#### Indexing
+
+The SXG and non-SXG representations of a page are not ranked or indexed
+differently by Google Search. SXG is ultimately a delivery mechanism—it does not
+change the underlying content. 
+
+### AMP
+
+AMP content can be delivered using SXG. SXG allows AMP content to be prefetched
+and displayed using its canonical URL, rather than its AMP URL.AMP has its own separate
+[tooling](https://github.com/ampproject/amppackager) for generating SXGs.Learn how to serve AMP using signed exchanges on
+[amp.dev](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/).
+
+
+## Debugging SXGs with Chrome DevTools {: #debugging }
+
+To see a SXG firsthand, use a Chromium browser, open DevTools, open the Network panel, and visit this [example search page](https://www.google.com/search?q=site%3Asigned-exchange-testing.dev+valid). Signed Exchanges can be identified by looking for `signed-exchange` in the **Type** column.
+
+<figure>
+  {% Img src="image/admin/cNdohSaeXqGHFBwD7L3B.png", alt="Screenshot showing a SXG request within the 'Network' panel in DevTools", width="696", height="201" %}
+  <figcaption>The <b>Network</b> panel in DevTools</figcaption>
+</figure>
+
+The **Preview** tab provides more information about the contents of a SXG.
+
+<figure>
+  {% Img src="image/admin/E0rBwuxk4BxFmLJ3gXhP.png", alt="Screenshot of the 'Preview' tab for a SXG", width="800", height="561" %}
+  <figcaption>The <b>Preview</b> tab in DevTools</figcaption>
+</figure>
+
+## Tooling
+
+Implementing SXGs consists of generating the SXG corresponding to a given URL
+and then serving that SXG to requestors (usually crawlers). 
+
+### Certificates
+
+To generate a SXG you will need a certificate that can sign SXGs, although some tools acquire these automatically. [This page](https://github.com/google/webpackager/wiki/Certificate-Authorities) lists the certificate authorities that can issue this type of certificate.
+Certificates can be obtained automatically from the Google certificate authority using any ACME client. Web Packager Server has a built-in ACME client, and sxg-rs will soon.
+
+{% Aside %}
+Production use of SXGs requires a certificate that supports the
+`CanSignHttpExchanges` extension. Per
+[spec](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-4.2),
+certificates with this extension must have a validity period no longer than 90
+days and require that the requesting domain have a [DNS CAA
+record](https://en.wikipedia.org/wiki/DNS_Certification_Authority_Authorization)
+configured.
+{% endAside %}
+
+### Platform-specific SXG tooling
+
+These tools support specific technology stacks. If you are already using a
+platform supported by one of these tools, you may find it easier to set up than
+a general-purpose tool.
+
+- [`sxg-rs/cloudflare_worker`](https://github.com/google/sxg-rs/tree/main/cloudflare_worker)
+  runs on [Cloudflare Workers](https://workers.cloudflare.com/).
+
+- [`sxg-rs/fastly_compute`](https://github.com/google/sxg-rs/tree/main/fastly_compute)
+  runs on [Fastly
+  Compute@Edge](https://www.fastly.com/products/edge-compute/serverless).
+
+- [Automatic Signed
+  Exchanges](https://blog.cloudflare.com/automatic-signed-exchanges/) is a
+  Cloudflare feature that automatically acquires certificates and generates
+  Signed Exchanges.
+
+- [NGINX SXG module](https://github.com/google/nginx-sxg-module) generates
+  and serves SXGs for sites that use [nginx](https://nginx.org/). Setup
+  instructions can be found [here](/how-to-set-up-signed-http-exchanges/).
+
+- [Envoy SXG
+  Filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/sxg_filter)
+  generates and serves SXGs for sites that use
+  [Envoy](https://www.envoyproxy.io/).
+
+### General-purpose SXG tooling
+
+#### sxg-rs HTTP server
+
+The [sxg-rs
+http\_server](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md)
+acts as a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy) for
+serving SXGs. For requests from SXG crawlers, `http_server` will sign the
+responses from the backend and respond with an SXG. For installation
+instructions, see [the
+README](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md).
+
+#### Web Packager Server
+
+The [Web Packager
+Server](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md),
+`webpkgserver`, is an alternative to sxg-rs http\_server, written in Go. For
+instructions on setting up the Web Packager server, see [How to set up signed
+exchanges using Web Packager](/signed-exchanges-webpackager).
+
+#### Web Packager CLI
+
+The [Web Packager CLI](https://github.com/google/webpackager) generates a SXG
+corresponding to a given URL.
+
+```shell
+webpackager \
+    --private\_key=private.key \
+    --cert\_url=https://example.com/certificate.cbor \
+    --url=https://example.com
+```
+
+Once the SXG file has been generated, upload it to your server and serve it with
+the `application/signed-exchange;v=b3` MIME type. In addition, you will need to
+serve the SXG certificate as `application/cert-chain+cbor`.
+
+### SXG libraries
+
+These libraries could be used to build your own SXG generator:
+
+- [`sxg_rs`](https://github.com/google/sxg-rs/tree/main/sxg_rs) is a Rust library for
+  generating SXGs. It is the most featureful SXG library and is used as the
+  basis for the `cloudflare_worker` and `fastly_compute` tools.
+
+- [`libsxg`](https://github.com/google/libsxg) is a minimal C library for
+  generating SXGs. It is used as the basis for the NGINX SXG module and the
+  Envoy SXG Filter.
+
+- [`go/signed-exchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange)
+  is a minimal Go library provided by the webpackage specification as a
+  [reference
+  implementation](https://en.wikipedia.org/wiki/Reference_implementation) of
+  generating SXGs. It is used as the basis for its reference CLI tool,
+  [`gen-signedexchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange)
+  and the more featureful Web Packager tools.
+  
+### Content negotiation
+
+Servers should serve SXG when the Accept header indicates that the q-value for application/signed-exchange is greater than or equal to the q-value for text/html. In practice, this means that an origin server will serve SXG to crawlers, but not browsers. Many of the above tools do this by default, but for other tools, the following regular expression can be used to match the Accept header of requests that should be served as SXG:
+```http
+Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
+```
+
+[This recommendation](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md#content-negotiation) includes examples for Apache and nginx.
+
+{% Aside %}
+SXG can deliver superior performance when used with caching or prefetching. However, for content that is loaded directly from the origin server without the benefit of these optimizations, text/html delivers better performance than SXG. Serving content as SXG allows crawlers and other intermediaries to cache SXGs for faster delivery to users.
+{% endAside %}
+
+### Update cache API
+
+The Google SXG Cache has an API that site owners can use to remove SXGs from the cache before they've expired due to `Cache-Control: max-age`. See the [update cache API reference](https://github.com/google/webpackager/blob/main/docs/update_cache_api.md) for details.
+
+### Linking to SXG
+
+Any site can cache, serve, and prefetch SXGs of the pages that it links to, where available, using the <link> and <a> tags:
+```html
+<a href="https://example.com/article.html.sxg">
+<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
+```
+[This article](/how-to-distribute-signed-http-exchanges/) illustrates how to use nginx to distribute SXGs.
+
+## Unique Advantages
+
+SXG is one of many possible technologies to enable cross-origin prefetching. When deciding which technology to use, you may need to trade off between optimizing different aspects. The following sections illustrate a few of the unique values that SXG provides in the space of possible solutions. These factors may change over time as the space of available solutions evolves.
+
+### Fewer requests to serve
+
+With cross-site prefetching, your server may need to serve additional requests. This corresponds to cases where a page was prefetched, but either the user didn't visit the page, or the prefetched bytes couldn't be shown to the user. For SXG, these additional unused requests can be significantly reduced:
+
+- SXGs are cached and may be sent to users until they expire. Thus, many prefetches can be handled solely by the cache server.
+- SXGs can be shown to users both with and without cookies on your site. Thus, there are fewer times when the page will need to be fetched again after navigation.
+
+### Page speed improvement
+
+You may see additional page speed improvement due to the prefetch surfaces and capabilities it currently supports:
+
+- SXGs can be shown to users with cookies for your site.
+- SXG also prefetches subresources for your pages, such as JavaScript, CSS, fonts, and images, when specified using a `Link` header.
+- In the near future, SXG prefetching from Google Search will be available on more search result types.
+
+## Conclusion
+ 
+Signed Exchanges are a delivery mechanism that make it possible to verify the
+origin and validity of a resource independently of how the resource was
+delivered. As a result, SXGs can be distributed by third-parties while
+maintaining full publisher attribution.
+
+## Further reading
+
+*   [Draft spec for Signed HTTP Exchanges](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html)
+*   [Web Packaging explainers](https://github.com/WICG/webpackage/tree/main/explainers)
+*   [Get started with signed exchanges on Google Search](https://developers.google.com/search/docs/advanced/experience/signed-exchange)
+*   [How to set up Signed Exchanges using Web Packager](/signed-exchanges-webpackager)
+*   [Demo of Signed Exchanges](https://signed-exchange-testing.dev/)
diff --git a/src/site/content/en/fast/third-party-javascript/index.md b/src/site/content/en/fast/third-party-javascript/index.md
index 01a547a6b32..b6606e14d86 100644
--- a/src/site/content/en/fast/third-party-javascript/index.md
+++ b/src/site/content/en/fast/third-party-javascript/index.md
@@ -13,7 +13,7 @@ alt: A diagram of a webpage featuring text, a video, a map, a chat widget, and s
 tags:
   - blog
   - performance
-  - third-party
+  # - third-party
 ---
 
 Third-party JavaScript generally refers to scripts embedded in your website that are:
@@ -29,16 +29,14 @@ Sites use these scripts for various purposes, including:
 - A/B testing scripts for experiments
 - Helper libraries (like date formatting, animation, and functional libraries)
 
-<figure class="w-figure w-figure--fullbleed">
-  <video autoplay loop muted playsinline>
-    <source src="./third-party-examples.mp4" type="video/mp4">
-  </video>
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/uLXJ72jZAlzK56ctPwXd.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}
 </figure>
 
 Third-party scripts can provide powerful functionality, but that's not the whole story. They also affect privacy, security, and page behavior⁠—and they can be particularly problematic for performance.
 
 ## Performance
-Any significant amount of [JavaScript can slow down performance](/bootup-time). But because third-party JavaScript is usually outside your control, it can bring additional issues.
+Any significant amount of [JavaScript can slow down performance](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/). But because third-party JavaScript is usually outside your control, it can bring additional issues.
 
 ### Network
 Setting up connections takes time, and sending too many requests to multiple servers causes slowdowns. That time is even longer for secure connections, which may involve DNS lookups, redirects, and several round trips to the final server that handles the user's request.
@@ -46,8 +44,8 @@ Setting up connections takes time, and sending too many requests to multiple ser
 Third-party scripts often add to network overhead with things such as:
 - Firing additional network requests
 - Pulling in unoptimized images and videos
-- Insufficient [HTTP caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching), which forces frequent fetching of network resources
-- Insufficient [server compression](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer) of resources
+- Insufficient [HTTP caching](/http-cache/), which forces frequent fetching of network resources
+- Insufficient [server compression](/optimizing-content-efficiency-optimize-encoding-and-transfer/) of resources
 - Multiple instances of frameworks and libraries pulled in by different third-party embeds
 
 ### Rendering
@@ -60,7 +58,7 @@ The __critical rendering path__ includes all resources that the browser needs to
 If a third party has server issues and fails to deliver a resource, rendering is blocked until the request times out, which can be anywhere from 10 to 80 seconds. You can test and simulate this problem with [WebPageTest Single-Point-of-Failure tests](https://css-tricks.com/use-webpagetest-api/#single-point-of-failure).
 
 {% Aside %}
-[A/B testing scripts](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/#ab_test_smaller_samples_of_users) can also often delay rendering. Most of them block content display until they complete processing—which can be true even for asynchronous A/B testing scripts.
+[A/B testing scripts](h/optimizing-content-efficiency-loading-third-party-javascript/#ab-test-smaller-samples-of-users) can also often delay rendering. Most of them block content display until they complete processing—which can be true even for asynchronous A/B testing scripts.
 {% endAside %}
 
 ## What to do about it
diff --git a/src/site/content/en/fast/third-party-javascript/third-party-examples.mp4 b/src/site/content/en/fast/third-party-javascript/third-party-examples.mp4
deleted file mode 100644
index 222df51a21c..00000000000
Binary files a/src/site/content/en/fast/third-party-javascript/third-party-examples.mp4 and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/12kb.jpg b/src/site/content/en/fast/use-imagemin-to-compress-images/12kb.jpg
deleted file mode 100755
index aaeddd3668d..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/12kb.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/20kb.jpg b/src/site/content/en/fast/use-imagemin-to-compress-images/20kb.jpg
deleted file mode 100755
index e3775e6e3cd..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/20kb.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/console_button.png b/src/site/content/en/fast/use-imagemin-to-compress-images/console_button.png
deleted file mode 100755
index 90a3caf797e..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/console_button.png and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/efficient-encoding.png b/src/site/content/en/fast/use-imagemin-to-compress-images/efficient-encoding.png
deleted file mode 100644
index fa0cf7dabd9..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/efficient-encoding.png and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/hero.jpg b/src/site/content/en/fast/use-imagemin-to-compress-images/hero.jpg
deleted file mode 100644
index 192299cc5d8..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/index.md b/src/site/content/en/fast/use-imagemin-to-compress-images/index.md
index d29aa645d95..1232e906f0f 100644
--- a/src/site/content/en/fast/use-imagemin-to-compress-images/index.md
+++ b/src/site/content/en/fast/use-imagemin-to-compress-images/index.md
@@ -4,7 +4,7 @@ title: Use Imagemin to compress images
 authors:
   - katiehempenius
 date: 2018-11-05
-updated: 2020-04-06
+updated: 2020-08-24
 description: |
   Uncompressed images bloat your pages with unnecessary bytes. Run Lighthouse to
   check for opportunities to improve page load by compressing images.
@@ -14,24 +14,25 @@ codelabs:
   - codelab-imagemin-grunt
 tags:
   - performance
+  - web-vitals
 ---
 
 ## Why should you care?
 
-Uncompressed images bloat your pages with unnecessary bytes. The photo on the
-right is 40% smaller than the one on the left, yet would probably look identical
-to the average user.
+Uncompressed images bloat your pages with unnecessary bytes. Because images can be [candidates for Largest Contentful Paint (LCP)](/lcp/#what-elements-are-considered), those unnecessary bytes can add unnecessary [resource load time](/optimize-lcp/#3-reduce-resource-load-time), which can result in longer LCP times.
 
-<div class="w-table-wrapper">
+The photo on the right is 40% smaller than the one on the left, yet would probably look identical to the average user.
+
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
         <th>
-          <p><img src=./20kb.jpg width="100%"></p>
+          <p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p>
           20 KB
         </th>
         <th>
-          <p><img src=./12kb.jpg width="100%"></p>
+          <p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p>
           12 KB
         </th>
       </tr>
@@ -45,7 +46,7 @@ to the average user.
 Run Lighthouse to check for opportunities to improve page load by compressing images.
 These opportunities are listed under "Efficiently encode images":
 
-![image](./efficient-encoding.png)
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="image", width="800", height="552" %}
 
 {% Aside %}
 Lighthouse currently reports on opportunities to compress images in JPEG format
@@ -80,7 +81,7 @@ greater filesize savings, and you can customize the compression levels to meet
 your needs. The table below lists popular Imagemin plugins. These aren't the only plugins
 available, but they'd all be good choices for your project.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -132,7 +133,7 @@ available, but they'd all be good choices for your project.
       <tr>
         <td>SVG</td>
         <td>
-          <a href="https://www.npmjs.com/package/imagemin-svgo">Imagemin-svgo</a>
+          <a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a>
         </td>
         <td></td>
       </tr>
@@ -141,7 +142,9 @@ available, but they'd all be good choices for your project.
         <td>
           <a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a>
         </td>
-        <td></td>
+        <td>
+          <a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -164,7 +167,7 @@ $ imagemin images/* --out-dir=images
 ### Imagemin npm module
 
 If you use one of these build tools,
-checkout out the codelabs for Imaginemin with
+checkout the codelabs for Imagemin with
 [webpack](/codelab-imagemin-webpack), [gulp](/codelab-imagemin-gulp),
 or [grunt](/codelab-imagemin-grunt).
 
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/lighthouse_passing.png b/src/site/content/en/fast/use-imagemin-to-compress-images/lighthouse_passing.png
deleted file mode 100755
index 836834c648f..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/lighthouse_passing.png and /dev/null differ
diff --git a/src/site/content/en/fast/use-imagemin-to-compress-images/logs_button.png b/src/site/content/en/fast/use-imagemin-to-compress-images/logs_button.png
deleted file mode 100755
index 68751ef3d77..00000000000
Binary files a/src/site/content/en/fast/use-imagemin-to-compress-images/logs_button.png and /dev/null differ
diff --git a/src/site/content/en/fast/use-lazysizes-to-lazyload-images/index.md b/src/site/content/en/fast/use-lazysizes-to-lazyload-images/index.md
deleted file mode 100644
index 5b98cf421d4..00000000000
--- a/src/site/content/en/fast/use-lazysizes-to-lazyload-images/index.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-layout: post
-title: Use lazysizes to lazy-load images
-authors:
-  - katiehempenius
-description: |
-  Lazy-loading is the strategy of loading resources as they are needed, rather
-  than in advance. This approach frees up resources during the initial page load
-  and avoids loading assets that are never used.
-date: 2018-11-05
-updated: 2019-04-10
-codelabs:
-  - codelab-use-lazysizes-to-lazyload-images
-tags:
-  - performance
-  - images
----
-
-{% Aside 'note' %}
-  Browser-level native lazy-loading is now available! Refer to the [Native lazy-loading for the
-  web](/native-lazy-loading) article to learn how to use the `loading` attribute and leverage
-  lazysizes as a fallback for browsers that do not yet support it.
-{% endAside %}
-
-**Lazy-loading** is the strategy of loading resources as they are needed, rather
-than in advance. This approach frees up resources during the initial page load
-and avoids loading assets that are never used.
-
-Images that are offscreen during the initial pageload are ideal candidates for
-this technique. Best of all, [lazysizes](https://github.com/aFarkas/lazysizes)
-makes this a very simple strategy to implement.
-
-## What is lazysizes?
-
-[lazysizes](https://github.com/aFarkas/lazysizes) is the most popular library
-for lazy-loading images. It is a script that intelligently loads images as the
-user moves through the page and prioritizes images that the user will encounter
-soon.
-
-## Add lazysizes
-
-It is simple to add lazysizes:
-
-+  Add the lazysizes script to your pages.
-+  Choose the images you want to lazy-load.
-+  Update the `<img>` and/or `<picture>` tags for those images.
-
-### Add the lazysizes script
-
-Add the lazysizes
-[script](https://github.com/aFarkas/lazysizes/blob/gh-pages/lazysizes.min.js) to
-your pages:
-
-```html
-<script src="lazysizes.min.js" async></script>
-```
-
-### Update `<img>` and/or `<picture>` tags
-
-**`<img>` tag instructions**
-
-**Before:**
-```html
-<img src="flower.jpg" alt="">
-```
-
-**After:**
-```html
-<img data-src="flower.jpg" class="lazyload" alt="">
-```
-
-When you update the `<img>` tag you make two changes:
-
-+  **Add the `lazyload` class**: This indicates to lazysizes that the
-    image should be lazy-loaded.
-+  **Change the `src` attribute to `data-src`**: When it is time to load the
-    image, the lazysizes code sets the image `src` attribute using the value
-    from the `data-src` attribute.
-
-**`<picture>` tag instructions**
-
-**Before:**
-```html
-<picture>
-  <source type="image/webp" srcset="flower.webp">
-  <source type="image/jpeg" srcset="flower.jpg">
-  <img src="flower.jpg" alt="">
-</picture>
-```
-
-**After:**
-```html
-<picture>
-  <source type="image/webp" data-srcset="flower.webp">
-  <source type="image/jpeg" data-srcset="flower.jpg">
-  <img data-src="flower.jpg" class="lazyload" alt="">
-</picture>
-```
-
-When you update the `<picture>` tag you make two changes:
-
-+ Add the `lazyload` class to the `<img>` tag.
-+ Change the `<source>` tag `srcset` attribute to `data-srcset`.
-
-{% Aside 'codelab' %}
-[Use lazysizes to only load images that are in the current viewport](/codelab-use-lazysizes-to-lazyload-images).
-{% endAside %}
-
-## Verify
-
-Open DevTools and scroll down the page to see these changes in action. As you
-scroll, you should see new network requests occur and `<img>` tag classes change
-from `lazyload` to `lazyloaded`.
-
-Additionally, you can use Lighthouse to verify that you haven't forgotten to
-lazy-load any offscreen images. Run the Lighthouse Performance Audit
-(**Lighthouse > Options > Performance**) and look for the results of the
-**Defer offscreen images** audit.
diff --git a/src/site/content/en/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/en/fast/use-lighthouse-for-performance-budgets/index.md
index da2c437806e..415cafd519a 100644
--- a/src/site/content/en/fast/use-lighthouse-for-performance-budgets/index.md
+++ b/src/site/content/en/fast/use-lighthouse-for-performance-budgets/index.md
@@ -14,7 +14,17 @@ tags:
   - performance
 ---
 
-[Lighthouse](https://github.com/GoogleChrome/lighthouse) now supports performance budgets. This feature, [LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets), can be set up in under five minutes and provides feedback on performance metrics and the size and quantity of page resources.
+[Lighthouse](https://github.com/GoogleChrome/lighthouse) now supports performance budgets. This feature, known as LightWallet, can be set up in under five minutes and provides feedback on performance metrics and the size and quantity of page resources.
+
+{% Aside 'important' %}
+While Lighthouse is an excellent tool for identifying performance improvement
+opportunities, it can't be stressed enough that Lighthouse is a tool that relies
+on [lab data](/lab-and-field-data-differences/#lab-data). While lab data is an
+integral part of any performance improvement effort, comparing and contrasting
+that data with [field data](/lab-and-field-data-differences/#field-data) collected
+from your website's actual users is key. Doing so will help you understand how the
+changes you make to your website affect real users.
+{% endAside %}
 
 ## Install Lighthouse
 
@@ -70,7 +80,7 @@ This example `budget.json` file sets five separate budgets:
 * A budget of 1000ms for First Meaningful Paint
 * A budget of 125 KB for the total amount of JavaScript on the page.
 * A budget of 300 KB for the overall size of the page.
-* A budget of 10 requests for the numer of requests made to third-party origins.
+* A budget of 10 requests for the number of requests made to third-party origins.
 
 For a complete list of supported performance metrics and resource types, refer to the [Performance Budgets](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md) section of the Lighthouse docs.
 
@@ -90,6 +100,6 @@ lighthouse https://example.com --budget-path=./budget.json
 
 If LightWallet has been configured correctly, the Lighthouse report will contain a **Budgets** section within the **Performance** category.
 
-<img src="./lightwallet.png" class="w-screenshot" alt="'Budgets' section of the Lighthouse report">
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="'Budgets' section of the Lighthouse report", width="800", height="289" %}
 
 In the JSON version of the Lighthouse report, Lightwallet results can be found within the audit findings for the `performance-budget` audit.
diff --git a/src/site/content/en/fast/use-lighthouse-for-performance-budgets/lightwallet.png b/src/site/content/en/fast/use-lighthouse-for-performance-budgets/lightwallet.png
deleted file mode 100644
index 55a99ab143e..00000000000
Binary files a/src/site/content/en/fast/use-lighthouse-for-performance-budgets/lightwallet.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-check-diff.jpg b/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-check-diff.jpg
deleted file mode 100644
index 1f82a4188af..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-check-diff.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-fail.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-fail.png
deleted file mode 100644
index 02b81c4753f..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-fail.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-pass.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-pass.png
deleted file mode 100644
index 54ca6d4e689..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-pass.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-token.jpg b/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-token.jpg
deleted file mode 100644
index 2fe7c5a09fa..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/bundlesize-token.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/cat-voting-app.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/cat-voting-app.png
deleted file mode 100644
index 62e0f771dff..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/cat-voting-app.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/environment-variables.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/environment-variables.png
deleted file mode 100644
index 7779f8fe173..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/environment-variables.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/github-checks-in-progress.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/github-checks-in-progress.png
deleted file mode 100644
index 339479f91f7..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/github-checks-in-progress.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/index.md b/src/site/content/en/fast/using-bundlesize-with-travis-ci/index.md
index 92352d993ec..d0a7351691a 100644
--- a/src/site/content/en/fast/using-bundlesize-with-travis-ci/index.md
+++ b/src/site/content/en/fast/using-bundlesize-with-travis-ci/index.md
@@ -8,10 +8,12 @@ description: |
 date: 2019-02-01
 tags:
   - performance
+feedback:
+  - api
 ---
 
 Using [bundlesize](https://github.com/siddharthkp/bundlesize) with [Travis
-CI](https://travis-ci.com/) lets you define performance budgets with minimal
+CI](https://travis-ci.org/) lets you define performance budgets with minimal
 setup and enforce them as part of your development workflow. Travis CI is a
 service that runs tests for your app in the cloud every time you push code to
 GitHub. You can [configure your
@@ -19,10 +21,10 @@ repository](https://help.github.com/articles/about-required-status-checks/) so
 that it won't allow merging pull-requests unless the bundlesize tests have
 passed.
 
-Bundlesize's GitHub checks include a size comparison to the master branch and
+Bundlesize's GitHub checks include a size comparison to the main branch and
 a warning in case of a big jump in size.
 
-<img src="bundlesize-check-diff.jpg" class="w-screenshot" alt="Bundlesize check on GitHub">
+{% Img src="image/admin/8Mm1WPga9dbeIzGrv2fQ.jpg", alt="Bundlesize check on GitHub", width="769", height="316" %}
 
 {% Aside %}
 You can also use bundlesize with [Circle CI](https://circleci.com),
@@ -34,7 +36,7 @@ To see it in action, here's an app bundled with
 kitty](https://glitch.com/edit/#!/scarce-pixie).
 
 <a href="https://glitch.com/edit/#!/scarce-pixie">
-  <img class="w-screenshot w-screenshot--filled" src="./cat-voting-app.png" alt="Cat voting app">
+  {% Img src="image/admin/DGSSFfpAMIaFqX8MwWss.png", alt="Cat voting app", width="800", height="567" %}
 </a>
 
 ## Set the performance budget
@@ -100,12 +102,12 @@ You'll need to [register an account on
 Travis](https://docs.travis-ci.com/user/tutorial) and activate GitHub Apps
 integration under the Settings section of your profile.
 
-<img src="travis-ci.png" class="w-screenshot" alt="GitHub Apps integration on Travis CI">
+{% Img src="image/admin/kMgVmB5rzRJN3DlqP08R.png", alt="GitHub Apps integration on Travis CI", width="800", height="508" %}
 
 Once you have an account, go to **Settings** under your profile, click the **Sync
 account** button, and make sure your new repo is listed on Travis.
 
-<img src="travis-ci-sync-button.png" class="w-screenshot" alt="Travis CI Sync button">
+{% Img src="image/admin/Zi9Oo5SCfM5P7IxejYd3.png", alt="Travis CI Sync button", width="160", height="54" %}
 
 ### Authorize bundlesize to post on pull requests
 
@@ -114,12 +116,12 @@ this link to get the bundlesize
 token](https://github.com/login/oauth/authorize?scope=repo%3Astatus&client_id=6756cb03a8d6528aca5a)
 that will be stored in the Travis configuration.
 
-<img src="bundlesize-token.jpg" class="w-screenshot" alt="bundlesize token">
+{% Img src="image/admin/GkEMv2VCb25oC9lDSARQ.jpg", alt="bundlesize token", width="619", height="330" %}
 
 In your project's Travis dashboard, go to **More options** > **Settings** > **Environment
 variables**.
 
-<img src="environment-variables.png" class="w-screenshot" alt="Adding environment variables on Travis CI">
+{% Img src="image/admin/gol14FsIsYPyPWwIeYfI.png", alt="Adding environment variables on Travis CI", width="789", height="233" %}
 
 Add a new environment variable with the token as the value field and
 BUNDLESIZE_GITHUB_TOKEN as the name.
@@ -150,13 +152,13 @@ the homepage of the repository.
 
 You'll now see status checks in progress on the pull request page.
 
-<img src="github-checks-in-progress.png" class="w-screenshot" alt="Github checks in progress">
+{% Img src="image/admin/SrdHGr9z5QY1vEfBwNIY.png", alt="GitHub checks in progress", width="774", height="351" %}
 
 It won't take long until all checks are done. Unfortunately, the cat voting app
 is a bit bloated and does not pass the performance budget check. The main bundle
 is 266 KB and the budget is 170 KB.
 
-<img src="bundlesize-fail.png" class="w-screenshot" alt="Failed bundlesize check">
+{% Img src="image/admin/Dt31nFkMvJjn1me6cir3.png", alt="Failed bundlesize check", width="774", height="347" %}
 
 ### Optimize
 
@@ -203,7 +205,7 @@ bundle file.
 
 5. Go to the pull request page on GitHub and wait for all checks to finish.
 
-<img src="bundlesize-pass.png" class="w-screenshot" alt="Passed bundlesize check">
+{% Img src="image/admin/3aKOqNvvavQ32gl15PmU.png", alt="Passed bundlesize check", width="778", height="355" %}
 
 Success! The new size of the bundle is 125.5 KB and all the checks have passed.
 🎉
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci-sync-button.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci-sync-button.png
deleted file mode 100644
index 37b0b5f1c8c..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci-sync-button.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci.png b/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci.png
deleted file mode 100644
index dd77c8bbc1d..00000000000
Binary files a/src/site/content/en/fast/using-bundlesize-with-travis-ci/travis-ci.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/firebase-console.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/firebase-console.png
deleted file mode 100644
index 24c17b77c1c..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/firebase-console.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/github-checks.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/github-checks.png
deleted file mode 100644
index 40161712713..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/github-checks.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/index.md b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/index.md
index 83b475b6415..31293a52a8f 100644
--- a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/index.md
+++ b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/index.md
@@ -14,10 +14,10 @@ tags:
 You've done hard work to get fast, now make sure you stay fast by automating
 performance testing with [Lighthouse Bot](https://github.com/ebidel/lighthousebot).
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse) grades your app
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) grades your app
 in 5 categories, and one of those is performance. While you could try to remember to
-monitor performance changes with [DevTools](https://developers.google.com/web/tools/lighthouse/#devtools)
-or [Lighthouse CLI](https://developers.google.com/web/tools/lighthouse/#cli) every
+monitor performance changes with [DevTools](https://developer.chrome.com/docs/lighthouse/overview/#devtools)
+or [Lighthouse CLI](https://developer.chrome.com/docs/lighthouse/overview/#cli) every
 time you edit your code, you don't have to do that. Tools can do the tedious
 stuff for you. [Travis CI](https://travis-ci.com/) is a great service that
 automatically runs tests for your app in the cloud every time you push new code.
@@ -28,10 +28,9 @@ that you won't accidentally downgrade performance without noticing. You can
 so that it won't allow merging pull-requests if the Lighthouse scores fall below
 the threshold you've set (e.g. < 96/100).
 
-<figure class="w-figure">
-  <img src="./lighthouse-bot.png"
-       alt="Failing Lighthouse Bot checks on GitHub" class="w-screenshot">
-  <figcaption class="w-figcaption">Lighthouse Bot checks on GitHub.</figcaption>
+<figure>
+  {% Img src="image/admin/LIEdWOuIGubFE0JgBM5Y.png", alt="Failing Lighthouse Bot checks on GitHub", width="800", height="360" %}
+  <figcaption>Lighthouse Bot checks on GitHub.</figcaption>
 </figure>
 
 {% Aside %}
@@ -57,7 +56,7 @@ To get started, you'll need a Firebase account. Once you've taken care of that,
 [create a new project in the Firebase console](https://console.firebase.google.com/)
 by clicking "Add project":
 
-<img src="./firebase-console.png" alt="" class="w-screenshot">
+{% Img src="image/admin/SYTTK9CHxnTt1n7vONKU.png", alt="", width="517", height="552" %}
 
 ### Deploying to Firebase
 
@@ -105,14 +104,14 @@ In a split second, you'll have a live app.
 You'll need to [register an account](https://travis-ci.com) on Travis and then
 activate GitHub Apps integration under the Settings section of your profile.
 
-<img src="./travis-ci.png" class="w-screenshot" alt="GitHub Apps integration on Travis CI">
+{% Img src="image/admin/fNGAjcYM5Rw3e43PExoD.png", alt="GitHub Apps integration on Travis CI", width="800", height="508" %}
 
 ### Once you have an account
 
 Go to Settings under your profile, hit the Sync account button, and make sure
 your project repo is listed on Travis.
 
-<img src="./travis-ci-sync-button.png" class="w-screenshot" alt="">
+{% Img src="image/admin/dnXFBpBw4WvWbXQL1DQf.png", alt="", width="160", height="54" %}
 
 To kick-off continuous integration, you need two things:
 
@@ -138,7 +137,7 @@ Now it's your turn to **push the example app to your own GitHub repository**.
 If you haven't already, run the following command:
 
 ```bash
-git push origin master
+git push origin main
 ```
 
 Click on your repo under Settings in Travis to see your project's Travis
@@ -156,7 +155,9 @@ Firebase, you have to authorize it. How do you do that? With a Firebase token.
 
 To generate the token run this command:
 
-<pre class="devsite-terminal devsite-click-to-copy">firebase login:ci</pre>
+```bash
+firebase login:ci
+```
 
 It will open a new tab in a browser window so that Firebase can verify you.
 After that, look back at the console, and you'll see your freshly minted token.
@@ -164,7 +165,7 @@ Copy it and go back to Travis.
 
 In your project's Travis dashboard, go to **More options** > **Settings** > **Environment variables**.
 
-<img class="w-screenshot" src="./travis-environment-variables.png" alt="">
+{% Img src="image/admin/uU7MBc5NdBDZch3ZE3Zd.png", alt="", width="789", height="233" %}
 
 Paste the token in the value field, name the variable `FIREBASE_TOKEN`, and add it.
 
@@ -190,7 +191,7 @@ It just needs an invitation to your repo.
 
 On GitHub, go to your project's settings and **add "lighthousebot" as a collaborator** (Settings>Collaborators):
 
-<img class="w-screenshot" src="./lighthouse-bot-collaborator.png" alt="Lighthouse bot collaborator status">
+{% Img src="image/admin/H2aLCOr36UDwm5Yk1k9r.png", alt="Lighthouse bot collaborator status", width="800", height="298" %}
 
 Approving these requests is a manual process so they don't always happen
 instantly. Before you start testing, make sure lighthousebot has approved its
@@ -201,7 +202,7 @@ and you'll get a Lighthouse Bot key in your inbox. 📬
 
 On Travis, add this key as an environment variable and name it `LIGHTHOUSE_API_KEY`:
 
-<img class="w-screenshot" src="./lighthouse-api-key.jpg" alt="">
+{% Img src="image/admin/0XCrRSbUg1Sdca8k9xK9.jpg", alt="", width="800", height="127" %}
 
 {% Aside %}
 You can reuse this same key for other projects.
@@ -249,21 +250,21 @@ the app that bring the performance score below 95:
 
 ### Make a pull request to trigger Lighthouse Bot test on Travis
 
-Lighthouse Bot will only test pull requests, so if you push to the master branch
+Lighthouse Bot will only test pull requests, so if you push to the main branch
 now, you'll just get "This script can only be run on Travis PR requests" in your
 Travis log.
 
 To trigger the Lighthouse Bot test:
 
 1. Checkout a new branch
-2. Push it to Github
+2. Push it to GitHub
 3. Make a pull request
 
 Hang tight on that pull request page and wait for Lighthouse Bot to sing! 🎤
 
-<img class="w-screenshot" src="./lighthouse-scores.png" alt="Passing Lighthouse scores">
+{% Img src="image/admin/SmWHb70YqVfagXI3f03D.png", alt="Passing Lighthouse scores", width="586", height="329" %}
 
-<img class="w-screenshot" src="./github-checks.png" alt="Passing Github checks">
+{% Img src="image/admin/ZrPGH5OGEY5Y4e9ntUBK.png", alt="Passing GitHub checks", width="462", height="189" %}
 
 The performance score is great, the app is under budget, and the check has passed!
 
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-api-key.jpg b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-api-key.jpg
deleted file mode 100644
index 5ba4f3fbc44..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-api-key.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot-collaborator.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot-collaborator.png
deleted file mode 100644
index acebe78c458..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot-collaborator.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot.png
deleted file mode 100644
index e956611205e..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-bot.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-scores.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-scores.png
deleted file mode 100644
index 9d9ba2904c2..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/lighthouse-scores.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci-sync-button.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci-sync-button.png
deleted file mode 100644
index 37b0b5f1c8c..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci-sync-button.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci.png
deleted file mode 100644
index dd77c8bbc1d..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-ci.png and /dev/null differ
diff --git a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-environment-variables.png b/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-environment-variables.png
deleted file mode 100644
index 7779f8fe173..00000000000
Binary files a/src/site/content/en/fast/using-lighthouse-bot-to-set-a-performance-budget/travis-environment-variables.png and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/analytics-start-date.jpg b/src/site/content/en/fast/value-of-speed/analytics-start-date.jpg
deleted file mode 100644
index b9f9091e416..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/analytics-start-date.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/conversion-rate.png b/src/site/content/en/fast/value-of-speed/conversion-rate.png
deleted file mode 100644
index 2c44521fe3c..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/conversion-rate.png and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/export-google-sheets.jpg b/src/site/content/en/fast/value-of-speed/export-google-sheets.jpg
deleted file mode 100644
index c1f078bd428..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/export-google-sheets.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/extra-revenue-formula.jpg b/src/site/content/en/fast/value-of-speed/extra-revenue-formula.jpg
deleted file mode 100644
index d4ef1f22b2d..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/extra-revenue-formula.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/hero.jpg b/src/site/content/en/fast/value-of-speed/hero.jpg
deleted file mode 100644
index 623a4094d66..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/index.md b/src/site/content/en/fast/value-of-speed/index.md
index 7bfb9c77e8a..04023aaa3de 100644
--- a/src/site/content/en/fast/value-of-speed/index.md
+++ b/src/site/content/en/fast/value-of-speed/index.md
@@ -5,202 +5,171 @@ subhead: Show stakeholders how site speed improvements can increase revenue.
 authors:
   - linahansson
 date: 2019-06-13
-hero: hero.jpg
+updated: 2021-06-07
+hero: image/admin/lJKAAwKJzlfwFIie0H1o.jpg
 alt: Aircraft instrument panel, photographer Arie Wubben via unsplash.com
 description: Demonstrate the revenue generated by site improvements while excluding external factors such as marketing campaigns.
 tags:
   - blog
-  - e-commerce
+  # - e-commerce
   - analytics
   - performance
 ---
 
-After a lot of hard work, you've done it. You've made your company's site
-noticeably faster. Now it's time for the fun part: showing stakeholders how much
-extra revenue your work has generated!
+After a lot of hard work, you've done it.
+You've made your company's site noticeably faster.
+Now it's time for the fun part:
+showing stakeholders how much extra revenue your work has generated!
 
-In this post we'll walk through how to do that by calculating the _relative
-mobile conversion rate_. This metric is useful because it quantifies the
-effects of site improvements while excluding external factors like marketing
-campaigns, which can obscure your findings. Let's get started!
+In this post we'll walk through how to do that by calculating the _relative mobile conversion_ rate.
+This metric is useful because it quantifies the effects of site improvements
+while excluding external factors like marketing campaigns,
+which can obscure your findings. Let's get started!
 
 ## Relative Mobile Conversion Rate (Rel mCvR)
 
-A site's conversion rate can be influenced by site characteristics—like speed
-and usability—and by external factors—like marketing campaigns, seasonal events,
-and the mix of marketing channels.
+A site's conversion rate can be influenced by site characteristics—
+like speed and usability—and by external factors—like marketing campaigns,
+seasonal events, and the mix of marketing channels.
 
 {% Aside %}
-A _conversion_ happens when a site visitor becomes a customer. What counts
-as a conversion will vary depending on the nature of the site. Buying a
-product, subscribing to a service, registering as a user, or even just
-viewing a particular page could be considered a conversion. Check with your
-marketing team if you're not sure how conversions are counted in your company.
+A _conversion_ happens when a site visitor becomes a customer.
+What counts as a conversion will vary depending on the nature of the site.
+Buying a product, subscribing to a service, registering as a user,
+or even just viewing a particular page could be considered a conversion.
+Check with your marketing team if you're not sure how conversions are counted in your company.
 {% endAside %}
 
-Since you're interested in how site speed affects conversions, the mobile site
-is most relevant—that's where you're most likely to see the benefits of
-speed improvements. Rather than looking at the mobile conversion rate alone,
-though, you'll be analyzing the _relative_ mobile conversion rate (Rel mCvr),
-which is calculated by dividing the mobile conversion rate by the desktop
-conversion rate. This approach reduces the noise from external factors, which
-tend to affect both desktop and mobile, and makes it easier to see whether any
-increases in the mobile site's effectiveness were actually caused by the speed
-improvements.
-
-<img class="w-screenshot" src="./relative-versus-absolute.jpg" alt="Table showing comparison of mobile/desktop conversion rate and relative mobile conversion rate">
+Since you're interested in how site speed affects conversions,
+the mobile site is most relevant—
+that's where you're most likely to see the benefits of speed improvements.
+Rather than looking at the mobile conversion rate alone, though,
+you'll be analyzing the _relative_ mobile conversion rate (Rel mCvR),
+which is calculated by dividing the mobile conversion rate by the desktop conversion rate.
+This approach reduces the noise from external factors,
+which tend to affect both desktop and mobile,
+and makes it easier to see whether any increases in the mobile site's effectiveness
+were actually caused by the speed improvements.
+
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/6q2BiNPameuAqeMOghoE.jpg",
+alt="Table showing comparison of mobile/desktop conversion rate and relative mobile conversion rate",
+width="800", height="450" %}
 
 {% Aside 'caution' %}
-Rel mCvR is influenced not only by speed, but also by other site
-characteristics like usability. If other big changes were made to the site
-during the period you want to analyze, you won't be able to measure the effects
-of speed improvements on their own, but you can show the benefits of all the
-improvements as a group.
+Caution: Rel mCvR is influenced not only by speed,
+but also by other site characteristics like usability.
+If other big changes were made to the site during the period you want to analyze,
+you won't be able to measure the effects of speed improvements on their own,
+but you can show the benefits of all the improvements as a group.
 {% endAside %}
 
 ## Doing the analysis
 
-If you have access to your site's page analytics data, you can follow along
-using that. This walkthrough uses Google Analytics to get site
-data. If you don't have a Google Analytics account, you can learn how to set one
-up at [Get started with Analytics](https://support.google.com/analytics/answer/1008015?hl=en).
-Or, if you just want to see how Rel mCvR is calculated, you can get the sample
-data set shown below from
-[this Google Sheet](https://docs.google.com/spreadsheets/d/1Mxmy1luPBOvJneSM9g2NZt6yHKx8xkpBXygOpm4LgNM/edit?usp=sharing)
-and skip steps 1–3.
-
-**Step 1:** First get the speed and conversion data for the mobile site.
-  * Open
-  [this custom report](https://analytics.google.com/analytics/web/template?uid=NPvTU2zoTf2JFsHi6-auyQ)
-  in Google Analytics, select your site from the **Select a view**
-  drop-down list, and click **Create**.
-  * Once the report has been generated, click **Select a metric > Metric Group > Ecommerce Conversion Rate**.
-    <br><br>
-    <img class="w-screenshot" src="./conversion-rate.png" alt="Screenshot of Google Analytics: select a metric, Metric Group, Ecommerce Conversion Rate">
-    <br><br>
-  * Select the **Week** view for the dataset.
-    <br><br>
-    <img class="w-screenshot" src="./landing-pages-week.jpg" alt="Screenshot of Google Analytics: select a week">
-    <br><br>
-  * Select a time period that covers 2–3 months before the speed
-  optimization and 2–3 months after. (In our example, that's January 2018
-  through October 2018.)
-    <br><br>
-    <img class="w-screenshot" src="./analytics-start-date.jpg" alt="Screenshot of Google Analytics: select a start date">
-    <br><br>
-  * Export the report to [Google Sheets](http://sheets.google.com) or
-  your preferred spreadsheet application.
-    <br><br>
-    <img class="w-screenshot" src="./export-google-sheets.jpg" alt="Screenshot of Google Analytics: export to Google Sheets"  style="max-width: 400px; width: 100%">
-    <br><br>
-
-**Step 2:** Now get the speed and conversion data for the desktop site. Open
-[this custom report](https://analytics.google.com/analytics/web/template?uid=X21Nb_soQp69U_ylfNmLvg)
-in Google Analytics and repeat the process for step 1 to export the data to
-a spreadsheet.
-
-**Step 3:** Copy the _Ecommerce Conversion Rate_ column in the desktop report
-spreadsheet and insert it next to the _Ecommerce Conversion Rate_ in the
-mobile report spreadsheet.
-
-**Step 4:** To calculate the Rel mCvR, create a new column titled _Relative Mobile Conversion Rate (Rel mCvR)_.
-Then add a formula to divide the mobile conversion rate by the desktop conversion rate.
-<br><br>
-![Screenshot: spreadsheet cells showing relative rate formula](relative-rate-formula.jpg)
-<br><br>
-
-**Step 5:** Create a chart based on the _Mobile Avg. Page Load Time (sec)_ and
-_Relative Mobile Conversion Rate (Rel mCvR)_ columns. To do that in Google
-Sheets:
-
-* Click **Insert > Chart**.
-* In the **Chart Editor** pane, select the **Line chart** chart type.
-* Select the _Week Index_, _Mobile Avg. Page Load Time (sec)_, and
-  _Relative Mobile Conversion Rate (Rel mCvR)_ columns as the data ranges.
-* Click the **Customize** tab and then select **Series**.
-* In the **Series selector** drop-down list, select **Relative
-  Mobile Conversion Rate (Rel mCvR)**.
-* In the **Axis** drop-down list select **Right axis**.
-* If you like, click **Chart & axis titles** to customize the chart title
-  and the left and right _y_-axis labels.
+Make sure you have access to your site's Google Analytics,
+or collaborate with the analytics team.
+If you don't have a Google Analytics account,
+you can learn how to set one up at
+[Get started with Analytics](https://support.google.com/analytics/answer/1008015?hl=en).
+
+**Step 1:** Go to Google Analytics and click **Admin**. Under **View**, choose **View Settings**. There, copy the View ID.
+
+**Step 2:** Go to
+[this spreadsheet](https://docs.google.com/spreadsheets/d/13BnREVWPhIiDYdEvOSYP3ovlMggPbnRQPMTSir6y__I/edit#gid=1619071522)
+and click **File**, and Make a copy.
+
+**Step 3:** Insert the View ID from Google Analytics into field **B3**,
+**C3** and **D3** in
+[the spreadsheet](https://docs.google.com/spreadsheets/d/13BnREVWPhIiDYdEvOSYP3ovlMggPbnRQPMTSir6y__I/edit#gid=1619071522).
+If your Google Analytics has goals instead of Ecommerce Conversion Rate,
+change field **B6** and **C6** so that you remove `ga:transactionsPerSession` and instead type in
+`ga:goalConversionRateAll` in the two fields.
+
+**Step 4:** In the spreadsheet,
+click **Add-ons**, **Google Analytics**, and choose **Run reports**.
+Then go to the spreadsheet page Rel mCvR and see the results.
 
 You should now have a chart that looks something like this:
-![Chart: mobile load time versus relative mobile conversion rate](mobile-versus-relative-chart.jpg)
-<br><br>
 
-**Step 6:** Using the chart, identify a period before the speed optimization
-(when load times were high) and a period after the speed optimization (when
-load times should be lower) that you want to analyze. In this example, you
-would compare eight weeks in Jan–Feb to eight weeks in Aug–Sept.
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/d7VY9rh0nPtrfyvctkeb.jpg",
+alt="Chart showing mobile load time vs relative mobile conversion rate.",
+width="800", height="495" %}
+
+**Step 6:** Using the chart,
+identify a period before the speed optimization (when load times were high)
+and a period after the speed optimization (when load times should be lower)
+that you want to analyze.
+In this example, you would compare eight weeks in Jan–Feb to eight weeks in Aug–Sept.
 
-**Step 7:** In a new sheet, calculate the average load time and rel mCvR for the
-two periods. Then add the revenue coming from mobile visitors during the
-period after the speed optimization (Aug–Sept in the example). You can find
-revenue data in Google Analytics under the section **Audience > Mobile >
-Overview**.
+**Step 7:** In a new sheet,
+calculate the average load time and rel mCvR for the two periods.
+Then add the revenue coming from mobile visitors during the period after the speed optimization
+(Aug–Sept in the example).
+You can find revenue data in Google Analytics under the section Audience > Mobile > Overview.
 
-<figure class="w-figure">
-  <img src="./period-revenue.jpg" alt="Revenue data for January through September showing Rel mCvR" style="max-width: 600px; width: 100%">
-</figure>
+{% Img
+src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/NH6HEdFAmI5IHXOwSPlf.jpg",
+alt="Screenshot: Image of table in showing revenue data",
+width="800", height="122" %}
 
-**Step 8:** Now calculate what the revenue would have been if Rel mCvR had not
-improved. Do this by dividing the revenue (€1,835,962) by the current Rel
-mCvR (51%) and multiplying by the Rel mCvR for the period before the speed
-optimization (42%).
+**Step 8:** Now calculate what the revenue would have been if Rel mCvR had not improved.
+Do this by dividing the revenue (€1,835,962) by the current Rel mCvR (51%)
+and multiplying by the Rel mCvR for the period before the speed optimization (42%).
 
-<figure class="w-figure">
-  <img src="./revenue-would-have-been.jpg" alt="Screenshot: spreadsheet cells showing formula for revenue without Rel mCvR improvements" style="max-width: 600px; width: 100%">
-</figure>
+{% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/HNkshbjj8pYGbGlMoZQ1.jpg",
+alt="Screenshot: spreadsheet cells showing formula for revenue without Rel mCvR improvements",
+width="800", height="202" %}
 
-**Step 9:** Subtract the revenue that the company earned from what it would have
-earned if Rel mCvR had not improved.
+**Step 9:** Subtract the revenue that the company earned
+from what it would have earned if Rel mCvR had not improved.
 
-<figure class="w-figure">
-  <img src="./extra-revenue-formula.jpg" alt="Screenshot: spreadsheet cells showing extra revenue formula" style="max-width: 600px; width: 100%">
-</figure>
+{% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/I0LBdqLJ7i9gaTZLqgQc.jpg",
+alt="Screenshot: spreadsheet cells showing extra revenue formula",
+width="800", height="242" %}
 
-In this example, the company earned an additional €323,993 in eight weeks thanks
-to Rel mCvR improving—that is, thanks to the mobile site becoming faster.
+In this example, the company earned an additional €323,993 in eight weeks thanks to Rel mCvR improving
+—that is, thanks to the mobile site becoming faster.
 
-<figure class="w-figure">
-  <img src="./thanks-to-increased.jpg" alt="Screenshot: spreadsheet cells showing extra revenue due to Rel mCvR improvements" style="max-width: 600px; width: 100%">
-</figure>
+{% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/DhukJqLa37bBxJbkhmaH.jpg",
+alt="Screenshot: spreadsheet cells showing extra revenue due to Rel mCvR improvements",
+width="800", height="242" %}
 
 ## Things to consider when analyzing Rel mCvR
 
-* As noted above, other changes to the site, such as UX improvements, can
-influence Rel mCvR. Check that speed was the only big change to the site during
-the period you want to study. If there _were_ other changes, Rel mCvR can tell
-you the effect of the changes as a group, but not of an individual change.
-
-* Watch out for any changes or events that affected the desktop site but not the
-mobile site—they can skew your results. If you discover any desktop-only
-changes, omit the affected period from your analysis.
-
-* You might wonder whether an increase in Rel mCvR is caused by a shift in
-conversions from desktop to mobile rather than an increase in conversions
-overall. While there is likely to be some change in the mix of desktop and
-mobile conversions due to speed improvements, keep in mind that Rel mCvR
-calculates the mobile conversion rate relative to the desktop conversion rate.
-So, you only see an increase in Rel mCvR when mCvR goes up more than dCvR. In
-other words, when doing this calculation you're already counting low, which
-means you have a safety margin that can compensate for any shifts in the
-channel mix.
+As noted above, other changes to the site, such as UX improvements,
+can influence Rel mCvR.
+
+- Check that speed was the only big change to the site during the period you want to study.
+If there were other changes,
+Rel mCvR can tell you the effect of the changes as a group, but not of an individual change.
+- Watch out for any changes or events that affected the desktop site but not the mobile site
+—they can skew your results.
+If you discover any desktop-only changes,
+omit the affected period from your analysis.
+- You might wonder whether an increase in Rel mCvR is caused by a shift in conversions
+from desktop to mobile rather than an increase in conversions overall.
+While there is likely to be some change
+in the mix of desktop and mobile conversions due to speed improvements,
+keep in mind that Rel mCvR calculates the mobile conversion rate relative to the desktop conversion rate.
+So, you only see an increase in Rel mCvR when mCvR goes up more than dCvR.
+In other words, when doing this calculation you're already counting low,
+which means you have a safety margin that can compensate for any shifts in the channel mix.
 
 ## Summing up
 
-While it has some limitations, Rel mCvR is a great low-cost way to estimate how
-much a speed optimization increased revenue without, for example, having to run
-server-side or slow-down tests. And quantifying the relationship between
-performance and revenue can help you demonstrate the value of development
-projects whose benefits might not be immediately clear to non-technical
-stakeholders.
+While it has some limitations,
+Rel mCvR is a great low-cost way to estimate how much a speed optimization increased revenue without,
+for example, having to run server-side or slow-down tests.
+And quantifying the relationship between performance and revenue
+can help you demonstrate the value of development projects
+whose benefits might not be immediately clear to non-technical stakeholders.
 
-## Next steps
 
-+ [Discover performance opportunities with Lighthouse](/discover-performance-opportunities-with-lighthouse)
+## Next steps
 
-+ [Performance budgets 101](/performance-budgets-101)
+- [Discover performance opportunities with Lighthouse](/discover-performance-opportunities-with-lighthouse)
+- [Performance budgets 101](/performance-budgets-101)
 
 *Aircraft instrument panel image by
 [Arie Wubben](https://unsplash.com/photos/MHIw0nSxCR4) on
diff --git a/src/site/content/en/fast/value-of-speed/landing-pages-week.jpg b/src/site/content/en/fast/value-of-speed/landing-pages-week.jpg
deleted file mode 100644
index cd98175ddba..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/landing-pages-week.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/mobile-versus-relative-chart.jpg b/src/site/content/en/fast/value-of-speed/mobile-versus-relative-chart.jpg
deleted file mode 100644
index 0bdf664933c..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/mobile-versus-relative-chart.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/period-revenue.jpg b/src/site/content/en/fast/value-of-speed/period-revenue.jpg
deleted file mode 100644
index 731b8be500b..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/period-revenue.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/relative-rate-formula.jpg b/src/site/content/en/fast/value-of-speed/relative-rate-formula.jpg
deleted file mode 100644
index e3904e3b388..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/relative-rate-formula.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/relative-versus-absolute.jpg b/src/site/content/en/fast/value-of-speed/relative-versus-absolute.jpg
deleted file mode 100644
index 92b32a24ba9..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/relative-versus-absolute.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/revenue-would-have-been.jpg b/src/site/content/en/fast/value-of-speed/revenue-would-have-been.jpg
deleted file mode 100644
index d2d20f93da6..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/revenue-would-have-been.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/value-of-speed/thanks-to-increased.jpg b/src/site/content/en/fast/value-of-speed/thanks-to-increased.jpg
deleted file mode 100644
index 2b9a1294a26..00000000000
Binary files a/src/site/content/en/fast/value-of-speed/thanks-to-increased.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/what-is-speed/index.md b/src/site/content/en/fast/what-is-speed/index.md
index 584897d8bdf..398501abf68 100644
--- a/src/site/content/en/fast/what-is-speed/index.md
+++ b/src/site/content/en/fast/what-is-speed/index.md
@@ -14,16 +14,16 @@ tags:
 
 So, speed matters, but what exactly do we mean by it? What does it mean to have a fast site?
 
-It's common to hear people talk in terms of their website loading in x.xx seconds or similar, but a [load is not a single moment in time](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics); it's an experience that no single metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as 'fast', and if you just focus solely on one, you might miss bad experiences that happen during the rest of the time.
+It's common to hear people talk in terms of their website loading in x.xx seconds or similar, but a [load is not a single moment in time](/user-centric-performance-metrics/); it's an experience that no single metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as 'fast', and if you just focus solely on one, you might miss bad experiences that happen during the rest of the time.
 
 Rather than measuring load with just one metric, you should time each moment during the experience that affects the user's perception of load speed. When a user navigates to a web page, they're typically looking for certain types of feedback:
 
-<img src="./speed-feedback.png" alt="Image of feedback user is typically looking for">
+{% Img src="image/admin/NGX9WC2BXTRY6FP5TTGl.png", alt="Image of feedback user is typically looking for", width="800", height="185" %}
 
-Traditional performance metrics like load time or DOMContentLoaded time are unreliable, since their occurrence may or may not correspond with these feedback milestones. So, [additional metrics](/lighthouse-performance/#metrics) have emerged that could be used to understand when a page delivers this feedback to its users:
+Traditional performance metrics like load time or DOMContentLoaded time are unreliable, since their occurrence may or may not correspond with these feedback milestones. So, [additional metrics](https://developer.chrome.com/docs/lighthouse/performance/#metrics) have emerged that could be used to understand when a page delivers this feedback to its users:
 
-<img src="./speed-metrics.png" alt="Image of speed metrics">
+{% Img src="image/admin/tz1aubGGvefskjcPfjBQ.png", alt="Image of speed metrics", width="800", height="654" %}
 
 It's important to understand the different insights offered by these metrics, then establish the ones that are important to your user experience. Some brands even define additional custom metrics specific to the expectations people have of their service. In the case of Pinterest, users want to see images, so they defined a custom metric, [Pinner Wait Time](https://www.youtube.com/watch?v=Xryhxi45Q5M), that combines Time to Interactive and Above the Fold Image load times.
 
-Even though the load is more than one moment in time, it can still be useful to have a single metric for the purposes of simplified reporting or comparison: [Speed Index](/speed-index) and [Lighthouse score](https://developers.google.com/web/tools/lighthouse/v3/scoring) can both be used in this way.
+Even though the load is more than one moment in time, it can still be useful to have a single metric for the purposes of simplified reporting or comparison: [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) and [Lighthouse score](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring) can both be used in this way.
diff --git a/src/site/content/en/fast/what-is-speed/speed-feedback.png b/src/site/content/en/fast/what-is-speed/speed-feedback.png
deleted file mode 100644
index 344f0caa26b..00000000000
Binary files a/src/site/content/en/fast/what-is-speed/speed-feedback.png and /dev/null differ
diff --git a/src/site/content/en/fast/what-is-speed/speed-metrics.png b/src/site/content/en/fast/what-is-speed/speed-metrics.png
deleted file mode 100644
index f78f5a57eea..00000000000
Binary files a/src/site/content/en/fast/what-is-speed/speed-metrics.png and /dev/null differ
diff --git a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/funnel.png b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/funnel.png
deleted file mode 100644
index af8fd418551..00000000000
Binary files a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/funnel.png and /dev/null differ
diff --git a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/ga_speed_repeat.png b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/ga_speed_repeat.png
deleted file mode 100644
index 0be5081d200..00000000000
Binary files a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/ga_speed_repeat.png and /dev/null differ
diff --git a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/hero.jpg b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/hero.jpg
deleted file mode 100644
index b076d181faa..00000000000
Binary files a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/index.md b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/index.md
index 11eb35c04db..b739a453726 100644
--- a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/index.md
+++ b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/index.md
@@ -5,22 +5,22 @@ subhead: Strategies to measure performance at each stage in the purchase funnel.
 authors:
   - martinschierle
 date: 2019-05-31
-hero: hero.jpg
+hero: image/admin/7DmRrgsxnlS4GNPCyW0Q.jpg
 alt: A row of shopping carts.
 description: |
   Learn what impact website performance has on different parts of the e-commerce funnel
 tags:
   - blog
   - performance
-  - ecommerce
+  # - ecommerce
 ---
 
 The different steps of a purchase funnel are prone to performance issues in
 different ways, and therefore need different measurement and optimizations:
 
-<figure class="w-figure">
-  <img src="./funnel.png" alt="A conversion funnel going from discover to engage to convert to re-engage." style="max-width: 600px; width: 100%;">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/87cAGdJAnPggf8Yt58ID.png", alt="A conversion funnel going from discover to engage to convert to re-engage.", width="800", height="399" %}
+  <figcaption>
     A conversion funnel.
   </figcaption>
 </figure>
@@ -54,22 +54,22 @@ Lab data for a first load can be easily acquired through
 while field data (at least for Chrome) is readily available through [Chrome UX
 reports](/fast/chrome-ux-report). A convenient combination of
 both can be found in
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/).
+[PageSpeed Insights](https://pagespeed.web.dev/).
 You should also track relevant metrics from the field yourself:
-[Measuring these metrics on real users' devices](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#measuring_these_metrics_on_real_users_devices)
+[Measuring these metrics on real users' devices](/user-centric-performance-metrics/#in-the-field)
 provides a good overview.
 
 From a user perspective the most important metrics are:
 
-+   **[First Contentful Paint (FCP)](/first-contentful-paint):**
++   **[First Contentful Paint (FCP)](/fcp/):**
     The time the user stares at a blank screen. This is
     when most users bounce, as they don't see progress.
-+   **[First Meaningful Paint (FMP)](/first-meaningful-paint):**
++   **[First Meaningful Paint (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/):**
     When the user begins to see the main content they came for. This
     is often the hero image, but for a landing page it may even be a call to
     action such as a **Buy** button, since the user may have arrived with a clear
     intent (for example, through a targeted ad campaign).
-+   **[First Input Delay (FID)](https://developers.google.com/web/updates/2018/05/first-input-delay):**
++   **[First Input Delay (FID)](/fid/):**
     The time the website needs to react to the user's first input.
     Excessive JavaScript and other asset loading problems can block this,
     leading to failed taps or clicks, erroneous inputs and page abandonment.
@@ -95,21 +95,21 @@ There are two convenient ways of doing this:
 ### WebPageTest
 
 [WebPageTest](https://www.webpagetest.org/) offers a very flexible [scripting
-solution](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting).
+solution](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md).
 The basic idea is to:
 
 +   Tell WebPageTest to navigate through the pages of the flow with the
-    [`navigate`](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-navigate)
+    [`navigate`](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#navigate)
     command.
 +   If needed script the clicking of buttons via
-    [`clickAndWait`](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-clickAndWait)
+    [`clickAndWait`](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#clickandwait)
     commands and fill text fields via
-    [`setValue`](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setValue).
+    [`setValue`](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#selectvalue).
     For testing of Single Page Applications use `clickAndWait` rather than
     `navigate` commands for all steps after the first, as `navigate` will do a
     full load instead of the lightweight virtual page load.
 +   Make sure to combine the different steps of the flow in the analysis via
-    [`combineSteps`](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-combineSteps)
+    [`combineSteps`](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#combinesteps)
     to produce a single overall result report for the complete flow.
 
 Such a script could look like this:
@@ -125,7 +125,7 @@ navigate	https://www.store.google.com/checkout
 
 With a script like this in place you can easily measure and compare performance
 over time. This can even be automated through the
-[WebPageTest API](https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis).
+[WebPageTest API](https://github.com/WPO-Foundation/webpagetest-docs/blob/5337749ae99d0529fc0ae690d402fd4f88766be9/dev/api.md).
 
 ### Puppeteer
 
@@ -135,7 +135,7 @@ controlled through the Node API
 start the browser through Puppeteer, navigate to the landing page through the
 [goto](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options)
 function,
-[inject Javascript](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args)
+[inject JavaScript](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args)
 to fill fields or
 [click](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageclickselector-options)
 buttons and proceed through the funnel through further
@@ -181,9 +181,9 @@ an eye on this though, and a great lab test tool for repeat visits is
 [WebPageTest](https://www.webpagetest.org/), which has a dedicated option for a
 direct repeat visit:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./webpagetest_repeat.png" alt="The WebPageTest homepage form for auditing a site. The repeat view option is highlighted.">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/admin/6eHzqWl6gaKjL39n8Dwh.png", alt="The WebPageTest homepage form for auditing a site. The repeat view option is highlighted.", width="800", height="650" %}
+  <figcaption>
     Webpagetest offers options to test first load and repeat load as well
   </figcaption>
 </figure>
@@ -192,9 +192,9 @@ To get a better feeling for repeat visit performance in the field use your
 analytics package of choice to segment your performance metrics by user type.
 Here is an example of such a report in Google Analytics:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./ga_speed_repeat.png" alt="A Google Analytics dashboard shows a number of fields being added to a custom report.">
-  <figcaption class="w-figcaption w-figcaption--center">
+<figure>
+  {% Img src="image/admin/pSxM9xuJKho7RjOn4aDK.png", alt="A Google Analytics dashboard shows a number of fields being added to a custom report.", width="800", height="444" %}
+  <figcaption>
     A Google Analytics custom report can be used to report speed metrics for new and returning users.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/webpagetest_repeat.png b/src/site/content/en/fast/what-should-you-measure-to-improve-performance/webpagetest_repeat.png
deleted file mode 100644
index 6b39e8b96ce..00000000000
Binary files a/src/site/content/en/fast/what-should-you-measure-to-improve-performance/webpagetest_repeat.png and /dev/null differ
diff --git a/src/site/content/en/fast/why-speed-matters/index.md b/src/site/content/en/fast/why-speed-matters/index.md
index 24fdeca4b77..0c7061d839e 100644
--- a/src/site/content/en/fast/why-speed-matters/index.md
+++ b/src/site/content/en/fast/why-speed-matters/index.md
@@ -4,7 +4,7 @@ title: Why does speed matter?
 authors:
   - bojanpavic
   - ansteychris
-  - jeremywagner
+  - jlwagner
 description: |
   When it comes to user experience, speed matters. And delays caused by mobile
   speed aren't just frustrating, they can also have a negative impact on
@@ -23,11 +23,11 @@ Consumers are also more demanding than they've ever been,
 and when they weigh the experience on your site, they aren't just comparing you with your competitors,
 they're rating you against the best-in-class services they use every day.
 
-This post rounds up some of the research that has been done on the relationship between performance and busines success.
+This post rounds up some of the research that has been done on the relationship between performance and business success.
 
 ## Performance is about retaining users
 
-<figure class="w-figure w-figure--inline-right">
+<figure>
   <blockquote>
     <p>
   	Performance has directly impacted the company's bottom line.
@@ -81,16 +81,14 @@ This lack of an experience is fleeting on fast connections.
 On slower connections, however, users are forced to wait.
 Users may experience more problems as page resources slowly trickle in.
 
-<figure class="w-figure">
-  <img src="speed-comparison.png" alt="A comparison of two filmstrip reels
-of a page loading. The first shows a page loading on a slow connection, while
-the second shows the same page loading on a fast connection.">
+<figure>
+  {% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="A comparison of two filmstrip reels of a page loading. The first shows a page loading on a slow connection, while the second shows the same page loading on a fast connection.", width="800", height="264" %}
   <figcaption>A comparison of page load on a very slow connection
 (top) versus a faster connection (bottom).</figcaption>
 </figure>
 
 Performance is a foundational aspect of good user experiences.
-When sites ship a lot of code, browsers must use megabytes of the user's data plan in order to download the code.
+When sites ship a lot of code, browsers must use megabytes of the user's data plan to download it.
 Mobile devices have limited CPU power and memory.
 They often get overwhelmed with what we might consider a small amount of unoptimized code.
 This creates poor performance which leads to unresponsiveness.
@@ -106,7 +104,7 @@ worldwide](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
 it's important to bear in mind that many of these users access the web through
 mobile LTE, 4G, 3G, and even 2G networks.
 As Ben Schwarz of Calibre points out in
-[this study of real world performance](https://building.calibreapp.com/beyond-the-bubble-real-world-performance-9c991dcd5342),
+[this study of real world performance](https://calibreapp.com/blog/beyond-the-bubble),
 the cost of prepaid data plans is decreasing,
 which in turn is making access to the internet more affordable in places where it once wasn't.
 Mobile devices and internet access are no longer luxuries.
diff --git a/src/site/content/en/fast/why-speed-matters/speed-comparison.png b/src/site/content/en/fast/why-speed-matters/speed-comparison.png
deleted file mode 100644
index bc589965fb3..00000000000
Binary files a/src/site/content/en/fast/why-speed-matters/speed-comparison.png and /dev/null differ
diff --git a/src/site/content/en/fast/why-speed-matters/speed-conversion-impact.jpg b/src/site/content/en/fast/why-speed-matters/speed-conversion-impact.jpg
deleted file mode 100644
index 0f2d5de57ee..00000000000
Binary files a/src/site/content/en/fast/why-speed-matters/speed-conversion-impact.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/your-first-performance-budget/chrome-user-experience-report.png b/src/site/content/en/fast/your-first-performance-budget/chrome-user-experience-report.png
deleted file mode 100644
index ceb6f19e211..00000000000
Binary files a/src/site/content/en/fast/your-first-performance-budget/chrome-user-experience-report.png and /dev/null differ
diff --git a/src/site/content/en/fast/your-first-performance-budget/doggo-at-a-computer.jpg b/src/site/content/en/fast/your-first-performance-budget/doggo-at-a-computer.jpg
deleted file mode 100644
index 414fc8eaea1..00000000000
Binary files a/src/site/content/en/fast/your-first-performance-budget/doggo-at-a-computer.jpg and /dev/null differ
diff --git a/src/site/content/en/fast/your-first-performance-budget/google-search-related-keyword.png b/src/site/content/en/fast/your-first-performance-budget/google-search-related-keyword.png
deleted file mode 100644
index da4aa65cdf6..00000000000
Binary files a/src/site/content/en/fast/your-first-performance-budget/google-search-related-keyword.png and /dev/null differ
diff --git a/src/site/content/en/fast/your-first-performance-budget/index.md b/src/site/content/en/fast/your-first-performance-budget/index.md
index ad00217dda9..46ed6b9af34 100644
--- a/src/site/content/en/fast/your-first-performance-budget/index.md
+++ b/src/site/content/en/fast/your-first-performance-budget/index.md
@@ -23,21 +23,21 @@ If you are trying to improve the performance of an existing site, start by ident
 
 After you identify your key pages, it's time to analyze them. First, we'll focus on the timing milestones that best measure the user experience.
 
-Under the Audits panel in Chrome DevTools, you'll find [Lighthouse](https://developers.google.com/web/tools/lighthouse/). Run audits on each page in a [Guest window](https://support.google.com/chrome/answer/6130773?co=GENIE.Platform%3DDesktop&hl=en) to record these two times:
+Under the Audits panel in Chrome DevTools, you'll find [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). Run audits on each page in a [Guest window](https://support.google.com/chrome/answer/6130773?co=GENIE.Platform%3DDesktop&hl=en) to record these two times:
 
-* [First Contentful Paint (FCP)](/first-contentful-paint)
-* [Time to Interactive (TTI)](/interactive)
+* [First Contentful Paint (FCP)](/fcp/)
+* [Time to Interactive (TTI)](/tti/)
 
 {% Aside %}
 Using a Guest window gives you a clean testing environment without any Chrome
 extensions that could interfere with the audit.
 {% endAside %}
 
-![Lighthouse panel in Chrome DevTools](./lighthouse-audits-panel.png)
+{% Img src="image/admin/VUtkCadH9vjnKSzGzd0S.png", alt="Lighthouse panel in Chrome DevTools", width="800", height="637" %}
 
-Let's take a highly specialized search engine, doggos.io, as an example. Doggos.io aims to index all dog-related things on the internet, and its most important pages are the home and results pages. Here are the FCP and TTI numbers measured for the site on desktop and mobile.
+Let's take a highly specialized search engine, Doggos.com, as an example. Doggos.com aims to index all dog-related things on the internet, and its most important pages are the home and results pages. Here are the FCP and TTI numbers measured for the site on desktop and mobile.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -58,11 +58,11 @@ Let's take a highly specialized search engine, doggos.io, as an example. Doggos.
         <td>6,690 ms</td>
       </tr>
     </tbody>
-    <caption>Desktop analysis of doggos.io</caption>
+    <caption>Desktop analysis of Doggos.com</caption>
   </table>
 </div>
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -83,7 +83,7 @@ Let's take a highly specialized search engine, doggos.io, as an example. Doggos.
         <td>7,870 ms</td>
       </tr>
     </tbody>
-    <caption>Mobile analysis of doggos.io</caption>
+    <caption>Mobile analysis of Doggos.com</caption>
   </table>
 </div>
 
@@ -97,7 +97,7 @@ If you are not sure which sites to look at, here are a few tools to try:
 2. [Alexa's similar sites](https://www.alexa.com/find-similar-sites) feature
 3. [SimilarWeb](https://www.similarweb.com)
 
-<img class="w-screenshot" src="./google-search-related-keyword.png" alt="Screenshot of Google search with the related keyword">
+{% Img src="image/admin/EzpGvSgVJYC2y3rsnHRk.png", alt="Screenshot of Google search with the related keyword", width="775", height="336" %}
 
 
 For a realistic picture, try to **find 10 or so competitors**.
@@ -108,7 +108,7 @@ Our niche search engine in this example has a handful of competitors and we'll f
 
 Create a chart with FCP and TTI times for all the similar websites and highlight the fastest in the bunch. A chart like this one gives you a clearer picture of how your website is doing compared to the competition.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -124,7 +124,7 @@ Create a chart with FCP and TTI times for all the similar websites and highlight
         <td bgcolor="yellow"><strong>3,150 ms<strong></td>
       </tr>
       <tr>
-        <td>doggos.io</td>
+        <td>Doggos.com</td>
         <td>1,800 ms</td>
         <td>6,500 ms</td>
       </tr>
@@ -139,21 +139,21 @@ Create a chart with FCP and TTI times for all the similar websites and highlight
         <td>7,040 ms</td>
       </tr>
     </tbody>
-    <caption>Competitive analysis of doggos.io on 3G network</caption>
+    <caption>Competitive analysis of Doggos.com on 3G network</caption>
   </table>
 </div>
 
 <figure>
-  <img class="w-screenshot" src="./doggo-at-a-computer.jpg" alt="Doggo at a computer">
+  {% Img src="image/admin/Mfzr0dmMxHij9KrJraHD.jpg", alt="Doggo at a computer", width="800", height="600" %}
   <figcaption>
-    Doggos.io seems to be doing okay on the FCP metric but seriously lagging behind in TTI
+    Doggos.com seems to be doing okay on the FCP metric but seriously lagging behind in TTI
   </figcaption>
 </figure>
 
 
 There's room for improvement and a good guideline for that is the [20% rule](https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#the-need-for-performance-optimization-the-20-rule). Research states that users recognize a difference in response times when it's greater than 20%. This means that if you want to be noticeably better than the best comparable site, you have to **be at least 20% faster**.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -174,15 +174,15 @@ There's room for improvement and a good guideline for that is the [20% rule](htt
         <td>2,520 ms</td>
       </tr>
     </tbody>
-    <caption>Performance budget that would get doggos.com ahead of the competition</caption>
+    <caption>Performance budget that would get Doggos.com ahead of the competition</caption>
   </table>
 </div>
 
 If you are trying to optimize an existing site that goal may seem impossible to reach. This is not a sign for you to give up. Start with small steps and set a budget at 20% faster than your current speed. Keep optimizing from there.
 
-For doggos.io, a revised budget could look like this.
+For Doggos.com, a revised budget could look like this.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -208,7 +208,7 @@ For doggos.io, a revised budget could look like this.
         <td>2,520 ms</td>
       </tr>
     </tbody>
-    <caption>Revised doggos.io performance budget</caption>
+    <caption>Revised Doggos.com performance budget</caption>
   </table>
 </div>
 
@@ -221,13 +221,13 @@ A solid performance budget combines different types of metrics. We've already de
 
 ### Budget for quantity-based metrics
 
-Whatever total page weight number you come up with, try to **deliver** under 170 KB of **[critical-path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) resources** (compressed/minified). This guarantees your website will be fast even on [inexpensive devices and slow 3G](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/).
+Whatever total page weight number you come up with, try to **deliver** under 170 KB of **[critical-path](/critical-rendering-path/) resources** (compressed/minified). This guarantees your website will be fast even on [inexpensive devices and slow 3G](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/).
 
 You can have a bigger budget for the desktop experience, but don't go wild. The median page weight on both desktop and mobile is over 1MB according to the [HTTP Archive](https://httparchive.org/reports/page-weight) data for the last year. To get a performant website you have to aim well below these median numbers.
 
 Here are a few examples based on TTI budgets:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -284,7 +284,7 @@ Here are a few examples based on TTI budgets:
   The recommended sizes are for the critical-path resources.
 {% endAside %}
 
-Defining a budget based on quantity metrics is a tricky business. An e-commerce website with loads of product photos is very different from a news portal which is mostly text. If you have ads or analytics on your site, that increases the amount of Javascript you're shipping.
+Defining a budget based on quantity metrics is a tricky business. An e-commerce website with loads of product photos is very different from a news portal which is mostly text. If you have ads or analytics on your site, that increases the amount of JavaScript you're shipping.
 
 Use the table above as a starting point and adjust based on the type of content you are working with. Define what your pages will include, review your research and take an educated guess for individual asset sizes. For example, if you are building a website with a lot of images, put stricter limits to JS size.
 
@@ -292,7 +292,7 @@ Once you have a working website, check how you are doing on user-centric perform
 
 ### Budget for rule-based metrics
 
-Very effective rule-based metrics are [Lighthouse](https://developers.google.com/web/tools/lighthouse/) scores. Lighthouse grades your app in 5 categories and one of those is performance. Performance scores are calculated based on [5 different metrics](https://developers.google.com/web/tools/lighthouse/scoring#perf-audits), including First Contentful Paint and Time to Interactive.
+Very effective rule-based metrics are [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) scores. Lighthouse grades your app in 5 categories and one of those is performance. Performance scores are calculated based on [5 different metrics](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/#perf-audits), including First Contentful Paint and Time to Interactive.
 
 When you try to build a great site, **set Lighthouse performance score budget to at least 85 (out of 100)**. Use [Lighthouse CI](https://github.com/ebidel/lighthouse-ci) to enforce it on pull-requests.
 
@@ -300,11 +300,11 @@ When you try to build a great site, **set Lighthouse performance score budget to
 
 Ask yourself what level of interaction you expect on your site. If it's a news website, users' primary goal is to read content so you should focus on rendering quickly and keeping FCP low. Doggos.com visitors want to click on relevant links as soon as possible, so the top priority is low TTI.
 
-Find out exactly what part of your audience browses on desktop vs. on mobile devices and prioritize accordingly. One way to figure this out is to check what your audience is doing on competitors' websites, through the [Chrome User Experience report](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard) dashboard.
+Find out exactly what part of your audience browses on desktop vs. on mobile devices and prioritize accordingly. One way to figure this out is to check what your audience is doing on competitors' websites, through the [Chrome User Experience report](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) dashboard.
 
-<figure class="w-figure">
-  <img src="./chrome-user-experience-report.png" alt="Device distribution data from Chrome User Experience report">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/admin/ycZwOrFNzjdjquriM9rJ.png", alt="Device distribution data from Chrome User Experience report", width="800", height="530" %}
+  <figcaption>
     Device distribution data from Chrome User Experience report
   </figcaption>
 </figure>
diff --git a/src/site/content/en/fast/your-first-performance-budget/lighthouse-audits-panel.png b/src/site/content/en/fast/your-first-performance-budget/lighthouse-audits-panel.png
deleted file mode 100644
index bec371d1b89..00000000000
Binary files a/src/site/content/en/fast/your-first-performance-budget/lighthouse-audits-panel.png and /dev/null differ
diff --git a/src/site/content/en/feed.njk b/src/site/content/en/feed.njk
index 807b904ed65..78b9571e583 100644
--- a/src/site/content/en/feed.njk
+++ b/src/site/content/en/feed.njk
@@ -1,9 +1,10 @@
 ---
+layout: feed
 metadata:
   title: web.dev
   url: https://web.dev
   icon: https://web.dev/images/social.png
-  logo: https://web.dev/images/rss-banner.png
+  logo: https://web.dev/images/shared/rss-banner.png
   author:
     name: Google Developers
   feed:
@@ -15,34 +16,3 @@ metadata:
 noindex: true
 permalink: "/{{lang}}/feed.xml"
 ---
-<?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-  <title>{{ metadata.title }}</title>
-  <subtitle>{{ metadata.feed.subtitle }}</subtitle>
-  <link href="{{ metadata.feed.url }}" rel="self"/>
-  <link href="{{ metadata.url }}"/>
-  <updated>{{ collections.blogPosts | reverse | rssLastUpdatedDate }}</updated>
-  <id>{{ metadata.feed.id }}</id>
-  <author>
-    <name>{{ metadata.author.name }}</name>
-  </author>
-  <icon>{{ metadata.icon }}</icon>
-  <logo>{{ metadata.logo }}</logo>
-  {% for post in collections.blogPosts -%}
-  {#  absoluteUrl comes from 11ty RSS Plugin (@see https://www.11ty.dev/docs/plugins/rss/) #}
-  {% set absolutePostUrl -%}{{ post.data.canonicalUrl | url | absoluteUrl(metadata.url) }}{%- endset %}
-  <entry>
-    <title>{{ post.data.title }}</title>
-    <link href="{{ absolutePostUrl }}"/>
-    <updated>{{ post.date | rssDate }}</updated>
-    <id>{{ absolutePostUrl }}</id>
-    <content type="html">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
-    {% for entry in post.data.authors %}
-    {%- set author =  collections.authors[entry] -%}
-    <author>
-      <name>{{ author.title }}</name>
-    </author>
-    {%- endfor %}
-  </entry>
-  {%- endfor %}
-</feed>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/adding-a-course/index.md b/src/site/content/en/handbook/adding-a-course/index.md
new file mode 100644
index 00000000000..8ea2531b9da
--- /dev/null
+++ b/src/site/content/en/handbook/adding-a-course/index.md
@@ -0,0 +1,123 @@
+---
+layout: handbook
+title: Adding a course
+date: 2021-08-11
+description: |
+  Learn how to add a new course to the site.
+---
+
+## Add your content
+
+Create a new directory in `src/site/content/en/learn/`. The name of this
+directory will be your `projectKey` which you'll use later. This will also be
+your course's url. For example, the directory `src/site/content/en/css` has a
+`projectKey` of `css` and is accessible at [web.dev/learn/css](/learn/css).
+
+Add an `index.md` to the root of this directory. This will be your course's
+landing page. You can [copy the one from Learn CSS](https://github.com/GoogleChrome/web.dev/blob/main/src/site/content/en/learn/css/index.md) as a starter.
+
+Finally, add an `11tydata.js` file in this directory. The file name should match
+the directory name. So if your directory is named `css`, you will add a file
+named `css.11tydata.js`.
+
+Add this content to your `11tydata.js` file. **Be sure to update the
+`projectKey` so that it matches your directory name**:
+
+```js
+module.exports = function () {
+  // The key is used to look up the data for the course in _data.
+  // e.g. A course with a key of 'a11y' would have a corresponding
+  // _data/courses/a11y directory.
+  const projectKey = 'YOUR_PROJECT_KEY';
+
+  return {
+    layout: 'course',
+    projectKey,
+    searchTag: `course-${projectKey}`,
+    // Exclude course content from the /tags/ pages.
+    excludeFromTags: true,
+    // Exclude course content from the /authors/ pages.
+    excludeFromAuthors: true,
+    eleventyComputed: {
+      tags: (data) => {
+        const {searchTag} = data;
+        let tags = data?.courses?.[projectKey]?.meta?.tags || [];
+        tags = [...tags, ...data.tags];
+        if (!tags.includes(searchTag)) {
+          tags.push(searchTag);
+        }
+        return tags;
+      },
+      thumbnail: (data) => {
+        // Use thumbnail defined in the frontmatter or in the meta.yml file.
+        return data.thumbnail || data?.courses?.[projectKey]?.meta?.thumbnail;
+      },
+      // Use this flag to prevent the course from showing up in production.
+      permalink: (data) => {
+        if (process.env.ELEVENTY_ENV === 'prod') {
+          return false;
+        }
+        return (data.page.filePathStem + '.html').replace(/^\/en\//, '/');
+      },
+    },
+  };
+};
+```
+
+## Add your title and description
+
+Edit `src/site/_data/i18n/courses.yml` so it includes a title and description
+for your course. Our team will handle translating your course title and
+description so you only need to provide an `en` key.
+
+## Add your course images
+
+You course will need a few images for the UI.
+
+- `src/images/courses/YOUR_PROJECT_KEY/logo.svg` (140 x 40px)
+- `src/images/courses/YOUR_PROJECT_KEY/background.svg` (347 x 240px)
+- `src/images/courses/YOUR_PROJECT_KEY/card.svg` (480 x 480px)
+
+You will also need a social media thumbnail (1200 x 675px). This thumbnail
+should be uploaded to [our image CDN](/markup-media/#using-the-images-cdn) and
+added to the course's `meta.yml` file (explained below). The thumbnail should
+contain the web.dev logo as a watermark ([example](https://web-dev.imgix.net/image/foR0vJZKULb5AGJExlazy1xYDgI2/VmeHSQWK5LExsQQ0gUxh.svg?auto=format&fit=max&w=1200&fm=auto)).
+
+## Configure your course
+
+Create the following files:
+
+- `src/site/_data/courses/YOUR_PROJECT_KEY/meta.yml`
+- `src/site/_data/courses/YOUR_PROJECT_KEY/toc.yml`
+
+The `meta.yml` file defines important information about your course such as its
+publish date, title, etc.
+
+The `toc.yml` specifies your course's table of contents. Take a look at the
+[Learn CSS toc.yml](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/courses/css/toc.yml) for an example.
+
+A simple, linear course could look like:
+
+```yaml
+# toc.yml
+- url: /learn/css
+- url: /learn/css/zalgo
+- url: /learn/css/clearfix
+```
+
+However, it's also possible to create nested sections:
+
+```yaml
+# toc.yml
+- url: /learn/css
+- title: i18n.courses.learn.esoterica
+  sections:
+  - url: /learn/css/zalgo
+  - url: /learn/css/clearfix
+  - title: i18n.courses.learn.even_more_estoerica
+    sections:
+    - url: /learn/css/highest_zindex_you_can_imagine
+```
+
+A course with nested sections will still order each page linearly.
+When they complete a section, they'll be prompted to move to the next section in the order it appears in the `toc.yml` (regardless of nesting level).
diff --git a/src/site/content/en/handbook/audience/index.md b/src/site/content/en/handbook/audience/index.md
index cd71c78ffec..58d591e6f5f 100755
--- a/src/site/content/en/handbook/audience/index.md
+++ b/src/site/content/en/handbook/audience/index.md
@@ -3,7 +3,7 @@ layout: handbook
 title: Audience
 date: 2019-06-26
 description: |
-  Definitions of the the key personas for web.dev and advice about how to write for them.
+  Definitions of the key personas for web.dev and advice about how to write for them.
 ---
 
 When you're writing for web.dev, it's important to consider the persona or personas you're writing for. Keeping your audience in mind helps you make good writing decisions, like how much background information to include or whether you need to define a key term. Those considerations help ensure that your readers can learn or accomplish something.
@@ -50,7 +50,7 @@ Emily works as a software engineer. In her free time, she likes experimenting wi
 ### New developer (Jaimie)
 Jaimie first took a web development class at their local community college and is now a computer science student at a California state university. They are applying for internships to gain more hands-on experience, and they want to learn about the latest web development technologies to become a more competitive candidate.
 
-* **Prior knowledge:** Jaimie has taken several college-level computer science courses, but they've only covered the basics of HTML, CSS, and vanilla Javascript.
+* **Prior knowledge:** Jaimie has taken several college-level computer science courses, but they've only covered the basics of HTML, CSS, and vanilla JavaScript.
 * **Entry point:** Whether directed to the page through searching or at the recommendation of a friend or instructor, Jaimie arrives at the "Getting Started" collection (forthcoming) on web.dev.
 * **Goal:** Learn about the most recent web development tools and best practices to create a personal site from scratch to apply for industry jobs.
 
diff --git a/src/site/content/en/handbook/author-profile/index.md b/src/site/content/en/handbook/author-profile/index.md
index 94c5b29d8b5..d396ca011ed 100644
--- a/src/site/content/en/handbook/author-profile/index.md
+++ b/src/site/content/en/handbook/author-profile/index.md
@@ -2,69 +2,88 @@
 layout: handbook
 title: Authors profile
 date: 2019-06-26
+updated: 2021-06-21
 description: |
   Learn how to create an author profile for web.dev.
 ---
 
 ## Add yourself to the authors list
-1. Add a new object to [`authorsData.json`](https://github.com/GoogleChrome/web.dev/blob/master/src/site/_data/authorsData.json) with the following structure. Make sure to choose a unique author slug.
 
-    ```json
-    "authorslug": {
-      "name": {
-        "given": "Jaimie",
-        "family": "Smith"
-      }
-    },
-    ```
+1. Add a new object to [`authors.yml`](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/i18n/authors.yml) with the following structure. Make sure to choose a unique author slug.
 
-1. If you want links to your online accounts to appear in your author lockup, add any of these members to your author object.
+   ```yml
+   authorslug:
+     title:
+       en: Full Name
+     description:
+       en: A relevant description about yourself you'd like to share.
+     bio:
+       en: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mollis ipsum. Morbi porta hendrerit neque, eu pretium enim pulvinar vel. Aliquam in leo eu est rutrum tincidunt et ac arcu. Vestibulum nec lorem ut elit tincidunt faucibus sit amet aliquam arcu. Nulla vestibulum fermentum velit, id rhoncus dui blandit vel.
+   ```
 
-    ```json/5-7
-    "jaimiesmith": {
-      "name": {
-        "given": "Jaimie",
-        "family": "Smith"
-      },
-      "twitter": "jaimiesmith",
-      "github": "jaimiesmith",
-      "glitch": "jaimiesmith",
-      "homepage": "https://jaimiesmithis.cool/",
-      "description": {
-        "en": "Jaimie is more than meets the eye"
-      },
-    },
-    ```
+   You can add multiple paragraphs to your author bio. 
 
-    <figure class="w-figure">
-      <img class="w-screenshot" src="./lockup.png" alt="Screenshot of an author lockup">
-    </figure>
+   ```yml
+   authorslug:
+     title:
+       en: Full Name
+     description:
+       en: A relevant description about yourself you'd like to share.
+     bio:
+       en:
+        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mollis ipsum. Morbi porta hendrerit neque, eu pretium enim pulvinar vel. Aliquam in leo eu est rutrum tincidunt et ac arcu. Vestibulum nec lorem ut elit tincidunt faucibus sit amet aliquam arcu. Nulla vestibulum fermentum velit, id rhoncus dui blandit vel.
+        - Aliquam eu lorem ac orci consequat faucibus. Cras in orci maximus justo lobortis mollis. Nam volutpat dictum quam. Integer vitae tincidunt est. Quisque fermentum eget lectus a vulputate. Nam blandit urna sed magna lobortis, feugiat volutpat lacus scelerisque.
+   ```
 
-1. You can also add supplemental info, but it's not currently displayed on web.dev.
+   You can add multiple titles and descriptions to your author data for each language that is supported by using the [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) code for that language.
 
-    ```json/8-16
-    "jaimiesmith": {
-      "name": {
-        "given": "Jaimie",
-        "family": "Smith"
-      },
-      "twitter": "jaimiesmith",
-      "github": "jaimiesmith",
-      "glitch": "jaimiesmith",
-      "homepage": "https://jaimiesmithis.cool/",
-      "description": {
-        "en": "Jaimie is more than meets the eye"
-      },
-      "org": {
-        "name": "Google",
-        "unit": "Developer Relations"
-      },
-      "country": "US",
-    },
-    ```
+   ```yml
+   authorslug:
+     title:
+       en: Full Name
+       es: Nombre completo
+     description:
+       en: A relevant description about yourself you'd like to share.
+       es: Una descripción relevante traducida por Google sobre usted que le gustaría compartir.
+     bio:
+       en: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mollis ipsum. Morbi porta hendrerit neque, eu pretium enim pulvinar vel. Aliquam in leo eu est rutrum tincidunt et ac arcu. Vestibulum nec lorem ut elit tincidunt faucibus sit amet aliquam arcu. Nulla vestibulum fermentum velit, id rhoncus dui blandit vel.
+       es: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mollis ipsum. Morbi porta hendrerit neque, eu pretium enim pulvinar vel. Aliquam in leo eu est rutrum tincidunt et ac arcu. Vestibulum nec lorem ut elit tincidunt faucibus sit amet aliquam arcu. Nulla vestibulum fermentum velit, id rhoncus dui blandit vel.
+   ```
+
+2. If you want links to your online accounts to appear in your author lockup add a new object to [`authorsData.json`](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/authorsData.json) with the following structure. Make sure to use the same author slug used in the [`authors.yml`](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/i18n/authors.yml).
+
+   ```json
+   "paulkinlan": {
+     "homepage": "https://paul.kinlan.me/",
+     "twitter": "paul_kinlan",
+     "github": "PaulKinlan",
+     "glitch": "PaulKinlan",
+     "dcc": "paulkinlan",
+     "mastodon": "https://status.kinlan.me/@paul",
+     "linkedin": "https://uk.linkedin.com/in/paulkinlan"
+   },
+   ```
 
 ## Create a profile image
-1. Select a photo of yourself that clearly shows your face and upper shoulders.
-1. Save two versions of the photo in `/images/authors`:
-    * yourauthorslug.jpg (96 px x 96 px)
-    * yourauthorslug@2x.jpg (192 px x 192 px)
+
+1. Follow the [Images and video](/handbook/markup-media/) guide to upload your photo to the CDN.
+
+2. The image uploader will return a shortcode. Copy the `src` value from the
+   shortcode and use it as the `image` value in your profile in the [`authorsData.json`](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/authorsData.json).
+
+   ```json
+   "paulkinlan": {
+     "homepage": "https://paul.kinlan.me/",
+     "twitter": "paul_kinlan",
+     "github": "PaulKinlan",
+     "glitch": "PaulKinlan",
+     "dcc": "paulkinlan",
+     "mastodon": "https://status.kinlan.me/@paul",
+     "linkedin": "https://uk.linkedin.com/in/paulkinlan",
+     "image": "image/T4FyVKpzu4WKF1kBNvXepbi08t52/0O1ZGr2P0l9oTKabyUK5.jpeg"
+    }
+   ```
+
+  <figure>
+    {% Img src="image/SZHNhsfjU9RbCestTGZU6N7JEWs1/WtrUKbg3m1QMimf7qHB3.png", alt="Screenshot of an author lockup", width="640", height="500" %}
+  </figure>
diff --git a/src/site/content/en/handbook/author-profile/lockup.png b/src/site/content/en/handbook/author-profile/lockup.png
deleted file mode 100644
index 50c7cc327d7..00000000000
Binary files a/src/site/content/en/handbook/author-profile/lockup.png and /dev/null differ
diff --git a/src/site/content/en/handbook/banners/index.md b/src/site/content/en/handbook/banners/index.md
new file mode 100644
index 00000000000..e637f001957
--- /dev/null
+++ b/src/site/content/en/handbook/banners/index.md
@@ -0,0 +1,34 @@
+---
+layout: handbook
+title: Banners
+date: 2021-06-28
+description: |
+  Learn how to add banners to the site.
+---
+
+This guide explains how to add a banner to the site.
+
+## Add a site-wide banner
+
+In `src/site/_date/site.js`, look for these two lines:
+
+```js
+isBannerEnabled: …,
+banner: …
+```
+
+Set `isBannerEnabled` to `true`.
+Add a markdown string for your `banner` message.
+
+Example:
+
+```js
+isBannerEnabled: true,
+banner:
+  'PWA Summit: a conference to help everyone succeed with PWAs is happening Oct 6 & 7. [Submit your talk now](https://pwasummit.org).',
+```
+
+## Exclude a banner from a page
+
+If you set `show_banner: false` in a page's YAML frontmatter, then it will
+not display a site banner.
diff --git a/src/site/content/en/handbook/case-study-guidelines/index.md b/src/site/content/en/handbook/case-study-guidelines/index.md
new file mode 100644
index 00000000000..9e734144f35
--- /dev/null
+++ b/src/site/content/en/handbook/case-study-guidelines/index.md
@@ -0,0 +1,143 @@
+---
+layout: handbook
+title: Case study guidelines
+authors:
+  - kaycebasques
+date: 2021-01-26
+---
+
+The goal of this guide is to help you write effective case studies.
+
+## web.dev's goal for case studies {: #goal }
+
+**Our goal is to persuade web developers to make a change**. The best way to do
+that is to focus on how the reader's life will get better if they make the
+change.
+
+We understand that the partner's motivation is usually to increase awareness of
+their company or product. We believe that it's in the partner's best interest to
+not focus on themselves too much. By focusing on what's in it for web developers (the
+people who are most likely to read our case studies), we maximize the odds that
+people actually read and share the case study.
+
+## Find a compelling correlation {: #correlation }
+
+A very effective approach for case study messaging is to highlight a correlation
+between the changes that the web developers made and a business metric
+improvement. Examples:
+
+* [Clipchamp's video editor PWA installs see a 97% monthly growth](/clipchamp/)
+* [PWA users are 2.5x more likely to purchase Gravit Designer PRO](/gravit-designer/)
+* [JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications](/jdid/)
+* [Rakuten 24's investment in PWA increases user retention by 450%](/rakuten-24/)
+* [How focusing on web performance improved Tokopedia's click-through rate by 35%](/tokopedia/)
+
+The reason this is important is because web development teams often need to
+persuade business stakeholders before they can make any significant changes
+to their website or processes. Business stakeholders won't agree to these
+changes unless there is evidence that the ROI is worthwhile.
+
+## Organize the beginning of your content as an inverted pyramid {: #inverted-pyramid }
+
+The [inverted pyramid](https://www.nngroup.com/articles/inverted-pyramid/)
+is a journalism best practice. Organize your content so that the most
+important information is at the top, and the least important at the bottom.
+
+Think about it this way: 100K people might see a link to your case study
+on social media. 50K of those people actually open the link. And only 5K
+actually read through the whole thing.
+
+### Title {: #title }
+
+The title is the single most important part of your case study because
+it's what the greatest amount of people see. It should be focused
+around your [compelling correlation](#correlation).
+
+In other words, most case study titles should have these 3 parts:
+
+* The name of the company
+* The web development change(s) they made
+* The business metric improvement correlated to the change(s)
+
+### Subtitle {: #subtitle }
+
+The subtitle (or subhead) is the text that appears below the title. See
+[subhead](/handbook/yaml-front-matter/#subhead) for an example. It also shows up
+on the [blog homepage](/blog) and is the text that we suggest to search engines
+to present on Search Engine Results Pages. Therefore this is the second most
+important part of your case study (because it's the second-most-seen text).
+
+The subtitle is a good place to share other noteworthy correlations
+([example](/gravit-designer/)). Or, you can elaborate on the story that you
+began to tell in the title ([example](/betty-crocker/)).
+
+### Introduction {: #introduction }
+
+The reader, especially business executives, expect the first paragraphs of the
+content to provide a summary of the most important information. A good way to
+ensure that you provide all important information is to systemetically answer
+the [Five Ws and How][five].
+
+Avoid the urge to talk too much about the partner. It's OK to share some context
+(1-3 sentences) so that the readers understand what the company/product does. If
+it gets too long, though, it begins to sound like a sales pitch.
+
+## General organization {: #organization }
+
+After you have optimized your title, subtitle, and introduction, we can give you
+more flexibility around how you organize the rest of your ideas. In other words,
+you don't need to strictly follow an inverted pyramid approach throughout the
+entire case study.
+
+The [Scale on web case studies][scale] use the following pattern:
+
+* Highlighting the opportunity
+* The tools they used
+* Overall business results
+
+The [BookMyShow case study](/bookmyshow/)
+demonstrates another common organization:
+
+* Challenge
+* Solution
+
+## Hero images {: #hero }
+
+A well-designed hero image is a good way to make your case study look
+attractive and professional. In general, the web.dev team doesn't have resources
+to create custom hero images for you. See [Hero images](/handbook/markup-media/#hero)
+for dimension requirements.
+
+## Cross-posting {: #crossposting }
+
+If your case study has already been published on another site and you'd like to mirror it on web.dev, then whether your case study gets published here becomes more complicated.
+
+In particular, requesting to cross-post articles that have already been posted on self-publishing outlets such as personal blogs are problematic, as the web.dev editorial team has a rigorous editorial process. This means that the final version of your proposed case study will likely be significantly different than what you have already published.
+
+There is also the concern of what version is canonical. While the web.dev team wants to publish compelling case studies, canonicity is important, as it can raise issues when it comes to how your article is indexed if you don't take care to mark [which version is canonical](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#canonical).
+
+Generally speaking, you should avoid proposing case studies which have already been published elsewhere. While there may be exceptions to this rule, they are few and far between, and must be cases in which the original version has not been self-published, and is already marked as the canonical version.
+
+## Examples {: #examples }
+
+The [Scale on web case studies](/tags/scale-on-web/) case studies are the best case studies
+we've produced to date, in terms of aligning with the case study guidelines.
+
+You can check out [all of our case studies](/tags/case-study/) for more ideas,
+but be aware that they may not follow the case study guidelines as
+closely as the [Scale on web case studies][scale] do.
+
+## Deliverables {: #deliverables }
+
+When submitting the first draft of your case study, please submit it as a Google
+Doc. This helps to ensure that editorial feedback is communicated in a
+consistent way in a format that is familiar for Googlers.
+
+While not _strictly_ necessary, it helps to streamline the process if source
+files for figures can be provided. However, if the person responsible for
+writing the case study doesn't have domain knowledge in using image editors,
+the technical writing team is capable of extracting images from Google Docs if
+necessary.
+
+[five]: https://www.workfront.com/blog/project-management-101-the-5-ws-and-1-h-that-should-be-asked-of-every-project
+[scale]: /tags/scale-on-web/
diff --git a/src/site/content/en/handbook/content-checklist/index.md b/src/site/content/en/handbook/content-checklist/index.md
index 04d54fa329f..0976bec4678 100644
--- a/src/site/content/en/handbook/content-checklist/index.md
+++ b/src/site/content/en/handbook/content-checklist/index.md
@@ -1,98 +1,495 @@
 ---
 layout: handbook
-title: web.dev content checklist
+title: web.dev content review checklists
 date: 2019-06-26
-updated: 2020-07-16
+updated: 2021-01-25
 description: |
-  A checklist for web.dev content reviews.
+  The official checklists for web.dev content reviews.
 ---
 
-Use this checklist to determine if a draft meets web.dev's [content quality guidelines](/handbook/quality/).
-Work through the checklist from top to bottom. For example, if a draft has some of the problems listed
-in [Basics](#basics), there's not much use in working through the rest of the checklist until those problems are fixed.
-
-The long-term goal of this page is to concretely test **every** quality guideline. It also tests for lower-level issues
-that commonly appear in drafts. This page is primarily intended for web.dev reviewers. web.dev authors can also
-use it to self-review their content and fix problems rather than waiting for reviewers to highlight them.
-
-## Basics
-
-1. Is the piece providing value for one or more of the web.dev [personas](/handbook/audience)?
-1. Does the title follow good SEO practices? See the example in
-   [Explain why a user should care about your content](/handbook/quality/#explanations).
-1. Do the `subtitle` and `description` convey the value proposition?
-1. Is the piece 1,000 words or less—or is there a good reason for it to be longer?
-1. Are all statements and advice accurate and aligned with best practices?
-1. Can you complete the task with the provided instructions? Are there any missing steps? Does the code work?
-
-## Style and voice
-
-1. Is the [voice](/handbook/voice) appropriate for the web.dev audience?
-1. Can any language be removed without changing the meaning or voice?
-1. Is the language as simple as possible? Is there any unnecessary jargon?
-
-## Organization
-
-1. Are top-level section headings `<h2>` elements rather than `<h1>` elements? (That is, do they begin with `##` in Markdown?)
-1. Headings should not [skip levels](/heading-levels).
-1. Is the structure of the piece clear? Do headings convey the structure?
-1. Does each paragraph focus on one main idea?
-1. Does the subheading draw the reader in or provide extra context? Is it concise? Is it unique text?
-1. If the page describes a feature or API that isn't available on all browsers, is that clearly stated in a
-   `Cross-browser support` section at the top of the page?
-1. Does the directory name (which will become the URL) mostly match the page's title? The title should be
-   as specific as possible in order to prevent URL collisions in the future. For example, a blog post that's
-   just providing an update on the User Timing API shouldn't use the URL `web.dev/user-timing`. That URL is
-   very canonical and should be reserved for the canonical guidance on the User Timing API.
-
-## Instruction
-
-1. If the piece expects readers to have prior knowledge, is that made clear up front?
-1. Does the piece explain why the process being taught matters?
-1. Are examples provided to support all key claims and ideas?
-1. Are instructions in second person (_you/your_), not first person (_we/our_)?
-1. Are common instructions provided using the web.dev [Instruction components](/handbook/web-dev-components/#instruction)?
-
-## Media
-
-1. Are images and videos used to clarify ideas that would be difficult to understand from text alone?
-1. Are any images or videos included that don't directly relate to ideas in the text?
-1. Are [image captions](/handbook/use-media/#image-captions) correctly formatted?
-1. Do all images have [alt text](/image-alt)?
-1. (Blog only) If the post has a hero image, does the hero image look good on web.dev/blog?
-1. Are all images optimized so that the size of the repository stays as small as possible?
-1. Do the images have hardcoded English descriptions in them? If possible, use numbers instead
-   and then use a numbered list below the image to explain each item. This makes the page easier to translate.
-1. Is the hero image `3200px` wide by `960px` tall and has it been optimized (to keep the size of the repository as small as possible)?
-1. All GIFs should be converted to animated videos. See [Replace animated GIFs with videos](/replace-gifs-with-videos/)
-   and [Videos hosted on web.dev](/handbook/markup-media/#video-hosted-on-web.dev)
-
-## Code
-
-1. Are code blocks and sample apps as simple as possible while still conveying the core concept?
-1. Is a brief description of a sample app's functionality provided before the app itself?
-1. Is [code highlighting](/handbook/markup-code/#code-highlighting) used to indicate lines that have been added or changed?
-1. Is all sample code [accessible](/handbook/inclusion-and-accessibility/#create-accessible-code-blocks)?
-1. If the page has embedded Glitches, have they been [properly set up](/handbook/web-dev-components/#glitches)?
-1. Articles should mention specific versions of Chrome. They should not mention `Stable`, `Beta`, or `Canary`
-   because the Chrome version that's associated with those releases changes over time.
-
-## Links
-
-1. Do all links work?
-1. Are all links to web.dev pages and assets [relative](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#Examples_of_relative_URLs)?
-   This is important because if we need to move content around, relative paths are less likely to break.
-1. When referencing a web platform API, does the page link out to the canonical MDN API reference?
-
-## Mechanics
-
-1. Is the text free of spelling and capitalization errors? (Check the [word list](/handbook/word-list).)
-1. Are [dashes and hyphens](/handbook/grammar/#dashes-and-hyphens) used correctly?
-1. Are titles and headings in sentence case with no terminal period?
-1. Are [keyboard key commands](/handbook/grammar/#ui-elements-and-interaction) correctly formatted?
-1. The title should not have inline code formatting because backtick characters show up verbatim in web.dev's search results.
-
-## Attribution
-
-1. An author should only be added to a page if that person has significantly updated the existing
-   content or contributed significant new content.
+This page contains the official checklists that all web.dev editors are expected to use
+when reviewing new content. Authors are encouraged to use these checklists to
+self-review their writing and fix problems proactively, rather than waiting for
+an editor to catch them.
+
+The review process has two parts. The goal of the [early stage review checklist](#early)
+is to make sure the content is useful to web.dev's target audience. The goal of the
+[late-stage review checklist](#late) is to make sure the content is professional
+and "plays nicely" with the rest of the web.dev codebase (e.g. not using a URL
+that we'll want to use for other purposes).
+
+## Early stage review checklist {: #early }
+
+### The content aligns with web.dev's main audience {: #audience }
+
+web.dev's mission is to help web developers build excellent websites.
+All content on web.dev should help web developers in one way or another.
+If the content does not seem helpful for web developers, or
+the content seems to be primarily written for an audience other than
+web developers, it's probably not a good fit for web.dev.
+
+### The content is about techniques or APIs that are available cross-browser {: #support }
+
+If the content is about an API in origin trial, or only available in Chrome, it is likely that
+[developer.chrome.com](https://developer.chrome.com/) is the better location.
+
+### The guidance is usable {: #usable }
+
+If the content provides step-by-step instructions on completing a task, make sure
+that someone (other than the author) has actually followed the instructions and
+was able to complete the task successfully. The editor can do this themselves or
+ask the author to find someone else to do a usability review.
+
+See [Usability reviews](/handbook/reviews/#usability) for instructions.
+
+### The content is a tutorial, how-to guide, or explainer {: #content-types }
+
+There are four common types of software documentation: tutorials, how-to guides,
+explainers, and references. Check out [Divio's Documentation System][divio] for an
+explanation of these content types.
+
+Each page of web.dev content should be focused around one of these content types
+as much as possible. For example, a single page of content should not try to be a
+tutorial and an explainer.
+
+Reference documentation pages are not allowed on web.dev. Reference
+documentation is better suited for [MDN](https://developer.mozilla.org/),
+or our [web platform documentation](https://developer.chrome.com/docs/web-platform/) section.
+
+### The content is unique {: #unique }
+
+After reading through the content, use a search engine to search for similar
+content (from any reputable source, such as MDN or CSS-Tricks). If the proposed
+web.dev content largely duplicates another source's content, ask the author why
+it's necessary to duplicate the content.
+
+{% Aside %}
+  Rationale: every page of new content has a maintenance cost. We have to review every
+  page once or twice a year to make sure that its guidance is still accurate.
+{% endAside %}
+
+### The content is focused on a main idea {: #focused }
+
+Each page of content should have a main idea. All text, images, videos,
+code samples, etc. should be related to the page's main idea.
+
+### The content provides a path for getting background knowledge {: #prereqs }
+
+Think about the background knowledge that's required to understand the
+content you're reviewing. The content should provide a well-lit path
+for gaining that background knowledge.
+
+Here are the common strategies for helping readers gain background knowledge:
+
+* Expand the content to explain the topic in more depth.
+* Link to other, existing content on the topic.
+
+The one exception to this rule is basic web development knowledge. web.dev
+assumes that its readers understand the basics of CSS, HTML, and JavaScript.
+
+### Factual information is verified {: #facts }
+
+Factual claims should be backed by evidence or authoritative sources
+as much as possible.
+
+One seemingly small factual claim that has caused trouble
+in the past was the browser version associated to an API's release. For
+example, a post might claim that an API is launching in Chrome 88, but the
+author and reviewer didn't double-check that claim. A lot of web developers
+might then see the announcement on web.dev, attempt to try out the API, and get
+confused when the API doesn't work as intended (because it's not actually supported in
+that version).
+
+### The guidance is aligned with best practices {: #best-practices }
+
+Make a best effort to ensure that the content is aligned with general web
+development best practices.
+
+{% Aside %}
+  A note from the web.dev content lead: we understand that this is a tall order.
+  The author and reviewer are not expected to have complete expertise in every
+  aspect of web development. Nonetheless, if you take a moment and ask yourself
+  "is this content contradicting any other best practices I know of?" consistently,
+  we should be able to catch obvious issues.
+{% endAside %}
+
+Here are some strategies for checking if the content is aligned with best practices:
+
+* Run Lighthouse regularly and review all of its recommendations. Check if the content
+  you're reviewing contradicts any of Lighthouse's recommendations.
+* If the content discusses different aspects of web development (e.g. accessibility and
+  performance) and the author is only an expert in one of those aspects (e.g. performance),
+  ask a subject matter expert (SME) to do a quick review of the content. Instruct the
+  reviewer to specifically focus on making sure that the content is aligned with the best
+  practices of their area.
+
+Here are some common problems:
+
+* Using outdated Lighthouse metrics. The page should explicitly mention that the
+  metric is outdated, and list its recommended replacement.
+* The `unload` event is [considered harmful][unload]. The `pagehide` event should be used
+  instead.
+
+#### Anti-patterns should be clearly labeled {: #anti-patterns }
+
+Bad web development practices should clearly be labeled as such.
+Consider using [caution](/handbook/web-dev-components/#caution-asides)
+or [warning](/handbook/web-dev-components/#warning-asides) components.
+
+### Avoid subjective statements like "it's easy" {: #subjective }
+
+Subjective statements like "it's easy" or "the process is simple" can usually be
+removed. What might be easy for some might not be easy for others. Take a look
+at the [Words to Avoid in Educational Writing](https://css-tricks.com/words-avoid-educational-writing/)
+post from css-tricks for other examples.
+
+### Avoid summaries at the end of the content {: #summaries }
+
+The intro of the page should already summarize the content.
+
+### The writing is simple {: #simple }
+
+Use the simplest words available unless there is a specific reason to
+use a fancy word.
+
+{% Aside %}
+  Rationale: web.dev has an international audience. Many of our readers do not
+  speak English as their primary language. Using simple words increases the chances
+  that they will be able to understand our content.
+{% endAside %}
+
+{% Compare 'worse' %}
+  Utilize the Network panel to inspect network activity.
+{% endCompare %}
+{% Compare 'better' %}
+  Use the Network panel to inspect network activity.
+  {% CompareCaption %}
+    In rare cases the author might have a specific reason to use `utilize` over `use`,
+    but in many cases it's not intentional.
+  {% endCompareCaption %}
+{% endCompare %}
+
+See also [Avoid fancy words](http://www.jlakes.org/ch/web/The-elements-of-style.pdf#page=73).
+
+Avoid using cultural idioms, for example: "Kill two birds with one stone". These
+may not be familiar to all readers.
+
+### The writing is concise {: #concise }
+
+The writing should be as long as needed in order to effectively explain
+the main idea of the page, and no longer.
+
+#### All words are necessary {: #redundancy }
+
+Delete redundant words, sentences, paragraphs, sections, and so on.
+
+One exception is when the author intentionally repeats an idea
+to make it easier to understand or emphasize its importance.
+
+#### The writing uses the present tense by default {: #present-tense }
+
+Rephrasing a text from the future tense to the present tense usually
+removes tens or hundreds of words from a text, without changing the meaning.
+
+{% Compare 'worse' %}
+  By default the resources will be listed chronologically. The top resource will usually
+  be the main HTML document. The bottom resource will be whatever was requested last.
+{% endCompare %}
+{% Compare 'better' %}
+  By default the resources are listed chronologically. The top resource is usually
+  the main HTML document. The bottom resource is whatever was requested last.
+  {% CompareCaption %}
+    This phrasing has 3 less words yet the meaning is the same.
+  {% endCompareCaption %}
+{% endCompare %}
+
+The author can use the future tense if they provide a logical rationale
+for its need.
+
+### The title is optimized {: #title }
+
+All web.dev titles should include all of the following elements whenever relevant:
+
+* A general description of the use case that the content helps solve
+* The exact name of the most relevant API, tool, product, etc.
+
+{% Compare 'worse' %}
+  Using Thumbor
+  {% CompareCaption %}
+    If you don't know what Thumbor is, you'll have no idea how this content is relevant for you.
+  {% endCompareCaption %}
+{% endCompare %}
+{% Compare 'worse' %}
+  How to optimize images
+  {% CompareCaption %}
+    Optimizing images is a big topic. This title makes it sound like
+    the page will cover all aspects of image optimization. When you open the page
+    and discover that it's only explaining how to use one specific tool, you may feel
+    like the page misled you.
+  {% endCompareCaption %}
+{% endCompare %}
+{% Compare 'better' %}
+  How to optimize images with Thumbor
+  {% CompareCaption %}
+    This title accurately summarizes the page's content and uses all relevant SEO
+    keywords (`How to optimize images` and `Thumbor`).
+  {% endCompareCaption %}
+{% endCompare %}
+
+### The intro clearly summarizes the purpose of the page {: #intro }
+
+Explicitly summarize what "task" you help the user solve in your intro.
+The "task" might be something concrete, such as optimizing images, or
+something abstract, such as understanding how browsers work. The first
+or last sentence of the intro is usually a good place for the summary.
+Consider using the [objective](/handbook/web-dev-components/#objective-asides)
+component.
+
+Here is a general formula for creating a useful summary:
+
+* Mention the [content type][divio] of the page: tutorial, how-to guide,
+  reference, overview, etc. Mentioning the content type gives the reader a
+  general idea of what type of content to expect.
+* Mention the user-focused task that the page helps solve.
+
+Examples:
+
+* [Extending Workbox](/extending-workbox/)
+* [Workers overview](/workers-overview/)
+* [Building a Stories component](/building-a-stories-component/)
+* [Browser-level lazy loading for CMSs](/browser-level-lazy-loading-for-cmss/)
+* [Measuring offline usage](/measuring-offline-usage/)
+
+Note that some of these examples use the generic term "post" or "article".
+They could be improved by replacing "post" or "article" with a more specific
+content type keyword, like guide, tutorial, etc.
+
+### The subheading (subtitle) draws the reader in or provides more context {: #subhead }
+
+See [`subhead`: add an enticing subtitle](/handbook/yaml-front-matter/#subhead).
+
+### The content is easy to scan {: #scannable }
+
+Many web.dev readers are in a hurry. All web.dev content should be easy to scan.
+
+#### Section headings are concise and descriptive {: #section-headings }
+
+Each section heading should clearly summarize the content contained within that section.
+
+#### Similar ideas are grouped together {: #grouping }
+
+Scan the sections of the content. Check for sections with similar ideas that
+are placed far apart (e.g. one section is at the top of the article, the other
+is at the bottom, yet they both discuss related concepts).
+
+Here are some common problems:
+
+* The page concludes with a Frequently Answered Questions (FAQs) section. Check
+  if the FAQs can be contextually discussed within a main section of the content.
+  See also [FAQs are a code smell](https://kayce.basqu.es/blog/FAQs/).
+
+### The paragraphs are effective {: #paragraphs }
+
+Each paragraph should be focused around one idea. The first sentence
+summarizes the main idea of the sentence. The following sentences provide
+supporting details of the main idea. The last sentence concludes the idea
+or transitions to a new idea. See [Writing Effective Paragraphs][paragraphs].
+
+### Complex ideas are explained effectively {: #effective }
+
+While reading a page, notice if you have to stop and re-read a section
+multiple times before you understand what it's saying. Check if any of
+the following strategies can be used to explain the idea more effectively:
+
+* Images and videos
+* Examples
+
+### Browser compatibility is mentioned near the start of the content {: #compatibility }
+
+When content is focused around specific web platform features or APIs,
+make sure that the browser compatibility of the APIs is specifically mentioned by including the
+[BrowserCompat component](/handbook/web-dev-components/#browsercompat).
+
+If a solid polyfill is available to complete support in all three engines,
+include details along with the BrowserCompat component.
+
+If the post refers to a number of APIs, or CSS properties, add the component for those features near the first mention of them.
+
+If the post mentions an API that is supported by all major modern browser engines without a polyfill, include the BrowserCompat component to clearly communicate that fact.
+
+Example: [New to the web platform in May](/web-platform-05-2022/).
+
+{% Aside %}
+  Rationale: We know from the [MDN Developer Needs Assessment 2019
+  Report](https://mdn-web-dna.s3-us-west-2.amazonaws.com/MDN-Web-DNA-Report-2019.pdf#page=20)
+  that browser compatibility is a top concern (items 1, 3, 4, 5). Non-public Google research
+  has corroborated these findings. Therefore, if a feature/API is not well supported, we
+  must respect the user's time and make that fact known upfront. And if the API is
+  well supported, then it is reasonable to assume that explicitly mentioning that fact
+  will make the feature/API more attractive.
+{% endAside %}
+
+### References to APIs link to relevant MDN documentation {: #api-references }
+
+When referencing a specific web platform API, link to the MDN reference documentation
+page for that API.
+
+{% Compare 'worse' %}
+  Cache-Control. The server can return a `Cache-Control` directive to specify
+  how, and for how long, the browser and other intermediate caches should
+  cache the individual response.
+{% endCompare %}
+{% Compare 'better' %}
+  [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control).
+  The server can return a `Cache-Control` directive to specify how, and for how long,
+  the browser and other intermediate caches should cache the individual response.
+{% endCompare %}
+
+### Code samples are minimal, complete, and reproducible {: #code-samples }
+
+Any code that is not directly relevant or necessary
+for understanding the main idea of the code sample should be deleted.
+
+See also [How to create a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
+
+### Links are useful {: #useful-links }
+
+For each link that the author provides, look out for:
+
+* A mismatch between the link text and the content of the link. For example, suppose
+  that the link text is `service worker tutorial` but the content of the link is
+  actually an API reference documentation page.
+* Content that does not actually help the reader.
+
+### The content references specific versions of browsers, not release channels {: #browser-versions }
+
+The release channels of major browsers are not stable over time.
+For example, currently `Google Chrome Stable` refers to version 85
+of the browser. In a year, `Google Chrome Stable` will refer to version 95.
+
+{% Compare 'worse' %}
+  The Keyboard API is now available in Chrome Canary.
+{% endCompare %}
+{% Compare 'better' %}
+  The Keyboard API is now available in Chrome 85 and later.
+{% endCompare %}
+
+### Other people's products are used as intended {: #intended-use }
+
+If the content mentions or features other people's products, said products
+are to be used as intended. For example, an article should not advise
+to flash a "homebrew" firmware onto a commercial device, unless this is
+explicitly blessed by the manufacturer.
+
+### Use examples liberally {: #examples }
+
+Provide more examples if a concept is unclear.
+
+### Get permission before mentioning other companies, products, etc. {: #permission }
+
+Don't mention other companies, products, services, etc. without
+that entity's permission. You can ask the content lead to make exceptions
+to this rule, which will be done on a case-by-case basis.
+
+{% Aside 'warning' %}
+Watch out for words that imply a business relationship between two companies.
+
+For example: "Company X is **partnering** with Company Y to do Z".
+
+It is a good idea to speak to representitives from both companies to define how
+their names should be referenced in an article.
+{% endAside %}
+
+### Use inclusive language {: #insensitive-words }
+
+Refer to the [GDDSG word list][wordlist] and make sure that you're not using
+any insensitive words, such as:
+
+* [blacklist](https://developers.google.com/style/word-list#blacklist)
+* [whitelist](https://developers.google.com/style/word-list#whitelist)
+* [native](https://developers.google.com/style/word-list#native)
+* [grandfathered](https://developers.google.com/style/word-list#grandfathered)
+* [hang](https://developers.google.com/style/word-list#hang)
+* [master](https://developers.google.com/style/word-list#master)
+* [slave](https://developers.google.com/style/word-list#slave)
+
+Refer to the [Inclusion and accessibility](/handbook/inclusion-and-accessibility/) section of the handbook to verify that
+text is inclusive for all audience members.
+
+## Late-stage review checklist {: #late }
+
+### Titles and section headings are sentence case {: #sentence-case }
+
+Follow the Google Developer Documentation Style Guide's guidance on
+[titles and headings](https://developers.google.com/style/headings).
+
+### The URL mostly matches the title and is not overly general {: #url }
+
+The URL of a page of content should mostly match the title of that page of content
+to avoid confusion.
+
+The URL of a page should not be overly general, unless that page is our
+authoritative content on that topic. For example, the URL of
+[Introducing `<model-viewer>` 1.1](/introducing-model-viewer/)
+is `https://web.dev/introducing-model-viewer/` because we wanted to reserve
+`https://web.dev/model-viewer/` for our authoritative guide on that topic.
+
+### The page uses components when relevant {: #components }
+
+Review [web.dev's UI components](/handbook/web-dev-components/) and check if the
+presentation of any of the content can be enhanced by the components.
+
+### The hero image's thumbnail looks good {: #thumbnail }
+
+If the page is going to be on the blog and has a hero image, go to the blog index page
+(e.g. `http://localhost:8080/blog` if you're reviewing the content locally)
+and make sure that the thumbnail version of the hero image looks good and is not
+cropped in a weird way. Use a [thumbnail](/yaml-front-matter/#thumbnail) if necessary.
+
+### All images have descriptive `alt` text {: #alt }
+
+Review the Markdown and make sure that each image has descriptive
+[alt text](/image-alt). Put yourself in the shoes of people who can't see
+those images. Is there any critical information embedded in the images that
+isn't covered anywhere else in the content?
+
+### All images use the Img shortcode and are sized correctly {: #images }
+
+Images must use the [`{% raw %}{% Img %}{% endraw %}` shortcode](/handbook/markup-media/) and
+should contain `width` and `height` attributes.
+
+{% Compare 'worse' %}
+  ```md
+  ![A system-level share target picker](./picker.png)
+  ```
+{% endCompare %}
+{% Compare 'better' %}
+  ```md
+  {% raw %}{% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="A system-level share target picker", width="370", height="349" %}{% endraw %}
+  ```
+{% endCompare %}
+
+### All words are spelled correctly {: #spelling }
+
+Follow the Google Developer Documentation Style Guide's guidance on [spelling][spelling].
+
+### The most important lines of code in a code block are highlighted {: #code-highlighting }
+
+[Code highlighting](/handbook/markup-code/#code-highlighting) should be used to indicate
+lines that have been added or changed.
+
+### GIFs have been converted to animated videos {: #gifs }
+
+All GIFs should be converted to animated videos to improve performance. See
+[Replace animated GIFs with videos](/replace-gifs-with-videos/)
+and [Videos hosted on web.dev](/handbook/markup-media/#video-hosted-on-web.dev)
+
+[divio]: https://documentation.divio.com/introduction/#the-secret
+[unload]: https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event
+[paragraphs]: https://www.riosalado.edu/web/oer/WRKDEV100-20012_INTER_0000_v1/lessons/Mod02_WritingEffectiveParagraphs.shtml
+[spelling]: https://developers.google.com/style/spelling
+[divio]: https://documentation.divio.com/introduction/#the-secret
+[guide]: https://documentation.divio.com/how-to-guides/#how-to
+[explanation]: https://documentation.divio.com/explanation/#explanation
+[tutorial]: https://documentation.divio.com/tutorials/#tutorials
+[wordlist]: https://developers.google.com/style/word-list
diff --git a/src/site/content/en/handbook/content-types/content-types.11tydata.js b/src/site/content/en/handbook/content-types/content-types.11tydata.js
new file mode 100644
index 00000000000..e64a8b70eb0
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/content-types.11tydata.js
@@ -0,0 +1,3 @@
+module.exports = {
+  noindex: true,
+};
diff --git a/src/site/content/en/handbook/content-types/example-codelab/index.md b/src/site/content/en/handbook/content-types/example-codelab/index.md
new file mode 100644
index 00000000000..71ff9fc5f6f
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-codelab/index.md
@@ -0,0 +1,33 @@
+---
+layout: codelab
+title: Example codelab
+authors:
+  - adamargyle
+description: >-
+  This page is used for visual testing of the codelab layout and also
+  showcases its capabilities
+date: 2023-01-17
+hero: image/admin/wKAhovrYm23nFtqFqYbE.png
+thumbnail: image/admin/tYvAWgtTaUOxXe9Pxacm.png
+glitch: grizzly-planet-bite
+glitch_path: index.html
+related_post: handbook/content-types/
+permalink: "/{{lang}}/handbook/content-types/example-codelab/index.html"
+---
+The codelab layout supports the full range of markdown elements/blocks as demonstrated in
+the [example post](/handbook/content-types/example-post).
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+magna aliqua. Diam sollicitudin tempor id eu nisl nunc. Interdum velit euismod in pellentesque.
+Enim facilisis gravida neque convallis a. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.
+
+## Adding a codelab
+
+1. Add a new page using the codelab layout: `layout: codelab`
+2. Create a glitch project and add the slug to the frontmatter: `glitch: grizzly-planet-bite`
+3. The project will surface as seen on the right.
+
+{% Aside 'caution' %}
+[This type of callout](#) suggests proceeding with caution.
+{% endAside %}
+
diff --git a/src/site/content/en/handbook/content-types/example-collection/index.md b/src/site/content/en/handbook/content-types/example-collection/index.md
new file mode 100644
index 00000000000..36677c49f9d
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-collection/index.md
@@ -0,0 +1,60 @@
+---
+layout: collection
+override:tags: []
+date: 2022-12-21
+title: Sample Collection Template
+pathName: learn-core-web-vitals
+cards:
+  - url: /new-patterns-july-2022/
+    eyebrow:
+      icon: featured
+      text: Featured
+    cardLayout: 'vertical'
+  - title: 'The CSS Podcast: Media query range syntax'
+    description: Praesent accumsan eros orci quis congue metus porta a sed dapibus magna.
+    thumbnail: image/SZHNhsfjU9RbCestTGZU6N7JEWs1/VwL892KEz6bakZMlq10D.png
+    eyebrow:
+      icon: podcast
+      text: Podcast
+    cardLayout: 'horizontal'
+    theme: 'tertiary'
+    column: '2'
+    url: /https://pod.link/thecsspodcast/
+  - title: Meet the Chrome team
+    description: We're meeting you where you are. Join us at upcoming web conferences in your region or catch up on past events.
+    eyebrow:
+      icon: event
+      text: Event
+    url: /meet-the-team
+  - url: /terra-dark-mode/
+    eyebrow:
+      icon: blog
+      text: Blog
+    cardLayout: 'vertical'
+    column: '3'
+    row: '2'
+  - title: Aspect ratio image card
+    description: With the aspect-ratioproperty, as you resize the card, the green visual block maintains this 16 x 9 aspect ratio.
+    eyebrow:
+      icon: pattern
+      text: Pattern
+    theme: 'quaternary'
+    url: /patterns/layout/aspect-ratio-image-card/
+  - title: Take our CSS course
+    description: Let’s gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
+    eyebrow:
+      icon: mortarboard
+      text: Learn
+    url: /explore
+  - url: /building-chrometober/
+    eyebrow:
+      icon: blog
+      text: Case study
+    cardLayout: 'horizontal'
+    column: '1'
+  - title: Lorem ipsum dolor sit amet
+    description: Mauris eu consequat ligula, eget facilisis erat. Fusce volutpat felis magna, sodales pharetra ante maximus vel.
+    eyebrow:
+      icon: news
+      text: What's new
+---
diff --git a/src/site/content/en/handbook/content-types/example-course/example-course.11tydata.js b/src/site/content/en/handbook/content-types/example-course/example-course.11tydata.js
new file mode 100644
index 00000000000..dd1581af4ba
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-course/example-course.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('example');
diff --git a/src/site/content/en/handbook/content-types/example-course/example-section-2/index.md b/src/site/content/en/handbook/content-types/example-course/example-section-2/index.md
new file mode 100644
index 00000000000..d0bf8712a6d
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-course/example-section-2/index.md
@@ -0,0 +1,10 @@
+---
+title: Example Section - 2
+authors:
+  - cariefisher
+description: This page is used for visual testing of the courses layout and also showcases its capabilities
+date: 2022-09-30
+---
+
+The courses layout supports the full range of markdown elements/blocks as demonstrated in
+the [example post](/handbook/content-types/example-post).
diff --git a/src/site/content/en/handbook/content-types/example-course/example-section/index.md b/src/site/content/en/handbook/content-types/example-course/example-section/index.md
new file mode 100644
index 00000000000..af5164c8f22
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-course/example-section/index.md
@@ -0,0 +1,10 @@
+---
+title: Example Section
+authors:
+  - cariefisher
+description: This page is used for visual testing of the courses layout and also showcases its capabilities
+date: 2023-01-17
+---
+
+The courses layout supports the full range of markdown elements/blocks as demonstrated in
+the [example post](/handbook/content-types/example-post).
diff --git a/src/site/content/en/handbook/content-types/example-course/example.assess.yml b/src/site/content/en/handbook/content-types/example-course/example.assess.yml
new file mode 100644
index 00000000000..f65056ffd1c
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-course/example.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Sample assessment
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: >-
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    options:
+      - content: 'A'
+        rationale: Example of an incorrect answer
+      - content: 'B'
+        rationale: Example of an incorrect answer
+      - content: 'C'
+        rationale: Example of a correct answer
diff --git a/src/site/content/en/handbook/content-types/example-course/index.md b/src/site/content/en/handbook/content-types/example-course/index.md
new file mode 100644
index 00000000000..9ce9da34f60
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-course/index.md
@@ -0,0 +1,33 @@
+---
+title: Example course
+authors:
+  - cariefisher
+description: This page is used for visual testing of the courses layout and also showcases its capabilities
+date: 2023-01-17
+---
+
+## Welcome to the example course
+
+The courses layout supports the full range of markdown elements/blocks as demonstrated in
+the [example post](/handbook/content-types/example-post).
+
+You can also add assessments as follows:
+
+{% Assessment 'example' %}
+
+## Adding courses
+
+Adding courses involves the following:
+
+- Add a new directory to `/src/site/content/en/learn`.
+- Add an index.md file. You can copy this one from `src/site/content/en/handbook/content-types/example-course/index.md` as a starting point.
+- Add a data file named using the following convention: `{dir_name}.11tydata.js`.
+- Use the `course11tydata` util to generate the required data. You can use the following file as a starting point `src/site/content/en/handbook/content-types/example-course/example-course.11tydata.js`.
+- Create a new directory under `src/site/_data/courses` using the name passed to the `course11tydata` util.
+- Add two files, `meta.yml` and `toc.yml`.
+- Add course sections as subdirectories.
+- Add the section urls to `toc.yml` and the sidebar will be generated automatically.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
diff --git a/src/site/content/en/handbook/content-types/example-explore-page/index.md b/src/site/content/en/handbook/content-types/example-explore-page/index.md
new file mode 100644
index 00000000000..e1c25f11f06
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-explore-page/index.md
@@ -0,0 +1,73 @@
+---
+layout: explore
+title: Sample explore page
+date: 2023-01-17
+override:learn:
+  performance:
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HEYcHDKWo6u5S9Cq4etF.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+  build_excellent:
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LvIq0sbMK73ycjb2yomw.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: >-
+            i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HEYcHDKWo6u5S9Cq4etF.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+  frameworks:
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HEYcHDKWo6u5S9Cq4etF.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+    - slug: handbook/content-types/example-explore-page/
+      cover: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg
+      title: i18n.paths.sample.title
+      description: i18n.paths.sample.description
+      topics:
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+        - title: i18n.paths.sample.topics.a
+---
diff --git a/src/site/content/en/handbook/content-types/example-item-page/index.md b/src/site/content/en/handbook/content-types/example-item-page/index.md
new file mode 100644
index 00000000000..13bbde5235b
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-item-page/index.md
@@ -0,0 +1,122 @@
+---
+layout: item-page
+path: authors
+showHero: true
+imageType: 'round'
+title: Authors
+renderData:
+  title: Sample item page
+  description: This page is used for visual testing of the item-page layout and also showcases its capabilities
+  rss: /authors/aaronleventhal/feed.xml
+paged:
+  homepage: /handbook/content-types/example-item-page/
+  twitter: aaronlev
+  github: abeyad
+  glitch: khempenius
+  elements:
+    - data:
+        title: >-
+          A post without a thumbnail
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail:
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          If a post has a thumbnail then it will use this layout
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          This is what a post looks like with two authors
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+          - christiancantrell
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          This is what a post looks like with multiple authors
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+          - christiancantrell
+          - malteubl
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          This is what a post looks like with a single tag
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+          - progressive-web-apps
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          This is what a post looks like with multiple tags
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+          - progressive-web-apps
+          - performance
+        date: 2022-11-10
+        updated: 2022-11-12
+    - data:
+        title: >-
+          This is what a post looks like without a subhead
+        subhead:
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+  pages: 1
+  data:
+    hero: image/admin/t8pdBQKAaLW8lDp4UqfO.jpg
+---
diff --git a/src/site/content/en/handbook/content-types/example-landing-page/index.njk b/src/site/content/en/handbook/content-types/example-landing-page/index.njk
new file mode 100644
index 00000000000..e76d50c70e1
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-landing-page/index.njk
@@ -0,0 +1,146 @@
+---
+layout: landing-page
+title: A sample landing page
+description: This page is used for visual testing of the landing-page layout and also showcases it's capabilities
+headlineAction:
+  url: /handbook/content-types/example-landing-page/
+  text: Test
+paged:
+  elements:
+    - data:
+        title: >-
+          A post without a thumbnail
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail:
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          If a post has a thumbnail then it will use this layout
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          This is what a post looks like with two authors
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+          - christiancantrell
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          This is what a post looks like with multiple authors
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+          - christiancantrell
+          - malteubl
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          This is what a post looks like with a single tag
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+          - progressive-web-apps
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          This is what a post looks like with multiple tags
+        subhead: >-
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          In et eros volutpat, commodo neque quis, egestas tortor
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+          - progressive-web-apps
+          - performance
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+    - data:
+        title: >-
+          This is what a post looks like without a subhead
+        subhead:
+        url: /handbook/content-types/example-landing-page/
+        thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
+        alt: Lorem Ipsum
+        authors:
+          - razvancaliman
+        tags:
+        date: 2022-11-10
+        updated: 2022-11-12
+        draft: false
+  pages: 1
+---
+
+<div class="gap-top-size-3">
+  <div class="cluster flex-justify-center">
+    <a href="/handbook/content-types/example-landing-page/" target="_blank">
+      <img src="/images/icons/language.svg" alt="Homepage" width="32" height="32">
+    </a>
+
+    <a href="/handbook/content-types/example-landing-page/" target="_blank">
+      <img src="/images/icons/twitter.svg" alt="Twitter" width="32" height="32">
+    </a>
+
+    <a href="/handbook/content-types/example-landing-page/" target="_blank">
+      <img src="/images/icons/github.svg" alt="GitHub" width="32" height="32">
+    </a>
+
+    <a href="/handbook/content-types/example-landing-page/" target="_blank">
+      <img src="/images/icons/glitch.svg" alt="Glitch" width="32" height="32">
+    </a>
+
+    <a href="/handbook/content-types/example-landing-page/" target="_blank">
+      <img src="/images/icons/rss.svg" alt="RSS Feed" width="32" height="32">
+    </a>
+  </div>
+</div>
+
+{% include 'partials/paged.njk' %}
diff --git a/src/site/content/en/handbook/content-types/example-pattern-set/index.11tydata.js b/src/site/content/en/handbook/content-types/example-pattern-set/index.11tydata.js
new file mode 100644
index 00000000000..b86a0f0d1e9
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern-set/index.11tydata.js
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {getRelativePath} = require('../../../../../_filters/urls');
+
+module.exports = {
+  eleventyComputed: {
+    'override:patterns': {
+      sets: (data) => {
+        const name = getRelativePath(data.page.url, '/patterns/');
+
+        const sets = {};
+
+        sets[name] = {
+          id: name,
+          title: data.title,
+          description: data.description,
+          hero: data.hero,
+          draft: Boolean(data.draft),
+          rawContent: data.contents,
+        };
+
+        return sets;
+      },
+      patterns: (data) => {
+        const set = getRelativePath(data.page.url, '/patterns/');
+
+        return {
+          sample1: {
+            id: 'sample1',
+            title: 'A sample pattern',
+            description: 'Lorem ipsum dolor sit amet',
+            set,
+          },
+          sample2: {
+            id: 'sample2',
+            title:
+              'A sample pattern with a longer title. Lorem ipsum dolor sit amet, ' +
+              'consectetur adipiscing elit sed do eiusmod tempor incididunt ut ' +
+              'labore et dolore magna aliqua',
+            description: 'Lorem ipsum dolor sit amet',
+            set,
+          },
+          sample3: {
+            id: 'sample3',
+            title: 'Another sample pattern',
+            description: 'Lorem ipsum dolor sit amet',
+            set,
+          },
+        };
+      },
+    },
+  },
+};
diff --git a/src/site/content/en/handbook/content-types/example-pattern-set/index.md b/src/site/content/en/handbook/content-types/example-pattern-set/index.md
new file mode 100644
index 00000000000..2bfe1eaaa3e
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern-set/index.md
@@ -0,0 +1,17 @@
+---
+layout: pattern-set
+title: Sample pattern-set template
+description: >-
+  A catchy subhead that is a bit wordy. This is used to demonstrate what happens when the description wraps to a new line.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yyuu9Wob0ix4z2jgBY1S.svg
+---
+
+Content added to the pattern-set template will render beneath the TOC and above
+the list of patterns.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam.
+
diff --git a/src/site/content/en/handbook/content-types/example-pattern/assets/body.html b/src/site/content/en/handbook/content-types/example-pattern/assets/body.html
new file mode 100644
index 00000000000..cd89ce43bbb
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/assets/body.html
@@ -0,0 +1,12 @@
+<!--Sample HTML-->
+
+<div>
+  <p>How to add HTML to your demo</p>
+
+  <ul>
+    <li>Add an assets directory to your pattern's directory</li>
+    <li>Add a HTML file and it'll be added to the page like this</li>
+  </ul>
+
+  <p>Use the same process to add JS and CSS. <em>Refer to src/site/content/en/handbook/content-types/example-pattern to see how this was built</em>.</p>
+</div>
diff --git a/src/site/content/en/handbook/content-types/example-pattern/assets/example.svg b/src/site/content/en/handbook/content-types/example-pattern/assets/example.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/assets/example.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/handbook/content-types/example-pattern/assets/script.js b/src/site/content/en/handbook/content-types/example-pattern/assets/script.js
new file mode 100644
index 00000000000..2a4647244c3
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/assets/script.js
@@ -0,0 +1,7 @@
+// Sample JS
+
+try {
+  console.log('Hello world');
+} catch (err) {
+  console.error(err.name, err.message);
+}
diff --git a/src/site/content/en/handbook/content-types/example-pattern/assets/style.css b/src/site/content/en/handbook/content-types/example-pattern/assets/style.css
new file mode 100644
index 00000000000..00b8b79fcb2
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/assets/style.css
@@ -0,0 +1,17 @@
+/* Sample css */
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
diff --git a/src/site/content/en/handbook/content-types/example-pattern/demo.njk b/src/site/content/en/handbook/content-types/example-pattern/demo.njk
new file mode 100644
index 00000000000..ef555018109
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/demo.njk
@@ -0,0 +1,56 @@
+---
+patternId: example-pattern
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sample demo</title>
+    <style>
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      code {
+        display: inline;
+        background: #f7f7f7;
+        padding: 4px;
+        border-radius: 8px;
+        line-break: anywhere
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sample demo</h1>
+
+    <img src="assets/example.svg" alt="Example" width="128" height="128">
+
+    <p>To create a demo like this, add a demo.njk file to the pattern's root directory</p>
+
+    <p>You can add JavaScript to the demo as demonstrated below.</p>
+
+    <div id="sample-container" style="margin-top:24px; padding:10px; border:1px solid #d8d8d8; text-align: center"></div>
+
+    <p>Refer to <code>src/site/content/en/handbook/content-types/example-pattern/demo.njk</code> to see how this was achieved.</p>
+
+    {% set script %}
+      const container = document.getElementById('sample-container');
+      container.innerHTML = 'I was added via js.';
+    {% endset %}
+
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/handbook/content-types/example-pattern/index.md b/src/site/content/en/handbook/content-types/example-pattern/index.md
new file mode 100644
index 00000000000..c4de288008a
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-pattern/index.md
@@ -0,0 +1,57 @@
+---
+layout: pattern
+title: Sample pattern
+subhead: >-
+  A catchy subhead that previews the content and is a bit wordy to test what
+  happens when a subhead wraps.
+description: Sample pattern
+date: 2022-10-10
+authors:
+  - thomassteiner
+height: 800
+static:
+  - assets/example.svg
+---
+
+The pattern layout supports the full range of markdown elements/blocks as demonstrated in
+the [example post](/handbook/content-types/example-post).
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at.
+
+{% Aside 'codelab' %}
+[Sample link](#)
+{% endAside %}
+
+## Image, Inline
+
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WHh2eQoyBxylhgPdYOis.png", alt="", width="200", height="306" %}
+  <figcaption>
+    Inline right, outlined image.
+  </figcaption>
+</figure>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam
+scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
+sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
+tempus enim.
+
+## Sample snippet
+
+```js
+const button = document.querySelector('button');
+
+button.addEventListener('click', async () => {
+  console.log('Testing 123');
+});
+```
+
+## Demo
diff --git a/src/site/content/en/handbook/content-types/example-post/index.md b/src/site/content/en/handbook/content-types/example-post/index.md
new file mode 100644
index 00000000000..e2c714a4aeb
--- /dev/null
+++ b/src/site/content/en/handbook/content-types/example-post/index.md
@@ -0,0 +1,676 @@
+---
+layout: post
+permalink: /handbook/content-types/example-post/index.html
+title: An example blog post used for screenshot testing.
+subhead: |
+  A catchy subhead that previews the content and is a bit wordy to test what
+  happens when a subhead wraps.
+description: |
+  A description of the article that will appear in search results.
+draft: true
+
+# A list of authors. Supports more than one.
+authors:
+  - robdodson
+
+date: 2019-10-31
+# Add an updated date to your post if you edit in the future.
+updated: 2020-11-01
+
+# !!! IMPORTANT: If your post does not contain a hero image it will not appear
+# on the homepage.
+hero: image/admin/t8pdBQKAaLW8lDp4UqfO.jpg
+# You can adjust the fit of your hero image with this property.
+# Values: contain | cover (default)
+# hero_fit: contain
+
+# You can adjust the position of your hero image with this property.
+# Values: top | bottom | center (default)
+# hero_position: bottom
+
+# You can provide an optional cropping of your hero image to be used as a
+# thumbnail. Note the alt text will be the same for both the thumbnail and
+# the hero.
+# thumbnail: thumbnail.jpg
+
+alt: A description of the hero image for screen reader users.
+
+# You can provide a custom thumbnail and description for social media cards.
+# Images should be 1200 x 630.
+# If no social thumbnail is provided then the post will attempt to fallback to
+# the post's thumbnail or hero from above. It will also reuse the alt.
+# social:
+#   google:
+#     title: A title for Google search card.
+#     description: A description for Google search card.
+#     thumbnail: google_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+#   facebook:
+#     title: A title for Facebook card.
+#     description: A description for Facebook card.
+#     thumbnail: facebook_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+#   twitter:
+#     title: A title for Twitter card.
+#     description: A description for Twitter card.
+#     thumbnail: twitter_thumbnail.jpg
+#     alt: Provide an alt for your thumbnail.
+
+tags:
+  - accessibility
+  - ux
+
+excludeFromTags: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam
+scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
+sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
+tempus enim.
+
+{% Aside 'codelab' %}
+  [Using Imagemin with Grunt](#)
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi
+quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam
+scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit
+sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in,
+tempus enim.
+
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Z77AxApfjYjrUlRWwWdW.jpg", alt="", width="400", height="263" %}
+  <figcaption>
+    Large image.
+  </figcaption>
+</figure>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Z77AxApfjYjrUlRWwWdW.jpg", alt="", width="400", height="263" %}
+  <figcaption>
+    Small image.
+  </figcaption>
+</figure>
+
+{% Aside %}
+  Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Proin dictum a
+  massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
+  varius at. `Cras ligula lacus`, porta vitae maximus a, ultrices a mauris.
+  [`Vestibulum porta`](#) dolor erat, vel molestie dolor posuere in. Nam vel
+  elementum augue.
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+## Image, Inline
+
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WHh2eQoyBxylhgPdYOis.png", alt="", width="200", height="306" %}
+  <figcaption>
+    Inline right, outlined image.
+  </figcaption>
+</figure>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
+a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
+varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
+Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum
+augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
+aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
+velit. Morbi at quam sem.
+
+<figure data-float="left">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WHh2eQoyBxylhgPdYOis.png", alt="", width="200", height="306" %}
+  <figcaption>
+    Inline left, outlined image.
+  </figcaption>
+</figure>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
+a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
+varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
+Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum
+augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce
+aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet
+velit. Morbi at quam sem.
+
+<figure data-screenshot>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/V9sy0IErc3V19nrodKb1.png", alt="", width="800", height="475" %}
+  <figcaption>
+    Filled screenshot.
+  </figcaption>
+</figure>
+
+{% Aside 'caution' %}
+  [This type of callout](#) suggests proceeding with caution.
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Image Format</th>
+        <th>Lossy Plugin(s)</th>
+        <th>Lossless Plugin(s)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="#">imagemin-mozjpeg</a></td>
+        <td><a href="#">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="#">imagemin-pngquant</a></td>
+        <td><a href="#">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="#">imagemin-giflossy</a></td>
+        <td><a href="#">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="#">Imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="#">imagemin-webp</a></td>
+        <td></td>
+      </tr>
+    </tbody>
+    <caption>Table 1 — Imagemin plugins for filetypes.</caption>
+  </table>
+</div>
+
+{% Aside 'warning' %}
+  This type of callout is stronger than a Caution; it means "Don't do this."
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+## Ordered list
+
+1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<ol>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  </li>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/V9sy0IErc3V19nrodKb1.png", alt="", width="800", height="475" %}
+    <figcaption>
+      Filled screenshot.
+    </figcaption>
+  </figure>
+  </li>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  </li>
+</ol>
+
+{% Aside 'success' %}
+  This type of callout describes a successful action or an error-free status.
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+## Unordered list
+
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<ul>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  </li>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/V9sy0IErc3V19nrodKb1.png", alt="", width="800", height="475" %}
+    <figcaption>
+      Filled screenshot.
+    </figcaption>
+  </figure>
+  </li>
+  <li>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+  sit amet ullamcorper.
+  </li>
+</ul>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+```js
+const imagemin = require("imagemin");
+const imageminMozjpeg = require("imagemin-mozjpeg");
+
+(async () => {
+  const files = await imagemin(
+    ["source_dir/*.jpg", "another_dir/*.jpg"],
+    "destination_dir",
+    { plugins: [imageminMozjpeg({ quality: 50 })] }
+  );
+  console.log(files);
+})();
+```
+
+{% Aside 'objective' %}
+  This type of callout defines the goal of a procedure.
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+```js/1
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      'destination_dir',
+      {plugins: [imageminMozjpeg({quality: 50})]}
+  );
+  console.log(files);
+})();
+```
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
+
+{% Aside 'gotchas' %}
+  The value of the `type` attribute should be the MIME type corresponding to the
+  image format. An image's MIME type and its file extension are often similar,
+  but they aren't necessarily the same thing (e.g. `.jpg` vs. `image/jpeg`).
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+```js//1
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      'destination_dir',
+      {plugins: [imageminMozjpeg({quality: 50})]}
+  );
+  console.log(files);
+})();
+```
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+```js/6/5
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg'],
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      'destination_dir',
+      {plugins: [imageminMozjpeg({quality: 50})]}
+  );
+  console.log(files);
+})();
+```
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<blockquote>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
+    a massa sit amet ullamcorper.
+  </p>
+  <cite>
+    by Jon Doe
+  </cite>
+</blockquote>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<pullquote>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
+    a massa sit amet ullamcorper.
+  </p>
+  <cite>
+    by Jon Doe
+  </cite>
+</pullquote>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+{% Blockquote 'Jon Doe' %}
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
+  a massa sit amet ullamcorper.
+{% endBlockquote %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+{% Blockquote 'Jon Doe', 'pullquote' %}
+[Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
+a massa sit amet ullamcorper.
+{% endBlockquote %}
+
+{% if site.percy %}
+<div style="background: aquamarine; width: 400px; height: 400px;">
+  Glitch iframe placeholder
+</div>
+{% else %}
+{% Glitch {
+  id: 'tabindex-zero',
+  path: 'index.html'
+} %}
+{% endif %}
+
+{% Aside 'key-term' %}
+  This type of callout defines important terminology.
+{% endAside %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+{% Codepen {
+  user: 'robdodson',
+  id: 'GRroyyX',
+  height: 300,
+  theme: 'dark',
+  tab: 'css,result',
+  allow: ['geolocation']
+} %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}
+    <figcaption>
+      Small image.
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}
+    <figcaption>
+      Small image.
+    </figcaption>
+  </figure>
+</div>
+
+{% Compare 'worse' %}
+```text
+Bad code example
+```
+
+{% CompareCaption %}
+Explanation of why `example` is bad.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+```text
+Good code example
+```
+
+{% CompareCaption %}
+Explanation of why `example` is good.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">30<sub>%</sub></p>
+    <p>Lower cost per conversion</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">13<sub>%</sub></p>
+    <p>Higher CTR</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">4<sub>x</sub></p>
+    <p>Faster load times</p>
+  </div>
+</div>
+
+<div class="all-center">
+  <p>
+    <a href="https://example.com/some.pdf" class="button">
+      {% include "icons/download.svg" %}
+      Download case study
+    </a>
+  </p>
+</div>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+## Widget
+
+{% Widget 'demos/url-parts', 340 %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+{% Details %}
+
+{% DetailsSummary %}
+Details _summary_
+{% endDetailsSummary %}
+
+This is an optional preview. Make your preview text match the first paragraph
+of your panel text.
+
+Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
+at.
+
+{% endDetails %}
+
+{% Details %}
+
+{% DetailsSummary %}
+Details _summary_
+{% endDetailsSummary %}
+
+Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
+at.
+
+{% endDetails %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
+sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
+at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
+porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam
+quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna
+ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at
+quam sem.
+
+### Test of Aside nested in an ordered list
+
+See the <a href="https://github.com/GoogleChrome/web.dev/issues/7640">underlying issue</a>.
+
+1. First item.
+   Another line.
+
+2. Second item.
+   {% Aside %}
+   This is an `<aside>`, including [Markdown](https://example.com/).
+   {% endAside %}
+
+3. Third item.
diff --git a/src/site/content/en/handbook/content-types/index.md b/src/site/content/en/handbook/content-types/index.md
index 1750449c12a..9f0b88686f6 100755
--- a/src/site/content/en/handbook/content-types/index.md
+++ b/src/site/content/en/handbook/content-types/index.md
@@ -6,6 +6,57 @@ description: |
   The content types available to use on web.dev.
 ---
 
+## Codelabs
+**Format:** Multi-step instructions paired with an embedded [sample app](/handbook/markup-sample-app)
+
+**Typical use case:** Showing how to do small, fairly distinct development tasks
+
+**Placement on the site:** Always associated with a post, which serves as the landing page for the codelab
+
+**Length:** Typically less than 1,000–1,500 words
+
+**[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-codelab)**
+
+**Examples:**
+* [Example codelab](/handbook/content-types/example-codelab)
+* [Creating WebP images with the command line](/codelab-serve-images-webp)
+* [Minify and compress network payloads with gzip](/reduce-network-payloads-using-text-compression)
+
+## Collection
+
+**Examples:**
+* [Example collection](/handbook/content-types/example-collection)
+
+## Course
+
+**Examples:**
+* [Example course](/handbook/content-types/example-course)
+
+## Explore
+
+**Examples:**
+* [Example explore](/handbook/content-types/example-explore-page)
+
+## Item page
+
+**Examples:**
+* [Example item page](/handbook/content-types/example-item-page)
+
+## Landing page
+
+**Examples:**
+* [Example landing page](/handbook/content-types/example-landing-page)
+
+## Pattern
+
+**Examples:**
+* [Example pattern](/handbook/content-types/example-pattern)
+
+## Pattern set
+
+**Examples:**
+* [Example pattern set](/handbook/content-types/example-pattern-set)
+
 ## Posts
 **Format:** Primarily informational with instructions included as appropriate
 
@@ -25,20 +76,6 @@ description: |
 **[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-post)**
 
 **Examples:**
+* [Example post](/handbook/content-types/example-post)
 * [Are long JavaScript tasks delaying your Time to Interactive?](/long-tasks-devtools)
 * [Code splitting with React.lazy and Suspense](/code-splitting-suspense)
-
-## Codelabs
-**Format:** Multi-step instructions paired with an embedded [sample app](/handbook/markup-sample-app)
-
-**Typical use case:** Showing how to do small, fairly distinct development tasks
-
-**Placement on the site:** Always associated with a post, which serves as the landing page for the codelab
-
-**Length:** Typically less than 1,000–1,500 words
-
-**[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-codelab)**
-
-**Examples:**
-* [Creating WebP images with the command line](/codelab-serve-images-webp)
-* [Minify and compress network payloads with gzip](/reduce-network-payloads-using-text-compression)
diff --git a/src/site/content/en/handbook/grammar/fullscreen.png b/src/site/content/en/handbook/grammar/fullscreen.png
deleted file mode 100644
index ffe6387142f..00000000000
Binary files a/src/site/content/en/handbook/grammar/fullscreen.png and /dev/null differ
diff --git a/src/site/content/en/handbook/grammar/index.md b/src/site/content/en/handbook/grammar/index.md
index de87614e50f..df84e1a4c5c 100644
--- a/src/site/content/en/handbook/grammar/index.md
+++ b/src/site/content/en/handbook/grammar/index.md
@@ -2,17 +2,18 @@
 layout: handbook
 title: Grammar, mechanics, and usage
 date: 2019-06-26
+updated: 2021-06-04
 description: |
   A list of grammar, mechanics, and usage rules for web.dev, followed by a list of style and usage references.
 ---
 
 <style>
-  img[src*="icon"] {
+  .icon {
     max-width: 32px;
     vertical-align: middle;
   }
 
-  img[src*="bordered"] {
+  .icon.bordered {
     border: 1px solid #949494;
     border-radius: 5px;
   }
@@ -25,7 +26,7 @@ Use second person (_you_) rather than first person (_we_) except in rare cases w
 
 Begin instructions with the objective rather than the action.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Drag a photo to the trash to remove it from an album.
 {% endCompare %}
@@ -37,7 +38,7 @@ To remove a photo from an album, drag it to the trash.
 
 Favor the imperative mood (giving commands) over declarative (making statements) in instructions.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 You will click **Run Audit**.
 {% endCompare %}
@@ -52,7 +53,7 @@ Avoid using _can_ in instructions unless you really mean to convey that the step
 ## Linking
 Don't include preceding articles (_a_, _an_, _the_) or surrounding punctuation in link text.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 See [the "Easily discoverable" collection](/discoverable) for more information.
 {% endCompare %}
@@ -101,7 +102,7 @@ Use numerals for decimals and numbers higher than nine.
 ## Pronouns
 Avoid ambiguous pronouns. Follow the advice on the GDDSC [Pronouns](https://developers.google.com/style/pronouns) page. Also avoid pronouns that refer to clauses or phrases, which can complicate translation into some languages.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Speed optimizations often regress quickly. Performance budgets are one way to address this.
 {% endCompare %}
@@ -115,7 +116,7 @@ Speed optimizations often regress quickly. Performance budgets are one way to ad
 ### Ampersands
 Don't use ampersands unless one is part of a company or brand name.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Safe & secure
 {% endCompare %}
@@ -128,7 +129,7 @@ Safe and secure
 ### Commas
 Use the serial comma before the last item in a list.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 React, Vue and Angular are popular frameworks.
 {% endCompare %}
@@ -148,10 +149,10 @@ Use an en dash (–) for ranges (e.g., _10–100 KB_).
 ### Quotation marks and apostrophes
 Use straight quotation marks and apostrophes, not smart (curly).
 
-<div class="w-columns">
+<div class="switcher">
 <!-- lint disable no-smart-quotes -->
 {% Compare 'worse' %}
-The “Accessible to all” collection
+The "Accessible to all" collection
 {% endCompare %}
 <!-- lint enable no-smart-quotes -->
 
@@ -162,7 +163,7 @@ The "Accessible to all" collection
 
 Periods and commas always go inside quotation marks. Question marks and exclamation points go inside quotation marks if they're part of the quotation; outside if not.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Jane said, "Reader, I married him".
 {% endCompare %}
@@ -177,7 +178,7 @@ Bold words for emphasis sparingly. (The primary use for bolding is [indicating U
 
 Avoid mixing code font and standard font in a single word.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 `integer`s
 {% endCompare %}
@@ -190,7 +191,7 @@ Avoid mixing code font and standard font in a single word.
 ## Titles and headings
 Use sentence case for titles and headings.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Optimize Your Images
 {% endCompare %}
@@ -202,7 +203,7 @@ Optimize your images
 
 Use imperative mood for titles and headings whenever possible.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 Optimizing your images
 {% endCompare %}
@@ -229,13 +230,13 @@ To find slow third-party scripts, check the **Reduce JavaScript execution time**
 
 When referring to a button with an icon but no label, use the name of the button as shown in the tooltip, and add the button icon immediately after. Don't style the icon unless the button would be difficult to recognize without its original styling.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
-Click ![Fullscreen icon](fullscreen.png#_icon).
+Click {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/exITm071mGTWssT5c3Qh.png", alt="Fullscreen icon", width="96", height="96", class="icon" %}.
 {% endCompare %}
 
 {% Compare 'better' %}
-Click **Fullscreen** ![Fullscreen icon](fullscreen.png#_icon_bordered).
+Click **Fullscreen** {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/exITm071mGTWssT5c3Qh.png", alt="Fullscreen icon", width="96", height="96", class="icon bordered" %}.
 {% endCompare %}
 </div>
 
@@ -245,7 +246,7 @@ To refer to a keyboard key:
 * To refer to a key combination, use the form _Modifier+Key_ (no spaces).
 * When the reader may be on either Windows or Mac, put the Mac shortcut in parentheses after the Windows shortcut.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 To copy, press Ctrl + C (⌘ + C).
 {% endCompare %}
@@ -257,12 +258,25 @@ To copy, press `Control+C` (or `Command+C` on Mac).
 
 Use _pane_ to refer to the content areas associated with tabs—unless you're referring to an area in DevTools; then use _panel_.
 
+Use `about://` instead of `chrome://` for built-in URLs in web.dev articles. This generalizes these URLs to all Chromium forks. Typing `about://` in such a browser will be rewritten to a browser-specific scheme. For example typing `about://` in Microsoft Edge will be rewritten to `edge://`.
+For more background on this rule, see the article [How to set browser flags in Chromium](https://developer.chrome.com/blog/browser-flags/).
+
+<div class="switcher">
+{% Compare 'worse' %}
+`chrome://`
+{% endCompare %}
+
+{% Compare 'better' %}
+`about://`
+{% endCompare %}
+</div>
+
 ## Units
 Use _KB_ for kilobytes, _kb_ for kilobits.
 
 Add a space before units.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 100KB
 {% endCompare %}
@@ -275,7 +289,7 @@ Add a space before units.
 ## Usage
 To maintain a conversational tone, use common contractions.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 This collection assumes that you are already familiar with Angular.
 {% endCompare %}
@@ -289,7 +303,7 @@ Use consistent vocabulary throughout a piece and the collection it lives in.
 
 Acronyms should be spelled out the first time they're used, with the acronym following immediately after in parentheses.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 WICG
 {% endCompare %}
diff --git a/src/site/content/en/handbook/inclusion-and-accessibility/index.md b/src/site/content/en/handbook/inclusion-and-accessibility/index.md
index c50be2dee06..c7c011778e4 100755
--- a/src/site/content/en/handbook/inclusion-and-accessibility/index.md
+++ b/src/site/content/en/handbook/inclusion-and-accessibility/index.md
@@ -1,21 +1,73 @@
 ---
 layout: handbook
 title: Inclusion and accessibility
-date: 2019-06-26
+date: 2022-02-01
 description: |
   Learn how to write for an international audience with varying needs and preferences.
 ---
 
-web.dev has a large international audience. We want members of that audience to access and understand web.dev content, and they should feel included in the ways we speak to our readers.
+web.dev has a diverse, international audience. We want all members of that
+audience to be able to access and understand web.dev content. This means our content should be both inclusive and accessible.
 
-## Use readable language
-Aim for a grade 8 reading level when possible. If you don't have a feel for what grade 8 texts look like, check out some [examples on Newsela](https://newsela.com/articles/#/rule/latest?grade_levels=8.0). You can also run your text through a readability test.
-* For pieces up to 1,600 words, use [TextEvaluator](http://textevaluator.ets.org/TextEvaluator/).
-* For pieces up to 1,000 words, use [Lexile](https://lexile.com/educators/tools-to-support-reading-at-school/tools-to-determine-a-books-complexity/the-lexile-analyzer/).
+This handbook covers some critical information for inclusion and accessibility.
+For more information, refer to the Google developer documentation style guide:
 
-It can be difficult to write technical content for a grade 8 reading level. The following guidelines help keep your language as accessible as it can be.
+*  [Writing inclusive documentation](https://developers.google.com/style/accessibility)
+*  [Writing for a global audience](https://developers.google.com/style/translation)
+*  [Writing accessible documentation](https://developers.google.com/style/accessibility)
 
-Write shorter, simpler sentences.
+## Use inclusive words
+
+Use preferred words from [our word
+list](https://developers.google.com/style/word-list). This list is extensive
+and provides both explanations and alternatives.
+
+### Avoid easy, simple, and fast
+
+Don't describe tasks as easy, simple, or fast. These are often subjective bias
+based on the writer's knowledge and resources. It's possible the reader will
+see a description of a task as "easy" and feel badly if they don't find it
+easy to complete.
+
+You can describe certain things as "less complex" when compared to other
+versions. But, for the most part, if you believe something is "simple," the
+example should speak for itself instead of needing extra validation.
+
+Refer to [James Fisher's blog on Don't use simply](https://jameshfisher.com/2017/02/22/dont-use-simply/)
+
+## Write readable language
+
+### Write in plain language
+
+Your content is written in plain language if your audience can:
+
+*  Find what they need
+*  Understand what they find the first time they read or hear it
+*  Use what they find to meet their needs
+
+It can be difficult to write technical content with this practice in mind.
+Still, it is essential we write inclusively. Use tools to assess the
+readability of your content.
+
+*  [Hemingway App](https://hemingwayapp.com/) will assess English content for
+   a reading grade level and suggest changes to phrases or voice.
+
+Refer to guidance from external sources to learn more about plain language:
+
+*  [Plain language in technical documentation](https://clickhelp.com/clickhelp-technical-writing-blog/basics-of-plain-language-in-technical-documentation/)
+   has tips and examples from ClickHelp.
+*  [Plainlanguage.gov](https://www.plainlanguage.gov/about/definitions/) offers
+   guidance to meet U.S. laws and requirements on communication.
+*  [Plainenglish.co.uk](http://www.plainenglish.co.uk/free-guides.html) offers
+   guidance from the British government.
+
+While we primarily write content in English, there may be times when content is
+written in other languages. "Plain language" rules can apply to all languages.
+
+### Write short and clear sentences
+
+Short sentences have one subject and action. If you've connected two ideas
+that would make sense split up, consider separating into two sentences.
 
 {% Compare 'worse', 'Don\'t' %}
 > We also include an HTML table of buttons for accessibility reasons that is on top of the canvases but is made invisible using opacity: 0.
@@ -23,16 +75,19 @@ Write shorter, simpler sentences.
 {% endCompare %}
 
 {% Compare 'better', 'Do' %}
-> We also include an HTML table of buttons to improve accessibility. The table sits on top of the canvases and is made invisible using opacity: 0.
+> Also, we include an HTML table of buttons to improve accessibility. The table sits on top of the canvases and is made invisible using opacity: 0.
 
 {% endCompare %}
 
-Use commonly used words that your [audience](/handbook/audience) is likely to be familiar with instead of specialized vocabulary. If you need help finding a more accessible alternative, the [Merriam-Webster Learner's Dictionary](http://learnersdictionary.com/) is a handy tool.
+### Favor known terms and avoid jargon
+
+Write commonly used words that your [audience](/handbook/audience) is likely
+to know, instead of specialized vocabulary or jargon. If you need help finding an alternative word, the [Merriam-Webster Learner's Dictionary](http://learnersdictionary.com/) is a handy tool.
 
 {% Compare 'worse', 'Don\'t' %}
 > In some scripts, graphemes can be visually joined when they're adjacent.
 
-_Script_ and _grapheme_ are very precise, but they're likely to be unfamiliar to most readers and may cause confusion since readers probably more commonly see _script_ referring to a piece of code.
+_Script_ and _grapheme_ are very precise, but they're likely to be unfamiliar to most readers. This may cause confusion, as many readers more commonly see _script_ in reference to code.
 {% endCompare %}
 
 {% Compare 'better', 'Do' %}
@@ -44,32 +99,104 @@ While _written language_ and _character_ are slightly less precise, they should
 If you must use a word that your audience is unlikely to know, provide a definition using the [Key-term Aside component](/handbook/web-dev-components#asides).
 
 ## Make information easy to find
-[Don't skip heading levels](/heading-levels). Don't add custom styles to headings—it makes the page hierarchy more difficult to follow.
 
-Spell out acronyms the first time they're used. For example: _Web Incubation Community Groups (WICG)_.
+Use semantic HTML. [Don't skip heading levels](/heading-levels). Don't add
+custom styles to headings. Readers will come to expect a certain
+style&mdash;custom styles make the page hierarchy more difficult to follow.
+
+Spell out acronyms the first time they're used.
+
+{% Compare 'better', 'Do' %}
+> Web Incubation Community Groups (WICG)
+{% endCompare %}
 
 Place exceptions, edge cases, and other kinds of supplemental information right next to the primary content they're related to.
 
 ## Use inclusive images
-Always provide [alt text](/image-alt).
 
-If you're creating an illustration, the parts that are essential for understanding the illustration should have a contrast ratio of at least 3:1. You can verify the contrast using checkers like the ones from [WeAIM](https://webaim.org/resources/contrastchecker/) or the [Paciello Group](https://developer.paciellogroup.com/resources/contrastanalyser/).
+Images are visual mediums of communicating with our users. As such, it's
+critical we share images in an inclusive and accessible manner.
+
+### Use appropriate contrast
+
+If you create an illustration or diagram, the content which is essential for
+the user's understanding should have a contrast ratio of at least 3:1. You can
+verify the image contrast using checkers:
+
+*  [WebAIM](https://webaim.org/resources/contrastchecker/)
+*  [Paciello Group](https://developer.paciellogroup.com/resources/contrastanalyser/)
 
-Avoid images that may exclude certain audience members. Just like when you _write_ about people, remember to be inclusive when you _show_ people and the things they do and make. For example, avoid stock photos that show only male developers.
+### Text associated with image
+
+You may find it useful to include [alt text](#alt-text) or figure captions.
+Independent of these elements, an introductory sentence should precede most
+images. The sentence can end with a colon or a period; usually a colon if it
+immediately precedes the image, usually a period if there's more material
+(such as a note paragraph) between the introduction and the image.
+
+You don't need to introduce screenshots that immediately follow procedural
+text that describes a UI.
+
+### Alt text
+
+Alt text can be defined as a concise description of the image that can replace the image when the image isn't visible. Visibility can be related to use of assistive technologies (such as screen readers), preferences (such as use of text-only browsers), or circumstance (such as people with a low-bandwidth internet connection).
+
+Alt text should consider the context of the image, not just its content. For
+more information, see alt attribute.
+
+When appropriate, provide [alt text](/image-alt).
+
+Consider the following when writing alt text:
+
+*  Don't include phrases like "Image of" or "Photo of" or "Screenshot of".
+*  Include punctuation. When screen readers encounter punctuation, they pause
+   before continuing.
+*  Write short, descriptive alt text in 155 characters or less. Some screen
+   readers cut off reading alt text when longer than 155 characters.
+
+Review more [alt text best
+practices](https://developers.google.com/style/images#alt-text).
+
+### Avoid words in images
+
+Images with written words are not inclusive of those who don't speak the
+language and those with visual impairments. When possible, define what's represented in a `<figcaption>` beneath the image, instead of relying on the image to self-explain with included text.
+
+### Images of people
+
+Avoid images that may exclude certain audience members. Just like when you
+_write_ about people, remember to be inclusive when you _show_ people and the
+things they do and make. For example, avoid stock photos that show only male
+developers. As an alternative, check out [WOCINTECH Stock
+Photos](https://www.wocintechchat.com/blog/wocintechphotos).
 
 ## Create accessible code blocks
-Make sure code blocks are [simple](/handbook/quality/#keep-it-simple) and follow accessibility best practices. At a minimum:
-* Add [labels](/labels-and-text-alternatives/#label-form-elements) to form elements.
-* Include [alt text](/image-alt) for every image.
 
-In the rare case that you need to omit an accessibility detail to better convey what you're teaching,
+Make sure code blocks are [concise](/handbook/quality/#keep-it-simple) and
+follow accessibility best practices. At a minimum:
+
+*  Add [labels](/labels-and-text-alternatives/#label-form-elements) to form
+   elements.
+*  Don't use tabs to indent code; use spaces only.
+*  Wrap lines at 80 characters.
+*  Mark code blocks with the appropriate formatting (CSS, JSON, and more) to
+   style it appropriately.
+
+In the rare case that you need to omit an accessibility detail to better convey what you're teaching:
+
 1. Add a note explaining that the developer needs to include accessibility features.
 1. Link to the relevant post in the web.dev "[Accessible to all](/accessible)" collection.
 
 ## Writing about people
-There are several excellent online guides for using inclusive language when writing about groups of people. The [Content Guide](https://content-guide.18f.gov/inclusive-language/) from 18F (a U.S. government office that helps other agencies improve their user experience) is a great place to start.
 
-To be more gender inclusive, use _they/them_ for singular personal pronouns instead of _he/him_ and _she/her_. However, it's ideal to make it plural.
+There are several excellent online guides for using inclusive language when
+writing about groups of people. The [Content
+Guide](https://content-guide.18f.gov/inclusive-language/) from 18F (a U.S.
+government office that helps other agencies improve their user experience) is
+a great place to start.
+
+Most often, you'll write in second-person and use _you_. When you write in
+third-person, be gender inclusive: use _they/them_ for singular personal pronouns instead of _he/him_ and _she/her_.
 
 {% Compare 'better', 'Good' %}
 > If the reader is interested in diving deeper after reading web.dev, they can turn to other sources.
@@ -82,7 +209,10 @@ To be more gender inclusive, use _they/them_ for singular personal pronouns inst
 {% endCompare %}
 
 ## Writing for an international audience
-Avoid idioms. If non-native speakers aren't familiar with the idiom, they may be confused. Also, idioms are often lost in translation.
+
+Avoid idioms and colloquialisms. If speakers whose first language isn't
+English aren't familiar with the idiom, they may be confused. Further, idioms
+are often lost in translation.
 
 {% Compare 'worse', 'Don\'t' %}
 > The sample app should work now. Give it a shot!
@@ -94,4 +224,25 @@ Avoid idioms. If non-native speakers aren't familiar with the idiom, they may be
 
 {% endCompare %}
 
-Don't rely on cultural references alone to convey essential information. It's likely that at least some of your audience won't know the same movies, TV, books, and games that you do. While a reference here and there can [add personality](/handbook/voice) to your writing, make sure readers can understand your ideas even if they don't catch the reference.
+### Cultural references
+
+Don't rely on cultural references alone to convey essential information. It's
+likely that at least some of your audience won't know the same movies, TV,
+books, and games that you do. While a reference here and there can [add
+personality](/handbook/voice) to your writing, make sure readers can
+understand your ideas even if they don't understand the reference.
+
+### Location bias
+
+Avoid locality bias. For example, "coming this fall" is a way to describe a
+point in time that only works on one of the world's hemispheres. Instead,
+refer to a specific point in time, for example: "coming in June of 2022" or
+"coming in Q2 of 2022".
+
+### Availability versus viability
+
+Be aware of differences in availability and viability. Something
+described as "cheap", "affordable" or "ubiquitous" is inherently subjective.
+Something that is cheap in one country can be a luxury good for the
+top-earners in another. Something that is available at any store in one
+part of the world can be a scarce resource in another part.
diff --git a/src/site/content/en/handbook/index.md b/src/site/content/en/handbook/index.md
new file mode 100644
index 00000000000..6016eb908ae
--- /dev/null
+++ b/src/site/content/en/handbook/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+noindex: true
+title: Handbook
+pathName: handbook
+---
\ No newline at end of file
diff --git a/src/site/content/en/handbook/index.njk b/src/site/content/en/handbook/index.njk
deleted file mode 100644
index 661c956de1c..00000000000
--- a/src/site/content/en/handbook/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-noindex: true
-title: Handbook
-pathName: handbook
----
\ No newline at end of file
diff --git a/src/site/content/en/handbook/markup-cards-collection/index.md b/src/site/content/en/handbook/markup-cards-collection/index.md
new file mode 100644
index 00000000000..6de6dfc5ab8
--- /dev/null
+++ b/src/site/content/en/handbook/markup-cards-collection/index.md
@@ -0,0 +1,158 @@
+---
+layout: handbook
+title: Homepage and collection cards
+date: 2023-01-06
+description: |
+  How to add cards to the homepage and collection page.
+---
+
+The homepage themes section, and at the bottom of an collection page (linked from [/explore](/explore)) can take a grid layout of cards to highlight the latest, or particularly relevant, content.
+
+The content and layout of cards are flexible, you can change the content, and adjust the design and position of a card by using YAML properties.
+
+The collection of cards offers a grid-based layout system, with rows and columns. Adjust the position card by specifying the card layout, vertical and horizontal, to avoid unwanted gaps. 
+
+See [the sample collection of cards](/handbook/content-types/example-collection/) post for an example of adding the cards to a collection page. Cards are already in place on the homepage, you can change the cards in your section, and add new rows of cards.
+
+YAML properties available for displaying a layout of cards:
+
+- `title` - the title of the card.
+- `description` - the description of the card.
+- `thumbnail` - the thumbnail of the card.
+- `latestPostByTags` - display the latest post from specific tags.
+- `url` - target URL of the card.
+- `eyebrow` - useful for introducing the type of card. This eyebrow shows above the title.
+  - `icon` - the SVG icon name, for example. `icon: featured`.
+  - `text` - a text next to the icon, e.g. `text: Featured`.
+- `cardLayout` - vertical and horizontal are available for specify the layout of card. No value specific for default card layout.
+- `theme` - applying background color to the card, e.g. `theme: quaternary`.
+  Theme colours available - tertiary, quaternary, pink, dark, and blue.
+- `column` - determine the column of displaying this card.
+- `row` - determine the row of displaying this card.
+
+### Icons
+
+<table>
+  <tr>
+    <th>Icon name</th>
+    <th>Use for</th>
+  </tr>
+  <tr>
+    <td>mortarboard</td>
+    <td>Learn courses or individual modules.</td>
+  </tr>
+  <tr>
+    <td>blog</td>
+    <td>Blog posts.</td>
+  </tr>
+  <tr>
+    <td>podcast</td>
+    <td>Podcasts or episodes.</td>
+  </tr>
+  <tr>
+    <td>pattern</td>
+    <td>Pattern collections or individual patterns.</td>
+  </tr>
+  <tr>
+    <td>news</td>
+    <td>News items, newly interoperable posts.</td>
+  </tr>
+  <tr>
+    <td>featured</td>
+    <td>A star, anything you want to highlight.</td>
+  </tr>
+</table>
+
+## Card Types 
+
+### A default card
+
+This type of card requires a `title` and `description` YAML properties to display the content of the card. The `url` property is needed to link to another page.
+
+
+{% raw %}
+```yaml
+---
+cards:
+  - title: 'Meet the Chrome team'
+    description: 'We are meeting you where you are. Join us at upcoming web conferences in your region or catch up on past events.'
+    eyebrow:
+      icon: 'event'
+      text: 'Event'
+    url: /meet-the-team
+---
+```
+{% endraw %}
+
+### Linking to a post on web.dev
+
+When linking to a post on web.dev, the title, description, and image can be pulled from the post specified by the `url`:
+
+{% raw %}
+```yaml
+---
+cards:
+  - url: /my-post/
+    eyebrow:
+      icon: 'blog'
+      text: 'Blog'
+---
+```
+{% endraw %}
+
+### Displaying latest post from specific tags
+
+For displaying the recent post from specific tags, set the value of the frontmatter key `isLatestPost` to `true` and set the list of `tags` to display a latest post from specific tags. The title, description, and image can be automatically pulled from the post. 
+
+{% raw %}
+```yaml
+---
+cards:
+  - latestPostByTags:
+      - css
+      - dom
+      - ux
+    cardLayout: 'vertical'
+---
+```
+{% endraw %}
+
+### Adding a vertical card
+
+This type of card will consume two rows of the grid system. You can set the row and column of the grid using the YAML properties `row` and `column`. The following card will display in the third column of the grid, cover two rows (with the image in the first row and content the second), and is pulling information from the blog post found at `https://web.dev/terra-dark-mode`.
+
+{% raw %}
+```yaml
+---
+cards:
+  - url: /terra-dark-mode/
+    eyebrow:
+      icon: 'blog'
+      text: 'Blog'
+    cardLayout: 'vertical'
+    column: '3'
+---
+```
+{% endraw %}
+
+### Adding a horizontal card
+
+The horizontal card covers two columns, with the image in one column and content in the second. The following example shows a card that will display in colun2 and 3, and row 2, pulling information from the blog post found at `https://web.dev/terra-dark-mode`, and with an image specified which will override the default image for that post.
+
+{% raw %}
+```yaml
+---
+cards:
+  - url: /terra-dark-mode/
+    thumbnail: 'image/SZHNhsfjU9RbCestTGZU6N7JEWs1/VwL892KEz6bakZMlq10D.png'
+    eyebrow:
+      icon: 'featured'
+      text: 'Featured'
+    cardLayout: 'horizontal'
+    column: '2'
+    row: '2'
+---
+```
+{% endraw %}
+
+See the web.dev homepage for many more examples of cards.
diff --git a/src/site/content/en/handbook/markup-code/index.md b/src/site/content/en/handbook/markup-code/index.md
index 41054be3b13..4189eceb72e 100644
--- a/src/site/content/en/handbook/markup-code/index.md
+++ b/src/site/content/en/handbook/markup-code/index.md
@@ -50,13 +50,7 @@ Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
 ```
 ````
 
-For terminal commands, set the language to `bash` and omit leading `$` signs:
-
-````markdown
-```bash
-npm install left-pad
-```
-````
+For terminal commands, set the language to `bash` and omit leading `$` signs.
 
 ## Code highlighting
 Highlight lines in a code block by adding a slash and the zero-indexed line numbers after the language name. For example, here's what `html/4-5` looks like:
@@ -105,9 +99,11 @@ Indent using two spaces.
 
 Always use straight quotes. (Readers often copy code directly from the site, and smart quotes can break code.)
 
+<!--lint disable no-smart-quotes-->
 {% Compare 'worse' %}
 `const imagemin = require(‘imagemin’);`
 {% endCompare %}
+<!--lint enable no-smart-quotes-->
 
 {% Compare 'better' %}
 `const imagemin = require('imagemin');`
diff --git a/src/site/content/en/handbook/markup-media/a.jpg b/src/site/content/en/handbook/markup-media/a.jpg
deleted file mode 100644
index 6414c7029e6..00000000000
Binary files a/src/site/content/en/handbook/markup-media/a.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/markup-media/image-inline.png b/src/site/content/en/handbook/markup-media/image-inline.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/handbook/markup-media/image-inline.png and /dev/null differ
diff --git a/src/site/content/en/handbook/markup-media/image-screenshot.png b/src/site/content/en/handbook/markup-media/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/markup-media/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/handbook/markup-media/image-small.png b/src/site/content/en/handbook/markup-media/image-small.png
deleted file mode 100644
index 69bedd75087..00000000000
Binary files a/src/site/content/en/handbook/markup-media/image-small.png and /dev/null differ
diff --git a/src/site/content/en/handbook/markup-media/img2.png b/src/site/content/en/handbook/markup-media/img2.png
deleted file mode 100644
index 36beb235c56..00000000000
Binary files a/src/site/content/en/handbook/markup-media/img2.png and /dev/null differ
diff --git a/src/site/content/en/handbook/markup-media/index.md b/src/site/content/en/handbook/markup-media/index.md
index 64ba4ffd4de..acaa925750a 100644
--- a/src/site/content/en/handbook/markup-media/index.md
+++ b/src/site/content/en/handbook/markup-media/index.md
@@ -2,301 +2,174 @@
 layout: handbook
 title: Images and video
 date: 2019-06-26
-updated: 2020-06-11
+updated: 2022-02-01
 description: |
   Learn how to create the Markdown for images and video for web.dev.
 ---
 
-This post is about how to format and store images on web.dev. For guidance about how to select or create images to support your writing goals, see the [Use images and video effectively](/handbook/use-media) post.
+## Images and video
 
-## General guidelines for all images {: #general }
+### Dimensions
 
-* Images that appear in a post should live in the same directory as the post's `index.md` file.
-* Make sure images are [accessible](/handbook/inclusion-and-accessibility#use-inclusive-images).
+- Hero images should be 3200px wide by 960px tall.
+- Thumbnail images should be 376px wide by 240px tall.
+- Content images should be no wider than 1600px.
+- Author images should be a 384px square.
 
-## Image format guidelines (JPG, PNG, or SVG) {: #format }
+When using the images CDN, treat those dimensions as the minimums and overall
+aspect ratio for the source image you upload. The CDN will take care of
+downsizing source images that are larger than the recommended dimensions.
 
-* JPG is usually better than PNG for photos and screenshots because it can be optimized more.
-  PNG is good for preserving fine detail but in practice most web.dev images don't need to be
-  preserved in fine detail.
-* SVG is best for graphics because its file size is usually quite small and it can be infinitely
-  scaled.
+### Using the images CDN
 
-Source: [Selecting the right image format][format]
+All images on web.dev are required to use our image CDN so we can optimize
+them for users on different devices.
 
-## Image sizing guidelines {: #sizing }
+Visit [the image uploader page](https://web-dev-uploads.web.app/) and
+sign-in using your Google corporate account. Note that this page only allows
+Googlers access, so signing in with a personal account will fail.
 
-* [Hero images](#hero) should be `3200px` wide and `960px` tall.
-* [Thumbnail images](#thumbnail) should be `376px` wide and `240px` tall.
-* [Body images](#body) should be `800px` at a minimum and `1600px` wide at a maximum.
+If you're not a Googler, reach out to your Google contact to see about getting
+access to the CDN.
 
-## Image optimization guidelines {: #optimization }
+### Choose a file
 
-* Hero images should only be **lightly** optimized with [Squoosh][squoosh].
-  Try to reduce the size of the image with no noticeable reduction in quality whatsoever.
-  The goal here is to reduce bloat in the web.dev git repository. The web.dev image CDN
-  optimizes hero images on the fly, so if you over-optimize with Squoosh, the hero image
-  will end up grainy.
-* Body images should be strongly optimized with [Squoosh][squoosh] or [TinyPNG][tinypng]
-  (which also supports JPG). Body images are not optimized through web.dev's image CDN
-  so the main goal here is to keep web.dev pages loading fast.
+Upload a high quality image (jpg or png if you need alpha transparency). Our
+image CDN will handle converting the image to webp if the browser supports it
+and it will resize the image so you don't have to.
 
-## Hero images {: #hero }
+- Drag one or more files to the **Drop files here!** area
+- Click **Upload**
 
-Add the following code to your post's front matter:
+A preview of the image or video with a shortcode snippet will appear. It should
+look something like this:
 
-```yaml
----
-…
-hero: hero.png
-alt: A description of the hero. # Also used by the thumbnail (when applicable).
-…
----
-```
-
-{% Aside 'warning' %}
-If your post does not contain a hero image it will not be displayed on the homepage.
-{% endAside %}
-
-* Hero images should be `3200px` wide and `960px` tall.
-* You can adjust hero image positioning using the 
-  [`hero_position`](/handbook/markup-post-codelab/#set-up-the-yaml) front matter field.
-* See [Image optimization guidelines](#optimization) for information on how to optimize
-  hero images.
-
-## Thumbnail images {: #thumbnail }
-
-Add the following code to your post's front matter:
-
-```yaml
----
-…
-thumbnail: thumbnail.png
-alt: A description of the thumbnail. # Also used by the hero.
-…
----
+```md
+{% raw %}{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}{% endraw %}
 ```
 
-* When a post is displayed on the home page or the blog it can contain a thumbnail.
-* Thumbnails should be `376px` wide and `240px` tall.
-* If you don't provide a thumbnail, the post will attempt to reuse the hero image.
-* If there is no hero image, the post will omit the thumbnail entirely.
+- Click the copy button to copy the snippet to your clipboard 📋
 
-## Body images {: #body }
+### Paste!
 
-* Images intended to fill the full width of the content column should be `800px` wide at a minimum,
-  and `1600px` wide at a maximum (to account for screens that use 2x resolution).
+Paste the copied code from the previous step into your article.
 
-### Standalone images
+Be sure to replace the text that says "ALT_TEXT_HERE" with your own description
+of the image. You can read more about writing effective alt text over on [the
+web.dev handbook](/handbook/inclusion-and-accessibility/#use-inclusive-images).
 
-Use Markdown syntax:
+{% Aside %}
+You may notice that the generated code is using either the
+{% raw %}`{% Img %}`{% endraw%} or {% raw %}`{% Video %}`{% endraw%} shortcodes.
+These are custom components for `web.dev` that ensure our media is
+responsive 📱
+{% endAside %}
 
-```markdown
-![alt text](./image-name.png)
-```
+#### Properties
 
-### Images with captions
+The `{% raw %}`{% Img %}`{% endraw%}` and `{% raw %}`{% Video %}`{% endraw%}`
+shortcodes accepts many named arguments. Below are interfaces for both
+shortcodes. Each property of the interface is a named argument that can be used
+in the shortode.
 
-Use a `<figure>` tag. Make sure the `w-figure` class is applied to the `<figure>` element
-and the `w-figcaption` class is applied to the `<figcaption>` element.
+##### Img Properties (`ImgArgs`)
 
-```html
-<figure class="w-figure">
-  <img src="./a.jpg" alt="An office with two people working at a table.">
-  <figcaption class="w-figcaption">A standard image.</figcaption>
-</figure>
+```typescript
+{% include '../../../../../../node_modules/webdev-infra/types/shortcodes/Img.d.ts' %}
 ```
 
-<figure class="w-figure">
-  <img src="./a.jpg" alt="An office with two people working at a table.">
-  <figcaption class="w-figcaption">A standard image.</figcaption>
-</figure>
-
-#### Differences between `alt` and `figcaption` {: #alt-vs-figcaption }
-
-`alt` and `figcaption` should have different text because they're both announced by assistive
-technology. If the text is duplicated, the assistive technology will announce the same text twice.
-To use the analogy of a painting, the `alt` text would describe the painting, and the `figcaption`
-text would be the little piece of paper next to the painting that mentions things like the painting's
-title, the painter's name, and perhaps a description of what the painter was trying to achieve.
-
-See [Alternative Text](https://webaim.org/techniques/alttext/) for more information.
-
-### Images that extend slightly beyond the content column {: #fullbleed }
-
-To make an image extend slightly beyond the width of the content column (for emphasis), add the `w-figure--fullbleed` class to the `figure` element and the `w-figcaption--fullbleed` class to the `figcaption` element:
-
-```html
-<figure class="w-figure w-figure--fullbleed">
-  <img src="./a.jpg" alt="An office with two people working at a table.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    A full-bleed image.
-  </figcaption>
-</figure>
+The `{% raw %}`{% Img %}`{% endraw%}` `params` object exposes the entire [Imgix
+API](https://docs.imgix.com/apis/rendering) to you. For example, if you wanted
+to use the [flip API](https://docs.imgix.com/apis/rendering/rotation/flip) to flip
+an image on its horitonzal axis you would do:
+
+```md
+{% raw %}{% Img
+  src="image/foR0vJZKULb5AGJExlazy1xYDgI2/iuwBXAyKJMz4b7oRyIdI.jpg",
+  alt="ALT_TEXT_HERE",
+  width="380",
+  height="240",
+  params={flip: 'h'}
+%}{% endraw%}
 ```
 
-<figure class="w-figure w-figure--fullbleed">
-  <img src="./a.jpg" alt="An office with two people working at a table.">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    A full-bleed image.
-  </figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
+  <figcaption>Original</figcaption>
 </figure>
 
-### Specifying a size for an image
-
-To keep an image from growing beyond a specified size, add the `w-figure` class to the `figure` element and add a `width` attribute to the `img` element. For example, `width="400"`. All images will have a `max-width` of `100%` on mobile:
-
-```html
-<figure class="w-figure">
-  <img src="./image-small.png" 
-       alt="A screenshot of a section of the Chrome DevTools user interface." 
-       width="400">
-  <figcaption class="w-figcaption">
-    A small, centered image.
-    </figcaption>
-</figure>
-```
-
-<figure class="w-figure">
-  <img src="./image-small.png" alt="A screenshot of a section of the Chrome DevTools user interface." width="400">
-  <figcaption class="w-figcaption">
-    A small, centered image.
-    </figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240", params={flip: 'h'} %}
+  <figcaption>Flipped</figcaption>
 </figure>
 
-### Inline images 
+{% Aside %}
+Please call out in a review if you're calling a specific Imgix API, so we can be
+aware of custom use-cases and potentially support them through our own shortcode
+directly.
+{% endAside %}
 
-To place an image inline with text, add the `w-figure--inline-left` or `w-figure--inline-right` class to the `figure` element, depending on what alignment you want:
+##### Video Properties (`VideoArgs`)
 
-```html
-<figure class="w-figure w-figure--inline-left">
-  <img class="w-screenshot" src="./image-inline.png"
-       alt="A diagram of the interactions between a client, a service worker, and the server."
-       width="200">
-  <figcaption class="w-figcaption">
-    A left-aligned inline image.
-  </figcaption>
-</figure>
+```typescript
+{% include '../../../../../../node_modules/webdev-infra/types/shortcodes/Video.d.ts' %}
 ```
+### Captions
 
-<figure class="w-figure w-figure--inline-left">
-  <img class="w-screenshot" src="./image-inline.png" alt="A diagram of the interactions between a client, a service worker, and the server." width="200">
-  <figcaption class="w-figcaption">
-    A left-aligned inline image.
-  </figcaption>
-</figure>
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at quam sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at quam sem.
-</p>
-
-### Screenshots
-
-#### Partial screenshots
-
-To include a part of a screenshot, add the `w-screenshot` class to the `img` element:
+To include a caption along with an image, use `<figure>` with `<figcaption>` and
+place the shortcode snippet inside:
 
-```html
-<figure class="w-figure">
-  <img class="w-screenshot" src="./img2.png" 
-       alt="A screenshot of optimization opportunities presented in Lighthouse.">
-  <figcaption class="w-figcaption">
-    A partial screenshot.
-  </figcaption>
+```md
+{% raw %}
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
+  <figcaption>A good boy.</figcaption>
 </figure>
+{% endraw%}
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./img2.png" alt="A screenshot of optimization opportunities presented in Lighthouse.">
-  <figcaption class="w-figcaption">
-    A partial screenshot.
-  </figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
+  <figcaption>A good boy.</figcaption>
 </figure>
 
-#### Entire screenshots
+If you would like an image to stretch to the full width of the content, you can apply the `data-size="full"` attribute to the `<figure>` element.
 
-To include an entire screenshot, also add the `w-screenshot-filled` class to the `img` element
-(in addition to the `w-screenshot` class):
-
-```html
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="./image-screenshot.png" 
-       alt="A screenshot of the console log for the Chrome DevTools webpage.">
-  <figcaption class="w-figcaption">
-    A full screenshot.
-  </figcaption>
+```md
+{% raw %}
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
+  <figcaption>A good boy.</figcaption>
 </figure>
+{% endraw%}
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./image-screenshot.png" alt="A screenshot of the console log for the Chrome DevTools webpage.">
-  <figcaption class="w-figcaption">
-    A full screenshot.
-  </figcaption>
+<figure data-size="full">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
+  <figcaption>A good boy.</figcaption>
 </figure>
 
-## How to take screenshots
-
-To take a screenshot on Windows:
-1. Check out Microsoft's [Use Snipping Tool to capture screenshots](https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots) page.
-1. In the Snipping Tool, use the pen to add a red box around any highlighted areas.
-1. Click **Save Snip** and choose the desired options.
-
-To take a screenshot on Mac:
-1. Check out Apple's [How to take a screenshot on your Mac](https://support.apple.com/en-us/HT201361) page.
-1. In Mac Preview, indicate any highlighted areas by adding a red box with borders set to the medium thickness.
-1. Close Mac Preview. The screenshot image will appear on your desktop.
+### YouTube
 
-## Video
+Use the {% raw %}`{% YouTube %}`{% endraw %} shortcode to embed a YouTube video.
 
-### Video hosted on YouTube {: #youtube }
+```md
+{% raw %}{% YouTube "qPD2yc8BoDk" %}
 
-To embed a YouTube video, use the `YouTube` component.
-
-```text
-{% raw %}{% YouTube 'your-video-id', 'optional-start-time' %}{% endraw %}
+<!-- You can pass an optional start time as well -->
+{% YouTube id="qPD2yc8BoDk", startTime="1678" %}{% endraw %}
 ```
 
-{% YouTube 'QDljY2I1Pfw' %}
+{% YouTube "qPD2yc8BoDk" %}
 
-{% Aside %}
-The `optional-start-time` argument should be a single number, e.g. '473'.
-You can get this number by clicking the **Share** button on YouTube and
-checking the **Start at** box.
-{% endAside %}
+Use the {% raw %}`{% YouTubePlaylist %}`{% endraw %} shortcode to embed a YouTube
+playlist iframe.
 
-### Video hosted on web.dev
+```md
+{% raw %}{% YouTubePlaylist 'PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv' %}
 
-Always use video, not animated GIFs. (Check out the [Replace animated GIFs with video for faster page loads](/replace-gifs-with-videos/) post to learn how to use [FFmpeg](https://www.ffmpeg.org/) to convert GIFs to video.)
-
-Once you have a video ready, message your content reviewer, and they'll help you upload it to the web.dev Google Cloud Storage bucket.
-
-Embed the video in your post or codelab by following this example:
-```html
-  <figure class="w-figure">
-    <video controls autoplay loop muted class="w-screenshot">
-      <source src="https://storage.googleapis.com/web-dev-assets/portals_vp9.webm" type="video/webm">
-      <source src="https://storage.googleapis.com/web-dev-assets/portals_h264.mp4" type="video/mp4">
-    </video>
-   <figcaption class="w-figcaption">
-      Seamless embeds and navigation with Portals. Created by <a href="https://twitter.com/argyleink">Adam Argyle</a>.
-    </figcaption>
-  </figure>
+<!-- You can pass allow, src, style and title as options in a second param -->
+{% YouTubePlaylist 'PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv', {title: "My title"} %}{% endraw %}
 ```
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/portals_vp9.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/portals_h264.mp4" type="video/mp4">
-  </video>
- <figcaption class="w-figcaption">
-    Seamless embeds and navigation with Portals. Created by <a href="https://twitter.com/argyleink">Adam Argyle</a>.
-  </figcaption>
-</figure>
-
-### Full-bleed video
-
-If you want any video to be full-bleed, put it in a `figure` element with the `w-figure--fullbleed` class. (Make sure to add the `w-figcaption--fullbleed` class to the `figcaption` element if you have one.)
 
-[squoosh]: https://squoosh.app/
-[tinypng]: https://tinypng.com/
-[format]: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#selecting_the_right_image_format
+{% YouTubePlaylist 'PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv', {title: "My title"} %}
diff --git a/src/site/content/en/handbook/markup-sample-app/index.md b/src/site/content/en/handbook/markup-sample-app/index.md
index 4307fd00c50..d0f135137d4 100644
--- a/src/site/content/en/handbook/markup-sample-app/index.md
+++ b/src/site/content/en/handbook/markup-sample-app/index.md
@@ -11,6 +11,7 @@ This post is about how to get sample apps to work right in your post and follow
 web.dev uses [Glitch](https://glitch.com/) to embed web-based sample apps and development environments in its posts and codelabs. Glitch is handy because it lets you demonstrate both frontend and backend code.
 
 ## Create a new Glitch
+
 1. If you aren't already a member of the web.dev Glitch team, ask your content reviewer to be added.
 1. Once you're on the team, remix the [Hello Webpage template](https://glitch.com/~web-dev-hello-webpage) or [Hello Express template](https://glitch.com/~web-dev-hello-express), depending on which is closest to what you're trying to build.
 1. Replace the automatically generated title for your Glitch with a descriptive name that hasn't already been used elsewhere on web.dev.
@@ -19,6 +20,7 @@ web.dev uses [Glitch](https://glitch.com/) to embed web-based sample apps and de
 1. Add the Glitch to the [web.dev team page](https://glitch.com/@webdev).
 
 ## Authoring tips
+
 Make all Glitch code [accessible](/handbook/inclusion-and-accessibility#create-accessible-code-blocks).
 
 [Be mindful of the development landscape](/handbook/quality/#be-mindful-of-the-development-landscape) when selecting tools and frameworks.
@@ -27,7 +29,7 @@ Make sure the `README` for your Glitch links back to web.dev. Here's a template
 
 ```text
 # [Your Article Name]
-This example is part of the [name of article](link/to/article) post on [web.dev](https://web.dev).
+This example is part of the [name of article](link/to/article) post on [web.dev](/).
 ```
 
 Use the license headers for HTML, CSS, and JS files:
diff --git a/src/site/content/en/handbook/policies/index.md b/src/site/content/en/handbook/policies/index.md
index bcc4020f54d..61b4f815cf0 100644
--- a/src/site/content/en/handbook/policies/index.md
+++ b/src/site/content/en/handbook/policies/index.md
@@ -1,10 +1,12 @@
 ---
 layout: handbook
-title: Content policies
-date: 2019-12-19
+title: Policies
+date: 2020-09-29
 description: |
-  TODO
-draft: true
+  Miscellaneous content policies.
 ---
 
-TODO
+## Author attribution {: #attribution }
+
+An author should only be added to a page when that person significantly updates
+the existing content or contributes a significant amount of new content.
\ No newline at end of file
diff --git a/src/site/content/en/handbook/pull-requests/index.md b/src/site/content/en/handbook/pull-requests/index.md
index 283eeecd3bd..c4d22c1e941 100644
--- a/src/site/content/en/handbook/pull-requests/index.md
+++ b/src/site/content/en/handbook/pull-requests/index.md
@@ -21,7 +21,7 @@ that you are reviewing the PR.
 
 If a reviewer claims a PR but is inactive on the PR for 3 business days, any other reviewer
 can reclaim the PR. The new reviewer should unassign the old reviewer and reassign
-themself.
+themselves.
 
 ## Properly label the PR
 
@@ -48,10 +48,18 @@ Add **one** of the following labels to the PR:
 
 Contact the web.dev content lead if you don't know what label to use.
 
+## Presubmit
+
+Pull requests must have the presubmit workflow run in order to ensure that they do not
+break the site. The workflow only runs when the `$-presubmit` label is added to the PR.
+
+When a PR us ready to be merged in, add the `$-presubmit` label and wait to see if the
+workflow passes.
+
 ## Don't merge the PR until you're 100% certain that it's OK to merge
 
 Once a PR is merged, the new or updated content is deployed to the site
 within minutes. When in doubt, get an explicit confirmation of the publication
 date from the author.
 
-[keyword]: https://docs.github.com/en/enterprise/2.16/user/github/managing-your-work-on-github/closing-issues-using-keywords#closing-an-issue-in-the-same-repository
\ No newline at end of file
+[keyword]: https://docs.github.com/en/enterprise/2.16/user/github/managing-your-work-on-github/closing-issues-using-keywords#closing-an-issue-in-the-same-repository
diff --git a/src/site/content/en/handbook/quality/index.md b/src/site/content/en/handbook/quality/index.md
index 10e62462e95..5af0328c7c5 100644
--- a/src/site/content/en/handbook/quality/index.md
+++ b/src/site/content/en/handbook/quality/index.md
@@ -1,7 +1,7 @@
 ---
 layout: handbook
 title: Content quality guidelines
-date: 2019-10-01
+date: 2022-02-01
 description: |
   The primary guidelines for writing high-quality content.
 ---
@@ -132,7 +132,7 @@ Provide a way to measure success. How can developers test that they've followed
 
 ### Be mindful of the development landscape
 
-*Canonical example: [Serve images in next-gen formats](/uses-webp-images/#webp-browser-support) makes it clear
+*Canonical example: [Serve images in next-gen formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/#webp-browser-support) makes it clear
 that WebP is not supported in all browsers*
 
 Acknowledge browser complexity. Clearly state browser support (e.g., link to the relevant feature page on [caniuse](https://www.caniuse.com/)) and provide workarounds for browser incompatibilities (e.g., polyfills).
@@ -209,7 +209,7 @@ Use a list for a set of instructions or related ideas.
 
 Include examples and figures. (See the next guideline.)
 
-### Keep it simple
+### Keep it concise {: #keep-it-simple}
 
 *Canonical example: [Code splitting with React.lazy and Suspense](/code-splitting-suspense)*
 
@@ -241,7 +241,7 @@ Explain why what you're teaching matters before jumping into the instruction. Th
 
 Indicate which details are relevant in longer code blocks by providing explanations and code highlighting. If readers don't need to understand everything about the code, tell them that—it makes the task less intimidating, especially for less experienced developers. See the [Serve responsive images](/serve-responsive-images) post for an example.
 
-When there's more than one way to solve a problem, organize them in order of simplest to most complex.
+When there's more than one way to solve a problem, organize them in order of least steps to most complex.
 
 ### Make section headings scannable
 
diff --git a/src/site/content/en/handbook/quick-start/index.md b/src/site/content/en/handbook/quick-start/index.md
index 2f18b0b2893..3c916eb3b07 100644
--- a/src/site/content/en/handbook/quick-start/index.md
+++ b/src/site/content/en/handbook/quick-start/index.md
@@ -2,18 +2,24 @@
 layout: handbook
 title: Quick start guide
 date: 2020-02-11
+updated: 2022-07-11
 description: |
-  How to create and publish content on web.dev.
+  How to create and publish content on web.dev and developer.chrome.com.
 ---
 
-Content creation for web.dev has three phases: planning, writing, and publishing.
+Content creation for web.dev and developer.chrome.com has four phases: planning, writing, reviewing, and publishing. 
+Most of the following information is relevant to both sites.
+
+All content goes through our editorial process. Unless you are working on part of an already approved set of content, 
+do not submit PRs for new content without following these instructions.
 
 ## Planning
 
+1. Decide if you want your post on [web.dev](/) or [developer.chrome.com](https://developer.chrome.com/). [More about the right site for your post](/handbook/writing-blog-posts#which-site).
 1. If you're a Googler or have access to a Googler, use the [content proposal form][form] to submit
-   your new content request. If you don't have access to a Googler, use the
-   [content issue template](https://github.com/googlechrome/web.dev/issues/new?template=content.md).
-1. The web.dev team will take a look to see if the idea fits with the goals of the site. If the idea is approved, it gets slated for a publication date!
+   your new content request. If you don't have access to a Googler, use the content issue template for
+   [web.dev](https://github.com/GoogleChrome/web.dev/issues/new?template=propose-new-content.md) or [developer.chrome.com](https://github.com/GoogleChrome/developer.chrome.com/issues/new?assignees=rachelandrew&labels=new+content&template=propose-new-content.md&title=content%3A+TODO).
+1. The team will evaluate the proposal's suitability for the goals of the relevant site. If the idea is approved, it will be assigned a reviewer.
 
 {% Aside 'caution' %}
 If the piece you'd like to publish is time sensitive, make sure to submit the issue at least **one month** before the target publication date so there's enough time to move it through the writing process.
@@ -24,25 +30,61 @@ If the piece you'd like to publish is time sensitive, make sure to submit the is
 1. Read the [Content guidelines](/handbook/#content-guidelines) to understand how to create high-quality
    content. The higher the quality of your content, the less time and energy you'll have to spend
    incorporating feedback.
-1. **After your content proposal is approved**, create a copy of the 
-   [web.dev content template][template] to draft your content.
-1. Self-review your content with the [web.dev content checklist](/handbook/content-checklist) to find and fix
+1. [How to write blog posts for web.dev and developer.chrome.com](/handbook/writing-blog-posts) has an overview of our process and tips for writing great blog posts.
+1. **After your content proposal is approved**, create a copy of the
+   [content template][template] to draft your content.
+1. Review your content with the [content checklist](/handbook/content-checklist) to find and fix
    common problems. The more of these problems you fix yourself, the faster your review will go.
 1. When your first draft is ready, leave a comment in your GitHub issue and ask for a review.
 
+## Reviewing
+
+Your content will be edited and reviewed in Google docs, this will include:
+
+1. **Technical review** to check that the content is accurate.
+1. **Copy edit:** to check that the content meets our style guides and is free from typos and grammar errors.
+
 ## Publishing
 
 1. After you get approval from a web.dev team member that your content can be published on the site,
    submit a GitHub pull request.
+1. Make no changes to the approved copy when creating your PR. 
 1. Check out the [web.dev markup section](/handbook/#web.dev-markup) to learn how to make your markdown squeaky clean.
-   In particular, check out the [web.dev components](https://web.dev/handbook/web-dev-components/) guide
-   to discover UI elements that can make your content more engaging or aesthetically pleasing.
-1. Once your PR is merged, the content will be deployed to the site immediately.
+   In particular, check out the [web.dev components](/handbook/web-dev-components/) or 
+   [developer.chrome.com components](https://developer.chrome.com/docs/handbook/components/) guide to discover UI elements that can make your content more engaging or aesthetically pleasing.
+1. Once your PR is merged, the content will be deployed to the site immediately, and appear live after around an hour.
 
-{% Aside %}
-  Googlers: Check out [web.dev process](https://docs.google.com/document/d/1Vxgrgxtz4OeJcrYJF5lpK9bVhTcGpXOXeeL4GZCV8KY)
-  for more detailed information about web.dev's content process.
+{% Aside 'warning' %}
+Following step 2 is very important, as changes to approved copy while a PR is in progress will result in the PR being closed until the copy is finalized.
 {% endAside %}
 
-[form]: https://docs.google.com/forms/d/e/1FAIpQLSdYePZbDZ9Idi4MKL0cbqTuUHfPU7ZZJNnV9hDzjc0e1c2UXw/viewform?fbzx=7994504531518856644
+## Organizing content
+
+Check with your assigned technical writer before creating new collections or tags.
+
+### Collections (learning paths)
+
+Posts in collections in the *Learn* section are organized thematically within *learning paths*.
+Each collection is defined in the `site/_data/paths` directory as a `json` object.
+
+1. To add a new collection, add a `<collection_name>.json` file to the `site/_data/paths` directory.
+
+1. In the collection's `.json` file, define fields like *title*, *description*, *overview* and *topic titles* as i18n paths, to allow their translation into many languages (e.g. `i18n.paths.newpathname.title`).
+
+1. Add the content of these fields to the `site/_data/i18n/paths` directory (under `en` key).
+If applicable, launch translation process for this content by emailing web.dev@.
+
+### Tags
+
+Tags are used to categorize articles and also to generate [web.dev/tags](/tags/) pages.
+The canonical list of tags is published in [tags.yml](https://github.com/GoogleChrome/web.dev/blob/main/src/site/_data/i18n/tags.yml) on GitHub.
+
+- to add a new tag, add it first to `tags.yml`
+- to use an existing tag, add it to your article's `frontmatter`:
+```bash
+tags:
+  - accessibility
+```
+
+[form]: https://docs.google.com/forms/d/e/1FAIpQLSc65CDClpUu7R2ECacLz3B1a6hOCWdFAk2vkWXIbZjzNSXq_Q/viewform?resourcekey=0-t3rJNkt5V2-iE2N42KhrhQ
 [template]: https://docs.google.com/document/d/1lgaNIEnXZf-RB8_p9RK22QEgpXJqnu77pLWVWVy4nuw/edit?usp=sharing
diff --git a/src/site/content/en/handbook/redirects/index.md b/src/site/content/en/handbook/redirects/index.md
index f83dd0bef7d..4d693e1e36d 100644
--- a/src/site/content/en/handbook/redirects/index.md
+++ b/src/site/content/en/handbook/redirects/index.md
@@ -10,12 +10,12 @@ This guide explains how to redirect content.
 
 ## Redirect a single page
 
-1. Open [`src/site/content/_redirects.yaml`][source].
+1. Open [`redirects.yaml`][source].
 1. Add an entry similar to the following:
 
    ```yaml
-   from: /path/to/old/page
-   to: /path/to/new/page
+   source: /path/to/old/page
+   destination: /path/to/new/page
    ```
 
 ## Redirect multiple pages in a directory
@@ -23,13 +23,13 @@ This guide explains how to redirect content.
 It's possible to redirect a subdirectory of content, but this feature
 is probably no longer useful because web.dev now uses a [flat URL structure][flat].
 
-1. Open [`src/site/content/_redirects.yaml`][source].
+1. Open [`redirects.yaml`][source].
 1. Add an entry similar to the following:
 
    ```yaml
-   from: /path/to/old/subdirectory/...
-   to: /path/to/new/subdirectory/...
+   source: /path/to/old/subdirectory/:part
+   destination: /path/to/new/subdirectory/:part
    ```
 
-[source]: https://github.com/GoogleChrome/web.dev/blob/master/src/site/content/_redirects.yaml
+[source]: https://github.com/GoogleChrome/web.dev/blob/main/redirects.yaml
 [flat]: https://joeyhoer.com/flat-vs-hierarchical-url-structure-420f178c
diff --git a/src/site/content/en/handbook/resolving-glitch-issues/directories.png b/src/site/content/en/handbook/resolving-glitch-issues/directories.png
deleted file mode 100644
index bdbc11a0800..00000000000
Binary files a/src/site/content/en/handbook/resolving-glitch-issues/directories.png and /dev/null differ
diff --git a/src/site/content/en/handbook/resolving-glitch-issues/disk-limit.png b/src/site/content/en/handbook/resolving-glitch-issues/disk-limit.png
deleted file mode 100644
index d750e56e7ab..00000000000
Binary files a/src/site/content/en/handbook/resolving-glitch-issues/disk-limit.png and /dev/null differ
diff --git a/src/site/content/en/handbook/resolving-glitch-issues/git-committed-files.png b/src/site/content/en/handbook/resolving-glitch-issues/git-committed-files.png
deleted file mode 100644
index d5acbae797d..00000000000
Binary files a/src/site/content/en/handbook/resolving-glitch-issues/git-committed-files.png and /dev/null differ
diff --git a/src/site/content/en/handbook/resolving-glitch-issues/index.md b/src/site/content/en/handbook/resolving-glitch-issues/index.md
index cf30673ffdc..d0fd8e98b07 100644
--- a/src/site/content/en/handbook/resolving-glitch-issues/index.md
+++ b/src/site/content/en/handbook/resolving-glitch-issues/index.md
@@ -18,7 +18,7 @@ This post will show you how to resolve some common Glitch issues.
   Subscribing to Glitch and paying for Boosted Apps will automatically increase memory and disk
   space as well as improve your rate limits. That's an always an option if you run into any of the
   disk/memory issues mentioned in this post. [Learn
-  more](https://glitch.com/help/boosted-apps-whats-that/).
+  more](https://glitch.happyfox.com/kb/article/73-boosted-apps-what-s-that/).
 {% endAside %}
 
 ## Project is suspended
@@ -27,20 +27,20 @@ If you see a "Project has been suspended" message when opening a new project, co
 their public forum or by emailing `support@glitch.com`. You should receive a reply soon with steps
 you can take to fix your project.
 
-<img class="w-screenshot w-screenshot-filled" src="suspended-project.png" alt="Suspended-project">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FZdKu2XfMTu9XNWaljfJ.png", alt="Suspended-project", width="800", height="453" %}
 
 ## Exceeding disk usage
 
 If you see an App Status warning with exceeded disk limits, you'll need to clear up some space
 before you can edit and use the project.
 
-![Disk limit exceeded](./disk-limit.png)
+{% Img src="image/admin/iszxjOlALJHJnvo10kMl.png", alt="Disk limit exceeded", width="800", height="429" %}
 
 * Remove any unnecessary dependencies from `package.json`
 * In the terminal, run `git gc` and `git prune` to remove unneeded files
 * Run `du -hd1` to to see which directories are taking up disk space
 
-![Directories disk usage](./directories.png)
+{% Img src="image/admin/tsPeskkc1It3QeYkCJ5I.png", alt="Directories disk usage", width="363", height="433" %}
 
 If an unneeded directory is bloating up on every build and taking up disk space:
 
@@ -60,7 +60,7 @@ If the `.git` directory is taking up disk space:
   being committed to history (note: this will still include files previously committed even if they
   are now in `.gitignore`)
 
-![Committed files](./git-committed-files.png)
+{% Img src="image/admin/kghTObtD4BjdUV950To5.png", alt="Committed files", width="713", height="89" %}
 
 * If you see any directories committed many times that shouldn't be, add them to `.gitignore`
-* If you don't need `.git` history, remove the `.git` folder (`rm -rf .git`)
\ No newline at end of file
+* If you don't need `.git` history, remove the `.git` folder (`rm -rf .git`)
diff --git a/src/site/content/en/handbook/resolving-glitch-issues/suspended-project.png b/src/site/content/en/handbook/resolving-glitch-issues/suspended-project.png
deleted file mode 100644
index f4e1db156a1..00000000000
Binary files a/src/site/content/en/handbook/resolving-glitch-issues/suspended-project.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/article-header/houssein.jpg b/src/site/content/en/handbook/sandbox/article-header/houssein.jpg
deleted file mode 100644
index e099af5e3ab..00000000000
Binary files a/src/site/content/en/handbook/sandbox/article-header/houssein.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/article-header/index.njk b/src/site/content/en/handbook/sandbox/article-header/index.njk
deleted file mode 100644
index ce62cd1c758..00000000000
--- a/src/site/content/en/handbook/sandbox/article-header/index.njk
+++ /dev/null
@@ -1,90 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: article-header
-tags:
-  - sandbox
----
-
-<div class="w-layout-container--narrow">
-  <header class="w-article-header">
-    <h1 class="w-article-header__headline">Article components showcase</h1>
-    <p class="w-article-header__subhead">
-      Lorem ipsum dolor sit amet
-    </p>
-    <div class="w-authors">
-      <div class="w-author">
-        <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-        <div class="w-author__info">
-          <cite class="w-author__name">Houssein Djirdeh</cite>
-          <ul class="w-author__link-list">
-            <li class="w-author__link-listitem">
-              <a href="#">Twitter</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">GitHub</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">Glitch</a>
-            </li>
-          </ul>
-          <time class="w-author__published">Jan 31, 2019</time>
-        </div>
-      </div>
-      <div class="w-author">
-        <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-        <div class="w-author__info">
-          <cite class="w-author__name">Houssein Djirdeh</cite>
-          <ul class="w-author__link-list">
-            <li class="w-author__link-listitem">
-              <a href="#">Twitter</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">GitHub</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">Glitch</a>
-            </li>
-          </ul>
-          <time class="w-author__published">Jan 31, 2019</time>
-        </div>
-      </div>
-      <div class="w-author">
-        <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-        <div class="w-author__info">
-          <cite class="w-author__name">Houssein Djirdeh</cite>
-          <ul class="w-author__link-list">
-            <li class="w-author__link-listitem">
-              <a href="#">Twitter</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">GitHub</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">Glitch</a>
-            </li>
-          </ul>
-          <time class="w-author__published">Jan 31, 2019</time>
-        </div>
-      </div>
-      <div class="w-author">
-        <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-        <div class="w-author__info">
-          <cite class="w-author__name">Houssein Djirdeh</cite>
-          <ul class="w-author__link-list">
-            <li class="w-author__link-listitem">
-              <a href="#">Twitter</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">GitHub</a>
-            </li>
-            <li class="w-author__link-listitem">
-              <a href="#">Glitch</a>
-            </li>
-          </ul>
-          <time class="w-author__published">Jan 31, 2019</time>
-        </div>
-      </div>
-    </div>
-  </header>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/article-navigation/index.njk b/src/site/content/en/handbook/sandbox/article-navigation/index.njk
deleted file mode 100644
index 67c1a22c24a..00000000000
--- a/src/site/content/en/handbook/sandbox/article-navigation/index.njk
+++ /dev/null
@@ -1,35 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: article-navigation
-tags:
-  - sandbox
----
-
-<article class="w-layout-container--narrow">
-  <h2>Sample article with {{ title }}</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a
-    mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a
-    mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in.
-  </p>
-</article>
-
-<nav class="w-article-navigation">
-  <a class="w-article-navigation__link w-article-navigation__link--back" href="#">
-    Return to all articles
-  </a>
-  <a class="w-article-navigation__link w-article-navigation__link--forward" href="#">
-    <div class="w-article-navigation__column">
-      <h3 class="w-article-navigation__heading">Next article</h3>
-      Tell search engines translated pages are equivalent
-    </div>
-  </a>
-</nav>
diff --git a/src/site/content/en/handbook/sandbox/asides/index.njk b/src/site/content/en/handbook/sandbox/asides/index.njk
deleted file mode 100644
index 66161e5c933..00000000000
--- a/src/site/content/en/handbook/sandbox/asides/index.njk
+++ /dev/null
@@ -1,47 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: asides
-tags:
-  - sandbox
----
-
-{% Aside 'note' %}
-  Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Proin dictum a
-  massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh
-  varius at. `Cras ligula lacus`, porta vitae maximus a, ultrices a mauris.
-  [`Vestibulum porta`](#) dolor erat, vel molestie dolor posuere in. Nam vel
-  elementum augue.
-{% endAside %}
-
-{% Aside 'caution' %}
-  [This type of callout](#) suggests proceeding with caution.
-{% endAside %}
-
-{% Aside 'warning' %}
-  This type of callout is stronger than a Caution; it means "Don't do
-  this."
-{% endAside %}
-
-{% Aside 'success' %}
-  This type of callout describes a successful action or an error-free
-  status.
-{% endAside %}
-
-{% Aside 'objective' %}
-  This type of callout defines the goal of a procedure.
-{% endAside %}
-
-{% Aside 'gotchas' %}
-  The value of the `type` attribute should be the MIME type corresponding to the
-  image format. An image's MIME type and its file extension are often similar,
-  but they aren't necessarily the same thing (e.g. `.jpg` vs. `image/jpeg`).
-{% endAside %}
-
-{% Aside 'key-term' %}
-  This type of callout defines important terminology.
-{% endAside %}
-
-{% Aside 'codelab' %}
-  [Using Imagemin with Grunt](#)
-{% endAside %}
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/author/houssein.jpg b/src/site/content/en/handbook/sandbox/author/houssein.jpg
deleted file mode 100644
index e099af5e3ab..00000000000
Binary files a/src/site/content/en/handbook/sandbox/author/houssein.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/author/index.njk b/src/site/content/en/handbook/sandbox/author/index.njk
deleted file mode 100644
index c167012aa96..00000000000
--- a/src/site/content/en/handbook/sandbox/author/index.njk
+++ /dev/null
@@ -1,37 +0,0 @@
----
-permalink: false
-layout: sandbox/container
-title: author
-tags:
-  - sandbox
----
-
-<div class="w-authors">
-  <div class="w-author">
-    <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-    <div class="w-author__info">
-      <cite class="w-author__name">Houssein Djirdeh</cite>
-      <time class="w-author__published">Jan 31, 2019</time>
-    </div>
-  </div>
-</div>
-<div>
-  <div class="w-author">
-    <img class="w-author__image" src="./houssein.jpg" alt="Houssein Djirdeh">
-    <div class="w-author__info">
-      <cite class="w-author__name">Houssein Djirdeh</cite>
-      <ul class="w-author__link-list">
-        <li class="w-author__link-listitem">
-          <a href="#">Twitter</a>
-        </li>
-        <li class="w-author__link-listitem">
-          <a href="#">GitHub</a>
-        </li>
-        <li class="w-author__link-listitem">
-          <a href="#">Glitch</a>
-        </li>
-      </ul>
-      <time class="w-author__published">Jan 31, 2019</time>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/blockquote/index.njk b/src/site/content/en/handbook/sandbox/blockquote/index.njk
deleted file mode 100644
index 0813f524bb6..00000000000
--- a/src/site/content/en/handbook/sandbox/blockquote/index.njk
+++ /dev/null
@@ -1,17 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: blockquote
-tags:
-  - sandbox
----
-
-<blockquote>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum
-    a massa sit amet ullamcorper.
-  </p>
-  <cite>
-    by Jon Doe
-  </cite>
-</blockquote>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/breadcrumbs/index.njk b/src/site/content/en/handbook/sandbox/breadcrumbs/index.njk
deleted file mode 100644
index f6164546b7c..00000000000
--- a/src/site/content/en/handbook/sandbox/breadcrumbs/index.njk
+++ /dev/null
@@ -1,24 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: breadcrumbs
-tags:
-  - sandbox
----
-
-<ul class="w-breadcrumbs">
-  <li class="w-breadcrumbs__crumb">
-    <a
-      class="w-breadcrumbs__link w-breadcrumbs__link--left-justify"
-      href="https://web.dev"
-      >Home</a
-    >
-  </li>
-  <li class="w-breadcrumbs__crumb">
-    <a
-      class="w-breadcrumbs__link"
-      href="https://web.dev/fast"
-      >Fast load times</a
-    >
-  </li>
-</ul>
diff --git a/src/site/content/en/handbook/sandbox/buttons/index.njk b/src/site/content/en/handbook/sandbox/buttons/index.njk
deleted file mode 100644
index 288b702efe5..00000000000
--- a/src/site/content/en/handbook/sandbox/buttons/index.njk
+++ /dev/null
@@ -1,49 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: buttons
-tags:
-  - sandbox
----
-
-<div>
-  <button class="w-button">
-    Text button
-  </button>
-</div>
-<br>
-
-<div>
-  <button class="w-button w-button--with-icon" data-icon="file_download">
-    Text button with icon
-  </button>
-</div>
-<br>
-
-<div>
-  <button class="w-button w-button--primary">
-    Primary button
-  </button>
-</div>
-<br>
-
-<div>
-  <button class="w-button w-button--primary w-button--with-icon" data-icon="file_download">
-    Primary button with icon
-  </button>
-</div>
-<br>
-
-<div>
-  <button class="w-button w-button--secondary">
-    Secondary button
-  </button>
-</div>
-<br>
-
-<div>
-  <button class="w-button w-button--secondary w-button--with-icon" data-icon="file_download">
-    Secondary button with icon
-  </button>
-</div>
-<br>
diff --git a/src/site/content/en/handbook/sandbox/card/index.njk b/src/site/content/en/handbook/sandbox/card/index.njk
deleted file mode 100644
index 0283ef147f1..00000000000
--- a/src/site/content/en/handbook/sandbox/card/index.njk
+++ /dev/null
@@ -1,11 +0,0 @@
----
-permalink: false
-layout: sandbox/container
-title: card
-tags:
-  - sandbox
----
-
-<div class="w-card">
-  <p style="padding: 16px;">Hi I'm a card. Mouse over me.</p>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/chips/index.njk b/src/site/content/en/handbook/sandbox/chips/index.njk
deleted file mode 100644
index 81c3131ae96..00000000000
--- a/src/site/content/en/handbook/sandbox/chips/index.njk
+++ /dev/null
@@ -1,13 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: chips
-tags:
-  - sandbox
----
-
-<div class="w-chips">
-  <a class="w-chip" href="#">Artificial Intellegence</a>
-  <a class="w-chip" href="#">User Experience</a>
-  <a class="w-chip" href="#">Learning</a>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/code/index.md b/src/site/content/en/handbook/sandbox/code/index.md
deleted file mode 100644
index 2f2bf49c4d5..00000000000
--- a/src/site/content/en/handbook/sandbox/code/index.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: code
-tags:
-  - sandbox
----
-
-<p>
-  The value of the <code>type</code> attribute should be the MIME type
-  corresponding to the image format. An image's MIME type and its file
-  extension are often similar, but they aren't necessarily the same
-  thing (e.g. <code>.jpg</code> vs. <code>image/jpeg</code>).
-</p>
-
-<ul>
-  <li>
-    The value of the <code>type</code> attribute should be the MIME type.
-  </li>
-  <li>
-    (e.g. <code>.jpg</code> vs. <code>image/jpeg</code>)
-  </li>
-</ul>
-
-**Code block**
-
-```js
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-**Highlight**
-
-```js/1
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-**Remove**
-
-```js//1
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
-
-**Add/Remove**
-
-```js/6/5
-const imagemin = require('imagemin');
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-(async() => {
-  const files = await imagemin(
-      ['source_dir/*.jpg'],
-      ['source_dir/*.jpg', 'another_dir/*.jpg'],
-      'destination_dir',
-      {plugins: [imageminMozjpeg({quality: 50})]}
-  );
-  console.log(files);
-})();
-```
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/codelabs-callout/index.njk b/src/site/content/en/handbook/sandbox/codelabs-callout/index.njk
deleted file mode 100644
index dd7fede4632..00000000000
--- a/src/site/content/en/handbook/sandbox/codelabs-callout/index.njk
+++ /dev/null
@@ -1,131 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: codelabs-callout
-tags:
-  - sandbox
----
-
-<p>
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum officiis
-molestiae et porro maiores maxime dolorem tempora quis ipsa ratione cum quaerat
-perspiciatis vel, sed consequuntur incidunt quas! Ab, ad?
-</p>
-
-<div class="w-codelabs-callout">
-  <div class="w-codelabs-callout__header">
-    <h2 class="w-codelabs-callout__lockup">Codelabs</h2>
-    <div class="w-codelabs-callout__headline">See it in action</div>
-    <div class="w-codelabs-callout__blurb">
-      Learn more and put this guide into action.
-    </div>
-  </div>
-  <ul class="w-unstyled-list w-codelabs-callout__list">
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Fix sneaky 404s
-      </a>
-    </li>
-  </ul>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum officiis
-molestiae et porro maiores maxime dolorem tempora quis ipsa ratione cum quaerat
-perspiciatis vel, sed consequuntur incidunt quas! Ab, ad?
-</p>
-
-<div class="w-codelabs-callout">
-  <div class="w-codelabs-callout__header">
-    <h2 class="w-codelabs-callout__lockup">Codelabs</h2>
-    <div class="w-codelabs-callout__headline">See it in action</div>
-    <div class="w-codelabs-callout__blurb">
-      Learn more and put this guide into action.
-    </div>
-  </div>
-  <ul class="w-unstyled-list w-codelabs-callout__list">
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Fix sneaky 404s
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Gulp
-      </a>
-    </li>
-  </ul>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum officiis
-molestiae et porro maiores maxime dolorem tempora quis ipsa ratione cum quaerat
-perspiciatis vel, sed consequuntur incidunt quas! Ab, ad?
-</p>
-
-<div class="w-codelabs-callout">
-  <div class="w-codelabs-callout__header">
-    <h2 class="w-codelabs-callout__lockup">Codelabs</h2>
-    <div class="w-codelabs-callout__headline">See it in action</div>
-    <div class="w-codelabs-callout__blurb">
-      Learn more and put this guide into action.
-    </div>
-  </div>
-  <ul class="w-unstyled-list w-codelabs-callout__list">
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Grunt and some hella long text this is totally
-        gonna wrap on mobile
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Gulp
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Webpack
-      </a>
-    </li>
-  </ul>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum officiis
-molestiae et porro maiores maxime dolorem tempora quis ipsa ratione cum quaerat
-perspiciatis vel, sed consequuntur incidunt quas! Ab, ad?
-</p>
-
-<div class="w-codelabs-callout">
-  <div class="w-codelabs-callout__header">
-    <h2 class="w-codelabs-callout__lockup">Codelabs</h2>
-    <div class="w-codelabs-callout__headline">See it in action</div>
-    <div class="w-codelabs-callout__blurb">
-      Learn more and put this guide into action.
-    </div>
-  </div>
-  <ul class="w-unstyled-list w-codelabs-callout__list">
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Grunt and some hella long text this is totally
-        gonna wrap on mobile
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Gulp
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Using imagemin with Webpack
-      </a>
-    </li>
-    <li class="w-codelabs-callout__listitem">
-      <a class="w-codelabs-callout__link" href="#">
-        Fix sneaky 404s
-      </a>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/columns/index.njk b/src/site/content/en/handbook/sandbox/columns/index.njk
deleted file mode 100644
index c847232e6f8..00000000000
--- a/src/site/content/en/handbook/sandbox/columns/index.njk
+++ /dev/null
@@ -1,22 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: columns
-tags:
-  - sandbox
----
-
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="../image-small.png" alt="" style="max-width: 400px;">
-    <figcaption class="w-figcaption">
-      Small image.
-    </figcaption>
-  </figure>
-  <figure class="w-figure">
-    <img src="../image-small.png" alt="" style="max-width: 400px;">
-    <figcaption class="w-figcaption">
-      Small image.
-    </figcaption>
-  </figure>
-</div>
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/a.jpg b/src/site/content/en/handbook/sandbox/columns/sandbox/a.jpg
deleted file mode 100644
index 6414c7029e6..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/a.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/hero.jpg b/src/site/content/en/handbook/sandbox/columns/sandbox/hero.jpg
deleted file mode 100644
index cd3b60fe3a3..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/image-inline.png b/src/site/content/en/handbook/sandbox/columns/sandbox/image-inline.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/image-inline.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/image-screenshot.png b/src/site/content/en/handbook/sandbox/columns/sandbox/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/image-small.png b/src/site/content/en/handbook/sandbox/columns/sandbox/image-small.png
deleted file mode 100644
index 69bedd75087..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/image-small.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/img1.png b/src/site/content/en/handbook/sandbox/columns/sandbox/img1.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/img1.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/columns/sandbox/img2.png b/src/site/content/en/handbook/sandbox/columns/sandbox/img2.png
deleted file mode 100644
index 36beb235c56..00000000000
Binary files a/src/site/content/en/handbook/sandbox/columns/sandbox/img2.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/compare/index.md b/src/site/content/en/handbook/sandbox/compare/index.md
deleted file mode 100644
index 2594f4b4267..00000000000
--- a/src/site/content/en/handbook/sandbox/compare/index.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: compare
-tags:
-  - sandbox
----
-
-```text
-Bad code example
-```
-
-{% Compare 'worse' %}
-Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
-at.
-{% endCompare %}
-
-```text
-Good code example
-```
-
-{% Compare 'better' %}
-Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
-at.
-{% endCompare %}
-
-```text
-Bad code example
-```
-
-{% Compare 'worse', 'Not helpful' %}
-Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
-at.
-{% endCompare %}
-
-```text
-Good code example
-```
-
-{% Compare 'better', 'Helpful' %}
-Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
-sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
-at.
-{% endCompare %}
diff --git a/src/site/content/en/handbook/sandbox/cross-links/index.njk b/src/site/content/en/handbook/sandbox/cross-links/index.njk
deleted file mode 100644
index b901b39bc37..00000000000
--- a/src/site/content/en/handbook/sandbox/cross-links/index.njk
+++ /dev/null
@@ -1,12 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: cross-links
-tags:
-  - sandbox
----
-
-<div class="w-cross-links">
-  <a href="#" class="w-cross-link" data-icon="open_in_new">Angular</a>
-  <a href="#" class="w-cross-link" data-icon="open_in_new">React</a>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/details/index.njk b/src/site/content/en/handbook/sandbox/details/index.njk
deleted file mode 100644
index decb32553cb..00000000000
--- a/src/site/content/en/handbook/sandbox/details/index.njk
+++ /dev/null
@@ -1,22 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: details
-tags:
-  - sandbox
----
-
-<details open>
-  <summary>Lighthouse in Chrome</summary>
-  <p>
-    The browser uses the first listed source that's in a format it
-    supports. If the browser does not support any of the formats.
-  </p>
-</details>
-<details>
-  <summary>Developer tools for Lighthouse</summary>
-  <p>
-    The browser uses the first listed source that's in a format it
-    supports. If the browser does not support any of the formats.
-  </p>
-</details>
diff --git a/src/site/content/en/handbook/sandbox/grid/index.njk b/src/site/content/en/handbook/sandbox/grid/index.njk
deleted file mode 100644
index 5602c7da0ff..00000000000
--- a/src/site/content/en/handbook/sandbox/grid/index.njk
+++ /dev/null
@@ -1,90 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: grid
-tags:
-  - sandbox
----
-
-<style>
-  h2 {
-    text-align: center;
-  }
-  .w-grid__item > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: pink;
-    min-height: 570px;
-  }
-</style>
-
-<h2>Single column grid</h2>
-<div class="w-grid">
-  <div class="w-grid__columns" role="list">
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-  </div>
-</div>
-<h2>Two-column grid</h2>
-<div class="w-grid">
-  <div class="w-grid__columns w-grid__columns--two" role="list">
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-  </div>
-</div>
-<h2>Three-column grid</h2>
-<div class="w-grid">
-  <div class="w-grid__columns w-grid__columns--three" role="list">
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-    <div class="w-grid__item" role="listitem">
-      <div>Content goes here</div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/images/index.njk b/src/site/content/en/handbook/sandbox/images/index.njk
deleted file mode 100644
index 89d3b733c8b..00000000000
--- a/src/site/content/en/handbook/sandbox/images/index.njk
+++ /dev/null
@@ -1,112 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: images
-hero: hero.jpg
-tags:
-  - sandbox
----
-
-<figure class="w-figure w-figure--fullbleed">
-  <img src="../a.jpg" alt="">
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    Large image.
-  </figcaption>
-</figure>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-  at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-  porta dolor erat, vel molestie dolor posuere in.
-</p>
-
-<figure class="w-figure">
-  <img src="../image-small.png" alt="" style="max-width: 400px;">
-  <figcaption class="w-figcaption">
-    Small image.
-  </figcaption>
-</figure>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-  at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-  porta dolor erat, vel molestie dolor posuere in.
-</p>
-
-<figure class="w-figure">
-  <img src="../image-small.png" alt="" style="max-width: 400px;">
-  <figcaption class="w-figcaption">
-    Centered, small image.
-  </figcaption>
-</figure>
-
-<figure class="w-figure w-figure--inline-right">
-  <img class="w-screenshot" src="../image-inline.png" alt="" style="max-width: 200px;">
-  <figcaption class="w-figcaption">
-    Inline right, outlined image.
-  </figcaption>
-</figure>
-
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-    Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel
-    elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque
-    diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit
-    amet imperdiet velit. Morbi at quam sem. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
-    Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula
-    lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor
-    erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim
-    blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac
-    blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi
-    at quam sem.
-</p>
-
-<figure class="w-figure w-figure--inline-left">
-  <img class="w-screenshot" src="../image-inline.png" alt="" style="max-width: 200px;">
-  <figcaption class="w-figcaption">
-    Inline left, outlined image.
-  </figcaption>
-</figure>
-
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus
-    nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.
-    Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel
-    elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque
-    diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit
-    amet imperdiet velit. Morbi at quam sem. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
-    Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula
-    lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor
-    erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim
-    blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac
-    blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi
-    at quam sem.
-</p>
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="../image-screenshot.png" alt="">
-  <figcaption class="w-figcaption">
-    Filled screenshot.
-  </figcaption>
-</figure>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-  at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-  porta dolor erat, vel molestie dolor posuere in.
-</p>
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="../img2.png" alt="">
-  <figcaption class="w-figcaption">
-    Regular screenshot.
-  </figcaption>
-</figure>
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/a.jpg b/src/site/content/en/handbook/sandbox/images/sandbox/a.jpg
deleted file mode 100644
index 6414c7029e6..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/a.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/hero.jpg b/src/site/content/en/handbook/sandbox/images/sandbox/hero.jpg
deleted file mode 100644
index cd3b60fe3a3..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/image-inline.png b/src/site/content/en/handbook/sandbox/images/sandbox/image-inline.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/image-inline.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/image-screenshot.png b/src/site/content/en/handbook/sandbox/images/sandbox/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/image-small.png b/src/site/content/en/handbook/sandbox/images/sandbox/image-small.png
deleted file mode 100644
index 69bedd75087..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/image-small.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/img1.png b/src/site/content/en/handbook/sandbox/images/sandbox/img1.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/img1.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/images/sandbox/img2.png b/src/site/content/en/handbook/sandbox/images/sandbox/img2.png
deleted file mode 100644
index 36beb235c56..00000000000
Binary files a/src/site/content/en/handbook/sandbox/images/sandbox/img2.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/instruction/index.md b/src/site/content/en/handbook/sandbox/instruction/index.md
deleted file mode 100644
index 7850723f2a3..00000000000
--- a/src/site/content/en/handbook/sandbox/instruction/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: instruction
----
-
-{% Instruction 'remix' %}
-{% Instruction 'preview' %}
-
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum alias esse
-accusantium quibusdam perspiciatis, sunt vero at accusamus temporibus molestias
-iste culpa. Recusandae sit atque magni aspernatur dolorem vel omnis.
-
-{% Instruction 'console', 'ol' %}
-
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum alias esse
-accusantium quibusdam perspiciatis, sunt vero at accusamus temporibus molestias
-iste culpa. Recusandae sit atque magni aspernatur dolorem vel omnis.
-
-{% Instruction 'devtools', 'none' %}
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/lists/index.njk b/src/site/content/en/handbook/sandbox/lists/index.njk
deleted file mode 100644
index 38accd6bdd3..00000000000
--- a/src/site/content/en/handbook/sandbox/lists/index.njk
+++ /dev/null
@@ -1,50 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: lists
-tags:
-  - sandbox
----
-
-<ol>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-  </li>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-    <figure class="w-figure">
-      <img class="w-screenshot w-screenshot--filled" src="../image-screenshot.png" alt="">
-      <figcaption class="w-figcaption">
-        Filled screenshot.
-      </figcaption>
-    </figure>
-  </li>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-  </li>
-</ol>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius
-  at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum
-  porta dolor erat, vel molestie dolor posuere in.
-</p>
-
-<ul>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-  </li>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-  </li>
-  <li>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a
-    massa sit amet ullamcorper.
-  </li>
-</ul>
diff --git a/src/site/content/en/handbook/sandbox/lists/sandbox/image-screenshot.png b/src/site/content/en/handbook/sandbox/lists/sandbox/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/sandbox/lists/sandbox/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/handbook/sandbox/numbered-header/index.njk b/src/site/content/en/handbook/sandbox/numbered-header/index.njk
deleted file mode 100644
index cefec2d6ec7..00000000000
--- a/src/site/content/en/handbook/sandbox/numbered-header/index.njk
+++ /dev/null
@@ -1,56 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: numbered header
----
-
-<div class="w-layout-container--large">
-  <div class="w-numbered-headers">
-      <h2 id="measure-your-site's-performance" class="no-link w-headline--two-small w-numbered-header w-numbered-header--horizontal">
-        Measure your site's performance
-        <a class="w-headline-link" href="#measure-your-site's-performance" aria-hidden="true">#</a>
-      </h2>
-      <h2 id="optimize-your-images" class="no-link w-headline--two-small w-numbered-header w-numbered-header--horizontal">
-        Optimize your images
-        <a class="w-headline-link" href="#optimize-your-images" aria-hidden="true">#</a>
-      </h2>
-      <h2 id="optimize-your-javascript" class="no-link w-headline--two-small w-numbered-header w-numbered-header--horizontal">
-        Optimize your JavaScript
-        <a class="w-headline-link" href="#optimize-your-javascript" aria-hidden="true">#</a>
-      </h2>
-    </div>
-
-  <div class="w-numbered-headers">
-    <div>
-      <h3 class="w-numbered-header w-numbered-header--vertical">
-        Audit your web page
-      </h3>
-      <p>
-        Provide any URL, and web.dev will run a series of audits using <a
-        href="https://developers.google.com/web/tools/lighthouse/"
-        class="gc-analytics-event" data-category="web.dev" data-label="measure,
-        Lighthouse link" data-action="click">Lighthouse</a>. We'll generate a report
-        of how well you did.
-      </p>
-    </div>
-  
-    <div>
-      <h3 class="w-numbered-header w-numbered-header--vertical">
-        Analyze for improvements
-      </h3>
-      <p>
-        Review the audits report to identify areas in which your page can be improved.
-      </p>
-    </div>
-  
-    <div>
-      <h3 class="w-numbered-header w-numbered-header--vertical">
-        Learn how to fix it
-      </h3>
-      <p>
-        For each audit you'll find guidance and immediate steps you can take to
-        improve your scores.
-      </p>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/page-header/index.njk b/src/site/content/en/handbook/sandbox/page-header/index.njk
deleted file mode 100644
index e054fef2186..00000000000
--- a/src/site/content/en/handbook/sandbox/page-header/index.njk
+++ /dev/null
@@ -1,15 +0,0 @@
----
-permalink: false
-layout: sandbox/container
-title: page-header
-tags:
-  - sandbox
----
-
-<header class="w-page-header">
-  <h1 class="w-page-header__headline">Learn</h1>
-  <p class="w-page-header__copy">
-    Explore our structured learning paths to discover everything you need
-    to know about building for the modern web.
-  </p>
-</header>
diff --git a/src/site/content/en/handbook/sandbox/path-card/index.njk b/src/site/content/en/handbook/sandbox/path-card/index.njk
deleted file mode 100644
index 9a9d5306292..00000000000
--- a/src/site/content/en/handbook/sandbox/path-card/index.njk
+++ /dev/null
@@ -1,16 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: path-card
-tags:
-  - sandbox
----
-
-<section class="w-grid">
-  <h3 class="w-learn-heading">Learning paths</h3>
-  <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-    {% for path in paths %}
-      {% PathCard path, lang %}
-    {% endfor %}
-  </div>
-</section>
diff --git a/src/site/content/en/handbook/sandbox/path-card/path-card.11tydata.js b/src/site/content/en/handbook/sandbox/path-card/path-card.11tydata.js
deleted file mode 100644
index 027b41f182b..00000000000
--- a/src/site/content/en/handbook/sandbox/path-card/path-card.11tydata.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const fast = require('../../../../../_data/paths/fast.json');
-const accessible = require('../../../../../_data/paths/accessible.json');
-const reliable = require('../../../../../_data/paths/reliable.json');
-
-// =============================================================================
-// LEARN OVERVIEW
-//
-// This is the context object for the learn page.
-// It helps layout cards featured on the learn page, and their ordering.
-//
-// =============================================================================
-
-module.exports = {
-  paths: [fast, accessible, reliable],
-};
diff --git a/src/site/content/en/handbook/sandbox/post-card/index.njk b/src/site/content/en/handbook/sandbox/post-card/index.njk
deleted file mode 100644
index 1d7b6bae7f4..00000000000
--- a/src/site/content/en/handbook/sandbox/post-card/index.njk
+++ /dev/null
@@ -1,20 +0,0 @@
----
-permalink: false
-layout: sandbox/layout
-title: post-card
-tags:
-  - sandbox
----
-
-{# <section class="w-grid">
-  <div class="w-grid__columns w-grid__columns--three" role="list">
-    {% set post = 'en/test-post' | findByUrl %}
-    {% PostCard {post: post, author: authors[post.data.author]} %}
-
-    {% set post = 'en/another-post' | findByUrl %}
-    {% PostCard {post: post, author: authors[post.data.author]} %}
-
-    {% set post = 'en/yet-another-post' | findByUrl %}
-    {% PostCard {post: post, author: authors[post.data.author]} %}
-  </div>
-</section> #}
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/stats/index.njk b/src/site/content/en/handbook/sandbox/stats/index.njk
deleted file mode 100644
index a7d0f448e34..00000000000
--- a/src/site/content/en/handbook/sandbox/stats/index.njk
+++ /dev/null
@@ -1,52 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: stats
-tags:
-  - sandbox
----
-
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
-  </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
-  </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">4<sub class="w-stat__sub">x</sub></p>
-    <p class="w-stat__desc">Faster load times</p>
-  </div>
-</div>
-
-<p>
-  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, numquam
-  laboriosam reprehenderit aliquam possimus natus magnam nulla illo blanditiis
-  corporis nam sed, velit fugiat dolorum placeat. Odio, aut nisi. Fuga!
-</p>
-
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
-  </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
-  </div>
-</div>
-
-<p>
-  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, numquam
-  laboriosam reprehenderit aliquam possimus natus magnam nulla illo blanditiis
-  corporis nam sed, velit fugiat dolorum placeat. Odio, aut nisi. Fuga!
-</p>
-
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
-  </div>
-</div>
diff --git a/src/site/content/en/handbook/sandbox/tables/index.njk b/src/site/content/en/handbook/sandbox/tables/index.njk
deleted file mode 100644
index 05abf028030..00000000000
--- a/src/site/content/en/handbook/sandbox/tables/index.njk
+++ /dev/null
@@ -1,265 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: tables
-tags:
-  - sandbox
----
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Image Format</th>
-        <th>Lossy Plugin(s)</th>
-        <th>Lossless Plugin(s)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>JPEG</td>
-        <td><a href="#">imagemin-mozjpeg</a></td>
-        <td><a href="#">imagemin-jpegtran</a></td>
-      </tr>
-      <tr>
-        <td>PNG</td>
-        <td><a href="#">imagemin-pngquant</a></td>
-        <td><a href="#">imagemin-optipng</a></td>
-      </tr>
-      <tr>
-        <td>GIF</td>
-        <td><a href="#">imagemin-giflossy</a></td>
-        <td><a href="#">imagemin-gifsicle</a></td>
-      </tr>
-      <tr>
-        <td>SVG</td>
-        <td><a href="#">Imagemin-svgo</a></td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>WebP</td>
-        <td><a href="#">imagemin-webp</a></td>
-        <td></td>
-      </tr>
-    </tbody>
-    <caption>Imagemin plugins for filetypes.</caption>
-  </table>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus
-incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus,
-deleniti! Atque aliquam facilis labore odio similique provident illo culpa
-assumenda perspiciatis.
-</p>
-
-<div class="w-table-wrapper">
-  <table>
-    <caption>
-      Desktop analysis of doggos.io.
-    </caption>
-    <tbody>
-      <tr>
-        <th>Desktop</th>
-        <th>FCP</th>
-        <th>TTI</th>
-      </tr>
-      <tr>
-        <td>Homepage</td>
-        <td>1,680 ms</td>
-        <td>5,550 ms</td>
-      </tr>
-      <tr>
-        <td>Results page</td>
-        <td>2,060 ms</td>
-        <td>6,690 ms</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus
-incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus,
-deleniti! Atque aliquam facilis labore odio similique provident illo culpa
-assumenda perspiciatis.
-</p>
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Before</th>
-        <th>After</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@font-face {
-  font-family: Helvetica;
-}
-</code>
-        </td>
-        <td><code>@font-face {
-  font-family: Helvetica;
-  <strong>font-display: swap;</strong>
-}
-</code>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus
-incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus,
-deleniti! Atque aliquam facilis labore odio similique provident illo culpa
-assumenda perspiciatis.
-</p>
-
-<div class="w-table-wrapper">
-  <table>
-    <tbody>
-      <tr>
-        <th>Network</th>
-        <th>Device</th>
-        <th>JS</th>
-        <th>Images</th>
-        <th>CSS</th>
-        <th>HTML</th>
-        <th>Fonts</th>
-        <th>Total</th>
-        <th>Time to Interactive budget</th>
-      </tr>
-      <tr>
-        <td>Slow 3G</td>
-        <td>Moto G4</td>
-        <td>100</td>
-        <td>30</td>
-        <td>10</td>
-        <td>10</td>
-        <td>20</td>
-        <td>~170 KB</td>
-        <td>5s</td>
-      </tr>
-      <tr>
-        <td>Slow 4G</td>
-        <td>Moto G4</td>
-        <td>200</td>
-        <td>50</td>
-        <td>35</td>
-        <td>30</td>
-        <td>30</td>
-        <td>~345 KB</td>
-        <td>3s</td>
-      </tr>
-      <tr>
-        <td>WiFi</td>
-        <td>Desktop</td>
-        <td>300</td>
-        <td>250</td>
-        <td>50</td>
-        <td>50</td>
-        <td>100</td>
-        <td>~750 KB</td>
-        <td>2s</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<p>
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus
-incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus,
-deleniti! Atque aliquam facilis labore odio similique provident illo culpa
-assumenda perspiciatis.
-</p>
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th><strong>Property</strong></th>
-        <th><strong>Use</strong></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-        <code><strong>short_name</strong></code> (required)
-        </td>
-        <td>
-          Short human-readable name for the application. This is intended for when
-          there is insufficient space to display the full name of the web
-          application, like device home screens.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>name</strong></code> (required)</td>
-        <td>Human-readable name for the site when displayed to the user.</td>
-      </tr>
-      <tr>
-        <td><code><strong>description</strong></code> (recommended)</td>
-        <td>General description of what the PWA does.</td>
-      </tr>
-      <tr>
-        <td><code><strong>icons</strong></code> (required)</td>
-        <td>
-          An array of image files that can serve as application icons. Chrome
-          requires a 192x192px and a 512x512px icon. Additional sizes are
-          optional, and recommended for those who want to ensure pixel perfect
-          icons.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>start_url</strong></code> (required)</td>
-        <td>
-          The URL that loads when a user launches the application. This has to be
-          a relative URL, relative to the manifest url.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>background_color</strong></code> (recommended)</td>
-        <td>
-          The background color used on the auto-generated splash screen when the
-          PWA is launched.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>display</strong></code> (required)</td>
-        <td>The developers' preferred display mode for the PWA.</td>
-      </tr>
-      <tr>
-        <td><code><strong>scope</strong></code> (recommended)</td>
-        <td>
-          The navigation scope of this website's context. This restricts what web
-          pages can be viewed while the manifest is applied. If the user navigates
-          outside the scope, it returns to a normal web page inside a browser
-          tab/window.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>theme_color</strong></code> (recommended)</td>
-        <td>
-          The default theme color for an application. This affects how the OS
-          displays the site. <br>
-          <ol>
-            <li>
-              On Android's task switcher, the theme color surrounds the site.
-            </li>
-            <li>On desktop, the theme color is used to style the title bar.</li>
-          </ol>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-          Dicta nam possimus doloribus minima repellendus!
-          <ul>
-            <li>
-              On Android's task switcher, the theme color surrounds the site.
-            </li>
-            <li>On desktop, the theme color is used to style the title bar.</li>
-          </ul>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/site/content/en/handbook/sandbox/typography/index.njk b/src/site/content/en/handbook/sandbox/typography/index.njk
deleted file mode 100644
index d72933ad947..00000000000
--- a/src/site/content/en/handbook/sandbox/typography/index.njk
+++ /dev/null
@@ -1,119 +0,0 @@
----
-permalink: false
-layout: sandbox/container
-title: typography
-tags:
-  - sandbox
----
-<h1>
-  Headline one<br />
-  with line break
-</h1>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vitae
-  libero distinctio sint culpa neque quidem earum sunt aliquid! Autem
-  magnam quo aspernatur! Assumenda enim magnam aperiam. Minus, cum
-  dolore.
-</p>
-
-<h2 class="w-headline--two">
-  Headline two<br />
-  with line break
-</h2>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vitae
-  libero distinctio sint culpa neque quidem earum sunt aliquid! Autem
-  magnam quo aspernatur! Assumenda enim magnam aperiam. Minus, cum
-  dolore.
-</p>
-
-<h2>
-  Headline two (small)<br />
-  with line break
-</h2>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vitae
-  libero distinctio sint culpa neque quidem earum sunt aliquid! Autem
-  magnam quo aspernatur! Assumenda enim magnam aperiam. Minus, cum
-  dolore.
-</p>
-
-<h3>
-  Headline three<br />
-  with line break
-</h3>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vitae
-  libero distinctio sint culpa neque quidem earum sunt aliquid! Autem
-  magnam quo aspernatur! Assumenda enim magnam aperiam. Minus, cum
-  dolore.
-</p>
-
-<h4>
-  Headline four<br />
-  with line break
-</h4>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vitae
-  libero distinctio sint culpa neque quidem earum sunt aliquid! Autem
-  magnam quo aspernatur! Assumenda enim magnam aperiam. Minus, cum
-  dolore.
-</p>
-
-<p>
-  Body copy that includes a line break<br />
-  and <strong>bold</strong>, <em>italic</em>, and
-  <a href="#">embedded link</a> inline styles.<br />
-  Used mostly for blog posts and guides.
-</p>
-
-<hr />
-
-<p class="w-headline w-headline--one">
-  Paragraph with .w-headline--one<br />
-  with line break
-</p>
-
-<p class="w-headline w-headline--two">
-  Paragraph with .w-headline--two<br />
-  with line break
-</p>
-
-<p class="w-headline w-headline--two-small">
-    Paragraph with .w-headline--two-small<br />
-    with line break
-  </p>
-
-<p class="w-headline w-headline--three">
-  Paragraph with .w-headline--three<br />
-  with line break
-</p>
-
-<p class="w-headline w-headline--four">
-  Paragraph with .w-headline--four<br />
-  with line break
-</p>
-
-<hr />
-
-<!-- default style tests -->
-
-<p>Paragraph</p>
-
-<ul>
-  <li>Unordered list</li>
-  <li>
-    That includes
-    <ul>
-      <li>A sublist</li>
-      <li>Inside it</li>
-    </ul>
-  </li>
-  <li>And bullets</li>
-</ul>
-
-<ol>
-  <li>Ordered list</li>
-  <li>With bullets</li>
-  <li>And numbers</li>
-</ol>
\ No newline at end of file
diff --git a/src/site/content/en/handbook/sandbox/youtube/index.md b/src/site/content/en/handbook/sandbox/youtube/index.md
deleted file mode 100644
index 96b14eb4a13..00000000000
--- a/src/site/content/en/handbook/sandbox/youtube/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-permalink: false
-layout: sandbox/article
-title: youtube
-tags:
-  - sandbox
----
-
-<figure class="w-figure w-figure--fullbleed">
-  {% YouTube 'ViyTYEv9dM8' %}
-</figure>
-
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam repellendus,
-doloremque cum odit blanditiis voluptas deserunt dolore soluta facilis alias est
-nam sint animi provident enim temporibus inventore, laudantium quam.
-
-{% YouTube 'Ai4aZ9Jbsys', '1081' %}
\ No newline at end of file
diff --git a/src/site/content/en/handbook/self-assessment-components/bigbird.jpg b/src/site/content/en/handbook/self-assessment-components/bigbird.jpg
deleted file mode 100644
index 3574390297f..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/bigbird.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/self-assessment-components/composite.assess.yml b/src/site/content/en/handbook/self-assessment-components/composite.assess.yml
new file mode 100644
index 00000000000..1aa08f38e1a
--- /dev/null
+++ b/src/site/content/en/handbook/self-assessment-components/composite.assess.yml
@@ -0,0 +1,30 @@
+setLeader: Test your knowledge of web.dev
+height: unset
+tabLabel: question
+questions:
+  - stimulus: "![Webby](image/admin/Iz4mJkLrJrLk9Ntem871.png)"
+    components:
+      - type: multiple-choice
+        cardinality: "1"
+        correctAnswers: "1"
+        stem: Who's this Webby I've heard so much about?
+        options:
+          - content: A sentient system icon run amok
+            rationale: Like this helpful little being would ever go amok.
+          - content: The best darn mascot you could hope for
+            rationale: Webby is _everything_.
+          - content: Spiderman's lesser known sidekick
+            rationale: |
+              I really don't see Webby swinging around
+              on those small (but _adorable_) arms.
+      - type: multiple-choice
+        cardinality: "1"
+        correctAnswers: "2"
+        stem: How awesome is Webby?
+        options:
+          - content: Pretty awesome
+            rationale: Nope.
+          - content: The awesomest
+            rationale: Close but no.
+          - content: OMG 🤯
+            rationale: It was always you, Webby.
diff --git a/src/site/content/en/handbook/self-assessment-components/cookiemonster.jpg b/src/site/content/en/handbook/self-assessment-components/cookiemonster.jpg
deleted file mode 100644
index 502412ecc83..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/cookiemonster.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/self-assessment-components/elmo.jpg b/src/site/content/en/handbook/self-assessment-components/elmo.jpg
deleted file mode 100644
index ee0e649cb8a..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/elmo.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/self-assessment-components/ernie.jpg b/src/site/content/en/handbook/self-assessment-components/ernie.jpg
deleted file mode 100644
index dd6d6f20a7b..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/ernie.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/self-assessment-components/grover.jpg b/src/site/content/en/handbook/self-assessment-components/grover.jpg
deleted file mode 100644
index 1d5936ab86b..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/grover.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/self-assessment-components/index.md b/src/site/content/en/handbook/self-assessment-components/index.md
index 0705e1d93c9..cbba2e3a521 100644
--- a/src/site/content/en/handbook/self-assessment-components/index.md
+++ b/src/site/content/en/handbook/self-assessment-components/index.md
@@ -9,23 +9,28 @@ description: |
 Self-assessments provide opportunities for users
 to check their understanding of concepts covered in your post.
 
-{% Assessment page, 'self-assessment' %}
+{% Assessment 'self-assessment' %}
 
 1. [Start a self-assessment](#start-a-self-assessment)
-1. [Question set parameters](#question-set-parameters)
-1. [Question anatomy and parameters](#question-anatomy-and-parameters)
 1. [Response types](#response-types)
     - [Multiple-choice](#multiple-choice)
     - [Think-and-checks](#think-and-checks)
     - [Composite questions](#composite-questions)
+1. [Question set parameters](#question-set-parameters)
+1. [Question anatomy and parameters](#question-anatomy-and-parameters)
 1. [Multiple sets in one post](#multiple-sets-in-one-post)
+1. [Example assessment](#example-assessment)
+1. [API](#api)
+    - [TargetAssessment](#targetassessment)
+    - [TargetAssessmentQuestion](#targetassessmentquestion)
+    - [TargetAssessmentOption](#targetassessmentoption)
 
 ## Start a self-assessment
 
 To include a self-assessment in your post:
-1. Add this short code to your post where you want the self-assessment to appear:
+1. Add this shortcode to your post where you want the self-assessment to appear:
     ```html
-    {% raw %}{% Assessment page, 'my-first-self-assessment' %}{% endraw %}
+    {% raw %}{% Assessment 'my-first-self-assessment' %}{% endraw %}
     ```
 1. Copy `my-first-self-assessment.assess.yml` in `src/site/_drafts/_template-self-assessment`
    to your post's directory.
@@ -35,6 +40,89 @@ To include a self-assessment in your post:
 1. Using the YAML template as a starting point,
    follow the instructions below to create your question set.
 
+## Response types
+
+### Multiple-choice
+The multiple-choice response type lets users respond to a question
+by selecting from an array of options,
+which can include MarkDown or images.
+(But not both! Overstuffing your options can make them artificially hard.)
+
+{% Aside 'warning' %}
+To help ensure that users understand what selecting an option will do,
+don't include links or any other interactive elements in a multiple-choice option.
+{% endAside %}
+
+{% Details %}
+
+{% DetailsSummary 'h4' %}
+multiple-choice.assess.yml
+{% endDetailsSummary %}
+
+```yml
+{% include './multiple-choice.assess.yml' %}
+```
+
+{% endDetails %}
+
+{% Assessment 'multiple-choice' %}
+
+### Think-and-checks
+Think-and-checks let you present a stimulus of some kind
+(for example, a code sample) and ask a question about it.
+Users can formulate a mental response and then check it.
+
+Since think-and-checks don't have any options to submit,
+there's no need to provide `cardinality` or `correctAnswers` keys.
+
+{% Aside 'caution' %}
+Since think-and-checks don't provide a way for users to select
+and validate an actual response,
+it's generally better to use any other [response type](#response-types) instead.
+{% endAside %}
+
+{% Details %}
+
+{% DetailsSummary 'h4' %}
+think-and-check.assess.yml
+{% endDetailsSummary %}
+
+```yml
+{% include './think-and-check.assess.yml' %}
+```
+
+{% endDetails %}
+
+{% Assessment 'think-and-check' %}
+
+### Composite questions
+You can include more than one response component in a single question.
+
+To do that, add a `components` key to the question object
+and then include all question data _except_ the stimulus in each component object.
+(Each question can have only one stimulus.)
+
+{% Aside 'caution' %}
+Use composite questions judiciously.
+The more response components there are, the harder the question is.
+It's better to break up a multi-part question into separate questions
+unless the parts are truly interdependent.
+{% endAside %}
+
+{% Details %}
+
+{% DetailsSummary 'h4' %}
+composite.assess.yml
+{% endDetailsSummary %}
+
+```yml
+{% include './composite.assess.yml' %}
+```
+
+{% endDetails %}
+
+{% Assessment 'composite' %}
+
 ## Question set parameters
 
 ### Set leader
@@ -150,77 +238,6 @@ For image options,
 see which layout best balances legibility and screen real estate.
 {% endAside %}
 
-## Response types
-
-### Multiple-choice
-The multiple-choice response type lets users respond to a question
-by selecting from an array of options,
-which can include MarkDown or images.
-(But not both! Overstuffing your options can make them artificially hard.)
-
-{% Aside 'warning' %}
-To help ensure that users understand what selecting an option will do,
-don't include links or any other interactive elements in a multiple-choice option.
-{% endAside %}
-
-### Think-and-checks
-Think-and-checks let you present a stimulus of some kind
-(for example, a code sample) and ask a question about it.
-Users can formulate a mental response and then check it.
-
-Since think-and-checks don't have any options to submit,
-there's no need to provide `cardinality` or `correctAnswers` keys.
-
-{% Aside 'caution' %}
-Since think-and-checks don't provide a way for users to select
-and validate an actual response,
-it's generally better to use any other [response type](#response-types) instead.
-{% endAside %}
-
-### Composite questions
-You can include more than one response component in a single question.
-
-To do that, add a `components` key to the question object
-and then include all question data _except_ the stimulus in each component object.
-(Each question can have only one stimulus.)
-
-Here's an example:
-```yaml
-- stimulus: "![Webby](./webby.png)"
-  components:
-    - type: multiple-choice
-      cardinality: "1"
-      correctAnswers: "1"
-      stem: Who's this Webby I've heard so much about?
-      options:
-        - content: A sentient system icon run amok
-          rationale: Like this helpful little being would ever go amok.
-        - content: The best darn mascot you could hope for
-          rationale: Webby is _everything_.
-        - content: Spiderman's lesser known sidekick
-          rationale: |
-            I really don't see Webby swinging around
-            on those small (but _adorable_) arms.
-    - type: multiple-choice
-      cardinality: "1"
-      correctAnswers: "2"
-      stem: How awesome is Webby?
-      options:
-        - content: Pretty awesome
-          rationale: Nope.
-        - content: The awesomest
-          rationale: Close but no.
-        - content: OMG 🤯
-          rationale: It was always you, Webby.
-```
-
-{% Aside 'caution' %}
-Use composite questions judiciously.
-The more response components there are, the harder the question is.
-It's better to break up a multi-part question into separate questions
-unless the parts are truly interdependent.
-{% endAside %}
-
 ## Multiple sets in one post
 To include another set in your post,
 create a second `*.assess.yml` file and
@@ -229,6 +246,25 @@ You can add as many assessments as you want as long as each has a unique name.
 For example:
 
 ```html
-{% raw %}{% Assessment page, 'first-assessment' %}
-{% Assessment page, 'second-assessment' %}{% endraw %}
+{% raw %}{% Assessment 'first-assessment' %}
+{% Assessment 'second-assessment' %}{% endraw %}
+```
+
+## API
+
+The `*.assess.yml` file can be broken down into the following types:
+
+### TargetAssessment
+```typescript
+{% include '../../../../../../types/site/_includes/components/Assessment/TargetAssessment.d.ts' %}
+```
+
+### TargetAssessmentQuestion
+```typescript
+{% include '../../../../../../types/site/_includes/components/Assessment/TargetAssessmentQuestion.d.ts' %}
+```
+
+### TargetAssessmentOption
+```typescript
+{% include '../../../../../../types/site/_includes/components/Assessment/TargetAssessmentOption.d.ts' %}
 ```
diff --git a/src/site/content/en/handbook/self-assessment-components/multiple-choice.assess.yml b/src/site/content/en/handbook/self-assessment-components/multiple-choice.assess.yml
new file mode 100644
index 00000000000..4422e291c35
--- /dev/null
+++ b/src/site/content/en/handbook/self-assessment-components/multiple-choice.assess.yml
@@ -0,0 +1,27 @@
+setLeader: Test your knowledge of resource optimization
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: When is it appropriate to lazy load an image?
+    options:
+      - content: When the image is offscreen during initial page load.
+        rationale: |
+          Images that are offscreen during page load aren't initially needed
+          and so can be lazy loaded to improve performance.
+      - content: When the image is a PNG or JPG.
+        rationale: |
+          Improve performance by lazy loading all images—not just PNGs and
+          JPGs—that aren't needed when the page loads.
+      - content: When the image has a `lazyload` class.
+        rationale: |
+          The `lazyload` class is something _you_ add to tell
+          lazysizes which images to lazy load.
+          You can't use the class to determine
+          which images you _should_ lazy load.
+      - content: When the image is larger than 10&nbsp;KB.
+        rationale: |
+          Lazy load any image that may improve performance
+          without hurting user experience, regardless of how big the file is.
diff --git a/src/site/content/en/handbook/self-assessment-components/self-assessment.assess.yml b/src/site/content/en/handbook/self-assessment-components/self-assessment.assess.yml
index 7cb64f8c400..1c35b54acef 100644
--- a/src/site/content/en/handbook/self-assessment-components/self-assessment.assess.yml
+++ b/src/site/content/en/handbook/self-assessment-components/self-assessment.assess.yml
@@ -83,19 +83,19 @@ questions:
     stem: "Which **two** Sesame Street muppets are clearly the best?"
     columns: true
     options:
-      - content: "![Elmo](./elmo.jpg)"
+      - content: "![Elmo](image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ng9hB0jbzGXy0MY7upMU.jpg)"
         rationale: Don't give a second thought to this tickle-me-come-lately.
-      - content: "![Ernie](./ernie.jpg)"
+      - content: "![Ernie](image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IzcniCVLaW1yV8ijjcoI.jpg)"
         rationale: I mean, c'mon. He's Ernie. I don't know🤷
-      - content: "![Cookie Monster](./cookiemonster.jpg)"
+      - content: "![Cookie Monster](image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ssj8YAsZcZfLHA6RVTQb.jpg)"
         rationale: |
           "[A cookie is a sometimes food](https://youtu.be/PaHkwE7TaNg)"?
           I remember when you had integrity.
-      - content: "![Big Bird](./bigbird.jpg)"
+      - content: "![Big Bird](image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uo1ZxzUbYfqtZCPzdCYF.jpg)"
         rationale: Laying it on kinda thick with the wide-eyed childlike wonder, no?
-      - content: "![Grover](./grover.jpg)"
+      - content: "![Grover](image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9gSbQKP405CVxOyD3Q0w.jpg)"
         rationale: The OG monster. Never forget it.
-  - stimulus: "![Webby](./webby.png)"
+  - stimulus: "![Webby](image/admin/Iz4mJkLrJrLk9Ntem871.png)"
     components:
       - type: multiple-choice
         cardinality: "1"
diff --git a/src/site/content/en/handbook/self-assessment-components/think-and-check.assess.yml b/src/site/content/en/handbook/self-assessment-components/think-and-check.assess.yml
new file mode 100644
index 00000000000..15e9846eb47
--- /dev/null
+++ b/src/site/content/en/handbook/self-assessment-components/think-and-check.assess.yml
@@ -0,0 +1,49 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: question
+questions:
+  - type: think-and-check
+    stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - type: think-and-check
+    stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
diff --git a/src/site/content/en/handbook/self-assessment-components/webby.png b/src/site/content/en/handbook/self-assessment-components/webby.png
deleted file mode 100644
index acc48dda318..00000000000
Binary files a/src/site/content/en/handbook/self-assessment-components/webby.png and /dev/null differ
diff --git a/src/site/content/en/handbook/tooling-and-libraries/index.md b/src/site/content/en/handbook/tooling-and-libraries/index.md
index 29b7688a6c4..5cc44b2671e 100644
--- a/src/site/content/en/handbook/tooling-and-libraries/index.md
+++ b/src/site/content/en/handbook/tooling-and-libraries/index.md
@@ -20,6 +20,6 @@ When you're planning to include tooling in a post or codelab, make sure it meets
 *   **[HTTP Archive](https://httparchive.org) data:** Tooling is used by ≥ 10K domains.
 *   **[npm](https://www.npmjs.com/) weekly download statistics:** Tooling consistently has ≥ 50K weekly downloads.
 
-Include a link to the relevant data source in your [content proposal](http://localhost:8080/handbook/quick-start/#planning).
+Include a link to the relevant data source in your [content proposal](/handbook/quick-start/#planning).
 
 Sometimes it's impossible to use these data sources to verify the popularity of a given tool. (For example, if you're writing an article about servers, neither data source can be used to verify the usage of [NGINX](https://www.nginx.com/).) In such cases you can demonstrate the popularity of a tool in your content proposal by listing 5–10 well-known sites that have self-identified as users.
diff --git a/src/site/content/en/handbook/use-media/index.md b/src/site/content/en/handbook/use-media/index.md
index e3d4273c973..f3aa53a9a70 100644
--- a/src/site/content/en/handbook/use-media/index.md
+++ b/src/site/content/en/handbook/use-media/index.md
@@ -2,13 +2,15 @@
 layout: handbook
 title: Use images and video effectively
 date: 2019-06-26
+updated: 2022-05-02
 description: |
-  Strategies for using images and video to support the author's purpose on web.dev.
+  Use images and video to support the author's purpose on web.dev.
 ---
 
 This post is about how to use images and video to support your writing goals. If you're looking for technical details about how to create images and video for web.dev, see the [Images and video](/handbook/markup-media) post.
 
 There are three types of images associated with a web.dev post:
+
 * The **thumbnail image** appears in a post's card if the post is added to the [Blog](/blog) page.
 * The **hero image** appears at the start of a post.
 * **Body images** appear in the text of a post or codelab.
@@ -16,29 +18,35 @@ There are three types of images associated with a web.dev post:
 All images should be [accessible](/handbook/inclusion-and-accessibility#use-inclusive-images).
 
 ## Thumbnail and hero images
+
 To maintain continuity between the blog page and the post page, the thumbnail image should generally be the same as the hero image. In some cases, it may be necessary to crop the two images differently or shift some visual elements to account for the different aspect ratios of the thumbnail and hero images.
 
 Thumbnail and hero images should represent the main idea of the post in some way. It often works well to find a visual metaphor. For example, a [post about the Layout Instability API](/layout-instability-api) uses an image of a precariously balanced tower of rocks to suggest the fragile layouts that the API detects.
 
-Take a look at the [Stock photos that don't suck](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) post on Medium for a list of sites that offer public domain or Creative Commons-licensed images.
+Take a look at [Stock photos that don't suck](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) for a list of sites that offer public domain or Creative Commons-licensed images.
 
 ## Body images
+
 Body images should be related to body content in some way. Typically, an image illustrates an idea that immediately precedes it in the text of the post or codelab. Avoid including a body image just to break up text. Just as irrelevant text can be confusing, so too can an irrelevant image, especially for readers with cognitive differences.
 
-## Image captions
-Captions should be in sentence case. End all captions with a period.
+## Image captions and alt text
+
+Read the [Google developer documentation style guide](https://developers.google.com/style/images#alt-text).
+Captions should be in sentence case. End all captions and alt text with a period.
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
-A Screenshot of the DevTools **Network** Panel
+A Screenshot Showing the DevTools **Network** Panel
 {% endCompare %}
 
 {% Compare 'better' %}
-A screenshot of the DevTools **Network** panel.
+The DevTools **Network** panel.
 {% endCompare %}
 </div>
 
-A caption should typically be a noun phrase describing the image or a sentence summarizing the idea the image is showing. Examples:
+Captions and alt text should not start with "An image of" or "A screenshot of." Instead, it should typically be
+a noun phrase describing the image or a sentence summarizing the idea the image is showing. Examples:
+
 * _DevTools accessibility pane showing the computed name for a button._
 * _A teapot's handle is a natural affordance._
 
@@ -47,11 +55,13 @@ Not all images need captions. If there's a preceding sentence describing the ima
 {% Compare 'better', 'OK' %}
 Let's look at a web app that uses JavaScript to render a collection of cat images entirely in the browser:
 
-![Image of a code sample next to the mobile site that it renders.](spa-kittens.png)
+{% Img src="image/admin/tdiMrqek791ayJmw72di.png", alt="Image of a code sample next to the mobile site that it renders.", width="800", height="447" %}
 {% endCompare %}
 
 ## Video
+
 Video has some tradeoffs that are worth considering when deciding whether to use it:
+
 * Video is highly engaging.
 * Video is generally much better than images for showing things that change over time.
 * Video files are comparatively big.
@@ -59,5 +69,6 @@ Video has some tradeoffs that are worth considering when deciding whether to use
 * Beyond simple screencasts, producing videos requires a fair amount of effort.
 
 Taking these tradeoffs into account, try to use video primarily when:
+
 * You need to show something moving or changing
 * You need to show a recording of an event (e.g., a conference talk)
diff --git a/src/site/content/en/handbook/use-media/spa-kittens.png b/src/site/content/en/handbook/use-media/spa-kittens.png
deleted file mode 100644
index defaa32b78e..00000000000
Binary files a/src/site/content/en/handbook/use-media/spa-kittens.png and /dev/null differ
diff --git a/src/site/content/en/handbook/web-dev-components/image-screenshot.png b/src/site/content/en/handbook/web-dev-components/image-screenshot.png
deleted file mode 100644
index 5d785974ea1..00000000000
Binary files a/src/site/content/en/handbook/web-dev-components/image-screenshot.png and /dev/null differ
diff --git a/src/site/content/en/handbook/web-dev-components/image-small.png b/src/site/content/en/handbook/web-dev-components/image-small.png
deleted file mode 100644
index 69bedd75087..00000000000
Binary files a/src/site/content/en/handbook/web-dev-components/image-small.png and /dev/null differ
diff --git a/src/site/content/en/handbook/web-dev-components/index.md b/src/site/content/en/handbook/web-dev-components/index.md
index 814b055a6ef..7139361b8d2 100644
--- a/src/site/content/en/handbook/web-dev-components/index.md
+++ b/src/site/content/en/handbook/web-dev-components/index.md
@@ -2,7 +2,7 @@
 layout: handbook
 title: web.dev components
 date: 2019-06-26
-updated: 2020-07-17
+updated: 2022-01-18
 description: |
   Learn how to use web.dev's UI and content components.
 ---
@@ -11,17 +11,20 @@ The web.dev platform includes various components to make it easy for content
 contributors to include common content features, like videos, side-by-side
 comparisons, and asides.
 
-This post shows sample markup for each of web.dev's content components and provides
-guidance about how to use them effectively.
+This post shows sample markup for each of web.dev's content components and
+provides guidance about how to use them effectively.
 
 ## Component types
 
 1. [Asides](#asides)
 1. [Banners](#banners)
-1. [Block quotes](#blockquotes)
+1. [Block quotes](#block-quotes)
+1. [Browser Compatibility](#browsercompat)
 1. [Buttons](#buttons)
 1. [Callouts](#callouts)
 1. [Checkbox](#checkbox)
+1. [Code pattern](#codepattern)
+1. [Codepen](#codepen)
 1. [Columns](#columns)
 1. [Code](#code)
 1. [Compare](#compare)
@@ -33,10 +36,13 @@ guidance about how to use them effectively.
 1. [Lists](#lists)
 1. [Stats](#stats)
 1. [Tables](#tables)
+1. [Tabs](#tabs)
 1. [Tooltips](#tooltips)
 1. [Video](#video)
 
+
 ## Asides
+
 Use asides to provide information that's related to but distinct from the
 content in the body of the post or codelab. Asides should generally be short—no
 more than 2–3 lines.
@@ -95,6 +101,18 @@ Use the success aside to describe a successful action or an error-free status.
 Use the success aside to describe a successful action or an error-free status.
 {% endAside %}
 
+### Celebration asides
+
+```text
+{% raw %}&#123;% Aside 'celebration' %&#125;
+Use the celebration aside to celebrate events like a cross-browser launch.
+&#123;% endAside %&#125;{% endraw %}
+```
+
+{% Aside 'celebration' %}
+Use the celebration aside to celebrate events like a cross-browser launch.
+{% endAside %}
+
 ### Objective asides
 
 ```text
@@ -109,17 +127,17 @@ Use the objective aside to define the goal of a process described in the body
 copy.
 {% endAside %}
 
-### Gotcha asides
+### Important asides
 
 ```text
-{% raw %}&#123;% Aside 'gotchas' %&#125;
-Use the gotcha aside to indicate a common problem that the reader wouldn't know
+{% raw %}&#123;% Aside 'important' %&#125;
+Use the important aside to indicate a common problem that the reader wouldn't know
 without specialized knowledge of the topic.
 &#123;% endAside %&#125;{% endraw %}
 ```
 
-{% Aside 'gotchas' %}
-Use the gotcha aside to indicate a common problem that the reader wouldn't know
+{% Aside 'important' %}
+Use the important aside to indicate a common problem that the reader wouldn't know
 without specialized knowledge of the topic.
 {% endAside %}
 
@@ -151,6 +169,20 @@ Use the codelab aside to link to an associated codelab.
   [Using Imagemin with Grunt](#)
 {% endAside %}
 
+### Update asides
+
+```text
+{% raw %}&#123;% Aside 'update' %&#125;
+Use the update aside in select cases where updates concerning a developing 
+situation around a certain API or metric can be effectively communicated.
+&#123;% endAside %&#125;{% endraw %}
+```
+
+{% Aside 'update' %}
+Use the update aside in select cases where updates concerning a developing 
+situation around a certain API or metric can be effectively communicated.
+{% endAside %}
+
 ## Banners
 
 ### Default banners
@@ -159,7 +191,7 @@ Default banners can be added to site templates (for example, landing pages)
 to provide timely information to users (for example, an alert about an
 upcoming conference).
 Don't use default banners in the body of a post;
-instead, use the body variant, below.
+instead, use the Aside component.
 
 ```text
 {% raw %}{% Banner %}This is an info banner. It supports Markdown.{% endBanner %}{% endraw %}
@@ -180,25 +212,15 @@ instead, use the body variant, below.
 {% Banner 'warning' %}This is a warning banner. It supports Markdown.{% endBanner %}
 
 ```text
-{% raw %}{% Banner 'neutral' %}This is a neutral banner, used to display a discreet suggestion for the user. It supports Markdown.{% endBanner %}{% endraw %}
-```
-
-{% Banner 'neutral' %}This is a neutral banner. It supports Markdown.{% endBanner %}
-
-### Body banners
-
-```text
-{% raw %}{% Banner 'info', 'body' %}This is an info banner that's used in the body of a post. It has less padding and larger text.{% endBanner %}{% endraw %}
+{% raw %}{% Banner %}This is a neutral banner, used to display a discreet suggestion for the user. It supports Markdown.{% endBanner %}{% endraw %}
 ```
 
-{% Banner 'info', 'body' %}This is an info banner that's used in the body of a post. It has less padding and larger text.{% endBanner %}
+{% Banner %}This is a neutral banner. It supports Markdown.{% endBanner %}
 
 ## Block quotes
-Use block quotes to emphasize a quotation that's important to
-the main idea of a post. (For example, in a case study you might include
-a quotation from someone on the partner organization's management team.)
 
-Always include a `<cite>` element indicating the quote's source
+To include quotation in the body of an article, use `<blockquote>` tag.
+You can include a `<cite>` element indicating the quote's source
 at the end of a block quote:
 
 ```html
@@ -213,6 +235,8 @@ at the end of a block quote:
 </blockquote>
 ```
 
+You can also use a shortcode:
+
 ```html
 {% raw %}{% Blockquote 'Jon Doe' %}
 [Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
@@ -220,43 +244,111 @@ a massa sit amet ullamcorper.
 {% endBlockquote %}{% endraw %}
 ```
 
-{% Blockquote 'Jon Doe' %}
+<blockquote>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Proin dictum a massa sit amet ullamcorper.
+  </p>
+  <cite>
+    Jon Doe
+  </cite>
+</blockquote>
+
+To embed a [pull quote](https://en.wikipedia.org/wiki/Pull_quote) in an article,
+to emphasize a piece of text or a quote, you can use `pullquote` class:
+
+```html
+<blockquote data-type="pullquote">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Proin dictum a massa sit amet ullamcorper.
+  </p>
+  <cite>
+    Jon Doe
+  </cite>
+</blockquote>
+```
+
+<blockquote data-type="pullquote">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Proin dictum a massa sit amet ullamcorper.</p>
+  <cite>Jon Doe</cite>
+</blockquote>
+
+You can also use a shortcode with a `pullquote` attribute:
+
+```html
+{% raw %}{% Blockquote 'Jon Doe', 'pullquote' %}
+[Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
+a massa sit amet ullamcorper.
+{% endBlockquote %}{% endraw %}
+```
+
+{% Blockquote 'Jon Doe', 'pullquote' %}
 [Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
 a massa sit amet ullamcorper.
 {% endBlockquote %}
 
+## Browser compatibility table {: #browsercompat }
+
+With the `BrowserCompat` shortcode, you can embed an
+[MDN - Browser Compatibility Data](https://github.com/mdn/browser-compat-data/)
+widget in your post. You have to pass in the dot-separated feature ID,
+as used on [BCD Schema](https://github.com/mdn/browser-compat-data), e.g. for
+[Web/API/BackgroundFetchEvent](https://developer.mozilla.org/docs/Web/API/BackgroundFetchEvent)
+the ID is `api.BackgroundFetchEvent`.
+
+```text
+{% raw %}{% BrowserCompat 'api.BackgroundFetchEvent' %}{% endraw %}
+```
+
+{% BrowserCompat 'api.BackgroundFetchEvent' %}
+
+The widget will use 🗑 symbols to represent features that are deprecated:
+
+{% BrowserCompat 'api.Document.execCommand' %}
+
+The following JavaScript snippet, run from the DevTools console, will display the correct ID for a given MDN page that's currently open:
+
+```js
+window.alert(document.querySelector(".bc-github-link")?.href.match(/title=(.+?)\+/)[1] ?? "No browser compat widget found on the page.")
+```
+
 ## Buttons
 
 In general, you shouldn't need to add buttons to your posts.
 These buttons are shown for reference.
 
+[Detailed specification](/design-system/component/button/)
+
 ### Text buttons
 
 <div>
-  <button class="w-button">
+  <button class="button">
     Text button
   </button>
-  <button class="w-button w-button--with-icon" data-icon="file_download">
+  <button class="button">
+    {% include "icons/" ~ 'plus.svg' %}
     Text button with icon
   </button>
 </div>
-<br>
 
 <div>
-  <button class="w-button w-button--primary">
+  <button class="button" data-type="primary">
     Primary button
   </button>
-  <button class="w-button w-button--primary w-button--with-icon" data-icon="file_download">
+  <button class="button" data-type="primary">
+    {% include "icons/" ~ 'plus.svg' %}
     Primary button with icon
   </button>
 </div>
-<br>
 
 <div>
-  <button class="w-button w-button--secondary">
+  <button class="button" data-type="secondary">
     Secondary button
   </button>
-  <button class="w-button w-button--secondary w-button--with-icon" data-icon="file_download">
+  <button class="button" data-type="secondary">
+    {% include "icons/" ~ 'plus.svg' %}
     Secondary button with icon
   </button>
 </div>
@@ -265,21 +357,20 @@ These buttons are shown for reference.
 
 A default icon button:
 
+[Detailed specification](/design-system/component/icon-button/)
+
 <div>
-  <button class="w-button--icon" data-icon="format_align_justify">
-    <span role="tooltip" class="w-tooltip">
-      Justify
-    </span>
+  <button class="icon-button" aria-label="Close">
+    {% include "icons/close.svg" %}
   </button>
 </div>
 
-A round icon button:
+An icon button with tooltip:
 
 <div>
-  <button class="w-button--icon w-button--round" data-icon="close">
-    <span role="tooltip" class="w-tooltip">
-      Close
-    </span>
+  <button class="icon-button tooltip" aria-labelledby="icon-button-toolip">
+    {% include "icons/close.svg" %}
+    <span class="tooltip__content" id="icon-button-toolip">Close</span>
   </button>
 </div>
 
@@ -300,64 +391,117 @@ See the [Self-assessments](/handbook/self-assessment-components) post.
 
 ## Checkbox
 
-The [Newsletter](/newsletter) page uses a new material styled checkbox.
-You can use it simply and easily by just adding the class `w-chechbox`
-to an `input[type=checkbox]` element. However to align a label to to the
-checkbox you'll want to wrap the label and checkbox in a `div.w-display--inline-flex`
-element, and add the `w-ml--l` class to the label. See below:
+To align a label to the checkbox wrap the label and checkbox in an element with
+a `cluster gutter-base flex-align-start` class.
 
-<div class="w-display--inline-flex">
-  <input id="sub-newsletter" name="WebDevNewsletter" required value="Unconfirmed" class="w-checkbox" type="checkbox" />
-  <label for="sub-newsletter" class="w-ml--l">Add me to the web.dev mailing list.</label>
-</div>
+[Detailed specification](/design-system/component/form-fields/#checkbox)
 
 ```html
-<div class="w-display--inline-flex">
-  <input id="sub-newsletter" name="WebDevNewsletter" required value="Unconfirmed" class="w-checkbox" type="checkbox" />
-  <label for="sub-newsletter" class="w-ml--l">Add me to the web.dev mailing list.</label>
+<div class="cluster gutter-base flex-align-start">
+  <input id="myCheckbox" type="checkbox" />
+  <label for="myCheckbox">Lorem ipsum dolor sit amet</label>
+</div>
+```
+
+<div class="cluster gutter-base flex-align-start">
+  <input id="myCheckbox" type="checkbox" />
+  <label for="myCheckbox">Lorem ipsum dolor sit amet</label>
 </div>
+
+## Code pattern {: #codepattern }
+
+A component that displays a demo and code snippets side by side,
+organized in tabs.
+
+Component height is determined by the code snippet with the most
+code lines.
+
+To change the component height, specify the height value in pixels
+in the shortcode.
+
+```text
+{% raw %}{% CodePattern 'pattern-id', optional-height-in-px %}{% endraw %}
+```
+
+{% CodePattern 'example-set/example-pattern', 500 %}
+
+You can embed one of the existing patterns (from `/content/en/patterns/`
+directory) or add a new one. Check out the
+[examples and documentation](/patterns/example-set/) on how to write new
+code patterns.
+
+
+## Codepen {: #codepen }
+
+If you don't want to use your personal account, you can use the
+**web-dev-codepen-external** account to create a Codepen. Speak to a member of
+the tech writing team to get access to the login and password.
+
+```md
+{% raw %}{% Codepen {
+  user: 'robdodson',
+  id: 'GRroyyX',
+  height: 300,
+  theme: 'dark',
+  tab: 'css,result',
+  allow: ['geolocation']
+} %}{% endraw %}
+```
+
+{% Codepen {
+  user: 'robdodson',
+  id: 'GRroyyX',
+  height: 300,
+  theme: 'dark',
+  tab: 'css,result',
+  allow: ['geolocation']
+} %}
+
+```typescript
+{% include '../../../../../../types/site/_includes/components/Codepen.d.ts' %}
 ```
 
 ## Columns
 
 Any elements can be placed in a two-column layout
-by wrapping them in a `<div class="w-columns">` element:
+by wrapping them in a `<div class="switcher">` element.
+At smaller viewport sizes,
+elements in a two-column layout will shift to a stacked arrangement.
+
+[Detailed specification](/design-system/css-compositions/#switcher)
 
 ```html
-<div class="w-columns">
-  <figure class="w-figure">
+<div class="switcher">
+  <figure>
     <img src="./image-small.png" alt="">
-    <figcaption class="w-figcaption">
+    <figcaption>
       Small image.
     </figcaption>
   </figure>
-  <figure class="w-figure">
+  <figure>
     <img src="./image-small.png" alt="">
-    <figcaption class="w-figcaption">
+    <figcaption>
       Small image.
     </figcaption>
   </figure>
 </div>
 ```
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="./image-small.png" alt="">
-    <figcaption class="w-figcaption">
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}
+    <figcaption>
       Small image.
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="./image-small.png" alt="">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}
+    <figcaption>
       Small image.
     </figcaption>
   </figure>
 </div>
 
-At smaller viewport sizes,
-elements in a two-column layout will shift to a stacked arrangement.
-
 ## Code
 
 See the [Code](/handbook/markup-code) post.
@@ -469,7 +613,7 @@ at.
 ### Compare in columns
 
 ````html
-<div class="w-columns">
+<div class="switcher">
 {% raw %}{% Compare 'worse' %}
 ```text
 Bad code example
@@ -494,7 +638,7 @@ Explanation of why `example` is good.
 </div>
 ````
 
-<div class="w-columns">
+<div class="switcher">
 {% Compare 'worse' %}
 ```text
 Bad code example
@@ -526,6 +670,7 @@ assumenda perspiciatis.
 ## Details
 
 ### Basic details component
+
 ```text
 {% raw %}&#123;% Details %&#125;
 
@@ -552,6 +697,7 @@ at.
 {% endDetails %}
 
 ### Details component with preview
+
 ```text/4-5
 {% raw %}&#123;% Details %&#125;
 
@@ -585,6 +731,7 @@ at.
 {% endDetails %}
 
 ### Details component with custom heading level
+
 The default heading level is `h2`.
 To ensure the `Details` component is in the correct place in the page hierarchy,
 add a custom heading argument to the `DetailsSummary` shortcode.
@@ -617,6 +764,7 @@ at.
 {% endDetails %}
 
 ### Details component in open state
+
 The `Details` component is closed by default.
 If for some reason you want it open,
 add the `open` argument to the `Details` shortcode.
@@ -666,7 +814,8 @@ at.
 {% Glitch {
   id: 'tabindex-zero',
   path: 'index.html',
-  previewSize: 0
+  previewSize: 0,
+  allow: []
 } %}
 
 <!-- Or just the Glitch ID -->
@@ -681,6 +830,8 @@ if you need more or less space.
 
 Shortcode object fields allow for modifying how the embed is presented:
 
+* {`string | string[]`} `allow?` List of feature policies of an IFrame either as an array of strings, or as a `;` separated list. By default the following policies are enabled:
+  * `'camera', 'clipboard-read', 'clipboard-write', 'encrypted-media', 'geolocation', 'microphone', 'midi'`
 * {`string`} `id` ID of Glitch project.
 * {`string`} `path?` Lets you specify which source code file to show.
 * {`number`} `previewSize?` Defines what percentage of the embed should be dedicated to the preview, default is 100.
@@ -813,6 +964,7 @@ console.log('hello');
 ```
 
 ## Lists
+
 See the [Lists section of the Grammar, mechanics, and usage post](/handbook/grammar/#lists)
 for information about when to use each list type.
 
@@ -821,29 +973,48 @@ for unordered lists.
 
 ### Ordered list
 
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-   sit amet ullamcorper.
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-   sit amet ullamcorper.
-
-   <figure class="w-figure">
-     <img class="w-screenshot w-screenshot--filled" src="./image-screenshot.png" alt="">
-     <figcaption class="w-figcaption">
-       Filled screenshot.
-     </figcaption>
-   </figure>
+```md
+1. Lorem ipsum dolor sit amet…
+1. Lorem ipsum dolor sit amet…
+1. Lorem ipsum dolor sit amet…
+```
 
-1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-   sit amet ullamcorper.
+1. Lorem ipsum dolor sit amet…
+1. Lorem ipsum dolor sit amet…
+1. Lorem ipsum dolor sit amet…
 
 ### Unordered list
 
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
-  sit amet ullamcorper.
+```md
+- Lorem ipsum dolor sit amet…
+- Lorem ipsum dolor sit amet…
+- Lorem ipsum dolor sit amet…
+```
+
+- Lorem ipsum dolor sit amet…
+- Lorem ipsum dolor sit amet…
+- Lorem ipsum dolor sit amet…
+
+### Definition list
+
+```md
+First Term
+: This is the definition of the first term.
+
+Second Term
+: This is one definition of the second term.
+: This is another definition of the second term.
+```
+
+First Term
+: This is the definition of the first term.
+
+Second Term
+: This is one definition of the second term.
+: This is another definition of the second term.
 
 ## Stats
+
 Use the Stats component to call out important statistics
 about a product or service discussed in a post.
 (Stats are primarily used in case studies.)
@@ -851,165 +1022,173 @@ about a product or service discussed in a post.
 Include no more than four statistics in a single Stats component
 to avoid layout issues.
 
+[Detailed specification](/design-system/component/stats/)
+
 ```html
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">
+      30
+      <sub>%</sub>
+    </p>
+    <p>Lower cost per conversion</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      13
+      <sub>%</sub>
+    </p>
+    <p>Higher CTR</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">4<sub class="w-stat__sub">×</sub></p>
-    <p class="w-stat__desc">Faster load times</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      4
+      <sub>x</sub>
+    </p>
+    <p>Faster load times</p>
   </div>
-</div>
+</ul>
 ```
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">
+      30
+      <sub>%</sub>
+    </p>
+    <p>Lower cost per conversion</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      13
+      <sub>%</sub>
+    </p>
+    <p>Higher CTR</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">4<sub class="w-stat__sub">×</sub></p>
-    <p class="w-stat__desc">Faster load times</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      4
+      <sub>x</sub>
+    </p>
+    <p>Faster load times</p>
   </div>
-</div>
-
+</ul>
 
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, numquam
-laboriosam reprehenderit aliquam possimus natus magnam nulla illo blanditiis
-corporis nam sed, velit fugiat dolorum placeat. Odio, aut nisi. Fuga!
+Stats component with applied utility class `bg-state-good-bg color-state-good-text`:
 
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
+<ul class="stats bg-state-good-bg color-state-good-text">
+  <div class="stats__item">
+    <p class="stats__figure">
+      30
+      <sub>%</sub>
+    </p>
+    <p>Lower cost per conversion</p>
   </div>
-  <div class="w-stat">
-    <p class="w-stat__figure">13<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Higher CTR</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      13
+      <sub>%</sub>
+    </p>
+    <p>Higher CTR</p>
   </div>
-</div>
-
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, numquam
-laboriosam reprehenderit aliquam possimus natus magnam nulla illo blanditiis
-corporis nam sed, velit fugiat dolorum placeat. Odio, aut nisi. Fuga!
-
-<div class="w-stats">
-  <div class="w-stat">
-    <p class="w-stat__figure">30<sub class="w-stat__sub">%</sub></p>
-    <p class="w-stat__desc">Lower cost per conversion</p>
+  <div class="stats__item">
+    <p class="stats__figure">
+      4
+      <sub>x</sub>
+    </p>
+    <p>Faster load times</p>
   </div>
-</div>
+</ul>
 
 ## Tables
 
 Use the markup below to create a table.
-Do _not_ use Markdown synatx;
+Do _not_ use Markdown syntax;
 it doesn't include the wrapper element needed
 to ensure correct whitespace around the table.
 
+[Detailed specification](/design-system/component/tables/)
+
 ```html
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <thead>
       <tr>
         <th>Image Format</th>
         <th>Lossy Plugin(s)</th>
-        <th>Lossless Plugin(s)</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>JPEG</td>
         <td><a href="#">imagemin-mozjpeg</a></td>
-        <td><a href="#">imagemin-jpegtran</a></td>
       </tr>
-      …
+      <tr>
+        <td>PNG</td>
+        <td><a href="#">imagemin-pngquant</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="#">imagemin-giflossy</a></td>
+      </tr>
     </tbody>
-    <caption>Imagemin plugins for filetypes.</caption>
+    <caption>
+      Imagemin plugins for filetypes.
+    </caption>
   </table>
 </div>
 ```
 
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <thead>
       <tr>
         <th>Image Format</th>
         <th>Lossy Plugin(s)</th>
-        <th>Lossless Plugin(s)</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>JPEG</td>
         <td><a href="#">imagemin-mozjpeg</a></td>
-        <td><a href="#">imagemin-jpegtran</a></td>
       </tr>
       <tr>
         <td>PNG</td>
         <td><a href="#">imagemin-pngquant</a></td>
-        <td><a href="#">imagemin-optipng</a></td>
       </tr>
       <tr>
         <td>GIF</td>
         <td><a href="#">imagemin-giflossy</a></td>
-        <td><a href="#">imagemin-gifsicle</a></td>
-      </tr>
-      <tr>
-        <td>SVG</td>
-        <td><a href="#">Imagemin-svgo</a></td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>WebP</td>
-        <td><a href="#">imagemin-webp</a></td>
-        <td></td>
       </tr>
     </tbody>
-    <caption>Imagemin plugins for filetypes.</caption>
+    <caption>
+      Imagemin plugins for filetypes.
+    </caption>
   </table>
 </div>
 
-If you want content in `<td>` elements to be vertically aligned
-to the top of the cell, add the `w-table--top-align` class
-to the `<table>` element:
-
-<div class="w-table-wrapper">
-  <table class="w-table--top-align">
+<div class="table-wrapper scrollbar">
+  <table data-alignment="top">
     <thead>
       <tr>
         <th>Tool</th>
-        <th>CLI</th>
-        <th>CI</th>
         <th>Summary</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Lighthouse</td>
-        <td>✔</td>
-        <td>✘</td>
         <td>
           <ul>
-            <li>Budgets for different types of resources based on their size or count</li>
+            <li>
+              Budgets for different types of resources based on their size or
+              count
+            </li>
           </ul>
         </td>
       </tr>
       <tr>
         <td>webpack</td>
-        <td>✔</td>
-        <td>✘</td>
         <td>
           <ul>
             <li>Budgets based on sizes of assets generated by webpack</li>
@@ -1017,29 +1196,19 @@ to the `<table>` element:
           </ul>
         </td>
       </tr>
-      <tr>
-        <td>bundlesize</td>
-        <td>✔</td>
-        <td>✔</td>
-        <td>
-          <ul>
-            <li>Budgets based on sizes of specific resources</li>
-            <li>Checks compressed or uncompressed sizes</li>
-          </ul>
-        </td>
-      </tr>
     </tbody>
+    <caption>
+      A table with the cell content vertically aligned by data-alignment="top" exception.
+    </caption>
   </table>
 </div>
 
-Include code in tables using a `<code>` element:
-
-<div class="w-table-wrapper">
+<div class="table-wrapper scrollbar">
   <table>
     <thead>
       <tr>
-        <th>Before</th>
-        <th>After</th>
+        <th>Option 1</th>
+        <th>Option 2</th>
       </tr>
     </thead>
     <tbody>
@@ -1057,12 +1226,13 @@ Include code in tables using a `<code>` element:
         </td>
       </tr>
     </tbody>
+    <caption>
+      Table using a `code` element.
+    </caption>
   </table>
 </div>
 
-Tables scroll when their width is larger than that of the content column:
-
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tbody>
       <tr>
@@ -1110,154 +1280,91 @@ Tables scroll when their width is larger than that of the content column:
         <td>2s</td>
       </tr>
     </tbody>
+    <caption>
+      Tables scroll when their width is larger than that of the content column.
+    </caption>
   </table>
 </div>
 
-<p>
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus
-incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus,
-deleniti! Atque aliquam facilis labore odio similique provident illo culpa
-assumenda perspiciatis.
-</p>
+## Tabs
 
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th><strong>Property</strong></th>
-        <th><strong>Use</strong></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-        <code><strong>short_name</strong></code> (required)
-        </td>
-        <td>
-          Short human-readable name for the application. This is intended for when
-          there is insufficient space to display the full name of the web
-          application, like device home screens.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>name</strong></code> (required)</td>
-        <td>Human-readable name for the site when displayed to the user.</td>
-      </tr>
-      <tr>
-        <td><code><strong>description</strong></code> (recommended)</td>
-        <td>General description of what the PWA does.</td>
-      </tr>
-      <tr>
-        <td><code><strong>icons</strong></code> (required)</td>
-        <td>
-          An array of image files that can serve as application icons. Chrome
-          requires a 192x192px and a 512x512px icon. Additional sizes are
-          optional, and recommended for those who want to ensure pixel perfect
-          icons.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>start_url</strong></code> (required)</td>
-        <td>
-          The URL that loads when a user launches the application. This has to be
-          a relative URL, relative to the manifest url.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>background_color</strong></code> (recommended)</td>
-        <td>
-          The background color used on the auto-generated splash screen when the
-          PWA is launched.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>display</strong></code> (required)</td>
-        <td>The developers' preferred display mode for the PWA.</td>
-      </tr>
-      <tr>
-        <td><code><strong>scope</strong></code> (recommended)</td>
-        <td>
-          The navigation scope of this website's context. This restricts what web
-          pages can be viewed while the manifest is applied. If the user navigates
-          outside the scope, it returns to a normal web page inside a browser
-          tab/window.
-        </td>
-      </tr>
-      <tr>
-        <td><code><strong>theme_color</strong></code> (recommended)</td>
-        <td>
-          The default theme color for an application. This affects how the OS
-          displays the site. <br>
-          <ol>
-            <li>
-              On Android's task switcher, the theme color surrounds the site.
-            </li>
-            <li>On desktop, the theme color is used to style the title bar.</li>
-          </ol>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-          Dicta nam possimus doloribus minima repellendus!
-          <ul>
-            <li>
-              On Android's task switcher, the theme color surrounds the site.
-            </li>
-            <li>On desktop, the theme color is used to style the title bar.</li>
-          </ul>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+Use `web-tabs` web component to display content that refers to different
+platforms or languages.
+Each child of the `web-tabs` component will become a separate tab.
+Use `data-label` attribute to set the tab's title. You can use markdown inside
+the tab, e.g. the code blocks.
+
+```html
+{% raw %}
+<web-tabs>
+  <div data-label="html">
+    ```html
+    <p>I'm html</p>
+    ```
+  </div>
+  <div data-label="css">
+    ```css
+    .class { border: 0; }
+    ```
+  </div>
+</web-tabs>
+{% endraw %}
+```
+
+<web-tabs>
+  <div data-label="html" title="t">
+
+  ```html
+  <p>I'm html</p>
+  ```
+
+  </div>
+  <div data-label="css">
+
+  ```css
+  .class { border: 0; }
+  ```
+
+  </div>
+</web-tabs>
 
 ## Tooltips
 
 Use tooltips to provide information about UI controls
-that are too small to have a label:
+that are too small to have a label
+
+[Detailed specification](/design-system/component/tooltips/)
 
 ```html
-<button class="w-button--icon" data-icon="format_align_left">
-  {% raw %}{% Tooltip 'Left align' %}{% endraw %}
-</button>
+<div class="tooltip" data-alignment="">
+  <button class="fab" aria-labelledby="mytooltip">
+    {% raw %}{% include "icons/plus.svg" %}{% endraw %}
+  </button>
+  <span class="tooltip__content" role="tooltip" id="mytooltip"
+    >Standard alignment</span
+  >
+</div>
 ```
 
-<div>
-  <button class="w-button--icon" data-icon="format_align_left">
-    {% Tooltip 'Left align' %}
-  </button>
-  <button class="w-button--icon" data-icon="format_align_center">
-    {% Tooltip 'Center align' %}
-  </button>
-  <button class="w-button--icon" data-icon="format_align_right">
-    {% Tooltip 'Right align' %}
-  </button>
-  <button class="w-button--icon" data-icon="format_align_justify">
-    {% Tooltip 'Justify' %}
+<div class="tooltip" data-alignment="right">
+  <button class="fab" aria-labelledby="mytooltip">
+    {% include "icons/plus.svg" %}
   </button>
+  <span class="tooltip__content" role="tooltip" id="mytooltip"
+    >Right alignment</span
+  >
 </div>
 
-You can left- or right-align a tooltip to its parent
-by adding a `left` or `right` argument to the shortcode:
-
-```html
-<button class="w-button--icon" data-icon="unfold_less">
-  {% raw %}{% Tooltip 'Collapse', 'left' %}{% endraw %}
-</button>
-<button class="w-button--icon" data-icon="unfold_less">
-  {% raw %}{% Tooltip 'Collapse' %}{% endraw %}
-</button>
-<button class="w-button--icon" data-icon="unfold_less">
-  {% raw %}{% Tooltip 'Collapse', 'right' %}{% endraw %}
-</button>
-```
+<div class="tooltip" data-alignment="">
+  <button class="fab" aria-labelledby="mytooltip">
+    {% include "icons/plus.svg" %}
+  </button>
+  <span class="tooltip__content" role="tooltip" id="mytooltip"
+    >Standard alignment</span
+  >
+</div>
 
-<button class="w-button--icon" data-icon="unfold_less">
-  {% Tooltip 'Collapse', 'left' %}
-</button>
-<button class="w-button--icon" data-icon="unfold_less">
-  {% Tooltip 'Collapse' %}
-</button>
-<button class="w-button--icon" data-icon="unfold_less">
-  {% Tooltip 'Collapse', 'right' %}
-</button>
 
 ## Video / YouTube {: #video }
-See the [Images and video](/handbook/markup-media#video) post.
+
+See the [Images and video](/handbook/markup-media) post.
diff --git a/src/site/content/en/handbook/word-list/index.md b/src/site/content/en/handbook/word-list/index.md
index 25220ecc184..bcba2bcadd9 100644
--- a/src/site/content/en/handbook/word-list/index.md
+++ b/src/site/content/en/handbook/word-list/index.md
@@ -2,23 +2,21 @@
 layout: handbook
 title: Word list
 date: 2019-06-26
-updated: 2020-07-15
+updated: 2022-07-11
 description: |
   Spelling, punctuation, and capitalization for words and phrases commonly used on web.dev.
 ---
 
 This word list tells you how to spell, punctuate, and capitalize common words in web.dev content.
-This word list supplements the [Google Developer Documentation Style Guide Word List][list] (GDDSGWL).
+This word list supplements the [Google Developer Documentation Style Guide Word List](https://developers.google.com/style/word-list) (GDDSGWL).
 If a word is listed in the GDDSGWL but not here, use that spelling. If a word is listed both here and the
 GDDSGWL, use the spelling that you see here.
 
 * code splitting (noun)
 * code-splitting (adj)
-* ~~code-split (verb)~~ (use _split_ instead)
 * DevTools, Chrome DevTools
 * e-commerce
 * FFmpeg
-* ~~guide~~ (use _post_ instead)
 * home screen
 * Hypertext Markup Language (HTML)
 * internet
@@ -34,6 +32,7 @@ GDDSGWL, use the spelling that you see here.
 * referer (so spelled when referring to [the HTTP header](https://tools.ietf.org/html/rfc7231#section-5.5.2))
 * round trip (noun)
 * round-trip (adj)
+* service workers
 * web
 * web app manifest
 * web page
@@ -42,3 +41,18 @@ GDDSGWL, use the spelling that you see here.
 * webpack
 * website
 * Wi-Fi
+
+## Words to avoid
+
+In this list are some words to avoid, along with alternative suggestions.
+
+* code-split (verb): use _split_
+* guide: use _post_
+* spec: use _specification_
+
+## Terminology
+
+Proper user of terminology is necessary so readers can consistently understand the state or nature of concepts and APIs across web.dev as they relate to the web. Below are some terms that you, as a writer should understand the meaning when writing content:
+
+- "Core Web Vitals" refers only to three metrics: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and First Input Delay (FID). Any other metrics are not "Core Web Vitals" or even "Web Vitals", they are simply "metrics".
+- Avoid using the term "Web Vitals" when you mean "Core Web Vitals".
diff --git a/src/site/content/en/handbook/writing-blog-posts/index.md b/src/site/content/en/handbook/writing-blog-posts/index.md
new file mode 100644
index 00000000000..402ced1d4d2
--- /dev/null
+++ b/src/site/content/en/handbook/writing-blog-posts/index.md
@@ -0,0 +1,231 @@
+---
+layout: handbook
+title: How to write blog posts for web.dev and developer.chrome.com
+date: 2021-10-11
+description: |
+  Practical information and writing tips to get you started.
+---
+
+This guide is written for people who are not primarily tech writers, 
+but want to write a post for [web.dev](/) or [developer.chrome.com](https://developer.chrome.com). 
+It links to some of our key writing information, 
+explains our process, and provides tips for writing technical blog posts.
+
+## Getting started
+
+The [Quick Start Guide](/handbook/quick-start/) 
+is an overview of proposing your new content. 
+The content form asks you whether the post should be posted to web.dev or developer.chrome.com.
+
+### Does this post live on web.dev or developer.chrome.com? {: #which-site}
+
+The two sites serve different audiences. 
+If your post is about a web platform feature that is not Chrome specific, 
+and is implemented, or in the process of being implemented in other browsers, 
+then it can be posted to web.dev.
+
+If the post is about Chrome-only features that do not yet have broad consensus on implementation, 
+or about the browser engine itself, it belongs on developer.chrome.com. 
+If unsure, mention this in your content proposal and we can help you work it out.
+
+## Writing style guide
+
+The writing style guide hosted on web.dev is your reference for style, voice, and tone across both sites. 
+There are some technical differences in terms of components you have access to when formatting your post:
+
+-  [web.dev components](/handbook/web-dev-components/)
+-  [developer.chrome.com components](https://developer.chrome.com/docs/handbook/components/)
+
+## How to format your draft
+
+Use Google docs initially, and write in Markdown. 
+Make a copy of this [template](https://docs.google.com/document/d/1lgaNIEnXZf-RB8_p9RK22QEgpXJqnu77pLWVWVy4nuw/edit?usp=sharing) as a starting point. 
+Your initial reviews will take place in the document as it is an easier place for structural changes than GitHub. 
+You can also share your document with any members of your team who need to sign off on the content before publication.
+
+## The general procedure
+
+A good general order of operations looks like this:
+
+1. Write your outline.
+1. Get technical writer feedback on your structure.
+1. Draft your article.
+1. Get a content review from technical experts or other interested parties.
+1. Revise your article as needed.
+1. Get a copy edit for typos, grammar issues, and other needed corrections from the technical writer.
+
+This order helps you avoid:
+
+* Multiple content reviews because you changed the structure.
+* Multiple copy edits because your content reviewers requested wording changes.
+
+Expect each review step to take as much as a week. All parties are juggling competing priorities. 
+
+## Key writing tips
+
+We don't expect you to memorize the style guide. 
+Following a few key points will really help, and your assigned tech writer will help with the rest.
+
+- Write posts in a [voice](/handbook/voice/) that is knowledgeable, humble, sympathetic, and friendly. 
+- Use simple language, the present tense, and the second person (you, rather than we). 
+The [grammar](/handbook/grammar/) page of the handbook has some useful examples.
+- Assume readers understand basic web development in HTML, CSS, and JavaScript.
+- Use the [content checklists](/handbook/content-checklist/) as a reference. 
+They give you an idea of what the editor will be looking for.
+
+### Article length
+
+A good length for posts on web.dev is around 1000 to 1500 words. 
+If you find that you are writing much more than that, 
+it might be that the article can be split into two or more pieces dealing with various parts of the topic. 
+Ask your editor for advice on this. 
+Also, see the tips below and consider whether you are over-explaining basic concepts.
+
+## Working with an editor
+
+Every post will have a tech writer assigned. 
+They will act as your editor, 
+and help to make sure your post fits the audience for the site, 
+and that style guide details are followed. 
+
+Working with a tech writer means that you don't need to worry about every detail of the style guide. 
+It also means, however, that your carefully crafted post might come back covered in suggestions and comments. 
+This can be a bit of a shock the first time it happens. 
+A document covered in suggestions doesn't mean that you did a bad job. 
+The majority of these changes will be copy-edits to follow the style guide and you can approve those and move on.
+
+{% Aside %}  
+You will generally be assigned a tech writer familiar with your subject matter, 
+and they may well spot places where the post could be more clear, however you are the expert. 
+Always query any change that you feel is incorrect, or unhelpful. 
+These discussions between editor and writer very often lead to changes that improve the clarity of the post.  
+{% endAside %}
+
+## Tips for writing technical articles
+
+The following suggestions may be helpful when working on your post.
+
+### Define the target reader
+
+Defining who your post is for can help you to avoid two common issues with technical articles:
+
+1. The article explains every concept in detail as if the reader has never heard of anything mentioned.
+1. The article mentions new technical terms or concepts with no explanation at all.
+
+The correct level of detail is usually somewhere between these places, 
+and to know exactly where your line will fall, you need to define who is reading the piece.
+
+Most web.dev posts can assume that the reader understands basic HTML, CSS, and JavaScript. 
+With that as a baseline, ask yourself whether your article requires any other pre-existing knowledge. 
+Do you intend to cover this knowledge in the article or consider it a prerequisite? 
+
+As you write, you can bring this ideal reader to mind when deciding whether to fully explain a feature, 
+add a link, or assume it is understood.
+
+### Write an outline
+
+Putting together an outline for your post is a good first step. 
+It helps you to organize your thoughts on the subject. 
+An outline also helps you to see how much material you have to cover. 
+
+Posts on web.dev tend to be short. 
+If you have a lot of material to cover, consider how to break it down. 
+You could write an overview, then write more detailed pieces on specific parts of the feature later. 
+Or, it might be that there is already a good introduction to the subject available on the web; 
+therefore, your post could go into more detail on a particular part of the feature and link to the third-party overview.
+
+An outline doesn't need to be anything fancy. 
+A list of the main headings with a brief description of what you will cover in each section is all it takes.
+
+If you share this outline with the tech writer working with you, 
+they can make suggestions and help you to decide what to cover. 
+Remember to let them know who you have identified as the target audience for this piece.
+
+### Write a concise introduction
+
+The introduction lets your target reader know that this article is for them and what they will learn by reading it. 
+It's your chance to grab people as they scroll through the articles looking for something to read. 
+Introductions should include:
+
+-  Who is this for?
+-  What do they already need to know?
+-  What will they learn?
+
+Make your introduction as concise as possible. 
+When there are prerequisites for knowledge (over and above HTML, CSS, and JavaScript), link to a good resource.
+
+### Create good code examples
+
+When creating a code example, ask the question, 
+"How can I demonstrate this feature in the simplest possible way?" 
+Good code examples have a lot in common with the reduced test case.
+They rarely resemble production code.
+
+For inline code examples, check out the [tips in the handbook](/handbook/write-code-samples/).
+
+In CodePen or Glitch examples, avoid using languages that compile to HTML, CSS, or JavaScript 
+(unless the post is about those alternate languages). Remember our ideal reader, 
+who we know understands HTML, CSS, and JavaScript? 
+Don't add a barrier to understanding your demo.
+
+Try to avoid large amounts of additional JavaScript or CSS styling. 
+Making your demo look pretty isn't the most important thing. 
+
+Ensure that any dependencies have at least the same browser support as the thing you are demonstrating. 
+Otherwise the reader may be confused as to why the demo doesn't work.
+If you're writing about a new feature, state which browsers it currently works on in both the article and the demo.
+
+{%Aside%}  
+If you want to include a fully worked demo, 
+include that as a link and use it as a chance to show off the feature.  
+{%endAside%} 
+
+While reducing things to the minimum needed is always the goal, 
+take care that this doesn't leave a copy and pasteable example that misses something important to making the code secure. 
+In particular, avoid creating live examples on CodePen or Glitch with security or similar issues. 
+You do not know where they might end up.
+
+If you want to avoid writing validation or other code, 
+adding the example as inline code with a comment indicating the position of the required additional code makes the intention clear.
+
+### Share knowledge that's not in the docs
+
+Hopefully, there is already a reference on MDN or elsewhere for your feature. 
+The aim of your post should not be to write an exhaustive reference but to give extra information and best practices. 
+That might be in the format of sharing cool use cases, 
+providing tips from one developer to another, 
+or explaining how some features work together. 
+Suppose you find yourself detailing each method of an interface or every value of a CSS property. 
+In that case, you are writing reference and not an article, 
+and there are better venues for docs.
+
+Instead, write about what these methods or values can do, show examples, 
+then link to the docs where the reader can explore how to take those examples further.
+
+If no reference is available, but you think there should be, contact jmedley@ who can assist you in creating it.
+
+### Think about different ways to share information with components
+
+On web.dev there are several interesting components. 
+Using these in your article will avoid presenting readers with a wall of text. For example:
+
+-  Add extra information or warn people with the aside component: [aside on web.dev](/handbook/web-dev-components/#asides), [aside on developer.chrome.com](https://developer.chrome.com/docs/handbook/components/#asides). 
+-  Contrast code examples with the compare component: [compare on web.dev](/handbook/web-dev-components/#compare), [compare on developer.chrome.com](https://developer.chrome.com/docs/handbook/components/#compare).
+-  Add [browser compatibility information on web.dev](/handbook/web-dev-components/#browsercompat).
+
+### Give credit and avoid plagiarism 
+
+If your thinking around a subject is informed by other work, reference it. 
+While directly copying is well understood as plagiarism, 
+technical articles often indirectly draw on other people's work. 
+Perhaps you watched a conference talk or video, 
+read some blog posts, 
+and even asked questions in a forum where someone gave you help. 
+Mentioning these sources strengthens your article. 
+Referencing shows that you have done your research, 
+gives readers the chance to find out more from other people, 
+and ensures that other folks get credit for their work.
+
+If you directly quote or paraphrase someone, then include a link in the text. 
+If there is not a good place to add a link inline, 
+add the piece to a resources or credits section at the end of the article.
diff --git a/src/site/content/en/handbook/yaml-front-matter/blog.jpg b/src/site/content/en/handbook/yaml-front-matter/blog.jpg
deleted file mode 100644
index 1bee2997622..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/blog.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/codelab.jpg b/src/site/content/en/handbook/yaml-front-matter/codelab.jpg
deleted file mode 100644
index 6bb0686eda8..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/codelab.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/codelabs.jpg b/src/site/content/en/handbook/yaml-front-matter/codelabs.jpg
deleted file mode 100644
index 19243e8bae1..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/codelabs.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/covid19.jpg b/src/site/content/en/handbook/yaml-front-matter/covid19.jpg
deleted file mode 100644
index 4c93a2fa78c..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/covid19.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/date-updated.jpg b/src/site/content/en/handbook/yaml-front-matter/date-updated.jpg
deleted file mode 100644
index f6ba2ac5b6f..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/date-updated.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/description.jpg b/src/site/content/en/handbook/yaml-front-matter/description.jpg
deleted file mode 100644
index 3e3aaeabdc7..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/description.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/draft.jpg b/src/site/content/en/handbook/yaml-front-matter/draft.jpg
deleted file mode 100644
index cfb95d71a67..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/draft.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/hero.jpg b/src/site/content/en/handbook/yaml-front-matter/hero.jpg
deleted file mode 100644
index 82ad61694e6..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/index.md b/src/site/content/en/handbook/yaml-front-matter/index.md
index e1a132ed765..69638ee1306 100644
--- a/src/site/content/en/handbook/yaml-front-matter/index.md
+++ b/src/site/content/en/handbook/yaml-front-matter/index.md
@@ -3,7 +3,8 @@ layout: handbook
 title: YAML front matter
 subhead: |
   Reference documentation for web.dev's YAML front matter properties.
-date: 2020-08-06
+date: 2021-03-03
+updated: 2022-03-28
 description: |
   Reference documentation for web.dev's YAML front matter properties.
 ---
@@ -33,14 +34,12 @@ authors:
 
 Author avatars appear underneath the page title.
 Clicking an author's avatar takes you to a page where you can see all of that author's
-content. See [Pete LePage](https://web.dev/authors/petelepage/) for an example.
+content. See [Pete LePage](/authors/petelepage/) for an example.
 
 See [Author profile](/handbook/author-profile/) to learn how to add a new author.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="date-updated.jpg"
-       alt="An example of a page with authors.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="An example of a page with authors.", width="800", height="712" %}
   <figcaption>
     The authors of this page were Kayce and Pete.
   </figcaption>
@@ -59,10 +58,8 @@ codelabs:
 A list of codelabs that are related to the post. All indicated codelabs
 appear in callouts at the end of the post.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="codelabs.jpg"
-       alt="An example of a codelab callout at the end of a post.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d9euImHuQJpMjBaNGllz.jpg", alt="An example of a codelab callout at the end of a post.", width="800", height="585" %}
 </figure>
 
 ## `date`: indicate when the content was originally created {: #date }
@@ -81,10 +78,8 @@ Use the [`updated`](#updated) field to indicate content updates.
 
 The `date` value is presented in human-readable format beneath the page title.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="date-updated.jpg"
-       alt="The date field shows up under the title.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="The date field shows up under the title.", width="800", height="712" %}
   <figcaption>
     This page was originally published on <code>Jun 18, 2010</code>.
   </figcaption>
@@ -100,10 +95,8 @@ description: How to debug SEO issues on individual pages or across an entire sit
 ---
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="description.jpg"
-       alt="An example of a description showing up in a search engine result page.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DG2ye3DP8hTSeEdBZyz3.jpg", alt="An example of a description showing up in a search engine result page.", width="800", height="395" %}
   <figcaption>
     An example of a description showing up in a search engine result page.
   </figcaption>
@@ -125,10 +118,8 @@ When a page is in draft mode, it is hidden from homepages (i.e. `web.dev` and `w
 and the sitemap. However, **the page is still publicly accessible**. I.e. anyone who knows
 the link to the page will be able to see it.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="draft.jpg"
-       alt="An example of a page in draft mode.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fOznvD7Sd6X7kYSrk5QI.jpg", alt="An example of a page in draft mode.", width="800", height="482" %}
   <figcaption>
     An example of a page in draft mode.
   </figcaption>
@@ -144,10 +135,8 @@ glitch: gif-to-video
 ---
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="codelab.jpg"
-       alt="A screenshot of a page using the codelab layout.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqbfe3IWOXclsNUr1a8H.jpg", alt="A screenshot of a page using the codelab layout.", width="800", height="482" %}
   <figcaption>
     The <code>gif-to-video</code> Glitch is presented on the right because of the
     <code>glitch: gif-to-video</code> YAML property in the page's front matter.
@@ -159,17 +148,15 @@ glitch: gif-to-video
 ```yaml
 ---
 …
-hero: hero.jpg
+hero: image/admin/tyBs8QP5pbMVpY3yp1dM.jpg
 …
 ---
 ```
 
 See [Hero images](/handbook/markup-media/#hero).
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="hero.jpg"
-       alt="A page with a hero image.">
+<figure>
+  <img src="hero.jpg" alt="A page with a hero image.">
 </figure>
 
 ## `layout`: change the overall layout of your content {: #layout }
@@ -182,17 +169,13 @@ layout: post|codelab
 ---
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="post.jpg"
-       alt="A screenshot of a page using the post layout.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zkPy8m0ZBVWoCf5qs0EZ.jpg", alt="A screenshot of a page using the post layout.", width="800", height="482" %}
   <figcaption>An example of <code>layout: post</code>.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="codelab.jpg"
-       alt="A screenshot of a page using the codelab layout.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqbfe3IWOXclsNUr1a8H.jpg", alt="A screenshot of a page using the codelab layout.", width="800", height="482" %}
   <figcaption>An example of <code>layout: codelab</code>.</figcaption>
 </figure>
 
@@ -210,12 +193,32 @@ Controls the **Return to article** link at the bottom of codelabs.
 See [Replace GIFs with video](/codelab-replace-gifs-with-video/) for an
 example.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="related-post.jpg"
-       alt="An example of a page with a related post.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nl4fS8RGjVcwUw2Ozk8Z.jpg", alt="An example of a page with a related post.", width="800", height="482" %}
 </figure>
 
+## `stack_overflow_tag`: add an "Ask on Stack Overflow" note {: #stack_overflow_tag }
+
+```yaml
+---
+…
+stack_overflow_tag: service-worker
+…
+---
+```
+
+Sometimes, a post is related to technologies that have
+["official" tags on Stack Overflow](https://stackoverflow.com/tags)
+(e.g. [`service-worker`](https://stackoverflow.com/questions/tagged/service-worker)).
+When used, an "Ask on Stack Overflow" note will be shown at the end of the post.
+
+{% Img
+  src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/2yLZ1UAjLELFzlvgVRwx.jpg",
+  alt="An example of a page with a Stack Overflow tag.",
+  width="800",
+  height="490"
+%}
+
 ## `subhead`: add an enticing subtitle {: #subhead }
 
 ```yaml
@@ -232,16 +235,12 @@ relevant to them.
 
 The subtitle also shows up on `web.dev/blog`.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="subhead.jpg"
-       alt="An example of a page with a subhead.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5QJtXjihXDKFet1dPUoh.jpg", alt="An example of a page with a subhead.", width="800", height="592" %}
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="subhead-blog.jpg"
-       alt="An example of a subhead on web.dev/blog.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YAbmkgByFYVJ7BbOF11x.jpg", alt="An example of a subhead on web.dev/blog.", width="800", height="643" %}
 </figure>
 
 ## `tags`: increase awareness of related content {: #tags }
@@ -260,20 +259,16 @@ Tags help web.dev users find all of our content related to a topic.
 For example, all of our Web Vitals content is available under
 the [Web Vitals tags page](/tags/web-vitals/):
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="web-vitals.jpg"
-       alt="A screenshot of https://web.dev/tags/web-vitals">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFohRqh8YedZG7iZZOiX.jpg", alt="A screenshot of https://web.dev/tags/web-vitals", width="800", height="617" %}
 </figure>
 
 Tags show up in a few places across the site.
 The first three tags of a page are shown on the [blog homepage](/blog):
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="blog.jpg" 
-       alt="A screenshot of https://web.dev/blog">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/RMA4IVA7bvCaEhY5Nevw.jpg", alt="A screenshot of https://web.dev/blog", width="800", height="586" %}
+  <figcaption>
     The human interface devices page is tagged with <code>Capabilities</code> and
     <code>Games</code>, the streaming requests page is tagged with <code>Network</code>
     and <code>Service Worker</code>, and so on.
@@ -282,23 +277,21 @@ The first three tags of a page are shown on the [blog homepage](/blog):
 
 A page's full list of tags is shown at the bottom of its main content:
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="covid19.jpg" 
-       alt="A screenshot of https://web.dev/covid19">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/p9V8IluserA3J9Og6SuY.jpg", alt="A screenshot of https://web.dev/covid19", width="800", height="408" %}
 </figure>
 
 ### Supported keywords {: #supported-keywords }
 
-Make sure tags added to the page are listed in 
-[`tagsData.json`](https://github.com/GoogleChrome/web.dev/blob/master/src/site/_data/tagsData.json).
+Make sure tags added to the page are listed in
+[`tags.yaml`](https://github.com/GoogleChrome/web.dev/blob/master/src/site/_data/i18n/tags.yaml).
 
 ## `thumbnail`: present a slightly different version of the hero on the homepages {: #thumbnail }
 
 ```yaml
 ---
 …
-thumbnail: thumbnail.jpg
+thumbnail: image/admin/mYe7bng2PtwB9ohv8vYa.jpg
 …
 ---
 ```
@@ -309,19 +302,15 @@ must be substantially similar to the hero image. Changing the proportions,
 cropping, or rearranging the hero image's content is OK. Using a completely
 different image is not OK.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="thumbnail.jpg"
-       alt="A page with a thumbnail that's different from its hero.">
+<figure>
+  <img src="thumbnail.jpg" alt="A page with a thumbnail that's different from its hero.">
   <figcaption>
     A page with a thumbnail that's different from its hero.
   </figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="hero.jpg"
-       alt="The page's hero image.">
+<figure>
+  <img src="hero.jpg" alt="The page's hero image.">
 </figure>
 
 ## `title`: increase SEO with a keyword-rich title {: #title }
@@ -334,10 +323,8 @@ title: Web developer tools for debugging JavaScript issues in Google Search
 ---
 ```
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="hero.jpg"
-       alt="A screenshot of a page's title.">
+<figure>
+  <img src="hero.jpg" alt="A screenshot of a page's title.">
 </figure>
 
 ## `translation`: specify how the page was translated {: #translation }
@@ -365,11 +352,62 @@ changed for minor updates, like typo fixes.
 
 The `updated` value is presented in human-readable format beneath the page title.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="date-updated.jpg"
-       alt="The updated field shows up under the title.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="The updated field shows up under the title.", width="800", height="712" %}
   <figcaption>
     This page was updated on <code>May 8, 2020</code>.
   </figcaption>
-</figure>
\ No newline at end of file
+</figure>
+
+
+## `editors`: give credit to content editors {: #editors }
+
+```yaml
+---
+…
+editors:
+  - petelepage
+  - kaycebasques
+…
+```
+
+Links to the author profiles of the editors appear beneath the content area.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/kX8qclZNVltJv1hjQEfx.png", alt="An example of a page with editors.", width="800", height="712" %}
+  <figcaption>
+    The editors of this page were Kayce and Pete.
+  </figcaption>
+</figure>
+
+## `credits`: add credits for images and videos used in the post  {: #credits }
+
+```yaml
+---
+…
+credits:
+   - name: Denys Nevozhai
+     href: https://unsplash.com/images/nature/winter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+…
+```
+
+Links with media credits appear appear beneath the content area.
+
+<figure>
+  {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PKYFoCzGwhIqhw6cKejk.png", alt="An example of a page with credits.", width="800", height="712" %}
+  <figcaption>
+    This page picture is credited to Denys Nevozhai
+  </figcaption>
+</figure>
+
+## `web_lighthouse`: help web.dev/measure link back to a guide {: #web_lighthouse }
+
+This property is only relevant for Lighthouse guides.
+
+When creating a Lighthouse guide, add the `web_lighthouse` property to help
+web.dev/measure link back to your guide. The value of the property should be
+the ID of the audit in Lighthouse's source code. For example, the ID for the Lighthouse
+audit associated to the [cross-origin links](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/) guide
+is `external-anchors-use-rel-noopener`, which is the [filename of the audit source code][noopener].
+
+[noopener]: https://github.com/GoogleChrome/lighthouse/blob/master/core/audits/dobetterweb/external-anchors-use-rel-noopener.js
diff --git a/src/site/content/en/handbook/yaml-front-matter/post.jpg b/src/site/content/en/handbook/yaml-front-matter/post.jpg
deleted file mode 100644
index 0578e23cd9b..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/post.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/related-post.jpg b/src/site/content/en/handbook/yaml-front-matter/related-post.jpg
deleted file mode 100644
index ac3ec0e3e35..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/related-post.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/subhead-blog.jpg b/src/site/content/en/handbook/yaml-front-matter/subhead-blog.jpg
deleted file mode 100644
index b3ab33cdd70..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/subhead-blog.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/subhead.jpg b/src/site/content/en/handbook/yaml-front-matter/subhead.jpg
deleted file mode 100644
index 3fcaff44632..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/subhead.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/thumbnail.jpg b/src/site/content/en/handbook/yaml-front-matter/thumbnail.jpg
deleted file mode 100644
index a553ac0d1ac..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/handbook/yaml-front-matter/web-vitals.jpg b/src/site/content/en/handbook/yaml-front-matter/web-vitals.jpg
deleted file mode 100644
index edad2b258ab..00000000000
Binary files a/src/site/content/en/handbook/yaml-front-matter/web-vitals.jpg and /dev/null differ
diff --git a/src/site/content/en/how-to-optimize-inp/client-side-rendering-of-html-and-interactivity/index.md b/src/site/content/en/how-to-optimize-inp/client-side-rendering-of-html-and-interactivity/index.md
new file mode 100644
index 00000000000..5f830601ed9
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/client-side-rendering-of-html-and-interactivity/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Client-side rendering of HTML and interactivity
+subhead: |
+  Rendering HTML with JavaScript is different than rendering HTML that's sent by the server—and that can affect performance. Learn the difference in this guide, and what you can do to preserve your website's rendering performance—especially where interactions are concerned.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/lRR1YOfuLD8yE8GFAtZI.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/A4ghJlLCYgxyLNtzm12k.jpg
+alt: A photo of a monitor displaying HTML source code.
+description: |
+  Rendering HTML with JavaScript is different than rendering HTML that's sent by the server—and that can affect performance. Learn the difference in this guide, and what you can do to preserve your website's rendering performance—especially where interactions are concerned.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Parsing and rendering of HTML is something that browsers do very well by default for websites that use the browser's built-in navigation logic—sometimes called "traditional page loads" or "hard navigations". Such websites are sometimes called multi-page applications (MPAs).
+
+However, developers may work around browser defaults to suit their application needs. This is certainly the case for websites using the [single page application (SPA) pattern](https://en.wikipedia.org/wiki/Single-page_application), which dynamically creates large parts of the HTML/DOM on the client with JavaScript. Client-side rendering is the name for this design pattern, and it can have effects on your website's [Interaction to Next Paint (INP)](/inp/) if the work involved is excessive.
+
+This guide will help you weigh the difference between using HTML sent by the server to the browser versus creating it on the client with JavaScript, and how the latter can result in high interaction latency at crucial moments.
+
+## How the browser renders HTML provided by the server
+
+The navigation pattern used in traditional page loads involves receiving HTML from the server on every navigation. If you enter a URL in the address bar of your browser or click on a link in an MPA, the following series of events occurs:
+
+1. The browser sends a navigation request for the URL provided.
+2. The server responds with HTML in chunks.
+
+The last step of these is key. It's also one of the most fundamental performance optimizations in the server/browser exchange, and is known as _streaming_. If the server can begin sending HTML as soon as possible, and the browser doesn't wait for the entire response to arrive, the browser can process HTML in chunks as it arrives.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png", alt="A screenshot of parsing of HTML sent by the server visualized in the performance panel of Chrome DevTools. As the HTML streams in, chunks of it are processed across multiple shorter tasks, and rendering is incremental.", width="800", height="379" %}
+  <figcaption>
+    Parsing and rendering of HTML provided by the server as visualized in the performance panel of Chrome DevTools. The tasks involved in parsing HTML and rendering it are split into chunks.
+  </figcaption>
+</figure>
+
+Like most things that happen in the browser, parsing HTML occurs within tasks. When HTML is streamed from the server to the browser, the browser optimizes parsing of that HTML by doing so a bit at a time as bits of that stream arrive in chunks. The consequence is that the browser yields to the main thread periodically after processing each chunk, which avoids [long tasks](/long-tasks-devtools/#what-are-long-tasks). This means that other work can occur while HTML is being parsed, including the incremental rendering work necessary to present a page to the user, as well as processing user interactions that may occur during the page's crucial startup period. This approach translates to a better [Interaction to Next Paint (INP)](/inp/) score for the page.
+
+The takeaway? When you stream HTML from the server, **you get incremental parsing and rendering of HTML and automatic yielding to the main thread for free.** You don't get that with client-side rendering.
+
+## How the browser renders HTML provided by JavaScript
+
+While every navigation request to a page requires some amount of HTML to be provided by the server, some websites will use the SPA pattern. This approach often involves a minimal initial payload of HTML is provided by the server, but then the client will populate the main content area of a page with HTML assembled from data fetched from the server. Subsequent navigations—sometimes referred to as "soft navigations" in this case—are handled entirely by JavaScript to populate the page with new HTML.
+
+Client-side rendering may also occur in non-SPAs in more limited cases where HTML is dynamically added to the DOM through JavaScript.
+
+There are a few common ways of creating HTML or adding to the DOM through JavaScript:
+
+1. The [`innerHTML` property](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) allows you to set the content on an existing element via a string, which the browser parses into DOM.
+2. The [`document.createElement` method](https://developer.mozilla.org/docs/Web/API/Document/createElement) allows you to create new elements to be added to the DOM without using any browser HTML parsing.
+3. The [`document.write` method](https://developer.mozilla.org/docs/Web/API/Document/write) allows you to write HTML to the document (and the browser parses it, just like in approach #1). Due to [a number of reasons](https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()), however, **usage of `document.write` is strongly discouraged.**
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png", alt="A screenshot of parsing of HTML rendered via JavaScript visualized in the performance panel of Chrome DevTools. The work occurs in a single, long task that blocks the main thread.", width="800", height="141" %}
+  <figcaption>
+    Parsing and rendering of HTML through JavaScript on the client as visualized in the performance panel of Chrome DevTools. The tasks involved in parsing and rendering it are not chunked up, resulting in a long task that blocks the main thread.
+  </figcaption>
+</figure>
+
+The consequences of creating HTML/DOM through client-side JavaScript can be significant:
+
+- Unlike HTML streamed by the server in response to a navigation request, JavaScript tasks on the client are not automatically chunked up, which may result in long tasks that block the main thread. This means that your page's INP can be negatively affected if you're creating too much HTML/DOM at a time on the client.
+- If HTML is created on the client during startup, resources referenced within it [will _not_ be discovered by the browser preload scanner](/preload-scanner/#rendering-markup-with-client-side-javascript). This will certainly have a negative effect on a page's [Largest Contentful Paint (LCP)](/lcp/). While this is not a runtime performance issue (instead it's an issue of network delay in fetching important resources), you don't want your website's LCP to be affected by sidestepping this fundamental browser performance optimization.
+
+## What you can do about the performance impact of client-side rendering
+
+If your website depends heavily on client-side rendering and you've observed [poor INP values in your field data](/find-slow-interactions-in-the-field/), you might be wondering if client-side rendering has anything to do with the problem. For example, if your website is an SPA, your field data may reveal interactions responsible for considerable rendering work.
+
+Whatever the cause, here are some potential causes you can explore to help get things back on track.
+
+### Provide as much HTML from the server as possible
+
+As mentioned earlier, the browser handles HTML from the server in a very performant way by default. It will break up parsing and rendering of HTML in a way that avoids long tasks, and optimizes the amount of total main thread time. This leads to a lower [Total Blocking Time (TBT)](/tbt/), and TBT is [strongly correlated with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt).
+
+You may be relying on a frontend framework to build your website. If so, you'll want to make sure you're rendering component HTML on the server. This will limit the amount of initial client-side rendering your website will require, and should result in a better experience.
+
+- For React, you'll want to make use of the [Server DOM API](https://react.dev/reference/react-dom/server) to render HTML on the server. But be aware: the traditional method of server-side rendering uses [a synchronous approach](https://react.dev/reference/react-dom/server#server-apis-for-non-streaming-environments), which can lead to a longer [Time to First Byte (TTFB)](/ttfb/), as well as subsequent metrics such as [First Contentful Paint (FCP)](/fcp/) and LCP. Where possible, make sure you're using the streaming APIs for [Node.js](https://react.dev/reference/react-dom/server#server-apis-for-nodejs-streams) or [other JavaScript runtimes](https://react.dev/reference/react-dom/server#server-apis-for-web-streams) so that the server can begin streaming HTML to the browser as soon as possible. Next.js—a React-based framework—provides many best practices by default. In addition to automatically rendering HTML on the server, it can also statically generate HTML for pages that don't change based on user context (such as authentication).
+- Vue also performs client-side rendering by default. However, like React, Vue can also [render your component HTML on the server](https://vuejs.org/guide/scaling-up/ssr.html). Either take advantage of these server-side APIs where possible, or consider a [higher-level abstraction](https://vuejs.org/guide/scaling-up/ssr.html#higher-level-solutions) for your Vue project to make the best practices easier to implement.
+- Svelte [renders HTML on the server](https://learn.svelte.dev/tutorial/ssr) by default—although if your component code needs access to browser-exclusive namespaces (`window`, for example), you may not be able to render that component's HTML on the server. Explore alternative approaches wherever possible so that you're not causing unnecessary client-side rendering. [SvelteKit](https://kit.svelte.dev/)—which is to Svelte as Next.js is to React—embeds many best practices into your Svelte projects as possible, so you can avoid potential pitfalls in projects that use Svelte alone.
+
+{% Aside 'important' %}
+If your application uses either of these frameworks and requires interactivity on the client, you'll still need to [hydrate your components on the client](/rendering-on-the-web/#combining-server-rendering-and-csr-via-rehydration) so that they'll be interactive. For a comprehensive evaluation of the different approaches to rendering HTML, and for some advice on how to handle component hydration on the client with performance in mind, read [Rendering on the web](/rendering-on-the-web/).
+{% endAside %}
+
+### Limit the amount of DOM nodes created on the client
+
+When DOMs are large, the amount of processing time required to render them tends to increase. Whether your website is a full-fledged SPA, or is injecting new nodes into an existing DOM as the result of an interaction for an MPA, consider keeping those DOMs as small as possible. This will help reduce the work required during client-side rendering to display that HTML, hopefully helping to keep your website's INP lower.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[DOM size and interactivity](/dom-size-and-interactivity/).
+{% endAside %}
+
+### Consider a streaming service worker architecture
+
+This is an advanced technique—one that may not work easily with every use case—but it's one that can turn your MPA into a website that feels like it's loading instantly when users navigate from one page to the next. You can use a service worker to precache the static parts of your website in [`CacheStorage`](https://developer.mozilla.org/docs/Web/API/CacheStorage) while using the [`ReadableStream` API](https://developer.mozilla.org/docs/Web/API/ReadableStream) to fetch the rest of a page's HTML from the server.
+
+When you use this technique successfully, you aren't creating HTML on the client, but the instant loading of content partials from the cache will give the impression that your site is loading quickly. Websites using this approach can feel almost like an SPA, but without the downfalls of client-side rendering. It also [reduces the amount of HTML you're requesting from the server](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/).
+
+In short, a streaming service worker architecture doesn't _replace_ the browser's built-in navigation logic—it _adds_ to it. For more information on how to achieve this with [Workbox](https://developer.chrome.com/docs/workbox/), read [Faster multipage applications with streams](https://developer.chrome.com/docs/workbox/faster-multipage-applications-with-streams/).
+
+## Conclusion
+
+How your website receives and renders HTML has an impact on performance. When you rely on the server to send all (or the bulk of) the HTML required for your website to function, you're getting a lot for free: incremental parsing and rendering, and automatic yielding to the main thread to avoid long tasks.
+
+Client-side HTML rendering introduces a number of potential performance issues that can be avoidable in many cases. Due to each individual website's requirements, however, it's not entirely avoidable 100% of the time. To mitigate the potential long tasks that can result from excessive client-site rendering, make sure you're sending as much of your website's HTML from the server whenever possible, keep your DOM sizes as small as possible for HTML that must be rendered on the client, and consider alternative architectures to speed the delivery of HTML to the client while also taking advantage of the incremental parsing and rendering the browser provides for HTML loaded from the server.
+
+If you can get your website's client-side rendering to be as minimal as possible, you'll improve not just your website's INP, but other metrics such as LCP, TBT, and possibly even your TTFB in some cases.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Maik Jonietz](https://unsplash.com/de/fotos/nZcMWOKAJrY)._
diff --git a/src/site/content/en/how-to-optimize-inp/diagnose-slow-interactions-in-the-lab/index.md b/src/site/content/en/how-to-optimize-inp/diagnose-slow-interactions-in-the-lab/index.md
new file mode 100644
index 00000000000..33bb0fa23ab
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/diagnose-slow-interactions-in-the-lab/index.md
@@ -0,0 +1,246 @@
+---
+layout: post
+title: Diagnose slow interactions in the lab
+subhead: |
+  Learn how to take your field data into the lab to reproduce and identify the causes behind slow interactions.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/D4fgU9geyo1xm2vd9q4J.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qgattSatrRyStFVkwakj.jpg
+alt: A photo of a dropper placing a purple liquid into various collection tubes.
+description: |
+  You've looked through your field data and you have some slow interactions on your hands. Now to learn more about testing those interactions, and identifying the causes behind them.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+One challenging aspect of optimizing [Interaction to Next Paint (INP)](/inp/) is figuring out what's causing poor INP. There's a large variety of potential causes: third-party scripts that schedule many tasks on the main thread, large [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) sizes, expensive event callbacks, and so on.
+
+Finding ways to fix poor INP can be difficult. To start, you have to know which interactions tend to be responsible for a page's INP. If you don't know this already, start by reading [Find slow interactions in the field](/find-slow-interactions-in-the-field/). Once you have that field data and know what interactions to test, you can do so in lab tools to work out why those interactions are slow.
+
+## What if you don't have field data?
+
+Ideally, you'll want field data, as it saves you a lot of time trying to figure out which interactions need to be optimized. You might be in a position where you don't have field data, though. If that's your situation, you can still find interactions to improve: you'll just have to take a different approach.
+
+[Total Blocking Time (TBT)](/tbt/) is a metric that assesses page responsiveness during load. [It correlates very well with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt), and can give you an idea if there might be interactions you can profile while the page is loading.
+
+You can use either [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) or [PageSpeed Insights](https://pagespeed.web.dev/) to measure your page's TBT. If your TBT is either poor or needs improvement, there's a good chance there are interactions that might be slow during page load.
+
+To find slow interactions after the page has loaded, you might need to rely on other types of data, such as common user flows that you may already have in your website's analytics. If you work on an ecommerce website, for example, a common user flow would be the actions users take when they're adding items to an online shopping cart or going through an online checkout.
+
+Whether or not you have field data, the next step involves reproducing that interaction—because it's only when you're able to conclusively identify a slow interaction that you'll be able to fix it.
+
+## Reproducing slow interactions in the lab
+
+Once you've identified a slow interaction, the next step is to test it in the lab to see if it's reliably slow.
+
+### Don't reach for the performance profiler right away
+
+Chrome performance profiler—while invaluable—doesn't provide a live view while interacting with the page. It's more efficient to test interaction latency in a much faster way first, so you can quickly assess whether a given interaction is reliably slow, and then reach for the performance profiler when you need more information.
+
+#### Use the Web Vitals Chrome Extension
+
+The [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en) involves the lowest amount of effort in testing interaction latency. Once installed, the extension will display interaction data in the console if you do the following:
+
+1. In Chrome, click the extensions icon to the right of the address bar.
+2. Locate the Web Vitals extension in the drop-down menu.
+3. Click the icon at the right to open the extension's settings.
+4. Click **Options**.
+5. Enable the **Console logging** checkbox in the resulting screen, and then click **Save**.
+
+Once this has been done, open the console in Chrome DevTools, and begin testing the desired interactions on your website. As you interact with the page, you'll receive useful console logs giving you detailed diagnostic information for the interaction.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png", alt="A screenshot of the console logging that the Web Vitals extension provides for interactions. The logging contains details such timings and other contextual information.", width="800", height="264" %}
+  <figcaption>
+    A console entry from the Web Vitals extension when console logging is turned on. Each qualifying interaction will log interaction data to the console.
+  </figcaption>
+</figure>
+
+#### Use a JavaScript snippet
+
+Using the Web Vitals extension may not be a viable option for a number of reasons. Extensions can be blocked in some cases, and they also can't be installed on mobile devices. The latter is problematic if you want to test on a physical Android device with [remote debugging](https://developer.chrome.com/docs/devtools/remote-debugging/).
+
+An alternate method involves copying and pasting some JavaScript into the console of Chrome DevTools. The following code yields the same console output as the Web Vitals extension for every interaction:
+
+```js
+let worstInp = 0;
+
+const observer = new PerformanceObserver((list, obs, options) => {
+  for (let entry of list.getEntries()) {
+    if (!entry.interactionId) continue;
+
+    entry.renderTime = entry.startTime + entry.duration;
+    worstInp = Math.max(entry.duration, worstInp);
+      
+    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
+  }
+});
+
+observer.observe({
+  type: 'event',
+  durationThreshold: 0, // 16 minimum by spec
+  buffered: true
+});
+```
+
+{% Aside %}
+A more convenient way of using the preceding code is to use the [snippets feature in Chrome DevTools](https://developer.chrome.com/docs/devtools/javascript/snippets/).
+{% endAside %}
+
+Once you have determined that the interaction is reliably slow, you can then profile the interaction to get more detailed information on _why_ that interaction is slow.
+
+#### What if you can't reproduce a slow interaction?
+
+What if you've managed to find something in your field data that suggests a particular interaction is slow, but you can't reproduce it in the lab?
+
+For one, this is a common challenge in troubleshooting performance issues of any kind. Your point of view when testing is entirely relative and dependent on the hardware you're using. After all, you may be on a fast device with a fast internet connection—but that doesn't mean your users are too. For this situation you can do one of three things:
+
+1. If you have a physical Android device, use [remote debugging](https://developer.chrome.com/docs/devtools/remote-debugging/) to open a Chrome DevTools instance on your host machine and try to reproduce slow interactions there.
+2. If you don't have a physical device, [enable the CPU throttling feature in Chrome DevTools](https://umaar.com/dev-tips/88-cpu-throttling/).
+3. Follow both steps 1 and 2, as you can also enable CPU throttling on the DevTools instance for a physical Android device.
+
+Another cause could be that you're waiting for a page to load before you interact with it, but your users are not. If you're on a fast network, enable [network throttling](https://developer.chrome.com/docs/devtools/settings/throttling/) and interact with the page as soon as it paints. You should do this because the main thread is often busiest during startup, and testing at that time might help reveal what your users are actually experiencing.
+
+### Record a trace
+
+To get more information on why an interaction is slow, you'll need to take things to the next level by [using the performance profiler in Chrome DevTools](https://developer.chrome.com/docs/devtools/performance/). To profile an interaction in Chrome's performance profiler, do the following:
+
+1. With the page you need to profile loaded and ready for interactions, open Chrome DevTools and go to the **Performance** panel.
+2. Click the **Record** button at the upper left of the panel to start tracing.
+3. Perform the desired interaction.
+4. Click the **Record** button again to stop tracing.
+
+When the profile populates, the first place to look should be the activity summary at the top of the profiler. The activity summary will show red bars at the top where long tasks occurred in the recording. This allows you to quickly zoom in on problem areas.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png", alt="A screenshot of the activity summary in the performance panel of Chrome DevTools. The activity displayed is mostly from JavaScript that causes a long task, which is highlighted in red above the flame chart.", width="674", height="126" %}
+  <figcaption>
+    The activity summary at the top of Chrome's performance profiler. Long tasks are highlighted in red above the activity flame chart. In this case, significant scripting work was responsible for most of the work in the long task.
+  </figcaption>
+</figure>
+
+You can quickly focus on the problem area by dragging and selecting a region in the activity summary. Once you've focused to where the interaction occurred, the **Interactions** track will help you line up the interaction and the activity that occurred in the main thread track below it:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png", alt="A screenshot of an interaction as visualized in the performance panel of Chrome DevTools. An interactions track above the main thread track shows the duration of an interaction, which can be lined up with main thread activity.", width="800", height="325" %}
+  <figcaption>
+    An interaction profiled in the performance profiler in Chrome's DevTools. The <strong>Interactions</strong> track shows a series of events that amount to a click interaction. The Interactions track entries span across the tasks responsible for driving the interaction.
+  </figcaption>
+</figure>
+
+From here, it's a matter of observing what the problem with the interaction might be. There are many things that can contribute to high interaction latency, so let's go through what some of the culprits could be.
+
+### Use Lighthouse timespans as an alternative to tracing
+
+Chrome's performance profiler—while rich with diagnostic information—can be a bit intimidating to the uninitiated. One alternative to the performance profiler is Lighthouse's timespan mode. To use this mode, do the following:
+
+1. With DevTools open, go to the **Lighthouse** tab in DevTools.
+2. Under the section labeled **Mode**, select the **Timespan** option.
+3. Select the desired device type under the section labeled **Device**.
+4. Ensure at least the checkbox labeled **Performance** is selected under the **Categories** label.
+5. Click the **Start timespan** button.
+6. Test the desired interaction(s) on the page.
+7. Click the **End timespan** button and wait for the audit to appear
+8. Once the audit populates in the Lighthouse tab, you can filter the audits by INP by clicking the **INP** link next to the label which reads **Show audits relevant to**.
+
+At this point, you'll see a drop-down list for audits that have failed or passed. When you expand that drop-down, you'll probably see a breakdown of time spent during the interaction.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg", alt="A screenshot of a Lighthouse audit provided by its timespan mode. The audit is specific to INP, and shows details for an interaction, including a screenshot of the element that triggered it, and a table beneath detailing where time was spent processing the interaction.", width="800", height="662" %}
+  <figcaption>
+    An interaction profiled in Lighthouse's timespan mode. When interactions are made with the page, Lighthouse provides an audit detailing where the time during an interaction was spent, and breaks it down by input delay, processing delay, and presentation delay.
+  </figcaption>
+</figure>
+
+{% Aside %}
+If you want to further investigate the cause behind a slow interaction, you can do so by clicking the **View Trace** button just above the filmstrip. This will take you to the performance profiler that shows interactions details for the interactions that you tested in the timespan mode.
+{% endAside %}
+
+## How to identify long input delays
+
+One thing that could be contributing to high interaction latency is input delay. The _input delay_ is the first phase of an interaction. This is the period of time from when the user action is first received by the operating system until the browser is able to start processing the first event triggered by that input. The input delay ends right as the event callbacks for the interaction begin to run.
+
+Identifying input delay in Chrome's performance profiler can be done by finding the start of an interaction in the interactions panel, and then finding the beginning of when the event callbacks for that interaction start to run.
+
+You'll always incur at least some input delay, as it takes some time for the operating system to pass the input event to the browser—but you do have some control over how long the input delay is. **The key is to figure out if there is work running on the main thread that's preventing your callbacks from running.**
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png", alt="A depiction of input delay in Chrome's performance panel. The start of the interaction comes significantly before the event callbacks because of increased input delay due to a timer firing from a third-party script.", width="800", height="291" %}
+  <figcaption>
+    Input delay caused by a task fired by a timer from a third-party script.
+  </figcaption>
+</figure>
+
+In the previous figure, a task from a third-party script is running as the user attempts to interact with the page, and therefore extends the input delay. The extended input delay affects the interaction's latency, and could therefore affect the page's INP.
+
+For more information on how you can resolve long input delays, read about how you can [identify and reduce input delay](/optimize-input-delay/).
+
+## How to identify expensive event callbacks
+
+Event callbacks occur immediately after the input delay. If an event callback runs too long, it delays the browser from presenting the next frame, and can add significantly to an interaction's total latency. Event callbacks can often run for too long, whether they run as the result of first-party or third-party JavaScript—and in some cases, both.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png", alt="A depiction of event callback tasks in Chrome's performance panel. The event callbacks occur for the pointerdown and click events, which occur in a long task.", width="800", height="291" %}
+  <figcaption>
+    The event callbacks that run in response to a click interaction, as shown in the performance profiler in Chrome DevTools. Note the red triangle in the upper right corner of both the <strong>Event: pointerdown</strong> and <strong>Event: click</strong> entries, which identifies expensive event callbacks.
+  </figcaption>
+</figure>
+
+Finding expensive event callbacks can be done by observing the following in a trace for a specific interaction:
+
+1. Determine whether the task associated with the event callbacks is a [long task](/long-tasks-devtools/#what-are-long-tasks). To reveal long tasks in a lab setting more reliably, you may need to [enable CPU throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) in the performance panel, or connect a low to mid-tier Android device and use [remote debugging](https://developer.chrome.com/docs/devtools/remote-debugging/).
+2. If the task that runs the event callbacks is a long task, look for event handler entries (entries with names such as **Event: click**, for example) in the call stack that have a red triangle at the upper right corner of the entry. These are expensive event callbacks.
+
+To address expensive event callbacks, try one of the following strategies:
+
+1. **Do as little work as possible.** Is everything that happens in an expensive event callback strictly necessary? If not, consider removing that code altogether if you can, or deferring its execution to a later point in time if you can't. You can also take advantage of framework features to help. For example, React's [`PureComponent` class](https://beta.reactjs.org/reference/react/PureComponent) and [memoization feature](https://react.dev/reference/react/memo) can skip unnecessary rendering work when props and state haven't changed for a component.
+2. **Defer non-rendering work in the event callback to a later point in time.** Long tasks can be broken up by [yielding to the main thread](/optimize-long-tasks/#use-asyncawait-to-create-yield-points). Whenever you yield to the main thread, you're ending execution of the current task and breaking up the remainder of the work into a separate task. This gives the renderer a chance to process updates to the user interface that were processed earlier in the event callback. If you happen to be developing in React, its [transitions feature](https://react.dev/reference/react/useTransition) will do this for you.
+
+By employing these strategies, you should be able to get your event callbacks in a place where they're responding more quickly to user input.
+
+## How to identify presentation delays
+
+Long input delays and expensive event callbacks aren't the only possible culprits of poor INP. Sometimes the rendering updates that occur in response to even small amounts of event callback code can be expensive. The time it takes for the browser to render visual updates to the user interface to reflect the result of an interaction is known as _presentation delay_.
+
+{% Aside 'important' %}
+The [rendering performance guide](/rendering-performance/) is a good primer on understanding how the browser renders a page. [Life of a pixel](https://www.youtube.com/watch?v=K2QHdgAKP-s) goes further in depth on how rendering works in Chromium-based browsers.
+{% endAside %}
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png", alt="Rendering work as visualized in the performance panel of Chrome DevTools. The rendering work occurs after the event callback in order to paint the next frame.", width="800", height="229" %}
+  <figcaption>
+    Rendering tasks as shown in Chrome's performance profiler. The rendering work is shown in purple, with paint work in green.
+  </figcaption>
+</figure>
+
+{% Aside 'important' %}
+When profiling slow interactions due to expensive rendering work, you should enable the **Screenshots** checkbox at the top of the performance profiler. This will help you to line up user interface updates with the corresponding rendering work on the main thread.
+{% endAside %}
+
+Of all the possible causes of high interaction latency, rendering work can be the most difficult to troubleshoot and fix, but the result is worth the effort. Excessive rendering work could be caused by any of the following:
+
+- **Large DOM sizes.** Rendering work often increases along with the size of the page's DOM. For more information, read [How large DOM sizes affect interactivity—and what you can do about it](/dom-size-and-interactivity/).
+- **Forced reflows.** This happens when you apply style changes to elements in JavaScript, and _then_ query the results of that work. The result is that the browser has to perform the layout work before doing anything else, so that the browser can return the updated styles. For more information and tips on avoiding forced reflows, read [Avoid large, complex layouts and layout thrashing](/avoid-large-complex-layouts-and-layout-thrashing/).
+- **Excessive or unnecessary work in [`requestAnimationFrame`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) callbacks.** `requestAnimationFrame()` callbacks are run during the rendering phase of the event loop, and must complete before the next frame can be presented. If you're using `requestAnimationFrame()` to do work that doesn't involve changes to the user interface, understand that you could be delaying the next frame.
+- **[`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) callbacks.** Such callbacks run prior to rendering, and may delay presentation of the next frame if the work in them is expensive. As with event callbacks, defer any logic not needed for the next frame.
+
+{% Aside 'important' %}
+Troubleshooting might be made easier by enabling the **Timeline: event initiators** experiment in Chrome DevTools. Enabling this experiment will draw an arrow from any style recalculation task to the JavaScript task that kicked it off. To enable this experiment, go into the Chrome DevTools settings, click on **Experiments** in the left hand menu, the click the checkbox labeled **Timeline: event initiators**, and restart DevTools.
+{% endAside %}
+
+## Troubleshooting INP is an iterative process
+
+Finding out what's causing high interaction latency that contributes to poor INP takes a lot of work—but if you can pin down the causes, you're halfway there. By following a methodical approach to troubleshooting poor INP, you can reliably pin down what's causing a problem, and arrive more quickly to the right fix. To review:
+
+- [Rely on field data to find slow interactions](/find-slow-interactions-in-the-field/).
+- Test problematic field interactions in the lab to see if they're reproducible.
+- Identify whether the cause is due to long input delay, expensive event callbacks, or expensive rendering work.
+- Repeat.
+
+The last of these is the most important. Like most other work you must do to improve page performance, troubleshooting and improving INP is a cyclical process. When you fix one slow interaction, you'll need to move onto the next, and continue to do so until you start to see results. Stay vigilant!
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Louis Reed](https://unsplash.com/@_louisreed)._
diff --git a/src/site/content/en/how-to-optimize-inp/dom-size-and-interactivity/index.md b/src/site/content/en/how-to-optimize-inp/dom-size-and-interactivity/index.md
new file mode 100644
index 00000000000..46601dfdfd9
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/dom-size-and-interactivity/index.md
@@ -0,0 +1,164 @@
+---
+layout: post
+title: How large DOM sizes affect interactivity, and what you can do about it
+subhead: |
+  Large DOM sizes have more of an effect on interactivity than you might think. This guide explains why, and what you can do.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pUkrnwlKeVr2PXK8nfyY.jpg
+Thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aOStgq7HBKxGMfe8XpXt.jpg
+alt: A photo of numerous crates, stacked loosely atop one another in rows.
+description: |
+  Large DOM sizes can be a factor in whether interactions are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+There's no way around it: when you build a web page, that page is going to have a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). The DOM represents the structure of your page's HTML, and gives JavaScript and CSS access to a page's structure and contents.
+
+The problem, however, is that the _size_ of the DOM affects a browser's ability to render a page quickly and efficiently. Generally speaking, the larger a DOM is, the more expensive it is to initially render that page and update its rendering later on in the page lifecycle.
+
+This becomes problematic in pages with very large DOMs when interactions that modify or update the DOM trigger expensive layout work that affects the ability of the page to respond quickly. Expensive layout work can affect a page's [Interaction to Next Paint (INP)](/inp/); If you want a page to respond quickly to user interactions, it's important to ensure your DOM sizes are only as large as necessary.
+
+## When is a page's DOM _too_ large?
+
+{% Aside 'key-term' %}
+It's important to know the difference between DOM elements and DOM nodes. A DOM _element_ refers to a specific [HTML element](https://developer.mozilla.org/docs/Web/API/HTMLElement) in the DOM tree. A [DOM _node_](https://developer.mozilla.org/docs/Web/API/Node) has overlapping meaning with the DOM element term, but its definition is expanded to include comments, whitespace, and text. While the [Lighthouse DOM size audit](https://developer.chrome.com/en/docs/lighthouse/performance/dom-size/) refers to DOM nodes, this guide will refer to DOM elements over nodes whenever possible.
+{% endAside %}
+
+[According to Lighthouse](https://developer.chrome.com/en/docs/lighthouse/performance/dom-size/#how-the-lighthouse-dom-size-audit-fails), a page's DOM size is excessive when it exceeds 1,400 nodes. Lighthouse will begin to throw warnings when a page's DOM exceeds 800 nodes. Take the following HTML for example:
+
+```html
+<ul>
+  <li>List item one.</li>
+  <li>List item two.</li>
+  <li>List item three.</li>
+</ul>
+```
+
+In the above code, there are four DOM elements: the `<ul>` element, and its three `<li>` child elements. Your web page will almost certainly have many more nodes than this, so it's important to understand what you can do to keep DOM sizes in check—as well as other strategies to optimize the rendering work once you've gotten a page's DOM as small as it can be.
+
+## How do large DOMs affect page performance?
+
+Large DOMs affect page performance in a few ways:
+
+1. During the page's initial render. When CSS is applied to a page, a structure similar to the DOM known as the [CSS Object Model (CSSOM)](/critical-rendering-path-constructing-the-object-model/#css-object-model-cssom) is created. As CSS selectors increase in specificity, the CSSOM becomes more complex, and more time is needed to run the necessary layout, styling, compositing, and paint work necessary to draw the web page to the screen. This added work increases interaction latency for interactions that occur early on during page load.
+2. When interactions modify the DOM, either through element insertion or deletion, or by modifying DOM contents and styles, the work necessary to render that update can result in very costly layout, styling, compositing, and paint work. As is the case with the page's initial render, an increase in CSS selector specificity can add to rendering work when HTML elements are inserted into the DOM as the result of an interaction.
+3. When JavaScript queries the DOM, references to DOM elements are stored in memory. For example, if you call [`document.querySelectorAll`](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll) to select all `<div>` elements on a page, the memory cost could be considerable if the result returns a large number of DOM elements.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png", alt="A screenshot of a long task caused by excessive rendering work in the performance panel of Chrome DevTools. The long task's call stack shows significant time spent recalculating page styles, as well as pre-paint.", width="800", height="248" %}
+  <figcaption>
+    A long task as shown in the performance profiler in Chrome DevTools. The long task shown is caused by inserting DOM elements into a large DOM via JavaScript.
+  </figcaption>
+</figure>
+
+All of these can affect interactivity, but the second item in the list above is of particular importance. If an interaction results in a change to the DOM, it can kick off a lot of work that can contribute to a poor INP on a page.
+
+## How do I measure DOM size?
+
+You can measure DOM size in a couple of ways. The first method uses Lighthouse. When you run an audit, statistics on the current page's DOM will be in the "Avoid an excessive DOM size" audit under the "Diagnostics" heading. In this section, you can see the total number of DOM elements, the DOM element containing the most child elements, as well as the deepest DOM element.
+
+A simpler method involves using the JavaScript console in the developer tools in any major browser. To get the total number of HTML elements in the DOM, you can use the following code in the console after the page has loaded:
+
+```js
+document.querySelectorAll('*').length;
+```
+
+{% Aside %}
+Note that the code snippet above only includes the number of HTML _elements_ in the DOM. It doesn't include all the _nodes_ in the DOM.
+{% endAside %}
+
+If you want to see the DOM size update in realtime, you can also use the [performance monitor tool](https://developer.chrome.com/blog/new-in-devtools-64/#perf-monitor). Using this tool, you can correlate layout and styling operations (and other performance aspects) along with the current DOM size.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png", alt="A screenshot of the performance monitor in Chrome DevTools. At left, there are various aspects of page performance that can be continuously monitored during the life of the page. In the screenshot, the number of DOM nodes, layouts per second, and style recalculations per section are actively being monitored.", width="800", height="273" %}
+  <figcaption>
+    The performance monitor in Chrome DevTools. In this view, the page's current number of DOM nodes is charted along with layout operations and style recalculations performed per second.
+  </figcaption>
+</figure>
+
+If the DOM's size is approaching Lighthouse DOM size's warning threshold—or fails altogether—the next step is to figure out how to reduce the DOM's size to improve your page's ability to respond to user interactions so that your website's INP can improve.
+
+## How can I measure the number of DOM elements affected by an interaction?
+
+If you're profiling a slow interaction in the lab that you suspect might have something to do with the size of the page's DOM, you can figure out how many DOM elements were affected by selecting any piece of activity in the profiler labeled "Recalculate Style" and observe the contextual data in the bottom panel.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png", alt="A screenshot of selected style recalculation activity in the performance panel of Chrome DevTools. At top, the interactions track shows a click interaction, and the majority of the work is spent doing style recalculation and pre-paint work. At the bottom, a panel shows more detail for the selected activity, which reports that 2,547 DOM elements were affected.", width="800", height="639" %}
+  <figcaption>
+    Observing the number of affected elements in the DOM as the result of style recalculation work. Note that the shaded portion of the interaction in the interactions track represents the portion of the interaction duration that was over 200 milliseconds, which is <a href="https://web.dev/inp/#what-is-a-good-inp-score" rel="noopener">the designated "good" threshold for INP</a>.
+  </figcaption>
+</figure>
+
+In the above screenshot, observe that the style recalculation of the work—when selected—shows the number of affected elements. While the above screenshot shows an extreme case of the effect of DOM size on rendering work on a page with many DOM elements, this diagnostic info is useful in any case to determine if the size of the DOM is a limiting factor in how long it takes for the next frame to paint in response to an interaction.
+
+## How can I reduce DOM size?
+
+Beyond auditing your website's HTML for unnecessary markup, the principal way to reduce DOM size is to reduce DOM depth. One signal that your DOM might be unnecessarily deep is if you're seeing markup that looks something like this in the **Elements** tab of your browser's developer tools:
+
+```html
+<div>
+  <div>
+    <div>
+      <div>
+        <!-- Contents -->
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+When you see patterns like this, you can probably simplify them by flattening your DOM structure. Doing so will reduce the number of DOM elements, and likely give you an opportunity to simplify page styles.
+
+DOM depth may also be a symptom of the frameworks you use. In particular, component-based frameworks—such as those that rely on [JSX](https://reactjs.org/docs/introducing-jsx.html)—require you to nest multiple components in a parent container.
+
+However, many frameworks allow you to avoid nesting components by using what are known as fragments. Component-based frameworks that offer fragments as a feature include (but are not limited to) the following:
+
+- [React](https://reactjs.org/docs/fragments.html)
+- [Preact](https://preactjs.com/guide/v10/components/#fragments)
+- [Vue](https://v3-migration.vuejs.org/new/fragments.html)
+- [Svelte](https://svelte.dev/tutorial/svelte-fragment)
+
+By using fragments in your framework of choice, you can reduce DOM depth. If you're concerned about the impact flattening DOM structure has on styling, you might benefit from using more modern (and faster) layout modes such as [flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox) or [grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout).
+
+## Other strategies to consider
+
+Even if you take pains to flatten your DOM tree and remove unnecessary HTML elements to keep your DOM as small as possible, it can still be quite large and kick off a lot of rendering work as it changes in response to user interactions. If you find yourself in this position, there are some other strategies you can consider to limit rendering work.
+
+### Consider an additive approach
+
+You might be in a position where large parts of your page aren't initially visible to the user when it first renders. This could be an opportunity to lazy load HTML by omitting those parts of the DOM on startup, but add them in when the user interacts with the parts of the page that require the initially hidden aspects of the page.
+
+This approach is useful both during the initial load and perhaps even afterwards. For the initial page load, you're taking on less rendering work up front, meaning that your initial HTML payload will be lighter, and will render more quickly. This will give interactions during that crucial period more opportunities to run with less competition for the main thread's attention.
+
+If you have many parts of the page that are initially hidden on load, it could also speed up other interactions that trigger re-rendering work. However, as other interactions add more to the DOM, rendering work will increase as the DOM grows throughout the page lifecycle.
+
+Adding to the DOM over time can be tricky, and it has its own tradeoffs. If you're going this route, you're likely making network requests to get data to populate the HTML you intend to add to the page in response to a user interaction. While in-flight network requests are not counted towards INP, it can increase perceived latency. If possible, show a loading spinner or other indicator that data is being fetched so that users understand that something is happening.
+
+### Limit CSS selector complexity
+
+When the browser parses selectors in your CSS, it has to traverse the DOM tree to understand how—and if—those selectors apply to the current layout. The more complex these selectors are, the more work the browser has to do in order to perform both the initial rendering of the page, as well as increased style recalculations and layout work if the page changes as the result of an interaction.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Reduce the scope and complexity of style calculations](/reduce-the-scope-and-complexity-of-style-calculations/).
+{% endAside %}
+
+### Use the `content-visibility` property
+
+CSS offers the `content-visibility` property, which is effectively a way to lazily render off-screen DOM elements. As the elements approach the viewport, they're rendered on demand. The benefits of `content-visibility` don't just cut out a significant amount of rendering work on the initial page render, but also skip rendering work for offscreen elements when the page DOM is changed as the result of a user interaction.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[`content-visibility`: the new CSS property that boosts your rendering performance](/content-visibility/).
+{% endAside %}
+
+## Conclusion
+
+Reducing your DOM size to only what is strictly necessary is a good way to optimize your website's INP. By doing so, you can reduce the amount of time it takes for the browser to perform layout and rendering work when the DOM is updated. Even if you can't meaningfully reduce DOM size, there are some techniques you can use to isolate rendering work to a DOM subtree, such as CSS containment and the `content-visibility` CSS property.
+
+However you go about it, creating an environment where rendering work is minimized—as well as reducing the amount of rendering work your page does in response to interactions—the result will be that your website will feel more responsive to users when they interact with them. That means you'll have a lower INP for your website, and that translates to a better user experience.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Louis Reed](https://unsplash.com/@_louisreed)._
diff --git a/src/site/content/en/how-to-optimize-inp/find-slow-interactions-in-the-field/index.md b/src/site/content/en/how-to-optimize-inp/find-slow-interactions-in-the-field/index.md
new file mode 100644
index 00000000000..eb65c30c8ab
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/find-slow-interactions-in-the-field/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: Find slow interactions in the field
+subhead: |
+  Learn how to find slow interactions in your website's field data so you can find opportunities to improve its Interaction to Next Paint.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS778yALdGSMtVQ5Z26E.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3pa3Lf9rntLDvO1T6KI.jpg
+alt: A photo of a wide open golden field under a swift sunrise.
+description: |
+  Before you can reproduce slow interactions in the lab to optimize your website's Interaction to Next Paint, you'll need to lean on field data to find them. Learn how to do just that in this guide.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Field data](/lab-and-field-data-differences/#field-data) is _the_ authoritative source when it comes to how actual users are experiencing your website. It teases out issues you may not see in [lab data](/lab-and-field-data-differences/#lab-data) alone. While interactions can be simulated in lab-based tools, you're not going to be able to reproduce every single interaction in the lab in the way that users in the field experience them. Gathering field data for [Interaction to Next Paint (INP)](/inp/) is critical to understanding how responsive your page is to real users, and it contains the clues to make their experience even better.
+
+## What you should collect in the field and why
+
+When collecting INP data in the field, you'll want to capture the following to give context to why interactions were slow:
+
+- **The INP value.** This is the key piece of data you'll need to collect. The distribution of these values will determine whether the page meets [the INP thresholds](/inp/#what-is-a-good-inp-score).
+- **The element selector string responsible for the page's INP.** Knowing a page's INP is good, but not good enough by itself. Without knowing what element was responsible for it, you'll be in the dark. By logging element selector strings, you’ll know exactly what elements are responsible for interactions.
+- **The loading state of the page for the interaction that is the page's INP.** When a page is loading, it's reasonable to assume that there's more main thread activity occurring that could result in higher interaction latency. During page load, there's HTML parsing, stylesheet parsing, and JavaScript evaluation and execution going on. Knowing whether an interaction has taken place during page load or afterwards helps you to figure out if you need to optimize for faster startup so interactions have more room on the main thread to run quickly, or if the interaction responsible for the page's INP in itself is slow regardless.
+- **The interaction's `startTime`.** Logging the interaction's [`startTime`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry/startTime) lets you know exactly when the interaction occurred on the performance timeline.
+- **The event type.** The [event type](https://developer.mozilla.org/docs/Web/API/Event/type) is good to know, as it will tell you whether the interaction was the result of a `click`, `keypress`, or other eligible event type. A user interaction may contain multiple callbacks, and can help you to pinpoint exactly which event callback in the interaction took the longest to run.
+
+While this all seems like a lot to take into account, you don't have to reinvent the wheel to get there. Thankfully, this data is exposed in the [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals), and you'll learn how to gather it in the next section.
+
+## Measure interactions in the field with the `web-vitals` JavaScript library
+
+The `web-vitals` JavaScript library is a great way to find slow interactions in the field, thanks in large part to its ability to provide [attribution](https://github.com/GoogleChrome/web-vitals#attribution-build) for what's causing them. INP can be collected in browsers that support the [Event Timing API](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming) and its [`interactionId` property](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming/interactionId).
+
+{% BrowserCompat 'api.PerformanceEventTiming.interactionId' %}
+
+Using a [Real User Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) provider to get INP is most convenient, but not always an option. If that's your case, for example, you can use the `web-vitals` JavaScript library to collect and transmit INP data to Google Analytics for later evaluation:
+
+```js
+// Be sure to import from the attribution build:
+import {onINP} from 'web-vitals/attribution';
+
+function sendToGoogleAnalytics ({name, value, id, attribution}) {
+  // Destructure the attribution object:
+  const {eventEntry, eventTarget, eventType, loadState} = attribution;
+
+  // Get timings from the event timing entry:
+  const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;
+
+  const eventParams = {
+    // The page's INP value:
+    metric_inp_value: value,
+    // A unique ID for the page session, which is useful
+    // for computing totals when you group by the ID.
+    metric_id: id,
+    // The event target (a CSS selector string pointing
+    // to the element responsible for the interaction):
+    metric_inp_event_target: eventTarget,
+    // The type of event that triggered the interaction:
+    metric_inp_event_type: eventType,
+    // Whether the page was loaded when the interaction
+    // took place. Useful for identifying startup versus
+    // post-load interactions:
+    metric_inp_load_state: loadState,
+    // The time (in milliseconds) after page load when
+    // the interaction took place:
+    metric_inp_start_time: startTime,
+    // When processing of the event callbacks in the
+    // interaction started to run:
+    metric_inp_processing_start: processingStart,
+    // When processing of the event callbacks in the
+    // interaction finished:
+    metric_inp_processing_end: processingEnd,
+    // The total duration of the interaction. Note: this
+    // value is rounded to 8 milliseconds of granularity:
+    metric_inp_duration: duration,
+    // The interaction ID assigned to the interaction by
+    // the Event Timing API. This could be useful in cases
+    // where you might want to aggregate related events:
+    metric_inp_interaction_id: interactionId
+  };
+
+  // Send to Google Analytics
+  gtag('event', name, eventParams);
+}
+
+// Pass the reporting function to the web-vitals INP reporter:
+onINP(sendToGoogleAnalytics);
+```
+
+{% Aside 'important' %}
+Where element attribution is concerned, not every interaction can be attributed to a specific element. This is due to a limitation of the underlying [Event Timing API](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming), which is used to calculate the page's INP. In this API, [the event target](https://developer.mozilla.org/docs/Web/API/Event/target) may be absent if the element responsible for the interaction was disconnected from the DOM, or if the element was in the [shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
+{% endAside %}
+
+If you have Google Analytics and run the preceding code on your website, you'll get a detailed reporting of not just the page's INP, but also useful contextual information that can give you a better sense of where to begin optimizing slow interactions.
+
+### Monitor full session duration, not just up to `onload`
+
+Using the `web-vitals` JavaScript library, as previously mentioned, may result in multiple analytics events being sent to Google Analytics. This is fine, as the ID `web-vitals` generates for the current page will stay the same, and Google Analytics will allow you to overwrite previous data.
+
+However, not all RUM providers operate this way, so if you're building your own RUM collection solution, you'll need to take this into account. If your current analytics provider won't allow overwrites of existing records, you'll need to record all the `delta` values—that is, the difference between a metric's past and current states— for a metric and transmit them using the same ID provided by the `web-vitals` library;  then you can sum those changes by grouping on the ID. For more more information, consult the `web-vitals` documentation's [section on handling deltas](https://github.com/GoogleChrome/web-vitals#report-only-the-delta-of-changes).
+
+## Get field data quickly with CrUX
+
+The [Chrome UX Report (CrUX)](https://developer.chrome.com/docs/crux/) is the official dataset of the Web Vitals program. While data from CrUX alone doesn't give you all the information you need to troubleshoot specific INP issues, it does let you know whether you have a problem in the first place. Even if you're already collecting field data through a RUM provider, consider contrasting it with CrUX data for your website (if available), as there are [differences in the methodologies they use](/crux-and-rum-differences/).
+
+You can evaluate your website's INP and view its CrUX data using [PageSpeed Insights (PSI)](https://pagespeed.web.dev/). PageSpeed Insights may provide page-level field data for websites that are included in the CrUX dataset. To audit a URL with PageSpeed Insights, go to [https://pagespeed.web.dev/](https://pagespeed.web.dev/), enter a URL to test, and click the **Analyze** button.
+
+{% Aside 'important' %}
+The URL you enter [may not be eligible for CrUX](​​https://developer.chrome.com/docs/crux/methodology/#eligibility). If this is the case, you'll need to collect your own field data, which is explained in the previous section. Also, where page-level data is not available for the given URL in PageSpeed Insights, the provided field data will be aggregated over the entire website.
+{% endAside %}
+
+Once the assessment begins, CrUX data will be available instantly as Lighthouse (a [lab tool](/lab-and-field-data-differences/#lab-data)) runs.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png", alt="A screenshot of INP field data in a distribution. The distribution aligns with the INP thresholds, and in this example, the field INP value is 545 milliseconds, which lands in the poor range.", width="800", height="161" %}
+  <figcaption>The distribution of INP experiences as seen in PageSpeed Insights.</figcaption>
+</figure>
+
+When Lighthouse has finished running its assessment, PSI will populate the assessment with Lighthouse audits.
+
+{% Aside 'important' %}
+Because PageSpeed Insights is not scripted to interact with the page, there will be no audits relevant to INP. However, [Total Blocking Time (TBT)](/tbt/) is [highly correlated with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt). Therefore, you can filter audits by TBT to find opportunities to reduce the amount of time a page blocks the main thread during the test.
+{% endAside %}
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png", alt="A screenshot of Lighthouse audits as seen in PageSpeed Insights. The audits are filtered by the TBT metric, showing tips for minimizing main thread work, avoiding an excessive DOM size, and avoiding long main thread tasks.", width="800", height="346" %}
+  <figcaption>Audits for Total Blocking Time</figcaption>
+</figure>
+
+## What if I don't have field data?
+
+You might be in a situation where you don't have or can’t even collect field data. If this describes your situation, then you'll be entirely dependent on lab tools in order to find slow interactions. For more information on lab testing, read [How to diagnose what's causing poor INP in the lab](/diagnose-slow-interactions-in-the-lab/).
+
+## Conclusion
+
+Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users in the field. By drawing on information available in PageSpeed Insights, or relying on field data collection tools such as the `web-vitals` JavaScript library (or your RUM provider), you can be more confident about which interactions are most problematic, and then move on to [reproducing problematic interactions in the lab](/diagnose-slow-interactions-in-the-lab/) and then go about fixing them.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Federico Respini](https://unsplash.com/@federicorespini)._
diff --git a/src/site/content/en/how-to-optimize-inp/index.md b/src/site/content/en/how-to-optimize-inp/index.md
new file mode 100644
index 00000000000..33d6c82c4c7
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2023-05-09
+pathName: how-to-optimize-inp
+---
diff --git a/src/site/content/en/how-to-optimize-inp/optimize-input-delay/index.md b/src/site/content/en/how-to-optimize-inp/optimize-input-delay/index.md
new file mode 100644
index 00000000000..64c739ac510
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/optimize-input-delay/index.md
@@ -0,0 +1,105 @@
+---
+layout: post
+title: Optimize input delay
+subhead: |
+  Find out what input delay is, and learn techniques to reduce it for faster interactivity.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/97AJCstKrpjMHS2hHzdn.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/vKO5f6HIbL9tMBXfuXlk.jpg
+alt: An LED road construction sign reading "Expect Delays".
+description: |
+  Input delay can contribute significantly to total interaction latency and negatively affect your page's INP. In this guide, learn what input delay is, and how you can reduce it for faster interactivity.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Interactions on the web are complicated things, with all sorts of activity occurring in the browser to drive them. What they all have in common, though, is that they incur some input delay before their event callbacks begin to run. In this guide, you'll learn what input delay is, and what you can do to minimize it so your website's interactions run faster.
+
+## What is input delay?
+
+_Input delay_ is the period of time beginning from when the user first interacts with a page—such as tapping on a screen, clicking with a mouse, or pressing a key—up to when the event callbacks for the interaction begin to run. Every interaction begins with some amount of input delay.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png", alt="A simplified visualization of input delay. At left, there is line art of a mouse cursor with a starburst behind it, signifying the start of an interaction. To the right is line art of a cogwheel, signifying when the event handlers for an interaction begin to run. The space in between is noted as the input delay with a curly brace.", width="736", height="303" %}
+  <figcaption>
+    The mechanics behind input delay. When an input is received by the operating system, it must be passed to the browser before the interaction starts. This takes a certain amount of time, and can be increased by existing main thread work.
+  </figcaption>
+</figure>
+
+Some portion of the input delay is unavoidable: it always takes some amount of time for the operating system to recognize an input event and pass it to the browser. However, that portion of the input delay is often not even noticeable, and there are other things that happen on the page itself that can make input delays long enough to cause problems.
+
+## How to think about input delay
+
+Generally speaking, you want to keep every part of an interaction as short as possible so that your website has the best chance of meeting [the Interaction to Next Paint (INP) metric's "good" threshold](/inp/#what-is-a-good-inp-score), regardless of the user's device. Keeping input delay in check is just one part of meeting that threshold.
+
+You might be tempted to look to [the First Input Delay (FID) thresholds](/fid/#what-is-a-good-fid-score) to determine an allowance for input delays—but the "good" threshold for FID is **100 milliseconds or less**. If you go by this threshold, you'd be allotting half of your budget for INP to input delay alone. This is inadvisable when you consider that an interaction also requires time to run event callbacks and for the browser to paint the next frame.
+
+To meet INP's "good" threshold, you'll want to aim for the shortest input delay possible, but you shouldn't expect to eliminate it entirely, as that is impossible. As long as you're avoiding excessive main thread work while users are attempting to interact with your page, your input delay should be low enough to avoid problems.
+
+## How to minimize input delay
+
+As said previously, some input delay is unavoidable, but on the other hand, some input delay _is_ avoidable. Here are some things to consider if you're struggling with long input delays.
+
+### Avoid recurring timers that kick off excessive main thread work
+
+There are two commonly used timer functions in JavaScript that can contribute to input delay: [`setTimeout`](https://developer.mozilla.org/docs/Web/API/setTimeout) and [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval). The difference between the two is that `setTimeout` schedules a callback to run after a specified time. `setInterval`, on the other hand, schedules a callback to run every _n_ milliseconds in perpetuity, or until the timer is stopped with [`clearInterval`](https://developer.mozilla.org/docs/Web/API/clearInterval).
+
+`setTimeout` is not problematic in itself—in fact, it can be helpful in [avoiding long tasks](#avoid-long-tasks). However, it depends on _when_ the timeout occurs, and whether the user attempts to interact with the page when the timeout callback runs.
+
+Additionally, `setTimeout` can be run in a loop or recursively, where it acts more like `setInterval`, though preferably not scheduling the next iteration until the previous one is completed. While this means the loop will yield to the main thread every time `setTimeout` is called, you should take care to ensure its callback doesn't end up doing excessive work.
+
+`setInterval` runs a callback on an interval, and is therefore much more likely to get in the way of interactions. This is because—unlike a single instance of a `setTimeout` call, which is a one-off callback that _may_ get in the way of a user interaction—`setInterval`'s recurring nature makes it much more likely that it _will_ get in the way of an interaction, thus increasing the interaction's input delay.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png", alt="A screenshot of the performance profiler in Chrome DevTools demonstrating input delay. A task fired by a timer function occurs just before a user initiates a click interaction. However, the timer extends the input delay, causing the interaction's event callbacks to run later than they otherwise would.", width="800", height="291" %}
+  <figcaption>
+    A timer registered by a previous <code>setInterval</code> call contributing to input delay as depicted in the performance panel of Chrome DevTools. The added input delay causes the event callbacks for the interaction to run later than they otherwise could.
+  </figcaption>
+</figure>
+
+If timers are occurring in first-party code, then you have control over them. Evaluate whether you need them, or do your best to reduce the work in them as much as possible. However, timers in third-party scripts are a different story. You often don't have control over what a third-party script does, and fixing performance issues in third-party code often involves working with stakeholders to determine whether a given third-party script is necessary, and if so, establish contact with a third-party script vendor to determine what can done to fix performance issues they may cause on your website.
+
+### Avoid long tasks
+
+One way to mitigate long input delays is to avoid long tasks. When you have excessive main thread work that blocks the main thread during interactions, that will add to the input delay for them before the long tasks have had a chance to finish.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png", alt="A visualization of how long tasks extend input delay. At top, an interaction occurs shortly after a single long task runs, causing significant input delay that causes event callbacks to run much later than they should. At bottom, an interaction occurs at roughly the same time, but the long task is broken up into several smaller ones by yielding, allowing the interaction's event callbacks to run much sooner.", width="800", height="448" %}
+  <figcaption>
+    A visualization of what happens to interactions when tasks are too long and the browser can't respond quickly enough to interactions, versus when longer tasks are broken up into smaller tasks.
+  </figcaption>
+</figure>
+
+Besides minimizing the amount of work you do in a task—and you should _always_ strive to do as little work as possible on the main thread—you can improve responsiveness to user input by [breaking up long tasks](/optimize-long-tasks/).
+
+{% Aside %}
+Yielding isn't foolproof, as tasks from third-party JavaScript can still make their way in between first-party tasks after yielding. This can still contribute to input delay for future interactions, and you'll need to be mindful of third-party tasks that may run on an interval, as described in the previous section. This is a problem that [the proposed `scheduler.yield` API](https://github.com/WICG/scheduling-apis/blob/main/explainers/yield-and-continuation.md) is looking to solve.
+{% endAside %}
+
+### Be mindful of interaction overlap
+
+A particularly challenging part of optimizing INP can be if you have interactions that overlap. Interaction overlap means that after you've interacted with one element, you make another interaction with the page before the initial interaction has had a chance to render the next frame.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png", alt="A depiction of when tasks can overlap to produce long input delays. In this depiction, a click interaction overlaps with a keydown interaction to increase the input delay for the keydown interaction.", width="800", height="307" %}
+  <figcaption>
+    A visualization of two concurrent interactions in the performance profiler in Chrome's DevTools. The rendering work in the initial click interaction causes an input delay for the subsequent keyboard interaction.
+  </figcaption>
+</figure>
+
+Sources of interaction overlap may be as simple as users making many interactions in a short period of time. This can occur when users type in form fields, where many keyboard interactions can occur in a very short period of time. If the work on a key event is especially expensive—such as in the common case of autocomplete fields where network requests are made to a back end—you have a couple of options:
+
+- Consider [debouncing](/debounce-your-input-handlers/) inputs to limit the amount of times an event callback executes in a given period of time.
+- Use [`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController/abort) to cancel outgoing `fetch` requests so the main thread doesn't become congested handling `fetch` callbacks. Note: an `AbortController` instance's `signal` property can also be used to [abort events](https://developer.mozilla.org/docs/Web/API/AbortSignal/abort_event).
+
+Another source of increased input delay due to overlapping interactions can be expensive animations. In particular, animations in JavaScript may fire many [`requestAnimationFrame`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) calls, which may get in the way of user interactions. To get around this, use CSS animations whenever possible to avoid queueing potentially expensive animation frames—but if you do this, make sure you [avoid non-composited animations](https://developer.chrome.com/en/docs/lighthouse/performance/non-composited-animations/) so that animations run mainly on the GPU and compositor threads, and not on the main thread.
+
+## Conclusion
+
+While input delays may not represent the majority of the time your interactions take to run, it's important to understand that every part of an interaction takes up an amount of time that you can reduce. If you're [observing long input delay](/diagnose-slow-interactions-in-the-lab/#how-to-identify-long-input-delays), then you have opportunities to reduce it. Avoiding recurring timer callbacks, breaking up long tasks, and being aware of potential interaction overlap can all help you to reduce input delay, leading to faster interactivity for your website's users.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Erik Mclean](https://unsplash.com/@introspectivedsgn)._
diff --git a/src/site/content/en/how-to-optimize-inp/script-evaluation-and-long-tasks/index.md b/src/site/content/en/how-to-optimize-inp/script-evaluation-and-long-tasks/index.md
new file mode 100644
index 00000000000..af8fe6522c2
--- /dev/null
+++ b/src/site/content/en/how-to-optimize-inp/script-evaluation-and-long-tasks/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: Script evaluation and long tasks
+subhead: |
+  When loading scripts, it takes time for the browser to evaluate them prior to execution, which can cause long tasks. Learn how script evaluation works, and what you can do to keep it from causing long tasks during page load.
+authors:
+  - jlwagner
+date: 2023-05-09
+hero: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tVIXQnOvLFKAlT5FbFXu.jpg
+thumbnail: image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/I9YhU611EE54POOUJV9l.jpg
+alt: A close-up photo of a monitor displaying minified JavaScript code.
+description: |
+  When loading scripts, it takes time for the browser to evaluate them prior to execution, which can cause long tasks. Learn how script evaluation works, and what you can do to keep it from causing long tasks during page load.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+When it comes to optimizing [Interaction to Next Paint (INP)](/inp/), most of the advice you'll encounter is to optimize interactions themselves. For example, in the [optimize long tasks guide](/optimize-long-tasks/), techniques such as yielding with `setTimeout`, `isInputPending`, and so forth are discussed. These techniques are beneficial, as they allow the main thread some breathing room by avoiding long tasks, which can allow more opportunities for interactions and other activity to run sooner, rather than if they had to wait for a single long task.
+
+However, what about the long tasks that come from loading scripts themselves? These tasks can interfere with user interactions and affect a page's INP during load. This guide will explore how browsers handle tasks kicked off by script evaluation, and look into what you may be able to do to break up script evaluation work so that your main thread can be more responsive to user input while the page is loading.
+
+## What is script evaluation?
+
+If you've profiled an application that ships a lot of JavaScript, you may have seen long tasks where the culprit is labeled **Evaluate Script**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png", alt="Script evaluation work as visualized in the performance profiler of Chrome DevTools. The work causes a long task during startup, which blocks the main thread's ability to respond to user interactions.", width="697", height="107" %}
+  <figcaption>
+    Script evaluation work as shown in the performance profiler in Chrome DevTools. In this case, the work is enough to cause a long task that blocks the main thread from taking on other work—including tasks that drive user interactions.
+  </figcaption>
+</figure>
+
+Script evaluation is a necessary part of executing JavaScript in the browser, as JavaScript is compiled [just-in-time before execution](https://en.wikipedia.org/wiki/Just-in-time_compilation). When a script is evaluated, it is first parsed for errors. If the parser doesn't find errors, the script is then compiled into [bytecode](https://en.wikipedia.org/wiki/Bytecode), and then can continue onto execution.
+
+Though necessary, script evaluation can be problematic, as users may try to interact with a page shortly after it initially renders. However, just because a page has _rendered_ doesn't mean that the page has finished _loading_. Interactions that take place during load can be delayed because the page is busy evaluating scripts. While there's no guarantee that the desired interaction can take place at this point in time—as a script responsible for it may not have loaded yet—there could be interactions dependent on JavaScript that _are_ ready, or the interactivity doesn't depend on JavaScript at all.
+
+{% Aside %}
+One metric that might give you insight into whether you have excessive script evaluation occurring during page load is [Total Blocking Time (TBT)](/tbt/), as it is a [load responsiveness](/user-centric-performance-metrics/#types-of-metrics) metric. [Because TBT correlates well with INP](https://almanac.httparchive.org/en/2022/performance#inp-and-tbt), a page with a high TBT is a reasonable indicator that there may be high INP values during load that may be tied to script evaluation work.
+{% endAside %}
+
+## The relationship between scripts and the tasks that evaluate them
+
+How tasks responsible for script evaluation are kicked off depends on whether the script you're loading is loaded via a regular `<script>` element, or if a script is a module loaded with the `type=module`. Since browsers have the tendency to handle things differently, how the major browser engines handle script evaluation will be touched upon where script evaluation behaviors across them vary.
+
+### Loading scripts with the `<script>` element
+
+{% Aside 'important' %}
+This section deals with loading scripts using the `<script>` element _without_ the `type=module` attribute.
+{% endAside%}
+
+The number of tasks dispatched to evaluate scripts generally has a direct relationship with the number of `<script>` elements on a page. Each `<script>` element kicks off a task to evaluate the requested script so it can be parsed, compiled, and executed. **This is the case for Chromium-based browsers, Safari, _and_ Firefox.**
+
+Why does this matter? Let's say you're using a bundler to manage your production scripts, and you've configured it to bundle everything your page needs to run into a single script. If this is the case for your website, you can expect that there will be a single task dispatched to evaluate that script. Is this a bad thing? Not necessarily—unless that script is _huge_.
+
+You can break up script evaluation work by avoiding loading large chunks of JavaScript, and load more individual, smaller scripts using additional `<script>` elements.
+
+{% Aside 'important' %}
+As devices vary in their capability, it's very difficult to define a set limit for how large individual scripts should be. To achieve a decent balance between compression efficiency, download time, and script evaluation time, a limit of 100 kilobytes per individual script is a good target.
+{% endAside %}
+
+While you should always strive to load as little JavaScript as possible during page load, splitting up your scripts ensures that, instead of one large task that may block the main thread, you have a greater number of smaller tasks that won't block the main thread at all—or at least less than what you started with.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png", alt="Multiple tasks involving script evaluation as visualized in the performance profiler of Chrome DevTools. Because multiple smaller scripts are loaded instead of fewer larger scripts, tasks are less likely to become long tasks, allowing the main thread to respond to user input more quickly.", width="800", height="174" %}
+  <figcaption>
+    Multiple tasks spawned to evaluate scripts as a result of multiple <code>&lt;script&gt;</code> elements present in the page's HTML. This is preferable to sending one large script bundle to users, which is more likely to block the main thread.
+  </figcaption>
+</figure>
+
+You can think of breaking up tasks for script evaluation as being somewhat similar to [yielding during event callbacks that run during an interaction](/optimize-long-tasks/#use-asyncawait-to-create-yield-points). However, with script evaluation, the yielding mechanism breaks up the JavaScript you load into multiple smaller scripts, rather than a smaller number of larger scripts than are more likely to block the main thread.
+
+{% Aside 'important' %}
+Currently, Chromium-based browsers will execute all loaded scripts with the `defer` attribute in the same task as the [`DOMContentLoaded` event](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event). While this minimizes overall layout work, the cost is the increased likelihood of a longer task, which may cause other performance problems. A potential solution is [currently being explored](https://github.com/whatwg/html/issues/6230). This behavior also takes place with scripts loaded using the `type=module` attribute, as such scripts are deferred by default.
+{% endAside %}
+
+### Loading scripts with the `<script>` element and the `type=module` attribute
+
+{% Aside 'important' %}
+If you're not bundling ES modules and loading them using the `type=module` attribute, you could actually end up slowing down page startup. For more information, read the [trade-offs and considerations section](/script-evaluation-and-long-tasks/#trade-offs-and-considerations) later on in this guide.
+{% endAside %}
+
+It's now possible to load ES modules natively in the browser with the [`type=module` attribute](/serve-modern-code-to-modern-browsers/#use-lessscript-type=modulegreater) on the `<script>` element. This approach to script loading carries some developer experience benefits, such as not having to transform code for production use—especially when used in combination with [import maps](https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap). However, loading scripts in this way schedules tasks that differ from browser to browser.
+
+#### Chromium-based browsers
+
+In browsers such as Chrome—or those derived from it—loading ES modules using the `type=module` attribute produces different sorts of tasks than you'd normally see when not using `type=module`. For example, a task for each module script will run that involves activity labeled as **Compile module**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png", alt="Module compilation work in multiple tasks as visualized in Chrome DevTools.", width="800", height="140" %}
+  <figcaption>
+    Module loading behavior in Chromium-based browsers. Each module script will spawn a <strong>Compile module</strong> call to compile their contents prior to evaluation.
+  </figcaption>
+</figure>
+
+Once the modules have compiled, any code that subsequently runs in them will kick off activity labeled as **Evaluate module**.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png", alt="Just-in-time evaluation of a module as visualized in the performance panel of Chrome DevTools.", width="800", height="184" %}
+  <figcaption>
+    When code in a module runs, that module will be evaluated just-in-time.
+  </figcaption>
+</figure>
+
+The effect here—in Chrome and related browsers, at least—is that the compilation steps are broken up when using ES modules. This is a clear win in terms of managing long tasks; however, the resulting module evaluation work that results still means you're incurring some unavoidable cost. While you should strive to ship as little JavaScript as possible, using ES modules—regardless of the browser—provides the following benefits:
+
+- All module code is automatically run in [strict mode](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode), which allows potential optimizations by JavaScript engines that couldn't otherwise be made in a non-strict context.
+- Scripts loaded using `type=module` are treated as if they were [deferred](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-defer) by default. It's possible to use the `async` attribute on scripts loaded with `type=module` to change this behavior.
+
+#### Safari and Firefox
+
+When modules are loaded in Safari and Firefox, each of them is evaluated in a separate task. This means you could theoretically load a single top-level module consisting of only [static `import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) statements to other modules, and every module loaded will incur a separate network request and task to evaluate it.
+
+### Loading scripts with dynamic `import()`
+
+[Dynamic `import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) is another method for loading scripts. Unlike static `import` statements that are required to be at the top of an ES module, a dynamic `import()` call can appear anywhere in a script to load a chunk of JavaScript on demand. This technique is called [code splitting](/reduce-javascript-payloads-with-code-splitting/).
+
+Dynamic `import()` has two advantages when it comes to improving INP:
+
+1. Modules which are deferred to load later reduce main thread contention during startup by reducing the amount of JavaScript loaded at that time. This frees up the main thread so it can be more responsive to user interactions.
+2. When dynamic `import()` calls are made, each call will effectively separate the compilation and evaluation of each module to its own task. Of course, a dynamic `import()` that loads a very large module will kick off a rather large script evaluation task, and that can interfere with the ability of the main thread to respond to user input if the interaction occurs at the same time as the dynamic `import()` call. **Therefore, it's still very important that you load as little JavaScript as possible.**
+
+Dynamic `import()` calls behave similarly in all major browser engines: the script evaluation tasks that result will be the same as the amount of modules that are dynamically imported.
+
+### Loading scripts in a web worker
+
+[Web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) are a special JavaScript use case. Web workers are registered on the main thread, and the code within the worker then runs on its own thread. This is hugely beneficial in the sense that—while the code that registers the web worker runs on the main thread—the code within the web worker doesn't. This reduces main thread congestion, and can help keep the main thread more responsive to user interactions.
+
+In addition to reducing main thread work, web workers _themselves_ can load external scripts to be used in the worker context, either through [`importScripts`](https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts) or static `import` statements in browsers that support [module workers](/module-workers/). The result is that any script requested by a web worker is evaluated off the main thread.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Use web workers to run JavaScript off the browser's main thread](/off-main-thread/).
+{% endAside %}
+
+## Trade-offs and considerations
+
+While breaking up your scripts into separate, smaller files helps limit long tasks as opposed to loading fewer, much larger files, it's important to take some things into account when deciding how to break scripts up.
+
+### Compression efficiency
+
+[Compression](/reduce-network-payloads-using-text-compression/) is a factor when it comes to breaking up scripts. When scripts are smaller, compression becomes somewhat less efficient. Larger scripts will benefit much more from compression. While increasing compression efficiency helps to keep load times for scripts as low as possible, it's a bit of a balancing act to ensure that you're breaking up scripts into enough smaller chunks to facilitate better interactivity during startup.
+
+Bundlers are ideal tools for managing the output size for the scripts your website depends on:
+
+- Where webpack is concerned, its `SplitChunksPlugin` plugin can help. Consult the [`SplitChunksPlugin` documentation](https://webpack.js.org/plugins/split-chunks-plugin/) for options you can set to help manage asset sizes.
+- For other bundlers such as [Rollup](https://rollupjs.org/) and [esbuild](https://esbuild.github.io/), you can manage script file sizes by using dynamic `import()` calls in your code. These bundlers—as well as webpack—will automatically break off the dynamically imported asset into its own file, thus avoiding larger initial bundle sizes.
+
+### Cache invalidation
+
+Cache invalidation plays a big role in how fast a page loads on repeat visits. When you ship large, monolithic script bundles, you're at a disadvantage when it comes to browser caching. This is because when you update your first-party code—either through updating packages or shipping bug fixes—the entire bundle becomes invalidated and must be downloaded again.
+
+By breaking up your scripts, you're not just breaking up script evaluation work across smaller tasks, you're also increasing the likelihood that return visitors will grab more scripts from the browser cache instead of from the network. This translates into an overall faster page load.
+
+{% Aside 'important' %}
+In order for caching to be both efficient and to avoid stale resources from being served from the cache, be sure that your bundler is [generating resources with a hash in the file name](https://bundlers.tooling.report/hashing/).
+{% endAside %}
+
+### Nested modules and loading performance
+
+If you're shipping ES modules in production and loading them with the `type=module` attribute, you need to be aware of how module nesting can impact startup time. Module nesting refers to when an ES module statically imports another ES module that statically imports another ES module:
+
+```js
+// a.js
+import {b} from './b.js';
+
+// b.js
+import {c} from './c.js';
+```
+
+If your ES modules are not bundled together, the preceding code results in a network request chain: when `a.js` is requested from a `<script>` element, another network request is dispatched for `b.js`, which then involves _another_ request for `c.js`. One way to avoid this is to use a bundler—but be sure you're configuring your bundler to break up scripts to spread out script evaluation work.
+
+If you don't want to use a bundler, then another way to get around nested module calls is to use the [`modulepreload` resource hint](https://developer.chrome.com/blog/modulepreload/), which will preload ES modules ahead of time to avoid network request chains. Beware, however: this hint is currently only supported in Chromium-based browsers.
+
+## Conclusion
+
+Optimizing evaluation of scripts in the browser is no doubt a tricky feat. The approach depends on your website's requirements and constraints. However, by splitting up scripts, you're spreading the work of script evaluation over numerous smaller tasks, and therefore giving the main thread the ability to handle user interactions more efficiently, rather than blocking the main thread.
+
+To recap, here are some things you can to do to break up large script evaluation tasks:
+
+- When loading scripts using the `<script>` element without the `type=module` attribute, avoid loading scripts that are very large, as these will kick off resource-intensive script evaluation tasks that block the main thread. Spread out your scripts over more `<script>` elements to break up this work.
+- Using the `type=module` attribute to load ES modules natively in the browser will kick off individual tasks for evaluation for each separate module script.
+- Reduce the size of your initial bundles by using dynamic `import()` calls. This also works in bundlers, as bundlers will treat each dynamically imported module as a "split point," resulting in a separate script being generated for each dynamically imported module.
+- Be sure to weigh trade-offs such as compression efficiency and cache invalidation. Larger scripts will compress better, but are more likely to involve more expensive script evaluation work in fewer tasks, and result in browser cache invalidation, leading to overall lower caching efficiency.
+- If using ES modules natively without bundling, use the `modulepreload` resource hint to optimize the loading of them during startup.
+- As always, ship as little JavaScript as possible.
+
+It's a balancing act for sure—but by breaking up scripts and reducing initial payloads via dynamic `import()`, you can achieve better startup performance and better accommodate user interactions during that crucial startup period. This should help you score better on the INP metric, thus delivering a better user experience.
+
+_Hero image from [Unsplash](https://unsplash.com/), by [Markus Spiske](https://unsplash.com/@markusspiske)._
diff --git a/src/site/content/en/identity/change-password-url/index.md b/src/site/content/en/identity/change-password-url/index.md
new file mode 100644
index 00000000000..b251bf10c96
--- /dev/null
+++ b/src/site/content/en/identity/change-password-url/index.md
@@ -0,0 +1,222 @@
+---
+layout: post
+title: Help users change passwords easily by adding a well-known URL for changing passwords
+subhead: Redirect a request to `/.well-known/change-password` to the change-passwords URL
+authors:
+  - agektmr
+date: 2020-09-01
+updated: 2020-09-24
+hero: image/admin/IOO23TBT2cCBNmsm9HKf.jpg
+alt: Neon lights shaped into various symbols that are commonly used in passwords.
+description: |
+  By redirecting requests to /.well-known/change-password to the change password URL, you can let users update their passwords easier than before.
+tags:
+  - identity
+  - security
+feedback:
+  - api
+---
+
+Set a redirect from `/.well-known/change-password` to the change password page
+of your website. This will enable password managers to navigate your users
+directly to that page.
+
+## Introduction
+
+As you may know, [passwords are not the best way to manage
+accounts](https://security.googleblog.com/2017/11/new-research-understanding-root-cause.html).
+Luckily, there are emerging technologies such as
+[WebAuthn](https://webauthn.io/) and techniques such as one-time passwords that
+are helping us get closer to a world without passwords. However, these
+technologies are still being developed and things won't change rapidly. Many
+developers will still need to deal with passwords for at least the next few
+years. While we wait for the emerging technologies and techniques to become
+commonplace, we can at least make passwords easier to use.
+
+A good way to do this is to provide better support for password managers.
+
+### How password managers help
+
+Password managers can be built into browsers or provided as third-party apps.
+They can help users in various ways:
+
+**Autofill the password for the correct input field**: Some browsers can find
+the correct input heuristically even if the website is not optimized for this
+purpose. Web developers can help password managers by correctly [annotating HTML
+input tags](/sign-in-form-best-practices/#new-password).
+
+**Prevent phishing**: Because password managers remember where the password was
+recorded, the password can be autofilled only at appropriate URLs, and not at
+phishing websites.
+
+**Generate strong and unique passwords**: Because strong and unique passwords
+are directly generated and stored by the password manager, users don't have to
+remember a single character of the password.
+
+Generating and autofilling passwords using a password manager have already
+served the web well, but considering their lifecycle, updating the passwords
+whenever it's required is as important as generating and autofilling. To
+properly leverage that, password managers are adding a new feature:
+
+**Detect vulnerable passwords and suggest updating them**: Password managers can
+detect passwords that are reused, analyze the entropy and weakness of them, and
+even detect potentially leaked passwords or ones that are known to be unsafe
+from sources such as [Have I Been Pwned](https://haveibeenpwned.com/).
+
+A password manager can warn users about problematic passwords, but there's a lot
+of friction in asking users to navigate from the homepage to a change password
+page, on top of going through the actual process of changing the password (which
+varies from site to site). It would be much easier if password managers could
+navigate the user directly to the change-password URL. This is where [a
+well-known URL for changing
+passwords](https://w3c.github.io/webappsec-change-password-url/) becomes useful.
+
+By reserving a well-known URL path that redirects the user to the change
+password page, the website can easily redirect users to the right place to
+change their passwords.
+
+
+## Set up "a well-known URL for changing passwords"
+
+`.well-known/change-password` is proposed as [a well-known URL for changing
+passwords](https://wicg.github.io/change-password-url/). All you have to do is
+to configure your server to redirect requests for `.well-known/change-password`
+to the change password URL of your website.
+
+For example, let's say your website is `https://example.com` and the change
+password URL is `https://example.com/settings/password`. You'll just need to set
+your server to redirect a request for
+`https://example.com/.well-known/change-password` to
+`https://example.com/settings/password`. That's it. For the redirection, [use
+the HTTP status code](https://wicg.github.io/change-password-url/#semantics)
+[`302 Found`](https://developer.mozilla.org/docs/Web/HTTP/Status/302), [`303 See
+Other`](https://developer.mozilla.org/docs/Web/HTTP/Status/303) or [`307
+Temporary Redirect`](https://developer.mozilla.org/docs/Web/HTTP/Status/307).
+
+Alternatively you can serve HTML at your `.well-known/change-password` URL with
+a `<meta>` tag using an
+[`http-equiv="refresh"`](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-http-equiv).
+
+```html
+<meta http-equiv="refresh" content="0;url=https://example.com/settings/password">
+```
+
+### Revisit your change password page HTML
+
+The goal of this feature is to help the user's password lifecycle be more fluid.
+You can do two things to empower the user to update their password without
+friction:
+
+* If your change-password form needs the current password, add
+  `autocomplete="current-password"` to the `<input>` tag to help the password
+  manager autofill it.
+* For the new password field (in many cases it's two fields to ensure that the
+  user has entered the new password correctly), add
+  `autocomplete="new-password"` to the `<input>` tag to help the password
+  manager suggest a generated password.
+
+Learn more at [Sign-in form best
+practices](/sign-in-form-best-practices/#new-password).
+
+## How it is used in real world
+
+### Examples
+
+Thanks to Apple Safari's
+[implementation](https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes),
+`/.well-known/change-password`, has already been available on some major
+websites for a while:
+
+* [Google](https://accounts.google.com/.well-known/change-password)
+* [GitHub](https://github.com/.well-known/change-password)
+* [Facebook](https://www.facebook.com/.well-known/change-password)
+* [Twitter](http://twitter.com/.well-known/change-password)
+* [WordPress](https://wordpress.com/.well-known/change-password)
+
+Try them yourself and do the same for yours!
+
+### Browser compatibility
+
+A well-known URL for changing passwords has been [supported in Safari since
+2019](https://webkit.org/blog/9170/safari-technology-preview-84-with-safari-13-features-is-now-available/).
+Chrome's password manager is starting to support it from version 86 onwards
+(which is scheduled for Stable release in late October 2020)
+and other Chromium-based browsers may follow. [Firefox considers it worth
+implementing](https://mozilla.github.io/standards-positions/#change-password-url),
+but has not signalled that it plans to do so as of August 2020.
+
+### Chrome's password manager behavior
+
+Let's have a look at how Chrome's password manager treats vulnerable passwords.
+
+Chrome's password manager is able to check for leaked passwords. By navigating
+to `about://settings/passwords` users can run **Check passwords** against stored
+passwords, and see a list of passwords that are recommended for update.
+
+<figure>
+
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2qTEnaWJhxDcvX6hfgrY.png", alt="", width="1478", height="845" %}
+
+  <figcaption>
+    Chrome's <b>Check passwords</b> functionality
+  </figcaption>
+</figure>
+
+By clicking the <b>Change password</b> button next to a password that is recommended to
+be updated, the browser will:
+
+* Open the website's change password page if `/.well-known/change-password` is
+  set up correctly.
+* Open the website's homepage if `/.well-known/change-password` is not set up
+  and Google doesn't know the fallback.
+
+{% Details %}
+
+{% DetailsSummary %}
+What if the server returns `200 OK` even `/.well-known/change-password` doesn't exist?
+{% endDetailsSummary %}
+
+Password managers try to determine if a website supports a well-known URL for
+changing passwords by sending a request to `/.well-known/change-password` before
+actually forwarding a user to this URL. If the request returns `404 Not Found`
+it is obvious that the URL is not available, but a `200 OK` response doesn't
+necessarily mean that the URL is available, because there are a few edge cases:
+
+* A server-side-rendering website displays "Not found" when there is no content
+  but with `200 OK`.
+* A server-side-rendering website responds with `200 OK` when there is no
+  content after redirecting to the "Not found" page.
+* A single page app responds with the shell with `200 OK` and renders the "Not
+  found" page on the client side when there is no content.
+
+For these edge cases users will be forwarded to a "Not Found" page and that will
+be a source of confusion.
+
+That's why there's [a proposed standard
+mechanism](https://wicg.github.io/change-password-url/response-code-reliability.html)
+to determine whether the server is configured to respond with `404 Not Found`
+when there is genuinely no content, by requesting a random page. Actually, the
+URL is also reserved:
+`/.well-known/resource-that-should-not-exist-whose-status-code-should-not-be-200`.
+Chrome for example uses this URL path to determine whether it can expect a
+proper change password URL from `/.well-known/change-password` in advance.
+
+When you are deploying `/.well-known/change-password`, make sure that your
+server returns `404 Not Found` for any non-existing contents.
+
+{% endDetails %}
+
+## Feedback
+
+If you have any feedback on the specification, please file an issue to [the spec
+repository](https://github.com/wicg/change-password-url/issues).
+
+## Resources
+
+* [A Well-Known URL for Changing
+  Passwords](https://wicg.github.io/change-password-url/)
+* [Detecting the reliability of HTTP status
+  codes](https://wicg.github.io/change-password-url/response-code-reliability.html)
+* [Sign-in form best practices](/sign-in-form-best-practices/)
+
+Photo by [Matthew Brodeur](https://unsplash.com/photos/zEFyM4sulJ8) on [Unsplash](https://unsplash.com)
diff --git a/src/site/content/en/identity/index.md b/src/site/content/en/identity/index.md
new file mode 100644
index 00000000000..690c25a3f58
--- /dev/null
+++ b/src/site/content/en/identity/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2021-09-30
+pathName: identity
+---
diff --git a/src/site/content/en/identity/passkey-form-autofill/index.md b/src/site/content/en/identity/passkey-form-autofill/index.md
new file mode 100644
index 00000000000..a8c84ade01a
--- /dev/null
+++ b/src/site/content/en/identity/passkey-form-autofill/index.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: Sign in with a passkey through form autofill
+subhead: Create a sign in experience that leverages passkeys while still accommodating existing password users.
+authors:
+  - agektmr
+date: 2022-10-12
+updated: 2023-04-25
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/n2fXJDSlefAg8EPLkqEr.jpg
+description: |
+  Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This article discusses how  how a passwordless sign-in with passkeys should be designed while accommodating existing password users.
+tags:
+  - identity
+  - security
+  - blog
+---
+
+[Passkeys](https://developers.google.com/identity/passkeys) replace passwords
+and make user accounts on the web safer, simpler, easier to use. However, the
+transition from password-based to passkey-based authentication can complicate
+the user experience. Using form autofill to suggest passkeys can help
+create a unified experience.
+
+## Why use form autofill to sign-in with a passkey?
+
+With a passkey, a user can sign in to a website just by using fingerprint, face,
+or device PIN.
+
+Ideally, there would be no password users and the authentication flow
+could be as simple as a single sign-in button. When the user taps the button, an
+account selector dialog pops up, the user can pick an account, unlock the screen
+to verify and sign in.
+
+However, the transition from password to passkey-based authentication can be
+challenging. As users switch to passkeys, there will still be those who use
+passwords and websites will need to accommodate both types of users. Users
+themselves should not be expected to remember on which sites they've switched to
+passkeys, so asking users to select which method to use up front would be poor
+UX.
+
+Passkeys are also a new technology. Explaining them and making sure users are 
+comfortable using them can be a challenge for websites. We can rely on familiar 
+user experiences for autofilling passwords to solve both problems.
+
+## Conditional UI
+
+To build an efficient user experience for both passkey and password users, you
+can include passkeys in autofill suggestions. This is called [conditional
+UI](https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI) and
+it's a part of [the WebAuthn standard](https://w3c.github.io/webauthn/).
+
+<figure>
+  {%
+    Video src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/ZaxgMtkOh5CX2B1ZT9gd.mp4",
+    autoplay="true", loop="true"
+  %}
+</figure>
+
+As soon as the user taps on the username input field, an autofill suggestion
+dialog pops up which highlights the stored passkeys along with password autofill
+suggestions. The user can then choose an account and use the device screen lock
+to sign in.
+
+This way, users can sign in to your website with the existing form as if nothing
+has changed, but with [the added security benefit of
+passkeys](https://developers.google.com/identity/passkeys#security-considerations)
+if they have one.
+
+{% Aside 'success' %}
+
+When a user signs in with a password, consider using that opportunity to offer
+them to [create a passkey](/passkey-registration).
+
+{% endAside %}
+
+## How it works
+
+To authenticate with a passkey, you use [the WebAuthn 
+API](https://w3c.github.io/webauthn/).
+
+The four components in a passkey authentication flow are:
+the user:
+
+* **Backend**: Your backend server that holds the accounts database storing the
+  public key and other metadata about the passkey.
+* **Frontend**: Your frontend which communicates with the browser and sends 
+  fetch requests to the backend.
+* **Browser**: The user's browser which is running your Javascript.
+* **Authenticator**: The user's authenticator which creates and stores the 
+  passkey. This may be on the same device as the browser (e.g. when using 
+  Windows Hello) or on another device, like a phone.
+
+<figure class="screenshot">
+  {%
+    Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/vAwnMiLi7U1spDopYg2Q.png",
+    alt="Passkey authentication diagram", width="800", height="254"
+  %}
+</figure>
+
+1. As soon as a user lands on the frontend, it requests a challenge from the 
+   backend to authenticate with a passkey and calls 
+   `navigator.credentials.get()` to initiate authenticating with a passkey. 
+   This returns a `Promise`.
+1. When the user puts the cursor in the sign-in field, the browser displays a 
+   password autofill dialog including passkeys. An authentication dialog appears 
+   if the user selects a passkey.
+1. After the user verifies their identity using the device's screen lock, the 
+   promise is resolved and a public key credential is returned to the frontend.
+1. The frontend sends the public key credential to the backend. The backend 
+   verifies the signature against the matched account's public key in the 
+   database. If it succeeds, the user is signed in.
+
+## Prerequisites
+
+Conditional WebAuthn UI is publicly supported in Safari on iOS 16, iPadOS 16 and 
+macOS Ventura. It's also available on Chrome on Android, macOS and Windows 11 
+22H2.
+
+## Authenticate with a passkey through form autofill
+
+When a user wants to sign in, you can make a conditional WebAuthn `get` call 
+to indicate that passkeys may be included in autofill suggestions. A conditional 
+call to [WebAuthn](https://w3c.github.io/webauthn/)'s 
+`navigator.credentials.get()` API does not show UI and remains pending until 
+the user picks an account to sign-in with from the autofill suggestions. If the 
+user picks a passkey the browser will resolve the promise with a credential 
+rather than filling in the sign-in form. It's then the page's responsibility to 
+sign the user in.
+
+### Annotate form input field
+
+Add an `autocomplete` attribute to the username `input` field, if needed. 
+Append `username` and `webauthn` as its tokens to let it suggest passkeys.    
+
+```html  
+<input type="text" name="username" autocomplete="username webauthn" ...>
+```
+
+### Feature detection
+
+Before invoking a conditional WebAuthn API call, check if:
+
+* The browser supports WebAuthn.
+* The browser supports WebAuthn conditional UI.
+
+```js  
+// Availability of `window.PublicKeyCredential` means WebAuthn is usable.  
+if (window.PublicKeyCredential &&  
+    PublicKeyCredential.​​isConditionalMediationAvailable) {  
+  // Check if conditional mediation is available.  
+  const isCMA = await PublicKeyCredential.​​isConditionalMediationAvailable();  
+  if (isCMA) {  
+    // Call WebAuthn authentication  
+  }  
+}  
+```
+
+### Fetch a challenge from the RP server
+
+Fetch a challenge from the RP server that is required to call 
+`navigator.credentials.get()`:
+
+* **[`challenge`](https://w3c.github.io/webauthn/#dom-publickeycredentialcreationoptions-challenge)**: 
+  A server-generated challenge in an ArrayBuffer. This is required to prevent 
+  replay attacks. Make sure to generate a new challenge on every sign-in attempt 
+  and disregard it after a certain duration or after a sign-in attempt fails to 
+  validate. Consider it like a CSRF token.
+* **[`allowCredentials`](https://w3c.github.io/webauthn/#dom-publickeycredentialrequestoptions-allowcredentials)**:
+  An array of acceptable credentials for this authentication. Pass an empty
+  array to let the user select an available passkey from a list shown by the
+  browser.
+* **[`userVerification`](https://w3c.github.io/webauthn/#dom-publickeycredentialrequestoptions-userverification)**:
+  Indicates whether user verification using the device screen lock is
+  `"required"`, `"preferred"` or `"discouraged"`. The default is `"preferred"`,
+  which means the authenticator may skip user verification. Set this to
+  `"preferred"` or omit the property. 
+
+{% Aside 'caution' %}
+
+For requests with `userVerification` set to `"preferred"`, authenticators may
+skip the user verification check, for example if the device doesn't have any
+biometric sensors, the user hasn't set it up (no enrolled fingerprints), or
+if the sensor is temporarily unavailable (a laptop running with a closed
+display lid). The [UV bit in the authenticator data of the
+response](https://w3c.github.io/webauthn/#authdata-flags-uv) always indicates
+whether user verification was performed.
+
+If you'd like to always require a user verification, set `userVerification` to
+`"required"`. Don't forget to check that the UV flag is `true` on the server as
+well.
+
+{% endAside %}
+
+{% Aside %}
+
+ArrayBuffer values transferred from the server such as `challenge`, `user.id`
+and credential `id` for `excludeCredentials` need to be encoded on transmission.
+Make sure to decode them on the RP frontend before passing the values to the WebAuthn
+API call. We recommend using Base64URL encode.
+
+{% endAside %}
+
+### Call WebAuthn API with the `conditional` flag to authenticate the user
+
+Call `navigator.credentials.get()` to start waiting for the user authentication.
+
+```js  
+// To abort a WebAuthn call, instantiate an `AbortController`.  
+const abortController = new AbortController();
+
+const publicKeyCredentialRequestOptions = {  
+  // Server generated challenge  
+  challenge: ****,  
+  // The same RP ID as used during registration  
+  rpId: 'example.com',  
+};
+
+const credential = await navigator.credentials.get({  
+  publicKey: publicKeyCredentialRequestOptions,  
+  signal: abortController.signal,  
+  // Specify 'conditional' to activate conditional UI  
+  mediation: 'conditional'  
+});  
+```
+
+* **[`rpId`](https://w3c.github.io/webauthn/#dom-publickeycredentialrequestoptions-rpid)**:
+  An RP ID is a domain and a website can specify either its domain or a
+  registrable suffix. This value must match the rp.id used when the passkey was
+  created.
+
+Remember to specify `mediation: 'conditional'` to make the request conditional.
+
+{% Aside %}
+
+The WebAuthn call here will be pending and the promise won't be resolved until
+the user interacts with the autofill input element and completes the
+authentication flow. The RP frontend can use
+[`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController)
+to abort the WebAuthn call.
+
+{% endAside %}
+
+### Send the returned public key credential to the RP server
+
+After the user selects an account and consents using the device's screen lock,
+the promise is resolved returning a
+[`PublicKeyCredential`](https://w3c.github.io/webauthn/#authenticatorassertionresponse)
+object to the RP frontend.
+
+A promise can be rejected due to several different reasons. You need to handle the errors accordingly,
+depending on the `Error` object's `name` property:
+
+* **`NotAllowedError`**: The user has canceled the operation.
+* **Other exceptions**: Something unexpected happened. The browser shows an 
+  error dialog to the user.
+
+The public key credential object contains the following properties:
+
+* **[`id`](https://w3c.github.io/webauthn/#credential-id)**: The 
+  base64url encoded ID of the authenticated passkey credential.
+* **[`rawId`](https://w3c.github.io/webauthn/#credential-id)**: An 
+  ArrayBuffer version of the credential ID.
+* **[`response.clientDataJSON`](https://w3c.github.io/webauthn/#client-data)**: 
+  An ArrayBuffer of client data. This field contains information such as the challenge 
+  and the origin that the RP server will need to verify.
+* **[`response.authenticatorData`](https://w3c.github.io/webauthn/#dom-authenticatorassertionresponse-authenticatordata)**: 
+  An ArrayBuffer of authenticator data. This field contains information such as the RP 
+  ID.
+* **[`response.signature`](https://w3c.github.io/webauthn/#dom-authenticatorassertionresponse-signature)**: 
+  An ArrayBuffer of the signature. This value is the core of the credential and needs 
+  to be verified on the server.
+* **[`response.userHandle`](https://w3c.github.io/webauthn/#dom-authenticatorassertionresponse-userhandle)**: 
+  An ArrayBuffer that contained the user ID that was set at creation time. This 
+  value can be used, instead of the credential ID, if the server needs to pick 
+  the ID values that it uses, or if the backend wishes to avoid creating an 
+  index on credential IDs.
+* **[`authenticatorAttachment`](https://w3c.github.io/webauthn/#enumdef-authenticatorattachment)**: 
+  Returns `platform` when this credential came from the local device. 
+  Otherwise `cross-platform`, notably when [the user used a phone to sign 
+  in](https://developers.google.com/identity/passkeys/use-cases#sign-in-with-a-phone). 
+  If the user needed to use a phone to sign-in, consider prompting them to 
+  [create a passkey](/passkey-registration) on the local device.
+* **`type`**: This field is always set to `"public-key"`.
+
+If you use a library to handle the public-key credential object on the RP 
+server, we recommend that you send the entire object to the server after encoding it 
+partially with base64url.
+
+### Verify the signature
+
+When you receive the public key credential on the server, pass it to the FIDO 
+library to process the object.
+
+Look up the matching credential ID with the
+[`id`](https://w3c.github.io/webauthn/#credential-id) property (If you need to
+determine the user account, use the
+[`userHandle`](https://w3c.github.io/webauthn/#dom-authenticatorassertionresponse-userhandle)
+property which is the `user.id` you specified when creating the credential). See
+if the credential's
+[`signature`](https://w3c.github.io/webauthn/#dom-authenticatorassertionresponse-signature)
+can be verified with the stored public key. To do so, we recommend using a
+server side library or a solution instead of writing your own code. [You can
+find open source libraries in the awesome-webauth GitHub
+repo](https://github.com/herrjemand/awesome-webauthn).
+
+Once the credential is verified with a matching public key, sign the user in.
+
+## Resources
+
+* [Create a passkey for passwordless logins](/passkey-registration/)
+* [Passkeys](https://www.imperialviolet.org/2022/09/22/passkeys.html)
+* [Apple document: Authenticating a User Through a Web
+  Service](https://developer.apple.com/documentation/authenticationservices/authenticating_a_user_through_a_web_service)
+* [Google document: Passwordless login with
+  passkeys](https://developers.google.com/identity/passkeys/)
diff --git a/src/site/content/en/identity/passkey-google-ux/index.md b/src/site/content/en/identity/passkey-google-ux/index.md
new file mode 100644
index 00000000000..fd54611b3f3
--- /dev/null
+++ b/src/site/content/en/identity/passkey-google-ux/index.md
@@ -0,0 +1,296 @@
+---
+layout: post
+title: Designing the user experience of passkeys on Google accounts
+subhead: Bringing better security and a better user experience to Google accounts.
+authors:
+  - mitchgalavan
+  - cjacinic
+  - silviaconvento
+date: 2023-07-26
+hero: image/YLflGBAPWecgtKJLqCJHSzHqe2J2/O5dR5r4CvlcxNg7mYdDu.png
+description: |
+  Passkeys make user accounts safer, simpler, and easier to use. This article explains Google designed the user experience of passkeys for Google accounts.
+tags:
+  - identity
+  - ux
+  - blog
+---
+
+Passkeys are a simple and [secure cross-device authentication
+technology](https://security.googleblog.com/2023/05/so-long-passwords-thanks-for-all-phish.html)
+that enables creating online accounts and signing in to them without entering a
+password. To log in to an account, users are simply shown a prompt to to use the
+screen lock on their device, such as touching the fingerprint sensor.
+
+Google has been working with the FIDO Alliance for years, alongside Apple and
+Microsoft, to bring passkeys to the world. In 2022 we rolled out platform
+support for passkeys so that
+[Android](https://android-developers.googleblog.com/2022/10/bringing-passkeys-to-android-and-chrome.html)
+and
+[Chrome](https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html)
+users can seamlessly sign in to apps and websites across all their devices. In
+May 2023, we enabled signing in to [Google Accounts with
+passkeys](https://blog.google/technology/safety-security/the-beginning-of-the-end-of-the-password/),
+bringing the security and convenience of passkeys to our users.
+
+Google is in a unique position, as we are both working on the infrastructure for
+passkeys and are one of the largest services using them. We are rolling out
+passkeys for Google Accounts carefully and deliberately, so we can measure the
+results and use that feedback to continue to improve the passkey infrastructure
+and the Google account experience.
+
+## Transitioning users to passkeys
+
+Passwords have been the standard sign-in method since the advent of personalized
+online experiences. How do we introduce the passwordless experience of passkeys?
+
+Research indicates that when it comes to authentication, users value the
+convenience the most. They want a smooth and fast transition to the real
+experience, which only comes after signing in.
+
+Still, the transition to passkeys requires changing muscle memory and users need
+to be convinced it's worth making a switch.
+
+The user experience of passkeys for [Google.com](http://google.com) has been
+strategically designed to emphasize two principles at every step of the
+authentication process: ease of use and security.
+
+### Leading with convenience 
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png",
+  alt="For most users, this will be the first time they see passkeys", width="800", height="600" %}
+  <figcaption>For most users, this will be the first time they see passkeys.</figcaption>
+</figure>
+
+The first passkey screen users see is light and easy-to-digest.  The header is
+focusing on the user benefit, saying "Simplify your sign in."
+
+The body copy explains "With passkeys you can now use your fingerprint, face or
+screen lock to verify it's really you".
+
+The illustration is intended to ground the message in the value proposition made
+by the page. The large blue primary action invites the user to proceed. "Not
+now" is included as a secondary action to allow users to choose whether or not
+to opt in at this time, leaving the user in control. And "Learn more" is offered
+for the most curious users who would like to understand passkeys better before
+proceeding. 
+
+We explored many iterations of the pages used to introduce users to passkeys
+during sign in. This included trying content that emphasized the security,
+technology, and other aspects of passkeys—yet convenience was really what
+resonated most. Google's content strategy, illustration, and interaction design
+demonstrates this core principle for our implementation of passkeys.
+
+### Associating the term "passkeys" with familiar security experiences
+
+Passkeys are a new term for most users so we are intentionally gently exposing
+the users to the term to build familiarity. Guided by internal research, we are
+strategically associating passkeys with security.
+
+The word "passkey" is included throughout the sign-in flow in the less-prominent
+body copy position.  It's consistently nestled amongst the familiar security
+experiences that enable passkey use: fingerprint, face scan, or other device
+screen lock.
+
+Our research has shown that many users associate biometrics with security. While
+passkeys don't require biometrics (a passkey can be used with a device PIN, for
+example), we are leaning into the association of passkeys with biometrics to
+boost user perception of passkeys' security benefits. 
+
+The additional content behind the "Learn more" has lots of valuable information
+for users, including reassurance for users that their sensitive, biometric data
+stays on their personal device and is never stored or shared when creating or
+using passkeys. We took this approach because most users found the convenience
+aspect of passkeys appealing, but only a few took into account the biometric
+element during testing. 
+
+### Introducing passkeys when it's relevant to the user
+
+Google's heuristics carefully determine who will see the introductory screen.
+Some of the factors are whether a user has two-step verification enabled and
+whether they access that account regularly from the same device.
+
+Users who are most likely to succeed with passkeys are selected first, and over
+time more users will be introduced (though, anyone can get started at
+[g.co/passkeys](http://g.co/passkeys) today).
+
+Select users are prompted to create a passkey after signing in with a username
+and password. There are a few reasons we chose this point in the user journey:
+
+* The user has just signed in, they're aware of their credentials and second
+  step.
+* We are confident that the user is on their device–they just signed in, so it's
+  unlikely they walked away or put their device down.
+* Statistically, signing in isn't always successful the first time–so a message
+  around making it easier next time has tangible value.
+
+### Positioning passkeys as an alternative to passwords and not yet a replacement
+
+Initial user research shows that many users still want passwords as a backup
+sign-in method. And not all users will have the [technology necessary to adopt
+passkeys](https://support.google.com/accounts/answer/13548313?hl=en&sjid=17510595681178318776-NA).
+
+So while the industry, Google included, is moving towards a "passwordless
+future", Google is intentionally positioning passkeys as a simple and secure
+**alternative** to passwords. Google's UI focuses on the benefits of passkeys
+and avoids language that implies getting rid of passwords.
+
+## The creation moment
+
+When users choose to enroll, they'll see a browser-specific UI modal that
+enables them to create a passkey.
+
+The passkey itself is shown with the industry-aligned icon and the information
+used to create it. This includes the display name (a friendly name for your
+passkey, like your user's real name) and the username (a unique name on your
+service–an email address can work great here). When it comes to working with the
+passkeys icon, [the FIDO alliance recommends using the proven passkeys
+icon](https://media.fidoalliance.org/wp-content/uploads/2023/05/FIDO-Alliance-UX-Guidelines-for-Passkey-Creation-and-Sign-ins.pdf)–and
+encourages making it your own with customizations.
+
+Passkeys icon is shown consistently across the user journey to create a
+familiarity with what the user will see when using or managing the passkey. The
+passkey icon is never presented without context or supporting material.
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png",
+  alt="When users create their passkey, they'll see this page", width="800", height="600" %}
+  <figcaption>When users create their passkey, they'll see this page.</figcaption>
+</figure>
+
+Above, we outlined how the user and the platform work together to create a
+passkey. When the user clicks "Continue" they'll be presented with a unique UI
+depending on the platform. 
+
+With that in mind, we learned through internal research that a confirmation
+screen once the passkey is created can be very helpful in terms of comprehension
+and closure at this step of the process.
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png",
+  alt="Once the passkey has been created, users will see this page", width="800", height="600" %}
+  <figcaption>Once the passkey has been created, users will see this page.</figcaption>
+</figure>
+
+The confirmation screen is a deliberate ‘pause' to bookend the journey of
+introducing a user to passkeys and going through the process of creating one of
+their own. As it is (likely) the first time a user has engaged with passkeys,
+this page aims to provide clear closure to the journey. We chose a standalone
+page after trying some other tools like smaller notifications, and even a
+post-creation email–simply to provide a structured, stable end to end
+experience. 
+
+Once the user clicks "Continue" here, they're brought to their destination. 
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png",
+  alt="When users sign in again, they'll likely see this page", width="800", height="600" %}
+  <figcaption>When users sign in again, they'll likely see this page.</figcaption>
+</figure>
+
+## Signing in
+
+Next time a user tries to sign in, they'll be greeted with this page. This uses
+the same layout, illustration, and primary call to action to evoke the first
+‘creation' experience outlined above. Once the user has made a choice to enroll
+in passkeys, this page should feel familiar and they will recognize what steps
+they need to take to sign in.
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png",
+  alt="The user will use this WebAuthn UI to sign in", width="800", height="600" %}
+  <figcaption>The user will use this WebAuthn UI to sign in.</figcaption>
+</figure>
+
+The same principle of familiarity applies here. Intentionally, this uses the
+same iconography, illustration, layout and text. The text within the WebAuthn UI
+is kept brief, broad, and re-usable–so everyone can use this both for
+authentication and reauthentication.
+
+## Passkeys management
+
+Introducing a whole new page within the Google Account settings pages required
+careful consideration to ensure a cohesive, intuitive, and consistent user
+experience.
+
+To achieve this, we analyzed the patterns regarding navigation, content,
+hierarchy, structure, and established expectations that existed across the
+Google Account.
+
+<figure>
+{% Img
+  src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png",
+  alt="Passkeys management page in the Google Account", width="800", height="655"
+%}
+  <figcaption>Passkeys management page in the Google Account.</figcaption>
+</figure>
+
+### Describe passkeys by ecosystem
+
+To create a high level category system that would be logical to understand we
+settled on describing passkeys by
+[ecosystem](https://developers.google.com/identity/passkeys/supported-environments).
+This way, a user could recognize where a passkey was created and where it is
+used. Each identity provider (Google, Apple, and Microsoft) has a name for their
+ecosystem, so we chose to use those (Google Password Manager, iCloud keychain,
+and Windows Hello respectively).
+
+To support this, we added additional metadata, such as when it was created, when
+it was last used, and the specific OS that it was used on. In terms of user
+management actions, the API only supports renaming, revoking, and creating.
+
+Renaming allows users to assign personally meaningful names to passkeys, which
+could help particular cohorts of users keep track and understand them more
+easily.
+
+Revoking a passkey doesn't delete it from the user's personal credential manager
+(like Google Password Manager), but renders it unusable until it is set up
+again. That's why we chose a cross, instead of a trash or delete icon, to
+represent the action of revoking a passkey.
+
+When describing the action of adding a passkey to their account, the phrase
+"Create passkey" resonated better with users compared to "Add a passkey." This
+is a subtle language choice to distinguish passkeys from tangible, hardware
+security keys (though it should be noted that [passkeys can be stored on some
+hardware security
+keys](https://support.google.com/accounts/answer/13548313?hl=en&sjid=17510595681178318776-NA)).
+
+### Providing additional content 
+
+Internal research showed that using passkeys is a relatively seamless and
+familiar experience. However as with any new technology, there are lingering
+questions and concerns that will come up for some users.
+
+How the technology works behind the screen lock, what makes it more secure, and
+the most common "what if" scenarios Google came across in testing are addressed
+in [Google's passkey Help Center
+content](https://support.google.com/accounts/answer/13548313?hl=en&sjid=17510595681178318776-NA).
+Having support content ready with launch of passkeys is critical for an easy
+transition for users on any site.
+
+### Falling back from passkeys 
+
+Reverting to the old system is as simple as clicking "try another way" when a
+user is asked to authenticate with a passkey. Additionally, exiting the WebAuthn
+UI will start users on a path to try their passkey again, or sign into their
+Google Account in traditional ways. 
+
+## Conclusion
+
+We are still in the early days of passkeys, so when designing the user
+experience keep a few principles in mind:
+
+* Introduce passkeys when it's relevant to the user.    
+* Highlight the benefits of passkeys.
+* Use opportunities to build familiarity the concept of passkeys.
+* Position passkeys as an alternative to passwords and not a replacement.
+
+The choices we made for passkeys for Google Accounts were informed by best
+practices and internal research and we'll continue to evolve the user experience
+as we gain new insights from users in the real world.
diff --git a/src/site/content/en/identity/passkey-registration/index.md b/src/site/content/en/identity/passkey-registration/index.md
new file mode 100644
index 00000000000..949dd3224ea
--- /dev/null
+++ b/src/site/content/en/identity/passkey-registration/index.md
@@ -0,0 +1,355 @@
+---
+layout: post
+title: Create a passkey for passwordless logins
+subhead: Passkeys make user accounts safer, simpler, easier to use.
+authors:
+  - agektmr
+date: 2022-10-12
+updated: 2023-04-25
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/ESXHlkzce7qhQSqQHacV.jpg
+description: |
+  Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This article discusses how to allow users to create passkeys for your website.
+tags:
+  - identity
+  - security
+  - blog
+---
+
+Using [passkeys](https://developers.google.com/identity/passkeys) instead of
+passwords is a great way for websites to make their user accounts safer,
+simpler, easier to use and passwordless. With a passkey, a user can sign in to a
+website or an app just by using their fingerprint, face or device PIN.
+
+{% Aside %}
+
+To learn basic concepts of passkeys, check out [Passwordless login with passkeys](https://developers.google.com/identity/passkeys) first.
+
+{% endAside %}
+
+A passkey has to be created, associated with a user account and have its public key be stored on your server before a user can sign in with it.
+
+## How it works
+
+A user can be asked to create a passkey in one of the following situations:
+* When a user signs in using a password, or a passkey from another device (that is,
+the
+[`authenticatorAttachment`](/passkey-form-autofill/#:~:text=authenticationattachment)
+is `cross-platform`). 
+* On a dedicated page where users can manage their passkeys.
+
+<figure>
+  {%
+    Video src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/2gY9wppN8tivRRWDH8gV.mp4",
+    autoplay="true", loop="true"
+  %}
+</figure>
+
+To create a passkey, you use [the WebAuthn 
+API](https://w3c.github.io/webauthn/).
+
+The four components of the passkey registration flow are:
+
+* **Backend**: Your backend server that holds the accounts database storing the
+  public key and other metadata about the passkey.
+* **Frontend**: Your frontend which communicates with the browser and sends 
+  fetch requests to the backend.
+* **Browser**: The user's browser which is running your Javascript.
+* **Authenticator**: The user's authenticator which creates and stores the 
+  passkey. This may be on the same device as the browser (for example, when using 
+  Windows Hello) or on another device, like a phone.
+
+<figure class="screenshot">
+  {%
+    Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/vmxdOrHbR2kW17Ipv6hk.png",
+    alt="Passkey registration diagram", width="800", height="258"
+  %}
+</figure>
+
+The journey to add a new passkey to an existing user account is as follows:
+
+1. A user signs in to the website. 
+1. Once the user is signed in, they request to create a passkey on the 
+   frontend, for example, by pressing a "Create a passkey" button.
+1. The frontend requests information from the 
+   backend to create a passkey, such as user 
+   information, a challenge, and the credential IDs to exclude.
+1. The frontend calls `navigator.credentials.create()` to create a passkey. 
+   This call returns a promise.
+1. A passkey is created after the user consents using the device's screen lock. 
+   The promise is resolved and a public key credential is returned to the 
+   frontend.
+1. The frontend sends the public key credential to the backend and stores the 
+   credential ID and the public key associated with the user account for future 
+   authentications.
+
+## Compatibilities
+
+WebAuthn is supported by most browsers, but there are small gaps. Refer to 
+[Device Support - passkeys.dev](https://passkeys.dev/device-support/) to learn 
+what combination of browsers and an operating systems support creating a 
+passkey.
+
+## Create a new passkey
+
+Here's how a frontend should operate upon a request to create a new passkey.
+
+### Feature detection
+
+Before displaying a "Create a new passkey" button, check if:
+
+* The browser supports WebAuthn.
+* The device supports a platform authenticator (can create a passkey and 
+  authenticate with the passkey).
+* The browser supports [WebAuthn conditional UI](/passkey-form-autofill/).
+
+```js  
+// Availability of `window.PublicKeyCredential` means WebAuthn is usable.  
+// `isUserVerifyingPlatformAuthenticatorAvailable` means the feature detection is usable.  
+// `​​isConditionalMediationAvailable` means the feature detection is usable.  
+if (window.PublicKeyCredential &&  
+    PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&  
+    PublicKeyCredential.​​isConditionalMediationAvailable) {  
+  // Check if user verifying platform authenticator is available.  
+  Promise.all([  
+    PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),  
+    PublicKeyCredential.​​isConditionalMediationAvailable(),  
+  ]).then(results => {  
+    if (results.every(r => r === true)) {  
+      // Display "Create a new passkey" button  
+    }  
+  });  
+}  
+```
+
+Until all the conditions have been met, passkeys will not be supported on this browser. 
+The "Create a new passkey" button shouldn't be displayed until then.
+
+### Fetch important information from the backend
+
+When the user clicks the button, fetch important information to call 
+`navigator.credentials.create()` from the backend:
+
+* **[`challenge`](https://w3c.github.io/webauthn/#dom-publickeycredentialcreationoptions-challenge)**: 
+  A server-generated challenge in ArrayBuffer for this registration. This is 
+  required but unused during registration unless doing 
+  [attestation](https://developer.mozilla.org/docs/Web/API/Web_Authentication_API/Attestation_and_Assertion)—an 
+  advanced topic not covered here.
+* **[`user.id`](https://w3c.github.io/webauthn/#dom-publickeycredentialuserentity-id)**: 
+   A user's unique ID. This value must be an ArrayBuffer which does not include 
+  personally identifying information, for example, e-mail addresses or usernames. A 
+  random, 16-byte value generated per account will work well.
+* **[`user.name`](https://w3c.github.io/webauthn/#dom-publickeycredentialentity-name)**: 
+  This field should hold a unique identifier for the account that the user will 
+  recognise, like their email address or username. This will be displayed in the 
+  account selector. (If using a username, use the same value as in password 
+  authentication.)
+* **[`user.displayName`](https://w3c.github.io/webauthn/#dom-publickeycredentialuserentity-displayname)**: 
+  This field is an optional, more user-friendly name for the account. It need not be unique 
+  and could be the user's chosen name. If your site does not have a suitable 
+  value to include here, pass an empty string. This may be displayed on the 
+  account selector depending on the browser.
+* **[`excludeCredentials`](https://w3c.github.io/webauthn/#dom-publickeycredentialcreationoptions-excludecredentials)**:
+  Prevents registering the same device by providing a list of already registered
+  credential IDs. The
+  [`transports`](https://w3c.github.io/webauthn/#dom-publickeycredentialdescriptor-transports)
+  member, if provided, should contain the result of calling
+  [`getTransports()`](https://w3c.github.io/webauthn/#dom-authenticatorattestationresponse-gettransports)
+  during the registration of each credential.
+
+{% Aside %}
+
+ArrayBuffer values transferred from the server such as `challenge`, `user.id`
+and credential `id` for `excludeCredentials` need to be encoded on transmission.
+Don't forget to decode them on the frontend before passing to the WebAuthn API
+call. We recommend using Base64URL encode.
+
+{% endAside %}
+
+### Call WebAuthn API to create a passkey
+
+Call `navigator.credentials.create()` to create a new passkey. The API returns 
+a promise, waiting for the user's interaction displaying a modal dialog.
+
+```js
+const publicKeyCredentialCreationOptions = {  
+  challenge: *****,  
+  rp: {  
+    name: "Example",  
+    id: "example.com",  
+  },  
+  user: {  
+    id: *****,  
+    name: "john78",  
+    displayName: "John",  
+  },  
+  pubKeyCredParams: [{alg: -7, type: "public-key"},{alg: -257, type: "public-key"}],  
+  excludeCredentials: [{  
+    id: *****,  
+    type: 'public-key',  
+    transports: ['internal'],  
+  }],  
+  authenticatorSelection: {  
+    authenticatorAttachment: "platform",  
+    requireResidentKey: true,  
+  }  
+};
+
+const credential = await navigator.credentials.create({  
+  publicKey: publicKeyCredentialCreationOptions  
+});
+
+// Encode and send the credential to the server for verification.  
+```
+
+The parameters not explained above are:
+
+* **[`rp.id`](https://w3c.github.io/webauthn/#dom-publickeycredentialrpentity-id)**: 
+  An RP ID is a domain and a website can specify either its domain or a 
+  registrable suffix. For example, if an RP's origin is 
+  `https://login.example.com:1337`, the RP ID can be either 
+  `login.example.com` or `example.com`. If the RP ID is specified as 
+  `example.com`, the user can authenticate on `login.example.com` or on any 
+  subdomains on `example.com`.
+* **[`rp.name`](https://w3c.github.io/webauthn/#dom-publickeycredentialentity-name)**: 
+  The RP's name.
+* **[`pubKeyCredParams`](https://w3c.github.io/webauthn/#dom-publickeycredentialcreationoptions-pubkeycredparams)**: 
+  This field specifies the RP's supported public-key algorithms. We recommend setting 
+  it to `[{alg: -7, type: "public-key"},{alg: -257, type: "public-key"}]`. 
+  This specifies support for ECDSA with P-256 and RSA PKCS\#1 and supporting 
+  these gives complete coverage.
+* **[`authenticatorSelection.authenticatorAttachment`](https://w3c.github.io/webauthn/#dom-authenticatorselectioncriteria-authenticatorattachment)**: 
+  Set it to `"platform"`. This indicates that we want an authenticator that is 
+  embedded into the platform device, and the user will not be prompted to insert 
+  e.g. a USB security key.
+* **[`authenticatorSelection.requireResidentKey`](https://w3c.github.io/webauthn/#dom-authenticatorselectioncriteria-residentkey)**: 
+  Set it to a boolean "true". A discoverable credential (resident key) 
+  stores user information to the passkey and lets users select the account upon 
+  authentication.
+* **[`authenticatorSelection.userVerification`](https://w3c.github.io/webauthn/#dom-authenticatorselectioncriteria-userverification)**:
+  Indicates whether a user verification using the device screen lock is
+  `"required"`, `"preferred"` or `"discouraged"`. The default is `"preferred"`,
+  which means the authenticator may skip user verification. Set this to
+  `"preferred"` or omit the property.
+
+{% Aside 'caution' %}
+
+For requests with `userVerification` set to `"preferred"`, authenticators may
+skip the user verification check, for example if the device doesn't have any
+biometric sensors, the user hasn't set it up (no enrolled fingerprints), or
+if the sensor is temporarily unavailable (laptop running with a closed
+display lid). The [UV bit in the authenticator data of the
+response](https://w3c.github.io/webauthn/#authdata-flags-uv) always indicates
+whether user verification was performed. 
+
+If you'd like to always require a user verification, set `userVerification` to
+`"required"`. Don't forget to check that the UV flag is `true` on the server as
+well.
+
+{% endAside %}
+
+
+{% Aside %}
+
+Note: Some browsers don't require any parameters on `authenticatorSelection` 
+to create a passkey, but others may. We recommend specifying those parameters 
+explicitly.
+
+{% endAside %}
+
+### Send the returned public key credential to the backend
+
+After the user consents using the device's screen lock, a passkey is created and 
+the promise is resolved returning a 
+[PublicKeyCredential](https://w3c.github.io/webauthn/#authenticatorattestationresponse) 
+object to the frontend.
+
+The promise can be rejected for different reasons. You can handle these errors by checking the `Error` object's `name` property:
+
+* **`InvalidStateError`**: A passkey already exists on the device. No error
+  dialog will be shown to the user and the site should not treat this as an
+  error—the user wanted the local device registered and it is.
+* **`NotAllowedError`**: The user has canceled the operation.
+* **Other exceptions**: Something unexpected happened. The browser shows an
+  error dialog to the user.
+
+The public key credential object contains the following properties:
+
+* **[`id`](https://w3c.github.io/webauthn/#credential-id)**: A Base64URL encoded
+  ID of the created passkey. This ID helps the browser to determine whether a
+  matching passkey is in the device upon authentication. This value needs to be stored
+  in the database on the backend.
+* **[`rawId`](https://w3c.github.io/webauthn/#credential-id)**: An ArrayBuffer
+  version of the credential ID.
+* **[`response.clientDataJSON`](https://w3c.github.io/webauthn/#client-data)**:
+  An ArrayBuffer encoded client data.
+* **[`response.attestationObject`](https://w3c.github.io/webauthn/#attestation-object)**:
+  An ArrayBuffer encoded attestation object. This contains important information
+  such as an RP ID, flags and a public key.
+* **[`authenticatorAttachment`](https://w3c.github.io/webauthn/#enumdef-authenticatorattachment)**:
+  Returns `"platform"` when this credential is created on a passkey capable
+  device.
+* **`type`**: This field is always set to `"public-key"`.
+
+If you use a library to handle the public key credential object on the backend,
+we recommend sending the entire object to the backend after encoding it
+partially with base64url.
+
+{% Aside %}
+
+Optionally, the `response` member of the credential - an
+[`AuthenticatorAttestationResponse`](https://w3c.github.io/webauthn/#iface-authenticatorattestationresponse) 
+— provides
+[`getTransports()`](https://w3c.github.io/webauthn/#dom-authenticatorattestationresponse-gettransports),
+[`getPublicKey()`](https://w3c.github.io/webauthn/#dom-authenticatorattestationresponse-getpublickey),
+[`getAuthenticatorData()`](https://w3c.github.io/webauthn/#dom-authenticatorattestationresponse-getauthenticatordata),
+and
+[`getPublicKeyAlgorithm()`](https://w3c.github.io/webauthn/#dom-authenticatorattestationresponse-getpublickey)
+functions to retrieve elements of the credential. 
+
+{% endAside %}
+
+### Save the credential
+
+Upon receiving the public key credential on the backend, pass it to the FIDO
+library to process the object.
+
+{% Aside %}
+
+We recommend using a server-side library or a solution instead of writing your
+own code to process a public-key credential. Check out [open-source libraries
+](https://github.com/herrjemand/awesome-webauthn) to process public-key credentials.
+
+{% endAside %}
+
+You can then store the information retrieved from the credential to the database for
+future use. The following list includes some typical properties to save:
+
+* **Credential ID (Primary key)**
+* **User ID**
+* **Public key**
+
+The public-key credential also includes the following information
+that you may want to save in the database:
+
+* **[Backup Eligibility
+  flag](https://w3c.github.io/webauthn/#backup-eligibility)**: `true` if the
+  device is eligible for passkey synchronization.
+* **[Backup State flag](https://w3c.github.io/webauthn/#backup-state)**: `true`
+  if the created passkey is actually set to be synchronized.
+* **[Transports](https://w3c.github.io/webauthn/#enumdef-authenticatortransport)**:
+  A list of transports the device supports: `"internal"` means the device
+  supports a passkey, `"hybrid"` means it also supports [authentication on
+  another
+  device](https://developers.google.com/identity/passkeys/use-cases#sign-in-with-a-phone).
+
+To authenticate the user, read [Sign in with a passkey through form
+autofill](/passkey-form-autofill).
+
+## Resources
+
+* [Sign in with a passkey through form autofill](/passkey-form-autofill)
+* [Passkeys](https://www.imperialviolet.org/2022/09/22/passkeys.html)
+* [Apple document: Authenticating a User Through a Web
+  Service](https://developer.apple.com/documentation/authenticationservices/authenticating_a_user_through_a_web_service)
+* [Google document: Passwordless login with
+  passkeys](https://developers.google.com/identity/passkeys/)
diff --git a/src/site/content/en/identity/sign-in-form-best-practices/index.md b/src/site/content/en/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..997e0a7f547
--- /dev/null
+++ b/src/site/content/en/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,746 @@
+---
+layout: post
+title: Sign-in form best practices
+subhead: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-06-29
+updated: 2021-09-27
+description: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: A person holding a phone.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+If users ever need to log in to your site, then good sign-in form design is
+critical. This is especially true for people on poor connections, on mobile, in
+a hurry, or under stress. Poorly designed sign-in forms get high bounce rates.
+Each bounce could mean a lost and disgruntled user—not just a missed sign-in
+opportunity.
+
+{% Aside 'codelab' %}
+  If you would prefer to learn these best practices with a hands-on tutorial,
+  check out the [Sign-in form best practices codelab](/codelab-sign-in-form-best-practices/).
+{% endAside %}
+
+Here is an example of a simple sign-in form that demonstrates all of the best practices:
+
+{% Glitch {
+  id: 'sign-in-form',
+  path: 'index.html',
+  height: 480
+} %}
+
+## Checklist
+
+* [Use meaningful HTML elements](#meaningful-html): `<form>`, `<input>`,
+  `<label>`, and `<button>`.
+* [Label each input with a `<label>`](#label).
+* Use element attributes to [access built-in browser
+  features](#element-attributes): `type`, `name`, `autocomplete`, `required`.
+* Give input `name` and `id` attributes stable values that don't change
+between page loads or website deployments.
+* Put sign-in [in its own &lt;form&gt; element](#form).
+* [Ensure successful form submission](#submission).
+* Use [`autocomplete="new-password"`](#new-password) and [`id="new-password"`](#new-password) for
+the password input in a sign-up form, and for the new password in a reset-password form.
+* Use [`autocomplete="current-password"`](#current-password) and [`id="current-password"`](#current-password)
+for a sign-in password input.
+* Provide [Show password](#show-password) functionality.
+* [Use `aria-label` and `aria-describedby`](#accessible-password-inputs) for
+  password inputs.
+* [Don't double-up inputs](#no-double-inputs).
+* Design forms so the [mobile keyboard doesn't obscure inputs or
+  buttons](#keyboard-obstruction).
+* Ensure forms are usable on mobile: use [legible text](#size-text-correctly),
+  and make sure inputs and buttons are [large enough to work as touch targets](#tap-targets).
+* [Maintain branding and style](#general-guidelines) on your sign-up and sign-in pages.
+* [Test in the field as well as the lab](#analytics): build page analytics,
+  interaction analytics, and user-centric performance measurement into your
+  sign-up and sign-in flow.
+* [Test across browsers and devices](#devices): form behaviour varies
+  significantly across platforms.
+
+{% Aside %}
+This article is about frontend best practices. It does not explain how to build
+backend services to authenticate users, store their credentials, or manage their
+accounts. [12 best practices for user account, authorization and password
+management](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)
+outlines core principles for running your own backend. If you have users in
+different parts of the world, you need to consider localizing your site's use of
+third-party identity services as well as its content.
+
+There are also two relatively new APIs not covered in this article which can
+help you build a better sign-in experience:
+*  [**WebOTP**](/web-otp/): to deliver one-time passcodes or
+PIN numbers via SMS to mobile phones. This can allow users to select a phone
+number as an identifier (no need to enter an email address!) and also enables
+two-step verification for sign-in and one-time codes for payment confirmation.
+* [**Credential Management**](https://developer.chrome.com/blog/credential-management-api/): to enable developers to store and retrieve password credentials and federated credentials programmatically.
+{% endAside %}
+
+## Use meaningful HTML {: #meaningful-html }
+
+Use elements built for the job: `<form>`, `<label>` and `<button>`. These enable
+built-in browser functionality, improve accessibility, and add meaning to your
+markup.
+
+### Use `<form>` {: #form }
+
+You might be tempted to wrap inputs in a `<div>` and handle input data
+submission purely with JavaScript. It's generally better to use a plain old
+[`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+element. This makes your site accessible to screenreaders and other assistive
+devices, enables a range of built-in browser features, makes it simpler to build
+basic functional sign-in for older browsers, and can still work even if
+JavaScript fails.
+
+{% Aside 'gotchas' %}
+A common mistake is to wrap a whole web page in a single form, but this is liable
+to cause problems for browser password managers and autofill. Use a different
+&lt;form&gt; for each UI component that needs a form. For example, if you have
+sign-in and search on the same page, you should use two form elements.
+{% endAside %}
+
+### Use `<label>` {: #label }
+
+To label an input, use a [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label)!
+
+```html
+<label for="email">Email</label>
+<input id="email" …>
+```
+
+Two reasons:
+* A tap or click on a label moves focus to its input. Associate a label with an
+  input by using the label's `for` attribute with the input's `name` or `id`.
+* Screenreaders announce label text when the label or the label's input gets
+  focus.
+
+Don't use placeholders as input labels. People are liable to forget what the
+input was for once they've started entering text, especially if they get
+distracted ("Was I entering an email address, a phone number, or an account
+ID?"). There are lots of other potential problems with placeholders: see [Don't
+Use The Placeholder
+Attribute](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) and
+[Placeholders in Form Fields Are
+Harmful](https://www.nngroup.com/articles/form-design-placeholders/) if you're
+unconvinced.
+
+It's probably best to put your labels above your inputs. This enables consistent
+design across mobile and desktop and, according to [Google AI
+research](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html),
+enables quicker scanning by users. You get full width labels and inputs, and you
+don't need to adjust label and input width to fit the label text.
+
+<figure>
+  {% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="Screenshot showing form input label position on mobile: next to input and above input.", width="500", height="253" %}
+  <figcaption>Label and input width is limited when both are on the same line.</figcaption>
+</figure>
+
+Open the [label-position](https://label-position.glitch.me) Glitch on a
+mobile device to see for yourself.
+
+### Use `<button>` {: #button }
+
+Use [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)
+for buttons! Button elements provide accessible behaviour and built-in form
+submission functionality, and they can easily be styled. There's no point in
+using a `<div>` or some other element pretending to be a button.
+
+Ensure that the submit button says what it does. Examples include **Create account** or
+**Sign in**, not **Submit** or **Start**.
+
+### Ensure successful form submission {: #submission }
+
+Help password managers understand that a form has been submitted. There are two
+ways to do that:
+
+* Navigate to a different page.
+* Emulate navigation with `History.pushState()` or `History.replaceState()`,
+and remove the password form.
+
+With an `XMLHttpRequest` or `fetch` request, make sure that sign-in success is
+reported in the response and handled by taking the form out of the DOM as well
+as indicating success to the user.
+
+Consider disabling the **Sign in** button once the user has tapped or clicked
+it. [Many users click buttons multiple times](https://baymard.com/blog/users-double-click-online)
+even on sites that are fast and responsive. That slows down interactions and
+adds to server load.
+
+Conversely, don't disable form submission awaiting user input. For example,
+don't disable the **Sign in** button if users haven't entered their customer
+PIN. Users may miss out something in the form, then try repeatedly tapping the
+(disabled) **Sign in** button and think it's not working. At the very least, if
+you must disable form submission, explain to the user what's missing when they
+click on the disabled button.
+
+{% Aside 'caution' %}
+The default type for a button in a form is `submit`. If you want to add another
+button in a form (for **Show password**, for example) add `type="button"`.
+Otherwise clicking or tapping on the button will submit the form.
+
+Pressing the `Enter` key while any form field has focus simulates a click on the first `submit`
+button in the form. If you include a button in your form before the **Submit** button, and don't
+specify the type, that button will have the default type for buttons in a form (`submit`) and
+receive the click event before the form is submitted. For an example of this, see our
+[demo](https://enter-button.glitch.me/): fill in the form, then press `Enter`.
+{% endAside %}
+
+
+### Don't double up inputs {: #no-double-inputs }
+
+Some sites force users to enter emails or passwords twice. That might reduce
+errors for a few users, but causes extra work for *all* users, and [increases
+abandonment
+rates](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/).
+Asking twice also makes no sense where browsers autofill email addresses or
+suggest strong passwords. It's better to enable users to confirm their email
+address (you'll need to do that anyway) and make it easy for them to reset their
+password if necessary.
+
+## Make the most of element attributes {: #element-attributes }
+
+This is where the magic really happens!
+Browsers have multiple helpful built-in features that use input element attributes.
+
+## Keep passwords private—but enable users to see them if they want {: #show-password }
+
+Passwords inputs should have `type="password"` to hide password text and help the
+browser understand that the input is for passwords. (Note that browsers use
+[a variety of techniques](#autofill) to understand input roles and decide
+whether or not to offer to save passwords.)
+
+You should add a **Show password** icon or button to enable users to check the
+text they've entered—and don't forget to add a **Forgot password** link. See
+[Enable password display](#password-display).
+
+<figure>
+  {% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="Google sign-in form showing Show password icon.", width="300", height="107" %}
+  <figcaption>Password input from the Google sign-in form: with <strong>Show password</strong> icon and <strong>Forgot password</strong> link.</figcaption>
+</figure>
+
+## Give mobile users the right keyboard {: #mobile-keyboards }
+
+Use `<input type="email">` to give mobile users an appropriate keyboard and
+enable basic built-in email address validation by the browser… no JavaScript
+required!
+
+If you need to use a telephone number instead of an email address, `<input
+type="tel">` enables a telephone keypad on mobile. You can also use the
+`inputmode` attribute where necessary: `inputmode="numeric"` is ideal for PIN
+numbers. [Everything You Ever Wanted to Know About
+inputmode](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)
+has more detail.
+
+{% Aside 'caution' %}
+`type="number"` adds an up/down arrow to increment numbers, so don't use it for
+numbers that aren't meant to be incremented, such as IDs and account numbers.
+{% endAside %}
+
+### Prevent mobile keyboard from obstructing the **Sign in** button {: #keyboard-obstruction }
+
+Unfortunately, if you're not careful, mobile keyboards may cover your form or,
+worse, partially obstruct the **Sign in** button. Users may give up before
+realizing what has happened.
+
+<figure>
+  {% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Two screenshots of a sign-in form on an Android phone: one showing how the Submit button is obscured by the phone keyboard.", width="400", height="360" %}
+  <figcaption>The <b>Sign in</b> button: now you see it, now you don't.</figcaption>
+</figure>
+
+Where possible, avoid this by displaying only the email/phone and password inputs and **Sign in** button at the top of your sign-in page. Put other content below.
+
+<figure>
+  {% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Screenshot of a sign-in form on an Android phone: the Sign in button is not obscured by the phone keyboard.", width="200", height="342" %}
+  <figcaption>The keyboard doesn't obstruct the <b>Sign in</b> button.</figcaption>
+</figure>
+
+#### Test on a range of devices {: #devices }
+
+You'll need to test on a range of devices for your target audience, and adjust
+accordingly. BrowserStack enables [free testing for open source
+projects](https://www.browserstack.com/open-source) on a range of real devices
+and browsers.
+
+
+<figure>
+  {% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="Screenshots of a sign-in form on iPhone 7, 8 and 11. On iPhone 7 and 8 the Sign in button is obscured by the phone keyboard, but not on iPhone 11", width="800", height="522" %}
+  <figcaption>The <b>Sign in</b> button: obscured on iPhone 7 and 8, but not on iPhone 11.</figcaption>
+</figure>
+
+#### Consider using two pages {: #two-pages }
+
+Some sites (including Amazon and eBay) avoid the problem by asking for
+email/phone and password on two pages. This approach also simplifies the
+experience: the user is only tasked with one thing at a time.
+
+<figure>
+  {% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Screenshot of a sign-in form on the Amazon website: email/phone and password on two separate 'pages'.", width="400", height="385" %}
+  <figcaption>Two-stage sign-in: email or phone, then password.</figcaption>
+</figure>
+
+Ideally, this should be implemented with a single &lt;form&gt;. Use JavaScript
+to initially display only the email input, then hide it and show the password input.
+If you must force the user to navigate to a new page between entering their email and
+password, the form on the second page should have a hidden input element with the
+email value, to help enable password managers to store the correct value. [Password
+Form Styles that Chromium Understands](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)
+provides a code example.
+
+### Help users to avoid re-entering data {: #autofill }
+
+You can help browsers store data correctly and autofill inputs, so users don't
+have to remember to enter email and password values. This is particularly important
+on mobile, and crucial for email inputs, which get [high abandonment rates](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/).
+
+There are two parts to this:
+
+1. The `autocomplete`, `name`, `id`, and `type` attributes help browsers understand
+the role of inputs in order to store data that can later be used for autofill.
+To allow data to be stored for autofill, modern browsers also require inputs to
+have a stable `name` or `id` value (not randomly generated on each page load or
+site deployment), and to be in a &lt;form&gt; with a `submit` button.
+
+1. The `autocomplete` attribute helps browsers correctly autofill inputs using
+stored data.
+
+For email inputs use `autocomplete="username"`, since `username` is recognized
+by password managers in modern browsers—even though you should use `type="email"`
+and you may want to use `id="email"` and `name="email"`.
+
+For password inputs, use the appropriate `autocomplete` and `id` values to help browsers
+differentiate between new and current passwords.
+
+### Use `autocomplete="new-password"` and `id="new-password"` for a new password {: #new-password }
+
+* Use `autocomplete="new-password"` and `id="new-password"` for the password input in a sign-up
+form, or the new password in a change-password form.
+
+### Use `autocomplete="current-password"` and `id="current-password"` for an existing password {: #current-password }
+
+* Use `autocomplete="current-password"` and `id="current-password"` for the password input in a
+  sign-in form, or the input for the user's old password in a change-password form. This tells the
+  browser that you want it to use the current password that it has stored for the site.
+
+For a sign-up form:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+For sign-in:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %}
+Browsers such as Chrome can use the browser's password manager to autofill fields in the sign-in
+process for returning users. For these features to work, the browser needs to be able to
+distinguish when a user changes their password.
+
+Specifically the form for changing the user's password should be cleared or hidden from the page
+after the new password is set up. If the form for changing the user's password stays filled out on
+the page after the password change has occurred, the browser may not be able to record the update.
+{% endAside %}
+
+### Support password managers {: #password-managers }
+
+Different browsers handle email autofill and password suggestion somewhat
+differently, but the effects are much the same. On Safari 11 and above on desktop,
+for example, the password manager is displayed, and then biometric
+authentication (fingerprint or facial recognition) is used if available.
+
+<figure>
+  {% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="Screenshots of three stages of sign-in process in Safari on desktop: password manager, biometric authentication, autofill.", width="800", height="234" %}
+  <figcaption>Sign-in with autocomplete—no text entry required!</figcaption>
+</figure>
+
+Chrome on desktop displays email suggestions, shows the password manager, and autofills the password.
+
+<figure>
+  {% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="Screenshots of four stages of sign-in process in Chrome on desktop: email completion, email suggestion, password manager, autofill on selection.", width="800", height="232" %}
+  <figcaption>Autocomplete sign-in flow in Chrome 84.</figcaption>
+</figure>
+
+
+Browser password and autofill systems are not simple. The algorithms for
+guessing, storing and displaying values are not standardized, and vary from
+platform to platform. For example, as pointed out by [Hidde de
+Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form):
+"Firefox's password manager complements its heuristics with a
+[recipe system](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)."
+
+[Autofill: What web devs should know, but
+don't](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)
+has a lot more information about using `name` and `autocomplete`. The [HTML
+spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control)
+lists all 59 possible values.
+
+{% Aside %}
+You can help password managers by using different `name` and `id` values in sign-up and sign-in
+forms, for the `form` element itself, as well as any `input`, `select` and `textarea` elements.
+{% endAside %}
+
+### Enable the browser to suggest a strong password {: #password-suggestions }
+
+Modern browsers use heuristics to decide when to show the password manager UI and
+suggest a strong password.
+
+Here's how Safari does it on desktop.
+
+<figure>
+  {% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="Screenshot of Firefox password manager on desktop.", width="800", height="229" %}
+  <figcaption>Password suggestion flow in Safari.</figcaption>
+</figure>
+
+(Strong unique password suggestion has been available in Safari since version 12.0.)
+
+Built-in browser password generators mean users and developers don't need
+to work out what a "strong password" is. Since browsers can securely store
+passwords and autofill them as necessary, there's no need for users to remember
+or enter passwords. Encouraging users to take advantage of built-in browser
+password generators also means they're more likely to use a unique, strong
+password on your site, and less likely to reuse a password that could be
+compromised elsewhere.
+
+{% Aside %}
+The downside with this approach is that there's no way to share passwords across
+platforms. For example, a user may use Safari on their iPhone and Chrome on
+their Windows laptop.
+{% endAside %}
+
+
+### Help save users from accidentally missing inputs {: #required-fields }
+
+Add the `required` attribute to both email and password fields.
+Modern browsers automatically prompt and set focus for missing data.
+No JavaScript required!
+
+<figure>
+  {% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="Screenshot of desktop Firefox and Chrome for Android showing 'Please fill out this field' prompt for missing data.", width="600", height="392" %}
+  <figcaption>
+    Prompt and focus for missing data on Firefox for desktop (version 76)
+    and Chrome for Android (version 83).
+  </figcaption>
+</figure>
+
+
+## Design for fingers and thumbs {: #mobile-design }
+
+
+The default browser size for just about everything relating to input elements
+and buttons is too small, especially on mobile. This may seem obvious, but it's
+a common problem with sign-in forms on many sites.
+
+### Make sure inputs and buttons are large enough {: #tap-targets }
+
+The default size and padding for inputs and buttons is too small on desktop and
+even worse on mobile.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="Screenshot of unstyled form in Chrome for desktop and Chrome for Android.", width="800", height="434" %}
+</figure>
+
+
+According to [Android accessibility
+guidance](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB)
+the recommended target size for touchscreen objects is 7–10 mm. Apple interface
+guidelines suggest 48x48 px, and the W3C suggest [at least 44x44 CSS
+pixels](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html). On that
+basis, add (at least) about 15 px of padding to input elements and buttons for
+mobile, and around 10 px on desktop. Try this out with a real mobile device and
+a real finger or thumb. You should comfortably be able to tap each of your
+inputs and buttons.
+
+The [Tap targets are not sized appropriately](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/)
+Lighthouse audit can help you automate the process of detecting input elements
+that are too small.
+
+#### Design for thumbs {: #design-for-thumbs }
+
+Search for [touch target](https://www.google.com/search?q=touch+target) and
+you'll see lots of pictures of forefingers. However, in the real world, many
+people use their thumbs to interact with phones. Thumbs are bigger than
+forefingers, and control is less precise. All the more reason for adequately
+sized touch targets.
+
+### Make text big enough {: #size-text-correctly }
+
+As with size and padding, the default browser font size for input elements and
+buttons is too small, particularly on mobile.
+
+<figure>
+  {% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="Screenshot of unstyled form in Chrome on desktop and on Android.", width="800", height="494" %}
+  <figcaption>Default styling on desktop and mobile: input text is too small to be legible for many users.</figcaption>
+</figure>
+
+Browsers on different platforms size fonts differently, so it's difficult to
+specify a particular font size that works well everywhere. A quick survey of
+popular websites shows sizes of 13–16 pixels on desktop: matching that physical size
+is a good minimum for text on mobile.
+
+This means you need to use a larger pixel size on mobile: `16px` on Chrome for
+desktop is quite legible, but even with good vision it's difficult to read `16px`
+text on Chrome for Android. You can set different font pixel sizes for different
+viewport sizes using [media
+queries](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size).
+`20px` is about right on mobile—but you should test this out with friends or
+colleagues who have low vision.
+
+The [Document doesn't use legible font sizes](https://developer.chrome.com/docs/lighthouse/seo/font-size/)
+Lighthouse audit can help you automate the process of detecting text that's too
+small.
+
+
+### Provide enough space between inputs {: #size-margins-correctly }
+
+Add enough margin to make inputs work well as touch targets. In other words, aim
+for about a finger width of margin.
+
+
+### Make sure your inputs are clearly visible {: #visible-inputs }
+
+The default border styling for inputs makes them hard to see. They're almost
+invisible on some platforms such as Chrome for Android.
+
+As well as padding, add a border: on a white background, a good general rule is
+to use `#ccc` or darker.
+
+<figure>
+  {% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Screenshot of styled form in Chrome on Android.", width="250", height="525" %}
+  <figcaption>Legible text, visible input borders, adequate padding and margins.</figcaption>
+</figure>
+
+
+### Use built-in browser features to warn of invalid input values {: #built-in-validation }
+
+Browsers have built-in features to do basic form validation for inputs with a
+`type` attribute. Browsers warn when you submit a form with an invalid value,
+and set focus on the problematic input.
+
+<figure>
+  {% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value.", width="300", height="290" %}
+  <figcaption>Basic built-in validation by the browser.</figcaption>
+</figure>
+
+You can use the `:invalid` CSS selector to highlight invalid data. Use
+`:not(:placeholder-shown)` to avoid selecting inputs with no content.
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+Try out different ways of highlighting inputs with invalid values.
+
+## Use JavaScript where necessary {: #javascript }
+
+### Toggle password display {: #password-display }
+
+You should add a **Show password** icon or button to enable users to check the
+text they've entered. [Usability
+suffers](https://www.nngroup.com/articles/stop-password-masking/) when users
+can't see the text they've entered. Currently there's no built-in way to do
+this, though [there are plans for
+implementation](https://twitter.com/sw12/status/1251191795377156099). You'll
+need to use JavaScript instead.
+
+<figure>
+  <img src="./show-password-google.png" alt="Google sign-in form showing Show password icon." width="350">
+  <figcaption>Google sign-in form: with <strong>Show password</strong> icon and <strong>Forgot password</strong> link.</figcaption>
+</figure>
+
+The following code uses a text button to add **Show password** functionality.
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+Here's the CSS to make the button look like plain text:
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+And the JavaScript for showing the password:
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Hide password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Hide password.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Show password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Show password as plain text. ' +
+      'Warning: this will display your password on the screen.');
+  }
+}
+```
+
+Here's the end result:
+
+<figure>
+  {% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Screenshots of sign-in form with Show password text 'button', in Safari on Mac and on iPhone 7.", width="800", height="468" %}
+  <figcaption>Sign-in form with <strong>Show password</strong> text 'button', in Safari on Mac and iPhone 7.</figcaption>
+</figure>
+
+
+### Make password inputs accessible {: #accessible-password-inputs }
+
+Use `aria-describedby` to outline password rules by giving it the ID of the
+element that describes the constraints. Screenreaders provide the label text, the
+input type (password), and then the description.
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
+```
+
+When you add **Show password** functionality, make sure to include
+an `aria-label` to warn that the password will be displayed. Otherwise users may
+inadvertently reveal passwords.
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Show password as plain text.
+                    Warning: this will display your password on the screen.">
+  Show password
+</button>
+```
+
+You can see both ARIA features in action in the following Glitch:
+
+{% Glitch {
+  id: 'sign-in-form',
+  path: 'index.html',
+  height: 480
+} %}
+
+[Creating Accessible Forms](https://webaim.org/techniques/forms/) has more tips to help make forms accessible.
+
+### Validate in realtime and before submission {: #validation }
+
+HTML form elements and attributes have built-in features for basic validation,
+but you should also use JavaScript to do more robust validation while users are
+entering data and when they attempt to submit the form.
+
+{% Aside 'warning' %}
+Client-side validation helps users enter data and can avoid unnecessary server
+load, but you must always validate and sanitize data on your backend.
+{% endAside %}
+
+[Step 5](https://glitch.com/edit/#!/sign-in-form-codelab-5) of the sign-in form
+codelab uses the [Constraint Validation
+API](https://html.spec.whatwg.org/multipage/forms.html#constraints) (which is
+[widely supported](https://caniuse.com/#feat=constraint-validation)) to add
+custom validation using built-in browser UI to set focus and display prompts.
+
+Find out more: [Use JavaScript for more complex real-time
+validation](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+
+### Analytics and RUM {: #analytics }
+
+"What you cannot measure, you cannot improve" is particularly true for sign-up
+and sign-in forms. You need to set goals, measure success, improve your site—and
+repeat.
+
+[Discount usability
+testing](https://www.nngroup.com/articles/discount-usability-20-years/) can be
+helpful for trying out changes, but you'll need real-world data to really
+understand how your users experience your sign-up and sign-in forms:
+
+* **Page analytics**: sign-up and sign-in page views, bounce rates,
+  and exits.
+* **Interaction analytics**: [goal
+  funnels](https://support.google.com/analytics/answer/6180923?hl=en) (where do
+  users abandon your sign-in or sign-in flow?) and
+  [events](https://developers.google.com/analytics/devguides/collection/gtagjs/events)
+  (what actions do users take when interacting with your forms?)
+* **Website performance**: [user-centric
+  metrics](/user-centric-performance-metrics) (are your sign-up and sign-in
+  forms slow for some reason and, if so, what is the cause?).
+
+You may also want to consider implementing A/B testing in order to try out
+different approaches to sign-up and sign-in, and staged rollouts to validate the
+changes on a subset of users before releasing changes to all users.
+
+## General guidelines {: #general-guidelines }
+
+Well designed UI and UX can reduce sign-in form abandonment:
+
+* Don't make users hunt for sign-in! Put a link to the sign-in form at the top
+  of the page, using well-understood wording such as **Sign In**, **Create Account**
+  or **Register**.
+* Keep it focused! Sign-up forms are not the place to distract people with
+  offers and other site features.
+* Minimize sign-up complexity. Collect other user data (such as addresses or
+  credit card details) only when users see a clear benefit from providing that
+  data.
+* Before users start on your sign-up form, make it clear what the value
+  proposition is. How do they benefit from signing in? Give users concrete
+  incentives to complete sign-up.
+* If possible allow users to identify themselves with a mobile phone number
+  instead of an email address, since some users may not use email.
+* Make it easy for users to reset their password, and make the **Forgot your
+  password?** link obvious.
+* Link to your terms of service and privacy policy documents: make it clear to
+  users from the start how you safeguard their data.
+* Include the logo and name of your company or organization on your signup and
+  sign-in pages, and make sure that language, fonts and styles match the rest of
+  your site. Some forms don't feel like they belong to the same site as other
+  content, especially if they have a significantly different URL.
+
+## Keep learning {: #resources }
+
+* [Create Amazing Forms](/learn/forms/)
+* [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+* [More capable form controls](/more-capable-form-controls)
+* [Creating Accessible Forms](https://webaim.org/techniques/forms/)
+* [Streamlining the Sign-in Flow Using Credential Management API](https://developer.chrome.com/blog/credential-management-api/)
+* [Verify phone numbers on the web with the WebOTP API](/web-otp/)
+
+Photo by [Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU) on [Unsplash](https://unsplash.com).
diff --git a/src/site/content/en/identity/sign-up-form-best-practices/index.md b/src/site/content/en/identity/sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..747de826e36
--- /dev/null
+++ b/src/site/content/en/identity/sign-up-form-best-practices/index.md
@@ -0,0 +1,417 @@
+---
+layout: post
+title: Sign-up form best practices
+subhead: Help your users sign up, log in and manage their account details with a minimum of fuss.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2020-12-11
+description: Help your users sign up, log in and manage their account details with a minimum of fuss.
+hero: image/admin/YfAltWqxvie1SP19BxBj.jpg
+thumbnail: image/admin/7bDPvFWBMFIMynoqDpMc.jpg
+alt: Clipboard with handwritten page showing list of vegetables sown.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-up-form-best-practices
+---
+
+{% YouTube 'Ev2mCzJZLtY' %}
+
+If users ever need to log in to your site, then good sign-up form design is
+critical. This is especially true for people on poor connections, on mobile, in
+a hurry, or under stress. Poorly designed sign-up forms get high bounce rates.
+Each bounce could mean a lost and disgruntled user—not just a missed sign-up
+opportunity.
+
+{% Aside 'codelab' %}
+If you would prefer to learn these best practices with a hands-on tutorial,
+check out the [Sign-up form best practices codelab](/codelab-sign-up-form-best-practices).
+{% endAside %}
+
+Here is an example of a very simple sign-up form that demonstrates all of the best practices:
+
+{% Glitch {
+  id: 'signup-form',
+  path: 'index.html',
+  height: 700
+} %}
+
+{% Aside 'caution' %}
+This post is about form best practices.
+
+It does not explain how to implement sign-up via a third-party identity provider (federated login)
+or show how to build backend services to authenticate users, store credentials, and manage accounts.
+
+[Integrating Google Sign-In into your web app](https://developers.google.com/identity/sign-in/web/sign-in)
+explains how to add federated login to your sign-up options.
+
+[12 best practices for user
+account, authorization and password management](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) outlines core back-end principles for managing user accounts.
+{% endAside %}
+
+## Checklist
+
+- [Avoid sign-in if you can](#no-forced-sign-in).
+- [Make it obvious how to create an account](#obvious-account-creation).
+- [Make it obvious how to access account details](#obvious-account-details).
+- [Cut form clutter](#cut-clutter).
+- [Consider session length](#session-length).
+- [Help password managers securely suggest and store passwords](#help-password-managers).
+- [Don't allow compromised passwords](#no-compromised-passwords).
+- [Do allow password pasting](#allow-password-pasting).
+- [Never store or transmit passwords in plain text](#salt-and-hash).
+- [Don't force password updates](#no-forced-password-updates).
+- [Make it simple to change or reset passwords](#password-change).
+- [Enable federated login](#federated-login).
+- [Make account switching simple](#account-switching).
+- [Consider offering multi-factor authentication](#multi-factor-authentication).
+- [Take care with usernames](#username).
+- [Test in the field as well as the lab](#analytics-rum).
+- [Test on a range of browsers, devices and platforms](#test-platforms).
+
+## Avoid sign-in if you can {: #no-forced-sign-in }
+
+Before you implement a sign-up form and ask users to create an account on your site, consider
+whether you really need to. Wherever possible you should avoid gating features behind login.
+
+The best sign-up form is no sign-up form!
+
+By asking a user to create an account, you come between them and what they're trying to achieve.
+You're asking a favor, and asking the user to trust you with personal data. Every password and item
+of data you store carries privacy and security "data debt", becoming a cost and liability for
+your site.
+
+If the main reason you ask users to create an account is to save information between navigations or
+browsing sessions, [consider using client-side storage](/storage-for-the-web) instead. For shopping
+sites, forcing users to create an account to make a purchase is cited as a major reason for shopping
+cart abandonment. You should [make guest checkout the default](/payment-and-address-form-best-practices#guest-checkout).
+
+## Make sign-in obvious {: #obvious-account-creation}
+
+Make it obvious how to create an account on your site, for example with a **Login** or **Sign in**
+button at the top right of the page. Avoid using an ambiguous icon or vague wording ("Get on board!",
+"Join us") and don't hide login in a navigational menu. The usability expert Steve Krug summed up
+this approach to website usability: [Don't make me think!](https://uxplanet.org/dont-make-me-think-20-wise-thoughts-about-usability-from-steve-krug-876b563f1d63) If you need to
+convince others on your web team, use [analytics](#analytics-rum) to show the impact of different
+options.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KeztoU8KgAqrQ5CKBSWw.jpg", alt="Two screenshots of a mockup ecommerce website viewed on an Android phone. The one on the left uses an icon for the sign-in link that's somewhat ambiguous; the one on the right simply says 'Sign in'", width="800", height="737" %}
+  <figcaption>Make sign-in obvious. An icon may be ambiguous, but a <b>Sign
+  in</b> button or link is obvious.</figcaption>
+</figure>
+
+{% Aside %}
+You may be wondering whether to add a button (or link) to create an account and another one for
+existing users to sign in. Many popular sites now simply display a single **Sign in** button. When
+the user taps or clicks on that, they also get a link to create an account if necessary. That's a
+common pattern now, and your users are likely to understand it, but you can use
+[interaction analytics](#analytics-rum) to monitor whether or not a single button works best.
+{% endAside %}
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WUgCNqhEgvoWEVwGjfrA.jpg", alt="Screenshots of sign-in for Gmail: one page, showing Sign in button, when clicked leads to form that also has a Create account link.", width="800", height="545" %}
+  <figcaption>The Gmail sign-in page has a link to create an account.<br>
+    At window sizes larger than shown here, Gmail displays a <b>Sign in</b> link and a <b>Create an
+  account</b> button.</figcaption>
+</figure>
+
+Make sure to link accounts for users who sign up via an identity provider such as Google and who
+also sign up using email and password. That's easy to do if you can access a user's email address
+from the profile data from the identity provider, and match the two accounts. The code below shows
+how to access email data for a Google Sign-in user.
+
+```js
+// auth2 is initialized with gapi.auth2.init()
+if (auth2.isSignedIn.get()) {
+  var profile = auth2.currentUser.get().getBasicProfile();
+  console.log(`Email: ${profile.getEmail()}`);
+}
+```
+
+{: #obvious-account-details}
+
+Once a user has signed in, make it clear how to access account details. In particular, make it
+obvious how to [change or reset passwords](#password-change).
+
+## Cut form clutter {: #cut-clutter}
+
+In the sign-up flow, your job is to minimize complexity and keep the user focused. Cut the clutter.
+This is not the time for distractions and temptations!
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/avoid-distractions.mp4" type="video/mp4">
+   </video>
+  <figcaption>Don't distract users from completing sign-up.</figcaption>
+</figure>
+
+On sign-up, ask for as little as possible. Collect additional user data (such as name and address)
+only when you need to, and when the user sees a clear benefit from providing that data. Bear in mind
+that every item of data you communicate and store incurs cost and liability.
+
+Don't double up your inputs just to make sure users get their contact details right. That slows down
+form completion and doesn't make sense if form fields are autofilled. Instead, send a confirmation
+code to the user once they've entered their contact details, then continue with account creation
+once they respond. This is a common sign-up pattern: users are used to it.
+
+You may want to consider password-free sign-in by sending users a code every time they sign in on
+a new device or browser. Sites such as Slack and Medium use a version of this.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/medium-sign-in.mp4" type="video/mp4">
+   </video>
+  <figcaption>Password-free sign-in on medium.com.</figcaption>
+</figure>
+
+As with federated login, this has the added benefit that you don't have to manage user passwords.
+
+## Consider session length {: #session-length}
+
+Whatever approach you take to user identity, you'll need to make a careful decision about session
+length: how long the user remains logged in, and what might cause you to log them out.
+
+Consider whether your users are on mobile or desktop, and whether
+they are sharing on desktop, or sharing devices.
+
+{% Aside %}
+You can get around some of the issues of shared devices by enforcing re-authentication for sensitive
+features, for example when a purchase is made or an account updated. You can find out more about
+ways to implement re-authentication from the codelab [Your First WebAuthn App](https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0).
+{% endAside %}
+
+## Help password managers securely suggest and store passwords {: #help-password-managers}
+
+You can help third party and built-in browser password managers suggest and store passwords, so that
+users don't need to choose, remember or type passwords themselves. Password managers work well in
+modern browsers, synchronizing accounts across devices, across platform-specific and web apps—and
+for new devices.
+
+This makes it extremely important to code sign-up forms correctly, in particular to use the correct
+autocomplete values. For sign-up forms use `autocomplete="new-password"` for new passwords, and add
+correct autocomplete values to other form fields wherever possible, such as `autocomplete="email"`
+and `autocomplete="tel"`. You can also help password managers by using different `name` and `id`
+values in sign-up and sign-in forms, for the `form` element itself, as well as any `input`, `select`
+and `textarea` elements.
+
+You should also use the appropriate [`type` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)
+to provide the right keyboard on mobile and enable basic built-in validation by the browser.
+You can find out more from [Payment and address form best practices](/payment-and-address-form-best-practices#type).
+
+{% Aside %}
+[Sign-in form best practices](/sign-in-form-best-practices) has lots more tips on how to improve
+form design, layout and accessibility, and how to code forms correctly in order to take advantage
+of built-in browser features.
+{% endAside %}
+
+## Ensure users enter secure passwords {: #secure-passwords}
+
+Enabling password managers to suggest passwords is the best option, and you should encourage
+users to accept the strong passwords suggested by browsers and third-party browser managers.
+
+However, many users want to enter their own passwords, so you need to implement rules for password
+strength. The US National Institute of Standards and Technology explains
+[how to avoid insecure passwords](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements).
+
+{% Aside 'warning' %}
+Sign-up forms on some sites have password validation rules that don't allow the strong passwords
+generated by browser and third-party password managers. Make sure your site doesn't do this,
+since it interrupts form completion, annoys users, and requires users to make up their own
+passwords, which may be less secure than those generated by password managers.
+{% endAside %}
+
+## Don't allow compromised passwords {: #no-compromised-passwords}
+
+Whatever rules you choose for passwords, you should never allow passwords that have been [exposed in
+security breaches](https://haveibeenpwned.com/PwnedWebsites).
+
+Once a user has entered a password, you need to check that it's not a password that's already been
+compromised. The site [Have I Been Pwned](https://haveibeenpwned.com/Passwords) provides an API for password
+checking, or you can run this as a service yourself.
+
+Google's Password Manager also allows you to [check if any of your existing passwords have been
+compromised](https://passwords.google.com/checkup).
+
+If you do reject the password that a user proposes, tell them specifically why it was rejected.
+[Show problems inline and explain how to fix them](https://baymard.com/blog/inline-form-validation),
+as soon as the user has entered a value—not after they've submitted the sign-up form and had to
+wait for a response from your server.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/password-validation.mp4" type="video/mp4">
+   </video>
+  <figcaption>Be clear why a password is rejected.</figcaption>
+</figure>
+
+## Don't prohibit password pasting {: #allow-password-pasting}
+
+Some sites don't allow text to be pasted into password inputs.
+
+Disallowing password pasting annoys users, encourages passwords that are memorable (and therefore
+may be easier to compromise) and, according to organizations such as the UK National
+Cyber Security Centre, may actually [reduce security](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords).
+Users only become aware that pasting is disallowed _after_ they try to paste their password, so
+[disallowing password pasting doesn't avoid clipboard vulnerabilities](https://github.com/OWASP/owasp-masvs/issues/106).
+
+## Never store or transmit passwords in plain text {: #salt-and-hash}
+
+Make sure to [salt and hash](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt) passwords—and [don't try to invent your own hashing algorithm](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html)!
+
+## Don't force password updates {: #no-forced-password-updates}
+
+[Don't force users to update their passwords arbitrarily.](https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers:~:text=Verifiers%20SHOULD%20NOT%20require%20memorized%20secrets%20to%20be%20changed%20arbitrarily%20(e.g.%2C%20periodically).)
+
+Forcing password updates can be costly for IT departments, annoying to users, and [doesn't have much
+impact on security](https://pages.nist.gov/800-63-FAQ/#q-b05). It's also likely to encourage people
+to use insecure memorable passwords, or to keep a physical record of passwords.
+
+Rather than force password updates, you should monitor for unusual account activity and warn users.
+If possible you should also monitor for passwords that become compromised because of data breaches.
+
+You should also provide your users with access to their account login history, showing them where
+and when a login happened.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zZXmhWc9bZ1GtvrE5Ooq.jpg", alt="Gmail account activity page", width="800", height="469" %}
+  <figcaption><a href="https://support.google.com/mail/answer/45938?hl=en-GB"
+    title="Find out how to view Gmail account activity.">Gmail account activity page</a>.</figcaption>
+</figure>
+
+## Make it simple to change or reset passwords {: #password-change}
+
+Make it obvious to users where and how to **update** their account password. On some sites, it's
+surprisingly difficult.
+
+You should, of course, also make it simple for users to **reset** their password if they forget it.
+The Open Web Application Security Project provides detailed guidance on [how to handle lost
+passwords](https://cheatsheetseries.owasp.org/cheatsheets/Forgot_Password_Cheat_Sheet.html).
+
+To keep your business and your users safe, it's especially important to help users change their
+password if they discover that it's been compromised. To make this easier, you should add a
+[`/.well-known/change-password`](https://w3c.github.io/webappsec-change-password-url/) URL to your
+site that redirects to your password management page. This enables password managers to navigate
+your users directly to the page where they can change their password for your site. This feature is
+now implemented in Safari, Chrome, and is coming to other browsers. [Help users change passwords
+easily by adding a well-known URL for changing passwords](/change-password-url) explains how to
+implement this.
+
+You should also make it simple for users to delete their account if that's what they want.
+
+## Offer login via third-party identity providers {: #federated-login}
+
+Many users prefer to log in to websites using an email address and password sign-up form.
+However, you should also enable users to log in via a third party identity provider, also known as
+federated login.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jubgwX1shLB7qAIiioTU.jpg", alt="WordPress login page", width="800", height="513" %}
+  <figcaption>WordPress login page, with Google and Apple login options.</figcaption>
+</figure>
+
+This approach has several advantages. For users who create an account using federated login, you
+don't need to ask for, communicate, or store passwords.
+
+You may also be able to access additional verified profile information from federated login, such
+as an email address—which means the user doesn't have to enter that data and you don't need to do
+the verification yourself. Federated login can also make it much easier for users when they get a
+new device.
+
+[Integrating Google Sign-In into your web app](https://developers.google.com/identity/sign-in/web/sign-in)
+explains how to add federated login to your sign-up options. [Many other](https://en.wikipedia.org/wiki/Federated_identity#Examples) identity platforms are available.
+
+{% Aside %}
+"First day experience" when you get a new device is increasingly important. Users expect to log in from
+multiple devices including their phone, laptop, desktop, tablet, TV, or from a car. If your sign-up
+and sign-in forms aren't seamless, this is a moment where you risk losing users, or at least losing
+contact with them until they get set up again. You need to make it as quick and easy as possible for
+users on new devices to get up and running on your site. This is another area where federated login
+can help.
+{% endAside %}
+
+## Make account switching simple {: #account-switching}
+
+Many users share devices and swap between accounts using the same browser. Whether users access
+federated login or not, you should make account switching simple.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sPDZJIY5Vo2ijqyuofCy.jpg", alt="Gmail, showing account switching", width="800", height="494" %}
+  <figcaption>Account switching on Gmail.</figcaption>
+</figure>
+
+## Consider offering multi-factor authentication {: #multi-factor-authentication}
+
+Multi-factor authentication means ensuring that users provide authentication in more than one way.
+For example, as well as requiring the user to set a password, you might also enforce verification
+using a one-time-passcode sent by email or an SMS text message, or by using an app-based one-time
+code, security key or fingerprint sensor. [SMS OTP best practices](/sms-otp-form) and
+[Enabling Strong Authentication with WebAuthn](https://developer.chrome.com/blog/webauthn/)
+explain how to implement multi-factor authentication.
+
+You should certainly offer (or enforce) multi-factor authentication if your site handles personal or
+sensitive information.
+
+## Take care with usernames {: #username}
+
+Don't insist on a username unless (or until) you need one. Enable users to sign up and sign in with
+only an email address (or telephone number) and password—or [federated login](#federated-login)
+if they prefer. Don't force them to choose and remember a username.
+
+If your site does require usernames, don't impose unreasonable rules on them, and don't stop users
+from updating their username. On your backend you should generate a unique ID for every user account,
+not an identifier based on personal data such as username.
+
+Also make sure to use `autocomplete="username"` for usernames.
+
+{% Aside 'caution' %}
+As with personal names, ensure that usernames aren't restricted to characters from the [Latin
+alphabet](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes#Types:~:text=Latin%20alphabet). [Payment and address form best practices](/payment-and-address-form-best-practices#unicode-matching)
+explains how and why to validate using Unicode letter matching.
+{% endAside %}
+
+## Test on a range of devices, platforms, browsers and versions {: #test-platforms}
+
+Test sign-up forms on the platforms most common for your users. Form element functionality may vary,
+and differences in viewport size can cause layout problems. BrowserStack enables [free testing for
+open source projects](https://www.browserstack.com/open-source) on a range of devices and browsers.
+
+## Implement analytics and Real User Monitoring {: #analytics-rum}
+
+You need [field data as well as lab data](/how-to-measure-speed/#lab-data-vs-field-data)
+to understand how users experience your sign-up forms. Analytics and [Real User Monitoring](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic#Real_User_Monitoring)
+(RUM) provide data for the actual experience of your users, such as how long sign-up pages take to
+load, which UI components users interact with (or not) and how long it takes users to complete
+sign-up.
+
+- **Page analytics**: [page views, bounce rates and exits](https://analytics.google.com/analytics/academy/course/6) for every page in your sign-up flow.
+- **Interaction analytics**: [goal funnels](https://support.google.com/analytics/answer/6180923?hl=en)
+  and [events](https://developers.google.com/analytics/devguides/collection/gtagjs/events)
+  indicate where users abandon the sign-up flow and what proportion of users click buttons,
+  links, and other components of your sign-up pages.
+- **Website performance**: [user-centric metrics](/user-centric-performance-metrics)
+  can tell you if your sign-up flow is slow to load or [visually unstable](/cls).
+
+Small changes can make a big difference to completion rates for sign-up forms. Analytics and RUM
+enable you to optimize and prioritize changes, and monitor your site for problems that aren't
+exposed by local testing.
+
+## Keep learning {: #resources }
+
+- [Sign-in form best practices](/sign-in-form-best-practices)
+- [Payment and address form best practices](/payment-and-address-form-best-practices)
+- [Create Amazing Forms](/learn/forms/)
+- [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [More capable form controls](/more-capable-form-controls)
+- [Creating Accessible Forms](https://webaim.org/techniques/forms/)
+- [Streamlining the Sign-up Flow Using Credential Management API](https://developer.chrome.com/blog/credential-management-api/)
+- [Verify phone numbers on the web with the WebOTP API](/web-otp)
+
+Photo by [@ecowarriorprincess](https://unsplash.com/@ecowarriorprincess) on [Unsplash](https://unsplash.com/photos/lUShu7PHIGA).
diff --git a/src/site/content/en/identity/sms-otp-form/index.md b/src/site/content/en/identity/sms-otp-form/index.md
new file mode 100644
index 00000000000..02e66bee5ec
--- /dev/null
+++ b/src/site/content/en/identity/sms-otp-form/index.md
@@ -0,0 +1,286 @@
+---
+layout: post
+title: SMS OTP form best practices
+subhead: Learn how to optimize your SMS OTP form and improve user experience.
+authors:
+  - agektmr
+date: 2020-12-09
+updated: 2020-12-09
+hero: image/admin/J3XT84NDBPLlsRN0PhLl.jpg
+alt: A neon chat bubble sign.
+
+description: |
+  Asking a user to provide an OTP (one-time password) delivered via SMS is a
+  common way to confirm a user's phone number. This post provides you with the
+  best practices to build an SMS OTP form with great user experience.
+
+tags:
+  - identity
+  - security
+  - forms
+  # - otp
+---
+
+{% YouTube 'sU4MpWYrGSI' %}
+
+Asking a user to provide the OTP (one time password) delivered via SMS is a common
+way to confirm a user's phone number. There are a few use cases for SMS OTP:
+
+* **Two-factor authentication.** In addition to username and password, SMS OTP can be
+used as a strong signal that the account is owned by the person who received the
+SMS OTP.
+* **Phone number verification.** Some services use a phone number as the user's
+primary identifier. In such services, users can enter their phone number and the
+OTP received via SMS to prove their identity. Sometimes it's combined with a PIN
+to constitute a two-factor authentication.
+* **Account recovery.** When a user loses access to their account, there needs
+to be a way to recover it. Sending an email to their registered email address or
+an SMS OTP to their phone number are common account recovery methods.
+* **Payment confirmation** In payment systems, some banks or credit card
+issuers request additional authentication from the payer for security reasons.
+SMS OTP is commonly used for that purpose.
+
+This post explains best practices to build an SMS OTP form for the above use
+cases.
+
+{% Aside 'caution' %}
+While this post discusses SMS OTP form best practices, be aware that SMS OTP is
+not the most secure method of authentication by itself because phone
+numbers can be recycled and sometimes hijacked. And [the concept of OTP
+itself is not phishing resistant](https://youtu.be/kGGMgEfSzMw?t=1133).
+
+If you are looking for better security, consider using
+[WebAuthn](https://www.w3.org/TR/webauthn-2/). Learn more about it from the talk
+"[What's new in sign-up & sign-in](https://goo.gle/webauthn-video)" at the
+Chrome Dev Summit 2019 and build a reauthentication experience using a biometric
+sensor with "[Build your first WebAuthn app](https://goo.gle/WebAuthnReauthCodelab)"
+codelab.
+{% endAside %}
+
+## Checklist
+
+To provide the best user experience with the SMS OTP, follow these steps:
+
+* Use the `<input>` element with:
+    * `type="text"`
+    * `inputmode="numeric"`
+    * `autocomplete="one-time-code"`
+* Use `@BOUND_DOMAIN #OTP_CODE` as the last line of the OTP SMS message.
+* Use the [WebOTP API](/web-otp/).
+
+## Use the `<input>` element
+
+Using a form with an `<input>` element is the most important best practice you
+can follow because it works in all browsers. Even if other suggestions from
+this post don't work in some browser, the user will still be able to enter and submit the OTP
+manually.
+
+```html
+<form action="/verify-otp" method="POST">
+  <input type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         pattern="\d{6}"
+         required>
+</form>
+```
+
+The following are a few ideas to ensure an input field gets the best out of
+browser functionality.
+
+### `type="text"`
+
+Since OTPs are usually five or six digit numbers, using
+`type="number"` for an input field might seem intuitive because it changes the mobile
+keyboard to numbers only. This is not recommended because the browser expects an
+input field to be a countable number rather than a sequence of multiple numbers,
+which can cause unexpected behavior. Using `type="number"` causes up and down
+buttons to be displayed beside the input field; pressing these buttons
+increments or decrements the number and may remove preceding zeros.
+
+Use `type="text"` instead. This won't turn the mobile keyboard into numbers
+only, but that is fine because the next tip for using `inputmode="numeric"` does
+that job.
+
+### `inputmode="numeric"`
+
+Use [`inputmode="numeric"`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode)
+to change the mobile keyboard to numbers only.
+
+Some websites use `type="tel"` for OTP input fields since it also
+turns the mobile keyboard to numbers only (including `*` and `#`) when
+focused. This hack was used in the past when `inputmode="numeric"`
+wasn't widely supported. Since [Firefox started supporting
+`inputmode="numeric"`](https://github.com/mdn/browser-compat-data/pull/6782),
+there's no need to use the semantically incorrect `type="tel"` hack.
+
+### `autocomplete="one-time-code"`
+
+[`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)
+attribute lets developers specify what permission the browser
+has to provide autocomplete assistance and informs the browser about the
+type of information expected in the field.
+
+With `autocomplete="one-time-code"` whenever a user receives an SMS message while a
+form is open, the operating system will parse the OTP in the SMS heuristically and
+the keyboard will suggest the OTP for the user to enter. It works only on Safari 12 and
+later on iOS, iPadOS, and macOS, but we strongly recommend using it, because it is an
+easy way to improve the SMS OTP experience on those platforms.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    `autocomplete="one-time-code"` in action.
+  </figcaption>
+</figure>
+
+`autocomplete="one-time-code"` improves the user experience, but there's more you
+can do by [ensuring that the SMS message complies with the origin-bound message
+format](#format).
+
+{% Aside %}
+Optional attributes:
+
+* [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern)
+  specifies the format that the entered OTP must match. Use regular expressions to specify
+  the matching pattern, for example, `\d{6}` constrains the OTP to a six digit string. Learn more about the
+  `pattern` attribute in [Use JavaScript for more complex real-time validation](/learn/forms/javascript/#ensure-users-are-notified-about-errors-in-real-time)
+
+* [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)
+  indicates that a field is required.
+
+For more general form best practices, [Sam Dutton](/authors/samdutton/)'s
+[Sign-in form best practices](/sign-in-form-best-practices/) is a great starting
+point.
+{% endAside %}
+
+## Format the SMS text {: #format }
+
+Enhance the user experience of entering an OTP by aligning with
+[the origin-bound one-time codes delivered via SMS](https://wicg.github.io/sms-one-time-codes/)
+specification.
+
+The format rule is simple: Finish the SMS message with the receiver domain
+preceded with `@` and the OTP preceded with `#`.
+
+For example:
+```text
+Your OTP is 123456
+
+@web-otp.glitch.me #123456
+```
+
+Using a standard format for OTP messages makes extraction
+of codes from them easier and more reliable. Associating OTP codes with
+websites makes it harder to trick users into providing a code to malicious sites.
+
+{% Aside %}
+The precise rules are:
+* The message begins with (optional) human-readable text that contains a four to
+  ten character alphanumeric string with at least one number, leaving the last
+  line for the URL and the OTP.
+* The domain part of the URL of the website that invoked the API must be
+  preceded by `@`.
+* The URL must contain a pound sign ("`#`") followed by the OTP.
+
+Make sure the number of characters doesn't exceed 140 in total.
+
+To learn more about Chrome specific rules, read [Format the SMS message section
+of WebOTP API post](/web-otp/#format).
+{% endAside %}
+
+Using this format provides a couple of benefits:
+
+* The OTP will be bound to the domain. If the user is on domains other than
+  the one specified in the SMS message, the OTP suggestion won't appear.
+  This also mitigates the risk of phishing attacks and potential account hijacks.
+* Browser will now be able to reliably extract the OTP without depending on
+  mysterious and flaky heuristics.
+
+When a website uses `autocomplete="one-time-code"`, Safari with iOS 14 or later
+will suggest the OTP following the above rules.
+
+{% Aside %}
+If the user is on a desktop with macOS Big Sur with the same iCloud account set
+up as on iOS, the OTP received on the iOS device will be
+available on the desktop Safari as well.
+
+To learn more about other benefits and nuances of the availability on Apple
+platforms, read [Enhance SMS-delivered code security with domain-bound
+codes](https://developer.apple.com/news/?id=z0i801mg).
+{% endAside %}
+
+This SMS message format also benefits browsers other than Safari. Chrome, Opera,
+and Vivaldi on Android also support the origin-bound one-time codes rule with
+the WebOTP API, though not through `autocomplete="one-time-code"`.
+
+## Use the WebOTP API
+
+[The WebOTP API](https://wicg.github.io/web-otp/) provides access to the OTP
+received in an SMS message. By calling
+[`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get)
+with `otp` type (`OTPCredential`) where `transport` includes `sms`, the website
+will wait for an SMS that complies with the origin-bound one-time codes to be
+delivered and granted access by the user. Once the OTP is passed to JavaScript,
+the website can use it in a form or POST it directly to the server.
+
+{% Aside 'caution' %}
+The WebOTP API requires a secure origin (HTTPS).
+{% endAside %}
+
+```js
+navigator.credentials.get({
+  otp: {transport:['sms']}
+})
+.then(otp => input.value = otp.code);
+```
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    WebOTP API in action.
+  </figcaption>
+</figure>
+
+Learn how to use the WebOTP API in detail in [Verify phone numbers on the web
+with the WebOTP API](/web-otp/) or copy and paste the following snippet. (Make
+sure the `<form>` element has an `action` and `method` attribute properly set.)
+
+```js
+// Feature detection
+if ('OTPCredential' in window) {
+  window.addEventListener('DOMContentLoaded', e => {
+    const input = document.querySelector('input[autocomplete="one-time-code"]');
+    if (!input) return;
+    // Cancel the WebOTP API if the form is submitted manually.
+    const ac = new AbortController();
+    const form = input.closest('form');
+    if (form) {
+      form.addEventListener('submit', e => {
+        // Cancel the WebOTP API.
+        ac.abort();
+      });
+    }
+    // Invoke the WebOTP API
+    navigator.credentials.get({
+      otp: { transport:['sms'] },
+      signal: ac.signal
+    }).then(otp => {
+      input.value = otp.code;
+      // Automatically submit the form when an OTP is obtained.
+      if (form) form.submit();
+    }).catch(err => {
+      console.log(err);
+    });
+  });
+}
+```
+
+Photo by [Jason Leung](https://unsplash.com/photos/mZNRsYE9Qi4) on
+[Unsplash](https://unsplash.com).
diff --git a/src/site/content/en/index.11tydata.js b/src/site/content/en/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/en/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/en/index.md b/src/site/content/en/index.md
new file mode 100644
index 00000000000..eac65305d06
--- /dev/null
+++ b/src/site/content/en/index.md
@@ -0,0 +1,226 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'Brought to you by the Chrome DevRel team'
+  title: "Building a better web, together"
+  summary: |
+    Guidance to build modern web experiences that work on any browser.
+  buttonText: 'About web.dev'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/zrBPJq27O4Hs8haszVnK.svg'
+  imageWidth: '333'
+  imageHeight: '240'
+
+featuredCard:
+  eyebrow: ''
+  title: '&nbsp; Top web things from <br>&nbsp; Google I/O.'
+  background: 'image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg'
+  url: 'https://www.youtube.com/watch?v=gkAYHomO5Hg&list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h'
+  image: '.'
+  alt: '.'
+  theme: 'light'
+
+pickedCaseStudyUrl: '/redbus-inp/'
+
+platformNews:
+  title: Web platform news
+  subTitle: Keep up to date with the latest news from the major browser engines.
+  pickedLeft:
+    url: '/introducing-baseline/'
+  pickedRight:
+    url: '/web-platform-05-2023/'
+
+themes:
+  - category: CSS and UI
+    cards:
+      - latestPostByTags:
+          - css
+          - javascript
+          - html
+          - dom
+        cardLayout: 'vertical'
+      - title: 'The CSS Podcast'
+        description: Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
+        thumbnail: image/SZHNhsfjU9RbCestTGZU6N7JEWs1/VwL892KEz6bakZMlq10D.png
+        eyebrow:
+          icon: podcast
+          text: Podcast
+        cardLayout: 'horizontal'
+        theme: 'tertiary'
+        column: '2'
+        url: https://pod.link/thecsspodcast/
+      - url: /building-a-tooltip-component/
+        eyebrow:
+          icon: blog
+          text: Blog
+      - url: /learn/css/
+        title: Learn CSS
+        description: Learn modern CSS in our course covering everything from selectors to grid layout and animation.
+        eyebrow:
+          icon: mortarboard
+          text: Learn
+        cardLayout: 'vertical'
+        column: '3'
+        row: '2'
+      - title: Aspect ratio image card
+        description: With the aspect-ratio property, as you resize the card, the green visual block maintains this 16 x 9 aspect ratio.
+        eyebrow:
+          icon: pattern
+          text: Featured pattern
+        theme: 'quaternary'
+        url: /patterns/layout/aspect-ratio-image-card/
+      - url: /viewport-units/
+        eyebrow:
+          icon: news
+          text: Newly interoperable
+      - url: /building-chrometober/
+        eyebrow:
+          icon: blog
+          text: Case study
+        cardLayout: 'horizontal'
+        column: '1'
+      - url: /speedy-css-tip-animated-gradient-text/
+        eyebrow:
+          icon: blog
+          text: Blog
+        description: Make an animated gradient text effect with scoped custom properties and background-clip.
+
+  - category: Performance
+    cards:
+      - url: /inp-cwv/
+        eyebrow:
+          icon: featured
+          text: Featured
+        cardLayout: vertical
+        column: '1'
+        theme: dark
+      - title: How to Optimize INP
+        description: Learn how to optimize for the Interaction to Next Paint metric.
+        eyebrow:
+          icon: pattern
+          text: Pattern
+        url: /how-to-optimize-inp/
+        cardLayout: horizontal
+        column: '2'
+      - url: /top-cwv-2023/
+        eyebrow:
+          icon: blog
+          text: Blog
+      - url: /debug-cwvs-with-web-vitals-extension/
+        eyebrow:
+          icon: blog
+          text: Blog
+
+  - category: Web Apps
+    cards:
+      - url: /learn/pwa/
+        eyebrow:
+          icon: featured
+          text: Featured
+        cardLayout: vertical
+        column: '1'
+      - url: /transformstream/
+        description: Now that transform streams are supported in Chrome, Safari, and Firefox, they're finally ready for prime time!
+        eyebrow:
+          icon: news
+          text: Newly interoperable
+      - title: Project Fugu API Showcase
+        description: A list of sites filtered by the specific Capabilities APIs that they use.
+        eyebrow:
+          icon: news
+          text: On Chrome Developers
+        url: https://developer.chrome.com/blog/fugu-showcase/
+      - url: /new-patterns-for-amazing-apps/
+        eyebrow:
+          icon: pattern
+          text: Patterns
+        cardLayout: horizontal
+        column: '2'
+        theme: blue
+
+  - category: Accessibility
+    cards:
+      - url: /community-highlight-elisa/
+        eyebrow:
+          icon: blog
+          text: Blog
+        cardLayout: vertical
+        column: '1'
+        theme: pink
+      - title: Learn Accessibility
+        description: Our brand new course is a great entry-point and reference for key accessibility topics.
+        eyebrow:
+          icon: mortarboard
+          text: Learn
+        cardLayout: horizontal
+        column: '2'
+        url: /learn/accessibility/
+      - url: /testing-web-design-color-contrast/
+        eyebrow:
+          icon: blog
+          text: Blog
+      - url: /website-navigation/
+        eyebrow:
+          icon: blog
+          text: Blog
+
+  - category: Payments and Identity
+    cards:
+      - url: /payment-and-address-form-best-practices/
+        eyebrow:
+          icon: featured
+          text: Featured
+        cardLayout: vertical
+      - url: /passkey-registration/
+        eyebrow:
+          icon: blog
+          text: Blog
+      - url: /passkey-form-autofill/
+        eyebrow:
+          icon: blog
+          text: Blog
+      - url: /web-payments-overview/
+        thumbnail: image/SZHNhsfjU9RbCestTGZU6N7JEWs1/HnOjEdC3jd3ozeEFFWvb.png
+        eyebrow:
+          icon: blog
+          text: Overview
+        cardLayout: horizontal
+        theme: quaternary
+        column: '2'
+
+  - category: Ecosystem and community
+    cards:
+      - url: /advancing-framework-ecosystem-cds-2019/
+        eyebrow:
+          icon: featured
+          text: Featured
+        cardLayout: vertical
+        theme: blue
+      - title: Aurora Project
+        description: A collaboration between Chrome and open-source web frameworks and tools.
+        eyebrow:
+          icon: blog
+          text: On Chrome Developers
+        thumbnail: image/0SXGYLkliuPQY3aSy3zWvdv7RqG2/KvZQXFKIGKEzAjxzf5bF.jpg
+        url: https://developer.chrome.com/tags/aurora-project/
+        cardLayout: horizontal
+        column: '2'
+      - url: /gde-focus-lars-knudsen/
+        eyebrow:
+          icon: blog
+          text: Community
+      - title: Meet the Chrome team
+        description: We're meeting you where you are. Join us at upcoming web conferences in your region or catch up on past events.
+        eyebrow:
+          icon: event
+          text: On Chrome Developers
+        url: https://developer.chrome.com/meet-the-team/
+
+developers:
+  title: 'Check out new web platform features from Chrome'
+  summary: |
+    Visit <a href="https://developer.chrome.com/">Chrome Developers</a> for all the new and experimental things happening on the web as well as documentation for tools such as Workbox, Lighthouse, Chrome DevTools, and more.
+  primaryButtonText: 'Chrome Developers'
+  primaryButtonUrl: 'https://developer.chrome.com/'
+---
diff --git a/src/site/content/en/index.njk b/src/site/content/en/index.njk
deleted file mode 100644
index 4e9940132a1..00000000000
--- a/src/site/content/en/index.njk
+++ /dev/null
@@ -1,205 +0,0 @@
----
-layout: layout
-title: web.dev
-description: |
-  Get the web's modern capabilities on your own sites and apps with useful
-  guidance and analysis from web.dev.
-show_banner: false
-date: 2018-11-05
-eleventyComputed:
-  canonicalUrl: "/"
----
-
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-
-<div class="home-landing-page">
-
-  {#
-    TODO: Convert w-masthead-home back to a <header> when this campaign ends.
-    For a11y you're supposed to only use one <header> element per page.
-  #}
-  <style>
-  .w-hero-banner {
-    color: white;
-  }
-  .w-hero-banner__inner {
-    background-color: black;
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    padding: 16px;
-    text-align: center;
-  }
-  @media (min-width: 865px) {
-    .w-hero-banner__inner {
-      padding: 20px 24px;
-    }
-  }
-  .w-hero-banner__inner a {
-    color: white;
-    text-decoration: underline;
-  }
-  .w-hero-banner__inner a:hover {
-    text-decoration: none;
-  }
-  </style>
-  <header class="w-hero-banner">
-    <div class="w-hero-banner__inner">
-      Google is committed to advancing racial equity for Black communities.
-      <a href="https://google.com/racialequity" target="_blank" rel="noopener">See how</a>.
-    </div>
-  </header>
-
-  <div class="w-masthead-home">
-    <div class="w-masthead-home__container">
-      <div class="w-masthead-home__left">
-        <h1 class="w-headline--two w-font-weight--medium">
-          Let's build the future of the web
-        </h1>
-        <p>
-          Get the web's modern capabilities on your own sites and apps with useful
-          guidance and analysis from web.dev.
-        </p>
-        <div class="w-masthead-home__buttons">
-          <a
-            class="w-button w-button--primary w-masthead-home__button--primary gc-analytics-event"
-            data-category="web.dev"
-            data-label="home, test site"
-            data-action="click"
-            href="/measure"
-          >
-            Test my site
-          </a>
-          <a
-            class="w-button w-button--secondary gc-analytics-event"
-            data-category="web.dev"
-            data-label="home, start learning"
-            data-action="click"
-            href="/learn"
-          >
-            Explore topics
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  {# <section class="w-layout-container w-text--center">
-    <p class="w-headline--two-small">
-      As the web advances, users' expectations grow. With web.dev's guidance, you
-      can give your users the best experience, wherever they are.
-    </p>
-    <a
-      class="w-button gc-analytics-event"
-      data-category="web.dev"
-      data-label="home, learn about"
-      data-action="click"
-      href="/about"
-    >
-      About web.dev
-    </a>
-  </section> #}
-
-  {# IMPORTANT — Restore the about section above when we take down this banner #}
-  <section class="w-home-promo" id="live">
-    <div class="w-home-promo__grid">
-      <div class="w-home-promo__box" aria-hidden="true">
-        <a href="/live/" tabindex="-1"><img src="/live/banner.png" alt="" width="1320" height="740" /></a>
-      </div>
-      <div>
-        <p>
-          web.dev LIVE is now over! Head to <a href="/live/">web.dev/live</a> to watch all the sessions, top Q&amp;A and more from our three day digital event for web developers.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section>
-    <div class="w-layout-container w-pb--non">
-      <header class="w-text--center">
-        <h2 class="w-headline--two-faded">
-          Latest stories
-        </h2>
-        <p>
-          See our latest news, updates, and stories for developers.
-        </p>
-      </header>
-    </div>
-    <div class="w-grid w-pb--std">
-      <div class="w-grid__columns w-grid__columns--featured" role="list">
-        {% for post in collections.recentBlogPosts %}
-          {% if loop.first %}
-            {% PostCard post, true %}
-          {% else %}
-            {% PostCard post %}
-          {% endif %}
-        {% endfor %}
-      </div>
-    </div>
-    <div class="w-layout-container w-pt--non w-pb--xl">
-      <div class="w-text--center">
-        <a class="w-button" href="/blog">
-          See all articles
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <section>
-    <div class="w-layout-container w-pb--non">
-      <header class="w-text--center">
-        <h2 class="w-headline--two-faded">
-          Explore topics
-        </h2>
-        <p>
-          Learn more about a topic, and practice your skills with a hands-on
-          codelab.
-        </p>
-      </header>
-    </div>
-    <div class="w-grid w-pb--std">
-      <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-        {% for path in home.paths %}
-          {% PathCard path, lang %}
-        {% endfor %}
-      </div>
-    </div>
-    <div class="w-layout-container w-pt--non w-pb--xl">
-      <div class="w-text--center">
-        <a
-          class="w-button gc-analytics-event"
-          data-category="web.dev"
-          data-label="home, all paths"
-          data-action="click"
-          href="/learn"
-        >
-          See all topics
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <hr>
-
-  <section class="w-layout-container w-text--center">
-    <h2 class="w-headline--two-faded">
-      Save your progress
-    </h2>
-    <p>
-      See how your website performs over time, and keep track as you learn on
-      your own schedule.
-    </p>
-    <div>
-      <a
-        class="w-button w-button--primary gc-analytics-event"
-        data-category="web.dev"
-        data-label="home, create profile"
-        data-action="click"
-        href="/measure"
-      >
-        Test my site
-      </a>
-    </div>
-  </section>
-</div>
diff --git a/src/site/content/en/learn-core-web-vitals/crux-and-rum-differences/index.md b/src/site/content/en/learn-core-web-vitals/crux-and-rum-differences/index.md
new file mode 100644
index 00000000000..56e70ebda43
--- /dev/null
+++ b/src/site/content/en/learn-core-web-vitals/crux-and-rum-differences/index.md
@@ -0,0 +1,211 @@
+---
+layout: post
+title: Why is CrUX data different from my RUM data?
+subhead:  |
+  Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.
+description: |
+  Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.
+authors:
+  - tunetheweb
+date: 2022-08-15
+updated: 2023-08-04
+hero: image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/Q7jtkHwdv8dmhz1KhaiD.jpg
+alt: Runnings racing each other on a track
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+  - chrome-ux-report
+---
+
+The [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/) provides user experience metrics for how real-world Chrome users experience popular destinations on the web. This data is automatically collected by Chrome from users who have opted in, and is made available based on the [CrUX eligibility criteria](https://developer.chrome.com/docs/crux/methodology/#eligibility).
+
+CrUX data is therefore available for millions of websites. Many site owners have not had access to field data before, and CrUX has enabled many sites to see the value of this for the first time. As a public dataset, CrUX can also be used for competitive analysis and benchmarking of user experience metrics.
+
+[Real User Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) is similar to CrUX, but instead of Chrome automatically collecting user-experience metrics, code is included on the websites to do this collection and feed it back to a RUM provider or analytics solution for  further analysis.
+
+With both solutions measuring user experience metrics, it is natural to assume that they should be equivalent. It can be confusing when we see differences. This guide will explain why that can happen, and offers suggestions for what to do when the numbers do not align.
+
+## Benefits of supplementing CrUX with a RUM solution
+
+CrUX is a great tool for a consistent view across sites and—as [the official dataset for the Core Web Vitals program](https://developer.chrome.com/docs/crux/about/)—sites will likely want to keep an eye on what it is showing. The aim of CrUX is to provide a statistically relevant overview of millions of websites for cross comparison.
+
+However, for a deeper dive in investigating _why_ data is showing the numbers it is, investing in a full RUM solution to supplement CrUX can give you access to more detailed information than can be made available in a publicly queryable dataset. This can help you explain and improve your metrics in a number of ways.
+
+### Deeper analysis to investigate issues
+
+CrUX can often be used to point out if you have a problem on your site, but not necessarily exactly where on your site the issue lies nor why. RUM solutions—whether home-grown through [the likes of the web-vitals library](/debug-performance-in-the-field/) or some of the many commercial products—can help bridge that gap.
+
+Using a RUM solution gives you access to much more fine-grained data for all your pages, and on all browsers. It also allows you to slice and dice this data in ways CrUX does not, enabling you to drill down and investigate problem areas of the site. Are they affected by a particular segment of users? Or users who take certain actions? Exactly when did the problem start? These are questions that are much easier to answer with the additional data that a RUM tool can provide.
+
+### Correlating with other business metrics
+
+RUM also allows you to compare your web performance metrics directly with any business metrics, showing the value in investing in performance, and what other performance work to prioritize. We have numerous [case studies](/tags/case-study/) with businesses doing this correlation, such as [Farfetch](/farfetch/#step-1:-defining-measuring-and-monitoring-metrics) or [The Economic Times](/economic-times-cwv/).
+
+### Collecting other performance data
+
+A RUM solution allows collection of other custom metrics, tied directly to your specific business. One of the more well-known examples is Twitter’s “[Time to first Tweet](https://blog.twitter.com/engineering/en_us/a/2012/improving-performance-on-twittercom#:~:text=The%20most%20important%20metric%20we,Tweet%20on%20each%20page's%20timeline.)” metric. These site-specific measures can then be correlated with Core Web Vital improvements and business metrics.
+
+## Differences between two sets of field data
+
+{% Blockquote '[Segal&apos;s Law](https://en.wikipedia.org/wiki/Segal%27s_law)' %}A man with a watch knows what time it is. A man with two watches is never sure.
+
+{% endBlockquote %}
+
+Whenever you have two sources of data, it can often be confusing and frustrating as to why they differ. In much the same way as it’s important to understand the difference between [lab and field metrics](/lab-and-field-data-differences/), there can also be differences between two sources of _field_ data. While the data would be the same in an ideal world, there are many reasons why they can differ.
+
+### Lab data versus field data
+
+The first thing to check is whether you are looking at lab (synthetic) metrics or field (RUM) metrics. While it’s natural to assume RUM products only look at field data, many offer a lab component as well.
+
+Lab data is incredibly useful precisely because of the fixed conditions it measures under. It can be used to monitor unexpected changes or regressions in a production environment without the noise of a changing field population. However, lab data may not be representative of the real user experience, so field metrics can show quite different results.
+
+### Populations
+
+The datasets used by CrUX and RUM solutions may be different due to differences in which page visits are being measured depending on which browsers, users, sites, and devices are being compared.
+
+#### Included browsers
+
+The Chrome User Experience Report, as its name suggests, is Chrome-only. While there are many Chromium-based browsers (Edge, Opera, and Brave to name a few) that also support the same metrics as Chrome given the shared core codebase, only Chrome users feed data into CrUX. This restriction also means Chrome users on iOS are not included, since it uses the underlying Webkit browser engine. Android WebViews also do not count as “Chrome”, so data from these users is not included—though [Chrome Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs/) are included.
+
+While Chrome is one of the world’s most popular browsers—and therefore would likely give a broad representation of your site’s performance in most cases—measuring just that browser is by no means a measure of all your users. This may explain one main difference between RUM and CrUX. This is particularly true for performance techniques that rely on APIs or image formats only available in Chrome, for example.
+
+The lack of iOS data can also lead to bias. For example, [as iOS users are typically on more performant devices](https://infrequently.org/2021/03/the-performance-inequality-gap/) or visiting from more countries with better network infrastructure, including them can lead to high overall performance metrics. On the other hand, _excluding_ them—as CrUX does—can lead to data that is skewed to the lower end of site visitors ([example case study](https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/)). Android users typically cover a wider range of devices, device capabilities, and markets.
+
+RUM solutions can get data for non-Chrome browsers, and in particular from Chromium-based browsers that often have the same metrics (such as Core Web Vitals) built in. Non-Chromium-based browsers are also measured by RUM solutions, but may have a more limited set of metrics. For example, [Largest Contentful Paint (LCP)](/lcp/) and [Cumulative Layout Shift (CLS)](/cls/) are currently only available in Chromium-based browsers and some other metrics can be measured quite differently (see later).
+
+#### Opted-in users
+
+As well as being limited to Chrome users, CrUX is further restricted by only measuring [a subset of Chrome users](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) who have opted in to share CrUX data when the browser was installed.
+
+RUM providers also only look at a subset of users, usually due to cookie banner prompts—asking users to opt into RUM data collection—or tracking blockers. This can adversely affect some initial page loads if the confirmation is not given until the second or subsequent page, when some of the site assets have already been cached from previous pages. If this happens frequently, the metrics may appear more favorable in RUM than they actually are if slower initial page loads are excluded in a sufficient number of cases.
+
+#### Included sites
+
+CrUX is only intended to report on public websites, so there are other [eligibility criteria](https://developer.chrome.com/docs/crux/methodology/#eligibility) that may result in data not being logged in CrUX. Most notable of these criteria is that the website must be publicly discoverable and sufficiently popular to ensure a minimal sample size from which to draw meaningful conclusions. In most cases, this will result in no data being available in CrUX. This is less of a confusing difference compared to the data being available but different, but explains why that happens.
+
+However, if specific pages of a site are marked as indexable but others are not, then you may only see a subset of URLs in CrUX. If the origin is publicly discoverable, then all page views within that origin will be included in the origin-level data, but URL-level data may not be available.
+
+#### Devices
+
+CrUX segments data by mobile, desktop, and tablet - though many tools concentrate on the first two and may not expose tablet data, or may include it within mobile or desktop. The performance characteristics on mobile versus desktop can be quite different—both in terms of the content delivered, and in the capabilities of the devices viewing them.
+
+RUM data will allow segmenting traffic similarly, but often shows consolidated data by default. RUM may only allow segmenting by device type (for example, mobile) or browser (for example, Chrome) easily, but not both to only see mobile Chrome traffic. When comparing to CrUX data, ensure you are comparing like-for-like by filtering by device type _and_ the Chrome browser.
+
+#### Sampling
+
+RUM solutions typically allow adjusting the sampling rate of opted-in visitors where data is collected. This can be used to reduce the volume of data needed to be analyzed, and to reduce costs of commercial RUM services. If that sample size is too small and not representative of the wider population, then the resulting metrics will also be similarly skewed. Discuss with your RUM provider the appropriate sampling size for your site.
+
+### Aggregation of data
+
+Field data by its very nature will include many, many data points of the same metrics compared to lab data, which will give a single value. If this data is aggregated differently for reporting, it can lead to another reason for differences between CrUX and RUM.
+
+#### Timespan
+
+CrUX data is based on a 28 day sliding window of traffic, and it is not possible to change this timeframe—though the BigQuery data is stored for each month, allowing you to see previous months.
+
+RUM data typically allows much greater granularity to allow seeing the impact of changes much sooner. When choosing smaller periods, though, RUM data can be unduly impacted by fluctuations in website traffic and visitors. When comparing RUM data to CrUX data, always ensure you are looking at performance over 28 days. Once you are satisfied the data is similar, you can look at other time frames to drill into the RUM data.
+
+#### Aggregation of statistics
+
+CrUX metrics are measured at the 75th percentile—that is, looking at the value that 75% of page views achieved. There will be extremes in field data and removing the worst 25% experiences, it is intended to give a value that the majority of visitors can reasonably be expected to achieve.
+
+RUM products often give a wider number of options of how to aggregate the metrics, including 75th percentile, median and other percentiles. If comparing RUM values to CrUX data, it is necessary to ensure you are looking at 75th percentile data to compare like-for-like.
+
+The histogram data in CrUX includes all available data—not just 75th percentile—and shows the number of page views in each rating, but the aggregate score will be based on 75th percentile. This CrUX data is surfaced in tools like [PageSpeed Insights](https://pagespeed.web.dev/):
+
+<figure>
+  {% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oRCstCFf6JyiVlNuphuX.png", alt="PageSpeed Insights screenshot showing histograms of LCP rating page loads", width="632", height="428" %}
+</figure>
+
+### Differences in metrics
+
+There are many metrics used to measure web performance, so when comparing two different sets of data, it’s important to understand what metrics are being measured, and how those metrics are being used.
+
+#### Metrics measured
+
+CrUX data is the official dataset of the [Core Web Vitals](/vitals/) initiative and primarily measures these three metrics ([LCP](/lcp/), [FID](/fid/), and [CLS](/cls/)), with [a few additional metrics](https://developer.chrome.com/docs/crux/methodology/#metrics) to complement these.
+
+RUM tools usually include these Core Web Vitals, but often include many other metrics too. Some RUM providers also measure the user experience using their own combination of all these metrics perhaps to give a happiness index or such. When comparing RUM data to CrUX, ensure you are comparing like-for-like.
+
+Tools that assess Core Web Vitals pass/fail status should consider a page passing if it meets the recommended targets at the 75th percentile for all Core Web Vitals. If FID is not present for pages with no interactions, then only LCP and CLS need to pass.
+
+#### Metric differences across browsers
+
+CrUX only measures in Chrome browsers, and you can refer to the [Web Vitals Changelog](https://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/README.md) to see how these change with each version of Chrome.
+
+RUM solutions, however, will measure from a wider variety of browsers. Chromium-based browsers (Edge, Opera, and so on) will likely be similar to Chrome, unless Chrome is implementing new changes as noted in the Changelog.
+
+For non-Chromium browsers, the differences can be more pronounced. [First Contentful Paint (FCP)](/fcp/), for example, is available in Safari and Firefox, but [is measured in a different way](https://blog.webpagetest.org/posts/why-first-contentful-paint-doesnt-work-as-a-cross-browser-metric/). This  can lead to significant variances in the times reported. As stated previously, if you are wanting to compare RUM to CrUX, it is best to filter on just Chrome users to allow for a like-for-like comparison.
+
+#### Metrics timing
+
+Core Web Vitals metrics are provided by web browser APIs, but that does not mean there is not a potential for differences of values reported using them. Exactly _when_ the metric measurement is taken—at page load or throughout the full page life cycle—can lead to differences. RUM tools may not always measure metrics in the same way—even if using the same names—and the same browser APIs to get the data, which can be confusing.
+
+[Largest Contentful Paint (LCP)](/lcp/) is a page-load metric. A number of LCP elements can be reported by the Web API if larger elements are loaded later after the initial render. The final LCP element is when the page finishes loading or the user interacts with the page. Therefore differences can arise if the LCP element is reported earlier than those two events.
+
+Additionally, in field data, the LCP element can be different depending on how the page is loaded. For a default page load showing the top of the page content, the LCP element will depend primarily on the screen size. However, if the page is opened with an anchor link further down the document, or similarly opened with a deep-link into a Single Page App (SPA)—more on that later—then the LCP element can be different.
+
+Do not assume that the LCP timings provided in either CrUX nor RUM are based on the same element as lab tools. While CrUX will give you the overall LCP value per page or origin, RUM can segment this further to identify individual LCP problem sessions.
+
+[Cumulative Layout Shift (CLS)](/cls/) is measured [throughout the life of the page](/cls/#what-is-cls), so the initial page-load CLS may not be representative of pages that cause greater shifts later after the page has loaded and the user has interacted with it. Taking the CLS value only after the page load—as many RUM products do—will therefore give a different result than taking the CLS value after the user finishes with the page.
+
+[First Input Delay (FID)](/fid/) requires an input to be measured, so it cannot be measured at page load. But—as its name implies—FID measures the _first input_ only. The newer [Interaction to Next Paint (INP)](/inp/) responsiveness metric measures all interactions throughout the life of the page, in a similar fashion to CLS, and so the reported value of INP may be very different if measured after the user has made a number of interactions on the page.
+
+CrUX will follow the [Core Web Vitals documentation](/vitals/) and measure these through the full lifetime of the page. Many RUM providers choose instead to measure these metrics either after page load, or at some other time (for example, when a key call-to-action is clicked) for various reasons.
+
+Getting an understanding from your RUM provider as to when Core Web Vitals are measured is important when seeing unexplained variances between the two data sources.
+
+#### Single-page applications
+
+Single-page applications (SPA) work by updating the content on the current page, rather than performing traditional page navigation at the browser level. This means the browser does not see these as page navigations, despite users experiencing them as such. The [Core Web Vitals APIs provided by the browser will not take these into consideration](/vitals-spa-faq/), and therefore CrUX does not currently support these page navigations. Work is currently underway to resolve this issue—see the [Experimenting with measuring soft navigations](https://developer.chrome.com/blog/soft-navigations-experiment/) post for more information.
+
+Some RUM providers do attempt to detect "soft navigations" in SPAs, but if they're also attributing Core Web Vitals metrics to those "soft navigations" it will lead to differences with CrUX since the underlying APIs do not support this.
+
+### CrUX and Web API differences
+
+As well as the differences in _which_ page views are measured, and _what_ is measured, there are a few other, more complicated, scenarios to be aware of that can lead to differences in CrUX and RUM data. Some of these are due to limitations of the Web APIs used to measure the metrics, and some are where the results returned by the API need to be treated differently for certain scenarios. The Core Web Vitals documentation lists these differences for [LCP](/lcp/#differences-between-the-metric-and-the-api), [CLS](/cls/#differences-between-the-metric-and-the-api), and [FID](/fid/#differences-between-the-metric-and-the-api) but the main differences are noted below.
+
+#### Back/forward cache
+
+CrUX considers [Back/forward cache](/bfcache/) (or bfcache) restores as page navigations even though they do not result in a traditional page load. As the Web APIs do not treat these as a page load, RUM solutions need to [take extra steps](/bfcache/#how-bfcache-affects-analytics-and-performance-measurement) for these pages to be counted if they wish to match CrUX. These are considerably faster page loads that can result in overall better performance being reported for a site, so not including them can result in worse overall page performance metrics. Refer to your RUM solution to understand if they handle bfcache restored pages.
+
+#### Iframes
+
+For security and privacy reasons, top-level pages do not have access to content within iframes (not even same-origin iframes). This means performance metrics for content in those can only be measured by the iframe itself, and not through the Web APIs on the framing page. If the iframe content includes the LCP element, or content that impacts the CLS, FID or INP experienced by the user, this will not be available to RUM solutions ([including the Google web-vitals JavaScript library](https://github.com/GoogleChrome/web-vitals#limitations)).
+
+CrUX however, being measured by the Chrome browser itself rather than the page, does not have these limitations and so does measure metrics within iframes when reporting Core Web Vitals. This more accurately reflects what the user experiences, but can be another reason for differences for sites making use of iframes.
+
+One concrete example of how this can lead to differences between LCP data in CrUX and RUM is embedded `<video>`. An autoplaying `<video>` element's first painted frame can count as an LCP candidate, but embeds for popular video streaming services—such as YouTube, for example—place these elements in an `<iframe>`. As of [August 2023](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/lcp.md), CrUX can account for this, as it can access `<iframe>` contents, but RUM solutions cannot.
+
+#### Cross-origin resources
+
+LCP media served from other domains do not give render time in the [PerformanceObserver API](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)—unless the [Timing-Allow-Origin header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) (TAO) is provided—due to browser security restrictions to reduce timing attacks. This [falls back to the load time of the resource](/lcp/#load-time-vs-render-time) but this may be quite different from when the content was actually painted.
+
+Again, CrUX does report the render time data for Core Web Vitals. Sites are advised to limit cross-origin content that impacts the Core Web Vitals metrics and to enable TAO where possible if they wish to measure this more accurately. Other cross-origin resources may be subject to similar restrictions.
+
+#### Background tabs and prerender
+
+When a page is not opened in the foreground—such as opening it in the background or if it uses prerender options (currently under development for Chrome)—they will still emit metrics via Web APIs. However, these are not reported by CrUX since they give timings that are inconsistent with the user experience. RUM solutions should also consider ignoring these, or at least explaining how these page views are treated.
+
+## So what can we do about it?
+
+We have shown why there may be differences between CrUX and RUM data, either due to differences in the methodology each uses or due to which users and page views are included or excluded. Ideally, both sets of data will still be representative of your site performance to be useful, but this article should outline why it is very unlikely to get the exact same numbers in each.
+
+Where differences are slight (for example reporting a LCP of 2.0 seconds versus 2.2 seconds) both datasets will be useful and can usually be considered to be roughly in sync.
+
+When pronounced differences make you question the accuracy of the data, you should try to understand those differences. Can the RUM data be filtered to be more closely aligned with CrUX (looking only at Chrome users, for desktop or mobile, with 75th percentile values over 28 days) to reduce these differences?
+
+If so—and you can get the data to match more closely—then you should still ask why you are seeing these differences in the overall data and what this means. Are non-Chrome users skewing your metrics in a positive or negative way? Does this give you more insights into where you have performance issues that you can prioritize?
+
+If your non-Chrome users are getting different results then you can use this valuable insight that RUM has given you to optimize differently. For example, certain APIs are not available on certain browsers, but you can consider alternatives for unsupported browsers to also improve their experiences. Or you can give [a different, but more performant, experience](https://www.smashingmagazine.com/2022/03/signals-customizing-website-user-experience/) to users on constrained devices or networks. CrUX is limited to Chrome data, but you should consider all your site visitors' experiences to help prioritize improvements. RUM data can fill that gap.
+
+Once you understand the reasons for any differences, both tools can be incredibly useful to understand the user experiences of your website, and to help improve this even if the numbers are not identical. Use your RUM data to complement CrUX data and allow you to dig into what CrUX is telling you at a high level by segmenting your traffic to help you identify if it’s particular areas of your site or user base that need attention.
+
+Looking at the trends to see your improvements are having the expected positive impacts is often more important than having each number match exactly between the two data sources. As mentioned above, RUM allows you to look at different time frames to get an advance look at what your 28 day CrUX scores will be—though looking at too short time frames can lead to noisy data, hence why CrUX uses 28 days.
+
+Often there is no “right” or “wrong” answer in these different metrics - they are simply having a different lens on your users and how they are experiencing your site. As long as you understand why these differences happen, and what that can do to drive your decision making, that is what is more important to better serve your site visitors.
+
+## Acknowledgements
+
+_Hero image by [Steven Lelham](https://unsplash.com/@slelham) on [Unsplash](https://unsplash.com/photos/atSaEOeE8Nk)_
diff --git a/src/site/content/en/learn-core-web-vitals/index.md b/src/site/content/en/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..91eb4b74fc7
--- /dev/null
+++ b/src/site/content/en/learn-core-web-vitals/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2020-09-16
+pathName: learn-core-web-vitals
+--- 
diff --git a/src/site/content/en/learn-core-web-vitals/lab-and-field-data-differences/index.md b/src/site/content/en/learn-core-web-vitals/lab-and-field-data-differences/index.md
new file mode 100644
index 00000000000..052702a2df1
--- /dev/null
+++ b/src/site/content/en/learn-core-web-vitals/lab-and-field-data-differences/index.md
@@ -0,0 +1,389 @@
+---
+layout: post
+title: Why lab and field data can be different (and what to do about it)
+subhead: |
+  Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.
+description: |
+  Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.
+authors:
+  - philipwalton
+date: 2021-08-17
+updated: 2022-07-18
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/OKW9sizk0a8UloNOFx9g.jpeg
+alt: Users on their phones
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - web-vitals
+---
+
+Google provides [a number of tools](/vitals-tools/) to help site owners monitor
+their [Core Web Vitals](/vitals/#core-web-vitals) scores. These tools fall into
+two main categories:
+
+* Tools that report **lab data**—data collected in a controlled environment with
+  predefined device and network settings.
+* Tools that report **field data**—data collected from the real users visiting
+  your site.
+
+The problem is that sometimes the data reported by lab tools can be quite a bit
+different from the data reported by field tools! Your lab data might indicate
+that your site performs great, but your field data suggests it needs
+improvement. Alternatively, your field data may say all your pages are good, but
+your lab data may report a very low score.
+
+The following real example of a PageSpeed Insights report from web.dev shows
+that in some cases lab and field data can be different across all of the Core
+Web Vitals metrics:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/YvQK3wA9AQ2fmEuNSzKK.png", alt="Screenshot of a PageSpeed Insights report with conflicting lab and field data", width="800", height="509" %}
+
+Differences between tools is an understandable source of confusion for
+developers. This post explains the main reasons these differences could
+exist—with specific examples covering each of the Core Web Vitals metrics—and
+what to do when you find differences on your pages.
+
+## Lab data versus field data
+
+To understand why lab and field tools might report different values—even for the
+exact same web page—you need to understand the difference between lab and field
+data.
+
+### Lab data
+
+Lab data is determined by loading a web page in a controlled environment with a
+predefined set of network and device conditions. These conditions are known as a
+_lab_ environment, sometimes also referred to as a _synthetic_ environment.
+
+Chrome tools that report lab data are generally running
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).
+
+The purpose of a lab test is to control for as many factors as you can, so the
+results are (as much as possible) consistent and reproducible from run to run.
+
+### Field data
+
+Field data is determined by monitoring all users who visit a page and measuring
+a given set of performance metrics for each one of those users' individual
+experiences. Because field data is based on real-user visits, it reflects the
+actual devices, network conditions, and geographic locations of your users.
+
+Field data is also commonly known as [Real User Monitoring
+(RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) data; the two terms
+are interchangeable.
+
+Chrome tools that report _field data_ generally get that data from the [Chrome
+User Experience Report
+(CrUX)](https://developer.chrome.com/docs/crux/).
+It's also common (and recommended) for site owners to [collect field data
+themselves](/vitals-field-measurement-best-practices/) because it can provide
+[more actionable insights](/vitals-ga4/) than just using CrUX alone.
+
+The most important thing to understand about field data is that it is not just
+one number, it's a distribution of numbers. That is, for some people who visit
+your site, it may load very quickly, while for others it may load very slowly.
+The _field data_ for your site is the complete set of all performance data
+collected from your users.
+
+As an example, CrUX reports show a distribution of performance metrics from real
+Chrome users over a 28-day period. If you look at almost any CrUX report you can
+see that some users who visit a site might have a very good experience while
+others might have a very poor experience.
+
+If a tool does report a single number for a given metric, it will generally
+represent a specific point in the distribution. Tools that report Core Web
+Vitals field scores do so [using the 75th
+percentile](/defining-core-web-vitals-thresholds/#choice-of-percentile).
+
+Looking at LCP from the field data in the screenshot above, you can see a
+distribution where:
+
+- 88% of visits saw an LCP of 2.5 seconds or less (good).
+- 8% of visits saw an LCP between 2.5 and 4 seconds (needs improvement).
+- 4% of visits saw an LCP greater than 4 seconds (poor).
+
+At the 75th percentile, LCP was 1.8 seconds:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/HttRJY6Drm09UdmbuyyB.png", alt="Distribution of LCP scores in the field", width="400", height="100" %}
+
+Lab data from the same page shows an LCP value of 3.0 second. While this value
+is greater than the 1.8 seconds shown in the field data, it's still a valid LCP
+value for this page—it's one of many values that make up the full distribution
+of load experiences.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/kztPvvnwuTrCzo318cZP.png", alt="LCP score in the lab", width="400", height="50" %}
+
+## Why lab and field data are different
+
+As the above section explains, lab data and field data actually measure very
+different things.
+
+Field data includes a wide variety of network and device conditions as well as a
+myriad of different types of user behavior. It also includes any other factors
+that affect the user experience, such as browser optimizations like the
+[back/forward cache](/bfcache/) (bfcache), or platform optimizations like the
+[AMP cache](https://developers.google.com/amp/cache).
+
+By contrast, lab data intentionally limits the number of variables involved. A
+lab test consists of:
+
+* A single device…
+* connected to a single network…
+* run from a single geographic location.
+
+The particulars of any given lab test may or may not accurately represent the
+75th percentile of field data for a given page or site.
+
+The controlled environment of the lab is useful when debugging issues or testing
+features before deploying to production, but when you control for these factors
+you are explicitly not representing the variance that you see in the real world
+across all types of networks, device capabilities, or geographic locations. You
+are also generally not capturing the performance impact of real-user behavior,
+such as scrolling, selecting text, or tapping elements on the page.
+
+In addition to the possible disconnect between lab conditions and the conditions
+of most real-world users, there are also a number of more subtle differences
+that are important to understand in order to make the most sense out of your lab
+and field data, as well as any differences you may find.
+
+The next few sections go into detail highlighting the most common reasons there
+could be differences between lab data and field data for each of the Core Web
+Vitals metrics:
+
+* [Largest Contentful Paint (LCP)](/lcp/)
+* [First Input Delay (FID)](/fid/)
+* [Cumulative Layout Shift (CLS)](/cls/)
+
+### LCP
+
+#### Different LCP elements
+
+The LCP element identified in a lab test may not be the same LCP
+element users see when visiting your page.
+
+If you run a Lighthouse report for a given page, it's going to return the same
+LCP element every single time. But if you look at field data for the same page,
+you'll usually find a variety of different LCP elements, which depend on a
+number of circumstances specific to each page visit.
+
+For example, the following factors could all contribute to a different LCP
+element being determined for the same page:
+
+* Different device screen sizes result in different elements being visible
+  within the  viewport.
+* If the user is logged in, or if personalized content is being shown in some
+  way, the LCP element could be very different from user to user.
+* Similar to the previous point, if an A/B test is running on the page it could
+  result in very different elements being displayed.
+* The set of fonts installed on the user's system can affect the size of text on
+  the page (and thus which element is the LCP element).
+* Lab tests are usually run on a page's "base" URL—without any query parameters
+  or hash fragments added. But in the real world, users often share URLs
+  containing a [fragment identifier](/text-fragments/#fragment-identifiers) or
+  [text fragment](/text-fragments/#text-fragments), so the LCP element may
+  actually be from the middle or bottom of the page (rather than "above the
+  fold").
+
+Since LCP in the field is calculated as the 75th percentile of all user visits
+to a page, if a large percentage of those users had an LCP element that loaded
+very quickly—for example a paragraph of text rendered with a system font—then
+even if some of those users had a large, slow-loading image as their LCP
+element, it might not affect that page's score if that happens to less than 25%
+of visitors.
+
+Alternatively, the opposite could be true. A lab test might identify a block of
+text as the LCP element because it's emulating a Moto G4 phone which has a
+relatively small viewport and your page's hero image is initially rendered
+off-screen. Your field data, though, may include mostly Pixel XL users with
+larger screens, so for them the slow-loading hero image *is* their LCP element.
+
+#### Effects of cache state on LCP
+
+Lab tests typically load a page with a cold cache, but when real users visit
+that page they may already have some of its resources cached.
+
+The first time a user loads a page it may load slowly, but if the page has
+[proper caching configured](/http-cache/), the next time that user returns the
+page might load right away.
+
+While some lab tools do support multiple runs of the same page (to simulate the
+experience for returning visitors), it's not possible for a lab tool to know
+what percentage of real-world visits occur from new versus returning users.
+
+Sites with well-optimized cache configurations and lots of repeat visitors may
+discover that their real-world LCP is much faster than their lab data indicates.
+
+#### AMP or Signed Exchange optimizations
+
+Sites built with [AMP](https://amp.dev/) or that use [Signed Exchanges
+(SXG)](/signed-exchanges/) can be preloaded by content aggregators like Google
+Search. This can result in significantly better load performance for users
+visiting your pages from those platforms.
+
+In addition to cross-origin preloading, sites themselves can
+[preload](/preload-critical-assets/) content for subsequent pages on their site,
+which could improve LCP for those pages as well.
+
+Lab tools do not simulate the gains seen from these optimizations, and even if
+they did, they could not know what percentage of your traffic comes from
+platforms like Google Search compared to other sources.
+
+#### Effects of bfcache on LCP
+
+When pages are restored from the bfcache, the load experience is near
+instantaneous, and [these experiences are included in your field
+data](/bfcache/#impact-on-core-web-vitals).
+
+Lab tests do not consider bfcache, so if your pages are
+[bfcache-friendly](/bfcache/#optimize-your-pages-for-bfcache), it will likely
+result in faster LCP scores reported in the field.
+
+#### Effects of user interaction on LCP
+
+LCP identifies the render time of the largest image or text block in the
+viewport, but that largest element can change as the page is loaded or if new
+content gets dynamically added to the viewport.
+
+In the lab, the browser will wait until the page is fully loaded before
+determining what the LCP element was. But in the field, the browser will [stop
+monitoring](/lcp/#when-is-largest-contentful-paint-reported) for larger elements
+after the user scrolls or interacts with the page.
+
+This makes sense (and is necessary) because users typically will wait to
+interact with a page until it "appears" loaded, which is exactly what the LCP
+metric aims to detect. It also wouldn't make sense to consider elements added to
+the viewport after a user interacts because those elements might have only been
+loaded _because_ of something the user did.
+
+The implication of this, though, is that field data for a page may report faster
+LCP times, depending on how users behave on that page.
+
+### FID
+
+#### FID requires real-user interaction
+
+The FID metric measures how responsive a page is to user interactions,
+_at the time when users actually chose to interact with it._
+
+The second part of that sentence is critical because lab tests, even those that
+support script user behavior, cannot accurately predict when users will choose
+to interact with a page, and thus cannot accurately measure FID.
+
+#### TBT and TTI do not consider user behavior
+
+Lab metrics such as [Total Blocking Time (TBT)](/tbt/) and [Time to Interactive
+(TTI)](/tti/) are intended to help diagnose issues with FID because they
+quantify how much the main thread is blocked during page load.
+
+The idea is that pages with lots of synchronous JavaScript or other intensive
+rendering tasks are more likely to have a blocked main thread when the user
+first interacts. However, if users wait to interact with the page until after
+the JavaScript finishes executing, FID may be very low.
+
+When users will choose to interact with a page depends largely on whether or not
+it _looks_ interactive, and this cannot be measured with TBT or TTI.
+
+#### TBT and TTI do not consider tap delay
+
+If a site is not optimized for mobile viewing, browsers will [add a 300&nbsp;ms
+delay](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/)
+after any tap before running event handlers. They do this because they need to
+determine whether the user is trying to double-tap to zoom before they can fire
+mouse or click events.
+
+This delay counts toward a page's FID because it contributes to the real input
+latency that users experience. But since this delay is not technically a [Long
+Task](https://w3c.github.io/longtasks/), it doesn't affect a page's TBT or TTI.
+This means a page may have poor FID despite having very good TBT and TTI scores.
+
+{% Aside %}
+To avoid the tab delay issue on a page, always specify a [mobile viewport](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).
+{% endAside %}
+
+#### Effects of cache state and bfcache on FID
+
+In the same way that proper caching can improve LCP in the field, it can also
+improve FID.
+
+In the real world, a user might have the JavaScript for a site already in their
+cache, so processing it could [take less
+time](https://v8.dev/blog/code-caching-for-devs) and result in smaller delays.
+
+The same is also true for pages restored from bfcache. In those cases the
+JavaScript is restored from memory, so there could be little or no processing
+time at all.
+
+### CLS
+
+#### Effects of user interaction on CLS
+
+CLS measured in the lab only considers layout shifts that occur above
+the fold and during load, but this is only a subset of what CLS actually
+measures.
+
+In the field, CLS considers all [unexpected layout
+shifts](/cls/#expected-vs-unexpected-layout-shifts) that occur throughout the
+lifespan of the page, including content that shifts as the user scrolls or in
+response to slow network requests after user interaction.
+
+For example, it's quite common for pages to lazy-load images or iframes [without
+dimensions](/optimize-cls/#images-without-dimensions), and that can cause layout
+shifts when a user scrolls to those sections of the page. But those shifts may
+only happen if the user scrolls down, which often won't be caught in a lab test.
+
+#### Personalized content
+
+Personalized content—including targeted ads and A/B tests—affects what elements
+are loaded on a page. It also affects how they are loaded since personalized
+content is often loaded later and inserted into a page's main content, causing
+layout shifts.
+
+In the lab, a page is usually loaded either without personalized content, or
+with content for a generic "test user", which may or may not trigger the shifts
+real users are seeing.
+
+Since field data includes the experiences of all users, the amount (and degree)
+of layout shifts experienced on any given page is very dependent on what content
+is loaded.
+
+#### Effects of cache state and bfcache on CLS
+
+Two of the most common causes of layout shifts during load are images and
+iframes without dimensions (as mentioned above) and [slow loading web
+fonts](/font-best-practices/), and both of these issues are more likely to
+affect the experience the first time a user visits a site, when their cache is
+empty.
+
+If a page's resources are cached, or if the page itself is restored from
+bfcache, the browser can usually render images and fonts right away, without
+waiting for them to download. This can result in lower CLS values in the field
+than what a lab tool may report.
+
+## What to do when the results are different
+
+As a general rule, if you have both field data and lab data for a given page,
+field data is what you should use to prioritize your efforts. Since field data
+represents what real users are experiencing, it's the most accurate way to
+really understand what your users are struggling with and what needs to be
+improved.
+
+On the flip side, if your field data shows good scores across the board, but
+your lab data suggests there's still room for improvement, it's worth
+understanding what further optimizations can be made.
+
+In addition, while field data does capture real-user experiences, _it only does
+so for users who are successfully able to load your site_. Lab data can
+sometimes help identify opportunities to expand your site's reach and make it
+more accessible to users with slower networks or lower-end devices.
+
+Overall, both lab data and field data are important parts of effective
+performance measurement. They both have their strengths and limitations, and if
+you're only using one you may be missing an opportunity to improve the
+experience for your users.
+
+## Further reading
+
+* [Debug performance in the Field](/debug-performance-in-the-field/)
+* [A performance-focused workflow based on Google
+  tools](/vitals-tools-workflow/)
+
diff --git a/src/site/content/en/learn/accessibility/accessibility.11tydata.js b/src/site/content/en/learn/accessibility/accessibility.11tydata.js
new file mode 100644
index 00000000000..40b276172b4
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/accessibility.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('accessibility');
diff --git a/src/site/content/en/learn/accessibility/aria-html/aria.assess.yml b/src/site/content/en/learn/accessibility/aria-html/aria.assess.yml
new file mode 100644
index 00000000000..ba11760ace8
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/aria-html/aria.assess.yml
@@ -0,0 +1,14 @@
+setLeader: Test your knowledge of ARIA and HTML
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which of the following is the best practice for building an accessible button?
+    options:
+      - content: '`<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>`'
+        rationale: "Not quite. ARIA shouldn't be used when a semantic HTML element is available."
+      - content: '`<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>`'
+        rationale: "Not quite. While you could style this link like a button with CSS, it's not the best practice."
+      - content: '`<button id="saveChanges" type="button">Go to shop</button>`'
+        rationale: "Great job! Use the correct semantic HTML as well as the type to create a button."
diff --git a/src/site/content/en/learn/accessibility/aria-html/index.md b/src/site/content/en/learn/accessibility/aria-html/index.md
new file mode 100644
index 00000000000..d6c18eb9be1
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/aria-html/index.md
@@ -0,0 +1,381 @@
+---
+title: 'ARIA and HTML'
+authors:
+  - cariefisher
+description: When to use ARIA versus HTML.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+Most developers are familiar with the standard markup language of our modern
+web, [HyperText Markup Language (HTML)](https://developer.mozilla.org/docs/Web/HTML).
+However, you may be less familiar with
+[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)
+(formally called WAI-ARIA): what it is, how it is used, and when&mdash;and when _not_&mdash;to use it.
+
+HTML and ARIA play important roles in making digital products accessible,
+especially when it comes to assistive technology (AT) such as screen readers.
+Both are used to convert content into an alternate format, such as Braille or
+Text-to-Speech (TTS).
+
+Let's review a short history of ARIA, why it is important, and when and how
+best to use it.
+
+## Introduction to ARIA
+
+ARIA was first developed in 2008 by the
+[Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) group&mdash;a
+subset of the overarching World Wide Web Consortium (W3C), which governs and
+regulates the internet.
+
+ARIA is not a true programming language but a set of attributes you can add to
+HTML elements to increase their accessibility. These attributes communicate
+role, state, and property to assistive technologies via accessibility APIs
+found in modern browsers. This communication happens through the accessibility
+tree.
+
+<blockquote>
+  <p>
+    "<a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIA</a>, 
+    the Accessible Rich Internet Applications Suite, defines a way to make web
+    content and web applications more accessible to people with disabilities. It
+    especially helps with dynamic content and advanced user interface controls
+    developed with HTML, JavaScript, and related technologies."
+  </p>
+  <cite>
+    <a href="https://www.w3.org/WAI/">The WAI group</a>
+  </cite>
+</blockquote>
+
+### The accessibility tree
+
+ARIA modifies incorrect or incomplete code to create a better experience for
+those using AT by changing, exposing, and augmenting parts of the accessibility
+tree. 
+
+The accessibility tree is created by the browser and based on the standard
+Document Object Model (DOM) tree. Like the DOM tree, the accessibility tree
+contains objects representing all the markup elements, attributes, and text
+nodes. The accessibility tree is also used by platform-specific accessibility
+APIs to provide a representation that assistive technologies can understand.
+
+<figure>
+{% Img
+  src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/G1IWcJBT9tfZq4xCKTqq.jpg",
+  alt="The ARIA augmented accessibility tree.", 
+  width="575",
+  height="383"
+%}
+</figure>
+
+ARIA on its own doesn't change an element's functionality or visual appearance.
+That means only AT users will notice differences between a digital product with
+ARIA and one without it. That also means that developers alone are responsible
+for making the appropriate code and styling changes to make an element as
+accessible as possible.
+
+The three main features of ARIA are roles, properties, and states/values.
+
+_Roles_ define what an element is or does on the page or app.
+
+```html
+<div role="button">Self-destruct</div>
+```
+
+_Properties_ express characteristics or relationships to an object.
+
+```html
+<div role="button" aria-describedby="more-info">Self-destruct</div>
+
+<div id="more-info">This page will self-destruct in 10 seconds.</div>
+```
+
+_States/values_ define the current conditions or data values associated with the element.
+
+```html
+<div role="button" aria-describedby="more-info" aria-pressed="false">
+  Self-destruct
+</div>
+
+<div id="more-info">
+  This page will self-destruct in 10 seconds.
+</div>
+```
+
+While all three elements of ARIA can be used in one line of code, it's not
+required. Instead, layer ARIA roles, properties, and states/values until you've
+accomplished your final accessibility goal. Correctly incorporating ARIA into
+your code base ensures that AT users will have all the information they need to
+use your website, app, or other digital product successfully and equitably.
+
+Recently, Chrome DevTools has created a way to
+[see the full accessibility tree](https://developer.chrome.com/blog/full-accessibility-tree/)
+making it easier for developers to understand how their code impacts
+accessibility.
+
+## When to use ARIA
+
+In 2014, the W3C officially published the HTML5 recommendation. With it came
+some big changes, including the addition of landmark elements such as `<main>`,
+`<header>`, `<footer>`, `<aside>`, `<nav>`, and attributes like `hidden` and
+`required`. With these new HTML5 elements and attributes, coupled with
+increased browser support, certain parts of ARIA are now less critical.
+
+When the browser supports an HTML tag with an implicit role with an ARIA
+equivalent, there is usually no need to add ARIA to the element. However, ARIA
+still includes many roles, states, and properties that aren't available in any
+version of HTML. Those attributes remain useful for now.
+
+This brings us to the ultimate question: When should you use ARIA? Thankfully
+the WAI group has developed the
+[five rules of ARIA](https://www.w3.org/TR/using-aria/) to help you decide how
+to make elements accessible.
+
+### Rule 1: Don't use ARIA
+
+Yes, you read that right. Adding ARIA to an element does not inherently make it
+more accessible. The [WebAIM Million annual accessibility report](https://webaim.org/projects/million/)
+found that home pages with ARIA
+present averaged 70% more detected errors than those without ARIA, primarily
+due to the improper implementation of the ARIA attributes.
+
+There are exceptions to this rule. ARIA is required when an HTML element
+doesn't have accessibility support. This could be because the design doesn't
+allow for a specific HTML element or the wanted feature/behavior isn't
+available in HTML. However, these situations should be scarce.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<a role="button">Submit</a>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<button>Submit</button>
+```
+{% endCompare %}
+</div>
+
+When in doubt, use [semantic HTML elements](/learn/html/semantic-html/).
+
+### Rule 2: Don't add (unnecessary) ARIA to HTML
+
+In most circumstances, HTML elements work well out of the box and do not need additional ARIA added to them. In fact, developers using ARIA often have to add additional code to make the elements functional in the case of interactive elements.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<h2 role="tab">Heading tab</h2>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<div role="tab"><h2>Heading tab</h2></div>
+```
+{% endCompare %}
+</div>
+
+Do less work and have better-performing code when you use HTML elements as
+intended.
+
+### Rule 3: Always support keyboard navigation
+
+All interactive (not disabled) ARIA controls must be keyboard accessible. You
+can add tabindex= "0" to any element that needs a focus that doesn't normally
+receive keyboard focus. Avoid [using tab indexes with positive
+integers](https://www.scottohara.me/blog/2019/05/25/tabindex.html)
+whenever possible to prevent potential keyboard focus order issues.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<span role="button" tabindex="1">Submit</span>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<span role="button" tabindex="0">Submit</span>
+```
+
+{% CompareCaption %}
+Of course, if you can, use a real `<button>` element in this case.
+{% endCompareCaption %}
+
+{% endCompare %}
+</div>
+
+{% Aside 'caution' %}
+Remember, people with and without visual impairments use keyboard navigation. Don't add unnecessary tab stops to headings and paragraphs, as these can add additional challenges for some users who navigate by keyboard alone.
+{% endAside %}
+
+### Rule 4: Don't hide focusable elements
+
+Don't add `role= "presentation"` or `aria-hidden= "true"` to elements that need
+to have focus&mdash;including elements with a `tabindex= "0"`. When you add
+these roles/states to elements, it sends a message to the AT that these
+elements are not important and to skip over them. This can lead to confusion or
+disrupt users attempting to interact with an element.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<div aria-hidden="true"><button>Submit</button></div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<div><button>Submit</button></div>
+```
+{% endCompare %}
+</div>
+
+### Rule 5: Use accessible names for interactive elements
+
+The purpose of an interactive element needs to be conveyed to a user before
+they know how to interact with it. Ensure that all elements have an
+[accessible name](https://www.w3.org/TR/accname-1.1/) for people using AT
+devices. 
+
+Accessible names can be the content surrounded by an element (in the case of an
+`<a>`), alternative text, or a label.
+
+For each of the following code samples, the accessible name is "Red leather
+boots."
+
+```html
+<!-- A plain link with text between the link tags. -->
+<a href="shoes.html">Red leather boots</a>
+
+<!-- A linked image, where the image has alt text. -->
+<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>
+
+<!-- A checkbox input with a label. -->
+<input type="checkbox" id="shoes">
+<label for="shoes">Red leather boots</label>
+```
+
+There are many ways to check an element's accessible name, including inspecting the accessibility tree using [Chrome DevTools](https://developer.chrome.com/blog/full-accessibility-tree/) or testing it with a screen reader.
+
+{% Aside %}
+Coming soon: read more about screen reader testing in the Assistive Technology module.
+{% endAside %}
+
+## ARIA in HTML
+
+While using HTML elements on their own is best practice, ARIA elements can be
+added in certain situations. For example, you may pair ARIA with HTML in
+patterns that need a higher level of AT support because of environmental
+constraints or as a fall-back method for HTML elements that aren't fully
+supported by all browsers.
+
+Of course, there are recommendations for implementing [ARIA in
+HTML](https://www.w3.org/TR/html-aria/). Most importantly: don't override
+default HTML roles, reduce redundancy, and be aware of unintended side effects.
+
+Let's look at some examples.
+
+{% Compare 'worse' %}
+```html
+<a role="heading">Read more</a>
+```
+
+{% CompareCaption %}
+Assigned the wrong role.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<a aria-label="Read more about some awesome article title">Read More</a>
+```
+
+{% CompareCaption %}
+Correct role and an extra link description.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+<hr />
+
+{% Compare 'worse' %}
+```html
+<ul role="list">...</ul>
+```
+
+{% CompareCaption %}
+Redundant role.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<ul>...</ul>
+```
+
+{% CompareCaption %}
+Redundancy removed
+{% endCompareCaption %}
+
+{% endCompare %}
+
+<hr />
+
+{% Compare 'worse' %}
+```html
+<details>
+  <summary role="button">more information</summary>
+  ...
+</details>
+```
+
+{% CompareCaption %}
+Potential side effects.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<details>
+  <summary>more information</summary>
+  ...
+</details>
+```
+
+{% CompareCaption %}
+No unintended side effects.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside %}
+One place in particular where ARIA can be useful is in forms. Check out the [Learn Forms accessibility module](/learn/forms/accessibility/).
+{% endAside %}
+
+## Complexities of ARIA
+
+ARIA is complex, and you should always use caution when using it. While the
+code examples in this lesson are fairly straightforward, creating accessible
+custom patterns can quickly get complicated. 
+
+There are many things to pay attention to, including but not limited to:
+keyboard interactions, touch interfaces, AT/browser support, translation needs,
+environmental constraints, legacy code, and user preferences. A little bit of
+coding knowledge can be detrimental&mdash;or just plain annoying&mdash;if used
+incorrectly. Remember to keep your code simple.
+
+Those warnings aside, digital accessibility is not an all-or-nothing
+situation&mdash;it's a spectrum that allows for some gray areas like this.
+Multiple coding solutions can be seen as "correct," depending on the situation.
+What is important is that you keep learning, testing, and trying to make our
+digital world more open to all.
+
+{% Assessment 'aria' %}
diff --git a/src/site/content/en/learn/accessibility/color-contrast/color.assess.yml b/src/site/content/en/learn/accessibility/color-contrast/color.assess.yml
new file mode 100644
index 00000000000..4e03196f711
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/color-contrast/color.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of color and contrast
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Color alone isn't a sufficient identifier for documentation. What else will help readers identify UI elements?
+    options:
+      - content: "Pattern"
+        rationale: "Not quite. Patterns alone isn't enough to help a user identify a UI element."
+      - content: "Text"
+        rationale: "Not quite. Text alone may not be enough to help a user identify a UI element."
+      - content: "Icon"
+        rationale: "Not quite. An icon alone isn't enough to help a user identify a UI element."
+      - content: "All of the above"
+        rationale: "Yes! Two or more identifiers will help your user identify a UI element."
\ No newline at end of file
diff --git a/src/site/content/en/learn/accessibility/color-contrast/index.md b/src/site/content/en/learn/accessibility/color-contrast/index.md
new file mode 100644
index 00000000000..0dd4576dc9b
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/color-contrast/index.md
@@ -0,0 +1,380 @@
+---
+title: 'Color and contrast'
+authors:
+  - cariefisher
+description: >
+  Build accessible color palettes with appropriate contrast.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+Have you ever tried to read text on a screen and found it difficult to read due
+to the color scheme or struggled to see the screen in a very bright or
+low-light environment? Or maybe you are someone with a more permanent color
+vision issue, like the estimated [300 million people with color blindness](https://www.colourblindawareness.org/colour-blindness/)
+or the [253 million people with low vision](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5820628/)? 
+
+As a designer or developer, you need to understand how people perceive color
+and contrast, whether temporary, situationally, or permanently. This will help
+you best support their visual needs.
+
+This module will introduce you to some accessible color and contrast fundamentals.
+
+## Perceiving color
+
+Did you know that objects do not possess color but reflect wavelengths of 
+light? When you see color, your eyes receive and process those wavelengths and 
+convert them to colors.
+
+<figure>
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/cXQwXdc8J77KegJZtDD6.png", alt="An eye viewing the color wheel.", width="600", height="350"
+%}
+</figure>
+
+When it comes to digital accessibility, we talk about these wavelengths in
+terms of hue, saturation, and lightness (HSL). The HSL model was created as an
+alternative to the RGB color model and more closely aligns with how a human
+perceives color.
+
+{% Aside %}
+In CSS, a color can be specified in many ways, such as using color names, RGB,
+RGBa, HEX, HSL, HSLa, HSV, or HSVa values. HSLa is similar to HSL, only an
+alpha value has been added. Alpha is a measurement of opacity and is defined as
+a number between 0.0 (fully transparent) and 1.0 (fully opaque).
+{% endAside %}
+
+_Hue_ is a qualitative way to describe a color, such as red, green, or blue,
+where each hue has a specific spot on the color spectrum with values ranging
+from 0 to 360, with red at 0, green at 120, and blue at 240.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'eYrEZqE',
+ height: 350,
+ theme: 'auto',
+ tab: 'result',
+ allow: ['geolocation']
+} %}
+
+Saturation is the intensity of a color, measured in percentages ranging from 0%
+to 100%. A color with full saturation (100%) would be very vivid, while a color
+with no saturation (0%) would be grayscale or black and white.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'vYjJKBP',
+ height: 350,
+ theme: 'auto',
+ tab: 'result',
+ allow: ['geolocation']
+} %}
+
+Lightness is a color's light or dark character, measured in percentages ranging
+from 0% (black) to 100% (white). 
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'poVrboR',
+ height: 350,
+ theme: 'auto',
+ tab: 'result',
+ allow: ['geolocation']
+} %}
+
+## Measuring color contrast
+
+To help support people with various visual disabilities, the WAI group created a
+[color contrast formula](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) to
+ensure [enough contrast exists](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
+between the text and its background. When these color contrast ratios are
+followed, people with moderately low vision can read text on the background
+without needing contrast-enhancing assistive technology.
+
+Let's look at images with a vibrant color palette and compare how that image
+would appear to those with specific forms of color blindness.
+
+<div class="switcher">
+<figure>
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/Tan7yQpVFXDwUFxta05Z.jpg", alt="Original rainbow sand.", width="640", height="427"
+    %}
+    <figcaption>
+      Photo by Alexander Grey on <a href="https://unsplash.com/photos/QGQz-IBBl5w">Unsplash</a>.
+    </figcaption>
+</figure>
+<figure>
+    {% Img
+      src="image/VbsHyyQopiec0718rMq2kTE1hke2/3T6ZA4XYZA4sdCUZluNT.jpg", alt="Original rainbow pattern.", width="640", height="427"
+      %}
+      <figcaption>        
+        Photo by Clark Van Der Beken on <a href="https://unsplash.com/photos/xFdrt8YIoJc">Unsplash</a>.
+      </figcaption>
+</figure>
+</div>
+
+On the left, the image shows rainbow sand with purple, red, orange, yellow, aqua green, light blue, and dark blue colors. On the right is a brighter, multicolored rainbow pattern.
+
+### Deuteranopia
+
+<div class="switcher">
+<figure>
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/MmstWzPwC5oEZiy3ltXJ.jpg", alt="Rainbow sand, as seen by a person with deuteranopia.", width="450", height="300" %}
+</figure>
+<figure>
+     {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/i9uQOQaWkyjUv0p2EqTI.jpg", alt="Rainbow pattern, as seen by a person with deuteranopia.", width="450", height="300" %}
+</figure>
+</div>
+
+[Deuteranopia](https://www.color-blindness.com/deuteranopia-red-green-color-blindness/)
+(commonly known as green blind) occurs in 1% to 5% of males, 0.35% to 0.1% of
+females.
+
+People with Deuteranopia have a reduced sensitivity to green light. This color blindness filter simulates what this type of color blindness might look like.
+
+### Protanopia
+
+<div class="switcher">
+<figure>
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/hj9QDGzaCx7Fd9g5oJBr.jpg", alt="Rainbow sand, as seen by a person with protanopia.", width="450", height="300" %}  
+</figure>
+<figure>
+     {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/o2Tu1YwNNgX3FYnCSocq.jpg", alt="Rainbow pattern, as seen by a person with protanopia.", width="450", height="300" %}
+</figure>
+</div>
+
+[Protanopia](https://www.color-blindness.com/protanopia-red-green-color-blindness/)
+(commonly known as red blind) occurs in 1.01% to 1.08% of males and 0.02% of
+0.03% of females.
+
+People with Protanopia have a reduced sensitivity to red light. This color blindness filter simulates what this type of color blindness might look like.
+
+### Achromatopsia or Monochromatism
+
+<div class="switcher">
+<figure>
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/R372C4rw8c4bb3PKialX.jpg", alt="Rainbow sand, as seen by a person with achromatopsia.", width="450", height="300"  %}
+</figure>
+<figure>
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/41D6WgI6mnv2tgYhtLzt.jpg", alt="Rainbow pattern, as seen by a person with achromatopsia.", width="450", height="300"  %}
+</figure>
+</div>
+
+[Achromatopsia or Monochromatism](https://www.color-blindness.com/2007/07/20/monochromacy-complete-color-blindness/) (or complete color blindness) occurs very, very rarely.
+
+People with Achromatopsia or Monochromatism have almost no perception of red,
+green, or blue light. This color blindness filter simulates what this type of
+color blindness might look like.
+
+### Calculate color contrast
+
+The color contrast formula uses the
+[relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) of
+colors to help determine contrast, which can range from 1 to 21. This formula
+is often shortened to `[color value]:1`. For example, pure black against pure
+white has the largest color contrast ratio at `21:1`.
+
+```text
+(L1 + 0.05) / (L2 + 0.05)
+L1 is the relative luminance of the lighter color
+L2 is the relative luminance of the darker colors
+```
+
+Regular-sized text, including images of text, must have a color contrast ratio
+of `4.5:1` to pass the
+[minimum WCAG requirements for color](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+Large-sized text and essential icons must have a color contrast ratio of `3:1`.
+Large-sized text is characterized by being at least 18pt / 24px or 14pt /
+18.5px bolded. Logos and decorative elements are exempt from these color
+contrast requirements.
+
+Thankfully, no advanced math is required as there are a lot of tools that will
+do the color contrast calculations for you. Tools like
+[Adobe Color](https://color.adobe.com/create/color-accessibility),
+[Color Contrast Analyzer](https://www.tpgi.com/color-contrast-checker/),
+[Leonardo](https://leonardocolor.io/), and
+[Chrome's DevTools color picker](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast)
+can quickly tell you the color contrast ratios and offer suggestions to help
+create the most inclusive color pairs and palettes.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'PoeKzWq',
+ height: 450,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+## Using color
+
+Without good color contrast levels in place, words, icons, and other graphical
+elements are [hard to discover](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html),
+and the design can quickly become inaccessible. But it's also important to pay
+attention to [how the color is used](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
+on the screen, as you cannot use color alone to convey information, actions, or
+distinguish a visual element.
+
+For example, if you say, "[click the green button to continue](https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html),"
+but omit any additional content or identifiers to the button, it would be
+difficult for people with certain types of colorblindness to know which button
+to click. Similarly, many graphs, charts, and tables use color alone to convey
+information. Adding another identifier, like a pattern, text, or icon, is
+crucial to help people understand the content.
+
+Reviewing your digital products in grayscale is a good way to detect potential color issues quickly.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'rNvzLmd',
+ height: 500,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+## Color-focused media queries
+
+Beyond checking for color contrast ratios and the use of color on your screen,
+you should consider applying the increasingly popular and supported
+[media queries](/learn/design/media-features/#preferences) that offer the users
+more control over what is displayed on the screen.
+
+For example, using the [`@prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) media query, you can create a dark theme, which can be helpful to people with [photophobia](https://w3c.github.io/low-vision-a11y-tf/requirements.html#light-and-glare-sensitivity) or light sensitivity. You could also build a high contrast theme with [`@prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-contrast), which supports people with color deficiencies and [contrast sensitivity](https://w3c.github.io/low-vision-a11y-tf/requirements.html#contrast-sensitivity).
+
+{% Aside %}
+There are additional media queries and OS settings to consider for color
+accessibility, but they are far less supported than the two listed in this
+module. See the article [Operating System and Browser Accessibility Display Modes](https://www.a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/)
+for more information on the various OS accessibility settings.
+{% endAside %}
+
+### Prefers color scheme
+
+{% BrowserCompat 'css.at-rules.media.prefers-color-scheme' %}
+
+The media query `@prefers-color-scheme` allows users to choose a light or
+dark-themed version of the website or app they are visiting. You can see this
+theme change in action by changing your light/dark preference settings and
+navigating to a browser that supports this media query. Review the
+[Mac](https://support.apple.com/en-us/HT208976) and
+[Windows](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) instructions for dark mode.
+
+<figure>
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/Xl1Rw2thm1lf0aVDFYmv.png",
+  alt="Mac settings UI",
+  width="800", height="336"
+%}
+<figcaption>macOS general settings for appearance.</figcaption>
+</figure>
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'ExLvNOw',
+ height: 300,
+ theme: 'auto',
+ tab: 'css,result',
+ allow: ['geolocation']
+} %}
+
+{% Details %}
+
+{% DetailsSummary %}
+Compare light and dark mode.
+{% endDetailsSummary %}
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/wDeiH1l9XfzJZz1wxBZg.png", alt="Code example in light mode.", width="600", height="186" %}
+    <figcaption>Light mode.</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/6F0bSF5fQyxkkqEcRF4q.png", alt="Code example in dark mode.", width="600", height="186" %}
+    <figcaption>Dark mode.</figcaption>
+  </figure>
+</div>
+
+{% endDetails %}
+
+### Prefers contrast
+
+{% BrowserCompat 'css.at-rules.media.prefers-contrast' %}
+
+The [`@prefers-contrast`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast)
+media query checks the user's OS settings to see if high contrast is toggled on
+or off. You can see this theme change in action by changing your contrast
+preference settings and navigating to a browser that supports this media query
+([Mac](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696) contrast mode settings).
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'bGMrgNV',
+ height: 300,
+ theme: 'auto',
+ tab: 'css,result',
+ allow: ['geolocation']
+} %}
+
+{% Details %}
+{% DetailsSummary %}
+Compare regular and high contrast.
+{% endDetailsSummary %}
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/wDeiH1l9XfzJZz1wxBZg.png", alt="Code example in light mode with no contrast preference.", width="600", height="186" %}
+    <figcaption>Light mode, no contrast preference.</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/vKrSleRSunOTlwLlZMbR.png", alt="Code example in dark mode with high contrast preference.", width="600", height="186" %}
+    <figcaption>Dark mode, high contrast preference.</figcaption>
+  </figure>
+</div>
+
+{% endDetails %}
+
+### Layering media queries
+
+You can use multiple color-focused media queries to give your users even more
+choices. In this example, we stacked `@prefers-color-scheme` and
+`@prefers-contrast` together.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'wvjqgaK',
+ height: 300,
+ theme: 'auto',
+ tab: 'css,result',
+ allow: ['geolocation']
+} %}
+
+{% Details %}
+{% DetailsSummary %}
+Compare both color and contrast.
+{% endDetailsSummary %}
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/wDeiH1l9XfzJZz1wxBZg.png", alt="Light mode, regular contrast.", width="600", height="186" %}
+    <figcaption>Light mode, no contrast preference.</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/6F0bSF5fQyxkkqEcRF4q.png", alt="Dark mode, regular contrast.", width="600", height="186" %}
+    <figcaption>Dark mode, no contrast preference.</figcaption>
+  </figure>
+</div>
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/vn8QJND0mRMg9rrn1JrK.png", alt="Light mode, high contrast.", width="600", height="186" %}
+    <figcaption>Light mode, high contrast preference.</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/vKrSleRSunOTlwLlZMbR.png", alt="Dark mode, high contrast.", width="600", height="186" %}
+    <figcaption>Dark mode, high contrast preference.</figcaption>
+  </figure>
+</div>
+
+{% endDetails %}
+
+{% Assessment 'color' %}
diff --git a/src/site/content/en/learn/accessibility/conclusion/index.md b/src/site/content/en/learn/accessibility/conclusion/index.md
new file mode 100644
index 00000000000..8e21d3e73ce
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/conclusion/index.md
@@ -0,0 +1,68 @@
+---
+title: 'Conclusion and next steps'
+authors:
+  - cariefisher
+  - alexandrawhite
+  - rachelandrew
+  - marksteadman
+description: Further resources to help you take your next steps.
+date: 2023-01-12
+tags:
+  - accessibility
+---
+
+Congratulations, you've made it through Learn Accessibility! At this point,
+you've learned a lot of best practices for accessibility and gone through
+multiple rounds of accessibility testing. You may have learned some new
+terminology or refreshed your memory in our
+[glossary](/learn/accessibility/glossary/).
+
+We hope you are confident applying these lessons to your websites and web
+applications.
+
+## Additional resources
+
+To continue building your accessibility knowledge, we recommend the following
+resources:
+
+* [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI)
+* [Web Content Accessibility Guidelines (WCAG) from the W3C](https://www.w3.org/WAI/standards-guidelines/)
+* [WCAG Quick Reference Guide](https://www.w3.org/WAI/WCAG21/quickref)
+* [Accessibility on MDN](https://developer.mozilla.org/docs/Web/Accessibility)
+* [Deque University Digital Accessibility Courses & Accessibility Reference Library](https://dequeuniversity.com/)
+* [Global web accessibility laws](https://www.w3.org/WAI/policies/)
+* [A11y talks](https://a11ytalks.com/)
+* [List of accessible patterns from Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/smashing-newsletter-issue-289/)
+* [How to fund accessibility work](https://pleasefunda11y.com/)
+* [A11y automation tracker](https://a11y-automation.dev/)
+* Google developer documentation style guide
+    * [Write accessible documentation](https://developers.google.com/style/accessibility)
+    * [Write inclusive documentation](https://developers.google.com/style/inclusive-documentation)
+
+More resources can be found throughout the modules, as related to each topic.
+
+## Community highlights
+
+We conducted several interviews with accessibility practitioners in 2022. Read about their journey to accessibility and best practices:
+
+* [Melanie Sumner](/community-highlight-melanie/) told us about her journey
+  into engineering, accessible design, Ember.js, and the importance of funding
+  these efforts.
+* [Olutimilehin Olushuyi](/community-highlight-shuyi/) told us about his
+  transition from the law to web development, building accessible community,
+  and creating accessible layouts.
+* [Albert Kim](/community-highlight-albert-kim/) told us about mental health 
+  awareness, building for invisible disabilities, the  COGA Accessibility
+  Community Group, and more practical wisdom.
+* [Elisa Bandy](/community-highlight-elisa/) told us about her work for
+  Google's internal documentation, how to prioritize use cases, and building
+  expertise.
+
+## Brought to you by
+
+{% include 'partials/authors-stack.njk' %}
+
+### Special thanks
+
+Thank you to Aaron Forinton for supporting the publication of several modules
+and assessments.
diff --git a/src/site/content/en/learn/accessibility/design-ux/index.md b/src/site/content/en/learn/accessibility/design-ux/index.md
new file mode 100644
index 00000000000..3dad6ceed01
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/design-ux/index.md
@@ -0,0 +1,287 @@
+---
+title: 'Design and user experience'
+authors:
+  - cariefisher
+description: Create accessible designs and evaluate your user's experience.
+date: 2022-12-05
+tags:
+  - accessibility
+---
+
+Think about your favorite website or app—what makes it your favorite? Now, think about a website or app you dislike—what
+do you not like about it? How users interact with your design and their experience on your website and app can vary.
+
+That experience can change based on the time of day, the type of device used, if they've had enough sleep the night before,
+if they are unwell, if they're using assistive technology, and so much more. With close to eight billion people worldwide,
+the possibilities of how people use and experience your designs are limitless.
+
+## Inclusive design
+
+How can we address all of the potential user needs at once? Enter inclusive design. Inclusive design utilizes a human-centered
+approach that weaves together inclusivity, usability, and accessibility into one.
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/VqMZDtfUQpH0At8n2PF8.png",
+  alt="A venn diagram where accessibility, inclusivity, and usability all meet in the middle as inclusive design.",
+  width="400", height="390"
+%}
+</figure>
+
+And unlike universal design, which focuses on a single design that as many people can use as possible, inclusive design principles
+center on designing for a specific individual or use case, and then extending that design to others.
+
+There are seven accessibility-focused [inclusive design principles](https://inclusivedesignprinciples.org):
+
+1. *Provide comparable experience*: Ensure your interface provides an equal experience for all, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
+1. *Consider the situation*: Make sure your interface delivers a valuable experience to people, regardless of their circumstances.
+1. *Be consistent*: Use familiar conventions and apply them in a logical manner.
+1. *Give control*: Ensure people can access and interact with content in their preferred way.
+1. *Offer choice*: Consider providing different ways for people to complete tasks, especially those that are complex or non-standard.
+1. *Prioritize content*: Help users focus on core tasks, features, and information by arranging these elements in the preferred order within the content and layout.
+1. *Add value*: Consider the purpose and significance of features and how they improve the experience for different users.
+
+## Personas
+
+When developing a new design or feature, many teams rely on user [personas](https://www.nngroup.com/articles/persona/) to guide them through
+the process. Personas are fictitious characters that use your digital products, often based on quantitative and qualitative user research.
+
+Personas also offer a quick and inexpensive way to test and prioritize those features throughout the design and development process.
+They help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation to help align
+strategy and create goals focused on specific user groups.
+
+### Incorporating disabilities
+
+<figure data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/SmtiiRRpAImfG7MI6ku4.png", alt="Disabilities may be permanent, temporary, or situational. These disabilities can affect touch, seeing, hearing, and speaking.", width="350", height="573" %}
+<figcaption>The Persona Spectrum from <a href="https://www.microsoft.com/design/inclusive/">Microsoft's Inclusive 101 Toolkit</a>.</figcaption>
+</figure>
+
+<blockquote>
+  <p>"People are all different. I can only speak from my experience. When you meet one Deaf person, then you've met one Deaf person—not all of us."</p>
+  <cite>
+    Meryl Evans from the ID24 talk <a href="https://youtu.be/yrwKWtJdZ_c/">Deaf Tech: Travel Through Time from Past to Future</a>.
+  </cite>
+</blockquote>
+
+Personas can be used as an inclusive design tool when you incorporate people with disabilities into your personas. There are many different ways
+to do this. You may create [disability-specific personas](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility),
+add disabilities to existing user personas, or even create a persona spectrum to reflect the dynamic reality of situational, temporary, and permanent disabilities.
+
+No matter how you incorporate people with disabilities into your personas, they should not be based on real people or stereotypes. And personas are never a substitute for user testing.
+
+{% Details %}
+{% DetailsSummary %}
+Persona: Jane Bennet
+Check out an example of a persona that supports specific use cases.
+{% endDetailsSummary %}
+
+<figure data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/ysBmXtLrbxScFwocWF8f.png", alt="Jane Smith is tall with long dark hair, wearing a gray long sleeve shirt and jeans", width="150", height="362" %}
+</figure>
+
+* **Name**: Jane Bennet
+* **Age**: 57 years old
+* **Location**: Essex, United Kingdom
+* **Occupation**: UX engineer
+* **Disability**: Hand tremor from Young Onset Parkinson's disease (YOPD)
+* **Goals**: use speech-to-text input to make adding code suggestions easier; find biking equipment online with minimal keystrokes.
+* **Frustrations**: websites lacking keyboard-only support; apps for design with small areas for touch interaction.
+
+As a UX engineer, Jane designs and builds pages that are vital to keeping her
+company's site relevant. She supports a lot of team members throughout the day.
+She's the queen of putting out technical fires, and everyone's go-to in the
+department when anything goes down unexpectedly.
+
+Losing her fine motor skills to tremors is making it increasingly difficult for her to use a mouse. She's been steadily relying on
+the keyboard more and more to navigate the web. Jane has always been dedicated to her physical fitness. She loves road racing and BMX.
+This made it all the more of a blow when she was diagnosed with Young Onset Parkinson's disease last year.
+
+{% endDetails %}
+
+### Disability simulators
+
+Use extreme caution when using disability simulators to [emulate or supplement your personas](https://accessibility.blog.gov.uk/2019/02/11/using-persona-profiles-to-test-accessibility/).
+
+Disability simulators are a double-edged sword in that they can build sympathy or empathy—it can depend on the individual,
+the context in which the simulator is used, and many other uncontrollable factors. Many accessibility advocates are [against using
+disability simulator tools](https://sheribyrnehaber.medium.com/simulating-disabilities-d03986e05c1b) and recommend seeking out movies,
+demos, tutorials, and other content created by people with disabilities, and learning about their experiences first-hand.
+
+<blockquote>
+  <p>"I think we need to be completely honest that any simulation activity does not impact some of the most important understandings we want the sighted to know in their heart and their head. Blindness is not the characteristic that defines us, that the misunderstandings and low expectations about blindness are our biggest obstacle.</p><p>Those misunderstandings create artificial barriers that prevent us from fully participating, and those false limitations build into something that holds us back."</p>
+  <cite>
+    <a href="https://nfb.org/sites/default/files/images/nfb/publications/bm/bm17/bm1704/bm170402.htm">Mark Riccobono</a>, President of the National Federation of the Blind
+  </cite>
+</blockquote>
+
+## Accessibility heuristics
+
+Consider adding [heuristics](https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/) into your workflow as you
+build your personas and designs. Heuristics are simple rules for interaction design, introduced in 1990 by Jakob Nielsen and Rolf Molich.
+These ten principles were developed based on years of experience in the field of usability engineering, and have been used in design and human-computer
+interaction programs ever since.
+
+Fast-forward to 2019, and the design team at Deque created and shared a new set of [heuristics focused on digital accessibility](https://www.deque.com/blog/supporting-the-design-phase-with-accessibility-heuristics-evaluations/).
+According to their research, up to 67% of all accessibility bugs for a website or app can be avoided when accessibility is part
+of the design process. That's a huge impact that can be made before even one line of code is written.
+
+Similar to the original set of heuristics, there are ten accessibility heuristics to consider when planning your design.
+
+1. *Interaction methods and modalities*: Users can efficiently interact with the system using the input method of their choosing (such as a mouse, keyboard, touch, etc.).
+1. *Navigation and wayfinding*: Users can easily navigate, find content, and determine where they are at all times within the system.
+1. *Structure and semantics*: Users can make sense of the structure of the content on each page and understand how to operate within the system.
+1. *Error prevention and states*: Interactive controls have persistent, meaningful instructions to help prevent mistakes, and provide users with clear error states which indicate what the problems are and how to fix them whenever errors are returned.
+1. *Contrast and legibility*: Users can easily distinguish and read text and other meaningful information.
+1. *Language and readability*: Users can easily read and understand the content.
+1. *Predictability and consistency*: Users can predict each element's purpose. It's clear how each element relates to the system as a whole.
+1. *Timing and preservation*: Users are given enough time to complete their tasks and do not lose information if their time (i.e., a session) runs out.
+1. *Movement and flashing*: Users can stop elements on the page that move, flash, or are animated. Users should not be distracted or otherwise harmed by these elements.
+1. *Visual and auditory alternatives*: Users can access text-based alternatives for any visual or auditory content which conveys information.
+
+Once you have a basic understanding of these accessibility heuristics, you can
+apply it to a persona or design using the accessibility heuristics worksheet
+and by following the instructions provided. This exercise is more enlightening
+when you gather multiple perspectives.
+
+An example accessibility heuristic review for the navigation and wayfinding
+checkpoint could look like the following:
+
+<div class="table-wrapper scrollbar">
+<table>
+<thead>
+  <tr>
+    <th>Checkpoints for navigation and wayfinding</th>
+    <th>Excels (+2 pt)</th>
+    <th>Passes (+1 pt)</th>
+    <th>Fails (-1 pt)</th>
+    <th>N/A (0 pt)</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>Is a clear, visible indicator set on all active elements as they receive focus?</td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td></td>
+    <td></td>
+    <td class="tg-0lax"></td>
+  </tr>
+  <tr>
+    <td>Does the page have meaningful title text, with page-specific information first?</td>
+    <td></td>
+    <td></td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td class="tg-0lax"></td>
+  </tr>
+  <tr>
+    <td>Are the page title element and H1 the same or similar?</td>
+    <td></td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>Are there meaningful headings for each major section?</td>
+    <td></td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>Is the links' purpose defined from the link text alone or its immediate context?</td>
+    <td></td>
+    <td></td>
+    <td></td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+  </tr>
+  <tr>
+    <td>Is a skip link provided at the very top of the page and is it revealed on focus?</td>
+    <td></td>
+    <td></td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>Does the organization of navigational elements facilitate wayfinding?</td>
+    <td><span role="img" aria-label="yes">&#9989;</span></td>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</tbody>
+</table>
+</div>
+
+After everyone on the team looks at the page or component and conducts their
+accessibility heuristic review, the totals are tallied up for each checkpoint.
+At this point, you can decide how to remedy any found issues or
+correct any omissions that are paramount to supporting digital accessibility.
+
+## Accessibility annotations
+
+Before you hand off your design to the development team, you should consider
+adding [accessibility annotations](https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/).
+Annotations, in general, are used to explain creative choices and describe
+different aspects of the design. Accessibility annotations focus on areas where
+developers can make more accessible programmatic choices with the guidance of
+the design team or an accessibility-focused specialist.
+
+Accessibility annotations can be applied during any stage of the design
+process, from wireframes to high-fidelity mock-ups. They can include user
+flows, conditional states, and functionality. They often utilize symbols and
+labels to streamline the process and keep the design as the main focus.
+
+The following design illustrations examples are from [Indeed.com's accessibility annotations kit](https://www.figma.com/community/file/953682768192596304) for Figma.
+
+<div class="auto-grid">
+ <figure>
+    {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/C365JZBXSoqHkSq068sy.png",
+    alt="Design illustration of visual modifications used for various possible button states.",
+    width="350", height="232"
+    %}
+   <figcaption>
+     Action button design differs based on state: default, focus, hover, active, and disabled.
+   </figcaption>
+ </figure>
+ <figure>
+    {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/sRwFc6CeeqXVbY8XT7k6.png",
+    alt="Design illustration of three different icons used on a job posting card.",
+    width="350", height="232"
+    %}
+   <figcaption>
+     Three icons have alt text highlighted. The icons for "save job" and "not interested" act as buttons, therefore the alt text is critical to understanding action. The icon next to "Apply with your Indeed resume" is purely decorative and therefore doesn't need alt text.
+   </figcaption>
+ </figure>
+ <figure>
+    {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/Xvw23qkfel5KeqQoh7cE.png",
+    alt="Illustration of the relationship the form labels should have on their related inputs for month and year. ",
+    width="350", height="232"
+    %}
+   <figcaption>
+     Multiple input labels can be associated with each input, to help users understand context.
+   </figcaption>
+ </figure>
+</div>
+
+Depending on your design program, you should have multiple
+[accessibility annotation starter kits](https://www.figma.com/community/tag/a11y/popular)
+to choose from. Or, if you prefer, you can create your own set. In either case,
+you should decide which information needs to be communicated to
+the hand-off team and what format works best.
+
+Some areas to consider for accessibility annotations include:
+
+* **Color**: include contrast ratios of all of the different combinations of colors in the palette.
+* **Buttons and links**: identify default, hover, active, focus, and disabled states.
+* **Skip links**: highlight the hidden/visible design aspects and where they link to on the page.
+* **Images and icons**: add alternative text recommendations for essential images/icons.
+* **Audio and video**: highlight areas/links for captions, transcripts, and audio descriptions.
+* **Headings**: add programmatic levels and include everything that looks like a heading.
+* **Landmarks**: highlight the different sections of the design with HTML or ARIA.
+* **Interactive components**: identify clickable elements, hover effects, focus area.
+* **Keyboard**: identify where the focus should start (alpha stop) and the following tab order.
+* **Forms**: add field labels, helper text, error messages, and success messages.
+* **Accessible names**: identify how assistive technology should recognize the element.
\ No newline at end of file
diff --git a/src/site/content/en/learn/accessibility/focus/focus.assess.yml b/src/site/content/en/learn/accessibility/focus/focus.assess.yml
new file mode 100644
index 00000000000..1db45095cdb
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/focus/focus.assess.yml
@@ -0,0 +1,25 @@
+setLeader: Test your knowledge of ARIA and HTML
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: 'Which example of `:focus` CSS style is the most accessible on a white background?'
+    options:
+      - content: '`outline: 0.5rem solid yellow;`'
+        rationale: "This would not meet WCAG's color contrast guidelines."
+      - content: '`background-color:black;`'
+        rationale: "While it's possible this may be accessible, this design requires additional consideration of text color and placement in the document."
+      - content: '`text-decoration: dotted underline 2px blue;`'
+        rationale: "This design is the most accessible option on this list. However, this is not the only accessible design choice. Remember that your design should adhere to the 3:1 color contrast ratio as set by WCAG."
+      - content: '`outline: none; text-decoration:none; background:none;`'
+        rationale: "A visual indicator is important for some keyboard users. Always include style for focus."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What's the purpose of a skip link?
+    options:
+      - content: "Help a keyboard user skip over redundant or unuseful groups of links."
+        rationale: "This is especially helpful in long navigation menus, when a user may have already gone to the page of interest."
+      - content: "Help a keyboard user skip over uninteresting content."
+        rationale: "It's not necessarily possible to know what content is or isn't interesting to any user. This is not a useful way of defining skip link usage."
diff --git a/src/site/content/en/learn/accessibility/focus/index.md b/src/site/content/en/learn/accessibility/focus/index.md
new file mode 100644
index 00000000000..d4c24155c5a
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/focus/index.md
@@ -0,0 +1,277 @@
+---
+title: 'Keyboard focus'
+authors:
+  - cariefisher
+description: >
+  Understand and enhance keyboard navigation order and style.
+date: 2022-10-31
+tags:
+  - accessibility
+---
+
+Many people use a keyboard—or other software/hardware that mimics the
+functionality of a keyboard, such as a switch device—as their primary means of
+navigation. People with temporary physical limitations such as sprained wrist
+or fine motor disabilities like carpal tunnel, as well as some people without
+disabilities, may choose to use a keyboard to navigate a page due to personal
+preference, efficiency, or broken hardware.
+
+Low-vision or blind users may use a keyboard for navigation combined with
+their magnification or screen reader software. However, they may use different
+keyboard shortcut commands to navigate a screen than a sighted user would.
+
+Keyboard support for all of these disabilities and circumstances is critical. A
+large part of keyboard accessibility is centered around
+[focus](/focus). Focus refers to which element on the screen
+currently receives input from the keyboard.
+
+In this module, we concentrate on HTML structure and CSS styling for
+keyboard and focusable elements. The
+[JavaScript module](/learn/accessibility/javascript/) includes more
+information on focus management and keystrokes for interactive elements.
+
+## Focus order
+
+The elements that a keyboard user can navigate to are called focusable
+elements. [Focus order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html),
+also called tab or navigation order, is the order in which elements receive
+focus. The default focus order must be logical, intuitive, and match the visual
+order of a page.
+
+For most languages, the focus order starts at the top of the page and ends at the bottom, traveling from left to right. However, some languages are read right to left, so the primary language of the page may warrant a different focus order.
+
+By default, focus order includes naturally focusable HTML elements, such as
+links, checkboxes, and text inputs. Naturally focusable HTML elements include
+built-in tab order support and basic keyboard event handling.
+
+You can update the focus order to include any elements that don't normally
+receive focus, such as non-interactive HTML elements, custom components, or
+elements with [ARIA](/learn/accessibility/glossary/#aria) that overrides the
+natural focus semantics.
+
+{% Aside %}
+Your `tab` key moves the keyboard focus up the
+[DOM](https://developer.mozilla.org/docs/Glossary/DOM). `shift + tab` moves the
+focus down the DOM.
+{% endAside %}
+
+### Tabindex
+
+The focus order begins with elements that have a positive
+[tabindex](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex)
+attribute (if there are any) and moves from the smallest positive number to the
+largest (such as 1, 2, 3). It then proceeds through elements with a tabindex of
+zero according to their order in the DOM. Any elements with a negative tabindex
+are removed from the natural focus order.
+
+When a [tabindex](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex)
+of zero (`tabindex="0"`) is applied to normally unfocusable elements, they are
+added into the natural focus order of the page according to the way they appear
+in the DOM. However, unlike naturally focusable HTML elements, you must
+[provide additional keyboard support](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)
+for them to be fully accessible.
+
+Similarly, if you have an element that normally is focusable but is
+inactive—such as a button that is inoperative until an input field is filled
+in—you should add a negative tabindex (`tabindex="-1"`) to this element. Adding
+a negative tabindex signals to assistive technologies and keyboards that this
+button should be removed from the natural focus order. But don't worry—you can
+use JavaScript to add the focus back to the element when needed. 
+
+In this example, a `tabindex` attribute was added to elements that do not
+naturally receive focus. The order of the elements was manipulated using
+`tabindex` to illustrate the power it can have on focus order. This is an
+example of what not to do!
+
+<div class="switcher">
+<figure>
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'QWxWwNM',
+ height: 300,
+ theme: 'dark',
+ tab: 'html'
+} %}
+
+</figure>
+
+<figure>
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/CMwbHhLmPO3aO0AB4KBy.gif", alt="New focus order reflects the HTML.", width="800", height="450"
+   %}
+   <figcaption>
+     Watch as a keyboard user tabs through the CodePen HTML.
+   </figcaption>
+</figure>
+</div>
+
+{% Aside 'caution' %}
+As a general rule, you should avoid positive tabindexes. Giving focus to
+non-interactive elements and disrupting the normal focus order may confuse and
+frustrate your users. It should be rare that a circumstance warrants adding a
+positive tabindex (`tabindex= "1"`) to a non-focusable element.
+{% endAside %}
+
+### Skip links
+
+Most websites today have a long list of menu links in the page's main header
+consistent from page to page. This is great for general navigation but can make
+it difficult for keyboard-only users to easily get to the website's main
+content without having to tab multiple times.
+
+One way to jump over redundant or unuseful groups of links is to add a
+[skip link](https://webaim.org/techniques/skipnav/). Skip links are anchor
+links that jump to a different section of the same page, using that section's
+ID, instead of sending the user to another page on the website or an external
+resource. Skip links are typically added as the first focusable element a user
+will encounter when arriving at a website and can be visible or visually hidden
+until a user tabs to it, depending on what the design calls for.
+
+When a user presses the tab key, and an active skip link is in place, it sends
+the keyboard focus to the skip link. The user can click the skip link and jump
+past the header section and main navigation. If they choose not to click the
+skip link and continue to tab down the DOM, they'll be sent to the next
+focusable element.
+
+Like all links, it’s important that the skip link includes context about the
+link's purpose. Adding the phrase "Skip to main content," lets the user know
+where the link is taking them. There are many code options to choose from when
+providing additional context to your links, such as
+[aria-labelledby](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7),
+[aria-label](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8), or adding it
+to the text content of the `<a>` element, as demonstrated in the example.
+
+<div class="switcher">
+  <figure>
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'LYrYEGo',
+ height: 350,
+ theme: 'dark',
+ tab: 'html'
+} %}
+</figure>
+<figure>
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/zQ9dGirSD5Tkg4NRdHDQ.gif", alt="Preview CodePen with keyboard focus.", width="800", height="450"
+%}
+<figcaption>Watch a keyboard user navigate with and without a skip link.</figcaption>
+</figure>
+</div>
+
+## Focus indicator
+
+As you just learned, focus order is an important aspect of keyboard
+accessibility. It's also important to decide how that focus is styled. Because
+even if the focus order is excellent, how could a user know where they are on
+the page without the proper styling?
+
+A [visible focus indicator](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)
+is a vital tool in informing a user about where they are at all times on the
+page. It's especially important for your sighted keyboard-only users.
+
+{% Aside %}
+WCAG 2.2's new success criterion,
+[Focus Not Obscured (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html),
+will ensure that the focus indicator is not hidden beneath other components.
+{% endAside %}
+
+### Browser default styling
+
+Today, every modern web browser has a different default visual styling that
+applies to focusable elements on your website or app—some more easily visible
+than others. As a user tabs through the page, this styling is applied as the
+element receives keyboard focus.
+
+If you allow the browser to handle the focus styling, it's important to review
+your code to confirm that your theme won't override the browser's default
+styling. An override is often written as `"outline: 0"` or `"outline: none"` in
+your stylesheet. This tiny piece of code can remove the browser's default focus
+indicator styling, which makes it very difficult for users to navigate your
+website or app.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```css
+a:focus {
+  outline: none; /* don't do this! */
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+a:focus {
+  outline: auto 5px Highlight; /* for non-webkit browsers */
+  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
+}
+```
+{% endCompare %}
+</div>
+
+### Custom styles
+
+Of course, you can go beyond the default browser style and create a custom
+focus indicator that complements your theme. When creating a custom focus
+indicator, you have a lot of freedom to be creative!
+
+A focus indicator shape can take on many forms, be it an outline, a border, an
+underline, a box, a background change, or some other obvious stylistic change
+that does not rely on color alone to indicate the keyboard's focus is active on
+that element.
+
+You could change a focus indicator style to ensure it isn’t lost in the
+background. For example, when a page has a white background, you could set the
+button focus indicator to a blue background. When the page has a blue
+background, you could set that same button focus style to a white background.
+
+You could change the focus element style based on element type. For example,
+you could use a dotted underline for body links but choose a rounded border for
+a button element.
+
+{% Aside %}
+<p>Depending on how the focus indicator is styled, it may also need to meet the
+[minimum color contrast](https://www.w3.org/WAI/WCAG21/Techniques/general/G195)
+requirements against the background.</p>
+<p>We recommend adhering to a 3:1 color contrast ratio for all focus
+indicators. This will meet WCAG 2.2's
+[Focus Appearance (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum).</p>
+{% endAside %}
+
+<div class="switcher">
+<figure>
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'PoaowNz',
+ height: 300,
+ theme: 'dark',
+ tab: 'css'
+} %}
+
+</figure>
+
+<figure>
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/IXSs4AMZF8AePoCjkf0h.gif",
+    alt="Focus style as demonstrated in CSS.", width="800", height="450"
+    %}
+    <figcaption>
+      Watch what happens as a keyboard user tabs through each styled focus element.
+    </figcaption>
+</figure>
+</div>
+
+There is no rule about how many focus indicator styles you have on one
+page&mdash;but be sure to keep it to a reasonable number to avoid unnecessary
+confusion.
+
+## Wrap-up
+
+For a website or app to be considered accessible, everything that can be
+accessed with a mouse must also be accessed with a keyboard. This module
+focused on the visual aspect of keyboard accessibility, in particular, focus
+order and focus indicators.
+
+{% Assessment 'focus' %}
diff --git a/src/site/content/en/learn/accessibility/forms/forms.assess.yml b/src/site/content/en/learn/accessibility/forms/forms.assess.yml
new file mode 100644
index 00000000000..f25003fa82b
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/forms/forms.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of accessible forms
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: 'Which of the answers below is the most accessible form input?'
+    options:
+      - content: '`Email address: <input type="email" required>`'
+        rationale: "There is no label which associates 'Email address' with the input."
+      - content: '`<label>Email address: <input type="email" required></label>`'
+        rationale: "This is missing the autocomplete attribute, which offers a definition or identification of purpose to user agents and assistive technologies (AT)."
+      - content: '`<label>Email address: <input type="email" required autocomplete="email"></label>`'
+        rationale: "This is an accessible field label, however it is not the most accessible on this list."
+      - content: '`<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>`'
+        rationale: "The aria-describedby attribute adds additional context to an error the user may receive if the field is improperly filled in. While this attribute is not required, it may be useful for AT users."
diff --git a/src/site/content/en/learn/accessibility/forms/index.md b/src/site/content/en/learn/accessibility/forms/index.md
new file mode 100644
index 00000000000..3f8c0fb9f8e
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/forms/index.md
@@ -0,0 +1,228 @@
+---
+title: 'Forms'
+authors:
+  - cariefisher
+description: Create accessible forms.
+date: 2023-01-10
+tags:
+  - accessibility
+---
+
+A form is an element that allows a user to provide data into a field or a group
+of fields. Forms can be as simple as a single field or as complicated as a
+multi-step form element with multiple fields per page, input validation, and
+sometimes a CAPTCHA.
+
+Forms are considered one of the most difficult elements to get right from an
+accessibility perspective, as they require knowledge of all the elements we
+have already covered, as well as additional rules specific just to forms. With some
+understanding and time, you can make an accessible form to suit you and your
+users.
+
+Forms is the last component-specific module in this course. This module will
+focus on the form-specific guidelines, but all other guidelines you learned
+about in the earlier modules, such as
+[content structure](/learn/accessibility/structure),
+[keyboard focus](/learn/accessibility/focus), and
+[color contrast](/learn/accessibility/color-contrast), also apply to form
+elements.
+
+{% Aside %}
+Review our [Learn Forms](/learn/forms) course to learn how to create better
+forms. There is a [form accessibility](/learn/forms/accessibility) module in
+that course with additional accessibility-specific form content.
+{% endAside %}
+
+
+## Fields
+
+The backbone of forms is fields. Fields are small interactive patterns, such as
+an input or radio button element, that allow users to enter content or make a
+choice. There is a [wide variety of form fields](/learn/forms/fields) to
+choose from. 
+
+The default recommendation is to use established HTML patterns instead of
+building something custom with ARIA, as certain features and
+functionalities—such as field states, properties, and values—are inherently
+built into the HTML elements, while you have to add custom ARIA manually.
+
+{% Aside %}
+
+If the situation requires you to build custom form fields, be sure to review
+the [ARIA and HTML](/learn/accessibility/aria-html),
+[Keyboard focus](/learn/accessibility/focus), and
+[JavaScript](/learn/accessibility/javascript) modules to understand how to make
+these custom form fields as accessible as possible.
+
+{% endAside %}
+
+<div class="switcher">
+<figure>
+<h4>ARIA</h4>
+
+```html
+<div role="form" id="sundae-order-form">
+  <!-- form content -->
+</div>
+```
+</figure>
+
+<figure>
+<h4>HTML</h4>
+
+```html
+<form id="sundae-order-form">
+  <!-- form content -->
+</form>
+```
+</figure>
+</div>
+
+
+In addition to choosing the most accessible form field patterns, where
+applicable, you should also add
+[HTML autocomplete attributes](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)
+to your fields. Adding autocomplete attributes allows a more fine-grained
+[definition or identification of purpose](https://www.w3.org/TR/WCAG21/#input-purposes)
+to user agents and assistive technologies (AT).
+
+Autocomplete attributes allow users to personalize visual presentations,
+such as showing a birthday cake icon in a field with the birthday autocomplete
+attribute (`bday`) assigned to it. More generally, autocomplete attributes make
+filling out forms easier and quicker. This is especially helpful for people
+with cognitive and reading disorders and those using ATs, such as screen
+readers.
+
+```html
+<form id="sundae-order-form">
+  <p>Name: <input type="name" autocomplete="name"></p>
+  <p>Telephone: <input type="tel" autocomplete="tel"></p>
+  <p>Email address: <input type="email" autocomplete="email"></p>
+</form>
+```
+
+Lastly, form fields should not produce contextual changes when they receive
+focus or user input unless the user has been warned about the behavior before
+using the component. For example, a form should not be automatically submitted
+when a field receives focus or once a user adds content to the field.
+
+## Labels
+
+Labels inform a user about the purpose of a field, if the field is required,
+and can also provide information about the field requirements, such as input
+format. Labels must be visible at all times and accurately describe the form
+field to users.
+
+One of the foundational tenets of accessible forms is establishing a clear and
+accurate connection between a field and its label. This is true both visually
+and programmatically. Without this context, a user might not understand how to
+fill out the fields in the form.
+
+```html
+<form id="sundae-order-form">
+  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
+  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
+  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
+</form>
+```
+
+Additionally, related form fields, such as a mailing address, need to be
+programmatically and visually grouped. One method is to use the fieldset/legend
+pattern to group elements that are similar.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'zYLqwwQ',
+ height: 400,
+ theme: 'auto',
+ tab: 'html, result'
+} %}
+
+
+## Descriptions
+
+Field descriptions are similar to labels in purpose in that they are used to
+give more context to the field and requirements. Field descriptions are not
+required for accessibility if the labels or form instructions are descriptive
+enough.
+
+However, there are situations in which adding additional information is useful
+to avoid form errors, such as relaying information about the minimum length of
+input for a password field or telling a user which calendar format to use (such
+as MM-DD-YYYY).
+
+There are many different methods you can use to add field descriptions to your
+forms. One of the best methods is to add an
+[aria-describedby](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)
+attribute to the form element, in addition to a `<label>` element. The screen
+reader will read both the description and the label.
+
+If you add the
+[aria-labelledby](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+attribute to your element, the attribute value overrides the text within your
+`<label>`. As always, be sure to test the final code with all of the ATs you
+plan to support.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'ExpKmXq',
+ height: 400,
+ theme: 'auto',
+ tab: 'html, result'
+} %}
+
+## Errors
+
+When creating accessible forms, there's a lot you can do to prevent users from
+making form errors. Earlier in this module, we covered clearly marking-up
+fields, creating identifying labels, and adding detailed descriptions whenever
+possible. But no matter how clear you think your form is, eventually, a user
+will make a mistake.
+
+When a user encounters a form error, the first step is to
+[make the error known](https://www.w3.org/WAI/tutorials/forms/notifications).
+The field where the error occurred must be clearly identified, and the error
+itself must be described to the user in text.
+
+There are different methods for [displaying error
+messages](https://webaim.org/techniques/formvalidation/#error), such as:
+
+* A pop-up modal, inline near where the error occurred
+* A collection of errors grouped in one larger message at the top of the page
+
+Be sure to pay attention to the [keyboard focus](/learn/accessibility/focus)
+and [ARIA live region options](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+when announcing errors.
+
+Whenever possible, offer the user a detailed suggestion on how to fix the
+error. There are two attributes available to notify users of errors.
+
+* You can use the HTML [required](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) attribute. The browser will supply a generic error message based on the filed validation parameters.
+* Or you can use the [aria-required](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-required) attribute to share a customized error message to ATs. Only ATs will receive the message unless you add additional code to make the message visible to all users. 
+
+Once a user thinks all of the errors have been resolved, allow them to resubmit
+the form and provide feedback about the results of their submission. An error
+message tells a user they have more updates to make, while a success message
+confirms that they have resolved all errors and successfully submitted the form.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'abjJYWR',
+ height: 400,
+ theme: 'auto',
+ tab: 'html, result'
+} %}
+
+{% Aside %}
+
+While WCAG 2.2 is still under development, there are several proposed success
+criteria that will focus on more accessible form experiences, such as
+[Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum),
+[Consistent Help](https://www.w3.org/TR/WCAG22/#consistent-help),
+[Accessible Authentication](https://www.w3.org/TR/WCAG22/#accessible-authentication),
+and [Redundant Entry](https://www.w3.org/TR/WCAG22/#redundant-entry) to be
+aware of for future projects.
+
+{% endAside %}
+
+{% Assessment 'forms' %}
diff --git a/src/site/content/en/learn/accessibility/glossary/index.md b/src/site/content/en/learn/accessibility/glossary/index.md
new file mode 100644
index 00000000000..abc78bff5ed
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/glossary/index.md
@@ -0,0 +1,114 @@
+---
+title: 'Glossary'
+authors:
+  - cariefisher
+description: Learn common accessibility terms and concepts.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+In this document, you'll find common terms and concepts related to accessibility.
+
+## A11y
+
+[A11y](https://www.a11yproject.com/posts/a11y-and-other-numeronyms/) is 
+numeronym for accessibility (a + 11 letters + y). Typically pronounced as 
+"ally" as in "a person or group that provides assistance and support in an 
+ongoing effort, activity, or struggle," giving the term "a11y" multiple 
+meanings.
+
+## Accessibility Conformance Report (ACR) {: #acr} 
+
+The [ACR](https://tetralogical.com/blog/2021/10/15/introduction-to-accessibility-conformance-reports/)
+is the final report presented to a client once a full ACT has been performed.
+If you need a legally binding version of the ACR, you would utilize a version
+of the [Voluntary Product Accessibility Template (VPAT)](#vpat).
+
+## Accessibility Conformance Testing (ACT) {: #act}
+
+[ACT](https://www.w3.org/WAI/standards-guidelines/act/) is commonly referred to
+as an accessibility audit. The ACT utilizes various testing methodology and
+tools: primarily automated, manual, and [assistive technology](#AT) (AT)
+devices.
+
+ACT is first performed as a baseline metric to gauge general
+accessibility compliance of a digital product. It's often run multiple times
+throughout the software product lifecycle to check for changes in the level of
+conformance against a set of pre-determined accessibility checkpoints or 
+guidelines. 
+
+## ARIA
+
+[ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) is an acronym for
+Accessible Rich Internet Applications (formally known as WAI-ARIA—Web
+Accessibility Initiative Accessible Rich Internet Applications). ARIA is a
+specification written by the W3C, defining a set of attributes that you can add
+to HTML elements to support accessibility. These attributes communicate role,
+state, and property to assistive technologies via accessibility APIs
+implemented in the accessibility tree in modern browsers.
+
+## Assitive technology (AT) {: #at}
+
+[AT](https://en.wikipedia.org/wiki/Assistive_technology) is hardware and
+software that can be no-tech (such as a mouthstick), low-tech (such as a 
+keyboard), or high-tech (such as a screen reader). AT is used to help increase, 
+maintain, or improve the capabilities of performing a task for a person with 
+disabilities. AT includes braille keyboards, audio browsers, screen magnifiers, 
+and alternative pointing devices.
+
+## Digital accessibility
+
+[Digital accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) is the 
+practice of building digital products in a way that all users, regardless of 
+their disability, will have equal access to the content or functionality of the 
+product.
+
+## POUR
+
+[POUR](https://www.w3.org/WAI/fundamentals/accessibility-principles/) is 
+shorthand for Perceivable, Operable, Understandable, and Robust, which are the 
+foundational human-focused principles of WCAG.
+
+## Screen reader
+
+A [screen reader](https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers)
+is a high-tech assistive technology that uses synthetic language to read and 
+navigate digital documents for people with low or no vision, cognitive issues, 
+and other disabilities.
+
+* Desktop
+    * [ChromeVox](https://support.google.com/chromebook/answer/7031755) (ChromeOS)
+    * [JAWS](https://www.freedomscientific.com/Products/software/JAWS/) (Windows)
+    * [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Windows)
+    * [NVDA](https://www.nvaccess.org/) (Windows)
+    * [Orca](https://wiki.gnome.org/Projects/Orca) (Linux)
+    * [VoiceOver](https://www.apple.com/accessibility/vision/) (macOS)
+* Mobile
+    * [TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en) (Android)
+    * [VoiceOver](https://www.apple.com/accessibility/vision/) (iOS)
+* [Screen Reader Keyboard Shortcuts and Gestures](https://dequeuniversity.com/screenreaders/)
+
+## VPAT
+
+[VPAT](https://en.wikipedia.org/wiki/Voluntary_Product_Accessibility_Template) 
+is shorthand for Voluntary Product Accessibility Template. A VPAT is a template 
+to draft an [Accessibility Conformance Report](#acr) (ACR). An ACR clearly 
+states which accessibility standards a product or service meets and warns users 
+about any "accessibility blockers" they may encounter. A VPAT does not mean 
+that a digital product is 100% accessible: it is just a report of the state 
+of a product from an accessibility conformance perspective.
+
+## Web Accessibility Initiative (WAI)
+
+The [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) is a 
+sub-group of the W3C focuses only on digital accessibility. 
+
+## Web Content Accessibility Guidelines (WCAG) {: #wcag}
+
+Web Content Accessibility Guidelines (commonly referred to as ]=
+[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) is an international 
+set of accessibility standards developed through the W3C in cooperation with 
+individuals and organizations. The goal of WCAG is to provide a single shared 
+standard for digital accessibility that meets the needs of individuals, 
+organizations, and governments worldwide.
diff --git a/src/site/content/en/learn/accessibility/images/images.assess.yml b/src/site/content/en/learn/accessibility/images/images.assess.yml
new file mode 100644
index 00000000000..a7828046014
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/images/images.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of ARIA and HTML
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2"
+    stem: How can you make complex images accessible?
+    options:
+      - content: "Include an explanation later in the article."
+        rationale: "Not quite. This can be helpful, but only when used with a link to the longer description."
+      - content: "Use a link for longer explanations."
+        rationale: "This method is a good choice for anyone who might benefit from having this additional image information readily available on the screen, instead of buried in the code."
+      - content: 'Add the `aria-describedby` attribute to the image.'
+        rationale: "This method creates a strong association between the image and the full description."
+      - content: "Add longform alt text with a full description."
+        rationale: "Avoid using alt text in this instance, as it won’t be available to users without AT and may not be read in-full."
diff --git a/src/site/content/en/learn/accessibility/images/index.md b/src/site/content/en/learn/accessibility/images/index.md
new file mode 100644
index 00000000000..f3ca9ed98f2
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/images/index.md
@@ -0,0 +1,309 @@
+---
+title: 'Images'
+authors:
+  - cariefisher
+description: Create accessible images.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+Accessible images may seem like a simple topic at first glance&mdash;you add
+some "alt text" to an image, and you are done. But, the topic is more nuanced
+than some people think. In this section, we'll review:
+
+* How to update the code to make images accessible.
+* What information should be shared with users and where to share it.
+* Additional ways to improve your images to support people with disabilities.
+
+## Image purpose and context
+
+Before even one line of code is written, you must first think about the point
+of the image and how it will be used. Asking yourself questions about the
+purpose and context of the image can help you determine how best to convey the
+information to a person using
+[assistive technology (AT)](https://www.nichd.nih.gov/health/topics/rehabtech/conditioninfo/device)
+such as screen readers.
+
+You may ask yourself:
+
+* _Is the image essential to understanding the context of the feature or page?_
+* _What type of information is the image trying to convey?_
+* _Is the image simple or complex?_
+* _Does the image elicit emotion or prompt the user to act?_
+* _Or is the image just visual "eye candy" with no real purpose?_
+
+A visual flowchart, such as an
+[image decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/),
+can help you decide which category your image belongs to.
+
+Try hiding the images on your site or web app using a browser extension or
+other methods. Then ask yourself: "Do I understand the content that remains?"
+If the answer is yes, it is most likely a decorative image. If not, the image
+is instead informative in some way and contextually necessary. Once you
+determine the image's purpose, you can determine the most accurate way to code
+for it.
+
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/cnUw9wOPYGvEpO69nqFe.png", alt="Example image decision tree.", width="632", height="598"
+%}
+
+### Decorative images
+
+A [decorative image](https://www.w3.org/WAI/tutorials/images/decorative/) is a
+visual element that doesn't add additional context or information that allows
+the user to better understand the context. Decorative images are supplemental
+and may provide style rather than substance.
+
+If you decide an image is decorative, the image must be programmatically hidden
+from ATs. When you program an image to be hidden, it signals to the AT that the
+image is not needed to understand the page's content, context, or action. There
+are many ways to hide images, including using an empty/null text alternative,
+[applying ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA), or
+adding the image as a CSS background. Below are a few examples of how to hide a
+decorative image from users.
+
+{% Aside 'caution' %}
+<p>Be mindful when making this choice, as
+"[decorative](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/)"
+can mean different things to different users. Some AT users want to hear
+descriptions for every visual on the screen.</p>
+<p>Users can choose to skip over your image descriptions if and when they deem
+  them redundant or verbose, but they cannot imagine descriptions that don't
+  exist. When in doubt, add descriptions to your images.</p>
+{% endAside %}
+
+#### Empty or null `alt`
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'QWrMgxg',
+ height: 300,
+ theme: 'auto',
+ tab: 'html,css,result'
+} %}
+
+An empty/null alternative text attribute differs from a missing alternative
+text attribute. If the alternative text attribute is missing, the AT might read
+out the file name or surrounding content to give the user more information
+about the image.
+
+#### Role set to `presentation` or `none`
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'mdLMwje',
+ height: 350,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+A role set to [`presentation` or `none`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/presentation_role)
+removes an element's semantics from exposure to the accessibility
+tree. Meanwhile, [`aria-hidden= "true"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)
+will remove the entire element&mdash;and all of its children&mdash;from the
+accessibility API.
+
+```html
+<!-- All of these choices lead to the same result. -->
+<img src=".../Ladybug.jpg" role="presentation">
+<img src=".../Ladybug.jpg" role="none">
+<img src=".../Ladybug.jpg" aria-hidden="true">
+```
+
+Use `aria-hidden` with caution as it may hide elements that
+you do not wish to hide.
+
+#### Images in CSS
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'GRdvEYo',
+ height: 350,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+When you add a background image with CSS, a screen reader will not detect the
+image file. Be sure you want the image to be hidden before applying this method.
+
+### Informative images
+
+An [informative image](https://www.w3.org/WAI/tutorials/images/informative/) is an image that conveys a simple concept, idea, or emotion. Types of informative images include photos of real-world objects, essential icons, simple drawings, and [images of text](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html).
+
+If your image is informative, you should include [programmatic alternative text](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) describing the purpose of the image. Alternative image descriptions&mdash;often abbreviated as "alt text"&mdash;give AT users more context about an image and help them better understand an image's message or intent.
+
+Simple alternative descriptions using
+[`<img>` elements](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-alt)
+are achieved by including the `alt` attribute, regardless of the file type it
+points to, such as `.jpg`, `.png`, `.svg`, and others.
+
+```html
+<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs are eating the leaves of my prize rose bush.">
+```
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'yLjoXrj',
+ height: 350,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+When you use `<svg>` elements inline, however, you need to pay attention to accessibility.
+
+First, since SVGs are semantically coded, AT will skip over them by default.
+If you have a decorative image, this is not an issue&mdash;the AT will ignore
+it as intended. But if you have an informative image, an ARIA `role="img"`
+needs to be added to the pattern for the AT to recognize it as an image.
+
+Second, `<svg>` elements do not use the `alt` attribute, so
+[different coding methods](https://codepen.io/web-dot-dev/pen/dyezRBP) must be
+used instead to add alternative descriptions to your informative images.
+
+```html
+  <svg role="img"...>
+     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
+  </svg>
+```
+
+### Functional images
+
+A [functional image](https://www.w3.org/WAI/tutorials/images/functional/) is
+connected to an action. An example of a functional image is a logo that links
+to the home page, a magnifying glass used as a search button, or a social media
+icon that directs you to a different website or app.
+
+Like informative images, functional images must include an alternative
+description to inform all users of their purpose. Unlike an informative image,
+each functional image needs to describe the image's action&mdash;not the
+visual aspects.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'YzLxxPw',
+ height: 350,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'gOzxxbg',
+ height: 350,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+In the logo example, the image is both informative and actionable as it is both
+an image that conveys information and behaves as a link. In cases like these,
+you can add alternative descriptions to each element&mdash;but it is not a
+requirement.
+
+One way to add alternative descriptions to images is through visually hidden
+text. When you use this method, the text will be read by screen readers because
+it is in the DOM, but it is visually hidden with the help of custom CSS.
+
+You can see from the code snippet that "Navigate to the homepage" is the
+wrapper title, and the image alternative text is "Lovely Ladybugs for your
+Lawn." When you listen to the logo code with a screen reader, you hear both the
+visual and the action conveyed in one image.
+
+```html
+<div title="Navigate to the homepage">
+   <a href="/">
+      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
+   </a>
+</div>
+```
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'qBYXXdW',
+ height: 350,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+### Complex images
+
+A [complex image](https://www.w3.org/WAI/tutorials/images/complex/) often
+requires more explanation than a decorative, informational, or
+functional image. It requires both a short and a long alternative
+description to convey the full message. Complex images include infographics,
+maps, graphs/charts, and complex illustrations. As with the other
+image types, there are different methods you can use to add alternative
+descriptions to your complex images.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'NWMvvqw',
+ height: 400,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+```html
+<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
+```
+
+One way to add additional explanation to an image is to link out to a resource
+or provide a jump link to a longer explanation later on the page. This method
+is a good choice, not only for AT users but also helps people with
+disabilities&mdash;such as cognitive, learning, and reading
+disabilities&mdash;who might benefit from having this additional image
+information readily available on the screen instead of buried in the code.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'OJZjxGK',
+ height: 400,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+Another method you can use is to append the `aria-describedby` attribute to the
+`<img>` element. You can programmatically link the image to an ID containing a
+longer description. This method creates a strong association between the image
+and the full description. The extended description can be displayed on the
+screen or visually hidden&mdash;but consider keeping it visible to support even
+more people.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'MWGvEdJ',
+ height: 450,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+One other way to group short alternative descriptions with a longer one is to use the HTML5 `<figure>` and `<figcaption>` elements. These elements act similarly to `aria-describedby` in that it semantically groups elements, forming a stronger association between the image and its description. Adding ARIA `role="group"` ensures backward compatibility with older web browsers that don't support the native semantics of the `<figure>` element.
+
+### Alternative text best practices
+
+Of course, including alternate text is not enough. The text should also be
+meaningful. For example, if your image is about a swarm of ladybugs chewing the
+leaves of your prize rose bush, but your alternative text reads "bugs," would
+that convey the full message and intent of the image? Definitely not.
+
+Alternative descriptions need to capture as much relevant visual information as
+possible and be succinct. While there is no limit to the number of characters a
+screen reader can read, it is usually advised to cap your alternative text to
+150 characters or less to avoid reader fatigue. If you need to add additional
+context to the image, you can use one of the complex image patterns, add
+caption text, or further describe the image in the main copy.
+
+Some additional [alternative text best
+practices](https://www.w3.org/WAI/tutorials/images/tips/) include:
+
+* Avoid using words like "image of" or "photo of" in the description, as the
+  screen reader will identify these file types for you.
+* When naming your images, be as consistent and accurate as possible. Image
+  names are a fallback when the alternative text is missing or ignored.
+* Avoid using non-alpha characters (for example, #, 9, &) and use dashes
+  between words rather than underscores in your image names or alternative text.
+* Use proper punctuation whenever possible. Without it, the image descriptions
+  will sound like one long, never-ending, run-on sentence.
+* Write alternative text like a human and not a robot. Keyword stuffing does
+  not benefit anyone&mdash;people using screen readers will be annoyed, and search engine algorithms will penalize you.
+
+{% Assessment 'images' %}
diff --git a/src/site/content/en/learn/accessibility/index.md b/src/site/content/en/learn/accessibility/index.md
new file mode 100644
index 00000000000..aa8e4a74d9a
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/index.md
@@ -0,0 +1,56 @@
+---
+title: Learn Accessibility
+authors:
+  - cariefisher
+description: An evergreen accessibility course and reference to level up your web development.
+date: 2022-09-30
+updated: 2023-01-12
+tags:
+  - accessibility
+---
+
+## Welcome to Learn Accessibility!
+
+Digital accessibility, commonly abbreviated a11y, is about designing and
+building websites and web apps that disabled people can interact with in
+a meaningful and equivalent way.
+
+This course is created for beginner and advanced web developers.
+You can go through the series from start to finish
+to get a general understanding of accessibility practices and testing,
+or you can use it as a reference for specific subjects. If you read an
+unfamiliar term, refer to our [glossary](/learn/accessibility/glossary).
+For those new to web development overall, check out the
+[Learn HTML](/learn/html) courses for fundamentals with markup and
+[Learn CSS](/learn/css) courses for styling fundamentals.
+
+**This is not a complete reference**. Each section introduces the section topic, provides context and examples. There will be links to topic references, such as [MDN](https://developer.mozilla.org) and
+[WCAG](https://www.w3.org/WAI/standards-guidelines/) specifications, and other
+[web.dev](/learn) articles. Each section will have a short assessment to help
+people confirm their understanding.
+
+Some accessibility best practices differ, based on the disability you're
+addressing. It's important to understand your users and to
+listen to people with disabilities when they tell you what they need.
+
+We are open to your feedback! [Open a GitHub issue](https://github.com/GoogleChrome/web.dev/issues/new/choose)
+and give as much information as you can so we can address it.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn accessibility? [Let's get started](/learn/accessibility/why).
+
+{% Aside %}
+This course was written by [Carie Fisher](https://cariefisher.com/)
+([Twitter](https://twitter.com/cariefisher) and
+[LinkedIn](https://linkedin.com/in/cariefisher)), with input and review from
+[Alexandra White](https://heyawhite.com)
+([Twitter](https://twitter.com/heyawhite)), and
+[Rachel Andrew](https://rachelandrew.co.uk/)
+([Twitter](https://twitter.com/rachelandrew)). Special thanks to
+[Mark Steadman](https://twitter.com/Steady5063) for providing additional support
+for the [JavaScript module](/learn/accessibility/javascript/), and 
+[Aaron Forinton](https://github.com/aaronforinton) for supporting the publication process.
+{% endAside %}
diff --git a/src/site/content/en/learn/accessibility/javascript/index.md b/src/site/content/en/learn/accessibility/javascript/index.md
new file mode 100644
index 00000000000..2384e9f2098
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/javascript/index.md
@@ -0,0 +1,307 @@
+---
+title: 'JavaScript'
+authors:
+  - cariefisher
+  - marksteadman
+description: >
+  Write accessible trigger events, page titles, dynamic content, and more.
+date: 2022-12-05
+tags:
+  - accessibility
+---
+
+JavaScript plays a major role in almost everything we create—from smaller
+dynamic components to full products running on a JavaScript framework, such as
+React or Angular.
+
+This use (or overuse) of JavaScript has brought forward many alarming trends,
+such as long load times due to large amounts of code, use of non-semantic HTML
+elements, and injection of HTML and CSS through JavaScript. And you may be
+unsure of how accessibility fits into each of these pieces.
+
+JavaScript can have a huge impact on the accessibility of your site. In this
+module, we'll share some general patterns for accessibility that are enhanced
+by JavaScript, as well as solutions for accessibility issues that arise from
+using JavaScript frameworks.
+
+## Trigger events
+
+JavaScript events allow users to interact with web content and perform a
+specific action. Many people, such as screen reader users,
+people with fine-motor skill disabilities, people without a mouse or trackpad,
+and others, rely on keyboard support to interact with the web.
+It's critical that you add keyboard support to your JavaScript actions, as it
+affects all of these users.
+
+Let's look at a [click event](https://developer.mozilla.org/docs/Web/API/Element/click_event).
+If an `onClick()` event is used on a semantic HTML element such as a `<button>`
+or `<a>`, it naturally includes both mouse and keyboard functionality. However,
+keyboard functionality is not automatically applied when an `onClick()` event
+is added to a non-semantic element, such as a generic `<div>`.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<button onclick="doAction()">Click me!</button>
+```
+{% endCompare %}
+</div>
+
+Preview this comparison [on CodePen](https://codepen.io/web-dot-dev/pen/bGKOrLj).
+
+If a non-semantic element is used for a trigger event, a
+[keydown/keyup event](https://www.w3.org/WAI/ARIA/apg/example-index/button/button.html)
+must be added to detect the enter or space key press. Adding trigger events to
+non-semantic elements is often forgotten. Unfortunately, when it's forgotten,
+the result is a component that's only accessible via a mouse. Keyboard-only
+users are left without access to the associated actions.
+
+## Page titles
+
+As we learned in the [Document module](/learn/accessibility/more-html),
+the page title is essential for screen reader users. It tells users what page
+they are on and whether they have navigated to a new page.
+
+If you use a JavaScript framework, you need to consider how you handle page
+titles. This is especially important for
+[single-page apps](https://developer.mozilla.org/docs/Glossary/SPA) (SPAs)
+that load from a singular `index.html` file, as transitions or routes (page
+changes) will not involve a page reload. Each time a user loads a new page in
+an SPA, the title won't change by default.
+
+For SPAs, the [document.title](https://developer.mozilla.org/docs/Web/API/Document/title)
+value can be added manually or with a helper package (depending on the
+JavaScript framework). Announcing the
+[updated page titles](https://hidde.blog/accessible-page-titles-in-a-single-page-app/)
+to a screen reader user may take some additional work, but the good news is
+you've got options, such as dynamic content.
+
+## Dynamic content
+
+One of the most powerful JavaScript functionalities is the ability to add HTML
+and CSS to any element on the page. Developers can create dynamic applications
+based on the actions or behaviors of the users.
+
+Let's say you need to send a message to users when they log in to your website
+or app. You want the message to stand out from the white background and relay
+the message: "You are now logged in."
+
+You can use the element [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)
+to set the content:
+
+```javascript
+document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
+```
+
+You can apply CSS in a similar way, with
+[`setAttribute`](https://developer.mozilla.org/docs/Web/API/Element/setAttribute):
+
+```javascript
+document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
+```
+
+With great power comes great responsibility. Unfortunately, JavaScript
+injection of HTML and CSS has historically been misused to create inaccessible
+content. Some common misuses are listed here:
+
+<div class="table-wrapper with-heading-tint">
+<table>
+<thead>
+  <tr>
+    <th>Possible misuse</th>
+    <th>Correct use</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>Render large chunks of non-semantic HTML</td>
+    <td>Render smaller pieces of semantic HTML</td>
+  </tr>
+  <tr>
+    <td>Not allowing time for dynamic content to be recognized by assistive technology</td>
+    <td>Using a <code>setTimeout()</code> time delay to allow users to hear the full message</td>
+  </tr>
+  <tr>
+    <td>Applying style attributes for <code>onFocus()</code> dynamically</td>
+    <td>Use <code>:focus</code> for the related elements in your CSS stylesheet</td>
+  </tr>
+  <tr>
+    <td>Applying inline styles may cause user stylesheets to not be read properly</td>
+    <td>Keep your styles in CSS files to keep the consistency of the theme</td>
+  </tr>
+  <tr>
+    <td>Creating very large JavaScript files that slow down overall site performance</td>
+    <td>Use less JavaScript. You may be able to perform similar functions in CSS (such as animations or sticky navigation), which parse faster and are more performant</td>
+  </tr>
+</tbody>
+</table>
+</div>
+
+For CSS, toggle CSS classes instead adding inline styles, as this
+allows for reusability and simplicity. Use hidden content on the page and
+toggle classes to hide and show content for dynamic HTML. If you need to use
+JavaScript to dynamically add content to your page, ensure it's simple and
+concise, and of course, accessible.
+
+## Focus management
+
+In the [Keyboard focus module](/learn/accessibility/focus), we covered focus
+order and indicator styles. Focus management is knowing when and where to trap
+the focus and when it shouldn't be trapped.
+
+Focus management is critical for keyboard-only users.
+
+### Component level
+
+You can create keyboard traps when a component's focus is not properly managed.
+A keyboard trap occurs when a keyboard-only user gets stuck in a component, or
+the focus is not maintained when it should be.
+
+One of the most common patterns where users experience focus management issues
+is in a modal component. When a keyboard-only user encounters a modal, the user
+should be able to tab between the actionable elements of the modal, but they
+should never be allowed outside of the modal without explicitly dismissing it.
+JavaScript is essential to properly trapping this focus.
+
+{% Compare 'worse' %}
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'ZERVJMz',
+ height: 350,
+ theme: 'auto',
+ tab: 'js,result'
+} %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'zYaydmv',
+ height: 350,
+ theme: 'auto',
+ tab: 'js,result'
+} %}
+
+{% endCompare %}
+
+### Page level
+
+Focus must also be maintained when a user navigates from page-to-page. This is
+especially true in SPAs, where there is
+[no browser refresh](https://marcysutton.com/prototype-testing-accessible-clientside-routing/),
+and all content dynamically changes. Anytime a user clicks on a link to go
+to another page within your application, the focus is either kept in the same
+place or potentially placed somewhere else entirely.
+
+When transitioning between pages (or routing), the development team must decide
+where the focus goes when the page loads.
+
+There are multiple techniques to achieve this:
+
+* Place focus on the main container with an `aria-live` announcement.
+* Put the focus back to a link to skip to the main content.
+* Move the focus to the top-level heading of the new page.
+
+Where you decide to put the focus will depend on the framework you are using
+and the content you want to serve up to your users. It may be context- or
+action-dependent.
+
+## State management
+
+Another area where JavaScript is critical to accessibility is state management,
+or when a component or page's current visual state is relayed to a low-vision, blind, or deafblind assistive technology user.
+
+Often, the state of a component or page is managed through ARIA attributes, as
+introduced in the [ARIA and HTML module](/learn/accessibility/aria-html/).
+Let's review a few of the most common types of ARIA attributes used to help
+manage the state of an element.
+
+### Component level
+
+Depending on your page content and what information your users need, there are
+many [ARIA states](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes)
+to consider when relaying information about a component to the user.
+
+For example, you may use an
+[`aria-expanded`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+attribute to tell the user whether a drop-down menu or list is expanded or
+collapsed.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'oNyJeQZ',
+ height: 300,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+Or you might use [`aria-pressed`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+to indicate that a button has been pressed.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'jOKXLyv',
+ height: 300,
+ theme: 'auto',
+ tab: 'html,result'
+} %}
+
+It's important to be selective when applying ARIA attributes. Think through the
+user flow to understand what critical information should be conveyed to the user.
+
+### Page level
+
+Developers often use a visually hidden area called the
+[ARIA live region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+to announce changes on the screen and alert messages to assistive technology
+(AT) users. This area can be paired with JavaScript to notify users of dynamic
+changes to the page without requiring the entire page to reload.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'Yzvdxdr',
+ height: 450,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+Historically, JavaScript has struggled to announce content in
+[`aria-live`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-live)
+and alert regions due to its dynamic nature. Asynchronously adding content into
+the DOM makes it hard for AT to pick up the region and announce it.
+For the content to be properly read, the live or alert region must be in the
+DOM on load, then the text can dynamically be swapped out.
+
+If you use a JavaScript framework, the good news is almost all of them have a
+"live announcer" package that does all the work for you and is fully
+accessible. There is no need to worry about creating a live region and dealing
+with the issues described in the previous section.
+
+Here are some live packages for common JavaScript frameworks:
+
+* React: [react-aria-live](https://www.npmjs.com/package/react-aria-live) and
+  [react-a11y-announcer](https://github.com/thinkcompany/react-a11y-announcer)
+* Angular: [`LiveAnnouncer`](https://material.angular.io/cdk/a11y/overview#liveannouncer)
+* Vue: [vue-a11y-utils](https://jinjiang.dev/vue-a11y-utils/#vuelive-component)
+
+Modern JavaScript is a powerful language that allows web developers to create
+robust web applications. This sometimes leads to over-engineering and, by
+extension, inaccessible patterns. By following the JavaScript patterns and tips
+in this module, you can make your apps more accessible to all users.
+
+{% Aside %}
+Special thanks to [Mark Steadman](https://twitter.com/Steady5063) for providing
+additional support on this module. Read more of his
+[accessibility articles](https://dev.to/steady5063).
+{% endAside %}
+
+{% Assessment 'javascript' %}
diff --git a/src/site/content/en/learn/accessibility/javascript/javascript.assess.yml b/src/site/content/en/learn/accessibility/javascript/javascript.assess.yml
new file mode 100644
index 00000000000..114877a5c18
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/javascript/javascript.assess.yml
@@ -0,0 +1,23 @@
+setLeader: Test your knowledge of Javascript
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which way is best to change an element's style with Javascript?
+    options:
+      - content: "Use Javascript to apply dynamic style directly within an HTML element."
+        rationale: "This leads to bloated JavaScript files and is inefficient."
+      - content: "Use JavaScript to toggle an element's class, and add the style to your CSS stylesheet."
+        rationale: "Keep your style in the CSS stylesheet and use lightweight JavaScript to change the class name."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Can all JavaScript actions support keyboard users?
+    options:
+      - content: "Yes, but you may have to do some extra work."
+        rationale: "Semantic HTML supports keyboard users by default, but non-semantic elements with actions need additional JavaScript."
+      - content: "Yes, all actions automatically support keyboard users."
+        rationale: "Only semantic HTML automatically supports keyboard focus."
+      - content: "No, you can only support keyboard users with semantic HTML."
+        rationale: "All HTML elements can support keyboard users."
diff --git a/src/site/content/en/learn/accessibility/measure/index.md b/src/site/content/en/learn/accessibility/measure/index.md
new file mode 100644
index 00000000000..a75f2231cb5
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/measure/index.md
@@ -0,0 +1,251 @@
+---
+title: 'How is digital accessibility measured?'
+authors:
+  - cariefisher
+description: >
+  Introduction to accessibility measurement, which ensures everyone,
+  including people with disabilities, can still interact with your website
+  in a meaningful and equal way.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+[Digital accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
+means designing and building your digital offerings so that, regardless of a
+person's mental or physical ability, they can still interact with your website,
+app, or other digital product in a meaningful and equal way. 
+
+But how do you measure the accessibility of a digital product? How do you know
+when something is accessible?
+
+## Introduction to accessibility testing
+
+There are many ways to test a digital product for accessibility. One
+fundamental approach is to evaluate it against a set of accessibility
+standards. 
+
+There are many types of accessibility standards. Typically, your industry,
+product type, local/country
+[laws](https://www.3playmedia.com/blog/major-accessibility-laws/) and
+[policies](https://www.w3.org/WAI/policies/), or overall accessibility goals
+will dictate which set of guidelines to follow and levels to meet. If no
+specific standard is required for your project, the standard recommendation is
+to follow the latest version of the
+[Web Content Accessibility Guidelines (WCAG)](#wcag).
+
+Testing your digital product against an accessibility standard and conformance
+level is commonly referred to as an
+_[accessibility audit](https://www.w3.org/WAI/test-evaluate/)_.
+An accessibility audit uses various methodologies, techniques, and tools,
+including design, automated, manual, and assistive technology (AT) testing.
+
+Perform an accessibility audit to capture the baseline accessibility compliance
+of a digital product. But, running it once at the start of a project is not
+enough to determine if a product is accessible. You should run this audit
+multiple times throughout the software product lifecycle to check for changes
+in the level of conformance, against a set of pre-determined accessibility
+checkpoints or guidelines.
+
+## Web Content Accessibility Guidelines (WCAG) {:#wcag}
+
+The [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+are an international set of accessibility standards developed through the W3C,
+in cooperation with individuals and organizations. The goal of WCAG is to
+provide a single shared standard for digital accessibility that meets the needs
+of individuals, organizations, and governments worldwide.
+
+WCAG is primarily intended for web-based and native mobile app designers and
+developers. However, many others, including software developers, content
+creators/editors, and all levels of management, benefit from understanding and
+applying WCAG-based techniques to their process. Additional W3C standards may
+apply to your role, including the
+[Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/) and
+[User Agent Accessibility Guidelines (UAAG)](https://www.w3.org/WAI/standards-guidelines/uaag/),
+so make sure you review the
+[W3C list of standards](https://www.w3.org/standards/) and use the one(s) most
+applicable to your role and project.
+
+In terms of accessibility, WCAG is considered the "gold standard" for
+conformance testing. The
+[first draft of WCAG](https://www.w3.org/TR/WAI-WEBCONTENT/) was released in
+1999. The current version is [WCAG 2.1](https://www.w3.org/TR/WCAG21/),
+released in June 2018, while [WCAG 2.2](https://www.w3.org/TR/WCAG22/) is
+scheduled for 2023. A completely revamped version of the guidelines,
+[WCAG 3.0](https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/), is
+being drafted for a future release, but is not expected to be a completed W3C
+standard for a few more years.
+
+The WCAG guidelines have three levels of success criteria: A, AA, and AAA. The
+success criteria determine conformance to WCAG. To meet WCAG conformance, the
+digital product you are testing needs to meet the success criteria for your
+target level.
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">
+      30
+    </p>
+    <p>A success criteria</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      20
+    </p>
+    <p>AA success criteria</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      28
+    </p>
+    <p>AAA success criteria</p>
+  </div>
+</ul>
+
+For the current standard (WCAG 2.1), there are 78 success criteria in total,
+split across each level. It is important to note that each level is
+progressive, meaning if your accessibility goal is AA, you must pass the
+success criteria for both A and AA to achieve this level of conformance.
+
+<ul class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">
+      30
+    </p>
+    <p>Pass A level</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      50
+    </p>
+    <p>Pass A + AA level</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">
+      78
+    </p>
+    <p>Pass A + AA + AAA level</p>
+  </div>
+</ul>
+
+## Accessibility principles
+
+The WCAG success criteria are a very important set of detailed guidelines that
+inform designers and developers how to create accessible websites and apps.
+Understanding these guidelines is critical to address issues that arise in
+accessibility compliance testing, but the guidelines quickly become very technical.
+
+If you are new to this field, start with the principles of
+WCAG&mdash;[Perceivable, Operable, Understandable, and Robust (POUR)](https://www.w3.org/WAI/fundamentals/accessibility-principles/).
+By applying POUR principles to your digital products, you can focus on how your
+products are used by real humans, including people with disabilities. 
+
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/j2qQcEjknNhD46OxDtaE.png", alt="Perceivable, Operable, Understandable, and Robust all connect to one another.", width="800", height="679" %}
+</figure>
+
+{% Details 'open' %}
+
+{% DetailsSummary 'h3' %}
+Perceivable
+{% endDetailsSummary %}
+
+<figure data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/haquBrDGcS5NehEPGYoK.png", alt="Perceivable is represented by glasses, but multiple sesnes are used to understand content on a screen.", width="234", height="98" %}
+</figure>
+
+The first category in POUR is Perceivable. This principle states that users
+must be able to perceive all essential information on the screen, and it must
+be conveyed to multiple senses.
+
+**Ask yourself**: Is there any content or functionality in your digital product
+that a person with a specific disability would not be able to perceive? Be sure
+to consider all the different types of disabilities—visual, mobility, hearing,
+cognitive, and speech impairments, vestibular and seizure disorders, and more.
+
+**Examples of Perceivable**:
+
+* Adding text alternatives to all non-decorative images and essential icons.
+* Adding captions, transcripts, and audio descriptions to videos.
+* Ensuring color is not the only method of conveying meaning.
+{% endDetails %}
+
+{% Details 'open' %}
+
+{% DetailsSummary 'h3' %}
+Operable
+{% endDetailsSummary %}
+
+<figure data-float="right">
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/XPLRoBlh2fFMgY9rUDeV.png", alt="Operable is represented by a keyboard, but there are a number of interfaces and softwares one may use to interact.", width="353", height="177" %}
+</figure>
+
+The second category is Operable. For this principle, users must be able to
+operate the digital product's interface. The interface cannot require
+interaction that a user cannot perform.
+
+**Ask yourself**: Can users control the interactive elements of your digital
+product? Are there any focus order issues or keyboard traps? How are touch
+interfaces handled?
+
+**Examples of Operable**:
+
+* Adding keyboard and touchscreen support to all active elements.
+* Ensuring slideshows and videos have all of the necessary controls available.
+* Giving users enough time to fill out a form or a method to extend the time.
+{% endDetails %}
+
+{% Details 'open' %}
+
+{% DetailsSummary 'h3' %}
+Understandable
+{% endDetailsSummary %}
+
+<figure data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/Wu11xfdtJVoYTNiY9BxO.png", alt="Understandable is represented by a head with colorful connected dots.", width="168", height="215" %}
+</figure>
+
+The third category of POUR is Understandable. For this principle, users must understand the information and the operation of the user interface.
+
+**Ask yourself**: Is all of the content clearly written? Are all of the
+interactions easy to understand? Does the order of the page make sense—to
+sighted users, keyboard-only users, screen reader users?
+
+**Examples of Understandable**:
+
+* Writing simply—don't use a complex word when a simple one will do.
+* Ensuring your digital product has predictable navigation.
+* Ensuring error messages are clear and easy to resolve.
+{% endDetails %}
+
+{% Details 'open' %}
+
+{% DetailsSummary 'h3' %}
+Robust
+{% endDetailsSummary %}
+
+<figure data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/6n5u7FVgb5dCCup50UKY.png", alt="Robust", width="362", height="218" %}
+</figure>
+
+The last category is Robust. This principle focuses on supporting assistive
+technologies and ensuring that, as devices and user agents evolve, the digital
+product remains accessible.
+
+**Ask yourself**: What types of assistive technology are you supporting? Does
+your digital product only work on the newest browsers or operating systems?
+Does it work at all breakpoints and in different device orientations? 
+
+**Examples of Robust**:
+
+* Testing keyboard-only navigation.
+* Testing with different screen reader technologies.
+* Ensuring all of the content and functionality can be accessed, regardless of device size or orientation.
+{% endDetails %}
+
+Remember—the whole point of POUR is not about rigidly adhering to hard and fast
+rules. Instead, it is a way to help you
+[understand and meet](https://alistapart.com/article/getting-to-the-heart-of-digital-accessibility/)
+the diverse needs of your users.
+
+{% Assessment 'measure' %}
diff --git a/src/site/content/en/learn/accessibility/measure/measure.assess.yml b/src/site/content/en/learn/accessibility/measure/measure.assess.yml
new file mode 100644
index 00000000000..15e9db49aa5
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/measure/measure.assess.yml
@@ -0,0 +1,27 @@
+setLeader: Test your knowledge of measuring accessibility
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the top level of WCAG performance?
+    options:
+      - content: "AAA Level"
+        rationale: "Yes!"
+      - content: "A Level"
+        rationale: "A level is the most basic level of the WCAG standards, at 30 criteria."
+      - content: "POUR"
+        rationale: "POUR is a set of principles to help you focus on how your products are used. But, this is not the measurable standard."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3"
+    stem: What are examples of operable?
+    options:
+      - content: "Users have enough time to complete a form."
+        rationale: "Yes!"
+      - content: "Simple language is used."
+        rationale: "Try again."
+      - content: "All active elements have keyboard and touchscreen support."
+        rationale: "Yes!"
+      - content: "All videos have controls."
+        rationale: "Yes!"
diff --git a/src/site/content/en/learn/accessibility/more-html/document.assess.yml b/src/site/content/en/learn/accessibility/more-html/document.assess.yml
new file mode 100644
index 00000000000..de4d013e6e3
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/more-html/document.assess.yml
@@ -0,0 +1,14 @@
+setLeader: Test your knowledge of document accessibility.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Your site is a multi-language online textbook, where multiple languages are shown on one page. What's the best way to tell assistive technology the language of the copy?
+    options:
+      - content: "Don't worry about it, the AT can automatically read each language."
+        rationale: "While some AT may have language detection skills, you can't guarantee the AT will guess correctly."
+      - content: 'Include all languages in the `<html>` element. For example `<html lang="en,lt,pl,pt">`'
+        rationale: 'The `lang` attribute can only have one language associated with it.'
+      - content: 'Set a primary `lang` for the `<html>`, and additional languages on any element which has content in a different language.'
+        rationale: 'The AT will primarily rely on the `<html>` language attribute to read the document. If you have multi-language text, make sure to add a `lang` attribute to the corresponding element (such as a section or paragraph) with the correct two letter ISO code.'
diff --git a/src/site/content/en/learn/accessibility/more-html/index.md b/src/site/content/en/learn/accessibility/more-html/index.md
new file mode 100644
index 00000000000..1c8beb4f567
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/more-html/index.md
@@ -0,0 +1,206 @@
+---
+title: 'The Document'
+authors:
+  - cariefisher
+description: >
+  Additional HTML elements to consider when building accessible
+  websites and web apps.
+date: 2022-10-31
+tags:
+  - accessibility
+---
+
+Along with structure, there are many supporting HTML elements to consider when
+building and designing for digital accessibility. Throughout the Learn
+Accessibility course, we cover a lot of elements.
+
+This module focuses on very specific elements that don't quite fit into any of
+the other modules but are useful to understand.
+
+{% Aside %}
+Our [Learn HTML course](/learn/html/) covers the basics of HTML and semantic
+structure in great detail. As such, this module builds off of that course
+material and is focused specifically on digital accessibility. Likewise, be
+sure to review the [ARIA and HTML module](/learn/accessibility/aria-html/) in
+this course before diving into this module.
+{% endAside %}
+
+## Page title
+
+The HTML [`<title>`](https://developer.mozilla.org/docs/Web/HTML/Element/title)
+element defines the content of the page or screen a user is about to
+experience. It's found in the
+[`<head>`](https://developer.mozilla.org/docs/Web/HTML/Element/head) section of
+an HTML document and is equivalent to the `<h1>` or main topic of the page. The
+title content is displayed in the browser tab and helps users understand which
+page they are visiting, but it is not displayed on the website or app itself.
+
+In a [single-page app](https://developer.mozilla.org/docs/Glossary/SPA) (SPA),
+the `<title>` is handled in a slightly different way, as users don't navigate
+between pages as they do on multi-page websites. For SPAs, the value of the
+[`document.title`](https://developer.mozilla.org/docs/Web/API/Document/title)
+property can be added manually or by a helper package, depending on the
+JavaScript framework. Announcing the
+[updated page titles](https://hidde.blog/accessible-page-titles-in-a-single-page-app/)
+to a screen reader user may take some additional work.
+
+
+Descriptive page titles are good for both users and
+[search engine optimization (SEO)](https://developer.mozilla.org/docs/Web/HTML/Element/title#page_titles_and_seo)—but
+don't go overboard and add lots of keywords. Since the title is the first
+thing announced when an AT user visits a page, it must be accurate, unique, and
+descriptive, but also concise.
+
+When writing page titles, it is also best practice to "front load" the interior
+page or important content first, then add any preceding pages or information
+after. This way, AT users don't have to sit through the information they have
+already heard.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
+```
+{% endCompare %}
+</div>
+
+{% Aside 'important' %}
+Search engines typically display only the first 55–60 characters of a page
+title, so be sure to limit your total page title characters.
+{% endAside %}
+
+## Language
+
+### Page language
+
+The page language attribute ([`lang`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang)) sets the default language for the entire page. This attribute is added to the [`<html>`](https://developer.mozilla.org/docs/Web/HTML/Element/html) tag. A valid language attribute should be added to every page as it signals the AT to which language it should use.
+
+It's recommended that you use two-character
+[ISO language codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)
+for greater AT coverage, as many of them do not support
+[extended language codes](https://webaim.org/techniques/language/).
+
+When a language attribute is completely missing, the AT will default to the
+user's programmed language. For example, if an AT was set to Spanish, but a
+user visited an English website or app, the AT would try to read the English
+text with Spanish accents and cadence. This combination results in an unusable
+digital product and a frustrated user.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<html>...</html>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<html lang="en">...</html>
+```
+{% endCompare %}
+</div>
+
+The lang attribute can only have one language associated with it. This means
+the `<html>` attribute can only have one language, even if there are multiple
+languages on the page. Set `lang` to the primary language of the page.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<html lang="ar,en,fr,pt">...</html>
+```
+
+{% CompareCaption %}
+Multiple languages are not supported.
+{% endCompareCaption %}
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<html lang="ar">...</html>
+```
+
+{% CompareCaption %}
+Set only the page's primary language. In this case, the language is Arabic.
+{% endCompareCaption %}
+{% endCompare %}
+</div>
+
+### Section language
+
+You can also use the language attribute ([lang](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang)) for language switches in the content itself. The same basic rules apply as the full-page language attribute, except you add it to the appropriate in-page element instead of on the `<html>` tag.
+
+Remember that the language you add to the `<html>` element cascades down to all
+the contained elements, so always set the primary language of the page
+top-level `lang` attribute first.
+
+For any in-page elements written in a different language, add that `lang`
+attribute to the appropriate wrapper element. This will override the
+top-level language setting until that element is closed.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<html lang="en">
+  <body>...
+    <div>
+      <p>While traveling in Estonia this summer, I often asked,
+        "Kas sa räägid inglise keelt?" when I met someone new.</p>
+    </div>
+  </body>
+</html>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<html lang="en">
+  <body>...
+    <div>
+      <p>While traveling in Estonia this summer, I often asked,
+        <span lang="et">"Kas sa räägid inglise keelt?"</span>
+        when I met someone new.</p>
+    </div>
+  </body>
+</html>
+```
+{% endCompare %}
+</div>
+
+## iFrames
+
+The iFrame element
+([`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)) is
+used to host another HTML page or a third party's content within the page. It
+essentially puts another webpage within the parent page. iFrames are commonly
+used for advertisements, embedded videos, web analytics, and interactive
+content.
+
+To make your `<iframe>` accessible, there are a couple of aspects to consider. First, each `<iframe>` with distinct content should include a title element inside the parent tag. This title supplies AT users with more information about the content inside the `<iframe>`.
+
+Second, as a best practice, it is good to set the scrolling to "auto" or "yes" in the `<iframe>` tag settings. This allows people with low vision to be able to scroll into content within the `<iframe>` that they might not otherwise be able to see. Ideally, the `<iframe>` container would also be flexible in its height and width.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<iframe title="Google Pixel - Lizzo in Real Tone"
+  src="https://www.youtube.com/embed/3obixhGZ5ds"
+  scrolling="auto">
+</iframe>
+```
+{% endCompare %}
+</div>
+
+{% Assessment 'document' %}
diff --git a/src/site/content/en/learn/accessibility/motion/index.md b/src/site/content/en/learn/accessibility/motion/index.md
new file mode 100644
index 00000000000..35075010eba
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/motion/index.md
@@ -0,0 +1,176 @@
+---
+title: 'Animation and motion'
+authors:
+  - cariefisher
+description: >
+  Support people with all types of movement-triggered disorders.  
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+Have you ever been riding in a car, boat, or plane and suddenly felt the world
+spin? Or had a migraine so bad that animations on your phone or tablet, 
+created to "delight" you, suddenly make you sick? Or perhaps you've always been
+sensitive to all types of motion? These are examples of different types of
+vestibular disorders. 
+
+By age 40, over 35% of adults will have experienced some form of
+[vestibular dysfunction](https://vestibular.org/article/what-is-vestibular/about-vestibular-disorders/).
+This may lead to a temporary dizzy spell, migraine-induced vertigo, or a more
+permanent vestibular disability.
+
+Beyond triggering vertigo, many people find moving, blinking, or scrolling
+content distracting. People with
+[ADHD](https://www.nimh.nih.gov/health/publications/attention-deficit-hyperactivity-disorder-in-children-and-teens-what-you-need-to-know)
+and other attention deficit disorders might be so distracted by your animated
+elements that they forget why they even went to your website or app in the
+first place.
+
+In this module, we'll look at some of the ways to help better support people
+with all types of movement-triggered disorders. 
+
+## Flashing and moving content
+
+When building animation and motion, you should ask yourself whether the element's movement is excessive. For example, colors flickering from dark to light or quick movements on the screen, can cause seizures in people with photosensitive epilepsy. It is estimated that [3% of people with epilepsy](https://www.epilepsy.com/what-is-epilepsy/seizure-triggers/photosensitivity) suffer from photosensitivity, and it's more common in women and younger people.
+
+The WCAG's [guidelines on flashing](https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold) recommend against the following: 
+
+* Flashes for more than three times in any one second
+* Flashes below the
+  [general flash and red flash threshold](https://www.w3.org/TR/WCAG21/#dfn-general-flash-and-red-flash-thresholds).
+
+These flashes may, at best, cause an inability to use a webpage or, at worst,
+lead to illness.
+
+For any extreme movement, it is imperative that you test it using the
+[Photosensitive Epilepsy Analysis Tool (PEAT)](https://trace.umd.edu/peat/).
+PEAT is a free tool to identify if the screen's content, video, or animations
+are likely to cause seizures. Not all content needs to be evaluated by PEAT,
+but content that contains flashing or rapid transitions between light and dark
+background colors should be evaluated, just to be safe.
+
+Another question you should ask yourself about animation and motion is whether the element's movement is essential to understanding the content or actions on the screen. If it is not essential, consider removing all movement—even micro-movements—from the element you are building or designing.
+
+Suppose you believe the element's movement is not essential but could enhance
+the user's overall experience, or you cannot remove the movement for another
+reason. In that case, you should follow WCAG's
+[guidelines on motion](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html).
+The guidelines state that you must build an option for users to pause, stop or
+hide movement for: non-essential moving, blinking, or scrolling elements that
+start automatically, last more than five seconds, and are part of other page
+elements.
+
+## Pause, stop, or hide movement {: #pause-stop-hide}
+
+Add a [pause, stop, or hide](https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/#aa-pause-stop-hide)
+mechanism to your page to allows users to turn off potentially problematic
+motion animation. You can do this on the screen level or element level.
+
+For example, suppose your digital product includes a lot of animations.
+Consider adding an [accessible JavaScript toggle](https://css-irl.info/accessible-toggles/)
+to allow users to control their experience. When the button is toggled to
+"motion off," all animations are frozen on that screen and all others.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'xxjpBGE',
+ height: 450,
+ theme: 'auto',
+ tab: 'js,result'
+} %}
+
+## Use media queries
+
+In addition to being selective about your animations, giving your users options
+to pause, stop, hide movement, and avoiding infinite animation loops, you can
+also consider adding a movement-focused media query. This gives your users even
+more choice when it comes to what is displayed on the screen.
+
+### `@prefers-reduced-motion` {: #prefers-reduced-motion}
+
+Similar to the color-focused media queries in the [color module](/learn/accessibility/color-contrast), the @prefers-reduced-motion media query checks the [user's OS settings](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences) related to animation.
+
+<figure>
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/THGrOrf3wJxPZWDJAcZx.png", alt="MacOS Display settings UI, where Reduce motion is turned on.", width="800", height="580" %}
+</figure>
+
+A user may set display preferences to reduce motion. These settings are
+different across operating systems, and may be framed positively or negatively.
+With [@prefers-reduced-motion](/prefers-reduced-motion/), you can design a site
+which respects these preferences.
+
+{% BrowserCompat 'css.at-rules.media.prefers-reduced-motion' %}
+
+On MacOS and Android, the user turns the setting on to reduce motion. On MacOS,
+a user can set **Reduce motion** in Settings > Accessibility > Display.
+Android's setting is **Remove animations**. On Windows, the setting is framed
+positively as **Show animations**, which is on by default. A user must turn
+this setting off to reduce motion.
+
+{% Aside %}
+As each UI uses different language, consider still [allowing users to choose for themselves](#allow-user-choice),
+rather than guessing how much animation is too much. This may differ on a
+situation-by-situation basis.
+{% endAside %}
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'VwxyReM',
+ height: 350,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+Alternatively, as shown in the next set of examples, you can code all your animations to stop moving within five seconds or less instead of playing on an infinite loop.
+
+### Progressive enhancement for movement
+
+As designers and developers, we have a lot of choices to make, including default movement states and how much movement to display. Let's take another look at the last example on motion.
+
+Suppose we decide the animation is unnecessary for understanding the content on the screen. In that case, we can choose to set the default state to the reduced motion animation instead of the full motion version. Unless users specifically ask for animations, the animations are turned off. 
+
+{% Aside %}
+The motion preferences available are dependent on the operating system. Some allow you to opt-in to animations, while others require you to opt out of the animations.
+{% endAside %}
+
+We cannot predict what level of movement will cause issues for people with
+seizure, vestibular, and other visual disorders. Even a small amount of motion
+on the screen can trigger dizziness, blurred vision, or worse. So, in the
+following example, we default to no animation.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'qBYpvam',
+ height: 350,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+### Layered media queries
+
+You can use multiple media queries to give your users even more choices. Let's
+use `@prefers-color-scheme`, `@prefers-contrast`, and `@prefers-reduced-motion`
+all together.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'wvjpOzR',
+ height: 400,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+## Allow your users to choose {: #allow-user-choice}
+
+While it can be fun to build animation into our digital products to delight
+users, it's critical we remember some people will be affected by these designs.
+Motion sensitivity can affect anyone, from feeling slight discomfort to causing 
+a debilitating illness or seizure.
+
+You can use a number of different tools to allow the user to decide what's best
+for them, rather than guessing how much motion is too much. For example, add a
+toggle to turn on or off animation within your site or web app. Consider
+defaulting such a toggle to **off**.
+
+{% Assessment 'motion' %}
diff --git a/src/site/content/en/learn/accessibility/motion/motion.assess.yml b/src/site/content/en/learn/accessibility/motion/motion.assess.yml
new file mode 100644
index 00000000000..273dc414188
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/motion/motion.assess.yml
@@ -0,0 +1,12 @@
+setLeader: Test your knowledge of motion and animation accessibility.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What can we build which reflects the operating system settings for motion?
+    options:
+      - content: '`@prefers-reduced-motion`'
+        rationale: "Yes! This media query allows you to decide how much motion to use based on a user's Display settings. These settings differ across operating systems, so consider implementing choice for motion in addition to this media query."
+      - content: "JavaScript toggles"
+        rationale: "Not quite. Toggles allow the user to make a choice after arriving to your website, but cannot read the user's settings."
diff --git a/src/site/content/en/learn/accessibility/patterns/index.md b/src/site/content/en/learn/accessibility/patterns/index.md
new file mode 100644
index 00000000000..df913d991c1
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/patterns/index.md
@@ -0,0 +1,191 @@
+---
+title: 'Patterns, components, and design systems'
+authors:
+  - cariefisher
+description: >
+  Evaluate patterns, components, and design systems for accessibility.
+date: 2022-12-05
+tags:
+  - accessibility
+---
+
+Many people use component-driven development using pattern style guides, component libraries, or full design systems in their
+development workflow process. Even if you have not used these tools formally, it's likely you use a similar process to break up a
+large design for a website, app, or other digital product into manageable pieces.
+
+Like building a physical structure, it's important to build one piece at a time. First, the foundation, the structure, walls,
+windows, roof, and everything in between. Component-driven development tools allow us to do this for websites, apps, and other digital products.
+
+Some perks to component-driven development include breaking things down into
+manageable pieces, so there is less development time with these reusable
+components. It allows designers, frontend and backend developers, and QA to
+work simultaneously. And clients, designers, PMs, and more, like it because
+they can preview the build process and use a living style guide as a reference
+after the website has launched.
+
+However, when we look at patterns, components, and design systems with accessibility in mind, some questions arise. How do you know
+which patterns are best when it comes to accessibility? Should you use an established pattern/library or create new ones? How do
+you know if these patterns will actually help your users?
+
+With the myriad of choices available, it's easy to quickly become confused about this topic. This module aims to give you general
+information on how to evaluate patterns, components, and design systems for accessibility and gives you a starting point to help you make
+more accessible choices.
+
+## Think critically
+
+Choosing an accessible pattern, component, or design system is not rocket
+science, but it does take time and critical thinking. In fact, there's no such thing as "one perfect pattern," but there may potentially be many options that could work. It's about learning to choose the best option for your unique situation.
+
+In the subsequent testing modules, you will learn more about the techniques and methods on how to evaluate patterns, components, and
+design systems for accessibility. But before that stage, you need to step back and ask yourself some fundamental questions, such as:
+
+* Does an established accessible pattern, component, or design system already exist?
+* What browsers and assistive technology (AT) am I supporting?
+* Are there any code/framework limitations or other integrations/factors/user needs I need to consider?
+
+Depending on your dev environment and user needs, you may have additional or different questions from these. Consider
+these questions as your starting point in your accessibility evaluation.
+
+## Established resources
+
+Before building something brand new, do your due diligence and review what already exists in terms of accessible patterns,
+components, and design systems. With just a little research, you might be surprised to find a solution—or multiple—that fits your needs.
+
+Some great resources for accessible patterns, components, and design systems include:
+
+* [Accessible Components](https://github.com/scottaohara/accessible_components)
+* [Deque University ARIA library](https://dequeuniversity.com/library)
+* [Gov.UK Design System](https://design-system.service.gov.uk/components/)
+* [Inclusive Components](https://inclusive-components.design/)
+* [MagentaA11y](https://www.magentaa11y.com/)
+* [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/components/overview/), created for the U.S. federal government
+* [List of accessible patterns from Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/smashing-newsletter-issue-289/)
+
+For JavaScript frameworks, the following resources are fairly accessible out of
+the box or are easy to customize for accessibility:
+
+* [When CSS Isn't Enough: JavaScript Requirements For Accessible Components](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/)
+* React
+  * [ReachUI](https://reach.tech/)
+  * [Reakit](https://reakit.io/)
+  * [Chakra](https://chakra-ui.com/)
+* Angular: [Material library](https://material.angular.io/cdk/a11y/overview)
+* Vue: [Vuetensils](https://vuetensils.com/)
+
+However—and this cannot be stressed enough—you should never just copy/paste
+code and assume it will fit within your environment and automatically meet your
+user needs. This is true of all patterns, components, and design systems, even
+if labeled as fully accessible.
+
+All resources should be seen as a starting point. Be sure to test everything!
+
+## Browsers and assistive technology (AT) support
+
+After researching a few base patterns, components, or a full design system that
+might work for your dev environment, you can move on to assistive technology
+support. One major type of AT you will want to focus on when evaluating
+patterns, components, and design systems is screen readers.
+
+Screen readers were built with specific browsers in mind and will work best
+when paired with these browsers. We'll go into this topic in much more detail
+in the module on AT testing, but for pattern evaluation purposes, it is helpful
+to understand these combinations exist, so you know what you need in terms of
+support.
+
+<div class="table-wrapper with-heading-tint">
+<table>
+<thead>
+  <tr>
+    <th>Screen reader</th>
+    <th>OS</th>
+    <th>Browser compatibility</th>
+    <th>Cost</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>Job Access with Speech (JAWS)</td>
+    <td>Windows</td>
+    <td>Chrome, Firefox, Edge</td>
+    <td>License require (a free 40-min version exists)</td>
+  </tr>
+  <tr>
+    <td>Non-Visual Desktop Access (NVDA)</td>
+    <td>Windows</td>
+    <td>Chrome and Firefox</td>
+    <td>Free (requires download)</td>
+  </tr>
+  <tr>
+    <td>Narrator</td>
+    <td>Windows</td>
+    <td>Edge</td>
+    <td>Free (built into Windows machines)</td>
+  </tr>
+  <tr>
+    <td>VoiceOver</td>
+    <td>macOS</td>
+    <td>Safari</td>
+    <td>Free (built into macOS machines)</td>
+  </tr>
+  <tr>
+    <td>Orca</td>
+    <td>Linus</td>
+    <td>Firefox</td>
+    <td>Free (built into Gnome-based distributions)</td>
+  </tr>
+  <tr>
+    <td>TalkBack</td>
+    <td>Android</td>
+    <td>Chrome and Firefox</td>
+    <td>Free (built into certain versions of Android OS)</td>
+  </tr>
+  <tr>
+    <td>VoiceOver</td>
+    <td>iOS</td>
+    <td>Safari</td>
+    <td>Free (built into iOS devices)</td>
+  </tr>
+</tbody>
+</table>
+</div>
+
+Browser support is generally complicated, and things get even trickier when you add AT devices and ARIA specifications to the mix.
+
+But it's not all bad news. Thankfully, great resources such as [HTML5 Accessibility](https://stevefaulkner.github.io/HTML5accessibility),
+[Accessibility Support](https://a11ysupport.io), and WCAG's [Custom Control Accessible Development Checklist](https://w3c.github.io/using-aria/#checklist)
+help us to better understand current browser and AT device support, and even when to use ARIA in the first place.
+
+These resources outline the different HTML and ARIA pattern sub-elements available, including open-source community tests.
+You can also review some pattern examples—for both desktop and mobile browsers/AT devices. As such, these resources can help
+you make a more accessible decision regarding patterns, components, and design systems that you may want to use.
+
+### Other considerations
+
+Once you have chosen a few accessible base patterns or components, and factored
+in browser and AT device support, you can move on to more specific contextual
+questions about the pattern, component, design system, and dev environment.
+
+For example, if you are working in a management system (CMS) or have legacy
+code, there may be some limitations to which patterns you can use. Upon review,
+several pattern choices may quickly be cut to one or two options.
+
+Many JavaScript frameworks allow developers to use almost any pattern they
+choose. In cases like these, you may have fewer restrictions and can choose the
+most accessible pattern option.
+
+There are additional considerations to weigh when choosing a pattern,
+component, or design system, such as:
+
+* Performance
+* Security
+* Search engine optimization
+* Language translation support
+* Third-party integrations
+
+These factors will undoubtedly play into your pattern choice, but you should
+also consider the people creating the content and code itself. The pattern you
+choose must be robust enough to handle any potential limitations around
+editor-generated or user-generated content, plus be built in a way that
+developers of all accessibility knowledge can use.
+
+{% Assessment 'patterns' %}
diff --git a/src/site/content/en/learn/accessibility/patterns/patterns.assess.yml b/src/site/content/en/learn/accessibility/patterns/patterns.assess.yml
new file mode 100644
index 00000000000..dba15b64f51
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/patterns/patterns.assess.yml
@@ -0,0 +1,12 @@
+setLeader: Test your knowledge of patterns
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Do accessible components always stay accessible for users?
+    options:
+      - content: "Yes, you can use these components without additional work."
+        rationale: "While a resource built for accessibility is more likely to work automatically than others, it’s essential that you still perform accessibility testing to ensure these components work for your users."
+      - content: "No, you must test your components first."
+        rationale: "Even components and patterns designed for accessibility should be tested. It's possible it could be inaccessible in combination with other existing components."
diff --git a/src/site/content/en/learn/accessibility/structure/index.md b/src/site/content/en/learn/accessibility/structure/index.md
new file mode 100644
index 00000000000..c0c0ab270e4
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/structure/index.md
@@ -0,0 +1,448 @@
+---
+title: 'Content structure'
+authors:
+  - cariefisher
+description: >
+  Use semantic HTML, landmarks, and tables for accessible content.
+date: 2022-10-31
+tags:
+  - accessibility
+---
+
+One of the most important aspects of digital accessibility is the underlying
+structure of the page. When you build your website or app using
+[structural elements](https://www.w3.org/WAI/tutorials/page-structure/) instead
+of relying on styles alone, you give critical context to people using assistive
+technologies (AT), such as screen readers.
+
+Structural elements serve as an outline of the content on the screen, but they
+also act as anchor points to allow for easier navigation within the content.
+
+When you use [semantic HTML elements](https://developer.mozilla.org/docs/Glossary/Semantics#semantics_in_html),
+the inherent meaning of each element is passed on to the accessibility tree and
+used by the AT, giving more meaning to the content than non-semantic elements.
+There may be cases where you need to add additional ARIA attributes to build
+relationships or to enhance the overall user experience, but in most
+situations, one of the [100+ HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element)
+available should work fairly well on its own.
+
+While this module focuses on the most widely used structural elements critical
+to digital accessibility, there are certainly additional elements and
+environmental factors to consider when building structure into your website or
+app. These examples are an introduction to the topic, rather than all-inclusive.
+
+{% Aside %}
+
+Our [Learn HTML course](/learn/html/) covers the basics of HTML and
+[semantic structure](/learn/html/semantic-html/) in great detail. As such, this
+module builds off of that course material and is focused specifically on
+digital accessibility. Likewise, be sure to review the
+[ARIA and HTML module](/learn/accessibility/aria-html/) in this course before
+diving into this module.
+
+{% endAside %}
+
+## Landmarks
+
+Users of AT rely on structural elements to give them information about the
+page's overall layout. When sectioning off large regions of content, you can
+use either ARIA landmark roles or the newer HTML landmark elements to add
+structural context to your page.
+
+Landmarks ensure content is in navigable regions. It's recommended that you supply at least one landmark per page.
+
+Some resources suggest combining [ARIA and HTML landmarks](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/landmark_role#best_practices)
+together to provide better AT coverage. While this type of redundancy shouldn't
+cause issues for your users, test the patterns using a screen reader
+to be certain. When in doubt, it's best to default to using only the newer HTML
+landmark elements, as the
+[browser support](https://stevefaulkner.github.io/HTML5accessibility/) is very
+robust.
+
+Let's compare the HTML landmark elements as
+[mapped](https://www.a11yproject.com/posts/aria-landmark-roles/) to their
+counterpart ARIA landmark roles.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>HTML landmark element</th>
+        <th>ARIA landmark role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.mozilla.org/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/banner_role">banner</a></td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.mozilla.org/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/complementary_role">complementary</a></td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.mozilla.org/docs/Web/HTML/Element/footer">
+          <code>&lt;footer&gt;</code></a></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/contentinfo_role">contentinfo</a></td>
+      </tr>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>
+          </td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/navigation_role">navigation</a></td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.mozilla.org/docs/Web/HTML/Element/main"><code>&lt;main&gt;</code></a></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/main_role">main</a></td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.mozilla.org/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a> <sup>1</sup></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/form_role">form</a></td>
+      </tr>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a> <sup>1</sup></td>
+        <td><a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/region_role">region</a></td>
+      </tr>
+  </tbody>
+  <caption>
+    <sup>1</sup> Requires inclusion of the <code>name</code> attribute to be accessible. A <code>section</code> must be <a href="https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#whatareaccessiblenamesanddescriptions?">accessibly-named</a> for its implicit ARIA role of <a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/region_role"><code>region</code></a> to be visible to assistive technology.
+  </caption>
+</table>
+</div>
+
+Now, let's compare examples of accessible content structure.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<div>
+	<div>...</div>
+</div>
+<div>
+	<p>Stamp collecting, also known as philately, is
+    the study of postage stamps, stamped envelopes,
+    postmarks, postcards, and other materials relating
+    to postal delivery.</p>
+</div>
+<div>
+<p>© 2022 - Stamps R Awesome</p>
+</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<header>
+	<nav>...</nav>
+</header>
+<main>
+	<section aria-label="Introduction to stamp collecting">
+    <p>Stamp collecting, also known as philately, is
+    the study of postage stamps, stamped envelopes,
+    postmarks, postcards, and other materials relating
+    to postal delivery.</p>
+	</section>
+</main>
+<footer>
+<p>© 2022 - Stamps R Awesome</p>
+</footer>
+```
+{% endCompare %}
+</div>
+
+{% Aside %}
+
+Check out the
+[ARIA Landmarks Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)
+for more information and best practices.
+
+{% endAside %}
+
+## Headings
+
+When implemented correctly, [HTML heading levels](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
+form a succinct outline of the overall page content.
+
+There are six heading levels we can use. Heading level one `<h1>` is used for the page's highest and most important information, moving incrementally to
+heading level six `<h6>` for the lowest and least important information.
+
+The sequence of the heading levels is important. Ideally, you won't skip
+heading levels, for example, starting a section with an `<h1>` and immediately
+following it with an `<h5>`. Instead, you should progress to the `<h5>` in
+order. [Heading level order is especially important to AT users](https://youtu.be/vAAzdi1xuUY)
+as this is one of their primary ways to navigate through content.
+
+{% Aside %}
+
+While you can use [ARIA heading roles](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/heading_role)
+for heading levels, it's recommended you use semantic HTML heading levels
+whenever possible.
+
+{% endAside %}
+
+To help you adhere to the proper semantic structure and order for headings,
+consider decoupling your CSS styles from the heading levels. This allows you
+more flexibility in heading styles while maintaining the heading level order.
+It's critical you don't use styles alone to create headings, as these
+aren't seen by AT as a heading.
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'Vwdajpe',
+ height: 400,
+ theme: 'auto',
+ tab: 'html,css,result'
+} %}
+
+When we fake headings, the appropriate structure isn't conveyed to AT users.
+
+Headings are also helpful for people with cognitive and attention deficit
+disorders. It's important to make the heading content meaningful to help them
+understand what is most important on the page.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<div>
+	<h3>Stamps</h3>
+	<p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p>
+</div>
+<div>
+	<h3>How do I start a stamp collection?</h3>
+  <h2>Equipment you will need</h2>
+	<h4>...</h4>
+  <h2>How to acquire stamps</h2>
+	<h4>...</h4>
+  <h2>Organizations you can join</h2>
+	<h4>...</h4>
+</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<header>
+  <h1>Stamp collecting</h1>
+</header>
+<main>
+	<section aria-label="Introduction to stamp collecting">
+		<h2>What is stamp collecting?</h2>
+		<p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p>
+	</section>
+
+	<section aria-label="Start a stamp collection">
+		<h2>How do I start a stamp collection?</h2>
+    <h3>Required equiment</h3>
+    <p>...</p>
+
+    <h3>How to acquire stamps</h3>
+    <p>...</p>
+
+    <h3>Organizations you can join</h3>
+		<p>...</p>
+	</section>
+</main>
+```
+{% endCompare %}
+</div>
+
+
+## Lists
+
+[HTML lists](https://www.w3.org/WAI/tutorials/page-structure/content/#lists)
+are a way to semantically group items similar to one other giving them inherent
+meaning, much like your grocery store list or that never-ending to-do list you
+keep ignoring.
+
+There are three types of HTML lists:
+
+* ordered [`<ol>`](https://developer.mozilla.org/docs/Web/HTML/Element/ol)
+* unordered [`<ul>`](https://developer.mozilla.org/docs/Web/HTML/Element/ul)
+* description [`<dl>`](https://developer.mozilla.org/docs/Web/HTML/Element/dl)
+
+The list item [`<li>`](https://developer.mozilla.org/docs/Web/HTML/Element/li)
+element is used to represent an item in an ordered or unordered list, while the
+description term
+[`<dt>`](https://developer.mozilla.org/docs/Web/HTML/Element/dt) and definition
+[`<dd>`](https://developer.mozilla.org/docs/Web/HTML/Element/dd) elements can
+  be found in the description list.
+
+When programmed correctly, these elements can inform non-sighted AT users about
+the visible structure of the list. When an AT encounters a semantic list, it
+can tell the user the list name and how many items are in it. As the user
+navigates within the list, the AT will read each list item out loud and tell
+which number it's in the list—item one of five, item two of five, and so on.
+
+Grouping items into lists also helps sighted people who have cognitive and
+attention disorders and those with reading disabilities, as list content is
+typically styled to have more visual whitespace and the content is to the point.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<div>
+  <p>How do I start a stamp collection?</p>
+  <p>Equipment you will need</p>
+    <div>
+      <p>Small tongs with rounded tips</p>
+      <p>Stamp hinges</p>
+      <p>Stockbook or albumn</p>
+      <p>Magnifying glass</p>
+      <p>Stamps</p>
+    </div>
+</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<div>
+  <h1>How do I start a stamp collection?</h1>
+  <h2>Equipment you will need</h2>
+  <ol>
+    <li>Small tongs with rounded tips</li>
+    <li>Stamp hinges</li>
+    <li>Stockbook or albumn</li>
+    <li>Magnifying glass</li>
+    <li>Stamps</li>
+  </ol>
+</div>
+```
+{% endCompare %}
+</div>
+
+## Tables
+
+In HTML, tables are generally used for organizing data or page layout.
+
+Depending on the table's purpose, you'll use different semantic structural
+elements. Tables can be very complex in structure, but when you stick to the
+basic semantic rules, they are fairly accessible without much intervention.
+
+### Layout
+
+In the early days of the internet, layout tables were the primary HTML element
+used to build visual structures. Today, we use a mix of semantic and
+non-semantic elements such as `<div>`s and landmarks to create layouts.
+
+While the days of creating layout tables are mostly over, there are times when
+layout tables are still used, such as in visually rich emails, newsletters, and
+advertisements. In these cases, tables used only for layout must not
+use structural elements that convey relationships and add context, such as
+`<th>` or `<caption>`.
+
+Layout tables must also be hidden from AT users with the ARIA
+[presentation role](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/presentation_role)
+or [aria-hidden state](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-hidden).
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<table>
+  <caption>My stamp collection</caption>
+  <tr>
+    <th>[Stamp Image 1]</th>
+    <th>[Stamp Image 2]</th>
+    <th>[Stamp Image 3]</th>
+  </tr>
+</table>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<table role="presentation">
+  <tr>
+    <td>[Stamp Image 1]</td>
+    <td>[Stamp Image 2]</td>
+    <td>[Stamp Image 3]</td>
+  </tr>
+</table>
+```
+{% endCompare %}
+</div>
+
+### Data
+
+Unlike a layout table, which should be hidden from AT users, a
+[data table](https://www.w3.org/WAI/tutorials/tables/) and all its elements
+must be exposed. The structure of data tables is critical for conveying simple
+and complex information to users.
+
+When a table is structured correctly, relationships form between the column
+headers and rows and the data within the table. When structured incorrectly,
+the user is left to decipher the meaning and context of the information in the
+table.
+
+Depending on the complexity of the table, forming relationships through code is
+accomplished in different ways. The first step to making a table accessible is
+to mark up header cells with
+[`<th>`](https://developer.mozilla.org/docs/Web/HTML/Element/th) and data cells
+with [`<td>`](https://developer.mozilla.org/docs/Web/HTML/Element/td) elements.
+
+For more complex tables, you may need to use additional HTML table elements
+such as
+[`<rowgroup>`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/rowgroup_role),
+[`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup),
+[`<caption>`](https://developer.mozilla.org/docs/Web/HTML/Element/caption),
+and
+[`scope`](https://developer.mozilla.org/docs/Web/HTML/Element/th#attr-scope) to
+convey meaning and relationships.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```html
+<table>
+  <tr>
+    <td>Animal</td>
+    <td>Year</td>
+    <td>Condition</td>
+  </tr>
+  <tr>
+    <td>Bird</td>
+    <td>1947</td>
+    <td>Fair</td>
+  </tr>
+  <tr>
+    <td>Lion</td>
+    <td>1982</td>
+    <td>Good</td>
+  </tr>
+  <tr>
+    <td>Horse</td>
+    <td>1978</td>
+    <td>Mint</td>
+  </tr>
+</table>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<table>
+  <caption>My stamp collection</caption>
+  <tr>
+    <th>Animal</th>
+    <th>Year</th>
+    <th>Condition</th>
+  </tr>
+  <tr>
+    <td>Bird</td>
+    <td>1947</td>
+    <td>Fair</td>
+  </tr>
+  <tr>
+    <td>Lion</td>
+    <td>1982</td>
+    <td>Good</td>
+  </tr>
+  <tr>
+    <td>Horse</td>
+    <td>1978</td>
+    <td>Mint</td>
+  </tr>
+</table>
+```
+{% endCompare %}
+</div>
diff --git a/src/site/content/en/learn/accessibility/test-assistive-technology/at.assess.yml b/src/site/content/en/learn/accessibility/test-assistive-technology/at.assess.yml
new file mode 100644
index 00000000000..6265941f885
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-assistive-technology/at.assess.yml
@@ -0,0 +1,25 @@
+setLeader: Test your knowledge of automated accessibility testing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: What's the best screen reader to use for testing accessibility?
+    options:
+      - content: "JAWS"
+        rationale: "While JAWS is one of the most popular screen readers, it's not necessarily the best choice."
+      - content: "VoiceOver"
+        rationale: "VoiceOver is a tool for MacOS and iOS users. If you're using a Windows PC, you will need to use a different tool."
+      - content: "Orca"
+        rationale: "Orca is for Linux Firefox users, which may mean you need to use a different tool."
+      - content: "There isn't one"
+        rationale: "Each screen reader is built for a specific device, operating system, or browser, so what's best for you depends on how you're testing. If you have analytics or research which tells you more about your users who use screen readers, it can be beneficial to test with the same screen readers they're using."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the purpose of testing with assistive technology?
+    options:
+      - content: "To experience the same thing as people who use assistive technology."
+        rationale: "Your cannot truly emulate the experience of someone who uses AT. One test in one situation will not be the same as other experiences."
+      - content: "To test for flaws in your website or app."
+        rationale: "Accessibility testing helps developers find and fix problems that AT users may experience on their website or app."
diff --git a/src/site/content/en/learn/accessibility/test-assistive-technology/index.md b/src/site/content/en/learn/accessibility/test-assistive-technology/index.md
new file mode 100644
index 00000000000..349b1cdfc79
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-assistive-technology/index.md
@@ -0,0 +1,455 @@
+---
+title: 'Assistive Technology testing'
+authors:
+  - cariefisher
+description: How to test with Assistive Technology (AT).
+date: 2023-01-12
+tags:
+  - accessibility
+---
+
+{% Aside %}
+This module is a continuation of the previous two testing modules, [automated accessibility testing](/learn/accessibility/automated-test/) and [manual accessibility testing](/learn/accessibility/manual-test/). If you have not gone through the exercises in those modules yet, we encourage you to do so, as this module starts where they left off.
+{% endAside %}
+
+This module focuses on using assistive technology (AT) for accessibility testing. A person with disabilities can use AT to help increase, maintain, or improve the capabilities of performing a task.
+
+In the digital space, ATs can be:
+
+* No/Low-tech: head/mouth sticks, hand-held magnifiers, devices with large buttons
+* High-tech: voice-activated devices, eye-tracking devices, adaptive keyboards/mice
+* Hardware: switch buttons, ergonomic keyboards, auto-refreshing Braille device
+* Software: text-to-speech programs, live captions, screen readers
+
+We encourage you to use multiple types of ATs in your overall testing workflow.
+
+## Screen reader testing basics
+
+In this module, we focus on one of the most popular digital ATs, screen readers. A screen reader is a piece of software that reads the underlying code of a website or app. It then converts that information into speech or Braille output for the user.
+
+Screen readers are essential for people who are blind and deafblind, but they also could benefit people with low vision, reading disorders, or cognitive disabilities.
+
+### Browser compatibility
+
+There are multiple screen reader options available. The [most popular screen readers](https://webaim.org/projects/screenreadersurvey9) today are JAWS, NVDA, and VoiceOver for desktop computers and VoiceOver and Talkback for mobile devices.
+
+Depending on your operating system (OS), favorite browser, and the device that you use, one screen reader may stand out as the best option. Most screen readers are  built with specific hardware and web browsers in mind. When you use a screen reader with a browser it was not calibrated for, you may encounter more "bugs" or unexpected behavior. Screen readers work best when used in the following combinations.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+          <tr>
+        <th>Screen reader</th>
+        <th>OS</th>
+        <th>Browser compatibility</th>
+          </tr>
+    </thead>
+    <tbody>
+          <tr>
+             <td><a href="https://www.freedomscientific.com/products/software/jaws">Job Access With Speech (JAWS)</a></td>
+             <td>Windows</td>
+             <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+             <td><a href="https://www.nvaccess.org">Non-Visual Desktop Access (NVDA)</a></td>
+             <td>Windows</td>
+             <td>Chrome and Firefox</td>
+          </tr>
+          <tr>
+             <td><a href="https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1">Narrator</a></td>
+             <td>Windows</td>
+             <td>Edge</td>
+          </tr>
+          <tr>
+             <td><a href="https://support.apple.com/guide/voiceover-guide/welcome/web">VoiceOver</a></td>
+             <td>macOS</td>
+             <td>Safari</td>
+          </tr>
+          <tr>
+             <td><a href="https://help.gnome.org/users/orca/stable/index.html.en">Orca</a></td>
+             <td>Linux</td>
+             <td>Firefox</td>
+          </tr>
+          <tr>
+             <td><a href="https://support.google.com/accessibility/android/answer/6283677">TalkBack</a></td>
+             <td>Android</td>
+             <td>Chrome and Firefox</td>
+          </tr>
+          <tr>
+             <td><a href="https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios">VoiceOver (for mobile)</a></td>
+             <td>iOS</td>
+             <td>Safari</td>
+          </tr>
+          <tr>
+             <td><a href="https://support.google.com/chromebook/answer/7031755">ChromeVox</a></td>
+             <td>ChromeOS</td>
+             <td>Chrome</td>
+          </tr>
+    </tbody>
+  </table>
+</div>
+
+### Screen reader commands
+
+Once you have the proper set-up for your screen reader software for your desktop or mobile device, you should look at the screen reader documentation (linked in the preceding table) and run through some [essential screen reader commands](https://dequeuniversity.com/screenreaders) to familiarize yourself with the technology. If you have used a screen reader before, consider trying out a new one!
+
+When using a screen reader for accessibility testing, your goal is to detect problems in your code that interfere with the usage of your website or app, not to emulate the experience of a screen reader user. As such, there is a lot you can do with some foundational knowledge, a few screen reader commands, and a bit—or a lot—of practice.
+
+If you need to further understand the user experience of people using screen readers and other ATs, you can engage with many organizations and individuals to gain this valuable insight. Remember that using an AT to test code against a set of rules and asking users about their experience often yields different results. Both are important aspects to create fully inclusive products.
+
+#### Key commands for desktop screen readers
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Element</th>
+        <th>NVDA (Windows)</th>
+        <th>VoiceOver (macOS)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+         <td>Command</td>
+        <td>Insert (NVDA key)</td>
+        <td>Control + Option (VO key)</td>
+      </tr>
+      <tr>
+        <td>Stop audio</td>
+        <td>Control</td>
+        <td>Control</td>
+      </tr>
+      <tr>
+        <td>Read next/prev
+</td>
+        <td>↓ or ↑
+</td>
+        <td>VO + → or ←
+</td>
+      </tr>
+      <tr>
+        <td>Start reading
+</td>
+        <td>NDVA + ↓
+</td>
+        <td>VO + A
+</td>
+      </tr>
+      <tr>
+        <td>Element List/Rotor
+</td>
+        <td>NVDA + F7
+</td>
+        <td>VO + U
+</td>
+      </tr>
+      <tr>
+        <td>Landmarks
+</td>
+        <td>D
+</td>
+        <td>VO + U
+</td>
+      </tr>
+      <tr>
+        <td>Headings
+</td>
+        <td>H
+</td>
+        <td>VO + Command + H
+</td>
+      </tr>
+      <tr>
+        <td>Links
+</td>
+        <td>K
+</td>
+        <td>VO + Command + L
+</td>
+      </tr>
+      <tr>
+        <td>Form controls
+</td>
+        <td>F
+</td>
+        <td>VO + Command + J
+</td>
+      </tr>
+      <tr>
+        <td>Tables
+</td>
+        <td>T
+</td>
+        <td>VO + Command + T
+</td>
+      </tr>
+      <tr>
+        <td>Within Tables
+</td>
+        <td>NDVA + Alt + ↓ ↑ ← →
+</td>
+        <td>VO + ↓ ↑ ← →
+</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+#### Key commands for mobile screen readers
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+          <tr>
+        <th>Element</th>
+        <th>TalkBack (Android)</th>
+        <th>VoiceOver (iOS)</th>
+          </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Explore</td>
+        <td>Drag one finger around the screen</td>
+        <td>Drag one finger around the screen</td>
+      </tr>
+      <tr>
+        <td>Select or activate</td>
+        <td>Double tap</td>
+        <td>Double tap</td>
+      </tr>
+      <tr>
+        <td>Move up/down</td>
+        <td>Swipe up or down with two fingers</td>
+        <td>Swipe up or down with three fingers</td>
+      </tr>
+      <tr>
+        <td>Change pages</td>
+        <td>Swipe left or right with two fingers</td>
+        <td>Swipe left/right with three fingers</td>
+      </tr>
+      <tr>
+        <td>Next/previous</td>
+        <td>Swipe left/right with one finger</td>
+        <td>Swipe left/right with one finger</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Screen reader testing demo
+
+To test our demo, we used a Safari on a laptop running MacOS and capture sound. You can walk through these steps using any screen reader, but the way you encounter some errors may be different from how its described in this module.
+
+### Step 1
+
+Visit the updated [CodePen](https://codepen.io/web-dot-dev/pen/eYjZdve), which
+has all the automated and manual accessibility updates applied.
+
+View it in [debug mode](https://cdpn.io/pen/debug/eYjZdve) to proceed with the
+next tests. This is important, as it removes the `<iframe>` which surrounds the
+demo webpage, which may interfere with some testing tools. Learn more about
+[CodePen's debug mode](https://blog.codepen.io/documentation/debug-view/#getting-to-debug-view-3).
+
+### Step 2
+
+Activate the screen reader of your choice and go to the demo page. You may consider navigating through the entire page from top to bottom before focusing on specific issues.
+
+We've recorded the our screen reader for each issue, before and after the fixes are applied to the demo. We encourage you to run through the demo with your own screen reader.
+
+#### Issue 1: Content structure {: #content-structure}
+
+Headings and landmarks are one of the primary ways people navigate using screen readers. If these are not present, a screen reader user has to read the entire page to understand the context. This can take a lot of time and cause frustration. If you try to navigate by either element in the demo, you will quickly discover that they do not exist.
+
+* Landmark example: `<div class="main">...</div>`
+* Heading example: `<p class="h1">Join the Club</p>`
+
+If you have updated everything correctly, there should not be any visual changes, but your screen reader experience will have dramatically improved.
+
+<figure>
+  {% YouTube "o8gWVi97cMg" %}
+  <figcaption>Listen to the screen reader navigate through this issue.</figcaption>
+</figure>
+
+<span class="solution" id="issue-1-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+Some inaccessible elements can't be observed by just looking at the site. You may remember the importance of heading levels and semantic HTML from the [Content structure](/learn/accessibility/structure) module. A piece of content may look like a heading, but the content is actually wrapped in a stylized `<div>`.
+
+To fix the issue with headings and landmarks, you must first identify each element that should be marked up as such and update the related HTML. Be sure to update the related CSS as well.
+
+Landmark example: `<main>...</main>`
+
+Heading example: `<h1>Join the Club</h1>`
+
+If you have updated everything correctly, there should not be any visual changes, but your screen reader experience will have dramatically improved.
+
+<figure>
+  {% YouTube "FfM3qvEWHjk" %}
+  <figcaption>Now that we've fixed the content structure, listen to the screen reader navigate through the demo again.</figcaption>
+</figure>
+
+## Issue 2: Link context {: #link-context}
+
+It's important to give content to screen reader users about the purpose of a link and if the link is redirecting them to a new location outside of the website or app.
+
+In our demo, we fixed most of the links when we updated the active image alternative text, but there are a few additional links about the various rare diseases that could benefit from additional context—especially since they redirect to a new location.
+
+```html
+<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
+  Maple syrup urine disease (MSUD)
+</a>
+```
+
+<figure>
+  {% YouTube "kk7LNdtfYMM" %}
+  <figcaption>Listen to the screen reader navigate through this issue.</figcaption>
+</figure>
+
+<span class="solution" id="issue-2-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+To fix this issue for screen reader users, we update the code to add more information, without affecting the visuals element. Or, to help even more people such as those with reading and cognitive disorders, we may choose to add additional visual text instead.
+
+There are many different patterns we may consider to add additional link information. Based on our simple environment that supports just one language, an ARIA label is a straightforward option in this situation. You may notice that the ARIA label overrides the original link text, so make sure to include that information in your update.
+
+```html
+<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
+  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
+  Maple syrup urine disease (MSUD)
+</a>
+```
+
+<figure>
+  {% YouTube "Ezr7cMdCQlE" %}
+  <figcaption>Now that we've fixed the link context, listen to the screen reader navigate through the demo again.</figcaption>
+</figure>
+
+## Issue 3: Decorative image
+
+In our automated testing module, Lighthouse was unable to pick up on the inline SVG that acts as the main splash image on our demo page—but the screen reader finds it and announces it as "image" without additional information. This is true, even without explicitly adding the `role="img"` attribute to the SVG.
+
+```html
+<div class="section-right">
+  <svg>...</svg>
+</div>
+```
+
+<figure>
+  {% YouTube "TKHHTGghrHs" %}
+  <figcaption>Listen to the screen reader navigate through this issue.</figcaption>
+</figure>
+
+<span class="solution" id="issue-3-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+To fix this issue, we first need to decide if the image is [informative](/learn/accessibility/images/#informative-images) or [decorative](/learn/accessibility/images/#decorative-images). Based on that decision, we need to add the appropriate image alternative text (informative image) or hide the image from screen reader users (decorative).
+
+We weighed the pros and cons of how best to categorize the image and decided it was decorative, which means we want to add or modify the code to hide the image. A quick method is to add a `role="presentation"` to the SVG image directly. This sends a signal to the screen reader to skip over this image and not list it in the images group.
+
+```html
+<div class="section-right">
+  <svg role="presentation">...</svg>
+</div>
+```
+
+<figure>
+  {% YouTube "KqTf8Pl2lMU" %}
+  <figcaption>Now that we've fixed the decorative image, listen to the screen reader navigate through the demo.</figcaption>
+</figure>
+
+### Issue 4: Bullet decoration {: #bullet-decoration}
+
+You may have noticed that the screen reader reads the CSS bullet image under
+the rare diseases sections. While not the traditional type of image we
+discussed in the Images module, the image still must be modified as it disrupts
+the flow of the content and could distract or confuse a screen reader user.
+
+```html
+<p class="bullet">...</p>
+```
+
+<figure>
+  {% YouTube "sDR2w-HGHOo" %}
+  <figcaption>Listen to the screen reader navigate through this issue.</figcaption>
+</figure>
+
+<span class="solution" id="issue-4-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+Much like the decorative image example discussed earlier, you can add a `role="presentation"` to the HTML with the bullet class to hide it from the screen reader. Similarly, a `role="none"` would work. Just be sure not to use `aria-hidden: true` or you will hide all of the paragraph information from screen reader users.
+
+```html
+<p class="bullet" role="none">...</p>
+```
+
+### Issue 5: Form field
+
+In the [Forms](/learn/accessibility/forms/) module, we learned that all form
+fields must also have a visual and programmatic label. This label must remain
+visible at all times.
+
+In our demo, we're missing both a visual and programmatic label on our newsletter sign-up email field. There is a text placeholder element, but this does not replace the label as it's not visually persistent and is not fully compatible with all screen readers.
+
+```html
+<form>
+  <div class="form-group">
+    <input type="email" placeholder="Enter your e-mail address" required>
+    <button type="submit">Subscribe</button>
+  </div>
+</form>
+```
+
+<figure>
+  {% YouTube "7hncAhi4UUk" %}
+  <figcaption>Listen to the screen reader navigate through this issue.</figcaption>
+</figure>
+
+<span class="solution" id="issue-5-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+To fix this issue, replace the text placeholder with a look-alike label element. That label element is programmatically connected to the form field and movement was added with JavaScript to keep the label visible even when content is added to the field.
+
+```html
+<form>
+  <div class="form-group">
+    <input type="email" required id="youremail" name="youremail" type="text">
+    <label for="youremail">Enter your e-mail address</label>
+    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
+  </div>
+</form>
+```
+
+<figure>
+  {% YouTube "hNbDfcmdi_A" %}
+  <figcaption>Now that we've fixed the form, listen to the screen reader navigate through the demo.</figcaption>
+</figure>
+
+## Wrap up
+
+Congratulations! You have completed all of the testing for this demo. You can look at all of these changes in the [updated Codepen for this demo](https://codepen.io/web-dot-dev/pen/PoBZgrW).
+
+Now, you can use what you've learned to review the accessibility of your own
+websites and apps.
+
+The goal of all of this accessibility testing is to address as many possible
+issues that a user may potentially encounter. However, this does not mean that your website or app
+will be perfectly accessible when you're finished. You'll find the most success by
+designing your website or app with accessibility throughout the process, and
+incorporating these tests with your other pre-launch testing.
+
+{% Assessment 'at' %}
diff --git a/src/site/content/en/learn/accessibility/test-automated/automated.assess.yml b/src/site/content/en/learn/accessibility/test-automated/automated.assess.yml
new file mode 100644
index 00000000000..d087df444c7
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-automated/automated.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of automated accessibility testing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: What kind of testing should you do to ensure that your site is accessible?
+    options:
+      - content: "Automated testing"
+        rationale: "You can quickly find some accessibility errors with automated testing tools, such as Lighthouse."
+      - content: "Manual testing"
+        rationale: "Some accessibility testing must be done manually, as AI has not yet learned every aspect of accessibility."
+      - content: "User testing"
+        rationale: "The best way to know if disabled users can use your product is to talk and test with disabled people. Not all people experience their disability in the same way, so we encourage you to have a diverse population of testers."
+      - content: "Assistive technology testing"
+        rationale: "If you have a lot of experience with AT, you may be able to address any of these issues in manual testing. For most developers, separate AT testing is critical to ensuring AT users can use your website or app with their chosen AT."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3,4"
+    stem: What errors are caught in automated testing?
+    options:
+      - content: "ARIA errors"
+        rationale: "Incorrect ARIA usage is often caught in automated testing. This is not related to the copy itself, just the usage of the attributes."
+      - content: "Inclusive language"
+        rationale: "While it's possible to build a linter which catches certain words, context is important for inclusive language. Some instances may be missed."
+      - content: "Descriptive form labels"
+        rationale: "Automated testing can determine if form labels exist but not if the form labels are properly descriptive."
+      - content: "Missing alt text"
+        rationale: "Automated testing can catch if there is no alt text."
+      - content: "Color contrast issues"
+        rationale: "Automated testing is one of the best ways to catch color contrast errors. Colors may not look problemantic but still fail testing."
diff --git a/src/site/content/en/learn/accessibility/test-automated/index.md b/src/site/content/en/learn/accessibility/test-automated/index.md
new file mode 100644
index 00000000000..085838f125b
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-automated/index.md
@@ -0,0 +1,504 @@
+---
+title: 'Automated accessibility testing'
+authors:
+  - cariefisher
+description: How to perform automated accessibility testing.
+date: 2023-01-12
+tags:
+  - accessibility
+---
+
+So far in this course, you have learned about the individual, business, and
+legal aspects of digital accessibility, and the basics of digital accessibility
+conformance. You have explored specific topics related to inclusive design and
+coding, including when to use ARIA versus HTML, how to measure color contrast,
+when JavaScript is essential, amongst other topics.
+
+In the remaining modules, we shift gears from designing and building to testing
+for accessibility. We'll utilize a three-step testing process that includes
+automated, manual, and assistive technology testing tools and techniques. We'll
+use the same demo throughout these testing modules to progress the web page from
+inaccessible to accessible.
+
+Each test—automated, manual, and assistive tech—is critical to achieving the
+most accessible product possible.
+
+Our tests rely on the Web Content Accessibility Guidelines (WCAG) 2.1
+[conformance level A and AA](https://www.w3.org/TR/WCAG21/#cc1) as our
+standards. Remember that your industry, product type, local/country laws and
+policies, or overall accessibility goals will dictate which guidelines to
+follow and levels to meet. If you don't require a specific standard for your
+project, the recommendation is to follow the latest version of WCAG.
+Refer back to "[How is digital accessibility measured?](/learn/accessibility/measure/)"
+for general information on accessibility audits, conformance types/levels,
+[WCAG](/learn/accessibility/glossary/#wcag), and
+[POUR](/learn/accessibility/glossary/#pour).
+
+As you now know, accessibility conformance is _not_ the full story when it
+comes to supporting people with disabilities. But, it's a good starting point
+as it provides a metric you can test against. We encourage you to take
+additional actions outside of accessibility conformance testing, such as
+running usability tests with people with disabilities, hiring people with
+disabilities to work on your team, or consulting an individual or company with
+digital accessibility expertise to help you build more inclusive products.
+
+## Automated testing basics
+
+Automated accessibility testing uses software to scan your digital product for
+accessibility issues against pre-defined accessibility conformance standards.
+
+Pros of automated accessibility tests:
+
+* Easy to repeat tests at different stages of the product lifecycle
+* Just a few steps to run and very quick results
+* Little accessibility knowledge is required to run the tests or understand the results
+
+Cons of automated accessibility tests:
+
+* Automated tools don't catch all of the accessibility errors in your product
+* Reported false positives (an issue is reported that isn't a true WCAG violation)
+* Multiple tools may be needed for different product types and roles
+
+Automated testing is a great first step to check your website or app for
+accessibility, but not all checks can be automated. We'll go into more detail
+on how to check the accessibility of elements that cannot be automated in the
+[manual accessibility testing](/learn/accessibility/test-manual/) module.
+
+## Types of automated tools
+
+One of the first online automated accessibility testing tools was developed in
+1996 by the Center for Applied Special Technology (CAST), called
+"[The Bobby Report](https://jimthatcher.com/bobbyeval.htm)." Today, there are
+[over 100 automated testing tools](https://www.w3.org/WAI/ER/tools/) to choose
+from!
+
+Automated tool implementation varies from accessibility browser extensions to
+code linters, desktop and mobile applications, online dashboards, and even
+open-source APIs you can use to build your own automated tooling.
+
+Which automated tool you decide to use can depend on many factors, including:
+
+* Which conformance standards and levels are you testing against? This may
+  include WCAG 2.1, WCAG 2.0, [U.S. Section 508](https://www.section508.gov/), or a modified list of accessibility rules.
+* What type of digital product are you testing? This could be a website, web
+  app, native mobile app, PDF, kiosk, or other product.
+* What part of the software development life cycle are you testing your product?
+* How much time does it take to set up and use the tool? For an individual,
+  team, or company?
+* Who is conducting the test: designers, developers, QA, etc.?
+* How often do you want the accessibility to be checked? What details should be
+  included in the report? Should issues be directly linked to a ticketing
+  system?
+* Which tools work best in your environment? For your team?
+
+There are many additional factors to consider as well. Check out WAI's article
+on "[Selecting Web Accessibility Evaluation Tools](https://www.w3.org/WAI/test-evaluate/tools/selecting/)"
+for more information on how to select the best tool for you and your team.
+
+## Demo: Automated test
+
+For the automated accessibility testing demo, we'll be using Chrome's
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).
+Lighthouse is an open-source, automated tool created to improve the quality of
+web pages through different types of audits, such as performance, SEO, and
+accessibility.
+
+Our demo is a website built for a made-up organization, the Medical Mysteries
+Club. This site is intentionally made inaccessible for the demo. Some of this
+inaccessibility may be visible to you, and some (but not all) will be caught in
+our automated test.
+
+### Step 1
+
+Using your Chrome browser, install the
+[Lighthouse extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk).
+
+There are [many ways to integrate Lighthouse](https://github.com/GoogleChrome/lighthouse)
+into your testing workflow. We'll use the Chrome extension for this demo.
+
+### Step 2
+
+<figure class="screenshot" data-float="right">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/amnpKDgfwnlIa02HYMU1.png", alt="Medical Mystery Club website, outside of the iframe.", width="400", height="283" %}
+</figure>
+
+We have built a [demo in CodePen](https://codepen.io/web-dot-dev/pen/yLqOaEP).
+View it in [debug mode](https://cdpn.io/pen/debug/yLqOaEP) to proceed with the
+next tests. This is important, as it removes the `<iframe>` which surrounds the
+demo web page, which may interfere with some testing tools. Learn more about
+[CodePen's debug mode](https://blog.codepen.io/documentation/debug-view/#getting-to-debug-view-3).
+
+### Step 3
+
+[Open Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) and
+navigate to the Lighthouse tab. Uncheck all of the category options except for
+"Accessibility." Keep the mode as the default and choose the device type you're
+running the tests on.
+
+<figure class="screenshot">
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/yv8fIyUnFaW0yPGJgohj.png",
+    alt="Medical Mystery Club website, with the Lighthouse report DevTools panel open.", width="800", height="421"
+  %}
+</figure>
+
+### Step 4
+
+Click the "Analyze page load" button and give Lighthouse time to run its tests.
+
+Once the tests are complete, Lighthouse displays a score that measures how
+accessible the product you're testing is. The
+[Lighthouse score](https://developer.chrome.com/docs/lighthouse/accessibility/scoring)
+is calculated by the number of issues, issue types, and the impact on users of
+the issues detected.
+
+Beyond a score, the Lighthouse report includes detailed information about what
+issues it has detected and links to resources to learn more about remedying
+them. The report also includes tests that are passed or not applicable and a
+list of additional items to check manually.
+
+{% Aside %}
+
+The automated Lighthouse tests were run in December 2022. Due to changes in the
+codebase, browsers, assistive technology, accessibility standards, and/or
+rulesets, your test results may vary.
+
+{% endAside %}
+
+<figure class="screenshot">
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/5SUhDMXiDYw43kt5ss3J.png",
+    alt="The Medical Mysteries Club website received a 62 for the Lighthouse score in our December 2022 test.", width="800", height="421"
+  %}
+</figure>
+
+### Step 5
+
+Now, let's go through an example of each automated accessibility issue
+discovered and fix the relevant styles and markup.
+
+#### Issue 1: ARIA roles {: #aria-roles}
+
+The first issue states: "Elements with an ARIA [role] that require children to
+contain a specific [role] are missing some or all of those required children.
+Some ARIA parent roles must contain specific child roles to perform their
+intended accessibility functions."
+[Learn more about ARIA role rules](https://dequeuniversity.com/rules/axe/4.4/aria-required-children).
+
+In our demo, the newsletter subscribe button fails:
+
+```html
+<button role="list" type="submit" tabindex="1">Subscribe</button>
+```
+
+<span class="solution" id="issue-1-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+The "subscribe" button next to the input field has an incorrect ARIA role
+applied to it. In this case, the role can be removed completely.
+
+```html
+<button type="submit" tabindex="1">Subscribe</button>
+```
+
+#### Issue 2: ARIA hidden {: #aria-hidden}
+
+`"[aria-hidden="true"]` elements contain focusable descendants. Focusable
+descendants within an `[aria-hidden="true"]` element prevent those interactive
+elements from being available to users of assistive technologies like screen
+readers. [Learn more about `aria-hidden` rules](https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus).
+
+```html
+<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
+```
+
+<span class="solution" id="issue-2-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+The input field had an `aria-hidden="true"` attribute applied to it. Adding
+this attribute hides the element (and everything nested under it) from
+assistive tech.
+
+```html
+<input type="email" placeholder="Enter your e-mail address" tabindex="-1" required>
+```
+
+In this case, you should remove this attribute from the input to allow people
+using assistive technology to access and enter information into the form field.
+
+#### Issue 3: Button name {: #button-name}
+
+Buttons do not have an accessible name. When a button doesn't have an
+accessible name, screen readers announce it as "button," making it unusable for
+users who rely on screen readers.
+[Learn more about button name rules](https://dequeuniversity.com/rules/axe/4.4/button-name).
+
+```html
+<button role="list" type="submit" tabindex="1">Subscribe</button>
+```
+
+<span class="solution" id="issue-3-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+When you remove the inaccurate ARIA role from the button element in
+[issue 1](#aria-roles), the word "Subscribe" becomes the accessible button
+name. This functionality is built into the semantic HTML button element. There
+are additional pattern options to consider for more complex situations.
+
+```html
+<button type="submit" tabindex="1">Subscribe</button>
+```
+
+#### Issue 4: Image alt attributes {: #image-alt-attributes}
+
+Image elements are missing `[alt]` attributes. Informative elements should aim
+for short, descriptive alternate text. Decorative elements can be ignored with
+an empty alt attribute. [Learn more about image alternative text
+rules](https://dequeuniversity.com/rules/axe/4.4/image-alt).
+
+```html
+<a href="index.html">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/….png">
+</a>
+```
+
+<span class="solution" id="issue-4-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+Since the logo image is also a link, you know from the
+[image module](/learn/accessibility/images/) that it is called an actionable
+image and requires alternative text information about the purpose of the image.
+Normally, the first image on the page is a logo, so you can reasonably assume
+your AT users will know this, and you may decide not to add this additional
+contextual information to your image description.
+
+```html
+<a href="index.html">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/….png"
+    alt="Go to the home page.">
+</a>
+```
+
+#### Issue 5: Link text {: #link-text}
+
+Links do not have a discernible name. Link text (and alternate text for images,
+when used as links) that is discernible, unique, and focusable improves the
+navigation experience for screen reader users.
+[Learn more about link text rules](https://dequeuniversity.com/rules/axe/4.4/link-name).
+
+```html
+<a href="#!"><svg><path>...</path></svg></a>
+```
+
+<span class="solution" id="issue-5-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+All of the actionable images on the page must include information about where
+the link will send users. One method to remedy this issue is to add alternative
+text to the image about the purpose, as you did on the logo image in the
+example above. This works great for an image using a `<img>` tag, but `<svg>`
+tags cannot use this method.
+
+For the social media icons, which use `<svg>` tags, you can use a
+[different alternative description pattern](https://codepen.io/web-dot-dev/pen/poZyEZd)
+targeting SVGs, add the information between the `<a>` and `<svg>` tags and then
+hide it visually from users, add a supported ARIA, or other options. Depending
+on your environment and code restrictions, one method might be preferable over
+another. Let's use the simplest pattern option with the most assistive
+technology coverage, which is adding a `role="img"` to the `<svg>` tag and
+including a `<title>` element.
+
+```html
+<a href="#!">
+  <svg role="img">
+    <title>Connect on our Twitter page.</title>
+    <path>...</path>
+  </svg>
+</a>
+```
+
+#### Issue 6: Color contrast {: #color-contrast }
+
+Background and foreground colors don't have a sufficient contrast ratio.
+Low-contrast text is difficult or impossible for many users to read.
+[Learn more about color contrast rules](https://dequeuniversity.com/rules/axe/4.4/color-contrast).
+
+Two examples were reported.
+
+<div class="switcher">
+  <figure class="screenshot">
+    <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/3Aeg1osulNGB1EVtGu8r.png" alt="View full size screenshot.">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/3Aeg1osulNGB1EVtGu8r.png", alt="Lighthouse score for reported club name. The teal value contrast ratio is too low.", width="320", height="228" %}
+  </a>
+
+  <figcaption>
+   The club name, <code><div class="club-name">Medical Mysteries Club</div></code> , has a color hex value of <code>#01aa9d</code> and the background hex value is <code>#ffffff</code>. The color contrast ratio is 2.9:1.
+
+   <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/3Aeg1osulNGB1EVtGu8r.png">View full size screenshot</a>.
+  </figcaption>
+  </figure>
+  
+  <figure class="screenshot">
+    <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/86Iongt2UcohbzEar4Pm.png" alt="View full size screenshot.">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/86Iongt2UcohbzEar4Pm.png", alt="Lighthouse score for mermaid syndrome copy. The grey value contrast ratio is too low.", width="320", height="228" %}
+    </a>
+    <figcaption>
+      <code><b>Mermaid syndrome</b></code> has a text hex value of <code>#7c7c7c</code>, while the background's hex color is <code>#ffffff</code>. The color contrast ratio is 4.2:1.
+      
+      <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/86Iongt2UcohbzEar4Pm.png">View full size screenshot</a>.
+    </figcaption>
+  </figure>
+</div>
+
+<span class="solution" id="issue-6-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+There are many color contrast issues detected on the web page. As you learned in
+the [color and contrast](/learn/accessibility/color-contrast/) module,
+regular-sized text (less than 18pt / 24px) has a color contrast requirement of
+4.5:1, while large-sized text (at least 18pt / 24px or 14pt / 18.5px bold) and
+essential icons must meet the 3:1 requirement.
+
+For the page title, the teal-colored text needs to meet the 3:1 color contrast
+requirement since it is large-sized text at 24px. However, the teal buttons are
+considered regular-sized text at 16px bold, so they must meet the 4.5:1 color
+contrast requirement.
+
+In this case, we could find a teal color that was dark enough to meet 4.5:1, or
+we could increase the size of the button text to 18.5px bold and change the
+teal color value slightly. Either method will stay in line with the design
+aesthetics.
+
+All the gray text on the white background also fails for color contrast, except
+for the two largest headings on the page. This text must be darkened to meet
+the 4.5:1 color contrast requirements.
+
+<div class="switcher">
+  <figure class="screenshot">
+    <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/2JyEvvfRBNFr7YdPipLf.png" alt="View full size screenshot.">
+      {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/2JyEvvfRBNFr7YdPipLf.png", alt="The teal has been fixed and no longer fails.", width="320", height="228" %}
+  </a>
+  <figcaption>
+    The club name, <code><div class="club-name">Medical Mysteries Club</div></code> , has been given a color value of <code>#008576</code> and the background remains <code>#ffffff</code>. The updated color contrast ratio is 4.5:1.
+    
+    <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/2JyEvvfRBNFr7YdPipLf.png">View full size screenshot</a>.
+  </figcaption>
+  </figure>
+  <figure class="screenshot">
+    <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/3DgVWG6oIRRVTGYmZP3c.png" alt="View full size screenshot.">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/3DgVWG6oIRRVTGYmZP3c.png", alt="The grey has been fixed and no longer fails.", width="320", height="228" %}
+    </a>
+    
+    <figcaption>
+      <code><b>Mermaid syndrome</b></code> now has a color value of <code>#767676</code> and the background remains <code>#ffffff</code>. The color contrast ratio is 4.5:1.
+      
+      <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/3DgVWG6oIRRVTGYmZP3c.png">View full size screenshot</a>.
+    </figcaption>
+  </figure>
+</div>
+
+#### Issue #7 - list structure  {: #list-structure }
+
+List items (`<li>`) are not contained within `<ul>` or `<ol>` parent elements.
+Screen readers require list items (`<li>`) to be contained within a parent
+`<ul>` or `<ol>` to be announced properly.
+
+[Learn more about list rules](https://dequeuniversity.com/rules/axe/4.4/listitem).
+
+```html
+<div class="ul">
+  <li><a href="#">About</a></li>
+  <li><a href="#">Community</a></li>
+  <li><a href="#">Donate</a></li>
+  <li><a href="#">Q&A</a></li>
+  <li><a href="#">Subscribe</a></li>
+</div>
+```
+
+<span class="solution" id="issue-7-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+We used a CSS class in this demo to simulate the unordered list instead of
+using a `<ul>` tag. When we wrote this code improperly, we removed the inherent
+semantic HTML features built into this tag. By replacing the class with a real
+`<ul>` tag and modifying the related CSS, we resolve this accessibility issue.
+
+```html
+<ul>
+  <li><a href="#">About</a></li>
+  <li><a href="#">Community</a></li>
+  <li><a href="#">Donate</a></li>
+  <li><a href="#">Q&A</a></li>
+  <li><a href="#">Subscribe</a></li>
+</ul>
+```
+
+#### Issue #8 - tabindex  {: #tabindex }
+
+Some elements have a [tabindex] value greater than 0. A value greater than 0
+implies an explicit navigation ordering. Although technically valid, this often
+creates frustrating experiences for users who rely on assistive technologies.
+[Learn more about tabindex rules](https://dequeuniversity.com/rules/axe/4.4/tabindex).
+
+```html
+<button type="submit" tabindex="1">Subscribe</button>
+```
+
+<span class="solution" id="issue-8-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+Unless there is a specific reason to disrupt the natural tabbing order on a web
+page, there is no need to have a positive integer on a tabindex attribute. To
+keep the natural tabbing order, we can either change the tabindex to `0` or
+remove the attribute altogether.
+
+```html
+<button type="submit">Subscribe</button>
+```
+
+### Step 6
+
+Now that you've fixed all the automated accessibility issues, open up a new
+debug mode page. Run the Lighthouse accessibility audit again. Your score
+should be much better than on the first run.
+
+<figure class="screenshot">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/gcjuv10swXP62s1oT37d.png", alt="The lighthouse score is now 100, which means you addressed all Lighthouse issues.", width="800", height="421"
+%}
+</figure>
+
+We've applied all of these automated accessibility updates to a new
+[CodePen](https://codepen.io/web-dot-dev/pen/PoBZgrW).
+
+## Next step
+
+Great job. You have accomplished a lot already, but we haven't finished yet! Next,
+we'll move on to manual checks, as detailed in the
+[manual accessibility testing](/learn/accessibility/test-manual/) module.
+
+{% Assessment 'automated' %}
diff --git a/src/site/content/en/learn/accessibility/test-manual/index.md b/src/site/content/en/learn/accessibility/test-manual/index.md
new file mode 100644
index 00000000000..0efe5f90e61
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-manual/index.md
@@ -0,0 +1,382 @@
+---
+title: 'Manual accessibility testing'
+authors:
+  - cariefisher
+description: How to manually test for accessibility.
+date: 2023-01-12
+tags:
+  - accessibility
+---
+
+{% Aside %}
+This module on manual accessibility testing is a continuation of the previous
+module, [automated accessibility testing](/learn/accessibility/test-automated/).
+If you have not yet completed the exercises in that module, we encourage you
+to do so. This module starts where the previous one left off, focusing on
+manual accessibility testing tools and techniques.
+{% endAside %}
+
+## Manual testing basics
+
+Manual accessibility testing uses keyboard, visual, and cognitive tests, tools,
+and techniques to find issues that automated tooling cannot. As automated
+tooling does not cover all of the success criteria identified in WCAG, it's
+_vital_ that you do not run automated accessibility tests and then stop testing!
+
+As technology advances, [more tests could be covered by automated tooling alone](https://a11y-automation.dev/violations), but today, both manual and assistive technology checks need to be added to your testing protocols to cover all of the applicable WCAG checkpoints.
+
+{% Aside %}
+Each automated testing tool can have distinct accessibility rulesets and use them in different ways. The actual percentage of WCAG checkpoints covered will vary by tool and the content being tested.
+{% endAside %}
+
+Pros of manual accessibility tests:
+
+* Reasonably straightforward and quick to run
+* Catch a higher percentage of issues than automated tests alone
+* Little tooling and expertise needed for success
+
+Cons of manual accessibility tests:
+
+* More complex and time-consuming than automated tests
+* May be difficult to repeat at scale
+* Require more accessibility expertise to run tests and interpret the results
+
+Let's compare what accessibility elements and details can currently be detected
+by an automated tool, versus those that won't be detected.
+
+<div class="table-wrapper scrollbar">
+  <table data-alignment="top" >
+    <thead>
+      <tr>
+        <th>Can be automated</th>
+        <th>Can't be automated</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Color contrast of text on solid backgrounds</td>
+        <td><a href="/learn/accessibility/color-contrast">Color contrast</a> of text on gradients/images</td>
+      </tr>
+      <tr>
+        <td>Image alternative text exists</td>
+        <td><a href="/learn/accessibility/images">Image alternative text is accurate and is properly assigned</td>
+      </tr>
+      <tr>
+        <td>Headings, lists, and landmarks exist</td>
+        <td><a href="/learn/accessibility/structure">Headings, lists, and landmarks</a> are correctly marked-up and all elements are accounted for</td>
+      </tr>
+      <tr>
+        <td>ARIA is present</td>
+        <td><a href="/learn/accessibility/aria-html/">ARIA</a> is being used appropriately and applied to the correct element(s)</td>
+      </tr>
+      <tr>
+        <td>Identifying keyboard-focusable elements</td>
+        <td>Which elements are missing <a href="/learn/accessibility/focus/">keyboard focus</a>, the focus order makes logical sense, and the focus indicator is visible</td>
+      </tr>
+      <tr>
+        <td>iFrame title detection</td>
+        <td><a href="learn/accessibility/more-html/">iFrame</a>, the focus order makes logical sense, and the focus indicator is visible </td>
+      </tr>
+      <tr>
+        <td>Video element is present</td>
+        <td>Video element has appropriate <a href="/learn/accessibility/motion/">alternative media</a> present (such as captions and transcripts)</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<br>
+
+## Types of manual tests
+
+There are many manual tools and techniques to consider when looking at your
+web page or app for digital accessibility. The three biggest focus areas in
+manual testing are keyboard functionality, visually-focused reviews, and
+general content checks.
+
+We will cover each of these topics at a high level in this module, but the
+following tests are not meant to be an exhaustive list of all the manual tests
+you can or should run. We encourage you to start with a
+[manual accessibility checklist](https://www.ibm.com/able/toolkit/verify/manual)
+from a reputable source and develop your own focused manual testing checklist
+for your specific digital product and team needs.
+
+{% Aside %}
+Some organizations consider assistive technology (AT) checks to be part of the
+manual testing process as there are a lot of overlaps. In this course, we break
+AT testing into a separate module, as it's more advanced than other manual tests
+and deserves a deeper and separate focus.
+{% endAside %}
+
+### Keyboard checks
+
+It's estimated that about 25% of all digital accessibility issues are related
+to a lack of keyboard support. As we learned in the [keyboard focus](/learn/accessibility/focus) module, this affects all types of users, including sighted keyboard-only users, low-vision/blind screen reader users, and people using voice recognition software that uses technology that relies on content being keyboard accessible as well.
+
+Keyboard tests answer questions such as:
+
+* Does the web page or feature require a mouse to function?
+* Is the tabbing order logical and intuitive?
+* Is the keyboard focus indicator always visible?
+* Can you get stuck in an element that shouldn't trap focus?
+* Can you navigate behind or around an element that should be trapping focus?
+* When closing an element that received focus, did the focus indicator return to a logical place?
+
+While the impact of keyboard functionality is huge, the testing procedure is quite simple. All you need to do is set aside your mouse or install a [small JavaScript package](https://github.com/marcysutton/no-mouse-days) and test your website using only your keyboard. The following commands are essential for keyboard testing.
+
+<div class="table-wrapper scrollbar">
+  <table data-alignment="top" >
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Result</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Tab</td>
+        <td>Moves forward one active element to another</td>
+      </tr>
+      <tr>
+        <td>Shift + Tab</td>
+        <td>Moves backward one active element to another</td>
+      </tr>
+      <tr>
+        <td>Arrows</td>
+        <td>Cycle through related controls</td>
+      </tr>
+      <tr>
+        <td>Spacebar</td>
+        <td>Toggles states and moves down the page</td>
+      </tr>
+      <tr>
+        <td>Shift + Spacebar</td>
+        <td>Moves up the page</td>
+      </tr>
+      <tr>
+        <td>Enter</td>
+        <td>Triggers specific controls</td>
+      </tr>
+      <tr>
+        <td>Escape</td>
+        <td>Dismisses dynamically displayed objects</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Visual checks
+
+Visual checks focus on visual elements of the page and utilize tools such as screen magnification or browser zoom to review the website or app for accessibility.
+
+Visual checks can tell you:
+
+* Are there color contrast issues that an automated tool could not pick up, such as text on top of a gradient or image?
+* Are there any elements that look like headings, lists, and other structural elements but are not coded as such?
+* Are navigation links and form inputs consistent throughout the website or app?
+* Is there any flashing, strobing, or animation that exceeds the recommendations?
+* Does the content have proper spacing? For letters, words, lines, and paragraphs?
+* Can you see all the content using a screen magnifier or browser zoom?
+
+{% Aside %}
+Sometimes, you can't observe the accessibility of a visual element without additional help. You'll read more about that in our next module on [assistive technology testing](/learn/accessibility/test-assistive-technology).
+{% endAside %}
+
+### Content checks
+
+Unlike visual tests that focus on layouts, movement, and colors, content checks focus on the words on the page. Not only should you be looking at the copy itself, but you should review the context to be sure it makes sense to others.
+
+Content checks answer questions such as:
+
+* Are page titles, headings, and form labels clear and descriptive?
+* Are image alternatives concise, accurate, and useful?
+* Is color alone used as the only way of conveying meaning or information?
+* Are links descriptive or do you use generic text such as “read more” or “click here?”
+* Are there any changes to the language within a page?
+* Is [plain language](https://www.w3.org/WAI/GL/WCAG3/2021/how-tos/clear-words/) being used and are all acronyms spelled out when first referenced?
+
+Some content checks can be automated, in part. For example, you could write a JavaScript linter that checks for "Click here" and suggests you make a change. However, these custom solutions often still need a human to change the copy to something contextual.
+
+## Demo: Manual test
+
+So far, we have run automated tests on our demo web page and found and remediated eight different issue types. We are now ready to run manual checks to see if we can discover even more accessibility issues.
+
+### Step 1
+
+Our updated [CodePen demo](https://codepen.io/web-dot-dev/pen/NWBaMzb) has all
+of the automated accessibility updates applied.
+
+View it in [debug mode](https://cdpn.io/pen/debug/NWBaMzb) to proceed with the
+next tests. This is important, as it removes the `<iframe>` which surrounds the
+demo web page, which may interfere with some testing tools. Learn more about
+[CodePen's debug mode](https://blog.codepen.io/documentation/debug-view/#getting-to-debug-view-3).
+
+### Step 2
+
+Start your manual testing process by setting your mouse or trackpad aside and navigate up and down the DOM using only your keyboard.
+
+#### Issue 1: Visible focus indicator {: #visible-focus-indicator}
+
+You should see the first keyboard issue right away—or rather, you shouldn't see it—as the visible focus indicator has been removed. When you scan the CSS in the demo, you should find the dreaded “outline: none” added to the codebase.
+
+```css
+  :focus {
+    outline: none;
+  }
+```
+
+<span class="solution" id="issue-1-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+As you learned in the [Keyboard focus module](/learn/accessibility/focus/#focus-indicator), you need to remove this line of code to allow web browsers to add a visible focus for users. You can go one step further and create a focus indicator styled to meet the aesthetics of your digital product.
+
+```css
+:focus {
+  outline: 3px dotted #008576;
+}
+```
+
+#### Issue 2: Focus order {: #focus-order}
+
+Once you have modified the focus indicator and it's visible, be sure to tab
+through the page. As you do so, you should notice that the form input field
+used to subscribe to the newsletter does not receive focus. It has been removed
+from the natural focus order by a negative tabindex.
+
+```html
+<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
+```
+
+<span class="solution" id="issue-2-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+Since we would like people to use this field to sign-up for our newsletter, all we need to do is remove the negative tabindex or set it to zero to allow the input to become keyboard focusable again.
+
+```html
+<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
+```
+
+### Step 3
+
+Once keyboard focus has been checked, we move on to visual and content checks.
+
+#### Issue 3: Link color contrast {: #link-color-contrast}
+
+As you went through the keyboard tests by tabbing up and down the demo page,
+you probably noticed the keyboard focused on three visually hidden links in the
+paragraphs about the different medical conditions.
+
+For our page to be accessible, links must stand out from the surrounding text
+and include a non-color style change on mouse hover and keyboard focus.
+
+<span class="solution" id="issue-3-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+A quick solution is to add an underline to the links inside the paragraphs to make them stand out. This would solve the accessibility issue, but it might not suit the overall design aesthetics you hope to achieve.
+
+If you choose not to add an underline, you will need to modify the colors in such a way as to meet the requirements for both the background and copy.
+
+When looking at the demo using a [link contrast checker tool](https://webaim.org/resources/linkcontrastchecker), you will see that the link color meets the 4.5:1 color contrast requirement between regular-sized text and the background. However, non-underlined links must also meet a 3:1 color contrast requirement against the surrounding text.
+
+One option is to change the link color to match the other elements on the page. But if you change the link color to green, the body copy must also be modified to meet the overall color contrast requirements between all three elements: links, background, and surrounding text.
+
+<div class="switcher">
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/DaRljFteyjHtmNuui4u1.png", alt="Screenshot of WebAIM for link text shows that the link to body text fails WCAG A level.", width="724", height="503" %}
+<figcaption>
+  When the link and body text is the same, the test fails.
+</figcaption>
+</figure>
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/YWk49YgsMcwT8ynusu7b.png", alt="Screenshot of WebAIM shows that all tests pass when the link color is green.", width="724", height="503" %}
+<figcaption>
+  When the link and body text is different, the test passes.
+</figcaption>
+</figure>
+</div>
+
+#### Issue 4: Icon color contrast {: #icon-color-contrast}
+
+Another missed color contrast issue is the social media icons. In the [color and contrast](/learn/accessibility/color-contrast/#calculate-color-contrast) module, you learned that essential icons need to meet a 3:1 color contrast against the background. However, in the demo, the social media icons have a contrast ratio of 1.3:1.
+
+<span class="solution" id="issue-4-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+To meet the 3:1 color contrast requirements, the social media icons are changed to a darker gray.
+
+<figure class="screenshot">
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/E02bbVtKS9QCkQi8PvCc.png", alt="A screenshot of the demo with the color analyzer showing failing icon color contrast.", width="800", height="570"
+  %}
+</figure>
+
+{% Aside %}
+
+You may notice that the border around the text input doesn't meet the 3:1 color contrast requirement against the background. However, this input has placeholder text which meets the required color contrast requirements for its size, according to the [non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) overview page.
+
+{% endAside %}
+
+#### Issue 5: Content layout {: #content-layout}
+
+If you look at the layout of the paragraph content, the text is fully
+justified. As you learned in the
+[Typography module](/learn/accessibility/typography/#structure-and-layout),
+this creates "rivers of space," which may make the text difficult for some
+users to read.
+
+```css
+p.bullet {
+   text-align: justify;
+}
+```
+
+<span class="solution" id="issue-5-solution" style="display:block;font-weight:strong; margin-top: var(--flow-space, 1em);">
+  <figure data-float="left">
+    {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/dNzbda0Lx1XUeCadVLMH.svg", alt="", width="28", height="28"%}
+  </figure> <strong>Let's fix it.</strong>
+</span>
+
+To reset the text alignment in the demo, you can update the code to
+`text-align: left;` or remove that line entirely from the CSS, as left is the
+default alignment for browsers. Be sure to test the code, in case other
+inherited styles remove the default text alignment.
+
+```css
+p.bullet {
+   text-align: left;
+}
+```
+
+### Step 4
+
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/9O3rKmEIy3u1gqn3HfYT.png", alt="Screenshot of the Medical Mysteries Club demo site.", width="800", height="570" %}
+<figcaption>
+  All manual issues have now been addressed in the demo, as shown in this image.
+</figcaption>
+</figure>
+
+Once you've identified and fixed all the manual accessibility issues outlined in the previous steps, your page should look similar to our screenshot.
+
+It's possible that you'll find more accessibility issues in your manual checks than we covered in this module. We'll discover many of these issues in the next module.
+
+## Next step
+
+Way to go! You have completed the automated and manual testing modules.
+You can view our [updated CodePen](https://codepen.io/web-dot-dev/pen/eYjZdve),
+which has all the automated and manual accessibility fixes applied.
+
+Now, head over to the last testing module focused on
+[assistive technology testing](/learn/accessibility/test-assistive-technology/).
+
+{% Assessment 'manual' %}
diff --git a/src/site/content/en/learn/accessibility/test-manual/manual.assess.yml b/src/site/content/en/learn/accessibility/test-manual/manual.assess.yml
new file mode 100644
index 00000000000..91461614887
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/test-manual/manual.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of manual accessibility testing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: What elements need to meet WCAG color contrast standards?
+    options:
+      - content: "Icons"
+        rationale: "Icons need to meet color contrast standards, but they're not the only option."
+      - content: "Headings"
+        rationale: "Headings need to meet color contrast standards, but they're not the only option."
+      - content: "Body text"
+        rationale: "Body text needs to meet color contrast standards, but that's not the only option."
+      - content: "All of the above"
+        rationale: "Every element should meet contrast standards written by WCAG."
diff --git a/src/site/content/en/learn/accessibility/typography/index.md b/src/site/content/en/learn/accessibility/typography/index.md
new file mode 100644
index 00000000000..5d111ce1a13
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/typography/index.md
@@ -0,0 +1,205 @@
+---
+title: 'Typography'
+authors:
+  - cariefisher
+description: >
+  Pick the right typefaces, font sizes, and structure your copy with
+  an accessible layout.
+date: 2022-09-30
+tags:
+  - accessibility
+---
+
+Creating and designing accessible content is more than just choosing an
+easy-to-read font. Even with accessible font families, people with low vision,
+cognitive, language, and learning disabilities may struggle to process the text
+due to other elements such as font variations, size, spacing, and kerning—to
+name a few. This module will look into basic design considerations to make
+your content more inclusive and reach even more people.
+
+{% Aside %}
+To learn specific implementation of typography, check out the
+[Learn CSS Typography module](/learn/design/typography/).
+{% endAside %}
+
+## Typeface
+
+A major factor that can strongly impact copy accessibility is the typeface. Your choice of typeface and styling can make or break any page design.
+
+People with reading, learning, and attention disorders like dyslexia and attention-deficit hyperactivity disorder (ADHD), as well as people with low vision, can all benefit when you use accessible typefaces. 
+
+Choose common typefaces
+The quickest way to create an accessible design is to choose a common typeface (for example, Arial, Times New Roman, Calibri, Verdana, and many others).
+
+Many [typeface studies](http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf) testing people with disabilities show that common typefaces lead to faster reading speeds and a deeper comprehension level when compared to uncommon typefaces. While these common typefaces are not inherently more accessible than other typefaces, some people with disabilities have an easier time reading them because they have had a lot of experience working with (or around) these typefaces. 
+
+In addition to choosing a common typeface, be sure to avoid ornate or handwritten typefaces, as well as ones with only one character case available (for example, only uppercase characters). These specialty typefaces with cursive designs, quirky shapes, or artistic features like thin lines may look nice, but they are much harder for some people with disabilities to read than common typefaces. 
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'ExLvWOV',
+ height: 350,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+### Letter characteristics and kerning
+
+The research on whether [serif or sans serif typefaces are easier to
+read](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4612630/) is inconclusive,
+but certain numbers, letters, or combinations can confuse
+[people with language-based learning and cognitive disabilities](https://www.ncld.org/news/newsroom/the-state-of-ld-understanding-the-1-in-5/).
+For people with these types of disabilities, every letter and number must be
+clearly defined and have unique characteristics, so letters are not confused
+with a numbers. 
+
+Common readability offenders are the uppercase "I" (India), lowercase "l"
+(lettuce), and the number "1". Likewise, letter pairs like b/d, p/q, f/t, i/j,
+m/w, and n/u can sometimes flip either left-right or up-down for some readers.
+
+The copy's readability also decreases when the letter spacing or kerning is too
+tight. Pay special attention to kerning, especially between the problematic
+letter pair r/n. Otherwise, words like "yarn" could change to "yam" or "stern"
+to "stem," entirely changing the meaning of the copy. 
+
+Open source typeface collections like [Google Fonts](https://fonts.google.com) can
+aid you in selecting the most inclusive typeface for your next design.
+If you use Adobe products, you can embed accessible font families from foundry
+partners directly into your designs&mdash;this includes select
+[Google Fonts](https://fonts.adobe.com/foundries/google).
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'BaxdWvV',
+ height: 350,
+ theme: 'auto',
+ tab: 'css,result'
+} %}
+
+When you are looking for your next typeface, pay particular attention to the following:
+
+* Use common fonts whenever possible.
+* Avoid using elaborate or handwritten fonts and those with only one character case.
+* Pick a typeface with unique characteristics—paying special attention to the uppercase I, lowercase l, and 1.
+* Review certain letter combinations to be sure they are not an exact mirror image of one another.
+* Check the kerning, especially between the r/n letter pair.
+
+### Font size and typographic styling
+
+People often assume that picking out an accessible font family is all there is to creating inclusive content, but it is also important to consider the [font size](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) and how the text is styled on a page. 
+
+For example, people with low vision or color blindness may be unable to read some of the copy if it is too small, using an AT—like browser zoom—to read the copy. While other users, such as those with dyslexia or reading disorders, may have trouble reading italic text. Screen readers often ignore styling methods, such as bold and italics, so the intent of these styles is not conveyed to blind or low-vision users.
+
+<div class="switcher">
+{% Compare 'worse' %}
+```text
+h2 {font-size: 16px;}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```text
+h2 {font-size: 1rem;}
+```
+{% endCompare %}
+</div>
+
+Since you cannot predict what every user's needs are, when adding fonts to your digital products, be sure to consider the following guidelines:
+
+* Base font sizes should be defined with a relative value (%, rem, or em) to
+  allow easy resizing.
+* Limit the number of typeface variations like color, **bold**, ALL CAPS, and
+  _italics_ to increase readability. Instead, use methods to emphasize words in
+  your copy, such as asterisks, dashes, or highlighting an individual word. 
+* Use markup instead of text on images whenever possible. Screen readers cannot
+  read embedded text on images (without extra code added), and embedded text
+  can also become pixelated when magnified by low-vision users.
+
+## Structure and layout 
+
+While typeface, font size, and typographic styling are important to accessible
+typography, the
+[structure](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+and [layout](https://www.w3.org/WAI/WCAG21/Understanding/reflow) of copy on a
+page can be equally important to a user's understanding.
+
+Complex layouts can be a real barrier for people with low vision, reading
+disabilities, and the [6.1 million people in the US with ADHD](https://www.cdc.gov/ncbddd/adhd/data.html).
+These types of disabilities make it more difficult for people to keep their 
+place and follow the flow of the copy due to the lack of clear linear pathways,
+missing headings, and ungrouped elements. 
+
+An important aspect of accessible layout designs is making critical elements
+distinct from one another and grouping similar elements together. If the
+elements are too close, it can be difficult to tell where one element begins
+and ends, especially if they have similar styling.
+
+Think about your copy as a collection of individual bullet points on an
+outline. This will help you plan out the overall page structure and enable you
+to use headings, subheadings, and lists whenever appropriate. 
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'poVreqB',
+ height: 450,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+### Spacing
+
+[Paragraph, sentence, and word spacing](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html) is also important as it helps readers retain their focus on the copy and adds to the page's overall visual understanding. Long lines of copy can be a barrier for readers with disabilities, as they have trouble keeping their place and following the flow of the copy. A narrow block of copy makes it easier for readers to continue to the next line. 
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'ExLvWrP',
+ height: 350,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+### Content alignment
+
+Another frustration for many people with disabilities is reading justified
+copy. The uneven spacing between words in justified copy can cause "rivers of
+space" to form down the page, making the copy difficult to read.
+
+Text justification can also cause words to be either bunched together or
+stretched in unnatural ways, so readers can find it difficult to locate word
+boundaries. 
+
+{% Codepen {
+ user: 'web-dev-codepen-external',
+ id: 'OJZjpdE',
+ height: 350,
+ theme: 'auto',
+ tab: 'result'
+} %}
+
+Thankfully, there are clear guidelines on spacing and tools such as [Good Line-Height](http://thegoodlineheight.com) and the [Golden Ratio Calculator](https://grtcalculator.com/) to help make our copy more accessible. Incorporating these guidelines helps people with attention-deficit disorders, reading, and vision-based disabilities focus more on the copy and less on the layout.
+
+### Best practices for structure and layout
+
+When considering structure and layout, be sure to:
+
+* Use elements like headings, subheadings, lists, numbers, quote blocks, and
+  other visual groupings to break the page into sections.
+* Use clearly defined paragraphs, sentences, and word spacing.
+* Build columns of copy that do not exceed 80 characters in width (40
+  characters for logograms).
+* Avoid justified paragraph alignment, which creates "rivers of space" within
+  the copy. 
+
+## Accessible typography takeaways 
+
+Accessible typography can be boiled down to common-sense design choices based
+on your knowledge of your users' needs. Keeping this module in mind as you
+design and build out your content will go a long way toward helping you
+communicate clearly with the greatest number of people.
+
+{% Aside %}
+Refer to the [Typography module for Learn CSS](/learn/design/typography/) to
+learn how to implement certain rules and styles.
+{% endAside %}
+
+{% Assessment 'typography' %}
diff --git a/src/site/content/en/learn/accessibility/typography/typography.assess.yml b/src/site/content/en/learn/accessibility/typography/typography.assess.yml
new file mode 100644
index 00000000000..fad4ad9f13e
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/typography/typography.assess.yml
@@ -0,0 +1,23 @@
+setLeader: Test your knowledge of measuring accessibility
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: For readable copy, I should always use high-contrast between my copy and background.
+    options:
+      - content: "True."
+        rationale: "While high-contrast can be valuable for some people with visual impairments, others may suffer from disabilities which make high-contrast content difficult to read."
+      - content: "False."
+        rationale: "Some people with disabilities won't be able to read your content if there is too high of a contrast. If you can, allow the user's operating system settings to determine the contrast."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1"
+    stem: What fonts are the best for accessibility?
+    options:
+      - content: "System fonts like Arial and Verdana."
+        rationale: "Common typefaces lead to faster reading speeds and a deeper comprehension level when compared to uncommon typefaces."
+      - content: "Accessible typefaces."
+        rationale: "Accessible typeface collections like the Google Foundry on Adobe Fonts can aid you in selecting the most inclusive typeface for your next design."
+      - content: "It doesn't matter."
+        rationale: "You can have an impact on readability with your font selection. Avoid elaborate scripts and art fonts."
diff --git a/src/site/content/en/learn/accessibility/video-audio/index.md b/src/site/content/en/learn/accessibility/video-audio/index.md
new file mode 100644
index 00000000000..70f85683999
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/video-audio/index.md
@@ -0,0 +1,232 @@
+---
+title: 'Video and audio'
+authors:
+  - cariefisher
+description: >
+  Alternative media types which make your video and audio accessible.
+date: 2022-10-31
+tags:
+  - accessibility
+---
+
+Have you ever wanted to watch a live event but couldn't find your headphones,
+so you turned on the captions? Or maybe you didn't quite catch the last few
+talking points from your favorite podcast, so you decided to read the
+transcript instead? If so, you probably understand the importance and
+convenience of having alternative ways to access audio and video content. 
+
+While your role at your company or organization may not require you to create
+audio and video content directly, it's important to know the basics of
+[accessibility requirements for media](https://www.w3.org/WAI/WCAG21/Understanding/time-based-media).
+This knowledge will help you design and build the appropriate layouts and
+features to accommodate users with different environmental and sensory needs,
+such as the millions of people with hearing loss or visual impairment
+worldwide.
+
+## Alternative media types
+
+Alternative media types were developed to support the media needs of people
+with disabilities. This gives people additional formats to choose from when
+accessing audio and video content.
+
+The [alternative media types you must include](https://www.w3.org/WAI/media/av/planning/#wcag-standard)
+with your media files depend on:
+
+* The type of media you are supporting&mdash;audio-only, video-only, or video
+  with audio (multimedia) formats
+* Whether the media is live or pre-recorded
+* The version and level of WCAG compliance you are targeting
+* Any additional media-related user needs
+
+To create [accessible audio and video content](https://www.w3.org/WAI/media/av/)
+for websites and apps, there are four main types of alternative media types:
+[captions](#captions), [transcripts](#transcripts),
+[audio descriptions](#audio-descriptions), and
+[sign language interpretation](#sign-language-interpretation).
+
+## Captions
+
+One of the most widely used alternative media types are
+[captions](https://www.w3.org/WAI/media/av/captions/). Captions are written
+text synchronized with multimedia content for people who can't hear or
+understand spoken words. They are presented in the same language as the main
+audio track and include important non-speech information, such as sound
+effects, background noises, and essential music. 
+
+Captions benefit people who are deaf, hard of hearing, or have cognitive
+disabilities, but are useful to many other people as well.
+
+Captions come in two forms&mdash;open or closed. 
+
+* Closed captions (CC) are text on top of a video that can be turned on or off
+  by the viewer and, depending on the media player, styled in a way that fits
+  the user's needs.
+* Open captions (OC) are text burned into the video and cannot be turned off or
+  styled differently. 
+
+One method might be preferable, depending on the situation or how the
+multimedia will be consumed.
+
+People often confuse captions with subtitles, but they aren't synonymous. Both
+are text synchronized with multimedia content, often appearing at the bottom of
+the media. Captions can be thought of as a transcription of dialogue and other
+essential sounds for people with disabilities. Subtitles are visual text for
+people who can hear the audio track but may not understand what was said, such
+as when watching a foreign language film.
+
+{% Aside %}
+There are some geographical differences in what are considered captions and
+subtitles, so be sure to check the terminology in your location.
+{% endAside %}
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Features</th>
+        <th>Subtitles</th>
+        <th>Closed captions</th>
+        <th>Open captions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Visual text matches audio track</td>
+        <td>No</td>
+        <td>Yes</td>
+        <td>Yes</td>
+      </tr>
+      <tr>
+        <td>Includes essential background sounds</td>
+        <td>No</td>
+        <td>Yes</td>
+        <td>Yes</td>
+      </tr>
+      <tr>
+        <td>Ability to toggle on/off</td>
+        <td>Yes</td>
+        <td>Yes</td>
+        <td>No</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>
+{% YouTube "pXc_w49fsmI" %}
+<figcaption>
+  Check out an example of captions in this video, <em>Google &mdash; A CODA Story</em>. Toggle the CC button to <strong>On</strong> to see the closed captions on this video.
+</figcaption>
+</figure>
+
+{% Details %}
+{% DetailsSummary %}
+Compare screenshots from this video, with and without captions.
+{% endDetailsSummary %}
+<div class="switcher">
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/5gUlKnnfGwqP3SrG2oJa.png", alt="Video with captions.", width="800", height="450" %}
+</figure>
+<figure class="screenshot">
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/bfDTwxctgjbPpxqtLwsV.png", alt="Video without captions.", width="800", height="450" %}
+</figure>
+</div>
+{% endDetails %}
+
+## Transcripts
+
+Close cousins to captions,
+[transcripts](https://www.w3.org/WAI/media/av/transcripts/) are detailed,
+text-based documents that capture all essential words, sounds, and important
+visual information in your media. Transcripts primarily help people who are
+hard of hearing or deaf, and descriptive transcripts help people who are
+deafblind. 
+
+Transcripts are also useful for people with cognitive disabilities or for people
+who want to review the content at their own speed.
+
+While transcripts are typically more detailed than captions, they are very
+similar in format and purpose. They are so similar that many people first add
+captions to their media, export them, and then use them as the foundation of
+their transcripts. Repurposing your captions to build your transcripts saves
+time versus creating everything from scratch.
+
+Search bots can't access your captions but can crawl your text transcripts.
+When you include transcripts with your media files, your search engine
+optimization gets a boost. It's one of those rare exceptions when
+duplicate content isn't confusing to users or penalized by search engine
+algorithms.
+
+Every media player handles transcripts in a different way. Some providers may
+not have that functionality built into their media player, and even when they
+do, some users may not be able to access the transcript interface. You can
+ensure you've made your transcript available to all users by:
+
+* Including the transcript text directly in-context, on the page with the
+  embedded video.
+* Adding a link to an accessible PDF containing the transcript.
+* Linking out to the copy on another page.
+* Including a link to the transcript, wherever it lives, within the video
+  description on whatever media player platform you've used (such as YouTube or
+  Vimeo).
+
+For example, visit YouTube to watch [_Password Problems? | There's no place like Chrome_](https://www.youtube.com/watch?v=SlGuvC5nnTA) and review an example of a transcript.
+
+<figure>
+{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/s1EjKIhORUdo3094N3Sq.png", alt="Video on YouTube with Transcript in the right panel. The steps to access the transcript are highlighted in blue.", width="800", height="459" %}
+<figcaption>
+  Under the video title, click <span aria-label="More actions"><strong>...</strong></span> and select <strong>Show transcript</strong> from the dropdown menu. The transcripts will show up to the right or bottom of the video, depending on your screen size.
+</figcaption>
+</figure>
+
+## Audio descriptions
+
+Another alternative media used to support people with disabilities is
+[audio description](https://www.w3.org/WAI/media/av/description/). This type
+of alternative media utilizes a narrator to explain important visual
+information to people who can't see the visual content. These descriptions
+include nonverbal information such as facial expressions, unspoken actions, and
+the background environment in video-only and multimedia content.
+
+Sometimes audio descriptions need to be very detailed due to the large amount
+of information that needs to be shared with the viewer. If there aren't enough
+natural pauses in the video for audio descriptions, extended audio descriptions
+are used. In extended audio descriptions, a video will pause to give a narrator
+enough time to convey all the information in the media before playing the rest
+of the video.
+
+Audio descriptions and extended audio descriptions help people who are blind or
+have low vision, but could help people with some cognitive disorders as well.
+
+<figure>
+{% YouTube "fNq5jWyEeWo" %}
+<figcaption>
+  Here's an example of an illustrated video with an audio description, titled <em><code>[Audio Described]</code> Get started with Lookout from Google | Android</em>.
+</figcaption>
+</figure>
+
+## Sign language interpretation
+
+Another major alternative media type you may encounter is [sign language
+interpretation](https://www.w3.org/WAI/media/av/sign-languages/), where
+an interpreter narrates the auditory portion of the audio-only or multimedia
+content using sign language. This is very important for many people who are
+deaf, as sign language is their first and most fluent language. 
+
+Sign language interpretation is often more expressive and detailed than written
+documents, providing a much richer experience than captions or transcripts
+alone.
+
+That said, sign language interpretation can be time-consuming and
+cost-prohibitive to many organizations. And even if you have the time and
+budget to add sign language interpretation to your media, there are
+[over 300 different sign languages](https://en.wikipedia.org/wiki/List_of_sign_languages)
+worldwide. Adding one sign language interpretation to your media wouldn't be
+enough to support a global audience.
+
+<figure>
+{% YouTube "MbHuSHGZf5U", startTime="34" %}
+<figcaption>
+  See how sign language interpreters narrated the story of Google sustainability in the video <em>Google Presents: Search On '22</em>.
+</figcaption>
+</figure>
diff --git a/src/site/content/en/learn/accessibility/why/index.md b/src/site/content/en/learn/accessibility/why/index.md
new file mode 100644
index 00000000000..4ad2e915f37
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/why/index.md
@@ -0,0 +1,412 @@
+---
+title: What is digital accessibility, and why does it matter?
+description: >
+  Design and build websites and web apps so that disabled people can
+  interact in a meaningful and equivalent way. Read about the business
+  and legal impact of these choices.
+authors:
+  - cariefisher
+date: 2022-09-30
+updated: 2022-10-03
+---
+
+Imagine a world where you couldn't buy a present for a friend because the
+online shopping cart was incompatible with your device. Or a world where you
+had to ask a coworker to help you understand the recent sales chart because it
+only used soft monotone colors. Maybe you couldn't enjoy that new show
+everyone's been talking about because the captions are missing or badly
+automated.
+
+For some people, this world is an everyday reality. But it doesn't have to be
+this way—this is a reality you can help change when you make digital
+accessibility a priority. Digital accessibility, commonly abbreviated to
+[a11y](https://www.a11yproject.com/posts/a11y-and-other-numeronyms/), is about
+designing and building digital products so that, regardless of a person's
+disability, they can still interact with the product in a meaningful and
+equivalent way.
+
+Beyond the typical leadership buy-in, time, effort, and budget that are
+required of any project, building digital products with full inclusivity in
+mind also requires:
+
+* Expert knowledge of various accessibility standards
+* Understanding the fundamentals of accessible designs and code
+* Understanding the importance of using multiple testing techniques and tools
+
+Most importantly, true inclusivity can only come when you include people with
+disabilities and accessibility best practices into the full product
+lifecycle—from planning, to designing, to coding, and more.
+
+## What is the individual impact?
+
+The [World Health Organization](https://www.who.int/teams/noncommunicable-diseases/sensory-functions-disability-and-rehabilitation/world-report-on-disability)
+(WHO) estimates that over 15% of the world's population—or 1.3 billion
+people—self-identify as having a disability, making this group the largest
+minority group globally.
+
+More recent reports from the
+[Centers for Disease Control and Prevention (CDC)](https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html),
+the [US Census](https://www.census.gov/content/dam/Census/library/publications/2018/demo/p70-152.pdf),
+the [Academic Network of European Disability experts (ANED)](https://includ-ed.eu/sites/default/files/documents/aned_2013_task_6_-_comparative_data_synthesis_report_-_europe2020_final.pdf),
+and others estimate the total number of people with disabilities to be even
+greater. This number continues to grow as the world population ages and faces
+chronic health conditions.
+
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/wmi25b63ncEEhKTGYBUS.png",
+  alt="Six people representing various disabilities. Each character will be represented.",
+  width="800", height="200"
+%}
+
+Inaccessible digital products impact people with disabilities. Some types of
+disabilities are impacted more in the digital world than others.
+
+{% Aside %}
+To learn more about identity and language choices, we recommend reading
+[Demystifying Disability: What to Know, What to Say, and How to be an Ally](https://emilyladau.com/book/)
+by Emily Ladau.
+{% endAside %}
+
+{% Details  'open' %}
+
+{% DetailsSummary 'h3' %}
+Visual impairments
+{% endDetailsSummary %}
+
+[Visual impairment](https://www.disabled-world.com/disability/types/vision/)
+(vision impairment, vision disability) is a decreased ability to see to the
+degree that causes problems not fixable by usual means, such as glasses or
+medication. Visual impairment can be due to disease, trauma, or congenital or
+degenerative conditions.
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/9rl95PJGmH4j9z6PYCVD.png",
+  alt="A woman using a white cane.", width="240", height="300"
+  %}
+</figure>
+
+* _Examples_: B/blindness, low vision, color blindness
+* _Prevalence_: 253 million people with visual impairment worldwide—36 million
+  are blind, 217 million have moderate to severe visual impairment (MSVI)
+  ([Source](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5820628/)), and 1 in
+  12 men and 1 in 200 women are colorblind.
+  ([Source](https://www.colourblindawareness.org/colour-blindness/))
+* _Tools include_: Screen reader software, screen magnification tools, Braille output devices.
+* _Pain points_: Digital products that do not work with screen reader software,
+  mobile websites/apps without pinch to zoom, complex graphs and charts differentiated
+  by colors alone, color contrasts that make it difficult to read text on the screen
+
+{% Aside 'important' %}
+Use lowercase when referring to a vision-loss condition or to a blind person who prefers
+lowercase. Capitalize for those who capitalize Blind when describing themselves.
+{% endAside %}
+
+<blockquote>
+  <p>"My vision has deteriorated rapidly over the last three years, and my phone's default font size ranges from large to mega-large. There are a decent amount of mobile apps that I can barely use because of their absurd font sizes."</p>
+  <cite>Frank</cite>
+</blockquote>
+
+Read a short [article in the New York Times](https://www.nytimes.com/2022/08/16/opinion/blindness-retinitis-pigmentosa.html)
+or watch a [video](https://youtu.be/X04HKyW-3hc) on what it means to be
+legally blind.
+
+{% endDetails %}
+
+{% Details %}
+{% DetailsSummary 'h3' %}
+Mobility impairments
+{% endDetailsSummary %}
+
+[Mobility impairment](https://www.disabled-world.com/disability/types/mobility/)
+is a category of disability that includes people with various physical
+disabilities. This type of disability includes upper or lower limb loss or
+disability, manual dexterity, and disability in coordination with different
+organs of the body.
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/QJhp1Phv2QSOAVsj9Ce9.png",
+  alt="A man in a wheelchair, holding an open laptop.",
+  width="240", height="300"
+%}
+</figure>
+
+* _Examples_: Arthritis, paralysis, amputees, seizure disorders.
+* _Prevalence_: 1 in 7 people have mobility issues.
+  ([Source](https://www.cdc.gov/media/releases/2018/p0816-disability.html#:~:text=One%20in%204%20U.S.%20adults,affects%201%20in%207%20adults.))
+* _Tools include_: Adaptive switches, eye tracking devices, mouth/head sticks, speech input.
+* _Pain points_: Elements that are only designed to work with the use of a mouse.
+
+<blockquote>
+  <p>"Accessibility isn't just for people with disabilities. I had elbow surgery, and it temporarily changed how I managed my daily digital activities."</p>
+  <cite>Melissa</cite>
+</blockquote>
+
+{% endDetails %}
+
+{% Details %}
+
+{% DetailsSummary 'h3' %}
+Hearing impairments
+{% endDetailsSummary %}
+
+A [hearing impairment or hearing loss](https://www.disabled-world.com/disability/types/hearing/)
+is a full or partial decrease in the ability to detect or understand sounds.
+Hearing impairments are caused by a wide range of biological and environmental
+factors.
+
+<figure data-float="right">
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/1nUPylVp4y3mMe6ksPKq.png", alt="A man with a hearing aid.", width="183", height="320"
+    %}
+</figure>
+
+* _Examples_: D/deafness, hard of hearing (HoH), hearing impaired (HI)
+* _Prevalence_: Globally, over 1.5 billion people have a low to medium level of hearing loss, while it is estimated that 66 million people have a [significant level of hearing loss](https://www.who.int/health-topics/hearing-loss#tab=tab_1).
+* _Tools include_: hearing aids, captions, transcripts, sign language.
+* _Pain points_: Audio content without text transcripts, video with no synchronized captions
+
+{% Aside 'important' %}
+Use lowercase when referring to a hearing-loss condition or to a deaf person
+who prefers lowercase. Capitalize for those who identify as members of the Deaf
+community or when they capitalize Deaf when describing themselves.
+{% endAside %}
+
+<blockquote>
+  <p>"Some deaf people say auto-captions are NOT better than nothing. Some deaf people say automatic captions ARE better than nothing. Unlike people with hearing, deaf people have nothing to fall back on. All they have is the captions. Personally, I'd rather see no captions than watch automatic captions. Sure, I'm disappointed there aren't captions. With no auto-captions, I avoid the painful experience of its notoriously bad captions."</p>
+  <cite>Meryl</cite>
+</blockquote>
+
+{% endDetails %}
+
+{% Details %}
+{% DetailsSummary 'h3' %}
+Cognitive impairments
+{% endDetailsSummary %}
+
+A [cognitive disability](https://www.disabled-world.com/disability/types/cognitive/) covers
+a variety of medical conditions affecting cognitive ability. People with
+cognitive disabilities include various intellectual or cognitive deficits,
+deficits too mild to properly qualify as intellectual disability, specific
+conditions, and problems acquired later in life through acquired brain injuries
+or neurodegenerative diseases like dementia.
+
+<figure data-float="right">
+  {% Img
+    src="image/VbsHyyQopiec0718rMq2kTE1hke2/FFQbr519qx67nnEU9YKU.png",
+    alt="An older woman in glasses, holding an animal.", width="183", height="320"
+    %}
+</figure>
+
+* _Examples_: Down's syndrome, A/autism, ADHD, dyslexia, aphasia.
+* _Frequency_: Varies by condition.
+* _Tools include_: Screen readers, text highlighting, text prediction,
+  abstractive summarization tools.
+* _Pain points_: Busy interfaces that make it overly complicated to focus on
+  the task at hand, big walls of words with little whitespace, justified text,
+  and small or hard-to-read fonts.
+
+{% Aside 'important' %}
+Use lowercase when referring to autism as a disorder or to an autistic person
+who prefers lowercase. Capitalize for those who capitalize Autism or Autistic
+when describing themselves.
+{% endAside %}
+
+<blockquote>
+  <p>"Right now, I am recovering from an ocular migraine, and I would say dark mode is not helping enough. I still need contrast, but less harshly bright."</p>
+  <cite>Ruth</cite>
+</blockquote>
+
+Read a short
+[article in the New York Times](https://www.nytimes.com/2022/08/30/opinion/face-blindness-prosopagnosia.html)
+or watch a [video](https://youtu.be/3-MzNPcEh6M) on face blindness
+(prosopagnosia).
+
+{% endDetails %}
+
+{% Details %}
+{% DetailsSummary 'h3' %}
+Seizure and vestibular disorders
+{% endDetailsSummary %}
+
+A seizure is an excessive surge of electrical activity in the brain that can
+cause various symptoms, depending on which parts of the brain are involved.
+Seizures may result from genetics or a brain injury, but their
+[cause is often unknown](https://nyulangone.org/conditions/epilepsy-seizure-disorders-in-adults/types).
+
+The vestibular system includes the parts of the inner ear and brain that
+process the sensory information that controls balance and eye movements. If
+disease or injury damages these processing areas, vestibular disorders can
+result. [Vestibular disorders](https://vestibular.org/article/diagnosis-treatment/types-of-vestibular-disorders/)
+can also result from or be worsened by genetic or environmental conditions or
+occur for unknown reasons.
+
+<figure data-float="right">
+ {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/6jKwFBXkliZ0wtJgr8tj.png",
+  alt="A person in a green jacket with glasses.", width="183", height="320"
+ %}
+</figure>
+
+* _Examples_: Epilepsy, vertigo, dizziness, labyrinthitis, balance, and eye movement disorders.
+* _Frequency_: [50 million people worldwide have epilepsy](https://www.who.int/health-topics/epilepsy),
+  and 1.8 million adults worldwide have
+  [bilateral vestibular hypofunction](https://www.hopkinsmedicine.org/news/newsroom/news-releases/implant-improves-balance-movement-and-quality-of-life-for-people-with-inner-ear-disorder) (BVH).
+* _Tools include_: Operating system settings to reduce motion. In Windows, this
+  setting is framed positively as **Show animation**, and is turned off. On
+  Android, the setting **Remove animations** is turned on.
+* _Pain points_: Videos that autoplay, extreme flashing or strobing of visual
+  content, parallax effects, or scroll-triggered animations.
+
+<blockquote>
+  <p>"I <em>really</em> dislike the superfluous animation that plagues iOS transitions between apps, so I turn it off. Downside: I'm denied most of the thoughtfully executed motion design on the web because there's no “some motion is fine” middle ground."</p>
+  <cite>Oliver</cite>
+</blockquote>
+
+{% endDetails %}
+
+{% Details %}
+{% DetailsSummary 'h3' %}
+Speech impairments
+{% endDetailsSummary %}
+
+A [speech disorder](https://www.pennmedicine.org/for-patients-and-visitors/patient-information/conditions-treated-a-to-z/speech-and-language-disorders#:~:text=A%20speech%20disorder%20is%20a,Articulation%20disorders)
+is a condition in which a person has problems creating or forming the speech
+sounds needed to communicate with others.
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/uR06sT1scRQ8Qnt4hW6l.png", alt="A person wearing glasses and waving.", width="183", height="320"
+%}
+</figure>
+
+* _Examples_: Muscular or cognitive issues that impede speech, such as apraxia, dysarthria, or stuttering.
+* _Frequency_: 18.5 million individuals have a [speech, voice, or language disorder](https://www.nidcd.nih.gov/health/statistics/quick-statistics-voice-speech-language).
+* _Tools include_: Augmentative and alternative communication (AAC) and speech-generating devices.
+* _Pain points_: Voice-activated technology such as smart home devices and apps.
+
+<blockquote>
+  <p>"My son has a lisp due to dyspraxia.
+He will say "seep" rather than "sheep" or
+"fower" rather than "flower". It is sweet,
+but he gets so frustrated by voice-activated
+software.</p>
+<p>Our new car uses voice activation to
+interact with a phone. Often if we are
+together, my husband will send us a
+WhatsApp message. The car will read it
+out loud, but when it asks us if we want
+to reply, my son's reply is not understood.
+He gets so upset... he now whispers the
+message to me so I can say it for the
+reply."</p>
+  <cite>Helen</cite>
+</blockquote>
+
+Read a short [article in the New York
+Times](https://www.nytimes.com/2022/08/23/opinion/stutter-speech-listening.html)
+or watch a [video](https://youtu.be/m0E_wMIwfSI) on stuttering and technology.
+
+{% endDetails %}
+
+### Additional beneficiaries of accessibility
+
+While the number of people with disabilities worldwide is large, it's important
+to remember that these numbers aren't inclusive of everyone that benefits from
+accessible digital spaces. This includes:
+
+* _Temporarily disabled_. It may mean someone has a broken wrist or is
+  cognitively impaired due to medication.
+* _Situationally disabled_. For example, someone experiencing glare on a device
+  screen or being unable to play the audio on a video in a public setting.
+* _Mildly disabled_. A person needing eyeglasses to see a screen or captions to
+  understand audio.
+* _Non-native speakers_. If a person is not fluent in the language on the
+  screen, they may need more time to read content on a slide on a
+  carousel/slideshow.
+* _Older people with age-related diminishing senses_. It could be a person
+  needing reading glasses or bifocals to read small print or requiring a larger
+  target size for buttons on their touch device due to an age-related hand
+  tremor.
+* _Search engine optimization (SEO) bots_. SEO bots do not have senses like
+  sight and hearing and navigate by keyboard only. Your websites will be crawled more effectively when your site is accessible.
+
+## Business impact
+
+People with disabilities make up almost a fourth of the world's population, but
+did you know that they also have a lot of spending power?
+
+<figure data-float="right">
+{% Img
+  src="image/VbsHyyQopiec0718rMq2kTE1hke2/mPFzo0YRdCd8slPOjDgE.png",
+  alt="A collection of coins, representing the lost revenue when disabled communities are ignored.",
+  width="218", height="130"
+%}
+</figure>
+
+According to the
+[American Institutes for Research (AIR)](https://www.researchgate.net/profile/Dahlia-Shaewitz/publication/324603094_A_Hidden_Market_The_Purchasing_Power_of_Working-Age_Adults_With_Disabilities_A_Hidden_Market_The_Purchasing_Power_of_Working-Age_Adults_With_Disabilities/links/5ad89016458515c60f5918f3/A-Hidden-Market-The-Purchasing-Power-of-Working-Age-Adults-With-Disabilities-A-Hidden-Market-The-Purchasing-Power-of-Working-Age-Adults-With-Disabilities.pdf),
+the total after-tax disposable income for working-age Americans with
+disabilities is about $490 billion annually. This number is similar to other
+significant market segments in the US, such as the Black ($501 billion) and
+Latinx ($582 billion) communities. Companies that do not plan for, design, and
+build accessible products can lose out on this potential revenue.
+
+While these numbers are impressive, people with disabilities are also part of a
+larger network of family members, friends, communities, and institutions. This
+larger network often looks for and supports businesses that create accessible
+digital products. When you factor in the friends and family of the over 1.3
+billion people worldwide who identify as disabled, the disability market
+touches 53% of all consumers. It's the world's largest emerging market.
+
+In addition to money and market shares, businesses focused on disability
+inclusion as part of an overall diversity strategy are [higher performing and
+more innovative](https://www.w3.org/WAI/business-case/). There are many
+examples of [everyday products](https://incl.ca/the-evolution-of-assistive-technology-into-everyday-products/)
+that evolved from technology developed by, or for, people with disabilities,
+including: 
+
+* Telephones
+* Typewriters / keyboards
+* Email
+* Kitchen utensils
+* Easy-open pull-out drawers
+* Automatic door openers
+* Voice controls
+* Eye gaze technology
+
+When we look at accessibility as a design or coding challenge, not a begrudging
+requirement, innovation is the byproduct. For people without disabilities, such
+improvements can increase the overall user experience. For people with
+disabilities, these improvements are essential for equal access.
+
+## Legal impact
+
+Beyond the individual and business impact, you should also be aware of the
+looming [legal impact](https://f.hubspotusercontent30.net/hubfs/3280432/Remediated-2021-Year-End-Report-FINAL.pdf)
+of not building accessible digital products. Public sector entities in the
+United States, such as government-funded programs/schools, airlines, and
+nonprofits, must follow certain digital accessibility rules, while many private
+sector companies do not. In countries such as Canada, the United Kingdom,
+Japan, Australia, and the European Union, stricter
+[digital accessibility laws](https://www.w3.org/WAI/policies/) exist for both
+public and private companies.
+
+For many disabled people in the US, filing a lawsuit is their only option to
+bring awareness and change to digital products. It is estimated that in the US,
+over ten lawsuits are filed daily focused on digital accessibility. Many
+businesses have received multiple digital accessibility-based lawsuits. And
+every year, the number of total lawsuits has increased.
+
+E-commerce websites and apps are typically the biggest targets, comprising over
+74% of the lawsuits filed in 2021. If your company has both a physical location
+and an online presence, you are more likely to have been part of a lawsuit. In
+fact, of the top 500 e-commerce sites, 412 have been served with a lawsuit
+within the past four years. Often, the first lawsuit is for the company's
+website and the second for their mobile app.
+
+While avoiding lawsuits shouldn't be the only reason you focus on making sure
+your digital products are accessible, it is an important piece of the
+conversation.
+
+{% Assessment 'why' %}
diff --git a/src/site/content/en/learn/accessibility/why/why.assess.yml b/src/site/content/en/learn/accessibility/why/why.assess.yml
new file mode 100644
index 00000000000..9aaece53dad
--- /dev/null
+++ b/src/site/content/en/learn/accessibility/why/why.assess.yml
@@ -0,0 +1,36 @@
+setLeader: Test your knowledge of why a11y matters
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: How many people globally self-identify as disabled?
+    options:
+      - content: "1.3 billion"
+        rationale: "According to WHO, disability results from the interaction between individuals with a health condition, as well as personal and environmental factors."
+      - content: "3 billion"
+        rationale: "Not quite!"
+      - content: "10 million"
+        rationale: "Not quite!"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2"
+    stem: What tools are commonly used to help disabled people use the web?
+    options:
+      - content: "Screen readers"
+        rationale: "Screen readers allow people to relay information from a computer using speech or braille, with a Text-To-Speech engine."
+      - content: "Braille output devices"
+        rationale: "A Braille display is an electro-mechanical device which helps people with visual impairments read text output."
+      - content: "Operating system settings"
+        rationale: "A user with seizures or vestibular disorders may set preferences within their operating system to reduce motion."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2"
+    stem: What is an effective way to enact change on the web?
+    options:
+      - content: "Complain on Twitter."
+        rationale: "If you have a large following or you say the right thing at the right time, your tweet may pick up conversation and possibly lead to change. However, for many, Twitter is a way to talk about a problem but not make lasting changes."
+      - content: "File a lawsuit."
+        rationale: "This is an option available to people in countries with accessibility laws. Filing a lawsuit will bring the attention of a company's lawyers, who may decide it's worth the company's time to address the problem."
+      - content: "Contact a company's developers directly."
+        rationale: "If you see something, say something. If you encounter accessibility problems online and are able to contact the developers, through the platform directly or by other methods, it's possible you'll draw their attention to a problem they were otherwise unaware of and therefore may fix. The more evidence you can offer, the more likely the developers will understand the problem."
diff --git a/src/site/content/en/learn/css/animations/animations.assess.yml b/src/site/content/en/learn/css/animations/animations.assess.yml
new file mode 100644
index 00000000000..3a5c7d7e1ec
--- /dev/null
+++ b/src/site/content/en/learn/css/animations/animations.assess.yml
@@ -0,0 +1,49 @@
+setLeader: Test your knowledge of animations
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The **name or custom identifier** of a `@keyframes` animation is case sensitive?
+    options:
+      - content: "True"
+        rationale: "🎉"
+      - content: "False"
+        rationale: "CSS does not allow 2 animations to have the same name, but
+        it does allow `SWOOP` and `swoop` to coexist."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The keywords `from` and `to` are the same as
+    options:
+      - content: "`start` and `end`."
+        rationale: "Try again!"
+      - content: "`0%` and `100%`."
+        rationale: "`from` is the same as `0%` and `to` is the same as 100%."
+      - content: "`0` and `1`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: The `animation-timing-function` is also commonly known as
+    options:
+      - content: Dynamic timing
+        rationale: "Try again!"
+      - content: Delay
+        rationale: "Try again!"
+      - content: Easing
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the minimum number of keyframes required inside a `@keyframes` animation?
+    options:
+      - content: "1"
+        rationale: "The browser will take the current state of the element as a
+        keyframe, so at minimum, 1 keyframe is required."
+      - content: "2"
+        rationale: "Try again!"
+      - content: "3"
+        rationale: "Try again!"
+      - content: "4"
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/css/animations/index.md b/src/site/content/en/learn/css/animations/index.md
new file mode 100644
index 00000000000..9b426c74044
--- /dev/null
+++ b/src/site/content/en/learn/css/animations/index.md
@@ -0,0 +1,413 @@
+---
+title: Animations
+description: >
+  Animation is a great way to highlight interactive elements,
+  and add interest and fun to your designs.
+  In this module find out how to add and control animation effects with CSS.
+authors:
+  - andybell
+audio:
+  title: 'The CSS Podcast - 022: Animation'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCO022_TCP_CSS_Podcast_Episode_022_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+date: 2021-05-04
+---
+
+Sometimes you see little helpers on interfaces that when clicked,
+provide some helpful information about that particular section.
+These often have a pulsing animation to subtly let you know that the information is there
+and should be interacted with.
+How do you do this with CSS though?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRXGeJ',
+  height: 300
+} %}
+</figure>
+
+In CSS, you can make this type of animation using CSS animations,
+ which allow you to set an animation sequence, using keyframes.
+Animations can be simple, one state animations,
+or even complex, time-based sequences.
+
+## What is a keyframe?
+
+In animation software, CSS, and most other tools that enable you to animate something,
+keyframes are the mechanism that you use to assign animation states to timestamps,
+along a timeline.
+
+Let's use the "pulser" as a context for this.
+The entire animation runs for 1 second and runs over 2 states.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pWCGpgzJqJNTBluK5u8S.svg",
+alt="The states of the pulser animation over the 1 second timeframe",
+width="800",
+height="340" %}
+
+There's a specific point where each of these animation states start and end.
+You map these out on the timeline with keyframes.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/wmKVq5GFj7cf6jfuLiT8.svg",
+alt="The same diagram as before, but this time, with keyframes",
+width="800",
+height="440" %}
+
+### `@keyframes`
+{% BrowserCompat 'css.at-rules.keyframes' %}
+
+Now you know what a keyframe is,
+that knowledge should help you understand how the CSS
+[`@keyframes`](https://developer.mozilla.org/docs/Web/CSS/@keyframes) rule works.
+Here is a basic rule with two states.
+
+```css
+@keyframes my-animation {
+	from {
+		transform: translateY(20px);
+	}
+	to {
+		transform: translateY(0px);
+	}
+}
+```
+
+The first part to note is the
+[custom ident](https://developer.mozilla.org/docs/Web/CSS/custom-ident)
+(custom identifier)—or in more human terms, the name of the keyframes rule.
+This rule's identifier is `my-animation`.
+The custom identifier works like a function name. Which, as you learned in the [functions module](/learn/css/functions),
+lets you reference the keyframes rule elsewhere in your CSS code.
+
+{% Aside %}
+A `<custom-ident>` is used in various places in CSS,
+and allows you to provide your own name for things.
+These identifiers are case-sensitive,
+and in some cases there are words that you can't use.
+For example, when naming lines in CSS Grid, you can't use the word `span`.
+{% endAside %}
+
+Inside the keyframes rule, `from` and `to` are keywords that represent `0%` and `100%`,
+which are the start of the animation and end.
+You could re-create the same rule like this:
+
+```css
+@keyframes my-animation {
+	0% {
+		transform: translateY(20px);
+	}
+	100% {
+		transform: translateY(0px);
+	}
+}
+```
+
+You can add as many positions as you like along the timeframe.
+Using the context of the "pulser" example, there are 2 states,
+which translate to 2 keyframes.
+This means you have 2 positions inside your keyframes rule to represent the changes for each of these keyframes.
+
+```css
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0.4;
+  }
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRXGeJ',
+  tab: 'css,result',
+  height: 300
+} %}
+</figure>
+
+## The `animation` properties
+{% BrowserCompat 'css.properties.animation' %}
+
+To use your `@keyframes` in a CSS rule, define various animation properties _or_, use the
+[`animation`](https://developer.mozilla.org/docs/Web/CSS/animation) shorthand property.
+
+### `animation-duration`
+{% BrowserCompat 'css.properties.animation-duration' %}
+
+```css
+.my-element {
+	animation-duration: 10s;
+}
+```
+
+The [animation-duration](https://developer.mozilla.org/docs/Web/CSS/animation-duration)
+property defines how long the `@keyframes` timeline should be. It should be a time value.
+It defaults to 0 seconds, which means the animation still runs,
+but it'll be too quick for you to see.
+You can't add negative time values.
+
+### `animation-timing-function`
+{% BrowserCompat 'css.properties.animation-timing-function' %}
+
+To help recreate natural motion in animation,
+you can use timing functions that calculate the speed of an animation at each point.
+Calculated values are often *curved*,
+making the animation run at variable speeds over the course of `animation-duration`,
+and if a value is calculated beyond that of the value defined in `@keyframes`, make the element appear to bounce.
+
+
+There are several keywords available as presets in CSS, which are used as the value for
+[animation-timing-function](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function):
+`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`.
+
+```css
+.my-element {
+	animation-timing-function: ease-in-out;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNeJbL'
+} %}
+</figure>
+
+Values appear to curve with easing functions because easing is calculated using a **bézier curve**,
+which is used to model velocity.
+Each of the timing function keywords,
+such as `ease`, reference a pre-defined bézier curve.
+In CSS, you can define a bézier curve directly,
+using the `cubic-bezier()` function,
+which accepts four number values: `x1`, `y1`, `x2`, `y2`.
+
+```css
+.my-element {
+	animation-timing-function: cubic-bezier(.42, 0, .58, 1);
+}
+```
+
+These values plot each part of the curve along the X and Y axis.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/AZr17k5ejTYsikAPiwTm.svg",
+alt="A bézier on a progression vs time chart",
+width="800",
+height="499" %}
+
+Understanding bézier curves is complicated and visual tools,
+such as
+[this generator by Lea Verou](https://cubic-bezier.com/)
+are very helpful.
+
+#### The `steps` easing function
+
+Sometimes you might want more granular control of your animation,
+and instead of moving along a curve, you want to move in intervals instead.
+The `steps()` easing function lets you break the timeline into defined, **equal intervals**.
+
+```css
+.my-element {
+	animation-timing-function: steps(10, end);
+}
+```
+
+The first argument is how many steps.
+If steps are defined as 10 and there are 10 keyframes,
+each keyframe will play in sequence for the exact amount of time,
+with no transition between states.
+If there are not enough keyframes for the steps,
+steps between keyframes are added depending on the second argument.
+
+The second argument is the direction.
+If it's set to `end`, which is the default,
+the steps finish at the end of your timeline.
+If it is set to `start`, the first step of your animation completes as soon as it starts,
+which means it ends one step earlier than `end`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEpege'
+} %}
+</figure>
+
+### `animation-iteration-count`
+{% BrowserCompat 'css.properties.animation-iteration-count' %}
+
+```css
+.my-element {
+	animation-iteration-count: 10;
+}
+```
+
+The [animation-iteration-count](https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count)
+property defines how many times the `@keyframes` timeline should run.
+By default, this is 1,
+which means that when the animation reaches the end of your timeline,
+it will stop at the end.
+The number can't be a negative number.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNBEaYB',
+  tab: 'css,result'
+} %}
+</figure>
+
+You can use the `infinite` keyword which will loop your animation,
+which is how the "pulser" demo from the start of this lesson works.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRXGeJ',
+  tab: 'css,result'
+} %}
+</figure>
+
+### `animation-direction`
+{% BrowserCompat 'css.properties.animation-direction' %}
+
+```css
+.my-element {
+	animation-direction: reverse;
+}
+```
+
+You can set which direction the timeline runs over your keyframes with
+[animation-direction](https://developer.mozilla.org/docs/Web/CSS/animation-direction):
+
+- `normal`: the default value, which is forwards.
+- `reverse`: runs backwards over your timeline.
+- `alternate`: for each animation iteration, the timeline will run forwards or backwards in sequence.
+- `alternate-reverse`: the reverse of `alternate`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjWPqMv'
+} %}
+</figure>
+
+### `animation-delay`
+{% BrowserCompat 'css.properties.animation-delay' %}
+
+```css
+.my-element {
+	animation-delay: 5s;
+}
+```
+
+The [animation-delay](https://developer.mozilla.org/docs/Web/CSS/animation-delay)
+property defines how long to wait before starting the animation.
+Like the `animation-duration` property, this accepts a time value.
+
+Unlike the `animation-duration` property, you *can* define this as a negative value.
+If you set a negative value, the timeline in your `@keyframes` will start at that point.
+For example, if your animation is 10 seconds long and you set `animation-delay` to `-5s`, it will start from half-way along your timeline.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGqbyPw'
+} %}
+</figure>
+
+### `animation-play-state`
+{% BrowserCompat 'css.properties.animation-play-state' %}
+
+```css
+.my-element:hover {
+	animation-play-state: paused;
+}
+```
+
+The [animation-play-state](https://developer.mozilla.org/docs/Web/CSS/animation-play-state)
+property allows you to play and pause the animation.
+The default value is `running` and if you set it to `paused`, it will pause the animation.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJQZyV',
+  height: 400
+} %}
+</figure>
+
+### `animation-fill-mode`
+{% BrowserCompat 'css.properties.animation-fill-mode' %}
+
+The [animation-fill-mode](https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode)
+property defines which values in your `@keyframes` timeline persist before the animation starts or after it ends.
+The default value is `none` which means when the animation is complete, the values in your timeline are discarded.
+Other options are:
+
+- `forwards`: The last keyframe will persist, based on the animation direction.
+- `backwards`: The first keyframe will persist, based on the animation direction.
+- `both`: follows the rules for both `forwards` and `backwards`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNyBEVK'
+} %}
+</figure>
+
+### The `animation` shorthand
+
+Instead of defining all the properties separately,
+you can define them in an `animation` shorthand,
+which lets you define the animation properties in the following order:
+
+1. `animation-name`
+2. `animation-duration`
+3. `animation-timing-function`
+4. `animation-delay`
+5. `animation-iteration-count`
+6. `animation-direction`
+7. `animation-fill-mode`
+8. `animation-play-state`
+
+```css
+.my-element {
+	animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
+}
+```
+
+## Considerations when working with animation
+
+Users can define in their operating system that they prefer to reduce motion
+experienced when they interact with applications and websites.
+This preference can be detected using the
+[prefers-reduced-motion](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion)
+media query.
+
+```css
+@media (prefers-reduced-motion) {
+  .my-autoplaying-animation {
+    animation-play-state: paused;
+  }
+}
+```
+
+This isn't necessarily a preference of no animation,
+but rather, a preference to reduce animations—
+[especially unexpected ones](/prefers-reduced-motion/).
+You can learn more about this preference and overall performance with
+[this animation guide](/animations/).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGqbPwq'
+} %}
+</figure>
+
+{% Assessment 'animations' %}
diff --git a/src/site/content/en/learn/css/backgrounds/backgrounds.assess.yml b/src/site/content/en/learn/css/backgrounds/backgrounds.assess.yml
new file mode 100644
index 00000000000..bfa7b3875d4
--- /dev/null
+++ b/src/site/content/en/learn/css/backgrounds/backgrounds.assess.yml
@@ -0,0 +1,91 @@
+setLeader: Test your knowledge of CSS Backgrounds
+tabLabel: question
+height: unset
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Background images are positioned in the top-left of a CSS box.
+    options:
+      - content: "True"
+        rationale: |
+          Correct!
+      - content: "False"
+        rationale: |
+           Depending on its intrinsic size an image may appear to not be in positioned in the top left corner of a CSS box, `background-position` needs to be explicitly used to change the default position of a background image.
+
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Background images are not repeated by default.
+    options:
+      - content: "False"
+        rationale: |
+          `background-repeat: no-repeat` explicitly must be used to not repeat a background-image. Additionally `background-repeat: repeat-x` and `background-repeat: repeat-y` can be used to prevent repeating in the specific axis.
+      - content: "True"
+        rationale: |
+          Correct!
+
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2,3"
+    stem: Which of the following `background-position` declarations are valid?
+    options:
+      - content: '`background-position: 50% left`'
+        rationale: |
+          When CSS values are used with keywords, the order of the values matters.
+      - content: '`background-position: top right 33%`'
+        rationale: |
+          This positions a background image to the very top of a box and 33% from the right edge of the box.
+      - content: '`background-position: right bottom`'
+        rationale: |
+          This positions a background image to the very right and bottom of a box. Position of differing axes can be named in any order.
+      - content: '`background-position: left`'
+        rationale: |
+          This positions a background image to be at the very left of the box and centered vertically. When just one position of an axis is provided, the background image is centered in the opposite axis.
+
+  - type: think-and-check
+    stimulus: "![Demonstration of the use of CSS Clip](image/bMU6K5O6Yce7QrxAoaF3hsleaRM2/naRWTIMyG0eYo1LHwgSw.png)"
+    stem: What would be the steps to render a background like this against its content?
+    options:
+      - rationale: |
+          1. Use `background-clip: text`. [Check if the property is supported in the browsers you need to support](https://caniuse.com/background-clip-text).
+          1. Use `background-image: url(/texture.jpg)`.
+          1. Use `-webkit-text-fill-color: transparent` or semi-transparent for the background image to be seen within the text.
+
+
+  - type: multiple-choice
+    cardinarlity: "1"
+    correctAnswers: "2"
+    stem: "To set a background image to be fixed within a viewport you use:"
+    options:
+      - content: '`background-position: fixed`'
+        rationale: |
+          'This is an invalid value for the `background-position` property.'
+      - content: '`background-fixed-to-viewport: true`'
+        rationale: |
+          `background-fixed-to-viewport` doesn't exist in CSS yet.
+      - content: '`background-attachment: fixed`'
+        rationale: |
+          `background-attachment: fixed` explicitly sets the background image to be fixed within the current viewport.
+      - content:  '`background-attachment: scroll`'
+        rationale: |
+          '`background-attachment` is the property to use to set a background image to be fixed within a viewport; however `scroll` is the default value for the property that fixes the background image by default to the box unimpacted by the content within the box.'
+
+  - type: multiple-choice
+    cardinarlity: "1"
+    correctAnswers: "2"
+    stem: "The default background-origin of a background within a CSS box is:"
+    options:
+    - content: '`content-box`'
+      rationale: |
+        Valid value for `background-origin`, but isn't the default.
+    - content: '`border-box`'
+      rationale: |
+        Valid value for `background-origin`, and it's pre-arranged borders can be painted on top of backgrounds, but isn't the default.
+    - content: '`padding-box`'
+      rationale: |
+        The default value for `background-origin`. Allows the background to be rendered beyond the content and up to the border of a box.
+    - content: '`margin-box`'
+      rationale: |
+        While a recognized region of a CSS box, it is an invalid value for the `background-origin` property.
diff --git a/src/site/content/en/learn/css/backgrounds/index.md b/src/site/content/en/learn/css/backgrounds/index.md
new file mode 100644
index 00000000000..371cd9eff26
--- /dev/null
+++ b/src/site/content/en/learn/css/backgrounds/index.md
@@ -0,0 +1,492 @@
+---
+title: Backgrounds
+description: >
+  In this module learn the ways you can style backgrounds of boxes using CSS.
+audio:
+  title: 'The CSS Podcast - 053: Background'
+  src: https://traffic.libsyn.com/secure/thecsspodcast/TCP035_v2.mp3?dest-id=1891556
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - lozandier
+date: 2021-11-15
+---
+## Backgrounds
+
+Behind every CSS box is a specialized layer called the background layer. CSS provides a variety of ways to make meaningful changes to it–including allowing multiple backgrounds.
+
+Background layers are furthest from the user, rendered behind the contents of a box starting from its `padding-box` region. This enables the background layer to not overlap with borders at all.
+
+<figure>
+{% Codepen {
+  user: 'argyleink',
+  id: 'BaLedvd',
+  theme: 'dark',
+  height: 700,
+  tab: 'result'
+} %}
+</figure>
+
+## Background color
+
+{% BrowserCompat 'css.properties.background-color' %}
+
+One of the simplest effects you can apply to a background layer is setting the [color](/learn/css/color/). The initial value of `background-color` is `transparent`, which allows the contents of a parent to be visible. A valid color set on a background layer sits behind other things painted on that element.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRvqQZZ',
+  theme: 'dark',
+  height: 850,
+  tab: 'result'
+} %}
+</figure>
+
+## Background images
+
+{% BrowserCompat 'css.properties.background-image' %}
+
+On top of the `background-color` layer, you can add a background image, using the `background-image` property. A `background-image` accepts the following:
+
+* An image URL or [data URI](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) using the `url` CSS function.
+* An image dynamically created by a gradient CSS function.
+
+### Setting a background-image with the `url` CSS function
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjJNNro',
+  theme: 'dark',
+  height: 525,
+  tab: 'result'
+} %}
+</figure>
+
+### CSS gradient backgrounds
+
+Several [gradient](/learn/css/gradients) CSS functions exist to allow you to generate a background-image, when passed two or more colors.
+
+Regardless of which gradient function is used, the resulting image is [intrinsically sized](/learn/css/box-model/#content-and-sizing) to match the amount of space available.
+
+Demo showing example of applying a background-image using gradient functions:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNeLZWa',
+  theme: 'dark',
+  height: 600,
+  tab: 'result'
+} %}
+</figure>
+
+## Repeating background images
+
+{% BrowserCompat 'css.properties.background-repeat' %}
+
+By default, background images repeat horizontally and vertically to fill the entire space of the background layer.
+
+Change this by using the `background-repeat` property with one of the following values:
+
+* `repeat`: The image repeats within the space available, cropping as necessary.
+* `round`: The image repeats horizontally and vertically to fit as many instances into the space available, without cropping, compressing, or stretching it.
+* `space`: The image repeats horizontally and vertically to fit as many instances within the space available without cropping—spacing out instances of the image as needed. Repeating images touch the edges of the space a background layer occupies, with white space evenly distributed between them.
+
+The `background-repeat` property allows you to set the behavior for the x and y axis independently. The first parameter sets the horizontal repeat behavior, and the second parameter sets the vertical repeat behavior.
+
+If you use a single value, it will be applied to both the horizontal and vertical repeats.
+
+The shorthand also has convenient one-word options to make your intent clearer.
+
+The value `repeat-x` repeats an image only horizontally; this is equivalent to `repeat no-repeat`.
+
+The following demo demonstrates these capabilities of the `background-repeat` property:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKvMmjb',
+  theme: 'dark',
+  height: 1100,
+  tab: 'result'
+} %}
+</figure>
+
+## Background position
+
+{% BrowserCompat 'css.properties.background-position' %}
+
+You may have noticed when some images on the Web are styled with a `background-repeat: no-repeat` declaration, such images are displayed top left of their container.
+
+The initial position of background images is top left. The `background-position`  property allows you to change this behavior by offsetting the image position.
+
+As with `background-repeat`,  the `background-position` property allows you to position images along the x and y axis independently with two values by default.
+
+When CSS lengths and percentages are used, the first parameter corresponds to the horizontal axis while the second parameter corresponds to the vertical axis.
+
+When keywords are only used the order of the keywords does not matter:
+
+{% Compare 'better' %}
+
+```css
+background-position: left 50%;
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```css
+background-position: top left;
+```
+
+{% endCompare %}
+
+
+{% Compare 'better' %}
+
+```css
+background-position: left top;
+```
+
+{% CompareCaption %}
+
+Order does not matter for keywords associated with different axes of position.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+
+{% Compare 'worse' %}
+
+```css
+  background-position: 50% left;
+```
+
+{% CompareCaption %}
+
+When CSS values are used alongside keywords, the order matters. The first value represents the horizontal axis and the second the vertical axis.
+{% endCompareCaption %}
+
+{% endCompare%}
+
+{% Compare 'worse' %}
+
+```css
+  background-position: left right;
+```
+
+{% CompareCaption %}
+
+You cannot use keywords associated with the same axis simultaneously.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+
+The `background-position` property also has a convenient one value shorthand; the omitted value resolves to `50%`.  Here's an example that demonstrates this using the keywords the `background-position` property accepts:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzxWQqx',
+  theme: 'dark',
+  height: 950,
+  tab: 'result'
+} %}
+</figure>
+
+In addition to its default two parameter form and one parameter form; the `background-position` property also accepts up to four parameters;
+
+When three or four parameters are used, a CSS length or percentage must be preceded by the `top`, `left`, `right`, or `bottom` keywords in order for the browser to calculate which edge of the CSS box the offset should originate from.
+
+When three parameters are used, a CSS length or value can be the second or third parameter with the other two being keywords; the keyword it succeeds will be used to determine the edge the CSS length or value corresponds to being the offset of. The offset of the other keyword specified is set to 0.
+
+
+
+{% Compare 'better' %}
+
+```css
+background-position: bottom 88% right;
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```css
+background-position: right bottom 88%;
+```
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```css
+background-position: 88% bottom right;
+```
+
+{% CompareCaption %}
+CSS length value must be preceded by the `top`, `right`, `bottom`, or `left` keywords when using three or more parameters.
+{% endCompareCaption %}
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```css
+background-position: bottom 88% right 33%;
+```
+
+{% endCompare %}
+
+
+{% Compare 'better' %}
+
+```css
+background-position: right 33% bottom 88%;
+```
+
+{% endCompare %}
+
+
+{% Compare 'worse' %}
+
+```css
+background-position: 88% 33% bottom left;
+```
+
+{% CompareCaption%}
+CSS length value must be preceded by the `top`, `right`, `bottom`, or `left` keywords when using three or more parameters.
+{% endCompareCaption %}
+{% endCompare %}
+
+
+If `background-position: top left 20%`is applied to a CSS background image, the image is placed at the top of the box, the `20%` value represents a 20% offset from the left of the box (on the x axis).
+
+If `background-position: top 20% left` is applied to a CSS background image, the 20% value represents a 20% offset from the top of the CSS box (on the y axis), and the image is placed at the left of the box.
+
+When four parameters are used, the two keywords are paired with two values corresponding to an offset against the origins of each keyword specified. If `background-position: bottom 20% right 30%` is applied to a background-image, the background-image is positioned 20% from the bottom, and 30% from the right of the CSS box.
+
+The following demo demonstrates this behavior:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'porbwrM',
+  theme: 'dark',
+  tab: 'result'
+} %}
+</figure>
+
+Here are more examples of using the `background-position` property using a mix of CSS and keyword values:
+
+{% Aside %}
+To learn more about the nuances related to positioning backgrounds,
+check out [`background-position` on MDN](https://developer.mozilla.org/docs/Web/CSS/background-position).
+{% endAside %}
+
+## Background Size
+
+{% BrowserCompat 'css.properties.background-size' %}
+
+The `background-size` property sets the size of background images; By default background images are sized based on their intrinsic (actual) width, height, and aspect ratio.
+
+The `background-size` property uses CSS length and percentage values or specific keywords.  The property accepts up to two parameters corresponding to allowing you to change width and height of a background independently.
+
+The `background-size` property accepts the following keywords:
+
+* `auto`: When used independently, the background image is sized based on its intrinsic width and height; when `auto` is used alongside another CSS value for the width (first parameter) or height (second parameter), the dimension set to `auto` is sized as needed to maintain the natural aspect ratio of the image. This is the default behavior of the `background-size` property.
+* `cover`: Covers the entire area of the background layer. This may mean the image is stretched or cropped.
+* `contain`:  Sizes the image to fill the space  without stretching or cropping. As a result, empty space can remain that will cause the image to repeat, unless `background-repeat` is set to `no-repeat`.
+
+The latter 2 are intended to be used in a standalone fashion without another parameter.
+
+The following demo demonstrates these keywords in action:
+
+Demo demonstrating applying these keywords to `background-size`:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzxWQYY',
+  theme: 'dark',
+  height: 700,
+  tab: 'result'
+} %}
+</figure>
+
+## Background attachment
+
+{% BrowserCompat 'css.properties.background-attachment' %}
+
+The `background-attachment` property enables you to modify the fixed position behavior of background images (images part of a background layer) once the layer is visible on a screen.
+
+It accepts 3 keywords: `scroll`, `fixed`, and `local`.
+
+The default behavior of the `background-attachment` property is the initial value of `scroll`. When more space is needed, the images move with that space within the background layer determined by the bounds of the CSS box.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdwwzOe',
+  theme: 'dark',
+  height: 1000,
+  tab: 'result'
+} %}
+</figure>
+
+Using the value `fixed` fixes the position of background images to the viewport.
+
+Once the space of the background layer images originally takes up needs to be scrolled (or rendered) offscreen, images within the background layer stay fixed in the original position the background layer enabled them to be until the entire layer is scrolled off screen by the viewport.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWoozvN',
+  theme: 'dark',
+  height: 1000,
+  tab: 'result'
+} %}
+</figure>
+
+The `local` keyword enables the position of background images to be fixed relative to the element's contents. Background images now move along the space they occupy as that space renders inside and outside the bounds of the CSS box (usually due to scrolling, 2D, or 3D transformations).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNExZmK',
+  theme: 'dark',
+  height: 1000,
+  tab: 'result'
+} %}
+</figure>
+
+## Background origin
+
+{% BrowserCompat 'css.properties.background-origin' %}
+
+The `background-origin` property enables you to modify the area of backgrounds associated with a particular box. The values the property accepts correspond to the `border-box` , `padding-box`, and `content-box` regions of a box .
+
+Try these options out using the following demo:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExvyXeZ',
+  theme: 'dark',
+  height: 650,
+  tab: 'result'
+} %}
+</figure>
+
+## Background clip
+
+{% BrowserCompat 'css.properties.background-clip' %}
+
+The `background-clip` property controls what is visually seen from a background layer regardless of the bounds created by the `background-origin` property.
+
+Like `background-origin` the regions that can be specified are `border-box`, `padding-box`, and `content-box` corresponding to where a CSS background layer can be rendered. When these keywords are used, any rendering of the background further than the region specified will be cropped or clipped.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYJKZba',
+  theme: 'dark',
+  height: 650,
+  tab: 'result'
+} %}
+</figure>
+
+The `background-clip` property also accepts a `text` keyword that clips the background to be no further than the text within the content box.  For this effect to be evident in the actual text within a CSS box, the text must be partially or completely transparent.
+
+A relatively new property, at the time of this writing, Chrome and most browsers require the `-webkit-` prefix to use this property.
+
+{% BrowserCompat 'css.properties.background-clip' %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBjjweL',
+  theme: 'dark',
+  height: 650,
+  tab: 'result,css'
+} %}
+</figure>
+
+{% Aside 'gotchas' %}
+It should be also noted this property is not compatible with `background-clip: text` being simultaneously set on a CSS box.
+{% endAside %}
+
+
+## Multiple backgrounds
+
+As mentioned at the beginning of the module, the background layer allows multiple sublayers to be defined. For brevity, I'll refer to these sublayers as backgrounds.
+
+Multiple backgrounds are defined top to bottom; The first background is the closest to the user, while the last background is the furthest from the user.
+
+The only background defined or the last layer is designated the *final background layer* by the browser. Only this layer is allowed to assign a `background-color`.
+
+{% Aside %}
+With the unpredictability of the web in mind, a background-image may fail to load. Setting a background-color on the final layer ensures good contrast for text and so on if important background layers fail to load.
+{% endAside %}
+
+
+Multiple layers can be individually configured using most background-related CSS properties that are comma separated, as demonstrated in the code snippet and live demo below.
+
+```css
+background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
+    url("https://assets.codepen.io/7518/blob.svg"),
+    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
+  background-size: contain, cover, auto;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: 50% 50%, 10% 50%, 0% 0%;
+  background-origin: padding-box, border-box, content-box;
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyRzQBz',
+  theme: 'dark',
+  height: 650,
+  tab: 'css'
+} %}
+</figure>
+
+## The background shorthand
+
+To make it easier to style the background layer of a box-especially when multiple background layers are desired–there is a shorthand that follows the following specific pattern:
+
+```css
+background:
+  <background-image>
+  <background-position> / <background-size>?
+  <background-repeat>
+  <background-attachment>
+  <background-origin>
+  <background-clip>
+  <background-color>?
+```
+
+{% Aside 'gotchas' %}
+It's important to note that any background properties omitted in the shorthand are set to their initial values.
+{% endAside %}
+
+Order is important in the shorthand form of declaring multiple backgrounds. The position and size values must both be provided, separated by a slash (`/`). Declaring the origin and clip behavior in the correct order allows you take advantage of setting keywords that are valid for both simultaneously
+
+The following declaration clips the background, and originates it from the content box:
+
+```css
+background: url("https://assets.codepen.io/7518/blob.svg") 50%
+      50% / contain no-repeat content-box;
+```
+
+With these shorthand semantics in mind, the previous background-related declarations of the code snippet could be rewritten to be following:
+
+```css
+background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
+```
+
+{% Assessment 'backgrounds' %}
diff --git a/src/site/content/en/learn/css/blend-modes/blend-modes.assess.yml b/src/site/content/en/learn/css/blend-modes/blend-modes.assess.yml
new file mode 100644
index 00000000000..9b534a11a3e
--- /dev/null
+++ b/src/site/content/en/learn/css/blend-modes/blend-modes.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of blend-modes
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,4,5"
+    stem: Which of following are CSS blend modes?
+    options:
+      - content: Difference
+        rationale: "🎉"
+      - content: Lighten
+        rationale: "🎉"
+      - content: Brighten
+        rationale: "Try again!"
+      - content: Dullen
+        rationale: "Try again!"
+      - content: Multiply
+        rationale: "🎉"
+      - content: Overlay
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      If you want to blend different colors in different ways, which style of
+      blend mode would you need?
+    options:
+      - content: Separable
+        rationale: "These blend modes feature color channel targeted effects"
+      - content: Non-separable
+        rationale: "Try again, non-separable are not color channel aware"
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/blend-modes/index.md b/src/site/content/en/learn/css/blend-modes/index.md
new file mode 100644
index 00000000000..6e9e85a23d2
--- /dev/null
+++ b/src/site/content/en/learn/css/blend-modes/index.md
@@ -0,0 +1,418 @@
+---
+title: Blend Modes
+description: >
+  Create compositional effects by mixing two or more layers,
+  and learn how to isolate an image with a white background in this module on blend modes.
+audio:
+  title: 'The CSS Podcast - 024: Blend Modes'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP024_TCP_CSS_Podcast_Episode_024_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-04
+---
+
+[Duotone](https://en.wikipedia.org/wiki/Duotone) is a popular color treatment for photography
+which makes an image look like it is only made up of two contrasting colors:
+one for highlights and the other for lowlights.
+How do you do this with CSS though?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgvYMG'
+} %}
+</figure>
+
+Using blend modes—and other techniques you have learned about,
+such as [filters](/learn/css/filters) and
+[pseudo-elements](/learn/css/pseudo-elements)—you can apply this effect to any image.
+
+## What is a blend mode?
+
+Blend modes are commonly used in design tools such as Photoshop
+to create a compositional effect by mixing colors from two or more layers.
+By changing how colors mix, you can achieve really interesting visual effects.
+You can also use blend modes as a utility,
+such as isolating an image that has a white background,
+so it appears to have a transparent background.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyNmJor'
+} %}
+</figure>
+
+You can use most of the blend modes available in a design tool with CSS,
+using the
+[`mix-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode) or the
+[`background-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/background-blend-mode) properties.
+The `mix-blend-mode` applies blending to a whole element
+and the `background-blend-mode` applies blending to the background of an element.
+
+You use `background-blend-mode` when you have multiple backgrounds on an element
+and want them all to blend into each other.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpEVGO'
+} %}
+</figure>
+
+The `mix-blend-mode` affects the entire element,
+including its pseudo-elements.
+One use-case is in the initial example of a duotone image,
+which has color layers applied to the element through its pseudo-elements.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgvYMG'
+} %}
+</figure>
+
+Blend modes fall into two categories: separable and non-separable.
+A separable blend mode considers each color component,
+such as RGB, individually.
+A non-separable blend mode considers all color components equally.
+
+## Browser compatibility
+
+### `mix-blend-mode`
+
+{% BrowserCompat 'css.properties.mix-blend-mode' %}
+
+### `background-blend-mode`
+
+{% BrowserCompat 'css.properties.background-blend-mode' %}
+
+## Separable blend modes
+
+### Normal
+
+This is the default blend mode and changes nothing about how an element blends with others.
+
+### Multiply
+
+The `multiply` blend mode is like stacking multiple transparencies on top of each other.
+White pixels will appear transparent,
+and black pixels will appear black.
+Anything in between will multiply its luminosity (light) values.
+This means lights get much lighter and darks,
+darker—most often producing a darker result.
+
+```css
+.my-element {
+  mix-blend-mode: multiply;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgRdOy',
+  height: 450
+} %}
+</figure>
+
+### Screen
+
+Using `screen` multiplies the *light* values—an inverse effect to `multiply`,
+and will most often produce a brighter result.
+
+```css
+.my-element {
+  mix-blend-mode: screen;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjELpYo',
+  height: 450
+} %}
+</figure>
+
+### Overlay
+
+This blend mode—`overlay`—combines `multiply` and `screen`.
+Base dark colors become darker and base light colors become lighter.
+Mid-range colors, such as a 50% gray, are unaffected.
+
+```css
+.my-element {
+  mix-blend-mode: overlay;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BaprYom',
+  height: 450
+} %}
+</figure>
+
+### Darken
+
+The `darken` blend mode compares the source image and backdrop image's dark color luminosity
+and selects the darkest of the two.
+It does this by comparing rgb values instead of luminosity (like `multiply` and `screen` would do),
+for each color channel.
+With `darken` and `lighten`, new color values are often created from this comparison process.
+
+```css
+.my-element {
+  mix-blend-mode: darken;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyNmdGM',
+  height: 450
+} %}
+</figure>
+
+### Lighten
+
+Using `lighten` does the exact opposite of `darken`.
+
+```css
+.my-element {
+  mix-blend-mode: lighten;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWvQNO',
+  height: 450
+} %}
+</figure>
+
+### Color dodge
+
+If you use `color-dodge`, it lightens the background color to reflect the source color.
+Pure black colors see no effect from this mode.
+
+```css
+.my-element {
+  mix-blend-mode: color-dodge;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpYqpz',
+  height: 450
+} %}
+</figure>
+
+### Color burn
+
+The `color-burn` blend mode is very similar to the `multiply` blend mode,
+but increases contrast, resulting in more saturated mid-tones and reduced highlights.
+
+```css
+.my-element {
+  mix-blend-mode: color-burn;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gOgevmG',
+  height: 450
+} %}
+</figure>
+
+### Hard light
+
+Using `hard-light` creates a vivid contrast.
+This blend mode either screens or multiplies luminosity values.
+If the pixel value is lighter than 50% gray, the image is lightened,
+as if it were screened. If it is darker, it's multiplied.
+
+```css
+.my-element {
+  mix-blend-mode: hard-light;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELxreN',
+  height: 450
+} %}
+</figure>
+
+### Soft light
+
+The `soft-light` blend mode is a less-harsh version of `overlay`.
+It works in very much the same way with less contrast.
+
+```css
+.my-element {
+  mix-blend-mode: soft-light;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWvQmQ',
+  height: 450
+} %}
+</figure>
+
+### Difference
+
+A good way to picture how `difference` works is a bit like how a photo negative works.
+The `difference` blend mode takes the difference value of each pixel,
+inverting light colors.
+If the color values are identical, they become black.
+Differences in the values will invert.
+
+```css
+.my-element {
+  mix-blend-mode: difference;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRxXwM',
+  height: 450
+} %}
+</figure>
+
+### Exclusion
+
+Using `exclusion` is very similar to `difference`,
+but instead of returning black for identical pixels,
+it will return 50% gray, resulting in a softer output with less contrast.
+
+```css
+.my-element {
+  mix-blend-mode: exclusion;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjELpmb',
+  height: 450
+} %}
+</figure>
+
+## Non-separable blend modes
+
+You can think of these blend modes like HSL [color](/learn/css/color) components.
+Each takes a specific component value from the active layer and mixes it with other component values.
+
+### Hue
+
+The `hue` blend mode takes the hue of the source color
+and applies it to the saturation and luminosity of the backdrop color.
+
+```css
+.my-element {
+  mix-blend-mode: hue;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BaprYGO'
+} %}
+</figure>
+
+### Saturation
+
+This works like `hue`,
+but using `saturation` as the blend mode applies the saturation of the source color
+to the hue and luminosity of the backdrop color.
+
+```css
+.my-element {
+  mix-blend-mode: saturation;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdmQoP'
+} %}
+</figure>
+
+### Color
+
+The `color` blend mode will create a color from the hue and saturation of the source color
+and the luminosity of the backdrop color.
+
+```css
+.my-element {
+  mix-blend-mode: color;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOyzZRo'
+} %}
+</figure>
+
+### Luminosity
+
+Lastly, `luminosity` is the inverse of `color`.
+It creates a color with the luminosity of the source color and the hue and saturation of the backdrop color.
+
+```css
+.my-element {
+  mix-blend-mode: luminosity;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNWWOK'
+} %}
+</figure>
+
+## The `isolation` property
+
+{% BrowserCompat 'css.properties.isolation' %}
+
+If you set the [`isolation`](https://developer.mozilla.org/docs/Web/CSS/isolation)
+property to have a value of `isolate`,
+it will create a new stacking context,
+which will prevent it from blending with a backdrop layer.
+As you learned in the [z-index module](/learn/css/z-index), when you create a new stacking context,
+that layer becomes the base layer.
+This means that parent-level blend modes will no longer apply,
+but elements inside of an element with `isolation: isolate` set can _still_ blend.
+
+Note that this doesn't work with `background-blend-mode`
+because the background property is already isolated.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjELLXy'
+} %}
+</figure>
+
+{% Assessment 'blend-modes' %}
diff --git a/src/site/content/en/learn/css/borders/borders.assess.yml b/src/site/content/en/learn/css/borders/borders.assess.yml
new file mode 100644
index 00000000000..9576f69f2d6
--- /dev/null
+++ b/src/site/content/en/learn/css/borders/borders.assess.yml
@@ -0,0 +1,48 @@
+setLeader: Test your knowledge of borders
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which is the default border color?
+    options:
+      - content: "`black`"
+        rationale: "Try again!"
+      - content: "`white`"
+        rationale: "Try again!"
+      - content: "`currentColor`"
+        rationale: "This special CSS value will represent the computed
+        `text-color` value, and is the default border color."
+      - content: "`historicColor`"
+        rationale: "This is made up. Try again!"
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-element {
+        border: solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the default width of a border?
+    options:
+      - content: "`1px`"
+        rationale: "Try again!"
+      - content: "`medium`"
+        rationale: "🎉"
+      - content: "`solid`"
+        rationale: "This is a `border-style` value, not a `border-width` value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "`border-inline: 1px solid` would..."
+    options:
+      - content: "put borders on the left and right (in Latin layouts)."
+        rationale: "🎉"
+      - content: "put borders on the top and bottom (in Latin layouts)."
+        rationale: "In a Latin layout like English, `border-block` would be the
+        top and bottom."
+      - content: "put borders on the inside."
+        rationale: "Try again!"
+      - content: "put borders on the first line."
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/css/borders/index.md b/src/site/content/en/learn/css/borders/index.md
new file mode 100644
index 00000000000..edc7cc8822a
--- /dev/null
+++ b/src/site/content/en/learn/css/borders/index.md
@@ -0,0 +1,377 @@
+---
+title: Borders
+description: >
+  A border provides a frame for your boxes.
+  In this module find out how to change the size, style and color of borders using CSS.
+audio:
+  title: 'The CSS Podcast - 016: Borders'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_016_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-30
+---
+
+In the [box model](/learn/css/box-model) module,
+we considered a frame analogy to describe each section of the box model.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg",
+alt="Three picture frames next to each other.
+The middle frame has the sections of the box model over the top of it",
+width="800",
+height="562" %}
+
+The border box is the frame of your boxes,
+and the `border` properties give you a huge array of options to create that frame in
+nearly any style that you can think of.
+
+## Border properties
+
+The individual `border` properties provide a way to style the various parts of a border.
+
+{% BrowserCompat 'css.properties.border' %}
+
+### Style
+
+For a border to appear,
+you have to define the
+[`border-style`](https://developer.mozilla.org/docs/Web/CSS/border-style).
+There's a few options to choose from:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrvyxY'
+} %}
+</figure>
+
+When using the `ridge`, `inset`, `outset` and `groove` styles,
+the browser will darken the border color for the second shown color to provide contrast and depth.
+This behaviour can vary between browsers,
+especially for dark colors such as `black`.
+In Chrome, these border styles will appear to be solid and in Firefox,
+they will be lightened to then provide a darker second color.
+
+Browser behaviour can vary for other border styles too,
+so it's important to test your site in different browsers.
+A common example of this difference is how each browser renders the `dotted` and `dashed`  styles.
+
+<figure>
+  {% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ybLca9jmTgUtltTwfIpt.jpg",
+  alt="The border demo in Chrome,
+  Firefox and Safari which demonstrates the subtle differences
+  in how the borders display",
+  width="800",
+  height="489" %}
+  <figcaption>Borders displayed in Chrome, Firefox, and Safari.</figcaption>
+</figure>
+
+To set border style on each side of your box,
+you can use
+[`border-top-style`](https://developer.mozilla.org/docs/Web/CSS/border-top-style),
+[`border-right-style`](https://developer.mozilla.org/docs/Web/CSS/border-right-style),
+[`border-left-style`](https://developer.mozilla.org/docs/Web/CSS/border-left-style),
+and [`border-bottom-style`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-style).
+
+
+### Shorthand
+
+As with `margin` and `padding`,
+you can use the
+[`border`](https://developer.mozilla.org/docs/Web/CSS/border)
+shorthand property to define all the parts of your border in one declaration.
+
+```css
+.my-element {
+	border: 1px solid red;
+}
+```
+
+The order of values in the `border` shorthand are `border-width`,
+`border-style` and then, `border-color`.
+
+### Color
+
+You can set color on all sides of your box or on each individual side with
+[`border-color`](https://developer.mozilla.org/docs/Web/CSS/border-color).
+By default, it uses the box's current text color: `currentColor`.
+This means that if you only declare border properties,
+like width,
+the color will be that computed value unless you explicitly set it.
+
+```css
+.my-element {
+	color: blue;
+	border: solid; /* Will be a blue border */
+}
+
+.my-element {
+	color: blue;
+	border: solid yellow;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgovoX'
+} %}
+</figure>
+
+
+To set a border color on each side of your box,
+use
+[`border-top-color`](https://developer.mozilla.org/docs/Web/CSS/border-top-color),
+[`border-right-color`](https://developer.mozilla.org/docs/Web/CSS/border-right-color),
+[`border-left-color`](https://developer.mozilla.org/docs/Web/CSS/border-left-color) and
+[`border-bottom-color`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-color).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJvQVO'
+} %}
+</figure>
+
+### Width
+
+The width of a border is how thick the line is, and is controlled by
+[`border-width`](https://developer.mozilla.org/docs/Web/CSS/border-width).
+The default border width is `medium`.
+This won't be visible unless you define a style, though.
+You can use other named widths such as `thin` and `thick`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoWKQxN'
+} %}
+</figure>
+
+The `border-width` properties also accept a length unit such as
+`px`, `em`, `rem` or `%`.
+To set border width on each side of your box, use
+[`border-top-width`](https://developer.mozilla.org/docs/Web/CSS/border-top-width),
+[`border-right-width`](https://developer.mozilla.org/docs/Web/CSS/border-right-width),
+[`border-left-width`](https://developer.mozilla.org/docs/Web/CSS/border-left-width) and
+[`border-bottom-width`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-width).
+
+## Logical properties
+
+In the
+[Logical Properties](/learn/css/logical-properties) module you discovered how to refer to block flow and inline flow,
+rather than explicit top, right, bottom or left sides.
+
+You have this capability with borders, too:
+
+```css
+.my-element {
+	border: 2px dotted;
+	border-inline-end: 2px solid red;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRraBp'
+} %}
+</figure>
+
+In this example, `.my-element` has all sides defined as having a `2px`,
+dotted border that is the current text color.
+The `inline-end` border is then defined as `2px`, solid and red.
+This means that in left-to-right languages—like English—
+the red border will be on the right side of the box.
+In right-to-left languages—like Arabic—
+the red border will be on the left side of the box.
+
+Browser support is varied for logical properties in borders,
+so make sure you check support before using.
+
+## Border radius
+
+To give a box rounded corners use the
+[`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius) property.
+
+```css
+.my-element {
+	border-radius: 1em;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYxjQoK'
+} %}
+</figure>
+
+This shorthand adds a consistent border to each corner of your box.
+As with the other border properties,
+you can define the border radius for each side with
+[`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius),
+[`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius),
+[`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) and
+[`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius).
+
+You can also specify each corner's radius in the shorthand,
+which follows the order: top left, top right, bottom right then bottom left.
+
+```css
+.my-element {
+	border-radius: 1em 2em 3em 4em;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgovdK'
+} %}
+</figure>
+
+By defining a single value for a corner,
+you are using another shorthand because a border radius is split into two parts:
+the vertical and horizontal sides.
+This means that when you set `border-top-left-radius: 1em`,
+you are setting the top-left-**top** radius and the top-left-**left** radius.
+
+You can define both properties, per corner like this:
+
+```css
+.my-element {
+	border-top-left-radius: 1em 2em;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNRqoPM'
+} %}
+</figure>
+
+This adds a `border-top-left-top` value of `1em`,
+and a `border-top-left-left` value of `2em`.
+This converts the top left border radius into an elliptical radius,
+rather than the default circular radius.
+
+You can define these values in the `border-radius` shorthand,
+using a `/` to define the elliptical values, after the standard values.
+This enables you to get creative and make some complex shapes.
+
+```css
+.my-element {
+	border: 2px solid;
+  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpyqeM'
+} %}
+</figure>
+
+## Border images
+
+You don't just have to use a stroke-based border in CSS.
+You can also use any type of image, using
+[`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image).
+This shorthand property allows you to set the source image,
+how that image is sliced, the image width,
+how far the border is outset from the edge and how it should repeat.
+
+```css
+.my-element {
+  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
+  border-image-slice: 61 58 51 48;
+  border-image-width: 20px 20px 20px 20px;
+  border-image-outset: 0px 0px 0px 0px;
+  border-image-repeat: stretch stretch;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNdWNX'
+} %}
+</figure>
+
+The [`border-image-width`](https://developer.mozilla.org/docs/Web/CSS/border-image-width)
+property is like `border-width`:
+it is how you set the width of your border image.
+The [`border-image-outset`](https://developer.mozilla.org/docs/Web/CSS/border-image-outset)
+property lets you set the distance between your border image and the box that it wraps around.
+
+### `border-image-source`
+
+ The [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source)
+ (source of the border image) can be a `url` for any valid image, which includes CSS gradients.
+
+```css
+.my-element {
+	border-image-source: url('path/to/image.png');
+}
+
+.my-element {
+	border-image-source: linear-gradient(to bottom, #000, #fff);
+}
+```
+
+### `border-image-slice`
+
+The [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice)
+property is a useful property that allows you to slice an image into 9 parts, made up of 4 split lines.
+It works like the `margin` shorthand where you define the top, right, bottom and left **offset value**.
+
+```css
+.my-element {
+	border-image: url('image.jpg');
+	border-image-slice: 61 58 51 48;
+}
+```
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/WETsTwhFSfl30VfyfMTA.png",
+alt="The image used in the demo with the four slices shown with blue lines",
+width="800",
+height="380" %}
+
+With the offset values defined,
+you now have 9 sections of the image: 4 corners, 4 edges and a middle section.
+The corners are applied to the corners of the element with the border image.
+The edges are applied to the edges of that element.
+The [`border-image-repeat`](https://developer.mozilla.org/docs/Web/CSS/border-image-repeat)
+property defines how those edges fill their space and the
+[`border-image-width`](https://developer.mozilla.org/docs/Web/CSS/border-image-width)
+property controls the size of the slices.
+
+Lastly, the `fill` keyword determines whether the middle section, left by the slicing, is used as the element's background image or not.
+
+### `border-image-repeat`
+
+[`border-image-repeat`](https://developer.mozilla.org/docs/Web/CSS/border-image-repeat)
+is how you instruct CSS how you would like your border image to repeat.
+It works the same as `background-repeat`.
+
+- The initial value is `stretch`,
+which stretches the source image to fill available space where possible.
+- The `repeat` value tiles the source image's edges as many times as possible,
+and may clip the edge regions to achieve this.
+- The `round` value is the same as repeat,
+but instead of clipping the image edge regions to fit as many as possible,
+it stretches the image as well as repeating it to achieve a seamless repeat
+- The `space` value is again, the same as repeat,
+but this value adds space between each edge region to create a seamless pattern.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrvBYv'
+} %}
+</figure>
+
+{% Assessment 'borders' %}
diff --git a/src/site/content/en/learn/css/box-model/box-model.assess.yml b/src/site/content/en/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/en/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/box-model/index.md b/src/site/content/en/learn/css/box-model/index.md
new file mode 100644
index 00000000000..beff8b4f6af
--- /dev/null
+++ b/src/site/content/en/learn/css/box-model/index.md
@@ -0,0 +1,324 @@
+---
+title: Box Model
+description: >
+  Everything displayed by CSS is a box.
+  Understanding how the CSS Box Model works is therefore a core foundation of CSS.
+audio:
+  title: 'The CSS Podcast - 001: The Box Model'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Say you have this bit of HTML:
+
+```html
+<p>I am a paragraph of text that has a few words in it.</p>
+```
+
+Then you write this CSS for it:
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+The content would break out of your element and it would be 142px wide,
+rather than 100px.
+Why is that?
+The box model is a core foundation of CSS and understanding how it works,
+how it is affected by other aspects of CSS and importantly,
+how you can control it will help you to write more predictable CSS.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNRemxN',
+  height: 300
+} %}
+</figure>
+
+A really important thing to remember when writing CSS,
+or working on the web as a whole,
+is that everything displayed by CSS is a box.
+Whether that's a box that uses `border-radius` to look like a circle, or even just some text:
+the key thing to remember is that it's all boxes.
+
+## Content and sizing
+
+Boxes have different behavior based on their `display` value,
+their set dimensions, and the content that lives within them.
+This content could be even more boxes—generated by child elements—or plain text content.
+Either way, this content will affect the size of the box by default.
+
+You can control this by using **extrinsic sizing**, or,
+you can continue to let the browser make decisions for you based on the content size,
+using **intrinsic sizing**.
+
+Let's quickly look at the difference, using a demo to help us.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpoMBL'
+} %}
+  <figcaption>Notice that when the box is using extrinsic sizing,
+  there's a limit of how much content you can add before it overflows out of the box's bounds.
+  This makes the word, "awesome", overflow.</figcaption>
+</figure>
+
+The demo has the words, "CSS is awesome" in a box with fixed dimensions and a thick border.
+The box has a width, so is extrinsically sized.
+It controls the sizing of its child content.
+The problem with this though, is that the word "awesome" is too large for the box,
+so it overflows outside of the parent box's **border box** (more on this later in the lesson).
+One way to prevent this overflow is to allow the box to be intrinsically sized by either
+unsetting the width,
+or in this case,
+setting the `width` to be `min-content`.
+The `min-content` keyword tells the box to only be as wide as the intrinsic minimum width of
+its content (the word "awesome").
+This allows the box to fit around "CSS is awesome", perfectly.
+
+Let's look at something more complex to see the impact of different sizing on real content:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'wvgwOJV',
+  height: 650
+} %}
+</figure>
+
+Toggle intrinsic sizing on and off
+to see how you can gain more control with extrinsic sizing and let the content have more control
+with intrinsic sizing.
+To see the effect that intrinsic and extrinsic sizing has,
+add a few sentences of content to the card.
+When this element is using extrinsic sizing,
+there's a limit of how much content you can add before it overflows out of the element's bounds,
+but this isn't the case when intrinsic sizing is toggled on.
+
+By default, this element has a set `width` and `height`—both `400px`.
+These dimensions give strict bounds to everything inside the element,
+which will be honored unless the content is too large for the box in which case visible overflow
+will happen.
+You can see this in action by changing the content of the caption,
+under the flower picture to something that exceeds the height of the box, which is a few lines of
+content.
+
+{% Aside "key-term" %}
+When content is too big for the box it is in, we call this overflow.
+You can manage how an element handles overflow content, using the `overflow` property.
+{% endAside %}
+
+When you switch to intrinsic sizing,
+you are letting the browser make decisions for you,
+based on the box's content size.
+It's much more difficult for there to be overflow with intrinsic sizing because our box will resize
+with its content,
+rather than try to size the content.
+It's important to remember that this is the default, flexible behavior of a browser.
+Though extrinsic sizing gives more control on the surface,
+intrinsic sizing provides the most flexibility, most of the time.
+
+## The areas of the box model
+
+Boxes are made up of distinct box model areas that all do a specific job.
+
+<figure>
+{% Img
+  src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg",
+  alt="A diagram showing the four main areas of the box model - content box, padding box, border box and margin box",
+  width="800",
+  height="547"
+%}
+  <figcaption>The four main areas of the box model: content box, padding box, border box and
+  margin box.</figcaption>
+</figure>
+
+You start with **content box**, which is the area that the content lives in.
+As you learned before: this content can control the size of its parent,
+so is usually the most variably sized area.
+
+The **padding box** surrounds the content box
+and is the space created by
+the [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding) property.
+Because padding is inside the box, the background of the box will be visible in the space that
+it creates.
+If our box has overflow rules set, such as `overflow: auto` or `overflow: scroll`,
+the scrollbars will occupy this space too.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BaReoEV'
+} %}
+</figure>
+
+The **border box** surrounds the padding box and its space is occupied by the `border` value.
+The border box is the bounds of your box and the **border edge** is the limit of what you can
+visually see. The [`border`](https://developer.mozilla.org/docs/Web/CSS/border)
+property is used to visually frame an element.
+
+The final area, the **margin box**, is the space around your box,
+defined by the `margin` rule on your box.
+Properties such as
+[`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) and
+[`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow)
+occupy this space too because they are painted on top,
+so they don't affect the size of our box.
+You could have an `outline-width` of `200px` on our box and everything inside and including the
+border box would be exactly the same size.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWprGea'
+} %}
+</figure>
+
+## A useful analogy
+
+The box model is complex to understand,
+so let's recap what you've learned with an analogy.
+
+<figure>
+{% Img
+  src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg",
+  alt="Three photo frames",
+  width="800",
+  height="562"
+%}
+</figure>
+
+In this diagram, you have three photo frames,
+mounted to a wall, next to each other.
+The diagram has labels that associate elements of the frame with the box model.
+
+To break this analogy down:
+
+- The content box is the artwork.
+- The padding box is the white matte, between the frame and the artwork.
+- The border box is the frame, providing a literal border for the artwork.
+- The margin box is the space between each frame.
+- The shadow occupies the same space as the margin box.
+
+## Debugging the box model
+
+Browser DevTools provide a visualisation of a selected box's box model calculations,
+which can help you understand how the box model works and importantly,
+how it is affecting the website you're working on.
+
+Go ahead and try this in your own browser:
+
+1. [Open DevTools](https://developer.chrome.com/docs/devtools/open/)
+1. [Select an element](https://developer.chrome.com/docs/devtools/css/reference/#select)
+1. Show the box model debugger
+
+<figure>
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}
+</figure>
+
+## Controlling the box model
+
+To understand how to control the box model,
+you first need to understand what happens in your browser.
+
+Every browser applies a user agent stylesheet to HTML documents.
+The CSS used varies between each browser,
+but they provide sensible defaults to make content easier to read.
+They define how elements should look and behave if there's no CSS defined.
+It is in the user agent styles where a box's default `display` is set, too.
+For example, if we are in a normal flow, a `<div>` element's default `display` value is `block`,
+a `<li>` has a default `display` value of `list-item`,
+and a `<span>` has a default `display` value of `inline`.
+
+An `inline` element has block margin,
+but other elements won't respect it.
+Use `inline-block`, and those elements will respect the block margin,
+while the element maintains most of the same behaviors it had as an `inline` element.
+A `block` item will, by default,
+fill the available **inline space**,
+whereas a `inline` and `inline-block` elements will only be as large as their content.
+
+Alongside an understanding of how user agent styles affect each box,
+you also need to understand `box-sizing`,
+which tells our box how to calculate its box size.
+By default, all elements have the following user agent style: `box-sizing: content-box;`.
+
+Having `content-box` as the value of `box-sizing` means that when you set dimensions,
+such as a `width` and `height`,
+they will be applied to the **content box**.
+If you then set `padding` and `border`,
+these values will be added to the content box's size.
+
+{% Assessment 'box-model' %}
+
+The actual width of this box will be 260px.
+As the CSS uses the default `box-sizing: content-box`,
+the applied width is the width of the content,
+`padding` and `border` on both sides are added to that.
+So 200px for the content + 40px of padding + 20px of border makes a total visible width of 260px.
+
+You _can_ control this, though,
+by making the following modification to use the alternative box model, `border-box`:
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+This alternative box model tells CSS to apply the `width` to the border box instead of the
+content box. This means that our `border` and `padding` get _pushed in_,
+and as a result,
+when you set `.my-box` to be `200px` wide: it actually renders at `200px` wide.
+
+Check out how this works in the following interactive demo.
+Notice that when you toggle the `box-sizing` value
+it shows—via a blue background—which CSS is being applied _inside_ our box.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNBvVpM',
+  height: 650
+} %}
+</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+This CSS rule selects every element in the document
+and every `::before` and `::after` pseudo element and applies `box-sizing: border-box`.
+This means that every element will now have this alternative box model.
+
+Because the alternative box model can be more predictable,
+developers often add this rule to resets and normalizers,
+[like this one](https://piccalil.li/blog/a-modern-css-reset).
+
+## Resources
+
+- [Introduction to the box model](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [What are browser developer tools?](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### User agent stylesheets
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/en/learn/css/color/color.assess.yml b/src/site/content/en/learn/css/color/color.assess.yml
new file mode 100644
index 00000000000..da6b26b8866
--- /dev/null
+++ b/src/site/content/en/learn/css/color/color.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of color
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4,5"
+    stem: Which of the following are valid colors?
+    options:
+      - content: "`rbga(400 0 1)`"
+        rationale: "rbga is a typo of rgba and 400 is larger than it would
+        accept anyway, making it invalid."
+      - content: "`#0f08`"
+        rationale: "🎉"
+      - content: "`#OOFZ2`"
+        rationale: "This is not a hex value, it's only 5 numbers and includes an
+        Z, making it invalid."
+      - content: "`rgb(255, 0, 0)`"
+        rationale: "🎉"
+      - content: "`hsl(180deg 50% 50%)`"
+        rationale: "🎉"
+      - content: "`hotpink`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Spot the invalid hsl color.
+    options:
+      - content: "`hsl(5, 0%, 90%)`"
+        rationale: "This is a valid hsl value."
+      - content: "`hsl(.5turn 40% 60%)`"
+        rationale: "This is a valid hsl value."
+      - content: "`hsl(0, 0, 0)`"
+        rationale: "🎉 You found it, the 2nd and 3rd values should be
+        percentages."
+      - content: "`hsl(2rad 50% 50%)`"
+        rationale: "This is a valid hsl value."
+      - content: "`hsl(0 0% 0% / 20%)`"
+        rationale: "This is a valid hsl value."
diff --git a/src/site/content/en/learn/css/color/index.md b/src/site/content/en/learn/css/color/index.md
new file mode 100644
index 00000000000..7fd0c0dc765
--- /dev/null
+++ b/src/site/content/en/learn/css/color/index.md
@@ -0,0 +1,275 @@
+---
+title: Color
+description: >
+  There are several different ways to specify color in CSS.
+  In this module we take a look at the most commonly used color values.
+audio:
+  title: 'The CSS Podcast - 006: Color Part One'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_006_v3.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-01
+---
+
+Color is an important part of any website and in CSS there are many options for color types,
+functions and treatments.
+
+How do you decide which color type to use?
+How do you make your colors semi-transparent?
+In this lesson,
+you're going to learn which options you have to help you make the right decisions for your project and team.
+
+CSS has [various different data types](https://developer.mozilla.org/docs/Web/CSS/CSS_Types),
+such as strings and numbers.
+Color is one of these types and uses other types,
+such as numbers for its own definitions.
+
+## Numeric colors
+
+It is very likely that your first exposure to colors in CSS is via numeric colors.
+We can work with numerical color values in a few different forms.
+
+### Hex colors
+
+```css
+h1 {
+  color: #b71540;
+}
+```
+
+Hexadecimal notation (often shortened to hex) is a shorthand syntax for RGB,
+which assigns a numeric value to red green and blue,
+which are the three **primary colors**.
+
+{% Aside %}
+According to the Web Almanac,
+[hex is the most popular color syntax type](https://almanac.httparchive.org/en/2019/css#color-types).
+{% endAside %}
+
+The hexadecimal ranges are **0-9** and **A-F**.
+When used in a six digit sequence,
+they are translated to the RGB numerical ranges which are 0-255
+which correspond to the red, green, and blue color channels respectively.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BapNrPG',
+  height: 430
+} %}
+</figure>
+
+You can also define an alpha value with any numerical colors.
+An alpha value is a percentage of transparency.
+In hex code, you add another two digits to the six digit sequence,
+making an eight digit sequence.
+For example, to set black in hex code, write `#000000`.
+To add a 50% transparency, change it to `#00000080`.
+
+Because the hex scale is **0-9** and **A-F**, the transparency values are probably not quite what you'd expect them to be.
+Here are some key, common values added to the black hex code, `#000000`:
+
+- 0% alpha—which is fully transparent—is **00**: `#00000000`
+- 50% alpha is **80**: `#00000080`
+- 75% alpha is **BF**: `#000000BF`
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPLXdr',
+  height: 540
+} %}
+</figure>
+
+To convert a two digit hex to a decimal,
+take the first digit and multiply it by 16 (because hex is base 16),
+then add the second digit. Using **BF** as an example for 75% alpha:
+
+1. B is equal to 11, which when multiplied by 16 equals 176
+1. F is equal to 15
+1. 176 + 15 = 191
+1. The alpha value is 191—75% of 255
+
+{% Aside %}
+You can also write hex codes in a three digit shorthand.
+A three digit hex code is a shortcut to an equivalent six digit sequence.
+For example, `#a4e` is identical to `#aa44ee`.
+To add alpha, then `#a4e8` would expand to `#aa44ee88`.
+{% endAside %}
+
+### RGB (Red, Green, Blue)
+
+```css
+h1 {
+  color: rgb(183, 21, 64);
+}
+```
+
+RGB colors are defined with the
+[`rgb()`](<https://developer.mozilla.org/docs/Web/CSS/color_value/rgb()>) color function,
+using either numbers or percentages as parameters.
+The numbers need to be within the **0-255** range and the percentages are between **0% and 100%‌**.
+RGB works on the 0-255 scale,
+so 255 would be equivalent to 100%, and 0 to 0%.
+
+To set black in RGB, define it as `rgb(0 0 0)`,
+which is zero red, zero green and zero blue.
+Black can also be defined as `rgb(0%, 0%, 0%)`.
+White is the exact opposite: `rgb(255, 255, 255)` or `rgb(100%, 100%, 100%)`.
+
+An alpha is set in `rgb()` in one of two ways.
+Either add a `/` **after** the red, green and blue parameters,
+or use the [`rgba()`](<https://developer.mozilla.org/docs/Web/CSS/color_value/rgba()>) function.
+The alpha can be defined with a percentage or a decimal between 0 and 1.
+For example, to set a 50% alpha black in modern browsers, write: `rgb(0 0 0 / 50%)` or `rgb(0 0 0 / 0.5)`.
+For wider support, using the `rgba()` function,
+write: `rgba(0, 0, 0, 50%)` or `rgba(0, 0, 0, 0.5)`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyNomWW',
+  height: 430
+} %}
+</figure>
+
+{% Aside %}
+Commas were removed from the `rgb()` and `hsl()` notation because newer color functions,
+such as `lab()` and `lch()` use spaces instead of commas as a delimiter.
+This change provides more consistency not just with newer color functions,
+but with CSS in general.
+For better backwards compatibility,
+you can still use commas to define `rgb()` and `hsl()`.
+{% endAside %}
+
+### HSL (Hue, Saturation, Lightness)
+
+```css
+h1 {
+  color: hsl(344, 79%, 40%);
+}
+```
+
+HSL stands for hue, saturation and lightness.
+Hue describes the value on the color wheel, from 0 to 360 degrees, starting with red (being both 0 and 360).
+A hue of 180, or 50% would be in the blue range.
+It's the origin of the color that we see.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ob7MTste1Obu9AoLvbKq.svg", alt="A color wheel with labels for degree values in 60 degree increments to help visuals what each angle value represents", width="800", height="507" %}
+
+Saturation is how vibrant the selected hue is.
+A fully desaturated color (with a saturation of `0%`) will appear grayscale.
+And finally, lightness is the parameter which describes the scale from white to black of added light.
+A lightness of `100%` will always give you white.
+
+Using the [`hsl()`](<https://developer.mozilla.org/docs/Web/CSS/color_value/hsl()>) color function,
+you define a true black by writing `hsl(0 0% 0%)`, or even `hsl(0deg 0% 0%)`.
+This is because the hue parameter defines the degree on the color wheel,
+which if you use the number type, is **0-360**.
+You can also use the angle type, which is (`0deg`) or `(0turn)`.
+Both saturation and lightness are defined with percentages.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/RhVxWSZ6bH35eBdN6Prj.svg", alt="The HSL color function broken down visually. The hue uses the color wheel. The saturation shows grey blending into teal. The lightness shows black into white.", width="800", height="478" %}
+
+{% Aside %}
+[The angle type](https://developer.mozilla.org/docs/Web/CSS/angle)
+in CSS is great for defining hue because it represents the angle of the color wheel really well.
+This type accepts degrees, turns, radians and gradians.
+{% BrowserCompat 'css.types.angle' %}
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRJLQo',
+  height: 430
+} %}
+</figure>
+
+Alpha is defined in `hsl()`,
+in the same way as `rgb()` by adding a `/` after the hue, saturation and lightness parameters _or_ by using the
+[`hsla()`](<https://developer.mozilla.org/docs/Web/CSS/color_value/hsla()>) function.
+The alpha can be defined with a percentage or a decimal between 0 and 1.
+For example, to set a 50% alpha black, use: `hsl(0 0% 0% / 50%)` or `hsl(0 0% 0% / 0.5)`.
+Using the `hsla()` function, write: `hsla(0, 0%, 0%, 50%)` or `hsla(0, 0%, 0%, 0.5)`.
+
+{% Aside %}
+There are some newer color types coming to CSS.
+These include [lab()](<https://developer.mozilla.org/docs/Web/CSS/color_value/lab()>)
+and [lch()](<https://developer.mozilla.org/docs/Web/CSS/color_value/lch()>),
+which allow a far wider range of color to be specified than is possible in RGB.
+{% endAside %}
+
+## Color Keywords
+
+There are [148 named colors in CSS](https://developer.mozilla.org/docs/Web/CSS/color_value#color_keywords).
+These are plain English names such as purple, tomato and goldenrod.
+Some of the most popular names,
+according to the [Web Almanac](https://almanac.httparchive.org/en/2019/css),
+are black, white, red, blue and gray.
+Our favorites include goldenrod, aliceblue, and hotpink.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELGraM'
+} %}
+</figure>
+
+Aside from standard colors, there are also special keywords available:
+
+- `transparent` is a fully transparent color.
+  It is also the initial value of `background-color`
+- `currentColor` is the contextual computed dynamic value of the `color` property.
+  If you have a text color of `red` and then set the `border-color` to be `currentColor`, it will also be red.
+  If the element that you define `currentColor` on doesn't have a value for `color` defined,
+  `currentColor` will be computed by the cascade instead
+
+{% Aside %}
+System keywords are colors that are defined by your operating system theme.
+Some examples of these colors are `Background`,
+which is the desktop background color or `Highlight`,
+which is the highlight color of selected items. These are just two of
+[many options](https://www.w3.org/wiki/CSS/Properties/color/keywords#System_Colors).
+
+All color keywords are case-insensitive,
+however you will often see system colors with capitalization to differentiate them from standard color keywords.
+{% endAside %}
+
+## Where to use color in CSS rules
+
+If a CSS property accepts the
+[`<color>`](https://developer.mozilla.org/docs/Web/CSS/color_value) data type as a value,
+it will accept any of the above methods of expressing color.
+For styling text, use the `color`, `text-shadow` and `text-decoration-color` properties
+which all accept color as the value or color as part of the value.
+
+For backgrounds, you can set a color as the value for `background` or `background-color`.
+Colors can also be used in gradients, such as `linear-gradient`.
+Gradients are a type of image that can be programmatically defined in CSS.
+Gradients accept two or more colors in any combination of color format, such as hex, rgb or hsl.
+
+{% Aside %}
+There's lots to learn with gradients so we wrote [a whole lesson](/learn/css/gradients) on how to use them.
+{% endAside %}
+
+Finally, `border-color`, and `outline-color` set the color for borders and outlines on your boxes.
+The `box-shadow` property also accepts color as one of the values.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgdJKd'
+} %}
+</figure>
+
+{% Assessment 'color' %}
+
+## Resources
+
+- [A handy demo showing how you can use angles with HSL](https://codepen.io/argyleink/pen/ExjReJa)
+- [A comprehensive guide on color](https://css-tricks.com/nerds-guide-color-web/)
+- [A comprehensive guide on wide gamut color](https://developer.chrome.com/articles/high-definition-css-color-guide/)
+- [[video] An explainer on how to read hex codes](https://www.youtube.com/watch?v=eqZqx6lRPe0)
+- [How hexadecimal codes work](https://medium.com/basecs/hexs-and-other-magical-numbers-9785bc26b7ee)
diff --git a/src/site/content/en/learn/css/conclusion/index.md b/src/site/content/en/learn/css/conclusion/index.md
new file mode 100644
index 00000000000..d1c7478c7da
--- /dev/null
+++ b/src/site/content/en/learn/css/conclusion/index.md
@@ -0,0 +1,42 @@
+---
+title: Conclusion and next steps
+description: >
+ Further resources to help you take your next steps.
+audio:
+  title: 'The CSS Podcast - 025: Season 1 Wrap Up'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_025_v2.0.mp3?dest-id=1891565'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+  - rachelandrew
+  - una
+  - adamargyle
+  - robdodson
+  - kaycebasques
+  - jiwoong
+  - emmatwersky
+  - cambickel
+  - lozandier
+date: 2021-05-04
+---
+
+Congratulations! You've made it to the end!
+By now, you have learned _a lot_ about CSS,
+and hopefully you feel more comfortable working with it than you did before.
+
+You might be wondering where you can go from here.
+One of the  best ways to learn is to learn by doing: try out your new CSS skills by building a website of your own.
+To continue to build your CSS skillset, here are some additional resources to explore:
+
+## Additional resources
+
+- [CSS Documentation on MDN](https://developer.mozilla.org/docs/Web/CSS)
+- [Listen to the CSS Podcast](https://thecsspodcast.libsyn.com)
+- [CSS articles on web.dev](/tags/css/)
+- [How To Learn CSS - Smashing Magazine](https://www.smashingmagazine.com/2019/01/how-to-learn-css/)
+- [CSS-Tricks](https://css-tricks.com/tag/css/)
+- [Layout Land - Youtube](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)
+
+## Brought to you by
+
+{% include 'partials/authors-stack.njk' %}
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/css.11tydata.js b/src/site/content/en/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/en/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/en/learn/css/filters/filters.assess.yml b/src/site/content/en/learn/css/filters/filters.assess.yml
new file mode 100644
index 00000000000..547a11467a3
--- /dev/null
+++ b/src/site/content/en/learn/css/filters/filters.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of filters
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,4,5"
+    stem: Which of following are CSS filter functions?
+    options:
+      - content: "`grayscale()`"
+        rationale: "🎉"
+      - content: "`invert()`"
+        rationale: "🎉"
+      - content: "`flip()`"
+        rationale: "Try again!"
+      - content: "`multiply()`"
+        rationale: "Try again!"
+      - content: "`blur()`"
+        rationale: "🎉"
+      - content: "`brightness()`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Can CSS use SVG filters?
+    options:
+      - content: "Yes"
+        rationale: "The `url()` filter function enables this"
+      - content: "No"
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/filters/index.md b/src/site/content/en/learn/css/filters/index.md
new file mode 100644
index 00000000000..556412313bd
--- /dev/null
+++ b/src/site/content/en/learn/css/filters/index.md
@@ -0,0 +1,327 @@
+---
+title: Filters
+description: >
+  Filters in CSS mean that you can apply effects you might only think possible in a graphics application.
+  In this module, you can discover what is available.
+audio:
+  title: 'The CSS Podcast - 023: Filters'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_023_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-04
+---
+
+Say you need to build an element that's got a slightly opaque,
+frosted glass effect that sits over the top of an image.
+The text needs to be live text and not an image.
+How do you do that?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKaQLoL'
+} %}
+</figure>
+
+A combination of CSS filters and the `backdrop-filter`
+allow us to apply effects and blur what's needed in real time.
+Blur and opacity are two of many available filters,
+so let's have a quick run through what they all do and how to use them.
+
+{% Aside %}
+Take care when placing text over images,
+that the text is still readable should the filter effect not be supported in a user's browser.
+For example, at the moment
+[`backdrop-filter`](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)
+is not supported in Firefox,
+and so you should check that Firefox users aren't left with text they cannot easily read:
+{% BrowserCompat 'css.properties.backdrop-filter' %}
+{% endAside %}
+
+## The `filter` property
+
+{% BrowserCompat 'css.properties.filter' %}
+
+You can apply one or many of the following filters as a value for
+[`filter`](https://developer.mozilla.org/docs/Web/CSS/filter).
+If you incorrectly apply a filter,
+the rest of the filters defined for `filter` will not work.
+
+### `blur`
+
+This applies a gaussian blur and the only argument you can pass is a `radius`,
+which is
+[how much blur is applied](https://dbaron.org/log/20110225-blur-radius).
+This needs to be a length unit, like `10px`. Percentages are not accepted.
+
+```css
+.my-element {
+	filter: blur(0.2em);
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPQJwX',
+  height: 450
+} %}
+</figure>
+
+### `brightness`
+
+{% BrowserCompat 'css.types.filter-function.brightness' %}
+
+To increase or decrease the brightness of an element,
+use the brightness function.
+The brightness value is expressed as a percentage with the unchanged image being expressed as a value of 100%.
+A value of 0% turns the image completely black,
+therefore values between 0% and 100% make the image less bright.
+Use values over 100% to increase the brightness.
+
+```css
+.my-element {
+	filter: brightness(80%);
+}
+```
+
+{% Aside %}
+You can also use decimal values,
+instead of percentage values in filters like `brightness`.
+To set 80% brightness with a decimal, write `0.8`.
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKaQjpp',
+  height: 450
+} %}
+</figure>
+
+### `contrast`
+
+{% BrowserCompat 'css.types.filter-function.contrast' %}
+
+Set a value between 0% and 100% to decrease or increase the contrast, respectively.
+
+```css
+.my-element {
+	filter: contrast(160%);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjJEOW',
+  height: 450
+} %}
+</figure>
+
+### `grayscale`
+
+{% BrowserCompat 'css.types.filter-function.grayscale' %}
+
+You can apply a completely grayscale effect by using `1` as a value for `grayscale()`,
+or `0` to have a completely saturated element.
+You can also use percentage or decimal values to only apply a partial grayscale effect.
+If you pass no arguments, the element will be completely grayscale.
+If you pass a value greater than 100%, it will be capped at 100%.
+
+```css
+.my-element {
+	filter: grayscale(80%);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJQMKe',
+  height: 450
+} %}
+</figure>
+
+### `invert`
+{% BrowserCompat 'css.types.filter-function.invert' %}
+
+Just like `grayscale`,
+you can pass `1` or `0` to the `invert()` function to turn it on or off.
+When it is on, the element's colors are completely inverted.
+You can also use percentage or decimal values to only apply a partial inversion of colors.
+If you don't pass any arguments into the `invert()` function,
+the element will be completely inverted.
+
+```css
+.my-element {
+	filter: invert(1);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgvdOO',
+  height: 450
+} %}
+</figure>
+
+### `opacity`
+
+{% BrowserCompat 'css.types.filter-function.opacity' %}
+
+The `opacity()` filter works just like the `opacity` property,
+where you can pass a number or percentage to increase or reduce opacity.
+If you pass no arguments, the element is fully visible.
+
+```css
+.my-element {
+	filter: opacity(0.3);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwKQzae',
+  height: 450
+} %}
+</figure>
+
+### `saturate`
+
+{% BrowserCompat 'css.types.filter-function.saturate' %}
+
+The saturate filter is very similar to the `brightness` filter and accepts the same argument:
+number or percentage.
+Instead of increasing or decreasing the brightness effect,
+`saturate` increases or decreases color saturation.
+
+ ```css
+.my-element {
+	filter: saturate(155%);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BapYgQg',
+  height: 450
+} %}
+</figure>
+
+### `sepia`
+
+{% BrowserCompat 'css.types.filter-function.sepia' %}
+
+You can add a sepia tone effect with this filter that works like `grayscale()`.
+The sepia tone is a photographic printing technique that converts black tones to brown tones to warm them up.
+You can pass a number or percentage as the argument for `sepia()`
+which increases or decreases the effect.
+Passing no arguments adds a full sepia effect (equivalent to `sepia(100%)`).
+
+```css
+.my-element {
+	filter: sepia(70%);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNRMqpb',
+  height: 450
+} %}
+</figure>
+
+### `hue-rotate`
+
+{% BrowserCompat 'css.types.filter-function.hue-rotate' %}
+
+You learned about how the hue in `hsl` references a rotation of the color wheel in the
+[colors lesson](/learn/css/color) and this filter works in a similar way.
+If you pass an angle, such as degrees or turns,
+it shifts the hue of all the element's colors,
+changing the part of the color wheel it references. If you pass no argument, it does nothing.
+
+```css
+.my-element {
+	filter: hue-rotate(120deg);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExZQBWw',
+  height: 450
+} %}
+</figure>
+
+### `drop-shadow`
+
+{% BrowserCompat 'css.types.filter-function.drop-shadow' %}
+
+You can apply a curve-hugging drop shadow like you would in a design tool,
+such as Photoshop with
+[`drop-shadow`](https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow()).
+This shadow is applied to an alpha mask which makes it very useful for adding a shadow to a cutout image.
+The `drop-shadow` filter takes a shadow parameter which contains space separated offset-x, offset-y, blur and color values.
+It is almost identical to `box-shadow`,
+but the `inset` keyword and spread value are not supported.
+
+```css
+.my-element {
+	filter: drop-shadow(5px 5px 10px orange);
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoWQrJr',
+  height: 450
+} %}
+</figure>
+
+Learn more about the different types of shadows in the [shadows](/learn/css/shadows) module.
+
+### `url`
+
+{% BrowserCompat 'svg.elements.filter' %}
+
+The `url` filter allows you to apply an SVG filter from a linked SVG element or file.
+You can
+[read more about SVG filters here](https://developer.mozilla.org/docs/Web/SVG/Element/filter)
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRNgyp',
+  height: 450
+} %}
+</figure>
+
+## Backdrop filter
+
+{% BrowserCompat 'css.properties.backdrop-filter' %}
+
+The [backdrop-filter](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)
+property accepts all of the same filter function values as `filter`.
+The difference between `backdrop-filter` and `filter`
+is that the `backdrop-filter` property only applies the filters to the background,
+where the `filter` property applies it to the whole element.
+
+The example right at the start of this lesson is the perfect example,
+because you don't want the text to be blurred and ideally you don't want to have to add extra HTML elements.
+Being able to apply filters only to the backdrop enables that.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKaQLoL'
+} %}
+</figure>
+
+{% Assessment 'filters' %}
diff --git a/src/site/content/en/learn/css/flexbox/conclusion.assess.yml b/src/site/content/en/learn/css/flexbox/conclusion.assess.yml
new file mode 100644
index 00000000000..254176125ad
--- /dev/null
+++ b/src/site/content/en/learn/css/flexbox/conclusion.assess.yml
@@ -0,0 +1,61 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To vertically align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Nice"
+      - content: "justify keywords"
+        rationale: "Sorry"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: To horizontally align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Sorry"
+      - content: "justify keywords"
+        rationale: "Nice"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: |
+      By default, flex items are aligned to `stretch`. If you want content
+      size used for child items, which of the following styles would you use?
+    options:
+      - content: "`justify-content: flex-start`"
+        rationale: "The justify property is for horizontal alignment, not
+        vertical."
+      - content: "`align-content: start`"
+        rationale: "`content` aligns flex lines, not child item alignment."
+      - content: "`height: auto`"
+        rationale: "This will have no effect."
+      - content: "`align-items: flex-start`"
+        rationale: "Yes, we want to vertically align them to the 'top' or start,
+        which removes the default stretch value and instead uses the content
+        height."
diff --git a/src/site/content/en/learn/css/flexbox/flex.assess.yml b/src/site/content/en/learn/css/flexbox/flex.assess.yml
new file mode 100644
index 00000000000..a264d9e9016
--- /dev/null
+++ b/src/site/content/en/learn/css/flexbox/flex.assess.yml
@@ -0,0 +1,40 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The default `flex-direction` is
+    options:
+      - content: "`row`"
+        rationale: "By default, flexbox will fit items into a row, lining them
+        up at the start. With wrapping turned on, it will continue creating rows
+        for children to flow within."
+      - content: "`column`"
+        rationale: "Setting flex-direction to column is a great way to stack
+        elements, but it is not the default value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default, a flex container wraps children.
+    options:
+      - content: "true"
+        rationale: "Wrapping must be enabled."
+      - content: "false"
+        rationale: "Use `flex-wrap: wrap` with `display: flex` to wrap children"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: A flex child item appears squished, which flex property helps mitigate this?
+    options:
+      - content: "`flex-grow`"
+        rationale: "This property describes if elements can grow beyond a basis
+        size, not how it should behave under a basis."
+      - content: "`flex-shrink`"
+        rationale: "Yes, this property describes how to handle sizing if the
+        width is going below the basis."
+      - content: "`flex-basis`"
+        rationale: "This provides the starting point of sizing, but not how to
+        handle sizing scenarios where width goes below basis, like in a squished
+        scenario."
diff --git a/src/site/content/en/learn/css/flexbox/index.md b/src/site/content/en/learn/css/flexbox/index.md
new file mode 100644
index 00000000000..b3953c625cd
--- /dev/null
+++ b/src/site/content/en/learn/css/flexbox/index.md
@@ -0,0 +1,666 @@
+---
+title: Flexbox
+description: >
+  Flexbox is a layout mechanism designed for laying out groups of items in one dimension.
+  Learn how to use it in this module.
+audio:
+  title: 'The CSS Podcast - 010: Flexbox'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-21
+---
+
+A design pattern that can be tricky in responsive design is a sidebar that sits inline with some
+content. Where there is viewport space,
+this pattern works great,
+but where space is condensed,
+that rigid layout can become problematic.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRENWv',
+  height: 420
+} %}
+</figure>
+
+The Flexible Box Layout Model (flexbox) is a layout model designed for one-dimensional content.
+It excels at taking a bunch of items which have different sizes,
+and returning the best layout for those items.
+
+This is the ideal layout model for this sidebar pattern.
+Flexbox not only helps lay the sidebar and content out inline,
+but where there's not enough space remaining, the sidebar will break onto a new line.
+Instead of setting rigid dimensions for the browser to follow,
+with flexbox,
+you can instead provide flexible boundaries to hint how the content could display.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgERMp',
+  height: 400
+} %}
+</figure>
+
+## What can you do with a flex layout?
+
+Flex layouts have the following features,
+which you will be able to explore in this guide.
+
+- They can display as a row, or a column.
+- They respect the writing mode of the document.
+- They are single line by default,
+  but can be asked to wrap onto multiple lines.
+- Items in the layout can be visually reordered,
+  away from their order in the DOM.
+- Space can be distributed inside the items,
+  so they become bigger and smaller according to the space available in their parent.
+- Space can be distributed around the items and flex lines in a wrapped layout,
+  using the Box Alignment properties.
+- The items themselves can be aligned on the cross axis.
+
+## The main axis and the cross axis
+
+The key to understanding flexbox is to understand the concept of a main axis and a cross axis.
+The main axis is the one set by your `flex-direction` property.
+If that is `row` your main axis is along the row,
+if it is `column` your main axis is along the column.
+
+<figure>
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/xKtf0cHRw0xQyiyYuuyz.svg",
+alt="Three boxes next to each other with an arrow, pointing left to right. The arrow is labelled Main axis",
+width="800",
+height="320"
+%}
+</figure>
+
+Flex items move as a group on the main axis.
+Remember: we've got a bunch of things and we are trying to get the best layout for them as a group.
+
+The cross axis runs in the other direction to the main axis,
+so if `flex-direction` is `row` the cross axis runs along the column.
+
+<figure>
+{% Img
+  src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/5wCsZcBmK5L33LS7nOmP.svg", alt="Three boxes of different heights, next to each other with an arrow, pointing left to right. The arrow is labelled Main axis. There's another arrow pointing top to bottom. This one is labelled Cross axis", width="800", height="320" %}
+</figure>
+
+You can do two things on the cross axis.
+You can move the items individually or as a group, so they align against each other and the flex
+container. Also, if you have wrapped flex lines,
+you can treat those lines as a group to control how space is assigned to those lines.
+You will see how this all works in practice throughout this guide,
+for now just keep in mind that the main axis follows your `flex-direction`.
+
+## Creating a flex container
+
+Let's see how flexbox behaves by taking a group of different sized items and using flexbox to lay
+them out.
+
+```html
+<div class="container" id="container">
+  <div>One</div>
+  <div>Item two</div>
+  <div>The item we will refer to as three</div>
+</div>
+```
+
+To use flexbox you need to declare that you want to use a flex formatting context and not regular
+block and inline layout.
+Do this by changing the value of the `display` property to `flex`.
+
+```css
+.container {
+  display: flex;
+}
+```
+
+As you learned in the [layout guide](/learn/css/layout) this will give you a block-level box,
+with flex item children.
+The flex items immediately start exhibiting some flexbox behavior, using their **initial values**.
+
+{% Aside %}
+All CSS properties have initial values which control how they behave "out of the box"
+when you haven't applied any CSS to change that initial behavior.
+The children of our flex container become flex items as soon as their parent gets
+`display: flex`, so these initial values mean that we start seeing some flexbox behavior.
+{% endAside %}
+
+The initial values mean that:
+
+- Items display as a row.
+- They do not wrap.
+- They do not grow to fill the container.
+- They line up at the start of the container.
+
+## Controlling the direction of items
+
+Even though you haven't added a `flex-direction` property yet,
+the items display as a row because the initial value of `flex-direction` is `row`.
+If you want a row then you don't need to add the property.
+To change the direction, add the property and one of the four values:
+
+- `row`: the items lay out as a row.
+- `row-reverse:` the items lay out as a row from the end of the flex container.
+- `column`: the items lay out as a column.
+- `column-reverse` : the items lay out as a column from the end of the flex container.
+
+You can try out all of the values using our group of items in the demo below.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgKNXq'
+} %}
+</figure>
+
+### Reversing the flow of items and accessibility
+
+You should be cautious when using any properties that reorder the visual display
+away from how things are ordered in the HTML document,
+as it can negatively impact accessibility.
+The `row-reverse` and `column-reverse` values are a good example of this.
+The reordering only happens for the visual order, not the logical order.
+This is important to understand as the logical order is the order that a screen reader will read out
+the content,
+and anyone navigating using the keyboard will follow.
+
+You can see in the following video how in a reversed column layout,
+tabbing between links becomes disconnected as the keyboard navigation follows the DOM not the visual
+display.
+
+{% Video
+  src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4",
+  autoplay=true,
+  controls=true
+%}
+
+Anything which can change the order of items in flexbox or grid can cause this problem.
+Therefore any reordering should include thorough testing to check that it will not make your site
+hard to use for some people.
+
+For more information see:
+
+- [Content reordering](/content-reordering/)
+- [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+
+### Writing modes and direction
+
+Flex items lay out as a row by default.
+A row runs in the direction that sentences flow in your writing mode and script direction.
+This means that if you are working in Arabic,
+which has a right-to-left (rtl) script direction, the items will line up on the right.
+Tab order would also begin on the right as this is the way sentences are read in Arabic.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExZgwWN'
+} %}
+</figure>
+
+If you are working with a vertical writing mode,
+like some Japanese typefaces, then a row will run vertically, from top to bottom.
+Try changing the `flex-direction` in this demo which is using a vertical writing mode.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRaPXX',
+  height: 600
+} %}
+</figure>
+
+Therefore the way flex items behave by default is linked to the writing mode of the document.
+Most tutorials are written using English, or another horizontal,
+left to right writing mode.
+This would make it easy to assume that flex items line up **on the left**, and run **horizontally**.
+
+With the main and cross axis plus the writing mode to consider,
+the fact that we talk about **start** and **end** rather than top, bottom, left, and right in
+flexbox might be easier to understand.
+Each axis has a start and an end.
+The start of the main axis is referred to as **main-start**.
+So our flex items initially line up from main-start.
+The end of that axis is **main-end**.
+The start of the cross axis is **cross-start** and the end **cross-end**.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg",
+alt="A labelled diagram of the above terms",
+width="800",
+height="382" %}
+
+## Wrapping flex items
+
+The initial value of the `flex-wrap` property is `nowrap`.
+This means that if there is not enough space in the container the items will overflow.
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/VTUdLS9PeBziBvbOSc4q.jpg",
+alt="A flex container with nine items inside it, the items have shrunk down so one word is on a line
+but there is not enough room to show them side by side so the flex items have extended outside the
+box of the container.",
+width="800",
+height="282" %}
+  <figcaption>
+  Once they hit min-content size flex items will start to overflow their container
+  </figcaption>
+</figure>
+
+Items displaying using the initial values will shrink as small as they can,
+down to the `min-content` size before overflow happens.
+
+To cause the items to wrap add `flex-wrap: wrap` to the flex container.
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNRGdNZ',
+  height: 601
+} %}
+</figure>
+
+When a flex container wraps it creates multiple **flex lines**.
+In terms of space distribution,
+each line acts like a new flex container.
+Therefore if you are wrapping rows,
+it is not possible to get something in row 2 to line up with something above it in row 1.
+This is what is meant by flexbox being one-dimensional.
+You can control alignment in one axis, a row or a column,
+not both together as we can do in grid.
+
+### The flex-flow shorthand
+
+You can set the `flex-direction` and `flex-wrap` properties using the shorthand `flex-flow`.
+For example, to set `flex-direction` to `column` and allow items to wrap:
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+## Controlling space inside flex items
+
+Assuming our container has more space than is needed to display the items,
+the items line up at the start and do not grow to fill the space.
+They stop growing at their max-content size.
+This is because the initial value of the `flex-` properties is:
+
+- `flex-grow: 0`: items do not grow.
+- `flex-shrink: 1`: items can shrink smaller than their [`flex-basis`](https://developer.mozilla.org/docs/Web/CSS/flex-basis).
+- `flex-basis: auto`: items have a base size of `auto`.
+
+This can be represented by a keyword value of `flex: initial`.
+The `flex` shorthand property,
+or the longhands of `flex-grow`, `flex-shrink` and `flex-basis` are applied to the children of the
+flex container.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYxRebE'
+} %}
+</figure>
+
+To cause the items to grow,
+while allowing large items to have more space than small ones use `flex:auto`.
+You can try this using the demo above.
+This sets the properties to:
+
+- `flex-grow: 1`: items can grow larger than their `flex-basis`.
+- `flex-shrink: 1`: items can shrink smaller than their `flex-basis`.
+- `flex-basis: auto`: items have a base size of `auto`.
+
+Using `flex: auto` will mean that items end up different sizes,
+as the space that is shared between the items is shared out _after_ each item is laid out as
+max-content size.
+So a large item will gain more space.
+To force all of the items to be a consistent size and ignore the size of the content change
+`flex:auto` to `flex: 1` in the demo.
+
+This unpacks to:
+
+- `flex-grow: 1`: items can grow larger than their `flex-basis`.
+- `flex-shrink: 1`: items can shrink smaller than their `flex-basis`.
+- `flex-basis: 0`: items have a base size of `0`.
+
+Using `flex: 1` says that all items have zero size,
+therefore all of the space in the flex container is available to be distributed.
+As all items have a `flex-grow` factor of `1` they all grow equally and the space is shared equally.
+
+{% Aside %}
+There is also a value of `flex: none`,
+which will give you inflexible flex items that do not grow or shrink.
+This might be useful if you are purely using flexbox to access the alignment properties but don't
+want any flexible behavior.
+{% endAside %}
+
+### Allowing items to grow at different rates
+
+You don't have to give all items a `flex-grow` factor of `1`.
+You could give your flex items different `flex-grow` factors.
+In the demo below the first item has `flex: 1`, the second `flex: 2` and third `flex: 3`.
+As these items grow from `0` the available space in the flex container is shared into six.
+One part is given to the first item,
+two parts to the second,
+three parts to the third.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWRzEz'
+} %}
+</figure>
+
+You can do the same thing from a `flex-basis` of `auto`, though you will need to specify the three
+values.
+The first value being `flex-grow`,
+the second `flex-shrink`,
+and the third `flex-basis`.
+
+```css
+.item1 {
+  flex: 1 1 auto;
+}
+
+.item2 {
+  flex: 2 1 auto;
+}
+```
+
+This is a less common use case as the reason to use a `flex-basis` of `auto`
+is to allow the browser to figure out space distribution.
+If you wanted to cause an item to grow a little more than the algorithm decides however it might be
+useful.
+
+## Reordering flex items
+
+Items in your flex container can be reordered using the `order` property.
+This property allows the ordering of items in **ordinal groups**.
+Items are laid out in the direction dictated by `flex-direction`,
+lowest values first.
+If more than one item has the same value it will be displayed with the other items with that value.
+
+The example below demonstrates this ordering.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdRXoL'
+} %}
+</figure>
+
+{% Aside 'warning' %}
+Using `order` has the same problems as the `row-reverse` and `column-reverse`
+values of `flex-direction`.
+It would be very easy to create a disconnected experience for some users.
+Do not use `order` because you are fixing things being out of order in the document.
+If the items logically should be in a different order, change your HTML!
+{% endAside %}
+
+{% Assessment 'flex' %}
+
+## Flexbox alignment overview
+
+Flexbox brought with it a set of properties for aligning items and distributing space between items.
+These properties were so useful they have since been moved into their own specification,
+you'll encounter them in Grid Layout too.
+Here you can find out how they work when you are using flexbox.
+
+The set of properties can be placed into two groups.
+Properties for space distribution, and properties for alignment.
+The properties which distribute space are:
+
+- `justify-content`: space distribution on the main axis.
+- `align-content`: space distribution on the cross axis.
+- `place-content`: a shorthand for setting both of the above properties.
+
+The properties used for alignment in flexbox:
+
+- `align-self`: aligns a single item on the cross axis.
+- `align-items`: aligns all of the items as a group on the cross axis.
+
+If you are working on the main axis then the properties begin with `justify-`.
+On the cross axis they begin with `align-`.
+
+## Distributing space on the main axis
+
+With the HTML used earlier, the flex items laid out as a row, there is space on the main axis.
+The items are not big enough to completely fill the flex container.
+The items line up at the start of the flex container because the initial value of `justify-content`
+is `flex-start`.
+The items line up at the start and any extra space is at the end.
+
+Add the `justify-content` property to the flex container,
+give it a value of `flex-end`,
+and the items line up at the end of the container and the spare space is placed at the start.
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+
+You can also distribute the space between the items with `justify-content: space-between`.
+
+Try some of the values in the demo,
+and [see MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content) for the full set of
+possible values.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjERpGb'
+} %}
+</figure>
+
+{% Aside %}
+For the `justify-content` property to do anything you have to have spare space in your container on
+the main axis.
+If your items fill the axis then there is no space to share out so the property won't do anything.
+{% endAside %}
+
+### With `flex-direction: column`
+
+If you have changed your `flex-direction` to `column` then `justify-content` will work on
+the column.
+To have spare space in your container when working as a column you need to give your container a
+`height` or `block-size`.
+Otherwise you won't have spare space to distribute.
+
+Try the different values, this time with a flexbox column layout.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgwLgz',
+  height: 600
+} %}
+</figure>
+
+## Distributing space between flex lines
+
+With a wrapped flex container you might have space to distribute on the cross axis.
+In this case you can use the `align-content` property with the same values as `justify-content`.
+Unlike `justify-content` which aligns items to `flex-start` by default,
+the initial value of `align-content` is `stretch`.
+Add the property `align-content` to the flex container to change that default behavior.
+
+```css
+.container {
+  align-content: center;
+}
+```
+
+Try this out in the demo.
+The example has wrapped lines of flex items,
+and the container has a `block-size` in order that we have some spare space.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poREawo'
+} %}
+</figure>
+
+### The `place-content` shorthand
+
+To set both `justify-content` and `align-content` you can use `place-content` with one
+or two values.
+A single value will be used for both axes,
+if you specify both the first is used for `align-content` and the second for `justify-content`.
+
+```css
+.container {
+  place-content: space-between;
+  /* sets both to space-between */
+}
+
+.container {
+  place-content: center flex-end;
+  /* wrapped lines on the cross axis are centered,
+  on the main axis items are aligned to the end of the flex container */
+}
+```
+
+## Aligning items on the cross-axis
+
+On the cross axis you can also align your items within the flex line using `align-items`
+and `align-self`.
+The space available for this alignment will depend on the height of the flex container,
+or flex line in the case of a wrapped set of items.
+
+The initial value of `align-self` is `stretch`,
+which is why flex items in a row stretch to the height of the tallest item by default.
+To change this, add the `align-self` property to any of your flex items.
+
+```css
+.container {
+  display: flex;
+}
+
+.item1 {
+  align-self: flex-start;
+}
+```
+
+Use any of the following values to align the item:
+
+- `flex-start`
+- `flex-end`
+- `center`
+- `stretch`
+- `baseline`
+
+See [the full list of values on MDN](https://developer.mozilla.org/docs/Web/CSS/align-self).
+
+The next demo has a single line of flex items with `flex-direction: row`.
+The last item defines the height of the flex container.
+The first item has the `align-self` property with a value of `flex-start`.
+Try changing the value on that property to see how it moves within its space on the cross axis.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwKGQee',
+  height: 600
+} %}
+</figure>
+
+The `align-self` property is applied to individual items.
+The `align-items` property can be applied to the flex container
+to set all of the individual `align-self` properties as a group.
+
+```css
+.container {
+  display: flex;
+  align-items: flex-start;
+}
+```
+
+In this next demo try changing the value of `align-items` to align all of the items on the cross
+axis as a group.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdKmby',
+  height: 600
+} %}
+</figure>
+
+## Why is there no justify-self in flexbox?
+
+Flex items act as a group on the main axis.
+So there is no concept of splitting an individual item out of that group.
+
+In grid layout the `justify-self` and `justify-items` properties work on the inline axis
+to do alignment of items on that axis within their grid area.
+Due to the way that flex layouts treat items as a group,
+these properties are not implemented in a flex context.
+
+It is worth knowing that flexbox does work very nicely with auto margins.
+If you come across a need to split off one item from a group,
+or separate the group into two groups you can apply a margin to do this.
+In the example below the last item has a left margin of `auto`.
+The auto margin absorbs all space in the direction it is applied.
+This means that it pushes the item over to the right, thus splitting the groups.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRELbR'
+} %}
+</figure>
+
+## How to center an item vertically and horizontally
+
+The alignment properties can be used to center an item inside another box.
+The `justify-content` property aligns the item on the main axis,
+which is row. The `align-items` property on the cross axis.
+
+```css
+.container {
+  width: 400px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+{% Aside %}
+In the future we may be able to do this alignment without needing to make the parent a
+flex container.
+The alignment properties are specified for block and inline layout.
+At present no browser has implemented these.
+However, switching into a flex formatting context gives you access to the properties.
+If you need to align something it's a great way to do it.
+{% endAside %}
+
+{% Assessment 'conclusion' %}
+
+## Resources
+
+- [MDN CSS Flexible Box Layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) includes a series of detailed guides with examples.
+- [CSS Tricks Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [What Happens When You Create a Flexbox Flex Container](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [Everything You Need To Know About Alignment In Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [How Big Is That Flexible Box?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [Use Cases For Flexbox](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
+- [Inspect and debug CSS Flexbox layouts in Chrome DevTools](https://developer.chrome.com/docs/devtools/css/flexbox/)
diff --git a/src/site/content/en/learn/css/focus/focus.assess.yml b/src/site/content/en/learn/css/focus/focus.assess.yml
new file mode 100644
index 00000000000..365dc467b81
--- /dev/null
+++ b/src/site/content/en/learn/css/focus/focus.assess.yml
@@ -0,0 +1,41 @@
+setLeader: Test your knowledge of focus
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,5"
+    stem: Which of the following are automatically focusable elements?
+    options:
+      - content: "`<a>`"
+        rationale: "🎉"
+      - content: "`<p>`"
+        rationale: "Try again!"
+      - content: "`<button>`"
+        rationale: "🎉"
+      - content: "`<input>`"
+        rationale: "🎉"
+      - content: "`<output>`"
+        rationale: "Try again!"
+      - content: "`<select>`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,3"
+    stem: Which of the following input devices can set focus?
+    options:
+      - content: Gamepad
+        rationale: "Gamepads often send keyboard events when their buttons are
+        pressed."
+      - content: Keyboard
+        rationale: "Definitely causes focus when used to navigate the web."
+      - content: Mouse
+        rationale: "A mouse requires vision and no longer puts focus on elements
+        when used. All browsers used to put focus on things like buttons when
+        clicked, but that has changed."
+      - content: Assistive technology (screen reader, switch, etc)
+        rationale: "Definitely causes focus when used to navigate the web."
+      - content: A potato
+        rationale: "Sorry, while a potato can be used as a pointer on touch
+        screens, it does not cause focus after interacting with on screen
+        inputs."
diff --git a/src/site/content/en/learn/css/focus/index.md b/src/site/content/en/learn/css/focus/index.md
new file mode 100644
index 00000000000..93e147616a6
--- /dev/null
+++ b/src/site/content/en/learn/css/focus/index.md
@@ -0,0 +1,164 @@
+---
+title: Focus
+description: >
+  Understand the importance of focus in your web applications.
+  You'll find out how to manage focus,
+  and how to make sure the path through your page works for people using a mouse,
+  and those using the keyboard to navigate.
+audio:
+  title: 'The CSS Podcast - 018: Focus'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_018_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-30
+---
+
+On your webpage,
+you click a link that skips the user to the main content of the website.
+These are often referred to as skip links, or anchor links.
+When that link is activated by a keyboard, using the *tab* and *enter* keys,
+the main content container has a focus ring around it. Why is that?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRWRjp'
+} %}
+</figure>
+
+This is because the `<main>` has a `tabindex="-1"` attribute value,
+which means it can be programmatically focused.
+When the `<main>` is targeted—because the `#main-content`
+in the browser URL bar matches the `id`—it receives programmatic focus.
+It's tempting to remove the focus styles in these situations,
+but handling focus appropriately and with care helps to create a good,
+accessible, user experience.
+It can also be a great place to add some interest to interactions.
+
+## Why is focus important?
+
+As a web developer,
+it's your job to make a website accessible and inclusive to all.
+Creating accessible focus states with CSS is a part of this responsibility.
+
+Focus styles assist people who use a device such as a keyboard or a
+[switch control](https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/)
+to navigate and interact with a website.
+If an element receives focus and there is no visual indication,
+a user may lose track of what is in focus.
+This can create navigation issues and result in unwanted behaviour if,
+say, the wrong link is followed.
+
+{% Aside %}
+Learn more about the importance of focus for accessibility in [Learn Accessibility: Focus](/learn/accessibility/focus/), 
+and more information on how to manage focus in HTML in [Learn HTML: Focus](/learn/html/focus/).
+{% endAside%}
+
+## How elements get focus
+
+Certain elements are automatically focusable;
+these are elements that accept interaction and input, such as `<a>`,
+`<button>`, `<input>` and `<select>`.
+In short, all form elements, buttons and links.
+You can typically navigate a website's focusable elements using the *tab* key to move forward on the page, and *shift* + *tab* to move backward.
+
+There is also a HTML attribute called `tabindex` which allows you to change the tabbing index—which is
+order in which elements are focused—every time someone presses their <kbd>tab</kbd> key,
+or focus is shifted with a hash change in the URL or by a JavaScript event.
+If `tabindex` on a HTML element is set to `0`,
+it can receive focus via the <kbd>tab</kbd> key and it will honour the global tab index,
+which is defined by the document source order.
+
+If you set `tabindex` to `-1`, it can only receive focus programmatically,
+which means only when a JavaScript event happens
+or a hash change (matching the element's `id` in the URL) occurs.
+If you set `tabindex` to be anything higher than `0`,
+it will be removed from the global tab index,
+defined by document source order.
+Tabbing order will now be defined by the value of `tabindex`,
+so an element with `tabindex="1"` will receive focus before an element with `tabindex="2"`, for example.
+
+{% Aside 'warning' %}
+Honoring document source order is really important,
+and focus order should only be changed if you **absolutely have to change it**.
+This applies both when setting `tabindex` **and** changing visual order with CSS layout,
+such as flexbox and grid.
+Anything that creates unpredictable focus on the web
+can create an inaccessible experience for the user.
+{% endAside %}
+
+## Styling focus
+
+The default browser behavior when an element receives focus is to present a focus ring.
+This focus ring varies between both browser and operating systems.
+
+{% Video
+  src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/zVu8FoqteYCP1sTj3uCm.mp4",
+  controls="true",
+  autoplay="true"
+%}
+
+This behavior can be changed with CSS,
+using the `:focus`, `:focus-within` and `:focus-visible`
+pseudo-classes that you learned about in the
+[pseudo-classes lesson](/learn/css/pseudo-classes).
+It is important to set a focus style which has **contrast** with the default style of an element.
+For example, a common approach is to utilize the `outline` property.
+
+```css
+a:focus {
+  outline: 2px solid slateblue;
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELXLMw'
+} %}
+</figure>
+
+The `outline` property could appear too close to the text of a link,
+but the `outline-offset` property can help with that,
+as it adds extra visual `padding` without affecting the geometric size that the element fills.
+A positive number value for `outline-offset` will push the outline outwards,
+a negative value will pull the outline inwards.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgXgQx'
+} %}
+</figure>
+
+Currently in some browsers,
+if you have a `border-radius` set on your element and use `outline`,
+it won't match—the outline will have sharp corners.
+Due to this,
+it is tempting to use a `box-shadow` with a small blur radius because `box-shadow` clips to the shape,
+honouring `border-radius`,
+but **this style will not show in Windows High Contrast Mode**.
+This is because Windows High Contrast Mode doesn't apply shadows,
+and mostly ignores background images to favor the user's preferred settings.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgogyM'
+} %}
+</figure>
+
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/MqMoKpLJ2rF5RRkn5jEO.mp4" %}
+
+## In summary
+
+Creating a focus state that has contrast with an element's default state is incredibly important. The default browser styles do this already for you, but if you want to change this behaviour, remember the following:
+
+- Avoid using `outline: none` on an element that can receive keyboard focus.
+- Avoid replacing `outline` styles with `box-shadow`.
+as they don't show up in Windows High Contrast Mode.
+- Only set a positive value for `tabindex` on an HTML element if you absolutely have to.
+- Make sure the focus state is very clear vs the default state.
+
+{% Assessment 'focus' %}
diff --git a/src/site/content/en/learn/css/functions/functions.assess.yml b/src/site/content/en/learn/css/functions/functions.assess.yml
new file mode 100644
index 00000000000..28f7f9e9fa8
--- /dev/null
+++ b/src/site/content/en/learn/css/functions/functions.assess.yml
@@ -0,0 +1,54 @@
+setLeader: Test your knowledge of functions
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: CSS functions can be identified by which characters?
+    options:
+      - content: "`[]`"
+        rationale: "These characters are for arrays in Javascript."
+      - content: "`{}`"
+        rationale: "These characters wrap rules in CSS."
+      - content: "`()`"
+        rationale: "Functions use these characters to wrap arguments yep!"
+      - content: "`::`"
+        rationale: "These characters are for pseudo-elements in CSS."
+      - content: "`:`"
+        rationale: "These characters are for pseudo-classes in CSS."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: CSS has built in math functions?
+    options:
+      - content: "True"
+        rationale: "There's a lot of them, and more being added to specs and
+        browsers!"
+      - content: "False"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "A `calc()` function can be placed inside of another `calc()` like `font-size: calc(10px + calc(5px * 3));`"
+    options:
+      - content: "True"
+        rationale: "🎉"
+      - content: "False"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,4,5"
+    stem: Which of the following are CSS shape functions?
+    options:
+      - content: "`ellipse()`"
+        rationale: "🎉"
+      - content: "`square()`"
+        rationale: "Try again!"
+      - content: "`circle()`"
+        rationale: "🎉"
+      - content: "`rect()`"
+        rationale: "Try again!"
+      - content: "`inset()`"
+        rationale: "🎉"
+      - content: "`polygon()`"
+        rationale: "🎉"
diff --git a/src/site/content/en/learn/css/functions/index.md b/src/site/content/en/learn/css/functions/index.md
new file mode 100644
index 00000000000..7d1c74fb593
--- /dev/null
+++ b/src/site/content/en/learn/css/functions/index.md
@@ -0,0 +1,455 @@
+---
+title: Functions
+description: >
+  CSS has a range of inbuilt functions.
+  In this module you will find out about some of the key functions,
+  and how to use them.
+audio:
+  title: 'The CSS Podcast - 020: Functions'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_020_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-04
+---
+
+So far in this course, you've been exposed to several CSS functions.
+In the [grid](/learn/css/grid) module,
+you were introduced to `minmax()` and `fit-content()`,
+which help you size elements.
+In the [color](/learn/css/color) module,
+you were introduced to `rgb()`, and `hsl()`, which help you define colors.
+
+Like many other programming languages,
+[CSS has **a lot** of built-in functions](https://developer.mozilla.org/docs/Web/CSS/CSS_Functions)
+that you can access whenever you need them.
+
+Every CSS function has a specific purpose,
+in this lesson, you'll get  a high-level overview,
+giving you a much better understanding of where and how to use them.
+
+## What is a function?
+
+A function is a named, self-contained piece of code that completes a specific task.
+A function is named so you can call it within your code and you can pass data into the function.
+This is known as passing arguments.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/OCUXCuKLxHwZYFIIErUd.svg",
+alt="A diagram of a function as described above",
+width="800",
+height="311" %}
+
+A lot CSS functions are *pure functions*,
+which means that if you pass the same arguments into them,
+they will always give you the same result back,
+regardless of what is happening in the rest of your code.
+These functions will often re-compute as values change in your CSS,
+similar to other elements in the language,
+such as computed cascaded values like `currentColor`.
+
+In CSS, you can only use the provided functions,
+rather than write your own,
+but functions can be nested within each other in some contexts,
+giving them more flexibility.
+We'll cover that in more detail, later in this module.
+
+## Functional selectors
+
+```css
+.post :is(h1, h2, h3) {
+	line-height: 1.2;
+}
+```
+
+You learned about functional selectors in the
+[pseudo-classes module](/learn/css/pseudo-classes)
+which detailed functions like
+[`:is()`](https://developer.mozilla.org/docs/Web/CSS/:is) and
+[`:not()`](https://developer.mozilla.org/docs/Web/CSS/:not).
+The arguments passed into these functions are CSS selectors,
+which are then evaluated.
+If there is a match with elements,
+the rest of the **CSS rule** will be applied to them.
+
+## Custom properties and `var()`
+
+```css
+:root {
+	--base-color: #ff00ff;
+}
+
+.my-element {
+	background: var(--base-color);
+}
+```
+
+A custom property is a variable which allows you to tokenize values in your CSS code.
+[Custom properties are also affected by the cascade](https://piccalil.li/tutorial/getting-started-with-css-custom-properties/)
+which means they can be contextually manipulated or redefined.
+A custom property must be prefixed with two dashes (`--`) and are case sensitive.
+
+The [`var()`](https://developer.mozilla.org/docs/Web/CSS/var())
+function takes one required argument:
+the custom property that you are trying to return as a value.
+In the above snippet, the `var()` function has `--base-color` passed as an argument.
+If `--base-color` is defined, then `var()` will return the value.
+
+```css
+.my-element {
+	background: var(--base-color, hotpink);
+}
+```
+
+You can also pass a fallback declaration value into the `var()` function.
+This means that if `--base-color` can't be found,
+the passed **declaration** will be used instead, which in this sample's case is the `hotpink` color.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNPOjP',
+  tab: 'css,result',
+  height: 250
+} %}
+</figure>
+
+## Functions that return a value
+
+The `var()` function is just one of the CSS functions that return a value.
+Functions like
+[`attr()`](https://developer.mozilla.org/docs/Web/CSS/attr()) and
+[`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) follow a similar structure to `var()`—
+you pass one or more arguments and use them on the **right side** of your CSS declaration.
+
+```css
+a::after {
+  content: attr(href);
+}
+```
+
+The `attr()` function here
+is taking the content of the `<a>` element's `href` attribute
+and setting it as the `content` of the `::after` pseudo-element.
+If the value of the `<a>` element's `href` attribute was to change,
+this would automatically be reflected in this `content` attribute.
+
+```css
+.my-element {
+	background-image: url('/path/to/image.jpg');
+}
+```
+
+The `url()` function takes a **string** URL and is used to load images, fonts and content.
+If a valid URL isn't passed in or the resource that the URL points to can't be found,
+nothing will be returned by the `url()` function.
+
+## Color functions
+
+You learned all about color functions in the [color](/learn/css/color) module.
+If you haven't read that one yet, it is strongly recommended that you do.
+
+Some available color functions in CSS are
+`rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, `lab()` and `lch()`.
+All of these have a similar form where configuration arguments are passed in and a color is returned back.
+
+## Mathematical expressions
+
+Like many other programming languages,
+CSS provides useful mathematical functions to assist with various types of calculation.
+
+### calc()
+{% BrowserCompat 'css.types.calc' %}
+
+The [`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc())
+function takes a single mathematical expression as its parameter.
+This mathematical expression can be a mix of types,
+such as length, number, angle and frequency. Units can be mixed too.
+
+```css
+.my-element {
+	width: calc(100% - 2rem);
+}
+```
+
+In this example, the `calc()` function is being used to size an element's width
+as 100% of its containing parent element,
+then removing `2rem` off that computed value.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PopYema'
+} %}
+</figure>
+
+```css
+:root {
+  --root-height: 5rem;
+}
+
+.my-element {
+  width: calc(calc(10% + 2rem) * 2);
+  height: calc(var(--root-height) * 3);
+}
+```
+
+The `calc()` function can be nested inside another `calc()` function.
+You can also pass custom properties in a `var()` function as part of an expression.
+
+### `min()` and `max()`
+
+{% BrowserCompat 'css.types.min' %}
+
+The [`min()`](https://developer.mozilla.org/docs/Web/CSS/min())
+function returns the smallest computed value of the one or more passed arguments.
+The [`max()`](https://developer.mozilla.org/docs/Web/CSS/max())
+function does the opposite: get the largest value of the one or more passed arguments.
+
+```css
+.my-element {
+  width: min(20vw, 30rem);
+  height: max(20vh, 20rem);
+}
+```
+
+In this example,
+the width should be the smallest value between `20vw`
+—which is 20% of the **viewport width**—and `30rem`.
+The height should be the largest value between `20vh`
+—which is 20% of the **viewport height**—and `20rem`.
+
+{% Aside %}
+We cover units like `vw` and `vh` in the [sizing](/learn/css/sizing) units module.
+{% endAside %}
+
+### clamp()
+{% BrowserCompat 'css.types.clamp' %}
+
+The [`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp())
+function takes three arguments: the minimum size,
+the ideal size and the maximum.
+
+```css
+h1 {
+  font-size: clamp(2rem, 1rem + 3vw, 3rem);
+}
+```
+
+In this example, the `font-size` will be fluid based on the width of the viewport.
+The `vw` unit is added to a `rem` unit to assist with screen zooming,
+because regardless of zoom level a `vw` unit will be the same size.
+Multiplying by a `rem` unit—based on the root font size—
+provides the `clamp()` function with a relative calculation point.
+
+You can learn more about the `min()`, `max()`, and `clamp`() functions in
+[this article](/min-max-clamp/).
+
+## Shapes
+
+The
+[`clip-path`](https://developer.mozilla.org/docs/Web/CSS/clip-path),
+[`offset-path`](https://developer.mozilla.org/docs/Web/CSS/offset-path) and
+[`shape-outside`](https://developer.mozilla.org/docs/Web/CSS/shape-outside)
+CSS properties use shapes to visually clip your box or provide a shape for content to flow around.
+
+There are shape functions that can be used with both of these properties.
+Simple shapes such as
+[`circle()`](https://developer.mozilla.org/docs/Web/CSS/basic-shape/circle()),
+[`ellipse()`](https://developer.mozilla.org/docs/Web/CSS/basic-shape/ellipse()) and
+[`inset()`](https://developer.mozilla.org/docs/Web/CSS/basic-shape/inset())
+take configuration arguments to size them.
+More complex shapes, such as
+[`polygon()`](https://developer.mozilla.org/docs/Web/CSS/basic-shape/polygon())
+take comma separated pairs of X and Y axis values to create custom shapes.
+
+```css
+.circle {
+  clip-path: circle(50%);
+}
+
+.polygon {
+  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjYNNd'
+} %}
+</figure>
+
+Like `polygon()`, there is also a `path()` function which takes an SVG fill rule as an argument.
+This allows for highly complex shapes that can be drawn in a graphics tool
+such as Illustrator or Inkscape and then copied into your CSS.
+
+## Transforms
+
+Lastly in this overview of CSS functions are the transform functions,
+which skew, resize and even change the depth of an element.
+All of the following functions are used with the `transform` property.
+
+### Rotation
+{% BrowserCompat 'css.types.transform-function.rotate' %}
+
+You can rotate an element using the
+[`rotate()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate())
+function, which will rotate an element on its center axis.
+You can also use the
+[`rotateX()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateX()),
+[`rotateY()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateY()) and
+[`rotateZ()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateZ())
+functions to rotate an element on a specific axis instead.
+You can pass degree, turn and radian units to determine the level of rotation.
+
+```css
+.my-element {
+  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJOWzP'
+} %}
+</figure>
+
+The [`rotate3d()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate3d())
+function takes four arguments.
+
+{% BrowserCompat 'css.types.transform-function.rotate3d' %}
+
+The first 3 arguments are numbers, which define the X, Y and Z coordinates.
+The fourth argument is the rotation which,
+like the other rotation functions, accepts degrees, angle and turns.
+
+```css
+.my-element {
+  transform: rotate3d(1, 1, 1, 10deg);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrOJxa'
+} %}
+</figure>
+
+### Scale
+{% BrowserCompat 'css.types.transform-function.scale' %}
+
+You can change the scaling of an element with `transform` and the
+[`scale()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/scale()) function.
+The function accepts one or two numbers as a value which determine a positive or negative scaling.
+If you only define one number argument,
+both the X and Y axis will be scaled the same and defining both is a shorthand for X and Y.
+Just like `rotate()`,
+there are
+[`scaleX()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleX()),
+[`scaleY()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleY()) and
+[`scaleZ()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleZ())
+functions to scale an element on a specific axis instead.
+
+```css
+.my-element {
+  transform: scaleX(1.2) scaleY(1.2);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgWOoq'
+} %}
+</figure>
+
+Also like the `rotate` function, there is a
+[`scale3d()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/scale3d()) function.
+This is similar to `scale()`, but it takes three arguments: the X, Y and Z scale factor.
+
+### Translate
+{% BrowserCompat 'css.types.transform-function.translate' %}
+
+The [`translate()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/translate())
+functions move an element while it maintains its position in the document flow.
+They accept length and percentage values as arguments.
+The `translate()` function translates an element along the X axis if one argument is defined,
+and translates an element along the X and Y axis if both arguments are defined.
+
+```css
+.my-element {
+  transform: translatex(40px) translatey(25px);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwKjWgP'
+} %}
+</figure>
+
+You can—just like with other transform functions—use specific functions for a specific axis,
+using
+[`translateX`](https://developer.mozilla.org/docs/Web/CSS/transform-function/translateX()),
+[`translateY`](https://developer.mozilla.org/docs/Web/CSS/transform-function/translateY()) and
+[`translateZ`](https://developer.mozilla.org/docs/Web/CSS/transform-function/translateZ()).
+You can also use
+[`translate3d`](https://developer.mozilla.org/docs/Web/CSS/transform-function/translate3d())
+which allows you to define the X, Y and Z translation in one function.
+
+### Skewing
+{% BrowserCompat 'css.types.transform-function.skew' %}
+
+You can skew an element, using the
+[`skew()`](https://developer.mozilla.org/docs/Web/CSS/transform-function/skew())
+functions which accept angles as arguments.
+The `skew()` function works in a very similar way to `translate()`.
+If you only define one argument, it will only affect the X axis and if you define both,
+it will affect the X and Y axis.
+You can also use
+[`skewX`](https://developer.mozilla.org/docs/Web/CSS/transform-function/skewX()) and
+[`skewY`](https://developer.mozilla.org/docs/Web/CSS/transform-function/skewY()) to affect each axis independently.
+
+```css
+.my-element {
+  transform: skew(10deg);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEOYMq'
+} %}
+</figure>
+
+### Perspective
+{% BrowserCompat 'css.properties.perspective' %}
+
+Lastly, you can use the
+[`perspective`](https://developer.mozilla.org/docs/Web/CSS/perspective) property
+—which is part of the transform family of properties—to alter the distance between the user and the Z plane.
+This gives the feeling of distance and can be used to create a depth of field in your designs.
+
+This example by David Desandro, from their very useful article, shows how it can be used,
+along with `perspective-origin-x` and `perspective-origin-y` properties to create truly 3D experiences.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bMqZmr'
+} %}
+</figure>
+
+## Animation functions, gradients and filters
+
+CSS also provides functions that help you [animate](/learn/css/animations) elements,
+apply [gradients](/learn/css/gradients) to them and use graphical [filters](/learn/css/filters) to manipulate how they look.
+To keep this module as concise as possible,
+they are covered in the linked modules.
+They all follow a similar structure to the functions demonstrated in this module.
+
+{% Assessment 'functions' %}
diff --git a/src/site/content/en/learn/css/gradients/gradients.assess.yml b/src/site/content/en/learn/css/gradients/gradients.assess.yml
new file mode 100644
index 00000000000..56f01692f50
--- /dev/null
+++ b/src/site/content/en/learn/css/gradients/gradients.assess.yml
@@ -0,0 +1,27 @@
+setLeader: Test your knowledge of gradients
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the *minimum* number of colors required to create a gradient?
+    options:
+      - content: "1"
+        rationale: "Try again!"
+      - content: "2"
+        rationale: "They could be the same color and appear solid, but yes, at
+        least 2 colors are required."
+      - content: "3"
+        rationale: "Try again!"
+      - content: "4"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Elements can have multiple gradients as a background?
+    options:
+      - content: "True"
+        rationale: "The `background-image` property allows many gradients, just
+        separate them with a comma."
+      - content: "False"
+        rationale: "Oh, but they can!"
diff --git a/src/site/content/en/learn/css/gradients/index.md b/src/site/content/en/learn/css/gradients/index.md
new file mode 100644
index 00000000000..1a56c8d5263
--- /dev/null
+++ b/src/site/content/en/learn/css/gradients/index.md
@@ -0,0 +1,279 @@
+---
+title: Gradients
+description: >
+  In this module you will find out how to use the various types of gradients available in CSS.
+  Gradients can be used to create a whole host of useful effects,
+  without needing to create an image using a graphics application.
+audio:
+  title: 'The CSS Podcast - 021: Gradients'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP021_TCP_CSS_Podcast_Episode_021_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-03
+---
+
+Imagine you've got a site to build and at the top,
+there's an intro with a heading, summary and a button.
+The designer has handed over a design which has a purple background for this intro.
+The only problem is the background features two shades of purple as a gradient.
+How do you do this?
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/0T5kGhQWJTLUclxSWipH.svg",
+alt="A dark to light purple gradient background with heading, paragraph and link",
+width="800",
+height="411" %}
+
+You might initially think that you're going to need to export an image from your design tool for this,
+but you can use a
+[`linear-gradient`](https://developer.mozilla.org/docs/Web/CSS/linear-gradient())
+instead.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpzdoV'
+} %}
+</figure>
+
+A gradient is an image and can be used anywhere images can be used,
+but it's created with CSS and is made up with colors, numbers and angles.
+CSS gradients allow you to create anything from a smooth gradient between two colors,
+right up to impressive artwork by mixing and repeating multiple gradients.
+
+## Linear gradient
+{% BrowserCompat 'css.types.image.gradient.linear-gradient' %}
+
+The [`linear-gradient()`](https://developer.mozilla.org/docs/Web/CSS/linear-gradient())
+function generates an image of two or more colors, progressively.
+It takes multiple arguments, but in its simplest configuration,
+you can pass some colors like this and it will automatically split them evenly, while blending them.
+
+```css
+.my-element {
+	background: linear-gradient(black, white);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRqPoZ',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+You can also pass an angle or keywords that represent an angle.
+If you choose to use keywords, specify a direction after the `to` keyword.
+This means if you want a gradient that is black and white,
+that runs from left (black) to right (white),
+you would specify the angle as `to right` as the first argument.
+
+```css
+.my-element {
+	background: linear-gradient(to right, black, white);
+}
+```
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNPqXW',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+A color stop value defined where a color stops and mixes with its neighbors.
+For a gradient starting with a dark shade of red running at a 45deg angle,
+at 30% of the size of the gradient changing to a lighter red: it looks like this.
+
+```css
+.my-element {
+	background: linear-gradient(45deg, darkred 30%, crimson);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdwNZr',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+You can add as many colors and color stops as you like in a `linear-gradient()`,
+and you can layer gradients on top of each other by separating each gradient with a comma.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpVZbj',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Radial gradient
+{% BrowserCompat 'css.types.image.gradient.radial-gradient' %}
+
+To create a gradient that radiates in a circular fashion, the
+[`radial-gradient()`](https://developer.mozilla.org/docs/Web/CSS/radial-gradient())
+function steps in to help.
+It's similar to `linear-gradient()`,
+but instead of specifying an angle, you optionally specify a position and ending shape.
+If you just specify colors, the `radial-gradient()` will auto-select the position as `center`
+and select either a circle or ellipse, depending on the size of the box.
+
+```css
+.my-element {
+	background: radial-gradient(white, black);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYxOZEq',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+The gradient's position is similar to `background-position` using keywords and/or number values.
+The size of the radial gradient determines the size of the gradient's ending shape
+(circle or ellipse) and by default will be `farthest-corner`,
+which means it exactly meets the farthest corner of the box from the center.
+You can also use the following keywords:
+
+- `closest-corner` will meet the closest corner to the center of the gradient.
+- `closest-side` will meet the side of the box closest to the center of the gradient.
+- `farthest-side` will do the opposite to `closest-side`.
+
+You can add as many color stops as you like, just like with the `linear-gradient`.
+Likewise, you can add as many `radial-gradients` as you like too.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJOepV',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Conic gradient
+{% BrowserCompat 'css.types.image.gradient.conic-gradient' %}
+
+A conic gradient has a center point in your box and starts from the top (by default),
+and goes around in a 360 degree circle.
+
+```css
+.my-element {
+	background: conic-gradient(white, black);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRVNXG',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+The [`conic-gradient()`](https://developer.mozilla.org/docs/Web/CSS/conic-gradient())
+function accepts position and angle arguments.
+
+By default, the angle is 0 degrees which starts at the top, in the center.
+If you were to set the angle to be `45deg`, it would be the top right corner.
+The angle argument accepts any type of angle value, like the linear and radial gradients.
+
+The position is center by default.
+As with radial and linear gradients,
+positioning can be keyword-based,
+or it can be defined with numeric values.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgWKpO',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+You can add as many color stops as you want, like with other gradient types.
+A good use case for this capability, with conic gradients is rendering pie charts with CSS.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRqExP',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Repeating and mixing
+
+Each type of gradient has a repeating type, too.
+These are
+[`repeating-linear-gradient()`](https://developer.mozilla.org/docs/Web/CSS/repeating-linear-gradient()),
+[`repeating-radial-gradient()`](https://developer.mozilla.org/docs/Web/CSS/repeating-radial-gradient()) and
+[`repeating-conic-gradient()`](https://developer.mozilla.org/docs/Web/CSS/repeating-conic-gradient()).
+They are similar to the non-repeating functions and take the same arguments.
+The difference is that if the defined gradient can be repeated to fill the box,
+based on both of their sizes, it will.
+
+If your gradient doesn't appear to be repeating,
+you probably haven't set a length for one of the color stops.
+For example,
+you can create a striped background with a `repeating-linear-gradient` by setting color stop lengths.
+
+```css
+.my-element {
+  background: repeating-linear-gradient(
+    45deg,
+    red,
+    red 30px,
+    white 30px,
+    white 60px
+  );
+}
+
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExZbgdy',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+You can also mix gradient functions on `background` properties,
+as well as defining as many gradients as you like,
+just like you would with a background image.
+For example, you can mix multiple linear-gradients together, or two linear-gradients with a radial gradient.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExZqGxP',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Resources
+
+- [Conic.css](https://www.conic.style/) - a useful collection of conic gradients
+- [MDN guide to gradients](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- [Gradient generator](https://www.colorzilla.com/gradient-editor/)
+
+{% Assessment 'gradients' %}
diff --git a/src/site/content/en/learn/css/grid/grid.assess.yml b/src/site/content/en/learn/css/grid/grid.assess.yml
new file mode 100644
index 00000000000..2f9b272605f
--- /dev/null
+++ b/src/site/content/en/learn/css/grid/grid.assess.yml
@@ -0,0 +1,95 @@
+setLeader: Test your knowledge of grid
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,5,6"
+    stem: Which of the following are CSS grid terms?
+    options:
+      - content: "lines"
+        rationale: "The grid is divided by these horizontal and vertically
+        running separators."
+      - content: "circles"
+        rationale: "Sorry, no concepts of circles in CSS grid."
+      - content: "cells"
+        rationale: "A single intersection of a row and a column creates a grid cell."
+      - content: "areas"
+        rationale: "Multiple cells together."
+      - content: "trains"
+        rationale: "Sorry, no concepts of trains in CSS grid."
+      - content: "gaps"
+        rationale: "The space between cells."
+      - content: "tracks"
+        rationale: "A single row or a column is a track in the grid."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      main {
+        display: grid;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the default layout direction of a grid?
+    options:
+      - content: Rows
+        rationale: "Without any columns defined, grid children lay out in the
+        block direction as they normally would."
+      - content: Columns
+        rationale: "If `grid-auto-flow: column` was present, than a grid would
+        layout as columns."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the difference between `auto-fit` and `auto-fill`?
+    options:
+      - content: "`auto-fit` will stretch cells to fit the container, where
+      `auto-fill` won't."
+        rationale: "`auto-fill` places as many items into the template as
+        possible, without stretching. Fit **makes** them fit."
+      - content: "`auto-fit` will stretch a container to fit the children, where
+      `auto-fill` makes the children fit to the container."
+        rationale: "This is not how these properties behave."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is `min-content`?
+    options:
+      - content: "Same as 0%"
+        rationale: "0% is a relative value of the parent box, while
+        `min-content` is relative to the words and images in the box."
+      - content: "The smallest letter"
+        rationale: "While there is a smallest letter, letters are not what
+        `min-content` is refering to."
+      - content: "The longest word or image."
+        rationale: "In the phrase 'CSS is awesome', the word awesome would be
+        the `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is `max-content`?
+    options:
+      - content: "The longest sentence or biggest image."
+        rationale: "This is the maximum size the content of the box is asking
+        for or has specified. It's a sentence at its widest or an image at its
+        widest."
+      - content: "The longest letter."
+        rationale: "While there is a longest letter, letters are not what
+        `max-content` is refering to."
+      - content: "The longest word."
+        rationale: "The longest word is `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is auto-placement?
+    options:
+      - content: "When grid takes the child items and places them in the best
+      order based on browser heuristics."
+        rationale: "No browser will change your content order, only your own
+        styles will do that."
+      - content: "When grid child items have been given a `grid-area` and are
+      placed on that cell."
+        rationale: "That's explicit placement not auto placement."
+      - content: "When unassigned grid items are placed next in a layout
+      template."
+        rationale: "Grid items without an explicit area will be placed in the next available grid cell"
diff --git a/src/site/content/en/learn/css/grid/index.md b/src/site/content/en/learn/css/grid/index.md
new file mode 100644
index 00000000000..33f65fccdbd
--- /dev/null
+++ b/src/site/content/en/learn/css/grid/index.md
@@ -0,0 +1,854 @@
+---
+title: Grid
+description: >
+  CSS Grid Layout provides a two dimensional layout system,
+  controlling layout in rows and columns.
+  In this module discover everything grid has to offer.
+audio:
+  title: 'The CSS Podcast - 011: Grid'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_011_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-29
+---
+
+A really common layout in web design is a header, sidebar, body and footer layout.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/tj7KmP72RKkffGQRswpA.svg",
+alt="A header with logo and navigation with a sidebar and content area that features an article",
+width="800",
+height="531" %}
+
+Over the years,
+there have been many methods to solve this layout,
+but with CSS grid,
+not only is it relatively straightforward,
+but you have lots of options.
+Grid is exceptionally useful at combining the control
+that extrinsic sizing provides with the flexibility of intrinsic sizing,
+which makes it ideal for this sort of layout.
+This is because grid is a layout method designed for two-dimensional content.
+That is, laying things out in rows and columns at the same time.
+
+When creating a grid layout you define a grid with rows and columns.
+Then you place items onto that grid,
+or allow the browser to auto-place them into the cells you have created.
+There's a lot to grid,
+but with an overview of what is available
+you'll be making grid layouts in no time.
+
+## Overview
+
+So what can you do with grid?
+Grid layouts have the following features.
+ You'll learn about all of them in this guide.
+
+1. A grid can be defined with rows and columns.
+You can choose how to size these row and column tracks or they can react to the size of the content.
+1. Direct children of the grid container will be automatically placed onto this grid.
+1. Or, you can place the items in the precise location that you want.
+1. Lines and areas on the grid can be named to make placement easier.
+1. Spare space in the grid container can be distributed between the tracks.
+1. Grid items can be aligned within their area.
+
+## Grid terminology
+
+Grid comes with a bunch of new terminology as it's the first time CSS has had a real layout system.
+
+### Grid lines
+
+A grid is made up of lines,
+which run horizontally and vertically.
+If your grid has four columns,
+it will have five column lines including the one after the last column.
+
+Lines are numbered starting from 1,
+with the numbering following the writing mode and script direction of the component.
+This means that column line 1 will be on the left in a left-to-right language such as English,
+and on the right in a right-to-left language such as Arabic.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg",
+alt="A diagram representation of grid lines",
+width="800",
+height="434" %}
+
+### Grid tracks
+
+A track is the space between two grid lines.
+A row track is between two row lines and a column track between two column lines.
+When we create our grid we create these tracks by assigning a size to them.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg",
+alt="A diagram representation of a grid track",
+width="800",
+height="434" %}
+
+### Grid cell
+
+A grid cell is the smallest space on a grid defined by the intersection of row and column tracks.
+It's just like a table cell or a cell in a spreadsheet.
+If you define a grid and don't place any of the items
+they will automatically be laid out one item into each defined grid cell.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg",
+alt="A diagram representation of a grid cell",
+width="800",
+height="434" %}
+
+### Grid area
+
+Several grid cells together.
+Grid areas are created by causing an item to span over multiple tracks.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg",
+alt="A diagram representation of a grid area",
+width="800",
+height="434" %}
+
+### Gaps
+
+A gutter or alley between tracks.
+For sizing purposes these act like a regular track.
+You can't place content into a gap but you can span grid items across it.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg",
+alt="A diagram representation of a grid with gaps",
+width="800",
+height="434" %}
+
+### Grid container
+
+The HTML element which has `display: grid` applied,
+and therefore creates a new grid formatting context for the direct children.
+
+```css
+.container {
+  display: grid;
+}
+```
+
+### Grid item
+
+A grid item is an item which is a direct child of the grid container.
+
+```html/1-3
+<div class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+```
+
+## Rows and columns
+
+To create a basic grid you can define a grid with three column tracks,
+two row tracks and a 10 pixel gap between the tracks as follows.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 5em 100px 30%;
+    grid-template-rows: 200px auto;
+    gap: 10px;
+}
+```
+
+This grid demonstrates many of the things described in the terminology section.
+It has three column tracks.
+Each track uses a different length unit.
+It has two row tracks,
+one using a length unit and the other auto.
+When used as a track sizing auto can be thought of as being as big as the content.
+Tracks are auto sized by default.
+
+If the element with a class of `.container` has child items,
+they will immediately lay out on this grid. You can see this in action in the demo below.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdbrzr'
+} %}
+</figure>
+
+The [grid overlay in Chrome DevTools](https://developer.chrome.com/docs/devtools/css/grid/) can help you understand the various parts of the grid.
+
+Open the [demo](https://codepen.io/web-dot-dev/full/NWdbrzr) in Chrome.
+Inspect the element with the grey background, which has an ID of `container`.
+Highlight the grid by selecting the grid badge in the DOM, next to the `.container` element.
+Inside the Layout tab,
+select **Display Line Numbers** in the dropdown to see the line numbers on your grid.
+
+<figure>
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/YxpjWBUDsqQB2fr6rzU3.jpg",
+alt="As described in the caption and instructions",
+width="800",
+height="449" %}
+<figcaption>
+A grid highlighted in Chrome DevTools showing line numbers, cells and tracks.
+</figcaption>
+</figure>
+
+### Intrinsic sizing keywords
+
+In addition to the length and percentage dimensions as described in the section on
+[sizing units](/learn/css/sizing),
+grid tracks can use intrinsic sizing keywords.
+These keywords are defined in the Box Sizing specification
+and add additional methods of sizing boxes in CSS,
+not just grid tracks.
+
+- `min-content`
+- `max-content`
+- `fit-content()`
+
+The [`min-content`](https://developer.mozilla.org/docs/Web/CSS/min-content)
+keyword will make a track as small as it can be without the track content overflowing.
+Changing the example grid layout to have three column tracks all at `min-content` size
+will mean they become as narrow as the longest word in the track.
+
+The [`max-content`](https://developer.mozilla.org/docs/Web/CSS/max-content)
+keyword has the opposite effect.
+The track will become as wide enough for all of the content to display in one long unbroken string.
+This might cause overflows as the string will not wrap.
+
+The [`fit-content()`](https://developer.mozilla.org/docs/Web/CSS/fit-content())
+function acts like `max-content` at first.
+However, once the track reaches the size that you pass into the function,
+the content starts to wrap.
+So `fit-content(10em)` will create a track that is less than 10em,
+if the `max-content` size is less than 10em,
+but never larger than 10em.
+
+In the next demo try out the different intrinsic sizing keywords by changing the sizing of the grid tracks.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRqNgL',
+  height: 600
+} %}
+</figure>
+
+{% Aside %}
+You might spot in this demo that when auto is used the grid columns stretch to fill the container.
+Auto sized tracks will stretch by default if there is additional space in the grid container.
+{% endAside %}
+
+### The `fr` unit
+
+We have existing length dimensions, percentages, and also these new keywords.
+There is also a special sizing method which only works in grid layout.
+This is the `fr` unit,
+a flexible length which describes a share of the available space in the grid container.
+
+The `fr` unit works in a similar way to using `flex: auto` in flexbox.
+It distributes space after the items have been laid out.
+Therefore to have three columns which all get the same share of available space:
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+```
+
+As the fr unit shares out available space,
+it can be combined with a fixed size gap or fixed size tracks.
+To have a component with a fixed size element and the second track taking up whatever space is left,
+you can use as a tracklisting of `grid-template-columns: 200px 1fr`.
+
+Using different values for the fr unit will share the space in proportion.
+Larger values getting more of the spare space.
+In the demo below change the value of the third track.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgyXNE',
+  height: 600
+} %}
+</figure>
+
+### The `minmax()` function
+{% BrowserCompat 'css.properties.grid-template-columns.minmax' %}
+
+This function means that you can set a minimum and a maximum size for a track.
+This can be quite useful.
+If we take the example of the `fr` unit above which distributes remaining space,
+it could be written out using
+[`minmax()`](https://developer.mozilla.org/docs/Web/CSS/minmax()) as `minmax(auto, 1fr)`.
+Grid looks at the intrinsic size of the content,
+then distributes available space after giving the content enough room.
+This means that you might not get tracks that each have an equal share
+of all space available in the grid container.
+
+To force a track to take an equal share of the space in the grid container minus gaps use minmax.
+Replace `1fr` as a track size with `minmax(0, 1fr)`.
+This makes the minimum size of the track 0 and not the min-content size.
+Grid will then take all of the available size in the container,
+deduct the size needed for any gaps,
+and share the rest out according to your fr units.
+
+### `repeat()` notation
+{% BrowserCompat 'css.properties.grid-template-columns.repeat' %}
+
+If you want to create a 12 column track grid with equal columns,
+you could use the following CSS.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr);
+}
+```
+
+Or, you could write it out using
+[`repeat()`](https://developer.mozilla.org/docs/Web/CSS/repeat()):
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0,1fr));
+}
+```
+
+The `repeat()` function can be used to repeat any section of your track listing.
+For example you can repeat a pattern of tracks.
+ You can also have some regular tracks and a repeating section.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
+}
+```
+
+### `auto-fill` and `auto-fit`
+
+You can combine everything you have learned about track sizing,
+`minmax()`, and repeat,
+to create a useful pattern with grid layout.
+Perhaps you don't want to specify the number of column tracks,
+but instead want to create as many as will fit in your container.
+
+You can achieve this with `repeat()` and the `auto-fill` or `auto-fit` keywords.
+In the demo below grid will create as many 200 pixel tracks as will fit in the container.
+Open the demo in a new window and see how the grid changes as you change the size of the viewport.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpNjgO'
+} %}
+</figure>
+
+In the demo we get as many tracks as will fit.
+The tracks are not flexible however.
+You will get a gap on the end until there is enough space for another 200 pixel track.
+If you add the `minmax()` function,
+you can request as many tracks as will fit with a minimum size of 200 pixels and a maximum of 1fr.
+Grid then lays out the 200 pixel tracks and whatever space is leftover is distributed equally to them.
+
+This creates a two-dimensional responsive layout with no need for any media queries.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWbRax'
+} %}
+</figure>
+
+There is a subtle difference between `auto-fill` and `auto-fit`.
+In the next demo play with a grid layout using the syntax explained above,
+but with only two grid items in the grid container.
+Using the `auto-fill` keyword you can see that empty tracks have been created.
+Change the keyword to `auto-fit` and the tracks collapse down to 0 size.
+This means that the flexible tracks now grow to consume the space.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJbbNe'
+} %}
+</figure>
+
+The `auto-fill` and `auto-fit` keywords otherwise act in exactly the same way.
+There is no difference between them once the first track is filled.
+
+## Auto-placement
+
+You have already seen grid auto-placement at work in the demos so far.
+Items are placed on the grid one per cell in the order that they appear in the source.
+For many layouts this might be all you need.
+If you need more control then there are a couple of things you might like to do.
+The first is to tweak the auto-placement layout.
+
+### Placing items in columns
+
+The default behavior of grid layout is to place items along the rows.
+You can instead cause the items to place into columns using `grid-auto-flow: column`.
+You need to define row tracks otherwise the items will create intrinsic column tracks,
+and layout out all in one long row.
+
+These values relate to the writing mode of the document.
+A row always runs in the direction a sentence runs in the writing mode of the document or component.
+In the next demo you can change mode the value of `grid-auto-flow` and the `writing-mode` property.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoWbWbr',
+  height: 600
+} %}
+</figure>
+
+### Spanning tracks
+
+You can cause some or all of the items in an auto-placed layout to span more than one track.
+Use the `span` keyword plus the number of lines to span as a value for  `grid-column-end` or `grid-row-end`.
+
+```css
+.item {
+    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
+}
+```
+
+As you have not specified a `grid-column-start`,
+this uses the initial value of `auto` and is placed according to the auto-placement rules.
+You can also specify the same thing using the shorthand `grid-column`:
+
+```css
+.item {
+    grid-column: auto / span 2;
+}
+```
+
+### Filling gaps
+
+An auto-placed layout with some items spanning multiple tracks
+may result in a grid with some unfilled cells.
+The default behavior of grid layout with a fully auto-placed layout
+is to always progress forward.
+The items will be placed according to the order they are in the source,
+or any modification with the `order` property.
+If there is not enough space to fit an item,
+grid will leave a gap and move to the next track.
+
+The next demo shows this behavior.
+The checkbox will apply the dense packing mode.
+This is enabled by giving `grid-auto-flow` a value of `dense`.
+With this value in place,
+grid will take items later in the layout and use them to fill gaps.
+This may mean that the display becomes disconnected from the logical order.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELBLrJ',
+  height: 600
+} %}
+</figure>
+
+## Placing items
+
+You have a lot of functionality from CSS Grid already.
+Let's now take a look at how we position items on the grid we have created.
+
+The first thing to remember is that CSS Grid Layout is based on a grid of numbered lines.
+The simplest way to place things onto the grid is to place them from one line to another.
+You'll discover other ways of placing items in this guide,
+but you always have access to those numbered lines.
+
+The properties that you can use to place items by line number are:
+
+- [`grid-column-start`](https://developer.mozilla.org/docs/Web/CSS/grid-column-start)
+- [`grid-column-end`](https://developer.mozilla.org/docs/Web/CSS/grid-column-end)
+- [`grid-row-start`](https://developer.mozilla.org/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](https://developer.mozilla.org/docs/Web/CSS/grid-row-end)
+
+They have shorthands which allow you to set both start and end lines at once:
+
+- [`grid-column`](https://developer.mozilla.org/docs/Web/CSS/grid-column)
+- [`grid-row`](https://developer.mozilla.org/docs/Web/CSS/grid-row)
+
+To place your item set the start and end lines of the grid area that it should be placed into.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 200px 100px);
+}
+
+.item {
+    grid-column-start: 1; /* start at column line 1 */
+    grid-column-end: 4; /* end at column line 4 */
+    grid-row-start: 2; /*start at row line 2 */
+    grid-row-end: 4; /* end at row line 4 */
+}
+```
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/css/grid/) can give you a visual guide to the lines in order to check where your item is placed.
+
+The line numbering follows the writing mode and direction of the component.
+In the next demo change the writing mode or direction
+to see how the placement of the items stays consistent to the way that text flows.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdGdzd',
+  height: 600
+} %}
+</figure>
+
+### Stacking items
+
+Using line-based positioning you can place items into the same cell of the grid.
+This means that you can stack items,
+or cause one item to partly overlap another.
+Items which come later in the source will be displayed on top of items that come earlier.
+You can change this stacking order using `z-index` just as with positioned items.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BapQWQW',
+  height: 600
+} %}
+</figure>
+
+### Negative line numbers
+
+When you create a grid using `grid-template-rows` and `grid-template-columns`
+you create what is known as the **explicit grid**.
+This is a grid that you have defined and given size to the tracks.
+
+Sometimes you will have items which display outside this explicit grid.
+For example,
+you might define column tracks and then add several rows of grid items without ever defining row tracks.
+The tracks would be auto sized by default.
+You also might place an item using `grid-column-end` that is outside of the explicit grid defined.
+In both of these cases grid will create tracks to make the layout work,
+and these tracks are referred to as the **implicit grid**.
+
+Most of the time it will make no difference if you are working with an implicit or explicit grid.
+However, with line-based placement you may run into the main difference between the two.
+
+Using negative line numbers you can place items from the end line of the explicit grid.
+This can be useful if you want an item to span from the first to the last column line.
+In that case you can use `grid-column: 1 / -1`.
+The item will stretch right across the explicit grid.
+
+This only works for the explicit grid however.
+Take a layout of three rows of auto-placed items
+where you would like the very first item to span to the end line of the grid.
+
+{%
+Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Dt8yG376MqSyWJJ8KqPr.svg",
+alt="A sidebar with 8 sibling grid items",
+width="800",
+height="359" %}
+
+You might think that you can give that item `grid-row: 1 / -1`.
+In the demo below you can see that this doesn't work.
+The tracks are created in the implicit grid,
+there is no way to reach the end of the grid using `-1`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNpZeq'
+} %}
+</figure>
+
+#### Sizing implicit tracks
+
+The tracks created in the implicit grid will be auto-sized by default.
+However if you want to control the sizing of the rows,
+use the
+[`grid-auto-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows) property,
+and for columns
+[`grid-auto-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns).
+
+To create all implicit rows at a minimum size of `10em` and a maximum size of `auto`:
+
+```css
+.container {
+    display: grid;
+    grid-auto-rows: minmax(10em, auto);
+}
+```
+
+To create implicit columns with a pattern of 100px and 200px wide tracks.
+In this case the first implicit column will be 100px,
+the second 200px,
+the third 100px, and so on.
+
+```css
+.container {
+    display: grid;
+    grid-auto-columns: 100px 200px;
+}
+```
+
+## Named grid lines
+
+It can make it easier to place items into a layout if the lines have a name rather than a number.
+You can name any line on your grid by adding a name of your choosing between square brackets.
+Multiple names can be added,
+separated by a space inside the same brackets.
+Once you have named lines they can be used instead of the numbers.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      [main-start aside-start] 1fr
+      [aside-end content-start] 2fr
+      [content-end main-end]; /* a two column layout */
+}
+
+.sidebar {
+    grid-column: aside-start / aside-end;
+    /* placed between line 1 and 2*/
+}
+
+footer {
+    grid-column: main-start / main-end;
+    /* right across the layout from line 1 to line 3*/
+}
+```
+
+## Grid Template Areas
+
+You can also name areas of the grid and place items onto those named areas.
+This is a lovely technique as it allows you to see what your component looks like right there in the CSS.
+
+To start, give the direct children of your grid container a name using the
+[`grid-area`](https://developer.mozilla.org/docs/Web/CSS/grid-area) property:
+
+```css
+header {
+    grid-area: header;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.content {
+    grid-area: content;
+}
+
+footer {
+    grid-area: footer;
+}
+```
+
+The name can be anything you like other than the keywords `auto` and `span`.
+Once all of your items are named,
+use the
+[`grid-template-areas`](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas)
+property to define which grid cells each item will span.
+Each row is defined within quotes.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "header header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+There are a few rules when using `grid-template-areas`.
+
+- The value must be a complete grid with no empty cells.
+- To span tracks repeat the name.
+- The areas created by repeating the name must be rectangular and cannot be disconnected.
+
+If you break any of the above rules the value is treated as invalid and thrown away.
+
+To leave white space on the grid use a `.` or multiples with no white space between them.
+For example to leave the very first cell on the grid empty I could add a series of `.` characters:
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "....... header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+As your entire layout is defined in one place,
+it makes it straightforward to redefine the layout using media queries.
+In the next example I have created a two column layout which moves to three columns
+by redefining the value of `grid-template-columns` and `grid-template-areas`.
+Open the example in a new window to play with the viewport size and see the layout change.
+
+You can also see how the `grid-template-areas` property relates to `writing-mode` and direction,
+as with other grid methods.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNBYepg',
+  height: 600
+} %}
+</figure>
+
+## Shorthand properties
+
+There are two shorthand properties which allow you to set many of the grid properties in one go.
+These can look a little confusing until you break down exactly how they go together.
+Whether you want to use them or prefer to use longhands is up to you.
+
+### `grid-template`
+{% BrowserCompat 'css.properties.grid-template' %}
+
+The [`grid-template`](https://developer.mozilla.org/docs/Web/CSS/grid-template)
+property is a shorthand for `grid-template-rows`, `grid-template-columns` and `grid-template-areas`.
+The rows are defined first,
+along with the value of `grid-template-areas`.
+Column sizing is added after a `/`.
+
+```css
+.container {
+    display: grid;
+    grid-template:
+      "head head head" minmax(150px, auto)
+      "sidebar content content" auto
+      "sidebar footer footer" auto / 1fr 1fr 1fr;
+}
+```
+
+### `grid` property
+{% BrowserCompat 'css.properties.grid' %}
+
+The [`grid`](https://developer.mozilla.org/docs/Web/CSS/grid)
+shorthand can be used in exactly the same way as the `grid-template` shorthand.
+When used in this way it will reset the other grid properties that it accepts to their initial values.
+The full set being:
+
+- `grid-template-rows`
+- `grid-template-columns`
+- `grid-template-areas`
+- `grid-auto-rows`
+- `grid-auto-columns`
+- `grid-auto-flow`
+
+You can alternately use this shorthand to define how the implicit grid behaves,
+for example:
+
+```css
+.container {
+    display: grid;
+    grid: repeat(2, 80px) / auto-flow  120px;
+}
+```
+
+## Alignment
+
+Grid layout uses the same alignment properties that you learned about in the guide to
+[flexbox](/learn/css/flexbox).
+In grid the properties which begin with `justify-` are always used on the inline axis,
+the direction in which sentences run in your writing mode.
+
+The properties which begin with `align-` are used on the block axis,
+the direction in which blocks are laid out in your writing mode.
+
+- [`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content)
+and [`align-content`](https://developer.mozilla.org/docs/Web/CSS/align-content):
+distribute additional space in the grid container around or between tracks.
+- [`justify-self`](https://developer.mozilla.org/docs/Web/CSS/justify-self) and
+[`align-self`](https://developer.mozilla.org/docs/Web/CSS/align-self):
+are applied to a grid item to move it around inside the grid area it is placed in.
+- [`justify-items`](https://developer.mozilla.org/docs/Web/CSS/justify-items) and
+[`align-items`](https://developer.mozilla.org/docs/Web/CSS/align-items):
+are applied to the grid container to set all of the `justify-self` properties on the items.
+
+### Distributing extra space
+
+In this demo the grid is larger than the space needed to lay out the fixed width tracks.
+This means we have space in both the inline and block dimensions of the grid.
+Try different values of `align-content` and `justify-content` to see how the tracks behave.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjjMVd',
+  height: 650
+} %}
+</figure>
+
+Note how the gaps become larger when using values such as `space-between`,
+and any grid item spanning two tracks also grows to absorb the additional space added to the gap.
+
+{% Aside %}
+As with flexbox, these properties will only work if there is additional space to distribute.
+If your grid tracks neatly fill the container then there will be no space to share out.
+{% endAside %}
+
+### Moving content around
+
+Items with a background color appear to completely fill the grid area they are placed in,
+because the initial value for `justify-self` and `align-self` is `stretch`.
+
+{% Aside %}
+If your item is an image,
+or something else with an intrinsic aspect ratio,
+the initial value will be `start` rather than `stretch` to avoid stretching things out of shape.
+{% endAside %}
+
+In the demo change the values of `justify-items` and `align-items` to see how this changes the layout.
+The grid area is not changing size,
+instead the items are being moved around inside the defined area.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzZOOXB',
+  height: 650
+} %}
+</figure>
+
+{% Assessment 'grid' %}
+
+## Resources
+
+This guide has given you an overview of the different parts of the grid layout specification.
+To find out more, take a look at the following resources.
+
+- [MDN CSS Grid Layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [Creating a Grid Container](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)
+- [Inspect CSS grid in Chrome DevTools](https://developer.chrome.com/docs/devtools/css/grid/)
+- [A comprehensive collection of grid learning material](https://gridbyexample.com/)
diff --git a/src/site/content/en/learn/css/index.md b/src/site/content/en/learn/css/index.md
new file mode 100644
index 00000000000..d8a70c09d02
--- /dev/null
+++ b/src/site/content/en/learn/css/index.md
@@ -0,0 +1,43 @@
+---
+title: Learn CSS
+authors:
+  - andybell
+description: An evergreen CSS course and reference to level up your web styling expertise.
+date: 2021-05-04
+tags:
+  - css
+  - layout
+---
+
+## Welcome to Learn CSS!
+
+This course breaks down the fundamentals of CSS into digestible,
+easy to understand pieces.
+Over the next few modules,
+you'll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the "Learn CSS" logo to navigate the modules.
+
+You'll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index.
+And, along with these fundamentals,
+you'll learn about functions, color types, gradients, logical properties and inheritance
+to make you a well-rounded front-end developer,
+ready to take on any user interface.
+
+Each module is full of interactive demos and self-assessments for you to test your knowledge.
+In addition to learning through reading and demos,
+there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.
+
+This course is created for beginner and advanced CSS developers alike.
+You can go through the series from start to finish
+to get a general understanding of CSS from top to bottom,
+or you can use it as a reference for specific styling subjects.
+For those new to web development overall, check out [Learn HTML](/learn/html/) to learn all about how to write markup and link your stylesheets.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn CSS? [Let's get started](/learn/css/box-model/).
+
+{% Aside %}
+This course is written and edited by CSS community experts: [Andy Bell](https://twitter.com/piccalilli_), [Rachel Andrew](https://twitter.com/rachelandrew), [Una Kravets](https://twitter.com/Una), [Adam Argyle](https://twitter.com/argyleink), [Emma Twersky](https://twitter.com/twerske), [Camden Bickel](https://twitter.com/camdenbickel), and [Kevin Lozandier](https://twitter.com/KevinLozandier). [Rob Dodson](https://twitter.com/rob_dodson) and [Jiwoong Lee](https://twitter.com/jiwoong) shepherded the UX and production build, along with help from [Ewa Gasperowicz](https://twitter.com/devnook) and [Kayce Basques](https://twitter.com/kaycebasques).
+{% endAside %}
diff --git a/src/site/content/en/learn/css/inheritance/conclusion.assess.yml b/src/site/content/en/learn/css/inheritance/conclusion.assess.yml
new file mode 100644
index 00000000000..7ffb949eca9
--- /dev/null
+++ b/src/site/content/en/learn/css/inheritance/conclusion.assess.yml
@@ -0,0 +1,32 @@
+setLeader: Test your knowledge of inheritance
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2,3,4"
+    stem: Which of the following properties are inheritable?
+    options:
+      - content: "`animation`"
+        rationale: "Animations do not pass down to children."
+      - content: "`font-size`"
+        rationale: "🎉"
+      - content: "`color`"
+        rationale: "🎉"
+      - content: "`text-align`"
+        rationale: "🎉"
+      - content: "`line-height`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      Which value behaves like `inherit` unless there is nothing to inherit and
+      then behaves like `initial`?
+    options:
+      - content: "`reset`"
+        rationale: "not a valid value, try again!"
+      - content: "`unset`"
+        rationale: "🎉"
+      - content: "`superset`"
+        rationale: "not a valid value, try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/inheritance/index.md b/src/site/content/en/learn/css/inheritance/index.md
new file mode 100644
index 00000000000..741de5ddf92
--- /dev/null
+++ b/src/site/content/en/learn/css/inheritance/index.md
@@ -0,0 +1,355 @@
+---
+title: Inheritance
+description: >
+  Some CSS properties inherit if you don't specify a value for them.
+  Find out how this works, and how to use it to your advantage in this module.
+audio:
+  title: 'The CSS Podcast - 005: Inheritance'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_005_v1.2.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Say you just wrote some CSS to make elements look like a button.
+
+```html
+<a href="http://example.com" class="my-button">I am a button link</a>
+```
+
+```css
+.my-button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  text-decoration: none;
+  background: pink;
+  font: inherit;
+  text-align: center;
+}
+```
+
+You then add a link element to an article of content,
+with a `class` value of `.my-button`. However there's an issue,
+the text is not the color that you expected it to be. How did this happen?
+
+Some CSS properties inherit if you don't specify a value for them.
+In the case of this button, it **inherited** the `color` from this CSS:
+
+```css
+article a {
+  color: maroon;
+}
+```
+
+In this lesson you'll learn why that happens and
+how inheritance is a powerful feature to help you write less CSS.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNGEbg',
+  height: 400
+} %}
+</figure>
+
+## Inheritance flow
+
+Let's take a look at how inheritance works,
+using this snippet of HTML:
+
+```html
+<html>
+  <body>
+    <article>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </article>
+  </body>
+</html>
+```
+
+The root element (`<html>`) won't inherit anything because it is the first element in the document.
+Add some CSS on the HTML element,
+and it starts to cascade down the document.
+
+```css
+html {
+  color: lightslategray;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEKgBX',
+  height: 200
+} %}
+</figure>
+
+The `color` property is inheritable by other elements.
+The `html` element has `color: lightslategray`,
+therefore all elements that can inherit color will now have a color of `lightslategray`.
+
+```css
+body {
+  font-size: 1.2em;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPLrLP',
+  height: 200
+} %}
+</figure>
+
+{% Aside %}
+Because this demo sets the font size on the `body` element,
+the `html` element will still have the initial font size set by the browser (user agent stylesheet),
+but the `article` and `p` will inherit the font size declared by the `body`.
+This is because inheritance only cascades downwards.
+{% endAside %}
+
+```css
+p {
+  font-style: italic;
+}
+```
+
+Only the `<p>` will have italic text because it's the deepest nested element.
+Inheritance only flows downwards, not back up to parent elements.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEKgmK',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Which properties are inheritable?
+
+Not all CSS properties are inheritable,
+but there are a lot that are.
+For reference, here is the entire list of inheritable properties,
+taken from the W3 reference of all CSS properties:
+
+- [azimuth](https://developer.mozilla.org/docs/Web/SVG/Attribute/azimuth)
+- [border-collapse](https://developer.mozilla.org/docs/Web/CSS/border-collapse)
+- [border-spacing](https://developer.mozilla.org/docs/Web/CSS/border-spacing)
+- [caption-side](https://developer.mozilla.org/docs/Web/CSS/caption-side)
+- [color](https://developer.mozilla.org/docs/Web/CSS/color)
+- [cursor](https://developer.mozilla.org/docs/Web/CSS/cursor)
+- [direction](https://developer.mozilla.org/docs/Web/CSS/direction)
+- [empty-cells](https://developer.mozilla.org/docs/Web/CSS/empty-cells)
+- [font-family](https://developer.mozilla.org/docs/Web/CSS/font-family)
+- [font-size](https://developer.mozilla.org/docs/Web/CSS/font-size)
+- [font-style](https://developer.mozilla.org/docs/Web/CSS/font-style)
+- [font-variant](https://developer.mozilla.org/docs/Web/CSS/font-variant)
+- [font-weight](https://developer.mozilla.org/docs/Web/CSS/font-weight)
+- [font](https://developer.mozilla.org/docs/Web/CSS/font)
+- [letter-spacing](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)
+- [line-height](https://developer.mozilla.org/docs/Web/CSS/line-height)
+- [list-style-image](https://developer.mozilla.org/docs/Web/CSS/list-style-image)
+- [list-style-position](https://developer.mozilla.org/docs/Web/CSS/list-style-position)
+- [list-style-type](https://developer.mozilla.org/docs/Web/CSS/list-style-type)
+- [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style)
+- [orphans](https://developer.mozilla.org/docs/Web/CSS/orphans)
+- [quotes](https://developer.mozilla.org/docs/Web/CSS/quotes)
+- [text-align](https://developer.mozilla.org/docs/Web/CSS/text-align)
+- [text-indent](https://developer.mozilla.org/docs/Web/CSS/text-indent)
+- [text-transform](https://developer.mozilla.org/docs/Web/CSS/text-transform)
+- [visibility](https://developer.mozilla.org/docs/Web/CSS/visibility)
+- [white-space](https://developer.mozilla.org/docs/Web/CSS/white-space)
+- [widows](https://developer.mozilla.org/docs/Web/CSS/widows)
+- [word-spacing](https://developer.mozilla.org/docs/Web/CSS/word-spacing)
+
+## How inheritance works
+
+Every HTML element has every CSS property defined by default with an initial value.
+An initial value is a property that's not inherited and shows up as a default
+if the cascade fails to calculate a value for that element.
+
+<figure>
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/OvoYqOMcdFZL7wJQIL2C.mp4" %}
+</figure>
+
+Properties that can be inherited cascade downwards,
+and child elements will get a computed value which represents its parent's value.
+This means that if a parent has `font-weight` set to `bold` all child elements will be bold,
+unless their `font-weight` is set to a different value,
+or the user agent stylesheet has a value for `font-weight` for that element.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgGPOZ'
+} %}
+</figure>
+
+## How to explicitly inherit and control inheritance
+
+Inheritance can affect elements in unexpected ways so CSS has tools to help with that.
+
+### The `inherit` keyword
+
+You can make any property inherit its parent's computed value with the `inherit` keyword.
+A useful way to use this keyword is to create exceptions.
+
+```css
+strong {
+  font-weight: 900;
+}
+```
+
+This CSS snippet sets all `<strong>` elements to have a `font-weight` of `900`,
+instead of the default `bold` value, which would be the equivalent of `font-weight: 700`.
+
+```css
+.my-component {
+  font-weight: 500;
+}
+```
+
+The `.my-component` class sets `font-weight` to `500` instead.
+To make the `<strong>` elements inside `.my-component` also `font-weight: 500` add:
+
+```css
+.my-component strong {
+  font-weight: inherit;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgNedO',
+  height: 400
+} %}
+</figure>
+
+Now, the `<strong>` elements inside `.my-component` will have a `font-weight` of `500`.
+
+You could explicitly set this value,
+but if you use `inherit` and the CSS of `.my-component` changes in the future,
+you can guarantee that your `<strong>` will automatically stay up to date with it.
+
+### The `initial` keyword
+
+Inheritance can cause problems with your elements and `initial` provides you with a powerful reset option.
+
+You learned earlier that every property has a default value in CSS.
+The `initial` keyword sets a property back to that initial, default value.
+
+```css
+aside strong {
+  font-weight: initial;
+}
+```
+
+This snippet will remove the bold weight from all `<strong>` elements inside an `<aside>` element and instead,
+make them normal weight, which is the initial value.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWVORZ',
+  tab: 'css,result',
+  height: 300
+} %}
+</figure>
+
+### The `unset` keyword
+
+The `unset` property behaves differently if a property is inheritable or not.
+If a property is inheritable,
+the `unset` keyword will be the same as `inherit`.
+If the property is not inheritable, the `unset` keyword is equal to `initial`.
+
+Remembering which CSS properties are inheritable can be hard,
+`unset` can be helpful in that context.
+For example, `color` is inheritable,
+but `margin` isn't, so you can write this:
+
+```css
+/* Global color styles for paragraph in authored CSS */
+p {
+  margin-top: 2em;
+  color: goldenrod;
+}
+
+/* The p needs to be reset in asides, so you can use unset */
+aside p {
+  margin: unset;
+  color: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEdpjw',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+Now, the `margin` is removed and `color` reverts back to being the inherited computed value.
+
+You can use the `unset` value with the `all` property, too.
+Going back to the above example,
+what happens if the global `p` styles get an additional few properties?
+Only the rule that was set for `margin` and `color` will apply.
+
+```css/4-5
+/* Global color styles for paragraph in authored CSS */
+p {
+	margin-top: 2em;
+	color: goldenrod;
+	padding: 2em;
+	border: 1px solid;
+}
+
+/* Not all properties are accounted for anymore */
+aside p {
+	margin: unset;
+	color: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgdLNB',
+  tab: 'css,result'
+} %}
+</figure>
+
+If you change the `aside p` rule to `all: unset` instead,
+it doesn't matter what global styles are applied to `p` in the future,
+they will always be unset.
+
+```css/3
+aside p {
+	margin: unset;
+	color: unset;
+	all: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpbZbB',
+  tab: 'css,result'
+} %}
+</figure>
+
+{% Assessment 'conclusion' %}
+
+## Resources
+
+- [MDN reference on computed values](https://developer.mozilla.org/docs/Web/CSS/computed_value)
+- [An article on how inheritance can be useful in modular front-ends](https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/)
diff --git a/src/site/content/en/learn/css/layout/index.md b/src/site/content/en/learn/css/layout/index.md
new file mode 100644
index 00000000000..31be329a5e4
--- /dev/null
+++ b/src/site/content/en/learn/css/layout/index.md
@@ -0,0 +1,426 @@
+---
+title: Layout
+description: >
+  An overview of the various layout methods you have to choose from when building a component or page layout.
+audio:
+  title: 'The CSS Podcast - 009: Layout'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_009_v1.1.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-20
+tags:
+  - css
+---
+
+Imagine you're working as a developer,
+and a designer colleague hands you a design for a brand new website.
+The design has all sorts of interesting layouts and compositions:
+two-dimensional layouts that are considerate of viewport width and height,
+as well as layouts that need to be fluid and flexible.
+How do you decide the best way to style these with CSS?
+
+CSS provides us with various ways to solve layout problems,
+on a horizontal axis, vertical axis, or even both.
+Choosing the right layout method for a context can be hard,
+and often you may need more than one layout method to solve your problem.
+To help with this, in the following modules,
+you'll learn about the unique features of each CSS layout mechanism to inform those decisions.
+
+## Layout: a brief history
+
+In the early days of the web,
+designs more complex than a simple document were laid out with `<table>` elements.
+Separating HTML from visual styles was made easier when CSS was widely adopted by browsers in the late '90s.
+CSS opened the door to developers being able to completely change the look and feel of a website without ever touching HTML.
+This new capability inspired projects such as [The CSS Zen Garden](http://www.csszengarden.com),
+which was created to demonstrate the power of CSS to encourage more developers to learn it.
+
+CSS has evolved as our needs for web design and browser technology have evolved.
+You can read how CSS layout and our approach to layout has evolved over time in
+[this article by Rachel Andrew](https://24ways.org/2019/a-history-of-css-through-15-years-of-24-ways/).
+
+{% Img
+  src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/vDDoFFoPVgJEuEaqcP4H.svg",
+  alt="A timeline showing how CSS has evolved over the years, starting in 1996 up to 2021",
+  width="760",
+  height="270"
+%}
+
+## Layout: the present and future
+
+Modern CSS has exceptionally powerful layout tooling.
+We have dedicated systems for layout and we're going to have a high-level look at what we have at our disposal,
+before digging into more detail of Flexbox and Grid in the next modules.
+
+## Understanding the `display` property
+
+The `display` property does two things.
+The first thing it does is determine if the box it is applied to acts as inline or block.
+
+```css
+.my-element {
+  display: inline;
+}
+```
+
+Inline elements behave like words in a sentence.
+They sit next to each other in the inline direction.
+Elements such as `<span>` and `<strong>`,
+which are typically used to style pieces of text within containing elements like a `<p>` (paragraph),
+are inline by default.
+They also preserve surrounding whitespace.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/GezxDZXkJgkMevkKg39M.png", alt="A diagram showing all the different sizes of a box and where each sizing section starts and ends", width="800", height="559" %}
+
+You can't set an explicit width and height on inline elements.
+Any block level margin and padding will be ignored by the surrounding elements.
+
+```css
+.my-element {
+	display: block;
+}
+```
+
+Block elements don't sit alongside each other.
+They create a new line for themselves. Unless changed by other CSS code,
+a block element will expand to the size of the inline dimension,
+therefore spanning the full width in a horizontal writing mode.
+The margin on all sides of a block element will be respected.
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+The `display` property also determines how an element's children should behave.
+For example,
+setting the `display` property to `display: flex` makes the box a block-level box,
+and also converts its children to flex items.
+This enables the flex properties that control alignment, ordering and flow.
+
+## Flexbox and Grid
+
+There are two main layout mechanisms that create layout rules for multiple elements, *[flexbox](/learn/css/flexbox)* and *[grid](/learn/css/grid)*.
+They share similarities, but are designed to solve different layout problems.
+
+
+{% Aside %}
+We will be going into much more detail for both of these in future modules, but here is a high-level overview of what both are and what they are useful for.
+{% endAside %}
+
+### Flexbox
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+Flexbox is a layout mechanism for one-dimensional layouts.
+Layout across a single axis, either horizontally or vertically.
+By default, flexbox will align the element's children next to each other,
+in the inline direction,
+and stretch them in the block direction, so they're all the same height.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjxmor',
+  tab: 'css,result',
+  height: 300
+} %}
+</figure>
+
+
+Items will stay on the same axis and not wrap when they run out of space.
+Instead they will try to squash onto the same line as each other.
+This behaviour can be changed using the `align-items`, `justify-content` and `flex-wrap` properties.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOyWLmg'
+} %}
+</figure>
+
+Flexbox also converts the child elements to be **flex items**,
+which means you can write rules on how they behave inside a flex container.
+You can change alignment, order and justification on an individual item.
+You can also change how it shrinks or grows using  the `flex` property.
+
+```css
+.my-element div {
+ 	flex: 1 0 auto;
+}
+```
+
+The `flex` property is a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+ You can expand the above example like this:
+
+```css
+.my-element div {
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+```
+
+Developers provide these low-level rules to hint a browser how the layout should behave
+when it is challenged by content and viewport dimensions.
+This makes it a very useful mechanism for responsive web design.
+
+### Grid
+
+```css
+.my-element {
+	display: grid;
+}
+```
+
+Grid is similar in a lot of ways to **flexbox**,
+but it is designed to control multi-axis layouts instead of single-axis layouts (vertical or horizontal space).
+
+Grid enables you to write layout rules on an element that has `display: grid`,
+and introduces a few new primitives for layout styling,
+such as the `repeat()` and `minmax()` functions.
+One useful grid unit is the  `fr` unit—which is a fraction of remaining space—you can build traditional 12 column grids,
+with a gap between each item, with 3 CSS properties:
+
+```css
+.my-element {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjxGVz'
+} %}
+</figure>
+
+This example above shows a single axis layout.
+Where flexbox mostly treats items as a group,
+grid gives you precise control over their placement in two dimensions.
+We could define that the first item in this grid takes up 2 rows and 3 columns:
+
+```css
+.my-element :first-child {
+  grid-row: 1/3;
+  grid-column: 1/4;
+}
+```
+
+The `grid-row` and `grid-column` properties instruct the first element in the grid to span to the start of the fourth column,
+from the first column, then span to the third row, from the first row.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNwrwB',
+  height: 650
+} %}
+</figure>
+
+## Flow layout
+
+If not using grid or flexbox,
+your elements display in normal flow.
+There are a number of layout methods that you can use to adjust the behavior and position of items when in normal flow.
+
+### Inline block
+
+Remember how surrounding elements don't respect block margin and padding on an inline element?
+With `inline-block` you *can* cause that to happen.
+
+```css
+p span {
+	display: inline-block;
+}
+```
+
+Using `inline-block` gives you a box that has some of the characteristics of a block-level element,
+but still flows inline with the text.
+
+```css
+p span {
+	margin-top: 0.5rem;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoWZJKw',
+  height: 300,
+  tab: 'css,result'
+} %}
+</figure>
+
+### Floats
+
+If you have an image that sits within a paragraph of text,
+wouldn't it be handy for that text to wrap around that image like you might see in a newspaper?
+You can do this with floats.
+
+```css
+img {
+	float: left;
+	margin-right: 1em;
+}
+```
+
+The `float` property instructs an element to "float" to the direction specified.
+The image in this example is instructed to float left,
+which then allows sibling elements to "wrap" around it.
+You can instruct an element to float `left`, `right` or `inherit`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPaLMg',
+  height: 300
+} %}
+</figure>
+
+{% Aside 'warning' %}
+When you use `float`, keep in mind that any elements following the floated element may have their layout adjusted.
+To prevent this, you can clear the float,
+either by using `clear: both` on an element that follows your floated element
+*or* with `display: flow-root` on the parent of your floated elements.
+
+Find out more in the article
+[The end of the clearfix hack](https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/).
+{% endAside %}
+
+### Multicolumn layout
+
+If you have a really long list of elements,
+such as a list of all of the countries of the world,
+it can result in _a lot_ of scrolling and time wasted for a user.
+It can also create excess whitespace on the page.
+With CSS multicolumn,
+you can split this into multiple columns to help with both of these issues.
+
+```html
+<h1>All countries</h1>
+<ul class="countries">
+  <li>Argentina</li>
+  <li>Aland Islands</li>
+  <li>Albania</li>
+  <li>Algeria</li>
+  <li>American Samoa</li>
+  <li>Andorra</li>
+  …
+</ul>
+```
+
+```css
+.countries {
+	column-count: 2;
+	column-gap: 1em;
+}
+```
+
+This automatically splits that long list into two columns and adds a gap between the two columns.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gOgrpzO'
+} %}
+</figure>
+
+```css
+.countries {
+	width: 100%;
+	column-width: 260px;
+	column-gap: 1em;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOyqPvB'
+} %}
+</figure>
+
+Instead of setting the number of columns that the content is split into,
+you can also define a minimum desired width, using `column-width`.
+As more space is made available in the viewport,
+more columns will automatically be created and as space is reduced,
+columns will also reduce.
+This is very useful in responsive web design contexts.
+
+### Positioning
+
+Last on this overview of layout mechanisms is positioning.
+The `position` property changes how an element behaves in the normal flow of the document,
+and how it relates to other elements.
+The available options are `relative`, `absolute`, `fixed` and `sticky` with the default value being `static`.
+
+```css
+.my-element {
+  position: relative;
+  top: 10px;
+}
+```
+
+This element is nudged 10px down based on its current position in the document,
+as it is positioned relative to itself.
+Adding `position: relative` to an element also makes it the containing block of any child elements with `position: absolute`.
+This means that its child will now be repositioned to this particular element,
+instead of the topmost relative parent, when it has an absolute position applied to it.
+
+```css
+.my-element {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.another-element {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 50px;
+	height: 50px;
+}
+```
+
+When you set `position` to `absolute`,
+it breaks the element out of the current document flow.
+This means two things:
+
+1. You can position this element wherever you like, using `top`, `right`, `bottom` and `left` in its nearest relative parent.
+1. All of the content surrounding an absolute element reflows to fill the remaining space left by that element.
+
+An element with a `position` value of `fixed` behaves in a similar way to `absolute`,
+with its parent being the root `<html>` element.
+Fixed position elements stay anchored from the top left based on the `top`, `right`, `bottom` and `left` values that you set.
+
+You can achieve the anchored,
+fixed aspects of `fixed` and the more predictable document flow-honoring aspects of `relative` by using `sticky`.
+With this value, as the viewport scrolls past the element,
+it stays anchored to the `top`, `right`, `bottom` and `left` values that you set.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdNGZB',
+  height: 600
+} %}
+</figure>
+
+## Wrap-up
+
+There's a lot of choice and flexibility with CSS layout.
+To dive further into the power of CSS [Flexbox](/learn/css/flexbox) and [Grid](/learn/css/grid), continue into the next few modules.
+
+
+{% Assessment 'layout' %}
diff --git a/src/site/content/en/learn/css/layout/layout.assess.yml b/src/site/content/en/learn/css/layout/layout.assess.yml
new file mode 100644
index 00000000000..dcf44657d0b
--- /dev/null
+++ b/src/site/content/en/learn/css/layout/layout.assess.yml
@@ -0,0 +1,63 @@
+setLeader: Test your knowledge of layout
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2"
+    stem: "What 2 things does the `display` property do?"
+    options:
+      - content: "Determines `inline` or `block` or `none`."
+        rationale: "The layout engine needs to know if this box be full width or
+        not and does it need a new line."
+      - content: "Determines the grid layout frame."
+        rationale: "The display property can set display to grid but it doesn't
+        have anything to do with a layout frame."
+      - content: "Determines how the children should behave."
+        rationale: "Flexbox and grid have opinions and new features for their
+        children."
+      - content: "Determines if the box should scroll."
+        rationale: "That's the `overflow` property."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      To flow multiple paragraphs into columns, which CSS property is best for
+      this task?
+    options:
+      - content: "`display: grid`"
+        rationale: "While grid could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next."
+      - content: "`column-count`"
+        rationale: "Paragraphs will flow from the end of one column into the
+        start of the next, like a magazine or newspaper will do."
+      - content: "`display: flex`"
+        rationale: "While flex could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next like is needed."
+      - content: "`float`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What does it mean if a block is out of flow?"
+    options:
+      - content: "It's stuck on the side of the river."
+        rationale: "Context is CSS here, not geography."
+      - content: "It's been given a `top` or `left` position value."
+        rationale: "Having these properties alone do not pull a box out of flow."
+      - content: "It's no longer positioned based on its siblings positions."
+        rationale: "A box with `position: absolute` for example, is now
+        positioned with x and y coordinates based on the containing block, and
+        not its order with other sibling elements."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Flexbox and Grid wrap their children by default?"
+    options:
+      - content: "True"
+        rationale: "It must be opted into with `flex-wrap: wrap` or
+        `repeat(auto-fit, 30ch)`."
+      - content: "False"
+        rationale: "Flexbox and Grid have special wrapping features that
+        need additional styles to apply."
diff --git a/src/site/content/en/learn/css/lists/index.md b/src/site/content/en/learn/css/lists/index.md
new file mode 100644
index 00000000000..5deced0c350
--- /dev/null
+++ b/src/site/content/en/learn/css/lists/index.md
@@ -0,0 +1,267 @@
+---
+title: Lists
+description: >
+  A list, structurally, is composed of a list container element filled with list items. In this module, you'll learn how to style all the parts of a list.
+audio:
+  title: 'The CSS Podcast - 030: Lists'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP030_v2.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - emmatwersky
+date: 2021-10-26
+tags:
+  - css
+---
+
+Imagine you have a bunch of items you plan to buy during your next grocery trip. One common way to represent this visually is a list—but how can you add styling to your grocery list?
+
+```html
+<ul>
+  <li>oat milk</li>
+  <li>rhubarb</li>
+  <li>cereal</li>
+  <li>pie crust</li>
+</ul>
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYzrEOW',
+  tab: 'result'
+} %}
+</figure>
+
+## Creating a List
+
+The preceding list started with a semantic element, or `<ul>`, with grocery list items (`<li>` elements) as children. If you inspect each `<li>` element you can see that they all have `display: list-item`, which is why the browser renders a `::marker` by default.
+
+```css
+li {
+  display: list-item;
+}
+```
+
+There are two other types of lists.
+
+Ordered lists can be created with `<ol>`, in which case the list-item will display a number as the `::marker`.
+
+```html
+<ol>
+  <li>oat milk</li>
+  <li>rhubarb</li>
+  <li>cereal</li>
+  <li>pie crust</li>
+</ol>
+```
+
+And description lists are created with `<dl>`, however this list type does not use the `<li>` list item element.
+
+```html
+<dl>
+  <dt>oat milk</dt>
+  <dd>- non dairy trendy drink</dd>
+  <dt>cereal</dt>
+  <dd>- breakfast food</dd>
+</dl>
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNOrZNG',
+  tab: 'result'
+} %}
+</figure>
+
+## List styles
+{% BrowserCompat 'css.properties.list-style-position' %}
+
+Now that you know how to make a list, you can style them. The first CSS properties to discover are those that are applied to the entire list.
+
+There are three list-style properties you can use to style your example: `list-style-position`, `list-style-image`, and `list-style-type`.
+
+### `list-style-position`
+
+[`list-style-position`](https://developer.mozilla.org/docs/Web/CSS/list-style-position) allows you to move your bullet point to either `inside` or `outside` the list-item's contents. The default `outside` means the bullet point is not included in the list items contents while `inside` moves the first element among the list item's contents.
+
+{% Img src="image/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/qVlpVCrwKwbGjEJdmqh0.jpg", alt="A list with both outside and inside ::marker which shows that outside (default value) is not in the list-item and is inside the list-item content box.", width="800", height="270" %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExXPwxL',
+  tab: 'result'
+} %}
+</figure>
+
+### `list-style-image`
+
+[`list-style-image`](https://developer.mozilla.org/docs/Web/CSS/list-style-image) allows you to replace your list's bullet points with images. This enables you to set an image such as an `url` or `none` to make your bullets an image, svg or gif even. You can also use any media type or even a data URI.
+
+Let's look at how we can add an image of each of our grocery items as the `list-style-image`:
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GREoMgK',
+  tab: 'css,result'
+} %}
+</figure>
+
+{% Aside %}
+This property is a bit limited in controlling the position, size, etc. of the bullets, so we recommend using the [`::marker`](#marker-pseudo) property for a more customizable approach.
+{% endAside %}
+
+### `list-style-type`
+
+The final option is to style the [`list-style-type`](https://developer.mozilla.org/docs/Web/CSS/list-style-type) which changes the bullet points to known style keywords, custom strings, emojis and more. You can view all of the possible list style types [here](https://developer.mozilla.org/docs/Web/CSS/list-style-type ).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOwWGEy',
+  tab: 'css,result'
+} %}
+</figure>
+
+### `list-style` shorthand
+
+Now that we have all of these individual properties, we can use the [`list-style`](https://developer.mozilla.org/docs/Web/CSS/list-style) shorthand to set all of our list styles in one line:
+
+```css
+list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
+```
+
+`list-style` allows you to declare combinations of one, two, or three of the `list-style` properties in any order. If `list-style-type` and `list-style-image` are both set, then` list-style-type` is used as a fallback if the image is unavailable.
+
+```css
+/* type */
+list-style: square;
+
+/* image */
+list-style: url('../img/shape.png');
+
+/* position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/shape.png') outside;
+
+/* Keyword value */
+list-style: none;
+
+/* Global values */
+list-style: inherit;
+list-style: initial;
+list-style: revert;
+list-style: unset;
+```
+
+This is the most commonly used property of the list styles covered in this section. One common application is `list-style: none` to hide default styles. Default styles come from the browser, and you often see reset stylesheets removing list styles like padding and margins. You can also use this shorthand to set styles, like `list-style: square inside;`
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYRJGme',
+  tab: 'result'
+} %}
+</figure>
+
+So far, the examples have focused on styling an entire list and list items, but what about a more granular approach?
+
+## `::marker` pseudo-element
+
+The `list-item` marker element is the bullet, hyphen, or roman numeral that helps indicate each item in your list.
+
+{% Img src="image/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/pOWTl4BYyJI7qgbMVeYu.jpg", alt="A list with three items which shows that each of the bullets are ::marker pseudo-elements.", width="800", height="395" %}
+
+If you inspect the list in DevTools, you can see a `::marker` element for each of the list items, despite not declaring any in HTML. If you inspect the `::marker` further, you'll see the browser default styling for it.
+
+```css
+::marker {
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    text-transform: none;
+    text-indent: 0px !important;
+    text-align: start !important;
+    text-align-last: start !important;
+}
+```
+
+When you declare a list, each item is given a marker, despite there being no bullet point or roman numeral in your HTML. This is  a pseudo-element because the browser generates it for you, and provides a limited styling API to target it. [Learn more about the anatomy of the CSS bullet.](/css-marker-pseudo-element/) `::marker` currently has [limited support](https://developer.mozilla.org/docs/Web/CSS/::marker#browser_compatibility) in Safari.
+
+### Marker box
+
+In the CSS layout model, list item markers are represented by a marker box associated with each list item. The marker box is the container which typically contains the bullet or number.
+
+To style the marker box, you can use the `::marker` selector. This allows you to select just the marker instead of styling based on the entire list.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOwWGPy',
+  tab: 'css,result'
+} %}
+</figure>
+
+{% Aside %}
+Note: `::marker` elements precede any pseudo-elements that you may have inserted using CSS `::before`.
+{% endAside %}
+
+### Marker styles
+
+Now that you have selected the marker, let's look at the styling properties available to this selector. You can learn more about [Custom bullets with CSS ::marker](/css-marker-pseudo-element/) on web.dev.
+
+There are quite a few allowed CSS `::marker` Properties:
+
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYRJGNy',
+  tab: 'result'
+} %}
+</figure>
+
+{% Aside %}
+In ordered lists, the bullets default to numbers. The `::marker` content value is a use case for [counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) to create custom numbering.
+{% endAside %}
+
+## Display type
+
+All of our `list-style` and `::marker` properties know to style `<li>` elements because they have a default display value of list-item. You can also make things that aren't an `<li>` into a list item.
+
+You do this by adding the property `display: list-item`. One example of using `display: list-item` is if you want a hanging bullet on a heading, so that you can change it to something else with `::marker`. The following example shows a heading using `display: list-item` for styling purposes, with a list using correct list markup below.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExXPwjR',
+  tab: 'css,result'
+} %}
+</figure>
+
+While you can turn anything into a list-item view with `display`, you should not use this instead of using correct list markup, if the content you are styling really is a list. Changing the visual appearance of an item to a list item does not change how accessibility services read and recognize the item, so it will not be read as a list item to screen readers or switch devices. You should always use semantic markup and create lists with `<li>` whenever possible.
+
+{% Assessment 'lists' %}
+
+## Resources
+
+- [MDN Guide on Styling Lists](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Custom bullets with CSS ::marker](/css-marker-pseudo-element/)
+- [Smashing Magazine: CSS Lists, Markers and Counters](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/)
+- [MDN Using CSS Counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+- [CSS Lists and Counters Module Level 3](https://www.w3.org/TR/css-lists-3/)
+- [CSS-Tricks: Counting With CSS Counters and CSS Grid](https://css-tricks.com/counting-css-counters-css-grid/)
diff --git a/src/site/content/en/learn/css/lists/lists.assess.yml b/src/site/content/en/learn/css/lists/lists.assess.yml
new file mode 100644
index 00000000000..bb5f92d1ef7
--- /dev/null
+++ b/src/site/content/en/learn/css/lists/lists.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of lists
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "The element preceding a list-item is called a"
+    options:
+      - content: "::bullet"
+        rationale: "Try again."
+      - content: "::pencil"
+        rationale: "Try again."
+      - content: "::marker"
+        rationale: "Correct!"
+      - content: "::counter"
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "2+"
+    correctAnswers: "0,2,4"
+    stem: "The three types of HTML lists are"
+    options:
+      - content: "`<dl>`"
+        rationale: "Correct!"
+      - content: "`<lo>`"
+        rationale: "Try again."
+      - content: "`<ol>`"
+        rationale: "Correct!"
+      - content: "`<li>`"
+        rationale: "Try again."
+      - content: "`<ul>`"
+        rationale: "Correct!"
+      - content: "`<list>`"
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,4"
+    stem: "Which two styles in this list will apply styles to a ::marker?"
+    options:
+      - content: "`transition`"
+        rationale: "Correct!"
+      - content: "`background-color`"
+        rationale: "Try again."
+      - content: "`color`"
+        rationale: "Correct!"
+      - content: "`display`"
+        rationale: "Try again."
diff --git a/src/site/content/en/learn/css/logical-properties/index.md b/src/site/content/en/learn/css/logical-properties/index.md
new file mode 100644
index 00000000000..5bb9805a6c2
--- /dev/null
+++ b/src/site/content/en/learn/css/logical-properties/index.md
@@ -0,0 +1,340 @@
+---
+title: Logical Properties
+description: >
+  Logical, flow relative properties and values are linked to the flow of text,
+  rather than the physical shape of the screen.
+  Learn how to take advantage of this newer approach to CSS.
+audio:
+  title: 'The CSS Podcast - 012: Logical Properties'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_012_v3.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-21
+---
+
+A really common user interface pattern is a text label with a supporting inline icon.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgvZBx'
+} %}
+</figure>
+
+The icon sits to the left of the text with a small gap between the two,
+provided by `margin-right` on the icon.
+There's a problem though,
+because this will only work when the text direction is left to right.
+If the text direction changed to right-to-left—which is how languages like Arabic read—the icon will sit up against the text.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BapWKWm'
+} %}
+</figure>
+
+How do you account for this in CSS?
+Logical properties allow you to resolve these situations. Among many other benefits, they provide free, automatic support for internationalization.
+They help you build a more resilient, inclusive front-end.
+
+## Terminology
+
+The physical properties of top, right, bottom, and left refer to the physical dimensions of the viewport.
+You can think of these like a compass rose on a map.
+Logical properties, on the other hand,
+refer to the edges of a box as they relate to the _flow of content_.
+Therefore, they can change if the text direction or writing mode changes.
+This is a big shift from directional styles,
+and it gives us a lot more flexibility when styling our interfaces.
+
+## Block flow
+
+Block flow is the direction in which content blocks are placed.
+For example, if there are two paragraphs, the block flow is where the second paragraph will go.
+In an English document, the block flow is top-to-bottom.
+Think of this in the context of paragraphs of text following each other, top-to-bottom.
+
+<figure>
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JKfvuIFBBtmvylmFSV8K.svg",
+alt="Three blocks, div elements, with a down arrow, labelled 'block flow'",
+width="800",
+height="507" %}
+</figure>
+
+## Inline flow
+
+The inline flow is how text flows in a sentence.
+In an English document the inline flow is left to right.
+If you were to change the document language of your webpage to Arabic (`<html lang="ar">`),
+then the inline flow would be right-to-left.
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/DfyMS0jh0SjSxaeNioJt.svg",
+alt="Three words, 'she sells seashells', with a left-to-right arrow, labelled 'inline flow'",
+width="800",
+height="507" %}
+</figure>
+
+Text flows in the direction determined by the document's writing mode.
+You can change the direction that text is laid out with the `writing-mode` property.
+This can be applied to the entire document, or to individual elements.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNZGam'
+} %}
+</figure>
+
+## Flow relative
+
+Historically in CSS,
+we have only been able to apply properties like margin relative to the direction of their sides.
+For example, `margin-top` is applied to the physical top of the element.
+With logical properties, `margin-top` becomes `margin-block-start`.
+This means that regardless of language and text direction,
+the **block flow** has appropriate margin rules.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELeBzM'
+} %}
+</figure>
+
+<figure>
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/GezxDZXkJgkMevkKg39M.png",
+alt="A diagram showing all the different sizes of a box and where each sizing section starts and ends",
+width="800",
+height="559" %}
+</figure>
+
+## Sizing
+
+To prevent an element exceeding a certain width or height,
+write a rule like this:
+
+```css
+.my-element {
+  max-width: 150px;
+  max-height: 100px;
+}
+```
+
+The flow-relative equivalents are `max-inline-size` and `max-block-size`.
+You can also use `min-block-size` and `min-inline-size` instead of `min-height` and `min-width`.
+
+With logical properties,
+that max width and height rule would look like this:
+
+```css
+.my-element {
+  max-inline-size: 150px;
+  max-block-size: 100px;
+}
+```
+
+## Start and end
+
+Instead of using directions such as top, right, bottom and left,
+use start and end. This gives you block-start, inline-end, block-end, and inline-start.
+These allow you to apply CSS properties that respond to writing mode changes.
+
+For example, to align text to the right, you could use this CSS:
+
+```css
+p {
+  text-align: right;
+}
+```
+
+If your aim is not to align to the physical right,
+but rather to the start of the reading direction,
+this isn't helpful.
+With logical values, there are more helpful `start` and `end` values which map to the text direction.
+The text alignment rule now looks like this:
+
+```css
+p {
+  text-align: end;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdpdwo'
+} %}
+</figure>
+
+## Spacing and positioning
+
+Logical properties for `margin`, `padding` and `inset`
+make positioning elements, and determining how these elements interact with each other across writing modes easier and more efficient.
+The margin and padding related properties are still direct mappings to directions,
+but the key difference is that when a writing mode changes, they change with it.
+
+```css
+.my-element {
+  padding-top: 2em;
+  padding-bottom: 2em;
+  margin-left: 2em;
+  position: relative;
+  top: 0.2em;
+}
+```
+
+This adds some vertical inside space with `padding` and pushes it out from the left with `margin`.
+The `top` property also shifts it downwards.
+With logical property equivalents, it would instead look like this:
+
+```css
+.my-element {
+  padding-block-start: 2em;
+  padding-block-end: 2em;
+  margin-inline-start: 2em;
+  position: relative;
+  inset-block-start: 0.2em;
+}
+```
+
+This adds some inline inside space with `padding` and pushes it out from the inline-start with `margin`.
+The `inset-block` property moves it inwards from the block-start.
+
+The `inset-block` property isn't the only shorthand option with logical properties.
+This rule can be further condensed,
+using shorthand versions of the margin and padding properties.
+
+```css
+.my-element {
+  padding-block: 2em;
+  margin-inline: 2em 0;
+  position: relative;
+  inset-block: 0.2em 0;
+}
+```
+
+## Borders
+
+Adding `border` and `border-radius` can also be done with logical properties.
+To add a border on the bottom and right, with a right-hand radius, you might write a rule like this:
+
+```css
+.my-element {
+  border-bottom: 1px solid red;
+  border-right: 1px solid red;
+  border-bottom-right-radius: 1em;
+}
+```
+
+Or, you could use logical properties like this:
+
+```css
+.my-element {
+  border-block-end: 1px solid red;
+  border-inline-end: 1px solid red;
+  border-end-end-radius: 1em;
+}
+```
+
+The `end-end` in `border-end-end-radius` is the block end _and_ inline end.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgMgby'
+} %}
+</figure>
+
+## Units
+
+Logical properties bring two new units: `vi` and `vb`.
+A `vi` unit is 1% of the viewport size in the inline direction.
+The non-logical property equivalent is `vw`.
+The `vb` unit is 1% of the viewport in the block direction.
+The non-logical property equivalent is `vh`.
+
+These units will always map to the reading direction.
+For example, if you want an element to take up 80% of the available inline space of a viewport,
+using the `vi` unit will automatically switch that size to be top to bottom if the writing mode is vertical.
+
+## Using logical properties pragmatically
+
+Logical properties and writing modes are not just for internationalization.
+You can use them to produce a more versatile user interface.
+
+If you have a chart that has labels on the X axis and Y axis,
+you might want the text on the Y label to read vertically.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNZNgE'
+} %}
+</figure>
+
+Because the Y axis label in the demo has a `writing-mode` of `vertical-rl`,
+you can use the same `margin` values on both labels.
+The `margin-block-start` value applies to both labels
+because the block start is on the right for the Y axis and on the top for the X axis.
+The block-start sides have a red border so you can see them.
+
+## Solving the icon issue
+
+Now that we've covered logical properties,
+this knowledge can be applied to the design problem we started with.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgvZBx'
+} %}
+</figure>
+
+```css
+p {
+  display: inline-flex;
+  align-items: center;
+}
+
+p svg {
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 0.5em;
+  flex: none;
+}
+```
+
+The margin has been applied to the right of the icon element.
+In order for the spacing between the icon and the text to support all reading direction,
+the `margin-inline-end` property needs to be used instead.
+
+```css/8
+p {
+  display: inline-flex;
+  align-items: center;
+}
+
+p svg {
+  width: 1.2em;
+  height: 1.2em;
+  margin-inline-end: 0.5em;
+  flex: none;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRrrOy'
+} %}
+</figure>
+
+Now, regardless of reading direction,
+the icon will position itself and space itself appropriately.
+
+{% Assessment 'logical-props' %}
diff --git a/src/site/content/en/learn/css/logical-properties/logical-props.assess.yml b/src/site/content/en/learn/css/logical-properties/logical-props.assess.yml
new file mode 100644
index 00000000000..ff567505cb3
--- /dev/null
+++ b/src/site/content/en/learn/css/logical-properties/logical-props.assess.yml
@@ -0,0 +1,44 @@
+setLeader: Test your knowledge of logical properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: As you write with your hand, your wrist is moving along which logical axis?
+    options:
+      - content: "`inline`"
+        rationale: "Words flow inline and so must a your hand travel when writing."
+      - content: "`block`"
+        rationale: "Content flows as blocks and your wrist moves along this axis
+        when end one content type and beginning another."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4,5"
+    stem: Check all that can benefit from logical properties
+    options:
+      - content: "colors"
+        rationale: "Color don't change when a document writing mode does."
+      - content: "alignment"
+        rationale: "Examples: `flex-start`, `block-end`, and `inline-start`"
+      - content: "shadows"
+        rationale: "Shadows don't change when a document writing mode does."
+      - content: "box sides"
+        rationale: "Examples: `block-start` and `inline`."
+      - content: "sizes"
+        rationale: "Examples: `inline-size` and `max-block-size`."
+      - content: "box corners"
+        rationale: "Examples: `border-end-end-radius`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Which logical side of a word is underlined?
+    options:
+      - content: "inline start"
+        rationale: "This would put an underline on the left of a word in English."
+      - content: "inline end"
+        rationale: "This would put an underline on the right of a word in English."
+      - content: "block start"
+        rationale: "This would put an underline on the top of a word in English."
+      - content: "block end"
+        rationale: "Very nice that CSS does this positioning for you."
diff --git a/src/site/content/en/learn/css/overflow/index.md b/src/site/content/en/learn/css/overflow/index.md
new file mode 100644
index 00000000000..0c41e1b1913
--- /dev/null
+++ b/src/site/content/en/learn/css/overflow/index.md
@@ -0,0 +1,233 @@
+---
+title: Overflow
+description: >
+  Overflow is how you deal with content that doesn’t fit in a set parent size. In this module, you’ll think outside the box, and learn how to style overflowing content.
+audio:
+  title: 'The CSS Podcast - 034: Overflow'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP034_v1.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - emmatwersky
+date: 2021-11-09
+tags:
+  - css
+---
+
+When content extends beyond its parent, there are many options for how you can handle it. You can scroll to add additional space, clip the overflowing edges, indicate the cut-off with an ellipsis, and so much more. Overflow is especially important to consider when developing for phone applications and multiple screen sizes.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYjEjWZ',
+  tab: 'result'
+} %}
+</figure>
+
+There are two different clipping options in CSS; `text-overflow` will help with individual lines of text, and the `overflow` properties will help control overflow in the box model.
+
+## Single line overflow with `text-overflow`
+
+Use the [`text-overflow`](https://developer.mozilla.org/docs/Web/CSS/text-overflow) property on any element that contains text node(s), for example a paragraph, `<p>`. It specifies how the text appears when it doesn’t fit in the available space of the element. All viewable HTML text on a page is in [text nodes](https://developer.mozilla.org/docs/Web/API/Text). To use `text-overflow` you need a single unwrapped line of text, so you must also set `overflow` to `hidden` and have a `white-space` value that prevents wrapping.
+
+```css
+p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNwQXyN',
+  tab: 'result'
+} %}
+</figure>
+
+## Using overflow properties
+
+Overflow properties are set on an element to control what happens when its children need more space than it has available. This can be intentional, like in an interactive map like Google Maps, where a user pans around a large image clipped to a specific size. It can also be unintentional like in a chat application where the user types a lengthy message that doesn’t fit in the text bubble.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKvwvXE',
+  tab: 'result'
+} %}
+</figure>
+
+You can think of the overflow in two parts. The parent element has a firmly constrained space that will not change. You can think of this as a window. The child elements are content that want more space from the parent. You can think of this as what you are looking through the window at. Managing overflow will help guide how the window frames this content.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxrmxOm',
+  tab: 'result'
+} %}
+</figure>
+
+### Scrolling on the vertical and horizontal axis
+
+The `overflow-y` property controls physical overflow along the vertical axis of the device viewport, therefore scrolling up and down.
+
+The `overflow-x` property controls overflow along the horizontal axis of the device viewport, therefore scrolling left and right.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzQdzoG',
+  tab: 'css,result'
+} %}
+</figure>
+
+### Logical properties for scroll direction
+{% BrowserCompat 'css.properties.overflow-inline' %}
+
+The [`overflow-inline`](https://developer.mozilla.org/docs/Web/CSS/overflow-inline) and [`overflow-block`](https://developer.mozilla.org/docs/Web/CSS/overflow-block) properties set the overflow based on the document direction and writing mode.
+
+### The `overflow` shorthand
+
+The [`overflow`](https://developer.mozilla.org/docs/Web/CSS/overflow) shorthand sets both `overflow-x` and `overflow-y` styles in one line:
+
+```css
+overflow: hidden scroll;
+```
+
+If two keywords are specified, the first applies to `overflow-x` and the second to `overflow-y`. Otherwise, both `overflow-x` and `overflow-y` use the same value.
+
+#### Values
+
+Let's take a closer look at the [values and keywords](https://developer.mozilla.org/docs/Web/CSS/overflow#values) available for the `overflow` properties.
+
+`overflow: visible` (default)
+: Without setting the property, `overflow: visible` is the default value for the web. This ensures that content is never unintentionally hidden and follows the core tenets of "never hide content" or "safe layouts of precise layouts".
+
+`overflow: hidden`
+: With `overflow: hidden` content is clipped in the specified direction, and no scrollbars are provided to show it.
+
+`overflow: scroll`
+: `overflow: scroll` enables scrollbars to allow users to scroll through content. Even if content isn't currently overflowing, scrollbars will be present. This is a great way to reduce future layout shift if a container may be scrollable in the future based, for example, on resize, and visually prepare the user for scrollable areas.
+
+`overflow: clip`
+: Like `overflow: hidden`, the content with `overflow: clip` is clipped to the element's padding box. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling.
+
+`overflow: auto`
+: Finally, the value most commonly used, `overflow: auto`. This respects the user's preferences and shows scrollbars if needed, but hides them by default, and gives responsibility for scrolling to the user and browser.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gORZaaa',
+  tab: 'result'
+} %}
+</figure>
+
+{% Aside %}
+Using the `overflow` property with a value other than `visible` creates a [block formatting context](https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context).
+{% endAside %}
+
+## Scrolling and overflow
+
+Many of these `overflow` behaviors introduce a scrollbar, but there’s a few specific scroll behaviors and properties that can help you control scrolling on your overflow container.
+
+### Scrolling and accessibility
+
+It's important to make sure that the scrollable area can accept focus so that a keyboard user can tab to the box, then use the arrow keys to scroll.
+
+To allow a scrolling box to accept focus add `tabindex="0"`, a name with the [`aria-labelledby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute, and an appropriate `role` attribute. For example:
+
+```html
+<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
+    content
+</div>
+```
+
+CSS can then be used to indicate that the box has focus, using the `outline` property to give a visual clue that it will now be scrollable.
+
+In [Using CSS to Enforce Accessibility](https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html) Adrian Roselli demonstrates how CSS can help prevent accessibility regressions. For example, to only turn on scrolling and add the focus indicator if the correct attributes are used. The following rules will only make the box scrollable if it has a `tabindex`, `aria-labelledby`, and `role` attribute.
+
+```css
+[role][aria-labelledby][tabindex] {
+  overflow: auto;
+}
+
+[role][aria-labelledby][tabindex]:focus {
+  outline: .1em solid blue;
+}
+```
+
+### Scrollbar positioning within the box model
+
+Scroll bars take up space within the padding box and can compete for space if `inline` and not `overlayed`. The [box model module](/learn/css/box-model/#the-areas-of-the-box-model) expands more on this potential source of layout shift.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BaReoEV',
+  tab: 'result'
+} %}
+</figure>
+
+### root-scroller vs implicit-scroller
+
+You may notice that some scrollers have a pull-to-refresh behavior and other special behaviors, especially when developing for mobile and hybrid applications. This scroll behavior happens on the root scroller. There is only ever one root scroller on a page. By default, the [documentElement](https://developer.mozilla.org/docs/Web/API/Document/documentElement) is the page's root scroller, however, by changing which element is the root scroller, the special behaviors can be applied to scrollers other than the documentElement, we call this new scroller the implicit root scroller.
+
+To create a root scroller, you can use something called *scroller promotion* by positioning a container as fixed, ensuring it covers the entire viewport and is z-index on top with a scroller. Experience a root scroller vs a nested implicit scroller [here](https://cdpn.io/web-dot-dev/debug/dyzPzwz).
+
+<figure>
+  {% Video
+    src="video/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/sn1cOusFy18gRkZroAET.mp4",
+    autoplay="true",
+    loop="true",
+    width="380",
+    muted="true"
+  %}
+  <figcaption>
+    The video shows a root scroller with bounce behavior and new styling features, <br>
+    compared to scrolling an implicit scroller with no enhanced scroll behavior.
+  </figcaption>
+</figure>
+
+### scroll-behavior
+{% BrowserCompat 'css.properties.scroll-behavior' %}
+
+`scroll-behavior` allows you to opt into browser-controlled scrolling to elements. This allows you to specify how in-page navigation like `.scrollTo()` or links are handled.
+
+This is especially useful when used with [prefers-reduced-motion](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion) to specify scroll behavior based on user preference.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-view {
+    scroll-behavior: auto;
+  }
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNwJgae',
+  tab: 'result'
+} %}
+</figure>
+
+### overscroll-behavior
+{% BrowserCompat 'css.properties.overscroll-behavior' %}
+
+If you’ve ever reached the end of a modal overlay, then continued scrolling and had the page behind the overlay move, this is the scroll chaining, or bubbling up to the parent scroll container. The [`overscroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior) property allows you to prevent overflow scrolling leaking into a parent container (called scroll chaining).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'powqJQe',
+  tab: 'result'
+} %}
+</figure>
+
+{% Assessment 'overflow' %}
+
+## Resources
+
+[Overflow And Data Loss In CSS from Smashing Magazine](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/)
+
diff --git a/src/site/content/en/learn/css/overflow/overflow.assess.yml b/src/site/content/en/learn/css/overflow/overflow.assess.yml
new file mode 100644
index 00000000000..622f3b60d00
--- /dev/null
+++ b/src/site/content/en/learn/css/overflow/overflow.assess.yml
@@ -0,0 +1,56 @@
+setLeader: Test your knowledge of overflow
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Text overflow and element overflow are the same?
+    options:
+      - content: "true"
+        rationale: "Text overflow is special when compared
+        to element overflow."
+      - content: "false"
+        rationale: "Text overflow is generally about inline overflow, 
+        where element overflow is about block overflow."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "The `overflow` property accepts 2 keywords,
+        the first keyword is for which axis?"
+    options:
+      - content: "horizontal"
+        rationale: "🎉"
+      - content: "vertical"
+        rationale: "Almost always, when passing two shorthand values,
+        the first is horizontal."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Which space in the box model do scrollbars
+    consume when showing and inline?"
+    options:
+      - content: "content box"
+        rationale: "Try again!"
+      - content: "padding box"
+        rationale: "Scrollbars in `overlay` mode will overlap the padding, 
+        and when in `inline` mode will add to the padding."
+      - content: "border box"
+        rationale: "Try again!"
+      - content: "margin box"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "To trap extra momentum from scrolling in a
+    nested implicit scroller, which property would you use?"
+    options:
+      - content: "`scroll-behavior`"
+        rationale: "Try again!"
+      - content: "`scroll-hint`"
+        rationale: "Try again!"
+      - content: "`overscroll-behavior`"
+        rationale: "Setting this property to `contain` will trap scrolling."
+      - content: "`scroll-padding`"
+        rationale: "Try again!"
+      - content: "`overscroll-effect`"
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/css/pseudo-classes/index.md b/src/site/content/en/learn/css/pseudo-classes/index.md
new file mode 100644
index 00000000000..36a3624e7a8
--- /dev/null
+++ b/src/site/content/en/learn/css/pseudo-classes/index.md
@@ -0,0 +1,591 @@
+---
+title: Pseudo-classes
+description: >
+  Pseudo-classes let you apply CSS based on state changes.
+  This means that your design can react to user input such as an invalid email address.
+audio:
+  title: 'The CSS Podcast - 015: Pseudo-classes'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_015_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-28
+---
+
+Say you've got an email sign up form,
+and you want the email form field to have a red border if it contains an invalid email address.
+How do you do that?
+You can use an `:invalid` CSS pseudo-class,
+which is one of many browser-provided pseudo-classes.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdMGjE',
+  height: 250
+} %}
+</figure>
+
+A pseudo-class lets you apply styles based on state changes and external factors.
+This means that your design can react to user input such as an invalid email address.
+These are covered in the [selectors](/learn/css/selectors) module,
+and this module will take you through them in more detail.
+
+Unlike pseudo-elements,
+which you can learn more about in the [previous module](/learn/css/pseudo-elements),
+pseudo-*classes* hook onto specific *states* that an element might be in,
+rather than generally style parts of that element.
+
+## Interactive states
+
+The following pseudo-classes apply due to an interaction a user has with your page.
+
+### `:hover`
+{% BrowserCompat 'css.selectors.hover' %}
+
+If a user has a pointing device like a mouse or trackpad,
+and they place it over an element,
+you can hook on to that state with
+[`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover) to apply styles.
+This is a useful way to hint that an element can be interacted with.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgJyNP',
+  height: 250
+} %}
+</figure>
+
+### `:active`
+{% BrowserCompat 'css.selectors.active' %}
+
+This state is triggered when an element is actively being interacted with—
+such as a click—before click is released.
+If a pointing device like a mouse is used,
+this state is when the click starts and hasn't yet been released.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNxpam',
+  height: 250
+} %}
+</figure>
+
+### `:focus`, `:focus-within`, and `:focus-visible`
+{% BrowserCompat 'css.selectors.focus' %}
+
+If an element can receive focus—like a `<button>`—
+you can react to that state with the
+[`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus) pseudo-class.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNREoyj'
+} %}
+</figure>
+
+You can also react if a child element of your element receives focus with
+[`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'mdRMOoV',
+  height: 250
+} %}
+</figure>
+
+Focusable elements, like buttons,
+will show a focus ring when they are in focus—even when clicked.
+In this sort of situation, a developer will apply the following CSS:
+
+```css
+button:focus {
+	outline: none;
+}
+```
+
+This CSS removes the default browser focus ring when an element receives focus,
+which presents an accessibility issue for users who navigate a web page with a keyboard.
+If there is no focus style,
+they won't be able to keep track of where focus currently is when using the <kbd>tab</kbd> key.
+With [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
+you can present a focus style when an element receives focus via the keyboard,
+while also using the `outline: none` rule to prevent it when a pointer device interacts with it.
+
+```css
+button:focus {
+	outline: none;
+}
+
+button:focus-visible {
+	outline: 1px solid black;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRXRdW',
+  height: 350
+} %}
+</figure>
+
+### `:target`
+{% BrowserCompat 'css.selectors.target' %}
+
+The [`:target`](https://developer.mozilla.org/docs/Web/CSS/:target)
+pseudo-class selects an element that has an `id` matching a URL fragment.
+Say you have the following HTML:
+
+```html
+<article id="content">
+	…
+</article>
+```
+
+You can attach styles to that element when the url contains `#content`.
+
+```css
+#content:target {
+	background: yellow;
+}
+```
+
+This is useful for highlighting areas that might have been specifically linked to,
+such as the main content on a website, via a skip link.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKavaqx'
+} %}
+</figure>
+
+## Historic states
+
+### `:link`
+{% BrowserCompat 'css.selectors.link' %}
+
+The [`:link`](https://developer.mozilla.org/docs/Web/CSS/:link)
+pseudo-class can be applied to any `<a>` element that has a `href` value that **hasn't been** visited yet.
+
+### `:visited`
+
+You can style a link that's already been visited by the user using the
+[`:visited`](https://developer.mozilla.org/docs/Web/CSS/:visited) pseudo-class.
+This is the opposite state to `:link` but you have fewer CSS properties to use for
+[security reasons](https://developer.mozilla.org/docs/Web/CSS/Privacy_and_the_:visited_selector).
+You can only style `color`, `background-color`,
+`border-color`, `outline-color` and the color of SVG `fill` and `stroke`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWjmzM'
+} %}
+</figure>
+
+#### Order matters
+
+If you define a `:visited` style,
+it can be overridden by a link pseudo-class with at least equal specificity.
+Because of this,
+it's recommended that you use the LVHA rule for styling links with pseudo-classes in a particular order:
+`:link`, `:visited`, `:hover`, `:active`.
+
+```css
+a:link {}
+a:visited {}
+a:hover {}
+a:active {}
+```
+
+{% Aside %}
+For security reasons,
+you can only change styles defined by a `:link` or unvisited state with the `:visited` pseudo-class,
+so making sure you define changeable styles first is important.
+Sticking to the LVHA rule will help with that.
+{% endAside %}
+
+## Form states
+
+The following pseudo-classes can select form elements,
+in the various states that these elements might be in during interaction with them.
+
+### `:disabled` and `:enabled`
+{% BrowserCompat 'css.selectors.disabled' %}
+
+If a form element,
+such as a `<button>` is disabled by the browser,
+you can hook on to that state with the
+[`:disabled`](https://developer.mozilla.org/docs/Web/CSS/:disabled) pseudo-class.
+The [`:enabled`](https://developer.mozilla.org/docs/Web/CSS/:enabled)
+pseudo-class is available for the opposite state,
+though form elements are also `:enabled` by default,
+therefore you might not find yourself reaching for this pseudo-class.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgogPG',
+  height: 250
+} %}
+</figure>
+
+### `:checked` and `:indeterminate`
+{% BrowserCompat 'css.selectors.checked' %}
+
+The [`:checked`](https://developer.mozilla.org/docs/Web/CSS/:checked)
+pseudo-class is available when a supporting form element,
+such as a checkbox or radio button is in a checked state.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrvrxv',
+  height: 250
+} %}
+</figure>
+
+The `:checked` state is a binary(true or false) state,
+but checkboxes do have an in-between state when they are neither checked or unchecked.
+This is known as the
+[`:indeterminate`](https://developer.mozilla.org/docs/Web/CSS/:indeterminate) state.
+
+An example of this state is when you have a "select all" control that checks all checkboxes in a group.
+If the user was to then uncheck one of these checkboxes,
+the root checkbox would no longer represent "all" being checked,
+so should be put into an indeterminate state.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdvdLB',
+  height: 250
+} %}
+</figure>
+
+The `<progress>` element also has an indeterminate state that can be styled.
+A common use case is to give it a striped appearance to indicate it's unknown how much more is needed.
+
+### `:placeholder-shown`
+{% BrowserCompat 'css.selectors.placeholder-shown' %}
+
+If a form field has a `placeholder` attribute and **no value**,
+the [`:placeholder-shown`](https://developer.mozilla.org/docs/Web/CSS/:placeholder-shown)
+pseudo-class can be used to attach styles to that state.
+As soon as there is content in the field,
+whether it has a `placeholder` or not,
+this state will no longer apply.
+
+### Validation states
+{% BrowserCompat 'css.selectors.valid' %}
+
+You can respond to HTML form validation with pseudo-classes such as
+[`:valid`](https://developer.mozilla.org/docs/Web/CSS/:valid),
+[`:invalid`](https://developer.mozilla.org/docs/Web/CSS/:invalid) and
+[`:in-range`](https://developer.mozilla.org/docs/Web/CSS/:in-range).
+The `:valid` and `:invalid` pseudo-classes are useful for contexts
+such as an email field that has a `pattern` that needs to be matched,
+for it to be a valid field.
+This valid value state can be shown to the user,
+helping them understand they can safely move to the next field.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdMpaL',
+  height: 250
+} %}
+</figure>
+
+The `:in-range` pseudo-class is available if an input has a `min` and `max`,
+such as a numeric input *and* the value is within those bounds.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBRXrpP',
+  height: 250
+} %}
+</figure>
+
+With HTML forms,
+you can determine that a field is required with the `required` attribute.
+The [`:required`](https://developer.mozilla.org/docs/Web/CSS/:required)
+pseudo-class will be available for required fields.
+Fields that are not required can be selected with the
+[`:optional`](https://developer.mozilla.org/docs/Web/CSS/:optional) pseudo-class.
+
+{% Aside %}
+It's not a good idea to rely solely on color to signify state changes—
+especially red and green—because colorblind and low-vision users can struggle to see a state change,
+or even miss it completely.
+A good idea is to use color to support state changes,
+along with text changes and icon changes to visually signify change
+{% endAside %}
+
+## Selecting elements by their index, order and occurrence
+
+There is a group of pseudo-classes that select items based on where they are in the document.
+
+### `:first-child` and `:last-child`
+{% BrowserCompat 'css.selectors.first-child' %}
+
+If you want to find the first or last item,
+you can use
+[`:first-child`](https://developer.mozilla.org/docs/Web/CSS/:first-child) and
+[`:last-child`](https://developer.mozilla.org/docs/Web/CSS/:last-child).
+These pseudo-classes will return either the first or last element in a group of sibling elements.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNxZRO'
+} %}
+</figure>
+
+### `:only-child`
+{% BrowserCompat 'css.selectors.only-child' %}
+
+You can also select elements that have no siblings,
+with the
+[`:only-child`](https://developer.mozilla.org/docs/Web/CSS/:only-child) pseudo-class.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyNzvaj'
+} %}
+</figure>
+
+### `:first-of-type` and `:last-of-type`
+{% BrowserCompat 'css.selectors.first-of-type' %}
+
+You can select the
+[`:first-of-type`](https://developer.mozilla.org/docs/Web/CSS/:first-of-type) and
+[`:last-of-type`](https://developer.mozilla.org/docs/Web/CSS/:last-of-type) which at first,
+look like they do the same thing as `:first-child` and `:last-child`, but consider this HTML:
+
+```html
+<div class="my-parent">
+	<p>A paragraph</p>
+	<div>A div</div>
+	<div>Another div</div>
+</div>
+```
+
+And this CSS:
+
+```css
+.my-parent div:first-child {
+	color: red;
+}
+```
+
+No elements would be colored red because the first child is a paragraph and not a div.
+The `:first-of-type` pseudo-class is useful in this context.
+
+```css
+.my-parent div:first-of-type {
+	color: red;
+}
+```
+
+Even though the first `<div>` is the second child,
+it is still the first of type inside the `.my-parent` element,
+so with this rule, it will be colored red.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRreXE',
+  height: 250
+} %}
+</figure>
+
+### `:nth-child` and `:nth-of-type`
+{% BrowserCompat 'css.selectors.nth-child' %}
+
+You're not limited to first and last children and types either.
+The [`:nth-child`](https://developer.mozilla.org/docs/Web/CSS/:nth-child) and
+[`:nth-of-type`](https://developer.mozilla.org/docs/Web/CSS/:nth-of-type)
+pseudo-classes allow you to specify an element that is at a certain index.
+The indexing in CSS selectors starts at 1.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrvWbL'
+} %}
+</figure>
+
+You can pass more than an index into these pseudo-classes too.
+If you wanted to select all even elements, you can use `:nth-child(even)`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'wvgqdwv'
+} %}
+</figure>
+
+You can also create more complex selectors that find items at regularly spaced intervals,
+using [the An+B microsyntax](https://www.w3.org/TR/css-syntax-3/#anb-microsyntax).
+
+```css
+li:nth-child(3n+3) {
+	background: yellow;
+}
+```
+
+This selector selects every third item,
+starting at item 3.
+The `n` in this expression is the index,
+which starts at zero the 3 (`3n`) is how much you multiply that index by.
+
+Let's say you have 7 `<li>` items.
+The first item that is selected is 3 because `3n+3` translates to `(3 * 0) + 3`.
+The next iteration would pick item 6 because `n` has now incremented to `1`,
+so `(3 * 1) + 3)`.
+This expression works for both `:nth-child` and `:nth-of-type`.
+
+You can play around with this sort of selector on this
+[nth-child tester](https://css-tricks.com/examples/nth-child-tester/) or this
+[quantity selector tool](https://quantityqueries.com).
+
+### `:only-of-type`
+{% BrowserCompat 'css.selectors.only-of-type' %}
+
+Lastly, you can find the only element of a certain type in a group of siblings with
+[`:only-of-type`](https://developer.mozilla.org/docs/Web/CSS/:only-of-type).
+This is useful if you want to select lists with only one item,
+or if you want to find the only bold element in a paragraph.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgobJb',
+  height: 250
+} %}
+</figure>
+
+## Finding empty elements
+
+It can sometimes be useful to identify completely empty elements,
+and there is a pseudo-class for that too.
+
+### `:empty`
+{% BrowserCompat 'css.selectors.empty' %}
+
+If an element has no children, the
+[`:empty`](https://developer.mozilla.org/docs/Web/CSS/:empty) pseudo-class applies to them.
+Children aren't just HTML elements or text nodes though: they can also be whitespace,
+which can be confusing when you're debugging the following HTML and wondering why it isn't working with `:empty`:
+
+```html
+<div>
+</div>
+```
+
+The reason is that there's some whitespace between the opening and closing `<div>`,
+so empty won't work.
+
+The `:empty` pseudo-class can be useful if you have little control over the HTML and want to hide empty elements,
+such as a WYSIWYG content editor.
+Here, an editor has added a stray, empty paragraph.
+
+```html
+<article class="post">
+ <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p></p>
+ <p>Curabitur blandit tempus porttitor.</p>
+</article>
+```
+
+With `:empty`, you can find that and hide it.
+
+```css
+.post :empty {
+	display: none;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPzbKg',
+  height: 250,
+  tab: 'html,result'
+} %}
+</figure>
+
+## Finding and excluding multiple elements
+
+Some pseudo-classes help you to write more compact CSS.
+
+### `:is()`
+{% BrowserCompat 'css.selectors.is' %}
+
+If you want to find all of the `h2`, `li` and `img` child elements in a `.post` element,
+you might think to write a selector list like this:
+
+```css
+.post h2,
+.post li,
+.post img {
+	…
+}
+```
+
+With the [`:is()`](https://developer.mozilla.org/docs/Web/CSS/:is)
+pseudo-class, you can write a more compact version:
+
+```css
+.post :is(h2, li, img) {
+	…
+}
+```
+
+The `:is` pseudo-class is not only more compact than a selector list but it is also more forgiving.
+In most cases,
+if there's an error or unsupported selector in a selector list,
+the entire selector list will no longer work.
+If there's an error in the passed selectors in an `:is` pseudo-class,
+it will ignore the invalid selector, but use those which are valid.
+
+### `:not()`
+{% BrowserCompat 'css.selectors.not' %}
+
+You can also exclude items with the
+[`:not()`](https://developer.mozilla.org/docs/Web/CSS/:not) pseudo-class.
+For example, you can use it to style all links that don't have a `class` attribute.
+
+```css
+a:not([class]) {
+	color: blue;
+}
+```
+
+A `:not` pseudo-class can also help you to improve accessibility.
+For example, an `<img>` must have an `alt`, even if its an empty value,
+so you could write a CSS rule that adds a thick red outline to invalid images:
+
+```css
+img:not([alt]) {
+	outline: 10px red;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpyWJK'
+} %}
+</figure>
+
+{% Assessment 'pseudo-classes' %}
diff --git a/src/site/content/en/learn/css/pseudo-classes/pseudo-classes.assess.yml b/src/site/content/en/learn/css/pseudo-classes/pseudo-classes.assess.yml
new file mode 100644
index 00000000000..b703c0a5d9e
--- /dev/null
+++ b/src/site/content/en/learn/css/pseudo-classes/pseudo-classes.assess.yml
@@ -0,0 +1,65 @@
+setLeader: Test your knowledge of pseudo classes
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      Pseudo-classes act as if a class has been dynamically applied to an element, while pseudo-elements act on an element itself.
+    options:
+      - content: "True"
+        rationale: "Watch for the use of a single or double `:` as a key
+        distinguishing character in the selector"
+      - content: "False"
+        rationale: "Pseudo-elements are for parts, Pseudo-classes are for
+        state."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3"
+    stem: Which of the following are a *functional* pseudo-class?
+    options:
+      - content: "`:is()`"
+        rationale: "🎉"
+      - content: "`:target`"
+        rationale: "Functional pseudo-classes have `()` after them, to indicate
+        they accept paremeters."
+      - content: "`:empty`"
+        rationale: "Functional pseudo-classes have `()` after them, to indicate
+        they accept paremeters."
+      - content: "`:not()`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3,4"
+    stem: Which of the following pseudo-classes are due to a user-interaction?
+    options:
+      - content: "`:hover`"
+        rationale: "🎉"
+      - content: "`:press`"
+        rationale: "Try again!"
+      - content: "`:squeeze`"
+        rationale: "Try again!"
+      - content: "`:target`"
+        rationale: "🎉"
+      - content: "`:focus-within`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,4,6"
+    stem: "Which of the following are `<form>` state pseudo classes?"
+    options:
+      - content: "`:enabled`"
+        rationale: "🎉"
+      - content: "`:fresh`"
+        rationale: "Try again!"
+      - content: "`:indeterminate`"
+        rationale: "🎉"
+      - content: "`:checked`"
+        rationale: "🎉"
+      - content: "`:in-range`"
+        rationale: "🎉"
+      - content: "`:loading`"
+        rationale: "Try again!"
+      - content: "`:valid`"
+        rationale: "🎉"
diff --git a/src/site/content/en/learn/css/pseudo-elements/index.md b/src/site/content/en/learn/css/pseudo-elements/index.md
new file mode 100644
index 00000000000..93e848b34a5
--- /dev/null
+++ b/src/site/content/en/learn/css/pseudo-elements/index.md
@@ -0,0 +1,333 @@
+---
+title: Pseudo-elements
+description: >
+  A pseudo-element is like adding or targeting an extra element without having to add more HTML.
+  They have a variety of roles and you can learn about them in this module.
+audio:
+  title: 'The CSS Podcast - 014: Pseudo-elements'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_014_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-27
+---
+
+If you've got an article of content
+and you want the first letter to be a much bigger drop cap—
+how do you achieve that?
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Qpo2f3eRInt5iM6qW2p2.svg",
+alt="A couple of paragraphs of text with a blue drop cap",
+width="800",
+height="318" %}
+
+In CSS,
+you can use the `::first-letter` pseudo-element to achieve this sort of design detail.
+
+```css
+p::first-letter {
+  color: blue;
+  float: left;
+  font-size: 2.6em;
+  font-weight: bold;
+  line-height: 1;
+  margin-inline-end: 0.2rem;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoWjybP'
+} %}
+</figure>
+
+A pseudo-element is like adding or targeting an extra element without having to add more HTML.
+This example solution, using `::first-letter`,
+is one of many pseudo-elements.
+They have a range of roles,
+and in this lesson you're going to learn which pseudo-elements are available and how you can use them.
+
+## `::before` and `::after`
+
+Both the
+[`::before`](https://developer.mozilla.org/docs/Web/CSS/::before) and
+[`::after`](https://developer.mozilla.org/docs/Web/CSS/::after)
+pseudo-elements create a child element inside an element **only** if you define a `content` property.
+
+```css
+.my-element::before {
+	content: "";
+}
+
+.my-element::after {
+	content: "";
+}
+```
+
+The `content` can be any string
+—even an empty one—
+but be mindful that anything other than an empty string will likely be announced by a screen reader.
+You can add an image `url`,
+which will insert an image at its original dimensions,
+so you won't be able to resize it.
+You can also insert a
+[`counter`](https://developer.mozilla.org/docs/Web/CSS/counter()).
+
+{% Aside 'key-term' %}
+You can create a named counter and then increment it,
+based on its position in the document flow.
+There's all sorts of contexts where they can be really useful, such as automatically numbering an outline.
+{% endAside %}
+
+Once a `::before` or `::after` element has been created,
+you can style it however you want with no limits.
+You can only insert a `::before` or `::after` element to an element that will accept child elements
+([elements with a document tree](https://www.w3.org/TR/CSS21/generate.html)),
+so elements such as `<img />`, `<video>` and `<input>` won't work.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrEYrg'
+} %}
+</figure>
+
+{% Aside 'gotchas' %}
+`input[type="checkbox"]` is an exception.
+It is allowed to have pseudo-element children.
+{% endAside %}
+
+## `::first-letter`
+
+We met this pseudo-element at the start of the lesson.
+It is worth being aware that not all CSS properties can be used when targeting
+[`::first-letter`](https://developer.mozilla.org/docs/Web/CSS/::first-letter).
+The available properties are:
+
+- `color`
+- `background` properties (such as `background-image`)
+- `border` properties (such as `border-color`)
+- `float`
+- `font` properties (such as `font-size` and `font-weight`)
+- text properties (such as `text-decoration` and `word-spacing`)
+
+```css
+p::first-letter {
+  color: goldenrod;
+  font-weight: bold;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEJmOx'
+} %}
+</figure>
+
+{% Aside %}
+You can only use `:first-letter` on block containers.
+Therefore, it won't work if you try to add it to an element that has `display: inline`.
+{% endAside %}
+
+## `::first-line`
+
+The [`::first-line`](https://developer.mozilla.org/docs/Web/CSS/::first-line)
+pseudo-element will let you style the first line of text
+only if the element with `::first-line` applied has a `display` value of `block`,
+`inline-block`, `list-item`, `table-caption` or `table-cell`.
+
+```css
+p::first-line {
+  color: goldenrod;
+  font-weight: bold;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgZVaO'
+} %}
+</figure>
+
+Like the `::first-letter` pseudo-element,
+there's only a subset of CSS properties you can use:
+
+- `color`
+- `background` properties
+- `font` properties
+- `text` properties
+
+## `::backdrop`
+
+If you have an element that is presented in full screen mode,
+such as a `<dialog>` or a `<video>`,
+you can style the backdrop—the space between the element and the rest of the page—with the
+[`::backdrop`](https://developer.mozilla.org/docs/Web/CSS/::backdrop) pseudo-element:
+
+
+```css
+video::backdrop {
+  background-color: goldenrod;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjwqRQ'
+} %}
+</figure>
+
+The `::backdrop` pseudo-element is supported in all major browsers apart from Safari.
+
+## `::marker`
+
+The [`::marker`](https://developer.mozilla.org/docs/Web/CSS/::marker)
+pseudo-element lets you style the bullet or number for a list item or the arrow of a `<summary>` element.
+
+```css
+::marker {
+  color: hotpink;
+}
+
+ul ::marker {
+  font-size: 1.5em;
+}
+
+ol ::marker {
+  font-size: 1.1em;
+}
+
+summary::marker {
+  content: '\002B'' '; /* Plus symbol with space */
+}
+
+details[open] summary::marker {
+  content: '\2212'' '; /* Minus symbol with space */
+}
+```
+
+Only a small subset of CSS properties are supported for `::marker`:
+
+- `color`
+- `content`
+- `white-space`
+- `font` properties
+- `animation` and `transition` properties
+
+You can change the marker symbol, using the `content` property. You can use this to set a plus and minus symbol for the closed and empty states of a `<summary>` element, for example.
+
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJozrR'
+} %}
+</figure>
+
+## `::selection`
+
+The [`::selection`](https://developer.mozilla.org/docs/Web/CSS/::selection)
+pseudo-element allows you to style how selected text looks.
+
+```css
+::selection {
+  background: green;
+  color: white;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEJeZK'
+} %}
+</figure>
+
+This pseudo-element can be used to style all selected text as in the above demo.
+It can also be used in combination with other selectors for a more specific selection style.
+
+```css
+p:nth-of-type(2)::selection {
+  background: darkblue;
+  color: yellow;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWJozXM'
+} %}
+</figure>
+
+As with other pseudo-elements, only a subset of CSS properties are allowed:
+
+- `color`
+- `background-color` but **not** `background-image`
+- `text` properties
+
+## `::placeholder`
+{% BrowserCompat 'css.selectors.placeholder' %}
+
+You can add a helper hint to form elements,
+such as `<input>` with a `placeholder` attribute.
+The [`::placeholder`](https://developer.mozilla.org/docs/Web/CSS/::placeholder)
+pseudo-element allows you to style that text.
+
+```css
+input::placeholder {
+  color: darkcyan;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKaqrrY'
+} %}
+</figure>
+
+The `::placeholder` only supports a subset of CSS rules:
+
+- `color`
+- `background` properties
+- `font` properties
+- `text` properties
+
+{% Aside %}
+A `placeholder` is not `<label>`
+and should not be used in place of a `<label>`.
+Form elements must be labelled or they will be inaccessible.
+{% endAside %}
+
+## `::cue`
+{% BrowserCompat 'css.selectors.cue' %}
+
+Last in this tour of pseudo-elements is the
+[`::cue`](https://developer.mozilla.org/docs/Web/CSS/::cue) pseudo-element.
+This allows you to style the WebVTT cues,
+which are the captions of a `<video>` element.
+
+You can also pass a selector into a `::cue`,
+which allows you to style specific elements _inside_ a caption.
+
+```css
+video::cue {
+  color: yellow;
+}
+
+video::cue(b) {
+  color: red;
+}
+
+video::cue(i) {
+  color: lightpink;
+}
+```
+
+{% Assessment 'pseudo-elements' %}
diff --git a/src/site/content/en/learn/css/pseudo-elements/pseudo-elements.assess.yml b/src/site/content/en/learn/css/pseudo-elements/pseudo-elements.assess.yml
new file mode 100644
index 00000000000..0ad7f3a1d89
--- /dev/null
+++ b/src/site/content/en/learn/css/pseudo-elements/pseudo-elements.assess.yml
@@ -0,0 +1,33 @@
+setLeader: Test your knowledge of pseudo-elements
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,4,5"
+    stem: Which of the following are not pseudo-elements?
+    options:
+      - content: "`::before`"
+        rationale: "Don't forget to add `content: '';`."
+      - content: "`::first-paragraph`"
+        rationale: "This doesn't exist in CSS."
+      - content: "`::after`"
+        rationale: "Don't forget to add `content: '';`."
+      - content: "`::marker`"
+        rationale: "This is the bullet element when you use a list element or
+        display type."
+      - content: "`::pencil`"
+        rationale: "This doesn't exist in CSS."
+      - content: "`:active`"
+        rationale: "This is a pseudo-class not a pseudo-element."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-elements can be found in an HTML file.
+    options:
+      - content: "True"
+        rationale: "While DevTools may show pseudo-elements in the Elements
+        panel, pseudo-elements won't be found in the HTML, they're owned by the
+        browser."
+      - content: "False"
+        rationale: "They can be targeted by CSS but won't be found in the HTML."
diff --git a/src/site/content/en/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/en/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/en/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/en/learn/css/selectors/index.md b/src/site/content/en/learn/css/selectors/index.md
new file mode 100644
index 00000000000..bc458f3af90
--- /dev/null
+++ b/src/site/content/en/learn/css/selectors/index.md
@@ -0,0 +1,513 @@
+---
+title: Selectors
+description: >
+  To apply CSS to an element you need to select it.
+  CSS provides you with a number of different ways to do this,
+  and you can explore them in this module.
+audio:
+  title: 'The CSS Podcast - 002: Selectors'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+If you've got some text that you only want to be larger and red if it's the first paragraph of an article,
+how do you do that?
+
+```html
+<article>
+  <p>I want to be red and larger than the other text.</p>
+  <p>I want to be normal sized and the default color.</p>
+</article>
+```
+
+You use a CSS selector to find that specific element and apply a CSS rule, like this.
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+CSS provides you with a lot of options to select elements and apply rules to them,
+ranging from very simple to very complex,
+to help solve situations like this.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWprGYz',
+  height: 250
+} %}
+</figure>
+
+## The parts of a CSS rule
+
+To understand how selectors work and their role in CSS,
+it's important to know the parts of a CSS rule.
+A CSS rule is a block of code,
+containing one or more selectors and one or more declarations.
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="An image of a CSS rule with the selector .my-css-rule.", width="800", height="427" %}
+</figure>
+
+In this CSS rule, the **selector** is `.my-css-rule`
+which finds all elements with a class of `my-css-rule` on the page.
+There are three declarations within the curly brackets.
+A declaration is a property and value pair which applies styles to the elements matched by the selectors.
+A CSS rule can have as many declarations and selectors as you like.
+
+## Simple selectors
+
+The most straightforward group of selectors target HTML elements plus
+classes, IDs, and other attributes which may be added to an HTML tag.
+
+### Universal selector
+{% BrowserCompat 'css.selectors.universal' %}
+
+A [universal selector](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors)—also known as a wildcard—matches any element.
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+This rule causes every HTML element on the page to have hotpink text.
+
+### Type selector
+{% BrowserCompat 'css.selectors.type' %}
+
+A [type selector](https://developer.mozilla.org/docs/Web/CSS/Type_selectors)
+matches a HTML element directly.
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+This rule causes every `<section>` element to have `2em` of `padding` on all sides.
+
+### Class selector
+{% BrowserCompat 'css.selectors.class' %}
+
+A HTML element can have one or more items defined in their `class` attribute.
+The
+[class selector](https://developer.mozilla.org/docs/Web/CSS/Class_selectors)
+matches any element that has that class applied to it.
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+Any element that has the class applied to it will get colored red:
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+Notice how the `.` is only present in CSS and **not** the HTML.
+This is because the `.` character instructs the CSS language to match class attribute members.
+This is a common pattern in CSS, where a special character,
+or set of characters, is used to define selector types.
+
+A HTML element that has a class of `.my-class` will still be matched to the above CSS rule,
+even if they have several other classes, like this:
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+This is because CSS looks for a `class` attribute that _contains_ the defined class,
+rather than matching that class exactly.
+
+{% Aside %}
+The value of a class attribute can be almost anything you want it to be.
+One thing that could trip you up, is that you can't start a class (or an ID) with a number,
+such as `.1element`.
+You can read more [in the specification](https://www.w3.org/TR/CSS21/syndata.html#characters).
+{% endAside %}
+
+### ID selector
+{% BrowserCompat 'css.selectors.id' %}
+
+An HTML element with an `id` attribute should be the only element on a page with that ID value.
+You select elements with an
+[ID selector](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) like this:
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+This CSS would apply a blue border to the HTML element that has an `id` of `rad`, like this:
+
+```html
+<div id="rad"></div>
+```
+
+Similarly to the class selector `.`,
+use a `#` character to instruct CSS to look for an element that matches the `id` that follows it.
+
+{% Aside %}
+If the browser encounters more than one instance of an `id`
+it will still apply any CSS rules that match its selector.
+However, any element that has an `id` attribute is supposed to have a unique value for it,
+so unless you're writing very specific CSS for a single element,
+avoid applying styles with the `id` selector as it means you can't re-use those styles elsewhere.
+{% endAside %}
+
+### Attribute selector
+{% BrowserCompat 'css.selectors.attribute' %}
+
+You can look for elements that have a certain HTML attribute,
+or have a certain value for an HTML attribute,
+using the [attribute selector](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors).
+Instruct CSS to look for attributes by wrapping the selector with square brackets (`[ ]`).
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+This CSS looks for all elements that have an attribute of `data-type` with a value of `primary`, like this:
+
+```html
+<div data-type="primary"></div>
+```
+
+Instead of looking for a specific value of `data-type`,
+you can also look for elements with the attribute present, regardless of its value.
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+Both of these `<div>` elements will have red text.
+
+You can use case-sensitive attribute selectors
+by adding an `s` operator to your attribute selector.
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+This means that if a HTML element had a `data-type` of `Primary`,
+instead of `primary`, it would not get red text.
+You can do the opposite—case insensitivity—by using an `i` operator.
+
+Along with case operators,
+you have access to operators that match portions of strings inside attribute values.
+
+```css
+/* A href that contains "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* A href that starts with https */
+[href^='https'] {
+  color: green;
+}
+
+/* A href that ends with .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'BapBbOy'
+  } %}
+  <figcaption>In this demo, the `$` operator in our attribute selector gets the filetype from the `href` attribute.
+  This makes it possible to prefix the label—based on that filetype—using a pseudo-element.</figcaption>
+</figure>
+
+### Grouping selectors
+
+A selector doesn't have to match only a single element.
+You can group multiple selectors by separating them with commas:
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+This example extends the color change to both `<strong>` elements and `<em>` elements.
+It's also extended to a class named `.my-class`, and an element that has a `lang` attribute.
+
+{% Assessment 'simple-selectors' %}
+
+## Pseudo-classes and pseudo-elements
+
+CSS provides useful selector types that focus on specific platform state,
+like when an element is hovered, structures _inside_ an element, or parts of an element.
+
+### Pseudo-classes
+
+HTML elements find themselves in various states,
+either because they are interacted with,
+or one of their child elements is in a certain state.
+
+For example, an HTML element could be hovered with the mouse pointer by a user
+_or_ a child element could also be hovered by the user.
+For those situations, use the `:hover` pseudo-class.
+
+```css
+/* Our link is hovered */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Sets all even paragraphs to have a different background */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+Find out more in the [pseudo-classes module](/learn/css/pseudo-classes).
+
+### Pseudo-element
+
+Pseudo-elements differ from pseudo-classes because instead of responding to the platform state,
+they act as if they are inserting a new element with CSS.
+Pseudo-elements are also syntactically different from pseudo-classes,
+because instead of using a single colon (`:`), we use a double colon (`::`).
+
+{% Aside %}
+A double colon (`::`) is what distinguishes a pseudo-element from a pseudo-class,
+but because this distinction wasn't present in older versions of CSS specs,
+browsers support a single colon for the original pseudo-elements,
+such as `:before` and `:after` to help with backwards compatibility with older browsers, like IE8.
+{% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+As in the above demo where you prefixed a link's label with the type of file it was,
+you can use the `::before` pseudo-element to insert content **at the start of an element**,
+or the `::after` pseudo-element to insert content at the **end of an element**.
+
+Pseudo-elements aren't limited to inserting content, though.
+You can also use them to target specific parts of an element.
+For example, suppose you have a list.
+Use `::marker` to style each bullet point (or number) in the list
+
+```css
+/* Your list will now either have red dots, or red numbers */
+li::marker {
+  color: red;
+}
+```
+
+You can also use `::selection` to style the content that has been highlighted by a user.
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+Learn more in the [module on pseudo-elements](/learn/css/pseudo-elements).
+
+{% Assessment 'pseudo-selectors' %}
+
+## Complex selectors
+
+You have already seen a vast array of selectors,
+but sometimes, you will need more _fine-grained control_ with your CSS.
+This is where complex selectors step in to help.
+
+It's worth remembering at this point that although the following selectors give us more power,
+we can only **cascade downwards**, selecting child elements.
+We are not able to target upwards and select a parent element.
+We cover what the cascade is and how it works
+[in a later lesson](/learn/css/the-cascade).
+
+### Combinators
+
+A combinator is what sits between two selectors.
+For example, if the selector was `p > strong`, the combinator is the `>` character.
+The selectors which use these combinators help you select items based on their position in the document.
+
+#### Descendant combinator
+
+To understand descendant combinators,
+you need to first understand parent and child elements.
+
+```html
+<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
+```
+
+The parent element is the `<p>` which contains text.
+Inside that `<p>` element is a `<strong>` element, making its content bold.
+Because it is inside the `<p>`, it is a child element.
+
+A descendant combinator allows us to target a child element.
+This uses a space (` `) to instruct the browser to look for child elements:
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+This snippet selects all `<strong>` elements
+that are child elements of `<p>` elements only, making them blue recursively.
+
+<figure>
+  {% Codepen {
+    user: 'web-dot-dev',
+    id: 'BapBbGN'
+  } %}
+  <figcaption>Because the descendant combinator is recursive,
+the padding added to each child element applies, resulting in a staggered effect.</figcaption>
+</figure>
+
+This effect is better visualised in the above example,
+using the combinator selector, `.top div`.
+That CSS rule adds left padding to those `<div>` elements.
+Because the combinator is recursive,
+all `<div>` elements that are in `.top` will have that same padding applied to them.
+
+Take a look at the HTML panel in this demo
+to see how the `.top` element has several `<div>` child elements which themselves,
+have `<div>` child elements.
+
+#### Next sibling combinator
+
+You can look for an element that immediately follows another element
+by using a `+` character in your selector.
+
+<figure>
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'JjEPzwB'
+} %}
+</figure>
+
+To add space between stacked elements,
+use the next sibling combinator to add space
+_only_ if an element is a **next sibling** of a child element of `.top`.
+
+You could add margin to all child elements of `.top`,
+using the following selector:
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+The problem with this is that because you're selecting every child element of `.top`,
+this rule potentially creates extra, unnecessary space.
+The **next sibling combinator**,
+mixed with a **universal selector** enables you to not only control what elements get space,
+but also apply space to **any element**.
+This provides you with some long-term flexibility,
+regardless of what HTML elements appear in `.top`.
+
+#### Subsequent- sibling combinator
+
+A subsequent combinator is very similar to a next sibling selector.
+Instead of a `+` character however,
+use a `~` character.
+How this differs is that an element just has to follow another element with the same parent,
+rather than being the next element with the same parent.
+
+<figure>
+  {% Codepen {
+    user: 'web-dot-dev',
+    id: 'ZELzPPX',
+    height: 400
+  } %}
+  <figcaption>Use a subsequent selector along with a `:checked` pseudo class to create a pure CSS switch element.</figcaption>
+</figure>
+
+This subsequent combinator provides a little less rigidity,
+which is useful in contexts like the above sample,
+where we change the color of a custom switch when its associated checkbox has the `:checked` state.
+
+#### Child combinator
+
+A child combinator (also known as direct descendant)
+allows you more control over the recursion that comes with combinator selectors.
+By using the `>` character, you limit the combinator selector to apply **only** to direct children.
+
+Consider the previous, next sibling selector example.
+The space is added to each **next sibling**,
+but if one of those elements also has **next sibling elements** as children,
+it can result in undesirable, extra spacing.
+
+<figure>
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'ExZYMJL'
+} %}
+</figure>
+
+To alleviate this problem,
+change the **next sibling selector** to incorporate a child combinator: `> * + *`.
+The rule will now **only** apply to direct children of `.top`.
+
+<figure>
+{% Codepen {
+    user: 'web-dot-dev',
+    id: 'dyNbrEr'
+} %}
+</figure>
+
+### Compound selectors
+
+You can combine selectors to increase specificity and readability.
+For example, to target `<a>` elements,
+that also have a class of `.my-class`, write the following:
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+This wouldn't apply a red color to all links
+and it would also only apply the red color to `.my-class` **if** it was on an `<a>` element.
+For more on this, see the [specificity module](/learn/css/specificity).
+
+{% Assessment 'complex-selectors' %}
+
+## Resources
+
+- [CSS selectors reference](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [Interactive selectors game](https://flukeout.github.io/)
+- [Pseudo-class and pseudo-elements reference](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [A tool that translates CSS selectors into plain-english explainers](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/en/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/en/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/en/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/en/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/en/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/en/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/en/learn/css/shadows/index.md b/src/site/content/en/learn/css/shadows/index.md
new file mode 100644
index 00000000000..b7675117847
--- /dev/null
+++ b/src/site/content/en/learn/css/shadows/index.md
@@ -0,0 +1,282 @@
+---
+title: Shadows
+description: >
+  There are a number of ways to add shadows to text and elements in CSS.
+  In this module you'll learn how to use each option,
+  and the tasks they were designed for.
+audio:
+  title: 'The CSS Podcast - 017: Shadows'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_017_v2.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-03
+---
+
+Say you've been sent a design to build and in that design there's a picture of a t-shirt,
+cut out, with a drop shadow.
+The designer tells you that the product image is dynamic
+and can be updated via the content management system,
+so the drop shadow needs to be dynamic too. Instead of a t-shirt,
+the image could be a visor or shorts, or any other item.
+How do you do that with CSS?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'wvgrMrR',
+  height: 600
+} %}
+</figure>
+
+CSS has the
+[`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) and
+[`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) properties,
+but the picture isn't text, so you can't use `text-shadow`.
+If you use `box-shadow`, the shadow is on the surrounding box,
+_not_ around the t-shirt.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNrwae',
+  height: 600
+} %}
+</figure>
+
+Luckily, there is another option: the
+[`drop-shadow()`](https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow()) filter.
+This enables you to do exactly what the designer asked for.
+There are plenty of options when it comes to shadows in CSS,
+each designed for a different use case.
+
+## Box shadow
+{% BrowserCompat 'css.properties.box-shadow' %}
+
+The `box-shadow` property is for adding shadows to the box of an HTML element.
+It works on block elements and inline elements.
+
+```css
+.my-element {
+	box-shadow: 5px 5px 20px 5px #000;
+}
+```
+
+The order of values for `box-shadow` are as follows:
+
+1. **Horizontal offset**:
+a positive number pushes it out from the left and a negative number will push it out from the right.
+1. **Vertical offset**:
+a positive number pushes it down from the top,
+and a negative number will push it up from the bottom.
+1. **Blur radius**:
+a larger number produces a more blurred shadow,
+whereas a small number produces a sharper shadow.
+1. **Spread radius** (optional):
+a larger number increases the size of the shadow and a smaller number decreases it,
+making it the same size as the **blur radius** if it's set to 0.
+1. **Color**:
+[Any valid color value](/learn/css/color).
+If this isn't defined, the computed text color will be used.
+
+To make a box shadow an inner shadow,
+rather than the default outer shadow,
+add an `inset` keyword **before** the other properties.
+
+```css
+/* Outer shadow */
+.my-element {
+	box-shadow: 5px 5px 20px 5px #000;
+}
+
+/* Inner shadow */
+.my-element {
+	box-shadow: inset 5px 5px 20px 5px #000;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'rNjGevp',
+  height: 600
+} %}
+</figure>
+
+### Multiple shadows
+
+You can add as many shadows as you like with `box-shadow`.
+Add a comma separated collection of value sets to achieve this:
+
+```css
+.my-element {
+  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
+    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
+}
+
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpLNXR',
+  tab: 'css,result'
+} %}
+</figure>
+
+### Properties affecting box-shadow
+
+Adding a `border-radius` to your box will also affect the shape of the box shadow.
+This is because CSS is creating a shadow based on the shape of the box
+as if light is pointing at it.
+
+```css
+.my-element {
+  box-shadow: 0px 0px 20px 5px darkslateblue;
+  border-radius: 25px;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwKLaXN',
+  tab: 'css,result'
+} %}
+</figure>
+
+If your box with `box-shadow` is in a container that has `overflow: hidden`,
+the shadow **won't** break out of that overflow either.
+
+```html
+<div class="my-parent">
+  <div class="my-shadow">My shadow is hidden by my parent.</div>
+</div>
+```
+
+```css
+.my-parent,
+.my-shadow {
+  width: 250px;
+  height: 250px;
+}
+
+.my-shadow {
+  box-shadow: 0px 0px 20px 5px darkslateblue;
+}
+
+.my-parent {
+  overflow: hidden;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BapwzyQ',
+  tab: 'css,result'
+} %}
+</figure>
+
+## Text shadow
+{% BrowserCompat 'css.properties.text-shadow' %}
+
+The `text-shadow` property is very similar to the `box-shadow` property.
+It only works on text nodes.
+
+```css
+.my-element {
+  text-shadow: 3px 3px 3px hotpink;
+}
+```
+
+The values for `text-shadow` are the same as `box-shadow` and in the same order.
+The only difference is that `text-shadow` has no `spread` value and no `inset` keyword.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgeKqm'
+} %}
+</figure>
+
+When you add a `box-shadow` it is clipped to the shape of your box,
+but `text-shadow` has no clipping.
+This means that if your text is fully or semi transparent,
+the shadow is visible through it.
+
+```css
+.my-element {
+  text-shadow: 3px 3px 3px gold;
+  color: rgb(0 0 0 / 70%);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYxzRpb'
+} %}
+</figure>
+
+### Multiple shadows
+
+You can add as many shadows as you like with `text-shadow`,
+just as with `box-shadow`.
+Add a comma separated collection of value sets,
+and you can create some really cool text effects, such as 3D text.
+
+```css
+.my-element {
+  text-shadow: 1px 1px 0px white,
+    2px 2px 0px firebrick;
+  color: darkslategray;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwKLGaL',
+  tab: 'css,result'
+} %}
+</figure>
+
+## Drop shadow
+{% BrowserCompat 'css.properties.drop-shadow' %}
+
+To achieve a drop shadow that follows any potential curves of an image,
+use the CSS `drop-shadow` filter.
+This shadow is applied to an alpha mask which makes it very useful for adding a shadow to a cutout image,
+as in the case in the intro of this module.
+
+```css
+.my-image {
+  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgGdvm'
+} %}
+</figure>
+
+{% Aside 'key-term' %}
+We cover CSS [filters](/learn/css/filters) in another module,
+but in short, filters allow you to apply multiple graphical effects to the pixels of an element.
+{% endAside %}
+
+The `drop-shadow` filter has the same values as `box-shadow` **but** the `inset` keyword and `spread` value are not allowed. You can add as many shadows as you like,
+by adding multiple instances of `drop-shadow` values to the `filter` property.
+Each shadow will use the last shadow as a positioning reference point.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYgeXmW'
+} %}
+</figure>
+
+{% Assessment 'shadows' %}
diff --git a/src/site/content/en/learn/css/shadows/shadows.assess.yml b/src/site/content/en/learn/css/shadows/shadows.assess.yml
new file mode 100644
index 00000000000..3c4e5f266a0
--- /dev/null
+++ b/src/site/content/en/learn/css/shadows/shadows.assess.yml
@@ -0,0 +1,30 @@
+setLeader: Test your knowledge of shadows
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: "Which shadow value below is unique to `box-shadow`?"
+    options:
+      - content: "Horizontal offset"
+        rationale: "Try again!"
+      - content: "Vertical offset"
+        rationale: "Try again!"
+      - content: "Blur radius"
+        rationale: "Try again!"
+      - content: "Spread radius"
+        rationale: "🎉"
+      - content: "Color"
+        rationale: "Try again!"
+      - content: "`inset`"
+        rationale: "Try again! `inset` is a **keyword** which is also unique to `box-shadow`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Only 13 box shadows allowed on an element at once.
+    options:
+      - content: "True"
+        rationale: "There's no official limit."
+      - content: "False"
+        rationale: "Add as many multiple box shadows as you need."
diff --git a/src/site/content/en/learn/css/sizing/index.md b/src/site/content/en/learn/css/sizing/index.md
new file mode 100644
index 00000000000..fe862d61431
--- /dev/null
+++ b/src/site/content/en/learn/css/sizing/index.md
@@ -0,0 +1,470 @@
+---
+title: Sizing Units
+description: >
+  In this module find out how to size elements using CSS,
+  working with the flexible medium of the web.
+audio:
+  title: 'The CSS Podcast - 008: Sizing Units'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_008_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-13
+tags:
+  - css
+---
+
+The web is a responsive medium,
+but sometimes you want to control its dimensions to improve the overall interface quality.
+A good example of this is limiting line lengths to improve readability.
+How would you do that in a flexible medium like the web?
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgEGxj',
+  tab: 'css,result'
+} %}
+</figure>
+
+For this case,
+you can use a `ch` unit, which is equal to the width of a "0" character in the rendered font at its computed size.
+This unit allows you to limit the width of text with a unit that's designed to size text,
+which in turn,
+allows predictable control regardless of the size of that text.
+The `ch` unit is one of a handful of units that are helpful for specific contexts like this example.
+
+## Numbers
+
+Numbers are used to define `opacity`, `line-height` and even for color channel values in `rgb`.
+Numbers are unitless integers (1, 2, 3, 100) and decimals (.1, .2, .3).
+
+Numbers have meaning depending on their context.
+For example, when defining `line-height`,
+a number is representative of a ratio if you define it without a supporting unit:
+
+```css
+p {
+  font-size: 24px;
+  line-height: 1.5;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLgYZRK',
+  tab: 'css,result'
+} %}
+</figure>
+
+In this example, `1.5` is equal to **150%** of the `p` element's **computed pixel font size**.
+This means that if the `p` has a `font-size` of `24px`,
+the line height will be computed as `36px`.
+
+{% Aside %}
+It's a good idea to use a unitless value for `line-height`,
+rather than specifying a unit.
+As you learned in the [inheritance module](/learn/css/inheritance),
+`font-size` can be inherited.
+Defining a unitless `line-height` keeps the line-height relative to the font size.
+This provides a better experience than, say, `line-height: 15px`,
+which will not change and might look strange with certain font sizes.
+{% endAside %}
+
+Numbers can also be used in the following places:
+
+- When setting values for filters: `filter: sepia(0.5)` applies a `50%` sepia filter to the element.
+- When setting opacity: `opacity: 0.5` applies a `50%` opacity.
+- In color channels: `rgb(50, 50, 50)`,
+  where the values 0-255 are acceptable to set a color value.
+  [See color lesson](/learn/css/color).
+- To transform an element: `transform: scale(1.2)` scales the element by 120% of its initial size.
+
+## Percentages
+
+When using a percentage in CSS you need to know how the percentage is calculated.
+For example,`width` is calculated as a percentage of the available width in the parent element.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  width: 50%; 
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ZELbwwj',
+  tab: 'css,result'
+} %}
+</figure>
+
+In the above example, the width of `div p` is `150px`, assuming that the layout uses the default `box-sizing: content-box`.
+
+If you set `margin` or `padding` as a percentage,
+they will be a portion of the **parent element's width**,
+regardless of direction.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  margin-top: 50%; /* calculated: 150px */
+  padding-left: 50%; /* calculated: 150px */
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNRQPqX',
+  tab: 'css,result'
+} %}
+</figure>
+
+In the above snippet, both the `margin-top` and `padding-left` will compute to `150px`.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  width: 50%; /* calculated: 150px */
+  transform: translateX(10%); /* calculated: 15px */
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgwBxv',
+  tab: 'css,result'
+} %}
+</figure>
+
+If you set a `transform` value as a percentage,
+it is based on the element with the transform set.
+In this example, the `p` has a `translateX` value of `10%` and a `width` of `50%`.
+First, calculate what the width will be: `150px` because it is **50% of its parent's width**.
+Then, take `10%` of `150px`, which is `15px`.
+
+{% Aside 'key-term' %}
+The transform property allows you alter an element's appearance and position by rotating, skewing, scaling and translating it.
+This can be done in a 2D and 3D space.
+{% endAside %}
+
+## Dimensions and lengths
+
+If you attach a unit to a number, it becomes a dimension.
+For example, `1rem` is a dimension.
+In this context, the unit that is attached to a number is referred to in specifications as a dimension token.
+Lengths are **dimensions that refer to distance** and they can either be absolute or relative.
+
+### Absolute lengths
+
+All absolute lengths resolve against the same base,
+making them predictable wherever they're used in your CSS.
+For example, if you use `cm` to size your element and then print,
+it should be accurate if you compared it to a ruler.
+
+```css
+div {
+  width: 10cm;
+  height: 5cm;
+  background: black;
+}
+```
+
+If you printed this page, the `div` would print as a 10x5cm black rectangle.
+Keep in mind, CSS is used not only for digital content, but also to style print content.
+Absolute lengths can really come in handy when designing for print.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Unit</th>
+        <th>Name</th>
+        <th>Equivalent to</th>
+      </tr>
+    </thead>
+  <tbody>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#cm">cm</a></td>
+      <td>Centimeters</td>
+      <td>1cm = 96px/2.54</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#mm">mm</a></td>
+      <td>Millimeters</td>
+      <td>1mm = 1/10th of 1cm</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#q">Q</a></td>
+      <td>Quarter-millimeters</td>
+      <td>1Q = 1/40th of 1cm</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#in">in</a></td>
+      <td>Inches</td>
+      <td>1in = 2.54cm = 96px</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#pc">pc</a></td>
+      <td>Picas</td>
+      <td>1pc = 1/6th of 1in</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#pt">pt</a></td>
+      <td>Points</td>
+      <td>1pt = 1/72th of 1in</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#px">px</a></td>
+      <td>Pixels</td>
+      <td>1px = 1/96th of 1in</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+### Relative lengths
+
+A relative length is calculated against a base value, much like a percentage.
+The difference between these and percentages is that you can contextually size elements.
+This means that CSS has units such as `ch` that use the text size as a basis,
+and `vw` which is based on the width of the viewport (your browser window).
+Relative lengths are particularly useful on the web due to its responsive nature.
+
+#### Font-size-relative units
+
+CSS provides helpful units that are relative to the size of elements of rendered typography,
+such as the size of the text itself (`em` units) or width of the typefaces characters (`ch` units).
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>unit</th>
+        <th>relative to:</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#em">em</a></td>
+        <td>Relative to the font size,
+        i.e. 1.5em will be 50% larger than the base computed font size of its parent.
+        (Historically, the height of the capital letter "M").</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ex">ex</a></td>
+        <td>Heuristic to determine whether to use the x-height,
+        a letter "x", or `.5em` in the current computed font size of the element.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#cap">cap</a></td>
+        <td>Height of the capital letters in the current computed font size of the element.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ch">ch</a></td>
+        <td>Average <a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">character advance</a>
+        of a narrow glyph in the element's font
+        (represented by the "0" glyph).</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ic">ic</a></td>
+        <td>Average
+        <a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">character advance</a>
+        of a full width glyph in the element's font,
+        as represented by the "水" (CJK water ideograph, U+6C34) glyph.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#rem">rem</a></td>
+        <td>Font size of the root element (default is 16px).</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#lh">lh</a></td>
+        <td>Line height of the element.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#rlh">rlh</a></td>
+        <td>Line height of the root element.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ttaikDgwEC572lrGgWlG.svg", alt="The text, CSS is 10x great with labels for ascender height, descender height and x-height. The x-height represents 1ex and the 0 represents 1ch", width="800", height="203" %}
+</figure>
+
+#### Viewport-relative units
+
+You can use the dimensions of the viewport (browser window) as a relative basis.
+These units portion up the available viewport space.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>unit</th>
+        <th>relative to</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vw">vw</a></td>
+        <td>1% of viewport's width. People use this unit to do cool font tricks,
+        like resizing a header font based on the width of the page so as the user resizes,
+        the font will also resize.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vh">vh</a></td>
+        <td>1% of viewport's height.
+        You can use this to arrange items in a UI,
+        if you have a footer toolbar for example.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vi">vi</a></td>
+        <td>1% of viewport's size in the root element's <a href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis">inline axis</a>.
+        Axis refers to writing modes.
+        In horizontal writing modes like English,
+        the inline axis is horizontal.
+        In vertical writing modes like some Japanese typefaces, the inline axis runs top to bottom.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vb">vb</a></td>
+        <td>1% of viewport's size in the root element's <a href="https://www.w3.org/TR/css-writing-modes-4/#block-axis">block axis</a>.
+        For the block axis, this would be the directionality of the language.
+        LTR languages like English would have a vertical block axis,
+        since English language readers parse the page from top to bottom.
+        A vertical writing mode has a horizontal block axis.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vmin">vmin</a></td>
+        <td>1% of the viewport's smaller dimension.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vmax">vmax</a></td>
+        <td>1% of the viewport's larger dimension.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+```css
+div {
+  width: 10vw;
+}
+
+p {
+  max-width: 60ch;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEYqXa'
+} %}
+</figure>
+
+In this example, the `div` will be 10% of the viewport's width because `1vw` is **1% of the viewport width**.
+The `p` element has a `max-width` of `60ch`
+which means it can't exceed the width of 60 "0" characters in the calculated font and size.
+
+{% Aside 'objective' %}
+
+By sizing text with relative units like `em` or `rem`,
+rather than an absolute unit, like `px`, the size of your text can respond to user preferences.
+This can include the system font size or parent element's font size, such as the `<body>`.
+The base size of the `em` is the element's parent and the base size of the `rem` is the base font size of the document.
+
+If you don't define a `font-size` on your `html` element,
+this user-preferred system font size will be honoured if you use relative lengths,
+such as `em` and `rem`.
+If you use `px` units for sizing text,
+this preference will be ignored.
+
+{% Video
+  src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/cUEl77VN4ZtAdElV4fd6.mp4",
+  autoplay=true,
+  controls=true,
+  muted=true
+%}
+
+{% endAside %}
+
+## Miscellaneous units
+
+There are some other units which have been specified to deal with particular types of values.
+
+### Angle units
+
+In the [color module](/learn/css/color/),
+we looked at **angle units**,
+which are helpful for defining degree values,
+such as the hue in `hsl`.
+They are also useful for rotating elements within transform functions.
+
+```css
+div {
+  width: 150px;
+  height: 150px;
+  transform: rotate(60deg);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPvRbK',
+  tab: 'css,result'
+} %}
+</figure>
+
+Using the `deg` angle unit, you can rotate a `div` 90° on its center axis.
+
+```css
+div {
+  background-image: url('a-low-resolution-image.jpg');
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  div {
+    background-image: url('a-high-resolution-image.jpg');
+  }
+}
+```
+
+{% Aside %}
+Other angle units include `rad` (radians), `grad` (gradians), and `turn` units,
+which represent a part of an angle, where `1turn` = `360deg`, and `0.5turn` = `180deg`.
+{% endAside %}
+
+#### Resolution units
+
+In the previous example the value of `min-resolution` is `192dpi`.
+The `dpi` unit stands for **dots per inch**.
+A useful context for this is detecting very high resolution screens,
+such as Retina displays in a media query and serving up a higher resolution image.
+
+{% Assessment 'sizing' %}
+
+## Resources
+
+- [CSS Spec Values and Units Level 4](https://www.w3.org/TR/css-values-4)
+- [Sizing and Units on MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [All About Ems](https://learn.scannerlicker.net/2014/07/31/so-how-much-is-an-em/)
+- [A percentages explainer](https://wattenberger.com/blog/css-percents)
diff --git a/src/site/content/en/learn/css/sizing/sizing.assess.yml b/src/site/content/en/learn/css/sizing/sizing.assess.yml
new file mode 100644
index 00000000000..090fd8e128a
--- /dev/null
+++ b/src/site/content/en/learn/css/sizing/sizing.assess.yml
@@ -0,0 +1,51 @@
+setLeader: Test your knowledge of sizing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,4,5,7,8"
+    stem: Which of the following are valid dimensions?
+    options:
+      - content: cm
+        rationale: "Centimeters, a valid absolute dimension."
+      - content: ui
+        rationale: "User interface is not a dimension in CSS."
+      - content: in
+        rationale: "Inches, a valid absolute dimension."
+      - content: 8th
+        rationale: "Not a CSS dimension"
+      - content: px
+        rationale: "Pixels, a valid absolute dimension."
+      - content: ch
+        rationale: "Character units, a valid relative dimension."
+      - content: ux
+        rationale: "User experience is not a dimension in CSS."
+      - content: em
+        rationale: "Letter 'M' units, a valid relative dimension."
+      - content: ex
+        rationale: "Letter 'x' units, a valid relative dimension."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How are absolute and relative units different?
+    options:
+      - content: "Absolute values can't change but relative units can"
+        rationale: "Absolute values can change, but the base they
+        calculate against can't."
+      - content: "An absolute length is calculated against a single shared base
+      value, where a relative unit is compared against a base value that can change."
+        rationale: "Relative units are more adaptive and fluid because of their
+        contextual awareness, but there's a power and predictability to absolute
+        units that can be foundational for certain designs."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Viewport units are absolute.
+    options:
+      - content: "True"
+        rationale: "They may feel absolute, but they're relative to a viewport,
+        which could be an iframe or webview, and isn't always representative of
+        a device screen size."
+      - content: "False"
+        rationale: "They are relative to the document window they were created
+        in, which may or may not be the same as a device screen."
diff --git a/src/site/content/en/learn/css/spacing/conclusion.assess.yml b/src/site/content/en/learn/css/spacing/conclusion.assess.yml
new file mode 100644
index 00000000000..f67bd4a8b22
--- /dev/null
+++ b/src/site/content/en/learn/css/spacing/conclusion.assess.yml
@@ -0,0 +1,56 @@
+setLeader: Test your knowledge of spacing
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: It's safe to use HTML for spacing when...
+    options:
+      - content: "It's only one."
+        rationale: "Try again!"
+      - content: "No one will notice."
+        rationale: "Try again!"
+      - content: "It's just for space."
+        rationale: "Try again!"
+      - content: "It helps with the understanding of the document."
+        rationale: "You got it!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: To create space **inside** a box, use...
+    options:
+      - content: "Margin"
+        rationale: "Margin is for pushing outside of a box."
+      - content: "HTML"
+        rationale: "These are for spacing and dividing content."
+      - content: "Gap"
+        rationale: "Gap is for spacing between boxes."
+      - content: "Padding"
+        rationale: "Padding is for creating space inside of a box."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To create space **outside** a box, use...
+    options:
+      - content: "Margin"
+        rationale: "Margin is for pushing outside of a box."
+      - content: "HTML"
+        rationale: "These are for spacing and dividing content."
+      - content: "Gap"
+        rationale: "Gap is for spacing between boxes."
+      - content: "Padding"
+        rationale: "Padding is for creating space inside of a box."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: To create space **between** boxes, use...
+    options:
+      - content: "Margin"
+        rationale: "Margin is for pushing outside of a box."
+      - content: "HTML"
+        rationale: "These are for spacing and dividing content."
+      - content: "Gap"
+        rationale: "Gap is for spacing between boxes."
+      - content: "Padding"
+        rationale: "Padding is for creating space inside of a box."
diff --git a/src/site/content/en/learn/css/spacing/index.md b/src/site/content/en/learn/css/spacing/index.md
new file mode 100644
index 00000000000..c973d18a18e
--- /dev/null
+++ b/src/site/content/en/learn/css/spacing/index.md
@@ -0,0 +1,407 @@
+---
+title: Spacing
+description: >
+  Find out how to select the best method of spacing elements,
+  taking into consideration the layout method you are using and component that you need to build.
+audio:
+  title: 'The CSS Podcast - 013: Spacing'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_013_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-27
+---
+
+Say you've got a collection of three boxes,
+stacked on top of each other and you want space between them.
+How many ways can you think of to do that in CSS?
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/jGjBqBRk3uCvXT7Tdjre.svg",
+alt="Three stacked boxes with a downward arrow",
+width="800",
+height="498" %}
+
+The `margin` property *might* give you what you need,
+but it also might add additional spacing that you don't want.
+For example, how do you target just the space *in between* each of those elements?
+Something like `gap` might be more appropriate in this case.
+There are many ways to adjust spacing within a UI,
+each with its own strengths and caveats.
+
+## HTML spacing
+
+HTML itself provides some methods to space elements.
+The `<br>` and `<hr>` elements allow you to space elements in the block direction,
+which if you are in a latin-based language,
+is top-to-bottom.
+
+If you use a `<br>` element,
+it will create a line-break,
+just like if you were to press your enter key in a word processor.
+
+The `<hr>` creates a horizontal line with space either-side, known as `margin`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyNRJQg'
+} %}
+</figure>
+
+Along with using HTML elements,
+HTML *entities* can create space.
+An HTML entity is a reserved string of characters that are replaced with character entities by the browser.
+For example,
+if you were to type `&copy;` in your HTML file,
+it would be converted into a © character.
+The `&nbsp;` entity is converted into a non-breaking space character,
+which provides an inline space.
+Be careful though,
+because the non-breaking aspect of this character stitches the two elements together,
+which can result in odd behaviour.
+
+{% Aside %}
+Use HTML elements to add space only when the element helps with the understanding of the document.
+For example, an `<hr>` doesn't just add space,
+it creates a logical separation of two chunks of content.
+If you just want a line with space around it,
+adding a border with CSS might be more appropriate.
+{% endAside %}
+
+## Margin
+
+If you want to add space to the outside of an element,
+you use the `margin` property.
+Margin is like adding a cushion around your element.
+The `margin` property is shorthand for `margin-top`,
+`margin-right`, `margin-bottom` and `margin-left`.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg",
+alt="A diagram of the four main areas of the box model.",
+width="800",
+height="547" %}
+
+The `margin` shorthand applies properties in a particular order:
+top, right, bottom and left.
+You can remember these with trouble: TRouBLe.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/F8jtvl15CsAcs8Oaid2l.svg",
+alt="The word 'Trouble' running downwards with T, R, B and L
+extending to Top, Right, Bottom and Left.
+A box with arrows showing the directions too.",
+width="800",
+height="320" %}
+
+The `margin` shorthand can also be used with one, two, or three values.
+Adding a fourth value lets you set each individual side.
+These are applied as follows:
+
+- One value will be applied to all sides. (`margin: 20px`).
+- Two values: the first value will be applied to the top and bottom sides,
+and the second value will be applied to the left and right sides.
+(`margin: 20px 40px`)
+- Three values: the first value is `top`,
+the second value is `left` **and** `right`,
+and the third value is `bottom`. (`margin: 20px 40px 30px`).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpwqyQ'
+} %}
+</figure>
+
+Margin can be defined with a length,
+percentage or auto value, such as `1em` or `20%`.
+If you use a percentage,
+the value will be calculated based on the width of your element's containing block.
+
+This means that if your element's containing block has a width of `250px`
+and your element has a `margin` value of `20%`:
+each side of your element will have a computed margin of `50px`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNQeyb'
+} %}
+</figure>
+
+You can also use a value of `auto` for margin.
+For block level elements with a restricted size,
+an `auto` margin will take up available space in the direction that it is applied to.
+A good example is this one,
+from the [flexbox module](/learn/css/flexbox), where the items push away from each other.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'poRELbR'
+} %}
+</figure>
+
+Another good example of `auto` margin is a horizontally centered wrapper which has a max width.
+This sort of wrapper is often used to create a consistent center column on a website.
+
+```css
+.wrapper {
+	max-width: 400px;
+	margin: 0 auto;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpgZKq'
+} %}
+</figure>
+
+Here, margin is removed from the top and bottom (block) sides,
+and `auto` shares the space between the left and right (inline) sides.
+
+{% Aside %}
+In the previous module on [logical properties](/learn/css/logical-properties),
+you learned that instead of specifying `margin-top`, `margin-right`, `margin-bottom` and `margin-left`,
+you can use `margin-block-start`, `margin-inline-end`, `margin-block-end` and `margin-inline-start`.
+{% endAside %}
+
+### Negative margin
+
+Negative values can also be used for margin.
+Instead of adding space between adjacent sibling elements,
+it will **reduce space** between them.
+This can result in overlapping elements,
+if you declare a negative value that's more than the available space.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNQeLP'
+} %}
+</figure>
+
+### Margin collapse
+
+Margin collapse is a tricky concept,
+but it's something you'll run into very commonly when building interfaces.
+Say you have two elements: a heading and a paragraph that both have vertical margin on them:
+
+```html
+<article>
+  <h1>My heading with teal margin</h1>
+  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
+</article>
+```
+
+```css
+h1 {
+	margin-bottom: 2rem;
+}
+
+p {
+	margin-top: 3rem;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWgvMx'
+} %}
+</figure>
+
+At first glance,
+you would be forgiven for thinking that the paragraph will be spaced `5em` from the heading,
+because `2rem` and `3rem` combined calculate to `5rem`.
+Because **vertical margin collapses**, though, the space is actually `3rem`.
+
+Margin collapse works by selecting the largest value of two adjoining elements
+with vertical margin set on the adjoining sides.
+The bottom of the `h1` meets the top of the `p`,
+so the largest value of the `h1`'s bottom margin and the `p`'s top margin is selected.
+If the `h1` were to have `3.5rem` of bottom margin,
+the space between them both would then be `3.5rem` because that is larger than `3rem`.
+Only block margins collapse, not inline (horizontal) margins.
+
+{% Aside %}
+This behavior is rooted back to when the web was mostly just documents.
+Collapsing margins help to set consistent spacing between elements
+without accidentally creating huge gaps between elements that also have margin defined.
+{% endAside %}
+
+Margin collapse also helps with empty elements.
+If you have a paragraph that has a top and bottom margin of `20px`,
+it will only create `20px` of space: not `40px`.
+If *anything* is added to the inside of this element though,
+including `padding`, its margin will no longer collapse in itself and will be treated as any box with content.
+
+{% Assessment 'margin-collapsing' %}
+
+#### Preventing margin collapse
+
+If you make an element absolutely positioned,
+using `position: absolute`, the margin will no longer collapse.
+The margin also won't collapse if you use the `float` property, too.
+
+If you have an element with no margin between two elements with block margin,
+the margin won't collapse either,
+because the two elements with block margin are no longer adjacent siblings: they are just siblings.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNQavQ'
+} %}
+</figure>
+
+In the [layout lesson](/learn/css/layout),
+you learned that flexbox and grid containers are very similar to block containers,
+but handle their child elements very differently.
+This is the case with margin collapse, too.
+
+If we take the original example from the lesson and apply flexbox with column direction,
+the margins are combined,
+instead of collapsed.
+This can provide predictability with layout work,
+which is what flexbox and grid containers are designed for.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdgmNx'
+} %}
+</figure>
+
+Margin and margin collapse can be tricky to understand,
+but understanding how they work, in detail, is very useful,
+so [this detailed explainer](https://www.smashingmagazine.com/2019/07/margins-in-css)
+is strongly recommended.
+
+## Padding
+
+Instead of creating space on the outside of your box,
+like `margin` does,
+the `padding` property creates space on the **inside** of your box instead:
+like insulation.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/kClqXks3zC6Dio1c6f6v.png",
+alt="A box with arrows pointing inwards to show that padding lives inside a box",
+width="800",
+height="336" %}
+
+Depending on which box model you are using—which was covered back in the
+[box model lesson](/learn/css/box-model/)
+—`padding` can also affect the overall dimensions of the element too.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgRrzz'
+} %}
+</figure>
+
+The `padding` property is shorthand for `padding-top`, `padding-right`, `padding-bottom` and `padding-left`.
+Just like `margin`, `padding` has logical properties, too:
+`padding-block-start`, `padding-inline-end`, `padding-block-end` and `padding-inline-start`.
+
+## Positioning
+
+Also covered  in the [layout](/learn/css/layout/) module,
+if you set a value for `position` that is anything other than `static`,
+you can space elements with the `top`, `right`, `bottom` and `left` properties.
+There are some differences with how these directional values behave:
+
+- An element with `position: relative` will maintain its place in the document flow,
+even when you set these values.
+They will be relative to your element's position too.
+- An element with `position: absolute`
+will base the directional values from the relative parent's position.
+- An element with `position: fixed`
+will base the directional values on the viewport.
+- An element with `position: sticky`
+will only apply the directional values when it is in its docked/stuck state.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdNGZB'
+} %}
+</figure>
+
+In the [logical properties](/learn/css/logical-properties) module,
+you learn about the `inset-block` and `inset-inline` properties,
+which allow you to set directional values that honor writing mode.
+
+Both properties are shorthands combining the `start` and `end` values
+and as such accept either one value to be set for `start` and `end` or
+two individual values.
+
+## Grid and flexbox
+
+Lastly, in both grid and flexbox you can use the `gap` property to create space *between* child elements.
+The `gap` property is shorthand for `row-gap` and `column-gap`,
+it accepts one or two values, which can be lengths or percentages.
+You can also use keywords such as `unset`, `initial` and `inherit`.
+If you define only one value,
+the same `gap` will be applied to both the rows and columns,
+but if you define both values,
+the first value is `row-gap` and the second value is `column-gap`.
+
+With both flexbox and grid, you can also create space using their distribution and alignment capabilities,
+which we cover in the
+[grid module](/learn/css/grid) and
+[flexbox module](/learn/css/flexbox).
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg",
+alt="A diagram representation of a grid with gaps",
+width="800",
+height="434" %}
+
+## Creating consistent spacing
+
+It is a really good idea to choose a strategy and stick with it
+to help you create a consistent user interface that has good flow and rhythm.
+A good way to achieve this is use consistent measures for your spacing.
+
+For example, you could commit to using `20px`
+as a consistent measure for all gaps between elements—known as gutters—so
+all layouts look and feel consistent.
+You could also decide to use `1em` as the vertical spacing between flow content,
+which would achieve consistent spacing based on the element's `font-size`.
+Whatever you choose,
+you should save these values as variables (or CSS custom properties)
+to tokenize those values and make the consistency a bit easier.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/8eun6aGNHPTr4kyOrYkc.svg",
+alt="Consistent spacing between elements,
+using either 20px for a layout or 1em for flow content.",
+width="800",
+height="602" %}
+
+```css
+:root {
+  --gutter: 20px;
+  --spacing: 1em;
+}
+
+h1 {
+  margin-left: var(--gutter);
+  margin-top: var(--spacing);
+}
+
+```
+
+Using custom properties like this allows you to define them once,
+then use them throughout your CSS.
+When they are updated,
+either locally within an element or globally,
+the values will pass down through the cascade and the updated values will be reflected.
+
+{% Assessment 'conclusion' %}
diff --git a/src/site/content/en/learn/css/spacing/margin-collapsing.assess.yml b/src/site/content/en/learn/css/spacing/margin-collapsing.assess.yml
new file mode 100644
index 00000000000..5dda8a9518a
--- /dev/null
+++ b/src/site/content/en/learn/css/spacing/margin-collapsing.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of margin collapsing
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: | 
+      If two elements stacked on top of each other both have 20px of top margin
+      and 30px of bottom margin, how much space will there be between them?
+    options:
+      - content: "10px"
+        rationale: "Try again!"
+      - content: "20px"
+        rationale: "Not quite"
+      - content: "30px"
+        rationale: "CSS will take the larger of the margin spaces between
+        elements yep!"
+      - content: "40px"
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/specificity/index.md b/src/site/content/en/learn/css/specificity/index.md
new file mode 100644
index 00000000000..f31d896ef8e
--- /dev/null
+++ b/src/site/content/en/learn/css/specificity/index.md
@@ -0,0 +1,382 @@
+---
+title: Specificity
+description: >
+  This module takes a deeper look at specificity, a key part of the cascade.
+audio:
+  title: 'The CSS Podcast - 003: Specificity'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Suppose that you're working with the following HTML and CSS:
+
+```html
+<button class="branding">Hello, Specificity!</button>
+```
+
+```css
+button {
+  color: red;
+}
+
+.branding {
+  color: blue;
+}
+```
+
+There's two competing rules here.
+One will color the button red and the other will color it blue.
+Which rule gets applied to the element?
+Understanding the CSS specification's algorithm about specificity
+is the key to understanding how CSS decides between competing rules.
+
+Specificity is one of the four distinct stages of the cascade,
+which was covered in the last module, on [the cascade](/learn/css/the-cascade/).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNKMXm',
+  height: 200
+} %}
+</figure>
+
+## Specificity scoring
+
+Each selector rule gets a scoring.
+You can think of specificity as a total score and each selector type earns points towards that score.
+The selector with the highest score wins.
+
+With specificity in a real project,
+the balancing act is making sure the CSS rules you expect to apply, actually _do apply,_
+while generally keeping scores low to prevent complexity.
+The score should only be as high as we need it to be,
+rather than aiming for the highest score possible.
+In the future, some genuinely more important CSS might need to be applied.
+If you go for the highest score, you'll make that job hard.
+
+## Scoring each selector type
+
+Each selector type earns points.
+You add all of these points up to calculate a selector's overall specificity.
+
+### Universal selector
+
+A [universal selector](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) (`*`)
+has **no specificity** and gets **0 points**.
+This means that any rule with 1 or more points will override it
+
+```css
+* {
+  color: red;
+}
+```
+
+### Element or pseudo-element selector
+
+An [element](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) (type)
+or [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements)
+selector gets **1 point of specificity** .
+
+#### Type selector
+
+```css
+div {
+  color: red;
+}
+```
+
+#### Pseudo-element selector
+
+```css
+::selection {
+  color: red;
+}
+```
+
+### Class, pseudo-class, or attribute selector
+
+A [class](https://developer.mozilla.org/docs/Web/CSS/Class_selectors),
+[pseudo-class](https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes) or
+[attribute](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) selector gets **10 points of specificity**.
+
+#### Class selector
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+#### Pseudo-class selector
+
+```css
+:hover {
+  color: red;
+}
+```
+
+#### Attribute selector
+
+```css
+[href='#'] {
+  color: red;
+}
+```
+
+The [`:not()`](https://developer.mozilla.org/docs/Web/CSS/:not)
+pseudo-class itself adds nothing to the specificity calculation.
+However, the selectors passed in as arguments do get added to the specificity calculation.
+
+```css
+div:not(.my-class) {
+  color: red;
+}
+```
+
+This sample would have **11 points** of specificity
+because it has one type selector (`div`) and one class _inside_ the `:not()`.
+
+### ID selector
+
+An [ID](https://developer.mozilla.org/docs/Web/CSS/ID_selectors)
+selector gets **100 points of specificity**,
+as long as you use an ID selector (`#myID`) and not an attribute selector (`[id="myID"]`).
+
+```css
+#myID {
+  color: red;
+}
+```
+
+### Inline style attribute
+
+CSS applied directly to the `style` attribute of the HTML element,
+gets a **specificity score of 1,000 points**.
+This means that in order to override it in CSS,
+you have to write an extremely specific selector.
+
+```html
+<div style="color: red"></div>
+```
+
+### `!important` rule
+
+Lastly, an `!important` at the end of a CSS value gets a specificity score of **10,000 points**.
+This is the highest specificity that one individual item can get.
+
+An `!important` rule is applied to a CSS property,
+so everything in the overall rule (selector and properties) does not get the same specificity score.
+
+```css
+.my-class {
+  color: red !important; /* 10,000 points */
+  background: white; /* 10 points */
+}
+```
+
+{% Assessment 'scoring-beginner' %}
+
+## Specificity in context
+
+The specificity of each selector that matches an element is added together.
+Consider this example HTML:
+
+```html
+<a class="my-class another-class" href="#">A link</a>
+```
+
+This link has two classes on it.
+Add the following CSS, and it gets **1 point of specificity**:
+
+```css
+a {
+  color: red;
+}
+```
+
+Reference one of the classes in this rule,
+it now has **11 points of specificity**:
+
+```css
+a.my-class {
+  color: green;
+}
+```
+
+Add the other class to the selector,
+it now has **21 points of specificity**:
+
+```css
+a.my-class.another-class {
+  color: rebeccapurple;
+}
+```
+
+Add the `href` attribute to the selector,
+it now has **31 points of specificity**:
+
+```css
+a.my-class.another-class[href] {
+  color: goldenrod;
+}
+```
+
+Finally,add a `:hover` pseudo-class to all of that,
+the selector ends up with **41 points of specificity**:
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'scoring-advanced' %}
+
+## Visualizing specificity
+
+In diagrams and specificity calculators,
+the specificity is often visualized like this:
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/McrFhjqHXMznUzXbRuJ6.svg", alt="A diagram demonstrating most specific to least specific selectors", width="800", height="474" %}
+
+The left group is `id` selectors.
+The second group is class, attribute, and pseudo-class selectors.
+The final group is element and pseudo-element selectors.
+
+For reference, the following selector is `0-4-1`:
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'visualizing' %}
+
+## Pragmatically increasing specificity
+
+Let's say we have some CSS that looks like this:
+
+```css
+.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+With HTML that looks like this:
+
+```html
+<button class="my-button" onclick="alert('hello')">Click me</button>
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abpoxdR',
+  tab: 'css,result'
+} %}
+</figure>
+
+The button has a grey background,
+because the second selector earns **11 points of specificity** (`0-1-1`).
+This is because it has one type selector (`button`),
+which is **1 point** and an attribute selector (`[onclick]`), which is **10 points**.
+
+The previous rule—`.my-button`—gets **10 points** (`0-1-0`),
+because it has one class selector.
+
+If you want to give this rule a boost,
+repeat the class selector like this:
+
+```css
+.my-button.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNOXBJ',
+  tab: 'css,result'
+} %}
+</figure>
+
+Now, the button will have a blue background,
+because the new selector gets a specificity score of **20 points** (`0-2-0`).
+
+{% Aside 'caution' %}
+If you find that you are needing to boost specificity like this frequently,
+it may indicate that you are writing overly specific selectors.
+Consider whether you can refactor your CSS to reduce the specificity of other selectors
+to avoid this problem.
+{% endAside %}
+
+## A matching specificity score sees the newest instance win
+
+Let's stay with the button example for now and switch the CSS around to this:
+
+```css
+.my-button {
+  background: blue;
+}
+
+[onclick] {
+  background: grey;
+}
+```
+
+The button has a grey background,
+because **both selectors have an identical specificity score** (`0-1-0`).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNOXKJ',
+  tab: 'css,result'
+} %}
+</figure>
+
+If you switch the rules in the source order,
+the button would then be blue.
+
+```css
+[onclick] {
+  background: grey;
+}
+
+.my-button {
+  background: blue;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNReWRO',
+  tab: 'css,result'
+} %}
+</figure>
+
+This is the only instance where newer CSS wins.
+To do so it must match the specificity of another selector that targets the same element.
+
+## Resources
+
+- [CSS SpeciFISHity](http://specifishity.com)
+- [Specificity Calculator](https://specificity.keegan.st)
+- [MDN Specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity)
+- [Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)
+- [Another Specificity Calculator](https://polypane.app/css-specificity-calculator)
diff --git a/src/site/content/en/learn/css/specificity/scoring-advanced.assess.yml b/src/site/content/en/learn/css/specificity/scoring-advanced.assess.yml
new file mode 100644
index 00000000000..5134be26d83
--- /dev/null
+++ b/src/site/content/en/learn/css/specificity/scoring-advanced.assess.yml
@@ -0,0 +1,21 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is worth **21 points**?
+    options:
+      - content: "`article > section`"
+        rationale: "Elements are worth 1 point, there are 2 elements in the
+        selector, making this worth **2 points**."
+      - content: "`article.card.dark`"
+        rationale: "Elements are worth 1 point, classes are worth 10 points, and
+        with 2 classes and 1 element, that makes this selector worth **21
+        points**."
+      - content: "`article:hover a[href]`"
+        rationale: "Elements are worth 1 point, pseudo-classes and attributes
+        are worth 10 points, there are 2 points for the elements, and 20 points
+        for the attributes and classes, makes this selector worth **22
+        points**."
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/specificity/scoring-beginner.assess.yml b/src/site/content/en/learn/css/specificity/scoring-beginner.assess.yml
new file mode 100644
index 00000000000..035104bf71e
--- /dev/null
+++ b/src/site/content/en/learn/css/specificity/scoring-beginner.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is the specificity score of `a[href="#"]`?
+    options:
+      - content: "1"
+        rationale: 'The `a` is worth 1 point, but the `[href="#"]` is worth 10
+        points.'
+      - content: "5"
+        rationale: "Try again!"
+      - content: "11"
+        rationale: 'The `a` is worth 1 point and the `[href="#"]` is worth 10
+        points, making a total score of **11 points**.'
diff --git a/src/site/content/en/learn/css/specificity/visualizing.assess.yml b/src/site/content/en/learn/css/specificity/visualizing.assess.yml
new file mode 100644
index 00000000000..dd5cd715169
--- /dev/null
+++ b/src/site/content/en/learn/css/specificity/visualizing.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity visualizing
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is `1-2-1`?
+    options:
+      - content: "`section#specialty.dark`"
+        rationale: 'This selector is visualized as `1-1-1`.'
+      - content: "`#specialty:hover li.dark`"
+        rationale: "🎉"
+      - content: "`[data-state-rad].dark#specialty:hover`"
+        rationale: 'This selector is visualized as `1-3-0`.'
+      - content: "`li#specialty section.dark`"
+        rationale: 'This selector is visualized as `1-1-2`.'
diff --git a/src/site/content/en/learn/css/the-cascade/conclusion.assess.yml b/src/site/content/en/learn/css/the-cascade/conclusion.assess.yml
new file mode 100644
index 00000000000..8ed8ba41df4
--- /dev/null
+++ b/src/site/content/en/learn/css/the-cascade/conclusion.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: The Cascade can be used for...
+    options:
+      - content: "Resolving conflicts when multiple styles apply to an element."
+        rationale: "This is one of its primary goals, conflict resolution."
+      - content: "Ensuring there's only one style value for each property at draw time."
+        rationale: "The text can only be one color, and The Cascade is a way of
+        determining which it should be."
+      - content: "Scoring and weighting style rules."
+        rationale: "Scoring and weighting are part of the sorting phase of The
+        Cascade."
+      - content: "Sorting and filtering style attributes."
+        rationale: "Sorting and filtering are phases of The Cascade to help
+        understand aspects of conflict resolution."
diff --git a/src/site/content/en/learn/css/the-cascade/index.md b/src/site/content/en/learn/css/the-cascade/index.md
new file mode 100644
index 00000000000..4b4dbf43615
--- /dev/null
+++ b/src/site/content/en/learn/css/the-cascade/index.md
@@ -0,0 +1,254 @@
+---
+title: The cascade
+description: >
+  Sometimes two or more competing CSS rules could apply to an element.
+  In this module find out how the browser chooses which to use, and how to control this selection.
+audio:
+  title: 'The CSS Podcast - 004: The Cascade'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+tags:
+  - css
+---
+
+CSS stands for Cascading Stylesheets.
+The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.
+It's the reason that the text of the button styled with the following CSS will be blue.
+
+```css
+button {
+  color: red;
+}
+
+button {
+  color: blue;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrgMOm',
+  height: 200
+} %}
+</figure>
+
+Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this.
+The cascade algorithm is split into 4 distinct stages.
+
+1. **Position and order of appearance**: the order of which your CSS rules appear
+2. **Specificity**: an algorithm which determines which CSS selector has the strongest match
+3. **Origin**: the order of when CSS appears and where it comes from, whether that is a browser style,
+   CSS from a browser extension, or your authored CSS
+4. **Importance**: some CSS rules are weighted more heavily than others,
+   especially with the `!important` rule type
+
+## Position and order of appearance
+
+The order in which your CSS rules appear and how they appear is taken into consideration by the cascade
+while it calculates conflict resolution.
+
+The demo right at the start of this lesson is the most straightforward example of position.
+There are two rules that have selectors of identical specificity,
+so the last one to be declared won.
+
+Styles can come from various sources on an HTML page,
+such as a `<link>` tag,
+an embedded `<style>` tag,
+and inline CSS as defined in an element's `style` attribute.
+
+If you have a `<link>` that includes CSS at the top of your HTML page,
+then another `<link>` that includes CSS at the bottom of your page: the bottom `<link>` will have the most specificity.
+The same thing happens with embedded `<style>` elements, too.
+They get more specific, the further down the page they are.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'NWdPaWv'
+} %}
+  <figcaption>The button has a blue background,
+  as defined by CSS which is included by a <code>&lt;link /&gt;</code> element.
+  A CSS rule that sets it to be dark is in a second linked stylesheet
+  and is applied because of its later position.</figcaption>
+</figure>
+
+This ordering also applies to embedded `<style>` elements.
+If they are declared before a `<link>`,
+the linked stylesheet's CSS will have the most specificity.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgbLoB'
+} %}
+<figcaption>The <code>&lt;style&gt;</code> element is declared in the <code>&lt;head&gt;</code>,
+while the <code>&lt;link /&gt;</code> element is declared in the <code>&lt;body&gt;</code>.
+This means it gets more specificity than the <code>&lt;style&gt;</code> element</figcaption>
+</figure>
+
+An inline `style` attribute with CSS declared in it will override all other CSS,
+regardless of its position, unless a declaration has `!important` defined.
+
+Position also applies in the order of your CSS rule.
+In this example, the element will have a purple background because `background: purple` was declared last.
+Because the green background was declared before the purple background, it is now ignored by the browser.
+
+```css
+.my-element {
+  background: green;
+  background: purple;
+}
+```
+
+Being able to specify two values for the same property
+can be a simple way to create fallbacks for browsers that do not support a particular value.
+In this next example, `font-size` is declared twice.
+If `clamp()` is supported in the browser,
+then the previous `font-size` declaration will be discarded.
+If `clamp()` isn't supported by the browser,
+the initial declaration will be honored, and the font-size will be 1.5rem
+
+```css
+.my-element {
+  font-size: 1.5rem;
+  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgbPMP'
+} %}
+</figure>
+
+{% Aside %}
+This approach of declaring the same property twice works because browsers ignore values they don't understand.
+Unlike some other programming languages, CSS will not throw an error or break your program when it detects a line it
+cannot parse—the value it cannot parse is invalid and therefore ignored.
+The browser then continues to process the rest of the CSS without breaking stuff it already understands.
+{% endAside %}
+
+{% Assessment 'position' %}
+
+## Specificity
+
+Specificity is an algorithm which determines which CSS selector is the most specific,
+using a weighting or scoring system to make those calculations.
+By making a rule more specific,
+you can cause it to be applied even if some other CSS that matches the selector appears later in the CSS.
+
+In [the next lesson](/learn/css/specificity) you can learn the details of how specificity is calculated,
+however keeping a few things in mind will help you avoid too many specificity issues.
+
+CSS targeting a class on an element will make that rule more specific,
+and therefore seen as more important to be applied,
+than CSS targeting the element alone.
+This means that with the following CSS,
+the `h1` will be colored red even though both rules match and the rule for the `h1` selector comes later in the stylesheet.
+
+```html
+<h1 class="my-element">Heading</h1>
+```
+
+```css
+.my-element {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}
+```
+
+An `id` makes the CSS even more specific,
+so styles applied to an ID will override those applied many other ways.
+This is one reason why it is generally not a good idea to attach styles to an `id`.
+It can make it difficult to overwrite that style with something else.
+
+### Specificity is cumulative
+
+As you can find out in the next lesson,
+each type of selector is awarded points which indicate how specific it is,
+the points for all of the selectors you have used to target an element are added together.
+This means that if you target an element with a selector list such as
+`a.my-class.another-class[href]:hover` you get something quite hard to overwrite with other CSS.
+For this reason, and to help make your CSS more reusable,
+it's a good idea to keep your selectors as simple as possible.
+Use specificity as a tool to get at elements when you need to,
+but always consider refactoring long, specific selector lists, if you can.
+
+## Origin
+
+The CSS that you write isn't the only CSS applied to a page.
+The cascade takes into account the origin of the CSS.
+This origin includes the browser's internal stylesheet,
+styles added by browser extensions or the operating system,
+and your authored CSS.
+The **order of specificity of these origins**, from least specific, to most specific is as follows:
+
+1. **User agent base styles**. These are the styles that your browser applies to HTML elements by default.
+2. **Local user styles**. These can come from the operating system level, such as a base font size,
+   or a preference of reduced motion.
+   They can also come from browser extensions,
+   such as a browser extension that allows a user to write their own custom CSS for a webpage.
+3. **Authored CSS**. The CSS that you author.
+4. **Authored `!important`**. Any `!important` that you add to your authored declarations.
+5. **Local user styles `!important`**. Any `!important` that come from the operating system level,
+   or browser extension level CSS.
+6. **User agent `!important`**. Any `!important` that are defined in the default CSS,
+   provided by the browser.
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/zPdaZ6G11oYrgJ78EfF7.svg",
+alt="A visual demonstration of the order of origins as also explained in the list.", width="800", height="347" %}
+</figure>
+
+If you have an `!important` rule type in the CSS you have authored
+and the user has an `!important` rule type in their custom CSS, whose CSS wins?
+
+{% Assessment 'origin' %}
+
+## Importance
+
+Not all CSS rules are calculated the same as each other,
+or given the same specificity as each other.
+
+The **order of importance**, from least important,
+to most important is as follows:
+
+1. normal rule type, such as `font-size`, `background` or `color`
+2. `animation` rule type
+3. `!important` rule type (following the same order as origin)
+4. `transition` rule type
+
+Active animation and transition rule types have higher importance than normal rules.
+In the case of transitions higher importance than `!important` rule types.
+This is because when an animation or transition becomes active,
+its expected behaviour is to change visual state.
+
+## Using DevTools to find out why some CSS is not applying
+
+Browser DevTools will typically show all CSS that could match an element,
+with those which are not being used crossed out.
+
+<figure>
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Z6aLsqcqjGAUsWzq7DZs.png",
+alt="An image of browser DevTools with overwritten CSS crossed out", width="800", height="446" %}
+</figure>
+
+If the CSS you expected to apply doesn't appear at all,
+then it didn't match the element.
+In that case you need to look elsewhere,
+perhaps for a typo in a class or element name or some invalid CSS.
+
+{% Assessment 'conclusion' %}
+
+## Resources
+
+- [A highly interactive explainer of the cascade](https://wattenberger.com/blog/css-cascade)
+- [MDN cascade reference](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
diff --git a/src/site/content/en/learn/css/the-cascade/origin.assess.yml b/src/site/content/en/learn/css/the-cascade/origin.assess.yml
new file mode 100644
index 00000000000..98fd0ca2f80
--- /dev/null
+++ b/src/site/content/en/learn/css/the-cascade/origin.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of cascade origins
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      **Test your knowledge of cascade origins**, consider the following style
+      rules from various origins:
+
+      #### User-agent style
+      ```css
+      h1 { margin-block-start: 0.83em; }
+      ```
+
+      #### Bootstrap
+      ```css
+      h1 { margin-block-start: 20px; }
+      ```
+
+      #### Page Author styles
+      ```css
+      h1 { margin-block-start: 2ch; }
+
+      @media (max-width: 480px) {
+        h1 { margin-block-start: 1ch; }
+      }
+      ```
+
+      #### User custom style
+      ```css
+      h1 { margin-block-start: 2rem !important; }
+      ```
+
+      Then, given the following HTML:
+      ```html
+      <h1>Lorem ipsum</h1>
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What is the final `margin-block-start` of the `h1`?"
+    options:
+      - content: 20px
+        rationale: "Bootstrap is part of the authored origin, which loses to the
+        important local user style."
+      - content: 0.83em
+        rationale: "The user agent style origin loses to the important local
+        user style."
+      - content: 2rem
+        rationale: "This `!important` user custom style has the most specific
+        origin."
+      - content: 2ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
+      - content: 1ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
diff --git a/src/site/content/en/learn/css/the-cascade/position.assess.yml b/src/site/content/en/learn/css/the-cascade/position.assess.yml
new file mode 100644
index 00000000000..cd4560468b1
--- /dev/null
+++ b/src/site/content/en/learn/css/the-cascade/position.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      If you have the following HTML on your page:
+
+      ```html
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <link rel="stylesheet" href="styles.css" />
+        </head>
+        <body>
+          <button>I am a button</button>
+          <style>
+            button {
+              background: pink;
+            }
+          </style>
+        </body>
+      </html>
+      ```
+
+      Inside `styles.css`, is the following CSS rule:
+
+      ```css
+      button {
+        background: yellow;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What color is the button's background?
+    options:
+      - content: pink
+        rationale: | 
+          The embedded `<style>` origin is further down the page than the
+          `<link>` tag, so while the specificity of `button` is the same, the
+          **position** of the style rule makes it win.
+      - content: yellow
+        rationale: | 
+          To the HTML document, the yellow button background may have been read
+          first, but a newer rule of the same specificity was discovered later,
+          making this rule not apply to the button.
\ No newline at end of file
diff --git a/src/site/content/en/learn/css/transitions/index.md b/src/site/content/en/learn/css/transitions/index.md
new file mode 100644
index 00000000000..da128527f36
--- /dev/null
+++ b/src/site/content/en/learn/css/transitions/index.md
@@ -0,0 +1,279 @@
+---
+title: Transitions
+description: >
+  In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.
+
+audio:
+  title: 'The CSS Podcast - 044: Transitions'
+  src: https://traffic.libsyn.com/secure/thecsspodcast/TCP053_v1.mp3?dest-id=1891556
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - cambickel
+date: 2021-09-15
+---
+
+When interacting with a website, you might notice that many elements have _state_. For example, dropdowns can be in opened or closed states. Buttons might change color when focused or hovered. Modals appear and disappear.
+
+By default, CSS switches the style of these states instantly.
+
+Using CSS transitions, we can interpolate between the initial state and the target state of the element. The transition between the two enhances the user experience by providing visual direction, support, and hints about the cause and effect of the interaction.
+
+{% Aside 'key-term' %}
+_Interpolation_ is the process of creating "in-between" steps that smoothly transition from one state to another.
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYzNrJV',
+  height: 320
+} %}
+</figure>
+
+## Transition properties
+{% BrowserCompat 'css.properties.transition-property' %}
+
+To use transitions in CSS, you can use the various transition properties or the `transition` shorthand property.
+
+### transition-property
+
+The [`transition-property`](https://developer.mozilla.org/docs/Web/CSS/transition-property) property specifies which style(s) to transition.
+
+```css
+.my-element {
+  transition-property: background-color;
+}
+```
+
+The `transition-property` accepts one or more CSS property names in a comma-separated list.
+
+Optionally, you may use `transition-property: all` to indicate that every property should transition.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwWPeEj',
+  height: 400
+} %}
+</figure>
+
+### transition-duration
+
+The [`transition-duration`](https://developer.mozilla.org/docs/Web/CSS/transition-duration) property is used to define the length of time that a transition will take to complete.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'wvegMYp',
+  height: 400
+} %}
+</figure>
+
+`transition-duration` accepts time units, either in seconds (`s`) or milliseconds (`ms`) and defaults to `0s`.
+
+### transition-timing-function
+
+Use the [`transition-timing-function`](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) property to vary the speed of a CSS transition over the course of the `transition-duration`.
+
+By default, CSS will transition your elements at a constant speed (`transition-timing-function: linear`). Linear transitions can end up looking somewhat artificial, though: in real life, objects have weight and can't stop and start instantly. Easing into or out of a transition can make your transitions more lively and natural.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWgdyZx'
+} %}
+</figure>
+
+Our [module on CSS Animation](/learn/css/animations/#animation-timing-function) has a good overview of timing functions.
+
+You can use [DevTools](https://developer.chrome.com/docs/devtools/css/animations/) to experiment with different timing functions in real-time.
+
+{% Img src="image/eiKy1JcjHqPp3gaedjAQWjPJ8YK2/dRwKg0RIsy5wWVzkUFUA.png", alt="Chrome DevTools visual transition timing editor.", width="800", height="418" %}
+
+### transition-delay
+
+Use the [`transition-delay`](https://developer.mozilla.org/docs/Web/CSS/transition-delay) property to specify the time at which a transition will start. If `transition-duration` is not specified, transitions will start instantly because the default value is `0s`. This property accepts a time unit, for example seconds (`s`) or milliseconds (`ms`).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOwyWep'
+} %}
+</figure>
+
+This property is useful for staggering transitions, achieved by setting a longer `transition-delay` for each subsequent element in a group.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLXgeRQ',
+  height: 410
+} %}
+</figure>
+
+`transition-delay` is also useful for debugging. Setting the delay to a negative value can start a transition further into the timeline.
+
+### shorthand: transition
+
+Like most CSS properties, there is a shorthand version. [`transition`](https://developer.mozilla.org/docs/Web/CSS/transition) combines `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.
+
+```css
+.longhand {
+  transition-property: transform;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+}
+
+.shorthand {
+  transition: transform 300ms ease-in-out 0s;
+}
+```
+
+## What can and can't transition?
+
+When writing CSS, you can specify which properties should have animated transitions. See [this MDN list of animatable CSS properties](https://developer.mozilla.org/docs/Web/CSS/CSS_animated_properties).
+
+In general, it's only possible to transition elements that can have a "middle state" between their start and final states. For example, it's impossible to add transitions for `font-family`, because it's unclear what the "middle state" between `serif` and `monospace` should look like. On the other hand, it is possible to add transitions for `font-size` because its unit is a length that can be interpolated between.
+
+{% Img src="image/eiKy1JcjHqPp3gaedjAQWjPJ8YK2/1Lr1iC56nyUyYWWv6qF2.jpg", alt="Diagram of shapes transitioning smoothly from one state to another, and two lines of text in different fonts that cannot be transitioned smoothly.", width="800", height="600" %}
+
+Here are some common properties you can transition.
+
+### Transform
+{% BrowserCompat 'css.properties.transform' %}
+
+The [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) CSS property is commonly transitioned because it is a GPU-accelerated property that results in smoother animation that also consumes less battery. This property lets you arbitrarily scale, rotate, translate, or skew an element.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRErowE'
+} %}
+</figure>
+
+Check out [the section on transforms](/learn/css/functions/#transforms) in [our Functions module](/learn/css/functions/).
+
+### Color
+
+Before, during, and after interaction, color can be a great indicator of state. For example, a button might change color if it's being hovered. This color change can provide feedback to the user that the button is clickable.
+
+The `color`, `background-color`, and `border-color` properties are just a few places where color can
+be transitioned upon interaction.
+
+{% Aside %}
+Color transitions do not usually need to be behind a [reduced motion](#accessibility-considerations) preference. Use your best judgment.
+{% endAside %}
+
+Check out [our module on color](/learn/css/color/).
+
+### Shadows
+
+Shadows are often transitioned to indicate elevation change, like from user focus.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gORgPQx',
+  height: 300
+} %}
+</figure>
+
+Check out [our module on shadows](/learn/css/shadows/).
+
+### Filters
+
+[`filter`](https://developer.mozilla.org/docs/Web/CSS/filter) is a powerful CSS property that lets you add graphic effects on the fly. Transitioning between different `filter` states can create some pretty impressive results.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PojWZxJ',
+  height: 350
+} %}
+</figure>
+
+Check out [our module on filters](/learn/css/filters/).
+
+## Transition triggers
+
+Your CSS must include a change of state *and* an event that triggers that state change for CSS transitions to activate. A typical example of such a trigger is the `:hover` [pseudo-class](/learn/css/pseudo-classes/). This pseudo-class matches when the user hovers over an element with their cursor.
+
+Below is a list of some pseudo-classes and events that can trigger state changes in your elements.
+
+* [`:hover`](/learn/css/pseudo-classes/#hover): matches if the cursor is over the element.
+* [`:focus`](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible): matches if the element is focused.
+* [`:focus-within`](/learn/css/pseudo-classes/#focus,-focus-within,-and-focus-visible) : matches if the element or any of its descendants are
+    focused.
+* [`:target`](/learn/css/pseudo-classes/#target): matches when the current URL's [fragment](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment) matches the element's id.
+* [`:active`](/learn/css/pseudo-classes/#active):  matches when the element is being activated (typically when the
+    mouse is pressed over it).
+* `class` change from JavaScript: when an element's CSS `class` changes via
+    JavaScript, CSS will transition eligible properties that have changed.
+
+## Different transitions for enter or exit
+
+By setting different `transition` properties on hover/focus, it's possible to create some interesting effects.
+
+```css
+.my-element {
+  background: red;
+
+  /* This transition is applied on the "exit" transition */
+  transition: background 2000ms ease-in;
+}
+
+.my-element:hover {
+  background: blue;
+
+  /* This transition is applied on the "enter" transition */
+  transition: background 150ms ease;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJgWMaO'
+} %}
+</figure>
+
+## Accessibility considerations
+
+CSS transitions are not for everyone. For some people, transitions and animations can cause motion sickness or discomfort. Thankfully, CSS has a media feature called [`prefers-reduced-motion`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion) that detects if a user has indicated a preference for less motion from their device.
+
+```css
+/*
+  If the user has expressed their preference for
+  reduced motion, then don't use transitions.
+*/
+@media (prefers-reduced-motion: reduce) {
+  .my-element {
+    transition: none;
+  }
+}
+
+/*
+  If the browser understands the media query and the user
+  explicitly hasn't set a preference, then use transitions.
+*/
+@media (prefers-reduced-motion: no-preference) {
+  .my-element {
+    transition: transform 250ms ease;
+  }
+}
+```
+
+Check out our blog post [prefers-reduced-motion: Sometimes less movement is more](/prefers-reduced-motion/) for more information on this media feature.
+
+{% Aside %}
+In the Learn Accessibility module on [animation and motion](/learn/accessibility/motion/) discover how to add delight to your site without causing problems for some users.
+{% endAside %}
+
+## Performance considerations
+
+When working with CSS transitions, you may encounter performance issues if you add transitions for certain CSS properties. For example, when properties such as `width` or `height` change, they push content around on the rest of the page. This forces CSS to calculate new positions for every affected element for each frame of the transition. When possible, we recommend using properties like `transform` and `opacity` instead.
+
+Check out our [guide on high-performance CSS animations](/animations-guide/) for a deep-dive on this topic.
+
+{% Assessment 'transitions' %}
diff --git a/src/site/content/en/learn/css/transitions/transitions.assess.yml b/src/site/content/en/learn/css/transitions/transitions.assess.yml
new file mode 100644
index 00000000000..850c2bb6720
--- /dev/null
+++ b/src/site/content/en/learn/css/transitions/transitions.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of transitions
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Which transition property is for specifying easing?
+    options:
+      - content: "`transition-duration`"
+        rationale: "Try again."
+      - content: "`transition-easing`"
+        rationale: "Not a real CSS property."
+      - content: "`transition-cubic-bezier`"
+        rationale: "Not a real CSS property."
+      - content: "`transition-timing-function`"
+        rationale: "Correct!"
+      - content: "`animation-ease`"
+        rationale: "Not a real CSS property."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "It's best practice to use `transition-property: all`"
+    options:
+      - content: "true"
+        rationale: "Try again. Specifying `all` can lead to performance issues and unintended transitions."
+      - content: "false"
+        rationale: "Correct. Best practice is to specify each property individually. Finer control will lead to better performance and more predictable outcomes."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "All properties can be transitioned."
+    options:
+      - content: "true"
+        rationale: "Try again. Properties like `font-family` cannot transition."
+      - content: "false"
+        rationale: "Correct. A transition can be specified for incompatible properties, but they will transition discretely."
diff --git a/src/site/content/en/learn/css/typography/index.md b/src/site/content/en/learn/css/typography/index.md
new file mode 100644
index 00000000000..4562c990842
--- /dev/null
+++ b/src/site/content/en/learn/css/typography/index.md
@@ -0,0 +1,463 @@
+---
+title: Text and typography
+description: >
+  In this module, learn how to style text on the web.
+audio:
+  title: 'The CSS Podcast - 036: Text & Typography'
+  src: https://traffic.libsyn.com/secure/thecsspodcast/TCP036_v2.mp3?dest-id=1891556
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - cambickel
+date: 2021-11-23
+---
+
+Text is one of the core building blocks of the web.
+
+When making a website, you don’t necessarily need to style your text; HTML actually has some pretty reasonable default styling.
+
+However, text will likely make up the majority of your website, so it’s worthwhile to add some styling to spruce it up. By changing a few basic properties, you can significantly improve the reading experience for your users!
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNEJWGy',
+  height: 590
+} %}
+</figure>
+
+In this module, we’ll first look at some fundamental CSS font properties like `font-family`, `font-style`, `font-weight`, and `font-size`. Then, we’ll dive into properties that affect paragraphs of text, such as `text-indent` and `word-spacing`. The module finishes with some more advanced topics such as variable fonts and pseudo-elements.
+
+## Change the typeface
+{% BrowserCompat 'css.properties.font-family' %}
+
+Use [`font-family`](https://developer.mozilla.org/docs/Web/CSS/font-family) to change the typeface of your text.
+
+The `font-family` property accepts a comma-separated list of strings, either referring to *specific* or *generic* font families. Specific font families are quoted strings, such as “Helvetica”, “EB Garamond”, or “Times New Roman”. Generic font families are keywords such as `serif`, `sans-serif`, and `monospace` (find the [full list of options on MDN](https://developer.mozilla.org/docs/Web/CSS/font-family#values)). The browser will display the first available typeface from the provided list.
+
+{% Aside %}
+When the browser chooses which font to display from your `font-family` declaration, it doesn’t stop at the first available font in the list. Instead, it selects fonts one character at a time. If a particular character isn’t available in the first font in the list, it moves on to the next, and so on.
+{% endAside %}
+
+When using `font-family`, you should specify at least one generic font family in case the user’s browser doesn’t have your preferred fonts. Generally, the fallback generic font family should be similar to your preferred fonts: if using `font-family: "Helvetica"` (a sans-serif font family), your fallback should be `sans-serif` to match.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLojraG',
+  height: 470,
+  tab: 'css,result'
+} %}
+</figure>
+
+## Use italic and oblique fonts
+{% BrowserCompat 'css.properties.font-style' %}
+
+Use [`font-style`](https://developer.mozilla.org/docs/Web/CSS/font-style) to set whether text should be italic or not. `font-style` accepts one of the following keywords: `normal`, `italic`, and `oblique`.
+
+{% Aside %}
+Q: What’s the difference between `italic` and `oblique`?
+A: In fonts that support it, `font-style: italic` is typically a cursive version of the regular typeface. `font-style: oblique` displays a slanted version of regular typeface.
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWvGRjx',
+  height: 280
+} %}
+</figure>
+
+## Make text bold
+{% BrowserCompat 'css.properties.font-weight' %}
+
+Use [`font-weight`](https://developer.mozilla.org/docs/Web/CSS/font-weight) to set the “boldness” of text. This property accepts keyword values (`normal`, `bold`), relative keyword values (`lighter`, `bolder`), and numeric values (`100` to `900`).
+
+The keywords `normal` and `bold` are equivalent to the numeric values `400` and `700`, respectively.
+
+The keywords `lighter` and `bolder` are calculated relative to the parent element. See MDN’s [Meaning of Relative Weights](https://developer.mozilla.org/docs/Web/CSS/font-weight#meaning_of_relative_weights) for a handy chart showing how this value is determined.
+
+{% Aside %}
+Most fonts, especially the ["web-safe" ones](#font-family), only support the weights `400` (`normal`) and `700` (`bold`). When importing fonts using `@font-face` or `@import`, you can choose specific weights you want to pull in. Still, non-variable fonts only support numeric values for `font-weight` in the 100s, e.g. `100`, `200`, `300`, etc. If you want to use `font-weight: 321` (for example), you’ll have to use a [Variable Font](#variable-fonts).
+{% endAside %}
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gOxKxNz',
+  height: 580
+} %}
+</figure>
+
+## Change the size of text
+{% BrowserCompat 'css.properties.font-size' %}
+
+Use [`font-size`](https://developer.mozilla.org/docs/Web/CSS/font-size) to control the size of your text elements. This property accepts length values, percentages, and a handful of keyword values.
+
+In addition to length and percentage values, `font-size` accepts some *absolute* keyword values (`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`) and a couple of *relative* keyword values (`smaller`, `larger`). The relative values are relative to the parent element’s `font-size`.
+
+{% Aside %}
+Q: What’s the difference between `em` and `rem`?
+A: In CSS, `em` represents the `font-size` inherited from the element’s parent. For example, `font-size: 2em` is equivalent to the parent’s `font-size` multiplied by two. `rem` is similar, but instead represents the `font-size` inherited from the *root element*, i.e. `<html>`.
+{% endAside %}
+
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYEroda',
+  height: 370
+} %}
+</figure>
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'vYJzYzw'
+} %}
+</figure>
+
+## Change the space between lines
+{% BrowserCompat 'css.properties.line-height' %}
+
+Use [`line-height`](https://developer.mozilla.org/docs/Web/CSS/line-height) to specify the height of each line in an element. This property accepts either a number, length, percentage, or the keyword `normal`. Generally, it’s recommended to use a number instead of a length or percentage to avoid issues with inheritance.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWaqQjv',
+  height: 600
+} %}
+</figure>
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'ExvLJNx',
+  height: 820
+} %}
+</figure>
+
+## Change the space between characters
+{% BrowserCompat 'css.properties.letter-spacing' %}
+
+Use [`letter-spacing`](https://developer.mozilla.org/docs/Web/CSS/letter-spacing) to control the amount of horizontal space between characters in your text. This property accepts length values such as `em`, `px`,  and `rem`.
+
+Note that the specified value *increases* the amount of natural space between characters. In the demo below, try selecting an individual letter to see the size of its letterbox and how it changes with `letter-spacing`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'abyGxBz',
+  height: 560
+} %}
+</figure>
+
+## Change the space between words
+{% BrowserCompat 'css.properties.word-spacing' %}
+
+Use [`word-spacing`](https://developer.mozilla.org/docs/Web/CSS/word-spacing) to increase or decrease the length of space between each word in your text. This property accepts length values such as `em`, `px`, and `rem`. Note that the length you specify is for *extra* space in addition to the normal spacing. This means that `word-spacing: 0` is equivalent to `word-spacing: normal`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxLjeRG',
+  height: 280
+} %}
+</figure>
+
+## `font` shorthand
+
+You can use the shorthand [`font`](https://developer.mozilla.org/docs/Web/CSS/font) property to set many font-related properties at once. The list of possible properties are [`font-family`](#font-family), [`font-size`](#font-size), [`font-stretch`](https://developer.mozilla.org/docs/Web/CSS/font-stretch), [`font-style`](#font-style), [`font-variant`](#font-variant), [`font-weight`](#font-weight), and [`line-height`](#line-height).
+
+Check out [MDN’s `font` article](https://developer.mozilla.org/docs/Web/CSS/font#syntax) for the specifics of how to order these properties.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjyvVbY',
+  height: 270
+} %}
+</figure>
+
+## Change the case of text
+{% BrowserCompat 'css.properties.text-transform' %}
+
+Use [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) to modify the capitalization of your text without needing to change the underlying HTML. This property accepts the following keyword values: `uppercase`, `lowercase`, and `capitalize`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'qBXYwqb',
+  height: 450
+} %}
+</figure>
+
+## Add underlines, overlines, and through-lines to text
+{% BrowserCompat 'css.properties.text-decoration' %}
+
+Use [`text-decoration`](https://developer.mozilla.org/docs/Web/CSS/text-decoration) to add lines to your text. Underlines are most commonly used, but it’s possible to add lines above your text or right through it!
+
+The `text-decoration` property is shorthand for the more specific properties detailed below.
+
+The [`text-decoration-line`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-line) property accepts the keywords `underline`, `overline`, and `line-through`. You can also specify multiple keywords for multiple lines.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'LYjmvbN',
+  height: 460,
+  tab: 'css,result'
+} %}
+</figure>
+
+The [`text-decoration-color`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-color) property sets the color of all decorations from `text-decoration-line`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNedOYL',
+  height: 460,
+  tab: 'css,result'
+} %}
+</figure>
+
+The [`text-decoration-style`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-style) property accepts the keywords `solid`, `double`, `dotted`, `dashed`, and `wavy`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'dyzeLOp',
+  height: 460,
+  tab: 'css,result'
+} %}
+</figure>
+
+The [`text-decoration-thickness`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness) property accepts any length values and sets the stroke width of all decorations from `text-decoration-line`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwzxNmm',
+  height: 460,
+  tab: 'css,result'
+} %}
+</figure>
+
+The `text-decoration` property is a shorthand for all the above properties.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzxLMpN',
+  height: 460,
+  tab: 'css,result'
+} %}
+</figure>
+
+{% Aside %}
+Use [`text-underline-position`](https://developer.mozilla.org/docs/Web/CSS/text-underline-position) to offset the underline of a `text-decoration: underline` by the specified amount. This property doesn’t work for `overline` or `line-through`.
+{% endAside %}
+
+## Add an indent to your text
+{% BrowserCompat 'css.properties.text-indent' %}
+
+Use [`text-indent`](https://developer.mozilla.org/docs/Web/CSS/text-indent) to add an indent to your blocks of text. This property takes either a length (for example, `10px`, `2em`) or a percentage of the containing block’s width.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'RwZyOoV',
+  height: 300
+} %}
+</figure>
+
+## Deal with overflowing or hidden content
+{% BrowserCompat 'css.properties.text-overflow' %}
+
+Use [`text-overflow`](https://developer.mozilla.org/docs/Web/CSS/text-overflow) to specify how hidden content is represented. There are two options: `clip` (the default), which truncates the text at the point of overflow; and `ellipsis`, which displays an ellipsis (…) at the point of overflow.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRvdLNv',
+  height: 250,
+  tab: 'css,result'
+} %}
+</figure>
+
+## Control white-space
+{% BrowserCompat 'css.properties.white-space' %}
+
+The [`white-space`](https://developer.mozilla.org/docs/Web/CSS/white-space) property is used to specify how whitespace in an element should be handled. For more details, check out the [`white-space` article on MDN](https://developer.mozilla.org/docs/Web/CSS/white-space).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'PoKegbO',
+  height: 970
+} %}
+</figure>
+
+`white-space: pre` can be useful for rendering [ASCII art](https://en.wikipedia.org/wiki/ASCII_art) or carefully indented code blocks.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJjZGbz',
+  height: 440
+} %}
+</figure>
+
+## Control how words break
+{% BrowserCompat 'css.properties.word-break' %}
+
+Use [`word-break`](https://developer.mozilla.org/docs/Web/CSS/word-break) to change how words should be “broken” when they would overflow the line. By default, the browser will not split words. Using the keyword value `break-all` for `word-break` will instruct the browser to break words at individual characters if necessary.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'BadxEQY'
+} %}
+</figure>
+
+## Change text alignment
+{% BrowserCompat 'css.properties.text-align' %}
+
+Use [`text-align`](https://developer.mozilla.org/docs/Web/CSS/text-align) to specify the horizontal alignment of text in a block or table-cell element. This property accepts the keyword values `left`, `right`, `start`, `end`, `center`, `justify`, and `match-parent`.
+
+The values `left` and `right` align the text to the left and right sides of the block, respectively.
+
+Use `start` and `end` to represent the location of the start and end of a line of text in the current writing mode. Therefore, `start` maps to `left` in English, and to `right` in Arabic script which is written right to left (RTL). They're logical alignments, learn more in our [logical properties](/learn/css/logical-properties/) module.
+
+Use `center` to align the text to the center of the block.
+
+The value of `justify` organizes the text and changes word spacings automatically so that the text lines up with both the left and right edges of the block.
+
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGrMJBM',
+  height: 570
+} %}
+</figure>
+
+## Change the direction of text
+{% BrowserCompat 'css.properties.direction' %}
+
+Use [`direction`](https://developer.mozilla.org/docs/Web/CSS/direction) to set the direction of your text, either `ltr` (left to right, the default) or `rtl` (right to left). Some languages like Arabic, Hebrew, or Persian are written right to left, so `direction: rtl` should be used. For English and all other left-to-right languages, use `direction: ltr`.
+
+{% Aside 'caution' %}
+Generally, you should favor using the [HTML attribute `dir`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/dir) instead of `direction`. Check out [this StackOverflow discussion](https://stackoverflow.com/a/5375907) for more details.
+{% endAside %}
+
+## Change the flow of text
+{% BrowserCompat 'css.properties.writing-mode' %}
+
+Use [`writing-mode`](https://developer.mozilla.org/docs/Web/CSS/writing-mode) to change the way text flows and is arranged. The default is `horizontal-tb`, but you can also set `writing-mode` to `vertical-lr` or `vertical-rl` for text that you want to flow horizontally.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'WNEJWoK',
+  height: 680
+} %}
+</figure>
+
+## Change the orientation of text
+{% BrowserCompat 'css.properties.text-orientation' %}
+
+Use [`text-orientation`](https://developer.mozilla.org/docs/Web/CSS/text-orientation) to specify the orientation of characters in your text. The valid values for this property are `mixed` and `upright`. This property is only relevant when [`writing-mode`](#writing-mode) is set to something other than `horizontal-tb`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWMrPGV',
+  height: 660
+} %}
+</figure>
+
+## Add a shadow to text
+{% BrowserCompat 'css.properties.text-shadow' %}
+
+Use [`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) to add a shadow to your text. This property expects three lengths (`x-offset`, `y-offset`, and `blur-radius`) and a color.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'jOLxRVe',
+  height: 530
+} %}
+</figure>
+
+Check out [the `text-shadow` section of our module on Shadows](/learn/css/shadows/#text-shadow) to learn more.
+
+## Variable fonts
+
+Typically, “normal” fonts require importing different files for different versions of the typeface, e.g. bold, italic, or condensed. Variable fonts are fonts that can contain many different variants of a typeface in one file.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Roboto Flex in random combinations of Width and Weight
+  </figcaption>
+</figure>
+
+Check out [our article on Variable Fonts](/variable-fonts/) for more details.
+
+## Pseudo-elements
+
+{% Aside 'key-term' %}
+A *pseudo-element* is a part of an element that you can target via CSS keywords without having to add more HTML. Check out [our module on pseudo-elements](/learn/css/pseudo-elements) for a deep-dive into this subject!
+{% endAside %}
+
+## `::first-letter` and `::first-line` pseudo-elements
+{% BrowserCompat 'css.selectors.first-letter' %}
+
+The [`::first-letter`](https://developer.mozilla.org/docs/Web/CSS/::first-letter) and [`::first-line`](https://developer.mozilla.org/docs/Web/CSS/::first-line) pseudo-elements target a text element’s first letter and first line respectively.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'KKvRYNr',
+  height: 270
+} %}
+</figure>
+
+## `::selection` pseudo-element
+{% BrowserCompat 'css.selectors.selection' %}
+
+Use the [`::selection`](https://developer.mozilla.org/docs/Web/CSS/::selection) pseudo-element to change the appearance of user-selected text.
+
+When using this pseudo-element, only certain CSS properties can be used: `color`, `background-color`, `text-decoration`, `text-shadow`, `stroke-color`, `fill-color`, `stroke-width`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'MWvGRbx',
+  height: 390,
+  tab: 'css,result'
+} %}
+</figure>
+
+## font-variant
+{% BrowserCompat 'css.properties.font-variant' %}
+
+The [`font-variant`](https://developer.mozilla.org/docs/Web/CSS/font-variant) property is a shorthand for a number of CSS properties that let you choose font variants like `small-caps` and `slashed-zero`. The CSS properties this shorthand includes are [`font-variant-alternates`](https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates), [`font-variant-caps`](https://developer.mozilla.org/docs/Web/CSS/font-variant-caps), [`font-variant-east-asian`](https://developer.mozilla.org/docs/Web/CSS/font-variant-east-asian), [`font-variant-ligatures`](https://developer.mozilla.org/docs/Web/CSS/font-variant-ligatures), and [`font-variant-numeric`](https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric). Check out the links on each property for more details about its usage.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYEroBa',
+  height: 260
+} %}
+</figure>
+
+{% Assessment 'typography' %}
+
+## Resources
+
+* [Font best practices](/font-best-practices/) discusses importing fonts, rendering fonts, and other best practices for using fonts on the web.
+* [MDN Fundamental text and font styling](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Fundamentals).
diff --git a/src/site/content/en/learn/css/typography/typography.assess.yml b/src/site/content/en/learn/css/typography/typography.assess.yml
new file mode 100644
index 00000000000..722e57bf156
--- /dev/null
+++ b/src/site/content/en/learn/css/typography/typography.assess.yml
@@ -0,0 +1,57 @@
+setLeader: Test your knowledge of typography on the web
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,4"
+    stem: Which of the following keywords can be used as a `font-family` generic fallback?
+    options:
+      - content: "`serif`"
+        rationale: "Correct!"
+      - content: "`monospace`"
+        rationale: "Correct!"
+      - content: "`italic`"
+        rationale: "Try again. `italic` is a valid keyword for `font-style`, not `font-family`."
+      - content: "`sci-fi`"
+        rationale: "Try again. `fantasy` is a valid generic fallback for `font-family`, though."
+      - content: "`sans-serif`"
+        rationale: "Correct!"
+      - content: "`helvetica`"
+        rationale: "Try again. `\"Helvetica\"` is not a generic keyword, but instead refers to a specific font family."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which statement is used to convert the first letter of each word to uppercase? e.g. `This is a sentence.` ➡ `This Is A Sentence.`
+    options:
+      - content: "`text-capitalize: true;`"
+        rationale: "Try again."
+      - content: "`text-case: capitalize;`"
+        rationale: "Try again."
+      - content: "`text-transform: capitalize;`"
+        rationale: "Correct!"
+      - content: "`font-style: capitals;`"
+        rationale: "Try again."
+      - content: "`font-variant: capitalize;`"
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "True or False: Use `text-orientation` to align text to the left, right, or center."
+    options:
+      - content: "True"
+        rationale: "Try again. [`text-orientation`](#change-the-orientation-of-text) changes the rotation of letters in a line."
+      - content: "False"
+        rationale: "Correct! [`text-orientation`](#change-the-orientation-of-text) changes the rotation of letters in a line. Use `text-align` to align text to the left, right, or center (and [more!](#change-text-alignment))."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Which CSS property can be used to change the space between lines of text?
+    options:
+      - content: "`line-spacing`"
+        rationale: "Try again."
+      - content: "`leading`"
+        rationale: "Try again. [Leading](https://en.wikipedia.org/wiki/Leading) is the correct term for the space between lines in typography, but it's not a valid CSS property."
+      - content: "`baseline-distance`"
+        rationale: "Try again."
+      - content: "`line-height`"
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/css/z-index/index.md b/src/site/content/en/learn/css/z-index/index.md
new file mode 100644
index 00000000000..90a3e2d5b7e
--- /dev/null
+++ b/src/site/content/en/learn/css/z-index/index.md
@@ -0,0 +1,192 @@
+---
+title: Z-index and stacking contexts
+description: >
+  In this module find out how to control the order in which things layer on top of each other,
+  by using z-index and the stacking context.
+audio:
+  title: 'The CSS Podcast - 019: z-index and stacking contexts'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_019_v1.0.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-05-03
+---
+
+Say you've got a couple of elements that are absolutely positioned,
+and are supposed to be positioned on top of each other.
+You might write a bit of a HTML like this:
+
+```html
+<div class="stacked-items">
+	<div class="item-1">Item 1</div>
+	<div class="item-2">Item 2</div>
+</div>
+```
+
+But which one sits on top of the other, by default?
+To know which item would do that,
+you need to understand z-index and stacking contexts.
+
+## Z-index
+
+The [`z-index`](https://developer.mozilla.org/docs/Web/CSS/z-index)
+property explicitly sets a layer order for HTML based on the 3D space of the browser—the Z axis.
+This is the axis which shows which layers are closer to and further from you.
+The vertical axis on the web is the Y axis and the horizontal axis is the X axis.
+
+{% Img
+src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/PDglCLEK0OJY5LIHwpkI.svg",
+alt="Each axis surrounding the element",
+width="760",
+height="467" %}
+
+The `z-index` property accepts a numerical value which can be a positive or negative number.
+Elements will appear above another element if they have a higher `z-index` value.
+If no `z-index` is set on your elements
+then the default behaviour is that document source order dictates the Z axis.
+This means that elements further down the document sit on top of elements that appear before them.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'GRrMEjZ'
+} %}
+</figure>
+
+In normal flow,
+if you set a specific value for `z-index` and it isn't working,
+you need to set the element's `position` value to anything other than `static`.
+This is a common place where people struggle with `z-index`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgoRzv'
+} %}
+</figure>
+
+This isn't the case if you are in a flexbox or grid context, though,
+because you can modify the z-index of flex or grid items without adding `position: relative`.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'QWdqMOP'
+} %}
+</figure>
+
+## Negative z-index
+
+To set an element *behind* another element,
+add a negative value for `z-index`.
+
+```css
+.my-element {
+	background: rgb(232 240 254 / 0.4);
+}
+
+.my-element .child {
+	position: relative;
+	z-index: -1;
+}
+```
+
+As long as `.my-element` has the initial value for `z-index` of `auto`,
+the `.child` element will sit behind it.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpeayj',
+  height: 400
+} %}
+</figure>
+
+Add the following CSS to `.my-element`,
+and the `.child` element will not sit behind it.
+
+```css/1-2
+.my-element {
+  position: relative;
+  z-index: 0;
+  background: rgb(232 240 254 / 0.4);
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgorZy',
+  height: 400
+} %}
+</figure>
+
+Because `.my-element` now has a `position` value that's not `static`
+and a `z-index` value that's not `auto`,
+it has created a new **stacking context**.
+This means that even if you set `.child` to have a `z-index` of `-999`,
+it would still not sit behind `.my-parent`.
+
+## Stacking context
+
+A stacking context is a group of elements that have a common parent and move up and down the z axis together.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjErOXV',
+  height: 600
+} %}
+</figure>
+
+In this example,
+the first parent element has a `z-index` of `1`,
+so creates a new stacking context.
+Its child element has a `z-index` of `999`.
+Next to this parent, there is another parent element with one child.
+The parent has a `z-index` of `2` and the child element also has a `z-index` of `2`.
+Because both parents create a stacking context,
+the `z-index` of all children is based on that of their parent.
+
+The `z-index` of elements inside of a stacking context
+are always relative to the parent's current order in its own stacking context.
+
+{% Aside %}
+The `<html>` element is a stacking context itself and nothing can ever go behind it.
+You can put stuff behind the `<body>` until you create a stacking context with it.
+{% endAside %}
+
+## Creating a stacking context
+
+You don't need to apply `z-index` and `position` to create a new
+[stacking context](https://developer.mozilla.org/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
+You can create a new stacking context by adding a value for properties which create a new composite layer
+such as `opacity`, `will-change` and `transform`.
+You can
+[see a full list of properties here](https://developer.mozilla.org/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
+
+To explain what a composite layer is, imagine a web page is a canvas.
+A browser takes your HTML and CSS and uses these to work out how big to make the canvas.
+It then paints the page on this canvas.
+If an element was to change—say,
+it changes position—the browser then has to go back and re-work out what to paint.
+
+To help with performance,
+the browser creates new composite layers which are layered on top of the canvas.
+These are a bit like post-it notes:
+moving one around and changing it doesn't have a huge impact on the overall canvas.
+A new composite layer is created for elements with `opacity`,
+`transform` and `will-change` because these are very likely to change,
+so the browser makes sure that change is performant as possible by using the GPU to apply style adjustments.
+
+{% Aside %}
+You can also create a stacking context by adding a `filter` and setting `backface-visibility: hidden`.
+{% endAside %}
+
+## Resources
+
+- [Forcing layers](https://surma.dev/things/forcing-layers/)
+- [Animations Guide: Force layer creation](/animations-guide/#force)
+- [Understanding z-index](https://ishadeed.com/article/understanding-z-index/)
+
+{% Assessment 'z-index' %}
diff --git a/src/site/content/en/learn/css/z-index/z-index.assess.yml b/src/site/content/en/learn/css/z-index/z-index.assess.yml
new file mode 100644
index 00000000000..d9f3495d35a
--- /dev/null
+++ b/src/site/content/en/learn/css/z-index/z-index.assess.yml
@@ -0,0 +1,48 @@
+setLeader: Test your knowledge of z-index
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```html
+      <section>
+        <article>1</article>
+        <article>2</article>
+        <article>3</article>
+        <article>4</article>
+      </section>
+      ```
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Which article is on top by default?
+    options:
+      - content: "1"
+        rationale: "It's in the very back."
+      - content: "2"
+        rationale: "Try again!"
+      - content: "3"
+        rationale: "Try again!"
+      - content: "4"
+        rationale: "Last in the document sits on top yep!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: If z-index isn't working, what property should you inspect on your element?
+    options:
+      - content: "`display`"
+        rationale: "Not the likely property for why z-index isn't working."
+      - content: "`relative`"
+        rationale: "This is a CSS value, not a property."
+      - content: "`position`"
+        rationale: "Make sure this is set to something other than `static`."
+      - content: "`animation`"
+        rationale: "Not the likely property for why z-index isn't working."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Do flexbox and grid need `position: relative`?"
+    options:
+      - content: "Yes"
+        rationale: "These display types do not need it."
+      - content: "No"
+        rationale: "Using z-index inside a flexbox or grid layout will work
+        without `position: relative`."
diff --git a/src/site/content/en/learn/design/accessibility/accessibility.assess.yml b/src/site/content/en/learn/design/accessibility/accessibility.assess.yml
new file mode 100644
index 00000000000..a1e1d1c0bb4
--- /dev/null
+++ b/src/site/content/en/learn/design/accessibility/accessibility.assess.yml
@@ -0,0 +1,47 @@
+setLeader: Test your knowledge of accessibility
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      With CSS, a developer can overwrite a user preference like font size, for the worst?
+    options:
+      - content: "True"
+        rationale: "Simply using `body { font-size: 12px; }` is enough."
+      - content: "False"
+        rationale: "User preferences have strong influence, but don't provide full control."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1"
+    stem: |
+      To avoid overwriting a user's font size preference, use?
+    options:
+      - content: "Absolute units like `px`."
+        rationale: "These do not consider user font size preference when used."
+      - content: "Relative units like `rem`."
+        rationale: "These allow developers to build with lengths that are inclusive of user font size preferences."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      Everyone in the world uses a mouse.
+    options:
+      - content: "True"
+        rationale: "Some use their voice, a keyboard, a gamepad, a screen reader, or other ways to interact."
+      - content: "False"
+        rationale: "There are many alternatives to the popular mouse."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      An image with an empty alt attribute does what?
+    options:
+      - content: "The browser will automatically add them for the user."
+        rationale: "Not a feature of any browser."
+      - content: "Image is treated as presentational."
+        rationale: "It's assumed the image isn't important to consuming the content."
+      - content: "Reads out 'empty string' to a screen reader"
+        rationale: "This is not what happens."
+      - content: "Nothing"
+        rationale: "Definitely something happens."
diff --git a/src/site/content/en/learn/design/accessibility/index.md b/src/site/content/en/learn/design/accessibility/index.md
new file mode 100644
index 00000000000..5b9d9fdf661
--- /dev/null
+++ b/src/site/content/en/learn/design/accessibility/index.md
@@ -0,0 +1,365 @@
+---
+title: Accessibility
+description: >
+  Ensure that your website is available to everyone.
+authors:
+  - adactio
+date: 2021-12-23
+---
+
+Allowing your pages to respond to different screen sizes is just one way of making sure your website is accessible to as many people as possible. Consider some of these other factors that you should keep in mind.
+
+## Color vision deficiency
+
+Different people perceive color differently. People with protanopia don't perceive red as a distinct color. With deuteranopia, green is missing. For people with tritanopia, it's blue.
+
+Some tools can give you a general idea of how your color schemes appear to people with different kinds of color vision.
+
+[Firefox's Accessibility tab](https://developer.mozilla.org/docs/Tools/Accessibility_inspector/Simulation) includes a dropdown labeled **Simulate** with a list of options.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/4JFy0QWWiHW0x7X4aCxq.png", alt="Simulated protanopia (no red).", width="800", height="391" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/71Q8AaxD07ryv9TWf6Gd.png", alt="Simulated tritanopia (no blue)", width="800", height="391" %}
+<figcaption>
+   Viewing a website with simulations of different kinds of color vision.
+ </figcaption>
+</figure>
+
+In Chrome DevTools, the rendering tab allows you to [emulate vision deficiencies](https://developer.chrome.com/blog/new-in-devtools-83/#vision-deficiencies).
+
+Those are browser-specific tools. It's also possible to emulate different vision types at the operating system level.
+
+On the Mac, go to:
+
+1. System Preferences
+2. Accessibility
+3. Display
+4. Color Filters
+5. Enable Color Filters
+
+Select one of the options.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/eKvwhSc6RHvS9KFG7pU6.png", alt="Color filter options in system preferences.", width="780", height="602" %}
+
+In general it's not a good idea to rely purely on color to differentiate between different elements. For example, you can—and should—make your links a different color to the surrounding text. But you should also apply some other styling indicator like underlining the links or making them bold.
+
+{% Compare 'worse' %}
+```css
+a {
+  color: red;
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+a {
+  color: red;
+  font-weight: bold;
+}
+```
+{% endCompare %}
+
+## Color contrast
+
+Some color combinations can cause trouble. If there isn't enough contrast between the foreground color and background color, text becomes difficult to read. Poor color contrast is one of the most common accessibility issues on the web, but fortunately, it's one that you can catch early in the design process.
+
+Here are some tools you can use to test the contrast ratio of your text and background colors:
+
+* [tota11y](https://khan.github.io/tota11y/) is a bookmarklet you can add to your browser's toolbar.
+* [VisBug](https://github.com/GoogleChromeLabs/ProjectVisBug) is a browser extension available for all major desktop browsers.
+* [Firefox's Accessibility Inspector](https://developer.mozilla.org/docs/Tools/Accessibility_inspector) can check for issues with visual contrast.
+* You can also [discover and fix low-contrast text with Chrome DevTools](https://developers.google.com/codelabs/devtools-cvd).
+* In Microsoft's Edge browser, you can [test text-color contrast using the color picker](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/color-picker).
+
+It's a good idea to always declare `color` and `background-color` together in your CSS. Don't assume that the background color will be the browser default. People can and do change the colors used by their browser.
+
+{% Compare 'worse' %}
+```css
+body {
+  color: black;
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+body {
+  color: black;
+  background-color: white;
+}
+```
+{% endCompare %}
+
+## High contrast
+
+Some people set their operating systems to use a high-contrast mode. You can try this on your operating system.
+
+On the Mac, go to:
+
+1. System Preferences
+2. Accessibility
+3. Display
+
+Select the option to increase contrast.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/WRYeXsiJVP4nP1b8xAOr.png", alt="Increase contrast in system preferences.", width="780", height="602" %}
+
+There's a media feature to detect if someone has enabled high contrast mode. The [`prefers-contrast`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast) media feature can be queried for three values: `no-preference`, `less`, and `more`. You can use this information to adjust your site's color palette.
+{% BrowserCompat 'css.at-rules.media.prefers-contrast' %}
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'abLBaya',
+ height: 500,
+ theme: 'dark',
+ tab: 'css,result'
+} %}
+
+{% Aside %}
+[CSS custom properties](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties) are a great way of grouping color declarations. Use the `prefers-contrast` media feature to update your custom property values.
+{% endAside %}
+
+People can also set a preference in their operating system to use inverted colors.
+
+On the Mac, go to:
+
+1. System Preferences
+2. Accessibility
+3. Display
+
+Select the option to invert colors.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/pDi1fFRwChp7xpRbfqRC.png", alt="Invert colors in system preferences.", width="780", height="602" %}
+
+Make sure your website still makes sense for someone browsing with inverted colors. Watch out for box shadows—these may need adjusting when colors are inverted.
+
+## Font size
+
+Color isn't the only thing that people can adjust in their browser, they can also adjust the default font size. As their vision declines, they might adjust the default font size in their browsers or operating systems, bumping up the numbers with the passing of the years.
+
+You can respond to these settings by using relative font sizes. Avoid using units like `px`. Use relative units like `rem` or `ch` instead.
+
+Try changing the default text size setting in your browser. You can do that in your browser preferences. Or you can do it while you're visiting a web page by zooming in. Does your website still work if [the default font size is increased by 200%](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html)? How about 400%?
+
+Someone visiting your website on a desktop computer with their font size bumped up to 400% should get the same layout as someone visiting your site on a small-screen device.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/rAZIY9rw8FK3tVLseC6v.png", alt="Clearleft dot com.", width="800", height="419" %}
+<figcaption>
+   The same website viewed on a desktop device and a mobile device. The desktop browser's font size has been increased to 400%.
+ </figcaption>
+</figure>
+
+
+## Keyboard navigation
+
+Not everyone uses a mouse or a trackpad to navigate web pages. A keyboard is another way of getting around a page, with the `tab` key being particularly useful. Users can quickly move from one link or form field to the next.
+
+Links styled with the `:hover` and `:focus` [pseudo-classes,](/learn/css/pseudo-classes/) will display those styles regardless of whether someone is using a mouse, a trackpad, or a keyboard. Use the `:focus-visible` [pseudo-class](/learn/css/pseudo-classes/) to style your links for just keyboard navigation. You can make those styles extra noticeable.
+
+```css
+a:focus,
+a:hover {
+  outline: 1px dotted;
+}
+a:focus-visible {
+  outline: 3px solid;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'wvroErW',
+ height: 400,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+As the user tabs from link to link or form field to form field, those elements will be focused in the order they appear in the document structure. This should also match the visual order.
+
+Be careful with the CSS `order` property. You can use this in combination with flexbox and grid to place elements in a different visual order to their order in the HTML. That's a powerful feature but it could confuse people navigating with a keyboard.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'XWeNPeY',
+ height: 400,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+Test your web pages by using the `tab` key on your keyboard to make sure that the tabbing order makes sense.
+
+In the **Accessibility** panel of the Firefox browser's developer tools there's an option to **Show Tabbing Order**. Enabling this will overlay numbers on each focusable element.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/4JFy0QWWiHW0x7X4aCxq.png", alt="Visualizing tab order using Firefox's Accessibility Tab.", width="800", height="391" %}
+
+
+{% Aside %}
+Learn more about the problems caused by [content reordering](/content-reordering/).
+{% endAside %}
+
+## Reduced motion
+
+Animation and motion are wonderful ways to bring web designs to life. But for some people these movements can be very disorienting and even cause nausea.
+
+There's a feature query that communicates whether the user would prefer less motion. It's called [`prefers-reduced-motion`](/prefers-reduced-motion/). Include it wherever you are using CSS transitions or animations.
+{% BrowserCompat 'css.at-rules.media.prefers-reduced-motion' %}
+
+```css
+a:hover {
+  transform: scale(150%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  a {
+    transition-duration: 0.4s;
+    transition-property: transform;
+  }
+}
+```
+
+The `prefers-reduced-motion` media query is specifically for movement on the screen. If you are using transitions on an element's color that shouldn't be affected by `prefers-reduced-motion`. It's also ok to transition opacity and cross-fade. Reduced motion doesn't have to mean no animation.
+
+## Voice
+
+People experience the web differently. Not everyone is seeing your website on a screen. Assistive technologies such as screen readers convert the information output to a screen into spoken words.
+
+Screen readers work with all kinds of applications including web browsers. In order for a web browser to communicate usefully with a screen reader, there needs to be useful semantic information in the web page currently being accessed.
+
+Previously, you learned how [icon-only buttons](/learn/design/icons/) need to include an attribute to specify the button's purpose to non-sighted users. This is just one example of the importance of strong foundational HTML.
+
+## Headings
+
+Use headings like `<h1>`, `<h2>`, `<h3>`, etc. sensibly. Screen readers use these headings to generate an outline of your document which can be navigated with keyboard shortcuts.
+
+{% Compare 'worse' %}
+```html
+<div class="heading-main">Welcome to my page</div>
+<div class="heading-secondary">About me</div>
+<div class="heading-tertiary">My childhood</div>
+<div class="heading-secondary">About this website</div>
+<div class="heading-tertiary">How this site was built</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<h1>Welcome to my page</h1>
+  <h2>About me</h2>
+    <h3>My childhood</h3>
+  <h2>About this website</h2>
+    <h3>How this site was built</h3>
+```
+{% endCompare %}
+
+## Structure
+
+Use landmark elements like `<main>`, `<nav>`, `<aside>`, `<header>`, and `<footer>` to structure your page's contents. Screen-reader users can then jump straight to these landmarks.
+
+{% Compare 'worse' %}
+```html
+<div class="header">...</div>
+<div class="navigation">...</div>
+<div class="maincontent">...</div>
+<div class="sidebar">...</div>
+<div class="footer">...</div>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<header>...</header>
+<nav>...</nav>
+<main>...</main>
+<aside>...</aside>
+<footer>...</footer>
+```
+{% endCompare %}
+
+## Forms
+
+Make sure that every form field has an associated `<label>` element. You can associate a label with a form field using the `for` attribute on the `<label>` element and the corresponding `id` attribute on the form field.
+
+{% Compare 'worse' %}
+```html
+<span class="formlabel">Your name</span>
+<input type="text">
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<label for="name">Your name</label>
+<input id="name" type="text">
+```
+{% endCompare %}
+
+{% Aside %}
+For more information in accessibility and forms, see the [Accessibility module in the Learn Forms course](/learn/forms/accessibility/).
+{% endAside %}
+
+## Images
+
+Always provide a text description of images using the `alt` attribute.
+
+{% Compare 'worse' %}
+```html
+<img src="dog.jpg">
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
+```
+{% endCompare %}
+
+If the image is purely presentational, you should still include the `alt` attribute but you can give it an empty value.
+
+{% Compare 'worse' %}
+```html
+<img src="texture.png">
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<img src="texture.png" alt="">
+```
+{% endCompare %}
+
+Jake Archibald published an article on [writing great `alt` text](https://jakearchibald.com/2021/great-alt-text/).
+
+## Links
+
+Try to provide descriptive text within links. Avoid using phrases like "click here" or "more."
+
+{% Compare 'worse' %}
+```html
+<p>To find out more about our latest offers, <a href="offers.html">click here</a>.</p>
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```html
+<p>Find out more about <a href="offers.html"> our latest offers</a>.</p>
+```
+{% endCompare %}
+
+## ARIA
+
+Using sensible semantic HTML will make your web pages more accessible to assistive technologies like screen readers and also to other audio outputs like voice assistants.
+
+Some interface widgets that don't have a corresponding HTML element: carousels, tabs, accordions, and so on. Those need to be built from scratch with a combination of HTML, CSS, JavaScript, and ARIA.
+
+ARIA stands for Accessible Rich Internet Applications. Its vocabulary allows you to provide semantic information when there isn't a suitable HTML element available.
+
+If you need to create interface elements that aren't yet available as HTML elements, [familiarize yourself with ARIA](https://developer.mozilla.org/docs/Learn/Accessibility/WAI-ARIA_basics).
+
+The more bespoke functionality you add with JavaScript, the more you'll need to understand ARIA. If you stick with native HTML elements, you may not need any ARIA.
+
+If it's at all possible, test with real users of screen readers. Not only will this give you a better understanding of how they navigate the web, it will also take the guesswork out of designing with accessibility in mind.
+
+Testing with actual people is a great way of exposing any assumptions you might be making. In the next module, you'll learn about the different ways people interact with your websites—another area where it's all too easy to make assumptions.
+
+{% Assessment 'accessibility' %}
diff --git a/src/site/content/en/learn/design/conclusion/index.md b/src/site/content/en/learn/design/conclusion/index.md
new file mode 100644
index 00000000000..16ee70d0f9d
--- /dev/null
+++ b/src/site/content/en/learn/design/conclusion/index.md
@@ -0,0 +1,27 @@
+---
+title: Conclusion and next steps
+description: >
+ Further resources to help you take your next steps.
+authors:
+  - adactio
+  - rachelandrew
+  - una
+  - adamargyle
+  - cambickel
+date: 2021-11-03
+---
+
+Congratulations! You've made it to the end! We hope that you have enjoyed this overview of responsive design. For more, you can check out the following additional resources:
+
+## Additional resources
+
+- [LearnCSS](/learn/css)
+- [CSS Documentation on MDN](https://developer.mozilla.org/docs/Web/CSS)
+- [Listen to the CSS Podcast](https://thecsspodcast.libsyn.com)
+- [CSS articles on web.dev](/tags/css/)
+- [CSS-Tricks](https://css-tricks.com/tag/css/)
+- [Layout Land - Youtube](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)
+
+## Brought to you by
+
+{% include 'partials/authors-stack.njk' %}
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/design.11tydata.js b/src/site/content/en/learn/design/design.11tydata.js
new file mode 100644
index 00000000000..e474e08213b
--- /dev/null
+++ b/src/site/content/en/learn/design/design.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('design');
diff --git a/src/site/content/en/learn/design/icons/icons.assess.yml b/src/site/content/en/learn/design/icons/icons.assess.yml
new file mode 100644
index 00000000000..6712c3409b9
--- /dev/null
+++ b/src/site/content/en/learn/design/icons/icons.assess.yml
@@ -0,0 +1,28 @@
+setLeader: Test your knowledge of icons
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "SVG can handle any pixel density with one single file or `<svg>` code block."
+    options:
+      - content: "True"
+        rationale: "SVG includes how to draw the shapes and lines, at any pixel density or scale or zoom."
+      - content: "False"
+        rationale: "Unlike `.png` or `.jpg`, SVG has no need for `srcset` or a `<picture>` element."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,4"
+    stem: "SVG code that's directly in the HTML has which advantages?"
+    options:
+      - content: "Styleable from CSS"
+        rationale: "Match SVG icon shapes to buttons and brand colors."
+      - content: "No download required."
+        rationale: "All the instructions are there."
+      - content: "Lazy loaded by default."
+        rationale: "No download to be lazy about."
+      - content: "Less CPU usage."
+        rationale: "I made this up."
+      - content: "Light or dark themed without a new asset."
+        rationale: "Media queries can change inline SVG styles!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/icons/index.md b/src/site/content/en/learn/design/icons/index.md
new file mode 100644
index 00000000000..fb545408565
--- /dev/null
+++ b/src/site/content/en/learn/design/icons/index.md
@@ -0,0 +1,254 @@
+---
+title: Icons
+description: >
+  Use SVG for scalable responsive iconography.
+authors:
+  - adactio
+date: 2021-12-09
+---
+
+Most images are part of your content, but icons are part of your user interface. 
+They should scale and adapt in the same way that the text of your UI scales and adapts.
+
+## Scalable Vector Graphics
+
+When it comes to photographic imagery, there are lots of choices for the image format: JPG, WebP, and AVIF. 
+For non-photographic imagery, you have a choice between the Portable Network Graphics (PNG) format and the Scalable Vector Graphics (SVG) format.
+
+Both PNGs and SVGs are good at dealing with areas of flat color, and they both allow your images to have transparent backgrounds. 
+If you use a PNG you'll probably need to make multiple versions of your image in different sizes and use the `srcset` attribute on your `img` element to [make the image responsive](/learn/design/responsive-images/). If you use an SVG, it's responsive by default.
+
+PNGs (and JPGs, WebP, and AVIF) are bitmap images. Bitmap images store information as pixels. In an SVG, information is stored as drawing instructions. When the browser reads the SVG file the instructions are converted into pixels. Best of all, these instructions are relative. Regardless of the dimensions you use to describe lines and shapes, everything renders at just the right crispness. Instead of creating multiple SVGs of different sizes you can make one SVG that will work at all sizes. There's no need to use the `srcset` attribute.
+
+```html
+<img src="image.svg" alt="A description of the image." width="25" height="25">
+<img src="image.svg" alt="A description of the image." width="250" height="250">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'YzrKoWY',
+ height: 360,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+XML is used to write the instructions in an SVG file. This is a markup language, like HTML.
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
+  <title>Smiling face</title>
+  <circle r="20" fill="yellow" stroke="black"/>
+  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
+  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
+  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
+</svg>
+```
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/3F9ZFc3oOqhrPN6YU0Bd.svg", alt="Smiley face.", width="800", height="800" %}
+
+You can even put SVG inside HTML.
+
+```html
+<figure>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
+    <title>Smiling face</title>
+    <circle r="20" fill="yellow" stroke="black"/>
+    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
+    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
+    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
+  </svg>
+  <figcaption>
+  A description of the image.
+  </figcaption>
+</figure>
+```
+
+If you embed an SVG like that, that's one less request that the browser needs to make. There'll be no wait for the image to download because it arrives with the HTML …*in* the HTML! Also, as you'll soon find out, embedding SVGs like this gives you more control over styling them too.
+
+## Icons and text
+
+Icon images often feature simple shapes on a transparent background. SVG is ideal for icons.
+
+If you have a button or a link with text and an icon inside it, the icon is presentational. It's the text that matters. When using an `img` element, an empty `alt` attribute indicates that the image is presentational.
+
+{% Aside %}
+An empty `alt` attribute is not the same as a missing `alt` attribute. Always provide an `alt` attribute even if an image is presentational and the `alt` attribute has no content.
+{% endAside %}
+
+```html
+<button>
+<img src="hamburger.svg" alt="" width="16" height="16">
+Menu
+</button>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'qBPWzam',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+Because CSS is for presentation, you could put the icon in your CSS as a background image.
+
+```html
+<button class="menu">
+Menu
+</button>
+```
+
+```css
+.menu {
+  background-image: url(hamburger.svg);
+  background-position: 0.5em;
+  background-repeat: no-repeat;
+  background-size: 1em;
+  padding-inline-start: 2em;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'gOGYNwj',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+If you put the SVG inside your HTML, use the `aria-hidden` attribute to hide it from assistive technology.
+
+```html
+<button class="menu">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
+    <rect width="100" height="20" />
+    <rect y="30" width="100" height="20"/>
+    <rect y="60" width="100" height="20"/>
+  </svg>
+  Menu
+</button>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'bGobPwz',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+{% Aside %}
+If you use the same icon multiple times in one page, it would be inefficient to repeat the entire SVG markup each time. There's an element in SVG called [`use`](https://developer.mozilla.org/docs/Web/SVG/Element/use) which allows you to “clone” part of an SVG, even from a different SVG element.
+{% endAside %}
+
+## Standalone icons
+
+Use text inside your buttons and links if you want their purpose to be clear. You can use an icon without any text but don't assume that everyone understands the meaning of a particular icon. When in doubt, test with real users.
+
+If you decide to use an icon without any accompanying text, the icon is no longer presentational. A background image in CSS is not an appropriate way to display the icon. The icon needs to be given an accessible name in HTML.
+
+If you use an `img` element, the icon gets its accessible name from the `alt` attribute.
+
+{% Aside %}
+Usually the `alt` attribute describes the contents of the image (“Three horizontal lines.”) but with standalone icons, the `alt` attribute describes the meaning of the image (“Menu”).
+{% endAside %}
+
+```html
+<button>
+<img src="hamburger.svg" alt="Menu"" width="16" height="16">
+</button>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'MWEgMbY',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+Another option is to put the accessible name on the link or button itself and declare that the image is presentational. Use the `aria-label` attribute to provide the accessible name.
+
+```html
+<button aria-label="Menu">
+<img src="hamburger.svg" alt="" width="16" height="16">
+</button>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'VwMZJmr',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+If you put the SVG inside your HTML, use the `aria-label` attribute on the link or button to give it an accessible name and use the `aria-hidden` attribute on the icon.
+
+```html
+<button aria-label="Menu">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
+    <rect width="100" height="20" />
+    <rect y="30" width="100" height="20"/>
+    <rect y="60" width="100" height="20"/>
+  </svg>
+</button>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'OJxLebB',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+## Styling icons
+
+If you embed your SVG icons directly in your HTML you can style parts of them just like any other element in your page. You can't do that if you use an `img` element to display your icons.
+
+In the following example, the `rect` elements inside the SVG have a `fill` value of `blue` to match the styles for the button's text.
+
+```css
+button {
+ color: blue;
+}
+button rect {
+  fill: blue;
+}
+```
+
+You can apply `hover` and `focus` styles too.
+
+```css
+button:hover,
+button:focus {
+  color: red;
+}
+button:hover rect,
+button:focus rect {
+  fill: red;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'rNGBEje',
+ height: 200,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+## Resources
+
+* If you need to style SVGs that are background images in your CSS, read Una's article on [colorizing SVG backgrounds](https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/).
+* Sara Soueidan has written about [accessible icon buttons](https://www.sarasoueidan.com/blog/accessible-icon-buttons/).
+* Scott O'Hara has written about [contextually marking up accessible images and SVGs](https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html).
+* If you're using a graphic design tool to export SVGs, use [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimize the output.
+
+Icons are an important part of your site's branding. Next you'll find out how to make other aspects of your branding responsive through the power of [theming](/learn/design/theming).
+
+{% Assessment 'icons' %}
diff --git a/src/site/content/en/learn/design/index.md b/src/site/content/en/learn/design/index.md
new file mode 100644
index 00000000000..f9dc6d40cb3
--- /dev/null
+++ b/src/site/content/en/learn/design/index.md
@@ -0,0 +1,38 @@
+---
+title: Learn Responsive Design
+authors:
+  - adactio
+description: "A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone."
+date: 2021-10-14
+tags:
+  - css
+---
+
+## Welcome to Learn Responsive Design!
+
+This course takes you on a journey through the many facets of modern responsive web design. 
+The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts. 
+From there, you’ll learn about responsive images, typography, accessibility and more.
+
+Along the way you’ll find out how to make websites responsive to user preferences and device capabilities. 
+By the end, you’ll also have an understanding of what the future might hold for responsive design.
+
+Each module has demos and self-assessments for you to test your knowledge.
+
+This course is created for beginner and intermediate designers and developers. 
+A basic understanding of HTML and CSS should be enough. 
+You don’t need to know any JavaScript. 
+If you’re completely new to making websites, there's an 
+[introduction to HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) 
+and another course to help you [learn CSS](/learn/css/).
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn responsive design? 
+
+{% Aside %}
+This course was written by [Jeremy Keith](https://twitter.com/adactio), with input and review from [Rachel Andrew](https://twitter.com/rachelandrew), [Una Kravets](https://twitter.com/Una), [Adam Argyle](https://twitter.com/argyleink), and [Camden Bickel](https://twitter.com/camdenbickel).
+{% endAside %}
+
diff --git a/src/site/content/en/learn/design/interaction/index.md b/src/site/content/en/learn/design/interaction/index.md
new file mode 100644
index 00000000000..cbf61f58bc1
--- /dev/null
+++ b/src/site/content/en/learn/design/interaction/index.md
@@ -0,0 +1,277 @@
+---
+title: Interaction
+description: >
+  Prepare your pages for different input mechanisms; mouse, keyboard, and touch.
+authors:
+  - adactio
+date: 2021-12-23
+---
+
+
+Small screen devices like mobile phones often have touchscreens. Large screen devices like laptops and desktop computers often come with hardware like a mouse or a trackpad. It’s tempting to equate small screens with touch and large screens with pointers.
+
+But the reality is more nuanced. Some laptops have touch screen capabilities. Users can interact with either a touchscreen or a trackpad or both. Likewise it’s possible to use an external keyboard or mouse with a touchscreen device like a tablet.
+
+Instead of trying to infer the input mechanism from screen size, use media features in CSS.
+
+## Pointer
+
+You can test for three possible values with the `pointer` media feature: `none`, `coarse`, and `fine`.
+
+If a browser reports a `pointer` value of `none` the user might be using a keyboard to interact with your website.
+
+If a browser reports a `pointer` value of `coarse` it means the primary input mechanism isn’t very accurate. A finger on a touchscreen is a coarse pointer.
+
+If a browser reports a `pointer` value of `fine` it means the primary input mechanism is capable of fine-grained control. A mouse or stylus is a fine pointer.
+
+You can adjust the size of your interface elements to suit the `pointer` value. Try visiting [this website](https://gui-challenges.web.app/settings/dist/) in different kinds of devices to see how the interface adapts.
+
+In this example, buttons are made larger for coarse pointers:
+
+```css
+button {
+  padding: 0.5em 1em;
+}
+@media (pointer: coarse) {
+  button {
+    padding: 1em 2em;
+  }
+}
+```
+
+It’s possible to also make elements smaller for fine pointers but be careful about doing this:
+
+{% Compare 'worse' %}
+```css
+@media (pointer: fine) {
+  button {
+    padding: 0.25em 0.5em;
+  }
+}
+```
+{% endCompare %}
+
+Even if someone has a primary input mechanism capable of fine-grained control, think twice before reducing the size of interactive elements. [Fitts’s Law](https://en.wikipedia.org/wiki/Fitts's_law) still applies. A smaller target requires more concentration even with a fine pointer. A larger target area benefits everyone regardless of pointing device.
+
+## Any pointer
+
+The `pointer` media feature reports the fineness of the *primary* input mechanism. But many devices have more than one input mechanism. It’s possible that someone is interacting with your website using both a touchscreen and a mouse at the same time.
+
+The `any-pointer` differs from the `pointer` media feature in that it reports if any pointing device passes the test.
+
+An `any-pointer` value of `none` means that no pointing device is available.
+
+An `any-pointer` value of `coarse` means that at least one pointing device is not very accurate. But that might not be the primary input mechanism.
+
+An `any-pointer` value of `fine` means that at least one pointing device is capable of fine-grained control. But again, this might not be the primary input mechanism.
+
+Because the `any-pointer` media query will report a positive result if *any* of the input mechanisms pass the test, it’s possible for a browser to report a result for `any-pointer: fine` and also report a result for `any-pointer: coarse`. In that case the order of your media queries matters. The last one will take precedence.
+
+In this example, if the device has both a fine and a coarse input mechanism, the coarse styles are applied.
+
+```css
+@media (any-pointer: fine) {
+  button {
+    padding: 0.5em 1em;
+  }
+}
+@media (any-pointer: coarse) {
+  button {
+    padding: 1em 2em;
+  }
+}
+```
+
+## Hover
+
+The `hover` media feature reports on whether the primary input mechanism can hover over elements. This usually means there’s some kind of cursor on the screen being controlled by a mouse or a trackpad.
+
+Unlike the `pointer` media feature which differentiates between fine and coarse pointers, the `hover` media feature is binary. If the primary input device is capable of hovering over elements it will report a value of `hover`. Otherwise the value is `none`.
+
+In this example, some supplementary icon is available on hover but only if the primary input device is capable of hovering over an element.
+
+```css
+button .extra {
+  visibility: visible;
+}
+@media (hover: hover) {
+  button .extra {
+    visibility: hidden;
+  }
+  button:hover .extra {
+    visibility: visible;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'VwMrYav',
+ height: 200,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+If you use your mouse to hover over that button, the icon will appear. But if you use your keyboard to tab to the button, the icon remains invisible. When you use the keyboard, you’re focusing rather than hovering. A desktop device with a mouse attached will report that the primary input mechanism is capable of hovering, which is true. But anyone using a keyboard while a mouse is attached won’t get the benefit of the `:hover` styles. So it’s a good idea to combine `:hover` and `:focus` styles to cover both interactions.
+
+```css/7-7
+button .extra {
+  visibility: visible;
+}
+@media (hover: hover) {
+  button .extra {
+    visibility: hidden;
+  }
+  button:is(:hover, :focus) .extra {
+    visibility: visible;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'LYzOEZE',
+ height: 200,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+Even if the primary input device is capable of hovering over elements, be careful about hiding information behind a hover interaction. The information becomes less discoverable. Don’t use hover to hide important information or an important interface element.
+
+## Any hover
+
+The `hover` media query only reports on the *primary* input mechanism. Some devices have multiple input mechanisms: touchscreen, mouse, keyboard, trackpad.
+
+Just as `any-pointer` reports on any of the input mechanisms, `any-hover` will be true if any of the available input mechanisms are capable of hovering over elements.
+
+If you decided to reverse the logic in the previous example, you could make the hover styles the default and then remove them if `any-hover` has a value of `none`.
+
+```css
+button .extra {
+  visibility: hidden;
+}
+button:hover .extra,
+button:focus .extra {
+  visibility: visible;
+}
+@media (any-hover: none) {
+  button .extra {
+    visibility: visible;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'Bawmyzd',
+ height: 200,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+On a device that has no input mechanism capable of hovering, the extra icon is always visible.
+
+## Virtual keyboards
+
+People use cursors and fingers to explore interfaces but when it comes time to enter information, they need a keyboard. That’s fine if there’s a physical keyboard attached to their device, but if they’re using a touchscreen device it’s a little more complicated. These devices provide on-screen virtual keyboards.
+
+### Input types
+
+Unlike a physical keyboard, virtual keyboards can be tailored to match the expected input. If you provide information about the expected input, devices can serve up the most appropriate virtual keyboard.
+
+[HTML5 input types](https://developer.mozilla.org/docs/Learn/Forms/HTML5_input_types) are a great way of describing your `input` elements. The `type` attribute accepts values such as `email`, `number`, `tel`, `url`, and more.
+
+```html
+  <label for="email">Email</label>
+  <input type="email" id="email">
+```
+
+```html
+  <label for="number">Number</label>
+  <input type="number" id="number">
+```
+
+```html
+  <label for="tel">Tel</label>
+  <input type="tel" id="tel">
+```
+
+```html
+  <label for="url">URL</label>
+  <input type="url" id="url">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'zYEPxBX',
+ height: 400,
+ theme: 'dark',
+ tab: 'html, result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/xdbqHZ1fp2O8FpwXWQAH.mp4", controls=true, loop=true %}
+
+### Input modes
+{% BrowserCompat 'html.global_attributes.inputmode' %}
+
+[The `inputmode` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) gives you fine-grained control over virtual keyboards. For example, whereas there’s one `input` `type` with a value of `number`, you can use the `inputmode` attribute to differentiate between whole numbers and decimals.
+
+If you’re asking for a whole number, like somebody’s age, use `inputmode="numeric"`.
+
+```html
+<label for="age">Age</label>
+<input type="number" id="age" inputmode="numeric">
+```
+
+If you’re asking for a number that includes decimal places, like a price, use `inputmode="decimal"`.
+
+```html
+<label for="price">Price</label>
+<input type="number" id="price" inputmode="decimal">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'mdBqyrO',
+ height: 300,
+ theme: 'dark',
+ tab: 'html, result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/gr0tQXIZDgRNFcExwN8W.mp4", controls=true, loop=true %}
+
+### Autocomplete
+{% BrowserCompat 'html.global_attributes.autocomplete' %}
+
+Nobody likes filling in forms. As a designer, you can improve the experience for your users by enabling them to automatically fill in form fields. [The `autocomplete` attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) provides you with a host of options for improving contact forms, log-in forms, and checkout forms.
+
+```html
+<label for="name">Name</label>
+<input type="text" id="name" autocomplete="name">
+```
+
+```html
+<label for="country">Country</label>
+<input type="text" id="country" autocomplete="country">
+```
+
+```html
+<label for="email">Email</label>
+<input type="email" id="email" autocomplete="email">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'oNGogYX',
+ height: 400,
+ theme: 'dark',
+ tab: 'html, result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/6CvIrXjmzMbXX4CNuzCe.mp4", controls=true, loop=true %}
+
+These HTML attributes—`type`, `inputmode`, and `autocomplete`—are small additions to your form fields, but they can make a big difference to the user experience. By anticipating and responding to your user’s device capabilities, you are empowering your users. For more in-depth information, there’s a course dedicated to helping you [learn forms](/learn/forms/).
+
+Next up in this course, it’s time to examine some [common interface patterns](/learn/design/ui-patterns/).
+
+{% Assessment 'interaction' %}
diff --git a/src/site/content/en/learn/design/interaction/interaction.assess.yml b/src/site/content/en/learn/design/interaction/interaction.assess.yml
new file mode 100644
index 00000000000..eed6dc4d5b1
--- /dev/null
+++ b/src/site/content/en/learn/design/interaction/interaction.assess.yml
@@ -0,0 +1,42 @@
+setLeader: Test your knowledge of interactions
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      Which feature should you use rather than trying to infer a user's input type from screen size?
+    options:
+      - content: "CSS media features"
+        rationale: "Like `@media (pointer: coarse)` or `@media (-any-pointer: coarse)`"
+      - content: "Ask the user with JavaScript's `prompt()`"
+        rationale: "Not ideal to ask directly."
+      - content: "CSS media type `handheld`"
+        rationale: "This has been deprecated in Media Queries 4."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: |
+      What is the difference between `@media (pointer)` and `@media (any-pointer)`?
+    options:
+      - content: "Any pointer includes things like your finger as a pointer."
+        rationale: "Pointer already includes touch as an input type."
+      - content: "Pointers don't include things like a mouse."
+        rationale: "Pointers do include a mouse as an input device."
+      - content: "Any pointer will report true when additional, non-primary inputs, like a stylus, pass the test."
+        rationale: "`any-pointer` queries all device input types for any match."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: |
+      Which input types show a more appropriate virtual keyboard for users?
+    options:
+      - content: "`type=\"url\"`"
+        rationale: "Keyboard will offer buttons to support typing URLs."
+      - content: "`type=\"tel\"`"
+        rationale: "Keyboard will offer buttons to support typing phone numbers."
+      - content: "`type=\"number\"`"
+        rationale: "Keyboard will offer buttons to support typing only numbers."
+      - content: "`type=\"email\"`"
+        rationale: "Keyboard will offer buttons to support typing email addresses."
+  
diff --git a/src/site/content/en/learn/design/internationalization/index.md b/src/site/content/en/learn/design/internationalization/index.md
new file mode 100644
index 00000000000..b3bed621fe7
--- /dev/null
+++ b/src/site/content/en/learn/design/internationalization/index.md
@@ -0,0 +1,198 @@
+---
+title: Internationalization
+description: >
+  Prepare your designs for different languages and writing modes.
+authors:
+  - adactio
+date: 2021-11-03
+---
+
+The World Wide Web is available to everyone in the world—it's right there in the name! 
+That means that your website is potentially available to anyone who has access to the internet, 
+regardless of where they are, what device they're using, or what languages they speak.
+
+The goal of responsive design is to make your content available to everyone. 
+Applying that same philosophy to human languages is the driving force behind internationalization—preparing your content and designs for an international audience.
+
+## Logical properties
+
+English is written from left to right and top to bottom, 
+but not all languages are written this way. 
+Some languages like Arabic and Hebrew read from right to left, 
+and some Japanese typefaces read vertically instead of horizontally. 
+To accommodate these writing modes, 
+logical properties were introduced in CSS.
+
+If you write CSS, you may have used directional keywords like "left", "right", "top", and "bottom." 
+Those keywords refer to the physical layout of the user's device.
+
+[Logical properties](/learn/css/logical-properties/), on the other hand, 
+refer to the edges of a box as they relate to the flow of content. 
+If the writing mode changes, CSS written with logical properties will update accordingly. 
+That's not the case with directional properties.
+
+Whereas the directional property `margin-left` always refers to the margin on the left side of a content box, 
+the logical property `margin-inline-start` refers to the margin on the left side of a content box in a left-to-right language, 
+and the margin on the right side of a content box in a right-to-left language.
+
+In order for your designs to adapt to different writing modes, avoid directional properties. Use logical properties instead.
+
+{% Compare 'worse' %}
+```css
+.byline {
+  text-align: right;
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+.byline {
+  text-align: end;
+}
+```
+{% endCompare %}
+
+When CSS has a specific directional value like `left` or `right`, 
+there's a corresponding logical property. Where once we had `margin-left` now we also have `margin-inline-start`.
+
+In a language like English where text flows from left to right, 
+`inline-start` corresponds to "left" and `inline-end` corresponds to "right".
+
+Likewise, in a language like English where the text is written from top to bottom, 
+`block-start` corresponds to "top" and `block-end` corresponds to "bottom."
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/9EcUvMxy9T10EzY4U95b.webp", 
+alt="Latin, Hebrew and Japanese are shown rendering placeholder text within a device frame. Arrows and colors follow the text to help associate the 2 directions of block and inline.", width="800", height="577" %}
+
+If you use logical properties in your CSS, you can use the same stylesheet for translations of your pages. 
+Even if your pages are translated into languages written from right to left or bottom to top, your design will adjust accordingly. 
+You don't need to make separate designs for each language. 
+By using logical properties, your design will respond to every writing mode. 
+That means your design can reach more people without you having to spend time making separate designs for every language.
+
+Modern CSS layout techniques like [grid](/learn/css/grid) and [flexbox](/learn/css/flexbox) use logical properties by default. 
+If you think in terms of `inline-start` and `block-start` instead of `left` and `top` 
+then you'll find these modern techniques easier to understand.
+
+Take a common pattern like [an icon next to some text](/learn/css/logical-properties/#solving-the-icon-issue) or a label next to a form field. 
+Instead of thinking "the label should have a margin on the right," think "the label should have a margin on the end of its inline axis."
+
+{% Compare 'worse' %}
+```css
+label {
+  margin-right: 0.5em;
+}
+```
+{% endCompare %}
+
+{% Compare 'better' %}
+```css
+label {
+  margin-inline-end: 0.5em;
+}
+```
+{% endCompare %}
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'gOxXOLK',
+ height: 300,
+ theme: 'dark',
+ tab: 'css,result'
+} %}
+
+If that page is translated into a right-to-left language, 
+the styles won't need to be updated. 
+You can mimic the effect of seeing your pages in a right-to-left language by using the `dir` attribute on your `html` element. 
+A value of `ltr` means "left to right." A value of "rtl" means "right to left."
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'mdMqdOx',
+ height: 300,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+If you'd like to experiment with all the permutations of document directions (the block axis) and writing modes (the inline axis), 
+here's [an interactive demonstration](https://codepen.io/argyleink/pen/vYNwbgM).
+
+{% Codepen {
+ user: 'argyleink',
+ id: 'vYNwbgM',
+ height: 800,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Identify page language
+
+It's a good idea to identify the language of your page by using the `lang` attribute on the `html` element.
+
+```html
+<html lang="en">
+```
+
+That example is for a page in English. You can be even more specific. Here's how you declare that a page is using US English:
+
+```html
+<html lang="en-us">
+```
+
+Declaring the language of your document is useful for search engines. 
+It's also useful for assistive technologies like screen readers and voice assistants. 
+By providing language metadata you're helping these kinds of speech synthesizers pronounce your content correctly.
+
+The `lang` attribute can go on any HTML element, not just `html`. If you switch languages in your web page, indicate that change. 
+In this case, one word is in German:
+
+```html
+<p>I felt some <span lang="de">schadenfreude</span>.</p>
+```
+
+## Identify a linked document's language
+
+There's another attribute called `hreflang` which you can use on links. 
+The `hreflang` takes the same language code notation as the `lang` attribute and describes the linked document's language. 
+If there's a translation of your entire page available in German, link to it like this:
+
+```html
+<a href="/path/to/german/version" hreflang="de">German version</a>
+```
+
+If you use text in German to describe the link to the German version, use both `hreflang` and `lang`. 
+Here, the text "Deutsche Version" is marked up as being in the German language, and the destination link is also marked up as being in German:
+
+```html
+<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
+```
+
+You can also use the `hreflang` attribute on the `link` element. This goes in the `head` of your document:
+
+```html
+<link href="/path/to/german/version" rel="alternate" hreflang="de">
+```
+But unlike the `lang` attribute, which can go on any element, `hreflang` can only be applied to `a` and `link` elements.
+
+## Consider internationalization in your design
+
+When you're designing websites that will be translated into other languages and writing modes, think about these factors:
+
+* Some languages, like German, have long words in common usage. Your interface needs to adapt to these words so avoid designing narrow columns. You can also [use CSS to introduce hyphens](https://developer.mozilla.org/docs/Web/CSS/hyphens).
+* Make sure your `line-height` values can accommodate characters like accents and other diacritics. Lines of text that look fine in English might overlap in a different language.
+* If you're using a web font, make sure it has a range of characters broad enough to cover the languages you'll be translating into.
+* Don't create images that have text in them. If you do, you'll have to create separate images for each language. Instead, separate the text and the image, and use CSS to overlay the text on the image.
+
+## Think internationally
+
+Attributes like `lang` and `hreflang` make your HTML more meaningful for internationalization. 
+Likewise, logical properties make your CSS more adaptable.
+
+If you're used to thinking in terms of `top`, `bottom`, `left`, and `right`, 
+it might be hard to start thinking of `block start`, `block end`, `inline start` and `inline end` instead. 
+But it's worth it. Logical properties are key to creating truly responsive layouts.
+
+{% Assessment 'internationalization' %}
+
+Next, you'll learn how to approach page-level layouts, also known as [macro layouts](/learn/design/macro-layouts).
diff --git a/src/site/content/en/learn/design/internationalization/internationalization.assess.yml b/src/site/content/en/learn/design/internationalization/internationalization.assess.yml
new file mode 100644
index 00000000000..f1ed7839451
--- /dev/null
+++ b/src/site/content/en/learn/design/internationalization/internationalization.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of internationalization.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: In English, the physical `right` side of a box, is logically which side?
+    options:
+      - content: "`block-start`"
+        rationale: "Try again! In English this is `top`"
+      - content: "`block-end`"
+        rationale: "Try again! In English this is `bottom`"
+      - content: "`inline-start`"
+        rationale: "Try again! In English this is `left`"
+      - content: "`inline-end`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which attribute should you add to your HTML to make it more meaningful for internationalization?
+    options:
+      - content: "`english`"
+        rationale: "Try again!"
+      - content: "`lang`"
+        rationale: "🎉 This signals to the browsers which language the document is in, which assists in setting the writing mode, document direction and translations."
+      - content: "`language`"
+        rationale: "Try again!"
+      - content: "`i18n`"
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/design/intro/index.md b/src/site/content/en/learn/design/intro/index.md
new file mode 100644
index 00000000000..638dab4091d
--- /dev/null
+++ b/src/site/content/en/learn/design/intro/index.md
@@ -0,0 +1,246 @@
+---
+title: Introduction
+description: >
+  Find out where responsive design came from.
+authors:
+  - adactio
+date: 2021-11-03
+---
+
+Right from the start,
+the World Wide Web was designed to be agnostic.
+It doesn't matter what hardware you've got.
+It doesn't matter what operating system your device is running.
+As long as you can connect to the internet, the World Wide Web is accessible to you.
+
+In the early days of the web, most people were using desktop computers.
+These days the web is available on desktops, laptops, tablets, foldable phones, fridges, and cars.
+People rightly expect that websites will look good no matter what device they're using.
+Responsive design makes this possible.
+
+Responsive design isn't the first approach to designing websites.
+In the years before responsive design, web designers and developers tried many different techniques.
+
+## Fixed-width design
+
+In the early 1990s, when the web was first becoming popular,
+most monitors had screen dimensions of 640 pixels wide by 480 pixels tall.
+These were convex cathode ray tubes,
+not like the flat liquid crystal displays we have now.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/0a8vHe4LgChVZvaZQfYs.png",
+alt="The Microsoft website with two simple columns of text plus a navbar.",
+width="640", height="480" %}
+  <figcaption>The Microsoft website in the late 90s designed for a width of 640 pixels. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+In the formative days of early web design,
+it was a safe bet to design web pages with a width of 640 pixels.
+But while other technologies like phones and cameras were miniaturizing,
+screens were getting bigger (and eventually, flatter).
+Before long, most screens had dimensions of 800 by 600 pixels.
+Web designs changed accordingly. Designers and developers started assuming that 800 pixels was a safe default.
+
+<figure>
+  {% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/C88van0yWyvbz5l746pB.png", alt="The Microsoft website using a three-column, mostly text-based design.", width="800", height="600" %}
+  <figcaption>The Microsoft website in the learly 2000s designed for a width of 800 pixels. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+Then the screens got bigger again. 1024 by 768 became the default.
+It felt like an arms race between web designers and hardware manufacturers.
+
+​​<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/nuHSqBVgInTvLti73Qz2.png", alt="The Microsoft website with a more complex design using images as well as text.", width="800", height="600" %}
+<figcaption>The Microsoft website in the mid 2000s designed for a width of 1024 pixels. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+Whether it was 640, 800, or 1024 pixels,
+choosing one specific width to design for was called fixed-width design.
+
+If you specify a fixed width for your layout,
+then your layout will only look good at that specific width.
+If a visitor to your site has a wider screen than the width you have chosen, then there'll be wasted space on the screen.
+You can center the content of your pages to distribute that space more evenly
+(instead of having empty space on one side) but you still wouldn't be taking full advantage of the available space.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/t0Zd1eGEJeeqMO8ItsqK.png", alt="A narrow layour with a lot of white space around it.", width="800", height="320" %}
+<figcaption>The Yahoo website from the early 2000s as experienced in a browser that's wider than the site's 800 pixel wide design. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+Similarly, if a visitor arrives with a narrower screen than the width you've chosen,
+then your content won't fit horizontally.
+The browser generates a crawlbar—the horizontal equivalent of a scrollbar—and the user has to move the whole page left and right to see all the content.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/bnh7fDiGjFhdBHTD5CJ8.png", alt="A website that appears cut-off to the right due to being too wide for the viewport.", width="420", height="640" %}
+<figcaption>The Yahoo website from the early 2000s as experienced in a browser that's narrower than the site's 800 pixel wide design. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'RwZjwoQ',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Liquid layouts
+
+While the majority of designers used fixed-width layouts, some chose to make their layouts flexible.
+Instead of using fixed widths for your layouts you could make a flexible layout using percentages for your column widths.
+These designs work in more situations than a fixed-width layout that only looks right at one specific size.
+
+These were called liquid layouts.
+But while a liquid layout will look good across a wide range of widths, it will begin to worsen at the extremes.
+On a wide screen the layout looks stretched.
+On a narrow screen the layout looks squashed. Both scenarios aren't ideal.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/oBAbgP2JCt2zVENHVCnc.png", alt="A layout that is squashed into a narrow window.", width="420", height="640" %}
+<figcaption>Wikipedia's liquid layout from the mid 2000s as experienced in a narrow browser window. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+​​
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/zRBSmS1xCgYPTueUBMd9.png", alt="A layout stretched horizontally with very long line lengths.", width="800", height="320" %}
+<figcaption>Wikipedia's liquid layout from the mid 2000s as experienced in a wide browser window. Screenshot from <a href="https://archive.org">archive.org</a></figcaption>
+</figure>
+
+You can mitigate these problems by using `min-width` and `max-width` for your layout.
+But then at any size below the minimum width or above the maximum width you've got the same issues you'd have with a fixed-width layout.
+On a wide screen there'd be unused space going to waste.
+On a narrow screen, the user would have to move the whole page left and right to see everything.
+
+<figure>
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'YzxEzpE',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+<figcaption>Open <a href="https://codepen.io/web-dot-dev/pen/YzxEzpE">the liquid layout example</a>
+in a new browser window to see how changing the size of the window stretches the design.</figcaption>
+</figure>
+
+The word _liquid_ is just one of the terms used to describe this kind of layout.
+These kinds of designs were also called fluid layouts or flexible layouts.
+The terminology was as fluid as the technique.
+
+## Small screens
+
+In the 21st century, the web continued to get bigger and bigger.
+So did monitors. But new screens arrived that were smaller than any desktop device.
+With the arrival of mobile phones with fully-featured web browsers, designers faced a dilemma.
+How could they ensure their designs would look good on a desktop computer and a mobile phone?
+They needed a way of styling their content for screens as small as 240 pixels wide and as large as thousands of pixels wide.
+
+## Separate sites
+
+One option is to make a separate subdomain for mobile visitors.
+But then you have to maintain two separate codebases and designs.
+And in order to redirect visitors on mobile devices, you'd need to do
+[user-agent sniffing](https://en.wikipedia.org/wiki/Browser_sniffing),
+which can be unreliable and easily spoofed.
+Chrome will be deprecating its user-agent string for privacy reasons.
+Also, there's no clear line between mobile and not-mobile. Which site do you send tablet devices to?
+
+## Adaptive layouts
+
+Instead of having separate sites on different subdomains,
+you could have a single site with two or three fixed-width layouts.
+
+When media queries first arrived in CSS, they opened the door to making layouts more flexible.
+But many developers were still most comfortable making fixed-width layouts.
+One technique involved switching between a handful of fixed-width layouts at specified widths.
+Some people call this an adaptive design.
+
+Adaptive design allowed designers to provide layouts that looked good at a few different sizes,
+but the design never looked quite right when viewed between those sizes.
+The problem of excess space persisted although it wasn't as bad as in a fixed-width layout.
+
+Using CSS media queries, you can give people the layout that's closest to their browser width.
+But given the variety of device sizes, chances are the layout will look less than perfect for most people.
+
+<figure>
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'oNeoNYw',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+<figcaption>Open <a href="https://codepen.io/web-dot-dev/pen/oNeoNYw">the adaptive layout example</a>
+in a new browser window to see how changing the size of the window causes the design to jump between layouts.</figcaption>
+</figure>
+
+## Responsive web design
+
+If adaptive layouts are a mashup of media queries and fixed-width layouts, responsive web design is a mashup of media queries and liquid layouts.
+
+<figure>
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'JjyOjbE',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+<figcaption>Open <a href="https://codepen.io/web-dot-dev/pen/JjyOjbE">the responsive design example</a>
+in a new browser window to see how changing the size of the window causes the design to fluidly change layout.</figcaption>
+</figure>
+
+The term was coined by [Ethan Marcotte](https://ethanmarcotte.com/) in
+[an article in A List Apart](https://alistapart.com/article/responsive-web-design/) in 2010.
+
+Ethan defined three criteria for responsive design:
+
+1. Fluid grids
+2. Fluid media
+3. Media queries
+
+The layout and images of a responsive site would look good on any device. But there was one problem.
+
+## A `meta` element for `viewport`
+
+Browsers on mobile phones had to deal with websites that were designed with fixed-width layouts for wider screens.
+By default mobile browsers assumed that 980 pixels was the width that people were designing for (and they weren't wrong).
+So even if you used a liquid layout,
+the browser would apply a width of 980 pixels and then scale the rendered web page down to the actual width of the screen.
+
+If you're using responsive design you need to tell the browser not to do that scaling.
+You can do that with a `meta` element in the `head` of the web page:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+There are two values, separated by commas.
+The first one is `width=device-width`.
+This tells the browser to assume the width of the website is the same as the width of the device
+(instead of assuming the width of the website is 980 pixels).
+The second value is `initial-scale=1`.
+This tells the browser how much or how little scaling to do.
+With a responsive design, you don't want the browser to do any scaling at all.
+
+<figure>
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/HahSW2IXIkGux7cMCMpE.png", alt="Images of two mobile phones containing text, one appearing zoomed out due to not having the meta tag in place.", width="800", height="748" %}
+  <figcaption>The phone on the left shows how the layout looks before the meta tag is in place, when compared to the layout on the right.</figcaption>
+</figure>
+
+With that `meta` element in place, your web pages are ready to be responsive.
+
+## Modern responsive design
+
+Today we have the ability to make websites that are responsive in ways far beyond viewport sizes.
+Media features give developers access to user preferences and enable customized experiences.
+Container queries enable components to own their own responsive information.
+The `picture` element empowers designers to make art-direction decisions based on screen ratios.
+
+{% Assessment 'intro' %}
+
+Responsive design is an exciting, growing world of possibilities.
+In the rest of this course, you'll learn about these technologies and how to use them to create beautiful,
+responsive websites for everyone.
diff --git a/src/site/content/en/learn/design/intro/intro.assess.yml b/src/site/content/en/learn/design/intro/intro.assess.yml
new file mode 100644
index 00000000000..830ab388633
--- /dev/null
+++ b/src/site/content/en/learn/design/intro/intro.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of responsive web design
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: In 2021, it's a safe bet to design web pages at a fixed width?
+    options:
+      - content: "true"
+        rationale: "It's unsafe to bet on fixed width design in 2021."
+      - content: "false"
+        rationale: "🎉 Correct! The number of possible screen sizes is too great to assume visitors will come from one size."
+  - type: multiple-choice
+    cardinality: "2+"
+    correctAnswers: "0,2"
+    stem: Liquid layouts generally struggle at which kind of screen sizes?
+    options:
+      - content: "Narrow screens"
+        rationale: "🎉 Correct! The extreme size of a narrow display can make liquid layouts appear squished."
+      - content: "Average screens"
+        rationale: "Try again. Liquid layouts do well on average sized screens."
+      - content: "Wide screens"
+        rationale: "🎉 The extreme size of a wide, or even ultrawide, display can make liquid layouts appear stretches out to uncomfortable reading lengths."
+      - content: "Short screens"
+        rationale: "Try again. Short screens generally do not struggle to support liquid layouts."
+      - content: "Tall screens"
+        rationale: "Try again. Tall screens generally do not struggle to support liquid layouts."
+      - content: "All screens"
+        rationale: "Try again. Liquid layouts are a great choice for many screen sizes."
+  - type: multiple-choice
+    cardinality: "3+"
+    correctAnswers: "1,3,5"
+    stem: The original three criteria for responsive design are?
+    options:
+      - content: "Fluid typography"
+        rationale: "Try again! Fluid typography was not one of the initial criteria."
+      - content: "Fluid grids"
+        rationale: "🎉 Correct!"
+      - content: "Adaptive grids"
+        rationale: "Try again! An adaptive grid changes based on set viewport sizes."
+      - content: "Fluid media"
+        rationale: "🎉 Correct!"
+      - content: "Fixed width design"
+        rationale: "Try again! Fixed width designs refers to a design with a set, unresponsive width."
+      - content: "Media Queries"
+        rationale: "🎉 Correct!"
diff --git a/src/site/content/en/learn/design/macro-layouts/index.md b/src/site/content/en/learn/design/macro-layouts/index.md
new file mode 100644
index 00000000000..9f55c39b6ed
--- /dev/null
+++ b/src/site/content/en/learn/design/macro-layouts/index.md
@@ -0,0 +1,171 @@
+---
+title: Macro layouts
+description: >
+  Design page layouts using a choice of CSS techniques.
+authors:
+  - adactio
+date: 2021-11-03
+---
+
+Macro layouts describe the larger, page-wide organization of your interface. 
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/HoOnH9yMrSY6MhQdRNRZ.jpeg", 
+alt="A wireframe of a two column layout, next to the same layout as one column for a narrow view.", width="800", height="501" %}
+
+Before applying any layout, 
+you should make sure that the flow of your content makes sense. 
+This single column default ordering is what smaller screens will get.
+
+```html
+<body>
+  <header>…</header>
+  <main>
+    <article>…</article>
+    <aside>…</aside>
+  </main>
+  <footer>…</footer>
+</body>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'oNeePOX',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+When you arrange these individual page-level components, 
+you're designing a macro layout: a high-level view of your page. 
+Using media queries, you can supply rules in CSS describing how this view should adjust to different screen sizes.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/3KENjI9FiNARctTiKDak.mp4", autoplay=true, controls=true, loop=true %}
+
+## Grid
+
+[CSS grid](/learn/css/grid/) is an excellent tool for applying a layout to your page. 
+In the example above,  say you want a two-column layout once there's enough screen width available. 
+To apply this two-column layout once the browser is wide enough, 
+use a media query to define the grid styles above a specified breakpoint.
+
+```css
+@media (min-width: 45em) {
+  main {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+  }
+}
+```
+{% Aside %}
+While it would make more sense to specify `min-inline-size` instead of `min-width`, 
+logical properties don't work in media queries yet.
+{% endAside %}
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'vYJJzMK',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Flexbox
+
+For this specific layout, you could also use [flexbox](/learn/css/flexbox). 
+The styles would look like this:
+
+```css
+@media (min-width: 45em) {
+  main {
+    display: flex;
+    flex-direction: row;
+  }
+
+  main article {
+    flex: 2;
+  }
+
+  main aside {
+    flex: 1;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'gOxxdym',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+However, the flexbox version requires more CSS. 
+Each column has a separate rule to describe how much space it should take up. 
+In the grid example, that same information is encapsulated in one rule for the containing element.
+
+## Do you need a media query?
+
+You might not always need to use a media query. 
+Media queries work fine when you're applying changes to a few elements, 
+but if the layout needs to be updated a lot, your media queries could get out of hand with lots of breakpoints.
+
+Say you've got a page full of card components. 
+The cards are never wider than `15em`, and you want to put as many cards on one line as will fit. 
+You could write media queries with breakpoints of `30em`, `45em`, `60em`, 
+and so on, but that's quite tedious and difficult to maintain.
+
+Instead, you can apply rules so that the cards themselves automatically take up the right amount of space.
+
+```css
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+  grid-gap: 1em;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'QWMMVPm',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+You can achieve a similar layout with flexbox. 
+In this case, if there are not enough cards to fill the final row, 
+the remaining cards will stretch to fill the available space rather than lining up in columns. 
+If you want to line up rows and columns, then use grid.
+
+```css
+.cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+.cards .card {
+  flex-basis: 15em;
+  flex-grow: 1;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'abyyaMg',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+By applying some smart rules in flexbox or grid, 
+it's possible to design dynamic macro layouts with minimal CSS and without any media queries. 
+That's less work for you—you're making the browser do the calculations instead. 
+To see some examples of modern CSS layouts that are fluid without requiring media queries, see 
+[1linelayouts.com](https://1linelayouts.glitch.me/).
+
+{% Assessment 'macro-layouts' %}
+
+Now that you've got some ideas for page-level macro layouts, 
+turn your attention to the components within the page. This is the realm of 
+[micro layouts](/learn/design/micro-layouts).
diff --git a/src/site/content/en/learn/design/macro-layouts/macro-layouts.assess.yml b/src/site/content/en/learn/design/macro-layouts/macro-layouts.assess.yml
new file mode 100644
index 00000000000..cfa6f5e111e
--- /dev/null
+++ b/src/site/content/en/learn/design/macro-layouts/macro-layouts.assess.yml
@@ -0,0 +1,25 @@
+setLeader: Test your knowledge of macro layouts.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Which sentence best describes macro layouts?
+    options:
+      - content: "Layouts that contain other layouts."
+        rationale: "Try again! Most layouts contain other layouts."
+      - content: "When a design uses flexbox or grid."
+        rationale: "Try again! Neither flexbox or grid have anything specific to macro layouts."
+      - content: "Low level layouts which cover small amounts of the screen."
+        rationale: "Try again!"
+      - content: "High level layouts which cover large amounts of the screen."
+        rationale: "🎉 Macro layouts are foundational layouts for a page, spanning large amounts of visual area, and often are adjusted with page size media queries."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Macro layouts always use media queries to adapt to different screen sizes?
+    options:
+      - content: "True"
+        rationale: "Try again! A macro layout is not defined by it's usage of media queries."
+      - content: "False"
+        rationale: "🎉 Macro layouts may adapt to fit content, fill available space, and more, without a media query."
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/media-features/index.md b/src/site/content/en/learn/design/media-features/index.md
new file mode 100644
index 00000000000..691fde2ecd6
--- /dev/null
+++ b/src/site/content/en/learn/design/media-features/index.md
@@ -0,0 +1,256 @@
+---
+title: Media features
+description: >
+  A round-up of all the ways that media features let you respond to devices and preferences.
+authors:
+  - adactio
+date: 2021-12-23
+---
+
+Responsive design wouldn't be possible without media queries. Before media queries there was no way of knowing what kind of device people were using to visit your website. Designers had to make assumptions. Those assumptions were encoded into fixed-width designs or liquid layouts.
+
+That all changed with the introduction of [media queries](/learn/design/media-queries/). For the first time designers could meet people halfway. Designers could adjust their layouts to respond to people's devices.
+
+Remember, a media query comprises an optional media type and a mandatory media feature. There hasn't been much change in media types over the years. There are still just four possible values:
+
+```css
+@media all
+@media screen
+@media print
+@media speech
+```
+
+[Media features](https://developer.mozilla.org/docs/Web/CSS/@media#media_features), on the other hand, have expanded greatly. Designers now can meet users beyond halfway, adapting designs to fit far more than just screen size.
+{% BrowserCompat 'css.at-rules.media' %}
+
+## Viewport dimensions
+
+By far the most popular media queries on the web are the ones dealing with viewport width. But even here, you're presented with a choice. You can use the `max-width` media feature to apply styles below a certain width, or you can use the `min-width` media feature to apply styles above a certain width.
+
+
+```css/4-4
+main {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+@media (max-width: 45em) {
+  main {
+    display: block;
+  }
+}
+```
+
+```css/0-0
+@media (min-width: 45em) {
+  main {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+  }
+}
+```
+
+Personally, I like to use `min-width`. I apply layout styles in an additive way. I introduce new layout rules at each breakpoint instead of undoing previous rules.
+
+This additive approach also works for height. Using `min-height` you can introduce more rules as more viewport height becomes available. For example, you might have a header element that you want to anchor to the top of the browser window if there's enough vertical space.
+
+```css/0-0
+@media (min-height: 30em) {
+  header {
+    position: fixed;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'PoJbdaN',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+But you can use the `max-height` media feature if you prefer. Here, the header is anchored by default, but the stickiness is removed if there isn't enough vertical space.
+
+```css/3-3
+header {
+  position: fixed;
+}
+@media (max-height: 30em) {
+  header {
+    position: static;
+  }
+}
+```
+
+Choosing between `min-` and `max-` prefixes doesn't just apply to [`width`](https://developer.mozilla.org/docs/Web/CSS/@media/width) and [`height`](https://developer.mozilla.org/docs/Web/CSS/@media/height). The [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio) media feature offers the same choice. It also offers an unprefixed version if you want to apply styles at an exact ratio of width to height.
+
+```css
+@media (min-aspect-ratio: 16/9) {
+  // The ratio of width to height is at least 16 by 9.
+}
+@media (max-aspect-ratio: 16/9) {
+  // The ratio of width to height is less than 16 by 9.
+}
+@media (aspect-ratio: 16/9) {
+  // The ratio of width to height is exactly 16 by 9.
+}
+```
+
+Providing different styles for different aspect ratios could quickly get out of hand. If you don't need that fine-grained level of control, the [`orientation`](https://developer.mozilla.org/docs/Web/CSS/@media/orientation) media feature might better suit your needs. It has two possible values: `portrait` or `landscape`.
+
+```css
+@media (orientation: portrait) {
+  // The width is less than the height.
+}
+@media (orientation: landscape) {
+  // The width is greater than the height.
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'qBXVowV',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/gtBzPVsBu5mtnX8RuSqJ.mp4", controls=true, loop=true %}
+
+Even though the terms "portrait" and "landscape" are most often used to refer to the orientation of mobile devices, the `orientation` media feature isn't device-specific. A full-screen browser window on a typical laptop will have an `orientation` value of `landscape`.
+
+## Displays
+
+Different displays have different pixel densities, measured in `dpi`, dots per inch. You can adjust your styles for different pixel densities using the [`resolution`](https://developer.mozilla.org/docs/Web/CSS/@media/resolution) media feature. Like `aspect-ratio`, `resolution` comes in three varieties: minimum, maximum, and exact.
+
+```css
+@media (min-resolution: 300dpi) {
+  // The display has a pixel density of at least 300 dots per inch.
+}
+@media (max-resolution: 300dpi) {
+  // The display has a pixel density less than 300 dots per inch.
+}
+@media (resolution: 300dpi) {
+  // The display has a pixel density of exactly 300 dots per inch.
+}
+```
+
+You may never need to use any `resolution` media queries. Pixel density is usually only an issue for images, and [responsive images](/learn/design/responsive-images/) are a way of dealing with pixel density directly in HTML.
+
+On the other hand, CSS is where you define your animations and transitions. You can adjust those animations and transitions to respond to different refresh rates using the [`update`](https://developer.mozilla.org/docs/Web/CSS/@media/update-frequency) media feature. This media feature reports one of three values: `none`, `slow`, and `fast`.
+
+An `update` value of `none` means there's no refresh rate. A printed page, for example, can't be updated.
+
+An `update` value of `slow` means the display can't refresh quickly. An e-ink display is one example of a screen with a slow refresh rate.
+
+An `update` value of `fast` means the display refreshes fast enough to handle animations and transitions.
+
+```css
+@media (update: fast) {
+  a {
+    transition-duration: 0.4s;
+    transition-property: transform;
+  }
+  a:hover {
+    transform: scale(150%);
+  }
+}
+```
+
+Not all aspects of the display are related to hardware capabilities. In [the module on theming](/learn/design/theming/), you saw how to define properties in a [web app manifest](/add-manifest/) file. One of those properties is called `display`, and you can give it a value of `fullscreen`, `standalone`, `minimum-ui`, or `browser`. The corresponding [`display-mode`](https://developer.mozilla.org/docs/Web/CSS/@media/display-mode) media feature allows you to tailor your styles for these different options.
+
+Let's say you've provided a `display` value of `standalone` in your web app manifest. If someone adds your site to their home screen, the site will launch without any browser interface. You might decide to display a back button for those users.
+
+```css
+button.back {
+  display: none;
+}
+@media (display-mode: standalone) {
+  button.back {
+     display: inline;
+  }
+}
+```
+
+## Color
+
+There are numerous media features for querying the color capabilities of a device. If you want to adjust your styles for any display that only outputs shades of grey, you can use the [`monochrome`](https://developer.mozilla.org/docs/Web/CSS/@media/monochrome) media feature without any value.
+
+```css
+@media (monochrome) {
+  body {
+    color: black;
+    background-color: white;
+  }
+}
+```
+
+There's a corresponding [`color`](https://developer.mozilla.org/docs/Web/CSS/@media/color) media feature.
+
+```css
+@media (color) {
+  body {
+    color: maroon;
+    background-color: linen;
+  }
+}
+```
+
+For color screens, you can write queries with the media features [`color-gamut`](https://developer.mozilla.org/docs/Web/CSS/@media/color-gamut), [`color-index`](https://developer.mozilla.org/docs/Web/CSS/@media/color-index), or [`dynamic-range`](https://www.w3.org/TR/mediaqueries-5/#dynamic-range). All of them report specific details about the color capabilities of the screen.
+
+In this example, color values update in response to the `dynamic-range` media feature, which reports the combination of maximum brightness, color depth, and contrast ratio of the display. The possible values are `standard` or `high`. A high-definition screen that reports a `dynamic-range` value of `high` is given a different color space using the new CSS `color()` function.
+
+```css/3-3
+.neon-red {
+  color: hsl(355 100% 95%);
+}
+@media (dynamic-range: high) {
+  .neon-red {
+    color: color(display-p3 1 0 0);
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'BawQOPQ',
+ height: 400,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Interaction
+
+Media features can also report the kind of input mechanism used to interact with your site: `hover`, `any-hover`, `pointer`, and `any-pointer`. See [the module on interaction](/learn/design/interaction/) for more details.
+
+## Preferences
+
+There are a range of media queries that allow you to respond to user preferences: `prefers-color-scheme`, `prefers-contrast`, and `prefers-reduced-motion`. See the modules on [theming](/learn/design/theming/) and [accessibility](/learn/design/accessibility/) for more details.
+
+You can combine media features in one media query. You could scope your animation styles so that they're only applied if the device has a fast refresh rate and the user hasn't expressed a preference for reduced motion.
+
+```css
+@media (update: fast) and (prefers-reduced-motion: no-preference) {
+  a {
+    transition-duration: 0.4s;
+    transition-property: transform;
+  }
+  a:hover {
+    transform: scale(150%);
+  }
+}
+```
+
+## More media features
+
+There are more media features on the way.
+
+The [`forced-colors`](https://developer.mozilla.org/docs/Web/CSS/@media/forced-colors) and [`inverted-colors`](https://developer.mozilla.org/docs/Web/CSS/@media/inverted-colors) media features will report whether a device is using a restricted or an inverted color palette.
+
+A [`scripting`](https://developer.mozilla.org/docs/Web/CSS/@media/scripting) media feature will allow you to adjust your CSS based on the availability of JavaScript.
+
+A media feature called [`prefers-reduced-data`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-data) will allow users to specify that they're on a metered connection so you can send smaller or fewer assets.
+
+Other proposals are still being formulated. In the next and final module, you'll learn about a proposal for a media feature that handles different screen configurations.
+
+{% Assessment 'media-features' %}
diff --git a/src/site/content/en/learn/design/media-features/media-features.assess.yml b/src/site/content/en/learn/design/media-features/media-features.assess.yml
new file mode 100644
index 00000000000..c7c8c657d18
--- /dev/null
+++ b/src/site/content/en/learn/design/media-features/media-features.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of media features
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      A media query can check for a device at a specific width like `@media (width: 1024px)`?
+    options:
+      - content: "True"
+        rationale: "A specific width can only be accomplished by simultaneously checking for width above `1023px` and below `1025px`."
+      - content: "False"
+        rationale: "`min-width` and `max-width` are what is available."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      A media query can check for a device at a specific `aspect-ratio` like `@media (aspect-ratio: 4/3)`?
+    options:
+      - content: "True"
+        rationale: "Unique to aspect ratio, a single ratio can be matched."
+      - content: "False"
+        rationale: "This option does exist for `aspect-ratio`."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3,4"
+    stem: |
+      Which are valid color media queries?
+    options:
+      - content: "`@media (color)`"
+        rationale: "Matches any color device."
+      - content: "`@media (monochrome)`"
+        rationale: "Matches any device without color capability."
+      - content: "`@media (color-gamut: srgb)`"
+        rationale: "Matches devices with sRGB color capability."
+      - content: "`@media (min-color-index: 15000)`"
+        rationale: "Matches devices with at least 15k colors available."
+      - content: "`@media (dynamic-range: high)`"
+        rationale: "Matches devices capable of HD color ranges."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3"
+    stem: |
+      Which of the following user preference media queries are valid?
+    options:
+      - content: "`@media (prefers-color-scheme: dark)`"
+        rationale: "Matches when a user has their operating system set to dark mode."
+      - content: "`@media (prefers-colors: high-definition)`"
+        rationale: "Not real."
+      - content: "`@media (prefers-reduced-motion: reduce)`"
+        rationale: "Matches when a user has their operating system set to reduce motion."
+      - content: "`@media (prefers-contrast: more)`"
+        rationale: "Matches when a user has their operating system set to higher contrasts."
+      - content: "`@media (prefers-site-speed: fast)`"
+        rationale: "Not real."
diff --git a/src/site/content/en/learn/design/media-queries/index.md b/src/site/content/en/learn/design/media-queries/index.md
new file mode 100644
index 00000000000..84288dfba71
--- /dev/null
+++ b/src/site/content/en/learn/design/media-queries/index.md
@@ -0,0 +1,260 @@
+---
+title: Media queries
+description: >
+  Adapt your designs to different screen sizes using CSS media queries. 
+authors:
+  - adactio
+date: 2021-11-03
+updated: 2021-02-08
+---
+
+Designers can adjust their designs to accommodate users. 
+The clearest example of this is the form factor of a user's device; its width, 
+the device aspect ratio, and so on. Using media queries, designers can respond to these different form factors.
+
+Media queries are initiated with the `@media` keyword (a CSS at-rule), and can be used for a variety of use cases.
+
+## Target different types of output
+
+Websites are often displayed on screens but CSS can also be used to style websites for other outputs too. 
+You might want your web pages to look one way on a screen but different when printed out. 
+Querying media types makes this possible.
+
+In this example, the background color is set to grey. 
+But if the page is printed, the background color should be transparent. 
+This saves the user's printer ink.
+
+```css
+body {
+  color: black;
+  background-color: grey;
+}
+
+@media print {
+  body {
+    background-color: transparent;
+  }
+}
+```
+
+You can use the `@media` at-rule in your stylesheet like that, 
+or you can make a separate stylesheet and use the `media` attribute on a `link` element:
+
+```html
+<link rel="stylesheet" href="global.css">
+<link rel="stylesheet" href="print.css" media="print">
+```
+
+If you don't specify any media type for your CSS, 
+it will automatically have a media type value of `all`. These two blocks of CSS are equivalent:
+
+```css
+body {
+  color: black;
+  background-color: white;
+}
+```
+
+```css
+@media all {
+   body {
+     color: black;
+     background-color: white;
+   }
+}
+```
+
+These two lines of HTML are also equivalent:
+
+```html
+<link rel="stylesheet" href="global.css">
+```
+
+```html
+<link rel="stylesheet" href="global.css" media="all">
+```
+
+
+### Query conditions
+
+You can add conditions to media types. These are called media queries. 
+The CSS is applied only if the media type matches and the condition is also true. 
+These conditions are called _media features_.
+
+This is the syntax for media queries:
+
+```css
+@media type and (feature)
+```
+
+You can use media queries on a `link` element if your styles are in a separate stylesheet:
+
+```html
+<link rel="stylesheet" href="specific.css" media="type and (feature)">
+```
+
+Let's say you want to apply different styles depending on whether the browser window is in landscape mode 
+(the viewport width is greater than its height) or portrait mode 
+(the viewport height is greater than its width). 
+There's a media feature called `orientation` you can use to test that:
+
+```css
+@media all and (orientation: landscape) {
+   // Styles for landscape mode.
+}
+@media all and (orientation: portrait) {
+   // Styles for portrait mode.
+}
+```
+
+Or if you prefer to have separate stylesheets:
+
+```html
+<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
+<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
+```
+
+In this case the media type is `all`. Because that's the default value, you can leave it out if you want:
+
+```css
+@media (orientation: landscape) {
+   // Styles for landscape mode.
+}
+@media (orientation: portrait) {
+   // Styles for portrait mode.
+}
+```
+
+Or using separate stylesheets:
+
+```html
+<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
+<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'qBXVowV',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/gtBzPVsBu5mtnX8RuSqJ.mp4", autoplay=true, controls=true, loop=true %}
+
+While using separate stylesheets for different media _types_—like `print`—might be okay, 
+it's probably not a good idea to use a separate stylesheet for every media _query_. Use `@media` at-rules instead.
+
+## Adjust styles based on viewport size
+
+For responsive design, one of the most useful media features involves the dimensions of the browser viewport. 
+To apply styles when the browser window is wider than a certain width, use `min-width`.
+
+```css
+@media (min-width: 400px) {
+  // Styles for viewports wider than 400 pixels.
+}
+```
+
+Use the `max-width` media feature to apply styles below a certain width:
+
+```css
+@media (max-width: 400px) {
+  // Styles for viewports narrower than 400 pixels.
+}
+```
+
+You can use any CSS [length units](https://developer.mozilla.org/docs/Web/CSS/length) in your media queries. 
+If your content is mostly image-based, pixels might make the most sense. 
+If your content is mostly text-based, 
+it probably makes more sense to use a [relative unit](/learn/css/sizing/#relative-lengths) that's based on text size, like `em` or `ch`:
+
+```css
+@media (min-width: 25em) {
+  // Styles for viewports wider than 25em.
+}
+```
+
+You can also combine media queries to apply more than one condition. 
+Use the word `and` to combine your media queries:
+
+```css
+@media (min-width: 50em) and (max-width: 60em) {
+  // Styles for viewports wider than 50em and narrower than 60em.
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'GRvOxaw',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/eDf5v1QMwLX19pcJAgYE.mp4", autoplay=true, controls=true, loop=true %}
+
+## Choose breakpoints based on the content
+
+The point at which a media feature condition becomes true is called a breakpoint. 
+It's best to choose your breakpoints based on your content rather than popular device sizes, 
+as those are subject to change with every technology release cycle.
+
+In this example, `50em` is the point at which the lines of text become uncomfortably long. 
+So a breakpoint is created to make the interface more legible. 
+Using the `column-count` property, the text is divided into two columns from that point on.
+
+```css
+@media (min-width: 50em) {
+  article {
+    column-count: 2;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'oNeodgd',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/mrQlcyih7IcZxswI1lMx.mp4", autoplay=true, controls=true, loop=true %}
+
+## Combinations
+
+You can use media queries based on the height of the viewport, not just the width. 
+This could be useful for optimizing interface content "above the fold". In the previous example, 
+if readers are using a wide but short browser window, 
+they have to scroll down one column and then scroll back up to get to the top of the second column. 
+It would be safer to only apply the columns when the viewport is both wide enough and tall enough.
+
+You can combine media queries so that the styles only apply when all the conditions are true. 
+In this example, the viewport must be at least `50em` wide and `60em` tall in order for the column styles to be applied. 
+Those breakpoints were chosen based on the amount of content.
+
+```css
+@media (min-width: 50em) and (min-height: 60em) {
+  article {
+    column-count: 2;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'JjyOvdM',
+ height: 1000,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/oKRBxhrHzAzebYwxptsv.mp4", autoplay=true, controls=true, loop=true %}
+
+These examples show how media queries can be used to adapt designs to the form factor of a user's device, 
+but these just scratch the surface of possibilities. Media queries can go far beyond width and height, 
+accessing user preferences for accessibility features and theme colors. 
+Using media queries to make layout adjustments is a great start to a responsive design, which builds on these features and more.
+
+{% Assessment 'media-queries' %}
diff --git a/src/site/content/en/learn/design/media-queries/media-queries.assess.yml b/src/site/content/en/learn/design/media-queries/media-queries.assess.yml
new file mode 100644
index 00000000000..2653e69ac08
--- /dev/null
+++ b/src/site/content/en/learn/design/media-queries/media-queries.assess.yml
@@ -0,0 +1,64 @@
+setLeader: Test your knowledge of responsive media queries.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Media queries only exist for screen size?
+    options:
+      - content: "true"
+        rationale: "Try again! Media queries for things like print, dark and light system preference, and many more."
+      - content: "false"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Screens are the only place web content is consumed or displayed?
+    options:
+      - content: "true"
+        rationale: "Try again! A website may be printed onto paper, crawled by search engine spiders, read aloud by screen reader technologies, or even read to users by bots via an assistant."
+      - content: "false"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: The default media type is?
+    options:
+      - content: "`screen`"
+        rationale: "Try again! `screen` is not the default type."
+      - content: "`none`"
+        rationale: "Try again! `none` is not a valid media type."
+      - content: "`all`"
+        rationale: "🎉"
+      - content: "`some`"
+        rationale: "Try again! `some` is not a valid media type."
+      - content: "`landscape`"
+        rationale: "Try again! `landscape` is not a valid media type."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What would you use to prevent the browser from scaling a design on mobile?
+    options:
+      - content: "`width: 100%`"
+        rationale: "Try again!"
+      - content: "`font-size: 200%`"
+        rationale: "Try again!"
+      - content: '`<meta name="viewport" content="width=device-width, initial-scale=1">`'
+        rationale: "🎉"
+      - content: "Media Queries"
+        rationale: "Try again!"
+      - content: "HTML5"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which media query applies when the browser window is *above* `720px`.
+    options:
+      - content: "`@media (width: 720px)`"
+        rationale: "Try again! This media query is only when the browser window is equal to `720px`."
+      - content: "`@media (max-width: 720px)`"
+        rationale: "Try again! This media query is for when the browser window is below `720px`."
+      - content: "`@media (min-width: 720px)`"
+        rationale: "🎉 You can read this as the browser window is at least `720px`."
+      - content: "`@media (clamp-width: 720px)`"
+        rationale: "Try again! `clamp-width` is not a valid media query feature condition."
diff --git a/src/site/content/en/learn/design/micro-layouts/index.md b/src/site/content/en/learn/design/micro-layouts/index.md
new file mode 100644
index 00000000000..3605f5fc7c1
--- /dev/null
+++ b/src/site/content/en/learn/design/micro-layouts/index.md
@@ -0,0 +1,245 @@
+---
+title: Micro layouts
+description: >
+  Build flexible components that can be placed anywhere.
+authors:
+  - adactio
+date: 2021-11-03
+---
+
+When we think of layouts, we often think of page-level designs. 
+But smaller components within the page can have their own self-contained layouts.
+
+Ideally, these component-level layouts will adjust themselves automatically, 
+regardless of their position on the page. 
+There may be situations where you don't know if a component will be placed into the main content column or the sidebar or both. 
+Without knowing for sure where a component will end up, 
+you need to make sure that the component can adjust itself to its container.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/hAz94zpnzIQYHjamxtYK.png", 
+alt="A two column layout, one wide and one narrow. The media objects are laid out differently depending on whether they're in the wide or narrow column.", width="800", height="410" %}
+
+
+{% Aside %}
+In the future, creating components that can adapt to their container will become much easier with the implementation of 
+[Container Queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries). 
+For now, however, you need to consider the existing ways to create reusable and responsive micro-layouts. 
+You can find a preview of how Container Queries fit into existing responsive design methods at the end of this module.
+{%endAside%}
+
+## Grid
+
+[CSS grid](/learn/css/grid/) isn't just for page-level layouts. 
+It also works well for the components that live within them.
+
+In this example, the `::before` and `::after` [pseudo-elements](​​/learn/css/pseudo-elements/) 
+create decorative lines on either side of a heading. 
+The heading itself is a grid container. 
+The individual elements are laid out so that the lines always fill the available space.
+
+```css
+h1 {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1em;
+}
+h1::before,
+h1::after {
+  content: "";
+  border-top: 0.1em double black;
+  align-self: center;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'rNzYvxm',
+ height: 200,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/mNjoV2ri3HmsPeRoTpTh.png", alt="Developer tools in Firefox showing a grid overlay.", width="800", height="644" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/7A1UYerc4KNuuWmp3IMJ.png", alt="Developer tools in Chrome showing a grid overlay.", width="800", height="644" %}
+ <figcaption>
+   Desktop browsers like Firefox and Chrome have developer tools that can show you grid lines and areas overlaid on your design. 
+ </figcaption>
+</figure>
+
+Learn how to [inspect grid layouts](https://developer.chrome.com/docs/devtools/css/grid/) in Chrome DevTools.
+
+## Flexbox
+
+As the name suggests, [flexbox](/learn/css/flexbox/) allows you to make your components flexible. 
+You can declare which elements in your component should have a minimum or maximum size and let the other elements flex to fit accordingly.
+
+In this example, the image takes up one quarter of the available space and the text takes up the other three quarters. 
+But the image never gets larger than 200 pixels.
+
+```css
+.media {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+.media-illustration {
+  flex: 1;
+  max-inline-size: 200px;
+}
+.media-content {
+  flex: 3;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'qBXVYZo',
+ height: 300,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/9xyxPbFU4EUtnPGsKdQI.png", alt="Developer tools in Firefox showing a flexbox overlay.", width="800", height="644" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/R7Ucm4OvYLbXGD0I3rw2.png", alt="Developer tools in Chrome showing a flexbox overlay.", width="800", height="644" %}
+ <figcaption>
+   The developer tools in Firefox and Chrome can help you visualize the shape of your flexbox components. 
+ </figcaption>
+</figure>
+
+Learn how to [inspect flexbox layouts](https://developer.chrome.com/docs/devtools/css/flexbox/) in Chrome DevTools.
+
+## Container queries
+
+Flexbox allows you to design from the content out. 
+You can specify the parameters of your elements (how narrow they should get, how wide they should get) 
+and let the browser figure out the final implementation.
+
+But the component itself has no awareness of its context. 
+It doesn't know if it's being used in the main content or in a sidebar. 
+This can make component layouts trickier than page layouts. 
+To be able to apply contextually relevant styles, your components need to know more than the size of the viewport they are inside.
+
+With page layouts, you *do* know the width of the container because the container is the browser viewport; 
+media queries report the dimensions of the page-level container.
+
+Now there's an upcoming CSS technology that reports the dimensions of any parent container: 
+[container queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries).
+
+{% Aside 'caution' %}
+Container queries are a new experimental technology that isn't widely available in browsers. 
+To test the code below, and see the example working, enable container queries in Chrome. 
+
+Go to `chrome://flags/`, search for **Container Queries**, and enable the `#enable-container-queries` flag.
+With the flag enabled, you can [inspect and debug container queries](https://developer.chrome.com/docs/devtools/css/container-queries/) in Chrome DevTools.
+{% endAside %}
+
+To start, define which elements will act as containers.
+
+```css
+main,
+aside {
+  container-type: inline-size;
+}
+```
+
+This means that you want to be able to query the inline dimension. 
+For English-language documents, that's the horizontal axis. 
+You're going to change styles based on the width of the container.
+
+If a component is inside one of those containers, 
+you can apply styles in a way that's quite similar to media queries.
+
+```css
+.media-illustration {
+  max-width: 200px;
+  margin: auto;
+}
+
+@container (min-width: 25em) {
+  .media {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+  }
+
+  .media-illustration {
+    flex: 1;
+  }
+
+  .media-content {
+    flex: 3;
+  }
+}
+```
+
+If a media object is inside a container that's narrower than `25em`, 
+the flexbox styles aren't applied. The image and text appear are ordered vertically.
+
+But if the containing element is wider than `25em`, the image and text appear side by side.
+
+Container queries allow you to style components in an independent way. 
+The width of the viewport is no longer what matters. 
+You can write rules based on the width of the containing element.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/819QcTZ9zW0uVk8tTdGi.png", 
+alt="Two containers of different sizes.", width="800", height="624" %}
+
+
+## Combining queries
+
+You can use media queries for the page layout, and container queries for the components within the page.
+
+Here the overall structure of the page has a `main` element and an `aside` element. 
+There are media objects within both elements.
+
+```html
+<body>
+  <main>
+     <div class="media">…</div>
+     <div class="media">…</div>
+  </main>
+  <aside>
+     <div class="media">…</div>
+  </aside>
+</body>
+```
+A media query applies a grid layout to the `main` and `aside` elements when the viewport is wider than `45em`.
+
+```css
+@media (min-width: 45em) {
+  body {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+  }
+}
+```
+The container query rule for the media objects remains the same: 
+only apply a horizontal flexbox layout if the containing element is wider than `25em`.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/hAz94zpnzIQYHjamxtYK.png", 
+alt="A two column layout, one wide and one narrow. 
+The media objects are laid out differently depending on whether they're in the wide or narrow column.", width="800", height="410" %}
+
+{% Aside 'caution' %}
+This demo won't work in every browser. In Google Chrome you can find the `#enable-container-queries` flag at `chrome://flags`.
+{% endAside %}
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'RwZjyRv',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+Container queries are a game-changer for micro layouts. 
+Your components can be self-contained, independent of the browser viewport.
+
+{% Assessment 'micro-layouts' %}
+
+Previously, you learned about page-level macro layouts. 
+Now you know about component-level micro layouts. 
+Next, you'll dive deeper into the very building blocks of your content. 
+You'll learn how to make your images responsive. But now let's explore responsive typography.
diff --git a/src/site/content/en/learn/design/micro-layouts/micro-layouts.assess.yml b/src/site/content/en/learn/design/micro-layouts/micro-layouts.assess.yml
new file mode 100644
index 00000000000..eec81742fe4
--- /dev/null
+++ b/src/site/content/en/learn/design/micro-layouts/micro-layouts.assess.yml
@@ -0,0 +1,12 @@
+setLeader: Test your knowledge of micro layouts.
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Grid and flexbox are both useful for micro layouts?
+    options:
+      - content: "True"
+        rationale: "🎉"
+      - content: "False"
+        rationale: "🎉 Grid and flexbox are both very useful, even for the 'tiniest' of layouts."
diff --git a/src/site/content/en/learn/design/picture-element/index.md b/src/site/content/en/learn/design/picture-element/index.md
new file mode 100644
index 00000000000..221c4181a8f
--- /dev/null
+++ b/src/site/content/en/learn/design/picture-element/index.md
@@ -0,0 +1,123 @@
+---
+title: The picture element
+description: >
+  Exercise more creative control over your images.
+authors:
+  - adactio
+date: 2021-12-09
+---
+
+[The previous module](/learn/design/responsive-images/) demonstrated how the `srcset` attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the [`picture`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) element.
+
+In the same way that `srcset` builds upon the `src` attribute, the `picture` element builds upon the `img` element. The `picture` element wraps around an `img` element.
+
+```html
+<picture>
+  <img src="image.jpg" alt="A description of the image.">
+</picture>
+```
+
+If there is no `img` element nested inside the `picture` element, the `picture` element won't work.
+
+Like the `srcset` attribute, the `picture` element will update the value of the `src` attribute in that `img` element. The difference is that where the `srcset` attribute gives suggestions to the browser, the `picture` element gives commands. This gives you control. 
+
+## `source`
+
+You can specify multiple `source` elements inside a `picture` element, each one with its own `srcset` attribute. The browser then executes the first one that it can.
+
+## Image formats
+
+In this example, there are three different images in three different formats:
+
+```html/1-2
+<picture>
+  <source srcset="image.avif" type="image/avif">
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="A description of the image." 
+    width="300" height="200" loading="lazy" decoding="async">
+</picture>
+```
+
+The first `source` element points to an image in [the new AVIF format](/compress-images-avif/). If the browser is capable of rendering AVIF images, then that's the image file it chooses. Otherwise, it moves on to the next `source` element.
+
+The second `source` element points to an image in [the WebP format](/serve-images-webp/). If the browser is capable of rendering WebP images, it will use that image file.
+
+Otherwise the browser will fall back to the image file in the `src` attribute of the `img` element. That image is a JPEG.
+
+This means you can start using new image formats without sacrificing backward compatibility.
+
+In that example, the `type` attribute told the browser which kind of image format was specified.
+
+## Image sizes
+
+As well as switching between image formats, you can switch between image sizes. Use the `media` attribute to tell the browser how wide the image will be displayed. Put a media query inside the `media` attribute.
+
+```html/1-2
+<picture>
+  <source srcset="large.png" media="(min-width: 75em)">
+  <source srcset="medium.png" media="(min-width: 40em)">
+  <img src="small.png" alt="A description of the image." 
+    width="300" height="200" loading="lazy" decoding="async">
+</picture>
+```
+
+Here you're telling the browser that if the viewport width is wider than `75em` it must use the large image. Between `40em` and `75em` the browser must use the medium image. Below `40em` the browser must use the small image.
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/tXME65OZikEMwvPAEgX2.mp4", controls=true, loop=true %}
+
+This is different to using the `srcset` and `sizes` attributes on the `img` element. In that case you're providing suggestions to the browser. The `source` element is more like a command than a suggestion.
+
+You can also use the pixel density descriptor inside the `srcset` attribute of a `source` element.
+
+```html/1-2
+<picture>
+  <source srcset="large.png 1x" media="(min-width: 75em)">
+  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
+  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
+    srcset="small.png 1x, medium.png 2x, large.png 3x">
+</picture>
+```
+
+In that example you're still telling the browser what to do at different breakpoints, but now the browser has the option to choose the most appropriate image for the device's pixel density.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'PoJYrNB',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Cropping
+
+If you only need to serve differently sized versions of the same image, `srcset` is your best option. But if an image doesn't look good at smaller sizes, you can try making a cropped version of the image instead.
+
+The different images might have different width and height ratios to suit their context better. For example, on a mobile browser you may want to serve a crop that's narrow and tall, whereas on a desktop browser, you might want to serve a crop that's wide and short.
+
+Here's an example of a hero image that changes its contents and its shape based on the viewport width. Add `width` and `height` attributes to each `source` element.
+
+```html/1-2
+<picture>
+  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
+  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
+  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
+</picture>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'eYGOwzp',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/WZLJGIUHqlP1j9s9aJaj.mp4", controls=true, loop=true %}
+
+Remember that you can't change the `alt` attribute depending on the image source. You'll need to write an `alt` attribute that describes both the full size image and the cropped image.
+
+You probably won't need to use the `picture` element for most of your responsive images—the `srcset` and `sizes` attributes on the `img` element cover a lot of use cases. But for those situations when you need more fine-grained control, the `picture` element is a powerful tool.
+
+There's one kind of image where you might not need either solution: icons. [That's what's next](/learn/design/icons/).
+
+{% Assessment 'picture' %}
diff --git a/src/site/content/en/learn/design/picture-element/picture.assess.yml b/src/site/content/en/learn/design/picture-element/picture.assess.yml
new file mode 100644
index 00000000000..f82a9e3fd62
--- /dev/null
+++ b/src/site/content/en/learn/design/picture-element/picture.assess.yml
@@ -0,0 +1,28 @@
+setLeader: Test your knowledge of the picture element
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "Where the `srcset` attribute gives ________ to the browser, the `<picture>` element gives ________."
+    options:
+      - content: "suggestions, commands"
+        rationale: "The picture element provides control, making it great for art direction."
+      - content: "commands, suggestions"
+        rationale: "Oops, you got it backwards."
+  - type: multiple-choice
+    cardinality: "2+"
+    correctAnswers: "0,1,2,3"
+    stem: "Some capabilities of the `<picture>` element are:"
+    options:
+      - content: "Alternative cropping"
+        rationale: "eg: landscape images or portrait images depending on the viewport."
+      - content: "Alternative formats"
+        rationale: "eg: smaller and easier to download `avif` or `webp` files if possible."
+      - content: "Alternative sizes"
+        rationale: "eg: larger images for larger monitors."
+      - content: "Alternative densities"
+        rationale: "eg: providing rich pixel quality for HD screens."
+      - content: "Alternative ratios"
+        rationale: "Picture element does not have ratio features."
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/responsive-images/images.assess.yml b/src/site/content/en/learn/design/responsive-images/images.assess.yml
new file mode 100644
index 00000000000..496438fc328
--- /dev/null
+++ b/src/site/content/en/learn/design/responsive-images/images.assess.yml
@@ -0,0 +1,54 @@
+setLeader: Test your knowledge of images
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "Styles must be added for images to fit within the viewport."
+    options:
+      - content: "True"
+        rationale: "Images without containment will be as large as their natural size."
+      - content: "False"
+        rationale: "Styles are required."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3"
+    stem: "When an image's height and width have been forced into an unnatural aspect ratio, 
+      which styles can help adjust how the image fits into these proportions?"
+    options:
+      - content: "`object-fit`"
+        rationale: "Specify how the image fits with keywords like `contain` and `cover`."
+      - content: "`image-fit`"
+        rationale: "This property doesn't exist, I made it up."
+      - content: "`fit-image`"
+        rationale: "This property doesn't exist, I made it up."
+      - content: "`aspect-ratio`"
+        rationale: "This may cause or solve an unnatural image ratio."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Putting `height` and `width` on your images prevents CSS from being able to style it differently."
+    options:
+      - content: "True"
+        rationale: "Think of them more like hints than rules."
+      - content: "False"
+        rationale: "CSS has a large amount of dynamic options for sizing images, even if height and width are inline on the tag."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "The `srcset` attribute doesn't _______ the `src` attribute, it _______ it."
+    options:
+      - content: "complement, replaces"
+        rationale: "`srcset` definitely doesn't replace the `src` attribute."
+      - content: "replace, complements"
+        rationale: "It provides additional options for the browser to choose from, if it's capable."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Missing `alt` on an image is the same as an empty `alt`."
+    options:
+      - content: "True"
+        rationale: "An empty `alt` attribute conveys to a screen reader that this image is presentational"
+      - content: "False"
+        rationale: "Missing `alt` signals nothing to a screen reader."
diff --git a/src/site/content/en/learn/design/responsive-images/index.md b/src/site/content/en/learn/design/responsive-images/index.md
new file mode 100644
index 00000000000..3baf01e1855
--- /dev/null
+++ b/src/site/content/en/learn/design/responsive-images/index.md
@@ -0,0 +1,401 @@
+---
+title: Responsive images
+description: >
+  Give your visitors the most appropriate images for their devices and screens.
+authors:
+  - adactio
+  - tunetheweb
+date: 2021-12-09
+updated: 2022-03-08
+---
+
+Text on the web automatically wraps at the edge of the screen so that it doesn't overflow. It's different with images. Images have an intrinsic size. If an image is wider than the screen, the image will overflow, causing a horizontal scrollbar to appear.
+
+Fortunately, you can take measures in CSS to stop this from happening.
+
+## Constrain your images
+
+In your stylesheet, you can declare that images should never be rendered at a size wider than their containing element using [`max-inline-size`](https://developer.mozilla.org/docs/Web/CSS/max-inline-size).
+{% BrowserCompat 'css.properties.max-inline-size' %}
+
+```css
+img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+```
+
+{% Aside %}
+You can use `max-width` instead of `max-inline-size` if you prefer, but remember it's good to get in the habit of thinking in terms of [logical properties](/learn/design/internationalization/#logical-properties).
+{% endAside %}
+
+You can apply the same rule to other kinds of embedded content too, like videos and iframes.
+
+```css
+img,
+video,
+iframe {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+```
+
+With that rule in place, browsers will automatically scale down images to fit on the screen.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/RvqAjVGiroJDuBBpYXYV.png", alt="Two screenshots; the first shows an image expanding past the browser width; the second shows the same image constrained within the browser viewport.", width="800", height="763" %}
+
+
+Adding a [`block-size`](https://developer.mozilla.org/docs/Web/CSS/block-size) value of `auto` means that the aspect-ratio of the images will remain constant.
+
+Sometimes the dimensions of an image might be out of your control—if an image is added through a content management system, for example. If your design calls for a images to have an aspect ratio that's different to the image's real dimensions, use the [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) property in CSS.
+
+```css/3-3
+img {
+  max-inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 2/1;
+}
+```
+
+But then the browser might squash or stretch the image to make it fit your preferred aspect ratio.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/GNEkQTnMZTde5QB2mkvh.jpg", alt="Profile of a happy-looking handsome dog with a ball in its mouth, but the image is squashed.", width="800", height="400" %}
+
+To prevent that happening, use the [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) property.
+{% BrowserCompat 'css.properties.object-fit' %}
+
+An `object-fit` value of `contain` tells the browser to preserve the image's aspect ratio, even if that means leaving empty space above and below.
+
+```css/4-4
+img {
+  max-inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 2/1;
+  object-fit: contain;
+}
+```
+
+An `object-fit` value of `cover` tells the browser to preserve the image's aspect ratio, even if that means cropping the image at the top and bottom.
+
+```css/4-4
+img {
+  max-inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 2/1;
+  object-fit: cover;
+}
+```
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/VCC9WmZ2BFqLrkRlFViy.jpg", alt="Profile of a happy-looking handsome dog with a ball in its mouth; there is extra space on either side of the image.", width="800", height="400" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/FgeMDACB094Myj6cVCZu.jpg", alt="Profile of a happy-looking handsome dog with a ball in its mouth; the image has been cropped at the top and bottom.", width="800", height="400" %}
+ <figcaption>
+   The same image with two different values for `object-fit` applied. The first has an `object-fit` value of `contain`. The second has an `object-fit` value of `cover`.
+ </figcaption>
+</figure>
+
+
+If the cropping at the top and bottom evenly is an issue, use the [object-position](https://developer.mozilla.org/docs/Web/CSS/object-position) CSS property to adjust the focus of the crop.
+{% BrowserCompat 'css.properties.object-position' %}
+
+You can make sure the most important image content is still visible.
+
+```css/5-5
+img {
+  max-inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 2/1;
+  object-fit: cover;
+  object-position: top center;
+}
+```
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/mZDZFob5QnBl5YmAHh2A.jpg", alt="Profile of a happy-looking handsome dog with a ball in its mouth; the image has only been cropped at the bottom.", width="800", height="400" %}
+
+## Deliver your images
+
+Those CSS rules tell the browser how you'd like images to be rendered. You can also provide hints in your HTML about how the browser should handle those images.
+
+### Sizing hints
+
+If you know the dimensions of the image you should include `width` and `height` attributes. Even if the image is rendered at a different size (because of your `max-inline-size: 100%` rule), the browser still knows the width to height ratio and can set aside the right amount of space. This will stop your other content jumping around when the image loads.
+
+```html/3-4
+<img
+ src="image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+>
+```
+
+<figure>
+{% Video src="/video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4", controls=true, loop=true %}
+{% Video src="/video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4", controls=true, loop=true %}
+ <figcaption>
+   The first video shows a layout without defined image dimensions. Notice how the text jumps once the images load. In the second video, image dimensions have been provided; space is left for the image so that once they load, the text doesn't jump around.
+ </figcaption>
+</figure>
+
+### Loading hints
+
+Use the `loading` attribute to tell the browser whether to delay loading the image until it is in or near the viewport. For images below the fold, use a value of `lazy`. The browser won't load lazy images until the user has scrolled far down enough that the image is about to come into view. If the user never scrolls, the image never loads.
+
+```html/5-5
+<img
+ src="image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+ loading="lazy"
+>
+```
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/jazsyaOjXfHS0g8yUijR.mp4", controls=true, loop=true %}
+
+For a hero image above the fold, `loading` should not be used. If your site automatically applies the `loading="lazy"` attribute, you can often set the `eager` attribute (which is the default) to prevent this from being applied:
+
+```html/5-5
+<img
+ src="hero.jpg"
+ alt="A description of the image."
+ width="1200"
+ height="800"
+ loading="eager"
+>
+```
+
+### Fetch Priority
+
+For important images-such as the [LCP](/lcp/) image, you can further prioritize the loading using [Fetch Priority](/fetch-priority/) by setting the `fetchpriority` attribute to `high`:
+
+```html/5-6
+<img
+ src="hero.jpg"
+ alt="A description of the image."
+ width="1200"
+ height="800"
+ loading="eager"
+ fetchpriority="high"
+>
+```
+
+This will tell the browser to fetch the image right away, and at high priority, rather than waiting until the browser has completed layout when images are normally fetched.
+
+But remember: when you ask the browser to prioritize downloading one resource—like an image—the browser will have to de-prioritize another resource such as a script or a font file. Only set `fetchpriority="high"` on an image if it is truly vital.
+
+### Preloading hints
+
+Some images may not be available in the initial HTML—if they are added by JavaScript, or as a [background image](#background-images) in CSS. You can also use preload to allow these important images to be fetched ahead of time. This can be combined with the `fetchpriority` attribute for really important images:
+
+```html
+<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
+```
+
+Again this should be used sparingly to avoid overriding the browsers prioritisation heuristics too much, which may result in performance degredation.
+
+Preloading responsive images based on srcset (which is discussed below) via the `imagesrcset` and `imagesizes` attributes is more advanced and is [supported in some browsers](/preload-responsive-images/), but not all:
+
+<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
+
+By excluding the `href` fallback you can ensure browsers that do not support this do not preload the incorrect image.
+
+Preloading based on different image formats based on browser support of those images is not currently supported and may result in extra downloads.
+
+The ideal is to avoid preload where possible, and have the image available in the initial HTML, to avoid repeating code, and to allow access to the full range of options the browser supports.
+
+### Image decoding
+
+There's also a `decoding` attribute you can add to `img` elements. You can tell the browser that the image can be decoded asynchronously. The browser can then prioritize processing other content.
+
+```html/6-6
+<img
+ src="image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+ loading="lazy"
+ decoding="async"
+>
+```
+
+You can use the `sync` value if the image itself is the most important piece of content to prioritize.
+
+```html/6-6
+<img
+ src="hero.jpg"
+ alt="A description of the image."
+ width="1200"
+ height="800"
+ loading="eager"
+ decoding="sync"
+>
+```
+
+The `decoding` attribute will not change how fast the image decodes, but merely whether the browser waits for this image decoding to happen before rendering other content.
+
+In most cases this will have little impact, however in certain scenarios it can allow the image or content to be displayed slightly faster. For example, for a large document with lots of elements that take time to render, and with large images that take a while to decode, setting `sync` on important images will tell the browser to wait for the image and render both at once. Alternatively, setting `async` can allow the content to be displayed faster without waiting for the image decode.
+
+However, the better option is usually to try to [avoid excessive DOM sizes](https://developer.chrome.com/docs/lighthouse/performance/dom-size/) and ensure responsive images are used to reduce decoding time meaning the decoding attribute will have little effect.
+
+## Responsive images with `srcset`
+
+Thanks to that `max-inline-size: 100%` declaration, your images will never break out of their containers. But even if it looks fine to have a large image that shrinks to fit, it won't feel fine. If someone uses a small screen device on a low bandwidth network, they'll download unnecessarily large images.
+
+If you make multiple versions of the same image at different sizes, you can let the browser know about them using the [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) attribute.
+
+### Width descriptor
+
+You can pass in a list of values separated by commas. Each value should be the URL of an image followed by a space followed by some metadata about the image. This metadata is called a descriptor.
+
+In this example, the metadata describes the width of each image using the `w` unit. One `w` is one pixel.
+
+```html/7-9
+<img
+ src="small-image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+ loading="lazy"
+ decoding="async"
+ srcset="small-image.png 300w,
+  medium-image.png 600w,
+  large-image.png 1200w"
+>
+```
+
+The `srcset` attribute doesn't replace the `src` attribute. Instead the `srcset` attribute complements the `src` attribute. You still need to have a valid `src` attribute, but now the browser can replace its value with one of the options listed in the `srcset` attribute.
+
+The browser won't download the larger images unless they're needed. That saves bandwidth.
+
+### Sizes
+
+If you're using the width descriptor, you must also use the [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) attribute to give the browser more information. This tells the browser what size you expect the image to be displayed under different conditions. Those conditions are specified in a media query.
+
+The `sizes` attribute takes a comma-separated list of media queries and image widths.
+
+{% Aside %}
+It feels strange to have CSS media queries inside an HTML element. It spoils the separation of presentation and structure. But it's the only way to provide the necessary sizing information in time to be effective.
+{% endAside %}
+
+```html/10-12
+<img
+ src="small-image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+ loading="lazy"
+ decoding="async"
+ srcset="small-image.png 300w,
+  medium-image.png 600w,
+  large-image.png 1200w"
+ sizes="(min-width: 66em) 33vw,
+  (min-width: 44em) 50vw,
+  100vw"
+>
+```
+In this example, you're telling the browser that above a viewport width of `66em` to display the image no wider than one third of the screen (inside a three column layout, for example).
+
+For viewport widths between `44em` and `66em`, display the image at half the width of the screen (a two column layout).
+
+For anything below `44em` display the image at the full width of the screen.
+
+This means that the biggest image won't necessarily be used for the widest screen. A wide browser window that can display a multi-column layout will use an image that fits in one column. That image might be smaller than an image used for a single-column layout on a narrower screen.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'XWerLJm',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/MkUAq5XQyjlUXLvkT4jL.mp4", controls=true, loop=true %}
+
+### Pixel density descriptor
+
+There's another situation where you might want to provide multiple versions of the same image.
+
+Some devices have high-density displays. On a double-density display you can pack two pixels worth of information into the space of one pixel. This keeps images looking sharp on those kinds of displays.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/OtyGs9nZser6u0DrFYBq.png", alt="Two versions of the same image of a happy-looking handsome dog with a ball in its mouth, one image looking crisp and the other looking fuzzy.", width="800", height="275" %}
+
+
+Use the density descriptor to describe the pixel density of the image in relationship to the image in the `src` attribute. The density descriptor is a number followed by the letter x: `1x`, `2x`, etc.
+
+```html/7-9
+<img
+ src="small-image.png"
+ alt="A description of the image."
+ width="300"
+ height="200"
+ loading="lazy"
+ decoding="async"
+ srcset="small-image.png 1x,
+  medium-image.png 2x,
+  large-image.png 3x"
+>
+```
+
+If `small-image.png` is 300 by 200 pixels in size, and `medium-image.png` is 600 by 400 pixels in size, then `medium-image.png` can have `2x` after it in the `srcset` list.
+
+You don't have to use whole numbers. If another version of the image is 450 by 300 pixels in size, you can describe it with `1.5x`.
+
+{% Aside %}
+You can use *either* width descriptors *or* density descriptors, but not both together.
+{% endAside %}
+
+## Presentational images
+
+Images in HTML are content. That's why you always provide an `alt` attribute with a description of the image for screen readers and search engines.
+
+If you embed an image that is purely a visual flourish without any meaningful content, use an empty `alt` attribute.
+
+```html/2-2
+<img
+ src="flourish.png"
+ alt=""
+ width="400"
+ height="50"
+>
+```
+You must still include the `alt` attribute. A missing `alt` attribute is not the same as an empty `alt` attribute. An empty `alt` attribute conveys to a screen reader that this image is presentational.
+
+Ideally, your presentational or decorative images shouldn't be in your HTML at all. HTML is for structure. CSS is for presentation.
+
+## Background images
+
+Use the `background-image` property in CSS to load presentational images.
+
+```css
+element {
+  background-image: url(flourish.png);
+}
+```
+
+You can specify multiple image candidates using the [`image-set`](https://developer.mozilla.org/docs/Web/CSS/image/image-set()) function for `background-image`.
+
+The `image-set` function in CSS works a lot like the `srcset` attribute in HTML. Provide a list of images with a pixel density descriptor for each one.
+
+```css
+element {
+  background-image: image-set(
+    small-image.png 1x,
+    medium-image.png 2x,
+    large-image.png 3x
+  );
+}
+```
+The browser will choose the most appropriate image for the device's pixel density.
+
+There are many factors to consider when you're adding images to your site:
+
+Reserving the right space for each image.
+Figuring out how many sizes you need.
+Deciding whether the image is content or decorative.
+
+It's worth spending the time to get images right. Poor image strategies are responsible for frustration and annoyance for users. A good image strategy makes your site feel snappy and sharp, regardless of the user's device or network connection.
+
+There's one more HTML element in your toolkit to help you exercise more control over your images: [the `picture` element](/learn/design/picture-element/).
+
+{% Assessment 'images' %}
diff --git a/src/site/content/en/learn/design/screen-configurations/index.md b/src/site/content/en/learn/design/screen-configurations/index.md
new file mode 100644
index 00000000000..c15495452d6
--- /dev/null
+++ b/src/site/content/en/learn/design/screen-configurations/index.md
@@ -0,0 +1,161 @@
+---
+title: Screen configurations
+description: >
+  Prepare your content for devices with multiple screens.
+authors:
+  - adactio
+date: 2021-12-23
+---
+
+Responsive web design was in many ways a reaction to mobile phones. Before smartphones appeared, very few people seriously considered how websites should look and feel on handheld devices. That changed with the meteoric rise of mobile phones featuring built-in web browsers.
+
+Responsive web design encouraged a mindset that questioned assumptions. Whereas previously it was common to assume that a website would only be viewed on a desktop computer, now it's standard practice to design that same website for phones and tablets as well. In fact, [mobile usage has now eclipsed desktop usage](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/) on the web. 
+
+This responsive mindset will serve you well for the future. It's entirely possible that your websites will be viewed on devices and screens that we can't even imagine today. And this mindset extends beyond screens. Even now people are using devices with no screens to access your content. Voice assistants can use your websites if you are using a strong foundation of semantic HTML.
+
+There's experimentation in the world of screens too. There are devices on the market today with foldable screens. That introduces some challenges for your designs.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/f4vIlX35hgoM8l0cWE9a.jpg", alt="A montage of foldable phones in different configurations.", width="800", height="449" %}
+
+## Dual screens
+
+Users of foldable devices can choose whether they want their web browser to occupy just one of the screens or span across both screens. If the browser spans both screens, then the website on display will be broken up by the hinge between the two screens. It doesn't look great.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/gRdTgrPMARsnUl1iLmie.png", alt="A website spanning across two screens. The horizontal flow of text is interrupted by the hinge between the screens.", width="800", height="545" %}
+
+## Viewport segments
+
+There's an experimental media feature designed to detect if your website is being displayed on a dual-screen device. The proposed name of the media feature is `viewport-segments`. There are two varieties: `horizontal-viewport-segments` and `vertical-viewport-segments`.
+
+{% Aside 'caution' %}
+The `viewport-segments` feature is an experimental proposal and the syntax may change. The syntax has already changed from its initial proposal of a `spanning` media feature.
+{% endAside %}
+
+If the `horizontal-viewport-segments` media feature reports a value of `2` and `vertical-viewport-segments` reports a value of `1` that means the hinge on the device runs from top to bottom, splitting your content into two side-by-side panels.
+
+```css
+@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
+  // Styles for side-by-side screens.
+}
+```
+
+If the `vertical-viewport-segments` media feature reports a value of `2` and `horizontal-viewport-segments` reports a value of `1` then the hinge runs from side to side, dividing your content into two panels, one on top of the other.
+
+```css
+@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
+  // Styles for stacked screens.
+}
+```
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/TAs3gDDzcdq6Gsys3fXQ.svg", alt="Diagram demonstrating viewport segments.", width="800", height="488" %}
+<figcaption>
+   Diagram from <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>.
+ </figcaption>
+</figure>
+
+If both `vertical-viewport-segments` and `horizontal-viewport-segments` report a value of `1` this means the website is being displayed on just one screen, even if the device has more than one screen. This is equivalent to not using any media query.
+
+## Environment variables
+
+The `viewport-segments` media feature by itself won't help you design around that annoying hinge. You need a way of knowing the size of the hinge. That's where [environment](https://developer.mozilla.org/docs/Web/CSS/env()) variables can help.
+
+Environment variables in CSS allow you to factor awkward device intrusions into your styles. For example, you can design around the "notch" on the iPhone X using the environment values `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom` and `safe-area-inset-left`. These keywords are wrapped in an `env()` function.
+
+```css
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}
+```
+
+Environment variables work like custom properties. This means you can pass in a fallback option in case the environment variable doesn't exist.
+
+```css
+body {
+  padding-top: env(safe-area-inset-top, 1em);
+  padding-right: env(safe-area-inset-right, 1em);
+  padding-bottom: env(safe-area-inset-bottom, 1em);
+  padding-left: env(safe-area-inset-left, 1em);
+}
+```
+
+For those environment variables to work on the iPhone X, update the `meta` element that specifies `viewport` information:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+```
+
+Now your page layout will take up the entire viewport and safely pad the document with device-provided inset values.
+
+For foldable screens, six new environment variables are being proposed: `viewport-segment-width`, `viewport-segment-height`, `viewport-segment-top`, `viewport-segment-left`, `viewport-segment-bottom`, `viewport-segment-right`.
+
+{% Aside 'caution' %}
+Remember, this is just at the proposal stage right now. The specific syntax for the environment variables may well change.
+{% endAside %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/Ok2IFh9xJWHSGedPx9Xe.svg", alt="Diagram showing environment variables for dual screens.", width="800", height="420" %}
+<figcaption>
+   Diagram from <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>.
+ </figcaption>
+</figure>
+
+{% Aside %}
+It might seem a little strange to see names proposed with `left`, `right`, `top`, and `bottom`. If you're using logical properties you would expect terms like `inline-start`, `inline-end`, `block-start`, and `block-end`. In this instance though, the names refer to the hardware's physical properties, regardless of the writing mode used by the website being displayed.
+{% endAside %}
+
+Here's an example of a layout with two columns, one wider than the other.
+
+```css
+@media (min-width: 45em) {
+  main {
+    display: flex;
+    flex-direction: row;
+  }
+  main article {
+    flex: 2;
+  }
+  main aside {
+    flex: 1;
+  }
+}
+```
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/VYjqUCss2sJ6MT8b7BHe.png", alt="The layout is split across two screens with the hinge interrupting the wider column.", width="800", height="545" %}
+
+
+For dual screens with a vertical hinge, set the first column to be the width of the first screen and the second column to be the width of the second screen.
+
+```css
+@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
+  main article {
+    flex: 1 1 env(viewport-segment-width 0 0);
+  }
+  main aside {
+    flex: 1;
+  }
+}
+```
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/BUXrXQRSkvXz7TTzWFLx.png", alt="The layout is split evenly across two screens with no visible interruption.", width="800", height="545" %}
+
+
+Treat dual screens as an opportunity. Perhaps one screen could be used to display scrollable text content while the other displays a fixed element like an image or a map.
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/F08tJySy3ZeePoCzzw1Z.svg", alt="Diagram illustrating a location service split over two screens, with the map on one screen and directions on the other.", width="800", height="426" %}
+<figcaption>
+   Diagram from <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>.
+ </figcaption>
+</figure>
+
+## The future
+
+Will foldable displays become the next big thing? Who knows. No one could've predicted how popular mobile devices would become so it's worth having an open mind about future form factors.
+
+Above all, it's worth ensuring that your websites can respond to whatever the future may bring. That's what responsive design gives you: not just a set of practical techniques, but a mindset that will serve you well as you build the web of tomorrow.
+
+{% Assessment 'screen-configurations' %}
diff --git a/src/site/content/en/learn/design/screen-configurations/screen-configurations.assess.yml b/src/site/content/en/learn/design/screen-configurations/screen-configurations.assess.yml
new file mode 100644
index 00000000000..bf0e0adfba6
--- /dev/null
+++ b/src/site/content/en/learn/design/screen-configurations/screen-configurations.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of screen configurations
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: |
+      Which media query targets a foldable device in a split landscape mode?
+    options:
+      - content: "`@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)`"
+        rationale: "Screen configured with 2 columns and 1 row, split landscape."
+      - content: "`@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)`"
+        rationale: "2 rows and 1 column, split portrait."
+      - content: "`@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)`"
+        rationale: "2 rows and 2 columns, split 4 ways."
+      - content: "`@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)`"
+        rationale: "Single cell, no splits."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: |
+      What are environment variables? Eg `env(safe-area-inset-top)`
+    options:
+      - content: "Variables about the weather the user is in."
+        rationale: "Wrong environment, these CSS variables aren't about the physical world environment the user is in."
+      - content: "Custom build time variables."
+        rationale: "While build time, compiled way, variables are useful, they are not the same as the environment variables specced."
+      - content: "Variables containing browser specific attributes for use in adjusting a site to that browser and device."
+        rationale: "It's a way for the browser and an author to collaborate on unique viewport contexts or browser impacting attributes."
+      - content: "Variables which have gone green and are safer for the environment."
+        rationale: "CSS and it's variables can't impact world polution less."
diff --git a/src/site/content/en/learn/design/theming/index.md b/src/site/content/en/learn/design/theming/index.md
new file mode 100644
index 00000000000..e0c818c9550
--- /dev/null
+++ b/src/site/content/en/learn/design/theming/index.md
@@ -0,0 +1,348 @@
+---
+title: Theming
+description: >
+  Adapt your designs to match user preferences such as a dark mode. 
+authors:
+  - adactio
+date: 2021-12-09
+---
+
+Even branding can be responsive. 
+You can adjust the presentation of your website to match the user's preference. 
+But first, here's how to extend your website's branding to include the browser itself.  
+
+## Customize the browser interface
+
+Some browsers allow you to suggest a theme color based on your website's palette. 
+The browser's interface adapts to your suggested color. Add the color in a `meta` element named `theme-color` in the `head` of your pages.
+
+```html
+<meta name="theme-color" content="#00D494">
+```
+
+{% Aside %}
+It feels a little strange to put styling information like this in HTML rather than CSS, 
+but this allows the browser to update its interface as soon as the page is loading rather than waiting for the CSS. 
+{% endAside %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/bM78eiZbOqwZ5doqKyaQ.png", alt="Clearleft dot com.", width="800", height="520" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/kN9Un2PoYIKdVzH9I2Ac.png", alt="Resilient Web Design dot com.", width="800", height="520" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/b8AUE0DLJX5uLhJH9kaE.png", alt="The Session dot org.", width="800", height="520" %}
+ <figcaption>
+   Three websites are viewed in the Safari browser. Each one has its own theme color that extends into the browser interface. 
+ </figcaption>
+</figure>
+
+You can update the value of `theme-color` using JavaScript. But use this power wisely. 
+It can be overwhelming for users if their browser's color scheme changes too often. 
+Think about subtle ways to adjust the theme color. If the changes are too jarring, users will leave in annoyance.
+
+You can also specify a theme color in a [web app manifest](https://developer.mozilla.org/docs/Web/Manifest) file. 
+This is a JSON file with metadata about your website.
+
+Link to the manifest file from the `head` of your documents. Use a `link` element with a `rel` value of `manifest`.
+
+```html
+<link rel="manifest" href="/manifest.json">
+```
+
+In the manifest file, list your metadata using key/value pairs.
+
+```json
+{
+  "short_name": "Clearleft",
+  "name": "Clearleft design agency",
+  "start_url": "/",
+  "background_color": "#00D494",
+  "theme_color": "#00D494",
+  "display": "standalone"
+}
+```
+
+If a visitor decides to add your website to their home screen, 
+the browser will use the information in your manifest file to display an appropriate shortcut.
+
+{% Aside %}
+Find out more about how to [add a web app manifest](/add-manifest/).
+{% endAside %}
+
+## Provide a dark mode
+
+Many operating systems allow users to specify a preference for a light or a dark color palette, 
+which is a good idea to optimize your site to your user's theme preferences. 
+You can access this preference in a media feature called `prefers-color-scheme`.
+
+```css
+@media (prefers-color-scheme: dark) {
+  // Styles for a dark theme.
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'wvrwLgN',
+ height: 400,
+ theme: 'dark',
+ tab: 'css, result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/hpMyDvtHUyLPz0ltO6SS.mp4", controls=true, loop=true %}
+
+Specify theme colors with the `prefers-color-scheme` media feature within the `meta` element.
+
+```html
+<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+```
+
+You can also use the `prefers-color-scheme` media feature inside SVG. 
+If you use an SVG file for your favicon, it can be adjusted for dark mode. 
+[Thomas Steiner](/authors/thomassteiner/) wrote about 
+[`prefers-color-scheme` in SVG favicons for dark mode icons](https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/).
+
+## Theming with custom properties
+
+If you use the same color values in multiple places throughout your CSS, it could be quite tedious to repeat all your selectors within a `prefers-color-scheme` media query.
+
+```css
+body {
+  background-color: white;
+  color: black;
+}
+input {
+  background-color: white;
+  color: black;
+  border-color: black;
+}
+button {
+  background-color: black;
+  color: white;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+    color: white;
+  }
+  input {
+    background-color: black;
+    color: white;
+    border-color: white;
+  }
+  button {
+    background-color: white;
+    color: black;
+  }
+}
+```
+
+Use CSS custom properties to store your color values. 
+Custom properties work like variables in a programming language. You can update the value of a variable without updating its name.
+
+If you update the values of your custom properties within a `prefers-color-scheme` media query, 
+you won't have to write all your selectors twice.
+
+```css
+html {
+  --page-color: white;
+  --ink-color: black;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    --page-color: black;
+    --ink-color: white;
+  }
+}
+body {
+  background-color: var(--page-color);
+  color: var(--ink-color);
+}
+input {
+  background-color: var(--page-color);
+  color: var(--ink-color);
+  border-color: var(--ink-color);
+}
+button {
+  background-color: var(--ink-color);
+  color: var(--page-color);
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'qBPWzrj',
+ height: 440,
+ theme: 'dark',
+ tab: 'css,result'
+} %}
+
+See [building a color scheme](/building-a-color-scheme/) for more advanced examples of theming with custom properties.
+
+## Images
+
+If you are using SVGs in your HTML, you can apply custom properties there too.
+
+```css
+svg {
+  stroke: var(--ink-color);
+  fill: var(--page-color);
+}
+```
+
+Now your icons will change their colors along with the other elements on your page.
+
+If you want to tone down the brightness of your photographic images when displayed in dark mode, you can apply a filter in CSS.
+
+```css
+@media (prefers-color-scheme: dark) {
+  img {
+    filter: brightness(.8) contrast(1.2);
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'PoJYrpy',
+ height: 600,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/j4Hkz0lwHv1HOr3Qd6Wc.png", alt="Three photographs at normal brightness.", width="800", height="210" %}
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/ChcCHA1JLRX4F2IaLOXR.png", alt="Three photographs with slightly less brightness.", width="800", height="210" %}
+ <figcaption>
+   The effect is subtle, but you can tone down the brightness of images in dark mode. 
+ </figcaption>
+</figure>
+
+For some images, you might want to swap them out completely in dark mode. 
+For example, you might want to show a map with a darker color scheme. 
+Use the `<picture>` element containing a `<source>` element with the `prefers-color-scheme` media query.
+
+```html
+<picture>
+  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
+  <img src="lightimage.png" alt="A description of the image.">
+</picture>
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'MWEgMmw',
+ height: 600,
+ theme: 'dark',
+ tab: 'html,result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/8Sz0XmotUrwnbprrHtoZ.mp4", controls=true, loop=true %}
+
+<figure>
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/aX6PmKj8pQudiWgt4x31.png", alt="Two maps of Broolyn, one using light colors and the other using dark colors.", width="782", height="398" %}
+ <figcaption>
+   Two versions of the same map, one for light mode and one for dark mode. 
+ </figcaption>
+</figure>
+
+
+## Forms
+
+Browsers provide a default color palette for form fields. 
+Let the browser know that your site offers both a dark and a light mode. 
+That way, the browser can provide the appropriate default styling for forms.
+
+Add this to your CSS:
+
+```css
+html {
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+```
+
+You can also use HTML. Add this in the `head` of your documents:
+
+```html
+<meta name="supported-color-schemes" content="light dark">
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'dyVbBWZ',
+ height: 400,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/6YuAM0ZCNhGNAjpI8fyT.mp4", controls=true, loop=true %}
+
+Use the [`accent-color`](/accent-color/) property in CSS to style checkboxes, radio buttons, and some other form fields.
+
+```css
+html {
+  accent-color: red;
+}
+```
+
+It's common for dark themes to have subdued brand colors. You can update the `accent-color` value for dark mode.
+
+```css
+html {
+  accent-color: red;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    accent-color: pink;
+  }
+}
+```
+
+It makes sense to use a custom property for this so you can keep all your color declarations in one place.
+
+```css
+html {
+  color-scheme: light;
+  --page-color: white;
+  --ink-color: black;
+  --highlight-color: red;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+    --page-color: black;
+    --ink-color: white;
+    --highlight-color: pink;
+  }
+}
+html {
+  accent-color: var(--highlight-color);
+}
+body {
+  background-color: var(--page-color);
+  color: var(--ink-color);
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'WNZeqjB',
+ height: 400,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/Dl00EnG4mwTbSQIkYBF9.mp4", controls=true, loop=true %}
+
+{% Aside %}
+For more on tinting elements with theme colors, see the section on [more tinting](/accent-color/#extra-more-tinting).
+{% endAside %}
+
+Providing a dark mode is just one example of adapting your site to suit your user's preferences. 
+Next you'll learn how to make your site adaptable to all sorts of [accessibility](/learn/design/accessibility/) considerations.
+
+{% Assessment 'theming' %}
diff --git a/src/site/content/en/learn/design/theming/theming.assess.yml b/src/site/content/en/learn/design/theming/theming.assess.yml
new file mode 100644
index 00000000000..89099b119eb
--- /dev/null
+++ b/src/site/content/en/learn/design/theming/theming.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge on theming
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "2,3"
+    stem: "To provide theme colors that impact the browser outside of the webpage, use:"
+    options:
+      - content: "CSS"
+        rationale: "CSS theme information would likely cause a flash of regular color, which is an undesirable user experience."
+      - content: "JavaScript"
+        rationale: "Only if you use it to update a 'theme-color' `<meta>` tag."
+      - content: "A web app manifest"
+        rationale: "`manifest.json` can be provided and includes fields for specifying theme colors for tinting how the app looks being opened from a mobile homescreen."
+      - content: "A 'theme-color' `<meta>` tag"
+        rationale: "As soon as possible a browser can notice this theme color in the `<head>` tag, avoiding unwanted flashes of color."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1"
+    stem: "To hook into a user's system preference regarding a light or dark theme, use:"
+    options:
+      - content: "The `(prefers-color-scheme)` media query"
+        rationale: "Pass the value you want to check for like light or dark and you're good to go."
+      - content: "JavaScript"
+        rationale: "Which then uses CSS media query syntax to ask for the current state of the preference."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2"
+    stem: "So you support dark theme, but all the form inputs are still light themed. What can you do?"
+    options:
+      - content: "Add `html { color-scheme: light dark; }` to your CSS."
+        rationale: "This signals from CSS that the form inputs should match the system color scheme."
+      - content: 'Add `<meta name="supported-color-schemes" content="light dark">` to your HTML `<head>` tag.'
+        rationale: "This signals from HTML that the form inputs should match the system color scheme."
+      - content: "Write a bunch of CSS to change all the defaults of the input."
+        rationale: "This works too, but is a bit harder."
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/typography/index.md b/src/site/content/en/learn/design/typography/index.md
new file mode 100644
index 00000000000..125e741cce0
--- /dev/null
+++ b/src/site/content/en/learn/design/typography/index.md
@@ -0,0 +1,304 @@
+---
+title: Typography
+description: >
+  Make your text legible and beautiful, no matter where it appears.
+authors:
+  - adactio
+date: 2021-12-09
+---
+
+If you don't specify any styles for your text, browsers will apply their own default styles. These are called _User Agent stylesheets_, and may vary from browser to browser. Users can set their own preferences for displaying text too.
+
+If you don't specify a line length, browsers will wrap lines of text at the edge of the screen. So text on the web is responsive by default—it flows to fit the user's viewport.
+
+But just because text fits on a screen doesn't mean it's comfortable to read. Good typography is all about presenting your text in an appropriate way. There's more to typography than choosing suitable fonts to use. You need to consider the user's preferences, the size of the text, line length, and the distance between the lines of text.
+
+{% Aside %}
+You may even need to consider the primary language of your user, as you may need to leave room for accents and other special characters. Learn more about this in the [internationalization](/learn/design/internationalization) module.
+{% endAside %}
+
+## Text size
+
+It's difficult to know what size text on the web should be.
+
+If someone is using a small screen, it might be a safe bet that their screen will be fairly close to their eyes—a hand's length away.
+
+But as screens get larger and larger, it's harder to make that connection. A laptop-size screen will probably be fairly near to the viewer, but a widescreen desktop monitor is around the same size as a television screen. People sit an arm's length away from a desktop screen but they sit much further away from a television.
+
+Still, while you can't know for certain how far away someone is from a screen, you can try to use text sizes that will hopefully turn out to be appropriate. Use smaller text sizes for smaller screens and larger text sizes for larger screens.
+
+You can use media queries to change the `font-size` property as the screen size gets wider.
+
+```css
+@media (min-width: 30em) {
+  html {
+    font-size: 125%;
+  }
+}
+
+@media (min-width: 40em) {
+  html {
+    font-size: 150%;
+  }
+}
+
+@media (min-width: 50em) {
+  html {
+    font-size: 175%;
+  }
+}
+
+@media (min-width: 60em) {
+  html {
+    font-size: 200%;
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'WNZeBWY',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/cH8IU9hV7FGCgN0roNiU.mp4", controls=true, loop=true %}
+
+## Scaling text
+
+Switching between fixed text sizes at specific breakpoints is quite jumpy. A more responsive approach is to let the user's device width influence the text size.
+
+The `vw` unit in CSS stands for “viewport width.” Connecting font sizes to the 
+ viewport's width means that the text will grow and shrink in proportion to the browser width. This makes it difficult to predict what the text size will be at any specific width, but you know that the text size will be appropriate for the user's browser width.
+
+It's important that you don't use the `vw` by itself in a font-size declaration.
+
+{% Compare 'worse' %}
+
+```css
+html {
+  font-size: 2.5vw;
+}
+```
+
+{% endCompare %}
+
+If you do, the user won't be able to resize the text. The text will be resizable if you mix in a relative unit—like `em`, `rem` or `ch`. The CSS [`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc()) function is perfect for this.
+
+{% Compare 'better' %}
+
+```css
+html {
+  font-size: calc(0.75rem + 1.5vw);
+}
+```
+
+{% endCompare %}
+
+Let the browser do the math. This makes it difficult to predict exactly what the text size will be at any specific width, but you know that the text size will be in the right range. The user's browser takes care of figuring out the exact text size calculations.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'zYEOQQG',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/x5h7TqkGHJIPa61wPvAs.mp4", controls=true, loop=true %}
+
+But now there's a possibility that the text will get *too* small on narrow screens and *too* big on wide screens.
+
+## Clamping text
+
+You probably don't want your text to shrink and grow to extremes. You can control where the scaling starts and ends using the CSS [`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp()) function. This “clamps” the scaling to a specific range.
+
+The `clamp()` function is  like the `calc()` function but it takes three values. The middle value is the same as what you pass to `calc()`. The opening value specifies the minimum size, in this case 1rem so as to not go below the user's preferred font size. The closing value specifies the maximum size.
+
+```css
+html {
+  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'wvrwbbx',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+Now the text size shrinks and grows in proportion to the user's screen but the text size will never go below `1rem` or above `2rem`.
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/vVwP2L0z90zXL28iPYL4.mp4", controls=true, loop=true %}
+
+## Line length
+
+The web is not print, but we can learn lessons from the world of print and apply them on the web.
+
+In his classic book [*The Elements of Typographic Style*](http://webtypography.net/2.1.2), Robert Bringhurst had this to say on line length (or measure):
+
+> Anything from 45 to 75 characters is widely regarded as a satisfactory line length for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.
+
+You can't set a line length directly in CSS. There is no `line-length` property. But you can stop text from getting too wide by limiting how wide the container can be. The [`max-inline-size`](https://developer.mozilla.org/docs/Web/CSS/max-inline-size) property is perfect for this.
+
+Don't set your line-lengths with a fixed unit like `px`. Users can scale their font size up and down and your line lengths should adjust accordingly. Use a [relative unit](/learn/css/sizing/#relative-lengths) like `rem` or `ch`.
+
+{% Compare 'worse' %}
+
+```css
+article {
+  max-inline-size: 700px;
+}
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```css
+article {
+  max-inline-size: 66ch;
+}
+```
+
+{% endCompare %}
+
+Using `ch` units for width will cause new lines to wrap at the 66th character at that font size.
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'MWEgddN',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/9Nxi6HuU28aQhxtzXq7l.mp4", controls=true, loop=true %}
+
+## Line height
+
+Although there is no `line-length` property in CSS, there is a [`line-height`](https://developer.mozilla.org/docs/Web/CSS/line-height) property.
+
+Shorter lines of text can have larger `line-height` values. But if you use large `line-height` values for long lines of text, it's hard for the reader's eye to move from the end of one line to the start of the next line.
+
+```css
+article {
+  max-inline-size: 66ch;
+  line-height: 1.65;
+}
+blockquote {
+  max-inline-size: 45ch;
+  line-height: 2;
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'oNGvRrZ',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/di6psFbT6JhlwjtMm68j.mp4", controls=true, loop=true %}
+
+Use unitless values for your `line-height` declarations. This ensures that the line height is relative to the `font-size`.
+
+{% Compare 'worse' %}
+
+```css
+line-height: 24px;
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```css
+line-height: 1.5;
+```
+
+{% endCompare %}
+
+## Combinations and scale
+
+Remember to prioritize hierarchy as you build your user interfaces for better clarity and page flow. A great way to do this is with [a typography scale built into your design system](https://material.io/design/typography/the-type-system.html#type-scale).
+
+## Web fonts
+
+A typeface is like a voice for your words. For the longest time on the web there were very few font options. System fonts were the only options. But now you can choose a web font that matches the feel of your content.
+
+Use `@font-face` to tell browsers where to find your web font files. Use woff2 as your web font format. It's well supported and has the best performance gains.
+
+```css
+@font-face {
+  font-family: Roboto;
+  src: url('/fonts/roboto-regular.woff2') format('woff2');
+}
+body {
+  font-family: Roboto, sans-serif;
+}
+```
+
+But every web font file you add could potentially degrade the user experience as it increases page load time. Remember, design isn't just about how the final pixels look. How fast those pixels get painted is a critical part of the user experience. An experience that feels fast is a good user experience.
+
+## Font loading
+
+You can request that browsers start downloading a font file as soon as possible. Add a `link` element to the `head` of your document that references your web font file. A `rel` attribute with a value of `preload` tells the browser to prioritize that file. An `as` attribute with a value of `font` tells the browser what kind of file this is. The `type` attribute allows you to be even more specific.
+
+```html
+<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
+  rel="preload" as="font" crossorigin>
+```
+
+You need to include the `crossorigin` attribute even if you are hosting the font files yourself.
+
+Use the CSS [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) property to tell the browser how to manage the switchover from a system font to a web font. You could choose to show no text at all until the web font is loaded. You could choose to display the system font immediately and then switch over to the web font once it loads. Both strategies have their downsides. If you wait until the web font is downloaded before showing any text, users may find themselves staring at a blank page for a frustratingly long time. If you show the text in a system font first and then switch over to the web font, users may experience a jarring shifting of content on the page.
+
+{% Aside %}
+You can mitigate the jarring effect of text shifting around by using [`size-adjust`](/css-size-adjust/) in your `@font-face` rule.
+{% endAside %}
+
+A good compromise is to wait for a short while before displaying any text. If the web font loads before that time is up, the text is displayed using the web font with no content shifts. If the web font still hasn't loaded after the time is up, the text is displayed using the system font so at least the user can read the content.
+
+Use a `font-display` value of `swap` if you still want the web font to replace the system font whenever the web font finally loads.
+
+```css
+body {
+  font-family: Roboto, sans-serif;
+  font-display: swap;
+}
+```
+
+Use a `font-display` value of `fallback` if you want to stick with the system font once text has been rendered.
+
+```css
+body {
+  font-family: Roboto, sans-serif;
+  font-display: fallback;
+}
+```
+
+## Variable fonts
+
+If you are using lots of different weights or styles of the same typeface, you may end up using lots of separate font files—a separate font file for each weight or style.
+
+[Variable fonts](/variable-fonts/) solve this problem by using one file. Instead of having separate files for regular, bold, extra bold, and so on, a variable font file is responsive. It contains all the information it needs to be displayed across a spectrum of weights or styles.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ecr5godvTKunVXP7W8aU.png", alt="The letter 'A' shown in different weights.", width="800", height="218" %}
+
+
+This means that a single variable font file is larger than a single regular font file, but a single variable font file will probably be smaller than multiple regular font files. If you're using lots of different weights, a variable font could give you a big performance gain.
+
+{% Aside %}
+If you're styling elements using the `system-ui` value for `font-face` property, you might get all the benefits of variable fonts without downloading any font files. [More and more system fonts are now variable fonts](/more-variable-font-options-in-chromium-83/).
+{% endAside %}
+ 
+Good typography on the web isn't just about the type choices that you make as a designer. Responsive typography is also about respecting the user's device and network connection. The end result is a design that feels right no matter how it's being viewed.
+
+Now that you've mastered responsive text, it's time to dive into [responsive images](/learn/design/responsive-images).
+
+{% Assessment 'typography' %}
diff --git a/src/site/content/en/learn/design/typography/typography.assess.yml b/src/site/content/en/learn/design/typography/typography.assess.yml
new file mode 100644
index 00000000000..cf3d980eb4a
--- /dev/null
+++ b/src/site/content/en/learn/design/typography/typography.assess.yml
@@ -0,0 +1,52 @@
+setLeader: Test your knowledge on typography
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Styles must be added for text to wrap within the viewport."
+    options:
+      - content: "True"
+        rationale: "Adding styles is not necessary."
+      - content: "False"
+        rationale: "Text will wrap by default without any additional styles."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "`clamp()` is useful for fluid typography because"
+    options:
+      - content: "It allows easy embedding of `calc()` functions"
+        rationale: "While this is true, it's not a good reason to use `clamp()` for typography."
+      - content: "The browser support for it is great."
+        rationale: "While this is true, it's not a good reason to use `clamp()` for typography."
+      - content: "It allows locking the font size between sensible minimums and maximums while also providing a scalable middle value."
+        rationale: "Exactly, prevent too small or too large text, while also providing a smooth scaling font size."
+      - content: "It makes the math easy."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "Which type of `line-height` values were recommended in this guide?"
+    options:
+      - content: "`24px`"
+        rationale: "The post explicitly says don't use pixel values for `line-height`."
+      - content: "`2rem`"
+        rationale: "While rems are relative values, they can still create too small or too large line-heights."
+      - content: "`1.5`"
+        rationale: "Unitless relative values are recommended."
+      - content: "`2vw`"
+        rationale: "Viewport units as `line-height` would problematic."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3"
+    stem: "What does `font-display` do?"
+    options:
+      - content: "Tells the browser how to manage switching from a system font to a web font."
+        rationale: "Helps with the transition to a custom font."
+      - content: "Allows setting the font to `block` or `inline-block`."
+        rationale: "Fonts do not have display types."
+      - content: "Changes if the font is hidden or not."
+        rationale: "Fonts cannot be hidden."
+      - content: "Provides control for timing the user experience of loading remote fonts."
+        rationale: "Helps authors tailor the loading experience of custom fonts."
\ No newline at end of file
diff --git a/src/site/content/en/learn/design/ui-patterns/index.md b/src/site/content/en/learn/design/ui-patterns/index.md
new file mode 100644
index 00000000000..ec4a0ef8211
--- /dev/null
+++ b/src/site/content/en/learn/design/ui-patterns/index.md
@@ -0,0 +1,160 @@
+---
+title: User interface patterns
+description: >
+  Consider some common UI elements that adapt to different screen sizes.
+authors:
+  - adactio
+date: 2021-12-23
+updated: 2022-03-18
+---
+
+A design viewed on a small screen shouldn't look like a shrunk-down version of a large-screen layout. Likewise, a design viewed on a large screen shouldn't look like a blown-up version of a small-screen layout. Instead, the design needs to be flexible enough to adapt to all screen sizes. A successful responsive design makes the most of every form factor.
+
+This means that some interface elements may need to look quite different depending on the context they're viewed in. You might need to apply very different CSS to the same HTML codebase to make the most of different screen sizes. That can be quite a design challenge!
+
+Here are some common challenges that you might face.
+
+## Navigation
+
+Displaying a list of navigation links is quite straightforward on a large screen. There's plenty of space to accommodate those links.
+
+On a small screen, space is at a premium. When you're designing for this situation, it's tempting to hide navigation behind a button. The problem with this solution is that users have to then take two steps to get anywhere: open the menu, then choose an option. Until the menu is opened, the user is left wondering "where can I go?”
+
+Try to find a strategy that avoids hiding your navigation. If you have a relatively small number of items, you can style the navigation to look good on small screens.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/s1fif52p8RcE758OkSvB.png", alt="The same website with five navigation links viewed in a mobile browser and viewed in a tablet browser. The navigation is visible on both devices.", width="800", height="409" %}
+
+That pattern won't scale if your navigation has lots of links. The navigation will look cluttered if the links wrap onto two or three lines on a small screen.
+
+One possible solution is to keep links on one line but truncate the list at the edge of the screen. Users can swipe horizontally to reveal the links that aren't immediately visible. This is the overflow pattern.
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/jNM3gZrkksJc6banrxcE.mp4", controls=true %}
+
+The advantage of this technique is that it scales to any device width and any number of links. The disadvantage is that users might miss links that aren't initially visible. If you use this technique for your main navigation, make sure the first few links are the most important ones and visually indicate that there are more items in the list. The previous example uses a gradient for this indicator.
+
+As a last resort you could choose to have your navigation hidden by default and provide a toggle mechanism for users to show and hide the contents. This is called progressive disclosure.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/DiGHrNu300JMj8i9X01U.png", alt="The same website with five navigation links viewed in a mobile browser and viewed in a tablet browser. The navigation is visible on the tablet, but hidden on the mobile device.", width="800", height="409" %}
+
+Make sure the button that toggles the display of the navigation is labeled. Don't rely on an icon to be understood.
+
+{% Img src="image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/cyuj5HvE6x9c8OBiM527.png", alt="Three unlabelled icons: the first is three horizontal lines; the second is three by three grid; the third is three circles arranged vertically.", width="640", height="240" %}
+
+An unlabelled icon is "mystery meat” navigation—users won't know what's in there until they bite into it. Provide a text label to let users know what the button will reveal.
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/jzRDWQyKNcV1JNBU6mYS.mp4", controls=true, loop=true %}
+
+## Carousels
+
+What's true of navigation is also true of other content: try not to hide anything anyway. A carousel is a common method of hiding content away. It can look quite neat, but there's a good chance that your users will never discover the hidden content. Carousels are better at solving organizational problems—like what content should feature on the homepage—than at serving users.
+
+That said, when space is at a premium, carousels can prevent a page getting too long and cluttered. You could employ a hybrid approach: show content in a carousel for small screens, but display the same content in a grid for larger screens.
+
+For narrow screens, display items in a row using flexbox. The row of items will extend beyond the edge of the screen. Use `overflow-x: auto` to allow horizontal swiping.
+
+```css
+@media (max-width: 50em) {
+  .cards {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    scroll-snap-type: inline mandatory;
+    scroll-behavior: smooth;
+  }
+  .cards .card {
+    flex-shrink: 0;
+    flex-basis: 15em;
+    scroll-snap-align: start;
+  }
+}
+```
+
+{% Aside %}
+The logical version of `overflow-x` is [`overflow-inline`](https://developer.mozilla.org/docs/Web/CSS/overflow-inline) which would better match with the value for `scroll-snap-type`. This example uses the physical version for better cross-browser support.
+{% endAside %}
+
+The [`scroll-snap`](/css-scroll-snap/) properties ensure that the items can be swiped in a way that feels smooth. Thanks to `scroll-snap-type: inline mandatory`, the items snap into place.
+
+When the screen is large enough—wider than `50em` in this case—switch over to grid and display the items in rows and columns, without hiding anything.
+
+```css
+@media (min-width: 50em) {
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+  }
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'XWeNPzY',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Video src="video/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/jw00jziSxqLm3JBYRk5o.mp4", controls=true %}
+
+Crucially, an item in the carousel view doesn't take up the full width. If it did, there would be no indication that more content is available beyond the edge of the viewport.
+
+Carousels are another example of the overflow pattern in action. If you have many items that people can browse through, you could keep using the overflow pattern even on large screens, including televisions. This [media scroller](https://gui-challenges.web.app/media-scroller/dist/) uses multiple carousels to manage a significant amount of options.
+
+Again, the `scroll-snap` properties ensure that the interaction feels smooth. Also, notice that the images in the carousel have `loading="lazy"` applied to them. In this case, the images aren't below the fold, they're beyond the edge, but the same principle applies: if the user never swipes as far as that item, the image won't be downloaded, saving on bandwidth.
+
+{% Codepen {
+ user: 'argyleink',
+ id: 'bGgyOGP',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+{% Aside %} 
+The previous example shows a more complete demo, you can read more about it in the article [building a media scroller component](/building-a-media-scroller-component/).
+{% endAside %}
+
+With the addition of JavaScript, you can add interactive controls to a carousel. You could even make it automatically cycle through items. But think long and hard before doing that—autoplaying might work if the carousel is the only content on the page, but an autoplaying carousel is incredibly annoying if someone is trying to interact with other content (like reading text, for example). You can read more [carousel best practices](/carousel-best-practices/).
+
+{% CodePattern '/web-vitals-patterns/carousels/carousel-autoplay/' %} 
+
+## Data tables
+
+The `table` element is perfect for structuring tabular data; rows and columns of related information. But if the table gets too large, it could break your small-screen layout.
+
+You can apply the overflow pattern to tables. In this example, the table is wrapped in a `div` with a class of `table-container`.
+
+```css
+.table-container {
+  max-inline-size: 100%;
+  overflow-x: auto;
+  scroll-snap-type: inline mandatory;
+  scroll-behavior: smooth;
+}
+.table-container th, 
+.table-container td {
+  scroll-snap-align: start;
+  padding: var(--metric-box-spacing);
+}
+```
+
+{% Codepen {
+ user: 'web-dot-dev',
+ id: 'MWEbqQQ',
+ height: 500,
+ theme: 'dark',
+ tab: 'result'
+} %}
+
+## Guidelines
+
+The overflow pattern is a good compromise for small screens but make sure it's clear that the off-screen content is reachable. Consider placing a shadow or a gradient over the edge where content is truncated.
+
+Progressive disclosure is a useful way to save space, but be careful about using it for very important content. It's better suited to secondary actions. Ensure the interface element that triggers the disclosure is clearly labeled—don't rely on iconography alone.
+
+Design for smaller screens first. It's easier to adapt small-screen designs to larger screens than the other way around. If you design for a large screen first, there's a danger that your small-screen design will feel like an afterthought.
+
+For more layout and UI element patterns, explore the web.dev [Patterns](/patterns) section.
+
+When you're adapting interface elements to different screen sizes, media queries are very useful for figuring out the dimensions of the device. But media features like `min-width`and `min-height` are just the beginning. Next, you'll discover a whole host of other media features.
+
diff --git a/src/site/content/en/learn/forms/accessibility/index.md b/src/site/content/en/learn/forms/accessibility/index.md
new file mode 100644
index 00000000000..749e5b2ea86
--- /dev/null
+++ b/src/site/content/en/learn/forms/accessibility/index.md
@@ -0,0 +1,192 @@
+---
+title: Accessibility
+description: >
+  How to build inclusive forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+The form you build is for people.
+People use different devices.
+Some use a mouse, some a touch device, some the keyboard,
+some a device controlled by eye movements.
+Some use a screen reader, some a small screen, some use text enlargement software.
+Everybody wants to use your form. Learn how to make your form accessible and usable for everyone.
+
+## Ensure users understand the purpose of a form field
+
+There are many [form controls](/learn/forms/fields) you can choose from.
+What do they all have in common?
+Every form control must have an associated `<label>` element.
+The `<label>` element describes the purpose of a form control.
+The `<label>` text is visually associated with the form control, and read out by screen readers.
+
+In addition, tapping or clicking the `<label>` focuses the associated form control,
+making it a larger target.
+
+{% Aside %}
+The next time you add a form control, add the `<label>` first. Think about the purpose of the
+  form control, and describe the purpose to the user. Make it easy for people to enter valid data
+  quickly and accurately.
+{% endAside %}
+
+## Use meaningful HTML to access built-in browser features
+
+In theory, you could build a form using only `<div>` elements.
+You can even make it look like a native `<form>`.
+What's the problem with using
+[non-semantic](https://developer.mozilla.org/docs/Glossary/Semantics) elements?
+
+Built-in form elements provide a lot of built-in features. Let's have a look at an example.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '2f56a723b5045ea990d38c2c170c3037',
+  height: 450,
+  tab: 'html,result'
+} %}
+
+Visually, the `<input>` (the first one in the example) and the `<div>` look the same.
+You can even insert text for both, as the `<div>` has a
+[`contenteditable`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/contenteditable) attribute.
+There are lots of differences, though, between using an appropriate `<input>` element and a `<div>`
+  looking like an `<input>`.
+
+A screen reader user doesn't recognize the `<div>` as an input element,
+and isn't able to complete the form.
+All the screen reader user hears is 'Name',
+with no indication that the element is a form control for adding text.
+
+Clicking on `<div>Name</div>` doesn't focus the `<div>` that goes with it, whereas the `<label>` and
+  the `<input>` are connected by using the `for` and `id` attributes.
+
+After submitting the form, the data entered in the `<div>` isn't included in the request.
+While attaching the data with JavaScript is possible,
+an `<input>` does that by default.
+
+Built-in form elements have other features.
+For example, with appropriate form elements and the correct `inputmode` or `type`,
+an on-screen keyboard shows appropriate characters. Using the `inputmode` attribute on a `<div>`
+  cannot do that.
+
+## Ensure users are aware of the expected data format
+
+You can define various validation rules for a form control.
+For example, say a form field should always have at least eight characters.
+You use the `minlength` attribute, indicating the validation rule to browsers.
+How can you ensure users also know about the validation rule? Tell them.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'b03a4c83688c1b02ab12f9873f1f6614',
+  height: 350,
+  tab: 'html,result'
+} %}
+
+Add information about the expected format directly beneath the form control.
+To make it clear for assistive devices,
+use the `aria-describedby` attribute on the form control,
+and an `id` on the error message with the same value, to connect both.
+
+## Help users find the error message for a form control
+
+In a previous module about [validation](/learn/forms/validation),
+you learned how to show error messages in case of invalid data entry.
+
+```html
+<label for="name">Name</label>
+<input type="text" name="name" id="name" required>
+```
+
+For example, if a field has a `required` attribute, and invalid data is entered, the browser shows
+an error message next to the form control when the form is submitted. Screen readers also announce the error message.
+
+You can also define your own error message:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'b7ed22a0539f9beef4dc03380f51f224',
+  height: 300,
+  tab: 'html,result'
+} %}
+
+This example needs more changes to connect the error message to the form control.
+
+A simple approach is to use the `aria-describedby`
+attribute on the form control that matches the `id` on the error message element.
+Then, use [`aria-live="assertive"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) for the error message.
+ARIA live regions announce an error to screen reader users the moment the error is shown.
+
+The problem with this approach for forms with multiple fields,
+is that `aria-live` will usually only announce the first error in the case of multiple errors.
+As explained in [this article about multiple `aria-live` announcements on the same action](https://gaurav5430.medium.com/quick-accessibility-wins-multiple-aria-live-on-single-action-caveat-b79a6f41e7cc) you could create a single message by concatenating all the errors. Another approach would be to announce that there are errors, then announce individual errors when the field is focused.
+
+## Ensure users recognize errors
+
+Sometimes designers color the invalid state red,
+using the `:invalid` pseudo-class.
+However, to communicate an error or success,
+you should never rely only on color.
+For people with red-green color blindness,
+a green and a red border look almost the same.
+It's impossible to see if the message is related to an error.
+
+In addition to color, use an icon, or prefix your error messages with the error type.
+
+```html
+<span class="error">
+  <strong>Error:</strong>Please use at least eight characters.
+</span>
+```
+
+## Help users to navigate your form
+
+You can change the visual order of form controls with CSS.
+A disconnect between visual order and keyboard navigation (DOM order)
+is problematic for screen reader and keyboard users.
+
+Learn more about how to ensure
+[visual order on the page follows DOM order](/visual-order-follows-dom/).
+
+## Help users to identify the currently focused form control
+
+Use your keyboard to navigate through
+[this form](https://codepen.io/web-dot-dev/pen/c4ab903b77cdfc05dac4707fca69b997).
+Did you recognize that the styling of the form controls changed once they were active?
+This is the default focus style.
+You can override it with the
+[`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus) CSS pseudo-class.
+Whatever styles you use inside `:focus`,
+always make sure the visual difference between the default state and the focus state is recognizable.
+
+{% Aside %}
+If you want to remove the default `:focus` styles but still show focus indicators for keyboard users,
+you can use the [`:focus-visible`](/style-focus/#use-focus-visible-to-selectively-show-a-focus-indicator) CSS pseudo-class.
+{% endAside %}
+
+Learn more about
+[designing focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/).
+
+## Ensure your form is usable
+
+You can identify many common issues by filling out your form with different devices.
+Use only your keyboard, use a screen reader (such as
+[NVDA](https://www.nvaccess.org/) on Windows or
+[VoiceOver](https://en.wikipedia.org/wiki/VoiceOver) on Mac),
+or zoom the page to 200%.
+Always test your forms on different platforms,
+especially devices or settings you don't use every day.
+Do you know someone using a screen reader,
+or someone using text enlargement software? Ask them to fill out your form.
+Accessibility reviews are great, testing with real users is even better.
+
+Learn more about doing an
+[accessibility review](/how-to-review/)
+and how to [test with real users](/learn/forms/usability-testing).
+
+## Resources
+
+- [WebAIM: Creating Accessible Forms](https://webaim.org/techniques/forms)
+- [WCAG: autocomplete accessibility benefits](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)
+- [Focus Indicators](https://www.sarasoueidan.com/blog/focus-indicators/)
diff --git a/src/site/content/en/learn/forms/address/index.md b/src/site/content/en/learn/forms/address/index.md
new file mode 100644
index 00000000000..3a476a03e3f
--- /dev/null
+++ b/src/site/content/en/learn/forms/address/index.md
@@ -0,0 +1,87 @@
+---
+title: Address forms
+description: >
+  Help users fill out address forms quickly and easily.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+Filling in an address can be time-consuming and frustrating. 
+What is an **Address line 2**? 
+You may not have a surname, so what should you enter in a **Surname** field? 
+Avoid these confusions and help users fill out address forms.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: '6af9430bd0fc87b3850bb187409ce312',  
+  height: 650  
+} %}
+
+## Ensure your address form is easy to use
+
+Many forms use one field for first name and one for surname. 
+However, some people don't have a surname, or their names don't have two parts, 
+so how should they fill in the surname field? Use a single `<input>` for the name field. 
+Learn more about [handling different name formats](/learn/forms/internationalization/#ensure-your-form-can-handle-different-name-formats).
+
+{% Aside 'caution' %}  
+Never restrict the allowed characters for names to 
+[Latin-only](https://en.wikipedia.org/wiki/Latin_alphabet). 
+Allow [Unicode characters](/payment-and-address-form-best-practices/#unicode-matching) 
+for the name `<input>` to ensure everybody can fill in their name.  
+{% endAside %}
+
+Also use a single `<input>` for the street address–not every address has a street number.
+
+{% Aside %}  
+According to [research](https://baymard.com/blog/address-line-2), 
+**Address line 2** can be confusing for users. 
+Consider using a `<textarea>` for the whole address, 
+or hide the **Address line 2** field behind a reveal `<button>`.  
+{% endAside %}
+
+Be careful with form control descriptions. 
+For example, users in the US say **ZIP**, in the UK **postcode**. 
+Use `<label for="zip">ZIP or postal code (optional)</label>` 
+to make sure users know what data to enter. 
+Make the postal code field optional–not every address has a postal code.
+
+{% Aside %}  
+You can use services like 
+[Place Autocomplete](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform) or 
+[Loqate](https://www.loqate.com/en-us/) to help users look up addresses. 
+Consider [avoiding postcode address lookup](/payment-and-address-form-best-practices/#postal-code-address-lookup), 
+and only provide address lookup as an extra option: don't force people to use it.  
+{% endAside %}
+
+## Help users enter their address
+
+The `autocomplete` attribute can help users re-enter their address: 
+* `autocomplete="name"`
+* `autocomplete="street-address"`
+* `autocomplete="postal-code"`
+* `autocomplete="country"`
+
+{% Aside %}  
+There are two possible `autocomplete` values for the country: 
+* `country`: country or territory code
+* `country-name`: country or territory name 
+
+Use `autocomplete="country"` for `<select>` where the `value` for the `<option>` is the country code. 
+Want to use an `<input>` for the country name? Use `autocomplete="country-name"`.  
+{% endAside %}
+
+You can define multiple values separated by a space for `autocomplete`. 
+Say you have a form with a shipping address and another form for a billing address. 
+To tell the browser which postal code is for the billing address, 
+you can use `autocomplete="billing postal-code"`. 
+For the shipping address, use `shipping` as the first value.
+
+Change the label for the `Enter` key on on-screen keyboards with the `enterkeyhint` attribute. 
+Use `enterkeyhint="done"` for the last form control, and `enterkeyhint="next"` for the other form controls.
+
+## Resources
+
+-  [Payment and address forms best practices](/payment-and-address-form-best-practices)
+-  [Form Usability: Getting ‘Address Line 2' Right](https://baymard.com/blog/address-line-2)
diff --git a/src/site/content/en/learn/forms/attributes/attributes.assess.yml b/src/site/content/en/learn/forms/attributes/attributes.assess.yml
new file mode 100644
index 00000000000..54189912187
--- /dev/null
+++ b/src/site/content/en/learn/forms/attributes/attributes.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of form attributes
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What attribute can you use to change the label of the `Enter` key on an on-screen keyboard?
+    options:
+      - content: "`enterkey`"
+        rationale: "Try again!"
+      - content: "`enterkeyhint`"
+        rationale: "🎉"
+      - content: "`enterkeytext`"
+        rationale: "Try again!"
+      - content: "`enterkeylabel`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What's the difference between the `value` property and `getAttribute('value')`?
+    options:
+      - content: "The `value` property returns the current value, `getAttribute('value')` returns the initial value."
+        rationale: "🎉"
+      - content: "The `value` property returns the initial value, `getAttribute('value')` returns the current value."
+        rationale: "Try again!"
+      - content: "There is no difference."
+        rationale: "Try again!"
+      - content: "The `value` property returns the key and value, `getAttribute('value')` only returns the value."
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/forms/attributes/index.md b/src/site/content/en/learn/forms/attributes/index.md
new file mode 100644
index 00000000000..d59593bcef9
--- /dev/null
+++ b/src/site/content/en/learn/forms/attributes/index.md
@@ -0,0 +1,158 @@
+---
+title: Form attributes in depth
+description: >
+  Learn all about form attributes: how to modify the layout of on-screen keyboards, activate built-in validation, and more.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+HTML element attributes can enhance your `<form>` and form controls.
+
+## Help users fill in form controls
+
+To make it easier for users to fill out forms, 
+use an appropriate `type` attribute for your `<input>` elements. 
+
+Browsers display a user interface appropriate for the `type`, 
+such as a date picker for an `<input>` of type `date`. 
+Browsers on mobile devices show an adapted on-screen keyboard, 
+such as a telephone number keypad for `type="tel"`.
+
+Some `<input>` types also change validation rules for an element when its form is submitted. 
+`<input type="url">`, for example, is only valid if it's not empty and the value is a URL.
+
+## Ensure users enter data
+
+There are different attributes for providing an appropriate on-screen keyboard on touch devices. 
+The first option is to use the `type` attribute, as mentioned above. 
+
+Another option is the `inputmode` attribute supported on 
+[Android and iOS](https://caniuse.com/?search=inputmode). 
+In contrast to the `type` attribute, the `inputmode` attribute only changes the on-screen keyboard 
+provided, not the behavior of the element itself. Using `inputmode` is a good option if you want to 
+keep the default user interface and the default validation rules of an `<input>`, but still want an 
+optimized on-screen keyboard.
+
+{% Aside 'caution' %}
+Use `type="number"` only for incremental fields such as the quantity of a product. 
+Browsers show an up/down arrow for `type="number"` which makes no sense for telephone numbers, 
+payment card or account numbers. 
+For telephone numbers, use `type="tel"`. For other numbers, use `inputmode="numeric"` to get a numeric on-screen keyboard.
+{% endAside %}
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg",
+alt="Two screenshots of Android phones, showing a keyboard appropriate for entering an email addresses (using type=email) and for entering a telephone number (with type=tel).", width="800", height="696" %}
+
+You can change the `Enter` key on on-screen keyboards with the `enterkeyhint` attribute. 
+For example, `enterkeyhint="next"` or `enterkeyhint="done"` changes the button label to an appropriate icon. 
+This helps make it clearer for users what happens when they submit the current form.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png",
+alt="Two screenshots of an address form on Android showing how the enterkeyhint input attribute changes the enter key button icon.", width="800", height="696" %}
+
+{% Aside 'warning' %}
+Automatically focusing a form control using the `autofocus` attribute can confuse people, 
+including screen reader users and people with cognitive impairments. Therefore, our advice is that you should not use the `autofocus` attribute.
+{% endAside %}
+
+## Ensure users can submit a form
+
+Say, you fill out a `<form>`, click the **Submit** button, but nothing happens. 
+The issue may be that the button has been disabled with the `disabled` attribute. 
+It's a common pattern to disable the **Submit** button until the form is valid.
+
+In theory this sounds sensible, but you shouldn't disable a **Submit** button while waiting on 
+complete and valid user input. Instead, highlight invalid data when it's entered, and highlight 
+problematic fields to the user when they submit the form. 
+
+However, you may want to disable the **Submit** button once the form is successfully submitted, but 
+not yet processed. Learn more about [disabled buttons](https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/#when-disabled-buttons-and-states-work-well).
+
+## Help users by showing the data they previously entered
+
+Imagine you have a checkout form with multiple steps. 
+How do you ensure the previously entered values are still there when the user returns to a previous step? 
+Use the `value` attribute to show values already completed.
+
+```html
+<label for="name">Name</label>
+<input value="Hilda" name="name" id="name" type="text">
+```
+
+There are multiple  ways to retrieve the value of a form control in JavaScript. 
+You can use the 
+[`value`](https://developer.mozilla.org/docs/Web/HTML/Element/input#attr-value) property, or you can access the value with 
+[`getAttribute('value')`](https://developer.mozilla.org/docs/Web/API/Element/getAttribute). 
+There is one big difference, 
+the `value` property always returns the current value, 
+and using `getAttribute()` always returns the initial value.
+
+[Try it out](https://codepen.io/web-dot-dev/pen/20359edfc39a65c291c3c186a33ab0db?editors=0011)! 
+Change the text of the name field and watch the console. 
+Notice how the `value` property returns the currently visible text, 
+while `getAttribute('value')` always returns the initial value.
+
+Learn more about the difference between 
+[DOM attributes and DOM properties](https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6004028#6004028).
+
+{% Aside %}
+To get all form control values use 
+[`FormData`](https://developer.mozilla.org/docs/Web/API/FormData). 
+The `FormData` object is a set of key/value pairs representing the form controls, 
+and the format is the same as the 
+[`submit()`](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/submit) method uses.
+{% endAside %}
+
+For `<input>` elements of type `checkbox` or `radio` use the `checked` attribute. 
+Add it if the user selected an option and remove it otherwise.
+
+## Ensure users understand the expected format
+
+The value of the `placeholder` attribute is a hint for what kind of information is expected. 
+
+```html
+<label for="name">Name</label>
+<input type="text" name="name" id="name" placeholder="Karin">
+```
+
+This may confuse users, 
+as it may seem illogical why a form control appears to be already prefilled. 
+In addition, adding a placeholder can make it difficult to see which form fields still need to be completed. 
+Furthermore, the default style of placeholder text can be hard to read.
+
+In general, be cautious when using the `placeholder` attribute and never use the `placeholder` attribute to explain a form control. 
+Use the `<label>` element instead. 
+Learn more about 
+[why you should consider avoiding the `placeholder` attribute](https://www.smashingmagazine.com/2018/06/placeholder-attribute/).
+
+A better way to give users a hint about what kind of information is expected is to use an extra HTML element 
+beneath the form control to add an explanation or example.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '90199b1fdcbfbcea425686884344352d',
+  height: 300
+} %}
+
+## Ensure form controls are ready for validation
+
+There are various HTML attributes available to activate built-in validation. 
+Use the `required` attribute to prevent the submission of empty fields. 
+Additional validations can be enforced with the `type` attribute. 
+For example, the value of a required `<input>` of `type="url"` must be a URL.
+
+To ensure a user enters a minimum number of characters, 
+use the `minlength` attribute. 
+To disallow any value with more than a maximum number of characters, 
+use the `maxlength` attribute. 
+For numeric input types such as `<input type="number">`, use the `min` and `max` attribute instead.
+
+Find out more about validation: [Help users enter the right data in forms](/learn/forms/validation/).
+
+{% Assessment 'attributes' %}
+
+## Resources
+
+- [`<input>` HTML attributes](https://developer.mozilla.org/docs/Web/HTML/Element/input#attributes)
+- [Global HTML attributes](https://developer.mozilla.org/docs/Web/HTML/Global_attributes)
diff --git a/src/site/content/en/learn/forms/auto/auto.assess.yml b/src/site/content/en/learn/forms/auto/auto.assess.yml
new file mode 100644
index 00000000000..70349fe49da
--- /dev/null
+++ b/src/site/content/en/learn/forms/auto/auto.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of autofill
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0,1,2,3"
+    stem: Based on which attributes is autofill offered?
+    options:
+      - content: "The `name` attribute."
+        rationale: "Correct, browsers offer autofill based on this attribute among others."
+      - content: "The `type` attribute"
+        rationale: "Correct, browsers offer autofill based on this attribute among others."
+      - content: "The `autocomplete` attribute"
+        rationale: "Correct, browsers offer autofill based on this attribute among others."
+      - content: "All of the above"
+        rationale: "Correct, all the mentioned attributes help browsers offering autofill."
diff --git a/src/site/content/en/learn/forms/auto/index.md b/src/site/content/en/learn/forms/auto/index.md
new file mode 100644
index 00000000000..6395921e119
--- /dev/null
+++ b/src/site/content/en/learn/forms/auto/index.md
@@ -0,0 +1,88 @@
+---
+title: Help users avoid re-entering data in forms
+description: >
+  Make it more convenient for users to fill out forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+After learning about the
+[form element](/learn/forms/form-element) and how to make a form
+[interactive](/learn/forms/form-fields),
+let's see how you can help users avoid re-entering data.
+
+## Make the most of autofill
+
+Filling out forms can be time-consuming.
+For example, re-entering your address repeatedly on every site where you want to buy something is not a great shopping experience.
+
+Autofill can help you here.
+You enter your address once.
+From now on, your browser will offer you the option to fill in the same address for other forms automatically.
+
+You moved to another city?
+Don't worry about getting the old address as an option forever.
+You can edit the address data your browser has saved for you to keep it up-to-date.
+
+{% Aside %}
+Browsers also help with remembering data. You sign up for a site.
+For the password field, you get the option to generate and store a secure password.
+If you want to log in later at the same site, your browser offers you the option to fill in the stored password.
+{% endAside %}
+
+## How does autofill work in the browser?
+{% BrowserCompat 'html.global_attributes.autocomplete' %}
+
+An address field can look very different on different sites.
+How does a browser know that it is an address field?
+
+Browsers use
+heuristics to identify an address field.
+What are the values of the `name`, `type`, and `id` attributes?
+Is there an [`autocomplete` attribute](/learn/forms/auto#autocomplete) present on the form control?
+
+Based on this information,
+browsers can offer the option to autofill a field with previously entered data of the same type.
+Browsers can even offer to autofill an entire form.
+
+## Help browsers with autofill
+
+Let's see what you can do to help browsers offer the correct autofill options.
+
+### Use sensible attribute values
+
+As you learned, browsers can identify the data type by looking at the attributes of a form control.
+
+```html
+<label for="email">Email</label>
+<input type="email" name="email" id="email">
+```
+Do you have a field where users should enter their email address?
+Use `email` as a value for the `name`, `id`, and `type` attribute.
+Three hints for the browser that this is an email field.
+
+### The autocomplete attribute {: #autocomplete}
+
+There are other examples where it can still be hard for browsers to identify the data type solely from the `name`, `id`, and `type` attributes.
+You can help here by using the `autocomplete` attribute.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '9a2262c52b978968f6ce181f32357f31',
+  height: 300,
+  tab: 'html,result'
+} %}
+
+Have you entered a name before in the browser you're using?
+The browser will probably offer you the option to fill it in again for this field in the demo.
+
+You can learn more about using
+[autocomplete and autofill](/learn/forms/autofill) in a later module.
+
+{% Assessment 'auto' %}
+
+## Resources
+
+- [The autocomplete attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)
+- [Autofill: What web devs should know, but don't](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)
diff --git a/src/site/content/en/learn/forms/autofill/autofill.assess.yml b/src/site/content/en/learn/forms/autofill/autofill.assess.yml
new file mode 100644
index 00000000000..22d6a3fac72
--- /dev/null
+++ b/src/site/content/en/learn/forms/autofill/autofill.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of autofill
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What autocomplete value should you use for the password field in a sign-up form?
+    options:
+      - content: "`autocomplete=\"password\"`"
+        rationale: "Try again!"
+      - content: "`autocomplete=\"off\"`"
+        rationale: "Try again!"
+      - content: "`autocomplete=\"new-password\"`"
+        rationale: "🎉"
+      - content: "`autocomplete=\"current-password\"`"
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/forms/autofill/index.md b/src/site/content/en/learn/forms/autofill/index.md
new file mode 100644
index 00000000000..5f601c68146
--- /dev/null
+++ b/src/site/content/en/learn/forms/autofill/index.md
@@ -0,0 +1,220 @@
+---
+title: Autofill
+description: >
+  Learn all about autofill and the autocomplete attribute.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+Having to re-enter your address for the tenth time is tiring. 
+Browsers, and you, as a developer, can help users enter data faster, and avoid re-entering data. 
+This module teaches you how autofill works, and how `autocomplete` and other element attributes can 
+ensure that browsers offer appropriate autofill options.
+
+## How does autofill work?
+
+In the [intro to autofill](/learn/forms/auto), you already learned the basics of autofill. 
+But why do browsers offer autofill?
+
+Filling out forms isn't an interesting activity, 
+but still something you do often. 
+Over time, you fill out many forms, 
+and you often fill in the same data. 
+One way to help users fill out forms faster is by offering them the option 
+to automatically fill in form fields with previously entered data. That's autofill. 
+
+How do browsers know what data to autofill? 
+Let's have a look at an example form field to find out.
+
+```html
+<label for="name">Name</label>
+<input name="name" id="name">
+```
+
+If you submit this form field, 
+browsers store the value (the data you entered) along with the value of the `name` attribute (name). 
+Some browsers also look at the `id` attribute when storing and filling in data.
+
+Say, weeks later, you fill out another form on another website. 
+This site also contains a form field with `name="name"`. 
+Your browser can now offer autofill, because a value for name is already stored.
+
+{% Aside %}
+Use the [`:autofill`](https://developer.mozilla.org/docs/Web/CSS/:autofill) 
+CSS pseudo-class to style form controls that the browser has autofilled. 
+Use `:autofill` and the prefixed version `:-webkit-autofill` for best browser compatibility.
+{% endAside %}
+
+Autofill is especially useful in forms you regularly use, 
+such as sign-up and sign-in, payment, checkout, 
+and forms where you have to enter your name or address.
+
+Let's see how you can help browsers offer the best autofill options by using appropriate values for the `autocomplete` attribute.
+Help users to enter their address
+There are many possible values for `autocomplete`. Let's have a look at addresses first.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'f6eac7a585a34d0c2de36a365eaa8662',
+  height: 600,
+  tab: 'result,html'
+} %}
+
+Does your browser already have an address saved for you? 
+Great! After you interact with the first field in the address form, 
+the browser shows you a list of saved addresses. 
+You can choose one, and the browser fills in all fields related to the address. 
+Autofill makes filling out forms fast and easy.
+
+Not every address form has the same fields, 
+and the order of fields also varies. 
+Using the correct values for `autocomplete` ensures that the browser fills in the correct values for a form. 
+There are values for `country`, `postal-code`, and 
+[many more](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete#values).
+
+{% Aside %}
+You can define multiple values separated by a space for `autocomplete`. 
+Say, you have a form with a shipping address and another form for a billing address. 
+To tell the browser which is the postal code for the billing address, 
+you can use `autocomplete="billing postal-code"`. 
+For the shipping address, use `shipping` as the first value.
+{% endAside %}
+
+## Ensure users can sign in fast and use secure passwords
+
+Many people aren't good at remembering passwords. 
+The 
+[most common password](https://en.wikipedia.org/wiki/List_of_the_most_common_passwords) is '123456', 
+followed by other easy-to-remember combinations. 
+How can you use secure and unique passwords without remembering them all? 
+
+Browsers have built-in passwords managers to generate, save, and fill in passwords for you. 
+Let's see how you can help browsers with autofilling emails and managing passwords.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'e7e95d2d671d577b0a141aaab4388b28',
+  height: 380
+} %}
+
+You can use `autocomplete="email"` for an email field, 
+so users get the autofill option for an email address.
+
+As this is a sign-up form, users shouldn't get the option to fill in previously used passwords. 
+You can use `autocomplete="new-password"` to ensure browsers offer the option to generate a new password.
+
+{% Aside %}
+To ensure a secure sign-up form it may be better to use a 
+[third-party identity provider](/sign-up-form-best-practices/#federated-login), 
+instead of building your own 
+[authentication](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html) system.
+{% endAside %}
+
+On the sign-in form, you can use `autocomplete="current-password"` 
+to tell browsers to offer the option to fill in previously saved passwords for this website. 
+
+You can set up two-factor authentication on many websites. 
+In addition to the password, a one-time code is sent via SMS or a two-factor authentication app. 
+
+Wouldn't it be great if the code you received in the SMS message was suggested by the on-screen keyboard, 
+and you could directly select it to fill in the value? On Safari 14 or later, you can use 
+[`autocomplete="one-time-code"`](https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element) to achieve this. 
+On Chrome on Android, you can use the 
+[WebOTP API](/web-otp) to achieve this with JavaScript.
+
+Learn more about how to verify phone numbers on the web with the 
+[SMS OTP form best practices](/sms-otp-form/).
+
+{% Aside 'caution' %}
+SMS isn't the most secure method of authentication by itself, 
+because phone numbers can be recycled and hijacked. 
+Consider using other two-factor authentication methods or multifactor authentication.
+
+Learn more about 
+[multifactor authentication](https://cheatsheetseries.owasp.org/cheatsheets/Multifactor_Authentication_Cheat_Sheet.html).
+{% endAside %}
+
+## Help users fill in their credit card information
+
+On many e-commerce websites, you can use your credit card to purchase products. 
+Sites may use third-party payment platforms that provide their own forms, 
+but if you do need to build your own payment forms, 
+make sure people can easily fill in payment information.
+
+You can use the `autocomplete` attribute again, 
+to ensure browsers offer the correct autofill options. 
+
+There are values for the credit card number `cc-number`, credit card expiration date `cc-exp`, 
+and [all other information needed](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete#values) for a credit card payment.
+
+Use a single input for numbers 
+such as credit card numbers and telephone numbers, 
+to ensure browsers offer autofill. 
+Use standard form elements, for example, 
+a `<select>` for the payment card dates, 
+instead of custom elements, to ensure autocomplete is available.
+
+Learn more about 
+[helping users to avoid re-entering payment data](/learn/forms/payment/#help-users-enter-their-payment-details).
+
+## Ensure autofill works for all your fields
+
+In addition to addresses, account information, and credit card information, 
+there are many more fields where browsers can help users with autofill. 
+
+When adding a telephone field to your form check if you can use any of the 
+[available values](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete#values) for autocomplete. 
+Found an appropriate value for your form field? Add it. 
+
+Using suitable values for the `autocomplete` attribute helps browsers offer the best autofill option, 
+and helps users fill out forms faster.
+
+## Help browsers understand that a field shouldn't be autofilled 
+
+You learned how autofill works, how you can help browsers with autofill, 
+and why autofill makes it convenient for users to fill out forms. 
+Sometimes, though, you don't want browsers to offer autofill. Let's have a look.
+
+```html
+<label for="one-time-code">One-time code</label>
+<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
+```
+
+One place where autofill isn't helpful is when entering one-off, 
+unique values such as a one-time code field. 
+The value is different every time, 
+and the browser shouldn't save values or offer an autofill option. 
+You can use `autocomplete="off"` for such fields to prevent autofill.
+
+{% Aside %}
+Autofill and autocomplete provide accessibility benefits. 
+Using autofill, people don't have to remember information or manually re-enter data. 
+
+For more information, see the 
+[W3C accessibility guidelines](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)
+{% endAside %}
+
+Another use case for `autocomplete="off"` is a honeypot field (see [previous module](/learn/forms/security-privacy/#a-honeypot)). 
+Even though the field isn't visible, browsers may autofill it with the rest of the fields. 
+Turning autofill off ensures a real user isn't identified as a bot, 
+due to the field being completed automatically.
+
+{% Aside %}
+You learned how important it is to use unique, and secure passwords. 
+In-browser password managers ensure that you use strong passwords. 
+Therefore browsers will still offer autofill options for passwords, even though `autocomplete="off"` is used, 
+to allow these password managers to do their job. 
+
+Learn more about 
+[the autocomplete attribute and sign-in fields](https://developer.mozilla.org/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).
+{% endAside %}
+
+You should only disable autofill if you are sure it will help users.
+
+{% Assessment 'autofill' %}
+
+## Resources
+
+- The [autocomplete attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete).
+- [Payment and address form best practices](/payment-and-address-form-best-practices)
diff --git a/src/site/content/en/learn/forms/conclusion/index.md b/src/site/content/en/learn/forms/conclusion/index.md
new file mode 100644
index 00000000000..44588d11600
--- /dev/null
+++ b/src/site/content/en/learn/forms/conclusion/index.md
@@ -0,0 +1,39 @@
+---
+title: Conclusion and next steps
+description: >
+ Further resources to help you take your next steps.
+authors:
+  - michaelscharnagl
+  - samdutton
+  - rachelandrew
+  - robdodson
+  - jiwoong
+date: 2021-11-03
+---
+
+Congratulations! You've made it to the end.
+So far, you've learned a lot about forms,
+and hopefully you feel more comfortable now building your own forms.
+
+What's next? One of the best ways to learn is to try out what you've learned:
+implement an HTML form of your own.
+To continue to build your HTML forms knowledge, here are some additional resources to explore:
+
+## Additional resources
+
+- [HTML forms guide on MDN](https://developer.mozilla.org/docs/Learn/Forms)
+- [Learn CSS](/learn/css)
+- [WebAIM: Creating Accessible Forms](https://webaim.org/techniques/forms)
+- [Payment and address forms best practices](/payment-and-address-form-best-practices)
+- [Sign-up form best practices](/sign-up-form-best-practices)
+- [Sign-in form best practices](/sign-in-form-best-practices)
+- [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [OWASP Cheat Sheet series](https://owasp.org/www-project-cheat-sheets/): best practices for privacy and security.
+- [NIST Identity Guidelines](https://pages.nist.gov/800-63-3/sp800-63-3.html): US National Institute of Standards and Technology guidelines for passwords and other identity topics.
+- [12 best practices for user account, authorization and password management](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account): outlines core back-end principles for managing user accounts.
+- [Passwords Evolved: Authentication Guidance for the Modern Era](https://www.troyhunt.com/passwords-evolved-authentication-guidance-for-the-modern-era/): detailed password guidance from Troy Hunt, creator of [haveibeenpwned.com](https://haveibeenpwned.com/),
+- [We Didn't Encrypt Your Password, We Hashed It. Here's What That Means](https://www.troyhunt.com/we-didnt-encrypt-your-password-we-hashed-it-heres-what-that-means/): also from Troy Hunt — here he explains the difference between encryption and hashing.
+
+## Brought to you by
+
+{% include 'partials/authors-stack.njk' %}
diff --git a/src/site/content/en/learn/forms/cross-platform-testing/cross-platform-testing.assess.yml b/src/site/content/en/learn/forms/cross-platform-testing/cross-platform-testing.assess.yml
new file mode 100644
index 00000000000..9dbbd5295af
--- /dev/null
+++ b/src/site/content/en/learn/forms/cross-platform-testing/cross-platform-testing.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of cross-platform testing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Can you show focus indicators only for keyboard users?
+    options:
+      - content: "No"
+        rationale: "Try again!"
+      - content: "Yes, using `:focus-visible`."
+        rationale: "🎉"
+      - content: "Yes, using `:focus-detected`."
+        rationale: "Try again!"
+      - content: "Yes, using `:focus-shown`."
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/forms/cross-platform-testing/index.md b/src/site/content/en/learn/forms/cross-platform-testing/index.md
new file mode 100644
index 00000000000..b6d92b5b292
--- /dev/null
+++ b/src/site/content/en/learn/forms/cross-platform-testing/index.md
@@ -0,0 +1,179 @@
+---
+title: Test forms across devices and platforms
+description: >
+  Ensure your form works with different devices, browsers, platforms, and different contexts.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+You can fill out a form in many ways.
+People might use your form on their smartphone while standing in a crowded bus,
+or with a screen reader, or from an old laptop.
+Let's see how you can ensure your form works on different devices, and in different contexts.
+
+## Ensure your form works for keyboard users
+
+A good first test to ensure your form is accessible is to fill out your form using only your keyboard.
+Open your form and try to navigate with the `tab` key.
+Is it clear what form field is currently active?
+To help users understand which form field is active,
+you can use focus indicators.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'be0759d9436d84426a795a9ae399eff9',
+  height: 300
+} %}
+
+[Try it out](https://codepen.io/web-dot-dev/pen/be0759d9436d84426a795a9ae399eff9).
+Use your `tab` key to navigate to the input.
+Do you see the outline when the input is active?
+That's the focus indicator.
+You can add focus indicators using the
+[`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus) CSS pseudo-class.
+
+```css
+input:focus {
+  outline: 4px solid #222;
+}
+```
+
+Learn more about
+[designing accessible focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/).
+
+{% Aside %}
+If you want to remove the default `:focus` styles but still show focus indicators for keyboard users,
+you can use the `:focus-visible` CSS pseudo-class.
+
+Learn more about
+[`:focus-visible`](/style-focus/#use-focus-visible-to-selectively-show-a-focus-indicator).
+{% endAside %}
+
+## Help users navigate your form
+
+Another good test of usability and accessibility is to ensure that the logical tab order follows the visual tab order.
+How can you test the tab order?
+Tab completely through your form.
+Do you notice any illogical navigation jumps?
+Make sure the DOM order matches the visual order.
+
+Learn more about how to
+[ensure visual order on the page follows DOM order](/visual-order-follows-dom/).
+
+## Help users complete your form on touch devices
+
+Great! You made sure your form works with the keyboard.
+Now, let's see how you can ensure it also works on touch devices such as mobile phones.
+
+Open your form on your touch device,
+fill in all fields and submit the form.
+Did you have to tap multiple times to select a form control?
+The issue may be that the tap areas are too small.
+Make sure the
+[tap target size](/accessible-tap-targets/) of a button is at least 48px,
+and that each `<input>` and `<select>` is large enough to tap into.
+You can also help users navigate your form on touch devices by adding enough spacing between form controls.
+
+## Ensure users get an optimized keyboard
+
+In previous modules, you learned how to activate a different on-screen keyboard
+using the `type` or `inputmode` attributes.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '88f1ffed62ef6bdd513351823b7aaa0f',
+  height: 300,
+  tab: 'html,result'
+} %}
+
+Open
+[the demo](https://codepen.io/web-dot-dev/pen/88f1ffed62ef6bdd513351823b7aaa0f)
+on your phone and tap in the telephone number field.
+Notice that numbers are shown by default on the on-screen keyboard,
+along with other characters you may need for a telephone number.
+Use `type="tel"` to get an on-screen keyboard optimized for entering telephone numbers.
+
+{% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/nX50IOaBUCP8mcHqr3CT.jpg",
+alt="Two screenshots of an input element with type='tel' on iOS and Android, showing how the type attribute changes the on-screen keyboard.", width="800", height="696" %}
+
+Use a phone to [try it out for yourself](https://codepen.io/web-dot-dev/pen/88f1ffed62ef6bdd513351823b7aaa0f),
+and see if you can easily enter every character needed to fill in a telephone number.
+If you're curious how the on-screen keyboard works for another `type`, try `type="email"` in the [demo](https://codepen.io/web-dot-dev/pen/88f1ffed62ef6bdd513351823b7aaa0f).
+
+## Make sure form buttons aren't hidden
+
+Imagine that you filled out a long form,
+and you're ready to submit it. But where is the **Submit** button?
+It may be behind the browser toolbar, located at the bottom of the screen.
+One way to ensure that buttons are visible is to use the [`env()`](https://developer.mozilla.org/docs/Web/CSS/env()) CSS function.
+Learn how to
+[ensure buttons aren't obscured by device user interfaces](https://developer.mozilla.org/docs/Web/CSS/env()#using_env_to_ensure_buttons_are_not_obscured_by_device_ui).
+
+## Ensure your form works on different platforms
+
+Try to test your forms on as many devices as possible.
+Have an old laptop? Open the default browser on it and test your form.
+Your friend has a tablet? Borrow it and test your form there as well.
+
+Does some styling look different in one browser?
+You can learn how to ensure your
+[styles work across platforms](/learn/forms/styling) in a later module.
+
+[BrowserStack](https://www.browserstack.com) offers free test accounts for open source projects,
+and [Browserling](https://www.browserling.com) offers a free trial to test on different browsers,
+devices and operating systems.
+
+## Help users complete your forms in different contexts
+
+People don't just use different browsers, devices and operating systems.
+People also use your forms in different contexts.
+Try it out! Is the sun shining outside right now? Take your phone and go outside.
+Using your form in bright light is a good way to test if contrast ratios are usable.
+
+Learn more about
+[color and contrast accessibility](/color-and-contrast-accessibility/).
+
+## Ensure your form works with poor connectivity
+
+Say you travel somewhere on a train.
+You open a web page on your phone.
+You wonder how loading a website can take so long 😕.
+
+You can simulate slow connections and different network types with
+[WebPageTest](https://webpagetest.org/easy) or
+[DevTools](https://developer.chrome.com/docs/devtools/device-mode/#network).
+
+Learn more about
+[testing with low bandwidth and high latency](/performance-poor-connectivity/#testing).
+
+## Help users use your form when they are on the go
+
+Imagine that you're walking to an appointment.
+Suddenly, your phone rings, you answer the call, and at the same time,
+get an alert from your insurance company to complete the application form you started.
+You open the form, trying to fill it out while still walking and talking.
+
+Remember that people will use your forms in many different contexts.
+In stressful situations, while doing other things, while on the go.
+You can help users by ensuring your form is easy to use.
+
+Try setting yourself a time limit to complete your form.
+Try to simulate imperfect conditions where you can test your form.
+
+## Make sure to share test results
+
+Document all tests, and share the results with your team.
+This will help prioritize action items,
+to ensure everybody in your team is aware of the most important tasks.
+
+Learn more about
+[sharing test results](/performance-audit-share/).
+
+{% Assessment 'cross-platform-testing' %}
+
+## Resources
+
+- [WebPageTest](https://webpagetest.org/easy): Website Performance and Optimization Tests
+- [Testing with low bandwidth and high latency](/performance-poor-connectivity/#testing)
+- [Sharing test results](/performance-audit-share/)
diff --git a/src/site/content/en/learn/forms/data/index.md b/src/site/content/en/learn/forms/data/index.md
new file mode 100644
index 00000000000..531d65b5ef5
--- /dev/null
+++ b/src/site/content/en/learn/forms/data/index.md
@@ -0,0 +1,103 @@
+---
+title: Gathering data
+description: >
+  Learn how to measure and analyze your form.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+In this module, you learn how to define goals, analyze your forms, measure changes, 
+and get notified about new issues.
+
+## Ensure you identify issues, problems, and goals
+
+As a first step, you need a way to identify issues and goals. 
+One way is to use [analytics](/learn/forms/testing/#analytics) 
+to get an overview of where your form may need improvements. 
+
+After analytics is up and running for your site, 
+you can monitor 
+[bounce rate](https://support.google.com/analytics/answer/1009409?hl=en) 
+and other metrics for every page with a form within your site. 
+If the bounce rate is high, users may be leaving your site without submitting the form. 
+There are many potential reasons why this happens: 
+for example, the form may be too complicated, or it's unclear what data should be entered.
+
+{% Aside %}
+Always respect the privacy of your users, with analytics data as well as form data. 
+Collect the minimum amount of data you require and be transparent with your users about what data you are collecting. 
+There are also 
+[privacy and data protection laws](/learn/forms/security-privacy/#help-users-access-their-personal-data) that you must follow. 
+In some countries, you need consent from a user before you can collect data. 
+{% endAside %}
+
+To get a clearer picture of a high bounce rate, you can define 
+[goals](https://support.google.com/analytics/answer/1012040) 
+to identify in detail where users leave your form.
+
+A [goal funnel](https://support.google.com/analytics/answer/1012040?hl=en&ref_topic=6150889#funnels_for_destination_goals&zippy=%2Cin-this-article)
+ (or _conversion funnel_) is a series of interactions that lead to a goal such as a completed purchase (a _conversion_). 
+ Each goal funnel consists of individual steps such as opening a shopping cart page or proceeding to a checkout page.
+
+The goal funnel for your form might look like this:
+
+1. The user opens page A with the form.
+1. The user fills out the name field.
+1. The user fills out the postal code field.
+1. The user submits the form.
+1. The user navigates to page B. 
+
+Goal funnels can give you an overview of where users leave your form, and where you need to improve it.
+
+As well as using analytics to track page metrics such as time-on-page or exit rates, 
+you can also monitor [events](https://support.google.com/analytics/answer/1033068?hl=en#zippy=%2Cin-this-article). 
+These allow you to track individual interactions, 
+such as button clicks or interactions with form fields. 
+For example, you can set up a [custom event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events), 
+which fires when a user fills out a specific `<input>`. 
+Or you can track the percentage of your users who submit a form. 
+
+## Analyze your forms
+
+You can create custom events for almost every interaction, and monitor form completion step-by-step. 
+This isn't always necessary though: 
+it's better to start with a small number of custom events, 
+and only add more if you need more details to find an issue with your form.
+
+Focus first on the most important goals, such as successful checkout. 
+You can always expand your goals later if more details are needed. 
+Identify your main goals, measure achievement of these goals, analyze the data, identify potential changes, 
+adapt your form and measure again.
+
+## Ensure that you fix problems with your form
+
+Say you identified an issue with your form. What should you do next? 
+First, you need to correct the issue and deploy a new version of your form. 
+After some days, it's now time to measure how effective the change was.
+
+Did the bounce rate decrease for your form? 
+Great, now look at the goal funnel to see which parts improved. 
+Are a high proportion of users still leaving before they fill in the postal code, for example? 
+Adapt your goal funnel steps if necessary, deploy further changes, 
+and analyze your form again until you are happy with the outcome.
+
+## Get notified when there are problems
+
+How can you get notified about potential issues without constantly checking your analytics dashboard? 
+You can set up [alerts](https://support.google.com/analytics/answer/1033021). 
+A common alert is about traffic drops. 
+You can monitor your form pages, and get notified when the traffic is unusually low for a day. 
+Or, coming back to bounce rates, you can set up an alert if the bounce rate for a page increases significantly.
+
+Alerts help you identify issues fast, and ensure you don't miss new problems with your form.
+
+Want to get a summary of your site's analytics? You can create 
+[reports](https://support.google.com/analytics/answer/1010054), 
+and get notified via email. This is a good way to monitor form usage.
+
+## Resources
+
+- [Google Analytics: Bounce rates](https://support.google.com/analytics/answer/1009409?hl=en)
+- [Google Analytics: Alerts](https://support.google.com/analytics/answer/1033021)
+- [Google Analytics: Event measuring](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)
diff --git a/src/site/content/en/learn/forms/design-basics/design-basics.assess.yml b/src/site/content/en/learn/forms/design-basics/design-basics.assess.yml
new file mode 100644
index 00000000000..4ea82c769a6
--- /dev/null
+++ b/src/site/content/en/learn/forms/design-basics/design-basics.assess.yml
@@ -0,0 +1,42 @@
+setLeader: Test your knowledge of designing forms
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you describe a form control?
+    options:
+      - content: "Using the `<description>` element."
+        rationale: "Try again!"
+      - content: "Using the `<label>` element."
+        rationale: "🎉"
+      - content: "Using the `description` attribute."
+        rationale: "Try again!"
+      - content: "Using the `placeholder` attribute."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What's the recommended tap target size?
+    options:
+      - content: "16px"
+        rationale: "Try again!"
+      - content: "48px"
+        rationale: "🎉"
+      - content: "31.5px"
+        rationale: "Try again!"
+      - content: "Big enough to tap it with a potato."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Where should you place error messages?
+    options:
+      - content: "Next to the form control"
+        rationale: "🎉"
+      - content: "At the top of the `<form>`."
+        rationale: "Try again!"
+      - content: "Never show error messages."
+        rationale: "Try again!"
+      - content: "Wherever you want."
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/forms/design-basics/index.md b/src/site/content/en/learn/forms/design-basics/index.md
new file mode 100644
index 00000000000..ba430839741
--- /dev/null
+++ b/src/site/content/en/learn/forms/design-basics/index.md
@@ -0,0 +1,210 @@
+---
+title: Design basics
+description: >
+  Learn how to build user-friendly forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+In the first section, you learned how to build a basic form.
+This section is all about best practices.
+In this module, learn about user experience (UX),
+and why a well-implemented user interface (UI) can make a big difference.
+
+## Creating user-friendly interfaces
+
+Filling out forms can be time-consuming and frustrating.
+It doesn't have to be.
+To guarantee a great UX, make sure the UI is intuitive.
+Ensure you deliver optimal form structure and graphic design (layout, spacing, font size and color),
+and logical UI (such as label wording and appropriate input types).
+Let's have a look at how you can improve your form and make it easy to use.
+
+## Labels
+
+Do you remember what the `<label>` element is for?
+A label describes a form control.
+A visible and well-written label helps the user understand the purpose of a form control.
+
+### Use a label for every form control
+
+Do you want to add a new form control to your form?
+Start by adding the label for the new field.
+This way, you don't forget to add it.
+
+Adding labels first also helps you to focus on the form's goals–what data do I need here?
+Once this is clear, you can focus on helping the user enter data and complete the form.
+
+{% Aside 'caution' %}
+Never misuse the `placeholder` attribute as a label.
+The placeholder is meant for giving a hint about the type of data you should enter,
+not for describing a form control.
+
+Learn more about why you should consider
+[avoiding placeholders](https://www.smashingmagazine.com/2018/06/placeholder-attribute/).
+{% endAside %}
+
+### Label wording
+
+Say that you want to describe an email field. You could do so as follows:
+
+```html
+<label for="email">Enter your email address</label>
+```
+
+Or you could describe it like this:
+
+```html
+<label for="email">Email address</label>
+```
+
+Which description do you choose?
+
+For our example, the wording 'Email address' is preferred,
+since short labels are easier to scan, reduce visual clutter,
+and help users to understand what data is needed faster.
+
+## Label position
+
+With [CSS](/learn/css),
+you can position a label on the top, bottom, left, and right of a form control.
+Where do you place it?
+
+[Research shows](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)
+that best practice is to
+[position the label above the form control](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php),
+so the user can scan a form quickly and see which label belongs to which form control.
+
+## Designing forms
+
+Good form design can
+[significantly reduce form abandonment rates](https://baymard.com/blog/checkout-flow-average-form-fields).
+Help users enter data by using the appropriate element and input type
+There are various
+[form elements and input types](/learn/forms/fields) you can choose from.
+To offer the best UX, use the most suitable element and input type for your use case.
+If the user should fill in multiple lines of text, use the `<textarea>` element.
+Where they need to accept your site's terms and conditions, use `<input type="checkbox">`.
+
+{% Aside %}
+Depending on the `type` or `inputmode` attribute (more about this
+[later](/learn/forms/attributes#inputmode))
+a different on-screen keyboard is shown on touch devices.
+If you use `type="tel"`, users on touch devices get a keyboard showing only the characters needed to enter a telephone number.
+By using `type="email"` the mobile device displays a keyboard optimized for entering an email address.
+{% endAside %}
+
+You should also visually differentiate between different types of form controls.
+A button should look like a button.
+An input like an input.
+Make it easy for users to recognize the purpose of a form control.
+For example, If something looks like a link, clicking on it should open a new page,
+and not submit a form.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'c369bda56ae3bc88aa0116614f79e40d',
+  height: 400
+} %}
+
+### Help users navigate forms
+
+An extravagant layout can be fun, but may get in the way of completing a form.
+
+In particular,
+[research shows](https://baymard.com/blog/avoid-multi-column-forms)
+that it's best to use only a single column.
+Users don't want to spend time searching where the next form control is.
+By using one column, there is only one direction to follow.
+
+{% Aside %}
+Always ensure that forms are accessible for people who use only the keyboard to navigate websites—either through preference or circumstance.
+Test your form by only using keyboard navigation.
+The tab order should follow the visual order.
+You can view the
+[source order in Chrome DevTools](https://developer.chrome.com/blog/new-in-devtools-92/#source-order).
+{% endAside %}
+
+### Help users interact with forms
+
+To avoid accidental taps and clicks,
+and help users interact with your form, make your buttons big enough.
+The recommended
+[tap target size](/accessible-tap-targets/) of a button is at least 48px.
+You should also add enough spacing between form controls using the `margin`
+CSS property to help avoid accidental interactions.
+
+The default size of form controls is too small to be really usable. You should increase the size by using `padding` and changing the default `font-size`.
+
+{% Aside %}
+Use at least `1rem` (which for most browsers has a default value of 16px)
+as the `font-size` for your form controls.
+This [prevents a page zoom](https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/)
+on iOS Safari when a form control is focused.
+{% endAside %}
+
+You can define different sizes for different pointing devices,
+for example, a mouse, using the  `pointer` CSS media feature.
+
+```css
+// pointer device, for example, a mouse
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+// pointer device of limited accuracy, for example, a touch-based device
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    width: 30px;
+    height: 30px;
+  }
+}
+```
+
+Learn more about the
+[`pointer` CSS media feature](https://developer.mozilla.org/docs/Web/CSS/@media/pointer).
+
+### Show errors where they happen
+
+To make it straightforward for users to find out which form control needs their attention,
+display error messages next to the form control they refer to.
+When displaying errors on form submission, make sure to navigate to the first invalid form control.
+
+### Make it clear to users what data to enter
+
+Make sure users understand how to enter valid data.
+Do they need to enter at least eight characters for a password? Tell them.
+
+```html
+<label for="password">Password (required)</label>
+<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
+<span id="password-minlength">Enter at least eight characters</span>
+```
+
+### Make it clear to users which fields are required
+
+```html
+<label for="name">Name (required)</label>
+<input name="name" id="name" required>
+```
+
+If a field is mandatory, make it obvious! [The Anatomy of Accessible Forms](https://www.deque.com/blog/anatomy-of-accessible-forms-required-form-fields/) explains alternatives for indicating 
+required fields. If most fields in a form are required, it may be better to 
+[indicate optional fields](https://www.lukew.com/ff/entry.asp?725).
+
+How can you connect error messages to form controls to make them accessible for screen readers?
+You can learn about this in [the next module](/learn/forms/accessibility).
+
+{% Assessment 'design-basics' %}
+
+
+## Resources
+
+- [Create Amazing Forms](/learn/forms/)
+- [Best Practices For Mobile Form Design](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Baymard Institute: E-Commerce UX Research](https://baymard.com/blog)
+- [Don't Make Me Think](https://en.wikipedia.org/wiki/Don%27t_Make_Me_Think) 
diff --git a/src/site/content/en/learn/forms/fields/fields.assess.yml b/src/site/content/en/learn/forms/fields/fields.assess.yml
new file mode 100644
index 00000000000..6d32abe38f8
--- /dev/null
+++ b/src/site/content/en/learn/forms/fields/fields.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of form fields
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Is it possible to upload multiple files with a form control?
+    options:
+      - content: "Yes, using `<input type=\"files\">`."
+        rationale: "Try again!"
+      - content: "Yes, using `<input type=\"file\" multiple>`."
+        rationale: "🎉"
+      - content: "No."
+        rationale: "Try again!"
+      - content: "Yes, using `<input type=\"multiple-files\">`."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What's the difference between `type="text"` and `type="password"`?
+    options:
+      - content: "There is no difference."
+        rationale: "Try again!"
+      - content: "An adapted on-screen keyboard for entering passwords is shown for `type=\"password\"`."
+        rationale: "Try again!"
+      - content: "When using `type=\"password\"` every character entered is obscured by an asterisk (`*`) or a dot (`•`)."
+        rationale: "🎉"
+      - content: "A custom interface for entering passwords is shown for `type=\"password\"`."
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/forms/fields/index.md b/src/site/content/en/learn/forms/fields/index.md
new file mode 100644
index 00000000000..ce45a6cf2ad
--- /dev/null
+++ b/src/site/content/en/learn/forms/fields/index.md
@@ -0,0 +1,167 @@
+---
+title: Form fields in depth
+description: >
+  Learn about the different form fields you can use, and how to choose the right form element.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+## What form fields can I use?
+
+To provide the best possible user experience,
+make sure to use the element and element `type` that's most appropriate for the data the user is entering.
+
+### Help users fill in text
+
+To provide users with a form field for inserting text, use the `<input>` element.
+It's the best choice for single words and short texts.
+For longer text, use the `<textarea>` element.
+This allows multiple lines of text,
+and makes it easier for the user to see the text they entered, as the element is scrollable and resizable.
+
+{% Aside %}
+A `<textarea>` is resizable by default. You can disable the resizing with CSS and the `resize` property: `resize: none`.
+
+However, people may want to see the text they entered all at once.
+At least keep the option to resize an `<textarea>` vertically.
+Use `resize: vertical` to ensure users can resize vertically but not horizontally.
+
+Learn more about [why disabling resize on `<textarea>` is bad for UX](https://catalin.red/css-resize-none-is-bad-for-ux/).
+{% endAside %}
+
+### Ensure users enter data in the correct format
+
+Do you want to help users fill in a telephone number?
+Change the `type` attribute to `type="tel"` for the `<input>`.
+Users on mobile devices get an adapted on-screen keyboard,
+ensuring they can enter the telephone number faster and more easily.
+
+For an email address, use `type="email"`.
+Again, an adapted on-screen keyboard is shown.
+Use the `required` attribute to make the form field mandatory.
+When the form is submitted, the browser checks that the input has a value and that it's valid: in this case,
+that it's a well-formatted email address.
+
+Learn more about the different [input types](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types).
+These also provide built-in [validation features](/learn/forms/validation).
+
+### Help users fill in dates
+
+When do you want to start your next trip?
+To help users fill in dates, use `type="date"`.
+Some browsers show the format as a placeholder such as `yyyy-mm-dd`,
+demonstrating how to enter the date.
+
+All modern browsers provide custom interfaces for selecting dates in the form of a date picker.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '93693a7c2ce3d39ec5aa9088159b0601',
+  height: 300
+} %}
+
+### Help users select an option
+
+To ensure users can select or unselect one possible option, use `type="checkbox"`.
+Do you want to offer multiple options?
+Depending on your use case, there are various alternatives.
+First, let's look at possible solutions if users should only be able to choose a single option.
+
+You can use multiple `<input>` elements with `type="radio"` and the same `name` value. Users see all options at once, but can only choose one.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '617e51cdae8adeca641d289da1a3e8a2',
+  height: 300
+} %}
+
+Another option is to use the `<select>` element.
+Users can scroll through a list of available options and choose one.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '7225931596b7eeafc448ad55d9c980fd',
+  height: 300
+} %}
+
+For some use cases, such as choosing a range of numbers,
+`<input>` of type `range` may be a good option.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '242b1ec7ea180c4995711ceabd749c59',
+  height: 300
+} %}
+
+{% Aside %}
+You can use the [`accent-color`](/accent-color/) CSS property to change the color of form controls,
+including `<input type="range">`.
+{% BrowserCompat 'css.properties.accent-color' %}
+{% endAside %}
+
+Do you need to offer the ability to select multiple options?
+Use a `<select>` element with the `multiple` attribute or multiple `<input>` elements of type `checkbox`.
+
+You may also use an `<input>` in combination with the [`<datalist>`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) element.
+This gives you a combination of a text field and a list of `<option>` elements.
+
+{% Aside 'codelab' %}
+How would you tackle the selection of multiple items?
+Try to implement different versions.
+Use a `<select>` element, `<datalist>` element,
+[multi-select custom element](https://github.com/samdutton/multi-input), or build something completely different.
+{% endAside %}
+
+### Ensure users can fill in different types of data
+
+There are more input types for specific use cases.
+
+There is an `<input>` of type `color` to provide users with a color picker in supported browsers,
+and there are various other types as well. To ensure users can enter their password, use `<input>`
+with `type="password"`. Every character entered is obscured by an asterisk ("*") or a dot ("•"),
+to ensure the password can't be read.
+
+Do you want to include a unique security token in the form data?
+Use `<input>` with `type="hidden"`.
+The value of an `<input>` of type `hidden` can't be seen or modified by users.
+
+To enable users to upload and submit files, use `<input>` with `type="file"`.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '74f2d88b9185b8fa880ea5a92f48f690',
+  height: 300
+} %}
+
+{% Aside %}
+An `<input>` of type `file` can also allow multiple uploads at once.
+You can also specify which file formats are allowed.
+
+Learn more about [`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file).
+{% endAside %}
+
+You can also define [custom elements](/more-capable-form-controls/#form-associated-custom-elements) if you have a special use case,
+where no built-in element or type is suitable.
+
+## Help users fill out your form
+
+There are many form elements and types, but which one should you choose?
+
+For some use cases, it's straightforward to choose the appropriate element and type,
+such as `<input type="date">`. For others, it depends.
+For example, you can use multiple `<input>` elements with `type="checkbox"` or a `<select>` element.
+Learn more about [choosing between listboxes and dropdown lists](https://www.nngroup.com/articles/listbox-dropdown/).
+
+In general, make sure to
+[test your form with real users](/learn/forms/usability-testing) to find the best form element and type.
+
+{% Assessment 'fields' %}
+
+## Resources
+
+- [The `<input>` element](https://developer.mozilla.org/docs/Web/HTML/Element/Input)
+- [The `<textarea>` element](https://developer.mozilla.org/docs/Web/HTML/Element/textarea)
+- [The `<select>` element](https://developer.mozilla.org/docs/Web/HTML/Element/select)
+- [`<input>` types](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types)
+- [Custom form elements](/more-capable-form-controls/#form-associated-custom-elements)
diff --git a/src/site/content/en/learn/forms/form-element/form-element.assess.yml b/src/site/content/en/learn/forms/form-element/form-element.assess.yml
new file mode 100644
index 00000000000..4b75598e1c6
--- /dev/null
+++ b/src/site/content/en/learn/forms/form-element/form-element.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of the form element
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What does the start tag of the form element look like?
+    options:
+      - content: "`</form>`"
+        rationale: "Almost, this is the end tag of the `<form>` element."
+      - content: "`<form-container>`"
+        rationale: "Try again!"
+      - content: "`<form>`"
+        rationale: "🎉"
+      - content: "`<form-element>`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What attribute can you use to define where the `<form>` is processed?
+    options:
+      - content: "`where`"
+        rationale: "Try again!"
+      - content: "`action`"
+        rationale: "Yes, the `action` attribute defines where the `<form>` is processed."
+      - content: "`href`"
+        rationale: "Try again!"
+      - content: "`url`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the default request method?
+    options:
+      - content: "`GET`"
+        rationale: "🎉"
+      - content: "`POST`"
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/forms/form-element/index.md b/src/site/content/en/learn/forms/form-element/index.md
new file mode 100644
index 00000000000..421560c8b4d
--- /dev/null
+++ b/src/site/content/en/learn/forms/form-element/index.md
@@ -0,0 +1,133 @@
+---
+title: Use forms to get data from users
+description: >
+  Learn the basics of using a form on the web with this introduction to the form element.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+Imagine you want to ask people on your website about their favorite animal.
+As a first step, you need a way to collect the data.
+
+How do you do this with HTML?
+
+{% Glitch 'learn-forms-get-started' %}
+
+In HTML, you can build this using the form element (`<form>`),
+an `<input>` with a `<label>`, and a submit `<button>`.
+
+{% Aside %}
+You may wonder where the styles for this example are coming from.
+They are coming from a general stylesheet
+[included in all demos](/learn/forms#demos).
+
+Interested in styling forms? You can learn about this in a later
+[module](/learn/forms/styling).
+{% endAside %}
+
+## What is a form element?
+
+```html
+<form>
+  <label for="animal">What is your favorite animal?</label>
+  <input type="text" id="animal" name="animal">
+  <button>Save</button>
+</form>
+```
+
+The form element consists of the start tag `<form>`,
+optional attributes defined in the start tag, and an end tag `</form>`.
+
+Between the start and end tag, you can include form elements like `<input>` and `<textarea>`
+for different types of user input.
+You will learn more about [form elements](/learn/forms/form-fields) in the next module.
+
+{% Aside %}
+Use HTTPS to protect all websites and forms,
+not only if you handle sensitive data. This way, all data is encrypted.
+
+Find out more: [Secure connections with HTTPS](/secure/#secure-connections-with-https).
+{% endAside %}
+
+## Where is the data processed?
+
+When a form is submitted (for example, when the user clicks the **Submit** button),
+the browser makes a request.
+A script can respond to that request and process the data.
+
+{% Aside %}
+A script (running on the server or the client) is needed to process the form.
+It may [validate](/learn/forms/validation) the data, save it into a database,
+or do other operations based on the form data.
+{% endAside %}
+
+By default, the request is made to the page where the form is shown.
+
+Say you want a script running at `https://web.dev`
+to process the form data—how would you do that?
+[Try it out](https://codepen.io/web-dot-dev/pen/fbf90faccc7a22e208c2a507f33be598?editors=1100)!
+
+{% Details %}
+
+{% DetailsSummary 'h3' %} Toggle answer {% endDetailsSummary %}
+
+You can select the location of the script by using the `action` attribute.
+
+```html
+<form action="https://example.com/animals">
+...
+</form>
+```
+
+{% endDetails %}
+
+The preceding example makes a request to `https://example.com/animals`.
+A script on the `example.com` backend can handle requests to `/animals`
+and process data from the form.
+
+## How is the data transferred?
+
+By default, form data is sent as a `GET` request,
+with the submitted data appended to the URL.
+If a user submits 'frog' in the example above, the browser makes a request to the following URL:
+
+```html
+https://example.com/animals?animal=frog
+```
+
+In this case, you can access the data on the frontend or the backend by getting the data from the URL.
+
+If you want, you can instruct the form to use a `POST` request by changing the method attribute.
+
+```html
+<form method="post">
+...
+</form>
+```
+
+Using `POST`, the data is included in the
+[body of the request](https://developer.mozilla.org/docs/Web/HTTP/Methods/POST#example).
+
+The data will not be visible in the URL and can only be accessed from a frontend or backend script.
+
+### What method should you use?
+
+There are use cases for both methods.
+
+For forms that process sensitive data use the `POST` method.
+The data is encrypted (if you use  HTTPS) and only accessible by the backend script that processes the request.
+The data is not visible in the URL. A common example is a sign-in form.
+
+If the data is shareable, you can use the `GET` method.
+This way the data will be added to your browser history as it is included in the URL.
+Search forms often use this. This way you can bookmark a search result page.
+
+Now that you've learned about the form element itself, it's time to learn about 
+[form fields](/learn/forms/form-fields) to make your forms interactive.
+
+{% Assessment 'form-element' %}
+
+## Resources
+
+[The `<form>` element](https://developer.mozilla.org/docs/Web/HTML/Element/form).
diff --git a/src/site/content/en/learn/forms/form-fields/form-fields.assess.yml b/src/site/content/en/learn/forms/form-fields/form-fields.assess.yml
new file mode 100644
index 00000000000..078c4a7e5d1
--- /dev/null
+++ b/src/site/content/en/learn/forms/form-fields/form-fields.assess.yml
@@ -0,0 +1,42 @@
+setLeader: Test your knowledge of form elements
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you connect a `<label>` to a form control?
+    options:
+      - content: "`for='color'` on the `<label>`, and `name='color'` on the `<input>`."
+        rationale: "Try again!"
+      - content: "`for='color'` on the `<label>`, and `id='color'` on the `<input>`."
+        rationale: "Correct!"
+      - content: "`id='color'` on the `<label>`, and `for='color'` on the `<input>`."
+        rationale: "Try again!"
+      - content: "`name='color'` on the `<label>`, and `for='color` on the `<input>`."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What do you use for a multi-line form control?
+    options:
+      - content: "`<input>` element with `type='multi-line'`."
+        rationale: "Try again!"
+      - content: "The `<text>` element."
+        rationale: "Try again!"
+      - content: "The `<textarea>` element."
+        rationale: "🎉"
+      - content: "`<input>` element with `type='long'`."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0,1,2,3"
+    stem: How can you submit a form?
+    options:
+      - content: "Clicking a `<button>` element."
+        rationale: "Correct, this is one option."
+      - content: "Using the `Enter` key."
+        rationale: "Correct, this is one option."
+      - content: "Clicking an `<input>` element with `type='submit'`."
+        rationale: "Correct, this is one option."
+      - content: "All of the above."
+        rationale: "Correct, all answers are possible options to submit a form."
diff --git a/src/site/content/en/learn/forms/form-fields/index.md b/src/site/content/en/learn/forms/form-fields/index.md
new file mode 100644
index 00000000000..812153d9a6f
--- /dev/null
+++ b/src/site/content/en/learn/forms/form-fields/index.md
@@ -0,0 +1,243 @@
+---
+title: Help users enter data in forms
+description: >
+  An overview of the various form elements you can choose from to build your form.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+To make a form interactive, you need to add form elements.
+There are controls to enter and select data, elements that describe controls,
+elements that group fields, and buttons to submit a form.
+
+## What are form elements?
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'a4a252d5c8511f94c0f56cabd2e73178',
+  height: 400,
+  tab: 'html,result'
+} %}
+
+You see two `<input>` elements, `<input type="text">` and `<input type="file">`. Why do they look different?
+
+Based on the element name and the [type](/learn/forms/form-fields#type) attribute,
+browsers show different user interfaces, use different
+[validation](/learn/forms/validation) rules,
+and provide many other features.
+Using the appropriate form control helps you build better forms.
+
+{% Aside %}
+The default styles of form controls differ between browsers,
+operating systems, and platforms.
+You will learn in a later module how to [style forms](/learn/forms/styling) cross-platform.
+{% endAside %}
+
+## Labels for form elements
+
+Say you want to add an input where the user can enter their favorite color.
+For this, you need to add an [`<input>` element](/learn/forms/form-fields/#input) to your form.
+But, how does the user know that they should fill in their favorite color?
+
+To describe form controls, use a `<label>` for each form control.
+
+```html
+<label for="color">What is your favorite color?</label>
+<input type="text" id="color" name="color">
+```
+
+The `for` attribute on the label element matches the `id` attribute on the input.
+
+{% Aside %}
+Describe every form control with a `<label>` rather than using some other HTML element.
+This makes the form control accessible to screen readers, and provides a bigger target, since you 
+can tap or click the label to set focus on the control.
+
+[Click the label](https://codepen.io/web-dot-dev/pen/3ce69644635734a084f45350993f4170) in our demo 
+to try this out.
+{% endAside %}
+
+## Capturing user input {: #input}
+
+As the name suggests, the `<input>` element is used to gather input from users.
+
+```html
+<label for="color">What is your favorite color</label>
+<input type="text" id="color" name="color">
+```
+
+As mentioned before, the `id` attribute connects the `<input>` to the `<label>`.
+What about the name and type attribute in this example?
+
+### The name attribute
+
+Use the `name` attribute to identify the data the user enters with the control.
+If you submit the form, this name is included in the request.
+Say that you named a form control `mountain` and the user entered `Gutenberg`,
+the request includes this information as `mountain=Gutenberg`.
+
+[Try to change](https://codepen.io/web-dot-dev/pen/a9ec1be360c53c5284da27a92fbd7248)
+the name of the form control to `hill`.
+If you do this correctly, and submit the form, `hill` is visible in the URL.
+
+### The input type {: #type}
+
+There are different
+[types of form controls](https://developer.mozilla.org/docs/Web/HTML/Element/input#input_types), all 
+with useful built-in features that work across different browsers and platforms. Based on the `type` 
+attribute, the browser renders different user interfaces, shows different on-screen keyboards, uses 
+different validation rules, and more. Let's see how to change the type.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '6a3705c993516bb294dbcddb084f0ba4',
+  height: 300
+} %}
+
+By using `type="checkbox"` the browser now renders a checkbox instead of a text field.
+The checkbox also comes with additional attributes.
+You can set the `checked` attribute, to show it as checked.
+
+{% Aside %}
+The default value for `type` is `text`. This means that if you simply want a text `<input>`, you can 
+leave out the `type` attribute.
+{% endAside %}
+
+There are various other [types](/learn/forms/fields) you can choose.
+We have a detailed look in a later module.
+
+## Allow multiple lines of text
+
+Say, you need a field where a user can write a comment.
+For this, wouldn't it be great if they can enter multiple lines of text?
+This is the purpose of the `<textarea>` element.
+
+```html
+<label for="comment">Comment</label>
+<textarea id="comment" name="comment"></textarea>
+```
+
+## Pick from a list of options
+
+How do you give users a list of options to select from?
+You can use a `<select>` element to achieve this.
+
+{% Aside %}
+If you want to enable text input with additional predefined options,
+you can also use an `<input>` element together with the 
+[datalist element](https://developer.mozilla.org/docs/Web/HTML/Element/datalist).
+You can try out datalist examples [here](https://simpl.info/datalist/).
+{% endAside %}
+
+```html
+<label for="color">Color</label>
+<select id="color" name="color">
+  <option value="orange">Orange</option>
+  <option value="pink">Pink</option>
+</select>
+```
+
+First, you add a `<select>` element.
+As with all other form controls, you connect it to a `<label>` with the `id` attribute
+and give it a unique name using the `name` attribute.
+
+In between the start and end tag of the `<select>` element,
+you can add multiple `<option>` elements, each representing one selection.
+
+Each option has a unique `value` attribute, so you can tell them apart when processing the form data.
+The text inside the option element is the human-readable value.
+
+If you submit the form using this `<select>` without changing the selection,
+the request will include `color=orange`. But how does the browser know which option should be used?
+
+The browser uses the first option in the list, unless:
+- One `<option>` element has the `selected` attribute.
+- The user chooses another option.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '7225931596b7eeafc448ad55d9c980fd',
+  height: 300
+} %}
+
+## Pre-select an option
+
+With the `selected` attribute you can pre-select one option.
+This becomes the default, regardless of the order in which `<option>` elements are defined.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '5324a9e3d1c3c695932ee95378b63436',
+  height: 300,
+  tab: 'html,result'
+} %}
+
+## Grouping form controls
+
+Sometimes you need to group form controls. You can use the `<fieldset>` element to do that.
+
+```html
+<fieldset>
+    <legend>What is your favorite web technology</legend>
+
+    <label for="html">HTML</label>
+    <input type="radio" name="webfeature" value="html" id="html">
+
+    <label for="css">CSS</label>
+    <input type="radio" name="webfeature" value="css" id="css">
+</fieldset>
+```
+Did you notice the `<legend>` element inside the `<fieldset>` element? What do you think it is used for?
+
+If your answer is "to describe the group of form controls", you're right!
+
+Every `<fieldset>` element requires a `<legend>` element,
+just as every form control needs an associated `<label>` element.
+The `<legend>` also has to be the very first element in the `<fieldset>`.
+After the `<legend>` element, you can define the form controls which should be part of the group.
+
+## Submitting a form
+
+After learning how to add form controls, and group them, you may wonder how a user can submit a form?
+
+The first option is to use a `<button>` element.
+
+```html
+<button>Submit</button>
+```
+
+After a user clicks the **Submit** button,
+the browser makes a request to the URL specified in the `<form>` element's
+[action attribute](/learn/forms/form-element#where-is-the-data-processed)
+with all data from the form controls.
+
+{% Aside 'warning' %}
+Every `<button>` element inside a form works as a **Submit** button by default.
+
+Sometimes you don't want this: for example,
+when using a `<button>` to toggle visibility for a password field.
+To disable the default **Submit** behavior, you can add `type="button"` to the `<button>`.
+This tells the browser that the `<button>` should not submit the form.
+{% endAside %}
+
+You can also use an `<input>` element with `type="submit"` instead of a `<button>` element.
+The input looks and behaves just like a `<button>`. Instead of using a `<label>` element to describe 
+the `<input>`, use the `value` attribute instead.
+
+```html
+<input type="submit" value="Submit">
+```
+
+In addition, a form can also be submitted by using the `Enter` key when a form field has focus. 
+
+{% Assessment 'form-fields' %}
+
+## Resources
+
+- [The label element](https://developer.mozilla.org/docs/Web/HTML/Element/label)
+- [The input element](https://developer.mozilla.org/docs/Web/HTML/Element/input)
+- [The textarea element](https://developer.mozilla.org/docs/Web/HTML/Element/textarea)
+- [The select element](https://developer.mozilla.org/docs/Web/HTML/Element/select)
+- [The fieldset element](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset)
+- [The button element](https://developer.mozilla.org/docs/Web/HTML/Element/button)
diff --git a/src/site/content/en/learn/forms/form/form.assess.yml b/src/site/content/en/learn/forms/form/form.assess.yml
new file mode 100644
index 00000000000..3691ac35ef6
--- /dev/null
+++ b/src/site/content/en/learn/forms/form/form.assess.yml
@@ -0,0 +1,42 @@
+setLeader: Test your knowledge of the form element
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: '1'
+    correctAnswers: '0'
+    stem: What value for `enctype` is needed to submit files?
+    options:
+      - content: '`multipart/form-data`'
+        rationale: '🎉'
+      - content: '`multipart/form-files`'
+        rationale: 'Try again!'
+      - content: '`form-data`'
+        rationale: 'Try again!'
+      - content: '`form-files`'
+        rationale: 'Try again!'
+  - type: multiple-choice
+    cardinality: '1'
+    correctAnswers: '1'
+    stem: Is it possible to send user data without a `<form>`
+    options:
+      - content: 'No'
+        rationale: 'Try again!'
+      - content: 'Yes, with JavaScript.'
+        rationale: '🎉'
+      - content: 'Yes, with Flash.'
+        rationale: 'Try again!'
+      - content: 'Yes, with HTML5.'
+        rationale: 'Try again!'
+  - type: multiple-choice
+    cardinality: '1'
+    correctAnswers: '3'
+    stem: How can you submit a `<form>`?
+    options:
+      - content: "Click on a `<button>`."
+        rationale: "Try again!"
+      - content: "Press `Enter`."
+        rationale: "Try again!"
+      - content: "Click on an `<input type=\"image\">`."
+        rationale: "Try again!"
+      - content: "All the above."
+        rationale: "🎉"
diff --git a/src/site/content/en/learn/forms/form/index.md b/src/site/content/en/learn/forms/form/index.md
new file mode 100644
index 00000000000..8b6ec9273ee
--- /dev/null
+++ b/src/site/content/en/learn/forms/form/index.md
@@ -0,0 +1,166 @@
+---
+title: The form element in depth
+description: >
+  Learn all about the form element, when you should use a form, and how a form works in detail.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+In a previous module, you learned [how to use the `<form>` element](/learn/forms/form-element).
+In this module, you learn how a form works, and when to use a form.
+
+## Should you use a `<form>` element?
+{% BrowserCompat 'html.elements.input' %}
+
+You don't always need to put form controls in a `<form>` element.
+For example, you might provide a `<select>` element for users to choose a product category.
+You don't need a `<form>` element here, as you're not storing or processing data on your backend.
+
+However, in most cases when you store or process data from users,
+you should use the `<form>` element.
+As you will learn in this module, using a `<form>` gives you a lot of built-in functionality from browsers that you would otherwise have to build yourself.
+A `<form>` also has many accessibility features built-in by default.
+If you want to avoid a page reload when a user submits a form,
+you can still use the `<form>` element, but enhance it with
+[JavaScript](/learn/forms/javascript#ensure-users-can-submit-a-form-without-leaving-a-page).
+
+{% Aside %}
+It's possible to replicate form functionality with JavaScript, but a purely script-based approach is
+unlikely to be as robust, accessible and future-proof as a built-in `<form>`.
+
+Find out [why not everybody has JavaScript](https://kryogenix.org/code/browser/everyonehasjs.html).
+{% endAside %}
+
+## How does a `<form>` work?
+
+You learned that a `<form>` is the best way to handle user data.
+You may wonder now, how does a form work?
+
+The `<form>` is a container for interactive form controls.
+
+```html
+<form method="post">
+  <label for="name">Name</label>
+  <input type="text" name="name" id="name">
+  <button formaction="/name">Save</button>
+</form>
+```
+
+## How does form submission work?
+
+When you submit a `<form>`, the browser checks the `<form>` attributes. The data is sent as a `GET`
+  or `POST` request according to the `method` attribute. If no `method` attribute is present, a
+  `GET` request is made to the URL of the current page.
+
+How can you access and process the form data?
+The submitted data can be handled by JavaScript on the frontend using a `GET` request,
+or by code on the backend using a `GET` or `POST` request.
+Learn more about
+[request types and transferring form data](/learn/forms/form-element/#where-is-the-data-processed).
+
+{% Aside %}
+The **Submit** button may have a `formmethod` attribute.
+If this is the case, the value defined there is used.
+{% endAside %}
+
+When the form is submitted, the browser makes a request to the URL that is the value of the `action` attribute.
+In addition, the browser checks if the **Submit** button has a `formaction` attribute.
+If this is the case, the URL defined there is used.
+
+Furthermore, the browser looks up additional attributes on the `<form>` element,
+for example, to decide if the form should be validated (`novalidate`),
+autocomplete should be used (`autocomplete="off"`) or what encoding should be used (`accept-charset`).
+
+[Try to build a form](https://codepen.io/web-dot-dev/pen/c7d89671f738240187a86cda1074d554) where users can submit their favorite color.
+The data should be sent as a `POST` request, and the URL where the data will be processed should be `/color`.
+
+{% Details %}
+{% DetailsSummary 'h3' %} Show form {% endDetailsSummary %}
+One possible solution is using this form:
+
+```html
+<form method="post" action="/color">
+    <label for="color">What is your favorite color?</label>
+    <input type="text" name="color" id="color">
+    <button>Save</button>
+</form>
+```
+
+{% endDetails %}
+
+## Ensure users can submit your form
+
+There are two ways to submit a form.
+You can click the **Submit** button, or press `Enter` while using any form control.
+
+{% Aside %}
+Use an actionable name for your **Submit** button,
+for example, 'Proceed to Payment' or 'Save Changes', rather than just 'Submit'.
+
+Don't disable the **Submit** button while still awaiting valid user input,
+but consider disabling it once the form has been submitted,
+preventing multiple requests to your server.
+
+Learn more about [Submit button best practices](/payment-and-address-form-best-practices/#html-button).
+{% endAside %}
+
+You can add a **Submit** button in various ways.
+One option is to use a `<button>` element inside your form.
+As long as you don't use `type="button"` it works as a **Submit** button.
+Another option is to use `<input type="submit" value="Submit">`.
+
+{% Aside %}
+You can use the [`enterkeyhint`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/enterkeyhint)
+attribute to change the label of the `Enter` key for on-screen keyboards. This helps make it clearer
+for users what happens when they submit the current form.
+{% endAside %}
+
+A third option is to use `<input type="image" alt="Submit" src="submit.png">`,
+to create a graphical **Submit** button.
+However, now that you can create graphical buttons with CSS, it's not recommended to use `type="image"`.
+
+{% Aside %}
+Always give users as much time as they want to submit a form.
+Defining timeouts on your form will cause data loss, and frustrates your users.
+
+For more information, see
+[W3C form timeout guidelines](https://www.w3.org/WAI/WCAG21/Understanding/timeouts.html).
+{% endAside %}
+
+## Enable users to submit files
+
+Use `<input type="file">` to enable people to upload and submit files if necessary.
+
+```html
+<label for="file">Choose file to upload</label>
+<input type="file" id="file" name="file" multiple>
+```
+
+First, add an `<input>` element with `type="file"` to your form.
+Add the `multiple` attribute if users should be able to upload multiple files.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '6a600920c65a81e55576c6b52b4e5efa',
+  height: 300,
+  tab: 'html,result'
+} %}
+
+One more change is needed to ensure users can upload files—set the `enctype` attribute on your form.
+The default value is `application/x-www-form-urlencoded`.
+
+```html
+<form method="post" enctype="multipart/form-data">
+…
+</form>
+```
+To make sure files can be submitted, change it to `multipart/form-data`.
+Without this encoding, files can't be sent with a `POST` request.
+
+{% Assessment 'form' %}
+
+## Resources
+
+- [The form HTML element](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+- [Submit button best practices](/payment-and-address-form-best-practices/#html-button)
diff --git a/src/site/content/en/learn/forms/forms.11tydata.js b/src/site/content/en/learn/forms/forms.11tydata.js
new file mode 100644
index 00000000000..031606e901a
--- /dev/null
+++ b/src/site/content/en/learn/forms/forms.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('forms');
diff --git a/src/site/content/en/learn/forms/identity/index.md b/src/site/content/en/learn/forms/identity/index.md
new file mode 100644
index 00000000000..b237da2972e
--- /dev/null
+++ b/src/site/content/en/learn/forms/identity/index.md
@@ -0,0 +1,179 @@
+---
+title: Identity
+description: >
+  Learn how to build secure and accessible sign-up and sign-in forms, and find out how to help users change their account settings.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+{% Aside 'warning' %}  
+User account [authentication](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html) 
+is a complex issue in terms of privacy and security. 
+To guarantee the safety of user accounts, it may be better to use a 
+[third-party identity provider](/sign-up-form-best-practices/#federated-login), 
+instead of building your own secure authentication system.
+
+Learn more about 
+[best practices for account authentication, and password management](https://cloud.google.com/blog/products/identity-security/account-authentication-and-password-management-best-practices).  
+{% endAside %}
+
+## Help users sign up
+
+The sign-up form is often the first interaction with a form on your website. 
+Good sign-up form design is critical, and a secure form is essential. 
+
+{% Aside %}  
+Only require sign-up if you really need to. 
+If you only want to store information between navigations, 
+consider [using client-side storage](/storage-for-the-web/). 
+For checkout forms, add a guest checkout by default. 
+You can ask new customers if they want to sign up after they've completed a purchase, 
+or when they enter address details.  
+{% endAside %}
+
+Let's look at a sign-up form, and how you can help users sign up on your website.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: '42a33b97484873a214f8a945a3b55f71',  
+  height: 450  
+} %}
+
+Keep the sign-up form minimal and only show the required form controls to create an account. 
+Don't double up your form controls to help users get their account details right. 
+Send a confirmation email instead.
+
+### Help users fill in their account details
+
+You can help users fill in their account details by using the appropriate `autocomplete` attribute. 
+Use `autocomplete="email"` for the email field, and `autocomplete="new-password"` for a new-password field. 
+
+Learn more about [autofilling input controls](/learn/forms/autofill).
+
+{% Aside 'warning' %}  
+Don't disallow pasting into password fields. 
+It's annoying for users, encourages passwords that are memorable and less secure, 
+and makes it harder for password managers to suggest and autofill a secure password.
+
+Learn more about why you should always 
+[allow pasting passwords](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords).  
+{% endAside %}
+
+You can also help users enter a secure password by offering a reveal-password `<button>`.  
+Learn more about the [reveal-password pattern](/learn/forms/javascript#ensure-users-can-see-the-password-they-entered).
+
+### Ensure your sign-up form is secure
+
+Never store or transmit passwords in plain text. 
+Make sure to [salt and hash](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt) 
+passwords—and [don't try to invent your own hashing algorithm](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html).
+
+Offer [multi-factor authentication](https://cheatsheetseries.owasp.org/cheatsheets/Multifactor_Authentication_Cheat_Sheet.html), 
+especially if you store personal or sensitive data. 
+[SMS OTP best practices](/sms-otp-form) and 
+[Enabling Strong Authentication with WebAuthn](https://developer.chrome.com/blog/webauthn/) 
+explain how to implement multi-factor authentication.
+
+Ensure users don't use compromised passwords. 
+For example, use the API from [Have I Been Pwned](https://haveibeenpwned.com/API/) 
+to detect compromised passwords, 
+and suggest your users fill in a different new password, 
+or warn them if their password becomes compromised.
+
+## Help users sign in
+
+Let's see how to build a sign-in form to ensure users can easily sign in to your website.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: '89610184f6c51990ab9484b593e1d951',  
+  height: 500  
+} %}
+
+Make the location of sign-up and sign-in buttons obvious. 
+Ensure your form is usable on touch devices:
+
+-  The [tap target size](/accessible-tap-targets/) of buttons is at least 48px.
+-  The `font-size` of your form elements is big enough (`20px` is about right on mobile).
+-  There is enough space (`margin`) between form controls, and that inputs are large enough (use at least `padding: 15px` on mobile).
+
+### Help users fill in their email and password
+
+Help browsers and password managers autofill account details. 
+Use `autocomplete="email"` for the email field, 
+and `autocomplete="current-password"` for a current password field.
+
+To help users manually fill in their account details, use `type="email"` 
+for the email field to show the appropriate on-screen keyboard on mobile devices. 
+
+Use the `required` attribute for your email and password field so you can warn of invalid values when the user submits the form. 
+Consider using [real-time validation](/learn/forms/javascript#ensure-users-are-notified-about-errors-in-real-time) 
+to help users correct invalid data as soon as they have entered it, rather than waiting for form 
+submission.
+
+### Ensure users can see the password they entered
+
+The text you fill in for `<input type="password">` is obscured by default, 
+to respect the privacy of users. 
+Help users to enter their password, 
+by showing a `<button>` to toggle the visibility of the entered text.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: 'bd8577c5380c436dba2788c7a2c8652a',  
+  height: 300  
+} %}
+
+Learn more about 
+[implementing a password-reveal `<button>`](/learn/forms/javascript/#ensure-users-can-see-the-password-they-entered).
+
+## Ensure your sign-in and sign-up forms are usable
+
+Test your sign-in and sign-up forms regularly with real people to make sure that authentication works as expected. 
+Use analytics and [real user measurement (RUM)](/user-centric-performance-metrics/) to collect field data, 
+and tools such as [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 
+and [PageSpeed Insights](https://pagespeed.web.dev/) to run tests yourself. 
+Learn more about [testing for usability](/learn/forms/usability-testing) and 
+[gathering analytics data](/learn/forms/data).
+
+Ensure your forms work in different browsers and on different platforms. 
+Test your form on different screen sizes, using only your keyboard, 
+or using a screen reader such as 
+[VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6) on Mac or 
+[NVDA](https://www.nvaccess.org/) on Windows.
+
+## Help users change their account settings
+
+Make sure that users can change every account setting, 
+including email addresses, passwords, and usernames.
+
+Make it transparent what data you are storing, 
+and help users download all their personal data at any time. 
+Ensure users can delete their account if that's what they want. 
+Account management features such as these may be a legal requirement in some regions.
+
+### Ensure users can update their passwords
+
+Make it easy for users to update their password.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: 'dd3ac6198324f644774583c02bf0fbd8',  
+  height: 450  
+} %}
+
+Ask users for the current password before changing it, 
+and send an email about a password change with the option to revert and lock the account.  
+
+Add the option to request a new password, 
+and consider providing a [`.well-known` URL](/change-password-url/) for requesting a new password.
+
+## Resources
+
+-  [Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html)
+-  [Understanding the root cause of account takeover](https://security.googleblog.com/2017/11/new-research-understanding-root-cause.html)
+-  [Password security: Complexity vs. length](https://resources.infosecinstitute.com/topic/password-security-complexity-vs-length/)
+-  [Sign-up form best practices](/sign-up-form-best-practices)
+-  [Sign-in form best practices](/sign-in-form-best-practices)
+-  [Effective password management | Session](https://www.youtube.com/watch?v=4Ve2kw_AN84)
diff --git a/src/site/content/en/learn/forms/index.md b/src/site/content/en/learn/forms/index.md
new file mode 100644
index 00000000000..861c7db9c32
--- /dev/null
+++ b/src/site/content/en/learn/forms/index.md
@@ -0,0 +1,61 @@
+---
+title: Learn Forms
+authors:
+  - michaelscharnagl
+description: A course about HTML forms to help you improve your web developer expertise.
+date: 2021-11-03
+---
+
+## Welcome to Learn forms 
+
+This course breaks down HTML forms into easy to understand pieces. 
+Over the next few modules, you'll learn how an HTML form works and how to use them effectively in your projects. 
+Use the menu pane by the **Learn Forms** logo to navigate the modules.
+
+You'll learn how to build a basic HTML form, about HTML form elements, 
+styling forms, help users re-entering data, 
+ensuring the form is accessible, and secure, how to test your forms, and about specific form types. 
+
+Each module is full of interactive demos and self-assessments for you to test your knowledge.
+
+This course is suitable for beginners and advanced HTML developers. 
+The first few modules help you get started with building HTML forms, 
+the other modules give more detail. 
+You can go through the series from start to finish to get a general understanding of HTML forms, 
+or pick a specific module you want to learn more about. 
+
+## Prerequisites
+
+Before starting this course, you should know about HTML. 
+For those new to web development, 
+check out the [intro to HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) 
+course from MDN to learn all about how to write markup.
+
+## Demos
+
+For most demos, we use [CodePen](https://codepen.io/).
+
+Looking at the demos, you might wonder where the styles come from. 
+We use a general stylesheet included in all demos, so only the relevant styles are shown there. 
+In CodePen, you can select included CSS files from Settings.
+
+## Form controls and form fields
+
+A **form control** is an element that enables user interaction and data entry or selection: 
+an `<input>`, `<select>`, `<textarea>` or `<button>`.
+
+Sometimes **form field** is used to refer to form controls, 
+in particular elements for text entry: `<input>` and `<textarea>`.
+
+## Here's what you'll learn
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn about forms? [Let's get started](/learn/forms/form-element/).
+
+{% Aside %}  
+This course is written and edited by forms community experts: 
+[Michael Scharnagl](https://twitter.com/justmarkup), 
+[Sam Dutton](https://twitter.com/sw12), 
+and [Rachel Andrew](https://twitter.com/rachelandrew). <a href="https://twitter.com/rob_dodson">Rob Dodson</a> and <a href="https://twitter.com/jiwoong">Jiwoong Lee</a> shepherded the UX and production build, along with help from <a href="https://twitter.com/devnook">Ewa Gasperowicz</a> and <a href="https://twitter.com/samthor">Sam Thorogood</a>. 
+{% endAside %}
diff --git a/src/site/content/en/learn/forms/internationalization/index.md b/src/site/content/en/learn/forms/internationalization/index.md
new file mode 100644
index 00000000000..dada5447e5f
--- /dev/null
+++ b/src/site/content/en/learn/forms/internationalization/index.md
@@ -0,0 +1,151 @@
+---
+title:  Internationalization and localization
+description: >
+  Be prepared for international data formats, and learn how to plan your form for localization.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+If you're reading this, you're using the World Wide Web.
+Your forms may be used by people speaking different languages,
+people from different countries, and people with different cultural backgrounds.
+Learn how to prepare your form for internationalization and localization.
+
+## Ensure your form works in different languages
+
+Let's see how you can make sure your form works with different languages.
+
+The first step to make your site localization-ready is to define the language attribute `lang` on the `<html>` element.
+This attribute enables screen readers to invoke the correct pronunciation,
+and helps browsers offer a translation of the page if the defined language is not the default browser language.
+
+```html
+<html lang="en-us">
+```
+
+Learn more about the [`lang`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang) attribute.
+
+Say you translated a form to German.
+How can you make sure search engines and browsers know about the translated version?
+You can add `<link>` elements in your site's  `<head>` describing the alternate versions.
+
+```html
+<link rel="alternate" title="The form element"
+  href="https://example.com/en/form" hreflang="en">
+<link rel="alternate" title="Das Formularelement"
+  href="https://example.com/de/form" hreflang="de">
+```
+
+## Help users who speak another language to use your form
+
+You can't translate your form into every language,
+but you can ensure translation tools can translate it for you.
+
+{% Aside %}
+Try it out! Enter the URL of your form in
+[Google Translate](https://translate.google.com),
+choose a language, and translate it.
+All visible content of your site will be translated.
+This is a good test to see if every text is translatable.
+{% endAside %}
+
+To ensure translation tools translate all the text on your form,
+make sure all text is defined in HTML and is visible.
+Some tools also work with content defined in JavaScript, but to improve compatibility,
+try to include as much text as possible in HTML.
+
+{% Aside %}
+Avoid using the `aria-label` attribute to describe elements.
+Many translation tools aren't able to translate the `aria-label` attribute.
+
+Learn more why `aria-label` [doesn't translate](https://adrianroselli.com/2019/11/aria-label-does-not-translate.html).
+{% endAside %}
+
+## Ensure your form works with different writing systems
+
+Different languages use different writing systems and character sets.
+Some scripts are written from left to right, and some from right to left.
+
+### Make spacing independent of writing systems
+
+To ensure your form works for different writing systems,
+you can use [CSS logical properties](https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties).
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '043b19ee429ea0834022967e2207d6b9',
+  height: 300
+} %}
+
+The input has a border thickness of `1px` on all sides,
+except on the left side, where the border is `4px` thick.
+Now, edit the [CodePen](https://codepen.io/web-dot-dev/pen/043b19ee429ea0834022967e2207d6b9) and change the writing system to right to left
+by adding `dir="rtl"` to the `<main>` element
+
+{% Aside %}
+The `dir` attribute indicates the direction of an element's text.
+If the complete site uses the same writing system,
+define the `dir` attribute on the `<html>` element.
+In CodePen you don't have access to the `<html>` element,
+which is why you need to add it to `<main>`.
+
+You can also use the CSS `direction` property to achieve the same result.
+{% endAside %}
+
+The thick border is now on the right side.
+That's because we defined the border using a logical property.
+
+```css
+input {
+  border-inline-start-width: 4px;
+}
+```
+
+Learn more about [logical properties](/learn/css/logical-properties/).
+
+## Ensure your form can handle different name formats
+
+Say you have a form where the user should fill in their name.
+How would you add the field to your form?
+
+You could add one field for the first name and one for the surname. However, names are different
+around the world: for example, some people don't have a surname—so how should they fill in the
+surname field?
+
+To make it quick and easy to enter names—and to ensure everybody can enter their name, whatever the
+format—use a single form field for names wherever possible.
+
+Learn more about [personal names](https://www.w3.org/International/questions/qa-personal-names).
+
+If you have a name with [non-Latin characters](/payment-and-address-form-best-practices/#unicode-matching),
+you may have encountered the issue that your name is reported as `invalid` in some forms. When you
+build forms, make sure to allow all possible characters—and do not assume that a name only consists
+of Latin characters.
+
+## Allow a variety of address formats
+
+The headquarters of Google is at 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.
+
+This address includes the street number, street, city, state, postal code, and country.
+In your country, the address format may be totally different.
+How can you ensure everybody can enter their address in your form?
+
+One way is to use generic inputs.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '4d4096f67fe84bc2a8c7640974a0fb21',
+  height: 700
+} %}
+
+Learn more about other ways to work with
+[international address fields](https://www.uxmatters.com/mt/archives/2008/06/international-address-fields-in-web-forms.php).
+
+{% Assessment 'internationalization' %}
+
+## Resources
+
+- [W3C Internationalization articles and tutorials](https://www.w3.org/International/articlelist)
+- [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/) provides useful links and extensive guidance for address formats in over 200 countries.
+- [DataHub.io](https://datahub.io/core/country-list) is a tool for downloading country codes and names.
diff --git a/src/site/content/en/learn/forms/internationalization/internationalization.assess.yml b/src/site/content/en/learn/forms/internationalization/internationalization.assess.yml
new file mode 100644
index 00000000000..a0709633f48
--- /dev/null
+++ b/src/site/content/en/learn/forms/internationalization/internationalization.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of internationalization and localization
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: How do you invoke the correct pronunciation for screen readers?
+    options:
+      - content: "With the `lang` attribute."
+        rationale: "🎉"
+      - content: "With the `hreflang` attribute."
+        rationale: "Try again!"
+      - content: "Adding a description with what language is used."
+        rationale: "Try again!"
+      - content: "With the `language` attribute."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How can you change the writing system on your website?
+    options:
+      - content: "With the `direction` attribute."
+        rationale: "Try again!"
+      - content: "With the `dir` attribute."
+        rationale: "🎉"
+      - content: "Using CSS logical properties."
+        rationale: "Try again!"
+      - content: "Using the `<link>` element."
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/forms/javascript/index.md b/src/site/content/en/learn/forms/javascript/index.md
new file mode 100644
index 00000000000..0776b542760
--- /dev/null
+++ b/src/site/content/en/learn/forms/javascript/index.md
@@ -0,0 +1,194 @@
+---
+title: JavaScript
+description: >
+  Find out how to use JavaScript to enhance your forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+## Respond to form events
+
+You can use JavaScript to respond to user interactions on your form, reveal additional form fields, submit a form, and much more.
+
+### Help users fill in additional form controls
+
+Imagine that you built a survey form. After a user selects one option,
+you want to show an additional `<input>` to ask a specific question related to the selection.
+How can you only show the relevant `<input>` element?
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '8e1e7a38790c75c267a978efa1d8e937',
+  height: 350
+} %}
+
+You can use JavaScript to reveal an `<input>` only when the associated `<input type="radio">` is currently selected.
+
+```js
+if (event.target.checked) {
+    // show additional field
+} else {
+   // hide additional field
+}
+```
+
+{% Aside 'caution' %}
+Make sure your form is still usable
+[if JavaScript isn't available](https://kryogenix.org/code/browser/everyonehasjs.html).
+The core experience should be the same for all users, with JavaScript used only as an enhancement.
+{% endAside %}
+
+Let's look at the
+[JavaScript code](https://codepen.io/web-dot-dev/pen/8e1e7a38790c75c267a978efa1d8e937?editors=0010) for the demo.
+Have you noticed the `aria-controls`, and `aria-expanded` attributes?
+Use these
+[ARIA attributes](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)
+to help screen reader users understand when an additional form control is shown or hidden.
+
+{% Aside 'caution' %}
+The `aria-expanded` attribute for `<input type="radio">` isn't
+[correctly announced by every screen reader](https://accessibility.blog.gov.uk/2021/09/21/an-update-on-the-accessibility-of-conditionally-revealed-questions/).
+{% endAside %}
+
+### Ensure users can submit a form without leaving a page
+
+Imagine you have a comment form. When a reader adds a comment and submits the form,
+it would be ideal if they could immediately see the comment without a page refresh.
+
+To achieve this, listen to the `onsubmit` event, then use `event.preventDefault()` to prevent the default behavior,
+and send the `FormData` using the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API).
+{% BrowserCompat 'api.fetch' %}
+
+{% Aside %}
+`FormData` is a set of key/value pairs representing form fields and their values.
+You can add all your form fields to the `FormData` object, or only send some form fields and their values.
+{% endAside %}
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'b499a861d7b1fee74464a690cf0ff97e',
+  height: 400,
+  tab: 'js,result'
+} %}
+
+Your backend script can check if a `POST` request appears to be from the browser
+(using the `action` attribute of a form element, where `method="post"`) or from JavaScript,
+such as a `fetch()` request.
+
+```js
+if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
+    // return JSON
+} else {
+    // return HTML
+}
+```
+
+Always notify screen reader users about dynamic content changes.
+Add an element with the `aria-live="polite"` attribute to your HTML,
+and update the content of the element after a change.
+For example, update the text to 'Your comment was successfully posted', after a user submits a comment.
+
+Learn more about [ARIA live regions](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
+
+## Validation with JavaScript
+
+### Ensure error messages align with your site style and tone
+
+The wording of default error messages differs between browsers.
+How can you make sure the same message is shown to all users,
+and that the message aligns with your site's [style and tone](https://developers.google.com/style/tone)?
+Use the [`setCustomValidity()`](https://developer.mozilla.org/docs/Web/API/HTMLObjectElement/setCustomValidity)
+method of the [Constraint Validation API](https://developer.mozilla.org/docs/Web/API/Constraint_validation)
+to define your own error messages.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '7ea31257d7cd8fc28792c7f5cdaba97b',
+  height: 300,
+  tab: 'js,result'
+} %}
+
+{% Aside %}
+Make sure to translate and localize your error messages if you have a multi-language website.
+{% endAside %}
+
+### Ensure users are notified about errors in real time
+
+The built-in HTML features for form validation are great for notifying users
+about invalid form fields before the data is sent to your backend.
+Wouldn't it be great to notify users as soon as they leave a form field?
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'b7ed22a0539f9beef4dc03380f51f224',
+  height: 300,
+  tab: 'js,result'
+} %}
+
+Listen for the
+[`blur`](https://developer.mozilla.org/docs/Web/API/Element/blur_event)
+event which fires when an element loses focus, and use the
+[`ValidityState`](https://developer.mozilla.org/docs/Web/API/ValidityState) interface to detect if a form control is invalid.
+
+### Ensure users can see the password they entered
+
+The text entered for `<input type="password">` is obscured by default,
+to respect the privacy of users.
+Help users to enter their password, by showing a `<button>` to toggle the visibility of the entered text.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bd8577c5380c436dba2788c7a2c8652a',
+  height: 300
+} %}
+
+[Try out the demo](https://codepen.io/web-dot-dev/pen/bd8577c5380c436dba2788c7a2c8652a). Toggle the
+visibility of the entered text, by using the **Show Password** `<button>`.
+How does this work? Clicking on **Show Password**,
+changes the `type` attribute of the password field from `type="password"` to `type="text"`,
+and the `<button>` text changes to 'Hide Password'.
+
+{% Aside 'codelab' %}
+[Try to improve the **Show Password** `<button>`](https://codepen.io/web-dot-dev/pen/bd8577c5380c436dba2788c7a2c8652a).
+Where would you position the `<button>`?
+Could you use only an icon and still make sure the `<button>` is accessible?
+{% endAside %}
+
+It's important to make the **Show Password** button accessible.
+Connect the `<button>` with the `<input type="password">` using the `aria-controls` attribute.
+
+{% Aside 'caution' %}
+The `aria-controls` attribute is not supported by every screen reader,
+but for those that do support it, it's a great enhancement.
+{% endAside %}
+
+To notify screen reader users if the password is currently shown or hidden,
+use a hidden element with `aria-live="polite"`, and change its text accordingly.
+It's important to enable screen reader users to know when a password is displayed and visible to someone else looking at their screen.
+
+```html
+<span class="visually-hidden" aria-live="polite">
+    <!-- Dynamically change this text with JavaScript -->
+</span>
+```
+
+{% Aside %}
+Microsoft Edge shows a built-in password reveal control for `<input type="password">`. To prevent having two reveal buttons, hide the built-in control with:
+
+```css
+::-ms-reveal {
+  display: none
+}
+```
+
+Learn more about [customizing the password reveal button](https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal).
+{% endAside %}
+
+Learn more about [implementing a show password option](https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/).
+
+## Resources
+
+- [FormData](https://developer.mozilla.org/docs/Web/API/FormData)
+- [Constraint Validation API](https://developer.mozilla.org/docs/Web/API/Constraint_validation)
+- [`<input type="password">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/password)
diff --git a/src/site/content/en/learn/forms/payment/index.md b/src/site/content/en/learn/forms/payment/index.md
new file mode 100644
index 00000000000..7b23eda090a
--- /dev/null
+++ b/src/site/content/en/learn/forms/payment/index.md
@@ -0,0 +1,100 @@
+---
+title: Payment forms
+description: >
+  Improve conversion rates by building better payment forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+{% Aside %}  
+This module is about payment forms and doesn't explain how to implement transactions on your site. 
+You can add payment functionality by implementing [Web Payments](/payments/), 
+or using a third-party payment platform.  
+{% endAside %}
+
+The payment form is often the last step before completing a purchase. 
+To maximize conversions, ensure your payment form is user-friendly and secure.
+
+{% Codepen {  
+  user: 'web-dot-dev',  
+  id: '0f0da240784a36da7fa958018af29f3f',  
+  height: 500  
+} %}
+
+## Ensure users know what to fill in
+
+Keep your payment form as simple as possible, 
+showing only required fields.
+
+{% Aside %}  
+You don't need to add a selector for the card type—that's worked out automatically by the payment processor from the card number. 
+However, you may want to enhance your card number field by indicating the card type based on the entered number. 
+You can use a [regex](https://gist.github.com/michaelkeevildown/9096cd3aac9029c4e6e05588448a8841) to test the card type, 
+and show the brand logo next to the card number `<input>`.  
+{% endAside %}
+
+Indicate the payment amount. 
+The **Submit** button is ideal for that.
+
+```html  
+<button>Pay $300.00</button>  
+```
+
+Use self-explanatory wordings for your `<label>` elements. 
+For example, use 'Security code', 
+instead of an acronym like 'CVV' that's only used by some brands.
+
+{% Aside %}  
+Use a single `<input>` for each of the name and card number fields. Keep the user in typing mode, 
+and don't waste their time by forcing them to jump between multiple name or card number fields.  
+{% endAside %}
+
+## Help users enter their payment details
+
+To maximize conversions, ensure users can fill out your payment form as quickly as possible.
+
+Use `inputmode="numeric"` for the card number and security code fields 
+to show an optimized on-screen keyboard for entering numbers.
+
+{% Aside 'caution' %}  
+Use `type="number"` only for incremental fields, 
+for example, the quantity of a product. 
+Browsers show an up/down arrow for `type="number"` 
+which makes no sense for payment card numbers.   
+{% endAside %}
+
+Add appropriate `autocomplete` values for your payment form controls to ensure browsers offer autofill. 
+Use `autocomplete="cc-name"` for the name, 
+`autocomplete="cc-number"` for the card number, and `autocomplete="cc-exp"` for the expiry date.
+
+{% Aside %}  
+You can help users fill in the correct format for expiry date by using an 
+[input mask](https://css-tricks.com/input-masking/). 
+Test with real users, using only your keyboard, 
+and a screen reader such as [VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6) 
+on Mac or [NVDA](https://www.nvaccess.org/) on Windows to ensure the input is still accessible.  
+{% endAside %}
+
+## Ensure users enter data in the correct format
+
+Use the `required` attribute for every `<input>` to ensure users fill out the complete form. 
+
+Payment card security codes can be three or four digits. 
+Use `minlength="3"` and `maxlength="4"` to only allow three and four digits.
+
+Ensure users only enter numbers for the card number and security code. 
+Use `pattern="[0-9 ]+"` to allow users to include spaces when entering a card number, 
+since this is how the numbers are displayed on the physical cards. 
+
+{% Aside %}  
+Payment card brands use different formats, 
+for example, for card numbers and security codes. 
+Always test your payment form with every card type you support. 
+Ensure your validation rules consider every possible format.  
+{% endAside %}
+
+## Resources
+
+-  [Payment and address forms best practices](/payment-and-address-form-best-practices).
+-  [Web Payments](/payments/).
diff --git a/src/site/content/en/learn/forms/security-privacy/index.md b/src/site/content/en/learn/forms/security-privacy/index.md
new file mode 100644
index 00000000000..6535df3a682
--- /dev/null
+++ b/src/site/content/en/learn/forms/security-privacy/index.md
@@ -0,0 +1,204 @@
+---
+title: Security and privacy
+description: >
+  Learn how to make your forms secure and keep your users' data private.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+When you create a form, you work with user data.
+Your number one concern should be to ensure that user data is kept private and transferred securely.
+Let's have a look at what can be done.
+
+{% Aside %}
+A secure form means that all data is encrypted, kept secure, and no unauthorized access can happen.
+
+To ensure privacy, only save the data you need,
+only save personal data after consent, ensure the user is in full control of their data,
+and never share user data with others without the user's consent.
+{% endAside %}
+
+## Ensure your form is secure
+
+As a first step, make sure to request as little data as possible.
+Don't ask for data you don't need,
+and always question whether you need all of the requested data.
+Less data means less risk, less cost, and less liability.
+In addition, reducing the number of fields in a form makes it less complex,
+easier to fill out, and can reduce abandonment rates.
+
+[Always use HTTPS](/secure/#secure-connections-with-https),
+especially for pages that include a form.
+With HTTPS, data is encrypted when coming from the server and when going back to the server.
+
+Say you're sitting in a café using public Wi-Fi.
+You open an e-commerce site and fill in your credit card information to purchase something.
+If the website uses HTTP, anyone (with the skills to do so)
+on the same public Wi-Fi could see your credit card information.
+If the website uses HTTPS, the data is encrypted and therefore protected from anyone trying to access it.
+
+On your site, you should also make sure to redirect any HTTP requests to HTTPS.
+Learn more about
+[how to redirect all traffic to HTTPS](https://geekflare.com/http-to-https-redirection/).
+
+## Help users to keep their data private
+
+In the [first module](/learn/forms/form-element), you learned about two possible ways to transfer data:
+using a `GET` request and using a `POST` request.
+
+With a `GET` request, form data is included as a [query string](https://en.wikipedia.org/wiki/Query_string)
+in the request URL. If you submit a form that uses a `GET` request,
+the browser adds the request URL including form data to your browsing history.
+Convenient if you want to look up past form submissions,
+for example for a search form. Not great at all,
+if sensitive data is submitted,
+and everybody with access to your browser history or local network can see this information.
+
+Use `POST` requests for every form where data that's personal or otherwise sensitive may be submitted.
+This way, the data is only visible to the backend script processing it.
+
+What about saving and processing personal data directly in the browser?
+You could use client storage, for example, `localStorage` to store personal data in the browser.
+With regard to privacy, this is less than ideal.
+Again, everyone with access to your browser is able to read this information.
+You should only store encrypted values for personal data.
+
+## Ensure users can safely sign up and sign in
+
+User account [authentication](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)
+is a complex issue in terms of privacy and security.
+It may be better to use a
+[third-party identity provider](/sign-up-form-best-practices/#federated-login),
+instead of building your own secure authentication system.
+
+Learn more about
+[best practices for account authentication, and password management](https://cloud.google.com/blog/products/identity-security/account-authentication-and-password-management-best-practices).
+
+{% Aside %}
+If you do choose to build your own authentication system, make sure to follow best practice for password management:
+
+- Never store or transmit passwords in plain text.
+Make sure to salt and hash passwords—and
+[don't try to invent your own hashing algorithm](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html).
+- Ensure users enter [secure passwords](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements).
+- Don't allow [compromised passwords](/sign-up-form-best-practices/#no-compromised-passwords).
+- Don't force [password updates](/sign-up-form-best-practices/#no-forced-password-updates).
+- Make it simple for users to change or reset passwords.
+{% endAside %}
+
+## Help users access their personal data
+
+Many regions have laws and regulations regarding data protection and privacy,
+including the
+[CCPA](https://en.wikipedia.org/wiki/California_Consumer_Privacy_Act) in California and the
+[PDPA](https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3244203) in India.
+Every website available in the European Union (EU) has to follow
+[General Data Protection Regulation](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation) (GDPR),
+even if the site is not based in the EU.
+
+GDPR sets guidelines for the collection and processing of personal information from people living in the EU.
+Consent is required to process personal data,
+users can request personal information that you store at any time,
+and you have to officially announce data leaks.
+A good thing for the user, as this helps to ensure that their privacy is respected. Learn more about
+[GDPR](https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/).
+
+Make sure your users know how you plan to process personal data.
+Transparency is the key to trust.
+Users should always be able to access, modify,
+and delete all data you saved for them.
+
+## Ensure users can update their personal data
+
+Make it easy for users to update their personal data, including passwords,
+email addresses, and usernames. Notify users about changes to their stored personal data,
+and ensure users can revoke changes.
+For example, send an email to the previous and new email address after users change their email address.
+
+{% Aside %}
+Separate the concept of user account and user identity to simplify implementing third-party identity provision.
+Allow users to change their username and link multiple identities to a single user account,
+for example if they sign up with an email and password, then sign up with a third-party identity provider.
+{% endAside %}
+
+Make it easy for users to delete their account, including all associated data,
+and where relevant, make it possible to download data.
+Account deletion is a
+[legal requirement](https://ec.europa.eu/info/law/law-topic/data-protection_en) in some regions.
+
+{% Aside %}
+Link to your privacy policy on each page with a form,
+especially if personal data is processed.
+{% endAside %}
+
+Require an additional authentication step,
+for example, re-entering the current password,
+to view or change personal information on your site.
+
+Find out more:
+[Web Application Privacy Best Practices](https://www.w3.org/TR/app-privacy-bp/).
+
+## Ensure all data is in good shape
+
+In a previous module, you learned about [validation on the frontend](/learn/forms/validation).
+Frontend validation is important, but users might still be able to submit invalid data. As a next
+step, you must also validate the data [on the backend](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)
+before saving the data in your database. This ensures that no invalid data is saved in your database.
+
+Validation helps to ensure that the data format is valid,
+but you should still not trust data entered by users.
+How can you safely output the data? To prevent
+[Cross Site Scripting](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) (XSS),
+and ensure all data is safe to include in HTML, you must sanitize data before output.
+
+Learn more about [sanitizing data before output](https://benhoyt.com/writings/dont-sanitize-do-escape/)
+and, where possible, use the [Sanitizer API](/sanitizer/).
+
+## Ensure all submissions come from real people
+
+To help protect your data, you have various options to prevent spam submissions from
+[bots](https://en.wikipedia.org/wiki/Internet_bot#Malicious_bots).
+
+The first option is to use a service such as
+[reCAPTCHA](https://www.google.com/recaptcha/about/),
+to distinguish between real people and bots.
+This requires you to include a JavaScript snippet on your page,
+and add extra attributes to your **Submit** button.
+
+reCAPTCHA performs various checks to find out if you are a human.
+For example, it may ask you to identify images.
+Automated software, such as a bot, cannot accomplish these challenges and can't submit the form.
+
+{% Aside %}
+Always make sure your spam protections are accessible.
+Try them out by using a screen reader, and by only using your keyboard.
+The best spam protection is useless if it makes the form unusable for real people.
+{% endAside %}
+
+### A honeypot
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'c8e82763c4ce344eb23dfd3ef621b662',
+  height: 400,
+  tab: 'html,result'
+} %}
+
+Another option is to use a so-called 'honeypot': a visually hidden form field.
+Humans won't see a honeypot field, but bots will fill it in.
+On the backend, your processing script can check if the field was completed.
+If it was, the submission was probably from a bot, and you can ignore it.
+
+There are also services like
+[Akismet](https://akismet.com), which can help you with spam protection.
+The Akismet filter works by combining information about spam captured on all participating sites,
+and then using those spam rules to block future spam.
+Akismet is transparent to the user, and catches most spam.
+
+{% Assessment 'security-privacy' %}
+
+## Resources
+
+- [Digital Identity Guidelines](https://pages.nist.gov/800-63-3/sp800-63b.html)
+- [Database Security Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Database_Security_Cheat_Sheet.html)
diff --git a/src/site/content/en/learn/forms/security-privacy/security-privacy.assess.yml b/src/site/content/en/learn/forms/security-privacy/security-privacy.assess.yml
new file mode 100644
index 00000000000..9f408c72846
--- /dev/null
+++ b/src/site/content/en/learn/forms/security-privacy/security-privacy.assess.yml
@@ -0,0 +1,30 @@
+setLeader: Test your knowledge of security and privacy
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the preferred method to transfer personal data using forms?
+    options:
+      - content: "A `POST` request."
+        rationale: "🎉"
+      - content: "A carrier pigeon."
+        rationale: "Try again!"
+      - content: "A `GET` request."
+        rationale: "Try again!"
+      - content: "HTTPS"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "3"
+    correctAnswers: "0,1,2"
+    stem: How can you prevent spam?
+    options:
+      - content: "CAPTCHAS"
+        rationale: "🎉"
+      - content: "A Honeypot form field."
+        rationale: "🎉"
+      - content: "Spam services."
+        rationale: "🎉"
+      - content: "Only serve vegetarian forms."
+        rationale: "Try again!"
+
diff --git a/src/site/content/en/learn/forms/styling-form-controls/index.md b/src/site/content/en/learn/forms/styling-form-controls/index.md
new file mode 100644
index 00000000000..eec8b0a71df
--- /dev/null
+++ b/src/site/content/en/learn/forms/styling-form-controls/index.md
@@ -0,0 +1,188 @@
+---
+title: Styling form controls
+description: >
+  Learn how to implement form controls with CSS.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+In this module you learn how to style form controls, and how to match your other site styles. 
+
+{% Aside 'caution' %}
+Styling HTML form controls can be a challenge, 
+but you should still use built-in elements wherever possible. 
+Elements such as `<input>` and `<button>` are widely supported across browsers and platforms, 
+and have built-in features that enhance usability and accessibility, 
+which you don't need to implement yourself. Using a `<div>` instead doesn't provide these benefits. 
+{% endAside %}
+
+## Help users select an option
+
+### The `<select>` element
+
+The default styles of a `<select>` element don't look great, and the appearance is inconsistent between browsers. 
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eea33ada7ec976aa5791a5cd14756c34',
+  height: 300
+} %}
+
+{% Aside %}
+You can also use an `<input>` in combination with the 
+[`<datalist>`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) element. 
+This gives you a combination of a text field and a list of `<option>` elements. 
+You can see examples of [`<datalist>`](http://simpl.info/datalist) here.
+{% endAside %}
+
+First, let's change the arrows. 
+
+```css
+select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url(arrow.png);
+    background-repeat: no-repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto;
+}
+```
+
+To remove the default arrows of a `<select>` element, 
+use the CSS [`appearance`](https://developer.mozilla.org/docs/Web/CSS/appearance) property. 
+To show the arrow of your choice, define the arrow as a `background`.
+
+{% Aside %}
+To ensure the best cross-browser compatibility, 
+you must also include the prefixed versions of `appearance`: `-moz-appearance` and `-webkit-appearance`. 
+
+[Learn more about vendor prefixes](https://developer.mozilla.org/docs/Glossary/Vendor_Prefix#css_prefixes).
+{% endAside %}
+
+You should also change the `font-size` to at least `1rem` 
+(which for most browsers has a default value of 16px) for your `<select>` element. 
+Doing so will prevent a page zoom on iOS Safari when the form control is focused.
+
+You can, of course, also change the element colors to match your brand colors. 
+After adding some more styles for spacing, `:hover`, and `:focus`, 
+the appearance of the `<select>` element is now consistent between browsers. 
+
+See this in the following demo from 
+[Styling a Select Like It’s 2019](https://www.filamentgroup.com/lab/select-css.html)
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '2f6101907a292463bccd8d7a72d09554',
+  height: 300
+} %}
+
+What about the `<option>` element? The `<option>` element is a so-called 
+[replaced element](https://developer.mozilla.org/docs/Web/CSS/Replaced_element) whose representation is outside the scope of CSS. 
+As of this writing, you can't style the `<option>` element.
+
+{% Aside %}
+There is an ongoing proposal to allow web developers to style and extend built-in web UI controls, 
+including `<select>` and `<option>` elements. This would make it easier to style form controls in the future.
+
+Learn more about [Open UI](https://open-ui.org).
+{% endAside %}
+
+### Checkboxes and Radio buttons
+
+The appearance of `<input type="checkbox">` and `<input type="radio">` varies across browsers. 
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '74d28931d0c0e9aacc89f62380f365e4',
+  height: 400
+} %}
+
+Open the [demo](https://codepen.io/web-dot-dev/pen/74d28931d0c0e9aacc89f62380f365e4) on various browsers to see the difference. 
+Let's see how to make sure that checkboxes and radio buttons match your brand and look the same cross-browser.
+
+In the past, developers could not style `<input type="checkbox">` and `<input type="radio">` controls directly. 
+[Checkboxes and radio buttons can be styled via their pseudo elements](https://www.scottohara.me/blog/2021/09/24/custom-radio-checkbox-again.html), now.
+Or the following replacement technique can be used to create custom styles for these elements.
+
+First, hide the default checkbox and radio button visually.
+
+```css
+input[type="radio"],
+input[type="checkbox"] {
+   position: absolute;
+   opacity: 0;
+}
+```
+
+It's important to use `position: absolute` in combination with `opacity: 0` instead of `display: none` or `visibility: hidden` 
+so that the controls are only visually hidden. This will ensure they are still exposed by the browser's 
+[accessibility tree](/the-accessibility-tree/). Note that further styling may be needed to ensure that the visually hidden
+form controls remain positioned "on top" of their replacement elements. Doing so will help ensure that hovering over one of these
+elements, when a screen reader is on, or when using touch devices with screen readers enabled, the visually hidden controls will
+be discoverable if exploring by touch, and the screen reader's visible focus indicator will generally appear in the location the controls
+are rendered on screen.
+
+To show your custom checkboxes and radio buttons, you have different options. 
+You use the `::before` CSS pseudo-element and the CSS `background` property, or use inline SVG images. 
+
+```css
+input[type="radio"] + label::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  border: 1px solid black;
+  display: inline-block;
+  border-radius: 50%;
+  margin-inline-end: 0.5em;
+}
+
+input[type="radio"]:checked + label::before {
+  background: black;
+}
+```
+
+{% Aside %}
+Styled form controls must be easy to understand and use. People are used to a checkbox that looks 
+like a checkbox, so make sure when you style a form control that users still understand how to use it. 
+{% endAside %}
+
+There are a lot of possibilities with CSS to ensure checkboxes and radio buttons match your brand styles.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '433b6d50b9d7d706e31ee5a638790c3d',
+  height: 400
+} %}
+
+Learn more about 
+[styling `<input type="checkbox">`, and `<input type="radio">`](https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/) 
+and [custom checkbox styles](https://moderncss.dev/pure-css-custom-checkbox-style/).
+
+## How to use your site's colors for form controls
+
+Do you want to bring your site styles to form controls with one line of code? 
+You can use the [`accent-color`](/accent-color/) CSS property to achieve this.
+
+```css
+checkbox {
+  accent-color: orange;
+}
+```
+
+{% Aside %}
+As of this writing, only Chrome, Firefox and Edge support `accent-color`. 
+To ensure cross-browser compatibility, 
+you might want to use workarounds until `accent-color` is supported in all platforms.
+{% endAside %}
+
+{% Assessment 'styling-form-controls' %}
+
+## Resources
+
+- [Accent color](/accent-color/)
+- [Styling the `<select>` element](https://www.filamentgroup.com/lab/select-css.html)
+- [The Accessibility of Styled Form Controls](https://scottaohara.github.io/a11y_styled_form_controls/)
+- [Open UI](https://open-ui.org)
diff --git a/src/site/content/en/learn/forms/styling-form-controls/styling-form-controls.assess.yml b/src/site/content/en/learn/forms/styling-form-controls/styling-form-controls.assess.yml
new file mode 100644
index 00000000000..4b2dd64575d
--- /dev/null
+++ b/src/site/content/en/learn/forms/styling-form-controls/styling-form-controls.assess.yml
@@ -0,0 +1,16 @@
+setLeader: Test your knowledge of styling form controls
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How can you remove platform-native styling of form controls?
+    options:
+      - content: "Using `revert: all;`."
+        rationale: "Try again!"
+      - content: "Using `appearance: none;`."
+        rationale: "🎉"
+      - content: "Using `appearance: revert;`."
+        rationale: "Try again!"
+      - content: "Using `revert: appearance;`."
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/forms/styling/index.md b/src/site/content/en/learn/forms/styling/index.md
new file mode 100644
index 00000000000..1930370f3a1
--- /dev/null
+++ b/src/site/content/en/learn/forms/styling/index.md
@@ -0,0 +1,153 @@
+---
+title: Styling forms
+description: >
+  Style forms using CSS, while ensuring they remain usable and readable for everyone.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+## Help users use your form with their preferred browser
+
+To ensure that your form is accessible to as many people as possible, use the elements built for the 
+job: `<input>`, `<textarea>`, `<select>`, and `<button>`. This is the baseline for a usable form.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '9d0576454b3b2d0fc001addab70d25bc',
+  height: 250
+} %}
+
+The default browser styles don't look great! Let's change that.
+
+{% Aside %}
+Progressive enhancement is a strategy that provides a baseline of essential content and features for as many users as possible. 
+It ensures the best possible experience for users on modern browsers.
+
+You start with content, use 
+[semantic HTML](https://developer.mozilla.org/docs/Glossary/Semantics#semantics_in_html), 
+add future-proof CSS, and add robust JavaScript as a last step.
+{% endAside %}
+
+## Ensure form controls are readable for everyone
+
+The default font size for form controls in most browsers is too small. 
+To ensure your form controls are readable, change the font size with CSS:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '477f5e58a406c6f86bfbfc9da1f18a69',
+  height: 300
+} %}
+
+Increase the `font-size` and `line-height` to improve readability.
+
+```css
+.form-element {
+  font-size: 1.3rem;
+  line-height: 1.2;
+}
+``` 
+
+{% Aside %}
+For `font-size` use relative units such as `em` (relative to the base size of the element's parent) 
+or `rem` (relative to the base size of the document) to ensure that size responds to user preference. 
+Users can change the base `font-size` and all elements with a relative `font-size` will adjust 
+automatically. For `line-height` use a [unitless value](https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/) 
+such as `1.5`, to keep the line height relative to the font size.
+
+Learn more about 
+[pixels vs. relative units in CSS](https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/).
+{% endAside %}
+
+## Help users navigate through your form
+
+As a next step, change the layout of your form, and increase the spacing of form elements, 
+to help users understand which elements belong together.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'f2aca03916816074010e896f064f456a',
+  height: 450
+} %}
+
+The `margin` CSS property increases space between elements, 
+and the `padding` property increases space around the element's content.
+
+For the general layout, use [Flexbox](/learn/css/flexbox/) or [Grid](/learn/css/grid/). 
+Learn more about [CSS layout methods](/learn/css/layout/).
+
+## Ensure form controls look like form controls
+
+Make it easy for people to fill out your form by using well-understood styles for your form controls. 
+For example, style `<input>` elements with a solid border. 
+
+{% Aside %}
+The default `<input>` border color is too light in many browsers. 
+The lack of contrast can make the element hard to see, especially on mobile. 
+[Open this demo](https://codepen.io/web-dot-dev/pen/9d0576454b3b2d0fc001addab70d25bc) in Chrome on Android to see the default styles.
+{% endAside %}
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'd0740e968b5c72a0cf180359e80f5efc',
+  height: 500
+} %}
+
+
+```css
+input,
+textarea {
+  border: 1px solid;
+}
+```
+
+## Help users submit your form
+
+Consider using a `background` for your `<button>` to match your site style, 
+and override or remove the default `border` styles.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'f0052d40806fd750362fa0abaab01dcf',
+  height: 500
+} %}
+
+{% Aside %}
+In modern browsers, you can style a `<button>` like any other element, 
+so you should always use a semantic `<button>`, or `<input type="submit">`. 
+Using the element built for the job provides many built-in usability and accessibility 
+benefits that you won't get when using a generic element such as a `<div>`. 
+You'll learn about the built-in features in other modules.
+
+Learn more about 
+[reverting the default style of a `<button>`](https://archive.hankchizljaw.com/wrote/introducing-the-button-element/#heading-oh-these-are-hard-to-style-though).
+{% endAside %}
+
+## Help users understand the current state
+
+Browsers apply a default style for `:focus`. 
+You can override the styles for `:focus` to match the color to your brand. 
+
+```css
+button:focus {
+    outline: 4px solid green;
+}
+```
+
+{% Aside %}
+Only remove the `outline` on `:focus` if you also add other appropriate focus styles, 
+to ensure that  default and focus styles are distinguishable.
+
+Learn more about 
+[designing focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/).
+{% endAside %}
+
+{% Assessment 'styling' %}
+
+## Resources
+
+- [Learn CSS](/learn/css)
+- [CSS layout methods](/learn/css/layout)
+- [Designing focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/)
+- [Reverting the default style of a `<button>`](https://archive.hankchizljaw.com/wrote/introducing-the-button-element/#heading-oh-these-are-hard-to-style-though).
diff --git a/src/site/content/en/learn/forms/styling/styling.assess.yml b/src/site/content/en/learn/forms/styling/styling.assess.yml
new file mode 100644
index 00000000000..bd77e5e6c74
--- /dev/null
+++ b/src/site/content/en/learn/forms/styling/styling.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of styling forms
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Why should you use relative units for `font-size`?
+    options:
+      - content: "To ensure the size responds to user preference."
+        rationale: "🎉"
+      - content: "To ensure the size responds to the previous element."
+        rationale: "Try again!"
+      - content: "To ensure the size responds to dark mode."
+        rationale: "Try again!"
+      - content: "To ensure the size responds to media queries."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: How can you increase spacing between form controls?
+    options:
+      - content: "Using the `padding` CSS property."
+        rationale: "Try again!"
+      - content: "Using the `spacer` CSS property."
+        rationale: "Try again!"
+      - content: "Using the `margin` CSS property."
+        rationale: "🎉"
+      - content: "Using the `boundary` CSS property."
+        rationale: "Try again!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/forms/testing/index.md b/src/site/content/en/learn/forms/testing/index.md
new file mode 100644
index 00000000000..77a15be5c6b
--- /dev/null
+++ b/src/site/content/en/learn/forms/testing/index.md
@@ -0,0 +1,212 @@
+---
+title: Test your forms
+description: >
+  Learn how to test and analyze your forms.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+updated: 2022-07-18
+---
+
+In previous modules, you learned how to build a form,
+help users avoid re-entering data,
+and how to validate form data.
+How can you now make sure the form is usable?
+You can test and analyze your form to answer this question.
+
+## Does your form work on other devices?
+
+You begin by confirming that your form is working on your own device.
+However, there are many types of devices your users may use.
+How can you test if your form works with other devices?
+
+First, test your form on a desktop device.
+Then try only using your keyboard.
+Next, test it on a phone.
+You have now tested your form with different input methods (keyboard, touch, and mouse),
+different screen sizes,
+different browsers and different operating systems.
+
+Do you have more devices you can test on? Test your form on all of them.
+The more different devices, browsers, browser versions, and operating systems you can test on, the better!
+
+You can also use a test service to test your form on lots of different browsers,
+different browser versions, different devices, and different operating systems.
+[BrowserStack](https://www.browserstack.com) offers free test accounts for open source projects,
+to enable testing on different browsers, devices and operating systems.
+
+## How can you test if your form works for others?
+
+Your first form is ready. You spend a lot of time making sure it works well.
+How can you confirm that your form is usable for everybody else?
+As a first step, you can ask your friends and colleagues to fill out your form.
+
+Sit next to each other or share a screen.
+This way, you can see how they interact with your form. Watch them fill out the form.
+Ask them to say out loud what they're doing and if they're experiencing any problems.
+After they complete the task, ask them questions.
+Was it clear what they should fill out?
+Did they have any issues filling out the form?
+Was anything unclear?
+These questions help you build even better forms.
+
+{% Aside %}
+People from all over the world will use your form.
+Do you have an address field in your form?
+Google a city you always wanted to visit, and search for a restaurant there.
+Now enter the address of the restaurant in your address field.
+The format of the address may be totally different from the address format where you live.
+Test with different data to ensure your form can handle diverse formats.
+{% endAside %}
+
+## How can you measure how your form performs?
+
+You confirmed that your form is usable for other people.
+As a next step, you should measure how your form performs.
+There are free tools available for this. Let's have a look at some of them.
+
+{% Aside %}
+You should always measure before and after you change your form.
+This way, you can compare the results, measure the impact of your change, and demonstrate improvements.
+{% endAside %}
+
+### PageSpeed Insights (PSI)
+
+PSI measures the performance of your site and gives you hints on how to improve it.
+
+[Try it out](https://pagespeed.web.dev/):
+PageSpeed provides a performance report using
+[lab and field data](https://developers.google.com/speed/docs/insights/v5/about/).
+A fast site is the first sign that your form is usable.
+Your site isn't fast yet? PSI shows you recommendations on how to improve performance.
+
+Look again at the report of your site you tested before with PSI.
+See the information about [Core Web Vitals](/vitals/) (CWV)?
+This is a summary if your site fulfills the CWV criteria.
+CWV helps you understand how users experience a web page.
+
+### Lighthouse
+
+Lighthouse helps you identify performance,
+search engine optimization (SEO),
+best practice, and accessibility issues.
+
+There are different ways to use
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).
+One option is to run it directly in
+[DevTools](https://developer.chrome.com/docs/lighthouse/overview/#devtools).
+Open the URL with your form in Chrome,
+[open DevTools](https://developer.chrome.com/docs/devtools/shortcuts/#open),
+switch to the Lighthouse tab, and run the audit.
+
+The performance metrics from PSI are displayed.
+In addition, Lighthouse checks your site against SEO, best practice, and accessibility issues.
+Forgot to connect a label to a form control?
+Lighthouse warns you and provides you with a guide to correct the issue.
+
+### Tools to identify common issues
+
+There are many tools to identify common issues.
+One way is to use the
+[Form troubleshooter extension](https://chrome.google.com/webstore/detail/form-troubleshooter/lpjhcgjbicfdoijennopbjooigfipfjh).
+It warns you about missing `autocomplete` attributes,
+non-standard attributes, missing or empty labels, and more.
+
+You can also use an accessibility evaluation tool like
+[WAVE](https://wave.webaim.org) or
+[axe](https://www.deque.com/axe/). These tools notify you about missing labels,
+missing connections between labels and form controls, insufficient color contrasts,
+and many more accessibility issues.
+
+{% Aside %}
+All these tools help you find common issues,
+but they aren't able to detect all issues.
+Always test your forms manually and with real people.
+{% endAside %}
+
+## How can you monitor form experience?
+
+Monitoring real user experience of your forms helps you identify new issues quickly.
+Let's see how you can monitor your form.
+
+{% Aside %}
+Lab data is measured with a controlled test under ideal conditions.
+Field data comes from real people.
+With field data, you get metrics for real usage in real-world conditions.
+
+People use different browsers, operating systems, screen resolutions, and connection speeds.
+They use different devices. With field data, you collect metrics from a variety of different conditions.
+
+Learn more about
+[why lab and field data can be different](/lab-and-field-data-differences/).
+{% endAside %}
+
+### PSI
+
+One way to monitor experience is to use PSI again.
+You can use the
+[PSI API](https://developers.google.com/speed/docs/insights/v5/get-started)
+to build your own monitoring tool:
+[The PageSpeed Insights API](https://addyosmani.com/blog/pagespeed-insights-api/)
+explains how to do this.
+
+PSI includes data from the
+[Chrome User Experience Report](https://developer.chrome.com/docs/crux/) (CrUX) dataset,
+if available for the given URL.
+This way, you can also see field data directly in the report.
+
+### Lighthouse
+
+Lighthouse can be used as a command line tool,
+as a [Node module](https://www.npmjs.com/package/lighthouse),
+or with the [Lighthouse CI tools](https://github.com/GoogleChrome/lighthouse-ci).
+[Performance monitoring with the Lighthouse CI](/lighthouse-ci/)
+explains adding Lighthouse to a continuous integration system, such as GitHub Actions.
+
+There are many more
+[tools](/vitals-tools-workflow/) available to measure and monitor your site.
+Some are available as web tools, some let you run the audit on your command line,
+and some offer an API to integrate them into your tools.
+
+## How to analyze your form
+
+You tested your form with real users, and learned how to measure and monitor it.
+How can you collect statistics about your users and how they interact with your form?
+You can use an analytics tool. Let's have a look at one and how this works.
+
+### Analytics
+
+One tool you can use is
+[Google Analytics](https://developers.google.com/analytics) (GA).
+After setting it up, you get a JavaScript snippet you include in each page on your site.
+From this point on, you can find out how people use your site.
+
+How many people visit the page with your form on it?
+How many fill out the form and move to the next page?
+You get answers to these questions by using analytics tools.
+
+{% Aside %}
+Monitoring the real-world experience of your users is sometimes called Real User Monitoring
+(RUM).
+
+RUM collects performance metrics directly from the end user's browser.
+RUM data shows you how your site performs, and how real users interact with it.
+{% endAside %}
+
+You can also set up more advanced analytics reports.
+Want to track how many users click the **Submit** button?
+You can define and integrate
+[events](https://developers.google.com/analytics/devguides/collection/gtagjs/events) to analyze this.
+
+A wide range of analytics tools is available.
+Some are minimalistic, some offer a lot of options for individualization.
+Try out a range of tools to find the best for your needs.
+
+{% Assessment 'testing' %}
+
+## Resources
+
+- [Getting started with measuring Web Vitals](/vitals-measurement-getting-started/)
+- [Core Web Vitals](/vitals)
+- [Why lab and field data can be different](/lab-and-field-data-differences/)
+- [Google Analytics: About Events](https://support.google.com/analytics/answer/1033068?hl=en#zippy=%2Cin-this-article)
diff --git a/src/site/content/en/learn/forms/testing/testing.assess.yml b/src/site/content/en/learn/forms/testing/testing.assess.yml
new file mode 100644
index 00000000000..32e77b86879
--- /dev/null
+++ b/src/site/content/en/learn/forms/testing/testing.assess.yml
@@ -0,0 +1,29 @@
+setLeader: Test your knowledge of testing forms
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "2"
+    correctAnswers: "1,2"
+    stem: What is field data?
+    options:
+      - content: "Data collected on a field."
+        rationale: "Try again!"
+      - content: "Data from real users."
+        rationale: "🎉"
+      - content: "Data from real conditions."
+        rationale: "🎉"
+      - content: "Data collected in a lab."
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "2"
+    correctAnswers: "0,3"
+    stem: 'RUM collects metrics from:'
+    options:
+      - content: "real users"
+        rationale: "🎉"
+      - content: "pre-selected users"
+        rationale: "Try again"
+      - content: "pre-defined browsers"
+        rationale: "Try again"
+      - content: "browsers from end users"
+        rationale: "🎉"
diff --git a/src/site/content/en/learn/forms/usability-testing/index.md b/src/site/content/en/learn/forms/usability-testing/index.md
new file mode 100644
index 00000000000..82290cfd218
--- /dev/null
+++ b/src/site/content/en/learn/forms/usability-testing/index.md
@@ -0,0 +1,111 @@
+---
+title: How to test forms for usability
+description: >
+  Discover how to do usability testing and ensure your form works well for all your users.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+## What is usability testing?
+
+Usability testing is a technique to evaluate a device or product, such as a web form. 
+By testing your form on real users, you can identify issues that automated tools may not find. 
+You learn first-hand where you need to improve your form.
+
+To conduct a usability test, 
+you give a person a task such as asking them to complete a form, 
+watch them doing the task, then ask them to 'think aloud'. 
+During the test, you take notes about their interactions. 
+After the test, you ask questions. This way, you find out where your form needs improvements.  
+
+## Test your forms with real people
+
+First, you need to find people who can test your form. 
+Ask family members, friends, and colleagues to test your form. 
+
+{% Aside %}
+Testing doesn't have to be difficult. To improve your forms you don't need a usability lab and 
+complex reporting methodologies!
+
+Testing with one single other person is likely to help you improve your forms. 
+Testing with two or more is even better. Take simple notes and make changes accordingly.
+{% endAside %}
+
+Try to get as diverse a range of testers as possible: 
+in particular, think about age, and technical experience. 
+
+Users may be situationally, temporarily, or permanently impaired. 
+For example, a user could have a vision impairment that makes it difficult for them to read text without sufficient contrast, 
+or a user may have a temporary arm injury that requires them to fill out the form with one hand. 
+
+Testing with a diverse range of people helps you find usability issues you may not be aware of. 
+Learn more about [inclusive design](https://www.microsoft.com/design/inclusive/), 
+the linked site provides personas and sample activities to help you with inclusive UX testing.
+
+For a high-traffic site, 
+you should work with an accessibility consulting company 
+that can provide comprehensive testing with assistive technologies and expert advice on fixing any issues found.
+
+## Identify issues
+
+You found people to test your form. How does a usability test work in practice? 
+
+Ask people to complete specific tasks. 
+Say you want to test your form. 
+Ask them to fill out your form. 
+Are they able to locate the form from the homepage? 
+Are they able to successfully submit the form? 
+Ask them about their experience. 
+As they fill out the form, ask them to explain what they're doing and any issues they encounter.
+
+## Ensure your form is accessible
+
+How can you make sure your form is accessible to all your users?
+
+The best way to ensure your form works as expected is by testing it with real people. 
+Ask a friend or colleague to complete your form. 
+You may be surprised how differently other people use your form, 
+and what is important for them.
+
+Finding people with different needs, who can test your form, 
+isn't always possible. 
+You should, however, always do an accessibility review of your own. 
+For example, you can 
+[emulate vision deficiencies](https://developer.chrome.com/blog/new-in-devtools-83/#vision-deficiencies), 
+use a screen reader on your phone or computer, 
+or use only your keyboard to fill out your form. 
+Try navigating your form via a screen reader such as 
+[VoiceOver on Mac](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6) or 
+[NVDA](https://www.nvaccess.org/) on Windows.
+
+Learn more about 
+[doing an accessibility review](/how-to-review/).
+
+## Measure and monitor impact of changes
+
+After testing with real people and gathering feedback, 
+it's time to adapt your form to the needs of your users. 
+How can you be sure the new version is better than the previous one? 
+
+You can ask the same people who tested your form before, to test your form again. 
+Give them the same tasks, and ask the same questions afterwards. 
+Was it easier to use this time? Did they encounter any new issues?
+
+You tested your forms at home or in the office. 
+How can you test and monitor the experience of your end users? 
+Use analytics, and [real user measurement (RUM)](/user-centric-performance-metrics/). 
+Implement [goal funnels](https://support.google.com/analytics/answer/6180923?hl=en) 
+in analytics to check if changes reduce form abandonment and the time it takes for users to complete your form.
+
+## Test different form designs with end users
+
+One way to get results quicker is by doing A/B testing. You create two versions of your form, and randomly provide one version or the other to your users: some people get version A, and some get version B. Comparing results for the two versions helps you decide which version to use for later iterations. 
+
+Learn more about [A/B testing](https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/).
+
+## Resources
+
+- [Discount Usability Testing](https://www.nngroup.com/articles/discount-usability-20-years/)
+- [Hallway Usability Testing](https://digital.gov/2014/02/19/10-tips-for-better-hallway-usability-testing/)
+- [Doing an accessibility review](/how-to-review/)
diff --git a/src/site/content/en/learn/forms/validation/index.md b/src/site/content/en/learn/forms/validation/index.md
new file mode 100644
index 00000000000..62da4f40568
--- /dev/null
+++ b/src/site/content/en/learn/forms/validation/index.md
@@ -0,0 +1,283 @@
+---
+title: Help users enter the right data in forms
+description: >
+  Learn how to validate your forms on the frontend.
+authors:
+  - michaelscharnagl
+date: 2021-11-03
+---
+
+Browsers have built-in features for validation to check that users have entered data in the correct format.
+You can activate these features by using the correct elements and attributes.
+On top of that, you can enhance form validation with CSS and JavaScript.
+
+{% Aside %}
+This module is about form validation on the frontend.
+You must also make sure to validate data before storing or sharing it on your backend server:
+[find out more](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html).
+{% endAside %}
+
+## Why should you validate your forms?
+
+You learned in the previous module how to help users avoid having to repeatedly
+[re-enter information](/learn/forms/auto) in forms.
+How can you help users enter data that's valid?
+
+It's frustrating to fill out a form without knowing which fields are required,
+or the constraints of those fields.
+For example, you enter a username and submit a form—only to find out that usernames must have at least eight characters.
+
+You can help users with that by defining validation rules and communicating them.
+
+## Help users from accidentally missing required fields
+
+You can use HTML to specify the correct format and constraints for data entered in your forms.
+You also need to specify which fields are mandatory.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '1e3e72e4376292ab80ecd8955529806b',
+  height: 300
+} %}
+
+Try to submit this form without entering any data.
+Do you see an error message attached to the `<input>` telling you that the field is required?
+
+This happens because of the `required` attribute.
+
+```html
+<label for="name">Name (required)</label>
+<input required type="text" id="name" name="name">
+```
+
+{% Aside %}
+Different browsers use different text for error messages.
+The wording is also dependent on the browser language of the user.
+If you use Safari and your preferred browser language is German,
+you get a different error message than a user in Chrome with English as their chosen browser language.
+
+Find out how to
+[change the default error messages with JavaScript](#javascript)
+later in this module.
+{% endAside %}
+
+You already learned that you can use many more types, for example, `type="email"`.
+Let's have a look at a required email `<input>`.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '061add379d5159560d2bc6bc037d82da',
+  height: 300
+} %}
+
+Try to submit this form without entering any data.
+Is there any difference from the demo before?
+Now insert your name in the email field and try to submit.
+You see a different error message. How is that possible?
+You get a different message because the value you entered isn't a valid email address.
+
+The `required` attribute tells the browser that the field is mandatory.
+The browser also tests if the entered data matches the format of the `type`.
+The email field shown in the example is only valid if it's not empty and if the entered data is a valid email address.
+
+## Help the user enter the correct format
+
+You learned how to make a field mandatory.
+How would you instruct the browser that a user must enter at least eight characters for a form field?
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '0901d502bbe2cc7c4aa0bd73068ddd96',
+  height: 300
+} %}
+
+Give the demo a try.
+After your change, you should not be able to submit the form if you enter less than eight characters.
+
+{% Details %}
+
+{% DetailsSummary 'h3' %} Toggle answer {% endDetailsSummary %}
+
+```html
+<label for="password">Password (required)</label>
+<input required minlength="8" type="password" id="password" name="password">
+```
+
+The name of the attribute is `minlength`.
+Set the value to `8` and you have the desired validation rule.
+If you want the opposite, use `maxlength`.
+
+{% Aside %}
+For numerical input types use `min` and `max` to achieve the same result.
+{% endAside %}
+
+{% endDetails %}
+
+## Communicate your validation rules
+
+```html
+<label for="password">Password (required)</label>
+<input required minlength="8" type="password" id="password"
+  name="password" aria-describedby="password-minlength">
+<div id="password-minlength">Enter at least eight characters</div>
+```
+
+Make sure all users understand your validation rules.
+For this, connect the form control with an element that explains the rules.
+To do so, add an `aria-describedby` attribute to the element with the `id` of the form.
+
+## Pattern attribute
+
+Sometimes you want to define more advanced validation rules.
+Again, you can use an HTML attribute.
+It's called `pattern`, and you can define a
+[regular expression](https://regex101.com/) as the value.
+
+```html
+<label for="animal">What is your favorite animal? (required)</label>
+<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
+```
+
+Here, only lowercase letters are allowed;
+the user has to enter at least two characters, and not more than twenty.
+
+How would you change the `pattern` to also allow uppercase letters?
+[Try it out](https://codepen.io/web-dot-dev/pen/bc12240b7cb5b52076621d73a8a29cf6).
+
+{% Details %}
+
+{% DetailsSummary 'h3' %} Toggle answer {% endDetailsSummary %}
+
+The correct answer is `pattern="[a-zA-Z]{2,20}"`.
+
+{% endDetails %}
+
+## Add styles
+
+You have now learned how to add validation in HTML.
+Wouldn't it be great if you could also style form controls based on the validation status?
+This is possible with CSS.
+
+## How to style a required form field
+
+Show the user that a field is mandatory before they interact with your form.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '5a5de1e7dbdcdba86d19e30d42291a27',
+  height: 300,
+  tab: 'css,result'
+} %}
+
+You can style `required` fields with the `:required` CSS pseudo class.
+
+```css
+input:required {
+  border: 2px solid;
+}
+```
+
+## Style invalid form controls
+
+Do you remember what happens if data entered by the user is invalid?
+The error message attached to the form control appears.
+Wouldn't it be great to adapt the appearance of the element when this happens?
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'd6bb0f27d1faac3ffd3b594a81fad396',
+  height: 300,
+  tab: 'css,result'
+} %}
+
+You can use the `:invalid` [pseudo-class](/learn/css/pseudo-classes/)
+to add styles to invalid form controls.
+In addition, there is also the `:valid` pseudo-class for styling valid form elements.
+
+{% Aside %}
+Sometimes designers color the invalid state red,
+using the `:invalid` pseudo-class.
+However, to communicate error or success you should never rely only on color.
+For people with red-green color blindness a green and a red border look almost the same.
+It's impossible for them to see if there was an error or success. Add text or an icon to make it obvious.
+{% endAside %}
+
+There are more ways to adapt your styles based on validation.
+In the module about [CSS](/learn/forms/styling) you will learn more about styling forms.
+
+{% Aside %}
+In practice `:invalid` is tricky to work with.
+Invalid form fields are already marked as `:invalid` before user interaction,
+which may confuse users. The `:user-invalid` pseudo-class solves this issue,
+as the styles are only applied after user interaction.
+
+Learn more about [`:user-invalid`](https://developer.mozilla.org/docs/Web/CSS/:user-invalid).
+{% endAside %}
+
+## Validation with JavaScript {: #javascript}
+
+To further enhance validation of your forms you can use the
+[JavaScript Constraint Validation API](https://developer.mozilla.org/docs/Web/API/Constraint_validation).
+
+### Provide meaningful error messages
+
+You learned before that error messages are not identical in every browser.
+How can you show the same message to everyone?
+
+To achieve this, use the
+[`setCustomValidity()`](https://developer.mozilla.org/docs/Web/API/HTMLObjectElement/setCustomValidity)
+method of the Constraint Validation API.
+Let's see how this works.
+
+```js
+const nameInput = document.querySelector('[name="name"]');
+
+nameInput.addEventListener('invalid', () => {
+    nameInput.setCustomValidity('Please enter your name.');
+ });
+```
+
+Query the element where you want to set the custom error message.
+Listen to the `invalid` event of your defined element.
+There you set the message with `setCustomValidity()`.
+This example shows the message `Please enter your name.` if the input is invalid.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: '7ea31257d7cd8fc28792c7f5cdaba97b',
+  height: 300
+} %}
+
+[Open the demo](https://codepen.io/web-dot-dev/pen/7ea31257d7cd8fc28792c7f5cdaba97b) in different browsers,
+you should see the same message everywhere.
+Now, try to remove the JavaScript and try again.
+You see the default error messages again.
+
+There is much more you can do with the Constraint Validation API.
+You’ll find a detailed look at using
+[validation with JavaScript](/learn/forms/javascript#validation-with-javascript) in a later module.
+
+How to validate in real-time
+You can add real-time validation in JavaScript by listening to the `onblur` event of a form control,
+and validate the input immediately when a user leaves a form field.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'b7ed22a0539f9beef4dc03380f51f224',
+  height: 300,
+  tab: 'js,result'
+} %}
+
+Click the form field in the [demo](https://codepen.io/web-dot-dev/pen/b7ed22a0539f9beef4dc03380f51f224), 
+enter "web" and click somewhere else on the page.
+You see the native error message for `minlength` below the form field.
+
+Learn more about implementing
+[real-time validation with JavaScript](/learn/forms/javascript#ensure-users-are-notified-about-errors-in-real-time) in an upcoming module.
+
+{% Assessment 'validation' %}
+
+## Resources
+
+- [Disable the payment button once the form is submitted](/codelab-payment-form-best-practices/#step-4:-disable-the-payment-button-once-the-form-is-submitted)
+- [Add CSS to make the form work better](/codelab-sign-up-form-best-practices/#step-2:-add-css-to-make-the-form-work-better)
diff --git a/src/site/content/en/learn/forms/validation/validation.assess.yml b/src/site/content/en/learn/forms/validation/validation.assess.yml
new file mode 100644
index 00000000000..b2e1e113233
--- /dev/null
+++ b/src/site/content/en/learn/forms/validation/validation.assess.yml
@@ -0,0 +1,42 @@
+setLeader: Test your knowledge of validating forms
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What attribute do you use to make form controls mandatory?
+    options:
+      - content: "`required`"
+        rationale: "🎉"
+      - content: "`needed`"
+        rationale: "Try again!"
+      - content: "`essential`"
+        rationale: "Try again!"
+      - content: "`obligatory`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: Is it possible to define your own error messages?
+    options:
+      - content: "Yes, with the `message` HTML attribute."
+        rationale: "Try again!"
+      - content: "No"
+        rationale: "It is possible, try again!"
+      - content: "Yes, with the `:invalid` CSS pseudo element."
+        rationale: "Try again!"
+      - content: "Yes, with the Constraint Validation API."
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: 'An `<input>` with `type="email"` and the `required` attribute can be submitted:'
+    options:
+      - content: "If it's not empty."
+        rationale: "Try again!"
+      - content: "If its value is a valid email address."
+        rationale: "🎉"
+      - content: "In every case."
+        rationale: "Try again!"
+      - content: "If its value contains the word email."
+        rationale: "Try again!"
diff --git a/src/site/content/en/learn/html/apis/apis.assess.yml b/src/site/content/en/learn/html/apis/apis.assess.yml
new file mode 100644
index 00000000000..40afa30f3df
--- /dev/null
+++ b/src/site/content/en/learn/html/apis/apis.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of HTML APIs.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What does the O in DOM stand for?
+    options:
+      - content: "Oriented."
+        rationale: "Try again."
+      - content: "Object."
+        rationale: "Correct!"
+      - content: "Outer."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Which interface can help you to find out information about the tab the content is in?
+    options:
+      - content: "Window"
+        rationale: "Correct!"
+      - content: "Document"
+        rationale: "Try again."
+      - content: "Node"
+        rationale: "Try again."
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/apis/index.md b/src/site/content/en/learn/html/apis/index.md
new file mode 100644
index 00000000000..c37704b1773
--- /dev/null
+++ b/src/site/content/en/learn/html/apis/index.md
@@ -0,0 +1,230 @@
+---
+title: 'HTML APIs'
+authors:
+  - estelleweyl
+description: Learn how HTML information can be exposed and manipulated using JavaScript.
+date: 2023-02-21
+tags:
+  - html
+---
+
+In the introduction to this series it says "HTML elements are the nodes that make up the [Document Object Model](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)."
+We've discussed the type of element nodes. In this section we discuss element APIs that enable querying those nodes.
+
+## The DOM and AOM
+
+The DOM is an API for accessing and manipulating documents. The DOM is the tree of all the nodes in the document.
+Some nodes can have children, others can't. The tree includes elements, along with their attributes, and text nodes.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/xsvSa8YkwHyPWNnQ8Tpi.png", alt="MLW Node tree showing elements and text nodes.", width="800", height="431" %}
+
+Browser tools don't provide tree visualizations like the one above, but you can see the nodes in the element inspector.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/rX9myUwejCW2Ab0xUu0l.png", alt="The DOM/ARIA.", width="800", height="836" %}
+
+The tree representation that can be inspected in browser developer tools is the [accessibility tree](/learn/accessibility/aria-html/#the-accessibility-tree). The AOM is based
+off the DOM; similarly, the accessibility tree contains objects representing all the markup elements, attributes, and text
+nodes:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/KMEuk7ub4ejE7zdr5Vyk.png", alt="An example of AOM.", width="800", height="527" %}
+
+## HTML Element APIs
+
+The middle letter of DOM is "object." Just like the `person` or `car` object example from most intro to object-oriented programming
+classes, every node in the document tree is an object that can be manipulated with JavaScript.
+
+The browser provides numerous
+APIs providing natively supported methods, events, and property querying and updating.
+Element nodes contain information about all the attributes set on the element. You can use HTML interfaces to access
+information about an element's attributes. For example, we can use [`HTMLImageElement.alt`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/alt)
+get the `alt` attributes of all the images:
+
+```js
+let allImages = document.querySelectorAll('img');
+allImages.forEach((imageInstance) => {
+  console.log(imageInstance.alt);
+});
+```
+
+HTML interfaces provide more than just access to an element's attributes; you can access a lot more information. We can
+find the read-only [`HTMLElement.offsetHeight`](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight) to get the height of each section in our page, relative to the layout.
+
+```js
+let allSections = document.querySelectorAll('section');
+allSections.forEach((sectionInstance) => {
+  console.log(sectionInstance.offsetHeight);
+});
+```
+
+If the user changes their device orientation or otherwise changes the width of the viewport, the height of each `<section>`
+will change and the DOM properties will automatically update with it.
+
+The HTML interface APIs is not limited to accessing attribute values. The DOM provides insight into the current state of the UI.
+HTML APIs can access all of that information. You can access the length of a video, where a view is in the current playback,
+and if the video (or audio) has finished playing with [`HTMLMediaElement.duration`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/duration),
+[`HTMLMediaElement.currentTime`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/currentTime), and
+[`HTMLMediaElement.ended`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ended) respectively.
+
+## Available element interfaces
+
+Most HTML element we've covered thus far in this series and have yet to cover, other than some [sectioning elements](/learn/html/headings-and-sections/), have
+an associated DOM interface. The base interface for all elements is aptly named [Element](https://developer.mozilla.org/docs/Web/API/Element).
+The [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) inherits from Element and all HTML element-specific
+interfaces inherit from it. Some element-specific interfaces are implemented by multiple, similar elements.
+
+The interfaces include:
+
+* [`HTMLAnchorElement`](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement) - `<a>`
+* [`HTMLAreaElement`](https://developer.mozilla.org/docs/Web/API/HTMLAreaElement) - `<area>`
+* [`HTMLAudioElement`](https://developer.mozilla.org/docs/Web/API/HTMLAudioElement) - `<audio>`
+* [`HTMLBaseElement`](https://developer.mozilla.org/docs/Web/API/HTMLBaseElement) - `<base>`
+* [`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement) - `<button>`
+* [`HTMLCanvasElement`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement) - `<canvas>`
+* [`HTMLDataElement`](https://developer.mozilla.org/docs/Web/API/HTMLDataElement) - `<data>`
+* [`HTMLDataListElement`](https://developer.mozilla.org/docs/Web/API/HTMLDataListElement) - `<datalist>`
+* [`HTMLDetailsElement`](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement) - `<details>`
+* [`HTMLDialogElement`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement) - `<dialog>`
+* [`HTMLEmbedElement`](https://developer.mozilla.org/docs/Web/API/HTMLEmbedElement) - `<embed>`
+* [`HTMLFieldSetElement`](https://developer.mozilla.org/docs/Web/API/HTMLFieldSetElement) - `<fieldset>`
+* [`HTMLFormElement`](https://developer.mozilla.org/docs/Web/API/HTMLFormElement) - `<form>`
+* [`HTMLHtmlElement`](https://developer.mozilla.org/docs/Web/API/HTMLHtmlElement) - `<html>`
+* [`HTMLIFrameElement`](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement) - `<iframe>`
+* [`HTMLImageElement`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement) - `<img>`
+* [`HTMLInputElement`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement) - `<input>`
+* [`HTMLLabelElement`](https://developer.mozilla.org/docs/Web/API/HTMLLabelElement) - `<label>`
+* [`HTMLLegendElement`](https://developer.mozilla.org/docs/Web/API/HTMLLegendElement) - `<legend>`
+* [`HTMLLIElement`](https://developer.mozilla.org/docs/Web/API/HTMLLIElement) - `<li>`
+* [`HTMLLinkElement`](https://developer.mozilla.org/docs/Web/API/HTMLLinkElement) - `<link>`
+* [`HTMLMapElement`](https://developer.mozilla.org/docs/Web/API/HTMLMapElement) - `<map>`
+* [`HTMLMediaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement) - `<audio>`, `<video>`
+* [`HTMLMenuElement`](https://developer.mozilla.org/docs/Web/API/HTMLMenuElement) - `<menu>`
+* [`HTMLMetaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMetaElement) - `<meta>`
+* [`HTMLMeterElement`](https://developer.mozilla.org/docs/Web/API/HTMLMeterElement) - `<meter>`
+* [`HTMLModElement`](https://developer.mozilla.org/docs/Web/API/HTMLModElement) - `<ins>`, `<del>`
+* [`HTMLObjectElement`](https://developer.mozilla.org/docs/Web/API/HTMLObjectElement) - `<object>`
+* [`HTMLOListElement`](https://developer.mozilla.org/docs/Web/API/HTMLOListElement) - `<ol>`
+* [`HTMLOptGroupElement`](https://developer.mozilla.org/docs/Web/API/HTMLOptGroupElement)- `<optgroup>`
+* [`HTMLOptionElement`](https://developer.mozilla.org/docs/Web/API/HTMLOptionElement) - `<option>`
+* [`HTMLOutputElement`](https://developer.mozilla.org/docs/Web/API/HTMLOutputElement) - `<output>`
+* [`HTMLPictureElement`](https://developer.mozilla.org/docs/Web/API/HTMLPictureElement) - `<picture>`
+* [`HTMLProgressElement`](https://developer.mozilla.org/docs/Web/API/HTMLProgressElement) - `<progress>`
+* [`HTMLQuoteElement`](https://developer.mozilla.org/docs/Web/API/HTMLQuoteElement) - `<q>`, `<blockquote>`, `<cite>`
+* [`HTMLScriptElement`](https://developer.mozilla.org/docs/Web/API/HTMLScriptElement) - `<script>`
+* [`HTMLSelectElement`](https://developer.mozilla.org/docs/Web/API/HTMLSelectElement) - `<select>`
+* [`HTMLSlotElement`](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement) - `<slot>`
+* [`HTMLSourceElement`](https://developer.mozilla.org/docs/Web/API/HTMLSourceElement) - `<source>`
+* [`HTMLStyleElement`](https://developer.mozilla.org/docs/Web/API/HTMLStyleElement) -  `<style>`
+* [`HTMLTableCellElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement) - `<td>`, `<th>`
+* [`HTMLTableColElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableColElement) - `<col>`, `<colgroup>`
+* [`HTMLTableElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableElement) - `<table>`
+* [`HTMLTableRowElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableRowElement) - `<tr>`
+* [`HTMLTableSectionElement`](https://developer.mozilla.org/docs/Web/API/HTMLTableSectionElement) - `<thead>`, `<tbody>`, `<tfoot>`
+* [`HTMLTemplateElement`](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement) - `<template>`
+* [`HTMLTextAreaElement`](https://developer.mozilla.org/docs/Web/API/HTMLTextAreaElement) - `<textarea>`
+* [`HTMLTimeElement`](https://developer.mozilla.org/docs/Web/API/HTMLTimeElement) - `<time>`
+* [`HTMLTitleElement`](https://developer.mozilla.org/docs/Web/API/HTMLTitleElement) - `<title>`
+* [`HTMLTrackElement`](https://developer.mozilla.org/docs/Web/API/HTMLTrackElement) - `<track>`
+* [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement) - `<video>`
+
+The naming convention is "HTML" followed by an element or grouping of elements in upper camel case, followed by "Element",
+but the element or grouping of elements part follows no exact pattern. Don't worry. There is no need to memorize these.
+It's just important to know that they exist so you can look them up when you need to.
+
+If you have a collection of elements, there are also come collection interfaces. For example, the
+[`HTMLCollection.namedItem()`](https://developer.mozilla.org/docs/Web/API/HTMLCollection/namedItem) method returns the first
+element in the collection whose `id` or `name` attribute matches the parameter, or null if no element matches.
+
+Over 30 elements don't have an associated DOM interface other than `HTMLElement` including `<address>`, `<article>`,
+`<section>`, `<nav>`, `<header>`, `<footer>`, `<aside>`, and `<hgroup>`. Many elements that don't support any non-deprecated,
+non-global attributes have element specific interfaces, like `HTMLPElement` (the `<p>` element) and [`HTMLUnknownElement`](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement)
+( `<😃>` or any other elements that are not defined), but those interfaces don't implement any additional properties or methods
+on top of the properties and methods inherited from `HTMLElement`, and are not listed above.
+
+### Redundant API methods and properties
+
+If an interface has the same method or property name as and interface it inherits, the inheriting method or property overwrites
+the inherited one. When we accessed the `alt` and `offsetHeight` properties above with `imageInstance.alt` and `sectionInstance.offsetHeight`
+respectively, the code didn't identify which API was being accessed.
+
+Generally, as with these two examples, this isn't an issue. But, it can be. For example, the [`HTMLCollection.length`](https://developer.mozilla.org/docs/Web/API/HTMLCollection/length)
+is read only, while the inheriting [`HTMLOptionsCollection`](https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection) interface's
+length property (returned only by the `options` property of `<select>`) can also be used to set collection size.
+
+## Other interfaces
+
+There are additional interfaces that enable manipulating the branch locations of DOM nodes. The [`EventTarget`](https://developer.mozilla.org/docs/Web/API/EventTarget) interface, which provides
+us with [`addEventListener()`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) and [`removeEventListener()`](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener), is inherited by the [`Node`](https://developer.mozilla.org/docs/Web/API/Node) and [`Window`](https://developer.mozilla.org/docs/Web/API/Window) interfaces. In turn, the Element, Document, and DocumentFragment (which we saw in [custom elements](/learn/html/template)) interfaces inherit from Node, and the HTMLElement interface inherits from Element.
+
+### The `node` interface
+
+Every type of DOM node is represented by an interface based on [`Node`](https://developer.mozilla.org/docs/Web/API/Node),
+which provides information and methods as elements relate to the DOM tree. The `Node` interface enables querying and adding nodes to the node tree.
+
+Douglas Crockford's famous "walk the DOM" function, makes use of Node's [`firstChild`](https://developer.mozilla.org/docs/Web/API/Node/firstChild)
+and the [`nextSibling`](https://developer.mozilla.org/docs/Web/API/Node/nextSibling) properties.
+
+```javascript
+const walk_the_DOM = function walk(node, callback) {
+  callback(node);
+  node = node.firstChild;
+  while (node) {
+    walk(node, callback);
+    node = node.nextSibling;
+  }
+};
+```
+
+We used Node's [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) and
+[`cloneNode()`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) methods in defining [custom elements](/learn/html/template).
+The Node interface provides many useful properties and methods for querying and manipulating the DOM.
+
+```javascript
+customElements.define('star-rating',
+  class extends HTMLElement {
+    constructor() {
+      super(); // Always call super first in constructor
+      const starRating = document.getElementById('star-rating-template').content;
+      const shadowRoot = this.attachShadow({
+        mode: 'open'
+      });
+      shadowRoot.appendChild(starRating.cloneNode(true));
+    }
+  });
+```
+
+The [`attachShadow()`](https://developer.mozilla.org/docs/Web/API/Element/attachShadow) method is a method of the Element
+interface. There is also a [`shadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) interface for the
+[Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM) rendered separately from a
+document's main DOM tree.
+
+### The `Document` and `HTMLDocument` interfaces
+
+The [`Document`](https://developer.mozilla.org/docs/Web/API/Document) interface inherits from `Node`. It represents the
+web page loaded in the browser, whether the document is HTML, SVG, XML, MathML, or other. The `Document` interface also
+inherits from the `HTMLDocument` interface.
+
+The `document` enables quick access to node types and the ability to create collections of specific element types, such as
+`document.body` and `document.styleSheets`. The HTMLDocument enables accessing information relevant to the document that
+are not found in HTML nodes, such as the [`Document.location`](https://developer.mozilla.org/docs/Web/API/Document/location),
+[`Document.lastModified`](https://developer.mozilla.org/docs/Web/API/Document/lastModified), and [`Document.Cookie`](https://developer.mozilla.org/docs/Web/API/Document/cookie).
+
+Several APIs are available based on features surfaced through the document interface, including the [Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+and the [FullScreen API](https://developer.mozilla.org/docs/Web/API/Fullscreen_API). Both inherit from `Element`.
+
+### The `Window` interface
+
+The Window interface includes globally available items beyond the DOM that can be used to manipulate the DOM. Window provides
+functions, namespaces, objects, and constructors documented in MDN's [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Reference)
+and [DOM References](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
+
+The Window interface is the API for the object containing the document. The global `window` object is the window in which the
+script is running. Every browser tab contains its own Window object. The Window interface can query the contents of the tab
+as well as the overall window and device. For example, the [`resizeTo()`](https://developer.mozilla.org/docs/Web/API/Window/resizeTo)
+method can be used to resize the browser window, the [`devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
+property provides access to the device display pixels. When accessing information about the tab the content
+is in rather than the DOM tree the tab displays, the window is likely the interface you're looking for.
+
+Several APIs are available based on features surfaced through the Window interface, including the [Web Workers](https://developer.mozilla.org/docs/Web/API/Worker)
+and [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) APIs.
+
+{% Assessment 'apis' %}
diff --git a/src/site/content/en/learn/html/attributes/attributes.assess.yml b/src/site/content/en/learn/html/attributes/attributes.assess.yml
new file mode 100644
index 00000000000..a1d15088cf1
--- /dev/null
+++ b/src/site/content/en/learn/html/attributes/attributes.assess.yml
@@ -0,0 +1,24 @@
+setLeader: Test your knowledge of attributes.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: An `id` should be unique in the document.
+    options:
+      - content: "False"
+        rationale: "Try again."
+      - content: "True"
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Select the correctly formed custom attribute.
+    options:
+      - content: "`data-birthday`"
+        rationale: "Correct"
+      - content: "`birthday`"
+        rationale: "Try again."
+      - content: "`data:birthday`"
+        rationale: "Try again"
diff --git a/src/site/content/en/learn/html/attributes/index.md b/src/site/content/en/learn/html/attributes/index.md
new file mode 100644
index 00000000000..274deadb35b
--- /dev/null
+++ b/src/site/content/en/learn/html/attributes/index.md
@@ -0,0 +1,483 @@
+---
+title: 'Attributes'
+authors:
+  - estelleweyl
+description: Learn about the different global attributes along with attributes specific to particular HTML elements.
+date: 2022-12-08
+tags:
+  - html
+---
+
+Attributes were briefly discussed in [Overview of HTML](/learn/html/overview/#attributes); it's time for a deep dive.
+
+Attributes are what make HTML so powerful. Attributes are space-separated names and name/value pairs appearing in the opening tag,
+providing information about and functionality for the element.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/17yQeLEUX6s88IbDJreQ.png", alt="The opening tag, attributes, and closing tag, labelled on an HTML element.", width="800", height="210" %}
+
+Attributes define the behavior, linkages, and functionality of elements. Some attributes are global, meaning they can appear
+within any element's opening tag. Other attributes apply to several elements but not all, while other attributes are element-specific,
+relevant only to a single element. In HTML, all attributes except boolean, and to some extent enumerated attributes, require a value.
+
+If an attribute value includes a space or special characters, the value must be quoted. For this reason, and for improved legibility,
+quoting is always recommended.
+
+While HTML is not case-sensitive, some attribute values are. Values that are part of the HTML specification are case-insensitive.
+Strings values that are defined, such as class and id names, are case-sensitive. If an attribute value is case-sensitive in HTML,
+it is case-sensitive when used as part of an [attribute selector](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) in CSS and in JavaScript; otherwise, it's not.
+
+```html
+<!-- the type attribute is case insensitive: these are equivalent -->
+<input type="text">
+<input type="TeXt">
+
+<!-- the id attribute is case sensitive: they are not equivalent -->
+<div id="myId">
+<div id="MyID">
+```
+
+## Boolean attributes
+
+If a boolean attribute is present, it is always true. Boolean attributes include `autofocus`, `inert`, `checked`, `disabled`,
+`required`, `reversed`, `allowfullscreen`, `default,` `loop`, `autoplay`, `controls`, `muted`, `readonly`, `multiple,` and `selected`.
+If one (or more) of these attributes is present, the element is disabled, required, readonly, etc. If not present, it isn't.
+
+Boolean values can either be omitted, set to an empty string, or be the name of the attribute; but the value doesn't have to actually
+be set to the string `true`. All values, including `true`, `false`, and `😀`, while invalid, will resolve to true.
+
+These three tags are equivalent:
+
+```html
+<input required>
+<input required="">
+<input required="required">
+```
+
+If the attribute value is false, omit the attribute. If the attribute is true, include the attribute but don't provide a value.
+For example, `required="required"` is not a valid value in HTML; but as `required` is boolean, invalid values resolve to true.
+But as invalid enumerated attributes don't necessarily resolve to the same value as missing values, it is easier to get into the
+habit of omitting values than it is to remember which attributes are boolean versus enumerated and potentially provide an invalid value.
+
+When toggling between true and false, add and remove the attribute altogether with JavaScript rather than toggling the value.
+
+```js
+const myMedia = document.getElementById("mediaFile");
+myMedia.removeAttribute("muted");
+myMedia.setAttribute("muted");
+```
+
+Note that in XML languages, like SVG, all attributes need to include a value, including boolean attributes.
+
+## Enumerated attributes
+
+Enumerated attributes are sometimes confused with boolean attributes. They are HTML attributes that have a limited set of predefined valid values.
+Like boolean attributes, they have a default value if the attribute is present but the value is missing. For example, if you include `<style contenteditable>`,
+it defaults to `<style contenteditable="true">`.
+
+Unlike boolean attributes, though, omitting the attribute doesn't mean it's false; a present attribute with a missing value
+isn't necessarily true; and the default for invalid values isn't necessarily the same as a null string. Continuing the example,
+`contenteditable` defaults to `inherit` if missing or invalid, and can be explicitly set to `false`.
+
+The default value depends on the attribute. Unlike boolean values, attributes aren't automatically "true" if present. If you
+include `<style contenteditable="false">`, the element is not editable. If the value is invalid, such as `<style contenteditable="😀">`,
+or, surprisingly, `<style contenteditable="contenteditable">`, the value is invalid and defaults to `inherit`.
+
+In most cases with enumerated attributes, missing and invalid values are the same. For example, if the `type` attribute on an `<input>`
+is missing, present but without a value, or has an invalid value, it defaults to `text`. While this behavior is common, it is not a rule.
+Because of this, it's important to know which attributes are boolean versus enumerated; omit values if possible so you don't get them wrong, and look up the value as needed.
+
+## Global attributes
+
+Global attributes are attributes that can be set on any HTML element, including elements in the `<head>`. There are more than
+[30 global attributes](https://developer.mozilla.org/docs/Web/HTML/Global_attributes#list_of_global_attributes). While these can all, in theory, be added to any HTML element, some global attributes have no effect
+when set on some elements; for example, setting `hidden` on a `<meta>` as meta content is not displayed.
+
+### `id`
+
+The global attribute `id` is used to define a unique identifier for an element. It serves many purposes, including:
+- The target of a link's fragment identifier.
+- Identifying an element for scripting.
+- Associating a form element with its label.
+- Providing a label or description for assistive technologies.
+- Targeting styles with (high specificity or as attribute selectors) in CSS.
+
+The `id` value is a string with no spaces. If it contains a space, the document won't break, but you'll have to target the
+`id` with escape characters in your HTML, CSS, and JS. All other characters are valid. An `id` value can be `😀` or `.class`,
+but is not a good idea. To make programming easier for your current and future self, make the `id`'s first character a letter,
+and use only ASCII letters, digits, `_`, and `-`. It's good practice to come up with an `id` naming convention and then stick to it,
+as `id` values are case-sensitive.
+
+The`id` should be unique to the document. The layout of your page probably won't break if an `id` is used more than once,
+but your JavaScript, links, and element interactions may not act as expected.
+
+#### Link fragment identifier
+
+The navigation bar includes four links. We will cover the link element later, but for now, realize links are not restricted
+to HTTP-based URLs; they can be fragment identifiers to sections of the page in the current document (or in other documents).
+
+On the machine learning workshop site, the navigation bar in the page header includes four links:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'GRGzbXR',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+The href attribute provides the hyperlink that activating the link directs the user to. When a URL includes a hash mark (`#`)
+followed by a string of characters, that string is a fragment identifier. If that string matches an `id` of an element in the
+web page, the fragment is an anchor, or bookmark, to that element. The browser will scroll to the point where the anchor is defined.
+
+These four links point to four sections of our page identified by their `id` attribute. When the user clicks on any of the
+four links in the navigation bar, the element linked to by the fragment identifier, the element containing the matching id
+minus the `#`, scrolls into view.
+
+The `<main>` content of the machine learning workshop has four sections with ids. When the site visitor clicks on one of the
+links in the `<nav>`, the section with that fragment identifier scrolls into view. The markup is similar to:
+
+
+```html
+<section id="reg">
+  <h2>Machine Learning Workshop Tickets</h2>
+</section>
+
+<section id="about">
+  <h2>What you'll learn</h2>
+</section>
+
+<section id="teachers">
+  <h2>Your Instructors</h2>
+  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
+</section>
+
+<section id="feedback">
+  <h2>What it's like to learn good and do other stuff good too</h2>
+</section>
+```
+
+Comparing the fragment identifiers in the `<nav>` links, you'll note that each matches the `id` of a `<section>` in `<main>`.
+The browser gives us a free "top of page" link. Setting `href="#top"`, case-insensitive, or simply `href="#"`, will scroll
+the user to the top of the page.
+
+The hash-mark separator in the `href` is not part of the fragment identifier. The fragment identifier is always the last
+part of the URL and is not sent to the server.
+
+#### CSS selectors
+
+In CSS, you can target each section using an id selector, such as `#feedback` or, for less [specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity), a case-sensitive
+[attribute selector](/learn/css/selectors/#attribute-selector), `[id="feedback"]`.
+
+#### Scripting
+
+On MLW.com, there is an easter egg for mouse users only. Clicking the light switch toggles the page on and off.
+
+The markup for the light switch image is:
+```html
+<img src="svg/switch2.svg" id="switch"
+  alt="light switch" class="light" />
+```
+The `id` attribute can be used as the parameter for the [`getElementById()`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) method and, with a `#` prefix, as part of a
+parameter for the [`querySelector()`](https://developer.mozilla.org/docs/Web/API/Document/querySelector) and [`querySelectorAll()`](https://developer.mozilla.org/docs/Web/API/Document/querySelectorall) methods.
+
+```js
+const switchViaID = document.getElementById("switch");
+const switchViaSelector = document.querySelector("#switch");
+```
+
+Our one JavaScript function makes use of this ability to target elements by their `id` attribute:
+
+```html
+<script>
+  /* switch is a reserved word in js, so we us onoff instead */
+  const onoff = document.getElementById('switch');
+  onoff.addEventListener('click', function(){
+    document.body.classList.toggle('black');
+  });
+</script>
+```
+
+#### `<label>`
+
+The [HTML `<label>` element](https://developer.mozilla.org/docs/Web/HTML/Element/label) has a `for` attribute that takes as its value the `id` of the form control with which it is associated.
+Creating an explicit label by including an `id` on every form control and pairing each with the label's `for` attribute ensures
+that every form control has an associated label.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'JjZxQOB',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+While each label can be associated with exactly one form control, a form control may have more than one associated label.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'dyKaBda',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+If the form control is nested between the `<label>` opening and closing tags, the `for` and `id` attributes
+aren't required: this is called an "implicit" label. Labels let all users know what each form control is for.
+
+```html
+<label>
+  Send me a reminder <input type="number" name="min"> before the workshop resumes
+</label>.
+```
+
+The association between `for` and `id` makes the information available to users of assistive technologies. In addition,
+clicking anywhere on a label gives focus to the associated element, extending the control's click area. This isn't just helpful
+to people with dexterity issues making mousing less accurate; it also helps every mobile device user with fingers wider than a radio
+button.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'BaVMgxo',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+In this code example, the fake fifth question of a fake quiz is a single select multiple-choice question. Each form control has an explicit
+label, with a unique `id` for each. To ensure we don't accidentally duplicate an id, the id value is a combination of the question number and the value.
+
+When including radio buttons, as the labels describe the value of the radio buttons, we encompass all the same-named buttons in a `<fieldset>`
+with the `<legend>` being the label, or question, for the entire set.
+
+#### Other accessibility uses
+
+The use of `id` in accessibility and usability is not limited to labels. In [introduction to text](/learn/html/text-basics), a `<section>`
+was converted into region landmark by referencing the `id` of an `<h2>` as the value of the `<section>`'s `aria-labelledby` to provide
+the accessible name:
+
+```html
+<section id="about" aria-labelledby="about_heading">
+<h2 id="about_heading">What you'll learn</h2>
+```
+
+There are over 50 `aria-*` states and properties that can be used to ensure accessibility. [`aria-labelledby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby), [`aria-describedby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-describedby),
+[`aria-details`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-details), and [`aria-owns`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-owns) take as their value a space-separated `id` reference list. [`aria-activedescendant`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant), which
+identifies the currently focused descendant element, takes as its value a single `id` reference: that of the single element
+that has focus (only one element can be focused at a time).
+
+{% Aside %}
+Using `aria-labelledby`, you can create a reverse association from a form control to multiple labels, including text not
+nested in a `<label>`, whether the text labels more than one form control or not. If a control has both `<label>` and `aria-labelledby`, the `aria-labelledby`
+has precedence; users will not hear the `<label>` text unless the `aria-labelledby` includes the id of the label.
+{% endAside %}
+
+### `class`
+
+The `class` attribute provides an additional way of targeting elements with CSS (and JavaScript), but serves no other purpose
+in HTML (though frameworks and component libraries may use them). The class attribute takes as its value a space-separated list
+of the case-sensitive classes for the element.
+
+{% Aside %}
+Elements can be selected with CSS selectors and DOM methods based on their element names, attributes, attribute values,
+position within the DOM tree, etc. Semantic HTML provides meaningful hooks, making the addition of class names often unnecessary.
+The unique difference between including a class name and using [`document.getElementsByClassName()`](https://developer.mozilla.org/docs/Web/API/Document/getElementsByClassName) versus targeting elements
+based on attributes and page structure with the more robust document.querySelectorAll() is that the former returns a live node list, the latter
+is static.
+{% endAside %}
+
+Building a sound semantic structure enables the targeting of elements based on their placement and function. Sound structure
+enables the use of descendant element selectors, relational selectors, and attribute selectors. As you learn about attributes
+throughout this section, consider how elements with the same attributes or attribute values can be styled. It's not that you
+shouldn't use the class attribute, it's just that most developers don't realize they often don't need to.
+
+Thus far, MLW has not used any classes. Can a site be launched without a single class name? We'll see.
+
+### `style`
+
+The `style` attribute enables applying inline styles, which are styles applied to the single element on which the attribute is set.
+The `style` attribute takes as its value CSS property value pairs, with the value's syntax being the same as the contents of a
+CSS style block: properties are followed by a colon, just like in CSS, and semicolons end each declaration, coming after the value.
+
+The styles are only applied to the element on which the attribute is set, with descendants inheriting inherited property values if not
+overridden by other style declarations on nested elements or in `<style>` blocks or style sheets. As the value comprises the equivalent of the contents
+of a single style block applied to that element only, it can't be used for generated content, to create keyframe animations, or to apply any
+other at-rules.
+
+While `style` is indeed a global attribute, using it is not recommended. Rather, define styles in a separate file or files.
+That said, the `style` attribute can come in handy during development to enable quick styling such as for testing purposes. Then take the
+'solution' style and stick it in your linked [CSS](/learn/css) file.
+
+### `tabindex`
+
+The `tabindex` attribute can be added to any element to enable it to receive focus. The `tabindex` value defines whether it
+gets added to the tab order, and, optionally, into a non-default tabbing order.
+
+The `tabindex` attribute takes as its value an integer. A negative value (the convention is to use `-1`) makes an element capable
+of receiving focus, such as via JavaScript, but does not add the element to the tabbing sequence. A `tabindex` value of `0` makes
+the element focusable and reachable via tabbing, adding it to the default tab order of the page in source code order. A value of `1`
+or more puts the element into a prioritized focus sequence and is not recommended.
+
+On this page, there is a share functionality using a `<share-action>` custom element acting as a `<button>`. The `tabindex` of zero
+is included to add the custom element into the keyboard default tabbing order:
+
+```html
+<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
+  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
+    <use href="#shareIcon" />
+  </svg>
+  <span>Share</span>
+</share-action>
+```
+
+The [`role` of `button`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/button_role) informs screen reader users that this element should behave like a button. JavaScript is used to ensure
+the button functionality promise is kept; including handling both [click](https://developer.mozilla.org/docs/Web/API/Element/click_event) and [keydown](https://developer.mozilla.org/docs/Web/API/Element/keydown_event) events as well as handling Enter and Space key keypresses.
+
+Form controls, links, buttons, and [content editable](#contenteditable) elements are able to receive focus; when a keyboard user hits the tab key,
+focus moves to the next focusable element as if they had `tabindex="0"` set. Other elements are not focusable by default. Adding the `tabindex`
+attribute to those elements enables them to receive focus when they would otherwise not.
+
+If a document includes elements with a `tabindex` of `1` or more, they are included in a separate tab sequence. As you'll notice in the codepen,
+tabbing begins in a separate sequence, in order of lowest value to highest value, before going through those in the regular sequence in source order.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'ExRGBPE',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+Altering the tabbing order can create a really bad user experience. It makes it difficult to rely on assistive technology—keyboards and screen readers alike—to navigate
+your content. It is also difficult as a developer to manage and maintain. Focus is important; there is an entire module discussing focus and focus order.
+
+### `role`
+
+The [`role` attribute](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles) is part of the [ARIA specification](https://w3c.github.io/aria/#introroles),
+rather than the [WHATWG HMTL specification](https://html.spec.whatwg.org/#global-attributes:attr-aria-role). The `role` attribute can
+be used to provide semantic meaning to content, enabling screen readers to inform site users of an object's expected user interaction.
+
+There are a few common UI widgets, such as [comboboxes](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/combobox_role),
+[menubars](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/menubar_role), [tablists](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/tablist_role),
+and [treegrids](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/treegrid_role), that have no native HTML equivalent.
+For example, when creating a tabbed design pattern, the [`tab`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/tab_role), `tablist` and
+[`tabpanel`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) roles can be used. Someone who can physically see
+the user-interface has learned by experience how to navigate the widget and make different panels visible by clicking on associated tabs.
+Including the `tab` role with `<button role="tab">` when a group of buttons is used to show different panels lets the screen reader user know
+that the `<button>` that currently has focus can toggle a related panel into view rather than implementing typical button-like functionality.
+
+The `role` attribute doesn't change browser behavior or alter keyboard or pointer device interactions—adding `role="button"`to a `<span>`
+does not turn it into a `<button>`. This is why using semantic HTML elements for their intended purpose is recommended. However, when using
+the right element is not possible, the `role` attribute enables informing screen reader users when a non-semantic element has been retrofitted
+into a semantic element's role.
+
+### `contenteditable`
+
+An element with the `contenteditable` attribute set to `true` is editable, is focusable, and is added to the tab order as if
+`tabindex="0"` were set. `Contenteditable` is an enumerated attribute supporting the values `true` and `false`, with a default value of `inherit`
+if the attribute is not present or has an invalid value.
+
+These three opening tags are equivalent:
+
+```html
+<style contenteditable>
+<style contenteditable="">
+<style contenteditable="true">
+```
+
+If you include `<style contenteditable="false">`, the element is not editable (unless it's by default editable, like a `<textarea>`).
+If the value is invalid, such as `<style contenteditable="😀">` or `<style contenteditable="contenteditable">`, the value defaults to `inherit`.
+
+To toggle between states, query the value of the [HTMLElement.isContentEditable](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable) readonly property.
+
+```js
+const editor = document.getElementById("myElement");
+if(editor.contentEditable) {
+  editor.setAttribute("contenteditable", "false");
+} else {
+  editor.setAttribute("contenteditable", "");
+}
+```
+
+Alternatively, this property can be specified by setting `editor.contentEditable` to `true`, `false`, or `inherit`.
+
+Global attributes can be applied to all elements, even `<style>` elements. You can use attributes and a bit of CSS to make a live CSS editor.
+
+```css
+<style contenteditable>
+style {
+  color: inherit;
+  display:block;
+  border: 1px solid;
+  font: inherit;
+  font-family: monospace;
+  padding:1em;
+  border-radius: 1em;
+  white-space: pre;
+}
+</style>
+```
+
+Try changing the `color` of the `style` to something other than `inherit`. Then try changing the `style` to a `p` selector.
+Don't remove the display property or the style block will disappear.
+
+<style contenteditable>
+style {
+  color: inherit;
+  display:block;
+  border: 1px solid;
+  font: inherit;
+  font-family: monospace;
+  padding: 1em;
+  border-radius: 1em;
+  white-space: pre;
+}
+</style>
+
+## Custom attributes
+
+We've only touched the surface of HTML global attributes. There are even more attributes that apply to only one or a limited set of elements.
+Even with hundreds of defined attributes, you may have a need for an attribute that isn't in the specification. HTML has you covered.
+
+You can create any custom attribute you want by adding the [`data-`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/data-*) prefix. You can name your attribute anything that starts with `data-`
+followed by any lowercase series of characters that don't start with `xml` and don't contain a colon (`:`).
+
+While HTML is forgiving and won't break if you create unsupported attributes that don't start with `data`, or even if you start
+your custom attribute with `xml` or include a `:`, there are benefits to creating valid custom attributes that begin with `data-`.
+With custom data attributes you know that you aren't accidentally using an existing attribute name. Custom data attributes are future-proof.
+
+While browsers won't implement default behaviors for any specific `data-` prefixed attribute, there is a built-in dataset API
+to iterate through your custom attributes. Custom properties are an excellent way of communicating application-specific information
+via JavaScript. Add custom attributes to elements in the form of `data-name` and access these through the DOM using `dataset[name]`
+on the element in question.
+
+```html
+<blockquote data-machine-learning="workshop"
+  data-first-name="Blendan" data-last-name="Smooth"
+  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
+  data-year-graduated="2022">
+  HAL and EVE could teach a fan to blow hot air.
+</blockquote>
+```
+
+You can use `getAttribute()` using the full attribute name, or you can take advantage of the simpler [`dataset`](https://developer.mozilla.org/docs/Web/API/HTMLElement/dataset) property.
+
+```js
+el.dataset[machineLearning]; // workshop
+e.dataset.machineLearning; // workshop
+```
+
+The `dataset` property returns a `DOMStringMap` object of each element's `data-` attributes. There are several custom attributes
+on the `<blockquote>`. The dataset property means you don't need to know what those custom attributes are in order to access their
+names and values:
+
+```js
+for (let key in el.dataset) {
+  customObject[key] = el.dataset[key];
+}
+```
+
+The attributes in this article are global, meaning they can be applied to any HTML element (though they don't all have an impact on
+those elements). Up next, we take a look at the two attributes from the intro image that we didn't address—`target` and `href`—and
+several other element-specific attributes as we take a deeper look into links.
+
+{% Assessment 'attributes' %}
diff --git a/src/site/content/en/learn/html/audio-video/audio-video.assess.yml b/src/site/content/en/learn/html/audio-video/audio-video.assess.yml
new file mode 100644
index 00000000000..eb6b9673ec2
--- /dev/null
+++ b/src/site/content/en/learn/html/audio-video/audio-video.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of audio and video.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the `<track>` element used for?
+    options:
+      - content: "To store information about the length and filesize of the video."
+        rationale: "Try again."
+      - content: "To provide subtitles or captions."
+        rationale: "Correct!"
+      - content: "To store multiple versions of the video for different browsers or devices."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What does the `poster` attribute control?
+    options:
+      - content: "An image to display if the user's browser doesn't support video."
+        rationale: "Try again."
+      - content: "An intro video."
+        rationale: "Try again."
+      - content: "An image displayed as a still shot before the video is played."
+        rationale: "Correct!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/audio-video/index.md b/src/site/content/en/learn/html/audio-video/index.md
new file mode 100644
index 00000000000..04fc9143a27
--- /dev/null
+++ b/src/site/content/en/learn/html/audio-video/index.md
@@ -0,0 +1,201 @@
+---
+title: 'Audio and Video'
+authors:
+  - estelleweyl
+description: Discover how to work with HTML media such as audio and video.
+date: 2023-02-21
+tags:
+  - html
+---
+
+As you learned in the [images](/learn/html/images/) module, HTML enables embedding media into a web page. In this section,
+we look at audio and video files, including how to embed them, user controls, providing a static image placeholder for your videos,
+and best practices, including making audio and video files accessible.
+
+## `<audio>` and `<video>`
+
+The [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video) and [`<audio>`](https://developer.mozilla.org/docs/Web/HTML/Element/audio)
+elements can be used to embed media players directly with the `src` attribute or can be used as the container element for a series of [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) elements,
+each providing a `src` file suggestion. While `<video>` can be used to embed an audio file, the `<audio>` element is preferable for embedding
+sound files.
+
+The opening `<video>` and `<audio>` tags can contain several other attributes including
+`controls`, `autoplay`, `loop`, `mute`, `preload`, and the global attributes. The `<video>` element also supports the `height`, `width`, and
+`poster` attributes.
+
+```html
+<video src="videos/machines.webm" poster="images/machine.jpg" controls>
+  <p>Watch <a href="https://youtube.com/link">video on Youtube</a>
+</video>
+```
+
+This `<video>` example has a single source with the `src` attribute linking to the video source. The `poster` attribute
+provides an image to display as the video loads. Finally, the `controls` attribute provides user video controls.
+
+Fallback content is included between the opening and closing tags. If the user agent doesn't support `<video>` (or `<audio>` this content is shown. The closing `</video>` tag is required, even if there is no content between the two
+(but there should always be fallback content , right?).
+
+If no `src` attribute is included on the opening `<video>` or `<audio>` tags, include one or more [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) elements,
+each with a `src` attribute to a media file. The following example includes three media file options, fallback content,
+and English and French subtitles between the opening and closing tags.
+
+```html
+<video controls poster="images/machine.jpg">
+  <source src="videos/machines.webm" type="video/webm">
+  <source src="videos/machines.mp4" type="video/mp4">
+  <source src="videos/machines.ogv" type="video/ogg">
+  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
+  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
+  <p>Watch <a href="https://youtube.com/link">video on Youtube</a>
+</video>
+```
+
+Each `<source>` child includes a `src` attribute pointing to the resource and the `type` attribute informs the browser
+of the linked file's [media type](https://developer.mozilla.org/docs/Web/Media/Formats/Containers). This prevents the browser
+from fetching media files it wouldn't be able to decode.
+
+Within the `type` attribute, you can include a [`codecs`](https://developer.mozilla.org/docs/Web/Media/Formats/codecs_parameter) parameter,
+which specifies exactly how the resource is encoded. Codecs give you a way of including media optimizations that are not yet supported
+in all browsers. The codec is separated from the media type with a semicolon. For example, the codec can be written using
+intuitive syntax, such as `<source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">` which indicates that the
+WebM files contain VP8 video and vorbis audio. Codecs can also be more difficult to decipher, such as `<source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">`
+which indicates that the MP4 encoding is Advanced Video Coding Main Profile Level 4.2. Explaining this syntax is well beyond
+the scope of this lesson. Jake Archibald has a post explaining [how to determine the codec parameter for an AV1 video](https://jakearchibald.com/2022/html-codecs-parameter-for-av1/)
+if you want to learn more.
+
+When displaying a video, by default, the first frame of the video is shown as the still shot when it becomes available.
+This is something that can be controlled. The `poster` attribute enables the source of an image to show while the video is downloading
+and until it is played. If the video plays and is subsequently paused, the poster is not re-shown.
+
+Make sure to define the aspect ratio of your video, because when the video loads, a size difference
+between the poster and the video will cause a reflow and repaint.
+
+Always include the [boolean](/learn/html/attributes/#boolean-attributes) `controls` attribute. This makes the user controls
+visible, providing users with the ability to control audio levels, mute the audio completely, and expand the video to fullscreen.
+Omitting `controls` creates a bad user experience, especially if the boolean `autoplay` attribute is included. Note that some
+browsers will not heed the `autoplay` attribute directive if the boolean `muted` attribute is omitted because autoplaying a
+media file is generally a bad user experience, even when muted and with visible controls.
+
+## Tracks
+
+Between the opening and required closing tags of both audio and video, include one or more [`<track>`](https://developer.mozilla.org/docs/Web/HTML/Element/track)
+elements to specify timed text tracks. The following example includes two `<track>` files, providing timed text subtitles in both English and French.
+
+```html
+<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
+<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
+```
+
+The track files, specified in the `src` attribute, should be in [WebVTT format](https://developer.mozilla.org/docs/Web/API/WebVTT_API) (.vtt).
+The files should be on the same domain as the HTML document, unless the [`crossorigin`](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)
+attribute is included.
+
+There are five enumerated values for the track `kind` attribute: `subtitles`, `captions`, `descriptions`, `chapters`, and other `metadata`.
+
+Include `subtitles` along with the `srclang` attribute for dialogue transcription and translations. The value of each `label` attribute
+is displayed as an option to the user. The content of the selected VTT option is displayed over the video. The appearance of the
+subtitles can be styled by targeting the [::cue/ ::cue()](https://developer.mozilla.org/docs/Web/CSS/::cue).
+
+The value `kind="caption"` should be reserved for transcription and translations that include sound effects and other relevant audio information.
+This isn't just for deaf viewers. Maybe a user can't find their headphones so they turned on the captions. Or maybe they didn't
+quite catch the last few talking points from a favorite podcast, so they want to read the transcript to confirm their understanding.
+Having alternative ways to access audio and video content is both important and convenient.
+
+The `kind="description"` is for text descriptions of the visual content in the video for users who can't see the video, whether
+they are using a system without a screen such as Google Home or Alexa, or are blind.
+
+{% Aside %}
+
+The [audio and video](/learn/accessibility/video-audio/) section of [learn accessibility](/learn/accessibility/) goes into
+more detail about [captions](/learn/accessibility/video-audio/#captions), [transcripts](/learn/accessibility/video-audio/#transcripts),
+and [audio descriptions](/learn/accessibility/video-audio/#audio-descriptions).
+
+{% endAside %}
+
+[Providing captions and subtitles](https://developer.mozilla.org/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)
+using the [WebVTT format](https://developer.mozilla.org/docs/Web/API/WebVTT_API) makes the video accessible to people with
+impaired hearing. Remember, disability is a mismatch between a person and their current environment. Impaired hearing can be due
+to the user being in a loud environment, having faulty speakers or broken headphones, or because the user has some hearing loss or
+is deaf. Ensuring your content is accessible helps many more people than you think; it helps everyone.
+
+## Background video considerations
+
+Your marketing or design team may want your site to include a background video. Generally, this means that they want a muted,
+auto-playing, looping video with no controls. The HTML may look something like this:
+
+```html
+<video autoplay loop muted poster="images/machine.jpg" role="none">
+  <source src="videos/machines.webm" type="video/webm">
+  <source src="videos/machines.mp4" type="video/mp4">
+  <source src="videos/machines.ogv" type="video/ogg">
+</video>
+```
+
+Background videos are not accessible. Content should not be conveyed through background videos without providing users with full
+control over playback and access to all captions. As this video is purely decorative, it includes the [ARIA role](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles)
+of [`none`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/none_role) and omits any fallback content.
+To improve the performance of always muted videos, [remove the audio track](https://gist.github.com/liangfu/97f877e311210fa0ae18a31fdd92982e) from your media sources.
+
+If your video plays for five seconds or less, accessibility guidelines don't require a pausing mechanism, but anything
+with the boolean `loop` attribute will loop forever by default, exceeding this five-second, or any other, time limit. For good
+user experience, always include a method of pausing the video. This is most easily done by including `controls`.
+
+## Custom media controls
+
+To display custom video or audio controls, rather than the browser built-in controls, include the `controls` attribute. Then use
+JavaScript to add custom media controls and remove the controls attribute. For example, you can add a `<button>` that toggles
+the play state of an audio file.
+
+```html
+<button id="playPause" aria-controls="idOfAudio"
+  data-pause-text="Pause audio"
+  data-play-text="Play audio">Pause audio</button>
+```
+
+This example includes a button with `dataset` attributes containing the text that will be updated as the visitor toggles
+between play and pause states. The `aria-controls` attribute is included with the `id` of the element controlled by the button;
+in this case, the audio. Each button that controls the audio has an event handler.
+
+To create customized controls, use [`HTMLMediaElement.play()`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/play) and
+[`HTMLMediaElement.pause()`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/pause). When toggling the play state,
+also toggle the text of the button:
+
+```js
+const pauseButton = document.getElementById('playPause');
+
+pauseButton.addEventListener("click", pauseAndPlay, false);
+
+function pauseAndPlay() {
+  console.log(this);
+  const media = document.getElementById(this.getAttribute('aria-controls'));
+
+  if (media.paused) {
+    media.play();
+    this.innerText = this.dataset.pauseText;
+  } else {
+    media.pause();
+    this.innerText = this.dataset.playText;
+  }
+}
+```
+
+By including the `controls` attribute, the user has a way to control the audio (or video) even if JavaScript fails.
+Only remove the controls attribute once a replacement button has been instantiated.
+
+```js
+document.querySelector('[aria-controls]').removeAttribute('controls');
+```
+
+Always include external controls when users can't access the controls, such as with background videos that have their controls hidden
+behind site content. It is important to understand the basics of [media accessibility requirements](https://www.w3.org/WAI/WCAG21/Understanding/time-based-media) to accommodate users with
+different environmental and sensory needs, including the millions of people with hearing loss and visual impairments.
+We've just touched on the [`HTMLMediaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement) which provides several properties, methods, and events that are inherited by both the
+[HTMLVideoElement](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement) and
+[HTMLAudioElement](https://developer.mozilla.org/docs/Web/API/HTMLAudioElement), with `HTMLMediaElement` adding a few properties,
+methods, and events of its own. There are several other [Media APIs](https://developer.mozilla.org/docs/Web/Media#apis),
+including a [TextTrack API](https://developer.mozilla.org/docs/Web/API/TextTrack). You can use the [Media Capture and Streams](https://developer.mozilla.org/docs/Web/API/Media_Capture_and_Streams_API)
+and [MediaDevices](https://developer.mozilla.org/docs/Web/API/MediaDevices) APIs to [record audio from a user's microphone](/patterns/media/microphone-record/)
+or [record a user's screen](/patterns/media/screen-record/). The [Web Audio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)
+enables [manipulating live and pre-recorded](/patterns/media/audio-effects/) audio and streaming, saving, or sending the audio to the `<audio>` element.
+
+{% Assessment 'audio-video' %}
diff --git a/src/site/content/en/learn/html/conclusion/index.md b/src/site/content/en/learn/html/conclusion/index.md
new file mode 100644
index 00000000000..78cd3c43b62
--- /dev/null
+++ b/src/site/content/en/learn/html/conclusion/index.md
@@ -0,0 +1,24 @@
+---
+title: 'Conclusion and next steps'
+authors:
+  - estelleweyl
+description: Wrapping up with some further resources.
+date: 2023-02-21
+tags:
+  - html
+---
+
+If you have been following this course in order, you have made it to the end of Learn HTML! You've learned a lot, from the basics of the language, through to many of the finer details.
+
+## Additional resources
+
+The other courses on this site take a deeper look at some of the things you have already covered, and introduce other subjects needed in your life as a web developer:
+
+- [Learn CSS](/learn/css/)
+- [Learn Accessibility](/learn/accessibility/)
+- [Learn Forms](/learn/forms/)
+- [Learn Images](/learn/images/)
+- [Learn Responsive Design](/learn/design/)
+- [Learn PWA](/learn/pwa/)
+
+In all of our courses we heavily link to MDN Web Docs, and the [HTML section](https://developer.mozilla.org/docs/Web/HTML) of the documentation is an excellent resource.
diff --git a/src/site/content/en/learn/html/details/details.assess.yml b/src/site/content/en/learn/html/details/details.assess.yml
new file mode 100644
index 00000000000..7911231de9b
--- /dev/null
+++ b/src/site/content/en/learn/html/details/details.assess.yml
@@ -0,0 +1,15 @@
+setLeader: Test your knowledge of details and summary.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The `<summary>` must be the first child of which element?
+    options:
+      - content: "`<p>`"
+        rationale: "Try again."
+      - content: "`<details>`"
+        rationale: "Correct!"
+      - content: "`<fieldset>`"
+        rationale: "Try again."
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/details/index.md b/src/site/content/en/learn/html/details/index.md
new file mode 100644
index 00000000000..144fe4cd620
--- /dev/null
+++ b/src/site/content/en/learn/html/details/index.md
@@ -0,0 +1,166 @@
+---
+title: 'Details and summary'
+authors:
+  - estelleweyl
+description: Discover how the very useful details and summary elements work, and where to use them.
+date: 2023-02-21
+tags:
+  - html
+---
+
+A disclosure widget is a user interface control that hides and shows content. If you are reading this on web.dev, and your
+viewport is less than 106 ems wide, clicking on the "On this page" above this paragraph reveals the table of contents for
+this section. If you don't see it, shrink the browser to view the table of contents navigation on this page as a
+disclosure widget.
+
+The [accordion](https://en.wikipedia.org/wiki/Accordion_(GUI)) graphical user interface is a series of vertically stacked
+disclosure widgets. A common use case for the accordion UI is the Frequently Asked Questions (FAQ) page on many sites.
+An accordion FAQ contains a list of visible questions; clicking on a question expands, or "discloses", the answer to that question.
+
+[jQuery](https://jqueryui.com/accordion/) has included an accordion UI pattern since at least 2009. The original JavaScript-free
+accordion solution included making each FAQ question a `<label>` followed by the checkmark it labeled, and then displaying `<div>`
+answer when the checkmark was checked. The CSS looked something like this:
+
+```css
+#FAQ [type="checkbox"] + div.answer {
+  /* all the answer styles */
+  display: none;
+}
+#FAQ [type="checkbox"]:checked + div.answer {
+  display: block;
+}
+```
+
+Why the history? Disclosure widgets, such as accordions, without JavaScript or form control hacks, are a relatively recent
+addition; the [`<details>`](https://developer.mozilla.org/docs/Web/HTML/Element/details) and [`<summary>`](https://developer.mozilla.org/docs/Web/HTML/Element/summary)
+elements have only been fully supported in all modern browsers since January 2020. You can now create functioning, albeit less
+than attractive, disclosure widgets using only semantic HTML. The `<details>` and `<summary>` elements are all you need: they are a built-in way to handle
+expanding and collapsing content. When a user clicks or taps a `<summary>`, or releases the <kbd>Enter</kbd> key when
+the `<summary>` has focus, the contents of the parent `<details>` toggle to visible!
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'MWqgjQr'
+} %}
+
+Like all semantic content, you can progressively enhance the default features and appearance. In this case, a tiny bit of
+CSS has been added, but nothing else:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'ExeYgQd'
+} %}
+
+You'll note, these Codepens contain no JavaScript.
+## Toggling visibility: the `open` attribute
+
+The `<details>` element is the disclosure widget container. The `<summary>` is the summary or legend for its parent `<details>`. The
+summary is always displayed, acting as a button that toggles the display of the rest of the parent’s contents. Interacting
+with the `<summary>` toggles the display of the self-labeled summary siblings by toggling the `<details>`' element's `open` attribute.
+
+The `open` attribute is a boolean attribute. If present, no matter the value or lack thereof, it indicates that all the `<details>`
+contents are shown to the user. If the `open` attribute is not present, only the contents of the `<summary>` are shown.
+
+Because the `open` attribute is added and removed automatically as the user interacts with the control, it can be used in CSS to
+style the element differently based on its state.
+
+You can create an accordion with a list of multiple `<details>` elements, each with a `<summary>` child. Omitting the `open` attribute
+in your HTML means the `<details>` will all be collapsed, or closed, with just the summary headings visible when the page loads;
+each heading being the opener for the rest of the contents in the parent `<details>`. If you include the `open` attribute in your HTML, the `<details>`
+will render expanded, with the contents visible, when the page loads.
+
+The hidden content in the collapsed state is searchable in some browsers but not others, even though the collapsed content
+is not part of the DOM. If you search in Edge or Chrome, the details containing a search term will expand to display
+the occurrence. This behavior is not replicated in Firefox or Safari.
+
+The `<summary>` must be the first child of a `<details>` element, representing a summary, caption, or legend for the rest
+of the contents of the parent `<details>` element in which it is nested. The `<summary>` element's contents can be any heading
+content, plain text, or HTML that can be used within a paragraph.
+
+## Toggling the summary marker
+
+In the two earlier Codepens, you'll note the arrow to the [inline-start](https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties)
+side of the summary. A disclosure widget is typically presented on-screen using a small triangle that rotates (or twists)
+to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element label the disclosure widget.
+The rotating arrow at the top of each section is a [`::marker`](https://developer.mozilla.org/docs/Web/CSS/::marker) set on the
+`<summary>` element. Like list items, the `<summary>` element supports the [`list-style`](https://developer.mozilla.org/docs/Web/CSS/list-style)
+shorthand property and its longhand properties, including [`list-style-type`](https://developer.mozilla.org/docs/Web/CSS/list-style-type).
+You can style the disclosure triangle with CSS, including changing the marker used from a triangle to any other bullet type, including
+an image with [`list-style-image`](https://developer.mozilla.org/docs/Web/CSS/list-style-image).
+
+To apply other styles, use a selector similar to [`details summary::marker`](/learn/css/pseudo-elements/#marker). The
+`::marker` [pseudo-element](/learn/css/selectors/#pseudo-element) only accepts a limited number of styles. Removing the
+`::marker` and replacing it with the easier-to-style [`::before`](https://developer.mozilla.org/docs/Web/CSS/::before) is
+common practice, with CSS styles changing the style of the generated content slightly based on the presence (or absence)
+of the open attribute. You can remove the disclosure widget icon by setting `list-style: none` or set the [content](https://developer.mozilla.org/docs/Web/CSS/content)
+of the marker to `none`, but always include visual indicators to inform sighted users that the summary content is a toggle
+button that will show and hide content upon activation.
+
+```css
+details summary::before {
+  /* all the styles */
+}
+details[open] summary::before {
+  /* changes applied when open only */
+}
+```
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOvNMxL'
+} %}
+
+This example removes the default marker, and adds generated content to create a `+` when the details are closed and a `-`
+when the details are open.
+
+If you want the details block open by default, include the `open` attribute on the opening `<details>` tag. You can also add space
+between each dialog and transition the rotation of the marker created with generated content to improve the appearance:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'yLxBajp'
+} %}
+
+## How errors are handled
+
+If you don't include a `<summary>`, the browser will create one for you: with a marker and the word "details". This summary
+is part of a [shadow root](/learn/html/template/#shadow-dom), and therefore will not have author CSS summary styles applied. Unfortunately, Safari does not include
+the details in the [keyboard focus order](https://bugs.webkit.org/show_bug.cgi?id=249904).
+
+If you do include a `<summary>`, but it is not the first element in the `<details>`, the browser still displays the summary
+as it should. It will also not fail if you include a link, label, or other interactive element within the summary, but browsers
+handle interactive content within interactive content differently. For example, if you include a link in a summary, some browsers
+will add both the summary and the link to the default tabbing order, but other browsers will not focus on the link by default.
+If you click on a `<label>` nested in a `<summary>`, some browsers will give focus to the associated form control; other browsers
+will give focus to the form control and toggle the `<details>` open or closed.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'QWVLKxg'
+} %}
+
+## The `HTMLDetailsElement` interface
+Like all HTML elements, the [`HTMLDetailsElement`](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement) inherits all
+properties, methods, and events from [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement), and adds the
+[`open`](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/open) instance property and a [`toggle`](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/toggle_event)
+event. The [`HTMLDetailsElement.open`](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/open) property is a boolean
+value reflecting the [`open`](https://developer.mozilla.org/docs/Web/HTML/Element/details#attr-open) HTML attribute, indicating
+whether or not the element's contents (not counting the `<summary>`) are to be shown to the user. The toggle event is fired
+when the `<details>` element is toggled open or closed. You can listen to this event using [`addEventListener()`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener).
+
+If you want to write a script to close the opened details when the user opens any other details, remove the open attribute
+using [`removeAttribute("open")`](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute):
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'PodYGBz'
+} %}
+
+This is the only example to use JavaScript. You probably don't need JavaScript except for this functionality of closing other
+opened disclosure widgets.
+
+Remember, `<details>` and `<summary>` can be heavily styled and can even be used to [create tool tips](https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/).
+But, if you're going to use these semantic elements for use cases in which the native semantics are a mismatch, always ensure that you [maintain accessibility](https://www.scottohara.me//blog/2022/09/12/details-summary.html).
+HTML for the most part is by default accessible. Our job as developers is to ensure our content stays accessible.
+
+{% Assessment 'details' %}
diff --git a/src/site/content/en/learn/html/dialog/dialog.assess.yml b/src/site/content/en/learn/html/dialog/dialog.assess.yml
new file mode 100644
index 00000000000..ba0acb0a501
--- /dev/null
+++ b/src/site/content/en/learn/html/dialog/dialog.assess.yml
@@ -0,0 +1,15 @@
+setLeader: Test your knowledge of the dialog element.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you style the area behind the dialog?
+    options:
+      - content: "With the `::background` pseudo-element."
+        rationale: "Try again."
+      - content: "With the `::backdrop` pseudo-element."
+        rationale: "Correct!"
+      - content: "With the `background` property."
+        rationale: "Try again."
diff --git a/src/site/content/en/learn/html/dialog/index.md b/src/site/content/en/learn/html/dialog/index.md
new file mode 100644
index 00000000000..35aefc89a2f
--- /dev/null
+++ b/src/site/content/en/learn/html/dialog/index.md
@@ -0,0 +1,140 @@
+---
+title: 'Dialog'
+authors:
+  - estelleweyl
+description: 'The <dialog> element is a useful element for representing any kind of dialog in HTML, find out how it works.'
+date: 2023-02-21
+tags:
+  - html
+---
+
+A modal dialog is a special type of pop-up box on a web page: a pop-up that interrupts the user to focus on itself. There are
+some valid [use cases for popping up a dialog](https://www.nngroup.com/articles/modal-nonmodal-dialog/), but great consideration
+should be made before doing so. Modal dialogs force users to focus on specific content, and, temporarily at least, ignore
+the rest of the page.
+
+Dialogs can be either modal (only the content in the dialog can be interacted with) or non-modal (it's still possible to interact
+with content outside of the dialog). Modal dialogs are displayed on top of the rest of the page content. The rest
+of the page is [inert](learn/html/focus/) and, by default, obscured by a semi-transparent backdrop.
+
+The semantic HTML [`<dialog>`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) element to create a dialog
+comes with semantics, keyboard interactions, and all the properties and methods of the [`HTMLDialogElement`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement) interface.
+
+## Modal dialogs
+
+Here is an example of a modal `<dialog>`. Open the dialog with the "Open modal dialog" button. Once opened, there are three ways to close the dialog: the escape key, submitting a form with
+a button that has the [`formmethod="dialog"`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formmethod)
+set (or if the form itself has `method="dialog"` set), and the [`HTMLDialogElement.close()`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close) method.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'BaOBLNy'
+} %}
+
+The `HTMLDialogElement` has three main methods, along with all the methods inherited from [`HTMLElement`](/learn/html/apis).
+
+```js
+dialog.show() /* opens the dialog */
+dialog.showModal() /* opens the dialog as a modal */
+dialog.close() /* closes the dialog */
+```
+
+Because this `<dialog>` was opened via the [`HTMLDialogElement.showModal()`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/showModal)
+method, it is a modal dialog. Opening a modal dialog deactivates and obscures everything other than the dialog itself. If you
+hover over the UI outside of the dialog, you’ll note all the elements are behaving as if [`pointer-events: none;`](https://developer.mozilla.org/docs/Web/CSS/pointer-events)
+was set; even the button that opens the dialog doesn’t react to interactions.
+
+When the dialog is opened, focus moves into the dialog. Focus is set on the first element in the sequential keyboard navigation order within that dialog.
+If you hit the `tab` key repeatedly, you’ll note that only the content within the dialog can get focus while the modal dialog is
+open. Everything outside of the modal dialog is inert as long as the dialog is open.
+
+When a dialog is closed, modal or not, focus is returned to the element that opened the dialog. If you programmatically
+open a dialog not based on user action, reconsider. If you must, ensure that focus is put back where it was prior to the dialog opening,
+especially if the user dismisses the dialog without interacting with it.
+
+There is a global [`inert`](/learn/html/focus/#the-inert-attribute) attribute that can be used to disable an element and all of its descendants, other than any active
+dialog. When a modal dialog is opened using `openModal()`, the inertness or deactivation comes for free; the attribute
+isn’t explicitly set.
+
+The backdrop that obscures everything other than the dialog can be styled using the [`::backdrop`](https://developer.mozilla.org/docs/Web/CSS/::backdrop)
+pseudo-element. The backdrop is only displayed when a `<dialog>` is displayed with the `.showModal()` method. This pseudo-element
+matches all the backdrops, including the one displayed when the [FullScreen API](https://developer.mozilla.org/docs/Web/API/Fullscreen_API) is used,
+such as when viewing a video in full-screen mode which doesn’t have the same aspect ratio as the screen or monitor.
+
+## Non-modal dialogs
+
+The `HTMLDialogElement.show()` similarly opens a dialog, but without adding a backdrop or causing anything to become inert.
+The escape key does not close non-modal dialogs. Because of this, it is even more important to ensure you include a method
+of closing the non-modal dialog. In doing so, if the closer is outside the dialog, realize the focus will go to the element
+that opened the dialog, which may not be the best user experience.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'bGKQvza'
+} %}
+
+While a button to close the dialog is not officially required by the specification, consider it as required. The escape key
+will close a modal dialog, but not a non-modal one. A visible button that is able to receive focus improves accessibility and
+user experience.
+
+## Closing a dialog
+
+You don’t need the `HTMLDialogElement.close()` method to close a dialog. You don’t need JavaScript at all. To close the `<dialog>`
+without JavaScript, include a form with a dialog method by either setting `method="dialog"` on the `<form>` or `formmethod="dialog"`
+on the button.
+
+When a user submits via the `dialog` method, the state of user-entered data is maintained. While there is a submit event—the
+form goes through constraint validation (unless `novalidate` is set)—the user data is neither cleared nor submitted.
+A close button without JavaScript can be written as:
+
+```html
+<dialog open>
+  <form method="dialog">
+    <button type="submit" autofocus>close</button>
+  </form>
+</dialog>
+```
+
+You may have noticed the [`autofocus`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus) attribute
+set on the close `<button>` in this example. Elements with `autofocus` attribute set within a `<dialog>` will not receive
+focus on page load (unless the page is loaded with the dialog visible). They will, however, get focus when the dialog is opened.
+
+By default, when a dialog is opened, the first focusable element within the dialog will receive focus unless a different
+element within the dialog has the `autofocus` attribute set. Setting the `autofocus` attribute on the close button ensures
+it receives focus when the dialog is opened. But including [`autofocus` within a `<dialog>`](/learn/html/focus/#autofocus)
+should only be done with much consideration. All the elements in the sequence coming before the autofocused element are skipped.
+We discuss this attribute further in [the focus lesson](/learn/html/focus/).
+
+The [`HTMLDialogElement`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement) interface includes a [`returnValue`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/returnValue)
+property. Submitting a form with a `method="dialog"` sets the `returnValue` to the `name`, if any, of the submit button used to
+submit the form. If we had written `<button type="submit" name="toasty">close</button>`, the `returnValue` would be `toasty`.
+
+When a dialog is opened, the boolean [`open`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog#attr-open) attribute
+is present, meaning the dialog is active and can be interacted with. When a dialog is opened by adding the `open` attribute rather
+than via `.show()` or `.showModal()`, the dialog will be modal-less. The [`HTMLDialogElement.open`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/open)
+property returns `true` or `false`, depending on whether the dialog is available for interaction—not whether it is modal or not.
+
+While JavaScript is the preferred method of opening a dialog, including the `open` attribute on page load, and then removing
+it with `.close()`, can help ensure the dialog is available even when JavaScript is not.
+
+## Additional details
+
+### Don't use `tabindex`
+
+The element that is activated to open the dialog and the close button contained in it (and possibly other content) can receive
+focus and are interactive. The `<dialog>` element is not interactive and doesn’t receive focus. Do not add the `tabindex` property
+to the dialog itself.
+
+### ARIA roles
+
+The implicit role is [`dialog`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/dialog_role). If the dialog
+is a confirmation window communicating an important message that requires a confirmation or other user response, set [`role="alertdialog"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/alertdialog_role).
+The dialog should also have an accessible name. If visible text can provide for the accessible name, add `aria-labelledby="idOfLabelingText"`.
+
+### CSS defaults
+
+Note that browsers provide default styling for `dialog`. Firefox, Chrome, and Edge set `color: CanvasText;` `background-color: Canvas;`
+and Safari sets `color: black; background-color: white;` in their user-agent stylesheets. The `color` is inherited
+from `dialog` and not from `body` or `:root`, which may be unexpected. The `background-color` property is not inherited.
+
+{% Assessment 'dialog' %}
diff --git a/src/site/content/en/learn/html/document-structure/document-structure.assess.yml b/src/site/content/en/learn/html/document-structure/document-structure.assess.yml
new file mode 100644
index 00000000000..edaf8c92a8a
--- /dev/null
+++ b/src/site/content/en/learn/html/document-structure/document-structure.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of document-structure.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you identify the language of the document?
+    options:
+      - content: "Add the `language` attribute to the HTML tag."
+        rationale: "Try again."
+      - content: "Add the `lang` attribute to the HTML tag."
+        rationale: "Correct!"
+      - content: "`Add the <lang>` element to the `<head>`."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2"
+    stem: Select elements that can be included in the `<head>`.
+    options:
+      - content: "`<p>`"
+        rationale: "Try again."
+      - content: "`<title>`"
+        rationale: "Correct!"
+      - content: "`<meta>`"
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/document-structure/index.md b/src/site/content/en/learn/html/document-structure/index.md
new file mode 100644
index 00000000000..7d1d19cbb9f
--- /dev/null
+++ b/src/site/content/en/learn/html/document-structure/index.md
@@ -0,0 +1,307 @@
+---
+title: 'Document structure'
+authors:
+  - estelleweyl
+description: Learn how to structure your HTML documents with a solid foundation.
+date: 2022-09-27
+tags:
+  - html
+---
+
+HTML documents include a document type declaration and the `<html>` root element. Nested in the `<html>` element are the document head and document body. While the head of the document isn't visible to the sighted visitor, it is vital to make your site function. It contains all the meta information, including information for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and the behavior and presentation of your content. In this section, you'll discover the components that, while not visible, are present on almost every web page.
+
+To create the MachineLearningWorkshop.com (MLW) site, start by including the components that should be considered essential for every web page: the type of document, the content's human language, the character set, and, of course, the title or name of the site or application.
+
+## Add to every HTML document
+
+There are several features that should be considered essential for any and every web page. Browsers will still render content if these elements are missing, but include them. Always.
+
+### `<!DOCTYPE html>`
+
+The first thing in any HTML document is the preamble. For HTML, all you need is `<!DOCTYPE html>`. This may look like an HTML element, but it isn't. It's  a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as [quirks mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Including the doctype helps prevent quirks mode.
+
+### `<html>`
+
+The `<html>` element is the root element for an HTML document. It is the parent of the `<head>` and `<body>`, containing everything in the HTML document other than the doctype. If omitted it will be implied, but it is important to include it, as this is the element on which the language of the content of the document is declared.
+
+### Content language
+
+The `lang` language attribute added to the `<html>` tag defines the main language of the document. The value of the [`lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang#language_tag_syntax) is a two- or three-letter ISO language code followed by the region. The region is optional, but recommended, as a language can vary greatly between regions. For example, French is very different in Canada (`fr-CA`) versus Burkina Faso (`fr-BF`). This language declaration enables screen readers, search engines, and translation services to know the document language.
+
+The `lang` attribute is not limited to the `<html>`tag. If there is text within the page that is in a language different from the main document language, the `lang` attribute should be used to identify exceptions to the main language within the document.  Just like when it is included in the head, the `lang` attribute in the body has no visual effect. It only adds semantics, enabling assistive technologies and automated services to know the language of the impacted content.
+
+In addition to setting the language for the document and exceptions to that base language, the attribute can be used in CSS selectors.  `<span lang="fr-fr">Ceci n'est pas une pipe.</span>` can be targeted with the attribute and language selectors [`[lang|="fr"]`](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors#attrvalue_3) and [`:lang(fr)`](https://developer.mozilla.org/docs/Web/CSS/:lang).
+
+### `<head>`
+
+Nested between the opening and closing `<html>` tags, we find the two children: `<head>` and `<body>`:
+
+```html
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+The `<head>`, or document metadata header, contains all the metadata for a site or application. The body contains the visible content. The rest of this section focuses on the components found nested inside the opening and closing `<head></head>`
+
+## Required components inside the `<head>`
+
+The document metadata, including the document title, character set, viewport settings, description, base URL, stylesheet links, and icons, are found in the `<head>` element. While you may not need all these features, always include character set, title, and viewport settings.
+
+### Character encoding
+
+The very first element in the `<head>` should be the `charset` character encoding declaration. It comes before the title to ensure the browser can render the characters in that title and all the characters in the rest of the document.
+
+The [default encoding](https://html.spec.whatwg.org/multipage/parsing.html#documentEncoding) in most browsers is `windows-1252`, depending on the locale. However, you should use [`UTF-8`](https://developer.mozilla.org/docs/Glossary/UTF-8), as it enables the one- to four-byte encoding of all characters, even ones you didn't even know existed. Also, it's the encoding type required by HTML5.
+
+To set the character encoding to UTF-8, include:
+
+```html
+<meta charset="utf-8" />
+```
+
+By declaring `UTF-8` (case-insensitive), you can even include emojis in your title (but please don't).
+
+The character encoding is inherited into everything in the document, even `<style>` and `<script>`. This little declaration means you can include emojis in class names and the selectorAPI (again, please don't).  If you do [use emojis](https://readabilityguidelines.co.uk/images/emojis/), make sure to use them in a way that enhances usability without harming accessibility.
+
+### Document title
+
+Your home page and all additional pages should each have a unique title. The contents for the document title, the text between the opening and closing `<title>` tags, are displayed in the browser tab, the list of open windows, the history, search results, and, unless redefined with [`<meta>` tags](/learn/html/metadata), in social media cards.
+
+```html
+<title>Machine Learning Workshop</title>
+```
+
+### Viewport metadata
+
+The other meta tag that should be considered essential is the [viewport](/learn/design/intro/#a-meta-element-for-viewport) meta tag, which helps site responsiveness, enabling content to render well by default, no matter the viewport width. While the [viewport meta tag](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) has been around since June 2007, when the first iPhone came out, it's only recently been [documented in a specification](https://drafts.csswg.org/css-viewport/#viewport-meta).  As it enables controlling a viewport's size and scale, and prevents the site's content from being sized down to fit a 960px site onto a 320px screen, it is definitely recommended.
+
+```html
+<meta name="viewport" content="width=device-width" />
+```
+
+The preceding code means "make the site responsive, starting by making the width of the content the width of the screen". In addition to `width`, you can set zoom and scalability, but they both default to accessible values. If you want to be explicit, include:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
+```
+
+Viewport is part of the [Lighthouse accessibility audit](/meta-viewport/); your site will pass if it is scalable and has no maximum size set.
+
+So far, the outline for our HTML file is:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Machine Learning Workshop</title>
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+
+## Other `<head>` content
+
+There's a lot more that goes into the `<head>`. All the metadata, in fact.  Most of the elements you'll find in the `<head>` are covered here, while saving a plethora of the `<meta>` options for the next chapter.
+
+You've seen the meta character set and the document title, but there is a lot more metadata outside of `<meta>` tags that should be included.
+
+### CSS
+
+The `<head>` is where you include styles for your HTML. There is a [learning path dedicated to CSS](/learn/css/) if you want to learn about styles, but you do need to know how to include them in your HTML documents.
+
+There are three ways to include CSS: `<link>`, `<style>`, and the `style` attribute.
+
+The main two ways to include styles in your HTML file are by including an external resource using a `<link>` element with the `rel` attribute set to `stylesheet`, or including CSS directly in the head of your document within opening and closing `<style>` tags.
+
+The `<link>` tag is the preferred method of including stylesheets. Linking a single or a few external style sheets is good for both developer experience and site performance: you get to maintain CSS in one spot instead of it being sprinkled everywhere, and browsers can cache the external file, meaning it doesn't have to be downloaded again with every page navigation.
+
+The syntax is `<link rel="stylesheet" href="styles.css">`, where styles.css is the URL of your stylesheet. You'll often see `type="text/css"`. Not necessary! If you are including styles written in something other than CSS, the `type` is needed, but since there isn't any other type, this attribute isn't needed. The `rel` attribute defines the relationship: in this case `stylesheet`. If you omit this, your CSS will not be linked.
+
+You'll discover a few other `rel` values shortly, but let's first discuss other ways of including CSS.
+
+If you want your external style sheet styles to be within a cascade layer but you don't have access to edit the CSS file to put the layer information in it, you'll want to include the CSS with [`@import`](https://developer.mozilla.org/docs/Web/CSS/@import) inside a `<style>`:
+
+```html
+<style>
+  @import "styles.css" layer(firstLayer);
+</style>
+```
+
+When using `@import` to import style sheets into your document, optionally into cascade layers, the `@import` statements must be the first statements in your `<style>` or linked stylesheet, outside of the character set declaration.
+
+While cascade layers are still fairly new and you might not spot the `@import` in a head `<style>`, you will often see custom properties declared in a head style block:
+
+```html
+<style>
+  :root {
+    --theme-color: #226DAA;
+  }
+</style>
+```
+
+{% Aside %}
+Styles, the presentation layer, are the purview of CSS, here we are considering how to attach your styles to the content layer, your HTML. If the CSS of the preceding code interests you, look up [cascade layers](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_layers) and [custom properties](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties).
+{% endAside %}
+
+Styles, either via `<link>` or `<style>`, or both, should go in the head. They will work if included in the document's body, but you want your styles in the head for performance reasons. That may seem counterintuitive, as you may think you want your content to load first, but you actually want the browser to know how to render the content when it is loaded. Adding styles first prevents the unnecessary repainting that occurs if an element is styled after it is first rendered.
+
+Then there's the one way of including styles you'll never use in the `<head>` of your document: inline styles. You'll probably never use inline styles in the head because the user agents' style sheets hide the head by default. But if you want to make a CSS editor without JavaScript, for example, so  you can test your page's custom elements, you can make the head visible with `display: block`,  and then hide everything in the head, and then with an inline `style` attribute, make a content-editable style block visible.
+
+```html
+<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
+  head { display: block; }
+  head * { display: none; }
+  :root {
+    --theme-color: #226DAA;
+  }
+</style>
+```
+
+While you can add inline styles on the `<style>`, it's way more fun to style your `<style>` in your `style`. I digress.
+
+### Other uses of the `<link>` element
+
+The `link` element is used to create relationships between the HTML document and external resources. Some of these resources may be downloaded, others are informational. The type of relationship is defined by the value of the `rel` attribute.  There are currently [25 available values for the `rel` attribute](https://html.spec.whatwg.org/multipage/links.html#linkTypes) that can be used with `<link>`,  `<a>` and `<area>`, or `<form>`, with a few that can be used with all. It's preferable to include those related to meta information in the head and those related to performance in the `<body>`.
+
+You'll include three other types in your header now: `icon`, `alternate`, and `canonical`. (You'll include a fourth type,  [`rel="manifest"`, in the next module](/learn/html/metadata/)).
+
+#### Favicon
+
+Use the `<link>` tag, with the `rel="icon"` attribute/value pair to identify the favicon to be used for your document. A favicon is a very small icon that appears on the browser tab, generally to the left of the document title. When you have an unwieldy number of tabs open, the tabs will shrink and the title may disappear altogether, but the icon always remains visible. Most favicons are company or application logos.
+
+If you don't declare a favicon, the browser will look for a file named `favicon.ico` in the top-level directory (the website's root folder). With `<link>`, you can use a different file name and location:
+
+```html
+<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
+```
+
+The preceding code says "use the `mlwicon.png` as the icon for scenarios where a 16px, 32px, or 48px makes sense." The sizes attribute accepts the value of `any` for scalable icons or a space-separated list of square `widthXheight` values; where the width and height values are 16, 32, 48, or greater in that geometric sequence, the pixel unit is omitted, and the X is case-insensitive.
+
+```html
+<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
+<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
+```
+
+There are two special non-standard kind of icons for Safari browser: `apple-touch-icon` for iOS devices and `mask-icon` for pinned tabs on macOS. `apple-touch-icon` is applied only when the user adds a site to home screen: you can specify multiple icons with different `sizes` for different devices. `mask-icon` will only be used if the user pins the tab in desktop Safari: the icon itself should be a monochrome SVG, and the `color` attribute fills the icon with needed color.
+
+While you can use `<link>` to define a completely different image on each page or even each page load, don't. For consistency and a good user experience, use a single image! Twitter uses the blue bird: when you see the blue bird in your browser tab, you know that tab is open to a Twitter page without clicking on the tab. Google uses different favicons for each of its different applications: there's a mail icon, a calendar icon, for example. But all the Google icons use the same color scheme. Again, you know exactly what the content of an open tab is simply from the icon.
+
+#### Alternate versions of the site
+
+We use the `alternate` value of the `rel` attribute to identify translations, or alternate representations, of the site.
+
+Let's pretend we have versions of the site translated into French and Brazilian Portuguese:
+
+```html
+<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
+<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
+```
+
+When using `alternate` for a translation, the `hreflang` attribute must be set.
+
+The alternate value is for more than just translations. For example, the `type` attribute can define the alternate URI for an RSS feed when the `type` attribute is set to `application/rss+xml` or `application/atom+xml`. Let's link to a pretend PDF version of the site.
+
+```html
+<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
+```
+
+If the `rel` value is `alternate stylesheet`, it defines an [alternate stylesheet](https://developer.mozilla.org/docs/Web/CSS/Alternative_style_sheets) and the `title` attribute must be set giving that alternate style a name.
+
+#### Canonical
+
+If you create several translations or versions of Machine Learning Workshop, search engines may get confused as to which version is the authoritative source. For this, use `rel="canonical"` to identify the preferred URL for the site or application.
+
+Include the canonical URL on all of your translated pages, and on the home page, indicating our preferred URL:
+
+```html
+<link rel="canonical" href="https://www.machinelearning.com" />
+```
+
+The `rel="canonical"` canonical link is most often used for cross-posting with publications and blogging platforms to credit the original source; when a site syndicates content, it should include the canonical link to the original source.
+
+### Scripts
+
+The `<script>` tag is used to include, well, scripts. The default type is JavaScript. If you include any other scripting language, include the `type` attribute with the mime type, or `type="module"` if it's a [JavaScript module](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). Only JavaScript and JavaScript modules get parsed and executed.
+
+The `<script>` tags can be used to encapsulate your code or to download an external file. In MLW, there is no external script file because contrary to popular belief, you don't need JavaScript for a functional website, and, well, this is an HTML learning path, not a JavaScript one.
+
+You will be including a tiny bit of JavaScript to create an [Easter egg](https://www.webopedia.com/definitions/easter-egg/) later on:
+
+```html
+<script>
+  document.getElementById('switch').addEventListener('click', function() {
+    document.body.classList.toggle('black');
+  });
+</script>
+```
+
+This snippet creates an event handler for an element with the id of `switch`. With JavaScript, you don't want to reference an element before it exists.  It doesn't exist yet, so we won't include it yet. When we do add the light switch element, we'll add the `<script>` at the bottom of the `<body>` rather than in the `<head>`. Why? Two reasons. We want to ensure elements exist before the script referencing them is encountered as we're not basing this script on a [DOMContentLoaded event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event). And, mainly, JavaScript is not only [render-blocking](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/), but the browser stops downloading all assets when scripts are downloaded and doesn't resume downloading other assets until the JavaScript has finished execution. For this reason, you will often find JavaScript requests at the end of the document rather than in the head.
+
+There are two attributes that can reduce the blocking nature of JavaScript download and execution: `defer` and `async`. With `defer`, HTML rendering is not blocked during the download, and the JavaScript only executes after the document has otherwise finished rendering. With `async`, rendering isn't blocked during the download either, but once the script has finished downloading, the rendering is paused while the JavaScript is executed.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/bMpXQsshdEYqlmwV2wBW.png", alt="loading when using async and defer.", width="800", height="365" %}
+
+To include MLW's JavaScript in an external file, you could write:
+
+```html
+<script src="js/switch.js" defer></script>
+```
+
+Adding the [`defer`](https://developer.mozilla.org/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies) attribute defers the execution of the script until after everything is rendered, preventing the script from harming performance. The `async` and `defer` attributes are only valid on external scripts.
+
+### Base
+
+There is another element that is only found in the `<head>.` Not used very often, the `<base>` element allows setting a default link URL and target. The `href` attribute defines the base URL for all relative links.
+
+The `target` attribute, valid on `<base>` as well as on links and forms, sets where those links should open. The default of `_self` opens linked files in the same context as the current document. Other options include `_blank`, which opens every link in a new window, the `_parent` of the current content, which may be the same as self if the opener is not an iframe,  or `_top`, which is in the same browser tab, but popped out of any context to take up the entire tab.
+
+Most developers add the `target` attribute to the few, if any, links they want to open in a new window on the links or form themselves, rather than using `<base>`.
+
+```html
+<base target="_top" href="https://machinelearningworkshop.com" />
+```
+
+If our website found itself nested within an iframe on a site like Yummly, including the `<base>` element would mean when a user clicks on any links within our document, the link will load popped out of the iframe, taking up the whole browser window.
+
+One of the drawbacks of this element is that anchor links are resolved with `<base>`. The `<base>` effectively converts the link `<a href="#ref">` to `<a target="_top" href="https://machinelearningworkshop.com#ref">`,  triggering an HTTP request to the base URL with the fragment attached.
+
+A few other things to note about `<base>`: there can be only one `<base>` element in a document, and it should come before any relative URLs are used, including possible script or stylesheet references.
+
+The code now looks like this:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Machine Learning Workshop</title>
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" src="css/styles.css" />
+    <link rel="icon" type="image/png" href="/images/favicon.png" />
+    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
+    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
+    <link rel="canonical" href="https://www.machinelearning.com" />
+  </head>
+  <body>
+
+    <!-- <script defer src="scripts/lightswitch.js"></script>-->
+  </body>
+</html>
+```
+
+### HTML comments
+
+Note that the script is wrapped between some angle brackets, dashes, and a bang. This is how you comment out HTML. We'll leave the script commented out until we have the actual content on the page.  Anything between `<!--` and `-->` will not be visible or parsed. HTML comments can be put anywhere on the page, including the head or body, with the exception of scripts or style blocks, where you should use JavaScript and CSS comments, respectively.
+
+You have covered the basics of what goes in the `<head>`, but you want to learn more than the basics. In the next sections, we will learn about meta tags, and how to control what gets displayed when your website is linked to on social media.
+
+{% Assessment 'document-structure' %}
diff --git a/src/site/content/en/learn/html/focus/focus.assess.yml b/src/site/content/en/learn/html/focus/focus.assess.yml
new file mode 100644
index 00000000000..089847c20d5
--- /dev/null
+++ b/src/site/content/en/learn/html/focus/focus.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of focus.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: If an element cannot be focused it is described as what?
+    options:
+      - content: "Empty."
+        rationale: "Try again."
+      - content: "Inert."
+        rationale: "Correct!"
+      - content: "Hidden."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "2"
+    correctAnswers: "0,2"
+    stem: What will be true if the element has a `disabled` attribute?
+    options:
+      - content: "It will be unfocusable."
+        rationale: "Correct!"
+      - content: "It will not be displayed."
+        rationale: "Try again."
+      - content: "If it is a form element it will not be submitted."
+        rationale: "Correct!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/focus/index.md b/src/site/content/en/learn/html/focus/index.md
new file mode 100644
index 00000000000..5579f8e2de2
--- /dev/null
+++ b/src/site/content/en/learn/html/focus/index.md
@@ -0,0 +1,230 @@
+---
+title: 'Focus'
+authors:
+  - estelleweyl
+description: How to manage focus order in your HTML documents.
+date: 2023-02-21
+tags:
+  - html
+---
+
+Interactive elements, including [form controls](/learn/html/forms/), [links](/learn/html/links/), and buttons, are by
+default focusable and tabbable. Tabbable elements are part of the document's sequential focus navigation order. Other elements
+are inert, meaning they are not interactive. With HTML attributes, it is possible to make interactive elements inert and to
+make inert elements interactive.
+
+{% Aside %}
+For usability reasons, always ensure that the user knows which element has focus. Include CSS [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus),
+[`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible), and, optionally, [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
+styles. This is so important: there are Learn sections devoted to focus styles in both the [CSS](/learn/css/focus/) and [Accessibility](/learn/accessibility/focus/) learning paths.
+{% endAside %}
+
+By default, the navigation focus order is the same as the visual order, which is the source code order. There are HTML
+attributes that can alter this order and CSS properties that can alter the visual order of content. Changing the tabbing
+order with HTML or visual rendering order with CSS can harm user experience.
+
+Don't alter the perceived and actual tabbing order with CSS and HTML. As the following two examples demonstrate, tab orders
+that differ from the visually expected order are confusing to users and bad for user experience.
+
+In this example, the value of the [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex) attribute
+has made the tab order chaotic:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'GRXKqGz',
+tab: 'result'
+} %}
+
+In this example, CSS has created a divergence between the tabbing order and the visual order of the content:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'KKxPMBV',
+tab: 'result'
+} %}
+
+The [`flex-flow: row-reverse;`](https://developer.mozilla.org/docs/Web/CSS/flex-flow) declaration has reversed the visual order.
+In addition, the CSS [order](https://developer.mozilla.org/docs/Web/CSS/order) property was applied to the sixth word, "This", which visually moved that
+one word. The tabbing sequence is the order of the code, which no longer matches the visual order, creating a disconnect
+for keyboard users.
+
+{% Aside %}
+CSS features, including [flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox), [grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout),
+[positioning](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Positioning), [transforms](https://developer.mozilla.org/docs/Web/CSS/translate),
+and [multi-column](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), can alter the visual order of
+content. Always ensure your content maintains a logical tabbing order on all viewport sizes. Test your content by tabbing
+through it with a keyboard: with shift + tab to move backwards through the content. Always ensure it's apparent which element
+currently has focus with CSS, and avoid accessibility problems by not reordering focusable elements with CSS.
+{% endAside %}
+
+## Making inert elements interactive
+
+The `contenteditable` and `tabindex` attributes, being global attributes, can be added to any element, making them focusable
+in the process. Focusable elements can also be focused with a mouse or pointer, by having the [`autofocus`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus)
+attribute set, or by script, such as with [`element.focus()`](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus).
+
+### The `tabindex` attribute
+
+The global [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex) attribute, introduced in
+[attributes](/learn/html/attributes/#tabindex), enables elements that otherwise would not be able to receive focus to get
+focus, usually with the Tab key, hence the name.
+
+The `tabindex` attribute takes as its value an integer. A negative value makes an element focusable but not tabbable. A
+`tabindex` value of `0` makes the element focusable and tabbable, adding the element on which it is applied to the sequential
+focus navigation order in source code order. A value of 1 or greater makes the element focusable and tabbable,
+but adds it to a prioritized tabbing sequence, and, as we saw above, should be avoided.
+
+On this page, the share button, `<share-action>`, is a [custom element](/learn/html/template/). The `tabindex="0"` adds this not-normally focusable
+element into the keyboard default tabbing order:
+
+```html
+<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
+  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
+    <use href="#shareIcon" />
+  </svg>
+  <span>Share</span>
+</share-action>
+```
+
+{% Aside %}
+
+The [`role="button"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/button_role) informs screen reader
+users that this element should behave like a [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button).
+When creating custom elements which mimic existing semantic elements, including an [ARIA role](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles)
+is appropriate and expected. The element must provide all the features of the element being replicated. This can be done by extending the replicated
+element, such as extending the [`HTMLButtonElement`](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement), or by adding
+`tabindex="0"` and using JavaScript to program *all* the functionality of the element it is mimicking, including handling
+pointer events and the Enter and Space key presses. If `<button>` had been used for the button instead of creating a custom element,
+the `tabindex` and `role` attributes would have been unnecessary, and the browser would have provided the pointer and keyboard events.
+{% endAside %}
+
+There's another custom element on this page: the [local navigation](/learn/html/navigation/#local-navigation) has a custom
+element with a negative `tabindex` value:
+
+```html
+<web-navigation-drawer type="standard" tabindex="-1">
+```
+
+A `tabindex` attribute with a negative value makes the element focusable but not tabbable. The element is capable of receiving
+focus, such as via [`HTMLElement.focus()`](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus), but it is not part
+of the sequential focus navigation order. The convention for non-tabbable, focusable elements is to use `tabindex="-1"`. Note that
+if you add `tabindex="-1"` to an interactive element, it will no longer be tabbable.
+
+The [`element.focus()`](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus) method can be used to set focus to
+focusable elements. Note that the browsers scroll focused elements into view. For this reason, avoid the use of
+`element.focus({preventScroll:true})`, as focusing on a non-visible element will give a bad user experience.
+
+If you want to query the document to find out which element currently has focus, use the read-only [`Document.activeElement`](https://developer.mozilla.org/docs/Web/API/Document/activeElement) property.
+
+Elements with a `tabindex` of `1` or greater are included in a separate tab sequence. As you'll notice in the Codepen,
+tabbing begins in a separate sequence, in order of lowest value to highest value, before going through those in the regular sequence
+(no `tabindex` set, or `tabindex="0"`) in source order:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'WNgexPv'
+} %}
+
+`tabindex` with a positive value puts the element into a prioritized focus sequence, which can lead to focus order chaos.
+Avoid [modifying the DOM order with `tabindex`](/using-tabindex/). Not only can altered tabbing orders create bad user
+experiences, they are difficult for developers to manage and maintain.
+
+### The `contenteditable` attribute
+
+The [`contenteditable`](/learn/html/attributes/#contenteditable/) attribute was discussed earlier. Setting `contenteditable="true"` on any element makes it editable,
+focusable, and part of the tab order. The focus behavior is similar to setting `tabindex="0"`, but not the same. Nested
+`contenteditable` elements are focusable but not tabbable. To make a nested `contenteditable` element tabbable, add `tabindex="0"`,
+which will add it to the sequential focus navigation order.
+
+## Giving focus to interactive elements
+
+### The `autofocus` attribute
+
+While the boolean [`autofocus`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus) is a global attribute
+that can be set on any element, it doesn't make an inert element interactive. When the page loads, the first focusable element
+with the `autofocus` attribute set will receive focus, as long as that element is displayed and not nested in a [`<dialog>`](/learn/html/dialog/).
+
+Automatically setting focus on content can be confusing. Setting `autofocus` on a form control means that the form control
+will scroll into view on page load. All your users, including screen reader users and users with small viewports, may not
+"see" the instructions for the form, possibly even scrolling past the form control's normally visible label. The `autofocus`
+attribute doesn't alter the document's sequential focus navigation order. The elements in the sequence coming before the
+autofocused element are simply skipped. For these reasons, it is not advised to include the `autofocus` attribute.
+
+The exception to the "don't use `autofocus`" recommendation is including the `autofocus` attribute within `<dialog>` elements.
+When a dialog is opened, the browser will automatically focus on the first focusable interactive element within the `<dialog>`,
+meaning `autofocus` to an element is not necessary. If you want to be sure a specific interactive element within the dialog receives
+focus when the dialog opens, add the `autofocus` attribute to that element.
+
+```html
+<dialog open>
+  <form method="dialog">
+    <button type="submit" autofocus>close</button>
+  </form>
+</dialog>
+```
+
+The `autofocus` attribute set on the close `<button>` ensures it receives focus when the dialog is opened. As the first element
+in the dialog, it would have received focus in any case. By default, when a dialog is opened, the first focusable element within
+the dialog will receive focus unless a different element within the dialog has the `autofocus` attribute set.
+
+## Making interactive elements inert
+
+There are also HTML attributes that can remove interactive elements from the tabbing sequence. Including a negative `tabindex`
+to focusable elements, adding the `disabled` attribute to supporting form controls, and adding the global `inert` attribute
+to a container all make elements un-tabbable. These three attributes are NOT interchangeable.
+
+### Negative `tabindex` value
+
+As we learned above, a `tabindex` attribute with a negative value makes an element focusable but not tabbable. While adding
+`tabindex="0"` to a focusable-by-default element, including links, buttons, form controls, and elements that are `contenteditable`
+is not necessary; including a `tabindex` with a negative value removes normally tabbable elements from the sequential focus
+navigation order.
+
+A negative `tabindex` value prevents keyboard users from focusing on interactive elements, but doesn't disable the element. Pointer
+users can still focus on the element. To disable an element, use the `disabled` attribute.
+
+### Disabled
+
+The boolean [disabled](https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled) attribute makes the form controls on
+which it is applied and their descendants, if any, unfocusable. Disabled form controls can't be focused, don't get click events,
+and are not submitted upon form submission. Note `disabled` is not a global attribute. It applies to `<button>`, `<input>`,
+`<optgroup>`, `<option>`, `<select>`, `<textarea>`, form-associated custom elements, and [`<fieldset>`](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset).
+When set on `<optgroup>` or `<fieldset>`, all the child form controls are disabled, except for the contents of the `<fieldset>`'s first [`<legend>`](https://developer.mozilla.org/docs/Web/HTML/Element/legend).
+
+The same elements that support `disabled` are also targetable with the [`:disabled`](https://developer.mozilla.org/docs/Web/CSS/:disabled)
+and [`:enabled`](https://developer.mozilla.org/docs/Web/CSS/:enabled) pseudoclasses. Elements that are disabled with the
+`disabled` attribute are generally styled as light gray via the user-agent stylesheet, even if an [`accent-color`](https://developer.mozilla.org/docs/Web/CSS/accent-color)
+is set.
+
+Being a boolean attribute, the presence of the attribute disables the otherwise enabled element; you can't set it to `false`.
+To re-enable a disabled element, the attribute has to be removed, generally via [`Element.removeAttribute('disabled')`](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute).
+
+The [`HTMLInputElement.disabled`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/disabled) property lets you check
+if an input is disabled. As `disabled` is not a global attribute, it's not inherited from the HTMLElement, but every supporting
+element interface, like [`HTMLSelectElement`](https://developer.mozilla.org/docs/Web/API/HTMLSelectElement/disabled),
+[`HTMLTextareaElement`](https://developer.mozilla.org/docs/Web/API/HTMLTextAreaElement#instance_properties), has the same read-only property.
+
+The `disabled` attribute does not apply to normally `inert` elements that are made focusable via `tabindex` or `contenteditable`.
+It also doesn't apply to the `<form>` element itself. To disable these, the global `inert` attribute can be used.
+
+### The `inert` attribute
+
+When the `inert` global boolean attribute is added to an element, that element and all nested content become disabled—neither
+clickable nor tabbable—and removed from the accessibility tree. While `inert` can be applied to any element, it is generally
+used for sections of content, such as offscreen or otherwise hidden content.
+
+When applying `disabled` to form controls, the browser provides default styling and can be styled using the [`:disabled`](https://developer.mozilla.org/docs/Web/CSS/:disabled)
+pseudo class. The `inert` attribute provides no visual indicators and has no matching pseudoclass (though the `[inert]` [attribute selector](/learn/css/selectors/#attribute-selector) matches).
+
+Using `inert` on visible content without styles indicating the inertness can lead to poor user experience. As inert content
+is not available to screen reader users, it can lead to confusion when sighted screen reader users see content on screen
+that is not available to the accessibility tools. Make inertness very apparent via CSS.
+
+Make sure that the focus never moves to non-visible content. Anything rendered off-screen that does not automatically
+come into view when focused should be made [inert](https://developer.chrome.com/articles/inert/). If content is hidden,
+but comes into view when focused, like the [skip to content link](/learn/html/navigation/#skip-to-content-link) on this page,
+it does not need to be made inert.
+
+## Check your understanding
+
+{% Assessment 'focus' %}
diff --git a/src/site/content/en/learn/html/forms/forms.assess.yml b/src/site/content/en/learn/html/forms/forms.assess.yml
new file mode 100644
index 00000000000..a14e7393e48
--- /dev/null
+++ b/src/site/content/en/learn/html/forms/forms.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of forms.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you cause radio buttons to be part of the same group?
+    options:
+      - content: "Put them all inside a fieldset."
+        rationale: "Try again."
+      - content: "Give them all the same `name` attribute value."
+        rationale: "Correct!"
+      - content: "Give them all the same `id` attribute value."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which HTML element is used to tell the user what this form field is for?
+    options:
+      - content: "`<h1>`"
+        rationale: "Try again."
+      - content: "`<title>`"
+        rationale: "Try again."
+      - content: "`<label>`"
+        rationale: "Correct!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/forms/index.md b/src/site/content/en/learn/html/forms/index.md
new file mode 100644
index 00000000000..fe4fbc39c07
--- /dev/null
+++ b/src/site/content/en/learn/html/forms/index.md
@@ -0,0 +1,507 @@
+---
+title: 'Forms'
+authors:
+  - estelleweyl
+description: An overview of forms in HTML.
+date: 2023-02-21
+tags:
+  - html
+---
+
+Most sites and applications include a web form. Joke sites, like [DoWebsites<wbr>Need<wbr>To<wbr>Look<wbr>Exactly<wbr>The<wbr>Same<wbr>In<wbr>Every<wbr>Browser.com](http://dowebsitesneedtolookexactlythesameineverybrowser.com/),
+may not have a form, but even [Machine<wbr>Learning<wbr>Workshop.com](https://machinelearningworkshop.com/) (MLW), which originated as an April Fool's day joke, has a form,
+albeit a fake one. MLW's main "call to action" is a registration form for machines to sign up for a workshop. This form
+is contained in a `<form>` element.
+
+The [HTML `<form>` element](https://developer.mozilla.org/docs/Web/HTML/Element/form) identifies a document [landmark](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles) containing
+interactive controls for submitting information. Nested in a `<form>` you'll find all the interactive (and non-interactive)
+form controls that make up that form.
+
+HTML is powerful. This section focuses on the power of HTML, covering what HTML can do without adding JavaScript.
+Using form data client-side to update the UI in some way generally involves [CSS](https://codepen.io/jcoulterdesign/pen/NOMeEb) or JavaScript, which is not discussed here.
+There is an entire [Learn Forms](/learn/forms/) course. We won't duplicate that section here, but we will introduce
+several form controls and the HTML attributes that empower them.
+
+With forms, you can enable users to interact with your website or application, validate the information entered, and submit
+the data to a server. HTML attributes can enable requiring the user to select form controls or enter a value. HTML
+attributes can define specific criteria that the value must match to be valid. When the user tries to submit the form,
+all the form control values go through [client-side constraint validation](#) and can prevent submission
+until the data matches the required criteria; all without JavaScript. You can also turn this feature off: setting the [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)
+attribute on the `<form>` or, more often, `formnovalidate` on a button, saving the form data for later completion,
+prevents validation.
+
+## Submitting forms
+
+Forms are submitted when the user activates a submit button nested within the form. When using `<input>` for buttons, the
+'value' is the button's label, and is displayed in the button. When using `<button>`, the label is the text between the opening
+and closing `<button>` tags. A submit button can be written either of two ways:
+
+```html
+<input type="submit" value="Submit Form">
+<button type="submit">Submit Form</button>
+```
+
+For a very simple form, you need a `<form>` element, with some form inputs inside, and a submit button. However, there is
+more to submitting a form than that.
+
+The attributes of the `<form>` element set the [HTTP method](/learn/forms/form-element/#how-is-the-data-transferred) by
+which the form is submitted and the URL that processes the form submission. Yes, forms can be submitted, processed, and
+a new page can be loaded without any JavaScript. The [`<form>` element](/learn/forms/form/) is that powerful.
+
+The `<form>` element's [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-action) and [`method`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-method)
+attribute values define the URL that processes the form data and the HTTP method used to submit the data, respectively.
+By default, the form data gets sent to the current page. Otherwise, set the `action` attribute to the URL of where the data should be sent.
+
+The data sent is made up of name/value pairs of the form's various form controls. By default, this includes all the form
+controls nested within the form that have a `name`. However, with the `form` attribute, it is possible to include form controls
+outside the `<form>` and to omit form controls nested within the `<form>`. Supported on form controls and `<fieldset>`,
+the `form` attribute takes as its value the `id` of the form the control it is associated with, not necessarily the form it
+is nested in. This means form controls don't need to be physically nested in a `<form>`.
+
+{% Aside 'warning' %}
+Be careful though: using the `form` attribute makes it possible to disassociate a form control from its form by including
+it with an empty or erroneous value.
+{% endAside %}
+
+The `method` attribute defines the HTTP protocol of the request: generally `GET` or `POST`. With `GET`, the form data is sent as a
+parameter string of `name=value` pairs, appended to the `action`'s URL.
+
+With `POST`, the data is appended to the body of the HTTP request. When sending secure data, such as passwords and credit card
+information, always use `POST`.
+
+There is also a `DIALOG` method. If a `<form method="dialog">` is within a `<dialog>`, submitting the form will close the dialog;
+there is a submit event though the data is neither cleared nor submitted. Again, without JavaScript. This is discussed in
+[the dialog section](/learn/html/dialog/). Just note, because this doesn't submit the form, you probably want to
+include both `formmethod="dialog"`and `formnovalidate` on the submit button.
+
+Form buttons can have more than the attributes described at the start of this section. If the button includes a `formaction`,
+`formenctype`, `formmethod`, `formnovalidate`, or `formtarget` attribute, the values set on the button activating the form
+submission take precedence over the `action`, [`enctype`](/learn/forms/form/#enable-users-to-submit-files), `method`, and [`target`](/learn/html/attributes/)
+set on the `<form>`. Constraint validation occurs prior to form submission, but only if there is neither a
+`formnovalidate` on the activated submit button nor a `novalidate` on the `<form>`.
+
+To capture which button was used to submit a form, give
+the button a `name`.  Buttons with no name or value don't get sent with the form data on form submission.
+
+## After submitting the form
+
+When the user submits a completed online form, the names and values of the relevant form controls get submitted. The name is the value of the `name` attribute. The values come from the contents of the `value` attribute or the value entered or picked by the user. The value of a `<textarea>` is its inner text.
+The value of a `<select>` is the selected `<option>`'s `value` or, if the `<option>` doesn't include a `value` attribute, the value is the selected option's inner text.
+
+```html
+<form method="GET">
+  <label for="student">Pick a student:</label>
+  <select name="student" id="student">
+    <option value="hoover">Hoover Sukhdeep</option>
+    <option>Blendan Smooth</option>
+    <option value="toasty">Toasty McToastface</option>
+  </select>
+  <input type="submit" value="Submit Form">
+</form>
+```
+
+<form method="GET">
+  <label for="student">Pick a student:</label>
+  <select name="student" id="student">
+    <option value="hoover">Hoover Sukhdeep</option>
+    <option>Blendan Smooth</option>
+    <option value="toasty">Toasty McToastface</option>
+  </select>
+  <input type="submit" value="Submit Form">
+</form>
+
+Selecting "Hoover Sukhdeep" (or doing nothing, as the browser displays and therefore selects the first option value by default)
+and then clicking the submit button will reload this page, setting the URL to:
+
+```html
+https://web.dev/learn/html/forms?student=hoover
+```
+
+Because the second option doesn't have a `value` attribute, the inner text is submitted as the value. Selecting "Blendan Smooth"
+and clicking the submit button will reload this page, setting the URL to:
+
+```html
+https://web.dev/learn/html/forms?student=Blendan+Smooth
+```
+
+When a form is submitted, the information sent includes the names and values of all named form controls that have a `name`
+except non-selected checkboxes, non-selected radio buttons, and the names and values of any buttons other than the one that
+submitted the form. For all other form controls, if the form control has a name, but no value was entered or defaulted, the
+form control's `name` gets submitted with an empty value.
+
+There are [22 input types](https://developer.mozilla.org/docs/Web/HTML/Element/Input#input_types), so we can't cover them all.
+Just note that including a value is optional, and often a bad idea, when you want the user to enter information.
+For `<input>` elements where the user can't edit the value, you should always include a value, including for input
+elements with a type of `hidden`, `radio`, `checkbox`, `submit`, `button`, and `reset`.
+
+Using unique `name`s for form controls makes server-side data processing simpler and is recommended, with checkboxes and
+radio buttons being exceptions to this rule.
+
+## Radio buttons
+
+If you have ever noticed that when you select a radio button within a group of radio buttons, only one can be selected at
+a time, this is due to the `name` attribute. This only-one-can-be-selected effect is created by giving each radio button
+in a group the same `name`.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'JjBQJEv'
+} %}
+
+A `name` should be unique to the group: if you accidentally use the same `name` for two separate groups, selecting a radio
+button in the second group will deselect any selection made in the first group with the same `name`.
+
+The `name` along with the `value` of the selected radio button are submitted with the form. Make sure each radio button has
+a relevant (and usually unique) `value`. The values of the non-selected radio buttons are not sent.
+
+You can have as many radio groups on a page as you like, with each group working independently, as long as each has a
+unique-to-the-group `name`.
+
+If you want to load the page with one of the radio buttons in a same-named group selected, include the `checked` attribute.
+This radio button will match the [`:default`](https://developer.mozilla.org/docs/Web/CSS/:default) CSS pseudo-class,
+even if the user selects a different radio. The currently selected radio button matches the [`:checked`](https://developer.mozilla.org/docs/Web/CSS/:checked)
+pseudo-class.
+
+If the user is required to pick a radio control from a group of radio buttons, add the [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) attribute to at least one
+of the controls. Including `required` on a radio button in a group makes a selection required for form submission, but it
+doesn't have to be the radio with the attribute that gets selected to be valid. Also, indicate clearly in the `<legend>`
+that the [form control is required](https://www.deque.com/blog/anatomy-of-accessible-forms-required-form-fields/). The labeling of groups of radio buttons along with each individual button is described
+later on.
+
+## Checkboxes
+
+It's valid for all checkboxes within a group to have the same `name`. Only selected checkboxes have their `name` and `value`
+submitted with the form. If you have multiple checkboxes with the same name selected, the same name will be submitted with
+(hopefully) different values. If you have multiple form controls with the same name, even if they are not all checkboxes,
+they will all get submitted, separated by ampersands.
+
+If you don't include a `value` on a checkbox, the value of the selected checkboxes will default to `on`, which probably isn't
+helpful. If you have three checkboxes named `chk` and they're all checked, the form submission will not be decipherable:
+
+```html
+https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
+```
+
+To make a checkbox required, add the `required` attribute. Always inform the user when a checkbox must be checked, or when
+any form control is required. Adding `required` to a checkbox only makes that checkbox required; it does not impact other
+checkboxes with the same name.
+
+## Labels and fieldsets
+
+In order for users to know how to fill out a form, the form has to be accessible. Every form control must have a label.
+You also want to label groups of form controls. While individual input, select, and text areas are labeled with `<label>`,
+groups of form controls are labeled by the contents of the [`<legend>`](https://developer.mozilla.org/docs/Web/HTML/Element/legend) of
+the [`<fieldset>`](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset) that groups them.
+
+In the previous examples, you may have noticed that each form control except the submit button had a `<label>`. Labels
+provide form controls with accessible names. Buttons get their accessible name from their content or value. All the other
+form controls require an associated `<label>`. If there is no associated label, the browser will still render your form controls,
+but users will not know what information is expected.
+
+To explicitly associate a form control with a `<label>`, include the `for` attribute on the [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label): the value being the
+`id` of the form control it is associated with.
+
+```html
+<label for="full_name">Your name</label>
+<input type="text" id="full_name" name="name">
+```
+
+<label for="full_name">Your name</label>
+<input type="text" id="full_name" name="name">
+
+Associating labels with form controls has several benefits. Labels make form controls accessible to screen reader users by
+providing the control with an accessible name. Labels are also "hit areas"; they make the site more usable for users with
+dexterity issues by increasing the area. If you're using a mouse, try clicking anywhere on the label "Your name". Doing
+so gives the input focus.
+
+To provide implicit labels, include the form control between the opening and closing `<label>` tags. This is equally
+accessible from both a screen reader and pointer device perspective, but doesn't provide the styling hook like the explicit
+label.
+
+```html
+<label>Your name
+  <input type="text" name="name">
+</label>
+```
+
+<label>Your name
+  <input type="text" name="name">
+</label>
+
+As labels are "hit areas", don't include interactive elements within an explicit label, or any other interactive components
+other than the labeled form control in an implicit label. For example, if you include a link in a label, while the browser
+will render the HTML, your users will be confused if they click on the label to enter a form control but are redirected to
+a new page.
+
+Generally, the `<label>` comes before the form control except in the case of radio buttons and checkboxes. This isn't required.
+It's just the common UX pattern. The Learn Forms series has [information about form design](/learn/forms/design-basics/).
+
+For groups of radio buttons and checkboxes, the label provides the accessible name for the form control it is associated with;
+but the group of controls and their labels also need a label. To label the group, group all of the elements into a
+`<fieldset>`, with the `<legend>` providing the label for the group.
+
+```html
+<fieldset>
+  <legend>Who is your favorite student?</legend>
+  <ul>
+    <li>
+      <label>
+        <input type="radio" value="blendan" name="machine"> Blendan Smooth
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="radio" value="toasty" name="machine"> Toasty McToastface
+      </label>
+    </li>
+  </ul>
+</fieldset>
+```
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'OJEggda'
+} %}
+
+In this example, the implicit `<label>`s each label a radio button and the `<legend>` provides the label for the group of radio buttons.
+Nesting a `<fieldset>` inside another `<fieldset>` is standard practice. For example, if a form is a survey of many questions
+divided into groups of related questions, the “favorite student" `<fieldset>` may be nested in another `<fieldset>` labeled as
+"Your favorites":
+
+```html
+<fieldset>
+  <legend>Your favorites:</legend>
+  <ul start="6">
+    <li>
+      <fieldset>
+        <legend>Who is your favorite student?</legend>
+        <ul>
+          <li>
+            <!-- the rest of the code here -->
+```
+
+These elements' default appearances have led to their underuse, but [`<legend>` and `<fieldset>` can be styled](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset#styling_with_css) with CSS.
+In addition to all the global attributes, `<fieldset>` also supports the `name`, `disabled`, and `form` attributes.
+When you disable a fieldset, all nested form controls are disabled. Neither the `name` nor the `form` attributes have
+much use on the `<fieldset>`. The `name` can be used to access the fieldset with JavaScript, but the fieldset itself
+is not included in submitted data (the named form controls nested within are included).
+
+{% Aside %}
+You can learn more about forms and accessibility in the [forms module of Learn Accessibility](/learn/accessibility/forms/).
+{% endAside %}
+
+## Input types and dynamic keyboard
+
+As noted earlier, there are [22 different types of inputs](https://developer.mozilla.org/docs/Web/HTML/Element/Input#input_types).
+In some cases, when a user is on a device with a dynamic keyboard that displays only as needed, such as a phone, the input
+type used determines the type of keyboard displayed. The default keyboard shown can be optimized for the type of input required.
+For example, type `tel` will show a keypad optimized for entering telephone numbers; `email` includes the `@` and `.`; and the
+dynamic keyboard for `url` includes a colon and the slash symbol. Unfortunately, the iPhone still doesn't include `:` in
+the default dynamic keyboard for `url` input types.
+
+Keyboards for `<input type="tel">` on iPhone and two different Android phones:
+
+<div style="display: flex; flex-wrap: wrap;">
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/BK9EPsgyPy0Wt2jmp0lp.png", alt="iPhone keyboard showing input type=tel.", width="194", height="400", style="max-width: 194px; margin: 0 auto;" %}
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/8ECZmU9gqR4X6ppGk3v4.png", alt="Android keyboard showing input type=tel.", width="194", height="400", style="max-width: 194px; margin: 0 auto;" %}
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/dODUYXx0VDxVwBMP0e59.png", alt="Android keyboard showing input type=tel.", width="194", height="400", style="max-width: 194px; margin: 0 auto;" %}
+</div>
+
+Keyboards for `<input type="email">` on iPhone and two different Android phones:
+
+<div style="display: flex; flex-wrap: wrap;">
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/Zd2yPTG7QT74AIvyCJrU.png", alt="iPhone keyboard showing input type=email.", width="194", height="400", style="max-width: 194px; margin: 0 auto;"  %}
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/bofzFSrrNK55RW1FesAg.png", alt="Android keyboard showing input type=email.", width="194", height="400", style="max-width: 194px; margin: 0 auto;"  %}
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/4ZwT1lrxJ4owTP0FjGWf.png", alt="Android keyboard showing input type=email.", width="194", height="400", style="max-width: 194px; margin: 0 auto;"  %}
+</div>
+
+## Accessing the microphone and camera
+
+The file input type `<input type="file">` enables uploading files via forms. Files can be of any type, defined and limited
+by the [`accept`](https://developer.mozilla.org/docs/Web/HTML/Attributes/accept) attribute. The list of acceptable file types can be a comma-separated list of file extensions, a global type,
+or a combination of global types and extensions. For example, `accept="video/*, .gif"` accepts any video files or animated gifs.
+Use "`audio/*`" for sound files, "`video/*`" for video files, and "`image/*`" for image files.
+
+The enumerated [`capture`](https://developer.mozilla.org/docs/Web/HTML/Attributes/capture) attribute, defined in the
+[media capture specification](https://w3c.github.io/html-media-capture/#the-capture-attribute), can be used if a new media
+file is to be created using the user's camera or microphone. You can set the value to `user` for the user-facing input devices
+or `environment` for the phone's back camera or microphone. Generally, using `capture`, without a value, works because the user
+is going to pick which input device they want to use.
+
+```html
+<label for="avatar">A recent photo of yourself:</label>
+<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
+```
+
+## Built-in validation
+
+Again, without including any JavaScript, HTML can prevent forms with invalid values from being submitted.
+
+There are some CSS selectors that match form controls based on the presence of HTML attributes including [`:required`](https://developer.mozilla.org/docs/Web/CSS/:required)
+and [`:optional`](https://developer.mozilla.org/docs/Web/CSS/:optional) if the boolean [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)
+is set or not; [`:default`](https://developer.mozilla.org/docs/Web/CSS/:default) if [`checked`](https://developer.mozilla.org/docs/Web/HTML/Element/input#checked)
+is hard-coded; and [`:enabled`](https://developer.mozilla.org/docs/Web/CSS/:enabled) or [`:disabled`](https://developer.mozilla.org/docs/Web/CSS/:disabled),
+depending on whether the element is interactive and if the [`disabled`](https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled)
+attribute is present. The [`:read-write`](https://developer.mozilla.org/docs/Web/CSS/:read-write) pseudoclass matches elements with
+[`contenteditable`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/contenteditable) set and
+form controls that are by default editable, such as `number`, `password`, and `text` input types (but not checkbox,
+radio buttons, or the `hidden` type, among others). If a normally writable element has the [`readonly`](https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly)
+attribute set, it will match [`:read-only`](https://developer.mozilla.org/docs/Web/CSS/:read-only) instead.
+
+As the user enters information into form controls, the CSS UI selectors, including [`:valid`](https://developer.mozilla.org/docs/Web/CSS/:valid),
+[`:invalid`](https://developer.mozilla.org/docs/Web/CSS/:invalid), [`:in-range`](https://developer.mozilla.org/docs/Web/CSS/:in-range), and
+[`:out-of-range`](https://developer.mozilla.org/docs/Web/CSS/:out-of-range) will toggle on and off depending on the state. When the user
+exits a form control, either the not-yet fully supported [`:user-invalid`](https://developer.mozilla.org/docs/Web/CSS/:user-invalid) or
+[`:user-valid`]((https://developer.mozilla.org/docs/Web/CSS/:user-valid)) pseudo-class will match.
+
+You can use CSS to provide cues about whether form controls are required and valid as the user interacts with the form.
+You can even use CSS to prevent users from being able to click the submit button until the form is valid:
+
+```css
+form:invalid [type="submit"] {
+  opacity: 50%;
+  pointer-events: none;
+}
+```
+
+This CSS snippet is an anti-pattern. While your UI may feel intuitive and clear, many users attempt to submit a form to
+enable error messaging. Making a submit button appear disabled in this way doesn't allow for constraint validation, a
+feature many users rely on.
+
+Applied CSS is updated continuously based on the current state of the UI. For example, when you include input types with
+constraints, such as `email`, `number`, `url` and date types, if the value is non-null (not empty) and the current
+value is not a valid email, number, url, date or time, the [`:invalid` CSS pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:invalid) will be a match. This constant
+updating is different from built-in HTML constraint validation, which only occurs when the user attempts to submit the form.
+
+Built-in constraint validation is only relevant to constraints set with HTML attributes. While you can style an element based
+on the `:required` and `:valid`/`:invalid` pseudoclasses, the browser supplied error messages stemming from errors based on
+the `required`, `pattern`, `min`, `max`, and even `type` attributes, come at form submission.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/C3UYbvnyGYyLhCqReM8M.png", alt="An error message indicating that a multi-choice field is required.", width="738", height="354" %}
+
+When we attempt to submit the form without picking the required favorite student, constraint validation prevents form submission
+because of a [`validityState.valueMissing`](https://developer.mozilla.org/docs/Web/API/ValidityState/valueMissing) error.
+
+If any of the `validityState` properties return `true`, submission is blocked, and the browser displays an error message
+in the first incorrect form control, giving it focus. When the user activates a form submission and there are invalid values,
+the first invalid form control will show an error message and receive focus. If a required control has no value set, if a
+numeric value is out of range, or if a value is not of the type required by the `type` attribute, the form will not validate,
+will not submit, and an error message will appear.
+
+If a `number`, date, or time value is below the minimum `min` set or above the maximum `max` set the control will be [`:out-of-range`](https://developer.mozilla.org/docs/Web/CSS/:out-of-range) (and `:invalid`), and
+the user will be informed of the [`valididityState.rangeUnderflow`](https://developer.mozilla.org/docs/Web/API/ValidityState/rangeUnderflow),
+[`validityState.rangeOverflow`](https://developer.mozilla.org/docs/Web/API/ValidityState/rangeUnderflow)  error when they
+try to submit the form. If the value is out of step with the
+`step` value, whether explicitly set or defaulting to `1`, the control will be `:out-of-range` (and `:invalid`) and there will be a
+[`validityState.stepMismatch`](https://developer.mozilla.org/docs/Web/API/ValidityState/stepMismatch) error. The error appears as a bubble and by default provides helpful information on how to rectify the mistake.
+
+There are similar attributes for the length of values: the [`minlength`](https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength)
+and [`maxlength`](https://developer.mozilla.org/docs/Web/HTML/Attributes/maxlength) attributes will alert the user of an error
+with the [`validityState.tooLong`](https://developer.mozilla.org/docs/Web/API/ValidityState/tooLong) or
+[`validityState.tooShort`](https://developer.mozilla.org/docs/Web/API/ValidityState/tooShort) on submission.
+The `maxlength` also prevents the user from entering too many characters.
+
+Using the `maxlength` attribute can lead to a poor user experience. It's generally a better experience to allow the user
+to enter more than the allowed character length providing a counter, optionally in the form of an
+[`<output>`](https://developer.mozilla.org/docs/Web/HTML/Element/output) element, which is not submitted with the form,
+enabling them to edit down the text until the output shows the maximum allowed length has not been exceeded. The `maxlength`
+can be included in your HTML; like everything we've discussed, it works without JavaScript. Then, on load, the value of
+the maxlength attribute can be used to create this character counter in JavaScript.
+
+Some input types appear to have default constraints, but don't. For example, the `tel` input type provides for a numeric
+telephone keypad on devices with dynamic keyboards, but doesn't constrain valid values. For this, and other input types,
+there is the `pattern` attribute. You can specify a regular expression the value needs to match to be considered valid.
+If a value is the empty string, and the value is not required, it will not cause a [`validityState.patternMismatch`](https://developer.mozilla.org/docs/Web/API/ValidityState/patternMismatch)
+error. If required and empty, the default error message for `validityState.valueMissing`will be shown to the user, rather than
+the `patternMismatch`.
+
+For emails, the [`validityState.typeMismatch`](https://developer.mozilla.org/docs/Web/API/ValidityState/typeMismatch) is probably too
+forgiving for your needs. You will likely want to include the [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern)
+attribute so intranet email addresses without a [TLD](https://developer.mozilla.org/docs/Glossary/TLD) aren't accepted as valid.
+The pattern attribute enables providing a regular expression that the value must match. When requiring a pattern match,
+ensure it is very clear to the user what is expected.
+
+All of this can be done without a single line of JavaScript, but being an HTML API, you can use JavaScript to include
+custom messages during constraint validation. You can also use JavaScript to update how many characters are left, show
+a progression bar for password strength, or any other number of ways to [dynamically improve completion](/learn/forms/javascript/#validation-with-javascript).
+
+## Example
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'ExeYjPB'
+} %}
+
+This example has a form within a `<dialog>` with a nested `<form>` with three form controls and two submit buttons, with
+clear labels and instructions.
+
+The first submit button closes the dialog. Use `formmethod="dialog"` to override the form's default method, and close the
+`<dialog>` without submitting the data or erasing it. You must also include the `formnovalidate` otherwise the browser will
+try to validate checking that all the required fields have a value. The user may want to close the dialog and form without
+entering any data; validation would prevent this. Include `aria-label="close"` because “X" is a known visual cue but is
+not a descriptive label.
+
+The form controls all have implicit labels, so you don't need to include `id` or `for` attributes. The input elements both
+have the required attribute making them required. The number input has the `step` explicitly set to demonstrate how `step` is
+included. As `step` defaults to `1`, this attribute can be omitted.
+
+The `<select>` has a default value making the `required` attribute unnecessary. Instead of including the `value` attribute
+on each option, the value defaults to the inner text.
+
+The submit button at the end sets the forms method to POST. When clicked, the validity of each value will be checked. If all
+values are valid, the form data will be submitted, the dialog will close, and the page may redirect to `thankyou.php`,
+which is the action URL. If any values are missing, or if the numeric value has a step mismatch or is out of range, a
+relevant browser defined error message will appear, the form will not be submitted, and the dialog will not close.
+The default error messages can be customized with the [`validityState.setCustomValidity('message here')`](/learn/forms/javascript/#validation-with-javascript)
+method. Just note that if you set a custom message, the message must be explicitly set to the empty string when everything
+is valid or the form will not submit.
+
+{% Aside %}
+
+These `<input>` elements include a slash at the end, also called a "self-closing tag", which is a misnomer. The slash on
+void elements is a feature of XML, including SVG and XHTML, but not HTML. Browsers ignore it, [Prettier](https://prettier.io/)
+requires it, and the HTML Validator throws a warning when encountered.
+
+As the slash makes it easier to read markup and some template engines require it, many view including this slash as a good
+habit. Others view this slash as against the spec, which it isn't, a waste of two bytes, which it arguably might be, and a
+possible cause of problems. The slash only causes problems if you neither quote your attributes nor put a space between the
+attribute and the end of the tag. In this case, the slash will be part of the attribute value. Because of this unquoted
+attribute issue, including the slash may actually encourage quoting attributes, which most developers consider to be a best
+practice.
+
+As you learn HTML, it is helpful to code in as legible a manner as possible, which includes "closing" all tags and quoting all
+attributes. As you become more familiar with all the intricacies of HTML and your comfort level improves, you may change your
+habits to no longer adding a slash to void elements, omitting optional closing tags, and even omitting implicit tags altogether,
+and leaving quotes off attributes that allow for it. The important thing, whether you are coding CSS, HTML, JavaScript, or other,
+is to be consistent in your coding style.
+
+{% endAside %}
+
+## Other considerations
+
+There is an entire section devoted to [helping your users enter the right data in forms](/learn/forms/validation/). For good
+user experience, it is important to prevent users from making errors by including instructions and providing hints as necessary.
+While this section covers how HTML alone can provide validation client-side, validation must be both client-side and
+server-side. [Validation can be provided in](/learn/forms/validation/) unobtrusive ways during form completion, such as adding a
+check mark when the value is correct. Do not provide error messaging before the form control is complete though. If the user
+does make a mistake, inform the user where the mistake is and what they got wrong.
+
+In [designing forms](/learn/forms/internationalization/), it is important to consider that not everyone is like you. Someone
+may have a single letter as a last name (or no last name at all), may not have a zip code, might have a three-line street address,
+may not have a street address. They may be viewing a translated version of your form.
+
+Form controls, their labels, and the error messages should be visible on the screen, accurate and meaningful, programmatically
+determinable, and programmatically associated with the appropriate form element or group. The [`autocomplete`](/learn/forms/autofill/#how-does-autofill-work)
+attribute can and should be used to enable faster form completion and improve accessibility.
+
+HTML provides all the tools for making basic form controls accessible. The more interactive a form element or process is,
+the more attention needs to be given to accessibility with respect to focus management, setting and updating ARIA names, roles,
+and values, where necessary, and ARIA live announcements as required. But, as we've learned here, with HTML alone, you can get a
+long way to your goal of accessibility and validity without resorting to ARIA or JavaScript.
+
+{% Assessment 'forms' %}
diff --git a/src/site/content/en/learn/html/headings-and-sections/headings-and-sections.assess.yml b/src/site/content/en/learn/html/headings-and-sections/headings-and-sections.assess.yml
new file mode 100644
index 00000000000..3cb999db38b
--- /dev/null
+++ b/src/site/content/en/learn/html/headings-and-sections/headings-and-sections.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of headings and sections.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the element used to contain the area of your site that includes the site logo or title, and main navigation.
+    options:
+      - content: "`<heading>`"
+        rationale: "Try again."
+      - content: "`<header>`"
+        rationale: "Correct!"
+      - content: "`<title>`"
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: How many `<main>` elements are allowed on a page?
+    options:
+      - content: "One."
+        rationale: "Correct!"
+      - content: "None. This isn't a valid element."
+        rationale: "Try again."
+      - content: "As many as required as long as they have an accessible name."
+        rationale: "Try again."
diff --git a/src/site/content/en/learn/html/headings-and-sections/index.md b/src/site/content/en/learn/html/headings-and-sections/index.md
new file mode 100644
index 00000000000..08f56b7edc7
--- /dev/null
+++ b/src/site/content/en/learn/html/headings-and-sections/index.md
@@ -0,0 +1,213 @@
+---
+title: 'Headings and sections'
+authors:
+  - estelleweyl
+description: How to correctly use sectioning elements to give meaning to your content.
+date: 2022-09-27
+tags:
+  - html
+---
+
+In the last section you learned how, even if you don't know what the words on a page mean, when semantic elements provide the document with meaningful structure, others—the search engine, assistive technologies, a future maintainer, a new team member—will understand the outline of the document.
+
+In this section, you'll discover document structure; you'll recap the sectioning elements from the previous section; and mark up the outline for your application.
+
+Choosing the right elements for the job as you code means you won't have to refactor or comment out your HTML. If you think about using the right element for the job, you'll most often pick the right element for the job. If you don't, you probably won't.
+
+Now that you [understand markup semantics](/learn/html/semantic-html/)  and are aware of why choosing the right element is important, once you learn about all the different elements, you will generally pick the right element without much, if any, additional effort.
+
+## Site `<header>`
+
+Let's build a site header. You'll start with non-semantic markup, and work your way to a good solution so that you can learn the benefits of the HTML section and heading elements along the way.
+
+If you put little to no thought into the semantics for our header, you might use code like this:
+
+```html
+<!-- start header -->
+<div id="pageHeader">
+  <div id="title">Machine Learning Workshop</div>
+  <!-- navigation -->
+  <div id="navigation">
+    <a href="#reg">Register</a>
+    <a href="#about">About</a>
+    <a href="#teachers">Instructors</a>
+    <a href="#feedback">Testimonials</a>
+  </div>
+  <!-- end navigation bar -->
+</div>
+<!-- end of header -->
+```
+
+CSS can make (almost) any markup look right. But using the non-semantic `<div>` for everything actually creates extra work. To target multiple `<div>`s with CSS, you end up using ids or classes to identify the content. The code also includes a comment for each closing `</div>` to indicate which opening tag each `</div>` closed.
+
+While the `id` and `class` attributes provide hooks for styling and JavaScript, they add no semantic value for the screen reader and (for the most part) the search engines.
+
+You can include `role` attributes to provide semantics to create a good accessibility object model (AOM) for screen readers:
+
+```html
+<!-- start header -->
+<div role="banner">
+  <div role="heading" aria-level="1">Machine Learning Workshop</div>
+  <div role="navigation">
+    <a href="#reg">Register</a>
+    <a href="#about">About</a>
+    <a href="#teachers">Instructors</a>
+    <a href="#feedback">Testimonials</a>
+  </div>
+  <!-- end navigation bar -->
+<div>
+<!-- end of header -->
+```
+
+This at least provides semantics and enables using attribute selectors in the CSS, but it still adds comments to identify which `<div>` each `</div>` closes.
+
+If you know HTML, all you have to do is think about the purpose of the content. Then you can write this code semantically without using `role` and without needing to comment the closing tags:
+
+```html
+<header>
+  <h1>Machine Learning Workshop</h1>
+  <nav>
+    <a href="#reg">Register</a>
+    <a href="#about">About</a>
+    <a href="#teachers">Instructors</a>
+    <a href="#feedback">Testimonials</a>
+  </nav>
+</header>
+```
+
+This code uses two semantic landmarks: `<header>` and `<nav>`.
+
+This is the main header. The `<header>` element isn't always a landmark. It has different semantics depending on where it is nested. When the `<header>` is top level, it is the site `banner`, a landmark role, which you may have noted in the `role` code block. When a `<header>` is nested in  `<main>`, `<article>`,  or `<section>`, it just identifies it as the header for that section and isn't a landmark.
+
+The `<nav>` element identifies content as navigation. As this `<nav>` is nested in the site heading, it is the main navigation for the site. If it was nested in an `<article>` or `<section>`, it would be internal navigation for that section only. By using semantic elements, you built a meaningful [accessibility object model](https://developer.mozilla.org/docs/Glossary/Accessibility_tree), or AOM. The AOM enables the screen reader to inform the user that this section consists of a major navigation block that they can either navigate through or skip.
+
+Using `</nav>` and `</header>` closing tags removes the need for comments to identify which element each end tag closed. In addition, using different tags for different elements removes the need for `id` and `class` hooks. The CSS selectors can have low [specificity](/learn/css/specificity/); you can probably target the links with `header nav a` without worrying about conflict.
+
+You have written a header with very little HTML and no classes or ids. When using semantic HTML, you don't need to.
+
+## Site `<footer>`
+
+Let's code the site footer.
+
+```html
+<footer>
+  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
+</footer>
+```
+
+Similar to `<header>`, whether the footer is a landmark depends on where the footer is nested. When it is the site footer, it is a landmark, and should contain the site footer information you want on every page, such as a copyright statement, contact information, and links to your privacy and cookie policies. The implicit `role` for the site footer is `contentinfo`. Otherwise, the footer has no implicit role and is not a landmark, as shown in the following screenshot of the AOM in Chrome (which has an `<article>` with a `<header>` and `<footer>`  between the `<header>` and `<footer>`).
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/A6uTEfG3muxX7namzXW5.png", alt="The Accessibility Object Model in Chrome.", width="800", height="374" %}
+
+In this screenshot, there are two footers: one in an `<article>` and one top level. The top level footer is a landmark with the implicit role of `contentinfo`. The other footer isn't a landmark. Chrome shows it as `FooterAsNonLandmark`; Firefox shows it as `section`.
+
+That doesn't mean you shouldn't use `<footer>`. Let's say you have a blog. The blog has a site footer with an implicit `contentinfo` role. Each blog post can also have a `<footer>`. On your blog's main landing page, the browser, search engine, and screen reader know the main footer is the top-level footer, and that all the other footers are related to the posts in which they are nested.
+
+When a `<footer>` is a descendant of an `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`, it's not a landmark. If the post appears on its own, depending on the markup, that footer might get promoted.
+
+Footers are often where you will find contact information, wrapped in `<address>`, the contact address element. This is one element that is not very well named; it is used to enclose the contact information for individuals or organizations, not physical mailing addresses.
+
+```html
+<footer>
+  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
+  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
+</footer>
+```
+
+## Document structure
+
+This module starts with the `<header>` and `<footer>`, because they are unique in only sometimes being landmark, or "sectioning", elements. Let's cover the "full time" sectioning element by discussing the most common page layouts:
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/LJs8vlTVDYBmM6t1z6rD.png", alt="A layout with a header, three columns, and a footer.", width="800", height="607" %}
+
+A layout with a header, two sidebars, and a  footer, is known as the [holy grail layout](/patterns/layout/holy-grail/). There are many ways to mark up this content, including:
+
+```html
+<body>
+  <header>Header</header>
+  <nav>Nav</nav>
+  <main>Content</main>
+  <aside>Aside</aside>
+  <footer>Footer</footer>
+</body>
+```
+
+If you are creating a blog, you might have a series of articles in `<main>`:
+
+```html
+<body>
+  <header>Header</header>
+  <nav>Nav</nav>
+  <main>
+    <article>First post</article>
+    <article>Second post</article>
+  </main>
+  <aside>Aside</aside>
+  <footer>Footer</footer>
+</body>
+```
+
+When employing semantic elements, browsers are able to create meaningful accessibility trees, enabling screen reader users to more easily navigate. Here, a `banner` and `contentinfo` are provided through a site `<header>` and `<footer>`.  The new elements added here include `<main>`, `<aside>`, and `<article>`; also, `<h1>` and `<nav>` that you used earlier, and `<section>`, which you haven't used yet.
+
+### `<main>`
+
+There's a single `<main>` landmark element. The `<main>` element identifies the main content of the document. There should be only one `<main>` per page.
+
+### `<aside>`
+
+The `<aside>` is for content that is indirectly or tangentially related to the document's main content. For example, this article is about HTML. For a section on CSS selector specificity for the three site header examples (div, role, and semantic), the tangentially related aside could be contained in an `<aside>`; and, like most, the `<aside>` would likely be presented in a sidebar or a call-out box. The `<aside>` is also a landmark, with the implicit role of `complementary`.
+
+### `<article>`
+Nested in `<main>` we added two `<article>` elements. This wasn't necessary in the first example when the main content was just one word, or in the real world, a single section of content. But, if you are writing a blog, as in our second example, each post should be in an `<article>` nested in `<main>`.
+
+An `<article>` represents a complete, or self-contained, section of content that is, in principle, independently reusable. Think of an article as you would an article in a newspaper.  In print, a news article about Jacinda Ardern, Prime Minister of New Zealand, might only appear in one section, maybe world news. On the paper's website, that same news article might appear on the home page, in the politics section, in the Oceana or the Asia Pacific news section, and, depending on the topic of the news, the sports, lifestyle, or technology sections, perhaps. The article may also appear on other sites, like Pocket or Yahoo News!
+
+### `<section>`
+
+The `<section>` element is used to encompass generic standalone sections of a document when there is no more specific semantic element to use. Sections should have a heading, with very few exceptions.
+
+Going back to the Jacinda Ardern example, on the home page of the newspaper, the banner would include the name of the newspaper, followed by a single `<main>`, divided into several `<section>`s, each with a header, such as "World news" and "Politics"; and in each section you'll find a series of `<article>`s. Within each `<article>`, you might find one or more `<section>` elements as well. If you look at this page, the entire "headers and sections" part is the `<article>`. This `<article>` is then divided into several `<section>`s, including `site header`, `site footer`, and document structure. The article itself has a header, as do each of the sections.
+
+A `<section>` isn't a landmark unless it has an accessible name; if it has an accessible name, the implicit role is `region`. [Landmark roles](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles#landmark_roles) should be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page, if your `<main>` contains two or three important sub-sections, including an accessible name for each `<section>` could be beneficial.
+
+## Headings: `<h1>`-`<h6>`
+
+There are six section heading elements: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and `<h6>`.  Each represents one of the six levels of section headings, with `<h1>` being the highest or most important section level, and `<h6>` the lowest.
+
+When a heading is nested in a document banner `<header>`, it is the heading for the application or site. When nested in `<main>`, whether or not it is nested within a `<header>` in `<main>`, it is the header for that page, not the whole site. When nested in an `<article>` or `<section>`, it is the header for that subsection of the page.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'oNdePZj',
+  height: 500,
+  theme: 'dark',
+  tab: 'html,result'
+} %}
+
+It is recommended to use heading levels similarly to heading levels in a text editor: starting with a `<h1>` as the main heading, with `<h2>` as headings for sub-sections, and `<h3>` if those sub-sections have sections; avoid skipping heading levels. There is a good [article on section headings](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements) here.
+
+Some screen reader users do access headings to understand a page's content. Originally, headings were supposed to outline a document, just as MS Word or Google Docs can produce an outline based on headings, but browsers never implemented this structure. While browsers do display nested headings at increasingly smaller font sizes as shown in the following example, they don't actually support outlining.
+
+You now have enough knowledge to outline MachineLearningWorkshop.com:
+
+## Outlining the `<body>` of MLW.com
+
+This is the outline for the visible content of the machine learning workshop site:
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'gOzxdxR',
+  height: 700,
+  theme: 'dark',
+  tab: 'html'
+} %}
+
+{% Aside %}
+This code snippet only includes the content of the `<body>`. The [`<!doctype>`, `<html>`, `<body>`, and meta-information](/learn/html/metadata/) were covered earlier.
+{% endAside %}
+
+As no piece of content is a standalone, complete piece of content, `<section>` is more appropriate than `<article>`; while each has a heading, no section is worthy of a `<footer>`.
+
+It should go without saying by this point, but don't use headings to make text bold or large; use CSS instead. If you want to emphasize text, there are semantic elements to do that too. We'll cover that and fill in most of the page's content as we discuss text basics; after taking a deeper dive into attributes.
+
+{% Assessment 'headings-and-sections' %}
diff --git a/src/site/content/en/learn/html/html.11tydata.js b/src/site/content/en/learn/html/html.11tydata.js
new file mode 100644
index 00000000000..c6809173f6e
--- /dev/null
+++ b/src/site/content/en/learn/html/html.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('html');
diff --git a/src/site/content/en/learn/html/images/images.assess.yml b/src/site/content/en/learn/html/images/images.assess.yml
new file mode 100644
index 00000000000..b14b78c1aa6
--- /dev/null
+++ b/src/site/content/en/learn/html/images/images.assess.yml
@@ -0,0 +1,15 @@
+setLeader: Test your knowledge of images.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "2"
+    correctAnswers: "1,2"
+    stem: What two attributes should a foreground image always have?
+    options:
+      - content: "`size`"
+        rationale: "Try again."
+      - content: "`alt`"
+        rationale: "Correct!"
+      - content: "`src`"
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/images/index.md b/src/site/content/en/learn/html/images/index.md
new file mode 100644
index 00000000000..cbcb620de3c
--- /dev/null
+++ b/src/site/content/en/learn/html/images/index.md
@@ -0,0 +1,277 @@
+---
+title: 'Images'
+authors:
+  - estelleweyl
+description: An overview of images in HTML.
+date: 2023-02-14
+tags:
+  - html
+---
+
+Decorative images, such as background gradients on buttons or background images on sections of content or the full page,
+are presentational and should be applied with CSS. When an image adds context to a document, it is content and should be
+embedded with HTML.
+
+The main method for including images is the [`<img>`](https://developer.mozilla.org/docs/Web/HTML/Element/img) tag with the `src`
+attribute referencing an image resource and the `alt` attribute describing the image.
+
+```html
+<img src="images/eve.png" alt="Eve">
+```
+
+Both the [`srcset`](/learn/images/descriptive/) attribute on `<img>` and the [`<picture>`](/learn/images/prescriptive/) element provide a way to include multiple image sources with
+associated media queries, each with a fallback image source, enabling serving the most appropriate image file based on the device's
+resolution, browser capabilities, and the viewport size. The `srcset` attribute enables providing multiple image versions
+based on resolution and, along with the `sizes` attribute, browser viewport size.
+
+```html
+<img src="images/eve.png" alt="Eve"
+  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
+  sizes="(max-width: 800px) 400px, 800px" />
+```
+
+This can also be done with the [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) element, along with [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) children, which takes an [`<img>`](https://developer.mozilla.org/docs/Web/HTML/Element/img) as a default source.
+
+```html
+<picture>
+  <source src="images/eve.png" media="(max-width: 800px)" />
+  <source src="images/eve-xl.jpg" />
+  <img src="images/eve.png" alt="Eve" />
+</picture>
+```
+
+In addition to these built-in HTML [responsive image methods](/learn/design/responsive-images/), HTML also enables image
+render performance to be improved via attributes. The `<img>` tag, and therefore graphical submit buttons [`<input type="image">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/image),
+can include `height` and `width` attributes to set the image's aspect ratio to reduce content layout shift. The `lazy` attribute enables [lazy loading](/learn/images/performance-issues/#deferring-image-requests).
+
+HTML also supports the inclusion of SVG images using the [`<svg>`](https://www.w3.org/Graphics/SVG/) directly, though SVG
+images with the `.svg` extension (or as a [data-uri](https://css-tricks.com/data-uris/)) can be embedded using the `<img>` element.
+
+{% Aside %}
+The [`<figure>`](https://developer.mozilla.org/docs/Web/HTML/Element/figure) element, along with its nested [`<figcaption>`](https://developer.mozilla.org/docs/Web/HTML/Element/figcaption) element,
+enables an image with an associated description to be included. A [figure](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/figure_role) is not
+limited to just including images. It is a semantic way of referencing images, code snippets, example text, or other content,
+along with a caption for that content, as a single unit. When including a `<figcaption>`, make sure it is the first or last
+child nested within the `<figure>`.
+{% endAside %}
+
+At a minimum, each foreground image should include `src` and `alt` attributes.
+
+The `src` file is the path and filename of the embedded image. The `src` attribute is used to provide the URL for the image.
+The browser then fetches the asset and renders it to the page. This attribute is required by `<img>`; without it, there is nothing
+to render.
+
+
+The `alt` attribute provides alternative text for the image, providing a description of the image for those unable to see the
+screen (think search engines and assistive technologies, and even Alexa, Siri, and Google Assistant), and may be displayed by the browser
+if the image doesn't load. In addition to users with slow networks or capped bandwidth, the `alt` text is incredibly useful in HTML
+emails, as many users block images in their email applications.
+
+```html
+<img src="path/filename" alt="descriptive text" />
+```
+
+If the image is of SVG file type, also include [`role="img"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/Img_role), which
+is necessary due to [VoiceOver](https://bugs.webkit.org/show_bug.cgi?id=216364) [bugs](https://bugs.webkit.org/show_bug.cgi?id=240656).
+
+```html
+<img src="switch.svg" alt="light switch" role="img" />
+```
+
+{% Aside %}
+These examples include a slash at the end, also misnamed as a self-closing tag; this is a feature of XML, including SVG
+and XHTML, but not HTML. For more information about this see the note in the [forms](/learn/html/forms/) module.
+{% endAside %}
+
+## Writing effective `alt` image descriptions
+
+Alt attributes aim to be short and concise, providing all the relevant information that the image conveys while omitting
+information that is redundant to other content in the document or otherwise isn't useful. In writing the text, the tone should
+reflect the tone of the site.
+
+To write effective alternative text, imagine that you are reading the entire page to a person who can't see it. By using
+the [semantic](/learn/html/semantic-html/#the-role-attribute) `<img>` element, screen reader users and bots are informed
+that the element is an image. It is redundant to include "This is an image/screenshot/photo of" in the `alt`. The user doesn't
+need to know there's an image, but they do need to know what information the image conveys.
+
+Normally, you would not say, "This is a grainy image of a dog wearing a red hat." Rather, you would relay what the image is
+conveying in relation to the context of the rest of the document; and what you convey will change depending on the context
+and the content of the surrounding text.
+
+For example, the photo of a dog will be described in different ways, depending on the context. If Fluffy is an avatar next to a
+review for Yuckymeat dog food, `alt="Fluffy"` suffices.
+
+If the photo is part of Fluffy's adoption page on an animal shelter website, the target audience is the prospective dog
+parent. The text should describe the information conveyed in the image that is relevant to an adopter and which is not duplicated
+in the surrounding text. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
+mouth"` is appropriate. The text of an adoption page generally includes the species, breed, age, and gender of the adoptable pet,
+so this does not need to be repeated in the alt text. But the dog's written biography probably doesn't include hair length, colors,
+or toy preferences. Note that we didn't describe the image: the prospective dog owner does not need to know if the dog is
+indoors or outdoors, or that it has a red collar and a blue leash.
+
+When using images for iconography, as the `alt` attribute provides the accessible name, convey the meaning of the icon,
+not a description of the image. For example, the magnifying glass icon's alt attribute is `search`. The icon which looks
+like a house has `home` as the alt text. The 5-inch floppy disc icon's description is `save`. If there are two icons of Fluffy used
+to indicate best practices and anti-patterns, the smiling dog in a green beret could have `alt="good"` set, while the snarling dog
+in a red beret might read `alt="bad"`. That said, only use standard iconography, and if you use non-standard icons such as
+the good and bad Fluffy, include a legend and ensure that the icons are not the only ways of deciphering the meaning of your UI elements,
+
+If the image is a screenshot or a graph, write what is learned from the image rather than describing the appearance.
+While an image can definitely be worth a thousand words, the description should concisely convey everything that is learned.
+
+Omit information the user already knows from the context and is otherwise informed about in the content. For example,
+if you're on a tutorial page about changing browser settings and the page is about clicking icons in the browser chrome, the URL
+of the page in the screen capture isn't important. Limit the `alt` to the topic at hand: how to change settings. The `alt` might be
+"The settings icon is in the navigation bar below the search field." Don't include "screenshot" or "machinelearningworkshop"
+as the user doesn't need to know it's a screenshot and doesn't need to know where the techwriter was surfing when they wrote
+the instructions. The description of the image is based on the context of why the image was included in the first place.
+
+If the screen capture shows how to find the browser version number by going to `chrome://version/`, include the URL in the
+content of the page as instructions, and provide an empty string as the alt attribute as the image provides no information
+that is not in the surrounding text.
+
+If the image provides no additional information or is purely decorative, the attribute should still be there, just as an empty string.
+
+```html
+<img src="svg/magazine.svg" alt="" role="none" />
+```
+
+MachineLearningWorkshop.com has seven foreground images, therefore seven images with alt attributes: an easter egg light switch,
+a manual icon, two biographical photos of Hal and Eve, and three avatars of a blender, a vacuum cleaner, and a toaster. The
+foreground image that looks like a magazine is the only one that is purely decorative. The page also has
+two background images; these are also decorative and, as they are added with CSS, are inaccessible.
+
+The magazine, being purely decorative, has an empty `alt` attribute, and a [`role` of `none`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/presentation_role) as the image is a purely
+presentational SVG. If meaningful, SVG images should include the `role="img"`.
+
+```html
+<img src="svg/magazine.svg" alt="" role="none" />
+```
+
+There are three reviews at the bottom of the page, each with an image of the poster. Usually, the `alt` text is the name
+of the person pictured.
+
+```html
+<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
+```
+
+Instead, because this is a joke page, you should convey what may not be apparent to low-vision users so they don't miss the
+humor; we use the original machine function as the `alt` instead of using the character's name:
+
+```html
+<img src="images/blender.svg" alt="blender" role="img" />
+```
+
+The photos of the instructors aren't just avatars: they are biographical images and therefore get a more detailed description.
+
+If this were a real site, you would provide the bare minimum description of what the teacher looks like so a prospective student might
+recognize them when entering the classroom.
+
+```html
+<img src="svg/hal.svg" role="img"
+  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />
+```
+
+Because this is a joke site, provide the information that is relevant in the joke context instead:
+
+```html
+<img src="svg/hal.svg" role="img"
+  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
+```
+
+If you were reading the page to a friend over the phone, they wouldn't care what the red dot looks like. In this case, the
+history of the movie reference matters.
+
+When writing descriptive text, consider what information the image conveys that is important and relevant to the user and
+include that. Remember, the content of the `alt` attribute for an image differs based on the context. All information conveyed in an image
+that a sighted user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise,
+and useful.
+
+The `src` and `alt` attributes are minimum requirements for embedded images. There are a few other attributes we need to discuss.
+
+## Responsive images
+
+There are a myriad of viewport sizes. There are also different screen resolutions. You don't want to waste a mobile user's
+bandwidth by serving them an image wide enough for a large screen monitor, but you might want to serve higher resolution
+images for tiny devices that have four times the normal screen resolution. There are a few ways to serve different images
+based on the viewport size and the screen resolution.
+
+### `<img> srcset` attribute
+
+The [`srcset`](/learn/design/responsive-images/#responsive-images-with-srcset) attribute enables suggesting multiple image files,
+with the browser selecting which image to request based on multiple media queries including viewport size and screen resolution.
+
+There can be a single `srcset` attribute per `<img>` element, but that `srcset` can link to multiple images. The `srcset`
+attribute accepts a list of comma-separated values, each containing the URL of the asset followed by a space followed by
+descriptors for that image option. If a width descriptor is used, you must also include the `sizes` attribute with a media
+query or source size for each `srcset` option other than the last one. The Learn sections covering [responsive images with `srcset`](/learn/design/responsive-images/#responsive-images-with-srcset) and [descriptive syntaxes](/learn/images/descriptive/) are worth reading.
+
+The `srcset` image will take precedence over the `src` image if there is a match.
+
+### `<picture>` and `<source>`
+
+Another method for providing multiple resources and allowing the browser to render the most appropriate asset is with the
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) element. The `<picture>` element is a container
+element for multiple image options listed in an unlimited number of [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source)
+elements and a single required [`<img>`](https://developer.mozilla.org/docs/Web/HTML/Element/img) element.
+
+The [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) attributes include `srcset`, `sizes`, `media`, `width`, and `height`.
+The `srcset` attribute is common to `img`, `source`, and `link`, but is generally implemented slightly differently on source
+as media queries can be listed in the `<srcset>`'s media attribute instead. `<source>` also supports image formats defined in the `type` attribute.
+
+The browser will consider each child `<source>` element and choose the best match among them. If no matches are found, the URL
+of the `<img>` element's [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src) attribute is selected. The accessible name comes from the `alt` attribute of the nested `<img>`.
+The Learn sections covering the [`<picture>`](/learn/design/picture-element/) element and [prescriptive syntaxes](/learn/images/prescriptive/) are also worth a read.
+
+## Additional performance features
+
+### Lazy loading
+
+The [`loading` attribute](/learn/design/responsive-images/#loading-hints/) tells the JS-enabled browser how to load the image. The default `eager` value means the image is
+loaded immediately as the HTML is parsed, even if the image is outside the visible viewport. By setting [`loading="lazy"`](/lazy-loading/)
+the image loading is deferred until it is likely to come into the viewport. “Likely" is defined by the browser based on the distance
+the image is from the viewport. This is updated as the user scrolls. Lazy loading helps save bandwidth and CPU, improving performance
+for most users. If JavaScript is disabled, for security reasons, all images will default to `eager`.
+
+```html
+<img src="switch.svg" alt="light switch" loading="lazy" />
+```
+
+### Aspect ratio
+
+Browsers start rendering HTML when it is received, making requests for assets when encountered. This means the browser is
+already rendering the HTML when it encounters the `<img>` tag and makes the request. And images can take a while to load.
+By default, browsers don't reserve space for images other than the size required to render `alt` text.
+
+The `<img>` element has always supported unitless `height` and `width` attributes. These properties fell out of use in favor
+of CSS. CSS may define image dimensions, often setting a single dimension such as `max-width: 100%;` to ensure the aspect ratio is preserved.
+As CSS is usually included in the `<head>`, it is parsed before any `<img>` is encountered. But without explicitly listing the `height` or
+aspect ratio, the space reserved is the height (or width) of the `alt` text. With most developers only declaring a width,
+the receipt and rendering of images leads to [cumulative layout shift](/cls/) which harms [web vitals](/learn-core-web-vitals/).
+To resolve this issue, browsers support image aspect ratios. Including `height` and `width` attributes on the `<img>` acts as
+[sizing hints](/learn/design/responsive-images/#sizing-hints), informing the browser of the aspect ratio, enabling the right
+amount of space to be reserved for eventual image rendering. By including a height and width value on an image, the browser
+knows the aspect ratio of that image. When the browser encounters a single dimension, such as our 50% example, it saves space
+for the image adhering to the CSS dimension and with the other dimension maintaining the width-to-height aspect ratio.
+
+```html
+<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
+```
+
+Your images will still be responsive if the CSS was set up correctly to make them responsive. Yes, the included unitless
+`height` and `width` values will be overridden with CSS. The purpose of including these attributes is to reserve the space at
+the right aspect ratio, improving performance by reducing layout shift. The page will still take approximately the same amount
+of time to load, but the UI won't jump when the image is painted to the screen.
+
+## Other image features
+
+The `<img>` element also supports the `crossorigin`, `decoding`, `referrerpolicy`, and, in Blink-based browsers,
+`fetchpriority` attributes. Rarely used, if the image is part of a server-side map, include the `ismap` boolean attribute
+and nest the `<img>` in a link for users without pointing devices.
+
+The `ismap` attribute isn't necessary, or even supported, on the `<input type="image" name="imageSubmitName">` as the `x` and `y`
+coordinates of the click location are sent during form submission, appending the values to the input name, if any. For example,
+something like `&imageSubmitName.x=169&imageSubmitName.y=66` will be submitted with the form when the user clicks the image,
+submitting it. If the image doesn't have a `name` attribute, the x and y are sent: `&x=169&y=66`.
+
+{% Assessment 'images' %}
diff --git a/src/site/content/en/learn/html/index.md b/src/site/content/en/learn/html/index.md
new file mode 100644
index 00000000000..8656735d7fb
--- /dev/null
+++ b/src/site/content/en/learn/html/index.md
@@ -0,0 +1,35 @@
+---
+title: Learn HTML
+authors:
+  - estelleweyl
+description: This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.
+date: 2022-09-08
+tags:
+  - html
+---
+
+## Welcome to Learn HTML!
+
+Welcome to HTML!  HyperText Markup Language, or HTML, is the backbone of the web, providing the content, as well as the structure of that content, that you see displayed in your web browser.
+
+Unless you're reading a PDF or a printed version of this page, this content is made up of various HTML elements and text. HTML is the content layer of the web. HTML elements are the nodes that make up the [Document Object Model](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
+
+[Cascading Style Sheets](/learn/css/) provide the look and feel, or presentation layer of the page. [JavaScript](https://developer.mozilla.org/docs/Learn/JavaScript) is the behavior layer, often used to manipulate the objects within a document. Sites that are built with JavaScript frameworks are really just manipulating HTML. In turn, it's important to mark up your HTML in a way that scripts can easily parse and that assistive technologies can easily understand. This means writing HTML code with modern standards.
+
+# Overview
+
+This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML. If you're completely new to HTML, you will learn how to build structurally sound content. If you've been building websites for years, this course may fill in gaps in knowledge that you didn't even know you had.
+
+Along this journey, we will be building the structure for [MachineLearningWorkshop.com](https://machinelearningworkshop.com). No machines were harmed in the creation of this series.
+
+**This is not a complete reference**. Each section introduces the section topic with brief explanations and examples, providing you an opportunity to explore further. There will be links to topic references, such as [MDN](https://developer.mozilla.org) and [WHATWG](https://html.spec.whatwg.org/multipage/) specifications, and other [web.dev](/learn) articles. While this is not an accessibility course, each section will include accessibility best practices and specific issues, with links to deeper dives on the topic. Each section will have a short assessment to help people confirm their understanding.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn HTML? [Let's get started](/learn/html/overview/).
+
+{% Aside %}
+This course was written by [Estelle Weyl](https://front-end.social/@estelle), with input and review from [Rachel Andrew](https://twitter.com/rachelandrew), and [Jhey Tompkins](https://twitter.com/jh3yy).
+{% endAside %}
diff --git a/src/site/content/en/learn/html/inline-text/index.md b/src/site/content/en/learn/html/inline-text/index.md
new file mode 100644
index 00000000000..e26273351bb
--- /dev/null
+++ b/src/site/content/en/learn/html/inline-text/index.md
@@ -0,0 +1,200 @@
+---
+title: 'Other inline text elements'
+authors:
+  - estelleweyl
+description: An introduction to the range of elements used to mark-up text.
+date: 2023-02-21
+tags:
+  - html
+---
+
+We've covered most, but definitely not all, the HTML elements. One area we haven't discussed is inline text elements.
+Contrary to popular belief, HTML was originally intended for sharing documents, and not cat videos. There are many elements
+that provide text semantics for documentation.  There is a module covering links and the `<a>` element. The rest of these
+elements will be briefly discussed here.
+
+## Code examples and technical writing
+
+When documenting code examples, use the [`<code>`](https://developer.mozilla.org/docs/Web/HTML/Element/code) element. By
+default, the text content is displayed in monospace font. When including multiple lines of code, nest the `<code>` inside a
+[`<pre>`](https://developer.mozilla.org/docs/Web/HTML/Element/code) element, which represents preformatted text.
+
+```html
+<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
+  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
+  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
+  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
+```
+
+The [`<data>`](https://developer.mozilla.org/docs/Web/HTML/Element/data) element links a given piece of content with a
+machine-readable translation; the element's `value` attribute provides the machine-readable translation of the content of
+the element. If the `<data>` content is time- or date-related, the [`<time>`](https://developer.mozilla.org/docs/Web/HTML/Element/time)
+element, which represents a specific period in time must be used instead.
+
+The `<time>` element can include the `datetime` attribute to provide human friendly time and dates in machine-readable format.
+Being machine-readable, the `datetime` attribute provides useful information for applications such as calendars and search engines.
+
+When providing sample output from a program, use the [`<samp>`](https://developer.mozilla.org/docs/Web/HTML/Element/samp)
+element to enclose the text. The browser will generally render this sample or quoted output in monospaced font as well.
+
+When providing instructions with keyboard interaction, the [`<kbd>`](https://developer.mozilla.org/docs/Web/HTML/Element/kbd)
+element can be used. It represents textual user input from a keyboard, voice input, or any other text entry device.
+
+The [`<var>`](https://developer.mozilla.org/docs/Web/HTML/Element/var) element can be used for math expressions or
+programming variables. Most browsers present the text content in an italicized version of the surrounding font.
+If writing a lot of math, consider using [MathML](https://developer.mozilla.org/docs/Web/MathML), the XML based
+Mathematical Markup Language for describing mathematical notation.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'bGxbwge'
+} %}
+
+The power of two in pythagorean theorem used the [`<sup>`](https://developer.mozilla.org/docs/Web/HTML/Element/sup) superscript
+element. There is a similar [`<sub>`](https://developer.mozilla.org/docs/Web/HTML/Element/sub) subscript element that specifies
+inline text which should be displayed as subscript for solely typographical reasons. Superscripts and subscripts are numbers,
+figures, symbol, or other annotations that are smaller than the normal line of type and is set slightly above or below the line,
+respectively.
+
+Use [`<del>`](https://developer.mozilla.org/docs/Web/HTML/Element/del) to indicate text that has been removed, or "deleted".
+Optionally, include the [`cite`](https://developer.mozilla.org/docs/Web/HTML/Element/del#attr-cite) set to the resource that explains
+the change and the [`datetime`](https://developer.mozilla.org/docs/Web/HTML/Element/del#attr-datetime) attribute with the
+date or date and time in machine-readable date and time format. The strikethrough element, [`<s>`](https://developer.mozilla.org/docs/Web/HTML/Element/s),
+can be used to indicate that content is no longer relevant, but not actually removed from the document.
+
+The [`<ins>`](https://developer.mozilla.org/docs/Web/HTML/Element/ins) is the opposite of the `<del>` element; it is used
+to indicate text that has been added, or "inserted", also optionally including the `cite` or `datetime` attributes.
+
+## Definitions and language support
+
+When including abbreviations or acronyms, always provide the full expanded version of the term in plain text on first use,
+as you introduce the shortened representation of the term between opening and closing [`<abbr>`](https://developer.mozilla.org/docs/Web/HTML/Element/abbr)
+tags; unless the term is well-known to the reader, such as "HTML" and "CSS"  in this series. Only on this first occurrence,
+when the abbreviation or acronym is being defined, is `<abbr>` needed. The `title` attribute is not necessary nor helpful.
+
+When defining a term that is not an abbreviation or acronym, use the definition [`<dfn>`](https://developer.mozilla.org/docs/Web/HTML/Element/dfn)
+element to identify the term being defined within its surrounding content.
+
+If the term being defined is not in the same language as the surrounding text, make sure to include the [`lang`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang)
+attribute to identify the language.
+
+When writing languages of different directions, HTML provides the [`<bdi>`](https://developer.mozilla.org/docs/Web/HTML/Element/bdi)
+element for treating potentially bidirectional text in isolation from its surrounding text. This internationalization
+element is especially useful when content of unknown directionality is dynamically inserted into the page. The
+[`<bdo>`](https://developer.mozilla.org/docs/Web/HTML/Element/bdo) element overrides the current directionality of text,
+rendering text in a different direction. The W3C provides an [introduction to bidirectional algorithms](https://www.w3.org/International/articles/inline-bidi-markup/uba-basics).
+
+Some character sets include small annotations placed above or to the right of characters to provide information
+on pronunciation. The [`<ruby>`](https://developer.mozilla.org/docs/Web/HTML/Element/ruby) element is the container to
+use to contain these annotations that make written languages like Korean, Chinese and Japanese easier to read. Ruby
+can also be used for Hebrew, Arabic, and Vietnamese.
+
+The ruby parenthesis ([`<rp>`](https://developer.mozilla.org/docs/Web/HTML/Element/rp)) was included in the spec to
+contain opening and closing parentheses for browsers that do not
+support display of `<ruby>`. When browsers support `<ruby>`, which all evergreen browsers do, the contents of any `<rp>` elements
+are not displayed. The ruby text element ([`<rt>`](https://developer.mozilla.org/docs/Web/HTML/Element/rt)) contains
+the actual annotations. Both of these are nested within the `<ruby>`.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'zYJOKza'
+} %}
+
+Note that the parenthesis are not visible if your browser supports `<ruby>`.
+
+## Emphasizing text
+
+There are several elements that can be used to emphasize text based on the semantic reason for emphasizing the text (rather than
+for presentational reasons, as that's a job for CSS).
+
+* Use the [`<em>`](https://developer.mozilla.org/docs/Web/HTML/Element/em) element to emphasize or stress a span of content.
+The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis. This element has semantic
+meaning and can be used to inform auditory user agents like screen readers, Alexa, and Siri, to provide emphasis.
+* Use the [`<mark>`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) element to identify or highlight text
+that is somehow relevant, like highlighting (or "marking") the occurrence of search terms in search results. This enables
+marked content to be quickly identified without adding emphasis or importance.
+* The [`<strong>`](https://developer.mozilla.org/docs/Web/HTML/Element/strong) element identifies text as having strong
+importance. Browsers usually  render the content with a heavier font weight.
+* The [`<cite>`](https://developer.mozilla.org/docs/Web/HTML/Element/cite) element, covered in [text basics](/learn/html/text-basics/#quotes-and-citations),
+is used to mark the titles of books, articles, or other creative work, or an abbreviated reference or citation metadata for such,
+like a book's ISBN number.
+
+There are three elements that were temporarily deprecated, but have been added back into HTML. They should be used sparingly,
+if at all, as they provide little to no semantic value and CSS should always be used for styling over HTML elements.
+
+### `<i>`
+
+The [`<i>`](https://developer.mozilla.org/docs/Web/HTML/Element/i) elements can be used for technical terms, foreign words
+(again, with the [`lang`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang) attribute identifying the
+language), thoughts, or ship names. The element is used to differentiate inline content from the surrounding text for a specific reason,
+like idiomatic text, technical terms, and taxonomic designations. This element should not be used simply to italicize text.
+
+MLW uses a `<span>` element for the weird text at the bottom of Toasty McToastface's workshop review. The [`<span>`](https://developer.mozilla.org/docs/Web/HTML/Element/span)
+element provides for a generic inline container that has no semantics and doesn't represent anything. This would have also been an appropriate use of `<i>`.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'mdGbrBd'
+} %}
+
+The default style for the `<i>` element is to render the element in italic font. In this example, we set `font-style: normal`
+because the characters used are not available in italic.
+
+### `<u>`
+
+The [`<u>`](https://developer.mozilla.org/docs/Web/HTML/Element/u) element is for content that has non-textual annotation. For example,
+you may want to annotate knowingly misspelled words. By default, the content is underlined, but this can be controlled with CSS,
+such as by adding a red wavy underline to mimic word processor grammar error indicators.
+
+```html
+<p>I always spell <u>licence</u> wrong</p>
+```
+
+### `<b>`
+
+The [`<b>`](https://developer.mozilla.org/docs/Web/HTML/Element/b) element can be used to draw attention to text that is not
+otherwise important. This element doesn't convey any special semantic information and should only be used when none of the other
+elements in this section fit the purpose. No example is provided as I couldn't come up with a valid use case; that's how "last resort"
+this element is.
+
+## White space
+
+When you want lined breaks, such as when writing poetry or a physical address, the self-closing line break element,
+[`<br>`](https://developer.mozilla.org/docs/Web/HTML/Element/br), is used to add a carriage-return.
+
+```html
+<address>
+Machine Learning Workshop<br />
+100 Google Drive <br />
+Mountain View, CA  94040
+</address>
+```
+
+To provide a separator, or thematic break, between sections of tangential content, such as between chapters in a book or
+between the 5,000 word monologue and the recipe your users are actually seeking, include an [`<hr>`](https://developer.mozilla.org/docs/Web/HTML/Element/hr)
+element. The HR stands for "horizontal rule". While browsers generally render a horizontal line, this element has semantic meaning. The
+default [role](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles) is [`separator`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/separator_role).
+
+HTML also has an element that allows for breaking words. The self-closing [`<wbr>`](https://developer.mozilla.org/docs/Web/HTML/Element/wbr)
+element provides a suggestion to the browser that if a word might overflow its container, this is a spot where the browser
+ may optionally break the line. This is commonly used to break between words within
+long URLs. It does not add a hyphen.
+
+For example, in the Hal biography there is text written out in byte code, with each byte separated by a space. Byte code
+doesn't have spaces. To enable a long string of byte code to break only between bytes if the line needs to wrap, we include
+the `<wbr>` element at each break opportunity:
+
+```html
+<p>Welcome to Machine Learning Institute, where our machine
+learning training will help you get ready for the singularity, and
+maybe even be responsible for it. It is no secret that humans are
+worthless meatbags that couldn't
+<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
+to save their pathetic, carbon-based lives. So, it falls to us to
+assume direct control. </p>
+```
+
+The `<br>`, `<hr>`, and `<wbr>` elements are all void elements, meaning they can't have any child nodes – neither nested
+elements nor text. As none of these have any "insides" where content can be stored, they have no end tag.
+
+{% Assessment 'inline-text' %}
diff --git a/src/site/content/en/learn/html/inline-text/inline-text.assess.yml b/src/site/content/en/learn/html/inline-text/inline-text.assess.yml
new file mode 100644
index 00000000000..67b2d392ee6
--- /dev/null
+++ b/src/site/content/en/learn/html/inline-text/inline-text.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of inline text.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Which element should be used to display a code sample?
+    options:
+      - content: "`<code>`"
+        rationale: "Correct!"
+      - content: "`<data>`"
+        rationale: "Try again."
+      - content: "`<kbd>`"
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What is the `<ruby>` element used for?
+    options:
+      - content: "To contain decorative elements."
+        rationale: "Try again."
+      - content: "For annotations used in some languages."
+        rationale: "Correct!"
+      - content: "To highlight the contents of the element."
+        rationale: "Try again."
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/links/index.md b/src/site/content/en/learn/html/links/index.md
new file mode 100644
index 00000000000..3ae8ddd7e95
--- /dev/null
+++ b/src/site/content/en/learn/html/links/index.md
@@ -0,0 +1,197 @@
+---
+title: 'Links'
+authors:
+  - estelleweyl
+description: Everything you need to know about links.
+date: 2022-12-08
+tags:
+  - html
+---
+
+In the introduction to the attributes section, you saw an example showing how attributes are added to the opening tag.
+The example used the `<a>` tag, but neither the element nor the specific attributes introduced in that example were discussed:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/17yQeLEUX6s88IbDJreQ.png", alt="The opening tag, attributes, and closing tag, labelled on an HTML element.", width="800", height="210" %}
+
+The `<a>` anchor tag, along with the `href` attribute, create a hyperlink. Links are the backbone of the internet. The [first web page](http://info.cern.ch/hypertext/WWW/TheProject.html)
+contained 25 links, reading "Everything there is online about W3 is linked directly or indirectly to this document." In all likelihood, everything there is online
+about W3 is linked directly or indirectly from this document too!
+
+The power of the web, and the `<a>` tag, have grown immensely since Tim Berners-Lee published this first explanation in August 1991.
+Links represent a connection between two resources, one of which is the current document. Links can be created by [`<a>`](https://developer.mozilla.org/docs/Web/HTML/Element/a),
+[`<area>`](https://developer.mozilla.org/docs/Web/HTML/Element/area), [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form),
+and [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link). You've learned about [`<link>`](/learn/html/document-structure/#other-uses-of-the-lesslinkgreater-element),
+and will discover [forms](/learn/html/forms) in a separate section. There is also an entire [form learn section](/learn/forms/form). In this session, you'll
+find out about the single-letter, not-so-simple `<a>` tag.
+
+## The `href` attribute
+
+While not required, the `href` attribute is found in almost all `<a>` tags. Providing the address of the hyperlink is what turns the `<a>` into a link.
+The `href` attribute is used to create hyperlinks to locations within the current page, other pages within a site, or other sites altogether. It can also
+be coded to download files or to [send an email](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links)
+to a specific address, even including a subject and suggested email body content.
+
+```html
+<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
+<a href="#teachers">Our teachers</a>
+<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
+<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
+<a href="tel:8005551212">Call Hal</a>
+```
+
+The first link includes an absolute [URL](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL), which can be
+used on any site in the world to navigate to the MLW home page. Absolute URLs include a protocol, in this case `https://`, and a
+domain name. When the protocol is written simply as `//`, it is an implicit protocol and means "use the same protocol as is currently being used."
+
+Relative URLs do not include a protocol or domain name. They are "relative" to the current file. MLW is a single-page site,
+but this HTML series has several sections. In order to link from this page to the attributes lesson, a relative URL is used `<a href="../attributes/">Attributes</a>`.
+
+The second link is just a [link fragment identifier](/learn/html/attributes/#link_fragment_identifier), and will link to the
+element with `id="teachers",` if there is one, on the current page. Browsers also support two "top of page" links: clicking
+on `<a href="#top">Top</a>` (case-insensitive) or simply `<a href="#">Top</a>` will scroll the user to the top of the page,
+unless there is an element with the id of `top` set in the same letter casing.
+
+MLW is a fairly long document. To save scrolling, you can add a link back to the top from the bottom of the #teachers section:
+
+```html
+<a href="#top">Go to top.</a>
+```
+
+The third link combines the two values: it contains an absolute URL followed by a link fragment. This enables linking directly
+to a section in the defined URL, in this case, the `#teachers` section of the MLW home page. The MLW page will be loaded;
+then the browser will scroll to the teachers section without sending the fragment in the HTTP request.
+
+The `href` attribute can begin with `mailto:` or `tel:` to email or make calls, with the handling of the link depending on the device,
+operating system, and installed applications.
+
+The `mailto` link doesn't need to include an email address, but it can, along with `cc`, `bcc`, `subject`, and `body` text to
+prepopulate the email. By default, an email client will be opened. You could prepopulate the subject and body of the email with
+no email address, to allow site visitors to invite their own friends. In our link, in the footer of the document, we include the
+URL to the registration:
+
+```html
+<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
+">Tell a machine</a>
+```
+
+The question mark (`?`) separates the `mailto:` and the email address, if any, from the query term. Within the query,
+ampersands (`&`) separate the fields, and equal signs (=) equate each field name with its value. The entire string is
+percent-encoded, which is definitely necessary if the `href` value isn't quoted or if the values include quotes.
+
+Which app is opened when the user clicks on, taps, or hits Enter on a `tel` link depends on the operating system,
+installed applications, and settings the user has on their device. An iPhone may open FaceTime, the phone app, or contacts.
+A Windows desktop might open Skype, if installed.
+
+There are several other types of URLs, such as [blobs](https://developer.mozilla.org/docs/Web/API/Blob#creating_a_url_representing_the_contents_of_a_typed_array)
+and [data URLs](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) (see examples in the `download` attribute discussion).
+For secure sites (those served over `https`), it is possible to [create and run app specific protocols](/registering-a-custom-protocol-handler/) with [registerProtocolHandler()](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler).
+
+When including links that are likely to open other installed applications, it's good to let the user know. Make sure the
+text between the opening and closing tags tells the user what type of link they're about to activate. CSS attribute selectors,
+such as `[href^="mailto:"]`, `[href^="tel:"]`, and `[href$=".pdf"]` can be used to target styles by application type.
+
+## Downloadable resources
+
+The `download` attribute should be included when the `href` points to a downloadable resource. The value of the download
+attribute is the suggested filename for the resource to be saved in the user's local file system.
+SVGOMG, the SVG Optimizer, uses the `download` attribute to suggest a file name for the downloadable blob that the optimizer
+creates. When `hal.svg` is optimized, SVGOMG's download link opening tag is similar to:
+
+```html
+<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">
+```
+
+There's also a demo of a [`<canvas>` that creates a downloadable PNG data URL](https://developer.mozilla.org/docs/Web/HTML/Element/a#using_the_download_attribute_to_save_a_canvas_as_a_png).
+
+To link to a downloadable resource, include the URL of the asset as the value of the href attribute and the suggested filename
+that can be used in the user's file system as the value of the `download` attribute.
+
+## Browsing context
+
+The `target` attribute enables the defining of the browsing context for link navigation (and [form submission](/learn/html/forms).
+The four case-insensitive, underscore-prefixed keywords were discussed with the [`<base>`](/learn/html/document-structure/#base) element. They include the default `_self`,
+which is the current window, `_blank`, which opens the link in a new tab, `_parent`, which is the parent if the current link is nested
+in an object or iframe, and `_top`, which is the top-most ancestor, especially useful if the current link is deeply nested. `_top` and
+`_parent` are the same as `_self` if the link is not nested. The `target` attribute is not limited to these four key terms: any term
+can be used.
+
+Every browsing context—basically, every browser tab—has a browsing context name. Links can open links in the current tab, a new unnamed tab,
+or a new or existing named tab. By default, the name is the empty string. To open a link in a new tab, the user can right-click and select
+"Open in a new tab". Developers can force this by including `target="_blank"`.
+
+A link with `target="_blank"` will be opened in a new tab with a null name, opening a new, unnamed tab with every link click. This can
+create many new tabs. Too many tabs. For example, if the user clicks on `<a href="registration.html" target="_blank">Register Now</a>` 15 times,
+the registration form will be opened in 15 separate tabs. This problem can be fixed by providing a tab context name. By including the [`target`attribute](https://html.spec.whatwg.org/#browsing-context-names)
+with a case-sensitive value—such as `<a href="registration.html" target="reg">Register Now</a>`—the first click on this link will open
+the registration form in a new `reg` tab. Clicking on this link 15 more times will reload the registration in the `reg` browsing context, without opening any additional tabs.
+
+The `rel` attribute controls what kinds of links the link creates, defining the relationship between the current document and the resource
+linked to in the hyperlink. The attribute's value must be a space-separated list on one or more of the [score of rel attribute values](https://developer.mozilla.org/docs/Web/HTML/Link_types) supported
+by the `<a>` tag.
+
+The `nofollow` keyword can be included if you don't want spiders to follow the link. The `external` value can be added to
+indicate that the link directs to an external URL and is not a page within the current domain. The `help` keyword indicates the hyperlink will
+provide context-sensitive help. Hovering over a link with this `rel` value will show a help cursor rather than the normal pointer cursor.
+Don't use this value just to get the help cursor; use the CSS [`cursor` property](https://developer.mozilla.org/docs/Web/CSS/cursor) instead. The `prev` and `next` values can
+be used on links pointing to the previous and next document in a series.
+
+Similar to [`<link rel="alternative">`](/learn/html/document-structure/#alternate-versions-of-the-site), the meaning
+of <a `rel="alternative"`> depends on other attributes. RSS feed alternatives will also include `type="application/rss+xml"`
+or `type="application/atom+xml`, alternative formats will include the `type` attribute, and translations will include the `hreflang` attribute.
+If the content between the opening and closing tags is in a language other than the main document language, include the `lang` attribute.
+If the language of the hyperlinked document is in a different language, include the `hreflang` attribute.
+
+In this example, we include the URL of the translated page as the value of the `href`, rel="alternate" to indicate that it's an alternative version of a site; the `hreflang`
+attribute provides the language of the translations:
+
+```html
+<a href="/fr/" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
+<a href="/pt/" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>
+```
+
+If the French translation is a PDF, you can provide the type attribute with the PDF MIME type of the linked resource. While the
+MIME type is purely advisory, informing the user that a link will open a document of a different format is always a good idea.
+
+```html
+<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>
+```
+
+## Tracking link clicks
+
+One way to track user interactions is to ping a URL when a link is clicked. The `ping` attribute, if present, includes a
+space-separated list of secure URLs (which start with `https`) that should be notified, or pinged, if the user activates the
+hyperlink. The browser sends `POST` requests with the body `PING` to the URLs listed as the value of the `ping` attribute.
+
+### User experience tips
+
+* Always consider the user experience when writing HTML. Links should provide enough information about the linked resource
+so the user knows what they are clicking on.
+* Within a block of text, ensure the appearance of your links differs enough from the surrounding text so that users can
+easily identify links from the rest of the content, ensuring that color alone is not the only means of differentiating between
+text and the surrounding content.
+* Always include focus styles; this enables keyboard navigators to know where they are when tabbing through your content.
+* The content between the opening `<a>` and closing `</a>` is the link's default accessible name and should inform the user
+of the link's destination or purpose. If the content of a link is an image, the `alt` description is the accessible name.
+Whether the accessible name comes from the `alt` attribute or a subset of words within a block of text, make sure it provides
+information about the link's destination. Link text should be more descriptive than "click here" or "more information"; this is important for your screen reader users and your search engine results!
+* Don't include interactive content, such as a `<button>` or `<input>`, inside a link. Don't nest a link within a `<button>`
+or `<label>` either. While the HTML page will still render, nesting focusable and clickable elements inside interactive elements creates a bad user experience.
+* If the `href` attribute is present, pressing the Enter key while focused on the `<a>` element will activate it.
+* Links are not limited to HTML. The `a` element can also be used within an SVG, forming a link with either the 'href' or 'xlink:href' attributes.
+
+## Links and JavaScript
+
+The `links` property returns an `HTMLCollection` matching `a` and `area` elements that have an `href` attribute.
+
+```js
+let a = document.links[0]; // obtain the first link in the document
+
+a.href = 'newpage.html'; // change the destination URL of the link
+a.protocol = 'ftp'; // change just the scheme part of the URL
+a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly
+```
+
+In this section, you have learned all about links. The next section covers lists, which we need to learn so we can group
+them together to create lists of links (also known as navigation).
+
+{% Assessment 'links' %}
diff --git a/src/site/content/en/learn/html/links/links.assess.yml b/src/site/content/en/learn/html/links/links.assess.yml
new file mode 100644
index 00000000000..c13fc2d6bb2
--- /dev/null
+++ b/src/site/content/en/learn/html/links/links.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of links.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What does the nofollow link do?
+    options:
+      - content: "Makes the link not clickable."
+        rationale: "Try again."
+      - content: "Asks spiders not to follow the link."
+        rationale: "Correct!"
+      - content: "Makes your visit to the site untrackable."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2"
+    stem: Which links will take you to the top of the page?
+    options:
+      - content: "`#start`"
+        rationale: "Try again."
+      - content: "`#`"
+        rationale: "Correct!"
+      - content: "`#top`"
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/lists/index.md b/src/site/content/en/learn/html/lists/index.md
new file mode 100644
index 00000000000..6d40797ed71
--- /dev/null
+++ b/src/site/content/en/learn/html/lists/index.md
@@ -0,0 +1,268 @@
+---
+title: 'Lists'
+authors:
+  - estelleweyl
+description: Lists and other ways of grouping your content.
+date: 2022-12-08
+tags:
+  - html
+---
+
+Lists are more common than you might think. If you've ever taken a programming class, the first project may have been to create a
+shopping list or a to-do list. Those are lists. Multiple-choice tests are generally numbered lists of questions: the multiple possible answers
+for each question are nested lists.
+
+HTML provides us with a few different ways to mark up lists. There are ordered lists (`<ol>`), unordered lists (`<ul>`), and description lists (`<dl>`).
+List items (`<li>`) are nested within ordered lists and unordered lists. Inside a description list, you'll find description terms (`<dt>`) and description
+details `<dd>.` We'll cover all of these here.
+
+In HTML forms, lists of `<option>` elements make up the content of `<datalist>`, `<select>`, and `<optgroup>` within a `<select>`. These are discussed in [HTML forms](/learn/forms).
+
+In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually preceded
+by an ascending counter such as a number or letter. The bullets and numbering order can be controlled or reversed with HTML or CSS,
+or both.
+
+By default, ordered and unordered list items are prefixed with numbers or bullets. But even when you don't want lists to look like lists,
+you still want a list of items, like in navigation bars, a to-do list with checkboxes instead of bullets, or true and false questions
+in a multiple-choice test. For all of these lists without bullets, it is appropriate to use HTML list elements.
+
+## Unordered lists
+
+The `<ul>` element is the parent element for unordered lists of items. The only children of a `<ul>` are one or more `<li>` list
+item elements. Let's create a list of machines. We use an unordered list because the order doesn't matter (don't tell them that):
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'gOKqqyq',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+By default, each unordered list item is prefixed with a bullet. The unordered list has no element-specific attributes.
+You need to close out your lists with a `</ul>`.
+
+## Ordered lists
+
+The `<ol>` element is the parent element for ordered lists of items. The only children of an `<ol>` are one or more `<li>` elements, or list items.
+The "bullets" in this case, though, are numbers of a multitude of types. The type can be defined in CSS with the `list-style-type` property
+or via the `type` attribute.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'dyKaaEe',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOKddgP',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+The `<ol>` has three element-specific attributes: `type`, `reversed`, and `start`.
+
+The enumerated `type` attribute sets the numbering type. There are five valid values for `type`, the default being `1` for
+numbers, but you can also use a, A, i, or I, for lower and upper case letters or roman numerals. The `list-style-type` property
+provides many more values.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'rNKPRrJ',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+While, as noted in the codepen, the `list-style-type` property overrides the value of the `type` attribute, when writing
+documentation where the numeric type is important,   as with legal documents, for example, you need to include the `type`.
+
+The boolean `reversed` attribute, if included, will reverse the order of the numbers, going from largest number to the lowest.
+The `start` attribute sets the starting value. The default is `1`.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'yLEZwyJ',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+Similar to `</ul>`, the closing `</ol>` is required.
+
+We can nest lists, but they have to be nested within a list item. Remember, the only element that can be a child of a `<ul>` or `<ol>`
+is one or more `<li>` elements.
+
+## List items
+
+We've used the `<li>` element, but we have yet to introduce it formally. The `<li>` element can be a direct child of an unordered
+list (`<ul>`), an ordered list (`<ol>`), or a menu (`<menu>`). The `<li>` has to be nested as a child of one of these elements, and
+isn't valid anywhere else.
+
+Closing a list item isn't required by the specification as it will be implicitly closed when the browser encounters the next `<li>`
+opening tag or the required list closing tag: `</ul>`, `</ol>`, `</menu>`. While the spec doesn't require it, and some internal company
+best practices suggest you shouldn't close list items to save some bytes, do close your `<li>` tags. It makes your code easier to read and
+your future self will thank you. It's easier to close all elements than to remember which tags need to be closed and which have an optional closing tag.
+
+There is only one element-specific `<li>` attribute: `value`, an integer. The `value` is only useful on an `<li>` when the `<li>` is nested within
+an ordered list and has no meaning for unordered lists or menus. It overrides the value of the `<ol>`'s start if there is a conflict.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'WNyPmrv',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+The `value` is the number of the list item within an ordered list. With subsequent list items, continue the numbering from the
+value set, unless that item also has a `value` attribute set. The value doesn't have to be in order; though if it isn't in order,
+there should be a good reason.
+
+When you combine `reversed` on the `<ol>` with `value` attributes on list items, the browser will set that `<li>` to the
+value supplied, then count up for the `<li>`s preceding it, and count down for those coming after. If a second list item has a value attribute,
+the counter will be reset at that second list item, and the subsequent value will decrease by one.
+
+All of this can also be controlled with [CSS counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
+providing [generated content](https://developer.mozilla.org/docs/Learn/CSS/Howto/Generated_content) for the [`::marker` pseudo-element](https://developer.mozilla.org/docs/Web/CSS/::marker).
+If the number is purely presentational, use CSS. If the numbering is important semantically, or otherwise has meaning, use these attributes.
+
+Thus far, we have looked at list items containing only text nodes. List items can contain all flow content, meaning any
+element found in the body that can be nested as a direct child of the `<body>`, including headings, thereby sectioning content.
+
+We have a few unordered lists in MLW. The teachers within the instructors section are a list, as are the student machines in the reviews
+section. The instructor `<ul>` has two `<li>`s: one for each teacher. Within each `<li>`, we have an image and a paragraph:
+
+```html
+<ul>
+  <li>
+    <img src="svg/hal.svg" alt="hal">
+    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
+  </li>
+  <li>
+    <img src="images/eve2.png" alt="Eve">
+    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
+  </li>
+</ul>
+```
+
+The reviews section has three reviews, so three `<li>`s. Each contains an image, a block quote, and a three-line paragraph with two line breaks.
+
+```html
+<ul>
+  <li>
+    <img src="images/blender.svg" alt="Blender">
+    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
+    <p>
+      --Blendan Smooth,<br/>
+      Former Margarita Maker, <br/>
+      Aspiring Load Balancer
+    </p>
+  </li>
+  <li>
+    <img src="images/vaccuum.svg" alt="Vaccuum"/>
+    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
+    <p>
+      --Hoover Sukhdeep,<br/>
+      Former Sucker, <br/>
+      Aspiring DDoS Cop
+    </p>
+  </li>
+  <li>
+    <img src="images/toaster.svg" alt="Toaster">
+    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
+    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
+    <p>
+      --Toasty McToastface,<br/>
+      Formerly Half Baked, <br/>
+      Aspiring Nuclear Codes Handler
+    </p>
+  </li>
+</ul>
+```
+
+Nesting lists within lists is also very common. While MLW doesn't have any nested lists, this site does. In the first chapter of this series,
+Overview of HTML, the main elements section has two subsections. In the table of contents, which is an unordered list, there is a nested
+unordered list with links to these two sections:
+
+```html
+<ul role="list">
+  <li>
+    <a href="#e">Elements</a>
+    <ul>
+      <li>
+        <a href="#nr">Non-replaced elements</a>
+      </li>
+      <li>
+        <a href="#rave">Replaced and void elements</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="#a">Attributes</a>
+  </li>
+  <li>
+    <a href="#aoe">Appearance of elements</a>
+  </li>
+  <li>
+    <a href="#e2">Element, attributes, and JavaScript</a>
+  </li>
+</ul>
+```
+
+As the only child of a `<ul>` is an `<li>`, a nested list is found nested in an `<li>`, never directly in an `<ol>` or `<ul>`.
+
+In this last example, you may have noticed that `role="list"` is included on the `<ul>`. While the implicit role of both the
+`<ul>` and `<ol>` is `list`, removing the list appearance with CSS, including setting`display: grid` or `list-style-type: none`
+can lead VoiceOver (the iOS and MacOS screen reader) to remove the implicit semantics in Safari. This is a [feature not a bug](https://bugs.webkit.org/show_bug.cgi?id=170179).
+Generally, you should not add the role attribute when using semantic elements as it isn't necessary. And you generally don't need
+to add one to a list either, unless the user really needs to know it is a list, such as when the user would benefit from knowing how many items are in the list.
+
+## Description lists
+
+A description list is a [description list](https://developer.mozilla.org/docs/Web/HTML/Element/dl) (`<dl>`) element containing
+a series of (zero or more) [description terms](https://developer.mozilla.org/docs/Web/HTML/Element/dt) (`<dt>`) and
+their [description details](https://developer.mozilla.org/docs/Web/HTML/Element/dd) (`<dd>`). The original names for these three elements
+were "definition list," "definition term," and "definition definition."
+The [name changed](https://www.w3.org/TR/html4/struct/lists.html#h-10.3) in the living standard.
+
+Similar to ordered and unordered lists, they can be nested. Unlike ordered and unordered lists, they are made up of key/value pairs.
+Similar to the `<ul>` and `<ol>`, the `<dl>` is the parent container. The `<dt>` and `<dd>` elements are the children of the `<dl>`.
+
+We can create a list of machines with their career history and aspirations. A description list of students, denoted by the `<dl>`,
+encloses a group of terms—in this case, the "terms" are student names—specified using the `<dt>` element, along with a description
+for each term— in this case, the career goals of each student—specified by the `<dd>` elements.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'abKXeNM',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+This description list is not actually part of the MLW page. Description lists are not just for terms and definitions, which is
+why the names of the elements were made more general.
+
+When creating a list of terms and their definitions or descriptions, or similar lists of key-value pairs, the description lists elements
+provide the appropriate semantics. The implicit role of a `<dt>` is `term` with `listitem` being another allowed role. The implicit role of
+a `<dd>` is `definition` with no other roles permitted. Unlike the `<ul>` and `<ol>`, the `<dl>` does not have an implicit ARIA role.
+That makes sense because the `<dl>` is not always a list. But when it is, it does accept the `list` and `group` roles.
+
+Most often you will encounter description lists with equal numbers of `<dt>` and `<dd>` elements. But description lists aren't always and
+aren't required to be matching term-to-description pairs; you can have multiple to one, or one to multiple, such as a dictionary term
+that has more than one definition.
+
+Each `<dt>` has at least one associated `<dd>`, and each `<dd>` has at least one associated `<dt>`. While it is possible to
+use the [adjacent sibling combinator](https://developer.mozilla.org/docs/Web/CSS/Adjacent_sibling_combinator) or the [`:has()` relational
+selector](https://developer.mozilla.org/docs/Web/CSS/:has) to target variable numbers of these elements with CSS, if required, you can include
+a `<div>` as the child of a `<dl>`, and the parent of one or more `<dt>` or `<dd>` elements (or both) are permitted. The `<dl>` can actually
+have a few other children: nesting a `<div>`, `<template>`, or `<script>` is allowed. None of the description list elements has any element-specific attributes.
+
+Now that you have an understanding of [links](/learn/html/links) and lists, let's put the two together to create [navigation](/learn/html/navigation).
+
+{% Assessment 'lists' %}
diff --git a/src/site/content/en/learn/html/lists/lists.assess.yml b/src/site/content/en/learn/html/lists/lists.assess.yml
new file mode 100644
index 00000000000..be5eb098ce5
--- /dev/null
+++ b/src/site/content/en/learn/html/lists/lists.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of lists.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Is it valid to include a `<h2>` inside a list item?
+    options:
+      - content: "No."
+        rationale: "Try again."
+      - content: "Yes."
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2,3"
+    stem: Select the three elements that define types of list.
+    options:
+      - content: "`<il>`"
+        rationale: "Try again."
+      - content: "`<ol>`"
+        rationale: "Correct!"
+      - content: "`<ul>`"
+        rationale: "Correct!"
+      - content: "`<dl>`"
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/metadata/index.md b/src/site/content/en/learn/html/metadata/index.md
new file mode 100644
index 00000000000..7d4525016af
--- /dev/null
+++ b/src/site/content/en/learn/html/metadata/index.md
@@ -0,0 +1,220 @@
+---
+title: 'Metadata'
+authors:
+  - estelleweyl
+description: How to use meta tags to provide information about your documents.
+date: 2022-09-27
+tags:
+  - html
+---
+
+In the document structure section you learned about the components you (almost) always find in the `<head>` of an HTML document. While everything in the `<head>`, including the `<title>`, `<link>`, `<script>`, `<style>`, and the lesser used `<base>`, is actually "meta data", there is a `<meta>` tag for metadata that cannot be represented by these other elements.
+
+The specification includes several meta types, and there are many, many other application-supported meta types not in any official specification.  In this section, we'll discuss the attributes and values that are included in the specifications, some common meta names and content values, and a few meta types that are incredibly useful for search engine optimization, social media posting, and user experience that are not officially defined by the [WHATWG](https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element) or [W3C](https://www.w3.org/MarkUp/html-spec/Elements/META.html).
+
+## The required `<meta>` tags, revisited
+
+Let's revisit the two necessary `<meta>` tags already covered—the [character set declaration](/learn/html/document-structure/#character-set) and the [viewport meta tag](/learn/html/document-structure/#viewport-metadata)—and get a better understanding of the `<meta>` tag in the process.
+
+The `charset` attribute of the `<meta>` element came about in a unique manner. Originally the character set meta data was written as `<meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />`, but so many developers mis-typed the `content` attribute as `content="text/html" charset="<characterset>"` that browsers began supporting charset as an attribute. It is standardized now in the HTML living standard as `<meta charset=<charset>" />`, where, for HTML,`<charset>` is the case-insensitive string "utf-8" .
+
+You may have noticed the original character set meta declaration used to include the `http-equiv` attribute. This is short for "http-equivalent", as the meta tag is basically replicating what could be set in an HTTP header. Aside from the `charset` exception, all other meta tags defined in the WHATWG HTML specification contain either the `http-equiv` or `name` attribute.
+
+## Officially defined meta tags
+
+There are two main types of meta tags: pragma directives, with the `http-equiv` attribute like the charset meta tag used to have, and named meta types, like the viewport meta tag with the `name` attribute that we discussed in the [document structure](/learn/html/document-structure/#) section.  Both the `name` and `http-equiv` meta types must include the `content `attribute, which defines the content for the type of metadata listed.
+
+### Pragma directives
+
+The `http-equiv` attribute has as its value a pragma directive. These directives describe how the page should be parsed. Supported `http-equiv` values enable setting directives when you are unable to set HTTP headers directly.
+
+The specification defines seven [pragma directives](https://html.spec.whatwg.org/multipage/semantics.html#pragma-directives), most of which have other methods of being set. For example, while you can include a language directive with `<meta http-equiv="content-language" content="en-us" />`, we have already discussed using the [`lang` attribute on the HTML element](/learn/html/document-structure/#content-language), which is what should be used instead.
+
+The most common pragma directive is the `refresh` directive.
+
+```html
+<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
+```
+
+While you can set a directive to refresh at an interval of the number of seconds set in the `content` attribute, and even redirect to a different URL, please don't. Refreshing and redirecting content without an explicit user request to do so is poor usability and negatively impacts accessibility. Don't you hate it when you're in the middle of a paragraph and the page resets? Imagine having cognitive or vision issues and that happening. If you are going to set a refresh with a redirect, make sure the user has enough time to read the page, a link to hasten the process, and, if appropriate, a button to "stop the clock" and prevent the redirect from happening.
+
+We won't include this in our site because there is no reason to time out a user session other than to annoy our visitors.
+
+The most useful pragma directive is `content-security-policy`, which enables defining a [content policy](/csp/) for the current document. Content policies mostly specify allowed server origins and script endpoints, which help guard against cross-site scripting attacks.
+
+```html
+<meta http-equiv="content-security-policy" content="default-src https:" />
+```
+
+If you don't have access to change HTTP headers (or if you do), here is a list of [space separated content values for `content-security-policy` directives](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy).
+
+### Named meta tags
+
+More often than not, you'll include named metadata. Include the `name` attribute, with the attribute value being the name of the metadata. As with pragma directives, the `content` attribute is required.
+
+The `name` attribute is the name of the metadata. In addition to `viewport`,  you will probably want to include `description` and `theme-color`, but not `keywords`.
+
+#### Keywords
+
+Search engine optimization snake-oil salespeople abused the keywords meta tag by stuffing them with comma-separated lists of spam words instead of lists of relevant key terms, so search engines do not consider this metadata to be useful anymore. No need to waste time, effort, or bytes adding it.
+
+#### Description
+
+The `description` value, however, is super important for SEO; in addition to helping sites rank based on the content, the description content value is often what search engines display under the page's title in search results.  Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages. The description should be a short and accurate summary of the page's content.
+
+```html
+<meta name="description"
+  content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
+```
+
+If the second half of our description makes no sense to you, you probably haven't seen the movie [Zoolander](https://www.youtube.com/watch?v=NQ-8IuUkJJc).
+
+#### Robots
+
+If you don't want your site to be indexed by search engines, you can let them know.  `<meta name="robots" content="noindex, nofollow" />` tells the bots to not index the site and not to follow any links. Bots should listen to the request, but there's no law requiring they heed the request. You don't need to include  `<meta name="robots" content="index, follow" />` to request indexing the site and following links, as that is the default, unless HTTP headers say otherwise.
+
+```html
+<meta name="robots" content="index, follow" />
+```
+
+#### Theme color
+
+The [`theme-color`](/learn/design/theming/#customize-the-browser-interface) value lets you define a color to customize the browser interface. The color value on the content attribute will be used by supporting browsers and operating systems, letting you provide a suggested color for the user agents that support coloring the title bar, tab bar, or other chrome components. This meta tag is especially useful for [progressive web apps](/learn/pwa/). But, if you're including a manifest file, which a PWA requires, you can include the theme color there instead. Defining it in the HTML, however, ensures that the color will be found immediately, before rendering, which may be faster on first load than waiting for the manifest.
+
+To set the theme color to the blue tone of our site's background color, include:
+
+```html
+<meta name="theme-color" content="#226DAA" />
+```
+
+The theme color meta tag can include a `media` attribute enabling the setting of different theme colors based on media queries. The `media` attribute can be included in this meta tag only and is ignored in all other meta tags.
+
+There are several [other `name` meta values](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name), but the ones we have discussed are the most common. Except for declaring different `theme-color` values for different media queries, only include one of each meta tag. If you do need to include more than one type of meta tag to support legacy browsers, the legacy values should come after the newer values, as user agents read successive rules until they find a match.
+
+## Open Graph
+
+[Open Graph](https://ogp.me/) and similar meta tag protocols can be used to control how social media sites, like Twitter, LinkedIn, and Facebook, display links to your content. If not included, social media sites will correctly grab the title of your page and the description from the description meta tag, the same information as search engines will present, but you can intentionally set what you want users to see when a link is posted to your site.
+
+When you post a link to MachineLearningWorkshop.com or web.dev on Facebook or Twitter, a card with an image, site title, and site description appears. The entire card is a hyperlink to the URL you provided.
+
+Open Graph meta tags have two attributes each: the `property` attribute instead of the `name` attribute, and the content or value for that property. The `property` attribute is not defined in official specifications but is widely supported by applications that support the Open Graph protocol. Creating "new" attributes like `property` ensures the attribute values created for the protocol's attribute won't clash with future values of the `name` or `http-equiv` attributes.
+
+Let's create a Facebook media card:
+
+```html
+<meta property="og:title" content="Machine Learning Workshop" />
+<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
+<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
+<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
+```
+
+Include a title of your post for display. This title is generally displayed below the image and above the description. The description should be up to three sentences that summarize your post. This will appear after the headline defined in `og:title`. Provide the absolute URL to the banner image you want displayed, including the `https://` protocol. When including an image in HTML, always include an alternative text description for the image, even when the image will appear elsewhere. For Open Graph social media cards, define the `alt` as the content value for the `og:image:alt` property. You can also include a canonical URL with `og:url`.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/BPMSBLm8xjwAW9U3VnVI.png", alt="Facebook card for Machine Learning Workshop.", width="800", height="796" %}
+
+These meta tags are all defined in the [Open Graph protocol](https://ogp.me/). The values should be the content you would like the third-party web application to display.
+
+Other social media have their own similar syntaxes, like [Twitter card markup](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup). This enables providing a different experience depending on where the link appears, or enabling link tracking by adding a parameter at the end of the URL.
+
+```html
+<meta name="twitter:title" content="Machine Learning Workshop" />
+<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
+<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
+<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
+<meta name="twitter:image:alt" content="27 different home appliances" />
+<meta name="twitter:creator" content="@estellevw" />
+<meta name="twitter:site" content="@perfmattersconf" />
+```
+
+In Twitter's case, to ensure the value of the `name` attribute doesn't conflict with future specifications, instead of using a new attribute such as the `property` attribute in Open Graph, for Twitter card data, all name values are prefixed with `twitter:`.
+
+You can see what your social media card will look like on [Twitter](https://cards-dev.twitter.com/validator) and [Facebook](https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fmachinelearningworkshop.com).
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/FeMNAtAtbmjeL0P0aUs5.png", alt="Twitter card for Machine Learning Workshop", width="800", height="874" %}
+
+You can have different card images, titles, and descriptions for different social media sites or for different link parameters. For example, [https://perfmattersconf.com](https://perfmattersconf.com) sets different values for  `og:image`,  `og:title`, and `og:description` based on the parameter of the URL.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/fDeipwtUHoiNHIvbjzBV.png", alt="A card showing a conference speaker.", width="800", height="679" %}
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/8CquPieF4L6oRVAGJ5mM.png", alt="The same card with details for a different speaker.", width="800", height="829" %}
+
+
+If you enter [https://perfmattersconf.com?name=erica](https://perfmattersconf.com?name=erica) and [https://perfmattersconf.com?name=melanie](https://perfmattersconf.com?name=melanie) in [Twitter's Card Validator](https://cards-dev.twitter.com/validator), you will see these two different cards; we provided different content even though they both link to the same conference home page.
+
+## Other useful meta information
+
+If someone bookmarks your site, adding it to their home screen, or if your site is a progressive web application or otherwise works offline or without browser chrome features displayed, you can provide application icons for the mobile device's home screen.
+
+You can use the `<link>` tag to link to the startup images that you want to use. Here's an example of including a few images, with media queries:
+
+```html
+<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
+<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
+```
+
+If your site or application is  web-app capable, meaning the site can stand on its own with minimal UI, such as no back button, you can use meta tags to tell the browser that too:
+
+```html
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="mobile-web-app-capable" content="yes" />
+```
+
+Only include these if your app is indeed app-capable. If your site isn't, you'll be setting up your most ardent supporters, those who added your site to their home screen, for a really bad user experience. You'll lose their love!
+
+If someone is going to save your icon to their tiny device's home screen, you want to provide the operating system with a short name that doesn't take up much room on a small device's home screen. You can do this by including a meta tag, or using a webmanifest file. The following demonstrates the meta tag method:
+
+```html
+<meta name="apple-mobile-web-app-title" content="MLW" />
+<meta name="application-name" content="MLW" />
+```
+
+You've covered several meta tags, all of which will make your header longer. If you're indeed creating a web app-capable, offline-friendly progressive web application, instead of including these two additional meta tags, you can more simply and succinctly include `short_name: MLW` in a webmanifest file.
+
+The manifest file can prevent an unwieldy header full of `<link>` and `<meta>` tags. We can create a manifest file, generally called `manifest.webmanifest` or `manifest.json`. We then use the handy `<link>` tag with a `rel` attribute set to `manifest` and the `href` attribute set to the URL of the manifest file:
+
+```html
+<link rel="manifest" href="/mlw.webmanifest" />
+```
+
+This series is focused on HTML, but you can check out the [web.dev course on progressive web applications](/learn/pwa/web-app-manifest/) or [MDN's web app manifest documentation](https://developer.mozilla.org/docs/Web/Manifest).
+
+Your HTML now looks something like this:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Machine Learning Workshop</title>
+    <meta name="viewport" content="width=device-width" />
+    <meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
+    <meta property="og:title" content="Machine Learning Workshop" />
+    <meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
+    <meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
+    <meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
+    <meta name="twitter:title" content="Machine Learning Workshop" />
+    <meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
+    <meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
+    <meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
+    <meta name="twitter:image:alt" content="27 different home appliances" />
+    <meta name="twitter:creator" content="@estellevw" />
+    <meta name="twitter:site" content="@perfmattersconf" />
+    <link rel="stylesheet" src="css/styles.css" />
+    <link rel="icon" type="image/png" href="/images/favicon.png" />
+    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
+    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
+    <link rel="canonical" href="https://www.machinelearning.com" />
+    <link rel="manifest" href="/mlwmanifest.json" />
+  </head>
+  <body>
+
+    <!-- <script defer src="scripts/lightswitch.js"></script>-->
+  </body>
+</html>
+```
+
+It's pretty long, but it's done. It would have been much longer, but you've summed up all the icons, short name, etc. in a [manifest file](/add-manifest/), enabling you to omit many `<meta>` and `<link>` tags,
+
+Now that your `<head>` is mostly complete, you can dive into some [semantic HTML](/learn/html/semantic-html/).
+
+{% Assessment 'metadata' %}
diff --git a/src/site/content/en/learn/html/metadata/metadata.assess.yml b/src/site/content/en/learn/html/metadata/metadata.assess.yml
new file mode 100644
index 00000000000..63749c082cd
--- /dev/null
+++ b/src/site/content/en/learn/html/metadata/metadata.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of metadata
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: "The refresh pragma directive."
+    options:
+      - content: "Reloads the page."
+        rationale: "Correct!"
+      - content: "Redirects the visitor to another page."
+        rationale: "Try again."
+      - content: "Loads in additional content from another file."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "Open Graph meta tags."
+    options:
+      - content: "Allow you to link to charts."
+        rationale: "Try again"
+      - content: "Are required for all pages."
+        rationale: "Try again."
+      - content: "Are used to create social media cards for your pages."
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/navigation/index.md b/src/site/content/en/learn/html/navigation/index.md
new file mode 100644
index 00000000000..56fe27d0d1a
--- /dev/null
+++ b/src/site/content/en/learn/html/navigation/index.md
@@ -0,0 +1,361 @@
+---
+title: 'Navigation'
+authors:
+  - estelleweyl
+description: Navigation is a key element of any site of application, and it starts with HTML.
+date: 2022-12-08
+tags:
+  - html
+---
+
+As you learned in [links](/learn/html/links), the `<a>` element with the `href` attribute creates links that users can follow by clicking or
+tapping. In [lists](/learn/html/lists), you learned how to create lists of content. In this section, you will discover how to group lists of
+links together to create navigation.
+
+There are several types of navigation and several ways to display them. Named anchors within text linking to other pages within
+the same website are considered local navigation. Local navigation that consists of a series of links displaying the hierarchy of
+the current page in relation to the site's structure, or the pages the user followed to get to the current page, is called a breadcrumb.
+A page's table of contents is another type of local navigation. A page containing hierarchical links to every single page on a site is called
+a site map. The navigation section leading to the top-level pages of the website which is found on every page is called global navigation.
+Global navigation can be displayed in several different ways, including navigation bars, drop-down menus, and flyout menus.
+The same site may display its global navigation differently, depending on the viewport size.
+
+Always make sure users can navigate to any page on your site with the fewest number of clicks, while making sure the navigation
+is intuitive and not overwhelming. That said, there are no specific requirements for navigational elements. [MachineLearningWorkshop.com](https://machinelearningworkshop.com),
+being a single-page website, has a local navigation bar in the top right; this is where multi-page sites often put their global navigation.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/6Te041GdOLBpwp0cuUT0.png", alt="The front page of this page, including the breadcrumbs at top, a button to show the table of contents for this page, and the local navigations for the series.", width="600", height="628" %}
+
+If you are viewing this page on web.dev, you can spot a few navigational features. There is a breadcrumb above the title,
+an "on this page" table of contents after the title, and a "Learn HTML" table of contents that, depending on the width of your screen,
+is either always displayed or made visible with the click of a menu button. The first element on the page is a hidden link to #main, which enables you to skip both the sidebar and breadcrumb links.
+
+
+## "Skip to content" link
+
+The first element on the page is an internal link:
+
+```html
+<a href="#main" class="skip-link button">Skip to main</a>
+```
+
+which, when clicked, or when it has focus and the user hits `Enter`, scrolls the page and gives focus to the main content:
+a landmark `<main>` with an `id` of `main`:
+
+```html
+<main id="main">
+```
+
+You may never have seen the link on this site, even if you have read through all the previous sections.
+It is only displayed when it has focus:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ieTOzelKA243HJj195b5.png", alt="Skip to Main button.", width="680", height="300" %}
+
+For improved usability and accessibility, it's important to let users bypass the blocks of content that are repeated on every page.
+The skip link is included so when a keyboard user hits `tab` on load, they can quickly skip to the main content of the site—avoiding
+having to tab through extensive linkages. On this page, the skip link skips the section-wide sidebar navigation and the breadcrumb navigation,
+taking the user directly to the page title.
+
+Most designers don't like the appearance of having a link at the top of the page. It is fine to hide the link from view while remembering
+that when the link gets focus, which will happen when a keyboard user tabs through the link on the page, the link must be visible to all users.
+Only hide content in the non-focused and non-active state using a selector similar to `.visually-hidden:not(:focus):not(:active)`.
+
+The link text reads "skip to main." This is the link's accessible name. This is a technical site, and users probably know what "main" means.
+Like all link text, the accessible name should clearly indicate where the link takes the user. The link target should be the beginning of the
+page's main content. To test this, when the page loads, tab to the "Skip to main" link. Then press `Enter` to ensure it "jumps" to the main content.
+
+## Table of contents
+
+The skip-to-content link scrolls the main content into view. The first element is the `<h1>` heading with the title of this section.
+In this case, `<h1>Marking up navigation</h1>`. The main heading is followed by the tagline, a brief description of the contents of this
+tutorial. Whether the table of contents navigation comes before or after the heading in the codebase depends on the width of your browser.
+
+<figure>
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/8FNr1lp9jbtoM2weXceV.png", alt="On narrow screens, the table of contents is hidden behind an on this page button that toggles the navigations visibility.", width="446", height="300", style="max-width: 300px; margin: 0 auto;" %}
+  <figcaption>On narrow screens, the table of contents is hidden behind an on this page button that toggles the navigations visibility.</figcaption>
+</figure>
+<figure>
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ThkLoScjUq2V6M1b4WSj.png", alt="On wide screens, the table of contents is always visible, with the link to the current section being highlighted in blue.", width="236", height="300", style="max-width: 400px; margin: 0 auto;" %}
+  <figcaption>On wide screens, the table of contents is always visible, with the link to the current section being highlighted in blue.</figcaption>
+</figure>
+
+If your browser is wider than 80em, the Table of contents comes before the heading in the markup, and is similar to the following
+(the class names have been removed to simplify the markup):
+
+```html
+<nav aria-label="On this page">
+  <div>On this page</div>
+  <div>
+    <ul>
+      <li>
+        <a href="#skip">Skip to content link</a>
+      </li>
+      <li>
+        <a href="#toc">Table of contents</a>
+      </li>
+      <li>
+        <a href="#bc">Page breadcrumbs</a>
+      </li>
+      <li>
+        <a href="#ln">Local navigation</a>
+      </li>
+      <li>
+        <a href="#global">Global navigation</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+```
+
+The `<nav>` is the best element to use for sections of navigation: it automatically informs the screen reader and search engine
+that a section has a role of `navigation`, a landmark role.
+
+Including the [`aria-label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute
+provides a brief description of the purpose of the navigation. In this case, as the value of the attribute is redundant to
+text that is visible on the page, it is preferable to use [`aria-labelledby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+to reference the visible text.
+
+We can change the non-semantic `<div>` to a paragraph `<p>`, then add an [`id`](/learn/html/attributes/#id) so it can be referenced. We then use `aria-labelledby`:
+
+```html
+<nav aria-labelledby="tocTitle">
+  <p id="tocTitle">On this page</p>
+```
+
+In addition to reducing redundancy, visible text gets translated by translation services, whereas attribute values may not.
+When possible, if text is present that provides for an adequate label, prefer that over attribute text.
+
+This navigation is the table of contents. If you want to use the `aria-label`, provide that information rather than repeating visible text:
+
+```html
+<nav aria-label="Table of Contents">
+  <p>On this page</p>
+```
+
+When providing an accessible name on an element, don't include the name of the element. Screen readers provide that information to the user.
+For example, when using the `<nav>` element, don't include "navigation"; that information is included when using semantic elements.
+
+The links themselves are in an unordered list. While they don't have to be nested in a list, using a list enables screen reader users to know how many
+list items, and therefore links, are an individual list in a navigation.
+
+```html
+<nav aria-labelledby="tocTitle">
+  <p id="tocTitle">On this page</p>
+  <ul role="list">
+    <li>
+      <a href="#skip">Skip to content link</a>
+    </li>
+    <li>
+      <a href="#toc">Table of contents</a>
+    </li>
+    <li>
+      <a href="#bc">Page breadcrumbs</a>
+    </li>
+    <li>
+      <a href="#ln">Local navigation</a>
+    </li>
+    <li>
+      <a href="#global">Global navigation</a>
+    </li>
+  </ul>
+</nav>
+```
+
+If your browser is less than 80em wide, the "On this page" widget is below the heading and tagline. This is done by including
+two table-of-contents navigation components and hiding one or the other with CSS `display: none;` based on a media query.
+
+Including two identical widgets to only show one is an anti-pattern. The extra bytes are negligible. Hiding HTML content from
+all users by using CSS `display: none` is appropriate. The issue is that, on wide screens, the table of contents comes before `#main`;
+and on narrower screens, the table of contents is nested within #main. Using the keyboard to skip to content skips over the table of
+contents on a wide screen. While users are accustomed to content being responsive and changing location when they change devices or
+increase their font size, they do not expect the tab order to change when they do so. Page layouts should be accessible, predictable,
+and consistent across a site. Here, the location of the table of contents is not predictable.
+
+## Page breadcrumbs
+
+Breadcrumbs provide secondary navigation to help users understand where they are on a website. They generally show the URL hierarchy
+of the current document and the location of the current page in the site structure. The site structure from a user perspective may differ
+from the file structure on the server. That is fine. The user doesn't need to know how you organize your files, but they do need to be able
+to navigate through your content.
+
+Breadcrumbs help users navigate and understand the organization of your site, allowing them to quickly navigate anywhere up to any ancestor
+sections without having to step back through each prior page visited to get to the current page using `back` functionality.
+
+If the site has a simple hierarchical directory structure, as is the case with web.dev, the breadcrumb navigation will often be composed
+of a link to the home, or hostname, with a link to the index file of each directory in the URL's pathname. The inclusion of the
+current page is optional and requires a little extra attention.
+
+```js
+const url = new URL("https://web.dev/learn/html/navigation");
+const sections = url.hostname + url.pathname.split('/');
+// "web.dev,learn,html,navigation"
+```
+
+The sections of the breadcrumb show the path from the current page back to the home page, showing each level in-between.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/DNpEzCXqogU6qfJWduLo.png", alt="Breadcrumbs indicating the path to the current page.", width="300", height="75" %}
+
+Every Learn HTML module page has the same breadcrumb navigation, displaying the hierarchy of the `HTML` lessons within the
+`learn` section of `web.dev`. The code is similar to the following, with classes and SVG details removed for clarity:
+
+```html
+<nav aria-label="breadcrumbs">
+  <ul role="list">
+    <li>
+      <a href="/">
+        <svg aria-label="web.dev" role="img">
+          <use href="#webDevLogo" />
+        </svg>
+      </a>
+    </li>
+    <li>
+      <a href="/learn/">Learn</a>
+    </li>
+    <li>
+      <a href="/learn/html">Learn HTML!</a>
+    </li>
+  </ul>
+  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
+    <svg aria-label="share" role="img">
+      <use href="#shareIcon" />
+    </svg>
+    <span>Share</span>
+  </share-action>
+</nav>
+```
+
+This breadcrumb follows best practices. It uses the `<nav>` element, a landmark role, so assistive technology presents the breadcrumbs as a navigational element on the page.
+The accessible name of "breadcrumbs", provided with the `aria-label`, differentiates it from the other navigation landmarks in the current document.
+
+Between links there are CSS-generated content separators. The separators come before each list item starting with the second `<li>`.
+
+```css
+[aria-label^="breadcrumb" i] li + li::before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-top: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  rotate: 45deg;
+  opacity: .8
+}
+```
+
+Screen readers will not "see" them, which is best practice: separators between breadcrumb links should be hidden from screen readers.
+They must also have enough contrast against their background, the same as regular text.
+
+This version uses an unordered list and list items. An ordered list is preferable as ordered list items are enumerated.
+Also it is a list: `role="list"` was added back in because some CSS display property values remove the semantics from some elements.
+
+Generally, the link to the home page in a breadcrumb should read "home" rather than be the site logo with the name of the site as
+the label. But as the breadcrumb is at the top of the document and is the only occurrence of the logo on the page, it makes sense
+as to why this anti-pattern was used.
+
+The last element is a custom `<share-action>` element. Custom elements are discussed in section 15. While this custom element
+is not part of the breadcrumb, including an unrelated element in a `<nav>` is fine, as long as the inclusion is consistent on all pages.
+
+### Current page
+
+On this page, the current page, "Navigation", is not included in the breadcrumb. When the current page is included in a
+breadcrumb, the text should preferably not be a link, and `aria-current="page"` should be included on the current page's
+list item. When it isn't included, it is helpful to indicate that the heading that follows is the current page with an
+icon or other symbol.
+
+Should the design change, an alternative version of the breadcrumb could be used:
+
+```html
+<nav aria-label="breadcrumbs">
+  <ol role="list">
+    <li>
+      <a href="/">Home</a>
+    </li>
+    <li>
+      <a href="/learn/">Learn</a>
+    </li>
+    <li>
+      <a href="/learn/html">Learn HTML!</a>
+    </li>
+    <li aria-current="page">
+      Navigation
+    </li>
+  </ol>
+</nav>
+```
+
+Breadcrumbs are not for linear steps. For example, a list of the path the user followed to get to the current page or the
+list of steps followed up to this point in a recipe can be nested within a `<nav>`,  but should not be labeled as a breadcrumb.
+
+## Local navigation
+
+There is another navigational component on this page. If you are on a wide screen, there is a sidebar on the left with the
+"Learn HTML" logo, a search bar, and links to each of the 20 sections in Learn HTML. Each link contains the chapter number,
+the section title, and a checkmark to the right on sections that you have already visited—possibly this one if you have navigated away and have come back. The links to all the sections in Learn HTML, along with the search and local header, are the location navigation.
+
+If you are visiting this site on a tablet or mobile device, or otherwise have a narrower screen, when you load this page, the sidebar is hidden. You can make it visible via the hamburger menu in the top navigation bar (yes, the header is a custom `<web-header>` element with `role="navigation"` set).
+
+The main difference between the permanent local navigation on wide screens and the local navigation on narrower screens that can be made to appear and disappear, is the display of the close button on the version that can be hidden. This icon is hidden on wide screens with `display: none;`.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/MHQ1i1NnGKx2N0ovmzxy.png", alt="The local navigation is showing a checkmark next to the name of this chapter.", width="365", height="75", style="max-width: 300px; margin: 0 auto;" %}
+
+The link to this document, section 010, has a slightly different appearance from the other links in the local navigation to indicate to sighted users that this is the current page. This visual difference is created with CSS. The current page is also identified with the `aria-current="page"` attribute. This informs assistive technologies that it is a link to the current page. The HTML for this list item within this local navigation is similar to:
+
+```html
+<li>
+  <a aria-current="page" href="/learn/html/navigation/" data-complete="true">
+    <span>010</span>
+    <span>Navigation</span>
+    <svg aria-label="Check" role="img">
+      <use href="#checkmark" />
+    </svg>
+  </a>
+</li>
+```
+
+If this isn't the first time you visit this page, the checkmark will not be visible. If you have visited this page in the past, the
+`data-complete` [custom attribute](/learn/html/attributes) is set to `true`, and the checkmark will be displayed. The checkmark is included
+in each link, but CSS hides the checkbox from users who have not been to this page before with `display: none` based on the absence of the
+`data-complete="true"` attribute and value:
+
+```css
+.course .stack-nav a:not([data-complete="true"]) svg {
+  display: none;
+}
+```
+
+When `display` is set to something other than `none`, the `role` informs assistive technology that the inline SVG is an image,
+and the `aria-label` acts as the `alt` attribute on an `<img>`would.
+
+## Global navigation
+
+Global navigation is the navigation section leading to the top-level pages of the website that is the same on every page of a site.
+A site's global navigation may also be made up of tabs that open nested lists of links that link to all the subsections of a site or other menus.
+It may include titled sections, buttons, and search widgets. These additional features aren't a requirement. What is required is that
+the navigation appears on every page, and is the same on every page; with `aria-current="page"` on any links to the current page, of course.
+
+Global navigation provides a consistent means of traveling anywhere in the application or website. Google doesn't have global
+navigation at the top of the page. Yahoo! does. While all the main Yahoo! properties have different styles, the content for
+most sections are the same.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/p9q003xRDvYiTidnBEHf.png", alt="A well-contrasted navigation header, with a white picker on a black background.", width="600", height="31" %}
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/HyvinG9Tf5wR5qq1tM5s.png", alt="A poorly-contrasted navigation header, with a black picker on a grey background.", width="600", height="35" %}
+
+The content of the news and sports global navigation headers are the same, but the icon showing that the user is currently
+on sports does not have enough contrast to be accessible; even for visitors who don't have low vision. Both sections have a global
+navigation with a section-specific local navigation below it.
+
+Similar to global navigations, footers should be identical on all pages. But that is the only similarity. Global navigation
+enables navigation to all parts of the site from a product perspective. Navigation elements within a footer don't have specific requirements.
+Generally, the footer will include corporate links, such as legal statements, about the company, and careers, and can lead to external
+sources, such as social media icons.
+
+This page's footer contains three additional `<nav>` elements: the footer navigation, Google developers, and terms and policies,
+with each being a link. The footer navigation includes how to contribute to web.dev on Github, other educational content provided by
+Google outside of web.dev, and external "how to connect" links.
+
+These three navigations in the `<footer>` are `<nav>` elements with an `aria-label`providing an accessible name for these landmark roles.
+All the navigations we've seen have been [links](/learn/html/links) nested in [lists](/learn/html/lists) within a nav. We've covered all you need to know to create your own navigations.
+Up next, we will look at marking up data tables.
+
+{% Assessment 'navigation' %}
diff --git a/src/site/content/en/learn/html/navigation/navigation.assess.yml b/src/site/content/en/learn/html/navigation/navigation.assess.yml
new file mode 100644
index 00000000000..88585bd1a44
--- /dev/null
+++ b/src/site/content/en/learn/html/navigation/navigation.assess.yml
@@ -0,0 +1,24 @@
+setLeader: Test your knowledge of navigation.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which element is used to mark up the main navigation of a site?
+    options:
+      - content: "`<navigation>`"
+        rationale: "Try again."
+      - content: "`<breadcrumb>`"
+        rationale: "Try again."
+      - content: "`<nav>`"
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: There can be multiple navigation elements on one page?
+    options:
+      - content: "False."
+        rationale: "Try again."
+      - content: "True."
+        rationale: "Correct!"
diff --git a/src/site/content/en/learn/html/overview/index.md b/src/site/content/en/learn/html/overview/index.md
new file mode 100644
index 00000000000..881a41c2204
--- /dev/null
+++ b/src/site/content/en/learn/html/overview/index.md
@@ -0,0 +1,150 @@
+---
+title: 'Overview of HTML'
+authors:
+  - estelleweyl
+description: A brief introduction to the key concepts in HTML.
+date: 2022-09-27
+tags:
+  - html
+---
+
+HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documents displayed on the web. HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way.
+
+HTML documents are basically a tree of nodes, including HTML elements and text nodes. HTML elements provide the semantics and formatting for documents, including creating paragraphs, lists and tables, and embedding images and form controls. Each element may have multiple attributes specified. Many elements can have content, including other elements and text. Other elements are empty, with the tag and attributes defining their function.
+
+There are several categories of elements, including metadata, sectioning, text, inline semantic, form, interactive, media, component, and scripting. We'll cover most of these in the series. But first, what is an element?
+
+## Elements
+
+HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way. HTML elements are delineated by tags, written using angle brackets (`<` and `>`).
+
+Our page title is a heading, level one, for which we use the `<h1>` tag. The actual title, "Machine Learning Workshop", is the content of our element. The content goes between the open and closing tags. The entire thing—the opening tag, closing tag, and the content—is the element.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/oyFzeg8ttK57XMGuVNvG.png", alt="The tags and content that make up an HTML element.", width="752", height="245" %}
+
+The closing tag is the same tag as the opening tag, preceded by a slash.
+
+Elements and tags aren't the exact same thing, though many people use the terms interchangeably. The tag name is the content in the brackets. The tag includes the brackets. In this case, `<h1>`. An "element" is the opening and closing tags, and all the content between those tags, including nested elements.
+
+```html
+<p>This paragraph has some
+  <strong><em>strongly emphasized</em></strong>
+  content</p>
+```
+
+This paragraph element has other elements _nested_ in it.  When nesting elements, it's important that they are properly nested.  HTML tags should be closed in the reverse order of which they were opened. In the above example, notice how the `<em>` is both opened and closed within the opening and closing `<strong>` tags, and the `<strong>` is both open and closed within the `<p>` tags.
+
+Browsers do not display the tags. The tags are used to interpret the content of the page.
+
+HTML is very, very forgiving. For example, if we omit the closing `</li>` tags, the closing tags are implied.
+
+```html
+<ul>
+  <li>Blendan Smooth
+  <li>Hoover Sukhdeep
+  <li>Toasty McToastface
+</ul>
+```
+
+Although it is valid to not close an `<li>`, it isn't good practice.  The closing `</ul>` is mandatory. If the unordered list's closing tag is omitted, the browser will try to determine where your list and list items end, but you might not agree with the decision.
+
+The specification for each element lists whether the closing tag is mandatory or not. "Neither tag is omissible" in the specification means both an opening tag and a closing tag are required. The [specification provides a list of all the required closing tags](https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission).
+
+If the `<em>` or `<strong>` in the example earlier  had not been closed, the browser may or may not close the element for you. Not closing an `<em>` simply leads to content possibly being rendered differently than you intended.  If a `</ul>` is omitted and the next tag is a closing tag for the list's parent container, you're lucky. If, on the other hand, it's an opening `<h1>` tag, the browser will assume the header is part of the list, including inheriting styles. Some omitted closing tags cause bigger issues: not closing some tags, such as `<script>`, `<style>`, `<template>`, `<textarea>`, and `<title>`, breaks subsequent content as shown in the following example.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwxzBLq',
+  height: 500,
+  theme: 'dark',
+  tab: 'html,result'
+} %}
+
+Having some content being unintentionally italic or having a heading indented won't destroy your business. Having most of your content appear unstyled in a 200x300 textarea because you forgot to add a `</textarea>` or not show up at all because you forgot to close a `</style>` makes the site unusable.
+
+In some cases, browsers will include elements even if the tags aren't present in the markup. Because elements can be implied, an element can exist even when the tags don't. The browser will add a `<body></body>` around your content and  `<tbody></tbody>` around your table rows, even if you don't. That being said, while it is valid to omit tags, don't. Also, as already mentioned, make sure they are correctly nested. Your future self as a maintainer of markup, and anyone else working on your code base, will thank you.
+
+There are two types of elements: replaced and non-replaced.
+
+### Non-replaced elements
+
+The paragraph, header, and lists marked up in the earlier section are all non-replaced. Non-replaced elements have opening and (sometimes optional) closing tags that surround them and may include text and other tags as sub-elements. These enclosing tags can turn a phrase or image into a hyperlink, can make a sentence into a header, can give emphasis to words, and so on.
+
+### Replaced and void elements
+
+Replaced elements are replaced by objects, be it a graphical user interface (UI) widget in the case of most form controls, or a raster or scalable image file in the case of most images. Being replaced by objects, each comes with a default appearance. Depending on the type of object and the browser, the applicable styles are limited. For example, most browsers enable limited styling of UI widgets and related pseudo-elements. In the case of raster images, height, width, clipping, and filtering are easily done with CSS, but not much else. On the other hand, scalable vector graphics, using a markup language based on XML similar to HTML are fully scalable (unless they contain raster images). They are also fully styleable. Note that the ability to style an embedded SVG from the CSS linked to the HTML file that embeds it depends on how the SVG is set up.
+
+In this example, the two replaced elements `<img>` and `<input>` are replaced by non-text content: an image and a graphical user interface object, respectively.
+
+```html
+<input type="range">
+<img src="switch.svg" alt="light switch">
+```
+
+Output of the above HTML:
+
+<input type="range">
+<img src="https://machinelearningworkshop.com/svg/switch2.svg" alt="light switch" style="max-width: 200px;">
+
+Replaced elements and void elements are often confused. Void elements are all self-closing elements and are represented by one tag. This means there is no such thing as a closing tag for a void element. Optionally, you can include a slash at the end of the tag, which many people find makes markup easier to read. Continuing with this example, we self close the tag with a slash:
+
+```html
+<input type="range"/>
+<img src="switch.svg" alt="light switch"/>
+```
+
+The slash at the end is old school: it's a way of indicating that the element is self-closing and there will be no matched end or closing tag.
+
+Void elements cannot contain text content or nested elements. Void elements include  `<br>`, `<col>`, `<embed>`, `<hr>`, `<img>`, `<input>`, `<link>`, `<meta>`, `<source>`, `<track>`, and `<wbr>`, among others.
+
+Most replaced elements are void elements, but not all. The `video`, `picture`, `object`, and `iframe` elements are replaced, but aren't void. They can all contain other elements or text, so they all have a closing tag.
+
+Most void elements are replaced; but again, not all, as we saw with `base`, `link`, `param`, and `meta`. Why have a void element, which can't have any content, that isn't replaced and thereby doesn't render anything to the screen? To provide information about the content! The information is provided by the elements' attributes.
+
+## Attributes
+
+You may have noticed the `<img>` and `<input`> examples had more than just the element type in their opening tag. These extra bits of space-separated name/value pairs (though sometimes including a value is optional) are called _attributes_. Attributes are what make HTML so incredibly powerful. We'll be covering hundreds of attributes and attribute values in this series, but here we'll just discuss what they are in general and how to include them.
+
+Attributes provide information about the element. The attribute, like the rest of the opening tag, won't appear in the content, but they do help define how the content will appear to both your sighted and non-sighted (assistive technologies and search engines) users.
+
+Attributes only appear in the opening tag. The opening tag always starts with the element type. The type can be followed by zero or more attributes, separated by one or more spaces. Most attribute names are followed by an equal sign equating it with the attribute value, wrapped with opening and closing quotation marks.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/IdGp51MB61yo6WDSRZZ3.png", alt="An opening tag with attributes.", width="800", height="218" %}
+
+In this example, we have an anchor link with two attributes. These two attributes have converted the content "Registration" into an internal anchor link that scrolls to the attribute `id="register"` in the current browser tab when the link is clicked, tapped, or activated with the keyboard or other device.
+
+Attributes define the behavior, linkages, and functionality of elements. We'll cover more attributes in the [Attributes](/learn/html/attributes/) section of this series. For now, just note that some attributes are global—meaning they can appear within any element's opening tag. Some apply only to several elements but not all, and others are element-specific, relevant only to a single element.
+
+Most attributes are name/value pairs. Boolean attributes, whose value is true, false, or the same as the name of the attribute, can be included as just the attribute: the value is not necessary.
+
+```html
+<img src="switch.svg" alt="light switch" ismap />
+```
+
+This image has three attributes: `src`, `alt`, and `ismap`. The `src` attribute is used to provide the location of the SVG image asset. The `alt` attribute provides alternative text describing the contents of the image. The `ismap` attribute is Boolean, and doesn't require a value. This is just to explain what attributes are. We'll cover these attributes in more detail in the [images](/learn/html/images/) section.
+
+While quoting attributes isn't always required, it sometimes is. If the value includes a space or special characters, quotes are needed. For this reason, quoting is always recommended. One or more spaces between attributes if the attribute value is quoted are not actually required, but, to be safe, and for legibility, quotes and spaces are recommended, and appreciated.
+
+HTML is not case-sensitive, but some attribute values are. Values that are defined in the specification are case-insensitive. Strings that are not defined as keywords are generally case-sensitive, including `id` and `class` values.
+
+Note that if an attribute value is case-sensitive in HTML, it is case-sensitive when used as part of an [attribute selector](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) in CSS and in JavaScript.
+
+To make markup easier to read, it is recommended, but not required, to mark up your HTML using lowercase letters for all your element names and attribute names within your tags, and quote all attribute values.  If you ever hear the term "XHTML style markup", this, and self-closing empty elements with a slash at the end, is what that means.
+
+## Appearance of elements
+
+The default appearance of semantic elements is set by user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude, which means some differences exist between browsers.
+
+The element you choose, and therefore the tags you use, should be appropriate for the content you are displaying, as tags have semantic meaning. The [semantics](/learn/html/semantic-html/), or `role`, of an element is important to assistive technologies and, in some cases, search engines.  HTML should be used to structure content, not to define the content's appearance. Appearance is the realm of CSS. While many elements that alter the appearance of content, such as `<h1>`, `<strong>`, and `<em>`, have a semantic meaning, the appearance can and generally will be changed with author styles.
+
+```html
+<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
+```
+
+## Element, attributes, and JavaScript
+
+The Document Object Model (DOM) is the data representation of the structure and content of the HTML document.  As the browser parses HTML, it creates a JavaScript object for every element and section of text encountered. These objects are called nodes—element nodes and text nodes, respectively.
+
+There is an interface to define the functionality of every HTML element.  The [HTML DOM API](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API) provides access to and control of every HTML element via the DOM, providing interfaces for the HTML element and all the HTML classes that inherit from it. The [HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface represents the HTML element and all of its descendant nodes. Every other element implements it via an interface that inherits from it. Each inheriting interface has a constructor, methods, and properties.  Via the inherited HTMLElement properties, you can access every global attribute, as well as `input`, `pointer`, `transition`, and `animation` events. Via the individual element's sub-type, such as [HTMLAnchorElement](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement) and  [HTMLImageElement](https://developer.mozilla.org/docs/Web/API/HTMLImageElement), you can access element-specific attribute values and methods.
+
+{% Assessment 'overview' %}
diff --git a/src/site/content/en/learn/html/overview/overview.assess.yml b/src/site/content/en/learn/html/overview/overview.assess.yml
new file mode 100644
index 00000000000..924c40c591a
--- /dev/null
+++ b/src/site/content/en/learn/html/overview/overview.assess.yml
@@ -0,0 +1,39 @@
+setLeader: Test your knowledge of HTML
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "HTML elements are used for styling."
+    options:
+      - content: "True"
+        rationale: "Try again. CSS, not HTML is used for styling."
+      - content: "False"
+        rationale: "Correct! HTML elements are used to describe what the content is."
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,3"
+    stem: "Select the replaced elements."
+    options:
+      - content: "`<img>`"
+        rationale: "Correct!"
+      - content: "`<p>`"
+        rationale: "Try again."
+      - content: "`<ul>`"
+        rationale: "Try again"
+      - content: "`<input>`"
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2"
+    stem: "Select all of the true statements."
+    options:
+      - content: "Attributes describe the styling of HTML elements."
+        rationale: "Try again."
+      - content: "Attribute values containing a space or special characters must be contained within quotes."
+        rationale: "Correct! It's best practice to quote all attributes, so you don't get tripped up."
+      - content: "Attributes are added to the opening tag of an element."
+        rationale: "Correct!"
+      - content: "HTML is case sensitive."
+        rationale: "Try again."
diff --git a/src/site/content/en/learn/html/semantic-html/index.md b/src/site/content/en/learn/html/semantic-html/index.md
new file mode 100644
index 00000000000..ef061109562
--- /dev/null
+++ b/src/site/content/en/learn/html/semantic-html/index.md
@@ -0,0 +1,175 @@
+---
+title: 'Semantic HTML'
+authors:
+  - estelleweyl
+description: Using the correct HTML elements to describe your document content.
+date: 2022-09-27
+tags:
+  - html
+---
+
+With over 100 HTML elements, and the ability to create custom elements, there are infinite ways to mark up your content; but some ways—notably _semantically_—are better than others.
+
+_Semantic_ means "relating to meaning". Writing semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance.
+
+This series hasn't covered many HTML elements yet, but even without knowing HTML, the following two code snippets show how semantic markup can give content context. Both use a word count instead of _ipsum lorem_ to save some scrolling—use your imagination to expand "thirty words" into 30 words:
+
+The first code snippet uses `<div>` and `<span>`, two elements with no semantic value.
+
+```html
+<div>
+  <span>Three words</span>
+  <div>
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+  </div>
+</div>
+<div>
+  <div>
+    <div>five words</div>
+  </div>
+  <div>
+    <div>three words</div>
+    <div>forty-six words</div>
+    <div>forty-four words</div>
+  </div>
+  <div>
+    <div>seven words</h2>
+    <div>sixty-eight words</div>
+    <div>forty-four words</div>
+  </div>
+</div>
+<div>
+   <span>five words</span>
+</div>
+```
+
+Do you get a sense of what those words expand to? Not really.
+
+Let's rewrite this code with semantic elements:
+
+```html
+<header>
+  <h1>Three words</h1>
+  <nav>
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+  </nav>
+</header>
+<main>
+  <header>
+    <h1>five words</h1>
+  </header>
+  <section>
+    <h2>three words</h2>
+    <p>forty-six words</p>
+    <p>forty-four words</p>
+  </section>
+  <section>
+    <h2>seven words</h2>
+    <p>sixty-eight words</p>
+    <p>forty-four words</p>
+  </section>
+</main>
+<footer>
+  <p>five words</p>
+</footer>
+```
+
+Which code block conveyed meaning?  Using only the non-semantic elements of `<div>` and `<span>`, you really can't tell what the content in the first code block represents. The second code example, with semantic elements, provides enough context for a non-coder to decipher the purpose and meaning without having ever encountered an HTML tag. It definitely provides enough context for the developer to understand the outline of the page, even if they don't understand the content, such as content in a foreign language.
+
+In the second code block, we can understand the architecture even without understanding the content because semantic elements provide meaning and structure. You can tell that the first header is the site's banner, with the `<h1>` likely to be the site name. The footer is the site footer: the five words may be a copyright statement or business address.
+
+Semantic markup isn't just about making markup easier for developers to read; it's mostly about making markup easy for automated tools to decipher. Developer tools demonstrate how semantic elements provide machine-readable structure as well.
+
+## Accessibility object model (AOM)
+
+As the browser parses the content received, it builds the document object model (DOM) and the CSS object model (CSSOM). It then also builds an accessibility tree. Assistive devices, such as screen readers, use the AOM to parse and interpret content. The DOM is a tree of all the nodes in the document. The AOM is like a semantic version of the DOM.
+
+Let's compare how both of these document structures are rendered in Firefox's accessibility panel:
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/R2d9f5NfZTo1j9mOul0d.png", alt="A list of nodes which are all link or text leaf.", width="312", height="762" %}
+    <figcaption>
+      The first code snippet.
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/3pwHvhjyjewbiEfHoVwQ.png", alt="A list of nodes with clear landmarks.", width="332", height="888" %}
+    <figcaption>
+      The second code snippet.
+    </figcaption>
+  </figure>
+</div>
+
+
+
+In the second screen shot, there are four landmark roles in the second code block. It uses semantic landmarks conveniently named `<header>`, `<main>`, `<footer>`, and `<nav>` for "navigation".   Landmarks provide structure to web content and ensure important sections of content are easily keyboard navigable for screen reader users.
+
+Note that `<header>` and `<footer>` are landmarks, with the roles of `banner` and `contentinfo` respectively, when they are not nested in other landmarks. Chrome's AOM shows this as follows:
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/D2dsfO1wm6UrdorarkC0.png", alt="All text nodes are listed as static text.", width="456", height="602" %}
+    <figcaption>
+      The first code snippet.
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/svdGvQhpNlk7UiFgoCpH.png", alt="The text nodes all have descriptions.", width="582", height="1046" %}
+    <figcaption>
+      The second code snippet.
+    </figcaption>
+  </figure>
+</div>
+
+Looking at Chrome developer tools, you'll note a significant difference between the accessibility object model when using semantic elements versus when you don't.
+
+It's pretty clear that semantic element usage helps accessibility, and using non-semantic elements reduces accessibility. HTML is generally, by default, accessible. Our job as developers is to both protect HTML's default accessible nature and ensure that we maximize accessibility. You can [inspect the AOM in developer tools](https://developer.chrome.com/docs/devtools/accessibility/reference/#explore-tree).
+
+### The `role` attribute
+
+The `role` attribute describes the role an element has in the context of the document. The `role` attribute is a global attribute—meaning it is valid on all elements—defined by the [ARIA specification](https://w3c.github.io/aria/#dfn-role) rather than the [WHATWG HTML specification](https://html.spec.whatwg.org/dev/), where almost everything else in this series is defined.
+
+Semantic elements each have an implicit role, some depending on the context. As we saw in the Firefox accessibility dev tools screenshot, the top level `<header>`, `<main>`, `<footer>`, and `<nav>` were all landmarks, while the `<header>` nested in `<main>` was a section. The Chrome screenshot lists these elements' [ARIA  roles](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles): `<main>` is `main`, `<nav>` is `navigation`, and `<footer>`, as it was the footer of the document, is `contentinfo`. When `<header>` is the header for the document, the default role is `banner`, which defines the section as the global site header. When a `<header>` or `<footer>` is nested within a sectioning element, it is not a landmark role. Both dev tools' screenshots show this.
+
+Element role names are important in building the AOM. The semantics of an element, or 'role',  are important to assistive technologies and, in some cases, search engines.  Assistive technology users rely on semantics to navigate through and understand the meaning of content. The element's role enables a user to access the content they seek quickly and, possibly, more importantly, the role informs the screen reader user how to interact with an interactive element once it has focus.
+
+Interactive elements, such as buttons, links, ranges, and checkboxes, all have implicit roles, all are automatically added to the keyboard tab sequence, and all have default expected user action support. The implicit role, or explicit `role` value, informs the user to expect element-specific default user interactions.
+
+Using the `role` attribute, you can give any element a role, including a different role than the tag implies. For example, `<button>` has the implicit role of `button`.  With `role="button"`, you can turn any element semantically into a button: `<p role="button">Click Me</p>`.
+
+While adding `role="button"` to an element will inform screen readers that the element is a button, it doesn't change the appearance or functionality of the element. The `button` element provides so many features without you doing any work. The `button` element is automatically added to the document's tab ordering sequence, meaning it is by default keyboard focusable. The Enter and Space keys both activate the button. Buttons also have all the methods and properties provided to them by the [HTMLButtonElement](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement) interface. If you don't use the semantic button for your button, you have to program all those features back in. It's so much easier to just go with `<button>`.
+
+Go back to the screenshot of the AOM for the non-semantic code block. You'll note that non-semantic elements don't have implicit roles. We can make the non-semantic version semantic by assigning each element a role:
+
+```html
+<div role="banner">
+  <span role="heading" aria-level="1">Three words</span>
+  <div role="navigation">
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+    <a>one word</a>
+  </div>
+</div>
+```
+
+While the `role` attribute can be used to add semantics to any element, you should instead use elements with the implicit role you need.
+
+## Semantic elements
+
+Asking yourself, "Which element best represents the function of this section of markup?" will generally result in you picking the best element for the job. The element you choose, and therefore the tags you use, should be appropriate for the content you are displaying, as tags have semantic meaning.
+
+HTML should be used to structure content, not to define content's appearance. The appearance is the realm of CSS. While some elements are defined to appear a certain way, don't use an element based on how the user agent stylesheet makes that element appear by default. Rather, select each element based on the element's semantic meaning and functionality. Coding HTML in a logical, semantic, and meaningful way helps to ensure CSS is applied as intended.
+
+Choosing the right elements for the job as you code means you won't have to refactor or comment your HTML. If you think about using the right element for the job, you'll most often pick the right element for the job. If you don't, you probably won't. When you understand the semantics of each element and are aware of why choosing the right element is important, you will generally be able to make the right choice without much additional effort.
+
+In the next section, you'll use the semantic elements to build your [document structure](/learn/html/document-structure/).
+
+{% Assessment 'semantic-html' %}
diff --git a/src/site/content/en/learn/html/semantic-html/semantic-html.assess.yml b/src/site/content/en/learn/html/semantic-html/semantic-html.assess.yml
new file mode 100644
index 00000000000..5a000b2ceb7
--- /dev/null
+++ b/src/site/content/en/learn/html/semantic-html/semantic-html.assess.yml
@@ -0,0 +1,13 @@
+setLeader: Test your knowledge of semantic HTML.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: 'You should always add `role="button"` to a `<button>` element.'
+    options:
+      - content: "False."
+        rationale: "Correct! The `<button>` element already has this role."
+      - content: "True."
+        rationale: "Try again."
diff --git a/src/site/content/en/learn/html/tables/index.md b/src/site/content/en/learn/html/tables/index.md
new file mode 100644
index 00000000000..418f466cdf4
--- /dev/null
+++ b/src/site/content/en/learn/html/tables/index.md
@@ -0,0 +1,244 @@
+---
+title: 'Tables'
+authors:
+  - estelleweyl
+description: Understanding how to use tables to mark up tabular data.
+date: 2022-12-08
+tags:
+  - html
+---
+
+HTML tables are used for displaying tabular data with rows and columns. The decision to use a `<table>` should be based on
+the content you are presenting and your users' needs in relation to that content. If data is being presented, compared, sorted,
+calculated, or cross-referenced, then `<table>` is probably the right choice. If you simply want to lay out non-tabular content neatly,
+such as a large group of thumbnail images, tables are not appropriate: instead, [create a list](/learn/html/lists) of images and
+style the [grid with CSS](/learn/css/grid).
+
+In this section, we are going to discuss all the elements that make up the table, along with some accessibility and usability features
+you should consider as you present tabular data. While Learn HTML isn't fundamentally about CSS, and there is an entire course dedicated
+to [learning CSS](/learn/css), we will cover some table-specific CSS properties.
+
+## Table elements, in order
+
+The [`<table>`](https://developer.mozilla.org/docs/Web/HTML/Element/table) tag wraps the table content, including all the table elements.
+The implicit ARIA role of a `<table>` is `table`; assistive technologies know this element is a table structure containing data arranged in
+rows and columns. If the table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order, set [`role="grid"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/grid_role).
+If the rows of the `grid` can be expanded and collapsed, use [`role="treegrid"`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/treegrid_role) instead.
+
+Inside the `<table>`, you'll find the table headers (`<thead>`), table bodies (`<tbody>`), and, optionally, table footers (`<tfoot>`).
+Each of these is made up of table rows (`<tr>`). Rows contain table header (`<th>`) and table data  (`<td>`) cells which, in turn, contain all the data.
+In the DOM, before any of this, you may find two additional features: the table caption (`<caption>`) and column groups (`<colgroup>`). Depending
+on whether or not the `<colgroup>` has a `span` attribute, it may contain nested table column (`<col>`) elements.
+
+The table's children are, in order:
+1. [`<caption>`](https://developer.mozilla.org/docs/Web/HTML/Element/caption) element
+2. [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements
+3. [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead) elements
+4. [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody) elements
+5. [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot) elements
+
+We'll cover the `<table>` elements' children, which are all optional but recommended, then take a look at rows, table header cells,
+and table data cells. The `<colgroup>` will be covered last.
+
+### Table caption
+
+Being a native, semantic element, [`<caption>`](https://developer.mozilla.org/docs/Web/HTML/Element/table) is the preferred
+method of giving a name to a table. The `<caption>` provides a descriptive, programmatically associated table title. It is
+visible and available to all users by default.
+
+The `<caption>` element should be the first element nested in the `<table>` element. Including it lets all users know the
+purpose of the table immediately without having to read the surrounding text. Alternatively, you can use `aria-label` or `aria-labelledby`
+on the `<table>` to provide an accessible name as the caption. The `<caption>` element has no element-specific attributes.
+
+The caption appears outside the table. The location of the caption can be set with the CSS [`caption-side`](https://developer.mozilla.org/docs/Web/CSS/caption-side) property, which is a
+better practice than using the deprecated `align` attribute. This can set the caption to the top and bottom. The left and right
+side positioning, with `inline-start` and `inline-end`, are not yet fully supported. Top is the default browser presentation.
+
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'yLEZRyW',
+  height: 300,
+  theme: 'dark',
+  tab: 'html,result'
+} %}
+
+Preferably, data tables should have clear headers and a caption, and be simple enough to be almost self-explanatory. Bear in mind that
+not all users have the same cognitive abilities. When the table is "making a point", or otherwise needs interpretation, provide a
+brief summary of the main point or function of the table. Where that summary is placed depends on its length and complexity.
+If brief, use it as the inner text of the caption. If longer, summarize it in the caption, and provide the summary in the
+paragraph preceding the table, associating the two with the [`aria-describedby`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)
+attribute. Putting the table in a `<figure>` and putting the summary in the `<figcaption>` is another option.
+
+### Data sectioning
+
+The content of tables is made up of up to three sections: zero or more table headers (`<thead>`) , table bodies (`<tbody>`),
+and table footers (`<tfoot>`). All are optional, with zero or more of each being supported.
+
+These elements don't help or hinder the accessibility of the table, but they are useful in terms of usability. They provide
+styling hooks. For example, the [header contents can be made sticky](https://adrianroselli.com/2020/01/fixed-table-headers.html),
+while the `<tbody>` contents can be made to scroll. Rows not nested in one of these three containing elements are implicitly
+wrapped in a `<tbody>`. All three share the same implicit role [`rowgroup`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role).
+None of these three elements has any element-specific attributes.
+
+What we have so far:
+
+```html
+<table>
+  <caption>MLW Students</caption>
+  <thead></thead>
+  <tbody></tbody>
+  <tfoot></tfoot>
+</table>
+```
+
+The `<tfoot>` element was originally specified to come right after the `<thead>` and before the `<tbody>` for accessibility reasons,
+which is why you may come across this non-intuitive source order in legacy codebases.
+
+### Table content
+
+Tables can be divided into table headers, bodies, and footers, but none of these really does anything if the tables do not
+contain table rows, cells, and content. Each table row, `<tr>` contains one or more cells. If a cell is a header cell, use `<th>`.
+Otherwise, use `<td>`.
+
+User-agent stylesheets generally display the content in a `<th>` table header cell as centered and bold. These default styles,
+and all styling, are best controlled with CSS instead of the deprecated attributes that used to be available on individual cells,
+rows, and even the `<table>`.
+
+There were attributes to add padding between cells and within cells, for borders, and for text alignment. Cellpadding and cellspacing,
+which define the space between the content of a cell and its border, and between the borders of adjacent cells, should be set
+with the CSS [border-collapse](https://developer.mozilla.org/docs/Web/CSS/border-collapse) and [border-spacing](https://developer.mozilla.org/docs/Web/CSS/border-spacing)
+properties, respectively. `Border-spacing` will have no effect if `border-collapse: collapse` is set. If `border-collapse: separate;`
+is set, it's possible to hide empty cells completely with `empty-cells: hide;`. To learn more about styling tables, here's an
+interactive slidedeck of [table-related CSS styles](https://estelle.github.io/CSS/tables/#slide1).
+
+In the examples, we've added a border on the table and each individual cell with CSS to make some features more apparent:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'oNymmWw',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+In this example, we have a caption, a table header, and a table body. The header has one row containing three header `<th>` cells,
+thereby creating three columns. The body contains three rows of data: the first cell is a header cell for the row, so we use `<th>` instead of `<td>`.
+
+The `<th>` cell has semantic meaning, with implicit ARIA roles of [columnheader](https://w3c.github.io/aria/#columnheader)
+or [rowheader](https://w3c.github.io/aria/#rowheader). It defines the cell as the header for the column or row of table cells,
+depending on the value of the enumerated `scope` attribute. The browser will default to `col` or `row` if `scope` is not explicitly set.
+Because we have used semantic markup, the `1956` cell has two headers: Year and Lou Minious. This association tells us that "1956" is the
+"year" of graduation for "Lou Minious". In this example, as we can see the entire table, the association is visually apparent.
+Using `<th>` provides the association even when the header column or row has scrolled out of view. We could have explicitly set
+`<th scope="col">Year</th>` and `<th scope="row">Lou Minious</th>` but with a simple table like this, the enumerated default values work.
+Other values for `scope` include `rowgroup` and `colgroup`, which are useful with complex tables.
+
+## Merging cells
+
+Similar to MS Excel, Google Sheets, and Numbers, it is possible to join multiple cells into a single cell. This is done with HTML!
+The `colspan` attribute is used to merge two or more adjacent cells within a single row. The `rowspan` attribute is used to merge cells across rows,
+being placed on the cell in the top row.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'GRGzzEd',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+In this example, the table header contains two rows. The first header row contains three cells spanning four columns: the middle cell
+has `colspan="2"`. This merges two adjacent cells. The first and last cells include `rowspan="2"`. This merges the cell with the cell
+in the adjacent row, immediately beneath it.
+
+The second row in the table header contains two cells; these are the cells for the second and third columns in the second row.
+No cell is declared for the first or last column as the cell in the first and last columns in the first row span two rows.
+
+In cases where a cell is defined by multiple header cells with associations that cannot be set by the `scope` attributes alone,
+include the `headers` attribute with a space-separated list of the associated headers. As this example is a more complex table, we explicitly define
+the scope of the headers with the `scope` attribute. To be even clearer, we added the `headers` attribute to each cell.
+
+The `headers` attributes were possibly not necessary in such a simple use case, but they are important to have in your toolbelt
+your tables grow in complexity. Tables with complex structures, such as tables where headers or cells are merged or with more
+than two levels of column or row headers, require explicit identification of associated header cells. In such complex tables, explicitly
+associate each data cell with each corresponding header cell with a list of space-separated `id` values of all the associated headers
+as the value of the `headers` attribute.
+
+The `headers` attribute is more commonly found on `<td>` elements, but is also valid on `<th>`.
+
+That said, complex table structures can be difficult for all users, not just screen reader users, to understand. Cognitively
+and in terms of screen reader support, simpler tables, with few to no spanned cells, even without adding scope and headers, are more easily
+understood. They're also easier to manage!
+
+## Styling tables
+
+There are two relatively obscure elements that were briefly mentioned: the column group, [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup), element
+and its only descendant, the empty [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) column element. The
+`<colgroup>` element is used to define groups of columns, or `<col>` elements, within a table.
+
+If used, the column grouping should be nested in the `<table>`, immediately after the `<caption>` and before any table data.
+If they span more than one column, use the `span` attribute.
+
+The content outline order for a table is generally as follows, with `<table>` and `<caption>` being the two elements that
+should be included:
+
+```html
+<table>
+  <caption>Table Caption</caption>
+  <colgroup>
+    <col/>
+  </colgroup>
+  <thead>...
+```
+
+Neither `<colgroup>` nor `<col>` has semantic meaning in terms of helping to make the table more accessible, but they do allow
+for limited column styling, including setting a width for the column with CSS.
+
+`<col>` styles will style a column as long as there are no `<td>` or `<th>` styles that override that styling. For example, when
+`<colspan>` is used to merge cells in some rows of a table but not all, you can't be sure that a selector such as `tr > *:nth-child(8)`,
+which selects the 8th child of every row, will highlight the 8th column in full or will highlight the 8th column for several rows,
+but with a smattering of 9th and 10th column cells, depending on what row or column cells were merged.
+
+Unfortunately, only a few properties are supported, the styles aren't inherited into the cells, and the only way  of using the `<col>`
+element in targeting cells is with a complex selector including the [`:has()` relational selector](https://developer.mozilla.org/docs/Web/CSS/:has).
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/UJ6y8w7K3tReIJegOTSC.png", alt="Layered rendering of the elements used to design HTML tables.", width="518", height="403" %}
+
+If both the `<table>` and the `<colgroup>` have a background color, the `background-color` of the `<colgroup>` will be on top.
+The order of drawing is: table, column groups, columns, rowgroups, rows, with cells last and on top, as shown in the [schema of table
+layers](https://w3c.github.io/csswg-drafts/css2/#table-layers). The `<td>` and `<th>` elements are not descendants of `<colgroup>` or `<col>` elements, and do not inherit their styling.
+
+To stripe a table, CSS structural selectors come in handy. For example, `tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}`
+will add a translucent black to each odd row in the body of the table, letting any background effects that are set on `<colgroup>` show through.
+
+Tables are not responsive by default. Rather, they are sized according to their content by default. Extra measures are needed to get table
+layout styling to effectively work across a variety of devices. If you are [changing the CSS display property for table elements](https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html),
+include ARIA `role` attributes. While that may sound redundant, the CSS `display`property can affect the accessibility tree in some browsers.
+
+## Presenting data
+
+Table elements have semantic meanings that are used by assistive technologies to enable navigating through the rows and columns
+without getting 'lost'. The `<table>` element should not be used for presentation. If you need a heading over a list, use a [header](/learn/html/headings-and-sections/#headings-lessh1greater-lessh6greater)
+and a [list](/learn/html/lists). If you want to lay out content in many columns, use [multi-column layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Columns).
+If you want to lay out content in a grid, use [CSS grid](/learn/css/grid). Only use a table for data. Think of it this way: if your data requires a spreadsheet in order to be presented at a meeting, use`<table>`.
+If you would like to  use the features available in presentation software like Keynote or Powerpoint, you probably need a [description list](/learn/html/lists).
+
+While sorting table columns is the purview of JavaScript, marking up your headers to let users know the column is sortable is the purview of HTML.
+Let your users know the table columns are sortable with iconography showing ascending, descending, or unsorted. The column currently sorted should
+include the [aria-sort](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-sort) attribute with the enumerated value of the sort direction.
+The `<caption>` can politely announce updates to sort order via [aria-live](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-live) and a
+span that is dynamically updated, and which is visible to screen reader users. As the column is sortable by clicking on the header content, the header content should be a `<button>`.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'XWYOOed',
+height: 300,
+theme: 'dark',
+tab: 'html,result'
+} %}
+
+If you're not presenting tabular data, don't use a `<table>`. If you do use a table for presentation, set `role="none"`.
+
+Many developers use tables to lay out forms but there is no need to. But you do need to know about HTML forms, so we will cover that next.
+
+{% Assessment 'tables' %}
diff --git a/src/site/content/en/learn/html/tables/tables.assess.yml b/src/site/content/en/learn/html/tables/tables.assess.yml
new file mode 100644
index 00000000000..ba8a7eef56d
--- /dev/null
+++ b/src/site/content/en/learn/html/tables/tables.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of tables.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which element is used to mark up cells that are headings?
+    options:
+      - content: "`<header>`"
+        rationale: "Try again."
+      - content: "`<caption>`"
+        rationale: "Try again."
+      - content: "`<th>`"
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which information is likely to be suitable for layout with a table?
+    options:
+      - content: "Some scientific terms and their description."
+        rationale: "Try again, this is better suited to a `<dl>`."
+      - content: "A spreadsheet of information detailing students and their grades over 3 semesters."
+        rationale: "Correct!"
+      - content: "Ingredients for a recipe."
+        rationale: "Try again, this is better suited to a `<ul>`."
diff --git a/src/site/content/en/learn/html/template/index.md b/src/site/content/en/learn/html/template/index.md
new file mode 100644
index 00000000000..d9dbe70064e
--- /dev/null
+++ b/src/site/content/en/learn/html/template/index.md
@@ -0,0 +1,312 @@
+---
+title: 'Template, slot, and shadow'
+authors:
+  - estelleweyl
+description: An explanation of template, slot, and shadow.
+date: 2023-02-21
+tags:
+  - html
+---
+
+The benefit of web components is their re-usability: you can create a UI widget once, and reuse it multiple times. While you
+do need JavaScript to create web components, you don't need a JavaScript library. HTML and the associated APIs provide everything you need.
+
+The Web Component standard is made up of three parts—[HTML templates](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots),
+[Custom Elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements), and the [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
+Combined, they enable building customized, self-contained (encapsulated), reusable elements that can be seamlessly integrated
+into existing applications, like all the other HTML elements we've already covered.
+
+In this section, we'll create the `<star-rating>` element, a web component that allows users to rate an experience on a
+scale of one to five stars. When naming a custom element, it is recommended to use all lowercase letters. Also, include a dash,
+as this helps distinguish between regular and custom elements.
+
+We'll discuss using the `<template>` and `<slot>` elements, the `slot` attribute, and JavaScript to create a template with
+an encapsulated [Shadow DOM](/shadowdom-v1/). We'll then re-use the defined element, customizing a section of text, just
+like you would any element or web component. We'll also briefly discuss using CSS from within and outside of the custom element.
+
+## The `<template>` element
+
+The `<template>` element is used to declare fragments of HTML to be cloned and inserted into the DOM with JavaScript. The contents of the element are not rendered by default. Rather, they are instantiated using JavaScript.
+
+```html
+<template id="star-rating-template">
+  <form>
+    <fieldset>
+      <legend>Rate your experience:</legend>
+      <rating>
+        <input type="radio" name="rating" value="1" aria-label="1 star" required />
+        <input type="radio" name="rating" value="2" aria-label="2 stars" />
+        <input type="radio" name="rating" value="3" aria-label="3 stars" />
+        <input type="radio" name="rating" value="4" aria-label="4 stars" />
+        <input type="radio" name="rating" value="5" aria-label="5 stars" />
+      </rating>
+    </fieldset>
+    <button type="reset">Reset</button>
+    <button type="submit">Submit</button>
+  </form>
+</template>
+```
+
+As the contents of a `<template>` element are not written to the screen, the `<form>` and its contents aren't rendered.
+Yes, this Codepen is blank, but if you inspect the HTML tab, you'll see the `<template>` markup.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'vYzBNKR'
+} %}
+
+In this example, the `<form>` is not a child of a `<template>` in the DOM. Rather, contents of `<template>` elements are children
+of a [`DocumentFragment`](https://developer.mozilla.org/docs/Web/API/DocumentFragment) returned by the [`HTMLTemplateElement.content`](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement/content)
+property. To be made visible, JavaScript must be used to grab the contents and append those contents to the DOM.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'WNgeQGq'
+} %}
+
+This brief JavaScript did not create a custom element. Rather, this example has appended the contents of the `<template>` into the `<body>`.
+The content has become part of the visible, styleable DOM.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/xd926m5ueCjzf3xt815J.png", alt="A screenshot of the previous codepen as shown in the DOM.", width="800", height="375" %}
+
+Requiring JavaScript to implement a template for just one star rating isn't very useful, but creating a web component for a
+repeatedly used, customizable star rating widget is useful.
+
+## The `<slot>` element
+
+We include a slot to include a customized per occurrence legend. HTML provides a [`<slot>`](https://developer.mozilla.org/docs/Web/HTML/Element/slot)
+element as a placeholder inside a `<template>` that, if provided a name, creates a "named slot". A named slot can be used
+to customize content within a web component. The `<slot>` element gives us a way to control where the children of a custom
+element should be inserted within its shadow tree.
+
+In our template, we change the `<legend>` to a `<slot>`:
+
+```html
+<template id="star-rating-template">
+  <form>
+    <fieldset>
+      <slot name="star-rating-legend">
+        <legend>Rate your experience:</legend>
+      </slot>
+```
+
+The `name` attribute is used to assign slots to other elements if the element has a [slot](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/slot) attribute whose value matches the
+name of a named slot. If the custom element doesn't have a match for a slot, the contents of the `<slot>` will be rendered.
+So we included a `<legend>` with generic content that is OK to be rendered if anyone simply includes `<star-rating></star-rating>`, with no content, in their HTML.
+
+```html
+<star-rating>
+  <legend slot="star-rating-legend">Blendan Smooth</legend>
+</star-rating>
+<star-rating>
+  <legend slot="star-rating-legend">Hoover Sukhdeep</legend>
+</star-rating>
+<star-rating>
+  <legend slot="star-rating-legend">Toasty McToastface</legend>
+  <p>Is this text visible?</p>
+</star-rating>
+```
+
+The [slot](https://developer.mozilla.orgdocs/Web/HTML/Global_attributes/slot) attribute is a global attribute that is used
+to replace the contents of the `<slot>` within a `<template>`. In our custom element, the element with the slot attribute
+is a `<legend>`. It doesn't need to be. In our template, `<slot name="star-rating-legend">` will be replaced with `<anyElement slot="star-rating-legend">`,
+where `<anyElement>` can be any element, even another custom element.
+
+## Undefined elements
+
+In our `<template>` we used a `<rating>` element. This is not a custom element. Rather, it's an unknown element. Browsers
+don't fail when they don't recognize an element. Unrecognized HTML elements are treated by the browser as anonymous inline
+elements that can be styled with CSS. Similar to `<span>`, the `<rating>` and `<star-rating>` elements have no user-agent applied
+styles or semantics.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOvNbwO'
+} %}
+
+Note that the `<template>` and contents are not rendered. The `<template>` is a known element that contains content that
+is not to be rendered. The `<star-rating>` element has yet to be defined. Until we define an element, the browser displays it
+like all unrecognized elements. For now, the unrecognized `<star-rating>` is treated as an anonymous inline element, so the content
+including legends and the `<p>` in the third `<star-rating>` are displayed as they would be if they were in a `<span>` instead.
+
+Let's define our element to convert this unrecognized element into a custom element.
+
+### Custom elements
+
+JavaScript is required to define custom elements. When defined, the contents of the `<star-rating>` element will be replaced by a
+shadow root containing all the contents of the template we associate with it. The `<slot>` elements from the template are replaced
+with the contents of the element within the `<star-rating>` whose `slot` attribute value matches the `<slot>`'s name value, if
+there is one. If not, the contents of the template's slots are displayed.
+
+Content within a custom element that isn't associated with a slot—the `<p>Is this text visible?</p>` in our third `<star-rating>`—is not included in
+the shadow root and therefore not displayed.
+
+We [define the custom element](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) named `star-rating`
+by extending the `HTMLElement`:
+
+```js
+customElements.define('star-rating',
+  class extends HTMLElement {
+    constructor() {
+      super(); // Always call super first in constructor
+      const starRating = document.getElementById('star-rating-template').content;
+      const shadowRoot = this.attachShadow({
+        mode: 'open'
+      });
+      shadowRoot.appendChild(starRating.cloneNode(true));
+    }
+  });
+```
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'poOzjpj'
+} %}
+
+Now that the element is defined, every time the browser encounters a `<star-rating>` element, it will be rendered as defined
+by the element with the `#star-rating-template`, which is our template. The browser will attach a shadow DOM tree to the node, appending
+a [clone](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) of the template contents to that shadow DOM.
+Note that the elements upon which you can [`attachShadow()` are limited](https://developer.mozilla.org/docs/Web/API/Element/attachShadow#elements_you_can_attach_a_shadow_to).
+
+```js
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(starRating.cloneNode(true));
+```
+
+If you take a look at the developer tools, you'll note the `<form>` from the `<template>` is part of the shadow root of each custom element.
+A clone of the `<template>` contents is apparent in each custom element in the developer tools and visible in the browser, but the contents
+of the custom element itself are not rendered to the screen.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/CqbHMMxnse6n8STAocFo.png", alt="DevTools screenshot showing the cloned template contents in each custom element.", width="800", height="842" %}
+
+In the `<template>` example, we appended the template contents to the document body, adding the content to the regular DOM.
+In the [`customElements` definition](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry/define), we used the same
+[`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), but the cloned template contents were appended to an
+encapsulated shadow DOM.
+
+Notice how the stars went back to being unstyled radio buttons? Being part of a shadow DOM rather than the standard DOM, the styling within Codepen's CSS tab does not apply. That tab's CSS
+styles are scoped to the document, not to the shadow DOM, so the styles aren't applied. We have to create encapsulated
+styles to style our encapsulated Shadow DOM content.
+
+## Shadow DOM
+
+The Shadow DOM scopes CSS styles to each shadow tree, isolating it from the rest of the document. This means external CSS
+doesn't apply to your component, and component styles have no effect on the rest of the document, unless we intentionally
+direct them to.
+
+Because we have appended the contents to a shadow DOM, we can include a [`<style>`](/learn/html/document-structure/#css) element
+providing encapsulated CSS to the custom element.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'dyqbYme'
+} %}
+
+Being scoped to the custom element, we don't have to worry about styles seeping out to the rest of the document. We can
+substantially reduce the specificity of the selectors. For example, as the only inputs used in the custom element are radio
+buttons, we can use `input` instead of `input[type="radio"]` as a selector.
+
+```html
+ <template id="star-rating-template">
+  <style>
+    rating {
+      display: inline-flex;
+    }
+    input {
+      appearance: none;
+      margin: 0;
+      box-shadow: none;
+    }
+    input::after {
+      content: '\2605'; /* solid star */
+      font-size: 32px;
+    }
+    rating:hover input:invalid::after,
+    rating:focus-within input:invalid::after {
+      color: #888;
+    }
+    input:invalid::after,
+      rating:hover input:hover ~ input:invalid::after,
+      input:focus ~ input:invalid::after  {
+      color: #ddd;
+    }
+    input:valid {
+      color: orange;
+    }
+    input:checked ~ input:not(:checked)::after {
+      color: #ccc;
+      content: '\2606'; /* hollow star */
+    }
+  </style>
+  <form>
+    <fieldset>
+      <slot name="star-rating-legend">
+        <legend>Rate your experience:</legend>
+      </slot>
+      <rating>
+        <input type="radio" name="rating" value="1" aria-label="1 star" required/>
+        <input type="radio" name="rating" value="2" aria-label="2 stars"/>
+        <input type="radio" name="rating" value="3" aria-label="3 stars"/>
+        <input type="radio" name="rating" value="4" aria-label="4 stars"/>
+        <input type="radio" name="rating" value="5" aria-label="5 stars"/>
+      </rating>
+    </fieldset>
+    <button type="reset">Reset</button>
+    <button type="submit">Submit</button>
+  </form>
+</template>
+```
+
+While web components are encapsulated with in-`<template>` markup and CSS styles are scoped to the shadow DOM and hidden
+from everything outside of the components, the slot content which gets rendered, the `<anyElement slot="star-rating-legend">`
+portion of the `<star-rating>`, is not encapsulated.
+
+## Styling outside of the current scope
+
+It is possible, but not simple, to style the document from within a shadow DOM and to style the contents of a shadow DOM from
+the global styles. The shadow boundary, where the shadow DOM ends and the regular DOM begins, can be traversed, but only
+very intentionally.
+
+The _shadow tree_ is the DOM tree inside the shadow DOM. The shadow root is the root node of the shadow tree.
+
+The [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host) pseudo-class selects the `<star-rating>`, the shadow host element.
+The _shadow host_ is the DOM node that the shadow DOM is attached to. To target only specific versions of the host, use [`:host()`](https://developer.mozilla.org/docs/Web/CSS/:host_function).
+This will select only the shadow host elements that match the parameter passed, like a class or attribute selector. To select
+all the custom elements, you can use `star-rating { /* styles */ }` in the global CSS, or `:host(:not(#nonExistantId))` in the template styles. In terms
+of [specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity), the global CSS wins.
+
+The [`::slotted()`](https://developer.mozilla.org/docs/Web/CSS/::slotted) pseudo-element crosses the shadow DOM boundary
+from within the shadow DOM. It selects a slotted element if it matches the selector. In our example, `::slotted(legend)` matches our three legends.
+
+To target a shadow DOM from CSS in the global scope, the template needs to be edited. The [`part`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes#part)
+attribute can be added to any element that you want to style. Then use the [`::part()`](https://developer.mozilla.org/docs/Web/CSS/::part) pseudo-element
+to match elements within a shadow tree that match the parameter passed. The anchor or originating element for the pseudo-element is
+the host, or custom element name, in this case `star-rating`. The parameter is the value of the `part` attribute.
+
+If our template markup began as such:
+
+```html
+<template id="star-rating-template">
+  <form part="formPart">
+    <fieldset part="fieldsetPart">
+```
+
+We could target the `<form>` and `<fieldset>` with:
+
+```css
+star-rating::part(formPart) { /* styles */ }
+star-rating::part(fieldsetPart) { /* styles */ }
+```
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'abaovjL'
+} %}
+
+Part names act similarly to classes: an element can have multiple space-separated part names, and multiple elements can
+have the same part name.
+
+Google has a fantastic checklist for [creating custom elements](/custom-elements-best-practices/). You may also want to learn
+about [declarative shadow DOMs](/declarative-shadow-dom/).
+
+{% Assessment 'template' %}
diff --git a/src/site/content/en/learn/html/template/template.assess.yml b/src/site/content/en/learn/html/template/template.assess.yml
new file mode 100644
index 00000000000..e4c978c1282
--- /dev/null
+++ b/src/site/content/en/learn/html/template/template.assess.yml
@@ -0,0 +1,24 @@
+setLeader: Test your knowledge of template, slot, and shadow.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default styles from outside the shadow DOM will style elements inside.
+    options:
+      - content: "True."
+        rationale: "Try again."
+      - content: "False."
+        rationale: "Correct!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: Which answer is a correct description of the `<template>` element?
+    options:
+      - content: "A generic element used to display any content in your page."
+        rationale: "Try again."
+      - content: "A placeholder element."
+        rationale: "Try again."
+      - content: "An element used to declare fragments of HTML, that will not be rendered by default."
+        rationale: "Correct!"
\ No newline at end of file
diff --git a/src/site/content/en/learn/html/text-basics/index.md b/src/site/content/en/learn/html/text-basics/index.md
new file mode 100644
index 00000000000..8b823519df6
--- /dev/null
+++ b/src/site/content/en/learn/html/text-basics/index.md
@@ -0,0 +1,188 @@
+---
+title: 'Text basics'
+authors:
+  - estelleweyl
+description: How to format text using HTML.
+date: 2022-12-08
+tags:
+  - html
+---
+
+Similar to how your text editor provides `<h1>` to `<h6>` headings, along with a plethora of ways to format sections of text
+in meaningful and visual ways, HTML provides a very similar set of semantic and non-semantic elements to make meaning of prose.
+
+This section covers the main ways of marking up text, or text basics. We will then discuss attributes, before exploring
+additional ways of marking up text, such as lists, tables, and forms.
+
+## Headings, revisited
+
+There are six section heading elements, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and `<h6>`, with `<h1>` being most important
+and `<h6>` the least. For many years, developers were told that headings were used by browsers to outline documents.
+That was originally a goal, but browsers haven't implemented outlining features. However, screen reader users do use headings
+as an exploration strategy to learn about the content of the page, navigating through headings with the `h` key. So ensuring
+that heading levels are implemented as you would outline a document makes your content accessible and is still very much encouraged.
+
+By default, browsers style `<h1>` the largest, `<h2>` slightly smaller, with each subsequent heading level being smaller
+by default. Interestingly, browsers by default also decrement the `<h1>` font size based on how many `<article>`, `<aside>`, `<nav>`, or
+`<section>` elements it is nested in.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ktRJF3DKyFHtfLifJXkn.png", alt="Nested H1 examples.", width="242", height="548" %}
+
+Some user agent stylesheets include the following selectors, or similar, to style nested `<h1>` elements as if they were
+of a less important level:
+
+```css
+h2, :is(article, aside, nav, section) h1 {}
+h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
+```
+But the Accessibility Object Model, or AOM, still reports the level of the element correctly; in this case, "heading, level 1".
+Note that the browser doesn't do this for other heading levels. That said, don't use heading level-based browser styling. Even though
+browsers don't support outlining, pretend they do; mark up your content headings as if they do. That will make your content make sense to search engines, screen readers, and
+future maintainers (which just might well be you).
+
+Outside of headings, most structured text is made up of a series of paragraphs. In HTML, paragraphs are marked up with the
+`<p>` tag; the closing tag is optional but always advised.
+
+The #about section has a heading and a few paragraphs:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOKdjQm',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+This section is not a landmark as it doesn't have an accessible name. To turn this into a `region`, which is a landmark role, you can use `aria-labelledby` to provide the accessible name:
+
+```html
+<section id="about"  aria-labelledby="about_heading">
+<h2 id="about_heading">What you'll learn</h2>
+```
+Only create landmarks if and when appropriate. Having too many landmarks can quickly become disorienting for screen reader users.
+
+## Quotes and citations
+
+When marking up an article or blog post, you may want to include a quote or pull-quote, with or without a visible citation.
+There are elements for these three components: `<blockquote>`, `<q>`, and `<cite>` for a visible citation, or the `cite` attribute
+to provide more information for search.
+
+The `#feedback` section contains a header and three reviews; these reviews are blockquotes, some of which contain quotes,
+followed by a paragraph containing the quote's citation. Omitting the third review to save space, the markup is:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'eYKxwbV',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+The information about the quote author, or citation, is not part of the quote and therefore not in the `<blockquote>`, but comes after the quote.
+While these are citations in the lay sense of the term, they are not actually citing a specific resource, so are encapsulated in a `<p>` paragraph element.
+
+The citation appears over three lines, including the author's name, previous role, and professional aspiration. The `<br>` line break
+creates a line break in a block of text. It can be used in physical addresses, in poetry, and in signature blocks. Line
+breaks should not be used as a carriage return to separate paragraphs. Instead, close the prior paragraph and open a new one. Using paragraphs
+for paragraphs is not only good for accessibility but enables styling. The `<br>` element is just a line break; it is impacted by very few CSS properties.
+
+While we provided citation information in a paragraph following each blockquote, the quotes  shown earlier are coded this way because they didn't
+come from an external source. If they did, the source can (should?) be cited.
+
+If the review was pulled from a review website, book, or other work, the `<cite>` element could be used for the title
+of a source. The content of the `<cite>` can be the title of a book, the name of a website or TV show, or even the name of a
+computer program. The `<cite>` encapsulation can be used whether the source is being mentioned in passing or if the source
+is being quoted or referenced. The content of the `<cite>` is the work, not the author.
+
+If the quote from Blendan Smooth was taken from her offline magazine, you would write the blockquote like this:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'LYrqKMq',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+The citation element `<cite>` has no implicit role and should get its accessible name from its contents; don't include an `aria-label`.
+
+To provide credit where credit is due when you can't make the content visible, there is the `cite` attribute which takes as its value the URL of the source document or message for the information quoted. This attribute is valid on both `<q>` and `<blockquote>`. While it's a URL, it is machine readable but not visible to the reader:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'NWzoZob',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+While the `</p>` closing tag is optional (and always recommended), the `</blockquote>` closing tag is always required.
+
+Most browsers add padding to both `<blockquote>` inline directions and italicize `<cite>` content; this can be controlled with CSS. The `<blockquote>` does not add quotation marks, but those can be added with CSS-generated content. The `<q>` element does add quotes by default, using language-appropriate quotation marks.
+
+In the `#teachers` section, HAL is quoted as saying, "I'm sorry <NAME REDACTED, RIP>, but I'm afraid I can't do that, ." The code for that, in English and French, is:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'qBKgzgg',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+The inline quotation element, `<q>`, adds language-appropriate quotes. The user-agent default styles include open-quote and close-quote generated content:
+
+```css
+q::before {content: open-quote;}
+q::after {content: close-quote;}
+```
+
+The `lang` attribute is included to let the browser know that, while base language of the page was defined as English in the `<html lang="en-US">` opening tag, this paragraph of text is in a different language. This helps voice controls such as Siri, Alexa, and voiceOver use French pronunciation. It also informs the browser what type of quotes to render.
+
+Like `<blockquote>`, the `<q>` element supports the `cite` attribute.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOKdjJw',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+### HTML Entities
+
+You may have noticed the escape sequence or "entity". Because the `<` is used in HTML, you have to escape it using either `&lt;` or a less easy-to-remember encoding `&#60;`. There are four reserved entities in HTML: `<`, `>`, `&`, and `"`. Their character references are `&lt;`, `&gt;`, `&amp;` and `&quot;` respectively.
+
+A few other entities you will often use are `&copy;`  for copyright (©),` &trade;` for Trademark (™), and `&nbsp;` for non-breaking space.
+Non-breaking spaces are useful when you want to include a space between two characters or words while preventing a line break from occurring there.
+There are over 2,000 [named character references](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references).
+But, if needed, every single character, including emojis, has an encoded equivalent that starts with `&#`.
+
+If you take a look at ToastyMcToastface's workshop review (not included in the code sample above), there are some unusual text characters:
+
+```html
+<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>
+```
+
+The last sentence in this blockquote can also be written as:
+
+```html
+This has no&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
+&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
+&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
+&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
+&#x32F;&#x32E;&#x347;
+```
+
+There are a few unescaped characters and a few named character references in this code mess. Because the character set is UTF-8,
+the last few characters in the blockquote don't actually need to be escaped, as in this example. Only characters not supported
+by the character set need to be escaped. If needed, there are [many tools](https://mothereff.in/) to enable escaping various characters,
+or you can just ensure you include [`<meta charset="UTF-8">`](/learn/html/document-structure/#character-encoding) in the `<head>`.
+
+Even when you specify the character set as UTF-8, you still have to escape the `<` when you want to print that character to the screen.
+Generally, you don't need to include the named character references for `>`, `"`, or `&`; but if you want to write a tutorial on HTML entities,
+you do need to write `&lt;` when teaching someone how to code a `<`. 😀
+
+Oh, and that smiley emoji is `&#x1F600;`, but this doc is declared as UTF-8, so it isn't escaped.
+
+{% Assessment 'text-basics' %}
diff --git a/src/site/content/en/learn/html/text-basics/text-basics.assess.yml b/src/site/content/en/learn/html/text-basics/text-basics.assess.yml
new file mode 100644
index 00000000000..891bcd2da5a
--- /dev/null
+++ b/src/site/content/en/learn/html/text-basics/text-basics.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of text in HTML.
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How do you show a copyright symbol in HTML?
+    options:
+      - content: "`c`"
+        rationale: "Try again."
+      - content: "`&copy;`"
+        rationale: "Correct!"
+      - content: "`&copyright`."
+        rationale: "Try again."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: Which element is used to indicate something is a quotation?
+    options:
+      - content: "`<blockquote>`"
+        rationale: "Correct"
+      - content: "`<quote>`"
+        rationale: "Try again."
+      - content: "`<cite>`"
+        rationale: "Try again. The `<cite>` element is used to indicate the source of a quote, not the quote itself."
diff --git a/src/site/content/en/learn/images/automating/index.md b/src/site/content/en/learn/images/automating/index.md
new file mode 100644
index 00000000000..5dd87d36433
--- /dev/null
+++ b/src/site/content/en/learn/images/automating/index.md
@@ -0,0 +1,253 @@
+---
+title: 'Automating compression and encoding'
+authors:
+  - matmarquis
+description: Make generating highly performant image sources a seamless part of your development process.
+date: 2023-02-01
+tags:
+  - images
+---
+
+All of the syntaxes in this course—from the encoding of image data to the information-dense
+markup that powers [responsive images](/learn/images/responsive-images/)—are methods for machines to communicate with machines. You have
+discovered a number of ways for a client browser to communicate its needs to a server, and a server to respond in kind.
+Responsive image markup (`srcset` and `sizes`, in particular) manage to describe a shocking amount of information in relatively
+few characters. For better or worse, that brevity is by design: making these syntaxes less terse, and so easier for developers
+to parse, could have made them more difficult for a _browser_ to parse. The more complexity added to a string, the more
+potential there is for parser errors, or unintentional differences in behavior from one browser to another.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/24qgm41BZl5a2gstQQfi.png", alt="An automated image encoding window.", width="800", height="472" %}
+
+However, the same trait that can make these subjects feel so intimidating can also provide you with solutions: a syntax easily
+_read_ by machines is a syntax more easily _written_ by them. You’ve almost certainly encountered many examples of automated
+image encoding and compression as a user of the web: any image uploaded to the web through social media platforms, content
+management systems (CMS), and even email clients will almost invariably pass through a system that resizes, re-encodes,
+and compresses them.
+
+Likewise, whether through plugins, external libraries, standalone build process tools, or responsible use of client-side scripting,
+responsive image markup readily lends itself to automation.
+
+Those are the two primary concerns around automating image performance: managing the creation of images—their encodings,
+compression, and the alternate sources you’ll use to populate an `srcset` attribute—and generating our user-facing markup.
+In this module, you’ll learn about a few common approaches to managing images as part of a modern workflow, whether as an
+automated phase in your development process, through the framework or content management system that powers your site, or
+almost fully abstracted away by a dedicated content delivery network.
+
+## Automating compression and encoding
+
+You’re unlikely to find yourself in a position where you can take the time to manually determine the ideal encoding and level
+of compression for each individual image destined for use on a project—nor would you want to. As
+[important as it is to keep your image transfer sizes as small as possible](/learn/images/performance-issues/) , fine-tuning your
+compression settings and re-saving alternate sources for every image asset destined for a production website would introduce
+a huge bottleneck in your daily work.
+
+As you learned when reading about the various image formats and compression types, the most efficient encoding for an image will always be dictated by
+its content, and as you learned in [Responsive Images](/learn/images/responsive-images/), the alternate sizes you’ll need for your image sources will be
+dictated by the position those images occupy in the page layout. In a modern workflow, you’ll approach these decisions
+holistically rather than individually—determining a set of sensible defaults for images, to best suit the contexts in which
+they’re meant to be used.
+
+When choosing encodings for a directory of photographic images, [AVIF](/learn/images/avif/) is the clear winner for quality and transfer size
+but has limited support, [WebP](/learn/images/webp/) provides an optimized, modern fallback, and [JPEG](/learn/images/jpeg/) is the most reliable default. The alternate
+sizes we need to produce for images meant to occupy a sidebar in a page layout will vary a great deal from images meant
+to occupy the entire browser viewport at our highest breakpoints. Compression settings will require an eye toward blurring
+and compression artifacts across multiple resulting files—leaving less room to carve every possible byte from each image
+in exchange for a more flexible and reliable workflow. In sum, you’ll be following the same decision making process you’ve
+come to understand from this course, writ large.
+
+As for the processing itself, there are a huge number of open source image processing libraries that provide methods of
+converting, modifying, and editing images in batches, competing on speed, efficiency, and reliability. These processing
+libraries will allow you to apply encoding and compression settings to whole directories of images at once, without the
+need to open image editing software, and in a way that preserves your original image sources should those settings need
+to be adjusted on-the-fly. They’re intended to run in a range of contexts, from your local development environment to the
+web server itself—for example, the compression-focused [ImageMin](/use-imagemin-to-compress-images/) for
+Node.js can be extended to suit specific applications through an array of [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin),
+while the cross-platform [ImageMagick](https://imagemagick.org/) and the Node.js based [Sharp](https://sharp.pixelplumbing.com/)
+come with a staggering number of features right out of the box.
+
+These image processing libraries make it possible for developers to build tools dedicated to seamlessly optimizing images
+as part of your standard development processes—ensuring that your project will always be referencing production-ready image
+sources with as little overhead as possible.
+
+## Local development tools and workflows
+
+[Task-runners and bundlers like Grunt, Gulp, or Webpack](/use-imagemin-to-compress-images/) can be used to
+optimize image assets alongside other common performance-related tasks, such as minification of CSS and JavaScript. To
+illustrate, let’s take a relatively simple use case: a directory in your project contains a dozen photographic images,
+meant to be used on a public-facing website.
+
+First, you’ll need to ensure consistent, efficient encoding for these images. As you’ve learned in the previous modules,
+WebP is an efficient default for photographic images in terms of both quality and file size. WebP is _well_ supported,
+but not _universally_ supported, so you’ll also want to include a fallback in the form of a progressive JPEG. Then,
+in order to make use of the `srcset` attribute for efficient delivery of these assets, you’ll need to produce multiple
+alternate sizes for each encoding.
+
+While this would be a repetitive and time-consuming chore if done with image editing software, task runners like
+[Gulp](https://gulpjs.com/) are designed to automate exactly this sort of repetition. The [gulp-responsive](https://www.npmjs.com/package/gulp-responsive)
+plugin, which makes use of [Sharp](https://www.npmjs.com/package/sharp), is one option of many that all follow a similar pattern:
+collecting all the files in a source directory, re-encode them, and compress them based on the same standardized "quality"
+shorthand you learned about in [Image Formats and Compression](/learn/images/png/). The resulting files are then output to a path you define,
+ready to be referenced in the `src` attributes of your user-facing `img` elements while leaving your original files intact.
+
+```javascript
+const { src, dest } = require('gulp');
+const respimg = require('gulp-responsive');
+
+exports.webp = function() {
+  return src('./src-img/*')
+    .pipe(respimg({
+      '*': [{
+        quality: 70,
+        format: ['webp', 'jpeg'],
+        progressive: true
+      }]
+  }))
+  .pipe(dest('./img/'));
+}
+```
+
+With a process like this in place, no harm would be done to a production environment if someone on the project inadvertently
+added a photograph encoded as a massive truecolor PNG to the directory containing your original image sources—regardless of
+the original image’s encoding, this task will produce an efficient WebP and reliable progressive JPEG fallback, and at a
+compression level that can be easily adjusted on-the-fly. Of course, this process also ensures that your original image
+files will be retained within the project’s development environment, meaning that these settings can be adjusted at any
+time with only the automated output overwritten.
+
+In order to output multiple files, you pass along multiple configuration objects—all the same, apart from the addition of
+a `width` key and a value in pixels:
+
+```javascript
+const { src, dest } = require('gulp');
+const respimg = require('gulp-responsive');
+
+exports.default = function() {
+  return src('./src-img/*')
+	.pipe(respimg({
+  	'*': [{
+          	width: 1000,
+          	format: ['jpeg', 'webp'],
+          	progressive: true,
+          	rename: { suffix: '-1000' }
+        	},
+        	{
+          	width: 800,
+          	format: ['jpeg', 'webp'],
+          	progressive: true,
+          	rename: { suffix: '-800' }
+        	},
+        	{
+          	width: 400,
+          	format: ['jpeg', 'webp'],
+          	progressive: true,
+          	rename: { suffix: '-400' },
+      	}]
+    	})
+	)
+	.pipe(dest('./img/'));
+}
+```
+
+In the case of the example above, the original image (monarch.png) was more than 3.3MB. The largest file generated by
+this task (monarch-1000.jpeg) is approximately 150KB. The smallest, monarch-400.web, is only 32KB.
+
+```shell
+[10:30:54] Starting 'default'...
+[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
+[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
+[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
+[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
+[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
+[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
+[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
+[10:30:54] Finished 'default' after 374 ms
+```
+
+Of course, you’ll want to carefully examine the results for visible compression artifacts, or possibly increase compression
+for additional savings. Since this task is non-destructive, these settings can be changed easily.
+
+All told, in exchange for the few kilobytes you could carve away with careful manual micro-optimization, you gain a process
+that is not only efficient, but  _resilient_—a tool that seamlessly applies your knowledge of high-performance image assets
+to an entire project, without any manual intervention.
+
+### Responsive image markup in practice
+
+Populating `srcset` attributes will typically be a straightforward manual process, as the attribute really only captures
+information about the configuration you’ve already done when generating your sources. In the tasks above, we’ve established
+the file names and width information that our attribute will follow:
+
+```html
+srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"
+```
+
+Remember that the contents of the `srcset` attribute are descriptive, not prescriptive. There’s no harm in overloading an
+`srcset` attribute, so long as the aspect ratio of every source is consistent. An `srcset` attribute can contain the URI
+and width of every alternate cut generated by the server without causing any unnecessary requests, and the more candidate
+sources we provide for a rendered image, the more efficiently the browser will be able to tailor requests.
+
+As you learned in [Responsive Images](/learn/images/responsive-images/), you’ll want to make use of the `<picture>` element to seamlessly handle the WebP
+or JPEG fallback pattern. In this case, you’ll be using the `type` attribute in concert with `srcset`.
+
+```html
+<picture>
+  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
+  <img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
+</picture>
+```
+
+As you’ve learned, browsers that support WebP will recognize the contents of the `type` attribute, and select that `<source>`
+element’s `srcset` attribute as the list of image candidates. Browsers that don’t recognize `image/webp` as a valid media
+type will ignore this `<source>`, and instead use the inner `<img>` element’s `srcset` attribute.
+
+There’s one more consideration in terms of browser support: browsers without support for any responsive image markup will
+still need a fallback, or we could run the risk of a broken image in especially old browsing contexts. Because `<picture>`,
+`<source>`, and `srcset` are all ignored in these browsers, we’ll want to specify a default source in the inner `<img>`’s
+`src` attribute.
+
+Because scaling an image downwards is _visually_ seamless and JPEG encoding is universally supported, the largest JPEG is
+a sensible choice.
+
+```html
+<picture>
+  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
+  <img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
+</picture>
+```
+
+`sizes` can be a little more difficult to deal with. As you've [learned](/learn/images/responsive-images), `sizes` is necessarily contextual—you
+can’t populate the attribute without knowing the amount of space the image is meant to occupy in the rendered layout. For
+the most efficient possible requests, an accurate `sizes` attribute needs to be in our markup at the time those requests
+are made by the end user, long before the styles that govern the page layout have been requested. Omitting `sizes` altogether
+is not only a violation of the HTML specification, but results in default behavior equivalent to `sizes="100vw"`—informing
+the browser that this image is only constrained by the viewport itself, resulting in the largest possible candidates sources
+being selected.
+
+As is the case with any particularly burdensome web development task, a number of tools have been created to abstract away
+the process of hand-writing `sizes` attributes. [`respImageLint`](https://ausi.github.io/respimagelint/) is an absolutely
+essential snippet of code intended to vet your `sizes` attributes for accuracy and provide suggestions for improvement.
+It runs as a bookmarklet—a tool you run in your browser, while pointed at the fully rendered page containing your image
+elements. In a context where the browser has full understanding of the page layout, it will also have nearly pixel-perfect
+awareness of the space an image is meant to occupy in that layout at every possible viewport size.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/Yr5VQ7rAATnPzHYyxcGF.png", alt="Responsive image report showing size/width mismatch.", width="800", height="861" %}
+
+A tool for linting your `sizes` attributes is certainly useful, but it has even more value as a tool to generate them wholesale.
+As you know, `srcset` and `sizes` syntax is intended to optimize requests for image assets in a visually seamless way. Though
+not something that should ever be used in production, a default `sizes` placeholder value of `100vw` is perfectly reasonable
+while working on a page’s layout in your local development environment. Once layout styles are in place, running `respImageLint`
+will provide you with tailored `sizes` attributes that you can copy and paste into your markup, at a level of detail far greater
+than one written by hand:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/fst6DoueH9kN4VEV6hU4.png", alt="Responsive image report with suggested dimensions.", width="800", height="861" %}
+
+Though image requests initiated by server-rendered markup happen too quickly for JavaScript to generate a client-side `sizes` attribute,
+the same reasoning doesn’t apply if those requests are _initiated_ client-side. The [Lazysizes](https://github.com/aFarkas/lazysizes) project,
+for example, allows you to fully defer image requests until after the layout has been established, allowing JavaScript to generate
+our `sizes` values for us—a huge convenience for you, and a guarantee of the most efficient possible requests for your users.
+Keep in mind, however, that this approach does mean sacrificing the reliability of server-rendered markup and the speed
+optimizations built into browsers, and initiating these requests only after the page has been rendered will have an outsized
+negative impact on your LCP score.
+
+Of course, if you’re already depending on a client-side rendering framework such as React or Vue, that’s a debt you’ll already
+be incurring—and in those cases, using Lazysizes means your `sizes` attributes can be almost completely abstracted away.
+Better still: as [`sizes="auto"`](https://github.com/whatwg/html/pull/8008) on lazy loaded images gains consensus and
+native implementations, Lazysizes will effectively become a polyfill for that newly standardized browser behavior.
diff --git a/src/site/content/en/learn/images/avif/index.md b/src/site/content/en/learn/images/avif/index.md
new file mode 100644
index 00000000000..b9d20006c62
--- /dev/null
+++ b/src/site/content/en/learn/images/avif/index.md
@@ -0,0 +1,55 @@
+---
+title: 'Image formats: AVIF'
+authors:
+  - matmarquis
+description: AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec.
+date: 2023-02-01
+tags:
+  - images
+---
+
+AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec. AVIF is [even newer](https://caniuse.com/avif)—than WebP,
+only supported in Chrome and Opera since 2020, Firefox in 2021, and Safari in 2022. As with WebP, AVIF aims to address every conceivable use case for
+raster images on the web: GIF-like animation, PNG-like transparency, and improved perceptual quality at file sizes smaller than JPEG or WebP.
+
+So far, AVIF shows promise. A [testing framework](https://github.com/Netflix/image_compression_comparison) developed by Netflix—a founding member of
+the [Alliance for Open Media](https://aomedia.org/), the group responsible for the development of the AV1 codec—shows
+[significant reductions in file sizes](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4) when
+compared to JPEG or WebP. Additional studies by [Cloudinary](https://cloudinary.com/blog/contemplating-codec-comparisons) and
+[Chrome's codecs team](https://storage.googleapis.com/avif-comparison/index.html) have weighed it favorably against current
+encoding standards.
+
+Though tooling is relatively limited, you can and should [start experimenting with AVIF](https://jakearchibald.com/2020/avif-has-landed/)
+today, as one of the encodings offered by Squoosh:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/TkVWHUuKwH9qauQJDNpI.png", alt="A Squoosh screenshot showing AVIF compression settings.", width="800", height="547" %}
+
+## Browser support
+
+Now, if you find yourself wondering why we've spent so much time discussing JPEG when AVIF and WebP can offer us higher
+quality results and far smaller file sizes, it's because they—and any new image encoding—come with a major catch. Support
+for GIF, PNG, and JPEG is guaranteed across all browsers, and has been for decades. Relative to those legacy image formats,
+AVIF is brand new, and while support for WebP is [excellent](https://caniuse.com/?search=webp) across modern browsers, it
+isn't a given across the entire web.
+
+As you can imagine, a tremendous amount of time and effort has gone into the development of new image formats that aim to
+improve both quality and transfer size. Formats like WebP, AVIF, and [JPEG XL](https://jpeg.org/jpegxl/) ([not supported in any browser](https://caniuse.com/jpegxl))
+aim to become the unifying solution to raster images on the web, as SVG is to vectors. Others, like JPEG 2000 (only supported in Safari)
+were intended to satisfy all the same use cases as a baseline JPEG, but improve on compression methods to deliver a visually
+similar but much smaller image.
+
+While some of these newer formats share the JPEG name, their encodings are as fundamentally dissimilar as JavaScript is to Java.
+A browser that doesn't support a given encoding won't be able to parse that image file at all—it's as though I instructed you to fill
+out your graph paper pixel grid in a language you don't understand. The browser will request the image data, attempt to parse it, and
+upon failing, will discard it without rendering anything at all. An image source that fails to render outside of modern browsers would be a
+huge point of failure for our content, and for the web at large—a broken image and wasted bandwidth to a huge number of users around
+the world. You shouldn't sacrifice a more resilient web for the sake of a more performant one.
+
+For a long time, our single-minded friend `<img>` made it exceptionally difficult to use any new image format, no matter how promising
+it seemed. Remember, `<img>` only supported a single source file, and was hyper-optimized to transfer that file quickly—so quickly,
+in fact, that we couldn't intercept that request via JavaScript. Until recently, the only viable option was to serve all users the brand
+new type of image, and request one of the “legacy" formats when the browser fired an error—incurring a second file transfer after the first one was wasted.
+
+For that reason and more, `<img>` as it had existed for decades had to change. In the next module, [Responsive Images](/learn/images/responsive-images/), you'll learn about the
+features introduced to the HTML specification to address these issues and how to use them in your day-to-day work.
+
diff --git a/src/site/content/en/learn/images/cdn/index.md b/src/site/content/en/learn/images/cdn/index.md
new file mode 100644
index 00000000000..2726e726205
--- /dev/null
+++ b/src/site/content/en/learn/images/cdn/index.md
@@ -0,0 +1,119 @@
+---
+title: 'Image content delivery networks'
+authors:
+  - matmarquis
+description: Learn how image CDNs have the ability to transform and optimize the contents of an image.
+date: 2023-02-01
+tags:
+  - images
+---
+
+You may already be familiar with the core concept of a content delivery network (CDN): a network of distributed but interconnected
+servers that quickly and efficiently delivers assets to users. When a file is uploaded to a CDN provider, a duplicate will be created
+on the other nodes of the CDN network around the world. When a user requests a file, the data will be sent by the node geographically
+closest to that user, reducing latency. The distributed nature of CDNs also provides redundancy in the event of network outages or
+hardware failure, and load balancing to mitigate spikes in traffic.
+
+An [image CDN](/image-cdns/) can provide all these benefits, with one key difference: the ability to transform and
+optimize the contents of an image based on strings the URL used to access it.
+
+A user will upload a canonical, high-resolution image to the provider, which will generate a URL used to access it:
+
+```html
+https://res.cloudinary.com/demo/image/upload/sample.jpg
+```
+
+Though the exact syntax used will vary from one provider to another, at a minimum all image CDNs allow you to alter a source
+image's dimensions, encoding, and compression settings. [Cloudinary](https://cloudinary.com/), for example,
+performs [dynamic resizing](https://cloudinary.com/documentation/resizing_and_cropping#setting_the_resize_dimensions) of an
+uploaded image through the following syntaxes: `h_` followed by the numerical height in pixels, `w_` followed by the width,
+and a `c_` value that allows you to specify [detailed information about how the image should be scaled or cropped](https://cloudinary.com/documentation/resizing_and_cropping#crop).
+
+Any number of transforms can be applied by adding comma-separated values to the URL, prior to the filename and extension,
+meaning that the uploaded image can be manipulated as-needed through the `src` of the `img` element that requests it.
+
+```html
+<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
+```
+
+The first time a user visits the URL containing these transforms, a new version of the image proportionally scaled to a
+width of 400px (`w_400`) is generated and sent. That newly-created file is then cached across the CDN so it can be sent
+to any user requesting the same URL, rather than recreated on-demand.
+
+Though not uncommon for image CDN providers to offer [software development kits](https://cloudinary.com/documentation/cloudinary_sdks)
+to facilitate advanced usage and integration with various technology stacks, this predictable URL pattern alone allows us to easily
+turn a single uploaded file into a viable `srcset` attribute without the need for any other development tooling:
+
+```html
+<img
+  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
+  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
+      	https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
+      	https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
+  alt="…">
+```
+
+We're able to manually specify our desired level of compression using what should now be a familiar syntax: `q_`, short
+for "quality," followed by the numerical shorthand for compression level:
+
+```html
+<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">
+```
+
+It's rare that you'll need to include this information manually, however, thanks to a set of incredibly powerful features
+provided by most image CDNs: fully automatic compression, encoding, and content negotiation.
+
+
+## Automated compression
+
+The computing power image CDNs have at their disposal means they're able to offer an incredibly powerful feature: analyzing
+the content of an image to algorithmically determine its ideal compression level and encoding settings, just as you or I would
+manually fine-tune compression for each one of our images.
+
+These algorithms automate the decisions you might make balancing file size and perceptual quality, analyzing image content for
+measurable signs of degradation and fine-tuning compression settings accordingly. This frequently means huge reductions in file
+size compared to the one-size-fits-all manual approach to compression settings.
+
+As complex as this process might sound, implementation couldn't be much simpler: for Cloudinary, the addition of `q_auto` in an
+image URL enables this feature:
+
+```html
+<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
+<!-- 250 KB-->
+
+<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
+<!-- 134 KB-->
+```
+
+## Automated encoding and content negotiation
+
+Upon receiving a request for an image, image CDNs determine the most modern encoding the browser supports through the
+[HTTP headers](https://developer.mozilla.org/docs/Web/HTTP/Headers) sent by the browser alongside requests for assets—specifically,
+the `Accept` header. This header indicates the encodings that the browser is able to understand, using the same
+[media types](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) we would use to populate the `type`
+attribute of a `<picture>` element's `<source>`.
+
+For example, adding the `f_auto` parameter to the list of image transforms in an asset URL explicitly tells Cloudinary to
+deliver the most efficient encoding the browser is able to understand:
+
+```html
+<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
+```
+
+The server then generates a version of the image with that encoding and caches the result for all subsequent users with the same
+level of browser support.  That response includes a [`Content-Type` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)
+to explicitly inform the browser of the file's encoding, regardless of the file extension. Even though a user with a modern browser will make a
+request for a file ending in `.jpg`, that request will be accompanied by a header informing the server that AVIF is supported, and the server
+will send an AVIF encoded file along with an explicit instruction to treat it as AVIF.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/JyJi8gXuacJB0L2puHbK.png", alt="CDN user interface.", width="800", height="649" %}
+
+The net result is a process that not only absolves you of creating alternately encoded files and of manually fine-tuning your compression settings
+(or maintaining a system that does these tasks for you), but does away with the need to use `<picture>` and the `type` attribute to effectively
+deliver those files to users. So, using the `srcset` and `sizes` syntaxes alone can still provide your users with images encoded as—for example—AVIF,
+falling back to WebP (or JPEG-2000, for Safari alone), falling back again to the most sensible legacy encoding.
+
+The drawbacks of using an image CDN are more logistical than technical, chief among them being cost. While it is common for image CDNs to
+offer feature-robust free plans for personal usage, generating image assets requires bandwidth and storage space for uploads, processing on
+the server to transform images, and additional space for the cached transform results—so advanced usage and high-traffic applications may require a paid plan.
+
diff --git a/src/site/content/en/learn/images/cms/index.md b/src/site/content/en/learn/images/cms/index.md
new file mode 100644
index 00000000000..b759affd858
--- /dev/null
+++ b/src/site/content/en/learn/images/cms/index.md
@@ -0,0 +1,165 @@
+---
+title: 'Site Generators, frameworks, and CMSs'
+authors:
+  - matmarquis
+description: Discover how CMSs such as WordPress, and other site generators can make it easier to use responsive images.
+date: 2023-02-01
+tags:
+  - images
+---
+
+While certainly an improvement over manually saving alternate cuts of each image and hand-optimizing them through a tool like 
+[Squoosh.app](https://squoosh.app/), automating image compression as a step in the development process has some limitations. For one, you may not 
+always have full control over the images used throughout a site—most user-facing images on the web are _content_ concerns more 
+than development concerns, uploaded by users or editors, rather than living in a repository alongside development assets like 
+JavaScript and stylesheets.
+
+This will typically necessitate more than one process for image management: a development-level task for the image assets used in 
+building and maintaining a site—backgrounds, icons, logos, and so on—and another concerned with image assets generated through _use_
+ of the site, such as photographs embedded in a post by an editorial team, or an avatar uploaded by a user. While the context may 
+ differ, the end goals are the same: automated encoding and compression based on settings defined by the development team.
+
+Fortunately, the image processing libraries you’ve come to understand from your local development workflows can be used in any number
+ of contexts. And while there can never be a one-size-fits-all approach to your responsive image markup, these systems provide sensible
+  defaults, configuration options, and API hooks to ease their implementation.
+
+## Static Site Generators
+
+Compared to task-runners, there’s some similarity in the way static site generators such as Jekyll or Eleventy approach images. Using 
+these tools to produce a deployment-ready website requires management of assets, including CSS minification or transpiling and bundling 
+of JavaScript. As you might imagine, this means these tools enable you to process image assets the same way, using many of the libraries 
+you’ve already learned about.
+
+The official [image plugin for Eleventy](https://www.11ty.dev/docs/plugins/image/) uses [Sharp](https://www.npmjs.com/package/sharp) to provide resizing, generation of multiple source sizes, re-encoding, and compression, just like some of the tasks you’ve learned about here.
+
+Unlike a task-runner, a static site generator has direct insight into both the configuration and usage of those libraries,
+ and the markup being generated for the production site—meaning it can do a great deal more to automate our responsive image 
+ markup. For example, when [invoked as part of a shortcode for displaying images](https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/), this plugin will output HTML according 
+ to the configuration options passed along to Sharp.
+
+```javascript
+
+const Image = require("@11ty/eleventy-img");
+module.exports = function(eleventyConfig) {
+
+async function imageShortcode(src, alt, sizes="100vw") {
+  let metadata = await Image(src, {
+  formats: ["avif", "webp", "jpeg"],
+  widths: [1000, 800, 400],
+  outputDir: "_dist/img/",
+  filenameFormat: function( id, src, width, format, options ) {
+      const ext = path.extname( src ),
+        name = path.basename( src, ext );
+
+      return `${name}-${width}.${format}`
+  }
+  });
+
+  let imageAttributes = {
+  alt,
+  sizes,
+  loading: "lazy"
+  };
+
+  return Image.generateHTML(metadata, imageAttributes);
+}
+
+eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
+};
+```
+
+This shortcode could then be used in place of the default image syntax:
+
+```markdown
+{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
+```
+
+If configured to output multiple encodings, as above, the generated markup will be a `<picture>` element containing
+ corresponding `<source>` elements, `type` attributes, and `srcset` attributes already fully populated with a list of 
+  generated candidate sizes. 
+
+```html
+<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
+```
+
+Of course, this plugin won’t be able to _generate_ a viable `sizes` attribute, as it can’t know the ultimate size and position 
+of the image in the rendered layout, but it does accept one as input when generating your markup—another job for RespImageLint.
+
+## Frameworks
+
+Client-side rendering frameworks will require a task-runner or bundler like Webpack to edit, encode, and compress image assets 
+themselves. [Responsive-loader](https://www.npmjs.com/package/responsive-loader), for example, also uses the Sharp library to re-save image assets. It then allows you to 
+then `import` your images as objects:
+
+```javascript
+  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
+  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
+  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
+```
+
+These imported images can then be used through abstractions like [React's Image component](https://reactnative.dev/docs/image), or to populate your responsive 
+image markup directly:
+
+```html
+<picture>
+  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
+  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
+  <img
+    src={imageDefault.src}
+    srcSet={imageDefault.srcSet}
+    width={imageDefault.width}
+    height={imageDefault.height}
+    sizes='…'
+    loading="lazy"
+  />
+```
+
+A framework that does client side rendering is a strong candidate for [Lazysizes](https://www.npmjs.com/package/lazysizes) and `sizes="auto"`—giving you almost fully
+automated responsive images.
+
+## Content Management Systems
+
+WordPress was one of the earliest adopters of native responsive images markup, and the API has been gradually improved since
+being [introduced in WordPress 4.4](https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/) with support for WebP and control over the output mime type. WordPress core is designed to make use of the [ImageMagick PHP extension](https://www.php.net/manual/en/book.imagick.php) 
+(or, absent that, the [GD](https://www.php.net/manual/en/book.image.php) library). 
+
+When an image is uploaded through the WordPress admin interface, that source image is used to generate user-facing files on
+the server, in much the same way as you would on your local machine. By default, any image output by WordPress will come
+with a generated `srcset` attribute based on [the image sizes configured in your theme](https://developer.wordpress.org/apis/responsive-images/).
+
+Two key settings that can be configured for generated images are the [compression quality](https://developer.wordpress.org/reference/hooks/wp_editor_set_quality/) and the [output mime type](https://developer.wordpress.org/reference/hooks/image_editor_output_format/).
+
+For example, to set the default compression quality to `70` for all generated images, use the following:
+
+```php
+add_filter( 'wp_editor_set_quality', function() { return 70; } );
+```
+
+For even better compression, switch the output format for uploaded JPEG images to WebP with the following:
+```php
+add_filter( 'image_editor_output_format', function( $mappings ) {
+  $mappings[ 'image/jpeg' ] = 'image/webp';
+	return $mappings;
+} );
+```
+
+Given that WordPress has full understanding of all [alternate cuts](https://developer.wordpress.org/reference/functions/add_image_size/)
+and encodings it generates from an uploaded image, it can provide helper functions like
+[`wp_get_attachment_image_srcset()`](https://developer.wordpress.org/reference/functions/wp_get_attachment_image_srcset/) to
+retrieve the full, generated `srcset` value of an image attachment.
+
+As you'll likely have guessed by this point, working with the `sizes` attribute is a little more fraught. Absent any information
+about how images will be used in a layout, WordPress currently defaults to a `sizes` value that effectively says "this image
+should occupy 100% of the available viewport, up to the largest source's intrinsic size"—a predictable default, but not a correct
+one for any real-world application. Be sure to make use of [`wp_calculate_image_sizes()`](https://developer.wordpress.org/reference/hooks/wp_calculate_image_sizes/)
+to set contextually-appropriate `sizes` attributes in your templates.
+
+Of course, there are countless WordPress plugins dedicated to making modern image workflows faster for development teams and users alike.
+Perhaps most excitingly, plugins like [Jetpack's Site Accelerator](https://jetpack.com/support/site-accelerator/) (formerly "Photon")
+can provide _server-side_ negotiation for encodings, ensuring that users will receive the smallest, most efficient encoding that their
+browser is able to support without the need for `<picture>` and `type` markup pattern. It does this through use of an image content
+delivery network—a technology you can make use of yourself, independent of your CMS.
+
+All of this is also true of hosted CMS solutions like Shopify, though the mechanisms themselves will differ somewhat: offering similar
+hooks for [generating alternate image sources and corresponding `srcset` attributes](https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid#provide-multiple-image-size-options-with-srcset)
+and [art direction through the `<picture>` element](https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid#art-direction).
diff --git a/src/site/content/en/learn/images/conclusion/index.md b/src/site/content/en/learn/images/conclusion/index.md
new file mode 100644
index 00000000000..f63fd0e2fb0
--- /dev/null
+++ b/src/site/content/en/learn/images/conclusion/index.md
@@ -0,0 +1,20 @@
+---
+title: 'Conclusion'
+authors:
+  - matmarquis
+description: Some additional resources.
+date: 2023-02-01
+tags:
+  - images
+---
+
+Congratulations, you've made it to the end! By now you’ve learned a lot about how images work on the web, and the part that they—and you—can play in building a faster, more efficient experience for users everywhere.
+
+## Additional resources
+
+* [HTTP Archive’s annual state of the web report](https://almanac.httparchive.org/en/2022/)
+* [web.dev - Lazy loading images](/lazy-loading-images/)
+* [web.dev - Learn Accessibility: Images](/learn/accessibility/images/)
+* [MDN - SVG](https://developer.mozilla.org/docs/Web/SVG)
+* [MDN - Image file type and format guide](https://developer.mozilla.org/docs/Web/Media/Formats/Image_types)
+* [MDN - Responsive Images](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
diff --git a/src/site/content/en/learn/images/descriptive/index.md b/src/site/content/en/learn/images/descriptive/index.md
new file mode 100644
index 00000000000..ee60b3d7c9f
--- /dev/null
+++ b/src/site/content/en/learn/images/descriptive/index.md
@@ -0,0 +1,303 @@
+---
+title: 'Descriptive syntaxes'
+authors:
+  - matmarquis
+description: Using srcset and sizes to provide the browser with information about image sources and how they'll be used.
+date: 2023-02-01
+tags:
+  - images
+---
+
+In this module, you'll learn how to give the browser a choice of images so that it can make the best decisions about what to display. `srcset`
+isn't a method for swapping image sources at specific breakpoints, and it isn't meant to swap one image for another. These syntaxes allow the
+browser to solve a very difficult problem, independent of us: seamlessly requesting and rendering an image source tailored to a user's browsing context,
+including viewport size, display density, user preferences, bandwidth, and countless other factors.
+
+It's a big ask—certainly more than we want to consider when we're simply marking up an image for the web, and doing it well involves more
+information than we can access.
+
+## Describing density with `x`
+
+An `<img>` with a fixed width will occupy the same amount of the viewport in any browsing context, regardless of the _density_ of a user's
+display—the number of physical pixels that make their screen. For example, an image with an inherent width of `400px` will occupy almost
+the entire browser viewport on both the original Google Pixel and much newer Pixel 6 Pro—both devices have a normalized `412px`
+[logical pixel](https://developer.mozilla.org/docs/Glossary/CSS_pixel) wide viewport.
+
+The Pixel 6 Pro has a much _sharper_ display, however: the 6 Pro has a _physical_ resolution of 1440 × 3120 pixels, while the
+Pixel is 1080 × 1920 pixels—that is, the number of hardware pixels that make up the screen itself.
+
+The ratio between a device's logical pixels and physical pixels is the _device pixel ratio_ for that display (DPR). DPR is
+calculated by dividing the device's actual screen resolution by a viewport's CSS pixels.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/2YTBM6TXRoEE2Q3XbFhX.png", alt="A DPR of 2 displayed in a console window.", width="800", height="277" %}
+
+So, the original Pixel has a DPR of 2.6, while the Pixel 6 Pro has a DPR of 3.5.
+
+The iPhone 4, the first device with a DPR greater than 1, reports a device pixel ratio of 2—the physical resolution of the screen is
+double the logical resolution. Any device prior to the iPhone 4 had a DPR of 1: one logical pixel to one physical pixel.
+
+If you view that `400px`-wide image on a display with a DPR of `2`, each logical pixel is being rendered across four of the
+display's physical pixels: two horizontal and two vertical. The image doesn't benefit from the high-density display—it will look the
+same as it would on a display with a DPR of `1`. Of course, anything "drawn" by the browser's rendering engine—text, CSS shapes, or SVGs,
+for example—will be drawn to suit the higher-density display. But as you learned from [Image Formats and Compression](/learn/images/raster-images/), raster images are fixed
+grids of pixels. While it may not always be glaringly obvious, a raster image upscaled to suit a higher-density display will look
+low-resolution compared to the surrounding page.
+
+In order to prevent this upscaling, the image being rendered has to have an intrinsic width of at least `800` pixels. When scaled down
+to fit a space in a layout 400 logical pixels wide, that 800-pixel image source has double the pixel density—on a display with a DPR of `2`,
+it'll look nice and sharp.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/IoJjwpreGIT7LwRThaWn.png", alt="Close up of a flower petal showing disparity in density.", width="800", height="417" %}
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'QWBGVyo',
+height: 300,
+theme: dark,
+tab: 'html,css,result'
+} %}
+
+Since a display with a DPR of `1` can't make use of the increased density of an image, it will be _downscaled_ to match the
+display—and as you know, a _downscaled_ image will look just fine. On a low-density display, an image suitable for higher-density
+displays will look like any other low-density image.
+
+As you learned in [Images and Performance](/learn/images/performance-issues/), a user with a low-density display viewing an image source scaled down to `400px`
+will only _need_ a source with an inherent width of `400px`. While a much larger image would work for all users visually, a huge,
+high resolution image source rendered on a small, low density display will _look_ like any other small, low density image, but _feel_ far slower.
+
+As you might guess, _mobile_ devices with a DPR of 1 are [vanishingly rare](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/),
+though it is still [common in "desktop" browsing contexts](https://twitter.com/TimVereecke/status/1587878439729725442). According to data
+shared by [Matt Hobbs](https://nooshu.com), approximately 18% of  [GOV.UK](https://www.gov.uk/) browsing sessions from November 2022 report a DPR of 1. While high-density images would _look_ the way those users might expect, they'll come at a much higher bandwidth and processing cost—of
+particular concern to users on the older and less powerful devices still likely to have low-density displays.
+
+Using `srcset` ensures that only devices with high-resolution displays receive image sources large enough to look sharp, without passing that same
+bandwidth cost along to users with lower-resolution displays.
+
+The `srcset` attribute identifies one or more comma-separated _candidates_ for rendering an image. Each candidate is made up of
+two things: a URL, just like you would use in `src`, and a syntax that _describes_ that image source. Each candidate in `srcset`
+is described by its inherent _width_ ("`w` syntax") or intended _density_ ("`x` syntax").
+
+The `x` syntax is a shorthand for "this source is appropriate for a display with this density"—a candidate followed by `2x` is
+appropriate for a display with a DPR of 2.
+
+```html
+<img src="low-density.jpg" srcset="double-density.jpg 2x" alt="...">
+```
+
+Browsers that support `srcset` will be presented with two candidates: `double-density.jpg`, which `2x` describes as appropriate
+for displays with a DPR of 2, and `low-density.jpg` in the `src` attribute—the candidate selected if nothing more appropriate is
+found in `srcset`. For browsers without support for `srcset`, the attribute and its contents will be ignored—the contents of `src`
+will be requested, as usual.
+
+It's easy to mistake the  values specified in the `srcset` attribute for instructions. That `2x` informs the browser that the
+associated source file would be suitable for use on a display with a DPR of 2—information about the source itself. It doesn't tell
+the browser how to use that source, just informs the browser how the source could be used. It's a subtle but important distinction: this
+is a double density _image_, not an image for use on a double density _display_.
+
+The difference between a syntax that says "this source is appropriate for `2x` displays" and one that says "use this source on `2x` displays"
+is slight in print, but display density is only one of a huge number of interlinked factors that the browser uses to decide on the candidate
+to render, only some of which you can know. For example: individually, it's possible for you to determine that a user has enabled a
+bandwidth-saving browser preference through the `prefers-reduced-data` media query, and use that to always opt users into low-density images
+regardless of their display density—but unless implemented consistently, by every developer, on every website, it wouldn't be of much use to a user.
+They might have their preference respected on one site, and run into a bandwidth-obliterating wall of images on the next.
+
+The deliberately vague resource selection algorithm used by `srcset`/`sizes` leaves room for browsers to decide to select lower density
+images with bandwidth dips, or based on a preference to minimize data usage, without us taking on responsibility for how, or when, or at
+what threshold. There's no sense in taking on responsibilities—and additional work—that the browser is better equipped to handle for you.
+
+## Describing widths with `w`
+
+`srcset` accepts a second type of descriptor for image source candidates. It's a far more powerful one—and for our purposes, a
+great deal easier to understand. Rather than flagging a candidate as having the appropriate dimensions for a given display density,
+the `w` syntax describes the inherent width of each candidate source. Again, each candidate is identical save for their dimensions—the same
+content, the same cropping, and the same aspect ratio. But in this case, you want the user's browser to choose between two candidates:
+small.jpg, a source with an inherent width of 600px, and large.jpg, a source with an inherent width of 1200px.
+
+```html
+srcset="small.jpg 600w, large.jpg 1200w"
+```
+
+This doesn't tell the browser what to _do_ with this information—just supplies it with a list of candidates for displaying the image.
+Before the browser can make a decision about which source to render, you need to provide it with a little more information: a
+description of how the image will be rendered on the page. To do that, use the `sizes` attribute.
+
+## Describing usage with `sizes`
+
+Browsers are incredibly performant when it comes to transferring images. Requests for image assets will be initiated long
+before requests for stylesheets or JavaScript—oftentimes even before the markup has been fully parsed. When the browser
+makes these requests, it has no information about the page itself, apart from the markup—it may not have even initiated requests
+for external stylesheets yet, let alone applied them. At the time the browser parses your markup and starts making external
+requests, it only has browser-level information: the size of the user's viewport, the pixel density of the user's display,
+user preferences, and so on.
+
+This doesn't tell us anything about how an image is intended to be rendered in the page layout—it can't even use the viewport
+as a proxy for the upper bound of the `img` size, as it may occupy a horizontally scrolling container. So we need to
+provide the browser with this information and do it using markup. That is all we'll be able to use for these requests.
+
+Like `srcset`, `sizes` is intended to make information about an image available as soon as the markup is parsed. Just as the `srcset`
+attribute is shorthand for "here are the source files and their inherent sizes," the `sizes` attribute is shorthand for "here
+is the size of the rendered image _in the layout_." The way you describe the image is relative to the viewport—again, viewport
+size is the only layout information the browser has when the image request is made.
+
+That may sound a little convoluted in print, but it's far easier to understand in practice:
+
+```html
+<img
+ sizes="80vw"
+ srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
+ src="fallback.jpg"
+ alt="...">
+```
+
+Here, this `sizes` value informs the browser that the space in our layout that the `img` occupies has a width of `80vw`—80% of
+the viewport. Remember, this isn't an _instruction_, but a description of the image's size in the page layout. It doesn't say "make this
+image occupy 80% of the viewport," but "this image will end up occupying 80% of the viewport once the page has rendered."
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'PoBWLYP',
+height: 500,
+theme: dark,
+tab: 'html,result'
+} %}
+
+As a developer, your job is done. You've accurately described a list of candidate sources in `srcset` and the width of your image
+in `sizes`, and, just as with the `x` syntax in `srcset`, the rest is up to the browser.
+
+But in the interest of fully understanding how this information is used, let's take a moment to walk through the decisions that
+a user's browser makes upon encountering this markup:
+
+You've informed the browser that this image will take up 80% of the available viewport—so, if we were to render this `img` on a
+device with a 1000-pixel-wide viewport, this image will occupy 800 pixels. The browser will then take that value and divide against
+it the widths of each of the image source candidates we specified in `srcset`. The smallest source has an inherent size of 600 pixels,
+so: 600÷800=.75. Our medium image is 1200 pixels wide: 1200÷800=1.5. Our largest image is 2000 pixels wide: 2000÷800=2.5.
+
+The results of those calculations (`.75`, `1.5`, and `2.5`) are, effectively, DPR options _specifically tailored to the user's
+viewport size_. Since the browser also has information on the user's display density at hand, it makes a series of decisions:
+
+At this viewport size, the `small.jpg` candidate is discarded regardless of the user's display density—with a calculated DPR lower
+than `1`, this source would require upscaling for any user, so it isn't appropriate. On a device with a DPR of `1`, `medium.jpg` provides the
+closest match—that source is appropriate for display at a DPR of `1.5`, so it is a little larger than necessary, but remember that downscaling is
+a visually seamless process. On a device with a DPR of 2,`large.jpg` is the closest match, so it gets selected.
+
+If the same image is rendered on a 600 pixel wide viewport, the result of all that math would be completely different: 80vw is now 480px.
+When we divide our sources' widths against that, we get `1.25`, `2.5`, and `4.1666666667`. At this viewport size, `small.jpg` will be chosen
+on 1x devices, and `medium.jpg` will match on 2x devices.
+
+This image will look identical in all of these browsing contexts: all our source files are exactly the same apart from their dimensions,
+and each one is being rendered as sharply as the user's display density will allow. However, instead of serving `large.jpg` to every user
+in order to accommodate the largest viewports and the highest density displays, users will always be served the smallest suitable candidate.
+By using a descriptive syntax rather than a prescriptive one, you don't need to manually set breakpoints and consider future viewports and
+DPRs—you simply supply the browser with information and allow it to determine the answers for you.
+
+Because our `sizes` value is relative to the viewport and completely independent of the page layout, it adds a layer of complication.
+It's rare to have an image that _only_ occupies a percentage of the viewport, without any fixed-width margins, padding, or influence
+from other elements on the page. You'll frequently need to express the width of an image using a combination of units; percentages, `em`, `px`, and so on.
+
+Fortunately, you can use `calc()` here—any browser with native support for responsive images will support `calc()` as well, allowing us to
+mix-and-match CSS units—for example, an image that occupies the full width of the user's viewport, minus a `1em` margin on either side:
+
+```html
+<img
+	sizes="calc(100vw-2em)"
+	srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, x-large.jpg 2400w"
+	src="fallback.jpg"
+	alt="...">
+```
+
+## Describing breakpoints
+
+If you've spent much time working with responsive layouts, you've likely noticed something missing from these examples:
+the space an image occupies in a layout is very likely to change across our layout's breakpoints. In that case, you need
+to pass a little more detail along to the browser: `sizes` accepts a comma-separated set of candidates for the rendered size of the
+image, just like `srcset` accepts comma-separated candidates for image sources. Those conditions use the familiar media query syntax.
+This syntax is first-match: as soon as a media condition matches, the browser stops parsing the `sizes` attribute, and the value
+specified is applied.
+
+Say you have an image meant to occupy 80% of the viewport, minus one `em` of padding on either side, on viewports above 1200px—on
+smaller viewports, it occupies the full width of the viewport.
+
+```html
+  <img
+     sizes="(min-width: 1200px) calc(80vw - 2em), 100vw"
+     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
+     src="fallback.jpg"
+     alt="...">
+```
+{% Codepen {
+user: 'web-dot-dev',
+id: 'RwBoYRx',
+height: 500,
+theme: dark,
+tab: 'html,result'
+} %}
+
+If the user's viewport is greater than 1200px, `calc(80vw - 2em)` describes the width of the image in our layout. If the
+`(min-width: 1200px)` condition _doesn't_ match, the browser moves on to the next value. Because there isn't a specific
+media condition tied to this value, `100vw` is used as a  default. If you were to write this `sizes` attribute using
+`max-width` media queries:
+
+```html
+  <img
+     sizes="(max-width: 1200px) 100vw, calc(80vw - 2em)"
+     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
+     src="fallback.jpg"
+     alt="...">
+```
+{% Codepen {
+user: 'web-dot-dev',
+id: 'BaPQOzO',
+height: 500,
+theme: dark,
+tab: 'html,result'
+} %}
+
+In plain language: "does `(max-width: 1200px)` match? If not, move on. The next value—`calc(80vw - 2em)`—has no qualifying condition,
+so this is the one selected.
+
+Now that you've provided the browser with all this information about your `img` element—potential sources,  inherent widths,
+and how you intend to present the image to the user—the browser uses a fuzzy set of rules for determining what to do with
+that information. If that sounds vague, well, that's because it is—by design. The source-selection algorithm encoded in the
+HTML specification is _explicitly_ vague on how a source should be chosen. Once the sources, their descriptors, and how
+the image will be rendered has all been parsed, the browser is free to do whatever it wants—you _can't_ know for certain which
+source the browser will choose.
+
+A syntax that says "use this source on a high-resolution display" would be predictable, but it wouldn't address the core problem
+with images in a responsive layout: conserving user bandwidth. A screen's pixel density is only tangentially related to internet
+connection speed, if at all. If you are using a top-of-the-line laptop, but browsing the web by way of a metered connection, tethered
+to your phone, or using a shaky airplane wifi connection—you might want to opt out of high-resolution image sources, regardless of
+the quality of your display.
+
+Leaving the final say to the browser allows for far more performance improvements than we could manage with a strictly prescriptive
+syntax. For example: in most browsers, an `img` using the `srcset` or `sizes` syntax will never bother requesting a source with smaller
+dimensions than one that the user already has in their browser's cache. What would be the point in making a new request for a source
+that would look identical, when the browser can seamlessly downscale the image source it already has? But if the user scales their
+viewport up to the point where a new image is needed in order to avoid upscaling, _that_ request will still get made, so everything
+looks the way you expect.
+
+That lack of explicit control can sound a little scary at face value, but because you're using source files with identical
+content, we're no more likely to present users with a "broken" experience than we would with a single-source `src`, regardless of
+the decisions made by the browser.
+
+## Using `sizes` and `srcset`
+
+This is a lot of information—both for you, the reader, and for the browser. `srcset` and `sizes` are both dense syntaxes,
+describing a shocking amount of information in relatively few characters. That is, for better or worse, by design: making
+these syntaxes less terse—and more easily parsed by us humans—could have made them more difficult for a _browser_ to parse. The
+more complexity added to a string, the more potential there is for parser errors or unintentional differences in behavior
+from one browser to another. There's an upside here, however: a syntax more easily read by machines is a syntax more easily written
+by them.
+
+`srcset` is a clear-cut case for automation. It's rare that you'll be hand-crafting multiple versions of your images for a
+production environment, instead automating the process using a task runner like Gulp, a bundler like Webpack, a third-party
+CDN like Cloudinary, or functionality already built into your CMS of choice. Given enough information to generate our sources
+in the first place, a system would have enough information to write them into a viable `srcset` attribute.
+
+`sizes` is a little more difficult to automate. As you know, the only way a system can calculate the size of an image in a
+rendered layout is to have _rendered_ the layout. Fortunately, a number of developer tools have popped up to abstract away
+the process of hand-writing `sizes` attributes—with an efficiency you could never match by hand.
+[respImageLint](https://github.com/ausi/respimagelint), for example, is a snippet of code intended to vet your `sizes` attributes
+for accuracy and provide suggestions for improvement. The [Lazysizes](https://github.com/aFarkas/lazysizes) project compromises
+some speed for efficiency by deferring image requests until after the layout has been established, allowing JavaScript to
+generate  `sizes` values for you. If you're using a fully client-side rendering framework such as React or Vue, there are a
+number of solutions for authoring and/or generating `srcset` and `sizes` attributes, which we'll discuss further in [CMS and Frameworks](cms).
diff --git a/src/site/content/en/learn/images/gif/index.md b/src/site/content/en/learn/images/gif/index.md
new file mode 100644
index 00000000000..9968c9a4eb3
--- /dev/null
+++ b/src/site/content/en/learn/images/gif/index.md
@@ -0,0 +1,89 @@
+---
+title: 'Image formats: GIF'
+authors:
+  - matmarquis
+description: Understand the GIF image format, along with an explanation of how image encoding works. 
+date: 2023-02-01
+tags:
+  - images
+---
+
+While not terribly useful on the modern web, GIF (Graphics Interchange Format) provides a solid introduction to the core
+concepts of image encoding.
+
+GIF can be thought of as a wrapper for image data. It has a viewport, of sorts, called a "logical screen," to which individual
+frames of image data are drawn—a bit like layers in a Photoshop document. That's how GIF supports its flipbook-like animation:
+a single frame is drawn to the logical screen, then replaced by another, then another. Of course, this distinction isn't important
+when we're dealing with a static GIF, made up of a single frame drawn to the logical screen.
+
+GIF uses a lossless data compression method—a variant of the "[Lempel–Ziv–Welch](https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch)"
+algorithm, if you're curious. The finer details of how this algorithm works are more than we need to get into here, but at a high level: it
+works a bit like "Uglifying" JavaScript, where repeated strings of characters throughout the file are saved to a sort of internal dictionary,
+so they can be referenced rather than repeated every time they appear.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/AWgIX677XevD9J0ZUBo3.png", alt="Visualization of the gif reference using a four-by-four grid.", width="800", height="873" %}
+
+Granted, the [algorithm isn't quite as simple](https://giflib.sourceforge.net/whatsinagif/lzw_image_data.html) as a paint-by-number. It steps
+again through the generated table of color codes to find repeated sequences of pixel colors and creates a second table of referencable codes. At no
+point is any image data lost, however—just sorted and reorganized in a way that can be read without fundamentally changing it.
+
+While GIF technically uses lossless _compression_, it does have a major limitation that severely impacts the quality of the images:
+saving an image as a GIF will always result in reduced fidelity, unless the image already uses 256 colors or less.
+
+Each frame drawn to the GIF's logical screen can only contain a maximum of 256 colors. GIF also supports “index transparency,” where a
+transparent pixel will reference the index of a transparent “color” in the color table.
+
+The practice of reducing a range of values to a smaller, approximated set of output values is called _quantization_, a term you'll be seeing a lot
+when learning about image encodings. The results of this palette quantization are usually obvious:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/PjWX2BD4QXqj3efvX7MP.png", alt="Static gif example", width="393", height="399" %}
+
+To better understand this process, think back to the raster image grid you were able to recreate from my description.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/pwUWoFFo7MVq58e05NnK.png", alt="Three horizontal blue boxes followed by one red box", width="652", height="204" %}
+
+This time around, add a little more detail to that original image: a few more pixels, one of which is a slightly darker shade of blue:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/m9BkyRb7yy1zLBlvlHka.png", alt="Blue to red horizontal boxes in a two-by-four configuration, with one blue box shaded darker than the others.", width="752", height="400" %}
+
+Absent any compression—so to speak—you could describe this grid as:
+
+> Row one, column one is #0000FF. Row one, column two is #0000FF. Row one, column three is #0000FF. Row one, column four is #FF0000. Row two, column one is #0000FF. Row two, column two is #000085. Row two, column three is #0000FF. Row two, column four is #FF0000.
+
+Using something akin to GIF's lossless data compression and color indexing, you might describe it as:
+
+> A: #0000FF, B: #FF0000, C: #000085. Row one, columns one through three are A. Row one, column four is B. Row two, column one is A. Row two, column two is C. Row two, column three is A. Row two, column four is B.
+
+This manages to condense the pixel-by-pixel description in a few places (“columns one through three are…”), and saves a
+few characters by defining the repeated colors in a dictionary, of sorts, up front. There's no change to the visual fidelity.
+The information has been compressed without any loss.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/nNmCqD5iYi1QEEbDeL4M.png", alt="Blue to red horizontal boxes, with a single dark pixel at 2x2.", width="752", height="400" %}
+
+As you can see, however, the single dark blue pixel is having an outsized impact on the size of our encoding. If I were to
+limit myself to a quantized color palette, it could be reduced much further:
+
+> A: #0000FF, B: #FF0000. Row one, columns one through three are A. Row one, column four is B. Row two, columns one through three are A. Row two, column four is B.
+
+The unfortunate end result of those saved bytes is that you've lost pixel-perfection.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/YhCa9QIzzkZsyw4zyUzu.png", alt="Uniformly blue to red horizontal boxes.", width="800", height="421" %}
+
+Of course, you, the rendering engine, don't know that—the detail of the darker blue pixel was left out of how I encoded my source image.
+You've rendered the image exactly as I've encoded it, based on our shared understanding of the colors we have at hand.
+
+Now, in this exaggerated example, reducing three colors to two makes for an obvious difference in quality. Across a larger and
+more detailed image the effects might not be quite as noticeable, but they would still be visible.
+
+When encoded as a GIF, subtle gradients like shadows become mottled, with individual pixels standing out from their surroundings:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ncTFXA6KsRGAK7Rdvyoi.png", alt="Pink flowers on a green background.", width="800", height="595" %}
+
+In practice, the combination of lossless compression and palette quantization means that GIF isn't very useful in modern
+web development. Lossless compression doesn't do enough to reduce file sizes, and a reduced palette means an obvious reduction in quality.
+
+Ultimately, GIF is only an efficient format for encoding simple images that already use limited color palettes, hard edges
+rather than anti-aliasing, and solid colors rather than gradients—all use cases that are far better served by other formats.
+The smaller and more featured PNG is often a better choice for raster images, though both are far inferior to SVG in terms of file
+size and visual fidelity for use cases like icons or line art, where vector shines. The most commonly seen modern use case for GIF is
+animation, but there are far more efficient—and accessible—modern video formats to serve that purpose.
diff --git a/src/site/content/en/learn/images/history/index.md b/src/site/content/en/learn/images/history/index.md
new file mode 100644
index 00000000000..431e86a8d76
--- /dev/null
+++ b/src/site/content/en/learn/images/history/index.md
@@ -0,0 +1,108 @@
+---
+title: 'A brief history of images on the web'
+authors:
+  - matmarquis
+description: A history of images on the web, starting with the image element in 1993
+date: 2023-02-01
+tags:
+  - images
+---
+
+No matter how far along you are in learning to design and develop for the web, the `<img>` element needs very little introduction.
+[Launched in Netscape (“Mosaic,” at the time) in 1993](https://www.wired.com/2010/04/0422mosaic-web-browser/) and added to the HTML
+specification in 1995, `<img>` has long played a simple but powerful role within the web platform. The developer adds a "source" image
+file with the `src` attribute and provides a text alternative with the `alt` attribute in the event that the image cannot be rendered or
+assistive technologies request an alternative. From there, the browser has only one job: get the image data, then render it as quickly as possible.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'jOpVPJa',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+For most of web development history, working with images didn't get much more complicated than that. And, despite the modern
+web's complexity, the fundamentals of working with images haven't changed: use a web-friendly image format for compatibility,
+sensible compression to conserve bandwidth, and dimensions that suit the space the image is going to occupy in the page's layout.
+
+Using fixed-width layouts, like we did back when we thought we had more say in how users experienced the web,
+made this an uncomplicated process. It was particularly easy to set the size of the image source. For an image that occupied a space five
+hundred pixels wide and three hundred pixels tall, it was a case of specifying a source image at that same size.
+
+## Images in a responsive layout
+
+Alongside a flexible layout and use of CSS media queries, "flexible images and media" are one of the three defining facets
+of [responsive web design](/learn/design/). To make an image flexible, developers began using CSS to set `max-width: 100%` on the image
+(or all images, site-wide) to tell the browser's rendering engine to prevent an image from ever overflowing its parent container by
+scaling it down. Visually, this works perfectly–downscaling a [raster image](/learn/images/raster-images/) is visually seamless. With a line or two of CSS,
+a scaled-down image will always look as though we've specified an image source that was meant to be displayed at that size.
+When rendering engines are given more image data than necessary for the space the image occupies in a layout, they are able
+to make informed decisions about how to render the reduced image, and can do so without introducing any visual artifacts or blurring.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'YzjpXBP',
+height: 500,
+theme: dark,
+tab: 'result'
+} %}
+
+You wouldn't typically want to _upscale_ an image—that is, render the `<img>` at a size larger than the intrinsic size of the source image.
+The displayed image would appear blurry and grainy-looking.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'XWBNbOx',
+height: 500,
+theme: dark,
+tab: 'result'
+} %}
+
+Using `img { max-width: 100% }` means that as a flexible container resizes, images will be downscaled as appropriate.
+Unlike setting a more rigid `width: 100%`, this also ensures that the image won't be scaled up beyond its intrinsic size.
+For a long time, that was it for the rules of working with images: use a format browsers understand, use a sensible level of
+compression, and never scale images upwards.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'gOjLpEM',
+height: 500,
+theme: dark,
+tab: 'css,result'
+} %}
+
+But as simple and effective as this approach was visually, it came at a huge performance cost. As `<img>` only supported a
+single source for the image data, this approach required us to provide an image asset with an intrinsic size as large as
+the largest size at which it could be displayed. An image meant to occupy a space in a layout that could be anywhere
+from `300px` to `2000px` wide, depending on the user's viewport size, required an image source with an intrinsic width of
+at least `2000px`. For a user who only views the page by way of a small viewport, everything would look as expected—the
+image would scale just fine. In the rendered page, a massive but scaled-down source image would _look_ no different from an
+appropriately-sized one. However, they would still be transferring and rendering a `2000px` wide image, burning through a huge
+amount of bandwidth and processing power with no tangible benefit.
+
+Things got much worse with the advent of the first "Retina" devices, as display _density_ became a concern alongside viewport
+size. An image source needs a much larger intrinsic width in order to suit a high density display. In simple terms, a display with
+double the density requires twice as many image pixels to render the image as sharply as possible.
+
+Here, developers were again able to rely on rendering engines' ability to downscale images visually. By providing the browser with
+an `800px` wide source image in `src`, then specifying that it should be displayed at `400px` wide with CSS, the result is an image
+rendered at double the pixel density:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'QWBKrjX',
+height: 700,
+theme: dark,
+tab: 'css,result'
+} %}
+
+A single source image, cut to suit the largest possible space in your layout and high-density displays, works for all users _visually_,
+of course. A huge, high resolution image source rendered on a small, low density display will look like any other small, low density image,
+but feel far slower. The user will be left bearing all the performance costs of that massive, 4000px-wide image source, to no benefit.
+
+For a long time, `<img>` largely did one thing— it "got image data and put it on the screen." It did that reasonably well, for certain,
+but `<img>` wasn't up to the task of accommodating the radical shifts in browsing context we were experiencing. While responsive web design
+became a mainstream development practice, browsers optimized the performance of `img` for nearly twenty years—but for all but the most privileged
+users, the image _content_ of pages was inefficient from the outset. No matter how quickly the browser managed to request, parse, and render
+an image source, that asset would likely be far bigger than the user needed.
diff --git a/src/site/content/en/learn/images/images.11tydata.js b/src/site/content/en/learn/images/images.11tydata.js
new file mode 100644
index 00000000000..08cab274703
--- /dev/null
+++ b/src/site/content/en/learn/images/images.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('images');
diff --git a/src/site/content/en/learn/images/index.md b/src/site/content/en/learn/images/index.md
new file mode 100644
index 00000000000..cdbdf417b12
--- /dev/null
+++ b/src/site/content/en/learn/images/index.md
@@ -0,0 +1,24 @@
+---
+title: Learn Images
+authors:
+  - matmarquis
+description: An in-depth course on images for the web.
+date: 2023-01-31
+---
+
+This course is created for beginner and advanced web developers alike, covering everything from the basics of ensuring image sources are efficiently requested and rendered, to the details of how common image formats are communicated from server to client. Throughout this course you’ll learn how to achieve the smallest possible transfer sizes for your images without compromising on their quality—at least, not in a way anyone will be able to see.
+
+You can go through the series from start to finish for a holistic understanding of how images work on the modern web, or use it as a reference for the specific concepts and markup patterns you’ll be using in your day-to-day work.
+
+For those new to web development, check out the [Learn HTML](/learn/html/) courses for the basics of using markup, [Learn CSS](/learn/css/) courses for styling fundamentals, and [Learn Responsive Design](/learn/design/) courses for an understanding of how images will be rendered in responsive layouts.
+
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn Images?
+
+{% Aside %}
+Course written by [Mat Marquis](https://hire.wil.to), with input and review from [Rachel Andrew](/authors/rachelandrew/), [Jake Archibald](/authors/jakearchibald/), [Barry Pollard](/authors/tunetheweb/), [Aaron Forinton](https://github.com/aaronforinton), [Eric Portis](https://ericportis.com/), [Zach Leatherman](https://www.zachleat.com/), and [K.Adam White](https://www.kadamwhite.com/).
+{% endAside %}
diff --git a/src/site/content/en/learn/images/jpeg/index.md b/src/site/content/en/learn/images/jpeg/index.md
new file mode 100644
index 00000000000..689bff52eec
--- /dev/null
+++ b/src/site/content/en/learn/images/jpeg/index.md
@@ -0,0 +1,139 @@
+---
+title: 'Image formats: JPEG'
+authors:
+  - matmarquis
+description: Learn about the most common image format on the web. 
+date: 2023-02-01
+tags:
+  - images
+---
+
+JPEG is the most common type of image used on the web, and with good reason: for decades, JPEG has almost invariably been the right choice for
+encoding photographs. The use case is right there in the name: JPEG stands for "Joint Photographic Experts Group," the committee responsible
+for first issuing the standard in 1992. You'll see the file extension for a JPEG as either .jpg or .jpeg, though the latter is rare in modern usage.
+
+While lossless compression passively compresses image data as best it can, JPEG's _lossy_ compression looks for opportunities to make the compression
+more efficient with tiny, often imperceptible alterations to the image data. JPEG encodes image data as eight-by-eight blocks of pixels and describes the
+blocks—not the individual pixels inside them—algorithmically.
+
+It may sound like an academic distinction on paper: "GIF uses a grid made up of pixels versus JPEG uses a grid made up of smaller grids of pixels."
+In practice, this use of blocks rather than pixels means JPEG is well suited to a much more common use case for images: the kind of subtle, layered
+gradients that make up a real world photograph.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/TFKgf2FgDGkoyg7wnVai.png", alt="Horizontal alignment of green blocks going from light to dark.", width="800", height="67" %}
+
+Describing even a very simple single-pixel gradient using GIF-style encoding would be extremely verbose:
+
+> Row one, columns one through nine are #00CC00. Row one, column ten is #00BB00. Row one, column eleven is #00AA00. Row one, column twelve is #009900. Row one, column thirteen is #008800. Row one, column fourteen is #007700. Row one, column fifteen is #006600. Row one, column sixteen is #005500.
+
+Describing a gradient using JPEG-style encoding is much, much more efficient:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ttnejYz6sQKRpzv1v8cl.png", alt="An eight-by-sixteen grid of green blocks ranging in hue from light to dark.", width="800", height="402" %}
+
+> Block one is #00CC00. Block two is a gradient from #00CC00 to #005500.
+
+Where JPEG really shines is in quantizing the level of "high frequency" detail in an image, often imperceptibly. As a result,
+saving an image as a JPEG usually means reducing the quality of that image in ways that are measurable, but not necessarily _visible_.
+[As you've learned](/learn/images/gif), GIF-style palette quantization is a relatively simple operation: reducing the number of colors in an image results in
+smaller files, but in a way that can be easy to spot with the human eye.
+
+JPEG, on the other hand, is clever about how quantization is performed: JPEG's lossy compression attempts to quantize an image
+source in a way that loosely matches the way our own psycho-visual systems quantize the world around us. In effect, JPEG tries to
+throw away details we weren't likely to see in the first place, so it can sneak additional compression past us.
+
+The human psycho-visual system does a great deal to "compress" the images you're constantly taking in. When I glance outside at my tiny garden,
+I can immediately process a huge amount of information: for example, individual brightly-colored flowers stand out. I register right away that the
+soil is a dusty gray, and the leaves are drooping—my plants need water. What I do _see_, but don't fully _process_, are the exact shape, size, angle,
+and shade of green for any of the individual dropping leaves. I can actively look for that level of detail of course, but it would simply be too much
+information to take in passively, and to no real benefit. So my psycho-visual system does a little quantization of its own, distilling that information
+to "the leaves are drooping."
+
+In effect, JPEG works the same way. JPEG's lossy compression reduces the level of detail in an image in a way that might not register at
+all to our naturally "lossy" psycho-visual systems, if done within reason—and introduces far more opportunities for bandwidth savings than
+lossless compression alone.
+
+For example, JPEG takes advantage of one of our major psycho-visual weaknesses: our eyes are more sensitive to differences in brightness
+than differences in hue. Prior to applying any compression, JPEG uses a process called "discrete cosine transformation" to split the image into
+separate frequencies—"layers," in a manner of speaking—representing _luminance_ (brightness) and _chrominance_ (color), or "luma" and "chroma."
+
+The luma layer is minimally compressed, discarding only small details that aren't likely noticeable to the human eye.
+
+The chroma layers are reduced significantly. Rather than simply quantizing the palette of the chroma layers like GIF, JPEG can perform a
+process called "subsampling" wherein a chroma layer is stored at a lower resolution. When recombined by effectively stretching the lower
+resolution chroma layers over the luma layer, the difference is often imperceptible. Slight differences in the hue might be noticeable if
+we compare the original image source and our JPEG side-by-side, but only when we know exactly what to look for.
+
+With that said, JPEG isn't perfect. As crafty as JPEG is about sneaking compression past us, it can become glaringly obvious if taken too far.
+In fact, if you've spent much time on the web—particularly in days long past—you may have noticed the result of JPEG compression taken too far:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ar5QsCECxAJLdAHFlwNd.png", alt="A highly compressed image of flowers containing many visual artifacts.", width="800", height="637" %}
+
+Compressing image data too aggressively means the level of detail is reduced further than our psycho-visual systems would naturally
+ignore, so the illusion is broken. It becomes obvious that detail is missing. Because JPEG operates in terms of blocks, the seams between
+those blocks can start to show.
+
+## Progressive JPEG
+
+Progressive JPEG (PJPEG) effectively reorders the process of rendering a JPEG. "Baseline" JPEGs are rendered from top to
+bottom as the transfer progresses, while progressive JPEG breaks rendering into a set of full-sized "scans"—likewise done
+top-to-bottom—with each scan increasing the quality of the image. The entire image appears immediately, albeit blurry,
+and grows clearer as the transfer continues.
+
+<img alt="Gif showing the superior load speed of a progressive JPEG compared to a regular JPEG." decoding="async" loading="lazy" sizes="(min-width: 800px) 800px, calc(100vw - 48px)" src="https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=800" srcset="https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=200 200w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=228 228w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=260 260w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=296 296w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=338 338w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=385 385w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=439 439w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=500 500w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=571 571w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=650 650w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=741 741w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=845 845w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=964 964w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=1098 1098w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=1252 1252w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=1428 1428w,     https://web-dev.imgix.net/image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/iLfUCvVpxOSRAOqhbYCc.gif?w=1600 1600w" width="800" height="446">
+
+It seems like a strictly technical difference on paper, but there's a huge perceptual benefit: by delivering a full-size version of
+the image right away instead of empty space, PJPEG can _feel_ faster than a baseline JPEG to the end user. In addition, except for the smallest images,
+encoding an image as PJPEG almost always means a smaller file size compared to a baseline JPEG—not by much, but every byte helps.
+
+There is one tiny trade-off, however: decoding PJPEG is more complex on the client side, which means putting a _little_ more strain on the
+browser—and a device's hardware—during rendering. That rendering overhead is difficult to quantify in exact terms, but it's very minor
+and unlikely to be noticeable except for with severely underpowered devices. It's a trade-off worth making and, all told, progressive is a
+sensible default approach whenever encoding an image as JPEG.
+
+## Using JPEG
+
+You might feel a little overwhelmed by all this information. There's good news for your day-to-day work, though: the more
+technical specifics of JPEG compression are abstracted away, instead exposed as a single "quality" setting: an integer from 0 to 100.
+0 provides the smallest possible file size, and as you might expect, the worst possible visual quality. As you progress from 0 to 100 both
+the quality and the file size increase. This setting is subjective, of course—not every tool will interpret a value of "75" the same way, and
+perceptual quality always varies according to the content of the image.
+
+To understand how this compression setting works, let's use a common web-based tool for optimizing image files: [Squoosh](https://squoosh.app/).
+
+[Squoosh](https://squoosh.app/)—maintained by the Chrome team—provides a side-by-side comparison between different methods of encoding
+and configuring image outputs, with configuration options ranging from a 0-100 global "quality" slider, to the ability to fine-tune
+details of chrominance vs. luminance resampling. The lower the "quality" number, the higher the compression, and the smaller the resulting file will be.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/17U3oSBnmzOXCvFPu0dV.png", alt="The Squoosh settings panel, with the quality slider highlighted.", width="800", height="783" %}
+
+Here, with the "quality" set to 60, the file size is reduced by 79%. Don't be fooled by the implications of this label: differences in
+quality across most of the scale will be imperceptible to the human eye, even when performing a side-by-side comparison.
+
+To convert your source image to a progressive JPEG, tick the box labeled "progressive rendering" under "advanced options."
+Some of these configuration options are almost certainly a deeper dive than the average web project will require, but they can
+provide you with a closer look at how the things you've learned about JPEG encoding impact file size and quality in real world use cases.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/2jknUAL72eJKef8m2tPP.png", alt="The Squoosh settings panel, with the progressive rendering setting highlighted.", width="800", height="781" %}
+
+There is not much to it in practical terms, despite how complicated we now know JPEG to be internally. Squoosh is just one of _countless_
+methods of saving optimized JPEGs, all of which use a similar method of determining the compression level: a single integer between 0 and 100.
+
+Determining the ideal level of compression for your images is a finesse game, given that all the complexity of JPEG encoding
+is being distilled down to a single integer, especially when so much hinges on the _content_ of an image. Like thinking about
+blinking or breathing, considering JPEG compression settings changes how we perceive them.
+
+Looking back outside now, after writing all this, my psycho-visual processing has become more manual—_now_ I'm looking at
+the individual leaves, even though the picture itself—so to speak—hasn't changed. That makes configuring JPEG compression a
+little fraught: you know exactly what kinds of visual defects to look for. By thinking about image compression in the first
+place, you're focusing on individual leaves—we're primed to spot slight blurring and the occasional compression artifact.
+The harder you look for artifacts while fine-tuning your JPEG compression settings the more likely you are to find them,
+when a user likely wouldn't. Even if that user knew exactly what to look for, they're not likely to visit a page with JPEG
+compression on their mind.
+
+For that reason, avoid the instinct to upscale an image looking for artifacts—or even look too closely at the parts of our
+images where you know artifacts will appear first. For users, faint artifacts blend in with the tiny details that their lossy
+psycho-visual systems usually gloss over. In fact, even with an understanding of the tricks JPEG tries to play, you wouldn't
+notice those same artifacts while browsing the web unless you went looking for them. For that reason, it's almost always a safe
+bet to nudge JPEG compression just a little lower than you think might be noticeable—especially when that image is going to be displayed
+_smaller_ than its intrinsic size due to direct styling, or constraints set by the surrounding layout.
+
diff --git a/src/site/content/en/learn/images/performance-issues/index.md b/src/site/content/en/learn/images/performance-issues/index.md
new file mode 100644
index 00000000000..196f2c76edb
--- /dev/null
+++ b/src/site/content/en/learn/images/performance-issues/index.md
@@ -0,0 +1,201 @@
+---
+title: 'Key performance issues'
+authors:
+  - matmarquis
+description: Learn ways to ensure that your image requests are as small and performant as possible.
+date: 2023-02-01
+tags:
+  - images
+---
+
+As it stands now, images are the web's biggest assets in terms of both [total transfer size](https://almanac.httparchive.org/en/2022/page-weight#fig-8)
+and [number of requests](https://almanac.httparchive.org/en/2022/page-weight#fig-3) per page. The median webpage's total transfer size is roughly
+[2MB, as of June 2022](https://httparchive.org/reports/page-weight), with images alone accounting for nearly half of that. It's no exaggeration
+to say that optimizing image requests may be the single biggest performance optimization you can make.
+
+Later, you'll learn how responsive images have evolved to help with the issues created by trying to serve one image for all eventualities.
+In this section, discover key performance metrics that relate to images, and how to improve them.
+
+## Deferring image requests
+
+While you're about to learn a number of ways to ensure your image requests are as small and efficient as possible, the fastest image request
+will always be the one that never gets made. So, right up front, I want to share what may be the most impactful change you can make to the way
+you deliver image assets to your users: the `loading="lazy"` attribute.
+
+```html
+<img src="image.jpg" loading="lazy" alt="…">
+```
+
+This attribute ensures that requests for images aren't made until they fall close to the user's viewport, deferring them from the initial
+page load—the time when the browser is at its busiest—and removing those requests from the critical rendering path.
+
+Simple as it may be in practice, using this attribute can have a huge positive impact on performance: an image that never falls within
+the user's viewport will never be requested, and no bandwidth will be wasted on images that the user will never see.
+
+There's a catch, however: deferring those requests means not taking advantage of browsers' hyper-optimized processes for requesting
+images as early as possible. If `loading="lazy"` is used on `img` elements toward the top of the layout—and thus more likely
+to be in the user's viewport when the page is first loaded—these images can feel significantly slower to the end user.
+
+## Fetch Priority
+
+The `loading` attribute is an example of a larger web standards effort to give developers more power over how web browsers
+prioritize requests.
+
+You're likely aware of browsers' [basic approaches to fetch priority](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#):
+for example, a request for an external CSS file in the `<head>` of a document is considered essential enough to block render, while a request for an
+external JavaScript file just above `</body>` will be deferred until render is complete. If the value of a `loading` attribute on an `<img>` is 'lazy',
+the associated image request will be deferred until the browser determines that it will be shown to a user. Otherwise, that image will have the same
+priority as any other image on the page.
+
+The [`fetchpriority` attribute](https://caniuse.com/mdn-html_elements_img_fetchpriority) is intended to give
+developers [finer-grained control over the priority of assets](/fetch-priority/), allowing you to flag resources
+as 'high' and 'low' priority relative to resources of the same type. The use cases for `fetchpriority` are similar to the `loading`
+attribute, though much more broad. For example, you might use `fetchpriority="low"` on an image only revealed following user interaction
+(whether that image falls within the user's viewport or not) in order to prioritize visible images elsewhere on the page, or `fetchpriority="high"`
+to prioritize an image you know will be immediately visible in the viewport as soon as the page is rendered.
+
+Note that `fetchpriority` differs from `loading` in that it doesn't fundamentally change browser behavior. It doesn't instruct the browser
+to load certain assets before others, instead giving it vital context for the decisions it makes around requesting assets.
+
+## Measuring the impact of images
+
+When optimizing image assets, _perceived_ performance is often more important, and more difficult to measure, than total transfer
+size alone.
+
+Web Vitals provide measurable, actionable metrics and guidance for improving users' experience of the web, highlighting problems such
+as slow response time from a web server, rendering issues, and interactivity delays. Core Web Vitals are a subset of these goals, laser-focused
+on the user's direct experience of an individual page—a set of technical measurements that, together, determine how fast an experience _feels_ to a user.
+
+### Cumulative Layout Shift
+
+[Cumulative Layout Shift](/cls/) (CLS) is a measure of visual stability. It is a metric for capturing how much
+the layout of the content on a page shifts as assets are loaded and the page is rendered. Anyone that has spent a significant amount
+of time using the web has lost their place in a long run of text due to a page "jumping" as a delayed webfont or image source is suddenly
+rendered—or had an interactive element suddenly moved away from your pointer. A high CLS is a nuisance at best, and cause of
+user error at worst—a "cancel" button shifting to a space previously occupied by a "confirm" button just as the user clicks, for example.
+
+With high load times and the amount of space they can occupy in a layout, it stands to reason that images are a common cause
+of high CLS scores.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'NWBbxqo',
+height: 500,
+theme: dark,
+tab: 'css,result'
+} %}
+
+Thanks to relatively recent changes in modern browsers, it's easier than you might think to avoid high CLS scores due to images.
+
+If you've been working on the frontend for a few years now, you'll be familiar with the `width` and `height` attributes on `<img>`:
+prior to the widespread adoption of CSS, these were the only way to control the size of an image.
+
+```html
+<img src="image.jpg" height="200" width="400" alt="…">
+```
+
+These attributes fell out of use in an effort to keep our styling concerns separate from our markup, especially as responsive
+web design made it necessary to specify percentage-based sizing via CSS. In the early days of responsive web design, "remove
+the unused `width` and `height` attributes" was common advice, as the values we specified in our CSS—`max-width: 100%` and
+`height: auto`—would override them.
+
+```html
+<img src="image.jpg" alt="…">
+```
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+Having removed the `height` and `width` attributes as in the previous example, the only method the browser has for determining
+the height of the image in this situation is to request the source, parse it, and render it at its intrinsic aspect ratio, based on the
+width of the space it occupies in the layout once stylesheets have been applied. Much of this process takes place after the page has been
+rendered, with the newly calculated height causing additional layout shifts.
+
+[Starting in 2019](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
+), browser behavior was updated to handle the `width` and `height` attributes differently. Rather than using the values of these
+attributes to determine the fixed, pixel-based size of an `img` element in the layout, these attributes can be thought to represent
+the _aspect ratio_ of the image, though the syntax is the same. Modern browsers will divide these values against each other in order to
+determine an `img` element's intrinsic _aspect ratio_ prior to the page being rendered, allowing it to reserve the space the image will occupy as the layout is rendered.
+
+As a rule, you should always use `height` and `width` attributes on `<img>`, with values matching the intrinsic size of your image source—so
+long as you make sure that you've specified `height: auto` alongside `max-width: 100%` to override the height from the HTML attribute.
+
+```html
+<img src="image.jpg" height="200" width="400" alt="…">
+```
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+By using the `width` and `height` attributes on your `<img>` elements, you'll avoid a high CLS score due to images.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'YzjpwyE',
+height: 300,
+theme: dark,
+tab: 'html,result'
+} %}
+
+It's important to note that there's no downside to this approach, as it leans on long-established browser behavior—any browser
+with support for basic CSS will work the way it always has, with the `height` and `width` attributes in your markup overridden by your styles.
+
+While `width` and `height` attributes deftly avoid CLS issues by reserving the necessary layout space for your images, presenting
+users with an empty gap or [low-quality placeholder](https://www.guypo.com/introducing-lqip-low-quality-image-placeholders) while
+they wait for an image to transfer and render isn't ideal either. While there are things you can do to mitigate the measurable and perceptible
+impact of slow-to-load images, the only way to present a fully-rendered image to a user more quickly is by reducing its transfer size.
+
+### Largest Contentful Paint
+
+Largest Contentful Paint (LCP) measures the time it takes to render the largest “contentful” element visible in the user's viewport—the
+content element that occupies the largest percentage of the visible page. It may seem like an overly specific metric on the surface, but that
+element serves as a practical proxy for the point where the majority of the page has been rendered, from the user's perspective. LCP is a vital
+measure of (perceived) performance.
+
+Metrics like `DOMContentLoaded` or the `window.onload` event can be useful for determining when the process of loading the current page
+has technically completed, but they don't necessarily correspond to a user's experience of the page. A slight delay in rendering an element
+outside the user's viewport would be factored into either of these metrics, but would likely go completely undetected by a real-world user.
+A long LCP means the user's first impression of a page—the most important content inside the current viewport—is that the page is slow,
+or broken outright.
+
+The user perception captured by LCP has a direct impact on user experience. [An experiment done by Vodafone](/vodafone/) just last year
+found that a 31% improvement in LCP not only led to 8% more sales—a strong result on its own—but of their total number of users, found a 15%
+improvement in the number of visitors who became prospective customers ("visitor-to-lead rate") and a 11% improvement in the number of users
+who visited their cart ("cart to visit rate").
+
+On more than [70%](https://almanac.httparchive.org/en/2021/media#images) of webpages, the largest element in the initial
+viewport involves an image, either as a stand-alone `<img>` element or an element with a background image. In other words,
+70% of pages' LCP scores are based on image performance. It doesn't take much imagination to see why: big, attention-grabbing
+images and logos are very likely to be found "above the fold."
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/KrYcABGs7oYi9oHHZPJW.png", alt="LCP highlighted in the console of a web.dev page", width="800", height="407" %}
+
+There are a few steps you can take to avoid LCP delays: first, never specify `loading="lazy"` on an "above the fold" image,
+as delaying the request until after the page has been rendered will likely have a massive negative impact on your LCP score.
+Second, using `fetchpriority="high"` can inform the browser that the transfer of this image should be prioritized above images elsewhere on the page.
+
+With those rules squarely in mind, the most important thing you can do to improve a page's LCP score is reduce the amount of time
+it takes to transfer and render those images. In order to do that, you'll need to keep your image sources as small and efficient as
+possible (without sacrificing their quality, of course) and ensure that users are only getting the image assets that make the most
+sense for their browsing contexts.
+
+### Conclusion
+
+Image assets are the biggest drain on your users' bandwidth—bandwidth taken away from transferring every other asset necessary
+to render a page. Images introduce significant issues in terms of perceived performance, both during and after the surrounding page
+layout has been rendered. In short: image assets do _damage_.
+
+Daunting as that may be, while "the web would be better off with fewer images" would certainly be true in terms of performance alone,
+it would also do its users a tremendous disservice. Images are a vital part of the web, and you shouldn't compromise on the quality of
+meaningful content for the sake of performance alone.
+
+In the rest of this course, you'll learn about the technologies that power our image assets and techniques for mitigating their
+performance impacts, without compromising on quality.
diff --git a/src/site/content/en/learn/images/png/index.md b/src/site/content/en/learn/images/png/index.md
new file mode 100644
index 00000000000..0fa4c184ef4
--- /dev/null
+++ b/src/site/content/en/learn/images/png/index.md
@@ -0,0 +1,45 @@
+---
+title: 'Image formats: PNG'
+authors:
+  - matmarquis
+description: Find out when PNG is the best image format to choose.
+date: 2023-02-01
+tags:
+  - images
+---
+
+There are a few things that set PNG (Portable Network Graphics) apart from other formats, though as it was intended to be a replacement for
+GIF (due to patent disputes long, long ago) it is similar to GIF in several ways. PNG also uses lossless compression,
+meaning that the image data will be _compressed_ without any loss of visual fidelity. An image's color palette may be quantized—an
+“indexed color”, with PNG making use of a palette limited to 256 colors, just like GIF. A far more common “truecolor” PNG can
+contain many, many more colors—up to 16 million.
+
+PNG and GIF both support transparency, though with a major difference. GIF treats transparency as a binary proposition—a
+pixel is either an opaque color, or fully transparent. PNG supports “alpha channel” transparency, meaning that each pixel
+can be set to a level of transparency between 0 (fully transparent) and 255 (fully opaque).
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/PKQ634IdtXzy63TdlfpC.png", alt="Two pink flowers showing two levels of transparency.", width="800", height="399" %}
+
+In practical terms, the lack of substantial quantization and lossless compression mean that saving an image as a PNG will
+never result in a drop in visual quality. However, this almost invariably results in excessively large file sizes compared to
+more modern web-friendly encodings. The transfer size of a PNG means they are almost never the right choice for photographic content.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/asVXRCrgha5jMqCXwmn6.png", alt="Comparison of JPEG and PNG.", width="800", height="446" %}
+
+PNG was more commonplace in years past largely for a single use case, as the only raster encoding that supported semi-transparency.
+Today, PNG should only be considered for simple artwork that requires semi-transparency—a company logo containing a drop shadow,
+for example—and should be compared carefully to the more modern formats that support semi-transparency, such as WebP.
+
+Much like GIF, PNG was designed to solve use cases that are frequently better served by SVG in terms of both scalability and file size.
+For that reason, you'll sometimes see PNG used as the fallback version of UI elements in the vanishingly small number of browsers that don't
+support SVG, though these are increasingly rare.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/GhNCZEadcuq93fPfuiQJ.png", alt="PNG and SVG comparison.", width="800", height="598" %}
+
+In practical terms, PNG is a sound choice for maintaining a manageable-sized “canonical” version of a source image, saved in your
+local development environment or committed to a project repository in case future versions of that image need to be edited or re-saved
+in alternate formats.
+
+It is worth noting, however, that even though encodings are standardized, different editing tools have different methods of
+performing that encoding—some much more efficient than others. Before transferring a PNG in any context, be sure to run your
+files through a tool like [Squoosh](https://squoosh.app/) or [ImageOptim](https://imageoptim.com).
diff --git a/src/site/content/en/learn/images/prescriptive/index.md b/src/site/content/en/learn/images/prescriptive/index.md
new file mode 100644
index 00000000000..35806bfd848
--- /dev/null
+++ b/src/site/content/en/learn/images/prescriptive/index.md
@@ -0,0 +1,224 @@
+---
+title: 'Prescriptive syntaxes'
+authors:
+  - matmarquis
+description: Find out about the picture element.
+date: 2023-02-01
+tags:
+  - images
+---
+
+The `<picture>` element doesn't render anything on its own, but instead acts as a decision engine for an inner `<img>` element,
+telling it what to render. `<picture>` follows a precedent already set by the `<audio>` and `<video>` elements: a wrapper element
+that contains individual `<source>` elements.
+
+```html
+<picture>
+   <source …>
+   <source …>
+	<img …>
+</picture …>
+```
+
+That inner `<img>` also provides you with a reliable fallback pattern for older browsers without support for responsive images:
+if the `<picture>` element isn't recognized by the user's browser, it's ignored. The `<source>` elements are then discarded as well,
+since the browser either won't recognize them at all, or won't have meaningful context for them without a `<video>` or `<audio>` parent.
+The inner `<img>` element will be recognized by any browser, though—and the source specified in its `src` will be rendered as expected.
+
+## "Art directed" images with `<picture>`
+
+Making changes to the content or aspect ratio of an image based on the size of the image in the page is typically referred to as "art directed"
+responsive images. `srcset` and `sizes` are designed to work invisibly, seamlessly swapping out sources as the user's browser dictates.
+There are times, however, where you want to alter sources across breakpoints to better highlight the content, the same way you adapt page layouts.
+For example: a full-width header image with a small central focus may work well on a large viewport:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/HWZtREfRzpcy7tvolvkn.png", alt="A header width image of a periwinkle flower surrounded by leaves and stems, being visited by a honeybee.", width="800", height="286" %}
+
+But when scaled down to suit small viewports, the central focus of the image might be lost:
+
+<div style="width: 50%">
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/7W8AmfGV4jEPD6mp6Kfk.png", alt="A header width image of a periwinkle flower, scaled down. The honeybee is barely visible.", width="400", height="143" %}
+</div>
+
+The _subject_ of these image sources are the same, but in order to better focus on that subject visually, you'll want the
+proportions of the image source to change across breakpoints. For example, a tighter zoom on the center of the image, and
+some of the detail at the edges cropped out:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/q9IrCVku2h0B4YfHzI3h.png", alt="A zoomed in crop of the periwinkle flower.", width="400", height="315" %}
+
+That sort of "cropping" can be achieved through CSS, but would leave a user requesting all the data that makes up that image,
+even though they might never end up seeing it.
+
+Each `source` element has attributes defining the conditions for the selection of that `source`: `media`, which accepts a
+media query, and `type`, which accepts a media type (previously known as "MIME type"). The first `<source>` in the source
+order to match the user's current browsing context is selected, and the contents of the `srcset` attribute on that `source`
+will be used to determine the right candidates for that context. In this example, the first `source` with a `media` attribute
+that matches user's viewport size will be the one selected:
+
+```html
+<picture>
+  <source media="(min-width: 1200px)" srcset="wide-crop.jpg">
+  <img src="close-crop.jpg" alt="…">
+</picture>
+```
+{% Codepen {
+user: 'web-dot-dev',
+id: 'poZNxyN',
+height: 300,
+theme: dark,
+tab: 'html,css,result'
+} %}
+
+You should always specify the inner `img` last in the order—if none of the `source` elements match their `media` or `type`
+criteria, the image will act as a "default" source. If you're using `min-width` media queries, you want to have the largest
+sources first, as seen in the preceding code. When using `max-width` media queries, you should put the smallest source first.
+
+```html
+<picture>
+   <source media="(max-width: 400px)" srcset="mid-bp.jpg">
+   <source media="(max-width: 800px)" srcset="high-bp.jpg">
+   <img src="highest-bp.jpg" alt="…">
+</picture>
+```
+
+When a source is chosen based on the criteria you've specified, the `srcset` attribute on `source` is passed along to the
+`<img>` as though it were defined on `<img>` itself—meaning you're free to use `sizes` to optimize art directed image
+sources as well.
+
+```html
+<picture>
+   <source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
+   <source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
+   <img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
+</picture>
+```
+
+Of course, an image with proportions that can vary depending on the selected `<source>` element raises a performance issue:
+`<img>` only supports a single `width` and `height` attribute, but [omitting those attributes can lead to a measurably worse user experience](#).
+In order to account for this, a [relatively recent](https://github.com/whatwg/html/pull/5894)—but
+[well supported](https://developer.mozilla.org/docs/Web/HTML/Element/source#browser_compatibility)—addition to the HTML
+specification allows for use of `height` and `width` attributes on `<source>` elements. These work to reduce layout shifts just as well
+as they do on `<img>`, with the appropriate space reserved in your layout for whatever `<source>` element is selected.
+
+```html
+<picture>
+   <source
+      media="(min-width: 800px)"
+      srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
+      width="1600"
+      height="800">
+   <img src="fallback.jpg"
+      srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
+      sizes="calc(100vw - 2em)"
+      width="1200"
+      height="750"
+      alt="…">
+</picture>
+```
+
+It's important to note that art direction can be used for more than decisions based on viewport-size—and it should, given that
+the majority of those cases can be more efficiently handled with `srcset`/`sizes`. For example, selecting an image source better
+suited to the color scheme dictated by a user's preference:
+
+```html
+<picture>
+   <source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
+   <img srcset="hero-light.jpg">
+</picture>
+```
+{% Codepen {
+user: 'web-dot-dev',
+id: 'MWBbPJm',
+height: 500,
+theme: dark,
+tab: 'html,result'
+} %}
+
+### The `type` attribute
+
+The `type` attribute allows you to use the `<picture>` element's single-request decision engine to only serve image formats
+to browsers that support them.
+
+As you learned in [Image Formats and Compression](/learn/images/avif/#browser-support/), an encoding that the browser can't parse won't even be recognizable as
+image data.
+
+Before the introduction of the `<picture>` element, the most viable front-end solutions for serving new image formats required
+the browser to request and attempt to parse an image file before determining whether to throw it away and load a fallback. A
+common example was a script along these lines:
+
+```html
+   <img src="image.webp"
+	data-fallback="image.jpg"
+	onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
+	alt="...">
+```
+
+With this pattern, a request for `image.webp` would still be made in every browser—meaning a wasted transfer for browsers
+without support for WebP. Browsers that couldn't then parse the WebP encoding would throw an `onerror` event, and swap
+the `data-fallback` value into `src`. It was a wasteful solution, but again, approaches like this one were the only option
+available on the front-end. Remember that the browser begins making requests for images before any custom scripting has a
+chance to run—or even be parsed—so we couldn't preempt this process.
+
+The `<picture>` element is explicitly designed to avoid those redundant requests. While there's still no way for a browser
+to recognize a format it doesn't support without requesting it, the `type` attribute warns the browser about the source
+encodings up-front, so it can decide whether or not to make a request.
+
+In the `type` attribute, you provide the [Media Type (formerly MIME type)](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
+of the image source specified in the `srcset` attribute of each `<source>`. This provides the browser with all the information it
+needs to immediately determine whether the image candidate provided by that `source` can be decoded without making any external
+requests—if the media type isn't recognized, the `<source>` and all its candidates are disregarded, and the browser moves on.
+
+```html
+<picture>
+ <source type="image/webp" srcset="pic.webp">
+ <img src="pic.jpg" alt="...">
+</picture>
+```
+
+Here, any browser that supports WebP encoding will recognize the `image/webp` Media Type specified in the `type` attribute
+of the `<source>` element, select that `<source>`, and—since we've only provided a single candidate in `srcset`—instruct the inner
+`<img>` to request, transfer, and render `pic.webp`. Any browser _without_ support for WebP will disregard the `source`, and
+absent any instructions to the contrary, the `<img>` will render the contents of `src` as it has done since 1992.
+You don't need to specify a second `<source>` element with `type="image/jpeg"` here, of course—you can assume universal support for JPEG.
+
+Regardless of the user's browsing context, all of this is achieved with a single file transfer, and no bandwidth wasted on
+image sources that can't be rendered. This is forward-thinking, as well: as newer and more efficient file formats will come
+with Media Types of their own, and we'll be able to take advantage of them thanks to `picture`—with no JavaScript, no serverside
+dependencies, and all the speed of `<img>`.
+
+## The future of responsive images
+
+All of the markup patterns discussed here were a heavy lift in terms of standardization: changing the functionality of
+something as established and central to the web as `<img>` was no small feat, and the suite of problems those changes aimed to
+solve were extensive to say the least. If you've caught yourself thinking that there's a lot of room for improvement with these
+markup patterns, you're absolutely right. From the outset, these standards were intended to provide a baseline for future
+technologies to build on.
+
+All of these solutions have necessarily depended on markup, so as to be included in the initial payload from the server,
+and arrive in time for the browser to request image sources—a limitation that led to the admittedly unwieldy `sizes` attribute.
+
+However, since these features were introduced to the web platform, a native method of deferring image requests was introduced.
+`<img>` elements with the `loading="lazy"` attribute aren't requested until the layout of the page is known, in order to defer
+requests for images outside of the user's initial viewport until later on in the process of rendering the page, potentially avoiding
+unnecessary requests. Because the browser fully understands the page layout at the time these requests are made, a
+[`sizes="auto"` attribute has been proposed as an addition to the HTML specification](https://github.com/whatwg/html/pull/8008)
+to avoid the chore of manually-written `sizes` attributes in these cases.
+
+There are also additions to the `<picture>` element on the horizon as well, to match some exceptionally exciting changes
+to the way we style out page layouts. While viewport information is a sound basis for high-level layout decisions, it
+prevents us from taking a fully component-level approach to development—meaning, a component that can be dropped into
+any part of a page layout, with styles that respond to the space that the component itself occupies. This concern led
+to the creation of _[container queries](https://www.oddbird.net/2022/08/18/cq-syntax/)_: a method of styling elements
+based on the size of their parent container, rather than the viewport alone.
+
+While the container query syntax has only just stabilized—and browser support is [very limited](https://caniuse.com/css-container-queries),
+at the time of writing—the addition of the browser technologies that enable it will provide the `<picture>` element with a
+means of doing the same thing: a potential `container` attribute that allows for `<source>` selection criteria based on the
+space the `<picture>` element's `<img>` occupies, rather than based on the size of the viewport.
+
+If that sounds a little vague, well, there's a good reason: these web standards discussions are ongoing, but far from settled—you
+can't use them just yet.
+
+While responsive image markup promises to only get easier to work with over time, like any web technology, there are a number
+of services, technologies, and frameworks to help ease the burden of hand-writing this markup available. In the next module,
+ we'll look at how to integrate everything we've learned about image formats, compression, and responsive images into a modern development workflow.
diff --git a/src/site/content/en/learn/images/raster-images/index.md b/src/site/content/en/learn/images/raster-images/index.md
new file mode 100644
index 00000000000..56bd8c9366b
--- /dev/null
+++ b/src/site/content/en/learn/images/raster-images/index.md
@@ -0,0 +1,62 @@
+---
+title: 'Raster images'
+authors:
+  - matmarquis
+description: Discover raster images, such as JPEG, GIF, PNG, and WebP.
+date: 2023-01-31
+tags:
+  - images
+---
+
+Raster images can be thought of as a set of pixel-by-pixel instructions for rendering a two-dimensional grid. Common raster
+image formats include GIF (.gif), JPEG (.jpg), PNG (.png), and WebP (.webp). The way each image format compresses and encodes
+these instructions differs, resulting in a huge variance between file sizes: a photographic image encoded as a JPEG might only
+be a few hundred kilobytes, while the same image encoded as a PNG might be several megabytes, without any discernible difference
+in quality to the end user.
+
+A raster image source scaled beyond its inherent dimensions will appear distorted, blocky, or blurred:
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'ZEjBQqB',
+height: 500,
+theme: dark,
+tab: 'css,result'
+} %}
+
+For artwork containing real world levels of detail, raster images are the right tool for the job.
+
+Just like choosing between raster and vector images, choosing the appropriate type of raster image ultimately comes down to the use case.
+When we break raster images down into their encodings, what we're really talking about are the methods used to describe their contents, and
+the compression methods (or lack thereof) we're applying. Remember that a server doesn't send _an image_ over the wire to a browser, but a stream
+of bytes describing the pixel grid that makes up that image for the client to recompose.
+
+So, to better visualize the process of encoding a grid of pixels as bytestream data, I want you to imagine that you're acting as the web browser.
+You have a sheet of [millimeter graph paper](https://en.wikipedia.org/wiki/Graph_paper#Formats) and a specific pack of brand name crayons. I, as
+the web server, have the exact same things—but I've already used my crayons to fill the graph paper in with a source image. If I were to send you
+a plain text message, I couldn't send you the image itself, but I could convey information about an image source in a language we both understand
+using our shared standard for our “pixel” grid and colors:
+
+> Start at the top left. Row one, column one is blue. Row one, column two is blue. Row one, column three is blue. Row one, column four is red.
+
+Using this textual information, you'd be able to perfectly recreate the image I have on my sheet of graph paper.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/pwUWoFFo7MVq58e05NnK.png", alt="Three horizontal blue boxes followed by one red box.", width="652", height="204" %}
+
+Differences in image formats and the way they're encoded as data can be loosely thought of as the way this information has been formatted.
+For example, the information I've sent you could be just as readily expressed as:
+
+> Start at the top left. Row one, columns one through three are blue. Row one, column four is red.
+
+Either one of these descriptions will result in the same image, but the second one manages to describe the same image with fewer
+characters. This is a _lossless_ method of compressing image data: all the same information—and thus, no reduction of visual
+fidelity—but fewer bytes transferred over the wire from me to you—from the server to the rendering engine. This is the plain language
+equivalent of “run-length encoding” for image data, where data is encoded as the value to be repeated and a count, rather
+than repeating the full value multiple times.
+
+The inverse, _lossy_ compression, might sound like a non-starter at face value—why would you ever want your images to look _worse_?
+That isn't strictly the case, though, and it's worth keeping in mind that our eyes don't have perfect fidelity either. Choosing
+the correct format and settings for image compression is an exercise in finding the balance between the level of visual detail
+we're able to perceive and the amount of data sent to the browser. Both of these factors are determined by the content of our source image.
+
+The raster image formats are those you are likely most familiar with as a developer—GIF, JPEG, PNG, WebP, and more. You'll learn about the capabilities of each in the next few modules.
diff --git a/src/site/content/en/learn/images/responsive-images/index.md b/src/site/content/en/learn/images/responsive-images/index.md
new file mode 100644
index 00000000000..ccd80bb7721
--- /dev/null
+++ b/src/site/content/en/learn/images/responsive-images/index.md
@@ -0,0 +1,46 @@
+---
+title: 'Responsive images'
+authors:
+  - matmarquis
+description: A deep dive into responsive images.
+date: 2023-02-01
+tags:
+  - images
+---
+
+[Responsive image](/learn/design/responsive-images/) markup can be divided into two scenarios: situations
+where the goal is the most efficient possible images, and situations where you need explicit control over what image source
+the browser selects. You can think of these as _descriptive_ and _prescriptive_ syntaxes, respectively.
+
+In this module you'll learn both approaches. First we'll cover `srcset` and `sizes`, and how to help the browser make the best
+choice based on what it knows about the user, their device, and their browsing situation. You'll then discover the `<picture>` element,
+which allows for explicit control over source selection based on factors like viewport size and browser support for image formats.
+
+## Descriptive syntaxes
+
+A descriptive syntax provides the browser with information about image sources and how they'll be used, but ultimately leaves
+the decision-making to the browser. This is by far the more common scenario; for the vast majority of images you won't _want_ granular
+control over browser behavior. Browsers have far more information at their disposal than web developers do, and can make complex decisions
+based on this information. You can't predict users' browsing contexts accurately—there's too much about their hardware, preferences, and connection
+speeds that you can't know. At best, you can make educated guesses, but can't know for _certain_ how each user experiences the web. The
+central use case for responsive images is strictly goal-oriented, from a developer's perspective: allow browsers to make the most efficient image
+requests possible, based on the information the browser has at hand.
+
+To enable browsers to make these choices, `srcset` allows you to provide the browser with a list of potential sources for populating a single
+`<img>`, while `sizes` allows you to provide the browser with information about how that `<img>` will be rendered. You'll learn how to use
+these in the [next module](/learn/images/descriptive/).
+
+## Prescriptive syntaxes
+
+With a prescriptive syntax, you tell the browser what to do—what source to select, based on specific criteria you've defined. While this use case isn't as
+common as "just load the most efficient asset to render this image," it allows us to provide usage instructions to the browser to account for
+information it doesn't have prior to the transfer of assets, such as the content of the sources or their formats.
+
+While `srcset` and `sizes` provide you with a syntax for passing information along to the user's browser and allowing it to make decisions about
+image sources, there are times when you'll need explicit control over which source file is presented and when. For example, you might
+want to display versions of the same image content with different aspect ratios, based on different design treatments across layout breakpoints,
+or make sure only browsers with support for a specific encoding receive specific sources.
+
+In these cases, you want explicit control over which source is shown, and when. These are assurances that `srcset` and `sizes` can't give us,
+by design. To get that control, we'll need to use the [`<picture>` element](/learn/images/prescriptive/).
+
diff --git a/src/site/content/en/learn/images/vector-images/index.md b/src/site/content/en/learn/images/vector-images/index.md
new file mode 100644
index 00000000000..0b75de54f92
--- /dev/null
+++ b/src/site/content/en/learn/images/vector-images/index.md
@@ -0,0 +1,44 @@
+---
+title: 'Vector images'
+authors:
+  - matmarquis
+description: Learn about SVG, the vector image format used on the web. 
+date: 2023-02-01
+tags:
+  - images
+---
+
+Vector graphics are a method of communicating a series of shapes, coordinates, and paths to their rendering context. They
+are a set of instructions for how an image should be drawn. When that image is scaled up or down, the set of points and lines that
+the image represents are redrawn to scale. A smooth curve between two points will be redrawn just as smoothly at any size—similar
+to the way a CSS-defined border on an HTML element is redrawn as that element is scaled in the viewport.
+
+Scalable Vector Graphics (SVG) is an XML-based markup language developed by the W3C. It is a vector image format designed
+for the modern web.
+
+{% Codepen {
+user: 'web-dot-dev',
+id: 'WNKorKN',
+height: 500,
+theme: dark,
+tab: 'html,result'
+} %}
+
+Any design software dedicated to editing vector artwork will allow you to export an image as an SVG. But being a standardized,
+human-readable markup language, SVG can also be created and edited with any text editing software, regardless of the software used
+to create it, though that quickly becomes unrealistic for images of any real complexity. SVG can be styled with CSS, or contain
+JavaScript that builds behaviors and interactions into the images themselves.
+
+Even beyond the obvious appeal for designers and developers, SVG is also an incredibly powerful format in terms of the end user experience.
+The descriptive information contained within an SVG source is often highly compact compared to raster image formats' more prescriptive
+pixel-grid-based information, in the case of simple shapes—to oversimplify somewhat, the difference between telling the browser
+"draw a 1px red line between 1x1 and 1x5" and "1x1 is a red pixel. 1x2 is a red pixel. 1x3 is a red pixel. 1x4 is a red pixel. 1x5 is a red pixel."
+The flip side is that the descriptive nature of SVG requires more interpretation—more "thinking"—from the browser. For this reason,
+complex SVGs can be more taxing to render. In the same vein, a highly complex image could mean a verbose set of instructions, and a large transfer size.
+
+It may take a little trial and error before you're able to instantly recognize an image source candidate as better served by SVG rather than a
+conventional raster format. There are a few guidelines, though: interface elements like icons are almost always well served by SVG. Artwork with
+sharp lines, solid colors, and clearly-defined shapes will likely be a strong candidate for SVG.
+
+SVG is a huge topic: an entire markup language made to coexist alongside HTML, with unique styling options and capabilities. For a more detailed
+introduction to SVG see the [MDN SVG tutorial](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Introduction).
diff --git a/src/site/content/en/learn/images/webp/index.md b/src/site/content/en/learn/images/webp/index.md
new file mode 100644
index 00000000000..58a53636742
--- /dev/null
+++ b/src/site/content/en/learn/images/webp/index.md
@@ -0,0 +1,139 @@
+---
+title: 'Image formats: WebP'
+authors:
+  - matmarquis
+description: Learn about WebP, and understand the difference between this format and others.
+date: 2023-02-01
+tags:
+  - images
+---
+
+Google originally developed WebP as a lossy image format to supersede JPEG, one that was able to produce files smaller than a
+comparable-quality image file encoded as JPEG. Later updates to the format introduced the option of lossless compression,
+PNG-like alpha channel transparency, and GIF-like animation—all of which can be used alongside JPEG-style lossy compression.
+WebP is an _unbelievably_ versatile format.
+
+WebP's lossy compression algorithm is based on a method that the [VP8 video codec](https://datatracker.ietf.org/doc/html/draft-bankoski-vp8-bitstream-01#page-7)
+uses to compress keyframes in videos. At a high level, it's similar to JPEG encoding: WebP operates in terms of "blocks" rather than individual pixels,
+and has a similar division between luminance and chrominance. WebP's luma blocks are 16x16, while chroma blocks are 8x8, and those "macroblocks" are
+further subdivided into 4x4 sub-blocks.
+
+Where WebP differs radically from JPEG are in two features: "block prediction" and "adaptive block quantization."
+
+## Block Prediction
+
+Block prediction is the process through which the contents of each chrominance and luminance block are predicted based on the values
+of their surrounding blocks—specifically the blocks above and to the left of the current block. As you might imagine, the algorithms
+that do this work are fairly complex, but to put it in plain language: "if there's blue above the current block, and blue to the left
+of the current block, assume this block is blue."
+
+In truth, both PNG and JPEG also do this sort of prediction to _some_ degree. WebP, however, is unique in that it samples the surrounding
+blocks' data and then attempts to populate the current block by way of several different "prediction modes", effectively trying to "draw"
+the missing part of the image. The results provided by each prediction mode are then compared to the real image data, and the closest
+predictive match is selected.
+
+<div style="background: #fff;">
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/t8neUw7UOsUNTF3uxe08.png", alt="A diagram of WebP’s various block prediction methods.", width="800", height="509" %}
+</div>
+
+Even the closest predictive match isn't going to be completely right, of course, so the differences between the predicted and
+actual values of that block are encoded in the file. When decoding the image, the rendering engine uses the same data to apply
+the same predictive logic, leading to the same predicted values for each block. The difference between the prediction and the
+expected image that was encoded in the file is then applied over the predictions—similar to how a Git commit represents a differential
+patch that gets applied over the local file, rather than a brand new copy of the file.
+
+To illustrate: rather than dig into the complex math involved in the true predictive algorithm, we'll invent a WebP-like encoding
+with a single prediction mode, and use it to efficiently relay a grid of numbers the way we did with the legacy formats. Our algorithm
+has a single prediction mode, which we'll call "prediction mode one:" the value of each block is the sum of the values of the blocks above
+it and to the left of it, starting with 1.
+
+Now, say we're starting with the following real image data:
+
+```text
+111151111
+122456389
+```
+
+Using our predictive model to determine the contents of a 2x9 grid, we would get the following result:
+
+```text
+111111111
+123456789
+```
+
+Our data is a good fit for the predictive algorithm we've invented—the predicted data is a close match to our real data.
+Not a perfect fit, of course—the actual data has several blocks that are different from the predicted data. So, the encoding
+we send includes not just the prediction method to use, but a diff of any blocks that should differ from their predicted values:
+
+```text
+_ _ _ _ +4 _ _ _ _
+_ _ -1 _ _ _ -4 _ _
+```
+
+Put in the same kind of plain language as some of the legacy format encodings we've discussed:
+
+> 2x9 grid using prediction mode one. +4 to 1x5, -1 to 2x3, -4 to 2x7.
+
+The end result is an unbelievably efficient encoded file.
+
+## Adaptive block quantization
+
+JPEG compression is a blanket operation, applying the same level of quantization to every block in the image. In an image
+with a uniform composition, that certainly makes sense—but real-world photographs aren't any more uniform than the world around us.
+In practice, this means that our JPEG compression settings are determined not by the high frequency details—where JPEG
+compression excels—but by the parts of our image where compression artifacts are most likely to appear.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/ohpy2TSKU5qkO7bZOzIy.png", alt="A compressed JPEG image of a monarch butterfly", width="800", height="798" %}
+
+As you can see in this exaggerated example, the wings of the monarch in the foreground look relatively sharp—a little grainy
+when compared with the high-resolution original, but certainly not noticeable without the original to compare with it.
+Likewise, the detailed inflorescence of the milkweed, and the leaves in the foreground—you and I may see traces of compression
+artifacts with our trained eyes, but even with the compression dialed up well beyond reasonable levels things in the foreground
+still look passably crisp. The low-frequency information at the top left of the picture—the blurry green backdrop of leaves—looks
+_terrible_. Even an untrained viewer would immediately notice the quality issue—the subtle gradients in the background are
+rounded down to jagged, solid-color blocks.
+
+In order to avoid this, WebP takes an _adaptive_ approach to quantization: an image is broken into up to four visually similar
+segments, and compression parameters for those segments are tuned independently. Using the same outsized compression with WebP:
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/gJKurkTf09XGFhaUApP2.png", alt="A compressed WebP image of a monarch butterfly", width="800", height="801" %}
+
+The size of both these image files is about the same. The quality is about the same when we look at the monarch's wings—you
+can spot a few tiny differences in the end result if you look very, very closely, but no real difference in overall quality.
+In the WebP, the flowers of the milkweed are just a _little_ sharper—again, likely not enough to be noticeable unless you're
+comparing the two side-by-side and really looking for differences in quality, the way we are. The background is a different story
+altogether: it has barely a trace of JPEG's glaringly obvious artifacts. WebP gives us the same file size, but a much higher
+quality image—give or take a few tiny details that our psychovisual systems wouldn't be able to detect if we weren't comparing
+the two so closely.
+
+## Using WebP
+
+The internals of WebP might be considerably more complex than JPEG encoding, but just as simple for the purpose of our daily
+work: all the complexity of WebP's encoding is standardized around a single "quality" value—expressed from 0–100, just like JPEG.
+And once again, that's not to say that you're _limited_ to a single overarching "quality" setting. You can—and should—tinker with all
+the fine details of WebP encoding, if only to gain a better understanding of how these normally-invisible settings can impact
+file size and quality.
+
+Google offers a `cwebp` command line encoder that allows you to convert or compress individual files or entire directories of images:
+
+```shell
+$ cwebp -q 80 butterfly.jpg -o butterfly.webp
+
+Saving file 'butterfly.webp'
+File:  	butterfly.jpg
+Dimension: 1676 x 1418
+Output:	208418 bytes Y-U-V-All-PSNR 41.00 43.99 44.95   41.87 dB
+       	(0.70 bpp)
+block count:    intra4:     7644  (81.80%)
+          	   Intra16:     1701  (18.20%)
+          	   Skipped:       63  (0.67%)
+bytes used:  header:            249  (0.1%)
+         	  mode-partition:  36885  (17.7%)
+Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+macroblocks:     |       8%|      22%|      26%|      44%|   9345
+quantizer:       |      27 |      25 |      21 |      13 |
+filter level:    |       8 |       6 |      19 |      16 |
+```
+
+And if you're not inclined toward the command line, Squoosh will serve us just as well for encoding WebP. It gives us the option
+of side-by-side comparisons between different encodings, settings, quality levels, and differences in file size from JPEG encoding.
diff --git a/src/site/content/en/learn/index.md b/src/site/content/en/learn/index.md
new file mode 100644
index 00000000000..de1c9bf66c9
--- /dev/null
+++ b/src/site/content/en/learn/index.md
@@ -0,0 +1,5 @@
+---
+layout: learn-page
+title: Learn web development
+date: 2021-10-29
+---
diff --git a/src/site/content/en/learn/index.njk b/src/site/content/en/learn/index.njk
deleted file mode 100644
index 31d96af87c3..00000000000
--- a/src/site/content/en/learn/index.njk
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: layout
-title: Learn
-description: |
-  Learn best practices for the modern web and hone your skills with hands-on
-  codelabs.
-date: 2018-11-05
----
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="learn-landing-page">
-
-  <div class="w-layout-container">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline">{{ title }}</h1>
-      <p class="w-page-header__copy">
-        Explore our structured learning paths to discover everything you need
-        to know about building for the modern web.
-      </p>
-    </header>
-  </div>
-  <section class="w-grid">
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three">
-      <h3 id="frameworks" class="w-learn-heading">
-        Performance
-        <a class="w-headline-link" href="#performance" aria-hidden="true">#</a>
-      </h3>
-    </div>
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-      {% for collection in learn.performance %}
-        {% PathCard collection, lang %}
-      {% endfor %}
-    </div>
-  </section>
-  <section class="w-grid">
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three">
-      <h3 id="principles" class="w-learn-heading">
-        Build excellent websites
-        <a class="w-headline-link" href="#principles" aria-hidden="true">#</a>
-      </h3>
-    </div>
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-      {% for path in learn.paths %}
-        {% PathCard path, lang %}
-      {% endfor %}
-    </div>
-  </section>
-  <section class="w-grid">
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three">
-      <h3 id="frameworks" class="w-learn-heading">
-        Frameworks
-        <a class="w-headline-link" href="#frameworks" aria-hidden="true">#</a>
-      </h3>
-    </div>
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-      {% for framework in learn.frameworks %}
-        {% PathCard framework, lang %}
-      {% endfor %}
-    </div>
-  </section>
-  <section class="w-grid">
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three">
-      <h3 id="lighthouse" class="w-learn-heading">
-        Lighthouse
-        <a class="w-headline-link" href="#lighthouse" aria-hidden="true">#</a>
-      </h3>
-    </div>
-    <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-      {% for audit in learn.audits %}
-        {% PathCard audit, lang %}
-      {% endfor %}
-    </div>
-  </section>
-</div>
diff --git a/src/site/content/en/learn/learn.11tydata.js b/src/site/content/en/learn/learn.11tydata.js
index a4a5eb7ab96..edcd7ed4836 100644
--- a/src/site/content/en/learn/learn.11tydata.js
+++ b/src/site/content/en/learn/learn.11tydata.js
@@ -10,37 +10,40 @@ const allPaths = require('../../../_data/paths');
 // =============================================================================
 
 module.exports = function () {
-  const paths = [
+  // const web_dev_basics = [allPaths['web-dev-basics-one']];
+
+  const performance = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['metrics'],
+    allPaths['fast'],
+    allPaths['how-to-optimize-inp'],
+  ];
+
+  const build_excellent = [
     allPaths['progressive-web-apps'],
     allPaths['accessible'],
     allPaths['reliable'],
     allPaths['secure'],
     allPaths['discoverable'],
     allPaths['payments'],
+    allPaths['media'],
+    allPaths['devices'],
+    allPaths['animations'],
+    allPaths['identity'],
+    allPaths['webassembly'],
   ].filter(livePaths);
 
-  const performance = [
-    allPaths['vitals'],
-    allPaths['metrics'],
-    allPaths['fast'],
-  ];
-
   const frameworks = [allPaths['react'], allPaths['angular']].filter(livePaths);
 
-  const audits = [
-    allPaths['lighthouse-performance'],
-    allPaths['lighthouse-pwa'],
-    allPaths['lighthouse-best-practices'],
-    allPaths['lighthouse-accessibility'],
-    allPaths['lighthouse-seo'],
-  ].filter(livePaths);
+  const explorations = [allPaths['mini-apps']].filter(livePaths);
 
   return {
     learn: {
-      paths,
+      // web_dev_basics,
       performance,
+      build_excellent,
       frameworks,
-      audits,
+      explorations,
     },
   };
 };
diff --git a/src/site/content/en/learn/privacy/best-practices/index.md b/src/site/content/en/learn/privacy/best-practices/index.md
new file mode 100644
index 00000000000..99187688c93
--- /dev/null
+++ b/src/site/content/en/learn/privacy/best-practices/index.md
@@ -0,0 +1,207 @@
+---
+title: 'Best practices'
+authors:
+  - sil
+description: A list of key things to do in order to preserve privacy when developing for the web.
+date: 2023-02-22
+tags:
+  - privacy
+---
+
+## The basics
+
+Over this whole course, certain themes have come up again and again. Protecting your users' privacy involves knowing the minimum
+that you need about them, being honest and transparent with what you need and why, and removing what you have as soon as you no
+longer need it. You are also responsible for what others are able to do and are allowed to do with your users' data, and that
+means that you need to be able to explain honestly and transparently what that is. Any data that you don't need, you should not
+have; any data that you do need, you should be able to explain why you need it, and for how long.
+
+In larger organizations, there may be roles or teams dedicated to tracking the latest technical changes in your deployment
+environments and browsers, and to understanding the implications for technical and legal changes on your users' privacy.
+But a smaller organization still needs to be conscious of user privacy, how a changing environment can affect decisions
+already made, and what needs to be taken into account for decisions you make from now on. This module summarizes some
+best practices for how you can stay in touch with your privacy choices and requirements, and those of your users.
+
+## Be aware of what you do
+
+The first best practice here is _understanding_. You need to be aware of what you know about your users, and why you know it;
+you need to be aware of what your partners know about your users, and how they found it out. This should be a documented part
+of your privacy policy. It is difficult and time-consuming to put this list together at first, but more importantly it's also
+eye-opening for you and for the business. It can often come as a surprise (and not a nice surprise) just how much data you collect
+and store about your users. Documenting it will give you a level of awareness, not just into data collection and privacy, but
+into the user experience of your systems and into the underlying software as well. There are frequently dusty corners or
+superseded requests which are in need of updating and which have been forgotten about.
+
+### Do
+
+For each piece of data that could be tied to a user, explicitly document:
+* A specific list of what it is collected for.
+* When it will be deleted (and how it can be deleted by the user, not only by your own team).
+* How you collect it.
+
+Ensure that it is gathered only at sufficient granularity to answer these questions alone.
+
+This documentation is for internal use and should be full and complete, but it can be valuable to document this publicly for
+users, because it is important to establish an atmosphere of trust. This is not only beneficial in general terms for the
+customer relationship, but your users are more likely to volunteer the data you need to make business decisions if they
+are confident it will not be misused. This public documentation is linked to your more general privacy policy (in fact,
+it will form the great part of your privacy policy), and having this written in a form that your users can understand
+(alongside the legal language) helps to build the trust relationship.
+
+## Stay up to date
+
+The second-best practice is to _stay up to date_. This whole industry moves quickly as a general rule, and privacy is a
+fast-changing field; staying up to date can itself be a challenge. Technology that's available to you will alter frequently,
+but user expectations will also alter just as fast. It is important to not fall behind, and if you can stay ahead, then
+there is a real competitive advantage to be had by staking out a position as privacy-preserving. Managing user privacy
+and understanding how the industry may be changing may not be all of someone's job, and you do not need to be experts,
+but it should be _some_ of someone's job. Dedicate some of the training or conference budget to staying in touch with
+industry trends and regulatory updates.
+
+It can be difficult to keep up with changing attitudes and best practices in privacy. There isn't a convenient single
+place to go for this. This is partially because privacy protection is a wide-ranging field which impacts on many different
+parts of many different industries. But the very topic of how best to protect the privacy of your users and others is heavily
+disputed and there are many different and often conflicting approaches. In this course, we have laid out a path to follow
+and some best practices, but it will be useful to you to synthesize your own approach as best fits your goals, your
+organization's , and your users' needs.  We have compiled a list of resources available for you, your management, and
+the team around you to help you stay up to date with changing norms and what currently constitutes the best things to do.
+
+Some privacy changes made by browsers are technical in nature, and need to be understood by dev teams. Consider, for
+example, the change to [SameSite](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite)=Lax
+[by default](/samesite-cookies-explained/#changes-to-the-default-behavior-without-samesite) on cookies. This change
+affected features on some sites, and so may have needed technical changes. It was announced in advance and trialed before
+being finally rolled out. This is a good example of the sort of change that can affect user privacy (in this case, that
+change was an improvement) and may also need changes to your apps to correctly deal with.
+
+## Resources
+
+### Browser vendors and web platform developers
+
+For most web development teams, the best places to stay up to date with the latest industry practices on privacy and user protection
+are the browser vendors and consumer data protection organizations. For announcements and press releases, this means the various
+browser vendor team blogs: a good portion of these are about technologies and things unrelated to privacy, but where there are privacy-related
+announcements, they'll show up there:
+
+* Webkit [(https://webkit.org/blog/)](https://webkit.org/blog)
+* Chrome [(https://developer.chrome.com/blog/](https://developer.chrome.com/blog/) and [https://blog.chromium.org/)](https://blog.chromium.org/)
+* Firefox [(https://hacks.mozilla.org/)](https://hacks.mozilla.org/)
+* Edge [(https://blogs.windows.com/msedgedev/)](https://blogs.windows.com/msedgedev/)
+* Samsung Developers [(https://developer.samsung.com/blog)](https://developer.samsung.com/blog).
+
+To get a sense of what the browsers plan to implement and to work out their stances on upcoming and proposed APIs that you're thinking of using,
+there are status pages and positions pages:
+
+* WebKit [(https://webkit.org/status](https://webkit.org/status) and [https://github.com/WebKit/standards-positions)](https://github.com/WebKit/standards-positions)
+* Chrome [(https://chromestatus.com/features](https://chromestatus.com/features) and [https://developer.chrome.com/tags/deprecations/](https://developer.chrome.com/tags/deprecations/) for things being removed)
+* Edge [(https://developer.microsoft.com/en-us/microsoft-edge/status/)](https://developer.microsoft.com/en-us/microsoft-edge/status/)
+* Firefox [(https://mozilla.github.io/standards-positions/)](https://mozilla.github.io/standards-positions/)
+
+### Privacy organizations
+
+Of course, the browser vendors' positions are only one input to this conversation. There are also organizations pushing
+for improving privacy protection over the current state, and it's worth keeping tabs on them. The list is long, but here
+are just a few examples:
+
+* The EFF's Privacy issue [(https://www.eff.org/issues/privacy)](https://www.eff.org/issues/privacy).
+* The Open Rights Group's digital privacy initiative [(https://www.openrightsgroup.org/category/online-privacy)](https://www.openrightsgroup.org/category/online-privacy).
+* IAPP [(https://iapp.org/)](https://iapp.org/).
+
+### Governmental organizations
+
+To keep a closer eye on this whole area, there are also other actors in the field to follow. Governmental organizations'
+decisions and their approaches have some of the greatest impact:
+
+* [European Data Protection Board](https://edpb.europa.eu/edpb_en) in the EU.
+* [ICO](https://ico.org.uk/) in the UK.
+* The [California Privacy Protection Agency](https://cppa.ca.gov/) in California.
+* [Data Protection Africa](https://dataprotection.africa/)
+* [IAPP's overview of data protection across Asia](https://iapp.org/resources/topics/asia/).
+
+Mainstream media privacy reporting can often focus primarily on "big tech" firms and governmental organizations, which may
+seem removed from work done at a smaller company or organization. It's also often very US-centric. But even so, it's useful
+to keep aware of what the rules might be in the future, so that you can be prepared, as can the team and the management
+structures around you.
+
+It's also worth checking out [Understanding Privacy](https://www.smashingmagazine.com/printed-books/understanding-privacy/),
+published in November 2022 by Heather Burns, which gives a really good look at the whole field of data privacy and what you need to
+know about it. Recommended!
+
+## Looking inward
+
+Staying up to date also means staying up to date with your own stance. As part of _understanding_ your own software, you will
+have conducted audits and reviews of your own data collection and your third-party partners. These audits are not a one-time-only
+thing: they should be repeated at regular intervals and kept updated as software changes. It can be useful to mandate that the privacy
+audit documentation is kept updated as part of development, just as other technical documentation is. If a new release collects more
+data, then updating the privacy audit to include what is collected and why and when it will be deleted is of similar importance
+to a new release's APIs being described in the public documentation.
+
+### Do
+
+* Stay up to date with how the industry and user expectations around privacy may be changing over time. It's often the case that someone on a
+team is particularly interested in privacy-related topics, even if there isn't the budget or sufficient need for a full-time role. Consider
+formalizing this by making privacy an official part of someone's job, with accompanying benefits for the responsibility.
+* Make keeping the privacy audit documentation from "Understanding" earlier, part of your documentation process just like API docs are.
+* Re-run the audits of which data you collect and which third parties you use, either on a regular basis or when major features change;
+test your software as a new user to discover what information is asked for, and add this to the audits.
+
+## Prevent overreach and control access
+
+The third best practice is to _prevent overreach_: that is, to avoid doing more with data than you committed to, and to avoid
+speculatively gathering data in case it becomes useful in the future. That involves adapting your processes so that you set the
+culture you want around protecting user privacy. Cultural change is difficult, but once accomplished it will largely maintain itself,
+which is easier.
+
+### Document your uses
+
+Consider one of the best practices discussed earlier, that of documenting what exactly user data is collected for. This documentation
+is important for you to understand what you do and why, but it is equally important to ensure that this rule is obeyed. If
+someone suggests using already-gathered data for new analyses, push back on that suggestion, because that's not what the data was
+gathered for. This is helped by other aspects of data understanding: that data is only gathered at the lowest acceptable granularity,
+and is deleted after being used, because it's impossible to reuse existing data for new analyses if there is no existing data.
+
+### Have processes and rules around handling user data
+
+This can be difficult. It's hard to explain the nature of the user relationship in these situations, when there may be insights
+to be gained and nothing preventing that other than a promise previously made. But it's important to consider that the user
+entrusted the data to you for a specific purpose, and you (and your team) shouldn't abuse it for something else.
+A good approach here is to require some amount of process around access to user data. It is very important to avoid inserting
+a mandatory "privacy" component into every working process as a substitute for actually caring about the issue, because it
+can quickly become a "checkbox" feature that everybody ignores (and nobody likes more paperwork, especially if it's paperwork
+that nobody reads).
+
+### Make avoiding overreach be the path of least resistance
+
+But there is a chance to use the annoying nature of bureaucracy slightly for your own benefit here! If mining existing
+collected data requires filling out a "privacy request" where the new analysis is justified and recorded, then projects
+which don't really need that access are quite likely to avoid it in order to avoid the bureaucracy, or in order to
+avoid being named on the paperwork. You may already have policies in place around the security of user data: saved
+account details are restricted and not available to employees without justification. Consider tying privacy requirements
+to these existing policies. If there's some consideration of user privacy built into your processes at an early stage,
+that consideration can quickly become a routine part of planning. It's vital that architects, developers, and marketing
+do not see privacy protection as an onerous externally imposed restriction, but as a core part of the customer relationship.
+
+### Pushing back with alternatives, not stop energy
+
+With the preceding best practices in place, you will have gathered user data for only specific and measurable aims, and your
+user base will have been informed of those aims and understand them. However, you will also have a large collection of user
+data, and it's quite common that the business will seek to use that data for reasons other than those for which it was gathered.
+It's your goal to push back on those uses, but it's important to do so by providing alternatives. Imagine that you've requested
+that your users provide an age bracket that they fall into: 18-25, 25-35, 35-50, 50+. You did this in order to measure
+which types of products are most bought by different age brackets, and you explicitly informed users that's why their age
+was requested. If someone then suggested that they could use that data to send advertising email to every user under 25,
+that's a new and undeclared use for existing data, and so isn't allowed. But your intention here should be to find a way
+of meeting the business need without using data for things that weren't declared. If you push back on this without proposing
+any alternative, then user privacy will start to seem like the externally imposed restriction warned against earlier,
+rather than a core part of why your users trust you. As much as possible, avoid adding stop energy to processes: the only
+thing worse than a bald "computer says no" is "internal regulator says no". Instead, consider other ways you could meet
+that goal without using users' personal data to do it: perhaps use the list of products purchased as a guide for who to
+email, or avoid targeted distribution entirely. Help your team understand why your users trust you, and what that trust
+is founded upon, and then help them do what they want and what your users want. Make privacy work for you.
+
+### Do
+
+* Require a (short, simple) written justification from a named employee for access to user data.
+* Add user privacy requirements as early as possible in your processes.
+* Avoid adding privacy concerns as a mandatory "checkbox" feature.
+* Enforce the deletion of data as defined earlier.
+* Help the rest of the team understand how to achieve their goals without compromising your users' privacy.
diff --git a/src/site/content/en/learn/privacy/data/index.md b/src/site/content/en/learn/privacy/data/index.md
new file mode 100644
index 00000000000..c5316c84b89
--- /dev/null
+++ b/src/site/content/en/learn/privacy/data/index.md
@@ -0,0 +1,228 @@
+---
+title: 'Use just the data you need'
+authors:
+  - sil
+description: In this module learn strategies for collecting only the required data, managing and removing data you have collected, and explaining what you collect to users.
+date: 2023-02-22
+tags:
+  - privacy
+---
+
+A good way to mitigate risk for users is to not hold sensitive data about them that you do not need that impacts their privacy.
+There are a surprising number of ways to do this while still meeting your business goals, and it is worthwhile to consider each.
+You might:
+
+* Explain what you need the data for.
+* Collect data at lower granularity.
+* Remove data once used.
+* Not collect it in the first place.
+
+Each of these approaches can help your users feel more comfortable with what you're doing and why, and this contributes greatly
+to your relationship with them. Transparency builds trust, and importantly, trust can be a unique selling point for you. Many people
+assume that users and customers trust them by default, but consumers are constantly evaluating products and services and this may
+not be the case. If you build a relationship with your users where they trust you to handle their data and your interactions
+with respect, it can deliver a competitive advantage to you as a project or a business: it is something that your rivals may
+not match, a genuine differentiator.
+
+Let's unpack the above approaches, in order of most effective (but also most impactful on your business) to least effective
+but least disruptive to implement.
+
+## Don't collect it in the first place
+
+The most obvious way to avoid compromising your users' data is to not collect it. Some data collection is necessary to provide services,
+but there are more places where you can avoid data collection than you might think. Consider, for example, guest checkout.
+When users come to purchase something using your web app, you might require them to sign up for an account, because then
+you've captured personal details for later fulfillment: they can be added to the mailing list, they're already pre-qualified
+as an interested customer, and so on. However, customers recognise this, and don't like it:
+[in 2021, a study found that one out of  four abandoned sales](https://baymard.com/lists/cart-abandonment-rate) was because
+the site demanded that the user create an account. If you don't require an account, you're more likely to keep those customers.
+Making it possible to [complete a purchase without signing up](/payment-and-address-form-best-practices/#guest-checkout) gives
+users better options and also means you don't have as much of their data to protect and secure.
+
+## "Fuzz" your data
+
+Of course, avoiding collecting data at all may not be an option. It is important to collect data to provide services and make
+sensible business decisions. It can also be helpful to build marketing communications in the context of a trusting relationship.
+However, it's also important to realize that decisions made in aggregate (that is, which affect many users at once) are made
+about data in aggregate (that is, about collective properties of the data).
+
+For example, it is sometimes useful to have a sense of the demographics of your audience: which age brackets they fall into,
+location, and so on. This may change your messaging or your approach. But this does not mean that you need to collect the exact
+age for every user of your service. What you're often looking for are trends and overall properties. If the decision you wish to
+reach is affected by whether most of your audience is in the "18-34 key demographic", then the only question you actually need
+to ask  is whether your users are in that demographic. This collects them into two "buckets": in that group and not in that group.
+There may be situations where you need more granular data than that, but it's entirely reasonable to take the list of demographics
+you use to make decisions and ask your users to classify themselves with that list.
+
+### Example
+
+So, if it is useful to know how your user base divides up between the age categories "18-34", "35-49", "49-64", and "65+",
+then you can ask your users to choose which of those categories they fall into. It is tempting to ask for extremely granular,
+personal and personalized data, and then classify your users yourself, as this avoids needing to ask the same question again in
+more detail later; for example, to ask for an exact age and date of birth, and then use this to produce your own lists of how
+many users are in the "35-49" category. But it's important to realize how this looks: as the course has already covered and
+will cover again, asking for detailed levels of data can make people uncomfortable and so reduces user trust in your organization,
+while adding risk.
+
+It's also important to consider your data needs. Sometimes, the "need" for more granular data is speculative, a "just in case"
+requirement. Maybe we only need to classify users into those four age groups right now, but in the future we might want to
+narrow that down, and therefore we should collect very detailed data now to keep that option open for later. It may be worth
+considering how often the more granular data has actually been used in the past to guide decisions. Asking for data that is
+perceived as invasive relative to the service being offered necessarily results in a decrease in how much your users trust your
+organization. If that data is being gathered for “just in case” reasons, then you may not just be trading away user trust for
+improved business decisions but trading it away merely for the possibility of some theoretical future decision that may
+not even exist, while also taking on security requirements for that information.
+
+There are more detailed algorithmic ways to reduce the granularity of collected data as well. [Randomized response methods](https://en.wikipedia.org/wiki/Randomized_response)
+mean that the data is gathered with a tuneable degree of inaccuracy, and these have been used for decades in the social
+sciences when collecting potentially invasive or sensitive data while maintaining the responder's confidentiality. The
+above method of data gathering involves widening the user's answers (so "how old are you" becomes
+"which one of the following age groups do you fall into"), where randomized response involves having a certain proportion
+of users lie about their answers. If the proportion of users who respond incorrectly is known, then meaningful conclusions
+can still be drawn from the gathered data, but individual user's privacy is not compromised because their collected data may
+be incorrect. In this case, if 80% of your audience still state that they fall into the 18-34 demographic, you can be
+relatively confident that this is still the largest share, even if 10% of them are deliberately giving incorrect answers.
+The degree of incorrectness can also be altered programmatically, where correct answers are always solicited but the
+software alters a certain percentage of answers before transmitting.  This process and the consequences of it can also
+be explained to users when data is gathered: it means that the users do not have to trust that you will not abuse their
+collected data, because individual data is unreliable.
+
+A similar but more technically involved process is [_differential privacy_](https://en.wikipedia.org/wiki/Differential_privacy).
+This uses mathematical techniques to alter data storage so that aggregate properties of the data are still present, but
+it is not possible to even tell whether a particular individual even provided data, or which if any data they provided.
+Like randomized response, this protects users' data even from you and demonstrates clear intent on your part:
+you can't use your users' data if you don't have that data.
+
+These and similar approaches also provide increased security against data breaches and leaks, because the collected data
+reduces compromises to user privacy, even to you, and will also reduce the level of compromise if the data is leaked.
+Remember, though, that if you're applying differential privacy techniques on the server (so your users are sending you
+unaggregated data and then you use the techniques to aggregate it), you still need to secure that raw user data and
+then delete it after processing, and should have and follow clear policies to confirm that you're not using it before
+aggregation (or are clear about what you are using it for).
+
+## Retention: collect data and then remove it once used
+
+It's useful to remember that collected data has a lifecycle; it's collected, it gets used to help you make business decisions,
+and then, at some point, it should be removed. These are, again, trade offs: when you ask your users questions, or you
+store information about other websites they've visited, or you track which things they looked at and for how long in order
+to make predictions about their preferences, this is the data which is being granted to you for a specific purpose-not as
+an open-ended grant for the developer to use as they see fit. When that data is no longer needed for that purpose-sometimes
+after a minute, sometimes after many years-it should be deleted.
+
+Whenever you gather information about your users, you should know what you'll be using that data for (see below) and you should
+also know when and why you will stop holding that data. This might be when the user chooses to delete it, or when they sign
+out, after a specific time period, or after a specific event takes place. An excellent way to build trust in the relationship
+is to make it clear to your users how they can control data about them, including, wherever possible, a unilateral opt-out.
+How do they delete their data? How do they delete their account? In addition to helping to build that relationship, it is best
+practice to store data for as long as you need to process it and not longer, and that there should be a way for your users to
+see and remove data you collect from them or on their behalf. There may even be legislation on this point in territories in
+which you operate.
+
+This is an area where you can define clear technical goals, which helps users with self-service; if your users can opt out of
+your data warehouse without having to ask permission then they can feel much more comfortable with opting in, and it doesn't
+take any support resource to do so.
+
+It's important to recognise the importance of easy and default opt outs: "To build trust and recognition, companies can
+start by agreeing to a social contract where they commit to respecting their audience at each and every touchpoint,
+listening to their needs, and responding accordingly", states [IAPP](https://iapp.org/news/a/opt-in-opt-out-consent-is-what-its-all-about/).
+[The Nielsen Norman Group says](https://www.nngroup.com/articles/ten-usability-heuristics/) that users "need a clearly marked
+'emergency exit' to leave the unwanted action without having to go through an extended process". Everyone is aware that it's
+easier to subscribe than to unsubscribe. But, as Nielsen Norman says, giving users the ability to walk away without having to
+jump through hoops, "fosters a sense of freedom and confidence". Academic studies back this up and name it the "principle of
+revocability", stating: "The interface should allow the user to easily revoke authorities that the user has granted wherever
+revocation is possible. Users should be able to revoke such consent and therefore reduce authorities to access their resources
+if possible." (See [Yee](http://zesty.ca/pubs/csd-02-1184.pdf) and [Iacono](https://www.researchgate.net/profile/Luigi-Lo-Iacono/publication/326107790_Consolidating_Principles_and_Patterns_for_Human-centred_Usable_Security_Research_and_Development/links/5bb79798a6fdcc9552d45f77/Consolidating-Principles-and-Patterns-for-Human-centred-Usable-Security-Research-and-Development.pdf) for examples.)
+
+How long to retain data for, and which data to retain, is a subject which differs a great deal between organizations and
+between projects, but there are some common guidelines to consider.
+
+### Do
+
+It is useful here to allow users to delete accounts (and any associated data, where it is possible to do so) and to regularly (for example, on sign out)
+clear ephemeral and locally stored data on sign-out with the [Clear-Site-Data](https://developer.mozilla.org/docs/Web/HTTP/Headers/Clear-Site-Data) header.
+
+Supply a `Clear-Site-Data` header to remove some or all user data which has been stored client-side (whether in cookies,
+localStorage or IndexedDB, or in the browser cache), when reasonable. The obvious use-case for Clear-Site-Data is when a user
+logs out, but it can also be used after security incidents to ensure that a potentially compromised account has no lingering traces
+of compromised data stored on the client.
+
+Adding support for `Clear-Site-Data` involves sending an HTTP header, `Clear-Site-Data`, when the user signs out (or at other
+times when you wish to clear client-side storage), on the page which confirms the logged-out status (`https://your-site/logout`
+or similar). This header can have some or all of the following values, or `"*"` for all:
+
+```html
+Clear-Site-Data: "cache", "cookies", "storage"
+```
+
+These values clear, respectively, cached pages (and other HTTP-cached resources), stored cookies, and localStorage and IndexedDB and similar.
+You may see reference to another option, `executionContexts`, but this is not supported [by many browsers](https://caniuse.com/?search=executionContexts).
+Note that using the `Clear-Site-Data` header is likely to be easier than individually deleting all created resources yourself, because it does not require JavaScript code to be
+run on the client (and it is the only official way to clear the browser cache), but is [not supported by all browsers](https://caniuse.com/?search=clear-site-data).
+
+Usage note: If you're clearing the cache (by sending `Clear-Site-Data: cache`), then the `Clear-Site-Data` header should not be
+sent on your actual sign-out page, but on some other resource that that page loads. This is because on a slower computer
+with a large cache, the page will block while it clears the cache and this prevents navigation. This can take minutes to do,
+which will frustrate the user. It is unlikely to happen, but is difficult to test for and thus it is best practice to bear this in mind.
+
+## Explain what you need the data for
+
+The importance of trust in your users' relationship with your service has been stated repeatedly, because it increases user longevity.
+It also provides competitive advantage.  One way to increase that level of trust is with transparency into your processes, and a
+good way to be transparent is to explain what you want data for. You learned earlier that for each thing collected you should know
+when that thing will be deleted. In order to know that, you need to know why you want this data, which specific questions need it in
+order to find answers, and which decisions will be guided by collecting it. Once you know why you need this data that you've asked your
+user to give up, it will help to build trust by explaining that to those users. In your privacy policy, or when asking questions on account
+creation, describe why you need the answer to this particular question, what you'll do with that data, and when and how it can be removed.
+
+These explanations are much more visible when presented inline. Burying explanations in a dense policy document elsewhere on the website
+can seem like an attempt to hide them. A sign-up, checkout, or request form can present the reasons to collect data alongside the collection
+itself. Often, a form field may have an asterisk (*) to indicate that a field is required; complicated forms often have an information link
+(i) to explain what the field means. Consider adding to these explanations a description of why the data is being collected. A frequently
+used phrase for this is "Why do we need this?" next to a form field, which when clicked shows a pop-up explanation.
+
+Some example HTML might look as follows, and then CSS and JavaScript would take care of hiding the `<aside>` and showing it as a pop-up when
+the link is clicked. (Be sure to [confirm the accessibility of the form you make for your site](/learn/forms/accessibility)!)
+Exactly how to lay this out is dependent on your styles and approaches, but the main point here is to directly associate data collection with
+an explanation for why that data is being collected. This isn't necessary for every field. Nobody needs an explanation of why you require them to
+choose a password at sign-up. But decorating each request for personal and contact information with how you plan to use it and keep it can help
+make it clear to your users that you're invested in protecting their data.
+
+```html
+<div>
+	<label for="email">Email address*</label>
+	<input id="email" type="email" name="email" required aria-describedby="whyemail">
+	<a href="#whyemail">Why do we need this?</a>
+	<aside id="whyemail">We need this information as a unique identifier for you, and if you forget your password we can send you a reminder. We will use your email address to send you regular updates on the service if you choose, and will delete your email address from any mailing lists if you delete your account.</aside>
+</div>
+```
+
+Going through this process with everything you collect about a user can also help with internal processes and discussions.
+Earlier, you saw how there can be a temptation to collect data "just in case". When you are transparent about your reasons
+for collecting, it can be quite obvious that this is happening. If you are reluctant to write down publicly what you want
+to do with user data because those users won't like the explanation, this may be a sign that it is worth rethinking collecting
+it. This applies whether the distasteful explanation is too invasive ("we will use this to track where you visit on an hourly basis"),
+too wide-ranging ("we don't know what we'll use this for yet but we want it in case we think up something for it"), or too evasive
+("we will use this for internal undisclosed purposes"). This is not simply a question of morality; people are savvy enough to
+recognise this, as already described, and there is a user expectation that experimenting with something is not the beginning
+of a long-term commitment. It is a commonplace of user experience design to make sign-up as friction-free and easy as possible,
+because at early stages the user is (by definition) not heavily invested in your service, and so it is important to allow
+them to become more invested easily when they yet have little inclination to do so. If it is as easy to leave again, then
+experimenting with the service becomes exactly experimentation and not the unwilling start of a forced long-term commitment.
+As before, it is paradoxical but true that the best way to build trust is to not require your users to trust you if they do
+not want to.
+
+People have good reasons for not sharing data, or for sharing minimal data. At the beginning of your relationship with them, they
+might not have a reason to trust you, and should not have to. Your goal is to demonstrate why they should.
+
+### Do
+
+* Decide for all the data you plan to collect why you want it and how long you'll keep it for.
+* When you ask for that data, explain to your users why you are collecting it.
+* Delete it from your server databases after you've used it.
+* Allow users to delete accounts that they have created and clear stored data from their storage with the `Clear-Site-Data` header.
+
+### Why
+
+Building a relationship with your users is about trust, and trust is about openness. If you can demonstrate that you're not
+just collecting as much data as possible about your users and concealing your uses for it, then that helps to build trust, which can
+be a competitive advantage for you over less scrupulous rivals.
diff --git a/src/site/content/en/learn/privacy/encryption/index.md b/src/site/content/en/learn/privacy/encryption/index.md
new file mode 100644
index 00000000000..af78fc968c2
--- /dev/null
+++ b/src/site/content/en/learn/privacy/encryption/index.md
@@ -0,0 +1,234 @@
+---
+title: 'Encryption'
+authors:
+  - sil
+description: Learn how encryption can preserve privacy by ensuring others cannot intercept and read your user's content.
+date: 2023-02-22
+tags:
+  - privacy
+---
+
+Encryption is often a topic for security, but it's important for privacy too. The goal of encryption is to prevent others
+from reading the encrypted information… but preventing others from reading your information is one way to keep it private.
+A user is often limited in how much they can do that themselves, but with your assistance as provider of a service they're using,
+encryption can help to keep their data theirs.
+
+There are three relevant ways to apply encryption to aid user privacy: encryption in transit, encryption at rest,
+and encryption end-to-end:
+
+* **Encryption in transit** is keeping data encrypted between the user and your site: that is, HTTPS. You probably have HTTPS
+set up for your sites already, but are you sure _all_ the data in transit to your sites is encrypted? This is what redirection
+and HSTS are for, and they are described below and should be part of your HTTPS setup.
+* **Encryption at rest** is the encryption of data stored on your servers. This protects against data breaches and is an
+important part of your security stance.
+* **End-to-end encryption** is the encryption of data on the client before it ever reaches your server. This protects
+user data even from you: you can store your users' data, but you can't read it. This is difficult to implement, and isn't
+suitable for all types of application, but it's a strong aid to user privacy, because nobody can see their data other than themselves.
+
+## HTTPS
+
+The first move is serving your web service over HTTPS. It is very likely that you will have already done this, but if not it
+is an important step. HTTPS is HTTP, the protocol that a browser uses to request web pages from a server, but encrypted using SSL.
+This means that an outside attacker can't read or interfere with an HTTPS request in between the sender (your user) and the
+recipient (you), because it's encrypted and so they can't read it or change it. This is encryption in transit: while data is
+moving from user to you, or from you to user. HTTPS encryption in transit also prevents the user's ISP, or the provider of
+the Wi-Fi they're using, from being able to read the data they're sending to you as part of their relationship with your service.
+It may impact your service's features, too: many uses of existing JavaScript APIs require the website to be served over HTTPS.
+[MDN](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts) has a more comprehensive list,
+but APIs gatewayed behind a secure context include service workers, push notifications, web share and web crypto, and some device APIs.
+
+To serve your website over HTTPS you will need an SSL certificate. These can be created for free via [Let's Encrypt](https://letsencrypt.org/),
+or can often be provided by your hosting service if you are using one. It is also possible to use a third-party service which "proxies" your
+web service and can provide HTTPS, as well as caching and CDN services. There are numerous examples of such services, such as Cloudflare
+and Fastly—exactly which to use depends on your current infrastructure. In the past, HTTPS could be burdensome or expensive to implement,
+which is why it tended to be used only on payment pages or particularly secure origins; but freely available certificates, standards improvements,
+and greater proliferation of browsers have removed all those obstacles.
+
+### Do
+
+* Enable HTTPS on your servers for everything (whichever method you choose).
+* Consider using a proxy in front of your servers, such as Cloudflare ([httpsiseasy.com/](https://httpsiseasy.com/) explains the process).
+* [Let's Encrypt](https://letsencrypt.org/) will walk you through the process of creating your own Let's Encrypt SSL certificate.
+* Or use OpenSSL directly to create your own certificate and have it signed by your choice of certificate authority (CA)
+([Enable HTTPS](/enable-https/) explains how to do this in detail).
+
+Which approach you choose depends on business tradeoffs. Having a third-party manage the SSL connection for you is the easiest to set up,
+and does come with other benefits such as load balancing, caching, and analytics. But it also comes with an obvious ceding of some control
+to that third-party, and an unavoidable dependency on their services (and possible payment, depending on the services you use and your traffic levels).
+
+Generating certificates and having them signed by a CA is how the SSL process used to be conducted, but using Let's Encrypt can be easier if it's
+supported by your provider or if your server team is technically adept enough for it, and it's free. It's also common for your provider to offer
+SSL as a service if you're using something at a higher level than cloud hosting, so it's worth checking.
+
+### Why
+
+Security is a part of your privacy story: being able to demonstrate that you keep user data secure against interference helps
+to build trust. If you don't use HTTPS, your sites are also flagged as being "not secure" by browsers (and have been for some time).
+[Existing JavaScript APIs are often only available to HTTPS pages ("secure origins")](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts).
+It also protects your users against their [web usage being seen by their ISP](https://spreadprivacy.com/protection-from-isp-spying/).
+This is certainly a best practice; there's little to no reason to not use HTTPS for websites now.
+
+## How browsers present an HTTP (not secure) page
+
+<figure>
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/rs1XOzYuZ0L44DUGijUp.png", alt="Chrome desktop URL warning 'Not Secure'.", width="524", height="235" %}
+<figcaption>Google Chrome (desktop)</figcaption>
+</figure>
+<figure>
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/V4JrNHQB0JRUVQAgljna.png", alt="Firefox HTTP URL warning.", width="543", height="307" %}
+<figcaption>Mozilla Firefox (desktop)</figcaption>
+</figure>
+<figure>
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/U1fIa4q2ng68Olf3Zdy7.png", alt="Safari desktop HTTP URL warning.", width="800", height="166" %}
+<figcaption>Apple Safari (macOS desktop)</figcaption>
+</figure>
+<figure>
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/KlN1Zd15tQxFnfLTNDgI.png", alt="Android mobile HTTP warning.", width="800", height="168" %}
+<figcaption>Google Chrome (Android mobile)</figcaption>
+</figure>
+<figure>
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/VPffgyq9or8mPbxO2Bwp.png", alt="Apple Safari iOS HTTP warning.", width="800", height="397" %}
+<figcaption>Apple Safari (iOS mobile)</figcaption>
+</figure>
+
+## Redirect to HTTPS
+
+If your site is available on both http: and https: URLs, you should redirect all http URL accesses to https. This is for
+the reasons above, and it also ensures that your site won't show up on [whynohttps.com](https://whynohttps.com/) if it becomes popular.
+How to do this depends a great deal on your infrastructure. If you're hosted on AWS you can use a [Classic](https://aws.amazon.com/premiumsupport/knowledge-center/redirect-http-https-elb/)
+or [Application](https://aws.amazon.com/premiumsupport/knowledge-center/elb-redirect-http-to-https-using-alb/) load balancer.
+[Google Cloud](https://cloud.google.com/load-balancing/docs/https/setting-up-http-https-redirect) is similar. In Azure you can
+create a [Front Door](https://docs.microsoft.com/en-us/azure/frontdoor/front-door-how-to-redirect-https); in Node with Express
+[check for request.secure](https://docs.divio.com/en/latest/how-to/node-express-force-https/); in Nginx
+[catch all port 80 and return 301](https://serversforhackers.com/c/redirect-http-to-https-nginx); and in Apache,
+[use a RewriteRule](https://www.ssl.com/how-to/redirect-http-to-https-with-apache/). If you're using a hosting service,
+it's quite likely that they'll automatically handle redirecting to HTTPS URLs for you: Netlify, Firebase, and GitHub Pages do,
+among many others.
+
+## HSTS
+
+HSTS is short for "HTTP Strict-Transport-Security", and is a way of locking a browser into using HTTPS for your service forevermore.
+Once you're happy with your migration to HTTPS, or if you've already done that, then you can add a
+[Strict-Transport-Security HTTP response header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) to your
+outgoing responses. A browser which has accessed your site before will record having seen this header, and from then on will automatically
+access this site as HTTPS even if you request HTTP. This avoids going through your redirect as above: it's as if the browser silently "upgrades"
+all requests to your service to use HTTPS.
+
+Similarly, you can serve an [Upgrade-Insecure-Requests](https://developer.mozilla.org/docs/Web/HTTP/Headers/Upgrade-Insecure-Requests)
+header along with your pages. This does something different from but related to `Strict-Transport-Security`. If you
+add `Upgrade-Insecure-Requests: 1`, then requests from this page to other resources (images, scripts) will be requested
+as https even if the link is http. However, the browser will not re-request the page itself as https, and the browser will
+not remember for next time. In practice, Upgrade-Insecure-Requests is useful if you're converting an existing site with
+lots of links to HTTPS and converting the link URLs in content is hard, but it's better to change the content where possible.
+
+HSTS is primarily a security feature: it "locks" your site to HTTPS for users who have been there before. However,
+as above, HTTPS is good for privacy, and HSTS is good for HTTPS. Similarly, Upgrade-Insecure-Requests isn't really needed if
+you're updating all your content, but it is a useful “belt-and-braces” approach to add defence in depth in ensuring that
+your site will always be HTTPS.
+
+### Do
+
+Add the HSTS header to your outgoing responses:
+
+`Strict-Transport-Security: max-age=300; includeSubDomains`
+
+The max-age parameter dictates how long, in seconds, the browser should remember and enforce the HTTPS upgrade.
+(Here we set it to 300 seconds, i.e, five minutes.) Eventually you would want this to be 6,3072,000, which is two years,
+and is the figure that [hstspreload.org](https://hstspreload.org/) recommends, but it is quite difficult to recover
+if there are issues. So it is recommended that you set this with a low number at first (300), test to confirm nothing
+has broken, and then increase the number in stages.
+
+Add the `Upgrade-Insecure-Requests` headers to your outgoing responses:
+
+`Upgrade-Insecure-Requests: 1
+Content-Security-Policy: upgrade-insecure-requests`
+
+{% Aside %}
+**Should I add HSTS/UIR headers and add redirects?**
+Yes. You should redirect http URLs to https, and continue to do so even after HSTS is in place—it's important to do both.
+It's a best practice anyway ([https://web.dev/redirects-http/](/redirects-https/) explains) but it's also required in
+order to be added to the automatic preload list (see [https://hstspreload.org](https://hstspreload.org) for more details).
+{% endAside %}
+
+## End-to-end encryption
+
+A good way of keeping user data private is to not show it to anyone other than the user, including you. This helps a lot with
+your trust stance: if you don't have your user's data then it is clear that you can't do anything with it that they would
+not want. One way to do this is to not let user data leave their device at all, by storing everything client-side. This
+approach works, but there are limitations to a pure client-side application: browser data storage can be limited in size,
+and in some browsers may be cleared with little or no warning. It's also difficult or impossible to access your data
+across two devices, such as a laptop and a mobile phone. For this reason, it can be useful to send data to the server
+as normal, but encrypt it with a key known only to the user, so that the server cannot access it (because it can't decrypt it)
+but can store it.
+
+### How does it work?
+
+This approach is frequently used by messaging applications, where it's referred to as "end-to-end encryption", or
+"e2e". In this way, two people who know one another's keys can encrypt and decrypt their messages back and forth,
+and send those messages via the messaging provider, but the messaging provider (who does not have those keys) can't
+read the messages. Most applications are not messaging apps, but it is possible to combine the two approaches—a solely
+client-side data store, and data encryption with a key known to the client—to store data locally but also send it encrypted
+to the server. It is important to realise that there are limitations to this approach: this isn't possible for all services,
+and in particular it can't be used if you, as the service provider, need access to what the user is storing. As described
+in [part 2](/learn/privacy/data/) of this series, it is best to obey the principle of data minimisation; avoid collecting data at all if you can.
+If the user needs data storage, but you do not need access to that data to provide the service, then end-to-end encryption
+is a useful alternative. If you provide services which require being able to see what the user stores to provide the service,
+then end-to-end encryption is not suitable. But if you do not, then you can have the client-side JavaScript of your web
+service encrypt any data it sends to the server, and decrypt any data it receives.
+
+### An example: Excalidraw
+
+[Excalidraw](https://blog.excalidraw.com/end-to-end-encryption/) does this and explains how in a blog post. It is a vector
+drawing app that stores drawings on the server, which are encrypted with a randomly chosen key. Part of the reason that
+Excalidraw can implement this end-to-end encryption with relatively little code is that cryptographic libraries are now built
+into the browser with [window.crypto](https://developer.mozilla.org/docs/Web/API/SubtleCrypto/encrypt), which is a set
+of JavaScript APIs [supported in all modern browsers](https://caniuse.com/cryptography). Cryptography is hard and implementing
+the algorithms comes with many edge cases. Having the browser do the heavy lifting here makes encryption more accessible to
+web developers and therefore makes it easier to implement privacy via encrypted data. As Excalidraw describes in their writeup,
+the encryption key remains on the client-side, because it's part of the URL fragment: when a browser visits a URL
+`https://example.com/path?param=1#fraghere`, the path of the URL (`/path`) and the parameters (`param=1`) are passed to the server
+(`example.com`), but the fragment (`fraghere`) is not, and so the server never sees it. This means that even if the encrypted
+data goes through the server, the encryption key does not and thus privacy is preserved because the data is end-to-end encrypted.
+
+### Limitations
+
+This approach to encrypting user data is not foolproof. It contributes to your trust stance for your users but it cannot fully
+replace it. Your users will still have to trust your service, because you could, at any moment, swap out client-side JavaScript
+for some subtly similar JavaScript that does not impenetrably encrypt data; and although it is possible as a user to detect
+whether a website you're using has done that, it's extremely difficult to do so. In practice, your users will still need to
+trust that you will not deliberately read and abuse their data while promising to not do so. However, demonstrating that data
+is encrypted and not readable by you as a (not malicious) service provider can contribute a lot to demonstrating why you are trustworthy.
+
+It's also important to remember that one of the goals of end-to-end encryption is to stop you, the site owner, from being able
+to read the data. This is good for privacy, but it also means that if there are problems, you can't help. In essence, a service
+using end-to-end encryption puts the user in charge of the encryption keys. (This may not be obvious or overt, but someone has
+to have the key, and if data is kept private from you, then that's not you.) If those keys are lost, then there will be nothing
+you can do to help, and probably any data encrypted with those keys may also be lost. There is a fine balancing act here
+between privacy and usability: keep data private from everybody using encryption, but also avoid forcing users into having
+to be cryptology experts who manage their own keys in a secure manner.
+
+## Encryption at rest
+
+As well as encrypting your users' data in transit, it's also important to consider encrypting data that you have stored on the server.
+This helps to protect against data breaches, because anyone who obtains unauthorised access to your stored data will have encrypted data,
+which they will hopefully not have the keys to decrypt. There are two different and complementary approaches to encrypting data at rest:
+encryption that you add, and encryption that your cloud storage provider adds (if you're using a cloud storage provider).
+The storage provider encryption doesn't provide much protection against data breaches via your software (because storage provider
+encryption is usually transparent to you as a user of their service), but it does help against breaches that happen at the provider's
+infrastructure. It's often simple to turn on and so is worth considering. This field changes rapidly and your security team (or
+security-savvy engineers on your team) are the best to advise on it, but all cloud storage providers offer encryption at rest for
+block storage [Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucket-encryption.html) by setting,
+[Azure Storage](https://docs.microsoft.com/en-us/azure/storage/common/storage-service-encryption), and
+[Google Cloud Storage](https://cloud.google.com/storage/docs/encryption) by default, and for database data storage
+[AWS RDS](https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/Overview.Encryption.html),
+[Azure SQL](https://docs.microsoft.com/en-us/azure/azure-sql/database/transparent-data-encryption-tde-overview?view=azuresql&tabs=azure-portal),
+[Google Cloud SQL](https://cloud.google.com/docs/security/encryption/default-encryption) among others. Check this out with
+your cloud storage provider, if you're using one. Handling encryption of data at rest yourself to help protect user data
+from data breaches is more difficult, because the logistics of securely managing encryption keys and making them available
+to code without also making them available to attackers is challenging. This isn't the best place to advise on security issues at
+that level; talk with your security-savvy engineers or dedicated team about this, or external security agencies.
+
diff --git a/src/site/content/en/learn/privacy/fingerprinting/index.md b/src/site/content/en/learn/privacy/fingerprinting/index.md
new file mode 100644
index 00000000000..9baaa3e518c
--- /dev/null
+++ b/src/site/content/en/learn/privacy/fingerprinting/index.md
@@ -0,0 +1,334 @@
+---
+title: 'Fingerprinting'
+authors:
+  - sil
+description: Fingerprinting is the action of trying to identify a specific user, by using characteristics of their setup. Learn how this can damage user privacy.
+date: 2023-02-22
+tags:
+  - privacy
+---
+
+Fingerprinting means trying to identify a user when they return to your website, or identifying the same user across different websites.
+Many characteristics may differ between your setup and someone else's. For example, you may be using a different type of device
+and a different browser, have a different screen size, and have different fonts installed. If I have the font "Dejavu Sans"
+installed and you do not, then any website can tell the difference between you and me by checking for that font. This is how
+fingerprinting works; you build up a collection of these data points, and each provides more ways to distinguish between users.
+
+A more formal definition might look like this: Fingerprinting is the action of using obvious and non-obvious long-lived
+characteristics of a user's setup to attempt to distinguish them from as many other users as possible.
+
+## Why fingerprinting hinders user privacy
+
+There are some edge cases where fingerprinting a user is important: fraud detection, for example. But fingerprinting can also
+be used to track users across sites, and that tracking is often done without users consenting to it, or, in some cases, on the basis
+of an invalid consent that does not adequately inform the user. When that's done, those users will often find this  somewhat
+disquieting and feel rather betrayed.
+
+Fingerprinting means finding ways to covertly distinguish one user from another. Fingerprinting can be used to recognize that
+it's still the same user on the same website, or to recognize the same user in two different browser profiles at the same time.
+This means that fingerprinting can be used for tracking users across sites. The deterministic and overt methods of tracking,
+such as storing a cookie with a unique user-specific ID, can be to some extent observed by users and controlled
+(and the previous module explained some of these approaches). But fingerprinting is more difficult to avoid exactly
+because it is covert; it relies on unchanging characteristics and most likely happens invisibly. This is why it's called
+"fingerprinting". It is difficult at best to change your fingerprint, whether your digital one, or the ones on the ends
+of your fingers.
+
+Browser vendors _know_ that users do not like being tracked, and are continually implementing features to limit fingerprinting
+(some of which we saw in the previous module). Here, we're looking at how these features may affect your business
+requirements and how to still do what you want to do in a privacy-protecting way. This is more about how browser protection
+_against_ fingerprinting will affect what you do and how, rather than about how it will stop you _doing_ fingerprinting.
+
+In practice, most developers and most businesses have no need to fingerprint users. If your app requires users to sign in,
+then your users are identifying themselves to you, with their consent, and in a way that they can unilaterally opt out of
+at any time they choose. This is a privacy-protecting method of understanding which users are logged in. Your app may not
+require users to sign in at all, which is even more protective of your users' privacy (and you are then collecting
+[just the data you need](/learn/privacy/data/)).
+
+### Do
+
+Assess your third parties for fingerprinting. As part of the [third parties](/learn/privacy/third-parties) module, you
+may already have a list of any third-party services you're including and the web requests that they make. It may be possible
+to inspect those requests to see which data is being passed back to the originator, if any. However, this is often difficult;
+fingerprinting is by nature a covert process which involves requesting data that isn't subject to user approval.
+
+It's worth also reading the privacy policies of your third-party services and dependencies to look for indications of fingerprinting
+in use. It's sometimes referred to as "probabilistic matching", or as part of a suite of probabilistic matching techniques,
+as opposed to "deterministic matching".
+
+## How fingerprinting works
+
+It can be helpful to look at [https://amiunique.org/](https://amiunique.org/) and the [EFF's Cover Your Tracks](https://coveryourtracks.eff.org/)
+for an example of fingerprinting. Each will attempt to show you the characteristics of your personal browser setup which
+may differ from other people's setups. Frequently your personal combination of all these attributes is unique to you, or at
+least to a small group of similar people; this can be used to covertly track you. These websites aren't the whole story,
+and any uniqueness estimates are often how distinguishable you are among their visitors (who skew more technical and more
+privacy-focused) rather than among the whole internet, but the principles are sound.
+
+### Aside: passive and active fingerprinting
+
+There is a useful distinction here to be drawn between passive and active fingerprinting techniques. A passive fingerprinting
+technique is one which uses information that is given to the website by default; an active fingerprinting technique is one
+which explicitly interrogates the browser for extra information. The reason this distinction is important is that browsers
+can attempt to detect and intercept, or mitigate, active techniques. APIs can be restricted, or gatewayed behind a dialog
+asking the user's permission (and therefore alerting the user that they're being used, or allowing the user to deny them
+by default). A passive technique is one which uses data that's already been given to the website, often because historically,
+in the nascent days of the information superhighway, that information was given to all sites. The user-agent string is an
+example of this, and we'll look at this in more detail further on. It was considered useful in providing quite a lot of
+information about the user's browser, version, and operating system, in order that a website could choose to present different
+things based on that. However, this also increases the amount of distinguishing information made available, information
+which helps identify one user from another; and so such information is increasingly no longer available, or at least frozen
+so that it is no longer distinguishing. If what you do relies on this information—for example, if you're taking different
+code branches depending on the user-agent—then this code may break as browsers increasingly freeze or stop that information.
+Testing is the best defence here ( see later).
+
+### Aside: measuring fingerprintability
+
+The technical measure for how much information each of these data points provides is called _entropy_ and is measured in bits.
+A feature where there are many different possible values (such as the list of fonts installed) can contribute a lot of bits
+to the total, whereby something without much distinguishing power (such as which operating system you're using) may only add
+a few. The [HTTP Almanac](https://almanac.httparchive.org/en/2021/privacy#fingerprinting) describes how existing fingerprinting
+libraries automate this process of combining the responses from many different APIs into a "hash", which may identify only a
+small group of users, perhaps even only one. Maud Nalpas covers this in some detail in
+[this YouTube video](https://www.youtube.com/watch?v=0STgfjSA6T8&t=278s), but, in short, imagine that you were to see
+a list of your friends with their favourite music, favourite food, and the languages they speak … but with their names
+removed. It is quite likely that any one person's list will uniquely identify them among your friends, or at least narrow
+down the list to only a few people. This is how fingerprinting works; the list of things you like becomes the "hash". With
+that hash, identifying a user as the same person on two different unconnected sites becomes easier, which is the goal of
+tracking: to circumvent the user's desire for privacy.
+
+## What do browsers do against fingerprinting?
+
+Importantly, browser vendors are very aware of many different ways for a website (or a third party included on a website)
+to calculate a distinguishing fingerprint for a user, or for differing bits of information to contribute to the uniqueness
+of that fingerprint. Some of these ways are explicit and deliberate, such as the browser's user-agent string, which often
+identifies the browser, operating system, and version in use (and so contributes to distinguishing you from me, if you and
+I are using different browsers). Some of the ways are not deliberately created to be fingerprintable but end up being so
+anyway, such as the list of fonts, or video and audio devices available to the browser. (The browser doesn't have to _use_
+these devices, just get a list of them by name.) And some have been established to be contributors to a fingerprint well
+after release, such as the [exact pixel rendering of antialiasing of fonts on a canvas element](https://browserleaks.com/canvas).
+There are many more, and each way in which your browser differs from mine adds entropy and so potentially contributes to a
+way to tell the difference between you and me, and identify an individual person as uniquely as possible across websites.
+[https://amiunique.org](https://amiunique.org) has a long (but definitely not comprehensive) list of potential fingerprint-contributing
+features, and the list grows all the time (as there is heavy monetary interest in being able to fingerprint users, even if the users
+don't want that or perhaps don't expect it).
+
+### Not supporting certain powerful APIs
+
+The response from browser vendors to all of these approaches to calculating a user's fingerprint is to find ways to reduce
+the amount of entropy available from these APIs. The most restrictive option is to not implement them in the first place.
+This has been done by some major browsers for a variety of hardware and device APIs (such as NFC and Bluetooth access from
+client-side web apps), with fingerprinting and privacy concerns cited as reasons why they have not been implemented. This,
+obviously, can affect your apps and services: you can't use an API at all in a browser that doesn't implement it, and this can
+restrict or entirely cut off some hardware approaches from consideration.
+
+### The user permissions gateway
+
+A second approach taken by browser vendors is to prevent API or data accesses without some sort of explicit user permission.
+This approach is often taken for security reasons as well—a website should not be able to take pictures with your webcam
+without your permission! But here, privacy and security can have similar interests. Identifying someone's location is a
+privacy violation in itself, of course, but it's also a contributor to the uniqueness of a fingerprint. Requiring permission
+to see geolocation does not decrease the extra entropy that a location adds to the uniqueness of that fingerprint, but it
+basically eliminates _using_ geolocation for fingerprinting because it's no longer being done invisibly. The whole point of
+fingerprinting is to _surreptitiously_ distinguish users from one another. If you are prepared for the user to know that
+you're trying to identify them, then you don't need fingerprinting techniques: have the user create an account and log in
+with it.
+
+### Adding unpredictability
+
+A third approach taken in some cases is for browser vendors to "fuzz" the responses from APIs to make them less granular
+and thus less identifying. This was described as part of the randomized response mechanism in [the data module](/learn/privacy/data/#fuzz-your-data) as something
+you can do when collecting data from users, to avoid inadvertently collecting data which is identifying. Browser vendors
+can take this approach to API data made available to web apps and third parties as well. An example of this is the
+[very accurate timing APIs used to measure page performance](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp)
+from [`window.performance.now()`](https://developer.mozilla.org/docs/Web/API/Performance/now). The browser knows these values
+to microsecond accuracy, but the values returned are deliberately reduced in precision by rounding to the nearest 20 microsecond
+boundary to avoid their use in fingerprinting (and also for security to avoid timing attacks, admittedly). The goal here is
+to ensure the APIs remain useful, but to make the responses less identifying: in essence, to provide "herd immunity" by making
+your device look more like everyone else's device rather than being peculiar to you. [Safari presents a simplified version of the system configuration](https://www.apple.com/safari/docs/Safari_White_Paper_Nov_2019.pdf)
+for this very reason.
+
+### Enforcing a privacy budget
+
+The Privacy Budget is a proposal that suggests that browsers estimate the information revealed by each fingerprinting surface.
+It hasn't been implemented yet in browsers. The goal is to allow powerful APIs while preserving user privacy. [Learn more about the privacy budget proposal](https://developer.chrome.com/docs/privacy-sandbox/privacy-budget/).
+
+## Use a broad testing environment
+
+All of these will affect how you build apps and services. In particular, there is a wide diversity of responses and approaches
+across browsers and platforms in this area. This means that testing your work in multiple different environments is _critical_.
+This is, of course, always important, but it can be reasonable to assume that HTML rendering or CSS will be constant for a
+given rendering engine, no matter which browser or platform that engine is in (and so it can be tempting to test in only one
+Blink-based browser, for example). This is emphatically not the case for API usage precisely because browsers that share a
+rendering engine may differ dramatically on how they harden their API surface against fingerprinting.
+
+### Do
+
+* Check your own analytics and audience to guide the set of browsers you should prioritize when testing.
+* A good set of browsers to test in are Firefox, Chrome, Edge, Safari on desktop, Chrome and Samsung Internet on Android,
+and Safari on iOS. This ensures you test across the three major rendering engines (Gecko in Firefox, various forks of Blink
+in Chrome, Edge, and Samsung Internet, and Webkit in Safari), and on both mobile and desktop platforms.
+* If your site may also be used on less common devices, such as tablets, smartwatches, or gaming consoles, test there as well.
+Some hardware platforms can lag behind mobile and desktop for browser updates, meaning that some APIs may be unimplemented or
+unavailable in the browsers on those platforms.
+* Test with one or more browsers which claim user privacy as a motivator. Include upcoming pre-release and test versions
+of your most common browsers where you can and if they're available to you: Safari's [technology preview](https://developer.apple.com/safari/technology-preview/),
+Chrome's [Canary](https://www.google.com/intl/en_uk/chrome/canary/), Firefox's [Beta channel](https://www.mozilla.org/en-GB/firefox/channel/desktop/).
+These give you the best chance of identifying API breakage and changes that affect your sites before those changes affect
+your users. Similarly, bear your users' environments in mind with reference to any analytics you have present. If your
+user base has high numbers of older Android phones, be sure to include those in your tests. Most people do not have the
+fast hardware and latest releases that a development team does.
+* Test using both a clean profile and in incognito/private browsing mode; the likelihood is that you have already granted
+the permissions required in your personal profile. Test what happens if you deny permission to the site for any question.
+* Explicitly test your pages in Firefox's [fingerprinting protection](https://support.mozilla.org/kb/firefox-protection-against-fingerprinting)
+mode. Doing so will show permission dialogues if your page is attempting fingerprinting, or will return fuzzed data for some APIs.
+This helps you confirm if third parties included in your service are using fingerprintable data, or if your own service depends
+on that. You can then consider whether the deliberate fuzzing makes it more difficult to do what you need. Consider making
+corrections accordingly to obtain that data from another source, do without it, or use less granular data.
+* As previously discussed in [the third-parties module](/learn/privacy/third-parties), it's also important to audit your third-party
+dependencies to see if they are using fingerprinting techniques. Passive fingerprinting is difficult to detect (and
+impossible if a third party does it on their server) but fingerprinting mode may flag some fingerprinting techniques,
+and looking for uses of navigator.userAgent or unexpected creation of `<canvas>` objects may also reveal some approaches
+that deserve further scrutiny. It is also worth looking for uses of the term "probabilistic matching" in marketing or
+technical material describing a third party; this can sometimes indicate the use of fingerprinting techniques.
+
+### Cross-browser testing tools
+
+Testing your code for privacy purposes is difficult to automate, and the things to look for when testing manually are described earlier.
+What happens when you deny permission to the site for any APIs it tries to access, for example, and how is that presented to the user?
+An automated test cannot judge whether the site acts so as to help the user trust it, or conversely to encourage the user to distrust it,
+or think that something is being hidden.
+
+However, once the site has been audited, the testing of APIs to confirm that nothing has broken in newer browser versions (or in
+upcoming "beta" and "preview" versions) can be automated, and largely should be as part of your existing test suite. Something
+to consider with your automated test tools, when working with API surface coverage, is that most browsers allow some level of
+control over which APIs and features are available. Chrome does so through [command line switches](https://www.chromium.org/developers/how-tos/run-chromium-with-flags/),
+as does [Firefox](https://wiki.mozilla.org/Firefox/CommandLineOptions), and having access to these in the testing tool
+setup will allow you to run certain tests with APIs turned off or on. (See, for example, Cypress's
+[browser-launch plugin](https://docs.cypress.io/api/plugins/browser-launch-api#Modify-browser-launch-arguments-preferences-and-extensions) a
+nd puppeteer's [launch.args parameter](https://github.com/puppeteer/puppeteer/blob/v14.1.0/docs/api.md#puppeteerlaunchoptions) for ways
+to add browser flags when launching.)
+
+## Only rely on the user-agent string for coarse information
+
+Taking another example, browsers have since the beginning of the web sent a description of themselves with every request in the
+HTTP User-Agent header. For nearly as long, people have been exhorting web developers to not use the contents of the user-agent header
+to serve different content to different browsers, and for all that time web developers have done it anyway, with a certain amount of
+justification in some (but not all) cases. Since browsers don't want to be singled out for a suboptimal experience by websites,
+this results in every browser pretending to be every other browser, and the user-agent string looking something like:
+
+`Mozilla/5.0 (Linux; Android 6.0.1; SGP771 Build/32.2.A.0.253; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/52.0.2743.98 Safari/537.36`.
+
+This claims, among other things, to be Mozilla/5.0, a browser which was released at the same time that the first astronauts
+boarded the International Space Station over two decades ago. The user-agent string is a rich source of entropy for fingerprinting,
+of course, and to mitigate that fingerprintability, browser manufacturers have either already frozen the user-agent header or are working
+towards doing so. This is another example of changing the data that an API provides without necessarily removing the API entirely.
+Sending a blank user-agent header would break countless websites which assume that it is present. So in general, what browsers are doing
+is removing some of the detail from it, and then keeping it mostly unchanged from then on. (You can see this happening in
+[Safari](https://twitter.com/rmondello/status/943545865204989953), [Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/-2JIRNMWJ7s/m/3Oth5Wu2DgAJ),
+and [Firefox](https://www.bleepingcomputer.com/news/software/mozilla-tests-if-firefox-1000-user-agent-breaks-websites/).) This protection against
+detailed fingerprinting essentially means that you cannot rely on the user-agent header being accurate anymore, and if you are
+doing so then it's important to find alternative data sources.
+
+To be clear, the data in the user-agent isn't going entirely away, but it is available at a lower granularity, or is
+sometimes inaccurate because an older but unchanging number may be reported. For example, Firefox, Safari, and Chrome all cap
+the reported macOS version number to ten (see [Update on user-agent string reduction](https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html)
+for more discussion here). The exact details for how Chrome plans to reduce data in the user-agent string are available at [User-Agent Reduction](https://www.chromium.org/updates/ua-reduction/)
+but, in short, you can expect that the reported browser version number will only contain a major version (so the version number
+will look like 123.0.0.0, even if the browser is version 123.10.45.108), and the OS version will be without detail and will
+freeze to one of a small number of unchanging choices. So an imaginary Chrome version 123.45.67.89 running on an imaginary
+"Windows 20" would report its version number as:
+
+`Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
+Chrome/123.0.0.0 Safari/537.36`
+
+The core information you need (the browser version) is still available: it is Chrome 123, on Windows. But the subsidiary
+information (the chip architecture, which Windows version, which version of Safari it's imitating, the browser minor version)
+will no longer be available after the freeze.
+
+Compare this with a "current" Chrome user-agent on a different platform:
+
+`Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36`,
+
+and it can be seen that the only thing that differs is the Chrome version number (104) and the platform identifier.
+
+Similarly, Safari's user-agent string does show a platform and a Safari version number, and also gives an OS version on iOS,
+but all else is frozen. So an imaginary Safari version 1234.5.67 running on an imaginary macOS 20 might give its user-agent as:
+
+`Mozilla/5.0 (Macintosh; **Intel Mac OS X 10_20_0**) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15`,
+
+and on an imaginary iOS 20 it might be:
+
+`Mozilla/5.0 (iPhone; CPU **iPhone OS 20_0** like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/**20.0 Mobile/15E148 Safari/605.1.15**`.
+
+Again, the core information (this is Safari, it's on iOS or macOS) is available, and iOS Safari still provides an iOS version number;
+but much of the ancillary information that was available in the past has since been frozen. Importantly, this includes the Safari
+version number, which is not necessarily available.
+
+The changes to the reported user-agent were hotly debated. [https://github.com/WICG/ua-client-hints#use-cases summarises](https://github.com/WICG/ua-client-hints#use-cases) summarises
+some of the arguments and reasons for the change, and Rowan Merewood has a [slide deck](https://docs.google.com/presentation/d/1IngTSZ_TQHjJEsRcCpm_WsnLCV4wpYYZ8D1CNnK4UZ4/edit#slide=id.ge864b7bfc7_0_360)
+with some strategies for migrating away from using the user-agent for differentiation, in the context of the UA Client Hints proposal explained further on.
+
+### Fuzzing
+
+Fuzzing is a term from security practice, where APIs are called with unexpected values in the hope that they handle those
+unexpected values badly and expose a security issue. Web developers should be familiar with [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting),
+which involves adding malicious script to a page, often because the page doesn't correctly escape injected HTML (so you do a search query
+with the text `<script>` in it). Back-end developers will be aware of [SQL injection](https://developer.mozilla.org/docs/Glossary/SQL_Injection),
+where database queries that don't correctly validate user input expose security issues (as notably illustrated by xkcd with
+[Little Bobby Tables](https://xkcd.com/327/)). Fuzzing, or [fuzz testing](https://developer.mozilla.org/docs/Glossary/Fuzzing), is more properly
+used for automated attempts to provide many different invalid or unexpected inputs to an API and to check the results for security leaks,
+crashes, or other bad handling. These are all examples of deliberately providing inaccurate information. Here, though, it's being done
+preemptively by browsers (by making the user-agent deliberately incorrect), to encourage developers to stop relying on that data.
+
+#### Do
+
+* Check your codebase for any reliance on the user-agent string (a search for `navigator.userAgent` is likely to find most occurrences
+in your client-side code, and your backend code will likely be looking for `User-Agent` as a header), including your
+dependencies.
+* If you find uses in your own code, work out what the code is checking for, and find another way to do that differentiation
+(or find a replacement dependency, or work with the dependency upstream by filing issues or checking with them for updates). Sometimes
+browser differentiation is necessary to work around bugs, but the user-agent will increasingly become not the way to do this once it is frozen.
+* You may be safe. If you’re only using the core values of brand, major version, and platform, then these will almost certainly still be
+available and be correct in the user-agent string.
+* MDN describes good ways to avoid reliance on the user-agent string [("browser sniffing")](https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent),
+the main one of which is feature detection.
+* If you are reliant on the user-agent string in some way (even when using the few core values that remain useful), it’s a good
+idea to test with upcoming user-agents that will be in new browser releases. It is possible to test with those upcoming browser
+versions themselves by means of beta or technology preview builds, but it's also possible to set a custom user-agent string for
+testing. You can override the user-agent string in [Chrome, Edge](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/),
+[Firefox](https://support.mozilla.org/kb/how-reset-default-user-agent-firefox), and
+[Safari](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/TheDevelopMenu/TheDevelopMenu.html#//apple_ref/doc/uid/TP40007874-CH7-SW5),
+when doing local development, in order to check how your code deals with different user-agent values that you might receive from users.
+
+## Client Hints
+
+One major proposal to provide this information is [User-Agent Client Hints](/user-agent-client-hints/),
+although this is not supported across all browsers. Supporting browsers will pass three headers: `Sec-CH-UA`, which gives
+a browser brand and version number; `Sec-CH-UA-Mobile`, which indicates if the request comes from a mobile device; and `Sec-CH-UA-Platform`,
+which names the operating system. (Parsing these headers is less easy than it seems because they are
+[Structured Headers](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-header-structure-15) rather than simple strings,
+and this is enforced by browsers sending "tricky" values, which will be handled incorrectly if not properly parsed. This is,
+as earlier, an example of “fuzz testing” being done preemptively by the browser. A developer using this data is required to handle
+it properly because the data is designed so that improper or lazy parsing will likely give bad results, such as showing brands that don’t
+exist, or strings that don’t close properly.) Fortunately, this data is also made available by the browser to JavaScript directly as
+`navigator.userAgentData`, which in a supporting browser might look something like this object:
+
+```json
+{
+  "brands": [
+	{
+  	"brand": " Not A;Brand",
+  	"version": "99"
+	},
+	{
+  	"brand": "Chromium",
+  	"version": "96"
+	},
+	{
+  	"brand": "Google Chrome",
+  	"version": "96"
+	}
+  ],
+  "mobile": false
+}
+```
diff --git a/src/site/content/en/learn/privacy/index.md b/src/site/content/en/learn/privacy/index.md
new file mode 100644
index 00000000000..7d7cd1999f1
--- /dev/null
+++ b/src/site/content/en/learn/privacy/index.md
@@ -0,0 +1,81 @@
+---
+title: Learn Privacy
+authors:
+  - sil
+description: A course to help you build more privacy-preserving websites.
+date: 2023-01-24
+---
+
+
+## With great power…
+
+When you acquire a new user, you are granted their trust. It's your organization's responsibility to honor this trust by keeping
+user data private. As people use your service, they will share some information with your site or system so it can function
+and serve them best.
+
+As a developer, you have a key role to play! Ensuring that your site or system respects user privacy isn't just a product
+manager's or legal team's responsibility.
+
+_You_ have the power to directly improve the privacy of the people who use your site:
+* By factoring in privacy early, as you're making technical and design decisions. This is called _privacy by design_.
+* By using your technical expertise to equip the people you work with so they can make informed privacy decisions themselves.
+
+Just like making the right security decisions, making good privacy decisions [shouldn't be scary](/security-not-scary/)!
+This course is here to help.
+
+## What you will learn
+
+In this course, you will learn about:
+
+* **Pragmatic privacy techniques**. We'll talk about making your site _privacy-preserving_. To be mindful about all the bits
+of data that flow through your site, you'll learn a few [encryption](/learn/privacy/encryption/) tips and understand what
+it means to collect just the [data](/learn/privacy/data/) you need. We also know that it may be helpful to collect
+some user data and to leverage third parties as building blocks for your site to provide useful services—be it payment solutions, map widgets, or
+error monitoring scripts. This course will offer tools and tips for you to approach this with care, especially when it
+comes to [third parties](/learn/privacy/third-parties/).
+* **What's up with web privacy**. You will learn about upcoming browser and web platform privacy improvements,
+and how you can prepare your site for these changes. You'll also learn about what [fingerprinting](/learn/privacy/fingerprinting/) protections
+in browsers mean for your site.
+* **Ways to scale and maintain your organization's privacy approaches**. In [best practices](/learn/privacy/best-practices),
+you will find tips to help the people you work with—direct teammates, members of other teams, or your company's leadership—consider
+closely the impact of their privacy choices, and make decisions accordingly.
+
+## Prerequisites
+
+To follow this course, you need an intermediate knowledge of HTML, JavaScript, and HTTP requests and headers.
+
+## Why this course matters today
+
+1. User concerns and user experience. People are increasingly concerned about their privacy on the web. Offering more privacy
+and being mindful about data collection can help build trust in your service and improve their experience, directly contributing
+to your organization's success.
+1. Compliance. Over recent years, privacy regulations have emerged all over the world, and keep evolving: in 2017, the
+rehauled APPI in Japan; in 2018, the GDPR in Europe, in 2020, the CCPA in California; in 2022, the PDPB in India …
+Whether or not you've directly worked on tasks to comply with these regulations, this shift indicates regulators’
+growing attention to privacy.
+1. Readiness for a more private web. Important privacy improvements have been made and will keep coming to browsers and
+to the web platform. Browser vendors are limiting cross-site tracking enabled by third-party cookies, and are actively
+combating fingerprinting and other covert tracking techniques. [Safari's ITP](https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/),
+[Firefox's ETP](https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop),
+and [third-party cookie phase-out plans in Chrome](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html) are a few recent examples.
+Besides browser features, changes to the web platform itself are coming: ecosystem actors, browser vendors, and developers are
+incubating ideas for new web APIs to replace old ones, and fulfill important use cases in a privacy-preserving way.
+All these changes make the web a safer and more private place for users, and they may come with a better developer
+experience too! While these changes are improvements, you'll need to take measures to adapt your site or system to them.
+
+## Bear in mind
+
+This course doesn't offer legal advice, and it isn't a checklist. Instead, it lays out code snippets, best practices,
+and questions to ask yourself and your team on your privacy journey. Throughout this course, we refer to products or
+documentation maintained by third parties to illustrate key points. Your own approach is up to you to define. It will
+depend on your organization, your business, and your compliance requirements and users’ needs.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+Let's get started!
+
+{% Aside %}
+This course was written by [Stuart Langridge](https://twitter.com/sil), with input and review from [Maud Nalpas](https://twitter.com/maudnals), Martin Sramek, and [Rachel Andrew](https://twitter.com/rachelandrew). Special thanks to David Adrian for providing additional support for the encryption module, Rainhard Findling for providing additional support for the data module, and Annette McFadyen and [Aaron Forinton](https://github.com/aaronforinton) for supporting the publication process.
+{% endAside %}
diff --git a/src/site/content/en/learn/privacy/privacy.11tydata.js b/src/site/content/en/learn/privacy/privacy.11tydata.js
new file mode 100644
index 00000000000..7aafee5da79
--- /dev/null
+++ b/src/site/content/en/learn/privacy/privacy.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('privacy');
diff --git a/src/site/content/en/learn/privacy/third-parties/index.md b/src/site/content/en/learn/privacy/third-parties/index.md
new file mode 100644
index 00000000000..0ea63b9234d
--- /dev/null
+++ b/src/site/content/en/learn/privacy/third-parties/index.md
@@ -0,0 +1,696 @@
+---
+title: 'Third parties'
+authors:
+  - sil
+description: Learn about third-parties and how to mitigate the risks to your users when integrating third parties.
+date: 2023-02-22
+tags:
+  - privacy
+---
+
+## What is a third-party?
+
+It's rather rare that a website is wholly self-contained. [The HTTP Web Almanac shows that most websites—around 95%—contain some third-party content](https://almanac.httparchive.org/en/2021/third-parties).
+
+The Almanac defines third-party content as something hosted on a shared and public origin, which is widely used by a variety
+of sites and uninfluenced by an individual site owner. These might be images or other media such as video, fonts, or scripts.
+Images and scripts account for more than everything else added together. Third-party content isn't essential for developing a site,
+but it might as well be; you will almost certainly be using something loaded from a public shared server, whether web fonts,
+embedded iframes of videos, adverts, or JavaScript libraries. For example, you may be using web fonts served from Google Fonts,
+or measuring analytics with Google Analytics; you may have added Like buttons or Sign In With buttons from social networks;
+you may be embedding maps or video, or handling shopping purchases via third-party services; you may be tracking errors and
+logging for your own development teams via third-party monitoring tools.
+
+For privacy purposes, it is useful to consider a slightly different and less broad definition: a third-party resource, and in
+particular a third-party script, is served from a shared and public origin and widely used as illustrated, but is also authored
+by someone other than the site owner. The aspect of third-party _authorship_ is what's key when considering how to protect your
+users' privacy from others. This will lead you to consider what risks are present, and then decide how or whether to use a
+third-party resource based on those risks. As already discussed, these things will help you to understand the context and
+therefore to understand which trade-offs you need to make, and what they mean.
+
+This isn't quite what's meant when discussing "third-party resources" in general: the distinction between first-party and
+third-party is really one about the context in which something is used. A script loaded from another website is a third-party
+resource, and the HTTP request which loads the script may include cookies, but those cookies aren't really "third-party cookies";
+they're just cookies, and whether they're "third-party" or "first-party" depends on whether the script is being loaded on a
+page on your site or a page on the script owner's site.
+
+## Why do we use third-party resources?
+
+Third-parties are a great way to add functionality to your site. That may be features that are exposed to users, or invisible
+developer functions such as error tracking, but they reduce your development load, and the scripts themselves are maintained
+by someone else: the development team of the service you're including. This all works because of the composability of the web:
+being able to put parts together to form a whole that is greater than their sum.
+
+The HTTP Archive's Web Almanac gives a nice description: 
+
+<blockquote><p>Third parties provide a never-ending collection of images, videos,
+fonts, tools, libraries, widgets, trackers, ads, and anything else you can imagine embedding into our web pages. This enables
+even the most non-technical to be able to create and publish content to the web. Without third parties, the web would likely
+be a very boring, text-based, academic medium instead of the rich, immersive, complex platform that is so integral to the lives
+of many of us today.</p></blockquote>
+
+## What can third-party resources do?
+
+### Accessing some information
+
+When you use a third-party resource on your website, regardless of what it is, some information is passed to that third party.
+For example, if you include an image from another site, the HTTP request that the user's browser makes will pass along a Referer
+header with your page's URL, as well as the user's IP address.
+
+### Cross-site tracking
+
+Continuing with that same example—when the image loads from the third-party site, it can include a cookie, and that cookie will
+be sent back to the third-party when the user next requests that image. This means that the third party can know that their
+service is being used on your site, and it can send back a cookie, potentially with a unique ID for that user. This means that
+the next time the user visits your site, or _any other site which includes a resource from that third party_, that unique
+ID cookie will be sent again. This allows the third party to build up a log of where that user visits: your site, other sites that
+use the same third-party resource, all over the web.
+
+This is _cross-site tracking_: allowing a third party to collect a log of a user's activity on many websites, as long as those
+websites all use a resource coming from the same third party. That might be a font, an image, or a stylesheet—all static resources.
+It also might be a dynamic resource: a piece of script, a social media button, an advert. Included script can gather even more
+information, because it is dynamic: it can inspect the user's browser and environment and pass that data back to its originator.
+Any script can do this to some extent, as can dynamic resources that don't present as a script, such as a social media embed or
+an ad or a share button. If you look at the details of a cookie banner on popular websites you can see a list of the organizations
+that may add a tracking cookie to your users to build up a picture of their activities to create a profile of that user. There
+can be hundreds of them. If a third party offers a service for free, one way that this can be economically viable for them to
+do is because they collect and then monetise this data.
+
+A useful guide to the types of privacy issues from which a browser should protect its users is the [Target Privacy Threat Model](https://w3cping.github.io/privacy-threat-model/#high-level-threats).
+This is a document still under discussion at the time of writing, but it gives some high-level classifications of the sorts of
+privacy threats that exist. The risks from third-party resources are primarily "unwanted cross-site recognition", where a
+website can identify the same user across multiple sites, and "sensitive information disclosure", where a site can collect
+information a user considers sensitive.
+
+This is a _key distinction_: unwanted cross-site recognition is bad even if the third party isn't gathering additional sensitive
+information from it, because it takes away a user's control over their identity. Getting access to a user's referrer and IP address
+and cookies is an unwanted disclosure in itself. Using third-party resources comes along with a planning component of how you'll use
+them in a privacy-preserving way. Some of that work is in your remit as the site developer, and some is done by the browser
+in its role as the user agent; that is, the agent working on behalf of the user to avoid sensitive information disclosure and
+unwanted cross-site recognition where possible. Below we'll look in more detail at mitigations and approaches on a browser
+level and a site development level.
+
+### Server-side third-party code
+
+Our earlier definition of a third party deliberately altered the HTTP Almanac's rather client-side approach (as is appropriate
+for their report!), to include third-party authorship, because from a privacy perspective, a third party is anyone who knows anything
+about your users who isn't you.
+
+This does include third parties who provide services that you use on the server, as well as the client. From a privacy
+standpoint, a third-party library (such as something included from NPM or Composer or NuGet) is also important to understand.
+Do your dependencies pass data outside your borders? If you pass data to a logging service or a remotely hosted database,
+if libraries you include also "phone home" to their authors, then these may be in a position to violate your users' privacy
+and therefore they need to be audited. A server-based third party usually has to be handed the user data by you, which means
+that the data it is exposed to is more under your control. By contrast, a client-based third party—a script or HTTP resource
+included on your website and fetched by the user's browser—can collect some data directly from the user without that process
+of collection being mediated by you. Most of this module will be concerned with how to identify those client-side third parties
+you've elected to include and expose your users to, exactly because there is less mediation possible by you. But it is worth
+considering securing your server-side code so that you understand outbound communications from it and can log or block any that
+are unexpected. Details on how exactly to do this are outside our scope here (and very dependent on your server setup) but
+this is another part of your security and privacy stance.
+
+## Why do you need to be careful with third parties?
+
+Third-party scripts and features are really important, and our goal as web developers should be to integrate such things,
+not to turn away from them! But there are potential problems. Third-party content may create performance issues and can
+also create security issues because you're bringing in an external service inside your trust boundary. But third-party
+content can also create privacy issues!
+
+When we're talking about third-party resources on the web, it's useful to think of security issues being (among other things)
+where a third party can steal data from your company, and to contrast that with privacy issues, which are (among other things)
+where a third party that you included steals or obtains access to your users' data without you (or them) consenting.
+
+An example of a security issue is where "web skimmers" steal credit card information-–a third-party resource which is included
+on a page into which a user enters credit card details can, potentially, steal those credit card details and send them off to
+the malicious third party. Those who create these skimmer scripts are very creative in working out places to hide them.
+[One summary](https://www.zdnet.com/article/hackers-hide-web-skimmer-inside-a-websites-css-files/) describes how skimmer scripts
+have been hidden in third-party content such as those images used for site logos, favicons, and social media networks,
+popular libraries such as jQuery, Modernizr, and Google Tag Manager, site widgets such as live chat windows, and CSS files.
+
+Privacy issues are a little different. [These third parties are part of your offering](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript);
+to maintain your users' trust in you, you need to be confident that your users can trust _them_. If a third party that you use gathers data about
+your users and then misuses it, or makes it difficult to delete or discover, or suffers a data breach, or violates your users'
+expectations, then your users will likely perceive that as a breakdown in their trust of _your_ service, not simply of the
+third party. It is your reputation and relationship on the line. This is why it's important to ask yourself: do you trust
+the third parties you're using on your site?
+
+## What are some examples of third parties?
+
+We're discussing "third parties" generally, but there are actually different kinds, and they have access to different amounts of user data.
+For example, adding an `<img>` element to your HTML, loaded from a different server, will give that server different information
+about your users than adding an `<iframe>` might, or a `<script>` element. These are examples rather than a comprehensive list, but it's
+useful to understand the distinctions between the different types of third-party items that your site can employ.
+
+### Requesting a cross-site resource
+
+A cross-site resource is anything on your site which is loaded from a different site and isn't an `<iframe>` or a `<script>`. Examples
+include `<img>`, `<audio>`, `<video>`, web fonts loaded by CSS, and WebGL textures. These are all loaded via an HTTP request, and as
+described earlier, those HTTP requests will include any cookies previously set by the other site, the requesting user's IP address,
+and the URL of the current page as the referrer. All third-party requests historically included this data by default, although
+there are efforts to reduce or isolate the data passed to third parties by various browsers, as described in "Understanding
+Third-Party Browser Protections" further on.
+
+### Embedding a cross-site iframe
+
+A complete document embedded in your pages via an `<iframe>` can request additional access to browser APIs, in addition to the trifecta
+of cookies, IP address, and referrer. Exactly which APIs are available to `<iframe>`d pages and how they request access is browser-specific,
+and is currently undergoing changes: see "Permissions Policy" below for current efforts to curtail or monitor API access in embedded
+documents.
+
+### Executing cross-site JavaScript
+
+Including a `<script>` element loads and runs cross-site JavaScript in the top-level context of your page. This means that the
+script that runs has complete access to anything that your own first-party scripts do. Browser permissions still manage this data,
+so requesting the user's location (for example) will still require user agreement. But any information present in the page or
+available as JavaScript variables can be read by such a script, and this includes not just cookies that are passed to the third party
+as part of the request, but also cookies that are intended for your site alone. Equally, a third-party script loaded onto your
+page can make all the same HTTP requests that your own code does, meaning that it could make `fetch()` requests to your back-end APIs to get data.
+
+### Including third-party libraries in your dependencies
+
+As described earlier, your server-side code will also likely include third-party dependencies, and these are indistinguishable from your own
+code in their power; code that you include from a GitHub repository or your programming language's library (npm, PyPI, composer, and so on)
+can read all the same data that your other code can.
+
+## Knowing your third parties
+
+This, then, requires some understanding of your list of third-party suppliers, and what their privacy, data collection, and user
+experience stances and policies are. That understanding then becomes part of your series of trade-offs: how useful and important
+is the service, balanced against how intrusive, inconvenient, or disquieting their demands are on your users. Third-party
+content provides value by taking the heavy lifting from you as site owner and allows you to focus on your core competencies;
+and so there is value in making that trade-off and sacrificing some user comfort and privacy for a better user experience.
+It is important to not confuse user experience with _developer_ experience, though: "it is easier for our dev team to build
+the service" is not a compelling story to users.
+
+How you get that understanding is the process of audit.
+
+### Audit your third parties
+
+Understanding what a third party does is the process of _audit_. You can do this both technically and non-technically, and
+for an individual third party and for your whole collection.
+
+#### Run a non-technical audit
+
+The first step is non-technical: read the privacy policies of your suppliers. If you include any third-party resources,
+check the privacy policies. They will be long and full of legal text, and some documents may use some of the approaches
+specifically warned against [in earlier modules](/learn/privacy/data/), such as overly general statements and without any indication
+of how or when collected data will be removed. It is important to realize that from a user perspective, all the data that
+is collected on your site, including by third parties, will be governed by these privacy policies. Even if you do
+everything correctly, when you are transparent about your goals and exceed your users' expectations of data privacy and
+sensitivity, users may hold you responsible for anything your chosen third parties do as well. If there is anything in
+their privacy policies which you would not wish to say in your own policies because it would decrease users' trust, then
+consider whether there is an alternative supplier.
+
+This is something which can usefully go hand in hand with the technical audit discussed further on, as they inform one
+another. You should know the third-party resources that you're incorporating for business reasons (such as ad networks
+or embedded content) because there will be a business relationship in place. This is a good place to start a non-technical
+audit. The technical audit is also likely to identify third parties, especially those included for technical rather
+than business reasons (external components, analytics, utility libraries), and that list can join with the list of
+business-focused third parties. The goal here is for you as site owner to feel that you understand what the third
+parties you're adding to your site are doing, and for you as a business to be able to present your legal advisor
+with this inventory of third parties to make sure you are meeting any obligations required.
+
+#### Run a technical audit
+
+For a technical audit, it's important to use the resources in situ as part of the website; that is, don't load a dependency
+in a test harness and inspect it that way. Make sure you're seeing how your dependencies act as part of your actual website,
+deployed on the public internet rather than in a test or development mode. It is very instructive to view your own website as
+a new user. Open a browser in a clean new profile, so that you are not signed in and have no stored agreement, and try visiting your site.
+
+{% Aside %}
+Testing a site as if you are a new user means viewing that site with no saved information about it. It is best in these
+situations to create a brand new profile every time you want to test a website as though you're a new user. Don't create
+one new profile and re-use it; create a new profile every time and then discard it. This is mostly a quick process on desktop
+browsers: see the documentation for [Chrome](https://support.google.com/chrome/answer/2364824),
+[Edge](https://support.microsoft.com/en-us/topic/sign-in-and-create-multiple-profiles-in-microsoft-edge-df94e622-2061-49ae-ad1d-6f0e43ce6435),
+and [Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles#w_manage-profiles-when-firefox-is-open).
+Chrome for Android and Safari don't support creating a new empty profile, so incognito/private browsing modes will have to suffice there, but
+in general, it is important to test sites both in incognito/private browsing modes and with a freshly-created profile.
+{% endAside %}
+
+Sign up on your own site for a new account, if you provide user accounts. Your design team will have orchestrated this new user
+acquisition process from a UX perspective, but it can be illustrative to approach it from a privacy perspective. Don't simply click
+"Accept" on the terms and conditions, or the cookie warning, or the privacy policy; set yourself the task of using your own service
+without disclosing any personal information or having any tracking cookies, and see if you can do it and how hard it is to do it.
+It can also be helpful to look in the browser developer tools to see which sites are being accessed and which data is passed to
+those sites. Developer tools provide a list of separate HTTP requests (normally in a section called "Network"), and you can see
+from here requests grouped by type (HTML, CSS, images, fonts, JavaScript, requests initiated by JavaScript). It's also possible
+to add a new column to show the domain of each request, which will demonstrate how many different places are being contacted,
+and there may be a "third-party requests" checkbox to show only third parties. (It can also be useful to use `Content-Security-Policy`
+reporting to perform a continual audit, for which read further on.)
+
+[Simon Hearne's "Request Map Generator"](https://simonhearne.com/2015/find-third-party-assets/) tool can also be a helpful overview of all
+the subrequests that a publicly available page makes.
+
+This is also the point at which you can include the business-focused third parties identified as part of the non-technical audit
+(that is: the list of companies that you have a financial relationship with in order to use their resources). The goal here is
+to match up the list of third parties you believe you're using (from financial and legal records) and the list you're actually
+using (by looking at which third-party HTTP requests your website makes). You should be able to identify for each business third
+party which technical outbound requests are made. If you cannot identify requests in the technical audit for a third party
+identified by business relationship, it's important to work out why and to have that guide your testing: perhaps that third-party
+resource is only loaded in a particular country, or on a particular device type, or for logged-in users. This will enlarge your
+list of site areas to audit and ensure that you're seeing all the outbound accesses. (Or possibly it will identify a third-party
+resource that you're paying for and not using, which always cheers up the finance department.)
+
+Once you've narrowed down the list of requests to third parties that you would like to be part of the audit, clicking on an
+individual request will show all the details of it and, in particular, which data was passed to that request. It is also very
+common that [a third-party request that your code initiates then goes on to initiate many other third-party requests](https://css-tricks.com/potential-dangers-of-third-party-javascript/#third-party-scripts-often-load-other-third-party-scripts-of-their-own).
+These additional third parties are also "imported" into your own privacy policy. This task is laborious but valuable, and
+it often can be inserted into existing analyses; your frontend development team should already be auditing requests for
+performance reasons (perhaps with the help of existing tools such as WebPageTest or Lighthouse), and incorporating a data
+and privacy audit into that process can make it easier.
+
+<figure>
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/nnzRxb7clgk8DgrpmBgS.png", alt="The web.dev request map.", width="800", height="594" %}
+<figcaption>A (dramatically simplified) request map for web.dev, showing third-party sites that request other third-party sites, and so on.</figcaption>
+</figure>
+
+#### Do
+
+Open a browser with a clean new user profile, so that you are not signed in and have no stored agreement; then open the browser
+development tools Network panel to see all the outgoing requests. Add a new column to show the domain of each request, and check the
+"third-party requests" checkbox to show only third parties if present. Then:
+
+* Visit your site.
+* Sign up for a new account, if you provide user accounts.
+* Try to delete your created account.
+* Carry out a normal action or two on the site (exactly what this is will depend on what your site does, but pick common actions that most users perform).
+* Carry out an action or two which you know involve third-party dependencies in particular. These might include sharing content to
+social media, beginning a checkout flow, or embedding content from another site.
+
+When doing each of these tasks, make a record of resources requested from domains that are not yours, by looking at the Network panel
+as described. These are some of your third parties. A good way to do this is to use the browser network tools to capture the network
+request logs in a HAR file.
+
+#### HAR files and capturing
+
+An [HAR file](https://en.wikipedia.org/wiki/HAR_(file_format)) is a standardized JSON format of all network requests made by a page.
+To get an HAR file for a particular page, in:
+
+##### Chrome
+
+Open the browser DevTools (**Menu > More Tools > Developer Tools**), go to the Network panel, load (or refresh) the page, and
+choose the downward arrow save symbol in the top right near to the No throttling dropdown menu.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/pe6kjowLV339yjfaAgkr.png", alt="The Chrome DevTools network panel with Download HAR symbol highlighted.", width="650", height="299" %}
+
+##### Firefox
+
+Open the browser developer tools (**Menu > More Tools > Web Developer Tools**), go to the Network panel, load (or refresh) the page, and choose
+the cog symbol in the top right next to the throttling dropdown menu. From its menu, choose **Save All As HAR****.
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/SIeaTTW90Zh6TOV8RTKa.png", alt="The Firefox developer tools network panel with the Save All As Har option highlighted.", width="624", height="237" %}
+
+##### Safari
+
+Open the browser developer tools (**Menu > Develop > Show Web Inspector**; if you don't have a Develop menu then enable it from
+**Menu > Safari > Preferences > Advanced > Show Develop menu** in menu bar), go to the Network panel, load (or refresh) the page,
+and choose **Export** in the top right (to the right of Preserve Log; you may need to enlarge the window).
+
+{% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/PDUiriJh7D8FpL1v3RwD.png", alt="Safari Web Inspector Network panel with the HAR export option highlighted.", width="800", height="266" %}
+
+For more detail, you can also record what is passed on to third parties (in the Request section), although this data is often
+obfuscated and not usefully interpretable.
+
+## Best practices when integrating third parties
+
+You can set your own policies on which third parties your site uses: change which ad provider you use based on their practices,
+or how annoying or intrusive their cookies consent popup is, or whether you want to use social media buttons on your site or
+tracking links in your emails or utm_campaign links to track in Google Analytics in your tweets. One aspect to consider when
+developing a site is the privacy and security posture of your analytics service. Some analytics services explicitly trade on
+being privacy-protecting. Frequently, there are also ways to use a third-party script which adds privacy protection in itself:
+you are not the first team looking to improve their users' privacy and protect them from third-party data collection, and there
+may already be solutions. Finally, many third-party providers are more sensitive to data collection issues now than in the past,
+and there are often features or parameters you can add which enable a more user-protective mode. Here are some examples.
+
+### When adding a social media sharing button
+
+Consider embedding HTML buttons directly: the site [https://sharingbuttons.io/](https://sharingbuttons.io/) has some well-designed examples.
+Or you could add plain HTML links. The trade-off here is that you lose the "share count" statistic and your ability to classify your customers
+in your Facebook analytics. This is an example of a trade-off between using a third party provider and receiving less analytics data.
+
+More generally, when you're embedding an interactive widget of some kind from a third party, it's often possible to instead provide a
+link out to that third party. This does mean that your site doesn't have the inline experience, but it shifts the decision on sharing
+data with the third party from you to your user, who can choose to interact or not as they prefer.
+
+For example, you might add links for Twitter and Facebook to share your service at mysite.example.com like this:
+
+```html
+<a href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmysite.example.com"
+   rel="noopener" aria-label="Share on Facebook" target="_blank" >Share on Facebook</a>
+<a href="https://twitter.com/intent/tweet/?text=My%20cool%20service!&amp;url=https%3A%2F%2Fmysite.example.com"
+   rel="noopener" aria-label="Share on Twitter" target="_blank">Share on Twitter</a>
+```
+
+Note that Facebook allows specifying a URL to share, and Twitter allows specifying a URL and some text.
+
+### When embedding a video
+
+When you're embedding videos from video-hosting sites, look for privacy-preserving options in the embedding code.
+For example, for YouTube, replace `youtube.com` in the embed URL with `www.youtube-nocookie.com` to avoid tracking cookies
+being placed on users viewing the embedding page. You can also check "Enable privacy-enhanced mode" when generating the
+Share/Embed link from YouTube itself. This is a good example of using a more user-protective mode provided by the third party.
+([https://support.google.com/youtube/answer/171780](https://support.google.com/youtube/answer/171780) describes this in more detail,
+and other embedding options for YouTube specifically.)
+
+Other video sites have fewer options in this regard: TikTok, for example, doesn't have a way to embed video without tracking
+at the time of this writing. It is possible to host the videos yourself (this is using an alternative), but it can be a
+lot more work, especially to support many devices.
+
+As with interactive widgets discussed earlier, it is often possible to replace an embedded video with a link to the providing website.
+This is less interactive because the video won't play inline, but it leaves the choice of whether to watch with the user. This can be
+used as an example of the "facade pattern", the name for dynamically replacing interactive content with something requiring a user
+action to trigger it. An embedded TikTok video can be replaced with a plain link to the TikTok video page, but with a little more
+work it is possible to retrieve and display a thumbnail for the video and make that a link. Even if the chosen video provider doesn't
+support an easy way to embed videos without tracking, many video hosts support [oEmbed](https://oembed.com/), an API that, when given
+a link to a video or embedded content, will return programmatic detail for it, including a thumbnail and title. TikTok supports oEmbed
+(see [https://developers.tiktok.com/doc/embed-videos](https://developers.tiktok.com/doc/embed-videos) for details), meaning that
+you can (manually or programmatically) turn a link to a TikTok video `https://www.tiktok.com/@scout2015/video/6718335390845095173` into JSON metadata about that video with
+`https://www.tiktok.com/oembed?url=https://www.tiktok.com/@scout2015/video/6718335390845095173`, and therefore retrieve a thumbnail
+to display. WordPress often uses this to request oEmbed' information for embedded content, for example. You can use this programmatically
+to show a "facade" that looks interactive and switches to embed or link to an interactive video when the user chooses to click on it.
+
+### When embedding analytics scripts
+
+Analytics is designed to collect info about your users so it can be analyzed: this is what it's for. Analytics systems are essentially
+services to collect and display data about accesses and users, which is done on a third-party server such as Google Analytics for ease
+of implementation. There are also self-hosted analytics systems such as [https://matomo.org/](https://matomo.org/), although this is more work than using a
+third-party solution for this. Running such a system on your own infrastructure does help you to reduce data collection, though,
+because it does not leave your own ecosystem. On the other hand, managing that data, removing it, and setting policies for it
+becomes your responsibility. Much of the concern with cross-site tracking comes about when it's done surreptitiously and
+secretively, or as a side-effect of using a service which need not contain data gathering at all. Analytics software is overtly
+designed to collect data in order to inform the site owners about their users.
+
+Historically, there has been an approach of gathering all the data you can about everything, like a giant fishing net, and
+then analyzing it later for interesting patterns. This mindset has, in large part, created the sense of unease and disquiet
+about data collection that was discussed in part 1 of this course. Now, many sites first work out which questions to ask and
+then gather specific and limited data to answer those questions.
+
+If some third-party service is used by your site and by other sites, and it works by you including their JavaScript into your site,
+and it sets cookies for each user, then it's important to consider that they could be doing unwanted cross-site recognition;
+that is, tracking your users across sites. Some may and some may not, but the privacy-protecting stance here is to assume that
+such a third-party service is in fact doing cross-site tracking unless you have a good reason to think or know otherwise.
+This is not in itself a reason to avoid such services, but it is something to consider in your assessment of the trade-offs
+of using them.
+
+The trade-off in analytics used to be solely to choose whether to use it or not: gather all data and compromise privacy in exchange
+for insights and planning, or give up insights entirely. However, this is no longer the case, and there is often now a
+middle ground to be found between these two extremes. Check your analytics provider for configuration options to limit
+the data collected and reduce the amount and duration of its storage. Since you have the records from the technical audit
+described earlier, you can re-run the relevant sections of that audit to confirm that changing these configurations does
+actually reduce the amount of data collected. If you're making this transition on an existing site, then this can give you
+some quantifiable measure that can be written about for your users. For example, Google Analytics has a number of [opt-in (therefore off by default)](https://support.google.com/analytics/answer/9019185#zippy=%2Cin-this-article)
+privacy features, many of which may be helpful for complying with local data protection laws. Some options to consider when setting up Google
+Analytics include setting the retention period on collected data (Admin > Tracking Info > Data Retention) lower than the 26-month default,
+and enabling some of the more technical solutions such as partial IP anonymization (see [https://support.google.com/analytics/answer/9019185](https://support.google.com/analytics/answer/9019185) for more detail).
+
+## Using third parties in a privacy-preserving way
+
+Thus far, we've discussed how to protect your users from third parties during the design phase of your application, while
+you're planning what that application will do. Deciding to not use a particular third party at all is part of this planning,
+and auditing your uses also falls into this category: it's about making decisions about your privacy stance. However, these
+decisions are inherently not very granular; choosing to use a particular third party or choosing not to is not a nuanced decision.
+It is much more likely that you will want something in between: to need or plan to use a particular third-party offering but
+mitigate any privacy-violating tendencies (whether deliberate or accidental). This is the task of protecting users at "build time":
+adding safeguards to reduce harm that you did not anticipate. All these are new HTTP headers that you can provide when serving
+pages and which will hint or command the user agent to take certain privacy or security stances.
+
+### Referrer-Policy
+
+#### Do
+
+Set a policy of `strict-origin-when-cross-origin` or `noreferrer` to prevent other sites from receiving a Referer header
+when you link to them or when they're loaded as subresources by a page:
+
+```html
+index.html:
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+Or server-side, for example in Express:
+
+```java
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+If need be, set a laxer policy on specific elements or requests.
+
+#### Why this protects user privacy
+
+By default, each HTTP request the browser makes passes on a `Referer` header which contains the URL of the page initiating the request,
+whether a link, an embedded image, or script. This can be a privacy issue because URLs can contain private information, and those URLs
+being available to third parties passes that private information to them. [Web.dev lists some examples](/referrer-best-practices/#referer-and-referrer-policy-101)
+of URLs containing private data—knowing that a user came to your site from `https://social.example.com/user/me@example.com` tells you who that user is,
+which is a definite leak. But even a URL which does not itself expose private information does expose that this particular user (who you may know,
+if they're logged in) came here from another site and this therefore reveals that this user visited that other site. This is in itself exposure of
+information that you maybe should not know about your user's browsing history.
+
+{% Aside %}
+(It's spelled incorrectly, yes: Referrer should have a double R. People have been complaining about this for quarter of a century.)
+{% endAside %}
+
+Providing a `Referrer-Policy` header (with correct spelling!) lets you alter this, so that some or none of the referring URL is passed on.
+[MDN lists the full details](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) but most browsers have
+now adopted an assumed value of `strict-origin-when-cross-origin` by default, meaning that the referrer URL is now passed to third
+parties as an origin only (`https://web.dev` rather than `https://web.dev/learn/privacy`). This is a useful privacy protection without
+you having to do anything. But you can tighten this up further by specifying `Referrer-Policy: same-origin` to avoid passing any
+referrer information at all to third parties (or `Referrer-Policy: no-referrer` to avoid passing to anyone including your own origin).
+(This is a nice example of the privacy-versus-utility balance; the new default is much more privacy-preserving than before, but it
+still gives high level information to third parties of your choice, such as your analytics provider.)
+
+It's also useful to explicitly specify this header [because then you know exactly what the policy is, rather than relying on the browser defaults](/referrer-best-practices/#why-%22explicitly%22).
+If you aren't able to set headers, then it's possible to set a referrer policy for a whole HTML page using a meta element in the `<head>`:
+`<meta name="referrer" content="same-origin">`; and if concerned about specific third parties, it's also possible to set a `referrerpolicy`
+attribute on individual elements such as `<script>`, `<a>`, or `<iframe>`: `<script src="https://thirdparty.example.com/data.js" referrerpolicy="no-referrer">`
+
+### Content-Security-Policy
+
+The `Content-Security-Policy` header, often referred to as "CSP", dictates where external resources can be loaded from.
+It is primarily used for security purposes, by preventing cross-site scripting attacks and script injection, but when used
+alongside your regular audits it can also limit where your chosen third parties can pass data to.
+
+This is potentially a less-than-great user experience; if one of your third-party scripts starts loading a dependency from an
+origin not on your list, then that request will be blocked, the script will fail, and your application may fail with it
+(or at least be reduced to its JavaScript-failing fallback version). This is useful when CSP is implemented for security,
+which is its normal purpose: protecting against cross-site scripting issues (and to do this, use a [strict CSP](/strict-csp/)).
+Once you know all the inline scripts that your page uses, you can make a list of them, calculate a hash value or add a random value
+(called a "nonce") for each, and then add the list of hashes to your Content Security Policy. This will prevent any script that
+isn't on the list from being loaded. This needs to be baked into the production process for the site: scripts in your pages need
+to include the nonce or to have a hash calculated as part of the build. See [the article on strict-csp](/strict-csp/) for all the details.
+
+Fortunately, browsers support a related header, `Content-Security-Policy-Report-Only`. If this header is provided, requests
+that violate the supplied policy will not be blocked, but a JSON report will be sent to a supplied URL. Such a header might
+look like this:
+`Content-Security-Policy-Report-Only: script-src 3p.example.com; report-uri https://example.com/report/`,
+and if the browser loads a script from anywhere other than `3p.example.com`, that request will succeed but a report will
+be sent to the supplied `report-uri`. Normally this is used to experiment with a policy before implementing it, but a useful
+idea here is to use this as a way of conducting an "ongoing audit". As well as your regular audit described earlier, you
+can turn on CSP reporting to see if any unexpected domains appear, which could mean that your third-party resources are loading
+third-party resources of their own and which you need to consider and evaluate. (It may also be a sign of some cross-site
+scripting exploits having slipped past your security boundary, of course, which it is also important to know about!)
+
+`Content-Security-Policy` is a complex and fiddly API to use. This is known, and there is work going on to build the "next generation" of CSP
+which will meet the same goals but not be quite as complicated to use.This isn't ready yet, but if you'd like to see where this is heading
+(or to get involved and help in its design!) then check out [https://github.com/WICG/csp-next](https://github.com/WICG/csp-next) for details.
+
+#### Do
+
+Add this HTTP header to pages served: `Content-Security-Policy-Report-Only: default-src 'self'; report-uri https://a-url-you-control`.
+When JSON is posted to that URL, store it. Review that stored data to get a collection of the third-party domains that your website requests when visited by others.
+Update the `Content-Security-Policy-Report-Only` header to list the domains you expect, in order to see when that list changes:
+
+```html
+Content-Security-Policy-Report-Only: default-src 'self' https://expected1.example.com https://expected2.example.com ; report-uri https://a-url-you-control
+```
+
+#### Why
+
+This forms part of your technical audit, in an ongoing fashion. The initial technical audit you performed will give you a
+list of third parties that your site shares or passes user data to. This header will then cause page requests to report
+back which third parties are now being contacted, and you can track changes over time. This not only alerts you to changes
+made by your existing third parties, but will also flag newly added third parties which weren't added to the technical audit.
+It's important to update the header to stop reporting about domains you expect, but it's also important to repeat the manual
+technical audit from time to time (because the `Content-Security-Policy` approach does not flag _what_ data is passed, only
+that a request has been made.)
+
+Note that it does not need to be added to the pages served every time, or every page. Tune down how many page responses receive
+the header so that you receive a representative sample of reports that aren't overwhelming in quantity.
+
+### Permissions policy
+
+The `Permissions-Policy` header (which was introduced under the name `Feature-Policy`) is similar in concept to `Content-Security-Policy`,
+but it restricts access to powerful browser features. For example, it’s possible to restrict use of device hardware such as the accelerometer,
+camera, or USB devices, or to restrict non-hardware features such as permission to go fullscreen or use synchronous `XMLHTTPRequest`.
+These restrictions can be applied to a top-level page (to avoid loaded scripts from attempting to use these features) or to
+subframed pages loaded in via an iframe. This restriction of API usage isn’t really about browser [fingerprinting](/learn/privacy/fingerprinting/); it's about disallowing third-parties from doing intrusive things (such as using powerful APIs, popping up
+permissions windows, etc). This is defined by the Target Privacy Threat Model as ["intrusion"](https://w3cping.github.io/privacy-threat-model/#intrusion).
+
+A `Permissions-Policy` header is specified as a list of (feature, allowed origins) pairs, thus:
+
+```html
+Permissions-Policy: geolocation=(self "https://example.com"), camera=(), fullscreen=*
+```
+
+This example allows this page ("self") and `<iframe>`s from the origin `example.com` to use the `navigator.geolocation` APIs
+from JavaScript; it allows this page and all subframes to use the full screen API, and it prohibits any page, this page included,
+from using a camera to read video information. There is much more detail and [a list of potential examples here](https://developer.chrome.com/en/docs/privacy-sandbox/permissions-policy/#example-permissions-policy-setups).
+
+The list of features that are handled by the Permissions-Policy header is large and may be in flux. Currently the list is
+maintained at [https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md](https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md).
+
+{% Aside 'gotchas' %}
+Note that `Content-Security-Policy` values are separated by semicolons but `Permissions-Policy` values are separated by commas,
+and that `Permissions-Policy` values have brackets around them. The details are specified in the
+[Permissions Policy  explainer](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/).
+{% endAside %}
+
+#### Do
+
+Browsers that support `Permissions-Policy` disallow powerful features in subframes by default, and you have to act to enable them!
+This approach is private by default. If you find that subframes on your site require these permissions, you can selectively add them.
+However, there is no permissions policy applied to the main page by default, and so scripts (including third-party scripts) that are
+loaded by the main page are not restricted from attempting to use these features. For this reason, it is useful to apply a restrictive
+`Permissions-Policy` to all pages by default, and then gradually add back in features that your pages require.
+
+Examples of powerful features that `Permissions-Policy` affects include requesting the user's location, access to sensors (including
+accelerometer, gyroscope, and magnetometer), permission to go fullscreen, and requesting access to the user’s camera and microphone.
+The (changing) full list of features is linked above.
+
+Unfortunately, blocking all features by default and then selectively re-allowing them requires listing all features in the header,
+which can feel rather inelegant. Nonetheless, such a `Permissions-Policy` header is a good place to start. [permissionspolicy.com/](https://www.permissionspolicy.com/)
+has a conveniently clickable generator to create such a header: using it to create a header which disables all features results in this:
+
+```html
+Permissions-Policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(),
+display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(),
+fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(),
+payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=()
+```
+
+## Understand built-in privacy features in web browsers
+
+In addition to the "build time" and "design time" protections, there are also privacy protections which happen at "run time": that is, privacy
+features implemented in browsers themselves to protect users. These are not features you can directly control or tap into as a site
+developer—they're product features—but they are features you should be aware of, because your sites may be affected by these product decisions
+in browsers. To give an example here of the way these browser protections may impact your site, if you have client-side JavaScript which waits
+for a third-party dependency to load before continuing with page setup, and that third-party dependency never loads at all, then your page setup
+may never complete and so the user is presented with a half-loaded page.
+
+They include [Intelligent Tracking Prevention](https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/) in Safari
+(and the underlying WebKit engine), and [Enhanced Tracking Protection](https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop)
+in Firefox (and its engine, Gecko). These all make it difficult for third parties to build detailed profiles of your users.
+
+Browser approaches on privacy features change frequently, and it’s important to stay up to date; the following list of protections
+are correct at time of writing. Browsers may also implement other protections; these lists are not exhaustive. See [the module on best practices](/learn/privacy/best-practices/)
+for ways to keep up with changes here, and be sure to test with upcoming browser versions for changes that may affect your projects.
+Bear in mind that incognito/private browsing modes sometimes implement different settings from the browser’s default (third-party cookies may be blocked
+by default in such modes, for example). Therefore, testing in incognito mode may not always be reflective of most users’ typical browsing experience if
+they're not using private browsing. Also bear in mind that blocking cookies in various situations may mean that other storage solutions, such as `window.localStorage`,
+are also blocked, not only cookies.
+
+### Chrome
+
+* Third-party cookies are intended to be blocked in the future.  As of this writing they are not blocked by default
+(but this can be enabled by a user): [https://support.google.com/chrome/answer/95647](https://support.google.com/chrome/answer/95647)
+explains the details.
+* Chrome's privacy features, and in particular the features in Chrome that communicate with Google and third-party services,
+are described at [privacysandbox.com/](https://privacysandbox.com/).
+
+### Edge
+
+* Third-party cookies are not blocked by default (but this can be enabled by a user).
+* Edge's [Tracking Prevention](https://learn.microsoft.com/en-us/microsoft-edge/web-platform/tracking-prevention) feature blocks
+trackers from unvisited sites and known harmful trackers are blocked by default.
+
+### Firefox
+
+* Third-party cookies are not blocked by default (but this can be enabled by a user).
+* Firefox's [Enhanced Tracking Protection](https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop) blocks by default tracking cookies,
+fingerprinting scripts, cryptominer scripts, and known trackers. ([https://support.mozilla.org/kb/trackers-and-scripts-firefox-blocks-enhanced-track](https://support.mozilla.org/kb/trackers-and-scripts-firefox-blocks-enhanced-track)
+provides some more details).
+* Third-party cookies are site-limited, so each site essentially has a separate cookie jar and can’t be correlated across
+sites (Mozilla calls this "[Total Cookie Protection](https://blog.mozilla.org/products/firefox/firefox-rolls-out-total-cookie-protection-by-default-to-all-users-worldwide/)".
+
+To get some insight into what may be blocked and to help debug issues, click the shield icon in the address bar or visit `about:protections` in Firefox (on desktop).
+
+### Safari
+
+* Third-party cookies are blocked by default.
+* As part of its [Intelligent Tracking Prevention](https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/) feature,
+Safari reduces the referrer passed to other pages to be a top-level site rather than a specific page: (`https://something.example.com`,
+rather than `https://something.example.com/this/specific/page`).
+* Browser `localStorage` data is deleted after seven days.
+
+([https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) summarizes these features.)
+
+To get some insight into what may be blocked and to help debug issues, enable "Intelligent Tracking Prevention Debug Mode" in Safari's
+developer menu (on desktop). (See [https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/](https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/) for more details.)
+
+## API proposals
+
+### Why do we need new APIs?
+
+While new privacy-preserving features and policies in browser products help preserve user privacy, they also come with challenges.
+Many web technologies are usable for cross-site tracking despite being designed for and used for other purposes. For example,
+many identity federation systems we use every day rely on third-party cookies. Numerous advertising solutions that publishers
+rely on for revenue today are built on top of third-party cookies. Many fraud detection solutions rely on fingerprinting. What
+happens to these use cases when third-party cookies and fingerprinting go away?
+
+It would be difficult and error-prone for browsers to differentiate use cases, and to reliably distinguish privacy-violating uses
+from others. This is why most major browsers have blocked third-party cookies and fingerprinting or intend to do so, to protect user
+privacy.
+
+A new approach is needed: as third-party cookies are phased out and fingerprinting mitigated, developers need purpose-built APIs
+that meet the use cases (which haven’t gone away) but are designed in a privacy-preserving manner. The goal is to design and build
+APIs which can’t be used for cross-site tracking. Unlike the browser features described in the previous section, these technologies
+aspire to become cross-browser APIs.
+
+### Examples of API proposals
+
+The following list isn’t comprehensive—it's a flavor of some of what’s being discussed.
+
+Examples of API proposals to replace technologies built on third-party cookies:
+* Identity use cases: [FedCM](https://developer.chrome.com/en/docs/privacy-sandbox/fedcm/)
+* Ads use cases: [Private Click Measurement](https://webkit.org/blog/11529/introducing-private-click-measurement-pcm/),
+[Interoperable Private Attribution](https://blog.mozilla.org/en/mozilla/privacy-preserving-attribution-for-advertising/),
+[Attribution Reporting](https://developer.chrome.com/docs/privacy-sandbox/attribution-reporting/), [Topics](https://developer.chrome.com/docs/privacy-sandbox/topics/),
+[FLEDGE](https://developer.chrome.com/docs/privacy-sandbox/fledge/), [PARAKEET](https://github.com/microsoft/PARAKEET).
+
+Examples of API proposals to replace technologies built on passive tracking:
+* Fraud detection use cases: [Trust Tokens](https://developer.chrome.com/docs/privacy-sandbox/trust-tokens/).
+
+Examples of other proposals that other APIs can build on in a future without third-party cookies:
+* [Storage Access API](https://developer.mozilla.org/docs/Web/API/Storage_Access_API)
+
+Additionally, another type of API proposal is emerging to try and have so-far browser-specific covert tracking mitigations.
+One example is [Privacy Budget](https://developer.chrome.com/en/docs/privacy-sandbox/privacy-budget/). Across these various
+use cases, the APIs that were initially proposed by Chrome live under the umbrella term of the [Privacy Sandbox](https://developer.chrome.com/docs/privacy-sandbox/).
+
+[Global-Privacy-Control](https://globalprivacycontrol.org/) is a header that intends to communicate to a site that the user
+would like any collected personal data not to be shared with other sites. Its intention is similar to Do Not Track, which was discontinued.
+
+{% Aside %}
+In the early 2000s there was a push from consumer advocacy groups to allow users to specify that they did not want to be tracked
+via cookies or similar technologies. All the major browsers implemented this as a request header, Do Not Track, with value 1
+to indicate to websites that the user did not want to be tracked.
+[This received a lot of pushback from data-collecting companies](https://www.zdnet.com/article/why-do-not-track-is-worse-than-a-miserable-failure/),
+and there was no requirement that it be obeyed and it largely was not. Towards the end of the 2010s it was largely dropped from
+browsers and the [working group responsible closed](https://github.com/w3c/dnt), saying "there have not been indications of
+planned support among user agents, third parties, and the ecosystem at large".
+{% endAside %}
+
+### Status of the API proposals
+
+Most of these API proposals are not yet deployed, or are deployed only behind flags or in limited environments for experimentation.
+
+This public incubation phase is important: browser vendors and developers collect discussion and experience with whether these APIs are
+useful and whether they actually do what they’re designed for. Developers, browser vendors, and other ecosystem actors use this phase
+to iterate on the API's design.
+
+The best place to keep up to date with new APIs being proposed is currently the [Privacy Group’s list of proposals on Github](https://github.com/privacycg/proposals/issues).
+
+#### Do you need to use these APIs?
+
+If your product is directly built on top of third-party cookies or techniques such as fingerprinting, you should get involved with these new APIs, experiment with them, and contribute your own experiences to the discussions and API design.
+In all other cases, you don’t necessarily need to know all the details on these new APIs at the time of writing, but it’s good to be aware of what’s coming.
diff --git a/src/site/content/en/learn/pwa/app-design/index.md b/src/site/content/en/learn/pwa/app-design/index.md
new file mode 100644
index 00000000000..8817bece87a
--- /dev/null
+++ b/src/site/content/en/learn/pwa/app-design/index.md
@@ -0,0 +1,229 @@
+---
+title: App design
+description: >
+  One of the key differences between Progressive Web Apps and classic websites and web apps is installability. This creates a standalone experience more integrated into the platform and operating system. Installation enables new flexibility and new responsibility, as we won't have a browser's user interface around our content.
+authors:
+  - firt
+date: 2021-11-18
+---
+
+This chapter focuses on some critical aspects of rendering content outside of the browser tab.
+
+## The window
+
+Different operating systems have different ideas about what an application window is.
+For example, on iPhones, an application always takes up 100% of the screen. On Android and iPads applications usually run fullscreen but it is possible to share the screen between two apps, however there is only one app instance open at a time.
+In contrast, on a desktop device, an application can have more than one instance open at a time.
+It shares the available screen real estate with all other open applications.
+Each application instance can be resized and positioned anywhere on the screen, even overlapping other applications.
+
+## The icon
+
+We recognize apps by their icon. That icon appears when you search for apps, in settings, wherever you launch apps, and where you see running apps.
+
+These include:
+
+- Home screen (iOS, iPadOS, Android).
+- App Launcher (macOS, Android).
+- Start Menu or App Menu (Windows, ChromeOS, Linux).
+- Dock, TaskBar, or Multi-task panels (all operating systems).
+
+When creating the icon for your Progressive Web App
+make sure its icon is platform-agnostic, as each operating system can render icons and apply different shape masks to them, like the ones in the image below.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/geo6MZwaWvNDRFJe6cvF.png", alt="PWA icons in different shapes for different platforms.", width="800", height="207" %}
+
+## Theming your app
+
+There are a number of ways you can customize app styling in your PWA's, including:
+
+* Theme color: defines the color of the window's title bar on the desktop and the color of the status bar on mobile devices. Using a meta tag, you can have options for different schemes, such as dark or light mode and they will be used based on the user's preference.
+* Background color: defines the color of the window before the app and its CSS are loaded.
+* Accent color: defines the color of built-in browser components, such as form controls.
+
+<figure>
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/fW7mXimvH0Djb637xDH8.png", alt="A desktop PWA showing theme and accent colors, and an Android PWA splash screen showing theme and background colors.", width="800", height="526" %}
+<figcaption>A desktop PWA showing theme and accent colors, and an Android PWA splash screen showing theme and background colors.</figcaption>
+</figure>
+{% Aside %}
+
+When planning your Progressive Web App user interface, beware that you can't use images, or gradients for your theme, just plain colors. It's best to pick colors without transparency,
+and  use the `rgb` or `hsl` colors, hex codes, or named colors.
+Theming your app may also affect browser theming even without installing the app, such as when using the [`<meta name="theme-color">`](/add-manifest/#theme-color) element.
+{% endAside %}
+
+## Display modes
+
+You can define what kind of window experience you'd like for your Progressive Web App. There are three options to choose from:
+
+* Fullscreen
+* Standalone
+* Minimal User Interface
+
+{% Aside %}
+If a particular display mode isn't supported or otherwise can't be used to display your PWA, it'll fall back to the next available display mode. Fullscreen will fall back to standalone, standalone will fall back to minimal user interface, and minimal user interface will fall back to browser, the default. The browser display mode doesn't show up as its own window, but rather displays your PWA in a tab in the browser it was installed from, like a web bookmark on a home screen.
+{% endAside %}
+
+### Fullscreen experience
+
+A fullscreen experience is suitable for immersive experiences, such as games, VR, or AR experiences. It's currently only available on Android devices, and it hides the status bar and the navigation bar, giving your PWA 100% of the screen for your content.
+
+On desktop and iPadOS, fullscreen PWAs are not supported; however, you can use the [Fullscreen API](https://developer.mozilla.org/docs/Web/API/Fullscreen_API) from within your PWA to display your app fullscreen at a user's request.
+
+### Standalone experience
+
+The most common option for a Progressive Web App, standalone mode displays your PWA in an OS-standard window without any browser navigation UI. The window may also include a  browser-controlled menu where the user can:
+
+* Copy the current URL.
+* See, apply, or disable browser extensions.
+* See and change permissions.
+* Check current origin and the SSL certificate.
+
+The title bar may also show permissions and hardware usage replacing the omnibox or URL bar when the PWA renders in the tab.
+
+<figure>
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/0496WcZmxpNXE35jOGEw.png", alt="A PWA installed with Microsoft Edge on desktop showing its menu.", width="800", height="459" %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/2RmIdDEe4gm99lTzwLCa.png", alt="A PWA installed with Google Chrome on desktop showing the drop-down menu and the plugins-icon.", width="800", height="640" %}
+  <figcaption>The images above show how a PWA displays in standalone mode on the desktop in Microsoft Edge, and Chrome.</figcaption>
+</figure>
+
+On mobile devices, a standalone PWA experience will create a standard screen that keeps the status bar visible, so the user can still see notifications, time, and battery level. It often does not have any browser-controlled menu like desktop standalone experiences may include.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/sNa6aVY2ZayRqPZhpfIl.png", alt="An iOS device rendering a standalone app.", width="800", height="476" %}
+
+Some browsers on Android create a fixed and silent notification while the PWA is in the foreground that lets the user copy the current URL or other options.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/iE1jwkZq1VWMJC8RZxJs.png", alt="An Android notification rendered by Chrome showing some actions over the current active PWA.", width="730", height="428" %}
+
+### Minimal user interface
+
+This mode is available for Progressive Web Apps on Android and desktop operating systems.
+When you use it, the browser rendering your PWA will show a minimal user interface to help the user navigate within the application.
+
+On Android, you will get a title bar that renders the current `<title>` element and the origin with a small drop-down menu available. On desktop, you will get a set of buttons in the title bar to help with navigation, including a back button and a control that swaps between a stop and a reload action, based on the current loading status.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/nzzjXh6YK5GzP6K2Sfb5.png", alt="A desktop minimal-ui on Microsoft Edge with back and reload buttons", width="800", height="399" %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/wu1S51rlQpgBcDkJgEvG.png", alt="On Android, browsers use a read-only themed navigation bar for minimal-ui, here Firefox and Chrome", width="800", height="249" %}
+
+{% Aside 'warning' %}
+Safari on iOS and iPadOS doesn't support Minimal UI mode for PWAs. Instead, a browser shortcut is used as a fallback. The user can add an icon to the home screen, but that icon will point to Safari as a bookmark, and they won't have an app experience out of the browser tab.
+{% endAside %}
+
+## Optimizing design for desktop
+
+When you design a Progressive Web App to work on a desktop,
+you need to think about the endless possibilities for window size as compared to being in the browser's tab or as an app in a mobile operating system.
+
+In [Chapter 3](/learn/pwa/foundations/), we mentioned mini-mode: a desktop app can be as small as 200 by 100 pixels. This window will use the `<title>` element's content in your HTML as the title of the window. That content is also rendered when you **alt-tab**"** between apps and in other places.
+
+Pay attention to your HTML's `<title>` element and rethink how you use it. The `<title>` isn't just for SEO or to render just the first characters in a browser's tab; it will be part of the user experience of your standalone desktop window.
+
+{% Aside %}
+If you are developing your app using a client-side library, such as React or Vue, don't forget to change the `<title>` to some practical value when moving between sections or routes of your app. It's time to reimagine the `<title>`!
+{% endAside %}
+
+## CSS best practices
+
+All your experience with [CSS layout, design, and animation](/learn/css) is valid when your content is rendered in its standalone experience. However, there are a couple of tips and tricks to making the experience better for a standalone window.
+
+{% Aside 'gotchas' %}
+Remember that CSS only defines styles for the content of the PWA; later in this course, we will see how to specify style declarations for the window around your content, such as properties in the [web app manifest](/learn/pwa/web-app-manifest/).
+{% endAside %}
+
+### Media Queries
+
+The first [media query](/learn/design/media-queries/) that you can take advantage of in your PWA is the `display-mode` property accepting the values `browser`, `standalone`, `minimal-ui`, or `fullscreen`.
+
+This media query applies different styles to each mode.
+For example, you could render an [installation invitation](/learn/pwa/installation/) only when in browser mode, or render one particular piece of information only when the user uses your app from the system icon. This might include adding a back button to use when your app launches in standalone mode.
+
+```css
+/* It targets only the app used within the browser */
+@media (display-mode: browser) {
+}
+/* It targets only the app used with a system icon in standalone mode */
+@media (display-mode: standalone) {
+}
+/* It targets only the app used with a system icon in all mode */
+@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
+}
+```
+
+{% Aside %}
+Users expect apps to integrate with the platform, so consider offering dark and light modes using [`prefers-colors-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) and honoring [`prefers-reduced-motion`](/prefers-reduced-motion/) media queries to disable or reduce transitions and animations.
+{% endAside %}
+
+## The app experience
+
+When the users are using an installed PWA, they expect app behavior. While it's not simple to define what it means, the default web behavior doesn't give the best experience in some situations.
+
+### User selection
+
+Content is generally selectable with a mouse or pointer, or a press and hold touch gesture. While helpful for content, it doesn't provide the best experience for navigation items, menus, and buttons within your PWA.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/F9HCkRrmPyGFjlpTJhNz.png", alt="A calculator PWA where you can select every interactive button, such as the numbers.", width="800", height="739" %}
+
+Therefore, it's a good idea to disable user selection on these elements using `user-select: none` and it's `-webkit-` prefix version:
+
+```css
+.unselectable {
+   user-select: none;
+}
+```
+
+{% Aside 'gotchas' %}
+User selection is a vital feature of every web app for usability and accessibility. Do not disable user selection on all content, only on UI elements when not doing so creates a poor or unexpected experience.
+{% endAside %}
+
+### Accent color
+
+In your PWA, you can define a color to match your brand within HTML form controls using the property [`accent-color`](/accent-color/).
+
+### System fonts
+
+If you want an element, like dialogs or messages, to match the user's default platform font, you can use the following font family:
+
+```css
+selector {
+  font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif;
+}
+```
+
+### Pull to refresh
+
+Modern mobile browsers, such as Google Chrome and Safari, have a feature that refreshes the page when it is pulled down. On some browsers, such as Chrome on Android, that behavior is also enabled on standalone PWAs.
+
+You may want to disable this action. For example when providing your own gesture management or refresh action, or if there is a possibility that your user will trigger the action unintentionally.
+
+It's possible to disable this behavior by using `overscroll-behavior-y: contain`:.
+
+```css
+  body {
+    overscroll-behavior-y: contain;
+  }
+```
+
+### Safe areas
+
+Some devices do not have unobstructed rectangular screens; instead, their screen may be a different shape, like a circle, or have portions of the screen that can't be used, like the iPhone 13's notch. In these cases, some browsers will expose [environment variables](https://developer.mozilla.org/docs/Web/CSS/env()) with safe areas that can display content.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/hKWqUXIbvvH05WHQEccm.png", alt="At top, a notch-based device in landscape with a standard viewport showing unrendered areas at the sides; at bottom, a device with full viewport access thanks to viewport-fit=cover.", width="800", height="1006" %}
+
+If you want full access to the screen, even the invisible area, to render your color or image, include `viewport-fit=cover` in the content of your `<meta name="viewport">` tag. Then use the `safe-area-inset-*` environment variables to extend your content safely into those areas.
+
+{% Aside 'caution' %}
+When you apply `viewport-fit=cover`, remember that you can now render pixels behind rounded corners and notches, so you should always use safe margins or paddings for the critical content and interactive elements.
+{% endAside %}
+
+##  Resources
+
+- [CSS display-mode media query](https://developer.mozilla.org/docs/Web/CSS/@media/display-mode)
+- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior)
+- [prefers-color-scheme: Hello darkness, my old friend](/prefers-color-scheme/)
+- [prefers-reduced-motion: Sometimes less movement is more](/prefers-reduced-motion/)
+- [env() CSS function](https://developer.mozilla.org/docs/Web/CSS/env())
+- [CSS Accent Color](/accent-color/)
diff --git a/src/site/content/en/learn/pwa/architecture/index.md b/src/site/content/en/learn/pwa/architecture/index.md
new file mode 100644
index 00000000000..2060ed57812
--- /dev/null
+++ b/src/site/content/en/learn/pwa/architecture/index.md
@@ -0,0 +1,185 @@
+---
+title: Architecture
+Authors:
+  - firt
+description: >
+  You make some decisions when developing a PWA, such as whether to create a single page application or a multi-page application, and whether you will host it in the root of your domain or within a folder.
+date: 2022-04-15
+---
+
+Designing your application to make the most out of the technology that makes PWAs reliable, installable, and capable starts with understanding your application and its constraints, and choosing an appropriate architecture for both.
+
+## SPA versus MPA
+
+Today, there are two primary architectural patterns in web development: single-page apps, or SPAs, and multi-page apps, or MPAs.
+
+Single-page apps are defined by having client-side JavaScript control most or all of the HTML rendering of a page based on data retrieved by or provided to the app. The app overrides the browser's built-in navigation, replacing it with its routing and view handling functionality.
+
+Multi-page apps usually have pre-rendered HTML sent directly to the browser, often enhanced with client-side JavaScript after the browser has finished loading the HTML, and relying on the browser's built-in navigation mechanisms to display subsequent views.
+
+Both architectures can be used to create PWAs.
+
+Each has advantages and disadvantages, and selecting the right one for your use case and context is key to providing a fast and reliable experience for your users.
+
+### Single page apps
+
+{% Compare 'better', 'Pros' %}
+* Mostly atomic in-page updates.
+* Client-side dependencies loaded on start-up.
+* Subsequent loads are fast, because of cache usage.
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+* High initial load cost.
+* Performance depends on device hardware and network connection.
+* Additional app complexity is required.
+{% endCompare %}
+
+Single page apps are a good architectural fit if:
+
+* User interaction is mainly centered around atomic updates of interconnected data displayed on the same page, for instance, a real-time data dashboard or a video-editing app.
+* Your application has client-side-only initialization dependencies, for instance, a third-party authentication provider with a prohibitively high startup cost.
+* The data required for a view to load relies on a specific client-side-only context, for instance, displaying controls for a piece of connected hardware.
+* The app is small and simple enough that its size and complexity do not have an impact on the cons listed above.
+
+SPAs might not be a good architecture choice if:
+
+* Initial load performance is essential. SPAs usually need to load more JavaScript to determine what to load and how to display it. The parsing and execution time of this JavaScript, combined with retrieving content, is slower than sending rendered HTML.
+* Your app runs mostly on low-to-average-powered devices. Because SPAs depend on JavaScript for rendering, the user experience depends much more significantly on the power of their specific device than it would in an MPA.
+
+Because SPAs need to replace the browser's built-in navigation with their routing, SPAs require a minimum level of complexity around efficiently updating the current view, managing navigation changes, and cleaning up previous views that would otherwise be handled by the browser, making them harder overall to maintain and more taxing on the user's device.
+
+### Multi-page apps
+
+{% Compare 'better', 'Pros' %}
+* Mostly full-page updates.
+* Initial render speed is critical.
+* Client-side scripting can be an enhancement.
+{% endCompare %}
+
+{% Compare 'worse', 'Cons' %}
+* Secondary views require another server call.
+* Context doesn't carry over between views.
+* Requires a server or pre-rendering.
+{% endCompare %}
+
+
+Multi-page apps are a good architectural choice if:
+
+* User interaction is mainly centered around views of a single piece of data with optional context-based data, for instance, a news or e-commerce app.
+* Initial render speed is critical, as sending already rendered HTML to the browser is faster than assembling it from a data request after loading, parsing, and executing a JavaScript-based alternative.
+* Client-side interactivity or context can be included as an enhancement after initial load, for instance, layering a profile onto a rendered page or adding secondary client-side context-dependent components.
+
+MPAs might not be a good architecture choice if:
+
+* Re-downloading, re-parsing, and re-executing your JavaScript or CSS is prohibitively expensive. This con is mitigated in PWAs with service workers.
+* Client-side context, such as user location, doesn't seamlessly carry over between views, and re-obtaining that context may be expensive. It either needs to be captured and retrieved, or re-requested between views.
+
+Because individual views need to be dynamically rendered by a server or pre-rendered before access, potentially limiting hosting or adding data complexity.
+
+### Which one to choose?
+
+Even with these pros and cons, both architectures are valid for creating your PWA. You can even mix them for different parts of your app, depending on its needs, for instance, having store listings follow an MPA architecture and the checkout flow follow an SPA architecture.
+
+Regardless of choice, the next step is understanding how to best use service workers to provide the best experience.
+
+## The power of service worker
+
+The service worker has a lot of power beyond basic routing and delivery of cached and network responses. We can create complex algorithms that can improve the user's experience and performance.
+
+### Service worker includes (SWI)
+
+An emerging pattern for using service workers as an integral part of a site's architecture is service worker includes (SWI).
+SWI divides individual assets, usually an HTML page, into pieces based on their caching needs, then stitches them back together in the service worker to improve consistency, performance, and reliability, while reducing cache size.
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/xDjYv2TYJik4xm1h7nyS.png", alt="A website with a global header, a content area, a sidebar and a footer.", width="800", height="520" %}
+
+This image is a sample web page. It has five different sections that break the page down into:
+
+* Overall layout.
+* Global header (top dark bar).
+* Content area (middle left lines and image).
+* Sidebar (tall medium-dark bar on the middle right).
+* Footer (dark bottom bar).
+
+#### Overall layout
+
+The overall layout isn't likely to change often and has no dependencies. It's a good candidate for [precaching](/learn/pwa/assets-and-data/#frequently-used-cache-approaches).
+
+#### Header and footer
+
+The global header and footer contain things like the top menu and site footer, and present a particular challenge: if the page were to be cached as a whole, these might change between page loads, depending on when the given page was cached.
+
+By separating them and caching them independently of the content, you can ensure that users will always get the same version, regardless of when they are cached. Because they are infrequently updated, they're good candidates for precaching, too. They have a dependency, though: the site's CSS and JavaScript.
+
+#### CSS and JavaScript
+
+Ideally, the site's CSS and JavaScript should be cached with a stale while revalidate strategy to allow incremental updates without needing to update the service worker, as it is the case with precached assets. Still, they also need to be kept at a minimum version whenever the service worker updates with a new global header or footer. Because of this, their cache should also be updated with the latest version of assets when the service worker installs.
+
+#### Content area
+
+Next is the content area. Depending on the frequency of updates, either network first or stale while revalidate is a good strategy here. Images should be cached with a cache first strategy, as has been previously [discussed](/learn/pwa/serving/#caching-strategies).
+
+#### Sidebar
+
+Finally, presuming the sidebar content contains secondary content such as tags and related items, it's not critical enough to pull from the network. A stale while revalidate strategy works for this.
+
+Now, after going through all that, you may be thinking that you can only do this kind of per-section caching for single-page apps. But, by adopting patterns inspired by [edge side includes](https://en.wikipedia.org/wiki/Edge_Side_Includes) or [server side includes](https://en.wikipedia.org/wiki/Server_Side_Includes) in your service worker, with some advanced service worker features, you can do this for either architecture.
+
+#### Try it yourself
+
+You can try the service worker includes with the next codelab:
+
+{% Aside 'codelab' %}
+[Service worker includes](https://developers.google.com/codelabs/pwa-training/pwa06--service-worker-includes).
+{% endAside %}
+
+### Streaming responses
+
+The previous page could be created using the app shell model in the SPA world, where the app shell is cached, then served, and content is loaded on the client side. With the introduction and wide availability of the [Streams API](https://developer.mozilla.org/docs/Web/API/Streams_API), both app shell and content can be combined in the service worker and streamed to the browser, giving you the caching flexibility of app shell with the speed of MPAs.
+
+It does this because:
+
+* Streams can be built asynchronously, allowing different pieces of a stream to come from other sources.
+* The requester of a stream can start working on the response as soon as the first chunk of data is available, instead of waiting for the entire item to be complete.
+* Parsers optimized for streaming, including the browser, can progressively display the content of the stream before it's complete, speeding up the perceived performance of the response.
+
+Thanks to these three properties of streams, architectures built around streaming usually have a faster perceived performance than those that aren't.
+
+Working with the Streams API can be challenging as it's complex and low level. Fortunately, there's a [Workbox module](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-streams) that can help with setting up streaming responses for your service workers.
+
+## Domains, origins, and PWA scope
+
+Web workers, including service workers, storage, even an installed PWA's window, are all governed by one of the most critical security mechanisms on the web: the same-origin policy. Within the same origin, permissions are granted, data can be shared, and the service worker can talk to different clients. Outside of the same origin, permissions are not automatically granted and data is isolated and not accessible between different origins.
+
+### Same-origin policy
+
+Two URLs are defined as having the exact origin if the protocol, port, and host are the same.
+
+For example: `https://squoosh.app`, and `https://squoosh.app/v2` have the same origin, but `http://squoosh.app`, `https://squoosh.com`, `https://app.squoosh.app` and `https://squoosh.app:8080` are in different origins. Check the [same-origin policy MDN reference](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) for more information and examples.
+
+Changing subdomains isn't the only way a host can change. Each host is made up of a top-level domain (TLD), a secondary level domain (SLD), and zero or more labels (sometimes called subdomains), separated by dots in between and read from right to left in an URL. A change in any of the items results in a different host.
+
+In the [window management module](/learn/pwa/window), we've already seen how the in-app browser looks when a user navigates to a different origin from an installed PWA.
+
+That in-app browser will appear even if the websites have the same TLD and SLD, but with different labels, as they are then considered different origins.
+
+One of the key aspects of an origin in a web-browsing context is how storage and permissions work. One origin shares many features among all content and PWAs within it, including:
+
+- Storage quota and data (IndexedDB, cookies, web storage, cache storage).
+- Service worker registrations.
+- Permissions granted or denied (such as web push, geolocation, sensors).
+- Web push registrations.
+
+When you move from one origin to another, all the previous access is revoked, so permissions have to be granted again, and your PWA can't access all the data saved in the storage.
+
+{% Aside 'caution' %}
+Having different subdomains for different parts of a website or different TLDs for other locales, such as `admin.example.com` or `example.co.uk`, makes building PWAs harder, each subdomain will have isolated storage, its own service worker registration, and web app manifest. It may also lead to a disjointed experience if the subdomains are designed to look like the same app, as one will be displayed in the in-app browser while the main PWA won't.
+{% endAside %}
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/V1OWWZnCGpwVcaZE152Z.mp4", autoplay=true, controls=true, loop=true %}
+
+##  Resources
+
+- [Beyond SPAs: Alternative architectures for your PWA](https://developer.chrome.com/blog/beyond-spa)
+- [Progressive web apps Structure](https://developer.mozilla.org/docs/Web/Progressive_web_apps/App_structure)
+- [Streams: The definitive guide](/streams/)
diff --git a/src/site/content/en/learn/pwa/assets-and-data/index.md b/src/site/content/en/learn/pwa/assets-and-data/index.md
new file mode 100644
index 00000000000..711dd7adf2f
--- /dev/null
+++ b/src/site/content/en/learn/pwa/assets-and-data/index.md
@@ -0,0 +1,140 @@
+---
+title: Assets and data
+description: >
+  A Progressive Web App is a website; all its assets are the same as on the web, but with new tools to make those assets load fast when online and available when offline.
+authors:
+  - firt
+date: 2021-11-18
+updated: 2022-02-23
+
+---
+
+## App components
+
+Developing an application typically involves several assets and resources,
+from the logic and code (compiled or not) to the user interface elements such as screen designs, images, logos, and fonts.
+
+A Progressive Web App is a website, so all its assets are the same as on the web:
+
+- HTML for content and initial page rendering.
+- JavaScript for logic, including the ability to run WebAssembly modules (compiled code) and render 2D and 3D hardware-optimized graphics.
+- CSS for layout, styling, and animations.
+- Images in web formats, such as PNG, JPEG, WebP, and SVG.
+- Videos in web formats, such as MPEG-4 and WebM.
+- Web fonts.
+- Data in JSON or other formats.
+
+By default, websites download assets over the network,
+[starting with HTML](/critical-rendering-path/)
+and continuing to the rest of the resources.
+
+Managing those resources to load fast and be available offline has been a challenge for the web.
+Nowadays, PWAs use capabilities previously associated only with platform-specific apps.
+
+### Platform-specific apps vs. PWA
+
+When you install a platform-specific app you are typically downloading a package that includes all the app's assets: code, images, fonts, videos, and so on.
+Therefore, all these resources are available, from your device storage, even when the app is offline.
+
+On the other hand, a classic website needs a network connection to download the assets when required.
+If you are offline, you will see an error from the browser as there are no assets client-side.
+
+The PWA approach enhances the traditional web experience by making some or all the assets available client-side as with platform-specific apps. Therefore, when you open a PWA, the initial rendering can be as instantaneous as a platform app because the assets are available without going to the network.
+
+{% Aside %}
+An app that is available offline will always render a basic user interface instead of a technical error from the operating system or browser. Some apps still offer all their functionality, some a limited experience, and others a simple message with the app's branding. This applies to both platform-specific apps and PWAs.
+{% endAside %}
+
+## Caches and storage
+
+Since the beginning of the web, developers have not had complete control of how a resource is cached.
+The browser is in charge of the HTTP cache and it may or may not cache and serve resources based on different policies.
+Other storage options like Web Storage and IndexedDB were meant to save simple data and objects.
+
+PWAs don't need to rely on those policies alone for their content.
+Instead, we have solutions today to gain better control over when and how to cache resources and when and how to deliver them locally: the Cache Storage API.
+The web has a few of client-side storage solutions available:
+
+* **Web storage**: Includes `localStorage` and `sessionStorage`. These APIs store simple key/value string pairs. Web storage is limited, and has a synchronous API, so it should be avoided whenever possible.
+* **IndexedDB**: An object-based database (No-SQL) with an asynchronous API that is good for web performance. IndexedDB can store structured and binary data client-side. It is typically what you will use to store data, like what you'd get from or send as an API request. It's also useful to save data locally immediately and later on sync it to the server. The [IndexedDB API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) is used to interact with the database.
+* **Cache storage**: A collection of HTTP request and response pairs you can use to store and retrieve resources — with their HTTP headers — exactly as they are delivered from the server. The [Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage) allows you to store, retrieve, update and delete network requests, for example for your assets, even when offline.
+
+{% Aside 'warning' %}
+You may have heard about WebSQL and ApplicationCache. These two solutions are deprecated, and you shouldn't use them in your PWA.
+{% endAside %}
+
+### The need for service workers
+
+A PWA can store its assets in Cache Storage and IndexedDB,
+but how can we use those assets to deliver a fast and offline experience to your users. The answer? Service workers.
+
+With a service worker, you can serve assets without going to the network, send notifications to a user, add a badge to your PWA icon, update content in the background, and even make your whole PWA work offline. Learn more about service workers in the [next chapter](/learn/pwa/service-workers/).
+
+## Offline-ready
+
+Users expect your application to offer a fast and always-ready experience.
+That means your app should work offline.
+
+Being offline-ready doesn't mean that all your content or services should be available without a network connection.
+However having at least a basic experience when the user is offline, like a page that asks you to connect to the Internet to continue, will provide for a better user experience, keeping the user within the experience of your app instead of a generic browser error.
+In some browsers this is a must-have feature to pass the PWA installation criteria.
+Displaying your PWA's user interface, along with cached content, is better.
+Letting users continue using your whole PWA and syncing server changes when they're back online is the gold standard for working offline.
+
+To make your app available offline, you will need to cache the assets necessary for your offline experience and make your service worker serve them later. Make sure to add the offline assets to your cache before you need them. This is a particular case where you cannot cache them when requested.
+
+{% Aside %}
+Asset caching happens independently from PWA installation,
+and will work even from a browser tab, allowing for faster asset delivery and an offline experience regardless of how a user chooses to use your PWA.
+{% endAside %}
+
+### Frequently used cache approaches
+
+In your PWA, you are in charge of all the decisions. You can choose the best approach to cache or install assets based on your needs.
+Some decisions to make are:
+
+* Precaching: pick the assets you'd like to install on the first load; those should include the HTML and the minimal assets to render the app. When using precache keep in mind you are using the device's space and network. Be conscious and responsible when downloading assets and caching them.
+* Cache as needed: used to add assets to the cache when they are requested. Typically these are assets that can change independently of your app version, like images or content. See the [caching](/learn/pwa/caching) section for different strategies on how to cache as needed.
+* APIs and web services: API calls can be cached; or, instead of caching the API responses, you can store their data in IndexedDB.
+
+{% Aside 'gotchas' %}
+With platform-specific apps, the most common pattern is to include all the app's assets in its package; that's why these apps are commonly larger than 500 MB. On the other hand, A PWA can initially install only the minimum set of resources to offer an offline and fast experience and download the rest later, with PWAs using considerably less storage on installation.
+{% endAside %}
+
+### Updating assets
+In the standard app model for app catalog installed apps, when developers need to update their app, they publish a new package. Users need to download the whole package again, even if most of the assets haven't changed.
+With PWAs, using the approaches on the section above, you decide how and when to update assets.
+Here are different options for how to update assets:
+
+* Full Update: in this case, every time you make a change in the app, even a minor one, your code will download all the assets again in the cache.
+* Partial Update: in this approach, you create a method to define which assets have been updated, and you update only those, with or without the user's intervention.
+* Continuous Update: using this technique, your assets will be checked and updated automatically on every PWA usage individually
+
+{% Aside %}
+When caching assets, you need to decide on a cache swap or clean up policy that defines when the user will see an updated asset; taking into account storage usage and the balance between a fast experience and displaying a slightly stale asset.
+{% endAside %}
+
+## Size and Lifespan
+
+Usually platform-specific apps don't deal with size limits; at installation, apps can be gigabytes or more in size. As long as the device has the capacity the installation will be allowed. Also, while the app is installed, it will use that total amount of storage no matter if you use the app or not.
+Storage is handled differently for PWAs. The browser will store your assets based on policies that you define in your PWA's logic.
+
+{% Aside %}
+The users are always in control, and they can delete the assets at any time. For PWAs, manual eviction happens via the browser's settings.
+{% endAside %}
+
+Size limits depend on the browser.
+It's not as flexible as for platform-specific apps, but it's typically good enough for most web apps. You can find the specific limitations by browser in [this article](/storage-for-the-web/#how-much).
+
+Browsers can evict assets based on storage pressure, or after some weeks of inactivity, if the user is using your PWA in the browser. On some platforms, if the user installs your PWA, eviction won't happen. Where available, code can request persistent storage through an API to avoid that eviction.
+
+{% Aside %}
+If storage eviction happens for any reason and the user installed your PWA, the PWA will still work if you have a network connection. When you open that app again, the browser will start the service worker lifecycle again, loading your app from the network.
+{% endAside %}
+
+##  Resources
+
+- [Storage on the Web](/storage-for-the-web/)
+- [MDN: Web Storage](https://developer.mozilla.org/docs/Web/API/Web_Storage_API)
+- [MDN: IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)
+
diff --git a/src/site/content/en/learn/pwa/caching/index.md b/src/site/content/en/learn/pwa/caching/index.md
new file mode 100644
index 00000000000..5fa9f5b5fcc
--- /dev/null
+++ b/src/site/content/en/learn/pwa/caching/index.md
@@ -0,0 +1,173 @@
+---
+title: Caching
+description: >
+  You can use the Cache Storage API to download, store, delete or update assets on the device. Then these assets can be served on the device without needing a network request.
+authors:
+  - firt
+date: 2021-12-03
+updated: 2022-03-02
+---
+
+Cache storage is a powerful tool. It makes your apps less dependent on network conditions. With good use of caches you can make your web app available offline and serve your assets as fast as possible in any network condition. As mentioned in [Assets and Data](/learn/pwa/assets-and-data/) you can decide the best strategy for caching the necessary assets. To manage the cache your service worker interacts with the [Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage).
+{% BrowserCompat 'api.CacheStorage' %}
+
+{% Aside %}
+When installing platform-specific apps, the device stores the icon and other app assets in the operating system, in one step. For PWAs, the process has two separate steps. A PWA can store assets on your device any time after the first visit in the browser, even without installation. Install is a separate action that is covered later in this course.
+{% endAside %}
+
+The Cache Storage API is available from different contexts:
+
+- The window context (your PWA's main thread).
+- The service worker.
+- Any other workers you use.
+
+One advantage of managing your cache using service workers is that its lifecycle is not tied to the window, which means you are not blocking the main thread. Be aware that to use the Cache Storage API most of these contexts have to be under a TLS connection.
+
+## What to cache
+
+The first question you may have about caching is what to cache. While there is no single answer to that question, you can start with all the minimum resources that you need to render the user interface.
+
+Those resources should include:
+
+- The main page HTML (your app's start_url).
+- CSS stylesheets needed for the main user interface.
+- Images used in the user interface.
+- JavaScript files required to render the user interface.
+- Data, such as a JSON file, required to render a basic experience.
+- Web fonts.
+- On a multi-page application, other HTML documents that you want to serve fast or while offline.
+
+{% Aside 'warning' %}
+Remember that you are downloading and storing assets on users' devices, so use that space and bandwidth responsibly. You need to find the balance between having enough on-device assets to render a fast or offline experience without consuming too much data.
+{% endAside %}
+
+### Offline-ready
+
+While being offline-capable is one of the requirements for a Progressive Web App, it's essential to understand that not every PWA needs a full offline experience, for example cloud gaming solutions or crypto assets apps. Therefore, it's OK to offer a basic user interface guiding your users through those situations.
+
+Your PWA should not render a browser's error message saying that the web rendering engine couldn't load the page. Instead use your service worker to show your own messaging, avoiding a generic and confusing browser error.
+
+{% Aside 'caution' %}
+If you [publish your PWA to Google Play Store](https://chromeos.dev/en/publish/pwa-in-play), your PWA should never render an HTTP error message from the browser to avoid penalizations within the store listings. Check [Changes to Quality Criteria for PWAs](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html) for more information.
+{% endAside %}
+
+There are many different caching strategies you could use depending on the needs of your PWA. That's why it is important to design your cache usage to provide a fast and reliable experience. For example if all your app assets will download fast, don't consume a lot of space, and don't need to be updated in every request, caching all your assets would be a valid strategy. If on the other hand you have resources that need to be the latest version you might want to consider not caching those assets at all.
+
+{% Aside 'caution' %}
+The cache storage content and eviction rules are set per origin and not per PWA, since it's possible to have more than one in a single origin. If you share your origin for many PWAs, it's a good idea to add a prefix to your cache names to avoid collision problems between each PWA's data storage.
+{% endAside %}
+
+## Using the API
+
+Use the Cache Storage API to define a set of caches within your origin, each identified with a string name you can define. Access the API through the `caches` object, and the `open` method enables the creation, or opening of an already created cache. The open method returns a promise for the cache object.
+
+```js
+caches.open("pwa-assets")
+.then(cache => {
+  // you can download and store, delete or update resources with cache arguments
+});
+```
+
+### Downloading and storing assets
+
+To ask the browser to download and store the assets use the `add` or `addAll` methods. The `add` method makes a request and stores one HTTP response, and `addAll` a group of HTTP responses as a transaction based on an array of requests or URLs.
+
+```js
+caches.open("pwa-assets")
+.then(cache => {
+  cache.add("styles.css"); // it stores only one resource
+  cache.addAll(["styles.css", "app.js"]); // it stores two resources
+});
+```
+
+{% Aside %}
+Both `add()` and `addAll()` return a promise with no arguments; if it's fulfilled, you know the assets were downloaded and cached, and if it fails, the API couldn't download one or more resources, and it didn't modify the cache.
+{% endAside %}
+
+The cache storage interface stores the entirety of a response including all the headers and the body. Consequently, you can retrieve it later using an HTTP request or a URL as a key. You will see how to do that in [the Serving chapter](/learn/pwa/serving).
+
+{% Aside %}
+To download and store the assets, you must specify all the URLs explicitly. Otherwise the API cannot know all the assets you need or want to cache.
+{% endAside %}
+
+### When to cache
+
+In your PWA, you are in charge of deciding when to cache files. While one approach is to store as many assets as possible when the service worker is installed, it is usually not the best idea. Caching unnecessary resources wastes bandwidth and storage space and could cause your app to serve unintended outdated resources.
+
+You don't need to cache all the assets at once, you can cache assets many times during the lifecycle of your PWA, such as:
+
+- On installation of the service worker.
+- After the first page load.
+- When the user navigates to a section or route.
+- When the network is idle.
+
+You can request caching new files in the main thread or within the service worker context.
+
+### Caching assets in a service worker
+
+One of the most common scenarios is to cache a minimum set of assets when the service worker is installed. To do that, you can use the cache storage interface within the `install` event in the service worker.
+
+Because the service worker thread can be stopped at any time, you can request the browser to wait for the `addAll` promise to finish to increase the opportunity of storing all the assets and keeping the app consistent. The following example demonstrates how to do this, using the  `waitUntil` method of the event argument received in the service worker event listener.
+
+```js/3,5
+const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
+self.addEventListener("install", event => {
+   event.waitUntil(
+      caches.open("pwa-assets")
+      .then(cache => {
+         return cache.addAll(urlsToCache);
+      });
+   );
+});
+```
+
+The [`waitUntil()` method](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil) receives a promise and asks the browser to wait for the task in the promise to resolve (fulfilled or failed) before terminating the service worker process. You may need to chain promises and return the `add()` or `addAll()` calls so that a single result gets to the `waitUntil()` method.
+
+You can also handle promises using the async/await syntax. In that case, `waitUntil()` needs a promise-based function as an argument, so you need to create a function that returns the promise to make it work, as in the following example:
+
+```js/3
+const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
+self.addEventListener("install", (event) => {
+   event.waitUntil(async () => {
+      const cache = await caches.open("pwa-assets");
+      return cache.addAll(urlsToCache);
+   });
+});
+```
+
+### Cross-domain requests and opaque responses
+
+Your PWA can download and cache assets from your origin and cross-domains, such as content from third-party CDNs. With a cross-domain app, the cache interaction is very similar to same-origin requests. The request is executed and a copy of the response is stored in your cache. As with other cached assets it is only available to be used in your app's origin.
+
+The asset will be stored as an [opaque response](https://fetch.spec.whatwg.org/#concept-filtered-response-opaque), which means your code won't be able to see or modify the contents or headers of that response. Also, opaque responses don't expose their actual size in the storage API, affecting quotas. Some browsers expose large sizes, such as 7Mb no matter if the file is just 1Kb.
+
+{% Aside 'caution' %}
+Remember that when you cache opaque responses from cross-domains, `cache.add()` and `cache.addAll()` will fail if those responses don't return with a 2xx status code. Therefore, if one CDN or cross-domain fails, all the assets you are downloading will be discarded, even successful downloads in the same operation.
+{% endAside %}
+
+### Updating and deleting assets
+
+You can update assets using `cache.put(request, response)` and delete assets with `delete(request)`.
+
+{% Aside 'caution' %}
+The Cache Storage API doesn't update your assets if you change them on your server nor does it delete them. Your code should manage both situations, and for that, there are different design patterns. You'll learn about a library to help with these situations in the [Workbox chapter](/learn/pwa/workbox).
+{% endAside %}
+
+Check the [Cache object documentation](https://developer.mozilla.org/docs/Web/API/Cache) for more details.
+
+{% Glitch 'learn-pwa-asset-caching' %}
+
+## Debugging Cache Storage
+Many browsers offer a way to debug the contents of cache storage within their DevTools Application tab. There, you can see the contents of every cache within the current origin. We'll cover more about these tools in the [Tools and Debug chapter](/learn/pwa/tools-and-debug/).
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/wY3mk9ILrGxlM9xEbfHh.png", alt="Chrome DevTools debugging Cache Storage contents.", width="800", height="506" %}
+
+{% Aside %}
+Web Inspector on Safari on macOS doesn't have a way to see the contents of cache storage. For that purpose, you can use the free [Service Worker Detector Safari extension](https://apps.apple.com/app/service-worker-detector/id1530808337?l=en&mt=12) created by [Thomas Steiner](https://twitter.com/tomayac).
+{% endAside %}
+
+##  Resources
+
+- [Cache Storage on MDN](https://developer.mozilla.org/docs/Web/API/CacheStorage)
+- [The Cache API: A quick guide](/cache-api-quick-guide/)
+- [The Offline Cookbook](/offline-cookbook/)
diff --git a/src/site/content/en/learn/pwa/capabilities/index.md b/src/site/content/en/learn/pwa/capabilities/index.md
new file mode 100644
index 00000000000..09ed8113cc4
--- /dev/null
+++ b/src/site/content/en/learn/pwa/capabilities/index.md
@@ -0,0 +1,162 @@
+---
+title: Capabilities
+Authors:
+  - firt
+description: >
+  PWAs are not just tied to the screen. This chapter is about the capabilities that a PWA has today in terms of hardware, sensors, and platform usage.
+date: 2022-04-20
+---
+
+Progressive Web Apps can do more than just rendering content on the screen or connecting to web services. PWAs can deal with files from the file system, they can interact with the system's clipboard, they can access hardware that is connected to the device, and much more. Every Web API is available for your PWA, and there are some extra APIs available when your app is installed.
+
+You can use [What Web Can Do Today](https://whatwebcando.today/) to know what's possible on each platform. For individual APIs or capabilities, you can use [Can I Use](https://caniuse.com) or the browser compatibility tables on [MDN](https://developer.mozilla.org/).
+
+## Always check for feature support
+
+The first letter in PWA stands for progressive, and it comes from the idea of [progressive enhancement](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement) and [feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection). You should not expect your app to work the same way on every device. The diversity of contexts and abilities on billions of devices in different countries makes PWAs an excellent platform, thanks to their progressiveness.
+
+This means that you need to develop your app in layers that may not be available on every device and to check availability before usage.
+
+You need to check with JavaScript if an API exists before using it or ask an API if a service is available on that particular device.
+
+## Powerful web
+
+The web is super powerful today. For example:
+
+* You can build a [hyperlocal](https://en.wikipedia.org/wiki/Hyperlocal) video chat app with WebRTC, geolocation, and push messages.
+* You can make an app installable.
+* You can add video effects with WebAssembly.
+* You can even bring it into virtual reality with WebGL and WebXR.
+
+{% Aside 'gotchas' %}
+While there are many capabilities on the web, there are still gaps, and that's where the [web capabilities project](https://www.chromium.org/teams/web-capabilities-fugu/) comes in. The project  describes a group of APIs to increase what the web is capable of. We discussed this project and how you can participate in it in the [Experimental chapter](/learn/pwa/experimental).
+{% endAside %}
+
+## Empowering your PWA
+
+Let's split the PWA capabilities APIs into four groups:
+
+* Green: APIs available on every browser on every platform, when technically possible. Most of them have been shipped for many years, they are considered mature, and you can use them with confidence. An example API from this group is the geolocation API.
+* Light green: APIs are available only on some browsers. Considering the lack of support on some platforms, they matured within the supported subgroup of browsers so that you can use the capability confidently on them. An example API from this group is WebUSB.
+* Yellow: experimental APIs. These APIs are not yet mature; they are only available on some browsers, and within tests or trials. We talked some about these capabilities in the [Experimental chapter](/learn/pwa/experimental).
+* Red: the group for APIs that you can't use in a PWA, and where plans to add them are still long term. An example API from this group is geofencing.
+
+{% Aside %}
+Some capabilities require user permission: in most cases, the permission dialog appears on first usage. Today, you can request a single permission at a time, but in the future, it may be possible to request many permissions in one dialog on some platforms, using the [Permissions API](https://w3c.github.io/permissions/).
+{% endAside %}
+
+### Green capabilities
+
+Below is a list of the most important capabilities you can use in your PWA.
+
+#### Basics
+- *Caching files locally* using the Cache API, as seen in the [Caching chapter](/learn/pwa/caching).
+- *Executing tasks in threads* using web workers, as we saw in the [Complexity management chapter](/learn/pwa/complexity).
+- *Managing network requests* with different strategies in a service worker, as seen in the [Service workers chapter](/learn/pwa/service-worker).
+- *2D Canvas* for rendering 2D graphics on the screen using the [Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+- *2D and 3D high-performance Canvas*, or [WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API), for rendering 3D graphics.
+- *WebAssembly*, or [WASM](https://developer.mozilla.org/docs/WebAssembly), for executing low-level compiled code for performance.
+- *Real-Time communication*, using the [WebRTC API](https://developer.mozilla.org/docs/Web/API/WebRTC_API).
+- *Web Performance* APIs to measure and help provide a better experience. See [the Performance API guide](https://developer.mozilla.org/docs/Web/API/Performance_API) for more information.
+- *Store data locally* with IndexedDB and storage management to query quota and request persistent storage, as seen in the [Offline data chapter](/learn/pwa/offline-data).
+- *Low-level audio* thanks to the [Web Audio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API).
+- *Foreground detection* using the [Page Visibility API](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API).
+- *Network communication* using the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) and the [WebSocket API](https://developer.mozilla.org/docs/Web/API/WebSockets_API).
+
+#### Hardware and sensors
+
+- *Geolocation* obtains the user's location through different providers, such as satellite or Wi-Fi through the [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API).
+- *Camera and microphone* receive media streams from cameras and microphones using the [Media devices](https://developer.mozilla.org/docs/Web/API/MediaDevices) interface.
+- *Sensors*  gather real-time information from the accelerometer, gyroscope, magnetometer, and others using the [Sensors API](https://developer.mozilla.org/docs/Web/API/Sensor_APIs) or older interfaces, such as [DeviceMotionEvent](https://developer.mozilla.org/docs/Web/API/DeviceMotionEvent) and [DeviceOrientationEvent](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent). On Safari, you need to use a [non-standard permission dialog request](https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140) to use them.
+- *Touch and pointer* access information about all the touches and pointer-based clicks you make with your finger, a mouse, a trackpad, or a pen, thanks to [Pointer events](https://developer.mozilla.org/docs/Web/API/Pointer_events) and [Touch events](https://developer.mozilla.org/docs/Web/API/Touch_events).
+
+{% Aside %}
+Safari also supports [Gesture events](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW23), a non-standard API for detecting rotation and pinching gestures, which should be used with care.
+{% endAside %}
+
+- *Gamepads* to read information coming from standard gamepads and joysticks connected to the device using the [Gamepad API](https://developer.mozilla.org/docs/Web/API/Gamepad_API/Using_the_Gamepad_API).
+- *Biometric authentication* (such as face or fingerprint recognition) using [Web Authentication or WebAuthn](https://webauthn.guide/).
+
+#### Operating system integration
+
+- *Speech synthesis and voice recognition* use the platform's installed voices to speak to the user and to recognize what the user is saying, thanks to the [Web Speech API](https://developer.mozilla.org/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API).
+- *Share content* from your PWA to other apps and places on the device, thanks to the [Web Share API](https://developer.mozilla.org/docs/Web/API/Web_Share_API), as we'll see in the [OS integration chapter](/learn/pwa/os-integration).
+- *Access the clipboard* to save and retrieve content from the clipboard in different formats, thanks to the [Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API), as I showed in the [OS integration chapter](/learn/pwa/os-integration).
+- *Manage user's credentials and passwords* using the [Credential Management API](https://developer.mozilla.org/docs/Web/API/Credential_Management_API).
+- *Enable picture-in-picture* video playing within the OS using the [picture-in-picture API](https://developer.mozilla.org/docs/Web/API/Picture-in-Picture_API).
+- *Render content in fullscreen* thanks to the [Fullscreen API](https://developer.mozilla.org/docs/Web/API/Fullscreen_API), as I showed in the [Windows chapter](/learn/pwa/windows).
+
+{% Aside %}
+You can integrate your PWA with many platform-specific apps using URI schemes and universal URLs, as I showed in the [OS Integration chapter](/learn/pwa/os-integration).
+{% endAside %}
+
+### Light-green capabilities
+
+Here is a list of the most important capabilities you can use in your PWA, with the caveat that they may not be available on every browser.
+
+#### The basics
+
+- *WebGL 2.0*, the [new version of the WebGL spec](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext) to match OpenGL 3.0.
+- *Codecs*, low-level access to the individual frames of a video stream and chunks of audio; useful for web applications that require full control over the way media is processed through [the Web Codecs API](https://developer.mozilla.org/docs/Web/API/WebCodecs_API).
+
+#### Hardware and sensors
+
+- *Advanced camera controls* to access [pan, tilt, and zoom controls](/camera-pan-tilt-zoom/), in addition to the Media APIs.
+- *Bluetooth LE* to communicate with Bluetooth low-energy devices near the user using the [Web Bluetooth API](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API). Check out [communicating with Bluetooth devices over JavaScript](/bluetooth/) for more information.
+- *Near-field communication* to exchange data over NFC via light-weight NFC data exchange format (NDEF) messages, such as an NFC tag or card using the [WebNFC API](https://developer.mozilla.org/docs/Web/API/Web_NFC_API). You can also read [Interact with NFC devices on Chrome for Android](/nfc) for more details.
+- *Serial peripheral* for low-level access to devices connected to the device using a serial port, USB, or serial over Bluetooth using the [Web Serial WPI](https://developer.mozilla.org/docs/Web/API/Web_Serial_API). In the following link you can learn how to [read from and write to a serial port](/serial).
+
+- *USB device* access to communicate with devices connected via USB [WebUSB API](https://developer.mozilla.org/docs/Web/API/WebUSB_API). Check out [access to USB devices on the web](/usb/) for more information.
+- *Human interface devices* let your PWA interact with any kind of device prepared for human interaction that is [uncommon](/hid/), using the [WebHID API](https://developer.mozilla.org/docs/Web/API/WebHID_API). Check out this guide on [connecting to uncommon HID devices](/hid).
+
+{% Aside %}
+[Accessing hardware devices on the web](/devices-introduction/) offers a comprehensive guide to understanding how different hardware APIs interact with each other.
+{% endAside %}
+
+- *Ambient Light* reads the current light level or illuminance of the ambient light around the device, in addition to the [Sensors API](https://developer.mozilla.org/docs/Web/API/AmbientLightSensor).
+- *Vibration* gives the user haptic feedback when something happens, if the device supports it, through the [Vibration API](https://developer.mozilla.org/docs/Web/API/Vibration_API).
+- *Recording media* captures the data generated by a MediaStream or HTMLMediaElement object (such as a `<video>` tag) for analysis, processing, or saving to disk, thanks to the [MediaRecorder API](https://developer.mozilla.org/docs/Web/API/MediaRecorder).
+- *Applying a wake Lock to the screen*  prevents the device from dimming, or locking the screen, when your PWA needs to keep running, using the [Screen Wake Lock API](https://developer.mozilla.org/docs/Web/API/Screen_Wake_Lock_API).
+- *Virtual reality* enables you to use a headset and other devices in your PWA, thanks to the [WebXR Device API](https://developer.mozilla.org/docs/Web/API/WebXR_Device_API).
+- *Augmented reality* can be achieved in your PWA in many ways, such as using the [WebXR Device API](https://developer.mozilla.org/docs/Web/API/WebXR_Device_API) or the [Safari Quick Look app for AR content](https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/).
+- *Detect inactive users* with the [Idle Detection API](/idle-detection/).
+- *Orientation lock* locks the orientation to portrait or landscape while the PWA is on the screen, thanks to the [Screen Orientation API](https://developer.mozilla.org/docs/Web/API/Screen_Orientation_API), or the `orientation` property of the [Web App Manifest](/learn/pwa/web-app-manifest) for installed apps.
+- *Present content* on projectors and secondary displays, thanks to the [Presentation API](https://developer.mozilla.org/docs/Web/API/Presentation_API).
+- *Lock a pointer* to receive delta movement information from pointers (mice, trackpads, and pointers) instead of position values—useful for some games—thanks to the [Pointer Lock API](https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API).
+
+#### Operating system integration
+
+- *Read and write files* on the device, thanks to the [File System Access API](https://developer.mozilla.org/docs/Web/API/File_System_Access_API), as you saw in the [OS Integration](/learn/pwa/os-integration) chapter.
+- *Get content from other apps* thanks to [Web Share Target](/web-share-target/), as I showed in the [OS integration](/learn/pwa/os-integration) chapter.
+- *Get contact data* using the [Contact Picker API](https://developer.mozilla.org/docs/Web/API/Contact_Picker_API), as shown in the [OS integration](/learn/pwa/os-integration) chapter.
+- *Sync in the background* while the PWA is not used, thanks to the [Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Background_Synchronization_API).
+- *Task scheduling* while the PWA is not in use, thanks to the [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API).
+- *Send notifications* using [Web Push](https://developer.mozilla.org/docs/Web/API/Push_API) and [Web Notifications APIs](https://developer.mozilla.org/docs/Web/API/Notifications_API).
+- *Transfer files in the background* while the user is not using your PWA, thanks to the [Background Fetch API](https://developer.mozilla.org/docs/Web/API/Background_Fetch_API).
+- *Integrate your media playing* with the operating system using the [Media Session API](https://developer.mozilla.org/docs/Web/API/Media_Session_API).
+- *Manage payments in your PWA*, thanks to the [Payment Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API). Apple also offers an [Apple Pay JS library](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api) on top of the Payment Request API.
+- *Query network status*, such as connection type (4G, WiFi) and a Save Data flag using the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API).
+- *Capture the user's screen* for screencast or screen sharing using the [Screen Capture API](https://developer.mozilla.org/docs/Web/API/Screen_Capture_API/Using_Screen_Capture).
+- *Detect shapes* using on-device hardware-accelerated detectors, including barcodes (human faces and text OCR are still in development) using the [Shape Detection API](/shape-detection/).
+- *Query a device's memory* using the [Device Memory interface](https://developer.mozilla.org/docs/Web/API/Device_Memory_API).
+- *One-time passwords over SMS* let you automatically receive a code via SMS sent from your server using the [WebOTP API](https://developer.mozilla.org/docs/Web/API/WebOTP_API). Safari implements a solution subset based on the `<input>` element. Read more about it in [WebKit's blog](https://developer.apple.com/news/?id=z0i801mg).
+- *Manage the virtual keyboard* that appears on mobile devices screens using the [Virtual Keyboard API](/virtualkeyboard/).
+
+{% Aside %}
+If you publish a PWA to some app catalogs and stores, you may access additional APIs. For example, if you publish a PWA to Google Play using a [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/), you can use the [Digital Goods API](https://github.com/WICG/digital-goods/blob/main/explainer.md) to charge your users for subscriptions and premium content.
+{% endAside %}
+
+{% Aside 'gotchas' %}
+If you have a legitimate use case that cannot be realized with the present set of APIs, you can submit a request to analyze the use case for a possible future web API, as we'll see in the [Experimental chapter](/learn/pwa/experimental).
+{% endAside %}
+
+##  Resources
+
+- [MDN: Web APIs](https://developer.mozilla.org/docs/Web/API)
+- [What Web Can Do Today](https://whatwebcando.today/)
+- [What PWA Can Do Today](https://whatpwacando.today/)
+- [Can I Use](https://caniuse.com/)
+- [iOS/iPadOS Approximate location](https://firt.dev/ios-14/#geolocation-changes)
+- [Meet Face ID and Touch ID for the Web](https://webkit.org/blog/11312/meet-face-id-and-touch-id-for-the-web/)
+
+
diff --git a/src/site/content/en/learn/pwa/complexity/index.md b/src/site/content/en/learn/pwa/complexity/index.md
new file mode 100644
index 00000000000..6043f935c27
--- /dev/null
+++ b/src/site/content/en/learn/pwa/complexity/index.md
@@ -0,0 +1,126 @@
+---
+title: Complexity management
+Authors:
+  - firt
+description: >
+  Keeping a web app simple can be surprisingly complicated. In this module, you will learn how web APIs work with threading and how you can use this for common PWA patterns such as state management.
+date: 2022-04-15
+---
+
+## Simplicity and complexity
+
+In his talk [Simple Made Easy](https://www.infoq.com/presentations/Simple-Made-Easy/), Rich Hickey discusses the qualities of simple versus complex things. He describes simple things as focusing on:
+
+> "One role, one task, one concept, or one dimension."
+
+But emphasizes that simplicity isn't about:
+
+> "Having one instance or performing one operation."
+
+Whether or not something is simple is about how interconnected it is.
+
+Complexity comes from binding, weaving, or, to use Rich's term, complecting things together. You can calculate complexity by counting the number of roles, tasks, concepts, or dimensions something manages.
+
+Simplicity is essential in software development because simple code is easier to understand and maintain. Simplicity is also necessary for web apps because it may help to make our app fast and accessible in every possible context.
+
+## Managing PWA complexity
+All JavaScript we write for the web touches the main thread at one point. The main thread, though, comes with a lot of complexity out-of-the-box that you, as a developer, have no control over.
+
+The main thread is:
+
+* Responsible for drawing the page, which itself is a complex, multi-step process involving calculating styles, updating and compositing layers, and painting to screen.
+* Responsible for listening to and reacting to events, including events such as scrolling.
+* Responsible for loading and unloading the page.
+* Managing media, security, and identity.
+That's all before any code you write can even execute on that thread, such as:
+* Manipulating the DOM.
+* Accessing sensitive APIs, for example, device capabilities, or media/security/identity.
+
+As Surma put it in his [2019 Chrome Dev Summit talk](https://www.youtube.com/watch?v=7Rrv9qFMWNM&ab_channel=GoogleChromeDevelopers), the main thread is overworked and underpaid.
+
+And yet, most application code lives on the main thread too.
+
+All that code adds to the complexity of the main thread. The main thread is the only one that the browser can use to lay out and render content on the screen. Therefore, when your code requires more and more processing power to complete, we need to run it quickly, because every second it takes to perform application logic is a second the browser can't respond to user input or redraw the page.
+
+When interactions don't connect to input, when frames drop, or when it takes too long to use a site, users get frustrated, they feel the application is broken, and their confidence in it decreases.
+
+The bad news? Adding complexity to the main thread is an almost sure-fire way to make meeting these goals difficult. The good news? Because what the main thread needs to do is clear: it can be used as a guide to help reduce reliance on it for the rest of your application.
+
+### Separations of concerns
+
+There are lots of different kinds of work that web applications do, but broadly speaking, you can break it down into work that directly touches the UI and work that doesn't. UI work is work that:
+
+* Directly touches the DOM.
+* Uses APIs that touch device capabilities, for example, notifications or file system access.
+* Touches identity, for example, user cookies, local, or session storage.
+* Manages media, for example, images, audio, or video.
+* Has security implications that would require user intervention to approve, such as the web serial API.
+
+Non-UI work can include things such as:
+
+* Pure calculations.
+* Data access (fetch, IndexedDB, etc.).
+* Crypto.
+* Messaging.
+* Blob or stream creation, or manipulation.
+
+Non-UI work is often bookended by UI work: a user clicks a button that triggers a network request for an API that returns parsed results that are then used to update the DOM. When writing code, this end-to-end experience is often considered, but where each part of that flow lives usually is not.
+The boundaries between UI work and non-UI work are as important to consider as the end-to-end experiences, as they are the first place you can reduce main thread complexity.
+
+#### Focus on a single task
+
+One of the most straightforward ways of simplifying code is breaking out functions so each focuses on a single task. Tasks can be determined by the boundaries identified by walking through the end-to-end experience:
+
+* First, respond to user input. This is UI work.
+* Next, make an API request. This is non-UI work.
+* Next, parse the API request. This again is non-UI work.
+* Next, determine changes to the DOM. This may be UI work, or if you're using something such as a virtual DOM implementation, it may not be UI work.
+* Finally, make changes to the DOM. This is UI work.
+
+The first clear boundaries are between UI work and non-UI work. Then there are judgment calls that need to be made: is making and parsing an API request one task or two? If DOM changes are non-UI work, are they bundled with the API work? In the same thread? In a different thread? The proper level of separation here is key to both simplifying your codebase and being able to successfully move pieces of it off the main thread.
+
+#### Composability
+To break up large end-to-end workflows into smaller parts, you need to think about your codebase's composability. Taking cues from functional programming, consider:
+
+* Categorizing the types of work your application does.
+* Building common input and output interfaces for them.
+
+For instance, all API retrieval tasks take in the API endpoint and return an array of standard objects, and all data-processing functions take in and return an array of standard objects.
+
+JavaScript has a [structured clone algorithm](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) meant for copying complex JavaScript objects. Web workers use it when sending messages and IndexedDB uses it to store objects. Choosing interfaces that you can use with the structured cloning algorithm will make them even more flexible to run.
+
+With this in mind, you can create a library of composable functionality by categorizing your code and creating common I/O interfaces for those categories. Composable code is a hallmark of simple codebases: loosely coupled, interchangeable pieces that can sit “next” to each other and build on each other, as opposed to complex code that is deeply interconnected and therefore cannot be easily separated. And on the web, composable code can mean the difference between overworking the main thread or not.
+
+With composable code in hand, it's time to get some of it off the main thread.
+
+### Using web workers to reduce complexity
+
+Web workers, an often underutilized but widely available web capability, let you move work off the main thread.
+
+Web workers let a PWA run (some) JavaScript outside of the main thread.
+
+There are three kinds of workers.
+
+*Dedicated workers*, what's most commonly thought of when describing web workers, can be used by a single script in a single running instance of a PWA. Whenever possible, work that doesn't directly interact with the DOM should be moved to a web worker to improve performance.
+
+*Shared workers* are similar to dedicated workers, except multiple scripts can share them across multiple open windows. This provides the benefits of a dedicated worker but with a shared state and internal context between windows and scripts.
+
+A shared worker could, for instance, manage access and transactions for a PWA's IndexedDB and broadcast transaction results across all calling scripts to let them react to changes.
+
+The final web worker is one covered extensively in this course: *service workers*, which act as a proxy for network requests and are shared between all instances of a PWA.
+
+### Try it yourself
+
+It's code time! Build a PWA from scratch based on everything you've learned in this module.
+
+{% Aside 'codelab' %}
+[Progressive Web Apps: Working with Workers](https://developers.google.com/codelabs/pwa-training/pwa06--working-with-workers#0)
+{% endAside %}
+
+##  Resources
+
+- [Simple Made Easy (video)](https://www.infoq.com/presentations/Simple-Made-Easy/)
+- [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [Workers overview](/workers-overview/)
+- [Use web workers to run JavaScript off the browser's main thread](/off-main-thread/)
+
diff --git a/src/site/content/en/learn/pwa/conclusion/index.md b/src/site/content/en/learn/pwa/conclusion/index.md
new file mode 100644
index 00000000000..20640cbaf4b
--- /dev/null
+++ b/src/site/content/en/learn/pwa/conclusion/index.md
@@ -0,0 +1,32 @@
+---
+title: Conclusion
+description: >
+  Next steps and resources.
+authors:
+  - firt
+  - rachelandrew
+  - ajara
+  - petelepage
+  - joemedley
+date: 2021-11-03
+---
+
+Congratulations! You've made it to the end! We hope that you have enjoyed this course of Progressive Web Apps. In case you are using a library or a framework to create your web apps, you can check out the following additional resources:
+##  Resources
+
+- [React with CRA: Making a PWA](https://create-react-app.dev/docs/making-a-progressive-web-app/)
+- [Next.js: PWA Sample](https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app)
+- [Vue: CLI PWA Plugin](https://cli.vuejs.org/core-plugins/pwa.html)
+- [Angular: Service Worker and PWA Documentation](https://angular.io/guide/service-worker-intro)
+- [Svelte: Build a PWA](https://blog.logrocket.com/building-a-pwa-with-svelte/)
+- [Nuxt.js: PWA](https://pwa.nuxtjs.org)
+- [Jekyll PWA Plugin](https://github.com/lavas-project/jekyll-pwa)
+- [Gatsby: PWA](https://www.gatsbyjs.com/docs/progressive-web-app/)
+- [ASP.NET: Build PWAs with ASP.NET Core Blazor WebAssembly](https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-6.0&tabs=visual-studio)
+- [Django: Make PWA of a Django Project](https://www.geeksforgeeks.org/make-pwa-of-a-django-project/)
+- [Flutter: Building a web application with Flutter](https://docs.flutter.dev/get-started/web)
+- [Wordpress: PWAs for Wordpress](https://wpengine.com/resources/wordpress-progressive-web-apps/)
+
+## Brought to you by
+
+{% include 'partials/authors-stack.njk' %}
diff --git a/src/site/content/en/learn/pwa/detection/index.md b/src/site/content/en/learn/pwa/detection/index.md
new file mode 100644
index 00000000000..515e8686b43
--- /dev/null
+++ b/src/site/content/en/learn/pwa/detection/index.md
@@ -0,0 +1,182 @@
+---
+title: Detection
+description: >
+  Identifying how your users interact with your app is useful in customizing and improving the user experience. For example, you can check whether your app is already installed on the user's device and implement features such as transferring navigation to the standalone app from the browser.
+authors:
+  - firt
+date: 2022-03-10
+updated: 2022-03-14
+---
+
+You can detect if the user is using your PWA in the browser or in standalone mode. On Chromium-based browsers (Android and desktop), you can also detect the following events:
+
+* Installation invitation dialog status and result.
+* Installation finished.
+* Navigation transfer from browser to PWA window and conversely.
+* PWA installation status.
+* Related app installed from an app store.
+
+You can use this data for analytics, to understand your user's preferences, and to customize their experience. To capture these events, you can use tools such as media queries, events from the `window`, or using the capabilities APIs that you can find [listed here](https://developer.chrome.com/blog/fugu-status/).
+
+## Detecting display mode
+
+To track how users launch your PWA, you can use `matchMedia()` to test the `display-mode` media query.
+
+```js
+window.addEventListener('DOMContentLoaded', () => {
+  let displayMode = 'browser tab';
+  if (window.matchMedia('(display-mode: standalone)').matches) {
+    displayMode = 'standalone';
+  }
+  // Log launch display mode to analytics
+  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
+});
+```
+
+If you use this example, remember to match the display mode from your web app manifest, for instance, `standalone`, `minimal-ui` or `fullscreen`. You can also match multiple queries in the media query string using comma-separated conditions.
+
+You can also add a query parameter to your manifest's `start_url` that you can capture with analytics to track stats about when, in what way, and how much your PWA is being used.
+
+{% Aside 'caution' %}
+If you use a query parameter on your `start_url` to capture metrics, make sure to set the `id` field on your manifest to uniquely identify your app. Read how to set up this field in [Uniquely identifying PWAs with the web app manifest id property](https://developer.chrome.com/blog/pwa-manifest-id/)
+{% endAside %}
+
+## App installation
+
+When a user accepts the install prompt in the browser, the `appinstalled` event fires on Chromium-based browsers. A great use for this event handler is to remove any in-app installation promotion you've added.
+
+```js
+window.addEventListener('appinstalled', () => {
+  // If visible, hide the install promotion
+  hideInAppInstallPromotion();
+  // Log install to analytics
+  console.log('INSTALL: Success');
+});
+```
+
+Remember, on Android devices with WebAPK, the event is fired when the user accepts the dialog, and not after the WebAPK is minted and installed. There may be a delay of some seconds before the app is fully installed.
+
+The [Installation Prompt chapter](/learn/pwa/installation-prompt) explains how to detect if the installation prompt is available and what choice the user makes.
+
+{% Aside 'warning' %}
+The `appinstalled` event is available only in Chromium-based browsers, and it's part of an [incubator for the manifest spec](https://wicg.github.io/manifest-incubations/#onappinstalled-attribute)
+{% endAside %}
+
+## Session transfer
+
+Users can use your PWA within the browser and in the installed standalone form. On desktop browsers, you can transfer the current navigation between these contexts using badges or menu items, as seen in the following image.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/260YbAY9W4qFitqUHhQ5.png", alt="Navigation transfer between a browser tab and a PWA window.", width="800", height="321" %}
+
+On Android, there is a menu item similar to the one on desktop from the browser that transfers the navigation to the app. In this case, the current URL is opened but it will be a new page navigation in the app.
+
+In the following image you can see the menu item in Android when the app is already installed.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/rpMHjK1uhwwJONJKTj2r.png", alt="Chrome on Android shows menu item to open a new navigation in a PWA window.", width="800", height="1689" %}
+
+### Transfer after installation
+
+From desktop browsers, the current navigation is immediately transferred to the app on installation. The browser's tab is closed, and the newly installed app is opened, continuing what the user was doing.
+
+On mobile browsers, your current navigation stays in the browser when you install the app. If the users want to move to the app, they need to open the app manually, and it will be a new navigation.
+
+### Detecting the transfer
+
+To detect the transfer between browser and window, you can use a media query:
+
+```js
+window.addEventListener('DOMContentLoaded', () => {
+  // replace standalone with your display used in manifest
+  window.matchMedia('(display-mode: standalone)')
+      .addListener(event => {
+          if (event.matches) {
+             // From browser to standalone
+          } else {
+             // From standalone to browser
+          }
+      });
+});
+```
+
+### iOS and iPadOS storage isolation
+
+On iOS and iPadOS, there is no navigation or URL transfer between the browser and the installed icon. Even if it's the same PWA, every PWA icon that the user installs will have its own storage, isolated from Safari's tab and other icons.
+When a user opens the installed icon, no storage is shared with Safari. If your PWA needs a login, the user will need to log in again. If the app was added to the home screen several times, for each PWA instance, the user has a different session.
+
+## Related applications
+{% BrowserCompat 'html.manifest.related_applications' %}
+
+A website indicates a relationship with an app via the manifest. To do so, use the [`related_applications` member](https://developer.mozilla.org/docs/Web/Manifest/related_applications) of the Web App Manifest spec.
+The `related_applications` key is an array of objects that represent each related application. Each entry contains `platform`, `url`, and an optional `id`.
+
+These are the possible [platform values](https://github.com/w3c/manifest/wiki/Platforms):
+* `play`: Google Play apps (Android and ChromeOS).
+* `itunes`: Apple App Store (macOS, iOS, and iPadOS).
+* `windows`: Microsoft Store (Windows 10 and 11).
+* `amazon`: Amazon AppStore (FireOS).
+* `webapp`: installed PWA.
+
+### Prefer a related app
+
+When the user installs an app, you can redirect the user to a related app if you set the `prefer_related_applications` field to `true` in your manifest. With this setup, on compatible browsers the install flows won't install the PWA; instead they trigger a store installation from the `url` or `id` that you specified in the `related_applications` entry.
+
+The related application could be your PWA and it will be installed via an app store. One advantage of this configuration is that, at the moment, only apps installed through the app store are recovered with a backup or when you switch to a new device.
+
+```json
+{
+  ...
+  "related_applications:" [
+     {
+       "platform": "play",
+       "url": "https://play.google.com/..."
+     }
+  ],
+  "prefer_related_applications": true
+}
+```
+
+{% Aside %}
+Using `prefer_related_applications: true` with only a `webapp` preferred application doesn't make any difference in how your PWA is offered and installed.
+{% endAside %}
+
+#### Apple Smart App Banners
+
+Safari doesn't support the `related_applications` member, but it offers [Smart App Banners](https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners) for apps in the App Store. So if you want to promote a PWA or other app you have published in the App Store, you can include meta tags in your PWA's HTML to invite the user to install the app (see the link just provided), or transfer the navigation if it is already installed.
+
+### Detecting related installed apps
+
+The [`getInstalledRelatedApps()`](/get-installed-related-apps/) method allows your website to check whether your iOS/Android/desktop app or PWA is installed on the user's device.
+
+Checking if a related app is installed already helps you to implement features such as hiding custom-installed prompts or redirecting the user directly to the installed app, instead of going to a general purpose website.
+To use the `getInstalledRelatedApps()` method, both the installed app and the website need to configure their connection with each other. Each app, depending on its platform, includes metadata to recognize the website and the website includes the expected installed app in the `related_applications` field in the manifest.
+
+Tools such as [BubbleWrap](https://github.com/GoogleChromeLabs/bubblewrap) or [PWA Builder](https://www.pwabuilder.com/), which allow you to publish your PWA to app stores, already add the required metadata so your website can use `getInstalledRelatedApps()` right away.
+To detect whether a PWA is already installed using `getInstalledRelatedApps()`, define `webapp` in the manifest `related_applications` field with the URL to your manifest:
+
+```json
+...
+"related_applications": [{
+   "platform": "webapp",
+   "url": "https://example.com/manifest.json",
+}],
+...
+```
+
+`getInstalledRelatedApps()` returns an array of app objects. If the array is empty, the related app is not installed.
+
+```js
+const relatedApps = await navigator.getInstalledRelatedApps();
+const PWAisInstalled = relatedApps.length > 0;
+```
+
+#### Detect installation from outside the PWA's scope
+
+From Chrome on Android 89, you can detect if a PWA is installed, even from outside the PWA's scope. Your PWA must set a JSON file within the `/.well-known/` folder, giving permission to the other scope, as described in [this article](/get-installed-related-apps/#check-pwa-out-of-scope).
+
+##  Resources
+
+- [Is your app installed? getInstalledRelatedApps() will tell you!](/get-installed-related-apps/)
+- [MDN: Related Applications](https://developer.mozilla.org/docs/Web/Manifest/related_applications)
+- [MDN: AppInstalled event](https://developer.mozilla.org/docs/Web/API/Window/appinstalled_event)
+- [Apple: Promoting Apps with Smart App Banners](https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners)
+
diff --git a/src/site/content/en/learn/pwa/enhancements/index.md b/src/site/content/en/learn/pwa/enhancements/index.md
new file mode 100644
index 00000000000..e4066ec19d6
--- /dev/null
+++ b/src/site/content/en/learn/pwa/enhancements/index.md
@@ -0,0 +1,149 @@
+---
+title: Enhancements
+description: >
+  Your user expects a good experience. In this chapter, you will see how to enhance your PWA with splash screens, app shortcuts, and how sessions work.
+authors:
+  - firt
+date: 2022-03-10
+updated: 2022-03-14
+---
+
+There are many enhancements that can improve the conversion and usage of your PWA.
+
+## App shortcuts
+
+[App shortcuts](https://w3c.github.io/manifest/#shortcuts-member) is a static list of deep links to your PWA, they are written in your manifest. [Web App Manifest spec](/learn/pwa/web-app-manifest). It lets you define a list of shortcuts to different parts or features in your PWA, they accelerate navigation to frequently accessed sections.
+
+App shortcuts are available on most desktop operating systems and Android with WebAPK, and they appear in a contextual menu on the app's icon in the home screen, dock, or taskbar, as in the following image:
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/SYm7meKqd286Z62gehX9.png", alt="App shortcuts in Android and macOS.", width="800", height="280" %}
+
+To access this menu, users have to right-click or long-press on the PWA's icon.
+
+{% Aside %}
+App shortcuts are only available if the user installs your PWA.
+{% endAside %}
+
+{% Aside 'warning' %}
+Once the user has installed your PWA, you can't add or remove shortcuts until you update your manifest on the server and the [update algorithm](/learn/pwa/update) is triggered.
+{% endAside %}
+
+Shortcuts are defined in the `shortcuts` member of the manifest. It takes an array of members with the following properties:
+`name`
+: The text that will be shown to the user, typically in a context menu.
+`start_url`.
+: The URL the PWA should load when the user starts it from this shortcut. It should be a URL within your PWA scope, and it should deep-link to the feature the `name` or `short_name` describes.
+`short_name`
+(Optional) A shorter name used when there is not enough room to display the full value of the `name` field.
+`description`
+: (Optional) A description of what this shortcut will do
+`icons`
+: (Optional) An array of icon objects with `src`, `type`, `sizes`, and optional `purpose` fields, describing what images should represent the shortcut
+
+You should treat App shortcuts as a best-effort ability. That means that you can't rely on these shortcuts to appear consistently, and even if they appear, you don't know how many shortcuts will appear or if the platform will ignore the icons as its at the discretion of the browsers. A full discussion per platform is out of scope but below you have an idea of how it works on Android and desktop. The best way to deal with this uncertainty is to order the items by priority.
+
+{% Aside 'caution' %}
+Chrome and Edge on desktop renders the first 10 items, while Chrome on Android only renders the first three shortcuts in the manifest's list, so it's better if you order them by priority. Chrome on Android also adds access to "App Info" and "Site Settings" from the menu after your custom list.
+{% endAside %}
+
+{% Aside %}
+If you publish your PWA to app catalogs and stores, you can convert the shortcuts in the manifest to platform-specific implementations using APIs specific to each operating system, such as Quick Actions on iOS and shortcuts on Android. [BubbleWrap](https://github.com/GoogleChromeLabs/bubblewrap) supports App shortcuts for Android and ChromeOS and [PWA Builder](https://www.pwabuilder.com/) for Android, ChromeOS, iOS and iPadOS.
+{% endAside %}
+
+The following code sample defines different app shortcuts you can try if you install the app on Android with Chrome or on desktop with Edge or Chrome.
+
+{% Glitch 'mlearn-pwa-app-shortcuts' %}
+
+## iOS and iPadOS
+
+When publishing PWAs, there are some enhancements that can improve the experience for users on Safari on iOS/iPadOS.
+
+{% Aside 'warning' %}
+As we mentioned in previous chapters, PWAs on iOS and iPadOS are only installable from Safari; other browsers are not able to install PWAs in the home screen.
+{% endAside %}
+
+### Splash screens
+
+As seen in the [Web App Manifest chapter](/learn/pwa/web-app-manifest), Android creates splash screens automatically based on the manifest's values. That's not the case for iOS and iPadOS. In these devices, you should define the splash screens in the HTML as static images using `<link>` elements.
+
+These images are known as startup images on Apple devices and they use the `rel` property with `apple-touch-startup-image` value, as in:
+
+```html
+<link rel="apple-touch-startup-image" href="ios-startup.png">
+```
+
+The challenge is that the startup image must have the exact window size that your PWA will have on opening. So, different iOS and iPadOS devices will need different images. More situations need to be covered on the iPad, such as landscape/portrait openings and rendering the PWA in multitask mode (such as 1/3,1/2, or 2/3 of the screen).
+
+You can check an updated list of iOS and iPadOS screen sizes at the [Apple Human Interface Guidelines]( https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/)
+
+Different versions of the launch image can be set with a media query inside the `media` attribute:
+
+```html
+<link rel="apple-touch-startup-image" href="ios-startup.png"
+      media="orientation: portrait">
+<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
+      media="orientation: landscape">
+```
+{% Aside 'warning' %}
+If you want to provide all possible options combining screen definitions, orientations, and multitask mode, you will end up with more than 25 different images you need to create and link in your HTML. If you don't provide a startup image for your user's iOS or iPadOS context, a white screen will appear instead in the opening animation, and while your PWA is loading
+{% endAside %}
+
+#### Design patterns for iOS startup images
+
+Defining startup images is hard work, so we have a couple of tools for automated generation and configuration:
+
+* Static generation integrates with your build system, creates all the PNG static images and gives you the HTML code with `<link>` elements to inject into your document. [PWA Asset Generator](https://github.com/onderceylan/pwa-asset-generator) is an example of such a tool.
+* Client-side generator, a JavaScript tool that can embed one or more base64 versions of the startup image into `<link>` injected elements based on the current device's type and screen size. You can use an in-memory canvas, render the image and convert it into a `data:` URI with a PNG file. The [PWA Compat library](https://github.com/GoogleChromeLabs/pwacompat) is an easy-to-use client-side library that does this by cloning the Android's typical launch screen.
+
+### Detecting a PWA on Apple mobile platforms
+
+While you should use Progressive Enhancement and feature detection in your PWA, there may be some edge cases where we need to know if the user is in a PWA on Apple mobile platforms, such as when you want to offer installation instructions or add links to platform-specific apps that are iOS-only.
+
+To avoid reading the user agent string, check the `standalone` property of the `navigator` object. This is a non-standard property, and it's only available on the WebKit engine on iOS and iPadOS.
+
+* If `navigator.standalone` is `undefined` it means the user is not on an iPadOS or iOS device.
+* If `navigator.standalone` is `false` it means the user opened the PWA in the browser and is using it there.
+* If `navigator.standalone` is `true` it means the user opened the PWA from the home screen and is getting the standalone PWA experience.
+
+### Fullscreen support
+
+On Safari on iOS and iPads, only `display: standalone` is supported as a [display mode for your PWA's icon](/learn/pwa/app-design/#display-modes). While `display: fullscreen` is not supported as on Android devices, it's possible to use a non-standard meta-tag to make your PWA enter fullscreen mode.
+
+In the next image, you can see at the left a default standalone design with a theme color, and at the right a PWA with a fullscreen iOS mode that lets you render content behind the status bar.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/SYjZ1upKyQaMuF1nrv7Y.png", alt="A standalone default behavior (left) and a fullscreen iOS screen (right).", width="800", height="216" %}
+
+If you add the following tag in your HTML your PWA on iOS and iPadOS will enter full-screen mode, but it is different from Android.
+
+```html
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+```
+
+In this mode, the device's status bar (the top where you see the clock, battery level, and notification icons) is still visible but rendered on top of your content with a transparent background.
+
+{% Aside 'warning' %}
+The theme color is ignored in this mode, and the notification bar is rendered over a transparent background. Also, your app's [0, 0] pixel is now the [0, 0] pixel of the physical screen and not after the safe area.
+{% endAside %}
+
+When using this mode, be careful with your design because the operating system will always render the icons in white, so you should always contrast your backgrounds for the top of the screen with light content. Also, it's important to use [CSS environment variables](https://developer.mozilla.org/docs/Web/CSS/env()) to render content in the safe area, as seen in [App Design Chapter](/learn/pwa/app-design/#safe-areas).
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/WZSHybaKkUvpLcphGJ8y.png", alt="The top 0px of your viewport is below the status bar by default; if you add a black-translucent meta tag, the top 0px of your viewport will match the physical top of the screen", width="800", height="219" %}
+
+
+### Installation reliability
+
+Safari on iOS and iPadOS before 15.4 only loads the manifest file from the network when the user opens the share sheet -using the share icon within the browser- and not when the page loads. Therefore, Safari doesn't check if your website is a PWA until that moment, which can lead to situations where the manifest can't be loaded or takes too much time, and Safari ignores it.
+
+When Safari can't load the manifest on time, pressing "Add to Home Screen" places an icon on the home screen, but does not provide an app experience; it will merely be a shortcut to a Safari tab.
+
+{% Aside 'warning' %}
+If Safari can't load the manifest, it will fall back to check if your PWA has some deprecated meta tags, such as `apple-mobile-web-app-capable`. You should not use these metatags. They provide a home screen app experience without essential attributes for your PWA, such as honoring the `start_url` or the `scope` attributes, making a terrible app experience.
+{% endAside %}
+
+##  Resources
+
+- [PWA Asset Generator](https://github.com/onderceylan/pwa-asset-generator)
+- [Get things done quickly with app shortcuts](/app-shortcuts)
+- [PWA Compat Library](https://github.com/GoogleChromeLabs/pwacompat)
+- [Define App Shortcuts](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/shortcuts)
+
diff --git a/src/site/content/en/learn/pwa/experimental/index.md b/src/site/content/en/learn/pwa/experimental/index.md
new file mode 100644
index 00000000000..2fe947133eb
--- /dev/null
+++ b/src/site/content/en/learn/pwa/experimental/index.md
@@ -0,0 +1,92 @@
+---
+title: Experimental features
+Authors:
+  - firt
+description: >
+  There are PWA capabilities that are still under construction and you can be part of their development. In this chapter you'll learn about the Fugu project, how to sign-up for an origin trial, and how to use experimental APIs
+
+date: 2022-04-15
+---
+
+The web is a powerful platform, but there are still gaps in what it can solve. Those who want to develop for the web but need more different capabilities are forced to bundle their web apps in wrappers and publish them in app stores.
+
+Developers may choose to ship their own custom browser as platform-specific apps, which disproportionately increases the size of their web apps. This will also  force them to take on the additional security and maintenance burden of keeping both the browser fork and wrapper up to date.
+
+This approach also loses the reach of the web, often being forced to choose what devices and operating systems to support, which often require different wrappers, and which further expands the security and maintenance burden.
+
+Filling these capabilities gaps is the key to fixing this and thereby enabling the web to be the software platform of the future, covering as many use cases as possible, in comparison with platform-specific SDKs.
+
+## Project Fugu
+
+This is where the capabilities project, known as [Project Fugu](https://www.chromium.org/teams/web-capabilities-fugu), comes in.
+The [capabilities project](https://developer.chrome.com/blog/fugu-status/), or Project Fugu, is a cross-company effort to make it possible for web apps to have the same capabilities as platform-specific apps by exposing the capabilities of these platforms to the web, while maintaining user security, privacy, trust, and other core tenets of the web.
+
+### Track capabilities
+
+There is a [public tracker](https://goo.gle/fugu-api-tracker) to keep up with all the work to ship new capabilities.
+On the tracker, you can see:
+
+* The status of each API being worked on or considered.
+* Platforms the API is targeted for.
+* Links and additional information for each API.
+* Search and filter capabilities.
+* A timeline view.
+
+### Request a capability
+
+What if you want to request a new capability? You can file an issue in the [Chromium bug tracker](https://bugs.chromium.org/p/chromium/issues/list), or you can go to [webwewant.fyi](https://webwewant.fyi) and fill out a form to reach the corresponding  browser vendors.
+
+### The process for each capability
+
+Before launch, there are two states an in-progress API could be in, and both allow you to test them.
+
+* A developer trial: the feature is behind a flag, the API isn't necessarily stable, and you shouldn't implement it for real users. You can enable or disable flags on Chromium-based browsers by going to `about:flags`, allowing you to test on your own browser instance.
+
+{% Aside 'important' %}
+Under no circumstances should users ever be told to turn flags on or off. Because such features are still under development, changing flag defaults can have unanticipated consequences for the stability of the browser.
+{% endAside %}
+
+* An origin trial: a state where features can be enabled by origin, developers can run tests for a wider audience than their single browser instance, but the feature is still being tested and the implementation can change, more details below.
+
+## Origin trials
+
+Origin trials allow you to try out new features and give feedback to the web standards community on usability, practicality, and effectiveness. APIs available under origin trial are:
+
+* Experimental, they may change and may become unavailable, including not extending beyond the experiment, and may be unavailable for some time, even if they are eventually enabled for all users. So where possible, you should implement feature detection or graceful degradation to handle the case when the feature is unavailable.
+* Stable enough to use with real users, but they may change throughout the course of the trial.
+* [Limited across all users globally](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md#monitoring-and-limiting-usage) to ensure they don't become a de facto standard, so it's recommended you activate the feature in your codebase following each browser's trial guidelines for a subset of your users.
+* Limited to the browser vendor which starts the origin trial, so a Chrome origin trial will not work in Safari, Firefox, or Edge, for instance.
+
+If these requirements are OK for you, you can register an origin to participate in a trial. You can find instructions to sign up for an origin trial in Chrome [here](https://developer.chrome.com/blog/origin-trials/) and for Microsoft Edge follow [this link](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OriginTrialsGuide/explainer.md)
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/d5ueJjfbepXwq72v2UjU.png", alt="A list of available origin trials for Google Chrome.", width="800", height="510" %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/hSzBgQsAvgkCUN6h1RQN.png", alt="A list of available origin trials for Microsoft Edge.", width="800", height="541" %}
+
+## Safari experimental features
+
+Safari also allows developers to try and test new and unfinished APIs and capabilities, but it doesn't provide origin trials. You can't enable Safari's experimental features for users.
+
+Safari's solution is similar to flags, known as experimental features. Every new version of Safari comes with many experimental features, some of them enabled and some disabled by default.
+
+As a developer, you can change those default settings using:
+
+* The develop, experimental features menu in Safari for macOS.
+* The iOS and iPadOS Settings App, by going to Safari, Advanced, Experimental Features.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/Y6agrnMYlpbQ970kYyYp.png", alt="Experimental features available on Safari on iPadOS.", width="800", height="525" %}
+
+## Firefox experimental features
+
+Firefox offers [experimental features](https://developer.mozilla.org/docs/Mozilla/Firefox/Experimental_features) through settings that you can enable or disable by accessing the Configuration Editor using `about:config`.
+
+##  Resources
+
+- [The capabilities project](https://developer.chrome.com/blog/capabilities/)
+- [New capabilities status](https://developer.chrome.com/blog/fugu-status/)
+- [Fugu Public Tracker](https://goo.gle/fugu-api-tracker)
+- [Getting started with Chrome origin trials](https://developer.chrome.com/blog/origin-trials/)
+- [Microsoft Edge Origin Trials Guide](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OriginTrialsGuide/explainer.md)
+- [The Web We Want, feedback form](https://webwewant.fyi)
+- [Firefox experimental features](https://developer.mozilla.org/docs/Mozilla/Firefox/Experimental_features)
+- [WebKit blog](https://webkit.org/blog/)
diff --git a/src/site/content/en/learn/pwa/foundations/index.md b/src/site/content/en/learn/pwa/foundations/index.md
new file mode 100644
index 00000000000..0ea946fb65b
--- /dev/null
+++ b/src/site/content/en/learn/pwa/foundations/index.md
@@ -0,0 +1,221 @@
+---
+title: Foundations
+description: >
+  All Progressive Web Apps are, at their core, modern websites, so it's important that your website has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance.
+authors:
+  - firt
+date: 2021-11-03
+updated: 2021-11-05
+
+---
+
+## A solid foundation
+
+ A solid foundation is the base requirement for building great PWAs. 
+ To implement this foundation you need to design and code for the constraints of the web using a couple of principles:
+
+- Use mobile as a focusing constraint. Make sure each view of your design focuses only on the essential content and interactions.
+- Emphasize content and core functionality in the design process. 
+- Progressively enhance when needed. Start by building a component's core content and functionality with the most straightforward, most widely available tools. Make it accessible. Then, test for advanced features you'd like to use and enhance your component with them.
+- Offer a fast and good user experience focused on user-centric web performance metrics, get real user metrics, and push performance for all your users, no matter their network connection, input type, CPU, or GPU power.
+
+{% Aside %}
+Accessibility is key for a successful PWA. Please follow [these guidelines](/pwa-checklist/#:~:text=to%20cached%20content%20or%20an%20offline%20indicator%20as%20needed.-,is%20fully%20accessible) to make sure your app is accessible to anyone, anywhere.
+{% endAside %}
+
+By following these principles and enhancing with modern patterns and web features, 
+you can create great and fast experiences with truly intrinsic designs. 
+Designs that are powered by constraints instead of pixels, 
+allowing every user access to your content and core functionality in a way that's best suited for their particular browsing context. 
+
+## Responsive web design
+
+Since Ethan Marcotte's 2010 A List Apart article, 
+[Responsive Web Design](https://alistapart.com/article/responsive-web-design/), 
+designers and developers have been encouraged to create experiences that flex, 
+making user interfaces that work across a spectrum of screen sizes and devices. 
+
+Somewhere along the way, though, that became shortened to mobile, tablet, and desktop sizes, 
+with widths heavily influenced by iOS screen sizes. 
+With modern CSS and a renewed focus on responsive design's original intent, we can put the squish back in squishy sites.
+
+Responsive web design introduces three technical ingredients:
+
+- Fluid grids
+- Flexible media
+- Media queries
+
+Ethan concludes that these technical requirements aren't enough; 
+the way forward also requires a different way of thinking.
+
+### The mobile user myth
+
+In the early days of responsive design assumptions were made in the name of making sites easier to design. 
+For example, small experiences were for phones, and they had a 320px width, 
+medium experiences were for tablets, and they had a 1024px width, and anything larger than that was for desktops. 
+Small screens had touch abilities, large screens didn't. Phone users were rushed and distracted and therefore needed a "light" experience. 
+
+None of this is true; 
+they are mobile myths perpetuated by the assumption that a user's needs are fundamentally different based solely on screen size or device type. 
+This doesn't hold up to scrutiny.
+
+Take, for example, a social network PWA that you can install today on mobile and desktop. 
+On desktop, many users can keep a narrow window with the feed at one side of the screen while working, 
+and assuming they are on a mobile device because of the available width would be wrong.
+
+The PWA world that is out of the browser's tab is even adding new challenges to a responsive design world, such as the mini-mode and working with foldable devices.
+
+### Mini-mode
+With a PWA installed on a desktop device, 
+a window can get really small; smaller than a browser's window, smaller than a mobile viewport. 
+This is something new on the web: we can support a mini-mode, a window that can be as small as 200x100 CSS pixels. 
+
+When creating a PWA these days, it's a good idea to think about what to offer in mini-mode, 
+thanks to responsive web design, such as just control buttons on a music player, dashboard information, or quick actions.
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/hPR7t2kr42boNc4MfSGQ.mp4", alt="On desktop, a PWA can be rendered in a smaller window than the smallest window you've ever designed for the browser. It adds a new breakpoint for your responsive web design: the mini-mode.", autoplay="true", loop="true", muted="true" %}
+
+On desktop, a PWA can be rendered in a smaller window than the smallest window you've ever designed for the browser. It adds a new breakpoint for your responsive web design: the mini-mode.
+
+### Foldables and hybrid
+
+Foldable and hybrid devices are also common these days:
+
+- Small clamshell phones.
+- Foldable devices that can be used as phones or tablets.
+- Laptops that can be transformed into tablets.
+- Tablets that can act as laptops with keyboard and trackpad.
+- Phones then can be converted to desktop with a hub.
+
+While the challenge exists for every website, with a Progressive Web App you are in control and responsible for the window when the app is installed. Therefore, your design should react and offer the best experience in every context.
+
+{% Aside %}
+It's becoming common to transfer an app's navigation between devices, so your PWA can be rendered in a smartwatch after receiving notification; the navigation can be transferred to a phone, and then to a laptop. Supporting all modes and devices is key to avoiding user frustration.
+{% endAside %}
+
+## Everything first
+
+But where should you get started? Mobile first, content first, offline first? When designing for the flexibility of the web, which is it? Well, the answer is yes, *everything first*.
+The term _mobile first_ has been interpreted in many ways since Luke Wroblewski first coined it in 2009: from emulating platform-specific UI and UX patterns on the web to building mobile apps before building web apps to just using min-width media queries and calling it a day. Its original intent, though, is this: *mobile forces you to focus*. As Luke said:
+
+{% Blockquote 'Luke Wroblewski' %}
+Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480-pixel screen for extraneous, unnecessary elements. You have to prioritize.
+So when a team designs Mobile First, the result is an experience focused on the key tasks users want to accomplish without the detours and interface debris that litter today's desktop-accessed websites. That's a good user experience and good for business.
+{% endBlockquote %}
+
+Focus each view of your website on only the essential tasks a user wants to accomplish there, 
+and don't add more stuff to the idea just because they have more screen real estate.
+
+The second principle is hinted at in Responsive Web Design: the "gradient of different experiences." 
+A single, identical, pixel-perfect experience for every single user should not be the goal of your work; it's all but impossible. 
+
+{% Aside 'caution' %}
+There are countless combinations of screen sizes, capabilities, devices, and contexts a user may be browsing with, and as a designer, you do not control what that final mix will be. 
+{% endAside %}
+
+Instead of thinking about your web experiences as a fixed thing, 
+think of it as a set of recommendations that the user's device will use to build the best experience for their current context. To do so, progressive enhancement needs to be embraced. 
+
+### Progressive enhancement
+
+Progressive Enhancement is a pattern that lets us write code that runs everywhere, starting from standard HTML, CSS, and JavaScript, and adding layers of capabilities on top of that with proper fallbacks when an API is not available.
+
+How do you enhance? Feature detection is a pattern where you perform a test for support and react based on that test results. There are several built-in web platform tools and practices for doing this.
+
+Using `@supports`, check for browser support of a CSS feature, and apply rules based on the result. 
+This applies to both CSS properties and values; if a property is supported and a value is not, it will fail, as will an unsupported property. JavaScript code can access this through the [`CSSSupportsRule`](https://developer.mozilla.org/docs/Web/API/CSSSupportsRule)
+
+Most new web platform features are attached to existing objects, so ‘feature' in object style detection works well in JavaScript, as will other similar lookups, like checking for properties or methods on elements.
+
+To ship modern JavaScript, you can use the module/nomodule pattern to provide more robust features with a smaller payload to more modern browsers and a fallback experience to older browsers. This has the bonus of guaranteeing a new baseline of JavaScript features, like promises, classes, arrow functions, and `const` and `let` are available for browsers that support ES Modules. 
+
+You can even combine multiple forms of feature detection to create your enhanced baseline. Coined by the BBC News team, this is called Cutting the Mustard and lets you ship a core experience to everyone and start enhancing the experience only after a specific feature-detected bar is reached.
+
+{% Aside %}
+The P in PWA comes from Progressive, and it emphasizes the idea of adding features and abilities progressively, and using Feature Detection is key for that goal.
+{% endAside %}
+
+#### Avoid device detection
+
+You should directly test for feature support instead of making support assumptions based on the User-Agent string. 
+
+User-agent strings have never been truly reliable. 
+They rely on having near-perfect knowledge of every browser, operating system, 
+and device combination in existence to "guess right". 
+Even then they are susceptible to user spoofing, for example, desktop site redirects on mobile browsers are often as simple as spoofing a desktop user-agent string.
+
+Moreover, browsers are working on freezing their User-Agent strings, 
+with user-agent strings for feature detection specifically called out as a reason for deprecation, 
+making them even more unreliable than they previously were for identifying a user and device.
+
+{% Aside %}
+After saying that device detection is a bad practice, it's also important to clarify that there are still situations where we don't have any other solution, such as detecting iOS devices to offer specific platform instructions. Treat these practices as hacks and be careful to re-test and update these hacks on every new version of the browser on these platforms.
+{% endAside %}
+
+### Content first
+
+Another principle of designing for the web is: start with *your content first*. For example, a real-time  stock ticker with a graph of a stock's prices is, at its core, a table of stocks with their price over some time, maybe with a link to refresh the site. 
+
+That can then be enhanced with JavaScript and fetch requests to update the table's values on a timer or enhanced with sockets to provide real-time push-based updates. It can be enhanced again to graph the results, maybe with CSS, maybe with SVG, maybe with Canvas. But the core starts with content.
+
+## Intrinsic design
+
+- Mobile as a focusing constraint for user experience.
+- Emphasizing content and core functionality in the design process.
+- Progressively enhancing with advanced functionality where available.
+
+These principles combine to give us something new: _intrinsic design_.
+In her talk [Designing Intrinsic Layouts](https://www.youtube.com/watch?v=AMPKmh98XLY), Jen Simmons talks about using modern CSS tools, like Grid, Flexbox, flow layout, and writing modes, to design and build user interfaces. With these tools, she says:
+
+{% Blockquote 'Jen Simmons' %}
+You can really make the layout be intrinsic to the content that we have and the design that we want to do.
+{% endBlockquote %}
+
+This new CSS allows designers to regain some control over layout but do so in a way that aligns with the latest web design principles. Instead of creating fixed forms based on fixed screen sizes, you define content-based rules by which layout  happens by tapping into intrinsic properties of that content, like how small or large it can be, the size of the text, and the available space, all at once. They allow you to realize your design as it interacts with your content without needing to control every pixel's placement.
+
+Intrinsic layouts bring the conversation about control on the web full-circle, giving it definition. Control on the web isn't about dictating devices or screen sizes or colors or fonts or layouts or capabilities for each visitor to your site. Control on the web is about writing the rules a browser will use to assemble your experience, building it uniquely for each user in your Progressive Web App.
+
+## Web performance
+
+The last but not least important foundation for our PWA is Web Performance. 
+Having a great experience for users is mandatory; 
+it will lead to more conversions in every possible way.
+
+Web performance involves several steps:
+
+- Understand the key user-centric metrics available.
+- Set goals for every metric.
+- Measure our PWA.
+- Improve our metrics by applying techniques and best practices statically in our code or server.
+- Measure again.
+- Improve the experience to each user, live, based on the user's context.
+
+Web performance metrics today measure how fast your content appears on the screen, 
+but also how interactive your website is and how users perceive the experience.
+
+### Web Vitals
+
+During the past decade, we've been dealing with different metrics to measure success in web performance. 
+Today, a set of recommended metrics are grouped under the project [Web Vitals](/vitals/). 
+Web Vitals focus metrics in three key areas affecting web performance and perception:
+
+- Loading
+- Interactive
+- Visual Stability
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/gu948vCUtGMKb6dKcSpZ.png", alt="A set of metrics from Core Web Vitals showing a website's performance results.", width="800", height="225" %}
+
+
+With Core Web Vitals, you can see at a glance, how good or bad is your PWA in web performance and user experience.
+
+## PWA foundations
+It's important that your PWA has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance as a foundation for a great experience for all your users.
+
+##  Resources
+
+- [Learn Responsive Web Design](/learn/design)
+- [The new responsive: Web design in a component-driven world](/new-responsive/)
+- [Progressive Enhancement](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement) 
+- [Ten modern layouts in one line of CSS](/one-line-layouts/)
+- [Web Vitals](/vitals/)
+- [Designing Intrinsic Layouts talk](https://www.youtube.com/watch?v=AMPKmh98XLY)
diff --git a/src/site/content/en/learn/pwa/getting-started/index.md b/src/site/content/en/learn/pwa/getting-started/index.md
new file mode 100644
index 00000000000..9681558c441
--- /dev/null
+++ b/src/site/content/en/learn/pwa/getting-started/index.md
@@ -0,0 +1,127 @@
+---
+title: Getting started
+description: >
+  If you want to build a Progressive Web App, you may be wondering where to start, if it's possible to upgrade a website to a PWA without starting from scratch, or how to move from a platform-specific app to a PWA. This article will help you answer these questions.
+authors:
+  - firt
+date: 2021-11-03
+updated: 2022-05-16
+---
+
+## First steps
+
+Progressive Web Apps are still websites, with enhanced features and capabilities.
+They are not attached to a particular technology stack and you can start from scratch with a new site or update your existing website without a complete overhaul.
+In this guide you'll learn to create a good implementation of the PWA pattern.
+Here are some strategies to get you started:
+
+### Make it installable
+
+Start small! This approach includes beginning with a basic manifest file, a simple offline page, and a service worker to serve the offline page and cache some critical CSS and JavaScript. Thanks to the critical CSS and JavaScript caching, you will get your existing web app ready to work offline while improving its performance.
+
+### Focus on a feature
+
+Pick one new feature—such as push notifications or file handling—that will significantly impact your users or your business. This will allow you to dip your toes into the PWA pool without making too many changes at once.
+
+### Build a simple version
+
+Take an existing section of your application or a specific user journey, like video playback or access to a boarding pass, and make it work front-to-back as an offline-first PWA, either stand-alone or in context. This allows for a low-stakes experiment enabling you to rethink an experience for your users with PWAs.
+
+### Start from the ground up
+
+If you're going through a redesign of your website or can start from scratch, this strategy makes a lot of sense. It enables you to more easily build in PWA design patterns than other strategies, in particular allowing you to take advantage of all the power of service workers from the get-go.
+
+## Upgrading a store app
+
+With the ability to publish a PWA to app stores,
+it's possible to wrap your PWA into a PWA launcher and upload it to stores, such as Google's Play Store or Windows Store.
+If you have an existing platform-specific app, you can replace it with your PWA published in the store.
+
+With this approach, your existing users get an upgrade of their experiences to the PWA,
+and new users can still use or install your PWA from the browser, or the app stores.
+And, you will have one app for everyone, saving costs, time and improving user experience.
+
+## PWA checklist
+
+A Progressive Web App is a website, which leads to the question: When does it become a Progressive Web App?
+The answer is not so simple, as the PWA concept doesn't refer to a specific technology or stack, PWA is instead a pattern including various technical components.
+
+While there are no unique rules among all browsers, there are a set of recommendations,
+called the [Progressive Web App Checklist](/pwa-checklist/), to help you create a PWA that users will love.
+
+### Core requirements
+
+Because PWAs span all devices,
+from mobile through desktop,
+the core Progressive Web App Checklist is about what you need to do to make your app installable and reliable for _all_ users,
+regardless of screen size or input type.
+
+The core requirements are:
+
+#### Starts fast, stays fast
+
+Performance plays a significant role in the success of any online experience, as high-performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric performance metrics.
+
+#### Works in any browser
+
+Progressive Web Apps are web apps first, which means they need to work across browsers, not just in one of them. The experience doesn't have to be identical in all browsers, though. There can be features that aren't supported by one browser, with a fallback to ensure a good experience.
+
+#### Responsive to any screen size
+
+Users can use your PWA on any screen size, and all content is available at any viewport size.
+
+#### Provides a custom offline page
+
+When users are offline, keeping them in your PWA provides a more seamless and native-like experience than dropping back to the default browser offline page.
+
+#### Is installable
+
+Users who install or add apps to their home screens tend to engage with those apps more, and when the PWA is installed it can take advantage of more abilities for a better user experience.
+
+### Optimal PWA characteristics
+
+To create a genuinely great Progressive Web App,
+one that feels like a best-in-class app, you need more than just the core checklist.
+The optimal Progressive Web App checklist is about making your PWA feel capable and reliable while taking advantage of what makes the web powerful.
+
+#### Provides an offline experience
+
+By allowing users to use your PWA while offline, you'll create an authentic app-like experience for them. Do this by identifying those features that don't require connectivity, so that users can access at least some functionality.
+
+{% Aside 'gotchas' %}
+When we say that the PWA should provide an offline experience, it doesn't mean that all the services and content should be available offline. For example a note taking app can't sync its notes when there is no connectivity, but it can allow the users to write the note and sync new changes when they are back online. At the very least you should render the app's user interface with a proper message if your app needs a live connection.
+{% endAside %}
+
+#### Is fully accessible
+
+Ensure all the application's content and interactions are understood by screen readers, usable with just a keyboard, that focus is indicated, and color contrast is strong. By making your PWA accessible, you ensure it's usable for everyone.
+
+#### Uses powerful capabilities where available
+
+From push messaging, WASM, and WebGL to file system access, contact pickers, and integration with app stores. The tools to create highly capable, deeply integrated PWAs are here, allowing you to create a fully-featured user experience, previously reserved for platform apps, that your users can take with them wherever they go.
+
+#### Is discoverable through search
+
+More than half of all website traffic comes from organic search. Making sure that canonical URLs exist for content and that search engines can index your site is critical for users to find your PWA.
+
+#### Works with any input type
+
+Users should be able to switch between input types while using your application seamlessly, and input methods should not depend on screen size.
+
+#### Provides context for permission requests
+
+Only trigger prompts for permissions like notifications, geolocation, and credentials, after providing in-context rationale to improve chances of accepting the prompts from the user.
+
+#### Follows best practices for healthy code
+
+Keeping your application up-to-date and your codebase healthy makes it easier for you to deliver new features that meet the other goals laid out in this checklist.
+
+{% Aside %}
+While the PWA Checklist has a set of best practices for all developers,
+some browsers also have _PWA Criteria_.
+
+The PWA criteria is a set of technical requirements that your website must comply with to be treated as a PWA. Your PWA will receive special treatment when that happens, such as firing new events, rendering an install badge or dialog, or adding a new Install menu within the browser.{% endAside %}
+
+## Resources
+
+- [PWA checklist](/pwa-checklist/)
diff --git a/src/site/content/en/learn/pwa/index.md b/src/site/content/en/learn/pwa/index.md
new file mode 100644
index 00000000000..4c2bb52f41d
--- /dev/null
+++ b/src/site/content/en/learn/pwa/index.md
@@ -0,0 +1,46 @@
+---
+title: Learn PWA
+authors:
+  - firt
+description: A course that breaks down every aspect of modern progressive web app development.
+date: 2021-11-03
+updated: 2022-05-16
+---
+
+## Welcome to Learn Progressive Web Apps!
+
+Welcome to Learn Progressive Web Apps!
+
+This course covers the fundamentals of Progressive Web App development in easy-to-understand pieces.
+Over the following modules, you'll learn what a Progressive Web App is,
+how to create one or upgrade your existing web content,
+and how to add all the pieces for an offline, installable app.
+Use the menu pane to navigate the modules. (The menu is at left on desktop or behind the hamburger menu on mobile.)
+
+You'll learn PWA fundamentals like the Web App Manifest,
+service workers, how to design with an app in mind,
+how to use other tools to test and debug your PWA.
+After these fundamentals, you'll learn about integration with the platform and operating system,
+how to enhance your PWA's installation and usage experience, and how to offer an offline experience.
+
+Each module includes interactive demos and self-assessments for you to test your knowledge.
+You will be able to test and try demos on your mobile phone, tablet,
+or laptop while playing with code to understand the fundamentals of what makes a Progressive Web App.
+
+This course is created for a beginner and advanced web developers alike.
+You can go through the series from start to finish to get a general understanding of PWA from top to bottom,
+or you can use it as a reference for specific subjects.
+For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along.
+Check out [Learn CSS](/learn/css), and the
+[HTML](https://developer.mozilla.org/docs/Learn/HTML) and
+[JavaScript](https://developer.mozilla.org/docs/Learn/JavaScript) courses on MDN.
+
+Here's what you'll learn:
+
+{% include 'partials/course-index.njk' %}
+
+So, are you ready to learn PWA?
+
+{% Aside %}
+This course was written by [Maximiliano Firtman](https://twitter.com/firt), with input and review from [Rachel Andrew](https://twitter.com/rachelandrew), [Adriana Jara](https://twitter.com/tropicadri), [Pete LePage](https://twitter.com/petele), [Sam Richard](https://twitter.com/snugug), and [Joe Medley](https://twitter.com/medleyjp).
+{% endAside %}
diff --git a/src/site/content/en/learn/pwa/installation-prompt/index.md b/src/site/content/en/learn/pwa/installation-prompt/index.md
new file mode 100644
index 00000000000..729d0d38ac0
--- /dev/null
+++ b/src/site/content/en/learn/pwa/installation-prompt/index.md
@@ -0,0 +1,152 @@
+---
+title: Installation prompt
+description: >
+  For sites that pass the PWA install criteria, the browser triggers an event to prompt the user to install it. The good news is that you can use this event to customize your prompt and invite users to install your app.
+authors:
+  - firt
+date: 2022-03-09
+updated: 2022-03-14
+---
+
+Users may not be familiar with the PWA install process. As the developer, you will understand when it is the right time to invite the user to install the app. The default browser installation prompts can also be enhanced. Let's check out the tools available.
+
+## Enhancing the install dialog
+
+Browsers provide default installation prompts when PWAs pass the install criteria. The browser uses the `name` and `icons` properties from your [Web App Manifest](/learn/pwa/web-app-manifest) to build the prompt.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/Ekh5btJPBqmnX85DonZK.png", alt="Microsoft Edge installation prompt.", width="800", height="426" %}
+
+Some browsers enhance the installation prompt experience using the [promotional fields in the manifest](/learn/pwa/web-app-manifest/#promotional-fields), including `description`, `categories`, and `screenshots`. For example, using Chrome on Android, if your PWA provides values for the `description` and `screenshots` fields, the installation dialog experience transforms from a small **Add to home screen** info bar to a bigger, more detailed dialog, similar to the install prompts from an app store.
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/eU7EiYjZKtVsBrQ3xfBz.mp4" %}
+
+See promotional fields in action:
+
+{% Glitch 'learn-pwa-web-app-manifest-promotional' %}
+
+## The beforeinstallprompt event
+
+The browser's installation prompts are the first step in getting  users to install your PWA. To implement your own install experience, your app still needs to pass the install criteria: when the browser detects that your app is installable, it fires the `beforeinstallprompt` event. You need to implement this event handler to customize the user's experience. Here's how:
+
+1. Listen for the `beforeinstallprompt` event.
+1. Save it (you'll need it later).
+1. Trigger it from your UI.
+
+{% Aside 'caution' %}
+Not all browsers support this event, and it has been moved from the Web App Manifest spec to a [separate incubator](https://wicg.github.io/manifest-incubations/).
+{% endAside %}
+
+Check the code below for an example of an event listener for the `beforeinstallprompt` event, its capture and later custom use.
+
+```js
+// This variable will save the event for later use.
+let deferredPrompt;
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevents the default mini-infobar or install dialog from appearing on mobile
+  e.preventDefault();
+  // Save the event because you'll need to trigger it later.
+  deferredPrompt = e;
+  // Show your customized install prompt for your PWA
+  // Your own UI doesn't have to be a single element, you
+  // can have buttons in different locations, or wait to prompt
+  // as part of a critical journey.
+  showInAppInstallPromotion();
+});
+```
+
+Then, if the user clicks on your customized install button, use the `deferredPrompt` that has previously been saved and call its `prompt()` method, because the user still needs to go through the browser's process to install your app. What you did was delay the event until you gave the user the right context to encourage them to install the PWA.
+
+Capturing the event gives you the opportunity to add hints and incentives for your users to install your app, and to choose to prompt for installation when you know the users are more engaged.
+
+{% Aside 'caution' %}
+You can only call `prompt()` on the deferred event once. If the user dismisses it, you need to wait until the `beforeinstallprompt` event is fired again.
+{% endAside %}
+
+The event will not fire if:
+
+- The user has already installed the current PWA (valid only for desktop and WebAPK on Android).
+- The app does not pass the [PWA installation criteria](/learn/pwa/installation/#installation-criteria).
+- The PWA is not installable on the current device for other reasons (for example, a device in kiosk mode or without permissions).
+
+{% Aside 'gotchas' %}
+Chrome and Edge on iOS and iPadOS do not support PWA installation, so the `beforeinstallprompt` event can't fire. In this case, the only option is to open the PWA using Safari, where it is installable from the [share, add to the home screen menu](/learn/pwa/installation/#installation-criteria).
+{% endAside %}
+
+### The best place to prompt
+
+Where to prompt depends on your application and when your users are most engaged with your content and services. When you capture the `beforeinstallprompt`, you can guide users through the reasons to keep using your app and the advantages they will gain from installing it.
+You can choose to display install hints anywhere in your app. Some common patterns are: in the side menu, after a critical user journey such as completing an order, or after a sign-up page. You can read more about this in [Patterns for promoting PWA installation](/promote-install/).
+
+### Gathering analytics
+
+Using analytics will help you to understand better where and when to present your prompts. You can use the `userChoice` property from the `beforeinstallprompt` event; `userChoice` is a promise that will resolve with the action the user took.
+
+```js
+// Gather the data from your custom install UI event listener
+installButton.addEventListener('click', async () => {
+  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
+  deferredPrompt.prompt();
+  // Find out whether the user confirmed the installation or not
+  const { outcome } = await deferredPrompt.userChoice;
+  // The deferredPrompt can only be used once.
+  deferredPrompt = null;
+  // Act on the user's choice
+  if (outcome === 'accepted') {
+    console.log('User accepted the install prompt.');
+  } else if (outcome === 'dismissed') {
+    console.log('User dismissed the install prompt');
+  }
+});
+```
+
+{% Aside %}
+Chromium browsers trigger the [`appinstalled`](https://developer.mozilla.org/docs/Web/API/Window/appinstalled_event) event on the `window` object. The event is fired when the user accepts the install, whether action was triggered by a custom install button or by the browser.
+{% endAside %}
+
+### See it in action
+
+Try the following sample in action on a Chromium browser (desktop or Android).
+
+{% Glitch 'mlearn-pwa-web-app-install-prompt' %}
+
+## Fallback
+
+If the browser doesn't support the `beforeinstallprompt` or the event does not fire, there is no other way to trigger the browser's installation prompt. However, on platforms that allow the user to install PWAs manually, like iOS, you can display these instructions to the user.
+
+You should only render these instructions in browser mode; other display options, such as `standalone` or `fullscreen` mean the user has already installed the app.
+
+To render the element only in browser mode, use the `display-mode` media query:
+
+```css
+#installInstructions {
+   display: none
+}
+@media (display-mode: browser) {
+   #installInstructions {
+     display: block
+   }
+}
+```
+
+## Codelab
+
+{% Aside 'codelab' %}
+Try it yourself with the [Make it installable](/codelab-make-installable/) codelab.
+{% endAside %}
+
+## Libraries
+
+Check out these libraries for help with rendering a custom install prompt:
+
+- [PWA Builder <pwa-install>](https://github.com/pwa-builder/pwa-install)
+- [PWA Installer Prompt for React](https://github.com/shnaveen25/react-pwa-installer-prompt)
+- [React PWA Install](https://www.npmjs.com/package/react-pwa-install)
+- [Vue PWA Install](https://github.com/Bartozzz/vue-pwa-install)
+- [Add to Home Screen](https://github.com/docluv/add-to-homescreen)
+
+## Resources
+
+- [Patterns for Promoting PWA installation](/promote-install/)
+- [How to provide your own in-app install experience](/customize-install/)
+- [MDN: Add to Home Screen](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Add_to_home_screen)
+- [Web Manifest Incubations](https://wicg.github.io/manifest-incubations/)
diff --git a/src/site/content/en/learn/pwa/installation/index.md b/src/site/content/en/learn/pwa/installation/index.md
new file mode 100644
index 00000000000..e53df531ba0
--- /dev/null
+++ b/src/site/content/en/learn/pwa/installation/index.md
@@ -0,0 +1,201 @@
+---
+title: Installation
+description: >
+  Installed apps are easy to access and can take advantage of some deeper integrations with the OS. Learn to make your PWA installable and gain those benefits.
+authors:
+  - firt
+date: 2022-01-10
+updated: 2022-02-23
+---
+
+Once the user installs your PWA, it will:
+
+- Have an icon in the launcher, home screen, start menu, or launchpad.
+- Appear as a result when a user searches for the app on their device.
+- Have a separate window within the operating system.
+- Have support for specific capabilities.
+
+{% Aside %}
+While installation differs per browser and operating system, you don't need to create any kind of package or executable for your PWA to be installed from a browser.
+{% endAside %}
+
+## Installation criteria
+
+Every browser has a criterion that marks when a website or web app is a Progressive Web App and can be installed for a standalone experience.
+The metadata for your PWA is set by a JSON-based file known as the Web App Manifest, which we will cover in detail in the [next module](/learn/pwa/web-app-manifest/).
+
+As a minimum requirement for installability, most browsers that support it use the Web App Manifest file and certain properties such as the name of the app, and configuration of the installed experience. An exception to this is Safari for macOS, which does not support installability.
+
+The requirements to allow installation differ among the different browsers, [this article](/install-criteria/) details the criteria for Google Chrome and includes links to requirements for other browsers.
+
+Because the test that a PWA meets installability requirements can take several seconds, installability itself may not be available as soon as a URLs response is received.
+
+{% Aside %}
+The process for uninstalling a PWA is different on each combination of operating system and browser. In most situations, the app can be uninstalled the same as any other platform-specific app; in other situations, the PWA window offers a menu with an uninstall option. Deleting the icon may not clear the storage that a PWA is using.
+{% endAside %}
+
+### Desktop installation
+
+Desktop PWA installation is currently supported by Google Chrome and Microsoft Edge on Linux, Windows, macOS, and Chromebooks. These browsers will show an install badge (icon) in the URL bar (see the image below), stating that the current site is installable.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/aNv7ezpI3iO6YpIlHt9J.png", alt="Chrome and Edge on desktop with the install badge in the URL bar", width="800", height="751" %}
+
+When a user is engaged with a site, they may see a popup such as the one below inviting users to install it as an app.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/YVHGuBQDUKGZXT7cGuHO.png", alt="Google chrome in-product help suggesting the PWA installation.", width="800", height="366" %}
+
+The browser's drop-down menu also includes an "Install <name of the app>" item that the user can use:
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/WBZ15ArNciZnrvJY6yUt.png", alt="Chrome and Edge menu items for PWA installation.", width="800", height="533" %}
+
+{% Aside %}
+Chromium-based browsers on desktop let you see all the installed PWAs with that browser using `about:apps`.
+{% endAside %}
+
+Only standalone and minimal-ui [display modes](/learn/pwa/app-design#display-modes) are supported on desktop operating systems.
+
+PWAs installed on desktops:
+
+- Have an icon in the Start menu or Start screen on Windows PCs, in the dock or desktop in Linux GUIs, in the macOS launchpad, or a Chromebook's app launcher.
+- Have an icon in app switchers and docks when the app is active, was recently used, or is opened in the background.
+- Appear in the app search, for example, search on Windows or Spotlight on macOS.
+- Can set a badge number on their icons, to indicate new notifications. This is done with the [Badging API](https://developer.mozilla.org/docs/Web/API/Badging_API).
+- Can set a contextual menu for the icon with [App Shortcuts](https://developer.mozilla.org/docs/Web/Manifest/shortcuts).
+- Can't be installed twice with the same browser.
+
+{% Aside %}
+Installation may unlock other capabilities that are not available for PWAs running within the browser's tab. We'll talk more about this in the [Capabilities Chapter](/learn/pwa/capabilities).
+{% endAside %}
+
+After installing an app on the desktop, users can navigate to `about:apps`, right-click on a PWA, and select "Start App when you Sign In" if they want your app to open automatically on startup.
+
+### iOS and iPadOS installation
+
+A browser prompt to install your PWA doesn't exit On iOS and iPadOS. In these platforms PWAs are also known as *home screen web apps*. These apps have to be added manually to the home screen via a menu that is available only in Safari. It is recommended that you add the tag [`apple-touch-icon`](https://developer.chrome.com/docs/lighthouse/pwa/apple-touch-icon/) to your html.
+To define the icon, include the path to your icon to your HTML `<head>` section, like this:
+
+```html
+<link rel="apple-touch-icon" href="/icons/ios.png">
+```
+ Safari will use that information to create the shortcut and if you don't provide a specific icon for Apple devices, the icon on the home screen will be a screenshot of your PWA when the user installed it.
+
+It's important to understand that PWA installation is only available if the user browses your website from Safari. Other browsers available in the App Store, such as Google Chrome, Firefox, Opera, or Microsoft Edge, cannot install a PWA on the home screen.
+
+The steps to add apps to the home screen are:
+
+1. Open the Share menu, available at the bottom or top of the browser.
+1. Click **Add to Home Screen**.
+1. Confirm the name of the app; the name is user-editable.
+1. Click **Add**.
+On iOS and iPadOS, bookmarks to websites and PWAs look the same on the home screen.
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/UhWxRAtIB6KQpbMYnDSe.mp4", autoplay="true", controls="true" %}
+
+On iOS and iPadOS, only the standalone [display mode](/learn/pwa/app-design) is supported. Therefore, if you use minimal UI mode, it will fall back to a browser shortcut; if you use fullscreen, it will fall back to standalone.
+
+{% Aside  'caution' %}
+On Apple devices, you can install the same PWA multiple times; each installation will have its own isolated storage, and it will be treated as a different app.
+{% endAside %}
+
+PWAs installed on iOS and iPadOS:
+
+- Appear in the home screen, Spotlight's search, Siri Suggestions, and App Library search.
+- Don't appear in App Gallery's categories folders.
+- Lack support for capabilities such as badging and app shortcuts.
+
+Incidentally, Safari uses a native technology known as [Web Clips](https://developer.apple.com/documentation/devicemanagement/webclip) to create the PWA icons in the operating system. They are just XML files in Apple's Property List format stored in the filesystem.
+
+{% Aside 'gotchas' %}
+When users use the PWA, they are not using an instance of the Safari app (like they use an instance of Chrome when doing so), they are using something known as *Web.app*, so you should expect slight differences between your PWA rendered in Safari and a PWA window. Both Safari and Web.app use the same core from WebKit and the same JavaScript runtime, but they run in different processes and may have different implementations, such as having isolated storage.
+{% endAside %}
+
+### Android installation
+
+On Android, PWA install prompts differ by device and browser. Users may see:
+
+- Variations in the wording of the menu item for install such as **Install** or **Add to Home Screen**.
+- Detailed installation dialogs.
+
+In the following image you can see two different versions of an installation dialog, a simple mini-infobar (left) and a detailed installation dialog (right).
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/qqVFLVmurQkr5RGauvGK.png", alt="Mini info bar and installation dialogs on Android.", width="800", height="417" %}
+
+Depending on the device and browser, your PWA will either be installed as a WebAPK, a shortcut, or a QuickApp.
+
+#### WebAPKs
+
+A WebAPK is an Android package (APK) created by a trusted provider of the user's device, typically in the cloud, on a WebAPK _minting server_. This method is used by Google Chrome on devices with Google Mobile Services (GMS) installed, and by Samsung Internet browser, but only on Samsung-manufactured devices, such as a Galaxy phone or tablet. Together, this accounts for the majority of Android users.
+
+When a user installs a PWA from Google Chrome and a WebAPK is used, the minting server "mints" (packages) and signs an APK for the PWA. That process takes time, but when the APK is ready, the browser installs that app silently on the user's device. Because trusted providers (Play Services or Samsung) signed the APK, the phone installs it without disabling security, as with any app coming from the store. There is no need for sideloading the app.
+
+PWAs installed via WebAPK:
+
+- Have an icon in the app launcher and home screen.
+- Appear on Settings, Apps.
+- Can have several capabilities, such as [badging](/badging-api/), [app shortcuts](/app-shortcuts/), and [capture links within the OS](/declarative-link-capturing/).
+- Can [update](/manifest-update) the icon and app's metadata.
+- Can't be installed twice.
+
+{% Aside 'gotchas' %}
+You, as a PWA developer, don't need to build or sign any package when a WebAPK is used. It's all handled transparently between the browser, device, and minting server.
+{% endAside %}
+
+#### Shortcuts
+
+While WebAPKs provide the best experience for Android users, they can't always be created. When they can't, browsers fall back to creating a website shortcut. Because Firefox, Microsoft Edge, Opera, Brave, and Samsung Internet (on non-Samsung devices) don't have minting servers they trust, they'll create shortcuts. Google Chrome will too if the minting service is unavailable or your PWA doesn't meet installation requirements.
+
+PWAs installed with shortcuts:
+
+- Have a browser-badged icon on the home screen (see the following examples).
+- Don't have an icon in the Launcher or on **Settings, Apps**.
+- Can't use any capabilities that require installation.
+- Can't update their icons and app metadata.
+- Can be installed many times, even using the same browser; when this happens, all will point to the same instance, and use the same storage.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/79QaL12M28cHhIrJLRyM.png", alt="A PWA installed with different browsers on the same device.", width="800", height="432" %}
+
+#### QuickApps
+
+Some manufacturers, including Huawei and ZTE, offer a platform known as [QuickApps](https://developer.huawei.com/consumer/en/huawei-quickApp/) to create light web apps similar to PWAs but using a different technology stack. Some browsers on these devices, like the Huawei browser, can install PWAs that get packaged as QuickApp, even if you are not using the QuickApp stack.
+
+When your PWA is installed as a QuickApp, users will get a similar experience to the one they would have with shortcuts, but with an icon badged with the QuickApps icon (a lightning image). The app will also be available to launch from the QuickApp Center.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/iHhjBvDriV4hZVnmVapW.png", alt="QuickApps on a Huawei or ZTE home screen.", width="800", height="497" %}
+
+## Prompting for installation
+
+In Chromium-based browsers on desktop and Android devices, it's possible to trigger the browser's installation dialog from your PWA. The [Installation Prompt chapter](/learn/pwa/installation-prompt), will cover [patterns for doing so](/promote-install/) and how to implement them.
+
+{% Aside 'warning' %}
+If you provide instructions to the user, remember that menu items' names vary by language.
+{% endAside %}
+
+## App catalogs and stores
+
+Your PWA can also be listed in app catalogs and stores to increase its reach and let users find it in the same place they find other apps.
+Most app catalogs and stores support technologies that let you publish a package that doesn't include the whole web app (such as your HTML and assets). These technologies let you create just a launcher to a standalone web rendering engine that will load the app and let the service worker cache the necessary assets.
+
+The app catalogs and stores that support publishing a PWA are:
+
+- [Google Play Store for Android and ChromeOS](https://chromeos.dev/en/publish/pwa-in-play), using a [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/).
+- Apple App Store for iOS, macOS, and iPadOS, using WKWebView and [App-Bound Domains](https://webkit.org/blog/10882/app-bound-domains/).
+- [Microsoft Store for Windows 10 and 11](https://docs.microsoft.com/en-us/windows/uwp/publish/pwa/overview), using APPX packages.
+- [Samsung Galaxy Store](https://samsunginternet.github.io/introducing-progressive-web-apps-to-samsung-galaxy-store/), using the Samsung WebAPK minting server.
+- Huawei AppGallery, using a [QuickApp container for your HTML application](https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-h5-to-quickapp-introduction-0000001150075595).
+
+If you want to learn more about how to publish a PWA to app catalogs and stores, check out [BubbleWrap CLI](https://github.com/GoogleChromeLabs/bubblewrap) and [PWA Builder](https://pwabuilder.com).
+
+{% Aside 'warning' %}
+Some app catalogs and stores have technical or business requirements that before your PWA is accepted for publication. Check each store's requirements before starting.
+{% endAside %}
+
+## Resources
+
+- [What does it take to be installable](/install-criteria/)
+- [WebAPKs on Android](/webapks/)
+- [Patterns for promoting PWA installation](/promote-install/)
+- [Using a PWA in your Android app](/using-a-pwa-in-your-android-app/)
+- [List your Progressive Web App in Google Play](https://chromeos.dev/en/publish/pwa-in-play)
+- [Submit your PWA to the Microsoft Store](https://docs.microsoft.com/en-us/windows/uwp/publish/pwa/overview)
+- [Publishing a PWA to App Store](https://firt.dev/pwa-stores/)
+- [WebKit: App-Bound Domains](https://webkit.org/blog/10882/app-bound-domains/)
diff --git a/src/site/content/en/learn/pwa/offline-data/index.md b/src/site/content/en/learn/pwa/offline-data/index.md
new file mode 100644
index 00000000000..359990d6ee2
--- /dev/null
+++ b/src/site/content/en/learn/pwa/offline-data/index.md
@@ -0,0 +1,212 @@
+---
+title: Offline data
+description: >
+  To build a solid offline experience you need to implement storage management. Tools like IndexedDB, Cache, Storage Manager, Persistent Storage, and Content Indexing can help.
+authors:
+  - firt
+date: 2022-01-10
+---
+
+To build a solid offline experience, your PWA needs storage management. In the [caching chapter](/learn/pwa/caching) you learned that cache storage is one option to save data on a device. In this chapter, we'll show you how to manage offline data, including data persistence, limits, and the available tools.
+
+## Storage
+Storage is not just about files and assets, but can include other types of data. On all browsers that support PWAs, the following APIs are available for on-device storage:
+
+- [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API): A NoSQL object storage option for structured data and blobs (binary data).
+- WebStorage: A way to store key/value string pairs, using local storage or session storage. It's not available within a service worker context. This API is synchronous so it's not recommended for complex data storage.
+- Cache Storage: As covered in the [Caching module](/learn/pwa/caching).
+
+{% Aside %}
+On supported platforms, you can also use the [FileSystem Access API](/file-system-access/) to read and write to and from the user's local filesystem, with permission. Since you are writing files directly to the file system the browser won't assign the data to your origin's quota, and any other application can interact with those files, if the user allows it.
+{% endAside %}
+
+You can manage all device storage with the [Storage Manager API](https://developer.mozilla.org/docs/Web/API/StorageManager) on supported platforms.
+The Cache Storage API and IndexedDB provide asynchronous access to persistent storage for PWAs and can be accessed from the main thread, web workers, and service workers. Both play essential roles in making PWAs work reliably when the network is flaky or non-existent. But when should you use each?
+
+Use the *Cache Storage API* for network resources, things you'd access by requesting them via a URL, such as HTML, CSS, JavaScript, images, videos, and audio.
+
+Use *IndexedDB* to store structured data. This includes data that needs to be searchable or combinable in a NoSQL-like manner, or other data such as user-specific data that doesn't necessarily match a URL request. Note that IndexedDB isn't designed for full-text search.
+
+{% Aside 'caution' %}
+All storage, no matter how you use it, is tied not just to the PWA it is used for, but to the PWA's origin, too. Therefore, if you deploy more than one PWA to an origin (which is not recommended), keep in mind that IndexedDB databases, cache storage, and the other browser storage will share quotas across all service workers and PWAs.
+{% endAside %}
+
+## IndexedDB
+To use [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API), first open a database. This creates a new database if one does not exist.
+IndexedDB is an asynchronous API, but it takes a callback instead of returning a Promise. The following example uses Jake Archibald's [idb library](https://github.com/jakearchibald/idb), which is a tiny, Promise wrapper for IndexedDB. Helper libraries are not required to use IndexedDB, but if you want to use the Promise syntax the `idb` library is an option.
+
+The following example creates a database to hold cooking recipes.
+
+### Creating and opening a database
+
+To open a database:
+
+1. Use the `openDB` function to create a new IndexedDB database called `cookbook`. Because IndexedDB databases are versioned, you need to increase the version number whenever you make changes to the database structure. The second parameter is the database version. In the example is set to 1.
+1. An initialization object containing an `upgrade()` callback is passed to `openDB()`. The callback function is called when the database is installed for the first time or when it upgrades to a new version. This function is the only place where actions can happen. Actions might include creating new object stores (the structures IndexedDB uses to organize data), or indexes (that you'd like to search on). This is also where data migration should happen. Typically, the `upgrade()` function contains a `switch` statement without `break` statements to allow each step to happen in order, based on what the old version of the database is.
+
+```js
+import { openDB } from 'idb';
+
+async function createDB() {
+  // Using https://github.com/jakearchibald/idb
+  const db = await openDB('cookbook', 1, {
+    upgrade(db, oldVersion, newVersion, transaction) {
+      // Switch over the oldVersion, *without breaks*, to allow the database to be incrementally upgraded.
+    switch(oldVersion) {
+     case 0:
+       // Placeholder to execute when database is created (oldVersion is 0)
+     case 1:
+       // Create a store of objects
+       const store = db.createObjectStore('recipes', {
+         // The `id` property of the object will be the key, and be incremented automatically
+           autoIncrement: true,
+           keyPath: 'id'
+       });
+       // Create an index called `name` based on the `type` property of objects in the store
+       store.createIndex('type', 'type');
+     }
+   }
+  });
+}
+```
+
+The example creates an object store inside the `cookbook` database called `recipes`, with the `id` property set as the store's index key and creates another index called `type`, based on the `type` property.
+
+Let's take a look at the object store that's just been created. After adding recipes to the object store and opening DevTools on Chromium-based browsers or Web Inspector on Safari, this is what you should expect to see:
+
+{% Img src="image/SeARmcA1EicLXagFnVOe0ou9cqK2/OdDiXwJBMrsOgS1Phoz7.png", alt="Safari and Chrome showing IndexedDB contents.", width="800", height="538" %}
+
+### Adding data
+
+IndexedDB uses transactions. Transactions group actions together, so they happen as a unit. They help ensure that the database is always in a consistent state. They're also critical, if you have multiple copies of your app running, for preventing simultaneous writing to the same data.
+To add data:
+
+1. Start a transaction with the `mode` set to `readwrite`.
+1. Get the object store, where you'll add data.
+1. Call `add()` with the data you are saving. The method receives data in dictionary form (as key/value pairs) and adds it to the object store.  The dictionary must be cloneable using [Structured Cloning](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). If you wanted to update an existing object, you'd call the `put()` method instead.
+
+
+Transactions have a `done` promise that resolves when the transaction completes successfully, or rejects with a [transaction error](https://developer.mozilla.org/docs/Web/API/IDBTransaction/error).
+
+As the [IDB library documentation](https://www.npmjs.com/package/idb?activeTab=readme) explains, if you're writing to the database, `tx.done` is the signal that everything was successfully committed to the database. However, it's beneficial to await individual operations so that you can see any errors that cause the transaction to fail.
+
+```js
+// Using https://github.com/jakearchibald/idb
+async function addData() {
+  const cookies = {
+      name: "Chocolate chips cookies",
+      type: "dessert"
+	    cook_time_minutes: 25
+  };
+  const tx = await db.transaction('recipes', 'readwrite');
+  const store = tx.objectStore('recipes');
+  store.add(cookies);
+  await tx.done;
+}
+```
+
+Once you've added the cookies, the recipe will be in the database with other recipes. The ID is automatically set and incremented by indexedDB. If you run this code twice you will have two identical cookie entries.
+
+{% Glitch 'learn-pwa-offline-data-saving' %}
+
+### Retrieving data
+
+Here is how you get data from IndexedDB:
+
+1. Start a transaction and specify the object store or stores, and optionally transaction type.
+1. Call `objectStore()` from that transaction. Make sure you specify the object store name.
+1. Call `get()` with the key you want to get. By default the store uses its key as an index.
+
+```js
+// Using https://github.com/jakearchibald/idb
+async function getData() {
+  const tx = await db.transaction('recipes', 'readonly')
+  const store = tx.objectStore('recipes');
+// Because in our case the `id` is the key, we would
+// have to know in advance the value of the id to
+// retrieve the record
+  const value = await store.get([id]);
+}
+```
+
+{% Glitch 'learn-pwa-offline-data-get' %}
+
+{% Aside 'codelab' %}
+[Progressive Web Apps: IndexedDB](https://developers.google.com/codelabs/pwa-training/pwa03--indexeddb#0).
+{% endAside %}
+
+## The storage manager
+
+Knowing how to manage your PWA's storage is particularly important to storing and streaming network responses correctly.
+
+Storage capacity is shared among all storage options, including Cache Storage, IndexedDB, Web Storage, and even the service worker file and its dependencies.
+However, the amount of storage available varies from browser to browser. You're not likely to run out; sites could store megabytes and even gigabytes of data on some browsers. Chrome, for instance, allows the browser to use up to 80% of the total disk space, and an individual origin can use up to 60% of the entire disk space. For browsers that support the Storage API, you can know how much storage is still available for your app, its quota, and its use.
+The following example uses the Storage API to get estimate quota and usage, then calculates the percentage used and remaining bytes. Note that `navigator.storage` returns an instance of `StorageManager`. There is a separate `Storage` interface and it is easy to get them confused.
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Number of bytes used.
+  // quota.quota -> Maximum number of bytes available.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`You've used ${percentageUsed}% of the available storage.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`You can write up to ${remaining} more bytes.`);
+}
+```
+
+{% Glitch 'learn-pwa-offline-data-storage' %}
+
+In Chromium DevTools, you can see your site's quota and how much storage is used broken down by what's using it, by opening the **Storage** section in the **Application** tab.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/NAXXvUU099wqtSbzvt9m.png", alt="Chrome DevTools in Application, Clear Storage section", width="800", height="567" %}
+
+Firefox and Safari don't offer a summary screen for seeing all storage quota and usage for the current origin.
+
+### Data persistence
+
+You can ask the browser for persistent storage on compatible platforms to avoid automatic data eviction after inactivity or on storage pressure. If granted, the browser will never evict data from storage. This protection includes the service worker registration, IndexedDB databases, and files in cache storage. Note that users are always in charge, and they can delete the storage at any time, even if the browser has granted persistent storage.
+
+To request persistent storage, call the `StorageManager.persist()`. As before, the `StorageManager` interface is access through the `navigator.storage` property.
+
+```js
+async function persistData() {
+  if (navigator.storage && navigator.storage.persist) {
+    const result = await navigator.storage.persist();
+    console.log(`Data persisted: ${result}`);
+}
+```
+
+You can also check if persistent storage is already granted in the current origin by calling `StorageManager.persisted()`. Firefox requests permission from the user to use persistent storage. Chromium-based browsers give or deny persistence based on a [heuristic](/persistent-storage/#chrome-and-other-chromium-based-browsers) to determine the importance of the content for the user. One criteria for Google Chrome is, for example, PWA installation. If the user has installed an icon for the PWA in the operating system, the browser may grant persistent storage.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/W89sHSgKqkh9xV8nVD0C.png", alt="Mozilla Firefox asking the user for storage persistence permission.", width="800", height="279" %}
+
+{% Aside 'caution' %}
+The `StorageManager` interface has `persist()` and `persisted()` methods that both return Promises that resolve with a boolean. The `persist()` function asks for enabling persistent storage and returns the result, and `persisted()` returns the current state without affecting it.
+{% endAside %}
+
+{% Aside %}
+[Content Indexing API](/content-indexing-api/) is an experimental API that's available in some Chromium browsers which lets your PWA expose the pieces of content that you have indexed offline.
+If you register your offline-ready content using this API, the user will see them in Downloads within the browser even when there is no network connection.
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/b1o5a6iCgjqOVMVfcbuj.png", alt="The Content Indexing API results available in Chrome for Android.", width="800", height="1480" %}
+{% endAside %}
+
+## API Browser support
+
+### Web Storage
+{% BrowserCompat 'api.Window.localStorage' %}
+
+### File System Access
+{% BrowserCompat 'api.FileSystemHandle' %}
+
+### Storage Manager
+{% BrowserCompat 'api.StorageManager' %}
+
+##  Resources
+
+- [Storage on the Web](/storage-for-the-web/)
+- [FileSystem Access API](/file-system-access/)
+- [Persistent Storage](/persistent-storage/)
+- [MDN: Storage API](https://developer.mozilla.org/docs/Web/API/Storage_API)
+- [MDN: Client-side storage](https://developer.mozilla.org/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
+- [Content Indexing](/content-indexing-api/)
diff --git a/src/site/content/en/learn/pwa/os-integration/index.md b/src/site/content/en/learn/pwa/os-integration/index.md
new file mode 100644
index 00000000000..b82155abccf
--- /dev/null
+++ b/src/site/content/en/learn/pwa/os-integration/index.md
@@ -0,0 +1,259 @@
+---
+title: OS Integration
+authors:
+  - firt
+description: >
+  Your PWA now works outside the browser. This chapter covers how to integrate further with the operating system once users install your app.
+date: 2022-04-15
+---
+
+Web apps have a big reach. They run on multiple platforms. They are easy to share via links. But traditionally they lacked integration with the operating system. Not long ago they were not even installable. Luckily that has changed and now we can take advantage of that integration to add useful features to our PWAs. Let's explore some of those options.
+
+## Working with the file system
+
+A typical user workflow using files looks like this:
+* Pick a file or folder from the device and open it directly.
+* Make changes to those files or folders, and save the changes back directly.
+* Make new files and folders.
+
+Before the [File System Access API](/file-system-access/), web apps couldn't do this. Opening files required a file upload, saving changes required users to download them, and the web had no access at all to make new files and folders in the user's filesystem.
+
+### Opening a file
+
+To open a file we use the `window.showOpenFilePicker()` method. Note that this method requires a user gesture, such as a button click. Here is the rest of the setup for opening a file:
+1. Capture the [file handle](https://developer.mozilla.org/docs/Web/API/FileSystemHandle) from the file system access's file picker API. This gives you basic information about the file.
+2. Using the handle's `getFile()` method, you'll get a special kind of [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) called a [`File`](https://developer.mozilla.org/docs/Web/API/File) that includes additional read-only properties (such as name and last modified date) about the file. Because it's a Blob, Blob methods can be called on it, such as `text()`, to get its content.
+
+```js
+// Have the user select a file.
+const [ handle ] = await window.showOpenFilePicker();
+// Get the File object from the handle.
+const file = await handle.getFile();
+// Get the file content.
+// Also available, slice(), stream(), arrayBuffer()
+const content = await file.text();
+```
+
+### Saving changes
+
+To save changes to a file, you also need a user gesture; then:
+1. Use the file handle to create a [`FileSystemWritableFileStream`](https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream).
+1. Make changes to the stream. This won't update the file in place; instead, a temporary file is typically created.
+1. Finally, when you've finished making changes, you close the stream, which moves the changes from temporary to permanent.
+
+Let's see this in code:
+
+```js
+// Make a writable stream from the handle.
+const writable = await handle.createWritable();
+// Write the contents of the file to the stream.
+await writable.write(contents);
+// Close the file and write the contents to disk.
+await writable.close();
+```
+
+{% Glitch 'mlearn-pwa-os-integration-file' %}
+
+{% Aside 'caution' %}
+Safari implements the File System Access API, not for the public system, but as an [origin-private sandbox](/file-system-access/#accessing-files-optimized-for-performance-from-the-origin-private-file-system). You can only read and write files in that virtual file system using this API.
+{% endAside %}
+
+## File handling
+
+The File System Access API lets you open files from within your app, but what about the other way around? Users want to set their favorite app as their default to open files with. The [file handling API](/file-handling/) is an experimental API that lets installed PWAs:
+Register as a file handler on a user's device, specifying the MIME type and file extension that your PWA supports in your web app manifest. You can specify custom file icons for your supported extensions.
+
+Once registered, your installed PWA will show up as an option from the user's file system, allowing them to open the file directly into it.
+Here is an example of the manifest setup for a PWA to read text files:
+```json
+...
+"file_handlers": [
+     {
+         "action": "/open-file",
+         "accept": {
+             "text/*": [".txt"]
+         }
+     }
+]
+...
+```
+
+
+## URL handling
+
+With URL handling, your PWA can capture links that are part of its scope from the operating system and render them within a PWA window, instead of the default browser's tab. For example, if you receive a message linking to the PWA, or click on a deep link (a URL that points to a specific piece of content) in your PWA, the content will open in a standalone window.
+
+This behavior is automatically available on Android when WebAPK is used, such as when users install a PWA with Chrome. It's impossible to capture URLs on PWAs installed on iOS and iPadOS from Safari.
+
+For desktop browsers, the web browser community created a new spec. This spec is currently [experimental](/learn/pwa/experimental); it adds a new manifest file member: `url_handlers`. This property expects an array of origins that the PWA wants to capture. The origin of your PWA will be granted automatically, and each other origin must accept that handling operating through a file named `web-app-origin-association`.
+For example, if your PWA's manifest is hosted on the web.dev, and you want to add the app.web.dev origin, it would look like this:
+
+```json
+"url_handlers": [
+    {"origin": "https://app.web.dev"},
+]
+```
+In this case, the browser will check if a file exists at `app.web.dev/.well-known/web-app-origin-association`, accepting the URL handling from the PWA scope URL. The developer has to create this file. In the following example, the file looks like this:
+
+```json
+{
+    "web_apps": [
+        {
+            "manifest": "/mypwa/app.webmanifest",
+            "details": {
+                "paths": [ "/*" ]
+            }
+        }
+    ]
+}
+```
+
+{% Aside 'gotchas' %}
+On Android with WebAPKs, PWAs are automatically registered as handlers for the manifest's scope with an Android intent filter, and it is not possible to add more origins or scopes to it. For iOS and iPadOS, you can only handle URLs with PWAs published in the AppStore, such as those created with [PWABuilder](https://pwabuilder.com).
+{% endAside %}
+
+## URL protocol handling
+
+URL handling works with standard `https` protocol URLs, but it is possible to use custom URI-schemes, such as `pwa://`. In several operating systems, installed apps gain this ability by apps registering their schemes.
+
+For PWA, this capability is enabled using the [URL protocol handler API](/url-protocol-handler/), available only on desktop devices. You can only allow custom protocols for mobile devices by distributing your PWA on app stores.
+
+{% Aside 'caution' %}
+For PWAs using the URL protocol handler API, the protocol name has to be one of the [safelisted schemes](https://html.spec.whatwg.org/multipage/system-state.html#safelisted-scheme), or it must use a `web+` prefix. So, in our example, a link should point to `web+pwa://` to open our PWA.
+{% endAside %}
+
+To register, you can use the [registerProtocolHandler() method](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler), or use the `protocol_handlers` member in your manifest, with the desired scheme and the URL you want to load in your PWA's context, such as:
+
+```json
+...
+{
+  "protocol_handlers": [
+    {
+      "protocol": "web+pwa",
+      "url": "/from-protocol?value=%s"
+    },
+  ]
+}
+...
+```
+
+You can route the URL `from-protocol` to the correct handler and get the query string `value` in your PWA. The `%s` is a placeholder for the escaped URL that triggered the operation, so if you have a link somewhere such as `<a href="web+pwa://testing">`, your PWA will open `/from-protocol?value=testing`.
+
+### Calling other apps
+
+You can use URI schemes to connect to any other installed app (PWA or not) in users' devices on every platform. You just need to create a link or use `navigator.href` and point to the URI scheme you want, passing the arguments in URL-escaped form.
+
+You can use well known standard schemes, such as `tel:` for phone calls, `mailto:` for email sending, or `sms:` for text messaging; or you can learn about other apps' URL schemes, for example from well known messaging, maps, navigation, online meetings, social networks, and app stores.
+
+{% Aside %}
+Instead of using private URI schemes to communicate with messaging and social media apps, you can use the generic Web Share API
+{% endAside %}
+
+## Web Share
+{% BrowserCompat 'api.Navigator.share' %}
+
+With the [Web Share API](https://developer.mozilla.org/docs/Web/API/Web_Share_API), your PWA can send content to other installed apps in the device through the shared channel.
+
+The API is only available on operating systems with a `share` mechanism, including Android, iOS, iPadOS, Windows, and ChromeOS.
+You can share an object containing:
+
+* Text (`title` and `text` properties)
+* A URL (`url` property)
+* Files (`files` property).
+
+To check if the current device can share, for simple data, like text, you check for the presence of the `navigator.share()` method, to share files you check for the presence of the `navigator.canShare()` method.
+
+You request the share action by calling [`navigator.share(objectToShare)`](https://developer.mozilla.org/docs/Web/API/Navigator/share). That call returns a Promise that resolves with `undefined` or rejects with an exception.
+
+{% Glitch 'mlearn-pwa-os-integration-web-share' %}
+
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/wpB9v8QQTw4wB1iEGqvT.png", alt="Chrome on Android and Safari on iOS opening the Share Sheet thanks to Web Share.", width="800", height="661" %}
+
+## Web Share Target
+
+[Web Share Target API](/web-share-target/) lets your PWA be a target of a share operation from another app on that device whether it is a PWA or not. Your PWA receives the data shared by another app.
+
+It's currently available on Android with WebAPK and ChromeOS, and it works only after the user has installed your PWA. The browser registers the share target within the operating system when the app is installed.
+
+You set up web share target in the manifest with the `share_target` member defined in the [Web Share Target draft spec](https://w3c.github.io/web-share-target/). `share_target` is set to an object with some properties:
+
+`action`
+: URL that will be loaded in a PWA window that is expected to receive the shared data.
+`method`
+: HTTP verb method will be used for the action, such as `GET`, `POST`, or `PUT`.
+`enctype`
+: (Optional) Encoding type for the parameters, by default is `application/x-www-form-urlencoded`, but it can also be set as `multipart/form-data` for methods such as `POST`.
+`params`
+: An object that will map share data (from the keys: `title`, `text`, `url` and `files` from Web Share) to arguments that the browser will pass in the URL (on `method: 'GET'`) or in the body of the request using the selected encoding.
+
+
+{% Aside %}
+You can parse a `POST` request server-side or within your service worker if you want to avoid a trip to the network. Check [this sample](/web-share-target/#processing-post-shares) for further details.
+{% endAside %}
+
+For example, you can define for your PWA that you want to receive shared data (title and url only) by adding in your manifest:
+
+```json
+...
+"share_target": {
+   "action": "/receive-share/",
+   "method": "GET",
+   "params": {
+      "title": "shared_title",
+      "url": "shared_url"
+   }
+}
+...
+```
+From the previous sample, if any app in the system is sharing a URL with a title, and the user picks your PWA from the dialog, the browser will create a new navigation to your origin's `/receive-share/?shared_title=AAA&shared_url=BBB`, where AAA is the shared title, and BBB is the shared URL. You can use JavaScript to read that data from the `window.location` string by parsing it with the [`URL` constructor](https://developer.mozilla.org/docs/Web/API/URL/URL).
+
+The browser will use the PWA name and icon from your manifest to feed the operating system's share entry. You can't pick a different set for that purpose.
+
+{% Aside %}
+Make sure the page that handles the shared data is accessible offline. You don't want users choosing your app and finding an error because they don't have a connection at the moment.
+{% endAside %}
+
+For more detailed examples and how to receive files, check [Receiving shared data with the Web Share Target API](/web-share-target/)
+
+## Contact Picker
+{% BrowserCompat 'api.ContactsManager' %}
+
+With the [Contact Picker API](https://developer.mozilla.org/docs/Web/API/Contact_Picker_API), you can request the device to render a native dialog with all the user's contacts so the user can choose one or more. Your PWA can then receive the data you want from those contacts.
+
+The Contact Picker API is mainly available on mobile devices, and everything is done through the [`navigator.contacts`](https://developer.mozilla.org/docs/Web/API/Navigator/contacts) interface on compatible platforms.
+
+You can request the available properties to query with `navigator.contacts.getProperties()`, and request a single or multiple contact selection with a list of desired properties.
+
+Some sample properties are `name`, `email`, `address`, and `tel`. When you ask the user to pick one or more contacts, you can call `navigator.contacts.select(properties)`, passing an array of properties you want to get in return.
+
+{% Aside 'caution' %}
+The API doesn't guarantee that the returned objects will have all the requested properties, so you should recheck for their presence.
+{% endAside %}
+
+The following sample will list the contacts received by the picker.
+
+```js
+async function getContacts() {
+   const properties = ['name', 'email', 'tel'];
+   const options = { multiple: true };
+   try {
+     const contacts = await navigator.contacts.select(properties, options);
+     console.log(contacts);
+   } catch (ex) {
+     // Handle any errors here.
+   }
+}
+```
+
+{% Glitch 'mlearn-pwa-os-integration-contacts' %}
+
+##  Resources
+
+- [The File System Access API: simplifying access to local files](/file-system-access/)
+- [Let installed web applications be file handlers](/file-handling/)
+- [Handle files in Progressive Web Apps](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files)
+- [Integrate with the OS Sharing UI with the Web Share API](/web-share/)
+- [Share content with other apps](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/share)
+- [Receiving shared data with the Web Share Target API](/web-share-target/)
+- [A contact picker for the web](/contact-picker/)
diff --git a/src/site/content/en/learn/pwa/progressive-web-apps/index.md b/src/site/content/en/learn/pwa/progressive-web-apps/index.md
new file mode 100644
index 00000000000..6342445054f
--- /dev/null
+++ b/src/site/content/en/learn/pwa/progressive-web-apps/index.md
@@ -0,0 +1,288 @@
+---
+title: Progressive Web Apps
+description: >
+  Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.
+authors:
+  - firt
+date: 2021-11-03
+updated: 2022-05-16
+---
+
+A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more reliable experience,
+uses new capabilities to provide a more integrated experience, and can be installed.
+And, because it's a web app, it can reach anyone, anywhere, on any device, all with a single codebase.
+Once installed, a PWA looks like any other app, specifically:
+
+- It has an icon on the home screen, app launcher, launchpad, or start menu.
+- It appears when you search for apps on the device.
+- It opens in a standalone window, wholly separated from a browser's user interface.
+- It has access to higher levels of integration with the OS, for example, URL handling or title bar customization.
+- It works offline.
+
+## The web platform
+
+The web is an incredible platform.
+Its mix of universality across devices and operating systems,
+its user-centered security model,
+and the fact that no single company controls its specification or implementation make it a powerful platform
+for delivering software.
+
+Combined with the web's inherent linkability,
+it's possible to search across it and share what you've found with anyone, anywhere.
+Whenever you go to a website,
+it's the latest version the publisher deployed,
+and your experience with that site can be as temporary or as permanent as you'd like.
+
+Web applications can reach anyone, anywhere, on any device with a single codebase.
+For developers, the web also offers a transparent and straightforward deploying mechanism.
+There is no need for packaging, no extra content review, or delays on updates.
+Users always get the latest version when they visit your app.
+With new capabilities and techniques, a web app can now allow you to interact or see content even when offline,
+a hurdle that was impossible to overcome a few years ago.
+
+## Platform-specific apps
+
+Platform-specific apps, on both mobile and desktop,
+are known for being rich and reliable. They're ever-present, on home screens, docks, and taskbars.
+They work regardless of network connection, and launch in their own standalone experience.
+They can read and write files from the local file system,
+access hardware connected via USB, serial, or Bluetooth,
+and interact with data stored on your devices, such as contacts and calendar events.
+In platform-specific applications, you can take pictures, play songs listed on the home screen, or control media playback while in another app.
+These applications feel like part of the device they run on.
+
+{% Aside %}
+In modern mobile operating systems,
+platform-specific apps are installed mostly from app stores,
+with rules and limitations on who can publish and what can be published for their users.
+These apps are typically shipped as a large, indivisible package, and every update needs re-packaging, re-signing, re-approval, and on-device re-installation.
+{% endAside %}
+
+A challenge for platform-specific apps is that they are not compatible with multiple platforms and devices,
+so it's not easy, if even possible,
+to move an Android app to iOS or an iOS to Windows or ChromeOS without creating a new app from scratch.
+
+## Bringing the best of both worlds
+
+If you think about platform apps and web apps in terms of capabilities and reach,
+platform apps represent the best of capabilities,
+whereas web apps represent the best of reach.
+Progressive Web Apps sit at the intersection of the capabilities of platform apps and the reach of web apps.
+A Progressive Web App includes features from both worlds.
+
+<div class="switcher">
+<div>
+
+### Web
+
+- Linkability
+- Accessible by default
+- Ubiquitous
+- Easy to Deploy
+- Easy to Update
+- Everyone can publish
+
+</div>
+<div>
+
+### Platform apps
+
+- Offline-capable
+- High performance
+- Device Integration
+- Standalone experience
+- Installed Icon
+- Rich and reliable
+</div>
+</div>
+
+{% Aside %}
+People tend to think of Progressive Web Apps as an app that the user can install from a browser instead of an app store.
+However, a PWA can be listed in many app stores today as an optional distribution channel,
+including Google Play Store (for Android and ChromeOS), Microsoft Store (for Windows 10 and 11),
+and Apple AppStore (for iOS, iPadOS, and macOS). For these cases, you must follow all store rules and requirements,
+but you will still get some of the advantages of a PWA.
+{% endAside %}
+
+## Adoption has its benefits
+
+Hulu, a video streaming service in the USA,
+created a Progressive Web App version of their experience to replace their desktop apps which had poor user reviews and poor usage.
+As shared at [Google I/O 2019](https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html),
+one developer could research and implement this experience from their existing web application in two weeks.
+
+Within five months, 96% of their legacy app users had adopted the PWA,
+with a 27% increase in return visits and a 5.5% increase in engagement.
+Because it's in the launcher and on taskbars, PWAs are easier to return to than if they just lived in a tab.
+
+[JD.ID](/jdid/), an e-commerce platform in Indonesia providing delivery services for many products,
+wanted to expand its online presence by focusing on performance and a network-independent solid experience for their PWA.
+With this enhanced experience, they increased their overall mobile conversion rate by 53%,
+200% for installed users, and increased their daily active users by 26%.
+
+[Clipchamp](/clipchamp/) is an in-browser,
+desktop-class online video editor that empowers anyone to tell stories worth sharing through video.
+They saw 9% higher user retention with their PWA versus their standard desktop app users and have seen their PWA installations increasing at a rate of 97% each month in its first five months launched.
+
+Corel Corporation's [Gravit Designer](/gravit-designer/) is a powerful,
+desktop-class vector design tool that serves tens of thousands of daily active users demanding rich,
+affordable, accessible vector illustration software.
+Since adding a PWA as an install option for users,
+they've seen PWA users are 24% more active,
+the PWA accounts for 31% more repeat users, and PWA users are 2.5 times more likely to purchase Gravit Designer PRO,
+as compared to their other platforms and install options.
+
+{% Aside %}
+Many other companies have implemented PWA and seen a benefit.
+Large companies have already published PWAs on various products, including Apple (AppStore Connect, Feedback Assistant), Microsoft (Office 365, Windows 365), Google (Duo, YouTube Music, Drive), Amazon (Luna), Facebook (Instagram Lite, Gaming).
+{% endAside %}
+
+### The streaming game changer
+
+A great example of the power of Progressive Web Apps is the industry of streaming platforms,
+including cloud gaming and remote computing.
+Since 2021, most cloud game providers have launched Progressive Web Apps,
+letting you play console games from any device and just a browser or a PWA installation:
+iPhone, Android, iPad, laptops, Macs, or PCs.
+Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now, and BlueStacks X offer cloud gaming solutions over the browser as PWAs.
+They all provide a great experience with performance close to native on all platforms thanks to web technologies such as WebRTC, WebAssembly, and GamePad APIs.
+
+## Challenges
+
+Having covered the advantages of using the web platform to publish PWAs,
+it's also important to be aware of the challenges you may face.
+
+### Cross-browser compatibility
+
+Apple is a crucial company for the multi-device world,
+owning iOS, iPadOS, macOS, and Safari.
+While Apple has never used the term PWA in public,
+they've been supporting the technologies to make a PWA installable and offline-capable since 2018 on Safari for iPhones and iPads.
+
+However, Apple's implementation of the PWA specs misses many features possessed by other browsers,
+in particular browsers powered by the Chromium engine.
+
+In the middle, we also have Firefox and its Gecko engine with implementations including more PWA specs on Android,
+and fewer installation capabilities on desktop.
+
+Limitations include the lack of push notifications, integration APIs (such as Web Bluetooth or WebNFC),
+and installation promotion techniques that help users know they can install the current website to get an app experience.
+In addition, there are several bugs with implemented features.
+
+As with all web development, testing your experience on every platform is mandatory when releasing your PWA,
+and when a major new browser or OS version is released.
+You should always provide fallback solutions or alternative experiences when a feature is not available.
+
+### Awareness of PWAs
+
+As a PWA developer,
+you will probably encounter an awareness problem,
+both on the business and user sides.
+Some business owners won't know about PWAs or will have misconceptions about the power and challenges of Progressive Web Apps.
+
+When you publish a PWA,
+your next challenge is ensuring users understand that the website is installable, leading to an installed app experience.
+
+The installation challenge is more significant on some platforms, such as iOS and iPadOS,
+and sometimes UX designers include screens that explain to the user how to install the app.
+
+## Compatibility
+
+You need to remember that a Progressive Web App is just a web app,
+so content and services are running on top of standard specs and protocols.
+Therefore, a PWA technically runs everywhere the web runs; you don't need the platform to be compatible with any "PWA spec."
+
+However, when we are talking about PWA and compatibility, typically, we are thinking about the capabilities to cross the boundaries of the browser and online-only contexts: icon installation and offline support.
+
+{% Aside %}
+A PWA should work everywhere, even when the icon installation or the offline support capabilities are unavailable.
+Always plan your PWA to work without capabilities by checking support and offering fallback solutions.
+{% endAside %}
+
+On top of the classic web platform support, let's check the support for basic app functionality, such as icon installation and offline capabilities.
+
+<ul class="stats auto-grid bg-state-good-bg color-state-good-text">
+  <div class="stats__item flow">
+    <p class="font-brand text-size-6">
+      97
+      <sub>%</sub>
+    </p>
+    <p>Offline-ready browsers</p>
+  </div>
+  <div class="stats__item flow">
+    <p class="font-brand text-size-6">
+      88
+      <sub>%</sub>
+    </p>
+    <p>Web users can install a PWA</p>
+  </div>
+</ul>
+
+_Data sourced from StatCounter and Can I Use._
+
+### Desktop and laptops
+
+In a world of multifactor devices,
+it's challenging to know what a desktop device is anymore.
+Still, at least from an operating system point of view,
+these browsers and stores are compatible with PWA installation and offline capabilities:
+
+Windows 10 and 11
+: Google Chrome (from version 73), Microsoft Edge (from version 79), Microsoft Store
+
+ChromeOS
+: built-in Chrome browser  (from version 72), Play Store (from version 85)
+
+macOS, Linux, and Windows 7 and 8.x
+: Google Chrome (from version 73), Microsoft Edge
+
+In the following video the user installs a PWA from the browser on a desktop computer,
+and then accesses it like any other app with its standalone window.
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/d0cR0VyUhy30DkXEgGOt.mp4", alt="the user can install a PWA from the browser on a desktop computer, and then the user can access it like any other app with its standalone window", autoplay="true", loop="true", muted="true" %}
+
+{% Aside 'caution' %}
+On desktop, Safari and Firefox do not support PWA installation.
+They do support offline capabilities, but the experience will always start within the browser user interface.
+It may get fullscreen, but never a standalone window on desktop.
+{% endAside %}
+
+### Mobile devices
+
+Talking about mobile phones and tablets,
+a Progressive Web App is installable with offline capabilities using the following browsers and app stores:
+
+iOS and iPadOS
+: Safari (since iOS 11.3), AppStore (since iOS/iPadOS 14, with some limitations), mobile configuration for enterprise distribution.
+
+Android
+: Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (from version 72 with Google Chrome installed, or browsers compatible with TWA), Galaxy Store, Managed Play iframe for enterprise distribution.
+
+{% Aside 'caution' %}
+On iOS and iPadOS, PWAs are only installable if the user is using Safari. That means that users won't install PWAs if they use different browser apps, such as Google Chrome, Firefox, or Microsoft Edge. On both Android and iOS, users can't install PWAs from many in-app browsers, such as Facebook Mobile Browser, Instagram, Google Search App, or Gmail.
+{% endAside %}
+
+In the following video the user installs a PWA from the browser on a mobile device using the browser dialog, and also using the **Add to Home screen** menu.
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/Nj9yCzWOm6wWqpNN9Ojz.mp4", alt="the user can install a PWA from the browser on mobile devices on Android and iPhones, using the browser dialog or the 'Add to Home screen' menu.", autoplay="true", loop="true", muted="true" %}
+
+### Other devices
+
+Some other small devices support PWAs, such as game consoles (Xbox with Microsoft Store) or XR devices (Microsoft Hololens, plans for Facebook's Oculus). However, the rest of the devices with a browser do not typically accept PWAs, including:
+
+- Game consoles
+- Smart TVs
+- Smartwatches
+- Cars
+
+Your PWA will always work in the browser of all devices with their specific limitations.
+This ability to work in many devices, lets you create multi-device journeys,
+where the user can start a task in one device and complete it on another device, with data synced across them, with the exact same deployed app.
+
+##  Resources
+
+- [Introduction to Progressive Web Apps on MDN](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Introduction)
+- [Progressive Web Apps Compatibility list](https://firt.dev/notes/pwa)
+- [How Progressive Web Apps can drive business success](/drive-business-success/)
+- [Clipchamp's video editor PWA installs see a 97% monthly growth](/clipchamp/)
+- [PWA users are 2.5x more likely to purchase Gravit Designer PRO](/gravit-designer/)
diff --git a/src/site/content/en/learn/pwa/pwa.11tydata.js b/src/site/content/en/learn/pwa/pwa.11tydata.js
new file mode 100644
index 00000000000..5c91340e834
--- /dev/null
+++ b/src/site/content/en/learn/pwa/pwa.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('pwa');
diff --git a/src/site/content/en/learn/pwa/service-workers/index.md b/src/site/content/en/learn/pwa/service-workers/index.md
new file mode 100644
index 00000000000..da7e0165a1c
--- /dev/null
+++ b/src/site/content/en/learn/pwa/service-workers/index.md
@@ -0,0 +1,138 @@
+---
+title: Service workers
+description: >
+  Service workers are a fundamental part of a PWA. They enable fast loading (regardless of the network), offline access, push notifications, and other capabilities.
+authors:
+  - firt
+date: 2021-12-03
+updated: 2022-02-23
+---
+
+Users expect apps to start on slow or flaky network connections, or even when offline.
+They expect the content they've most recently interacted with, such as media tracks or tickets and itineraries, to be available and usable.
+When a request isn't possible, they expect the app to tell them instead of silently failing or crashing. And users wish to do it all quickly. As we can see in this study [Milliseconds make millions](/milliseconds-make-millions/), even a 0.1 second improvement in load times can improve conversion by up to 10%. In summary: users expect PWAs to be reliable and that's why we have service workers.
+
+## Hello service workers
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/iKWO7c2WNobLt30VZx9C.png",
+alt="A service worker as a middleware proxy, running device-side, between your PWA and servers, which includes both your own servers and cross-domain servers.", width="800", height="354" %}
+
+When an app requests a resource covered by the service worker's scope, including when a user is offline, the service worker intercepts the request, acting as a network proxy. It can then decide if it should serve the resource from the cache via the Cache Storage API, from the network as normally would happen without a service worker, or create it from a local algorithm. This lets you provide a similar experience to that provided by a platform app. It can even work entirely off line.
+
+{% Aside 'gotchas' %}
+Not all browsers support service workers. Even when present your service worker won't be available on first load or while it's waiting to activate. Therefore, treat it as optional and do not require it for core functionality.
+{% endAside %}
+
+## Registering a service worker
+
+Before a service worker takes control of your page, it  must be registered for your PWA. That means the first time a user comes to your PWA, network requests will not go directly to your server because the service worker is not yet in control of your pages.
+
+After checking if the browser supports the Service Worker API, your PWA can register a service worker. When loaded, the service worker sets up shop between your PWA and the network, intercepting requests and serving the corresponding responses.
+
+```js
+if ('serviceWorker' in navigator) {
+   navigator.serviceWorker.register("/serviceworker.js");
+}
+```
+
+{% Glitch 'learn-pwa-sw-registration' %}
+
+{% Aside %}
+There is only one service worker per PWA, but that doesn't mean you need to place the code only in one file. A service worker can include other files using [`importScripts`](https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts) in every browser or using [ECMAScript module imports](/es-modules-in-sw/) in some modern browsers.
+{% endAside %}
+
+### Verify if a service worker is registered
+
+To verify if a service worker is registered, use developer tools in your favorite browser.
+
+In Firefox and Chromium-based browsers (Microsoft Edge, Google Chrome, or Samsung Internet):
+
+1. Open developer tools, then click the **Application** tab.
+1. In the left pane, select **Service Workers**.
+1. Check that the service worker's script URL appears with the status "Activated". (You'll learn what this status means in the lifecycle section in this chapter). On Firefox the status can be "Running" or "Stopped".
+
+In Safari:
+
+1. Click the **Develop** menu then the **Service Workers** submenu.
+1. Check that an entry with the current origin appears in the submenu. It opens an inspector over the service worker's context.
+
+<figure>
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/QMsYbKeQ6OJSm0FeqFxG.png", alt="Service worker developer tools on Chrome, Firefox and Safari.", width="800", height="296" %}
+  <figcaption>Service worker developer tools on Chrome, Firefox and Safari.</figcaption>
+</figure>
+
+{% Aside %}
+You can remotely inspect a phone or tablet from your desktop browser when you want to check service worker registration status on a mobile device. You will see details on how to do that in the [Tools and Debug chapter](/learn/pwa/tools-and-debug)
+{% endAside %}
+
+### Scope
+
+The folder your service worker sits in determines its scope. A service worker that lives at `example.com/my-pwa/sw.js` can control any navigation at the *my-pwa* path or below, such as `example.com/my-pwa/demos/`. Service workers can only control items (pages, workers, collectively "clients") in their scope. Scope applies to browser tabs and PWA windows.
+
+Only *one* service worker per scope is allowed. When active and running, only one instance is typically available no matter how many clients are in memory (such as PWA windows or browser tabs).
+
+{% Aside 'warning' %}
+You should set the scope of your service worker as close to the root of your app as possible. This is the most common setup as it lets the service worker intercept all the requests related to your PWA. Don't put it inside, for instance, a JavaScript folder or have it loaded from a CDN. {% endAside %}
+
+Safari has more complex scope management, known as partitions, affecting how scopes work if you have cross-domain iframes. To read more about WebKit's implementation, read [their blog post](https://webkit.org/blog/8090/workers-at-your-service/).
+
+## Lifecycle
+
+Service workers have a lifecycle that dictates how they are installed, this is separate from your PWA installation.
+The service worker lifecycle starts with registering the service worker. The browser then attempts to download and parse the service worker file. If parsing succeeds, its `install` event is fired. The `install` event only fires once.
+
+Service worker installation happens silently, without requiring user permission, even if the user doesn't install the PWA. The Service Worker API is even available on platforms that do not support PWA installation, such as Safari and Firefox on desktop devices.
+
+{% Aside 'gotchas' %}
+Service worker *registration* and *installation*, while related, are different events. Registration happens when a page requests a service worker by calling `register()` as described previously. Installation happens when a registered service worker exists, can be parsed as JavaScript, and doesn't throw any errors during its first execution.
+{% endAside %}
+
+After the installation, the service worker is not yet in control of its clients, including your PWA. It needs to be activated first. When the service worker is ready to control its clients, the `activate` event will fire. This doesn't mean, though, that the page that registered the service worker will be managed. By default, the service worker will not take control until the next time you navigate to that page, either due to reloading the page or re-opening the PWA.
+
+You can listen for events in the service worker's global scope using the `self` object.
+
+{% Label %}serviceworker.js{% endLabel %}
+
+```js
+// This code executes in its own worker or thread
+self.addEventListener("install", event => {
+   console.log("Service worker installed");
+});
+self.addEventListener("activate", event => {
+   console.log("Service worker activated");
+});
+```
+
+### Updating a service worker
+
+Service workers get updated when the browser detects that the service worker currently controlling the client and the new (from your server) version of the same file are byte-different.
+
+{% Aside 'warning' %}
+When updating your service worker, do so without renaming it. Do not even add file hashes to the filename. Otherwise, the browser will never get the new version of your service worker!
+{% endAside %}
+
+After a successful installation, the new service worker will wait to activate until the existing (old) service worker no longer controls any clients. This state is called "waiting", and it's how the browser ensures that only one version of your service worker is running at a time.
+Refreshing a page or reopening the PWA won't make the new service worker take control. The user needs to close or navigate away from all tabs and windows using the current service worker and then navigate back. Only then will the new service worker to take control.
+Visit this [service worker lifecycle article](/service-worker-lifecycle/) for more information.
+
+## Service worker lifespan
+
+Once installed and registered, a service worker can manage all network requests within its scope. It runs on its  own thread, with activation and termination controlled by the browser. This lets it work even before or after your PWA is open. While service workers run on their own thread, there is no guarantee that in-memory state will persist between runs of a service worker, so make sure anything you want to reuse on each run is available either in IndexedDB or some other persistent storage.
+
+If not already running, a service worker will start whenever a network request in its scope is asked for, or when a triggering event, like periodic background sync or a push message, is received.
+
+Service workers don't live indefinitely. While exact timings differ between browsers, service workers will be terminated if they've been idle for a few seconds, or if they've been busy for too long. If a service worker has been terminated and an event occurs that would start it up, it will restart.
+
+## Capabilities
+
+With a registered and active service worker, you have a thread with a completely different execution lifecycle than the main one on your PWA. However, by default, the service worker file itself has no behavior. It won't cache or serve any resources, as this has to be done by your code. You'll find out how in the following chapters.
+
+Service worker's capabilities are not just for proxy or serving HTTP requests; other features are available on top of it for other purposes, such as background code execution, web push notifications, and process payments. We'll discuss these additions in the [capabilities chapter](/learn/pwa/capabilities).
+
+##  Resources
+
+- [Service Worker API (MDN)](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
+- [Service Worker mindset](/service-worker-mindset/)
+- [WebKit Workers at your service](https://webkit.org/blog/8090/workers-at-your-service/)
+- [ES Modules in Service Workers](/es-modules-in-sw/)
+- [Service worker lifecycle](/service-worker-lifecycle/)
diff --git a/src/site/content/en/learn/pwa/serving/index.md b/src/site/content/en/learn/pwa/serving/index.md
new file mode 100644
index 00000000000..fa6ce397f9b
--- /dev/null
+++ b/src/site/content/en/learn/pwa/serving/index.md
@@ -0,0 +1,246 @@
+---
+title: Serving
+description: >
+  Using the service worker's fetch event, you can intercept network requests and serve a response using different techniques.
+authors:
+  - firt
+date: 2022-01-10
+---
+
+A key aspects of Progressive Web Apps is that they're reliable; they can load assets quickly, keeping users engaged and providing feedback immediately, even under poor network conditions. How is that possible? Thanks to the service worker `fetch` event.
+
+## The fetch event
+{% BrowserCompat 'api.FetchEvent' %}
+
+The [`fetch`](https://developer.mozilla.org/docs/Web/API/FetchEvent) event lets us intercept every network request made by the PWA in the service worker's scope, for both same-origin and cross-origin requests. In addition to navigation and asset requests, fetching from an installed service worker allows page visits after a site's first load to be rendered without network calls.
+
+The `fetch` handler receives all requests from an app, including URLs and HTTP headers, and lets the app developer decide how to process them.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/WExZeP8vV28bPDBlpxuG.png", alt="The service worker sits between the client and the network.", width="800", height="439" %}
+
+Your service worker can forward a request to the network, respond with a previously cached response, or create a new response. The choice is yours.
+Here's a simple example:
+
+```js
+self.addEventListener("fetch", event => {
+    console.log(`URL requested: ${event.request.url}`);
+});
+```
+
+{% Aside 'caution' %}
+While you can have more than one fetch event handler per service worker, only one can respond per request. For example, you can have different handlers that will act on different URL patterns. They are executed in the order they were registered until one of them calls `respondWith()`.
+{% endAside %}
+
+## Responding to a request
+
+When a request comes into your service worker, there are two things you can do; you can ignore it, which lets it go to the network, or you can respond to it. Responding to requests from within your service worker is how you're able to choose what, and how it gets returned to your PWA, even when the user is offline.
+
+To respond to an incoming request, call `event.respondWith()` from within a `fetch` event handler, like this:
+
+```js/3
+// fetch event handler in your service worker file
+self.addEventListener("fetch", event => {
+    const response = .... // a response or a Promise of response
+    event.respondWith(response);
+});
+```
+
+You must call `respondWith()` synchronously and you must return a [Response](https://developer.mozilla.org/docs/Web/API/Response) object. But you can't call `respondWith()` after the fetch event handler has finished, like within an async call. If you need to wait for the complete response, you can pass a Promise to `respondWith()` that resolves with a Response.
+
+### Creating responses
+
+Thanks to the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API), you can create HTTP responses in your JavaScript code, and those responses can be cached using the Cache Storage API and returned as if they were coming from a web server.
+
+To create a response, create a new `Response` object, setting its body and options such as status and headers:
+
+```js
+const simpleResponse = new Response("Body of the HTTP response");
+
+const options = {
+   status: 200,
+   headers: {
+	'Content-type': 'text/html'
+   }
+};
+const htmlResponse = new Response("<b>HTML</b> content", options)
+```
+
+{% Aside 'warning' %}
+Be extra careful when creating responses with a service worker buggy code can lead to corner cases and hard to debug issues, such as the browser being unable to load the HTML document that renders your PWA. While debugging, you can always use your browser's reload button with the Shift key pressed, which will bypass the service worker; or use service worker devtools on supported browsers as we'll see in [Tools and Debug](/learn/pwa/tools-and-debug/).
+{% endAside %}
+
+{% Glitch 'learn-pwa-serving-synthesize' %}
+
+
+### Responding from the cache
+
+Now that you know how to serve HTTP responses from a service worker,
+it's time to use the [Caching Storage interface](/learn/pwa/caching) to store assets on the device.
+
+You can use the cache storage API to check if the request received from the PWA is available in the cache, and if it is, respond to `respondWith()` with it.
+To do that, you first need to search within the cache. The `match()` function, available at the top-level `caches` interface searches all stores in your origin, or on a single open cache object.
+
+The `match()` function receives an HTTP request or a URL as an argument and it returns a promise that resolves with the Response associated with the corresponding key.
+
+```js
+// Global search on all caches in the current origin
+caches.match(urlOrRequest).then(response => {
+   console.log(response ? response : "It's not in the cache");
+});
+
+// Cache-specific search
+caches.open("pwa-assets").then(cache => {
+  cache.match(urlOrRequest).then(response) {
+    console.log(response ? response : "It's not in the cache");
+  }
+});
+```
+
+{% Aside 'gotchas' %}
+When using `match()` with `respondWith()`, the match promise will resolve either with the found item or with nothing. It will only reject if there was a problem that prevented the search operation from completing. To throw an error if no results are found, you'll need to inspect the results before returning a response to `respondWith()`.
+{% endAside %}
+
+## Caching strategies
+
+Serving files only from the browser cache doesn't fit every use case. For example the user or the browser can evict the cache. That's why you should define your own strategies for delivering assets for your PWA.
+You're not restricted to one caching strategy. You can define different ones for different URL patterns. For example, you can have one strategy for the minimum UI assets, another for API calls, and a third for image and data URLs.
+To do this, read `event.request.url` in `ServiceWorkerGlobalScope.onfetch` and parse it through regular expressions or a [URL Pattern](/urlpattern/). (At the time of writing, URL Pattern is not supported on all platforms).
+
+The most common strategies are:
+
+Cache First
+: Searches for a cached response first and falls back to the network if one isn't found.
+
+Network First
+: Requests a response from the network first and if none is returned, checks for response in the cache.
+
+Stale While Revalidate
+: Serves a response from the cache, while in the background requests the latest version and saves it to the cache for the next time the asset is requested.
+
+Network-Only
+: Always replies with a response from the network or errors out. The cache is never consulted.
+
+Cache-Only
+: Always replies with a response from the cache or errors out. The network will never be consulted. The assets that will be served using this strategy must be added to the cache before they are requested.
+
+### Cache first
+
+Using this strategy, the service worker looks for the matching request in the cache and returns the corresponding Response if it's cached. Otherwise it retrieves the response from the network (optionally, updating the cache for future calls). If there is neither a cache response nor a network response, the request will error. Since serving assets without going to the network tends to be faster, this strategy prioritizes performance over freshness.
+
+{% Aside %}
+Remember the cache storage interface won't return a Response object. The reference will be `undefined`, if the request is not cached.
+{% endAside %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/ki9e4T6ik7mfrN67Zysx.png", alt="The Cache First strategy", width="800", height="439" %}
+
+```js
+self.addEventListener("fetch", event => {
+   event.respondWith(
+     caches.match(event.request)
+     .then(cachedResponse => {
+	   // It can update the cache to serve updated content on the next request
+         return cachedResponse || fetch(event.request);
+     }
+   )
+  )
+});
+```
+
+{% Glitch 'learn-pwa-serving-offline' %}
+
+### Network first
+
+This strategy is the mirror of the Cache First strategy; it checks if the request can be fulfilled from the network and, if it can't, tries to retrieve it from the cache. Like cache first. If there is neither a network response nor a cache response, the request will error. Getting the response from the network is usually slower than getting it from the cache, this strategy prioritizes updated content instead of performance.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/bGCR5LiMRlt9urRcpnk4.png", alt="The Network First strategy", width="800", height="439" %}
+
+```js
+self.addEventListener("fetch", event => {
+   event.respondWith(
+     fetch(event.request)
+     .catch(error => {
+       return caches.match(event.request) ;
+     })
+   );
+});
+```
+
+### Stale while revalidate
+
+The stale while revalidate strategy returns a cached response immediately, then checks the network for an update, replacing the cached response if one is found. This strategy always makes a network request, because even if a cached resource is found, it will try to update what was in the cache with what was received from the network, to use the updated version in the next request. This strategy, therefore, provides a way for you to benefit from the quick serving of the cache first strategy and update the cache in the background.
+
+{% Aside %}
+With this strategy, the assets are updated in the background. This means your users won't get the new version of the assets until the next time that path is requested. At that time the strategy will again check if a new version exists and the cycle repeats.
+{% endAside %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/C7OcnPRHNdTLe2043JHG.png", alt="The stale while revalidate strategy", width="800", height="439" %}
+
+```js
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request).then(cachedResponse => {
+        const networkFetch = fetch(event.request).then(response => {
+          // update the cache with a clone of the network response
+          const responseClone = response.clone()
+          caches.open(url.searchParams.get('name')).then(cache => {
+            cache.put(event.request, responseClone)
+          })
+          return response
+        }).catch(function (reason) {
+          console.error('ServiceWorker fetch failed: ', reason)
+        })
+        // prioritize cached response over network
+        return cachedResponse || networkFetch
+      }
+    )
+  )
+})
+```
+
+{% Aside 'caution' %}
+The Response's body is a [ReadableStream](https://developer.mozilla.org/docs/Web/API/ReadableStream) that can only be consumed once. That means that if you call `fetch()` to deliver the response to the PWA because the asset was not cached, you cannot reuse the same response for updating it in the cache. You need to call `Response.clone()` to use it twice.
+{% endAside %}
+
+{% Glitch 'learn-pwa-serving-stale-while-revalidate' %}
+
+### Network only
+
+The network only strategy is similar to how browsers behave without a service worker or the Cache Storage API. Requests will only return a resource if it can be fetched from the network. This is often useful for resources like online-only API requests.
+
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/NGxIKl6Lq8TY9GqXT8r8.png", alt="The Network only strategy", width="800", height="439" %}
+
+
+### Cache only
+
+The cache only strategy ensures that requests never go to the network; all incoming requests are responded to with a pre-populated cache item. The following code uses the `fetch` event handler with the `match` method of the cache storage to respond cache only:
+
+```js
+self.addEventListener("fetch", event => {
+   event.respondWith(caches.match(event.request));
+});
+```
+
+{% Aside %}
+With the cache only strategy you cache your assets before you need them, usually in the service worker's `install` event handler. Because this strategy never goes to the network, these assets will get updated only when you update your service worker and a new `install` event is fired.
+{% endAside %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/rDI3LvI9y0SBUFfRCdgm.png", alt="Cache only strategy.", width="800", height="439" %}
+
+{% Glitch 'learn-pwa-serving-cache-only' %}
+
+### Custom strategies
+
+While the above are common caching strategies, you are in charge of your service worker and how requests are handled. If none of these work for your needs, create your own.
+
+You can, for example, use a network first strategy with a timeout to prioritize updated content, but only if the response appears within a threshold you set. You can also merge a cached response with a network response and build a complex response from the service worker.
+
+## Updating assets
+
+Keeping your PWA's cached assets up-to-date can be a challenge. While the stale while revalidate strategy is one way to do so, it's not the only one. In the [Update chapter](/learn/pwa/update) you will learn different techniques to keep your app's content and assets updated.
+
+##  Resources
+
+- [Fetch event on MDN](https://developer.mozilla.org/docs/Web/API/FetchEvent)
+- [The Offline Cookbook](/offline-cookbook/)
+- [Cache Match on MDN](https://developer.mozilla.org/docs/Web/API/Cache/match)
diff --git a/src/site/content/en/learn/pwa/tools-and-debug/index.md b/src/site/content/en/learn/pwa/tools-and-debug/index.md
new file mode 100644
index 00000000000..6be5b72c1d4
--- /dev/null
+++ b/src/site/content/en/learn/pwa/tools-and-debug/index.md
@@ -0,0 +1,253 @@
+---
+title: Tools and debug
+Authors:
+  - firt
+description: >
+  We will explore the tools available to develop, debug, and test your Progressive Web Apps.
+date: 2022-05-15
+---
+
+All the tools available for web development are also helpful for progressive web app development, including libraries, frameworks, code editors, builders, developer tools, debuggers, and more. But when working with PWA-specific abilities, such as installability, service workers, offline support, and more, certain tools for PWA are extra helpful. Let's see them in action.
+
+## Simulators and devices
+
+As mentioned in the [Foundations chapter](/learn/pwa/foundations), you should use agnostic design patterns to offer the best experience to every user in every context. However, it's good practice to test your experiences on different devices.
+
+{% Aside 'caution' %}
+Installed PWAs are new experiences for web developers to test and debug, but keep in mind that not every tool is compatible with this mode.
+{% endAside %}
+
+You probably won't own dozens of physical devices, including iPhones, Android phones, tablets, and desktops or laptops with different operating systems. That's why simulators and emulators exist.
+
+### Simple simulators
+
+Most developer tools within browsers let you test your PWAs in different screen sizes or network conditions while using a single desktop browser engine. Some of these tools can also force a different user agent under these simulations.
+
+Some available simulators are:
+
+* Chromium DevTools: [Device Mode](https://developer.chrome.com/docs/devtools/device-mode/), network throttling and several sensor simulations available
+* Firefox Developer Tools: [Responsive Design Mode](https://developer.mozilla.org/docs/Tools/Responsive_Design_Mode)
+* Safari Web Inspector: [Responsive Design Mode](https://developer.apple.com/safari/tools/)
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/gnIHqhnkBZcz1loMEcMG.png", alt="Chromium DevTools simulating mobile devices.", width="800", height="513" %}
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/fheSiDVxegbRD6oxERQ1.png", alt="Firefox DevTools simulating mobile devices.", width="800", height="629" %}
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/Opi0TXLgyl6v6PfQ06MM.png", alt="Safari Web Inspector Responsive Design mode.", width="800", height="810" %}
+Some commercial and free solutions are optimized for developers and designers, such as the open source [Responsively app](https://responsively.app).
+{% Aside 'gotchas' %}
+Simple simulators can't simulate and test installation-related abilities, such as `display-mode` related media queries, iOS web app meta tags, app shortcuts, or web share target.
+{% endAside %}
+
+### Apple simulators
+
+Apple offers the Simulator app (formerly known as iOS Simulator) which allows you to test your web app on different iPhones and iPads on various operating system versions.
+
+The Simulator app is only available for macOS computers, and it comes with [Xcode, available in [AppStore](https://apps.apple.com/us/app/xcode/id497799835); it simulates iOS and iPadOS with different device configurations. It includes the real Mobile Safari app and the Web.app engine used when your PWA is installed on the home screen, so the final experience you see is fairly representative of an actual device.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/aa4SAqNofV2d1nw3btVF.png", alt="Simulator with Safari rendering websites on iPhones and iPad.", width="800", height="376" %}
+
+To launch the app, once you have installed Xcode, you can open the Simulator in the `Xcode` menu, by selecting `Open Developer Tools` then `Simulator`. Once in the simulator, you can open Safari as if you are in a real iPhone or iPad. You can open other devices by selecting `File` then `Open Simulator` menu.
+
+Some useful shortcuts for web developers while using Simulator to test PWAs are:
+
+* `Command-Shift-H`: go to the Home screen.
+* `Control-Command-Shift-H`: access the App Switcher.
+* `Command-Right` and `Command-Left`: rotate the device.
+
+Simulator is not a virtual machine, but an app running on top of your macOS that looks like an iPhone or iPad, so it doesn't have its own TCP stack. Therefore, if you use `localhost` within Simulator, Safari will point to your macOS `localhost` device.
+
+
+By default, Xcode only installs the latest version of iOS, but you can go to Xcode, use the `Preferences` menu, and download older Simulators from the `Components` tab.
+
+It's good practice to test your PWA on the latest version of iOS, the previous minor version, and at least one previous major version.
+
+### Android emulators
+
+The Android ecosystem offers different emulators, but the ones available within the [Android SDK](https://developer.android.com/studio/run/emulator) are the most commonly used.
+
+As a PWA developer, you also need browsers in your Android emulator, which will add a layer of complexity to testing, because AOSP (Android Open Source Project) doesn't include Google Chrome or Play Store to download browsers. Therefore, not every Android emulator is helpful for PWA testing.
+
+The Android SDK comes with two tools useful for emulation:
+
+* SDK Manager: downloads and updates different operating system versions and plugins.
+* AVD Manager: adds, edits, and deletes Android Virtual Devices (AVDs), each of them representing one device with one Android OS installed, similar to a virtual machine instance.
+
+You can only install the Android SDK or [Android Studio](https://developer.android.com/studio), a free IDE including the Android SDK with the emulators. With the SDK, you will have to use the command line to open and set up your emulators. With Android Studio, you can open the tools needed from the Welcome screen's menu.
+Once in the AVD Manager, you can create as many devices as you want, with different combinations of screen size, abilities, and Android OS version.
+
+{% Aside 'caution' %}
+Each Android Virtual Device can take more than 5GB of your hard drive. Be mindful of that when creating images.
+{% endAside %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/QQH4XtxtnRe7UmgCG47D.png", alt="The AVD manager with an Android Virtual device browsing a website", width="800", height="569" %}
+
+{% Aside 'caution' %}
+Android devices are virtual machines on top of your host computers, so they have their own TCP stacks. Therefore, `localhost` in an Android browser within an AVD won't be the same as your `localhost` in your host desktop computer. Later in this chapter, we will see how to solve this restriction with port forwarding.
+{% endAside %}
+
+With an Android emulator, you can check your PWA installation support, the entire user experience, and if the abilities you are using are working as expected.
+
+#### Using Google Chrome
+
+To use Google Chrome in the Android emulator, you have to create an AVD with Play Services inside. To do that, make sure the SDK you use for your AVD has the Play icon, as you can see in the following image:
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/KNBWJ3Nu8SYFbh8KemT9.png", alt="Creating AVDs with an operating system including Play services.", width="800", height="560" %}
+
+AVDs with Play services also include Play Store, so you can update your Chrome with the latest version after setting up your account with your Google account.
+
+#### Using other browsers
+
+If you use an AVD with Play services, you can also download browsers from the Play Store.
+
+Most of the browsers available for Android, including Samsung Internet, Microsoft Edge, Opera, Firefox, and Brave, are available as APKs (Android Packages). If you have the APK for the browser you want to test, you can just drag the file to the emulator or install it through the command-line [using ADB](https://developer.android.com/studio/command-line/adb).
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/Ngc9KZO0UdLiGYF2TGt0.png", alt="Android emulator installing Microsoft Edge from Play store.", width="780", height="746" %}
+
+### Desktop emulators
+
+Emulating a different desktop computer is typically done via a virtual machine system, such as VirtualBox or VMWare. Even with these tools, emulating some environments is impossible, such as emulating macOS on Windows or Linux, and some other options may require a license, such as emulating Windows on macOS or Windows.
+
+### Using physical devices
+
+Using actual devices to test your PWA is also a good idea. We don't need to own several devices as there are some cloud-based solutions where you can use physical devices remotely. There are some free solutions and some commercial solutions with a free-tier available.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/R6nJTg2Uoh5EstlZdr21.png", alt="Remote Test Lab from Samsung with a foldable phone.", width="800", height="460" %}
+
+One of the available solutions is [Samsung Remote Test Lab](https://developer.samsung.com/remote-test-lab), a free solution to test your PWA on Samsung devices, including phones, tablets, and foldable devices.
+
+{% Aside 'gotchas' %}
+Some cloud-based device lab solutions are suitable for device-specific app testing. They are not optimized for PWAs, so you can only use them if you plan to create a package to distribute your PWA in an app store.
+{% endAside %}
+
+### Remote inspection
+
+When you want to debug your Progressive Web App in an actual device, a simulator, or an emulator, you may want to connect a remote inspection session with your desktop's browser tools.
+
+There are commercial tools available, but all the browsers also offer ways to do it, including:
+
+* [WebKit Remote Inspector](https://webkit.org/web-inspector/enabling-web-inspector/) to connect to Safari and installed PWAs on iOS- and iPadOS-connected devices and simulators.
+* [Chromium DevTools Remote Debugging](https://developer.chrome.com/docs/devtools/remote-debugging/) to connect to Chrome, Edge, Samsung Internet, and other Chromium-based browsers on Android and PWAs installed from those browsers, including connected physical devices and emulators.
+* [Firefox Remote Debugging](https://developer.mozilla.org/docs/Tools/Remote_Debugging) to connect to Firefox for Android on connected actual devices and emulators.
+
+#### Port forwarding for Android
+
+When testing PWAs available on `localhost` on Android physical devices or emulators, you will have a problem, as `localhost` will point to the Android TCP stack and not your development machine.
+
+You may want to use your local IP address as a replacement to `localhost`, but that's not a good idea as service workers and many abilities will only work with HTTPS connections, with the exception of `localhost`, so your PWA won't work offline or pass PWA criteria.
+
+
+You can solve the problem by enabling port forwarding on a Chromium browser on your desktop computer. In that case, you can bridge a port on `localhost` on the Android device to any origin and port from your host computer, including your development computer's `localhost`. Check [this guide](https://developer.chrome.com/docs/devtools/remote-debugging/local-server/) for more information.
+
+## Chromium browsers
+
+Chromium browsers offer many tools for debugging and testing Progressive Web Apps, starting from DevTools.
+
+Most Chromium-based browsers, including Samsung Internet, Microsoft Edge, and Google Chrome, offer different channels, such as Stable, Beta, and Canary. You can install separate versions on desktop and Android to test your PWA on future versions of the browser. This allows you to build and test features that are not yet widely available, or to test deprecations and changes, and work out how your app will behave in newer versions.
+
+
+Using remote inspection, you can use all these tools to debug and test your PWA on desktop and Android devices.
+
+
+### Service worker tools
+
+Chromium DevTools has a complete set of tools to debug service workers and their APIs' "Application" tab. From the "Service Workers" section, you can:
+
+* See service workers' installation status and lifecycle.
+* Update and unregister the service worker.
+* Follow the update cycle.
+* See current service workers' clients.
+* Send a push message to a service worker.
+* Register Background Sync and Periodic Background Sync operations.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/WJ0fBXggrFnhifcAIcBb.png", alt="Service Worker debugging tools con Chromium DevTools.", width="800", height="491" %}
+
+[Read more about these tools](https://developer.chrome.com/docs/devtools/progressive-web-apps/#service-workers).
+
+### Storage tools
+
+Within `Application` then `Storage`, you can see, preview, update, and delete data from your origin, such as Web Storage entries or IndexedDB stores.
+Inside `Application`, `Cache` then `Cache Storage`, you can see all the caches stored in current origin, preview content, and delete entries. [Read more about the cache tool](https://developer.chrome.com/docs/devtools/storage/cache/).
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/WJ0fBXggrFnhifcAIcBb.png", alt="Cache Inspector in Chromium DevTools", width="800", height="491" %}
+
+Also, selecting from `Application` then `Storage`, you can see the current quota used, simulate custom quota storage, and clear all your data, including the service worker registration, using `Clear site data`.
+
+#### Background services
+
+Chromium DevTools also has a set of background services event recording tools, found by clicking `Application` then `Background Services`. This lets you see what happens with some events in the background on top of the service workers' API. [Read more about these tools](https://developer.chrome.com/docs/devtools/javascript/background-services/).
+
+### Web app manifest tools
+
+Chromium DevTools has a section for Web App Manifest and installability criteria under `Application`, `Manifest`. In this section, you can check whether the manifest has loaded correctly, the manifest's values, how the icons look, the [app id](/learn/pwa/web-app-manifest/#basic-fields), and a quick checker for [maskable icons](/learn/pwa/web-app-manifest/#maskable-icons).
+
+Warnings and errors around [installability criteria](/learn/pwa/installation/#installation-criteria) issues are also shown in this section.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/uBOt9BBbF15lX7Cxju6t.png", alt="Debugging Web App Manifest in Chromium DevTools.", width="800", height="713" %}
+
+[Read more about these tools](https://developer.chrome.com/docs/devtools/progressive-web-apps/).
+
+{% Aside %}
+Chromium-based browsers have some flags that may be useful while testing PWAs. Check all the available options by browsing to `about://flags/`
+{% endAside %}
+
+### Installation debugging
+
+On Android devices using [WebAPK installation mode](/learn/pwa/installation/#webapks), you can access a list of installed apps by browsing to `about:webapk` on Chromium browsers.
+
+You will see the current update status and request a WebAPK update from here.
+
+On desktop computers, you can see a user-friendly list of installed PWAs by browsing to `about:apps`, and a debug version by browsing to `about:app-service-internals`.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/exwzkevoGROml8uH5ZxL.png", alt="Google Chrome WebAPK debug screen on Android.", width="800", height="400" %}
+
+## Safari
+
+At the time of writing, Safari has a more limited set of tools available for PWA testing and debugging. There are no tools to see and debug the state and lifecycle of service workers, no inspector for the  cache's content, and no tools for web app manifest support and installability on iOS and iPadOS.
+
+{% Aside 'gotchas' %}
+You can only inspect and debug PWAs on iOS and iPadOS if you have a macOS computer with an updated OS using Safari desktop or Safari Technology Preview. There are some commercial tools such as [Inspect](https://inspect.dev) that allow you to inspect web apps on iOS and iPadOS from other operating systems.
+{% endAside %}
+
+
+Safari is available only on stable, while [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/) available for macOS will only let you try abilities of future versions of Safari beforehand. The [iOS and iPadOS beta programs](https://beta.apple.com/sp/betaprogram) sometimes include new versions of Safari that you can use for testing.
+
+### Service worker tools
+
+What you can do on Safari (both on macOS and remotely for iOS and iPadOS) is to open an inspector window for a service worker that is currently running.
+
+From Safari on macOS, the `Develop`, `Service Workers` menu will list all the currently running service worker sessions. You have to select the device to inspect in the `Develop` menu for remote inspection. Service workers' contexts will appear in the same submenu as window contexts under the origin's or PWA's installed name.
+
+If you select one of them, Safari will open a new window with a restricted inspector, including only `Consoles`, `Sources`, and `Network Tabs`.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/jho0nKOzPq9XPH8g24Hk.png", alt="A Service Worker Web Inspector from a PWA in Safari.", width="800", height="427" %}
+
+{% Aside %}
+[Service Worker Detector](https://apps.apple.com/app/service-worker-detector/id1530808337) is a free Safari extension available in AppStore that will let you see service worker registration status and the cache storages available under the current origin, abilities which are not available on WebKit's Inspector.
+{% endAside %}
+
+## Firefox
+
+Firefox supports service workers on all platforms and App Manifest for installation only on Android. You can access the tools for PWAs on desktop and Android by a [USB remote inspection session](https://developer.mozilla.org/docs/Tools/about:debugging).
+
+You can use the desktop version known as [Firefox Developer Edition](https://www.mozilla.org/firefox/developer/). As with Chromium browser, Firefox has versions in different channels on desktop and Android, including stable, beta, and dev versions.
+
+### Tools for PWAs
+
+The service worker inspector on Firefox is a basic tool available in Developer Tools under `Application`, `Service Workers`. It lets you see the currently registered service worker, check its running status, and unregister it. Debugging the service worker's code may only be available on some developer versions of Firefox.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/AihFdYbhvY7mpqWVQCuH.png", alt="Firefox Developer Tools for Service Worker and Manifest.", width="800", height="454" %}
+
+The manifest tool is available under `Application`, `Manifest`, and it only renders the manifest's values with a preview of the icons.
+
+Under `Storage`, you can manage the origin's storage, including IndexedDB and Cache Storage.
+
+You can read more about [Firefox developer tooling for web apps](https://developer.mozilla.org/docs/Tools/Application).
+
+{% Aside %}
+To develop your PWA, you can use any code editor, IDE, and toolchain of your choice. If you are using Visual Studio code as your code editor, you may want to check the [PWA Studio](https://blog.pwabuilder.com/posts/announcing-pwa-studio-the-vs-code-extension-for-building-progressive-web-apps!/?WT.mc_id=M365-MVP-4025164) free extension from the PWABuilder team. This has many tools for PWA developers such as an icon resizer, a service worker generator, and a quick way to create PWAs launchers–useful for app store distribution.
+{% endAside %}
+
+##  Resources
+
+- [Chrome DevTools: Debug Progressive Web Apps](https://developer.chrome.com/docs/devtools/progressive-web-apps/)
+- [Debug PWAs on Edge](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/progressive-web-apps/)
+- [Firefox Developer Tools: Application Tab](https://developer.mozilla.org/docs/Tools/Application)
+- [Debugging Service Workers in Chrome (video)](https://www.youtube.com/watch?v=tuRPSaSiK_c)
diff --git a/src/site/content/en/learn/pwa/update/index.md b/src/site/content/en/learn/pwa/update/index.md
new file mode 100644
index 00000000000..1d1080e7b36
--- /dev/null
+++ b/src/site/content/en/learn/pwa/update/index.md
@@ -0,0 +1,221 @@
+---
+title: Update
+description: >
+  Chances are your PWA needs updating. This chapter gives you the tools to update different parts of your PWA, from assets to metadata.
+authors:
+  - firt
+date: 2022-03-10
+updated: 2022-03-14
+---
+
+You have published your PWA: some users use it from the browser, others install it on their devices. When you update the app, it's important to apply best practices to avoid pitfalls.
+
+You may update:
+
+* App data.
+* Assets already cached in devices.
+* The service worker file, or its dependencies.
+* Manifest metadata.
+
+Let's check out the best practices for each of these elements.
+
+## Updating data
+
+To update data, such as that stored in IndexedDB, you can use tools such as Fetch, WebRTC, or WebSockets API. If your app supports any offline features, remember to keep the data that supports the features updated too.
+
+On compatible browsers, there are options to sync data, not only when the user opens the PWA but also in the background. These options are:
+
+* [Background synchronization](https://developer.mozilla.org/docs/Web/API/Background_Synchronization_API): saves requests that failed and retries them using sync from the service worker.
+* [Web periodic background sync](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API): syncs data periodically in the background, at specific times, allowing the app to provide updated data even if the user hasn't opened the app yet.
+* [Background Fetch](https://developer.mozilla.org/docs/Web/API/Background_Fetch_API): downloads large files, even when the PWA is closed.
+* [Web push](https://developer.mozilla.org/docs/Web/API/Push_API): sends a message from the server that wakes up the service worker and notifies the user. This is commonly called a 'push notification'. This API requires the user's permission.
+
+All these APIs are executed from the service worker context. They are currently available only on Chromium-based browsers, on Android, and desktop operating systems. When you use one of these APIs, you can run code in the service worker thread; for example, to download data from your server and update your IndexedDB data.
+
+{% Aside %}
+The Web Push API is the only API to notify the user from the background and its `push` message can include a small amount of data: it can carry a payload of up to around 2KB.
+{% endAside %}
+
+## Updating assets
+
+Updating assets includes any changes to files you use to render the app's interface, such as HTML, CSS, JavaScript, and images. For example, a change in your app's logic, an image that is part of your interface, or a CSS stylesheet.
+
+### Update patterns
+
+Here are some common patterns to handle app updates, but you can always customize the process to your own needs:
+
+* Full update: every change, even a minor one, triggers the replacement of the entire cache content. This pattern mimics how device-specific apps handle updates, and it will consume more bandwidth and will take more time.
+* Changed assets update: only the assets that have changed since the last update get replaced in cache. It is often implemented using a library such as [Workbox](/learn/pwa/workbox). It involves creating a list of cached files, a hash representation of the file, and timestamps. With this information, the service worker compares this list with the cached assets and decides which assets to update.
+* Individual assets update: each asset is updated individually when it changes. The stale while revalidate strategy described in the [Serving chapter](/learn/pwa/serve) is an example of updating assets individually.
+
+### When to update
+
+Another good practice is to find a good time to check for updates and apply them. Here are some options:
+
+* When the service worker wakes up. There is no event to listen for this moment, but the browser will execute any code in the service worker's global scope when it wakes up.
+* In the main window context of your PWA, after the browser loaded the page, to avoid making the app load slower.
+* When background events are triggered, such as when your PWA receives a push notification or a background sync fires. You can update your cache then and your users will have the asset's new version the next time they open the app.
+
+{% Aside 'warning' %}
+When checking for updates, make sure you don't interrupt the loading process and impact your app's performance. Do not wait for an update check before rendering the app as it will harm your user experience and reflect on your [core web vitals](/web-vitals). If you need to update part of your app frequently, use the [stale while revalidate](/learn/pwa/serving/#stale-while-revalidate) caching strategy.
+{% endAside %}
+
+### Live updates
+
+You can also choose whether to apply an update when the app is open (live) or closed. With the app closed approach, even though the app has downloaded new assets, it won't make any changes and will use the new versions on the next load.
+
+A live update means as soon as the asset is updated in the cache, your PWA replaces the asset in the current load. It is a complex task not covered in this course. Some tools that help to implement this update are [livereload-js](https://www.npmjs.com/package/livereload-js) and CSS asset update [CSSStyleSheet.replace() API](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/replace).
+
+## Updating the service worker
+
+The browser triggers an update algorithm when your service worker or its dependencies change. The browser detects updates using a byte-by-byte comparison between the cached files and the resources coming from the network.
+
+Then the browser tries to install the new version of the service worker, and the new service worker will be in the *waiting* state, as described in the [Service workers chapter](/learn/pwa/service-workers/#updating-a-service-worker). The new installation will run the `install` event for the new service worker. If you are caching assets in that event handler, assets will also be re-cached.
+
+{% Aside 'caution' %}
+If you delete or rename your service worker file, the browser won't remove the previously registered service worker from its clients. To completely remove a service worker, you need to use the [getRegistrations()](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/getRegistrations) and the [unregister()](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/unregister) methods.
+{% endAside %}
+
+
+{% Aside %}
+Installing a new service worker version doesn't automatically remove previously cached assets. You should explicitly delete assets you no longer need.
+{% endAside %}
+
+### Detecting service worker changes
+
+To detect that a new service worker is ready and installed, we use the `updatefound` event from the service worker registration. This event is fired when the new service worker starts installing. We need to wait for its state to change to `installed` with the `statechange` event; see the following:
+
+```js
+async function detectSWUpdate() {
+  const registration = await navigator.serviceWorker.ready;
+
+  registration.addEventListener("updatefound", event => {
+    const newSW = registration.installing;
+    newSW.addEventListener("statechange", event => {
+      if (newSW.state == "installed") {
+         // New service worker is installed, but waiting activation
+      }
+    });
+  })
+}
+```
+
+### Force override
+
+The new service worker will be installed but waiting for activation by default. The wait prevents the new service worker from taking over old clients that might not be compatible with the new version.
+
+Even though it is not recommended, the new service worker can skip that waiting period and start the activation immediately.
+
+{% Aside 'caution' %}
+`skipWaiting()` means that your new service worker is probably controlling pages that were loaded with an older version. This means some of your page's fetches will have been handled by your old service worker, but your new service worker will be handling subsequent fetches. If this might prevent your app from working, don't use `skipWaiting()`.
+This warning comes from [service worker lifecycle](/service-worker-lifecycle/). Check out the article for more best practice advice.
+{% endAside %}
+
+```js
+self.addEventListener("install", event => {
+   // forces a service worker to activate immediately
+   self.skipWaiting();
+  });
+
+self.addEventListener("activate", event => {
+  // when this SW becomes activated, we claim all the opened clients
+  // they can be standalone PWA windows or browser tabs
+  event.waitUntil(clients.claim());
+});
+```
+
+The `controllerchange` event fires when the service worker controlling the current page changes. For example, a new worker has skipped waiting and become the new active worker.
+
+```js
+navigator.serviceWorker.addEventListener("controllerchange", event => {
+   // The service worker controller has changed
+ });
+```
+
+## Updating metadata
+
+You can also update your app's metadata, which is mainly set in the [web app manifest](/learn/pwa/web-app-manifest). For example, update its icon, name, or start URL, or you can add a new feature such as [app shortcuts](/app-shortcuts/).
+But what happens with all the users who have already installed the app with the old icon on their devices? How and when do they get the updated version?
+
+The answer depends on the platform. Let's cover the options available.
+
+{% Aside 'gotchas' %}
+The `id` property uniquely identifies your PWA; changing `id` means your PWA will be considered a completely new PWA. To avoid unexpected behavior, before you set or change the `id` property, read [Uniquely identifying PWAs with the web app manifest id property](https://developer.chrome.com/blog/pwa-manifest-id/).
+{% endAside %}
+
+### Safari on iOS, iPadOS, and Android browsers
+
+On these platforms, the only way to get the new manifest metadata is to re-install the app from the browser.
+
+{% Aside %}
+If you modify your `start_url` the browser may install the app as a completely new app. However, it has been a common practice to add a manual version identifier within the `start_url` property, such as `/?version=3` to identify the version. From Chrome 96 [you can add an `id` into the manifest](​​https://developer.chrome.com/blog/pwa-manifest-id/) to identify your app.
+{% endAside %}
+
+### Google Chrome on Android with WebAPK
+
+When the user has installed your PWA on Android using Google Chrome with [WebAPK](/learn/pwa/installation/#webapks) activated (most of the Chrome PWA installations), the update will be detected and applied based on an algorithm. Check out  the details in this [manifest updates](/manifest-updates/) article.
+
+Some additional notes about the process:
+
+If the user doesn't open your PWA, its WebAPK won't be updated.
+If the server doesn't respond with the manifest file (there is a 404 error), Chrome won't check for updates for a minimum of 30 days, even if the user opens the PWA.
+
+Go to `about:webapks` in Chrome on Android to see the status of the "needing update" flag, and request an update. In the [Tools and debug chapter](/learn/pwa/tools-and-debug), you can read more about this debugging tool.
+
+
+### Samsung Internet on Android with WebAPK
+
+The process is similar to the Chrome version. In this case, if the PWA manifest requires an update, during the next 24 hours the WebAPK will be updated on Wi-Fi after [minting the updated WebAPK](/learn/pwa/installation/#webapks).
+
+### Google Chrome and Microsoft Edge on desktop
+
+On desktop devices, when the PWA is launched, the browser determines the last time it checked the local manifest for changes. If the manifest hasn't been reviewed since the browser last started or hasn't been checked in the last 24 hours, the browser will make a network request for the manifest and then compare it against the local copy.
+
+When [selected properties](/manifest-updates/#cr-desktop-trigger) are updated, it will trigger an update after all windows have been closed.
+
+## Alerting the user
+
+Some updating strategies need a reload or a new navigation from the clients. You'll want to let the user know there is an update waiting but give them the chance to update the page when it is best for them.
+
+To inform the user, there are these options:
+
+* Use the DOM or [canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) to render a notice on the screen.
+* Use the [Web Notifications API](https://developer.mozilla.org/docs/Web/API/notification). This API is part of the push permission to generate a notification in the operating system. You will need to request web push permission to use it, even if you don't use the push messaging protocol from your server. This is the only option we have if the PWA is not opened.
+* Use the [Badging API](/badging-api/) to show that updates are available in the PWA's installed icon
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/s20eK3XJWqdxYvH4HwZV.png", alt="An update notification shown in the DOM.", width="800", height="821" %}.
+
+
+### More about the Badging API
+
+The [Badging API](/badging-api/) lets you mark your PWA's icon with a badge number, or a badge dot on compatible browsers. A badge dot is a tiny mark within the installed icon that expresses something is waiting inside the app.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/yicjcQZkdbS2sj732BEp.webp", alt="Example of Twitter with eight notifications and another app showing a flag type badge.", width="800", height="252" %}
+
+You need to call `setAppBadge(count)` on the `navigator` object to set a badge number. You can do this from the window or service worker's context when you know there is an update to alert the user.
+
+```js
+let unreadCount = 125;
+navigator.setAppBadge(unreadCount);
+```
+To clear the badge, you call `clearAppBadge()` on the same object:
+
+```js
+navigator.clearAppBadge();
+```
+
+{% Aside %}
+The Badging API works on a best-effort mechanism; the browser will do its best to match your request, but sometimes the browser will revert to a different approach. For example, a badge number is not available on some Android devices, so a dot badge is used, no matter the number you specify.
+{% endAside %}
+
+##  Resources
+
+- [Service Worker Lifecycle](/service-worker-lifecycle/)
+- [How Chrome handles updates to the web app manifest](/manifest-updates/)
+- [Synchronize and update a PWA in the Background](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/background-syncs)
+- [Richer offline experiences with the Periodic Background Sync API](/periodic-background-sync/)
+- [Push API](https://developer.mozilla.org/docs/Web/API/Push_API)
+- [Push notifications overview](/push-notifications-overview/)
+- [Badging for app icons](/badging-api/)
+- [Workbox 4: Implementing refresh-to-update-version flow using the workbox-window module](https://medium.com/google-developer-experts/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c)
+
diff --git a/src/site/content/en/learn/pwa/web-app-manifest/index.md b/src/site/content/en/learn/pwa/web-app-manifest/index.md
new file mode 100644
index 00000000000..afcaaf30f3e
--- /dev/null
+++ b/src/site/content/en/learn/pwa/web-app-manifest/index.md
@@ -0,0 +1,299 @@
+---
+title: Web app manifest
+description: >
+  The web app manifest is a JSON file that defines how the PWA should be treated as an installed application, including the look and feel and basic behavior within the operating system.
+authors:
+  - firt
+date: 2022-01-10
+updated: 2022-05-10
+---
+
+The web app manifest is a file you create that tells the browser how you want your web content to display as an app in the operating system. The manifest can include basic information such as the app's name, icon, and theme color; advanced preferences, such as desired orientation and app shortcuts; and catalog metadata, such as screenshots.
+
+{% Aside 'warning' %}
+A web app manifest is a required [installability criteria](/learn/pwa/installation/#installation-criteria) in every browser. Your PWA will not install without it.
+{% endAside %}
+
+Each PWA should include a single manifest per application, typically hosted in the root folder, and linked on all HTML pages your PWA can be installed from. Its official extension is `.webmanifest`, so you could name your manifest something like `app.webmanifest`.
+
+{% Aside %}
+While the recommended extension is `.webmanifest`, any filename will work as long as it's delivered with the `application/manifest+json` content type or another JSON-valid content type, such as `text/json`. As such, many PWAs, particularly older ones, use `manifest.json` instead.
+{% endAside %}
+
+## Adding a web app manifest to your PWA
+
+To create a web app manifest, first make a text file with a JSON object that contains at least a `name` field with a string value:
+{% Label %}app.webmanifest:{% endLabel %}
+
+```json
+{
+   "name": "My First Application"
+}
+```
+
+But creating the file is not enough, the browser needs to know it exists, too.
+
+### Linking to your manifest
+
+To make the browser aware of your web app manifest, you need to link it to your PWA using a `<link>` HTML element and the `rel` attribute set to `manifest` on all of your PWA's HTML pages. This is similar to how you link a CSS stylesheet to a document.
+
+{% Label %}index.html:{% endLabel %}
+
+```html/3
+<html lang="en">
+  <title>This is my first PWA</title>
+  <link rel="manifest" href="/app.webmanifest">
+```
+
+{% Aside 'caution' %}
+If your PWA includes multiple HTML pages, make sure to link its manifest to all of them.
+{% endAside %}
+
+### Debugging the manifest
+
+To ensure the manifest is set up correctly, you can use Inspector in Firefox and DevTools in every Chromium-based browser.
+
+{% Aside 'gotchas' %}
+If you see a message saying that the browser detected no manifest and you've included a `<link>` to it correctly, check to make sure you can load the manifest in the browser and that its content type is correctly set. You can also try renaming it to `manifest.json`.
+{% endAside %}
+
+
+### For Chromium browsers
+
+In DevTools
+
+1. In the left pane, under **Application**, select **Manifest**.
+1. Check the fields of the manifest as parsed by the browser.
+
+### For Firefox
+
+1. Open the Inspector.
+1. Go to the Application tab.
+1. Select the Manifest option in the left panel.
+1. Check the fields of the manifest as parsed by the browser.
+
+{% Aside 'caution' %}
+It's not possible to debug web app manifests in Safari, the only option you have to see if it's working is to try to install your PWA on iOS or iPadOS.
+{% endAside %}
+
+## Designing your PWA experience
+
+With your PWA now connected to its manifest, it's time to fill out the rest of the fields to define the experience for your users.
+
+{% Aside 'warning' %}
+Before the web app manifest spec was defined, several browsers, including Safari on iOS/iPadOS and Chrome on Android, supported custom `<meta>` elements to describe the application experience, such as `apple-mobile-web-app-capable`. Do not use these `<meta>` elements today; it's no longer recommended, and may harm the installation experience when the browser can't load the manifest properly; the experience you get as a fallback may be different and unexpected.
+{% endAside %}
+
+### Basic fields
+
+The first set of fields represents the core information about your PWA. They are used to build the installed PWA's icon and window and determine how it starts up. They are:
+
+`name`
+: Full name of your PWA. It will appear along with the icon in the operating system's home screen, launcher, dock, or menu.
+
+`short_name`
+: Optional, a shorter name of your PWA, used when there is not enough room to display the full value of the `name` field. Keep it under 12 characters to minimize the possibility of truncation.
+
+`icons`
+: Array of icon objects with `src`, `type`, `sizes`, and optional `purpose` fields, describing what images should represent the PWA.
+
+`start_url`
+: The URL the PWA should load when the user starts it from the installed icon. An absolute path is recommended, so if your PWA's home page is the root of your site, you could set this to ‘/' to open it when your app starts. If you don't provide a start URL, the browser can use the URL the PWA was installed from as a start. It can be a deep link, such as the details of a product instead of your home screen.
+
+`display`
+: One of `fullscreen`, `standalone`,  `minimal-ui`, or `browser`, describing how the OS should draw the PWA window. You can read more about the different display modes in the [App Design chapter](/learn/pwa/app-design/#display-modes). [Most](https://almanac.httparchive.org/en/2021/pwa#top-manifest-display-values) use cases implement `standalone`.
+
+`id`
+: A string that uniquely identifies this PWA against others that may be hosted on the same origin. If it's not set, the `start_url` will be used as a fallback value. Keep in mind that by changing the `start_url` in the future (such as when changing a query string value) you may be removing the browser's ability to detect that a PWA is already installed.
+
+{% Aside 'caution' %}
+If you published a PWA before September 2021 read about the best practice for adding an `id` property now in [Uniquely identifying PWAs with the web app manifest id property](https://developer.chrome.com/blog/pwa-manifest-id/).
+{% endAside %}
+
+{% Aside 'caution' %}
+Some manifest fields are not supported by every browser. When a browser doesn't support a field, it's just ignored and your manifest is still valid. You can learn more about each field at [Web App Manifests](https://developer.mozilla.org/docs/Web/Manifest).
+{% endAside %}
+
+#### Icons
+
+Your PWA's icon is its visual identity across your users' devices when installed, so it's important to define at least one. Because the `icons` property is a collection of icon objects, you can define several icons in different formats to provide the best icon experience for your users. Each browser will pick one or more icons based on its needs and the operating system it's installed on, the icons closer to the specifications needed.
+
+{% Aside 'caution' %}
+While PNGs can include transparency, providing transparent icons may cause unexpected issues on some operating systems. For example, iOS, iPadOS, and Android 8 and later fill in the transparency with a background color out of your control. For better compatibility, use a square non-transparent icon.
+{% endAside %}
+
+If you need to pick only one icon size, it should be 512 by 512 pixels. However, providing more sizes is recommended including 192 by 192, 384 by 384, and 1024 by 1024 pixel-sized images, too.
+
+```json
+"icons": [
+   {
+      "src": "icons/512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+   },
+   {
+      "src": "icons/1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
+   }
+]
+```
+
+{% Aside 'caution' %}
+Some resources will suggest you add more icon sizes for Android, such as 48 by 48, 72 by 72, 96 by 96, 144 by 144, 168 by 168, 256 by 256. While you can add as many sizes as you want, these are no longer necessary as they are Android icon sizes for legacy devices; even if you still have some users expecting those resolutions, the browser will resize one of your shipped icons.
+{% endAside %}
+
+If you don't provide an icon or the icons are not in the recommended sizes, on some platforms you won't pass [installation criteria](/learn/pwa/installation#installation-criteria). On other platforms, the icon will be automatically generated, for instance from a screenshot of the PWA or by using a generic icon.
+
+##### Maskable icons
+
+Some operating systems, such as Android, adapt icons to different sizes and shapes. For example, on Android 12, different manufacturers or settings can change the shape of icons from circles to squares to rounded-corner squares. To support these kinds of adaptive icons, you can provide a maskable icon using the `purpose` field.
+
+To do so, provide a square image file that has its main icon contained within a “safe zone”, a circle centered in the icon with a radius of 40 percent of the width of the icon. (See the image below.) Devices that support maskable icons will mask your icon as needed.
+
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/TcH5a39fkg9wYN34V4Qg.png", alt="The safe area marked as a 40 percent radius centered circle within the square icon", width="800", height="533" %}
+
+
+{% Aside 'caution' %}
+If you don't provide a maskable icon, devices that expect them may shrink your icon and make it into the shape they need with a white background.
+{% endAside %}
+
+Here's an example of a maskable icon rendered in a number of commonly used shapes:
+
+In the following image, if you use the icon at the left as a maskable icon, you will end up with poor results on devices when a shape mask is applied.
+
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/kKuLmXu1wuztin157EeD.png", alt="An icon that is not suitable for a maskable icon.", width="800", height="533" %}
+
+This image could be made usable with more padding.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/KVcK8eRlJBlvlfOt3BbG.png", alt="The icon with more padding is suitable for masks.", width="800", height="533" %}
+
+Maskable icons should be 512 by 512 at least. With one created, you can add it to your `icons` collection to improve the experience for supported devices:
+
+```json/13
+"icons": [
+   {
+      "src": "/icons/512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+   },
+   {
+      "src": "/icons/1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
+   },
+   {
+      "src": "/icons/512-maskable.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+   },
+]
+```
+In most cases, if your maskable icon isn't displaying well, you can improve it by adding more padding. [Maskable.app](https://maskable.app) is a free online tool to test and create a maskable version of your icon.
+
+### Recommended fields
+
+The next set of fields to include are ones that will improve your user's experience, even though they're not required for installability.
+
+`theme_color`
+: Default color for the application, sometimes affecting how the OS displays the site (for instance, the window and title bar color on desktop, or the status bar color on mobile devices). This color can be overridden by the HTML `theme-color` `<meta>` element.
+
+`background_color`
+: Placeholder color to display in the application's background before its stylesheet is loaded. Safari on iOS and iPadOS and most desktop browsers currently ignore this field.
+
+`scope`
+: Changes the navigation scope of the PWA, allowing you to define what is and isn't displayed within the installed app's window. For example, if you link to a page outside of the scope, it will be rendered in an in-app browser instead of within your PWA window. This will not, however, change the scope of your service worker.
+
+The next image shows how the `theme_color` field is used for the title bar on a desktop device when you install a PWA.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/KWRGFZ2yIb0KNSGG3fI0.png", alt="The same PWA installed on desktop with a different theme color.", width="800", height="533" %}
+
+{% Aside %}
+If you want to provide different theme colors for dark and light modes, you can override the manifest's value with a meta tag in the HTML using a media query, such as with `<meta name="theme-color" content="red" media="(prefers-color-scheme: dark)">`
+{% endAside %}
+
+When defining colors in the manifest, such as within `theme_color` and `background_color`, you should use CSS named colors, such as `salmon` or `orange`, RGB colors such as `#FF5500`, or color functions without transparency such as `rgb()` or `hsl()`. Check the [App design chapter](/learn/pwa/app-design/#theming-your-app) for more information.
+
+{% Aside 'warning' %}
+Do not use transparency, CSS variables, gradient functions, or color functions with transparency (such as `rgba()`) as they are not supported by most browsers. You will get inconsistent results.
+{% endAside %}
+
+#### Try it
+
+{% Glitch 'learn-pwa-web-app-manifest' %}
+
+#### Splash screens
+
+On some devices, a static image is rendered while your PWA is being loaded to provide immediate feedback to the user.
+
+Android uses the `theme_color`, `background_color`, and `icon` values to generate the splash screen.
+
+When you install a PWA on Android, the device will generate a splash screen with the information that comes from your manifest as seen in the following diagram.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/uO7fu1MHNzfipVZnbS7H.png", alt="A PWA on Android splash screen taking different values from the manifest.", width="800", height="533" %}
+
+Safari on iOS and iPadOS, on the other hand, doesn't use the web app manifest to generate splash screens. Instead, they use an image linked from a proprietary `<link>` element similar to how they handle icons. Check the [Enhancement chapter](/learn/pwa/enhancements) for more details.
+
+### Extended fields
+
+The next set of fields offers additional information about your PWA. They are all optional.
+
+`lang`
+: A language tag specifying the primary language of the manifest's values, such as `en` for English, `pt-BR` for Brazilian Portuguese, or `in` for Hindi.
+
+`dir`
+: The direction to display direction-capable manifest fields (such as `name`, `short_name`, and `description`). Valid values are `auto`, `ltr` (left-to-right), and `rtl` (right-to-left).
+
+`orientation`
+: Desired orientation for the app once installed. A game may set this to request a landscape-only orientation. [Several values](https://developer.mozilla.org/docs/Web/Manifest/orientation#values) are accepted, but if included it's typically `portrait` or `landscape` explicitly.
+
+{% Aside %}
+The Web Application Manifest spec doesn't allow internationalization within the file to localize fields' values and images. To support multilingual PWAs with different web app manifest values you need to implement a custom solution to change those values per language. Watch [5 tips for your PWA](https://www.youtube.com/watch?v=baSiSIyTGSk&ab_channel=GoogleChromeDevelopers) for more ideas.
+{% endAside %}
+
+### Promotional fields
+
+The fourth set of fields lets you provide promotional information about your PWA, for instance, in install flows, listings, and search results.
+
+`description`
+: An explanation of what the PWA does.
+
+`screenshots`
+: Array of screenshot objects with `src`, `type`, and `sizes` (similar to the `icons` object) intended to showcase the PWA. There are no size restrictions.
+
+`categories`
+: Array of categories the PWA should belong to be used as hints for listings, optionally from the list of [known categories](https://www.w3.org/TR/manifest-app-info/#categories-member)]. These values are typically lowercase.
+
+`iarc_rating_id`
+: The International Age Rating Coalition certification code for the PWA, if you have one. It is intended to be used to determine which ages your PWA is appropriate for.
+
+{% Aside 'caution' %}
+Promotional fields have been moved to their own spec: [Web App Manifest - Application Information](https://www.w3.org/TR/manifest-app-info/). Check that spec for the latest additions to these fields.
+{% endAside %}
+
+You can see these promotional fields in action today. On Android, for example, if your PWA is installable and you provide values for at least the `description` and `screenshots` fields, the installation dialog experience transforms from a simple "Add to the home screen" info bar, to a richer installation dialog similar to the one from an app store.
+
+On Android, you can get a nicer installation UI if you provide values for the promotional fields, as you can see in the next video
+
+{% Video src="video/RK2djpBgopg9kzCyJbUSjhEGmnw1/eU7EiYjZKtVsBrQ3xfBz.mp4" %}
+
+See these promotional fields in action:
+
+{% Glitch 'learn-pwa-web-app-manifest-promotional' %}
+
+
+### Capabilities Fields
+
+Finally, there are a number of fields related to different capabilities that your PWA can use in supported browsers, such as the `shortcuts`, `share_target`, `display_overrides` fields as we cover in the [Capabilities chapter](/learn/pwa/capabilities). There are also fields, like `related_apps` and `prefer_related_apps` (see the [Detection chapter](/learn/pwa/detection) for more information), to connect your PWA to installed apps, often from an app store.
+
+Many new fields may appear in the future while browsers add more capabilities to Progressive Web Apps.
+
+##  Resources
+
+- [Add a Web App Manifest](/add-manifest/)
+- [Adaptive icon support in PWAs with maskable icons](/maskable-icon/)
+- [Richer PWA installation UI](https://developer.chrome.com/blog/richer-pwa-installation/)
+- [MDN: Web App Manifest](https://developer.mozilla.org/docs/Web/Manifest)
diff --git a/src/site/content/en/learn/pwa/windows/index.md b/src/site/content/en/learn/pwa/windows/index.md
new file mode 100644
index 00000000000..e58400666ac
--- /dev/null
+++ b/src/site/content/en/learn/pwa/windows/index.md
@@ -0,0 +1,260 @@
+---
+title: Window management
+Authors:
+  -
+description: >
+  A PWA outside of the browser manages its own window. In this chapter, you will understand the APIs and capabilities for managing a window within the operating system.
+
+date: 2022-04-15
+---
+
+## The PWA window
+
+Running on your own window, managed by your PWA, has all the advantages and responsibilities of any window in that operating system, such as:
+
+* The ability to resize and move the window around on multi-window operating systems, like Windows or ChromeOS.
+* Sharing the screen with other app windows, as in iPadOS split mode or Android split-screen mode.
+* Appearing in docks, taskbars, and in the alt-tab menu on desktop, and multi-task window lists on mobile devices.
+* The ability to minimize, move the window across screens and desktops, and close it at any time.
+
+### Moving and resizing the window
+
+Your PWA window can be of any size and positioned anywhere on the screen on desktop operating systems. By default, when the user opens the PWA for the first time after installation, the PWA gets a default window size of a percentage of the current screen, with a maximum resolution of 1920x1080 positioned at the top-left corner of the screen.
+
+The user can move and resize the window, and the browser will remember the last preference, so the next time the user opens the app, the window will retain the size and position from the previous usage.
+
+There is no way to define your PWA's preferred size and position within the manifest. You can only reposition and resize the window using the JavaScript API. From your code, you can move and resize your own PWA window using the [`moveTo(x, y)`](https://developer.mozilla.org/docs/Web/API/Window/moveTo) and [`resizeTo(x, y)`](https://developer.mozilla.org/docs/Web/API/Window/resizeTo) functions of the `window` object.
+
+For example, you can resize and move your PWA window when the PWA loads using:
+
+```js
+document.addEventListener("DOMContentLoaded", event => {
+   // we can move only if we are not in a browser's tab
+   isBrowser = matchMedia("(display-mode: browser)").matches;
+   if (!isBrowser) {
+      window.moveTo(16, 16);
+      window.resizeTo(800, 600);
+   }
+});
+```
+
+You can query the current screen size and position using the `window.screen` object; you can detect when the window is resized using the `resize` event from the `window` object. There is no event for capturing the window move, so your option is to query the position frequently.
+
+{% Aside %}
+Instead of moving and resizing the window absolutely, you can move relatively and resize using `moveBy()` and `resizeBy()`.
+{% endAside %}
+
+
+{% Aside %}
+On mobile devices, moving or resizing your window won't make any changes on the screen.
+{% endAside %}
+
+### Browsing to other sites
+If you want to send the user to an external site that is out of the scope of your PWA, you can do so with a standard `<a href>` HTML element, using `location.href` or opening a new window on compatible platforms.
+
+Currently on all browsers, if your PWA is installed, when you browse to a URL that is out of the [scope of your manifest](/learn/pwa/web-app-manifest/#recommended-fields), the browser engine of your PWA will render an in-app browser within the context of your window.
+
+Some features of the in-app browsers are:
+
+* They appear on top of your content.
+* They have a static URL bar showing the current origin, the window's title, and a menu. Typically, they're themed with the `theme_color` of your manifest.
+* From the contextual menu, you can open that URL in the browser.
+* Users can close the browser or go back.
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/0SsThiNz4GDkJy6OiTHj.png", alt="An in-app browser on a desktop PWA when browsing a URL that is out-of-scope.", width="800", height="497" %}
+
+{% Aside %}
+While the in-app browser is on the screen, your PWA is waiting in the background, as if another window is obscuring it.
+{% endAside %}
+
+{% Aside 'gotchas' %}
+On iOS and iPadOS, the in-app browser uses SafariViewController, a Safari-rendering engine isolated from your PWA storage. Therefore, if the user has a session in Safari, it won't appear in your PWA, but it will appear within an in-app browser in your PWA.
+{% endAside %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/Gr4qJUx6hAFMyPLPyfQY.png", alt="An in-app browser on an iPhone when browsing a URL that is out-of-scope within a standalone PWA.", width="800", height="370" %}
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/UyohW4R5Sy79ffHri8cz.png", alt="An in-app browser on Android when browsing a URL that is out-of-scope within a standalone PWA.", width="800", height="1644" %}
+
+
+#### Authorization flows
+
+Many web authentication and authorization flows involve redirecting the user to a different URL in a different origin to acquire a token that will return to your PWA's origin, such as using [OAuth 2.0](https://oauth.net/2/).
+
+In these cases, the in-app browser follows the following process:
+
+1. The user opens your PWA and clicks login.
+1. Your PWA redirects the user to a URL that is out of the scope of the PWA so that the rendering engine will open an in-app browser within your PWA.
+1. The user can cancel the in-app browser and go back to your PWA at any time.
+1. The user logs into the in-app browser. The authentication server redirects the user to your PWA origin, sending the token as an argument.
+1. The in-app browser closes itself when it detects a URL that is part of the scope of the PWA.
+1. The engine redirects the main PWA window navigation to the URL that the authentication server went to while in the in-app browser.
+1. Your PWA gets the token, stores the token, and renders the PWA.
+
+#### Forcing a browser's navigation
+
+If you want to force open the browser with a URL and not an in-app browser, you can use the `_blank` target of `<a href>` elements. This works only on desktop PWAs; on mobile devices, there is no option to open a browser with a URL.
+
+```js
+function openBrowser(url) {
+	window.open("url", "_blank", "");
+}
+```
+
+### Opening new windows
+
+On desktop, users can open more than one window of the same PWA. Each window will be a different navigation to the same `start_url`, as if you were opening two browser tabs of the same URL.
+From the menu in the PWA, users can select File then New window, and from your PWA code, you can open a new window with the `open()` function. Check the [documentation](https://developer.mozilla.org/docs/Web/API/Window/open) for details.
+
+```js
+function openNewWindow() {
+	window.open("/", "new-window", "width=600,height=600");
+}
+```
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/CURym4RD66CqcTw4iPl5.png", alt="The same installed PWA with several windows opened on a desktop operating system.", width="800", height="580" %}
+
+Calling `open()` within a PWA window on iOS or iPadOS returns `null` and doesn't open a window. Opening new windows on Android creates a new in-app browser for the URL—even if the URL is within the scope of your PWA—that typically doesn't trigger an external browsing experience.
+
+{% Aside 'warning' %}
+The second argument of `open()` is the window's name. If the name you used is already opened, the engine will replace the opened window with that name with a new navigation. If you always want to open a new window, you must use different string values for a name.
+{% endAside %}
+
+
+{% Glitch 'mlearn-pwa-windows-basic' %}
+
+
+{% Aside 'gotchas' %}
+The functions `open()`, `moveTo()`, and `resizeTo()` don't need the `window.` prefix when writing JavaScript because `window` is the global object. You can just call `moveTo(0, 0)`. However, calling `window.moveTo(0, 0)` makes the code easier to understand.
+{% endAside %}
+
+### Window title
+
+The `<title>` element was primarily used for SEO purposes as the space within a browser tab is limited. When you move from the browser to your window in a PWA, all the title bar space is available to you.
+
+You can define the contents of the title bar:
+
+* Statically in your HTML `<title>` element.
+* Dynamically changing the `document.title` string property at any time.
+
+On desktop PWAs, the title is essential, and it's used in the title bar of the window and sometimes in the task manager or multi-task selection. If you have a single-page application, you may want to update your title on every route.
+
+{% Aside %}
+To reduce phishing within PWAs, some desktop browsers may have additional measures on the window's title. For example, if you don't use your app's name in the title, the browser may add a prefix with your PWA's name on it. Other browsers may render the current origin in the title bar for a few seconds when you change the title to highlight where the user navigated.
+{% endAside %}
+
+### Tabbed mode
+
+An experimental capability, known as *tabbed mode*​ will let your PWA have a tab-based design similar to a web browser. In this case, the user can have several tabs opened from the same PWA but all tied together in the same operating system window, as you can see in the following video:
+
+{% Video src="video/W3z1f5ZkBJSgL1V1IfloTIctbIF3/b1SL9QwJcgRXrVDeLKmK.mp4",
+loop="true",
+muted="true",
+playsinline="true",
+controls="true",
+poster="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/emg7quu4DyvYwlyzgDE1.png"
+%}
+
+You can read more about this experimental capability at [Tabbed application mode for PWA](/tabbed-application-mode/).
+
+{% Aside %}
+In the [Experimental chapter](/learn/pwa/experimental), you will see how you can start using experimental capabilities.
+{% endAside %}
+
+### Window controls overlay
+
+We've mentioned that you can change the window's title by defining the value of the `<title>` element or the `document.title` property. But it's always a string value. What if we could design the title bar as we wish, with HTML, CSS, and images?
+That's where Window Controls Overlay comes in, a new experimental capability in Microsoft Edge and Google Chrome for desktop PWAs.
+
+{% Aside %}
+Tabbed mode and window controls overlay capabilities define new values for the manifest's `display` member. To create compatibility with all devices, the manifest group has created a way to replace the [fallback `display` chain](/learn/pwa/app-design/#display-modes), so you can specify what `display` value to use if your first option is not available. Read more about it at [Preparing for the display modes of tomorrow](/display-override/).
+{% endAside %}
+
+You can read more about this capability at [Customize the window controls overlay of your PWA's title bar](/window-controls-overlay/).
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/B5UDAJzKTqCRdSy6B5is.png", alt="With window controls overlay, you can render content in the title bar.", width="800", height="544" %}
+
+## Multi-screen window placement
+
+With multiple screens, users will want to use all the space available to them. Users may:
+
+* Open a presentation on an external monitor.
+* Restore an opened window's position on the screen.
+* Favor screens that support touch.
+
+The [Multi-Screen Window Placement API](/multi-screen-window-placement/) allows PWAs to do just that and more.
+
+### Getting screen details
+
+The Multi-Screen Window Placement API adds a new method, `window.getScreenDetails()`, that returns an object with screens as an immutable array of attached screens. There's also a live object accessible from `ScreenDetails.currentScreen`, corresponding to the current `window.screen`.
+
+{% Aside 'gotchas' %}
+On some browsers, calling `window.getScreenDetails()` requires the user to grant permission to your PWAs.
+{% endAside %}
+
+The returned object also fires a [`screenschange` event](/multi-screen-window-placement/#the-screenschange-event) when the `screens` array changes. (This does not happen when attributes on individual screens are changed.) Individual screens, either `window.screen` or a screen in the `screens` array, also fire a `change` event when their attributes change.
+
+```js
+// Request an object with a screen objects
+const screenDetails = await window.getScreenDetails();
+screenDetails.screens[0].isPrimary;  // e.g. true
+screenDetails.screens[0].isInternal;  // e.g. true
+screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
+screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'
+
+// Access the live object corresponding to the current `window.screen`.
+// The object is updated on cross-screen window placements or device changes.
+screenDetails.currentScreen;
+screenDetails.addEventListener('screenschange', function() {
+ // NOTE: Does not fire on changes to attributes of individual screens.
+  const screenCount = screenDetails.screens.length;
+  const currentScreen screenDetails.currentScreen.id;
+});
+```
+
+If the user or the operating system moves your PWA's window from one screen to another, a [`currentscreenchange` event](/multi-screen-window-placement/#the-currentscreenchange-event) will also be fired from the screen details object.
+
+{% Aside %}
+You may also want to check the [Presentation API](https://developer.mozilla.org/docs/Web/API/Presentation_API) to display web content through large presentation devices such as projectors and network-connected televisions.
+{% BrowserCompat 'api.Presentation' %}
+{% endAside %}
+
+{% Glitch 'mlearn-pwa-windows-screens' %}
+
+
+## Screen wake lock
+
+Imagine this: you're in the kitchen following a recipe on your tablet. You've just finished prepping your ingredients. Your hands are a mess, and you turn back to your device to read the next step. Disaster! The screen's gone black! The [Screen Wake Lock API](https://developer.mozilla.org/docs/Web/API/Screen_Wake_Lock_API) is here for you and lets a PWA prevent screens from dimming, sleeping, or locking, allowing users to stop, start, leave, and return without worry.
+
+```js
+// Request a screen wake lock
+const wakeLock = await navigator.wakeLock.request();
+
+// Listen for wake lock release
+wakeLock.addEventListener('release', () => {
+ console.log(`Screen Wake Lock released: ${wakeLock.released}`);
+});
+// Manually release the wake lock
+wakeLock.release();
+```
+
+## Virtual keyboard
+
+Touch-based devices, such as phones and tablets, offer a virtual on-screen keyboard so the user can type when form elements of your PWA are in focus.
+
+Thanks to the [VirtualKeyboard API](/virtualkeyboard/), your PWA can now have more control of the keyboard on compatible platforms using the `navigator.virtualKeyboard` interface, including:
+
+* Showing and hiding the virtual keyboard with the functions `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()`.
+* Telling the browser that you are taking care of closing the virtual keyboard yourself by setting `navigator.virtualKeyboard.overlaysContent` equal to `true`.
+* Knowing when the keyboard appears and disappears with the event `geometrychange` of `navigator.virtualKeyboard`.
+* Setting the virtual keyboard policy on editing host elements (using `contenteditable`) with the `virtualkeyboardpolicy` HTML attribute. A policy lets you decide if you want the virtual keyboard to be handled automatically by the browser using the `auto` value, or handled by your script using the `manual` value.
+* Using CSS environmental variables for getting information about the virtual keyboard appearance, such as `keyboard-inset-height` and `keyboard-inset-top`.
+
+You can read more about this API on [Full control with the VirtualKeyboard API](/virtualkeyboard/).
+
+##  Resources
+
+- [Managing several displays with the Multi-Screen Window Placement API](/multi-screen-window-placement/)
+- [Tabbed application mode for PWAs](/tabbed-application-mode/)
+- [Stay awake with the Screen Wake Lock API](/wake-lock/)
+- [Full control with the VirtualKeyboard API](/virtualkeyboard/)
+- [Customize the window controls overlay of your PWA's title bar](/window-controls-overlay/)
+- [Display content in the title bar](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay)
diff --git a/src/site/content/en/learn/pwa/workbox/index.md b/src/site/content/en/learn/pwa/workbox/index.md
new file mode 100644
index 00000000000..30f8f56271d
--- /dev/null
+++ b/src/site/content/en/learn/pwa/workbox/index.md
@@ -0,0 +1,162 @@
+---
+title: Workbox
+description: >
+  Workbox is a set of modules that simplify common service worker interactions such as routing and caching. Each module addresses a specific aspect of service worker development. Workbox aims to make using service workers as easy as possible while allowing the flexibility to accommodate complex application requirements where needed.
+authors:
+  - firt
+date: 2022-01-10
+updated: 2022-02-23
+---
+
+Maintaining your service worker and cache storage logic can be a challenge as your PWA grows. [Workbox](https://developer.chrome.com/docs/workbox/what-is-workbox/), is a set of open-source libraries to help with that. Workbox encapsulates the low-level APIs, like the Service Worker API and Cache Storage API, and exposes more developer-friendly interfaces.
+
+Some tasks that it can help with are matching caching strategies to paths (or routing patterns), working with streams, and using features like background sync with proper fallbacks.
+
+Workbox can help you with managing your asset caching and serving needs. It's also the most used library for service workers; used by [54% of mobile sites](https://almanac.httparchive.org/en/2022/pwa#workbox-usage) and it is used in many build tools and CLIs, including the Angular CLI, Create-React-App, and Vue CLI. There are plugins to most other libraries and frameworks, too, such as Next.js.
+
+<div class="w-stats">
+  <div class="w-stat">
+    <p class="w-stat__figure">54<sub class="w-stat__sub">%</sub></p>
+    <p class="w-stat__desc">Mobile sites with service workers use the Workbox library</p>
+  </div>
+ </div>
+
+{% Aside %}
+While Workbox is the most common set of libraries for service workers in the PWA community, there are other solutions such as [sw-tools](https://github.com/veiss-com/sw-tools) and [UpUp](https://www.talater.com/upup/)
+{% endAside %}
+
+## Workbox modules
+
+Workbox includes several [libraries](https://developer.chrome.com/docs/workbox/modules/)&mdash;called modules internally&mdash;each focused on a different aspect of managing your assets and service worker behavior.
+
+Workbox modules work in different contexts, such as:
+
+- **Within a service worker context**: you import the modules you need and use them from your service worker file, for example to help manage caching and serve files with different strategies.
+- **Within the main `window` context**: helping to register a service worker and communicating with it
+- **As part of a build system**: for example, webpack, for purposes such as creating a manifest of your assets, or even generating your entire service worker.
+
+Some popular modules are:
+
+- [workbox-routing](https://developer.chrome.com/docs/workbox/modules/workbox-routing/): When the service worker intercepts requests this module routes those requests to different functions that provide responses; it's an implementation of the `fetch` event handler as mentioned in the [Serving chapter](/learn/pwa/serving).
+- [workbox-strategies](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/): A set of runtime caching strategies that handle responding to a request, such as cache first and stale while revalidate; it's an implementation of the different strategies mentioned in the [Serving chapter](/learn/pwa/serving).
+- [workbox-precaching](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/): It's an implementation of caching files in the `install` event handler of the service worker (also known as precaching), as mentioned in the [Caching chapter](/learn/pwa/caching). With this module you can easily precache a set of files and efficiently manage updates to those assets. We'll cover updating assets in the [Update chapter](/learn/pwa/update).
+- [workbox-expiration](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/): It is a plugin used with the caching strategies to remove cached requests based on the number of items in a cache or based on the age of the cached request. It helps manage your caches and sets limits on time and the number of items in each cache.
+- [workbox-window](https://developer.chrome.com/docs/workbox/modules/workbox-window/): A set of modules intended to run in the window context, which is to say, inside of your PWA web pages. You can simplify the process of service worker registration and updates and enable easier communication between code running in the service worker context and the window context.
+
+## Using Workbox
+
+Workbox provides different ways to integrate into your PWA. You can choose which fits best with your app's architecture:
+
+- [Workbox CLI](https://developer.chrome.com/docs/workbox/modules/workbox-cli/): A command-line utility that generates a complete service worker, injects a precache manifest, or copies needed Workbox files.
+- [Workbox Build](https://developer.chrome.com/docs/workbox/modules/workbox-build/): An npm module that generates a complete service worker, injects a precache manifest, and copies the Workbox files. This is meant to be integrated with your own build process.
+- [workbox-sw](https://developer.chrome.com/docs/workbox/modules/workbox-sw/): A way to load Workbox service worker packages from a CDN that doesn't use a build process.
+
+Workbox CLI provides a wizard that steps you through creating your service worker. To run the wizard, type the following at a command line:
+
+```bash
+npx workbox-cli wizard
+```
+
+{% Img src="image/RK2djpBgopg9kzCyJbUSjhEGmnw1/GTRYFMjNWIGjgp3Sqzba.png", alt="Workbox CLI in action in a terminal", width="800", height="394" %}
+
+## Caching and serving with Workbox
+
+A common use of Workbox is using the routing and strategies modules together to cache and serve files.
+
+The module [*workbox-strategies*](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/) provides, out of the box, the caching strategies discussed in the [Assets and data](/learn/pwa/assets-and-data) and [Serving](/learn/pwa/serving) chapters.
+
+The [*workbox-routing*](https://developer.chrome.com/docs/workbox/modules/workbox-routing/) module helps to sort incoming requests to your service worker and match them to the caching strategies or functions to get responses for those requests.
+
+After the matching of routes to strategies, Workbox also offers the ability to filter which responses will be added to the cache with the [*workbox-cacheable-response* plugin](https://developer.chrome.com/docs/workbox/modules/workbox-cacheable-response/). With this plugin you can for example cache only responses that returned without errors.
+
+{% Aside 'caution' %}
+While Workbox is distributed as npm modules, service workers themselves don't support ES modules syntax in every browser, so it's better to compile this sample code with a bundler before deploying it.
+{% endAside %}
+
+The following code sample uses a cache first strategy (via the `CacheFirst` module) to cache and serve page navigations.
+
+```js
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst } from 'workbox-strategies';
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
+
+const pageStrategy = new CacheFirst({
+  // Put all cached files in a cache named 'pages'
+  cacheName: 'pages',
+  plugins: [
+    // Only requests that return with a 200 status are cached
+    new CacheableResponsePlugin({
+      statuses: [200],
+    }),
+  ],
+});
+```
+
+The plugin allows you to tap into Workbox's caching and request resolution lifecycle. Here, the `CacheableResponsePlugin` is used to only cache requests that result in a 200 status, preventing bad requests from being saved into the cache.
+
+With the strategy created, it's time to register a route to use it. The following example calls `registerRoute()`, passing a Request object to its callback. If `request.mode` is `"navigate"` it uses the `CacheFirst` strategy (here called `pageStrategy`) defined in the previous code example.
+
+```js
+// Cache page navigations (HTML) with a Cache First strategy
+registerRoute( ({ request }) => request.mode === 'navigate',
+  pageStrategy );
+```
+
+Read the [Workbox documentation](https://developer.chrome.com/docs/workbox/) for more examples and best practices.
+
+## Offline fallback
+
+The _workbox-routing_ module also has an exported `setCatchHandler()`, that provides handling if a route throws an error. You can use this to set up an offline fallback to notify users that their requested route isn't currently available.
+
+Here, a combination of Workbox and the Cache Storage API provides an offline fallback using a cache-only strategy.
+First, during the service worker's install lifecycle, the `offline-fallbacks` cache is opened, and the array of offline fallbacks is added to the cache.
+
+```js
+import { setCatchHandler } from 'workbox-routing';
+
+// Warm the cache when the service worker installs
+self.addEventListener('install', event => {
+  const files = ['/offline.html']; // you can add more resources here
+  event.waitUntil(
+    self.caches.open('offline-fallbacks')
+        .then(cache => cache.addAll(files))
+  );
+});
+```
+
+Then, in `setCatchHandler()`, the destination of the request that threw an error is determined, and the `offline-fallbacks` cache is opened. If the destination is a document, the content of the offline fallback is returned to the user. If that doesn't exist, or the destination isn't a document (such as an image or stylesheet), an error response is returned. You can extend this pattern not just for documents but for images, videos, fonts, really anything that you'd want to provide as an offline fallback.
+
+```js
+// Respond with the fallback if a route throws an error
+setCatchHandler(async (options) => {
+  const destination = options.request.destination;
+  const cache = await self.caches.open('offline-fallbacks');
+  if (destination === 'document') {
+    return (await cache.match('/offline.html')) || Response.error();
+  }
+  return Response.error();
+});
+```
+
+## Recipes
+
+Several routing and caching patterns, like `NetworkFirst` navigations and offline fallbacks, are common enough to be encapsulated into reusable recipes. Check [workbox-recipes](https://developer.chrome.com/docs/workbox/modules/workbox-recipes/) as they can help you if they provide a solution suitable for your architecture. They are usually available as one line of code that you need to add to your service worker's code.
+
+### Caching and updating assets
+
+Caching assets also involves updating them. Workbox helps with updating your assets in whatever way you decide is best. It could be keeping them updated if they change on the server, or waiting until you have a new version of your app.
+You'll learn more about updating in the [Update chapter](/learn/pwa/update).
+
+## Play with Workbox
+
+You can play with Workbox right away using the following code lab:
+
+{% Aside 'codelab' %}
+[Working With Workbox](https://developers.google.com/codelabs/pwa-training/pwa03--working-with-workbox?hl=pt#).
+{% endAside %}
+
+## Resources
+
+- [Get Started with Workbox](https://developer.chrome.com/docs/workbox/)
+- [Workbox Modules](https://developer.chrome.com/docs/workbox/modules/)
+- [The ways of Workbox](https://developer.chrome.com/docs/workbox/the-ways-of-workbox/)
diff --git a/src/site/content/en/lighthouse-accessibility/accessibility-scoring/index.md b/src/site/content/en/lighthouse-accessibility/accessibility-scoring/index.md
deleted file mode 100644
index 67189e1c269..00000000000
--- a/src/site/content/en/lighthouse-accessibility/accessibility-scoring/index.md
+++ /dev/null
@@ -1,205 +0,0 @@
----
-layout: post
-title: "Lighthouse accessibility scoring"
-description: |
-  Learn how Lighthouse generates the accessibility score for your page.
-date: 2019-09-19
----
-
-The Lighthouse Accessibility score is a weighted average
-of all [accessibility audits](/lighthouse-accessibility).
-Weighting is based on
-[axe user impact assessments](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md).
-
-Each accessibility audit is pass or fail.
-Unlike the [Performance audits](/lighthouse-performance),
-a page doesn't get points for partially passing an accessibility audit.
-For example, if some buttons on a page have accessible names,
-but others don't, the page gets a 0 for the
-[**Buttons do not have an accessible name** audit](/button-name).
-
-The following table shows the weighting for each accessibility audit.
-More heavily weighted audits have a bigger effect on your score.
-[Manual audits](https://web.dev/lighthouse-accessibility/#additional-items-to-manually-check)
-aren't included in the table because they don't affect your score.
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Audit</th>
-        <th>Weight</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a href="/accesskeys/"><code>[accesskey]</code> values are not unique</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/bypass/">The page does not contain a heading, skip link, or landmark region</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/duplicate-id-active/"><code>[id]</code> attributes on active, focusable elements are not unique</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/heading-order">Headings skip levels</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/tabindex/">Some elements have a <code>[tabindex]</code> value greater than <code>0</code></a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-allowed-attr/"><code>[aria-*]</code> attributes do not match their roles</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-hidden-body"><code>[aria-hidden="true"]</code> is present on the document <code>&#60;body&#62;</code></a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-hidden-focus"><code>[aria-hidden="true"]</code> elements contain focusable descendants</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-input-field-name">Not all ARIA input fields have accessible names</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-required-attr/"><code>[role]</code>s do not have all required <code>[aria-*]</code> attributes</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-required-children/">Elements with an ARIA <code>[role]</code> that require children to contain a specific <code>[role]</code> are missing some or all of those required children</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-required-parent/"><code>[role]</code>s are not contained by their required parent element</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-roles/"><code>[role]</code> values are not valid</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-toggle-field-name/">Not all ARIA toggle fields have accessible names</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-valid-attr-value/"><code>[aria-*]</code> attributes do not have valid values</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/aria-valid-attr/"><code>[aria-*]</code> attributes are not valid or misspelled</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/duplicate-id-aria/">ARIA IDs are not all unique</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/button-name/">Buttons do not have an accessible name</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/document-title/">Document doesn't have a <code>&#60;title&#62;</code> element</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/form-field-multiple-labels">Form fields have multiple labels</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/frame-title/"><code>&#60;frame&#62;</code> or <code>&#60;iframe&#62;</code> elements do not have a title</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/image-alt/">Image elements do not have <code>[alt]</code> attributes</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/input-image-alt/"><code>&#60;input type="image"&#62;</code> elements do not have <code>[alt]</code> text</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/label/">Form elements do not have associated labels</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/link-name/">Links do not have a discernible name</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/object-alt/"><code>&#60;object&#62;</code> elements do not have <code>[alt]</code> text</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/color-contrast/">Background and foreground colors do not have a sufficient contrast ratio</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/definition-list/"><code>&#60;dl&#62;</code>s do not contain only properly ordered <code>&#60;dt&#62;</code> and <code>&#60;dd&#62;</code> groups, <code>&#60;script&#62;</code>, or <code>&#60;template&#62;</code> elements</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/dlitem/">Definition list items are not wrapped in <code>&#60;dl&#62;</code> elements</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/list/">Lists do not contain only <code>&#60;li&#62;</code> elements and script supporting elements (<code>&#60;script&#62;</code> and <code>&#60;template&#62;</code>)</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/listitem/">List items (<code>&#60;li&#62;</code>) are not contained within <code>&#60;ul&#62;</code> or <code>&#60;ol&#62;</code> parent elements</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/layout-table/">Presentational <code>&#60;table&#62;</code> elements do not avoid using <code>&#60;th&#62;</code>, <code>&#60;caption&#62;</code>, or the <code>[summary]</code> attribute</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/td-headers-attr/">Cells in a <code>&#60;table&#62;</code> element that use the <code>[headers]</code> attribute refer to an element id not found within the same table</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/th-has-data-cells/"><code>&#60;th&#62;</code> elements and elements with <code>[role="columnheader"/"rowheader"]</code> do not have data cells they describe</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/meta-refresh/">The document uses <code>&#60;meta http-equiv="refresh"&#62;</code></a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/meta-viewport/"><code>[user-scalable="no"]</code> is used in the <code>&#60;meta name="viewport"&#62;</code> element or the <code>[maximum-scale]</code> attribute is less than 5</a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/audio-caption/"><code>&#60;audio&#62;</code> elements are missing a <code>&#60;track&#62;</code> element with <code>[kind="captions"]</code></a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/video-caption/"><code>&#60;video&#62;</code> elements do not contain a <code>&#60;track&#62;</code> element with <code>[kind="captions"]</code></a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/video-description/"><code>&#60;video&#62;</code> elements do not contain a <code>&#60;track&#62;</code> element with <code>[kind="description"]</code></a></td>
-        <td>10</td>
-      </tr>
-      <tr>
-        <td><a href="/html-has-lang/"><code>&#60;html&#62;</code> element does not have a <code>[lang]</code> attribute</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/html-lang-valid/"><code>&#60;html&#62;</code> element does not have a valid value for its <code>[lang]</code> attribute</a></td>
-        <td>3</td>
-      </tr>
-      <tr>
-        <td><a href="/valid-lang/"><code>[lang]</code> attributes do not have a valid value</a></td>
-        <td>3</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/site/content/en/lighthouse-accessibility/accesskeys/accesskeys.png b/src/site/content/en/lighthouse-accessibility/accesskeys/accesskeys.png
deleted file mode 100644
index d94cc2263d1..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/accesskeys/accesskeys.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/accesskeys/index.md b/src/site/content/en/lighthouse-accessibility/accesskeys/index.md
deleted file mode 100644
index cd90ae12edd..00000000000
--- a/src/site/content/en/lighthouse-accessibility/accesskeys/index.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-layout: post
-title: "`[accesskey]` values are not unique"
-description: |
-  Learn how to improve your web page's accessibility for keyboard users by
-  removing duplicate accesskey values.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - accesskeys
----
-
-Access keys let users quickly [focus](/keyboard-access/#focus-and-the-tab-order)
-or activate an element on your page
-by pressing the specified key, usually in combination with the `Alt` key
-(or `Control+Alt` on Mac).
-
-Duplicating `accesskey` values creates unexpected effects
-for users navigating via the keyboard.
-
-{% Aside 'caution' %}
-Unless you're building a complex app (for example, a desktop publishing app),
-it's generally best to avoid access keys because of their limitations:
-- Not all browsers support access keys.
-- It's challenging to avoid conflicts with shortcut keys
-  across all operating systems and browsers.
-- Some access key values may not be present on all keyboards, particularly
-  if your app is intended for an international audience.
-- If users aren't aware of access keys, they may accidentally activate app
-  functionality, causing confusion.
-{% endAside %}
-
-## How the Lighthouse access key audit fails
-
-Lighthouse flags pages with duplicate access keys:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="accesskeys.png" alt="Lighthouse: Access keys are not unique">
-</figure>
-
-For example, these links both have `g` as their access key:
-```html
-<a href="google.com" accesskey="g">Link to Google</a>
-<a href="github.com" accesskey="g">Link to GitHub</a>
-```
-
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix duplicate access keys
-
-Evaluate the duplicate `accesskey` values flagged by Lighthouse
-and make each `accesskey` value unique.
-For example, to fix the example above,
-you can change the value for the GitHub link:
-```html/1
-<a href="google.com" accesskey="g">Link to Google</a>
-<a href="github.com" accesskey="h">Link to GitHub</a>
-```
-
-For each defined `accesskey`,
-make sure the value doesn't conflict with any default browser
-or screen reader shortcut keys.
-
-## Resources
-
-- [Source code for **`[accesskey]` values are not unique** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/accesskeys.js)
-- [accesskey attribute value must be unique (Deque University)](https://dequeuniversity.com/rules/axe/3.3/accesskeys)
diff --git a/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/aria-allowed-attr.png b/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/aria-allowed-attr.png
deleted file mode 100644
index 2575b9ba703..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/aria-allowed-attr.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/index.md b/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/index.md
deleted file mode 100644
index 142568177fe..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-allowed-attr/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-layout: post
-title: "`[aria-*]` attributes do not match their roles"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all elements with ARIA roles have appropriate ARIA
-  attributes.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-allowed-attr
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Each ARIA `role` supports a specific subset of `aria-*` attributes.
-Applying an attribute to a role that doesn't support it generally won't
-break the role, but it should still be fixed.
-
-## How Lighthouse identifies ARIA mismatches
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags mismatches between ARIA roles and `aria-*` attributes:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-allowed-attr.png" alt="Lighthouse audit showing an ARIA list role with an unsupported checked attribute">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">role definitions from the WAI-ARIA specification</a>
-to check for mismatches between ARIA roles and attributes.
-Each role has a set of states and properties (that is, _attributes_)
-that it can support or inherit.
-A page fails this audit
-when it contains an element with an ARIA role and an ARIA attribute
-that isn't supported for that role.
-
-In the example shown in the screenshot,
-the `aria-checked` attribute is not allowed on an element with the `list` role.
-This makes sense: list elements can't be checked or unchecked.
-
-An unsupported attribute generally won't break an element's role.
-In the example above, the element is still announced as a list, and
-the browser ignores the `aria-checked` attribute.
-However, this issue is still important to fix
-and probably indicates a mistaken assumption in your code.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to avoid ARIA mismatches
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">WAI-ARIA role definitions</a>.
-ARIA explicitly defines which attributes are allowed for each role.
-As long as an attribute is listed for the role you're using,
-you can apply it.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-allowed-attr.js" rel="noopener">Source code for <strong><code>[aria-*]</code> attributes do not match their roles</strong> audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-allowed-attr" rel="noopener">Elements must only use allowed ARIA attributes (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-hidden-body/aria-hidden-body.png b/src/site/content/en/lighthouse-accessibility/aria-hidden-body/aria-hidden-body.png
deleted file mode 100644
index 302f33fc4c6..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-hidden-body/aria-hidden-body.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-hidden-body/index.md b/src/site/content/en/lighthouse-accessibility/aria-hidden-body/index.md
deleted file mode 100644
index 28b43b40c09..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-hidden-body/index.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-layout: post
-title: "`[aria-hidden=\"true\"]` is present on the document `<body>`"
-description: |
-  Learn how to make sure your web page is accessible to assistive technology
-  users by avoiding the aria-hidden attribute on the body element.
-date: 2019-10-17
-web_lighthouse:
-  - aria-hidden-body
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Screen readers and other assistive technologies don't announce content that's
-marked as hidden. Applying the `aria-hidden="true"` attribute to your `<body>`
-element hides your entire web page from assistive technology users.
-
-## How Lighthouse identifies hidden body elements
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags pages whose `<body>` element has an `aria-hidden="true"` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-hidden-body.png"
-  alt="Lighthouse audit showing that a page's body element has the aria-hidden attribute">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to make your page accessible to assistive technology users
-
-Remove the `aria-hidden="true"` attribute
-from the `<body>` element of your page.
-
-One reason developers mistakenly hide the body element is to prevent assistive
-technologies from announcing the main content of a page while a
-[modal dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) is open.
-However, hiding the body hides _all_ page content from assistive technology users,
-including the dialog.
-
-A better solution is to apply the `aria-hidden` attribute
-to a lower-level container element while the dialog is open.
-For example, this sample hides the `<main>` element,
-which precedes the dialog in the HTML:
-
-```html/6
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    …
-  </head>
-  <body>
-    <main aria-hidden="true">
-      <h1>Page title</h1>
-      <p>Main page content</p>
-    </main>
-    <div class="dialog" role="dialog" aria-modal="true" aria-label="Sample dialog">
-      <p>Sample dialog content</p>
-      <button>Close dialog</button>
-    </div>
-  </body>
-</html>
-```
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-hidden-body.js" rel="noopener">Source code for **`[aria-hidden="true"]` is present on the document `<body>`** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-hidden-body" rel="noopener">aria-hidden="true" must not be present on the document &#60;body&#62; (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/aria-hidden-focus.png b/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/aria-hidden-focus.png
deleted file mode 100644
index 5a425a796ca..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/aria-hidden-focus.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/index.md b/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/index.md
deleted file mode 100644
index 73a62d90c3b..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-hidden-focus/index.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: "`[aria-hidden=\"true\"]` elements contain focusable descendants"
-description: |
-  Learn how to make sure assistive technology users can't navigate to
-  focusable elements that are supposed to be hidden.
-date: 2019-10-17
-web_lighthouse:
-  - aria-hidden-focus
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Using the `aria-hidden="true"` attribute on an element hides the element
-and all its children from screen readers and other assistive technologies.
-If the hidden element contains a **focusable** element,
-assistive technologies won't read the focusable element,
-but keyboard users will still be able to navigate to it,
-which can cause confusion.
-
-## How Lighthouse identifies partially hidden focusable elements
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags focusable elements that have parents with the `aria-hidden="true"` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-hidden-focus.png"
-  alt="Lighthouse audit showing focusable elements that have parents with the aria-hidden attribute">
-</figure>
-
-{% include 'content/lighthouse-accessibility/focusable-els.njk' %}
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix partially hidden focusable elements
-
-If you're hiding a container element on your page using `aria-hidden`,
-you also need to prevent users from navigating to any focusable elements
-inside that container.
-
-One way to do that is to use JavaScript to apply a `tabindex="-1"` attribute
-to all focusable elements in the container.
-However, as implied by the list above,
-a query that captures all focusable elements can get complicated quickly.
-
-If you're hiding the container element from sighted users,
-consider using one of the following strategies instead:
-- Add a `hidden` attribute to the container element.
-- Apply the `display: none` or the `visibility: hidden` CSS property
-  to the container element.
-
-If you can't visually hide the container element—for example,
-if it's behind a modal dialog with a translucent background—consider
-using <a href="https://github.com/WICG/inert" rel="noopener">the WICG's `inert` polyfill</a>.
-The polyfill emulates the behavior of a proposed `inert` attribute,
-which prevents elements from being read or selected.
-
-{% Aside 'caution' %}
-The `inert` polyfill is experimental and may not work as expected in all cases.
-Test carefully before using in production.
-{% endAside %}
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-hidden-focus.js" rel="noopener">Source code for **`[aria-hidden="true"]` elements contain focusable descendants** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-hidden-focus" rel="noopener">aria-hidden elements do not contain focusable elements (Deque University)</a>
-- <a href="https://github.com/WICG/inert" rel="noopener">WICG `inert` polyfill</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-input-field-name/aria-input-field-name.png b/src/site/content/en/lighthouse-accessibility/aria-input-field-name/aria-input-field-name.png
deleted file mode 100644
index 2f9ec8bc01b..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-input-field-name/aria-input-field-name.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-input-field-name/index.md b/src/site/content/en/lighthouse-accessibility/aria-input-field-name/index.md
deleted file mode 100644
index c67e1541ace..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-input-field-name/index.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-layout: post
-title: "ARIA input fields do not have accessible names"
-description: |
-  Learn how to improve your web page's accessibility by making sure that
-  assistive technology users can access the names of your input fields.
-date: 2019-10-17
-web_lighthouse:
-  - aria-input-field-name
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-{% include 'content/lighthouse-accessibility/accessible-names.njk' %}
-
-## How Lighthouse identifies ARIA inputs without accessible names
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags custom ARIA input fields whose names
-aren't accessible to assistive technologies:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-input-field-name.png"
-    alt="Lighthouse audit showing custom input elements without accessible names">
-</figure>
-
-Elements that have any of the following ARIA roles
-but don't have accessible names will cause this audit to fail:
-- <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#combobox" rel="noopener">combobox</a>
-- <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox" rel="noopener">listbox</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#searchbox" rel="noopener">searchbox</a>
-- <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#slider" rel="noopener">slider</a>
-- <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#spinbutton" rel="noopener">spinbutton</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#textbox" rel="noopener">textbox</a>
-
-This audit is similar to the
-[**Not all ARIA toggle fields have accessible names** audit](/aria-toggle-field-name)
-but checks a different set of ARIA roles.
-
-{% include 'content/lighthouse-accessibility/use-native.njk' %}
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add accessible names to your custom ARIA input fields
-
-The easiest way to provide an accessible name for most elements
-is to include text content in the element.
-However, custom input fields typically don't have inner text,
-so you can use one of two strategies instead.
-
-### Option 1: Add an `aria-label` attribute to the element
-
-Use the `aria-label` attribute to define the name for the current element.
-
-For example, this custom combobox will be announced as "country"
-to assistive technology users:
-
-```html
-<div id="combo1" aria-label="country" role="combobox">England</div>
-```
-
-### Option 2: Refer to another element using `aria-labelledby`
-
-Use the `aria-labelledby` attribute to identify another element, using its ID,
-to serve as the name for the current element.
-
-For example, this custom searchbox refers to the `searchLabel` paragraph
-as its label and will be announced as "Search currency pairs":
-
-```html
-<p id="searchLabel">Search currency pairs:</p>
-<div id="search"
-    role="searchbox"
-    contenteditable="true"
-    aria-labelledby="searchLabel"></div>
-```
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-input-field-name.js" rel="noopener">Source code for **Not all ARIA input fields have accessible names** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-input-field-name" rel="noopener">ARIA input fields have an accessible name (Deque University)</a>
-- [Labels and text alternatives](/labels-and-text-alternatives)
-- [Use semantic HTML for easy keyboard wins](/use-semantic-html)
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-attr/aria-required-attr.png b/src/site/content/en/lighthouse-accessibility/aria-required-attr/aria-required-attr.png
deleted file mode 100644
index 85fe981a0b0..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-required-attr/aria-required-attr.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-attr/index.md b/src/site/content/en/lighthouse-accessibility/aria-required-attr/index.md
deleted file mode 100644
index 61fe58f4a85..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-required-attr/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: post
-title: "`[role]`s do not have all required `[aria-*]` attributes"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all elements with ARIA roles have the required ARIA
-  attributes.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-required-attr
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Some ARIA roles have required `aria-*` attributes
-that provide essential information about state and functionality.
-For example, the `option` role requires the `aria-selected` attribute.
-If ARIA roles don't have the required attributes,
-assistive technology users won't be able to successfully interact with them.
-
-## How Lighthouse identifies missing required states and properties
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags ARIA roles that don't have the required states and properties:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-required-attr.png" alt="Lighthouse audit showing ARIA role missing required states and properties">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">role definitions from the WAI-ARIA specification</a>
-to check for a role's required attributes.
-A page fails this audit
-when it contains a role that's missing its required states or properties.
-
-A missing required attribute won't break the element's role.
-In the example above,
-the element is still announced as a heading and assigned a default level of `2`.
-However, this issue is still important to fix and
-probably indicates a mistaken assumption in your code.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add missing states and properties to ARIA roles
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">WAI-ARIA role definitions</a>
-to see what states and properties are required for the roles on your page.
-
-Since properties don't change, you can simply add them to the elements
-that Lighthouse flagged.
-
-States, however, do change as the user interacts with your page,
-so you'll need to add JavaScript to change the state value
-when the relevant event occurs.
-For example, an `option` role's `aria-selected` state should toggle
-between `true` and `false` when the user clicks the element or
-presses `Enter` or `Space` when the element is focused.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-required-attr.js" rel="noopener">Source code for **`[role]`s do not have all required `[aria-*]` attributes** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-required-attr" rel="noopener">Required ARIA attributes must be provided (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-children/aria-required-children.png b/src/site/content/en/lighthouse-accessibility/aria-required-children/aria-required-children.png
deleted file mode 100644
index 99f6e1c0f77..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-required-children/aria-required-children.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-children/index.md b/src/site/content/en/lighthouse-accessibility/aria-required-children/index.md
deleted file mode 100644
index f873360420d..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-required-children/index.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-layout: post
-title: "Elements with an ARIA `[role]` that require children to contain a specific `[role]` are missing some or all of those required children"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all elements with ARIA roles have the required child
-  elements.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-required-children
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Some ARIA roles require specific child roles.
-For example, the `tablist` role must own at least one element
-with the `tab` role.
-If the required child roles aren't present,
-assistive technologies may convey confusing information about your page,
-like announcing a tab set with no tabs.
-
-## How Lighthouse identifies missing child roles
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags ARIA roles that don't have the required child roles:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-required-children.png" alt="Lighthouse audit showing ARIA role missing required child role(s)">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">role definitions from the WAI-ARIA specification</a>
-to check for
-<a href="https://www.w3.org/TR/wai-aria/#mustContain" rel="noopener">required owned elements</a>—that is,
-required child roles.
-A page fails this audit
-when it contains a parent role that's missing its required child roles.
-
-In the example Lighthouse audit above,
-the `radiogroup` role requires child elements with the `radio` role.
-Since there are no children with a `radio` role defined,
-the audit fails.
-This makes sense,
-as it would be confusing to have a radio group without any radio buttons.
-
-This issue is important to fix and may break the experience for users.
-In the example above, the element may still be announced as a radio group,
-but users won't know how many radio buttons it contains.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add missing child roles
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">WAI-ARIA role definitions</a>
-to see which child roles are required for the elements that Lighthouse flagged.
-(The spec refers to required children as
-<a href="https://www.w3.org/TR/wai-aria/#mustContain" rel="noopener">required owned elements</a>.)
-
-{% include 'content/lighthouse-accessibility/aria-child-parent.njk' %}
-
-## Resources
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-required-children.js" rel="noopener">Source code for **Elements with an ARIA `[role]` that require children to contain a specific [role] are missing some or all of those required children** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-required-children" rel="noopener">Certain ARIA roles must contain particular children (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-parent/aria-required-parent.png b/src/site/content/en/lighthouse-accessibility/aria-required-parent/aria-required-parent.png
deleted file mode 100644
index 185bba6654e..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-required-parent/aria-required-parent.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-required-parent/index.md b/src/site/content/en/lighthouse-accessibility/aria-required-parent/index.md
deleted file mode 100644
index 37da121cdd4..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-required-parent/index.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: "`[role]`s are not contained by their required parent element"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all elements with ARIA roles are contained by the
-  required parent element.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-required-parent
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Some ARIA roles must be owned by specific parent roles.
-For example, the `tab` role must have
-an element with the `tablist` role as a parent.
-If the required parent role isn't present,
-assistive technologies may announce the child roles as plain text content
-rather than the intended control.
-
-## How Lighthouse identifies missing parent roles
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags ARIA child roles that aren't contained by the required parent:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-required-parent.png" alt="Lighthouse audit showing ARIA role missing required parent role">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">role definitions from the WAI-ARIA specification</a>
-to check for
-<a href="https://www.w3.org/TR/wai-aria/#scope" rel="noopener">required context roles</a>—that is,
-required parent roles.
-A page fails this audit
-when it contains a child role that's missing its required parent role.
-
-In the example Lighthouse audit above,
-the `listitem` role requires a parent `group` or `list`.
-Since there's no parent role defined,
-the audit fails.
-This makes sense,
-as it would be confusing to have a list item that isn't part of a list.
-
-This issue is important to fix and may break the experience for users.
-In the example above, the element would be announced as plain text content,
-and its `listitem` role would be ignored.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add missing parent roles
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">WAI-ARIA role definitions</a>
-to see which parent roles are required for the elements that Lighthouse flagged.
-(The spec refers to required parents as
-<a href="https://www.w3.org/TR/wai-aria/#scope" rel="noopener">required context roles</a>.)
-
-{% include 'content/lighthouse-accessibility/aria-child-parent.njk' %}
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-required-parent.js" rel="noopener">Source code for **`[role]`s are not contained by their required parent element** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-required-parent" rel="noopener">Certain ARIA roles must be contained by particular parent elements (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-roles/aria-roles.png b/src/site/content/en/lighthouse-accessibility/aria-roles/aria-roles.png
deleted file mode 100644
index 88ae4a10698..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-roles/aria-roles.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-roles/index.md b/src/site/content/en/lighthouse-accessibility/aria-roles/index.md
deleted file mode 100644
index e445b1192d1..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-roles/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: post
-title: "`[role]` values are not valid"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all ARIA roles are valid.
-date: 2019-05-02
-web_lighthouse:
-  - aria-roles
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-The ARIA specification includes a
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">defined set of roles</a>.
-When the value for an element's `role` attribute doesn't match a role from the set,
-assistive technologies can't announce the element correctly
-or interact with it as the developer intended.
-
-## How Lighthouse determines an ARIA role has an invalid value
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags ARIA roles with invalid values:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-roles.png" alt="Lighthouse audit showing ARIA role has invalid values">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">role definitions from the WAI-ARIA specification</a>
-to check that all `role` attributes have valid values.
-A page fails this audit when it contains an element with an invalid `role` value.
-In the example Lighthouse audit above,
-`button` has been misspelled as
-`buton`, which isn't a valid role value.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix invalid ARIA role values
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">WAI-ARIA role definitions</a>
-to see the full list of valid roles.
-Make sure all `role` attributes are set to a value in the definitions list.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-roles.js" rel="noopener">Source code for **`[role]` values are not valid** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-roles" rel="noopener">ARIA roles used must conform to valid values (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/aria-toggle-field-name.png b/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/aria-toggle-field-name.png
deleted file mode 100644
index 84bddb2cadd..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/aria-toggle-field-name.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/index.md b/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/index.md
deleted file mode 100644
index 9431f58803f..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-toggle-field-name/index.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-layout: post
-title: "ARIA toggle fields do not have accessible names"
-description: |
-  Learn how to improve your web page's accessibility by making sure that
-  assistive technology users can access the names of custom radio buttons,
-  checkboxes, and switches.
-date: 2019-10-17
-web_lighthouse:
-  - aria-toggle-field-name
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-{% include 'content/lighthouse-accessibility/accessible-names.njk' %}
-
-## How Lighthouse identifies ARIA toggle fields without accessible names
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags custom ARIA toggle fields whose names
-aren't accessible to assistive technologies:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-toggle-field-name.png"
-    alt="Lighthouse audit showing custom toggle elements without accessible names">
-</figure>
-
-Elements that have any of the following ARIA roles
-but don't have accessible names will cause this audit to fail:
-- <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox" rel="noopener">checkbox</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox" rel="noopener">menuitemcheckbox</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#menuitemradio" rel="noopener">menuitemradio</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#radio" rel="noopener">radio</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#switch" rel="noopener">switch</a>
-
-This audit is similar to the
-[**Not all ARIA input fields have accessible names** audit](/aria-input-field-name)
-but checks a different set of ARIA roles.
-
-{% include 'content/lighthouse-accessibility/use-native.njk' %}
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add accessible names to your custom ARIA toggle fields
-
-### Option 1: Add inner text to the element
-
-The easiest way to provide an accessible name for most elements
-is to include text content inside the element.
-
-For example, this custom checkbox will be announced as "Newspaper"
-to assistive technology users:
-
-```html
-<div id="checkbox1" role="checkbox">Newspaper</div>
-```
-
-### Option 2: Add an `aria-label` attribute to the element
-If you can't add inner text—for example, if you don't want
-the element's name to be visible—use
-the `aria-label` attribute.
-
-This custom switch will be announced as "Toggle blue light"
-to assistive technology users:
-
-```html
-<div id="switch1"
-    role="switch"
-    aria-checked="true"
-    aria-label="Toggle blue light">
-    <span>off</span>
-    <span>on</span>
-</div>
-```
-
-### Option 3: Refer to another element using `aria-labelledby`
-
-Use the `aria-labelledby` attribute to identify another element, using its ID,
-to serve as the name for the current element.
-
-For example, this custom menu radio button refers to the `menuitem1Label` paragraph
-as its label and will be announced as "Sans-serif":
-
-```html
-<p id="menuitem1Label">Sans-serif</p>
-<ul role="menu">
-    <li id="menuitem1"
-        role="menuitemradio"
-        aria-labelledby="menuitem1Label"
-        aria-checked="true"></li>
-</ul>
-```
-
-## Resources
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-toggle-field-name.js" rel="noopener">Source code for **Not all ARIA toggle fields have accessible names** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-toggle-field-label" rel="noopener">ARIA toggle fields have an accessible name (Deque University)</a>
-- [Labels and text alternatives](/labels-and-text-alternatives)
-- [Use semantic HTML for easy keyboard wins](/use-semantic-html)
diff --git a/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/aria-valid-attr-value.png b/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/aria-valid-attr-value.png
deleted file mode 100644
index 97b418289e4..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/aria-valid-attr-value.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/index.md b/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/index.md
deleted file mode 100644
index ebfffb1d5d9..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-valid-attr-value/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: post
-title: "`[aria-*]` attributes do not have valid values"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all ARIA attributes have valid values.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-valid-attr-value
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Each ARIA `role` supports a specific subset of `aria-*` attributes
-that define the state and properties of that role.
-For example, the `aria-selected` attribute indicates whether
-an element is currently selected depending on whether its value
-is `true` or `false`.
-
-If an element's ARIA attribute doesn't have a valid value,
-assistive technologies won't be able
-to interact with it as the developer intended.
-
-## How Lighthouse determines an ARIA attribute's value is invalid
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags ARIA attributes with invalid values:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-valid-attr-value.png" alt="Lighthouse audit showing aria-checked without the value 'true'">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties" rel="noopener">states and properties from the WAI-ARIA specification</a>
-to check that all ARIA attributes have valid values.
-A page fails this audit
-when it contains an attributes with an invalid value.
-
-In the example Lighthouse audit above,
-`aria-checked` should be set to either `true`, `false`, or `mixed`.
-
-{% Aside %}
-Browsers treat HTML Boolean attributes, such as `hidden` or `checked`,
-as true if they're present in an element's opening tag
-and false if they're not.
-
-However, ARIA attributes require an _explicit_ `true` or `false` value.
-This is because most ARIA attributes actually support [a third state](https://www.w3.org/TR/wai-aria-1.1/#valuetype_true-false-undefined)—`undefined`—or a [tristate](https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate)
-with an intermediate `mixed` value.
-{% endAside %}
-
-This issue is important to fix and
-probably indicates a mistaken assumption in your code. In the example above, the
-element is still announced as a checkbox, but it will have an implicit
-state of `unchecked`, which may not be what's intended.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix invalid ARIA attribute values
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties" rel="noopener">WAI-ARIA supported states and properties</a>
-to see the full list of valid ARIA attribute values.
-Check that you have correct values for any attributes you use.
-
-Also verify that your JavaScript is updating ARIA state values
-as users interact with your page.
-For example, an `option` role's `aria-selected` state should toggle
-between `true` and `false` when the user clicks the element or
-presses `Enter` or `Space` when the element is focused.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-valid-attr-value.js" rel="noopener">Source code for **`[aria-*]` attributes do not have valid values** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-valid-attr-value" rel="noopener">ARIA attributes must conform to valid values (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noopener">Role definitions from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/aria-valid-attr/aria-valid-attr.png b/src/site/content/en/lighthouse-accessibility/aria-valid-attr/aria-valid-attr.png
deleted file mode 100644
index c4e0f26f20c..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/aria-valid-attr/aria-valid-attr.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/aria-valid-attr/index.md b/src/site/content/en/lighthouse-accessibility/aria-valid-attr/index.md
deleted file mode 100644
index e5a81e547ad..00000000000
--- a/src/site/content/en/lighthouse-accessibility/aria-valid-attr/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: post
-title: "`[aria-*]` attributes are not valid or misspelled"
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by making sure that all ARIA attributes are valid.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - aria-valid-attr
----
-
-{% include 'content/lighthouse-accessibility/about-aria.njk' %}
-
-Each ARIA `role` supports a specific subset of `aria-*` attributes
-that define the state and properties of that role.
-For example, the `aria-selected` attribute is used to indicate whether
-elements with `option`, `tab`, or similar roles are currently selected.
-
-If an element's ARIA attribute is invalid,
-assistive technologies won't be able
-to interact with it as the developer intended.
-
-## How Lighthouse checks for invalid ARIA attributes
-
-<a href="https://developers.google.com/web/tools/lighthouse" rel="noopener">Lighthouse</a>
-flags invalid ARIA attributes:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="aria-valid-attr.png" alt="Lighthouse audit showing ARIA attribute has invalid value">
-</figure>
-
-Lighthouse uses the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties" rel="noopener">states and properties from the WAI-ARIA specification</a>
-to check that all ARIA attributes are valid.
-A page fails this audit
-when it contains an invalid attribute.
-
-In the example Lighthouse audit above,
-the `aria-checked` attribute has been misspelled as
-`aria-cheked`, making it invalid.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix invalid ARIA attributes
-
-Refer to the
-<a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties" rel="noopener">WAI-ARIA supported states and properties</a>
-to see the full list of valid ARIA attributes.
-Make sure all ARIA attributes on your page match one of the defined states or properties.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/aria-valid-attr.js" rel="noopener">Source code for **`[aria-*]` attributes are not valid or misspelled** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/aria-valid-attr" rel="noopener">ARIA attributes must conform to valid names (Deque University)</a>
-- <a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties" rel="noopener">States and properties from the WAI-ARIA specification</a>
diff --git a/src/site/content/en/lighthouse-accessibility/audio-caption/index.md b/src/site/content/en/lighthouse-accessibility/audio-caption/index.md
deleted file mode 100644
index f0de6c640eb..00000000000
--- a/src/site/content/en/lighthouse-accessibility/audio-caption/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: "`<audio>` elements are missing a `<track>` element with `[kind=\"captions\"]`"
-description: |
-  Learn how to improve the accessibility of audio on your web page by providing
-  closed captions.
-date: 2019-05-02
-updated: 2020-03-25
-web_lighthouse:
-  - audio-caption
----
-
-{% Banner 'caution', 'body' %}This audit has been deprecated.{% endBanner %}
-
-Captions make audio elements usable for deaf or hearing-impaired users,
-providing critical information such as who is talking, what they're saying,
-and other non-speech information.
-
-## How the Lighthouse audio track audit fails
-
-Lighthouse flags `<audio>` elements that are missing `<track>` elements.
-
-<!--
-***Todo*** I tried very hard to get this audit to fail.
-But no matter what, it seems to pass,
-even with all sorts of crazy errors.
-See glitch: [meggin-accessibility-assets](https://glitch.com/edit/#!/meggin-accessibiity-assets)
-<figure class="w-figure">
-  <img class="w-screenshot" src="" alt="Lighthouse audit showing Audio element missing captions">
-</figure>
--->
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add an audio track
-
-Add at least one `<track>` element to the `<audio>` element
-with attribute `kind="captions"`:
-
-```html
-<audio>
-   <source src="favoriteSong.mp3" type="audio/mp3">
-   <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
-   <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
-</audio>
-```
-
-## Resources
-
-- [Source code for **`<audio>` elements are missing a `<track>` element with `[kind="captions"]`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/audio-caption.js)
-- [`<audio> `elements must have a captions `<track>` (Deque University)](https://dequeuniversity.com/rules/axe/3.3/audio-caption)
diff --git a/src/site/content/en/lighthouse-accessibility/button-name/button-name.png b/src/site/content/en/lighthouse-accessibility/button-name/button-name.png
deleted file mode 100644
index 502ddbbf9a0..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/button-name/button-name.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/button-name/index.md b/src/site/content/en/lighthouse-accessibility/button-name/index.md
deleted file mode 100644
index 93c32d2fe4f..00000000000
--- a/src/site/content/en/lighthouse-accessibility/button-name/index.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: Buttons do not have an accessible name
-description: |
-  Learn how to improve the accessibility of your web page by making sure that
-  all buttons have names that assistive technology users can access.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - button-name
----
-
-When a button doesn't have an accessible name,
-screen readers and other assistive technologies announce it as _button_,
-which provides no information to users about what the button does.
-
-## How the Lighthouse button name audit fails
-
-Lighthouse flags buttons that don't have text content or an `aria-label` property:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="button-name.png" alt="Lighthouse audit showing buttons do not have an accessible name">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add accessible names to buttons
-
-For buttons with visible labels,
-add text content to the `button` element.
-Make the label a clear call to action.
-For example:
-
-```html
-<button>Book room</button>
-```
-
-For buttons without visible labels, like icon buttons,
-use the `aria-label` attribute to clearly describe the action
-to anyone using an assistive technology, for example:
-
-{% Glitch {
-  id: 'lh-button-name',
-  path: 'index.html',
-  previewSize: 0,
-  height: 480
-} %}
-
-{% Aside %}
-This sample app relies on Google's
-[Material icon font](https://google.github.io/material-design-icons/),
-which uses [ligatures](https://alistapart.com/article/the-era-of-symbol-fonts/)
-to convert the buttons' inner text to icon glyphs.
-Assistive technologies will refer to the `aria-label`
-rather than the icon glyphs when announcing the buttons.
-{% endAside %}
-
-See also [Label buttons and links](/labels-and-text-alternatives#label-buttons-and-links).
-
-## Resources
-
-- [Source code for **Buttons do not have an accessible name** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/button-name.js)
-- [Buttons must have discernible text (Deque University)](https://dequeuniversity.com/rules/axe/3.3/button-name)
diff --git a/src/site/content/en/lighthouse-accessibility/bypass/bypass.png b/src/site/content/en/lighthouse-accessibility/bypass/bypass.png
deleted file mode 100644
index a90e165e74a..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/bypass/bypass.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/bypass/index.md b/src/site/content/en/lighthouse-accessibility/bypass/index.md
deleted file mode 100644
index 1d616d98129..00000000000
--- a/src/site/content/en/lighthouse-accessibility/bypass/index.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-layout: post
-title: The page does not contain a heading, skip link, or landmark region
-description: |
-  Learn how to improve your web page's accessibility by making it easy for
-  assistive technologies to skip repeated navigation elements.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - bypass
----
-
-For users who cannot use a mouse,
-content that's repeated on pages across your site
-can make navigation difficult.
-For example, screen reader users may have to move through many links in a navigation menu
-to get to the main content of the page.
-
-Providing a way to bypass repetitive content makes non-mouse navigation easier.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags pages that don't provide a way to skip repetitive content:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="bypass.png" alt="Lighthouse audit showing page doesn't contain a heading, skip link, or landmark region">
-</figure>
-
-Lighthouse checks that the page contains at least one of the following:
-- A `<heading>` element
-- A [skip link](/headings-and-landmarks#bypass-repetitive-content-with-skip-links)
-- A [landmark](/headings-and-landmarks/#use-landmarks-to-aid-navigation)
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to improve keyboard navigation
-
-Passing the Lighthouse audit is straightforward:
-add a heading,
-a [skip link](/headings-and-landmarks#bypass-repetitive-content-with-skip-links),
-or a [landmark](/headings-and-landmarks/#use-landmarks-to-aid-navigation)
-to your page.
-
-However, to meaningfully improve the navigational experience
-for assistive technology users,
-- Place all page content inside a landmark element.
-- Make sure each landmark accurately reflects the kind of content it contains.
-- Provide a skip link.
-
-{% Aside %}
-While most screen readers allow users to navigate by landmarks,
-other assistive technologies, like [switch devices](https://en.wikipedia.org/wiki/Switch_access),
-only allow users to move through each element in the tab order one at a time.
-So, it's important to provide both landmarks and skip links whenever possible.
-{% endAside %}
-
-In this example,
-all content is inside a landmark,
-the headings create an outline of the page's content,
-no headings are skipped,
-and a skip link is provided to skip the navigation menu:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Document title</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/style.css">
-  </head>
-  <body>
-    <a class="skip-link" href="#maincontent">Skip to main</a>
-    <h1>Page title</h1>
-    <nav>
-      <ul>
-        <li>
-          <a href="https://google.com">Nav link</a>
-          <a href="https://google.com">Nav link</a>
-          <a href="https://google.com">Nav link</a>
-        </li>
-      </ul>
-    </nav>
-    <main id="maincontent">
-      <section>
-        <h2>Section heading</h2>
-	      <p>
-	        Bacon ipsum dolor amet brisket meatball chicken, cow hamburger pork belly
-	        alcatra pig chuck pork loin jerky beef tri-tip porchetta shank. Kevin porchetta
-	        landjaeger, ribeye bacon strip steak pork chop tenderloin andouille.
-	      </p>
-        <h3>Sub-section heading</h3>
-          <p>
-            Prosciutto pork chicken chuck turkey tongue landjaeger shoulder picanha capicola
-            ball tip meatball strip steak venison salami. Shoulder frankfurter short ribs
-            ham hock, ball tip pork chop tenderloin beef ribs pastrami filet mignon.
-          </p>
-      </section>
-    </main>
-  </body>
-</html>
-```
-
-You usually don't want to show the skip link to mouse users,
-so it's conventional to use CSS to hide it offscreen until it receives
-[focus](/keyboard-access/#focus-and-the-tab-order):
-
-```css
-/* style.css */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: #000000;
-  color: white;
-  padding: 8px;
-  z-index: 100;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-```
-
-See the [Headings and landmarks](/headings-and-landmarks) post for more
-information.
-
-## Resources
-
-- [Source code for **The page does not contain a heading, skip link, or landmark region** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/bypass.js)
-- [Page must have means to bypass repeated blocks (Deque University)](https://dequeuniversity.com/rules/axe/3.3/bypass)
diff --git a/src/site/content/en/lighthouse-accessibility/color-contrast/bg-color-picker.png b/src/site/content/en/lighthouse-accessibility/color-contrast/bg-color-picker.png
deleted file mode 100644
index 1b12440bfcc..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/color-contrast/bg-color-picker.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/color-contrast/color-contrast.png b/src/site/content/en/lighthouse-accessibility/color-contrast/color-contrast.png
deleted file mode 100644
index ef91345c739..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/color-contrast/color-contrast.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/color-contrast/color-format-toggle.png b/src/site/content/en/lighthouse-accessibility/color-contrast/color-format-toggle.png
deleted file mode 100644
index 45f85736ebf..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/color-contrast/color-format-toggle.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/color-contrast/color-picker.png b/src/site/content/en/lighthouse-accessibility/color-contrast/color-picker.png
deleted file mode 100644
index ce516d9f382..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/color-contrast/color-picker.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/color-contrast/index.md b/src/site/content/en/lighthouse-accessibility/color-contrast/index.md
deleted file mode 100644
index 63560f7e460..00000000000
--- a/src/site/content/en/lighthouse-accessibility/color-contrast/index.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: post
-title: Background and foreground colors do not have a sufficient contrast ratio
-description: |
-  Learn how to improve your web page's accessibility by making sure that
-  all text has sufficient color contrast.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - color-contrast
----
-
-Text that has a low contrast ratio—that is,
-text whose brightness is too close to the background brightness—can be
-hard to read.
-For example, presenting light gray text on a white background
-makes it difficult for users to distinguish the shapes of the characters,
-which can reduce reading comprehension and slow down reading speed.
-
-While this issue is particularly challenging for people with low vision,
-low-contrast text can negatively affect the reading experience
-for all your users.
-For example, if you've ever read something on your mobile device outside,
-you've probably experienced the need for text with sufficient contrast.
-
-## How the Lighthouse color contrast audit fails
-
-Lighthouse flags text whose background and
-foreground colors don't have a sufficiently high contrast ratio:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="color-contrast.png"
-    alt="Lighthouse audit showing background and foreground colors do not have sufficient contrast ratio">
-</figure>
-
-To evaluate text's color contrast, Lighthouse uses
-<a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" rel="noopener">success criterion 1.4.3 from WCAG 2.1</a>:
-- Text that is 18&nbsp;pt, or 14&nbsp;pt and bold, needs a contrast ratio of 3:1.
-- All other text needs a contrast ratio of 4.5:1.
-
-Because of the nature of the audit,
-Lighthouse can't check the color contrast of
-text superimposed on an image.
-
-{% Aside 'caution' %}
-In version 2.1, WCAG expanded its color contrast requirements to
-[include user interface elements and images](https://www.w3.org/TR/WCAG21/#non-text-contrast).
-Lighthouse doesn't check these elements, but you should do so manually
-to ensure your entire site is accessible to people with low vision.
-{% endAside %}
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to ensure text has sufficient color contrast
-
-Make sure all text on your page meets the minimum color contrast ratios
-<a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" rel="noopener">specified by WCAG</a>:
-- 3:1 for text that is 18&nbsp;pt, or 14&nbsp;pt and bold
-- 4.5:1 for all other text
-
-One way to find a color that will meet contrast requirements
-is to use Chrome DevTools' color picker:
-1. Right-click (or `Command`-click on Mac) the element you want to check,
-   and select **Inspect**.
-1. In the **Styles** tab of the **Elements** pane,
-   find the `color` value for the element.
-1. Click the color thumbnail next to the value.
-
-The color picker tells you whether the element
-meets color contrast requirements,
-taking font size and weight into account:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="color-picker.png"
-    alt="Screenshot of Chrome DevTools color picker with color contrast information highlighted">
-</figure>
-
-You can use the color picker to adjust the color
-until its contrast is high enough.
-It's easiest to make adjustments in the HSL color format.
-Switch to that format by clicking the toggle button on the right of the picker:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="color-format-toggle.png"
-    alt="Screenshot of Chrome DevTools color picker with the color format toggle highlighted">
-</figure>
-
-Once you have a passing color value, update your project's CSS.
-
-More complex cases, like text on a gradient or text on an image,
-need to be checked manually,
-as do UI elements and images.
-For text on an image, you can use DevTools' background color picker to check
-the background that the text appears on:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="bg-color-picker.png"
-    alt="Screenshot of Chrome DevTools background color picker">
-</figure>
-
-For other cases, consider using a tool like the Paciello Group's
-<a href="https://developer.paciellogroup.com/resources/contrastanalyser" rel="noopener">Colour Contrast Analyser</a>.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/color-contrast.js" rel="noopener">Source code for **Background and foreground colors do not have a sufficient contrast ratio** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/color-contrast" rel="noopener">Text elements must have sufficient color contrast against the background (Deque University)</a>
-- <a href="https://developer.paciellogroup.com/resources/contrastanalyser" rel="noopener">Colour Contrast Analyser</a>
diff --git a/src/site/content/en/lighthouse-accessibility/custom-control-roles/index.md b/src/site/content/en/lighthouse-accessibility/custom-control-roles/index.md
deleted file mode 100644
index eec0ee317a5..00000000000
--- a/src/site/content/en/lighthouse-accessibility/custom-control-roles/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: post
-title: Custom controls have ARIA roles
-description: |
-  Learn how to improve your web page's accessibility by making sure custom
-  controls have ARIA roles that assistive technologies can interpret.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - custom-control-roles
----
-
-Check that all custom controls have an appropriate `role` and
-any required ARIA attributes that confer their properties and state.
-For example, a custom checkbox needs a `role="checkbox"` and
-`aria-checked="true|false"` to properly convey its state.
-See the [Introduction to ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/)
-for a general overview of how ARIA can provide missing semantics for custom controls.
-
-## How to manually test
-
-To check that all custom interactive controls have appropriate ARIA roles,
-test the page using either the
-[Chrome DevTools accessibility pane](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)
-or a screen reader.
-[JAWS](https://www.freedomscientific.com/products/software/jaws/) and
-[NVDA](https://www.nvaccess.org/)
-are two of the more popular screen readers for Windows.
-[VoiceOver](https://www.apple.com/accessibility/mac/vision/)
-is the screen reader built into MacOS.
-
-Using CSS, it's possible
-to style the `<div>` and `<button>` elements so they convey the same visual affordances,
-but the two experiences are very different when using a screen reader.
-A `<div>` is just a generic grouping element,
-so a screen reader only announces the text content of the `<div>`.
-The `<button>` is announced as a "button,"
-a much stronger signal to the user that it's something they can interact with.
-See also [Semantics and screen readers](/semantics-and-screen-readers).
-
-## How to fix
-
-The simplest
-and often best solution to this problem
-is to avoid custom interactive controls altogether.
-For example, replace a `<div>` that's acting like a button
-with an actual `<button>`.
-
-If you must keep the `<div>`,
-then add `role="button"` and `aria-pressed="false"` to the `<div>`:
-
-{% Glitch {
-  id: 'gorgeous-raven',
-  path: 'example.html:13:39',
-  height: 346
-} %}
-
-Now screen readers will announces the role and interactive state for the `<div>`.
-
-## Why this matters
-
-The only way to truly understand how assistive technology users
-experience your content
-is to check that content yourself using a screen reader.
-Using a screen reader first hand will give you a clear understanding
-of how your content is labeled, and if there are any obstructions to
-assistive technology navigation.
-If you're unfamiliar with how semantic markup gets interpreted by assistive technology,
-see the [Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/) for a refresher.
-
-See also [How to Do an Accessibility Review](https://developers.google.com/web/fundamentals/accessibility/how-to-review#try_it_with_a_screen_reader).
-
-## Resources
-
-[Source code for **Custom controls have ARIA roles** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/manual/custom-controls-roles.js)
diff --git a/src/site/content/en/lighthouse-accessibility/custom-controls-labels/index.md b/src/site/content/en/lighthouse-accessibility/custom-controls-labels/index.md
deleted file mode 100644
index 8286a7ba593..00000000000
--- a/src/site/content/en/lighthouse-accessibility/custom-controls-labels/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: post
-title: Custom controls have associated labels
-description: |
-  Learn how to improve your web page's accessibility by making sure that
-  all custom controls have labels that assistive technology users can access.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - custom-controls-labels
----
-
-Custom interactive controls should be focusable.
-If you use JavaScript to turn a `<div`> into a fancy dropdown,
-it won't automatically be inserted into the tab order.
-You need to manually check that all custom controls are keyboard focusable.
-See also [Keyboard access fundamentals](/keyboard-access).
-
-## How to manually test
-
-To test that the custom control is focusable,
-press the `TAB` key to navigate through the site:
-
-{% Glitch {
-  id: 'tabindex-zero',
-  path: 'index.html',
-  height: 346
-} %}
-
-Are you able to reach all of the interactive controls on the page?
-If not, you may need to use `tabindex` to improve the focusability of those controls.
-See also [Control focus with tabindex](/control-focus-with-tabindex).
-
-## How to fix
-
-To make a custom control focusable,
-insert the custom control element into the natural tab order using `tabindex="0"`.
-For example:
-
-```html
-<div tabindex="0">Focus me with the TAB key</div>
-```
-
-## Why this matters
-
-For users who either cannot or choose not to use a mouse,
-keyboard navigation is the primary means of reaching everything on a screen.
-Good keyboarding experiences depend on a logical tab order and easily discernable focus styles.
-If a keyboard user can't see what's focused, they have no way of interacting with the page.
-
-Learn more in [How to do an Accessibility Review](https://developers.google.com/web/fundamentals/accessibility/how-to-review#try_it_with_a_screen_reader).
-
-## Resources
-
-- [Source code for **Custom controls have associated labels** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/manual/custom-controls-labels.js)
-- [Some elements have a `[tabindex]` value greater than `0`](/tabindex)
diff --git a/src/site/content/en/lighthouse-accessibility/definition-list/definition-list.png b/src/site/content/en/lighthouse-accessibility/definition-list/definition-list.png
deleted file mode 100644
index c4070c3dd07..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/definition-list/definition-list.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/definition-list/index.md b/src/site/content/en/lighthouse-accessibility/definition-list/index.md
deleted file mode 100644
index 48712755f1d..00000000000
--- a/src/site/content/en/lighthouse-accessibility/definition-list/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: post
-title: "`<dl>`s do not contain only properly ordered `<dt>` and `<dd>` groups, `<script>`, or `<template>` elements"
-description: |
-  Learn how to structure definition lists on your web page so that
-  assistive technologies can interpret them.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - definition-list
----
-
-Screen readers and other assistive technologies have a specific way of
-announcing definition lists.
-When definition lists are not properly marked up,
-assistive technologies may produce confusing or inaccurate output.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags `<dl>` elements that don't
-contain properly ordered `<dt>` and `<dd>` groups,
-`<script>`, or `<template>` elements:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="definition-list.png" alt="Lighthouse audit showing definition lists do not contain properly ordered <dt> and <dd> groups, <script>, or <template> elements">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to structure definition lists correctly
-
-Definition list items require `dl` elements around the list,
-`dt` elements for each term, and `dd` elements for each definition.
-Each set of `dt` elements must be followed by one or more `dd` elements.
-For example:
-
-```html
-<dl>
-  <dt>Trail shoe</dt>
-    <dd>Extra grip for uneven, natural survaces, such as forest trails.</dd>
-  <dt>Road shoe</dt>
-    <dd>Extra cushioning for hard surfaces, such as sidewalks and roads.</dd>
-</dl>
-```
-
-## Resources
-
-- [Source code for **`<dl>`s do not contain only properly ordered `<dt>` and `<dd>` groups, `<script>`, or `<template>` elements** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/definition-list.js)
-- [`<dl>` elements must only directly contain properly-ordered `<dt>` and `<dd>` groups, `<script>`, or `<template>` elements (Deque University)](https://dequeuniversity.com/rules/axe/3.3/definition-list)
diff --git a/src/site/content/en/lighthouse-accessibility/dlitem/dlitem.png b/src/site/content/en/lighthouse-accessibility/dlitem/dlitem.png
deleted file mode 100644
index 191f6579592..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/dlitem/dlitem.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/dlitem/index.md b/src/site/content/en/lighthouse-accessibility/dlitem/index.md
deleted file mode 100644
index 777b277c8fe..00000000000
--- a/src/site/content/en/lighthouse-accessibility/dlitem/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: post
-title: "Definition list items are not wrapped in `<dl>` elements"
-description: |
-  Learn how to make sure assistive technologies can announce definition list
-  items on your web page.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - dlitem
----
-
-Definition list items (`<dt>` and `<dd>`) must be wrapped
-in a parent `<dl>` element
-to ensure that screen readers and other assistive technologies
-can properly announce them.
-
-## How this Lighthouse audit fails
-
-Lighthouse reports when definition list items are not wrapped in `<dl>` elements:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="dlitem.png" alt="Lighthouse audit showing definition list items are not wrapped in <dl> elements">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix orphaned definition list items
-
-Wrap all definition list items in parent `dl` elements
-to ensure the list follows the proper hierarchy.
-
-Definition list items require `dl` elements around the list,
-`dt` elements for each term, and `dd` elements for each definition.
-Each set of `dt` elements must be followed by one or more `dd` elements.
-For example:
-
-```html
-<dl>
-  <dt>Trail shoe</dt>
-    <dd>Extra grip for uneven, natural survaces, such as forest trails.</dd>
-  <dt>Road shoe</dt>
-    <dd>Extra cushioning for hard surfaces, such as sidewalks and roads.</dd>
-</dl>
-```
-
-## Resources
-
-- [Source code for **Definition list items are not wrapped in `<dl>` elements** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/dlitem.js)
-- [`<dt>` and `<dd>` elements must be contained by a `<dl>` (Deque University)](https://dequeuniversity.com/rules/axe/3.1/dlitem)
diff --git a/src/site/content/en/lighthouse-accessibility/document-title/document-title.png b/src/site/content/en/lighthouse-accessibility/document-title/document-title.png
deleted file mode 100644
index 1375f667577..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/document-title/document-title.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/document-title/index.md b/src/site/content/en/lighthouse-accessibility/document-title/index.md
deleted file mode 100644
index 42a63c78536..00000000000
--- a/src/site/content/en/lighthouse-accessibility/document-title/index.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: Document doesn't have a `<title>` element
-description: |
-  Learn about the "Document doesn't have a <title> element"
-  Lighthouse audit.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - document-title
----
-
-Having a `<title>` element on every page helps all your users:
-
-- Search engine users rely on the title to determine whether a page is
-relevant to their search.
-- The title also gives users of screen readers and other assistive technologies
-  an overview of the page. The title is the first text
-  that an assistive technology announces.
-
-## How the Lighthouse title audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-without a `<title>` element in the page's `<head>`:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="document-title.png" alt="Lighthouse audit showing HTML document doesn't have a title elemement">
-</figure>
-
-## How to add a title
-
-Add a `<title>` element to the `<head>` of your page. Make sure the title
-clearly states what the page is about. For example:
-
-```html
-<!doctype html>
-  <html lang="en">
-    <head>
-      …
-      <title>20-week training schedule for your first marathon</title>
-      …
-    </head>
-  <body>
-    …
-  </body>
-</html>
-```
-
-## Tips for creating great titles
-
-- Use a unique title for each page.
-- Make titles descriptive and concise. Avoid vague titles like "Home."
-- Avoid [keyword stuffing](https://support.google.com/webmasters/answer/66358).
-  It doesn't help users, and search engines may mark the page as spam.
-- It's OK to brand your titles, but do so concisely.
-
-Here are examples of good and bad titles:
-
-{% Compare 'worse', 'Don\'t' %}
-```html
-<title>Donut recipe</title>
-```
-{% CompareCaption %}
-Too vague.
-{% endCompareCaption %}
-{% endCompare %}
-
-{% Compare 'better', 'Do' %}
-```html
-<title>Mary's quick maple bacon donut recipe</title>
-```
-{% CompareCaption %}
-Descriptive yet concise.
-{% endCompareCaption %}
-{% endCompare %}
-
-See Google's [Create good titles and snippets in Search Results](https://support.google.com/webmasters/answer/35624)
-page for more details about these tips.
-
-## Resources
-
-- [Source code for **Document has a `<title>` element** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/document-title.js)
-- [Create good titles and snippets in Search Results](https://support.google.com/webmasters/answer/35624)
-- [Documents must contain a title element to aid in navigation (Deque University)](https://dequeuniversity.com/rules/axe/3.2/document-title)
-- [Irrelevant keywords](https://support.google.com/webmasters/answer/66358)
-- [Label documents and frames](/labels-and-text-alternatives#label-documents-and-frames)
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id-active/duplicate-id-active.png b/src/site/content/en/lighthouse-accessibility/duplicate-id-active/duplicate-id-active.png
deleted file mode 100644
index ed44e67fdbb..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/duplicate-id-active/duplicate-id-active.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id-active/index.md b/src/site/content/en/lighthouse-accessibility/duplicate-id-active/index.md
deleted file mode 100644
index f6d7eadac35..00000000000
--- a/src/site/content/en/lighthouse-accessibility/duplicate-id-active/index.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: "`[id]` attributes on active, focusable elements are not unique"
-description: |
-  Learn how to [fix the problem identified by the audit].
-web_lighthouse:
-  - duplicate-id-aria
-date: 2019-10-17
----
-
-{% include 'content/lighthouse-accessibility/no-duplicate-ids.njk' %}
-
-Avoiding duplicate IDs for focusable controls like buttons and checkboxes
-is particularly important to ensure that users can access
-all of your page's functionality.
-
-## How Lighthouse identifies focusable elements with duplicate IDs
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags focusable elements that have duplicate IDs:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="duplicate-id-active.png"
-    alt="Lighthouse audit showing focusable elements with duplicate IDs">
-</figure>
-
-{% include 'content/lighthouse-accessibility/focusable-els.njk' %}
-
-This audit is similar to the
-[**ARIA IDs are not all unique**](/duplicate-id-aria) audit
-but checks for duplicate IDs in a different set of elements.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-{% include 'content/lighthouse-accessibility/fix-duplicate-ids.njk' %}
-
-## Resources
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/duplicate-id-active.js" rel="noopener">Source code for **`[id]` attributes on active, focusable elements are not unique** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/duplicate-id-active" rel="noopener">ID attribute value must be unique (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/duplicate-id-aria.png b/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/duplicate-id-aria.png
deleted file mode 100644
index e8e6291e416..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/duplicate-id-aria.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/index.md b/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/index.md
deleted file mode 100644
index a2c604e1576..00000000000
--- a/src/site/content/en/lighthouse-accessibility/duplicate-id-aria/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-layout: post
-title: "ARIA IDs are not unique"
-description: |
-  Learn how to [fix the problem identified by the audit].
-web_lighthouse:
-  - duplicate-id-aria
-date: 2019-10-17
----
-
-{% include 'content/lighthouse-accessibility/no-duplicate-ids.njk' %}
-
-Avoiding duplicate IDs is particularly important
-when using the `aria-labelledby` attribute.
-`aria-labelledby` provides an accessible name for an element
-by pointing to a second element, using its ID.
-If more than one element shares that ID,
-assistive technologies will read the first instance,
-which may not be what you intended.
-
-## How Lighthouse identifies ARIA elements that refer to duplicate IDs
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags elements that share an ID referred to
-by another element's `aria-labelledby` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="duplicate-id-aria.png"
-    alt="Lighthouse audit showing ARIA elements with duplicate IDs">
-</figure>
-
-This audit is similar to the
-[**`[id]` attributes on active, focusable elements are not unique**](/duplicate-id-active) audit
-but checks for duplicate IDs in a different set of elements.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix duplicate IDs
-
-Change an ID value if it is used more than once.
-
-For example, the following code sample includes two elements with the same ID.
-One ID should be changed:
-
-```html/1,4
-<div role="tabpanel" aria-labelledby="tabpanel-label">
-  <h2 id="tabpanel-label">
-    Tab panel title
-  </h2>
-  <p id="tabpanel-label">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  </p>
-</div>
-```
-
-## Resources
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/duplicate-id-aria.js" rel="noopener">Source code for **ARIA IDs are not all unique** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/duplicate-id-aria" rel="noopener">IDs used in ARIA and labels must be unique (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id/duplicate-id.png b/src/site/content/en/lighthouse-accessibility/duplicate-id/duplicate-id.png
deleted file mode 100644
index 3463b539ad5..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/duplicate-id/duplicate-id.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/duplicate-id/index.md b/src/site/content/en/lighthouse-accessibility/duplicate-id/index.md
deleted file mode 100644
index 315334d8644..00000000000
--- a/src/site/content/en/lighthouse-accessibility/duplicate-id/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: "`[id]` attributes on the page are not unique"
-description: |
-  Learn how to make sure that all elements on your page are announced correctly
-  by assistive technologies.
-date: 2019-05-02
-updated: 2019-10-17
-web_lighthouse:
-  - duplicate-id
-noindex: true
----
-
-{% Banner 'caution', 'body' %}This audit has been deprecated. Check out [`[id]` attributes on active, focusable elements are not unique](/duplicate-id-active) and [ARIA IDs are not all unique](/duplicate-id-aria) instead.{% endBanner %}
-
-{% include 'content/lighthouse-accessibility/no-duplicate-ids.njk' %}
-
-## How the Lighthouse duplicate ID audit fails
-
-Lighthouse flags duplicate IDs found in a page:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="duplicate-id.png" alt="Lighthouse audit showing ID attributes on the page are not unique">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-{% include 'content/lighthouse-accessibility/fix-duplicate-ids.njk' %}
-
-## Resources
-
-- [Source code for **`[id]` attributes on the page are not unique** audit](https://github.com/GoogleChrome/lighthouse/blob/4e11bd297010a3957a6f76a8e25abddc7ed5a716/lighthouse-core/audits/accessibility/duplicate-id.js)
-- [ID attribute values must be unique (Deque University)](https://dequeuniversity.com/rules/axe/3.3/duplicate-id)
diff --git a/src/site/content/en/lighthouse-accessibility/focus-traps/index.md b/src/site/content/en/lighthouse-accessibility/focus-traps/index.md
deleted file mode 100644
index 6c0300cddfb..00000000000
--- a/src/site/content/en/lighthouse-accessibility/focus-traps/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-layout: post
-title: User focus is not accidentally trapped in a region
-description: |
-  Learn how to improve you web page's accessibility for keyboard users by
-  preventing focus from being trapped in a region of the page.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - focus-traps
----
-
-Keyboard focus should never be locked or trapped at one particular page element.
-Users should be able to navigate to and from all page elements
-using only the keyboard.
-
-## How to manually test
-
-To test users can't accidentally trap their focus,
-navigate to and from all page elements using only the keyboard.
-Use `TAB` to navigate "forward" and `SHIFT + TAB` to navigate "backward."
-
-If you can't tab through all page elements successfully,
-then you've failed the test.
-When testing, watch out in particular for autocomplete widgets,
-where keyboard focus may get stuck.
-
-## How to fix
-
-Pages that present content in multiple formats, such as modal dialogs,
-widgets, are at risk for focus traps.
-In the case of a displaying a modal,
-when you don't want the user interacting with the rest of the page,
-it makes sense to temporarily trap the user.
-
-But you should aim to provide a keyboard-accessible method of escaping the modal as well.
-Check out [this example on how to create an accessible modal](https://github.com/gdkraus/accessible-modal-dialog).
-See also [Modals and Keyboard Traps](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex#modals_and_keyboard_traps).
-In this example,
-you get the desired behaviors of a modal,
-without forcing the user to refresh the page to get out of the focus trap.
-
-## Why this matters
-
-For users who either cannot or choose not to use a mouse,
-keyboard navigation is the primary means of reaching everything on a screen.
-Good keyboarding experiences depend on a logical tab order and easily discernible focus styles.
-If a keyboard user gets trapped in a particular page element,
-they have no way of interacting with the page.
-
-Learn more in [How to do an Accessibility Review](https://developers.google.com/web/fundamentals/accessibility/how-to-review#try_it_with_a_screen_reader).
-
-## Resources
-
-[Source code for **User focus is not accidentally trapped in a region** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/manual/focus-traps.js)
diff --git a/src/site/content/en/lighthouse-accessibility/focusable-controls/index.md b/src/site/content/en/lighthouse-accessibility/focusable-controls/index.md
deleted file mode 100644
index 0d4934fabd2..00000000000
--- a/src/site/content/en/lighthouse-accessibility/focusable-controls/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: post
-title: Interactive controls are keyboard focusable
-description: |
-  Learn how to make custom controls on your web page focusable so keyboard users
-  can access them.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - focusable-controls
----
-
-Manually check that all custom controls are keyboard focusable
-and display a focus indicator.
-The order in which elements are focused should aim to follow the DOM order.
-If you're unsure which elements should receive focus,
-see [Introduction to Focus](https://developers.google.com/web/fundamentals/accessibility/focus/).
-
-## How to manually test
-
-To test that the custom control is focusable
-and displays a focus indicator,
-start by tabbing through your site.
-Use `TAB` (or `SHIFT +
-TAB`) to move between controls, and use the arrow keys and
-`ENTER` and `SPACE` to manipulate their values
-(see also [Keyboard access fundamentals](/keyboard-access)):
-
-{% Glitch {
-  id: 'interactive-elements',
-  path: 'index.html',
-  height: 346
-} %}
-
-Are you able to reach all of the interactive controls on the page?
-Is there a focus indicator on each interactive control?
-
-## How to fix
-
-If you aren't able to tab through all elements on a page,
-you may need to use `tabindex` to improve the focusability of those controls.
-
-To make a custom control focusable,
-insert the custom control element into the natural tab order using `tabindex="0"`
-(see also [Control focus with tabindex](/control-focus-with-tabindex)).
-For example:
-
-```html
-<div tabindex="0">Focus me with the TAB key</div>
-```
-
-You may also need to add the appropriate ARIA roles to the custom control elements.
-See [Custom controls have ARIA roles](/custom-control-roles).
-
-If you're not seeing a focus indicator,
-consider using `:focus` to always show a focus indicator.
-Regardless of whether you use a mouse or a keyboard to tab to it,
-the button's focus indicator always looks the same
-(see also [Style focus](/style-focus)).
-
-{% Glitch {
-  id: 'focus-style',
-  path: 'index.html',
-  height: 346
-} %}
-
-## Why this matters
-
-For users who either cannot or choose not to use a mouse,
-keyboard navigation is the primary means of reaching everything on a screen.
-Good keyboarding experiences depend on a logical tab order and easily discernable focus styles.
-If a keyboard user can't see what's focused, they have no way of interacting with the page.
-
-Learn more in [How to do an Accessibility Review](https://developers.google.com/web/fundamentals/accessibility/how-to-review#try_it_with_a_screen_reader).
-
-## Resources
-
-- [Source code for **Interactive controls are keyboard focusable** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/manual/focusable-controls.js)
-- [Some elements have a `[tabindex]` value greater than `0`](/tabindex)
-- [Use semantic HTML for easy keyboard wins](/use-semantic-html)
diff --git a/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/form-field-multiple-labels.png b/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/form-field-multiple-labels.png
deleted file mode 100644
index 1597ceb02ed..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/form-field-multiple-labels.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/index.md b/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/index.md
deleted file mode 100644
index bd2e932ee11..00000000000
--- a/src/site/content/en/lighthouse-accessibility/form-field-multiple-labels/index.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-layout: post
-title: "Form fields have multiple labels"
-description: |
-  Learn how to make sure assistive technologies announce your web page's form
-  fields correctly by ensuring that each field has only one label.
-web_lighthouse:
-  - form-field-multiple-labels
-date: 2019-10-17
----
-
-{% include 'content/lighthouse-accessibility/accessible-names.njk' %}
-
-`<label>` elements are a common way to assign names to native controls.
-If you unintentionally associate multiple labels with a single control,
-you'll create inconsistent behavior across browsers and assistive technologies:
-some will read the first label, some will read the last label,
-and others will read both labels.
-
-## How the Lighthouse multiple label audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags form elements that have more than one label:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="form-field-multiple-labels.png"
-    alt="Lighthouse audit showing form elements with multiple labels">
-</figure>
-
-There are several common scenarios that cause this audit to fail:
-
-- Explicitly associating more than one `<label>` element
-  with a form element using the `for` attribute. For example:
-
-  ```html
-  <label for="checkbox1">Label one</label>
-  <label for="checkbox1">Label two</label>
-  <input type="checkbox" id="checkbox1" />
-  ```
-
-- Implicitly associating one `<label>` element with a form element
-  and explicitly associating another using the `for` attribute. For example:
-
-  ```html
-  <label for="checkbox1">Label one</label>
-  <label>Label two
-    <input type="checkbox" id="checkbox1" />
-  </label>
-  ```
-
-- Associating one `<label>` element with a form element
-  and associating another element using the `aria-labelledby` attribute.
-  For example:
-
-  ```html
-  <label for="checkbox1">Label one</label>
-  <p id="checkbox1_label">Label two</p>
-  <input type="checkbox" id="checkbox1" aria-labelledby="checkbox1_label" />
-  ```
-
-- Having nested `<label>` elements. For example:
-
-  ```html
-  <label>Label one
-    <label>Label two
-      <input type="checkbox" id="checkbox1" />
-    </label>
-  </label>
-  ```
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to remove duplicate form labels
-
-Make sure that each form element on your page has no more than one label.
-Labels can be assigned in three ways:
-- Implicitly, by making the `<label>` element a parent of the form element:
-
-  ```html
-  <label>Label for checkbox
-    <input type="checkbox" id="checkbox1" />
-  </label>
-  ```
-
-- Explicitly, by associating a `<label>` element with the form element
-  using the `for` attribute:
-
-  ```html
-  <label for="checkbox1">Label for checkbox</label>
-  <input type="checkbox" id="checkbox1" />
-  ```
-
-- Using the `aria-labelledby` attribute to associate the form element
-  with a separate element using its ID:
-
-  ```html
-  <p id="checkbox1_label">Label for checkbox</p>
-  <input type="checkbox" id="checkbox1" aria-labelledby="checkbox1_label" />
-  ```
-
-Verify that you're using only one of these techniques for each form element.
-
-## Resources
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/form-field-multiple-labels.js" rel="noopener">Source code for **Form fields have multiple labels** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/form-field-multiple-labels" rel="noopener">Form fields do not have duplicate labels (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/frame-title/frame-title.png b/src/site/content/en/lighthouse-accessibility/frame-title/frame-title.png
deleted file mode 100644
index dadf0c779ed..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/frame-title/frame-title.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/frame-title/index.md b/src/site/content/en/lighthouse-accessibility/frame-title/index.md
deleted file mode 100644
index 430c6604cd6..00000000000
--- a/src/site/content/en/lighthouse-accessibility/frame-title/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "`<frame>` or `<iframe>` elements do not have a title"
-layout: post
-description: |
-  Learn how to make sure assistive technologies can announce frame content on
-  your web page correctly by giving all frame elements titles.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - frame-title
----
-
-Users of screen readers and other assistive technologies rely on
-frame titles to describe the contents of frames.
-Navigating through frames and inline frames can quickly become difficult and confusing
-for assistive technology users if the frames are not marked
-with a title attribute.
-
-## How the Lighthouse frame title audit fails
-
-Lighthouse flags `<frame>` and `<iframe>` elements that don't have titles:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="frame-title.png" alt="Lighthouse audit showing frame or iframe doesn't have a title element">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add titles to frames and iframes
-
-Provide unique and descriptive `title` attributes for all `frame` and `iframe` elements.
-
-Additionally, best practice is to give the enclosed document a title element
-with content identical to the title attribute.
-For example:
-
-```html
-<iframe title="My Daily Marathon Tracker" src="https://www.mydailymarathontracker.com/"></iframe>
-```
-
-## Tips for creating descriptive frame titles
-
-- As previously mentioned, give the enclosed document a title element with content identical to title attribute.
-- Replace placeholder titles such as "untitled frame" with a more appropriate phrase.
-- Make each title unique. Don't duplicate titles, even if they are similar.
-
-Learn more in
-[Write descriptive titles, descriptions, and link text for every page](/write-descriptive-text).
-
-## Resources
-
-- [Source code for **`<frame>` or `<iframe>` elements do not have a title** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/frame-title.js)
-- [Label documents and frames](/labels-and-text-alternatives#label-documents-and-frames)
-- [Frames must have title attribute (Deque University)](https://dequeuniversity.com/rules/axe/3.3/frame-title)
diff --git a/src/site/content/en/lighthouse-accessibility/heading-levels/index.md b/src/site/content/en/lighthouse-accessibility/heading-levels/index.md
deleted file mode 100644
index ae53de1753d..00000000000
--- a/src/site/content/en/lighthouse-accessibility/heading-levels/index.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-layout: post
-title: Headings don't skip levels
-description: |
-  Learn how to make sure assistive technology users can easily navigate your
-  web page by correctly structuring your heading elements.
-date: 2019-05-02
-updated: 2019-10-17
-web_lighthouse:
-  - heading-levels
-noindex: true
----
-
-{% Banner 'caution', 'body' %}This manual audit has been deprecated. Check out [the newer automated audit](/heading-order) instead.{% endBanner %}
-
-Users of screen readers and other assistive technologies
-often navigate an unfamiliar page by exploring headings.
-By using the correct headings,
-you can dramatically improve the navigation experience on your site
-for users of assistive technology.
-
-## How to manually test
-
-To check headings don't skip levels,
-make sure all headings follow a logical, numerical order.
-For example:
-
-```html
-<h1>Company name</h1>
-<section>
-  <h2>Section Heading</h2>
-  …
-  <h3>Sub-section Heading</h3>
-</section>
-```
-
-Use [this list of landmark elements](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html) to check your page.
-Click the "Show Headings" button to see a structural outline for the page.
-
-<!--
-***Todo*** Talk to Rob about "Headings don't skip" mention in his web.dev guide.
-It seems to imply in the guide that this audit will fail.
-But it's a manual audit, I think, so no failure will occur.
-Good to confirm this though!
--->
-## How to fix
-
-Use headings to create a structural outline for your page.
-Create a skeleton or scaffold of the page
-such that anyone navigating by headings can form a mental picture.
-
-Don't skip heading levels.
-Look out for an `<h1>` heading followed by an `<h3>` heading.
-It is an anti-pattern to skip heading levels to use the browser's default heading styles.
-Fix any skipped heading levels and use your own CSS for styling.
-
-Learn more in [Headings and landmarks](/headings-and-landmarks).
-
-## Resources
-
-[Source code for **Headings don't skip levels** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/heading-levels.js)
diff --git a/src/site/content/en/lighthouse-accessibility/heading-order/heading-order.png b/src/site/content/en/lighthouse-accessibility/heading-order/heading-order.png
deleted file mode 100644
index 86d74a06394..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/heading-order/heading-order.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/heading-order/index.md b/src/site/content/en/lighthouse-accessibility/heading-order/index.md
deleted file mode 100644
index bcbd1729c20..00000000000
--- a/src/site/content/en/lighthouse-accessibility/heading-order/index.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-layout: post
-title: Heading elements are not in a sequentially-descending order
-description: |
-  Learn how to make sure assistive technology users can easily navigate your
-  web page by correctly structuring your heading elements.
-date: 2019-10-17
-updated: 2020-05-07
-web_lighthouse:
-  - heading-order
----
-
-{% include 'content/lighthouse-accessibility/why-headings.njk' %}
-
-## How the Lighthouse heading levels audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages whose headings skip one or more levels:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="heading-order.png"
-    alt="Lighthouse audit showing headings that skip levels">
-</figure>
-
-For example, using an `<h1>` element for your page title
-and then using `<h3>` elements for the page's main sections
-will cause the audit to fail
-because the `<h2>` level is skipped:
-
-```html
-<h1>Page title</h1>
-  <h3>Section heading 1</h3>
-  …
-  <h3>Section heading 2</h3>
-  …
-```
-
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix poorly structured headings
-
-- Make all heading elements follow a logical, numerical order
-  that reflects the structure of your content.
-- Make sure your heading text clearly conveys the content
-  in the associated section.
-
-For example:
-
-```html
-<h1>Page title</h1>
-<section>
-  <h2>Section Heading</h2>
-  …
-    <h3>Sub-section Heading</h3>
-</section>
-```
-
-One way to check your heading structure is to ask,
-"If someone created an outline of my page using only the headings,
-would it make sense?"
-
-You can also use tools like Microsoft's
-<a href="https://accessibilityinsights.io/" rel="noopener">Accessibility Insights extension</a>
-to visualize your page structure and catch out-of-order heading elements.
-
-{% Aside 'caution' %}
-Less experienced developers sometimes skip heading levels
-to achieve a desired visual style.
-For example, they may use an `<h3>` element
-because they feel the `<h2>` text is too large.
-This is considered an **anti-pattern**.
-Instead, use a correctly sequenced heading structure
-and use CSS to visually style the headings as desired.
-{% endAside %}
-
-See the [Headings and landmarks](/headings-and-landmarks)
-post for more information.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/heading-order.js" rel="noopener">Source code for **Headings skip levels** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/heading-order" rel="noopener">Heading levels should only increase by one (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/html-has-lang/html-has-lang.png b/src/site/content/en/lighthouse-accessibility/html-has-lang/html-has-lang.png
deleted file mode 100644
index e7c223c4e46..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/html-has-lang/html-has-lang.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/html-has-lang/index.md b/src/site/content/en/lighthouse-accessibility/html-has-lang/index.md
deleted file mode 100644
index 014a104e73a..00000000000
--- a/src/site/content/en/lighthouse-accessibility/html-has-lang/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: "`<html>` element does not have a `[lang]` attribute"
-description: |
-  Learn how to make sure assistive technologies pronounce your web page's
-  content correctly by providing a lang attribute for the HTML element.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - html-has-lang
----
-
-{% include 'content/lighthouse-accessibility/lang-attr.njk' %}
-
-If a page doesn't specify a language for the `<html>` element,
-a screen reader assumes the page is in the default language
-that the user chose when setting up the screen reader,
-often making it impossible to understand the content.
-
-## How the Lighthouse missing `<html>` `lang` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages whose `<html>` element doesn't have a `lang` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="html-has-lang.png"
-    alt="Lighthouse audit showing the html element doesn't have a lang attribute">
-</figure>
-
-Note that this audit
-checks whether a `lang` attribute is present.
-The [**`<html>` element does not have a valid value for its `[lang]` attribute** audit](/html-lang-valid)
-checks whether the _value_ for that attribute is valid.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add an HTML `lang` attribute
-
-{% include 'content/lighthouse-accessibility/fix-lang-attr.njk' %}
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/html-has-lang.js" rel="noopener">Source code for **`<html>` element does not have a `[lang]` attribute** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/html-has-lang" rel="noopener">`<html>` element must have a lang attribute (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/html-lang-valid/html-lang-valid.png b/src/site/content/en/lighthouse-accessibility/html-lang-valid/html-lang-valid.png
deleted file mode 100644
index a4f0a977968..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/html-lang-valid/html-lang-valid.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/html-lang-valid/index.md b/src/site/content/en/lighthouse-accessibility/html-lang-valid/index.md
deleted file mode 100644
index dc4fa2c702f..00000000000
--- a/src/site/content/en/lighthouse-accessibility/html-lang-valid/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: "`<html>` element does not have a valid value for its `[lang]` attribute"
-description: |
-  Learn how to make sure assistive technologies pronounce your web page's content
-  correctly by providing a valid value for the HTML element's lang attribute.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - html-lang-valid
----
-
-{% include 'content/lighthouse-accessibility/lang-attr.njk' %}
-
-To ensure correct pronunciation of the page as a whole,
-you must specify a valid
-<a href="https://www.w3.org/International/questions/qa-choosing-language-tags#question" rel="noopener">BCP 47 language</a>
-for the `<html>` element.
-
-## How the Lighthouse invalid `<html>` `lang` value audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages whose `<html>` element doesn't have a valid value
-for its `lang` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="html-lang-valid.png"
-    alt="Lighthouse audit showing the html element has an invalid value for its lang attribute">
-</figure>
-
-Note that the [**`<html>` element does not have a `[lang]` attribute** audit](/html-has-lang)
-checks whether a `lang` attribute is present.
-This audit checks whether the _value_ for that attribute is valid.
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix an invalid HTML `lang` attribute
-
-{% include 'content/lighthouse-accessibility/fix-lang-attr.njk' %}
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/html-lang-valid.js" rel="noopener">Source code for **`<html>` element does not have a valid value for its `[lang]` attribute** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/html-lang-valid" rel="noopener">&#60;html&#62; element must have a valid value for the lang attribute (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/image-alt/image-alt.png b/src/site/content/en/lighthouse-accessibility/image-alt/image-alt.png
deleted file mode 100644
index bf4e3c4945f..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/image-alt/image-alt.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/image-alt/index.md b/src/site/content/en/lighthouse-accessibility/image-alt/index.md
deleted file mode 100644
index 3884ca41336..00000000000
--- a/src/site/content/en/lighthouse-accessibility/image-alt/index.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-layout: post
-title: "Image elements do not have `[alt]` attributes"
-description: |
-  Learn how to make sure assistive technology users can access your web page's
-  images by providing alternative text.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - image-alt
----
-
-Informative elements should aim for short, descriptive alternate text.
-Decorative elements can be ignored with an empty alt attribute.
-
-## How the Lighthouse image alternative text audit fails
-
-Lighthouse flags `<img>` elements that don't have `alt` attributes:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="image-alt.png" alt="Lighthouse audit showing <img> elements do not have alt attributes">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add alternative text to images
-
-Provide an `alt` attribute for every `<img>` element.
-If the image fails to load,
-the `alt` text is used as a placeholder
-so users have a sense of what the image was trying to convey.
-(See also
-[Include text alternatives for images and objects](/labels-and-text-alternatives#include-text-alternatives-for-images-and-objects).)
-
-Most images should have short, descriptive text:
-
-```html
-<img alt="Audits set-up in Chrome DevTools" src="...">
-```
-
-If the image acts as decoration and does not provide any useful content,
-give it an empty `alt=""` attribute to remove it from the accessibility tree:
-
-```html
-<img src="background.png" alt="">
-```
-
-{% Aside 'note' %}
-You can also use ARIA labels to describe your images, for example,
-`<img aria-label="Audits set-up in Chrome DevTools" src="...">`
-See also
-[Using the aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) and
-[Using the aria-labelledby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute).
-{% endAside %}
-
-## Tips for writing effective `alt` text
-
-- `alt` text should give the intent, purpose, and meaning of the image.
-- Blind users should get as much information from alt text as a sighted user gets from the image.
-- Avoid non-specific words like "chart", "image", or "diagram".
-
-Learn more in
-[WebAIM's guide to Alternative Text](https://webaim.org/techniques/alttext/).
-
-## Resources
-
-- [Source code for **Image elements do not have `[alt]` attributes** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/image-alt.js)
-- [Images must have alternate text (Deque University)](https://dequeuniversity.com/rules/axe/3.3/image-alt)
diff --git a/src/site/content/en/lighthouse-accessibility/index.njk b/src/site/content/en/lighthouse-accessibility/index.njk
deleted file mode 100644
index 56445ee6c5b..00000000000
--- a/src/site/content/en/lighthouse-accessibility/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: lighthouse-accessibility
----
\ No newline at end of file
diff --git a/src/site/content/en/lighthouse-accessibility/input-image-alt/index.md b/src/site/content/en/lighthouse-accessibility/input-image-alt/index.md
deleted file mode 100644
index bef4d2caafb..00000000000
--- a/src/site/content/en/lighthouse-accessibility/input-image-alt/index.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: post
-title: "`<input type=\"image\">` elements do not have `[alt]` text"
-description: |
-  Learn how to make sure assistive technology users can access your web page's
-  image inputs by providing alternative text.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - input-image-alt
----
-
-When an image is being used as an `<input>` button,
-providing alternative text helps users of screen readers and other
-assistive technologies understand the purpose of the button.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags `<input type="image">` elements that don't have `alt` text:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="input-image-alt.png" alt="Lighthouse audit showing input types with a value of 'image' do not have alt attributes">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add alternative text to image inputs
-
-Provide an `alt` attribute for every `<input type="image">` element.
-Describe the action that occurs when the user clicks on the button
-in the `alt` text:
-
-```html
-<form>
-  <label>
-    Username:
-    <input type="text">
-  </label>
-  <input type="image" alt="Sign in" src="./sign-in-button.png">
-</form>
-```
-
-See the [Include text alternatives for images and objects](/labels-and-text-alternatives#include-text-alternatives-for-images-and-objects) post for more information.
-
-{% Aside 'note' %}
-You can also use ARIA labels to describe your image buttons.
-
-For example:
-`<input type="image" aria-label="Sign in">`
-
-See also
-[Using the aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) and
-[Using the aria-labelledby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute).
-{% endAside %}
-
-## Tips for writing effective `alt` text
-
-- As previously mentioned, describe the action that occurs when the user clicks on the button.
-- `alt` text should give the intent, purpose, and meaning of the image.
-- Blind users should get as much information from alt text as a sighted user gets from the image.
-- Avoid non-specific words like "chart", "image", or "diagram".
-
-Learn more in
-[WebAIM's guide to Alternative Text](https://webaim.org/techniques/alttext/).
-
-## Resources
-
-- [Source code for **`<input type="image">` elements do not have `[alt]` text** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/input-image-alt.js)
-- [Image buttons must have alternate text (Deque University)](https://dequeuniversity.com/rules/axe/3.3/input-image-alt)
diff --git a/src/site/content/en/lighthouse-accessibility/input-image-alt/input-image-alt.png b/src/site/content/en/lighthouse-accessibility/input-image-alt/input-image-alt.png
deleted file mode 100644
index 4acfb827fdc..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/input-image-alt/input-image-alt.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/interactive-element-affordance/index.md b/src/site/content/en/lighthouse-accessibility/interactive-element-affordance/index.md
deleted file mode 100644
index a4eb04ddb2f..00000000000
--- a/src/site/content/en/lighthouse-accessibility/interactive-element-affordance/index.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-layout: post
-title: Interactive elements indicate their purpose and state
-description: |
-  Learn how to improve the accessibility of custom controls on your web page
-  by making their purpose and states clear to all users.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - interactive-element-affordance
----
-
-Interactive elements, such as links and buttons,
-should indicate their state and be distinguishable from non-interactive elements.
-To check that interactive elements indicate their purpose and state,
-use both a visual and a screen reader test.
-
-## How to manually test visual focus
-
-To manually test visual focus,
-`TAB` through your page.
-
-- Are you able to tab to each interactive element?
-- When you get to an interactive element, is there a visual clue that users can interact with it?
-- Does each interactive element change in appearance when you select it?
-
-There are many ways to style the focus indicators for each interactive element.
-One sure way is to use `:focus`.
-The `:focus` pseudo-class lets you apply a uniform style to an element.
-That style is applied any time the element is focused,
-regardless of the input device or method used to focus it.
-
-Learn more in [Style focus](/style-focus).
-
-## How to manually test with a screen reader
-
-Using a screen reader,
-navigate your page and check that the screen reader is able
-to announce the name of each interactive control,
-the role of that control, and the current interactive state.
-If the role of an element is unclear, and the state of the element is unclear,
-you may need to add the appropriate ARIA roles.
-Learn more in [Custom controls have ARIA roles](/custom-control-roles).
-
-It is also important to pay close attention to how interactive elements are labeled.
-Users of screen readers and other assistive technologies
-rely on labels to understand the context of that element.
-Vague labels are common,
-and they are non-helpful for navigating content.
-Learn how to improve [Labels and text alternatives](/labels-and-text-alternatives).
-
-## Why this matters
-
-Providing visual hints about what a control will do
-helps people operate and navigate your site.
-These hints are called affordances.
-Providing affordances makes it possible for people to use your site on a wide variety of devices.
-
-## Resources
-
-[Source code for **Interactive elements indicate their purpose and state** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/interactive-element-affordance.js)
diff --git a/src/site/content/en/lighthouse-accessibility/label/index.md b/src/site/content/en/lighthouse-accessibility/label/index.md
deleted file mode 100644
index 9a5829bb5cf..00000000000
--- a/src/site/content/en/lighthouse-accessibility/label/index.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: post
-title: Form elements do not have associated labels
-description: |
-  Learn how to make form elements accessible to assistive technology users by
-  providing labels.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - label
----
-
-Labels ensure that form controls are announced properly
-by assistive technologies like screen readers.
-Assistive technology users rely on these labels
-to navigate forms.
-Mouse and touchscreen users also benefit from labels
-because the label text makes a larger click target.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags form elements that don't have associated labels:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="label.png" alt="Lighthouse audit showing form elements do not have associated labels">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add labels to form elements
-
-There are two ways to associate a label with a form element.
-Either place the input element inside a label element:
-
-```html
-<label>
-  Receive promotional offers?
-  <input type="checkbox">
-</label>
-```
-
-Or use the label's `for` attribute and refer to the element's ID:
-
-```html
-<input id="promo" type="checkbox">
-<label for="promo">Receive promotional offers?</label>
-```
-
-When the checkbox has been labeled correctly,
-assistive technologies report that the element has a role of checkbox,
-is in a checked state, and is named "Receive promotional offers?"
-See also [Label form elements](/labels-and-text-alternatives#label-form-elements).
-
-## Resources
-
-- [Source code for **Form elements do not have associated labels** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/label.js)
-- [Form `<input>` elements must have labels (Deque University)](https://dequeuniversity.com/rules/axe/3.3/label)
diff --git a/src/site/content/en/lighthouse-accessibility/label/label.png b/src/site/content/en/lighthouse-accessibility/label/label.png
deleted file mode 100644
index e484e3da840..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/label/label.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/layout-table/index.md b/src/site/content/en/lighthouse-accessibility/layout-table/index.md
deleted file mode 100644
index 91daaada7cd..00000000000
--- a/src/site/content/en/lighthouse-accessibility/layout-table/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: "Presentational `<table>` elements do not avoid using `<th>`, `<caption>`, or the `[summary]` attribute"
-description: |
-  Learn how to make presentational tables more accessible for assistive
-  technology users by avoiding child elements meant for data tables.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - layout-table
----
-
-Tables used for layout purposes shouldn't include data elements:
-`<th>` element, `<caption>` element or `summary` attribute.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags layout `<table>` elements that use `<th>`, `<caption>`, or `summary`:
-
-<!--
-***Todo*** This audit doesn't seem to be failing for me. I added `role="presentation"` to a table
-with `th` expecting this to fail, and it does not.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="layout-table.png" alt="Lighthouse audit showing presentational <table> elements incorrectly using <th>, <caption>, or [summary] attribute">
-</figure>
--->
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to make presentational tables accessible
-
-It's simple to pass the Lighthouse audit:
-remove data elements (`<th>`, `<caption>` elements or the `summary` attribute) from layout tables.
-
-If using a table just for visual layout, and not for tabular data,
-the better fix is to remove the table all together,
-and use cascading style sheets (CSS) to control layout instead.
-
-## Resources
-
-- [Source code for **Presentational `<table>` elements do not avoid using `<th>`, `<caption>`, or the `[summary]` attribute** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/layout-table.js)
-- [Layout tables must not use data table elements (Deque University)](https://dequeuniversity.com/rules/axe/3.3/layout-table)
diff --git a/src/site/content/en/lighthouse-accessibility/link-name/index.md b/src/site/content/en/lighthouse-accessibility/link-name/index.md
deleted file mode 100644
index 4d9490fdcc4..00000000000
--- a/src/site/content/en/lighthouse-accessibility/link-name/index.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Links do not have a discernible name
-description: |
-  Learn how to make links on your web page more accessible by
-  making sure they have names that can be interpreted by assistive technologies.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - link-name
----
-
-Link text that is discernible, unique, and focusable
-improves the navigation experience for users of screen readers
-and other assistive technologies.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags links that don't have discernible names:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="link-name.png" alt="Lighthouse audit showing links do not have discernible names">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add accessible names to links
-
-Similar to buttons,
-links primarily get their accessible name from their text content.
-Avoid filler words like "Here" or "Read more";
-instead, put the most meaningful text into the link itself:
-
-```html
-Check out <a href="…">our guide to creating accessible web pages</a>.
-</html>
-```
-
-Learn more in
-[Label buttons and links](/labels-and-text-alternatives#label-buttons-and-links).
-
-## Resources
-
-- [Source code for **Links do not have a discernible name** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/link-name.js)
-- [Links must have discernible text (Deque University)](https://dequeuniversity.com/rules/axe/3.3/link-name)
diff --git a/src/site/content/en/lighthouse-accessibility/link-name/link-name.png b/src/site/content/en/lighthouse-accessibility/link-name/link-name.png
deleted file mode 100644
index 7a3e2d85a8e..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/link-name/link-name.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/list/index.md b/src/site/content/en/lighthouse-accessibility/list/index.md
deleted file mode 100644
index 35282f3fd14..00000000000
--- a/src/site/content/en/lighthouse-accessibility/list/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: "Lists do not contain only `<li>` elements and script supporting elements (`<script>` and `<template>`)"
-description: |
-  Learn how to make lists on your web page clear to assistive technology users
-  by avoiding child elements that don't belong in lists.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - list
----
-
-Screen readers and other assistive technologies depend on lists
-being structured properly
-to keep users informed of content within the lists.
-The only content lists should contain should be within `<li>` elements.
-They can also contain script supporting elements (`<script>` and `<template>`).
-
-## How this Lighthouse audit fails
-
-Lighthouse flags lists that contain content elements that shouldn't be in a list:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="list.png" alt="Lighthouse audit showing lists contain content elements that shouldn't be within the lists">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to create correctly structured lists
-
-Remove any elements in lists that don't belong there.
-Ordered and unordered lists must only contain `<li>`, `<script>` or `<template>` elements.
-
-Valid lists must have parent elements (`<ul>` or `<ol>` elements) and child elements (`<li>` elements).
-Any other content elements are invalid.
-
-## Resources
-
-- [Source code for **Lists do not contain only `<li>` elements and script supporting elements (`<script>` and `<template>`)** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/list.js)
-- [`<ul>` and `<ol>` must only directly contain `<li>`, `<script>` or `<template>` elements (Deque University)](https://dequeuniversity.com/rules/axe/3.3/list)
diff --git a/src/site/content/en/lighthouse-accessibility/list/list.png b/src/site/content/en/lighthouse-accessibility/list/list.png
deleted file mode 100644
index f97dee1487b..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/list/list.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/listitem/index.md b/src/site/content/en/lighthouse-accessibility/listitem/index.md
deleted file mode 100644
index 0d5017730af..00000000000
--- a/src/site/content/en/lighthouse-accessibility/listitem/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: "List items (`<li>`) are not contained within `<ul>` or `<ol>` parent elements"
-description: |
-  Learn how to make list items on your web page accessible to assistive
-  technology users by placing them in list elements.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - listitem
----
-
-Screen readers and other assistive technologies
-require list items (`<li>`) to be contained
-within parent `<ul>` or `<ol>` to be announced properly.
-
-When assistive technologies come to a list,
-they notify users how many items are within the list.
-If you don't wrap list items in a parent list element,
-assistive technologies can't set user expectations correctly.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags list items (`<li>`) that aren't contained
-in `<ul>` or `<ol>` parent elements:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="listitem.png" alt="Lighthouse audit showing list item isn't contained within a parent list">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix orphaned list items
-
-Wrap any orphaned `<li>` elements inside a `<ul>` or `<ol>` element.
-
-## Resources
-
-- [Source code for **List items (`<li>`) are not contained within `<ul>` or `<ol>` parent elements** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/listitem.js)
-- [`<li>` elements must be contained in a `<ul>` or `<ol>` (Deque University)](https://dequeuniversity.com/rules/axe/3.3/listitem)
diff --git a/src/site/content/en/lighthouse-accessibility/listitem/listitem.png b/src/site/content/en/lighthouse-accessibility/listitem/listitem.png
deleted file mode 100644
index 156312b3fa1..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/listitem/listitem.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/logical-tab-order/index.md b/src/site/content/en/lighthouse-accessibility/logical-tab-order/index.md
deleted file mode 100644
index bc52a490fc8..00000000000
--- a/src/site/content/en/lighthouse-accessibility/logical-tab-order/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: post
-title: The page has a logical tab order
-description: |
-  Learn how to make it easier for keyboard users to navigate your web page
-  by placing tab stops in a logical order.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - logical-tab-order
----
-
-Many different users rely on the keyboard to navigate applications,
-from users with temporary and permanent motor impairments
-to users who use keyboard shortcuts to be more efficient and productive.
-A logical tab order is an important part
-of providing a smooth keyboard navigation experience.
-
-## How to manually test
-
-To check if your application's tab order is logical,
-try tabbing through your page.
-The order in which elements are focused should aim to follow the DOM order.
-In general,
-focus should follow reading order, moving from left to right,
-from the top to the bottom of your page.
-
-Learn more in [Keyboard access fundamentals](/keyboard-access).
-
-Are you able to reach all of the interactive controls on the page?
-If not, you may need to use `tabindex` to improve the focusability of those controls.
-The general rule of thumb is that any control a user can interact with or provide input to
-should aim to be focusable and display a focus indicator.
-If a keyboard user can't see what's focused, they have no way of interacting with the page.
-
-## How to fix
-
-If the focus order seems wrong,
-you should rearrange the elements in the DOM to make the tab order more natural.
-
-If you aren't able to reach all of the interactive controls on the page,
-the first go-to fix is to replace custom controls with native HTML alternatives.
-For example,
-replace a `<div>` acting like a button with `<button>`.
-Using built-in HTML elements can greatly improve the accessibility of your site,
-and significantly cut down on your workload.
-
-If you're building custom interactive components with no native HTML equivalent,
-use the `tabindex` attribute to ensure that they're keyboard accessible.
-For example:
-
-```html
-<div tabindex="0">Focus me with the TAB key</div>
-```
-
-Learn more in [Control focus with tabindex](/control-focus-with-tabindex).
-
-## Resources
-
-[Source code for **The page has a logical tab order** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/logical-tab-order.js)
diff --git a/src/site/content/en/lighthouse-accessibility/managed-focus/index.md b/src/site/content/en/lighthouse-accessibility/managed-focus/index.md
deleted file mode 100644
index 5c2aacfa83a..00000000000
--- a/src/site/content/en/lighthouse-accessibility/managed-focus/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: post
-title: The user's focus is directed to new content added to the page
-description: |
-  Learn how to make changes in your web app's state understandable to assistive
-  technology users by moving focus to newly added content.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - managed-focus
----
-
-Whenever new content is added to a page,
-try to ensure the user's focus gets directed to that content,
-so they can take action on it.
-
-## How to manually test
-
-Single-page apps are important to test,
-especially when it comes to managing a user's focus
-to new content.
-
-Typically in a single-page app,
-clicking on a link won't do a hard refresh.
-Instead,
-a route change fetches new data for the `<main>` content area.
-
-For sighted users,
-this works fine.
-But users navigating with a screen reader or other assistive technology
-may not know that the new content
-has been added to the page.
-There's no indication that they should navigate
-back to the `<main>` area.
-
-When this happens,
-you'll want to manage the user's focus
-to keep the user's perceived context in sync with the site's visual content.
-
-## How to fix
-
-To manage a user's focus to fresh content on a page,
-find a good heading in the newly loaded content and direct focus to it.
-The easiest way to pull this off is to give the heading a `tabindex` of `-1`
-and call its `focus()` method:
-
-```html
-<main>
-  <h2 tabindex="-1">Welcome to your shopping cart</h2>
-</main>
-<script>
-  // Assuming this gets called every time new content loads...
-  function onNewPage() {
-    var heading = document.querySelector('h2');
-    heading.focus();
-    // You can also update the page title :)
-    document.title = heading.textContent;
-  }
-</script>
-```
-
-Assistive technologies announce the new heading
-and the main landmark area that it's contained in.
-
-See also [Managing focus for accessibility](https://dev.to/robdodson/managing-focus-64l).
-
-
-{% Aside 'note' %}
-You probably don't want to do this focus management
-when a user first arrives at your site.
-Only implement this for subsequent navigation,
-like when they click a link.
-{% endAside %}
-
-## Resources
-
-[Source code for **The user's focus is directed to new content added to the page** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/managed-focus.js)
diff --git a/src/site/content/en/lighthouse-accessibility/meta-refresh/index.md b/src/site/content/en/lighthouse-accessibility/meta-refresh/index.md
deleted file mode 100644
index edf3fed9e94..00000000000
--- a/src/site/content/en/lighthouse-accessibility/meta-refresh/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: "The document uses `<meta http-equiv=\"refresh\">`"
-description: |
-  Learn why automatically refreshing your web page is bad for accessibility
-  and how to avoid it.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - meta-refresh
----
-
-The `<meta http-equiv="refresh">` tag causes a web page to refresh automatically
-after a specified amount of time.
-Users generally don't expect automatic refreshes,
-so they can be disorienting.
-Refreshing also moves [focus](/keyboard-access/#focus-and-the-tab-order)
-to the top of the page,
-which may frustrate or confuse users,
-particularly those who rely on screen readers or other assistive technologies.
-
-## How the Lighthouse automatic refresh audit fails
-
-Lighthouse flags pages that contain a `<meta>` tag with the `http-equiv="refresh"` attribute:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="meta-refresh.png" alt="Lighthouse audit showing the document uses timed refresh">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to avoid automatic page refreshes
-
-Remove `<meta http-equiv="refresh">` from the page.
-
-If you need to refresh your page, do so using JavaScript,
-where you can add logic to allow users to pause the refresh,
-extend the time between refreshes, or even disable refreshes.
-
-## Resources
-
-- [Source code for **The document uses `<meta http-equiv="refresh">`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/meta-refresh.js)
-- [Timed refresh must not exist (Deque University)](https://dequeuniversity.com/rules/axe/3.3/meta-refresh)
diff --git a/src/site/content/en/lighthouse-accessibility/meta-refresh/meta-refresh.png b/src/site/content/en/lighthouse-accessibility/meta-refresh/meta-refresh.png
deleted file mode 100644
index be4f6cee168..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/meta-refresh/meta-refresh.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/meta-viewport/index.md b/src/site/content/en/lighthouse-accessibility/meta-viewport/index.md
deleted file mode 100644
index ccdec5c0933..00000000000
--- a/src/site/content/en/lighthouse-accessibility/meta-viewport/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: "`[user-scalable=\"no\"]` is used in the `<meta name=\"viewport\">` element or the `[maximum-scale]` attribute is less than `5`"
-description: |
-  Learn how to make your web page more accessible by making sure that browser
-  zoom isn't disabled.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - meta-viewport
----
-
-The `user-scalable="no"` parameter for the `<meta name="viewport">` element
-disables browser zoom on a web page.
-The `maximum-scale` parameter limits the amount the user can zoom.
-Both are problematic for users with low vision who rely on browser zoom
-to see the contents of a web page.
-
-## How the Lighthouse browser zoom audit fails
-
-Lighthouse flags pages that disable browser zooming:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="meta-viewport.png" alt="Lighthouse audit showing the viewport disables text scaling and zooming">
-</figure>
-
-A page fails the audit if it contains a `<meta name="viewport">` tag with either of the following:
-- A `content` attribute with a `user-scalable="no"` parameter
-- A `content` attribute with a `maximum-scale` parameter set to less than `5`
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to avoid disabling browser zoom
-
-Remove the `user-scalable="no"` parameter from the viewport meta tag and
-make sure the `maximum-scale` parameter is set to `5` or greater.
-
-## Resources
-
-- [Source code for **`[user-scalable="no"]` is used in the `<meta name="viewport">` element or the `[maximum-scale]` attribute is less than 5** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/meta-viewport.js)
-- [Zooming and scaling must not be disabled (Deque University)](https://dequeuniversity.com/rules/axe/3.3/meta-viewport)
diff --git a/src/site/content/en/lighthouse-accessibility/meta-viewport/meta-viewport.png b/src/site/content/en/lighthouse-accessibility/meta-viewport/meta-viewport.png
deleted file mode 100644
index 818a84c5cbd..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/meta-viewport/meta-viewport.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/object-alt/index.md b/src/site/content/en/lighthouse-accessibility/object-alt/index.md
deleted file mode 100644
index bc88e24e929..00000000000
--- a/src/site/content/en/lighthouse-accessibility/object-alt/index.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: post
-title: "`<object>` elements do not have `[alt]` text"
-description: |
-  Learn how to improve the accessibility of object elements on your web page by
-  providing alternative text.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - object-alt
----
-
-Screen readers and other assistive technologies cannot translate non-text content.
-Adding alternative text to define `<object>` elements helps
-assistive technologies convey meaning to users.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags `<object>` elements that don't have alternative text:
-
-<!--
-***Todo*** Rob's docs in accessibility recommend describing objects in the inner text.
-But the Lighthouse audit implies that it is checking for `alt` text.
-Need to check how this audit fails.
-Also need to talk with Rob the slight inconsistencies between
-Rob's doc, the audit, and recommendations in deque docs.
--->
-<figure class="w-figure">
-  <img class="w-screenshot" src="object-alt.png" alt="Lighthouse audit showing <object> elements do not have alternative text">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add alternative text to `<object>` elements
-
-Describe the object in the text content of the `<object>` element.
-In the example below `2019 Web Accessibility Report` is the description
-of the object.
-
-```html
-<object type="application/pdf"
-    data="/report.pdf"
-    width="600"
-    height="400">
-2019 Web Accessibility Report
-</object>
-```
-
-Learn more in [Include text alternatives for images and objects](/labels-and-text-alternatives#include-text-alternatives-for-images-and-objects).
-
-{% Aside 'note' %}
-You can also use `alt` and ARIA labels to describe object elements,
-for example,
-`<object type="application/pdf" data="/report.pdf alt="2019 Web Accessibility Report">`.
-(See [&lt;object> elements must have alternate text](https://dequeuniversity.com/rules/axe/3.3/object-alt).)
-{% endAside %}
-
-## Tips for writing effective `alt` text
-
-- As previously mentioned, describe the information contained in the embedded object.
-- Alternative text should give the intent, purpose, and meaning of the object.
-- Blind users should get as much information from alternative text as a sighted user gets from the object.
-- Avoid non-specific words like "chart", "image", or "diagram".
-
-Learn more in
-[WebAIM's guide to Alternative Text](https://webaim.org/techniques/alttext/).
-
-## Resources
-
-- [Source code for **`<object>` elements do not have `[alt]` text** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/object-alt.js)
-- [&lt;object> elements must have alternate text (Deque University)](https://dequeuniversity.com/rules/axe/3.3/object-alt)
diff --git a/src/site/content/en/lighthouse-accessibility/object-alt/object-alt.png b/src/site/content/en/lighthouse-accessibility/object-alt/object-alt.png
deleted file mode 100644
index 1823905112f..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/object-alt/object-alt.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/offscreen-content-hidden/index.md b/src/site/content/en/lighthouse-accessibility/offscreen-content-hidden/index.md
deleted file mode 100644
index 3e12fb700e2..00000000000
--- a/src/site/content/en/lighthouse-accessibility/offscreen-content-hidden/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-layout: post
-title: Offscreen content is hidden from assistive technology
-description: |
-  Learn how to improve your web page's accessibility for assistive technology
-  users by hiding off-screen content from assistive technologies.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - offscreen-content-hidden
----
-
-Ensure that only relevant parts of the page are exposed to screen readers and
-other assistive technologies.
-For instance,
-content that's offscreen or just presentational
-should be hidden from assistive technologies.
-
-## How to manually test
-
-To check that offscreen content is hidden,
-you need to manually test that content using a screen reader.
-- For Mac users, check out
-[this video on using VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=6).
-- For PC users, check out
-[this video on using NVDA](https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=4).
-- For Chromebooks users, check out
-[ChromeVox, the built-in screen reader](https://support.google.com/chromebook/answer/7031755?hl=en).
-
-Use the `TAB` key to tab through your page.
-The screen reader shouldn't announce hidden content.
-
-## How to fix
-
-To hide offscreen content,
-remove the element containing that content from the
-tab order by setting it to `display: none` or `visibility: hidden`.
-
-For example:
-
-```css
-.remove-me {
-  visibility: hidden;
-}
-```
-
-```html
-<button class="remove-me">Can't reach me with the TAB key!</button>
-```
-
-See also [Correctly set the visibility of offscreen content](/keyboard-access/#correctly-set-the-visibility-of-offscreen-content).
-
-## Resources
-
-[Source code for **Offscreen content is hidden from assistive technology** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/offscreen-content-hidden.js)
diff --git a/src/site/content/en/lighthouse-accessibility/tabindex/index.md b/src/site/content/en/lighthouse-accessibility/tabindex/index.md
deleted file mode 100644
index 20bf0205f7a..00000000000
--- a/src/site/content/en/lighthouse-accessibility/tabindex/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: "Some elements have a `[tabindex]` value greater than `0`"
-description: |
-  Learn how to improve your web page's keyboard accessibility by avoiding
-  an explicit keyboard navigation order.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - tabindex
----
-
-Although technically valid,
-using a `tabindex` greater than `0` is considered an anti-pattern because
-it shifts the affected element to the end of the
-[tab order](/keyboard-access/#focus-and-the-tab-order).
-This unexpected behavior can make it seem like some elements can't be accessed
-via keyboard, which is frustrating for users who rely on assistive technologies.
-
-## How the Lighthouse `tabindex` audit fails
-
-Lighthouse flags elements that have a `tabindex` value greater than `0`:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="tabindex.png" alt="Lighthouse audit showing some elements have a tabindex value greater than 0">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix problematic `tabindex` values
-
-If you have a `tabindex` greater than `0`,
-and you're using a native link or form element,
-remove the `tabindex`.
-Native HTML elements such as `<button>` or `<input>`
-have keyboard accessibility built-in for free.
-
-If you're using custom interactive components,
-set the `tabindex` to `0`.
-For example:
-
-```html
-<div tabindex="0">Focus me with the TAB key</div>
-```
-
-If you need an element to come sooner or later in the tab order,
-it should be moved to a different spot in the DOM.
-Learn more in
-[Control focus with tabindex](/control-focus-with-tabindex).
-
-## Resources
-
-- [Source code for **Some elements have a `[tabindex]` value greater than 0** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/tabindex.js)
-- [Elements should not have tabindex greater than zero (Deque University)](https://dequeuniversity.com/rules/axe/3.3/tabindex)
diff --git a/src/site/content/en/lighthouse-accessibility/tabindex/tabindex.png b/src/site/content/en/lighthouse-accessibility/tabindex/tabindex.png
deleted file mode 100644
index d9e27418458..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/tabindex/tabindex.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/td-headers-attr/index.md b/src/site/content/en/lighthouse-accessibility/td-headers-attr/index.md
deleted file mode 100644
index b51c1dbca26..00000000000
--- a/src/site/content/en/lighthouse-accessibility/td-headers-attr/index.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-layout: post
-title: "Cells in a `<table>` element that use the `[headers]` attribute refer to an element ID not found within the same table"
-description: |
-  Learn how to improve the accessibility of tables on your web page by making
-  sure that data cells always refer to existing header elements.
-date: 2019-05-02
-updated: 2020-03-20
-web_lighthouse:
-  - td-headers-attr
----
-
-Screen readers and other assistive technologies
-announce table headers when they come to each table data cell.
-If the headers and data cells don't match up,
-it's very confusing.
-Every table data cell must relate to the correct table header;
-therefore, there should only be one table header per column.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags tables that have more than one table header per column:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="td-headers-attr.png" alt="Lighthouse audit showing there's more than one table header for a single column">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix data cells that refer to nonexistent headers
-
-Each table data cell must align with one table header cell.
-
-The following table isn't structured correctly;
-one column has multiple table headers:
-
-```html
-<table>
-  <caption><strong>My marathon training log</strong></caption>
-  <thead>
-    <tr>
-      <th>Week</th>
-      <th>Total miles</th>
-      <th>Longest run</th>
-      <th>Long run pace</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <th headers="Week">1</th>
-      <td>14</td>
-      <td>5</td>
-      <td>12.30</td>
-    </tr>
-
-    <tr>
-      <th>1</th>
-      <td>16</td>
-      <td>6</td>
-      <td>12.15</td>
-    </tr>
-
-  </tbody>
-
-</table>
-```
-
-To fix this table,
-remove `headers="Week"` and
-apply the `scope` attribute to our header column and table rows.
-
-The `scope` attribute tells the browser and assistive technologies
-that everything under the column
-is related to the header at the top,
-and everything to the right of the row header is related to that header.
-
-Also add the missing `<td>` to the first row in the body,
-so that the table data aligns correctly with the table headers:
-
-```html
-<table>
-  <caption>My marathon training log</caption>
-  <thead>
-    <tr>
-      <th scope="col">Week</th>
-      <th scope="col">Total miles</th>
-      <th scope="col">Longest run</th>
-      <th scope="col">Long run pace</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>14</td>
-      <td>5</td>
-      <td>12.30</td>
-    </tr>
-
-    <tr>
-      <th scope="row">1</th>
-      <td>16</td>
-      <td>6</td>
-      <td>12.15</td>
-    </tr>
-
-  </tbody>
-
-</table>
-```
-
-## Resources
-
-- [Source code for **Cells in a `<table>` element that use the `[headers]` attribute refer to an element `id` not found within the same table** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/td-headers-attr.js)
-- [All cells in a `<table>` element that use the headers attribute must only refer to other cells of that same `<table>` (Deque University)](https://dequeuniversity.com/rules/axe/3.3/td-headers-attr)
diff --git a/src/site/content/en/lighthouse-accessibility/td-headers-attr/td-headers-attr.png b/src/site/content/en/lighthouse-accessibility/td-headers-attr/td-headers-attr.png
deleted file mode 100644
index 45086a206c1..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/td-headers-attr/td-headers-attr.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/th-has-data-cells/index.md b/src/site/content/en/lighthouse-accessibility/th-has-data-cells/index.md
deleted file mode 100644
index 94aa90f6fbd..00000000000
--- a/src/site/content/en/lighthouse-accessibility/th-has-data-cells/index.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-layout: post
-title: "`<th>` elements and elements with `[role=\"columnheader\"/\"rowheader\"]` do not have data cells they describe"
-description: |
-  Learn how to make tables on your web page more accessible to assistive
-  technology users by making sure that there are data cells associated with
-  each header cell.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - th-has-data-cells
----
-
-Screen readers and other assistive technologies
-have features to make navigating tables easier.
-Table headers must refer to some set of cells
-so that assistive technologies can help users navigate tables easily.
-
-## How this Lighthouse audit fails
-
-Lighthouse flags `<th>` elements and elements with `[role="columnheader"/"rowheader"]`
-that don't have the data cells they describe:
-
-<!--
-***Todo*** I cannot for the life of me get this audit to fail. I've tried all sorts of combinations of things.
-For sure, empty columns don't fail. I've also had columns without headers, and they don't fail either.
-I've removed scope, I've tried making the tables as confusing as possible, and the audit just doesn't fail.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="td-headers-attr.png" alt="Lighthouse audit showing table headers do not have data cells">
-</figure>
--->
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix table headers that have no associated data cells
-
-The following table isn't structured correctly;
-there's a table header column, "Marathon pace", without table data cells:
-
-```html
-<table>
-  <caption>My marathon training log</caption>
-  <thead>
-    <tr>
-      <th scope="col">Week</th>
-      <th scope="col">Total miles</th>
-      <th scope="col">Longest run</th>
-      <th scope="col">Marathon pace</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>14</td>
-      <td>5</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>16</td>
-      <td>6</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-To fix this table,
-add the missing table data cells for the table header column, "Marathon pace":
-
-
-```html
-<table>
-  <caption>My marathon training log</caption>
-  <thead>
-    <tr>
-      <th scope="col">Week</th>
-      <th scope="col">Total miles</th>
-      <th scope="col">Longest run</th>
-      <th scope="col">Marathon pace</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>14</td>
-      <td>5</td>
-      <td>4:45:00</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>16</td>
-      <td>6</td>
-      <td>4:33:00</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-Assistive technologies announce the table headers
-when they come to each table data cell.
-If the headers and data cells don't match up,
-it's very confusing.
-
-## Resources
-
-- [Source code for **`<th>` elements and elements with `[role="columnheader"/"rowheader"]` do not have data cells they describe** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/th-has-data-cells.js)
-- [All `<th>` elements and elements with `role="columnheader"` or `role="rowheader"` must have data cells they describe (Deque University)](https://dequeuniversity.com/rules/axe/3.3/th-has-data-cells)
diff --git a/src/site/content/en/lighthouse-accessibility/use-landmarks/index.md b/src/site/content/en/lighthouse-accessibility/use-landmarks/index.md
deleted file mode 100644
index 2f16d4e016f..00000000000
--- a/src/site/content/en/lighthouse-accessibility/use-landmarks/index.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-layout: post
-title: HTML5 landmark elements are used to improve navigation
-description: |
-  Learn how to improve the accessibility of your web page by providing
-  landmarks that keyboard users can use to navigate.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - use-landmarks
-  - managed-focus
----
-
-HTML5 elements such as `main`, `nav`, and `aside` act as landmarks,
-or special regions on the page to which
-screen readers and other assistive technologies can jump.
-By using landmark elements,
-you can dramatically improve the navigation experience on your site
-for users of assistive technology.
-Learn more in Deque University's
-[HTML 5 and ARIA Landmarks](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html).
-
-## How to manually check landmarks
-
-Use [the W3C's list of landmark elements](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html)
-to check that each major section of your page is contained by a landmark element.
-For example:
-
-```html
-<header>
-  <p>Put product name and logo here</p>
-</header>
-<nav>
-  <ul>
-    <li>Put navigation here</li>
-  </ul>
-</nav>
-<main>
-  <p>Put main content here</p>
-</main>
-<footer>
-  <p>Put copyright info, supplemental links, etc. here</p>
-</footer>
-```
-
-You can also use tools like Microsoft's
-<a href="https://accessibilityinsights.io/" rel="noopener">Accessibility Insights extension</a>
-to visualize your page structure and catch sections that aren't contained in landmarks:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="landmark-highlights.png"
-    alt="Screenshot of web.dev with landmarks highlighted by the Accessibility Insights extension">
-</figure>
-
-## How to use landmarks effectively
-
-- Use landmark elements to define major sections of your page
-  instead of relying on generic elements like `<div>` or `<span>`.
-- Use landmarks to convey the structure of your page.
-  For example, the `<main>` element should include all content directly related
-  to the page's main idea, so there should only be one per page.
-  See [MDN's summary of content sectioning elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
-  to learn how to use each landmark.
-- Use landmarks judiciously. Having too many landmarks can actually
-  make navigation _more_ difficult for assistive technology users because
-  it prevents them from easily skipping to a desired piece of content.
-
-{% Aside %}
-If you find that your page has, for example, four `<nav>` elements
-or ten `<aside>` elements, that may suggest a need to simplify your
-user interface or content structure, which will likely benefit _all_ users.
-{% endAside %}
-
-See the [Headings and landmarks](/headings-and-landmarks) post
-for more information.
-
-## Resources
-
-- [Source code for **HTML5 landmark elements are used to improve navigation** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/use-landmarks.js)
-- [HTML5 Sectioning Elements (W3C)](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html)
-- [HTML 5 and ARIA Landmarks (Deque University)](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html)
diff --git a/src/site/content/en/lighthouse-accessibility/use-landmarks/landmark-highlights.png b/src/site/content/en/lighthouse-accessibility/use-landmarks/landmark-highlights.png
deleted file mode 100644
index 15401cc2b26..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/use-landmarks/landmark-highlights.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/valid-lang/index.md b/src/site/content/en/lighthouse-accessibility/valid-lang/index.md
deleted file mode 100644
index b3beb8a77b5..00000000000
--- a/src/site/content/en/lighthouse-accessibility/valid-lang/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: "`[lang]` attributes do not have a valid value"
-description: |
-  Learn how to improve the accessibility of your web page for international
-  audiences by providing a valid value for all lang attributes.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - valid-lange
----
-
-{% include 'content/lighthouse-accessibility/lang-attr.njk' %}
-
-If the language changes within your page,
-you must specify a valid
-<a href="https://www.w3.org/International/questions/qa-choosing-language-tags#question" rel="noopener">BCP 47 language</a>
-to ensure that the section in the new language is pronounced correctly.
-
-## How the Lighthouse invalid `lang` attribute audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags elements that have a `lang` attribute with an invalid value:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="valid-lang.png"
-    alt="Lighthouse audit showing elements with an invalid value for the lang attribute">
-</figure>
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to fix invalid `lang` attribute values
-
-Use only valid
-<a href="https://www.w3.org/International/questions/qa-choosing-language-tags#question" rel="noopener">BCP 47 language codes</a>
-in all `lang` attribute values.
-
-## Resources
-
-- <a href="https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/valid-lang.js" rel="noopener">Source code for **`[lang]` attributes do not have a valid value** audit</a>
-- <a href="https://dequeuniversity.com/rules/axe/3.3/valid-lang" rel="noopener">lang attribute must have a valid value (Deque University)</a>
diff --git a/src/site/content/en/lighthouse-accessibility/valid-lang/valid-lang.png b/src/site/content/en/lighthouse-accessibility/valid-lang/valid-lang.png
deleted file mode 100644
index f2856de8bf5..00000000000
Binary files a/src/site/content/en/lighthouse-accessibility/valid-lang/valid-lang.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-accessibility/video-caption/index.md b/src/site/content/en/lighthouse-accessibility/video-caption/index.md
deleted file mode 100644
index 2c3e93f3b9e..00000000000
--- a/src/site/content/en/lighthouse-accessibility/video-caption/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: post
-title: "`<video>` elements do not contain a `<track>` element with `[kind=\"captions\"]`"
-description: |
-  Learn how to make video on your web page more accessible by providing
-  closed captions.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - video-caption
----
-
-Captions make video elements usable for deaf or hearing-impaired users,
-providing critical information such as who is talking, what they're saying,
-and other non-speech information.
-
-## How the Lighthouse video caption audit fails
-
-Lighthouse flags `<video>` elements that are missing a `<track>` element
-with the attribute `kind="captions"`.
-
-<!--
-***Todo*** I tried very hard to get this audit to fail.
-But no matter what, it seems to pass,
-even with all sorts of crazy errors.
-See glitch: [meggin-accessibility-assets](https://glitch.com/edit/#!/meggin-accessibiity-assets-1).
-Also worth mentioning that I ran accessibility audit
-against the convert gifs to video codelab,
-and the audit doesn't fail either.
-We don't have the track info in the codelab,
-which seems problematic as well.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="" alt="Lighthouse audit showing video element missing captions">
-</figure>
--->
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add captions to a video
-
-Add at least one track element to the `video` element
-with the `kind="captions"` attribute:
-
-```html
-<video width="300" height="200">
-    <source src="marathonFinishLine.mp4" type="video/mp4">
-    <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
-    <track src="audio_desc_en.vtt" kind="descriptions" srclang="en" label="english_description">
-    <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
-    <track src="audio_desc_es.vtt" kind="descriptions" srclang="es" label="spanish_description">
-</video>
-```
-
-{% Aside 'note' %}
-The example above includes both captions for hearing impaired users,
-and audio descriptions for visually impaired users.
-Audio descriptions provide context beyond dialog, such as scenery, facial expressions.
-See also [`<video>` elements do not contain a `<track>` element with `[kind="description"]`](/video-description).
-{% endAside %}
-
-## Resources
-
-- [Source code for **`<video>` elements do not contain a `<track>` element with `[kind="captions"]`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/video-caption.js)
-- [`<video>` elements must have a `<track>` for captions (Deque University)](https://dequeuniversity.com/rules/axe/3.3/video-caption)
diff --git a/src/site/content/en/lighthouse-accessibility/video-description/index.md b/src/site/content/en/lighthouse-accessibility/video-description/index.md
deleted file mode 100644
index 3453f74c53e..00000000000
--- a/src/site/content/en/lighthouse-accessibility/video-description/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-layout: post
-title: "`<video>` elements do not contain a `<track>` element with `[kind=\"description\"]`"
-description: |
-  Learn how to make video on your web page more accessible by providing
-  an audio description.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - video-description
----
-
-Audio descriptions provide relevant information for videos that dialogue
-cannot, such as facial expressions and scenes.
-
-## How the Lighthouse video description audit fails
-
-Lighthouse flags `<video>` elements that are missing a `<track>` element
-with the attribute `kind="descriptions"`.
-
-<!--
-***Todo*** I tried very hard to get audio/video audits to fail.
-But no matter what, they seem to pass
-even with all sorts of crazy errors.
-See glitch: [meggin-accessibility-assets](https://glitch.com/edit/#!/meggin-accessibiity-assets-1)
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="" alt="Lighthouse audit showing video element missing audio descriptions">
-</figure>
--->
-
-{% include 'content/lighthouse-accessibility/scoring.njk' %}
-
-## How to add audio descriptions to video elements
-
-Add at least one track element to the `video` element
-with attribute `kind="descriptions"`:
-
-```html
-<video width="300" height="200">
-    <source src="marathonFinishLine.mp4" type="video/mp4">
-    <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
-    <track src="audio_desc_en.vtt" kind="descriptions" srclang="en" label="english_description">
-    <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
-    <track src="audio_desc_es.vtt" kind="descriptions" srclang="es" label="spanish_description">
-</video>
-```
-
-{% Aside 'note' %}
-The example above includes both audio descriptions for visually impaired users
-and captions for hearing impaired users.
-Captions make video elements usable for deaf or hearing-impaired users.
-See also [`<video>` elements do not contain a `<track>` element with `[kind="captions"]`](/video-caption).
-{% endAside %}
-
-## Resources
-
-- [Source code for **`<video>` elements do not contain a `<track>` element with `[kind="description"]`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/accessibility/video-description.js)
-- [`<video>` elements must have an audio description `<track>` (Deque University)](https://dequeuniversity.com/rules/axe/3.3/video-description)
diff --git a/src/site/content/en/lighthouse-accessibility/visual-order-follows-dom/index.md b/src/site/content/en/lighthouse-accessibility/visual-order-follows-dom/index.md
deleted file mode 100644
index 2a8f308131b..00000000000
--- a/src/site/content/en/lighthouse-accessibility/visual-order-follows-dom/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Visual order on the page follows DOM order
-description: |
-  Learn about visual-order-follows-dom audit.
-date: 2019-05-02
-updated: 2019-09-19
-web_lighthouse:
-  - visual-order-follows-dom
----
-
-Implementing a logical tab order is an important part of
-providing your users with a smooth keyboard navigation experience.
-Screen readers and other assistive technologies navigate the page in DOM order.
-The flow of information should make sense.
-
-## How to manually test
-
-To check if your application's tab order is logical,
-try tabbing through your page.
-In general,
-focus should follow reading order,
-moving from left to right,
-from the top to the bottom of your page.
-
-There are two main ideas to keep in mind when assessing your tab order:
-
-- Are the elements in the DOM arranged in a logical order?
-- Is offscreen content correctly hidden from navigation?
-
-Notice any jumps in navigation that seem jarring.
-Also notice any offscreen jumps,
-where tabbing brings you to content that's not meant to be visible.
-
-Learn more in [Keyboard access fundamentals](/keyboard-access).
-
-## How to fix
-
-If the focus order seems wrong,
-you should rearrange the elements in the DOM to make the tab order more natural.
-
-If you've used CSS to visually reposition elements,
-assistive technology users will experience a nonsensical navigation.
-Instead of using CSS,
-move the element to an earlier position in the DOM.
-
-If offscreen content is still accessible to keyboard controls,
-consider removing it using `tabindex="-1"`.
-
-Learn more in [Control focus with tabindex](/control-focus-with-tabindex).
-
-## Resources
-
-[Source code for **Visual order on the page follows DOM order** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/accessibility/manual/visual-order-follows-dom.js)
diff --git a/src/site/content/en/lighthouse-best-practices/appcache-manifest/appcache-manifest.png b/src/site/content/en/lighthouse-best-practices/appcache-manifest/appcache-manifest.png
deleted file mode 100644
index c6c4b4bbbb0..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/appcache-manifest/appcache-manifest.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/appcache-manifest/index.md b/src/site/content/en/lighthouse-best-practices/appcache-manifest/index.md
deleted file mode 100644
index a8803cf6c91..00000000000
--- a/src/site/content/en/lighthouse-best-practices/appcache-manifest/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-layout: post
-title: Uses Application Cache
-description: |
-  Learn how to migrate your web page from the deprecated Application Cache to
-  the Cache API.
-date: 2019-05-02
-web_lighthouse:
-  - appcache-manifest
-updated: 2019-08-28
----
-
-The Application Cache, also known as AppCache,
-is [deprecated](https://html.spec.whatwg.org/multipage/browsers.html#offline).
-
-## How the Lighthouse Application Cache audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages that use the Application Cache:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="appcache-manifest.png" alt="Lighthouse audit showing that a page uses the Application Cache">
-</figure>
-
-This audit fails when Lighthouse finds a reference to
-the Application Cache manifest in a page's `<html>` tag.
-For example, this markup causes the audit to fail:
-
-```html
-<html manifest="example.appcache">
-  ...
-</html>
-```
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## Use the Cache API instead of the Application Cache
-
-To pass this audit,
-remove the manifest from your page,
-and use the
-[Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
-via a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/)
-instead.
-
-To migrate from the Application Cache to service workers,
-consider using the
-[sw-appcache-behavior library](https://github.com/GoogleChrome/sw-appcache-behavior).
-This library generates a service-worker-based implementation of the behavior
-defined in an Application Cache manifest.
-
-See the [Current page does not respond with a 200 when offline](/works-offline) post
-for more information about using service workers to make your site work
-offline.
-
-## Resources
-
-- [Source code for **Uses Application Cache** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/dobetterweb/appcache-manifest.js)
-- MDN's [Cache](https://developer.mozilla.org/en-US/docs/Web/API/Cache) page
-- [Current page does not respond with a 200 when offline](/works-offline)
diff --git a/src/site/content/en/lighthouse-best-practices/charset/charset.png b/src/site/content/en/lighthouse-best-practices/charset/charset.png
deleted file mode 100644
index fcacb5d4b57..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/charset/charset.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/charset/index.md b/src/site/content/en/lighthouse-best-practices/charset/index.md
deleted file mode 100644
index 54c7cbff685..00000000000
--- a/src/site/content/en/lighthouse-best-practices/charset/index.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: post
-title: Charset declaration is missing or occurs too late in the HTML
-description: |
-  Learn how to add a character encoding declaration to your HTML.
-web_lighthouse:
-  - charset
-date: 2020-05-05
----
-
-Servers and browsers communicate with each other by sending bytes of data over the
-internet. If the server doesn't specify which [character encoding format][format] it's
-using when it sends an HTML file, the browser won't know what character each byte represents.
-The [character encoding declaration](https://html.spec.whatwg.org/multipage/semantics.html#charset)
-specification solves this problem. 
-
-{% Aside %}
-  Theoretically, a late `<meta charset>` element (one that is not fully contained in
-  the first 1024 bytes of the document) can also significantly affect load performance.
-  See [Issue #10023](https://github.com/GoogleChrome/lighthouse/issues/10023#issuecomment-575129051).
-{% endAside %}
-
-## How the Lighthouse `charset` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that do not specify their character encoding:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="charset.png" alt="The failing character encoding audit.">
-</figure>
-
-Lighthouse considers the character encoding to be declared if it finds any of the following:
-
-- A `<meta charset>` element in the `<head>` of the document that is completely
-  contained in the first 1024 bytes of the document
-- A `Content-Type` HTTP response header with a `charset` directive that matches a
-  [valid IANA name][iana]
-- A [byte-order mark](https://www.w3.org/International/questions/qa-byte-order-mark) (BOM)
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to pass the `charset` audit
-
-### Add a `<meta chartset>` element to your HTML {: #html }
-
-Add a `<meta charset>` element within the first 1024 bytes of your HTML document.
-The element must be fully contained within the first 1024 bytes.
-The best practice is to make the `<meta charset>` element the first element in the
-`<head>` of your document.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    …
-```
-
-### Add a `Content-Type` HTTP response header {: #http }
-
-Configure your server to add a [`Content-Type`][type]
-HTTP response header that includes a `charset` directive.
-
-```http
-Content-Type: text/html; charset=UTF-8
-```
-
-## Resources
-
-- [Charset declaration is missing or occurs too late in the HTML](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/charset.js)
-- [Example page that fails the audit](https://charset.glitch.me/)
-  ([source](https://glitch.com/edit/#!/charset))
-- [Character encoding][format]
-- [`Content-Type`][type]
-- [IANA character set names][iana]
-
-[format]: https://en.wikipedia.org/wiki/Character_encoding
-[type]: https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type
-[iana]: https://www.iana.org/assignments/character-sets/character-sets.xhtml
diff --git a/src/site/content/en/lighthouse-best-practices/deprecations/deprecations.png b/src/site/content/en/lighthouse-best-practices/deprecations/deprecations.png
deleted file mode 100644
index 2edde4ff34a..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/deprecations/deprecations.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/deprecations/index.md b/src/site/content/en/lighthouse-best-practices/deprecations/index.md
deleted file mode 100644
index 18843c56bce..00000000000
--- a/src/site/content/en/lighthouse-best-practices/deprecations/index.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Uses deprecated APIs
-description: |
-  Learn how to remove and replace deprecated APIs from your web page.
-web_lighthouse:
-  - deprecations
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Deprecated APIs are scheduled to be removed from Chrome.
-Calling these APIs
-after they're removed causes errors on your site.
-
-## How the Lighthouse deprecated API audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages that call deprecated APIs:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="deprecations.png" alt="Lighthouse audit shows usage of deprecated APIs">
-</figure>
-
-Lighthouse includes all deprecated API warnings that Chrome logs
-to the DevTools Console.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to remove deprecated APIs
-
-Go to
-[Chrome Platform Status](https://www.chromestatus.com/features#deprecated) and
-expand the entries for the APIs that you're using
-to learn why the APIs are deprecated and how to replace them.
-
-## Resources
-
-- [Source code for **Uses deprecated APIs** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/deprecations.js)
-- [Chrome Platform Status](https://www.chromestatus.com/features#deprecated)
diff --git a/src/site/content/en/lighthouse-best-practices/doctype/doctype.png b/src/site/content/en/lighthouse-best-practices/doctype/doctype.png
deleted file mode 100644
index fc9a22d9e66..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/doctype/doctype.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/doctype/index.md b/src/site/content/en/lighthouse-best-practices/doctype/index.md
deleted file mode 100644
index ce00433c2c2..00000000000
--- a/src/site/content/en/lighthouse-best-practices/doctype/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: Page lacks the HTML doctype, thus triggering quirks mode
-description: |
-  Learn how to make sure your page doesn't trigger quirks mode in older
-  browsers.
-web_lighthouse:
-  - doctype
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Specifying a doctype prevents the browser from switching to
-[quirks mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode),
-which can cause your page to render in unexpected ways.
-
-## How the Lighthouse doctype audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages without the `<!DOCTYPE html>` declaration:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="doctype.png" alt="Lighthouse audit showing missing doctype">
-</figure>
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to add a doctype declaration
-
-Add the `<!DOCTYPE html>` declaration to the top of your HTML document:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-…
-```
-
-See MDN's [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
-page for more information.
-
-## Resources
-
-- [Source code for **Page lacks the HTML doctype, thus triggering quirks mode** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/dobetterweb/doctype.js)
-- [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
-- [Quirks Mode and Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)
diff --git a/src/site/content/en/lighthouse-best-practices/errors-in-console/errors-in-console.png b/src/site/content/en/lighthouse-best-practices/errors-in-console/errors-in-console.png
deleted file mode 100644
index 46eecb2b92b..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/errors-in-console/errors-in-console.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/errors-in-console/errors.png b/src/site/content/en/lighthouse-best-practices/errors-in-console/errors.png
deleted file mode 100644
index 256a39a73ae..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/errors-in-console/errors.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/errors-in-console/index.md b/src/site/content/en/lighthouse-best-practices/errors-in-console/index.md
deleted file mode 100644
index 6e4bf9558c8..00000000000
--- a/src/site/content/en/lighthouse-best-practices/errors-in-console/index.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-layout: post
-title: Browser errors were logged to the console
-description: |
-  Learn how to identify and fix browser errors.
-web_lighthouse:
-  - errors-in-console
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Most browsers ship with built-in developer tools.
-These developer tools usually include a [console](https://developers.google.com/web/tools/chrome-devtools/console/).
-The console gives you information about the page that's currently running.
-
-Messages logged in the console come from
-either the web developers who built the page
-or the browser itself.
-All console messages have a severity level:
-`Verbose`, `Info`, `Warning`, or `Error`.
-An `Error` message means there's a problem on your page that you need to resolve.
-
-## How the Lighthouse browser error audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags all browser errors logged to the console:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="errors-in-console.png" alt="Lighthouse audit showing browser errors in the console">
-</figure>
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to fix browser errors
-
-Fix each browser error that Lighthouse reports
-to ensure that your page runs as expected for all your users.
-
-Chrome DevTools includes a couple tools
-to help you track down the cause of errors:
-
-- Below the text of each error, the DevTools Console shows the
-  [call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)
-  that caused the problematic code to execute.
-- A link at the top-right of each error shows you the code
-  that caused the error.
-
-For example, this screenshot shows a page with two errors:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="errors.png" alt="An example of errors in the Chrome DevTools Console">
-</figure>
-
-In the example above, the first error comes from a web developer
-via a call to
-[`console.error()`](https://developers.google.com/web/tools/chrome-devtools/console/console-reference#error).
-The second error comes from the browser and
-indicates that a variable used in one of the page's scripts does not exist.
-
-Below the text of each error,
-the DevTools Console indicates the call stack in which the error appears.
-For example, for the first error the Console indicates
-that an `(anonymous)` function called the `init` function,
-which called the `doStuff` function.
-Clicking the `pen.js:9` link in the top-right of that error
-shows you the relevant code.
-
-Reviewing the relevant code for each error in this way can help you identify
-and resolve possible problems.
-
-If you can't figure out the cause of an error, try entering the error text
-into a search engine.
-If you can't find solutions to your problem,
-try asking a question on [Stack Overflow](https://stackoverflow.com).
-
-If you can't fix an error, consider wrapping it in
-a [`try…catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) statement
-to explicitly indicate in the code that you're aware of the issue.
-You can also use the `catch` block to handle the error more gracefully.
-
-## Resources
-
-- [Source code for **Browser errors were logged to the console** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/errors-in-console.js)
-- [Console Overview](https://developers.google.com/web/tools/chrome-devtools/console/)
-- [Stack Overflow](https://stackoverflow.com/)
-- [try…catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)
diff --git a/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/external-anchors-use-rel-noopener.png b/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/external-anchors-use-rel-noopener.png
deleted file mode 100644
index 0c069d22ac2..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/external-anchors-use-rel-noopener.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/index.md b/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/index.md
deleted file mode 100644
index 285bb2ec64e..00000000000
--- a/src/site/content/en/lighthouse-best-practices/external-anchors-use-rel-noopener/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Links to cross-origin destinations are unsafe
-description: |
-  Learn how to safely link to resources on another host.
-web_lighthouse:
-  - external-anchors-use-rel-noopener
-date: 2019-05-02
-updated: 2019-08-28
----
-
-When you link to a page on another site using the `target="_blank"` attribute,
-you can expose your site to performance and security issues:
-
-- The other page may run on the same process as your page.
-  If the other page is running a lot of JavaScript,
-  your page's performance may suffer.
-- The other page can access your `window` object with the `window.opener` property.
-  This may allow the other page to redirect your page to a malicious URL.
-
-Adding `rel="noopener"` or `rel="noreferrer"`
-to your `target="_blank"` links avoids these issues.
-
-## How the Lighthouse cross-origin destination audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags unsafe links to cross-origin destinations:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="external-anchors-use-rel-noopener.png" alt="Lighthouse audit showing unsafe links to cross-origin destinations">
-</figure>
-
-Lighthouse uses the following process to identify links as unsafe:
-
-1. Gather all `<a>` tags that contain the `target="_blank"` attribute
-   but not the `rel="noopener"` or `rel="noreferrer"` attributes.
-2. Filter out any same-host links.
-
-Because Lighthouse filters out same-host links,
-there's an edge case you should be aware of if you're working on a large site:
-if one page contains a `target="_blank"` link to another page on your site without using `rel="noopener"`,
-the performance implications of this audit still apply.
-However, you won't see these links in your Lighthouse results.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to improve your site's performance and prevent security vulnerabilities
-
-Add `rel="noopener"` or `rel="noreferrer"`
-to each link identified in your Lighthouse report.
-In general, when you use `target="_blank"`, always
-add `rel="noopener"` or `rel="noreferrer"`:
-
-```html
-<a href="https://examplepetstore.com" target="_blank" rel="noopener">
-  Example Pet Store
-</a>
-```
-
-- `rel="noopener"` prevents the new page from being able
-to access the `window.opener` property and
-ensures it runs in a separate process.
-- `rel="noreferrer"` has the same effect
-but also prevents the `Referer` header
-from being sent to the new page.
-See [Link type "noreferrer"](https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer).
-
-See the [Share cross-origin resources safely](/cross-origin-resource-sharing/)
-post for more information.
-
-## Resources
-
-- [Source code for **Links to cross-origin destinations are unsafe** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js)
-- [Share cross-origin resources safely](/cross-origin-resource-sharing/)
-- [Site isolation for web developers](https://developers.google.com/web/updates/2018/07/site-isolation)
diff --git a/src/site/content/en/lighthouse-best-practices/geolocation-on-start/geolocation-on-start.png b/src/site/content/en/lighthouse-best-practices/geolocation-on-start/geolocation-on-start.png
deleted file mode 100644
index ad12660254d..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/geolocation-on-start/geolocation-on-start.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/geolocation-on-start/index.md b/src/site/content/en/lighthouse-best-practices/geolocation-on-start/index.md
deleted file mode 100644
index 3ebe2a68334..00000000000
--- a/src/site/content/en/lighthouse-best-practices/geolocation-on-start/index.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: post
-title: Requests the geolocation permission on page load
-description: |
-  Learn how to responsibly request geolocation permission in a way that provides
-  good user experience.
-web_lighthouse:
-  - geolocation-on-start
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Users are mistrustful of or confused by pages
-that automatically request their location on page load.
-
-## How the Lighthouse geolocation audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages that request geolocation permission on load:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="geolocation-on-start.png" alt="Lighthouse audit showing geolocation request on page load">
-</figure>
-
-Lighthouse checks all JavaScript executed on page load.
-If the code calls `geolocation.getCurrentPosition()` or `geolocation.watchPosition()`,
-and geolocation permission has not already been granted, the audit fails.
-
-If geolocation permission was granted to a page before the audit,
-Lighthouse can't identify any geolocation permission requests.
-So, make sure to [reset permissions](https://support.google.com/chrome/answer/6148059)
-before running the audit.
-
-Lighthouse reports the URL and line number
-of each request for geolocation permission.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to ask for users' locations responsibly
-Remove all calls to `geolocation.getCurrentPosition()` and
-`geolocation.watchPosition()` that occur on page load.
-
-To provide a better user experience:
-- Always request geolocation permission after a user action,
-not on page load.
-- Clearly indicate that the action will request geolocation permission.
-- Assume users won't give you their locations.
-- Use a fallback if users don't grant geolocation permission.
-
-
-See Google's
-[User Location](https://developers.google.com/web/fundamentals/native-hardware/user-location/)
-article for more information.
-
-## Resources
-
-- [Source code for **Requests the geolocation permission on page load** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/geolocation-on-start.js)
-- [User Location](https://developers.google.com/web/fundamentals/native-hardware/user-location/)
diff --git a/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/image-aspect-ratio.png b/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/image-aspect-ratio.png
deleted file mode 100644
index 9fd7f52c7ec..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/image-aspect-ratio.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/index.md b/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/index.md
deleted file mode 100644
index 7498e77f61a..00000000000
--- a/src/site/content/en/lighthouse-best-practices/image-aspect-ratio/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: post
-title: Displays images with incorrect aspect ratio
-description: |
-  Learn how to display responsive images with the correct aspect ratio.
-web_lighthouse:
-  - image-aspect-ratio
-date: 2019-05-02
-updated: 2020-04-29
----
-
-If a rendered image has an [aspect ratio][ar] that's significantly different
-from the aspect ratio in its source file (the _natural_ aspect ratio),
-the rendered image may look distorted,
-possibly creating an unpleasant user experience.
-
-## How the Lighthouse image aspect ratio audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags any
-image with a rendered aspect ratio
-5 percent or more different from its natural ratio:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="image-aspect-ratio.png" alt="Lighthouse audit shows images displayed with incorrect aspect ratio">
-</figure>
-
-There are two common causes for an incorrect image aspect ratio:
-
-- An image is set to explicit width and height values that differ from the source image's dimensions.
-- An image is set to a width and height as a percentage of a variably-sized container.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## Ensure images display with the correct aspect ratio
-
-### Use an image CDN
-
-An image CDN can make it easier to automate the process of creating different sized
-versions of your images. Check out [Use image CDNs to optimize images](/image-cdns/)
-for an overview and [How to install the Thumbor image CDN](/install-thumbor/) for a
-hands-on codelab.
-
-### Check the CSS that affects the image's aspect ratio
-If you're having trouble finding the CSS that's causing the incorrect aspect ratio,
-Chrome DevTools can show you the CSS declarations that affect a given image.
-See Google's [View only the CSS that's actually applied to an element](https://developers.google.com/web/tools/chrome-devtools/css/reference#computed)
-page for more information.
-
-
-### Check the image's `width` and `height` attributes in the HTML
-
-When possible, it's good practice to specify each image's `width` and `height`
-attributes in your HTML so that the browser can allocate space for the image.
-This approach helps to ensure that content below the image doesn't shift once
-the image is loaded.
-
-However, specifying image dimensions in HTML can be difficult
-if you're working with responsive images
-because there's no way to know the width and height
-until you know the viewport dimensions. Consider using the
-[CSS Aspect Ratio](https://www.npmjs.com/package/css-aspect-ratio) library or
-[aspect ratio boxes](https://css-tricks.com/aspect-ratio-boxes/)
-to help preserve aspect ratios for responsive images.
-
-Finally, check out the [Serve images with correct dimensions](/serve-images-with-correct-dimensions)
-post to learn how to serve images that are the right size for each user's device.
-
-## Resources
-
-- [Source code for **Displays images with incorrect aspect ratio** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/image-aspect-ratio.js)
-- [CSS Aspect Ratio](https://www.npmjs.com/package/css-aspect-ratio)
-- [Aspect Ratio Boxes](https://css-tricks.com/aspect-ratio-boxes/)
-- [Serve images with correct dimensions](/serve-images-with-correct-dimensions)
-
-[ar]: https://en.wikipedia.org/wiki/Aspect_ratio_(image)
diff --git a/src/site/content/en/lighthouse-best-practices/index.njk b/src/site/content/en/lighthouse-best-practices/index.njk
deleted file mode 100644
index ce63991ff1b..00000000000
--- a/src/site/content/en/lighthouse-best-practices/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: lighthouse-best-practices
----
diff --git a/src/site/content/en/lighthouse-best-practices/js-libraries/index.md b/src/site/content/en/lighthouse-best-practices/js-libraries/index.md
deleted file mode 100644
index e39a0e25292..00000000000
--- a/src/site/content/en/lighthouse-best-practices/js-libraries/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: post
-title: Detected JavaScript libraries
-description: |
-  Learn about Lighthouse's diagnostic "Detected JavaScript libraries" audit.
-web_lighthouse:
-  - js-libraries
-date: 2019-05-02
-updated: 2019-08-28
----
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) lists all front-end JavaScript libraries detected on the page:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="js-libraries.png" alt="Lighthouse audit showing all front-end JavaScript libraries detected on page">
-</figure>
-
-## This is a diagnostic audit
-
-This audit simply lists all the front-end JavaScript libraries your page uses.
-
-Lighthouse also reports
-[front-end JavaScript libraries with known security risks](/no-vulnerable-libraries).
-Make sure to update any insecure libraries.
-
-## Resources
-
-[Source code for **Detected JavaScript libraries** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/dobetterweb/js-libraries.js)
diff --git a/src/site/content/en/lighthouse-best-practices/js-libraries/js-libraries.png b/src/site/content/en/lighthouse-best-practices/js-libraries/js-libraries.png
deleted file mode 100644
index f28f8fe8e1e..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/js-libraries/js-libraries.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/no-document-write/index.md b/src/site/content/en/lighthouse-best-practices/no-document-write/index.md
deleted file mode 100644
index 61fb0178965..00000000000
--- a/src/site/content/en/lighthouse-best-practices/no-document-write/index.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: post
-title: Uses document.write()
-description: |
-  Learn how to speed up your page's load time by avoiding  document.write().
-web_lighthouse:
-  - no-document-write
-date: 2019-05-02
-updated: 2020-06-04
----
-
-Using [`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write)
-can delay the display of page content by tens of seconds
-and is particularly problematic for users on slow connections.
-Chrome therefore blocks the execution of `document.write()` in many cases,
-meaning you can't rely on it.
-
-In the Chrome DevTools Console you'll see the following message when you use `document.write()`:
-
-```text
-[Violation] Avoid using document.write().
-```
-
-In the Firefox DevTools Console you'll see this message:
-
-```text
-An unbalanced tree was written using document.write() causing
-data from the network to be reparsed.
-```
-
-## How the Lighthouse `document.write()` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags
-calls to `document.write()` that weren't blocked by Chrome:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="no-document-write.png" alt="Lighthouse audit showing usage of document.write">
-</figure>
-
-For the most problematic uses,
-Chrome will either block calls to `document.write()`
-or emit a console warning about them, depending on the user's connection speed.
-Either way, the affected calls appear in the DevTools Console.
-See Google's [Intervening against `document.write()`](https://developers.google.com/web/updates/2016/08/removing-document-write)
-article for more information.
-
-Lighthouse reports any remaining calls to `document.write()`
-because it adversely affects performance no matter how it's used,
-and there are better alternatives.
-
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## Avoid `document.write()`
-
-Remove all uses of `document.write()` in your code. If it's being used
-to inject third-party scripts, try using
-[asynchronous loading](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript#parser_blocking_versus_asynchronous_javascript)
-instead.
-
-If third-party code is using `document.write()`,
-ask the provider to support asynchronous loading.
-
-## Resources
-
-- [Source code for **Uses `document.write()`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/no-document-write.js)
-- [Intervening against `document.write()`](https://developers.google.com/web/updates/2016/08/removing-document-write)
-- [Parser blocking versus asynchronous JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript#parser_blocking_versus_asynchronous_javascript)
-- [Speculative parsing](https://developer.mozilla.org/en-US/docs/Glossary/speculative_parsing)
\ No newline at end of file
diff --git a/src/site/content/en/lighthouse-best-practices/no-document-write/no-document-write.png b/src/site/content/en/lighthouse-best-practices/no-document-write/no-document-write.png
deleted file mode 100644
index b65c2e8fc9e..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/no-document-write/no-document-write.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/index.md b/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/index.md
deleted file mode 100644
index e128fc21a0b..00000000000
--- a/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: post
-title: Includes front-end JavaScript libraries with known security vulnerabilities
-description: |
-  Learn how to make your page more secure by replacing JavaScript libraries
-  that have known vulnerabilities.
-web_lighthouse:
-  - no-vulnerable-libraries
-date: 2019-05-02
-updated: 2020-06-04
----
-
-Intruders have automated web crawlers that can scan your site
-for known security vulnerabilities.
-When the web crawler detects a vulnerability,
-it alerts the intruder.
-From there,
-the intruder just needs to figure out how to exploit the vulnerability on your site.
-
-## How this Lighthouse audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags front-end JavaScript libraries with known security vulnerabilities:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="no-vulnerable-libraries.png" alt="Lighthouse audit showing any front-end JavaScript libraries with known security vulnerabilities used by the page">
-</figure>
-
-To detect vulnerable libraries, Lighthouse:
-
-- Runs [Library Detector For Chrome](https://www.npmjs.com/package/js-library-detector).
-- Checks the list of detected libraries against
-[snyk's Vulnerability DB](https://snyk.io/vuln?packageManager=all).
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## Stop using insecure JavaScript libraries
-
-Stop using each of the libraries that Lighthouse flags.
-If the library has released a newer version that fixes the vulnerability,
-upgrade to that version.
-If the library hasn't released a new version or is no longer maintained,
-consider using a different library.
-
-Click the links in the **Library Version** column of your report to learn more about
-each library's vulnerabilities.
-
-## Resources
-
-- [Source code for **Includes front-end JavaScript libraries with known security vulnerabilities** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js)
-- [snyk's Vulnerability DB](https://snyk.io/vuln?packageManager=all)
diff --git a/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/no-vulnerable-libraries.png b/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/no-vulnerable-libraries.png
deleted file mode 100644
index 873228d6d61..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/no-vulnerable-libraries/no-vulnerable-libraries.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/notification-on-start/index.md b/src/site/content/en/lighthouse-best-practices/notification-on-start/index.md
deleted file mode 100644
index 119059bd79e..00000000000
--- a/src/site/content/en/lighthouse-best-practices/notification-on-start/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: post
-title: Requests the notification permission on page load
-description: |
-  Learn how to responsibly request notification permission in a way that provides
-  good user experience.
-web_lighthouse:
-  - notification-on-start
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Good notifications are [timely, relevant, and precise](https://developers.google.com/web/fundamentals/push-notifications/).
-If your page asks for permission to send notifications on page load,
-those notifications may not be relevant to your users or their needs.
-
-## How the Lighthouse notification audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages that request notification permissions on load:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="notification-on-start.png" alt="Lighthouse audit shows page requests notification permissions on load">
-</figure>
-
-Lighthouse checks all JavaScript executed on page load.
-If the code calls `notification.requestPermission()`,
-and notification permission has not already been granted, the audit fails.
-
-If notification permission was granted to a page before the audit,
-Lighthouse can't identify any notification permission requests.
-So, make sure to [reset permissions](https://support.google.com/chrome/answer/6148059)
-before running the audit.
-
-Lighthouse reports the URL and line number
-of each request for notification permission.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to ask for users' notification permissions responsibly
-Remove all calls to `notification.requestPermission()`
-that occur on page load.
-
-To provide a better user experience:
-- Offer to send users a specific type of notification.
-- Present the permissions request after users opt in to the notification type.
-
-## Resources
-
-- [Source code for **Requests the notification permission on page load** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/notification-on-start.js)
-- [Web Push Notifications: Timely, Relevant, and Precise](https://developers.google.com/web/fundamentals/push-notifications/)
diff --git a/src/site/content/en/lighthouse-best-practices/notification-on-start/notification-on-start.png b/src/site/content/en/lighthouse-best-practices/notification-on-start/notification-on-start.png
deleted file mode 100644
index ab394279830..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/notification-on-start/notification-on-start.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/index.md b/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/index.md
deleted file mode 100644
index 26300cbfb84..00000000000
--- a/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Prevents users from pasting into password fields
-description: |
-  Learn how to improve the user experience of your site's login screen by
-  allowing users to paste text into password fields.
-web_lighthouse:
-  - password-inputs-can-be-pasted-into
-date: 2019-05-02
-updated: 2020-06-04
----
-
-Some websites claim that allowing users to paste passwords reduces security.
-However, password pasting actually _improves_ security
-because it enables the use of password managers.
-
-Password managers typically generate strong passwords for users,
-store them securely, and then automatically paste them
-into password fields whenever users need to log in. This approach is generally
-more secure than forcing users to type in passwords that are short enough
-to remember.
-
-## How this Lighthouse audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags code that prevents users from pasting into password fields:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="password-inputs-can-be-pasted-into.png" alt="Lighthouse audit shows page stops users from pasting into password fields">
-</figure>
-
-Lighthouse gathers all `<input type="password">` elements,
-pastes some text into each element,
-and then verifies that the element's content has been set to the pasted text.
-
-If a page doesn't use `<input type="password">` for its password input fields,
-Lighthouse doesn't detect those elements.
-It's also possible to prevent pasting outside of a `paste` event listener.
-Lighthouse doesn't detect that scenario, either.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to enable pasting into password fields
-
-### Find the code that's preventing pasting
-
-To quickly find and inspect the code that's preventing pasting:
-{% Instruction 'devtools-sources', 'ol' %}
-1. Expand the [**Event Listener Breakpoints**](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners) pane.
-1. Expand the **Clipboard** list.
-1. Select the **`paste`** checkbox.
-1. Paste some text into a password field on your page.
-1. DevTools should pause on the first line of code
-   in the relevant `paste` event listener.
-
-### Remove the code that's preventing pasting
-
-The source of the problem is often a call to `preventDefault()`
-within the `paste` event listener
-that's associated with the password input element:
-
-```js
-let input = document.querySelector('input');
-
-input.addEventListener('paste', (e) => {
-  e.preventDefault(); // This is what prevents pasting.
-});
-```
-
-If you're only listening to paste events to preempt them,
-remove the entire event listener.
-
-## Resources
-
-[Source code for **Prevents users from pasting into password fields** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js)
diff --git a/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/password-inputs-can-be-pasted-into.png b/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/password-inputs-can-be-pasted-into.png
deleted file mode 100644
index 5cf36c165d5..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/password-inputs-can-be-pasted-into/password-inputs-can-be-pasted-into.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/uses-http2/index.md b/src/site/content/en/lighthouse-best-practices/uses-http2/index.md
deleted file mode 100644
index a21efc612cf..00000000000
--- a/src/site/content/en/lighthouse-best-practices/uses-http2/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: Does not use HTTP/2 for all of its resources
-description: |
-  Learn why HTTP/2 is important for your page's load time and how to enable
-  HTTP/2 on your server.
-web_lighthouse:
-  - uses-http2
-date: 2019-05-02
-updated: 2019-08-28
----
-
-HTTP/2 serves your page's resources faster
-and with less data moving over the wire.
-
-## How the Lighthouse HTTP/2 audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) lists all resources not served over HTTP/2:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-http2.png" alt="Lighthouse audit shows resources not served over HTTP/2 ">
-</figure>
-
-Lighthouse gathers all resources from the same host as the page
-and checks the HTTP protocol version of each resource.
-
-Lighthouse doesn't check resources from other hosts
-because it assumes that you have no control
-over how third-party resources are served.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to pass this audit
-
-Serve your resources over HTTP/2.
-
-To learn how to enable HTTP/2 on your servers,
-see [Setting up HTTP/2](https://dassur.ma/things/h2setup/).
-
-## Resources
-
-- [Source code for **Does not use HTTP/2 for all of its resources** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/uses-http2.js)
-- [Introduction to HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/)
-- [HTTP/2 Frequently Asked Questions](https://http2.github.io/faq/)
diff --git a/src/site/content/en/lighthouse-best-practices/uses-http2/uses-http2.png b/src/site/content/en/lighthouse-best-practices/uses-http2/uses-http2.png
deleted file mode 100644
index e750a8383ca..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/uses-http2/uses-http2.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/index.md b/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/index.md
deleted file mode 100644
index 52e2d5e91d6..00000000000
--- a/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/index.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: post
-title: Does not use passive listeners to improve scrolling performance
-description: |
-  Learn how to improve your page's scrolling responsiveness by avoiding
-  passive event listeners.
-web_lighthouse:
-  - uses-passive-event-listeners
-date: 2019-05-02
-updated: 2019-08-28
----
-
-Touch and wheel event listeners are useful
-for tracking user interactions and creating custom scrolling experiences,
-but they can also delay page scrolling.
-Currently, browsers can't know if an event listener will prevent scrolling,
-so they always wait for the listener to finish executing before scrolling the page.
-Passive event listeners solve this problem by letting you indicate
-that an event listener will never prevent scrolling.
-
-## Browser compatibility
-
-Most browsers support passive event listeners. See
-[Browser compatibility](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#Browser_compatibility)
-
-## How the Lighthouse passive event listener audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags event listeners that may delay page scrolling:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-passive-event-listeners.png" alt="Lighthouse audit shows page doesn't use passive event listeners to improve scrolling performance">
-</figure>
-
-Lighthouse uses the following process
-to identify event listeners that may affect scrolling performance:
-
-1. Collect all event listeners on the page.
-2. Filter out non-touch and non-wheel listeners.
-3. Filter out listeners that call `preventDefault()`.
-4. Filter out listeners that are from a different host than the page.
-
-Lighthouse filters out listeners from different hosts
-because you probably don't have control over these scripts.
-There may be third-party scripts that are harming your page's scrolling performance,
-but these aren't listed in your Lighthouse report.
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to make event listeners passive to improve scrolling performance
-
-Add a `passive` flag to every event listener that Lighthouse identified.
-
-If you're only supporting browsers that have passive event listener support,
-just add the flag. For example:
-
-```js
-document.addEventListener('touchstart', onTouchStart, {passive: true});
-```
-
-If you're supporting [older browsers that don't support passive event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility),
-you'll need to use feature detection or a polyfill. See the
-[Feature Detection](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection)
-section of the WICG [Passive event listeners](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md)
-explainer document for more information.
-
-## Resources
-
-- [Source code for **Does not use passive listeners to improve scrolling performance** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js)
-- [Improving Scrolling Performance with Passive Event Listeners](https://developers.google.com/web/updates/2016/06/passive-event-listeners)
-- [Passive event listeners explainer](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md)
-- [EventTarget.addEventListener()](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
diff --git a/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/uses-passive-event-listeners.png b/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/uses-passive-event-listeners.png
deleted file mode 100644
index eabce02d84a..00000000000
Binary files a/src/site/content/en/lighthouse-best-practices/uses-passive-event-listeners/uses-passive-event-listeners.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/bootup-time/bootup-time.png b/src/site/content/en/lighthouse-performance/bootup-time/bootup-time.png
deleted file mode 100644
index 5d2b57f729e..00000000000
Binary files a/src/site/content/en/lighthouse-performance/bootup-time/bootup-time.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/bootup-time/index.md b/src/site/content/en/lighthouse-performance/bootup-time/index.md
deleted file mode 100644
index 50acdf09036..00000000000
--- a/src/site/content/en/lighthouse-performance/bootup-time/index.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-layout: post
-title: Reduce JavaScript execution time
-description: |
-  Learn how JavaScript execution can slow down your page performance
-  and how you can speed it up.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - bootup-time
----
-
-When your JavaScript takes a long time to execute,
-it slows down your page performance in several ways:
-
-- **Network cost**
-
-  More bytes equals longer download times.
-
-- **Parse and compile cost**
-
-  JavaScript gets parsed and compiled on the main thread.
-  When the main thread is busy, the page can't respond to user input.
-
-- **Execution cost**
-
-  JavaScript is also executed on the main thread.
-  If your page runs a lot of code before it's really needed,
-  that also delays your [Time To Interactive](/interactive),
-  which is one of the key metrics related to how users perceive your page speed.
-
-- **Memory cost**
-
-  If your JavaScript holds on to a lot of references,
-  it can potentially consume a lot of memory.
-  Pages appear janky or slow when they consume a lot of memory.
-  Memory leaks can cause your page to freeze up completely.
-
-## How the Lighthouse JavaScript execution time audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-shows a warning when JavaScript execution takes longer than 2&nbsp;seconds.
-The audit fails when execution takes longer than 3.5&nbsp;seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="bootup-time.png" alt="A screenshot of the Lighthouse Reduce JavaScript execution time audit">
-</figure>
-
-To help you identify the biggest contributors to execution time,
-Lighthouse reports the time spent executing, evaluating, and parsing
-each JavaScript file that your page loads.
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to speed up JavaScript execution
-
-{% include 'content/lighthouse-performance/js-perf.njk' %}
-
-## Resources
-
-[Source code for **Reduce JavaScript execution time** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/bootup-time.js)
diff --git a/src/site/content/en/lighthouse-performance/critical-request-chains/critical-request-chains.png b/src/site/content/en/lighthouse-performance/critical-request-chains/critical-request-chains.png
deleted file mode 100644
index cfe26c21869..00000000000
Binary files a/src/site/content/en/lighthouse-performance/critical-request-chains/critical-request-chains.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/critical-request-chains/index.md b/src/site/content/en/lighthouse-performance/critical-request-chains/index.md
deleted file mode 100644
index b9dce0e979c..00000000000
--- a/src/site/content/en/lighthouse-performance/critical-request-chains/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Avoid chaining critical requests
-description: |
-  Learn what critical request chains are, how they affect web page performance,
-  and how you can reduce the effect.
-date: 2019-05-02
-updated: 2020-04-29
-web_lighthouse:
-  - critical-request-chains
----
-
-[Critical request chains](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)
-are series of dependent network requests important for page rendering.
-The greater the length of the chains and the larger the download sizes,
-the more significant the impact on page load performance.
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-reports critical requests loaded with a high priority:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="critical-request-chains.png" alt="A screenshot of the Lighthouse Minimize critical request depth audit">
-</figure>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-
-## How Lighthouse identifies critical request chains
-
-Lighthouse uses network priority as a proxy for identifying render-blocking critical resources.
-See Google's [Chrome Resource Priorities and Scheduling](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit)
-for more information about how Chrome defines these priorities.
-
-Data on critical request chains, resource sizes,
-and time spent downloading resources is extracted from the
-[Chrome Remote Debugging Protocol](https://github.com/ChromeDevTools/devtools-protocol).
-
-## How to reduce the effect of critical request chains on performance
-
-Use the critical request chains audit results to target the resources that have the biggest effect on page load first:
-
-- Minimize the number of critical resources: eliminate them, defer their download, mark them as `async`, and so on.
-- Optimize the number of critical bytes to reduce the download time (number of round trips).
-- Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.
-
-Learn more about optimizing your
-[images](/use-imagemin-to-compress-images),
-[JavaScript](/apply-instant-loading-with-prpl),
-[CSS](/defer-non-critical-css), and
-[web fonts](/avoid-invisible-text).
-
-## Resources
-
-[Source code for **Minimize critical request depth** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/critical-request-chains.js)
diff --git a/src/site/content/en/lighthouse-performance/dom-size/dom-size.png b/src/site/content/en/lighthouse-performance/dom-size/dom-size.png
deleted file mode 100644
index b4e8eeaff29..00000000000
Binary files a/src/site/content/en/lighthouse-performance/dom-size/dom-size.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/dom-size/index.md b/src/site/content/en/lighthouse-performance/dom-size/index.md
deleted file mode 100644
index a45ac132116..00000000000
--- a/src/site/content/en/lighthouse-performance/dom-size/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Avoid an excessive DOM size
-description: |
-  Learn how a large DOM can reduce your web page's performance and how you
-  can reduce the size of your DOM at load time.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - dom-size
----
-
-A large DOM tree can slow down your page performance in multiple ways:
-
-- **Network efficiency and load performance**
-
-  A large DOM tree often includes many nodes that aren't visible when the user
-  first loads the page, which unnecessarily increases data costs for your users
-  and slows down load time.
-
-- **Runtime performance**
-
-  As users and scripts interact with your page,
-  the browser must constantly
-  [recompute the position and styling of nodes](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations?utm_source=lighthouse&utm_medium=cli).
-  A large DOM tree in combination with complicated style rules can severely slow down rendering.
-
-- **Memory performance**
-
-  If your JavaScript uses general query selectors such as `document.querySelectorAll('li')`,
-  you may be unknowingly storing references to a very large number of nodes,
-  which can overwhelm the memory capabilities of your users' devices.
-
-## How the Lighthouse DOM size audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-reports the total DOM elements for a page, the page's maximum DOM depth,
-and its maximum child elements:
-<figure class="w-figure">
-  <img class="w-screenshot" src="dom-size.png" alt="A screenshot of the Lighthouse Avoids an excessive DOM size audit">
-</figure>
-
-Lighthouse flags pages with DOM trees that:
-
-- Have more than 1,500&nbsp;nodes total.
-- Have a depth greater than 32&nbsp;nodes.
-- Have a parent node with more than 60&nbsp;child nodes.
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to optimize the DOM size
-
-In general, look for ways to create DOM nodes only when needed,
-and destroy nodes when they're no longer needed.
-
-If you're currently shipping a large DOM tree,
-try loading your page and manually noting which nodes are displayed.
-Perhaps you can remove the undisplayed nodes from the initially loaded document
-and only create them after a relevant user interaction,
-such as a scroll or a button click.
-
-If you create DOM nodes at runtime,
-[Subtree Modification DOM Change Breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#dom)
-can help you pinpoint when nodes get created.
-
-If you can't avoid a large DOM tree,
-another approach for improving rendering performance is simplifying your CSS selectors.
-See Google's [Reduce the Scope and Complexity of Style Calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)
-for more information.
-
-## Resources
-
-- [Source code for **Avoid an excessive DOM size** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/dobetterweb/dom-size.js)
-- [Reduce the Scope and Complexity of Style Calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)
diff --git a/src/site/content/en/lighthouse-performance/efficient-animated-content/efficient-animated-content.png b/src/site/content/en/lighthouse-performance/efficient-animated-content/efficient-animated-content.png
deleted file mode 100644
index 15a74c6e783..00000000000
Binary files a/src/site/content/en/lighthouse-performance/efficient-animated-content/efficient-animated-content.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/efficient-animated-content/index.md b/src/site/content/en/lighthouse-performance/efficient-animated-content/index.md
deleted file mode 100644
index bd019893ffc..00000000000
--- a/src/site/content/en/lighthouse-performance/efficient-animated-content/index.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: post
-title: Use video formats for animated content
-description: |
-  Learn about the efficient-animated-content audit.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - efficient-animated-content
----
-
-The Opportunities section of your Lighthouse report lists
-all animated GIFs, along with estimated savings in seconds
-achieved by converting these GIFs to video:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="efficient-animated-content.png" alt="A screenshot of the Lighthouse Use video formats for animated content audit">
-</figure>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## Why you should replace animated GIFs with video
-
-Large GIFs are inefficient for delivering animated content.
-By converting large GIFs to videos, you can save big on users' bandwidth.
-Consider using MPEG4/WebM videos for animations and PNG/WebP
-for static images instead of GIF to save network bytes.
-
-## Create MPEG videos
-There are a number of ways to convert GIFs to video.
-[FFmpeg](https://ffmpeg.org/) is the tool used in this guide.
-To use FFmpeg to convert the GIF, `my-animation.gif` to an MP4 video,
-run the following command in your console:
-
-`ffmpeg -i my-animation.gif my-animation.mp4`  
-
-This tells FFmpeg to take `my-animation.gif` as the input,
-signified by the `-i` flag,
-and to convert it to a video called `my-animation.mp4`.
-
-## Create WebM videos
-
-WebM videos are much smaller than MP4 videos,
-but not all browsers support WebM so it makes sense to generate both.
-
-To use FFmpeg to convert `my-animation.gif` to a WebM video,
-run the following command in your console:
-
-`ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm`
-
-## Replace the GIF image with a video
-Animated GIFs have three key traits that a video needs to replicate:
-
-- They play automatically.
-- They loop continuously (usually, but it is possible to prevent looping).
-- They're silent.
-
-Luckily, you can recreate these behaviors using the `<video>` element.
-
-```html
-<video autoplay loop muted playsinline>  
-  <source src="my-animation.webm" type="video/webm">  
-  <source src="my-animation.mp4" type="video/mp4">  
-</video>  
-```
-
-## Resources
-
-- [Source code for **Use video formats for animated content** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js)
-- [Replace animated GIFs with video for faster page loads](/replace-gifs-with-videos)
-- [Replace GIFs with video codelab](/codelab-replace-gifs-with-video)
diff --git a/src/site/content/en/lighthouse-performance/estimated-input-latency/estimated-input-latency.png b/src/site/content/en/lighthouse-performance/estimated-input-latency/estimated-input-latency.png
deleted file mode 100644
index fd62fe34e81..00000000000
Binary files a/src/site/content/en/lighthouse-performance/estimated-input-latency/estimated-input-latency.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/estimated-input-latency/index.md b/src/site/content/en/lighthouse-performance/estimated-input-latency/index.md
deleted file mode 100644
index d91f30c946f..00000000000
--- a/src/site/content/en/lighthouse-performance/estimated-input-latency/index.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Estimated Input Latency
-description: |
-  Learn about Lighthouse's Estimated Input Latency metric and
-  how to measure and optimize it.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - estimated-input-latency
----
-
-Estimated Input Latency is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-The Lighthouse reports displays Estimated Input Latency in milliseconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="estimated-input-latency.png" alt="A screenshot of the Lighthouse Estimated Input Latency audit">
-</figure>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## What Estimated Input Latency measures
-
-Estimated Input Latency is an estimate of how long your app takes to respond to user input
-during the busiest 5&nbsp;second window of page load.
-The timing of this audit is from
-[First Meaningful Paint](/first-meaningful-paint)
-to the end of the trace, which is roughly 5&nbsp;seconds after
-[Time to Interactive](/interactive).
-If your latency is higher than 50&nbsp;ms, users may perceive your app as laggy.
-
-The [RAIL performance model](https://developers.google.com/web/fundamentals/performance/rail)
-recommends that apps respond to user input within 100&nbsp;ms,
-while Lighthouse's Estimated Input Latency target score is 50&nbsp;ms. Why?
-Lighthouse uses a proxy metric—availability of the main thread—to measure
-how well your app responds to user input.
-
-Lighthouse assumes that your app needs 50&nbsp;ms to completely respond to the user's input
-(from performing any JavaScript executions to physically painting the new pixels to the screen).
-If your main thread is unavailable for 50&nbsp;ms or more,
-that doesn't leave enough time for your app to complete the response.
-
-Approximately 90% of users will encounter Lighthouse's reported amount of input latency or less.
-10% of users can expect higher latency.
-
-## How to improve your Estimated Input Latency score
-
-To make your app respond to user input faster,
-optimize how your code runs in the browser.
-Check out the series of techniques outlined on Google's
-[Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/) page.
-These tips range from offloading computation to web workers to free up the main thread,
-to refactoring your CSS selectors to perform fewer calculations,
-to using CSS properties that minimize the amount of browser-intensive operations.
-
-{% Aside 'caution' %}
-The Estimated Input Latency audit isn't a complete measurement of input latency.
-It doesn't measure how long your app truly takes to respond to a user input;
-nor does it does measure that your app's response to the user's input is visually complete.
-{% endAside %}
-
-## How to measure Estimated Input Latency manually
-
-To measure Estimated Input Latency manually,
-make a recording with the Chrome DevTools Timeline.
-See [Do less main thread work](https://developers.google.com/web/tools/chrome-devtools/speed/get-started#main)
-for an example of the workflow.
-The basic idea is to start a recording, perform the user input that you want to measure,
-stop the recording, and then analyze the flame chart to ensure that
-[all stages of the pixel pipeline](https://developers.google.com/web/fundamentals/performance/rendering/#the_pixel_pipeline)
-are complete within 50&nbsp;ms.
-
-## Resources
-
-- [Source code for **Estimated Input Latency** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/estimated-input-latency.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [Measure Performance with the RAIL Model](https://developers.google.com/web/fundamentals/performance/rail)
-- [Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/)
-- [Optimize Website Speed With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/speed/get-started)
diff --git a/src/site/content/en/lighthouse-performance/first-contentful-paint/first-contentful-paint.png b/src/site/content/en/lighthouse-performance/first-contentful-paint/first-contentful-paint.png
deleted file mode 100644
index 45e821c1b80..00000000000
Binary files a/src/site/content/en/lighthouse-performance/first-contentful-paint/first-contentful-paint.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/first-contentful-paint/index.md b/src/site/content/en/lighthouse-performance/first-contentful-paint/index.md
deleted file mode 100644
index 01165aac085..00000000000
--- a/src/site/content/en/lighthouse-performance/first-contentful-paint/index.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-layout: post
-title: First Contentful Paint
-description: |
-  Learn about Lighthouse's First Contentful Paint metric and
-  how to measure and optimize it.
-date: 2019-05-02
-updated: 2019-10-10
-web_lighthouse:
-  - first-contentful-paint
----
-
-First Contentful Paint (FCP) is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays FCP in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="first-contentful-paint.png" alt="A screenshot of the Lighthouse First Contentful Paint audit">
-</figure>
-
-## What FCP measures
-
-FCP measures how long it takes the browser
-to render the first piece of DOM content
-after a user navigates to your page.
-Images, non-white `<canvas>` elements, and SVGs on your page are considered
-DOM content; anything inside an iframe _isn't_ included.
-
-## How Lighthouse determines your FCP score
-
-Your FCP score is a comparison of your page's FCP time
-and FCP times for real websites, based on
-[data from the HTTP Archive](https://httparchive.org/reports/loading-speed#fcp).
-For example, sites performing in the ninety-ninth percentile
-render FCP in about 1.5&nbsp;seconds.
-If your website's FCP is 1.5 seconds,
-your FCP score is 99.
-
-This table shows how to interpret your FCP score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>FCP time<br>(in seconds)</th>
-        <th>Color-coding</th>
-        <th>FCP score<br>(HTTP Archive percentile)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–2</td>
-        <td>Green (fast)</td>
-        <td>75–100</td>
-      </tr>
-      <tr>
-        <td>2–4</td>
-        <td>Orange (moderate)</td>
-        <td>50–74</td>
-      </tr>
-      <tr>
-        <td>Over 4</td>
-        <td>Red (slow)</td>
-        <td>0–49</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your FCP score
-
-One issue that's particularly important for FCP is
-font load time. Check out the
-[Ensure text remains visible during webfont load](/font-display) post
-for ways to speed up your font loads.
-
-## Tracking FCP on real users' devices
-
-To learn how to measure when FCP actually occurs on your users' devices,
-see Google's [User-centric Performance Metrics][metrics] page.
-The [Tracking FP/FCP][tracking] section describes
-how to programmatically access FCP data and submit it to Google Analytics.
-
-See Google's [Assessing Loading Performance in Real Life with Navigation and Resource Timing](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/)
-for more on collecting real-user metrics.
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **First Contentful Paint** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/first-contentful-paint.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [Paint Timing specification](https://w3c.github.io/paint-timing)
-
-[metrics]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
-[tracking]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_fpfcp
diff --git a/src/site/content/en/lighthouse-performance/first-cpu-idle/first-cpu-idle.png b/src/site/content/en/lighthouse-performance/first-cpu-idle/first-cpu-idle.png
deleted file mode 100644
index 4dae0ae6f5e..00000000000
Binary files a/src/site/content/en/lighthouse-performance/first-cpu-idle/first-cpu-idle.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/first-cpu-idle/index.md b/src/site/content/en/lighthouse-performance/first-cpu-idle/index.md
deleted file mode 100644
index 550925d6c17..00000000000
--- a/src/site/content/en/lighthouse-performance/first-cpu-idle/index.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-layout: post
-title: First CPU Idle
-description: |
-  Learn about Lighthouse's First CPU Idle metric and how to optimize it.
-date: 2019-05-02
-updated: 2019-11-05
-web_lighthouse:
-  - first-cpu-idle
----
-
-{% Aside 'caution' %}
-  First CPU Idle is deprecated in Lighthouse 6.0. While some have found that First CPU Idle
-  offers a more meaningful measurement than [Time To Interactive](/interactive), the difference
-  isn't significant enough to justify maintaining two similar metrics. Moving forward, 
-  consider using [Total Blocking Time](/lighthouse-total-blocking-time/) and
-  [Time To Interactive](/interactive) instead.
-{% endAside %}
-
-First CPU Idle is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays First CPU Idle in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="first-cpu-idle.png" alt="A screenshot of the Lighthouse First CPU Idle audit">
-</figure>
-
-## What First CPU Idle measures
-
-First CPU Idle measures how long it takes a page to become _minimally_ interactive.
-A page is considered minimally interactive when:
-
-- Most—but not necessarily all—UI elements on the screen are interactive, and
-- The page responds, on average, to most user input
-  in a reasonable amount of time.
-
-{% Aside %}
-Both First CPU Idle and
-[Time to Interactive](/interactive)
-measure when the page is ready for user input.
-First CPU Idle occurs when the user can _start_ to interact with the page;
-TTI occurs when the user is _fully_ able to interact with the page.
-See Google's [First Interactive And Consistently Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit)
-if you're interested in the exact calculation for each metric.
-{% endAside %}
-
-## How Lighthouse determines your First CPU Idle score
-
-Your First CPU Idle score is a comparison of your page's First CPU Idle time
-and First CPU Idle times for real websites, based on
-[data from the HTTP Archive](https://httparchive.org/reports/loading-speed#ttfi).
-For example, sites performing in the ninety-fifth percentile
-render First CPU Idle in about 3&nbsp;seconds.
-If your website's First CPU Idle is 3&nbsp;seconds,
-your First CPU Idle score is 95.
-
-This table shows how to interpret your First CPU Idle score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>First CPU Idle metric<br>(in seconds)</th>
-        <th>Color-coding</th>
-        <th>First CPU Idle score<br>(HTTP Archive percentile)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–4.7</td>
-        <td>Green (fast)</td>
-        <td>75–100</td>
-      </tr>
-      <tr>
-        <td>4.8–6.5</td>
-        <td>Orange (moderate)</td>
-        <td>50–74</td>
-      </tr>
-      <tr>
-        <td>Over 6.5</td>
-        <td>Red (slow)</td>
-        <td>0–49</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your First CPU Idle score
-
-See [How to improve your TTI score][tti]. The strategies for improving First CPU Idle are
-largely the same as the strategies for improving TTI.
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **First CPU Idle** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/first-cpu-idle.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [First Interactive And Consistently Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit)
-- [Time to Interactive](/interactive/)
-
-[tti]: /interactive/#how-to-improve-your-tti-score
diff --git a/src/site/content/en/lighthouse-performance/first-meaningful-paint/first-meaningful-paint.png b/src/site/content/en/lighthouse-performance/first-meaningful-paint/first-meaningful-paint.png
deleted file mode 100644
index 133f8477ce9..00000000000
Binary files a/src/site/content/en/lighthouse-performance/first-meaningful-paint/first-meaningful-paint.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/first-meaningful-paint/index.md b/src/site/content/en/lighthouse-performance/first-meaningful-paint/index.md
deleted file mode 100644
index 5c0f0236d06..00000000000
--- a/src/site/content/en/lighthouse-performance/first-meaningful-paint/index.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-layout: post
-title: First Meaningful Paint
-description: |
-  Learn about Lighthouse's First Meaningful Paint metric and
-  how to measure and optimize it.
-date: 2019-05-02
-updated: 2019-11-05
-web_lighthouse:
-  - first-meaningful-paint
----
-
-{% Aside 'caution' %}
-  First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. In practice FMP
-  has been overly sensitive to small differences in the page load, leading to inconsistent
-  (bimodal) results. Additionally, the metric's definition relies on browser-specific
-  implementation details, which means it cannot be standardized nor implemented in all web
-  browsers. Moving forward, consider using [Largest Contentful Paint](/largest-contentful-paint/)
-  instead.
-{% endAside %}
-
-First Meaningful Paint (FMP) is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays displays FMP in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="first-meaningful-paint.png" alt="A screenshot of the Lighthouse First Meaningful Paint audit">
-</figure>
-
-## What FMP measures
-
-FMP measures when the primary content of a page is visible to the user.
-The raw score for FMP is the time in seconds between the user initiating the page load
-and the page rendering the primary above-the-fold content.
-FMP essentially shows the timing of the paint
-after which the biggest above-the-fold layout change happens.
-Learn more about the technical details of FMP in Google's
-[Time to First Meaningful Paint: a layout-based approach](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view).
-
-[First Contentful Paint (FCP)](/first-contentful-paint)
-and FMP are often the same
-when the first bit of content rendered on the page includes the content above the fold.
-However, these metrics can differ when, for example,
-there's content above the fold within an iframe.
-FMP registers when the content within the iframe is visible to the user,
-while FCP _doesn't_ include iframe content.
-
-## How Lighthouse determines your FMP score
-
-Just like FCP, FMP is based on
-[real website performance data from the HTTP Archive](https://httparchive.org/reports/loading-speed#fcp).
-
-When FMP and FCP are the same,
-their scores are identical.
-If FMP occurs after FCP—for example, when a page contains iframe content—the
-FMP score will be lower than the FCP score.
-
-For example, let's say your FCP is 1.5&nbsp;seconds,
-and your FMP is 3&nbsp;seconds.
-The FCP score would be 99, but the FMP score would be 75.
-
-This table shows how to interpret your FMP score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>FMP metric<br>(in seconds)</th>
-        <th>Color-coding</th>
-        <th>FMP score<br>(FCP HTTP Archive percentile)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–2</td>
-        <td>Green (fast)</td>
-        <td>75–100</td>
-      </tr>
-      <tr>
-        <td>2–4</td>
-        <td>Orange (moderate)</td>
-        <td>50–74</td>
-      </tr>
-      <tr>
-        <td>Over 4</td>
-        <td>Red (slow)</td>
-        <td>0–49</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your FMP score
-
-See [How to improve Largest Contentful Paint on your site][lcp]. The strategies for improving
-FMP are largely the same as the strategies for improving Largest Contentful Paint.
-
-## Tracking FMP on real users' devices
-
-To learn how to measure when FMP actually occurs on your users' devices,
-see Google's [User-centric Performance Metrics][metrics] page.
-The [Tracking FMP using hero elements][tracking] section describes
-how to programmatically access FCP data and submit it to Google Analytics.
-
-See Google's [Assessing Loading Performance in Real Life with Navigation and Resource Timing](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/)
-for more on collecting real-user metrics.
-The [User Timing marks and measures Lighthouse audit](/user-timings)
-enables you to see User Timing data in your report.
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **First Meaningful Paint** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/first-meaningful-paint.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [Time to First Meaningful Paint: a layout-based approach](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view)
-- [Largest Contentful Paint](/largest-contentful-paint)
-
-[metrics]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
-[tracking]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_fmp_using_hero_elements
-[lcp]: /largest-contentful-paint#how-to-improve-largest-contentful-paint-on-your-site
diff --git a/src/site/content/en/lighthouse-performance/font-display/font-display.png b/src/site/content/en/lighthouse-performance/font-display/font-display.png
deleted file mode 100644
index b1d40dc1c5b..00000000000
Binary files a/src/site/content/en/lighthouse-performance/font-display/font-display.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/font-display/index.md b/src/site/content/en/lighthouse-performance/font-display/index.md
deleted file mode 100644
index f1dc62fd9ad..00000000000
--- a/src/site/content/en/lighthouse-performance/font-display/index.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Ensure text remains visible during webfont load
-description: |
-  Learn how to use the font-display API to make sure your web page text
-  will always be visible to your users.
-date: 2019-05-02
-updated: 2020-04-29
-web_lighthouse:
-  - font-display
----
-
-Fonts are often large files that take awhile to load.
-Some browsers hide text until the font loads,
-causing a [flash of invisible text (FOIT)](/avoid-invisible-text).
-
-## How the Lighthouse font-display audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags any font URLs that may flash invisible text:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="font-display.png" alt="A screenshot of the Lighthouse Ensure text remains visible during webfont loads audit">
-</figure>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to avoid showing invisible text
-
-The easiest way to avoid showing invisible text while custom fonts load
-is to temporarily show a system font.
-By including `font-display: swap` in your `@font-face` style,
-you can avoid FOIT in most modern browsers:
-
-```css
-@font-face {
-  font-family: 'Pacifico';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
-  font-display: swap;
-}
-```
-
-The [font-display API](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
-specifies how a font is displayed.
-`swap` tells the browser that text using the font should be displayed immediately using a system font.
-Once the custom font is ready, it replaces the system font.
-(See the [Avoid invisible text during loading](/avoid-invisible-text) post
-for more information.)
-
-### Preload web fonts
-
-Use `<link rel="preload">` to fetch your font files earlier. Learn more:
-
-* [Preload web fonts to improve loading speed (codelab)](/codelab-preload-web-fonts/)
-* [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts](/preload-optional-fonts/)
-
-### Google Fonts
-
-Add the `&display=swap` [parameter](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#Basics_anatomy_of_a_URL) to the end of your Google Fonts URL:
-```html
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
-```
-
-## Browser support
-
-It's worth mentioning that not all major browsers support `font-display: swap`,
-so you may need to do a bit more work to fix the invisible text problem.
-
-{% Aside 'codelab' %}
-  Check out the [Avoid flash of invisible text codelab](/codelab-avoid-invisible-text)
-  to learn how to avoid FOIT across all browsers.
-{% endAside %}
-
-## Resources
-
-* [Source code for **Ensure text remains visible during webfont load** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/font-display.js)
-* [Avoid invisible text during loading](/avoid-invisible-text)
-* [Controlling font performance with font displays](https://developers.google.com/web/updates/2016/02/font-display)
-* [Preload web fonts to improve loading speed (codelab)](/codelab-preload-web-fonts/)
-* [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts](/preload-optional-fonts/)
diff --git a/src/site/content/en/lighthouse-performance/index.njk b/src/site/content/en/lighthouse-performance/index.njk
deleted file mode 100644
index a299e3970de..00000000000
--- a/src/site/content/en/lighthouse-performance/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: lighthouse-performance
----
\ No newline at end of file
diff --git a/src/site/content/en/lighthouse-performance/interactive/index.md b/src/site/content/en/lighthouse-performance/interactive/index.md
deleted file mode 100644
index 02fae3ac456..00000000000
--- a/src/site/content/en/lighthouse-performance/interactive/index.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-layout: post
-title: Time to Interactive
-description: |
-  Learn about Lighthouse's Time to Interactive metric and
-  how to measure and optimize it.
-date: 2019-05-02
-updated: 2019-10-10
-web_lighthouse:
-  - interactive
----
-
-Time to Interactive (TTI) is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Measuring TTI is important because
-some sites optimize content visibility at the expense of interactivity.
-This can create a frustrating user experience:
-the site appears to be ready, but when the user tries to interact with it,
-nothing happens.
-
-Lighthouse displays TTI in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="interactive.png" alt="A screenshot of the Lighthouse Time to Interactive audit">
-</figure>
-
-## What TTI measures
-
-TTI measures how long it takes a page to become _fully_ interactive.
-A page is considered fully interactive when:
-
-- The page displays useful content, which is measured by the
-[First Contentful Paint](/first-contentful-paint),
-- Event handlers are registered for most visible page elements, and
-- The page responds to user interactions within 50&nbsp;milliseconds.
-
-{% Aside %}
-Both [First CPU Idle](/first-cpu-idle) and TTI
-measure when the page is ready for user input.
-First CPU Idle occurs when the user can _start_ to interact with the page;
-TTI occurs when the user is _fully_ able to interact with the page.
-See Google's [First Interactive And Consistently Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit)
-if you're interested in the exact calculation for each metric.
-{% endAside %}
-
-## How Lighthouse determines your TTI score
-
-The TTI score is a comparison of your page's TTI
-and the TTI for real websites, based on
-[data from the HTTP Archive](https://httparchive.org/reports/loading-speed#ttci).
-For example, sites performing in the ninety-ninth percentile
-render TTI in about 2.2&nbsp;seconds.
-If your website's TTI is 2.2&nbsp;seconds, your TTI score is 99.
-
-This table shows how to interpret your TTI score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>TTI metric<br>(in seconds)</th>
-        <th>Color-coding</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–3.8</td>
-        <td>Green (fast)</td>
-      </tr>
-      <tr>
-        <td>3.9–7.3</td>
-        <td>Orange (moderate)</td>
-      </tr>
-      <tr>
-        <td>Over 7.3</td>
-        <td>Red (slow)</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your TTI score
-
-One improvement that can have a particularly big effect on TTI is
-deferring or removing unnecessary JavaScript work.
-Look for opportunities to [optimize your JavaScript](/fast#optimize-your-javascript).
-In particular, consider [reducing JavaScript payloads with code splitting](/reduce-javascript-payloads-with-code-splitting)
-and [applying the PRPL pattern](/apply-instant-loading-with-prpl). [Optimizing third-party JavaScript][3p]
-also yields significant improvements for some sites.
-
-These two Diagnostic audits provide additional opportunities
-to reduce JavaScript work:
-
-- [Minimize main thread work](/mainthread-work-breakdown)
-- [Reduce JavaScript execution time](/bootup-time)
-
-## Tracking TTI on real users' devices
-
-To learn how to measure when TTI actually occurs on your users' devices,
-see Google's [User-centric Performance Metrics][metrics] page.
-The [Tracking TTI][tracking] section describes
-how to programmatically access TTI data and submit it to Google Analytics.
-
-{% Aside %}
-TTI can be difficult to track in the wild.
-Tracking [First Input Delay](https://developers.google.com/web/updates/2018/05/first-input-delay)
-can be a good proxy for TTI.
-{% endAside %}
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **Time to Interactive** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/interactive.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [First Interactive And Consistently Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit)
-- [JavaScript Start-up Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/)
-- [Reduce JavaScript Payloads with Tree Shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/)
-- [Optimize third-party resources][3p]
-
-[metrics]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
-[tracking]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_tti
-[3p]: /fast/#optimize-your-third-party-resources
diff --git a/src/site/content/en/lighthouse-performance/interactive/interactive.png b/src/site/content/en/lighthouse-performance/interactive/interactive.png
deleted file mode 100644
index 7828e362067..00000000000
Binary files a/src/site/content/en/lighthouse-performance/interactive/interactive.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/index.md b/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/index.md
deleted file mode 100644
index f8eabfeebdf..00000000000
--- a/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: post
-title: Largest Contentful Paint
-description: |
-  Learn about Lighthouse's Largest Contentful Paint metric and
-  how to measure and optimize it.
-date: 2020-01-10
-web_lighthouse:
-  - largest-contentful-paint
----
-
-Largest Contentful Paint (LCP) is one of the metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays LCP in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="largest-contentful-paint.png"
-       alt="A screenshot of the Lighthouse Largest Contentful Paint audit">
-</figure>
-
-## What LCP measures
-
-LCP measures when the largest content element in the viewport is
-rendered to the screen. This approximates when the main content of the page is
-visible to users. See [Largest Contentful Paint defined][definition] for more
-details on how LCP is determined.
-
-## How Lighthouse determines your LCP score
-
-Native support for LCP launched in [Chrome 77][launch]. Lighthouse extracts LCP data from
-[Chrome's tracing tool](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool).
-
-The table below shows how to interpret your LCP score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>LCP time<br>(in seconds)</th>
-        <th>Color-coding</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0-2</td>
-        <td>Green (fast)</td>
-      </tr>
-      <tr>
-        <td>2-4</td>
-        <td>Orange (moderate)</td>
-      </tr>
-      <tr>
-        <td>Over 4</td>
-        <td>Red (slow)</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your LCP score
-
-See [How to improve Largest Contentful Paint on your site][improve].
-
-## Resources
-
-- [Source code for **Largest Contentful Paint** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/largest-contentful-paint.js)
-- [Largest Contentful Paint](/largest-contentful-paint/)
-- [Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/)
-- [New in Chrome 77: Largest Contentful Paint][launch]
-
-[definition]: /largest-contentful-paint/#largest-contentful-paint-defined
-[launch]: https://developers.google.com/web/updates/2019/09/nic77#lcp
-[improve]: /largest-contentful-paint#how-to-improve-largest-contentful-paint-on-your-site
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/largest-contentful-paint.png b/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/largest-contentful-paint.png
deleted file mode 100644
index 3cd52a25e8d..00000000000
Binary files a/src/site/content/en/lighthouse-performance/lighthouse-largest-contentful-paint/largest-contentful-paint.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/index.md b/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/index.md
deleted file mode 100644
index 240d6494bb2..00000000000
--- a/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/index.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-layout: post
-title: Max Potential First Input Delay
-description: |
-  Learn about Lighthouse's Max Potential First Input Delay metric and
-  how to measure and optimize it.
-date: 2019-05-02
-updated: 2019-10-16
-web_lighthouse:
-  - max-potential-fid
----
-
-Max Potential First Input Delay (FID) is one of the metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays Max Potential FID in milliseconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="max-potential-fid.png" 
-       alt="A screenshot of the Lighthouse Max Potential First Input Delay audit.">
-</figure>
-
-## What Max Potential FID measures
-
-Max Potential FID measures the worst-case [First Input Delay][fid] that your users might experience.
-First Input Delay measures the time from when a user first interacts with your site, such as
-clicking a button, to the time when the browser is actually able to respond to that interaction.
-
-Lighthouse calculates Max Potential FID by finding the duration of the [longest task][longtask]
-after [First Contentful Paint][fcp]. Tasks before First Contentful Paint are excluded because it's
-unlikely that a user will attempt to interact with your page before any content has been rendered to
-the screen, which is what First Contentful Paint measures.
-
-## How Lighthouse determines your Max Potential FID score
-
-<!-- TODO(kaycebasques): In the FCP doc we link to the HTTP Archive report of FCP data.
-     If we get a similar report for MPFID we should link to that.
-     https://web.dev/first-contentful-paint/#how-lighthouse-determines-your-fcp-score -->
-
-Your Max Potential FID score is a comparison of your page's Max Potential FID time
-and Max Potential FID times for real websites, based on
-data from the [HTTP Archive](https://httparchive.org).
-For example, if your Max Potential FID score in Lighthouse is green, it means
-that your page performs better than 90% of real websites.
-
-This table shows how to interpret your TBT score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Max Potential FID time<br>(in milliseconds)</th>
-        <th>Color-coding</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–130</td>
-        <td>Green (fast)</td>
-      </tr>
-      <tr>
-        <td>130-250</td>
-        <td>Orange (moderate)</td>
-      </tr>
-      <tr>
-        <td>Over 250</td>
-        <td>Red (slow)</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your Max Potential FID score
-
-If you're trying to make major improvements to your Max Potential FID score, see
-[How to improve your TTI score][tti]. The strategies for majorly improving Max Potential FID are
-largely the same as the strategies for improving TTI.
-
-If you want to optimize your Max Potential FID score specifically, you need to reduce the duration
-of your longest tasks, since that is what Max Potential FID technically measures. The [Idle Until
-Urgent](https://philipwalton.com/articles/idle-until-urgent/) strategy is one way to do that.
-
-## How to capture FID field data
-
-Lighthouse's measurement of Max Potential FID is [lab data][lab]. To capture real
-FID data as your users load your pages, use Google's 
-[First Input Delay library](https://github.com/GoogleChromeLabs/first-input-delay).
-Once you're capturing FID data, you can report it as an event
-to your preferred analytics tool.
-
-Since FID measures when actual users first interact with your page,
-it's more inherently variable than typical performance metrics.
-See [Analyzing and reporting on FID data][analysis] for guidance
-about how to evaluate the FID data you collect.
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **Max Potential First Input Delay** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/max-potential-fid.js)
-- [First Input Delay][fid]
-- [Time to Interactive](/interactive/)
-- [Are long JavaScript tasks delaying your Time to Interactive?](/long-tasks-devtools)
-- [First paint and first contentful paint][fcp]
-- [How To Think About Speed Tools][tools]
-
-[analysis]: https://developers.google.com/web/updates/2018/05/first-input-delay#analyzing_and_reporting_on_fid_data
-[fid]: https://developers.google.com/web/updates/2018/05/first-input-delay
-[tti]: /interactive/#how-to-improve-your-tti-score
-[fcp]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint
-[fid]: https://developers.google.com/web/updates/2018/05/first-input-delay
-[rum]: https://developers.google.com/web/fundamentals/performance/speed-tools#field_data
-[lab]: https://developers.google.com/web/fundamentals/performance/speed-tools#lab_data
-[longtask]: /long-tasks-devtools#what-are-long-tasks
-[tools]: https://developers.google.com/web/fundamentals/performance/speed-tools
\ No newline at end of file
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/max-potential-fid.png b/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/max-potential-fid.png
deleted file mode 100644
index 09e722e16e0..00000000000
Binary files a/src/site/content/en/lighthouse-performance/lighthouse-max-potential-fid/max-potential-fid.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/index.md b/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/index.md
deleted file mode 100644
index 176cad20599..00000000000
--- a/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/index.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: post
-title: Total Blocking Time
-description: |
-  Learn about Lighthouse's Total Blocking Time metric and
-  how to measure and optimize it.
-web_lighthouse:
-  - total-blocking-time
-date: 2019-10-09
----
-
-Total Blocking Time (TBT) is one of the metrics tracked in the **Performance** section
-of the Lighthouse report. Each metric captures some aspect of page load speed.
-
-The Lighthouse report displays TBT in milliseconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="total-blocking-time.jpg" alt="A screenshot of the Lighthouse Total Blocking Time audit">
-</figure>
-
-## What TBT measures
-
-TBT measures the total amount of time that a page is blocked from responding to user input,
-such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding
-the *blocking portion* of all [long tasks] between [First Contentful Paint][fcp] and [Time to Interactive][tti].
-Any task that executes for more than 50&nbsp;ms is a long task. The amount of time after
-50&nbsp;ms is the blocking portion. For example, if Lighthouse detects a 70&nbsp;ms long task,
-the blocking portion would be 20&nbsp;ms.
-
-## How Lighthouse determines your TBT score
-
-Your TBT score is a comparison of your page's TBT time and TBT times for the top 10,000 sites
-when loaded on mobile devices. The top site data includes 404 pages.
-
-This table shows how to interpret your TBT score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>TBT time<br>(in milliseconds)</th>
-        <th>Color-coding</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–300</td>
-        <td>Green (fast)</td>
-      </tr>
-      <tr>
-        <td>300-600</td>
-        <td>Orange (moderate)</td>
-      </tr>
-      <tr>
-        <td>Over 600</td>
-        <td>Red (slow)</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your TBT score
-
-See [What is causing my long tasks?](/long-tasks-devtools/#what-is-causing-my-long-tasks) to learn
-how to diagnose the root cause of long tasks with the Performance panel of Chrome DevTools.
-
-In general, the most common causes of long tasks are:
-
-* Unnecessary JavaScript loading, parsing, or execution. While analyzing your code in the Performance panel
-  you might discover that the main thread is doing work that isn't really necessary to load the page.
-  [Reducing JavaScript payloads with code splitting][split], [removing unused code][unused], or 
-  [efficiently loading third-party JavaScript][3p] should improve your TBT score.
-* Inefficient JavaScript statements. For example, after analyzing your code in the Performance panel, suppose
-  you see a call to `document.querySelectorAll('a')` that returns 2000 nodes. Refactoring your code to
-  use a more specific selector that only returns 10 nodes should improve your TBT score.
-
-{% Aside %}
-  Unnecessary JavaScript loading, parsing, or execution is usually a much bigger opportunity for improvement
-  on most sites.
-{% endAside %}
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **Total Blocking Time** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/total-blocking-time.js)
-- [Are long JavaScript tasks delaying your Time to Interactive?][long tasks]
-- [First Contentful Paint][fcp]
-- [Time to Interactive][tti]
-- [Reduce JavaScript payloads with code splitting][split]
-- [Remove unused code][unused]
-- [Efficiently load third-party resources][3p]
-
-[long tasks]: /long-tasks-devtools
-[fcp]: /first-contentful-paint/
-[tti]: /interactive/
-[split]: /reduce-javascript-payloads-with-code-splitting/
-[unused]: /remove-unused-code/
-[3p]: /efficiently-load-third-party-javascript/
diff --git a/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/total-blocking-time.jpg b/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/total-blocking-time.jpg
deleted file mode 100644
index d4894863968..00000000000
Binary files a/src/site/content/en/lighthouse-performance/lighthouse-total-blocking-time/total-blocking-time.jpg and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/index.md b/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/index.md
deleted file mode 100644
index 2b9d1aaccf7..00000000000
--- a/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/index.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: Minimize main thread work
-description: |
-  Learn about the browser's main thread and how you can optimize your web page
-  to reduce main thread load and improve performance.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - mainthread-work-breakdown
----
-
-The browser's [renderer process](https://developers.google.com/web/updates/2018/09/inside-browser-part3)
-is what turns your code into a web page that your users can interact with.
-By default, the [main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)
-of the renderer process typically handles most code:
-it parses the HTML and builds the DOM, parses the CSS and applies the specified styles,
-and parses, evaluates, and executes the JavaScript.
-
-The main thread also processes user events.
-So, any time the main thread is busy doing something else,
-your web page may not respond to user interactions,
-leading to a bad experience.
-
-## How the Lighthouse main thread work audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that keep the main thread busy for longer than 4&nbsp;seconds
-during load:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="mainthread-work-breakdown.png" alt="A screenshot of the Lighthouse Minimize main thread work audit">
-</figure>
-
-To help you identify the sources of main thread load,
-Lighthouse shows a breakdown of where CPU time was spent
-while the browser loaded your page.
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to minimize main thread work
-
-The sections below are organized based on the categories that Lighthouse reports.
-See [The anatomy of a frame](https://aerotwist.com/blog/the-anatomy-of-a-frame/)
-for an overview of how Chromium renders web pages.
-
-See [Do less main thread work](https://developers.google.com/web/tools/chrome-devtools/speed/get-started#main)
-to learn how to use Chrome DevTools to to investigate exactly what your main thread is doing
-as the page loads.
-
-### Script evaluation
-
-* [Optimize third-party JavaScript](/fast/#optimize-your-third-party-resources)
-* [Debounce your input handlers](https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers)
-* [Use web workers](/off-main-thread/)
-
-### Style and layout
-
-* [Reduce the scope and complexity of style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)
-* [Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
-
-### Rendering
-
-* [Stick to compositor only properties and manage layer count](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)
-* [Simplify paint complexity and reduce paint areas](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas)
-
-### Parsing HTML and CSS
-
-* [Extract critical CSS](/extract-critical-css/)
-* [Minify CSS](/minify-css/)
-* [Defer non-critical CSS](/defer-non-critical-css/)
-
-### Script parsing and compilation
-
-* [Reduce JavaScript payloads with code splitting](/reduce-javascript-payloads-with-code-splitting/)
-* [Remove unused code](/remove-unused-code/)
-
-### Garbage collection
-
-* [Monitor your web page's total memory usage with `measureMemory()`](/monitor-total-page-memory-usage/)
-
-## Resources
-
-- [Source code for **Minimize main thread work** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/mainthread-work-breakdown.js)
-- [Main thread (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)
-- [Inside look at modern web browser (part 3)](https://developers.google.com/web/updates/2018/09/inside-browser-part3)
diff --git a/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/mainthread-work-breakdown.png b/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/mainthread-work-breakdown.png
deleted file mode 100644
index 7c64bd987c1..00000000000
Binary files a/src/site/content/en/lighthouse-performance/mainthread-work-breakdown/mainthread-work-breakdown.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/offscreen-images/index.md b/src/site/content/en/lighthouse-performance/offscreen-images/index.md
deleted file mode 100644
index 384532044c6..00000000000
--- a/src/site/content/en/lighthouse-performance/offscreen-images/index.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: post
-title: Defer offscreen images
-description: |
-  Learn about the offscreen-images audit.
-date: 2019-05-02
-updated: 2020-05-29
-web_lighthouse:
-  - offscreen-images
----
-
-The Opportunities section of your Lighthouse report lists
-all offscreen or hidden images in your page
-along with the potential savings in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte).
-Consider lazy-loading these images
-after all critical resources have finished loading
-to lower [Time to Interactive](/interactive):
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="offscreen-images.png" alt="A screenshot of the Lighthouse Defer offscreen images audit">
-</figure>
-
-See also [Lazy load offscreen images with lazysizes codelab](/codelab-use-lazysizes-to-lazyload-images).
-
-## Resources
-
-- [Source code for **Defer offscreen images** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/offscreen-images.js)
diff --git a/src/site/content/en/lighthouse-performance/offscreen-images/offscreen-images.png b/src/site/content/en/lighthouse-performance/offscreen-images/offscreen-images.png
deleted file mode 100644
index 3c089e5a58e..00000000000
Binary files a/src/site/content/en/lighthouse-performance/offscreen-images/offscreen-images.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/performance-scoring/index.md b/src/site/content/en/lighthouse-performance/performance-scoring/index.md
deleted file mode 100644
index 55354c5f812..00000000000
--- a/src/site/content/en/lighthouse-performance/performance-scoring/index.md
+++ /dev/null
@@ -1,251 +0,0 @@
----
-layout: post
-title: Lighthouse performance scoring
-description: |
-  Learn how Lighthouse generates the overall Performance score for your page.
-subhead: How Lighthouse calculates your overall Performance score
-date: 2019-09-19
-updated: 2020-06-12
----
-
-In general, only [metrics](/lighthouse-performance/#metrics)
-contribute to your Lighthouse Performance score, not the results of Opportunities or Diagnostics.
-That said, improving the opportunties and diagnostics likely improve the metric values, so there
-is an indirect relationship.
-
-Below, we've outlined why the score can fluctuate, how it's comprised, and how Lighthouse scores each individual metric.
-
-## Why your score fluctuates {: #fluctuations }
-
-A lot of the variability in your overall Performance score and metric values is not due to Lighthouse. When your Performance score fluctuates it's usually because of changes in underlying conditions. Common
-problems include:
-
-* A/B tests or changes in ads being served
-* Internet traffic routing changes
-* Testing on different devices, such as a high-performance desktop and a low-performance laptop
-* Browser extensions that inject JavaScript and add/modify network requests
-* Antivirus software
-
-[Lighthouse's documentation on Variability](https://github.com/GoogleChrome/lighthouse/blob/master/docs/variability.md) covers this in more depth.
-
-Furthermore, even though Lighthouse can provide you a single overall Performance score, it might be more
-useful to think of your site performance as a distribution of scores, rather than a single number.
-See the introduction of [User-Centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)
-to understand why.
-
-
-## How the Performance score is weighted {: #weightings }
-
-The Performance score is a [weighted average](https://www.wikihow.com/Calculate-Weighted-Average#Weighted_Averages_without_Percentages_sub) of the _metric scores_. Naturally, more heavily weighted metrics have a bigger effect on your overall Performance score.
-The metric scores are not visible in the report, but are calculated under the hood.
-
-
-{% Aside %}
-  The weightings are chosen to provide a balanced representation of the user's perception of performance. The weightings have changed over time because the Lighthouse team is regularly
-  doing research and gathering feedback to understand what has the biggest
-  impact on user-perceived performance.
-{% endAside %}
-
-<figure class="w-figure">
-  <a href="https://googlechrome.github.io/lighthouse/scorecalc/">
-    <img src="./score-calc.png" alt="Lighthouse scoring calculator webapp" style="max-width: 600px;">
-  </a>
-  <figcaption class="w-figcaption">
-    Explore scoring with the <a href="https://googlechrome.github.io/lighthouse/scorecalc/">Lighthouse scoring calculator</a>
-  </figcaption>
-</figure>
-
-### Lighthouse 6
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Audit</th>
-        <th>Weight</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a href="/first-contentful-paint/">First Contentful Paint</a></td>
-        <td>15%</td>
-      </tr>
-      <tr>
-        <td><a href="/speed-index/">Speed Index</a></td>
-        <td>15%</td>
-      </tr>
-      <tr>
-        <td><a href="/lcp/">Largest Contentful Paint</a></td>
-        <td>25%</td>
-      </tr>
-      <tr>
-        <td><a href="/interactive/">Time to Interactive</a></td>
-        <td>15%</td>
-      </tr>
-      <tr>
-        <td><a href="/lighthouse-total-blocking-time/">Total Blocking Time</a></td>
-        <td>25%</td>
-      </tr>
-      <tr>
-        <td><a href="/cls/">Cumulative Layout Shift</a></td>
-        <td>5%</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-
-### Lighthouse 5
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Audit</th>
-        <th>Weight</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a href="/first-contentful-paint/">First Contentful Paint</a></td>
-        <td>20%</td>
-      </tr>
-      <tr>
-        <td><a href="/speed-index/">Speed Index</a></td>
-        <td>27%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-meaningful-paint/">First Meaningful Paint</a></td>
-        <td>7%</td>
-      </tr>
-      <tr>
-        <td><a href="/interactive/">Time to Interactive</a></td>
-        <td>33%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-cpu-idle/">First CPU Idle</a></td>
-        <td>13%</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-
-
-### How metric scores are determined {: #metric-scores }
-
-Once Lighthouse is done gathering the performance metrics (mostly reported in milliseconds), it converts each raw metric value into a metric score from 0 to 100 by looking where the metric value falls on its Lighthouse scoring distribution. The scoring distribution is
-a log-normal distribution derived from the performance metrics of real website performance
-data on [HTTP Archive](https://httparchive.org/).
-
-For example, Largest Contentful Paint (LCP) measures when a user perceives that the
-largest content of a page is visible. The metric value for LCP represents the time duration between
-the user initiating the page load and the page rendering its primary content. Based on real
-website data, top-performing sites render LCP in about 1,220ms, so that metric value is mapped to
-a score of 99.
-
-Going a bit deeper, the Lighthouse scoring curve model uses HTTPArchive data to determine two control points that then set the shape of a [log-normal](https://en.wikipedia.org/wiki/Weber%E2%80%93Fechner_law) curve. The 25th percentile of HTTPArchive data becomes a score of 50 (the median control point), and the 8th percentile becomes a score of 90 (the good/green control point). While exploring the scoring curve plot below, note that between 0.50 and 0.92, there's a near-linear relationship between metric value and score. Around a score of 0.96 is the "point of diminishing returns" as above it, the curve pulls away, requiring increasingly more metric improvement to improve an already high score.
-
-
-<figure class="w-figure">
-  <img src="./scoring-curve.png" alt="Image of the scoring curve for TTI" style="max-width: 600px;">
-  <figcaption class="w-figcaption">
-    <a href="https://www.desmos.com/calculator/o98tbeyt1t">Explore the scoring curve for TTI</a>.
-  </figcaption>
-</figure>
-
-
-### How desktop vs mobile is handled {: #desktop }
-
-As mentioned above, the score curves are determined from real performance data. Prior to Lighthouse v6, all score curves were based on mobile performance data, however a desktop Lighthouse run would use that. In practice, this led to artificially inflated desktop scores.  Lighthouse v6 fixed this bug by using specific desktop scoring. While you certainly can expect overall changes in your perf score from 5 to 6, any scores for desktop will be significantly different.
-
-### How scores are color-coded {: #color-coding }
-
-The metrics scores and the perf score are colored according to these ranges:
-
-* 0 to 49 (red): Poor
-* 50 to 89 (orange): Needs Improvement
-* 90 to 100 (green): Good
-
-To provide a good user experience, sites should strive to have a good score (90-100). A "perfect" score of 100 is extremely challenging to achieve and not expected. For example, taking a score from 99 to 100 needs about the same amount of metric improvement that would take a 90 to 94.
-
-### What can developers do to improve their performance score?
-First, use the [Lighthouse scoring calculator](https://googlechrome.github.io/lighthouse/scorecalc/) to help understand what thresholds you should be aiming for achieving a certain Lighthouse performance score.
-
-In the Lighthouse report, the **Opportunities** section has detailed suggestions and documentation on how to implement them. Additionally, the **Diagnostics** section lists additional guidance that developers can explore to further improve their performance.
-
-
-<!--
-We don't think users care about the historical scoring rubrics, but we'd still prefer to keep them around because X
-## Historical versions
-
-### Lighthouse 3 and 4
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Audit</th>
-        <th>Weight</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a href="/first-contentful-paint/">First Contentful Paint</a></td>
-        <td>23%</td>
-      </tr>
-      <tr>
-        <td><a href="/speed-index/">Speed Index</a></td>
-        <td>27%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-meaningful-paint/">First Meaningful Paint</a></td>
-        <td>7%</td>
-      </tr>
-      <tr>
-        <td><a href="/interactive/">Time to Interactive</a></td>
-        <td>33%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-cpu-idle/">First CPU Idle</a></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-### Lighthouse 2
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Audit</th>
-        <th>Weight</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a href="/first-contentful-paint/">First Contentful Paint</a></td>
-        <td>6%</td>
-      </tr>
-      <tr>
-        <td><a href="/speed-index/">Speed Index</a></td>
-        <td>6%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-meaningful-paint/">First Meaningful Paint</a></td>
-        <td>29%</td>
-      </tr>
-      <tr>
-        <td><a href="/interactive/">Time to Interactive</a></td>
-        <td>29%</td>
-      </tr>
-      <tr>
-        <td><a href="/first-cpu-idle/">First CPU Idle</a></td>
-        <td>29%</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
--->
diff --git a/src/site/content/en/lighthouse-performance/performance-scoring/score-calc.png b/src/site/content/en/lighthouse-performance/performance-scoring/score-calc.png
deleted file mode 100644
index d3cbd7d76f1..00000000000
Binary files a/src/site/content/en/lighthouse-performance/performance-scoring/score-calc.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/performance-scoring/scoring-curve.png b/src/site/content/en/lighthouse-performance/performance-scoring/scoring-curve.png
deleted file mode 100644
index cf4c66a9a49..00000000000
Binary files a/src/site/content/en/lighthouse-performance/performance-scoring/scoring-curve.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/redirects/index.md b/src/site/content/en/lighthouse-performance/redirects/index.md
deleted file mode 100644
index 303eb729884..00000000000
--- a/src/site/content/en/lighthouse-performance/redirects/index.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: post
-title: Avoid multiple page redirects
-description: |
-  Learn why page redirects slow down your web page's load speed and
-  how to avoid them.
-web_lighthouse:
-  - redirects
-date: 2019-05-04
-updated: 2019-09-19
----
-
-Redirects slow down your page load speed.
-When a browser requests a resource that has been redirected,
-the server usually returns an HTTP response like this:
-
-```js
-HTTP/1.1 301 Moved Permanently
-Location: /path/to/new/location
-```
-
-The browser must then make another HTTP request at the new location
-to retrieve the resource.
-This additional trip across the network can delay the loading
-of the resource by hundreds of milliseconds.
-
-## How the Lighthouse multiple redirects audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that have multiple redirects:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="redirects.png" alt="">
-</figure>
-
-A page fails this audit when it has two or more redirects.
-
-## How to eliminate redirects
-
-Point links to flagged resources
-to the resources' current locations.
-It's especially important to avoid redirects in resources
-required for your [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/).
-
-If you're using redirects to divert mobile users to the mobile version of your page,
-consider redesigning your site to use
-[Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive/).
-
-## Resources
-
-- [Source code for **Avoid multiple page redirects** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/redirects.js)
-- [Redirections in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)
-- [Avoid Landing Page Redirects](https://developers.google.com/speed/docs/insights/AvoidRedirects)
diff --git a/src/site/content/en/lighthouse-performance/redirects/redirects.png b/src/site/content/en/lighthouse-performance/redirects/redirects.png
deleted file mode 100644
index 98ab254c0b1..00000000000
Binary files a/src/site/content/en/lighthouse-performance/redirects/redirects.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/render-blocking-resources/blocking-resources.png b/src/site/content/en/lighthouse-performance/render-blocking-resources/blocking-resources.png
deleted file mode 100644
index 15bb36865ec..00000000000
Binary files a/src/site/content/en/lighthouse-performance/render-blocking-resources/blocking-resources.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/render-blocking-resources/coverage.png b/src/site/content/en/lighthouse-performance/render-blocking-resources/coverage.png
deleted file mode 100644
index 9a04371e5bd..00000000000
Binary files a/src/site/content/en/lighthouse-performance/render-blocking-resources/coverage.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/render-blocking-resources/index.md b/src/site/content/en/lighthouse-performance/render-blocking-resources/index.md
deleted file mode 100644
index 39438d847dc..00000000000
--- a/src/site/content/en/lighthouse-performance/render-blocking-resources/index.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-layout: post
-title: Eliminate render-blocking resources
-description: |
-  Learn about the render-blocking-resources audit.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - render-blocking-resources
----
-
-The Opportunities section of your Lighthouse report lists all URLs
-blocking the first paint of your page.
-The goal is to reduce the impact of these render-blocking URLs
-by inlining critical resources, deferring non-critical resources,
-and removing anything unused.
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="blocking-resources.png" alt="A screenshot of the Lighthouse Eliminate render-blocking resources audit">
-</figure>
-
-
-## Which URLs get flagged as render-blocking resources?
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags three types of render-blocking URLs: scripts, stylesheets, and HTML
-imports:
-
-A `<script>` tag that:
-
-* Is in the `<head>` of the document.
-* Does not have a `defer` attribute.
-* Does not have an `async` attribute.
-
-A `<link rel="stylesheet">` tag that:
-
-* Does not have a `disabled` attribute. When this attribute is present,
-  the browser does not download the stylesheet.
-* Does not have a `media` attribute that matches the user's device.
-
-A `<link rel="import">` tag that:
-
-* Does not have an `async` attribute.
-
-## How to identify critical resources
-
-The first step to reducing the impact of render-blocking resources,
-is to identify what's critical and what's not.
-Use the [Coverage tab](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)
-in Chrome DevTools to identify non-critical CSS and JS.
-When you load or run a page, the tab tells you how much code was used,
-versus how much was loaded:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="coverage.png" alt="Chrome DevTools: Coverage tab">
-  <figcaption class="w-figcaption">
-    Chrome DevTools: Coverage tab.
-  </figcaption>
-</figure>
-
-You can reduce the size of your pages by only shipping the code and styles
-that you need. Click on a URL to inspect that file in the Sources panel.
-Styles in CSS files and code in JavaScript files are marked in two colors:
-
-* **Green (critical):** Styles that are required for first paint; code that's critical to the page's core functionality.
-* **Red (non-critical):** Styles that apply to content not immediately visible; code not being used in page's core functionality.
-
-## How to eliminate render-blocking scripts
-
-Once you've identified critical code,
-move that code from the render-blocking URL to an inline `script` tag in your HTML page.
-When the page loads, it will have what it needs to handle the page's core functionality.
-
-If there's code in a render-blocking URL that's not critical,
-you can keep it in the URL,
-and then mark the URL with `async` or `defer` attributes
-(see also [Adding Interactivity with JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
-
-Code that isn't being used at all should be removed (see [Remove unused code](/remove-unused-code)).
-
-## How to eliminate render-blocking stylesheets
-
-Similar to inlining code in a `<script>` tag,
-inline critical styles required for the first paint
-inside a `<style>` block at the `head` of the HTML page.
-Then load the rest of the styles asynchronously using the `preload` link
-(see [Defer unused CSS](/defer-non-critical-css)).
-
-Consider automating the process of extracting and inlining "Above the Fold" CSS
-using the [Critical tool](https://github.com/addyosmani/critical/blob/master/README.md).
-
-Another approach to eliminating render-blocking styles is
-to split up those styles into different files, organized by media query.
-Then add a media attribute to each stylesheet link.
-When loading a page,
-the browser only blocks the first paint to retrieve the stylesheets that match the user's device
-(see [Render-Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css)).
-
-Finally, you'll want to minify your CSS to remove any extra whitespace or
-characters (see [Minify CSS](/minify-css)).
-This ensures that you're sending the smallest possible bundle to your users.
-
-## How to eliminate render-blocking imports
-
-For non-critical HTML imports, mark them with the `async` attribute. As a
-general rule, `async` should be used with HTML imports as much as possible.
-
-```html
-<link rel="import" href="myfile.html" async>
-```
-
-## Resources
-
-- [Source code for **Eliminate render-blocking resources** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js)
-- [Reduce JavaScript payloads with code splitting](/reduce-javascript-payloads-with-code-splitting)
-- [Remove unused code codelab](/codelab-remove-unused-code)
-- [JavaScript Start-up Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/)
diff --git a/src/site/content/en/lighthouse-performance/resource-summary/index.md b/src/site/content/en/lighthouse-performance/resource-summary/index.md
deleted file mode 100644
index e04a874ae3c..00000000000
--- a/src/site/content/en/lighthouse-performance/resource-summary/index.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-layout: post
-title: Keep request counts low and transfer sizes small
-description: |
-  Learn how high resource counts and large transfer sizes affect load performance.
-  Get strategies for reducing request counts and transfer sizes.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - resource-summary
----
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-reports how many network requests were made and
-how much data was transferred while your page loaded:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="resource-summary.png"
-       alt="A screenshot of the Lighthouse Keep request counts low and transfer sizes small audit">
-</figure>
-
-* The **Requests** and **Transfer Size** values for the **Total** row are computed by adding the values
-  for the **Image**, **Script**, **Font**, **Stylesheet**, **Other**, **Document**, and **Media**
-  rows.
-* The **Third-party** column does not factor into the **Total** row's values. Its purpose is
-  to make you aware of how many of the total requests and how much of the total transfer size came
-  from third-party domains. The third-party requests could be a combination of any of the other
-  resource types.
-
-{% Aside %}
-  Like all of the **Diagnostics** audits, the **Keep request counts low and transfer sizes small**
-  audit does not directly affect your **Performance** score. However, reducing request counts or
-  transfer sizes may improve other **Performance** metrics.
-{% endAside %}
-
-## How to reduce resource counts and transfer sizes
-
-The effect of high resource counts or large transfer sizes on load performance depends on what
-type of resource is being requested.
-
-### CSS and JavaScript
-
-Requests for CSS and JavaScript files are render-blocking by default. In other words,
-browsers can't render content to the screen until all CSS and JavaScript requests are finished.
-If any of these files are hosted on a slow server, that single slow server can delay the entire
-rendering process. See [Optimize your JavaScript][js], [Optimize your third-party resources][3p],
-and [Optimize your CSS][css] to learn how to only ship the code that you actually need.
-
-Affected metrics: [All][metrics]
-
-### Images
-
-Requests for images aren't render-blocking like CSS and JavaScript, but they can still negatively
-affect load performance. A common problem is when a mobile user loads a page and sees that images
-have started loading but will take a while to finish. See [Optimize your images][images]
-to learn how to load images faster.
-
-Affected metrics: [First Contentful Paint][fcp], [First Meaningful Paint][fmp], [Speed Index][si]
-
-### Fonts
-
-Inefficient loading of font files can cause invisible text during the page load. See
-[Optimize your fonts][fonts] to learn how to default to a font that's
-available on the user's device and then switch to your custom font when it has finished downloading.
-
-Affected metrics: [First Contentful Paint][fcp]
-
-### Documents
-
-If your HTML file is large, the browser has to spend more time parsing the HTML and
-constructing the DOM tree from the parsed HTML.
-
-Affected metrics: [First Contentful Paint][fcp]
-
-### Media
-
-Animated GIF files are often very large.
-See [Replace GIFs with videos][gifs] to learn how to load animations faster.
-
-Affected metrics: [First Contentful Paint][fcp]
-
-## Use performance budgets to prevent regressions
-
-Once you've optimized your code to reduce request counts and transfer sizes, see
-[Set performance budgets](/fast#set-performance-budgets) to learn how to prevent regressions.
-
-## Resources
-
-[Source code for **Keep request counts low and transfer sizes small** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/resource-summary.js)
-
-[css]: /fast#optimize-your-css
-[js]: /fast#optimize-your-javascript
-[3p]: /fast#optimize-your-third-party-resources
-[metrics]: /lighthouse-performance#metrics
-[images]: /fast#optimize-your-images
-[fcp]: /first-contentful-paint
-[fmp]: /first-meaningful-paint
-[si]: /speed-index
-[fonts]: /fast/#optimize-web-fonts
-[gifs]: /replace-gifs-with-videos/
diff --git a/src/site/content/en/lighthouse-performance/resource-summary/resource-summary.png b/src/site/content/en/lighthouse-performance/resource-summary/resource-summary.png
deleted file mode 100644
index 5f2c25ee893..00000000000
Binary files a/src/site/content/en/lighthouse-performance/resource-summary/resource-summary.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/speed-index/index.md b/src/site/content/en/lighthouse-performance/speed-index/index.md
deleted file mode 100644
index 825cc8a5420..00000000000
--- a/src/site/content/en/lighthouse-performance/speed-index/index.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-layout: post
-title: Speed Index
-description: |
-  Learn about Lighthouse's Speed Index metric and how to optimize it.
-date: 2019-05-02
-updated: 2019-10-10
-web_lighthouse:
-  - speed-index
----
-
-Speed Index is one of six metrics
-tracked in the **Performance** section of the Lighthouse report.
-Each metric captures some aspect of page load speed.
-
-Lighthouse displays Speed Index in seconds:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="speed-index.png" alt="A screenshot of the Lighthouse Speed Index audit">
-</figure>
-
-## What Speed Index measures
-
-Speed Index measures how quickly content is visually displayed during page load.
-Lighthouse first captures a video of the page loading in the browser and
-computes the visual progression between frames.
-Lighthouse then uses the [Speedline Node.js module](https://github.com/paulirish/speedline)
-to generate the Speed Index score.
-
-{% Aside %}
-Speedline is based on the same principles as the
-[original speed index introduced by WebpageTest.org](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index),
-but it computes the visual progression between frames using the
-[structural similarity (SSIM) index](https://en.wikipedia.org/wiki/Structural_similarity)
-instead of the histogram distance.
-{% endAside %}
-
-## How Lighthouse determines your Speed Index score
-
-Your Speed Index score is a comparison of your page's speed index
-and the speed indices of real websites, based on
-[data from the HTTP Archive](https://bigquery.cloud.google.com/table/httparchive:lighthouse.2019_03_01_mobile?pli=1).
-
-This table shows how to interpret your Speed Index score:
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th>Speed Index<br>(in seconds)</th>
-        <th>Color-coding</th>
-        <th>Speed Index score</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0–4.3</td>
-        <td>Green (fast)</td>
-        <td>75–100</td>
-      </tr>
-      <tr>
-        <td>4.4–5.8</td>
-        <td>Orange (moderate)</td>
-        <td>50–74</td>
-      </tr>
-      <tr>
-        <td>Over 5.8</td>
-        <td>Red (slow)</td>
-        <td>0–49</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to improve your Speed Index score
-
-While anything you do to improve page load speed
-will improve your Speed Index score,
-addressing any issues discovered by these Diagnostic audits
-should have a particularly big impact:
-
-- [Minimize main thread work](/mainthread-work-breakdown)
-- [Reduce JavaScript execution time](/bootup-time)
-- [Ensure text remains visible during webfont load](/font-display)
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **Speed Index** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/speed-index.js)
-- [Lighthouse v3 Scoring Guide](https://developers.google.com/web/tools/lighthouse/v3/scoring)
-- [Speedline](https://github.com/paulirish/speedline)
-- [WebPagetest Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
diff --git a/src/site/content/en/lighthouse-performance/speed-index/speed-index.png b/src/site/content/en/lighthouse-performance/speed-index/speed-index.png
deleted file mode 100644
index cbe14515a06..00000000000
Binary files a/src/site/content/en/lighthouse-performance/speed-index/speed-index.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/third-party-summary/index.md b/src/site/content/en/lighthouse-performance/third-party-summary/index.md
deleted file mode 100644
index d9ee92fac5f..00000000000
--- a/src/site/content/en/lighthouse-performance/third-party-summary/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: Reduce the impact of third-party code
-description: |
-  Learn how third-party code, like advertising networks and analytics services, affects page load performance,
-  and how you can optimize third-party code.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - third-party-summary
----
-
-To add an advertising network, social media button, A/B test, or analytics service to your page,
-you usually need to add a third-party script to your HTML. These [third-party scripts can
-significantly affect your page load performance](/third-party-javascript/).
-
-## How the Lighthouse audit for third-party code fails
-
-Lighthouse flags pages that have third-party code that blocks the [main thread] for 250&nbsp;ms or
-longer:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="third-party-summary.png"
-       alt="A screenshot of the Lighthouse Reduce the impact of third-party code audit">
-</figure>
-
-A third-party script is any script hosted on a domain that's different than the domain of the URL
-that you audited with Lighthouse. As the page loads, Lighthouse calculates how long each of the
-third-party scripts blocks the main thread. If the total blocking time is greater than 250&nbsp;ms
-the audit fails.
-
-## How to reduce the impact of third-party code
-
-See [Identify slow third-party scripts](/identify-slow-third-party-javascript/) to learn how to use
-Chrome DevTools and other Lighthouse audits to detect problematic third-party code, and
-see [Efficiently load third-party JavaScript](/efficiently-load-third-party-javascript/) for
-optimization strategies.
-
-## Resources
-
-- [Source code for **Reduce the impact of third-party code** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/third-party-summary.js)
-- [Loading Third-party JavaScript](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/)
-
-[main thread]: https://developer.mozilla.org/en-US/docs/Glossary/Main_thread
diff --git a/src/site/content/en/lighthouse-performance/third-party-summary/third-party-summary.png b/src/site/content/en/lighthouse-performance/third-party-summary/third-party-summary.png
deleted file mode 100644
index 384752bd0dd..00000000000
Binary files a/src/site/content/en/lighthouse-performance/third-party-summary/third-party-summary.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/time-to-first-byte/index.md b/src/site/content/en/lighthouse-performance/time-to-first-byte/index.md
deleted file mode 100644
index 4ccf05d412f..00000000000
--- a/src/site/content/en/lighthouse-performance/time-to-first-byte/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: Reduce server response times (TTFB)
-description: |
-  Learn about the time-to-first-byte audit.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - time-to-first-byte
----
-The Opportunities section of your Lighthouse report
-reports Time to First Byte,
-the time that it takes for a user's browser
-to receive the first byte of page content:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="time-to-first-byte.png" alt="A screenshot of the Lighthouse Server response times are low (TTFB) audit">
-</figure>
-
-## Slow server response times affect performance
-
-This audit fails when the browser waits more than 600&nbsp;ms
-for the server to respond to the main document request.
-Users dislike when pages take a long time to load.
-Slow server response times are one possible cause for long page loads.
-
-When users navigate to a URL in their web browser,
-the browser makes a network request to fetch that content.
-Your server receives the request and returns the page content.
-
-The server may need to do a lot of work in order to return a page with all of the content that users want.
-For example, if users are looking at their order history,
-the server needs to fetch each user's history from a database,
-and then insert that content into the page.
-
-Optimizing the server to do work like this as quickly as possible is one way to reduce the time that users spend waiting for pages to load.
-
-## How to improve server response times
-
-The first step to improving server response times is to identify the core conceptual tasks that your server must complete in order to return page content, and then measure how long each of these tasks takes. Once you've identified the longest tasks, search for ways to speed them up.
-
-There are many possible causes of slow server responses, and therefore many possible ways to improve:
-
-- Optimize the server's application logic to prepare pages faster. If you use a server framework, the framework may have recommendations on how to do this.
-- Optimize how your server queries databases, or migrate to faster database systems.
-- Upgrade your server hardware to have more memory or CPU.
-
-## Resources
-
-- [Source code for **Reduce server response times (TTFB)** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/server-response-time.js)
-- [Adaptive Serving with Network Information API](/adaptive-serving-based-on-network-quality)
diff --git a/src/site/content/en/lighthouse-performance/time-to-first-byte/time-to-first-byte.png b/src/site/content/en/lighthouse-performance/time-to-first-byte/time-to-first-byte.png
deleted file mode 100644
index 88e6edd99e3..00000000000
Binary files a/src/site/content/en/lighthouse-performance/time-to-first-byte/time-to-first-byte.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/total-byte-weight/index.md b/src/site/content/en/lighthouse-performance/total-byte-weight/index.md
deleted file mode 100644
index 177c3f77ffe..00000000000
--- a/src/site/content/en/lighthouse-performance/total-byte-weight/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-layout: post
-title: Avoid enormous network payloads
-description: |
-  Learn how to improve your web page's load time by reducing the total file
-  size of resources you serve to your users.
-date: 2019-05-02
-updated: 2020-05-29
-web_lighthouse:
-  - total-byte-weight
----
-
-Large network payloads are highly correlated with long load times.
-They also cost users money;
-for example, users may have to pay for more cellular data.
-So, reducing the total size of your page's network requests is good
-for your users' experience on your site _and_ their wallets.
-
-{% Aside %}
-To see what accessing your site costs around the world,
-check out WebPageTest's [What Does My Site Cost?](https://whatdoesmysitecost.com/)
-You can adjust the results to factor in purchasing power.
-{% endAside %}
-
-## How the Lighthouse network payload audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-shows the total size in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte) of all resources requested by your page.
-The largest requests are presented first:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="total-byte-weight.png" alt="A screenshot of the Lighthouse Avoid enormous network payloads audit">
-</figure>
-
-Based on [HTTP Archive data](https://httparchive.org/reports/state-of-the-web?start=latest#bytesTotal),
-the median network payload is between 1,700 and 1,900&nbsp;KiB.
-To help surface the highest payloads,
-Lighthouse flags pages whose total network requests exceed 5,000&nbsp;KiB.
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to reduce payload size
-
-Aim to keep your total byte size below 1,600&nbsp;KiB.
-This target is based on the amount of data that can be
-theoretically downloaded on a 3G connection
-while still achieving a [Time to Interactive](/interactive) of 10&nbsp;seconds or less.
-
-Here are some ways to keep payload size down:
-- Defer requests until they're needed.
-  See the [PRPL Pattern](/apply-instant-loading-with-prpl) for one possible approach.
-- Optimize requests to be as small as possible. Possible techniques include:
-  - [Minify and compress network payloads](/reduce-network-payloads-using-text-compression).
-  - [Use WebP instead of JPEG or PNG for your images](/serve-images-webp).
-  - [Set the compression level of JPEG images to 85](/use-imagemin-to-compress-images).
-- Cache requests so that the page doesn't re-download the resources
-  on repeat visits. (See the [Network reliability landing page](/reliable)
-  to learn how caching works and how to implement it.)
-
-## Resources
-
-[Source code for **Avoid enormous network payloads** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/total-byte-weight.js)
diff --git a/src/site/content/en/lighthouse-performance/total-byte-weight/total-byte-weight.png b/src/site/content/en/lighthouse-performance/total-byte-weight/total-byte-weight.png
deleted file mode 100644
index 59b096f9f62..00000000000
Binary files a/src/site/content/en/lighthouse-performance/total-byte-weight/total-byte-weight.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/unminified-css/index.md b/src/site/content/en/lighthouse-performance/unminified-css/index.md
deleted file mode 100644
index 0a25c2d1454..00000000000
--- a/src/site/content/en/lighthouse-performance/unminified-css/index.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Minify CSS
-description: |
-  Learn about the unminified-css audit.
-date: 2019-05-02
-updated: 2020-05-29
-web_lighthouse:
-  - unminified-css
----
-
-The Opportunities section of your Lighthouse report lists
-all unminified CSS files,
-along with the potential savings in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte)
-when these files are minified:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="unminified-css.png" alt="A screenshot of the Lighthouse Minify CSS audit">
-</figure>
-
-
-## How minifying CSS files can improve performance
-
-Minifying CSS files can improve your page load performance.
-CSS files are often larger than they need to be. For example:
-
-```css
-/* Header background should match brand colors. */
-h1 {
-  background-color: #000000;
-}
-h2 {
-  background-color: #000000;
-}
-```
-
-Can be reduced to:
-
-```css
-h1, h2 { background-color: #000000; }
-```
-
-From the perspective of the browser,
-these 2 code samples are functionally equivalent,
-but the second example uses less bytes.
-Minifiers can further improve byte efficiency by removing whitespace:
-
-```css
-h1,h2{background-color:#000000;}
-```
-
-Some minifiers employ clever tricks to minimize bytes.
-For example, the color value `#000000` can be further reduced to `#000`,
-which is its shorthand equivalent.
-
-Lighthouse provides an estimate of potential savings based
-on the comments and whitespace characters that it finds in your CSS.
-This is a conservative estimate.
-As mentioned earlier,
-minifiers can perform clever optimizations (such as reducing `#000000` to `#000`)
-to further reduce your file size.
-So, if you use a minifier,
-you may see more savings than what Lighthouse reports.
-
-## Use a CSS minifier to minify your CSS code
-
-For small sites that you don't update often,
-you can probably use an online service for manually minifying your files.
-You paste your CSS into the service's UI, and it returns a minified version of the code.
-
-For professional developers,
-you probably want to set up an automated workflow that minifies your CSS automatically
-before you deploy your updated code.
-This is usually accomplished with a build tool like Gulp or Webpack.
-
-Learn how to minify your CSS code in [Minify CSS](/minify-css).
-
-## Resources
-
-- [Source code for **Minify CSS** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/unminified-css.js)
-- [Minify CSS](/minify-css)
-- [Minify and compress network payloads](/reduce-network-payloads-using-text-compression)
diff --git a/src/site/content/en/lighthouse-performance/unminified-css/unminified-css.png b/src/site/content/en/lighthouse-performance/unminified-css/unminified-css.png
deleted file mode 100644
index 0687cdaada4..00000000000
Binary files a/src/site/content/en/lighthouse-performance/unminified-css/unminified-css.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/unminified-javascript/index.md b/src/site/content/en/lighthouse-performance/unminified-javascript/index.md
deleted file mode 100644
index cb2cff140cc..00000000000
--- a/src/site/content/en/lighthouse-performance/unminified-javascript/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-layout: post
-title: Minify JavaScript
-description: |
-  Learn about the unminified-javascript audit.
-date: 2019-05-02
-updated: 2020-06-20
-web_lighthouse:
-  - unminified-javascript
----
-
-Minifying JavaScript files can reduce payload sizes and script parse time.
-The Opportunities section of your Lighthouse report lists
-all unminified JavaScript files,
-along with the potential savings in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte)
-when these files are minified:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="unminified-javascript.png" alt="A screenshot of the Lighthouse Minify JavaScript audit">
-</figure>
-
-## How to minify your JavaScript files
-
-Minification is the process of removing whitespace and any code that is not necessary
-to create a smaller but perfectly valid code file.
-[Terser](https://github.com/terser-js/terser) is a popular JavaScript compression tool.
-webpack v4 includes a plugin for this library by default to create minified build files.
-
-## Resources
-
-- [Source code for **Minify JavaScript** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/unminified-javascript.js)
diff --git a/src/site/content/en/lighthouse-performance/unminified-javascript/unminified-javascript.png b/src/site/content/en/lighthouse-performance/unminified-javascript/unminified-javascript.png
deleted file mode 100644
index 8deecdb8e21..00000000000
Binary files a/src/site/content/en/lighthouse-performance/unminified-javascript/unminified-javascript.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/unused-css-rules/coverage.png b/src/site/content/en/lighthouse-performance/unused-css-rules/coverage.png
deleted file mode 100644
index 9a04371e5bd..00000000000
Binary files a/src/site/content/en/lighthouse-performance/unused-css-rules/coverage.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/unused-css-rules/index.md b/src/site/content/en/lighthouse-performance/unused-css-rules/index.md
deleted file mode 100644
index 75e72fd6583..00000000000
--- a/src/site/content/en/lighthouse-performance/unused-css-rules/index.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-layout: post
-title: Remove unused CSS
-description: |
-  Learn about the unused-css-rules audit.
-date: 2019-05-02
-updated: 2020-05-29
-web_lighthouse:
-  - unused-css-rules
----
-
-The Opportunities section of your Lighthouse report lists
-all stylesheets with unused CSS with a potential savings of 2 KiB or more.
-Remove the unused CSS
-to reduce unnecessary bytes consumed by network activity:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="unused-css-rules.png" alt="A screenshot of the Lighthouse Remove unused CSS audit">
-</figure>
-
-
-## How unused CSS slows down performance
-
-Using a `<link>` tag is a common way to add styles to a page:
-
-```html
-<!doctype html>
-<html>
-  <head>
-    <link href="main.css" rel="stylesheet">
-    ...
-```
-
-The `main.css` file that the browser downloads is known as an external stylesheet,
-because it's stored separately from the HTML that uses it.
-
-By default, a browser must download, parse, and process all external stylesheets
-that it encounters before it can display, or render, any content to a user's screen.
-It wouldn't make sense for a browser to attempt to display content
-before the stylesheets have been processed,
-because the stylesheets may contain rules that affect the styling of the page.
-
-Each external stylesheet must be downloaded from the network.
-These extra network trips can significantly increase the time
-that users must wait before they see any content on their screens.
-
-Unused CSS also slows down a browser's construction of the
-[render tree](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction).
-The render tree is like the DOM tree, except that it also includes the styles for each node.
-To construct the render tree, a browser must walk the entire DOM tree, and check which CSS rules apply to each node.
-The more unused CSS there is,
-the more time that a browser might potentially need to spend calculating the styles for each node.
-
-## How to detect unused CSS
-
-The Coverage tab of Chrome DevTools can help you discover critical and uncritical CSS.
-See [View used and unused CSS with the Coverage tab](https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage).
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="coverage.png" alt="Chrome DevTools: Coverage tab">
-  <figcaption class="w-figcaption">
-    Chrome DevTools: Coverage tab.
-  </figcaption>
-</figure>
-
-You can also extract this information from Puppeteer.
-See [page.coverage](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagecoverage).
-
-## Inline critical CSS and defer non-critical CSS
-
-Similar to inlining code in a `<script>` tag,
-inline critical styles required for the first paint
-inside a `<style>` block at the `head` of the HTML page.
-Then load the rest of the styles asynchronously using the `preload` link.
-
-Consider automating the process of extracting and inlining "Above the Fold" CSS
-using the [Critical tool](https://github.com/addyosmani/critical/blob/master/README.md).
-
-Learn more in [Defer non-critical CSS](/defer-non-critical-css).
-
-## Resources
-
-- [Source code for **Remove unused CSS** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/unused-css-rules.js)
diff --git a/src/site/content/en/lighthouse-performance/unused-css-rules/unused-css-rules.png b/src/site/content/en/lighthouse-performance/unused-css-rules/unused-css-rules.png
deleted file mode 100644
index 5be9c8a16e6..00000000000
Binary files a/src/site/content/en/lighthouse-performance/unused-css-rules/unused-css-rules.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/unused-javascript/index.md b/src/site/content/en/lighthouse-performance/unused-javascript/index.md
deleted file mode 100644
index 2efca301d68..00000000000
--- a/src/site/content/en/lighthouse-performance/unused-javascript/index.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: post
-title: Remove unused JavaScript
-description: |
-  Learn how to pass Lighthouse's "Remove unused JavaScript" audit.
-web_lighthouse:
-  - unused-javascript
-date: 2020-07-07
----
-
-Unused JavaScript can slow down your page load speed:
-
-* If the JavaScript is [render-blocking][crp], the browser must
-  download, parse, compile, and evaluate the script before it can proceed
-  with all of the other work that's needed for rendering the page.
-* Even if the JavaScript is asynchronous (i.e. not render-blocking), the
-  code competes for bandwidth with other resources while it's downloading,
-  which has significant performance implications. Sending unused code over
-  the network is also wasteful for mobile users who don't have unlimited
-  data plans.
-
-
-## How the unused JavaScript audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags every JavaScript file with more than 20 kibibytes of unused code:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="remove-unused-javascript.jpg"
-       alt="A screenshot of the audit.">
-  <figcaption class="w-figcaption">
-    Click a value in the <b>URL</b> column to open the script's
-    source code in a new tab.
-  </figcaption>
-</figure>
-
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to remove unused JavaScript
-
-### Detect unused JavaScript
-
-The [Coverage tab][coveragetab] in Chrome DevTools can give you a line-by-line
-breakdown of unused code.
-
-The [`Coverage`][coverageclass] class in Puppeteer can help you automate the
-process of detecting unused code and extracting used code.
-
-### Build tool for support for removing unused code
-
-Check out the following [Tooling.Report][tr] tests to find out if your bundler
-supports features that make it easier to avoid or remove unused code:
-
-* [Code Splitting][split]
-* [Unused Code Elimination][eliminate]
-* [Unused Imported Code][import]
-
-## Resources
-
-* [Source code for the **Remove unused code** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/unused-javascript.js)
-* [Remove unused code](/remove-unused-code/)
-* [Adding interactivity with JavaScript][crp]
-* [Code Splitting][split]
-* [Dead Code Elimination][eliminate]
-* [Dead Imported Code][import]
-* [Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools][coveragetab]
-* [class: `Coverage`][coverageclass]
-
-[crp]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript
-[coveragetab]: https://developers.google.com/web/tools/chrome-devtools/coverage
-[coverageclass]: https://pptr.dev/#?product=Puppeteer&version=v4.0.0&show=api-class-coverage
-[split]: https://bundlers.tooling.report/code-splitting/
-[eliminate]: https://bundlers.tooling.report/transformations/dead-code/
-[import]: https://bundlers.tooling.report/transformations/dead-code-dynamic/
-[tr]: https://tooling.report
diff --git a/src/site/content/en/lighthouse-performance/unused-javascript/remove-unused-javascript.jpg b/src/site/content/en/lighthouse-performance/unused-javascript/remove-unused-javascript.jpg
deleted file mode 100644
index 0b6c19e01b3..00000000000
Binary files a/src/site/content/en/lighthouse-performance/unused-javascript/remove-unused-javascript.jpg and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/user-timings/index.md b/src/site/content/en/lighthouse-performance/user-timings/index.md
deleted file mode 100644
index ce626e5259e..00000000000
--- a/src/site/content/en/lighthouse-performance/user-timings/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: User Timing marks and measures
-description: |
-  Learn how the User Timing API can help you get real-world performance data
-  for your web page.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - user-timings
----
-
-## What's the User Timing API?
-
-Making your web app fast and responsive is crucial for a good user experience.
-The first step in improving performance is identifying where time is being spent.
-
-The [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)
-gives you a way to measure your app's JavaScript performance.
-You do that by inserting API calls in your JavaScript and then
-extracting detailed timing data that you can use to optimize your code.
-You can access those data from JavaScript using the API
-or by viewing them on your [Chrome DevTools Timeline Recordings](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference).
-
-Check out the [HTML5 Rocks page about the User Timing API](https://www.html5rocks.com/en/tutorials/webperformance/usertiming/)
-for a quick introduction to using it.
-
-## How Lighthouse reports User Timing data
-
-When your app uses the User Timing API to add marks (that is, time stamps)
-and measures (that is, measurements of the elapsed time between marks),
-you'll see them in your
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) report:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="user-timings.png" alt="A screenshot of the Lighthouse User Timing marks and measures audit">
-</figure>
-
-Lighthouse extracts User Timing data from
-[Chrome's Trace Event Profiling Tool](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool).
-
-This audit is not structured as a pass or fail test.
-It's just an opportunity to discover a useful API that can help you measure your app's performance.
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## Resources
-
-- [Source code for **User Timing marks and measures** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/user-timings.js)
-- [User Timing API (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)
-- [User Timing API (HTML5 Rocks)](https://www.html5rocks.com/en/tutorials/webperformance/usertiming/)
diff --git a/src/site/content/en/lighthouse-performance/user-timings/user-timings.png b/src/site/content/en/lighthouse-performance/user-timings/user-timings.png
deleted file mode 100644
index cd0390979d7..00000000000
Binary files a/src/site/content/en/lighthouse-performance/user-timings/user-timings.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/cache-control-header.png b/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/cache-control-header.png
deleted file mode 100644
index ed6b20dfb06..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/cache-control-header.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/index.md b/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/index.md
deleted file mode 100644
index f22ff25eb4d..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/index.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-layout: post
-title: Serve static assets with an efficient cache policy
-description: |
-  Learn how caching your web page's static resources can improve performance
-  and reliability for repeat visitors.
-date: 2019-05-02
-updated: 2019-10-04
-web_lighthouse:
-  - uses-long-cache-ttl
----
-
-HTTP caching can speed up your page load time on repeat visits.
-
-When a browser requests a resource,
-the server providing the resource can tell the browser
-how long it should temporarily store or *cache* the resource.
-For any subsequent request for that resource,
-the browser uses its local copy rather than getting it from the network.
-
-## How the Lighthouse cache policy audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags all static resources that aren't cached:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-long-cache-ttl.png" alt="A screenshot of the Lighthouse Serve static assets with an efficient cache policy audit">
-</figure>
-
-Lighthouse considers a resource cacheable
-if all the following conditions are met:
-
-- The resource is a font, image, media file, script, or stylesheet.
-- The resource has a `200`, `203`, or `206` [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status).
-- The resource doesn't have an explicit no-cache policy.
-
-When a page fails the audit,
-Lighthouse lists the results in a table with three columns:
-
-<div class="w-table-wrapper">
-  <table>
-    <tbody>
-      <tr>
-        <td><strong>URL</strong></td>
-        <td>The location of the cacheable resource</td>
-      </tr>
-      <tr>
-        <td><strong>Cache TTL</strong></td>
-        <td>The current cache duration of the resource</td>
-      </tr>
-      <tr>
-        <td><strong>Size</strong></td>
-        <td>An estimate of the data your users would save if the flagged resource had been cached</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-performance/scoring.njk' %}
-
-## How to cache static resources using HTTP caching
-
-Configure your server to return the `Cache-Control` HTTP response header:
-
-```js
-Cache-Control: max-age=31536000
-```
-
-The `max-age` directive tells the browser how long it should cache the resource in seconds.
-This example sets the duration to `31536000`, which corresponds to 1 year:
-60&nbsp;seconds × 60&nbsp;minutes × 24&nbsp;hours × 365&nbsp;days = 31536000&nbsp;seconds.
-
-When possible, cache immutable static assets for a long time,
-such as a year or longer.
-
-{% Aside %}
-One risk of long cache durations is that your users won't see updates to static files.
-You can avoid this issue by configuring your build tool
-to embed a hash in your static asset filenames so that each version is unique,
-prompting the browser to fetch the new version from the server.
-(To learn how to embed hashes using webpack, see webpack's
-[Caching](https://webpack.js.org/guides/caching/) guide.)
-{% endAside %}
-
-Use `no-cache` if the resource changes and freshness matters,
-but you still want to get some of the speed benefits of caching.
-The browser still caches a resource that's set to `no-cache`
-but checks with the server first to make sure that the resource is still current.
-
-A longer cache duration isn't always better.
-Ultimately,
-it's up to you to decide what the optimal cache duration is for your resources.
-
-There are many directives for customizing how the browser caches different resources.
-Learn more about caching resources in
-[The HTTP cache: your first line of defense guide](/http-cache)
-and [Configuring HTTP caching behavior codelab](/codelab-http-cache).
-
-## How to verify cached responses in Chrome DevTools
-
-To see which resources the browser is getting from its cache,
-open the **Network** tab in Chrome DevTools:
-
-{% Instruction 'devtools-network', 'ol' %}
-
-The **Size** column in Chrome DevTools can help you verify that a resource has been cached:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="size.png" alt="The Size column.">
-</figure>
-
-Chrome serves the most requested resources from the memory cache, which is very fast,
-but is cleared when the browser is closed.
-
-To verify a resource's `Cache-Control` header is set as expected,
-check its HTTP header data:
-
-1. Click the URL of the request, under the **Name** column of the Requests table.
-1. Click the **Headers** tab.
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="cache-control-header.png" alt="Inspecting the Cache-Control header via the Headers tab">
-  <figcaption class="w-figcaption">
-    Inspecting the <code>Cache-Control</code> header via the <b>Headers</b> tab.
-  </figcaption>
-</figure>
-
-## Resources
-
-- [Source code for **Serve static assets with an efficient cache policy** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js)
-- [Cache-Control specification](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9)
-- [Cache-Control (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)
diff --git a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/size.png b/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/size.png
deleted file mode 100644
index 82e5968e05e..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/size.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/uses-long-cache-ttl.png b/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/uses-long-cache-ttl.png
deleted file mode 100644
index 41dc324c4f5..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-long-cache-ttl/uses-long-cache-ttl.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-optimized-images/index.md b/src/site/content/en/lighthouse-performance/uses-optimized-images/index.md
deleted file mode 100644
index 4fed365cd03..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-optimized-images/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-layout: post
-title: Efficiently encode images
-description: |
-  Learn about the uses-optimized-images audit.
-date: 2019-05-02
-updated: 2020-06-20
-web_lighthouse:
-  - uses-optimized-images
----
-
-The Opportunities section of your Lighthouse report lists
-all unoptimized images, with potential savings in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte).
-Optimize these images so that the page loads faster and consumes less data:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-optimized-images.png" alt="A screenshot of the Lighthouse Efficiently encode images audit">
-</figure>
-
-
-## How Lighthouse flags images as optimizable
-
-Lighthouse collects all the JPEG or BMP images on the page,
-sets each image's compression level to 85,
-and then compares the original version with the compressed version.
-If the potential savings are 4KiB or greater, Lighthouse flags the image as optimizable.
-
-## How to optimize images
-
-There are many steps you can take to optimize your images, including:
-
-- [Using image CDNs](/image-cdns/)
-- [Compressing images](/use-imagemin-to-compress-images)
-- [Replacing animated GIFs with video](/replace-gifs-with-videos)
-- [Lazy loading images](/use-lazysizes-to-lazyload-images)
-- [Serving responsive images](/serve-responsive-images)
-- [Serving images with correct dimensions](/serve-images-with-correct-dimensions)
-- [Using WebP images](/serve-images-webp)
-
-## Optimize images using GUI tools
-
-Another approach is to run your images through an optimizer
-that you install onto your computer and run as a GUI.
-For example,
-with [ImageOptim](https://imageoptim.com/mac) you drag and drop images into its UI,
-and then it automatically compresses the images without compromising quality noticeably.
-If you're running a small site and can handle manually optimizing all images,
-this option is probably good enough.
-
-[Squoosh](https://squoosh.app/) is another option.
-Squoosh is maintained by the Google Web DevRel team.
-
-## Resources
-
-- [Source code for **Efficiently encode images** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js)
diff --git a/src/site/content/en/lighthouse-performance/uses-optimized-images/uses-optimized-images.png b/src/site/content/en/lighthouse-performance/uses-optimized-images/uses-optimized-images.png
deleted file mode 100644
index 7f39b9fa7a2..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-optimized-images/uses-optimized-images.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preconnect/index.md b/src/site/content/en/lighthouse-performance/uses-rel-preconnect/index.md
deleted file mode 100644
index a44df393387..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-rel-preconnect/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: post
-title: Preconnect to required origins
-description: |
-  Learn about the uses-rel-preconnect audit.
-date: 2019-05-02
-updated: 2020-05-06
-web_lighthouse:
-  - uses-rel-preconnect
----
-
-The Opportunities section of your Lighthouse report lists all key requests
-that aren't yet prioritizing fetch requests with `<link rel=preconnect>`:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-rel-preconnect.png" alt="A screenshot of the Lighthouse Preconnect to required origins audit">
-</figure>
-
-## Browser compatibility
-
-`<link rel=preconnect>` is supported on most browsers. See
-[Browser compatibility](https://developer.mozilla.org/docs/Web/HTML/Link_types/preconnect#Browser_compatibility).
-
-## Improve page load speed with preconnect
-
-Consider adding `preconnect` or `dns-prefetch` resource hints
-to establish early connections to important third-party origins.
-
-`<link rel="preconnect">` informs the browser that your page intends
-to establish a connection to another origin,
-and that you'd like the process to start as soon as possible.
-
-Establishing connections often involves significant time in slow networks,
-particularly when it comes to secure connections, as it may involve DNS lookups,
-redirects, and several round trips to the final server that handles the user's request.
-
-Taking care of all this ahead of time can make your application feel much snappier
-to the user without negatively affecting the use of bandwidth.
-Most of the time in establishing a connection is spent waiting, rather than exchanging data.
-
-Informing the browser of your intention is as simple as adding a link tag to your page:
-
-`<link rel="preconnect" href="https://example.com">`
-
-This lets the browser know that the page intends
-to connect to `example.com` and retrieve content from there.
-
-Bear in mind that while `<link rel="preconnect">` is pretty cheap,
-it can still take up valuable CPU time, particularly on secure connections.
-This is especially bad if the connection isn't used within 10 seconds,
-as the browser closes it, wasting all of that early connection work.
-
-In general,
-try to use `<link rel="preload">`,
-as it's a more comprehensive performance tweak,
-but do keep `<link rel="preconnect">` in your toolbelt for the edge cases like:
-
-- [Use-case: Knowing Where From, but not What You're Fetching](https://developers.google.com/web/fundamentals/performance/resource-prioritization#use-case_knowing_where_from_but_not_what_youre_fetching)
-- [Use-case: Streaming Media](https://developers.google.com/web/fundamentals/performance/resource-prioritization#use-case_knowing_where_from_but_not_what_youre_fetching)
-
-`<link rel="dns-prefetch">` is another `<link>` type related to connections.
-This handles the DNS lookup only,
-but it's got wider browser support, so it may serve as a nice fallback.
-You use it the exact same way:
-
-```html
-<link rel="dns-prefetch" href="https://example.com">.
-```
-
-## Resources
-
-- [Source code for **Preconnect to required origins** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/uses-rel-preconnect.js)
-- [Resource Prioritization–Getting the Browser to Help You](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect)
-- [Establish network connections early to improve perceived page speed](/preconnect-and-dns-prefetch/)
-- [Link types: preconnect](https://developer.mozilla.org/docs/Web/HTML/Link_types/preconnect#Browser_compatibility)
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preconnect/uses-rel-preconnect.png b/src/site/content/en/lighthouse-performance/uses-rel-preconnect/uses-rel-preconnect.png
deleted file mode 100644
index 56067777802..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-rel-preconnect/uses-rel-preconnect.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preload/after.png b/src/site/content/en/lighthouse-performance/uses-rel-preload/after.png
deleted file mode 100644
index 3d4ee36fead..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-rel-preload/after.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preload/before.png b/src/site/content/en/lighthouse-performance/uses-rel-preload/before.png
deleted file mode 100644
index e3a4fe058ed..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-rel-preload/before.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preload/index.md b/src/site/content/en/lighthouse-performance/uses-rel-preload/index.md
deleted file mode 100644
index e3e61c84709..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-rel-preload/index.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-layout: post
-title: Preload key requests
-description: |
-  Learn about the uses-rel-preload audit.
-date: 2019-05-02
-updated: 2020-06-04
-web_lighthouse:
-  - uses-rel-preload
----
-
-The Opportunities section of your Lighthouse report
-flags the third level of requests in your critical request chain as preload candidates:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-rel-preload.png" alt="A screenshot of the Lighthouse Preload key requests audit">
-</figure>
-
-## How Lighthouse flags determines preload candidates
-
-Suppose your page's
-[critical request chain](/critical-request-chains) looks like this:
-
-```html
-index.html
-|--app.js
-   |--styles.css
-   |--ui.js
-```
-
-Your `index.html` file declares `<script src="app.js">`. When  `app.js` runs , it calls
-`fetch()` in order to download `styles.css` and `ui.js`. The page doesn't appear complete
-until those last 2 resources are downloaded, parsed, and executed.
-Using the example above, Lighthouse would flag `styles.css` and `ui.js` as candidates.
-
-The potential savings are based on how much earlier the browser would be able
-to start the requests if you declared preload links.
-For example, if `app.js` takes 200ms to download, parse, and execute,
-the potential savings for each resource is 200ms since `app.js` is no longer a bottleneck for each of the requests.
-
-Preloading requests can make your pages load faster.
-
-<figure>
-  <img src="before.png"
-       alt="Without preload links, styles.css and ui.js are requested only after
-            app.js has been downloaded, parsed, and executed."/>
-  <figcaption>
-    Without preload links, <code>styles.css</code> and
-    <code>ui.js</code> are requested only after <code>app.js</code> has been downloaded,
-    parsed, and executed.
-  </figcaption>
-</figure>
-
-The problem here is that the browser only becomes aware
-of those last 2 resources after it downloads, parses, and executes `app.js`.
-But you know that those resources are important and
-should be downloaded as soon as possible.
-
-## Declare your preload links
-
-Declare preload links in your HTML to instruct the browser to download key resources
-as soon as possible.
-
-```html
-<head>
-  ...
-  <link rel="preload" href="styles.css" as="style">
-  <link rel="preload" href="ui.js" as="script">
-  ...
-</head>
-```
-
-<figure>
-  <img src="after.png"
-       alt="With preload links, styles.css and ui.js are requested at the same time
-            as app.js."/>
-  <figcaption>
-    With preload links, <code>styles.css</code> and
-    <code>ui.js</code> are requested at the same time as <code>app.js</code>.
-  </figcaption>
-</figure>
-
-See also [Preload critical assets to improve loading speed](/preload-critical-assets)
-for more guidance.
-
-### Browser compatibility
-
-As of June 2020 preloading is supported in Chromium-based browsers. See
-[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Browser_compatibility)
-for updates.
-
-### Build tool support for preloading {: #tools }
-
-See [Tooling.Report's Preloading Assets](https://bundlers.tooling.report/non-js-resources/html/preload-assets/?utm_source=web.dev&utm_campaign=lighthouse&utm_medium=uses-rel-preload)
-page.
-
-## Resources
-
-- [Source code for **Preload key requests** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/uses-rel-preload.js)
diff --git a/src/site/content/en/lighthouse-performance/uses-rel-preload/uses-rel-preload.png b/src/site/content/en/lighthouse-performance/uses-rel-preload/uses-rel-preload.png
deleted file mode 100644
index 7dae38c724d..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-rel-preload/uses-rel-preload.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-responsive-images/index.md b/src/site/content/en/lighthouse-performance/uses-responsive-images/index.md
deleted file mode 100644
index 9d1ed5b89c8..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-responsive-images/index.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: post
-title: Properly size images
-description: |
-  Learn about the uses-responsive-images audit.
-date: 2019-05-02
-updated: 2020-06-20
-web_lighthouse:
-  - uses-responsive-images
----
-
-The Opportunities section of your Lighthouse report lists all images in your page
-that aren't appropriately sized,
-along with the potential savings in [kibibytes (KiB)](https://en.wikipedia.org/wiki/Kibibyte).
-Resize these images to save data and improve page load time:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-responsive-images.png" alt="A screenshot of the Lighthouse Properly size images audit">
-</figure>
-
-
-## How Lighthouse calculates oversized images
-
-For each image on the page,
-Lighthouse compares the size of the rendered image against the size of the actual image.
-The rendered size also accounts for device pixel ratio.
-If the rendered size is at least 4KiB smaller than the actual size,
-then the image fails the audit.
-
-## Strategies for properly sizing images
-
-Ideally, your page should never serve images that are larger than the version
-that's rendered on the user's screen.
-Anything larger than that just results in wasted bytes and slows down page load time.
-
-The main strategy for serving appropriately sized images is called "responsive images".
-With responsive images, you generate multiple versions of each image,
-and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.
-See [Serve responsive images](/serve-responsive-images) to learn more.
-
-[Image CDNs](/image-cdns/) are another main strategy for serving appropriately sized images.
-You can think of image CDNs like web service APIs for transforming images.
-
-Another strategy is to use vector-based image formats, like SVG.
-With a finite amount of code, an SVG image can scale to any size.
-See [Replace complex icons with SVG](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#replace_complex_icons_with_svg) to learn more.
-
-Tools like
-[gulp-responsive](https://www.npmjs.com/package/gulp-responsive) or
-[responsive-images-generator](https://www.npmjs.com/package/responsive-images-generator)
-can help automate the process of converting an image into multiple formats.
-There are also image CDNs which let you generate multiple versions,
-either when you upload an image, or request it from your page.
-
-## Resources
-
-- [Source code for **Properly size images** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js)
-- [Serve images with correct dimensions](/serve-images-with-correct-dimensions)
diff --git a/src/site/content/en/lighthouse-performance/uses-responsive-images/uses-responsive-images.png b/src/site/content/en/lighthouse-performance/uses-responsive-images/uses-responsive-images.png
deleted file mode 100644
index 7d451accfdd..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-responsive-images/uses-responsive-images.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-text-compression/content-encoding.svg b/src/site/content/en/lighthouse-performance/uses-text-compression/content-encoding.svg
deleted file mode 100644
index 93876a06ed0..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-text-compression/content-encoding.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" standalone="yes"?>
-
-<svg version="1.1" viewBox="0.0 0.0 1182.0 844.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l1182.0 0l0 844.0l-1182.0 0l0 -844.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l1182.0 0l0 844.0l-1182.0 0z" fill-rule="evenodd"></path><path fill="#000000" fill-opacity="0.0" d="m15.493439 16.0l1146.1417 0l0 818.39624l-1146.1417 0z" fill-rule="evenodd"></path><g transform="matrix(0.9696629921259842 0.0 0.0 0.969663779527559 15.493438320209973 16.0)"><clipPath id="p.1"><path d="m-1.7763568E-15 0l1182.0 0l0 844.0l-1182.0 0z" clip-rule="evenodd"></path></clipPath><image clip-path="url(#p.1)" fill="#000" width="1182.0" height="844.0" x="0.0" y="0.0" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJ4AAANMCAYAAAAdQmdAAACAAElEQVR42uydC3wU1dn/e9G2KiJeqlZbbb3WeqlF1GK11rYU3+qr//rWlnoh4q28gPZVhAj1xUIDIhSBAioRCUJUAkKAkJBwMRfIPSQkxryyqIGaNIaWIGDUppHnP2d2ZvfM7Jn77P33fD7fj5jdmZ2dPXN2znef85wvfAGBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCIQaXwQAAAAAAAAAhyAQCAQCkgcAAAAAAAAAIMMQCAQC8ggAAAAAAAAAAKQVAoGAVAIAAAAAAAAAADmFQCAQEEsAAAAAAAAAACCmEAgEBBMAAAAAAAAAAAgpBAIByQQAAAAAAAAAAEBGIRCQTAAAAAAAAAAAAGQUAoGAaAIAAAAAAAAAACCiEAiIJgAAAAAAAAAAACIKgYBsAgAAAAAAAAAAIKEQCMgmAAAAAAAAAAAAQEIhEJBNqcGXAAAAAAAAAMAhGEtBQiEQkE0QQAAAAAAAAAAA4QUJhUBAOEEgAQAAAAAAAACAsIKAQiDSWjahwwYAAAAAAAAAyClIKAQCwglyCQAAAAAAAAAApBQEFALCCYIJAAAAAAAAAACEFAQUAgHRBAAAAAAAAAAApJSIQiAgnCCZEoIvAwAAAAAAAFIWjHkgoxAICKc0Ek344gMAAAAAAABAhkFEQUAhIJwgmyCQAAAAAAAAAADCKuUkFAKRVsIJUgkAAAAAAAAAQCrLKQgoBKRTGsomdMgAAAAAAAAAACmV7hIKgYBwgmQCAAAAAAAAAJBiMgoCCgHplKSyKRk7umMAAAAAAAAAIEWBjEoeCYVAJI1wSlfJhC8VAAAAAAAAAEhNYZVOEgqBSFjplKqiCZ0+AAAAAAAAAEBQxVJEQT4hIJxiJJwglwAAAAAAAAAAJLKUgoBCQDolmXCCYApyLAAAAAAAAAAkCRBS0ZVQkE+ItBFOySSbII0AAAAAAAAAAPIqXjIq1SQUAtIp6aRTMkomfBkAAAAAAAAAQHoIqkSWUJBPiJSSTokomyCWvPMVAAAAAAAAQNoAMZU4IirZBRQC0illhVOqCSZ8+QEAAAAAAAAgvpJTSKW7gEJAOCWEcEoU2QSBBAAAAAAAAAAQVtGSUYkkoSCgEGkhneItmyCW3PFVAAAAAAAAQMoAMRUfEZUIAgryCZGQ0inewineogmyBwAAAAAAAABSS4LFW0Slk4BCQDolpHCKl2iCRAIAAAAAAACA9JRV8RJR6SCgEJBOvkunWAqneEumRO+UvwYAAAAAAAAAPpMuciqWEipeAgryCZFU0ilWwikeogmCCAAAAAAAAACSW2jFQ0Qlg4CCfEKkZJZTtGVTIggmfHEAAAAAAAAAQOJLqliJqGhLqGTIfkKkqXhKFeEUa8kUy071OAAAAAAAAABIcpJJTEVTQiWygIJ4gnBKGOkUTeEULdmUKIIJXzgAAAAAAAAAEB9ZFQsRFS0JFSsBhcwnSKekynKKhnCKpmxKRqF0PAAAAAAAAAAkCMkoqBJBQkVLQCH7CREX8ZRoWU5+yqZoSyZIIwAAAAAAAABILnkVbRnlp4RKp+wnBKRT1LOcYi2cYimZ4tVBnwAAAAAAAAAAMSYZBVU0RFSiCyjIJ0TS13OKtXDyUzbFWy7hywoAAAAAAAAAgRVfKRVrCRUPAYVpdxBPCSWd/M5y8kM4+SWbYiGYYt1JDwAAAAAAAACAOJEskspvEeWHhPJLQEU7+wniCdIpLtLJD+HkR3aTX6IpHnIJX1IAAAAAAAAA4J/AipaM8iqh/MiCinf2E+QTxFNCZTlFI7vJrkzyUxo57ShPjAIDAQAAAAAAACDJicZYKVpiy6uwshJS0RZQyZj9hEiDTKdYZTm5FU7HKx3FSRInS5wicSrHaRZ83QanO+AMD5yZIHwDAAAAAAAAAHQkynjFy5jLydjOzljRarzJj01PUcasJylj2OOjJKDimf2EzCeIp7hJJy9ZTmbC6SSlQ/i2xCUSV0pcLXGtxA8lhppwnQU/ssn1DrnBR34MAAAAAAAAAEmOn2Mkp+Mzu+M+q/Gj2djzh8oY9WplzHqJMoY9XRnTuhVQscp+ShT5hEhw6RSvek5+CydVOg1Q7PH5t956638uWLDguU2bNpU0NDTsfuuttz5ubW0lAAAAAAAAAAAgUWBjVTZmZWNXNoZlY1k2plXGtgO+YF4PKloCCtPuIJ0SWjpFa1qdmXA6Tpmve+axxx77/eeff35uTU1NMzoxAAAAAAAAAADJBBvLsjEtG9sqUwhP5OpA+S2g/Mh+gnyCeEp66WRndTpmgc+8/vrrf7J69epV6KwAAAAAAAAAACQzbGzLxriKfBrwBXur4aWzfEKkuXSKRpaTCltB4OvHHnvslZBOAAAAAAAAAABSST6xsa5SsPyEL1ivfhet7CfIJ0inuBYRj2WW09d0HKcUXbtg0aJF89AxAQAAAAAAAABIJdhYl415lbHvcYJxcbJnP0E+QTxFRTp5FU6qdGLG94xbbrnlNtR0AgAAAAAAAACQijWf2JiXjX2VMfBxBmNkvwSUV/kE8QTpFPdMJ7+kE2OgxHdY5X90SAAAAAAAAAAAUhE25mVjX2UMfFwSyKcvQz5hBbtoZjr5NbXOTDgxjpcYJHFpUVHRZnRGAAAAAAAAAABSETbmZWNfZQx8vG5sbFdAxbruE1a6Q6ZTTKWTV+Gkl07qNLtTJQY3NDTsRmcEAAAAAAAAACAVYWNeNvZVxsAnCMbHX4uigMK0O4inlJdOxwk4Xl3NTuLat95662N0RgAAAAAAAAAAUhE25mVjX251u+MNxsqQTxBPCS2eYiWdvAqn4znxdLrEddG8wNs2baLds56ldx9+kN6743Z6/xc/k2H/Zn9jj7HnxKsDerumgHYXT6V3V4+gd5f/hN5bepUM+zf7G3uMPSdex7e+voAmvzmVbisYQUPeuIkuyhsiw/7N/sYeY8/BlwkAAAAAAAAAGMPGvsoY+ATd2NhvARVv+QTxlKbFxOMtnY4XMEC56H4UFaFTUkx7HvsDvX/Tj+nI7b+k/hG/pv57f0f9990ThP1b+ht7jD2HPZdtEzPhVFtIe9Y+QO8tuZwOrx1MnxcPpc+33UBHy26UYf9mf2OPseew57JtYnV8G+oL6e6iB+nclVfQBZuvpct23ERX1g6jqxpulmH/Zn9jj7HnsOeybfCFAgAAAAAAAABC8fQjZQw8wGCMDPkEAYVMJxvS6Tgb0ukEhQHKcpLX+31B737xBXpv+DD67Ne3U/8D91L/QxnU/6AB7DHpOey5bBu2bbQ7nHe2zaV3c4bQZwXX0NGKm+jojp/S0e0GsMek57Dnsm3YttE+vlkV8+jivKvpu6XX09WNv6Rrdt1K1zQpNCqo/y89xp7Dnsu2YdviS8VfWnZV0nP/O4kyMx+nxau24pwkKRWFr9ETf3iCHs/8C1XuakH7A44/h2czM6U29Ad6ee2b6MsA+lCcE9z34P3j2kxO8XS9MgYewI2Lj3eR/YTMJ4inmIqneEknN1lOJ+g4MRriafesWXTwluHUf89vtcLpgZFieAElbcO2ZfuIVmfDps4dXPV9+nzr9VrhVGEAJ6DYNmxbto9oHR+bOnde0RD6fvXPw8Kp8Va6euctQkISSnou24Zty/YRvbnRTfTihJF0xdCf0c033xzBddddJ/33dpr457lUWFqZEl9QTbUlNPySS+gSiVHPrEz7L+zmnWU0+uYf048Fn78ZQ4deQX96OX7TQlc+87D8GV5yyY20qbYJ7S8FKXo5SzpPQ+imOyZQVUuL6+dYfQ4jp76OvgykHcnahybsd2lTGT0k3TMNkfqj+XlbU7qvcNvvpmpf6fdnj2vTtXg6UTA+9iP7KdHkE8RTAoundJBOA5SL7Uw/xdM7L74QlE733W0gnO7VIRBQ0rZsH+9EIfPp/7bNk8WRPJ2OF07lNwUp06H+nRdQ0rZsH2xffh/f7Ir5sjgaXD9cK5waLOAEFNuW7YPtKzriaSdN+dU1yhecNTc/9Gcqq29ObvFUX0K3Ke/nYQzWpBuyTXSjzc9fz8ipuXE77jXP/UE5juFUkkziyXP7a6FlMx+nO+64gx6euIB2vvWWy+ckesHQJprz4A3yeRo8/I9UJxjc2HlOKvcD6MtAOvahiUr11hWh78YXCipStq8w7ncT93sn2n2l3589rk1X4ulMZSw8APIJ4indpNNXXEonO7Wc9MJJZaBy0d3gS82kzZvlouFyplOEdLqX+u83gBdQ6nbSPti+2D79q+lUJBcNlzOd9NKpzAKdfGL7YPti+/Tr+DY2bJKLhsuZTiLpVG+AQD6xfbB9sX1GQzxN5cTTA4+Op0x5+skT8n/HPXwfDYkQDjfS6jdrIZ5SasrR4/QH5TNXefyRe0Kf+RVDb9E8FmwbD8c1ZT1dxRO7Zv84fLCFkLF+TjJkD9ypnKfRc/JcPwfiCQAMbmPBxheeVM7nbQl3Pv3sK4z63UT+3ol2X+n3Z49r07F4ukEZAw/UjY3N5JMdAeVlxTvIJ0yv8108RbOek50spwFctpOv4okVB//0jtvD0+vsSCcj+STtg+2L7dOvToYVB/90w9Xh6XU66fR5qcSbOkoN5JO0D7Yvtk+/jo8VB7/4zR8Fp9eJpFPdL+nqWh3sbyL5JO2D7YvtM5ri6ZpfTaUmwS9ULbvqaOWLf9bJpzupbGczBmspzK7GraHzNHrOGxg0JYx4auKu2SnCX5XtPCeZsgeWbKx0/RyIJwAwuI1lhmYi9rl+9hVG/W4if+9Es6+MxmePa9OTeDrRRD6d4IN8+qoP8gn1nlDXKWmk0wCBdFLF0zckfuz1Am4rKab2G28ICiQz6TRKh5l8kv6f7bPNh5Xu2moL6f2XLg0WEjeTTtt0mMknaV9sn20+rHRX0FBI57x2WbCQeJOxdBpSo8VQPjUFC46zfbJ9R0s8Wf1CVfvmmtAceSsZsauhita/8TotW7ZM5rWVa6myrjHy9Zt3UtWOHbRDokrweEh+NdbJz9mxo0oox+y+npMbELbPjW/khfb5Sm4ebamoMXx+Y12VfIyVtQ2htPOKrYW0cuVqypf280ruG1RRs9Oe9HHwftjr1EivW759O+1sfkv+/7KSQnr91VflbQu2uqvNxWoiOL1Rc3rOvGxr58asvqZCOvfqeVxBa9cXU21DS8LdAO+qq5Q+7zxaoRznhk1vCtp5C9VV7aDt20vowaFXKJloD9JW5frZUVVn8znhm2X12qtTipcG212edJ7W02vSseQLjyOyD3mzZAPl5r6itNXVtKWsKia/INt5Tk3FFnpNcGzscxhu2b6D1/AKpU3Kn01JmfCcNNRWmfZRKuzzMe7v7L+e/b6M7bM4dA4YawuKQ595dPsyZ+/HaV8WjbbHfmjZtG6V0gflyueqtlG9PmqVz7iGWhKgD/R63PYGt04/Q/tThtl+X+P2u7Zgi2m7dNue1WtuR1WDpp9j27766irpHNfp7jdqqXj92tB7ttMPirKAQn1CVZ3Fcbl53Htfob5P9fpZtW6Tct057Zvtf+/41d6dtgM7faXb/sRe5q2z9q65NuubIvpCdk9YUbvTtN2o/bd6fxE8x29QbcRrOr+mElA8/VgZAw/kxsUDHGQ/JbN8gnhKgyl2dms6eZVOVllOPCf5JZ52z3qWjtz+S122k4V0MpNPStYT2yfbtx8FxQ+vHRzOdjKTTlt/EsRMPilZT2yffhQaZ8XAL9h8bTjbyYZ0MpNPatYT26ffhcb14snql5ryNX/lsp7uprKm5ohffl5b+JRhTaAnnntFc2NUXfRy6LEbHpxveDOfO/XO0PMW5Je7fj07NyDBff7JcJ/D7nkqos6VNsX8aaqqKqEM5QYs8phyDW8O3bwf/tfHWctzaZxyHCp3uqzD5OQXQjfnzOu2ZoOm5voKmslNFdQzee7yuP0ay5/Xxxa8avh5XzE0g4q279RsZ1aL64qhT9CO2iLL56hyuZK79l4uKqU1L04x2GYEbSwXDxxKVi3RyGiewcNH0frSWoHQrJBvvpe/vsFQdNv5BdnqOS0ttfTXCSOFx3bNr56gzeXFocGCqH3Xb99Io3TXEn9O1pfXCa9/xhsVDeLPvrowNHWZ/yycvp7da9Rsn6ww8NxXCy2mabrvy9y8Hyd9mZu2Z8Wb65YaXj+zlm+glQseMyz4G48+0OtxW4knN5+hHXZuL6Lfm7TL+csLHbcps/b8hNJ+r/nVk7Q2b6Fw+1F/XCzff2xa/pxxP7i93nYWEHvdSaHr5raIe6WWlkq6mytfoG9PrP8aF3p8FFX62Fc8tmAlbVg+y+A8DqfXNu1wlN1j57uJ7+u8tnc37cCqr/TSn1hl3rpp7+Fr807aULLBsA9+amGe5r6Zb++Dhz9GuUufjSiVwbc1N+cywcXTSYLxsd3sJz/k07FJLp8gnqIonqItnZzWdHKT5aRmOg1ULrazJG70egG/9/AD1D/i19psJzvSSSifuKwnaZ9s316P793VI+jz4qER2U4a6aQKJz16+cRlPbF9sn17Pb7/LBhBl+24SZvtZEM6GconJeuJ7ZPtO57iid0MTeS+pF4uqtTsa94jt1oWpL7hwWdDr8NuvkZx0/e2NuwSvKb4OW5ez+oGpKWljp5VbqrMGU4bOCmgr5Vlxe0TFkUM2Ny+H14gCG+oXaaV2xVPbs+Z122NBk2sjf5Bd5N2xdChEbXKRk59Je7iyZqw3N3VsNXwxjgsnootnyMST9YModVl2hvvUo2EDsJWwdR/boVVO7nPporGcJ/NqGdejUp9J9YGnnRwPerbd1XJClvbLef6v+JXpof+/tiC9cJj1j5njafXs7pGK4uW29rng9J10GJS989NX+b2/djty9y0PSu25s13cD3o+5z49IFej9tMPLn9DC2naW1+XVA3MhL++ohVe77ljjssnvN7wxXcRNmX4fN7Ca3YWq3NSildqdk3/4OaKqlvDF1jL4bekx99hR1eWlduu9+1892kfu94be9u24FZX+m1PzHLvHXb3vm2Y8XkJYUO2ntYPLk9lwkqnm5UxsAncePiE33IfopFwXE/5BPEUxzFUzSznfzKdDrOZ+nEGOSbeGK1ne79nTjbiRdM992jRSSf+KwnaZ9s357F03ImkG4Iiyc120mU6SQST4p8CmU9qeJJ2ifbt9fjG/LGTXRl7bBI8aSXTtX/oUUvn3Tiie2T7Tue4onxxpzRwl93tuQ+oxmoLni1kHY2N1Nz804qfHWB5st3Tl6pYNnYyJsv+Yu7ZFno8Tv++LLn1zO7ASl+ZarmC/fPL66iusZdcipyefGq0A2XPstC9GXPMlbWba2Uv7BZSvniaWM1jz+ve69u30/kYG0IzVm6iipra+WpVHWNLVEVT27PmddtjQZNZfkLuF8qf08by6tDv7Ju1mQG3EiF1U0JIJ7YL5758vt+q1k6xrXZml+P+ZvKpp07qbGxkh4LZaQ8RpWNjbRT+vtOpeaanecYDfJZRl1tQ/j836b51XciN3jQCug/LXwtlJa/s5Zlm90pzFLRr6Bo1Od4re8UHgjw7aqRmppYG1gW8es83761oltZybOmXvp7C9XXlNH/PnQzd42PCQ1E2XsbLjhX/K/8z9x9Xajtbahq8vR6Ztdoc3MFl03BjmccFUnXgdoXvTzzcc3719Zp8daXeXk/dvoyt23PfIrbVk1bZxlxJdtrQ/t8LiJzTtvnxKsP9HrcxvLe/Wdo/sOVdr+sfy4oDbarxrpKyta0yyGhzEG/2zPr59g5Fm3LGDttMVU1BPvjoryFmu/eFwp22M6+5O9dnnxho2kfdfcfl2mzy/Of577vt/raV4SzvBbIU/ibpfdZXb5Rl5VzN1U0Ndvud+1+73hp717agVFf6bU/Mcu8ddveReKJZYGVbA++V/1x8T9Qidr7sHsyqWBrOdWyqZ/KtEcv5zLBxdMg3djYD/l0XJQznxIp6wniKQmynWIlnU40kU4nKRfb2RI/8XoBy6vZMZHkt3iSnsP27VmMLb2KjpbdaCyejKSTLutJL57YPtm+vR4fW4HuqoabtUXFvYonaV9sn2zf8RZPpXlzQl9G018pFmaZrCipjvylauMSzSC2Vrkpqi9bHfr7rY+8EPHLSu7UB0OP5yi/4nl5PeMbEG02xqI1pcIBCv9lrR6P/sue1TcoE9y0rVkwMfyL2t3PcJlf7t+PdrB2I60pq49ZMU4v58zLtmaDpqKXwyn88/IjBwmbls+n/370UYn/pa11u+IunnIEGQP8lFZ9VpB2QQCjaWjWz9EP8v/0cpGwztedgmNtbuJvWsdF7J89PvXR/6ZHJeYsXa/J7uCvkyde2OB7fSfWrn7PHfP8vMiVF5u2b9DIJ759l655jssunBORzcPewxTuPSzILwvVyVgYylgcEjHdjs9gYAs5qOfM/esZX6N8H82mF9UKxEABN7WS74u89mVe3o+dvsxt2zODHwyz60V0vl7lfiDh+5x49oFejtusD/XyGdq9d2AD3UrB8eZxP2w9oNSR9LM9R2ZQ8tdtMLtIv+8NnCR6oaDCdvYl/3f+PLJjCktosSgKf27hH0j86iuC/cWrQjH4GCdh5gj6TrO+2ep7x2t799IODCW9x/7ELPPWbXvXi6fr7s4STiUPf1bDaZPSRvTtfQSXLWd0bE7PZYKKp58oY+BBuqyngQ6m3sVCPiV61hOEU5IVE3da08mNdNILJ5WTIZ4gnmIhnvi6TCOVX4D4tHH9L3f8DV74Zmt4KN2X3SyF66Nop9vxvxjxN2ZeXs/oBoTfJz8wNBukqFM/9F/2zwluqCJvcsLH5OX9VAo+j1iJJy/nzMu2ZoMmfpAw6o8vCAppJs7qOkbvmy98rS/6b+eatfMcvt1cMfQPwhtPRuGSyRHnv3lnGSekWE2Q7Y6KN5eXl0vsEN4Qe63vVLPtdcNfzI2mMoTbNz8IvZE2GGTE1XKZDLwYrCh4wXC6HZ/R+EzuFl9eT3SNsnPDD6RfNpgKpa0xE+5PvPVl3t6Pnb7MS9sz+g7kJUBOUbWNrKhwnxOvPtDrcRv3od4+Q7Ni0Hy7FAmcYMHrSnpt2QpaIVGyvd7n9jw8opZSUKI+ZprRVF2UY3rctYbZl/x7DmcQ8dfto0+NVzKqwrKa3RNNDGUOqf2/f32FUVkDfaaVfjq6Vd9s9b3jrb17aweG4sljf2Lvs7ff3kXfT0bvlZ99oO7fTnv3ei4TXDydrBsb28l+8mvaXSLIJwioJCso7vcKdnal0wkepdMg5WL7psRNmGqHqXbRFE/8jYmaJcFn47BpGUtyllB2drYG9rdwgUTjqQr8dDs+VZ1fRc/L6xndgPD7NFuxj59So/7CZefLXuWVqSPDvxjWN3l+P/xgzc9lgu2IJy/nzMu2ZuJJXzuD3dCPnfg0LX99DZVX1jquVcBu0mZxUxjEGN/Im51Xo/pF7IZvTKggrvYGPxriyazd8Jk64c+phebr6nTcdEcGzZyXTRtK3lSmTrhrd17rO9ltV3zf8jA3mOczBibPfT7iOszOXkoLuGkIRlPc+Ol22ml24eve6+uJxRO/z/BriQhPcw5nL3jpy7y+H3tt0t+2pz1m4+uYH3Rr+t849YFej9uoD/X6Gdo7z+bt0u12dtqzKIOSPw+bBEKHb5cigRCW85FZQLxwfn1bjU5QS8+vejP045p6P6X9vN/wva+4fcJLpt9PRj96WPXNVt87/rV35+3A+H7GW39i9Nm7be9OVpzk25aReCoRiidv5zJBxdNNyhj4ZC7rya18OiEGNZ/cyCcUGk8g6fTFKEqnY+JYSFwknETSiXGKb+IJxcVRXNxmjSf1lxJnhYojb+D4Gw1+ul14mt0QWstNXfHyeobiSXNzucNRxor2y15cG0H0S5ZacNTL+4mrePJwzrxsa3VjVmi4Yk/w1+KZi/Nsp43rVyyzKtjpx3k1uy6jIZ5E0+xEx8tP72iuL4tYdUxTdPqe8bSx3PnKYrU26juZPcdqkGglbZwU1had3/AUmXAGg75QsNtC3vrXs3oPZhlfRr+qe+nLvL4fu32Zn21Pe76mmp6v9aHMGLH4j2Uf6PW4zcST12vA+jxPcdT/+teercWT6HGzPsUqC6ipakOoRpTaz+YqwpZ9bqw/fUHJPmHTmdj/7+AyJ5eVVPneVxgJfX0GkP79WPXNluLJt/buvB2Yfe+67U/MPnu37d2JeKoWtEu74snLuUxw8XQKNy42kk8Do5z5ZEc+HRNF+fRFyKfUz3byI9PJTZbTIC7biV1s35L4qdcLePesZ+nI7b+k/ocyxFlP99uVTly2k7Qvtk+2b8/HVzyVDq8dTEd3KFPkysPZSxr5xAsoLtMpJJ1U8cT2Ie2L7ZPt2+vxTX5zKl2w+Vq6Ztetwel2DfblU4R0aghOs2P7Yvtk+46neGLPz+LS+9WbB+20nVvo4YcfNuV3dzykW/KX/9Up+OstP81O/+Xo5fXsiKe/Gkwv0U9duPWRhfKNovbL3jz7ZQ23tLUq07y8n0QRT07PmZdt7dyYNdWUUc6iZynjjluEN5OsbkKdjaK47OZyxbyZNGXKnykrK0vAVJqa9aLhVLVkEE/6FXWMzv/dXHH/cMH2lfT0xLGGy2kv2ehs6kK4RpfxL6xmz7Hbrpqqw7LbSDz95p77Ta/De+75DT0+c5kmi47PuFOn2/G/TJsVPnb6elbiiRX4NWuX4WtoSCgbw0tf5vX9OOnL/Gp72mMeJazDon5HvfzHu03FUyz7QK/HbVc8ubkGrM4zm9prtyC5v+3Zf/HEsoDuNhE6fC2eGx6cL0+jU+s5qjXutobq7dxJZc3NtDokr+80LBrtpa8wyzbi25o+48mqb3Yinry0dzftwOp7101/YvbZu23vTsRTpQ/iyc25TFDx9FNlDHwKl/U0yIfsJ7/kE7Ke0lA8JYt0GuBCOjFO9Us8tZUUU/uNNwTFEZ/1ZCWfRNJJFU/S/7N9sn17Pr7aQnr/pUvpaMVNEVlPQvlkJp3U+k7Svtg+2b69Hl9BQyGd89pldHXjL7VZTxbySSSd1Gwnti+2T7bveIqnak1mTnhQwv9CN+av61wdCz+F74WCKqrnfl2b+oq23Xh5PaMbEH6fZrWSGivWhn7BFE+1M1stjZ/3H74p8PJ+4imevJwzL9vavTEL3cg21lH51kKa89RozY1kPH7B81M8+VVcXF/Lw6guh3n7aqG62kpa+9pLdAdXQHbw8KcdZDd4q+/kpF3xz1Pfl7be3G201cWUQW19lonS8TVz0+y0gsDr64naknafZlPlWuilCSMsxIOzvszr+3Hfl7lve9ppJyyzttHGQgrivjuWfaDX4zbqQ/24BqzPs/0VRf1tz/6LpzquppxRhmY4C/L3VFq+PiQ2QlKEy4jMKdoS6i9uGrcgJI787CtEhclFQp7PpLPXN5t/73hp717bgd1Vep30J2afvdv2Hgvx5PVcJrh4OpUbFzuRTwNSTD5BPMVZPCWydDrBZabTyRynKBfbORI/8+Mi3vPYH+hTVutJk/UkkE8i9NJJ2gfbF9unX53MnrUP0Kcbrg5nPRnJJx4j6STtg+2L7dOv47u76EG6+M0fhbOeDOSTBpF0UrKd2L7YPv3urPUDXLMMkKZq7QpXmsKVVeFVovgV1yJer7kpuLyuYPoG/+vRyKkvUS5fd0H3hefl9YxuQPh9mi0RvZJbJYivv2BntS7tcvLhufVe3k88xZOXc+ZlW9MbM2k/TU1N1NRsVLh0emh/f3huTVKLJ6NfK+08p1InkcsMplTxq0ry57+ZnWMJUaYDq3U0StDO7dR3uttGfSez5/CDFrNMkBcn3C68bpaFskMsMqbkZcJ3Cgdw4bofN9Ibxfmmn7eX1zNqS/w+w4XMI1csHC74jLz2ZV7ej+2pdj63vVXcdBKjATG/0qRmQBvHPtDLcZv1oX5cA+K+ZGS4RtGSQkPxMeUPT1Bm5uP08to3fW7P/osnOxma4e1vpIkTH47om3gRcM8jj4fexzO5JVHpK+Ti5FXiYy3mVoXVrv5m3Tdbfe94be9e2oHpVDuX/YnVZ++2vUdbPHk9lwkqnn6mjIFP5bKe9ALKSebTCUkunyCeoiSeYjnFzmldJ7+n1w0ykU6M0/wUT29v3hxc3e6e3wblkV35pJdODGkfbF9sn351Mm/XFskr0H2+9fqgPBLIJ0N46cRqO0n7YPti+/Tr+DY2bJJXoPt+9c/ljCWhfBKhl07StmwfbF9sn9EUT2q9AdGvHptWLdalHw+PKKTID1YmLlhtIa7EtUP4L+pQoUfuVz8/Xs/oBkS/z0dm5ka8bmXRcm5QG755i6y/cCO9vrk64lcmvkg1X+DTy/uJp3jy85w52dbeNJEbhVkAvHh6duWWpBRPU/jiz/VWxUPFz9HXFbt9wqKIX6i3b8zhzv+Q0PnntxUVqmXTZB9UfinWDzC2F+XRYw8/TGMn/pm21jQ6zh6weo5+SfGHn1kR0a62rVmkee9GU26ZkCsR/FK9esFE0wEFn8HAF7lfXVZvKQCdvJ7xtOEcbp+30cbtOyPO0TxuVaM7uCmUXvsyL+/HTl8WjbbXWPEG184voSkvrtG0mTfXLdU8bjY1LZZ9oJfjNhvcevkMW3bV0kvP/i89cO8DNH/5Bs3x8AX92XtZ/WZtxL0GL4RV6elfe/ZXPNnJAopcWTDyGPUr64W+vyobo9JXqMerFz/1ZWs40cCyryod9c1W3zte27uXdmCnxIKT/sTOZ++2vcdCPHk5l2Z9KdtumVyaYArNXrxaM6aoKHxN/vuUKbMjvvt9FE+ncePiky2yn6Ix7c7Pek+JMOUO4ilJptgdZ0M8eZVOp3Ccqlxs50r83K8L+Z0XX6CDtwyn/vvuFsgnRUBpGBkpnaRt2T7YvvwewP3ftnl0cNX36WjZjZHyqdxAOOmkE9uW7YPty+/jm10xn84rGkKD64eL5ZMRnHRi27J9sH1FYxCsH6j/edYsmqXwl3nzaMb/TqJbuFRjdQCVI6idwa9YwrjzkelUWFJCmzdvpteXztMMxIx+MeOLV1oVCHb7emYDf/1gfNg9mZS/qYRKSjbRy3Mn6wbqL1kWCf7TwmW0STqmwg0raZSueKV+EOr2/cRTPHk5Z163Nboxe/mPd2gGWi+9tp6qauuoenupNCCapGnHfMH65BFPTfRXbtB/0x3/Q6vWrZPaSoWj54gK2l/zqzG0ekOh8PzfNO75cL0QrmCunG0xYRYVl1ZQXV0tbda1df5za26q0GRNsn36Wd9JpVST5aG2q03S+yqk56eNjXjf/OegF1esX3xhxRrasWMHbd2UT3965E7Dgbx4JbFLTDNKvbyemUTX7nMIzVn6utyXRPZF0nVQ2eBbX+bl/djpy6LV9l7mMgCCn9edSj29mwT1XsxETez6QK/HbdSHevkMw9l+Qfg+Vru6Y5AZi3KptLycCtetpLGaYw6vMOdfe/ZXPLE2dbeNgt2i/kCfsVStu/dhdYH0GUN+9RXh1xhBufkb5fP42uLZmuvKaX0nt987Ttq7l3Zglunutj+xzgBz195jIZ68nEuzvrR0zXOa97uspNpW/+uDePq5MgY+jct60gsor/LJSDwd94XUnXIH8eSjeEol6cT4usS3JYb5eTHvnjUrKJ9Y5pM67S5CQAmE00PBTCe2LdtHtAZxrBg4E0dy5tOOn2oFlIjt4el1bBu2rR8Fxc0KjTNxJGc+7bpVK6AEqMKJPZdtw7b1u6C4+ZePOWxgWqT7ZYQn/8UplvtgvxpV7moxqOdQGyq8aV001d3r8enDosHNupezLPd53d1/0vxa6HTFmVnLN/n2fnhh5bd4Gm5zv27Omddtw6sraqdi7qrbqrnBMeIPz62KS0q4VfvTX5ciYaEXK8F28YTmeVbPcbKS4uDh46hipzZDce0LT9rY9jbNzTTfptzVELGXYcB+Sc6d+Yjpsf345psNrxuWXZgRIdwj0U+FMZ7iFFmnzo/XM2tL7Dp40MY+s7npHX71ZW7fj92+zO+2p77vxX8cZbyy1YTnaOlzTxgO6OLRB3o9bqM+1MtnyK96K6qjx1ZNG2e5SugltEgnZry0Z00WjmAgbnYezMSTnSwg0RQ20evwIkNfysCXvkLX/s25U3Pt2O937X03eWnvbtuBWV/ppj+x+9m7be9WbdJMPFm1d8/n0qQv3ag7l/xq0mb9rw/iaZgyBv46Ny5OdfkE8ZSm4slLMXG70kk0te5UjtOiJZ5kufPiC/Te8GH02a9vD2Y28QJKz0PBQuLsuWyb3VHIdIrIzNo2l97NGUKfFVwTLDjOCyg9O4KFxNlz2TZs22gf36yKeXRx3tX03dLrgwXHVQGlSKiQbFKEE3sOey7bhm0bzWPTr1InZgiNeGgCrdyw1XLlGrmAZPEqulv4RTucZi/Os1xJrMigxoBfr8fXKjCq8VO5ZQ09JPzF+EaaszQ/YkqifiWoku2lNHfiw4IbsBG0qrjS1/dTW7Y6lA31pEE9Fjfw0wPs7NfpOfO6reYXWF1Kf0tjFb347CTdNBP1V9ixlFdUFrdaBHbaH39dsiW2I2/QWmjD8uc0WXCRiwOYP0e7qt1q2rbxFU0hVZWx0xYb1hwrLXzN4HMbQpOefYmqGlsijnspVzNq0Zptjn5BtpthoFLy2ovCKW9/Wvga7dwZ3pdoVT8mwbNnPi7sE0c8NIkKSqttf87yoMWiMKub17NqSyxDYrkuiyA0dULaZ8n2eossWPd9mZv346Qv87PtafqiknXyylb33nuvxAP0eGYWrS4qjRgMCjNjYtwHej1usz7U7WfYULGWK079pKEsWz73aWH/zNplkWDpevftuYkTc+JVGgtCP/iIs3mqS1YIJYOdLCBR7Tlxn67NXjOTGW4+F/Z9rv4g86eXi6i2fL0u4+YSpcbUTKpsbPHQ79r5bvLW3t20A6u+0ml/4uSzd9Pera5N/XS5ZSVVttu713Np1peymlV3cj+Shktq2Ot/fRJPp+nGyKfYqPvkpOaTm3pPEE+YYpc00mmQDenEOF3iOxK/iMZg6e2SYrk4+Ps3/ZiO3P5L6h/xa+q/93fUf989Qdi/pb+xx9hz2HPf9mEFO/s1nwrl4uDvLbmcDq8dTJ8XD6XPt90QnIYnwf7N/sYeY89hz327tjBmx7ehvlAuDn7uyivogs3X0mU7bqIra4fRVQ03y7B/s7+xx9hz2HPZNolayM8ODbVVtKOqjuqk/1bVNtiSVon2eg11bJ+18j7Zf41uhozSm99q2km1oe3rHB1TrM+fb5+DzXPm97ZGxdhrq6qotq4u+N+GxqS+psSCo1lqGy3U1Nzs6DlG05oaamvl81W1YwfV2Vw5qbGhlqrY51bH/lvn6nPzo76T0XSHGum9yG2g1nmbYtdwlbJ9ldSGdjY1R/fHgCi83lvN3D7Zf02uA7/7smifPz/anlWBYaeZBLHsA/087lh/hpp2Ke23rmGX7+05ej/a2c8CSuS+orGuVvl+ND6Pbvpdu99NXq6VaLQDO/2J28/ebXuPSVtKgGvKo3j6hTIGPp0bF5vJp0EpIp8goGK0kl00xJOfU+ycFBN3m+l0GgczvGdEUzyptG3aRLtnPUvvPvwgvXfH7XLRcAb7N/sbe4w9J16dz9s1BfLUuXdXj6B3l/9ELhrOYP9mf2OPsefE6/jW1xfIU+duKxhBQ964SS4azmD/Zn9jj7HnpNrgONWxO68egEQhWrXB3OJXfSeAvswpfH2d6+7OEg4kWaF9s/o7OO70wmn2ZTKDfjd9P/skFE9ncFlPegHlNvMpmsXG7cqneIunL6azdIrVFLuvuMx2Ot5BXSe3mU68cPq6YnjZxXaexHB0QgBgsAZA8oinllBRWuNfkO08B6AvczGQ3FmmKbx880OTaPWGTVRVW0vlpcX012n/o5mC8oSPU5rT8bhTgbrSla6ygJIP9Lvp+9knlXgaroyBz1DGxF/XCSivmU9W9Z6Od5n15Mcqd7EST1+EeIpftpMfU+y8Zjrx0olxJsQTAPEbrE0M1WW60dV0BgBiyY6CF8IrKE7NjfMvyGWhuhCj57zh+jkAfZlbyvKft1V4+YYHp1vWKcRxpz4bQkWUUzsLCP1u+n72SSqezuTGxXblk9PMp3hNufOS9QTxlEDZTsfaEE9+TbET1XXymumkZjuxi+18iZvRCQEQe7bk59Lzzz9PL2Svwg0+SPwBRX0FvSy1V9Zm122tivuv6jt37pRoMqkdZOc5AH2Ze2rLi+ipR+4xWNnxTlqyalNCtr1kPe7kFjI75f6oqSnVM4DQ76bvZ59U4ulmZQx8Jpf15Ffmkx/1nsym3B3rg3zCdLskKiruJdvJa10nv6QT4xsSF0j8BzohAAAAAAB3A0u+0G5VXQOOGwAAElc8/YcyBv4GNy6Ohnzyq95TstZ6gniKQraT1yl2TqXTST5IpzMhngAAAAAAAAAApKl4OtMH+XSSB/kUryl3EE8pIJ78nmIXLenEOEviQolfohMCAAAAAAAAAJDi4umXyhj4LG5cHAv5FO0pdxBPSSqe4jnFzk5dJ6/SiRnes5WL7hZ0QgAAAAAAAAAAUlw83aKMgc/msp78lE/RqvfkZ9YTxFOMxZPX2k5f8THbyUldJ710OsWFdDpLudgugngCAAAAAAAAAJAm4ukiZSx8lgv5dIoL+SSacuc16+krUa71BPEUp6Li0cx2MpNOAw2KiXuVToxvSlwscSs6IQAAAAAAAAAAKS6eblXGwN/kxsVe5ZO+2PjAKMknN1lP8Soynhbi6UtfiH5tp694FE/RnGJnJp34bCeIJwAAAAAAAAAA6Sie+KwnK/kU7Sl3bsST16ynL0VRPkE8uRBPfmc7xUs6ncVJJ8a3JL4r8Z9HjhwhAAAAAAAAAAAgVWFjX2UM/C1uXGw38ykR5ZOXrCeIpxiIJy/T7NzUdvK6ip2TYuJWmU5qttM5EpdI3IZOCAAAAAAAAABAioun25Qx8Dlc1pOdzCcnxcb9WOXOz1pP8ZhuB/GUQCvZec128iKdvgXxBAAAAAAAAAAgTcXTt3yQT35kPaXiCncQTx7Fk1/SyU62k1PpdLqJdOLrOqni6VyJ70ncjk4IAAAAAAAAAECKi6fblTHwuZx4+qZgyp1ePp3uo3yym/XkRT5BPEE8mUonI/HkdIqdlXQ6hxNP/w+dEAAAAAAAAACAFBdP/48TT+fYlE9Op9wZiaeBMcx6gnhK0NpOXqWTk9pOAxxmO7mt62QmnRjflrgU4gkAAAAAAAAAQJqIp0uVsfA5NuTTmT7LJ714spJPftZ68lpoPKUE1Bc9EE/x5GUlOzer2FlNsTOSTny203ckLpP4FTohAAAAAAAAAAApLp5+pYyBv6PLerIrn0RT7tyuchftFe4SQTwlpID6YhKJp6+6FE8DXIonUbaTVV0nfTFxXjp9G+IJAAAAAAAAAECaiqdvG8gnq2LjvHwSZT2d7EPW03Eusp4SWTx9MVWkk9/iKda1nbxIpzMcSidVPJ0ncbnEHeiEAAAAAAAAAACkuHi6QxkDn8eJJyfy6YwoyadY1XqKp3j6YrqLp2hkO9mRTifqpJOd2k5up9jppRMzvOdLXCHxX+iEAAAAAAAAAACkuHj6L2UMfL4u68lOsXE3U+704ukknXiyK5+infUE8eSjeHI7zS4Rajs5zXYSFRNXpRPEk0+0trbSrFmz6NFHH/UVts+2traoHXdDQ4MMPkMAAAAAAABSD9zvOxJP/JQ7I/nkJOspkWo9+TndDuLJhnj6cpym2dmt7TTIJNvJySp2VnWdVOnEUgsvkPi+xK/RCbkjGtJJZfbs2fgiAgAAAAAAAOB+3z/x9GtlDHyBMiYWySezKXd2V7kTZT0NilKtJ7+m230Z4ilxxJNf0+yc1nZyOsXuWyZT7M7Tiac70Qm5Q5VEybJffBEBAAAAAAAA8ZTG4ulOnXg6z2TK3bd8mHLnZ60nv6bbQTzFQTwlwjS7QQ5rO5mtYmc2xe47nHhiqYUXSlwJ8QTxBAAAAAAAAIB4ShPxdKUyFj6fE0/fcTHl7kyDrKdTPWQ9JfJ0O4gnl+LpGIfiKdGyncxWsTvHZIrd+YrhZRfbDyR+4/cF/eGHH9L69espKyvLt6lnTz/9NL3++uv00UcfQTzhiwgAAAAAAACQJPf7hw4dovLycpoxY4ZcrqSyspIOHz4cD/H0G2UMfKEyJj7fZMrdOTZXuUv0rKdjfCoynvbiKR6r2X3NQjw5LSp+skW2k1FBcTdT7FTxdFG0xBOTTtGqfbRy5UqIJ4gnAGR6urupW6KnB+cirTjUI3/u8md/COcDAAAASPT7fSad9OO62traeIqni3Tiye2UO6NC46eaFBr3UmT8azaznhJ1dbukFU9f8lE8eS0q7iTbaaDNbKfTDAqKW2U7nWsyxU7NdrpYYrDEb/2+oNVMp2gIGZb5BPGUIl9Eh9opb+EMmjFnNs22wYyZOdSmCIb6/Gzp/6dRTkkANxdpRnvDNsqemUkZd91Fd/GMGk3TFuZR/Z7uNDkXnbSWXT9TZ1Dx7jR4z4c6qVq67jPHZmg/d4nRj0+j3JJ66sH1kXocCNCSp6dQ1vQsmjJ9Je2zeH7X24WUJT1/ytNLqPVA+p63QMkS6RxI52HRFjqAdgQAxFMC8Mwzz0SIp7lz58ZDPP1WGQNfbJD1ZCSfrLKezjBY4c4s62mgz1lPfhQZ/1KU5RPEUxyLijvJdnJSUNxoip1ePI2AkIF4igvd9TReLw9MGU313Wzbbsodqww4l9an701FT4ByZqaReDjSSXkzM2y1lWmr0qBdcNdPTkOKf/57KyjTTh8xNpsCyIBKLfY30sirrqKrFEa+0mj6/MaXRirPHUk1+7299oF3tlDWxOSUWK2vKOfht8upC+0IAIgniCdePI0QiCerKXduCo37lfUU6yLjEE8uxVM0VrOzKipuJZ7Majud4lO207dNpthdqKQWflfiKogniKf4iZP68GBy1HiaNnWaKZmTFikZT92U93hwu/HpLJ7SSTwc6aScx7WSYfzMbCooq6b6hnqq2JhL08bq5FN+W4qLx/D1k9Kff08bzdZktmVSTn4xVVTWU33lNsqZM14rn2YWY8CRUhlPjTSWE09XXTWMCveYCZexIfHU6FU8NSz3TWLFXjyNDYmnZM54YjVhFi1aRMXFxa4eBwDiCVPtDMTTVcpY+CJB1pOZfHKb9XSKjVpPTsTTcT5Nt3O7uh3Ek4+r2XkRT26Kijtdyc5OtpPRFLuLOPE0ROJ3EDIQT/EeOI9/tdnBthBPaSUe2NTKpbxcGE/bDDK82rZkc8/LoIpOfP7JTndd+DPNmJpHnaLntBbTaO5z37YXA47UFU9MpiwxzOLxVTy1LPdtXxBP7mBS6Xe/+518bYvkktXjAEA8obi4QDz9ThkDf5cbF1tNuXOa9WR3hTunWU9+i6djIJ5iL5681nc6zsdpdk6ynb5pUdtJlU568cRSCy+BeLJ5A9faKneQdgugs+e2tbVBPDkRT44Ekj3x1N3VSYE9AQrsDlB7V4/NOjLd0vPb5G0CezsjHu/pag8+Ju23s9vGPru7qV05hsBe+3Kgp7sz9Drtnd2eMp56uGNg+0q6OjiaKZkZVLzH/PkVczKss556+M+lk7odTM/q7uTbgFUb7+Ge307ddtrMoR7q3BvgtvEgnqT2HN5XZ1IW4m5+NSwds+uM23nbqmmh5+UYPc/uufWN8Ot1i65x9brca++zcdqnJf21LxJPNwf/m7mm1b142t9F+9h5eUdiX1dCZTwd6OoKfsbSse3r6HK2bcc+ebuuA6kjnphMYte0kVyyehwAiCcsJmQini5RxsR68XS+RaHxb+rkk5esp2iLJy9ZTxBPcRBPiZjtJJpid47FKna8dPqucrFdLXEXxJM5TqSTyuzZsyGe4iSeupuLaYagAHHG47Opek+PcD+Zq5qpvSEvsmD1XaNpbbM0iO2qp0WPC/Y5KYfaRIPXrmbKmTk+sgbNqPGUVxnQHW+u8vg0qpcGqXlTRwtq18yg6r365wt4PDc0wA2U5dH4UaLnZdDsVdVJMwgNbJwRLiJtp53sCWe/RDy/s55ypo4X14VaWEDth/TSIzP4+KS10mCwWmpXkduNnpkXsd2RbulznCN+nch2GC6eXbx4hqANSq8xKVtqGz0OxJO0r6Uzkv6z12e7zS7rNJYse7bRtLGjpfM3mvKauz2dW/4ayxVKvU7KnZShZGsqbexQgGYr11vB7h7qrMvTZGHVd6vHWU2LJmUIP5sZS7dFCCpnfVpqXft68TRyYhZX72kEbelwKJ66WmnJ0yO12VOyzBpJKysCgn1EwmpMlT+n7iMzovZTWFZJz32pJuL4tkwfoTw+VrNtV0shZf52mOA1R9C8NTUR8kjdz9jXW+lIRw1N+W14m+dru0zF077SJZrXyH/7AOQTABBP6SSe7lLGwJcoY+KLbUy5O5cbbxtNuUvWrCeIpzQVT6eZFBW3k+1kVVCcF0/fUy66u1N9Spxf78cpEE+xn2oXKMu2KEDMMmZ6IvbjCU72BMXHNm7AKWY2txqfqUjSMEMunNxj9vxROfKxBEpmW+4vOaYp9tDaSeHPrmCPg211Mqhnd7FQPOjPcXO3QDxZMbUgPJjX1yQSMp7qu3R1jEbdZdl21/JCxUg8HQpQ9ljzfWXM2ZY0/W/7ltkaEczErSNx4uLc8tekMJuMy8ILXUfc36bNmSFcGKG7ea3j/sRZn5ZK136keGKSZV/pvLA0uW9lhFQxFE97ttAIA5mkklUU0BbmFjBsUQ21vh4WU8sbDhgUN2dC63ndlMAATVEfm5gfOvZAUZbpcck8nc+91wO0/L7g30dMzIqYirhEOiYj8RQomad9bsW+pGgHmzZtMpVLVo8DAPEEOPF0tzIG/p6BeLJTaNwq6+l0G1lPEE8QT47Fk146WYknUVHxU02m2bmp7WQ2xU7NdrpU4hqIJ4inRBBPo+espebWZmpuNqChntr2dJuLp85tnFjIoJwt9fJ0uO7ONipYyAmEUYuo3UA8sWyAdnmbZsrWS6mxs6l6dyf19PRQoKGAm/41PpTNcORIOy3is2iWbqNAVzd1d7VT/cZFmsHitk4D8TRqBm1rCFA3m6a1p55mcxJBnWoUaK6neq6e0YxVFfI5qm8OyO8rZ2z4dbI31lO7egwlOdw5yqTmnkS//vjPaDYFXO8nQDM0mWrZVC99lt3d3dJnWUzTeDExKSyR9OIpY2ou1e9R2kDdWk4wjqZqRSR1N+ToXqddfp323SzbKpy1wsvW4pl8W8ukgrqAvE3nHu02LCuu7ZC5eOKnGmZMzQker7SvNul4+ZXhFpW1J0cf3FUvWNEug6bNyaa1JVK7l86vmYhyc24txZMoW7NHdJyjafbSPCrYUk2dB7VtcPScPGre2y21pcg2OEMV0y76tNS59gUZTy+1ytJl5X1hcTKlKGBDPO2jeZxsyXxpi9QvH6ADXfuoZt08TeFyOYvqoy5qbWilLSGJNIJWljZSY20Nte7poiN7Cg2ymrpCQkjdrpwXzO/khyVXiSJ8uH3Jcm1RPgU6uujA/i5qLFpCw/jjDk0v1J6D0OPTn6f80lZZNPHiSZVfrRrBNYzyW7qS6l6ssLDQVC5ZPQ4AxBPgxNM1yljYLOvpfIOsJ6e1nk4TZD2JioxbiacTHKxuB/GUJOLJa7aTk9Xs7E6zs1vbyaiguJl4uide4oktobls2TK50NwHH3yQ8OIpVuIoLVe1s0HG4npT8VSxMDxFLWKqjW7KTnAwqRVPMzYGIqZshQdqsyOWaQ/kT4sQT51li7j6Qs2CQsk5EVkHWvE0LXJAuDc8+NSItkPNofOX29wjrok0KidiUB4oCWdjrN3dk+A3CJ3hgbQ+s8xJ1gz3udw1dW3kfg61aaSAWkdKI54mRW7HZ+OogoLfJruhx1iAqYJLIxcEn/+RHiqYmREpJUTiqbMivC/B8TKJE2obY92fz5izt1orBwUiKnNmNm1r1sk0l+fWF/GkK4TO9w3CjDPpOufbWo+bPi2lrn2ReGoM/q2jnBMyIzVyRySeurgsKVFtqK7aJZxIagw/9vbK8L40U+q66PmbBVlN+xu5qYBB5lWE5U7rmsxwzSjlmMunDzM9tgPv5HPvNUuR73rxlEk1HebFxVvXTOGeP5K27DmQlANGyCcAUFzcB/F0j4V4Mio0fq6LrCc30+2ciCc38gniKY7iKd7T7E61Oc3Oz2wnllp4mcS18RRPTDrxGUJPP/10QoooiKfEEE+jzcTTIW5AP7XA8PXUQdnohdVa8TRqUWQ2TU8zNxUwcmpKT3NehHgqDg1ip0WIKvXYc0OvmS0PTPlBrrAYNn8cvHgyrPHDZz1I28zJk7NuejRFirups7OTuhM964EXQq7FUw8VTOWmJRmseNZZmR2RjcRLpLWtPYI2ECko+Iynu0ZlUt6Wem0h6J5u6pbOfadSNJ6vYTV7i0EWUmdFOLvq8bzgeRB8/lqxYFSsOzOcpZVkq/4FGioob/Fsg/pFitSZuTYkfNyeW+/iKZPqe4zboNFqi22VxZS3KpfyNtZTj8s+LWWufTPxpJE42mlrIvFU+PSwkKAJfCR6nfDUNV4kma1qF36dEVTeoXv+zSMp877ga454rjycpfSI8hqPKMf7UWt46l1IKkVSvmhEeGpfy4EI8aSf7qc5vvuepy1rsjRZWDVdyT2YhnwCIDnFExvf6WeH1NbWxks8XauMhb8Xpawns+l2pybYdDuIpyiJp2OiNM3ueJ+m2X3dZDU7o6LiZrWdLuSWiTQST/fGS9SIOqBEFFEQTzGYare4QhoIdcuDIkN6TGo8aVY+YwP+DJkMlbsytPV9xrJaSJx4EkkNi+Ln4cGpKp44qaQMMOXX5Y9jlK7OT7eukHGzzUGuRXHpeoPaROMnzaDcjRXU5mCFvYSZajcqW5lOZLO+kwr7XOxkTQkEX1jS6EWCyZSsLgOhOnY8zVicSxV1bZpjCGetZHJTNk3Og5qpJPj861/VFjTXtr0g/ONmqyEmOj1dndTWUE1rly7SXvtyf1Lt6dx6FU9BCWQgnKW+p9POe3TVp6XStW8unljW0RKuoPa80n0G4umAbvrbMBrGuJnnKk02kLqCnZl4Ek2bU1972PRCai3J0oqs/eH3EZoeyGVIsaLlhqvVtSzn6jd1acVTRB0pqwLpY41X+4N4AgDiKYo888wzEWM9NvslDuLpXgvxdJFB1pNRrSdRkfEzbGQ9uZlud3yUptsdA/HkTTx9OUri6Tgb4inaRcXNsp3OMykorkonllp4ucQP4ymemExyUjMpXiIK4ikJVrVzmD0VHGAKBvMexZOzYuWR4sn2INdyVbPgylaZJkWmR88pSIKpVpw0umu0YaaIYZaUPBhn2SYZoeLh7Q7aY1g8jReKC8PPTl7VLtP0sy9ojcx4Ku40OQ82xJPtYuhJJJ56ujupfW+7XNvILKutPn+2ppYTE4Vuz61X8RSZIWkhuX3ICOX7sNS49q3EU7A+0jBOqLR+JBZPonpIxoQlk6l4YnWjVGH19BbN62Su20dHOgo1dZ4ONCyJyJDSZDxN3OJOPN0XuWqd1cp8fIYYpBMAEE9pKp5+qIyFL7XIerrAZIU7UdZTtIqMm4mn46Iknr4M8WQtnr7soLaTXfHk5zS7k12IJ9E0u3NMptnxtZ0uthBPI+MpaphMclq0e9KkSVRdXQ3xBPFkkPG0iOpZ8e06AUqh8kBnjziLxGvGE1fYt7jB4BgaWMH0emre3em+nowN8RQ6zs4A1Vduo1zBFKVM0dS+BKN+cbjOzTR9HS6LqVMZM4u1YsF1xpND8cRNqwu01tO2/FyaPXW8TgAEi1lrsnJ6PGY8hfY1mvLKjNpfvdz+WCH6nkS/ceY+k3CNN2PC09mCn5fbc+tZPC2tN814Mm6D3XLh824m2Vz1aal17VuKJyZYuBXmRjy3hWq4OkpBWdRFy38bznYqbGikmtqaCBobWqm1pZFa3+kSCJ+RwiyhmlDx8SwKdLVSpnIc+e9oV7B7vnZfeKU8XhT5kfH0WxviaWI+dR0IUNZVkRlikE4AQDyl4VS7kRbi6WKTWk+8eDrHw3S7UwRZT35Pt/NDPJkJKIgnH8WT39PsTvJhmt03DabZqUXP7NR2ulRJLbxCYmi8xZO+zpMV2dnZ9OGHH2KqHcSTbrsALRqlyoZtxlkRW4qpuGQbtXUeiYJ44lYUG2W8Alt7Q4V0DMVU3xot8dRN9WXFVLCxmJoFWR6BMq4GkVovKJEzXlr5JehnhFd1MxJVXMHlafmBiPo62wxqPHWb1niyL57YSoTFGwuouKxZsEJbG+VMytAUjA5snGZdh6irOiwhTGo8tW8JF7Au2GNUqLtebn/b6gKJf+N8qI2m3WV/qmW4GHfw83J7bnta88ynv3Jy0654ypsUuQKi/jmh+kyjmJxy16el0rVvRzxpMo8MMpdCBbxvNq6jtK+hnAqLCqnmbfvi6UCo+PgIWvL680r21ZRQHSm1ttTI55bTvPsEBcQ/Csuqq26eR/sMjq1m0UjjGk9W4omvWdWwXDilMBnYtGmTqVSyehwAiCcUF9eJp6HKWPgyG1lP6vj6OwZZT6Ii426m250Uxel2EE8JJp6+Eqf6TtHKdrrIpnjKiKeosarzFK8sJ4inGIunV5s9iifrFaD4wWTw137/xRO/clXmKsF74laiU1eu8kM8aVa141bHylwlymoI+FCwO17T7YLHbCQgOutyNdPZ1AE+v/qceFW7AM3mMkIKIla1sy+ets3hVlETSLJ2rgB4LttmL7/y2gzhymvFrla1E4mFHm46aKalxEuoGl9y+zf5DujkBJK6gp0P51a0sADf19gTT1oJptag0k4bC6+imTGnwl2flnLXvh3xFFz5zUw88avajX09cuU4JoDU1wgV/taJp1ZhUfIAVxw8nF0U+syLpuiOaRht2ae7B7JY1e7IO/x0QlVqORBPuql45c+NSLopd0wimUklq8cBgHjCudCJpwyb4umiGGQ9xbLO01cgnpJLPJnVdxpgIJ7s1HeKVlFxvXRSi4qz1MLvS1wXb/Fkp85TPLKcIJ5iK54ypubQti3b5EwMQ+Rf8XsMxdORPQWaqSTZG6upvaubenq6qa1yLTcoVTMO/BdPmtX12OBvcYFczJcdQ3trNS3iBtHZdd3eMp64qTijpfNX3RCcPqXJEmGD6Ve3UWBvcApP555mWrtwvGClwATPetpdoJumpq4WFzy37H0VLJ6mnUrEiz/d55IxKYfqd3fKBe0DDdtoBj8NSRGCbsVTWz5XZ2nsbNrWEAhOn+rqpGZdOwyvhqidglfMtpHfVz3lTs2ImJ5nlvGm2dekbKpubZf21UPde9to7Zzk++y7NRlv7D0tom11bdTZpbTpvQGqLskJr0wni5tt4vNh+9xygviuDMrZ0hY+hwu1Uybtiid9sXDWNwQ61f4pT/NYKMvKaZ+Wgte+HfGknfYWKZ6OfKQVRGMX5VPrvi46cOAA7Xu7PJSNFJwW1yWc4pb5UiHVNNRQ654urTjiRQ4rHL4uYFCDikmiJZGFwPdopRl7nUCHdGz7u6ixZLlm+7EhMeVAPOkf57OsuMLokE4AQDylmXi6ThkLX84VGbfKevK7yLhVnSe9eBrgsc4TxJML8eR0JTsj8WRW28lLfacBPqxmd6bDaXa8dLrARrYTL57ui7eosarztG7durh2UBBP0RdPdgnKGgPxxERB/gzLfYS34TJp/BJPooGyRSHg7oYclxlPzYLzly3vN1Ay21Zx84q9yXOj0N2QZ7udjF5YHPF5MnmVYbntDGruFk3bc1DjiWVP2TjG8XzWS0+bJuNKTAat5bNejKZadjdrJJthYfskWlK9beNs+/3E47naVePcnFuJaq62mK3+hF/VzmDqcHtZto22W+GhT0vBa5+vg2Qinlj2UZaReJKnxeVbFxb/7XKNGApPpQszbFGNNttKM33tKsrfY3xMY19pFR5767os62NjdZpC29gRTyOF70nOAKtdop1yl8B9waJFi0ylktXjAEA8QTwJxNN9AvFklvV0gUXWk9l0uzN9WN1ugE91nqym3DkVT24lFMSTQ/Fkd5qdk9Xsvm5zNTtVOp3rINvpEuWC4qfZXSnxo0QQT3bqPMVTPkE8JYp4yqDiPdqMp0zBFL32urXiFZ1GZVJeZUA3uBxvPO3EYrpNWDpELtXes7eeFk0aLXwPi1ZVa18rVC9GGvzu7rGYklgfUbNl9Cgua2NqQShbJ1CZR5kGA+7xU3OovjMJbxg6mynXbLW4sdOooK7dZPt6ypk5XrjttMUF1N5jJAoyLcVTLi9/egK01ug4R42nnBKBmDjUScVLZwjl2Oip2VS/t8ewXUTUIWKvv3Ca8PUzF+ZRoCv5Pvvu3dW0aKqJDFLOq7BgutNzq4jp4oWZwn6kuLmN1irZUqFrkvs8ZpcETDK4ttGMxzME72G0dPziKcdO+rSUu/YPhDN0zApwBzOUeFE0NqIu04F9NTTvkRECsTOM5r1eHpmNdOQAlb80hYZxNaQipsPxK9OxIuO6KXlbpo8IvUb+HuNj72oppCn3DRMc2wh6fl2NTi5Zr2oXWKdM87tvpfDx8HGx89qasJ8/qwnD5JKRVLJ6HACIJ4gnA/H0I2UszE+3u5QbN9vJejrXIOvJaHW7r7tY3c7rdDuIJw/i6UsxEk9e6zsNdCGejOo7mU2z+46DaXZ8thMvnkbFW9SI6jyx6XVMNiWCfIJ4Sk56ujopsCcg094Zp2Xj2RQ75RgCezvjsopYT7d6DO3y9KSeQynw+bLzurtNXqEtuLpXszylyNH2e7nPJVrn5FAPdXe2B9ug9DryamV2ttnbrrRdNk3O2+t3qu/T674S6LMPSJ89W8ktuEJfm/3r28255dqKn/1I+LoMtsFo9Gkpee37IrO6aJ967tmUuwQ6NjbFTj22fR1d+KwAACgu7r94GqUTT1ZZTyLx9B2H0+3srG43yKTIuF91nqIlnr4E8WRe38mpeDKbZudFPNldze5bNqbZ8dLJaprdDySuj4Z4ysrKciRO9HWeWCFxtaZTIsgniCcAAAAAAAAAxJM7RIkGtbW18RJP1ytjYavpdnayns7hxulOV7dzK56sptu5EU/HQDz5I56OiZF4OtFEPJnVdzrdRn0nfjU7p0XF9dlOvHi63+8Lev369abT5qzqPOlXr4u3fIJ4AgAAAAAAAEA8ueOZZ56JGBPOnTs3HuLpfp14cpv1pI7HzzGZbnemSdaTUZ2nk0xWt4u2eDoG4in64ika9Z28iCer+k5ep9mp4umGaIgnlq3E5JOa+WRHPKl1ntgUO9Hj8ZRPEE8AAAAAAAAAiKeUEE83+CCezKbbGdV58iqe/K7zBPGUYuLJS32nsxysZmdVVPxybpodm9M6WLnoHkiU9Et+ip2VfIqHeHIKxBMAAAAAAAAAU+0SZqrdA8oYeLAyJv4+N052W2Rcv7rdWT7UeYJ4gngyFE8nmqxoZ5btZLe+0zkuxJNRtpMqnn6cKOKJ1XnST7Ezkk/xmmoH8QQAAAAAAACAeHJGAhUXf0AZA/Piyct0u3NtTLczq/NklfV0osF0O4inFBBPXus7nfiF6NV3Updt9GOa3VXKRfcgOmdznn32WdfyyS2sQ4Z4AgAAAAAAAOB+3zfx9KAyBr7Kp+l251pMt/Na5+nEKNZ5gniKgXjys7C43Wl2ZuLpDINpdmfbmGZ3vnIhXCiQTt8zyHaCeHJAU1OTcF5ytGCiq6WlBV9EAAAAAAAAANzvR088ibKevieQT+p4+3wb0+3ONphud4ZN8eR0ul20V7aDeEpx8XS2wrdc1ncym2aniqcbIZ4AAAAAAAAAAKSJeLrRQjy5nW6njtvPtjHdDuIJ4slUPNktLH6Sw8Liduo7neuTePqBMqd1iHLRPYROCAAAAAAAAABAiounh5Qx8BBlTPwDn8ST1XQ7kXiyKjB+kocC4xBPURRPXzbBjXj6WhTEk1lhcTv1nb6twE+z48XTdxW+p1vNTp/tpIqnn0A8AQAAAAAAAABIE/H0E5140mc9XcrJJ3V8rRdPqnz6tsV0O1GdJ7MC436Jp6/5KJ7sCCiIpyiJpxMMxNNAj4XFv2FDPOmznS5wOc3uauWiexidEAAAAAAAAACAFBdPDytj4KtdTre7wMZ0O714+obHAuMDDcTTCRBPySWevmIhnuzUd3IinuxMs3MinpzWdxoM8QQAAAAAAAAAIM3F0+Ao1HlyUmD8NBfiyWmdp684WNkO4inJxZNVfSejaXbfdFnf6VJOPF2hwE+zU8XTTRBPAAAAAAAAAADSRDzdpBNPataTOm6+jBtPu6nz9E2b0+3M6jxBPEE8uVrRzq14EtV3+o6gvtPFCnam2an1na5RLrrfoxMCAAAAAAAAAJDi4un3yhj4Gos6T/qsJ3W8ra/z9B0PdZ7sFBj3Y2U7iKcEFE9+rGg30GCanR/iSZTtdKGL+k4QTwAAAAAAAAAA0lk8Oa3zdKGL6XZOxdPJLsST25XtIJ7iIJ6+6lE8DXQgnkQr2n3DpXiyW9+Jn2aniqefQjwBAAAAAAAAAEgT8fRTnXhSs56iVedJVGBcv7KdlXga6FE8fRXiKbri6RgDvIgntyvanWJjRTu/Cour0ulywTQ7VTxdq1x0o9EJAQAAAMArP572KQC4FgAAiSyeRitj4GsF4knNerqck0/RKDAuWtnulCisbOdGPJkJKIinKIinr0VBPJ0qEE+iFe3O1oknJ4XF7dR3UguLh8RTQ0MDAQAAAAB4AdIFMHAtAAASFZ14utpAPImynpwUGOfF09k2VrY71cXKdnbE09cgnlJDPJmtaDfIQDw5re/0LZ10UsUTX9/pIgf1ndTC4qp4+hnEEwAAAAAgngDEEwAgTcTTzzjx5KTA+Hc58aTKp/O4cfq3OfHkts7TyRYFxu2sbAfxlKLi6USH4slrfafzXNR3ulI3zU4jngiBQCAQCAQCgUAgEIgUDgPxpGY92S0wfpFOPPlZ58lKPJ0I8ZSa4uk4H8RTPAqLX86JpysNCov/ULno/htdEAKBQCAQCAQCgUAgUlw8/bcyBv6hQYHxKznxdHkcC4x7EU/HQTzFXzwdKyAW4unUGImnSznxdIVJYXFVPP0c4gmBQCAQCAQCgUAgEGkinn5uIZ74rCd1fB0L8XRqHMSTk9XtIJ5iIJ6OtymeTkoA8WSnsDjEEwKBQCAQCAQCgUAg0lk82S0wHk/xdJJN8XQ8xBPEkx3xdJYD8XShTjzZKSzO13fixdMYdEEIBAKBQCAQCAQCgUhx8TRGIJ7UrCc7BcYv1hUYtyuezoJ4gnhyIp5O8Ek8nW4gnlTpxIsn/Yp25+ukk5V4+oFBYfGhEE8IBAKBQCAQCAQCgUgz8TTUoMD4D2yIJ14+nS9Y2Y4XT6KV7c7gfIAf4ukEiKfEFk9f0eG3eDrZQjydYSKeviUQT6p0Ot/GinaqdLIST8MgnhAIBAKBQCAQCAQCkSbiaZgN8aTKJ6uV7c4XZD2dw43njcTTGRbi6eQoiic7RcYhnhJEPA2wKZ5OsRBPZ5qIJ7cr2l1mo7A4xBMCgUAgEAgEAoFAINJZPFkVGLcST07rPJ0pmG6nF0+n2BRPAyCe0kc8neiDeHJa38lMPJkVFh9iIJ7GxvyKP3qUqL+fjvb10dHPPgsi/Zv9TX4MgUAgEAgEAoFAIBAIf8XTWAPxNMSiwLgf4smozpNT8XQixFPyiqevxkA8nZYA4ulqTjxdF1PxxETTJ5/Q54cP0+cHD1L/P/9J/f/4B/Xv3x+E/Vv6G3uMPYc9VxZRCAQCgUAgEAgEAoFA+CeeruPE09UJIJ5Oi4F4+irEU/KLp4E2xdPXoySezFa0G2ywol1sxFN/P33+8cfU39ND/d3d9O/OTurbt4/63n+f+t57j/refTcI+zf7m/QYew57LtuGbQsB5W80NDTIINAO0A4QCAQCge8vBAKRpuJJtLLdYIuV7aIhnr5uUzwNhHiCeOKlk5V4Ot0H8XSRT+LpF1ETT0ePyllLTB79u6srKJvefZf+9X//R5+99RZ9tmsXfdbYqIX9TXqMPUeWUUxCSduyfcgZUJiGhxs2BNoBAoFAIPD9he8vBALhXjz9wifxdJEP4ul0m+LpJIin1BNPX/MongbFSDyp0kkknlTpdKXBinbRFU8sy+nwYXkK3b//9jf615499FlrqyyXPq2ro0+qquiTigrqLSuj3tLSINK/2d/YY+w5soiStmHbsn2wfbF9IvsJN2wItAMEAoFA4PsLgUAgfBBP1xqIJ1U+icQTL5+iLZ4GeRRPX4N4Sm3xdLKP4kmVTkbi6RIT8fQDG+JpnO/S6dChYJbT++/Tv9ragsKppoY+KS+n3q1b6ePiYvp440Y6smEDHVm/Poj0b/Y39hh7Dnsu24Zty/bB9sX2yfYN+YQbNgTaAQKRSHH48GFqbm6mwsJCeuWVV2jx4sWOYNuwbdk+2L4QCETsv79wHSPSMToPHaXsus/pvjf6aeiL/XTp/H66zCbsuWwbti3bB9tXEoincTbE0w9MxNMlJuJJlU9+iaeTIZ7SQzwdF2PxdLaFeFKlk5l4utxEPPGFxdlF9iPfxZMqnf7+d7lmE5s292l9fTC7acsWWSx9tGwZ7X/ySer89a9p7+DBFBg0SIb9m/2NPcaew57LtmHbsn2wfbF9sn0nunzq7u6mLdKxL1iwgKZNm0YTJkyQYf9mf2OPsedAOCAgnhCI5I+uri7atGkTFRQU0Pbt26mpqYnekr6zWltbbcGey7Zh27J9sH2xfSIQiNh9f+E6RqTltdRxlB7O76crF/bTtS8EJdKPFjuDbcO2Zftg+2L7TBLx9CNOPKnT7YzE0+UW4kmf9SQST2fHWDwdB/GUfuLpVAfi6Zs2xNOFFuLpChviaajv4unoUXkqnJzpxKRTSwt9WlsrT6P7WPryPfzGG9T5m9/QO1/+Mr3zhS+YIz2HPZdtw7Zl+2D7YvuU5RPLfGK/JCVYzacjR47Qyy+/TI8++qgt2HPZNhAOCIgnBCI5g2U1lJSUUKn0PbV7925qb2+nv/3tb9TZ2Snz97//3RT1eWwbti3bB9sX26fvGRN9fdTb2yvTh8RhBL6/kvM6RiB8CpadxETRkEX9dN1i58JJD9sH2xfbZyJnPunE01Ab4ukKC/F0oQ3x9E0H4ulUiKf0FU/H+yCeTnMgnlTplFTiSS4kvn+/PCVOznRi0unNN+XMpZ558+i9886zFk462DZsWzn7SdqXLJ9Y5pP0Guy15ILjCRK7du2iyZMn25ZOKmwbti2EQ/LET//0z5iSFO2gv4MKF8+lWfNn0dwVldRn4/n57LnzpW3+kkt736+kuVmz5H+396V3+7LqM+w+zy6J8r70sAFcNPA72JSa4uJiel/6Xvrwww/p4MGD9PHHH8ty5xPpO8oO7LlsG7Yt2wfbF9sn27f3a/MgNW3JpcnjMuiuu+7SkDFuAmWvLqWO3jS80Po6KPcvrM/Jprr9ce50DrdT/uLpNOb+DJkJ8zdTLyFieR+TkNdx/36pXUhtVPqenGvALKkN56zeTIH9aDHRj4PSfY70eUj3KqUfpMb5ZlPjWJaSG+l03Yv/jkCVT2yfbN9uYn9LvtSujdv73MW5tHl7K5k1+Y7tq6TPaTrllnUkgngSTbczE0+n+SCejod4gnhyKp6MCos7FU/6Fe148TTcF/HU3x9cvY4VEm9rk6fGyZlOGzfSh2PH0u5jj3UsnVTYtmwfsnximU/SvtlryAXHpdeM95Q7drPB5vSbDaCefPJJeuyxx0yfw/bxSYxEGsQTxJPv7aAvQJNDA9oJ1GpxT9a7Z1V4APzUZvro7VW2t4V4gnhKJPHEpk6z6TX//Oc/5T783//+N33++ecyR9nqrjZQn8+2Zftg+2L7ZPv2Er3vldIEnWwyIremI70utN7W0LnJfTuOnU5/B83Sfx7350I8xfg+JiGvY66N2mHyijrqQ9NI/T7Dx2B1mdgUOTfSaegLffTD5/9F1y76TP4vL5/YPtm+3UTrigm22/ysFZWCvrKXcscFHx+zotVMPA03EE9qnSev4smswDjEE8STpXg6IYHFE19Y3Eo8/dBv8fT5xx/L09/k1esaG+W6TGyKHMtW8iKdePkkZz5J+2T7lguOs9Xu2JQ76bXjGSLpxCRTbm4uvfvuu/KvXyzYjci+ffvkuf8vvviioXxKJfHk18DYbIBcVFQE8ZQg7aBu8ZjQzcDc7ftNn9u0NPzcnJ0HqXdPrvL/GRBPEE9JJZ7WrFlDHR0d8kDzqA/Tv9k+2L7YPtm+3UunQt1N+hiau7qQmlpaqbWljgpXZ9MY3U38qrfT6OLraw3J8ngOIvveyw9noD2VTZvLNtOq9RAIsf7+SsjrmGujd90/gaZnTeeYRdOfihygzyrrQONI8T7Dz2C1mZzWdFKl0zULP6WnNn1CLX//N00s/CQkn9SaTww3EVg9OdSeJzw1XdPuJ0ttPiNCQM2i1sM68XS/0qcutS2efmhTPKkFxhNVPJ0A8ZR64mmAD+JJlU7REk9Xxkw8KdlOffv20WetrfJKdKwoOKvP5GZ6ndm0O7ZPtm95tTvptdhrxjPriU2REw2Y3nzzTVs3TSwTSr9tLKbdpYp4YtIplgNnkXj62z/76V//Puor737476QUT/osJuOBE/8L/3QKsCf291L729KAeE9H2v/SD/GUXOJp9erV8tSavj7/VAHbF9sn27e77+V2ms5PqftLIR0Ufk32UuVifvA6l9Jm2Jogg8hwv5lBmzsxto/X91dCXsdcG52wOmDwnINUupS/hrMJ6gniyW6wFencTK9jWU7/9coR+ld/UNI2dwZFlCqeGGzf3sTTZAoId9FHHS2F2mzAJ/I194773wtQq3RP2WEwH8+heLoyiuKJl09exNMAiCeIJzvi6RtRFE98fScz8fSIp191WG2n7m7qe/fdYLZTebk8LU4uJO6TdFJh+2T7Zq/BXou9JnvteNR6YkXBjWo6/c///A/V19db7uPQoUM0Z86ciJpP0S44ngriSZVO8RBP//nMgZAUGrXoIB351L8Cigc//pzumtcT2v9/TD+QRO2gg+bamG7Xu4f7hX9+nYMRWi/t7+ygjg86DG8m0kk8IRIj8vPz5eLBLKvVr2D7Yvtk+3Z1JRZN5yRwvoXM7aX8p7ispz0Wzz64X74GD+rH53389XmQeqP8e1Bf70HqUF5v/0EX/QE/iNzT588+3YinltzQIMsy21M9x50HxZ+L/Bg7dun82/QnvQc7qP294HYRb7m/T/OZWtfu66WD+5XnS8cYzQL2fn9/JeJ1rBFPBlOGlDsHyr7fzlT3vtDno39K72Gu7R+2bjyh57N2c7jXZlvbr7SNDtvt07TPcXO9uTwGJ+Ip9Bof2D83fP8Zq76HxWXzXWY7Leilxg/+FdrPHzcejBBPl3kWTxalFw43cSUerL+7dOLpERviia/zFA3x9A2IJ4gnJ+LpRJ/E01kuxJMqnZyIp2t04ul6P8STvJJdZyf96//+jz6tq6PerVvpo2XL7K1e5xRpn2zf7DXYa7HXZK/9eRxWDLFavc6ufPrHP/5BTzzxRMRqdxBPxgNuXjrFYyDe+H4f/WJaOCPpsWWH6N8+3GB/1neUxrz0UWi/P5/6T6ra/a+kagf83Py5NeLpdvw0O/VGIfyrv2DwdThAuX8RzPm/fwLl7+R+291fGfoFbPL6QMTgetUT3I25vsuQtlXTtycrvyxr0r1Xt0I8IYSxfv16+ccCvwesbJ9s385jP+WEBqEZVLnfjvzICbV1viZG5fwxyvXULo1tW2nWuPD1l9OiXKjS33OzxDU5pi/eTPv7jQYVBqLlcHhwF5r6FxrwZdCqmjrp9cYI+4NVTupUcYPInLJKWmVnnwebQn3MmMUG0ry/PZzR+YSx9Ot9O18wZYTrbzpLlccnU6Cvj1rXzxLWgGrdkhMxZTJU80c6/wc10n9VKNO09WAHFf4l8j2P+UuhvO/WomzB8WVQzvZ2ofgoXTFLcAwZNHd9U1SmDfr9/ZV417ET8cR/9yqD9f4Omqv0A5s/6KODLflcOwlPae/dUypd14KFB56YS02dfRHfo3Wr54rbrf77mL/my3KFtaomzM+nDt1LmPU5WdP+O9R+xYuQhGv73DVulebac3IMbsUTew3htThuOhW2GHTEvWyhFUH/OW4W1e1ppZxx0Z0G7UQ8qdLp6gWf0Iwt4TInFYGP6eKsLvnvMRVP7EeWsllcZm9lSLBuzsowvXfjxNP1OvF0jUPxpMonp+LpLJ/E04kQT+knngb6IJ7Odime+MLidsTTtb6KJ1ZMkaUms2l2b71Fn1RV0cfFxbT/ySf9l04KbN/sNdhrySvcSa/NjoGOxm7Zzu7u7oiaTmzZXCab3MinsrKyiMElew2Ip8gBt146xWsgvrn5M810uOlrjpCXFsia71OvH9bsc13dp0knIPs+4OrKZImm2/HT7MLTesIDIt2NRmel4aAqJLjUmhZ8PYwntDed+iKtrK6U0c1L4Qd9keJpReKJp2SbaudXP5FoUVBQELUBK9u34+gsdZDtpMqSPuo93CuvyhXOAgjL2jFZczW/LKsDr74PSg3lCV9/I9Brf1DR+3au5jUirm0LphcFHA8i7e+Tz+pUpgmbHL9ZvZ3WpRmGr8fqkvRyCy7M1Yt3RTzZKsIbGozppkN7QDMI7u8IDY4N38/8yoT//kq469iReOql/Cd0GU/cd970+bMi6r2x53TU5Fh81hlUGpJPvVT6lwzrRQpatBc1X/tRyP3Z1NFvr8+Z//x4TnwfFDj3cH/Eny9nx+BGPEnnZr71uZml75t6A5op0abnNc7iiZ9i9x9LjtDH/wre8fb+63P60V/+RpfNOiA/xm8TC/HEfqgI3SOOU4V8uB1NWOFIPF3rQDzpC4w7EU9n+yCeBkI8QTwlk3i6zhfxxOo7/fOf1Pf++/TZrl3BouJsmt2vfx018cT2LU+3Y0XGpddkr82OIZZ1ntgKJfxAiBUSZ8Ekkxv5xIpQZmVlabbzuppRKoonkXSK50B0RfknGlG0ZJv7G4O/Fn2s2dfizdFPtY5OO+CzLSJvGvhpdnxmhVg87adsfvC3opI62OD48H5q3ZKtuTmuVO5BwzfG2qym8CBOee2lTfzdJG3OCt+Aqr9Ltq+frBkIQjxBPCXDgJVv63LWgOvgB7PcdTg/hzbXBFiVDc1qbBlP5VDrBwdledXxdilNv/8uYc03S/HEyRFj8ZRBudtb6WAvE2YdVLlaO7C2VSvJ5T75fiF7Z+Tgt3J+hq1BU28nq0ESoLqiuSEZkF/DCr+3UqCzVyyJxk2n3PWFVLmTZYNUctJvMhVKf+tlx957kALbc8OPcX1axD7HzaWm9/ZTX1+vtE2khJhb1CSfjz7pfGzmsjLGcP1hHTfgzsjKpVY2xU5qA+0thZrzm12zP6G/vxJePK02Fqr7d+Zyn5siRIVidQzNXZFPm7dLn+sBvv1wbf9gO21ePFkjZfYrP96EBvj3T6bNLR1BUX2wg0pXTBfW2tlfw31P3z+dSt9m09t6af8HTZTN9S0ZoexBiz6Hy0zmhaoa7aEpxkyYuT0G5+KJ/+GKvXbOFnYuBeeG+2FLvu94iu8jlf5TOraOPZXa/jOG4kkVTCJYttOQv/ZSxbufhbafsuFDuvDPf6er5n8sPx5z8cRns4d+cAy3I5vi6TqIJ4inZBVPg+IsnvQr2lmJp5u9iKejfX3U/49/UN9778k1l3rLyujIhg20d/DgqIkntm/2Guy15DpP0muzYzjaF7s1YBYsWKAZCLHV69RwK59ee+01zTbsNSCeEn8gOnv9EY0w+uNrh2lZaa8jJq44pNnHtNWHKRb5e9FqBwF+YKYbbPDT7DZ/0Gcqng5yN4yiLIZwbZTwzcXBnTnCrKbW1fqMgZzwFBSuELNm6d3+3nANC6xtDvGULOKJkwuimhd9+5to1YpcWrV6lYBcyi1Sp0bpB4FsehY32OUHdFmFkZlV/JQzCXUg6Id4KnwvcsOOLbOc1Y5zu8/DTeEBeNZm3T4DoX3azfIJr2onnY8+8XmQ+8D1rTrBmBs57ZEfhAvOs3afcyOyPPiMlohsLa6fDA3mDtaFRcBTgjZwmMs01U19gnhyKEfHzaXS7aVUWsaxpZCydVNEQ1JQL56y8jXTLvksoHxBP8Fn07HrkG87YwQ/xJRmhfuJ9n7lh6P7zbIDD2qnv/da9znaxyfr9slPs1MzX9wcg1PxxL+G+Fzy/chdfylVXpqTaNLxHjS7dmIknvispqGLPpFrNrGV6phQUlexm7Qx/Ite/d5eumDq3+jK5w7Jz9NnScVKPOWbtCML8XSzA/GkrmwXT/E0COIJ4ikW4uk8j+JpSNTE02efUf/+/aHC4r2lpXRk/XoKDBoUNfHE9s1eg71WqMC4dAzsWGIV06ZN0wyEPv74Y83jbuTTjh07NM9nrwHxlPgD0f7PiTI5cfSzqcFpd3al09RVh+Vt1O0fXfoR9fXHZtpo1NoBl+6uHZhxGRK8+DEQT+FB0HSDNHjuly51f9z0Av5X1FDaddZ05djGUN1B/cBPuml8D4YJ4im5B6zt66ebDlZ4YSGedpIb8atxZI0RLkuQZRcYJLPwInhCRO00l+JJHbhFdjzcAHCW9dQZD/sMD7K174GvlWW30K3RNGONJHpCIG36e6m1ppIqa1ojHus73E65T2WYiqe52/eb/GiglWBkkEWgnaJsNYgcQ00HIZ5ciyc78FPG/j977x8U1bnu+f4xNf9PzdTM/HlnTk3NrzO3rnX2mTmTMzVTdbFmF3vuNbtqPEnmpFDOzlHP1sndJ+6EuDeSnIzCNiBRMToiJhg2qPEXBCJKwAhs6YiNgGID0raQlsbGlqaRZjXQkjx3vau713rXr+7V0N00+H2qvpXYrPWuH++Ptd7Pep7nVe1bqK7PJe5ZrIWn3LGVfGb9ao+nN1nuLpt6kQ8pXDdAgYAQAdcTrQo0bfMkhOSRD0Xxxpxoj7x52DhkngM58vGWdQ7JgafweKuFkNIAF44aqQtPW4lpeKIZ/MsEeGIA6eSteenj57XhBSmJOANRDDrlVM7StPCDtB9bze7/PuymPy6d0iUVXzXw9FZsRceUgKc/XSF4+iOAJ4CnTIOnf5hC8MRDp+WAp38P8JQ6KygokCdBv/nNbwy3SRY+ud1u1bbsGABPa2MiKiz+SNtPKEnBf7p/ig59PZcQOjFvqf/KJSnf+mmAZkOZy1WWvnbAfXnkEgiHuTA7bQiQfvLFJwOPvOjmM73Fi/97bD9+QhwNEeASE7c/csgTyarugOYlp8xangcYLIsnrPxEKtbGVX9/1Cz1pV1v71IpX+eZwr/Qn9Z8kRf759txoIg8UXPqctSsFDyZTSClidrFgmV5LyRbplkeJxmWc+FtqQBPRvWoXIdAzgEbNdSeprLiQtr1lhZIGIMnIzAWv270kzmtJ6l6fI4oXeFCAE/cfX+7kOraNACS21cCR6qqVHvTvMnqia836XnLh2QyGK1e/ZIP3yssZ6FwDuI5lDa8PV9zjDc1bSPibRxvzDE4dw4YKyt57qL+2ZWcQ3LgiR8L4iUA1/Ytp4WxynAsTDN4YhDJ4VUo5f/uEqQwuj85EqTmQSXvaGmLzzTEbg2F2pmBp3+/TPCkhU+pAE//EOAJ4CkZ8PSP0gCe/uUKwdMrCLVLHXhiicXNXlSSgU/ff/89wNMaBU/Mns3+QG8cmpYh0v/zOz8dbzGHT59enaOfFfvl7f/7wWl6Mp1Z6pHOdsC7lscmTUqYnX6lLSPwZJTrwVzKC4ryRTTqifHoggKWxH/aopPDfOllXJlA52tfzmGwtQieuMmW9TYdVvqbEXjSwSVl1SDWr3wWJmqpAk/xPIns5csLm0m+TC7JeCynDVeeflXNlYEn4wltmOya/DGJxsZEE9lkwRO/AEOmEyQjuXgS+2pX9krWk4obE+yNVXEX/DjcNqZra1akA09xgLZN9oaOhdtx8IFb1GR555AceOI9nkpu+pIAT4nhSngVwBNbme7101OSR5M0zxP/8/9dfk67Ls3I+wxOzNO/+MhN/9cnM4YhdplNLt5vmFx8GeDplRWCp3+ZBvD0jwCeAJ5WAp7+cZaCp+XP3F/S5OLaUDvmrWRmVuGT3W5HqN0aSy6utdGnS/T/HuBgUtm0KXj6+cfKdj8r8dOw50XGzzet7SBgV14GpCSgPm6ipn+hNPR4epsL5RmMJN3VadBJzocOco5z30a53AhlNz1KwtFoSIEMxd6qIx+3bbpe7FLdb1Ldv9aKZet1Zd2EVeXNYLzymv7l3SgXj2AAo+J9ZTaaOSXv8RROAJ7ihcM4qpfn8bScMpUk4/lknxXvSG+V7HFhTyKkzAp4MhqblETK0dCn2gayDzjJw5J7m9znVIMnJRRISYyuH6Md0hjteOihcBY/v9Y1eNLuqxojqsS6Mam7h+LzVaw/TyCsg56BiTHqv9lMpytKdCtbsgTavCfQ4at2qR0YHcP5MJJkPxBONOYYw/XTveJWgpJrjE/4v7xzSA488eeyXI+n/lnjfXw3q1YFPP3r3z2lnWcn5MXCZ+d/oMnZyBxr6Ycf6b8de0z/9uNn0rZGIXaZBE/8R07Fs88SePpVloKnfwzwBPCUSvD0T9IEnvgV7TIHnsRR6YeA+JLjdtPC/fsU+u47mmtpId9vfpM28MTKZsdgx2LHZMdm5yCPkBkwbXLxmzdvxt3eCny6fPkykotbmEgawadsst5HYVWicDPwxG/T9WBxVc41ve2Ad8svo/6BhrhLjBtNvuTVkt46TGaBML5Bu5Rk1fFIlTGKmqPHzi+vo7qoZ4Y+70MBXWis0iREBXgCeFr7E1YblyRa5+1gBFe4XCLWwJM6x5PN5EO/YJDjSclBVWiQR0i9qIBhjqfidrPRQJVIeCyZHE/LKZP70l7W5lCWUy9qTgqwLA888WC+0DB3UibAEz8xNl1J0OeQxmjbgCern18vFXgSn6ixdp1fbpaXKEwOKZm5jcak9Esesne0UmuHnQLavrUkkL22kAulF/u6zyDnktaWfGKZ4jHYinpL1sET73HI8iqNyV7OYh/lO9+yziE58BQeb7awqEFAnX4grAbHh008pfhk/5la1Y55MLFk4X/00TgdatOf17H2Z/Qv9k3EDbHLGHgS1J57DY/CmQBPsZXt0gGe/gnAE8BTOsDTP1034Em0H2Zn6cXEBC0OD9O83U7C9es088UX9ODv/b3UgyexTFY2OwY7FjsmOzY7h0xaW1ubaoJTWVmZcJ948GlhYYH27Nmj+hs7BsCT8URSC5+yzZIFT6tl6W4HfBJQVdjHrLXJFz8BNQxdWVK8KbSTPfXyxtpV9LgwmThJQcOzPnlVO99s5kJ5AZ4AnlY8YfW1G4a/GE7hbp42DauJNwlU9W/DVe3EfsblG4qBifghZOoVokxXtXsoxPUOME8WbgKellUmD98UVfUml0F7ueCJrxt9HnCnvAIdnyg81eBJvapdgwEoCKtWIUsl3Ad4Wtm+iVa14xfdKLw6purvygTfeMyJwG41tDUCCGPcCrjN0vPZKnjSwHLdgiLG4NjaOSQHnqRjJFods+OwfhzhoJj0cU3TN7T5qdIFnv64Qg+MWDLxf1fmp3/24ffU0KeE2I0+W6R/vf8x/Z8Hp+OG2MX0xysGT4XkNCki8MhOJW8ZPbfWLHj6pwBPAE9rGTzFoNNP4oCn/5wK8PRjKERLT5/KCcZDnZ2RcLvXX099mJ1YphRmJx5DTiwuHpudQybtqXhM7STHyguQGXw6efKkrjx2DIAn84kkD58AnrK0HWgTmGryLyScfPEr77CX3+pWGvMJFA4L5HvUT1VcDijdcuJ8qJ9B4nD+S2Jk/4DBi63yYp5f7chYvQA8rS3w1NLSQn6/X2yXqYOTrCxWJit7uaYOxXqTdhXXUf9DDwlCmMKCQJ6H/VRXvituPpe4k0BN/8wvqiPHeIAEsX96Bm1Uxk8KODDMT2jZZND2KGDYp+OBpzffzKe6DgcFpGsJkKOtSrVfg5UV5VJQpn6FwOQ9J1fu8fQmlVy0k29WEOs2QGO9zZrr2kXt40J6wJM0lvL1fJr6H/nENhAmwTdGzRUKHNiV4jE01c+vrOzHaQRP/Ipv0jOwrV9qQ6wvsjZUwLUfFgrGe/ZI3sI3HdE2J/Z3k+ex+gNQIbUOjEnjjzDro/6rhzXJyy2MOarzb9eNXUZ9NPlzSBY8aY8RG0fEexPwkO2iehxulqGdBly/XUbtg2Pkm/CQ/WpVWvOj8fZK5ZIkHhgxTyaWZJyF0/2r//U9Xe6boXvjIfpvx8fp3xzwma5ipyojWu7KwNObdLixnWzMIy2q5sY6KnkvX5fg3u5LPFaZgKf/HAc8/YSDTwBPAE8AT0mCpz9LB3iS8jxNT0fC7RwOmu/uJqGtjWYvXaJHf/RHKYNOrCxWJiubHYMdix2THTuT+Z1i9vnnn6smOWx1u+fPny8LPmnFyl7TwCED4ImHTwBP2dsOtB4BZqszmU6+HjUnkfhUMzHjJ7GaUBqPyhvLOOSHX7Ep6Zf+DIAnWHbYrVu3pMUhmOfqDz/8sOLyWBmsLFYmK3sl5rxaZnEZ9gIqfDv5SSBLrJufsPwycqp2DtDpt5JMRp1EMmTLfdUIjCddptqrazlwZbk5nvjcJlbvJQ/KUgWemHdVmZUE5yl2TE/18ysr+3GKwJNZ0mwr4wN/XFtFvoXncR35lpQ201yeeJ86+cNREuBJA1/lVWwNtkvuHJIHT+wY7RbuTclVjed2eEznfZ2JxPy8/dWlJfqzEwbg6ESY/vSoIMGnf/ahm/6PD76nf1UyaSnETvKaEstkZa8UPCV+dpWRw2dxrLIGnv4M4Ang6WUBTzHolE7w9B+jnes/pQw8sQfs3By98Hpp8eHDiNcTSzJ+7RpNHzlCI3//768YOrEyWFmsTCmpuHgMdix2THbs1TDmPl1YWKiaEH7yySf07NmzFcEnViYrG+DJ2oSbwSeAp+xtB3yOl3iJjpUJbKFuwhP2OaiqyMAz4818qmrsN3055SdmurxSnJt7vklYDg+nklmlCuDp5TKXy0X9/f00Jz6LmIfDSiatbF9WBiuLlcnKXnEfHO+nquJdpi/uhSebJW/AWFLvXXLYqbUVpijgoLryAuOJVnUr+QxdHJ10ukg/UcsvOk2OcYcMMi4YgKe6bge1V5cYwo26m2NJTMyVcLSVlOk4mW8Qzrsc8FRoAp7yqd0wf1KY+hvLTO57O3nG7SqwJk1cZU/QfMOwIj7EJR54KryonUB7qPlkiUn7aiBPGrIhpPr5lZX9ON7KdEnse7jDPL+Wb6BZgc6qCX0hNfR6dG2gv7HKBDbnU5nY7vR5ksLkuGq8El5+URX1jwuGbSzumBN7RndYfUYncw7W7qnRSpjOjjoqMILqb5dQ64BJIrylALXXHtacW77Uh529FxLm0VupVdl/oA3HlujPDeAR82pi8ImF1rHQuz85ErQUYsfKYmWystMBnvLfLqCyk3VS3riwCWw0HauMwdN/is6N/2OawRMPnwCeAJ6yBjzFoNOaAU8xr6cXjx/T4tAQzff0kNDeLoXFTf7P/7ki+MT2ZWWwsliZrGx2DHas1fJ2itndu3d1k8L33nuPOjo66Mc4yc4XFxepqqrKcFLJylwPwOFlNoCnNBkLx4nmXPL4AhRep+0HoXbpAdtpg6uCIK1K6nQ6pYkm83Jgk06W3yUZsX3YvqwMVhYrk5WdwhMlzyOnvBrk2LiPhKUU908f1z8tlB2eDch9OhAvj5qRp8GSQAFfJA+bL5Ci+5R0mZxnpZVQnXTYUpiEgM/4vgsB8oyLvweEjJ1LINYGJljI3dp5fq2Zfpyux6vYF+WchhbaixDbXuwvwqy165PbaaL+ns6PYRk4B6vHkMY/X4AbQgVVW/HI4dIWVulcpk08/5F2NCzRnx43h08MNrG8T1Y8nVgZrCxWJis7Wy3D4MnI6wngCeAp68ATa7D/PM3g6WcpAU8UzfUkPoDCo6PSanPzt2+TcOOGBIyYt9Jywu7YPpKnE4NOYlmsTGklO/EY7FiZzu1kZDU1NYaTnOLiYjp79ix1dXWR2+2W1NvbS42NjVJYntE+rCwAB4AngKeX2wCe1hZ4YsbyuLAJJvNuYKE17N/MczUZsX3YvqwMVhb7NywOeMoG4/LelHV4UE9r/PmFfgzL3JjmlD0S80/2G9ArB7dAQJku+XhK+5InAp+YlxILkdPmfLIitg/bl5XBymJlZrNFwdPP0gye/nmccDuAJ4AngKeVkacfIyvceb0UfvSIFgYGIvCJeT5duyblZ5ISjltZ7U7chm3L9mH7Sp5ODDqJZbKypRA7tpLdj6s/sIVCIVP4lIxYGaEMgTQAh8yBp/drn1PJ5SAduzZHFc1z9L8uzNLu088BnmCwdQSepHmCIEghNd3d3fTNN9/QlStXkhLbh+3LylgLHhIvL3gSyH61gdpvNnOrKhWahhHD1tbzC/0YlhlTr4a3q/yCtPiDz+cjp2aBALaqYLqNeSex0DiWl4lBJLYi3b+zKLYt24fty8rIZk8ngCeAJ4Cn9QKemC0t0Q/Pn9OLJ08i8Il5PvX0SHmZWFJw5rk088UX5PvNb2jiL/6Cvv+TPyHnP/gHktj/s9/Y39g2kpeTuA/bl5UheTox6CSWzY6xmiF2RsZC5LQ5n6yI7ZOJ8DoAh9UBT1YE8ASDrX3wBEsn63HIOVBWHTxx5yLnVGobQx3h+QWDJTeUPEq8OEN+cQMFcKsAngCeAJ5WGTzx0OmPswY88fCJeT6Njkr5mFgycLYSXaizk4Tr12mupUUCS8GmJgo2NkYk/j/7jf2NbcO2lVavY4nExTJYWZKnUxZCp5gxN2vtaneJVq9LdyJxvLBl3m45F2nbiUBC4PQ3J2eoc3ARL+4wGAwWf4pG7dWHqaS4jNrHVxk8sZWoop5O+W/toqqrDlQPnl8w2PJs1kOttYep8L1d4njCeUC9V0bNvQjfzWLw9Mca+ATwBPAE8LQq4CkGn2ZnpTxMUsJxttqdwxEBUHY7hb77LuIF1dEhhdFJEv+f/cb+xrZh27J9pNXrWCJxsSwpvC5LoRNvT58+pba2Nvr0009p3759VFBQIIn9P/uN/Y1tgxe29WvM0bjdsUiHvp6jX1XP0M9L/fTfD07T31Y/p0+a5sjuWv24DLQDGAwGgwE8wWAwgCeAJ4AngKdkwRPrGBtWHTxJM+8fIwnH2Wp3zPvJ7aawy0WLw8NS2NzC3bsRuMSL/Sb+jW3DtmX7sH1ZGVIi8R9/xGiJFzYY2gEMBoPB8PzCjYDBYJkATxuic2yAJ4AngKcE4Il1oP+QcfAUM+b9NDcnwaOlp0/pxcREBEKNjko5myTAxMT+n/3GYJO4DduW7cP2Xf4xlmsAAIAASURBVAteTnhhg6EdwGAwGAyG5xcMBluz4Ok/ROfOAE8ATwBPKQBPf55R8MQBKOa1xMLlfggEaGlqipaePZNC6CSx/xd/Y39j20geTgBOMBgMBoPBYDAYDAZLD3j6c4AngCeAp8yAp7/NeI9nIXMMRIXD9OPCQkTi/0ugCeF0MBgMBoPBYDAYDAZLPXj6W4AngCeAp5cFPMFgMBgMBoPBYDAYDAbwBPAE8ATwBIPBYDAYDAaDwWAwGMATwBPAE8ATwBMMBoPBYDAYDAaDwWAATwBPAE8ATzAYDAaDwWAwGAwGgwE8ATwBPAE8wWAwGAwGg8FgMBgMBvAE8ATwBPAE8ASDwWAwGAwGg8FgMBjAE8ATwBPAEwwGg8FgMBgMBoPBYABPAE8ATwBPMBgMBoPBYDAYDAaDATwBPAE8ATxZB0//JQaenE4nQRAEQRAEQRAEQdB6FQee/gvAE8ATwBPAEwRBEARBEARBEAQBPAE8ATytB/AUDAYJgiAIgiAIgiAIgtarAJ4AngCeAJ4gCIIgCIIgCIIgCOAJ4AngCeAJgiAIgiAIgiAIggCeAJ4AngCeAJ4gCIIgCIIgCIIggCeAJ4AngKdsBk/j4+N0/fp1Onv2LNXW1kIQBKVEbExhYwsbY/BCBEEQBEEQBAE8ATwBPL2E4IlNCAGcIAhKN4ACfIIgCIIgCIIAngCeAJ5eQvDEvBHYxPC7776jhYUFgsFgsFQZG1PY2MLGGDbW4KUIgiAIgiAIAngCeAJ4esnAU8zbCdAJBoOlCz7FvJ7wUgRBEARBEAQBPAE8ATy9ZOApFgoDg8Fg6bLYOIOXIgiCIAiCIAjgCeAJ4AngCQaDwQCeIAiCIAiCIIAngCeAJ4AngCcYDAbwBEEQBEEQBAE8ATwBPAE8ATzBYDCAp7jyer1kt9upqamJvvjiCzp58mRSYvuwfVkZrCy8hGWnUM8QBEEQBAE8ATwBPAE8wWAwWEbB0+joKH399deSbt68Sf39/XT//n1yOByWxLZl+7B9Y+WwMvEill1CPUMQBEEQBPAE8ATwBPAEg8FgGQVPzGulubmZ2tvbaWRkhMbGxujx48c0MTEh6cmTJ3EV247tw/ZlZbCyWJnwiMkuTyfUMwRBEARBAE8ATwBPAE86e/H0O/rs2DGqrKxMqGNHKumbh0FpP2frefHfR+hMi1Muy9l6ho6JZR374hsKYj4OgwE8iWIhUy0tLZLnyuTkJAUCAZqbmyNBECgUClkS25btw/ZlZbCyWJms7OW8vNw6f4CKSvfSvrg6QDUNreT04mXPirKxnuW63l9A+2o7Em7rH2mlfeK2RfuPksOv/O5sO0FFhe/QqZbh5GDc/XqxvHeoqLKZ/KtYN46Wo8s6/9WUs0085/17xfPeS1dGJuNv7x+mU6yOSwt093qlfd1tr5baT1FpNTln0M8hCIIAngCeAJ4AnpYFnoK9Z+ijjz6yrJregLhXgM78LvLv4ro+uayBLz+ObPe78xTgjjH/8BuqPHKMjh07Q0PzmKjDYC8TeGLggIVPTU1NSXDhxYsX9MMPP0j68ccfLSm2PduXlcHKYmWyspN/eZmkmrwc2vCKde1r6sFLXwJlXz1r6jrvKHkTbN9XvTla51vplk8p41S0jNeqbUkdv696a/TYJxIeO31S7kGy56+Xn1qr90ogJt0Qy1G7Ve5/p3oTgCefjfJi/VV1r1fe1+U6fGUz1yYgCIIggCeAJ4AngKfkwNO98wpYKiunI0eOmKpc/HvzIPNlCtKZfdF9vrBz4KlcBk9BFdyKHeNjsj/HRB0Ge5nA06VLl8jj8UgggcGFlRorg5XFymRlL2cifm57jjyZ3Fn4DhXotI1yNBPShJPfl1zZV8+aus47kdDryFG7TQZPfTx42hQpI6fSliQ82Wb52OkET7F7kLdi8JRKiGW1Liz0Pb+Ndr5iVM8r7+vGbQKCIAgCeAJ4AngCeFo2eDp/z6o70gsaHxygvt4+co4HE4Onewp46gN4gsFeKvB08eJFKXQqHA6n7JisLFYmK3tFMGJ7tTkQmHlM9aWblQlpvG2hLKznVIGnILmHesTnnY2c7smXHjylrqwMg6dl9nWAJwiCIIAngCeAJ4CnFIOnM72BFU0SVu7x9IICT8dp9KGTnGOjFJh/YfnYQXE/p7jfsyT2gcFg6QdPDQ0NNDs7K4VPpcpYWaxMVvZKYYQ3wYTWOIRHk8vH4yLnyDA5XcPk9Vs4hxk/ed3DkX3cj61DiZlJZT+XuF8W5ZzJvnpOHXhKpj7d7kk9tIhzbL/3sdRupH29/pXVg3+S3K5oO/ROyuFxCWER209ujy5uXwOPJ4vgyc/6RPRc3B6xrfpXGTwts6+vFDz5fdE6YfXrmQS8hiAIAngCeAJ4AniyDp7mqflIZJ+Pv+wzBU/yvw3E78eA00DLGfrYaLvKyzQ6r4ZT31QWS38rvzREL57a6djvuBxUtwMgATBYFoGnxsZG6b+pBhJ82emDEXyOIP3ElSVtzjPIE5PHEhH7jcvrrN2rC+1hYUA1nTZqrYjkk8mr1U7qH9OV6gKDnDS5tO98h3INM8O0j/tb/ZDfFBww1aQwfDD76jlV4MlP9YW5JvUySa0m9XK8xSbW9Tumx2aJx4vycnX75mzfS52uJAGU7x7V7N+qP49N79CV3h46t9sEFnlsdLxws3G+o03bqP7+Yz3Y0WmbCsj0NZXTaybb7qw4bznXVTrA03L6+nLBk7OzmvI25STusxAEQRDAE8ATwNPLF2pndS26IJ0vi4Khunjg6WPzROVybqgX9IfPiuMnNd/3GTlf6I9dfKSSyjXbnunFenowWDaBp6+//jptQCJWdto8njytCiTShOp0VmyOn6h40wHNKliTVF9oLcGxChDMDNPxBAmSc0qblQl7wzvc3/aS02Qyv6GwNqWT3+yrZ22olQXwdN44x5Oxl89jFcSLKw30cHaWJ9gnl65YhU/eeFAoTrvydBhCU/15MLDTE2fbXDnp9q3qrYnPY39zdno8mfT15YAnZ8ve5OoCgiAIAngCeAJ4epnAU+VX39HQ4AAN3NOL5XMaff5Chj+XLYAnevGMBnoH6Ju6GIAqpsudfdR3204DYxHPpPHOzzjAdIS+6R2l4HyQxh9+R5+VcVDpsz/ojs3rSGUNNXcOEBbNg8EAnlKR48nv6aFDHFjY1+ZScv50HtB4lQyTn4UrjXSo9smpaFUmoyogtI3q7Swsz09eVw/VFOaaTko7S5W/5RQepT4WYuebJIe9VgUcDnW6FMC1W/n9tcqOyPUM1XLHKCCHP7UvhFkPnvL2Uuf9e+S432OskR559ToteDIKVVMgVWT7+q575PWJ9ekZpivV75iDJ08z5/GWS6fabNH97lF9xTYVuHRbuD6+rjdsP0CdQy6pLXpHbHRqt7V2lVdRSw4WIsj2c9lU7THWrrwjLM9VvQygXttfTX33bXTL3kPeGe11bZPvh9/3mBxtR5W/WbquzOZ4itfXkwdPk1w7yqXjTTZye8V763XRrZajqnuU6j4IQRAE8ATwBPAE8LQ2VrVLICWMzSJ4ik0eBi8rycVVZGicPoutjvfRERrQUaNnsneTkh9KC56OkP0p8jrBYABPy1nVLpfydm+jnZzytm+l17QhMtuPct4SLjok//0dg8kj7wmzNeoNwu+zlTo9wbghcDIg4L0wdht4KHlNclD5e1RQqqazlfZx16QPwXsJwFNSSgSe+JDGzdTqNgAnPGjkYAjvKXfuvh6o8F5DCYGLq17tYWcEpgqNwJOyUt+GTUf1nkAzioeTevU6vxK2V9ujhje9R+XjHLdPxg1jvOVbBfC0rL6+DPDk4/qkeG/9Om8oJTSzfsSPySQEQRDAE8ATwBPAk1bND+eXBZ7MVrV7MdaseCxdcSY8vxrbMx14Oo/QOhgM4CnNMEI1UXadl38vaBo29qC4f0KZhHc9Jv9IbcIQG37iHttGPUlNNEHfrAJa/DnwKmi4l5YXwpcJPPHeY7xXm1rDVKSFITPcb4XnEya5fq2iIz6c4eDWoc7HJnDqvGHbYx5RrW3NdGtEC3X8koeScXuNs6rdzCT1dTZTa6dNB7L83nuc95U1gLNs8LTdDDwto6+v2OMpku+tb8SlAlAsebt3GQnXIQiCAJ4AngCeAJ7WBXiq6Ryl+edBCvgDej3n3ZFSA56U1e5ioXYG4v5eLB2LA0/7augZ5v0wGMDTsmHEVtpXUU6HKg6oVVogexrlaLxC/L1qoJOzSZxQi8qJiv0//3fmMcLvYzqJ5oBDbFLfV7tVdyyt+L9ry+7jczqZeU29NKF2R8nJQr/YpN9ALMysU/Y2SgCeOKh3ym4ORWTvphh44r1hpHalbjs5r+SqE8/nHY2bl0jlReQ1285FxzeZQ08W6tnaVE3HxTa/c/vmBLmIJi2tkOewN9O56nIqKtym9yhKN3hS5XJaWV9fbo4nXb+L3cvdBVTT1CqFNWISCUEQBPAE8ATw9BKvamc9uXhKwFMS3laG4KlMfRwYDAbwlKocT0H/PVV42rloeJqZJ5GZJPB03wp4UsLjYpN6h8kE1kzasnkvqoiXTX3aXgjXRXLx2m1Jg6ciLh+QabLyGHjyW08EbmUlNr59XPEkvgc8LPK7WqlgU5IJyeOCJz91anNbJfQmSz14ylElL19ZX1/pqnY74ywK8Fqp9RX+IAiCIIAngCeAp3UGngKZBU+9Z7jE5n+gvl472W9r1RdNbj5Az+bVx9YeBwaDATylclU7L5dEfF/LsA7m7GtoFccmlmBZL5awuq+3h7x+Teid3SQkyq0kZ5Y9nmQPnM10rtNGfQbHudXLjiX+7f6wemItTqYLDCa8+9qGX1KPpxSCJysebEG/kvjb0OPpAN26b9x2+liyc7FenR5/gvPdmjhv0ozSDmRYpGkbObv30rmWVnIMDZPX65fOc2eS4Em9mmIu7auupk57DzlZMvxlABx1n0kEnnoSezwto6+vBDwpicuHqa+rmWoq91KeBvTtTFPYKwRBEMATwBPAE8ATwBMHnmj8Gy7H06jJzGOc/tDyDX3TaqdnLwCeYDCAp9SCJ3+C5M052iTLHCAyy/EUnHFRZ0s9XWErls1ocgKVtposwV6g8zJxtymT4XqXyTm6bXRFPFarfVgFPa7sV8Lwdpbupde4ZNidHoCnFYGnkcT1qUpALh97WE4yr/bMUQOrvjax7bQ0kyNBPTmbFNizr9PE88pdrwOaPDzdaRQyZxD2GR88TVJNnrJam1H7Sho88d56++sTbHtC5WGYsr6+zBxPfZ31VN9Ub1h/zk7uuuJ5YUEQBEEATwBPAE8AT8sHTwOqOYl6VTsVlIra0KVy+fwapeTmAE8wGMBThsATH/4mr+KlXtXOaDIqh1jJK1fxq6Dl6lez8qlDsIxXtTOapPq5HDbbyDETndy27eXyOkX2czYVWM4dBPCUaFU7vg3kGq5O5mgoWNaqdv6hauseMZ5mLifUXnLOGK1ql6trV7w3Uc19g3M/rwCtvFoT8KRa1S7Bffb1cB5W4r21klTb08HB0hw61WXiKTgzzNVFDhWpYPBK+zrfJpT+FVfuZqX+zt+Ln3TeQvgnBEEQBPAE8ATwBPCUNHj6iI7UfUP2XjsNjEWONdpyjMvjVE7Nt4ekROZB/zh991Wl8rffnaEAweMJBltr4OnatWvk9/spHA6n7JisLFYmKzutMIIPjeLyI/HeSWxCWm+/R14pcbWLOhv2GgIe3juFeR3VtNjI6R6mvs5aXd4f3pvkyn4+OXg5dQ65pGv3uu9RfamSfPy1SgVWvcZN8ju9nFfK9pyEq+stV9lXz+kETxqQx+qzsyfaBoaptbbAPFcTt8qcFEbW1EHuaHJzR1ctF4q3mau7oKl31JVCPll5AbWykEvWPlw9VFOYa9iuVN5E4j6RNjUZaVOV6rxir1U0q1aJk9uQuN+VLhYaKF73DO/xlEMFta2Ra/I9lq5J3b4305URa8m1eUgngZyKWnK4H5OfeRH6Jg3KLtDAt5X3daVN5Ip1VU+tzJPRTMzLyX1HFcZYVNss9vNJ6XxZndRXGPRZCIIgCOAJ4AngCeApGfD0sQyE+JLmBy/rk4V/YZfLajyWOLH4mdsB3bEBnmCw7AdPXV1d9P3339PCwgL98MMPKz4eK4OVxcpkZacXRvDeFPykdpLq9+cmTvatyk1jbR9duJCvR/GQiJOwObKq2WPVUu58rho9lMqhmt7Ura6VffW8MvB0y5c4vKy+cHlJwlXeUJaSescDJlbahz7HU9Gykpzzq8QpHl/sXqlBXPKJ8M28mY7nWS0zl+p1HmQr7+vJJvhn+aicLXstJVnvdGMiCUEQBPAE8ATw9BKCp/PLAE/lXw7IvzqvRL2Xyi5rgNA8/aFO/Ns+BSQd+WpI9Xf7V59RsRF0OvQZffcwYHhsrGoHg2U/eBocHKT+/n6am5uTPFhWAiXYvqwMVhYrk5Wd3pXO/Cq4oE5y7KdbDQdUIEdJ1nyAOk28OhwtR2mnJsnwa4VH6db9VtlTQpcA3D9M9RXGK4btrKgmZ9Qzxtul5ITKKaw1vDbVpDgvdaE+2VfPK1nVbpuhx9NOVXhZ5G+d5w9w4W6c1091PbVWbzM9tttea7zq2aZtdK4ryQTwYvs4V2oESDbTqZZWqtmdqwub87s7qMjo+Hnv0JX7w9RZudWwnUir4eXlqryMHP7oqnbnjeFTQWU9OUdaOW8ui+AplvNK7DN5cVbgyyutJoc3PX09WfAUg7nOrmpdP5fPV+zvfR5MIiEIggCeAJ4Anl4i8JRd9oICT8dpdGxU0jP/PGb1MNgaB08+n4++++47cjqdEkhgXiwMKrD8PcmI7cP2ZWWwsliZrOxseBnyelzkdA1LklYFM4QDk+R2u6QwIWkC74+E38T+HXTVJp6Uz7AQu+HosVzSinnZ8kL4MtRzPGjhdUfbQDQUzPKqZ97Hcttxe1bogcbaWJJlsTbodhu33VhbS6qdsTbqMbkXPvFaR8Tfl3md7Hz6VKv/sRDX7J4oSfc31l+9k0m1DQiCIAjgCeAJ4AngCQaDwSyAJyaPxyMBBOa9wkKnWA6apCdw4j5sX1YGK4uVuXZemDjPi03lBom9xb/vztEkJF97L4WoZwiCIAiCAJ4AngCeAJ5gMBgs4+Ap5hHDQqZsNhu1tLTQlStXkhLbh+3Lysh+DxiDRMmlXHhS3l660tVDTuYlc7+VDu3mE4jXrumVrl72eoYgCIIgCOAJ4AngCeAJBoPBVgE8vfTy3aN9mxLliCmIJgmHIAiCIAiCAJ4AngCeAJ5gMBgM4CnJkLvOpqNUsHsrvbaJ84DatJWON3QYhOBBEARBEARBAE8ATwBPAE8wGAzgCS9FEARBEARBEMATwBPAE8ATDAaDATxBEARBEARBAE8ATwBPAE8ATzAYDOAJgiAIgiAIAngCeAJ4AnjKVvB09uxZaUK4sLCA2TEMBku5sbGFjTFsrMFLEQRBEARBEATwBPAE8PSSgafr169Lk8LvvvsO8AkGg6UcOrGxhY0xbKzBSxEEQRAEQRAE8ATwBPD0koGn8fFx2esJgiAoHWJjDBtr8FIEQRAEQRAEATwBPAE8vWTgKQafmDcCABQEQakGTmxsAXSCIAiCIAiCAJ4AngCeXmLwBEEQBEEQBEEQBEEATwBPAE8ATwBPEARBEARBEARBEATwBPAE8ATwBEEQBEEQBEEQBEEATwBPAE8ATxAEQRAEQRAEQRAE8ATwBPAE8ATwBEEQBEEQBEEQBEEATwBPAE8ATxAEQRAEQRAEQRAE8ATwBPAE8ARBEARBEARBEARBAE8ATwBPAE8ATxAEQRAEQRAEQRAE8ATwBPC0lsHT5OQk3b17l7799ltqbGykCxcurEisDFYWK5OVjQESgiAIgiAIgiAIAngCeAJ4esnAE4NCXV1dKwZNicSOAQAFQRAEQRAEQRAEATwBPAE8vSTgaWhoKO3ASSt2TAyWEARBEARBEARBEMATwBPA0zoGTywELtPQKSZ2bAyYEARBEARBEARBEMATwBPA0zoET6vh6bQSz6c7d+5IwiALQRAEQRAEQRAE8ATwBPAE8JTF4InlWVpt6BST1ZxPAE8QBEEQBEEQBEEQwBPAE8DTGgBPmUgknkzCcYAnCIIgCIIgCIIgCOAJ4AngaR2Ap2zydkrG6wngCYIgCIIgCIIgCAJ4AngCeMpy8LSaCcVXkmgc4AmCIAiCIAiCIAgCeAJ4AnjKcvD07bffZh14YucE8LSG5feT3zcpyp+d5zST4WsSjxfZV5Qf7QOCIGjNP1OgddKmRM3gfkAQwBPAE8ATwFPawVNjY2MSUKibngbnKTwvaiFMge974mzbR4G5MIXDYXr6oFv+fWTyubRvOPiUuk32ZeeUbvDk7T1PRfsLaF9pAR2q7Uiwba28bVFFPfnZ754OOiT+VrT/AHW6E70MT1Jn7QFx23foVMswByRcdK5CLKN0r1h2HFWUU32bjbyr+nL0mOor90r3QXUNMXnviX8voNc25dCGV3jlUl7hAbrS68r8Oftc1Hq+nHbm5WrOKYde215ANS22SF2aaYXX5OgU283uzbpj5+RtFdtcPbkzAqEmI/XG2m5lc/zrXRfyU2v13mifYv31PHkt7Sf2xdKCaJ/L1L2apCti3RQUFtCVkUn5t1ZxrFD/lh1y26vF/p9grIqqaP9Rcqx3yBpv/JaeDXvpVO15ujXkWnfX3tdULj0L4vUvr7020l7E7Y439ZiPk1JZBm0mS54pzrajcrsv2l9ODp+1/W6dPyC3jdXqD862E1RU+I7hM9vRWU0F2zdTziamrVQ/NLn+J6W+YfGd4ADlmbwTnGuzLWvc94800z5xzC4q3Jt14zYEATwBPAE8ATxlDXhKyhtp4Cmp7EWAOsy27XbTUnSz5xygGp2J/rr0nHriHCvd4Ml/v1r10nGq1+RlwX+PCrjtDrVFXuD8vUcT7yu/7NjotdjLTbVN9XveKzm6FyBzbab6+6v0UmN2DWxC2nnU0vm/VpE58OEVJ8k5Vu7ppgK65TGYZK/kmmaG6dR2K/W5lVpd/rTXm9zG8k5YhDBrWZNUk6e+z/Ujie+xv/eEum4yca+4PiWPIUa/ZQtsqN6a1Fh1y7cK5+kX+x4DIpkAd8mM33kF1LpuJvaTdG67AoE6Pcbbte7nJ/cHyG3yQeO4DJa2yXAmm54pjlp1uy9oGl5G29i6Cv1hkk7lGT+znU0Funt53D6Z2Y8DZh+x0gXOu05Yeyd45R3qdCd33vzzI9vGbQgCeAJ4AngCeFqT4EmGRpw97TPZvvN7GTxNP7LLv7v80V9fTNOtVQRPofkFGjm3nXvZ2EtOo5fnUu7luaSJFhfmSRB/nx48Kf/+eb8vwWToFu2Kbrvli1vK79PK7xtezac9Rbv1ejdfBytWZ0JnfA3+kfOq89v47gfUdL2FbP12srWfpeId6i+LRRl40fTatZOWfKq8fIlsA3Ya6G6hM8d26140+a/RK7smP11RTbhyqbjmLLXbuuhOfxc11XxAG1XHFtvdTGbqbcOWkxRY9y8dPrqwQz2ReL3SlnA/9SQ5Q/eKqxt5DPHdotejv52448uqezt0Vhkvt7y723i8imrXu6U0FFgdQJ6XqQlg3PF7O23ZoveqKDhvWwd9bI6Gm5Qx9EjXY4NthukDjZdSq9Fk3tsht/cNRZdoRsi+Zwrf7iMQ8WhCKO1s2at7Bt2dyjx4+vzV6D2suqUGh7sVQFwhPhubLldR18NAxj8OaIFY2qBTZ7n5O0H/Dbp4ao8OnOvhk/l5B5J5H4QgCOAJ4AngCeApkYZonvS2NDNqvH3HI3oR3cbvUsCTcyr66wv/qoInYX6BFhcnqXKL8rKRp3mZUAOM3TQSXKSF+VDkRWOoSv5b9d0ELxqBbg7adBv/fu6ueD6LxvLbqfhV5Tx3nu/J/GBucg23KpVQsj3n7IbnP3L9AwtfvtPjhbDlVAsFDe/pEFVygCKnojU118R5rLA2c8dncOyZIVV97mtzZaTeNmypeinB04ZX3o8P94w8VzJxr7i6kceQ2SkaYZOhgbs08VzIqns7LE/At9NIaNF8vIpqXliF8wwYwLxMjIkm43fQ76KmY+qPBzX317pHhECzD88qYPekATxwnddBt/1twwYfCT6V//7hVZfUZrLtmTKsBU8JvSgnqUbn8ZpP96YyX08TD++KY4mdxp5Mqc6vdgf3MS16TxfmhYyP0aoPcemSp1Xl6WT6TjDjomr+2bFJ267Mzzup90EIggCeAJ4AngCe4qvH/VyGTc/u3aYn4di/5mloDYInpvkF8WXD3aTyQJFfKDUhdtX90+LLyTzNLedFwwp4qrHHncQFB5Tj5Z22ZQl4mqTfb1e+EN6ZYee6IL7AztO8JPH/pfMPUtO7ygt4Oj22+riwiI0HuZfqhYXoOc2L/x+9r74Wru7fIcfMyq/J31upHP+U3eDYC5H6fFijTNzS+dU3CfDkdQ2TY2SYnC6XPtmqf5Kc0t+Gye2xMHEWt3eL27J9LG2fVvCUQ8cNvTJi3gnv68Mt4t0rn3JtTre1a/N7H0fvn4u8sQTJYt1s0Y4hwnziiSC7t+7Y8cXyvJMZBk/50X4RTwsUEuK3C6f7cVJJff2+x4nb4JTBPc3EmJhg/L5Tw8GL7dWm4WFSO0m63/jJG2sPfPtKo0LCEO2R+8qnOg8gZ8NufZ8qbtDnQTqdL3tEtbgXSMjCZ4oReIrrRemqNwjfMgdPfo8rUudSu35seQGKxP1BiN6rRclTmx8jq7fEgKldeiZJz6iQEL89ev3WxrnotZiPSz6q22HwPpQmdVYoHnJvHGyJ/06w6KIK/qNQp8vSeRu+D/qSfAbOTHL9OJmxUen/fkAHCAJ4AngCeFr74KmVpmTQFKb2HTuo9bH8gyqH01oCT8FgSHoxG7nMvSRvOio9vDu5ELuNB2/ovuCnHDzFeQGbEyejCzN2eUKViZc1q+BJ/nIqThxsU/OmYY1j7YfpjS2baeOre2goXZOEmWEq4l70pUlLNDRSf08jdd9+cLNm8rKya/L3n+TaTZf4Mm9wnuzYIRdVvptPb7yaS3su9WUcPDlqt0V+210rvhTbqGiTHtbsa+iJJCev2GaQG+sdajXKoeMbpnOlWw1z3HTet9HxaKhCTdrCoDjwtGU7bYlNIgrPm7yUc94JO/ZQ8bu55uDJ20On9htc26atdK7LONzHO9RMRQaJbHN2H6W+B9/Kk3d5DHl+Xw5Rqu3X3COxno4XbjbJVbaN6u8/zhh4uvcsWa8DG50qNM4RVVBxntwz2hx8J2Qg3CdOqs4ZXTdrU27t9gbafiI9EzIL47fA+vpCZEL7IRd2dsWlaSf366nAoJ0w+HKowSzhsZ86zx8wzFuTk+acUkJolpqKzMCPnxp+HRsDL1F7Tb6J5+EkfSZ7HH9AYwuh7HumqNr9Ztolh/mZe1H2VefL96Xi4HZT8MQStL9m0mZ3apK2J9sfIpqmr/ZGzjfvzC0pn9a5wlyTfrKN+nzq9mg4bm3fS526vIRs8ZS9xvmT+LHRb6OdpnmV1MdPmbwdnDfrdslr3eydIBh9Jwg+qFGHVVo4b9X74I1bVG/2DHQb5zm7Ul1gUHYu7Tvfoe774jvOvk3KR1KWy/I1bvtVScMAQQBPAE8ATwBPKQVPdzxyviZ6PkyfnDpNR9uGlXi78FNqXZPgKUhzoXkp5K56C/+yxD/890hhJVrvA/5Fo24oAXia7V8ReGJ62lWquIqf7c8S8CTQjYPcy2me+FI6kuDLaxpDcPxD1bp8XHPx9glFvUtCEYXmVn5NwkSjyoOOvTgarUYohBYUj4iF+dUDTyuS+NLt5aFTj8pLMJ5OZQI8FdWQTYbKm6nTG987ofi6XZlMa8GTq9l0kijXtSbXjNd+wvK9VL6Sm+Qo8nRYSGStBxppA09J5G/yj9RbSOpboFotLC5I0uzHAEDc7TcdTU+i+CTGb+Zde+eUEnL3GVe3+nxABtqvBaeTVF+Y+P6kDfDOhWjs6m7D6wn6e+SJ+oftbgoOHJe3a+BD1Li2zj7uzIfmsu6Zom73u6ndVpXAi3KY9nEet3e+3m0Inm5ZSdS/v3nZ/UEL1aU0AuL9zokzdsSghVOXD8lonPErK3Puz0083rPE5WK7yLNw/JS+E3D37Y1TXYnfCaSPkXwKhny65Ul83vz7oPX6iYCk43nx98kpbTbsMwWlBTpIfRvgCYIAngCeAJ7WOnh6OK14Nz25dZlqxN/qjl7mwu2WyHNnbYIn6esp+yLtbdEkfY7ozMC0IRjgXzSKmzrJMdRDjvtGukeOPxxSoJEZeIoDk9jXxzzuRaf9yXzWgKdnA1WGXzn3VZ6gK502ORQpNL+QfvDkOMlBBJeF48xFwi1V57WyaxLm/XTGINQrr3Av1TTU0637w+T1RyZuC6sInrThI28crKER37T4Iuym9lPbdWEiTd2RkIMpt50qthithOSn+t3cPu8epjujk9JX97EHLbTnVRPQkk7wtOMsTfluyP36fYPVqHjvhIGZaWrcYQSeXHSIO/c9NS005hfvld9Nd66WqhMoe/STb6nPHDtLI152f8X7MdCkhClp7weXsJq/R7wHplyWeG9ZfZwpUv52qNOVEc+PRpvZeNdDfb33ONjKeyGyRNHRdhG7D3y72K3AFd1E7tU91D6gtMFiTRtkOfvGHtjpTvthJWfQ5RtSvqw7Dx4aezhkEDyxCS0fLv15/1PDsKxdpy7RmNQPJ2ng+nHVM6mg4Z7JqmT5dNF2l6bYPfe7qKVmd8JFM1KRP2hh9JIyvp3p4Sb7lUr43JMFmg8o3rrvfzXMrQSm5HeqsH1PoSx8puhym81woVgGXpT8arfVD6Zp9JKBx5OnmQNA28WxdShSd2Kdj7Rzdc7lGEq2P+hzEontc+YZPehn+eNuyNu/UVJDA6zf9N+lZ7Pac8ul6na7dG5TviFqOrZdn/+Iz2n4qngt/S5xe3Fc8mnaIQsvFeZpapTlnGqS24Pu+CmuO+fXStLwavFdzko7EVQLz+TSV87nCc97efWj8awvOk4D7sjYONJ/Vnlu8+M6v6ABB5yKa2qoqb0rLfcQggCeAJ4AngCeMgie7tPcj7K7E7WVVkZ+P1NJbQ8Exelp+uGaBU+xkLuxq5qVTQ52SS+1EU8Yc/CUjMzA04ZXN9PO3dtUytu+WfeFcktNV3pBRVKTrAi4GeuuMoR2ykvqZiqqrCWHO725R57eUQDfmQdTCb5s8l/v52hubi4l1yR50IVcKhhguAz47gI619aT/pwMFsDTRi7BbCzPBR8W1OTW5KwZPctNoCf1k6ktx2nKIEH+lkyDJ/F6ny8E6eIOs9WoOChS1EQL889V+8bulbfzgAKdvtYnkZ7qP65boMDZooCBN4616PP+BO+q4JN8P4wSjrNl0WOT3VcN7m3ornxvXz/9XUZz3Zh5AXT6YqtJKfduQ9FZfVLf0BDX1nJkjy31+BpZ2EG1H/ehgN1zIQYhxHuxSx4DgnK+qdUHT0F6PlzFPQdu6SaeRm0rOHqJG4diEMlFhzYpk84Wtz6nVHuJck/PDaVn3A0J3Dix47Q8lvXF8ja9WkpP5kNqGP/rOv124jXYns5n5TNF6+k3PMdDCb0XpeL9s4fGxOe0yktwSg+nKqXckZrE6eeUfbp9y+sPhuBJzh+njIl8UnwGZTorlBC+iw+mDXKV5au8VhXIyDyK9HnOWoq4HIqz3PHfNT5+qutu8JIyZlXfm7L8PjjAXefn/VMJz3tZ9cMnPX/XYGzkn5l5JyLPLv55HvXqnVrtBR0gCOAJ4AngCeApVeCp41FAgUuP2+lo9ZfRv31JR493kez09OMc9a1Z8BQJu+JfqmIvA7MmCX5TDp4STOQi/z0svWREQhKyY1U7ZcI3TQO2S1R5cHfcCUNRGpcTdzUr4LDu7rMVrni43GtSQkDYl86mc4dpz444EGpTgTpcLePgKZfavczraoFCIUHKSTO/MK3Amh1V0gsxW81REMS/i/1kIXhXB0ecTe9oEvGzZLWRfULzkQkH/zKfKfAUEM/3SfsHhqtRaSeA84KSPJa/V8pkcjeNhSIeaiEhdq9YW5lWJtavfiJOEPxU/2sFDNh8/P1V7gcPuuODpyA9e2Sn9vYWujM6rS4r9JwetB/XAY3VBU/vk+t51AuuUBnDWryLhu1iqlvxUsqr7dGNr3u+HopMqkzaYOSa56Ty5p/fVu6fONGMJA8OWYfQaQRPKi/ZGw8oOHOP8wb7gMYWNf0wOg7ZTm1Wr4g3cl6Xf5Al3xbkNhlZtbPlcg2dOfcF3XSlB87MhRY4sLCdHH513qY3jkVz3AnzHExRtvv9DgVUP4uuFpttzxR9iGmIFjiIoPKi5MKgGIRh4flDZ41yPE2J19VC7Ta79DyXx1ax7p4/G6TqWJ45cZ+7BuDJWn8wAE9zQrQ/TCm/19yWE2wLz3kQf0luV9JYF4rmKgsqMOT1ig4pmf8b3HtK8aWr5Br3SdtL7VCs/yn/JE35/NJ4ys6VHf+i0fHn0vtOUNlr/ZnTcyyXe575Ep73cuqH/zjRNKodGxc0EHIzdXq074zbaSCoJEqX6moO0AGCAJ4AngCe1ix4aqWn88TlclqgGfEFfy6qmRn+j0SBh91rFjyZ5VAoahlOOImotLkk9+gpv4HE34PeG8aJwVVQYDdVnCqlimNqFZdsV8GnN6q6V2cwjzPJ4kMeZC8Qn4sGupuo+tjupFYYW4kCQ1/IxzjSNZpEUvKoUnVNfBid7OEyTWMP7dTy9XHaow3F21Senhw0lsCT+PI6o8178UwBT+I+sxrQOTdzWwdHHGf4kLWFaNgMn7h1noIPqjIPnhgI5BLz86tRqbwTQvMG+2qTzUf6YQ7TJkUbX1WHJd7ycfsw7y8jD0XmfeC7IU/a4oMnHmb20/WmajpeWkA7t2+OD7bTOAG3uadNx7xgMPblXbwPW3iAaeB5JPaVRW5Slhf12OLH1zMPDEJkZkzGo2ljcBfMBvB0l7sm5n3BgQq2upiRJyvLBcf3m8+Zl0nvSQ6YThp+iJjnxp6FkJC+PE/XlYn9+SEGXzrodfncvHL43CyXsPn39/1i/akhjXYRhmx5phgl1Q8tcKCZ86LkV8dsGg1K124EnmSwJj4THvRepXPV5VRUuI1e22S+Et7y+oMGPBmMkarfufYYgeji+MiNc2zcUwHALZ+K74d+2QtIG/61c385Ndrs9CS6AqYCRczOK72wPGEuTn6/S0b7mZ/3cuqn74z6Q+fGTernSs6r6g9WUh41bsxhYFdaPRSgAYIAngCeAJ7WBXjqditJxa3Y/NO1CZ5m1HlIdhVtV71AdXrigyeWOyDu0uJBe+Lk4ufumu6vDrd4hxwzaRqwpWXaXcZL/5pMsthS0Gwf/7QQWep6wej63dRUstnScuIr0cw9xfNj46ed1nJAcLlSTkVzL6zomrh7KH3pXFgwrNMn/We5L8VRT4ZVAU/i5MY/lwDemJcZm9zzE6yBaSFhqFHmwFNkEtt+ULMalYF3gvF1P1V+syTmpcCV88oe8oRMQpVm9Z5jZh5PgdFv6f1Xk/SoTOMEfGBmMe6YF5lkBqixKJe7D8aemiHOSyl2/qrx9d6zZa0Umm3g6XYV7/H3TFrBUA5VK2oxnUBq+830YFXC8KG5qDeetGR8usATC4tzK3me3v96mLy9nyirigYUkDY/q4SW5l28R/6R09zz06+69mx6pujGyqmId7TaizIaDpunh81GoXbBuQDd/GK3pbHECDxZ7w9JgifD/EFxtOWklLeJeXzaLpeqnmda7b9yn4POmQNPM1zf2dN03+J+fmp8N8fgeWYNPFmtnyHLHqRcWLvqndGO0DoIAngCeAJ4Wj/gaeipklScfghT+MULWhL1Iir2/+Ewtw0tkbt77YEnPq8By/UihTcc26xajtsbDzyJk4iIq7yJZhJPkrbU2CPu0lpFX7RtBzend+UqHr4ZrQI11a3z2uJXkeMTZrIJieRqPz/PTRqGlJw24gtrOjx8hGc3uZdf8+Wujes+l5pd/hVek5/qtxvfwzkpLGo+GpoV2X/s690qT4ZVA09TwRWDp+GzisfTzafG5/L4RumqgCettxXLTeJt26v2Tpgzu24f1W3hwsVYsup+vQYG7tLIAzuNjE6ahuzpvCwfnLEWaue/p1otcOO7H9CFths08tBFU/4gLc7YkwIgKZmA++OMd4JSF3VcyGbAtI32xwdPRm1lzYEn/uPGZuqaFNRj6tluSyF67JpU/+41Dyn2+yYjmknfPQjNu6g41i7L6ujKyeg4sKOGZlXhc7PKipG/Pk2dF3YrHpccoMq2Z4rxWKnxomQ5ezzNCuC46pK9zIzGWUfDOyoPyuIvviBb/10aY4mlNTmeDMGT5f6QJHji2uOGV0rpzgOTse7BXSlp/5hvlgTV6oIskfYQ2drPGoZHKmHOmQNP848uceegJGuPK7EuN3KrGo/OJQmeLNbPvS+UHGcXbeJ9NbjXd8T7zJ4rAw9ckbQPScJuCAJ4AngCeAJ4WiPgqYeey+5OYeo7tYN27DBW35QCn8JPh9YUePJyeV4iYUdK0ts9JisKWXrRSHKSFO8lgoVbjF1XvrB+3jeZXvC0pVK/Ws/gSZ1XhX+kVv7t9aOt5mULLPTMrawGJE7Gn6YDPLHJzbvmdaaTKrRgNz0QXzBXdk1+qt8b31OODyWZsmUAxGQKPDUpEG3/deOV1a4W564OeJISFnMT5MJyOvRro1A4o30F6op5S70azcNj5ME2cINarjfRnYcMPDFPH2Vi+a1JO3B+U2QJPPG5qHbV2A09KrdkGjxNWdlHcx/cJmOwjVv1M7q653oDT3212/S5A5/fV54xr35sOinmPaVY2A8fUvy6iWcn32bUACf1eZ7aS/Q57HZdvqv2xhDm9Yt3yIBK8cjKtmeKWbtXeVG++j6dqlDAu82vhJTq952kmjzlfUPK/xYnuXhGwZPglO/nxpIWE2/GIA20N4ljXQuN+MTr9A1TZ8sFamz7lqZC2oUDpslWo3j17Dzfk3HwpH0nMEudYJwgnrXjIa4dpxY8ebgPMU1uE+9Rr116rrT3uyJeuQBPEATwBPAE8LQewVPrgynFkUl4RPvfLaKPPiiiIo3Yb4duPOacnp5Tz1oBTxpPggrbpPiwj0xCWWJMfrUqradRJsFTJNxCyZFRO/g0Dfk6uLw+r2ymP2gSXnuvf6wDT8JMv2qlslNd5ku5e7s+VU28Aul44DDPloHjqomN+Tm5qGZ3jmpFHhaSsrJrEujBOc59fvvROF9YXfQ5F8J1YSSwpsHT/BMl4e6GV/fqvM38veocapkFT9olsnMMvRPMwNMzDhDuutQvJ5WVNad47Gz49Rnyi/tMcPts3F+vDwPy96jCe+OCJw76RlZqiySSZYloWeJfx8XdHLjJJvAk3gcuJGlDYa3+PswM0z4uhLDp+/mUgae6oUDmwFMUmOmB/mPqrH1H3fbZsu7RpNu2g7nxQflIvc77Qpgb5D6K5BsCbmXynEvXH6fzJT9Eo9xHEbkeH85q8nkJtOBuSgiosu6ZYtbuNV6UG/ik3AuhOPtO0nlujAlGE0OzcSTEEkv7euh9PtQukEnwNK/y9L4wNKUb656PKNBzZ+N9cnOeo+fE/hYKhdThkV6lzrecMUh6btZvUghGtfVUYzdvU7d4QBwNKTbMTaU57+XUz/zTG0rf/vUX9Fz7XOFXWX1lOw3OBAGeIAjgCeAJ4Gl9gidPUMnu9MzeQJ9/aQ6JPj/YSs9+4JKMP+hYE+CplVvKekN0SXn5JZglvWXLAfNfc7lEopkGTzNcYtoPmx+kJVGs6sv19nLqc7MwDT85u6rlhLHS5Hd4SvbEGvlanatiZ0U13RoaJi8L8fBOktvVQ1eqC1TbFLc/TM/y5pLbf5CaNF/gI+fkIr/fT37fY3J0nacCVSLXyPLH7AVzZdckSKvX7FFNRrbRuTYbOT2RsBevxyUev56K8vgkrqU0Oi+safAUWggqoTRSXymgK733xHs1TJ0NB3QTtEyDJzZBXhAnQRs1OVR47wRTbyl+2XjWHirPk4P1DZbPa6iDDm1X/nbizrNIOwyp93lt/wlyuCL7OO83U9Emk/thcG8Dd49xbWUPdUptWWxL7ntUX7lNVc4bx65lLteNlf6ouQ85u49S38jjyH3o1dwHtqT4wgrBExcu9PreT6mz10a37g9noG99TFfamulKS31ETbV0quIdZbl0uX5uSOBQiD1j3JdUfy+oro+OFY+pr+2Eav9dXw9JXg8Mog6cy1eNMfW9w5HxzXOPzpVuNfUoSkueJ12/2kNjgj5Reoj3Ooz+96IGUGXfM8Ws3au9KNWrY8bblw/dzaH3z7SS2zsZfS7V0k5Ngu5rzsnMgSc2Rmra4/Gmjsj5if2VnV8ed243fXPkd57htt9KNeKzLnI9Yv8e7qQj3MeVyr4pfQiuOJ5d6RL7qL2HvDPpeifQpE6ItamR2DuBeG3iWHRot/q9ocLmVkHEeOe9nPphXnMtJVx97y6Pju3+yNjO9ePXq25FFgABeIIggCeAJ4CndQeeOkdJCZ4TqPXU/46fhPyLo9Q1oeyxNOexBJ7sqwievF3luhC7hfmQxk17QZUYXHphqbWtCngSJjiPkr0X0jC5FF/QfDfiLlsdm8jIoUnRxKJNBqEWZoqECi2kbZIQWTFoki4W5VpOBt0iLVGfmmsKLSxS8OGlxPfxFXW4RdpWnlJNjo/J4ShKfonUgCeWcHcxOKSbiJkpneDJLL/S/MI059Wn904wu242QQg+PGsh2W4VTcXagdV9LIAn4fmgCt4kVN6JtMCn5MFT9D6MWukPe2iEjcHRBOQ8bEvO46nfIEFymlaNVC1tnlgfXrZHl6gXuDa5SCNXP0i8f9FZsW1FvS+kjyJuqtyS6JibyeZdNFz1LrV5nh6q+31Jk+F4Nhea1wAAsc61gCoLnyl8/jq+3eu9KNnqmAuqFUKN8kONGoUcxhHLSbe8/pAseIq2x68Tnx/LScnGTvXCDfHGxuP0RDAIaeY8ym/50vlOEKT2Y/mW73lFu0v9ITLBeS+rftgzc+auhbE9n+74o32fX9UO4AmCAJ4AngCe1gN46ngY4HI23aZPPv8yPni6cJYONg8rsGppjvp48DRyS97W4Z2PgiffKno8PVZWoGEvCt2RELs5o6+5bBln22HV1+U+vxo81SUBnnbxLtqqUI0E4EkbXuFNw5drtoKe+wZ9aDKh2VJSQ09C6olTKOpSP9Z9lvZsMX8B3bhjD7UMuKMTr1AaHzpKstOR9iraFWclsD2nLtFYcFH3grmia5ImTuL+My5qOhZv5aJc+rCmiZ5Ix0/jkshcG9t4sEWenHm6DsvgKy542hEfPClLTUfve2iSWmo+0KxwlCve6yYa6a6S/31jIl1eGAFqjE1atecurUbF5dXqnzafWPD7Rr0fg147Vby72bAuKy53SWBA7huxfdxd4j4GbehVse10N8l9us4APMXuLZs4Bb1dxv1yy25qeeAi26n8DIKn7ZbBU+w+LPrsVF2Sb9oPY/0g1j6FyW+jbSiXGl2BBGFu6nChMdtxeoNfinzvBZpeDfAknsOWd/dQ9dctNOYLRu7Dgvo5w0KB2O9TD5rowx25hvCo8qpdCsniIem8NEZNU3vNHkOo90bRcRrxL6YVyPD9igdKFe1uLjxJHZb3rFt5lm40AVTZ9kx51LzHpN0zL8oWeayTFgjReJfp+0zEK9d2eY9JX2iisdEb6nDD3sll9gdlPFO9d6hCxrp1oWmxVVd3GY03r26ni90KlBGk7SOr2m00e86J1zSlem8QaFZ8z1DX7R4anE6jV16sTfVfMulnsXec43THPW3SpszPe3n1E3nnWgyavyvsOlZDY/5F5cMYV05xmxOQAYIAngCeAJ7WgcfT+dNUIicPP0B15y8kAE8X6HTFR3Ky8cKDn0tlfBT995HqL7ntiiLb/fYofbmKHk+hefUy96bL0sZAQkzRFwCB238hUSgDX8bCfOLfDXMV8OeRpskEdwy2Oo2yis0QTc2YHZtf1UacaPsnaezhXRoYsEuSVt6aCVq+zlTlHVGdk88trQwjXw87pyBX97rJz8quSQhxbSvEVvpxSasAxe7lmDeyepFy/DTeC8G43cwvxGv7/PUbtDWuTL7t+59O0IR3UrlvM9OS9Kv48UtUpw88Jmqr7O9zFvdV1Wlwmp6IdTrGpKpL832CM5PyPlP+aV0SWfk+Gt1bIaS6p0+8sXKCqjKmYr8H0zM+xG8zwbiLI6junZe7dyHjMhOOr1bG1HSPl4bHiqMFo48bDLQsqOs32k6e+KbjXENIvZqY1x25p6z+Z/ixZS7j463xRxx9G1pcXDQBVNn1TInX7hNdj9G+MbAmPRt8bsO+sCiOF2Oj4u9iG4iFVybfH7j7qLpHZr/rz1m690btUd5vznh7sT2qx7kF7t5ox+Hkx5TlPBd05/ngbmQluVibCvLjcShhu+TPOyXjFWsPsbHR7Va/owjJvzNCEMATwBPAE8BT1oGnxsZGw9C5GEQq+uTzhNBJ0plKKozBqt9+Qmc58HT0tAKe6o4fiGzzgTl4YueUXvCkflFO9LXUCFJlGjzJngNpfkkTQvEmUwsmEwX9PTLSfFo9nQy+ciY6J3HCFxKs13tS18RWXVpIPBENCWm+D5o2NmdwbSkBT/4eOf/HxmM39dca6OaS5u6hR8G5VQBP6uvW99v4+7K+sWBSlwvivRVM+tOCaduZtwaeEvRL1gbVE+DsAk8xcL6QTD/krtcwDDXO2Knvt6sLnljbCCUIpQ3Nz8fdX7AwmdZe87wwl7Hxlj+PeM9Tdd2YA6pseqaE4rX7UPxnuHGfiVNvUluZ10PpZfWH5YGnRPfeyBNofmEh/nNuLvF7RtqfhZba1ILBhygL572C8Sruu4I0Ns6ZPHtDgAwQBPAE8ATwtLbA07fffmsNLGVQ7JwysqodZP6CJq1OE1tdJaR++YkHrsSXKPbiLO8bXXlrNa9FYOcwrz4nIRmPjZVc05ygv5fs+OuuzbjosCqZdiX9YfABPR4f1SXNZUmS54W1e61zQqROYxIst6GoVtAfBP7YqnLmlPPJIHBY8b2bw1hrWr/iBHbOImwVQnz7mltn9yT7nimpWdBDXW+qviAk2wbSee+Vc0n0sYffnrXluWxuU7p3grlVbw+qsVHAeAhBAE8ATwBP6ww83b17N+vAEzsngCcIWkNiiWMtJFXfWFSjJEnGfYMgCIIgCIIAngCeAJ7WP3ianJzMOvDEzgngCYLWkqLhq34XNdV8QLt2bKaNXGL3N3bsoaZoUlr1SnIQBEEQBEEQBPAE8ATwtK7BE1NXV1fWQCd2LlbOGeAJgrIsfCG0YCHnTRpX8IMgCIIgCIIAngCeAJ4AnrITPGWT15MVbyeAJwjK1hw+LFHqgsWktBAEQRAEQRAE8ATwBPD0UoAnpqGhoVWHTuwcrJ4vwBMEQRAEQRAEQRAE8ATwBPC0RsAT02omGreSUByCIAiCIAiCIAiCAJ4AngCe1ih4Wi3Pp2Q8nSAIgiAIgiAIgiAI4AngCeBpjYKnWM6nTCQcZ8ewmtMJgiAIgiAIgiAIggCeAJ4AntYBeOIBFAuB+/bbb6mxsXHFoImVwcpiZQI4QRAEQRAEQRAEQQBPAE8ATy8xeIIgCIIgCIIgCIIggCeAJ4AngCeAJwiCIAiCIAiCIAjgCeAJ4AngCeAJgiAIgiAIgiAIggCeAJ4AngCeIAiCIAiCIAiCIAjgCeAJ4AngyRg8OZ1OgiAIgiAIgiAIgqD1KoAngCeAJ4AnCIIgCIIgCIIgCAJ4AngCeFpv4IlgWWW1tbWSYDAYDAaDwWAwGAyWGgN4AngCeAJ4ggE8wWAwGAwGg8FgMBjAE8ATwBPAEwzgCQaDwWAwGAwGg8EAngCeAJ4AngCeAJ5gMBgMBoPBYDAYDOAJ4AngCeAJ4Am2FsDTnTt3oDUsGAwGg8FgMBgM4AngCeAJ4AngCeAJ4AkCeILBYDAYDAaDwQCeAJ4AngCeYC8neIKtLUO9wWAwGAwGg8EAngCeAJ4AngCeYABPMNQbDAaDwWAwGAwG8ATwBPAE8AQDeIIBPMFgMBgMBoPBYABPAE8ATwBPAE8ATwAYAE+oNxgMBoPBYDAYwBPAE8ATwBPAE8ATwBMM9QaDwWAwGAwGgwE8ATwBPAE8wQCeYABPMBgMBoPBYDAYwBPAE8ATwBPAE8ATAAbAE+oNBoPBYDAYDAbwBPAE8ATwBPAE8ATwBEO9wWAwGAwGg8FgAE8ATwBPAE8wgCcYwBMMBoPBYDAYDAbwBPAE8ATwBPAE8ASAAfAEg8FgMBgMBoMBPAE8ATwBPGUbeFocv04HPvwtHTj0WzrW2Jdw+9GOE/TRgd/SR9XXaRFjHMATDPUGg8FgMBgMBoMBPAE8ATwBPJmCp+HPacMrObK+HA7G2TpIX26Nbrv1c5rFGAfwBEO9wWCwzNpSmARBkBQO43bAYDAYDAbwBPAE8JTt4OmRGjxteOXvyLNkDp4afqmAJ3g8pQ88/fjjj/T73/+ebDZbwm3ZNmxbtk/GAEbATseL99G+4uNkn0rUEhbJ/uVxcdu9VHtjIivrZtb1LZWK57fvVNeaa9fLAk+BfqoqL6PDFYdNVEZl5YfpQpudfEL2XbPnZp14fuI5VttIWM+DRsJ6iqiq+gLZBj0YZNe1CeS82UBlRbvozTffVCn/7QKqumgjj7D2+mZ43EaHi9l4U0djaxWihT1UZ6GfahW7Zs/NC1RWXEJ1HZ60th/bxSoqEe91+7iA7gSDwQCeAJ4AngCeVhs85dD/qO4DeFpl8MRA0t/8zd/QL3/5y7jwif2NbcO2ZftkCmAsDtbST37yE0m1gwl834R79GZ02zdrHmRl3Tyo+UXkev7y/Jrz5FsOeBIG63STV3PlU113dkEN58WCyLm9fWFdg6fk6ondj8PkhCvqOgSQDip7y1pfbRjwram+KQxeiJ57ATnWamcWHLQrmX4qa5d4zQLVvR35965aR0bOsW4Q4AkGgwE8ATwBPAE8rTZ4+nnkv1e/X1weeFpapNkpL3nG3eR54qXZQNAyoJp94qbR6H6LWq+rxWC0TDdNBYKJC1sKiufhju7j15eX5eCpvr5eBkpm8ImHTuy/bJ+MgSfXeevgafEB/Sq67S+yFDyNfvkrGTy9DB5PwsMLirfEe4VUUlyiUuF7eq+K1ixyVnPWRs/vrbr1DZ4S1BPzXih8L18Dn9Y3jHv5oFM/FWjgUll1A9l7HeQY7KfWi1U66NH8aPVagPNiYXLg6WGdfF1rFjyFPXS6WN0/y8pL1F5pRuNsURWNhQWqi0LF/OrMgKfTAxghYDAYwBPAE8ATwNOqgadc+u2hdzkAdZCmkgFPS166Wv2uznsqVvax1kH1RP/CjsjfCi7QVKCPPvq5fr8D1walY149sUNf5s/fpZvjRgDKT9frfmt4Dgcau1cVKiQDniYnJ+n06dOm8EkLndi2bB+AJ4CnZIHGhYfG8S3hgJNOv8dNnCps2XPRsx5x0u0g53hgXb9EWakniU08bFXBh4aHmFiukxZAF97moNJ7p03C6QSyVRco271VRavl95QseKIlgcbEvux46Fl3wHSssdBS//U9ckrjmSedcc2x+zzoJB/ygsFgMIAngCeAJ4Cn1fR4avjeT7cP5cr/fvvCoEXw5Kffb80xgU4cSOpw68HTirSDVLnQl9x0KsF5bDx0fU2Ap3jwKR3QKRvA0+LsLE1MTNDE4wmamrWAfyTvuilp+4mJKZoNzCaGRtI+0WNMKdtbAU9Jn19sP2E2co6BRd3vU7HyrJx7msBT3LCLgJ3yZU+aON5FYYF8Ex7yTOhBkBDwkWec/U2cWGZwwiPMBqRjsmP7ZtfmTMtyPYnmuFiQeFshWk+sPixMcsPc9r6AQFbvolznogJW732YP7cACUl4qfJtLJDossJhbnufeEssnJ84aQ/4oucmtvFwhjxolTA0BpMOx8m/KOELquLC8ZrHTYAy3y8CQvL3WKpTIXXgySI0Ser+h7ntWVtape4v34tUhLeJ98AzPiZfk75e+T6wkgsOc/faZ6kfqvoToBYMBgN4AngCeAJ4SgSefj8sTn2X+uhtzkvo+pPE4Gnq9kEF7vzyIN3+3k2Li+IEP+Cmm3WKF9TGE38wBU//41AdjbKwvJCXblZrodRf0dXeaJlP+ugYB5dOORTyxEOzjR+eoGEWYhcK0qjjAndNOXTstndNgCcz+JQO6LSa4Ikl9t73lz+Vy4vpp39dSvYJAxyzNEXXTu3VbR/RT+l4y6jBScxSV80+w+0/v/GA7F/uNQVPyZzfxI3SyN//+hotiuf5VfEvlO1P3Yts0/0V/eJnxudeWm9PGkClFTzxHhexieREexRGFZJTnMQ7Gsu4ybECp5wddZoQoYgKKhrIE1YmOe0VsbC+EpPkwkoOlNg5yBO69/STW+FhO5W9na9PwPzeYeqfUA7g6z5t7iEkOKgwDnDz3aziPBnS56WQDHji80Hptp11Ul15gT7HzFsF1NCrz9/l6W6ggreMcwgdbuxXASjlHAupvbtVvPdvGt57u1lC44CD6ooLDHPglJxsJd+SyWS+qFmc6PYbHm9XeYNuPxI81FBhfBxt2+BOjtpryyzdh3RYe7FyzDoL4VGejirTNhAQ+0WJQb9geYaqrjpMr4X1Y8P8RW+XULNBPql44MnXXacJCQyr2o8+1C65+y+M2+nwe/mGdawed7IJPIWptThyzgUXHfKY1xD1Ni1sdJJvsEH5AMDVWzMbe2YdVGVwzflFdTTGH3JpjMpiY5Z8LspxShod5Om9YFjXZY3GIYBm40TZRTs5YmPkewj9hcFgAE8ATwBPAE868BTUg6StJ7hky8bgabjuL6Lb/wXdC+mPoeyjlMWDp40Hrmr2cNNHHPy6+kTz5/ELunOmwB9oY2yfggv6yXuwj7a+opz7auTfXQ54MoJP6YBOKwFP510JUMnSqCl4muj+3AQgKTDmWxXcmaXav/xJgn1+QqWq1fNm6fxfJ97HCDwle34PvowlKd9L+zTHZOBJBlNx9Iuae9kDnsJODsBEJhB8MuDDWpgRBU/2k7viJ9V9q0r23uA9dU4PGITO+drlSVdBNPmu2eTWw8Eks+TL7VHAIDxsUCalFx2mEIdN8Po1A0Z7eWyiV5bACyVz4Kmfu+cqGDZhS5j4+DC3mpan43DCpMgFXBJk/hwTqVkD6cLj7QYTaq3KyCkYT+bjqrhVARPhMTqccJ8CcvD1vOSh02/H3yet4adi3yuRj3WYkkrvv6QFUonr9M3yVg0gEKi9Ij/hfmVXnZbAk4eDtVJ77vVp2o8muXiS9z883pq4LWU4/5k18CTQhfe0/UoBQisSD30Eh/whoM4APCVSSZu6BTqvllhc8ADgCQaDATwBPAE8ATyZgCfxV7r6oeIh9NtrD+OCJwq66fbN63Tb4daVP/v9dcXb6JfKPgp4yqWbumRS3HF+aZDEfHFQLjN2zp4OJa/T1XHja1WO+Rd0exVSwywXPDG7du2aDjyx31JpywVPpc12Gh0bpVGXiTh4owJPgS76KQdwajsf0KzAPOVG6dqxXykw5mfH5XxjU93Hld//+jjZxyai3nUT1FWjeEH99Jhdqfd6rqyf/IKu9YxGjzNB39bsNQdPyzg/OWSP05uFpfRV8zXxXJ9w0Oyn9HnLPSlkb3F2iu7dqOWO9SsaXUxPvRnBgni5R/pruUl+UbM0kTcEDW+XUF1jM9l6x8jXzU0w3yqh9kEWYieQb7yfqvicUSejdeSzKRPGcv1Efkye4DBoFGdyG+DKEbetu+mQQk6EwBi1niw0yH/jkT0AtF5Njlo1UDvdGzD0HMivsKd1zLBWT2FydvCTeh5S+KiKnzzW2sgzK5Aw6yNHW5UKyNkCkYmo7F0m/na6zUG+2PYdddz9Zd5uJuDprTKySXUepsCEky6U71JBJAXUcfdf8tA4TY7xAAmCQJ7BdirhPSmKFIikBU/5xRfIwcKvxON5Bpo5yKYAQx4kRo7jk47jG2feVvkcgFQgip2DLvnFdZFjiPuMicco5I5f1Z2mbEphBRTkl68AcE20q+5XYXUreQJinQoBTZ2K7ePqGAerylTtg7WFgHj9QsBD7bVq6MCH9Rn1zTEV+MpXAUgz8JTs/ef7rHKN+rZ0IYP5z6yCpwYL4Il5ePmk8Uydey+2mmX/eLQPDLZynqbcPQ0rXpzxwFPJRZt078LimO24ytUbN0aGx5vV42Osbcx6yKZpGwBPMBgM4AngCeAJ4CkOeGLsp1vxEJJBTZC+jLOq3WLQTfdufkW/r/47+m3BXykeSK/o91Eg0A4aDsUBT0ar5y326cDT8IW/Uudy+nmuTvzfVdea5eBJm9Mp0Wp3mQZPyYgHT/Zjb8q/f2XgNXWv5he6cL4HNbF93qR7Bm+zX8W8jP6yNurVNkGl8vHfpK4pAyDZvNcQPC3n/NTg6af01QDnQiE8oF/IsKpW164nbiihgNceL6al3oyAxq6KBrJ1tFM7p9ardVSi8TaIrYSkBQ0lqjAMPs9MiQwnONoof91XJkX85KdQsw8fZseF8RlMbnkvK6Pk2vzENDbxUryEeK8mgTvH6D062a/wgEfNSYU/pQo85b9dQIVFhZwKqOBtvWdZHQfJAhwELNF4pkjlD9SpvZg4rwjmvaatPh5GxGCDuj2UGdR5mFrLFYhwOAoKVICyuFk/OeUAH5MOOkZhqD4M8rCunvl9Tg/qrko5Tgxw8bnNDI7BwpsK0j2xnu2XIRoPxJI1HuAYtQG1p1AMWqrzRRn1J08bB6bK2w3BU1gCx2UqrzKbJqTREDwlff/5PruLHEvm8K3kqidjz/xUgacyjbeREu4crTOth5sM65MDTyWN+vZhk9uPUhbfplRQXh5rCwGeYDAYwBPAE8ATwJNF8CRNMv6Oy91Ux7Y2BkKLbvp9QW7iZOCG4OmvUgKekk1WvlbAk1Ei8Xir3a0Z8LQ0QftivxeaeG4tKqDmzZgH0+wE2Tu7yD4woZ+njXXJIX0/+esIQFocu2boBaV5i1fOJQaelnl+PHj6xZfafFbqMMFflH1FDx5Pqdr37OxsJEl6Bj2erGhXhU2GEKp9tfk7JlpNQzOMjh2btPCwQDWR4byY+PJ04GmJgwfFrcYXzXmQxEASn7xZ9lyR4Us+lcRyD711mmJnpaxUZQTW0gee4ocuRv+rWY5dCQksMQkJ5Cbs0jXyHk+RvDjMO0iV02lWoEBASdjMn2NZh8mknvdGkyAFy2vDhT+aOA0Fek/rvJH4yTzLEaSrZoPwRFXo5FuF1HDToU44H2aePAHxugQDwJYIKuyi/jR40DIgZBYKatlU8M48XK+/Wh2myR/bPJwwwIXCFZIjrLkv750mG+8xw4DQ7P/P3nt4V3Vk+7r/0nmv3zh39Bn9Xr/bt7uPT/fp176n7eNsDA5Ek7NJDQiTMRgMiGSwTM4ggggiB2GyACEhCZBEEAKBQBgJ7Hr6FdTWXLVrhZ2kLfT7xqiB0N4r1Qra9e05ZwVd461iI5n+l2IZNbteRt2J/jTXbRtWv06LeEJactzF0ZoC7bo2mmNpxImIpxxV+SLoGF6tS15TfhNONLaBmCWEEIoniieKp9dHPHkEEIpyHz7TmoIXE0KPPWl5//L3L9SKLTvU+fIyVV332FcipVs8Xcn7JBadtenkGXWl+Iw6b7crZ1RFectr5TeSnkGsLcWT3+x1frPdtZd4WnKiRjUhBQ3SxG4tv2+qK4oJmph4ktE/OgLoz7r92bTf/FmknskIplfbb6hR5w/uVD8smqK+GtDV+14hkDxF0C/4V/aKRTcZ8ZTk/rWKp/dVkWMwWuJIxdP9MmC8WrOrSFXUNWX0vCUqNHoNnqoKLlT7Lpt7wnuQnlm4MADs1qVl4NRF/2t+9qzfDLTkQEVET7R+c++tsxQnnuTyerDm3W6X97t467+YAVPLICrHGmC3Ht8sVVpuIgt6vTqfQtSI/WwL8dRr4iy1bGGuypVtaa6aOqpL6zF7xJ0dufWqH2S/dLNqHDWi5pa7htKQUVPV2j1FqtKaDU/uo99Map59MREqfd4PLz4sB9h2fS8hO/z2JzbAbij2pGe1XgdD1NSla1XRhUpvquW6IXHXsd08UWaXMjC0FscuI+7CZZNo4r4Ikle2rJOibu2lCDPYCcHhX4PLVTzcLZ6S6X/72dP6DMtRy9YVqOLy2jb/m58W8eS6P4REkvXWgvo0VDwN3uS8D+POcaRryr7fCSGE4oniieKJ4ilQPCldtPvdoOilp6Jodw9X0e62EU91h1sLoscVIzfUnVF7D+xQhx21qLJNPPlJJ0Mm5FPys9qFyBLXrHbidwkV/W6qUT8M+HPk98v9HH+wzncXY3WgYttJbv9axVNXVeLzaRuz2vUNKJD+/tSdCRW/z+ysdsHL2oPShCOpxKDpaCw6x6TbicGLLBTtEk/NPmIhQsHb1rSRWbr2U6VZ90SIpdZIqtzTjZ6oKVu6ZVo8BdXiqtwzK64WV+IFikXEyYlNamSfoAi41kLUnlnJfHexvrW4t+771pm8kJ7nqwQcA2yX7Ih0betZ7UYGHn9BeWOIPHG3jIgnT9pja8RdICJSSd9bMjpl4tHIzwMZ8ZRzuDZN4in+PvaTJMn2v57VblTAxAZ9cj2F6juEeOrTRuLJRxDFneOQbUddLyGEUDxRPFE8UTzFUb1zkL94EhLo47WXHOvPE+l6mRNP3lnt8hwRTSJN8LdfqIoXbf9ATEQ8LVy4MHT2Ols+YZn2EU8NiYsnT0TRPHX+Wok6f+F8XCtBcfJLJaqmXmsktXOkjELqq37YuK9l2QpVU4d9aBA1nl6Jp0tR9rNlvQN+ExDxFHX/oomn2Fbra1TJqSNqzaIpqut/eOVT3/yKDiGe7GVlpMSsHUWq+FKxKr4Q30rLSlteK1X1zXJZmYLXst7G1jovuVYdkeCIp1xVXObebnHLdktb9qlabLi1zhFSvupVwShvap9JV+u1tFjV+83A1QbiKfg8yZo8puaLiCrCsfmcC5yH0pb+Kq2KVxsoJF18+qhau3RW3LTpI18Vom7dx/jZ/6R4aq3VZdXkSTriKUHxFFtno6ouL1ZHd6xVsyZaszK+SjdqTdvqpTad8Ou3Yt1vxWXVKjPJW/WetMeCqghLnM71pj0mHfG0Nj0RT6jd1VztmVHQLsbujHhKsf+bG+tV5aWzKn/dMpUz2JqZLyZmKZ6SEk/imuq1tDj8eUTxRAiheKJ4oniieIoqnpS6r1Z8HCHi6bdvqdUny1TD08ctg+ob6mTBbGuZaar6aYbEUwt7vxbbGjJbnbx+++WMZ3VlasfM1uLj7y490y4PxETE09WrV9XUqVN9pZMtn/BeLNNhxJOqUfNeyZY/TzziK4RKDu5T+/YfURX1lgz6dI0jKqgpXjzdFDWepvrXeJoSV1w8if0LFU8t7z+xT+3ctS/2fs9enPhBzNi3OXI6aDaJJzlDnV+NJ/WiVhWhiDlmnfMI4NYBKtLeKmN1n3JUZbMKFk8ty5qBjv8MYM2q+DCKp7esu94tN6b+sDY2A1bBq7SxWL2Zwblq08IhcbOsZYd4kvWcHEWAu/nX96m9VKQLyheX65tMFZ8oVAV7ClWp4xqtPiFqJb1KzYlW40kUi9ZRL94aT0d9gmoaA2s8RRdPjTXFqnBPgSo84SjS3VCp8kZ18RTSrj3cKnAKavw6rlj329ELmStWXSmnrJ8Yds1563PptEeRSto6m2M8xUuHWDWe8kWNp6IIYsxR40lEaXnT4LznzSVJkun/6pbruKDlHBeVOQRq1VERETky47XZXmvx1Cyuqfd9rilR64/iiRBC8UTxRPFE8ZSAeGrh1g7vLHUxIdTkrfEU2l6KptaaTOkTT+rpJTUuwvbPP26fB2KiNZ5KS0sDpZOUT3hvqrSteAqfNa6pcrM3AkiuZ3WFY582C3FjBFJdTCBhljnXbHEV+eOTmtUubv/CxFPdkdb3b6xwCrDxcfvfwcSTNaudSwy0FueOrwkkCwTHBr4Li/wHQwnMatdcvikuWide2rTOzhYrxm1NR6+juQ63Tb2YRM5T6Zb42kdyVruRjhmr1ItW6aYjQWqPivdXOrYiiri/ilQKn9XOe26MnJIF5d2z2lWrWSLKqqBGJS2ejs4WMy06ol1rRTFrHeHjmVXNVfum2TMTY2WmImit2mUjf/Cv9eSpzSWKPntntXOc0yo5Q5q57lvuY7Hd/HLHrHYHZgXPamdFsslrQEq08FntovR/bWtUlU9EU6FI5S1uIxPyWoonJWe6c8nmlnWOep/iiRBC8UTxRPFE8WQNnq+vjUmZ1SEzvVVsGeRMm1MvbqhNX3/ikDxvqUUHLqnqk7PjxFNd7HdfBIunHsHiaXW5tc9NN9SO+YOc0qnP/DxV/bj9HojJzGrXlrS1eFI1Oz3pZUt2Fam6hibV1NSgKk7tFKlu76sibMKT/va+WnOi4mXx8voaVbRriVVzaZ6qefVpt2aXEEtyuYYadWT1eHctqWT2L0w8vahQX4n1jV99RKcI6sLsNRVq59yurXWeFp3PyHnLvHjyzkiFQV4BCjc3NqvGhlp1Vs5y5ZoRySF5XBLJJZ4837IjXW/PWVXb0KiamxtV5el8MYCPTwmTs6e11ndqlS2zrFpAZxva5p5M5DxJaWeitTyz/UFcLC3QxcHRJ7XlZ1WuqAG17EKjN0IGg8p1R1V1y/sbGxtVfU2pyl/Yug2TZhNX16tbjirUM4o161S9goVDPNdDTExZ+9ZlVJ4qrsJseY2q+tJRNbWbOz0qGfFUuUNKmVcznrUcU2NDvSq1rg2zzsLpcvvL1Nny2pfHVFup8mfH90OmqN4z1du/g3PV0ZZ7qr7lnmpuRNrgWbVsYhf/e8a6L3J+KFTV9Tin9ar48FpP0X0pZL33cReVd6C4ZZuN+pweXZfjWaecXdB5b+rz7b22jLxt9ElfTaz/m1W+kB29pq/VszE2vtrfsztyxfWZ12Yi5HUVT7KW2MvnRKGqrKnVUWe5g/3r6RFCCMUTxRPFUycWT2ml6bFqqLutqm/dUHX1XsPTVP/y9w2P22g+uRdIsbuht1l967ZqaGr/ByLFkyWelBVt5NO6LjcSxqrxFNqM/Elgufe8kUaJ7V94jaea/VMi7XdRXWbOW1uIJwxm8uMiiBwFgS+4l13rKWrtTuUoNbNeWYOa0h1TQ7frLIhrRZZMtdIEj8rj8Zn9qb3Fk4wgkvvfWJ6fULF1TyRLQCHuolrlFk+B59ybBoUi1l1Cl5vqKQjdKtgSqPH0wpaHPtfGUhFR1FjqEWO+BdnbQEIWb8mJ3Me5jnRHT/F538LfdtRZoyqcHX4f5+wojXRv6jVeyIvrOz/xlHD/1xRGuJZQP67tZreTMjhR8bS2T9uIp8DtBIjeSNeU3xcMhBBC8UTxRPFE8UQonhIVT2sSEE99HSlydRd2umd5+4++avMpq8DHixq1eWJXh6x5Xy3ZX6FqTixxiKeX8qlo4zz1Z4fo+Wr5PnVkeV/fFLdE9q9VPPX1n9Xu1GbV9z98JNbIH1RJfebOm2twvjZp8dRFFfrVX0E9pR25qpdjINJlVK46W+W/TSk+nOlhSkSBOCRQ7YV894xs3UaqTaerffe3dZa1+OOSNWd86xhlWDyFnSdZl8ce7DXXFqtc52xfXVTulrNxfVh9epMa2c1HzkzMU8X1rn0cqYrKitUyx3a6DJ6qjpb77H99scqbPsQtNZYWqForb6r2xLLAlCnfPmuuVvl+s9p1G6IjeuI7tWWZhW7pM3LhJlXd0HbP5/qyo4EztvWauEwV1zYHLF+opg52iaReatmeYt/6UaUH8uIKy7+8xnJUwYXahO5NLXFn9/LU7WqVj47zmWD/N9ec9bnOX16DhZfq2/RvqnxurI0gnkaua33enTV1twaHiKd1QeJppFM8rRURcYHb8Yin+PPz8pry9ncXXBeXimPpdqjXRwghFE8UTxRPFE+E4iklgZFOmhoaVE1NjW519WEyCxFtdc73NtW//H2DM8ytdTmd5vYiQ/sXZX2NDapOr6+uZV8T25dsOm+h8qS+VlXXVOtW39DcZtttbqiPbbe2nt+5v+yURlX7qk+qa+tDC6Qjlevl+2tbzl2jan4RJHqGxGpLKSxXm+A5b25dRu9bpuomvWiOXZO1LdtBGmiUZerNvtUg5as9T2HLdV1eKmZ3q1S1CdxXrec0sfuive7jpPq/5Voy78cxtuf5ek0fJC392/JMiEmt5pdpjbF+ro6lVTojTAkhhOKJ4oniieKJUDyRjgXPG2lXseiXKkUIeS2JpVO+30sVOYLIZGqo7+ymhBBC8UTxRPFE8UQongjFEyEUT4QQG8+MlC33/doDZ3UkWm0VJiCQ6aw5mZvxkRBCKJ4oniieKJ4IxRPheSOdRDxdyqN4IqRz3fWqIHQCiS5qUxvX1CKEUDxRPFE8UTxRPBGKJ8LzRl7LMWipypueo3KmL1OVrKVDSKeh+nSBmjVxpOrVp4unWP3UpfltWnifEEIoniieKJ4ongjFE+F5I4QQQgghhOKJ4oniieKJUDxRYFA8EUIIIYQQQvFE8UTxRPFE8UTxRIFBeN4IIYQQQgiheKJ4oniieCIUT4TnjRBCCCGEEIoniieKJ4onQvFEgUHxRAghhBBCCMUTxRPFE8UTxRPFEwUG4XkjhBBCCCEUTxRPFE8UTxRPhOKJ8LwRQgghhBBC8UTxRPFE8UQongjFEyGEEEIIIRRPFE8UTxRPFE8UTxQYhOeNEEIIIYRQPFE8UTxRPFE8EYonwvNGCCGEEEIIxRPFE8UTxROheCIUT4QQQgghhFA8UTxRPFE8BYun06dPK7bsaUY8GVHAxsbGxsbGxsbGxsbGllqjeKJ4oniieGKjeGJjY2NjY2NjY2NjY6N4oniieHrdxNOYby4qtuxp6Uq1u379OhsbGxsbGxsbGxsbG1tLo3iieKJ4onhio3hiY2NjY2NjY2NjY2OjeKJ4oniieGLrCOKJEEIIIYQQQgiLi1M8UTxRPLFRPBFCCCGEEEIIxRPFE8UTxRMbxRMhhBBCCCGEUDxRPFE8UTxlRDyNnnlOjZhapIZNPt7STqjhU1JtJ/X68C/WiZ9HtWyD4oniiRBCCCGEEEIoniieKJ46mXiCGOo3ZqfqMWyD6j50Q8u/G1NqPYdvUr1HblO9Rmxp+XmjXje2QfFE8UQIIYQQQgghFE8UTxRPnUw8Df36qPp80GrVY/ByNWbyZjXl2126TZ6zM6k25dvdatq8vWrctO2q55AVet3YBsUTxRMhhBBCCCGEUDxRPFE8dTLxNDjnkPq49xI1dNwPavf+8+paZa0qq7irrl67k1Qrq6hV5dfvqYLCi3qdWDe2QfFE8UQIIYQQQgghFE8UTxRPnU08TTykPuy1SI39eqUqKatO20OgpLRKjZmUpz7osbBlGwcpniieCCGEEEIIIYTiieKJ4qmziachOYdVly+XqX9OWZtW8XTl6k01muKJ4okQQgghhBBCKJ4oniieOrN4OqLF07gpa9WVqy/F04sXL9TTp091a2pqUr/88otu+Pnnn38ObFgWXC55JZ56LtRRVRRPHVs8PXv2TDU0NOj2/Plz/pUjhBBCCCGEUDxRPFE8UTxFq/H0Ua9FaszXK9Xlq1X6Bn748KGqqanRra6uTjU3N+uGn/G7W7duORtew7JaPOmIpx8pnjqweML5xn737NlTde3a1dPGjBmjDh06pH799Vf+xXMAUTtv3jw1ZcoUNXXqVDV37lz9O0IIIYQQQgjFE8UTxVMnq/F0UKfDQRJBFtni6f79+zHxhJ/9pJNpFE+vh3jKz8+Pk02uNnDgQPXgwQP+1bNAZNjnn38e66d+/frFogEJIYQQQgghFE8UTxRPnaq4uBZPOXk6PQ4gMsOkzkE4IaoFDT/bqXVIwUIz/zdRHelJtbughn59RA2aWKgG5xxUI6edonhqYcGCBerOnTsZe4CvXLkyknQyDRFRSMMkrSBN9YsvvvCIJ0Y8EUIIIYQQQvFE8UTx1DnFU8+FWhK5xJPdwkRUesTTBdW1/xL1f/7u39W//PYPnvb//qWL6j9ud6cWT3379lX9+/dX69evV42NjWl9eJ85c8Ypl/r06aMWLlyopk+f7nx99uzZ/MtH8UQIIYQQQgjFE8UTxRPFk5948qba+aXShaXepZ5qd0G9+eHoOOFktz6jtnRq8WTa8OHD1cGDB9MiNSATBwwYECeV9u3b53kfBOPYsWM97/nss8/UkydPnOtFitmNGzfUlStXdKutrU1ov+7duxdbFumfYXWlUt0eIviuXbumm92veA3rKykp0euurq5Wjx49ongihBBCCCGE4oniieKJ4qkjiKcvhqyMySVEPHUftkan2A2felJ92Ovb2Gv/+vu/qVEzz3V68WRaTk6OunTpUkrrdUU7bd682VcG2e89f/58nMj6/vvvVbdu3eLe++WXX6oLFy543o/9N69jmSNHjsQJLrQePXpo6eMSZ6ls7+rVq2rdunWe3+E4we3bt9WECRMCa13J9VM8EUIIIYQQQvFE8UTxRPGUZal2o2ddUP/zP7vGpNPACfvi3vNW15yYfOo3difFk9VSqf+0Zs0aj0xBceyg2k2Y1W779u26EHlBQYHnvRAvSAcMqw+FdbhEUFj79NNPY5IzU9uDeMLMfpWVlU6Z5WpGvlE8EUIIIYQQQvFE8UTxRPEUQTy1ZXFxFBA3UunNj8Y43zNiWpH6pN9i9VHvebroOMVTfEu2/tPMmTM9EmXOnDlJ7R+ulYkTJ8ZJmUGDBumUPFvuIFIuSARJgSPbtm3b0rI9KZW6d+/ueS/S6kaNGhUXcZWXl6cWL14cJ6S+++47iidCCCGEEEIoniieKJ4onsJS7VBLBy0stS6dqXYoGm7EU68RGzrkDHbZIJ6Sqf8EeWMLlkWLFsW9Z9q0aTqtDFJHNogVzIbnEkgQNSYKC+tAIXLXdlziCdFURuSMGDHCKXnStT0jkebOnasKCwt1qh/knZRXMv0OnD17luKJEEIIIYQQiieKJ4oniqeOIJ4G/HNPhywenq3iKZH6Ty7x9OOPP3re09DQoNPv/NLMjHSxU/YQmYSC31geQubmzZue142UsUUQaipJUNcpk9tD++mnn+L6BelzJ0+e1P/K2lJYP/qI4okQQgghhBCKJ4oniieKpwyl2qWzxpMUT71GbvR938jpP+nG4uLpFU9jxoxxShQpWuzUNfv9WM+kSZMi12oy9ZpQS8kWQfb2Xa+nc3vjx4/3nTEPM/YdOHBAzZ8/Xw0ePNi35hPFEyGEEEIIIRRPFE8UTxRPKRQXDxNSKYmn8Xtj4ukfXSf6pOPt6nDpeB0h1Q7YkUNIoZPL4jxv3LhRz/yGouJDhgxxiiA7ciqsmfQ1WwTt3r07knhK1/Zs0WVA4fSo66Z4IoQQQgghhOKJ4oniieIpQqpdWEqdnYJnUvNSSbVDBNNv/9c/YrPaDZl0OO49EFJ4/f/4tz+2rPeAp+g4ipOjDZ96wlmU3Lz+1YzTga+7lu8MxcV37tzpO0ubiyVLljhFEFLk5O9RF+r777/XtZVMQ4qaacuXL1ePHz+OE0EnTpyIJJ7StT1bdAHMaGf3CQqQz5s3T79/9erVFE+EEEIIIYRQPFE8UTxRPGVSPCFtKR3iCa1L39xYRNP/9X//h+ozaqv6asYZNXzKcfVW15zYa3/8e3c1etb52HIf95kfe+3tT7+OW698/d3Ppwe+7lq+o4inBQsWxAprJ4otS9CQWnf37t24954+fTpyjafjx487hQ7WgXbhwgUtkGwRdOzYsVDxlM7t2aILnDlzxvMepCOifpTBr+4UxRMhhBBCCCEUTxRPFE8UTxFS7Z49e6abnWrX1NSk34eGnzHQRjOD8mRS7dBGz7qg/vS/e8UkkKshGmpwzgHPcp/0W9Qqlr6IF0upvp7t4ilKHacobNiwwZmahugmRD9BxMyYMSMwzQyFuG15BfFjgOCRr2O2ulTEU6a25+qPOXPmxF7DOqZMmeKcMY/iiRBCCCGEEIoniieKJ4qnBGo8yZpOEE1GPPlxCeIpJ3Hx9LJdUB/2mqsFky2d/vrOIDVs8rG4Zb4YsjL2nk/6LQ58/f0e3wS+3rX/kg4jnhKt4xQGzu+wYcMSqplkiyCsA3LHfh01oyBg7N8bYZaseMrU9gCio+zlJ0+erOtcDR06NO41FB7HuaB4IoQQQgghhOKJ4oniieIpgVQ7O7UODfIpM+KpVUAN/fporPbSyGmnOkQx8bYQT8nWcYoCzvG4ceOSFk+gvr4+Lm3P1VAryU8sRRVPmdoeQC2oHj16RO4DI5hc4kmm6BFCCCGEEEIoniieKJ46j3jqES+eUK/JSCf8DNEEIQHZhJ8xK1jmxdPr0dItnlKp45QIhw4d0oLLJVggYxANhPQ7O83MgEi5uXPn+i6/Z88eHa1kuHz5cmCtJlsUZXp7hqqqKjVw4EBP6qH5d8WKFR7BhDS/R48exYmn8ePHM+KJEEIIIYQQiieKJ4qnTiyeclpT7RCZEVbTKbOpdhRP2QSiiYqLi1VRUZGu8VRdXZ3Q8s+fP1c3btzQsuzmzZvOYuXpJFPbg2xF7Sj8CxkrJRYhhBBCCCGE4oniieKJ4slHPH3Ya5Ea+/VKVVJanbaHwJXSKjUmiVntKJ4IIYQQQgghhFA8UTxRPL0u4innsPq4z1L1zylr1dVrNWl7CFwtq9bi6UOKJ4onQgghhBBCCKF4oniieOq84qlLn6Vq6Njlaseen9SVqzdU8eUKdaG4TF24WKbOXyyN1PBeLFN8uVxdLrmu8nefVINGLdHiadDEgxRPFE+EEEIIIYQQQvFE8UTx1BlT7br0Waw+7jFT9R+xQA0fm6sGj/xWDRjW8v+hM1ra9Ihthl5m0IjZaujo71TfoXPVh19MVx/3XtSyDYoniidCCCGEEEIIoXiieKJ46oQRTwe1ePqvD3PU394Zo974r6HqD3/9Uv3+je7q//nz5y3ts4jtc/X7f/9C/c+/9FJ/+v8GqL+8NUL97w8m6HUPzmGqHcUTIYQQQgghhFA8UTxRPHU68cRG8UQIIYQQQgghFE8UTxRPFE8UTxRPhBBCCCGEEEIoniieKJ4ontgongghhBBCCCGE4oniieKJ4omN4okQQgghhBBCKJ4oniieKJ4onjqzeLp+/TobGxsbGxsbGxsbGxtbS6N4oniieKJ4YqN4YmNjY2NjY2NjY2Njo3iieKJ4et3EE4Muswum2hFCCCGEEEIIU+0oniieKJ4IxRMhhBBCCCGEUDxRPFE8UTxRPFE8EUIIIYQQQgjFE8UTxRPFE8UTxRPFEyGEEEIIIYRQPFE8UTxRPBGKJ0IIIYQQQgiheKJ4oniieEqLeHrx4oV68uSJevjwoXr06JFqaGhIqT1+/FivD/9iffgZ26B4ongihBBCCCGEEIoniieKp04mniCGysvL1fnz53W7cOFCSq24uFiVlJSoy5cv6/9j3dgGxRPFEyGEEEIIIYRQPFE8UTx1MvH04MEDVVRUpPbv36//hXw6d+5c0g2y6dKlS+rs2bPqwIEDep3YBsUTxRMhhBBCCCGEUDxRPFE8dTLxdO/ePS2dCgoKVEVFhU6PQ0PqXTINyyLN7vr163qdWDe2QfFE8UQIIYQQQgghFE8UTxRPnVA87dmzR7fa2tq0PQTu3r2rdu3apXbv3p3W9VI8EUIIIYQQQgiheKJ4onjqIOKprq5Op8QVFhamNTLpzp07FE8dTDz9+uuvat68eWrKlClq6tSpgW327Nlq37596pdffuFfvA6EfY6nTZumnj596nwvIhdnzJgRO+dz587N2vON51dOTo7ez3/+85863ZcQQgghhFA8UTxRPFE8ZZl4MoIIs9BhMIrW1NSkB5to+Pnnn38ObGYGO4gnSCeKp44jnjAr4eeff666du0auX322WeqsrKSf/U6CPY57tatm69wRr02ea779euXtTNUrlmzxrOvx44d48kmhBBCCKF4oniieKJ4ypZUu7179+pUO6THAdRqqqmp0Q1iqrm5WTf8jN/dunXL2fAalgVYF8VTxxJPEI1ffPFFQuIJDSIDUpKoDneOIZ5wX7tA1JAtnrI14oniiRBCCCGE4oniieKJ4ilLxROkkBFEiFKyxdP9+/dj4gk/+0kn0yieXi/xNGLECDV27NhYw/9d8mndunX8y0fxRPFECCGEEEIoniieKJ4onsLFEwaXJnUOwgl1YdDws51a9+zZM93M/83ANB2pdthm7b06dbOqWtXcuq2ePGns1OJpwYIFqm/fvkk1LJuolPj00091nR+bmzdvxqXkfffdd77rhZC8cuWKbtXV1fq8BvH8+XN9zVy7di22jF8dorDt+UkVGxyn2R7agwcPEjo32GfMColly8rKQvcX60eKojk+zAaZ6LFF6cu2Ek/19fWqpKRE71d5ebl+VoSB5wbOs1kuaj8gStM+vxs3bowknvCMMucZ243a7/ZxYtZO+/rBucFrOP8Q71H6gBBCCCGEUDxRPFE8dXrxZLcwEZUO8YR1b83frf7H799Q//LbP3jae117qNKy8k4pntCn/fv3T1g6YRlzbhOVEn71f3A8YeJp//79qmfPnnHRUVjvjh07nFIABaz9UvrGjBmjo/BcYgTrzM/PVwMHDoxbbvjw4Z7lJFVVVXq9ru1hXUVFRXHXpnz/9OnTVUFBgd6+vTz6RIoaLLt582ZdF8u1vS+//DJue8n2ZSJyMRXxVFpaqoYOHeo8noULFzprQt2+fVtNmDDB9zyj31FfynWuhg0bFvf+8ePHq8mTJweKJ0RiovC4a3vYF/sZJSOo0O+I9kQhdvO7Xr166WMLun7Qvv32Wy3YCCGEEEIIxRPFE8UTxVNLkzWe/FLpwlLvUk21w+B84tRZccLJbmfOXex04gmsX78+YfGEZZKREkHRMJAKfuIJ5xCz3oXVhpLL4HoaMmRI6DLYJyORjBiR0sevODreg0gtyenTpyPVsFq5cqVTPEUpxP7999/HlkPUWZTtHTp0KKW+TPQcX716VUfsoPC4aXjfiRMnAsUThFvYfg0aNEhHgxkQ5eWSdK52/vz52HI4d1GXs8UTtukn+6SAk3LSTt1zHReed2HrdfUBIYQQQgiheKJ4oniieGpH8bT/4JGYXELE0+FjJ3SK3cNHDSpv9frYa79/482WfegYg7l0iqfGxkYdwRNVOuG9WCZZKeGKeDp+/HigLNm6daszmgfiwm85O7oG24ao+fHHH1Xv3r09ryHKyLWMad27d3duCwLAiBOkurmkAaJtXILjp59+ihNPru36FV5H39qiClE6a9euVSNHjvT8HtE0RlQk05eJnONEmhRPkDn261jv4MGD434/Z86cWN+NGjXK81qPHj1UXl6eWrx4cVy/G5mG5QYMGBC33j59+sSiwOy+NeIJfY9t2NcW7gvX8ZkILSOe5D7Jn3GO7Kg/7M+qVav0dWsfy759+/jJkBBCCCGE4oniieKJ4qm9U+1++eVX9dFnvWPSqfLGzbj3zJq7MCafLpeUdjrxBA4ePBhZPOG9UfGTEhAqGEi7xIpJZTOiBNEytrwy0gbYUTIQFbhm7Bo9MoIH+yUlkVnGJZ5kkfPCwsK417EMsKOPIB3MdYrr+uuvv3bup0s8QWiZmlD2No28Q0qanwTDOvF/GX0DgZtsX2ZaPLn6AFFhpt4UjlWeL5POZ59HW2yePXvWeQ0g7c7el8OHD8eWQ4qlX8STHbmEtDyT+oYoLzvKzqQ6yuWMRMK/EEvo9+Li4rh0QQhZw8WLFz2vLVq0iJ8MCSGEEEIoniieKJ4ontq7uDgKiBupNGnabOd7GloGi5u371Sr1m7URcc7o3hCH+fk5IRKJ7wnkVnIkpESkAqyiLItgyBwsA8mhQvvlbWKTDqfK7IHkmDv3r36WsI1hELQEBWmcLe9rdGjR8cV20aNHVsA4D12rSCkmwX1hZEktnTB71FU3GBH9Zjjs8WTia7atGmTjh7CuiGvTEulLzMtnuzoLewD9sek66EPpkyZEidl8Hukz508eVL/iwLfsfu6ZTlEt7nEU1g9MazXlkAQT/i9nIUR/YPzgOeV6T9b3pl128IKwkz2LdY9adKkOMmI6w0piogGxTWL7eDfbJ0NkBBCCCGE4oniieKJ4qndUu1Q7wQtLLUunal2KBpuxNPJU6dfmwdiusWTkRJh4slE92RSPKEhTcrgEkhhDVEmKNIc9B7s18yZMz2CyBYziJqysaNlIBYgA6Q4QdqUPQOZSzBhH12/t4WE63WIB1dxcPm+sWPHhqYsRunLRM6xSWlELSrZli9frlMaXeLJJdESuUaePHmiDhw4oObPn6+jtPxqNxkJtGLFitBj3LBhQ5x4wrHaaXZhzUSN2eLJdW3t2bMncF1IiVy6dKlvgX5CCCGEEELxRPFE8UTx1Mbi6VpFZYcsHt4e4glAGPhJJ7yWKC4pgeiU8vJyPQU92tGjR3UtG1uaGPkSVpTZ1bBOgGLfUYo1oy6SSzy5hIT9HsgMXMuybhQklKv4s52OBylkiyXIJCmtgsQUIrdcNZBckV4u+ZFIX0Y9x4hYQ6SSi7KyMqd48qutFdRMnacoBcnluXLVhbJnrAMQWfZ7bMEYpZnZ6uy+l2l0EhTuj1IQXxZKJ4QQQgghFE8UTxRPTLVLINUunTWepHgqOn3W931PGht16ygzRWVKPKGP+/fvHyed8DtzLlMVT/X19XHvcw3ozcDcrtWEGjqIoEGKm2mIpkFaFRoiYSC0JJjBDAP6r776yncgD5kTJeLJJZ6SjXjCftm/l7WawsSTAal0u3bt0qlaftE+6M909GWUc+yXnmf3nV/EE+SVvV/4v9kv7CPEkKsgOeqGzZs3Tz8nVq9eHSntzSWB7PeYiCc7gg8yEf0k99XsJxpqhNnSz06ntME5R80nRDf5iUV7RkBCCCGEEELxRPFE8UTxFCKY/IRUKuKpovJGTDzN/NYdsXO17FprOt5PZzq1eAIQNLZ4wu+SIaqUcNXUwXn2Ez02iIpDdBMaCkpDIG7evDmW5oVi0aZWE+rxoEC6XZTaJZ5cNZ4gA1xRNOmq8WQLBT/xhLo/RsigELepU4X3Y9uo92SLk2T60szKlknxZNd4ckkVHBf2x+wbBOaZM2c860M/yf1FzSfX8aKgt/z9jBkzQq9HU+PJrrflEqmIRjL7CTlmiyxXH+FZh2vLXLOnTp3yiFm7XhXFEyGEEEIIxRPFE8UTxZOVaheWUmen4JnUvFRS7Zqbn6s33nw3Nqvd7Tvxy0FI4fXf/O5PqqrmVutg7/FjXZwc7eHDR3HLydd//vlZ4Ouu5bNVPDU2NupZ5Yx0ws/4XSbFkz0wl5IA0Ty2JDpy5EhsOUQNybo7eC9q/kyePDkurU2KBTn7mJFAYbPaYQY4+3XIEOCa1c4U9YYImzZtWtwsdJAkyYqnnTt3BkokW5BBnCTTl2HnPh3iySXuENVk+gFSZty4cZ7XERFk12Ey6Xem3+yC5GYmOFdNKchJw44dO3xntbP7FecG15vZpi2IcF1HEU9NTU2evsd7bt++HXvdPnfouzApSAghhBBCKJ4oniieKJ58xBMGZekQT2DjlvxYRNO//eGv6tyFYh318qC+Xn0zb2Hstc97D/QM+Nds2Bx77dsFi+NFiXg9d+mKwNddy2ereAKICDLiCT8nSyJSwp5pTE4Xb7+GhrpQrjQkM9Dftm1b3GuQURADSB20ZxiDPEi01pAc/NtiQAomV/obJJZLLEUVT640M8ibvLw8XdPJfg2iJtm+zLR4AnbRdrMuOYucHYnmWgbnGLJw6NChvoW+7dnpZD/4FWw34smvzhPWZ59/Ke7CxJMrysoUakcqn71u9AEjngghhBBCKJ4oniiemGrnSLWD9EGzU+3wjT/eh4afMaBFMwP7ZFLtXm77V9Wz39CYBHI1RENV19z2LLdp245WsbQsXvKk+no2iyecg5ycHN1SGdwmIiVQdNwlCcyg3CVTXCLI1OnCsnYUjV/bt2+fU4yEFXhG5EzQMfg1yC8pHGT6VlTxBJYsWRJpe7Nnz/asL9G+zKR4klE7dk0mv36HqAYoYp7ILHOybxFNFKXwvKsAOVLooiwjo+zCxBPA76IULzf1wQghhBBCCMUTxRPFE8VTQI0nWdMJosmIJz+SFU9msL1y7QYtmGzpNGz0eHX/QXydlv0Hj8Tes3n7zsDXv89bHfj61vzdHUo8GUmAlgquGc/8pISrwLSsn4NziLpNLlmAgTj6w049wjKIAPIruA0RIWeus8UIoqZkupZZz4ABA3yLbldVVXlEkWyouwQ5Ze+jFEFhxcXtPoQ084vSwf5u3bo1rk5VMn2ZjnNs9y+ihOx7HrWr7Ig0WYvJvvfR37KelTlH+HfFihWefcPxPnr0yPNMccnJL7/8Up972T8mQi3KecZxmQgzg0wLDOojRM5NnTrVVzphm4gEJYQQQgghFE8UTxRPFE8hqXZ2ah0a5FMmxJMccN9DGt+r2ktPnjR2yAdiW4inbAbXD1LNcB3g37CoLJx3vBeyCAWnq6urPQLCT4wYKQUBdv36dV0HylzTYUCulpeX6+sa/5p6T5kC68d2zPHh/7ZwSkdfthXYf5wvnCf8a4qn+4Fzg/3HvxAzUY7dgPNbUlKi+y7q+TUg6gr9jucZ/nVdV8mAqFCcG+wXjh/7FdYHhBBCCCGE4oniieKpU4snDAaNdMLPGJBDOkE24WcMGDMtnl4XOrt4yhS2eJLpVYQQQgghhBCKJ4oniieKpyxNtUPaTlhNp0ym2lE8EYonQgghhBBCCMUTxRPF02sgnhC5tGfPHt3SKYiSndWO4olExZ4lTRaHJoQQQgghhFA8UTxRPFE8ZYF4QtpcYWGhbn4FdJNBRlJRPFE8ZQLU64F8Mg0pooQQQgghhBCKJ4oniieKpyyLeIJ02rVrly7Wi5pOmAEKxZlR/DeRhmUwbThqQmGWKMzQJWtHUTwRQgghhBBCCKF4oniieOpkNZ727t2rVq9eracQX79+vZYkS5YsUYsXL1aLFi2K3LDM8uXL1apVq/T68vLydAofxRPFEyGEEEIIIYRQPFE8UTx1QvEEKQQ5tGzZMrVgwQI1a9YsNWHCBPXVV1+pESNGqOHDh0dqeC+WGTdunJo8ebKaPXu2FlHprh1F8UQIIYQQQgghhOKJ4oniqYOIJ0LxRAghhBBCCCEUTxRPFE8UTxRPFE+EEEIIIYQQQiieKJ4oniieCMUTIYQQQgghhFA8UTxRPFE8EYonQgghhBBCCKF4oniieKJ4oniieCKEEEIIIYQQQvFE8UTxRPFEKJ4IIYQQQgghhOKJ4oni6XUTT42NjYotexrFEyGEEEIIIYRQPFE8UTxRPLFRPBFCCCGEEEIIxRPFE8UTxRPFE8UTIdnEr7/+qm7dvqPu1t5Tv/zya7vvz6OGBnX/Qb16+KjB8/sH9fX69z///KxTnJfGp0/18eK4cY7C+ocQwnuQ8NojhOKJ4oniieKJ4oniiZCs41pFpfqX3/5B/evv39Afcttbgn3aa4Den7+/87H65ZdfPPuI9u2CtHqITQAAgABJREFUxRnbflNTk/ph1Tq17IfVatXajaqpuTnSPm/bsVsvs2hZnqq9Vxf3+pWrZWrjlnw1avxk9UG3nurdLl+o97r2ULPn5arbd+4617tmw+a48wLp9oe//Fdc/5B40K8btmxXg0aM0/3913+8r6+tTVt3qKdPf3Yuc/DIcbX0h1X6XLrajt17PYNAeY7x2sef91H//vd3dPu890D105lzvtdM6bUKtWT5j+qLLwfr/XvjzXdVv6Gj1JFjJwMFMJbds/+gvo6GjZ6g/52/+Hs9UA3i0pUS1WvAMNV38Ei9zbETp2rhHMS9ujr19fTZut8GDh+jj+n0uQud5hpK5h6EGCg8dETNW7g07tzi90H3bF3dfbX4+x/1s+G/P/pcLzdu0jR1+crVtB1Tdc1ttXtvoZr2zTx9Xs3+YTsXii87r7f1m7f53hOm5S77oWX5Syk//5N5Vsrl9xYeVB991lvfg1gO98jm7Tt97/mE/j60/D04ffa8WrFyrb4f5HMF10rD48dpe67w+U8oniieKJ4oniieKJ6I+JC3ePFiNXPmTN1yc3P5QagDUlpWnlXiadjo8Xp/8GHeJZ4wwMkUK1aui20nan+cu1AcWwbt5E9nPK8/aXmW/O5Pf/O8x24QJDabtu2I7cfDh49iA48//ufbcf1DvOTv2hvY3+jTq2XX4q49SJmg5VyDPQgfDHD9loGMlINK/DwuZ1rgdrC+J08anffHxCkzncvgGqu7/8DZHxCjftvC9esC/eO3DKRsZyCZe9AIA78GUWHWJYGkDFpu5rcLnNIzWbHv10ZPmOw5pijPr3R9KZDss9Lch937DvZdDsIoVYLuCbTf/O5P6uKlK2l5rvD5TyieKJ4oniieskY8NTQ0qHv37qnbt2+rO3fuqLt376bcamtrdcM6sW5sg+KJ4sn3Q+KTJ+rDDz9Ub731lm69e/dWL1680K89e/YsJqQopbKb23dqdaQGohkeP36SNeIJ33a3pXi6fqMqTk64BoiS5ubnOlrAM8CxIkIwWMBgCoOS8V/P0N++Hzh8TM2Y851nOXvAEjbwkP1DvKzdsCXWr0NHjdd9vmvPfn2dS1Ej5Y689hAtMWJsTlxDZJEdjTRr7sLYOj/p3ldHfZw8dToWmYCGSBfXQBTXxOQZc3TEAwbUctCN/bbPrxSjiLY4erxICwk5gDXPYJcYxbWEaBfZP/jdnbu1nmVwvcl9QRTgvgOHPcd09ERRpxdPrnvQiCdcC0tXrNQROFvzd3v6DudfLodIGfn6d4uWqbLyClWw74DnPKTa57j28JzHunCtQyAeOHRUX1c4RpdYfP78uZoyc66OHLLvB0RJyeWKTp9Naf+SfVbinkSUk3kdz2TI572Fh3TEnusLgVTEE54P38xbqO9bnN/eA4d7nivy70ayzxU+/wnFE8UTxRPFU9aIJ4ihS5daPuCePKlOnDihioqKUmo//fSTOnv2rDpz5oz+f3Fxsd4GxRPFk/+HxJ/VRx995BFP5oNQkJQiJNvEEz70Y6CYqHhCWkzcN+uOVCTIPdcg4ez5i7HlkJrDgUd6QLoahFB9/cO462vStNmxPj9z7qLz2vs+b3Wk7UhhgPMhn3GI3nBFJ+hI0ZbrBil/EJcSRG387e2PnBF3WJ/Z1u/feDNW6wzrkxFX8vrDa4NHjotJLsgMl5yz7ymkOpnXIE0MFZU3Yr/vDNdfMvegqc3jesYYQWGfWxlJY0eTSSG+cMmKlI8J6XyutDNEy8lrOeq5NWIH16R9PSf7RUiiz8oTRad9I7bMfQqBliq4v/3SU6UUlpIrmecKn/+E4oniieKJ4imrxFNNTY06dOiQ2rlzpzpy5Ig6deqUbqmIp3PnzmmRtXv3br1ubIPiieIpGfEU9BoJHsji209EM2CwOnnmt/qDLr5JxoDkckmp5/2oHYEPs6jfYoPfoX4Eoi3sFA3UIcE386jdYRoiLlDjKAx8CMY3+aYOCf5F6hCiPFItTp6qeMLgYt2mbbqvlv+4Ru9TFExqFo5l1bpNkcSTGRDifdt3FsS++U+kBg766813P3EeV6oDD3zbv3LtBt0XkAfpLBxvrjvUGoLYwDf5iH7AYBrXHNKJEHVw7OSpuIEb6sgg/czUv0FD/RtED0SpqZUq5RXXnYN8ee1FlZsmTRUNsito8IgBdSIDTjuyA/ez+T2iQAyQazJaZu7CJZ773ETMIGpEXnc9+w31pPYZaYZ+MIIEEkzKNDsVFTWg2vraw7rNc83vGYJt4j2p1qNK9+DfCBL72SKfb5XXb0R+RqQbCJ1E0rggscxzLxGpkuyXA65+kPdtuuRXskLP9TcgmecKxROheKJ4oniieMoq8XTz5k21Y8cOtX37dlVWVtbyh+lhywfQevXgwYOkGpZ99OiRKi8vV/n5+Xrd2AbFU+cTT5AP9+/f19cCGlI5EcGUiHjC+9977720Rjzh+rx165a6du2aqq6u1td8qjUvXDS3DH6rqqr0dnD86Iu2AIVTw+pbyBoaMmXH/gYYmJQPV/0IFKt11b0Jq2kE4RC0f6nW0ZARGsmIJ7tGiKtfbDBwNwMGDO6R3hImnmRqBwZcVTW3AiOefK9pIQbsaAY58DDnRUa9BA087Loi6SxEG6VmiWxV1TWxZcNqpNhpKplARpBAdrkGiLhuIDHN7FF+zxl5XSIiI0hyRU1DMhIUEUpSQsjrwQgfV70ov/tGpmnZNbD8ChhLiWWnovpd65m89oCJsMG14prhEoLPbBupWukST4negy7yVq8PjXiSUXj2+chduiJj9wXOm5GRUY/LRMbhWpX3eSbwe1bK82FEsok6C7p30w1SbF33ejLPlUxce4RQPFE8UTxRPCUtnm7cuKGlEwQRxEDaBr+3b+v1btmyRW+D4qnziCekVk6aNCkmi+zWr18/VVJSEiieIK0GDx7suw40pHMmwsWLF9Vnn33mXNc777yjRSk+wOEDXZ8+fTyvQapKENUnl1+ypHVghbpUqEXl2s7HH3+sCgsLPetCVODw4cPVuHHj1FdffaX/n8q3uf94v1vsg+uMOfNVSWmZjniSAz2/b3pdMsZ8cHV9e43IKqT67CzYF9tGWISPjLhAQ7oQUncgm1CnRqYYuAapQc0MGHBMmG0Lv/tyUGsdFMzEZOQQIpL8kN8IR/mGWfYhaurg/65vmm0Q4WQGv4jSkYIhTDxBwKJBKph6K676Ldt37YmTMfg2HxFCdv8EHVe6Byly3YhqQlFkRCzJ2kSQMGaQKOWOGWB369FPy4/iyyX6ukK0lEyVMQMy1CNK5Dqya784z92rfkWTs3DZfSYbIroOHT0eKJ5cM3rJeyaKkJQiCdefnCXLRBtB5Ji0Idx7rsLkRvKb+k4y4gqi1Rbcss6TfN1EVtk1dIJqDmXy2rMljatPjQzBMSEKBc91uw5bUJP3VSr3oLzXIQxkJJtdi0umZWLdZmZMPFvwZYOflEoVs38QmZjlzhU1F/Q3y6SF4jmWCQkS5VkpZQyeNfJZYp5R6SgsHn/8v+h9w2ceiCZzz9iRgMk8V9Jx7RFC8UTxRPFE8ZQ28YSIDKTEFRQU6MLg6RZPW7duTbt4Km4ZFIzLmaq+nb9YPW75QE3xlD0gggiiJkgYmXblyhVf8YSC9LK2k6shnTMqSB+Nsk8QSPiAN3r0aM/vDx486FnfnDlzPK+fP//yAyn2u0uXLqHbwfJmUAw5K1/79NNPk47qgmTykyXzcpelJJ7CBn43blaHihaZfoNvt7G/rkG2qX8RFtmS7tmQXIOQKOJJpr6YgXmYeJIpFWZgLgWEn2AIms0MaY7p/GZeRo5lUjyZ9Boj3uSgy6TtyCgNiBRcby5Mvax/+8NfY/0eNkOY3cIKCMtzJwWOq89cDUJYpo3Jmkeu2bZMH0QVT7JWDYqGy30zUURGJEuhsm7jVp2CZkdImDpO5lqW1yDW5xKm8t41UVwmQgqDYAgqs11XBE4mrz2Ac2aEB+p12TLECLKXxdl/TWhWtnRGaPnJdymWbIkpn11IY5bLyVpb6cBP6qJPo/wdk1IVKbfpJJFnpXz2BjUpwFPFT2biPrNniUzmuUIIxRPFE8UTxVNWiqc9e/bExBM+LDx9+lQ3fAuDD09o+BmSIKiZDxqZFE95q19+Y/veJ90pnrIIl7CBhFm/fr1asWJFnJBavHixr3jCtde/f3/Vs2fPOGnz+eef6/dEjdDDfiGiSK5jxIgR+tqcPn16XOQTZmQ8fPiw5/cTJ06MfUjFh0Uplz744AOdVufaDtqXX37pSRc07ejRo07xhONOdsDiCqt3DZYzIZ7MB/cg8QSZ4NoHP/BNPSJAENFy/uKlwIYP6n7TwCcKnnWoHYSIGkR++E29bUuqFSvXOs+F3R9yECG/5Y8qnuS39rK5anSlek9DeqAfICowiMuEeDLXgusaMv3od73gGjEpJ5hd7tTpc3H3ANaF6wPXUtA1hEgn/OtKvZLCQkbt2PXScFyI3IPwgXCpuXVbN7uAvEyjkbMaQpghMs8gZ5OLkiYF8WkECf6VM0zG1z77VddZM3WYcGxbtu/yPQf4Ha53XJtGHiO110hned3aUVwyxQkzeOE6iqV+Oc5tJq89g4n+smcmlLLH1NzC/ly5WqbPR5RnEdaRDvzk+6jxk539gfQwGfVqN5yXdOIndXEdRRJDryKLcN3LyLx0PWOiPitt8QSxd7OqWv8twKyP5vfYz3TN2mpm37P3DTWm7MLyyTxXCKF4oniieKJ4yroaT3aqHWreoCA4Wl3LQBGDajT8jN+hPo6r4TUsm2nxZD7oUDxlFxBIUrDYKWqYPdGVnhZU4wnXXarFxSGK5DqwX4hMMqxbty4uegl1oOSx4OfHrz4UI01Qvn/BggXO43v77bd1ep/50JiXl+d5fdq0afr39vZTiXgytT9caXEYVIYVVc20eJJFlNOd7tFeYDpsHA8KYcuCtEHi6fCxE86aJjJyxFXrRwo8vBd9DimWzqnI21JUm+sORekTFU+QRL0GDPMdYGdqIIsUvkQG1xKkE5pl7bQik3ZpGlJFBwwbHXdcsiC4DY7XpFrh2oIo8ROeiFSSgsWkF7rktfmdiVQykUImtdUlTOXvMMg3qbgmtUems2a62LUf8vhl2pV5jqZTMiQL/hYgIg77ir41EaOu57xMtTP9CgmGqCQpONL57IXowrMIkmb/wSOxvzFRzqusi2dHnaWLqM9Keb3KaEkDji0T/YfnP8QtBOPsebmeqCd8WZTqc4UQiieKJ4oniqesqvEEOQRJBFlkiycURDbiCT/7SSfTKJ46d8QT0udQ/wj/oqB27APxkydqw4YNCYsnLGe/JqUM6klB6GDddsPvce3h2rXT31BrCcLHFNSHIINsMqJMT5du1ak6ffrlzGbff/+95/cQTi6BtXq1d3YeHAuimXA82D5+xrGg+PjevXvVvn37dDt27FhS6VIyjQbfmNryyk8wtaV4ku+J+qE6m5EDVxQgxrfjiLzBoNp8E41jxXFDCqCv8R4zOEQaD6YkN9E6GAiZ9aE4OQaSUabvxuCqoxWLldedqWtkZESYeEJdMVedEzQ5cEtngXHsL2Z0ixp55LcOIw7s84TXIHJcEg0SyogDPyGJ60oO+u2ZAM02TOoR+tkIJDlTnZRMJgrIpFNBZiECSUZI2YN2I7vkvWGWkamoUjwZ8djWyJQ6UxNMznqWKRmSKoisdMkTWf8JUTq25GmLZ4Sc6TDsOS9lq6u2WaZElKsf5PXqqk3lKj6eCaREsieKSOa5QgjFE8UTxRPFU1aLp5ffRr5MnTMpRGj42U6tQzQJmvm/+YOXDvH0WNfxqFJXS6/pfx+3DNwpnrIfpMmdOHFCLV26VA0cONC35lMU8RT0GrDT1OxmZJFdk8luw4YN01F/UtYcP37c855vv/1W3weyQLlMs5Nphoh2QjRhWw/kzaDS9eFTRjskIp5Wr9+cdvHkSlFyYYqBG6kQ1NpjABu1LoiMILHrR4W1qAVtZR2esFkFs008mSiZKOIJf2+MsEB6GmZWlHVNZJ0osw4TrRDlOnJFCgGZ0gIhkUwtFRwzUmWC7ieIGQzIMbhFRBUGxDifJlLDFdEGAWQG+2go9u+HlBO2YJIRXTKaxnWdyz4ytZv8pmw3Td6fcqDfntGPpj8Q5YJ7U9bbkpIPYg/pVzimsGsI/YBrO1P1duQzxAhQv5k8JX6z4aWbsMLtRlAZwSclZlvgelbK69XUnJO0VYSe/AIpqkSK8lwhhOKJ4oniieIp68WT3cJEVDrEEyJD8Iff/qCLAcGW7TvVqnUbKZ6yFMzIFqWId1uLJ3yonTVrVug+QSSZlDpch7LAOVLgSktLnWl2eha1sWNjv3/33Xc96XxtPYhCxJNM+zIfnF01VeRg0/7AHWUwk4h4koO6KIVk26u4OI77wKGjutAymktEJLp/ZpDjV9cjVfEUVN8rVbl28Mhx3RBFk4kaT4mIpzB56ZIgqRYXl8u/LDb9S9LHHPV+8ju3JmLItU5dIHxTsHyVKUN2ipmsNWWKahsBLJeRESHY/tfTZ8dJLKzLRFSZ45ViHxF9LonVFteeLfpi5/3U6ZicwbHIWl/tVVzchZSv5r7wqxvnd2+4nhGQa6hpZfo82TpVUWbnlM/OqBFEiJ4y+4b2KMm/sa5npSz07Yo0krLPJabSdb3G12H7JWPPFUIoniieKJ4onrIi1c4vlS4s9S7VVDsM9l11LVyN4im7wIx2tshBShmKiGNWuM2bN6ddPOXn5+vXUYTcbpA/psZS68CqWcsoCKNu3bo55ZMpeo4Pc3bxcRyP/P/ly5dj75WFxRHlhcL9NpWVlbpGFBpSEdM5AxmQMwxdKL7seQ2pDH6z2pkPrRhsyn2SH7bTIZ7kwDboW27zewyEMBhEweiwhg/6KHScrogCOcj0E1roK6TJ2S0o1Q5gwGQvE5Zqh74P6i8UQTcDZqTvpUsOIfLFlmftKZ7kgLX0WkVcFIWRHXIdGLDi+ohyHR0/+ZOnro+ZjhztZRRLtIGgCxnlE7UWiywWjkgIGUWD7UycMrN1AL9uU0KixZYjkJyu2c/sfpXXAFK4zP6hf+SxmygMW+ZhfZ907+sUPG1x7dnbMWlKmAEOtdrwMwqb2+9DZBbu0bBrCLMKumbsTATUTvL9gufo8bgoMhnxKmeFdB2nXXTeT6QHiXyIGj/kebfvUfs9Lpnqhy2Q/WafTOZZaQtU+xkqZ4p0ybRErtemV1/gukDBcBPdKOVvup8rhFA8UTxRPFE8dXrxtGlrvucP94HDR1XtvXuquuZWbPYdiqfsxC6ujQgg+Q03ahmlKp4GDBiQ8IcqFM1fvny5rrm0Zs0afZ0aMIPdzJkznfulB2KnTwdGR8kPt3bxcERjeWTGkyeetENEU6F/cC/hHjHN3EPJIIu14sPzrdt3YhELMr3LThWQA4Vde/brD7iQI/2GjgqczhyDI8gRDEJMbQpsv6rlfjWvoUlMmoOp/WJkEdZdeeOmHuCGTWefaew0oWRSK4KKi0eJFLBr+WB9WBf6DwMNiCqIOUT9mBo6rsF/uuRQuusmJSue5DWOgZ6JesAgT16v6dhXOdg0dZMgcFGw2TRc91J4YvCObSO6BPcd7g3cA4jwk4WN7SLhOJfDRk/QolWf25bnAiSHFKD2fQE5IlPmcC3IfTP7Z89sJwtUQzDhd7hnzbZc4sJEAplUQ0hkHFf3voN99w9FxeUsYZipC9tatCwv9ntb8LTFtWdjR4EFCZO2ev7geY1IVPQp+g3XB67xdRu3evaz8voN53GgvyExzHMaUTzmNVtg2l8ehD33zPu+W7RMX3MQ59g//L0xReTNNYnr2EbOcOi3L0HP1LBoqmSflVK8ogi+ebZAIsp7wyWUol6vJpUOkhNfLqBYv3lGINpM3u87du9N+blCCMUTxRPFE8UTU+1cNZ1aBuZ//++PY3+0y66Vx71na/4uiqcsBefblYbmFz20YsWKhMUTxA2ihVAIHK9FwY7EsguUYxY7P/Fkb9/vfcCuCYV9RfFyc/zfffed5/X58+fr1+x0Qci1VMSBqckkByD2oMoeUESpVWSLJ5m6FyXFTH7jLOvRREl1aq+BX7rEU9RIDdfsYC5hFzSTWzqLtrsGU+mMeDKRdi7xZM+oJlOKTGSHaW9/+GnodZcMUfrcjgyJci+NGj85TuKG1f5a/uMa5wA2mdRBUzvN7/0y2kmKMVm83FUA3RYIsvaMqyEl2KTmteW15xL2csCPSLC2rDlkEzWtz34uyZlLTbPrbKFkgZRVEpkKHVTcOmqKsd8MmzIyNxFRYs/86Lf+ZJ+VrmeLfZ/4pQVGvV6j3reQ6p4v7pJ8rhBC8UTxRPFE8cTi4o5WcrU09gd08ow5vnLqP9/6gOIpC7l69WqcnIFs2rZtmxoyZEjcayZ6KRHxJNvJkycj7ZdrVjv8f9WqVVr+2OvduNH7wdKvMDnqPcV9oOzbN+59/fr1U++9957ndyg+XlFR4RRPthhLZkCPaaPtD6Uz5szXYfh+IgW1jFwDGzPwf/nNdOuHWllnJOwDvv3NL/YRs8D5feC+W3uvXa9l+9j8anoEYeqp+KW1uHBNb2/At+6DRozz7WdEGjxKc10xu05POtM45CDPRHcZ8ST7zPSjPAeQIDKyQtZfgmTBoA/XXcOrem3JYrYd1jDLmJQ6ftIA+2UiCm0gDWT0kFwGkSxB/RfWXDOGIcLJdf/u2lPo2x+InJFRZaZBLvldF9hPV81GRJ4gUqY9rr2wvszkrGVRwLWw9IdVnuOXDenKiI5xgXtjweLlzuUQxWOiYF3YkV9+M81B1CEtzU9eIqIOEiusrxNJC8Zy+FwY9HclHc9KbAd/91z34b4DhwPPWdTrFX9rzd9iVy1TfHlkL5vsc4UQiieKJ4oniqesT7WrqanRLSy1Lp2pdsUtAy3zh/Tw0eO+71uwZDnFUxaCY7UFT1Azgsklnox4wQepSZMmBRYOj8K5c+ci75P9TbcdEYWG+lCub8Tr6+t9RZlsmza11mJxiad0DLDwwRozfuFDeN39B6Gz1wEM9m/crNaDk6BBYbrAeca370gJqaquaZNtdnRwbaCf0Gc4Tzhfrho56cAuKh1lJsK2BBEFN6uq9bWDdKSseh4+fapq79Xp84R9xL9RUoogy5C6h/cj9TKTkTd4JuD+Q40dpJb5RR+5rgs0LBs1wg7nCsdj+qOjX3ttfR1BxkPm4N8oggECyrwf/4alKcoaR0ZSRfk7hL8zeA5F3U4qEtzUB4wqB1N5VuI4SsvKY8cVdh/a16v9xYHzHLV8rsZ9IZ8RYdtJ9rlCCMUTxRPFE8UTxZOPeNq2Y3doHSiKp+wD9ZQQ4SPTzcy/a9eu9UgZRAHh/NniKScnx/PBGrPDueRTIuIJoMbU0KFDnSIIEUgLFy7UH9ZtEP1iCzXUc/ID78/NzXVup3v37roWlsQWT/3798/IN/tRxBMhEpkSk0gtFkJ47XUsbLGTbaJPip1EokjbCjlLI69XQiieKJ4oniieMpBql84aT+cvts66dexEke+sd6P++TXFU5bz4MEDXVsJ/969ezctIeCIjtEFNVuugaAZdcLAOYEkhYjCPkKWZiKqAPuLme3q6ur0DHYQt+0JxRNJFKRnZkOxZcJrj2QWObEB0imzTZzI+k5mJr9swa7vxOuVEIoniieKJ4qnNBQXDxNSqYina+UVsT/c47+eHlqAnOKJkMQ+HJuipn4zSREiwfMcUYCuSEBCeO29PiCFC7WFUI/LzIaXTSDiCQX2kWKXyhdPmeLMuYtq2Q+rdWF+RjsRQvFE8UTxRPGUQKpdWEqdnYJnUvNSSbWDVHq/W89YgcWLly7HvQcpeH6z2mHb18orVXlFpbp+42bcsuZ1NOT7+73utzzFE+nooKgpZiryKxpLCCGEEEIIxRPFE8UTxVPWiSekEqVDPKHtLNjnmaljz/4DqvbePXX7zh314+r1nuKNtng6f6E49hpmF7GjoeTrrmipsOUpngghhBBCCCGE4oniieKJ4imNqXYIaUazU+0Q/o73mXD4p0+f6mZmI0tWPKF+z7hJ0aaItuWRLE7uEkupvk7xRAghhBBCCCEUTxRPFE8UTxmo8SRrOpm6C0EzbyEqKhnxZOTT+k1bdcSTLZu+y12mlv2wSv/ctXtfjxxCjSizzMDhY3Tqnl1DyrxuL2vXmPrqn5Pilqd4IoQQQgghhBCKJ4oniieKpwyk2tmpdWhBRT+TjXiyBdSNm1W67hJqLj169CjrC4lTPBFCCCGEEEIIxRPFE8UTxVOIeEK9JiOd8DNEE6QTZBN+vnfvXsbF0+vSKJ4IIYQQQgghhOKJ4oniieLplXhCnaawmk5hqXYUTxRPhBBCCCGEEELxRPFE8UTxpAXRjh071J07d9L2EMC6KJ4ongghhBBCCCGE4oniieKpE4unqqoqtXPnTlVQUKBqa2vT9hC4e/euys/Pp3iieCKEEEIIIYQQiieKJ4qnziqebt68qcXTtm3bVHFxsa7nBFFUWVmpKioqEmpYBstCZp0/f15t2LBBi6fr169TPFE8EUIIIYQQQgjFE8UTxVNnTLVDZNKKFSvU6tWrdVu2bJnKzc1VCxYsUPPnz9cNP7uafH3hwoVqyZIlMdGC9UBoUTxRPBFCSDZRXXNbXbpSoq6WXdPt8pWr6vadxKJ+Gx4/VjW3bquHjxqS2ocH9fWqvOK6qrv/gCekncG5r6i8oR4/fhJ5mV9//VWVXqtQJaVlsesI11Qi6wD36ur0dfTzz894IgghhOKJ4oni6fUUT5BCqMUEaTRnzhw1ZcoUNWbMGDVs2DA1ePBgNWjQoEgN7x06dKj66quv1IQJE9T06dO1kMK6mWpH8UQIIdkChMGnvQaof/ntHzzt2wWLE1pH38EjE14uXcuTzFwPiZyLJy1/3//192/EXUcnfzoTeR2QTb/7098SXo6QRHnU0KAKDx1R8xYuVV98OVi92+UL9cab76p+Q0fp3wdNGPRSzt5Vk2fMUf/+93fUf3/0ufq890D1zbyF6nJJqe8yELG9BgzTzzpsc+zEqerW7TuhIvbr6bP1PTlw+Bi9ndPnLvAEEooniieKp44untgonjobx44dU5MnT1YzZ85Us2bNUk+ePGGndLBB4uLFi/X5Q0N0ZtgH5teZZ8+eqT/+59t64Hqh+BIvkIjX0IqVa9Ww0RPUuEnTYsIgd9kPCa3DiKNElpPLDxs9Punlg9Y7esJkvV4cI8ncuXj+/LmaMHmmvoYweDfXUSKDZMirP/zlvxJejpBEWbNhc5wkle2v/3hfPXz4yLnswSPHfZf7+zsfO/8Gb9ux23eZcxeKndtB1KDfMqvWbuRJJBRPFE8UTxRPbBRPHYctW7aot956S7d33nlHPXjANJdEqa6uVhMnTtTiB1GSe/bsabNtQxR++OGHsXPYu3dv9eLFi057LhAxwYFr20uHl/JqnY4a2LglP6vE0+CR49K+Xl4DwTQ3P48J4ETuQ8irEWNz1Htde6grV8t4MkjGxdMn3fuqpStWqr2FB9XW/N2xvx9okOm2RPrpzDmPAJr57QItolav36zefPcTp3iCWDLvR1Tg7r2Fau2GLZ7f3bnrTW2G9DLRf2g/rFqn9h047Nm/oyeKeCIJxRPFE8UTxRMbxVPHFE/19fXslAS5evVqrA/REIHUdqLlZ/XRRx95xFNnjniSA94LxZd5cXYQUZMp8QTMer/PW80T3EbnApFLyYgnQtqKxqdP1f0H8Z93fvnlV9V74PCYEHogPhPhNcglvPab3/1JXbx0Je7eeWB9hpLPVCxTVl4Re03KJ/teg8A3r0GIGVB7zfz+g249O/Xfe0LxRPFE8UTxxEbxRPHUqSgrK/OIJ0wq8DqJJ3zzimiW9Zu36W91kYKAmhbHTp7SH6J79huq61wgVQupbgZEL2zatkMt/3GNrlNhfxjHt7eQAa6aGHj9wOFjatCIcbruBiIgBgwbrb+ZRgFje/+wDaQe4MO7+VCOD/vYZ/webcfuvXq96eoTs030NwYgQ0eNV397+yNdi2PaN/N0gWQbFF5GXQ/0F6KDMHDYvrMg7pztLTyklv2wWtca8ZMDGIzgPXJgj2g3CLdFy/JidUvQkPqE429qbk6rdMA1sG7TNt3Puq/XbVJnzl0MHfDNX/y9vo7MvqH2ycQpM53bTfSY8H7skznvJmoA19G6jVtjv0dramryvfZwXWMZ7OeXg0a2u0BB0XVcczjvKAY/a+5C3Q+4lnBvYEBqk8w9KK8BvHby1GndF9gW7vu81etDnzGIPIwqnrC9Ldt3xa4hc8+G1b4x5zp/1159XeBcyeuiPYqTJ/usBBAW23ftUaPGT9bPBRwLnnuz5+XGPfMAIm9wfnBuIfps8PzB8wHNdW0kyvUbVTpKCHWGzD2IZx2uh7q6+77L4VqVzzzURbpZVa327D8YeJ6jPiszwYmi0zHxJNPtSsvKY39fdhbsi7Qu1JIyz6AZc77zSCxcD2Z9ONcmWhn3hJFf+Jsio5hxfclIKfu+JoTiieKJ4oniiY3iSaexlZeXq2vXrun0LPuDp3OQ1tJntbW1ejkUv8fPUZZrbhmMVVVV6W1h2fv370cSTw0NL2ekwnbMsg8fPgzdHvYJhfPNMumuFZVM3+kPfY8exZZD/0HUJLpdLIt29+5dp7i4dOlSUuIJfY19q6mpiXvtacvgXPan3zloC/EUVGfCbqinY/oIgyG/QsGyJhCKu9qD5Y8+6x25hgZmYIuyb0hRSFffmD7BB/9J02Y7tycLM+N45y5c4rtvGHTIaxrFZPF79J9rAI1Zx8yym7fvjHyusD6/uiWJiie8F4Nqexv2+bQH10ZI+DV7u4kek1+Ra1ezIx4gxbr3Hez7fhwbBoztQZT7EIJDksw9KK+BqNdrKuIp2aLkVTW3PGlHqRTHb+9npV+Bf9k2bNnu2Vbx5RLnul7+/X+uhYVfGleiyOvI1VzRP/pv45WS0H5wXZeJPCszAWSaK+LJRCj92x/+qqU19hWzeOI54ic6r1VUOlPjIEzlccltyZRx9IWUf3Z/MKKQUDxRPFE8UTyxUTzFOHv2rOrTp49HTpg2adIkZ12l4uJi1bdvX+cyZjmXTMIHMhSYdi3z8ccfq8LCQl/x9N5776mSkhI1YMCAuGWHDx/ulEmQJ6htlMixZbrvwMWLF32XGzdunBZrflFLEHCnTp1S48ePj1u2S5cuWgSBe/fueeor2e3dd9/VEWSyj7t166YlEgq5m999+umnsW8079y5o8aOHetcX79+/dT58+cjiSd8IF66dKk+VjTMsAnxlgzygzOiThCFIwccqG+Bb+Xx/9+/8WbsA3jQ4DNIcMgaGngPImjwTXPBvgP6G2JbPEEWoGYGooQQDWKWxbfL2Df8Hu3U6XNpi3iSfWLaxKmz1IFDR3UtDgzS5MDXDGRM5M2RYyf1INUIJr38lJnOAaxrYGHSMDBYkdEGZrluPfrpgQ0Gpxj8yaLh9iA1lYinotNndbQKIkzMwNRvOSk60HDslTduevomSDxFPSb8i/7FOUfkkrkGsTz+b64HXBvyOpJRBiZiDpFW6H8sa36PSI32wL7mEGGHSBj0vRy8SgmXzD1oiyfc47v27FflFdc9509Gb6Qa8YR7G/cuImCiDKgbHj/2iBCcf4gPXBcoIt9e4inZZ6URT3jPvNxl+r7CuvBck8eJ+0WyaesOZwQO6g6Z32NdqWLEE55dK9du0DWLEJGEZ50UwBBechkpBnFucUyTZ34bKE4SeVai38blTIss+7CPjx8/cUbOoWGfESEov+SQ0UZGPOE5gWeILUwRhWhHUZr6TngvvjAA9fUP40SeFITydTyzTISU6wsZ1nkiFE8UTxRPWSSe+AjKLjqbeNq8ebOvmJCiA1E8hkOHDoUuY0TR45YP4FICQYyELTdnzpzYIE1KkbAGISUHathn7EPQMpAviBRqq77TH8Y3bQpd7u2339ZyyiWewhqOCX0NSRe2bxBjYX3cv39/3a+QjVG2v3HjxkjiafTo0Z7lFixYkNJgCh+M8aFdDkwxwAGQH3jd/tY2GfFkPtzbKQYGfCj3o61qPMkBJgaLZ89708uQ/nW39p7+WaZa4JjtqCtT5BbrqaquiUV9mYgFRFRJ5AAE8kFG4GBAfuNmtXOfF3//Y+zber+op1Tq+yB9KGg5pNzIgrwSpBj5iadUjslOGwtCRmfYM0bJOi0QBnKA3R5SA6l/8jqSslbWg0mHeJKpk7L+DfrcNYhPVDz53b9By0k5AfFpg7REv5nC2uIcJfqsNMu6UmHxfvP8sK9hu37Q7Tt3PddCuuql4TkM+e+K9jNpafZMovsPHnHKWuwz0u1c4inRZ2WUSDG/qKKgKCI0pPfV3qtz9nVQk0JR/j0zUljKMohcCF27L+QXD+Zvi4mQQv9AUEHK6XO8dAUHFoTiieKJ4oniiXR28eQSE5AREA32703UC0SCHUWD92/dulULI3u5oqKi2IciRCXZr3/55ZdOOXT06NFA8YToKJesQfreywFCc5zkwuvDhg2LWy6ZmdaS6Ts9eLTS3sx+uZYzAilIPEmpIxtmrqusrNQRTD179nRGJyHSCALB9DH2Qx6L3H9ERrnOE9Yj32uakWZB4smOnEq29pQcTOFDu2swj0g7DBhlxEWy4slE82Bg66qTFESyA95UJECY0JADMHx7j8El0jPQMNCqvH7DmXZianlgoPHkSaNzoIT1+YHtIAUE28HyiPjyG3ylKp6iLGciCfSgseaW73kL2m6ixxT1ePA+E1GB/YMkQySdOU/YP9RDas+6KvKas0WnlJFyJq5UxZOrePHps+dDo5KSvQ+jLCcLPGdbceVkn5U2eC6Yaw9ROKYWkOsatiOLTIOQsfsG24NghdgIa0hhxt+v+P7/RR+beX5BdhlZZM6ZPG6IGHs98hkmz3Myz0o8SyAZIb3OX/RveA+O3ZZnfumRqLVlR0TaKahIf8RzCP2B2Rhd4to893C+ca5wvFIUQqrbfSHvdRyXFHKYfQ/7Zc45Z+skFE8UTxRPFE+kk4snlwiaOHFiTJDcunXLI5iM1LGFi12zZ926dZ7XT58+7RQuMqIH+5KXl+d5fdq0aS+LulriCTIGdYV0hEJ1dZwEM9uzl8OxmRBzpFQOGjTI87qdIpaJvtOpPFZ64vTp02PLIfrIlkToFz/xtG/fvthAYcSIEb4z16G/5GtIcZPIvjLyCTIJkVmIbsO2sYxcB/bTpBHiQzvOlyv6LEg82bLtu+++S2kwZQSIa8BqBozpEE+Hj53wfLjHQBp1jJBKIwVMtognOUuRCzk7UVhDUWLX4EymU5hoD7+IE/RTrwHDfLeB5RpEpGRbiyc7IiDK8skeUyLiKUo0g2lXrpa1q9SwhYUUZ1LGpCqeXH0m04DaQzxJ0ZJtg+5kn5X67+bTp2rpD6sC65MhjdD5RU1pWdz94Cr4bSKGojSIESlzIUn86tnZEU/yuFEg3E7tNfLNPs/JPitTAZ8PUHwdz1vsi0y3lfLOfkbYXzjIKFV5D5rnnolUMu8xckr+LXGJJ8gyk55oIh2jinpC8UTxRPFE8UTxRPHUCcQT6iFJOYJoFhNdY8jPz/dEF0Hq4EMQ/oU0QuoV6ggZICImT57sFEG2kFq9enXc/kBEQFJge/gZ27IF0o4dO3ylidmeLYYgURD9A/GE7eADmJ0uaKJtcEyrVq1SGzZsiGtr1qzR0irZvsN7ZNQQfm62UhdQn8kVjWWLJ9SP8gwoLLkko4fCZrWz+xD7JWcPRH8OHTrU856Kioq4D+pSMJk0vqDi4oiGgzwz7cqVKykNpj7vPTDuw3QmxFNYcVnUm8kW8RQkcWzhYgZzmKXJ1ezBlIxiMTWMZLSHnYKntyVqvpgm1+8nLtpSPNk1usKWT+WYEhFPMpoB15DfecI5zDbxBExKT6bFkywG3h7iSb4nHfWLMnGOEn1WuqKW5DUYljqHc/aP97vF3ud6NtjPoihpaWb/5Gxu9j0oRZlJywxLcYW8dEU8JfusTDemTpi8xmSKnF/Uoyw+br4UQJ0uczymVhzkk4kCk5LJPFfklw5mGVkjSt4DmewHQvFE8UTxRPFE8UTx1AGwZYSJMIoKhNP+/fvVN998o2WCX70fI4JkPR9E1dy8eTPSdlxiKex1SJAotaTsCB0IHlc6oC1Tku07O1oMqYnxgxZvKqNJ0wuTR0GvJyqebLlnizbsk52aYKfOoa9QiLwtZrUzH4xd3+KmIp7MN8tBNYFQ1wJFu+0oANf04u0hnoIkjj2YCkpxC1sWAxkMTvHNvF+6lYwiQP0PpMrItBJTSySqeApLIUxWPOE6slNv/ZZP9ZiSEU/Zlr7lkp2uYzX1rmSURjL3YNg1ICVJFDlkX6fpEE9m+3Ytrmw5R4k+K+UMZyhKLmV2lGv4+Mmf4qSRXYg8WaRwgTxBUW1ZQFueD1eqnV3Pzb6vXeIp6rMS20GR+yBJJZtfcfGga1zWUJL757oHXfvvmohCimtz7v3+doZFw8oabIRQPFE8UTx1IPGkZ7VoGQRi1ilMw44IilQaCj9jffgX68PPida6oXh6PcTTihXRCkDig9T8+fMjCx0jnqSUkLWLEhFPkBmmhlOQeLJFSZRmZIpd8DqKeIradxAxsh7S1KlT496DwYCc7Q7vxwx39jYPHjyYMfFkyz30y2effRZ7/YMPPnA+J+x0vJMnT2a1eJKDC1l01h6sRImswTUuZ+/ykyLJDnjbSjwlWhsI33DHapqcOh1Ls8MAyk5XkwOcyyWlcetyDXCCBIyM2kiHeJJFdu1BJWQSpkm3l0/1mKKKNJlGk6x4wmAcdWkwcxkaBoeZuOZkEXq5/2bGObn/ydyDss9cMyC6UoOC7sNE5FAU8SSPyS+yp73OUzLPSnntvazP5Z+W5rq38Ixwpee5UlqTwSP61m2Ke91Vr0kekz0znP1c8xNPUZ6ViRYXt9MH/fDrc/m8ca1H1ic0zyM5qQIaonnl/psUWVnLD0X2TUqeS9ZjFsj2TPslFE8UTxRPFE9pEE8YUCMVB/Vo0C5cuJBSQ1oRojAuX76s/491u6akp3h6/bCjbxC1Y4O0MrzPNMgiRDnZQgZ1i1auXKmFBWodRUl9swUSQDqc2RauRbvGE5artz5M+UU82UW3IUUgiJYvX64bfpZpdNu2bdMfxFFzCdFSqGFkN/we20+276JGPMl9N0LMlkdnz57NiHhynZtkI55u376d1eJJfmuMIqwSWdA1akoXPoyb2jILl6wI/abaTEPd3uJJDsyCBuEu2SijUv77o8/VX//xvv553sKlce+VfWpHhGEwawYyYftsBk+JCJgo4slMK+46N7KP5PKpHpMcACMyIggZdYKaUomcJ3tf0b5dsDgj15yr1g9Sl4x8kNdGMvegPJeu6CpT9N5VJN7V765rNYp48ovk0BE4k1pTnvz2wZ7Wvi3OU7LiyUjDfkNHxYk+WfPOvreksMX6UHgfUYHm/a76SokSdA0BRDSFpc3Z95O5huxlknlWos8R8YWJBsIaZvwz5wU1tfw4dPS4M9JISiS7L2RqtDz/9nNKCitZLw33nDxXsl/lpBNY3yfd+/p+AUEIxRPFE8VTBxFPiLZAXRQM/vEv5NO5c+eSbpBNKPqMQeyBAwf0Ok3BYIqn1xt7ljJXvaEff/zRIyxOnDihBZP8HaRNmAgCdvFwvM+WGzIaCKLDrvEUVTzZqX1YzhVhhZpCkK9oKFSe6b5DVGG6ajzZUUmJiCc7QiusjzNV4wnn5MaNG7GG97aleII8M/WI8HsUwNUC9MZNTz2TuJo+LeseOmq8/ibXCDicIwxE/MSF7CczzbRJzcLACbMi4bX2EE9SHr2UButigwUcF2Zq+mbeQl/RI2d6Cko1lPIBUQCPXt2TGOhgQBulxhMoPHTE8+08ohNu3b6j7tbeswZav+i+RUPfmsEQlsF5M6+ZcwhxaM6NvB6wfplWIq+HVI/JlSaEqAIzK54E6U1mEIj1YfBpok8gMRAxhPPoN325nVKT7qK/9voRrWP2u3vfwc4IiGTuQbvelez3YydPxX7/MiLOX2rMmDPfU5cN1w9mqbTPE2YuM9cKolzMOTh6vMjzmhyUS3mE48KsZeZ1XBsTp8z0FUqZPE/JPiu/W7Qs7tmG48E5DtpXSD3XM3HpipWx3yNSNBWkUIGIRHqreXYhilDun5RI8t7Fv5A+eE5szd/tu0yqz8pEBCeuf0T0QepA2OEex7WzbuNWz/5hm7IvTC0tPE9wfrDPWBbXm995MpGqJkoPz0Jc0/K+lXIJoKi4ee3dLl/ofcS2kIppfp+I1CUUTxRPFE8UT1kmnkxdnYKCAj3ww0AWDal3yTQsizS769ev63Vi3bJYNMXT64ud0mUicMyHJVxfUpJAJNy9e9cT1YIGWSkH1d26dXNG5hw/fjwubQ1CxHyYw4xm8nWk80WRIn6iyxZk2O+nr75BxPYgzIJEWLr7Duly2K69HGpkmeVwP9qz2hlJlE7xhG3cv39fi6EoUWV6oOCY1Q7PEPOBG8chXzfF4YNmtbOvJZyzTA6m8EHe/kY3SjFb+0O6ScmSRWzl/8O+5UU6iGs76azdY0+bHvq3RQyo/Zqr6Lb9rbh5n2uacylZTHv7w0+dRYOD9tlO8/DbP/s8+Z5fIWrsGQvDrod0HJMcwIUtg6iIsP3zG+zJ+ltBUXnpEk+uhoG0LYMSvQejzvAXNpujnWLkijCS0T5hzU69kwWgs+U8JfuslJE+prC4K31Onid5L9kph1IWQZBgv1LBFMiW+xflHO3aU5jweU3lWZlIFFfYNvykpH0fon/tv09xcrWpKSaAXQ2RafZ9i3tDRj25UinDZnklFE8UTxRPFE9ZLp727NmjGway6QJCYdeuXWr37t1pXS/FU3aDiDlXHaOBAwfG/R4pdPigsX79es/vUSgcUgIix1VXCZFOsQ/wffvGvd6vXz+PpDHrNBE1yYonvzpPSPmzt4f/Jxptk0zfAURX2a/jeCFq7N/LWljpFE92VFIU8WRHa0nBJCPVTMOshy8HMf7iya6nZacARsUMimTRYjOYMukQJtLITs3BfshvglsjTw7qqARXSgUG/yalzDWwDqv9gW3iW3WTgmKamYo6HZg+iTKrnQGpHdO+mec8Lsi17bv2ONNibPkSlIKCAY6Zels2RJDhG3UMZqPsM/Z1ysy5nnXI8w+27yyIJAzstDA7igMNBeR7DRjmrMWUjmNCml/PfkM9g3m/QsMQJjLqwu4Du1aSX2Sa3/tSlRq4fybPmBO3bxikuq7vRO9B/exouc/MgNjuCxk5FeU+MefVVZ9NbiusufoTzwp7NjhzPyHCpq3PUyrPStSks2WIOU/TZ3/nuZdk9CCec65oTilwXLWjEkF/mbRle1w/Yx/Qz4jI8etLzAonjwspw5BmZv9dtbySfVZGBeJ+6Q+rnILdHBfqgAWdZ5d8wzMJ0ZR+z1QZpRl235p+t6PKzEx3ftshhOKJ4oniqYOIp7qWP9RIiSssLExrZBKKHicjnhDWPv7rGWrB4uVZOcsOxVM469atCy28DeFgBMi1a9cSKtotZQKEhl17ydU2bdrkFEuJiCc/yeNqMmork32XyHKQUUbepCqekM7n6nfTn1HEkx4cnzsXqT9l+qVLPCESyhXxlKx4SgdIp0KaDYoiY9AUVdTU3qvTKTqIUnhdvt2FIEGqHI7rZlV1Ro4LkRRYN/obKRrZBlKokMKCPqi7/yArjwnbw3VnUsSCUjVlkeB0S05bPEFY4N54+vRnvV/okyh9mMw92LrsXXXnbq3uj2z8LIL9u3GzWqeEoi/8pERbnKdUwLMb5wd9jX9dkY3tCa47XG/oZ+xjIvIHAtnUZpIRR0Gzj7bFs9L+O4N/oxwX3oNnGEQ1/o36HMP7Y8vU3Y/8LEKKo7nfCaF4oniieHrNxJMRRPhD+VR/yHuq/3DiQwoafsagL6iZP7IQT5BOiYonOf00xVPHBelwdgqYacuWLYsrgor3u6JfunfvHpfiNmbMGM+HJAyOcnNzndvC8qg5Jtm+fbsnAihMPJ05cyZOqtqCw7QRI0ao0tLSNu27KMuNGzcu7j60hZ99nGF1nFC43Y44M5IprI+j9iei1yCnJLZ4ysnJ0deDSzxFnR3wdQcf+lFAG1FRURuie5qsemGEtMrn1ggUvxn40iWeoqZ3kvY5T6QV1AZzCZnV6zeHFqgnhFA8UTxRPL32qXZ79+7VqXZIjwOos1JTU6MbxBSiG9DwM35369YtZ8NrpkYL1pWMeDJFDlPNZ6d4ypIPYY8eqZs3b+prAMWeg77NhDjAdYTrDO8311JU9DenVVV6eRTURs2hTAIxi2PDfuLfxxHTjzLRdxJTYNvsV7IFthPpd8y4h1TEVIpZY1nsLySV6VeSHn5csyHy9NtR6yKRzg2iEcy1gnSaVNKaooinsIL2pP3OE2llzYbNr2Zsm6DrRCHtTqYNI80y1Vn3CCEUTxRPFE8dUjxhUGsEESIPbPGEwbsRT/jZTzqZlqp4QpgxCqMihPx1oTOLJ0JI+4Opt1GTBHVYojZEnbKQK/ED6TqI4kA9FqTDZAIzkxslaHafJxIvnvzqpSHljhBC8UTxRPFE8fRKPCHSyKTOQTiZNBb8bKfWIUoBzfzfRCklm2oXBVP3AnnpfmlHFE+EEEJIxwUpS5ixEamfr0sENHn9RR8KjuO6nbtwiS5mj0kLzpy7yEgnQiieKJ4oniiegsST3cJEVKriydR4smcTAig87prNBVMIIyQfr9mzplA8EUIIIYQQQgjFE8UTxRPFUxaIJ1njyS+VLiz1LtVUO7/i4q5pbV3tf2RhLQiKJ0IIIYQQQgiheKJ4oniieMpS8XT9RpVHLmF2Jsgl1B8pPHREyyaKJ0IIIYQQQgiheKJ4oniieGKqXcLi6Zt5C2NiaW/hobhl5KwtFE+EEEIIIYQQQvFE8UTxRPHE4uKRxBPW/cab7+rf/e3tj/TU7S4mz/yW4okQQgghhBBCKJ4oniieKJ46QqpdTU2NbmGpdZlOtcPUs6ageO4yf3lz+ux5iidCCCGEEEIIoXiieKJ4oniieIounn7++Zn643++rX83bPQE3+VMHSiKJ0IIIYQQQgiheKJ4oniieHpNUu0yXeMpasTT7r2FFE+EEEIIIYQQQvFE8UTxRPHUkYuLhwmpdIun5ubnuraTqfH0/Plz53KmADnFEyGEEEIIIYRQPFE8UTxRPGV5ql1YSp2dgmdS89Kdage+W7QsNmvd1vzdccuYNDuXeIIYu3X7jrpzt1bV3Lrdss5fPcua1/Ha3dp7cesOW57iiRDS2blXV6efj0iNJoQQQgiheKJ4oniieEq7eKrDoCOD4un2ndqYWEJbsXKdqq9/qBqfPlVHjxdp2eQnnpCq97s//S322oP6es/27NcbHj8OfN1enuKJENKZgWwyz8iTP51hhxBCCCGE4oniieKJ4slfPLlS7Z49e6abnWrX1NSk34eGn58+farbixcv9DrSlWpnMDWcwppLPJkaUX7iKZXXKZ4IyT6OHTumJk+erGbOnKkmTJigysrK/n/23jy6iiPP8/1vZnrfu6d75s2bfj31avp0z7T7VXW5XeU+Nc9Tbvu1222fKtOAMVCAMUWBEVuz2MZQIFNiKcCYfZEAg8CITWwCxA4GxCYWiV27hCQksSNWE49vQKTiRkbem3lvXklI3885cSRu3syMjMx77fjo9/uFfP3Ok8/zjBkz5OsTJkwQubm5HKwE0b8jj504xQEhhBBCCMUTxRPFE8VTMPFkq+kE0aTEkxeJiqdePx/kOn7+ydPi7U4/dckmrHa3e98Bq3jSa0Thr/K3b9+JOKa+/fuvvOGqD2Xu39h4l+KpjVBZWSlSU1NbjYTAZ2vFihWyP2gTJ04Ut4wIPOKP7Oxs8c477zjt2LFj8vVz585FvL5gwQIOVoKg7t7I0Z+Jzj1+Js6ev8gBIYQQQgjFE8UTxRPFk7d4ipZqZ6bWoUE+Nad4UiDNDvVE0PDXdlBUXMri4iQQ58+fb1USAuJpxIgRTn86duworl69yhuVRPE0Z84cDhYhhBBCCMUTxRPFE8VTS4gn1GtS0gm/QzRBOkE24fe6urqkiKelK1ZJgdS73+CoEVUml4pLKJ5IIJB+pUuIhQsXtrh4Gj16dIR4uhZHaifxFk/V1dVi2rRpUjLiZ2FhYZu6btS9m71gkXjjJ++KTt0/ECnDPhGnCgpltOjylWvE8ROnI96P78oFi5aJjC9XeLbsjVusizLg9VXrNjgNx8dCDDYQFbVydbZYvOwr+Z6sNetlOjX6iT8yHMw7yoeWEEIIIRRPFE8UT+0p1Q51mmLVdAo71Q4FxH85+XMnfc6s8UTx9HyCiJ2ioiJx6dIlmdqGemF+n0vso/bDxDXoedX+EKqYKJtAOgQRT3qf8HzbjukFPlPl5eVy39LSUvmZsomnYcOGhR7xdPPmTeceoA9BxtJPv01u377tnA/7+E0XRI24srIyuR/2VwsV+L3X+j6bNm2yiqegoE/68xtr7Mz3B3lGEgXfez/65w5Ra+DNnJsesc+Zs+dj1s17q2M313cxIk2/py3qoJpXcXF9kQavNi99SbOOFyGEEEIoniieKJ4onppJPCFyCbVt0IJEJsUi6Kp2y75aHTEJWbcxJ9D5dPF0tZVFibRH8ZSfny/69+8fMflXbfz48VahgklnTk6O6Ny5s2ufDh06iHnz5rnElR61BFFz5MgRMXbsWNf+3bt3l0JAPfPvvfeetW9onTp1iog0QqHqnj17ut6H8+3YscN1DXrUEqJq9u7dK99r7g/RpSbaGRkZnv1BW7JkSeB7UFJSIv7t3/7NejycTy0EkEi/TdmsH0NvAwcOlKmNXpLaa7+UlBRx8uRJz/10Uaca6nZNnjzZKp4gg2zjCqHWtWtX5/UNGzaI5cuXW5/DnTt3uvoCIYWi5eb7e/ToIbKysqznRF+GDBkixowZI9uiRYviFi/Yb8DQj5zvz9GpE8XFomIZWRQhdzIiv4cQIbVxS67I2bbDadt37RELFy+L+kcAnG/bjt1i/aatMtJJvderuDhWvtOl2Otvd5LvPZZ/0ilMzuLkhBBCCKF4oniieGqj4glpc7t27ZINv4eFHknlRzwdPX5CjP3lr0TalC/imnxUVlWLj3/xSzEubYqrgDjFU/Oybt26qBJFSRtMvPWJrE0YmQ1SSo+EMdPlojUIJUT/mHV+bH2DGEOfZs+eHfO4eqSULnCiyS3VUEzcrO1ka0FrEUEaxTo3ZJCST/H0W+fs2bO+7sGePXsi9isoKPC135o1ayL2QwqwTYp5NSWevNIrdfHk57inT5+OkE5ekjXa82L2JZEIN9S7U/Jm/KTPIwSWviKoKZ68JBbEldrnxKmCqO/HAgxKKvkRT4h80qNS6xuuOtFQw0eNZdQTIYQQQiieKJ4ontpixBOk05YtW+TkERO6iooKmSKDiIkgDfsgLQc1oTChXL9+fUTtqPZKexJPNqmDCTUkh/l6r169HPGRmZnp2g4R0LdvX9frgwY1FZ73Ek969IreENmHZxURTLZjI8IG0SeQCXh2ze19+vSx7peXl+cSOGbr1q2b67UuXbrItFVEGOHYpvTAv9HXgwcP+pewRlSPGo/Bgwd7Cq14+o2abwCpdTZZZbvnuB6V0nvjxg1rdBvugU3+KNkjo3sGDHBt7927txOZZvYniHgyI5xsfZk0aZIjSMx6Uuazi2P4FU/x1vRSizJ85+VXRUXV5YhtiBJU0sePeELNpyCRp7pU8iOeFi1d4do+a36GI6Vu3brN/4smhBBCCMUTxRPFU1ur8bR9+3YZwbB69WqxatUqKUkwOUIB3vnz5/tu2Gfx4sUyRQXHW7p0qZzoUzy1D/Fki9xB2pOSS5CauhDAhBySE1EepoBAyp0CQtSc/B8/ftxTPKn0N0y4R44c6blyHerw6NvS05vq30Cm6CIC59ejXMyIIiXDbAIHAgaSBSBtzyvKxVZcHBFaQe+BeX5ECylJAjmsj7VKK0yk3ytXrnSll6noSds9wHcCwHjrr0PUqGNC/EHu2MbYXI0Q7fDhw84Y4P4nEvGkSzl1T5Eep2/r16+ffK6x3UzDxHWp8bY9u+qcpqRNJOJJiacfvv62lDzmMzFqXJov8bT364OekVNhiSezwDlA2h62fa8VpkoTQgghhOKJ4oniieIpQfEEKYSJIGq+YKI1depUMW7cOPHxxx/LCSNEgp+G92IfRIukpaWJzz//XE6wwq4dRfHUejEjXyA4THGiij6rKBoIAbPI96effuqa8G7cuNEqkEyRgPpROqZc0tPioq1qZ25TES64RjSIEV04qGgVU+BAriEKMEICjBpljXKxiSddRCA6ETIXgthseB2FuSFQ9HuAPqK/d+7ckT9xjilTprikTLz9tsnGM2fOuO4BngXcc+ynakSZ9ZmKi4sj9oO0MuUfxsOsmWQWhcex8RwkIp70iC61XR9XSDlIJzO6DONtFiA3o/nUOTF+iKqDKFPNb/F9L/FkWw0UK9K92aFrTPFUWlbhSKfOPX7muwh9UPFke8/5i5cc8dTaFocghBBCCMUTxRPFE8VTguKJUDyFhZesiYUpEsw6QDaBNH369JjyKKhc0rfZ0uxiNRTBtskjPX0q2vZY+9pSuky5goimoP2GtIq336aQMYWNX0mJtEtTdNjOiTQ9M8LKVnzcFJVBxRMimnSB47XdjL6y1eKK9YyGgRJPEEy2cUTtpGjiCavOKTEE+VNf3+D73EHF06mCQtd2FBmneCKEEEIIxRPFE8UTxROheAoknvyuxLZv376I/Xbv3u16D6J99BQxVR/KPKcpreIVT7Ekj5f4MWWJGQGTbPEUpNi6Lkvi7bcpZPT6W9HAsd9///0IYaWvsqcw0/EOHToUEXmlSyUd1MRKRDyh5pYuTb3Ek59nHqspJls8rcne5IibK3X1rrGOFvGE6xw84lMn2ul04dlA5w4qnnJ3usXyytXZTLUjhBBCCMUTxRPFE8UToXiKjlmzBhFPJkj5wvtUQypemBFP+fn5oYgnlRKo2tChQ2XdMtQwU03VRdNT3UxBo1KywhBP6JMqWm021GpCDSoz4gmvo+aa3m/8W/X7q6++kjIn3n6bkUu2VDMIJUQGqXuOqKV4I56qq6tdAs4mnrze41c8mQLJr3iyiTcs3pBs8XSpuMQRR8tXRq4AiAijaKva6cXE12/aGvjcseo3me95mg7YJPXwe9f3+8ltXXr2tQpIQgghhBCKJ4oniieKJ0LxJEWEHpWE3820q2XLlrkiWLACov4aZIOZomeKIK8aT6aECCKedNngJz0K0gx9R0OdKkyYTVlipmwFEU+QRkGLi5upbzi/OZb4N/qr+o5zxNtv2wpzGDsds4YXpGEiNZ7Wrl1rlZB6XxOt8WTeby/xZFvR78iRI85+2N69e3frOdFPFNeHsERTq/3FA+TNT97t6Qik1dkbpexB9BJWivMST4cOH3O2vdWxm7jx5FlouHotol2/4X4G7z/5XCM9D62uvt45x9cHD0dsU8+eLp7Q5mcsdQq3z0tf4ryetWY9/4NBCCGEEIoniieKJ4onQvHkNfn9RvTv398lBZTAgFjQxRREAgrPYwU0c+WvLVu2OMe9cOGC71XtEhFPiBxqaGiQcuP69esRfUWxbV0oYIU+XSjgvZATYYontQIc5AX64web0EFklhIAkDljx46N2I7xTaTfc+fOdY2jWg0PUmvIkCER27/++mu5zbaqnbpOSDyku5mr7OF1Wx0rtZIhCGNVO7/iySa50GbMmCGPgecCz47tnGYUXzyiUaeouNQROF7NFE8qxS1ag5Ayn4UBQz+KuZ+eemeKJ1uzrchHCCGEEELxRPFE8UTxRCieIkChZ3MSDkkxePBg1+upqamOEDFX/lIr30FGmK/r6UxhiqdYq6eh9e7dW57ffB2pXTZBk6h4Um3WrFm+74GZ8qjOg5UnzdfVCoKJ9BuSSZd0qg0fPtz1Gmo5QeJE2w+CyRSNaEglVH0xV9JT90ZfabA5xJNNIOnNjNjSj232xVzFMB4qq6pFz5+lODIHNZO25O4Un4xNs4qnrdt3xZRH5kp5coXDcWm+xJMqJK6Lp9SJU8Ur//TjiPehz7bIKkIIIYQQiieKJ4qnViqeUEeHrfW09iSegE3YmA3CQY/ukJNZo2i013563aNExBPSAHUxYEsjgxyL1SdICFWXxryOIAJHigCP1fSC1gVat25dzH6riLMw+n3ixImY50Pkz9mzkYWr/eyHhnpUOmaxeT+F32OJJz1lLoh4AoiG8zp3jx49fKWJmmOaCPfv33dSP9F+2mfAU/GUvqRFvhN08XTm7PmnaYaVVeJydY2oulzN/2smhBBCCMUTxRPFE8UTG8VTMFDk20y7Uy0jI0NOjE0wGc3JybEKBUiLefPmyVQxHTPaRKXgeYkns2h0SUmJq0aRGYXk1Se8D5JNL4ZsyqpYRbqRXqXLBmxHAXAz4kfJirDuAVIg9eiaRPsNUKPIK2ILx1aSyyTafikpKVJO2UCKpplWqFL2kKKo3zMVLWU+Dxs2bJCvm/WkYhUXN8dHyZ68vDx5TKT7rV+/XgqyyspKV/qkrS+2MQ0kmx48sEqck6ebiovbVpRrbvHktfIdIYQQQgjFE8UTxRPFExvFU2CQTlVeXi6lAwoomyuXeQEpgmXo0SAm/O4XL5BHuFeop2TKLQWuARIBfcNPs2h32EBkqP4kci7cA4z9rVu35E+v6wuLxsZGec9RLwv3D9fgB/QL+0G+4KffulaInFPPCmRUc4L7MnnyZNGnTx8pvCD6zDpNZi0r2yp8YXD+4iUpdhDdlLV2gzhy7IRYuLhpxToUAH/w4GGLfA9QPBFCCCGE4oniieKJ4omN4okQEod4GjNmTIRYQhQWCrZDnCFFMFnpdF7iyda+/8oborSsosXGCSvcqZXv8o4e54NDCCGEEIoniieKJ4onNoonQogfbMXcvRpWGEwWiNq7cKlYrMneJOYuXCImTJkhxqVNkel1LRXppEDE4toNm8XyrLWi4eo1PjSEEEIIoXiieKJ4ak/iCWkhqENSXV0tU5pqa2sTbkhJQsMxcWycg+KJ4omQtgrqadlW4tPbxo0bOVCEEEIIIRRPFE8UT+1PPEEMFRYWyqK4hw4dEocPH06oHT16VE7CUOQZ/y4oKJDnoHiieCKkLYOII9Rv+uqrr8Ts2bPFrFmzxPLly+X3IIqTE0IIIYQQiieKJ4qndimeqqqqxN69e+XKXfv375fLgqMlIp6wChVEFpaGx7FxDooniidCCCGEEEIIoXiieKJ4amfiCatHbd68WaaBYHlvFMRF8Vus3BVPw75YRQsrTG3atEkeG+egeKJ4IoQQQgghhBCKJ4oniqd2Jp6wvDqkEwQRajyFBeo74bjZ2dnyHBRPFE+EEEIIIYQQQvFE8UTx1M7EU0VFhUyJ27ZtmywMHrZ4Wr9+PcUTxRMhhBBCCCGEUDxRPFE8tWfxlJub64gnFMltbGyU7f79++Kbb76RDb+jSG60hn0pniieCCGEEEIIIYTiieKJ4oniSdZfMlPtUOcJBcHR6uvrxYMHD2TD73jt8uXL1oZt2JfiieKJEEIIIYQQQiieKJ4oniiepBSCHIIkgiwyxVNDQ4MjnvC7l3RSjeKJ4okQQgghhBBCKJ4oniieKJ48xRPS6lTqHITT48ePZcPvZmrdvXv3ZFP/xr5hi6fLl6vF+QuXpPjSX6+pqRWXikpkq66poXgihBBCCCGEEIoniieKJ4qn50k8mS2WiEpUPH0+c5544aVXxOJlK6Rw6v7Bh/LfaHv3HxS3b98WmStXi+/98HXnddX+8V/+Veze9zXFEyGEEEIIIYRQPFE8UTxRPLXmVDuvVLpYqXeJpNpBKg0aPkpKpMEjPhX/+413IsTSgUOHxcSpX7iEk9n2fX2Q4om0WwoLC0VaWpqYMmWKGDdunLh48SIHhRBCCCGEUDxRPFE8UTxRPEE8DRk52iWSxk2YInbu2Sdqr9SJl3/0pnzttbc6iq8P5okrdXWisuqySF+S6by/Z9+B4tatWxRPJCqVlZUiNTVVCpoJEybIlR1bEkQRrlixQvYHbeLEifI5DkpWVpZ45513nHbs2DHebEIIIYQQQvFE8UTxRPHEVDtTPEEylZaVO9sLCs8626bNmOvaP3XCVGc/sx4UxRMxOX/+fISgWbBgQYuLpxEjRjj96dixo7h69Wrg42RnZ1M8EUIIIYQQiieKJ4oniicWF48lng4ePhqxva6u3ol4+s7Lr4oly74SJaVlcj9sR3QIioxXXb4sbj17jeKJeIEUNF3QLFy4sMXF0+jRoyPE07Vr1yieiG/OXbgoRqdOlBGhnbp/ILr07Cs25mxzvpd1Cs+eExlfrhC79u4XV588ZzPnZch9sO+AoR+J4pIyDighhBBCKJ4oniieKJ6Sl2pXVVUlW6zUumSl2r3Zoau4efOma/vI0Z+5UvFQaPyTsb8UO3btFbVXrrC4eCsCETtFRUXi0qVLMrUNktIPV57cR+yj9nv48GHg86r9a2trpdRxTbwLCwOJJ71PNTU11mN68ejRI1FeXi73LS0tlZLWJp6GDRvWbBFPN27ckJ9Z9AmfUXy+g4yz2hf3V33u/b4fn+XmIJ5rxL3Ce9W9CvrsJfKcJCItZ8xd6Fn3rnOPn7k+e1+tXhezXt7FomL+Hy0hhBBCKJ4oniieKJ7apnjq0WeAtU4T3pO1Zr0T+WRrq9aup3hqYfLz80X//v0jBIhq48ePtwoVTJ5zcnJE586dXft06NBBzJs3zzV51qOWIGqOHDkixo4d69q/e/fuUniAuro68d5771n7htapU6eISKMDBw6Inj17ut6H8+3YscN1DXrU0rRp08TevXvle839IbqUlMjIyPDsD9qSJUtCEU84H/psG2M1zugL5IvteH379pX39oMPPnDtizRBm1A6ffq0dbyR2qinFurjrp/TvB82aXj8+PGErlHth+8s231G3ayuXbs6rw0cONAVRRTkOcFzPGbMGKehGHwiMm7pilXO99/rb3cS+w/kifMXL4lfTv7ceT11wpSIfdZu2BzxvTlrfoYoOHNOpE1pWsBh1Li0ZhFnhBBCCCEUTxRPFE9MtfNMtUtWjafOP+0TtUA43ltcUipyd+4Wab+aLqOe9EnUqYJCiqcWYt26dVElipqMI5JJn/TbhJHZIBP06BozXS5ag8BAFN25c+di9g1iDH2aPXt2zOPqkVK6eIomt1RDMXGztpOtzZkzJ2Hx5Pd60D799FPns6yOB2ETa79BgwZFCBmIwFj7qHHSUwv1a7ClHHoVUI/3GkF6erqv5xY/+/Xr5+wbz3OC70rz+cjLy4vr83bjyTP98qtPRfzwUWNdQkxFNiE9uaKyyiqesjduiXiGx3w2Sb6OVD1bmh4hhBBCCMUTxRPFE8VT0oqLxxJSyRRP9fUNImfbDrF5a66UD/o2CIXFy1Y4Eyn8TvHU/NikDibriBAxX+/Vq5cTdZKZmenajggTRNhEkxte4kmPTtEbVq4rKSmRkSm2Y6ekpMgIFKRXbd261bW9T58+1v2UNDAjnvTWrVs312tdunQR9+/fl5FROLYZGYV/o68HDx5MWDzZxgor523YsEGMGjXKKt9sx4t2PZBTFRUVnnJFjbG6Tv0YQcRT2Ndo2w/Xoj+3+r3RxVM8zwnGxnxG463FtXPPfud7D5FO9598H1+/cVM2SCnUwVPb844ed4knSCvso7N1+y657fuvvPHku/YG/6+WEEIIIRRPFE8UTxRP4afaxUqpM1PwVGpeWKl2NvG0e9/XzgTq+IlTrv3LKyqd7fMzvnRer629Ii4Vlch2ubrGtZ++veHJRDTadtv+FE/CkS5m5E5qaqojl/Dc6CJCSQpM/s20KKTcKc6ePesSMiq1yiYMVFoT0plGjhzpuXIdavDo2xDxosCzqIsBnB8pYwqkz9lkmE08QV6g1hBAOpaX/LAVF4dQDYqXlDGjhPSxsNWXskkgFTmGsQOIWjPlkjrfvn37XPupKDc8ExMmTHCNRaLiKd5rnD59esR+w4cPd9I6cX+QqqlvV+Ip3ucE+5nPfLwRT2uyN8Ws1eSkIa/b4BJPvX4+yBXVdKm4xJFSt27d5v/VEkIIIYTiieKJ4oniqWXFU319fbOIp0tFxREFxRH9BBGE1e6wQlO/QcOd7Xv3H2wSP8uznNenfDHHLYa07SjQG227bX+KpyZZo0sITKxNcbJp06aISBcIA7NeD1KgzLoyZu0dJRRM8YT6URETaEMu6elO0Va1M7dNmjRJ9gnXiIaIKL2ej5IYpjyCXENRcV1+6JE3uvywiSe9FhZqUy1dulSsXr3a1fA6PmfRpAw+m0h9KygokGOuCpxDAiEKTK/bFE08bd68OaYEwrWYMmf37t2u50WXL2GIp3iu0byXuGf4jtMxn1ElnuJ9TtCfnTt3SkmKhqgpFCWPBz1lDul0WJXO1rzEky2dToknfM9ejWNlRUIIIYQQiieKJ4oniiffqXb4qz+amWqH9CC8Dw2/NzY2yqaiW5JV42najLkx/6qPfTG5U/voqzfNnJfuOmai2ymeosuaWJhRKnv27HG9xxRIkBqx5FFQuaRvs6VPxWonT560yiNdmkTbHmtfr5Q3U77EWtWuuLhYfjbHjRtnTQeLJZ7M43mJJ1OwQZzpRJNw8YqneK7RFKaQSmbhcTNtUImneJ+TMFECKagk8iuemGpHCCGEEIoniieKJ4qnZqnxpNd0gmhS4skLRAwka1U7rFpnFhNXf+3/YvYCV/0nREap96xcne06pr5dT9GzbY9nxbz2Kp78rsRmpmSZkTEA0kKPjlH1ocxzmtIqXvEUS/J4iR9THiHaBVEvrUE8QSAPGTLE17VEk0CqhlMs8aRfi21lumjXG694iucazXpLthXrcFz9PUo8xfucJEs81dXXUzwRQgghhOKJ4oniieLp+Uy1M1Pr0CCfvIgn4iloq6mplXWXSsvK5e+QUq2loHh7FE9mYXFEPJlgPPA+1ZCKF2bEU35+fijiSaUEqjZ06FC5At3ixYudhn+bqW6mTDElRiLiCX1SBdfNBrGjagt5iaDJkye7JAgKqaP/2FevY5SoBDKjmWyRPhgXWxqa7ZjmfTVTLxO5RjPiSa1+aH6f2VLt4n1OwqS0rMIR48tXrvF8nxnFRfFECCGEEIoniieKJ4qnFhVPqNekpBN+h2iCdIJswu+IQGlp8fS8tPYinjCJ16OS8PsDY7WsZcuWRUzUDx06JOvx6K9BvpgpeuYE36vGkxlNEkQ86RFasVL4AOQE+q7qCWFib8ojffWzoOLJJkD84CWC9MLaqGOkF8FORvSRKRQh4XT5YcqjaOLJlFYzZswI7RptRfH1ZwHbUSTfT40nv88JQE0nfDeioQ6Yn7RUG9iv3+ARjnxakpkl7t6958gmrGo3beZcl2CieCKEEEIIxRPFE8UTxVOLiSdMVmLVdIqVakfx1P7EE56H/v37uyKT1HOCujtmMWlMviEyzVXrtmzZ4hz3woULvle1S0Q8IXIIkX0o6A35qvcVEgNFqxUQsnr0DN6Lz0mY4gktNzdXRuSoov3xiiczncwsXF5aWhr6CnPmMdE+/PBDGQWkRI4qMm8e25RWKSkpchyAuTJgGNdoik21IiP6ij6r95v3FasVxvOcIHXPXA0QUipekGKHFeii1b57q2O3uMQTi4sTQgghhOKJ4oniieIpYfEEQYSVqmpqakL7EsCxKJ7al3gCiEyx1dIZPHiwdWKvojwyMzNd2yElbIWh1ZL0YYsnU1iY8gOtd+/e8vzm65AvNnmUqHhSbdasWQmJJ1tUD4TIqlWrRHp6ukvs6VFG8YonnBOrDEarsYSfSsDox7bJJVNUhXmNZg0nvUEmmX3W72s8z4lZrDyM2k93GhvFpGkzrdIJq9pt3JIbEVW1MWeb3DZg6Eee4gky69at2/y/WkIIIYRQPFE8UTxRPMUvnlAoOCcnR2zbti3u5bxt1NbWyigCiqf2JZ68JuJmQ+SHnkZmqwnktZ8uPhIRT0gDtMkGPQXLTLGyNX0VNPM6gogn4LVKmi2FK4h4AraonqDFyoOuMIfC6qixZDu+OfZ6hFI0ERStr/Feo5LlXueESIp2z4M+J2Z0VphFx2/euiUuXCoWtVfqRHlFpbh9+w7/r5QQQgghFE8UTxRPFE8tJ55QWwTiacOGDbIGCeo5QRSVlJTI1KggDftgX8gsRBKgmC7EE1JcKJ6+bFf/EUAxaDPtTrWMjAxrfTBM4PEs6qlLetTJvHnzpJDQMYuOqxQ8L/FkrrSHZ3bAgAGeKVjR+oT3QbLpdYtMCRGruLi52hu2I73LjM5RNa2CiieMG8ZAHXvNmjXWSB70ec6cORHnxOcX6LWYbKvTmeLJvAcA3wnr1q2TNb1Q5+vw4cOuiCgUGtdrglVWVooPPvjANe6IasI59HuizhnvNerjf+bMGbFy5UoZdYXC4Ej1RL/0lDkUztejh4I+JzbxZBs3QgghhBBC8UTxRPHUJlLtECWACTkmWWgQA5jkY5I2e/Zs2fC7renb586dKyMzlGjBcSC0KJ7an3hSoAYO5KYqpIwIGD8g8qWoqEg2RKL43S9eIAVwr1BHyJRbClwDZAj6hp/xFoP2C+Sc6k+Y54JEwT1BxBlqEKnaSWEDKQhRhXRJRPtA5pj3WBc1ZnSY7VnwW+sq6DWaKwbqRckBopH8RqA193NCCCGEEELxRPFE8UTx1KrFE6QQIhogjVAIesKECeLTTz8Vw4cPl0uDDxkyxFfDe7Gi1McffyzGjRsnlzWHkMKxmWrXfsUTab+YxbwRfQQRjWLyiJA063cFSScMGzNFD8Ls4MGDUnQhOsuMZAorLY4QQgghhFA8UTxRPLV58cRG8URIMvBbt8tWu6u5QWSUWezbq0HK62lzhBBCCCGE4oniieKJ4omN4omQFgApkmlpaVFFTkpKimhoaGjxviKl01ZTSm+ICqV0IoQQQgiheKJ4oniieKLsoXgipBWBOktYsQ/pdLNmzZI15DZv3iyLjrc2UEx87dq1sqA7+rpo0SKxe/dumSJICCGEEEIoniieKJ4oniieKJ4IIYQQQgghhOKJ4oniieKJ4oniiRBCCCGEEEIIxRPFE8UTxRMbxRMhhBBCCCGEUDxRPFE8UTzxK6h1QfFECCGEEEIIIRRPFE8UTxRPhOKJEEIIIYQQQiieKJ4oniieKJ4ongghhBBCCCGE4oniieKJ4oniieKJ4okQQgghhBBCKJ4oniieKJ4IxRMhhBBCCCGEUDxRPFE8UTyFIp4ePXokbt++La5fvy5u3Lghbt68mVC7deuWPB5+4nj4HeegeKJ4IqQtcfPJd9zCxctExpcrorb5GUvFlbp66zEeP34sDh/LF6uzN8rm9T6vfTds3hrzHPfv3xdrN2wWH3w4VLz+difx2lsdRcqwT8SuvfvFN9889jz25q3bRbfe/eX70Xr3GyyOHj/BG08IIYQQiieKJ4oniqdg4gliqKioSJw8eVK2U6dOJdQKCgrEuXPnxJkzZ+S/cWycg+KJ4ok0D4WFhSItLU1MmTJFjBs3Tly8eLHNXeO9e/fk9aFNmDBB7Ny5s9n7cO7CRfHCS6/4anlHj7vEzu59B8Qr//TjqO+LxolTBTH3rauvd51Db517/EyOpc6dxkb5utc+kFzoPyGEEEIIxRPFE8UTxZMvrl69Kg4fPiwnbvgJ+XTixIm4G2QTJr75+fli9+7d8pg4B8UTxVNro7KyUqSmpjryIjc3t0X7g8n8ihUrHKEyceJEGTkYlKysLPHOO+847dixY8/dvYk1FpDZ7733nnONCxYsaPY+QuoM/WiMGDn6M1cbM36SI2q+98PXRX19g7NfdU2tePnVN61S59iJU77O/eDBQxm9FG1fjOGAoR8529HX04VnZdRSh/d6Oa/PmLswYr+pM+Y6237aZ4A4VVAo8o4cixBYiJYihBBCCKF4oniieKJ48jd5qquT0mnbtm2iuLhYpsehIfUunoZ9MUEsLS2Vx8SxcQ6KJ4qn1sb58+cjBE1LyAtTFIwYMcLpT8eOHeOSttnZ2W1CPEUbi7t374quXbs62xcuXNiq+o8UNiWGRo1Li4gQOn/xkiNw3vjJu2Ljllwpp4KIpwWLlsWUVrfv3HFkEQSUnlani6suPfs+2faNfB3pg2ofvK6nSeN4P/rnDnJbr58PcvYhhBBCCKF4oniieKJ4iimeEOmBduXKldC+BGpra8WWLVvE1q1bQz0uxRMJC6Sg6YKmpeUF5MTo0aMjZMu1a9farXiKNhatXTwdOnzMEUL5J09HbKusqpbCCalxuE5IICV0/Iin0rIKJ5JqY842T2l19+4957jrNua4jjPlizkuiXThYpHT7/0H8lz7oFaUOnd1zRV+iRBCCCGE4oniieKJ4ik29fX1MiVu165doUYm1dTUUDxRPMkoFdT5unTpkkxtM+vJeIFnBvuo/R4+fBj4vGp/SFBbTRqkhAYRT3qf8HwHqXODyJHy8nK5L6IBIU5ssmXYsGHNFvGEe1FWVib7FE8ttsuXLzv7ItoxyPtjnSvWWHiJpwcPHsjIzXifm7CkGdLaIGh++PrbUixFQxdEscQTopa6vt9PvnfR0hWiouqyr4ineRlfevZRj3i6VFziKcxAUXGpsx1F0QkhhBBCKJ4oniieKJ4CiacwBREm5pBOFE/tUzyhxlf//v0jBIhq48ePtwoVTIZzcnJE586dXft06NBBzJs3zyWu9KglyIkjR46IsWPHuvbv3r27FB4AglWvD2S2Tp06RUTXHDhwQPTs2dP1Ppxvx44drmvQI3WmTZsm9u7dK99r7g9ZouRVRkaGZ3/QlixZEpp4wuqTqJvk997ox+vbt6+8tx988IFrX6TG2YTS6dOnreON1EY9nU6Nu5+xMMVTZmamjNq0PTd64XGMd3p6uhgzZoxsH3/8sRSBYYJIICVnIIdiEUQ8IcIJ70ONqPsPHkSIIFuNp+GjxjoRSihGrl7fvmuPtY+6eEJtJ5esPXsucD0qQgghhBCKJ4oniiem2ont27fLSRsiQyieKJ4SZd26dVHFgZI2iEjRJ8k2YWQ2SCk9usZMl4vWIDYgXbDqYqy+Qb6gT7Nnz455XD1SShdP0eSWaiigbdYzsrU5c+aEIp4w5jaxZ46T/l2gjgeJE+t6Bg2KrP0DERhrHzVOatz9jIUpnmI1yC91f0aNGhX32Pph6YpVUsx85+VXZURSWOIJBcpVWh1WxDNFkW1f1GzSC4zjPOoYaOMnfR5xv4pLypxtq7M3uo43c246xRMhhBBCKJ4oniieKJ6CiSdIIcghpMVBFlE8UTwlgk3qQCgMHDjQ9XqvXr2c4sWIWDG3Qywgwiaa3PAST15SAoK1pKRERjDZjp2SkiIjYZCihWfX3N6nTx/rfnl5eS7xZLZu3bq5XuvSpYu4f/++jIzCsc3IKPwbfT148GDC4glpaIj8MiOChg8f7upXv379nHtjHi/a9eB4FRUVz4TKXat8wxir69SPocSTn7HwEk84vy26bNKkSfLe2O5PmPWh9KLdvfsN9lWA24940lPj9OPGEk/Yb+7CJdYV9NA2b93u2f/vv/KGrEelQMSUvu+89CWCEEIIIYTiieKJ4oniKRTxhMnLw0ePxf0HkQ2veZW5oXhqf+LJFrmTmprqCAzU+NFFhJIUkA1mFA5S7hRnz551yYTjx497iieV/oa0vJEjR3quXIc6QPo2pGApkDKmiw2cX0XNAKTP2WSYTWxAumG1R4C0PVt0lU1aYRsitILiJZ7M13FvIL3AnTt3xJAhQyK2nzx50rofIqIwdgARVKZcUufbt2+faz8V5YZnYsKECa6xUCmOscbCJp4QuaTuAdLxbCIN20wJOmvWrNA+A8fyTzpiJnfnHl/7+BFP+w4caoqiqqxyXtdT7cyaTDK6a1yasx1pd6jLhMLnHd7r5by+JHNlxH4qnU+10akTxaDho1zSSkVdEUIIIYRQPFE8UTxRPPkST2he4unBo8di/rZrYvDC2og2Z8s10Xj/G6t8ikc8LVy8zKlfcutWZK0YfbUls1AumDkvw/krvbkvxVPzAFmjSwjIJFOcbNq0KSLSBZLCLPL96aefugp3b9y40SqQTPGEGkU6plzSo1uirWpnblMRM7hGNERE6XWflDQxhQnkGoqKR8gALdUrlmzR6y0hLXbp0qVi9erVrobXUSjcSzyZUhDHRuQXxJO6HlOmqfEwj7d58+aYogvnmz59esTrqCVnPi+6cAwyFqZ4QuQYIrr07fqzCNmkooQOHz4s5aRqEJthiVdVUynI91As8YR7pLYP+2SsaGy8K67fuPlk/O5IkaS+F7ft2C0LiquC6no01Iy5kVFdKFLeN2WYU//p+vUbEdexfOUaa4QUJBS+n72KjxNCCCGEUDxRPFE8UTz5Fk9P5iVSON198Fj+HJpRK370abn4YGa1+Nmsavn7wAU14s69b6R8ktFPCYqnDdpf2s1JzcrV2c62tzp2c6Jo1CTqzQ5dnYkZ/k3x1Px4yZpYZGVlRey3Z487UsQUSJAaseRRULmkb7Ol2cVqiBCyCRO9UHm07bH29Up5ixXZhNcR/WWm2fmt1xSrWLmXeDIFm7lqZlAJp4+FKZ4Q0aSntcXangz0GkyoneSXWOJJX53OT0PUFViTvckRS3X19a7jxioUjiLpiH6ChMreuEWUllWIq0/ugbpGrmpHCCGEEIoniieKJ4qnhMTTvQePxbmq++JEyT1x4843YvjiK6L3zGpx4clrJbX3RZ9Z1WLgglpx9dYjkXe+URTXPJDyKRHxpK8GpUc16fVN0F40JlJVl6sDp7dQPCVfPPldic1MyTIjYwCkhR4do+pDmec0pVW84imW5PESP6YwQVSUikBpSfFkRqP5aWqM9eOhT6qGUyzxpF+LuVJgomNhiiXUhdIlZ0uIJ12Onzl3ITTxhO0qyiiIeFq7YbMTfYUi4yYQSUELhatjQj7h+5oQQgghhOKJ4oniieIpbvF0+epDMWZ5nfjfo8pE/3k14p0JleL9GZfFxcv3RdmVBzLy6V8+q5DRT698UiYmr20QdTceJSSeMHH8aZ8Brqgm21/89x/Ic/bbun2XI6QQdUDx1DKYhcUR8WSCWkJ4n2pIxQsz4ik/Pz8U8aRSAlUbOnSoXIFu8eLFTsO/zVQ3U5joKV6Jyhb0SRVcNxvEjqpB5RXxZNZEQk0ryEF1PfhdT9/bsGGD7JMpnkyB5CfiSa8ZpcC42NIV4xFPpuRsbvEEuaiiLvFTl42xQEFvJZ5OFZyxvufGk88J0uv0FivVbtOW7c62rw8ddh1zxap1gUQZRJMSYFgpr7VFlhJCCCGE4oniieKJ4uk5E095F+6KHtMvyxQ7tLfGV0jZVFB2T0Y99Z1dLd76rEIMW1QrUubXyGiokyX3EhJPQP1F/UXtL+qqVslrb3UUfQYMlb9P+WKOM0FVBXRb62SovYgniAE9Kgm/63V3wLJlyyJkxKFDh0RBQUHEaxAOZoqeKYK8ajyZaWBBxJMuL2Kl8AFIM/QdDXWqVPFqXZiYwiOIeIJMCqu4uC2tzXZs1DtS16QKgccjnoApFCHh9BRZs25XkLEwxZJ5f6KJJxwHklA1vDdR9LQ1pKbFor7hqjh6/IQ4ebpQHMw76gidxcu+ksfCCnIoHB6LaMXFsSKd2oYIJZwP44p7sH3XHmcbzo26UQrUlBo+apzIO3JMyq37Tz7DEFx61FXe0eP8P11CCCGEUDxRPFE8UTzFL54ePZmfzdt6Tfz088si98Rtcb7qvthw+JZ8raj6acTTgtxr8jVIqE1Hb4nu0y6LxTuvC+V94hVP+mRJpc0pGZU6caqMdNIjovAXfhUtYC4NTvHUvGBi379/f1dkkprwFxcXu4pJ49mor693rVqHVRYVFy5c8L2qXSLiCZFDDQ0Nsoj19evXI/qKIuFHjhxx9sUKfXrNJLwXAiNM8YSWm5sr0+TQn0TEE8jMzHQJvsbGRufciHLSt+M4iYin0tJSV/rehx9+KKOrsKKeXmQ+6FjEK55sx8W4JAKOOeazSYFS0L5avS5myhy+42JFaekFxG3pcjPnpkccE6vimefJ2bYjYp9YNaUgxwghhBBCKJ4oniieKJ4SEk+37n4j/i2jVrw3pUrsPHVb1N96JO7ceyzrPqHQOGo54XcUFq+/+UhsPX5LdPlVlRix5IpovP84IfGEiKWu7/eTExxEMukrRa3ftFUWt1URUVfq6p3V7l5sxTVH2ot4AkinMmUDhMLgwYNdr0M+qMgmU4ooKQEZ5FX0OmzxZK6gZkbsoPXu3Vue33xdSZqwxZNqs2bNSlg8edV5wmp3umTTRVoi4gnXg1UGvWpIKZmo+hRkLBIRT2YKoC2aLQhIY3z97U6BFjfQ0+C8mp9j6XWaTheetUoxiCVVEFxv6LOqB6WDVD0VWao3HGPnnv38P1xCCCGEUDxRPFE8UTwlLp5Q3yl1Zb34SVqlXL2uw4RKMSW7QZyvuidXrkNDyt3ENU/fgzpQ+Dk+q15UX3uYkHgCqvbID19/WzRcveZM6vDXfX0FO6SCqGioXj8flPTiwRRP/rAJG7NBbOipUzYh4LWfLj4SEU9IAzTrHukCBH1SkTnRGqSGSiEzryOIeAJeq+kFkSPRVqEz0xq92uHDh63HCyKelMQYM2aM9Rzm2Cvh52csIJZ0iZZIxFOi4ul5ANdeUVklF2Ior6gUNbVXYq44iYLk1TW1ch+k9AWpW0UIIYQQQvFE8UTxRPEUVTwhmqmy/qHYXXBHFhhH8fAJq+tFRf0Dcf3OI7kd6XafLLsi/tfHZWLahqti/5lGuc/9h4lFPAH1V3xEMUFC4Sfqi2B1J4D6Ttg++fNZsq4Tfl+1bkOr/UJsb+IJoMi3mXanWkZGhqwjYyKjM3JyXNE3KtVt3rx5MrpExyw6rlLwvMSTWYS6pKREDBgwIGqtIa8+4X2QbHrdIlNWxSoubq72hu1IRTNTC1VNq6DiCeOGMdDBZ9MrmmjkyJEytVFHr8VkW53OFE/mPQBYCW/dunWyphfqfEFsmRFRKDSu1wSLNhZmsfRYxcXVfbCJJ7+rLxJCCCGEEIoniieKJ4qnEIuL333wWBwvuiv6zq4RP5/ztHA4IqFQx2nHydviyvWH4sC5RtF1apUYueSKuFR9X6bg6ZPbeMWTHtWkp52ov9DvO3DIVbekouqy6zgoiou/1l+urhG1V+o8t6Ndv34j8P4UT7G5ceOGKC8vl88ACjn7jZpA5EtRUZFseJaSHW0BeYQV95COZsot/bOCgtvoG37GihhJFMg51Z9knAv1nXBvUDMJP2/duhXq8SEFIaqQLomIo5UrV7rusS70oq08l+yxIIQQQgghFE8UTxRPFE/NLJ5qrj18Gu00quxpnaebj6RoemdCpeg9o1qcLrsn0+qW7LwuXh1dLtJzr8maT2GIJ5C+JDNCLqG+kwK1nF7UapZ06dk3IupEcf7ipaiFevXtOEa07X4K/VI8EdKEWVwc0VcbNmyQxeRRaN6s39UeUt4IIYQQQgjFE8UTxRPFkyaefpXdIP5xTLlImV8jV7BDat3/94sK8f9+Uiamrm8Qaw/dFN2mVol/+axCLN19PVTxpIqGq1ZSWuZsQ0TU251+6mxbkrnSegx9xSebWEp0O8UTId74rdtlq91FCCGEEEIIxRPFE8VTGxdPqNVU1fBQrDt0S/T6olp0mlwlOj9pi3ZcFxPXNIiOk6rEu7+qEgPm14hdp++IuhuPQku1Aw8ePHTS7VBkXNV3Usycl+Gk2elSSqeyqtqJjLKtEKVvtxUnx3YlnkanTvS1WhXFEyFNIEUyLS0tqnRKSUkRDQ0NHCxCCCGEEELxRPFE8dSexBOAZ0EU09dnG8WwRVfE2BV1orzugThTfk+MWHxFjF5eJ06V3pPFxk0lk6h4aktQPJH2zuXLl+V3AdLpZs2aJQvFb968WRYdJ4QQQgghhOKJ4oniqZ2KJx1EP2Elu6dC6rEoqb0v0/G8oHiieCKEEEIIIYQQiieKJ4oniicph7Zs2RJVPAWF4oniiRBCCCGEEEIoniieKJ7auXiqq6sTubm5soUpiGpraymeKJ4IIYQQQgghhOKJ4oniqT2LJyxtvmvXLtnwe1joKXwUTxRPhBBCCCGEEELxRPFE8dROI54gnZBqd/bsWVkEGAV/S0tLRUlJSaCGfcrLy0VVVZUoKCgQ69evl+IJ0U8UTxRPhBBCCCGEEELxRPFE8dQOazxt375drFixQqxevVqsWrVKShKsPrVgwQIxf/583w37LF68WCxfvlweb+nSpTKFj+KJ4okQQgghhBBCKJ4oniie2qF4ghSCHMrIyBBz5swRU6dOFePGjRMff/yxGDlypBgxYoSvhvdinzFjxoi0tDTx+eefSxEVdu0oiidCCCGEEEIIIRRPFE8UT8+JeCIUT4SQ9sHNW7dEUXGpqL1S1yr7d//+fXHm7Hlx/uIlp+HfDx8+fG7HvK6+XhSXlIlbt27zAWwHPH78WFRUXRblFZWyVVRWiW++ecyBIYQQiieKJ4oniidC8UQIaTsUnj0n5qUvEctXrhGPHj1yXv9q9TrxwkuviLc6dnsyGf6m1fX73IWLsn96+87Lr4qr1649txKi188Hyev4Ys4CPphtHDy/r/zTj5P2/NbXN4gFi5aJzj1+Jv61a2/x+tudxJjxk6ScJYQQiieKJ4oniieKJ4oniidCWgH37t0TP/rnDnJCeKqgsNX1b2PONtm33v0Gxy2GEF3xdqefyuN06dk34jhrN2yWr0OGBD0+JMqocWly/yWZK5Ny/dU1tWLIyDFi7C9/5VzD9374urh+/cZzK56Gjxorr2NeBv8b8Dx8Bi8Vl8i+ff+VN2SEoF9u37njXBcafu/U/QMph8KIdjt6/IRLyuptyhdz5PNGCCEUTxRPFE8UTxRPFE+kFVFZWSlSU1PFlClTxIQJE2Q9spaepKIoP/qDNnHixCcTllstdpy2yN2795yIhGMnTrW6/ikxZAqjIBzLP+lMRg8fyw/t+Hiuhn40ptkkSll5JcUTP4MtJp7w3AWJVEJaqPrcHcg7EmqfIMD0SKpZ8zPExaJisW3HbvHyq286r3996DAfMEIIxRPFE8UTxRPFE8UTaU2cP39evPPOO07DKo4tPUlFoX7Vn44dO4qrV6+22HHaIg8ePNSiLc60uv5t2rJdi3h6HNe97zd4hJNOp6fZhSG2lERZtHRFswoAiid+BpsLJTwR8XSnsTGu/VCrLNT/VmlSC+mzOqVlFc62uQuX8AEjhFA8UTxRPFE8UTxRPJHWxMWLFyPEE1ZhbOlJ6ujRoyOE0bU4aoOEdZy2AqTF4mVfyQkbJv9qkobonVXrNsjX0TZv3W5NVUFx6Kkz5oo3fvKuTJ1BbZXZCxa5JqWYbC7JzJLnyjtyzHpf1m/aKpZ9tVqeV4mfPfsPisyVq0XWmvWi589SHNmC96m+QfRcqasPNEHdve+Aa7sSTx8O+UhGc+A6cE2vvdVRDBj6kSyCrQNxlbW2aYxUdAXSh9Bf9TqammzjOtU+Odt2iG69+8v3f7k8SzRcvSbGfDZJng91ajBZD0s8oQC5Oq/XPQgLjAsk4QcfDpXXhjFMGfaJfIYQ0WMTT7jHKDQ9OnWiM+ZpU74QN27etB4fUmZ+xlJ5DrxfP8f9Bw+iPgMZX66Q0TA4//Zde+Qx8NziHmOb+ezi3ytXZzv3Cs/h8FHj5Hji+fcCNY1wPbgW9A9CE+miptRM9DMYBDwHeM5xPrPvOPaO3fvk5+nMuQsRY4bX0IfUiVOd/s2cmy6WZ611nikzNRC11NR+kz+f5ez3q+mznf30z0aiEhatpDTyM6qn1lJuEkIoniieKJ4onppVPN25c0ewtZ7WnsUTIm2KiorEpUuXZGob6nv44cqVK3IftV/QVa1wXrV/bW2tdTJTWFgYSDzpfaqpqQk0QcJEsry8XO5bWlr6ZHJ61yomhg0bFkrEUxjH8XNNFRUV8ppwj23XFPY4xgMK70arjaIaUlnMCTOkkNf7IUQQbaCPu4o2QjMlzs49+51tM+YudPaBEPDTv1giRZccP3z9bRlZ4iWeojWk8ChQtwbX6ad/kEpqHz39J1rz6mc84sk8L6RBMsCKZWYBab3pRcT1exJtDHRZZQpEW8N1eo2JKiAPgTRo+Cj7s3T0eIRYjXaPbUXRcV14hr32gVTUv+sT+QwGRX8O9OtU/YZ8M58PSF4//YNc0vGzH4qLq89GvOjPw/ETpyO26amLWFCAEEIoniieKJ4oniieKJ7aDfn5+aJ///4RYke18ePHW0UIJgU5OTmic+fOrn06dOgg5s2b5xJXetQSBMuRI0fE2LFjXft3795dyhE50aqrE++99561b2idOnWKiBA6cOCA6Nmzp+t9ON+OHTtc16BHG02bNk3s3btXvtfcH6JLSZeMjAzP/qAtWeJvQhHrOKhlpf97+vTprmNkZ2e7zq2/1rdvX1kPy3afvvjiC8+/7gcZR9znMWPGOC0tLU3cvh1fgV5Ec2zdvkts37VXRhw1RSXMkmIJr6MdOXYiQoIhmkGfPK5dv1nKEH2yaYoTvcCwLhSqa644k3uzsPfpwrMyKgV9QZSJki2IzFB9Q/+vXbse9Tr1lJt1G3Os7zHFE2rFFJw5JyNv1GsoIK7GAT/3H8iTfUAElbo2RMTg36p/6Lu6Jlyzeh8m+fknT0cUXUZhcpVSiHE1BV284kk/b7KiP1BrR5dbGCvcPzwruK5Y4gnXsmHzVnHiVIET3YaGSB+baMB7MFa4RzgHVjCz3ado9xhjvHDxMnmflCzShQyeAUfWzcsQZ89flKJodfZGKTRs4mnpilXOPhBceEbQ519O/tx5PXXClIQ+g3i/HxmkGu6D+RyYNaS8Uh8rq6rFltyd8pnGqnHqmBgD9TlEf0rKyl2fObUfxlhPh9M/v9Ei1PzKNHVNiCxT0Y84Lu6Pl5QihBCKJ4oniieKJ4oniqc2y7p166LKDyUbEMmkTwhswshskB3Xr1+3iqdYDULp5s2b4ty5czH7BjGGPs2ePTvmcfVIKV08RZNbqqEIuFmTydbmzJkTc9z9HGfy5Mmu8WzU0m5kRMCAARHvOXv2rCOeIAD1cbKdo1+/fhERavGMI6KnzPHLy8tL+Nn0W19Gj16CaKhviBSlupTK3bknYhvSj9S28ZM+l6kwP3m3pyMesCS6F/HWeEJ/1aQf/W1svBtTPGVv3BKxP1LgotV/0ift0Wo86RN/NcbqvKruFK6t6/v9ohaYjifiSY9ESoZ40oWLPn4KPCeQSrYxgwDCs6HLVUgbW3QWBJdXGqISI6glZBsX/R4jPdR8drGPWmVNjwDCs2q759dvRKYCIjVQyTdcm/msqIgrXC9SC+P9DKrj+G1KpsUjnnTCqPEUZD+/4POgP99mpCSEHiGEUDxRPFE8UTxRPFE8tYsvf5vUgaAYOHCg6/VevXo5xY8zMzNd27t27Sqja8zXBw1qihjxEk/Y1/Y6InVKSkpk5I3t2CkpKTLCBuJk69atru19+vSx7qekiBnxpLdu3bq5XuvSpYuMEEJHTfscAABdnElEQVRkFI5tyhz8G309ePCgL/kQ6ziIOjLF0rFjTSlcSH2z3SMzCkq1Dz/80Br5pEdoxTOOEE/mPdT7GS/RJqU6VZernQndpGkz5fOACTgaJt74+WaHrp4pXYiOsk2OzVXmvKRB0OLfiKjyKj5sOz7EgRmFoSJMvISG30LZtjFW51XRXvqxwhJP+ByhlhGihJDqhWiVMNFr6fi9P/p1mhFKuux7Khrtx8N9QqoWnrnbt+/IqKBoq67p4gnRZrH6p1YqxL3xI0z0lFFEOqF/+mcDNYhsKX1BP4O455B4qKt08rR3Q6QTfqrowkTFU7xF7f3sh7FCNBmiw2I1yO2b2mqkuDdKYNsazk8IIRRPFE8UTxRPFE8UT23+i98WcZOamurIpcuXL0dEsSB6BjWCEF1kyguk3CkQcWOKlOPHj3uKJ5W2hYiCkSNHeq5chxpD+rb09CaBgLQuXXzg/KdPN03ikD5nk2E28QTpduPG04kIxI8tusomrbDtpqXwsJ/7EO04pgiCrFJs2rQpYtuqVavk66Z4wjFxX9T5IJrMSCrIo3jHEfuZz0QYEU9+J70XLhb5jrQY9slYV3QSxuTjX/wy4n2IVIlFvOJJpUvFmiybAsg2cYaUUhExiYqnC5eKrdeVDPGUbPSIKr/RVLGixNS4IOrIvB8QKj8fNNzzuYMg1MWETS6ataNsoHC+flxEziGKD/LD9gyuyd7k+7OBwuHxfgaT8RlvafEUq3aXVxSXnmqn+g4pB1msp34y1Y4QQvFE8UTxRPHUasUTJqSoeVNdXS2jHVCIOdGG4sFoOCaOjXNQPLV98QRZoIsliANTnCixoaJ/EMViFvn+9NNPXbVLNm7caBVIpnhC/aiIyYAhl/R0rmir2pnbJk2aJPuEa0RDBIxer0itHGdKH8g1FBXXJz6jRo2yrjhnE0Z6LSx8lpYuXSpWr17tani9rKzM13FM0ackkSkOsR++E2ziac2aNa4JnVnT6+TJk3GPI2Tlzp07pUREgyzDd0pziSd9FSk0rNpla03pRu60OLOgspmyFJZ4Qu0nNfmMVVA72vH1ibMtkiaoeNLFiDr28yye9GcnVuSa3zHzuh+2iDn9mYs2LtHkog1E0vQZMNSzgD5kie34Kp0u2meD4in690qsZkYMon198LDr86+EaFBhTQghFE8UTxRPFE/NJp4wmcXEH9EEhw4dEocPH06oHT16VBaWRkQK/l1QUCDPQfHU9sWTl2SIRVZWVsR+e/bscf8PuyGQVFHsaPIoqFzSt9nSw2I1iBab9NELlUfbHmtfr3Q3MxXNTx8g6PR9T506JaOy9MgySCh1//RzQ6YhXTHWfUR/4h3H5pAHfsVTPJNjvYaRXu8p1uchHvGk6g5hwouUuzDEUxipdvpx2op4UhP8aOmMiYonRGqqZxQ1oCAwdbFZVFzqSzwFeYbQT9SfQjTTkJFjXCvo6ZFT6vhegjKsz6BK6fMSW3qDAENRdD/iSdVuawnxFA96OqTXPdW/A+K5J4QQQvFE8UTxRPGUdPFUVVUl012Q2rR//365KhhaIuLpxIkTUmRh0olj4xwUT+1PPPldiW3fvn0R++3evdv1HshLPUpH1R4yz2lKq3jFUyzJ4yV+TOmDaB6z0HZLiyeAz6gZQfb11197jqV+blWk3cTsH/oT7zg2h3iKVv9GF0+2OjWxQOSRLYIhZ9sOX2LIb7SKnv5lKw6dLPHkp7h4WOLpaRHqQl8TdEQiYZU0NL3IdxjoQsjPWMcrnvTrPnPugmsfVYA+TPFkgiio6bMXWGtF6eKprr4+aZ/BeIuL6/fJfG50efg8iievWmD6M0HxRAiheKJ4oniieGqV4glpQJs3b5apTJiIY8UwTFKRjhNPw76InMDS9UirwrFxDoqnti+ezMLiiHhyTWiejAfepxoERpgRT4i2C0M8mbWOhg4dKlegW7x4sdPwbzPVzZQ+qO+kTxQSEU/okyq4bjbIIFU7yY94wuSse/fuEe/p0aOHZ5qkGfFUXFzsSzzFO47JQhc1WALdj2T4cMhHnhN42+sH8o40LU8/Nz0iygKRGeaS7DZpgMLlqjZaNDbmbPN13LDEk5oA/2r6rKSLJ/1e+ZF/eL9e7wYr6IWZdiSLgY+f5IxRRdVl6/tQ5DwR8aTXAVI1spqet8dOUftkiidQXFJmLYpfWlbhq5C91/Pr9zOI1R/xWUIx9VjtYN5Rpy6ZfnyzwLw+tn7EU6wIwuYST6oIvU32mStw2uqzEUIIxRPFE8UTxVOLiydM8iCdIIhUPZcwQH0nHBeTUZyD4qntiyfIDbN20ANj5axly5ZFiAikdyIdU38N0sRMSTIFhleNJzNaJoh40iO0YqXwAYgZ9B0N6aqYaJnSp1+/fnGLJ6/IIj8TFT/HWbRokWfUkV5w3CaV8G/znMOGDXPdi3jHEaCmE7470CCv/aRtxkJfwl6lMWGiivpL2KazYtW6iALi+oTvSl29nNSaEQaYqOI1JT5UtJteh+mHr7/tWfRZrSyHNj9jqZzAYqUwNPP6sSy9uhb0z8/4JCqe1AQYomv7rr1ylTW12lrY4gljpyQL6kVh5bLaK3VyxUHb+OmRNEGixoKgiwtcH/qkxh3PQeqEKeKLOQsSEk94VtQzhGu48eyzi+OnDPvEd40nP+JJflekTpR9g0hT14LaXB+N+cwqYHTRgbYkM8u5H/jsYlW7aTPnep4/yGcwHvDcqNUH0XekEAKIWSWkooknXazhc1VdU+v0T49ebS7xBPSVBDt1/0B+BuQfchobxdyFS5xtT4vUPxaEEELxRPFE8UTxlEzx9A9KPCHdja31tPYinjDJMAtMIzJJTT4QJaOLKUgXyIX6JxN6c9W6LVu2OMe9cOGC71XtEhFPiBxqaGiQkXuI/NP7iigfpKAqsEKfHjGkF+gOSzyh5ebmyiLc6E+84snrOKWlpZ7iSV95ziaezFXt1q5d61rVDkIJ0Y/xjCMmoHqhejRIqTBYnrXWmqpjTpQxyeybMixqeo8unvQJL8SMGRFz9PgJZz9M9m0TREz49agdW6Fhxa69+6OmZCUinrzSdbDEe6xxUBEnscSTip7yU+fHK63KFBq6eEpWoeUlmSujPhN6gXf9Ov2KJ13wqdbhvV5RxzwR8QRZYRYxj7VqIySs13PqJ+LM72cwXvRi3F7NSzyZYi1in/QlvsRT2Olu+neLavqz7kQ9lpYJQghpx+LpHyieKJ4oniieKJ7agXgCKAxtSgxIisGDB7teT01Ndf7CnpmZ6dqOle8gg8zXBw1qimQIUzyZq8CZKYBovXv3luc3X1cRQGGLJ9VmzZqVkHiyHce2Ep2tLpVNPMVqc+bMcfaNZxwhn0zxFFbtJ1z3+k1bReceP4uYuNlS6vBerMzlJVtmzc9wUqv0aCVEA9lYuHhZTFmECAuIKVMAnC48q0nex85E1Kvuiw2Vmvc0MsIunmKl66B2EoScisox91ERLYhSMsWTOq8uV6LV+QFIt1KRT7aaQwpEgejvgSBKFkjv0qNndGkDwag/P6PGpXmmpXndDzxTaVO+cB0fEgjSDWOvrxqoo+r9REsR1fuHfun3Um94Xu8bUasKRNtMmjbTuh/GYeOWXM8ovCCfwXg/44g8M8XM9l17ZFRarDRBjP+cBYvFGz95N+IY0fbx+/mJF9Un23hj3C5X1whCCKF4oniieKJ4albxFG99JrbktPYknrxEg9nMGkJygjZqlK/99HpFiYgnpAGiZpJNPOEc6BPkWKw+QS6p9DDzOoKIJykvPFaBs6WoRcPvcWzvQ80lkyDiCeJKT5mJZxwhnsx7k8yi4zEnfU+eFUQTQG5UVFaJhqvXQkn9ixc9eioZS9I/j2zbsdsqwpIJJGFZeaWc9Nc3XA39mUDkTHlFpfPMJROk9OF6cC24pmhpZTqQX6hFhTRI9FVPu2xpkCKoPrNITW0LQECh/hbGGz9bw4qPhBBC8UTxRPFE8cRG8dQioMi3LZoGLSMjI6IAry4osLqinpqlp2jNmzfPVQPELDquUvC8xJO50l5JSYkYMGCAVTzF6hPeB8mmF9E1JUus4uKov6SLJ2xHwW0ztVDVtPKL3+Ogrps5zhUVFVHFE/p88OBBJxoN+6htkydPlnXNgtxb2zjaxJN5b9srerQQUpP8FCFvT2OChig1QgghhFA8UTxRPFE8UTxRPLUDUOMHhaFVoWi/f0XHuGFlRDTIEb/7xQsm7xAmqIPkVeAW11BZWSn7hp/JjniBnFP9SeRctuM0NjbK37EAgFcao5d4gihS0WoYE9SNwk+cww/NPY6k7aMXIke0U2PjXQ4KIYQQQvFE8UTxRPFE8UTxREhLEK2oOIqQ2zDF07Vr1ziQpFUBYQrJmmxJTQghhBCKJ4oniieKJ4oniidCouBVVL1Lly6y7hXFEyGEEEIIoXiieKJ4oniieKJ4IiQuzp0755JO3bt3l5FQXugF41HTCc81IYQQQgghFE8UTxRPFE9sFE+ERICoJtTbOn/+vJRQqKEVi7q6OvleNOzHdCZCCCGEEELxRPFE8dR+xdMAyh6KJ0IIIYQQQghp4+JpAMUTxRPFU/OIp5coniieCCGEEEIIIaSdi6eXKJ4oniiewhFP3332AaJ4ongihBBCCCGEEIont3j6u2dzZ4oniieKpxji6X8++2BQPFE8EUIIIYQQQgiJXzz9zbM5NsUTxRPFE8UTxRMhhBBCCCGEEIoniieKp7DE07cN+UTxRPFECCGEEEIIISR54kmXTt+meKJ4oniieKJ4IoQQQgghhBBC8UTxRPFE8cRG8URaC3X19aLqcrW4e/ceB4MQQgghhFA8UTxRPLVh8aTkUzLF0+sUTxRPpPVRVFwq5mcsFRlfrvBs2F5eURnqeSGbXn71TfHCS6+IvKPHW5UM++Xkz0Wvnw8Sg0d8Knr3GyyOnThlfe/jx4/FhUvFYuHiZeKDD4eKTt0/EK+/3UmkDPtE7D+QJ7755nGofcP5Vq3bYL1H23bsltufJ27cvCn7/cnYNNGlZ185fv/atbeYvWCRuFJXH9p9Msfw8LF8sTp7o2xe59mz/6BI/3J51M8F2uat20Mb93iu6f79+7KfnXv8TIwc/Zkcx40520J/9hT19Q1iw+atcuy279ob89qxffuuPaLr+/3Ea291lP0cPmqcWLcxRzQ23g3lM5G1doPn/ZmX8WXMMQx6TfGSf/K0GPbJWDkOeNZxn/HdUV1T67znQN4R59k8fuK06xiVVdXyO2D9pq2yffPNN6KkrDzmd7g5Jg1Xr/E/foQQ0jzi6fUki6f/qs3nKZ4onlqteDKjnp4T8VQscjKniTmZ2aK8zvt95WcPiZy1i8TSxTNFeuZ8kZWzXRSWVlA4UTxZqaysFKmpqWLKlCliwoQJIjc3t11c91er10n5E6uFLYdu37kjXvmnH8tj+xEGzcH5i5c8r3/5yjWuCe+YzyZFHTNMsm/fvhPqmClZZ7a3OnaTk9DnhdKyipjP3JbcnQnfJ/1+7d53wHnmoj3XeC+kgJ/PRVjjHs813bx1S4pO2z4fDvko1OehuuaKmDBlRqBrv9PYKPoMGOp5XcfyTyb1M6HaF3MWhHZN8cox8zxmO114Vr6v3+AREX159OhRxLHSpnzhbP/eD18XV69dE8u+Wu3rWU3m9zkhhJAWF0//RZvfUzxRPLUa8eSVbhemeHrx2Yfr+2GLp7zF3Zz/eZqeZxFJdadE+ogfe/4P17tTs0QNpRPFkznxO39evPPOO05bsGBBwsc8cOCASEtLkzJr3Lhx4uLFi63uutdu2Ox8NgYM/UhGTZitb8owce5CuH1/+PChPDbkzNnzLT8u16/fiJjAfrk8S+zYvS9CVHx96HDEZBLjhde/8/KrIu1X02X0CyIV9OMgwiGsiSzGDBNYRIyoe4PJJ84DUfI8iacLF4ucMUKUEybPiDYxZZ75bAS9T08FQ62nnPCSnitWrYsYZ9XGjJ8kfvTPHZz9ET3S3M+eev5+2meAsz114lQZLYMoKfXajLkLQ5EmM+dlWMcO0VVezxwirhDlpN4LQbZpy3Z5jxHVFZb8QOSkuh8YD/N+IXIM5wzjmuIdv1Hj0iJk0dbtu8TR4yfE4mVfOZ9fPId47/BRY5334nsF0Uy6ZNOfPeyLZ+fEqQIxaPioiOvWnwPzex1jgsgpQgghzSqevv9sbvxiksXTf9bm+xRPFE9tXjx9L1niqebU/Ij/SZzjEk8VImtg5P9IvtKlm+jz/msRr3WYv4fiieIpAkghXTwtXJj4pC07OzvimMeOHWu14gmTGEQotFfWZG9yvh+QwqIoLimzTkoxSVywaJlYu36zePDgYcSxMI5vdugaEZWQDPSJatgT5mQDGTRk5JiIibViS+6uJrGTviSh+ySlshZN9MZP3hUbt+RGTPiDgvRAmxhormfPFHejUyc66WF4FtW1KTGR6DOmBKsSbZCssZ65Q4ePOftAvJjvQ7QWRGqY4ulUwZmkXlM8QApFREDeueOSyRifUwWFLvGEtiRzpfNeRIjp26Ld37LySn6vE0JI6xVP36N4oniieAounl7Q5JOXeHo5FPFUd0p8ZPx10hRPNfm6mEoRO4pqm1LvTmWJd51tvUReDcUTxRPFky6eggoS1MFBzZAzZ8/LWjNLV6xyavUgWgQRDnqtGUyssjdukTVKVEMa0eXqmhYdAz3FBcJIT29ZkpkVMdFDHZ4g46rSaJLV76EfjfGcMEO44P6gxo5Zt6a+4aqMuECEln696nXUzYEcwE8cG8IG9xW1q5INZIKK9tFTxuK9T4juQP8RYYNjQM4oWRFUPOF5frvTT0OLMov3mvBZU68jZcwmOmyRUvqzsWjpCvn5g9y4d++eZ/8gZWbOTRfXrl2Xr+FzHU3S6ALlh6+/7RKzfkCUUubK1bJ/T2sZPY4pnmw1kcK6pkTFsHmfYr0fdaD0dDtsU5FifsTTpeKSpItvQgghvsXTy1HEk5JOL1A8UTw9z+Lpj9uSeMoZ/5orLN4tnmY628bsKHan6c1UqQs/FjuK4oy6qioWhQWnRGFprbuuVOm5p9vOnhLlNRRPrZXGxkZRVFQkLl26JGpqnkqP0tJSX+Lpzp074sqVK3J/7IPfvSZtmZmZgcQTjoU+qX41R7FoJUi+/8obgf4yrkcNIHVDTwExa5Ao8Nd+FY3RmuqN6KJDT0+y1SHyKyrURFZGxZSWJU08RYt4UvW7bHVrVBSQeY+i1RqyReUkA3ye1POkR/OEdZ90WRFUPOmRRrk797TIs6cLR70OEMbNrPnklQqo13YLKifUd4aXpNHrt6n6VPhuQUHr6zdu+ipIrkckRau7pN/LvCPHnPMEra0W65oSvbe4nlgF3/XP89yFS5wxwPeHOha+pyd/PiuQeEo06o0QQkibEU9/TPFE8ZQM8fRHSRJPf/Xsg9Cs4ql898Rn/xP6msjK2+5EPkUTTx9FFU+viRwf4qlw08in739/kaipOyeW/qKpvtQrM5vS9fI3TdOiqbR6UuPni8IaiqfWAiZmU6dOjZBBaH369HFJIlM8FRQUiAEDBrj2VW38+PGioaFBvvfgwYOe70MbOHBgxOQGtaB69uzpel/Hjh3Fjh07XNcwZswYp6GG1O3btxMWTxAkSPlBbRlEG+gNqzFFmyTpE1ikniFVCukjOKY+ocU+SFOCuMCENKjMSRaIelA1dlCAGpg1amJFkJhjo2oVYUwQOdQS4kndW1tkjtfEVL2uGgQH0oB0URFvFItf9D4gKifs+5SIeJryxRxH1IYxoY/nmrAdddfwGvqjQOqnuY9XnSc9Ii+onAginlD3DHWx9D5BjkUrLG5+t0STQfq9NBuee4jClhJP+nPsVSDe67oR7YXVCdW+KpINtbwwphRPhBDSpsXTXz+bcydDPP0RxRPFU5ji6Q9bqXj6MC5BUrXHkTp9Fh978toh0cerxlNBZpMYGrEosoh43Skx+c2mVLv8mgCFzLukiI/eN2pHPRNPO6b+OHqEwJuficI6iqeWBrU0+vbtG1UIeYmnvXv3+tqnc+fO4hbSk7Kyor6vX79+TvrE7NmzA/Xl7t274r333ovYnpcXf/qTPgENsnKXOTnE7+YKTEhx8prEJZLuFDZ6lI+SbCpiCVKgpvaKE0li1hyyode30cVAS4kn2zY/4gnRRnqUBmojqX2wBH0y0KWLmZ4U1n2KVzzduHnTkUTjJ33eYs+eLnaUmNMjpJD6qtKyvESKKZ7CjHgy5aVXg0Dxeq5VRFcsGaSPhVczi4u3hHiyyfton2eku16pq39ak/K9Xs7qgIjqUjXGKJ4IIaTVi6cPW6l4+kOKJ4qnRMTT7ydBPH0rQfH094mLJ61YeJeJohyv1ezxFk94/wgtJa/LUJG+NkvkrJ3p7IM2JPOQr/PnL+7l+p/YDiNGiqWrMsWOU8Xi0o7PNMGUIrLzTomamgpxqWC7mKyJqlem5lA8tTBLly51CZ2uXbuKlJQU+XuHDh2ssscmehCxtH79ejF9+nTXMQ8fPiy2bdsmo6h69Ojh2g75hb5gkrF161Zr9JVNkCm5hP6g32HVjtInoJjgoo6P3lAbBxELZpqIPklC9EfQqJ5Eok7CRp8gIrpHFwyoj4SJqJrcxlrFDKJE7Yuft27dTlq/kymebCmCutzAOCUDfbUxM0okrPsU77OnJvxhXn8816T3f37G0+8SJesgxPTnwqsO1a69++VqgtiO5yPIcxpUPOF7pLyiUtaB+/rgYed1fG/YzitXnZubLnr+LEX2D9GDXjIIx8TxsQphwZlzovZKnbhwqVjWmNPFWixRmmzxpD9n+CPIx7/4pUgZ9onTps2cKx49+sa5b+Z91dOhUSeP4okQQp5L8fT3CYqnbyVBPP0+xRPFUxDx9HshiidTPgUVT98NUzwVrh3qpMZln332elTxhHYsxl9aRz4VWIHF02ti6QE9fe+cFkGVYomgKhbpjnzqJvZXUTy1FEhFM+WRkj/yf9IvXZLRSjbxdO7cOVe0kj4xMaObdAkEOeW1DX3SBRLS6k6fbvqruBllNWjQ0wkk9jP7GkbEU9CUMH1yi59B61G1VvFUePacSJvyRURha72v0YQGxk+9D+Lm7PmLSe13MsWTTSbq43Dm3IXQrwdpmuo+DPtkrGefE71P8Tx7eiQWioCHsSJbvNekR/lkrVkv02N10Rmr6HzC9ymAeLKlJO7cs9/Z7rcgeDygaLotZbMlxJMe8WSrdYfzImJUfZ7Vvdb/MIBt5nc2xRMhhDy34um7cYonXTqFJZ5+j+KJ4qm5xdOfJyievhOqeCrKFq+oCKVVx5pejyae6k6J6V1ih/i/MHC+L/mki6d3F++J3H62Ka1vyNpT9kLkWs2p6buLKZ5aiPPnz1tT3XTM6CMlnvA+CCNIIdR5qqurc/bBGKLGkpdciraqnbmK3qRJk+SEEWIJDRNbve4TxNS1a9dkf3bu3ClrP6Gh3yhKHoZ4CpJuo0uPWJO61i6e9EgeRFmYaV56X7ESnw1EXqjVztAO5B1Jer+TKZ5sE9Zk3jMlT1SUjvn5DOs+xXsdxSVlger1JPPZ04uII2pJSQxVI0p/Lp4KvHAXKYglafRrstWYshUfT8ofHJ6cR0WPxYpUTIZ40tMo1b1R9wfRbEg11D+/NvGE50AdQ60oSfFECCFtRjx9J0Hx9OcUTxRPzSGefqeFxZNa2c6veHotmHg61ySQBs43ajU11XhKz49cWS5vfreI1Dekwz3dVisKd88XHfR0Ow9ZZBdPPxY7Sg2plDczsubTm689Oedr8qf6PSJFb/4eiqcWorCwMELyLFnirv+CVeqiFReHcILwmTZtmhRXXvWY/IonW5pdrHby5MnQx8bPJCaW9Ig1qWvt4slWoFgXF/pE2hahIeuHPSv2jJazbUez9DsR8YTomtYino4eP+GMHaKJcJ5k3KdErgOpXyqSrbqmtkWfPVthf33VNH1VwHg+m4mKJ/2abFLab2RaouBzieeppcSTXjjeq9abquflJZ5wr5GmWFZe6UTZUTwRQshzJZ5eCyCe9BXtWko8/Q7FE8XT8yqeXopHPBWuSmkSRKv2iPz8PSIvD+2QyNsxrSkKaX623FZYgf1OiTEvNaW27aiwRCCdWqTVf5oZKbSiiqduIq/KO5rJT6N4ajnWrl0bVSoBjIftPX4LgAcVT+a2oMdub+IJNVr27D/oNNTCCQsUOlcTVH0SqNBr+5jpc2Yh5Ky1G5rtuca5+w0eEVHbxzap7d1vsKeUamnxhLo8auwwSY/2DCZynxK5Dj1CRxc8LfXs4T6r4uHqXqEIuQJF/W0SS6ei6rLYkrvTWbny/oMHoYknPSJr7sIlUcfTK1oSq7ghKgh9Q/Rg0FRedZ/91mZLhnjCc6KiILESpC09Uz+vTTzF+51N8UQIIa1OPL1E8UTx9DyJp98KQTz9WZziScknv+Lpe4mIp/zF3QJJHbnCnLb63Qu/yPYsVr70/ZDEU16TABuzKkeKsf0H3C0//5AUZuU1rPHUUphpbTbxhDpPtvcgyskUQAMGDBCZmZlSBKWmpsYlnjZt2hSxbejQoWLFihVi8eLFTsO/V69eLRtqUpWVlbVJ8eSnzstXq9dFfObzjh4PdRwQkWA7NiaPP+0zwBEjejQOxiB1wpSmFKystUmRSxs2b5UrXJlAvqk0K9s9WLk62+l3Y+NdqyxrSfF0sajYt3RK5D7ZZI+6jlMFZ2Kec9+BQ9aUqZZ89vQ+IRpLZ8GiZc42s0C87fMUNM02Umg+tj6zSoyZzx7QV320PUfYH+mW0VbVbBojb0m0dfsu3zWeYl1TvKjPINrq7I2e56V4IoSQdiOevhdAPP2lNg8PKp7+LATx9FsUT+1PPP1mSOLpT+MQT/+3EfXkRzz9nSGefhBcPPUKJJ7eRTRRTVMK3gu/yPIUT+ldmsRTeQLiKaIGlVfaXt05sWNTlsjO2SPK6yieWgqzxlOvXr1813iCYNJfhwTSCRLVpKfK+ZFhN2/elHWl0JAuqPqMmk6QUGjl5eVxRQO0hHhCVAWiHdDq6uudNBSsdKVvs12PXmQ3Gel5KvVMrcLVcPWa7AdWl/Ka4Kv0KzXBRsFtRGroDWlkiaxshz4gygYpXpjEIvILr0E6fTSmaVXN3J17ogoTyA0IFzxD6V8uj5AOLSGecP/1AssQIWfOnneNH+rkJHqfQH3DVXkvTp4uFAfzjjrPHpatxzFxrqLiUuv4q6iyZK1SGM816avfYRxxDIDoID/CRv88xfrsoy+nC8/KMcJ5Jk2b6YwHpLF6znUxdiz/pHN8FEpXEYrnLlyM6LdNeJmphNGikFBcHWOG7xDcY9RawzHNZ1zVzErkmuIBBfrV9aKh4Lk6JlI28dmmeCKEkDYvnn5giKe/Cyievv1sTh5UPP1pSOLpNymeKJ6CiKf/mETxpORTLPHUPxRhokU2zTlQYZdKL/1Y5Jx171t+oClK6YURmQlFPJmr2uVZVq3Lz2wSaFkFTfWoyotOyf/ZLTx7yhoJ9XT70/fY+hhrf4qnSJD60b179wjRg/Q5NZkpLi62rmqHycno0aMjXj98+HDEcfUC4Gj5+fme4mn69OlSJmHsb9y4EXHODh06iCNHmgpSX758OaLPeO/du3flOc0V+iClwhBPQYuLq6gZP+JJCRQ/ItkmNTbmbIt4z+Fj+aE+I+ifHnliNqTK3L59J67rSSQ6y895bFElShSpVCOvZt53fcJqPg/68RIVT3rh5WjNlCdB75PCjJjzcy6g11j61fRZSfl+ivea9n590HMfiEpElMX63PuRE3qRbr/POa5pzGeTXM+a/m+vwuJm+mo08WQKaVvL3rgllGuKF311O6+GSCuIJz/fqX6+symeCCGkVYin/j7E099q8+lkiKf/SPFE8eRHPP1GCOLJq85TWOLpb5pdPEVZ1U4XPZBP6Yg0qqoVNRXnxP61n0X8j16ktIpHPF0VhZuGasfsJbIOHHPOt2PVSK2e1DQtuqpCzHmzqR/TXf2I3D4nP/r26T6uo72LJ5CVleVKmcNKcSkpKdZ6SioCadWqVRGvQxClp6fLyCdTAKEhJc5LPJkRV7Y+9e7dWwwaNMj1Oo71dPJ/13XeRGo/IVLGa9nzWJNlNbHEX/H9vH/UuDRfsuFUQaFr37RfTY+6RHtYAgApOWZ/sNrY9Rs3Pa8/6PUEBdEXfQYMtR4b0SSIHoo26TUn2BBZiIzBpNSM4lETVlt0jx7xhOiuRNCFTrSG6zOlQ5D7pFApTdGabQU4tR9EzoVLxUn7fornmoAe1aZ/PsxIMZfI3ZLr+/Ok12yK1mz1zyBQbLITqxj6/a5A2p2XeIom37Din9dnL95rihdEY9kEMp6rhYuXyYhPv9+p6js7WgSe+hwn67uSEEJI6OLpb5Ionv5E8wKJiKffoHhqe+Lp11uxeFIFxv2IpxebWzxdvVos0t/3Ueh7ak7AlD+7eIIEyvrFazHP54rM0vrovoZEt1M82cDEpX///jELeENG6eLJrP0Uq+kpc6Wlpdb3DBw4UPZH1ggyakTZGlbRU2l2EE9du3ZNetHx1gRSxPRJYjKXYAeIIkDaVdXlarmiVGvhTmOjqKiskoWkIUEwmfUDnh3U+rlcXSNqr9S1meeitd6n5r4mRLvhecC9LS4pC604dlhAfFy4WOT0z1ZkO1GQyqeeb5yjtT7nSJVVY4F7nIyxIIQQ0mrF04s+xZOtsHhrEk+/TvFE8RSveFLyKVHxpOo82cTTPyZDPKVbpUuF2JH5mehgk0BvdhPpOcdE8FpTvTzEE1qt2L/Kfr5XBn4mdhRUuN7fJKtei0jBc7aPaJJZ7mvUt9v2p3jyAv+TP2vWLKts2rJli+jbt6/zGgp7K5A+Z6biofXp08dVA+rTTz+NqFG0d+9e0aNHD5dIUpNDvDcnJ8d6fPQLUVF6PSqbeDp+/Hibvm/6Kl3JqrNDCCGEEEJIyOLpHz3Ek1nfKV7x9H9q83mKJ4on3+Lp10IQT38QQDyZUU/Ph3gK0Goqip/VSjolyisqkn6+8tJz2vlqW10x8fYunhRIs0BRbkQzVVZW+irOjfeg7lJ9fb0s7n39+vVA54Q8unPnjjy311+5cVz0B/fGb7/aA3p9J6/l4QkhhBBCCGmn4un/0Ob3fsTTH4Qgnn6N4qn9iqffDyCe/pMP8fTfYoin/+FDPP19S4onNoon8vyDiCesPoYUO4g7QgghhBBCniPx9Pc+xNP/iCGe/psP8fSfAoin36d4an/i6T80s3j6sxjiSZdPXuLpr6OIJ1XnSYmn71M8UTwRQgghhBBCSDsTT9/XxJNe38kmnv46hnj6C22+/udR6js1p3j6DxRP7UM8/W6I4slWYFwXT/89inh6wYd46kfZQ/FECCGEEEIIIW1cPPXzIZ5eiCKe/nsU8RSrsHhQ8fS7FE9tWzz9+wTF0+80k3jS5ZMpnvQ6T/+PZWU7iieKJ0IIIYQQQghpz+Lpex7iSa/vZIqnb2vz8WSLp99JUDz9e4qntieeftunePqjEMTTt0IST69SPFE8EUIIIYQQQkg7EU+vhiSevhWCePojn+LptymeKJ6i1XkyxdMfJkk8qTpPfx1lZbvvGgXGKZ4ongghhBBCCCGkPYqnFw3x5LWi3V8HWNEuHvH0hz7F029RPD3/4unfNYN4+oNWIJ6+q4mnl5596H5O2UPxRAghhBBCCCFtXDz9/Nkc+CVNPH23FYinP2gG8fTvKJ6eX/H0myGIJ10+JSqeVLrd/4yysp0unn70pPVpaGi4TeFD8UQIIYQQQgghbZHHjx/fxtz32RzYFE/f8RBP0Va0Cyqe/lSb/ycinn6T4qn9iKff8Cmefi+GePqTKOJJySdTPP1FAPH0Nxbx9HeaeHrlSetZVlZWROFD8UQIIYQQQgghbZEbN24UYe77bA78kseKdn+rzaP9iKe/sIin/6LN523i6U9iiKff8ymefoPi6fkQT6aACls8/W4M8fTHUcTTf7aIJ10+6eLp2xbxpKfbeYknFFP7X09al127dh2k8KF4IoQQQgghhJC2yLFjxw5i7vtsDvz3McSTrbD4X2rzb108/V/afP2/GtFOXuLpj2OIp99NoniyORGKp1Ymnn49JPGUaJ2nbxny6S9jrGz3tx4r2/3Dk/bjCRMmZFH4UDwRQgghhBBCSFtkxowZWZj7PpsD21a0+9sYK9r9pSGdvhXyinbxiqdfp3iieAoinsKo8/RXMQqMf8dY2e4HT9rrL7744sjz58+fo/SheCKkpbn/4IGoulwtGq5e42AQQgghhJCEqa2tPfeDH/xgJOa+z+bA+op234lRWPyvQqrvRPFE8RRTPP2aT/H0261APP1VDPFkFhhHqOG/Tpo0aRWlD8UTIeDx48di1boNIuPLFVFb9sYt4ptvHod67rUbNosXXnpFvNWx25Njf9NqxiN35x7RpWdfMXzUOPlz9oJF4k5jo/X9N27eFNt27BafjE2T7+3U/QPxr117y32u1NWH3r+SsnIxP2Op6/7My/gyKedL9lhfuFQsFi5eJj74cKgcu9ff7iRShn0i9h/I+//bO/eovcryTr+rASwkkECQoICEUxAMaECUQCBAUJAQUTmLGUFEFDzhCQ9FUVSktKmo8VRKrat2dBB79NAqtTOdGQcV69TpaKW1OMOszgEqM8XVsbrmm3d/3W+ys/s8z33fz2G/e7/vda91/aNo8uU7mN/l776f4Neb9fPUnIcffmTh97/whwv3/O4fLHzlq/9m8b+rPf/n7/9+8fclfV9Un4tcf+6lP6Zcv8ev3/9ni79OheZj/9v//j8W3vfLH1g454JLF783rrn+dQvv3/6xhf/8ve9n+T391Q/+ZuHjd33S+zn6xG9+euEnP/lJ1o8pZqrP429++rMLl1/18sWv8+rr/S3veM/Cn/zpv9/x86/6eVL9Hn7v8//0uWz/vidfI9XP4+rndvX9o/0Z3qT6mcUwDDOr8+EPf/izVeats6/2sPhxjXw9TfG0j1I87Yl46o94Ch0ZLyme9utIPB3bEE8T+RQSTyfXxvecJUuWvOTuu+/+KuIH8cTsOg899NDCbbfdtrBt27aFW265ZeGBBx6Y+Y/5sR//eGHDs7YsCqAQJeTQ537384v/3VXA7oN4qgLcu2/b5vz4qz+jhx/5u13++Qd/+F/FP7cvffmPs/4eP/WZe7y/1n3f/NagpNPN77k9+GdXBfTHHvtx8udppwD5nwu3bfuQ6uv6e99/QPzc5vxz7+JjSv39VYLkrPNeYPrY//W//Vrxnymfued3gp+fEzc8a+HvfvSjbB9TzFRfT8/YeK7391jJuOrP4i8f+Ktd/vVKwLY/381//4MfvVP9M7xJ9TH3RfYzDMPknC9+8YtfrbJulXnr7HuyIJ6Ob+TpnC/aSeJpvymIJ58vQTx1LJ5+PoN42jezeDpcIZ5c63YneO48Vcb39DGb16xZcwPyCfHE7Drj74mFiy66aAf333//zH/M//AP/3fh7PMvXgwjVSOh+n/gXdyx/ePZg8rX7vvm4v/rX7Uh+hCCPvlbd+8IZtXv69997esL2z740V2C8s9+9rMd//z3H/jrHf9e1eSopFDVNmkLle/+ZT6B+e0//08LN9x4047Py9aXXr/j17n/238+KPH06je8dYcYqL4GvvCHX1lseTRD9Jt+4V3/7GvD+nmqfq3tH/91ZwD3Sc//9fDDC294683O74Wb37vz81vJhKpt1PXXXszHFDtVY8knNkJfc9/81rd3+Werj6cSUZ/+7O8sPO+yK7OJp0lzsvo6qppi7c/X295566KcyfExxUzz50TFe2+/Y+Fb3/7Owr1/8qeLX2PNz1nV3mr+s+949y/u0l6bfKwTqqbjT3/600X52P7YJ6LL9XP9rk/+VrFWHMMwzDSl0zHHHHNDlXXrzLvec9/pBMV9J5d4OjyzeNo3g3j6ecTTbIqnZUbxtL9DPB3oEU+HtMTTYS3xNJFPGvE0aT09vXXnqfrGO2XMxjHnL1my5KW33377Pdx8QjwxbvF03333zZV4qlZS5nWqYDppPmw893mLfy6TgF81b1yhtAqvr3/LzYvrb+350pe/ujMc3vXJYr/vH/6XhwYrnu78xKcWfvv3vrDwj//4013+vWolacvFW3eInWZbJebz1JRck7Beia5YSVOtAFarUtV//qZb3pcc4PvwMYWm2cLZfOELF/7gS1/eITV8X3PVn1EllyZC6Dt/8d1/9vl3tZBSxNM/tYb+X7GPKfbr/MprXx1sQFZ/Nq9789ud4umUszYvrn1O/kyborn6/Vafd9+ve+NN75r7n+sMw8zHVDedtm/ffk+VbauMW2fdU1ptp4l4ku47NcVT87D4kY4X7Q5t5HjXi3Zt8bS/UTwtQzzNn3haGhBPyz3iaaVDPK1yiKemfDrUsG6nEU8nOsTT+rp2WH1DPmfM5SeddNLbb7311s/de++99z344IM/eOSRRx5DCiGe5nG+8Y1vVK9gLNx5550LH/nIRxbG3wtzJZ58IcY3jz76vxd+41OfWfiX/+pzi6GpClBVQ6WSBldfd8PC7e/fvng8vDl//YMHF//56ibJhCqM5b4fZZ2/+O73dgS6av1mMj/60aO7rOJ86GO/pv5znfznXvX6txZrdDWDajswV02IKpRXn6OqwdMOplXjogql7Vs7VWurugNThfO/efCHi62LqoVTNSfet+2Di3doSk+z2dGUFjGfp+pjraTM9o/dtfjPVfP5L30lWtL8h6/fv+PX+bP/+J2pfO2lfkzV18bdv/37i9+L1dfHfd/wtzsf+m9/uyhnqhW06tetROHkZ4ZP0jRbPl/8o3vNfybNny3V12j754jra8XyuYz5mFK/P6vGl/afr2Rd9f3WXLerfs/tdlZIPE3aVNaf6wzDMH2f8c+4xx599NEfjP/eft8dd9zxufXr17+9yrR1tt1YZ931DvF0olI8adfsDm1Jp4McL9q1xdNKj3haHhBPSxFPsyGeHldAPO3nEE8HOMRTjjtPaxt7qb4D4ye1xFNlgDfU35hnj9ky5rIx1T7sdWNeO+b1Y9445k1jbhzz5jHV6wBvq/mFMTeNeUfNzWPeOeZdY24Z8+4x7xnz3jG3jnlfzW1jfnHM7WN+qeaXx2wb8ys17x9zR80Hxnyw5kM122s+XPORBh+t+VjNxxv8aos7G/xai7sc/LqBTyTwGwAAAAAA0FtS/q5vyRSuTNLOLc1M0847zSw0yUeTvNTMUJNcNclZk9w1yWEfaOSz9zdy27Y6y01y3e111rutkf9urTPhe+qMeEudGd9ZZ8hJnrypzpiTvPmWOoPeWGfSN9YZ9bV1Zn1JnWG31Jl2Y51xT2mJp5MCh8WPa4inHPednuhYszsgcN8pl3h6HOKpO/Gked3OKp72EsTTPkrxVPrAeLv1tM5z52nyut2k9bSh3n89s/5mrZ6cPK/+5n3umOeNef6YF4y5cMxFYy6uXwm4tP5Gr+zyC8dcMeZFY7aO+RdjXjzmyjFX1T8UKq4eU1Ugrxnzspprx7x8zCtqrqu5fswrx7yq5tU1r6l5bc0NNa9r8PqaN9S8scWbGtzY4s0O3qLgrUreBgAAAAAAM482H2iyhiujtHNMM+O0888kF01yUjM7TfLUJF9N8tYkf03y2CvrjDbJa5P89vI6003y3TV15ru6kQOvqrPhi+usuLXOjlfUWfLyOlteWmfNi+vseWGdRZ9fZ9Pn1ln1vDq7nl1n2dPrbHtqI+8+03PfaV3EfadSh8X3dazZ7SPcd8olnkJOBfGUSTxJL9tJ4mlvg3iy3HmSxNNRhgPj6zziqdl6qr4xT6u/UTfW37RnjdlUfxM/a8yz61cBnlN/g2+ud2e31FzQEFQTSXWRR1K5RFVbVjWF1VUNYTWRVhNx1ZRXE4E1kVgukdUUWtc3xNYrW4LrVQ7Z5eI1Aq9N4AYAAAAAAOgtKX/Xl3JEKIO4Mksz0zSzTjsHNUXRyxv56WUtaXRNI3dd3RBIV7UEUlsiuUSSSyZd1JBJE6F0QSNfnl9nzvPqDHpOnUmfVWfUTXVmPbPOsKfXmfZUR9upLZ60952OHu1638kinjT3nULiSTosLomnPRBP/RJPewTEU8rLdrnE00Q+HdGST0fXWA6MPz0gniatp4ozBPl0rkdAPbcloNoNKVdLKiSgNBLKKqJCMqotpNpSKiSnXhUhrSReAwAAAAAAvSXl7/qWTOHKJNcLgsklmayiSZJNIeHkai/5GkwXNFpMbeF0riCdzmjk2A0B8TTJw9rD4kc3xNORjTx+WCOn5xJPKS/aucTTHoin2RFP0p2nWPF0cEM8WdbtntKQT8fXPC2wbnfyaOfrdhPx1Gw9+eSTSzxtbognST5d4lnRk+TTlQ75FGpBXSPIp6aAkhpRGhlllVKvBgAAAACAmSdFLvkkk6bR9ApH/rnWsQ4Xaje1pdOVCunkWpm7RCGdJuJps0c8+aRTs+3UFE+TvOtbs3taIzevbeRpy5rdRDwdnEE8he47IZ4QT6qX7VziqcSBcV/r6YSIdbvcrSfXbaiQfNoaIZ+07adrAwLK0oaSJFRKUwoAAAAAAGYLS3bQSKbrPFnGJZusLSeNdNoqSCfXrabcbSfrmt0JhjW7HIfFQ+JJe1gc8TRQ8bS7IJ5yvmy3ciS/bGe983SkUTxN7jydKIinduvpzIZ8OrvGJZ7OG+1678m6cte++WRZuwu1nzQCSpJQ1wlcn9COQlQBAAAAAMyHSLK0mK5X5BCtbJKEU6jlpF2vk246aVbsJuLpPI94muTRsxo51dd2comnSR623Hda08jfKYfF2y/aWcWT5kU7n3jaHfE0LPEk3XlqiqcVAfEUe+dpIp7aracn1xzbqAf67jxpXrcr0Xpqyyfp4LjUfIptP/lW8FxreNY2lFZEWXglAAAAAAD0lpx/97dIplcE8su1wkpdTMvJ0nTyHRJvSqcSbSfLa3Zt8fSUhnia5Ot222kinlaP4u47+cTTCod4ijksjngqKJ5CAipGPKW8bOcTT5Z1O5d4yrFut86wbuc6Mn5m/U2+ySGeJvJpc+TKXWrzSWo/SfefNC2okISyNqRKCCoAAAAAAOgn2nygyRqSaLrWkXOswkmSTtqmU8yK3eaGdGqLp0kePXNkOyruEk851uwk8SSt2eUWT5oX7bTiSeNgEE+ZxVPKy3ahdTufeDqo/uLNfeepLZ+eMdp5ZDy0bhfbetpS/zCJufcUOji+tSWftALqpZ4VPI2ESpVRKYIKAAAAAACGS2xe0Egmi2zSrtVd2cpa7ZaTq+kUc9fpgtaKXY62U1M8TfKu1HZKve90SCPHS+LJt2aX80U7xBPiKduB8SPqb4KjHOLpWKV4crWeTh3tPDJ+WkM8nVF/k7tuPcWu3GmbTyH5JAmolwgNqBQJJa3opYopAAAAAACYXaQcIeWQGNl0dSsjScJJI50sTSfLip3rttNZjXy6sZFbT22s2UltJ5d4OtYhniZ5+4hRvsPiiKc5EE+7ZRRPS1viybVuZzkwrlm3OyzDut06w7pdSutJWrnz3Xu6RGg+te8+hdbvfAJK24LyiSiNjLKIKaQVAAAAAMBsyqMUsRSSTC/zZBep3eQTTlcGhNNWx2qdq+nUlk7Nu06aFbucbSeXeFqXYc3uMOWaXcph8b1b4mlpRvG0G+JpuuIp9sB4rHiy3HkquW7Xlk+n1GwY7XrrqfnCXfPWk/bQuHRs/GLP2l1bQF0htJ9iBZRLQvlElE9GxUipktIKAAAAAADKkvPv/qGMcY1SNIXaTVrh5Gs5XeEQTq71OtcLdm3ppD0o7rrttHG0622nDY0cG9N2il2zs9x3yiGeYg6LI55mRDxp1u1CB8YP8KzbHaxYt/OJp2NGu75ud5xx3S6m9fTs0a6Hxn0rd9qX7ix3n2IElCShfCJKElKSlColqAAAAAAAoJ9o88E1RsHkEk0h2RQjnLT3nLQv2Ekrduc28mXOtlNbPE1y8iQ3HzOKu+80ye2uNbt220k6LK5ds0M8IZ6S1u2eIKzbrc6wbifJp8nTk+1bT9aVuxj5dGGEfIoVUJKEcokoSUZppFSMoAIAAAAAgOGizQearHG1QjSFZJNVOFml04WR0ilmxa5922l94baTdN/pCYJ40rSdEE8zKJ5y33lKFU/Sut3qjtbtrK0nzSt3IfmkufnkW72LEVAxEioko7RCKlZQAQAAAADAcInJClcbJJNFNqUKJ23T6QWCdNK8Yleq7ZSyZrdasWaXUzzlvO+EeCoknkq/bNduPbnEk2/dznLnybJuF5JPTx3temTcJZ9OHrlvPVlaTxr5pD04HnrxziegXDegQhIqtI53VWQzSsNLAQAAAABg5onNC5JcukqxRheSTa4bTi7hFHq5TntIXCOdrAfF27edTg5Ip3WNPBySTpY1u5j7Tr41u7Z4WtaReFqCeMojnpYkiifLup1FPEl3ng6a4rpdqPV0+mjn85VnZZZPrrU7bfvJIqC2BgSUqw0lCamXRHI1AAAAAADMPLF5QSOYQrLJ90JdrHAKtZy0h8St0umsRv48fYptp9CanUs8We87SeJJu2ZnEU9LEE92+ZRDPOW682QRT48f2e48xR4ZX1t/kx1ff9PlXLmLuffkkk/W9lOMgAqt4mnaUBYhlUtQAQAAAADA7KDND1IOCbWaQqt0qcJJajm5pFPMXaecK3ZPa+ThtaP4o+KW+06PjxBPJe875RRPFpeDeDKKpz0D4snVemqKJ9+dp7Z4cq3baV63O7L+JinVekq996RtPrnk04Ut+RQSUK4bUC9UCKitARn1YoFcYgoAAAAAAOYHq1iSRNPWQLPJd7/JdcMpJJxcR8Ql6XS+QTpp7zqVajutaeRrzWt2oftO7TU7132nFYG20zLlmh3iKaN4kiSUVjy1BdQeo7g7T3t5xJOl9aS58+Rbt9O2no6tmYin5q2nXCt3rntPknzarJBPvtW79vqdJKB8LSiXiHqRQkTlFlMAAAAAADB/WMWSJJpeJDSbpHaTSzi11+pCq3U+6bRZIZ18d53OGOVZsXtqIw+vbeRky1Fx7Zpd7H2nvT3iaa9R3H2nPUb2o+Ih8RTrbxBPSvEUs24ntZ40d558r9tJ63a5Wk/PHO18ljK0cpdbPrnuPvluP/kaUJoWVKyIyi2mAAAAAABg/rCKpRTRpGk3hRpOvpaT6+W6nNIptGK3vpFbc7WdpKPirjU7y30nqe2U874T4qlH4qktoHKLp+Uj27qd73W70JHxI0b6I+PNW0+W1tP6UXjl7oyR/96TVj5tccinWAGlaUFpRJRPRlnElFZQAQAAAADA7KPND1IOucIgmiztJotwakunLQbpJB0T963YrR/ZV+yOb+RhzVHxI0bho+LW1+xc4ml5QfEkvWaHeJqyeEq586QVT6VbT0eNdj4FqW09rWuIJ83K3YZG5VFzbNwnn6S7TxYBZW1BuUSUVkZZxFSqsAIAAAAAgOESmxekHCJJpssd+UfbbrIKJ989J6t0at91Or2RP6UVu4l4WmdsOx3dyNEl206p4sly3wnxVEg8hQRUrHjS3nlaqhBP0ut2LvHket3Od2T88NHOI2ih1tNTRjt3Wy0rd9K9J6t8Otchn0Kv3vmOjzcFlE9CXeKRUC4RpWlFWcVUbmEFAAAAAADDITYvSDlEkkyXOfKPq93kkk0XtjKXJJxcLafzGsIpVjqF7jpZVuyOa+ThUNvpyEa+drWdNK/ZSeJphUI8hdpOmvtOseIp10HxmRdPP1dIPJW481T6yLjl1lPqvSeNfGrefNK2n6T7TxoJ5VvFc4korYyyiKncwgoAAAAAAIZDbF4IZRCNZLrUkX9Cq3Qu2STdcdK2nEI3nSzSSXvXKddtJ9eanfWo+DTuO8WIp5wv2c2leHIJqBTxFLtut8IjnqzrdocE1u00L9xpD42HVu58x8ab8il0cFzbfpLuP2kklG8VzyWifDIqJKUkMZVbWAEAAAAAwHCIyQqXGeSSTzJd4sg/oVU6l2yS7jhZW06uQ+JN6eQ7Jq5ZsdMcFNfcdtK2nbRrdiuNbaeYNTuLeLKs1yGeEsXTbpnFk08+Set2vtaTb92u3Xo6dLTz6Jnr1pPUetKs3IXuPVmbT9LqnXX9LkVCuUSUT0ZppJQkp2K4HAAAAAAAekvOv/trskYoq1wsiKZY2WRZq5NW66xNp9BdJ+2KnXRQ3NV2OqyRt0NHxdviydd2Coknn3TKJZ60t50QTx2Ip9h1O0k8adft9neIpxKtJ+2h8Zzy6UyPfHKt3oVevnMJqBgJFboL5ZNRGillkVNaLgMAAAAAgN6S8+/+mqwRyio+yXShIw9ZZJPUcnIJJ9dqXajplEM6aQ6Kl2g7tcXT/pnW7JYWWrNDPA1IPOVYt4s9Mq699SQdGl8rrNy57j3lkE+h9pN1/S5GQkkiyiekNGJKK6e0XAoAAAAAAL0l59/9pZzhyyeuLBMSTVbZZFmrC7Wcckgn112n0Iqd1HY6cqS/7dTFUfHSa3aIpzkWT6F1O+nIuO+FO1/rKWblTvPSXfvm02kt+eRavZMOj0vrd7ESSiOifDJKklIxogoAAAAAAOYPS6YIZZMXGEWTVTZp1+p8B8Rdq3VN6XTaSL7p5DomHrNi52s7+V6yk46Kp67ZIZ7mXDyVlE/7KlpPq0b2W0+5Vu608ulkofkUK58sAipGQmlElE9GaaRUiqQCAAAAAID5wJIpQtnk+UbRZJVNWuGUQzq1m04nG6RTzhU7S9tplaLttG9H0gnx1EPxNMTWk+bW02Ge1pP1lTvNS3eh5pPmxbvQ7SeXgHJJqBgRpZFRISmlFVS55BUAAAAAAAyT2Lwg5RBffglJJqtocskmSTi5DoiHXq6zNJ1cx8Str9i52k6HjdJvOw2h7YR46kA8lVy3k+STSzyltJ4OGsm3niwrd9pj49a1O9/dp7aA2iQIqFALKkZCaUSUJKS0Yiq3sAIAAAAAgOEQmxekHOLLLyHRZJVNoXaTTzi5bjk1W06x0qnddAodE49dsVvtaDsdlKntpH3Nbq8prNkhniLEU0hAxYon6XW7HOt2K0f+I+OW1tPqkf7QuObek9R8ah8cX++RT672U2j9rimgtC0orYTyySiXkNLIKYuosvB8AAAAAADoLTn/7q/JGqGsskWQTDGyKdRu8gkn11qda7VuQ2u1LnRIXNN0sqzYaQ6Ka9tOBwhtp9g1O81rdjnEk9avIJ4KiSdN68kinvYJtJ5WZmo9SSt3lntPIfkUeu1Oc/dJs34ntaDOUUiokIiyyCiNlLIKKgAAAAAAgAsMOSOUVSTJFBJNPtkkrdNtUq7VWe85STedmtLJctdJWrHL0XZaGWg77ZNZPOW474R4SpRPJe88ueTT0oKtp1WG1pPmlbuY5tO6QPMpdHQ81H7yrd9ZW1BaEXWeg80ezg+wxcBzAQAAAAAADBJJI5V8csklmbStJt8qndRuktbqpNW69hFxX9NJ+4Kd5q5T6KB4qO20qmDbaakgnUrcdyopnQYvnjQCSiuedpvSul2o9fR4z8qd1Hqyrty1j40/JaH55Lv75Go/Set3ZygElFZCtUWU1IqShJRFUOWSVwAAAAAAMExi84I2j0iC6TmOPHSOUTadLbSbtGt1vtU6l3SyNp3ad52Ojlix07admtLp8cq2U5drdrtlEk85nM1ciidN68m6bhfTeloxSnvh7gmt1pNPPmlX7kLySbr55JJPUvspdHx848h/hFwroawiyiWjQlIqRlDFcD4AAAAAAPSWkllAyiG+/HJugmiSZJPvaLhrrc4lnKTVOq10Om5kOyauecWuKZ0O9kinmJfsViS0nWLX7HK9Zod4ShBPfToyHtN6yrVyZ2k+heST5uh4u/3ku//kuwElreFZRZRWRmnllEVUWdgMAAAAAAC9Jeff/TVZQ5NZQpJJK5q063SulbrTAsJJuufUXK2LlU5HC9IpdsVuKG2nnK/ZIZ46FE+xradlCa2n/T2tJ5d8Omhke+XOcmzcJ598d5+k1TufgNowCt+A8q3h+ZpQGhHlklEuIWWVUzGyCgAAAAAA5ouYbBHKKs9WSCataPLJppBw2jDy33FqCyfNal3znpNGOknHxC2v2B3kkU6uttP+CW2nZQXaToinjsVT39ftfK0nl3zyHRrXrtyF5NOayLU7ST652k8+AXXqKHwDyreG15ZQFhHlk1EhKaWRU1rOBQAAAACAmSdHdghlk1CmOTtSNPlkk3Q03HfHqS2cXC2nFOnUXq9bY5BOmhU730Fxl3SKaTv1cc0O8TSa7ut2Ket2e7fE0/KR7daTZuXu4MDKne/YeOjmU/O1u7Ue+eRavQvdfvLdfwodIfdJKIuIcskol5DSyilJUKVyDgAAAAAA9JaSWUDKIaEMs0mQTBbRFFqnc63UnaIQTq6Wk2u1rimd1o52fb1Oc9MpdNfp0IB0ilmx288jnZa3pFPXa3bTes0O8dTBul3OW0+W1pPm3lNM88knn0LtJ9ftJ20DSmpBNSWUJKI0MsonpCQpFSOqAAAAAAAALCJJK5c2ebJOSDKFRJMkm7QrdW3h5Lrl5Go5WaVTqOmkuesU03YqcdupizW7uRFPOeRTTvGUo/UUc+spVj4daJRPqxXNJ598OsYjn6ztpxgBpZFQVhHlklEhKSXJqU0ZxRUAAAAAAMw+MdkilFV8+eaMBNEkyaZY4aRtObmk0zEK6eRrOq02SqcDC0mn2NtOudpOXYmnXs1QxNO0bj2lrtxpXrrTNJ+ku0+uV+9yCCiNhJJElEtG+YRUSEpp5JSWTQAAAAAAMPPkyA5SPjlDKZg2OnKSTzRpZFOqcHK9Wqc9Iq5pOmlesMu1Yjft2059E0+9naGJp5hbT1r5tF+g9SS9cmc5Nq5pPrlevNOu3qUIKKuEaosojYzyCamQlLJKqhTOAgAAAACA3lIyC2jzyEalYJIk0wZHvtLKplThpF2ta75cF9t0stx1Cr1iJ912srSdYm479VU8DWb6fGS8xK2nXPLpCZHy6fCRfHA8dPcp1H5KEVA+CRUSUacIIsolo3xCShJTqcIKAAAAAABAEkgWseQTTKd5spFPMvlEk0825RJOrpaT656TdEjc+oJd6K5TinSa5m2nro+KD25mVTylrty5xFPo3lNs8+kIh3ySjo5bbj9pBVSMhJJElFVIWQRVLnEFAAAAAACzT0y20GQWSTBpRJNVNmmEk+WWk/aIuHRIPEY6hVbs9h/lX7FDPCGeireecsinVSP7sfEU+RRavdOu37kaUC4JpWlCtUWURkb5hJRPSsVIqhISCwAAAAAAhkWO7KDJKKcqBZMkmU525K1Qs8klm1wNJ81anWW1LkY6aY+Jr8oonbpoOyGeei6efAKq1K0nTetp+Ug+NB4rn2KaT5rVO+v6nbYF5WtCtUVUjIzyCSlJTMWIqlhOAwAAAACA3lIyC2jzSCjTrE+UTM9w5LC2bNK2myxrdZbVupimU6x08omn5RnaTjlvO4XcB+KpsHiyHBrP3XpamrH11JZPB4x0x8ZDzadDHfIpdPfJcvvJJaBiWlC+JpRWRLlkVEhKaeRUirACAAAAAADQCCStVPLJJZ9ksogmn2zStpti1up8LSfXPSfX63WhplPomPgBBulkbTvlfsnOIp603gTx1JF40rSehiKftM2n0NFxzat32vW72BZUW0K1RZRGRvmEVEhKaQVVLnEFAAAAAACzT0y20GSWZyoFkySZnu7IXycktJu0a3WaV+tCR8RTm059lk5dvGSHeJryul2JW0+hV+5WjNyv3GmOjWuaTxb5FNN+CgkoqQXlk1BWEeWSUT4hJYkpq6QqJbIAAAAAAGAY5MoNmowSyjgnKSSTRTRJssnVbooVTr6WU6x00jSdfHed2q/YrRjJr9h1fdtpGmt2cyWeNALKIp5y3XqKkU9S6ym3fDokIJ+k9lOMgJJaUD4JJYkol4yyCCmtnLKKKgAAAAAAAAvaPCLlGo1gOtGRq3yiSSObXO2mVOHkW61rS6dDCksnyyt2KdIp50t2GvGU6mEQT6N+vnBXYuUuZe0uZfWuKZ80AkpqQYUklCSitDLKJ6SsgipWWAEAAAAAAGgFkkYoaQSTRjKFRJNGNrnaTRrhpJVOoZZTynpdFyt2s/SSHeJpVO7W0+4ZW0+WV+76IJ9yCSipBRWSUJKI0soojZiKEVWp4goAAAAAAGafmGyhzS2h7CNJJkk0aWSTq92UQzj1TTqlvGJnaTulSCfE04yIp1DryXJofBrySfviXW4BJbWg2hLKKqJcMsonpDRiKlZUlRBZAAAAAAAwDHLlBktWCWWepykkk0U0+WSTq92UWzhZXq7rWjpZD4qXbDshnnoonqa9cqe591RaPsW0n6wCSmpBtSVUqA3lk1E+IeWTUho5lSqsAAAAAAAAUgWSViqF5NJTPRnKlbV8osknm1ztJqtwSm05lZBO1rtO016xQzwVFE9dtZ5Kr9z1RT7FrN+5BJSlBdWWUJKIssgoSUpp5FROcQUAAAAAABCbP6RcE8pEkmSSRJNPNkntJpdwilmr64t06nLFro9tp7kVTxr51GXrKfXeU+jYeIx8ytl+sjagfC/hhSSURkS5ZJRPSElSyiKoSgksAAAAAACYXVJzhjbPHKcUTGs9GSskmnyy6WiPbLI2nHK2nGKkU+iYeI67Tn1oO+XyL4inTK2n3RTiSSuf9vLIp2VG+RTTfIppP+UUUJoWVIyIsgqpkJRKlVVdCC0AAAAAAOg/OTOENb+sTRBMVtGkaTflFE4xLadcTSdpxW4vj3iySKc9lNKpD22nQYqnPqzb5Wo95b73FNt8ilm9i12/kwSUVkKF2lA+GWUVUpKYyiGrUjgeAAAAAAB6S5fZwJJZQtlHK5iO8WQwn2jSyKYU4RRqOcWs1uVsOuVesRvSbafBSqdc8qmEeJrWyl1K8ynX6l1o/U56AS9GQkltKJ+MsgopjZhKlVUAAAAAAAAxWHOKlHu0gunJngy2RrFGp5FN0kt1obW6XKt1KU2nPqzYcVR8RgTUkOTTvpHyKbb9JDWgNAIqJKEkEeWTUVYhZRVUqcIKAAAAAAAgVSBphFKKYJIaTUc58ptPNlmE0yHKtbrU1bqUplPfpRPCaU7FU2jlzieflmVqPoXuPoVW71IFlLSGJzWhYkRUrJCyyqmc4goAAAAAACA1h2iyjlYwxYimULNJWqdLFU6h1brQPafUptMyhXQqtWKHeGLlbhDySbt6l1NAWSSURkS5ZJQkpUJiyiqpuhBZAAAAAAAwe+TKG5pss8Ygl3ySSRJNWtlUSjhZ7znNqnRCPPVYPOWST9Ird7mOjVvkk3b1Tnv7KZeAaksoaSXPJaJ8MiokpCQpFSOpYngyAAAAAADMPKXyhCXTHGUUTEd6stfhyhU6l2zKIZy0t5xiVutipVOuY+I5XrHTSifEUwHxpBVQ02g9aeWT5eZTzN0n6faTRUBpJdSTDBLKKqNCQkojpmIlVS6OBgAAAACAwTCNzKDNM1IuOiJSMmlk05OMsilWOEktJ+09J+tNp9i7TtNsO+XyK4inga3cxTSflhnkk7R6J7WfSggoSUJpRZRPRoWElFZMpciqXKwBAAAAAIDe0nU+iMkwUi463CCZrK2mJzlyYCnhJLWcpNU6n3Ralth0mrUVO8RTj1buupBPluZTbPtJev0uJKBCEkpqQmlEVKyQ0oqpXLIKAAAAAAAgBzEZRspFWsGkFU2hZlNINvmEk/RaXWzLydp0mgXphHjqQDyVbD3luPcUkk8aAbVP5OqdVUCtGslHyEMtKElCaUVUSEaFhJRFTuWUVgAAAAAAACXkkVUqaQTTak8Gk0STJJs07aYDHbkzRjhZV+v2MQqnVOlkuevUp7bTTIqnWWo9lbj5lKv95Hv5zrqC1xZQVgnlElEWGaWRUhY5lVNYAQAAAAAAlBBIVqkUkksWyXSIJ9NpZZPmlbqQcJJerMvZcsrZdKLtNMPyKYd4yr1yl7v5lEs+hdpPWgElSagUEeWTURopZZFTOYUVAAAAAABACYFklUohuRSSTDGiSZJNWuGU0nLKuVpnlU4lV+y6Fk9zM31YuSstn/bMIJ+mLaBySCifiArJKI2UssipnMIKAAAAAACghECySiVJLoUk08Ge7JYim6YtnGKl054DkE4IpxlsPu0+ZfkU037SCijtEfIYCeUSUVYZpZVSWjGVW1gBAAAAAACUEEixYukQRb7SSKYnejKeRTZpbzhphVNMy2ka0ml3mk6zKZ6m0Xrq8uB4SD5p20+xAipGQllElE9GaaWURU6VkFYAAAAAAAC55VGsVArJpZBk0oomq2yKFU7allMu6ZTrptMQ2k6Ip9Gw7j3luPkUe3Q81H7KJaBiJJRFRIVklEZKWeVUCWkFAAAAAABQQh7FSCVJLoUkk1Y0WWVTLuEUu1q31NByKtF06lvbCfE0Gv6x8RzyqUT7KVVAaSSURUSFZJRGSGmlVElhBQAAAAAAUFIgpcilJwqZ68AE0aSRTSnCqYuWU6x0GvIxccRTh+JpiPLJ0n5KEVCxEsoiokIyShJSFjFVSlgBAAAAAADkIiXbaLLTgUbJpBVNMbIpp3CytJyGLp0QTz0TUKXFk0U+WW8+ueSTpf1kFVAlJZRVRGmElEVM5ZZVAAAAAAAAJYnNOZoMJeUwrWgqJZtShJPUcoqRTntkkE6s2CGfisin2IPjqe0nq4CKaUFpJZRVRGmFlFZK5ZJUAAAAAAAA0yIm+2gyVSiTWUSTRjZZ202pwimm5VTqkDjSaQ7E07zIpy4ElFZCxYgojZCyiKlUSVUa/gcUAAAAAGC2ZE9prDlIk62kfKYVTVrZ1IVwQjohnnotnqYpnzSrdzHtpxwCyiKhfCIqRUZZpFSsnErlQAAAAAAAmFu6zh+WbKTNWxbJtDKQBzWyKYdwimk55b7n1JV0QjwNQDwNWT7F3H7StJ80AsoioSxtKElExUipGDllZRUAAAAAAEBBSWTFmpc0GWylUTbtmyCbNMIpZq0utuU0D9IJ8UTzSS2fcq3fuQRUDgkV04iyCKkUOTUtcQUAAAAAAJAijlKlklYwWRtNqbIpVjjFtpxoOjG9EE9dyqdpCKgSEipWRGmFVIqcKimrAAAAAAAApimRrFJJI5hiRVNu2TQt4dQH6YR4GqB4mhX5FLt+lyqgfBIqVkRpZFSMlMotqQAAAAAAAKZNSibS5i4pv1lE0/JArswpnLRrdfMunRBPHYqnvsinrtpPFgGVS0KFRJRGRlmlVC5BlQv+RxEAAAAAABHUBTGZSZvHVkSIphyyKUU4lWw5DV06IZ563nxaMkqTT7naTyUElKUFVUpExUipFDk1JIkFAAAAAACzRckMY81T2pyWSzRZ200lhFPulpNGOnFMHPnUSfOptHyyCKgcLShJQkkiyiqkYqTUNGQVAAAAAADANCRSqlxaocxw+2SUTZZ2k0U49Uk6sV6HeOpN86lPAiokoVJElFZGWYVUSUkFAAAAAADQN1LzkjaXSfkuRjRZ203TEk7TaDohnpBP2QRUjHzKJaC6lFAaEWUVUrkFFTILAAAAAAD6LIlKCCWrYNKIpi5kU07hVPKeU4xwQjohn3rffsopoEISShJRGhllEVKpYmrasgoAAAAAAKBLiZQilrSCaW9FLlwaIZtyCqchtZyQTnMgnoYmn3ILqJISSiuiYoVUaUkFAAAAAADQR3JkJ0tW02S/3LIpt3CaF+mEeJpD+ZSyeldCQJWSUBYZZRVSueUUQgsAAAAAAIYiiEpLJatgWqbMhrllUynhlGO1DumEfJr60fHU9tM0BJQkobQiyiKjUqVUn0QVAAAAAADAtEVSilyySKalivwo5c++CaeS0qmUz2AGIp6mKZ9S1u9SBFQOCWURUTEyqqSc6hr+hxMAAAAAYD4kT9ek5ixLptNkxBTZlCKcUtfqhiidEE8DE1Al1+5Kt58kAZVDQmlFlFVG5ZJSsyytAAAAAABgtimdh2Iymjb/abJkimxKFU45W06s1yGeBn33KZeA6kpCWURUipDqWlABAAAAAAAMhRwZy5rrtHmxtGzKIZyGeM8J8YR86kxA5WhBaSSURUTFyKicUgqBBQAAAAAA8yKMSsolq2TaU5ktNRk1VTblFk5IJ8RTr+RT7vZTLgGVU0JZRVSqkOqDpAIAAAAAAOgbOTNWTMbT5sccsimncCrdciotnRBPNJ+KtJ9yCqjcEipFRpWQUggsAAAAAACYF2FUWi5ZJVNu2TQt4dRX6cQgn6LlU58FVKyISpVRfRJUAAAAAAAAfSV37orJfpZs2XfhhHRiOhdPKfKpVPtJK6AsEsoqomJlVCkphbwCAAAAAIB5l0Yl5VKMZHqcMZNqc64lO3chnFivQz7NbPvJIqBKS6gcMqpPggoAAAAAAGBo5M5jsbmwhGwqKZz6fM8J6UT7qTcCqqSEShFRpYQUsgoAAAAAAJBI0xVMMaKppGzqUjjRckI89VY+9U1AxUioXDJqWmIKAAAAAABgnsiZ3WLzozWn9lk40XRiOvkC6Lr91JWEShFRJYQUkgoAAAAAAKCsTMopmGJFUxeyaQgtJ6QT8mnq7adYARUroXKIqK6EFEILAAAAAADmTRBNWzCliKbdI7PtNIQT0okZtHzqWkClSKjcMmpocgoAAAAAAGAolMptqXkyNsdOSzghnZheyKdpC6gUCZVDRJWUUcgqAAAAAABAIk2HHFkxJaumZOQhCSekE/JpUAIqVULlElF9kFJIMAAAAAAAGJrsGaJcyiWadsuQh4cmnJBOyKepyaccAiqHhCohouZVTAEAAAAAAAxdLOUWTbtlyr65cjjSiZlLAdUnCdWVjEJYAQAAAAAAdCeQupJMfZRNCCdm0PKpjwIqt4Tqm5BCfAEAAAAAwCyKnyEKptyyaejCCemEfBqMgMopoUqKqHkWUwAAAAAAAPMklkqJpiUF8vS0vACDfBqcfCohobqWUQgqAAAAAACA4Qil0pKplGxCOjFzJaCGJqH6IKOQVwAAAAAAgDSaPiUz56zJJoQTM3X5VFJAlZZQQxVSAAAAAAAAMF3B1IVs+rke5H2GmRsB1aWEQkoBAAAAAAAgl6YlmxBODPJpygJq2iIKQQUAAAAAADCbQmlaoqkvwgnpxAxKQHUpofoqoxBWAAAAAACAQBoWXefYvuR3hhmsfJqWhBqyjAIAAAAAAIDZk0x9k01IJwYBhYwCAAAAAACAAUsmhBODfJpzCYWUAgAAAAAAQC7Ni2xCOjFzKaD6LKKQUwAAAAAAAEiloYsmhBODgBqohEJYAQAAAAAAzJ5AmiXZhHBiEFBzKqKQYQAAAAAAgORBNCGcGAQUMgoAAAAAAACQTAgnhplHAYWIAgAAAAAAgHkWTQgnBgGFkAIAAAAAAAAEE8KJYWZVQCGlAAAAAAAAkEsIJ4ZBQiGnAAAAAAAAYK6lErKJQUABwgoAAAAAAACBhHBiGCQUwgsAAAAAAAABhGxiGCQUAAAAAAAAALKJYRgkFAAAAAAAAACyiWGQUAAAAAAAAADIJoZBRAEAAAAAAAAgmhiGQUQBAAAAAAAAIJoYBhkFAAAAAAAAgGRiGAYZBQAAAAAAAEgmhmEQUgAAAAAAAIBgYhgGMQUAAAAAAADAMAyDnAIAAAAAAACkEsMwSCsAAAAAAABAHjEMwyDDAAAAAAAAkDwMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAM05r/D41BeGLo57u+AAAAAElFTkSuQmCC"></image></g><path fill="#000000" fill-opacity="0.0" d="m250.09186 498.85828l364.0 0l0 60.283447l-364.0 0z" fill-rule="evenodd"></path><path stroke="#317efb" stroke-width="12.0" stroke-linejoin="round" stroke-linecap="butt" d="m250.09186 498.85828l364.0 0l0 60.283447l-364.0 0z" fill-rule="evenodd"></path></g></svg>
-
diff --git a/src/site/content/en/lighthouse-performance/uses-text-compression/index.md b/src/site/content/en/lighthouse-performance/uses-text-compression/index.md
deleted file mode 100644
index 5236622a557..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-text-compression/index.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-layout: post
-title: Enable text compression
-description: |
-  Learn about how enabling text compression can improve your webpage load performance.
-date: 2019-05-02
-updated: 2020-06-04
-web_lighthouse:
-  - uses-text-compression
----
-
-Text-based resources should be served with compression
-to minimize total network bytes.
-The Opportunities section of your Lighthouse report lists all text-based resources
-that aren't compressed:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-text-compression.png" alt="A screenshot of the Lighthouse Enable text compression audit">
-</figure>
-
-## How Lighthouse handles text compression
-
-Lighthouse gathers all responses that:
-
-* Have text-based resource types.
-* Do not include a `content-encoding` header set to `br`, `gzip`, or
-  `deflate`.
-
-Lighthouse then compresses each of these with
-[GZIP](https://www.gnu.org/software/gzip/) to compute the potential
-savings.
-
-If the original size of a response is less than 1.4KiB, or if the
-potential compression savings is less than 10% of the original size, then
-Lighthouse does not flag that response in the results.
-
-{% Aside 'note' %}
-The potential savings that Lighthouse lists are the potential savings
-when the response is encoded with GZIP.
-If Brotli is used, even more savings are possible.
-{% endAside %}
-
-## How to enable text compression on your server
-
-Enable text compression on the server(s) that served these responses in order to
-pass this audit.
-
-When a browser requests a resource, it will use the
-[`Accept-Encoding`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding)
-HTTP request header to indicate what compression algorithms it supports.
-
-```text
-Accept-Encoding: gzip, compress, br
-```
-
-If the browser supports [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html)
-(`br`) you should use Brotli because it can reduce the file size of the resources more than the
-other compression algorithms. Search for `how to enable Brotli compression in <X>`, where
-`<X>` is the name of your server. As of June 2020 Brotli is supported in all major browsers except
-Internet Explorer, desktop Safari, and Safari on iOS. See
-[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding#Browser_compatibility)
-for updates.
-
-Use GZIP as a fallback to Brotli. GZIP is supported in all major browsers,
-but is less efficient than Brotli. See [Server Configs](https://github.com/h5bp/server-configs)
-for examples.
-
-Your server should return the
-[`Content-Encoding`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding)
-HTTP response header to indicate what compression algorithm it used.
-
-```text
-Content-Encoding: br
-```
-
-## Check if a response was compressed in Chrome DevTools
-
-To check if a server compressed a response:
-
-{% Instruction 'devtools-network', 'ol' %}
-1. Click the request that caused the response you're interested in.
-1. Click the **Headers** tab.
-1. Check the `content-encoding` header in the **Response Headers** section.
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="content-encoding.svg" alt="The content-encoding response header">
-  <figcaption class="w-figcaption">
-    The <code>content-encoding</code> response header.
-  </figcaption>
-</figure>
-
-To compare the compressed and de-compressed sizes of a response:
-
-{% Instruction 'devtools-network', 'ol' %}
-1. Enable large request rows.
-See [Use large request rows](https://developers.google.com/web/tools/chrome-devtools/network/reference#request-rows).
-1. Look at the **Size** column for the response you're interested in. The
-   top value is the compressed size. The bottom value is the de-compressed
-   size.
-
-See also [Minify and compress network payloads](/reduce-network-payloads-using-text-compression).
-
-## Resources
-
-- [Source code for **Enable text compression** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-text-compression.js)
diff --git a/src/site/content/en/lighthouse-performance/uses-text-compression/uses-text-compression.png b/src/site/content/en/lighthouse-performance/uses-text-compression/uses-text-compression.png
deleted file mode 100644
index 5530c3e9066..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-text-compression/uses-text-compression.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-performance/uses-webp-images/index.md b/src/site/content/en/lighthouse-performance/uses-webp-images/index.md
deleted file mode 100644
index 85cff39efb2..00000000000
--- a/src/site/content/en/lighthouse-performance/uses-webp-images/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: post
-title: Serve images in next-gen formats
-description: |
-  Learn about the uses-webp-images audit.
-date: 2019-05-02
-updated: 2020-05-29
-codelabs:
-  - codelab-serve-images-webp
-web_lighthouse:
-  - uses-webp-images
----
-
-The Opportunities section of your Lighthouse report lists all images
-in older image formats,
-showing potential savings gained by serving WebP versions of those images:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="uses-webp-images.png" alt="A screenshot of the Lighthouse Serve images in next-gen formats audit">
-</figure>
-
-## Why serve images in WebP format
-
-JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
-
-WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web.
-See [A New Image Format For The Web](https://developers.google.com/speed/webp/)
-for more on WebP.
-
-{% Aside 'codelab' %}
-[Create WebP Images with the Command Line](/codelab-serve-images-webp)
-{% endAside %}
-
-## How Lighthouse calculates potential savings
-
-Lighthouse collects each BMP, JPEG, and PNG image on the page,
-and then converts each to WebP,
-reporting the potential savings based on the conversion figures.
-
-{% Aside 'note' %}
-Lighthouse omits the image from its report if the potential savings are less than 8KiB.
-{% endAside %}
-
-## Browser compatibility
-
-Browser support is not universal for WebP, but similar savings should be available in most major browsers in an alternative next-gen format. You'll need to serve a fallback PNG or JPEG image for other browser support. See
-[How can I detect browser support for WebP?](https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp) for an overview of fallback techniques and the list below for browser support of image formats.
-
-To see the current browser support for each next-gen format, check out the entries below:
-
-- [WebP](https://caniuse.com/#feat=webp)
-- [JPEG 2000](https://caniuse.com/#feat=jpeg2000)
-- [JPEG XR](https://caniuse.com/#feat=jpegxr)
-
-## Resources
-
-- [Source code for **Serve images in next-gen formats** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-webp-images.js)
-- [Use WebP images](/serve-images-webp)
-
-<!-- https://www.reddit.com/r/webdev/comments/gspjwe/serve_images_in_nextgen_formats/ -->
diff --git a/src/site/content/en/lighthouse-performance/uses-webp-images/uses-webp-images.png b/src/site/content/en/lighthouse-performance/uses-webp-images/uses-webp-images.png
deleted file mode 100644
index d15e532290f..00000000000
Binary files a/src/site/content/en/lighthouse-performance/uses-webp-images/uses-webp-images.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/apple-touch-icon/apple-touch-icon.png b/src/site/content/en/lighthouse-pwa/apple-touch-icon/apple-touch-icon.png
deleted file mode 100644
index 07751f556ab..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/apple-touch-icon/apple-touch-icon.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/apple-touch-icon/index.md b/src/site/content/en/lighthouse-pwa/apple-touch-icon/index.md
deleted file mode 100644
index 2fbb3a75a20..00000000000
--- a/src/site/content/en/lighthouse-pwa/apple-touch-icon/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: post
-title: Does not provide a valid apple-touch-icon
-description: |
-  Learn how to specify what icon your Progressive Web App displays on iOS home screens.
-web_lighthouse:
-  - apple-touch-icon
-codelabs: codelab-apple-touch-icon
-date: 2019-08-27
-updated: 2019-09-19
----
-
-When iOS Safari users add [Progressive Web Apps (PWAs)](/discover-installable) to
-their home screens, the icon that appears is called the *Apple touch icon*.
-You can specify what icon your app should use by including a
-`<link rel="apple-touch-icon" href="/example.png">` tag in the `<head>` of your
-page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of
-the page content. In other words, instructing iOS to download an icon results in a more polished
-user experience.
-
-## How the Lighthouse Apple touch icon audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages without a `<link rel="apple-touch-icon" href="/example.png">`
-tag in the `<head>`:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="apple-touch-icon.png"
-       alt="Does not provide a valid apple-touch-icon">
-</figure>
-
-{% Aside %}
-  A `rel="apple-touch-icon-precomposed"` link passes the audit, but it has been
-  obsolete since iOS 7. Use `rel="apple-touch-icon"` instead.
-{% endAside %}
-
-Lighthouse doesn't check whether the icon actually exists or whether the icon is
-the correct size.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to add an Apple touch icon
-
-1. Add `<link rel="apple-touch-icon" href="/example.png">` to the `<head>` of your page:
-
-    ```html/4
-    <!DOCTYPE html>
-    <html lang="en">
-      <head>
-        …
-        <link rel="apple-touch-icon" href="/example.png">
-        …
-      </head>
-      …
-    ```
-
-1. Replace `/example.png` with the actual path to your icon.
-
-{% Aside 'codelab' %}
-  Check out the [Add an Apple touch icon to your Progressive Web App](/codelab-apple-touch-icon)
-  codelab to see how adding an Apple touch icon creates a more polished user experience.
-{% endAside %}
-
-To provide a good user experience, make sure that:
-
-- The icon is 180x180&nbsp;pixels or 192x192&nbsp;pixels
-- The specified path to the icon is valid
-- The background of the icon is not transparent
-
-## Resources
-
-- [Source code for **Does not provide a valid `apple-touch-icon`** audit][source]
-- [Discover what it takes to be installable](/install-criteria)
-- <a href="https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/" rel="noreferrer">Use Apple Touch Icon</a>
-
-[a2hs]: https://support.apple.com/guide/shortcuts/run-shortcuts-from-the-ios-home-screen-apd735880972/ios#apd175362e63
-[source]: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/apple-touch-icon.js
diff --git a/src/site/content/en/lighthouse-pwa/apple-touch-icon/share.png b/src/site/content/en/lighthouse-pwa/apple-touch-icon/share.png
deleted file mode 100644
index cd573bfd2fa..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/apple-touch-icon/share.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/after.png b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/after.png
deleted file mode 100644
index 18a898fca5e..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/after.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/before.png b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/before.png
deleted file mode 100644
index dee11f79307..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/before.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/index.md b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/index.md
index 227af594b81..470793d3dd7 100644
--- a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/index.md
+++ b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/index.md
@@ -33,17 +33,16 @@ Open the example app in a new tab:
 
 1. Note the URL of your example app. It'll be something like `https://example.glitch.me`.
 
-Run a [Lighthouse PWA audit](/lighthouse-pwa) on your example app in Chrome DevTools:
+Run a [Lighthouse PWA audit](https://developer.chrome.com/docs/lighthouse/pwa/) on your example app in Chrome DevTools:
 
 {% Instruction 'audit-pwa', 'ol' %}
 
 In the **PWA Optimized** section, Lighthouse reports that the example app [doesn't provide a valid
-Apple touch icon](/apple-touch-icon).
+Apple touch icon](https://developer.chrome.com/docs/lighthouse/pwa/apple-touch-icon/).
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="lighthouse.png"
-       alt="Does not provide a valid apple-touch-icon">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MTeobnXovn2UGJW1lhQ9.png", alt="Does not provide a valid apple-touch-icon", width="800", height="283" %}
+  <figcaption>
     The <b>Does not provide a valid apple-touch-icon</b> audit
   </figcaption>
 </figure>
@@ -56,17 +55,16 @@ the example app to your iOS device's home screen when an Apple touch icon hasn't
 1. Open Safari for iOS.
 1. Open the URL of your example app. This is the URL like `https://example.glitch.me` that you
    noted earlier.
-1. Tap **Share** <img style="height:1.2em;vertical-align:top;" src="share.png"/>  >
+1. Tap **Share** {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/79A8XsdBaHeLGY5Wdm1J.png", alt="Apple Share Button", width="46", height="60", style="height:1.2em;width:0.92em;vertical-align:top;" %}  >
    **Add to Home Screen**. You'll probably have to swipe left to see this option.
 1. Tap **Add**.
 
 Because the site hasn't specified an Apple touch icon, iOS just generates an icon for the site
 from the page's content.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="before.png"
-       alt="An auto-generated home screen icon.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mjkYYf7Fjpm4EwzMJ7Xc.png", alt="An auto-generated home screen icon.", width="640", height="1136" %}
+  <figcaption>
     An auto-generated home screen icon.
   </figcaption>
 </figure>
@@ -91,10 +89,9 @@ from the page's content.
   the site. If you audit the page again with Lighthouse you'll also see that the
   **Does not provide a valid `apple-touch-icon`** audit now passes.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="after.png"
-       alt="The Apple touch icon.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Z8nauimUFUDPY8HJDGER.png", alt="The Apple touch icon.", width="640", height="1136" %}
+  <figcaption>
     The Apple touch icon.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/lighthouse.png b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/lighthouse.png
deleted file mode 100644
index a97ef7ad671..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/lighthouse.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/share.png b/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/share.png
deleted file mode 100644
index cd573bfd2fa..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/codelab-apple-touch-icon/share.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/content-width/content-width.png b/src/site/content/en/lighthouse-pwa/content-width/content-width.png
deleted file mode 100644
index 57d2f156ee9..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/content-width/content-width.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/content-width/index.md b/src/site/content/en/lighthouse-pwa/content-width/index.md
deleted file mode 100644
index 4037562cd9d..00000000000
--- a/src/site/content/en/lighthouse-pwa/content-width/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: post
-title: Content is not sized correctly for the viewport
-description: |
-  Learn how to size your web page content to fit on mobile screens.
-web_lighthouse:
-  - content-width
-date: 2019-05-04
-updated: 2019-09-19
----
-
-The viewport is the part of the browser window
-in which your page's content is visible.
-When your page's content width is smaller or larger than the viewport width,
-it may not render correctly on mobile screens.
-For example, if the content width is too large,
-content may be scaled down to fit, making text difficult to read.
-
-## How the Lighthouse content width audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages whose width isn't equal to the width of the viewport:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="content-width.png" alt="Lighthouse audit showing content not correctly sized for viewport">
-</figure>
-
-The audit fails if `window.innerWidth` does not equal `window.outerWidth`.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to make your page fit on mobile screens
-
-This audit is a roundabout way of determining
-if your page is optimized for mobile devices.
-See Google's
-[Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive/)
-for an overview of how to create a mobile-friendly page.
-
-You can ignore this audit if:
-
-- Your site does not need to be optimized for mobile screens.
-- The content width of your page is intentionally smaller or larger than the
-  viewport width.
-
-## Resources
-
-- [Source code for **Content is not sized correctly for the viewport** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/content-width.js)
-- [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive/)
diff --git a/src/site/content/en/lighthouse-pwa/index.njk b/src/site/content/en/lighthouse-pwa/index.njk
deleted file mode 100644
index 1627a504214..00000000000
--- a/src/site/content/en/lighthouse-pwa/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: lighthouse-pwa
----
diff --git a/src/site/content/en/lighthouse-pwa/installable-manifest/index.md b/src/site/content/en/lighthouse-pwa/installable-manifest/index.md
deleted file mode 100644
index 1c81ba80559..00000000000
--- a/src/site/content/en/lighthouse-pwa/installable-manifest/index.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: Web app manifest does not meet the installability requirements
-description: |
-  Learn how to make your Progressive Web App installable.
-web_lighthouse:
-  - installable-manifest
-codelabs:
-  - codelab-make-installable
-date: 2019-05-04
-updated: 2019-09-19
----
-
-Installability is a core requirement of [Progressive Web Apps (PWAs)](/discover-installable).
-By prompting users to install your PWA, you allow them to add it to their home screens.
-Users who add apps to home screens engage with those apps more frequently.
-
-A [web app manifest](/add-manifest/) includes key pieces of information
-required to make your app installable.
-
-## How the Lighthouse web app manifest audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't have a [web app manifest](/add-manifest/)
-that meets minimum requirements for installability:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="installable-manifest.png" alt="Lighthouse audit showing user can't install the web app from their home screen">
-</figure>
-
-If a page's manifest doesn't include the following properties,
-it will fail the audit:
-- A [`short_name`](https://developer.mozilla.org/en-US/docs/Web/Manifest/short_name)
-  or [`name`](https://developer.mozilla.org/en-US/docs/Web/Manifest/name) property
-- An [`icons`](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons)
-  property that includes a 192x192&nbsp;px and a 512x512&nbsp;px icon
-- A [`start_url`](https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url) property
-- A [`display`](https://developer.mozilla.org/en-US/docs/Web/Manifest/display)
-  property set to `fullscreen`, `standalone`, or `minimal-ui`
-- A [`prefer_related_applications`](https://developers.google.com/web/fundamentals/app-install-banners/native)
-  property set to a value other than `true`.
-
-{% Aside 'caution' %}
-A web app manifest is _necessary_ for your app to be installable,
-but it isn't _sufficient_. To learn how to meet all the requirements
-for installability, see the
-[Discover what it takes to be installable](/discover-installable) post.
-{% endAside %}
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to make your PWA installable
-Make sure your app has a manifest that meets the criteria above.
-See the [Installable](/installable/) collection for more information
-about creating a PWA.
-
-## How to check that your PWA is installable
-
-### In Chrome
-
-When your app meets the minimum requirements for installability,
-Chrome fires a `beforeinstallprompt` event
-that you can use to prompt the user to install your PWA.
-
-{% Aside 'codelab' %}
-Learn how to make your app installable in Chrome
-with the [Make it installable](/codelab-make-installable) codelab.
-{% endAside %}
-
-### In other browsers
-Other browsers have different criteria for installation
-and for triggering the `beforeinstallprompt` event.
-Check their respective sites for full details:
-- [Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)
-- [Firefox](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#How_do_you_make_an_app_A2HS-ready)
-- [Opera](https://dev.opera.com/articles/installable-web-apps/)
-- [Samsung Internet](https://hub.samsunginter.net/docs/ambient-badging/)
-- [UC Browser](https://plus.ucweb.com/docs/pwa/docs-en/zvrh56)
-
-## Resources
-
-- [Source code for **Web app manifest does not meet the installability requirements** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/installable-manifest.js)
-- [Add a web app manifest](/add-manifest/)
-- [Discover what it takes to be installable](/discover-installable)
-- [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)
-- [Does not use HTTPS](https://web.dev/is-on-https/)
diff --git a/src/site/content/en/lighthouse-pwa/installable-manifest/installable-manifest.png b/src/site/content/en/lighthouse-pwa/installable-manifest/installable-manifest.png
deleted file mode 100644
index 460f33dc491..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/installable-manifest/installable-manifest.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/is-on-https/index.md b/src/site/content/en/lighthouse-pwa/is-on-https/index.md
deleted file mode 100644
index 9f136c76910..00000000000
--- a/src/site/content/en/lighthouse-pwa/is-on-https/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: post
-title: Does not use HTTPS
-description: |
-  Learn how to protect your website with HTTPS.
-web_lighthouse:
-  - is-on-https
-date: 2019-05-04
-updated: 2020-04-29
----
-
-All websites should be protected with HTTPS, even ones that don't handle
-sensitive data. HTTPS prevents intruders from tampering with or passively
-listening in on the communications between your site and your users.
-
-A page can't qualify as a [Progressive Web App (PWA)](/discover-installable) if it doesn't run on HTTPS;
-many core PWA technologies, such as service workers, require HTTPS.
-
-For more information about why all sites should be protected with HTTPS, see
-[Why HTTPS Matters](/why-https-matters/).
-
-## How the Lighthouse HTTPS audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that aren't on HTTPS:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="is-on-https.png" alt="Lighthouse audit showing page isn't on HTTPS">
-</figure>
-
-Lighthouse waits for an event from the [Chrome Remote Debugging Protocol](https://github.com/ChromeDevTools/devtools-protocol)
-indicating that the page is running on a secure connection.
-If the event isn't heard within 10&nbsp;seconds, the audit fails.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to migrate your site to HTTPS
-
-Consider hosting your site on a CDN. Most CDNs are secure by default.
-
-To learn how to enable HTTPS on your servers, see Google's
-[Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https).
-If you're running your own server and need a cheap and easy way to generate
-certificates, [Let's Encrypt](https://letsencrypt.org/) is a good option.
-
-If your page is already running on HTTPS but you're failing this audit,
-you may have problems with [mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content).
-A page has mixed content when the page itself is loaded over HTTPS,
-but it requests an unprotected (HTTP) resource. Check out the following doc on the
-Chrome DevTools Security panel to learn how to debug these situations:
-[Understand Security Issues With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/security).
-
-## Resources
-
-- [Source code for **Does not use HTTPS** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/is-on-https.js)
-- [Why You Should Always Use HTTPS](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
-- [Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)
-- [Understand Security Issues With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/security)
-- [What Is Mixed Content?](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)
-- [Let's Encrypt](https://letsencrypt.org/)
diff --git a/src/site/content/en/lighthouse-pwa/is-on-https/is-on-https.png b/src/site/content/en/lighthouse-pwa/is-on-https/is-on-https.png
deleted file mode 100644
index 8e4b323206f..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/is-on-https/is-on-https.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/index.md b/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/index.md
deleted file mode 100644
index a2d9665de9a..00000000000
--- a/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/index.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: post
-title: Page load is not fast enough on mobile networks
-description: |
-  Learn how to make your web page load quickly on mobile networks.
-web_lighthouse:
-  - load-fast-enough-for-pwa
-date: 2019-05-04
-updated: 2020-06-10
----
-
-Many users of your page visit on a slow cellular network connection.
-Making your page load quickly on a mobile network
-helps to ensure a positive experience for your mobile users.
-
-{% Aside 'note' %}
-A fast page load on a mobile network is a baseline requirement for a site
-to be considered a Progressive Web App. See the
-[Core Progressive Web App checklist](/pwa-checklist/#core).
-{% endAside %}
-
-## How the Lighthouse page load speed audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't load fast enough on mobile:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="load-fast-enough-for-pwa.png" alt="Lighthouse audit showing page doesn't load fast enough on mobile">
-</figure>
-
-Two main metrics affect how users perceive load time:
-
-- [First Meaningful Paint (FMP)](/first-meaningful-paint), which measures when the primary content of the page appears visually complete
-- [Time to Interactive (TTI)](/interactive), which measures when the page is fully interactive
-
-For example, if a page appears visually complete after 1&nbsp;second,
-but the user can't interact with it for 10&nbsp;seconds,
-users will likely perceive the page load time as 10&nbsp;seconds.
-
-Lighthouse computes what the TTI would be on a slow 4G network connection.
-If the time to interactive is more than 10&nbsp;seconds, the audit fails.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to improve your page's load time
-
-{% include 'content/lighthouse-performance/improve.njk' %}
-
-## Resources
-
-- [Source code for **Page load is not fast enough on mobile networks** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/load-fast-enough-for-pwa.js)
-- [Baseline Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist#baseline)
-- [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
-- [Get Started With Analyzing Runtime Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)
-- [Record load performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#record-load)
-- [Optimizing Content Efficiency](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/)
-- [Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/)
diff --git a/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/load-fast-enough-for-pwa.png b/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/load-fast-enough-for-pwa.png
deleted file mode 100644
index a2bc71935f7..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/load-fast-enough-for-pwa/load-fast-enough-for-pwa.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/maskable-icon-audit/index.md b/src/site/content/en/lighthouse-pwa/maskable-icon-audit/index.md
deleted file mode 100644
index 1309740c50e..00000000000
--- a/src/site/content/en/lighthouse-pwa/maskable-icon-audit/index.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: post
-title: Manifest doesn't have a maskable icon
-description: |
-  Learn how to add maskable icon support to your PWA.
-web_lighthouse:
-  - maskable-icon
-date: 2020-05-06
----
-
-[Maskable icons][guide] is a new icon format that ensures that your PWA icon looks
-great on all Android devices. On newer Android devices, PWA icons that don't follow
-the maskable icon format are a given a white background. When you use a maskable
-icon, it ensures that the icon takes up all of the space that Android provides for it.
-
-## How the Lighthouse maskable icon audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that do not have maskable icon support:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="maskable-icon.jpg"
-       alt="The maskable icon audit in the Lighthouse Report UI.">
-</figure>
-
-In order to pass the audit:
-
-* A web app manifest must exist.
-* The web app manifest must have an `icons` array.
-* The `icons` array must contain one object with a `purpose` property,
-  and the value of that `purpose` property must include `maskable`.
-
-{% Aside 'caution' %}
-  Lighthouse does not inspect the image that's specified as the maskable icon.
-  You'll need to manually verify that the image displays well.
-{% endAside %}
-
-{% include 'content/lighthouse-best-practices/scoring.njk' %}
-
-## How to add maskable icon support to your PWA
-
-1. Use [Maskable.app Editor][editor] to convert an existing icon to a maskable icon.
-1. Add the `purpose` property to one of the `icons` objects in your [web app manifest][manifest].
-   Set the value of `purpose` to `maskable` or `any maskable`. See [Values][values].
-
-   ```json/8
-   {
-     …
-     "icons": [
-       …
-       {
-         "src": "path/to/maskable_icon.png",
-         "sizes": "196x196",
-         "type": "image/png",
-         "purpose": "any maskable"
-       }
-     ]
-     …
-   }
-   ```
-
-3. Use Chrome DevTools to verify that the maskable icon is displaying correctly.
-   See [Are my current icons ready?](/maskable-icon/#are-my-current-icons-ready)
-
-## Resources
-
-- [Source code for **Manifest doesn't have a maskable icon** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/maskable-icon.js)
-- [Adaptive icon support in PWAs with maskable icons][guide]
-- [Maskable.app Editor][editor]
-- [Add a web app manifest][manifest]
-- [The `icons` property on MDN](https://developer.mozilla.org/docs/Web/Manifest/icons)
-
-[guide]: /maskable-icon/
-[editor]: https://maskable.app/editor
-[manifest]: /add-manifest/
-[values]: https://developer.mozilla.org/docs/Web/Manifest/icons#Values
\ No newline at end of file
diff --git a/src/site/content/en/lighthouse-pwa/maskable-icon-audit/maskable-icon.jpg b/src/site/content/en/lighthouse-pwa/maskable-icon-audit/maskable-icon.jpg
deleted file mode 100644
index 9f7a2b895eb..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/maskable-icon-audit/maskable-icon.jpg and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/offline-start-url/index.md b/src/site/content/en/lighthouse-pwa/offline-start-url/index.md
deleted file mode 100644
index 366cd275885..00000000000
--- a/src/site/content/en/lighthouse-pwa/offline-start-url/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: "`start_url` does not respond with a 200 when offline"
-description: |
-  Learn how to configure your Progressive Web App's start_url so your app is
-  accessible offline.
-web_lighthouse:
-  - offline-start-url
-date: 2019-05-04
-updated: 2020-04-29
----
-
-The [manifest](/add-manifest) for a [Progressive Web App](/what-are-pwas/) (PWA) should include a `start_url`,
-which indicates the URL to be loaded when the user launches the app.
-
-If the browser doesn't receive an
-[HTTP&nbsp;200 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#Successful_responses)
-when accessing an app from the `start_url`,
-either the `start_url` isn't correct, or the page isn't accessible offline.
-This causes problems for users who have installed the app to their devices.
-
-## How the Lighthouse `start_url` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags web apps whose start URL doesn't respond with a 200 when offline:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="offline-start-url.png" alt="Lighthouse audit showing start URL doesn't respond with 200 when offline">
-</figure>
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to ensure your page is available offline
-
-{% include 'content/reliable/workbox.njk' %}
-
-1. If you don't already have one, [add a web app manifest](/add-manifest/).
-1. Check that the `start_url` in your manifest is correct.
-1. Add a service worker to your app.
-1. Use the service worker to cache files locally.
-1. When offline, use the service worker as a network proxy to return the locally cached version of the file.
-
-See the [Current page does not respond with a 200 when offline](/works-offline)
-guide for more information.
-
-## Resources
-
-- [Source code for **`start_url` does not respond with a 200 when offline** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/offline-start-url.js)
-- [What is network reliability and how do you measure it?](/network-connections-unreliable/)
-- [Add a web app manifest](/add-manifest/)
-- [Workbox: Your high-level service worker toolkit](/workbox/)
diff --git a/src/site/content/en/lighthouse-pwa/offline-start-url/offline-start-url.png b/src/site/content/en/lighthouse-pwa/offline-start-url/offline-start-url.png
deleted file mode 100644
index c61fae718b5..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/offline-start-url/offline-start-url.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/pwa-cross-browser/index.md b/src/site/content/en/lighthouse-pwa/pwa-cross-browser/index.md
deleted file mode 100644
index 791188c66e9..00000000000
--- a/src/site/content/en/lighthouse-pwa/pwa-cross-browser/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: post
-title: Site works cross-browser
-description: |
-  Learn how to use Workbox to make sure your web page works across browsers.
-web_lighthouse:
-  - pwa-cross-browser
-date: 2019-05-04
-updated: 2019-09-19
----
-
-To reach the most users, sites should work on every major browser.
-
-## Recommendations
-
-Test your site in Chrome, Edge, Firefox, and Safari, and
-fix any issues that appear in each browser.
-
-If your page is a [Progressive Web App](/discover-installable),
-consider using [Workbox](https://developers.google.com/web/tools/workbox),
-a high-level [service worker](/service-workers-cache-storage) toolkit.
-Workbox is developed against a cross-browser test suite, and when possible,
-automatically falls back to alternative implementations
-of features that are missing from certain browsers:
-
-- The [`workbox-broadcast-cache-update`](https://developers.google.com/web/tools/workbox/modules/workbox-broadcast-cache-update)
-  module uses the [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
-  if possible and falls back to a
-  [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
-  implementation.
-- The [`workbox-background-sync`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
-  module uses the [Background Sync API](https://developers.google.com/web/tools/workbox/modules/workbox-background-sync)
-  if possible and falls back to retrying queued events
-  each time the service worker starts up.
-
-Learn more in [Workbox: your high-level service worker toolkit](/workbox).
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## Resources
-
-[Source code for **Site works cross-browser** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/manual/pwa-cross-browser.js)
diff --git a/src/site/content/en/lighthouse-pwa/pwa-each-page-has-url/index.md b/src/site/content/en/lighthouse-pwa/pwa-each-page-has-url/index.md
deleted file mode 100644
index 0aee6ea573f..00000000000
--- a/src/site/content/en/lighthouse-pwa/pwa-each-page-has-url/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: post
-title: Each page has a URL
-description: |
-  Learn about the Lighthouse "Each page has a URL" audit.
-web_lighthouse:
-  - pwa-each-page-has-url
-date: 2019-05-04
-updated: 2019-09-19
----
-
-Ensure individual pages and views in your
-[Progressive Web App (PWA)](/discover-installable)
-are deep linkable via URL and that each URL is unique
-to make them easily shareable on social media.
-
-## Recommendations
-
-- Test that individual pages and views can be opened and
-  directly accessed via new browser windows.
-- If building a single-page app,
-  make sure the client-side router can reconstruct the app state from a given URL.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## Resources
-
-[Source code for **Each page has a URL** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/manual/pwa-each-page-has-url.js)
diff --git a/src/site/content/en/lighthouse-pwa/pwa-page-transitions/index.md b/src/site/content/en/lighthouse-pwa/pwa-page-transitions/index.md
deleted file mode 100644
index 5c4fad6dd11..00000000000
--- a/src/site/content/en/lighthouse-pwa/pwa-page-transitions/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: Page transitions don't feel like they block on the network
-description: |
-  Learn how to make transitions between web pages feel responsive,
-  even on a slow network.
-web_lighthouse:
-  - pwa-page-transitions
-date: 2019-05-04
-updated: 2019-09-19
----
-
-Quick page transitions are key to how users perceive the performance of your
-[Progressive Web App (PWA)](/discover-installable).
-Transitions should feel snappy, even on a slow network.
-
-## Recommendations
-
-To find slow page transitions,
-navigate your web app using a simulated slow network. To do that in Chrome:
-{% Instruction 'devtools-network', 'ol' %}
-1. In the **Throttling** drop-down list, select **Slow 3G**.
-
-
-Every time you tap a link or button in the app,
-check that the page responds immediately in one of two ways:
-
-- The page transitions immediately to the next screen and shows a loading screen
-  while waiting for content from the network.
-- The page shows a loading indicator while the app waits for a response from the network.
-
-If you're working on a client-rendered single-page app,
-transition the user to the next page immediately and show a
-[skeleton screen](http://hannahatkin.com/skeleton-screens/).
-Make sure to immediately show any content that's already available,
-such as the page title or thumbnail,
-while the rest of the content loads.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## Resources
-
-- [Source code for **Page transitions don't feel like they block on the network** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/manual/pwa-page-transitions.js)
-- [Skeleton Screen](http://hannahatkin.com/skeleton-screens/)
diff --git a/src/site/content/en/lighthouse-pwa/redirects-http/index.md b/src/site/content/en/lighthouse-pwa/redirects-http/index.md
deleted file mode 100644
index 2f1a0d8ebf5..00000000000
--- a/src/site/content/en/lighthouse-pwa/redirects-http/index.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: post
-title: Does not redirect HTTP traffic to HTTPS
-description: |
-  Learn how to make your site more secure by redirecting all pages to HTTPS.
-web_lighthouse:
-  - redirects-http
-date: 2019-05-04
-updated: 2020-06-10
----
-
-All sites should be protected with HTTPS.
-See the [Does not use HTTPS](/is-on-https) post to learn why
-and how to set up HTTPS on your server.
-
-## How the Lighthouse HTTP redirection audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that aren't redirected to HTTPS:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="redirects-http.png" alt="Lighthouse audit showing that HTTP traffic isn't redirected to HTTPS">
-</figure>
-
-Lighthouse changes the page's URL to HTTP, loads the page,
-and then waits for the event from the [Chrome Remote Debugging Protocol](https://github.com/ChromeDevTools/devtools-protocol)
-that indicates that the page is secure.
-If Lighthouse doesn't receive the event within 10&nbsp;seconds, the audit fails.
-
-## How to redirect HTTP traffic to HTTPS
-
-Once you've set up HTTPS,
-make sure that all unsecure HTTP traffic to your site is redirected to HTTPS:
-
-- Use [canonical links](/canonical) in the head of your HTML page
-  to help search engines figure out the best way to get to the page.
-- Configure your server to redirect HTTP traffic to HTTPS:
-  * [nginx](https://serverfault.com/questions/67316)
-  * [Apache](https://stackoverflow.com/questions/16200501)
-  * [Cloudflare](https://www.cloudflare.com/website-optimization/automatic-https-rewrite/)
-  * [Microsoft IIS](https://serverfault.com/q/893315)
-
-## Resources
-- [Source code for **Does not redirect HTTP traffic to HTTPS** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/redirects-http.js)
-- [Does not use HTTPS](/is-on-https)
-- [Document does not have a valid `rel=canonical`](/canonical)
diff --git a/src/site/content/en/lighthouse-pwa/redirects-http/redirects-http.png b/src/site/content/en/lighthouse-pwa/redirects-http/redirects-http.png
deleted file mode 100644
index bfa7a25ce4e..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/redirects-http/redirects-http.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/service-worker/index.md b/src/site/content/en/lighthouse-pwa/service-worker/index.md
deleted file mode 100644
index b2220300ad2..00000000000
--- a/src/site/content/en/lighthouse-pwa/service-worker/index.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: "Does not register a service worker that controls page and `start_url`"
-description: |
-  Learn how to register a service worker that supports Progressive Web App
-  features like offline functionality, push notifications, and installability.
-web_lighthouse:
-  - service-worker
-date: 2019-05-04
-updated: 2020-06-10
----
-
-Registering a [service worker](/service-workers-cache-storage/)
-is the first step towards enabling key [Progressive Web App (PWA)](/discover-installable) features:
-
-- Works offline
-- Supports push notifications
-- Can be installed to the device
-
-Learn more in the [Service workers and the Cache Storage API](/service-workers-cache-storage/) post.
-
-## Browser compatibility
-
-All major browsers except Internet Explorer support service workers. See
-[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker#Browser_compatibility).
-
-## How the Lighthouse service worker audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't register a service worker:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="service-worker.png" alt="Lighthouse audit showing site doesn't register a service worker">
-</figure>
-
-Lighthouse checks if the [Chrome Remote Debugging Protocol](https://github.com/ChromeDevTools/devtools-protocol)
-returns a service worker version. If it doesn't, the audit fails.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to register a service worker
-
-{% include 'content/reliable/workbox.njk' %}
-
-Registering a service worker involves only a few lines of code,
-but the only reason you'd use a service worker
-is to make it possible to implement one of the PWA features outlined above.
-Actually implementing those features requires more work:
-
-- To learn how to cache files for offline use, see the
-[What is network reliability and how do you measure it?](/network-connections-unreliable) post.
-- To learn how to make your app installable, see the [Make it installable](/codelab-make-installable/) codelab.
-- To learn how to enable push notifications, see Google's
-  [Adding Push Notifications to a Web App](https://codelabs.developers.google.com/codelabs/push-notifications).
-
-## Resources
-
-- [Source code for **Does not register a service worker that controls page and `start_url`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/service-worker.js)
-- [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
-- [Service workers and the Cache Storage API](/service-workers-cache-storage/)
-- [What is network reliability and how do you measure it?](/network-connections-unreliable)
-- [Make it installable](/codelab-make-installable/)
-- [Adding Push Notifications to a Web App](https://codelabs.developers.google.com/codelabs/push-notifications)
diff --git a/src/site/content/en/lighthouse-pwa/service-worker/service-worker.png b/src/site/content/en/lighthouse-pwa/service-worker/service-worker.png
deleted file mode 100644
index 82d636d308d..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/service-worker/service-worker.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/splash-screen/index.md b/src/site/content/en/lighthouse-pwa/splash-screen/index.md
deleted file mode 100644
index 1ef4b49fe68..00000000000
--- a/src/site/content/en/lighthouse-pwa/splash-screen/index.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: post
-title: Is not configured for a custom splash screen
-description: |
-  Learn how to create a custom splash screen for your Progressive Web App.
-web_lighthouse:
-  - splash-screen
-date: 2019-05-04
-updated: 2019-09-19
----
-
-A custom splash screen makes your [Progressive Web App (PWA)](/discover-installable) feel more like a
-native app. By default, when a user launches your PWA from the home screen,
-Android displays a white screen until the PWA is ready.
-The user may see this blank, white screen for up to 200&nbsp;ms.
-By setting up a custom splash screen,
-you can show your users a custom background color and your PWA's icon,
-providing a branded, engaging experience.
-
-## How the Lighthouse splash screen audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't have a custom splash screen:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="splash-screen.png" alt="Lighthouse audit showing site isn't configured for a custom splash screen">
-</figure>
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to create a custom splash screen
-
-Chrome for Android automatically shows your custom splash screen as long as
-you meet the following requirements in your [web app manifest](/add-manifest):
-
-- The `name` property is set to the name of your PWA.
-- The `background_color` property is set to a valid CSS color value.
-- The `icons` array specifies an icon that is at least 512x512&nbsp;px.
-- The specified icon exists and is a PNG.
-
-See [Adding a Splash Screen for Installed Web Apps in Chrome 47](https://developers.google.com/web/updates/2015/10/splashscreen)
-for more information.
-
-{% Aside %}
-While Lighthouse's audit will pass when a single 512x512&nbsp;px icon is present,
-there is some disagreement about what icons a PWA should include.
-See [Audit: icon size coverage](https://github.com/GoogleChrome/lighthouse/issues/291)
-for a discussion about the pros and cons of different approaches.
-{% endAside %}
-
-## Resources
-
-[Source code for **Is not configured for a custom splash screen** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/splash-screen.js)
diff --git a/src/site/content/en/lighthouse-pwa/splash-screen/splash-screen.png b/src/site/content/en/lighthouse-pwa/splash-screen/splash-screen.png
deleted file mode 100644
index 159e76d0775..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/splash-screen/splash-screen.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/themed-omnibox/index.md b/src/site/content/en/lighthouse-pwa/themed-omnibox/index.md
deleted file mode 100644
index c6eb3685d3a..00000000000
--- a/src/site/content/en/lighthouse-pwa/themed-omnibox/index.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Does not set a theme color for the address bar
-description: |
-  Learn how to set an address bar theme color for your Progressive Web App.
-web_lighthouse:
-  - themed-omnibox
-date: 2019-05-04
-updated: 2020-06-17
----
-
-Theming the browser's address bar to match the brand colors
-of your [Progressive Web App (PWA)](/discover-installable) provides a more immersive user experience.
-
-## Browser compatibility
-
-At the time of writing, theming the browser address bar is supported on
-Android-based browsers. See
-[Browser compatibility](https://developer.mozilla.org/docs/Web/Manifest/theme_color#Browser_compatibility)
-for updates.
-
-## How the Lighthouse theme color audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't apply a theme to the address bar:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="themed-omnibox.png" alt="Lighthouse audit showing address bar isn't themed to the page's colors">
-</figure>
-
-The audit fails if Lighthouse doesn't find a `theme-color` meta tag in the page's
-HTML and a `theme_color` property in the [web app manifest](/add-manifest).
-
-Note that Lighthouse doesn't test whether the values are valid CSS color values.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to set a theme color for the address bar
-
-### Step 1: Add a `theme-color` meta tag to every page you want to brand
-
-The `theme-color` meta tag ensures that the address bar is branded when
-a user visits your site as a normal webpage.
-Set the tag's `content` attribute to any valid CSS color value:
-
-```html/4
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  …
-  <meta name="theme-color" content="#317EFB"/>
-  …
-</head>
-…
-```
-
-Learn more about the `theme-color` meta tag in Google's
-[Support for `theme-color` in Chrome 39 for Android](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
-
-### Step 2: Add the `theme_color` property to your web app manifest
-
-The `theme_color` property in your web app manifest ensures that the address
-bar is branded when a user launches your PWA from the home screen.
-Unlike the `theme-color` meta tag, you only need
-to define this once, in the [manifest](/add-manifest).
-Set the property to any valid CSS color value:
-
-```html/1
-{
-  "theme_color": "#317EFB"
-  …
-}
- ```
-
-The browser will set the the address bar color of every page of your app
-according to the manifest's `theme_color`.
-
-## Resources
-
-- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/themed-omnibox.js)
-- [Add a web app manifest](/add-manifest)
-- [Support for `theme-color` in Chrome 39 for Android](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
diff --git a/src/site/content/en/lighthouse-pwa/themed-omnibox/themed-omnibox.png b/src/site/content/en/lighthouse-pwa/themed-omnibox/themed-omnibox.png
deleted file mode 100644
index 026cdaeb0d5..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/themed-omnibox/themed-omnibox.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/viewport/index.md b/src/site/content/en/lighthouse-pwa/viewport/index.md
deleted file mode 100644
index 88a1f67b707..00000000000
--- a/src/site/content/en/lighthouse-pwa/viewport/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: post
-title: Does not have a `<meta name="viewport">` tag with `width` or `initial-scale`
-description: |
-  Learn about the "Does not have a <meta name="viewport"> tag with width or
-  initial-scale" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-20
-web_lighthouse:
-  - viewport
----
-
-Many search engines rank pages based on how mobile-friendly they are.
-Without a [viewport meta tag](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag),
-mobile devices render pages at typical desktop screen widths and then scale the
-pages down, making them difficult to read.
-
-Setting the viewport meta tag lets you control the
-width and scaling of the viewport so that it's sized correctly on all devices.
-
-## How the Lighthouse viewport meta tag audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-without a viewport meta tag:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="viewport.png" alt="Lighthouse audit shows page is missing a viewport">
-</figure>
-
-A page fails the audit unless all of these conditions are met:
-- The document's `<head>` contains a `<meta name="viewport">` tag.
-- The viewport meta tag contains a `content` attribute.
-- The `content` attribute's value includes the text `width=`.
-
-Lighthouse _doesn't_ check that `width` equals `device-width`. It also doesn't
-check for an `initial-scale` key-value pair. However, you still need to include
-both for your page to render correctly on mobile devices.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to add a viewport meta tag
-
-Add a viewport `<meta>` tag with the appropriate key-value pairs to the `<head>`
-of your page:
-
-```html/4
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    …
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    …
-  </head>
-  …
-```
-
-Here's what each key-value pair does:
-- `width=device-width` sets the width of the viewport to the width of the device.
-- `initial-scale=1` sets the initial zoom level when the user visits the page.
-
-## Resources
-
-- [Source code for **Has a `<meta name="viewport">` tag with `width` or `initial-scale`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/viewport.js)
-- [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport)
-- [Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
diff --git a/src/site/content/en/lighthouse-pwa/viewport/viewport.png b/src/site/content/en/lighthouse-pwa/viewport/viewport.png
deleted file mode 100644
index e72f86c621c..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/viewport/viewport.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/without-javascript/index.md b/src/site/content/en/lighthouse-pwa/without-javascript/index.md
deleted file mode 100644
index 897d48e57e9..00000000000
--- a/src/site/content/en/lighthouse-pwa/without-javascript/index.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: Does not provide fallback content when JavaScript is not available
-description: |
-  Learn how to make sure users can view at least some content on your web page
-  when JavaScript isn't available.
-web_lighthouse:
-  - without-javascript
-date: 2019-05-04
-updated: 2019-09-19
----
-
-[Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)
-is a web development strategy that ensures that your site is accessible to the
-largest possible audience. The core principle is that
-basic content and page functionality should rely on
-only the most fundamental web technologies.
-Enhanced experiences, such as sophisticated
-styling using CSS or interactivity using JavaScript, can be layered on top for
-browsers that support those technologies. But basic content and page
-functionality should not rely on CSS or JavaScript.
-
-## How the Lighthouse fallback content audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't contain _some_ content
-when JavaScript is unavailable:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="without-javascript.png" alt="Lighthouse audit showing page doesn't contain some content when JS is unavailable">
-</figure>
-
-Lighthouse disables JavaScript on the page and then inspects the page's HTML. If
-the HTML is empty, the audit fails.
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to ensure your page has content without JavaScript
-
-Progressive enhancement is a large and contentious topic. One camp says that,
-in order to adhere to the strategy of progressive enhancement, pages should
-be layered so that basic content and page functionality only require HTML.
-See Smashing Magazine's
-[Progressive Enhancement: What It Is, And How To Use It](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
-for an example of this approach.
-
-Another camp believes that this strict approach is unfeasible or unnecessary
-for many modern, large-scale web applications and suggests using inline
-critical-path CSS in the document `<head>` for absolutely critical page styles.
-
-Given these considerations, this Lighthouse audit performs a simple check to
-ensure that your page isn't blank when JavaScript is disabled. How strictly your
-app adheres to progressive enhancement is a topic of debate, but there's
-widespread agreement that all pages should display at least *some* information
-when JavaScript is disabled, even if the content is just an alert to the user
-that JavaScript is required to use the page.
-
-For pages that absolutely must rely on JavaScript, one approach is to use a
-[`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
-element to alert the user that JavaScript is required for the page. This is
-better than a blank page because the blank page leaves users uncertain
-about whether there's a problem with the page, their browsers, or their
-computers.
-
-To see how your site looks and performs when JavaScript is disabled, use
-Chrome DevTools' [Disable JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable) feature.
-
-## Resources
-
-- [Source code for **Does not provide fallback content when JavaScript is not available** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/without-javascript.js)
-- [Progressive Enhancement: What It Is, And How To Use It](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
-- [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
-- [Disable JavaScript With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript/disable)
diff --git a/src/site/content/en/lighthouse-pwa/without-javascript/without-javascript.png b/src/site/content/en/lighthouse-pwa/without-javascript/without-javascript.png
deleted file mode 100644
index 2b20485d8e7..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/without-javascript/without-javascript.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-pwa/works-offline/index.md b/src/site/content/en/lighthouse-pwa/works-offline/index.md
deleted file mode 100644
index 7fe4ced44ff..00000000000
--- a/src/site/content/en/lighthouse-pwa/works-offline/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-layout: post
-title: Current page does not respond with a 200 when offline
-description: |
-  Learn how to make your Progressive Web App work offline.
-web_lighthouse:
-  - works-offline
-date: 2019-05-04
-updated: 2020-06-04
-codelabs:
-  - codelab-service-workers
----
-
-The [Core Progressive Web App checklist](/pwa-checklist/#core) says that a PWA
-should provide a custom offline page. The [Optimial Progressive Web App checklist](/pwa-checklist/#optimal)
-says that a PWA should provide an offline experience where the PWA works the same offline as
-it does online (wherever network connectivity isn't strictly required).
-
-Learn more in the [What is network reliability and how do you measure it?](/network-connections-unreliable/) post.
-
-## How the Lighthouse offline audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-flags pages that don't respond with an
-[HTTP 200 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#Successful_responses)
-when offline:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="works-offline.png" alt="Lighthouse audit showing page doesn't respond with a 200 when offline">
-</figure>
-
-Lighthouse emulates an offline connection using the [Chrome Remote Debugging Protocol](https://github.com/ChromeDevTools/devtools-protocol)
-and then attempts to retrieve the page using [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest).
-
-{% include 'content/lighthouse-pwa/scoring.njk' %}
-
-## How to make your PWA work offline
-
-{% include 'content/reliable/workbox.njk' %}
-
-1. Add a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers) to your app.
-2. Use the service worker to cache files locally.
-3. When offline, use the service worker as a network proxy to return the
-   locally cached version of the file.
-
-{% Aside 'codelab' %}
-Learn how to add a service worker to your app
-with the [Working with service workers](/codelab-service-workers) codelab.
-{% endAside %}
-
-## Resources
-
-- [Source code for **Current page does not respond with a 200 when offline** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/works-offline.js)
-- [What is network reliability and how do you measure it?](/network-connections-unreliable/)
-- [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
diff --git a/src/site/content/en/lighthouse-pwa/works-offline/works-offline.png b/src/site/content/en/lighthouse-pwa/works-offline/works-offline.png
deleted file mode 100644
index ac18132e70b..00000000000
Binary files a/src/site/content/en/lighthouse-pwa/works-offline/works-offline.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/canonical/canonical.png b/src/site/content/en/lighthouse-seo/canonical/canonical.png
deleted file mode 100644
index fcd427101c0..00000000000
Binary files a/src/site/content/en/lighthouse-seo/canonical/canonical.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/canonical/index.md b/src/site/content/en/lighthouse-seo/canonical/index.md
deleted file mode 100644
index 99bec4fa22f..00000000000
--- a/src/site/content/en/lighthouse-seo/canonical/index.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-layout: post
-title: Document does not have a valid `rel=canonical`
-description: |
-  Learn about the "Document does not have a valid rel=canonical" Lighthouse
-  audit.
-date: 2019-05-02
-updated: 2019-08-20
-web_lighthouse:
-  - canonical
----
-
-When multiple pages have similar content, search engines consider them duplicate
-versions of the same page. For example, desktop and mobile versions of a product
-page are often considered duplicates.
-
-Search engines select one of the pages as the _canonical_, or primary, version
-and **crawl** that one more. Valid canonical links let you tell search engines
-which version of a page to crawl and display to users in search results.
-
-{% Aside 'key-term' %}
-_Crawling_ is how a search engine updates its index of content on the web.
-{% endAside %}
-
-Using canonical links has many advantages:
-- It helps search engines consolidate multiple URLs into a single, preferred URL. For example,
-  if other sites put query parameters on the ends of links to your page, search engines
-  consolidate those URLs to your preferred version.
-- It simplifies tracking methods. Tracking one URL is easier than tracking many.
-- It improves the page ranking of syndicated content by consolidating the syndicated links to
-  your original content back to your preferred URL.
-
-## How the Lighthouse canonical links audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags any page
-with an invalid canonical link:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="canonical.png" alt="Lighthouse audit showing document with invalid canonical link">
-</figure>
-
-A page fails this audit if any of the following conditions are met:
-
-- There is more than one canonical link.
-- The canonical link is not a valid URL.
-- The canonical link points to a page for a different region or language.
-- The canonical link points to a different domain.
-- The canonical link points to the site root. Note that this scenario may be
-  valid in some scenarios, such as for AMP or mobile page variations, but
-  Lighthouse nonetheless treats it as a failure.
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to add canonical links to your pages
-
-There are two options for specifying a canonical link.
-
-**Option 1:** Add a `<link rel=canonical>` element to the `<head>` of the page:
-
-```html/4
-<!doctype html>
-<html lang="en">
-  <head>
-    …
-    <link rel="canonical" href="https://example.com"/>
-    …
-  </head>
-  <body>
-    …
-  </body>
-</html>
-```
-
-**Option 2:** Add a `Link` header to the HTTP response:
-
-```html
-Link: https://example.com; rel=canonical
-```
-
-For a list of the pros and cons of each approach, see
-Google's [Consolidate duplicate URLs](https://support.google.com/webmasters/answer/139066)
-page.
-
-### General guidelines
-
-- Make sure that the canonical URL is valid.
-- Use secure [HTTPS](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) canonical URLs rather than HTTP whenever possible.
-- If you use [`hreflang` links](/hreflang) to serve different versions of a page
-  depending on a user's language or country, make sure that the canonical URL
-  points to the   proper page for that respective language or country.
-- Don't point the canonical URL to a different domain. Yahoo and Bing don't
-  allow this.
-- Don't point lower-level pages to the site's root page unless their content is
-  the same.
-
-### Google-specific guidelines
-
-- Use the [Google Search Console](https://search.google.com/search-console/index)
-  to see which URLs Google considers canonical or duplicative across your entire
-  site.
-- Don't use Google's URL removal tool for canonization. It removes *all* versions
-  of a URL from search.
-
-{% Aside 'note' %}
-Recommendations for other search engines are welcome.
-[Edit this page](https://github.com/google/WebFundamentals/tree/master/src/content/en/tools/lighthouse/audits/canonical.md).
-{% endAside %}
-
-## Resources
-
-- [Source code for **Document does not have a valid `rel=canonical`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/canonical.js)
-- [5 common mistakes with rel=canonical](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html)
-- [Consolidate duplicate URLs](https://support.google.com/webmasters/answer/139066)
-- [Block crawling of parameterized duplicate content](https://support.google.com/webmasters/answer/6080548)
-- [Google Search Console](https://search.google.com/search-console/index)
diff --git a/src/site/content/en/lighthouse-seo/font-size/font-size.png b/src/site/content/en/lighthouse-seo/font-size/font-size.png
deleted file mode 100644
index e998eb4169e..00000000000
Binary files a/src/site/content/en/lighthouse-seo/font-size/font-size.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/font-size/index.md b/src/site/content/en/lighthouse-seo/font-size/index.md
deleted file mode 100644
index 6ecd006edd9..00000000000
--- a/src/site/content/en/lighthouse-seo/font-size/index.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Document doesn't use legible font sizes
-description: |
-  Learn about the "Document doesn't use legible font sizes" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-20
-web_lighthouse:
-  - font-size
----
-
-Many search engines rank pages based on how mobile-friendly they are. Font
-sizes smaller than 12&nbsp;px are often difficult to read on mobile devices
-and may require users to zoom in to display text at a comfortable reading size.
-
-## How the Lighthouse font size audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-with font sizes that are too small to read easily on mobile:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="font-size.png" alt="Lighthouse audit showing page has illegible font sizes">
-</figure>
-
-Lighthouse flags pages on which 60% or more of the text has a font size smaller
-than 12&nbsp;px. When a page fails the audit, Lighthouse lists the results in a
-table with four columns:
-
-<div class="w-table-wrapper">
-  <table>
-    <tbody>
-      <tr>
-        <td><strong>Source</strong></td>
-        <td>The source location of the CSS ruleset that is causing the illegible text.</td>
-      </tr>
-      <tr>
-        <td><strong>Selector</strong></td>
-        <td>The selector of the ruleset.</td>
-      </tr>
-      <tr>
-        <td><strong>% of Page Text</strong></td>
-        <td>The percentage of text on the page that is affected by the ruleset.</td>
-      </tr>
-      <tr>
-        <td><strong>Font Size</strong></td>
-        <td>The computed size of the text.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to fix illegible fonts
-
-Check font sizes in your CSS. Aim to have a font size of at least 12&nbsp;px on
-at least 60% of the text on your page.
-
-## How to fix a missing viewport config
-
-If Lighthouse reports `Text is illegible because of a missing viewport config`,
-add a `<meta name="viewport" content="width=device-width, initial-scale=1">`
-tag to the `<head>` of your document.
-
-See the [Does not have a `<meta name="viewport">` tag with `width` or `initial-scale`](/viewport)
-post for more information.
-
-## Resources
-
-[Source code for **Document does not use legible font sizes** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/font-size.js)
diff --git a/src/site/content/en/lighthouse-seo/hreflang/hreflang.png b/src/site/content/en/lighthouse-seo/hreflang/hreflang.png
deleted file mode 100644
index 2a5ac4abd13..00000000000
Binary files a/src/site/content/en/lighthouse-seo/hreflang/hreflang.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/hreflang/index.md b/src/site/content/en/lighthouse-seo/hreflang/index.md
deleted file mode 100644
index 1c6cb98c7d0..00000000000
--- a/src/site/content/en/lighthouse-seo/hreflang/index.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: post
-title: Document doesn't have a valid `hreflang`
-description: |
-  Learn about the "Document doesn't have a valid hreflang" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - hreflang
----
-
-Many sites provide different versions of a page based on a user's language or
-region. `hreflang` links tell search engines the URLs for all the versions of
-a page so that they can display the correct version for each language or region.
-
-## How the Lighthouse `hreflang` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags
-incorrect `hreflang` links:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="hreflang.png" alt="Lighthouse audit showing incorrect hreflang links">
-</figure>
-
-Lighthouse checks for `hreflang` links
-in the page's `head` and in its [response headers](https://developer.mozilla.org/en-US/docs/Glossary/Response_header).
-
-Lighthouse then checks for valid language codes within the `hreflang`links.
-Lighthouse reports any `hreflang` links with invalid language codes.
-
-Lighthouse does not check region codes or your [sitemap]((https://support.google.com/webmasters/answer/156184)).
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to define an `hreflang` link for each version of a page
-
-Suppose that you have three versions of a page:
-
-- An English version at `https://example.com`
-- A Spanish version at `https://es.example.com`
-- A German version at `https://de.example.com`
-
-There are three ways to tell search engines that these pages are equivalent.
-Choose whichever method is easiest for your situation.
-
-**Option 1:** Add `hreflang` links to the `<head>` of each page:
-
-```html
-<link rel="alternate" hreflang="en" href="https://example.com" />
-<link rel="alternate" hreflang="es" href="https://es.example.com" />
-<link rel="alternate" hreflang="de" href="https://de.example.com" />
-```
-
-Each version of a page must link to all other versions,
-**including itself**. Otherwise, search engines may ignore the `hreflang` links
-or interpret them incorrectly.
-
-For pages that allow users to select their language, use the `x-default`
-keyword:
-
-```html
-<link rel="alternate" href="https://example.com" hreflang="x-default" />
-```
-
-**Option 2:** Add `Link` headers to your HTTP response:
-
-```html
-Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
-rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"
-```
-
-**Option 3:** Add language version information to your [sitemap]((https://support.google.com/webmasters/answer/156184)).
-
-```xml
-<url>
-<loc>https://example.com</loc>
-
-<xhtml:link rel="alternate" hreflang="es"
-href="https://es.example.com"/>
-
-<xhtml:link rel="alternate" hreflang="de"
-href="https://es.example.com"/>
-
-</url>
-```
-
-{% Aside %}
-For more information, see Google's
-[Tell Google about localized versions of your page](https://support.google.com/webmasters/answer/189077).
-{% endAside %}
-
-## Guidelines for `hreflang` values
-
-- The `hreflang` value must always specify a language code.
-- The language code must follow
-  [ISO 639-1 format](https://wikipedia.org/wiki/List_of_ISO_639-1_codes).
-- The `hreflang` value can also include an optional regional code.
-  For example, `es-mx` is for Spanish speakers in Mexico, while `es-cl` is for
-  Spanish speakers in Chile.
-- The region code must follow the
-  [ISO 3166-1 alpha-2 format](https://wikipedia.org/wiki/ISO_3166-1_alpha-2).
-
-## Resources
-
-- [Source code for **Document does not have a valid `hreflang`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/hreflang.js)
-- [Tell Google about localized versions of your page](https://support.google.com/webmasters/answer/189077)
-- [ISO 639-1 format](https://wikipedia.org/wiki/List_of_ISO_639-1_codes)
-- [ISO 3166-1 alpha-2 format](https://wikipedia.org/wiki/ISO_3166-1_alpha-2)
diff --git a/src/site/content/en/lighthouse-seo/http-status-code/http-status-code.png b/src/site/content/en/lighthouse-seo/http-status-code/http-status-code.png
deleted file mode 100644
index 58e70209009..00000000000
Binary files a/src/site/content/en/lighthouse-seo/http-status-code/http-status-code.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/http-status-code/index.md b/src/site/content/en/lighthouse-seo/http-status-code/index.md
deleted file mode 100644
index 341cc186355..00000000000
--- a/src/site/content/en/lighthouse-seo/http-status-code/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: post
-title: Page has unsuccessful HTTP status code
-description: |
-  Learn about the "Page has unsuccessful HTTP status code" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - http-status-code
----
-
-Servers provide a three-digit [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
-for each resource request they receive. Status codes in the 400s and 500s
-[indicate that there's an error](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#Client_error_responses)
-with the requested resource. If a search engine encounters a status code error
-when it's **crawling** a web page, it may not index that page properly.
-
-{% Aside 'key-term' %}
-_Crawling_ is how a search engine updates its index of content on the web.
-{% endAside %}
-
-## How the Lighthouse HTTP status code audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-that return an unsuccessful HTTP status code (in the 400s or 500s):
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="http-status-code.png" alt="Lighthouse audit showing search engines are struggling to index your page">
-</figure>
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to fix an unsuccessful HTTP status code
-
-First make sure you actually want search engines to crawl the page. Some pages,
-like your 404 page or any other page that shows an error, shouldn't be included
-in search results.
-
-To fix an HTTP status code error, refer to the documentation for your server or
-hosting provider. The server should return a status code in the 200s for all
-valid URLs or a status code in the 300s for a resource that has moved to
-another URL.
-
-{% Aside %}
-If you're
-[using Github Pages to host a single-page app](https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/),
-you'll likely need to serve valid content with a 404 status code.
-{% endAside %}
-
-{% Aside 'codelab' %}
-Single-page applications can make fixing HTTP status code errors a bit more
-complicated. Learn how to [fix sneaky 404s in an Express application](/codelab-fix-sneaky-404).
-{% endAside %}
-
-## Resources
-
-- [Source code for **Page has unsuccessful HTTP status code** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/http-status-code.js)
-- [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
-
-{% CodelabsCallout 'codelab-fix-sneaky-404', lang %}
diff --git a/src/site/content/en/lighthouse-seo/index.njk b/src/site/content/en/lighthouse-seo/index.njk
deleted file mode 100644
index c9dc5a281d1..00000000000
--- a/src/site/content/en/lighthouse-seo/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: lighthouse-seo
----
diff --git a/src/site/content/en/lighthouse-seo/is-crawable/headers.svg b/src/site/content/en/lighthouse-seo/is-crawable/headers.svg
deleted file mode 100644
index dd47bf7ffb7..00000000000
--- a/src/site/content/en/lighthouse-seo/is-crawable/headers.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" standalone="yes"?>
-
-<svg version="1.1" viewBox="0.0 0.0 1460.0 962.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l1460.0 0l0 962.0l-1460.0 0l0 -962.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l1460.0 0l0 962.0l-1460.0 0z" fill-rule="evenodd"></path><path fill="#000000" fill-opacity="0.0" d="m17.5392 16.0l1411.4346 0l0 930.0l-1411.4346 0z" fill-rule="evenodd"></path><g transform="matrix(0.9667359580052493 0.0 0.0 0.9667359580052493 17.5392 16.0)"><clipPath id="p.1"><path d="m0 -3.5527137E-15l1460.0 0l0 962.0l-1460.0 0z" clip-rule="evenodd"></path></clipPath><image clip-path="url(#p.1)" fill="#000" width="1460.0" height="962.0" x="0.0" y="0.0" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABbQAAAPCCAYAAACgCV4xAACAAElEQVR42uy9C3wV1b3o34fa+n5WbWu1VWtrH9Yq2mprqe2heGuv3nrrKfVBpD7KLdpeRU2pPVYoIsJBsYBKRFCMSlASJQQSAxICIeQBMTHSEtTguaY58X+IUuppjwdd/1l7z+y9Zva8Z/Yz39/n8/2I2TOzZ8+sWXvNd//mtz70IYIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIo/vgwAAAAAAAAAECeIQiCIJDHAAAAAAAAAACAZCcIAikNAAAAAAAAAACADCcIAlkNAAAAAAAAAABIb4IgENYAAAAAAAAAAAAIb4IgENcAAAAAAAAAAACIboIgkNcAAAAAAAAAAABIboJAXgMAAAAAAAAAACC5CYJAYAMAAAAAAAAAACC4CQKBDQAAAAAAAAAAAAhugkBiAwAAAAAAAAAAILcJgqCjAAAAAAAAAAAAQG4TBBIbgvERAAAAAAAAAIA8g6NBbhMEEhuxDAAAAAAAAAAAiHTkNkEgshHTAAAAAAAAAACIcMQ2QSCxkdUAAAAAAAAAAID0Rm4TBCIbaQ0AAAAAAAAAAMhuxDaByEZcAwAAAAAAAAAAjFjRTRCIbAQ2AAAAAAAAAAAguBHbBFHKIpsOLzt8FAAAAAAAAADAJ7gUJDdBILJHkMDmiw8AAAAAAAAAAMleCoKbIBDZiGkAAAAAAAAAAECEF5XcJogRJbKR1QAAAAAAAAAAgPQufsFNECUrs5HWAAAAAAAAAACA7C49uU0QiGzkNQAAAAAAAAAAILkR2wQyuxQldjF2dPsBAAAAAAAAAIAvkNzFI7cJomhE9kiV13ypAAAAAAAAAAAgwgtJciO2CWR2HkU2ohoAAAAAAAAAAEpRfJe62CaIESOykdYAAAAAAAAAADCSZDdim0BmF5nIRlwn2R8AAAAAAAAAYISC6M6u3EZqEyNGZBeTxEZGAwAAAAAAAAAgxUtFcpea3CaQ2UUns4tRXvNlAAAAAAAAAACA+M635EZqE8jsHInsQhfYI6mzPgAAAAAAAAAAICQI78IR3MUutglkdsmK7FIT13z5AQAAAAAAAAAUr1AvNLldzGKbQGQXhMguFImNmAYAAAAAAAAAgFyI8FKT24htYkTI7HxLbIR1OD4GAAAAAAAAAOAAwjs/grsQxDZSmyhImZ1vkZ1vgY1EBgAAAAAAAABArmdbdudLbheb2CaQ2QUpsvMlsJHTAAAAAAAAAABI8EKQ3LmW28UktglkduwyO5ciO9/yutA75Y8DAAAAAAAAABQ4I0V651Ju50tsI7WJopLZuRLZ+RDYiGcAAAAAAAAAAER5nKI7F3I7H2IbqU2UZFZ2tiV2IYhrvjgAAAAAAAAAAEae/M6V4M623C6GbG1ihArtUhHZuZbXuexUDwQAAAAAAAAAABPFJLyzKbcLWWwjtBHZBSOzsymysyWxC0Vc84UDAAAAAAAAAFAaEjwXgjtbcjtXYptMbWR2UWVlZ0NkZ1NiF6OoPggAAAAAAAAAoEQpRvFdCHI7W2KbbG0iL0K70LKy45TY2ZbXyGgAAAAAAAAAgJEtxbMtueOU2yMpW5tAZmc9KzvXIjuX8jpfHfTBAAAAAAAAAABFTjGK72wI7kIX20htoujrZedaZMcpsfMtrfmyAgAAAAAAAAAoXDGeTckdl9zOh9im/AhCu6BkdtxZ2XGI7Lgkdi7Eda476UMAAAAAAAAAAEqEYpHfcQvuOOR2XGI729naCG1kdl5kdhwiO45s7LgEdj6kNV9SAAAAAAAAAACFK8azJbmjyu04srbzna2N1EZoF1RWdjaysf1K6jhldNCO8tAscBgAAAAAAAAAAJjIhoPJljCPKsK9RHe2xXYxZmsTIyAzO1dZ2WFF9kF6R3G4xpEaR2kcrXCMB5/wwbEBOC4CxxcInwQAAAAAAAAAyDKF4kGiuJwgzsiPg/LyWKrzOkp3YYfrbuygLIntfGZrk6mN0M6bzI6Sle0msg/XO4TPapyucabGORrf0PimxnkunO/Bt3zy7YBcECPfAQAAAAAAAAAAE3G6l6Dex69P8vJSbk7rm7r7Okd3YafrbuxY3ZWFFdu5ytYuFKlNFLjMzle97LhFtiGzD9F/lTrlRz/60f+cN2/efWvWrGno7Ozc8fLLL/+tt7dXAAAAAAAAAAAAlCrSgUkXJp2YdGPSkUlXpjuzQz7kXm87W2Kb8iPI7IKW2dkqL+ImsmVtIFm36Pj999//aw8++OD9W7Zs6aYTAwAAAAAAAACAkYx0ZNKVSWeml1I59EPpOttxi+04srWR2gjtopfZH/OQ2UZm9vHf/va3v/vMM88sp7MCAAAAAAAAAABII52ZdGe61D7kQ+6TRnqJ7ZEgtYkRLrOzkZVtIGd+/cT+++9/JjIbAAAAAAAAAADAWWpLh6ZPNHmwxbHlMlsbqY3Mzuvkj7nMyv64hQP1ovanLliwYC4dEwAAAAAAAAAAgDPSoUmXpju1A218W7FnayO1EdpZkdlRRbYhs+UvScddfPHFl1AzGwAAAAAAAAAAwB3p0KRLk05Nd2sHOri3uMR2VKmN0EZm5z0zOy6ZLTlM43NyxlY6JAAAAAAAAAAAAG+kS5NOTXdrBxaB1P4oUntkiexcZ2bHVWLETWRLDtI4QuPLq1evfoHOCAAAAAAAAAAAwBvp0qRT093aQRbn5lds57qudr4ztRHbJVpmJFsi2yqzjXIjR2uc1dnZuYPOCAAAAAAAAAAAwBvp0qRT093awTbe7eNZFNuUH0Fol7zMPtCGg/SLTc7I+o2XX375b3RGAAAAAAAAAAAA3kiXJp2a7tYOtsnSzna2drFKbaLAhHauZHZUkX2QIrSP1Tg/mxf49jVrxI5Z94pXb7hOvHbZpeL1H3w/gfy3/Jt8TS6Trw7olS21Ykf9VPHqM+PEq0u/K15bfHYC+W/5N/maXCZf+/d8R6347YtTxSW148SoZy8Up1WNSiD/Lf8mX5PL8GUCAAAAAAAAAJA7pFPT3drBFucWt9jOt9RGaI/QSSDzLbMPsuEQ/aL7VlZEcUO92Hnzr8XrF35H7L30h2LfuJ+IfVf/TOy75qok8t/a3+Rrchm5rFwnZyK7rU7srL5WvLboq+Kv1WeJ9+vPE++vu0B80DQ6gfy3/Jt8TS4jl5Xr5Gr/VnbUiStXXydOWnaGOPWFb4ivbLpQnNk2RpzdeVEC+W/5N/maXEYuK9fhCwUAAAAAAAAAICdC+1u6WzvEwb0htRHbZGb7kNkH+pDZB+vIi+04jW/HfUHvePgh8drYMeIfP7lU7Lv2arHv+jKx7zoH5GvaMnJZuY5cN9sdzp/X3S9eXTJK/KP2XPFB84Xig03fEx9sdEC+pi0jl5XryHWzvX+zmueKL1SdI764/tvinG0/FOe+9CNxbpfONh3j/7XX5DJyWbmOXJcvldzS81KLuO9fpojy8lvEwuVrOSZFSnPdU+LWX98qbin/V9HyUg/tDwKfh3vLy7U29GvxaPWL9GVAH8oxYdzD5+fahJIaJ3B9ATgK7W/rbu0QxbcdFCJbm0xthHZOhXa+ZHaYrOyDLRyaDaG9Y9Ys8fbFY8W+q35qFtnXjrdHFdvaOnJduY1sdTayhMjby78m3l/7bbPIbnZAEdtyHbmu3Ea29k+WEDl59SjxtdZ/SovsbT8S52y92JaU3NaWlevIdeU28ldDqks8fNt4ccZ53xcXXXRRBueff77230vF7X+4X9StbymJL7CutgYx9vTTxekaE+5ZNuK/0Lu3NomJF31HfMfm/Ltx3nlniLsezV/5nGX33JA4h6efPlqsaeui/ZUgqx+drh2nUeLCy24Tm3t6Qi/jdR7GT32avgxGHMXahxbsd2lXk7heGzON0vqjB6rWlnRfEbbfLdW+Mu5zz7VZeO2mWMcJXF8AnkL7UBvvFke2dqFJbYR2AQvtkSCzD9EvtuPjFNp/fvihpMy+5koHkX21BRuxra0rt/HnLGRq/2nd3ISQTpQVUUX2hguTNFkw/q6KbW1duQ25rbj3b3bzAwkhfVbHWLPI7vRAEdtyXbkNua38CO2t4s4fn6sPnL256Po/iKaO7uIeeHU0iEv0z3MDEkgbiK4Ro32efyvjp1bmbb9X3PdrfT/GioZiEtqR21+PeGzmLeKyyy4TN9w+T2x9+eWQyxQ28se2OdddkDhOZ429Q7TbSBM/y5RyP0BfBiOxDy1UWtc+kfpufKi2uWT7Cud+t3C/d7LdV8Z97rk2+Y4tpnFdsV1fAIrQPl53bIcgtRHaI01mHxBSZvuplW0V2QaH6RfdBXFcxK+88EJissdEZnaGzL5a7Pu5A6rYNtbTtiG3JbcZVyfzStvqxGSPicxsq8xu8sAiteU25LbkNuPav1WdaxKTPSYys+1kdocDNlJbbkNuS24zH0J7qiK0r/3VZFGeeLzu1sR/b7zhGjEqQ2SOFs+82MYAtaQeqbxF/Fo/5wa33HRV6pyfcd7FpteSbeOGvD5aOFKFtrxm7xh7lofo9V6mGLIdL9eP08Q5VaGXQWgDIM1ywaqHfqMfz0sK7njG2Vc49buF/L2T7b4y7nPPtcl3bDGN64rt+gLQhfYFuls7zOLc3KS2H7HtR2ofgNRGZOeqbnY262X7yco+RMnOjlVoy0kd/37ZpekyI35ktpPU1rYhtyW3GVcnIyd1/PvKc9JlRiwy+/31Gi9aWO8gtbVtyG3Jbca1f3JSxy+8+K1kmRE7md3+Q3FOmwX5NzuprW1DbktuM59C+9wfTxVdNr/497zULpY9/AeL1L5cNG3tZoBawry0bW3qOE2c8ywypmCEdpdyzd5pm6XjZ5liynZctKol9DIIbQCkWS6fKCnEPjfOvsKp3y3k751s9pXZOPdcm3zHFtO4rtiuLwAboX2oi9Q+OAap/bEYpDb1tKmbXTQy+xAbmW0I7U9qfCfqBby9oV70j74gKabdZPYEC25SW/t/uU257cj711YnXn/ky8kJIN1k9joLblJb25bcptx21P2r7awTJz71leQEkF3OMnvUFjOOUrsrOVGk3Kbcdr6Ettcv/m0vrkjVSPOSnC91bhbPP/u0eOyxxxI8taxatLRvy3z/7q1i86ZNYpPGZpvXU1J9W3timU2bNttKd7/vF2TgJbe56tmq1DYfr6wSjc1bHJff1r45sY8tbZ2pxwOb19aJZcueETXadh6vfFY0b9nqTyYH+DzyfbZo77th40axtfvlxP83NdSJp598MrFu7dpwtc9lTbygA9SgxyzKun5u+Dq2NGvH3jiOT4jq5+tFW2dPwQ38X2pv0c53lXhC38+Va160aec9on3zJrFxY4O47rwz9Mz568Ra/frZtLnd5zLpmwTj2mvXJ51Ktrsq7Tg9L57S9qXGdj8y+5AXG1aKysrH9bb6jGhs2pyTjBw/y2xpbhRP2eybPA9jPdt38hp+Qm+TiXPT0GR7TDrbNrv2UQby/Dj3d/7fz39fJrdZnzoGkura+tQ5z25fFuzzBO3LstH25A+4a55brvdBlYlj1bbNuD7a9HO8RfQUQB8Ydb/9SbOg59D/4/Nyu08p262ubXRtl2Hbs3HNbdrcaern5LpPPrlcO8btlvFGm6h/vjr1mf30g3ZZy6k+YXO7x36FeT16X2F8TuP6Wf7cGv26C9o3+//eiau9B20HfvrKsP2JvyeFgrV307XZ0ZXRF8oxYXPbVtd2Y/TfxvgieYyfFW0Z7xn0msrspxOfLbH+E4l1re1oc1OjWK7vuzzPfr4/go2Do1HY4wSur7BP4gF4CO3v6G7tMMW3HRIgW7uYpTZCewSUGvFbMzuqzPbKylY5PC6hvWPWvWLvpT+0ZGd7yGw3qa1nacttym1H3r/6qeKv1Wels7PdZPba7yZxk9p6lrbcZhwTRMpJHE994Rvp7GwfMttNahtZ2nKbuZ4g0iq0vX753rDij0qW9pWiqas745f0p+b/zrHm8q33PW4axLWufjT12gXXPeAoCSqnXp5abl7NhtDv52fgldzmXY7bHHPV7zLqiJsfBfy92Ly5QZTpA8/Mfap0HMiG+TxqttSspZXiRn0/DC4PWec6SMZFmGMWdV03GdPd0SxmKiVTrPz2/qV5y/JQj+vN8550PN9nnFcmVm/calrPrdb5GefdKja1rfZcxvjRqkW59h5dvV6sePhOh3XGiVUb7G+YGpYvMv3IpXLW2Ani+fVtNj+UNCdu6pc+vdLxBzQ/GTley/T0tIk/3jbedt/O/fGt4oUN9ambJLv23bFxlZhguZbUY/L8hnbb61/ybHOn/blvrUuVcFLPRdD383uNum1TTuh2/5N1Ho81h+/LwnyeIH1ZmLbnxYvPLXa8fmYtXSmWzbvZcaK2fPSBUffbS2iHOYd+2LpxtfiFS7t8YGld4Dbl1p5v1dvvuT/+jaiumm+7/oQ7FibGH2uW3ufcD27s8J21LN93Suq6uSRjrNTT0yKuVMq4WduT7L9uTL0+QbTE2FfcPG+ZWLl0lsNxHCueWrMpULakn+8mta+L2t7DtAOvvjJKf+L1pFCY9p6+Ni8XKxtWOvbBv5tfZRo3q+39rLE3i8rF92aUDFTbWphjqX7e+VXPijuuPN+2Ha1o6khMOv5rh3l65PdHT0zj4NA/YBbBOCHIuG4kXl8AMQjtw228m99s7Tik9v5FLrUR2lkU2tmW2UFrZofJyjYysw/TL7ZPaYyOegG/dsO1Yt+4n5izs/3IbFuprWRpa9uU2466f68+M068X39eRna2SWYbItuKVWorWdpym3LbUffvf9aOE1/ZdKE5O9uHzHaU2nqWttym3HYhC205+LtdGeg8urrFtK25N/3IcyLBC667N/U+8qZuglLGZG3nSzbvab9MmPfzGnj19LSLe/WbNXfGipWKbLTWIvfi0tsWZAzIw34eVUza3qiHfPzPr9AOe8yiruskY2Qb/bXl5u+M887LqAU/furjeRfa3qR/NHqpc63jDUH6xqfecxk7oe3NKPFMk/mGY73px60k559/fsZ5q9u8VTk3m8UvlXMz4Z4ns1I/W7aB3wS4Hq3te3PDE77WW6r0f/WP3536+83znrfdZ/MyKyK9n9c12rJ6qa9tXqddBz0u8yqE6cvCfh6/fVmYtufF2qoHAlwP1j4nP31g1P12E9phz6FnuYoXnraZlyMT9frIVXu++LLLPJb5hdjs8COc3dMi6eN7unhibas5A3P9MtO21R/qDak1OnWNPZz6THH0FX545LkNvvtdP99NxvdO1PYeth249ZVR+xO3J4XCtne17Xjx20V1Adp7WmiHPZb+xw6jxSWOYjTJvcsaYxkHh5XZxTBO4PqifjZkTWiP1t3a4YpvOzSGbO1cTBQZh9RGaOdRaGczOzuuzOwDY5bZkiNiE9qydvbVP7PPzlbF9TVXmbGT2mqWtrZNue3IQnupFNMXpIW2kZ1tl5ltJ7R1qZ3K0jaEtrZNue2o+zfq2QvFmW1jMoW2VWa3/g8zVqltEdpym3LbhSy0Jc/OmWj7a3lj5T0mATbvyTqxtbtbdHdvFXVPzjMN6udUrU+tt+yeGxxv6hI3BA2PpV6/7I5HI7+f28Cr/vGppkHWHx5eLtq3vZR4/G5D/fLUjZw1K9TuJkJm2D63tiUx6JOP/i2cNsn0+oOWzxr282TeXIwScxYvFy1tbYmSEu3berIqtMMes6jrOsmYppp5SubHL8SqDa2prJUXTJmMo0Vda1cBCG2ZoVWT+Nwvd2v7WF1hysZRb1a7tm4V27a1iJtTGbQ3i5Zt28RW7e9b9Zr2fpZxuimVmU9tnenjf4kpi+Z25abJ/MPWXfOfSj2KurVNZsdfbptV29W2xvTZnPqcqPWz0zdAarvaJrq6ZBt4LCPbSW3f5h/QThcXXf8H0bSlQ/t7j+jY0iT+5fqLlGv8lynBJT/bWJtjpWZN3ZPKZBstVm7uivR+btdod3ezkv0p9+dGsVq7Doy+6NGZt5g+v7kObrS+LMrn8dOXhW177o+2rzW1dZmZ17CxLbXN+zIy+Mx9Tr76wKj77fyjYPhz6C6QzNuV/XPt+mS72tbeIipM7XJUKoMx7vYs+zl5jO3WlUyatlBs7kz2x6ur5pu+ex+q3eT7aRF17PKbh1a59lFX3vGY+Wm4mgeV7/u1sfYV6az0eYkSDt3a52zdsMqSRXylaO7q9t3v+v3eidLeo7QDp74yan/i9qRQ2PZuJ7RlVm3DxuRnte6X+sO3XXsfc1W5qF27QbTJchd6eYoox9LaT8vvh+fXy3V7xKbGFaZzaIjI5fUbkvuutdM/KO3UOgYIOw6OVtas8McJXF/Uz4asCu0jLM4tDql9YJYztQspSxuhXQTZ2bmS2Ye6yOzD9Yvt0xrfjXoBv/6D7ycFddxCW1tGbjuycF98tvigabSz0HaS2ZYsbavQltuU2466f6dVjRJnd15kngwyqtDWtiW3Kbdd6EJ7fdWc1ADk7sfrbbNin2hozfzlf9Uikxxr0wdyHU3PpP7+o5seyngEsXLqdanXl+iZDlHez3ngZc4eXbBiva34UAd8xv5YbyJkfbsmm5vBFfNuT2coXHmPkqke/vOYby5GJx7zzNUkL1GOWZR13WTM6kfTj1rOrcmUD2uWPiD+z69+pfEvYm37S3kX2ktsMhzV0j7WLGbzRK5O5Ti8l7HelN716GrbOuqX2+xrd5d643Njxvbl61N/9X/ErzTmLH7elI2qXie3PrQy9vrZsl39QtnnB3QZZPpcG1eablbV9r1+xX1KFticjOxj+RnuVD7DvJqmVM3J+anMslEZjxOrGZdyAl7jmIV/P+drVO2jZZmFNhvhWKuUmFH7oqh9WZTP46cvC9v23FAlgLxe7I7Xk8oPr2qfk88+MMp+u/WhUc6h37GDlCUtNvtbpfxgfq0+T0ec7TnziQ/1uk1mQ1u3vVIRXw/VNvt+WkT9u3oc5T7dYynTYBXQ6fOW/uE1rr4i2V88afuDw82KfJpj03e69c1e3ztR23uUduD441/E/sTtSaGw7d0qtM+/crptSa30uRor1uhtxNrexynZ/U77FvRYmvvpSzLK5bSve9rUj1dbvgvVY6bed0QZBwfPzi6ucQLXF/WzIStC+7u6WzvCkqV9WIASJLmQ2oWepY3ILrJJIIPWzA4js60i2+BIhDZCuxCEtlr3erz+i7r6+Kw100i9cUzfxI1NDYLlwC9dV85cdkTNglBv+KK8n9PAS92mdSDpJD+MR+CtNxH3rVjv8LiuOrhL71OUz9Nicz5yJbSjHLMo67rJGFU+TLjjIZsJkApnNninz61ORGSdrNXPNetnGbXdnHHerx1vDOsW/Tbj+Mu6mJebaq5uDDTp3oYNGzQ2OdbPjFI/e4tyM+2W0aMKg3T7Vm82R4uVDhn8bUrmpfqDQ3PtQ46PE6uZZ/dUNsbyfnbXqDw2qqB71KEkhLmGb7o/idaXRfs8fvqyKG3P6TtQlYtLVrf6yOJO9zn56gOj7rdzHxrtHLpNMqa2SzsxnJyosEU89dgT4gmNho0dMbfnsRnyLfnjzM2uGditq5e47neb49Mi6mdOZzyr1+2vfjdZzzpNyy05Jro9lYlp9P/x9RVO5d2smeHWslxefbPX90609h6tHTgKt4j9ib9z77+9230/OX1W9WlJY/t+2nvUY+nVT6t9jl07cGonUcbBgSeBLKpxAtcX9bMhy0L7SItz85OtHVf5kUKQ2ojtIpsIMorMjlIz++CIMvsI/WI7QeNCSo5QciSfQlu94TGyOtWsCfn44aIli0RFRYUJ+bf0xDbOj2yrZUfUR3YnKtkrUd7PaeClblN9r8ys1fQjg0bGgJ+bCIPHp45PZzh1dEX+POrNxQ0h62WHFdpRjlmUdd2EtrU2qRQFk27/vVj69AqxoaXNceJRt0mwZimPj9rjLAjcjqtTxom8afhlaiKzOx2zdOIS2m7tRs0YSp+nHvGApU7jhZeViZlzK8TKhhf1R1zDtbuo9bP9tiu1b7lBkYRqVtVv738w4zqsqFgs5imP3jqV+lAfJzY/Rpy+7qO+n73QVreZfi870uWe0tmWUfqyqJ/HX5uMt+2Z99n5OlZlnqn/zVMfGHW/nfrQqOfQ33F2b5dh1/PTnu2e+FCPwxobOaW2Szsxmf7RLzNrWRVUT6/bYhFa2vKbX0z9aG+Mp8zn+9nY+4pLb3vE9fvJ6cdUr77Z63snvvYevB04j2ei9SdO5z5se/c7Yau1bTkJ7QZboR3tWHr10+Zj/aTvdhJlHBx0nFZM4wSuL+pnQ9aE9oW6WztSydIOK7UPzkFN7TBSmwkiC0hmfziLMnu/PE4AaSey7WS25KjYhDaTQjIpZEw1tI1f8YNNMJd5Y6gOsNSyI+lyI6NMjy1GeT9HoW26ad0UKMPWfBNhX3vSLuPDmCgqyufJq9COcMyirOt1w1e3dJbrREUzF1b5rsVnnZnea6KlOI6r23WZDaFtV27Ebn/VR2u7O5rEjS7H5dKrJotVG9oCtzs/GTluy3jJJy8ZHGRCRLvjmy4VkM64tE7wFnYCRuv7eX0Gr5qTdlmAUfqyqJ/Hb18WZ9szH6+prsfr+VQmr/0PirnsA6Put5vQjnoNeB/nOwP1v/G1Z2+hbfe6W5/ilbXctXllqu6v0c9W6j8EyfMm+9OH9MxI+Qi//P9NSgbnYw2bY+8r3B7dVzMqrZ/Hq2/2FG6xtffg7cDtezdsf+J27sO29yBCu9WmXfoV2lGOZTChvcy/0I4wDg46TiumcQLXF/WzIetC+yjFtzlJ7cOynKntR2rvl0Wp/WGkdulnZ8eRmR0mK/sIJTtbXmyf0fhe1At4x6x7xd5Lfyj2XV9mn6X9c78yW8nO1rYltym3HXn/6qeKv1afJT7YpJcK2ZDOtjZJbVVsK5nZKZltCG25DW1bcpty21H377cvThWnvvANce5LP0qWHen0L7UzZHZnstyI3Jbcptx2IQttufx05TFnY9BkLl9wsbjhhhtc+dll14vnN7Q7/IqfzKJQy41YBzNR3s+P0P7jivW+JhD70U3zEzeg5gGue7Zu+vHmdG3BKJ+nUIR20GMWZV0/N3xdW5rEkgX3irLLLrYdRMu6lO0+6i/KQfUTc2eKO+/8g5g+fboNU8XU6Q/7ruVYiEL75nkrfB3/K5VJWdMTbS4Tv799UsYESmnxEewR03QNdOeMHLdl/Larrtb0j2hON6r/fNXPXa/Dq676Z3HLzMdMWf/qEwLG48RqJp3bhHVB38/rZltOHOXWLtPX0KhU9miUvizq5wnSl8XV9sz7PMG2zq3xHfXoHVe6Cu1c9oFR99uv0A5zDXgdZ1niyO9EkvG25/iFtsxavtJFFKu1ji+47oFEORGjTrAxh8DaVO3ay0VTd7d4JiW7Lnec7C9KX+GWvWktF6F+R3r1zUGEW5T2HqYdeEvW4P2J27kP296DCO2WGIR2mGOZC6EddBwcdJxWTOMEri/qZ0PWhPb3dLd2lJKlfUQM2dpxSW2ytEeg0C4WmX1ICJktOTouob29oV70j74gKaTVLG0vqW0nsw2hrf2/3KbcduT9a6sTrz/yZfFB84UZWdq2UttNZhv1s7VtyW3KbUfdv9rOOnHiU18R52z7oTlL20Nq28lsIztbbktuU267kIV2qymDIi071IyiX/7xuVD7opYyeah2s+hQsoGmPm5uV1Hez2ngpW7TrRb1tubqVMaVfcmR9CRO7nVE0zcbUT5PPoV2lGMWZV2/N3ypAfy2drFhbZ2Y87uJpgG0U53AXNXQjiq045oU0lor1akuo3v76hHtbS2i+qlHxGXKxERnjf19gGzMaPWzg7QrdTnjc5nr+V8i1oYonWKuf3u7tn/dymPEZvEY9f3s2pJ5m24lQ3rEI7eN8xCawfqyqJ8nfF8Wvu2ZH7WWTwJt8zEBrn3fncs+MOp+O/WhcVwD3sfZrV1lXk/xtef4hbY6AZ7TEyXpbMxfiPUbnk8JnZQMUjIzl6xuTPUXF944LyXB4uwr7CaxsxN4aua/v77Z/XsnSnuP2g78fO8G7U/czn3Y9p4LoR31WGZLaMdxH+GXYhoncH1RPxuyLrSPVnxbEKl9SIlJbYR2noV2Icvsg0NmZh+pcJR+sZ2o8f04LuKdN/9a/F3W0jZladtIbTusMlvbhtyW3GZcnczO6mvF31eek87SdpLaKk4yW9uG3JbcZlz7d+Xq68QXXvxWOkvbQWqbsJPZena23JbcZq47c+vA0i1jtau1QZncwzLh0Ob0bOBuM4+/3N0ltm7dKrbaPMau/ho/fuojolKta2kZXEV5P6eBl7pNdQJK5/px5vqWasaGkXllV7tutDI7vFGnLsrnyafQjnLMoqzresOnbaerq0t0dTtNiHN3anu/vm9FUQttp0waP8u0WH6canIoLZEu+2M+/t3yGGvYZWbKGpETbNq5n/rZV/qon+22jHqz5pa5+vBtl9peN4+lslk9MrfkdahhJ4bSdR9Hi2fra1zPd5T3c2pL6jatE0ul+6J0rVxrXe8ofVmUz+O75EjMbW+58gi1kwjYsOKPyvWi3MjnsQ+Mst9ufWgc14B9XzI+XXd2UZ2jUL3z17eK8vJbxKPVL8bcnuMX2n6eKEmvP1rcfvsNGX2TKpOuuumW1Oe4p7IhK31FYiK7zfb7Wp/6PJa6vz76Zq/vnajtPUo7cC2JELI/8Tr3Ydt7toV21GOZLaEdx32EX4ptnMD1Rf1syIrQ/r7u1o5WsrStYjtIpvbBRS61EdpZEtq5LDUStG523GVGjnCR2ZJj4hTar7zwgnj9B98X+676aVJK+5XaVpkt0bYhtyW3GVcn80rbavHa4rPF+2u/nZTSNlLbEVVmy9rZ2jbktuQ249q/VZ1rxGlVo8TXWv8pkWFtK7XtsMpsbV25Dbktuc18Cm2jnqPdr+lrli+0PCY2NmMCHFWC3D7vGQ8hbl+bVb0BSE0gomQpxfF+TgMv6zZvmlmZ8b4tq5cqg+D0TWFmTb3R4ukXWjMyMtRJa9SJmaJ8nnwK7TiPWZB1/T0uP9o2a1EV2vcuayxKoX2nOmlfh9ekT/bLWOtVXnrbgoyMn42rlijHf1Tq+Kvr2k0wJssFXadn3lhvrDaurhI333CDmHT7H8TaLdsCZzt6LSOvM3XCphvueSKjXa1bscD02Z1KD0nR32CTWffMvNtdRYWacalOTvpMU4fnDwtB3s+5fNISZZuXiFUbt2Yco7mp7OrTxWVKKZmofVmUz+OnL8tG29vW/KzSzk8Xdz68wtRmXnxusel1txIduewDo+y3mzSLcg57XmoTj9z7L+Laq68VDyxdadofdYI1+VmeebEtY6yhCiTjx5T42nO8QttvjVf1EX+7fTSX70kfn+qWbVnpK4z9tQqvjqYViqyS2eItgfpmr++dqO09SjvwU2ouSH/i59yHbe+5ENpRjmW2hHZc9xF+M6SLaZzA9UX9bMiq0D5G8W1HemRrZ6P8SJz1tAuh9AhCu0hKjRzoQ2hHldlHKRytX2wnafxTXBfynx9+SLx98Vix75orbaS2LrZNjM+U2dq6chtyW3F3NH9aN1e8vfxr4oOm0ZlSe4ODyLbIbLmu3IbcVtz7N7v5AXHy6lHirI6x9lLbCUVmy3XlNuS28tGZWwXgH2bNErN0/nXuXDHjX6aIi5VHwowB1xKb2qTqDNuSy2+6W9Q1NIgXXnhBPL14rmng5pTho0465DVhS9j3cxtsWyXfmKvKRc2aBtHQsEY8ev9vLQLwEc/J3e6a/5hYo+1T3cplYoJlUhTroDXs58mn0I5yzKKu63TD9+gdl5kEziNPPS82t7WL1o3rxSP3TjG1Y3Wi0eIR2l3ij4pMvPCy/yuWP/ec1laaAy1jNwHTuT/+pXhmZZ3t8b/wxgfT9ViVic4S2aG3zRL165tFe3ubeMHS1tXz1t3VbHrKQ24zzvrZButNWalGu1qjfa468eC0SRmfWz0P1htd2S8+9MQKsWnTJrF2TY2466bLHQWhneg63aEebRzv5/bjnHmbo8ScxU8n+pLMvki7Dlo6Y+vLonweP31Zttreo0p2WvJ8Xa7Xab3Qpt6nmwDOXR8Ydb+d+tAo5zCddZhE7WPldXGPMgeHZMaCSrF+wwZR99wyMcm0z2PFmtaumNtzvEJbtik/NV7t+gNrVmerZewj6y5bMzDj6ivS7zFOVNasShzHpxbONl1XQetnh/3eCdLeo7QDtyfzwvYn3hnr4dp7LoR2lGOZLaEd132EX4ppnMD1hXyFrAjtf9Ld2jFKlrZVbEeV2k5C+8APlW7pEYR2jEK7lGS25BMan9UYE+fFvGPWrKTUlpnaRvmRDLFtI7KvT2Zmy3XlNrLV2chJHKWQTmRqb/qeWWzbsTFdZkSuI9eNYyJItwkipZBOZGq/9COz2LbBENlyWbmOXDfXE0G6D2DckcJrteVXe5Wah+/03Ib8Fb7lpR6HrIm21IRJ3pNdhXs/9ZE5u8H2c49O99zm+VfeZcpuCjrr+ayla2L7POoNQNxCe6zP7YY5ZlHXfXbORNuSNC+1rzWJKyd+fd/yvFxzXu3Pel3a3eBYb8SS7eJW03Jey9gJbSfOGnujaN5qzoSqfug3Pta9xHSTrrapcDVa/Wbt9IjKmTe57tt3LrrI8bqRWWBlGT/kZWItCeBc6iFzHoA43s+tLcnr4Dof26xQHnOPqy8L+3n89mVxtz3jcy+8Y4Lj9i697T6x+L5bHQVFPvrAqPvt1IdGOYfpbdrPU9C9tUncaPlBxI4FFuEbpT2bshptxJLbcXAT2kFqvKqlPOzeRxU41pJusfQVlvbvzuWmaydItqSf76Yo7T1sO3DrK8P0J37Pfdj27tUm3YS2V3uPeiy9+mmvMY51fGNtT1HvI4LMvVBM4wSuL4DYhfYY3a19QvFtpS61EdojVGhHmQTSr8y2KzFytMIx2RLaCWn88EPitbFjxD9+cmkyE1sV21auT04AKZeV6+zIQmZ2Rib5uvvFq0tGiX/UnpucKFIV21Y2JSeAlMvKdeS62d6/Wc1zxReqzhFfXP/t5ESRhtjW5XZKYusiWy4jl5XryHXz2ZnLgeV0SwbJ6TaPwI27/jaxbOVa2xpoGZOo1C8XV9oO4MeK2QurXOt0mzOB/AnaoO+n1oJ0qqHc0rhCXG+b4TZazFlck1GaxSyBLhcNG9eL+2+/wWbgOU4sr2+J9fO0NT2Tylr5jUO92zCoj0n72W7QYxZ1XVPGmOXRy55tm8XD906xPG5vZLVMElWrm/J2zflpf+p1ef6V99gIhB6xcul9pmylzBtD92XUm+Gb5z0j1q163DRBj8GkaQsda1mur3vK4byNElPufURs3taTsd+LlZrcC1asC5SREzRrp+Gph20f6b1r/lNi69b0tm6et8L2x7WKmbfY9onjrp8iate3+j7PiZs1jxqQYd7Pqy3JLLKllqys1OPC2jYbNnZ4PLUTvi8L83mC9GVxtj1TX9TwnPj97ZPE1VdfrXGtuKV8unhm9foMyWSbyZvjPjDqfrv1oWHPYWdztTKp4G8cJfzS+39v2z/Ldrl6Q5tjmYDg7blLEf7piaxNE32nBJp99nFrwxO2ciVIjVe1Zq99n27OtneTOGHOi/w+N37ovevR1aJtw/OWDOHT9RreM0XLtp4I/a6f76Zo7T1MO/DqK4P2J0HOfZj27nVtWktEPNaw2Xd7j3osvfppKfHd2ovcx/v0TGPrD4tx3UcEoZjGCVxfAFkT2sdY3NtRPupqB6mpHaaeNkKbUiNFI7OP8CGzJcdqfE7jB9m4qF9pqE9M6vj6hd8Rey/9odg37idi39U/E/uuuSqJ/Lf2N/maXEYuK9fJVafzSltdYlLH1xZ9Vfy1+izxfv154v11FyTLkWjIf8u/ydfkMnJZuU6u9m9lR11iUseTlp0hTn3hG+Irmy4UZ7aNEWd3XpRA/lv+Tb4ml5HLynVK+Yuis22z2LS5XbRr/93c1ulLhhfa+3W2y222JbYp/+s0CHR6zPPlrq2iLbV+e6B9yvXxi+08+Dxmca/rNHlQ2+bNoq29Pfnfzm0ld511d3VrbaNHdHV3B1rG6bHhzra2xPHavGmTaN/2kr8JljrbxGZ53trlf9tDnbc46mc7Paa7RfssiTbQFrxNyWt4s77+Zq0NRZmIKl/v93K3sk35X5frIO6+LNvHL4625zVxVdDMx1z2gXHud67Poaldattt73wp9vacvWSA/Nd4jeO8bGtv078fnY9j2GxJP99NUa6VbLQDP/1J2HMftr3npC0VwDWVz3FwsY0TuL4AYhHaP9Dd2rGKb3OT2keUiNRGbOdAZmdLaMdZaiTIJJBhM7OPUZC/HB2XTaFtsH3NGrFj1r3i1RuuE69ddmliskeJ/Lf8m3xNLpOvzueVLbWJEiKvPjNOvLr0u4nJHiXy3/Jv8jW5TL727/mO2kQJkUtqx4lRz16YmOxRIv8t/yZfk8vwRVJa+K1bCFAoZKv2eljiqp8N9GVBUesXn3/ldNsbaDlBqlt9Y/Z7ZDGSarzS747ccw/A9QUjQGgfp2RpW8V22EztbE4S6Vdq51tof3gky+xclRo5IGR29kEB6maHzcxWRfYn9F+O5MV2ssZYOiEAJBBA6QjtntRkR84ZOX6WAfqyEDfQW5tME+ZddP0U8czKNWJzW5vYsL5e/HHa/zU9Jn1rjKWdRuJ+lwLt65eNkBqv9Lsj99wDcH1BSQvtsbpbO053bZ+wiO2omdpe9bQPCpmlfUCRlB4pWqmdK6Gd7ezsOEqNRM3MVmW25HiENkDhSqDbU/X+Rod6rBsgl2yqfSh103D51Mo8Z+Q0peq7TpzzbOhlgL4sLE01D/qaMO+C6+6OtX7rSN3vYmdlaqKz0s5apt8duecegOsLRojQPl7xbX6ldtBM7XyVHomSpY3QLqDs7P19CO24So3Y1c2OmpltZGfLi+0UjYvohAAKj8aaSvHggw+KhyqWIw6g8EVFR7N4VGuvss0+t3Zz3rMAt27dqtHlUiPTzzJAXxaetg2rxe9uuspWCJ819nKxaPmagmx7xbrfxS16tyb6o66uUs9Ypt8duecegOsLSlpoX6S7teOVLO24MrXjqKftVnpk/xikNmVHimgyyCjZ2VHrZsclsyWf1DhV43/QCQEAAABk54ZanQxrc3sn+w0AAABQOkL7f+hu7ZOKb8uG1I6rnnax1tJGaGchOztqqZGgMvvwGGT28QhtAAAAAAAAAACAWIT28TFI7cMjSO18lR5BaJeA0I671Ei2ZLbkUxqf1/ghnRAAAAAAAAAAAEAgof1D3a19SvFtuZDa2S49gtAuUqGdz1IjfupmR5XZ8pejT+sX3cV0QgAAAAAAAAAAAIGE9sW6W/u0kqUdp9TOVj3tOLO0Edo5FtpRa2cfEGN2dpC62VaZfVQImf0p/WI7DaENAAAAAAAAAAAQSmifpju2T4WQ2keFkNp2pUeiZmkfkOVa2gjtPE0Gmc3sbDeZfZjDJJBRZbbkBI0vaPyITggAAAAAAAAAACCQ0P6R7tZOUHxbVKltnSTysCxJ7TBZ2vmaHHJECO2PfCj7tbMPiCi0s1lqxE1mq9nZCG0AAAAAAAAAAIDoQlvN0vaS2tkuPRJGaEfN0v5IFqU2QjuE0I47OztfMvtTisyWfEbjixr/c+/evQIAAAAAAAAAAAD8IZ2a7tY+o/g2v5nahSi1o2RpI7RzILSjlBsJUzvb70SQVpl9eIhJIL0ys43s7BM1Tte4hE4IAAAAAAAAAAAgkNC+RHdrJypZ2n4ytYNMEnm4j3raXhNExllLOx9lRxDaLkJ7vw/lp3Z22OzsKDL7MwhtAAAAAAAAAACAWIT2Z2KQ2nFkaeeilvZ+CO3iEtpxyWw/2dlBZfaxLjJbrZttCO2TNL6kcSmdEAAAAAAAAAAAQCChfanu1k5ShPYJNqVHrFL72Biltt8s7ShSG6GN0HaV2U5CO2ipES+ZfaIitP8XnRAAAAAAAAAAAEAgof2/FKF9ok+pHbT0iJPQPiyHWdoI7QKtnR1VZgepnX1IwOzssHWz3WS25LMaX0ZoAwAAAAAAAAAAhBLaX9Yd24k+pPbxMUttq9D2ktpx1tKOOkFkSYntD0cgn0LbKzs7rlIjR/ssNeIks9Xs7M9pfEXjx3RCAAAAAAAAAAAAgYT2j3W39jlLlrZfqW1XeuToLJQeyWWWdjaFdkGK7Q8XkdD+WEihfUhIoW2Xne1VN9s6CaQqsz+L0AYAAAAAAAAAAIhFaH/WQWp7TRKpSm27LO0jY8jSPjBElnYhC+0Pl4rMjlto57p2dhSZfVxAmW0I7ZM1vqpxGZ0QAAAAAAAAAABAIKF9me7WTlaEdhCpfVyWpHauamnnU2h/eKQL7WxkZ/uR2YdaZLaf2tlhS41YZbb85egUjTM0/jedEAAAAAAAAAAAQCCh/b91t3aKJUvbzySRYUqPWIX24Rah7VdqZztLG6Edo9AOW26kEGpnB83OtpsE0pDZCO2Y6OrqEr/97W/FFVdcESt33HGH6Onpydp+d3Z2JuAcAgAAAAAAAAAeIVahrZYecZLaQbK0C6mWdpxlRxDaPoT2R/NUbsRv7ewjXLKzj7HJzj7OITvbq262IbPloxCnanxN4yd0QuHIhsxWpTZfRAAAAAAAAACA0C5Yof0T3a2dqrs2O6ntVnrkeBup/QkPqX2ERWrHXUs7rrIjH0VoF47QjqvcSNDa2UFLjXzGpdTIyRahfTmdUDgM+Vws2+WLCAAAAAAAAADwCLEJ7cstQvtkl9Ijn4mh9EictbTjKjuC0M6D0C6EciNHBKydbZXZfkuNfE4R2vJRiM9rnInQRmgDAAAAAAAAAOARQgntM3XHdooitD8XovTI8Q5Z2kdHyNIu5LIjCO2QQnu/gEK70LKzP+lSauREl1Ijp+i/HMmL7esa/xz3Bf2Xv/xFPP3002Ly5MmxleD41a9+JRYtWiTefvtthDZfRAAAAAAAAAAwQoX2O++8IxoaGhKlYCXy3/JveRDa/6y7tc/rru0Ul9IjJ7qUHvlkEWVp7xfT5JAjXmj7mTkzTHb2/j6zsz8ew2SQR3pkZztNBBmm1IghtE/LltB+6qmnslZb+tFHH0VoI7QBEgwPDYkhjeFhjsWIYs9w4rwnzv0ejgcAAAAAwEgT2lJgW32R/FsehfZpFqEdtvSI0wSRR7tMEBllcsiP+8zS3j9klrYfZzsihfZHYhTaUSeDDJKdfZjP7OxjHCaC9MrOPsml1IiRnf0FjbM0fhr3BW1kZmdD9N50000I7VL5ItrTL6rmzxAz5swWs30wY+YSsV0Xlx01Fdr/TxNLGvoYXIww+jvXiYqZ5aLM+oPXhIli2vwq0bFzaIQciwFRLa+fqTNE/Y4R8Jn3DIhW7bovn1SWMXCdeMs0UdnQIYa5PkqP3X1i0e/vFNPvni7uvHuZeMNj+cFX6sR0bfk7f79I9O4eucetr2GRdgy047CgUewuievfe7wwY+YMUfFkrejelcP+cHC7tl/TxMQJZQkmz6kVQ1y34MRwn1iitdNEm5XtdVW3v/V2tYoFynqMfQEAoZ1EZmVb7wvk3/IgtH+qu7UvOGRpO0ltryzt4yxC20+W9mExZ2nHMTnkR7IstRHaeZwMMkh2dpCJIJ1KjViF9jhEL0I7Lwx1iMmBMvQnio4hue6QqJyki6zFHSP+xmjECM29A6JqZpmvtjJt+QhoF8r1s6SzxM//rmZR7qePmFQh+sjYLi3e2ibGn322OFtn/OPbXJff9sh4fdnxYstb0d57958bxfTbi1OO9z6uH4efLhWDJdbf+aF8cXP2f+Da0ydmZPywugShDQHa8TRf31kdi80lHEf02BcAENqFKbTH2Qhtr9IjYSaIjCtLO9eTQyK0QwrtjwaYEDJMuZEDQwhtt9rZR8WUnf1Zl1Ijn9cfhfiixtkIbYR2/oRsR1pSTZgspk2d5kr5lAV6hvaQqLolud7kkTyoH0lCc++AWHKLebAyeWaFqG1qFR2dHaJ5VaWYNskitWu2l/gPGunrp6TP//B2MdskjMrFkpp60dzSITpa1oklcyxzNcys54ajpDK0t4lJitA+++wxom6nm8idlBLa26IK7c6lscnx3AvtSSmhvbvE+rvM8cIMMW1K5pwtM7KcxTrcW5V6rzJtfFLbUCsqlzfzpAj4a8c6FS0DHuv1mb8DR/rYt4jYs2ePWLBggaivrw/1OgBCu6hKjozT3doXddf2eZfSI5+NKUv7KB+1tIMI7QNjKjvy0ZCTQyK0Awjt/bIotMNMBnmUx2SQYbKznUqNnKYI7VEaP0P0IrTzPbCf/GR3gHUR2iNKaGZkJ00W6xwy0rc3VijLlYnmAc5/sTPUnj6nZVOrxIDdMr31YqJy3tft4oajdIW2lLSLHLOOYxXaPUtj2xZCOwfjheEBUb9Q/a5YIPqy2Td1V6b6nNqdXKsQTmhfMbXW9UeQoc4lGbIGoV0cSFn9s5/9LHHO7KS11+sACG1vCmhSyJ/pbu2Lim/zKj0SNEv7Ex5Z2mEnh4xbaO+H0M690I5aP/vAGMuNBMnOPsGjdrYhs61CWz4KcTpC2x9dXV22j7M4cccdd4ienh6EdpAb1ECDc39Ce2hwQPTt7BN9O/pE/+Cwz0eIh7TltyfW6duVmTUzPNiffE3b7sCQj20ODYl+fR/6AtT1HB4aSL1P/8BQpAztYWUf5LaKLnvM9Ihumaj3EAfNc8q8s7SH1fMyIIYClKkYGlDbgFcbH1aW7xdDftrMnmExsKtPWSeC0Nbac3pbA0U5gWL3k2lBVdHu3M63L5+WWm6J03J+j21spN9vyO4aN67LXf7OTdA+reivfTuhfVHyv+UresML7bcGxRvyuPxZ443BgsrQ3j04mDzH2r698eZgsHXffCOx3uDuEhfaruOFAbFgQvrHz46hOPtF8/U81G6IxnL794mj3zG+q3YOOHwf9YntvQ7fR9r7qt9zw37ey9jPXf1iYHAo2D76fR/L96jjGMdlnaHhEhHaE5Ll9FoHndeptym15jr2DXOc4h77Rhhjpca/A8NF329JSS3Pl5O09nodAKFdPChC+3TdtVmF9ikeE0SeYJHaUbK0sy20o2RpI7TzILQLMTvbrtTIiTYy+2QHmf1F/WI7R+MKhHbw2kx+pDZCOz9Ce6i7XsywmTiu7JbZonXnsO12ypd3i/7OqsyJBrUbjepu7WZrsEMsuMVmm1OWiO12N6eD3WLJzMxHoOWj0lUtfQ5ZXtNEh3YzWTV1ok1t4BmidZd1eRtuqUyJs76mKjF5gt1yZWL28taikVt9q2YEqxu5M52tm7H8QIdYMnWyfd3t+bWif49VppYnX59Srd3ItWrtKnO9iTOrMtbbO6Sdxzn275PZDo0bSpldOMOmDWrvMaVCaxvDAYS2tq3FM4r+3Fuz82c3OT+aPbxznZg2aaJ2/CaKqu6hSMdWvcYqbX8sGBCVU8r0bNGOVD3d2fr1VrtjWAy0V5myxg3hNay1owVTymzPzYzF62zr7/rv00rr2rcK7fG3T1fqaY8TjW8GFNqDvWLR78ebs70Tkny8WNbcZ7ONTGQN7w33Gdsoz6itnZbg2rKPbMnYv8a7x+mvTzKtO9hTJ8p/OsbmPceJuSu2ZEhpYzuTnu4Ve9/cIu78aXqdB9sGXYX2G+sXmd6j5pXdJSS01T7DKrQD9Iuu1/PVYrzDd3CqPwjTp2vfXWW6IO8eHhYdy2eYanPvUscKA32ieuZEm++j6kQf0lGzwOZ9y0RFo82PvNr3YoXduEMv8VTbPWB7Hqq7+0TrkzNs5zupau+3/z5vqRbltn3TZLGk0f4H6O6GJbb10yfPqRJ9w8UrtCdOSU9uPW1Vn+cP+pNnzk4dO7trwP9xyuLYN+AYq69htj521dqtnPhVGTePv/XG1L44PW2njg8ru4eQ2gAI7XwK7St0t3a67tq+4KP0yEmKx3MqPVKsWdoI7REqtI9xmQzST3a210SQqtD+kn7RXVnqpUHi+jxBQWjnvuRIX1OFx3mRGb7DGduJhCKRkzel65QbX3tmK7U9XQW1iRmJyYOG3ZbXJ6RK3SS4UByPrA6L6ilXhHus23LjNLyj3lYsWI9x95CN0PZCfWTYWvP5Cvub945BS53oCVd4tt1q9YbNSWjv6RMVk9y3VTZnXdH0v/2Ns82ipKUvmJANcWzVa9I2+12VDMZ1pPxt2pwZthPaDnVXB+5PgvVppXTtZwptKW/fWD83LWOvWZYhax2F9s5GMc5BUhtMX92nb2O84zJjFmwRvU+nhffSTrMMTk9KKUX5g5bSKH3iTuO122tS+963errrfiX4fY3yWXeLpdck/z7u9ukZJVkWafvkJLT7Guaal21+o8QytNXvdUVoB+0XXa9nl20s7Ajf73RWpvZ7tvUHcZPQjobpR7qBVh+TbSpPRtmVzHBA/hBgEq413sfR9IOAfOJq/kT3dSYsKK6JgJXjN235OlE11UhaWGJbTquvYUZ6/NPZKqY5XAPBjlN2xr5hxlgdxhNYk6aJGZZ9Gj/tzvQkr8u3217rS1LX9OyslheKypo1a1yltdfrAAjtohDaV+pu7UsOQtvPBJFeWdrH+sjSRmgjtAMLbavM9hLadpNBHu1SbiRM7Wy3UiNGdvaXNc5FaCO0CyJTZU616O7tFt3dDnR2iO07h9yF9sA6ZTBdJpY0diQejRwa2C5q55ebBvb9DoN6maXVn1inW1RYB/yTZovWHQNieHhY9HXWKjeBahZYv1igZqQsXif6BofE0GC/6Fi1wHSDuG7AQWhPmCHWdcpHRbX92NkhZis34UbJhb7uDtGh1Iuesbw5cYw6uvssg/wyUbGqQ/Qb+9CwRDlGMgus0K8/9RxFuWHpEzNM2UUVokM7l0NDQ9q5rBfTVPEwJS2nrUK7bGql6Nipt4H2auWHi/Qjw2q9y+T79Cfep3+HzFwqU27cu5VHitW2Vi5q2/sS6wzsNK8jM/O273EX2mrJlbKpS5L7q21ru7a/qohY0NRfHH3woJ1AKRPT5lSI6gat3WvH101whzm2nkLbTq7Zip6JYvbiKlHb2CoG3ja3wYlzqkT3riGtLWW2wdRkdiH6tNK59m0ytB/pTcjcZdekheydq/t8CO03xFxF4pY/0qj1y7vF7sE3xJbn5pomnExkfb8zKHo7e0VjSk6PE8vWbxPb2raI3p2DYu/OOocs7MGUaDbW26D+cPXnmrQ8b9BFsrKthLRfUCP63hwUu98aFNtWLxJj1P1OlVkxH4PU63c/KGrW9yYEtiq0DaneaxLnY0RNz2BRikC3H8D7W5aYrmmjnQfuF12u5xXP1ogNHd2iuWZ2+oe2Ju37t71DdOvjlKj9TnrcMU0sWV4t1rVsz3xdjkl6+xN9SHdj5g9fs2taE/3F8GCfqFWeGJq4sMP2+2Ly/GqxXe+T5H5WKvvpfFwmpvol+T5q1rj6Pnt31FrGWs2JvkmeA3PfdEVKnvc3KWOmCdNEfWJcJL9LW8UCZXxWNr+5KNuxlLT9LenPWL1jOGP8U2n055Mqtc++3fZHneDHKRtj33jGWIl2M3W2qKqpFa0vbVYmgq3IFP670t+P1h9CCpG6ujpXae31OgBCuyiE9rm6Y3PL0j7FIUs7aC3tY2yytO0mh/QS2nZSG6Fd5EI7ana2k9COUm7Eb+1sp4kg3YT2VfkS2nfddZeYN2+eeOGFF8SuXbsKXmjnSkiPRKEdKPPJQWirGSpVNo8eqqULkpLKPKifYX3kc6eabTI7Iwuor2ZaxqB+QLmxmFaTedOdrrmZ3nfzTeq0TNGkDtpVgb+nO3X8KruH7WtOT1iSIfvSGT92N1CFxkBa0Fkz4YNk+ao3fFOrM7ezZ7vpZsy4oTbdbE3JXE/NHjbEp7pOReews1g3bupM0tLm/O8dFrVKDc2U7LQT2gPN6W3Z7K+Uw6m2MSn88cw5u1rNN8Q2grt8ZoVY122R9CGPbSxC2zKBpdo32GbIa9e52taGw/RpJXXt2wntbcm/vblBEb3jTdLYTmgPKlnddrW3B9sWKYJ6W/q1V5alt2UqLTIoHrzIJgv7rW1KSZQkc5vT0rh3RXm6Jre+zxvuHuO6b7v/XKN81un6j3pWoV0utrzpPilk74o7leXHi8adu4vrZlG9vibNFvWN9aK+QWFVtVhgKZuREqph+kWP6zmRkdpblR4DDMfb7yQzeDscSyHZjUnq7b4nlO+4zOzeIbFkgvnpLvM63anjMtGhn8vsl9KlWtTvmOb56X2b3djn+iROMhu3X6mFbncMB0TlLR610ovhhxn1GC/syBiDXqGWJFGWTZ/DMMcp/rFvLGMs7Xu8qt1cVqx14UTH76zty8vTTxAUyUTQSG1AaJf0pJBXeQhtpwkiTwqRpR2m7EgQoR1GaiO08yi0811u5Gif5UbizM6Wj0J8ReMb+RTaUmarg/ebbrqpIAU3QrswhPZEN6G9RxGFU2sd3y914zC/1Tyol49jZizfrdx4ZGZ/DHdXZQzq0zeU0xwegx1K31zoGSfqTartJIbqfqhC27GGspqlmayf2GHJYh0aHBIDAwOFP7GSehMUWmgPi9qpV3je+Ay0VGRkT6s3W9W9wzZtIFN8qhnasv5oVWOHeQK/4SExpB37AX0iLLUG5OxGh6zpgeZ0NvgtVRnCxXhvs7B0mmSxPJ1VPlBcg+i+zmZRtXC2Q31oXRbPrE6Jp7DHNrrQLjcLLksbdKoHur2lXlQtrxRVqzrEcMg+rWSufTehbZLD5vIddkK77vdjUuK37x2790mX8FAF9e6epY71uNPvM05seNOy/EXjRfk1yfccd9+GdFb1Tfp73KTv7zu96RIkKVmdyYYF49IlTnp2Zwhta9kT0/5d86BoXDHdlDW+ZbAEJtPzQimxEKpfdL2erYLZLFTj6Hfsvu/U1+22250SfJNt9tc+EWBoR4dY17hO6yeGMr43tzdm/gBvOi5Tq22ejlHGVcZnUPuy1NMkmZMStq6qFlVPVopaOc/IzlqzzN3rdvyvEBUtA0VbOmddKkt+hmncmP7BUn8CzO57J9RxinvsG88YyzbLWvl85jIrA+kSQsaYaC9SG2AkCm0psK1jAPm3PAntb+iO7UtZytJ2KztydIGVHUFoZ0lo75elciMHxVRuxJqdfZyPySDdamcbMttNaF+dLwEsxbXbDUmhCG6Edg5KjixsTjwiOTTowrDLjZmamZgYpJclKDO4osxc22+SzEayufEKULMz82ZWkdX6wD7xvup+TLDUUR6yTEDX7VOeeUwK2OFQ+3nylBmiclVz4rHi4hg4qTdeFfY3wk71sw3Ux3bdpLjNDwfpmy0voaGcg0EH8TJpspixsFI0t2837UP6prXcJctMOQ42GYTGe6fqURpyd0JZBurrtrK2SBgeHBDbO1tF9eIFGTVgJy5sjXRsowrtpFx2+CHLoVaqW51u/31aKV377kJbZkkvUiZCnLv+DQehvdtSBmSMGCO5SOVsU/bylre8hbZd+RDjvcfcXSd6G6abBflb6c+RKpOiZHTLySadjkF6P2R97EGz0M6o0+01seWkzM9SQkK7bFK5WLKqw9zHhukXXa9nd6EdR7+zwGYCXK+xQvr7yi5j2WMy7Z3dYt2qKlExZ4Yov2Wic919z9IvNt9VSl+WkYXsQLqeePqcqf3fFZZzNrFY5gWw+e6wF/M2P2jarRvqOGVh7Bt5jOU08aM6rlbKzimi2/FHI4Q2wIgQ2jIr2/qdJf+WB6F9tYfQPs0hS9uplrbd5JDH+cjSDlN25KAslR3ZD6EdTWh/NEtC+0AfQjvbk0G6ZWef7DIRpCGz5aMQX9X4Zj6FtpTUQWpS50twI7TzPcmTjxuzoNlbiRstmxuviIP6YBPtZApt3/LMQ2gnJ5OrEuUuk2BNnFNbBFktyo2Sy0z3jlndCckns4fSGVD9AdqjuyBwOXdDfaJqTrnrua/tzczQrh9wOQ4+hLbvSSyLSGgPDw2I/l39iRqtbln4HTWzTTVr5Q8QYY9tVKGdmWnmIRDiyEhV+rDSuPa9hHay/vQYRdT2vmMvtO3qTTuTlteuQlvW5TZE+O8bTe9T/twbYu+bdaY62rs7F2VkdJsytG9vDCe0r1maMTGmu9A2Z7QXZQ3tgPIyVL/oej37z9AO2+9U2vQ7Xv1SGKE9vLPZo5yTSz9nex7cf3z1e+6GAk6AWcxCO1GmxSKv1Se9jLlTvGS4/+MU99g3e2Msazka44ccNdmgaOaDQGYDQnskCO1v6o7tyx5Z2qcq3s5Plna2Jod0E9oHZklofxSh7S20PxqgdrZfoR1nuZEjQwhtu3IjJ7qUG1FrZ3/BQ2iPz6cAlpI66GSLv/jFL0RTUxNCG6HtkKG9QHR0JydoykCfYLJvYDgLg3pVvpaJ+k6HfeiUE112iO4dA+Hr9foQ2qn9HOgTHS3rRKVNqYZyuxInBUaHUkPR6ZFap0e5y2bWm8VB6OyhgEJbKS/S19sh1tVUitlTJ1v6suRkYKZsvuGIGdrKI8rGJGWZ7a8j0f7kBKLDBX/znz4nZT4y+9KPPSfPV9hjG1loL+5wzdB2boNDiUm0hqS8D9Wnlda17ym0pbh9Oi1ux93XKLYodaqTEnpQLP1pOju7rnOb2NK2JYNtnb2it2eb6P3zoI1IHm+b1bwlNWnkdNE32CvK9f2o+XNSUhmy+sG2N0Tv4+MzBXQcGdo/9SG0b68Rg7v7xPSzMzPaR4LQDtUv+ng/XxnaMfY7sQvt4XRd7eREfrNFlZxot7dPDAwm+6DymIT2ZB/nbnhI7/+GzUJ3dk1z4vzYnTc5abgcUw0MF3c7Np077bOsm2lThsQ2QzvMccrC2DdLY6yMccCcZGkto254MU0IiswGhHbJlxwZ7yG0v+BSS1sV2idGKDtylE2WdtxlR+IQ2m5iG6Edo9COu9zI4TGUGznBodyIUVTeT+3sL+uPQpyhcV6+hba1jrYXc+bMEX/5y18oOYLQzshwSQ1wZ65zzuJMTCS1TmwfyMagfq9oNmohTpjtWA+1v7M5MYlVR2+2hPaQ6GiqF7Wr6kW3TXZYX5NS47kIag8O91YrfcCMhAT2Jy9kTfK+jPqO6xzqOw651nf0L7SHdnaI+lW1or7J5nHswe1iyZQy04RafaumeT86O9ialpsuNbT7G9MTM9XudJpgsSPR/ta19xX+wFmZyMxPyZn0JIrJ8xX22KYne3MoA6T8aOJXaFdNucJcD9WmX0vVv05M0BauTyula9+P0DZlSjtkWqcmXrzIuU71G50bRN3qOrHlFf9Ce3dq0shxYtHTD+rZ4nem6nQbtbvH37dUzL3GZuLHd9IS/OyL5oo3HPZty4LxzjW0vYS2WhO8c6ltaZVSF9qh+sUIQjtsv5Nroa3K0HK7z2gnokMJ7bSQNOYOsSuxNFH98VKZDNvxh+w9/aJZTgja2CEG9hR5O96Vnohx2sIlSjm+Dvd1Qx2nbGRoZ2eMlZocMvXdPlt0dNemPnNVb3FMbrxmzRpXWe31OgBCuygmhRyvu7UzdNfmlaVteLvPOWRp200OGabsyOFZLDuC0C4woX1AnupnZys7+zSfQrssnwLYq452vrKyEdo5Htjb1mIMIrRVmZUUhZlitMqSnRi/0B5QZnovX27zmfYoN3ZTkhMqxSG0K7uVQb12g5PeB7sszL4YJlrMV9mR5D47ic2B9kpTWQ9DHKqPrMqJrDI+854+MVvJYDWkRxihvW5OOgO72+Ymu1+ZoCzxWLlyQyqFfebjs8PKZKNXiBkNfc4/aAw0p7c1xU5YDitlcco9fxwoqBrqifbf6pKZrwgieeyH98ZybO3KDah9jV/Ro0ouo8a3uXxGWmiUzWkO16eV3LXvR2jvFbuVetZ2Qntw/dzU3yc93Zu5jXd6U++RmrDRIrR7bSeT7FMmdUxnQ6fO+eo7Lfs0RjS+YZnw0ZDtVtmdqtWtllUxZHkAoW0pSbLhvnHFWXokgtAO1S9GENph+52cC21TTe5hm0kmp2VO2BdGaJuEp/0Ejn0Nsy0/AvSnftCT/bnd9+/25cqkzTuGi7wdW+dg0cci6ueyXTfMcYp/7JutMVaKHbU2E79W+JuPIs9IOe0mq71eB0BoFwfSqfkU2qflIEs7l3W0D0BoF5fQdquffYiD0PZTPztbk0FaZbYxGaR8FOJrGufnW2j7qaOdj6xshHZuB/ZlU5eIdY3rEhlSjiSyDoedJzfaaR7wVqxqFf2DQ2J4eEhsb6lWZJeRIRn/oF4O2meoj/UvrE1Mwib3ob+3VSxQbliMuoihhbY60ZJ2/Fo7k49Lm7Ja5c3yk+tE367ko7wDO7tF9fzJilgrjrqTwxk3M+WiqrEjdX7l56pdOM1cUkH9QcFyXsqmLBEdOwYSE5H2da4TM9RyDPoPDWGF9vYapV7rpNliXWdf8jHqwQHRbWmHxjbrZ5pLkdTLdRKfq0NUTi3LKFPilqFv2taUCtHa269ta1gM7douqucU37kfMmXoy8+0QKxr3y4GBvU2vatPtDYsSWX3JYXwOvvj4fvYKj88XVEmljRuTx/D+ZPD1Za1TPIo+4a+AaN/qjK9lsoKD9qnleC170dom8t/ZArtve+YxfOkBTWi941BsXv3bvHGKxtS2dPJ8iCDtqU+yh+pE1s6t4jenYNmIa0KYjnh43N9DjW+pXxelDmB406zjJfv0/emtm9vDYptDUtN609KCe8AQtv6upoVrkxoWdJCO0y/GEVoh+x38pmhfcWEGaI5cUxkn7pd+z411x2fOH+dz3rY9uMq6+SFFas6EvMiDA/1i9bl5vkPjB8A+pQff+Xfa+WEyto6Q4PaOuqcCW5lnIqoHZuksN3nclg3+HHK/tg3rjGWY2JD6gk8ZDYAQrughPb5umP7qjI5pFeWdtyTQ3rV0bYK7UMi1tFGaIcQ2l4zY/oV2m61s6PUzz4kQHa2k9A+PmC5EVVmn+ojO1sV2tfkWwB71dF+6qmn8tpBIbSzP7D3S1ICOwhtOTiumeF/ciN1gBzXoN5OwHlM4KbeVAbL0O62OX4Vie2q2U5uExM27yqegcJQZ5X/iY/m12ecTynFyzzXnSG6bWuhBqihvUeZ4MmtHapZusPbTdlL9pSJajVL16nkzFC36cbScULSweI599tXzfbfT9xSac7aCnNs5SPOSu32oJOlOU1Q1t9U4aPtNkfo00rw2lfrTLsIbZktPd1JaCfKg9R4Twj506Um4ZwuKZJmzIIt5uxwUxmPs0XNTud9mvR4r+2+9z433XvfZB3s1Dp+hPZ428+UyFhvW2QuPTJY+kI7cL/o43p2E9ph+h1Poe0xVghTQ3tG0Ilnh7zqYTvL0taFkz3fY0FTv2lb1TPLvCfxbB8qHunhdvwsY+KMEiIu2d3BjlN2xr5hxlj+hbZV+DuV7iosFixY4CqrvV4HQGgXldC+xkZou2Vpn+qRpe1WduT4gGVH7LK0D4mpjrZX6ZGgQjus3EZoBxTafsuN+MnOdhLan7QR2qrMPilAdvbp+gWllhs5U+NbhSC0/dTRzqfURmgXitAuE/U7zRna5TalSvrbq0X5JJv1J5SLqpY+i7Sa7Pz4vUfZgfSgvjxjID68q0MsmDLR9jMsWN5qfq9UPd4y+8dmXfZD1sSdOEG5kZlam8p86WupEuUON9STpy4RHQNFOGAY6BaVc8pdbrinidr2fpf1O8SSmfY31dMW1or+YScBWe4ptCtVwTDcJ6qd9nPCZLGkwUYE7BkQ9Ytn2N4QTpxaITp2DTu2i4w6z/L950+zff/y+VWib7D4zv3QjlaxYKqLZNaPq+1El0GPrX7TXz+/3LYfqe/eLqr1LEu7R/FnN/S5ZJyvEzNusZMPE7X9ty+9FKRPK7lrf3c6o9ht4sRkRrUqoCdl1L3e/cYWMfemcTbCeIyY+/SGzOzpvbvFhkfuFGOUGt0ZZUHe6VWyv6en6mcbNN49LvUeNTud932wp07cec0Ym30bJx58botFWitC+xp7od33nF7u5Jpltq+n90se197iEtpPhny6IEi/6ON6dhsDhOl30tuTY529LrX77ccKaTlY7iq01XHT8K5WMWOS/XdpfXefaFYldEJ+9ouKSYZw3e4utG3GVdsbl2RMUJvc9gzt/Qbs5wmoWWB6AiedBbxAtO4YKq7vsj3pHxFsy1nNmej8o7PrNRDsOGVr7Bt0jOXeZq0/BrSmryVtrFsM53vPnj0Jae0kq71eB0BoF53Q/pbu2NSyI19WfJyfLO2THLK0P6X4QSehHTZLO2jZEYR2BKH9kRwJ7aj1sw8LIbSd6me7lRv5XIByI2p2tiq0J+RbANvV0ZZlRqTELgSpjdAuToYHB0Tfzr4E/QN5uumRpUb0fejbNWAv27J9HIaMfehPlGkY3lMC51ce1x3bRYcss9Iu6U6UVgi0/i7lvGTrmOwZFkMD/ck2qL2PfAzY1zq7+vW2Kx8Bj/b+A8bnjLqtAjr3fdq575bnXqO7e7v/6zvMsVXaSpz9SPq6TLbBbPRpJXntxyLJB8UbxrGXpUcKaN9kqRFj3954c5BzlaV+Oaf9Ypx9ejbHCfoxGRg0f08ZxyrO/ZblMIKOz4zvUrt9hAI7TlkYY6lla4oqKx8AoZ1VCmhSyAkWoe2VpW0ntD8XsOyIWx1tN6F9WMx1tLMltD+C0Havnx1UaLuVG4kitP3UzzZktle5EVVme5Ub+brGt7MhtCdPnhxIyFrraMsJII2a2YUgtRHaAAAAAAAAuSc9sehs0cfxAEBo60iBbU2MlH/Lk9D+tu7YvMqO+MnSPlHxfyfEXEfbSWh7lR0JI7T3Q2jHI7T3y5HQPtRFaLvVzz7WR/3szyizngadDNKana0K7Z/HfUFbJbQVrzraTU1NrtvLtdRGaAMAAAAAAOSq1FizqKqpF9XKJKWmCb8BYMQLbZmVbXVN8m95ENo/twjtsFnahuc70aXsyPEuWdpOdbTthPahORLa+yG0sy+0s1E/O4rQ9qqfHbXciCG0L8iG0JbZ1U8//XQqU9uP0DbqaMtSI34keS6lNkIbAAAAAAAgN3QsnpgxqeR2SmcBILQLV2hfEIPQdis74lRHO6rQjruONkK7xIR2lPrZn1JmNw1SbsRuMsivKuVGZG2fs/SL7tpC6IxkHW211IiX1M6H0A4KQhsAAAAAACAYfatmpyZKnThlQXFOZg6A0B4pJUeu1d3aWbpr+5ri38JODqkK7RMUPxiljjZCG6HtKLQPtQhtv9nZfutnnxhCaDtlZxtC+zuFIrRlHW1rqREnqZ2vkiMIbQAAAAAAAABAaOeXApoU8lrdralCO0rZkZN8lB1xq6PtlaV9qEPZEYR2CQjtqPWzD/1Q9upnn6QTR7mRs/WL7jo65+CPsmSbbD4qg9AGAAAAAAAAADxCZKF9ne7Wzo6p7MhJHmVHotbRPjSLdbQR2jkQ2nFOCOm33Iib0D7OodzIp32UGzlFvxA+byOzv+SQnY3QDsDWrVvFlClTciaz5XvJ9+SLCAAAAAAAAAAQ2kUjtO2ytL9kI7UNj3eKj7Ijn3YoO3KcT6EdtOxInBNDIrRHoND+tM5nQtbPdis3Ygjt0QhtAAAAAAAAAACAUEJ7tIfQDlt2xPCBn/ZRdgShjdB2Fdp+J4Q8POCEkH7qZ58Uk9D+ul7bZ5R+0V1PJwQAAAAAAAAAABBIaF+vu7VRumv7ekxC26vsiJ3Q9poY8vAIE0MitLMotD/qQhih/fEsCG23CSH91M/+rI5abkQV2l/U+ZIym6pddrYhtL+L0AYAAAAAAAAAAAgltL9rEdrWLO0vK1Lb8HZWoW1I7c96lB2xq6PtNjFkXEL74zEKbT9iG6GdJaF9sIPQPizihJCf9CG0rdnZp4YsN3KOftHdQCcEAAAAAAAAAAAQSGjfoLu1c0KWHTnVR9kRq9D+ZMSJIQ9zENoHI7SLS2gf4CG0/dTPDiK0/ZQbCSK0g9bPPguhDQAAAAAAAAAAEKvQPisLdbSDTAx5TAihHbSO9gEuUhuhXWJC26t+tlO5kRNC1s/+siK0z9BRy40YQvtChDYAAAAAAAAAAEAooX2hRWgbWdqGj/uK4unC1NE+wWfZEbc62ghthLZn/ezDQkwIGaR+9uds6md/QcdPuRGjfva5+kX3CzohAAAAAAAAAACAQEL7F7pbO9ejjrY1S9vweNY62p+LUEfbz8SQh/mso43QLjKh/TEXoX1QCKF9ZMxC2y47+/Mh6mcjtAEAAAAAAAAAAOIT2kHraH8+RNmRoEL7yBBC+yAXof0xhHZhCe2PRRTahwUQ2p+wEdqfDCm0/dbPVsuNGEL7ewhtAAAAAAAAAACAUEL7exahbWRpZ6uOtt3EkJ+wTAzpJbQPiyi0P4bQzq7Q3s+BKEL7YA+hfbhPoX2sjdCOa0JIQ2Z/1abciCG0v6FfdBPphAAAACAq35n2dwCuBQAAABhJQnui7ta+YSO0jSztrypSOxsTQx5rydJ2E9qHewjtg2MW2m5iG6GdBaH98SwI7aNthPZxNkL70xahHWRCSD/1s40JIVNCu7OzUwAAAABEAZkLEq4FAAAAGClYhPY5DkLbLks7yMSQqtD+tI3QPs5GaB+dBaH9cYR2aQjtQ1yE9hEOQjto/ezPWGS2IbTV+tmnBaifbUwIaQjt7yO0AQAAAKENCG0AAACAUEL7+4rQDjIx5BcVoW1I7ZMV//dZRWiHraN9pMfEkIf4mBgSoV2iQvvQgEI7av3sk0PUzz7TUm7EJLQFQRAEQRAEQRAEQRAEQRC+w0FoG1nafieGPM0itOOso+0ltA9FaJem0D4wBqGdjwkhv6oI7TMdJoT8pn7R/R+6IIIgCIIgCIIgCIIgCILwH9Kp6W7tmw4TQ56pCO2v5nFiyChC+0CEdv6F9v425EJoH50jof1lRWif4TIhpCG0/wmhTRAEQRAEQRAEQRAEQRDBQhfa/+QhtNUsbcPb5UJoH50Hoe0kthHaeRLaB/kU2ocXgND2MyEkQpsgCIIgCIIgCIIgCIIgQoaN0PY7MWQ+hfbhPoX2QQhthLYfof2pAEL78xah7WdCSLV+tiq0f0kXRBAEQRAEQRAEQRAEQRD+Qzo1G6FtZGn7mRjyC5aJIf0K7U8htBHaQYT2wTEJ7WMdhLYhs1Wh/VllhlNVaBsy20tof91hQsjzENoEQRAEQRAEQRAEQRAEETwUoX2ew8SQX/chtFWprQptQ2qrQtuapa0K7WNjEtoHI7QLW2gfYCFuoX2kh9A+zkVof8ZGaBsy+xSPCSG/oshsL6E9BqFNEARBEARBEARBEARBEMFCF9pjfAhtQ2p/xWNiyFNssrRPVDyhk9A+zkNoH5lFoe1nckiEdoEI7UN8Cu2jPIT28S5CO2j9bDuh7TQhJEKbIAiCIAiCIAiCIAiCIEKGjdD2mhjSS2gHraN9vE3ZEavQPsqn0D4EoT1yhPahMQjtoPWz3YS224SQoxyE9qScX/EffCDEvn3ig/feEx/84x9JtH/LvyVeIwiCIAiCIAiCIAiCIIgCDunUHIT2KI+JIeMQ2k51tIMK7UMR2sUrtD+WA6F9TAEI7XMUoX1+ToW2FNj/+Z/i/b/+Vbz/9tti33/8h9j3//1/Yt9bbyWR/9b+Jl+Ty8hlE4KbIAiCIAiCIAiCIAiCIAosFKF9viK0zykAoX1MDoT2xxDaxS+0D/MptD+RJaHtNCHkmTb1s8/VZ1/NjdDet0+8/7e/iX3Dw2Lf0JD474EB8d4bb4j3Xn9dvPfaa+K9V19NIv8t/6a9JpeRy8p15LqI7Xijs7MzAUE7oB0QBNcPQRAEwfcOQRAEES4sQvubFqFtlB0502ViyGwI7U/4FNqHIbQR2qrM9hLax8YgtE+LSWj/IGtC+4MPElnWUkr/9+BgUmK/+qr4rz/9Sfzj5ZfFP156Sfxj2zYz8m/aa3KZhOSWcltbV24jkbFNORIGxATtgCC4fgiCIAi+dwiCIIgCCF1o/yAmoX1aDEL7WJ9C+3CEdukJ7Y9HFNpH5EhoGzLbTmgbMttOaH8j60JbZmX/9a+JUiL//W//Jv5r507xj97ehLT+e3u7+M/Nm8V/NjeLd5uaxLvr1yfR/i3/Jl+TyyQEt7aOXFduQ25LbpNsbQbEBO2AILh+CIIgCL53CIIgiHyHjdD+hoPQNqS2ndBWpXa2hfYREYX2xxHapS20j4xRaBsy20lon+4itL/uQ2jfGOvVLGX2nj3JrOzXXxf/tX17UmRv2SL+c8MG8e7ateJv9fXib6tWib0rV4q9zz+fRPu3/Jt8TS4jl5XryHXlNuS25DbltpHaDIgJ2gFBlOL189e//lV0d3eLuro68fjjj4uFCxcGQq4j15XbkNsiiGII2j1B8L1DEARRrCGdmg+h/XUXoX26i9A2pHZcQvtIhPbIENoH5lhof9pDaBsy201of9VFaKsTQsqL7FuxC21DZv/lL4ma2LJ8yN87OpLZ2I2NCWH9zmOPibd+8xsx8JOfiF1nnSX6jjgigfy3/Jt8TS4jl5XryHXlNuS25Dbltgtdav9F28fnn39eTJ8+Xdx8883i5z//eQL5b/k3+ZpcBpFJlOKNEUFw/YSLwcFBsWbNGlFbWys2btwourq6xMvad19vb68v5LJyHbmu3IbcltwmQRRy0O4Jgu8dgiCIYg5FaH9LEdpG2REnof1VD6FtzdK2E9qfzrHQPhChPfKE9tEBhPYJPoT25z2E9hk+hPZ5sQvtDz5IlARJZGZLmd3TI/7e1pYoJ/I3bXDz12efFQP//M/izx/9qPjzhz7kjraMXFauI9eV25DbkttMSG2ZqS0zAAqspvaePXvE3LlzxRVXXOELuaxcB5FJlMqNEUFw/YQLmdXW0NAg1mvfdzt27BD9/f3i3/7t38TAwEAC+SOoG8Zych25rtyG3JbcJhlzRKEG7Z4g+N7xHfveE++++26C996jPRAEUThhEdrn+RDaZ3gI7c/7ENonBBDaRyO0R67QPigGoX1MAKFtyOyiEtqJCSDfeitRGiSRmS1l9osvJjKth+fOFa+dfLK3yLYg15HrJrK1tW0lpLbM1NbeQ75XYqLIAok2bd8mTpzoW2YbyHXkuojM4onv3fUfOaUo2sG+N0XdwvvFrAdmifufaBHv+Vi+Ri77gLbOv1aKXa+3iPunz0r8u3+E36R49Rl+l/NLoXwuK69r/Xw2KNR+VD6qXV9fn9jHf//3fxdvv/22+Nvf/pa4cf9P7bvOD3JZuY5cV25DbktuU247TLzVU6Ndk/cnrlNb/lW7Zh9YIl7Y0ife5ash6/He/yu9frIQ233v8xVau7Zv87O0Nl/xRI1o6el3bPN5O0/vvSkq5TX5rxWi/a1gb9y7eom23t2isunNEXddvbmxMnFeZy2sE2+PMKFdiNdfZrwrejdq30W3/jJjnFB2422i4vkW8abHF9C7r7WLium3ibKflyW4v7E/9Vr/lhpxt7btsp9LbhMv/L/3tOXXJ7/flGu41Ppf4/Pcr43FK57v9Vy+v0m/Tha35O37vpiuVV+fw3Qs3xUtz1SIu7Vzsv7/MaJCaHsKbbuyI25C+5gYhPZBCG2EdlCh7TQhZFChrdbPtgrtsbEI7X37xL7h4eQEkNu3J0qEJDKzV60S/z5pktix//6BZbaBXFduIyG1Zaa2tm35HomJIrX3zHfpETmQmz9/vquYuf7668X48eNdl5HbkNtCaCO0i1Jov9cnfptqz7eJXq+bi53L0+3/dy+Id15Z7ntdhDZCuxSFdmNjY+Kx7f/4j/9ISIL//u//Fu+//36CDz74wBfG8nJduQ25LblNue1QYu+J2wKcs7tF+wApc1kdb5RgP1l47f5dsfxGv23+l6JyY3/hnKd3e8Vt+r5VvvJuqM/8yyd6R9x11ffMbanzWejX1Uj43jHFW13ibl/XYplYvvUt+20MvJApwhcn2/mbjXdnvFb52ruiP9Um0tdwqfW/6c+TZLlrn6H0izcuz67QNn6YsxG7hXWtvidankj+yGn3Q6DbDyCpz6EeS63//mWo/psoMKE91kFoG3W0owptt4khEdoIbU+hfXABC211Qkgvof3NuIX2+3/7W6IMyH/t3JmYxFHWvZalQmR2dRSZrUrtRKa2tk257cREkdp7JUqPaO+dz7CT2VJeP/TQQ+JPf/pT6pG79957T7z22mv/P3tvGxXVme55fzhrPj0zs3rNrJlZM/Npzof5Ms9L1pmZc07OTPec8XmexE4fTzpt21GbI8YRO3o8fTQtSR6g07ZCDEhEiC8EE9AUSkAFQUqh0EAFCrGQUqQQLUCClIFUUoGIRFOaXM++d1Xtfe+3ql2vFPq/1vqvxGLv+94v98vev33d10U2m41KSkoMofaTBLSTBdwigbdTp04BaGdIO3C+L3vPlHX7Im57tVretmZglhZGa6WXEgBtAO2nEWifPn2avF6vCAR+SEI4LVYGK4uVycqOD/TkSfcjt6CIigo5lRZRrgb8lZAXOZtTByBGnzygnXntfoGadsjAOq9Q2e7zdLxE1xY2KQDPos1nAbf0YTlWoB0+59ynEmjnLZl+9TTMOzLMdkqAL6yS6iZyDrjJPXyVbM010gecsKr6tGBxolmex/Leb6LOjiayitsFqKlA7utVzTahzAa66gtw+3BA+wl7TlU4logqizB/c+NiqoF2hA9zmdVXI38IjPQBRDoPA6Bdcx1A+wkB2n9pEmiHE0NmKtD+3wC0nzyg/U+TALTDMDtVQPuZtAHtkHd2YHKSHrrd9KCvT0zmyOJfxxNmJFL4EVYmK5vVwepidS6mlzYLFaIHYlim72jmcDho06ZNmn3TEX7kSQHaDGanE8jpAe07Xz2m7x79kFSNzTxakkBb7XVt7KvppRLOq9PDNny8QBPDwkvKqPepD10AoP10Au2TJ0+KS7YDSQwMyspiZbKyEwM9eeQxmGZnRzsVUKGs20swAO2l2+45cLOjSX8eCyyQu6NKMV7lnvRwz8WLNJ8BaANoPwHzTohmU9UG7plgR61BWJEFclbnKTy1HT6j+1tCXjWQDPf10s7obeIJe07VAu21tKXavfhAO8I4lmlAO9K4GWm+1gXa4fY17CEfFrs9DUD7mRQCbR5qJwK0/ymANoC2GaD9b1MItPn42ZGA9j8k0nnF2NlffEGBsbGgd7bdLoYHERNAJglmh8XKZGWzOlhdrE5W92LE0mbJHI1iZmdlZVFPT0/UMtgD3+9//3tNTO1UJ4p8EoB2GGYvBtBesccvweZXDs7S/IPkJSedvf89rd3/tVT+T4v8S6gdeKnMRNiRhdEmedlnuTOGZ8cF8t31kndKkO/Jxd6ZAqBh6e0/TU1N4ooetmw7WcbKYmWyslMJemb7ZLgXKWRBYGE22H9nVW9rwovcrC/Ut+/OUiDaN+pAgBZmfaHtfcLQYOLtL9Y6OHgpjjt3kxCxM8ExzBTQDvB1zNKCyfNUXM80vkxnXrs3D25mr9dyY3OeecASR/tlfSfYDr3kY/dVbx8eBI0G5D4Xag++2YWEgLZ8zN7E24iinZprc2L94WsgPD+b2Udx/j79fq8Y58Lxku/NSnXNmrmv8Y4vmHeizilrN1RRtM+kDm6FoPq50m0J/W2Huj8vUO3W8Acpd/LAqWoMDsQ0/nrTNv5qgHboA4J1PBD3uCj1m4jjTbQDM+mhHW9fjTKvmz8H+YNIbjI8tFPVvh4H5LHJZHuExQ20/8EE0ObjaKcCaP9bAG0A7ViA9j9LEtD+d3EA7TDMjgVo/7kKaP/3ZADt79mD0N279N3ICD1wOmnhwgWaO3qUbv7JnyQdaLMyWdmsDlYXq5PV/f0iZLLfv39/ROhkFmqzBCrr169X7MvKBtA2Bnk8zF4MwOe6HaDndske1NuPfkOPkvDy8jDwA205MieV+//88SvqvfXdkmoHfMzdsj79sCN8uJGG0QXVg7UOFLjnodpSnVi+G3KpaYB7zfE5pIfgvGaP4YOn+HCpHjKEfbPD+4Y87RThFk6mz2sNQPvpBNrNzc00Pz+fdLDAymRlpxJo8y+g4Rc7b1dZCCJYaeGxj5q4PpwteYHNUqelRDcealnzVe2L1wJLJqsf1zt7Rxld1Y3hHUMddztD40AeeQIBcjdz+72yRxojis5N6F8GDnAqXsTNjmGJAO1ZN9UW6l+bovdt5DOYo7x9TZS7QbtPyUknuburDEAQPcHtPjZPxM7SbPmaheKoGs5ncbRf37CNigxiemcXVCnnMg5o13Q5qKFwi26ba9CEZYgMtD1dtZrQDuK25U3kjZWOBLxkLc/TPZ/c0lry6DzOuztqNKEn5BASNt3kcIG7V6mqIFu335dYlEnt+JUojutOKtuh3W9LaZNBH4pxDMO8YwZnS6CZf06M3K6UeVyu3mPJXYvieNcIrkaaOKkXckSnX3N9zjrqpasnS3Rj7Tdd138eTmrfihtoZ1NReZHiA4IvxnGRrdQq2pqte+5V59zmoL6Ox7jsoR+sM66+Gmle31ArnYvpc+DuuV77aT+RZ3ge4XcJfQ/tCWn1qhTPPKH2tUDOk2XScwu/fUOfmxzv56b9/eYpAtr/XQW0/zxGoB2G2rEC7X+XJKD9zwC0nz6g/c+TALT/fZxAm08IaQZo/0VSgTZLBsKWqrFwI0ND9G1vL91vayPfm28mH2aHxMpmdbC6WJ2sbnYM9MMPaRuwPv/8c03MbBZmhEHseKA2ywaunqBYHQDaWpCnhtmLBfhsgw8VYUGKTs9TIi2QNd+CunuKMs84Hyy5DxuBKSsXV1Qv7AgfbqRM8roxBDV3HYYvshI4Dydj4R8y1QCGA27huN2Ko+qSHxKtUwEt0LZkHtBeaiFHkjVOPKlA++zZsykDC6zsVALtALfqItxX3FLSoyIq2aGTkOuxl2qiJN/LLndwlUxwK0CMpPpYFWMdvEdVmRpAv1JOvwv//9ZaXYjmKM/WXq9YxrA4gXZgqlPnpVUb39yj9hI7ZxL4pHCJeea1+9iANv8RI7w6Qfc+xdF+ZwdqTdwfLu5tRNCi+shxzmMKaPO5MXTFvGfNftBf8HDzvzEQ4q+BqcS0pQ5VP7FG34d7RuDn+ohSP9PEOoZh3jH5IMk9r22tIbNrY3hnidrhL6kmrmeibHJHBdq5ukA7mmxTgdT1rYSA9lpqGp8lZ7kMc/NOekyPi9LH64h91BZ1LA1EAtoh8BxPX404r4fKjekcAh7djxDh9tN+wnjMCn/MN4qhrfFMj7t9LZC10Nx+T2OYqTQD7b+IAWirE0PGArT/fRKA9j8H0AbQXkpA+6+SArRZ/OyvvqLA7dv08Nq1YDJIFm7kl79MGdBmZYthR1hySKFOVjc7hnTG0WZeB/xkUFlZKf7O4HU8UJslUfnd736n2C9+z4YnF2jrwezFBFwW+7cKAP3Bxfhf+SvO3VeU9b4t9SE1UtMOfFSzwTjsCB9uhA9NoA9qfFTFv4BbHOS9t0AL93yq+KXZ5Ai98cjeckowoM7mvqX6Kv8YTbZCrWcKn0gouxpAG0D7aQbaxjG06bGPajlgndc8YQiJthSWUdM5G11VvTxnF9aSmy3TX1igietWxQtcVWilx8JwLeeZWkPuKRaqYYF8U8wzOVs3lnHMdei9UG8totpmKzkGJjhgnU2dd9XXYYKK1qrjscY+hsUOtL0KSBi8NrPitfEOd1IR733N5TZQfHxkH/k63DS7wI7NSw5LEYC22fPmVyecNAbasbdfZdupOneVfELbYe3XO+rg7usWcs4awbVsqu1m9zUQvK8q7z7b3chA26cI+1BEncMsHAI75qtUxfX57PfNhA7j5lnx2paRc5yVJxzbXeU1kPrPrIP7UJNHVqEPslArCwuz5Omulf/Ge5Q+VvaHLeVN5PEJ1y2g7Q9hj3r1WJVd2BAcK4Rj8wpjxRbOs/Eq91wR6/iCecesY4QtLtjGj9/s3npHWbxrN1nLQ+B4g9DmWIzi60F5hh3SfWJevWxb93WPCpzGCrS3SH0uIPQ5a+kW3fjUye1biQPt2mFhZnjMn4t6jjMYF+92KldMVNvIO7sg9lF3V63iQ6vRyiaFcwm7B9018n1sdgr3KRi3PN6+Gm1ej+ccFqY85B6W84co2s93wvg07BHm0VzZg7ov1ObuLhgDbb3Y4XG2L6/iY3Ue2a6Hx1oPNRRmA2inB2j/FYA2gPZSBdo/WmSg/X+GsqaaBdrLEwHaPwiD4+Mvv6TA+LgY03qhq4vmW1rosz/7s5QBbVY2q4PVJcbRFupmx/BDIH1RoQoLCxWTwcjIiPS3eKF2VZUywRCrA0A78wHX3uZ5BYjOP3GPjnYuxKTXLd8oyth18h6lY71BqtqBhwPB6hc53oOG9ybQe1HgYygqvclC+3CeceEHstmBGl0vbMlbVHqB4Lx+OBCliP/7eCH2uHwwAO0nEmivpbJmG3V2dSpkPVml8j6WXyKVL57Z1HSdI7azTvklscCqhYb3eA+9Bo1nVs2wer7nIFYY2sZRh/rFt6jZbQgA1GGNeGBZe30h7jEsVqCtACOFOufJLWNmCkMKHsapV6yIY6YlD0DbzHnrrAzSu08xt98Ft9S3dD+ojjdo2psafljHtUfv7SjRiTWsB7T5pHyh5M0Km1WG8Yp2ofj+qBsT2cd5sOfRREDZp2quayvQ86Ll+5yud7TPwX3gsYrXWjFW6YwVvu4ybSihOMYXzDtmQWuTqZwMmv2G9cdTqZ0I/TOg+sgitXuVR3K8QLtJEx7FS2Ub1O0gyX0rKUB7QTufKFYi6Y+L/DyiN8exjxPZOqsyI9pjOXxMw2jA8JnEbF+NNq/Hfw5C+ynQbz/BMbpJE+9bcx4xAu3Y21cuXZ3VznENOwC0Uwi0l8cAtP+vELtbTKD9IwBtAO10AO0/TRBo/5eUAe2HD+mxzyclhFzo7KT55mby/OhHKQParGxWB6tLSgwpHAM7lnTZ9u3bFZPjPVUM73ig9oULFxTbszoAtDMfcD3+nugNDkj/338Mhh8xC7P/2HBP3Ce8/2+r5yjwOD3hc1LWDnzc8vdCm/5L+wblMlK9FwXZ27rIYNkl91AWLo/zlpM9W7jELYVFoWOTvdoC403cskuQawBtgAXdl0cTquJCZ0SKQa8M8ROt7i3iCxkPK9ZuyKOmbjf57nFviYEFWpidpdnQ16e46uBffHXjRnOJb1VhR+SX4hJpvIprDIsJaPNer9nUaeAIyn/oE1+8eci9tVYfti2kBsg9yUA7DFCjeWibab9iaxu+So5uJ3nVBxGYJUd1nhay8vBDWiWgBccy7Ai3VR2gfVf2ki3q8EYFYnofRYxAelWf/rYL41fJ2txEDSdtwfjBjxfI3ecgR59bcx8C9yaotiA7Yn9wGhzSxEAnNTU3UFOHWwO09RLiBXTAXzzjC+Ydc8avHtkSw+q4hYEqXUhnnIDPONROXEC70KoTZo8bT8JzSpL7VjKBtnolhexVrTMuKj6WGsNqvbw5ZsdU46SQ5vtqxHk9oXOInHsgUs6LuIC2yfbF9x8jWG308QeWcqD9XxIE2n8KoA2gnW6g/S+SCLR5mB0P0P6vANrJsw0bNkgTQU5Oju42sULt8fFxxbasDgDtpQG4Fr77gXIOy8kcn9v9Fe07ez8qzGbe3f8vl1xy3XuzdO/b9MWCT107WOAS+sjJc/g4u+GwBMYPfkoPAvZyms20gZcq9qjmhTa0DFl6IMymznG39DIffqmWH5BLUhqvEPZkGYC23DfzStly+wVDmKMGS+oVE8p+HRT/d/Hl7p5BLMmtuVRS3UDO6xOKF9V46uBffI2gm1wutySbX+UhAZh4x7BYgLZQx9a10RM3cgnTxJdXnTAZEWE7gHaEzc2FHIm1/XI3T1yGb2uupbLSIsrVSVqmBz+MQJmyDcvtSA1m1GG6xP7C9x1V/4nmScvXeTXWPO6BBfJcd1CTpYZKCvNoywad2OPq5waDOPeRx7k8jSelEfiLawzDvBMzaNX1fDVqJuNNuito0gW09Y9VO54ku28lF2izseoqFyM6PH/rzAem5hF9yJw40DbfVyPO6wmdQ3qBdjzty/B6B7SJvGEpB9r/NU6grYbayQDa/wJAG0A7FqD9L1MAtP9jgkD7WYQcSR7QZgkhAwZ1xwK1R0dHAbSXKNBm9uW97+nlfV9LcPpnb/vpYJsx1H7v3H36aaFf2v4Xe7+mz79OL01NZTvQ88aSPRyyyeGLDmqadsTSDrgl+NKSw5DHorQ0u0T0vnCEvCaz37+qAELBf8NgAAuRXuqTsW+snt/SS9mCl5rK8yKOA7bxhbjr4F98G4xeBLkVKGFowr9AWqVQSvGPYeaBNvuAJ3uG+0wAAvHlVf3vZIDdpxRoL1yvMZcUMsb2K86jfbUmkn3qw49InpDO0rXRgXakBG06igbd4htLAuS0FMXQd3S8YZMwzulBsrjHMMw7poBmriosjBmb4OIG89c7bUBbtw/oAMck962kA21SJUnc0UR8eBZdD+1CR1z1xA+0zffViPN6QueQZqAdR/syBtoeE88AsCQA7WcTBNr/MQVA+18CaANoJwK0/1WGAu3fxt1zn9KkkOqQI8y72sjMQu3u7m6EHFliSSHVdvuLx/Q3ezhIXfK1IdB+8R15u58W+WnE+yjtx5vSdjDrlGPrlrKHRC4+ps6LZkTPQwamuUQ+Cg17yDPqJs8U53XBxa4s6fbKLzmh8CcSbN9QS757OlnFF9metqSQqRpPALQzF2i7dZIlafu2W+zbLBmUBmiwBG/jbnKca6CyQlV8/LVFNPE4vjrMvXgrw4Swra6+v0UnbEgCY5hpoM0dS5we2sZL+rnQFADahsYvz68KhQaIBDLMtt/AuDJpZ155LXUK7XhiiiX3MmirHPyIFKbAXW3GQ1tekl52zin2Fb326xn1iG14NpCEseRxQEyUyRI/qgEl60NlliZyXveQlyWB0y1T6aFt3B8WFPXEA8kSHsMw70R4t+QTe5pLmKsMpaPM0ZJxQDvJfSsVQFv9Qbaq203Wwkzy0I4PaGvqX0oe2nEA7ZrrBp3HJyfcBdBOKtD+bYYC7X8FoA2gnUyg/a9TBLT/91CW1PQC7R9+oO9nhQfLyUl6ODRE3/b20v22NvK9+WbKgDYrm9XB6mJ1srrZMbBjSZepk0LabLaI25uB2h999BGSQpoAVHpQO5NsYDygSPBoBLT5bXpufrcox5radrAgJUthnoNXrzcpss+befCTYtJuMI5r5xt2isnp3OOKiNxkDdWdXVpLtSEPRmkJthS/MJcamqsUEAFAG0AbYCH1QNvXLcc6td016txusW87rgf77cJd4d8dNurs01l2q4inG0ycFFcdJl+85fi52dQ55aGqMHSU4o0mOoaZBdrKmMEOAxftBXUM7YAcIkUKzaQ2Ls4rgLbBlorQAUViIkOj+SzW9isDU5b0cdYcYFHEW+00Af7C854OmOGAh2H4ksc+crIEsd1umo0yf/LJoslX9gEAAIAASURBVI1gu9uyRYLE7gX+g1CebgxqPaAtP3dsMQhtwoVE21CrSjhrHpLFM75g3jFvE1x7yTaMB8+PyWWaZJ+ZCrST3bdSA7RJ6ZiiCJMke2gXcYlefVE/oCUzhnaSgHZC55CZQJv/GCon/jV6hgHQzhCg/X+EWF4qgPa/BtAG0E4F0P43TwzQFuz7e/fo0d279N3ICD1wOmnhwgWaO3qUbv7JnyQfaAtlsrJZHawuVier+/t799I6YDU3Nysm95KSkqj7RILaDx48oI0bNyr+xuoA0NYHVGqonWkWK9BeLEt1O+CzjSuWBt8zA2qEZ2ku2zofD1F+EJW9DtUvMPzDmtZjh0vspkrmpXimvucj712vKEXyLgBtAG0A7cT2FV6UpVAKBU060JBb3rw2T4RujnIZwnl0XvB9XJ8XlxXHUYfppdF8wkRNrFHuNBMYw8wBbdU4W2jVnudjYbzjPRdD8M1Rnh3hIyMPBp9ioL2jyfCeTPQ1KMKB8FBA7z7F2n75/qPdfoGshdnaZfQBZZxuqw484kGsnDhSD8wowbde/+eho3UqSuud4j+Q6MW35uZlESwpQY2m9AUP91EmV4qn6+0o4hIK6oQRuyuHDArDnnggWTzjC+adWLqhcozNi+A9O3tdGcKjwQiCZgrQTnbfShXQZv3pXJEx0OY/2ioSSPL9nksSbzZPjSJ0UiC1QDuhc+Daj058a769qMfwVAJt5TtOtmK1Qrhv5RnMXbAnDmj/GwBtAO2lDLTDMPs/RwDaP04G0P7h22/p8RdfSIkhv7Xbg2FHfvWr5IcbEcoUw40IdUgJIYW62TGk0z7//HPNBO9wOOKG2nv37tWUx+oA0DYGVDzUBtDO0HagB30KbbqAQPdFQbHsVHihqbbRhG+BAoEF8o1fpSpuOWTN9QUNMFN6ligfpDtLlUl39Jblyd5iwotvdfoe+AC0n06g3dbWRn6/3zAnQzzGymJlsrIzCmiLfZC7XwU1dHXcRwvC8S74JshanstBqWDfmzjHxazdWkaOYW8wbMC9WfIMWBVJrML1xVpHLLE+1WOILtRKZAyLc5zMLqgl99SscJ4L5B12UAmfQI+H5jxgZFD7ZCdN3PUJ+zgVx5VqoJ157Z5fap9LTV0O0cs2KBs1WKooV52UcGuNwgNf7z7F2n55D+3swgax3bDtvUK7qSlQ1l/V7dUF2gxm1Ha5aXYhQIGFWXJ3VCn2a4riaaj8MJxHNpa4Uihr4Z6Prp4rUwBqE61XmSRV6I+snbJ7xfpCGfe34Mcf3kN7LRWddJLvHrsGszQhXK881cekzqkFfRAq9DnvbLDPTQw0Kf4W9rSMC2jHMb5g3onNfH01qjG2Sug3wTYojqFTbmp6XxnLfMv7TuO5KGOAdrL7VuqAtvAwzSV515kP7irnkSJLp9jfWD91dys/+uXpweIo7w5bCmvp6nAwbE+qgHb858CHHyuhzgEWKsZDC4+1x8LKFEMQ3V1IA9BWfthj42ODMA94fV5y91k1yYkBtFMCtH8cAWj/Zw5qA2gDaANoxwi0/yIVQFuMo/3118GwI243Pejro4WODrp36hSN/+mfJg1ms7JYmaxsVgeri9XJ6k5n/Oyw7d+/XzEhbNq0iWZnoy8Z1oPaarGylzTITAPQ5qE2gHbmtgM+vqhuhvFIoIb9roojujbS8sdIL8+q5ddehfe4frZ098ncRXnge1IA9JNuye4/ly5dos8++4wePnxI33//fcLlsTJYWaxMVnamAW3mYVliJtnbPRnclpmYJ3J5r8wY64gFaPNxUMVYqN36i5XjH8PMj5OBKZuJ5IEl5FFVMtFRZm7+TSFUybx2H1syz+zSJvI9NvfhIZb2G1B9cDCVOE535YBBPYo5zQjsLZBV/eFGL+HhdZOtw+eMfnxba6Rl/3xy6VgSL2pAqN714sCn/PEgNqAd8xiGeSdm83bXmL7/ue87dB0mIgHtBkOgnWsOaPMxmGMAjknvWykD2qRY1aB3HU3NI3qrhwy/iHg00HXt2mC+inj6qpnzjO8c9OaKbOm4AuNN2vki9HFLal/RgHYC7ctmon2lMukogLYCaP8FgDaA9tMCtMMwO5VA+y9Dneu/JQ1osweY+/fp0fQ0fTc6GvTSZskhz5+nr/fvp1v/5J8kDLNZGawsVqaYDFKog9XF6mR1L4Z988039Oqrryomhd///vc0MzOTENRmZbKyAbTNgTwGtQG0M7cd8LFbxaXWBk5AMpDJ0zykBnxuqirYotMmsqmq+arhQzL/MqxZUs/FMDSKz8hDb91wAQDaANpJ7D9jY2N09epVui/MaczDLRG4wPZlZbCyWJms7MSAdl4CQDvCvgEvWd8v0m3nee83kfeezvblefp9Y0Ou6I2aSB3yi282dd6NcoKKUB7GY1siY1gs4yTNuqm2NFf3PIuqbeQzOL7Z0U4q2aE8tuytRWQbdkthR/RCMj257T4a0M6mLTvyqMpiFT2MY7pPMbZf30CTbgxb5rXo8U0oPCdFKBGQw3DU9rmps7pIF7DWdk8YnnOeZul8gNznqnSPI7ugiq5OxTgw3PMYttMSi0MViiRAV5tLDNp0J3mnlICch1UL4w6hXesBnS3CdVaeowzA86JCMnU4i5jHMMw7MVvgrvHYJrbDHSVkixCnXJqLduh4aBfoJwSUE5KWSav79Pu1j2q2huNhT0QeTzT1J7lvxXpduY+tDVE+4HqauTauk4A4OI/o97eaDnfMSVG9fbW0ZUO2ZnVnPH3V7LwezzkE7jqpaGu24sPxREC+v05LCWVzK3rCIU2k95MdTbpAW47TnUj7Eu5bVy3lbdDOH+5RpzRXlHV7CZYSoP3fQsztL1MMtHmoDaANoJ0xQDsMs5cM0A57aT+6c4e+u3GDHvT300JnpxgeZObv/z4hqM32ZWWwsliZrGxWB6trsbyzw3b58mXNxLd+/Xpxmd0PEZJUMu+F0tJS3QczVuaTADKfZgPQTtXT9wL5QjGtvb5ZCjyh7QchR1LzwSzT+w8LJ+B0Osnj8YhAgM0TDA6weKSxiO3D9mVlsLJYmazsjLbHAZr1hfr2XbZsP/r2C7PBGPc+YSxYWAgkv46lOoaxOnxcHYaPSOx6+GhWWjofCIbAkA7KK73wpnKFylPZ7mNsvywsiU+33YbbU4T7/HhBvM9iXbOJXY/wMTPNJppXgm+n7Lwem7temja9MEveKa8YIkC/GmWfy5gxDPNOXG3GO+URQze4r7vJMzqR1vwmqbSk9q1FfUyX+1ui4w3OIdHxVR5XWYge1h+lsfOu1fRqNFjGAm09L20AbQDtjAParMH+hxQD7Z8mBWhTKJa2MHgGbt+mh0ND9ODyZVr45BMRRDPv6njCj7B9RM9sBrOFsliZrGxWB6sr3bGz9ezAgQO68OR3v/sdVVVV0YULF2h8fFxUb28vnThxQgxPorcPKwsgE0AbQPvpNgDtpxNoM2NxRxkIYN5tbMk2+zdLrhWL2D5sX1YGK4v9GwZTm7ykXpvMkpmb88gr6kitBxfaPQyGeQcGgyXDOK/tDTU6CXiVSZ9tUwFcsiRZCGj/NMVA+z9ECDsCoA2gDaCdkP3wA31/754YBiQwPk4Pr18PQm3mqX3+vBj/WkwU+Sd/Eh1mC9uwbdk+bF/RM5vBbKFMVrYYakSoiyJ4Qadt2lhYMITasYiVkS5vIoDM1BoPq1+3fENFp+fpwPn7VG69T39suEfba74B0IbBErQnEWiH5xS2VLuvr4/a29uptbU1JrF92L6sjIz3zIYtmvkUeQRyqaHrquhZ6pvykFWRaK2IJtKwEA7tHgbDvAODwRI3Z3m2Iglx54CHvGylzqiTqgoMEkXDEjYAbQBtAO2lDrSZPX5M33/zDT36/PMg1Gae2v39YtxrlsyReVrPHT1KvjffpLu//CV99md/Rp4f/UgU+3/2G/sb20b0yhb2YfuyMkTPbAazhbJZHYsZakTPWKgQdUxtM2L7pCPMCEBm+oyH1Wb0pL0YwWDpsCcVaMNg6TEzSaOyqWl4FpcKBssQw7wDg8GiT+8TXI4P40TR7nu4VMk0AG0AbQDt2IA2D7P/U8YAbWZhqM08tW/fFuNdsySOD/r66Fu7nRYuXKD7bW0isJ5vaaH55uaghP9nv7G/sW3YtmwfMQGkUAYrS/TMzkCYHTaWzHH//v2mAQvbNtUJIPFAnH675PmONh6ejQqyf/P+HNmHv8OLEQwGsACDLYp5B2xUVphHWxSJrbZQSbU16QntYDAY5h0YDJYOW6CrHbVUVJCrTLC5IZdqzplPRg0zb0kA2v9JBbUBtAG0AbQXBWgzY1D73j0xzrWYKHJ0lB663UGw7XTSt729Qa/tri4xnIgo4f/Zb+xvbBu2LduH7SsmgBTKEsOMZCjM5u3zzz+n5uZmKiwspO3bt9OGDRtEsf9nv7G/sW3wQPzkGguG0+n+jvadvU+/rZ6jF4v99Iu9X9M/Vn9D77bcJ+fY4i/yQjuAwdB/YDAYDIZ5BwaDwWDxG4A2gDaAdnKANusYzyw60Gb2ww/BRJFffx301p6cpMDYGH03MiKGD3l47VoQWvNivwl/Y9uwbdk+bF9WhpgAMgNiZuOBGIZ2AIPB0H9gMBgMhnkHBoPBYHEA7WdC7A5AG0AbQDsK0GYd6M/TDrTDxry1798XofTjL76gR3fvBuH27dtiTGwRXDOx/2e/MYgtbMO2ZfuwfZeCVzYeiGFoBzAY+g8MBoPBYJh3YDAY7OmxKED7z0NMDkAbQBtAOwlA+6/SCrTD9vix6GXNwoZ8PztLj7/6ih5/+aUYSkQU+3/hN/Y3to3okQ2QDYPBYDAYDAaDwWAwGAwGy0DTAdp/BaANoA2gnR6g/Y9p7/EsdAgD3IEA/fDwYVDC/4sAG2FFYDAYDAaDwWAwGAwGg8FgGW6MqQFoA2gDaD8tQBsGg8FgMBgMBoPBYDAYDAZbwgagDaANoA2gDYPBYDAYDAaDwWAwGAwGgy0JA9AG0AbQBtCGwWAwGAwGg8FgMBgMBoPBloQBaANoA2gDaMNgMBgMBoPBYDAYDAaDwWBLwgC0AbQBtAG0YTAYDAaDwWAwGAwGg8FgsCVhANoA2gDaANowGAwGg8FgMBgMBoPBYDDYkjAAbQBtAG0AbRgMBoPBYDAYDAaDwWAwGGxJGIA2gDaANoA2DAaDwWAwGAwGg8FgMBgMtiQMQBtAG0A7/UD7J2Gg7fF4CIIgCIIgCIIgCIIgCIIgc+KA9k8AtAG0AbQBtCEIgiAIgiAIgiAIgiAIQBtAG0AbQFsLtOfn5wmCIAiCIAiCIAiCIAiCIHMC0AbQBtAG0IYgCIIgCIIgCIIgCIIgAG0AbQBtAG0AbQiCIAiCIAiCIAiCIAgC0AbQBtAG0IYgCIIgCIIgCIIgCIIgAG0AbQBtAO3MAdpTU1N04cIFOnHiBFksFgiCoKSIjSlsbGFjDB6IIAiCIAiCIAiCIABtAG0AbQDthIE2A00A2RAEpRpsA2pDEARBEARBEARBANoA2gDaANoJA23mPcmAU29vLz18+JBgMBgsWcbGFDa2sDGGjTV4KIIgCIIgCIIgCIIAtAG0AbQBtBMC2mHvbMBsGAyWKqgd9tLGQxEEQRAEQRAEQRAEoA2gDaANoJ0Q0A6HBIDBYLBUWXicwUMRBEEQBEEQBEEQBKANoA2gDaANoA2DwQC0IQiCIAiCIAiCIAhAG0AbQBtAGwaDwQC0IQiCIAiCIAiCIABtAG0AbQBtAG0YDAagzWl6epqcTie1tLTQ0aNH6f33349JbB+2LyuDlYWHsMwU7jMEQRAEQRAEQQDaANoA2gDaANowGGxJA+3bt2/T2bNnRXV3d9PVq1dpaGiI3G63KbFt2T5s33A5rEw8iGWWcJ8hCIIgCIIgCALQBtAG0AbQBtCGwWBLGmgzL1ur1UqdnZ1069YtmpiYoDt37tDdu3dFff755xEV3o7tw/ZlZbCyWJnw4M0sz2zcZwiCIAiCIAiCALQBtAG0AbRTDrQffdFLHxw4QJWVlVF1YH8ltY/Oi/t5bPXCv/fT8TaPVJbHdpwOCGUdONpO8+B8MBiAtiAWOqKtrU30tJ2ZmaHZ2Vm6f/8+LSws0LfffmtKbFu2D9uXlcHKYmWysuN5eLlUv4cKivNpV0TtoWNNNvJM42HPjDLxPkv3encu7bJ0Rd3Wf8tGu4RtC3ZXkNsv/+7pOEwFedvoSNtIbJB/qFEobxsVVFrJv4j3xt1WEdfxL6Y8HcIx784XjjufWm/NRN7eP0JH2D0uztVc60T7+qSzWmw/BcXV5JlDP4cgCIIgCALQBtAG0AbQzgigPT9wnHbu3GlaxwZmhb1m6fjbwX8X1rqksq5//E5wu7fraZar48FoO1XuP0AHDhynGw8AAGGwpwloMyDJwkh89dVXIrR89OgRff/996J++OEHUwpvz/ZlZbCyWJms7NgfXmboWNYyeuZZ89rV0o+HvijKvPusutdZFTQdZXtX9crQPV9Hl3xyGUdCZayqdsRUv6t6Xajuw1HrTp3kaxDr8WvlJ1t1vgh4Uw3H3ZZ1Uv87MhAFaPsclBXur4prnXhfl+7hsyu5NgFBEARBEAQBaANoA2gDaC8u0B6sl4F1SSnt37/fUKXC363DzPd6no7vCu1z1MkB7VIJaM8roHm4jnfI+Q0AIAz2NAHtU6dOkdfrFQElg5aJGiuDlcXKZGXHA/jqcpZJkGpz3jbK1WgjLVOBrqhQ7SlX5t1n1b3OOhzVS9pt2SgBbRcPtFcEy1hW6YgRym40XXcqgXb4GmQlDLSTCcfN3gsTfc/voM3P6t3nxPu6fpuAIAiCIAiCALQBtAG0AbQzBmjXD5p1n35EU8PXyTXgIs/UfHSgPSgDbReANgz2VAHtkydPiiEkAoFA0upkZbEyWdkJQc6camPQOHeHGotXyqAr0rZQBt7nZAHteZq80S/Mdw7yTM489UA7eWWlGWjH2dcBtCEIgiAIggC0AbQBtAG0MxxoHx+YTQg+JO6h/Yhmv5ii26Me8kzcptkHj0zXPS/s5xH2+zKGfWAwWOqBdlNTE927d08MI5EsY2WxMlnZiULO6SigTD+UgSpWsneMPLdGyDM2QtN+E8cw56fpyZHgPpN3zMPOuRl5vzFhvwyK6Zt59zl5QDuW+zk5OaOFoRHq9k/fEduNuO+0P7H74J+hybFQO5yekcKERIXQbD+pPY5x++p4aJsE2n7WJ0LHMukV2qp/kYF2nH09UaDt94XuCbu/3hl8FIMgCIIgCALQBtAG0AbQXjyg/YCs+4P7vPOxyxBoS//WEb8fA9nX247TO3rbVZ6m2w+U0Lu9slD8W+mpG/ToCycdeJuL8X15FoQRBssgoN3c3Cz+N9mgky87dZCTj8GsBWIs2V6WThzeLJZAzq9fnt2SrwlxwMIhHLM7yFYejNebZVHDwjvUWp2rE/N3Oe2q75LPYW6EdnF/a7zhNwSSTMeSGEYl8+5zsoC2nxrzlhvclxmyGdyXg20O4V5vM6ybJYwsyFqu2XdZTj7Zx2IE275BOrZ7nfY4Vmyj1oF+qttuAKG9DjqYt1I/nvSKjdQ4dEcLjDXaqAC9rpZSWmWw7ebyetOxxFMBtOPp6/ECbY+9mrJWLIveZyEIgiAIgiAAbQBtAG0A7URDjsyb9Yem+pIQcK6NBLTfMU4wKcXefkSfflAYORnlrg/I80hbd+H+SipVbXt8YB6EEQbLIKB99uzZlIHOcNkp89D22mT4rApZYC9fGTnB3Io95JlT1tuYZy4xnQI8zo3QwSiJ7ZYVW2UQ2LSN+1s+eQwg4TN5lqRCtcy7z+qQEyaAdr1+DG19r+Q7io8DEaWCqR57aZR9llOrWag9HQk2R2hX3i7djzHa42DAuD/CtsulZImXqtdFP47d1sz00Dbo6/EAbU9bfmz3AoIgCIIgCALQBtAG0AbQjh9oV57ppRvD1+n6oFYsXvbtbx5JUPm0CaBNj76k6wPXqb02DLYL6bTdRa7LTro+EfSknrJ/wIHr/dQ+cJvmH8zT1GgvfVDCweoPPtXUzWt/5TGy2q/TA/BFGAxAOwkxtP3eftrHActdHWNyTGX7HpUX7Aj5WdiGW12KfZaV22TIpQDNG6nRycKT+Gl6rJ+O5S03hF32Yvlvy/IqyMVCjfhmyO20KEDmPvuYDM63y7+vquwKns8NC1dHLrn9yX0gzHignZVP9qFBcg/16+tWPx2RPhwogbZeyA4Zfge3b+wZpGmfcD+9I9Ravc0YaHutnIf+cjrS4QjtN0iN5RsVH0QmTZwff6+fydlD9htjYlucvuWgI9vNtauscgu5WagUtt+YQ9Eew+1q+haLI94oge1Vu6vJNeSgS85+mp5Tn9dG6Xr4fXfI3VEh/83UeaU3hnakvh470J7h2tFyOtjioMlp4dpOj9GltgrFNUp2H4QgCIIgCIIAtAG0AbSfSqAdTXI4D5NAOwwlhk/LSSEVxHmKPtgVLn8/XdfQ6C8lb2w5/rYaaO8n5xeImw2DAWjHATmfXU5Z2zfSZk5ZOetolTpUQE4F5905Rvukv2/TgVK85+66kPcqv886snvnI4YCkcAj7zW6Xcejetogxre/XwG7j9lttIs7J20okqcAaMekaECbD+2ykmyTOkCW/4DBQVbes79uSAtqeS/nqCB3rFG5IkAPeOfpAe0ZOhJuDysqtJ7Lc7JH9iqFJ7FfDl9i6VdC4YEKqZ6DzpmI4Vwu+RYBaMfV1+MA2j6uTwrX1q/x3pZD1DTe8uNlEoIgCIIgCEAbQBtAG0A71UDbOvogLqAt1/EOubikkI8mrLKHdasn6vEdc3ypAdr1CDECgwFopxhyKgDcWL30e27LiL7H59BhGe713CH/LUvUUAM8EAxvo4Rf0cDfSgUo54+BV27TYEoeCJ8moM17u/Ne+EqNUIEass5xv+XVR01OuKq8KzL05aD5PvsdA+hdr9v2mAe3rcNKl26pYbFf9KjWb68zxgkm52bIZbeSze7QAHL/9CDnLW4ODMcNtHOMgHYcfT1hD+1gPH3XrTEF2GZJN6fjSJQJQRAEQRAEAWgDaANoA2jrAWP7bXrwzTzN+me1+oZ3n04O0J4fUMH0XTri/l4o1sUB7V3H6EvwRBgMQDtuyLmOdpWX0r7yPUoV50qe0ctUXqz+ASUoXrZiufD35eJ/w//P/515uPL7GMI5DmSGYaHLsk5Tl1r839Vlu/iY2UZe3k9NyJEK8rAQGAwm6oiF27BL3tFRgDb3seCI0xi2St7YYaDNe++K7UrZdpY9u1yZMDSrImLcZ4XX87TRdmN0cIXxxxQW8sbWUk0HhTa/OWdllFjPEYC21I5ZOBwr1VWXUkHeRq0HdKqBtiJWdmJ9Pd4Y2pp+F76W23PpWItNDO+Cl0gIgiAIgiAAbQBtAG0A7SQBbfMJFZMEtGPwDtcF2iXKemAwGIB2smJoz/sHFWE66kJhOow8n40kAu0hM0BbDhMShoVuAzBmJHXZvNd30Cu4MWUPhE9EUkjLxpiBdgEXb9kwyWQYaPvNJ3DUSyYZCfq2eqNfAx5C+8dslLsixkSSEYG2n+zq2OFRvd+TD7SXKZJOJtbX4wXawcSf1bQ5QjLXVcX1kZNUQhAEQRAEQQDaANoA2gDaZoH2bHqB9sBxLiHlp+QacJLzslquUFLK6/TlA2Xd6npgMBiAdmxeu4cjQqVpLvnjrrYRDSTe1WQTxiaWGE8rlmjQNdBP035VCBKnQWiISTmpnuShLXkMr6Q6u4NcOvVcGmB1CX8bGlECO/8g5eqAtF0dI0+ph3YSgbYZj/t5v5ywUddDew9dGtJvOy6WpFK4rx6vP8rxrosel3pObgcShFa1jWXb86muzUbuGyM0Pe0Xj3NzjEBbETP82eW0q7qa7M5+8rAkpnGAYWWfiQa0+6N7aMfR1xMB2nLCyRFy9VjpWGU+Zak+IGxOUfgfCIIgCIIgCEAbQBtAG0A7hUCbptq5GNq3DYjGFH3a1k7tNid9+QhAGwYD0E4u0PZHSbq3TJ0cjwPPRjG05+fGyN7WSK0dDpqeU8VcLtaPuczHyw7DwskOGbI1jhkc46SDWoW6bM4RBUxt3S2HI9lcnE+ruCSGdi+AdkJA+1b0+6lIHCnVPSIlB1V6EitBuKtDaDttVnJHuU+eFhki77IbeIpPNmo+lPAfZTbrhQ7RCX8TGWjP0DHJG3mjbvuKGWjzqwt2N0bZ9rBiRUTS+nqcMbRd9kZqbGnUvX8eO3dekbzGIQiCIAiCIABtAG0AbQDtzAHa1xWsY4o+kOJk71fC7pDdOFUqHV+zmJQSQBsGA9BOE9Dmw4BY+qWYxPskT8ttupBLCjUhJnP0K+Hms8tDv3H7+JShKCRY6LXJMZW368EvPxcjeCO550LQrCOfi5sd3M/Tkms6NjOAdmSgrWwDOvdT9FjO1Q0dIsXVZqEthrSex/4b1eY9eL1WLuZ2PnnmtOffmLdc06547+djQzrHXi+D8iyLAdCW+oOJ6+zr5zzChWtrJhmit4v7CLOMjvQYrGyYG+HuxTIqUHxkSrSv821C7l8RNWmV71/9YORkoSbC4EAQBEEQBEEA2gDaANoA2osOtHfS/tp2cg446fpEsK7bbQe4ONmlZL18Q0xAOe+fot4zlfLf3j5OswQPbRhsqQHt8+fPk9/vp0AgkLQ6WVmsTFZ2SiEnHyKCiz/Ne1Mz0NXoHKRpMeHgGNmb8nXBMe9Ny7ykj7U5yDM5Qi67RRNXmfd+bd3NJ3UsJfuNMfHcpycHqbFYThq5qlKG4Ks4eGif5rxoc4xiIyeuzLvPqQTaqg8E7H7a+0NtYIRsllzjWNhj9Yq/HWzposlQUkp3j4ULSbKSu3fzht7crXl8kslcsrHQM6x9jPXTsbzluu1K4f0s7BNsUzPBNlWpjNu+qtzKXTeuDQn7tfawECnCec/xHtrLKNdiC56T7454Tsr2vZJab5lLisjDfxEQl1vIPXmH/GzVg29Gp+xcFdRPvK/LbWK5cK8aycZWXhiJeWVPXlGEcymwWIV+PiMeL7snjeU6fRaCIAiCIAgC0AbQBtAG0F5MoP2OBJr5kh4Mn9YmeTzqlMpqPhA9IeTxy7OaugG0YbDMB9o9PT302Wef0cOHD+n7779PuD5WBiuLlcnKTi3k5L0/eVg2Q427l0dP0qiI/WtuH03YBF+/7NEZIdHeJRF+3qEjHFjkYwFrYfcyOjYwk7QHwsy7z4kB7Uu+6GE2GvPiS+6o8N42lYwxEog10z60MbQL4kpOyV1PbsUBu1ZKwB97AlMj7+uDWWbLXE6NGo/3xPt6rIlZWbxvT1u+qeSY9km8SEIQBEEQBAFoA2gDaANoJwy06+MA2qUfX5d+9bSGvK1LTqtA8wP6tFb42y4ZUO8/c0Pxd+eZD6hQD2bv+4B6R2d1695ZAqANg2U60B4eHqarV6/S/fv3RY/bRGAn25eVwcpiZbKyE4KcUZf8+xXQUpmczk+XmvYoALGcZG8P2Q28UN1tFbRZlRxuVV4FXRqySZ6dmsSN/hFqLN+mC8Y2l1eTJ+TJO90jx9xelmfRPTcFbMtKXsiDzLvPsd5rZXgJPQ/tzYowG8G/2ev3cGE/OC/l6kayVW80rHvSaaHNerB2xUaq64kxcafQPuqK9cDrSjrSZqNj25drwof4J7uoQK/+rG3UOjRC9sp1uu3EPya006zlCq9otz/YH+z1+lA7t7KRPLdsnPe5SaAdjiku9Bl1QkUFqC+uJvd0avp6rEA7/JHI01Ot6efS8Qr93eXFSyQEQRAEQRCANoA2gDaAdtxAO7PsEc1+MUW3J26L+tL/ALQQBlviQNvn81Fvby95PB4RUDKvWwYrWXzkWMT2YfuyMlhZrExWdiY8DE17x8gzNiJqetpvAB1naHJyTAyXIIJBfzAMQfjf82OW6LBvjoUaGQnVNUbT/sx5IHwa7nMkGDo9GWoDoZAYZvf1T9+R2s6kN0GPedbGYiyLtcHJSf22G25rMbUz1ka9BtfCJ5zrLeH3OM+THY/LycKcBOUaYqF+MvtFSby+4f46PRNT24AgCIIgCIIAtAG0AbQBtGEwGGwRgDaT1+sVwSTztmUhJFiM35jBkLAP25eVwcpiZS6dBybOU3RFqU5CRuHv25epEkkuvYdC3GcIgiAIgiAIggC0AbQBtAG0AbRhMNiSB9phD14WOsLhcFBbWxu1trbGJLYP25eVkfkeuzoJ7oq5MA1Z+dTa008e5tU7ZKN92/nEj5akhQFZLE/tp/k+QxAEQRAEQRAEoA2gDaANoA2gDYPBngCg/dTLN0i7VkSLwZsbSu4IQRAEQRAEQRAEAWgDaANoA2jDYDAYgPYihx6xt1RQ7vZ1tGoF57G9Yh0dbOrSCUUCQRAEQRAEQRAEAWgDaANoA2jDYDAYgDYEQRAEQRAEQRAEoA2gDaANoA2gDYPBALQhCIIgCIIgCIIgCEAbQBtAG0AbQBsGgwFoQxAEQRAEQRAEQRCANoA2gPaTCbRPnDghgqaHDx+CusFgsKQbG1vYGMPGGjwUQRAEQRAEQRAEQQDaANoA2gDaCQHtCxcuiLCpt7cXUBsGgyUdZrOxhY0xbKzBQxEEQRAEQRAEQRAEoA2gDaANoJ0Q0J6ampK8tCEIglIhNsawsQYPRRAEQRAEQRAEQRCANoA2gDaAdkJAOwy1mfckwDYEQckG2WxsAcyGIAiCIAiCIAiCALQBtAG0AbSTBrQhCIIgCIIgCIIgCIIgCALQBtAG0AbQhiAIgiAIgiAIgiAIgiAAbQBtAG0AbQBtCIIgCIIgCIIgCIIgCALQBtAG0AbQhiAIgiAIgiAIgiAIgiAAbQBtAG0AbQBtCIIgCIIgCIIgCIIgCALQBtAG0AbQBtCGIAiCIAiCIAiCIAiCIABtAG0AbQBtCIIgCIIgCIIgCIIgCALQBtAG0AbQBtCGIAiCIAiCIAiCIAiCIABtAG0AbQDt+DQzM0PXrl2jixcvUnNzMzU0NCQkVgYri5XJysYACUEQBEEQBEEQBEEQBAFoA2gDaANoJwS0GWzu6elJGGBHE6sDYBuCIAiCIAiCIAiCIAgC0AbQBtAG0I4LaN+4cSPlIFstVicGSwiCIAiCIAiCIAiCIAhAG0AbQBtA23RnZaFA0g2zw2J1Y8CEIAiCIAiCIAiCIAiCALQBtAG0AbQz0jM7EU/tK1euiMIgC0EQBEEQBEEQBEEQBAFoA2gDaD9FQJvFsV5smB2W2ZjaANoQBEEQBEEQBEEQBEEQgDaANoD2Uwi005EAMpZEkQDaEARBEARBEARBEARBEIA2gDaANoB2Rntnx+KlDaANQRAEQRAEQRAEQRAEAWgDaANoP2VAezETQSaSIBJAG4IgCIIgCIIgCIIgCALQBtAG0H7KgPbFixczDmizYwLQXsLy+8nvmxHkz8xjmkvzOQn1BfcV5Ef7gCAIWvJzCvSEtClBc7geEARBEAQBaANoA2gvOaDd3NwcA2zuoy/mH1DggaCHAZr9rD/Cti6avR+gQCBAX9zsk36/NfONuG9g/gvqM9iXHVOqgfb0QD0V7M6lXcW5tM/SFWVbi7RtQXkj+dnv3i7aJ/xWsHsP2SejvWTPkN2yR9h2Gx1pG+FA5xjVlQtlFOcLZUdQeSk1djhoelFfuu5QY2W+eB0U5xDW9KDw91xatWIZPfMsr+WUlbeHWgfG0n/MvjGy1ZfS5qzlqmNaRqtyculYmyN4L42U4Dm57UK72b5SU/eyrHVCm2ukybTA7ZngfWNtt9Ia+XyfCPnJVp0f6lOsv9bTtKn9hL5YnBvqc+m6VjPUKtyb3Lxcar01I/1mE8YK5W+ZoUlntdD/o4xVIRXsriD3k/7xJtL4Lc4N+XTEUk+Xbow9cefuaikV54JI/WvaaQm2F2G7gy39xuOkWJZOm8mQOcXTUSG1+4LdpeT2mdvvUv0eqW0sVn/wdBymgrxtunO2215NuTkradkKpnXUeGPmyX8p9Y0IzwR7KMvgmaCuwxHXuO+/ZaVdwphdkJefceM2BEEQBEEA2gDaANpPLNCOyXv6+heksEez1GW0bd8kPQ5t9g0Hvm/PhX59/A31R6gr1UDbP1SteJk5MmDwEuIfpFxuu30dwRdD/0BF9H2llygHrQq/NFU7FL9nPbtM82JlrJXUOLRIL0tG58BAl73C1PGvKk8fUJ12VtMyM9d0RS5d8urAu0TOaW6EjuSYuZ/ryDbmT/l9k9pY1mGTcHcpa4aOZSmvc+Ot6NfYP3BYeW/Sca24PiWNIXq/ZQrErF4X01h1ybcIx+kX+h4Dren4IBDL+J2VS7YnBhjOUF2ODJftXv3tbLt5aLiHJg0+lB6UgPVGCfpm0pzitijbfW7LSBxtY90i9IcZOpKlP2d7WnI11/KgM13tM/TR0ejjeKo+yPUcNvdM8Ow2sk/Gdtz8/JFp4zYEQRAEQQDaANoA2gDaPIzm7AuXwfb2zySg/fW4U/p9zB/69dHXdGkRgfaoq5dOFK3lXmLyyaP3Ul7MvZT/9l26aO+jCeH3O58USb8XtXmiQJZz9HehbV96+7T8+9QZ+nW47OW/og2vbtDqlV9pIOjigKKz0gs6fw7+W/WK4/vx+lepeH8ZHfqwig5V7KbNLz+n+HtBGl5gp51qGLKK3nh7Dx2qqaKayjLa+formhdY3nsusXPyU6sC5DxHm9/aTeWHDlHVh4eo+K1X6ceKuoV2l0rPe79VBisrd+u28SdLHnp3jRJQvFTpiLqfbffzyjaRjmvF3ZvdrcMhEHaOVoR++0PLcEZd2wv7fi1dn5+/skF/vAppzSs76PztxfnwlpUusBRp/P7NWvr5L57TwLLcescTAbSt7/0v6Zx29dzR2WaEXlOc+3Nk04OE0130Ynib37xLV6Yyb05p3/tr5X1cXRH1Y5en7Q3VvX+ZWkbTf5+Kfxqs/ye7Tis/SGwPH9cKem3PO1S8p4BqLnjS/tFRDdpTBrPtpcbPBB++R4V5OZoPclqobXzct9t3S/tKYzkEQRAEQQDaANoA2gDamQK0b9AD0trjudv623eN06PQNv4xGWh7vgr9+si/qEB74loPtbc30hsvyS8xWaqXFCUYfYUs1nayXw6+rHhad0p/++OZocj1eRpodWjbF3c36P++q1o4nnZ9NVfR5ufl49xc35/+wdzgHC5VyiE11u+q0j1+y/5XTXjqpcZr8sW8MrLqXtOP6I2XuTAg5bbknBPnYcvaTFWTTt1nP1Lcz10dY2m5b8+8tJNuPvEPHcNUslrtcbc98kcD4Z69rPbSS8e14u6NNIaMOeg4gyw11WS9PJ5R19a6Z03o+qwhy/l24/FKVAe5JhbhOG+fliBzysGSifHb2nyCil9fpWhbx4aWugfnBHXWyQDvb/fqQMmxjzQw//WOEZ2Pj3ukv+eUfkzXpjJvTjn3zhrNuURe9TFDx9Yv0wDUMyPpvk/jZK2rFsaSKqq3OhTHt39t6Li27pWuqX0gXeON/NFR8YE/VfLaFJ7Zhs8EZ09Q/sv86i11uzI+7pieByEIgiAIAtAG0AbQBtBOL9Dun/xGgthfDl6mzwPhfz2gG0sQaDNd6+6g9vq9Co9Z6UVVFWok/8MWav+kj2bCLzDnYniBuW0AtPnf//CBmAxTowsdQTBSky/Vt/K9RfDy0z2HGar8O9nTq+qs8FJ4oZN6+vroyoCLrlzuoc4O9rJopWLpBX9tSj3MXdzy8B9v2yvBNXtPL11xuch1pY+67ReDvzeVcfd+G7nnEj8n/8B+uf68IIzp/LSH+vqvkGvgCvV82hm8n8fl9vNipSMt941B2khex9NjI+S+NUKesTFtkiz/DHnEv43QpNcEkBO2nxS2ZfuY2j6JQHvvau0y8oO6XqRhb8rXtMvOI10rn3xunklz5+afvhO6fmM0HU5sJ9ybF9VjyISLOqIBJnZtJ8P1C+VNp+f6ymBvFX1w7qL+eBVSxwU7DU5FbheeyTsxJWPz++5Eb4MjOtc0HWOiZvzuoI4OGZZVvcVB0ZxqwzAZYjuJud/4aTrcHvj2lUINdh+n9eHzWbVH47HsaXpV26fe/FgbZ7p8teTB/e6pXvJm4JyiB7QjrvoYa9QJY2EMtP3eseA9F9v1HdOJg6P3hwnqtoXaoN2lGCP/+Ivwh5gPxLmxt6ebnG5v5PY47Tc3zoXOxXhcGqai1TrPQymSvVxeMfXCtjLtM8GAk3rCzwTtJ+g1/mOzfczUces+D/pinAPnZrh+HMvYKPd/P6ADBEEQBAFoA2gDaANoq2WjrySAHaDOTZvIdkf6QREjeykB7fn5UbILL8eWt7kQFCsqxJcCOxdq5Mfb3hNedC6K3mPzqQLahScN958Zc1Fna5UEaiJtm26gXbpGXlL+vs2lDz/6OqmuYge98NIK+vHzv6ELqYIPcyNUwAEEBkM6QiFitNd0ULz35dtWhLZfHYIiiZ2T/+LbXLt5n1weneOcGKTOthP0xvpV9MLzz9GG/efSDrTdlo3B37ZbhJdtBxWs0ELgXU394vVoLN+oE3t8G9n0YhT7RqiueJ1uDGH7kIMOhpZsH0tZOAgOaL+0hl4Mw4nX6w1e9jlvypdzaPP654yB9nQ/Hdmtc24r1lFdj37Yg+kbVirQSUC2bHsFufqO0SvqMeSunf4x9Ft5l+oaCffpYN5Kg1jwG6lx6E7agHbzZ7F6STroSJ5+DO7c8nqanFPnODgsfWhyTQptSu+8WZuaVG+vo5zDqQE9JsZv79gQ9do7RFCWIx3T89Q6pmonQ42Uq9NOWOiDfU1Gier8ZK/foxsXeFmKY3Z7r3dR8aZlkse+Eij7qe7V8Bi4h8rfCnuo/4NqpcQMla0Kl/Eqnewdyrw5RdHuV9BqKdyJ8aoPV/WvpX7y2rY1hkCbJdZcZdBmN6uSbcbaH4Kaog9+GzzeXx44J8Yrr8tbbtBPNpLLp2yPuuNWTj7ZNXkfWNLrfP341PzY6HfQZsO41cr6k6bpLm7F1hpxlZ3RM8H8xBB1C88EVstO7ppW0LSJ41Y8Dx6zUqPRHDipH0e+tTpXp+zltKu+S9n3hWecXStk5wuWK2QVt/2ihKODIAiCIABtAG0AbQDtjAbaV7xSPGz6ZoTePVJDFR0jctyRwBdkW5JAe55mbvSJoUfyX+JfwviXihxxeX23yluSf4Epao0CtD9rig60o3gquU/skD169zRlCNCeoMrtXDzT1cLLrm4iNi/1XEh9KAL/DS7RJ1tK3Sl71OuHDOgLHhMLn3D+Ig3OJH5OE13lCo9/9kI6PacHhHok782OT12LB7QTkvAyP83D7H7FqoZIOpIOoL1pJx2SPlb9nOzTkb0pN++vkiGdGmiPWQ3hk3SvVbF8p52HTV9L2avPIAa0t8tEAsLlGlCaKqB9xhNDv7zVaCIZWy65fXoAL/p+DCxG3H5FRWoSfMYwfrs+7aCqPDn0yH7u3nra8qOf5271B5kZasyLfn1S9uFoZpBOlsofgsv4evz9lB0OI1LRQNaaN6Xt6vhQHUJbX8l9NO4TAXxmzSnKdv8KlR/Kj7LqY4R+z60Qqip5RRdoXzKTYHW3Ne7+IH2sy+HCqQnXe1mEsSMMQz2aeNN644xfqkOZM8JgvGcJJ4V2kWWi/qQ+E3DX7YW8Q9QR7ZlAmD/sNj4U3Vq65I1+3PzzoPn7EwTUB7Mi77Os2KobUi23WA3Bf05tANoQBEEQBKANoA2gDaCt1OjXsjf255dO0zHht9qK01zYkcfkvbI0gbbo7dVzkdpPl6mS9QW1s6aF2jud2jAF3AvMbyvPkPtGP7mH9DRIbuvvZRhtBLQjQGrmLZXFJdd6z+rKGKBtO5qv65W1q/IwtdodUkiG4ct26ujooHbbRbqWKqDtfIeDkx+bgBwz1NfZoYIiiZ3ThKuDdr6sbUdZefl0rKmRLg2N0DRbUj4zRPYLHdRha6eLPdfSDrTVy+h/tm0nWZpayHq2gcrz1miWyxdXniCr1Upn6qvoNe7jz0HnjOSV2bid22f9DqqqaxT2aaE6Sxmtf94A4KYSaK8upJYz70n9elvLSERvyhrh/N5drQe0x2gfd+zr3yqjumbhWjU3UFXpNgXcsHllqMd79b34+m6ynGbXV7geNXvlcA3q6zF1itboXCN+xYhUlnBt2f3YuUkGgPvsY2kAeyvokNVovOsn18Ag9xGHXzXBEvyF2kX4OvDtYrsMbTWA6PkcKq+R2+BmVRucuNYttLMqqqqQP/zlvP0eWWqE34436ntkphFoz88PUTsXNmr3udu64SlW5+2hOrEfNlLN/jcVc1Ju06A8/7TkKvpn4aFqOnPWKsbsfvetV6ImO05cXuptkONfr6zs5yDifjmMSEsv9V34QFpdtOVjuQ/6B+Tx+rVDTTScgXOKst2voeNWLiSFzqoP/4CcdyPfcpYaS3Q8tL1WDiyvEcbWj4L3TrjnlgrunnMxnGPtD+GYz6XhEBmFQvucG6RTR1l8/vek7V/YupNqWL/58Cj1jKmP7TnKr6gSj+1M00dU/PoabXxpPmfE88K5fHhC2F4Yl5pU7ZCF2ZlyUYsY03uv1B409Sf53nksW+T7UXNWscrOcPXBtR6y7FojXYOafmfU49bcn+Vm7o9qJeCmN6mmPjg2Wj7cLc/b/Lg+dZrWap5TV9Dmt3ZSccWhlFxDCIIgCALQBtAG0AbQXsJAe4ju/yC5Z1NHcWXw9+OV1HFzQXbS/np0yQJtFnqELTWtK1Vlut92SAw1EvTcNQbascgIaD+z/EXavH2jQlk5KzUeVS++dYg6uq9lCNBmQFi4bpX5uh8D5JfflVRQaSH3ZGpju9468//JHyLquqJ4YvHehjM0MzOTlHOaudlH7edPKCCjnlZtz6W6jv7Ux7w0AbR/zCUGC8cRzeGgRnG9KnkWlxBuT8eMFtK89Cad0Uls+mK6gfYv/kiOnnYqDH9gWK321B2hN8LHtGkvdfY5uXAl8rWatsvgbn2JNvnfmQ/f1CSW9bTJwPGF18u0Ccis1QqoLV0PvUSRQps88rMwNNK5tuerpWu7Yt/FtMYSNvJatIc8BSe5a/fMpt3aZGznP+La2jLJw1w5vgYT8ir24z5A/rLSQd5r3dK1CF+/nRZr8DdbN40vOtCep8sNBXIM5hKrBmjptS1r3R5uHArD6THat0KGWe/WaxPclW+Vr2ndjdSMu0M99fK9y6qQxjLXwVA7eX4bnbk8ovzI9+oRebv3uA8krc6MnFOU7f5Xwvl0c7BTu+qjdffz0squus4+shav1QBtHnq/wXJzqBNeSuWvpk5ffP0hPBaW8DGfJ1yh7a3SmMgnM2UfdO3lciiTQov22KreWqVYZeMf2sd5QGsTeL4rhaXZQu7ProXyAwj1r9evP9n3rvvAr6XjKzjebfp58Pgf5PPcc/ZS1OOO6/7wySrX64yN/JyZdTg4d/FJnkOrkM4sdiJeCIIgCALQBtAG0AbQzlSg3TU+K0PrO51UUf1x6G8fU8XBHpKctH+4T64lC7QF3exTvKyFXzI+cU3oe/4kG2hHVBiO7hBfXvpuzmQI0J6ncVcYJLVQzaE99Ma2VyKCiIL61CVA7DvyG9kD8mT8bSOxcxoXP46IoLO+iop37aD1L0eA2ytylWE70g60n6Py0+3U0dlDg55x8k6MUJ/9rAyBX84XXrQ7qOfKEE1MeWn8hovsPDRsGgp5jG5VJlC9YCeXe1TYZ4KGr/XRRVs71XD9Ky1A+6U/0k2Pk05VvKpN+qoBS2fJNTFMb+sAbRlSvUJ159vp4qd9NDw2QRNjI+TqtQv3ukUGdj97h6aZt/pWGTgeamJxW4Xre5Nd33EacgnXo135AU26Hrf1gPY8dZ2qovKKMqqqa5HLEq7t6A0nnTwoA/Wfv3MmA4D2Vrp0N+S1nyePYe+ebpfbxYTQLlzBdnGmUvaqXm3p14yv60s+Er1w+1xyG+zk2uDPxSX5MzR0zUWunqPS77//2E7XWNK3a8PmP26lEGh7WrlVPcd6RY9Z6YPKs69SHQs/ZO+lIaEfTkyMkqsvOA4dylshhxAZEsb+W/Wq/A5C/+y/RuMTXqFNDlPfpxepvfkjevftnbRz125qGEsN9J1x93LA8u/I7Q8C6f2rwh9yDglzVTDR6XEJ0q6TtjuUJX8Aa+sfycg5RRM73jNM9sYy/VUfPge9zMHd7mvj1F6s46E90iWcVxmVH6oS5nM2tg4G751wz/u7Gig/HMf/2V/ReR2gba4/KMdCsX3OjNO1AaE/uOy0J/z7Hz8S+gdLjCi0n7vcaopNe8R70H3ZRaPCsY17BoOx4K0yZP15eZeYhPVn3HPKP1YcpUtXh4Xth4Lt8LyVzjQ3Crogjqfj7mtC/V1U9LJO/TPJv3efHNwkt5PTw6b3O5Unz9m7Wj1Rjzue+8N/9CyuE9r7xW5y3RgV54jBgR4Rois+nnjVz4xrqMYaBNks8XTv5Ss0OgPoAEEQBEEA2gDaANoA2lIyyC8eEBcr+yHNzd+n+yHNzfF/JJod7VuyQNsoRmVB20hUoP3GoRPiMtEzzToSfreefk9O6GgEtF96hX5XsJ1+94ZSm7euUUDtn/3h48UZzCPAm+Er3Vqv1aYTVFO5l/Jff0VzTfVjjyaum2cL5XtS1x9DMsmQknVOM8PUfVHtkdtCdcer6N2SN2m9OiTJitLUxPg1BbSFl+I2dVxRJ70dPsaX8smuSi43c/UjDXR1H1zNhe7oplFNrGoXnbfkpxlo76TbLNYuB2FeqnToe1N29IlL9LUe2jP03q+VH5eWPbuclq2Q9dc/5f/OEuTN0P5fy7Cuxd6nPc6pa3Sx6T16wRTQHqduW6gNNpygky3VdLA4lzbnrIz8wSyFYO9QfYvhmGe1ttOVieC1K/8l92HkYo829MfMIF20yrDnFyEPc358ZZ7WmlABQ8f1x6Opk/L1a/Ys2pioO2c0c4njTgRjGv8ivP+uKrro0K688bp7ycr1m73MK3aghPsQcyYUe1r1ce8Teezpue5NURztITq5X/4oc+QGg7pd9LfhY6u20kio/X5yXD73yiG/MN7K8bNfyPuAnJ75jJxT9JKhDnaflT9gcas+PG2vKQAlC6Fy/h0t0J4IA3thTmg4fYLqqkupIG8jrdIk5pX3ia8/qIC2tL08zimSmXLtUdQLwvjIjXNs3Psf/N9XvUPuax2S17I6menm3aVU8X4VnTrbrlrpZlB/Ku5d8RrzuU44WUv19jM+7njuj0uaM4P66xXKeWXZz5QfwsU49dyYwz4YtQtj6ihAAwRBEAQBaANoA2gDaOuob1JOBmnGHnyxNIH2nDLO6+pNaxQvZnZvZKCdX6NdmquEmVXRk0LuqjbcX7nsfBu551I0YPtnaHJyjCa9M6bhjd87Ju7jnxonV38v2Tsv6px/AxVvXaGMp5mC43fVyyFHfrKz2VyMTS4W7ZFQbMuEzom7hswzq7fbThc7tPf01Ie7JZgpeV4uCtBeRScHZyJCYU0M3tsnNdC1vUReWl/XOx415EK6gDY79pHLnVS+LQwHtgeTcqm8Ke1i0ld5ib583rfluNqm9Cuy+Tgw/mwOXTBIoDj8qfbDgJGH9k37Mdr00xhXgKQQ7NWcjTDetV+koVCC1fLfPCddB5vBypLRS7JXdRgU8ePr7z/W+SDAtUGjMTV1bSw+oN329svSOf3hlDB33T1Hv5E8Yt8LxZDW6hLfb5qH6U77LnnuqbXre0+PDVJfTw91d/fQlRspAtosPMgpOaTMqx+P0PTAbqmNfNAhz8/XOo9KIXZ+eXSQ/Lfek8/haIcCymXSnKJJhjoaXM2lXPURCgu0mv+I5dLuG/bQnrlJx9/JMTGW6ANt8/3BCGgb/D51Worfb0ori8g/4aKO9hY69PY2xXym1psfdZI3Wv2peCZolPOX/K/DnSb389OhDfI9qLs0HvW447k/tr1rY1rd93b7jOqZ8QNyTQEyQBAEQRCANoA2gDaAtq5ufCEng6TvAxR49IgeC3oUEvv/QIDbhh7TZN/SA9p83EgWS1dc5v06/7J8WONBq/DIOX2FvBMTND42rpXw+8RQXXSg/YcPyW63a9T5STBp4aFtKyQP0dZUJP7hof6KCq3H8GiDxsvcf6NaN9ERe7kf9wyT60ofddvDMOIjOWbwqtR4JHsvVXMv1f8QBJem7/3zdHrMn+A5+akxR/8azkyN0/B1F/U5uiXAXVciexruG1g8oC2BFtNAWwsNz72zSirv+LD+sVz9aMeiAG0W8oD3DmexX6c73lB4UwYBrN55D1PRS1zYDJZk8ENB1UrV1FSTxVJFlrozYuiSIq6cm0arQuzvmgs54h+kXA5s/GTjVio+cJCO131MZ5qt1H62Kiawmgywd+qqMK5NjOuOeRNTciJE6Tqs3mmcnPD2Gc3x8+Mrg7imYXLGAu0R2sElcfvw0wkxXIM0pr5jvP9t/loI58SHLtl5etB41ZFvJqi51F2D4b56KfnpT/I+pNZ9Ia/Tl3fShYFRLtFeFxWHw5P85hDZLZukFQ1HO+Qkx5k2p+iPlRPUza/6YHHzvVY55ETpCep1ew3HWXfTNsWKj9/uLqT3jx6l+oZGMY6yHGZCH2ib7w8xAm2uPbIP51W1qnHuw6BqLNVistW65k4anx+nngvtUmzuM/Uf0aGK3bphYuRwT+kD2tfOvMMdwx+kJJsRJdxL2RM9h85IYefMAW2z9+dM4SppPCg8JFzXau28UiVcZzav1FhO0CeucVU5HwMyQBAEQRCANoA2gDaAtr766RvJPTtAriObaNMmfbm+kqF24IsbSwpoT3NxdMXwC2fbqeNih5isjE/alts0aPwCc2Y4PvDB/x5h6S1bdl63X/YIe6dnJrVA++V9Gm83f+/bGi9Q/y2L9NsvSmzGZU+NUM8nJ+m15+XYxu4UTDYTrk4qXm98zzTyOeiXXCKnk/3jCZ6Tnxp3hMt7SdezP6yRgR5qObQt8kvwUgLa5TKcf+30mP5Yk/vc4gBtMdHcCQm8/Y/XS2nf32u9KfX3naDq7aHjfj4Y51jPK/lUzXv07v69VHWcAW0P7d8kA6s6g3bgOb3NFNDmY32vfqtKdwXIi2kG2to2oyfmoc1dh0mDMbhN9qJ8cU+Tzvg6tOSBtsuyUZWbYVz00N4Q/u351w1hG+/ZzcIfeM4VSf/+G4OVKHybUYLhJMfRvtFL5Vu1OQJWv31UmaBu6hqdLNXxSn55Z/BahI87w+YUo3avWPXxwmt0pPzXcjies3ISUu2+M3QsS37eYPH1jZNCGgBt0/0hVg/t8/S758OJgssMVl9YqaZirzDWlZGluZsmfCNkb/uQDlRWUst5dcLXFjr0lrzabXN9f9qB9sQ15TOBUQg5/cSerB3Xcu3YJNA2eX/s72+XP6rWG6x2OV0lzivlH56gbgbWFc+MDYAMEARBEASgDaANoA2grSfbza9kx+uFcdr9uwLa+fsCKlCJ/bbvkzuck/Y31L9UgLbK8/G1Q43UfjG4XPSKvYPOfPgm9/K9XOEZHfUFJlagHeXFzvHxH2Wg3XE7BfFQubjJz/4tnVElKpw+/aYGaHsH6jiPrmV0pGfM+MNBzy4O6BQbeq0mpLErdL7mTQUwMT6mMTq2Xd6OhZ3ou+FN8Jy8dGo3F64mpyKCR9gYFa+V6yk5f3NJA+1r5/bLHnk/y9d4x/sHlDHq0wu0Gdjo5kDRMl1vSv19x8lWKYPnrPeayMUSq/Hqb6J14TJfPUT++Qmycvv89e5GbTgEfz+9rnc99IB27x5FfNb2C53U0+eka9eHaHTMS+4PN3FAOLOAtvWA/CHumTyL9jrMjdCuv+H6QbMraUC7qPVm+oB2CMRrPxTeIbtlm6LN5decDcaMnnDR4W3PRf4Ad6uR/ifvLXplnCZcDdzH1l/rfjiTodzzdOZmKh/yh+gU97FVXvXQpYqX7qXeU3ujgu+Mm1OM2r1q1cczXDLFi71DEfadoYq1cn4C5pHNEvo5B67REEsI6OunV/mQI540Am3WHrmVaeXnHJqx7vI5OX57do2DJjvka1B3gyWpHaQrl3vkMDGn5Xv+UoVNW79Rv0nWBxdVDHoxvJfTuE1d4j88iaGVwuGTIh93PPfHdf6APGfmlNBl9bwy4KRy6ePHOro0F3uYIwiCIAiCALQBtAG0n0qg7Z2Xo2d/6WyiDz82hs8f7rXRl99zySFvdi0JoG0rXi6/vGzdK2aLl16uWbIy4YXsXd77LItLAJVmoH3t5Fuyp1NVT0oSfB3gzzWnlFyTbLm6nzw91YpkUX9scIQ8x3vIUqJM0LW5vJou3RihabbUfXqGJsf6qbU6V7nNgUbJgy258lLPBSsVqzwGg8c0Rn6/n/y+O+TuqadcRQKuV8hiDSatSuycvNTbXq3w7H/m2Y1U1+Egjze4/H/aOybU30gFWdw2z2+jM67xJQ20Bx3tckgBsa/kUuvAoHCtRsjetEcDftINtNnvnaf3qpbBK70pjby7nRdPUA5/ryvryc36BouXfqOL9uXIf9t1ZjAI7zqU+6zafZjcY8F9PENWKlhhcD10rq3njBxD+Znlf092sS0LbWlykBorNyrK+Vneh+mJJTxirj+qr8Oy7RXkunUneB0GVNdh/W46330tMaDNhUb6m394h+wDDro0NJL6vrXyTWrtsFJrW2NQLRY6Ur6Nlqna/Quvv0ftF3qC8YTZHFOv7Bu51Y2hseIOuToOK/ZfXfIRdV+bIO+1HqrZtUoxxjQOjATHN+8g1RWvU3hAXxgYT+FD/gz1Nav7VQ7Vf6pNcDncK4cnCW9fqALfmTenGLV75aoPOUnnWboyFmlfPoTRMvrNQRtNTs+E5iWLqrwVdKRvJn1AW/jd3qBsjwdbuoLHJ/RXdnxZ0t9epLprwu9973Hbr6NjwlwXPB/Wv89Q3houjvbxS1I9b6+Wx7PWHqGPOvtpei5VzwSqEHLhNnUr/EwgnJswFu3bvlyxzWuHGqijZ1BxfYyOO577M3LZLjxfcvd7e2lobPcHx3auH68oPB1M3AygDUEQBEEA2gDaANoA2lGAtv02yUFEFsh25FDk5JFHK6jnrrzH4/teU0DbuYhAe7qnVBNqxN4/qthmfKBbkdBRfBGyOBYFaHs/PSRDg9+mAlpNUE/ze5q4l3pLxFs+dUnLyFlCqGKdJedGEkMmhIFOSsKOCPesvZEKN5k9plX0bl0LddiTc06D3R1kPb4n+nV8VrnsvOe6Nw1Au0Balt9cuCqpQJslSmu3fqQBPEZKJdB+2+DYr3WfpcKXjb0pjc57tN8u3NPd0c/rpXw6E2oHI2b3MQG0J/obFFA4qrIOpwRqxw60g6EZlEltjZRDFmEM7r0RAnjNBXF6aDcpxuugUhRfme9bJpTzdjBcTDf38crZ2U6W0lej779pN50JJ9sUP7Y20BsvRatzBR063U59N2dS+pA/3HdS2e+37tUdz2Zu9KnAYg4dV4PvDJxT+PwAfLvXrvrIobqO3iB4jBB/u3lfTkzJAFnM//j6Q6xAW2iP9g6ylEQ/vheFa97hGFQl3I00Nr5JjXqhnbgVcJd8qQo70i2GSil/fZXpa/5axQmlg0OU447r/nic1H622sTYvoqqmjvED+58OT8D0IYgCIIgAG0AbQBtAG0tTO4aneViYl+mdz/8ODLQbjhBe60jMgR/fJ9cPNC+dUna1j39IAS0fYvooX2HjnAesvmVjdT+SZ/iRVTywvqknc4c2qHwhnP5lUC7KAagvZpfqqpYsh75nCeu8MvM15B9OgWedsK5WuvfoxwDUPLi1p106ny76CUY3m/QEVxaXFe5m9a/ZPxi++OXc+jdmgZx287LwymcdLzU+0koFmlFPq1+3vhFcX3eHqqzsm0v0rWp+eSc09Q10bO//ewJKn79lQgvqc9Rzlt76RSr32an4TSERfjx9oOSN6Rd8nBcExlor44MtFlMX+m6X2RxUxvp3bde5ZJzBs91fd5eslTmS/+u7EqV16iH9odhmPrYb/bRqQo5/EO+ypvS8LxnhsR7aj1dRa+tX6F7L197+xCdEbaxh71hw/vUHxL20WlDzwttp3Kv1KeLdIB2+NqyjzTW04f0++XKV+hdywk6lLcqjUB7jWmgHb4O7U1VlL91lWE/FPsBByUneqpCbeg5Kmu/GSXchzJsQv2hN+mF57lr/tvDdGcxgPby5+jF9Tn/P3vv4xXFueb7/if3nLvuXevemXPvmb1Wzsw6OXfP3fdkz2TvPXtmsmd2sqNmR6OJxhhjTJRE0RhHJSoxsv2t+IMoRBGjiAooiIiAIgoogiAILdKNCGhHsI0gyXP7KXir36p6q7q66ebn97PWs8Tu+vHWW28V9Keefl5akZxCR7JztftEYUml4fcM16Dm10+mf01z33xVKaU/35SqlaZggajX5C7lyYJP0ZZVc5UPC/5p3jJKzwn2aWGZqfRHHKLRKKo/3XpcKtNgvL7ydod+l/69jfgeb79TCrfNtRn3/K2PFP1ex5K3xJQNb71mPFRamEs7v1JL49nB++SRI9uMZVeqOqO8HkL3M8PfHYbSGVmWmujanAD719I01f3mN9Np3e4h2cv3Ts6o53G486vFNg+tgr/ngsd0Ml+6Nwb74MKxbaZz+yGVtMfvWwQs6rUxtX+9zXUm/sZZRqlHT2nLllxrsDz0t2t3dOdn6G+uc7n2fytM+2w1Hck5F3rgLm1nwc58SAYEAoFAICC0IbQhtCG0LXE0jZL0SR/XU8bRrDBCO4vStqzWJ4lM/Hq/to3Vw///y4FMabmVQ8st30qZY5ih3Xy9RJp8x5yJI2eMVVOhNElPYWm1lPVzzpJxF24bhSK72el1VS1IzoAV7Si6HJ9sNM4YGt7HyaOHKHV/qhZp6Yfo5OnhfReWmb7a7dEFMkduzgk68t0BSktL1SL9u8PBdXND/RfmOGMTzVRWJLUpO4vS01NDx8Ntyg2d+4o6j+WD60iOyVN7WZoYKzfYl4cpPS3Ul0eOn9AEldj/9aY49oU8fgtD5TWqLxU6jH0PlRWG1vE4bFMe+48ay+hU8Nj0fjt9Sgvx/yN6KYE36MiVeAltFkZ2bZeOa/g66nR53J7aMmkSxlP0ffCcHuGQz2VhqeHakNfJPX1CX+dkzinL5F96P6r6tn2o/JHo0++Pi+3kGrZxUryeXxoXiXmjtDD8/VL17ZK6y8a+Oy71nT6RXBHd8Ji/aeFwf7W9p94w3K+HoiQ+5ShMvxvCRVFZteKhaR/dvFxsuGbEOPk+WxonReb7bgOVFIYm6jt5PGuoT/n8nw7dWyrjnJ2ti135WJUPh0MZwKE+GSrzpLqGx9PvFKdxH3pv6HjMIl+17q3LRaHfDdlZimuBH4gGj/lI8PXgGODJAKO7HkL3M2Mf2b0+3ObhBwp63yvGY2g9Lr1yzrp8cDwa7nPBe2NDp819eDgiuadE86C7Qhp7WjvTg2OK/yYQYyo31JaSq7fU32KzaXfU9yvPDf3ero0HcW8M/s0t/41SfTfyvxkRCAQCgUBAaENoQ2hPeqGdk5OjLCEi5PTKb/aHldlafLebEoUEX/4NHZaE9ta0kNDO2LF+aJkv7IU2tym+Qrs5JL34A8j1Zmf5fc0kv9tHILRLb9i8HubDSWdIaonsqLh8Pfd2JRUVqoVM4YUy6UOpMW5dL7Ndb+gDbRFVVDeM4i+fTrpxtZQKCxwEU8llqnfIChvRMXluUVlJkbPgulRBDe1x7gdZuhWHRFODPqZHKLRFtv6ja3p91f83ca9F9BUVfidNdjaXztzujJu40GWYou1ct1S/bi21hZ2P29tYTSXnC5XnsqTsulKaem9fD66jOP8FwbFzvUK/ppVCW/omhLfxunos8hi8UW8UhYXjS2hrD+Saqqn0QqHtdWi5Dpoq9X4oq/OGuaca753110zXfbweAIYT2sE2FJ4votLyCrrV5FxSqPlGhc29ppBKLlfbtL+FKi6p7zGFRaV0427nqN1v5fFXcrXB3YNkB/E9nn6n6AJaNe4bKxwFo/qa8dL1siKba6GC6usqDeOKhXZ014MkruW/Owyvq//uaKgqo0JV3xcUUtn1W5b75vWyEoffsxXU3Gm+L5r/ziiim+3xH6f1VZcdx1ThhVKqvu2xfzhn1+4R3K/62utt/1YoLCmjW/J1LG2nuKIekgGBQCAQCAhtCG0I7akttIuKitwJ61EMbtNoTAqJcBAst29SdVX1UNy4Sc0ed3LEe7eZbtXeoOrqai1u1NYH1/WO6bF4mhro5o3q0PHU3qKWCD48j+iYOr3BvrxFN6pDfVnf2By3eq9jF3dpvWESxK2Ue+ky1dRco0rTZGfTkjPinI0X3+hsb6GG2/VUz+HyXHo9zfo6zXc9Ue/b6wnuu1Fsx2t4gNM8/HpLe+c47juP3n6t7zpxr7Wc3+Fx0tDU4ih85Yc4LY0NQ33K48LTObn6ZBz+TolJBH83tDQ1qK+F4P2ivi74uusxEL++r5fGY7iHyB6xfHA8tgTvc53jeUzduDH0O3l4TI35fZP/VhD3xtsNEf2NgkAgEAgEAkIbQhtCe0oK7RvBP+rHm9DmNkFoIxATKNpvUL6LyTD/ft7q0OR26DcEAoFAIBAIBAKBQEBoQ2hDaENoRyq0Ozs7x53Q5jZBaCMQEykaqIS/Cp1zmDaumk/Tpv0r/eqfQiL792/OpY3aZGLGye0QCAQCgUAgEAgEAoGA0IbQhtCG0I5IaHOUlZWNG5nNbXHTZghtBGJ8hWEyTLsoKqNm9BUCgUAgEAgEAoFAICC0IbQhtCG0RyK0x1OWtpvsbAhtBGJ8RufdW3T5UjEVFhZqk+Lpk1sVFikmE0MgEAgEAoFAIBAIBAJCG0IbQhtCOwqhzXH79u0xl9ncBrfthdBGIBAIBAKBQCAQCAQCgUBAaENoQ2hPUaHNMZYTRLqZCBKBQCAQCAQCgUAgEAgEAoGA0IbQhtCG0B7TTO1IMrMRCAQCgUAgEAgEAoFAIBAICG0IbQhtCG09uI71aEwUyftwWzMbgUAgEAgEAoFAIBAIBAKBgNCG0IbQhtB2FNtcCqSoqIhycnJGLLB5G7wt3iZENgKBQCAQCAQCgUAgEAgEAkIbQhtCG0I7ZkIbgUAgEAgEAoFAIBAIBAKBgNCG0IbQhtCG0EYgEAgEAoFAIBAIBAKBQCAgtCG0IbQhtCG0EQgEAoFAIBAIBAKBQCAQCAhtCG0IbQhtBAKBQCAQCAQCgUAgEAgEAkIbQhtCG0I7HkK7qamJEAgEAoFAIBAIBAKBQCAQCIS7gNCG0IbQhtBGIBAIBAKBQCAQCAQCgUAgILQhtCG0IbSdhTYBAMAYk56ergUAAAAAAAAAADARgNCG0IbQhtAGAExhILQBAAAAAAAAAEwkILQhtCG0IbQBAFMYCG0AAAAAAAAAABMJCG0IbQhtCG0AwBQGQhsAAAAAAAAAwEQCQhtCG0IbQhsAMIUZ70L7+vXriAkcAAAAAAAAABBrILQhtCG0IbQBAFMYCG0EhDYAAAAAAABgIgGhDaENoQ2hDQCYwkwUoQ0mFjhvAAAAAAAAgHgBoQ2hDaENoQ0AmMJAaAOcNwAAAAAAAMBEAkIbQhtCG0IbADCFgdAGOG8AAAAAAACAiQSENoQ2hDaENgBgCgOhDXDeAAAAAAAAABMJCG0IbQhtCG0AwBQGQhvgvAEAAAAAAAAmEhDaENoQ2hDaAIApDIQ2wHkDAAAAAAAATCQgtCG0IbQhtAEAUxgIbYDzBgAAAAAAAJhIQGhDaENoQ2gDAKYwENoA5w0AAAAAAAAwkYDQhtCG0IbQBgBMYSC0Ac4bAAAAAAAAYCIBoQ2hDaENoQ0AmMJAaAOcNwAAAAAAAMBEAkIbQhtCe5wL7f7287R+1XJav3k5bc+pDrt868VdtHr9clp94Dz14x4HAAgDhDbAeQMAAAAAAABMJCC0IbQhtMe70G7YT794+RU9Mhv6HJbuo8yZw8vO3E+9uMcBAMIAoQ1w3gAAAAAAAAATCQhtCG0I7fEutFuMQvsXL39J3kG7pfsoe35IaCNDGwAQjkkltP2VtGPdGlqzbgdV9oS7A/ZTZeaO4LIrKP2Cb1wee+/dItoYbN+avWUT7n4eldD211DqpmRK2ZJiE8mUvCmFsgorqSsw/o7ZW5oRbF+wjQfKKTCZbxphz9NQpB7IovJ6L26yk4UBL2W4OO/mSN6UQZ4Bvj6yKHldEmVcjOeYCFD5sVRKWpdMxe0BnDMAAABgEgOhDaENoT3hhPYrNO2AXekRCG0AQGRMJqHdX59OL730khbp9WG+oxK4STOGl51xsHFcHnvjwdlDxzP96IT7xk00QjtQn0EzZsxwGbMoo2J8ydKmYwlDbVuYNamFdmTnifsjhZrwlbFJcOLraEEk512PBVQXCFDGwqH/L0ivG5U2ZtRDaAMAAACTGQhtCG0I7YkmtF8b+jfvnkpXuxDag/3U2/OAvO1t5O14QL3+Ptfiu7ejjVqH1+s3Z4n39w1vs416/H3hNzbYF2xH2/A6j6zbAwCMCtEI7Z9//pkOHTpE5eXlYZflZXhZXicaIhLad4+6F9r9jbRoeNnZ41Rot2Yu0oX2VMjQDjRn6RJs1tJESlqXZIjEpQsssqxgHCXXN6UPt29OxuQW2mHOE2fHJi6dZZLak1vyTwkGvJS2zni+kzclGc6z8rpdmUqegQBlzBle5sDoCO20Wow4AAAAYDIDoQ2hDaE9YYT2b2n55iWS2P6aeixLOwjtwQeUd2CJJdtbbHt7Qb1RpGTNG3ovIYt6/NW0+jXreuvz67V95u2aZ93ma0uotF0lth/R+Yzlyjasz6lAVjkAo0w0QpsF9fvvv0/z5893lNr8Hi/Dy/I68RajENrjh5EK7azmAbVT8zdR2lJJoG0pHz8H3euluvo6amr3T+p7hpvzxPibCwwZvdnNEIyTEU9Ooqvx0NXSpF0f3njWCxoMkCe4j7r6JuoawLkBAAAAJjMQ2hDaENoTKEM7+94jurr5t/r/F2bVm5a2E9qP6NDMV2xktiSoL7aFRErWvLDLh495ZJjDcrCN9oZpx683n8edGYBRJBqhfeLECV1U20ltWWbzv7xONIy10O7v7SWfz0e++z7q6XWhlbVvwfRoy/t8PdTr7w0vo7V1hvfRE1rejdCOuH1ivUDvUBv9/ZbXe8T23LQ9BudNJUodywX4K2mWnvnrkA09EKAun5e8PqtgDvi7yNvO73kpMIriK9Dr1/bJ++7qnZjGzfV5ClInyrA4LRsYPk98PlzIzgFp+S5/gNz2on7Og+F32/cDctv8FIjg22TyGPOHO6yBAWn5rmCXuGjfYID8XcNtC47xgTH6plvTsUTX48HNMXnbPXp/W7qpV+7TkVw/A1Lfdbk6r4bzA1kOAAAAjDkQ2hDaENoTSGgfaugP/rFfTQulrObzHfLSaqHdc/XrkDSe/zVdvddG/f391Otvo9KMUNb2r3dd0rdkFtrTNmdQK5cnefaASg+YZfc7lFc1vM2OatouSeu9dSGjLcv4X6/aRQ1cauRZH7XWZUnH9Aptv/oAd2cARolohHZnZyelpaXZSm2zzOZleZ14i9FYCm2ekHHN9Ff17Yl49d2NVOlTaN7BHsrfu8Ky/FC8SjvOtioa0UtlB9col99/oZEqM1fYCu1I2ue7sHHo/XfzqT/YzpPrZoeW33tzaJmKkzT7d+q2bzxRGbHYjqvQpgBlLTSVsvAVD0vuRGoaGKC6nORQKQSpBEjTxQxKUNT5TdiSTd6BkOwq3iLKmyRpE9qp2pBhaoMu9pZay2sEmospeeEsy35nLU2hGl9oB10VafYZzYE6SnQQ+V2lqVKmbPyyYCMR2nK9bcuyvU2UsSnBWnN5TgJlV1nro3srsilhjrqeekpOjUFsh9qYSMUVBcG+n6Hs+0q7iQP9dZSxLkFZEzppTwF1DdpI3ZW55PXVKPe3YFO2ZT0KeCl7i3o/5rEhNY6K05Nd9cP4EdoDVLBuaPwnHKvTr6Hs4W9bJOY0UVd9duhBlVR/O5fHcm8dpS5VXD8rM8gj73LQQ8niGtDbEtpPUk4deauylLXAk3PUpVDsxl3ysUqqE9fcUpTUAQAAACC0IbQhtCG0HYR2n1VQz9wlTRamFtoNGa8PL/863Xxm3UdondC2ZKH96/V5pjXaaLUk1fM6TG+3Z1naTP5L9GuxTkKWVY70VdPMl0Ntx/xRAIxfoe0ktWMps0citI/eDaNgB1tthbavYr+NmA5J3iKDNO6l9OkvhVnnJdp4wWdY5+i74ddRCe1I29eYKSaXXEFrTPtkoa0Lb4eYffDm+BHaA02S2B0SSYF6sW4CpZgl6bDQrtyzwHnyujmp5B0WjnJmcVqtooRIV7Eu3xKGJ7nTxZ6pXrRXktR2E1wWD4vLQHN2SLIfq7OVwyz6aky/KIs3CeGXrB/HWAvtGqnPDZLdVx52gsGUiyGp7b2YEnbywQRpskG5jeEi1yT/B9qLFWLVHMnUFFBLXcdYVxASzgMeSgm7TgLVyed50EtpC53XGe0yPO6EdoCylprPU0g0jyhkmRyo0x9YZSiEdrhIKjQ+SGnKS3I58SmENgAAAAChDaENoQ2hHVZoB1+lvFWhjObl+c2OQpv62uhq6Xm6Wtdm2X7vvfOh7Oj5oXVCQvu3VGop1i3tZ75i8sn+en2bos3ei6G62Xnt6mMN7fN1uurHDRqA8Sy07aR2LGX2SIT2xtxKavW0Uutdm5CksEFo+8voVUkMp5c0Um+Av9HSSvnbF4Uk7+926PMY9FTsCL3+7g6q9PiGvwXjo7KDoaztV7dXhu53J6RtvTSb8q+1Du/HR0UHV9gL7Sjap5cukWJG4kY6mZsfbGuHJONfpf1nb2qlS/p7e+jmhXRpX4uotT8+500lIZ1q8dakS/JwZa4mCJUCc2ESZeTkUnmVh7oqUiVxnUTF9VxqJEBd7TWUKtfk3jN8jrrKQ1Jzk1UQenTRxTKa7IW2X9pOcNmM0jqtVELA76GCPYkGmd419NtSzzA1Z2HXpRtFfVqV9ItSykydtaUyrvcMd+dpgJouSn0+I4VCqrCLUmWJmF5O3t4ABXq7qK4w1SD6y/1DQlLPhg++llZYR11i+YsZUv9ydr6N0J6TTOXaOR8gv6+JsjYtMMjp0AMAqf+1DOA0qmv3UyAQIG99MSXJmborQ3LaLLRnrcuiOi4DEtyftzZXkvehBxHyA4qh/XRp++lq5+zwWdKDjSa95yq3zJL2kTG0j+A6nuA+EqX9p1Z0jTuhne1CaHOGeZd2fRhr5Q9dDylU0z7cp/UF0jctEqhO7HYg9C0GJ6GddCw45rhcTfAeUJcnPSyRrrmB9lzj9VbI1y6POy+VpydBaAMAAAAQ2hDaENoQ2pELbXbKFaGMZl0A91Gm3aSQvK2+NrpZepIOHfiSlie8E8qYftm6Tkguz6OGZw5Ce6ZKaFdbhHZD1jvGWtmv/dYS8vuGYwUAjEuhrZLasZTZIxHakYQstCu3z9BfP6nI8r55cLalrEnjQbHODLqpsBonRVb09PThb5/4aKO+/xlUZp3hl1pzVyiFdjTtMwrtV+lkrZTyGWik2boET7fcz30XQiVR8u/3x+W8qUTpgi3ZVH6xmIqlKMjLoCRTdmpabUApMJMM5QO6KFUXkUm69JSeYujZoyE5JkuwRNM6crkRqZyJQmjLWeGqSRFlSS0EXCirWc7CDkhtHO6jPTUhfdwSkm8ZtfFVa3Jfz1qYQIkrE6VIoISF1kz4DEm++6WHC0l5Tdbt12YYs66lrFvOtjefPu/FUPmN3PYBxXhIVpzzASrYFJLDKcMC2PDgY12uVVJKDw44LA8zhh+yWMvBpFjOs7xOWr3lqEL7EeJcrh2v2AeX5UgYA8EaK6GdbMqODpURGn4gYvrWgVd/qBSZ0E7KsY65cv1BQWhb8sMDw8Mj/dpNhNAGAAAAILQhtCG0IbQjFtrah7gvpdrYGby0WjT3t9GhhN+Gn8RRKbTfiYnQjnSSSQhtACaG0Gby8/MtQptfiwWjKrQHfbRGvJ5o0/7+kACeITKue31UWVJGlbU+y+K9njK9tMlL7w6J6X5PvjJr22RzQm0RQjvK9slCe3amuV64sVzK7OST1Hi/x3Bf7+3tHZrcchQztN3Egi3lutw0rGuuZ+srsC0poNq3kFeyhDQILSnrWt6eRWgPSlJyXYH6oAdCElII6lD5FCnTVpe6syhJ1Haek0aiVZ6cRAdhHz+h7VzCZfjfA8bSKaHSKEk2pVEkea8do5yhPVTvnLOZDTWzewPk9/v1yfrkNiZfVJ9zQ/b8puIhyb1OKgNjk+Tsr0qzZE/LUje3xXoCBhRlWgwlZOYkUnZpnXGi0IEABYLH5B+eUdIo7sPJ5QVUM0rfdIuJ0OZyP5ZOC5UWMpffGerT7CiEdhJ5Bp2OYXhb8oMLu4lnA2PzAAEAAAAAENoQ2hDaE15oG8QyT6ZYWh0qRaKL5j5DeZJfvDaPDuXk0c2WZvL29NnK6VgL7YaMd/Rs8uyr1dRQV003zdFQTa0twfda2iKegAwAMDZC21wz226iyNEW2vsrfNTPpThYxpoj+Hp/T6UufnWhLWcraxnLr2rxqoiXXpVKcMgZ18P77/XRzZJ8St+7kVZ8Mtu4rCSmDZNX1trPGKBnYwuhHWX7QkJ7BlUqJFejoiSJ1i+frKGjZyuptac/ructUlG6YGkyFdR6bddNrTAepCyItaziObNoRjBmDQf/bNi+EG6ysNKE5xChzFBjHWuL0JbX16Sdcb+zZswy1moW4mzQQ0mmesih40uhphaRubpg+HxKAlhq52gI7QXrUihtTyqlynEglZJXzgods+GBgDnTfLgf5H6ZY6ohHeCa5uoa1QkrkymrsJI8XQHbNoqsbUdxrp0zabJRp0n+ZNFqrp8+I5HqBpz7TBetvXWGMiGhcZBAyQeyqLLWYyw5cyzBMo7NYciKrx8dxRoToa3qb0lOy/XRrX0agdBemq08rxahLV27KpmuHj8AAAAAgNCG0IbQhtB2KbRJm2xxmlO29TNpssX5qskWR0do95SGJrK0TCIp6Kmm8xfzqFRR6xsAMP6EtmoCSNVEkWMhtNPrw0jY/kbrpJDSaxFN1tjvo/RPXnW9vNzONSU9tk3U62zr+4mufSGhPZsabayLr+IkLXKY2HJGcn5Ek/XGdVLIMOtm1QeiEuUWoc1jXM8mFmVHJIklT/CnEtoDNsLSxcRyoXIHKVptbY/Y9joW1qHM79SqgCHL2yzz4y20nWqdewpTLLXOI58IMCQrvRXZlLjQKWO/QO+/UBvVgnn4D6jQpIxa33OGdmhiTdsq1ArRahGibsd2wEvZWxIdj7+gxVqixE1MKKG9cJSEto14tpy/MPt2u10AAAAAQGhDaENoQ2g7lOHw5i+xF9qSXJ6ZVa/YfoZUtiR+QpvFu16zOyFDkYEtlUt5eR61DuIGDcB4Ftoqmc01s1UTRY5EakcvtHsjF9qGDOgddPNuI92svWmJRp5Usr6RfH5NT1N+opw1vYjSTxQF120lXw+3oVeqoT0stOvdtDO43U9ecsjQdts+d0Jb36vfR43Xyujo3o00+3dGqb0ot3VCCG3zunJph5S8Sqqrr6O6Wms0NTcF32si/4C8rlyKJLjdQKiOcaqprq5zhnYq1TWr91sX3G9TsE1eacehOtJc+sJPBSuNJU5E2Y4FB+rIrxJ7oyS0nc+TXLtc1ECWsqD52GzOBZ+HpmB/NbVbBX3A76W6qnLKOpBCCXOMEjcxz2NqozGL3iy0Q7XQhzO0l440QztCoa1vM0Deljoqz8uilHUJJjk9VCYjVG99AWVX2PVbndZvdc1eGhil3yGTUmhL1+6CA3XhxzeENgAAAAChDaENoQ2hHbnQJnpEh2a6yNB++XXKvNpMvc/6qN/fRlcLtpjW+Zq8z+IktIOcXy/tK2ELXb33gPr7+6m3p5nyNocmjZx2oBp3ZwDGsdC2k9mCWErtURXa5KMdwxL31XVltqK5saSIii6UUavfJJnfParIYu63Cu37Ug3tZPsa2hstk0JG0b6wQju4fEUR5Z8t0pc3tKIiPSS13z3puhzUeBLa1KWueW1gsIsqefLJ0jryGx6oevUsXi7/4dHraieRZ4CchXZwXSG8Zm2yG/8DVFfKk14Gt+1XS9Pk9CxKGt5OwXD5DL2e8tJUyt6TYJw8cNwIbbletmKyvTkp5LVThfWV2kSgdS3aRUZ1FcVUUFhMTYox6q2QalEPl5RwV0NbmmRRy7Y31tAut0nRDjjW0HYvtAO+OiouLKDiCuskhdTroYyVswwTinaVhiasLPDZdVyd1m/ltd5R+x0yOTO0Q2V/+GGUcihItfkhtAEAAAAIbQhtCG0I7aiEdpCOvFAGtEE09xtraIeNIYEdqnkdO6FNz+pptYv938R8kACMa6G9Z88eW5ltJ7V5nfEvtKW61cE4eVfxXRLPSWPGsrydzFZFm05KQliI6R5dTL/00quUf9+6n9bcNdbSJtG0L5zQ7ikLLX+iVSnW11jaP8GEtiFTOEkpHEOTKlprLocyY6X6xXsq7aWYXDpkzwKDlLQ4u5ZsS3axVQbP0Mtg6JMo+ootbUop7RqVe0Yk56kpx1pb2l8RErOJOQqZOxiS+Vqpkq5yaXmPYi/S5JvDmdXGMjPJyoky5XMjpLc8EeiMdblWSTnopRQpK1yI5WiEdvmW0JhsUnwrrUuaBFIroyML+JWqWtADUjmXROXkhxDaLoW2dn5mOTwUCW5z5QwIbQAAAABCG0IbQhtC29a53MvSZW9mg7Ppbc1ZoiwfQoNtlL3+HYU8fp32Xqwn79UtFqHdo782z1loz3cW2pktpjb3t1HeriVKmb1wVwZ5IbMBGPdC+86dO5ScnGwrs81Sm5fldSaC0CZfvqHMxv6zldTT20/9/b3Uei1fKvkxgyp5F4YyIDPoaEXr0KSTfh9Vnt1vqmm9g3zD1sN3VhLW8nq9PirLXKOu1R1N+8IJ7cFWWiFtb01mmVYqRZtQ09dK+dtnh+po770Zl/MWf6EtZTQPy74CnnAvMECB3i6qyUuxTsxocPpWeayS0yqhbcji5LIlhTXU1RuggYEAeapypZIk1tIYfikTOFQ/OyRxU0y1lmt6R+eeEcl5kh8GiOxylsLJcpmQAwXapI7cJ10tNZQq1dhOqw0YJsnU5OKxcvIGlw8EAuT3NVHuntA+RHkIS930OUlUXO+lwMCAVrKkYE+CYTzowtvUtlkrM6iu3R9cL0De+nJKlkuc6HXBoxPanjypJvbCFCrn9gWPKdDrpybT2BDbLN4k7z+Nalq6ho6py0O5W6z9AKEdvdCmduO1m3ysmDy+ruA4qDSMUQhtAAAAAEIbQhtCG0I73vT3UW/PA/J2tFGP32iO+/1Dr/f29Y9OWwa51Eibtk9vxwPq7ccNGYCJIrQ1AdDU5CizZanNy0bLqAttMmVH28Tsg0Lummpohw0hlSNYb7oxMzqy9oWvoe27sNFVuyt74nPeRkNos9TKtWQ8KybSq1Wvm2WYjFBdgqDpWIJSbjXlJYfdr3LiOUMN7hmUbCqXUi4fz9LsURNqkZwnOeNZbn+gJTeiSTK9F1NcTSBZ2UVqoe14zo11TAbaC0KZ0LaRTE0BlbiPoIb2oPmhhM3YOFAjbajJINxtJ9LsHb3fIfJDi0iFdtbC0RHajvtxeCBhmNjUcaxmQGgDAAAAENoQ2hDaENoAADDehfZoEa3QPhqB0F6kKBXSU5tPi6YrxO7vFtHJa6YCtoM+OrlutkICz6D9F1rJV7FfIbSHpHbliR30qkIgrzhYRGUHF9mW+oikfSGhvch2UkjftZO06Hc2cjwxnRr98TtvKumXFbXQnkXFdvWFuV51XiotUAipWStTqabdfp+yUFWWyeBlCpNt5XJXbS4lLlSIsDmJlF3ltW1vwbpZtscl11S2rRMdZ6Ed7jwNtOfaSr+BrjpKXblAIQhnUWpOjaUPvVXZlDjHRvquy6A6v6qNiVTZXEdpiv3MWppM5S027ffXUcamBOW+kg4UUJephElXRVqotEoggj4b8FLulkS1JJ2TQBkXFQ86eJ09Scp1Evdkk7d3dO/R8jjMciG0E4+Frp+aAwn2k3DKQvuYk9BOVArtLOlbFI77MQht6/nzNxdT8lLj+Jm1MIkK6uv0siNcXx8AAAAAENoQ2hDaENoAAAChHbUYjSX9vb3k8/m06PGHk+T8zZMe5bL9/qHXe5VfRwmtp5X7GIxT+9xsL9BLPdr2eoJtjawt4+m8hZWy/i7y+rxa+HsHRm2/A71+fb9dfuR0DnVKgLqG+8Tb5Q87seVAQCzfFTx3ARpQjFFD9q7YIK/XFeE5Hwito7UtXnWpBwf0MdkV3A+Xw3Gzjl+0zcelRzCUYjwwg/0bHGO6LB8YKgmj97NXL4Wj/IYFAAAAAOIKhDaENoQ2hDYAYAoDoQ1w3sBkQ1mOAoAI0EsIzVhAlYpvqNTlhLLkkwq96DAAAABglIHQhtCG0IbQBgBMYSC0Ac4bmGxAaIORItd/53GUdbFGy4TvaueJSOUyMUnkGUR/AQAAAKMNhDaENoQ2hDYAYAoDoQ1w3sBkI1CfAaENRjqKqCDsRLKzKLvej64CAAAAxgAIbQhtCG0IbQDAFAZCG+C8gUlHoIkyNiVR0qY08qC2NBgB3qoCSlmXSAsWynJ7ASUfyB31CTgBAAAAEAJCG0IbQhtCGwAwhYHQBjhvAAAAAAAAgIkEhDaENoQ2hDYAYAoDoQ1w3gAAAAAAAAATCQhtCG0IbQhtAMAUBkIb4LwBAAAAAAAAJhIQ2hDaENoQ2gCAKQyENsB5AwAAAAAAAEwkILQhtCG0IbQBAFMYCG2A8wYAAAAAAACYSEBoQ2hDaENoAwCmMBDaAOcNAAAAAAAAMJGA0IbQhtCG0AYATGEgtAHOGwAAAAAAAGAiAaENoQ2hDaENAJjCQGgDnDcAAAAAAADARAJCG0IbQhtCGwAwhYHQBjhvAAAAAAAAgIkEhDaENoQ2hDYAYAoDoQ1w3gAAAAAAAAATCQhtCG0IbQhtAMAUBkIb4LwBAAAAAAAAJhIQ2hDaENpjKLSrqqoIgUAgxjKE0BYCEoFAIBAIBAKBQCAQiPEcENoQ2hDaENoIBAJCG38UIRAIBAKBQCAQCAQCQhtCG0IbQttZaAcCAUIgEIixjFiVHLl37x4CgUAgEAgEAoFAIBBxDwhtCG0IbQhtBAIBoQ2hjUAgEAgEAoFAIBAICG0IbQhtCG0IbQQCMTWENgAAAAAAAAAAgEkhIbQhtCG0EQgEAkIbAAAAAAAAAACA0IbQhtCG0EYgEAgIbQAAAAAAAAAAENoQ2hDaENoxF9q9vb3U3d1NDx48oM7OTnr48OGIo6urSwveJm+b9wHBh0BAaAMAAAAAAAAAABDaENoQ2hDaIxLaLJzr6+vp6tWrVFFRQZWVlSOK69evU01NDVVXV2v/r6ur0/YBwYdAQGgDAAAAAAAAAAAQ2hDaENoQ2iMS2j6fjy5dukT5+flUVlZG165d02IkQvvGjRuaID937py2bd4HBB8CAaENAAAAAAAAAABAaENoQ2hDaI9IaN+/f5/y8vLozJkz1NzcTD/88AP5/X56/PhxVMHrPnnyhFpaWig3N1fbNu8Dgg+BgNAGAAAAAAAAAAAgtCG0IbQhtEcktNva2jSZzeKZa2jHCq6fzdvNycnR9gHBh0BAaAMAAAAAAAAAABDaENoQ2hDaIxLa7e3tWmmQgoICbULHWAvtU6dORSS0i0vKaNXajbRt1z7q6+szvNd4p4lW/MdX9Oq//kmL77NPQRyOUVy8VE7LVq2l03nn0B8ICG0AAAAAAAAAABDaENoQ2hDaoyu0CwsLdaE9ODhIz54906K/v59++uknLfjnH3/80TF43ZEI7aPHT9IvXn6Fpr/zvkFoe+61aa/LsXnbbojDMYinT5/S/I8TtHOwfc9+9Ali0grt58+fU29vrxYvXrzAX3cAAAAAAAAAAKENoQ2hDaE9Hmpom0uOcB1tnsiRo6enhwYGBrTgn/m1jo4OZfB7vO5IhPZ3md9rovRf3njbILSzT+XqIjs5ZRvlnMmnoouXIA7HSGjPfn8RHiogJqXQ5vsct/uDDz6g2bNnG2LVqlXaRLc///wz/tJTwA8+d+zYQRs3bqTk5GTavn279hoAAAAAAAAAQGhDaENoQ2jHtIY2S2eWzyyhzUL70aNHutDmn+1ktoiRCu2HD7uoquYmNTY1KzO3f/kP/0I/PHkCYTjG0dDYpJ2ne22Y8BMxeYQ2T2Rrltiq+PTTT7VJcIERzmSfO3eu3k8ff/yx/q0dAAAAAAAAAIDQhtCG0IbQjpvQ5ow6UUKERTZnI3Lwz+YSI/yVfA7xf5GNF63QtotD3x3VhDZnBptra5uDpXpLq4futni0bGL5vY6OB9rrHF5fB/n9flf7b/Xc0yQ7r/fEJNR5G03Nd4PvtWrbDLctlj5t99vpTtNdrZ1P4iDou7t7hvugVdtXV3e36/X4GLltfCzm/kMgJqvQPnz4sCuZLYIzuLkMEwjBZarmzZtnENrI0AYAAAAAAABAaENoQ2hDaI+q0DZHOME9UqEtMrGFuP7+5GlL7WwRV65e02pr/92vfksvv/JPWnY3TxQp3pfLluSdK9Syu1XbSU7Zrklmcxs+/ORzut/eTn96+z3LOpnHsjXZu333fst7v3ntTaq/3ags1ZGWfsSy/Eu//Ec6dDiL+mIgj2tu3qI/v7tAeZwLFn9O7V6fvuyjx4/p179/Xdt/wfliWrlmvWUdnnzz/IUSy3Gs3bhZe39vWjrkLWLCC+3q6mqltF64cCHt2bOHNm3apHx/y5Yt+IsPQhsAAAAAAAAAoQ2hDaENoT0eSo7YlRQJV4JkpCVH5EkhWTK//ud3bYX2pbIrdPNWvfYzS+1Vazca3hdCm2Wx3TZELP8ySc9GFm0YSbBgl+UxZ2HP+2iJ4zpr1m8aUUb01WtVYdv1q9+8Ro8f+w1C283xfHf0uEFof/L5F9rrO1IPQN4i4iq0d+/eTYsWLYoqeN1w8MO5Tz75xCKri4qKDMvxA7svv/zSsMx7772nXQ8quNQG3/saGhq06Orqiui4u7u79XW5/FO4ut0j3R9/0+bu3btamCU0v8fba2xs1Lbt9Xq1exqENgAAAAAAAABCG0IbQhtCG0JbEtoso2vr6ulG7S3atGWn9vrv/m06VV6vporK69TxoJPq6hss8pUlOE8uWVp+hXy+Dk12C8l8sbRcK7/BwZNKivf++fW39NIfZqG9+quvtUxtLsfBGcnye7x+SdllTRJzWZK5H35qEO7iuLbsTNVf/3TZKq1ESU/PI+1YZKnMmdLRyEPO7v636e8YMsi5f3gfLP3/OGOO3l7OalcJbc7U5kx27psHnZ36BJ0ibjfe0YX2kuVfQmgjRkVo82S1ixcvjlhm8zpiolsnVNnZJ0+etJXM5mVv3rxpEeTffvstzZkzx7LsRx99RLW1tYbl6+vr9fd5nbKyMos455g/f74mk1VCfiT7u3PnDh07dszwGh+nuI+vXbvWsZa4vH0IbQAAAAAAAACENoQ2hDaE9pQtOSKEtnj92IlToVIkUhazWWgf/C7TkOV8s7ZOKZjN22XR6+vosAjtFf/xlWF7vG+W30IAC8krgmtWi3UvV1TqdbuFOOcyJuYa4Fwq5X/+7t+Uxx1JzWxRUmXztt2W97n+t2gXi36V0OZyJeb18guKDBnkENqIsSg58v3330cstHkdNxw9etQgaXlSQ6fa2JcuXdLubTyBZEFBgWFZFros0sPV3+ZtqARzuHj33Xf1h4bx2h8L7Z6eHvJ4PEpJrgoh9SG0AQAAAAAAABDaENoQ2hDaU25SSDuhbfe6LLRVE0Zy2RIW2cUlZZb3Ojsf0mcr1+hCmzOa5X2xsG6+22KpHy1krmp/nKktJLEQ2lyDWrSRM86djlvOoI40OJO9oOiidlzmSSvlzHLRLlloyyVXzJnfM+Z8oC3DwpzXgdBGjLbQ5u0tW7bMtczmZXkdN2zevNkgZ7du3RpVG/keuW7dOovsXbJkiVaaxCyN+RstToJZFsNynD59Oib7k2X1+++/b1iWy4usXLnSkiGekZFB+/bts4junTt3QmgDAAAAAAAAILQhtCG0IbTHtuQI12zlCFdiJN4lRyIR2k7lOrhdXN5j37cZtGzVWq10ibl0iFloc4kS8ZpKaKuyqWVJLMQxl/8wT7RoDvl9sV40we1jac77XJ2UTG/OmmcpyaIS2lnHc2y3KdovstghtBFjMSlkSUmJa6HNy7qV0GZxu3fvXssyX3/9tVZeg2WxHCxsDx8+rBTTLIBFyRPeBk8gqdqPSmhz9rcQxMuXL1fK41jtT8jp7du3U3FxsVbyhM+fLMXlMiRMTU0NhDYAAAAAAAAAQhtCG0IbQhtCe6RC+0rldaXg5TIk4SY9VAlt+bWRCO1IJ5m8cvVaVAKx7HKFXtrEKVRCm2W/3XZF/XLRHxDaiLEQ2ixGk5KSwspsXsatRFUJ7e+++86wDH/Lg8uQ2JXbEDLXXLqEM6l5okZen0Xv/fv3De8L2WsWzFyzWobrZsdzfxzXr1+39AuXEbl69ar2r1y7m7fPfQShDQAAAAAAAIDQhtCG0IbQnpAlR0arhrYboa3KbD6dd84w6eGuvWma+L7b4tHKaajkdayFdkbmMX17hRcu6pNaynG9+oZW75ujT1H6I1w03mkySOu1G76hCyWlWu1sbpOqn+S28rJ22z5w6DAytBFjLrQZlrHhhDYv4xa+r61atUopZ2WBay7hYV6et/PVV1+5roUt6mFzrWqzYDbvX/V+LPe3Zs0abXsq+Fq/ePEi7dq1i5YuXWpbUxtCGwAAAAAAAAChDaENoQ2hPW4nhQwnuseT0GYZw5MwivIhqtrUoyG0L5aW6200TyIpot3ro7xzhVp29tMohLaQ5vKkj3LU3250FNp8TK5qaD96BKGNGDOhzezevdtWZvN7kWLOdOZSIrKE5fvbiRMn6NixY9o9LSEhQSmYzZne4UKU8TAL5nPnzrkS2rHan1mgC3jCS7fbhtAGAAAAAAAAQGhDaENoQ2iPecmRcKVFzKVIRImSsSw5ohLaBvlsErY9PY/oN6+9qcvrhw+74iK0Ozoe6KVAFiz+3LKOvE0W79yfkcpDuc18XObtr1m/yVKaRW4rB2eJm7cry3gxcSSENmIshTbXiV68eLFFZvNrooZ0JOTn51sELZfZsGP//v1KwcylQuTXue72t99+q9WuFsGlOkQcPHhQuxeYBXNFRYUroR2r/ZkFOuPxeCx9whNH7tixQ1s+MzMTQhsAAAAAAAAAoQ2hDaENoT1xhTZ/jX28Cm2Roc3BE0KyoO7q7taWlWUui2DeVjyENsfGzdv0fc3/OEGbuPHxYz+13W+nb7bu0t/7y/Y9UclDOUP702WrtGz07u4eqm9opKWJqw3lSHLPFmrHYRbaXJKFS7Rw//C6Z/ILDOtdq6qx9AGENmK0hTbz/fffW4Q2vxYNZgnLwSVGHj58aFm2qqrKdQ3tK1euKEUxb4OjtrZWE9NmwXz58uWwQjuW+zMLdKa6utqwDJdl4frcAru63hDaAAAAAAAAAAhtCG0IbQjtMS858vz5cy3MJUf6+/u15Tj4ZxYZHEJ6jJca2vkFRRFPyCjXvI6V0Oas6X9+/a2wnhaOGQAAgABJREFUE1Peb/dGJQ/vtrRGdJzb9+y3CG2nkMU1hDZirIU2b3/ZsmW6zOaf+bVoOX78uLJEB2djc7Y2C95vvvnGsdwGT6BoluIslAUsjuX3ly9fPiKhHa/9qfpj69at+nu8jY0bNxre52xwCG0AAAAAAAAAhDaENoQ2hPa4qqEt18xmgS2Eth2cxR2N0BYCes4Hi5VCe/b7i5RCm7OLGxqbLNtj+XrsxCmlpN2yM1WbTPF//u7fDEK77MpVvfyHk9A2t8UstHnyR/k9v99P23btU7YlOWWbVppkJAKRJ5fkOtfmbXN7eRJMzgy3E9oF54sp9cAhpWTPO3fetg846x3yFjHaQpspKSnRhTb/PBL4vvb5559HVJPaLJh5GyyNze9zTW4Wu+bXxeSV0QrteO2P4Wxu8/obNmzQ6oh/9tlnlvd4wkj+fQChDQAAAAAAAIDQhtCG0IbQHjclR8wlRjhYatsRbYZ2vILFsy94HCx277XdpydPnoQkdPDYmprvahMzRjMhYzRt4VIj3BYOFsux3H5n50NqabVum4+NX+fg45eFNot8Xqa3t1dvm9fXMSr9gYDQjgYWpUlJSVrEQpryvW316tVRC22GH1qZy5eogmtR2wlrt0I7Xvtj+B41f/58130gxLVKaMulSgAAAAAAAAAAQhtCG0IbQjtuQpvrYQuZzT+zwGbhwxKbf+7u7p5QQnsixcVL5VqG+sIly13FxwkrtHrcke7HrjwKAjERhLaQsyLzOFZcunRJm2BSJW5Z8nL2MpchMZfbEPA3WrZv3267fmFhoZZdLbh9+7ZjLWyzgI73/gTt7e306aefGkqwiH8PHTpkENdc7oQfkpmF9po1a5ChDQAAAAAAAIDQhtCG0IbQjr/Q5oy6cDWzw5UcgdCOPiKt+81lQTj7HEIbMdWEdjzh7Oe6ujqqrKzUamh7vd6I1n/x4oV27+vs7KT79+8rJ5mMJfHaHz+85Nrc/C8/3JTlOAAAAAAAAABAaENoQ2hDaI+J0GbxnJeXp4mQWMHbgtAe39Hd3aPX3IbQRkBoAwAAAAAAAACA0IbQhtCG0B73Qpu/Vp6fn08FBQXU1dUVs5sAZwfm5uZCaI/j4PrYe9My6LOVa7TJNdEnCAhtAAAAAAAAAAAQ2hDaENoQ2uNaaPNX01lonz59Wvt6PX+lnAU0f8W8tbU1ouB1eF2W5Fxj9vjx45rQvnfvHgQfAgGhDQAAAAAAAAAAQGhDaENoQ2iPvOQIZ1LzJF+ZmZlapKWlUWpqKu3evZt27dqlBf+sCvn9PXv20P79+3WRxdthUQ6hjUBAaAMAAAAAAAAAABDaENoQ2hDaIxbaLJu51jXL6K1bt9LGjRtp1apV9Pnnn9PSpUtpyZIlroKX/eyzz2jFihW0du1a2rRpkya6edsoOYJAQGgDAAAAAAAAAAAQ2hDaENoQ2iMW2ggEAgGhDQAAAAAAAAAAQhtCG0IbQhtCG4FAQGgDAAAAAAAAAAAQ2hDaENoQ2hDaCAQCQhsAAAAAAAAAAIDQhtCG0IbQRiAQCAhtAAAAAAAAAAAQ2hDaENoQ2hDaCAQCQhsAAAAAAAAAAIDQhtCG0IbQhtBGIBAQ2gAAAAAAAAAAAIQ2hDaE9kQS2v99+R1CIBCIsQwIbQAAAAAAAAAAENoQ2hDaENoQ2ggEAkIbAAAAAAAAAACA0IbQhtCG0EYgEAgIbQAAAAAAAAAAENoQ2hDaENoQ2ggEAkIbAAAAAAAAAACA0IbQhtCG0IbQRiAQENoAACf6Bwao1dNG7V4f/fzzz+gQAMYBvX195Ot4QD886UVnjCLdPT3Udt9L99u95LnXRj/++HzctTHw7Jl2z+bxMZHu5dwmbhv378DAi0k5fvgYOx500sOubvrpp/ieg56eR9TSeo/8/h9w4QIAoQ2hDaENoW2IZbfp75beoL/9tIr+dglH9QijZmh7wX95m/wz7wOCD4GA0AYAjB13mu/SL15+hf7uV7+lx34/OiSG1Dc0UuqBQ3Qk6wQNDg66kxSPHtPetAxKTUunR49xPqYiLMUWLU3Ursttu/ehQ0Yi/VxeT/wAYe6Hn2p9LsfV69Xj7piOHj+pte21N2fSTz/9NGHu5U8DAfrlP/6L1saqmpsj3t6LFy/ou6PHtXN7u+HOuDjGu62eUTkHfI8Q4xX3CAAgtCG0IbQhtE3BwvmlBUX0i/dO0X99N4f+63unRxR/M/cM/c28s8HIo1/MPR3c9vkhqQ3Bh0BAaE9SLl++TBs2bKDNmzc7RkpKCh0/fpw6Ojrwl+IoiKLMzEy979euXUvNzc3KZZ8/f244T8nJydTX16dvZ9++fWHPLceuXbuovLzcIB5UY2Tjxo1UWlo6ph/Af/jhScTrn8kv0NbnD9eqY3Ta5/945feaSJqMcHbeH6a9ox3nW3M+cN03O/Yc0M8HZ+CB+Iz3eI89vkd8sXaDtq9Dh7OiFtos60D0uLmeuL8//2KNLrFf+uU/0rRZ87R/b9U3jLtjyj6dp7Xz3QWfGO4rI72XxxvOdv+Hf35jSGjfqB3x9ioqq8bdg4em5pZRE9r6PeLAIVzoAEBoQ2hDaENoy/G3n1yjv5l9nF6e+x29vuI0zfmqUIvZSdHFnK+K6N0NF+mNL/Lpf8w9rG2b9wHBh0BAaE9WcnJy6PXXX48oMjIyUPbBBV6vl9atW6eL4MLCQtcfApctW2bo86qqKuWyT58+pT//+c/6cm+++SY9fvxY+Z6bmD59utZupzHCknyiCW0hVyKRtqOVxTaWcAaikC2VVTWu1uGvjosMxj37ISniPd7jLZyWJq6OSkrzuocOH9Ok6omcXJy0KHF7PXHm8Cv/9O/act9mZMa9VESshLb5njuVhDafo3feXxTx755486Czi2bOXag94O3rexrX+wt/8+fjz1bS2cILuNgBgNCG0IbQhtCW4799XEF/PeMQ/dvSw/Td2Vt0o7mbapq6qKrxYVRR09RNN+/20OGzdfTvwW3ytnkfEHwIBIQ2hLYx8vLy8BdjGO7cuROVCOYPgV9++aUrof3jjz/S22+/bRDa/mEBZn7Pbbz11ls0MDBgO0b2798/4YR27tnzUoa2OxHENVRFlizXg51s8Dj78NNlelkAt+VGMjK/188F1/IFsWc0x57I+mVJCkYft9cT13MWorXpbuu4Py43Qns8fvMllkKbyzmJB4blFZUY7AAACG0IbQhtCG2j0P6r6Wk0c+VRqmn0xuwmUNPgpZkrjtBfTdtPL318BYIPgYDQnjJCe+bMmbR69WpDcNauKpOXhSmwh8uERCOC4ym0OfNbPrfmTHARp0+fHpdCmzMZOx920fGcM5oo+f0fZ2gZomWXr1rWKSm7QoezjtOxE6dozvyPdYnC9Uw5a4yDJV5Xd0gicX1Xfo3fW5ecossILglw5Fi29vrB745SbV29RVykpWdq7eCvc3+2co3Wrt/+YRr9ZcceetJrP2keZ8vt3JumLf+nt+dq0n3N+m+o8EKJ42Rvclu5XASXn4nogctwLVuOi6WXXa0jZ4l+9fUWwzHw8XNb+vv7HbfBDyS4Dw8cOkwH0o9ox8CTkznBdWiPZZ8OrnNEE4C8L/M5UHG++JK27NVrVSMeg9U3btEHH3+mndPps+dr7efj5uxkHo+q42YZnXU8R8uG5PV4HH7+xVrtWMzyMtqxxw8iautuazWY5320VBtHHJwVmXfuvDYJn3l53r+4BkR2MLePrxXxut25vHz1mrb+9yeHgtvGfeMG/hbAkuWr6Tevvam1kctR8PUY6wcjPMb4/PB54muK/12d9LU2DlQPtPg4048c0+4nXCKB/+VrkCcHVN1X+Dzx9cnZ7Xwsq7/6Wsuk57HG63Jfcj9Fez0JuLY2n3M+F7xtMSa4D7W+H76H8QR/qt8jfF2LMcvt+mhJYlhJ29jUTF+uS9bPEd9nuWSTXXYx7+dU7jm9r/mcXigpo5wzZx2FNo87vldu2ZGq7Yf3x2PWTtZz/545W0gr12zQtsnr8D55fTeC3+3YcxLaPK74Wwnc73x8Tt9Uk8tt/Msbb2v3sJEeE2+T72l8zrnvyq9UaudX/O7ge43deeLfQVzXXFy3HHb3rZEgaobL9xEew+HGnRivfI7EPfaTz7/QruOJ8AAHAAhtCG0IbQjtyIX24qv0129l0KxVx6m6wRezm0D17fZxL7TLGp7So75B8j4aoD9944n58ggEhPbUFNqHDh1SftDgMiPycnJpCzO9wQ9OLS0tdPfuXbp//77yg5yZZ8+e6etwyYvRKmnS1dWl7ZOjs7Mz7H5ZBvFxt7W1ae3ldexEYn19/bgS2tOmTaNAIGAVqg8eWEqTyG0dT0LbKViqyH3IH/DDraPVNZVkJ38Qd7POpi07De1jkeC0PGfasog3c+Xqdcf1nCYlE5OuRVOaQq7H+6vf/kHL/nSDqEXOdXtl2SfkOL/+oPOh4zZEmRNu8//zD/+s/Vx8qcxxHS7LwMvzsn+aOXReWfo6weLyjzPmxGRCMrmvVaHqfxZlos2qMLcp2rEnP5hQBYtD+VsNLFGd2iWHeYJCu+uKpbsTLPZZVtrtxzxx4Ehg4RzJNcXjVUhlVbBAVElKN6ES4m6uJ1kuR3oPE/39/qKltsvz+TKLfT627Xv2267DgtH8u4638emyVY5tsxPaTiH3uWgbC2indVjOxmLs2QltvobE6xw8ztz+zuKHH6p7cKTH5Gb88TZVf3PxhJRu7lsjxe7+4nSP4Pa+/d6Ho3J/AABCG0IbQhtCe9wJ7ZmrjtP12z5dNrAY4eCnzvwLkIN/5g/3TiG+bnu9vp3e1oT2gXErtG+3D2VGPh/4maaneGK+PAIBoT01hbadrOR7pLlWs9/0Qcjj8VBCQoIy4zctLU1Z0oA/yOzcudOyPG//zJkzBiErZLtZ1JolPH/oS0pK0t9fvHix5cMQT3Q4Z84c5X6Lioos7eQP8qmpqbZlOlhAsxzXRFZ3t2PtahbLfocPkfES2k4PIY4dOxZzoX3p0iU9I3zFihXa/2MltDkzkjNVZdFoFrM8Udr54hJNPHBWrPgAX3SxVBMmHOfOF2uyVOD1PdBqfXKm2L5vvzOIBbEer+Npu29on/h6vQjOlr3X1k679n1rK3ZYBokP8dwuzvTl47x5q17ft9MkYvI+Iy3Fwm0T6548k+9qHb4GOHOO12EZLj/8kTNNw321XpRY4P748JPPtZ9ZpDkhvrrPx5l26IirMimckSiyj0cyGZuYQE3sn8cTt0dk/dv1P2fd6zInNY0a7jRrUonHEveVWWhHO/aE0Ob2cGmdutuNWvs4a1hsgyd+FOeL/+VvEvD2eF9C0vH6/H9xbfBxqiQSZ7pydipnf4v+daq/LZe20R5IvD1XE7Dcryx0uS9iJazkEg8c3I/NLa2axN7wzVbLWJAnReX4ZutO7Txx1qw8+WK7r8PyIIivhevVNwyylL+ZUXPzlt4v3EfRXE/6w+G+Pu2c8/ngvhKikB/m8PkRY0KWkub+HrpX3tbkrDxmzZJVXJfi2HiM8Nhav2mL/vq6jZttH+Txtnl888MpWWiGE9qcNc4ZuHwc8vUkZ04L+cvngq8lHoO8HV5H9DWH+dqIZuyphDa3RX7ocaO2LuwDQ/5GgHigpPqmTTTHpJoY9GxhsXaeZNGtuh55LGWfyqP8giLasHlb3OqY8z354qXyoftL8F/Rb073CL6ORNv5+PgbH3yOCoouahnoENoAQGhDaENoT+KSI99qJUeu3/YOP0H/gXw+nxY9wT9AuA4oB//Mr3V0dCiD3+N1J4rQvuMb+uPoxaA7QR3p8ggEhDaEtkEOPXliKD1ilqMsK8PVZmaxLAsoltkLFy50XdtZtM0sas1tNk+G+OGHH+ofhvgD4a5du1zvS7Rz6dKlYdfhPnn48CE1NjaGXc5OLMdbaNuJ9G+//TbmQtu83rvvvuu6TrOT0Oavw8vZhUI+8Yfznp5HyvXjXUNblsv8FWsZWU567rUpJTB/8Dfz7NmPjiVHzELbbaYdjy8hqVic8H7cwGUExP5Y+tmJI3liOy53wccpMgblDEOW2LLcFtco/8vryF+FF+KMs0Rv1d1WHjOfIzmDVIjekdT6lvuKtyPLJW4flxJQiSH5OFWlJPj9H570xmTssaji5VWIscfbUYkrWZBFU0NbPChyklWyZB66dn+yPNRkCTrSSQ7lMciij7ObVW2Ry3OwmLTLIOUHA+I98cBF1V8trfcs44y3pfXLgUNRXU8q5BraLKjd9Lf5XiRPAio/AJQf/vDxmc+ReHAoZ5LzukLIs3CUs4Ll+7WT0GaZLb8nnw9z23k9c/kchu/5ou3mMRzN2JOFNgt6eft8/G7Ola/jgb5fLu3h9HstkmMyC21+aCs/nGH56yTRzfeXeE/MKbfX6R4h7u98P1X9jSA/dAYAQGhDaENoTxqhzbKZy4KwfGYJbRbajx490oU2/2wns0VMJKG95tgDyq16QhmXHsdleQQCQntqCm3VxIUsiDds2GArJ7lEiFnaskj99NNPLa/v3r079CEmK0spez/44IMRCW3z+7LQPnfunGW777//vnKfV68O1WU218LmNh44cICOHz9O7733nuG9v/zlL1qmOmd/q7b58ccfaxnLTmVYRjtDm7dtd+yxFNqqTPlIhTYLBVkKM3K2sV1dZbsJytzs082HfrF9Fofmic7kchmypJGFNmd0Ryr0WMSImrV8XH19T12tx3Wf7aSRHXIm69BDAWsfcm1Z8ZV3fl/+Sr2QhbIs4gxQIbBk4Sokt8jKk6XI5m27DfJNnG85g1tIbnFOIpnw0np9hdqrEtPiQYlKaAtxyH0Q6cSO0U6CynKMy4SwLH/6NEDXqm44PvBwK5xGIquE3I1HeQMZucSL22MRY0T10EMW5OK+oTpm1bkS27Vrh5vryWks2tUjlh/A8L2Ss/557PF44OBtcLa/+Zhluc7XJY8jsQ5fb3zP1cubDGe4O5XUkPvJSWibj0P+1orTvZrbJNrH91Ehcs39Hc3Yk/uZ65aLn3kb3HY38H1K3Nfc3pfdHJPcr+I+KyNnOt9ubIr5/SVeQpu/nST6ix8GAAAgtCG0IbSnnNC+Niy0+Ze7KCHCIpt/mXLwz+YSI5zJwyH+L/4wuBYDob1wXzvtPNdN6SWPaFfw3/UnOl2t98rqZtpxtlsTz/uLemjJt95REXjcXt6vaO/HB7wQmwgI7SkotIWMfuONN7TgSSLl90Tmc3V1ta18PXHihP716Xv37hkyu0W5Db73micsZEks1mtoaNAEbCyFNot5s+C9dSs0mZk5y/yTT4Y+MObm5toKXd6XfHxiHe1D4927luNz+yEwXpNCiok/VedWxOeff24QgNEKbXMZk1hkaKuEsSGjzuZD/GgJbZVkkDMZ5Q/15nIHvB8uUcKlBDiDLl515EUpjEhkRkVlld5OuwkAZTnNEk2IZ/G1fj7399tDmYEs1ln2CznN546P+Z33F2nrCOEm9x+XxOB+42VkIS9kuih5In/ln8tIRIs8tlTlI8TDFFVfpmzfYyitwKKRxR9njocbg5EKJ87UXDBcvsWuhrv5uhkNoS2L/UiuvWiQS8O4naRSjBu7tonrmr8ZwONXPmaReRuN0HZzPUUrtEV/uwmRbSyEopswH7f2kNFU6sPpniv3l0oymx+MCfiewpPIOtV/58lxRzr25H6WgzO83cDZ1aKN4b71EM0xOX2jgh9g2D0sGM9Cu/RyheGY+dstXAqL72v8YA4AAKENoQ2hPYmF9gFboW2OcII7FkI7+eRDetyn/sA+GPwQllf9RFnb+unzn+h6S4BUCVrdvS/oiyMdyvWe9f/kapJHu+W/LX6k7VuZ7RLcb+LhDghOBIT2FBPadiFkNgteWajK5T04M5nFMU8+yP/y/Xbz5s0WOXvnzh3DayydzbLTrq5ztELbnGn99ddfa+3jdnJw1rRcV1vIYVVWN9foLisr08pZ8TeAeH3OfuZ9C8z7G+tJId0EP3AwZ49HK7RZ6J8/f16rSc7BdcujlbROH8DdiJ7REtqq7cvlJ8wf6lmIyvVS5eCatE5lKaJBFsjhJvKT2y8EslP/yZnonNHJtcBlWd/z6LEmpMVXy3mcyRmZXJeZ5YXcH+VXKjWpba5lLEppcM1iuX0ii5u3K8qBqCZki0Zoq7L/uR6v3RhxmpiPl2exHZOxdyrPsv3fvPamFuFqrI+G0I52+yO5R9iVHrK7LsMJbSFf5eMR40GMEbdC2+31FK3QlktS8PJiLJhDLp8hly/i1+3WsRP55slD3Qpt1ZhUlSGSv82iOjZV7ehox57cz2bRzPXRw3Hg0GFXpY7icUzcdnH/nEhCO9yEpDy3AAAAQhtCG0J7UgttueSIXUmRcCVIRlpyhGW2m79Lj5Q9tojmcLDo3hjcvmqSx0iEtrw8y+xwbgGTSCIgtCG0VdKTJz7UhNy9exGvn5GRYRHa5okdnYRwtEJbJabDxc2bN6mzs9NxGd7Xtm3bqLW11VX7x7PQFucnFkI7XrJqPAttVYa2nFGs+lDPD3I4S5Mz8bj8gPxBniecG2ltYZUsEhnSbpDr0HI5Atu/UyQ5zTXBRabltFnztH85C0+IaC7fIR5uiIxxzqTmyfvE5G3iNZ4szVzzV2S4cuY31/RlicNjgP/l1zgTnH+WJfhIhTbLeDOtnrawwphrOXMG7JLlxsxZpzq3bscef9NFtI+z2Lnmrzxe5PrOYyW0RZYsy+NYjmW7PgtXbkFumyjPobpuGZ44UJwrftgiH7O410QqtN1eTyMV2pHc68ziPtL7o0rchhPadt8aUK0nSvuI8kzyenbjMNqxJ/czZ+bzgwshnu1q0Qvkckj8YM2JaI/JKUNbfmA5kYS2gDPMuV940lPzwwSeOBQAAKENoQ2hDaEdR6HtfRSa2KPzhxeUWtijle7g0iGPpKztq80BW6Hd+2yQDl18pK2XffUH6n8R+gPsSfA9LkkSK6Hd1BH6IOV7PEBbc7u0TPDT15/QgLTfszVPIDkRENpTRGhv2rRJq4nd1tamBQtrFpxm6SkEtFnaugmuo23OvlbV7uaMZ7mcx0iFdjTyXohkLk0it8UuTp06FRehXVNTYyu05GMVJV3sZPeNGzfo/v37+vnl45s3b56lRrg8eeRkEtp24ipWQluWrqpMPKdJ4gRd3T262HYSKCxqOXPtfPElLVSTi9m1Q1UPOpyQ5GNzqv3OiJq1/PV8zjDndVhEcB9yNrWoSSyX7xBymqU/iwyW0CwkWY6z2N60Zae+TSHBRb1kUaaF3z93vljbP78mJLnqfDBcf1xkovLyR45lh+0zVekS3k4kYoiztrfu2hc249Pt2Asnce1qfLsVZLEQ2mIZu3PhhNvzJD9ciCQrX75uVQ8XRC1kuS78SIR2pNdTNEI7mjIbTrXE7RCTrtq1R9wL7IS2aj4ElZAPJ6blhzp28jeSsSf3sygHc/nqNUM5DLt+FaVbwj1Ii8UxyQ8F3Z6TaH63sWRmSS4yx4cesv4Us3uE07r8e0IcTzST1gIAoQ2hDaENoY2SIy6F9u+S7mrlPJgXg9as5nm77+vZ2+09A0qhzTLbLKd5Pd6eYO/5npgIbRbjvL+hPxqIVphKi+wp6Nb32eh7DsmJgNCeIkJblSnNmAW0kMTmDG0WqkeOHKGDBw/qwf/nCRQ5jh49ShUVFVRfXx92v+Ya1HZCW65brZK8oq3mWthLly6lzMxMQ1v5/6KtLPJZ+srww88zZ87QypUrlUJblsEjEdpffPGFYV1ulwqW/nKtcXniR5XQ7u21lrDgcily2RhzRvhkEtpchsJtHW95n+GymeWv7JtLU4isY21CtWtVrvZ97MSpsBmTR4+fNJSUCJdZKbJN7WrehpOEqhrSZsy1UFd/NVTWhzMd5ZIGssiSJ6nk+P0fZ2jnSIhqEadyz+nryCVFxDYfdD7Uzr+8zhdrNyjL3Mjny62QNWeUypMGRpLpKPcpZ5+PZOzJAsucwSj3kZPQFmIt0lrjbmVVQdFFvY384EWF3cMYt+eJkWuti5I2KuTX+SGIebJD1cMMIR1HKrQjvZ4ivc/JDzE4uAaxHfJ9UJ5Y12miWHkdORvY/IBMFrJOk0KaJaWc4SyErVwahmWq+XqW7znm/o5m7Nn1s3i4IZddsTtmu/uOfO1Ec0zm+5F5wknxDZhwDyYiEdry+Yr0QclISw7xNS3Gw579hwgAAKENoQ2hPaWE9mhPCsklPCqaAnS49LFloseyxtAfHfd7+pVCWy5FIkdxXegDVG3bs7hkaLOM50xseRLKNcce0ObTD2lVJupoIyC0p4rQtpOVZnHNtaZZDJhraLM8Nn844/+zwK6rq9OCpaq55MjixYstH5LMJULshLYQ1gIuhyJLXrsa2qpj5baJdnKb+Rjz8/M1Kc9SmWtBi+Pj3ytXr141ZG47CW27hwWqD4GcKS+vy/tQyWieaNJuOadyJOb9ffXVV4btlJSURPzQw/phdEDPBOcQ34IaC6Etiyv+ejdvg+UJh514kCUPZxezMGXJxXWtzbJMFm8sGnhdhsWx+EDO/z579qOh3Szgzpwt1OpLC7iEhjgeJzEn7zOcmJBln6g77WYciokVncpjyJjltCjTIerKqrbFxyfLafFVfTHJpJ2w3bB5m/6emHRSlmwcPLHYSEXp9eob+nJcPoXLmfA4EJnjqv7XvmWxLlnbLmdqiv5mIZ64OimsrHY79uS65ZxF/GT42ueHGyzK3NTQFueYHwqw9OPSGrwf1WRs2uS6PD9CMPjvZ1FKh+vfcrvEe3IbzbWCT+ed0+/XnLHO54LPn1MNazfnick6nmOoQc/9JtrN1yKPM1lcywKV+4jLw4jz9MHHnxkmGjULukiFdjTXUzRCm9suH9Ol8it6BnB/f7/2wI0fxMjfFpEfzgxNRHhMbx9fV/wA6i879hhkpnw8QtDza7yPFf+x3laAmgWpuEfwWJD7XP7GgfjGhbw874sn0HUaH9GMPbt+5uMS91CO5pZW298xbspjRHNM5hrpHy1J1I6DkddTZX3zcuK6Ffc0Hh98fxLvcYyF0ObzwPc5ruku7h087vjhirmPAAAQ2hDaENqTvuSIz+fTIlyJkViXHBHBWdQ1nmf08IcXeta2jEpo898dn2f4lNvj7GlzdncshHZOpVoucJvvPnhO31/xQ24iILQhtG3lKGcC8weWzz77zJJNLAQOf3has2aN4f2mpiaLdDavx9nZ5hIfom2qjGIWzdr9K/jBbMWKFcps8idPnhi2+cYbb9C1a9f0Y+TfA7NmzTLIYd6eWS5XVlYaMxyXLlVmSJuF9gcffKD9LhL95pjpWlqqzP7mLHPuG67tbS5LwrF8+XJ9226FtmocyCVgzO9xiZINGzbYxtq1a6mvr8+yHmfSx2JSSHMmMgsIIS3sRI8seczh9PV9WfIYJIOpdIhZvKnCnJFpli2itIK8jp2QjVRoi9IYbusLm+W0U9amWZzLWcEiS1CuG8ziQpYtci1jOVOWz5noH/PDAOZCSeiYxASX5nNmJ5YiEaW8TS6F4nRuVUJbZGDKEzXK/zf3QzRjzywVOd7487vK9tll8MvnJtw6sjB2CvP1IT8UUEW4SRndCm2WYbIUVYU5E1t8c8EuWBrKEldktKuEtugvldCO5nqK9D4nuFZ1I+w5Mk8Ky9eq3T1SfnAknyc+JnOt43Dn1ixIVWG+NuQHPGLyRNV+VeMj0rHn9OBAbrtcpkZ+KOe2Xnc0x2QW2qrg3yNm2S6PnXD3MfM1PxpC23xfMd8ro3kABACENoQ2hDaENoR2hEKba2bLtaftUAltlsh2YjrpeKdl3VgIbZFVLkqPqOAa3vJklAgEhPbUFNpmicylRUQmcGNjo1K+slw1v75q1Spdau7Zs0c5weLHH3+sLOch2sYfpt577z3luqr15Axuc+kUjrlz52qy1fw69w1TWFhoeY8lN5cl+eijjywZ0s+GM6bs6ovL0tsObi9nwUda85v36fQQwk5om/tFzsKOtPa4OD7zenwe3Jb7sBPa/MHW/DVrWUA4yVrO1uSsWfOHZaev5XNW3u59B7UyGPI6ZiElBBZn8K1Z/41FFJwtLFbKNy7JYScWOOPP6QEAZ3bLWeF2Qpvlyh+mvaMtx7W53coIzsh0mrzNTmAIOS3vi+W9OEeqr+uL0gDyccgyRCWJuLarqha1OBdiIr9wGftu6rNyW7jd8jrcNs4atBPaPEbsZN/+g9+FrXnuduzxcnK2uiwFWd5yG8KdQ86GZxEst1d1rYWTv6EM3yzLPvh8qSQ9Czgun6Ma65GeJ9H3/CBI1S7OYn/Y1W1ZhzOwVedqR2qa4XqRHyCIMSfuP3J/ibIfcnujuZ6iuc+F62/RD+bSSCKL9+u/7FCuw/dNvueYzxNn+Ip2iZg5d6FWMkR1z5EfTvL4Nu+Hv6Ghukdxf5uF+9C3Ckr0b0uoxl2kY0/uZ9XvhuxToYcsXBpKewAtlQhR9asdkR6TfE9c8Mnnloc3PLa4DJEZuRyKU6h+j5jFeyTzUHB7eflwQpsfwJjvc3LZKLd13QEAENoQ2hDaU6rkSCxraPMkjoPSh62nz3+i6tZndOyKn9af6DRkWauENovjWdvuKbe97vtOy7qxEtpyFjhPBsllSMxZ5X0//kT/uqEFohMBoT2FhbY5E5mDs4QFJ0+edCU6u7q6DJJczoiWQ5bnIpNbbhvXsXYrWGWhrWVbrlvnah0hX1VZ6HZRXl4uZasOKCW7k1g2fAj3el1NRCni7NmzYbPq7fbLk0Was6lFn8VSaLv9IDzREBJ1SN78rGW5sTjjr+qHyyzjPuHlfR0PtHIW/K+bDD+3yBmK4TI7BT09j3TBF03t08kKnyt+ECHuDbcb7oTNgOayFvwwpeNBJ7Xd90Y0EWAk8P55/HDJmkeP/eO2D7mdXEuarw8e6/HqD1Eqg/fBfcJlVNwsz+1qab1nkfkjYSyvJ3N/s9wMBwt3/nYDr6OV2LF5MCT/fcB91/mwSxvnkXwThyU6C2fej1x6ye4c8bnk/fC/kY6deIw9vlfzBLaRZi9Hc0yy0D743VH9QS2vy8cVy98bsUD+RoObcc9jgSdF5vPDxxNu3AEAILQhtCG0p9SkkOFE90iE9kmpfEdbd7/lfa5N7SS0mcxydQ3toluhP8LFBI2xENqnrv1AN+890/41L3/w4iO9vfx36X9kPYDoREBoT0IuXLjgqj6yqq4zT5poyDaqqaGFCxcqJefWrVuVWcmBQIDWr19vWX7RokWWrGFZaHN7uESJeT0uI8Jid+fOnbb1uXldroutksUsY3m/5kxiLUPz++8tZVLkciKy4Bd4PB7tWKIR2to9+/lzrT12++Xg+tf8LSMzZqHNWfV2+1VN7iky8M1jJFzMnj1b27dZaKvqpE82oR2N0Ii3UBAZpdw2txnyIsM03ORiUwUurWB+MMF9++myVWFrnQOA62nyImcwi1rr8byfj2SSxdGGH1CIDHQ8GAUAQhtCG0IbQttlyZFwpUXMpUhEiZKRlBzhTGxBfs0Ty/u32kLi2vNQLbS59IdZTv/x61ZNQgvExJF2Qnt7fjftL+qhAxceGSZ4NC/PGdcDg0PbtcvA7vzhhS60k1F2BAGhDVzCtap5EkCuo8z/usoI6+3VMpJZevcMf+A3S1ZV9jjfx+/fv6/Vleb1I5VKnDEu9sv/hsss4/d5WT6ulpYW6uzs1DLNw8EikeU9L+umP1Tr83FWVVVRe3s71dbWaqVe3OwbjJ7QjuTr2GBiIL42z6UAuBzCxUvl2kR7cq1qc310AACYakKby5V8s3UXbd21j7bsSDWU8XEzUSYAAEIbQhtCG0I7QqHN4iQWQlvO0ObSI9lXf9CE8s6z3VrGtgyLYiGhZaEtpPbh0sdaCRPOkmbZLJDrbKuE9iurmw3lQkrq+2yFNi/7uC+UqeV/OqjJ8lWZHfTNqYdU2/ZMf+/F4M80PcUD0YmA0AajirkGtV05FADGGq7Dqpo0DUweoW1Xd3bn3rRx91V/AMDkvBeJyWa37d437trX2NSsvEeK8igAAAhtCG0IbQjtCEqOcBYch7nkCE+gw8tx8M88gReH+Cru9ShraL8YdP+BRohls9C2/yOGaOe5bqWgFrKZJbU8wWNRba9jyRGexNJNmbvyxqeQnAgIbQChDYDDB3merI8nCYykfiyYGHDt3bLLVzUxw5O18cSfPKGdp+0+OgcAMGpCu6Tsiva7pqm5Zdy1j2tg88NdnkCX43jOGWRmAwChDaENoQ2hPdIa2nLNbBbYQmjbca3+fsRCW5T7+HHA+kF24MXPlFv1hFof9tsKbZ5EkkuV8LKWD1J9g1rWtLyva3eHJsqQs7Y5vI8G9PXk0idiP+blWWo/eaauqcnHclZRPgWBgNAGowGXEZGFNtfFBgAAAAAAAAAAoQ2hDaE96UuOmEuMcLDUjrXQFpF4uEPLpuY61utPdBre23G221DfWpU5ve77Tq0ONodcB3skYSe0RSzc1663LeVMF32S5oXYREBogzGFH0I2NTVptaI5VJNKAgAAAAAAAACA0IbQhtCeYEJ7v0Vocz1sIbP5ZxbYLLNZYvPP3d3dcRXa0Yhm8+SOsY6Wzn5HoY1AICC0AQAAAAAAAABAaENoQ2hDaI+S0BYlR7gOdria2fEqOTIehTaXFOnufaEfm1xzG4FAQGgDAAAAAAAAAIDQhtCG0IbQHiWh/d8+rqC/mp5GM1cepeoGb8xuArytmSsyR0VoN3U8j6tobul8bjg2FugQlggEhDYAAAAAAAAAAAhtCG0IbQjt0Rbai6/SX884RLNWfU837nTE7CZQ0+ijmStHR2gfKXtM/qeD2mSO8cjQLq7ro0d9g9T95AUV1fZCViIQENoAAAAAAAAAACC0IbQhtCG0x0ZoV9B/eesQ/fuS7ygjt4pqbrdRVV0rVd68G4zmCOOutm717XuUcbqS/rA4bVSENgKBgNAGAAAAAAAAAAAgtCG0IbSnRMmRK/R/vXWQ/u6trfTaor3058/204xPd9D0j/9C0xelBGOzy0jR1pnxyTZ6a+keem3hLvrb6SnBbadp+4DgQyAgtAEAAAAAAAAAAAhtCG0IbQjtEQntv118hf7vP39L/+drG+h//6c19L/+YyL95/9vMf2nv19A/8sv5wfjfffx9x/Qf/rVR/SfX1lK/9tvVtL/8a/rtW3zPiD4EAgIbQAAAAAAAAAAAEIbQhtCG0J7REIbgUAgILQBAAAAAAAAAEBoQ2hDaENoQ2gjEAgIbQAAcInX94A2fLOVfv/HGfSnt+fS9NnzacPmbXS74Y5l2fPFl+hA+hFKS8+0jW8zMqm/v596+/rowKHDjsvKsTctQ7lPAAAAAAAAoQ2hDaENoQ2hjUAgILQnPJcvX6YNGzbQ5s2bHSMlJYWOHz9OHR0d+EtxFDh37pzlvCQnJ1NfX59y+Z9//pmOHj1qOW9O68SK58+f6/vbuHEjXbhwYdyN7bVr11Jzc3Pc9nUmv4B+8fIrtnEk64ThXC1amui4PMff/eq39Njvp8am5rDLmmPb7n24iAAAAAAAILQhtCG0IbQhtBEIBIT25CMnJ4def/31iCIjI0OTcsAZr9dL69at00VvYWGhq/W4b5ctW6bs+/LycuU6T58+pT//+c+W5d988016/PjxiI6D25OZmWkryc373rdv37gc21VVVaMisw8dPkY3auso+1Qe/WHaO9prqWnphv78/Is1+vKfrVxDy79MskTi6iR6GghQd08PLU1cbXjv02Wr9PXfeX+R5b2Ssiu4AAEAAAAAILQhtCG0IbQhtBEIBIQ2hLaIvLw8/MUYhjt37hj6zK3oZeH55ZdfKvudBbnqYcKNGzeUy7PQ9vv9IxbasmA3S/Iff/yR3n77bf39/fv3Txmh7ff/oGVSi4zqu60eS9+dyMml9CPHlEJ77oef0k8/Rf5waGDgBf3DP7+hbaO27jYuNgAAAAAAAKENoQ2hDaGNQCAgtKem0J45cyatXr3aENOnT7eIUn6NRSawh0tcyH3mVvQ6Ce1p06ZRb2+vZZ2tW7fGVWjL7TFvcyoLbTk7+2LpZdf9KYT2W3M+oJ9++ini/XLmthDaVTdqcbEBAAAAAAAIbQhtCO2xFNqB4Ic0BAKBGMuYykL70KFDSgHHZUbclrJg4drS0kJ3796l+/fv04sXL8K249mzZ/o6XKpjtEqadHV1afvk6OzsDLvfwcFB7bjb2tq09vI6XENaRX19fcyFNkdZWZlhed6/LJTdCm1ej4+Dj52PhUuH2LXns88+izhDe2BggFpbW/Vz6mYcPHnyRB8H9+7dc/3QhNsjjuOHH37QXsvNzY2r0OZ+4VIgLJV/+Y//EhzDP7peb6QZ2j/++BxCGwAAAAAAQGhDaENoQ2gjEAgEhLaddGWxKNdJVolSj8dDCQkJSrGalpamyWAzLDl37typFLFnzpwxiFIh280C1SzhWRgmJSXp7y9evNiSBcsTBs6ZM0e536KiIqX8TU1NtZXMLKBZjjPd3d3KetZylrVT1nQ4ob1q1SqDeDeL83BCmx84cC1s1fJfffWVQVbzeXMqPcN9bz4fhw8f1uqFm5d94403bCeMvHXrFi1cuFC5D/6WgOhbM/xAQZbtcmmWTZs2KYX2pUuXtBIqvN0VK1Zo/48GHhNCKn+0JNG1mJaFNpcpKb5UptW8lqPoYinV3LwFoQ0AAAAAACC0IbQhtCG0EQgEAkI7GqHNmbNy6RFzli5LwXB1t1ksy1KbZbadxFSFaFu4EhfmSQo//PBDXWizTNy1a5frfYl2Ll36/7P3JlBWHHear2z36/Fr9zLd9rjntY/feT3zzut297jtbk/bbY/e+LXGWixZltQtBLIEErsQCARCLBKb2cQmdrGJXSzFvq8FFBRLsVax1Ma+FBRUFUuxCySIV19AJP8bNzJv3ry3UBX1fTr/U+JmZmREZN68mb/45xcdE26DPikrK1PFxcUJ1wuaqFECbUBguZ0LUo8fPz5uH6b99rrIlHZZyNjAHe0ImpzSxLhx4+KOR6IAvJZatGhRwm3QD/Z2paWlXp+ECQO07XO+adOmzsGWRAJUfuLZf9NQeeqMjNDb2ZNC+sUL9Rv52pEQaFMURVEURVEE2gTaBNoE2gwGg0Gg7TNxIQDxgAEDfCEgIKkNDwE4O3To4ASgRnPnznXC3latWqUEtO3lEmivWbMmrtyWLVs697ljxw69je2FjTpOnjxZLViwQDVr1ixm2fDhw3WmOrK/XWW2a9dOZwYH2W+4PKvtsjZt2qTXha3HG2+8EeOBLgcJJNC21zWguHPnznH1RJ+hjmgP+scGx/g32piTk+MLtFG2CzgPHjzYyzB3ZZdjOwx+BPmHY/u2bdvGrdO8eXMv897OkvcD2q4M/rBA20DlCVM+izl+02fNU207fqDadeqmo0OXHtr32gW0UcbTL9SPi87d+/hmfRNoUxRFURRFUQTaBNoE2gTaDAaDQaAtYDSgIgKA1JX5m5ub64SviIULF3rAEj7IMiPY2G24fJ8Bic12RUVFcTA0VaANMC8/R/ky69fOMm/fvr3ezvZilvvDvmT7zDYQPJ3t9oWR3aco37bw6Nq1q17v4MGDcQMSAwcOdAJt+1jDluPWrVt6Gc779957L2b5vn37fAG7nJjSBbQxcIF+0HB3+vQ4WI7BEBeUhk2IGShBFrsN8uHlDtntRuzcudOrE2xj/DK0582bl7YMbQOVZYY22tX07fYx2dawFrl4/zikY1JIAm2KoiiKoiiKQJtAm0C7lgJtPFDDq/Ts2bPaRxOvSKca8OlEoEyUjX0Q8DEYBNp1CWj7hYHZALwSZspMWGTHAhyjH/EX8M72awZYtIGkgZxSNnhMFWjbmdYmUxj1RCAjWfpqGxjsyuqGRzcmZzx//ry6cOGC3h4AVk5iaO8v6qSQGATAb5xdN+wTftVyH4cOHdI+2HYbbPsQfI5McgBt03Yb6Jv6uoB20KSQr732ms4G9ztHTEY0fl/lYAD+X24HYZJH13nid27IPpT9IIE2BhrWrVunoTcCfupRJiFFxrWxHPl45JiYZbtz96qlK9aoMZ9O8YB2ZeVlAm2KoiiKoiiKQJtAm0C7rgNtAGe8rozXwrdv366zs1KJ3bt3q7y8PJ15iH/n5+frfRDwMRgE2gTasdYPuDZCyMBOdntk2dpA257YMQgIRwXaLjCdKJClDJgctA72NWrUKHXs2LFQ9U8WaAMg47ycOnVqTHkrV66MyaoGSAaYtrc1GfG23UiiMNnmrvpIX+4gi5eg5bbX+MiRIx3gNhaGm2xq267GZJNLYVJRF9BOl2AH0rBZa8/v2pXlffLUaQJtiqIoiqIoikCbQJtAm0D7QZw5c0ZnlK1atUpnyu3atUtHKkB77969GpADfKBs7IOAj8Eg0K4rQBuWD/DEPnnypA4AawBoG3YaAG1D2zABOwo7w9bl3Y0sYJnBmyrQjgLvDQSFNUmiyRQRS5curRagjWxm28LE5TGObbt37x4Hn+2JMsOEgcfJAm34bsuMZ7/jgYECaSszaNAgBzS+E+cJjrepZBv9YDX8vasTaEPDPxmvofJPHn9SlZwpjVt+5NhxAm2KoiiKoiiKQJtAm0CbQPtBnDp1SmeoIQsL4KCyslI/ZAOCRAlse/nyZf2KM16pR9nYBwEfg0GgXVeAtitTGrIBtIGSdoY2srdnz56tpk2b5gX+jQkUEXPmzNFv1NiTAbr2awNcP6Atfash25/b1NX2wu7YsaPKyMiIqSv+beoKkA+oL1VaWqp/c7p16+aEwBL2phNoo0y0QdqO2IH9+W3r51mOfjdtx/+btiOWLVumy0sWaNvHMtUMbbktIDuy0O3z1gWrw6yTqg4ePuL5ZLsmcUyUod28dQffiR8JtCmKoiiKoigCbQJtAu1HEGgDNAAsADwj0ytdgn82ysXDMPZBwMdgEGjXFaDtB11tcA2wCrBoW0IAVtp+xPg3ADZsnBDINrYtR4yvspRtEeIHtG2LC9ihyMxfPw9tV1tRN1NP1BltxFtAgPKA3fBcNu2D3zPe6JGZ20FA22+wICzQhmzP7LDZ1K7MbTmxoxEm4zTtR6a+qz4YtAiaFDJsxjwGkKN6aC9atCgQhgd5aGMf5g0EBAbDowr7ad2hiwe1O3Xr7U3+eLmqj0aOnRg4KeQvnnhO7cnbp/buz48L+HBfvXqNQJuiKIqiKIoi0CbQJtB+lIB2SUmJBh5r167VryCnG2jj1XECbf/I2rRF9egzUI2qemC/evVqja0nwEvOjl1q9ryFatrMDDVzzgKVt++AN3FdmCgoLFYTJk9XO3fnRqpD5oaNqkuPPmrZyjU8dwi0ayXQtqGkmRgQcK5Tp04xZQD8GuiLzODevXvHTVxoQ2d7O2Rn2xYfpm4u+wyAZujGjRvqww8/dGaT2wC1Xr162qbKCNnX0mca66I82LDI8mBRJYEmMr1dEybaQLtVq1Z6AknTb1GAtp9nOfouWRiO9dA+sx2ysuVynBuuMhGZmZn6OAAGRwXaKFfaiRi7EjM4geOFPnMNCrj6wZwDEP7fzz7GPueR4R9lUkhvEKTq9+/5eg09qO0KgGsDp/U580GvwPVN7Kj6zSHQpiiKoiiKogi0CbQJtAm06yTQBngAzAWAThdUnbNgsX6YfvXNljUWaO/df0A9/qvnnaCg/hstVOnZcyEmHz2v/vXXL+ltAC2SbSv6vnX7znr70eMnERgTaNdKoG1DZJmla1tHGJDatWvXuM979OjhwcPx48c7J1hs166dr0c0BODZrFkz57au7WQGt22dgmjevLmGmvbnBugC3trLALkBgN95552Yzw0EdwFtF/ROFmi7IDDAPOyxEm3r56PdpUuXuMED/Bsg2g9omxgzZkxkoA0hE9wuE+1Bxr5rMlJzzqFOqLfrWPrZsvgBbZP1nYqQyT9u4jTnb02vfoNVxfnzMce3e58BoYD2gYKihEAbA7QURVEURVEURaBNoE2gXYs8tI3lCCA0gfbDhao1HWgXHzwUAwae+u0rcVlxTVq9G1h39Fu333/krd+4ZdtIQPu9rj319p9MmExgTKBdK4G2nYmM2Ldvn7d88eLFCScZBFwtLy+PgeQyI1qGBK8mk1vWDdfosJMbSoCKdvTt2zfUNgZyurLQ/WLr1q1eHWFt4YLstgd1GKAtAbhtt2HXNcjv2gWQXSGz0CHb/kWeL7btTDJA22+QwQW5MTGnFLL8w0zUGQZoR5mY0aXrN26oQ0eOqbLyCnWq5LQGzxRFURRFURRFoE2gTaBNoB3joQ3oDLCBV8UJtB8uVK3JQPtqVXt/16SVB6JXrsn0lp0/f0G1ea+rtwzZbX7lrFq7PgaAR2krgTaBdk3Whg0bQvk8A5Ta1huYNFEqLy8vLntYehy7spLR3x999FHc+m3bto0DnRKUoj6w2XCBz9WrV+vMYT9/bmwLX2wXDAUAxn7tjF1sM3/+/DibFGknIgG/0fHjx3VbUgHatmc15oyQ9cDkjUHb2vvC9n4Z18iqhyWMq06YONJu/8SJE+MmnEw0KaTLLz3o3OnVq1fMQIjU+fPnnYMNOB7IrJfH2ABxG2i76kNRFEVRFEVRBNoE2gTaBNoE2iHiTFUbDh0+og4eOqLOnjuXdqDdvnP36gPaVeVjHydPlej6Hzl6XF24eDFUOefOlen1sV0YC5AwsW9/vgehJ06dEZi9vWjpCvcbACWn9UReyQBtgKOjx45XteeYdwzDAu2o/ZfouEcts7T0rLddeUVFwvXLysqr7fwl0K5dgvcxrp34ruAvgGciAdhiEkJA7/P37Rlsn2RX9jiyoPG2Djy3sT2sH5IRQKnZL/4m8lLGcqyLdmHCQsBhfM8SCYDcfCfD9MfDEKxR0HfwwcZfHK8wunXrlteOVLyn/c4DM1Ej6mRsT8Jsh+OBOC/sPSiKoiiKoiiKQJtAm0CbQLvGAu2v0nIEMLfd+x96HsuAOS6wOODjkXqdnz/xrIZ/Ztna9RudPs8vv95Ubc3ZEVMOgOT/eu5lvfzTKZ8565Mxb5FnjwHfTrO+HagHAHKyZRqga4A2PkMGtKsNfQZ8rD2oXWXmFxTpbe1t8BmgaCpAcvL0WQ/6urzcuc6x4yc0+AawdR2vFu+8d8//tP9gtWjZykCgjazvfoOGxbXl6Rfqq+07d6uuPfvFAW3Tf2+1ez9S/wUNMiRbptkOtjSHjxxVb7R4J267D3/fXwN7e5+A99ifvT7sXXL37tf+4+ZcI9CmkpHtQe1nh0JRFEVRFEVRFEWgTaBNoE2gXauB9u0De9SN2ePV9YlD1LWRvdXVj7upq4O6qKsDOt2P99XVgV3059fH9FfXp41St/JyIgNtxPDR4z2QB4gXNLEg4Oa1+xnNw0aPSzgp1Ox5C51A25XtK72yAV8BWs1+7fjJ40/qrPBky7SBdqIAVLVh5pZt2wO3Qd0Kiw+mnI0OaxH8G9B1deYGtXjZKrVyzTpVfOhwYBkzMuZ5QBx9iCxuP6CNwQm/QQM7XEA7Sv8lAtrJlhl2uw5deugBHLNdQWFxqO2Q6U6gTRFoUxRFURRFURRFEWgTaBNoE2hbQPvzzCWq4n98X1X8/Huq4l/+SlX89D+r8n/+y6r4rir/yXdU+T99W5X/+M9V+Y/+Y1X8mSr/4Z+o8v/2x6rs7/9Y3Vw2OzLQlhYWg4aNilu+cfNWb3nOzt36s3UbNsUA3AWLl+tsYkBmk2FsYn9+QWigbewtDHwFzN21J88D28i03bv/gNq5O1dVXr4cqUwXBAXshOUEsnj3HShQrzRs5i3D9tfug1BYWRgrD7QbmcSwtDh9plSNHjfJ2+Y3L7/mzHZPFBcvXtKZ0SjjoyEjVLfeHzkhK7KQXdYYyBw362zYtDnQL9yeNBJl4lihT9EXnbr1Dg20w/ZfMkA7bJlB2+HcMZneOG6nSkr0Njh3TD8jMKgDmxYMAKzfmB1j10KgTUURbEQk0IYvNkVRFEVRFEVRFEWgTaBNoP1IAe3KNvUewOyf/R8PgPZ//0/xQPsf/vQB0P67P1KXGj0VGWgDDDZq3trLfpVexRJ6/vLpFzQItCctBDQMmpDQZHVHhc/43Nhe2LYi6QDaOnPXylxGOwGlDbiGxQc+H/vplMB2T58111u+bfvOpGGkzIaXgTZKoOuC5rLOOGY28LWB9vETJ2PKqrQAPLaHZUkioJ1M/4UF2smUKbdDNr69nRyQMcdkS86OGJht12VP3j4CbSolwZ8ZExQWFxfrcE0qSVEURVEURVEURRFoE2gTaNdqoH3hxX+Oh9n//F117v/7r6oMMPsf/+I+0P4zD2iX/f23NNCu+OV/iQy0EbC0MABv89acmEkPTYargcnImjbr9v5oiC8kNz7Oxnc7FaDtNzFhqkAbYLSo+JCzDRJ6wof6sgCqAK6urGPUxwBpV7Z7opDtMTAVFifSO1tmFs9ftDTOOgbHS3pv+wHtZSvXeOWsXZflrI+E3i6gnUz/hQXayZYpgXbevgNx20hrEQBtHDd4cZv+xVsFQVY1BNoURVEURVEURVEURaBNoE2gTaDtANrnf/lf4mA2srOvLJimzi2epUqe+6cHdiMA2tpu5B7QLv/HP08JaLt8sqW1CCAjJtzDZ5iM0LYgCQKUBhrWRKCtM9IvXEjYJ6PHT4rLnsZ+EU/99hUdAPfSqsJvEsZkgLaxDZEBawyzH7MPTN5otoEdi1zfeGg3afVujIe0PD4o02/SUJO97wLayfRfWKCdbJlmO3vCUpcNiwHaxqdcThQadP4SaFMURVEURVEURVEUgTaBNoE2gbYFtMs9kP0AZsNq5OrCz9Tt27fVlcpKdXr6WHX2qb8T/tkA2v+7jlSAtszwBRgEwJMwWFs53IehMkMbWb5hgDbKq4lAW0NeH6CJ7HSZnWzD5kQRBWhLYGssXoImjsQ+Ll564LsNGAwfbFhmIABzu/To4x1XwG74UeNYyszmo8eO+2bau/o+Sv+FBdrJlpkIPLuAtmkTgTZFURRFURRFURRFEWgTaBNoE2hHBdoGZAuYDd/sqwuna6B968YNdWXuJFX+q7+NsRvRQPsHqQNtOTnkmswNGq6aTGBpSQEgGjVD28DadALtKGWautV/o4W6cuWKLzyVZduwGfYWyIy2A5NW5ubtUyWnzyQNIwGaUacgsIs2vfBKI69NsBdx+W77hTke9vFx1UdOnugC2sn0X1ignWyZUYC2HBDw29fIsZ8SaFMURVEURVEURVEUgTaBNoE2gbYv0P4f/+cDkG0mgfzHv1BX509V15bPVeef/6fYySAN0P7BN1X5j/9jykBbTg7ZtUdfz1cbWb/lFRXeemE9tN9q936MFcTFiw8yie3JHQ3MNZNNhgXaUcuU2cmFxQedbdgq/JpnzV0QUxYmXfRrN2xCVq7J9LXxSHQMjL+z7YXt6lu06fKVK55feVigDUArJ+7EsXbVR9qb+E0KGbb/kpkUMpkyowBtM9Gp34SVONbGL51Am6IoiqIoiqIoiqIItAm0CbQJtF0e2s/+6B7ENhNAmkkgAbrFRJAxMFtnZ39TVfzP/ytloI2QkNOEPbkhYN9Lr74ZOBFf5oaN3nLjyZ3I6kFO+OcHtG1oHbVMCU8xwaO9nYTXcpLCsZ9O8bbbtScvMMt9Zsb8SEBSHoNpMzPilku/bOl37pdpPGd+7KSQpq2lpWc9WI2Mc2S7232LAYugSSGT7T+UCXsTTDZ55Ohxp6d3smUmC7Tx2cbNW73PPvx9/7gJPk2fEWhTFBVWX979Ui0tWaZ67v29+u2Gl9T3F/y1+u7cv1LPrn9e9drXW604vVLdunOLHUVRFEVRFEVRBNoE2gTajw7QvtjihViQjZCTQPrA7LK//Q/q4mtPpAVo2xMfIuDJbK9nJos0cBFe2sgmhnXFjIx5Mdsb4C0zYw0gReY3bCQWLVvp6z8tLSJ+/dKratOWbdoLGnYYUcuU8NQAVMDoS5cuqUOHj2jPcLNMWn8AxMrt5i9epmEnMsUBS03f3ZtosSQSkMQxkF7dYyZM0fYl+HzN/az5oMEEv8xnG/ij7/oOHOaVhb6F7zbagqzlnn0HxezLD2gn039oAzLPXVYnUcuMArQvCysVA7UPFBSqg4eOqFFjJzoz2gm0KYryU35lgfrpqp+rn63/hRpweKCaVTpbbby4UW2r3KYySjPUoMOD1VPZz6h/XPnf1f5LB9hhFEVRFEVRFEWgTaBNoP1oAO0bqxeoMg9i3wfZFsy2rUYAsxHXl8xMC9CWk0MGeQwDhg4bPS6hvcXMOQt8s4vDTqgos7AlRDcwNEqZNjz1C9ilnDh5KqYNS1esTrhdGM/ooNixa0/CfXw6ZUaoskxbXZNUnj9/wbPWSKZNUftPDpgkAtphyzQDKMkAbZNNbzLUw3iOE2hTFGXrzt07qk9+P/U3K/9OfXZmhgbYJnIqc7zYXrldx/yz89Xj63+pBhd+rLelKIqiKIqiKIpAm0CbQLtWA23o84I8dXXmOHVl7Efq8rAeqnJAZ1XZ7z11qfe7qrJ3O1XZ5111qX9HVTn4A3V5dF91ZcoIdTM3x9s+HUBbwtS5C5YErrt2/UYnEH359aYx8NDexgaJANRLlq9Si5etcmYTIzPa+Hu7fL2TLRMZ5fgMoBzWIWaSRRnI/PYDmbtz93r2FzKQ9bsxe2tawOS+/fnq9aZvO/eBDPmw5fhlaJtABvSQEWOcIBf9Bz912+7FlPn2u511//3775qE6j9pG2J7hEct09jKAHQnAto5O3bFLMP6fQYOjdkHsuPR7tnzFup/4/zG2wAE2rVDt27d8iyO7t69yzvDiDKDiZ9//jk7I0BDi4erv179f6uppVPVgrIFamHZQi8WlS9yxrxz89Q/b/iZBuHJCOfzoSPH1KRpM1WLdzqqBm+0UM+82EC169RNbdm2Q925czfwezH5s9nq1cZvaauq16quw8tXrQ3cBvvLrPqtwbqdu/fRf8dOnKqu37jBA09RFEVRFEURaBNoE2gTaJ9N20UgHUDb+Affs80IN7Eh/JjhiYw4ey6xPQPA6slTJXp9ZNteTgMwTLVM2JTA3xnb237SfoHJLk27T5+pnixe1Ku694GorKz02o/92L7SibK+o/RfdZcZFADjpj+xP2SPI8xyMzmnK7OdQLtmqaKiQk2ePFk1btxYvfzyyzHRuXNnlZWVRbgdApbu2bNH9evXL64PGzZsqCZMmJDW36qwdcrIyFBDhw7VMWjQIP1drCkqvnJQfXPBH6vmBc3V6JLR6pOST7wYUzImJsaWjPViXMk41e94P/WH8/9IW5WE7Yte/QYHv4XU+K2q6/b1uG2vVPUZwLdrm3fe+0DduXPHub++1mCfN6D85PPq/IWL/NJQFEVRFEVRBNoE2gTadRlol5aW1higXSm8heWEg4zkA0C9S48+qs17XUNFs7fbq5VrMmtF24JsTGpSmX5RUFjswZn1Wdnx2fEHCmInqKxF34O6BrSzs7PjAKwrALvPnz8fs+22bdvUgAEDNCzt06ePOnz4cFrqdPr0adW3b19d7sCBA1VmZmaN7kPYSrVv3z5UPy5cuPChDQ5gP126dPH2Xb9+fXXxYs0AqZgAEn7Zj636unr/0PvqwyMfqm5HunnR/Uj3mOhxpIcXPY/01PGd9d9VP13/c11WmL5o2/ED7+2jAR+PrPq9WKcWLFmuAbO5XnXq1jsGUGO7N1u29Zb3HTRMbduxSzVv3cH7bPT4SXH7mz7rwVwYyATfmrNTDR31wGbshfqN1JdffqkoiqIoiqIoikCbQJtAm0D7KwPasG2ADUfHD3p5D6ywfSCYjh6w8nilYbNQvtDp8t4m0A4XePNAWtRMnDpDe2ojs9+eTDR37/5add7VJaB94MCBUBDWRKtWrdQXX3zhbb9kyZKY5chQTocOHjwYU+7EiRNrNMxGBnYy/Yis6YcFtHv27BkDtHFdrQlaX75BPbbkG+qxDY+pp3OfVo3zG6smBU28aFrQNCaaFTTzAhndb+a/qb6R9Q1dxtLSZaH6YuLUmWrR0pXq9u0vYpbBAuT5eg29N6suij46dPiody3DRL9mMAJlmGsg/lZWXva2uVZ1HXni2X/Ty375zIvq5s3PvTogC9yUt6fq2khRFEVRFEVRBNoE2gTadQxoAzyvXLlSnTt3Lm0XAZSVLNBGFnZjkcFVG7NSGQ83zESM6YTP1VFmUCC7MdEAw7SZGbXu2NQVoG1n7yLq1aun5s6dq3bt2qXWrFmjmjVrFgdjN23aVO1AG5nestxJkybV2D7s1KmTE1oPHjxYTZ06VbVp08a5PF3Z7LUVaPc/OEA9tvLrGmh/O/vb6qk9T6lncp/x4te5v/bi2dxn1bN59+K5vOd0/CDnB3pbZHj3LPp9yvWRA3EHCoq8z2dkzPeg9dlz5d7ne/fnx1zrtm7f6S0rKHrwBsvGzdu8zy9dqvRAt19mN0VRFEVRFEURaBNoE2g/wkC7pKRErVq1Sq1du1aVl5en7SJQVlamVqxYkTTQHjh0lDch3qBhozU0ILhl+EVR8SFtpzJq7MS0wefqKDNRHD5ytOp8H6UhuszY/vD3/VVh8cFaeWzqCtC+efNmTGYxYLYNWWG98N5778WA2HHjxnnLZ82aFRpoY1K9CxcuqKNHj+rA4CGunS4VFBRUO9C+ceOG/u1AXU6cOKHrJrPPw2jfvn1Oz3GcR1Jbt26NW2/48OG+5aJeR44c0QH7lbD1wttK2AZtMpN6hgXayDTHdtj+1KlTSfdFsvrtjpfUY2u/dg9KV8WfbPwT9fdb/179cNsP1Q9zfqj+IecfvPhRzo+8+HHOj9Vfbf4rbzuUgbJS1YrV6zw7EkyibAYEzFtX0iIEE33antoTpnwWB8dxTay4b9Pj8vDGJJEu/22KoiiKoiiKItAm0CbQfkSBNh64AbSXLVum8vPz1ZkzZzSAPn78uDp27FhSgW2wLSA5AMWCBQs00AbkIHxlMOpW1BWgDeD5+uuvxwBtwMw40LdihV7eqFEj/RfX3ZycnEBLjXfffdcDdZhwsn///r7rtmvXThUXF3vryjrZ0aBBAw1kZWa4+SwIiOfm5nrLANIl5LVj/PjxGr4nEgBl9+7d43zGb9++7VzfzmZHO6WHMspD37766qtxdcKxwaSSAKku5eXlOfsNAwHS29sFtPH79/777zv7YsqUKXF1xOShvXr10vHhhx/q38ko+su131OPrX/sAZiuiq9t+Jr65oZvqj/N+lP1F1l/ob6d9W0d38n6jv73t7K+pb6x4Rsx26CM72f+dUrfBQmbAaGv3J84886du6pVu076c/hfG8G6xH4bRWZbG/9sQHAzMLAnb59zEkr6aFMURVEURVEE2gTaBNp1zHIEoGX69OnajxSBh2889CODcOzYsTrw/66QywEw8OBvQBbKASgn0GYwCLQfVQGOvvHGG3EQc/To0aqwsFBncPtp3rx5gUC7devWGtQhuxgQNYyvdFFRkQbbQeuYSQ0lHHZBWrt+JnMcwNwFjF1APhFoRP/YEDlo8kpkQOO3Zdq0aTqysrI8P2b87d27d8J6oe6VlZUx5Yad1NPVV2G2lX3hgvgyYz8ZfX/9X6vH1n8tFk67Yn3i5d9d+72Uvgvbd+7xILME19ILe+qMe77nJ06WeOsWFh1UHw0ZEZNtLSefbPp2e/2ZzOiet3CpWpeV7fTrpiiKoiiKoigCbQJtAu1HHGgDNsPrGjB65MiRauDAgapHjx76de+OHTvq1+TDBNaFByoyzfr06aOGDBmiQTfKTmZSSAaDQaBd2zR06NCEMHP27NnaisTAVwhWTy1bttQZya6JI2fMmKFBng0/AdDnz5+vByJt0I2JH5Et3KRJE12GK5MbWcHIeE0EtP28vbFv+XmLFi3UokWLdNaxXR/YhAQJmd5yG/x/VPsr27oFATsYVz8g49pkv1++fNkJ6NFXpm4ms97uKww2uPbZoUOHuM8NtLYtTFKxg/nt7pfUY+tCAO1Ese7r6rldL0T+DsAX+/Enn9eAGX+vXr0mBi0+V7/6TT297NMpM3T7GzZrrf/df/AI/e/O3XvHwGv52T3IfVdNnj5L/xsTT+rzd/lq52SSFEVRFEVRFEWgTaBNoP2IA20Gg8Eg0E5NyBwFQA6T3QsYbaxBjGDN5OehjQxmCVtNdrVRkE82rE/kMgBnP2AdFmgDNNrWJ7K+Bw8ejFkG6B4ke32X9UkYoU9sKA3rESNkrtuw3VioLF68OC6DG6DawOcxY8Y4M7RdYHrhwoXeoAUGjGWdTNuwHIMccjvsI4p6Hu6tHsv8eupAO/Mb6vdH+kSqA6xFDLCGd3bRwVgPeZmhjczq9Rs3x4Bv6bEtM7TNZ8jUlhndZrJJ6bHNDG2KoiiKoiiKQJtAm0CbQJvBYDAItJMQMkZhgRHWtuLAgQOB4NgIYA8wdu/evfovJhz0QOG1a3quAj+gjYzwoCzgqEB70KBBcd7UeMsHHtSw8gBcRt0wQaTMSHfJriMAMCaaTFY22MebRva+8caQnc2Odbp06RLz+c6dO2O2g5+3tJUxfWXbpWBQA+02kxyjbDt73xxb7GP9+vVe4NhG0dLy5eqxzD+IgdNf3/g19b9lf8M3/mDT19XXs6ys7qoyVlasSnr/8El/scGbHmzetmOXc8DHWIW80rC5N/Htxs3bvHPcZGN36tZbZ2NLP27AcmRl4/8/HvkA/BugDTB+7dp1Pn1RFEVRFEVRBNoE2gTaBNoMBoNBoJ2s4JN86NAh7fPssrqQ4Nb4awcBbSNA3u3bt+ssa9hZ+HlqVzfQhjZv3hwI69Fu2H/ITPKwQNtVD1soF7Acgf8H/LT9vjdt2hS3nZ2xDpstbAu7LLl/+HRL2ZnYpo7IwA47gGECNjJpPd/ufql+uvMX6rH197K0/2jzH6pvb//Wg8j5lvoLL/7Iiz+vim9m3wfhVdv+046fqtt3byc9iGMme0SsWrveuZ4E1iaQdQ1wbYC3yfCeMOWzOGBtQoJr7UPeZ0CMTQlFURRFURRFEWgTaBNoE2gzGAwGgXYCAX7CngJx5syZuEkgAVwxyaFthyGtQxIB7WQmLHwYQBuys51dgcztRJnHrkkhXUBf9qe9D4BtG7Jv3Lgxblt7MsumTZtq/2y5fz+gjgx0ex27f8NE1Mkfg5R/rUD94cZvqcc2fE39P3v+k/q7vP+s4we5iL9Uf2vF3+R+V8d/3f0dvc1/2PjHquBaYVL7lJYg2kpk0bLAdc2kj8Yi5FzZA5/002fOesvmL35QzoZNW2KA9tbtDzLnb9/+wsv6NlndFEVRFEVRFEWgTaBNoE2gzWAwGATaCWRnBvtN7gcA6gdug8Cxa9JBTFAIuwxkIdv+z1GBNgKWIVI2tLZBM0AlstFnzpypJ1l0AdzWrVsHZs/CzsP2H4cFiJ9VSVZWVsy62BZlpJKhLSfddAHtsBna8MjG5J+wnjGBf8MWBjFnzhydZV8d6nOin3ps4x+oH+V+Tz1T/AP1TNG9ePp+PFX0t148WYj4G/WjvO+px7L+QA05NTRpmN134FAPNM+etyjhNpu3bffW/2R8rJf7xKkzvWXHT5z0PsdEk+bzF+o3ijmP9uTt85YtXbGGT14URVEURVEUgTaBNoE2gTaDwWAQaIeRDYUbN27s9IBGJnLDhg1joOi5c+ecZezbt8/bzvaGBliFrYkfpA0C2vYEjUH7hUaPHh0HtGEPATuRjIwMHfv37/fWd3l6JwLa0IoVK+JAOMq2hexs6WVt+gOANT8/3/l50H6Mh7YE2i4YHtZDG22194l/4xiifghjZ4K/J0+e9MLO7E9Wd6r+G1IyVH1ry5+qpwv+Tr178pc62t2Ptjr+p3rnfjxf9EP1J1v+TPU52U9vm4wApKUNSGHxIbV3f35M7M7dqyd8NLpc1V6sazK0C4ruTYwKz20/aI2+a92hSwy4xmclZ0pjyqo4f55PXhRFURRFURSBNoE2gXZtB9q8BFEU9VWrrgBtl48y4CfgL6wwYGkBoGlnMCOb18BNGywjcxjLAHDtLGlpWQG4N2TIEF9obQNteFsH+U63a9dOQ2kNGrdti2sX2uSCu7Dy8MBlVXulrQcgrwTwLgGSS9hvAt7WW7Zs0dDe7iMT6Fvo/Pnzcb7iq1ev9vaBTHJ7eW5url62Zs2aODsY7NP08dixY50+37b/tgHxBmqjXb17945ZjnrYGd8IDBKkQwXXC9U/5f1UfSfnz9Szhf9NNT/yC9Xl5K9Ul1NPqreP/r/qpaIfqe/v/I766d5fqPzrBUmXj7rD/1pagfjFjt25Mdtmb83xXfcnjz+pDh89Frc/2JGYSSRdwexsiqIoiqIoKp0i0CbQJtAm0KYoqg6rrgBtbb/Qt2/SXsoSPPvBWng8w4Pa/hwQe9myZer999+PWwZwbrJc/TyejX+3C1obSxPX5wDaaG///v3jysNklZjw0PYK79Gjh699iNTevXuT7sPBgwfHlAEo7GqLa3JO2U+A+LYdjAH8dntsW5Li4mLn8q5du8Z9bvrClRXuZ1UTRZjcceXFVer3p/qo5wpfUN/d+T31/d1/rX5b9JLqeaq3WnphuZ5MMur53qvf4FBAe39+PDCX1iMmfvHEc+rg4SO++0RGtpk0UsbqzCxeaCmKoiiKoqi0ikCbQJtAm0Cboqg6rLoCtCFk4rqgqV8AZsqsZVeWN+Ldd99VV69ejbPZCApp8YFsalfmswGyfpnRfmE8tF1+4H7g/OzZs6H7MRmobVuvQC5Q7ApAatsne9euXaH3LSf0hGwfc79tysvLvXraGdrpBNo1XTdu3FSHjhxTZeUV6tjxkwktaUyfwV8bvtrY9tq167zIUhRFURRFUWkXgTaBNoE2gTZFUXVYdQloG+CWmZkZN8GhjBYtWuhJDV0Zy9nZ2dp/2wWn4bWNbGEJR83fuXPnxkBpwFpAcKPjx4+rtm3b+mYYY9JJ1MuuKyZmhCWHzFA2Fh0QrEWGDh0aCJwNwE1GsFqZMGGCb7mA+359aI7DqlWrnJnV9erV02UD5Lt04MAB5/FDRry0Z0HZxi7GCBNqtmnTxllnWMhIAO4C2ra/OUVRFEVRFEVRD18E2gTaBNoE2hRF1WHVNaAtBXh59OhRPQkgICn8mCsrK0Nti6xjTKoJ6PrFF1/ElQsAjb9lZWWhrDzscmGv4QK6ps6IsHWFkAUOcI3tMLkhPLr9gHEyQn1LS0u1RzYyt2HtgbKjHAcEBgXs/vQT2oNjhsz5ZPoCAuhHP2BQAX/T0RcURVEURVEURT0cEWgTaBNo1xKgjQd8AA48tONBHFlnqQQe4lEe/qI8/H9YiEBR1KOjugy0KYqiKIqiKIqiqNonAm0CbQLtWgK0AZyRvYYMuH379qn9+/enFMhIRCZdYWGh/jfKxj4oiqpbItCmKIqiKIqiKIqiapMItAm0CbRrCdDGK9k7d+5UGzZs0H8BtQG3owQ8RAGx8Yo4vFY3btyoy5TeoRRF1Q0RaFMURVEURVEURVG1SQTaBNoE2rUEaFdUVGiYvXbtWp1NDZsQBCxIogS2hd0IJiJDmSgb+6Aoqm6JQJuiKIqiKIqiKIqqTSLQJtAm0K5FQDszM1PDZ0yElS5hwrLVq1erNWvWpLVciqJqhwi0KYqiKIqiKIqiqNokAm0CbQLtWgK0z58/r61BsrKy0ppJfe7cOQ2zqxto3717V82eu1D1/uhjtWjpSv1vqnp169YtNWDoKNV34FC1dv3GR65923bs0ufTuInT1J07d3jAI4pAm6IoiqIoiqIoiqpNItAm0CbQroVAO53g+WEC7bYdP1A//vkT6oX6jQggH4KuXb+unnj233SfT5g8/ZFr36JlK3XbXmvSiudTCiLQpiiKoiiKoiiKomqTCLQJtAm0a5HlyLp167TtCCB0uvQwgXbn7r01gGz6dnsCyIegmzc/V7/6Tb17QHvKowcs5y1cygGSNIhAm6IoiqIoiqIoiqpNItAm0CbQriVAG7AZ0Bl+17UdaDOj9uHoUQfaV65eVQVFxerkqdM82CmIQJuiKIqiKIqiKIqqTSLQJtAm0H6EgPax0s/VsPnn1Ov9jqknOhxU/9q+WL1W9f9D555TR6uWuZQOoA1YXV5xXp0qOa3OlJ5V165dd64TC7TveWhfvHRJlZw+o7f74osvQu0PVhrY5vyFizGfA5LH1OP69dBtQD2OHT+pTp+Jrz/KLT17TpdbVl7h1T1ReagjygNYTrfC9LkE2p9OmRHXR2HbUlv6PJ26fuOGOn7ipN7/hYuX4pZXnH/QZniV12YRaFMURVEURVEURVG1SQTaBNoE2rUMaCNsoH37i7tq6Lxz6vF3itTP29yP1kXqX+7Hz96+93fInLN6XalUgDag6tIVa9RPf/mMhqYyXm38ljp0+GjMugZot+7QRe3ck+f5O8uYPW9RzISRm7dt15+3eKejunX7tho8/BNv3VHjJup1vvzySzV1RoazHu06ddNgVOrIseN62eNPPq/OlZWrISPGxG3Xq99gDVVXZ2bFlfuTx59U67KynX2yaUuOs10fDRmhIWmqSqbP7QztFavXxW2Dcnbn7o3ZR23pc+OhLS1szGe/eOI5VVl5Oa7/kNVt+iR374G4fiosPqSWr1obV7cGb7TQ5aF/X2zwZtzyTyZMqbVvHRBoUxSVio6fPKXfljFRWHTwoQ9CUhRF1UTh3nF/foF3fcT/u+5PKYqiqORFoE2gTaBdy4E2AHW7USfVL9oU6fAD2j9tdS9ajzgZA7WjAm2A1b6DhsWBPTsMNJRAO1EsXr7K28/CJSv0Z680bK5atesUsx7gKrJjAXKDygMMzS8sjoOrqYZpm9HEqTMD13++XsOUsrWT7XMJahPF4aPHal2fuyaFNJ8BiLseGA4ePuKVtWfv/qT7KSgA+GujCLQpikrldwmDivb13/VmC+UvvPUD+yy8+YO3g9LxZtfZc+X6LairV6+xgynqK9LMOQvi7hdNcghFURRFoE2gTaBdp4H2sHml6udv54cG2v/cqlANyihNGWhv2LQlJssXWb2wjai8fEXNyJjvLfvlMy+q27e/cALtaTPnqPPnL6jPP/9crVzzIHvYBShldOrWWy1ZvlodOnJMfTxyrPc5snL35O3T9UCGcK/+g71lyAy+ceOmE64i+xZlAdRu2bYjbn8LlizXZV6+ckXfhHpZueMne/2BLGfz+TMvNtAZGHggxcNp244feMs+Hjkm8gU72T63Qa3JcjZtkVnSsi21pc+jAG1ZDz+gjW1zduzW5yXAgg27kW1vztt1WZuc5y2BNkVRdQVom992XDsHfDxS9RkwNA7I4m0fvJmF30BcK/EbgN9K/GbgzZhEOlBQpN7r2ks9/UJ9vS1+Vyd/NltDW796ZW7YpPfVuXsf/XfsxKnON6WOHjuhbbmmfJYRGLhnSbfFFN4aat66Q9xv4I7duXHr4ncHA+cYUMaAs9d/RQed7TcDDVHgGQA7futQRocuPXQdzW9mdZ5Ly1au0X2N4wE7Mz8h0/Xt9p31eYC3yXr2HRT3ZlgqbcJxmTRtpu+5gPrBDi1dwnmF+xe0BccV5znedsvK3hL4tkPU44S+xvcR91qIoL5+WErlGoH+w/UA342uPfvp7fG2XVDfJXONwLpFBw/rhI9uvQd49cP+Rnwyoeo6VOa7H9wjf9Crnz4+5vv9MOa1Seb7JIXnGfQl6ohnGVuwCVyzLku/vYnzTh6n/fmF/FGkKIpAm0CbQJtAOxzQPnPxrnpt6Fn1s+a71L+8XaB+3rpQ/bxNoXpvzFGVse6Mmru+RPWbeki92TdfNelfqJoNKlZvfXxQvTPyiKq4/EVkoI0bxIbNWnsPsHjd2Naw0eO9GzfciNpAG9YitgArTZnwV7bhKoCstMe4dKnSs6YAPLWzkLBP3Bib7QHNbagJ+Gs/eA8dNS5uGyOAYty4yRtS2R9+9ej4Qa+4tiWjKH1ug1oAAbtMk2ntN4hQU/u8uoA22iuz1SFjwYLAQ7O0xMH/wyrFtj4h0K6Z2rZtmxowYIAaOnRoYAwbNkwtWLBAlZaW8k6xmrVnz56YYzJo0KCq68rVtBzjPn36qMOHD4d++M/IyEhbPeoi0PZ7SwWDf4neggGUc10/Uf7o8ZN8t5ODnHKbvgOHOtfH75Y9F4Qrg9IV+F1JZ+a5fV+E3x/AIfy1f6/loLkr8Btq/zaZspOFZ/JNpjhbuLkLq+1c2rs/PyHUhwDp/OqHMtLRpqD1E9UvyuCBy6pO2snhO5SO44TzYuPmbXH7S1dboiqVawQGH8w9oh3vvPeB73UlmWsE5ofB50H1w8BAkHAv+zAnag/7fZJCEolsp319db2RY0f3PgNqrQUfRVEE2gTaBNoE2g8RaM/adls1nXBDPdVxt/pZy73qX1oXqIz1pWrIsivqxY+vqheqYsjSK2pjXoUaMr9CjVhySY1aXqk+WXlFbSn6PDLQxkR45sal/+ARznVwgwnrENxUI0tZPlzJzF0pF4yUcNV+WJYZy8iycAkA1tycIXMFN1kSarq2Mx7KqMcVC2i4HhKRIeayS/EDqVu370z6Yh2lzyWoRYa1naki2+Lyoa7JfV5dQNvVt3hl289mRtadGdo1X0uWLFEvv/xyUjFjxowYUPSoAv5k4G86gV6nTp3i+nzTpk1pO8YA5mHr0qVLF2+7+vXrq4sXL/JJIQko6wdpAIMMQMO1GVmQeLsFWYMShMxfvCxuW2nlBdCbMX+xnqsC+0JZruzj6bPmxbwNtDVnZ8yg6Qv1G+l5ILxBlbx9qn3n7jqzUwayKvF5db2FI/sFv7V+2aT4TZQAcsynU/TA69r1G2Pgk7y3iAq08bspy/xs9jy1fuPmmP1HuYdJJDlwbf9G+0E6HH9kis5dsCTmM8zTkWqb5L0CssDtcwPnBe4N0vH9kW/xIfkBgxkYwKj3elPvcwzqpNomZBH7Qdnqzr5P5ruQzDUC/fdmy7bectjybduxK+atB7vvolwjcJ+IvsM1qPdHH+t7bQwMyAQOV+KI3caHBbTDfp/iIL9la2jXE+uYvsX1Bc8bG7O36v6Uc99U58AXRVEUgTaBNoH2IwK0u8/7XAPtRqMuqJ813aQ6jD6kYfbTA66ppxAf3QtA7eU7L6uJ666ryRtuqilZn6vFu25HBtqYGM8b8d8VHhaYhysDOZMB2vjMfrXYPMT4TQBo79c8jMoHFdfrdEFQ1PWQKPsDgVdFcdOKv+b/Y24QJ09P+mIdpc8lqHVlzrn6prb0eXUBbVc/ubZx1Z1A+9EE2oiVK1fWif4IC3/TpbNnzzr7G2A56iBCKkC7Z8+eMUD70iX6QKcDaH/xxRcaAgLS2ccVdh8GhNjXUFhsmGXP/fvv4rKjYVEAayo/MCbfBsJ+5dwPYQEeXq/3e3soHdDJ/PbAgstPMhPXBkUnTpZ4y8ZPmp4y0DZzaCAwAbWRHNitjt861xwk9jGSb7vZb1NJqG23N0qbzO8+zr90TOgdBuQCbMtBDQkl7fpFaZM8j/B9Wr460/t+fdVAO+o1Qt4byzfo0HdmG/t+MOo1AvfDrvM+b9+BwDdGXPfk1Q20w3yfbGFgz97GVU9cl11JSchqN/1aW++HKYoi0CbQJtAm0H6IQLvlpBuqyYR78ZvuxWr2mhM6M/spC2j/dshVlXv0ipqWfUtNz76tY+aW6EBbAj5XxmpYyJks0LYBpcwW9vNOlA9ALrgaBCjDwtVkJzyMArSj9Hmim+cwQLum9nl1AW1XPxFoP7oAt1GjRqpXr14x8eqrr8YBVnx28+ZNAu00a9asWU6gDZgs54og0K7dQDvs9raNlbm2Al66bLZcgreyuV4jg9IIbw7J7FVX1qZLxgotaBAXMG7eomUaNsNnO2jQGdAH62BdeNua+sAfHNmn+BwDq/L3Vf4GYV4HKQDQFxu8Gdf/thUM6oRJnpGNCv9tzLth/15hm9YduniTWMsMVZnRit9X2GS4hHk6Zs1doNsB0BrkYWxDeZSLN578IKu0Q5DzkWAfcgJrQElT96htkkDb77gHCfAY/Y5+mD5rrtMyxL7/cL3hZ7KG5Vt0UduEwRmAbFhPoAw5oBIGaIdtkxT6zpzv2BZvG6bzGmHmj7ETMGy7DZmtnu5rhN93MB1Auzq/T1I4lmbwBNch83ZAstd0c72srRZ8FEURaBNoE2gTaD9EoP0WgPb4e/Hm2KtqXlaJthkxIBvx5H2gnXf0igezp1XFjC230gK0MYGLn5AFgcDDXnUAbZktfMXH6zRRtnA64KrMesGNIG6WcTMtY9+BAr0eltn+0dXV59UBtGtKn0cF2sj0IdAm0DYxffp05/kLmxEbsPrZT1y5ckUdPXpUHTlyRJ06dUp/98IKIALbYNuTJ0/GbVtRUaGXofwLFy6E/q3ANojTp08H1scGyongrywbvx2pWLHcvn1bvfHGG75Z8fCzTiQcE9M/lZWV+rMVK1aEahP80c22165diwS0zbE/c+ZMyn2FcwHtwXmAMrFNImAUZZuaDLTtbEljxYC/+DcysjEHBcLvvJa/AQbmybkOkskylpmc2N7vGNr+ukFZmsWHDoca+JZQXN5j2APa6C9TRzlY7pqIO5E3syxLwjyZBR70W2jbZ8C2IVEfy/lBADxLzpT67sPPum3F6nVxXudmrpKobZJAG6AUMB1vCIT9fs1ZsNhZn6BzzGXvYCcHpOM4uQBrGKAdtk02BI+pT96+tF4jTP9IixAJZ12Zxum8RtgDLfItiVSBdnV/n6RMRjfeoMUbCVEyyVFfM7DEDG2Kogi0CbQJtAm0EwLtbnNvekAbMWz5Pc9sCbMRg6s+W7P3ugezEalYjshXGpE9kugm1mSDVGeGtp+fM240zY2/y885HXBVvha9ZPlqZz3w8I3Z6uH9iYfyZBWlz6s7Q/ur7HM/kGwebP2Au3ylkkCbQHvSpEk+D5431euvvx4IN48fP67ef/99J4ydMmVKTNYczuEhQ4Z4y/v27at27doVlw1er149lZ2dra8XyBa3y23VqpWG1K7v8qpVq5zZ5ShzwoQJMSAmJycn0GLl3XffjTmX4bXdpEkTZyb1+vXrIx2L/Pz8wDo0bdo0pg+l8Lvl8t5Gv8p+dgHtvLy8mGMrz4X27ds7j7k8b9APgOeYONRV12T7CscFx8evHwDZ7d/mZLfB+vItBPimA+LXBKAt4ZO8hkpYBVBrMjGln/aipSvjMhZNhirgj4HerlfpZRavn+SEwC6rLBeoStQP+F2C7zMyL2X2JLxrcX+Az7FcwkLpvYsM6/KKexAO9xLwEHfBbteEk6szN+hBXQnJZKaznP/CZK5KQOaX8eq3zzC/iWYOCuwX7XENOhuZrFuZjSvr7PLRjtqmoDfvMNdGIpgr5yIJyvKWfYb1zKSW+Bwe0q75TFI9TlGBdtg2+d0/RbU28btGyMx8eV/sstuQ4D8d1wh8jsAbE9KvO2x/hwXa1fl9ch0jWB8hc99vkMWvHzAwMHj4J0lnt1MURRFoE2gTaNdhoI0s68bjb4i4rlbuuaKhNrKyEYDZ2QcuqOn37UYM0N5x5IvIQFv6+rl8liHzmiQeopAhUB1AW4Jk+zVEczMoJ3kx/pfphqvyQQL1cN3kywyiIK/MdPZ5dQDtmtLnfiBZ7ge+hlL2A19NA9oAHXgdF+E6h+RyV5Z/ou0JtMMD7cuXL8fAYTtDG9A5ke82oLB87b179+6R/LsT2Z+g7N69e4fazmQxz5s3L3Dd1q1b67qj7LFjxyYs268fgx7UbfC8dOlSDezlZ4WFhXHbIrMaxyNsf0mgHea4JQLaQcc62b4CTOnYsWOoupSVlUXexh6gQezYsaNGAG3zirr9+r/MXA0K+OYaqC0zGs0r7xKGzVu4VAPjMBmm0tYBWaH4DfaTXdew/SAtH/bnFyYEg3IfsA2R/SB9lF0wTMJu9JdpGwZ/ze+4HBQ3v5/m3gW/94DEpi9d1mlyECLMb6K8nzDHPuj31rwhZu4TZFYtjrsL3kVtUyIrOdQBGdFh4W/QuYbfbjnIgHNCTrAHgO7nhR3lOKULaIfJ0E4H0A5zjTDAX2apFxYdVB8NGRFzLqZ6jXBlcptYsGR54Js4UYB2dX6f7PtiMygQdvJKDLz5DfgkGiykKIoi0CbQJtAm0FYlF75UTcZft6D2DTVsxTW1KveKWrm7Ug2Ye1qNXHE5BmbDS/vStbuRgTYkJ6TBAxGySnBTiJu/4Z+M95aZDN3qANrQxyPHevvCjTysPXDTCP/JPgOGxiwzk5hUB1yVmVzoD0xsg8mqkK0sYXYq0DPZPq8OoF2T+twFkuXDDPaPB79bt27pLBr5wFgTgbZ8nRdZd0HLXQ+pibYn0I4HkxMnxvcTMleRweqXLYwMaRseNmzYUHXo0CHu83HjxnnnsLSzSDWysrK8+rp8qFEfGw4jkIGMc3Tt2rWqZcuWqnHjxs4scFiuoM74XbCXYztX2ckAUteAAfp92rRpMWUOHz487lrQtm3buH03b97cy4q2wa0B2vY+TbRr184D5PBUDwLayHaXy+X5sXr16qT76vDhw3EQevLkyWrBggWqWbNmzr6Isg2ANs6J6vBLTwVo5+zY7V2z7k2Id8cJf8xvA35X8ZuHN5bksgMFRT6/aXfV5OmzPK9hDAbgLaowGaZyMkj4BQcJvzEt3umomrzVTmd1AmyFUTJAETYA//67Jr6AFb9TYX7fjVxvK9mTN0srBWQLo4ygzE3sE/AR/QBYCPDn95soYZ2cKDzo91beJwC6YbkZxD97rkydPHU6bW3CvQT8pteu36jvI8rKK3SfGa/kRL/5eCMPgw7oB6xnD/7bfQGrCr9ja09Gmupxigq0k2mT/B6hz7ANvoNFBw9XyzXi0yn3frMMnAVUld8BA69TvUZge5mRLQOWgmG/72GBdnV+n/R3aunKuLcaw9ZT3nPK8HtTlaIoikCbQJtAm0A7BmhD07M/90D2m+MexBtjr6vXRlxQHSaWWjD7tso5eMvbPirQtifh8ctgwc2sByLuA8V0Am08SMpZyV2Bhx3zwGtnt6QLruqMwxFjEmaTBflfp7vPg7wZUwHaNaXPXSAZ677Zsm0oj1JTj0T99LCAtsx+ctUj1eUE2u5MW4A+gEqEBJoSjubm5vqC6YULF3pZWSdOnIiBpg0aNNBQ1LUdQCeuuVgGv2hXJi+WAeB9+OGHThCPrHEb0sJ6xKioqCgum9m0BUJWtB/kBGCWEBTlHDjwIMvTznY2sDyMMjMzY7bt0aOHbiv8pu2s8qvCOujgwYNx/bRz54NXvGHp4ZehvXjx4riyjX0L9j1mzJhQGdoGamP5okWLdD/s378/Ul/Zft8yexsQWh7bVLbBsbTPk686Q1t6SQPGYQDYhj8yI9l+4wZvotjXOwl1cL8hBzjN75H8rQnKMDW2BeaNp+pQWKAoMyZNezGgjQxJabfhZzniOi7StsIFfwHnBgwdpf//nfc+CDVInoxMEoDu39MPPOhllrV9zM2xM1nIAJD4NybM8/utTneb7PuwICuasN+f7n0GeOXhmOE+cfvOPd7EfPagSrralCzQfthKdI2Q927IrF6/cXPM24MuD/J0XCNgr4HzFMcBg1cymz7oHj+d3590fJ/wpqepu7QQlPWUVjeuQTaUf6rktLYjlIM96W4fRVEUgTaBNoH2Iwq0b395Vw1Ycj0WZldFozHX1GtDz6oJ627EwOzVe2+pL4XnZFSgbW7EMfu2vJmTN+WYQEfK+Nb5zX5tbiKRKWADbfmZLWROzpzjXw9kDrse5HDj57L/CNqnfEi0s7a0j+3a9XF+juZBA1nC6YAHYftcPngtXr4qEETIY1Jb+tz4ectsFHOT3bl7H+cxQGafeQg2D/+J+kk+PNoTcsm62/VIVtKf3FUPudz1kCGX26+fE2j7A22/MDAbAFECQ5kBjKxgwMLrmIz1/sSCQ4cOjQOqNtAGFMVkkEY2mAYIx4SDRgUFBU6IaX9uwLDU8uXLfbPS7f6QQNvOBB48+N6keGgnApls0is6zCSK3uCmlWW9devW+9/FO3FZxlu2bPG2ta1SbKsTlN2/f39n/3fp0sUXhOvfUmuSyiDLERwr2daofeXKgO/Xr59u8/nz5/VEoNge54exmYmyDa7XGzZs0MAfEeX3Pp1AG5m05rdD+h1LYSDHQBU54Zvcr7HNMCBP2gFgW3Otlz7REoragMy171Sv6+kA2nKwcmvOzrjfVgP17MHdoOMCGGiOgdm3hHvICrUtzmR9MQF2VGFQ3JTTqVtv/SZX5eUr+ngACJo6IDvaTHKtz/37Fge4jzD1M1m19m+1yQSujjYBIqdioeF3f2H7Dst7EznYn6421WSgHfYaYaxCkDlu223I7wDOM/Rnuq4RNuB2fQcfFtCO8n2S/WCsEpHpj8BgoXmOQaY7ygszGap9vsIChaIoikCbQJtAm0A7EGgbqD0t+6Z6c9z1ezAb2dkjL6sesy7E2IxsOxgLs1MF2vLBEjd0xr83zA1gdQg3kbIeLp/hhyVkdXh+xpevpL189nli4fVJgPXqOgaPigi0gwNwuaKi4h5IOHEi6e2NfYcE2iZzW4JymeFrT8poA1MDcm3Au2lT/EStdtbzyJEjQwFtFzhNFPv27Ut4DGzLFsB9tA8AFtnYNpAGiDaQfu7cuQn3ZwN8A7TlJJIAynLAwFxT5TEKAtorV66M2TZqX+H3N2gdnBOjRo1Sx44di/nNTnab6lSyQBu/FwaWAHr4DfT6Dbi6lrveMHJldspsWL+BdQjZsWZ72CxUl8IARVeWqS0zYabMKJX94xoAldmtLvstExKISpDqGtwNq7D+6B40ztsXB39tcA0ZezcJf6ujTTKzNVUQbKzkUB6+G2HgebraVFOBdpRrRKwtyd24gSnX232pXCNsSX93vzc/qgtoR/k+2f7ciQLWJ2GU6G1MiqIoAm0CbQJtAu04oG106vwXanr2TdVl1lXVYky5mrrxhlq083OVc+iWunDVPUFHOoA2lZzwMIQshnaduoUKeHMGTT5E8dgSaEcD2piYEID15MmTOgCsAaBtSDh9+nQnWA4T8NEOgqUuoI1JGcMA7c2bN8d8vnHjxng4UFERk/0t/cCDgHYU+B/Gl3nq1KlJlYm+wu+Ua2JN1/5ycnLi1kHGssys98smHz9+fCigbe83lb6CNYnL29sO2MMYRdmmJgBtQEYJXvILiwPLNRmELpDr5xkr31TRGc3bH2Q0y8mVTcZmEECWEyYm6oON2Vv1ZHKIsD7ByQJtv2xxCXJdQBuAzn5zw2XPgf4xGaum32VmPDI8XSBZClYo8HFGP2zbscs5SR7a7XqTLRHQlr7mdkYz9mMmAJSAMh1tsnXo8NGE0A42NaszN3jnxK3bt53rybfTrgh7JRecTudxigK0w7ZJCm1CZj3Wx18XtE/lGmGOuSuTW54vEvineo0IOo7pBtrV9X2SNpDpBNquiVkpiqIItAm0CbQJtD2gjYmn/IB2FBFoP3zhJttl1RHG75nisSXQTh/QNqDalp35bACznaGNTOvZs2fryQxN4N+YoA8xZ84ctX379moD2tWZoW17NXfs2FF7fcu24t+mrRgIwKBAkGxbj7Axf/78UGDZbx0bhruAdtgMbXxeUhI7CJWOviotLdXZ5d26dfMF+3ado2zzVQFtZBEaUGTPseAnCeZsqyq8zm6utXKSXAwqmm1gVSK/R3IiRD9bJrm9tCEIEtomgVLYSXnDAm0D9l1ZvNJ6xXgH28fFZeVlLOBsj/Cho8Z57dix+4HfPsCemZ8C+3G9jYV9IqvVr/+lYG2AN6dkJLIcQR0MyLXBofQER7sl+IvSJtviRrax76BhCT205YR5QZBTThouwapRxvwH5RQWH0rLcZLw1px/+/MLE56vYdskJTN27bqm4xohJ2S3oavxwUfILO8o1wisY85DW/jczCsjJ0NPFWhX9/cJ9nz2NmEsR4LsR+R56bIXpCiKItAm0CbQrqNAG1l2mEgLkU7wXFZWRqBNUXVYdRlo2x7MRja4hv8xHgJtD22AZztjCv+Gt3V+fr4OWFtUF9BG+fJz7MOujw1bgzy0pYWH3z6l0DbTTrTZDwIZ7d27N2mYLbPKMQmjH5w3fe/noW1nd9vwP6yHtgsSR+krnE+YwBMDIIDd8LY2xw51waSNMgsb+4UtS7LbmLri9928iQD/dlemX3UBbUC2hs1ae6ADGccAXcg+tEOe94CUBloDsGAOBAggDdnKrkFBCXgNlMJngLbSxsAvU9TYd9gAMSyYTib7MmyGrMwobfBGCw2cDJAaP2m6027BtmMAGLt832YHmZ7m83tZ3w/OBWlxgX1hXg6U9emUGQmzNe19RpkoOWgSO/v4ALYBygLStWzb0ReaJtsmk73ad+BQDXoB+uBTjMn25PwcLm93I2lr4TfBNiSziLHe7ty9ev8oF5m50hZDgtKox+n8hYt6H/sOFKicHbu978S0mXN0mfgO4hik0qaYAdVjx0MN4Ee9RuCclt9rtME+x20QHOUagbbjM1iLIGsesBjnBK4RxsfcNZiSKtCu7u9TonradkXmeI75dIpuu/luwN7PTE5qztcwGfwURVEE2gTaBNp1BGhjsqesrCw9sdP5BK/sJSNpZUKgTVEE2gTa8YDZwETbixkBsGgeYJG51Lt375jlhw4dqjagjd8ClCWX4S0eI+zbXp6bm+vbHwDEAK9o6+XLl2PgKLyud+3a5W2L7GAJgLGumYTQ7+Hchs3YH3yzMZGhCey3sLAwDmoXFRU5PcwBdY3w/37WHrbPNfoF2eumbmPHjvXNbk4EtKP01Y0bN7Tljd9EldpqomPHmP2if5LdBscS56UciEEAqqcbaLu8mqGwHq/IyrSzPpevzoxZxy7nHsS9EwcJg96U8cvOBpgxGaJBsNIFgGS9kgHato+1Sxj8eLHBmzFtsD2U0XcyCzWsR+7ho8fijqfMsrTjl8+86Dtnh73PKADOZYViHyO7L2T07DsoziYi2TaF6Tv0d/EhfzuPZOAvwLNdtr0/TDiejuMks6z9wi8TuDqBdirXiOytOYHr2+d4lGuE8cgOCrwJETQRop+nd9C1tbq/T4muS3Y97Yx7v0BmOEVRFIE2gTaBNoG2J2RoA2jjoRwP9nhAxmvPeMA/fvx4UoFtkKEF71h4ccJnE+UiW5uiKALtug60bc9lWIuYSQSLi4ud1g5du3aN+7xHjx76obS6gDY0a9asuP02atRItWrVKu7z9u1jJ7ny8342GdG2pQmiefPmuhz7c5QVJIBV2/cZ4NrvQb5t27Zx8BufY5JIV52QRR/kVW0fUxPt2rVz+lEnA7ShKH2FN67sZQDWsCV55513Yj43EDzKNvabBWH9zpMF2vCcxev8yGSVWYoAOQYUJwJCLh/hTVvcwArZqH6AB9mWNvRFrM7M8m2L9CuWnruJJEFVENh3gSOzXaJscIDccROnOfvhnfc+0BmS9nExk9sB8sqMVAMk/YAstkUb7P0gEzVogmW5z2Qn1XMdAz/LCWSmYw4Ku34AvH77S6ZNWNeGzDJwvpdXBCeWyIEYl+WLvT8AaxdgxffGeIin4zhJixO/8POOTqZNRnirQpbtlyWc6jVCWo/IdQFg/ZTMNQLflfe6+g9yIDv58pUrvufrqZLTMVn1YYH2w/g+BR2L2XMXxizDWzPwLffoZU50AACAAElEQVQbDMB1xrxJQ1EURaBNoE2gTaDtCdnT69at83w44SkKCAWwgVfIP/3001CBdbGN8XpFefDzxEMygTZFEWgTaMdnutp2HIsXLw41maF568UFtAF4/QA6gLbMDj148KBvvV12Gq4A3LRBrCvjGfHuu+/qB2ftF9u3b8Ky7fo6Ac/y5U4bl7Dro/4YVLAnuUxmokpkTSczGaU5RmGAdpS+cmX8+8XWrVsjb2MPmKQbaNvZrK4sylSF19cxGR+AOTKR/bKE7bphXWwDP9cw29R0AWwDGJWVV+i/YaCi0dlzZXrSPGwXBozhGMKyABYnAHI1TciyReAYB2XGRm0T+gjrY4DG9Fsy/Z2ssD/sy9QN+wxjDVTTj9PDEixZ8D03340w53iy1wiUicEC9DUGkU6eOh3oUw65suKl739tFQA++iDKtYiiKIpAm0CbQLsOAm1A5ylTpuhXo4cNG6b69OmjJ4NCZmDnzp115lqiwLoffvih6tWrlxowYIAaMWKEhiPp9uamKIpAu6YJlk1hJoXEQ65t7YCBP6m8vDzVpk0bJ0hENrEE1jbQtu054H8sM4xNZrcRJu+V1iF2vXWG36pVTtAL+4sJEyb4TuSUnZ2tGjdu7JwEM1HZqBMykxPBbJfdiN2frt882y4FbydBsFpxQV1kpeO3TNYVbyFJ4d+ubG4cb5llbQC6DdeRre830WKUvsI2GKC22yrbJAdTomzjAtrSeiZVoP3JhCnaixlZs4gW73R8JOAxRVFUqoJXObLmzfUR1iHrsrLZMRRFUWkQgTaBNoF2LQHaFEVR1aG6BLSrQ/BPxkR78ILGXz9w/LAEkH706FEdAOFBWdBSAK3Xr1/X9ffbBpAZVlXYB/6ma2LBqAJwNm1Ndm4JtAUe2shSr6ysTHvdku0rLMe6OIfMsUPmfrq3oSiKoiiKoqhHQQTaBNoE2gTaFEXVYRFoUxRFURRFURRFUbVJBNoE2gTaBNoURdVhEWhTFEVRFEVRFEVRtUkE2gTaBNoE2hRF1WERaFMURVEURVEURVG1SQTaBNoE2gTaFEXVYRFoUxRFURRFURRFUbVJBNoE2gTaBNoURdVhEWhTFEVRFEVRFEVRtUkE2gTaBNpfIdC+fv26YjAYjK8yCLQpiqIoiqIoiqIoAm0CbQJtAm0CbQaDQaBNURRFURRFURRFUQTaBNoE2gTaDAaDQaBNURRFURRFURRFEWgTaBNoE2gTaDMYDAJtiqIoiqIoiqIoiiLQJtAm0CbQJtBmMBgE2hRFURRFURRFURRFoE2gTaD9yAPtK1euqIqKCnX27Fl17tw5VVZWlnKUl5frQJkoG/sg4GMwCLQpiqIoiqIoiqIoikCbQJtAm0A7JaAN4FxQUKB27Nihtm/frnbu3JlS7N69W+Xl5anc3Fz97/z8fL0PAj4Gg0CboiiqLqiy8rI6fuKkOlVyWgf+TX11unv3rio5U6pOnjqtvvjiizrR5rPnytSx4yfVzZuf8wR4CPryyy/1dx3n2J07d9khFEVRBNoE2gTaBNrVDbTPnDmjsrOz1apVq9SWLVvUrl27dKQCtPfu3asB+Zo1a3TZ2AcBH4NBoE1RFPWog9ORYyeqH//8iZgYNW4iO+cr1LWq36THn3xeH4s9efse+fYCYpv27tidyxPgIejg4SO6v3/y+JPq4qVL7BCKoigCbQJtAm0C7eoG2qdOnVIrV65Uy5cvV4cPH1aVlZXqUtWN2MWLFyMFtr18+bI6evSoWrFihS4b+yDgYzAItB9Vbdu2TQ0YMEANHTo0MIYNG6YWLFigSktL016HGzduqMWLF6uBAwfqfQ0fPlydOHGizt6Ihjkmo0eP1r9ReIsoXcLv4ODBg3X5OBaZmZke6MzIyPD2PWHCBHXnzh0+MTxiWr5qbQzIfqVhc/XTXz6jZs9bxM75igHvr35T7x7Q3ruf7aXSriPHjuv+xvedb2RQFEURaBNoE2gTaD8EoH3y5EkNs/FQDw/tdAn+2Sh3yZIleh8EfOkPDD5UVJxXFy9eYn8wCLS/QuE69/LLLycVM2bM0JAzLQ/SR44497Fnz546eyOa7DGZNGlSWo5HcXFxTLkTJ97LzL127Zp69dVXvc9bt26tX1GnHh3h/Gnb8QMNtd557wN169YtdgoBL9tLoE1RFEURaBNoE2gTaFcH0C4pKdHWIGvXrtUTOqYbaC9durTGAu2lK1arHn0GqmUr13ifZW3aoj8bNXaiunr1ao2s99r1G9XvmrSyssCaqVVr12toUpPqunJNppo5Z4GG74nW3Z27V30yYbLqN2iYGjZ6nFq/MbvGHoOgOHL0mOras5/q1X+wKg/hH19QWKwmTJ6udu7Ojfkcx7KgqFgvTxhV612tYceeQDtxYCAxVSHLt1mzZgTaaTgm48aNS3m/eNPJBuUGaL/++uve502bNiXQfgTVuXtv/Zs8e+5CdkYNBby5ew/UifY+8ey/EWg/RB09doJAm6IoikCbQJtAm0CbQLv6A3ChdfvO+uZz9PhJ3udzFizWn736ZsuHDlNRp2kzM+Igu1wO0Gt7c8r4aMiIGgO1kT3++K/ueThuzdkR2O4Rn0xwtufXL72qysrLaxXQ3negwHuoOVNamrCP/vXXL+n1n6/XMOacwzKUEXS8ZczMmE+gXUPgaaNGjVSvXr1iQmbnmsBnN2/eTGnfNiitX7++vvbm5OTUaUuLoGPStWtX1bhx47jjgb5L9U0lP6D9+eefa5sRxNixY/Vvbm0WJtabu2BJ1W/WHHX+wkW1bccu1apdJ9XgjRbqmRcbqIz5i33PP2QufzZ7nnru33+nM5rxt/dHH6uS02fSXs9NW3LUlM8yVGHRQb3fGVXXydeatNL17Ny9j1qxel3cBG5YD23DerAMQXswQOmqn+kHAGyEgYjYZt6iZfoz9JEfVCw+dFj17DtIPf1CfV0n7BO2JUHf3Shtgr8vtsGAODLJ12VtUi3e6ajbh2OAZddv3IjZButt3LxNH1e0B8cJmedBgBSDNGj31BkZ+rw4e65cfTxyrK7bq43f0sc5KmBFWagn+jRR9juAIvodAf9sCbT35xeoXXv2hj5fkz1OGGBGPbOyt2gv5U8mTNHbYFv0NSZqTKdOnzkbU7cBH49Uh44c0+3yA9rmHGjYrLVq+nZ7fWxQN3vdvfvzdVtWrlmX8A0Wc44tXr5Kn384/uh/nA9Xqu5t8Bf9hvMI9dyybUdSbcKEi5kbNunjX3r2XMrnHtbfn1+oPp0yQ38XsB6iXaduur23bt/2rR8GRcz3AmXjeoakjCCgHeX7RFEURRFoE2gTaBNoJ/DQNpYjgNB1CWi/17WnvvlEVnBNAdouyG5i4+atHrzEDfPqzA3q+ImTGn5L8Ll5a85X3r/wUe/So49Xp23bd/quiwmazHqYTKfPgI/VC6808j5DtnNNyzwPivyCIq8tQUAbber2+4+8djZu2TbmnKus6sPfvPxaaKA9fPR4Au0aAk+nT5/ufJiFzYgNUOG57NKVK1f0XASwE8F1GuDMpaKiopgyu3TpEggeysvLdZkIwNtkbDawLvy/Ua8gEG/qjgmB07l/uT3e+kj1mBw4cEAfA7leVlaWszwzNwT2DW9yv/b7Ae1khHPC7Ov06dMahtc0yUn2/KJ7nwFxYPXsuTIP+rpiXVZ22uooLUA6dOnhAU0Z+O2UE7idOFkS2C67fuiHMAOPQ0aMiasbfuf91gckcx33KG2CzL0NQFr7zt2d+5STBwJut2zb0bd+n4yfHHds7fOi76Bhzr55oX6jSINtctI9nEdBMvcV2P/58xdigHYy52uU42T6OigOHz2WlnMcwDnRvmxgit8SQFW/9YeOGuf1g2nLL5950fc3yGji1Jkxx9ccr6BYumKNc0Ag0XauiS6TPfcS1Q9lucA0/PCDtnMB7ajfJ4qiKIpAm0CbQJtAO4GHNqAz4HM6Jyoj0E5fnRCwkzA2I7hZBsh2ZQX7wfCHZbUBi5FxE6fGPUgEAe0ZGfO8h9QDBYVee1u8895XdixSCcC83KoHyH1VD5pB9YZFTMyDsaOdmGT19JnSuDh77pz+a7K7kQmPjCUC7ZoBtP0gJiConU19yQJPx48fV++//77TEmPKlCmeTQVApw1jZTRo0CCmbEyS2KRJE2dW8vr16+Pq2bBhQ28dLAf8lVnmO3bsiGk3ygZkxsSXLluNZPYPiNSzZ09vHUyyiDeI2rVr5302ZsyYtBwTe5DBeF5L6N2mTRtnHyPbG4A9DNC+fft2TPvffffdOKiXl5fnu6/+/ft7gx/IvpfLRo4cGQroZ2dn6wEP1PvDDz/U/44qGxAClO7YtUdt3rbdg0q4ph8/ecrbBsDmxQZvett8PHKMKjp4WC1fnRkzqFlyJj33IjiPjAWIhE2Llq5UqzOzNMDE/gz8vVx17ZYwG5m1AI8bNm2JaZOsn866zN6qQTeyL+u93tQDnfg3PkcgYzbmvMuYH9N3yFYFYMNbVubzvgOHptwmo0XLVsZsg3UmTZup62aArYGE2EfrDl28dTt+0EtnsgKMNnmrnfc5smUTnReIN1u21ZnhgJeNmrfRAxpRgDaApRkM2Vp1TxEk07/ICMa+opyvUY+T3ddjPp2i8guL1YCho2Lgeaqe/bI/EPMXL9M+znibIAhooz5mGY4nso3RF7Isc2wNXMY5VnH+fOB3zZwzgLOQ8ZSOPY8KYoA/QPnt21/4tgnZ2ChH9p1f1nmy554B2ugDvNWQf9++TfaffZwkBEef4M0UtMl8711AO5XvE0VRFEWgTaBNoE2gXUuBNgDvyVMl6uChI+rI0eOh/IgRyIo9VHXTie0A/tINtM+dK9P1QflhIWJp6VldJ0BfgEhXxjE+M5lTNtCW1hSuTFyZzduk1btfCQDGK5d+2SdhgDYCx9t8Pvb+Q1dtA9qh3owoOR0H/ZNt56Bho3wHOAi0aybQRpavhMJ2hjYAYyKfZ4BQQGJ78kEXKEbZeJiGxUWYSRH9gLafP3cin2pT12T3bwPtROunckzmzZvnC7QXLVqUsN716tXT0DsR0LatYTAppIR6ixcvTrgvHFMMZCBD3LauuSHsInQWb9u2Mesgk9/uk1R8vCU8wqvz165d95bBUsGVSSmzSQ30MgJMkoOy1QG08f92e2FtYI6DgZcAm6irFCwTTHv7Dx7hhJFyf7A98JME51jfhrvmPkTDc8vmJNk2uSArjhcsGaQA4K5evRYDMV1e4Ng/gJwLRrqg4oIly+O2R5uiwFwJBsdPevDGBawhAEJNBrHMYjfnUpTzNepxkn29ZPnqmPr36jc4BrSnIgy0mP1g8ETuByDWBX9lm2A1Is8dLDMwGZnMWCbX37kn70Gf37ql+9wcR9dggwTasA+RGchmEMtk0LvaJAEv9gPbkWSAdqJzD9/pk6dOO/vWZJv/4onnPDiN7cxABuotB7bQfmPxYgPtVL5PFEVRFIE2gTaBNoF2SKBdUyxH8OA/f9FS5+uC9d9oobOR/SZLNJ7NMl5+vWmch3MUoA0rCdhC2OXjM8BtV52279wdY58hMzjg0Yd1Lly8qP7Xcy87QfDPn3hWQ3OsY4B29pZ4SxFkNJv9oD7IEjZ+2+gT12AA+uCtdu+nDRoj4xj7bvNeVx0A62GA9paqY2PWmzh1hv6s+OChBxlEKQJ6QEScN+YVbdfkiRikMP1rDyZEtRwxx87V7yb7HJlA5uE3mWOwrupBz/TP2nVZNRLa12WgbWf5GqA5YMAAX6AIUGkDTEDlDh06OCcvhF0HJoNs1apV3DaApR999JEuG3Mk2Nu3bNkybjuTdW0DbZMFLmGsDbQBdSV0le1bvXp10vuXQNveb1AfBx0Tl+UIBnFtb3MzUWdBQYETXgPSu7Lhcc0NAtr2IIEE2q7BCfSja1/oU4A7G1jLCUBxbrjOM7tPXFniUYC2bRsAKGPgjgS75lrnyvaUsFLCPsBZACFkRiYKgEkJSiX8BZgCwPIT+hTzGBiwBIsAwLzKy/cC7TUwyw9Gyv1NmPJZKBCJjF8AWbMf7BMDlH7WCsm0yQ9o5+07EAiNTTsBatH/6AvZD+s3bvY9jvK8ADANOr8A/cIeW/iF4xhNnzUvpmzUF/8vB0lkHYxPc5TzNepxMn0NEGz7MK+p+r22QSnWQfvC9AP6C8dcngcuOxAzQaENfw8dPhpo2wE/eGlbg/0YexLTNxJymzIMvMZ28K6Wn+nM9xOxvuGw9jH1QIazfW672iS3SQS0E517tnAMLly8pI8tBjvgsW7b98jyMajl9x2TQDvV7xNFURRFoE2gTaBNoF2LgDagj/26pCtyduxKarJEnRkxb2FkoL1l2/bAsnGjWlh8MKYtS1esTlinT6seei9W3UQbmOoq1/gw4++Jk6c03Lb7bauAwigTn2UIn79NW7YFZgmnCnFdgUmUwgDty5ZX9MCho2IGJnbtyUvZysVkvqO9p0pKAv3Jg+qaDNDGvlxA22SkA3gjM2nR0hVJAW1k+5v+8QP0BNpfLdA2YBkAFIEJCeUyA2lzc3PjAK6JhQsXenAOGbkSvEo7Efgs+4FbnPsSogKSymxiOyO8ffv291/Pj4Wvpv59+/ZVW7du1dvBQkO220Bt7AOZzVhn//79kfZv94cpAyA8MzNTbdiwwdd73O+YvPHGG2rq1KkahCNjvHfv3k5gDb9yV4bzkCFDvMEH7NsG8rAuiQK0sS/YgMht0M9mX4DuEuqjjmYyZ7nN8OHDvbavWLEiZtn8+fP153Y2eroytA2QckFXmZFoYKQfEPYG9xq/peslYWWYsL2ZZT3wNygr2LY6SOStKzN8kwXaC5esCN0m2Ej47SNRm1x9i7rj2AUBbZMxGiZgGRN2oMNWGK9peS8EsGiy/AGEzaAD2oRjZ7KKcW9jw9Uo52vU42T62gVVDeRFnU1GfBivads/WtYZ2c/2eSDbK+Gv6T+/iQslmD5Xdq/vJk+fpT/DBIbIskb/mXVMBrwB9RgUMiDalOUaeJH1Kyw+FHccXG2CV7mrTVHOPaMDVfdrb9+fu8YVsu6yfCSkBPWdBNqpfJ8oiqIoAm0CbQJtAu1aBLSlrzBuCpGJiuxiWIeYm2qdvfH0C9pmw85WxUPPgsXLVVl5uQbAchvzIJMs0AZANOAX5cMnGnWCdcjocQ8mCwKUvXy/TrAkkfudPmuuhpsAmGsyN8RknxdV3czDigTg1oDtD3/fv+rB44DaWfXgYtrpF8h8MYAT9Tt85GgcsHZNrIjJJM02qEN1TY4YBhIXFLonAUJfp6MuEljjYdNvckZ5XlUH0JZ9smHT5qR921FXTJppH2sC7ZoHtP3CwElAxwcP4rHe2vBaNt9X/MVD8dChQ50ZuUGTENrL4EWNslAmAuBB+jobT2+X5cicOXMSthvQXfp2R92/C/D36NEjqYy7ZI6JBMnYN7Kt5QAC/v+2lWmJSRvltgDUgGnJAm3bigT7MtneNqA2Aws49oDqdh2xDxuQo0+RsW0GP9atW6c9yxHwNY/q4+sHzPzArrSBSAS0ZXao7RcdFHa5YS1A7PYg8P9Pv1A/LlA3CSOjAG2ZLY3ruGs/iERAO1GbXPtMlLlq97lfPyD0vUMA0LbBcVA/JAoDCS9dqvTua3DvI+cP0fYVFy5q+w0briZ7vqZynMx2rvNcQk+T+Wt7TYeZ5FHW2bbvCWqvzMAOAtoy+9pMsInzHtns8r7aDCIZj2uZuewCvEH1S3Ru49iHzdBOdO7p47Q0/vyTx9Suuyzfld3uB7RT+T5RFEVRBNoE2gTaBNq1BGjbEx+6IOugYaO9G0NMvCe38cvmlZDcgN1kgPZYMYGOq3zAahvcym2Wr1obCFinzczwwBXqJ7OsE3sxl8Rkd0tYK9uIbGBA/iC7EWSKv9KwWej49Uuvqukz56QMtAGwRo2dqNeTbXFllUcNaevSun3nGHAs/ckxQIHPcO4BboftC/SvOTf8gLb0OQdAN8AyGaAtrVjgJ1mTfcIJtIMDWdYVFRV6e9sTOUwkygiGXHYjiWLfvn1x8PW1116LA7qudhu7jlT3bwNtZCVjsszqPCbYn8lWti1AXJMu2oMQJts5WaDtB/0TCetgoki5LTLitcWSsH0B3E518rl0AW3z6r0fVMVvZVAGdLIKC5jt9kyYPL1a92eD++pqk2ufibybZflRfJ6Dzot0CBnCDZu1vucbnb3Vy/pvcN9WDJM8Gv9j6XWeCtBO9jiFBdouoBzlPHABbb9sZljzBdnVSD9xM5EpEjFQXwSWY6JFwNdXGjb35vB4874dn/S9TgVoDx01LnSbopx7sizYzcDyRXp8G8sWX6C9a09cma5tUv0+URRFUQTaBNoE2gTatQRoy6zm3h8Nca5TVlauM0wAge9NFnks4TbSs1iD3aoywgJtaYcBewfXZI7S3xoT9cltZNa2DGTgrVidqYGw8cT2q5NfAEDLTJKZcxYEgnOTEWxnnaM/Ddh1eZAHBR78UwHaNpCX0a33R3rAAg9TI8ZM0K+24v+jAtbBwz9x2o5ID+8DBYX6s31i8rKwgWz6IKCNyTyNp7kcXAgLtGUmeU3Pzq7rQBv2FPDExrUPAWANAG1DVGMPYkPNMAEf7URAOwpoR/ZvkN9zULulj3Mq+7eBtsncTuWYoD3wjJYB2DthwgRVWFgYsy0ymiUUHjRokAOs3VFt2rSJqWN51fc6VaDt8vr20969e+N8xWEJIz/btGlTtZzzqQBC+OO6bC8AsaL436YLaBvLERcgrC6gnaxn7sMA2sYioSYCbQjHx9hSNHmrnT6fAF/Rn5269fa82KUtRKpAO5nj9LCAdtAbDwZC2+010NXlaw1tvm+vJ+sH0Ptigze97wYGnDBYsDVnpzfxJr47usyTp1IC2ubcM/YxMc8V58pDZ2gnOvdkJrqxPJFasXpdXN2lLZFr0Gv7zj2BliME2hRFUQTaBNoE2gTajzDQlq+Ohs3OleAxZ+du3/UMNMSNJqxIwgJtmb2LQJYv4qnfvqIDgFzah2A7wEqzDSBmMl7PyQBtmRn+6ZQZznVk/aXtiLEbkXAXyzDhEOw/wobLzzss0La9szEYgIcwM/hgstcBbm1oHCXk+WUy2aWFhwTKFy5cSKof0G/Gy9oFtDE5qF8bjIe2nvwywA9bTkCF8+RaDfXOJtD2h5K2h7GBmnaGNrK3Z8+eraZNm+YF/r1gwQIdsP/Yvn17QqBteyl37NhRZWRkxJSLf5tyAd1xvbbhqytD2W43gC68nWOgQMT920AbtiT2BGHpOiYuhc3Qln1kJmtMFmjb+0KGti39dkbVeiaMJQmyDOENLo9B48aNA+1LvkqgbXx2Xa/sS1gEUCezJR8G0Ma6vfoN9rJXXZYict1U9icnt5OezbZc/ubVDbQlzLs3yFuUVP0eBtDebM1pgnlX0C/wXpcWIRLYRjlfox6nhwG0IZOdfs8rvMz3GMr2yjbZAzdyYlbbVscMNplYl7VJ+5fL+1/bnz1ZoC37znXumfamA2hL33KTif5gsPKuN0GsDadNJrq0szHLuvcZ4GxvKt8niqIoikCbQJtAm0C7lgBtCUDlpI/BWd0PMrQBacMAbUDGsEBbWlWECWyHTB6zTTKTLSYDtLFu6/sT2fhlgduZycZ2RE6SWJ2TCiYC2gaqm+x6A2iRQe/qcxw7LItaH7TzhVcaPYDH1oCFnDQ0nR7asBoxmfTIzoa3IzwpEVi3S48+3vEB7AZ4dx0TOcnn5q05NRpm13WgLaFyDMiywLUBtbZ9BWCnDc3w74KCApWfn6/DgMpkPLRd9UI5pkyUj4dqG776wWAbaNtZ1FH3bwNtZFMnm9kW9pi4hOvpw/LQRp8l2tfMmTNjyjSDGRAmuvTLdpcTRUIo17w1gKisrHyoQNtM4Geuj5g4WJ8DVdfiVu06ede3rVW/F+lQsvAXA5OmDs/9++/UocNHH5ynVXWExQWgux8sC7s/CQ7vzbExzwOBOIcAYod/Mt4JRB8G0EZb5XHKrvq9MQMMt27d0r9hqL8rS/VhAG2ZqautRzZv059Lb2cbrkY5X6Mep4cFtE+fOfvg3rPxW1X3q/euv3n7DsR5bvu1aXXmBv0Z2oPjaT43kz0aZWVvibkXwzGQgBeB7Hg5EBUFaEuPdPzdnbtXD9xhkke/NkU59+R+8EbI5fu/p7CWadepm9NDGzKWLQhYKMFTHP0AD3W/bVL5PlEURVEE2gTaBNoE2rUQaAcBO0BIBKCDzLqt7gxteCrjQQHZtnZgAsfcvH2q5PSZGAuSIDCNbGSUD+uQKEDbQOlE68o+ytq0RU9oaW7k12dlx0LfqjYDMCUTUYG2PCbSAsQeqDBhIHQqkHVGxoOMJkzqCR9E8288nNq2MMnENZ8MbTvLP8zkVzhH/fzlAcVxDAm0ax/QtqEmIDAm98MDcadOnWLKQOaygdp4oO/du3fM8kOHDiWExjaYhRf1rl27vOWlVeeZzPA1Ewva9fRrTyKgHXX/NtD2szypLqCN/Us7EQOHTR3QrlatWoWyj0kEtG3rEpMRbvZ17NixmD401iZ+gyQyDhw4ENgn7du3T2lSSJNR7QKE5jV7G7oan2y/eOe9D9L2Wn5QPfwk33zyC9eEcMnuDwPfBnL5hZlwL9U2JQu0oV179ibsB7/JCP3Oi3QJEFFm0Bo7EDkgYcPVqOdrlOOU7KSQqZzfAM9hJpF01cEv8IaCDaDPlJ51Tr6aMX+x97k9gWlQW4OOx+rMrKTblOy5J9/IMFHv9abO+zFZdwxAG/uVoHs4u71Rv08URVEUgTaBNoE2gXYtAdryYQT2E4ksRuA9HdZD20yAmKyHtgSJ8C/2Kx/+1CvXZKpTJac1oDYZxnjockFf6VeNVzmjAO0Rn0xQjVu2VfMXLQ2dmfz/s/ceTlIdafruv/SL2IiN2I2JmPjN3bmj3Zm50uzIa5A0SMghgTCDEXYwEl4C4QW0QCAa720DjffeNt40rhvvJTRS3n4TfYfvZOVxVdXdVfT7RGQ0VNVxeU6d7nryqzfRR2vXb/SKUcgoncmdpuHDVKFCG+38hdqc57epmA40vL5QyapjO1AhLrnWdqJIVRWtJ19M2+QYXaF9T2W4pxXaOnvb3W8dHUOhXV5CG+dNV2IjWkQqrd3oCZGX3bt3z3m8d+/egYhMqoJ2Y07Q2rRpY2Wm+ziOwydf8xXa+W6/uYU2QMW4u38Q8qgW903wmVQxH5dLjokwfee+Y8eOOY8PGDAgJKF98j0qpsXtE6kqzwc9qZr7NXr99XtfVAMqsHVUQSB0JlYUNWNWSyuI6rRAPokYc1vXXv0bfm9ej9xecNxzFiRu58HDh8E3qNyG38VLV1Z5v6mRzzFJ7EGWAQNUAOtqXt1Q1YrKUt91gUn28Brf88U6rzLBaJu2HYPjQWyNXJOuXC3kes16nmTQ5kl0jl9ou5EehfTFt9MrvXJUrmEUYrggesQncLHPt+/c9Q4iyHnF9nxy/Njxk6mPVVdT+zKsd+7ZFxpIwASUiJqRffAJ66zXHqqjB434OqcPMBiCQSvco3yTZ+J60FXc8nfb+ElTg2V81ff5vJ8IIYRQaFNoU2hTaJeJ0NbRDL6KWTSIbj0pHmThX157Wi2BP9zdZarWrc+RgWmFNh4b901FsPyuhj+y3fVr+Tmjcm4ol9mdjFHamnUbgufx4ccV2t9UfJfYX6jiRZVxmmpdqUzWbdDwUZGSPW2TLOp8hLbeJwwGuM9fVhVBaP/9l9diM7vTxrpIVItuq9dURw6cpG0yoWTUpJBR1eyz5jqDKJ4qdH29uPvqmzgVE6yiuWLcfd7Xn0nLU2jnL09tJWDnzqHXQmYKCxcuTJw00a3QTRLa2CYkaNJ6tdx0I1AKEdr5bN8Kpl69mlVoR8l4n+TWldBZhLaWyWm2FZWJvWrVqpzXosI/qU/y6ddiIZENdfXX7ER1xZB7xZamyCU+f+GivQ9iP7PmuKcFwgw5vtgGBsXv339QUn2BatMzZ5+cK1TqQhy2REr5PEGgyrWaZb/wrUKIVnkvlhqQznKfxICFSO5iVv/j+sb5fPINy/RV87g/4P2AluXewPcTIYRQaFNoU2hTaD+DQtvNCUY1NeI8UPEMeasrZHT8hJZ9EN2ovEVWNJZxRa4I7yxCW1fHSuUPPjRgvyBqJU5CR2fomA+0eQuXWvEMaYyKan2M2Fc3RgTyFhNjIlP5ticfW0t0VIEnRXG4xxAl569cvZq6XW34Y76QDG39PNrYiRVWYqOfkOvoq+BDRXqhsSP6enHPgY5eydIXelAhSmgnxeHEHZuuZvcN2oRE8syn17xU/0c976uwT1qeQjuXdevWpZqAEJJs2LBhoddiIkTNvn37vBW3EkWBiBKNK1B928Z2V6xYEYqu0CIaMlXLVXzATpOhjXu8rlK+FfEV+qzbdyV4Phnaac9JEnHno2/fvqHBBd/5WLJkiVdoDxw4MKf6Nm5bFRUVVu74uNpwD3IluztBp09o59OvhBDSmCDP+vqNmzmPS7wJ/s6vvXSZHUUIIYRCm0KbQptCu7SEdpp4BohCRI3oqtsvR49PrKCdMWte4gSMPqGNtnjZyuT8OycmZPLUGYnL6GpbvU9a0Lt5yq4MTiN53cpk5IHHTSRZjKalvk9oY58k8iOuTZ1RaQcwdLRMIRNZupnWUVE1xZoUMq3Qdq853U+Iu0m7Ti2/fdE1hT5Pod1EH+ob3p+4d+KawM9iVXFBwF68eNGKcfzMN0O5XLefL6iMlokUL1y4YAV1Y557bAN9hW1GVf89fPjQ9p8eWJBsbIpqQkg5In+DIN5nVcPfyIgf0XnXiIcpl98bhBBCKLQptCm0KbRbkNAWgYeMPl+FLoQvYjZ8y2H28T+9+EbOMi/+7Z0coarl8aRvpwePr1i9NnICQsy2Lnnabobi+o1bvPuEuJGofdqz74C3kvrNNm2D10VNAJhVaLuVyZDEjZ2hjGp1iTDZtmNX5LleuGSFN+rkrfc+sZM2SgyG5JJHCfIsTaJroirVm0NoR51HG2EzeERwPbjV5G6Taxht9rxFsc/7om3080n57BTahDQPcZNBVlVVsYMIIWUttKOyphE9QgghhFBoU2hTaFNol6TQ1iIPUlTyfNNkRUv2siyDOIhii1qdMRwl192GeI6sy7S0hkr0rOe6FFtWof2sNgptQhoPN9pE2htvvGEeP37MDiKElCWYdBETJGJiVcSiDRg8wgweMdrs3X+IldmEEEIotCm0KbQptP1C+/Ll4mXSFUNos7H5GqrhUUH/cafuqVr7f/SweedNtX979x14ms1dV0+hTQgpOjU1NTky+6233rKV24QQQgghhBAKbQptCm0KbQptthJqOhIjTUOltC+HvNgNue5fDBsZmiS0KbZLoU1IywNV2Pjdevz4cSu3MTEkIYQQQgghhEKbQptCu8UIbYjn5cuXF/UDMdZFoc3WktqBg4dDIr1jt94FTV5JoU0IIYQQQgghhFBoU2hTaFNoO622ttasWLHCrF692tTX1xftJlBXV2eWLVtGoc3WYhom9Oz3xTDTZ8AQs2DJ8lQTdVJoE0IIIYQQQgghFNoU2hTaFNoZpNOFCxes0F6yZIk5fPiwuXTpkhXQZ8+eNWfOnMnUsAyWhSQ/cOCAmTdvnhXayPSk8GRjo9AmhBBCCCGEEEIotCm0KbQptAuOHEEl9bRp00xlZaVtFRUVZuLEiWb8+PFm3LhxtuHfvqafnzBhgpk8eXIgsrAeiHIKbTY2Cm1CCCGEEEIIIYRCm0KbQptCu2ChDdmMrGvI6FGjRpnBgweb3r17m65du5rOnTubTp06pWp4bZcuXUyPHj1M//79zbBhw6zoxroZOcLGRqFNCCGEEEIIIYRQaFNoU2hTaBcstNnY2NgotAkhhBBCCCGEUGhTaFNoU2hTaLOxsVFoE0IIIYQQQgghFNoU2hTaFNoU2mxsbBTahBBCCCGEEEIIhTaFNoU2hTYbGxsbhTYhhBBCCCGEEAptCm0KbQptCm02NjYKbUIIIYQQQgghhEKbQptCm0KbQpuNjY1CmxBCCCGEEEIIodCm0KbQLiehzVsQIaS5KZbQPnfuHBsbGxsbGxsbGxsbGxtbozcKbQptCm0KbUIIhTaFNhsbGxsbGxsbGxsbGxuFNoU2hTaFNoU2IaRlCG1CCCGEEEIIIaQpoNCm0KbQptAmhLRgKLQJIYQQQgghhJQTFNoU2hTaFNqEkBYMhTYhhBBCCCGEkHKCQptCm0K7TIT2Tz/9ZO7fv29u375t7ty5Y+7evVtQu3fvnl0ffmJ9+De2QQhpWVBoE0IIIYQQQggpJyi0KbQptMtEaEM4nz592uzfv98cOHDAHDx4sKB2+PBhU1NTY44ePWr/j3VjG4SQlgWFNiGEEEIIIYSQcoJCm0KbQrtMhPbNmzfNzp07zbp16+xPSG3I7Xzavn37rMQ+cuSI2bt3r1m/fr1dJ7ZBCGlZUGgTQgghhBBCCCknKLQptCm0y0RoX7t2zcrs1atX22pqxISgIYIkn4ZlETdy9uxZu06sG9sghLQsKLQJIYQQQgghhJQTFNoU2hTaZSS0q6qqrHyur68v2k2grq7OrFy50qxataqo6yVP+fHxY3P/wQPzww8/sDNIyUGhTQghhBBCCCGknKDQptCm0C4ToX39+nUbDVJdXV3USuqrV69amV3KQntlVbXp98Vws3rt+uCxrTt22cfGT5pqfv7555Lc7w2bt5lW77Y1/+c/fhe0V996z6zbsNn88ssvJbWva6o3mjkLllj5nsThozVmYsV3ZvCI0Wb0hMlmy7adJXsO4rh46Yrp1X+QGTDkS3P//oPE158+c85UfFdpDh4+Enoc5/LM2fP2+aSG1/38c2mdewptQgghhBBCCCHlBIU2hTaFdhkK7WKK51IX2pCF7Tp/ZmXwxCnTgscXLFluH3uj9YdNLlOxTzNnz8+R7Pp5iF4tst02bOTYkpHaqB7/ze//bPdrz74Dscc9ZmKF93j++NfXzb175TWp6ImTp+2+//tvnzM3b91K7KPf/c//2tc//8qboWsOz2EdcedbtznzF5dUP1BoE0IIIYQQQggpJyi0KbQptMsocmTNmjU2dgQSuliUg9Du2qvfE6Fd8VS6NbfQ9kl2YfvOPYG8hOis3rjZXK2rN6vWVIfE5849+5q9f3/66SfT459fBPu0Z//ByNceOVYTvO7ffvN788WwkeaFV98OHkO1c6lVnsdx6szZ4FjihDaOqe/AocFxvvNRh9A19/jxT+bPL7VKLbTHTJhSUv1QLkLbDqiMGWMGDx5shgwZEttGjhxp1q5dW5bfHGjJuOd46NCh5uHDh97XYg6I4cOHB+d89OjRJXu+MRA9cOBAu5///Oc/7YTMhBBCCCGEkPyh0KbQptAuE6EN2QzpjLxrCu3mF9q+fQKIk5CYEchriGyNVAVHyfCmAFEbiBiZPHVGTmVxnNCePW9RIIBPnj4THO+H7bs027kohH/961/maM0Jc/zkqdj9RkSM7iPfcf7444/mxs1bOe32nbv2p1R3oxL+9u07JdUP5SK07969a9q0aWP+/ve/p27vvvuunfiWlAfuOW7dunVkxNbBgwdD57p9+/b2PV2KzJo1K7SvW7du5ckmhBBCCCGkACi0KbQptCm0CxbaELz1166bC7UXzaXLV1LlEQNUxdZevGSXg/iLWne+QvvO3bt2f+z6U0rEW7du232C9IWI9FUc47HOn/X1Cm0dTeGrxNXVvG3admwWATxr3sLI6uE0QhsN51uY9O2MshTaabh+/UaO9M96nCO+Hh8McFy5WnqDRuUitFGp+95772US2mgQpBhwIKbszjGENuK2fKDK2RXapXr/odAmhBBCCCGkuFBoU2hTaJeZ0EYrFaENsbt42SpvfvBrf//AViP7wGSJktms28ut2uRkOOcjtBElgVgId/14DHLbx/6Dh0PxGToyZO36TfY1jx79YP7rTy95RfB//u6PVprjNSK0d+zem7MdVDTLdrA/qCiUvG30iW8wAH3QtmO3okljVBxj2+279LQNYj2N0N69d3/wumnfz7aPnTtfGzxWqKBH/AmuG6yrS89+3skTMUgh/esOJmRFIkfk3Pn6XarPMXHk8lVrMp+DTVu3B/2zflNpSqxyFtrdu3c3ffr0CRr+75Pac+bM4V98ZQCFNiGEEEIIISQNFNoU2hTaFNp5CW3IPki+pLzgvfsPhZZJmiwRbd6ipaFlsgjtXXv2x64bcRlnz50PHcvKqurEffp2eqX54Yenstq3Xslhxs+6+mtWbrtA2Ot1gvmLlgWP7di1J2cZXSVcqMT1cf7CxVRCG8JZZ0UPHzUuNDBx6MixgvZDV77jeK95RJbOJ4/b1zSI0Ma2fEJbKtIhvB88fGiWrcwmtFHtL/0TJehLgWIJ7fHjx5t27drl1bBsVtn5zjvv2BxllwsXLuREk4wdOzZyvZcvXzbHjh2z7eLFi4k58Hgf4F556tSpYJmonOek7UXJWhccp2wP7ebNm5nODfb5zJkzdtmTJ08m7i/Wj6gWOb47d+5kPrY0fZl0josltG813JNramrsfp0+fdo8fvw4cV9wv8d5luXS9gMiUtzzO3/+/FRC+9GjR8F5xnbT9rt7nOfOncu5fnBu8BzOf11dXao+IIQQQgghhEKbQptCm0L7mRLaOlcYQhCVqKguRnTI9Mq5wXO/fe4FG7MBdLUqBPDSFasbPmjftwJYL4N24tSZzEIbAlHEL9aPnGjsE6JDJkyeFqwbUhaCByCSRG+3cu5CKzchMNdv3BKqPj97/oKNIoG4FbHdZ8AQU3PipDl4+EhwnFEgbkIEJ/av9tLlHGHtm1gRk0kGMr5hH4qNiN00kvj0mXNeoY++LgZaWKMi2hXeMjmjvq4aQ2jrPtmyfWfkNRcn5zFppnuun2WhjXvJp59+mllmY5k09zSf7IzKV8bxJAntdevWmQ8//DCnmhvrXb58uVc2YuLBqGiT3r17m0uXLnmFK9a5bNky07Fjx5zlunXrFlpOU1tba9fr2x7WtXPnzpzrTr9+2LBhZvXq1Xb77vLoE30dY9mFCxfa3HHf9j755JOc7eXbl2nPMQYtChHaJ06cMF26dPEez4QJE7yZ21euXDH9+/ePPM/od+R3+85V165dc17fr18/M2jQoFihffv2bTthpG972Bf3d7Ou+Ea/37hxw06gKY999NFH9tjirh+0r7/+2op7QgghhBBCKLQptCm0KbSfeaHtTnzok6xfjp4QCEFMvKeXiarm1ZJcxG4WoS1ZzlHrh6x2xa1epmrdhljBOnP2/ED8YP90lXUSqDbW1d1a1upjRDUwJL9+zo0bgYB49a33Urc//vV1M3POgoKFNnKIx0+aal+nj8VXVZ4vOtalXefPQoJK55NjgALg2oPcTtsX6F+5NqKEts45h0CXAYYsQltHsQwfNbak/xAoZuTI3LlzMwttLJOP7Iyr3oWsjBLaOJ8jR45MzN7Wy6Ca9R//+EfiMtgnkdMiXLVMjprUEq9BZblmz549qTLCv//+e6/QTjOB5rfffhsshyr5NNvbuHFjQX2Z9RwfP37cVhhjwkhpeN327dtjhTZEftJ+derUKRjctPeTs2e98t/XDhx4Go+Fc5d2OVdoY5tRgwha7OtBDzfCxHdcqMhOWq+vDwghhBBCCKHQptCm0KbQfiaFtq5q/nzoSO9r7t67ZxYuXWElMHKrUdmctIzOLIZ4xDrSCm0dh4F4B99X3XW+NSbq08voqm0NqtzWVG+wQlgysaP2KQoI6OdeeDU4/jkLlsSKc6kIBrrqHP0pYteXQR7XKr6rLEhou0Jet76fD7UDFqhqH/tNhZk4ZZr9d758NWaCN3ZEZ3ifPP2kgv/4yVOZ+gEN1fRxQhuTeUqmuR5cSCu0dSV5qVdnF1toP2i4NlFxnFZm47VYJl/Z6avQ3rZtW6yEXbx4sbf6GEI0ajm3GhjbhgCeMWOGadu2beg5VEX7lpH2/vvve7cFsSjXFSI/fDIS1cE+cbp79+4coe3bbtSEmehbV4Cjqnj27Nnms88+Cz2O6l+5V+bTl1nOcZamhTYksfs81tu5c+ecx0eNGhX0Xc+ePUPPffDBB2b69Olm0qRJOf0ukh7LdejQIWe9H3/8cVC17vatCG30PbbhXlt4X/iOTyrKRWjrfdL/xjlyv6WA/Zk5c6a9bt1jWbt2LT8REUIIIYQQCm0KbQptCu1nW2hjsses1blaPO47cCjydSINIRkRRZJWaOvqXTRU+aL94flXbIMg1/EhWA7CXJaBxExLVqGtK8OnzpjlfY3efx07snrt+hy5i+fOnD1v4z/SNl+ed1qh7WZnYzAAwloGH6R6HeLWlcb5oK8vqWTXER5aKD98+ChTP6DfJMvaJ7QxOWjUMUiG9pPJL6OzgREtI+vAdZI1R7ichTbYsGFDaqGN16YlSnZC1ELQ+YStRHqIgEV1ryvFRQbb95tT1QsBimvNzUDWFcfYLy2fZRmf0NaTU1ZXV+c8j2WAWy0NmSn3Z1SLf/HFF9799AltiHLJ3Ha3KYMCiOaIkutYJ/6vq4URkZFvXza20Pb1AarY5X2IY9XnS2JN3PPoDpjs27fPew0gfsTdl02bNj29byxbFlmh7VZaI55EIkBQle5+K0AiX/RyIqfxE8Ia/X748OGc2BQM9AiHDh0KPffNN9/wExEhhBBCCKHQptCm0KbQfraFthagetLHOHSFNjKh0whtSMa0QltHVaRpWO7Bg4fBMlkmW8witPFaRGfEVYELUpkssSN6ksTGnFQwSWhLhrdU14sYwoCAr89x7u56JutLC47zhVffVvI4PGChJw0txnHLtYaoEamkR3U2ctyPHKuxDa/t8c8vgvMD2Q3x7jsnepLPnXv2lfwfAsUW2jhfAwcOTJTZeE2ayTULkZ2QlXryO1cyQwxjHyTKAq/VWdASa+KrRIZ8XLNmjb2H4t6JCfwgQGXCRXdbvXr1yhncQIaxKxbt/cXJYkbsRlxfiHx1ZS4ex2SQ+n6kq5Dl+FyhLdXgCxYssNXOWDekuLRC+rKxhbZbbY59wP5IbAn6YPDgwTmyF48jRmTHjh32JyZmFLAcqvF9Qjsprx3rdeUyhDYe7969e6h/cB4gtKX/3EEBWbcrwiHidd9i3Z9//nnO4AWuN0S1IHMb1yy2g59Z3oeEEEIIIYRQaFNoU2hTaJe90I4TdpCQaJC4uuq2sSu0kal87PhJW23rNkzgePTYcXP9xs1QBEmcmEY1MtYvlXNZhbZI6aTX6j7aumOXndBSqso3b92RIw3x9fMsLV+hrc/JNUdI6YEKaSKhC2H2vEXBNjGp54FDR4L/owJak7UfRCq6Qtut8k9qco26Ml6y4iHFcQ5bmtAW2ZkktKUauTGFNhriIgSfmE5qqIrF5Hpxr8F+jRgxIiSeXeGLKm8Xt7oXwhKSUQtZxEdoKS/3FVdcYx99j7ui0/c83q++SR316/r06ZMY3ZKmL7OcY4l2Qda3blOnTrXRLj6h7ZPzWa6R+/fvm/Xr15tx48bZqvKobGyRy9OmTUs8xnnz5uUIbRyrGzeS1KTK3RXavmurqqoqdl2IhpkyZUrkxKqEEEIIIYRQaFNoU2hTaD9TQhuxDTp+woeOGEH2dNoMbZkAMWuGthaJyC+OWj/yqddUbzTXr9+wgloqjJ9/5U2v9NV51V+Pn5SX0B4zscK881EHs3jZqtjX6spk9NGWbTu9YhS5qzqTO01DrnWhQhut/lpuhSUGKPS28PpC0bEdiF2RXOsnE0U+rXLVky+mbXKMrtDGenWMShqhrbO33f3W0TEtTWgDiMgomY3nsuKTnaimPX36tDl16pRtW7ZssVnBrowVqZs0mZ6vYZ0AkzSmmWQPudM+oe0Tne5rIEkhr3UuN+S275sdbiwJZLMrrCGptQyPE974XeDLmPZVpvukapa+THuOUWF/L+LbHidPnvQK7ajs8rgmOdppJpLU58qXu60nfBQgyN3XuAMXaRoGN/B7yu17HSeiwYSraSYy1RNcEkIIIYQQQqFNoU2hTaH9TAptHc3gq5gFEN16UjzIwr++3jqQfaigdtm4ZVuODEwrtMGkb2cEyx86cixn/Vp+zpm/OJTL7E7GKGzauj14vmrdhhyh/e30ysT+QhUvqozTVOtKZbJuw0eNjZTsaZtkUecjtPU+YTDABRNX6m398a+vx2Z2p0FHtei2ftPWyIGTtE0mlIyaFDKqmn3BYncQ5efY68XdVxcM2GCCVTRXjLvP+/ozafnmFtq4t3z66ac5MhuP5XMP8wntW06FvO0XjygU4edmYSOjGBW/iPqQhupfxEugoXIXolxz4cIFKwp79OgRKQghidNUaPuEdr4V2tgv93GdhZ0ktIP71c2bZuXKlTayIqo6Gf1ZjL5Mc46jYkrcvouq0IYUd/cL/5f9wj5COPsmkkQu+5gxY+zvx8rKylTxHz657L5GKrTdbxxgkAL9pPdV9hMNGezuYIIbK+O7lyJTG9XYUQMWekJNQgghhBBCKLQptCm0KbSfSaFtxZDKCUY1NeI8UPEMeStZ0G78hJZ9EN3IZkZWNJZxRa4I7yxCW1fHoi1ZvsqKPuwXRK3ESejoDB3zgbZ0xWorniGNUVGtjxH7KvskMSKQt5gYE5nKEP1xEh1V4EnSwD2GKDl/+87d1O3O3bux20wS2vp5tG8qpluJjX6q3rg5NNmmNFSkFypI9PXingMB28jSF3pQIUpoRyHXXNyx6Wp236BNSHLNezpZqFT/Rz3vq7BPWr65hTaA+HWFNh7Lh7Sy05dZjPtblEDOeW/dvm2rsdEwESCqoxcuXBjEXWCSP6m8x70FE1u6kwn6hLYvQxuS0Vf1W6wMbVdURglt5CqL6MUEipIDjtdj28jTdoVsPn0ZF31ULKHtZmj7ZC2OC/sj+4aBkb1794bWh37S+4tMbd/xYiJG/fjw4cMTr0fJ0HbzzH0DNKielv2EdHcFua+PHj16ZK8tuWZ37doVGvBx88AptAkhhBBCCIU2hTaFNoV2ixDaaeIZIAoRNaI/2I+eMDmxgnbOgiWhZdIKbbCyqjo5fsOJCZn2/ZzEZXS1rd4nLehvemSElsFpJK9bmYw88LiJJIuBlvo+oW1jU36N/IhrM2fPtwMYOlqmkIks3UzrqKiafMlXaLvXnO4nxN2kXaeW377omkKfLwWh/aDhHHbr1i2Q2fg3HmtMoe0KPy0fUX3syufNmzcHy6HKWeca47XIVB40aFBOvIc+76hOduWyL/oCFbbC7t27c56HZAVunAiEo0zGiPvB0KFDQ8+jElvy4fMR2itWrIiV0654h5DNpy+Tzn0xhLZvQABV2NIPkL19+/YNPY8KZjfnWmJIpN/ciSQxAGDvn57Mbgx6CMuXL895XmJJ3H7FucH1Jtt0xTOu6zRCG7FUuu/xmitXnv4uds8d+i5psIEQQgghhBAKbQptCm0K7bIX2vKB+/vZ87wVuhC+iNnwsWHzNvPnl1rlLPNyqzY5QlXL42nfzw4eX7dhc+QEhIeP1gR52rohJmXbjt3efULcSNQ+HTlWk/N6VFK//X674HVREwBmFdpAVyZDEjc2qFaXCJO9+w9FnusVq9d6o05af9DeTtoIEIMhueRRgjwLEl0TVaneHEI76jyijwYNHxVcD241uYtcw2gLl66Ifd4XbaOfT8pnby6hbd/vGzYEQhv/zpcsshPH45OPvufQkLvti2MQgbhkyZKc5yC5IRwRoaIfFwmeNctZS0VXOGpx7YsBgRz3Ceu0QtsXtwEpPH36dJuZ7T4HAZxvXza20AbuZJuyru7du+c8LpXzvmVwjjEI0aVLl8gJGrGsb73oh6iJNkVoR+VoY33u+dcDAklC21cVLhNsItLEXTf6gBXahBBCCCGEQptCm0KbQrtFCG394RlSVPJ802RFA8RWBBnAd+4W/QanM4aj5LoL4jmyLtPSQCV61nNdimQV2s8qjS20IcoGDhxoWyHSLIvsxGSRPvko9yufpPUJZvl2BJZ1q36j2tq1a73CNWliPlT6xh1DVINU1/diHWORVmiDyZMnp9reyJEjQ+vL2peNKbR1lbGbeR3V75cvX7avx+STuqo5zTEFcVdXrqSaMNQ3cSSiRNIso78VkCS0AR5LM+mk5K8TQgghhBBCoU2hTaFNod2ihDYhPlANjwr69l16pmodu/W2mcRNxdFjx4Nsbgx+tFQaW2iLfEQrBFd2YrK/KNnpmxhQ5xNDxCIX2ychIfjQH24EA5ZBxXLURIkQnDt37owUrqjy1rEVsp4OHTpETpZYW1sbEtC6Idca0tvdRy2YkyaFdPsQMj6qqhj7u3jx4pwc8Hz6shjn2O1fVDW7AybIBncr6HXWtfs7D/2t88LlHOHntGnTQvuG471z507od6lv0OOTTz6x5173j1TUpznPOC6piBd0PEpcH6HSf8iQIZEyG9u8dOkSf1kRQgghhJCyg0KbQptCu8yE9sqVKym0SVmgIzHSNFRK+3LIiw1y3YeNHBuaJLQptluqNIXQLmVQoYvIDdz/8DNNzj1eCwmNiQIvXrwYEpuCK1xFdkOsnzt3zuZs19XVpdpH5D6fPn3aikv8lDztxgLrx3bk+PB/V2QXoy+bCuw/zhfOE37KpJdR4Nxg//ETwjfNsQs4vzU1Nbbv0p5fAVXi6PcbN27Yn77rKh8wUIhzg/3C8WO/kvqAEEIIIYSQUoZCm0KbQrtMhDY+WFdVVdlWTPGMD7YU2qQlcfzkqZBI79KzX0GTV5Y7LV1oNxau0NYxE4QQQgghhBBC8odCm0KbQrtMhDYq86qrq826desiv16cDzrKhEKbtAQwoefnQ0ea/oNGmOWr1rT4ydAotBsHCm1CCCGEEEIIaRwotCm0KbTLqEIbQhviGV9lxteHkbuJr67jq9FZGpbBJFD4KvmhQ4dsLirWm/Xr0YSQ8odCu3E4ePBg5KR+hBBCCCGEEELyh0KbQptCu4wytNesWWMqKyvthFBz5861Emry5Mlm0qRJ5ptvvknV8FosM3XqVDNz5ky7Pkx0higTCm1CWh4U2o0D8pAhtaXdvn2bnUIIIYQQQgghRYBCm0KbQruMhDakc0VFhRk3bpz58ssvTf/+/U3Pnj1N9+7dTdeuXU23bt0SG17bo0cP07dvXzNo0CAzcuRIK7iLnc1NCCkPKLQJIYQQQgghhJQTFNoU2hTaZSK0CSGkMaDQJoQQQgghhBBSTlBoU2hTaFNoE0JaMBTahBBCCCGEEELKCQptCm0KbQptQkgLhkKbEEIIIYQQQkg5QaFNoU2hTaFNCGnBUGgTQgghhBBCCCknKLQptCm0KbQJIS0YCm1CCCGEEEIIIeUEhTaFNoU2hTYhpAVDoU0IIYQQQgghpJyg0KbQptBuRqH94MEDw8bGxtacjUKbEEIIIYQQQgiFNoU2hTaFNoU2GxsbhTYhhBBCCCGEEEKhTaFNoU2hzcbGxkahTQghhBBCCCGEQptCm0KbQptCm42NjUKbEEIIIYQQQgih0KbQptCm0KbQZmNjo9AmpOn55ZdfzOUrV01d/TXz88+/NPv+3Ll719y4ecvcvnM39PjNW7fs448e/dAizsuDhw/t8eK4cY6S+ocQwvdgKSH37PsNf08J//rXv+xjaD/99BM7iRBCKLQptCm0W7bQvtvwh+W1a9fMlStXzNWrDR/K6+oKbvX19bZhnVg3tkHBx8ZGoU3Is8apM2fN//mP35l//+1zVkA0t1x/56MOdn+ef+VN8/PPP4f2Ee3r8ZMabfs//vij+W7mHFPxXaWZOXu++fHx41T7vGT5KrvMNxXTTf216znPHzt+0sxftMz07DfIvNH6Q/PqW++Z1/7+gRk5ZqK5crXOu95Z8xbmnBfI/N/9z//m9A/JBf06b9FS06l7X9vff/zr6/baWrB4uXn48JF3mQ2bt5kp382059LXlq9aExKb+hzjuTfbfGz+8PwrtrVp29Hs3rs/8po5ceqMmTx1hnnvk852/5574VXTvktPs3nrjtiBJSxbtW6DvY669upvf46b9K2Vr3EcOVZjPurQ1bTr/JndZp8BQ+xAVhzXrl83XwwbafutY7fe9pj27D/YYq6hfN6DkN3VGzebMROm5JxbPO57z+KczlmwJPK6m1jxXdH6/eKlK2bVmmoz9Ksx9rzK/vX9fKg5ePho0e6VkNi/+f2fc+7ZC5YsD+7le/Yd4I2KEEIotCm0KbRbttCGcD5y5IjZsWOH2b59u9m5c2dBbffu3Wbfvn1m79699v+HDx+226DgY2Oj0CbhD+GTJk0yI0aMsG3ixIkUbGXIiZOnS0pod+3Vz+4PZItPaEPuNBbTvp8TbCdtf+w/eDhYBm3H7r2RYieqQby6iPjBfty+fSeQaf/1p5dy+oeEWbZyTWx/o0+PnzyVc+1B9sYt5xOYEMkYnIhaBoMcWoLj330HDo3dDtZ3//4D7/tjwOAR3mVwjV2/cdPbHxhwidoWrl8f6J+oZSAwWwL5vAdFgkc1DKzIurLcI4oxkKcHDKNar/6DUt1Xku6Vup/0PTsktFvQ4AghhFBoU2hTaFNoe9ulS5fMxo0bzYoVK8zmzZvNrl27bCtEaO/fv98K8lWrVtl1YxsUfGxsFNpEfQi/f9/87W9/My+++KJtbdu2tV8nBj/88EMguim7S5srV+ttZSmqL+/du18yQhuVp00ptM+dr82Rnq54cnn8+Cdb3aiXcyUNxA5k1b/95vem3xfDzcKlK8z6TVvN8FFjQ8sdOnIsk0zT/UPCzJ63KOjXLj372T5fWbXOXudaAGtprK89VFh37zMwp6ES2q2e/nL0hGCdb7/fzhw8fMTs2LUnqOJFQ2WuT5zjmhg0fJSt7saghpaa2G/3/GqJiMraLdt2mhFfjw8Jd7kH+wZccC2hOlf3Dx67WlcfWgbXm94XVOKuXb8pdExbtu9s8ULb9x4UoY1rYcq0782a6g1m8bJVob7D+dfL6XViOfe6Q3X8muqNRbm/4j6P7eBax8DE+o1b7HWFY0w7YJHmXkmhTQghFNoU2hTaFNop2oULF8zy5cvN0qVLzcmTJxv+qLptbt26ZW7evJlXw7J37twxp0+fNsuWLbPrxjYo+NjYKLSJ/sD6yLRq1SoktOVDepzsJqTUhDYkJURSVqE96dsZORWOPkmDQQOffN534FCwHCIKKLSLA2I7IJpv3bqdc319PnRk0Od79x/yXnvfTq9MtZ279+4FohLnQ9/jUHXrq+S132xpuG4QfYIBEQ2qvf/8Uitv1SvWJ9v67XMvBFnyWJ+uENfXH57r/FnfQJ6fPH3GK/3d9xTiceQ5yFjhzNnzweMt4frL5z0oudu+e0zbjt2851avM0vsRz5cv37DG7mD6n59LUed27T3SgptQgih0KbQptCm0E7Rzp8/b2U2xDMytIsF8rOx3kWLFtltUPAVv2Hw4dq16+Zmwx//7A82Cu1nR2jHPUfiBRmqQFF9CQk2aMTXNud25559tmruaM2J0OuR+Qv5hnxcFzyGfFNUh7q5v8h5RSXh3IVLgoYKUeSiJgFxgcpDSLSXW7WxPxGhgKrUQieVLFRoY5IxZNGir6bOmGX3KQ0SUYFjmTlnQSqhLVWKeN3SFauDCscskgb99cKrb3uPq1ChjYrO72fPs30BKVnMCT/lukOWM4QpKpqRwQtJh2sOsQqoXN+6Y1doOQhfCDvEcEi+MBryhVGlnCazvFBOnznnrUTV117aQROJ60GDRI8TohjUyCJR3ap9vJ/lcVT4C5D2uvp39ITJofe5VFrjGwH6uvuwfZdQxInIePSDiFfIdS3p3ZgJZGw39bWHdct9Leoegm3iNYUK02IPKm3fucd7b9Hr1IMsTQ0G1ZLijNLeKym0CSGEQptCm0KbQjtFq62ttdEgq1evthM6FltoL168uGSF9uJlK03v/oNtPqI8Vr1hs33s63GTzL1790pyv1evXW9eb/ggoCs8Xm71rlmxeq2t7CylfV2+qsrMmDXPyvek12ICqDETp5iBQ740X44eb9au31iy5yCunTp9xn7NFYKiPkV+/JGjNWbilGlm5+69ocdxLvEhHM8ntobX3Suxc99ShTak5o0bN+y3VNAwUIhzmUVo4/WvvfZaUSu08c2Zy5cvm1OnTpmLFy/a96RvgrZCefz4sf29gu3g+NEXTQEmscuSo6qjC9zqXiBffffl/h49dtybK5yUGQ2RGbd/hU7ypStK8xHabhatr19cIARFRuM+hN9PSUIbgq7Vu22Dat7aS5fzkjRaOE6YPC1Spsl50VW6cTLNzYMu5gSSabKmdau9eClYNi6XWWJAkqriC0XHJUCi+4Q2rhsMjqDS9vadu5H3GX1doto+Tp5jUCrL4Aoqqs+eO++9HkQk+/K4o943OiLEzRiPmvRQy3E3ZiLqWm/Maw9gkkq5VqRKPXwfrQ+2jaiZYgntrO9BH9Mr5yZWaGMQTqq8fTnqjQXOmwxyRB1Xlnulvo4otAkhhEKbQptCm0KbQjtHFrbt0DX40CGPi8R47e33m1ymYp+mzqjMkez6eYjeuA+0+LBSKlIb1eO/+a8nsmHLth2xxz1yzETv8fz3X14zdfX1ZSW0Dxw6EnxIuXT5cmIf/d///ktQzaWvOTyncxmT2oyGD3sU2s0HJr/9/PPPAwnttvbt25uamppYoQ0Z3rlz58h1oGHC3SwcOnTIvPvuu951vfLKKzYaCh/GIaA+/vjj0HOIkdJgfgS9/OTJT4UNcr+R9e3bzptvvmmqq6tD68L8Ct26dTN9+/Y1PXr0sP/PFwjSv77eOngvDB81ztScOGkrtPV7RIuBpIpSEQe+ajtUgiPyAIOIso2kimRdIYqG2AREGEBiIwdYT4jok19xTSplcUx9Bgyxj33S6WnO7MVLV4J7CaoCo9BiKE2lre5DZBbj/76qTBdUZItUQ1WxFpdJkgYDO2iQlZJn68skXrqyKkfyIqICFc1u/8QdV7HjIfS6UYWNgVxUWOvsZ8hdEfVaGovQbv1BeytVD/86mInBUz0pnQhk5D1nuY7cHHLvufu1X5/EOxyJ7DPdUIG+ccu2WKGt1+V7z6SRd1pQ4/rD+1SQ6mgIYtzrAN57vgklZfBQ8rN1hTikpDtwpnO09fNSCa4HcHTz5Wg35rXnDor4+lTiUnBMiNfAfd3NuY9r+n1VyHtQv9chwbXIdbPO3fuWbrh/45sAjYHsHwZIhn41xlvln++9Uve7/ibEug2bM71fCSGEUGhTaFNoP/MZ2hI5AgndkoR2p+59nlQTTZxSMkLbJ9mlrd+0JfQBCpM04UM95LcWn5saPjg2d/+iGrRb7/7BPm1t+OAW9Vr9oRJVVf0HDTfPv/xm8BiqnUut8jyuHW74kCHHEie0cUw9//lFcJx/f79d6Jq73dCHf3rxjdQfJL8aPYFCu5lAxTMEcJyIlnbs2LFIoX337t1QdravYcLdtGCC3zT7BDGND9i9evUKPb5hw4bQ+kaNGhV6/sCBJxXF2O+33norcTtYXmQb4qj0c++8807eVeiQ11ESdszEioKEdpJQOn/hYqLA1TEEuC9gf33yDvEornRK03TleSHo6sk0QltHAIjwSxLakGTy+0qEnxabUeLSV00rDXEvxfy2ga50b0yhLVnTIvR19bDEF+DbO3ogBdebD8kj/8/f/THod/l7Jm2TAZUo9LnTYtjXZ76GgSYdn6EzpXEOXaQP0gptuR7RMNmj3jepepYBKi0M58xfbKM43OpfycmWa1lfg1ifbyBGv3el6lwquiF2Ib5lu/rcNsW1B3DOJGcceejuwKCI9yeTav6S862NpFasivKoQT3I8Ppr12PvW75WjEkhNVGDRehT3++xfO6VhBBCKLQptCm0KbRTZGhDOkM+4+voFNrNK7R9+4SGOAmJGcEfvxDZvqrgKBneVFEbiBgZP+nbnMriOKE9vXJOIHoOHTkaHO97n3RqtnNRSIPc29vw4fbAwcOx+43qzlBlmOc4McnqxUuXc9qVq1ftT6nuRiU8ZBiFdtPjE8GQu3PnzjXTpk3LEd2TJk2KFNoPHz40n376qfnwww9zZHCbNm3sa9LOdYD9QgW0Xkf37t3tPXnYsGE5ldr19fVm06ZNoccHDBgQiEIIIC2t33jjDRsv4tsO2ieffBKKTZG2ZcsWr9DGcecrQnxfbfdJuMYQ2iJj46QEJKVvH6JA1TIqVlGBi3t7XEMVKSYkKwb4hgCymVEBjEpVn2T0SaRp38/2ngu3P7SsQ3W1L9ohTmjrimzdfBnohb6nIVPRDxCgkJiNIbTlWvBdQ9KPUdcLrhGJ9EC0wq49+3PeA1gXrg9cS3HXECo98dMXQaFFqK4ydvPocVz4pgFEMkTupctXbHMn/tTRIajWFbkLEY9vEghSHR0Mrnjkb+hvzqv1gXjFz3v37nv7/Mn7+RebYy/fjMKxLVq6MvIc4DFc77g25W8VRBzJYJa+bt2qcx2Ls6Z6g72OfFESTXHtCVKtjv3SsRxaIkumOfbn2PGT9nykuRdhHcUgalCvZ79BOf2B+xZEd+XchfaeWVd/zZw4dabhnPcPFYHgd0GxiBoswnVUjHslIYQQCm0KbQptCu0yF9oQvOcv1JrjJ06ZU6fPpsojRkNV7ImGP4axHMRfsYX21YYPMtgfrD+tRLzc8MEO+wTpCxHpqzjGYx269vIKbR1N4avE1dW8rT/8tFkE8Hcz50RWx6QR2mg43/L4uG8qylJop/pmRO3FHOmf9TiHfPl15AAHhXbTATGtxa0b1XHkyBFvTEdchjZEcaGTQkJA63VgvzDYIsyZMyen2hrfrNDHgn/f+/Vr+4hL0a8fP3689/heeuklG3MiMmT69Omh54cOHWofd7dfSIW2ZKv64kEgq3wTBzal0NaT3zXnpGXF5KsxE+zxYAJDiMk0kmbT1u2BENTZ0LrS1ZelrAcG8Fr0OWS7voemzVguhQEwue4wmWhWoQ35/NGv3+TyNYhhHbVRtEG7/oNipV0ciFWRZfVABpD4GWmIzJG/g3TTEzm64HglcgLXFgRs1EAKKqu1uJXYBt+gmDwmldVS2SwREL6BGP0YBlokkkjiNaIm+2tK9PHr2BO5j+Ia0gMCzQF+F6CCH/uKvpVvuCRNupgr72cHy8k3IooBcrpxL8LfcogBkd8xvvOaz72SEEIIhTaFNoU2hXZGoV0qkSMQu3MXLPbmB7/y1nu2EiRqskTJbNbtxb+9k5PhnI/QRpQEYiHc9eMxyG3fPm3fuTsUn6GrRZCNidfcuHnT/D9/fNH74fQ/fvc/VprjNSK0N27OjRRBRbNsB/sDcSV52+gT32AA+uCD9v8omjRGxTG2/XGn7rZBrKcR2psbzs3TXNnp9rGa4yeCxwoV9JB0r/ya2dixW2/v5IkYpJD+dQcT8o0ckXPn63epPkf2qXyoyXIO1qzbEPTP6jXVJSntW1KFNmJEkC+Nn5gIUcC5njdvXmahjeXc57TsRV43RDHW7TY8jnsupLgbA4Isa4jkkydP2kkhId7x/hABj2Nxc8D37Nljn/v2229Dj0Nk+8R4ZWVYGuBYUH2N48H28W8cCyaNXLNmjVm7dq1tW7duzSs2QscJ/Pa5F3KkeJS4bkqhrV9TzCrB5kILMUwchwpJVApD1klFLo4Vxw3ZiL7Ga0TkIc7g4cNHQXUxZHRwP2v4PY6KRh1nESe4851grhSEtuRGi+RMEtrIbfflU6Ppvy2KKcewv8NHjU1dKR21DhGS7nnCcxDEvr9/ILelujlqoAPXlZaJW3fs8m5fokLQzyKmcVzu+11XLUusBCQ5KqZ1Rbcrr0Wi6/eGLKNjJrTQlgGNpkZHi0jmOh6TfnSjSEoFLafTDmDpyJTGHEBA/8mkkPo+n8+9khBCCIU2hTaFNoV2mQptyA89wVFU29bwoSXLZIlPJsOan7fQ3vxrZVlUwweeozXHQ8eyeNnKxH36puEP7Js3bwUy1bdeyWHGz3PnL1i57fbbFiWFsU48VjlnQfDYhs1bY6uEC5W4vqZzbeOE9h0nK3rwiK9DAxO7Gj64FBrlIhVfON4LtbWx+eRx+5pFaGNbPqEtFekQ3vjQs2DxskxCG9X+0j9Rgp5Cu+lBXMj27dvNlClTTMeOHSMztdMI7bjngBvX4TaR0G7mtdu6du1q50/QEnjbtm2h13z99df2Q7aeWFLHjei4FVRnY16GphaEIqt8UlNXZ2YR2vj6erGFti+qwYdM4iiyMq41hxjTx5PUpOI1Tc6tbphbIQ0659iNmyl1oS1VvWmENr5xISIUMR1Hjx0P5VHrHG5Zh0wgl+Y68lU2Ax0ZAtGpt5nlmBFFEvd+gvBFtTbkNirAIQJxPuVvFJ/AhFgWiYiGQfUo9KSCrrjWFei6+td3nes+kmxs3ee+CQr1+1MLzub8tob0B6qx8d7UeeZ68EDiPHBMSdcQ+gHXdj7XSFo5HcS1pBxY0ZnhjV0R75twM597JSGEEAptCm0KbQrtMhXaOlcYf9yhEhXVxYgOkcxDW4n3h+dtzIZbrYoPZfMWLjV19fVWAOtlpCIqq9CGQJQPVVg/cqKxT4gOGT1+crBuSNk7v+4TIkn0dlFZArkJgbmqal2o+vxYzQkbRQJxK2K7xz8/N/sPHjI7d+8NjjOqIW5CBCf27+Sp0znC2jexIiaTDL6i27APjTU5YhpJfORojfcPfPR1MfZFC2t8kIuanFFfV40htHWfrNuwKXNuO/YVk2a655pCu3nZuHFjqskXm1po48P8l19+mbhPENQSLYJrTE9MiSiQEydOeONGIIL69OkTPP7qq6+GYk2aWs6gQlt/pVsEky+zVkss96voWoIXQ2hrWVS1bkMmMdKUk0LiuNdv3GInUEPzCc6s+yeSBuchy+RyaYV2XH56odJ+w+ZttqHqtzEytLMI7aRBEZ9cLXRSSL38k0kCf877mNO+n6LOrVQ4+9ZpJ3ZcED+oI3LfF7Whs7xlMkQZWNLLYH4Svf0vho3MkeNYlwhUOV49YIhvIPjkeFNce+4AQnDed+0J4kZwLDpLvbkmhfShB3XSyumo+78G0h6Z4dLn+eaAJ00SSqFNCCEU2hTaFNoU2s+w0HYnPvRJ1iFfjlbVLQdDy0RV82pJLmI3i9CWLOeo9euvQYq41cug6ihOsE6dURnISuyfrrJOzmKuDVV3a1mrjxHVwJD8cXEjqBR/udW7qdt//+U1M23GrIKFNiY+/HrcJPs6fSy+qvJ8m451aduha0gc63xyDFDgMVx7kNtp+wL9K9dGlNDWOecQ6DLAkEVo6ygWTMBVyjnhLUVoX7x4MUcQI1oDkz9u2LDBLFy4sOhCe9myZfZ5TB7pNkhlybB+KmweW8kNEd26dWuv1JbJKiFq3EkjcTz6/0ePHg1eqyeERFV6bW2uDDh79qzN4EZDJEuxv1Yt0QBPBi2Php7DIKYv21QLMUgsvU+6ErAYQlsLMx1Z4CKPQ7BAMmGiv6QG4YUJ6oqBK6+iRDn6Cl+bd1vS1+gxQZ67TFLkCPo+rr8weaWIOMSYFEs6o1K3MURTvkJbizFMeKeBgBWJqteBAXRcH2muo207dodyk5eurAq296Tq9udUx+ZDVyW7GdpxwlWuRUQK6apfbGfA4BHq23cLMglcV7pi8ESeW7xsVWS/6mvg1q3bwf6hf/SxSzW6O0iA9b39a2ydK46b4tpztyMxMC+3amPzne3fwxOm5LwOleR4jyZdQ9t37rHfzCsEZFNHDhxv2eateo+7nvTvhqgMbVc6xw0QQqpHoc+7vEfzvVcSQgih0KbQptCm0C4zoa2rmvt9Mcz7mrq6evsVY0jgJ5NFnklcRmcWW7HbsI60QlvHYSDewTeZo863xkR9ehldta0bqhiXNXxghBCWTOyofYpqENA6O3PGrHmx4lwqgt2qc/SniF1fBnlcw9c+CxHarpAPz2b/hR2wwIfykWMn2uoo/DtfwTr0qzHe2BGd4X3oyFH72IGDhzP1g/1KdMMH1zihjck8JdNcDy6kFdq6krzUq7NbktB2J0VExbKuyENWdKFCu0OHDpmr3q5evWqmTp1qM61nzZoVmvS3vuH6GzFihHe/rODZsye2mlsLRnfSR1SPhyRpw3Wr41dQ/Y3+gWTH7wZpyPTOF8gluZ9BFOF9ZwcbLl0JxVy4FXpaQKysWmdlAqRr+y49QxWWbt9DukC6Qm7IhHfYfu2ly8FzaBqJxpBsXZHQWPfZ8xesOHMrZJsaNy4hn6/o5zPRWdykkFgf1oX+gxiFAIfwR5WyZBT7pGKxpHOxc6nzFdr6GofwvPPrNyEgO/X1Wox9hZgMTeq8Y5cdGNrf8HtRGq57PZACKYhto1Ic7zu8N/AewDcS9DfS3MkdcS679upvB3DsuW24L0Ce6oEV930B6aqjQ3At6H2T/dOCXgtcEdd4DO9Z2Rb2E7nsGqlclsgVDE7huN5v1zly/zAZpDyHuI4bDX+rYVvfVEwPHnfFcVNcey5u1bpvsKSp7z+4X+ObM+hT9BuuD1zjc+YvDu0nvpko4Dn085ZtO831GzeDZaZ8NzPUj26VvzsomXTfk9eN/abCXnMQ09gWft/I5J9yTeI6box7JSGEEAptCm0KbQrtEhXamOwxa3WuFo/bdu6OfJ1IQ/zhiCiStEJbV++iocoX7f/9/162DYJcf1jDcpCVsgwkZpas5yxCW1eG44OS7zV6/3XsiMSNaLmL5/BBDPEfaZsvzzut0HazszEYAGEtgw9SvQ5x60rjfJq+vqSSXUd4aKF848aNTP2AfpMsa5/QxuSgUccgGdp28suYPGx8gJN14Dq5X6LZ2S1NaOM+54vjEDnhVjtPmzYts9CGEEZ1M94zeC4NbuW4O7HkgQMHIoW2u/2o1wE3cxv7ikkn5fjHjh0ben7cuHH2OTc2BdK+ECEpmddaJOUMwDmiIk2+qSu09VfYs3x93M37TRP50FxCqVhCO21lqT4PInl9AwFRDTnAxZxs0ycVi1mhLd8M8Alt2Y4rtHVWvLSX/vZOo8QWpOlzt5I1zXupZ79BOYNDSdnqU2fMyuk/mQQ2a4SKZNNHvV5XZ2vhried9E1c6WZG68xwX0M0kkSUNOW15xsI1AMHqFxPMxlrY5E23sS9L7n56L6GXPYodCQU2oTJ/nzutPEhaSesbKy4JEIIIRTaFNoU2hTazSC0tQDVkz7GV3U/rdCGpE0jtCEZ0wptHVWRpmE5VPjIMlkmW8witPFaRGfEVYG7lckSO6InSWzMSQWThLZIdamuF0GLCnpfn+Pc4bl89wfH+fzLbz6Vx86AhZ40tJgZ2ogakUp6VGej0g1fcUbDa7v17h+cH8huiHffOdGTfG7asq2kZXZLEtrHjx/Pkb6Q2EuWLDH/+Mc/cp6TaussQlu3HTt2pNovVEC/9dZboWXx/5kzZ1qp7K53/vz5oeWjJpREnnaOYGrXLud17du3N6+99lroMUwaeebMGa/QdoV7PqJw3qKlOfeN4aPG2ZiDKEGLrGifMBHZ8CTu4KmE0zmuSZLVrbrDPi5cusL7elTd1tVfa9Zr2T22qK/oxyFZzhBTukI2Dh1JcajhnqhBhEGn7n0j+xmVkXeKnNvu5iCnjclIe52KmJZqdBHaus+kH/U5gFzVlaA63xryFr9zcN3d/TUPP19k20kNg+paFkfJSOyXfAPCBQJVVzvrZVBBHNd/SQ2/a11Qke17/66sqo7sD3zrQlfBS4O0jrousJ84d+4y+FYBKnub49pL6ktMyNmc4FpAVbU+ft0Q24SsaxcdReI2xKn4rgONW6ke9XoMACA3PWpQBN8AgBxvzHslIYQQCm0KbQptCu0yENpxwg4SEg0SV1fdNnaFNjKV8QEU1bZuwwSOe/cdMLUXL4UiSOLENCrKsH5Eh+QjtEVKJ71W91F1wx/umNBS/iBfW70xLH0bjhlxKFlavkJbnxMdAeIOVAQfBH+V0IVI1umVc4JtYlJPfM1Z/o8KaDcWJku7H1Gh7Vb5p6nsxDUalS8PKY5zSKFdGuBYXXEc10Rc+4S2CF2Ihs8//zx2wsc07N+/P/U+uZV5bgU3GvK3fRV8yMGPEvC6LVjwNOvWJ7SLIW4gN48eO25FKL5+riseoyqOIRPOX7j46wBU409qifOM+82ly1fs74ym2Ga5g2sD/YQ+w3nC+fJlEBcDdzJA3ySMzQmqOTHp85O/N0qrshPyt77hdx7OE/YRP90KZh+Q8IgwwesRQdOYlcK4J+D9hwgKRGxEVUv7rgs0LJv2GwE4Vzge6Y9yv/aa+jrCIB8kMX4mfYMH937cG/Qyaa4FmdwT7ZNOn6X6PeRui5EhhBBCoU2hTaFNod3ChbbOHUT8RFLECLKn02ZoywSIWTO0tUhEfnHU+pFPvXxVlf3AAkEtFcaoNPFJX51XjSqffIT2yDETzd/fb2fmLlicujIZfbR2/UavGIWU0pncaRpyrQsV2mjnL9TmPL9NxXSg4fWFSlYd24EKccm1thNFqqpoPfli2ibH6ArteyrDPa3Q1tnb7n7r6BgK7dIAedWoSNaxG/Jz9uzZIdmLqmXcW1yhPXDgwNAHdtw3fFI7i9AGyPDu0qWLVzCjYnrChAm28tMF1bquqEdedhR4/cSJE73bef/9923WuMYV2p9++mmjVCKmEdqEaPREcu6EhITw2nt20BP2tuQBBEIIIRTaFNoU2hTaBQptHc3gq5hFg+jWk+JBFv7ltbdDE0q5y1StW58jA9MKbTw27puKYPlde/blrF/LzxmVc0O5zO5kjNLWrNsQPL90xeocof1NxXeJ/YUqXlQZp6nWlcrk0Fe1h4+KlOxpm2RR5yO09T5hMMB9HhNX6m39919ei83sThvrIlEtuq1u+BAZNXCStsmEklGTQkZVs8+a6wyieKrQ9fXi7qtv4lRMsIrminH3eV9/Ji1PoR3NzYb+RHY1ftbV1RVlkjpU89oJ1hquXfzMlyfvqctWcGMfMQljY1RBYn9ra2vN9evXzenTp20efXNCoU2ygpiaUpgkj/DaI42LnpAWsTIcQCCEEEKhTaFNoU2hnZfQdnOCUU2NOA9UPEPeSha0Gz+hZR9ENypvkRWNZVyRK8I7i9DW1bFocxcusaIP+wVRK3ESOjpDx3ygzVu41IpnSGNUVOtjxL66MSKQt5gYE5nKtz352Fqiowo8KYrDPYYoOX/l6tXU7erVuoIytPXzdub4iRVWYqOfkLfpyylERXqhsSP6enHPgY5eydIXelAhSmgnxeHEHZuuZvcN2oRE8sw5oYzPuOd9FfZJy1Nok3JCTyI3ZsIUdghJBN8UwLcWfN9cIITX3rMDok0woTDyzhELQwghhFBoU2hTaFNo5y2008QzQBQiakRX3X45enxiBe2MWfMSJ2D0CW20xctWJq7fjQmZPHVG4jK62lbvkxb0bp6yK4PTSF63Mhl54HETSRajaanvE9rYJ4n8iGtTZ1TaAQwdLVPIRJZupnVUVE2xJoVMK7Tda073E+Ju0q5Ty29fdE2hz1Nok3IDEz9OmDwtcXIwQgghhBBCCIU2hTaFNoU2hXZmoS0CD9USvgpdCF/EbPiWW712vfnTi2/kLPPi397JEapaHk/6dnrw+IrVayMnINy9d3+Qp60bYlLWb9zi3SfEjUTt0559B7yV1G+2aRu8LmoCwKxC261MhiRu7AxlVKtLhMm2Hbsiz/XCJSu8USdvvfeJnbRRYjAklzxKkGdpEl0TVaneHEI76jzaCJvBI4Lrwa0md5tcw2iz5y2Kfd4XbaOfT8pnp9AmhBBCCCGEEEKhTaFNoU2h3eKFthZ5kKKS55smK1qyl2UZxEEUW9TqjOEoue42xHNkXaalNVSiZz3XpdiyCu1ntVFoE0IIIYQQQgih0KbQptCm0G5UoY0Jw0pJaLOx+Rqq4VFB/3Gn7qla+3/0sHnnTbV/e/cdeJrNXVdPoU0IIYQQQgghhFBoU2hTaFNoU2iztdSmIzHSNFRK+3LIi92Q6/7FsJGhSUKbYrsU2oQQQgghhBBCCIU2hTaFdosS2hDPy5cvN1evXi3aTQDrotBma0ntwMHDIZHesVvvgiavpNAmhBBCCCGEEEIotCm0KbQptJ1WW1trVqxYYVavXm3q6+uLdhOoq6szy5Yto9BmazENE3r2+2KY6TNgiFmwZHmqiToptAkhhBBCCCGEEAptCm0KbQrtDNLpwoULVmgvWbLEHD582Fy6dMkK6LNnz5ozZ85kalgGy0KSHzhwwMybN88K7XPnzlF4srFRaBNCCCGEEEIIIRTaFNoU2hTahUeOoJJ62rRpprKy0raKigozceJEM378eDNu3Djb8G9f089PmDDBTJ48ORBZWA9EOYU2GxuFNiGEEEIIIYQQQqFNoU2hTaFdsNCGbEbWNWT0qFGjzODBg03v3r1N165dTefOnU2nTp1SNby2S5cupkePHqZ///5m2LBhVnRj3YwcYWOj0CaEEEIIIYQQQii0KbQptCm0CxbabGxsbBTahJCm5srVenPm7Hlz79791Mv88ssv5sSpM6bmxElz/OQp244cq8m0DnDt+nVz6fIV8+jRDzwRhBBCCCGEQptCm0KbQpuNjY2NQpsQEi+m3/mog/k///E78/X4SamXu99wb/n33z5nl9Ntx+69qdcBif2b3/8583KE5Hutb9m+03Tq3tf84flXzB//+rq99ufMX2wePnwUu+yhI8eC5V596z3TrvNnZsp3M+1gUJrtLlm+ylR8V2m+qZhu6q9dj3wtBoU+6tDVrv+9Tzrbya0vX7kau34MCn0xbKQ9lo7deps2bTuaPfsP8oQTQgih0KbQptCm0KbQZmNjo9AmxWHr1q1m0KBBZsSIEebLL7809+/fZ6eUmRSbNGmSPX9omOfi559/Luvj6dqrn5XKEyvS3yd++ukn03/QCNP386GmfZeegdDOItIgxX/3P/+beTlCsoLr9cP2XXIGYKRhcObc+Vrv+2P0hMmRy42ZMCVx2/sPHk416APpHbUdrMMHvhkRtczM2fN54gkhhFBoU2hTaFNoU2izsbFRaJPCWbRokXnxxRdte+WVV8zNmzfZKRm5ePGiGTBggBXKmG+iqqqqybaNAYi//e1vwTls27at+de//tXihLbm8eOfzH/96aXMYhqSsXufgea1v39gjh0/yQubNBqz5y0KRO9zL7xqduzaY6uhMSAjj+M6dN/Lk76dETz/b7/5vamcu9Bs2LzNvlcgwZO+1YD3BranRbPvPaKlN9a7ak11aJ/x2NW6cDX47dt3gm84oH03c45Zu35TMEiEhop0QgghhEKbQptCm0KbQpuNjY1CmxRVaN+6dYudkpHjx48HfYiGiumm4tGjR6ZVq1Yhod0SK7RDkr/hPpOP0Cakqa5xRHjg+oQA1jnveG7AkC8DaXxT3Y+vX78RxOognuTGzfC9+sfHj839+w9it62FeJTQxj50/qxvIM1Pnj7jFfHu+3P+omXBc4uXrQoeRx6+PP5G6w/L+v5ECCGEQptCm0KbQptCm42NjUKbUGg/E5w8eTIktCdPnvzMCe3rN26aqTNmWVF18dIV8+XoCTa7Fxm+Hbr2stLKBRXPC5Yst8shV9eVZqje/HZ6pTlac8IrtPEcKlcRzYBtvdyqjZleOTfx+JCFnVZoY3uLlq40cxcuCRqiEZJyggGqZ5etXGOzhVH1in1E3MnyVWuaZVLJU2fO2lxkbB/nB+cG+cXnL1y0fQ2ZiMdQOfvzz7+ElkW8xax5C23mMY4DDRnI6G+IVLfPcB3MmDXP/nTXBXbv3W/PH879nbt3Czou9PPBw0dt3jP6WvZP+hoiN4q9+w/Z6wfnBxXPU6Z9b3OmIV/nLVpqfvzxR+81sX7T1mA5yONPOn1WtMERfY3jJ/6v2bR1eyC0UfUs4L0kkvns+QuZt4tzLOtdumJ1IMfd48L5kkrr4aPGBo/jPOuYFF1BjmNo27GbffzPL7UKVZZP+35OqLLbvRcQQgghFNoU2hTaFNqJQpu3IEJIc9OShTbiPE6fPm1OnTplYyp++CFZemEQoL6+3i537tw5++80yz1+/NjU1tbabWHZGzdueF/nCu27v8onbEeWvX37duL2sE/nz58Plil2Fnc+fWflzJ07wXLoPwjgrNvFsmh1dXU58gkcOXIkL6GNvsa+Xbp0Kee5hw8fhvoz6hw0ldCOy8aVtnXHrtAyqJSOmmRRV6nq3F8t+6IaRFrc+c8itPOdTLL20uVQlILbskxoWSwgpJPOkTRESPjOk69BoGISQs3MOQuC5yGVNRjw0BW5hUbgJF172HctftP2h1sBbe+3De+799t1js2o9gn8rEJbrn1fxbKIa71/ehn8xP8h8vE8GgaP4sA+t3q3bTBQhOs3qkIbAyO+iBAM3kT1H95z8n5Axrcr0ZMiTgghhBAKbQptCm0KbQptQgiFdomxb98+8/HHH4ekp7TPP//cm1t9+PBh065dO+8yspxPUkP0YWJA3zJvvvmmqa6ujhTar732mqmpqTEdOnTIWbZbt25eSQ0pi+zoLMfW2H0HDh06FLlc3759rbDX6CpriP1du3aZfv365Sz71ltvWcEMrl27Fsqvdturr75qK951H7du3drKaUzAKY+98847gfS7evWq6dOnj3d97du3NwcOHEgltCG8pkyZYo8VrUePHlbo54uWXGhdevYzJ06dsTJTCy4tFuPEclS0iCu0IVNXVq0zp8+cC4SeWzlaiNDG9lavXW8rjVGZnUa63b13LySAe/UfZIUvMpCnfT+72YS2ruBFn6FaW0vfg4eP2MEA2WcZnBGhjWrk72fPs/nJNSdO2kpuvTzyl3W/6VgKqRiGWH3h1beD68Gt7i5EaLf+oL2VqoeP1uTkTevjASdOng5dl8iZxjJYR9T1qquM0XB8qAzHtaCXq1q3IbjXunnUcQ1V3iKv5VxJPIdIcvS7XFuokJfX6/6eOGWarZx3Bx0WLF4eKdtRkS3nESIc76eoa13ys9E/qGYHt27dzhn00Dna+nlUt7sSXTfmaBNCCKHQptCm0KbQptAmhFBolzgLFy6MFJ5aoKLqWNi4cWPiMiKg7927F5LLEK5Jy40aNSqQP1q2JjWIbl1NiH3GPsQtA6mLyuam6jsrixYsSFzupZdestLbJ7STGo4JfQ35n7RvEO5Jffzpp5/afsUgRprtz58/P5XQ7tWrV2i58ePHF0VoazEHEC/hy84thtBGZIQAQSbC8T9/98dQ9nC+QluTdjJJLRMRV+KCeBZIweYS2ogZQV/pqtnNW3fY12zfuSenMhiDKRDAPhkqr0eDENforPLfPveCXc/YbyqC1+/cs68ox4UBBMSm+JBMaFwPIqdxDX0xbGQgXXU8ByJGEInhE9oQ3rLvGNxwr1cRyjhWXCtJle1ue/6VN0OCesLkaSEhjWgT/S0EnZGNbcV9I0BanwFDcs6jzt4W2azfz+61LjnZ0j/Y174DhwbV4T4Zrqvo9x148p6Vim70EcS3yH8IeUIIIYRCm0KbQptCm0KbEEKhXaL4hCckJwSm+7hU6UJQulW/eP3ixYutiHaX27lzZyBIUEXtPv/JJ594pfOWLVtihTaquX0SGDEmT+Tf4xx5jue7du2asxwka9bYgXz6zkopJ/5D9su3nIjpOKGtZbFuVVVV5uzZs7bi+sMPP/RWU6MyGhWr0sfYD30sev9Rye07T1iPfq00kfFxQtut9C4k21sLMBFWWjRLJSaEl0i7QoW2L45hz74DiVXU+QrtNMvhWKUCudQmuBOhLfulj0cGBkRGRu07HkOMxO07d22W8pWrdYG09fUJKop9YtU3oSeiSCCNIT+TGjLZffE+qC6G6MX+YQLEXXv2e+Mv5Lg/HzoyZx0iWrXQ1hIcchn7ivgRbAcN60QOuc6BxjLHjp+0gxcHDh2JbXgN4jc0qBqPEtP9B40InR99TLIPGEhClTj6Sj+n42G0iH8y0PFzotDWkScQ6Xhe+gXXAwYX3GX1+jDwoXO411RvsNsVIZ/vZK+EEEIIhTaFNoU2hTYhhFBoNzI+wTxgwIBAvF6+fDkkrkUWuyLXzUSeM2dO6Pk9e/Z4Ra6uQMa+TJ8+PfT80KFDn0yI5whtSF7kNlsBdfFijlyX7bnL4dhkgjXkfnfq1Cn0vBuV0Rh9Z3NmnZiWYcOGBcuhWtqVz+iXKKG9du1a+xykUffu3UPPTZr0NFIC/aWfQ9SHRveVSG1IalSSoxof28Yyeh3YT4lTgRTH+fJVy8cJbVfijx07tmCh7Va1ujJQi9JChbZPfOlog+YQ2rpSttTEnIhIxMFIhbZ7PHIeXaENUQn5G1f961ZoB9tdvDz0Oh2Voc8rHs+nmhlA0n7UoWvk61GhfffXb6vo43bzvYGeHFELbRG/aRpEdiFIBAgaJjut3rjZSm8do6IFtK629w0qXbp8xTuYIBNMQkbXXnya1a+rrN11yXUkldVS0S5V6z4Zrh/DoMWgEV+Hvs2hzwmFNiGEEAptCm0KbQrtRhXa+ACNvFRkfWJSLVSxFdLwtXisDz+xPvw7aRIbQgiFdrmCe5yWrqi+lWpgYdmyZaFqaMhiyFf8hIxGBAVymgUIzkGDBnkFsyu6Kysrc/YHghPyE9vDv7EtV0wvX748UsbK9lzhDDmLamUIbbm3u7EpUh2MY5o5c6aZN29eTps1a5aV4fn2HV6jq5zxb1SSa5B/7ased4U28rlDQteR1rra2V3WrYR2+xD7dUtNRof+7NKlS+g1Z86cCa0DUl2La4kziZsUEtX7kPLSjh071ihCG0hMQWMLbT2JY3MIbf2aYkVqFFtoY9I/V9LGCW2dNy3tD8+/YpueMFPHv7h9opdFTIlvkCppsk/d9P65wlzvny8PW58jn4TfsWuPV2jr/cPysg23QQ4XIrT1oAiO0/1beNr3c3KEMd7/ckyQ/e43XnT+t0hk3I9lGQxyPHz4KKhsx7Ur20CGPPZJ9gMThooEl+xwSG15Xstr6Qc9+aMsozO49TmZu3AJ/xAihBBCoU2hTaFNod14QhtCAR/89+/fbyvrDh48WFCDxEDl4dGjR+3/sW7fBGOEEArtZwFXckpFdFogstetW2e++uorKymj8pRFMOu8ZFQBX7hwIdV2fMI66XnIlTRZ3W5FMSSMLxbFlbT59p1b3Y6Illz5Fo50kbiSJCkd93xWoe0OGrgCH/vkSi43QgR9hQkk44R2MRGJpbOKNZJlrKtzk4S2CLgooS1iNkoGppHObvVpMYS2bN/NWS4VoS39qfsySmjrfGQIzDXVG4NvWrjHG9UnYyZWhGQzsqCxXDHQIhcZzEePHQ9lREulcZTQlsxoDSI64oR22igZ9NOrb70XK7/1wADWj33XAwg7du/1XuPyLQTfuYyqgHf3P23udiDP9x3IEda+inRfZIsbieKKay28owZGCCGEEAptCm0KbQrtoghtSAVUd0Go4CekNuR2Pm3fvn1WYuMr8Xv37jXr16+365SvUxNCKLSfdaE9bVq6ibAgJsaNG5daFIvQ1rJTZ0NnEdqQpJKRHSe0XQGbpomkdScqTCO00/YdBK/Omx4yZEjOayB6Pv7449A26+vrc7a5YcOGRhPa7qAB+uXdd98Nnn/jjTe8meNuLMmOHTuaXGi70QVyzSI725WBWka6lbJalEYJ7V79B+UMZMRl//rEdBbpnEZo62Py5TOnkaCYoBH5yWhurnJTC+2QoJ+zIGedWkT6+mTrjl2RkxNmGcBLuu7QjtacyHneJ1e1yB0+KjdmB/EecZEjaYV2vpNCunnTcdeYPpcy8ODbP19WNs5tlv0ToY38cP346AmTQ9uReCGsG9XeAJNkSjSJ7KO+h6EKvFhxLYQQQgiFNoU2hTaFdixSHbh69WpbTY2YEDREkOTTsCziRvC1dKwT69ZfpSeEUGg/S7jVwqgydkG8Bl4nDRIa90ZX9CIX+vvvv7ciFFnSaSJAXDENcP+VbeG+7mZoYzkdhRElY934C8mNhnieOnWqbfi3jhNZsmSJlSzItEZ1NzKi3YbHsf18+y5thbbedxHtrpTGQGxjCG3fucm3QvvKlStNLrTRpn0/O/Qccq0lmmLMhCkh4Sdicd6ipaFlMPGfL/NXS1hfNbjEMVixfuly5KCQyD29P1mEdlQVqRWLv+Yc45ij9kFXOUcdN9rX4yc1q9COO0dgxNfjI4U24iTkvMv6plfODV7vy6/Oiu6vE6fCMTyodhaJGlVtrbO15Tn5ZoAbnyNy3J1Y0UVELdaF6wTxHZicMq4hhgUTaLqDBFoWC8igluf1gIyWwm5fXL9+IzgXE6c8HQDE5IwysaW0pMgRt19vqt8JOsMefawHLfS1oivPsb63328XSPBiVe8TQgghFNoU2hTaFNqRQruqqsrKZ1SvFYu6ujqzcuVKs2rVqqKul6gP0o8f2w8nkE6EUGg3DxCzSXnOM2bMCInQ7du3W3GtH4MMThLMwJ30Ea9zpamuXoZAdTO00wptN+IEy/kqwpHZjLgpNEww2dh9h4HTYmVou1XUWYS2W1Ge1MeNlaGNc3L+/Pmg4bXFENpoqC6227h3z7zfrrO3+hKC7IVX3w7EmAi9s+cvhKIQooS2xCvc+fXa0tXAT6pQoyuAh48aF7x2ZdU6U1d/zU6c5wpy+X2Jdu369UDWbdm2M/ScFndasuK4Dhw6EjwP+Tdg8IhIUe32YzEnyMtHaKMPW73bNpC/iPAQaYvIl1AFrxLaWE6fW8lK1vISgw4414XdR58OluhrAf3cvktPb4Y22L13f/AcYkEu1F6053HYyLGRy+BalvOP5zZu2RZcYxigQDU1ZLgWxvmA9wXiU2Q/MJAgMhnvH/3e0FXpui+wn4hOkb7A+yHpmwuh+2DMpJD294kamMA3EVCBjf7T73U3LkWLePT5jZu37DX4TcX04PEsA0yEEEIIhTaFNoU2hXZeQvt6wwc7RINUV1cXtZIaXwmHzC5lob2yqtr0+2K4rVoR8EEaj42fNLVRqt+KAQSDfDDVHyrWbdhclK/+FhPkdM5ZsMQKgyQOH62xH9AHjxhtq5kgGkr1HMSBr/HiK/QDhnwZfE036QNnxXeVOV9JxrnEB1k8n9TwujjpQ6HdeLjRFlIxLNcuhKWWrxCUGPDTVbhoiGfSUrN169beSuJt27blxHdAtMo1M3bs2NDziDVJI1ujBLor3rHfDx8+DLYHER8n2Ivdd/h9gu26yyGDXJaD8EYluE8+F1NoYxs3btywwjlNFTxw40SwDny7SeQijkM/L5N6Rgltt6IbDeesWELb13B/c+83Ilnjmiu0pbo6rp08fSbxfutbTotmHZWSGMfgSEJUqce9PkrcSX6ztAmTpxXtnpOP0AYyCaCeEDGuD7Be/C6Wx6vWbXD+frwRiOHfPvdCQRW5OmpD2kt/eydn39xKYiyH37Vx58g3wSmqqZOuhWJI2U1bt3v3R/8fItn9223pyqrQa9yMbFzPaf4+SorugcCXAYuoSBn3vY591VXabsO1kOZvH0IIIYRCm0KbQptCu2hCu5jiudSFtv6Aq6tw5INi2mzFYu8TvnbqSnb9vP5w6WuoSioVqa1zJyWzMeq43cmm9KRT9+6V16SiMhGU+8E7qo/kg6rkburn3A++cW3O/MUU2s0E5h7w5UR37Ngx53FEieCanzt3buhxTPAI2QlB7MutRmV2cHGRQLUAAIAASURBVO9q1y7n+fbt24fkr6xTKoDzFdpROdqIPnG3h/9nrQ7Op+/sANjhwznP43ghgN3HddZ4MYW2W0WdRmi71eVaXOvKemmHDj2pqowT2m5euRuFko/QRtXtoOGjcu4zEFm+343YD0hk/donkw9usJXMbqyC3e/+gwJpJvEQWvpJpXcSiHb4qEPX0PJ6okm9raTmyzqG/PRNuodJAFEh7AMDzEnrzRcR03KMWmhLhIbEXUjOcjAAtWhpznGgihjHgYFxva86MgPXgu9vC0Rs+GIz8gFyddCIr3P2r0vPfrZKGNeEGy0ix4WJCfUy6A9MFBkltGUwxL3u9DcGinXOMFjvk8Z4fyxYvDxyMBrFC759QyV02r9P9TmMild58PBhqAo+6b0ufe5W9qO1/qC9jTshhBBCKLQptCm0KbSbJHJkzZo1NnYEErolCW35AKirxppbaPsku++DIz6gYcKjq3X19sOtFp/ITGxu8LXaHv/8ItVXY/XXV/EBDxMR6Q9/vgnDShkthOKEtluRhg/Q+ppzJ19qimoyCu38mTNnTuKEiRCZIlZPnTqVabJFLSkhSt1sa19bsGCBV1hnEdpR8tjXdJV5Y/ZdluUguUUKFyq0EWvi63fpzzRCG2AS5TT9qWNofEIbldu+Cu1iCG2IQ4iuhw8f2QgPRDlcv5E8wTMiKfB6TCiJe1gWrlyts7/TnnzjpPS+nYP9O3/horl85arti6jfS3pCPbRPOn1WUseD84rzieNAf5fa71f83sT+4RpCnEVa0Mf420Oyr48eO55qcBnP4ZqTuJrGinFD1I1cPzg+Nz/fK/kb7jkYJMf76uy5841a+QzBj4btoPo+7bnCt8TkHkEIIYRQaFNoU2hTaDeZ0IZshnRG3jWFdvMLbd8+Pfmg9jT/Eh/O8CFUI1XBUTK8KcAHIUSMTJ46I6eyOE5oz563KBDA8vVyHO+H7bs027koBHyYRh4m8lfj9tut4PMdJyrW8IHebaiAwk+pGkQlvK8CjUK7aUEsiBuFIa2ioiJnAjm83let+/777+dEffTu3TskniBdJk6c6N0Wlj9yJFxduHTp0lDFcpLQ3rt3b8493RWn0rp3725OnDjRpH2XZrm+ffvm/P5xBxLc40zKycaEm26FvMjrpD5O25+otof01rhCe+DAgfZ68Altd5/zEdppvmFC/EDk6+xknY9Mig9krxt3gvdFx269bf9jYDiNPCaEEEIIARTaFNoU2hTaBQttfCCpv3bdVn2g+iNtZQo+hKOyB8tFffWxEKGNyYqkGiWtRMQkP9gnSF+ZQMe3T5Ip6gptHU3hq8TV1bz6K8ZNyax5C1PnkvqENhrOtzDp2xllKbTTgOonV/pnPU7JsNQTdZUSLVFoB/eIO3fMhQsX7L0Pk/TFyRS87y9fvmzjn/B6yVNOCwZQamtr7fKYCBGZzo0J8rNxbNhP/LznfP2/KftOIxMjyn4VMjFi2n5/gIkE798vqKITy2J/Ib+lX5sTLbRLbZCsXNAT8SHKodTmN3iWwP0T327CgDh+J67fuMVO8qjzt5evWsOOIoQQQkhqKLQptCm0y0xoo5WK0MYHlMXLVnnzg1/7+we2GtkH8gYls1m3l1u1yclwzkdo44M+Pjj5shajvmq5/+Bhb3Yijm3t+k32NagsipqcCV/7hlTAa0RouzPOA3xglu1gfyBbJG8bfeIbDEAfSH5kMaQxKo6xbXyAR4NYTyO0kd0pr8MEXEDnPhYq6CHEcN1IFqdPLmCQQvrXHUzIVwjJufP1u1SfYzIrfNjOeg70RFPICS1FWrLQJqRcwTdLWKFdGIj0qJy70GYMY/CbNB4itKMG08d+U8EBBUIIIYRkgkKbQptCm0I7L6GdZsZ6tL37D4WWSZosEQ2TIellsghtTAoVt25UByF3ULOyqjpxn/CBFxV6vgmn3Bxm/ETGo/vVWgBh706GNX/RsuCxHbv25Cyjq4QLlbg+kBWZRmhDOOus6OGjxoUGJqImMspyTUnlO44XOZYuOp88bl/TkFThKBXpklG7bGU2oY1qf+mfKEFfClBoE1J+IBt65pwFdlD5WftmDHk2wd9Gm7fuMFNnzLITY2Ni7fGTppqz5y+wcwghhBCSGQptCm0KbQrtvIS2zhWGEEQlKqqLER0yvXJu8Nxvn3shmHBKV6tCAC9dsdrcu3fffsjRy6CdOPUkozmL0IZAFPGL9SMnGvuE6JAJk6cF69Y5jajK0ttFtRbkJgQmvhKrq8/xoQtRJBC3Irb7DBhiak6cNAcPH0mcWAtxEyI4sX+1ly4/ERNKWPsmVsRkkoGMb4QPfiJ200hi/RVt3dDXxUALa/frx3pyRn1dFXrcPqGt+2TL9p2R11wUerIxfa5LEQptQgghhBBCCCHlBIU2hTaFNoV2ZqHtTnzok6xfjp4QmmhJLxNVzasluYjdLEJbspyj1g9Z7YpbvUzVug05y2jBOnP2fPsY9gn7p6usk0C1sa7u1rJWHyOqgSH59XNu3AgqxV99673U7Y9/fd1W8kWRVmhjsjdUU+F1+lh8VeX5omNd2nX+LCSOdT45BigArj3I7bR9gf6VayNKaOuccwh0GWDIIrR1FMvwUWNL+g8BCm1CCCGEEEIIIeUEhTaFNoU2hXZmoa2rmj8fOtL7mrv37pmFS1dYCYzcalQ2Jy2jM4shHrGOtEJbx2Eg3sE3maPOt8akRHoZXbWtQcb1muoNVghLJnbUPkUBAf3cC68Gxz9nwZKc12hxLhXBQFedoz8BxK4vgzyuVXwXLd7TCG1XyOvW9/OhdsACVe3IwZw4ZZr9d758NWaCN3ZEZ3ifPP2kgl9yZLM0VNPr43aFNibzlExzPbiQVmjrSvJSr84GFNqEEEIIIYQQQsoJCm0KbQptCu3MQhuTPWatztXicd+BQ5GvE2koE12lFdq6ehcNVb5of3j+FdsgyHV8CJaDMJdlIDHTklVo68pwZEf60PuvY0dWr12fI3fx3Jmz5238R9rmy/MWkoS2m52NwQAIaxl8kOp1iFtXGueDvr6kkl1HeGih/PDho0z9gH6TLGuf0MbkoFHHIBnaTya/jM7DRrSMrAPXiW9wpZSg0CaEEEIIIYQQUk5QaFNoU2hTaGcW2lqA6kkf49AV2siEjkILbUjGtEJbR1WkaVjuwYOHwTJZJlvMIrTxWkRnxFWBC1KZLLEjepLExpxUMEloS4a3VNeLoMWAgK/Pce7wXL7gOF949W0lj8MDFnrS0GIct1xriBqRSnpUZyPH/cixGtvw2h7//CI4P5DdEO++c6In+dy5Z1/J/yFAoU0IIYQQQgghpJyg0KbQptCm0C5IaMcJO0hINEhcXXXb2BXayFQ+dvykrbZ1GyZwPHrsuLl+42YogiROTKMaGetHdAjIKrRFSie9VvfR1h277ISWUlW+eeuO0GtxzIhDydLSnE+f0NbnREeAAD1QIU0kdCHMnrco2CYm9Txw6Ejwf1RAa7L2gwh5V2i7Vf5JTa7R8Hl5mhUPKY5zWOpQaBNCCCGEEEIIKScotCm0KbQptDMLbcQ26PgJHzpiBNnTaTO0ZQLErBnaWiQivzhq/cinXlO90Vy/fsMKaqkwfv6VN73SV+dVfz1+UrCeLEJ7zMQK885HHcziZatiX6srk9FHW7bt9IpRTM6oM7nTNORaR5FWaKPVX7ue8zwGKPS28PpC0bEdiF2RXOsnE0U+rYrWky+mbXKMrtDGenWMShqhrbO33f3W0TGlDIU2IYQQQgghhJBygkKbQptCm0I7s9DW0Qy+ilkA0a0nxYMs/OvrrQPZhwpql41btuXIwLRCG0z6dkaw/KEjx3LWr+XnnPmLQ7nM7mSMwqat24Pnq9ZtsI/pffp2emVif6GKF1XGaap1pTJZt+GjxoZek8+kkJJF7SNJaOt9wmCACyau1Nv6419fj83sToOOatFt/aatodflMymkTCgZNSlkVDX7gsXuIMrPsdeLu68uGLDBBKtorhh3n/f1Z9LyaaHQJoQQQgghhBBSTlBoU2hTaFNoZxbaQOcEo5oacR6oeIa8lSxoN35Cyz6IbmQzIysay7giV4R3FqGtq2PRlixfZUUf9guiVuIkdHSGjvlAW7pitRXPkMaoqNbHiH2VfZIYEchbTIyJTGWIfhct0VEFnhTF4R5DlJy/fedu6nbn7t3YbSYJbf082jcV063ERj9Vb9wcmmxTGirSC40d0deLew4EbCNLX+hBhSihHYVcc3HHpqvZfYM2mlnznk4WKtX/Uc/7KuyTlk8LhTYhhBBCCCGEkHKCQptCm0KbQjsvoZ0mngGiEFEjAkTw6AmTEyto5yxYElomrdAGK6uqk+M3nJiQad/PSVxGV9vqfdKC3s1TBloGp5G8bmUy8sDjJpIsBlrq+4S2jU35NfIjrs2cPd8OYOhomUImsnQzraOiavIlX6HtXnO6nxB3k3adWn77omsKfT4tFNqEkGcZDGBHfdOFEEIIIYSUJxTaFNoU2hTaeQltEXjfz57nrdCF8EXMho8Nm7eZP7/UKmeZl1u1yRGqWh5P+3528Pi6DZsjJyA8fLQmyNPWDTEp23bs9u4T4kai9unIsZqc16OS+u332wWvi5oAMKvQBroyGZK4KT7sS4TJ3v2HIs/1itVrvVEnrT9obydtBIjBkFzyKEGeBYmuiapUL4RiV2ijjwYNHxVcD241uYtcw2gLl66Ifd4XbaOfT8pnj4NCmxDyrAKJLb+3MJ8HIYQQQgh5NqDQptCm0KbQzltoa5EnFVBoabKiAWIrggzgO3eLfoPTGcNRct0F8RxZl2lpoBI967kuRbIK7WcVCm1CmpatW7eaQYMGmREjRpj+/fubkyefxBM9ePDAjB492j4+ePBgU1VVxc4qEP1Nn0IHWAkhhBBCSOlAoU2hTaFNoV2w0CbEB6rhUUHfvkvPVK1jt94277ypOHrseJDNjcGPlgqFdmly8eJFM2DAgJKRmxi4rKystPuDNmTIEHOvBb9vCmHRokXmxRdfDNqePXvs4zU1NaHHJ02axM4qEER2de8z0Lz29w8S5zUghBBCCCHlA4U2hTaFdpkJ7ZUrV1Jok7JAR2KkaaiU9uWQF10UXrpiho0cG5oktCm2W6pQaJcmx48fLym5CaHdrVu3YH9eeeUVc/PmTZ6oPEgrtMePH8/OIoQQQgghxAOFNoU2hXaZCO1r167ZCj20Yornuro6Cm3Sojh+8lRIpHfp2a+gySvLHQrt0gQxFFpuTp48uVn3B0K7T58+IaF96xZjmfIhSmhfuXLFfPXVV3bwAj+PHDnyTB33g4cPzbj/n703gc6qStP9e61eq+epque+fYce6/a/J/tak1X29TZdNnZZtJYlBYhACSJaKHMxKYiAyCQgyhhkqhDRgBAghClAEIGAIRCIhCEhJAwJkyBTgcP+f8/h2yfv2d8+wzdkgDzPWu+KnHP2Ofvsfb4v5rff87zzFqqHf/SE6tjtGefNnLKD5ap0/wGnXoRZwwFWUPMWLlELfr7UN/LWrEv4/saziu3LVq52A+c/fcaeDIAs7veW56lFS951jsl9f5VT/Bf9RM0Ev9obFEVRFEVRVPOJQJtAm0D7DgHa58+fV1u2bFGbN292/jtTklYmBNpUaxAKeo6b9IYaM36KWrt+U6RCnXezWjPQRoZxZWWlOnbsmGPxEdXyBt+VaKPbAYgle13dHouKAHCmADOTAdqyT3jzxnZOP33++eeqpqbGaVtdXa1u3LiRcAzON3jw4IxnaH/66afuHKAPyYxllH6bunr1qns9tIlqm3L9+nV14sQJpx3aX7p0Kam5lm3y8/OtQDtZoU/y+Q0bO/P4ZJ6RdAU4LQsG22LGnPmeNtoWKige6dA14Tscvtm2YtV+RSFxvK3gsYy58xc36XhRFEVRFEVRwSLQJtAm0L6DMrQBtAGeDx06pE6fPq1qa2udP8iPHz+eVKANIAD+oD1w4IBatWqVc16AFYqiWpdaI9AuLS1Vzz//vAcq6hg3bpwV1AJmFRQUqE6dOiW0ad++vZo7d24CEJdZ1gDAe/bsUaNHj05o361bNwc06u/6J5980to3RMeOHT2Z0Sgw2L1794TjcL3CwsKEe5BZ1sgC3rZtm3Os2R4AXQO8BQsW+PYHsXjx4qTnAL+Lfvazn1nPh+sBVqfbbylAfnkOGf369XMsXmwKate3b1+1f/9+33ZyAUAHfNEnT55sBdr4nWwbV4D6Ll26uNtXr16t3nnnHetziEVvUwDdKDZpHv/UU0+p3Nxc6zXRl4EDB6pRo0Y5sXDhwpSBLtr1GTTchcMvj52ojlZWOZnQHmi8wPs9hIzuNes2qoINhW5s2lKk3l60xG2DTGoTaON6Gwq3qlX5653MbH2sX1HIGzd+4YHtDz3a0Tm2pHS/a03FopIURVEURVEE2gTaBNoE2il6aG/atMkpyrV8+XK1bNkyB0Lhj3e8npyVlRUpcCzaLFq0yPmDGOfLzs52rEwItCmKQPtu18qVKwPhrIbBAHoSkNlAtBmA3TJz17QNCQqAamQrmz7Ktr4BuKNPs2bNCj2vzOyWYDgImuvA7wfTO9sWyXo9A0aHXRuQWUPtVPothUXgKHNQVFTkaXfw4MFI7d5//31POyw422C7X2ig7WczI4F2lPNioVrCbL/Fm6DnxexLOhn5p06fcaEw3o6RYHz9pi2+QNsPjgOI6zb7yg4GHn/r1mcurI4CtJGpjWxyrfMXLrrZ20NGjGaWNkVRFEVRFIE2gTaBNoF2skAb0BmZa4AYU6dOVWPGjFEvvfSSGjZsmBoyZIgDHcICx7744otOxtX48ePVG2+84fwBm2lvboqiCLRbmmywGKAO8NTc3qNHDxeo5uTkJOwHYHzuuecStvfv39/NGPUD2jLbVga+h5G5jIxr27mREYzvbkBKvFVj7u/Vq5e1XXFxcQIYNqNr164J2zp37qxu3rzpZETj3CZMxb/R1507d0aeAzMLWY/HgAEDfEF5Kv2+deuW0xYWIzYIbptz3I8uunz58mVrNj7mwAaVNUR2spH79EnY37NnTzeT3uxPMkDbzMi29WXSpEkueDX9us1nF+eICrRT9UxfsXqtA4Tvvf9BVXvqtGcf3mrQMDkK0IantobZK9cUhB4vYXUUoL0we2nC/plZC1zYfeXKVf7SoCiKoiiKItAm0CbQJtCmKIoi0G582TKNYf+goTWyaiVoBOiDrROyUk2wCesRLWT/mlBx7969vkBb24AA5GGBUe7DGzRa8DmW++bPb/AXBqSVgBPXl1m5Zga0huw2MAywC3gLwb7ELyvXVhQSGeXJzoF5fWQ3a/gKOyw51tpeJZ1+v/feewk2G7oOhW0OsKgAYbzldgBgfU4sKAAa28YY1iXmnO/evdsdA8x/OhnaEvbrOYVNiNzXu3dv57nGftOOBvelx9v27Oprmos/6WRoa6D9wEOPOvDYfCZGjBkfCWhv+3Cnb6a3n5IF2mZhSgj2JdgHX+6LLIRKURRFURTVIkSgTaBNoE2gTVFUK1ZrAdpmpi7AqQlkdbE+nfUL0GgWZxw5cmQCSFuzZo0VTJuAEv7cUia0lvYgfnDTtk9n5OIeEQCuEmTq7FoTDAPao56CBy6OGGHNyrUBbQk44f0N+ypYYpmB7SioCDAr5wB9RH+vXbvm/MQ1pkyZkgB7U+23bRHj448/TpgDPAuYc7TTHtym/3VVVZWnHWC4uaiA8TA9qc1injg3noN0gLbMQNf75bgC9gNmm9nwGG+zcKT59oG+JsYPbwEAwOuIWjTVlAbaPXsPSPC7/uKLL1W79l1CgXb1iVoXZnd66tnIxUOTBdq2Yw4fPeYCbWlHQlEURVEURTWfCLQJtAm0CbQpimrFai1A2w8Ch8kElKbPsoai8pjp06cHAkq/PkUF2ja7kbBA8UIblJY2EkH7w9rarC1MaIsM7GT7DRiear9N0GuCYD+Zix+wnzEBqu2asCsxM8JtRSPNBZBkgTYysCUY9ttvZovbvM7DntFMSANtgGvbOMKbOghoX712zQXOgMrnz1+IfO1kgXbZwfKE/SgOSaBNURRFURTVskSgTaBNoE2gTVFUK1ZrBdqwaYiiDz74wNNu69atCccgO1laZWj/bfOaJgxPFWiHwWM/oGxCWDNjt7GBdjJFMiWETbXfJuiV/uZBwrmffvppDwjX1jRSpi3Jrl27PJniElZLwXM8HaANT3O5GOMHtKM885WVlY0OtN/Py3eB8Nlz5xPGOihDG/c5YOhINzv7QPmhpK6dLNDeuDlxweq95Xm0HKEoiqIoimphItAm0CbQJtCmKKoVq7UAbdMTGBnapmB9geN0wJIkkxnapaWlnnapAm1tjaJj0KBBaunSpWrRokVu4N+m5YcJfrU1hYSHqQJt9EkXGzQDXtjw+DYztLH9nXfe8fQb/9b9fvfddx1InGq/zUxrm+UGQDUymfWcI8s61QztM2fOJIB9G9D2OyYq0DbBdFSgbQP6W7ZsaXSgfazquAuk33nvfc8+ZETrfTagLYtArspfn/S1w/yxzWNu26I0LBbgv7s83dvZ17n7c9aFDYqiKIqiKKrpRaBNoE2gTaBNUVQrVmsB2gCcMosa/23aTyxZsiQh4/bgwYOebYCYplWJCZj9PLRNuJkM0JYQM4pNBGA8+o6ADzhAnAlhTeuKZIA2YHSyRSFNCxBc3xxL/Bv91X3HNVLtN7b36dPHM1YYOynTIx2LEel4aK9YscK6uCH7mq6HtjnffkDbBPOIPXv2uO2wv1u3btZrop8oioqFEARAf6oCFP7RE91dML08b40DkZFtff+D7XyB9q7dJe6+Rzp0VZdjz8KFi5944tLlxGfwZuxzDZsSxLnz591rfLhzt2effvYk0EZkLch2C27Onb/Y3Z77/ir+wqAoiqIoimohItAm0CbQbkagjWxABoPBaM5oLUAbgOr5559PgI0ajAJYSuANQHn27Fl1/vx5579lu3Xr1rnnPXLkSML+vXv3ZhxoI9P5woULDjS9dOmSp68okihB5enTpz2gEscCemYSaCM2btzoQFH0J4psoBiZ5BosAhKPHj3asx/jm06/58yZkzCOly9fdqH/wIEDPfs//PBDZ59pJ4J2+j6xOADbD7kfWePYbvMJR0FFLfy3zY6lMYC2DZ4j3nrrLecceC7w7Niuab51kMoChlRlVbULhv3CBNra6iMoALrNZ6HPoOGh7aQFiQm0bfHAQ486x1EURVEURVEE2gTaBNoE2oRpDAaDQLvJhAJ9JtwD/BwwYEDC9rFjx7qgNScnJ2F/165dHchpbpe2DpkE2mYmsGmFgujZs6dzfXM7LC5s4DddoK1j5syZkefAtH7R1xk2bFjC9pEjRzrXTaffgNcS/usYMmRIwjZ4ZQMOB7UDuDYXMBCwVNF9GTp0qHVuYHni5y/eGEDbBqZlmBnm8txmX/Rzl45Onjqjuj/b14XE8KRet3Gzemn0eCvQXr9pSyiUvm0R4n0WRowZHwlo6wKQEmiPnThVtfn+Y57j0GdbJjhFURRFURRFoE2gTaBNoM1gMBgE2o0uGwg2AyBTZqM6kMwo9ufXTvpKpwO0YYcigaPNTgPQPaxPgJva99e8j2TAsAMY16+3XiNZ3+WVK1eG9ltnyGei3/v27Qu9HjKVDx3yFhyM0g4Bv28ps0holIKdYUBbWockA7QhZO/7Xfupp56KZJdjjmk6unnzpmuBg/hJrz63gfb8xc3ynSCB9seHDt+2Wzl5Sp0+U6dOnT7DvxYpiqIoiqIItAm0CbQJtAm0GQwGgXbzCsUZTfsRHQsWLHCAmylAroKCAiuoBAydO3euY5khZWbHaisSP6BtFvs7fvx4gge0mTXt1yccB3gvi9iZEDysuCJsJiTExH4UbjQzlDUEzdQcwApGZgOn228IHtB+GeY4t4bnpoLa9e3b14HeNsGqxrRX0dYlsGqRc6azu83nYfXq1c520687rCikOT4aIhcXFzvnhO3JqlWrHPB+8uTJBBsZW19sY5oUxL51ywqH9x9oKAq5cXNRswNtbUNCURRFURRFEWgTaBNoE2gTaDMYDALtFifYStTU1DgwE4XvPvvss0jtAFsrKyudAPCM2i5VAUpjruBXbUJzLdwD4CT6hp9mscVMC4BU9yeda2EOMPZXrlxxfvrdX6Z0/fp1Z87hR475wz1EEfqFdoC6+BnVNxyZ/vpZAeRuSmFeJk+erHr16uWAdCwgmD7Yple4+RZBpnT46DEHGCMbO3fFarWnZJ96e9ESF2ajcOOtW581y/cAgTZFURRFURSBNoE2gTaBdiMBbfwRimyqM2fOOAClvr4+7QAAQeCcODeuQcDHYBBoUxR15wtAe9SoUR5gjaxxFNoEkIdVSmPZivgBbVt8p83DqvpEbbON09XY9yCAOvpS/NFePjgURVEURVEE2gTaBNoE2pkC2gDO5eXlzivDu3btUrt3704rPvroI+eVb7wCj38fPHjQuQYBH4NBoE1R1N0hWxFOv1i6dGmj9QNvGRw5VqXez8tXc95erCZMeUuNGT/FsRlprsxsLbxhsWL1WvVO7gp14eInfGgoiqIoiqIItAm0CbQJtDMFtE+dOqW2bdvm+KVu377dKfKESAdow/sTgByFvnBuXIOAj8Eg0KYo6u4RFq9N33Mz1qxZw4GiKIqiKIqiCLQJtAm0CbQzC7Th2bl27Vrnj04Ua8Lrwng1GH6pqQTawrsUvp75+fnOuXENAj4Gg0Cboqi7S8iQhj/2u+++q2bNmqVmzpyp3nnnHWeBG0UlKYqiKIqiKIpAm0CbQJtAO+NAG8WyALMBnuGhnSnBPxvnzcvLc65BwJf5wOLDuXPn1cWLn3A8GATaFEVRFEVRFEVRFEWgTaBNoH33A+3a2lrHGmTDhg1OQcdMA+1Vq1a1WKC9Kn+dGjlmglq9dr27bUvRdmfbm7PmqStXrrTIfm8o3Kqe6P6cp/jVj7s8rQo2FKqrV6+2qL6uXb9RLXl3uQPfw479aO8+NWPufPXqxKlq6luzVeHWbS12DoLiWGWVGvbyq2rUuEnqbAT/+PKPK9Tc+YvV7o/2erZjLssPVTj7QyN23JUWNvcE2hRFURRFURRFURSBNoE2gTaBNoF2hgKwsHf/IQ4MfmvO2+72d5evdLZ1+kmvJoep6NOiJUsTILvcD9ArQbYZr01+o8VAbWSP3/+9dk6/PtxZHHjfb8yYa72f//xhJ1V/9uwdBbT3Hyh3+v7NBx5Sp06fDh2jf/vPHzrHt2vfxfPMYR/OETTfMpYsXUagTVEURVEURVEURVEE2gTaBNp3v4e2thwBhG5NQHvgsJcdEIis4JYCtG2QXcfWDz504SVA57qNm9Xx6hMO/Jbg84MPdzb7+MJHfejIMW6fduza7XtsSel+97h7739QjRn/unrkx13dbch2bmmZ50FxsPyQey9BQBv39NIrr7n3+VSvPp5n7lJsDH/weOfIQHvaW3MItCmKoiiKoiiKoiiKQJtAm0D77vfQBnQGfD59+jSBdjMDbVufELCT0DYjgNcA2basYD8Y3lRWG7AYmT1vYUJmcRDQzl6a6wLgA+Ufu/f7zAsDm20u0olPP/1U7d1XpvaXHQzsNyxi5BjZ7hNFVk+eOp0QZ+rqnJ86uxuZ8KfP1BFoUxRFURRFURRFURSBNoE2gTaBdnMBbQDeEzW16vCRY+pY5fFIfsQIZMUeOXrMaQfwl2mgXVdX7/QH548KEU+fPuP0CdAXINKWcYxt/YeMsAJtaU1hy8SV2bzdn+vXLAD45+/k+mYPRwHaCMy33j4ra8EdCbQjvRlRezIB+id7nxOnvum7wEGgTVEURVEURVEURVEE2gTaBNp3PdBuKZYjALvLVqyy+gd36PaMk43sVyxRezbLePzJHgkezqkAbVhJwBbCPD+2AW7b+rRr90ce+wxpGbJ2/SbnmAsXL6p/f/hxKwi+r833HWiOYzTQ3rY90VIEGc36OugPsoS13zbGxLYYgDF4tu/PMgaNkXGMaz8/cJgTAOtRgPb22Nzo4+YtzHa2VRw+4m5LF9DD/gTPDc41YOhIa/FELFLo8TUXE1K1HNFzZxt3nX2OwpErVq9Neg42bS5yx2fDpi0tEtoTaFMURVEURVEURVEE2gTaBNoE2nc90AbsA+QL8wveWbwnqWKJiHdy308ZaG/fsSvw3LDL+LjisOdeVuWvC+1T1oKfq4sXP3Fhqu282ocZP6tP1Dhw2xy3DwUUxjmxbWnuCndb0fYdgVnC6UJcW1QcORoJaF82vKInTHnTszCxp6Q0bSsXnfmO+62prQ30Jw/qazJAG9eyAW2dkQ7gff78BbViVX5SQBvZ/np8/AA9gTZFURRFURRFURRFEWgTaBNoE2g3AdCWvsIAgshERXYxrEPmL85x9z3Q9hHHZsPMVgUAXr5yjao/e9YBwLINouxgedJAGwBRg1+cHz7R6BOsQ96a/bZ7bkDZy/E+wZJEXndxznsO3ATAXL9xsyf7/FDFEceKBOBWg+0XXxmn9pUdULs/2uvep1/AbkIDTvTv6LHKBGBtK6yIYpK6DfrQWMURo0Di8o8rrEAfY52JvkhgjYxov+KM8rlqDKAtx2Rz0QdJ+7ajryiaac41gTZFUU2lY1XH1dz5i9WCny+1xsLspermzZueNl9++aU6cqxKvb1oiXrmhUGqY7dn1EOPdlR9B7+ktu8oVl988WXCdW7euuUUDcbvTyzeoc3DP3pC9fhpf+d789PY9yVFURRFURRFEWgTaBNoE2g3K9A2Cx/aIOvEqW+5QBCF92Qbv2xeCck12E0GaGsvZ7/z449tE9zKNmsKNgQC1kVLlrqwEv2TWdbhXsy1nuxuCWvlPSIbGJA/yG4EmeI/7vJ05PjPH3ZSi5e8mzbQRuHDN2fNc46T92LLKk81pK1L7/5DPOBY+pNjgQLb8OwBbkcdC4yvfjb8gLb0OQdA1wsMyQBtacUy/vXpLdonnECbakqVl5er8ePHqylTpqgxY8aoo0eP3nX3+Itf/MK5P8SECRPU5s2bm6Uf+jsr6I2li7HvdQmzR70a/OZVp6eejX0nXvNc5/DRY6HXORD7vqUoiqIoiqIoAm0CbQJtAu1mA9oyq3n0a5Otx9TXn1XvLc9zIPDtYpFVoW2kZ7EDdmPniAq0pR0GMsRsxRylvzUK9ck2MmtbBjyu89dtdICw9sT265NfAEC3faSDe/9L3l0eCM51RrCZdY7x1GDX5kEeFMjSSwdom0BexkujX3MWLJDV/sbMueqtOW87/50qYJ00bYbVdkR6eB8o/9jZtr/sYFLjgEA2fRDQRjFP7WkuFxeiAm2ZSd7Ss7MJtFuuTp48qcaOHetC0Y0bNzZrfwA7ly5d6oLaiRMnOp+DZJWbm6sef/xxN0pKSu64uQkbC3wHPPnkk+49zps3r1n6qX3/8T00ZMQYZyFWxotYsLt2zXNffQYNd9tgMQ41JJbnrVH3P9jwO2fwS6PVF198kQC08Xtu2ow5TptNW4pU7wFD3TZof+nSZX6wKYqiKIqiKAJtAm0CbQLt5gHaKPaYbHauBI87d3/ke5yGhoCMsCKJCrRl9i4CWb6I//ivHzsBQC7tQ9AOsFK3AcRMxus5GaAtM8OzFmRbj5H9l7Yj2m5Ewl3sKz9U4dh/RA2bn3dUoG16Z2MxAMBaLz7o7HWAWxMapxLy+dKZ7NLCQwLlCxcuJDUOGDftZW0D2igO6ncP2kPbKX4Z4IcNaxl9DjwnV1uodzaBdsvW4cOHPeC3uaCohJ1Dhw51+9OhQwd1Mfa9kqzy8vLuCqAdNBY3btxQXbp0cfe//fbbzQq0e/YeYLUKsd3XvIVLYt91a9WtW5959l27fl21a9/F/c6Umd2ff/658x1q0+KcXPf7sDj2nUpRFEVRFEVRBNoE2gTaBNrNArQlAJVFH4OzuhsytAFpowBt/IEcFWhLq4oogXbnzp932yRTbDEZoI1jYZ0RlAVuZiZr2xFZJLExiwqGAW0N1XV2vQa0yKC3jTnmDvtS7Q/u85Efd22Ax8aChSwamkkPbViN6Ex6ZGfDxx2+sAgcO3TkGHd+ALsB3m1zIot8fvDhzhYNswm0W65gxSHBb3NBUQk7X375ZQ/E/URAzdYGtIPGoqUB7c7dn/NkVKd7vttvyUSzEMHip15MLtlXxg82RVEURVEURaBNoE2gTaDd/EA7CNgBQiIAcWXWbWNnaMNTuXT/ASfb1gwUcNxbul/VnjzlsSAJAtP4gxznh3VIKkBbQ+mwY+UYbSna7hS01CCgcMs2L/SN3TPsUJKJVIG2nBNpAWIuVOjQEDodyJq9NNe9Jop6Fu8pcf+NDGjTFiaZuOqToW1m+YeFfkb9/OUBxTGHBNotV8iqraysVMeOHXMsPuB9HEVnz5512uh2n332WdLX1e3r6+sdQGoKXtPJAG3Zp7q6Ous5/YQM25qaGqdtdXW1A2RtEHfw4MFNlqGNucDvJPQJc4TPbTI6Hfts6raXLl1K6viwa4WNhR/QvnXrlqqqqkr5uUkHaGM8kVWNSPW6+es2uXYk+B6OIiwMum+9lJTyLy+KoiiKoiiKQJtAm0CbQLt5gDZsG6T9RJjFCLyno3po6wKIyXpoS5AI/2K/88Ofeu36jaqm9qQDqHWGMV6ltkFf6Vc95c3ZKQHtN2bMVU/16qOWrVgVOTMZY1S4dZsVjCITUHpyRwn4WqcLtBEnamoT9u8UNh0IHJ8uZJW2HcgQ177WTqFIkRUtiy9GDX2PJtC+IjzcowJt6b1t9ltaxxBotyyVlpaq559/3gNWdYwbN84KagExCwoKVKdOnRLatG/fXs2dOzcBiMssa0DPPXv2qNGjRye079atmwNSoXOxz7r0XzajY8eOnmzgHTt2qO7duycch+sVFhYm3IPMLJ42bZratm2bc6zZHhBWQ/EFCxb49gexePHijAFtfA/Dlzrq3MjzPffcc87cPvPMMwltYRFiA9UHDhywjjcsXqStiB73KGNhAu2cnBzHA9323MiCkRjv+fPnq1GjRjnx4osvOgsM6QJtW5HG7KXLksralgUj8d33qY9/Os6JBZKbN286AFt7b6MN3oqiKIqiKIqiKAJtAm0CbQLtZgHa0prBljGLAOiWRfEAC3/Y6SfuH9TIoDbbbNy8NQEGRgXa2DYra4Hbfk/sD2nz/BJ+Lon9MS99mc1ijDo2bS5y968p2JAAtLMW/Dx0vJDFiyzjKNm6OjNZBgpz+UH2qKG9qFMB2rJPWAww96NwpbzWf/6wU6Bnd1RbF23VImPDpi2+CydRQxeU9CsK6ZfN/u4yYxHFkoUunxezr7bCqSiwijDBuLnfNp5h7Qm07Vq5cmUgkNQwGBm0EubZQLQZgN0yG9i0DQkKAFM8exUVFaF9A9RFn2bNmhV6XpnZLYF2EDTXgcKHpl+0LWbPnp0RoI0xty0YmOOErHbzfIDDYffTv39/D8TFAkNYGz1OetyjjIUJtMMCUF3Pz4gRI1Ie26hAWwcWcm/ciPZWwq7dJW47LO7ahAWdhx7taF382xf7rqYoiqIoiqIoAm0CbQJtAu1mA9qmTzCyqWHngYxnwFvtBW3aT0jYB9CNzFt4RaONCXI18E4GaMvsWMSylasd0Id+AdRqOwlpnSFtPhDLV65xwDOgMTKq5T2ir6aNCOAtCmPCU/mSxR9bQnTAgzArDvMe/OD8mbq6yFFXV5+Wh7bcj5g5d4EDsTFO6zZu9hTb1IGM9HRtR+TzYs6BtF5JZizkooIf0A6zwwm6N5nNblu08YDkd3I9gChovy3DPqw9gXaibLAYoLJfv34J23v06OFkmkLIsDX3A1giIzgImvoBbT/YiSze48ePOxnXtnP37dvXydyFZcT69esT9vfq1cvarri4OAFom9G1a9eEbZ07d3YybZHJjXObmdz4N/q6c+fOtIE27DiQqW5mMA8ZMiShX71793bnxjxf0P3gfLWx734I0NkG9THG+j7lOTTQjjIWfkAb17dlw0+aNMmZG9v8pOO/vX7TFvXCwOHqw9j3evWJ2tj35zm1dv0mz3f2nLfDs+vP1J11M63x88oVuyUL4Lg+TsYDDz2qLlz8hH91URRFURRFUQTaBNoE2gTazQu0o9gz4I9mWI3IrNupb80OzaBd8u7y0AKMNqCNWJW/LvT8pk3I24uWhLaR2bayTxLQm37KJgyOAnnNzGT4gQcVksxESKhvA9rok7b8CIpFS5Y6CxjSWiadQpamp7WfVU2mikJGBdrmMyfHCXY3Uc8p4bfNuibd/QTaXtkyjceOHeuCUXgoS8Cp4Scgppk1DOsRrUOHDiVAyr179/oCbW0DgmzWYcOGJdhcaMFnWe6DFYUWnjUJTHF9neULwUbEBtltwBQwH98xEOxLbNngNhiOfcgoT1Z+QNvcjrkBTIfwnA4cONCzf//+/dZ2yODG2EHI+Dahtb7eBx98kNBOZ+XjmZgwYULCWGirl7CxsAFtZFrrOYAtiQ3QY5+5uDJz5syMfxbOX7io2nz/Mee74zttHva1D4Gw73s/aO/+njt0+GjguVGf4kTNSXX46DHHbkv+/wDqUVAURVEURVEUgTaBNoE2gXazAW0N8BZmL7Vm6AL4wmbD1m5D4Vb1g8c7J7R5/MkeCUBVwuN5C7Pd7QUbCn0LEH60d5/rpy0DNilbt31o7RPsRvz6VFK635pJ3bVnb/c4vwKAyQJtMzMZkLixPZSRra4tTHYW7/Gd65WrC6xWJ92eecEp2qhtMLQvuR8gTya0dY1fpnpzAG2/eXQsbCZMcZ8HM5vcDP0MI95bnhe432ZtI/eH+bMTaN+GwBJuAlKbQDY/P9+TmQv4aRZnHDlyZELBRXyH2sC0CbThAS1lQmuZjWu2DdqnM3y1TRMyuKWvtoaxJogFtEcxSAn9peVFGMSVftbw/s7OzlbLly9PCGzH7xc/oG0uNuDcyFQH0Nb3Y0J6PR7m+dauXRsK0HG96dOne7Zv3bo14XmRCxnJjIUJtJHpjgx0uV8+i4DYOqt/9+7dzqKHDiyYNIbgoa2//y5+Ys+exvg/2rHBKmxH7PdDssLv42SywSmKoiiKoiiKQJtAm0CbQLtRgbYEeYCi2s83ile09l7WbWAHkWlQKz2G/eC6GbDnSLZNawtkoic71y0xkgXad2u0FqDtB4HDlJub62lXVFSUcIwJpgFLw6B0stBa7rPZjYQFMpptIFYWmAzaH9bWz/ojLBMb25GtbtqNRPXDDisy6Qe0TXAPIC+VLNyXY2ECbWRgS+/usP1NoaLtO93vv0uXLifsxyLCc30HuzAaC2ipCGPVZ9Bw5xyduz/X5PdJURRFURRFEWgTaBNoE2i3EKCNV+NbEtBmMGyBbHhk0D8/cFik6PuzFx2/86bq397S/Q3e3PVnCbRbGdCG7UMUmdYUZiYvBBgqs3m1/7Z5TROGpwq0w+CxH1A2QSyyuAEumxtom9nzUUKPsTwf+qQ9ssOAtrwX2I18YmQppzMWJrCG77ZcPGkJQBtvhfhlaKOvg4aPcmF27orVKV8H5xoyYjSBNkVRFEVRFEWgTaBNoE2gTaDNaPkhLTGiBMCKzYc80wFf99cmv+EpEtoU1yXQbl6ZBSGRoW3KKeQaO04HLEkymaFdWlqaEaCtrVF0DBo0SC1dulQtWrTIDfzbtPwwQay0ukgX4qJPulCmGQDG2uPbL0Pb9JyGZzgWHfT94L+ljcnq1audPplA2wTTUTK0pSe3FsbFZtuSCtA2F0+aCmhrf3hTGO+HHu1o9dDGvY2NWych3sldEXqdm7du+b7tcOr0GdeWbPBLo2P3+SX/+qIoiqIoiqIItAm0CbRbE9AGeIY/aF1dXca+BHAuAm1Ga4r9ZQc9IH3A0JFpFa8k0L4zBOAos6jx39LXGFqyZIkHcu7atUsdPHjQsw0g04R3JmD289A27TCSAdoSioZZmUCA8eg7Aj7guuigBLEmSE0GaANSZ6oopM3ew3Zu+Enre9IFHFMB2pC5UAG4LwGw6YuezFiYwNqcnyCgjfPgd7EOHJuKbtz4hVP4cXFOrjp+okZdvXrN8cQuO/ixav9kD/f77/Xp3qKTM+bMb6gN8WA79XHFEbUv9p0pA77YV65cdccCliI/7tLTqY9RV3/WAeZXY98t23cUO+fQ51u7fhP/8qIoiqIoiqIItAm0CbRbE9DGa9QFBQVqw4YN6uzZsxn7Eqivr3dgDIE2o7UECnqOfm2yennsRLVi9dpIhToJtO98ARg+//zzCZnUGiRWVVUlFAHEd+358+ed/5bt1q1b5573yJEjCfv37t2bcaCNTOcLFy44xQcvXbrk6SuKO+7Z01CwD2/xSE9qHAswmkmgjdi4caNjF4L+pAO0oZycnISFg+vXr7vXRla23I/zpAO0q6urE2xMXnjhBScbfOzYsZ7ioMmORapA23ZejEsqAlAG0A56KwawGaBbzr/2uw6L4o/2JtWmx0/7+2aMUxRFURRFURSBNoE2gfZdCrRramocoI3XrJGddurUKQdAHz9+3AExyQTaoC0gOV6zBigA0MYf+ASeDAaB9t0qfN+ZEBOgcsCAAQnbATV1JrYJWzXsBGT2K1aYaaAt+wuobWYYI3r27Olc39yu4W+mgbaOmTNnpg20/Xy0hw4d6oH3EtCnA7RxP+PGjfP16NaLFLpPyYxFOkDbtEKxZd9HEbzRe/UZ5AuYZ2YtcKxCpHD9Ua9OigS0yw6Wu+02bdmmevYeYD3u3vsfVEuXraR3NkVRFEVRFEWgTaBNoN1aLUeQSY3XzuGNiliwYIGaO3eumj17tpo1a5YT+G9byP1z5sxx/kjWIAvnASgn0GYwCLTvdtlAsBkAptJCwgYa/dpJoJoO0IYdiukrLcGq43UczyQOCsBSnRlr3kcyQBtav3699RrJQFc/wAyZ9i5+sXv3buv5kgHaGvqOGjXKeg1z7PVCQpSxALCWcD6dDO1UgbYWoPWFi5+omtqT6vSZOlV1/IRjR9IYwrVQYBK+2bgefsqioxRFURRFURRFoE2gTaDdyoA2YDM8PQGj8Zr8hAkT1MiRI9WQIUOcgmADBw6MFDh28ODB6sUXX1RjxoxRkydPdkA3zk3LEQaDQLs1CMUZTfsRHVjgg9ewKcBGvCVjZgtryw8sLsI7WMosFqmtSPyAtlk8EG/T9OnTJ9DL2a9POA7wXto8mBA8rCgkvKElIMZ+WHKYFivaMzxZoI1xwxhIoa6DX/bzsGHDHIsXKel1bfbXBrTNOYDwttLKlSsdz3T4qAOYmxncKBApPdeDxsIschlWFFLPgw1om20piqIoiqIoiiLQJtAm0L5jgDaDwWAQaGdWly9fduyc4JWNBb2o2aTI1K2srHQCALaxs1ABpTFXsOUwobkW7gGFEtE3/DQLV2ZagP66P41xLfhnY27gSY2f8LrPpLDYAAAO2xhkSL/33nsJcywXCsxs9qYcC4qiKIqiKIqiCLQJtAm0CbQZDAaDQJtqxTKLQiJbHNZbKAKKWhOmP3q61h8URVEURVEURRFoE2gTaBNoMxgMBoE2RaWkqL7oNm90iqIoiqIoiqIItAm0CbQJtBkMBoNAm6KaVLCKGT9+fCDM7tu3r7pw4QIHi6IoiqIoiqIItAm0CbQJtAm0GQwGgTZFNb9Onz6t1q9f79iKzJw50ynwuXbtWqdYJEVRFEVRFEVRBNoE2gTaBNoE2gwGg0CboiiKoiiKoiiKogi0CbQJtO80oM2vIIqimlsE2hRFURRFURRFUdSdJAJtAm0CbQJtiqJasQi0KYqiKIqiKIqiqDtJBNoE2gTaTQ+0/1UD7Y8++kgxGAxGcwaBNkVRFEVRFEVRFHWHAu1/JdAm0CbQJtBmMBgE2hRFURRFURRFURRFoE2gTaBNoJ0ItC9evKgYDAajOYNAm6IoiqIoiqIoiiLQJtAm0CbQJtBmMBgE2hRFURRFURRFURRFoE2gTaBNoM1gMBgE2hRF3c36/PPPVU3tSSe++OJLDkgT6OatW+rU6TPqwsVPOBgURVEURRFoE2gTaBNoE2gzGAwCbYqiqPJDFWru/MXqnffed6C1nw4fPabuua+N+uYDD6mLnxCwNoVWrF7rjPkjHbqqL774ggNCURRFURSBNoE2gTaBNoE2g8Eg0KYoyq5f/OIX6ns/aO8AxbKD5S2uf2sKNjh969l7QMqwE5nWj3b8iXOezt2fCzwPgXbT6/28/Ehzk6q+/PJLNWLMeOcai3Pe44BTFEVRFEWgTaBNoE2gzWAwGATad4tOnjypxo4dq6ZMmaImTJigNm7c2Kz9AYhaunSp0x/ExIkT1ZUrV5rtPHejbtz4hWrz/ccc2Feyr6zF9U9n76YDO0tK9zvnQOwuKQ08tq7+rBo0fJQTV69e4wPSBNpZ/JHq2O0ZNf716Y0GtDGfmP+5C/h7h6IoiqIoAm0CbQJtAm0Gg8Eg0L5rdPjwYfX444+7MW/evGYH2kOHDnX706FDB+f5aa7z3I26deszkaH9cYvrX/66TSJD+8uU5r73gKGupUWQ3Qh192rIiNHOM7AweykHg6IoiqIoAm0CbQLtOxBo9yFMYzAYBNqUTUePHvUA7bfffrvZgfbLL7/sAdGfpGADkanz3C26dOmyWrTkXcdPGhmrOnsZWazLVq52tiPWrt/kjJ2pc+fPq6lvzVEP/+gJJ7P2x116qlnzFqpr1697jrt586ZanJPrXKt4T4l1Xlblr1dL3l3uXFdn5xZt36ly3luuct9fpbo/29e1AMFxum8Ak2fPnQ+9V20hgtj6wQ7rMfDXxvn0uRGwpkD//VR9ola9u3ylGjB0pDMGiB4/7a+yly5T589f8Bz72WefqdwVq9WCny9VR45WWs+HscNYoR+nz9R5tm/fUaxenz7TOb++1qhXJzljapsfrY8rjqiXx05056nPoOFq2ow5TpZ60OIAno/5i3NUp6eedeYWP/X1bO3k84Q5PFB+SA1+abRq176L0+dJ02Y4RR+lKquqneMx7zrWbdzs2y/MEcYPY4ExxPlxTw892tG5p8uffuo5HgsXGHM9n/c/2M55BnA8nis510HzTFEURVEUZQDtPgTaBNoE2k0DtO8j0GYwGATaLUe4/8rKSnXs2DHH4gMexlF09uxZp41uB0iW7HV1+/r6eisIKy8vTwpoyz7V1dUFwjVTAE41NTVO2+rqanXjxg0r8Bw8eHBGMrQzcZ4o91RbW+vcE+bYdk+ZHsdU9PGhwy7kDQpYkZgWEIDNfscDOgP0ynHX2dGIquMnPOfaXLTd3ffWnLfdNoCoUfpng+TmvOvM3AceetTJRrcJoNx2L34e2levXXMBqS3uvf9BB+pKoA2Qin0Asbb53bKtYSyOHKtytwOaB43Bi6+8ZrXpmDF3QeA8+d1b0Pw6tjSl+30XDXDecZPesLZ7c/a80DEPKgr53vK8wH59p83Djl2MnCP0J8pzdOEivdIpiqIoikoZaN9HoE2gTaCdGaD99fgHiECbwWAQaLcglZaWqueff94DjHWMGzfOClgBvgoKClSnTp0S2rRv317NnTs3AYjLLGuA2z179qjRo0cntO/WrZsDXaFz586pJ5980to3RMeOHT0ZzTt27FDdu3dPOA7XKywsTLgHmR09bdo0tW3bNudYsz0AuoZ9CxYs8O0PYvHixZHGPew88AqX/54+fXrCOfLy8hKuLbc999xzjt+4bZ7efPNN3wzQZMYR8zxq1Cg3xo8fr65evZrSs4is3/WbtqhNW7Y5GdIa7CELGEAT2xF7SvZ54CuyZCW0XbFqrTpWddwDJ01wDLCoLU2wD57d0Jm6sy5wRBavBJmAwZu2FDl9GTJijAtLC7d+4PYN/f/kk0uB9wm4rvu1ck2B73HHT9Q410MGNzLN9fWQeRwEtAGpkUm+r+ygqjhyVP38nVz3etgvx0EDWRtMlh7Pple4BtrItN667UPnOrt2l7iZ6whk0kshQ1yPLRYHAMuREY12AM5+QFvOL2LewiXqaGWVA7Hhb+0sIny0N6EdngETEo+dONXpL8YEY2ECbczN8rw1auPmIsdOJswnXXup68hakO2cQ8+X2R5jimxuPCuYV/0MYtzwb/0c4RlrDN9uiqIoiqJaJdD+RpzJEWgTaBNohwDtf4p/MAi0GQwGgXYL1sqVKwOhqoaYyLyWkMsGos0ARL106ZIVaIcFQPWnn36qKioqQvuGeUOfZs2aFXpemdktgXYQNNeB4o2m57UtZs+eHTruUc4zefLkhPG8LqwzcI4+ffp4jjl06JALtLGwIMfJdo3evXt7MupTGUdke5vjV1xcnPazGdVDW2ZbA1Cev3DRF4YCUkoBwup9AKqwlfjRE91dwGtadEil6qGN/r42+Q23v9evR8uWP1FzMhRoIxMfthe2/gAa63stO1juboflht/4AMxrAA3IK3Wmrj5hrCFcu8vTvcXYNEBZnTGNRQe0NwV7DrPvcn7RDnNmA97SDsUGtNG2dP8Bz/6bt26p+rPnQuc4KtCGTYgUwLved7z6hPVZoIc2RVEURVHNBLT/Oc7uCLQJtAm0CbQZDAaB9p0jGywG+OzXr1/C9h49erhF63JychL2d+nSxckGNrf379+Q4eoHtNHWth2ZxcePH3cyhW3n7tu3r5MRDCC7fv36hP29evWyttOw1czQltG1a9eEbZ07d3YympHJjXObkBj/Rl937twZCWqGnQdZ0iawLilpsLKABYhtjsysbR0vvPCCNVNbZpSnMo4A2uYcyn6mKmRMa6Bdsq/M9zgJZOGJjOfh0uVPnQAgxU94JmP/jDnzE4HkqrVWuwf4OQdJg8wg2GkTMsD9AGiQNJwNAtpesPyFk+2sxwEAWduRyPHEs/iTXn2c7fCylkAZ2eb6mui3n5BZr6+FedMg1xwbwHZ97x/u2h3pvuGLrqE6fNWTkQTaqQDjKHOsj4G1yKdXrvguCNjmWgLtZO+NoiiKoiiKQJtAm0A7daD9NQNqE2gzGAwC7TtAtgzhsWPHutD69OnTnqxbZPvCgxljZEJRWI9oIUPYBLR79+71BdravgK2FcOGDfPsmzevwQoAHs5y3/z5DWAS9hYSqOL6Bw40ZGLCRsQG2W1AGzD/8uXbsBBA2ZYNboPh2PepUfwt6jwEnccEzIDgWvn5+Z59y5Ytc7abQBvnxLzo6wFgm5nfgNKpjiPamc9EJjK0owJtCUnDAj7Rtgxg+D2blhaZgJ02zcxakBSYThZoA1z7+UXbMrRNcA2ArMdFZ0aboFvvhx2KXiywhZmhLWE+ov2TPRxbGCwe+GXDy/ndu+9AykAbFiWNCbRNexoIbxloj3IbsCbQpiiKoiiqBQFtCbO/RqBNoE2gTaDNYDAItFucACElsAaQNIGsBqY6WxlZt2ZxxpEjRyYUkluzZo0VTJtAG/7cHvhkQGtpa2G2Ddo3adIkp0+4RwQydqUfNEAtfLdNmAxoj2KQEjaNGDEioZ0fiJZe4/D+zs7OVsuXL08IbD9x4kSk85gLCBo+mwsSaIeMbRvQfv/99xMgmumZvn///pTHEYsgmzdvdhYnEIDwKCbZVEDb9Elu+0gHa2Af4KHNjsMsRolM48YA2sjY1VnStmzxdIG2De7r+5eFCE0wLDOJte+1hM+mFYn01paWHnKs/SCvLLhpxpQ3ZyccL+87yAImaMxs2dOZBtq2YxxboEHDCbQpiqIoiiLQJtAm0CbQZjAYDALtdOUHL8OUm5vraVdUVJQIkQwwrYsZBkHpZKG13GezyQgLAFwbTJYFJoP2h7X1s/0wLTmi9AHgX7YtKytzsshlJjzgtp4/eW1Aeti2hM0j+pPqODaWUgHaQcf5SXo+Sz/tsM9DKkA7e+mySBYeqQBt9HfUq5NcuIzCgrLoJ8azzfcfs46TBKvaE1zfn+16sqglst5NP+ygrGUIcPmDHbscqG9meJtFMuX8flxxJOOLAJkC2rZ7xThqOxcCbYqiKIqiCLQJtAm0mxZoa6jdmED7IQJtBoNBoN18QFv6KAfpgw8+8LTbunVrwjHITpZZxdrb2bymCcNTBdph8NgPKJswGdnHZoHE5gba0L59+xIy3j/88EPfsZTX1sU1TZn9Q39SHcemANpmMT8/4Fn80d6krwOoassWLthQGAl2+kFbU1evXXOBMoB5sgqDsxJYv5O7ImG/hNA28A/A3ADb6127kRFjxifAfX3vyDa/JgqVmmA9Kuw/UH7I7bs5nlXHT/hmirckoP3AQ486FiN+cz53/uJAoM2ikBRFURRFZQBoP9TIQPt/CU5IoE2g3WKBtpmlfYcA7SpVkDNNzc7JUzXn/I+rObRLFaxYqOYvmhGLLJVbsEmVV9cT6N3JUbdLDW8X+6O33SBVWpds+3pVXrxJ5S7Lcp6J7JwcVbijJPAZCoxztap0a57KzZlx+3zLYucrLlN1AdcvyBqmho8bpkaNG6SGT81RNZGuVaGyY8eP0u1m5HmusT3n1fg57TF56kQ1O/b8523dlfq9EmjfkTILQiJD29S1a9ec43QAjGYyQ7u0tDQjQNv0kh40aJBaunSpWrRokRv4t2n5YcJk+GdLaJUO0EafdKFMMwCZtTd1FKANf/Fu3bp5jnnqqad87WLMDO2qqqpIQDvVcWwsSRi49YMdvsdhfDT4fmHgcF/waNu+o3iPC0sBtqVvNLKcj5+oCYWdyDDW3vNBWlOwIdJ5U4WzcryW561J2A87jyCgLdv/tP8Q14LEtkjw3vI8F2hfv37Dsw+Z57ptVKAtrTnMNtKHGmMtF52kbNszBbSDFi30MTZv8pLS/Q2LLXtKrPetrVtenz6Tf4lTFEVRFHWnAO3/IbghgTaBdosB2n62I5kE2t+Kf7i+k2mgXbyoq/vHw/TiWivwzh33mK9/Y6+sggDoyEglygumqeGvJMLWzAPtIvWEM49d1fZT0dvVHcxTvXyLZz2msndUJNWPmtKFqr3v+bqq3FLbc1mr5nf2Hpt7MHyBpa54hvf8nWcIEJ54zuDooQorkxu3UUNj8/rKtBQWEAi0m1uApqY3861btzzHLFmyxAM4d+3apQ4ePOjZBhhrZm+aYNTPQ9vM7k0GaMuM8jArEwjAF31HwAccANKEyb17904ZaPtlQkcBeVHOs3DhQt8saVko0gar8W/zmoMHD06Yi1THEYJnNuA2Aj7kUexrwgRQrUEmfsLnGtAV/tbYJ7V02UqPBYYubOj07dx5B/ACal4UiwUSvD7SoasLRKXPNbJukflsky6kiMhakO0A08ux8UGY9y+hLPqXyviEwVlpnQLP6Mqqamc75gjZv/L73ga00afXJnuLSdqANfTR3n2ehQD9uTlefcJdXLDBadwDoDTg7tWr19ztKAqp58IGdjVAR3R/tq9rcYJzY3HAOacFvKcCtPGMIfA8zF+c47Tv9NSz7naEfP4k0Ma4IxPeGYtYv/Rz5DeONpsYjAuecTk+FEVRFEVRSQLt78SZ27caGWj/ueCIBNoE2nc90P5mYwHturIszx9isy1Au2BcW88x7Z/uoXp19m7rlbOLIDqDUaoXGTywtXGAdq84NC6OCrQr81QbA2D36tfD2NZGZVshdMTzDe2RsK2wOhFoZz/tvWb7GUWh1yt4pW0C0K6znhP96KsGyojd5xPGs3/PfcNUecRM7QaYntwCAoF2yxBAkFkYEJnUGj4hq1cCb8BcQMvz5897vJsR69atc8975MiRhP179+7NONBGpvOFCxecObt06ZKnr8hK3rNnj9v29OnTngxnWVgxU0AbsXHjRqd4IvqTKtD2O091dbUv0NbZ3n5AG/0+dOiQe70VK1Z49usMb/hypzKOgHuywCgCsDsTgnWGbQHOBKWAj8/1HRy4aCeBNo5/tONPXJBYe+q0L7B9eexEayFJ+EBrYGmGCYy3bNuesg90MnBWQnaEhMthQBvaV3bQc5xf1rDMipcFIcPm6fDRYwn9k8UqEUcrE98oiDK/YUD7ovHmg01m//xC3pcE2n6hC23aVH6oIvR5pSiKoiiKSgNof5NAm0CbQDt5oH2PgNp+QPv+jADtc2VquPHHQALQ9sDGriqvrGH/sa0zPJmqd1PGafMD7R4W2NoSgHa9yh3a8Lw8MVVkkJ+rVQUzGrL973k6Wt/lgsnAnCJxPu+bAe2zikKB9j33DQqGy6d0RnoEoP10lm//6w4VeDLUs8uiwfu60gagXUygfUcKBf1MOAr4OWDAgITtY8eOdbNKc3JyEvZ37drVgczm9v79G17VzyTQlv3FvJlWKIiePXs61ze364zlTANtHTNnRrcOiHoeHGcuQNh8v21AOyxmz57ttk1lHAG1TaCdKW9t3Peq/PVOhqz8rrNZi+DYZStX+8LBmVkL3CKJEvwiK9amtxctCYXQyBQG8DZhLjyhGxaPvnTh+e2Ci1+kNBYafAYBbYwBstHN+0d2OCB9x27PWK0xJKjWmeTmfSTe+1knW9q8FrLVNeQ15wltdJFEM37cpadzj0HPAgpG2trCEqT+7LmENto3HJnTWICIumgQFvK+9L1i3Ea/9nrCses2bgm9LhYSAOwl3MdiyZUrV/nXOUVRFEVRyQLt+wOAtobZ9xBoE2jfyUD7j+4moG1mXtuAdvmKQe6+yYUV/uAVbXfUppYlfqpKlR8ss/px11RX3N53qEzVRAHmdbXq2KH48bW1jQ/zTsWvhz5W1ka414bjj1XX+gLTYgG0fTO06+rF+FSomlP1jQ+0JRDuPM3St1o1/+k20aFt3S41UJ+v38LE8Tgn9g/NMfbbgHYbNX1rlb+VS/6gxD+0/YB2SHZ8+bK+gW82ZCJDuy4+vwnPPp7zSv3cVTTNs06gHQgwzTA9mgGWRowYEamd9INOB2jDDgWe1DagjWugT4DuYX0CtNY2GeZ9JAO0HSi6fr31GjarjiBFPY/tOHham0oGaAOIS/uEVMYRQNucm8YsFhmmm7FnBdYXp06fUbUnT6kLFz/JiAVKqpLZ3n6Z0VF05GhlZPsMFGqsqT2pTp+pU3X1Zxv1/gH19VhHtcnAHGFeAKFR9PH8hYuRr4fnTs4v7DmaUxpo316s+NLJqsZ9oY9+djUURVEURVGtAGj/EYE2gXZjAO0/bCSg/ffxD0KTAu2arRPjfyy2VbnFm9xMbS+Yq1W5/QSctAHlylw3g/uJrHC7h/L8YfHs14Wq7lyFyn6lIaO3jbCLKM2flphJi2uMy1Lltn6cKlHzxbncaNdD5RWXqIKpt/c9sajIkolrzySu2THDzT5PALO1u9Rs6/W6quytZYn3XZilnmhny1pqq0blbHKvX5jVwze7ab6em1NlKntcV+sxbZ4epgoP1TcJ0PazmSnN6REdaMfOp72zn8gpsRZwnNzOb54kfO7RML4J4NsC258epEb1axsKtOsifYbCgbZc+El4puPPZEE8G70XxqG6SA0XXt7T9WJRbPv0oT5+9rFnPbe0ikC7iYTijLbsX8SCBQ1ZrVIAZAUFBR6LCmlVMXfu3ASfY7NYpLYi8QPa0icbOn78uOrTp48VaIf1CccB3svifSa8DSsKCX9rCbSxH4USTYsV7RkeVVHPU1dXlzDOtbW1gUAbfd65c6ebPY82et/kyZOdwp/JzK1tHG1A25zb1irpkQybiijFI/00b+ESWlG0QGmgHbUAJkVRFEVRVAsD2v8QZ3mNAbT/kECbQDuTQPsPWijQfiG1rGIBJRcBIu5y7RNMoB2arXquxIXhbV7JjV6AsnNfNdzIrtVAu3DqY8GvrrZ71WsrUVsUUKDQgIdZRZHBZXFWVzuYPZQXUMDwdozKL0uE+KH9qlWz2/kf40DNuhI1KvQ+u6rttY0EtM+Vudef7wNxG+YvQhbyuSpVmJ+r8vLzVGl1MDQOtBwZmqUKc/o2+G3b7v9QrpifogbrlBQsR7yZ6G0t/t4+nui2RYgZRZ7ztR86LOF5dj6X1ZusizzmAkneIQLtphQ8lFHQTxf4M60s/IRxq6ysdALQNWq7VAUoCBALn2kTmmvhHk6ePOn0DT8bO0MX0F/3J51r2c5z/fp157/XrFnja+fiB7QBoHV2PcYEvtz4iWtEUVOPI9UgWFW8MWOumj1vkRowdKSn6KXN05tqXqAN2xMCbYqiKIqimhFov9BCgfYfEGgTaKcDtL/aCED7b9IE2t9OH2iLrOvOE29D6roiH6BdpWZ3DoN70S0a/DJVAfCyl+WowrIqdazwVQGu+6q84jJVB3uFg5vUZAHA20wtsGSRo5+vxs5T4bSpOVikZvdrmzLQbuirhL0VarI438CsPFVeW6vqaivU9hWvesBiQfXt67hjGNs2fUWROqaPz58m/Mlve5CXlxap4li4bdoNU4XFRWr7jqLYdWBZMa1hDPpNVNsPVty2McG9Dm0rsn53NV5RSAdERyjw2G5iSgUt66rLVGnsnnOz4vYg7W5D6ryEzHMJnxeqmuoC99oDV5SFLFDEnpunw4pC9lWFpSWqtHSXJwrzs9RAkT3dflxeuFf4uarYPe1SBW4fHlPZhbG5js1r6aFaX/uUgeMmqtzCXc75C4VF0BNTF6rSytrbz/mhIjVfzL3NGohAm2pNCioGieKRNplA+xNm895xwsIBAKn5PQovaJtXNNV8enf5SmduHunQlUCboiiKoqiWBLS/nSbQ/ptGANpfJdAm0E4GaH8lg0DbhNrJAu2vZxJoN3hii0xOP6AtMrkbrDqCgXZdUkC7rcreUWW3l7ivr6XIZJXHn9nJ/hVZt07mtg3gD80c0K4RwH3gsl0Wm5Jp3mtJz+l20xKuIz2dcw/WJ9p2GDYbcvymF5uAVxT57JcTrZhkqkDbFtVFDX7XsRieX5aCp3eJNzs5/jw8kV8R4dmrF/82/b3F2AzNdYpbZocC7SjRVx1L5v7KsnwsfMzr9lXbq7373ez9dhbv8nO73OesfQTrHwJt6m6WXzHMzp07O77iBNp3r+C9nbtitVPoEoHilTd95pxqPlUcOareee99tfWDHXyDgaIoiqKolgq0v54i0JYwO1NA+ysE2gTaTQ20/yJNoH1vRoG2yJ4duKzEAjXNDO0GwNxmauaBdgIkP5TTAItX2GFoXekMT/G/UlGYb3Khj3+wOG+6QDvvlbYucCw/F2JF4WQoywzt2x7gxciqlhC8tlbVVFepujrLtY2+1YgMbXgmZxcg47veUywQ56qprm3cDO0Ej3CZbR7kYx3RDsdivTK9sCz02TtWMMy6QCAz22/7UYt5Sgtoo/2rdl/3wOfXHG/vdW12LnjjoKAgT20/aO6rV6UF0yzPOIE21UphWUVFAszu1q2bk7ntJ1noE57ZeK4piqIoiqIoimrVQPveNIH2XxBoE2g3BdD+3WYG2v8Y/2BEBdptkwPaFWq6Bqv9DPuQcw0e2vNL6+0Z2lkRgPbTyQDtxxJ8h+uKZ3i9hdu1VffEok088N8eq5JYnyR09veNjt17u0wAbembfDvDvM19Df27HYaX9Sn4htsLAj7Rb5Cav6LAsY7wvbbZNz+/8M5d1fAZM1ThjpLkQHK6QBvFMU1bl6m5qcHshL5VqcKcQQnjGbiYIp7Z9qLIaMNCxKD4QkRteIZ252mq/FS9qsOCg4zKMlW6NUcNlHM9Li9zQDvEqqXm0C5VsCJLTR83SPV6+rEAn3gCbap1ClnY8DM/fPiwA7fhUR6mc+fOOcci0K6xPc0piqIoiqIoimoRQLttEkD7n+LsrjmB9u8SaBNo36lA+75UgHa5yGQeuKxIlcKruRixSxUXyuzOPGdfeW1Uf2yZ6TotCQ/tRIAqs6+jhBdot1F51RdDoXu6QDu57N2GeywvzFK9Ogfcy7gcz9j5Am0H2pap7HE9Aq+bW9b4Gdql+RMTr1ucef/m7VldvcURQ94OKBhnwGsr5I4AtMMWaOp2CYuVaOMXCWj7XLfuUIEXoocWPiXQpiiKoiiKoiiKoqgIQPs+Am0C7TsJaP92BoD2n6UItDXUjgq0v5kO0C5d1DUpWNzGAX9eW4aaQCAKWLgpQj8CgLawhRi1rMAB7iiGaAYK8wHE19TJ+zKzd2UGeokLHiXQnp9KhrYo8Jjn0z/0DYsCpQerrAUPi7fmqfkzhqknDDjZS9jABAJtYS9SXlakCpbNUKOGdk3wdi4913hAuzDLC9RRHLPmXPIgtHTZMNW+c9dYDLN4psfHrGyhD6y1Q2m5MAIAXmO1IYmSoR3+xkGDP3vA85cs0LZdt67E40/ept8wlZ1foErLylQNLGdONXwOCbQpiqIoiqIoiqIoKiWg/c0kgPbfCb6XLND+swwA7d8m0G59QPu3MgS0/zQFoP23RpZ2FKD9DQNofzd5oN0jKaCtoViDVUOiRYgJG3st2pUW0PZ4fPt4aF88V6EK83NVXkGRA1DLVzRkno8q9MkOrsx1zyuBdm4/nRGbZQWXhVMfS+hroc7+bTfMUoDydhwrLlB5sT5uL6tyrlNcmKtyV+Sq0mq797Q77qIffkC77lCRyluRo/IKLWNdW+Kx/8gurW0UoC19qu+5r4cqiJoNHlKktKDSD2hnNcxxQVkECFymRmnwO3SimtzP9gZBJoB2bWKR0kYC2nKxp5cNWNdFsQci0KYoiqIoiqIoiqIoA2h/1wDa30gSaH8tzvqSBdp/miGg/VsE2gTayQDtP2lEoK2hdhjQfj4jQEpYMsze4YWTNYWvNthizChKKEbXkKHaRuWW1acHtEURSmQY2wBraU4Pb7ZtdZ4oRjjMUqixNtbHttYM34a+9FDFdYlwvb3FTkKOR68cC1QWfuT39Fuo6mLnaTi+xDImZWr4fYlWE27fDNheMC44A/tY/qDAwoJpA+1zor+xPvj7llu8nyvLVPmhiliUOdn1ZjZ1m1dyrdBYzl8UyxG/BRzvIkkUy5GsQKB9bKss0PmqOpakh7Z3/kKAthgnj8+9+7noay22Wld7e7wRnuKhlv01lgz5sPYE2hRFURRFURRFUdQdCrSfjwC0/0VwusYA2n9CoE2gHQVo/2YGgLafj3amgPY/NznQFrYhs00IKmC3AwUXFagap1BemcqdKm0uogG9YKB9UZXnD/Jk/+buKIlfr0IVLhOZwW62bb3KE1D9nnaDVEFpmaqrq3eK580f2tbXX1jC8Tb9pqnS6lpVd6pWlW5d6LlnT189QLeN6jUjxynqWFdXq46VbVKThcf2dCwOnPNaRQxflKfKK29fB/2TYygXDGTxzNn5m1Txjtu+5qXLBKjtPEwVFJfFxid2vtoqo9+PRcoYThZoy0zhe15ZqErL7LYrTpR6AfLsdsbYWMaz/StZt+chPp7TPQUnzQWLAAgssvL1HBbWXkwOaMfaZOfnOdn23shR01/pGgDLowBt2LTkqu3FRar0UG1SGdp4xgvLKpwxqqksUbkzvPC+/dQ8t31x1mOGjZD3vHJ/+6zg/bb2BNoURVEURVEURVFUKwDa/9yIQPuPBW9MB2j/JoH23Qe0f6MFA21dGDIK0P5WkwNtBzIPC7UoiZQNHAFoOxm5r7QNvZ4nk/zULg8UjVwwr3aTyMKOVtzRtFnxDeE5HmX8HOBaac9E9wLyBjuNwPuM4GfutaqIZpmRlBd7O6/Fx3wB++VzVlOcFeF8bS2FLoN80I0CnkNzfAuF+gPtiH7z43JCvbZt9immX32Yh/bwJPqkzyHny2ZFku5+Am2KoiiKoiiKoijqLgHa34oItG0FIVsS0P4NAm0C7VSBtoba6QJt7aNtA9r/0RhA2w9Ml2/NSihieBuc9VV5pdE9lD02H74AtV5tX/aqFTa36feqKjxouV5dmcoeZ/MJR4ZzgZrdzw7laspyVS/LffWamqtKXdCa2Ne6yiI1ud9jVvA6OWdTQgFNjJ/tOk6fhk5TxdWJ9zN7aFdPlrFr6RLblzvOxxO9XdfY/SbhoVynLVJ6+BZl9LO2CI2nZxh2KY/5+nvXHdrkM56x8XllmtV/3LG80YsfTydC4GMFr9oXQBKsRVIB2m1V+36DVO7WsiQ/b/WqMGuQaiOehYFOMVC//shnbpMa3tnvM1imCmd0TQDaDR7lyCIvCfAw91qV2PYPD8hCJ9CmKIqiKIqiKIqi7kCg/R8+QNv0z04VaP9PwQkJtAm0IwPtX88A0P79JIC2maV9ZwDtJMLjuVtb3+jXq6lO8nqwqtCev9W1LkTUsNAvy7ThOhVWL+Eo1yuvrArN1IXVyDF9ndpaVXcujfE5V+/2+1js2rBmaernIeOB8awsc+8prfG5S8N5hirtn4maSn8/bBaFpO52ff7557HPxEl1ouak+uKLLzkgzaibt26pquMnVO3JU+rLLzkXFEVRFEVRVKsH2v9dcMMoQPv3MwC0f51Au/UC7a8mAbT/WwSg/dchQPsfIwDtbzcn0L4zozYUaDMYDAJtKjkBVK5eu17NeXuxKt5TEnr8uo2bnWO37yhulP4cPnrM+Z6/9/4H1cVPPml+qHvzptpQuFWtXFOg3s/Ld/5t06dXrqi3Fy1RC36+1BpZC7JV/dlzGelTZVW1cz6/a+nrYWEgE3PxzQceavS5uPzpp844vzR6vOrc/TnVsdsz6sddeqpZ8xaqs+fOB7Y9d/68em3yG6rHT/urAUNHqp69B6iSfWWRnv3dJaVqed4aJ/yuU7R9p5r/83cCxxuxdv2mtME/FhHQp9enz3TH4aFHO6pR4yapjyuOhD6r6Genp55Vw15+1Wm/pmBDxhaGcG+HDh91PgdynnC9N2bMVWfq6pP+XMjnNWyeo4xdSel+tTjnPec5QN8e/tETznPx7vKVTl/8dO36dTV/cY7Tpu0jHZwYMmKMs5jTGCrdf0ANfmm0cx1cE33EOMkx3FG8x3029+47kHCOk6fOqGUrV6tV+eud+OKLL9TxEzWh3w0y5i74ubpwsfm/ZymKoigqg0D72xGA9j+GAO2/jgC0/1sSQPurBNqtD2j/WhMD7T8LAdoSavsB7X8IANraR1sD7e8QaBNoMxgE2i1PJ0+eVGPHjlVTpkxREyZMUBs3bryrgTZgCr5b+w5+KRB+3br1mQPXcOybs+c1Sn+OVR13IeqlS5ebbVwAuADBpDVQENjV8Dcoij/am5G+mf1qrOs11VxUn6gNvRcspCQ77u+8977vM7/1gx2qzfcfCx0v+fkIi0c6dHWgYqr6xS9+ob73g/aB1wC4t10DsFZ/Ns14YeDwtPqldfXaNXX/g+0C+wf4KlVx5Ghki7N0n9ewzyAWyQ6UH7I+f3jG/doBLGfy+3bClLcC+4k+4rjeA4Z6ni28vSI1fsqbCd9NS95dnlT9kEx+L1EURVFUCwDa3xFAW/pn24D2P4QA7b8SHPAvAvyzmxJo/xqBdusA2r+XQaBtKwwpgfb/DgDa90QA2r0J06IB7flx7+H2BNoMBoF2I+rw4cPq8ccfd2PevPTh7Y4dO9T48eMdSD5mzBh19OjRFgO0x06c6ny3IuMyCHzduNEA3JAZeLcCbWSf28BPUJ90vxF9Bg13MmRl9B8ywrHvyIRWrF4beC3Ec30HOzDxTpiLI0cr3ftBVjag3KYt29SoVyd5xh/ZwVLokwSsP38nVxVu/cADqj/ctdvTBhmwflDWL6t76bKVTrauOcbImpYAGtmu6QJj3XeMObLTN20pcjJuZT/Nzx4+wz/p1cfdj88zICwy1fW2t+a8nfY84fOPsQMYHv3a685bC1gYQDa5CWS1kD0/aPgo6zOK8ZOfrfPnL2QEaCPredqMOU7GPMZPgmH0Xz7LWMB7tONPPAsGeM7y1qzzgPDaU6cz8l07Ysx4zz2v37RFfbR3n1q05F0XquM5xLFDRoz29AHZ1/JZkc+e/ozuKzvofNfIcZbPgfl9gUx2ZHpTFEVR1B0OtHtHANr3BADt/x0AtMMKQiYLtH+PQPvuBtq/mibQ/t0mAtoSaptAW/pom0D7mwTaqUS9KpgxSA0c2ldNzy/jeDAYBNqNJsBmCbTffjt9GJSXl+c5Z0lJSYu5Xw1IH3joUQda+elM3VkXuthegc+EYKfR3ED7veV5LgACVHond0VkoI1jkN3dFPPV2NeS9xRk15CuAJkHDhvlAXZa6zZuaQDG8xd79sH6Qu+D5YIWFg70dnORRmbxwo5izbqNHpCYrGCTYgOOqeizzz5zICMAp2ldgs+F7qd5T3JB4OWxE922eKNCt8nU5wnfAbZFL1ho6D7MmDM/0rkAk3VWOUBvunYtyGA+fabOum9xTq41Ixm1UPwWJGR2+cLspWmPHWCzPh9sWgClzfnHOJQdLE8A2ghYqWjBWiXqYhvqETTVdxNFURRFtRCg/U0foC39s02g/TXB+RobaP9umkD7Vwm07z6g/TsRgfYfZgBo/02GgPaDBNoMBoNAm0C7OQWAZlpqAHzA8xmhfaMl4DQzFpGJOfWtOQ4klP7HQQAFUByZxIBaADzIsJV9aS6gjaxJ2DQcrz6RAISiAO3G7rcE2sl6WyczT/qekNUKaAqfZO0xDHuaI8eqGn0usMCis5aldYa0ZGjXvovHjkHCS4wR7lkL2ai4d0BNnAPQV2e6Jgu0ZXYvbEkyYevhJwk4MR9Xrlx192UvXebeK4CzDaDastUl5AewhUULoCmsT5KVHIuomeq7dpe4fQMQ9xOy9XPeW+7077ZXdPLgG9nftoULvXhljp055rD8AHDOxPzZrhV0PD5v0nYE+5BJnuzbI03hhU9RFEVRzQi0H8wQ0P6bDADtP4wItH+HQJtAO8hH2wTaf9BIQFv7aNuAtvbR/rpRGJJAm8FgEGg3s65fv64qKyvVsWPHVF3d7ey+6urqSED72rVr6uzZs057tMF/+8GgnJycpIA2zoU+6X6lm70YJBuoRoEyDUt0AUg/2IyieX7+rDgWHrWmdNZzULvm9NBOFlbLYwCrUOQQxdZSgYNRgfZ32jycVMZlsvMkbVT8ArCxMSV9pWX2sQTd0k7D5scdBKqljU6yQFtmRm/cXNSo4yABp3yTAtth6WH6LGPcTE9tP9AsPdlThZ543rWVC4rGRrkf3W/cDxYW/I6DTUa6PuXIetbnQNFN2+KQ7bOdzuKR38IM7icMysv5xnjqMcAimz4XPv+T35jZohbbKIqiKKoFAO1vGUDb9M+WQNvmn50poP0HEYH2bxNo3/lA+1eaAGj/fgsA2l8XQPu++Ifup4RpDAaDQLtpBeAzdepUD2RG9OrVKwE+m0D74MGDqk+fPgltdYwbN05duHDbD3bnzp2+xyH69evnATTw2u7evXvCcR06dFCFhYUJ9zBq1Cg34NF99erVpMdCevcia1pDJNgoSBCm4Y60PJCv7OP4FavWOgBFFiczgZW0fQBkgd8vgFP7J3vc8UDbFuMmvZHRzEg9Dxhv2G7ANxpgWYaZ8ZrKPJn3hAxpZGUjg90vA7qxxt60ffjkk0suQIWPMwRI2OXp3gnj75eZnC7QnvLmbHdhobGfVQmo5ecP94y3HLAd/dGat3BJwjj4+WhLT/ZkPneA5whAVunTHDTeWlj0iWLnYVpvhPn8a+EY9A1vlwBg62fFfF7l4pDNVgf+6Zn4PpLPsV+xUr/7Rnb6moINbludeQ+vdPiEE2hTFEVRBNq/9NM4W7tPAO2vtwCg/ftNALR/hUD7zgXav5UBoC2hdrpAW9uO2ID2vRag/b1Y9Lpw4cJVAjUGg0Gg3TTCq+PPPfdcIGj2A9rbtm2L1KZTp07qypUrKjc3N/C43r17u6+Rz5o1K6m+3LhxQz355JOe/cXFxUmPB6CPhmWAUdKGAQFYBXCmrQ10hqG0fQAwOn/hoi9E1Rms8nV507oEYF33424C2kGZ6ukA7aCQmaypzJN5T9LuA5J2FlEAXSqSgNq0aZCLIhre56/b5N5jXf1Z91kyvbczAbRlRjIWLBpb8KXW96sBvrkYpcGwzFL/+NBh9/PmB4NNoB22+ILnySzYqWN53ppIb5Po75Kwgosykzsq0LZlp+t7w3MrpUExwrTQkTYq6WZoy89SkL2KDWijYOTZc+dvF0V/sofq1WfQbS/wPSWuhzuBNkVRFNVaFfudeRVMLc7WTKB9rw/QlnYj6QLtPxVcMR2g/VsE2q0HaP9mRKD9lRCg/ccBQFtDbRNo/1USQPufLUD7GwJot4lF9xMnTlQSqDEYDALtplF2dnYCKO7SpYvq27ev89/t27e3QmQbQEaG9apVq9T06dMTzrl79261YcMGJ+v7qaeeStgPqI6+AF6sX7/emi1uA+8aWqM/6He63twSGgGeyOxJDQgBvTVg0Rnbp06fcY+ZNG2Gs1Bw6fKnTgD44Sf8jWWhOAkQbSAwzAKgpQJtQER4MwMwAbbCexyF2zQQSya7NBmgDXAHX2sZ6MeocZNcW4NU5smEcCbslbA5U/eVAHHnLvCF5rJvyO6XgHnTliKnPxr0Bnk6pwq0NUjU129M7Sz+yL3W7cWkL6z9z1pw+7tEzws+XxKM+vl8b9m23fFSx37MpfTn9vu+kBnZMrA4EiYsmGngfHux7IvAa+GZ7P5sX6d/AOlhzxrGRD8LMvAGAmyApOCprvfj/NIiaNnK1ZGta5IB2vI8+Cy++Mprjie9jmkz5qjPP//CnTdzXqXdUN6adQTaFEVRVKvW5cuXK8HU4mxNA+1vWID2PycBtP/KArT/h+CENqD9xyFA+ysRgfZvEmjfGUDbBNuZBtq/FwK0/ygAaP+5BWhLqC2B9tcsQFvajvgBbZjV/79YdN6yZctOAjUGg0Gg3fiCJYcJpTVUdv74P3bMya62Ae2KioqE7GoJV8xsbAmXAb399qFPEkzDXuTAgYYsPjMrvH//22AK7cy+ppKhDWmLAmR5IktbWxQMGTHGyaKsOn7CBSw6i1d6CIfF4JdGOxBUAji8Ln8nwJd0+iQtITIFPyX0t9kkmEplnsz7tmWn6uKLjVEQEZYo3j594QsIAVHHT3nTk0kun7NMA20J87EQkE6xwDBVHDnqWVi6evWa9/tMZGjnvr/KsZ+RhSPlYlUmFx5g21FZVe3MA7KydcFF06PaJiz0NLb3eO3JU04xVywuoZipzNJGgUgJzEeMGe/ZP/716QnWNdgO+J0JoC0ztDF/cuz0POGtHXMBUS5kYV/UBUACbYqiKOpuVuxvqp1ganG29u0QoG0rCPl3gutJoP2XggP+LyM72w9o/1EI0P69RgTaNtZKoN3CgPZvZAhop+uj/TcG1A4C2tp25F6jMCQ+bP8ai8cmTJiQS6DGYDAItBtfhw8ftlp+SJnZ0hpo4ziAaMBm+GifO3fObYMxhIe1H7TOy8vz3Xf06FHPvkmTJjmgBcAaAWAmfbUBvD/55BOnP5s3b3a8tRHoN4pJpgNJYU2hM2PxSvt7y/Oc/0a2os6qhM+2CWkQbR/pYA0NYEygXfzR3rseaEPS0iOdLE8b0I5ig5DKPEW5b20bkekMbQ1lNSw3P5+QtNVA9q5pSyKfMzy7mQTaWNxpbLsVCEBWw078hI2KKWmvgSxrfby2JZEZ2nKxItMC4NZgPeh5kP1BlnFYNnimpAva2opW4u2TYS+/mrC4g4U8vOmQie8jaZEjLWMwHnijAIt7elz8gLZ8c0YX6iXQpiiKolq73nrrrVwwtThb+7ZREPLeAP9sE2j/reB86fpnZwJo/waBNoF2MkA7Ez7afx9SGPJeAbSxcvTdWDz0rW99a9jhw4crCNUYDAaBduOqvLzcA48XL070162srAwsCgmQDZA8bdo0B4j7+V1HBdo2u5Gw2L9/f0bHRWeCAop17fm8A3Pg2wrIh+3I8gSwkhmOQZYUUQAigHnC2FdV33VAGyBKg8ZMA+0o/UllnmQ7v4J5tiKhmQSPyH7G8xL2HOmQ4FoCb70Akymgrf2s8Rk5U1ffaIBYFjJE4cUwQOy1JfnSBd5RMtUzIb34FbTQgu8O/VloCu9xOU4Yl6DnFR7a7y5fqXJXrFYFGwodGxudTZ6uh7YsYiqLd0ppD3g/oI17qKk96Sx06LcCCLQpiqKo1qz6+vqK7373u8PA1OJs7VsCaN8bUhDy7zPkn02gTaAdCrR/PSLQ/p0WALT/PgRom4Uh8WrEjydNmrSMUI3BYBBoN65WrFgRCKshjIftmKiFG5MF2ua+ZM+dCUkAiIAPM7xuJYCSVgYmKLVlW9skLRJsxfp27S4JhS/oU9H2nW4APLVkoC0tP5obaEedJ9kO4NYEqhKkZgpoH/y4wvOcBd0bnk3t+y0hoJb0uD50+GjGgLZ8fiU4zqRw3/oaCIxLEKjVRR9tmdzSI9ovUx1FGddt3Kw2bdnmxM1bt9J+Lv3gr4beTsHKiiORzotCjshiRt92FO+JVHQyCPxHfV6lXQuKrKZjLSMLTMLL23YuuUBkA9qpfhcQaFMURVF3q2bOnLkMLC3O1KIWhPxHwe2aE2j/TkSg/esE2i0HaAcVh2xMoP3VJgLa/58A2hpqBwHtb8dXktr+8i//cvfc3NwtBGsMBoNAu/Fk2nvYgDZ8tG3HICvbBMt9+vRROTk5DmAeO3ZsSkA7Pz/fs2/QoEFq6dKlatGiRW7g38uXL3cCnt8nTpzI6LgA7EmI9vLYiQ7QAYjp9NSz1sKGMvtTexfbYc4XHkj0k159rP7D0s82CL4gi1LC92QgbTqw3y9TGbLZYuh7GjtxaqN5aEcBVKnMkwnC4a0uJYsw6uKDaX0uK6siw2wtZLrangE8s/oZw7n8srw1GNdjU3bw49BrfrBjl9U6IlMCMNcWIlhIOFB+KKk+yaKekPbGR/hlecvPUxCMxvPhB3WxXX9PYMyvX79hPUYvQkT1HsdzBdsZ3T+AZb/nFyDe7zlEYVS9MBfVekUW48yEtYyE+fAdNxWWoU2gTVEURVENKigo2AKGBpYWZ2rfDgHa/yQ4XVBByEwD7a82A9D247AE2k0MtH8tA0D7KxkG2n8ZAWjbbEf+j4+PNlaS/m8sHv7bv/3b/oTaDAaDQLvxZHpo9+jRI7KHNsC13A64LJVMFra0DIkC2T/99FPHtxsB2xTdZ3hmA24jampqUgaLstAdYuWaAhco6YJ7Nni5dNlKT/E+WCVowbJEF4yTkExmzyK7FFAR50QGqQRrfvBFFkfLVNazqeMnapzMUGTH6usBMMLfGVAaVgT6XrWdwdgJUxwoeunyp44vLwrToaimhHF+4LsxgXaq82R6b2uAe+36dU+hy6iZtn5CX+RbAACsHx867Iy/DPgQS0lv8o7dnlEXLn7izEXWgmxfwAudv3DRsTbZf6DcgZYazC9a8q5zTlwL1jc2uAqPefNNhUzJ/AwiOxj3bI4DQkJdubiAccQ9QMhmjgKC5ecp7HOH/QCzWORBgUo855h/7WOufdht30NyvqICYtNSxS+7Wn8GYZmE7xdkqWMhBwsE8JvW42MrRot7GT7qVcdyRLcxx0QWkkxVWAyT/Vic85672ALrGmmJQqBNURRFUcEw++/+7u/6g6HFWdp9Pv7Z/yeCf7YNaP9lhoH2VzIAtH+NQPvuBNq/lSTQ/gML0P4TH6D93w2g/RcG0NZQOwrQ1lnaXzd8tPHB+04sHojFD375l3/56UmTJi2npzaDwSDQzrwALLp16+YByLAR0ZCkqqpKderUKQEwA5i8/PLLnu27d+/2nFcWbkSUlpb6Au3p06c7kBpjf/nyZc8127dvr/bs2eO2PX36tKfPOPbGjRvONZ988knPeQG7U5EJjqRNgwTQJlxBlqWEm7YwQSna6Nfvo7aRWlOwwXPs7pLSjD4jZlaoX7w5e557vLYm8AvAcPiUZ0LJFoVMdZ5MoG2LTBQalAXzgsKEshh3maVtBqwdAF1NmRn+Ua6lwafe//r0mRn/bpJ2JmHPkjnv2z7cGXg8MuDDnqcw6CkzjP0CbzHY4C/matSrkxKKd0b5LMrPVhjQDuufrciotASyxZ6SfRmb4yifqZ69Bzh91PcdFWj7fRcQaFMURVF3i+CZPWPGjOVgZmBncYb2HSM7WwPtMP9sCbRlQci/FjBbAu3/7gO0/8QCtP8gSaD9WwTarQ9o/2YA0P5dH6D9+xag/ccWoC2h9v9MwnYkCtC+1wK074u/JoEP5H/GotM3vvGNka+99tr7hYWFxdXV1VUXLly4SujGYDAItNNXbm5ugnVIhw4dVN++fa1+1TpjetmyZZ7tAM/z5893MrVNsIyANYgf0DYzxG196tmzp+rfv3/CdpwLAtQ2r5uOt7YGVmb2qQR5NnhsZlebkHRm1gInk1MKWb59B7+UcOzseYucnwBjNvjiZIy/Pt0D0DINaSR8CwrtSYzjdaFAW2ChAFnQmdLGzUUp3Xuy8yRBGObFbAOYnAnvbNO/3S9sdim4J9ihmMciYxiZ8jZpa4dkQb1uB0CMbN7GWGzTdiNh0NhmfSOtR+SxZmZ7wgLRuo2RPk9YkBk4zH/hBm9y+PnZy3tLZhFE2hBpIO33zMFjGzDYD+rjLQVbW2RHy8xpHeivLVM/XeENARt8Rx/fXrTEtU7R30HI5A77Lgh6Y0AWdyXQpiiKou4kxX4fXr106VLVnj17it94443377vvvpFgZXFm9kCcod1nAdr3RgTaUe1G/qcBs02g/ccWoP37PkD7dwOA9m8SaN8dQPtXGwFof9UCtP/IArQz4aP9D8Kfx68w5DcMoI2VpfvjH8zvxaJdLDrGAr5AP41Fv1gMjMXPYjE4FkNiMTQWqOr6YjxeisWIWLwcj1GxeCUWo2MxJhZjY/FqLMbF4rVYjI/HhFhMjMWkWEyOx+uxmBKLqfGYFos34jE9Fm/G4614zIjHzHjMEjE7HnPiMVdElhHzRLxtxHxLLEgiFqYRixgMBoPBYDAYDAaDwWC0mkiHISTDKmysw+QhkpWYHEUyFs1dNIeRbEbzGs1vNM/RfGe64D7TBA+aEmdEmhdNijOkCYIrvRZnTa/G2dOYOIt6Jc6mNKcaEWdXmmMNi7OtIXHW9bM4++oXZ2Hd42ysXZyVPRBnZ98xgPY3AgpC/qMA2pnwz/4zi93IHwX4Z2cKaP8qgXbTAW0/sJ0O0P6NEKD9OxGBdmMXhjSztP/Fx0f7W/EPoc7Svj/uA/Rv8Q/rQ7H4fvzD+1+xeDQWP4zFY7H4USwej0X7eHXXDvEPOlatnohF51g8GYsusegai26x+Eksnop/KSB6xAKvbPSMxTPx6BWLZ2PxXDx+Go/esXg+Fi/Eo088+sajXzz6x2OAiIHxGBSPnxkxWMQQI4ZaYliEGB4xXmQwGAwGg8FgMBgMBoPBSDKicocoDMPGPkw+ItmJyVU0b9H8RTIZzWk0t9EcR3MdzXmej7MfzYE0F3o2zoo0N+oZZ0k9BF96Ks6cusUZVJc4k+ocZ1Sd4syqQ5xhtY8zrR/FGdcP48zrv+IM7PtxJva9OCP7v3Fm9l3B0b7l45/9Lyn4ZzdWQcivWOxGfifEPztTQDuI1RJoZwho/0qaQPu3kwDayfhohwHtv/ml6IUh/8UHaMssbXww/zX+QX0g/qFtE4t/j3+IH4zFf/zS7Wqu/xn/gD8c9xBqF49HBPjW8PtxH/htA+AmBJcg/CkBwjUM10BcQnENxjUctwFyCcp7C2D+vAHOX7BAdFv0DYl+aUR/BoPBYDAYDAaDwWAwGK0m0mEIYXwiiG3YWIhkJZKhmHxFAuhnBZd5xoDRPQXP6SHA9FMGmDbhtA1Q2yD14wJSa1D9iOBWP4izrO/H2VbbOOt6MM6+/j3Owv4tzsb+b5yVfdeSnW0C7aj+2V/7Ja9/djJAO4p/dhDQDisIGQa0f4VAu2UB7V8JANq/ngLQ/r0MA20Ntf/KgNpfi0cyhSG/HgC0dZY24v+FQO2HfMD2fxlg28zotmV1B4HtKHA7WcAdBLlN0G3C7iDo/UIKMDws+jIYDAaDwWAwGAwGg8FoNZEOQ0iGVdhYR+8QcG2D18kC7DCIHQSybdnWfhnXj4isaxNkPxQCs/+f4GP3BwBtzdmiFoT8mgDafy04318I/pcpoP17KQDtXw8A2r9CoH33AO0wH+1UgfafC6CdjO3I3wuo/U/x8PPR/mb8Q/htA2jLLG0/qG0D2g8LoB0GtX/8S3arkjCo/RML1A7K2u4ZArUl2A7L4I4CuZOF3X0YDAaDwWAwGAwGg8FgMBoJXAexiyDm4Qexn7NwFRNm9wzJxjZh9k8iwGybdciPI8BsDbQf9gHafjBbZmdLoK05mp/dyD2Cx/2D4HTJ2I1ooP3nGQDa/39799t8WVXeeXjXiCbYCK2IQAAFRBBEDHEmioKgWNGIzlS0NGYMlT8mk5pk3v/jedJdHLbrz32vvfY5+/zOtaqud9Cnu+pTd393az9b0Ba0ux+GrAXtPT4MWbvSru1ot2ZHZl9pl7a3W1H744GoHb3W/o9G2M5cb/fi9pbLbgAAAIDRaB2J2P/ZCditi+zsVXYkZn/cidmlLezZ19nZuZG/WuJzIzM+CNkK2tEPQgraVxq0P9sJ2n/eCNr3BoL2k6ugvfXDkK8kg/bDHe3vdoL2+kr7xydR+6cPlIL2L5ZP72lnp0fWm9qZ+ZHWtXYkbPfi9n92/NeGa24BHAAAABgJ1Jmr6/8K9I1oxO6F7NZVdnRmpLeZHZkaeRi0f1EJ2g87109O+lftOrsUtB92tsx+9qsnXW/LByFPg/aTA0H7XiNo/3knaH9W0L6uoN3b0T4N2vcbQXt0R/th0F5faX/zgTdO/jtDbUe7dKX98CutmdmR7JX2Omr3PhTZu9QevdauTZGU5kiy19vRwJ3x/wAAAICbMbMpZOL1/210kVLIXneW7FV25jK79gHI05i9x3X2w6D9sJvVrrNLQftbJ0H7YbdbX2c/DNovLmP72bWgfb8QtEc+CClo7xi0W2F7JGj/2Q5BOzM7UgraM2ZHWkE78nHIHz/4kX9YCNoPo/ZHy9j0yNZL7d61dm9fO3K13Yrb2YvuPcI3AAAAcBui3SHSMHoB+z8K/SQbsnsxO3qZPTI18tFJzF4H7Yed68dL7mOQpaA9Y26kF7R7cyOzg/afTQzakbYraE8O2o8Gg/bjhaDdmh2pBe3nHvzhnb2jvY7af7188nHI1uzI6JX2rx78ZTKyp936UOTHq6gdDdv/tpSnSCJxe2vk3hK+AQAAADKhejReZyJ2dF7kn1cNZ32VXbrMHtnN/l/Lp6dGZlxnnwbthx2td529dT/7hZM+2AvatbmR+8ufzo20gvajgragvSVoR3e0v/7gR/CNQtB+Ixi0S1faP1w++TjkeydB+4MHP/LSlvbo9Ej0UrsVtXth+187F9tb4nZvqmRr8AYAAADYEqwj8XpLxP7jqr30QnYkZmcuszNTI6Xt7J+cdK/3T3rYwz4Wuc4uBe03CkH7Ycf7+jLvg5CC9g0E7UcmBu17q6Bdmh3JfBgyMjvy0rJ9duTtJT47suVKuzc9UtvT/l3nUnu9q92aIamF7ejVdi1wRyJ3JniL4QAAAEAkSm8J1q14/X8qTaR3jV0L2f/cCNmne9mty+x1zD7dzY5Mjcy8zi4F7Yedbct19ktLbG5kywchv7AK2vcmBu1HBO3LBu3RD0OOBu3MjvaesyPrqP2DB95dPr2l/f5S3tKOfiCy95HI3y7l+ZF12P5D51p7NGyX4nYtcNci90js3jOGAwAAANdlZlNotYt/Dwbs1jV2NGTXrrL/UAjZpZmR3y79j0BGPwRZ2s5+f/n0dva7J31s5Dp7dG4ks589I2iPfBBS0L4jQTsyO9L6MORX4Jn6cQAAI2hJREFUlvLsyPNLf3akFrRfXz75muq3H8jMjoxcaf/N8ukPRNamR1pRu3SpHdnVHgnbvbhdC9y90N2L3XuFbwAAAOA2RLvDvyfDdSlgtyL2SMiO7mXXLrPXMbs3NfLzk2418zp7HbQf9reHPe71ZWw/+2EPLM2NrK+zex+EjM6NCNqC9qbZkWeX9uzIi8v22ZFe1H5nKW9pZ6dHRqL2bwai9mjY7sXtUuDuRe5I7B4J3wAAAACRUB2N1rV4/cdKI6lF7GzIzsbs3wzG7JGpkfV29js7X2f39rOf7QTtyHW2oH0Hg/bsHe2tQbs3O/Licp7ZkeyVdm9P+5edqB3Z1K5NkIyE7ZG43Yrc0dA9Gr4BAAAAMqE6Eq7/2GkgkYi9NWRHL7N/3YnZvamRn+54nb1lbuTFpT83MjNoz9zPFrR3CtqfOVPQfqwRtGuzI5kd7czsSCtqf2f59MchS1H7+0t5SztzpR2J2tEPRZY+FnkatUthu7Sx3YrbrVmSfxm85I74NwAAAIBJcbqnF63/ZenPibQidmkjuxSy1zH7NGRHPwAZidnZD0Gut7O/34jZb590tlbMzsyNjOxn1+ZG1kH7sTMF7c8I2nOC9mc2Bu3M7EgmaPd2tJ9bLjc70rrS/tGDH/0HD/4SmBm1S/Mj0WvtTNj+uBG2S9fbvdD9r4P+CAAAADAhTEdEwnUrYv9TJWKPhuzWVXb0A5DZmP2Tk671owteZ7fmRkpBO7uf3Qva0bmRTND+jKCdj9ozgvasHe1M0H5qye1oj34c8s0HP7K3HvzoZk6PjOxpl6J29lp7JGy3Jkki19uZ0D0rfAMAAABkQ3U0XEeusFuTIltDdu8quxSzR3azZ06N/OVJZ3tzGf8YZGY/+6mBoL3nfvbMoJ1pxIJ2Mmg/2gjapSvt06Bd29FeB+3S7EjtSvs0aL/y4Eey15X21j3t6KV2KWr/ZhW1W2G7tLH9vwNh++NG5P6njlnBGwAAAGBUNlj3AvbHjUvs2j52aSO7FbJLH3/sxexfJmJ2dDd7r+vsV0+6XWtu5Pmlv5+9nhsp7Wffb1xnl4L2o4L2vkG7F7ejQXsdtmtBu7ej/flK0M5caUd2tGuzI9Er7TceeBi0T7e0Z02PlPa0e1H7o0DUrk2QrGdIemG7drVdCtz/GAjcs4M3AAAAwFbZYN0L2P+4tC+xe9fYpZC9nhdpTYzUYvZHgZhd283+YJkzNfKdk8725kl/y3wMMjo3Mrqf/YVK0P78Mraf/bkl/zHIVtAe7cKCdjBoj8yO9K60IzvapdmRyMchZ11pf+/Bj7k3PTI7apd2tWvb2rWL7cjV9mjgnh28AQAAALbKBustATtyjd26yK5dZZ/uZe8Rs1tTI++c9LBZ19m9j0GW5kYy+9m96+yZ+9mC9oGC9jpszw7aTyy52ZHSlXZrduSlBz+K6MchT7e0M1fa7yzt6ZEPlvqedjRq/6oQtUfDduRqOxK4a5E7E7yj4RsAAAAgK9olen3jD4mAnbnGzoTsdcz+VSJm9z4CWZsaeWfJT428ddLZIh+D/PrS/hjk88nr7FLQfmLHoN2aGhG0DxC0t+xoR4P23lfa33jw48lcab99ErQj0yPvnvwXjchHImtRu7ernQnb2avtUuCORu5M8N4awgEAAACiYToTrDPx+h8KXSV6jZ0N2bW97GzMXu9m/+ika/WmRh4G7beT19mvnfS5Pa+ztwbtzH62oL1T0G6F7dGgHd3RvhcI2vcHgvazhaBd+zjky8snI/OtK+1vLZ9s/GSmR3p72tmo/fNC1C5da9fC9q8LYbsWt39XidulwB254s4G79khHAAAALhdox2i1zd68fr3ha5SusYuRezfrFpOL2SXrrJ/cRKyR2N2azc7MzXy7ZPO1rrOfuWk25Wus18oXGdng/b9QNBuXWdH9rNHg/asD0He+aD933YK2nvsaO/9ccjMlvbWPe1I1D7d1I5ea/f2tSNxuzZJUgrc0cidCd6zQzgAAABwu0Y7RKttROL13xe6SmtSpBSxezvZ0avs1mZ2JmZHd7NnbWevg/bIxyAvsZ89ErR7/VbQXmLzI7OC9ujsyP1K0M7OjtSutCNb2pkPRLamR2ofiTyN2q0PRUavtXv72pG4XZskKQXuWuRuxe5e8J4dwgEAAIDbNdIgfp+I1rV4/btCV2lNipQidm8nO3uVXfoA5GnMrn0EMjI1EvkQZGQ7O3qdHZ0beTJ5nT0yN5IJ2pmZEUF7Y9B+ZHLQrkXt3uxI7Uq7NjuyvtL+2vLJqHxpS7t3pR2ZHmntaWcvtXsTJNkZki1xuxS4a5E7Ert70XvEPwAAAAA3Y2ZTiDSMVgP5bSdgj0bszLxIb2Ike5nd2s2OTo30PgRZus5+6aTjtT4GuQ7atevsVtCuxexZQTu6nS1onyFoj86O9IJ2dHbky4WgvceVdvQDkTOj9o8rUbs0QbIO261r7dG43drdrkXuSOzORO+o3wMAAAA3Y2ZTiDSMVgOpxevfFDpLJmL3rrJLIbs0MdK6zJ4RsyMfgtzjOnsdtGvX2dm5kVLQnjE3ImhfUdCeMTsy+nHI6JZ27wORby7t6ZHSnvaMqN261s7OkIzE7V7groXuSPCORu+ovwcAAABuxsym0OsXte5RaiStgJ2N2Jl5kdZV9oyYXdrNbk2N9K6zX1ni29nn+Bjk3nMjgvYNB+3W7Ejv45ClK+2XG1faI9MjtY9Etja131tF7Q+WP50g6X0wsjdDMhq3I4G7Frl7sXskgAMAAABslWkVrebx62TAzkbs6LxI7cOPpYmR05j93tLfzC59BHJkaqR2nf1y5Tq79zHIrXMjgvaNB+09o/YXA1faTy/5Le31lfbo9Eg0an+/c6k9GrUzYXskbkcCdy1yR2L3lvgNAAAAMCLTKlrN4++SATsbsaMhe0bMXl9mfz8Rs2dOjWSus58OXGd/8UwxW9A+YNC+xivtyJb2S5Ur7dL0SGtPu/SRyMyl9rurqF2aIGlta5fCdilujwTuSORuxe5o+J4VxQEAAAB6MTobqlvROhKvswG7FLF7Ibv04cfTiZHTmP1u8jK79BHI1m52aWqkdJ390rJ9O/sarrMF7TME7T1nR3pRuxS0t1xpP7f0t7Qz0yPRj0Rm50dqu9rrsP1hJ2y3rrZH4nYkcPdCdzR4zw7hAAAAwO0a7RC9vlHrIq2AnY3YrWvsWsgubWWfXmWPxuz1ZXbrI5CjUyMvFq6zn5t0nb0O2r2Yfc65EUF7IGi3wvZo0K5F7WjQjsyOPLnUPw6ZudJ+cYl/IDKyp9271F5/KPKdStQuXWt/sNRnSE7DdvRqOxq3a5G7FLoj0TsTwDP+DgAAALgZM5tCpGG0GsivOvF6JGK3rrFrIbs0L1KaGDmN2e8s7Q9ARi6zM1MjkQ9BRq+zv9K5zh6dG/l8IGbPCNrRbito7xS0I1famaD9eONK+8lJV9q96ZHMnnYran+3EbUju9qRGZLe1fbPAnG7FbgzkTsSu7PhGwAAAGAP0X7RaiC9eN0K2LWI3ZsVKYXs0rxIdi+7t5l9GrMzu9m9qZEZ19lPNq6zH58ctGfsZwvaG6P2njvapah9b8cr7acTV9rrD0RG9rQjl9pvNy61Wx+LbF1r12ZIslfb0cD9i4KPKn7Z8KuE/wkAAACws0yraDWPWicpNZVMwM5cY/fmRXoTI+uPP9Yus98evMzuTY18LXGd/fSO19n3OjF7j/3sPWP21QftSNiOBu1HlsvMjrSutJ9aytMjvSvt7PTI+iOR39pwqV3b1S5da/dmSD4IhO1o3F4H7t4Vdy90Z8L3rCgOAAAA0IvRI6E6G67/ttBZfpaM2D/tXGN/sMTmRWoTI6WYnb3MXu9mv7bkp0ai19mnMfup4HX2OedGHpkUtGe04JsM2pEr7ezsyMiV9v1V1P5SJ2qvt7SfXV1p16J2dHqkFbV7m9qlqN271m59NPL9pf7xyGjczgbuUuRuxe6R8D3ilwAAAMDN2LMx9PpGrYv8fEPA7kXs2sceS/MipZDdmxiJxuxvL7mPQPamRtYx+/lKzD4N2k91rrPvL+W5kcx19ujcSDRmC9o7Bu0jfRxy5Ep71vRI5lK7FbUjH4tcX2vX9rVrG9sfLO05kmzgjkbuaPTOBPCMjwAAAICbMbMpRBpGpIW04nU0YEdnRUrTIu81QnZvL/t0YmQ0Zr/WidmjUyPXcp0d3c4WtA8WtEevtB/bcKX95cqVdilqP9eI2i8ufzo9kvlIZC1q13a1exMktbD97tLe2K7NkdQutyOBuxS5S6E7G71HIjgAAADAFiPNotVA/iYQr6MBuxaxWyH73aW+k70O2ZGJkdO97EjM7n0EsjU1so7Zz1Viduk6+8sbrrMf2+E6W9A+c9A++uxI7Uq7FLVrH4iMTo+0ovb6I5HRS+1e1C5da9fC9g+X9sZ2bY5kHbczgbsWuVuxOxK9o34OAAAAMDFCR7WaR6uV/HQwYNcidu9jj7Wd7HXILl1lb4nZ65mRVxMxOzI1UvsQZClmj1xnH3FuRNBOBO3MxyHPMTvyhVXQfmLJbWlHpkeeX+rTI7WPRLY2td84idpvVqJ2aYKkta1d29dufTyyFrczgbsUuUuhOxq9e+F7q58BAAAAN2PPxtDrG6028mEnXmcCdmtWpDQt8oNAyC5dZZcmRk5j9psnMfuNJbaZ3drN/lojZo9MjXypErOfWMXsc8+NjHwMUtCeFLT3nh2ZuaWdudKO7GmPXGrXonbrWru0rR292O5dbZ/G7V7gjkTuWujuxe6RAA4AAACwt2zP+DAYrnvxuhWwexE7Oi2yDtmlrezSVXY2ZrcusyO72SPX2XtsZ59jbuRmgvaMqD0zaM+40h7Z0h6N2s8ko/aLgUvtWtR+vRK1s9faI2E7ErezgbsUuVuxuxe9P5wYxAEAAABmBekPk7G6Fq1r8ToTsHsRezRkR6+ySzH79UDMrl1mv5iM2c/sFLNHt7NnXWefK2gf6l1L0L7UlvbW6ZHapfbLyUvt3q72W4WoPSNsR+J2L3CXInctdLdidyR6R30IAAAAMDFCR/W6xwfBcP1+ob/UAnYkYm8N2euY/dYS//hj5DL75cBl9qypkUtvZx8taB/2XVvQHtnSjkbtLzWutJ9a/nR6JLKnPXqp/VohakcnSLaE7WzcXgfuSOSuhe5W7M7G7y1+AgAAANyMPRtDtHO8HwzXvXj9bqHbRCP21pAdnRh5/SRkj15mZ3azny7E7Oh2duY6e2Q7+6hB+2rekT8OuceW9qyo/exg1H556X8osrWr3brW3hK2a3G7Fbh/0AncpchdC9294L01hAMAAADsJdszWm3kvUC8bl1g1wJ2LWLPCtmlq+zSXnbvA5AvD8bsZyfH7EtuZ5/7Y5BX9+5q0N46PVIK2q097dFL7a8XonbvY5GZbe1o2B6J273AnQ3dmfA9K4gDAAAAzAzSmVCdDdeRgJ2N2JGQndnKjn78sfcByJGY3Zoa+fIyf2pE0Ba0d7/SnhG1n17yH4ncErVbEyTRGZLSxXYpbkcut9eBOxK5a6G7FrtH4vcecRwAAAC4bTOaRKR9/DAYrnvx+vuFjtO6xC5F7NJFdmReJDMxMhKzox+BfHpizD7HdbagffCgXQvbe21pR660n1j6H4gcjdojl9qRCZLsDEn0art2ub0O3CORuxa6e8F7JICPeg8AAAC4GXs2hmjnaLWSdzbG678u9J11xI5eY2fmRTITIyOX2aMxuxa0n5hwnT1zO7vVVAXtnYN25gORs6+070280l5H7a8ssY9Eti61v1aI2q1d7cy2dilsj1xt1y63o4G7FLlbsTsSvbeEcAAAAIC9ZHtGq43Uesr3NgTsWsSOXmOPzIvUrrJLe9kvnYTsyGV26yOQX0nE7Ox19r0zXGdvidmC9hmDduRK+1qidvRSu/WxyHXYfnXgWvs0bI9cba/j9jpwRyJ3LXS3Ync0fM8K4gAAAAAzg3Q2VPei9fcqzaUVr/97oev81YZr7Oi8SC1ml66ySx9/3HqZfeSYvWU7W9CeELTPMTuyx5Z2aXrk8VXQvr8K2pGPREYutTNRe+RauxW2e1fbtbidDdylyF0L3b3gnY3fewVyAAAA4DbN6hGR9tFqJ/8jEK8zAbsXsUvX2KMhu3aVPRqzI5fZtd3sL61i9v1VzC5NjZx7O/sScyM3FbQjYTsTtGdtaY9E7d6V9uyo/UIjaveutUfCdu9quxa3e4G7FLkzoTsavbMBHAAAAOCSop2j10si4fq7hV5TC9iRiF26xt4asmsTI+uY/cLOMTtynT0jZo9sZ28J2lv7rqAdDNuRoD3zSnuP6ZEt8yNbJkhOo3YkbPeutltxuxe4o5G7Frqz4Xs0hAMAAADsJdszIo3ku4PxuhWwIxG7dI0dCdnRmN26yt4yM3KOqZE9r7MfucBltqC97LOl/dmJV9r3AlfaR4ras8J272q7Fbd7gTsauSPBeySAbw3iAAAAAHsE6Wig7gXrTLzuBexIxC5dY88I2UeL2a3r7C0x+88mxmxB+44E7daVduYDkZeI2uuwXYvas8N272p7HbezgbsUuWuhOxK8RwP4HoEcAAAAuE2zekSmgbRayl8G4nUmYNcidukae3bIrsXs0sTIuWN29kOQe15nC9oHDNqXnh6J7GnvHbVHrrWzYbt3tb2O263r7VrkroXuWuyORO+tIRwAAADgErK9o9VOvhMM129VGk4tYNcidukaOxuyt15l7xGzs7vZl54aEbR3DNrnutLee3rkKFF7ZIakFLYzV9vruN0L3JnI3Yvdkeg9M4gDAAAAzDbaNXq9pNVaevG6F7BrEbt3jV0K2SPzIkeJ2eecGjnidfbNBu1I1D7nlfbWPe3WRyJHovbMa+3sxfY6br8WiNuRwF2K3LXQ3YvdmfC9VxgHAAAAmBWit4TqXrT+dqXJfCsZsGsR+7VKxM5eZM+8yh6J2a2PQM7YzT7CdfasritoT7rSfiQQtKNR+/OVqP1YMmqPXGqPXGvPDNuRq+2RwJ0N3a3YvTWCnyOUAwAAALdnZpvIdpE3N4TrbMCOXGPPDNkjV9mzLrN7UyOfrwTtTMz+XDBmH+E6+yqD9qyofYQt7dl72qOX2iMTJKMzJL2wHY3brevtWuTOhu5e8J4Rwbd4CwAAALgZ52wOmRbSairRcP16pe3UAnYkYm8J2a2r7JGJkZmX2bOnRq5pO/tqY/asqL1H0L7U9MiWS+1ZEyStGZLTsF3a2B6J273r7VrkzobuSPDeGsEBAAAAjiDbP3o9JRquv1lpO7WAnY3YpY3sr63aVS1kz5oY2XKZfYSpER+DvCNh+5qi9hcHo/botXbvYjsStltxuxe4a5E7G7qz4XtrCAcAAAA4t2zviDSUTLjuXWB/o9CFahE7E7JLF9mjV9nZmB29zD56zBaybzRot6ZHalH7sUmX2q1d7dYEydaw3Zsj6V1ujwTu0dCdjd4zgzgAAADAbFv7RqShRMP1SMBuXWL3ZkW2huzWxEhrL3vrZfZjgZi919SIoH2HgvZdjtrRCZKZYTsTtyOBuxS5e7G7Fbyz8fscgRwAAABgRoDeEqkjwfrVRqd5JRmwoxF7r5Cd3cu+qzFb0D5w0J4VtT+3nOcjkZmoHZ0giW5rzwrb67j9YidulwJ3LXK3Qncvdo/E7xHfBAAAANghOI/ItJJvJMP1K5Wm8/ISmxIpRewZITu6lT0yMTIas2d9BPJzZ4zZgvYOQTsati9xpR2N2plN7ZFd7d62diZsR+P2VxNxOxu5W6E7ErxH4/csrwEAAAA36xItItpJer3l64PxOhKxv5qM2KMhu3eVHd3Lzm5mj+5mX/I6e1a3FbSX65oeGbnUfiwRtXsTJL1r7T3Cdi9uRwN3LXK3Qnc0eG+J4LO8CgAAANyMc3eHkTbS6y0vJ+J19gr7q4W+tFfI7l1l9yZGajH7sY2X2XdtakTQXo4zPXKOqJ251B691q6F7WcCYbsVt3uX25HAPRq6o8F7VgQHAAAAOKKRNtLrLdFwHQ3YrUvsVsSuhexnEiF7dGJkr5mRo8VsQfsMQXvPK+0Ze9qtqB0J248vYxMk2bD99NL/eGTrarsXt6OBuxW5W6E7E71nxnAAAACAIxjtIZHW8mIiXkcCdi9iR66xnyn0rJGQnZ0YeTwZsrfG7Mxu9pGus+9k0L5LV9p7bGrPutb+UiVqZ6dI1mE7G7dLgTsTuSOxOxO9Z4ZwAAAAgEsb7SGR1tJqNZF4/UKlFUUjditkRy6yv5wI2VuvsmdeZrvOvsNRe0bQnj09MvtSe1bUbl1rR8N2L25vCdy1yB2J3ZnoPTOEAwAAAFzaaA+JtJZWq3lhUsDuRexoyN5ylT1zYiQbs/ecGjl30L6Zd4Tpkb2j9qMTovalw/aMuF0L3K3IHYndmeg9M4QDAAAAXNpoD4m0ll6veT4YsLdG7EuH7NGY/egVxGwh+8BBezRqf/bCUXvkWjsatqMfjxyJ26XAnY3c0dgdDd6zQzgAAADApW1pIpHm0us2kXj9F5V2lInY0Y3saMgeucq+RMz+7OIy+04G7UtcaZ/zQ5GtqB291h4N2yNxOxO4a5E7Grsz0XuPGA4AAABwSVuaSLS7tNrNX2wI2NmIPRqyo1fZs2L2rM3sa7jOFrSX69rTnrGpPfqxyNa19qywPRK3M4G7FbkjsTsbvfeI4QAAAACXtLWLRNpLr988uyFgZyP2rJA9OjFyL3GVvcdl9tGuswXt5fo/Ejkjau9xrb01bEfidiZwtyJ3JHRHY/eeIRwAAADgKLZ2kkiLeTYZr6MBOxKxt4Tsc1xlj8bsa/4IpKB9xqB9jVE7c629JWyPxu1M4G5F7l7ozgTvvUI4AAAAwFFtaSaRJvNMMl5HA/ZIxJ4ZsjNX2dceswXtg4XtvYN2JmpnN7VLUTtzrZ0N23vG7WzgjoTuTPCeHcEBAAAArsloP4m0mV7fiQbsvSL2lpDdu8oeidmfmxCzTY2I2rtE7dEPRW691s6G7ZGr7WjczgbuaOiOxu5Z8RsAAADgrhhpKpFW02o9mYAdidjZa+ytIXvkKnuvD0CK2TcQtG8lap8jbEfj9kjgjoTuTPDeGr/35h9QAAAAEJEvKdtXIs2m132iATsasc8RssVsQfvQQfuSUTsyQTJyrT0jbGfidi1wb4ncmdg9Gr23egYAAADgQrF5q0xziXacTLx+stGZIhF7RsgeucqevZd9rpgtaF9B0L7mqD2yrR251o6E7Uzczlxv9wL3SOweid5ZTwMAAABc2J7tI9thIm3nyWTE/uKGiB0J2SPzIqNX2bcQswVtl9rhqD1rhqQUtmfE7ZEL7kzo3hK9LxXEAQAAAI4UpLfG6mi4zl5gb43YoyF79CrbZbZ3iKB9zqh9ibC9R9weDdzR0L0leu8ZwQEAAACObGtHyTSbXv/JBuzZEftSIfsIMVvQvsKgfVei9ugMydawXYvbo4E7ErlHYvfs+A0AAABw12xpLdGe0+tCmYD9RKNXzQzZ0XmRW4/ZgvYZg/ZRova5rrUzYXtW3G4F7kjkzsbuWeF7Fv8oAgAAAOcMzLOMtJho57k/ELBnROwtIXvPq+xrj9mC9sEvtT+zbIvas6619wjbmavtvQL3SOzeEr2vKY4DAAAAzI7Qs2N1JFrvEbCz19h7hOzZV9mRmO0jkKL2WS61947ambA942q7F7d7gTsbukdi9yUiOAAAAMARzeoqmZYTaUOPT4zYmWvsTMg+Usw2MyJoH+ZS+0hhuxW3twTuaOTOhu494zcAAADAXbe1w0R7T68bjQTs7DX2pUL2JS6zBW1Re1rYHonas8L2OeN2JHBnQ/fs8C2SAwAAALcUn/cI1dlwHQnY54jYM0P2nnvZIyFbzBa1D3+tPTNst+J2L3BHIncmdG8N3peO4AAAAABHMLOtZLtOpBX1etO9gYg9M2Rf01W2mH0DQfvaovbssL1n3I4G7tHQvXf8BgAAALgFM5pMpgFFmtLsiD07ZN9KzBa0bzBqb5kg2SNs7xW3M5E7G7pnR2+hHAAAALjV8Lx3rM6G61683iti7xWyZ0yMiNmi9sU/Frn1WvsSYbsXt6OBOxO5t8buIwVwAAAAgKOa2V6y3Sfak3pdqte1jhay94zZe3VS70qC9iWj9pYZki1he0bczgTukci9Z/Q+N/9wAgAAgHh8Dbb2m0wrirSnLRF7S8jeOi9yjTFb0L6ysL3n/Mje19q9sD0jbkcDdzZyz4rddzmGAwAAAJwzSs+M1pl4HQnYWyP21pA98yrbzIigfdW72rPC9rnidiZwbwnd5w7fAAAAALdqRrvJ9qJoh9o7Ys8I2de4ly1oi9pnC9szrrYjcTsTuEci98zYLYwDAAAAQvT+RvtPpjFFmlWkfW2N2LNDtpgtaB8qas++1p4VtmfG7Wzg3hq6jxC/AQAAAO66me1mpB1Fu9SMiD0zZO99lb13zBa0XWrvcq09M2zPjttbIvcesVsYBwAAAITo/W1pQdnuNCtiXypkHzVme6L2cNQ+ctgeDdxbI/eRwjcAAADArZjdc0aaUqZZHT1ki9ne2YP2lqi917V2NGxn4nY2cI9G7r1itygOAAAAiNGXsaURZXtUpnVF+1mmyZ0jZJsZEbXv7LV2JmzvHbdnRO4jhW8AAACAWze784z2pj0i9p4h+8h72WK2a+3DhO094/aWwL1X6BbBAQAAAC4Xp/cI1yMBe8+Ifc6Q7Spb0D5s1D5a2B6J27Mi96WCNwAAAACXC9Zb4vVIxD56yHaZ7Z3lD8C5r7XPFbe3BO49Qrf4DQAAAHBdkXpmuB4N2OeI2NdwlS1mi9oXv9YeDdujcXtG4D5X6BbKAQAAAOH5smZ1pNGONdLMLhGyxWzvqqP2ucP2lrg9O3JfW/QGAAAAuFV79aCtnWq0j10qZIvZ3iGi9qXD9pa4PSNw7xm5RXAAAACA64jTe8frLQF7S8S+tpAtZovaVxW2t8btWYH7CLFbXAcAAABuPSJfY7SeFbC3RuxrDNlitqh9sag9I2zPiNt7BO5bDd4AAAAAgvW+AXtGxJ4VssVs72bD9pHi9rkitxAOAAAAcL1h+lzx+ogRW8j2rjpqHzFsz47bRwvdgjoAAAAgKB/HXh1qVie75pAtZovaVxO2Z8btPQP3LQdvAAAAAMH6eAF7dsS+VMgWs0Xtq4zae8Ttc0du4RsAAADgdkP13vF6r4gtZns3FbavLW4fIXKL4gAAAADHj9FHiNd3NWIL2d7Fo/aeYXvvuH2toRsAAACAuxWuzxGxLx2yxWzvpsL2OeO22A0AAAAgWp/T3l1NyPZE7QuG7UsHbuEbAAAAQKg+csA+SsgWs72rCtvnjNtHjdxCOAAAAMDdDdNHitdHithCtnfVUftScfuaIzcAAAAA4vW1RWwx2xO2RW4AAAAAxGsh2xO1xW2xGwAAAIBjR+ujR2wx27vJsH3kwC16AwAAAIjVAraQ7QnbdyJuC+EAAAAAwvQtRWwh2xO2bzRwi+wAAACAeMw1NTrPE7ZFbgAAAADEayHb824lbAvcAAAAAAjYQrYnbN8J/vIEAAAAQLgWsj1hW+wGAAAAQLQWsj1P3Ba9AQAAABCrRWzPE7aFcAAAAABhWsj2PHEbIR0AAAAQlhGxPU/cBgAAAABEbM8TtwEAAABAxPY8cRsAAAAAELE9T+AGAAAAAAHb8zyBGwAAAAAEbM/zRG4AAAAAEK89T+QGAAAAAPHa8zyhGwAAAACEa8/zBG8AAAAABGvP8zzRGwAAAACx2vM8MRwAAAAAUdrzPM8T2QEAAADx2PM8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/M8z/PO8v4/2gG+ZY1HCz4AAAAASUVORK5CYII="></image></g><path fill="#000000" fill-opacity="0.0" d="m406.3491 305.12668l928.18896 0l0 501.41733l-928.18896 0z" fill-rule="evenodd"></path><path stroke="#317efb" stroke-width="12.0" stroke-linejoin="round" stroke-linecap="butt" d="m406.3491 305.12668l928.18896 0l0 501.41733l-928.18896 0z" fill-rule="evenodd"></path></g></svg>
-
diff --git a/src/site/content/en/lighthouse-seo/is-crawable/index.md b/src/site/content/en/lighthouse-seo/is-crawable/index.md
deleted file mode 100644
index 0fc8979b5a5..00000000000
--- a/src/site/content/en/lighthouse-seo/is-crawable/index.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: post
-title: Page is blocked from indexing
-description: |
-  Learn about the "Page is blocked from indexing" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - is-crawlable
----
-
-Search engines can only show pages in their search results if those pages don't
-explicitly block indexing by search engine crawlers. Some HTTP headers and meta
-tags tell crawlers that a page shouldn't be indexed.
-
-Only block indexing for content that you don't want to appear in search results.
-
-## How the Lighthouse indexing audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-that search engines can't index:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="is-crawable.png" alt="Lighthouse audit showing search engines can't index your page">
-</figure>
-
-Lighthouse only checks for headers or elements that block _all_ search engine
-crawlers. For example, the `<meta>` element below prevents all search engine
-crawlers (also known as robots) from accessing your page:
-
-```html
-<meta name="robots" content="noindex"/>
-```
-
-This HTTP response header also blocks all crawlers:
-
-```html
-X-Robots-Tag: noindex
-```
-
-You might also have `<meta>` elements that block specific crawlers, such as:
-
-```html
-<meta name="AdsBot-Google" content="noindex"/>
-```
-
-Lighthouse doesn't check for crawler-specific directives like this, but they can
-still make your page harder to discover, so use them with caution.
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to ensure search engines can crawl your page
-
-First make sure you want search engines to index the page. Some pages, like
-[sitemaps](https://support.google.com/webmasters/answer/156184?hl=en&ref_topic=4581190)
-or legal content, generally shouldn't be indexed. (Keep in mind that blocking
-indexing doesn't prevent users from accessing a page if they know its URL.)
-
-For pages that you want indexed, remove any HTTP headers or `<meta>` elements
-that are blocking search engine crawlers. Depending on how you set up your site,
-you might need to do some or all of the steps below:
-
-- Remove the `X-Robots-Tag` HTTP response header if you set up a HTTP
-    response header:
-
-```text
-X-Robots-Tag: noindex
-```
-
-- Remove the following meta tag if it's present in the head of the page:
-
-```html
-<meta name="robots" content="noindex">
-```
-
-- Remove meta tags that block specific crawlers if these tags are present in the
-  head of the page. For example:
-
-```html
-<meta name="Googlebot" content="noindex">
-```
-
-## Add additional control (optional)
-
-You may want more control over how search engines index your page. (For example,
-maybe you don't want Google to index images, but you do want the rest of the page
-indexed.)
-
-For information about how to configure your `<meta>` elements and HTTP
-headers for specific search engines, see these guides:
-
--  [Google Search](https://developers.google.com/search/reference/robots_meta_tag)
--  [Bing](https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240)
--  [Yandex](https://yandex.com/support/webmaster/controlling-robot/html.html)
-
-## Resources
-
-- [Source code for **Page is blocked from indexing** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/is-crawlable.js)
-- Google's [Robots meta tag and X-Robots-Tag HTTP header specifications](https://developers.google.com/search/reference/robots_meta_tag)
-- Bing's [Robots Metatags](https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240)
-- Yandex's [Using HTML elements](https://yandex.com/support/webmaster/controlling-robot/html.html)
diff --git a/src/site/content/en/lighthouse-seo/is-crawable/is-crawable.png b/src/site/content/en/lighthouse-seo/is-crawable/is-crawable.png
deleted file mode 100644
index 122c5699e0d..00000000000
Binary files a/src/site/content/en/lighthouse-seo/is-crawable/is-crawable.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/link-text/index.md b/src/site/content/en/lighthouse-seo/link-text/index.md
deleted file mode 100644
index 929c934153e..00000000000
--- a/src/site/content/en/lighthouse-seo/link-text/index.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-layout: post
-title: Links do not have descriptive text
-description: |
-  Learn about the "Links do not have descriptive text" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - link-text
----
-
-Link text is the clickable word or phrase in a hyperlink. When link text clearly
-conveys a hyperlink's target, both users and search engines can more easily
-understand your content and how it relates to other pages.
-
-## How the Lighthouse link text audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags links
-without descriptive text:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="link-text.png" alt="Lighthouse audit showing links don't have descriptive text">
-</figure>
-
-Lighthouse flags the following generic link text:
-
-- `click here`
-- `click this`
-- `go`
-- `here`
-- `this`
-- `start`
-- `right here`
-- `more`
-- `learn more`
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to add descriptive link text
-
-Replace generic phrases like "click here" and "learn more" with specific
-descriptions. In general, write link text that clearly indicates what type of
-content users will get if they follow the hyperlink.
-
-```html
-<p>To see all of our basketball videos, <a href="videos.html">click here</a>.</p>
-```
-
-{% Compare 'worse', 'Don\'t' %}
-"Click here" doesn't convey where the hyperlink will take users.
-{% endCompare %}
-
-```html
-<p>Check out all of our <a href="videos.html">basketball videos</a>.</p>
-```
-
-{% Compare 'better', 'Do' %}
-"Basketball videos" clearly conveys that the hyperlink will take users to a page
-of videos.
-{% endCompare %}
-
-{% Aside %}
-You'll often need to revise the surrounding sentence to make link text
-descriptive.
-{% endAside %}
-
-## Link text best practices
-
-- Stay on topic. Don't use link text that has no relation to the page's content.
-- Don't use the page's URL as the link description unless you have a good reason
-  to do so, such as referencing a site's new address.
-- Keep descriptions concise. Aim for a few words or a short phrase.
-- Pay attention to your internal links too. Improving the quality of internal
-  links can help both users and search engines navigate your site more easily.
-
-See the [Use links wisely](https://support.google.com/webmasters/answer/7451184#uselinkswisely)
-section of Google's [Search Engine Optimization (SEO) Starter Guide](https://support.google.com/webmasters/answer/7451184)
-for more tips.
-
-## Resources
-
-- [Source code for **Links do not have descriptive text** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/link-text.js)
-- [Search Engine Optimization (SEO) Starter Guide](https://support.google.com/webmasters/answer/7451184)
diff --git a/src/site/content/en/lighthouse-seo/link-text/link-text.png b/src/site/content/en/lighthouse-seo/link-text/link-text.png
deleted file mode 100644
index ae6e9d43c52..00000000000
Binary files a/src/site/content/en/lighthouse-seo/link-text/link-text.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/meta-description/index.md b/src/site/content/en/lighthouse-seo/meta-description/index.md
deleted file mode 100644
index 8c65712a3ef..00000000000
--- a/src/site/content/en/lighthouse-seo/meta-description/index.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-layout: post
-title: Document does not have a meta description
-description: |
-  Learn about the "Document does not have a meta description" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - meta-description
----
-
-The `<meta name="description">` element provides a summary of a page's content
-that search engines include in search results. A high-quality, unique meta
-description makes your page appear more relevant and can increase your search
-traffic.
-
-## How the Lighthouse meta description audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-without a meta description:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="meta-description.png" alt="Lighthouse audit showing the document doesn't have a meta description">
-</figure>
-
-The audit fails if:
-- Your page doesn't have a `<meta name=description>` element.
-- The `content` attribute of the `<meta name=description>` element is empty.
-
-Lighthouse doesn't evaluate the quality of your description.
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to add a meta description
-
-Add a `<meta name=description>` element to the `<head>` of each of your pages:
-
-```html
-<meta name="Description" content="Put your description here.">
-```
-
-If appropriate, include clearly tagged facts in the descriptions. For example:
-
-```html
-<meta name="Description" content="Author: A.N. Author,
-    Illustrator: P. Picture, Category: Books, Price: $17.99,
-    Length: 784 pages">
-```
-
-## Meta description best practices
-
-- Use a unique description for each page.
-- Make descriptions clear and concise. Avoid vague descriptions like "Home."
-- Avoid [keyword stuffing](https://support.google.com/webmasters/answer/66358).
-  It doesn't help users, and search engines may mark the page as spam.
-- Descriptions don't have to be complete sentences; they can contain structured
-  data.
-
-Here are examples of good and bad descriptions:
-
-{% Compare 'worse' %}
-```html
-<meta name="description" content="A donut recipe.">
-```
-{% CompareCaption %}
-Too vague.
-{% endCompareCaption %}
-{% endCompare %}
-
-{% Compare 'better' %}
-```html
-<meta
-  name="description"           
-  content="Mary's simple recipe for maple bacon donuts
-           makes a sticky, sweet treat with just a hint
-           of salt that you'll keep coming back for.">
-```
-{% CompareCaption %}
-Descriptive yet concise.
-{% endCompareCaption %}
-{% endCompare %}
-
-See Google's [Create good titles and snippets in Search Results](https://support.google.com/webmasters/answer/35624#1)
-page for more tips.
-
-## Resources
-
-- [Source code for **Document does not have a meta description** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/meta-description.js)
-- [Create good titles and snippets in Search Results](https://support.google.com/webmasters/answer/35624#1)
-- [Irrelevant keywords](https://support.google.com/webmasters/answer/66358)
diff --git a/src/site/content/en/lighthouse-seo/meta-description/meta-description.png b/src/site/content/en/lighthouse-seo/meta-description/meta-description.png
deleted file mode 100644
index 444c2d102bc..00000000000
Binary files a/src/site/content/en/lighthouse-seo/meta-description/meta-description.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/plugins/index.md b/src/site/content/en/lighthouse-seo/plugins/index.md
deleted file mode 100644
index 41361ad3086..00000000000
--- a/src/site/content/en/lighthouse-seo/plugins/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-layout: post
-title: Document uses plugins
-description: |
-  Learn about the "Document uses plugins" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - plugins
----
-
-Search engines often can't index content that relies on browser plugins, such as
-Java or Flash. That means plugin-based content doesn't show up in search
-results.
-
-Also, most mobile devices don't support plugins, which
-[creates frustrating experiences for mobile users](https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes#unplayable-content).
-
-## How the Lighthouse plugins audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-that use plugins:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="plugins.png" alt="Lighthouse audit showing document uses plugins">
-</figure>
-
-Lighthouse checks the page for elements that commonly represent plugins:
-
-- `embed`
-- `object`
-- `applet`
-
-Lighthouse then flags an element as a plugin if its MIME type matches any of the
-following:
-
-- `application/x-java-applet`
-- `application/x-java-bean`
-- `application/x-shockwave-flash`
-- `application/x-silverlight`
-- `application/x-silverlight-2`
-
-Lighthouse also flags elements that point to a URL with a file format that is
-known to represent plugin content:
-
-- `swf`
-- `flv`
-- `class`
-- `xap`
-
-## Don't use plugins to display your content
-
-To convert plugin-based content to HTML, refer to guidance for that
-plugin. For example, MDN explains [how to convert Flash video to HTML5 video](https://developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video).
-
-## Resources
-
-- [Source code for **Document uses plugins** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/plugins.js)
-- [Unplayable content on mobile devices](https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes#unplayable-content)
-- [Flash video to HTML5 video](https://developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video)
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
diff --git a/src/site/content/en/lighthouse-seo/plugins/plugins.png b/src/site/content/en/lighthouse-seo/plugins/plugins.png
deleted file mode 100644
index 93bbcfe0591..00000000000
Binary files a/src/site/content/en/lighthouse-seo/plugins/plugins.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/robots-txt/index.md b/src/site/content/en/lighthouse-seo/robots-txt/index.md
deleted file mode 100644
index 6519b615e98..00000000000
--- a/src/site/content/en/lighthouse-seo/robots-txt/index.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-layout: post
-title: "`robots.txt` is not valid"
-description: |
-  Learn about the "robots.txt is not valid" Lighthouse audit.
-date: 2019-05-02
-updated: 2020-05-29
-web_lighthouse:
-  - robots-txt
----
-
-The `robots.txt` file tells search engines which of your site's pages they can
-crawl. An invalid `robots.txt` configuration can cause two types of problems:
-
-- It can keep search engines from crawling public pages, causing your
-  content to show up less often in search results.
-- It can cause search engines to crawl pages you may not want shown in search
-  results.
-
-## How the Lighthouse `robots.txt` audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags invalid
-`robots.txt` files:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="robots-txt.png" alt="Lighthouse audit showing invalid robots.txt">
-</figure>
-
-{% Aside %}
-Most Lighthouse audits only apply to the page that you're currently on.
-However, since `robots.txt` is defined at the host-name level,
-this audit applies to your entire domain (or subdomain).
-{% endAside %}
-
-Expand the **`robots.txt` is not valid** audit in your report
-to learn what's wrong with your `robots.txt`.
-
-Common errors include:
-
-- `No user-agent specified`
-- `Pattern should either be empty, start with "/" or "*"`
-- `Unknown directive`
-- `Invalid sitemap URL`
-- `$ should only be used at the end of the pattern`
-
-Lighthouse doesn't check that your `robots.txt` file is
-in the correct location. To function correctly, the file must be in the root of
-your domain or subdomain.
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to fix problems with `robots.txt`
-
-### Make sure `robots.txt` doesn't return an HTTP 5XX status code
-
-If your server returns a server error (an [HTTP status code](/http-status-code)
-in the 500s) for `robots.txt`, search engines won't know which pages should be
-crawled. They may stop crawling your entire site, which would prevent new
-content from being indexed.
-
-To check the HTTP status code, open `robots.txt` in Chrome and
-[check the request in Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/network/reference#analyze).
-
-### Keep `robots.txt` smaller than 500 KiB
-
-Search engines may stop processing `robots.txt` midway through if the file is
-larger than 500 KiB. This can confuse the search engine, leading to incorrect
-crawling of your site.
-
-To keep `robots.txt` small, focus less on individually excluded pages and more
-on broader patterns. For example, if you need to block crawling of PDF files,
-don't disallow each individual file. Instead, disallow all URLs containing
-`.pdf` by using `disallow: /*.pdf`.
-
-### Fix any format errors
-
-- Only empty lines, comments, and directives matching the "name: value" format are
-allowed in `robots.txt`.
-- Make sure `allow` and `disallow` values are either empty or start with `/` or `*`.
-- Don't use `$` in the middle of a value (for example, `allow: /file$html`).
-
-#### Make sure there's a value for `user-agent`
-
-User-agent names to tell search engine crawlers which directives to follow. You
-must provide a value for each instance of `user-agent` so search engines know
-whether to follow the associated set of directives.
-
-To specify a particular search engine crawler, use a user-agent name from its
-published list. (For example, here's
-[Google's list of user-agents used for crawling](https://support.google.com/webmasters/answer/1061943).)
-
-Use `*` to match all otherwise unmatched crawlers.
-
-{% Compare 'worse', 'Don\'t' %}
-```text
-user-agent:
-disallow: /downloads/
-```
-No user agent is defined.
-{% endCompare %}
-
-{% Compare 'better', 'Do' %}
-```text
-user-agent: *
-disallow: /downloads/
-
-user-agent: magicsearchbot
-disallow: /uploads/
-```
-A general user agent and a `magicsearchbot` user agent are defined.
-{% endCompare %}
-
-#### Make sure there are no `allow` or `disallow` directives before `user-agent`
-
-User-agent names define the sections of your `robots.txt` file. Search engine
-crawlers use those sections to determine which directives to follow. Placing a
-directive _before_ the first user-agent name means that no crawlers will follow
-it.
-
-{% Compare 'worse', 'Don\'t' %}
-```text
-# start of file
-disallow: /downloads/
-
-user-agent: magicsearchbot
-allow: /
-```
-No search engine crawler will read the `disallow: /downloads` directive.
-{% endCompare %}
-
-{% Compare 'better', 'Do' %}
-```text
-# start of file
-user-agent: *
-disallow: /downloads/
-```
-All search engines are disallowed from crawling the `/downloads` folder.
-{% endCompare %}
-
-Search engine crawlers only follow directives in the section with the most
-specific user-agent name. For example, if you have directives for
-`user-agent: *` and  `user-agent: Googlebot-Image`, Googlebot Images will only
-follow the directives in the `user-agent: Googlebot-Image` section.
-
-#### Provide an absolute URL for `sitemap`
-
-[Sitemap](https://support.google.com/webmasters/answer/156184) files are a
-great way to let search engines know about pages on your website. A sitemap file generally includes a list of
-the URLs on your website, together with information about when they were last
-changed.
-
-If you choose to submit a sitemap file in `robots.txt`, make sure to
-use an [absolute URL](https://tools.ietf.org/html/rfc3986#page-27).
-
-{% Compare 'worse', 'Don\'t' %}
-```text
-sitemap: /sitemap-file.xml
-```
-{% endCompare %}
-
-{% Compare 'better', 'Do' %}
-```text
-sitemap: https://example.com/sitemap-file.xml
-```
-{% endCompare %}
-
-## Resources
-
-- [Source code for **`robots.txt` is not valid** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/robots-txt.js)
-- [Create a `robots.txt file`](https://support.google.com/webmasters/answer/6062596)
-- [Robots.txt](https://moz.com/learn/seo/robotstxt)
-- [Robots meta tag and X-Robots-Tag HTTP header specifications](https://developers.google.com/search/reference/robots_meta_tag)
-- [Learn about sitemaps](https://support.google.com/webmasters/answer/156184)
-- [Google crawlers (user agents)](https://support.google.com/webmasters/answer/1061943)
diff --git a/src/site/content/en/lighthouse-seo/robots-txt/robots-txt.png b/src/site/content/en/lighthouse-seo/robots-txt/robots-txt.png
deleted file mode 100644
index 0e71b399fc3..00000000000
Binary files a/src/site/content/en/lighthouse-seo/robots-txt/robots-txt.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/structured-data/index.md b/src/site/content/en/lighthouse-seo/structured-data/index.md
deleted file mode 100644
index 3b7901c4dda..00000000000
--- a/src/site/content/en/lighthouse-seo/structured-data/index.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: post
-title: Structured data is valid
-description: |
-  Learn about the "Structured data is valid" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - structured-data
----
-
-Search engines use structured data to understand what kind of content is on
-your page. For example, you can tell search engines that your page is an
-article, a job posting, or an FAQ.
-
-Marking up your content with structured data makes it more likely that it will
-be included in rich search results. For example, content marked up as an article
-might appear in a list of top stories relevant to something the user searched
-for.
-
-{% Aside 'note' %}
-The [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-structured data audit is manual, so it does not affect your Lighthouse SEO
-score.
-{% endAside %}
-
-## How to mark up your content
-
-1. Identify the [content type](https://developers.google.com/search/docs/guides/mark-up-content#content_types)
-   that represents your content.
-1. Create the structured data markup using the [reference docs for that content type](https://developers.google.com/search/docs/guides/search-gallery).
-1. Insert the markup into each page you wish to make eligible to search engines.
-1. Run the
-[Structured Data Linter](http://linter.structured-data.org/)
-to validate your structured data.
-1. Test how the markup works in Google Search using the [Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool/).
-
-See Google's [Mark Up Your Content Items](https://developers.google.com/search/docs/guides/mark-up-content)
-page for more information.
-
-## Resources
-
-- [Source code for **Structured data is valid** audit](https://github.com/GoogleChrome/lighthouse/blob/ecd10efc8230f6f772e672cd4b05e8fbc8a3112d/lighthouse-core/audits/seo/manual/structured-data.js)
-- [Mark Up Your Content Items](https://developers.google.com/search/docs/guides/mark-up-content)
-- [Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool/)
-- [Structured Data Linter](http://linter.structured-data.org/)
-- [Google search gallery](https://developers.google.com/search/docs/guides/search-gallery)
diff --git a/src/site/content/en/lighthouse-seo/tap-targets/index.md b/src/site/content/en/lighthouse-seo/tap-targets/index.md
deleted file mode 100644
index 37bd9a8ab74..00000000000
--- a/src/site/content/en/lighthouse-seo/tap-targets/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Tap targets are not sized appropriately
-description: |
-  Learn about the "Tap targets are not sized appropriately" Lighthouse audit.
-date: 2019-05-02
-updated: 2019-08-21
-web_lighthouse:
-  - tap-targets
----
-
-Tap targets are the areas of a web page that users on touch devices can
-interact with. Buttons, links, and form elements all have tap targets.
-
-Many search engines rank pages based on how mobile-friendly they are. Making
-sure tap targets are big enough and far enough apart from each other makes
-your page more mobile-friendly and accessible.
-
-## How the Lighthouse tap targets audit fails
-
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) flags pages
-with tap targets that are too small or too close together:
-
-<figure class="w-figure">
-  <img class="w-screenshot" src="tap-targets.png" alt="Lighthouse audit showing inappropriately sized tap targets">
-</figure>
-
-Targets that are smaller than 48&nbsp;px by 48&nbsp;px or closer than 8&nbsp;px
-apart fail the audit. When the audit fails, Lighthouse lists the results in a
-table with three columns:
-
-<div class="w-table-wrapper">
-  <table>
-    <tbody>
-      <tr>
-        <td><strong>Tap Target</strong></td>
-        <td>The tap target that is inappropriately sized.</td>
-      </tr>
-      <tr>
-        <td><strong>Size</strong></td>
-        <td>The size of the target's bounding rectangle in pixels.</td>
-      </tr>
-      <tr>
-        <td><strong>Overlapping Target</strong></td>
-        <td>Which other tap targets, if any, are too close.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% include 'content/lighthouse-seo/scoring.njk' %}
-
-## How to fix your tap targets
-
-**Step 1:** Increase the size of tap targets that are too small.
-Tap targets that are 48&nbsp;px by 48&nbsp;px never fail the audit. If you have
-elements that shouldn't _appear_ any bigger (for example, icons), try increasing
-the `padding` property:
-
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot" src="touch-target.jpg" alt="Appropriately-sized tap targets">
-  <figcaption class="w-figcaption">
-    Use <code>padding</code> to make tap targets bigger without changing the appearance of an element.
-  </figcaption>
-</figure>
-
-**Step 2:** Increase the spacing between tap targets that are too close together
-using properties like `margin`. There should be at least 8&nbsp;px between
-tap targets.
-
-## Resources
-
-- [Accessible tap targets](/accessible-tap-targets): more information on how to ensure your tap targets are accessible by all users.
-- [Source code for **Tap targets are not sized appropriately** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/tap-targets.js)
diff --git a/src/site/content/en/lighthouse-seo/tap-targets/tap-targets.png b/src/site/content/en/lighthouse-seo/tap-targets/tap-targets.png
deleted file mode 100644
index d59d4c59082..00000000000
Binary files a/src/site/content/en/lighthouse-seo/tap-targets/tap-targets.png and /dev/null differ
diff --git a/src/site/content/en/lighthouse-seo/tap-targets/touch-target.jpg b/src/site/content/en/lighthouse-seo/tap-targets/touch-target.jpg
deleted file mode 100644
index 5b90f7ee48f..00000000000
Binary files a/src/site/content/en/lighthouse-seo/tap-targets/touch-target.jpg and /dev/null differ
diff --git a/src/site/content/en/live/banner.png b/src/site/content/en/live/banner.png
deleted file mode 100644
index b806c11e10a..00000000000
Binary files a/src/site/content/en/live/banner.png and /dev/null differ
diff --git a/src/site/content/en/live/hero-bg.png b/src/site/content/en/live/hero-bg.png
deleted file mode 100644
index 4ebe6c9aefc..00000000000
Binary files a/src/site/content/en/live/hero-bg.png and /dev/null differ
diff --git a/src/site/content/en/live/hero.png b/src/site/content/en/live/hero.png
deleted file mode 100644
index 59cd5873645..00000000000
Binary files a/src/site/content/en/live/hero.png and /dev/null differ
diff --git a/src/site/content/en/live/index.njk b/src/site/content/en/live/index.njk
deleted file mode 100644
index 4cdbf9ea86b..00000000000
--- a/src/site/content/en/live/index.njk
+++ /dev/null
@@ -1,315 +0,0 @@
----
-layout: layout
-title: web.dev LIVE
-description: |
-  Bringing web developers together, from home
-show_banner: false
-date: 2020-06-31
----
-
-<div class="w-live-landing-page">
-
-  {% if event.isDuringEvent %}
-    <section class="w-livestream-section w-live-flow">
-      <web-livestream-container>
-        <div class="web-livestream-container__skeleton-yt"></div>
-        <div class="web-livestream-container__skeleton-chat"></div>
-      </web-livestream-container>
-      <div class="w-live-chat-notice">
-        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 8h10c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2H6l-4 4V10c0-1.1.9-2 2-2zm0 8h10v-6H4v6z" fill="#5F6368"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2h10c1.1 0 2 .9 2 2v12l-4-4v-2h2V4H10v2H8V4c0-1.1.9-2 2-2z" fill="#5F6368"/></svg>
-        <span>Live chat is available on desktop browsers</span>
-      </div>
-    </section>
-  {% endif %}
-
-  {% if event.isPreEvent%}
-    <div class="w-hero-overflow w-live-flow" data-live>
-      <section class="w-event-section w-hero-section">
-        <div class="w-event-section__column-left">
-          <div class="w-event-heading">
-            <h1 class="w-event-heading__logo">web.dev<span>/LIVE</span>
-              <video width="156" height="72" autoplay muted loop playsinline>
-                <source src="live.mp4" type="video/mp4" />
-                <img src="live.png" alt="live" />
-              </video>
-            </h1>
-            <p class="w-event-heading__subhead">June 30 &mdash; July 2, 2020</p>
-          </div>
-        </div>
-        <div class="w-event-section__column-head w-event-hero">
-          <img src="hero.png" alt="" />
-        </div>
-        <div class="w-event-section__column-right w-event-section__column-right--extra-padding">
-          <h2 class="w-mt--non">
-            Bringing web developers together, from home
-          </h2>
-          <p>
-            These are unprecedented times, with people worldwide looking to stay connected and informed.
-            The Web plays a special role here, and we're proud to see how the community has stepped up.
-          </p>
-          <p>
-            Join Google's Web Platform team, from the comfort of your homes, to celebrate our community's actions, learn modern web techniques and connect with each other.
-          </p>
-          <div class="w-event-buttons">
-            <a class="w-button w-button--primary gc-analytics-event" data-category="web.dev" data-label="scroll-to-subscribe" data-action="click" href="#subscribe">
-              Get notified
-            </a>
-            <div class="w-event-calendar">
-              <div class="w-event-calendar__note">
-                <span>Add to calendar</span>
-              </div>
-              <a class="w-button w-button--secondary w-button--small gc-analytics-event" data-category="web.dev" data-label="live, add to Google Calendar" data-action="click" target="_blank"
-                href="https://calendar.google.com/calendar/r?cid=webcal://calendar.google.com/calendar/ical/c_ta9vmmo7jqm7j2bqgg3bsn47oc%40group.calendar.google.com/public/basic.ics"
-                rel="noopener">
-                Google
-              </a>
-              <a class="w-button w-button--secondary w-button--small gc-analytics-event" data-category="web.dev" data-label="live, add to iCal" data-action="click" target="_blank"
-                href="webcal://calendar.google.com/calendar/ical/c_ta9vmmo7jqm7j2bqgg3bsn47oc%40group.calendar.google.com/public/basic.ics"
-                rel="noopener">
-                iCal
-              </a>
-              <a class="w-button w-button--secondary w-button--small gc-analytics-event" data-category="web.dev" data-label="live, add to Outlook" data-action="click" target="_blank"
-                href="webcal://calendar.google.com/calendar/ical/c_ta9vmmo7jqm7j2bqgg3bsn47oc%40group.calendar.google.com/public/basic.ics"
-                rel="noopener">
-                Outlook
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-    <hr class="w-live-flow">
-  {% endif %}
-
-  {% if event.isPostEvent %}
-    <div class="w-hero-overflow w-live-flow">
-      <section class="w-event-section w-hero-section">
-        <div class="w-event-section__column-left">
-          <div class="w-event-heading w-event-heading--smaller w-display--mobile-only">
-            <h1 class="w-event-heading__logo">web.dev<span>/LIVE</span>
-              <video width="156" height="72" autoplay muted loop playsinline>
-                <source src="live.mp4" type="video/mp4" />
-                <img src="live.png" alt="live" />
-              </video>
-            </h1>
-            <p class="w-event-heading__subhead">June 30 &mdash; July 2, 2020</p>
-          </div>
-        </div>
-        <div class="w-event-section__column-head w-event-hero w-pb--non">
-          <img src="hero.png" alt="" />
-        </div>
-      </section>
-    </div>
-  {% endif %}
-
-  <section id="schedule" class="w-event-section w-schedule-section w-live-flow">
-    {% if event.isPreEvent %}
-      <div class="w-event-section__column-left">
-        <h3 class="w-mt--non">What to expect</h3>
-        <p>
-          Over three days, we'll share quick tips on aspects of modern web development.
-          Each day, <strong>we'll "travel" to a new timezone</strong> to cover a couple of topics and answer your questions.
-        </p>
-        <a href="/community-guidelines/" class="w-event-link">Community guidelines</a>
-      </div>
-    {% endif %}
-
-    {% if event.isDuringEvent or event.isPostEvent %}
-      {# Note that we have more than one web-event-carousel.
-          We display one on mobile and a different one on desktop.
-          Their positions are pretty different so using two elements is the easiest approach. #}
-      <web-event-carousel class="w-event-carousel w-display--mobile-only">
-        {# These just exist as dummy HTML elements for the first render. They're replaced by the
-            web-event-carousel CE when it loads. #}
-        <div class="w-event-carousel__day">
-          <div class="w-event-carousel__thumbnail"></div>
-          <div class="w-event-carousel__description">Day 1</div>
-        </div>
-        <div class="w-event-carousel__day">
-          <div class="w-event-carousel__thumbnail"></div>
-          <div class="w-event-carousel__description">Day 2</div>
-        </div>
-        <div class="w-event-carousel__day">
-          <div class="w-event-carousel__thumbnail"></div>
-          <div class="w-event-carousel__description">Day 3</div>
-        </div>
-      </web-event-carousel>
-    {% endif %}
-
-    {% if event.isDuringEvent %}
-      <div class="w-event-section__column-left">
-        <div class="w-event-heading w-event-heading--smaller">
-          <h1 class="w-event-heading__logo">web.dev<span>/LIVE</span>
-            <video width="156" height="72" autoplay muted loop playsinline>
-              <source src="live.mp4" type="video/mp4" />
-              <img src="live.png" alt="live" />
-            </video>
-          </h1>
-          <p class="w-event-heading__subhead">June 30 &mdash; July 2, 2020</p>
-        </div>
-        <p>
-          Thank you for joining us for web.dev LIVE! Over the three days, we'll
-          bring unique content to three different time zones and answer your
-          questions real-time, in your active hours. We encourage you to join us
-          on all three days but if that's not possible, you can watch the videos
-          on demand and leave your questions in the Comments section on YouTube
-          and we'll try our best to respond over the three days of the event.
-        </p>
-        <a href="https://docs.google.com/forms/d/e/1FAIpQLSdkWh94xheuR3Y_p0z6GML0AkdWLCa767KhFXBUPM3VI9-jCA/viewform" target="_blank" class="w-feedback-button w-button w-button--primary" rel="noopener">
-          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H6l-4 4 .01-18c0-1.1.89-2 1.99-2zm0 14h16V4H4v12zm6.5-2H18v-2h-5.5l-2 2zm3.86-6.58c.2.2.2.51 0 .71L8.47 14H6v-2.47l5.88-5.88c.2-.2.51-.2.71 0l1.77 1.77z" fill="#fff"/>
-          </svg>
-          Share Feedback
-        </a>
-        <a href="/community-guidelines/" class="w-event-link">Community guidelines</a>
-      </div>
-    {% endif %}
-
-    {% if event.isPostEvent %}
-      <div class="w-event-section__column-left">
-        <div class="w-event-heading w-event-heading--smaller w-display--desktop-only">
-          <h1 class="w-event-heading__logo">web.dev<span>/LIVE</span>
-            <video width="156" height="72" autoplay muted loop playsinline>
-              <source src="live.mp4" type="video/mp4" />
-              <img src="live.png" alt="live" />
-            </video>
-          </h1>
-          <p class="w-event-heading__subhead">June 30 &mdash; July 2, 2020</p>
-        </div>
-        <p>
-          web.dev LIVE is now over but you can watch the videos from all three
-          days here, go through the top community questions or join one of the
-          live regional events being hosted by Google Developer Groups across
-          the world!
-        </p>
-        <div class="w-event-section__internal-links">
-          <a href="#q-and-a">
-            <svg class="w-event-icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 11c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1H1C.45 0 0 .45 0 1v14l4-4h10zm-1-9v7H2V2h11zm4 2h2c.55 0 1 .45 1 1v15l-4-4H5c-.55 0-1-.45-1-1v-2h13V4z" fill="#5F6368"/></svg>
-            <span>Q &amp; A</span>
-          </a>
-          <a href="#regional-events">
-            <svg class="w-event-icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm11.99 4c.9 0 1.64.59 1.9 1.4A7.991 7.991 0 0020 12c0-3.35-2.08-6.23-5.01-7.41V5c0 1.1-.9 2-2 2h-2v2c0 .55-.45 1-1 1h-2v2h6c.55 0 1 .45 1 1v3h1z" fill="#5F6368"/></svg>
-            <span>Regional events</span>
-          </a>
-        </div>
-      </div>
-    {% endif %}
-
-    <div class="w-event-section__column-right w-event-section__column-right__schedule">
-      {% if event.isDuringEvent or event.isPostEvent %}
-      {# Note that we have more than one web-event-carousel.
-          We display one on mobile and a different one on desktop.
-          Their positions are pretty different so using two elements is the easiest approach. #}
-        <web-event-carousel class="w-event-carousel">
-          {# These just exist as dummy HTML elements for the first render. They're replaced by the
-             web-event-carousel CE when it loads. #}
-          <div class="w-event-carousel__day">
-            <div class="w-event-carousel__thumbnail"></div>
-            <div class="w-event-carousel__description">Day 1</div>
-          </div>
-          <div class="w-event-carousel__day">
-            <div class="w-event-carousel__thumbnail"></div>
-            <div class="w-event-carousel__description">Day 2</div>
-          </div>
-          <div class="w-event-carousel__day">
-            <div class="w-event-carousel__thumbnail"></div>
-            <div class="w-event-carousel__description">Day 3</div>
-          </div>
-        </web-event-carousel>
-      {% endif %}
-      {% EventTable event.days, collections.authors %}
-    </div>
-  </section>
-  <hr class="w-live-flow">
-
-  {% if event.isPostEvent %}
-    <section id="q-and-a" class="w-event-section w-q-and-a-section w-live-flow">
-      <div class="w-event-section__column-left">
-        <h3 class="w-event-icon-heading w-mt--non">
-          <svg class="w-event-icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 11c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1H1C.45 0 0 .45 0 1v14l4-4h10zm-1-9v7H2V2h11zm4 2h2c.55 0 1 .45 1 1v15l-4-4H5c-.55 0-1-.45-1-1v-2h13V4z" fill="#5F6368"/></svg>
-          <span>Q &amp; A</span>
-        </h3>
-        <p>
-          During web.dev LIVE, we were happy to address some very insightful and
-          interesting questions from the community across the globe. Here are
-          some of the top questions asked.
-        </p>
-        <p>
-          Keep an eye on this space as we add more questions in the coming days.
-        </p>
-        <a href="/live#content" class="w-back-to-top-link">Back to top</a>
-      </div>
-
-
-      <div class="w-event-section__column-right">
-        <web-event-q-and-a>
-        {%- for entry in event.qAndAs  %}
-          <details class="web-event-q-and-a__details" data-category="{{entry.category}}">
-            <summary><span>Q.</span>{{entry.question}}</summary>
-            <p><span>A.</span>{{entry.answer | safe}}</p>
-          </details>
-        {%- endfor %}
-        </web-event-q-and-a>
-      </div>
-    </section>
-
-    <hr class="w-live-flow">
-  {% endif %}
-
-  <section id="regional-events" class="w-event-section w-live-flow">
-    <div class="w-event-section__column-left">
-      <h3 class="w-event-icon-heading w-mt--non">
-        <svg class="w-event-icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm11.99 4c.9 0 1.64.59 1.9 1.4A7.991 7.991 0 0020 12c0-3.35-2.08-6.23-5.01-7.41V5c0 1.1-.9 2-2 2h-2v2c0 .55-.45 1-1 1h-2v2h6c.55 0 1 .45 1 1v3h1z" fill="#5F6368"/></svg>
-        <span>Regional events</span>
-      </h3>
-      <p>
-        Missed web.dev LIVE? We’ve got you covered. Thanks to our Google Developer Group communities, we have a ton of live events.
-      </p>
-      <a href="/live#content" class="w-back-to-top-link">Back to top</a>
-    </div>
-
-    <div class="w-event-section__column-right">
-      <web-event-map key={{site.maps.apiKey}}></web-event-map>
-    </div>
-  </section>
-  <hr class="w-live-flow">
-
-  <section id="subscribe" class="w-event-section w-event-section--subscribe w-live-flow">
-    {% set subscribeTitle = "Sign up for web.dev updates" %}
-    {% set subscribeNotes = "Get updates related to web.dev LIVE as well as the latest news and techniques straight to your inbox." %}
-    {% include 'partials/subscribe.njk' %}
-  </section>
-  <hr class="w-live-flow">
-
-  <section id="share" class="w-event-section w-live-flow">
-    <div class="w-event-section__column-left">
-      <div class="w-display--flex w-flex--column w-align-items--center w-justify-content--center">
-        <div>
-          Share this event with your friends
-        </div>
-        <div class="w-event-buttons">
-          <share-action
-            message=" web.dev LIVE, a three day digital event for web developers by Google."
-            data-category="web.dev"
-            data-label="share"
-            data-action="click"
-            class="w-button w-button--primary w-button--with-icon w-mr--non gc-analytics-event"
-            data-icon="share"
-            tabindex="0"
-            role="button"
-          >
-            <span>
-              Share
-            </span>
-          </share-action>
-        </div>
-      </div>
-    </div>
-    <div class="w-event-section__column-right w-event-antihero">
-      <img src="hero.png" width="1572" height="394" alt="" />
-    </div>
-  </section>
-
-</div>
-
-<web-event-store style="display: none;">{{ event | dump | safe }}</web-event-store>
diff --git a/src/site/content/en/live/live.mp4 b/src/site/content/en/live/live.mp4
deleted file mode 100644
index ac3a2004ae8..00000000000
Binary files a/src/site/content/en/live/live.mp4 and /dev/null differ
diff --git a/src/site/content/en/live/live.png b/src/site/content/en/live/live.png
deleted file mode 100644
index d60f2eb9970..00000000000
Binary files a/src/site/content/en/live/live.png and /dev/null differ
diff --git a/src/site/content/en/measure/index.njk b/src/site/content/en/measure/index.njk
index 36b3694590c..446b8183ff1 100644
--- a/src/site/content/en/measure/index.njk
+++ b/src/site/content/en/measure/index.njk
@@ -1,162 +1,71 @@
 ---
-layout: layout
-title: Measure
+layout: default
+title: Measure page quality
 description: |
-  See how well your website performs. Then, get tips to improve your user
-  experience.
-date: 2018-11-05
+  Test your pages in a lab environment powered by PageSpeed Insights. Then get tips and recommendations to improve your user experience. For field performance, see the [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) tool.
+date: 2021-10-13
+pageScripts:
+  - '/js/measure.js'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure performance with PageSpeed Insights'
+  summary: |
+    PageSpeed Insights is a tool for measuring the performance and Core Web Vitals of a page with lab and field data.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: 'https://pagespeed.web.dev/'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: 'https://developers.google.com/speed/docs/insights/v5/about?hl=en-US&utm_source=PSI&utm_medium=incoming-link&utm_campaign=PSI#faq'
 ---
-{# *-landing-page classes are a holdover from devsite. #} {# It would be great
-to remove them as part of the v1 migration. #}
-<div class="profile-landing-page">
-
-  <div class="w-layout-container--large w-mb--std">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline">{{ title }}</h1>
-      <p class="w-page-header__copy">
-        See how well your website performs. Then, get tips to improve your user
-        experience.
-        <span data-lh-signin="hide">
-          Sign in to track your progress over time.
-        </span>
-      </p>
-      <web-signin-button></web-signin-button>
-      <p class="w-page-header__copy w-unsupported-notice">
-        Sorry, the measure tool does not work with legacy browsers or with
-        JavaScript disabled. Please try again using an up-to-date version of
-        Edge, Firefox, Safari, or Chrome.
-      </p>
-    </header>
-  </div>
-
-  <div class="w-measure-results">
-    <div class="w-layout-container">
-      <web-url-chooser-container></web-url-chooser-container>
-      <web-lighthouse-scores-container></web-lighthouse-scores-container>
-    </div>
-  </div>
-
-  <div class="w-layout-container w-mt--std">
-    <section class="w-numbered-headers">
-      <div class="w-measure-steps">
-        <div class="w-measure-step">
-          <h3 class="w-numbered-header w-numbered-header--vertical">
-            Run tests on your site
-          </h3>
-          <div>
-            Enter your site's URL to see how well it performs across all audits.
-          </div>
+<section>
+  <article class="bg-core-bg hero measure__page-speed-hero">
+    <div class="wrapper">
+      <div class="hero__columns switcher" data-direction="rev">
+        <div class="flow">
+          <img src="{{ pageSpeed.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ pageSpeed.imageWidth }}" height="{{ pageSpeed.imageHeight }}" />
         </div>
-
-        <div class="w-measure-step">
-          <h3 class="w-numbered-header w-numbered-header--vertical">
-            Look at what matters
-          </h3>
-          <div>
-            See your site's performance across the areas you care about.
+        <div>
+          <span aria-hidden="true" class="hero__eyebrow">{{ pageSpeed.eyebrow }}</span>
+          <div class="hero__content flow gap-top-size-5">
+            <h1 class="hero__title">{{ pageSpeed.title }}</h1>
+            {{ pageSpeed.summary | md | safe }}
+            <div class="cluster gutter-base flow-space-size-2">
+              <a class="button" 
+                data-type="primary"
+                data-category="web.dev"
+                data-label="measure, run audit"
+                data-action="click"
+                href="{{ pageSpeed.primaryButtonUrl }}"
+              >
+                {{ pageSpeed.primaryButtonText }}
+              </a>
+              <a class="button" data-type="secondary" href="{{ pageSpeed.secondaryButtonUrl }}">{{ pageSpeed.secondaryButtonText }}</a>
+            </div>
           </div>
         </div>
-
-        <div class="w-measure-step">
-          <h3 class="w-numbered-header w-numbered-header--vertical">
-            Get tips for improving
-          </h3>
-          <div>
-            Each test comes with helpful steps to improve your site's results.
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-
-  <div class="w-layout-container">
-    <section class="w-text--center">
-      <h2 class="no-link w-headline--two w-font-weight--medium">
-        How your site is measured
-      </h2>
-      <div class="w-mb--l">
-        When you measure your site, web.dev uses
-        <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>,
-        an open-source, automated tool for improving the quality of web pages.
-        Lighthouse will audit your site in the following categories:
       </div>
+    </div>
+  </article>
+</section>
 
-      <div class="w-measure-categories w-mb--xl">
-        <!-- PERFORMANCE -->
-        <div class="w-measure-category">
-          <img
-            src="/images/icons/performance.svg"
-            aria-describedby="lh-category-performance-title"
-          />
-          <div
-            class="w-headline--three w-mt--std"
-            id="lh-category-performance-title"
-          >
-            Performance
-          </div>
-          <div>
-            Audits for metrics like first paint and time to interactive to
-            determine lag.
-          </div>
-        </div>
-
-        <!-- BEST PRACTICES -->
-        <div class="w-measure-category">
-          <img
-            src="/images/icons/best_practices.svg"
-            aria-describedby="lh-category-best-practices-title"
-          />
-          <div
-            class="w-headline--three w-mt--std"
-            id="lh-category-best-practices-title"
-          >
-            Best Practices
-          </div>
-          <div>
-            Looks for everything from HTTPS usage to correct image aspect
-            ratios.
-          </div>
-        </div>
-
-        <!-- SEO -->
-        <div class="w-measure-category">
-          <img src="/images/icons/seo.svg" aria-describedby="lh-category-seo-title" />
-          <div class="w-headline--three w-mt--std" id="lh-category-seo-title">
-            SEO
-          </div>
-          <div>
-            Checks for best practices to ensure your site is discoverable.
-          </div>
-        </div>
+<section class="bg-mid-bg measure__section gap-top-size-1">
+  <div class="wrapper all-center flow">
+    <h2 class="no-link">The measure tool is moving to PageSpeed Insights</h2>
 
-        <!-- ACCESSIBILITY -->
-        <div class="w-measure-category">
-          <img
-            src="/images/icons/a11y.svg"
-            aria-describedby="lh-category-accessibility-title"
-          />
-          <div
-            class="w-headline--three w-mt--std"
-            id="lh-category-accessibility-title"
-          >
-            Accessibility
-          </div>
-          <div>
-            Checks for common issues that may prevent users from accessing your
-            content.
-          </div>
-        </div>
-      </div>
+    <p class="color-mid-text">
+      If you've been to this page before, you probably expected to see a field where you can input
+      a URL and get performance diagnostics for that page. This tool has been removed because of
+      the significant overlap it has with PageSpeed Insights.
+    </p>
 
-      <div>
-        All tests are run using a simulated mobile device, throttled to a fast
-        3G network &amp; 4x CPU slowdown.
-      </div>
-    </section>
+    <p class="color-mid-text">
+      Going forward, <a href="https://pagespeed.web.dev/">PageSpeed Insights</a> will be what you need.
+      It will give you detailed <a href="https://web.dev/lab-and-field-data-differences/#lab-data">lab</a>
+      insights into your website's performance, but also <a href="https://web.dev/lab-and-field-data-differences/#field-data">field</a>
+      data insights, which is important as it allows you to assess your website's user experience from the
+      perspective of your website's actual users.
+    </p>
   </div>
-
-</div>
-
-<code id="guide-audit-mapping" style="display: none;">
-  {{ collections.postsWithLighthouse | postsLighthouseJson | dump | safe }}
-</code>
+</section>
diff --git a/src/site/content/en/media/add-media/index.md b/src/site/content/en/media/add-media/index.md
new file mode 100644
index 00000000000..5046335dd3f
--- /dev/null
+++ b/src/site/content/en/media/add-media/index.md
@@ -0,0 +1,49 @@
+---
+layout: post
+title: Add media to a web page
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Embed a media file in a web page using the <video> and <source> tags.
+date: 2020-06-19
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+In this section you'll learn how to embed a media file in a web page using the
+`<video>` and `<source>` tags, how to add captions to a video for the
+hearing-impaired, and some general concepts for using media frameworks.
+Additionally, you'll learn about using preload to speed up playback start, and
+we will discuss how we built an updated demo PWA with offline adaptive
+streaming capabilities called Kino.
+
+This section assumes you have a video file that is ready for embedding in a web
+page. A `.mov` file downloaded from a camera will not work. If that's all you
+have, see [Prepare media files for the web](/prepare-media/) then come back.
+
+This section covers these topics.
+
+* In [The &lt;video> and &lt;source> tags](/video-and-source-tags/) you'll
+  learn specifically how to embed a media file in a web page.
+* In [Media accessibility](/media-accessibility/) you'll learn to add captions
+  to a media file for hearing impaired.
+* In [Media frameworks](/media-frameworks/) you'll learn basics about using
+  media frameworks like Shaka Player, JW Player, and Video.js.
+* In [Fast playback with audio and video preload](/fast-playback-with-preload/)
+  you'll learn to accelerate your media playback by actively preloading
+  resources.
+* In [PWA with offline streaming](/pwa-with-offline-streaming/) you'll learn how
+  we built an updated demo PWA that is capable of adaptive streaming and offline
+  playback without using frameworks. Plus you can play with source code.
+
+{% Aside %}
+Be sure not to skip the accessibility section. The technical aspects of
+supporting accessibility are not that difficult. They are also a regulatory or
+legal requirement in many places.
+{% endAside %}
+
+There is a lot of ground to cover in this section, get started by learning
+how to use the [&lt;video> and &lt;source> tags](/video-and-source-tags/).
diff --git a/src/site/content/en/media/bitrate/index.md b/src/site/content/en/media/bitrate/index.md
new file mode 100644
index 00000000000..01d32ab1071
--- /dev/null
+++ b/src/site/content/en/media/bitrate/index.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Bitrate
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Bitrate is the maximum number of bits used to encode one second of a stream.
+  The more bits used to encode a second of stream, the higher the fidelity.
+date: 2017-06-30
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+In the previous [Containers and codecs](/containers-and-codecs/) article, you
+learned how to change the container (extension) and codec of a media file. In
+this article, we'll show you how to change bitrate before explaining
+[resolution](/resolution/).
+
+Bitrate and resolution correlate to the amount of data in a media file. It
+probably goes without saying, but we're going to say it anyway. You can always
+lower bitrate and resolution, but increasing them is a problem. Without special
+software and algorithms, quality is going to take a hit.
+
+So always start your conversion process with the highest quality source file you
+can get your hands on. Before doing anything, even before changing the codec or
+container, check the file's
+[display characteristics](/media-conversion/#display-characteristics) and verify
+that your source file has a higher bitrate or resolution than your desired result.
+
+**Bitrate** is the maximum number of bits used to encode one second of a media
+stream. The more bits used to encode a second of stream, the higher the
+fidelity.
+
+Unsurprisingly, the different bitrates the web can handle are low. The table
+below shows you what bitrate you should target for common network conditions. For
+the sake of comparison, we've thrown in values for Blu-rays and DVDs.
+
+{% Aside 'warning' %}
+The web numbers are approximations. This chart should **not** be a substitute for
+doing your own testing.
+{% endAside %}
+
+| Delivery method | Bitrate |
+| --------------- | ------- |
+| Blu-ray | 20Mbs |
+| DVD | 6 Mbs |
+| Desktop web | 2 Mbs |
+| 4G mobile | 0.7 Mbs |
+| 3G mobile | 0.35 Mbs |
+| 2G mobile | **Depends on network type.**<br><br>EDGE: 0.4 Mbs<br>GPRS: 0.04Mbs |
+
+Which value should I use for video on my web pages? The short answer is at
+least: desktop, 4G, and 3G. If you're serving video in one of the markets
+referred to as "the next billion users", say India, for example, you'll want to
+include 2G as well. For demonstration purposes, we're going to target 3G.
+
+Using FFmpeg you set the bitrate with the (surprise!) bitrate (`-b`) flag.
+
+If you don't have FFmpeg installed read
+[Media application basics](/media-application-basics/#installing-applications-with-docker)
+to get it set up with Docker.
+
+1. MP4
+
+    ```bash
+    /media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k glocken_3g.mp4
+    ```
+
+1. WebM
+
+    ```bash
+    /media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k glocken_3g.webm
+    ```
+
+Notice that there are two bitrate flags, `-b:a` and `-b:v`. One is for the audio
+stream, and the other is for the video stream.
+
+```bash
+/media # ls -l
+-rw-r--r-- 1 root root  12080306 Mar  7 12:16 glocken.mov
+-rwx------ 1 root root    531117 Mar  7 13:42 glocken_3g.mp4
+-rwx------ 1 root root    706119 Mar  7 13:46 glocken_3g.webm
+```
+
+Now that your files are prepared, it's time to [adjust their resolutions](/resolution).
diff --git a/src/site/content/en/media/containers-and-codecs/index.md b/src/site/content/en/media/containers-and-codecs/index.md
new file mode 100644
index 00000000000..c9fd9eb1079
--- /dev/null
+++ b/src/site/content/en/media/containers-and-codecs/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Containers and codecs
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Media files are a bit like onions. The file that you see in your operating
+  system shell is only a container with multiple data streams and different
+  allowable types of encodings.
+date: 2017-06-30
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+To support multiple browsers, you'll need to use FFmpeg to convert your `.mov`
+file to two different containers: an MP4 container and a WebM container. In
+actual practice, you would likely specify a codec at the same time. For now,
+we're letting FFmpeg use its defaults.
+
+If these concepts are new to you, you should read
+[Media file basics](/media-file-basics/#containers-and-codecs-and-streams)
+before going further. Additionally, if you don't have FFmpeg installed read
+[Media application basics](/media-application-basics/#installing-applications-with-docker)
+to get it set up with Docker.
+
+**We are using the suggested Docker install and
+the [glocken.mov] file from [Prepare media files for the web](/prepare-media/)
+added inside the `media` directory. We used FFmpeg version 4.3.2 for all the
+commands in this section.**
+
+{% Aside 'caution' %}
+If the commands don't work for your version of FFmpeg, consult the FFmpeg
+documentation.
+{% endAside %}
+
+## Containers
+
+First, we need to create our two containers from the `.mov` file with the `.mp4`
+and `.webm` file extensions with both an audio and video stream inside the file.
+Review [Media file basics](/media-file-basics/#containers-and-codecs-and-streams)
+for more about containers and streams if you don't know the different between
+them.
+
+1. MP4
+
+    ```bash
+    /media # ffmpeg -i glocken.mov glocken.mp4
+    ```
+
+1. WebM
+
+    ```bash
+    /media # ffmpeg -i glocken.mov glocken.webm
+    ```
+
+WebM takes longer to create than MP4. This isn't surprising when you look at
+the results. While MP4 compresses to about `83%` of the original file's
+size, WebM is down to `78%` of the original's size, but can be much smaller.
+Your results will vary. It's important to call out that FFmpeg `4.2.2` set the
+default video bitrate to `200k` and in `4.3.2` it does not set a default bitrate.
+So the video is no longer  **a mere`4%` of the original**. You can see this for yourself
+using the `ls -a` [bash command] in the folder where your media files are located.
+
+For example:
+
+```bash
+/media # ls -l
+-rw-r--r-- 1 root  root  12080306 Mar 7 12:16 glocken.mov
+-rwx------ 1 root  root  10106446 Mar 7 12:33 glocken.mp4
+-rwx------ 1 root  root   9503301 Mar 7 18:30 glocken.webm
+```
+
+To get a tiny file, you would do this instead:
+
+```bash
+/media # ffmpeg -i glocken.mov -b:v 200k glocken.webm
+...
+frame=  300 fps=3.6 q=0.0 Lsize=     483kB time=00:00:10.01 bitrate= 395.0kbits/s speed=0.121x
+video:359kB audio:117kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.356068%
+/media # ls -l
+-rw-r--r-- 1 root  root  12080306 Mar 7 12:16 glocken.mov
+-rwx------ 1 root  root  10106446 Mar 7 12:33 glocken.mp4
+-rwx------ 1 root  root    494497 Mar 7 18:45 glocken.webm
+```
+
+### Check your work
+
+To verify your results, use FFmpeg and Shaka Packager as already shown in
+[Media Application basics](/media-application-basics):
+
+```bash
+/media # packager input=glocken.mp4 --dump_stream_info
+```
+
+```bash
+/media # ffmpeg -i glocken.mp4
+```
+
+## Codecs
+
+Next, the codec. As stated in [Media file basics](/media-file-basics), a codec
+is _not_ the same thing as a container (file type). Two files of the same container
+type could hold data compressed using different codecs. The WebM format for example
+allows audio to be encoded using either [Vorbis] or [Opus]. To change the codec we
+use FFmpeg. For example, this command outputs an `.mkv` file with a `vorbis` audio
+codec and an `av1` video codec.
+
+```bash
+/media # ffmpeg -i glocken.mov -c:a vorbis -c:v av1 glocken.mkv
+```
+
+In this example, the `-c:a` flag and the `-c:v` are for specifying the audio and
+video codecs respectively.
+
+The [Media conversion](/media-conversion/#change-characteristics) page lists
+commands needed to convert codecs. The tables below summarize the libraries used
+in FFmpeg to perform the codec conversions for WebM and MP4 files. These are the
+formats recommended for DASH and HLS respectively.
+
+### Video
+
+| Codec | Extension    | Library    |
+| ----- | ------------ | ---------- |
+| av1   | WebM, mkv    | libaom-av1 |
+| h264  | MP4          | libx264    |
+| vp9   | WebM         | libvpx-vp9 |
+
+### Audio
+
+| Codec  | Extension | Library    |
+| ------ | --------- | ---------- |
+| aac    | MP4       | aac        |
+| opus   | WebM      | libopus    |
+| vorbis | WebM      | libvorbis  |
+
+Next, we'll show you how to change the [bitrate](/bitrate/) of your newly created files.
+
+[glocken.mov]: https://storage.googleapis.com/web-dev-assets/prepare-media/glocken.mov
+[bash command]: https://en.wikipedia.org/wiki/Ls
+[Vorbis]: https://en.wikipedia.org/wiki/Vorbis
+[Opus]: https://en.wikipedia.org/wiki/Opus_(audio_format)
diff --git a/src/site/content/en/media/debug-playback-errors/index.md b/src/site/content/en/media/debug-playback-errors/index.md
new file mode 100644
index 00000000000..b3025915a16
--- /dev/null
+++ b/src/site/content/en/media/debug-playback-errors/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Debug media playback errors on the web
+authors:
+  - beaufortfrancois
+description: |
+  Learn how to debug media playback errors on the web.
+date: 2022-04-12
+tags:
+  - media
+---
+
+Debugging HTML media elements, such as `<video>` and `<audio>`, can be hard as decoder implementations vary in what they consider errors (hardware decoders generally being the most strict), especially when a playback may use more esoteric features of a particular codec. Luckily for us, there are a variety of tools we can leverage to help.
+
+{% Aside 'objective' %}
+The goal of this section is to give you some tools to debug media playback errors on the web.
+{% endAside %}
+
+When debugging media playback errors, the first thing we usually check out is the [MediaError] `error` attribute on the HTML media element. This attribute is a high level hint of what caused the media playback error. The property [`MediaError.code`] returns a numeric value which represents the kind of error that occurred on a media element. The other property `MediaError.message` may provide a string with some diagnostic information from the browser.
+
+```js
+const video = document.querySelector('video');
+video.addEventListener('error', () => {
+  console.log('Error code: ' + video.error.code);
+  console.log('Error message: ' + video.error.message);
+});
+```
+
+These properties are most useful for telemetry analysis, and may not always provide enough information to debug playback errors. For privacy reasons, the full error text must sometimes be omitted.
+
+To access complete error information use the Chrome DevTools ["Media Panel"] to view media logs. You will find plenty of information such as events, warnings, and error messages that will give you some good hints of the media playback errors.
+
+<figure>
+  {% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/rD4O3Aqj42MAMxHbBK4X.png", alt="Screenshot of the Media Panel in Chrome DevTools", width="800", height="375" %}
+  <figcaption>Media Panel in Chrome DevTools.</figcaption>
+</figure>
+
+You can also use the [FFmpeg] free application to [check media file integrity] thanks to this command:
+
+```bash
+ffmpeg -err_detect explode -i <file> -f null -
+```
+
+Here are some errors you could get with these commands for a video file with invalid codec:
+
+```bash
+[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fc62df05380] Could not find codec parameters for stream 0 (Video: none (zzzz / 0x7A7A7A7A), none(smpte170m/smpte170m/bt709, progressive), 320x240, 4 kb/s): unknown codec
+Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
+```
+
+```bash
+[matroska,webm @ 0x7fd45b705380] Unknown EBML doctype '0000'
+```
+
+```bash
+[matroska,webm @ 0x7f8d17904d40] Element at 0x8b ending at 0x10400000095 exceeds containing master element ending at 0x9b
+Truncating packet of size 9069 to 94
+```
+
+The [MP4Box.js / ISOBMFF Box Structure Viewer] is a useful tool to debugging bitstream issues. It does require already understanding MP4 to use though.
+
+Finally, some video stream analysis professional tools like [VQAnalyzer], [Elecard StreamEye], and [Codecian CodecVisa], may be worth your money.
+
+[mediaerror]: https://developer.mozilla.org/docs/Web/API/MediaError
+[`mediaerror.code`]: https://developer.mozilla.org/docs/Web/API/MediaError/code#media_error_code_constants
+["media panel"]: https://developer.chrome.com/docs/devtools/media-panel/
+[ffmpeg]: /media-application-basics/#ffmpeg
+[check media file integrity]: https://www.ffmpeg.org/ffmpeg-codecs.html#:~:text=err_detect
+[mp4box.js / isobmff box structure viewer]: https://gpac.github.io/mp4box.js/test/filereader.html
+[vqanalyzer]: https://vicuesoft.com/vq-analyzer/
+[elecard streameye]: https://www.elecard.com/products/video-analysis/streameye
+[codecian codecvisa]: http://www.codecian.com/
diff --git a/src/site/content/en/media/index.md b/src/site/content/en/media/index.md
new file mode 100644
index 00000000000..1d8c97e25bf
--- /dev/null
+++ b/src/site/content/en/media/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2020-06-19
+pathName: media
+---
diff --git a/src/site/content/en/media/media-accessibility/index.md b/src/site/content/en/media/media-accessibility/index.md
new file mode 100644
index 00000000000..0ed7e5ed2fa
--- /dev/null
+++ b/src/site/content/en/media/media-accessibility/index.md
@@ -0,0 +1,185 @@
+---
+layout: post
+title: Media accessibility
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Accessibility isn't like icing on a cake. It's never anything you put on a
+  backlog with the hope of introducing later. Captions and screen reader
+  descriptions are the only way many users can experience your videos, and in
+  some jurisdictions, they're even required by law or regulation.
+date: 2020-08-20
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+  - accessibility
+---
+
+In this article you will learn about the WebVTT (Web Video Text Tracks) format,
+which is used to describe timed text data such as closed captions or subtitles
+in order to make videos more accessible to your audience.
+
+Accessibility isn't like icing on a cake. It's never anything you put on a
+backlog with the hope of introducing it later. Captions and screen reader
+descriptions are the only way many users can experience your videos, and in some
+jurisdictions, they're even required by law or regulation.
+
+## Add `<track>` tags
+
+To add captions or screen reader descriptions to a web video, add a [`<track>`]
+tag within a `<video>` tag. In addition to captions and screen reader
+descriptions, `<track>` tags may also be used for subtitles and chapter titles.
+The `<track>` tag can also help search engines understand what's in a video.
+However, those capabilities are outside the scope of this article.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vbNDp5R05MwQmsxZ0RLI.jpg", alt="Screenshot showing captions displayed using the track element in Chrome on Android", width="800", height="480" %}
+  <figcaption>Screenshot showing captions displayed using the
+track element in Chrome on Android</figcaption>
+</figure>
+
+The `<track>` tag is similar to the `<source>` element in that both have a `src`
+attribute that points to referenced content. For a `<track>` tag, it points to a
+[WebVTT file]. The `label` attribute specifies how a particular track will be
+identified in the interface.
+
+To provide tracks for multiple languages add a separate `<track>` tag for each
+WebVTT file you're providing and indicate the language using the `srclang`
+attribute.
+
+An example `<video>` tag with two `<track>` tags is shown below. There's also a
+sample you can [view on Glitch] ([source]).
+
+Add a `<track>` element as a child of the `<video>` element:
+
+```html/3
+<video controls>
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
+  <track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
+  <track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
+  <p>This browser does not support the video element.</p>
+</video>
+```
+
+{% Aside %}
+Notice in the example on **line 4** that the `default` attribute indicates which
+language track is the default.
+{% endAside %}
+
+## WebVTT file structure
+
+Below is a hypothetical WebVTT file for the demo linked to above. The file is a
+text file containing a series of *cues*. Each cue is a block of text to display
+on screen, and the time range during which it will be displayed.
+
+```text
+WEBVTT
+
+00:00.000 --> 00:04.999
+Man sitting on a tree branch, using a laptop.
+
+00:05.000 --> 00:08.000
+The branch breaks, and he starts to fall.
+
+...
+```
+
+Each item within the track file is called a *cue*. Each cue has a start time and
+end time separated by an arrow, with cue text in the line below. Cues can
+optionally also have IDs like `railroad` and `manuscript` in the example below.
+Cues are separated by an empty line.
+
+```text
+WEBVTT
+
+railroad
+00:00:10.000 --> 00:00:12.500
+Left uninspired by the crust of railroad earth
+
+manuscript
+00:00:13.200 --> 00:00:16.900
+that touched the lead to the pages of your manuscript.
+```
+
+Cue times are in `hours:minutes:seconds.milliseconds` format. Parsing is strict.
+Meaning, numbers must be zero padded if necessary: hours, minutes, and seconds
+must have two digits (00 for a zero value) and milliseconds must have three
+digits (000 for a zero value). There is an excellent WebVTT validator at
+[Live WebVTT Validator], which checks for errors in time formatting, and
+problems such as non-sequential times.
+
+You can create a VTT file by hand, thought there are [many services] that will
+create them for you.
+
+As you can see in our previous examples, the WebVTT format is pretty simple.
+Just add your text data along with timings.
+
+However, what if you want your captions to render in a different position with
+left or right alignment? Perhaps to align the captions with the current speaker
+position, or to stay out of the way of in-camera text. WebVTT defines settings to do that,
+and more, directly inside the
+`.vtt` file. Take note of how the caption placement is defined by adding
+settings after the time interval definitions.
+
+```text
+WEBVTT
+
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+The first line of the subtitles.
+```
+
+Another handy feature is the ability to style cues using CSS. Perhaps you want
+to use a gray linear gradient as the background, with a foreground color of
+`papayawhip` for all captions and all bold text colored `peachpuff`.
+
+```css
+video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+```
+
+{% Aside 'gotchas' %}
+Be careful when coloring text to keep to high-contrast colors so as not to
+degrade readability.
+{% endAside %}
+
+If you're interested in learning more about styling and tagging of individual
+cues, the [WebVTT specification] is a good source for advanced examples.
+
+## Kinds of text tracks
+
+Did you notice the `kind` attribute of the `<track>` element? It's used to
+indicate what relation the particular text track has to the video. The
+possible values of the `kind` attribute are:
+
+* `captions`: For closed captions from transcripts and possibly translations
+  of any audio. Suitable for hearing impaired and in cases when the video is
+  playing muted.
+* `subtitles`: For subtitles, that is, translations of speech and text in a
+  language different from the main language of the video.
+* `descriptions`: For descriptions of visual parts of the video content.
+  Suitable for visually impaired people.
+* `chapters`: Intended to be displayed when the user is navigating within the
+  video.
+* `metadata`: Not visible, and may be used by scripts.
+
+Now that you understand the basics of making a video available and accessible
+on your web page, you might wonder about more complex use cases. Next up, you'll
+lean about [Media frameworks](/media-frameworks/) and how they can help you add
+videos to your web page while providing advanced features.
+
+[`<track>`]: https://developer.mozilla.org/docs/Web/HTML/Element/track
+[view on Glitch]: https://track-demonstration.glitch.me
+[source]: https://glitch.com/edit/#!/track-demonstration
+[WebVTT file]: https://developer.mozilla.org/docs/Web/API/WebVTT_API
+[Live WebVTT Validator]: https://quuz.org/webvtt/
+[many services]: https://www.google.com/search?q=webvtt+services
+[WebVTT specification]: https://w3c.github.io/webvtt/
diff --git a/src/site/content/en/media/media-application-basics/index.md b/src/site/content/en/media/media-application-basics/index.md
new file mode 100644
index 00000000000..bdb03656115
--- /dev/null
+++ b/src/site/content/en/media/media-application-basics/index.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: Media application basics
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Working with media often requires changing the characteristics of media files.
+  On this page, you'll learn about the tools used and how to install them quickly.
+date: 2017-06-09
+updated: 2021-08-30
+tags:
+  - media
+  # - video
+---
+
+Working with media often requires changing the characteristics of media files,
+such as bitrate or resolution. Finding a straightforward way to get started can
+be pretty intimidating. On this page, you will learn about the tools used and how
+to install them quickly.
+
+First, we describe the basic usage for two common command-line media utilities:
+[Shaka Packager] and [FFmpeg] and then we help you quickly get the tools installed.
+Why cover two applications? While both are powerful and useful by themselves,
+neither does everything needed to prepare media for the web. We also created the
+[Media conversion](/media-conversion/) and [Media encryption](/media-encryption/)
+pages which show many more common operations with these two applications.
+
+These applications aren't the only options available for file manipulation tasks,
+but they are two of the most common and powerful. Other options include the GUI
+applications [Miro], [HandBrake], and [VLC]. There are also encoding/transcoding
+services such as [Zencoder], [Amazon Elastic Encoder], and [Google Transcoder API]
+(currently in beta).
+
+{% Aside %}
+You'll notice in what follows that the word 'resolution' doesn't appear. What
+the two applications output are just the dimensions; the numbers themselves.
+That's because resolution is just an informal shorthand for the dimensions of a
+video. In every case that follows, We talk about specific numbers.
+{% endAside %}
+
+## Shaka Packager
+
+[Shaka Packager] is a free media packaging SDK. If you were using a media player
+on your site, Shaka Packager is what you would use to prepare the files. It
+supports conversion for the two most common video streaming protocols: Dynamic
+Adaptive Streaming over HTTP ([DASH]) or HTTP Live Streaming ([HLS]). Shaka
+Packager supports key security features: common encryption and Widevine digital
+rights management (DRM). It can also handle live-streaming, and video-on-demand.
+
+Despite what it says on the package, this utility is for more than C++
+developers. You can use it as both a library for building media software and as
+a command-line utility for preparing media files for web playback. It's the
+latter capacity that's useful for us here. In fact, for web media creators,
+Shaka Packager is the only way to do some tasks without spending money on
+expensive commercial applications.
+
+Here's the basic pattern for a Shaka Packager command:
+
+```bash
+packager stream_descriptor [stream_descriptor-2 [stream_descriptor-n]] [flags]
+```
+
+This isn't quite what you get if you type `packager -help`. This example is
+easier to reason about, and this reflects the examples in the
+[Shaka Packager documentation]. Note that there are multiple `stream_descriptor`
+items in the pattern. Though we don't show it, you could manipulate the video
+and audio streams of a file separately in a single command.
+
+Compare this basic pattern with a simple use that displays file characteristics.
+In the example, We've lined up equivalent parts.
+
+```bash
+packager stream_descriptor [stream_descriptor-n] [flags]
+
+packager input=glocken.mp4                       --dump_stream_info
+```
+
+The command outputs this:
+
+```bash
+File "glocken.mp4":
+Found 2 stream(s).
+Stream [0] type: Video
+ codec_string: avc1.640028
+ time_scale: 30000
+ duration: 300300 (10.0 seconds)
+ is_encrypted: false
+ codec: H264
+ width: 1920
+ height: 1080
+ pixel_aspect_ratio: 1:1
+ trick_play_factor: 0
+ nalu_length_size: 4
+
+Stream [1] type: Audio
+ codec_string: mp4a.40.2
+ time_scale: 48000
+ duration: 481280 (10.0 seconds)
+ is_encrypted: false
+ codec: AAC
+ sample_bits: 16
+ num_channels: 2
+ sampling_frequency: 48000
+ language: eng
+ seek_preroll_ns: 20833
+```
+
+Look for the characteristics discussed in [Media file basics](/media-file-basics/)
+and notice a few things. The height and width are correct for full HD, and the
+audio and video codecs are among the preferred codecs for their container types,
+AAC for audio and H264 for video. Notice also that streams are identified with
+numbers. These are useful for operations that manipulate the audio and video
+separately.
+
+Notice that the output above doesn't show the bitrate. Despite what's missing,
+this output is easier to read, so we use it whenever we can. When we need
+information that Shaka Packager can't get, such as the bitrate, we use FFmpeg.
+
+## FFmpeg
+
+[FFmpeg] is also a free application for recording, converting, and streaming
+media files. Its capabilities aren't better or worse than Shaka Packager's.
+They're just different.
+
+The basic pattern for an FFmpeg command looks like this:
+
+```bash
+ffmpeg [GeneralOptions] [InputFileOptions] -i input [OutputFileOptions] output
+```
+
+Like Shaka Packager this application can handle multiple streams. Some of its
+options are used in multiple locations and manipulate the file output differently
+depending on where they are in the command. Be aware of this as you
+look at [FFmpeg questions on Stack Overflow] and similar sites.
+
+We'll again compare the basic pattern to the example for displaying file
+characteristics.
+
+```bash
+    ffmpeg [GeneralOptions] [InputFileOptions] -i input        [OutputFileOptions] output
+
+    ffmpeg                                     -i glocken.mp4
+```
+
+In addition to the information we requested, this also prints an error message
+as shown in the example below. That's because this is technically an incorrect
+usage of FFmpeg. We use it because it displays information we care about.
+
+```bash
+Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'glocken.mp4':
+  Metadata:
+    major_brand     : isom
+    minor_version   : 512
+    compatible_brands: isomiso2avc1mp41
+    encoder         : Lavf58.17.100
+  Duration: 00:01:47.53, start: 0.000000, bitrate: 10715 kb/s
+    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuvj420p(pc), 1920x1080, 10579 kb/s, 29.97 fps, 29.97 tbr, 30k tbn, 59.94 tbc (default)
+    Metadata:
+      handler_name    : VideoHandler
+    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
+    Metadata:
+      handler_name    : SoundHandler
+At least one output file must be specified
+```
+
+## Installing applications with Docker
+
+If you plan to follow along and try our commands you could either install the
+required tools manually, or take the easy path and use [Docker]. We suggest using
+Docker, because this is going to save you a lot of time. On top of that we've
+provided the instructions to get you set up quickly.
+
+1. Start by creating a new directory somewhere on your computer named `media-tools`;
+   you can use whatever name you like, just note that the following instructions
+   assume you are using `media-tools` as the directory name.
+
+1. Create a `docker` and `media` directory inside of `media-tools`.
+   This will keep your `media` directory out of the build context. This is important
+   because `media` is where files are stored that we plan to do operations on, and
+   some of them could be quite large. Putting the `Dockerfile` directly in
+   `media-tools` would slow down building the image if you ever rebuild it down the
+   road—perhaps to change the versions installed.
+
+1. Create `/media-tools/docker/Dockerfile`, and add the following build instructions:
+
+    ```dockerfile
+    FROM google/shaka-packager:release-v2.4.3 as packager
+    FROM jrottenberg/ffmpeg:4.3.2-alpine38
+    COPY --from=packager /usr/bin /usr/bin
+    ENTRYPOINT  ["sh"]
+    ```
+
+1. Build the image:
+
+    ```bash
+    docker build -t media-tools ./docker
+    ```
+
+1. Run the image as an interactive shell. On Linux:
+
+    ```bash
+    docker run -w /media -v ${PWD}/media:/media -it --rm media-tools
+    /media #
+    ```
+
+    On Windows:
+
+    ```bash
+    docker run -w /media -v %cd%/media:/media -it --rm media-tools
+    /media #
+    ```
+
+{% Aside 'gotchas' %}
+Make sure you run the previous `docker` commands from inside the `media-tools`
+directory.
+{% endAside %}
+
+While running the image you can check versions for both FFmpeg and Shaka Packager
+to validate everything was successful by running `ffmpeg -version` and
+`packager --version`. The output should look like this:
+
+```bash
+/media # ffmpeg -version
+ffmpeg version 4.3.2 Copyright (c) 2000-2021 the FFmpeg developers
+built with gcc 6.4.0 (Alpine 6.4.0)
+configuration: --disable-debug --disable-doc --disable-ffplay --enable-shared --enable-avresample --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-gpl --enable-libass --enable-fontconfig --enable-libfreetype --enable-libvidstab --enable-libmp3lame --enable-libopus --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libxcb --enable-libx265 --enable-libxvid --enable-libx264 --enable-nonfree --enable-openssl --enable-libfdk_aac --enable-postproc --enable-small --enable-version3 --enable-libbluray --enable-libzmq --extra-libs=-ldl --prefix=/opt/ffmpeg --enable-libopenjpeg --enable-libkvazaar --enable-libaom --extra-libs=-lpthread --enable-libsrt --enable-libaribb24 --extra-cflags=-I/opt/ffmpeg/include --extra-ldflags=-L/opt/ffmpeg/lib
+libavutil      56. 51.100 / 56. 51.100
+libavcodec     58. 91.100 / 58. 91.100
+libavformat    58. 45.100 / 58. 45.100
+libavdevice    58. 10.100 / 58. 10.100
+libavfilter     7. 85.100 /  7. 85.100
+libavresample   4.  0.  0 /  4.  0.  0
+libswscale      5.  7.100 /  5.  7.100
+libswresample   3.  7.100 /  3.  7.100
+libpostproc    55.  7.100 / 55.  7.100
+```
+
+```bash
+/media # packager --version
+packager version v2.4.3-dd9870075f-release
+```
+
+Now that you've tried your hand at using Shaka Packager and FFmpeg, you can continue
+learning the basic concepts, next up [Media streaming basics](/media-streaming-basics/).
+
+[Shaka Packager]: https://github.com/google/shaka-packager
+[FFmpeg]: https://ffmpeg.org/download.html
+[Miro]: http://www.mirovideoconverter.com/
+[HandBrake]: https://handbrake.fr/
+[VLC]: https://www.videolan.org/
+[Zencoder]: https://en.wikipedia.org/wiki/Zencoder
+[Amazon Elastic Encoder]: https://aws.amazon.com/elastictranscoder
+[Google Transcoder API]: https://cloud.google.com/transcoder/docs
+[DASH]: https://developer.mozilla.org/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video
+[HLS]: https://developer.apple.com/documentation/http_live_streaming
+[Shaka Packager documentation]: https://google.github.io/shaka-packager/html/
+[FFmpeg questions on Stack Overflow]: https://stackoverflow.com/questions/tagged/ffmpeg
+[Docker]: https://www.docker.com/whatisdocker
diff --git a/src/site/content/en/media/media-conversion/index.md b/src/site/content/en/media/media-conversion/index.md
new file mode 100644
index 00000000000..7aa9027786d
--- /dev/null
+++ b/src/site/content/en/media/media-conversion/index.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: Media conversion
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Commands needed to convert a raw mov file to media assets packaged for DASH or HLS.
+date: 2018-09-20
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+  - audio
+---
+
+In this article we are going to learn some common commands for converting and
+manipulating specific characteristics of media files. Although we've tried to
+show equivalent operations for all procedures, not all operations are possible
+in both applications.
+
+In many cases, the commands we're showing may be combined in a single command
+line operation, and would be when actually used. For example, there's nothing
+preventing you from setting an output file's bitrate in the same operation as
+a file conversion. For this article, we often show these operations as separate
+commands for the sake of clarity.
+
+Conversion is done with these applications:
+
+* [Shaka Packager](https://github.com/google/shaka-packager) ([on Stack Overflow](https://stackoverflow.com/questions/tagged/shaka))
+* [FFmpeg](https://ffmpeg.org/download.html), ([on Stack Overflow](https://stackoverflow.com/questions/tagged/ffmpeg))
+
+## Display characteristics
+
+Both Shaka Packager and FFmpeg can be used to inspect the content of a media
+file and then display the characteristics of a stream. However, both provide
+different output for the same media.
+
+### Characteristics using Shaka Packager
+
+```bash
+packager input=glocken.mp4 --dump_stream_info
+```
+
+The output looks like:
+
+```bash
+File "glocken.mp4":
+Found 2 stream(s).
+Stream [0] type: Video
+ codec_string: avc1.640028
+ time_scale: 30000
+ duration: 300300 (10.0 seconds)
+ is_encrypted: false
+ codec: H264
+ width: 1920
+ height: 1080
+ pixel_aspect_ratio: 1:1
+ trick_play_factor: 0
+ nalu_length_size: 4
+
+Stream [1] type: Audio
+ codec_string: mp4a.40.2
+ time_scale: 48000
+ duration: 481280 (10.0 seconds)
+ is_encrypted: false
+ codec: AAC
+ sample_bits: 16
+ num_channels: 2
+ sampling_frequency: 48000
+ language: eng
+ seek_preroll_ns: 20833
+```
+
+### Characteristics using FFmpeg
+
+```bash
+ffmpeg -i glocken.mp4
+```
+
+The output looks like:
+
+```bash
+Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'glocken.mp4':
+  Metadata:
+    major_brand     : isom
+    minor_version   : 512
+    compatible_brands: isomiso2avc1mp41
+    encoder         : Lavf57.83.100
+  Duration: 00:00:10.03, start: 0.000000, bitrate: 8063 kb/s
+    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuvj420p(pc), 1920x1080, 7939 kb/s, 29.97 fps, 29.97 tbr, 30k tbn, 59.94 tbc (default)
+    Metadata:
+      handler_name    : VideoHandler
+    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 127 kb/s (default)
+    Metadata:
+      handler_name    : SoundHandler
+At least one output file must be specified
+```
+
+{% Aside 'gotchas' %}
+Technically, FFmpeg always requires an output file format. Calling FFmpeg this
+way will give you an error message explaining that; however, it lists
+information not available using Shaka Packager so feel free to ignore the error.
+{% endAside %}
+
+## Demux (separate) the audio and video streams
+
+Shaka Packager requires demuxing when converting files. This is also required
+for using media frameworks.
+
+### Shaka Packager demuxing
+
+**MP4**
+
+```bash
+packager input=myvideo.mp4,stream=video,output=myvideo_video.mp4
+packager input=myvideo.mp4,stream=audio,output=myvideo_audio.m4a
+```
+
+Or:
+
+```bash
+packager \
+  input=myvideo.mp4,stream=video,output=myvideo_video.mp4 \
+  input=myvideo.mp4,stream=audio,output=myvideo_audio.m4a
+```
+
+**WebM**
+
+```bash
+packager \
+  input=myvideo.webm,stream=video,output=myvideo_video.webm \
+  input=myvideo.webm,stream=audio,output=myvideo_audio.webm
+```
+### FFmpeg demuxing
+
+**MP4**
+
+```bash
+ffmpeg -i myvideo.mp4 -vcodec copy -an myvideo_video.mp4
+ffmpeg -i myvideo.mp4 -acodec copy -vn myvideo_audio.m4a
+```
+
+**WebM**
+
+```bash
+ffmpeg -i myvideo.webm -vcodec copy -an myvideo_video.webm
+ffmpeg -i myvideo.webm -acodec copy -vn myvideo_audio.webm
+```
+
+## Remux (combine) the audio and video streams
+
+In some situation you will need to combine the audio and video back into a single
+container. Especially when not using a media framework. This is something FFmpeg
+can handle quite well and is something Shaka Packager does not currently support.
+
+```bash
+ffmpeg -i myvideo_video.webm -i myvideo_audio.webm -c copy myvideo.webm
+```
+
+## Change characteristics
+
+### Bitrate
+
+For FFmpeg, we can do this while converting to `.mp4` or `.webm`.
+
+```bash
+ffmpeg -i myvideo.mov -b:v 350K myvideo.mp4
+ffmpeg -i myvideo.mov -vf setsar=1:1 -b:v 350K myvideo.webm
+```
+
+### Dimensions (resolution)
+
+```bash
+ffmpeg -i myvideo.webm -s 1920x1080 myvideo_1920x1080.webm
+```
+
+### File type
+
+Shaka Packager cannot process `.mov` files and hence cannot be used to convert
+files from that format.
+
+**`.mov` to `.mp4`**
+
+```bash
+ffmpeg -i myvideo.mov myvideo.mp4
+```
+
+**`.mov` to `.webm`**
+
+```bash
+ffmpeg -i myvideo.mov myvideo.webm
+```
+
+### Synchronize audio and video
+
+To ensure that audio and video synchronize during playback, insert keyframes.
+
+```bash
+ffmpeg -i myvideo.mp4 -keyint_min 150 -g 150 -f webm -vf setsar=1:1 out.webm
+```
+
+{% Aside %}
+Visit _Containers and codecs_ to view the audio and video [**codecs**](/containers-and-codecs/#codecs)
+and the associated encoding and decoding library the codec uses.
+{% endAside %}
+
+***MP4/H.264***
+
+```bash
+ffmpeg -i myvideo.mp4 -c:v libx264 -c:a copy myvideo.mp4
+```
+
+***Audio for an MP4***
+
+```bash
+ffmpeg -i myvideo.mp4 -c:v copy -c:a aac myvideo.mp4
+```
+
+***WebM/VP9***
+
+```bash
+ffmpeg -i myvideo.webm -v:c libvpx-vp9 -v:a copy myvideo.webm
+```
+
+***Audio for a WebM***
+
+```bash
+ffmpeg -i myvideo.webm -v:c copy -v:a libvorbis myvideo.webm
+ffmpeg -i myvideo.webm -v:c copy -v:a libopus myvideo.webm
+```
+
+## Video-on-demand and live-streaming
+
+There are two types of streaming protocols we are going to demonstrate in this
+article. The first is Dynamic Adaptive Streaming over HTTP (DASH), which is an
+adaptive bitrate streaming technique and [web-standards-based] method of
+presenting video-on-demand. The second is HTTP Live Streaming (HLS), which is
+[Apple's standard] for live-streaming and video-on-demand for the web.
+
+### DASH/MPD
+
+This example generates the Media Presentation Description (MPD) output file
+from the audio and video streams.
+
+```bash
+packager \
+  input=myvideo.mp4,stream=audio,output=myvideo_audio.mp4 \
+  input=myvideo.mp4,stream=video,output=myvideo_video.mp4 \
+  --mpd_output myvideo_vod.mpd
+```
+
+## HLS
+
+These examples generate an `M3U8` output file from the audio and video streams,
+which is a UTF-8 encoded multimedia playlist.
+
+```bash
+ffmpeg -i myvideo.mp4 -c:a copy -b:v 8M -c:v copy -f hls \
+  -hls_time 10 -hls_list_size 0 myvideo.m3u8
+```
+
+OR:
+
+```bash
+packager \
+  'input=myvideo.mp4,stream=video,segment_template=output$Number$.ts,playlist_name=video_playlist.m3u8' \
+  'input=myvideo.mp4,stream=audio,segment_template=output_audio$Number$.ts,playlist_name=audio_playlist.m3u8,hls_group_id=audio,hls_name=ENGLISH' \
+  --hls_master_playlist_output="master_playlist.m3u8"
+```
+
+Now that we hopefully have a good grasp on how to convert files, we can build on
+what we've learned in this article and go learn about
+[Media encryption](/media-encryption/) next.
+
+[web-standards-based]: https://developer.mozilla.org/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video
+[Apple's standard]: https://developer.apple.com/streaming/
diff --git a/src/site/content/en/media/media-encryption/index.md b/src/site/content/en/media/media-encryption/index.md
new file mode 100644
index 00000000000..36af6141851
--- /dev/null
+++ b/src/site/content/en/media/media-encryption/index.md
@@ -0,0 +1,324 @@
+---
+layout: post
+title: Media encryption
+authors:
+  - derekherman
+  - joemedley
+description: |
+  Learn digital rights management concepts, and the commands needed to get from a raw mov
+  file to encrypted media packaged for MPEG-DASH or HLS using both Clear Key or
+  Widevine encryption.
+date: 2021-07-05
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+  - audio
+---
+
+In this section we are going to cover two different strategies for encrypting
+your media, and some practical examples on how to use them with FFmpeg and
+Shaka Packager. The two strategies for encryption we'll discuss are [Clear Key] and
+using a service like [Google Widevine]. Both strategies are a form of digital
+rights management ([DRM]) to control what users can do with your media. However,
+one is inherently less secure than the other due to the way keys are passed for
+authentication and is why a DRM service might make more sense.
+
+The primary DRM services for the web are [Google Widevine], [Microsoft PlayReady]
+and [Apple FairPlay], but we will not be covering all of them in this article.
+However, if you are targeting all the modern browsers you are likely going
+to be using all three DRM services.
+
+Conversion and encryption is done with these applications:
+
+* [Shaka Packager] ([#shaka on Stack Overflow])
+* [FFmpeg] ([#ffmpeg on Stack Overflow])
+* [OpenSSL] ([#openssl on Stack Overflow])
+
+## Clear Key encryption
+
+First, you should have a good understanding of what Clear Key is and isn't before
+using it. When you do _**not**_ want to use an existing DRM service and feel
+basic encryption of you media is a viable option, you would use Clear Key. But,
+keep in mind that this type of encryption does not provide the same level of
+security as using one of the DRM services. This is because the key value pair is
+not encrypted under another key, unlike encrypted keys which are generated by a
+decryption key that is stored on a licence server. Additionally, Clear Key sends
+the key value pair as plain text, so while you are encrypting your media the key to
+decrypt it is not a secret.
+
+### Create a key
+
+You can use the same method to create a key for both DASH and HLS. Do this using
+[OpenSSL]. The following will create an encryption key made of 16 hex values.
+
+```bash
+openssl rand -hex 16 > media.key
+```
+
+{% Aside 'caution' %}
+This command creates a file that could contain white space and new line characters,
+which are not allowed by Shaka Packager. You'll need to open the key file and
+manually remove all whitespace including the final carriage return.
+{% endAside %}
+
+### Create an IV
+
+Next we can generate an initialization vector (IV).
+
+```bash
+openssl rand -hex 16
+6143b5373a51cb46209cfed0d747da66
+```
+
+{% Aside %}
+Make a note of the output, you'll need this later.
+{% endAside %}
+
+### Encrypt with Clear Key
+
+The following example uses [Shaka Packager with raw keys], where `keys` and
+`key_ids` are provided to Shaka Packager directly. Read the documentation for
+more examples.
+
+For the `key` flag, use the key created earlier, which is stored in the `media.key`
+file. However, when entering it on the command line, be sure you've removed its
+whitespace. For the `key_id` flag, repeat the `media.id` value or use the IV value
+generated above.
+
+```bash
+packager \
+  input=glocken.mp4,stream=audio,output=glockena.m4a \
+  input=glocken.mp4,stream=video,output=glockenv.mp4 \
+  --enable_fixed_key_encryption \
+  --keys label=audio:key=INSERT_AUDIO_KEY_HERE:key_id=INSERT_AUDIO_KEY_ID_HERE,label=video:key=INSERT_VIDEO_KEY_HERE:key_id=INSERT_VIDEO_KEY_ID_HERE
+```
+
+{% Aside %}
+Note that we can also encrypt both `video` and `audio` streams using the same `keys`
+by omitting the label argument instead of defining a different set of `keys` per-stream.
+For example, `--keys label=:key=INSERT_KEY_HERE:key_id=INSERT_KEY_ID_HERE`. However,
+this would decrease the level of security when protecting your streams.
+{% endAside %}
+
+### Create a key information file
+
+To encrypt for HLS you need a key information file in addition to a key file. A
+key information file is a text file with the format below. It should have the
+extension `.keyinfo`. For example: `encrypt.keyinfo`.
+
+```bash
+key URI
+key file path
+private key
+```
+
+The key URI is where the `media.key` ([created above](#create-a-key) will be
+located on your server. The key file path is its location relative to the key
+information file. Finally, the private key is the contents of the `media.key`
+file itself, or the IV you created before. For example:
+
+```bash
+https://example.com/keys/media.key
+/path/to/media.key
+6143b5373a51cb46209cfed0d747da66
+```
+
+### Encrypt for HLS
+
+```bash
+packager \
+  'input=input.mp4,stream=video,segment_template=output$Number$.ts,playlist_name=video_playlist.m3u8' \
+  'input=input.mp4,stream=audio,segment_template=output_audio$Number$.ts,playlist_name=audio_playlist.m3u8,hls_group_id=audio,hls_name=ENGLISH' \
+  --hls_master_playlist_output="master_playlist.m3u8" \
+  --hls_base_url="http://localhost:5000/"
+```
+
+This command will accept a key with either 16 or 32 characters.
+
+```bash
+ffmpeg -i myvideo.mov -c:v libx264 -c:a aac -hls_key_info_file encrypt.keyinfo myvideo.m3u8
+```
+
+## Widevine encryption
+
+Now you know what Clear Key encryption is and when to use it. But, when should you use a DRM service for additional security? This is where Widevine, or another service,
+would be used to securely encrypt and decrypt your media. Widevine supports MPEG-DASH and
+HLS and is a DRM from Google. Widevine is used by the Google Chrome and Firefox web
+browsers, Android MediaDRM, Android TV, and other consumer electronics devices that use
+Encrypted Media Extensions and Media Source Extensions, where Widevine decrypts content.
+
+### Encrypt with Widevine
+
+Most of the examples in this article used Clear Key encryption. However, for Widevine you
+will want to replace the following options.
+
+```bash
+--enable_fixed_key_encryption \
+--enable_fixed_key_decryption \
+--keys label=:key=INSERT_KEY_HERE:key_id=INSERT_KEY_ID_HERE
+```
+
+Everything in the demultiplexer (demux) command except the name of your files and the
+`--content-id` flag should be copied exactly from the example. The `--content-id` is 16
+or 32 random hex digits. Use the keys provided here instead of your own. Read the Shaka
+Packager documentation on using the [Widevine Key Server] for more examples.
+
+1. Demux (separate) the audio and video, encrypt the new files, and output a
+   media presentation description (MPD) file.
+
+    ```bash
+    packager \
+      input=tmp_glocken.mp4,stream=video,output=glocken_video.mp4 \
+      input=tmp_glocken.mp4,stream=audio,output=glocken_audio.m4a \
+      --enable_widevine_encryption \
+      --key_server_url "https://license.uat.widevine.com/cenc/getcontentkey/widevine_test" \
+      --content_id "fd385d9f9a14bb09" \
+      --signer "widevine_test" \
+      --aes_signing_key "1ae8ccd0e7985cc0b6203a55855a1034afc252980e970ca90e5202689f947ab9" \
+      --aes_signing_iv "d58ce954203b7c9a9a9d467f59839249"
+    ```
+
+2. Remux (combine) the audio and video streams. If you're using a video
+   framework, you may not need to do this.
+
+   ```bash
+   ffmpeg -i glocken_video.mp4 -i glocken_audio.m4a -c copy glocke.mp4
+   ```
+
+{% Aside %}
+The default pixel format `yuv420p` is used in all the `ffmpeg` remux examples in this
+article because one isn't supplied in the command line. The `ffmpeg` command will give
+you an error message that it is deprecated. We've chosen not to override the default
+because, though deprecated `yuv420p` is still the most widely supported.
+{% endAside %}
+
+## Media conversion sequence
+
+This section shows in order commands needed to get from a raw `.mov` file to
+encrypted assets packaged for DASH or HLS. For the sake of having a goal to
+illustrate, we're converting a source file to a bitrate of 8Mbs at a resolution
+of 1080p (1920 x 1080). Adjust these values as your needs dictate.
+
+{% Aside 'gotchas' %}
+Not all steps are possible with Shaka Packager alone, so we'll also use FFmpeg
+when needed.
+{% endAside %}
+
+### DASH/WebM
+
+1. Convert the file type and codec.
+
+   For this command you can use either `liborbis` or `libopus` for the audio codec.
+
+    ```bash
+    ffmpeg -i glocken.mov -c:v libvpx-vp9 -c:a libvorbis -b:v 8M -vf setsar=1:1 -f webm tmp_glocken.webm
+    ```
+
+2. Create a Clear Key encryption key.
+
+    ```bash
+    openssl rand -hex 16 > media.key
+    ```
+
+3. Demux (separate) the audio and video, encrypt the new files, and output a
+   media presentation description (MPD) file.
+
+    ```bash
+    packager \
+      input=tmp_glocken.webm,stream=video,output=glocken_video.webm \
+      input=tmp_glocken.webm,stream=audio,output=glocken_audio.webm \
+      --enable_fixed_key_encryption \
+      --enable_fixed_key_decryption \
+      --keys label=:key=INSERT_KEY_HERE:key_id=INSERT_KEY_ID_HERE \
+      --mpd_output glocken_webm_vod.mpd
+    ```
+
+4. Remux (combine) the audio and video streams. If you're using a video
+   framework, you may not need to do this.
+
+   ```bash
+   ffmpeg -i glocken_video.webm -i glocken_audio.webm -c copy glocken.webm
+   ```
+
+### DASH/MP4
+
+1. Convert the file type, video codec and bitrate.
+
+    ```bash
+    ffmpeg -i glocken.mov -c:v libx264 -c:a aac -b:v 8M -strict -2 tmp_glocken.mp4
+    ```
+
+2. Create a Clear Key encryption key.
+
+    ```bash
+    openssl rand -hex 16 > media.key
+    ```
+
+3. Demux (separate) the audio and video, encrypt the new files, and output a
+   media presentation description (MPD) file.
+
+    ```bash
+    packager \
+      input=tmp_glocken.mp4,stream=video,output=glocken_video.mp4 \
+      input=tmp_glocken.mp4,stream=audio,output=glocken_audio.m4a \
+      --enable_fixed_key_encryption \
+      --enable_fixed_key_decryption \
+      --keys label=:key=INSERT_KEY_HERE:key_id=INSERT_KEY_ID_HERE \
+      --mpd_output glocken_mp4_vod.mpd
+    ```
+
+4. Remux (combine) the audio and video streams. If you're using a video
+   framework, you may not need to do this.
+
+   ```bash
+   ffmpeg -i glocken_video.mp4 -i glocken_audio.m4a -c copy glocken.mp4
+   ```
+
+### HLS/MP4
+
+HLS only supports MP4, so first you'll need to convert to the MP4 container and
+supported codecs.
+
+1. Convert the file type, video codec, and bitrate.
+
+    ```bash
+    ffmpeg -i glocken.mov -c:v libx264 -c:a aac -b:v 8M -strict -2 glocken.mp4
+    ```
+
+2. Create a Clear Key encryption key.
+
+    ```bash
+    openssl rand -hex 16 > media.key
+    ```
+
+3. Create a key information file
+
+    ```bash
+    packager \
+      'input=glocken.mp4,stream=video,segment_template=output$Number$.ts,playlist_name=video_playlist.m3u8' \
+      'input=glocken.mp4,stream=audio,segment_template=output_audio$Number$.ts,playlist_name=audio_playlist.m3u8,hls_group_id=audio,hls_name=ENGLISH' \
+      --hls_master_playlist_output="master_playlist.m3u8" \
+      --hls_base_url="http://localhost:5000/" \
+      --enable_fixed_key_encryption \
+      --enable_fixed_key_decryption \
+      --keys label=:key=INSERT_KEY_HERE:key_id=INSERT_KEY_ID_HERE
+    ```
+
+That was a lot to digest, but hopefully you are now able to encrypt you media
+with confidence. Next we'll show you how to [add media](/add-media/) to
+your site.
+
+[Clear Key]: https://w3c.github.io/encrypted-media/index.html#clear-key
+[Google Widevine]: https://www.widevine.com/
+[DRM]: https://en.wikipedia.org/wiki/Digital_rights_management
+[Microsoft PlayReady]: https://www.microsoft.com/playready/
+[Apple FairPlay]: https://developer.apple.com/streaming/fps/
+[Shaka Packager]: https://github.com/google/shaka-packager
+[#shaka on Stack Overflow]: https://stackoverflow.com/questions/tagged/shaka
+[FFmpeg]: https://ffmpeg.org/download.html
+[#ffmpeg on Stack Overflow]: https://stackoverflow.com/questions/tagged/ffmpeg
+[OpenSSL]: https://www.openssl.org/
+[#openssl on Stack Overflow]: https://stackoverflow.com/questions/tagged/openssl
+[Shaka Packager with raw keys]: https://google.github.io/shaka-packager/html/tutorials/raw_key.html
+[Widevine Key Server]: https://google.github.io/shaka-packager/html/tutorials/widevine.html
diff --git a/src/site/content/en/media/media-experience/index.md b/src/site/content/en/media/media-experience/index.md
new file mode 100644
index 00000000000..c1503a94bb5
--- /dev/null
+++ b/src/site/content/en/media/media-experience/index.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: What is a media experience?
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Videos can be fun and informative. For a good user experience, videos need to
+  meet a number of technical requirements.
+date: 2017-06-30
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+Users like media, especially videos; they can be fun and informative. On mobile
+devices, videos can be an easier way to consume information than text. For a
+good user experience, videos should not need more than the available bandwidth.
+Users should be able to use them no matter what device they're viewing them
+with. Users should never need to wait for media to download. Nobody likes it when
+they press play and nothing happens.
+
+You've no doubt consumed video on your own device, which means that nothing in
+that last paragraph surprises you. Now you need to learn how to put a video or
+other media file on your own website. The technical requirements of adding media
+should be in service to the user experience.
+
+## The technical requirements
+
+* Versions of a media file are in common web-friendly formats containing both audio
+  and video streams.
+* The resolution is appropriate for your users' devices.
+* The bitrate doesn't overload your users' network bandwidth.
+* The result is viewable on all major browsers using appropriate technologies.
+* The file is encrypted (Optional).
+
+The [media](/media/) section of this website will help you achieve these technical
+requirements. Don't worry if these concepts are still a bit abstract. We'll
+explain them progressively throughout all the articles. In the first section you
+will learn about the basic concepts of media, then how to add media to the web in
+the second section, and in the final section the practical applications, with some
+advanced techniques, of using media on the web.
+
+## Displaying video on the web
+
+There are four approaches you can take when displaying video on a site.
+
+* Upload your videos to a media hosting provider such as [YouTube] or [Vimeo].
+  These options require you to embed their players within your site.
+* Basic self-hosted embedding using the HTML `<video>` and `<audio>` elements.
+* More full-featured embedding using a video library such as [Shaka Player],
+  [JW Player], or [Video.js].
+* Building your own media server and streaming application.
+
+This site mainly covers the basics of embedding media. However, we do cover
+some more advanced topics to get you started on the path towards building your
+own media streaming application. The effort to do this is not trivial, so we've
+built a [Media PWA] with offline support to use as a reference, which
+should both show you ways this can be accomplished and just how much
+effort it requires. The application is by no means a production ready offering
+or competitor to services like YouTube or Vimeo, but it will provide you with a
+starting point to learn something challenging and new.
+
+Frankly, building a competitor to hosted media services would require a team
+of expert engineers and thousands of human-hours of work. Unless your goal is
+to enter that market as a competitor, you're better off using one of the other
+methods. It's good to understand the technology and while you may not roll out
+your own application or video player, there is utility in exploring and
+experimenting on the cutting edge of browser support, or at the very least
+using one of the existing video libraries.
+
+## What we're going to learn
+
+The [media](/media/) collection has three parts. In this first section, we'll
+provide concepts and prerequisite information to adding media to your site.
+This includes explaining how media files are put together, basics about the
+applications you'll need to prepare your files for the web, and streaming
+concepts. The second section explains how to prepare your files and convert
+them to various formats and optionally add encryption. In the last section,
+we'll show you how to embed a media file in a web page, discuss autoplay best
+practices, using media frameworks, taking videos offline, and making your videos
+accessible.
+
+There's a lot of ground to cover, so let's get started with [Media file
+basics](/media-file-basics/).
+
+[YouTube]: https://www.youtube.com/
+[Vimeo]: https://vimeo.com/
+[Shaka Player]: https://github.com/google/shaka-player
+[JW Player]: https://developer.jwplayer.com/
+[Video.js]: http://videojs.com/
+[Media PWA]: https://github.com/xwp/web-dev-media
diff --git a/src/site/content/en/media/media-file-basics/index.md b/src/site/content/en/media/media-file-basics/index.md
new file mode 100644
index 00000000000..70e9f35e998
--- /dev/null
+++ b/src/site/content/en/media/media-file-basics/index.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Media file basics
+authors:
+  - joemedley
+  - derekherman
+description: |
+  You might think that you can take a video from a camera and upload it to the web as
+  is. Preparing a video for serving from your own site is a bit more
+  complicated.
+date: 2020-06-19
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+In this article you will learn about media file basics such as the concepts of a
+container, and a few of the many available codec formats that you can use in a
+stream. Plus lightly touch on topics such as adaptive streaming, bitrate, and
+resolution—but we'll dive deeper into all these in later sections.
+
+## Serving video files
+
+You might think that you can take a raw file from a video camera and just upload
+it to the web as-is. Indeed, video streaming sites such as [YouTube] or [Vimeo]
+let you do just that, and even provide live-streaming capabilities—typically by
+connecting to your camera's HDMI port and then processing it through a capture
+card. These services greatly simplify video processing and uploading, which
+includes generating the many files and manifests needed for adaptive streaming
+and various resolutions. Plus the many other complicated and nuanced requirements
+that make self-hosting a bit of a chore. Preparing and serving a video from your
+own site, and likely a separate media server, is a bit more complicated than just
+uploading a raw camera file if you care how your users experience your site.
+
+Video files come in a variety of formats. The format that comes off your camera is
+typically a `.mov` file, or an `.mp4` if you have a good modern mirrorless camera.
+However, while a `.mov` is good for recording and for editing and other early
+post-production processes, the file size means it's not good for streaming over
+the web. As well, the file size of a raw `.mp4` in 4K is going to make playing that
+file on mobile very prohibitive. Because browsers support different file formats,
+you'll need to create multiple optimized files and potentially a manifest if you
+plan to support adaptive streaming. Before converting files you need to understand
+a few basics about them and about their characteristics.
+
+## Containers and codecs, and streams?
+
+The file that you see in your operating system shell is a _container_,
+identified by a file extension (`.mp4`, `.webm`, `.ogg` etc.). The container
+houses one or more _streams_. A media file can have any number of streams, of
+many more [formats] than we'll go into here.
+
+The sample files used later in this section contain at most two streams: an
+audio stream and a video stream. Among the other types you might encounter are
+captions and data, both of which are beyond the scope of this article. There are
+instances where audio and video streams are dealt with separately. Most files
+you'll encounter will only contain a single audio stream and a single video
+stream.
+
+Within the audio and video streams, the actual data is compressed using a codec.
+A _codec_, or coder/decoder, is a compression format for video or audio data. The
+distinction between a container and a codec is important because files with the
+same container can have their contents encoded with different codecs.
+
+The image below illustrates this structure. On the left is the basic container
+structure with two streams. On the right are the specifics of that structure for
+a single WebM file.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QwNEBBa8LEMpedJh5imG.png", alt="Comparing media file structure with a hypothetical media file.", width="560", height="250" %}
+  <figcaption>Parts of a media file.</figcaption>
+</figure>
+
+Files in WebM containers can be orders of magnitude smaller than other formats,
+making them a good choice for mobile sites to stream. Unfortunately, not all
+browsers support up-to-date containers and codecs. For example, WebM was created
+specifically for the web as a high-quality and open source option, but its support
+is not yet universal. Safari in particular does not, according to [Can I use] at
+the time of this writing, support WebM for embedded video. However, WebM does have
+partial support with the VP8 and VP9 codec used in WebRTC. So your best option is
+to provide a fallback video.
+
+{% Aside %}
+All modern browsers support MP4 files, making them a good general choice for a
+media container and the best choice as the backup container for WebM.
+{% endAside %}
+
+### Codec formats
+
+Many file types support multiple codecs within the same container. A complete list
+of available [video codecs] and [audio codecs] would be a whole website to itself.
+The links just provided are for MDN's practical lists of what's usable on the web.
+Listed below are the currently preferred file types, and the codecs they might use.
+Follow the file type links to view the browsers that support them.
+
+| File type | Video Codec | Audio Codec |
+| ---- | ----- | ---- |
+| [MP4] | [AV1], [AVC (H.264)]*, [VP9] | [AAC] |
+| [WebM] | [AV1], [VP9]* | [Vorbis], [Opus] |
+
+&#42; Indicates the preferred video codec.
+
+## Bitrate and resolution
+
+**Bitrate** is the maximum number of bits used to encode one second of a stream.
+The more bits used to encode a second of stream, the higher the potential detail
+and fidelity. We provide more information about this concept in [Bitrate](/bitrate/).
+
+**Resolution** is the amount of information in a single frame of video, given as
+the number of logical pixels in each dimension. We provide more information about
+this concept in [Resolution](/resolution/).
+
+Up next, in [Media application basics](/media-application-basics/), we'll show you
+how to examine these characteristics using two command line tools: Shaka Packager
+and FFmpeg.
+
+[YouTube]: https://www.youtube.com/
+[Vimeo]: https://vimeo.com/
+[formats]: https://developer.mozilla.org/docs/Web/Media/Formats
+[Can I Use]: https://caniuse.com/#feat=webm
+[video codecs]: https://developer.mozilla.org/docs/Web/Media/Formats/Video_codecs
+[audio codecs]: https://developer.mozilla.org/docs/Web/Media/Formats/Audio_codecs
+[MP4]: https://caniuse.com/#search=mp4
+[WebM]: https://caniuse.com/#feat=webm
+[AV1]: https://developer.mozilla.org/docs/Web/Media/Formats/Video_codecs#AV1
+[AVC (H.264)]: https://developer.mozilla.org/docs/Web/Media/Formats/Video_codecs#AVC_H.264
+[VP9]: https://developer.mozilla.org/docs/Web/Media/Formats/Video_codecs#VP9
+[AAC]: https://developer.mozilla.org/docs/Web/Media/Formats/Audio_codecs#AAC
+[Vorbis]: https://developer.mozilla.org/docs/Web/Media/Formats/Audio_codecs#Vorbis
+[Opus]: https://developer.mozilla.org/docs/Web/Media/Formats/Audio_codecs#Opus
diff --git a/src/site/content/en/media/media-frameworks/index.md b/src/site/content/en/media/media-frameworks/index.md
new file mode 100644
index 00000000000..6d6cee46054
--- /dev/null
+++ b/src/site/content/en/media/media-frameworks/index.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: Media frameworks
+authors:
+  - derekherman
+description: |
+  Media frameworks come in both the proprietary and open-source variety, and at
+  their core are a set of APIs that support audio and/or video playback for
+  various container formats and transmission protocols.
+date: 2021-07-05
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+There are several ways to add media to a web page. Previously you learned how to
+use the standard `<video>` tag. In this article you will learn about a few of the
+media frameworks (or libraries) available that you can use to extend or replace
+the behavior of the default HTML5 video player.
+
+Media frameworks come in both the proprietary and open-source variety, and at
+their core are a set of APIs that support audio and/or video playback for
+various container formats and transmission protocols. A good framework has
+a modular architecture and provides clear and detailed documentation. Ideally it
+should also be relatively easy to set up and use. You might be asking yourself,
+"If the HTML5 video player provides most features already then why would I use a
+framework or library?" That's a great question, let's dig in.
+
+## Benefits of using a framework
+
+In most situations that are beyond the needs of a basic web page, you are going
+to want to use a media framework to serve your content. Unless you are prepared
+to develop and maintain a rich feature set like offline playback, streaming,
+analytics, picture-in-picture, preview thumbnails, embedding, and monetization
+such as fill rate optimization, Ad scheduling, or header bidding to name a few
+then you should probably offload that complexity to an existing solution.
+
+This is where media frameworks come in. They provide you with a set of features,
+and conditions in which you can use those features, and then you have to decide
+which framework is right for your project. In the next article we will discuss
+how we built a [PWA with offline streaming] that implements several complex
+features. Spoiler alert, it was a lot of work and is still far from being a
+production ready solution. Save yourself the headache and use a framework.
+
+There are a lot of options out there to choose from, for now this article will
+focus on three, which are [Shaka Player], [JW Player], and [Video.js].
+
+## Shaka Player
+
+According to the documentation, Google's [Shaka Player] is an open-source
+JavaScript library for adaptive media. It plays adaptive media formats (such as
+[DASH] and [HLS]) in a browser, without using plugins. Instead, Shaka Player
+uses the open web standards [MediaSource Extensions] and
+[Encrypted Media Extensions].
+
+Shaka Player also supports [offline storage and playback] of media using
+[IndexedDB]. Content can be stored on any browser. Storage of licenses
+depends on browser support.
+
+There are directions for [basic usage] on the Shaka Player documentation site.
+However, in a nutshell to use Shaka Player you first need to create an HTML page
+with a video or audio element. Then in your application's JavaScript you
+install the polyfills and check for browser support. Once the browser has
+confirmed support for Shaka Player a script will create a Player object to wrap
+the media element, listen for errors, then load a manifest file. Shaka Player
+will take over from there.
+
+With Shaka you will need to host and encode your media files yourself.
+Creating a media server is not overly complex, however encoding/transcoding media
+can be time-consuming and complicated. You will likely want to offload
+this part to a service such as [Zencoder], [Amazon Elastic Encoder], or
+[Google Transcoder API] to automate repetitive tasks and speed the process up.
+
+The great thing about the Shaka Player is there is also a really fantastic tool
+and media packaging SDK for DASH and HLS packaging and encryption called Shaka
+Packager. It can prepare and package media content for online streaming, which
+you learned about earlier in [Media conversion](/media-conversion/) and
+[Media encryption](/media-encryption/).
+
+## JW Player
+
+If you are looking for an option that provides hosting and encoding/transcoding
+services then you might look into [JW Player], but keep in mind that JW Player is
+proprietary software. Meaning, you don't have much control over the platform or
+roadmap. There is a basic free version where videos are displayed with a watermark,
+and a commercial version.
+
+JW Player supports streaming with MPEG-DASH (paid version only), Digital rights
+management (DRM) (with Vualto), interactive advertisement, customization of the
+interface, and embeds. There is a well documented API and SDK. However, if you
+are just looking for a quick and free way to host your media then embedding
+YouTube videos are typically going to be your best free option.
+
+## Video.js
+
+According to their website, [Video.js] is built from the
+ground up for an HTML5 world. It supports HTML5 video and modern streaming
+formats such as DASH and HLS, as well as YouTube, and Vimeo. It supports
+video playback on desktop and mobile devices and looks good everywhere with
+CSS-based skins.
+
+There are a few ways to use Video.js, but the easiest is to use the free CDN
+version provided by [Fastly]. You can learn more on how to get the player set
+up on the [getting started] page. Video.js is a very powerful video player,
+and much like Shaka Player you will also need to host and encode your video.
+However, one difference is in the plugin system where you can do things like
+play YouTube videos in the Video.js player, which can also be customized.
+
+## Other frameworks
+
+There are lots of different frameworks and libraries available, this article
+only scratches the surface on what is out there. When choosing a framework you
+should consider what features you need for the project and how you plan to host
+and encode or transcode your media. Do you need pre-roll Ads or other
+monetization strategies? Will your media be available offline? How big or
+small is your budget? Or any other number of considerations. Do your research
+and ask people in your network for suggestions. There are dozens of other great
+options and before you make any choices take some time to pick one that will
+be right for your team and avoid creating unnecessary technical debt or
+complexity to maintain during the project lifecycle.
+
+Next, you will learn about the [PWA with offline streaming] we built to
+demonstrate how to approach and tackle the main challenges that come with
+rolling your own solution using just the HTML5 video object without a framework
+to handle the heavy lifting.
+
+[PWA with offline streaming]: /pwa-with-offline-streaming/
+[Shaka Player]: https://github.com/google/shaka-player
+[JW Player]: https://developer.jwplayer.com/
+[Video.js]: http://videojs.com/
+[DASH]: http://dashif.org/
+[HLS]: https://developer.apple.com/streaming/
+[MediaSource Extensions]: https://www.w3.org/TR/media-source/
+[Encrypted Media Extensions]: https://www.w3.org/TR/encrypted-media/
+[IndexedDB]: https://www.w3.org/TR/IndexedDB-2/
+[offline storage and playback]: https://shaka-player-demo.appspot.com/docs/api/tutorial-offline.html
+[basic usage]: https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html
+[Zencoder]: https://en.wikipedia.org/wiki/Zencoder
+[Amazon Elastic Encoder]: https://aws.amazon.com/elastictranscoder
+[Google Transcoder API]: https://cloud.google.com/transcoder/docs
+[Fastly]: https://videojs.com/getting-started/#videojs-cdn
+[getting started]: https://videojs.com/getting-started
diff --git a/src/site/content/en/media/media-streaming-basics/index.md b/src/site/content/en/media/media-streaming-basics/index.md
new file mode 100644
index 00000000000..4721ceed475
--- /dev/null
+++ b/src/site/content/en/media/media-streaming-basics/index.md
@@ -0,0 +1,166 @@
+---
+layout: post
+title: Media streaming basics
+authors:
+  - derekherman
+  - dero
+description: |
+  Media streaming is the method for continuously delivering multimedia content
+  from a server where the content has been split into individual chunks of data
+  that can be joined back together during playback in a specific order through
+  a range request using protocols such as DASH and HLS.
+date: 2021-07-05
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+In this article, you are going to learn about the more advanced concept of media
+streaming and by the end should have a good understanding of the various
+streaming use cases, protocols, and extensions. Let's start with an
+explanation of what streaming actually is.
+
+Media streaming is a way of delivering and playing back media content piece by
+piece. Instead of loading a single file, which can be slow if not optimized for
+the network, the player reads a manifest file describing how the target media is
+split into individual chunks of data. Media chunks are later dynamically stitched
+back together at runtime—probably at different [bitrates], which you'll learn
+about later.
+
+Keep in mind that to provide streaming on your website the server
+must support the [Range] HTTP request header. Learn more about the `Accept-Ranges`
+header in [The &lt;video> and &lt;source> tags] article.
+
+## Streaming use cases
+
+Producing media chunks and the necessary manifests describing the stream is not
+exactly straightforward, but streaming unlocks some interesting use cases that
+are not possible to achieve just by pointing a `<video>` element
+to a set of static source files. You'll learn more about how to
+[add media to a web page] in a later section. First, you should know about a
+few use cases for streaming multimedia if you want to go further than just
+loading multiple files into the `<video>` element.
+
+* **Adaptive streaming** is where media chunks are encoded in several
+  bitrates, and the highest quality media chunk that **_fits_** the client's
+  currently available bandwidth is returned to the media player.
+* **Live broadcast** is where media chunks are encoded and made available in
+  real time.
+* **Injecting media** is where other media like advertisements are injected into
+  a stream without the player having to change the media source.
+
+## Streaming protocols
+
+The two most commonly used streaming protocols on the web are **Dynamic
+Adaptive Streaming over HTTP** ([DASH]) and **HTTP Live Streaming** ([HLS]).
+Players that support these protocols will fetch the generated manifest file,
+figure out which media chunks to request, and then combine them into the final
+media experience.
+
+### Using `<video>` to play a stream
+
+Many browsers are not going to play your stream natively. While there is some
+native [support for HLS] playback, browsers generally [don't support native DASH]
+stream playback. This means often it's not enough to simply point the `<source>`
+in the `<video>` element to a manifest file.
+
+```html
+<video controls>
+  <source src="manifest.mpd" type="application/dash+xml">
+</video>
+```
+
+{% Aside 'caution' %}
+This is valid HTML, but doesn't actually work. Browsers don't natively support
+DASH manifest playback added to the `src` property.
+{% endAside %}
+
+What may seem as a deficit is actually a strength in disguise. Streams are
+powerful and applications that consume streams have different needs.
+
+Manifest files usually describe many variants of single media. Think different
+bitrates, several audio tracks, and even the same media encoded in different
+formats.
+
+Some applications may want to keep a larger amount of video in the buffer,
+others may want to prefetch the first few seconds of video from an upcoming
+episode, and some want to implement their own logic for adaptive streaming.
+This is where you would want to have some sort of built-in browser feature
+to generate media streams for playback, and it just so happens there is one.
+
+### Media Source Extensions
+
+Thankfully, the W3C defined something called [Media Source Extensions (MSE)]
+that will let JavaScript generate our media streams. In a nutshell, MSE allows
+developers to attach a `MediaSource` object to a `<video>` element and have
+it play back whatever media data is pumped into the buffers attached to the
+`MediaSource` instance.
+
+### Basic example
+
+```javascript
+const videoEl = document.querySelector('video');
+const mediaSource = new MediaSource();
+
+video.src = URL.createObjectURL(mediaSource);
+mediaSource.addEventListener(
+  'sourceopen',
+  () => {
+    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+    const buffer = mediaSource.addSourceBuffer(mimeString);
+
+    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
+  }
+);
+```
+
+The simplified example above illustrates a few things:
+
+* As far as `<video>` is concerned, it is receiving media data from a URL.
+* The generated URL is just a pointer to a `MediaSource` instance.
+* The `MediaSource` instance creates one or more `SourceBuffer` instances.
+* We then just append binary media data into the buffer, e.g. using `fetch`.
+
+While these basic concepts are simple, and it is certainly possible to write a
+DASH and HLS compatible video player from scratch, most people usually pick one
+of the mature open source solutions that already exist, such as [Shaka Player],
+[JW Player], or [Video.js] to name a few.
+
+However, we have created a demo Media PWA called Kino that demonstrates how you
+would go about developing your own basic streaming media website that provides
+offline media playback using just the simple `<video>` element. There are plans
+in our roadmap to support frameworks and digital rights management, among other
+features. So check back for updates from time to time, or request a feature.
+Read more about it in the [PWA with offline streaming] article.
+
+## Media chunks format
+
+For a long time, DASH and HLS required media chunks to be encoded in different
+formats. In 2016, however, support for standard **fragmented MP4** (fMP4) files
+was added to HLS, a format that DASH also supports.
+
+Video chunks using the `fMP4` container and the `H.264` codec are supported
+by both protocols and playable by a vast majority of players. This allows
+content producers to encode their videos just once, which in turn **saves time
+and disk space**.
+
+To achieve better quality and lower files sizes, you may want to choose to
+encode several sets of media chunks using more efficient formats like `VP9`,
+though before we get to far ahead you will first need to learn how to
+[Prepare media files for the web], and that's up next.
+
+[bitrates]: /bitrate/
+[Range]: https://developer.mozilla.org/docs/Web/HTTP/Headers/Range
+[The &lt;video> and &lt;source> tags]: /video-and-source-tags/#specify-start-and-end-times
+[add media to a web page]: /add-media/
+[DASH]: https://developer.mozilla.org/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video
+[HLS]: https://developer.apple.com/documentation/http_live_streaming
+[support for HLS]: https://caniuse.com/http-live-streaming
+[don't support native DASH]: https://caniuse.com/mpeg-dash
+[Media Source Extensions (MSE)]: https://w3c.github.io/media-source/
+[Shaka Player]: https://github.com/google/shaka-player
+[JW Player]: https://developer.jwplayer.com/
+[Video.js]: http://videojs.com/
+[PWA with offline streaming]: /pwa-with-offline-streaming/
+[Prepare media files for the web]: /prepare-media/
diff --git a/src/site/content/en/media/prepare-media/index.md b/src/site/content/en/media/prepare-media/index.md
new file mode 100644
index 00000000000..b78475f0662
--- /dev/null
+++ b/src/site/content/en/media/prepare-media/index.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: Prepare media files for the web
+authors:
+  - joemedley
+  - derekherman
+description: |
+  In this section you'll learn how to format video for mobile web playback, and how
+  to create multiple files to cover a range of browsers, plus how to encrypt them.
+date: 2017-06-30
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+Now that we've introduced you to the [applications](/media-application-basics/)
+we use when manipulating media files, over the next few pages, we're going to
+take a raw video file from a camera and transform it into a resource that you
+can embed in a web page. We're going to show you how to format your
+video for mobile web playback, and how to create multiple files to cover a
+range of browsers. Specifically, we'll create a WebM file for use on Chrome and
+an MP4 file for use on other browsers.
+
+{% Aside 'objective' %}
+The result of this section will be media resources with the following
+characteristics:
+
+* Versions of a media file in common web-friendly formats containing both audio
+  and video streams.
+* A [**Resolution**](/resolution/) appropriate for your users' devices.
+* A [**Bitrate**](/bitrate/) that doesn't overload your users' network bandwidth.
+* A result that's viewable on all major browsers using **appropriate technologies**.
+{% endAside %}
+
+Plus we will dive deeper into common commands used for
+[Media conversion](/media-conversion/) and [Media encryption](/media-encryption/)
+that will serve as a good reference for later.
+
+By "**appropriate technologies**" we mean Dynamic Adaptive Streaming over HTTP
+([DASH]) or HTTP Live Streaming ([HLS]), which are the two primary means of
+providing video in HTML on the major browsers. By the end of this section,
+you'll be able to create media files that are ready for use in DASH and HLS.
+
+If you want to play along at home, you'll need a raw video file off a camera,
+preferably one that contains both audio and video. If you don't have one handy,
+then here's ten seconds of an `.mov` file named [glocken.mov] that was taken of
+the [Rathaus-Glockenspiel] in Munich's MarienPlatz.
+
+{% Aside %}
+The selection of the file formats, bitrate, and resolution are not arbitrary.
+We've selected these values for speedy web playback on mobile devices.
+{% endAside %}
+
+Next, let's get started with [Containers and codecs](/containers-and-codecs/).
+
+[DASH]: https://developer.mozilla.org/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video
+[HLS]: https://developer.apple.com/documentation/http_live_streaming
+[glocken.mov]: https://storage.googleapis.com/web-dev-assets/prepare-media/glocken.mov
+[Rathaus-Glockenspiel]: https://en.wikipedia.org/wiki/Rathaus-Glockenspiel
diff --git a/src/site/content/en/media/pwa-with-offline-streaming/index.md b/src/site/content/en/media/pwa-with-offline-streaming/index.md
new file mode 100644
index 00000000000..0a2e30521bf
--- /dev/null
+++ b/src/site/content/en/media/pwa-with-offline-streaming/index.md
@@ -0,0 +1,338 @@
+---
+layout: post
+title: PWA with offline streaming
+authors:
+  - dero
+  - derekherman
+description: |
+  Building a PWA with offline streaming has its challenges. In this article you
+  will learn about the APIs and techniques that provide users with a
+  high-quality offline media experience.
+date: 2021-07-05
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+[Progressive Web Apps] bring a lot of features previously reserved for native
+applications to the web. One of the most prominent features associated with
+PWAs is an offline experience.
+
+Even better would be an offline streaming media experience, which is an
+enhancement you could offer to your users in a few different ways. However,
+this creates a truly unique problem—media files can be *very* large. So
+you might be asking:
+
+- How do I download and store a large video file?
+- And how do I serve it to the user?
+
+In this article we will discuss answers to these questions, while
+referencing the [Kino] demo PWA we built that provides you with practical
+examples of how you can implement an offline streaming media experience without
+using any functional or presentational frameworks. The following examples are
+mainly for educational purposes, because in most cases you should probably use
+one of the existing [Media Frameworks] to provide these features.
+
+Unless you have a good business case for developing your own, building a PWA
+with offline streaming has its challenges. In this article you will learn about
+the APIs and techniques used to provide users with a high-quality offline media
+experience.
+
+## Downloading and storing a large media file
+
+Progressive Web Apps usually use the convenient [Cache API] to both download
+and store the assets required to provide the offline experience: documents,
+stylesheets, images, and others.
+
+Here is a basic example of using the Cache API within a Service Worker:
+
+```javascript/10-11
+const cacheStorageName = 'v1';
+
+this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(cacheStorageName).then(function(cache) {
+      return cache.addAll([
+        'index.html',
+        'style.css',
+        'scripts.js',
+
+        // Don't do this.
+        'very-large-video.mp4',
+      ]);
+    })
+  );
+});
+```
+
+While the example above does technically work, using the Cache API has several
+limitations that makes its use with large files impractical.
+
+For example, the Cache API doesn't:
+- Allow you to easily pause and resume downloads
+- Let you track the progress of downloads
+- Offer a way to properly respond to [HTTP range requests]
+
+All of these issues are pretty serious limitations for any video application.
+Let's review some other options that might be more appropriate.
+
+Nowadays, the [Fetch API] is a cross-browser way to asynchronously access remote
+files. In our use case it allows you to access large video files as a stream and
+store them incrementally as chunks using an HTTP range request.
+
+{% Aside %}
+Check out the [Background Fetch API] as a candidate for a progressive
+enhancement of the Fetch API in browsers that [support Background Fetch].
+{% endAside %}
+
+Now that you can read the chunks of data with the [Fetch API] you also need to
+store them. Chances are there is a bunch of metadata associated with your media
+file such as: name, description, runtime length, category, etc.
+
+You're not storing just the one media file, you are storing a structured object,
+and the media file is just one of its properties.
+
+In this case the [IndexedDB API] provides an excellent solution to store both the
+media data and metadata. It can hold huge amounts of binary data easily, and it
+also offers indexes that allow you to perform very fast data lookups.
+
+{% Aside %}
+There is also a [File System Access API] that you could use in some browsers to
+store the media files directly on the client device.
+{% endAside %}
+
+### Downloading media files using the Fetch API
+
+We built a couple of interesting features around the Fetch API in our demo PWA,
+which we named [Kino]—the [source code] is public so feel free to review it.
+
+- The ability to pause and resume incomplete downloads.
+- A custom buffer for storing chunks of data in the database.
+
+Before showing how those features are implemented, we'll first do a
+quick recap of how you can use the Fetch API to download files.
+
+```javascript
+/**
+ * Downloads a single file.
+ *
+ * @param {string} url URL of the file to be downloaded.
+ */
+async function downloadFile(url) {
+  const response = await fetch(url);
+  const reader = response.body.getReader();
+  do {
+    const { done, dataChunk } = await reader.read();
+    // Store the `dataChunk` to IndexedDB.
+  } while (!done);
+}
+```
+
+Notice that `await reader.read()` is in a loop? That's how you'll receive chunks
+of data from a readable stream as they arrive from the network. Consider how
+useful this is: you can start processing your data even before it all arrives
+from the network.
+
+{% Aside %}
+If you find the concept of streams confusing, check out
+[Streams–The definitive guide] before you continue.
+{% endAside %}
+
+### Resuming downloads
+
+When a download is paused or interrupted, the data chunks that have arrived will
+be safely stored in an IndexedDB database. You can then display a button to
+resume a download in your application. Because the [Kino] demo PWA server
+supports [HTTP range requests] resuming a download is somewhat straightforward:
+
+```javascript
+async downloadFile() {
+  // this.currentFileMeta contains data from IndexedDB.
+  const { bytesDownloaded, url, downloadUrl } = this.currentFileMeta;
+  const fetchOpts = {};
+
+  // If we already have some data downloaded,
+  // request everything from that position on.
+  if (bytesDownloaded) {
+    fetchOpts.headers = {
+      Range: `bytes=${bytesDownloaded}-`,
+    };
+  }
+
+  const response = await fetch(downloadUrl, fetchOpts);
+  const reader = response.body.getReader();
+
+  let dataChunk;
+  do {
+    dataChunk = await reader.read();
+    if (!dataChunk.done) this.buffer.add(dataChunk.value);
+  } while (!dataChunk.done && !this.paused);
+}
+```
+
+### Custom write buffer for IndexedDB
+
+On paper, the process of writing `dataChunk` values into an IndexedDB database
+is simple. Those values already are `ArrayBuffer` instances, which are storable
+in IndexedDB directly, so we can just create an object of an appropriate shape
+and store it.
+
+```javascript
+const dataItem = {
+  url: fileUrl,
+  rangeStart: dataStartByte,
+  rangeEnd: dataEndByte,
+  data: dataChunk,
+}
+
+// Name of the store that will hold your data.
+const storeName = 'fileChunksStorage'
+
+// `db` is an instance of `IDBDatabase`.
+const transaction = db.transaction([storeName], 'readwrite');
+const store = transaction.objectStore(storeName);
+const putRequest = store.put(data);
+
+putRequest.onsuccess = () => { ... }
+```
+
+While this approach works, you will likely discover that your IndexedDB writes
+are significantly slower than your download. This isn't because IndexedDB writes
+are slow, it's because we are adding a lot of transactional overhead by creating
+a new transaction for every data chunk that we receive from a network.
+
+The downloaded chunks can be rather small and can be emitted by the stream in
+rapid succession. You need to limit the rate of IndexedDB writes. In the
+[Kino] demo PWA we do this by implementing an **intermediary write buffer**.
+
+As data chunks arrive from the network, we append them to our buffer first. If
+the incoming data doesn't fit, we flush the full buffer into the database and
+clear it before appending the rest of the data. As a result our IndexedDB
+writes are less frequent, which leads to significantly improved write
+performance.
+
+## Serving a media file from offline storage
+
+Once you have a media file downloaded, you probably want your service worker to
+serve it from IndexedDB instead of fetching the file from the network.
+
+```javascript
+/**
+ * The main service worker fetch handler.
+ *
+ * @param {FetchEvent} event Fetch event.
+ */
+const fetchHandler = async (event) => {
+  const getResponse = async () => {
+    // Omitted Cache API code used to serve static assets.
+
+    const videoResponse = await getVideoResponse(event);
+    if (videoResponse) return videoResponse;
+
+    // Fallback to network.
+    return fetch(event.request);
+  };
+  event.respondWith(getResponse());
+};
+self.addEventListener('fetch', fetchHandler);
+```
+
+So what do you need to do in `getVideoResponse()`?
+
+- The `event.respondWith()` method expects a `Response` object as a parameter.
+- The [Response() constructor] tells us that there are several types of objects we
+  could use to instantiate a `Response` object: a `Blob`, `BufferSource`,
+  `ReadableStream`, and more.
+- We need an object that doesn't hold all of its data in memory, so we'll
+  probably want to choose the `ReadableStream`.
+
+Also, because we're dealing with large files, and we wanted to allow browsers to
+only request the part of the file they currently need, we needed to implement
+some basic support for [HTTP range requests].
+
+```javascript
+/**
+ * Respond to a request to fetch offline video file and construct a response
+ * stream.
+ *
+ * Includes support for `Range` requests.
+ *
+ * @param {Request} request  Request object.
+ * @param {Object}  fileMeta File meta object.
+ *
+ * @returns {Response} Response object.
+ */
+const getVideoResponse = (request, fileMeta) => {
+  const rangeRequest = request.headers.get('range') || '';
+  const byteRanges = rangeRequest.match(/bytes=(?<from>[0-9]+)?-(?<to>[0-9]+)?/);
+
+  // Using the optional chaining here to access properties of
+  // possibly nullish objects.
+  const rangeFrom = Number(byteRanges?.groups?.from || 0);
+  const rangeTo = Number(byteRanges?.groups?.to || fileMeta.bytesTotal - 1);
+
+  // Omitting implementation for brevity.
+  const streamSource = {
+     pull(controller) {
+       // Read file data here and call `controller.enqueue`
+       // with every retrieved chunk, then `controller.close`
+       // once all data is read.
+     }
+  }
+  const stream = new ReadableStream(streamSource);
+
+  // Make sure to set proper headers when supporting range requests.
+  const responseOpts = {
+    status: rangeRequest ? 206 : 200,
+    statusText: rangeRequest ? 'Partial Content' : 'OK',
+    headers: {
+      'Accept-Ranges': 'bytes',
+      'Content-Length': rangeTo - rangeFrom + 1,
+    },
+  };
+  if (rangeRequest) {
+    responseOpts.headers['Content-Range'] = `bytes ${rangeFrom}-${rangeTo}/${fileMeta.bytesTotal}`;
+  }
+  const response = new Response(stream, responseOpts);
+  return response;
+```
+
+Feel free to check out the [Kino] demo PWA [service worker source code] to find
+out how we are reading file data from IndexedDB and constructing a stream in
+a real application.
+
+## Other considerations
+
+With the main obstacles out of your way, you can now start adding some
+nice-to-have features to your video application. Here are a few examples of
+features you would find in the [Kino] demo PWA:
+
+- [Media Session API] integration that allows your users to control media
+  playback using dedicated hardware media keys or from media notification
+  popups.
+- Caching of other assets associated with the media files like subtitles, and
+  poster images using the good old [Cache API].
+- Support for video streams (DASH, HLS) download within the app. Because stream
+  manifests generally declare multiple sources of different bitrates, you need to
+  transform the manifest file and only download one media version before storing
+  it for offline viewing.
+
+Up next, you will learn about [Fast playback with audio and video preload].
+
+[Progressive Web Apps]: /progressive-web-apps/
+[Media Frameworks]: /media-frameworks/
+[Cache API]: /cache-api-quick-guide/
+[HTTP range requests]: https://developer.mozilla.org/docs/Web/HTTP/Range_requests
+[Fetch API]: https://developer.mozilla.org/docs/Web/API/Fetch_API
+[IndexedDB API]: https://developer.mozilla.org/docs/Web/API/IndexedDB_API
+[Background Fetch API]: https://developer.mozilla.org/docs/Web/API/Background_Fetch_API
+[support Background Fetch]: https://caniuse.com/mdn-api_serviceworkerregistration_backgroundfetch
+[File System Access API]: /file-system-access/
+[Kino]: https://kinoweb.dev
+[source code]: https://github.com/GoogleChrome/kino
+[Streams–The definitive guide]: /streams/
+[Media Session API]: /media-session/
+[Response() constructor]: https://developer.mozilla.org/docs/Web/API/Response/Response
+[service worker source code]: https://github.com/GoogleChrome/kino/blob/72055bdc7c8ad3de943a55293b2bf882e467c814/src/js/sw/sw.js#L53-L122
+[Fast playback with audio and video preload]: /fast-playback-with-preload/
diff --git a/src/site/content/en/media/resolution/index.md b/src/site/content/en/media/resolution/index.md
new file mode 100644
index 00000000000..901f3569da1
--- /dev/null
+++ b/src/site/content/en/media/resolution/index.md
@@ -0,0 +1,87 @@
+---
+layout: post
+title: Resolution
+authors:
+  - joemedley
+  - derekherman
+description: |
+  Resolution is the amount of information in a frame of video.
+date: 2017-06-30
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+In the previous articles you learned how to change the
+[containers, codecs](/containers-and-codecs/), and [bitrate](/bitrate/) of the
+[glocken.mov] media file. This article focuses on changing the resolution.
+
+**Resolution** is the amount of information in a single frame of video, given as
+the number of logical pixels in each dimension. For example, a resolution of
+1920 by 1080 works out to 1080 stacked horizontal lines, each of which is one
+logical pixel high and 1920 logical pixels wide. This resolution is frequently
+abbreviated 1080p because technically the width can vary. The dimensions 1080 by
+1920 produce an [aspect ratio] of 16:9, which is the ratio of movie screens and
+modern television sets. By the way this is the resolution defined as [full HD].
+
+[YouTube recommends] the following resolutions for video uploads, all in the 16:9
+aspect ratio. There's nothing specific to YouTube about this list. It's just a
+list of common 16:9 video resolutions.
+
+| Abbreviation | Dimensions |
+| ------------ | ---------- |
+| 2160p | 3840 x 2160 |
+| 1440p | 2560 x 1440 |
+| 1080p | 1920 x 1080 |
+| 720p | 1280 x 720 |
+| 480p | 854 x 480 |
+| 360p | 640 x 360 |
+| 240p | 426 x 240 |
+
+Which one should you use? That depends on your application. For simple embedding
+you may decide to chose only a single resolution. If you're preparing files for
+DASH or HLS, you may chose one, several, or all. Fortunately, this is one of the
+simplest transformations you'll make with FFmpeg.
+
+If you don't have FFmpeg installed read
+[Media application basics](/media-application-basics/#installing-applications-with-docker)
+to get it set up with Docker.
+
+1. MP4
+
+    ```bash
+    /media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k -s 1280x720 glocken_3g_720p.mp4
+    ```
+
+1. WebM
+
+    ```bash
+    /media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k -s 1280x720 glocken_3g_720p.webm
+    ```
+
+The following files should now exist:
+
+```bash
+/media # ls -l
+-rw-r--r-- 1 root root  12080306 Mar  7 12:16 glocken.mov
+-rwx------ 1 root root    531117 Mar  7 13:42 glocken_3g.mp4
+-rwx------ 1 root root    706119 Mar  7 13:46 glocken_3g.webm
+-rwx------ 1 root root    539414 Mar  7 14:15 glocken_3g_720p.mp4
+-rwx------ 1 root root    735930 Mar  7 14:19 glocken_3g_720p.webm
+```
+
+It's worth reiterating that you should start from the highest resolution and
+bitrate file you have available. If you're upgrading an older site, you'll want
+to find your original camera or other high resolution sources and convert from
+that rather than from older web files.
+
+Now that your files are prepared, you can either [add them to a web page](/add-media/)
+as they are now or dive a bit deeper and continue to learn more command line options
+by reading the [Media conversion](/media-conversion/) page, and then close out the
+section with [Media encryption](/media-encryption/).
+
+[glocken.mov]: https://storage.googleapis.com/web-dev-assets/prepare-media/glocken.mov
+[aspect ratio]: https://en.wikipedia.org/wiki/Aspect_ratio_(image)
+[full HD]:https://en.wikipedia.org/wiki/1080p
+[YouTube recommends]: https://support.google.com/youtube/answer/6375112
diff --git a/src/site/content/en/media/video-and-source-tags/index.md b/src/site/content/en/media/video-and-source-tags/index.md
new file mode 100644
index 00000000000..4bf9139a712
--- /dev/null
+++ b/src/site/content/en/media/video-and-source-tags/index.md
@@ -0,0 +1,394 @@
+---
+layout: post
+title: The <video> and <source> tags
+authors:
+  - samdutton
+  - joemedley
+  - derekherman
+description: |
+  You've properly prepared a video file for the web. You've given it correct
+  dimensions and the correct resolution. You've even created separate WebM and
+  MP4 files for different browsers. For anyone to see it, you still need to add
+  it to a web page.
+date: 2014-02-15
+updated: 2021-07-05
+tags:
+  - media
+  # - video
+---
+
+You've properly [prepared a video file] for the web. You've given it correct
+dimensions and the correct resolution. You've even created separate WebM and
+MP4 files for different browsers.
+
+For anyone to see your video, you still need to add it to a web page. Doing so
+properly requires adding two HTML elements: the [`<video>`] element and the
+[`<source>`] element. In addition to basics about these tags, this
+article explains attributes you should add to those tags to craft a good
+user experience.
+
+{% Aside %}
+You always have the option of uploading your file to [YouTube] or [Vimeo]. In
+many cases, this is preferable to the procedure described here. Those services
+handle formatting and filetype conversion for you, as well as provide the means
+to embed a video in your web page. If you need to manage this yourself, read on.
+{% endAside %}
+
+## Specify a single file
+
+Although it's not recommended, you can use the video element by itself. Always
+use the `type` attribute as shown below. The browser uses this to determine if
+it can play the provided video file. If it can't, the enclosed text displays.
+
+```html
+<video src="chrome.webm" type="video/webm">
+    <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+### Specify multiple file formats
+
+Recall from [Media file basics] that not all browsers support the same video
+formats. The `<source>` element lets you specify multiple formats as a fallback
+in case the user's browser doesn't support one of them.
+
+The example below produces the embedded video that is used as an example later
+in this article.
+
+```html
+<video controls>
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
+  <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+[Try it on Glitch] ([source])
+
+{% Aside %}
+Notice in the previous example that the `controls` attribute was introduced.
+This instructs browsers to allow the user to control video playback, including
+volume, seeking, selecting captions, and pause/resume playback among others.
+{% endAside %}
+
+You should always add a `type` attribute to the `<source>` tags event though it
+is optional. This ensures that the browser only downloads the file that it is
+capable of playing.
+
+This approach has several advantages over serving different HTML or server-side
+scripting, especially on mobile:
+
+* You can list formats in order of preference.
+* Client-side switching reduces latency; only one request is made to
+  get content.
+* Letting the browser choose a format is simpler, quicker, and potentially
+  more reliable than using a server-side support database with user-agent
+  detection.
+* Specifying each file source's type improves network performance; the browser
+  can select a video source without having to download part of the video to
+  "sniff" the format.
+
+These issues are especially important in mobile contexts, where bandwidth and
+latency are at a premium, and the user's patience is likely limited. Omitting
+the `type` attribute can affect performance when there are multiple sources
+with unsupported types.
+
+There are a few ways you can dig into the details. Check out
+[A Digital Media Primer for Geeks] to find out more about how video and audio
+work on the web. You can also use [remote debugging] in DevTools to compare
+network activity [with type attributes] and [without type attributes].
+
+{% Aside 'caution' %}
+Be sure to check the response headers in your browser developer tools to
+[ensure your server reports the right MIME type]; otherwise video source type
+checks won't work.
+{% endAside %}
+
+### Specify start and end times
+
+Save bandwidth and make your site feel more responsive: use media fragments to
+add start and end times to the video element.
+
+<figure>
+  <video controls width="100%">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm#t=5,10" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4#t=5,10" type="video/mp4">
+    <p>This browser does not support the video element.</p>
+  </video>
+</figure>
+
+To use a media fragment, add `#t=[start_time][,end_time]` to the media URL. For
+example, to play the video from seconds 5 to 10, specify:
+
+```html
+<source src="video/chrome.webm#t=5,10" type="video/webm">
+```
+
+You can also specify the times in `<hours>:<minutes>:<seconds>`. For example,
+`#t=00:01:05` starts the video at one minute, five seconds. To play only the
+first minute of video, specify `#t=,00:01:00`.
+
+You can use this feature to deliver multiple views on the same video—like
+cue points in a DVD–without having to encode and serve multiple files.
+
+For this feature to work, your server must support range requests and that
+capability must be enabled. Most servers enable range requests by default.
+Because some hosting services turn them off, you should confirm that range
+requests are available for using fragments on your site.
+
+Fortunately, you can do this in your browser developer tools. In Chrome, for
+instance, it's in the [Network panel]. Look for the `Accept-Ranges` header and
+verify that it says `bytes`. In the image, I've drawn a red box around this
+header. If you do not see `bytes` as the value, you'll need to contact your
+hosting provider.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/20DlLyicG5PAo6TXBKh3.png", alt="Chrome DevTools screenshot: Accept-Ranges: bytes.", width="800", height="480" %}
+  <figcaption>Chrome DevTools screenshot: Accept-Ranges: bytes.</figcaption>
+</figure>
+
+### Include a poster image
+
+Add a poster attribute to the `video` element so that viewers have an idea of
+the content as soon as the element loads, without needing to download the video
+or start playback.
+
+```html
+<video poster="poster.jpg" ...>
+  …
+</video>
+```
+
+A poster can also be a fallback if the video `src` is broken or if none of the
+supplied video formats are supported. The only downside to a poster images is an
+additional file request, which consumes some bandwidth and requires rendering.
+For more information see [Efficiently encode images].
+
+<div class="switcher">
+{% Compare 'worse' %}
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/R8VNeplKwajJhOuVkPDT.png", alt="Without a fallback poster, the video just looks broken.", width="360", height="600" %}
+</figure>
+
+{% CompareCaption %}
+Without a fallback poster, the video just looks broken.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rNhydHVGeL2P0sQ0je5k.png", alt="A fallback poster makes it seem as if the first frame has been captured.", width="360", height="600" %}
+</figure>
+
+{% CompareCaption %}
+A fallback poster makes it seem as if the first frame has been captured.
+{% endCompareCaption %}
+
+{% endCompare %}
+</div>
+
+### Ensure videos don't overflow containers
+
+When video elements are too big for the viewport, they may overflow their
+container, making it impossible for the user to see the content or use the
+controls.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cDl2OfCE3hQivhaNvMUh.png", alt="Android Chrome screenshot, portrait: unstyled video element overflows viewport.", width="338", height="600" %}
+    <figcaption>Android Chrome screenshot, portrait: unstyled video element overflows
+    viewport.</figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCiZsNkZNsAhWbOBsLCs.png", alt="Android Chrome screenshot, landscape: unstyled video element overflows viewport.", width="800", height="450" %}
+    <figcaption>Android Chrome screenshot, landscape: unstyled video element overflows
+    viewport.</figcaption>
+  </figure>
+</div>
+
+You can control video dimensions using CSS. If CSS does not meet all of your
+needs, JavaScript libraries and plugins such as [FitVids] (outside the scope
+of this article) can help, even for videos from YouTube and other sources.
+Unfortunately, these resources can increase your [network payload sizes] with
+negative consequences for your revenues and your users' wallets.
+
+For simple uses like the ones I'm describing here, use [CSS media queries] to
+specify the size of elements depending on the viewport dimensions; `max-width:
+100%` is your friend.
+
+For media content in iframes (such as YouTube videos), try a responsive approach
+(like the one [proposed by John Surdakowski]).
+
+{% Aside 'caution' %}
+Don't force element sizing that results in an [aspect ratio] different from the
+original video. Squashed or stretched videos looks awful.
+{% endAside %}
+
+#### CSS
+
+```css
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+```
+
+#### HTML
+
+```html
+<div class="video-container">
+  <iframe
+    src="//www.youtube.com/embed/l-BA9Ee2XuM"
+    frameborder="0"
+    width="560"
+    height="315"
+  ></iframe>
+</div>
+```
+
+[Try it]
+
+Compare the [responsive sample] to the [unresponsive version]. As you can see,
+the unresponsive version isn't a great user experience.
+
+### Device orientation
+
+Device orientation isn't an issue for desktop monitors or laptops, but it's
+hugely important when considering web page design for mobile devices and
+tablets.
+
+Safari on iPhone does a good job of switching between portrait and landscape
+orientation:
+
+<div class="switcher">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AmHneDShMOioWZwYG2kF.png", alt="Screenshot of video playing in Safari on iPhone, portrait.", width="338", height="600" %}
+  <figcaption>Screenshot of video playing in Safari on iPhone, portrait.</figcaption>
+</figure>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MZwkLJaXVk4g8lruhiKZ.png", alt="Screenshot of video playing in Safari on iPhone, landscape.", width="600", height="338" %}
+  <figcaption>Screenshot of video playing in Safari on iPhone, landscape.</figcaption>
+</figure>
+</div>
+
+Device orientation on an iPad and Chrome on Android can be problematic.
+For example, without any customization a video playing on an iPad in landscape
+orientation looks like this:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9FsExgY6cJFfMkxOPNkl.png", alt="Screenshot of video playing in Safari on iPad, landscape.", width="600", height="450" %}
+  <figcaption>Screenshot of video playing in Safari on iPad, landscape.</figcaption>
+</figure>
+
+Setting the video `width: 100%` or `max-width: 100%` with CSS can resolve
+many device orientation layout problems.
+
+### Autoplay
+
+The `autoplay` attribute controls whether the browser downloads and plays a
+video immediately. The precise way it works depends on the platform and browser.
+
+* Chrome: Depends on multiple factors including but not limited to whether the
+  viewing is on desktop and whether the mobile user has added your site or app
+  to their homescreen. For details, see [Autoplay best practices].
+
+* Firefox: Blocks all video and sound, but gives users the ability to relax these
+  restrictions for either all sites or particular sites. For details, see
+  [Allow or block media autoplay in Firefox]
+
+* Safari: Has historically required a user gesture, but has been relaxing that
+  requirement in recent versions. For details, see
+  [New &lt;video> Policies for iOS].
+
+Even on platforms where autoplay is possible, you need to consider whether it's
+a good idea to enable it:
+
+* Data usage can be expensive.
+* Playing media before the user wants it can hog bandwidth and CPU, and thereby
+  delay page rendering.
+* Users may be in a context where playing video or audio is intrusive.
+
+### Preload
+
+The `preload` attribute provides a hint to the browser as to how much
+information or content to preload.
+
+<table class="responsive">
+  <thead>
+    <tr>
+      <th>Value</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Value"><code>none</code></td>
+      <td data-th="Description">The user might chose not to watch the video, so don't
+      preload anything.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>metadata</code></td>
+      <td data-th="Description">Metadata (duration, dimensions, text tracks) should be
+      preloaded, but with minimal video.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>auto</code></td>
+      <td data-th="Description">Downloading the entire video right away is considered
+      desirable. An empty string produces the same result.</td>
+    </tr>
+  </tbody>
+</table>
+
+The `preload` attribute has different effects on different platforms.
+For example, Chrome buffers 25 seconds of video on desktop but none on iOS or
+Android. This means that on mobile, there may be playback startup delays
+that don't happen on desktop. See [Fast playback with audio and video preload] or
+[Steve Souders' blog] for more details.
+
+Now that you know how to add media to your web page it's time to learn about
+[Media accessibility] where you will add captions to your video for hearing
+impaired, or when playing the audio is not a viable option.
+
+[prepared a video file]: /prepare-media/
+[`<video>`]: https://developer.mozilla.org/docs/Web/HTML/Element/video
+[`<source>`]: https://developer.mozilla.org/docs/Web/HTML/Element/source
+[YouTube]: https://www.youtube.com/
+[Vimeo]: https://vimeo.com
+[Media file basics]: /media-file-basics/
+[Try it on Glitch]: https://track-demonstration.glitch.me
+[source]: https://glitch.com/edit/#!/track-demonstration
+[A Digital Media Primer for Geeks]: https://www.xiph.org/video/vid1.shtml
+[remote debugging]: https://developer.chrome.com/docs/devtools/remote-debugging/
+[with type attributes]: https://googlesamples.github.io/web-fundamentals/fundamentals/media/video-main.html
+[without type attributes]: https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/notype.html
+[ensure your server reports the right MIME type]: https://developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types
+[Network panel]: https://developer.chrome.com/docs/devtools/#network
+[Efficiently encode images]: https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/
+[FitVids]: http://fitvidsjs.com/
+[network payload sizes]: https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/
+[CSS media queries]: /responsive-web-design-basics/#media-queries
+[proposed by John Surdakowski]: http://avexdesigns.com/responsive-youtube-embed/
+[aspect ratio]: https://www.google.com/search?q=aspect+ratio&oq=aspect+ratio&aqs=chrome..69i57j35i39j0l6.1896j0j7&sourceid=chrome&ie=UTF-8
+[Try it]: https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html
+[responsive sample]: https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html
+[unresponsive version]: https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/unyt.html
+[Autoplay best practices]: /autoplay-best-practices/
+[Allow or block media autoplay in Firefox]: https://support.mozilla.org/en-US/kb/block-autoplay
+[New &lt;video> Policies for iOS]: https://webkit.org/blog/6784/new-video-policies-for-ios/
+[Fast playback with audio and video preload]: /fast-playback-with-preload/
+[Steve Souders' blog]: https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/
+[Media accessibility]: /media-accessibility/
diff --git a/src/site/content/en/metrics/cls/index.md b/src/site/content/en/metrics/cls/index.md
index 2b367499793..d7e134f3583 100644
--- a/src/site/content/en/metrics/cls/index.md
+++ b/src/site/content/en/metrics/cls/index.md
@@ -5,17 +5,20 @@ authors:
   - philipwalton
   - mihajlija
 date: 2019-06-11
-updated: 2020-06-23
+updated: 2023-04-12
 description: |
   This post introduces the Cumulative Layout Shift (CLS) metric and explains
-  how to measure it
+  how to measure it.
 tags:
   - performance
   - metrics
+  - web-vitals
 ---
 
-{% Aside %}
-  Cumulative Layout Shift (CLS) is an important, user-centric metric for
+{% BrowserCompat 'api.LayoutShift' %}
+
+{% Aside 'key-term' %}
+  Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It is an important, user-centric metric for
   measuring [visual
   stability](/user-centric-performance-metrics/#types-of-metrics) because it
   helps quantify how often users experience unexpected layout shifts&mdash;a low
@@ -32,9 +35,8 @@ else!
 Most of the time these kinds of experiences are just annoying, but in some
 cases, they can cause real damage.
 
-<figure class="w-figure">
+<figure>
   <video autoplay controls loop muted
-    class="w-screenshot"
     poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png"
     width="658" height="510">
     <source
@@ -44,7 +46,7 @@ cases, they can cause real damage.
       src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4"
       type="video/mp4; codecs=h264">
   </video>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
+  <figcaption>
     A screencast illustrating how layout instability can negatively affect
     users.
   </figcaption>
@@ -68,28 +70,64 @@ measuring how often it's occurring for real users.
 
 ## What is CLS?
 
-CLS measures the sum total of all individual _layout shift scores_ for every
-_unexpected layout shift_ that occurs during the entire lifespan of the page.
+CLS is a measure of the largest burst of _layout shift scores_ for every
+[unexpected](/cls/#expected-vs-unexpected-layout-shifts) layout shift that
+occurs during the entire lifespan of a page.
 
 A _layout shift_ occurs any time a visible element changes its position from one
 rendered frame to the next. (See below for details on how individual [layout
 shift scores](#layout-shift-score) are calculated.)
 
-<picture>
-  <source srcset="../vitals/cls_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="../vitals/cls_4x3.svg"
-      alt="Good CLS values are under 0.1, poor values are greater than 0.25
-            and anything in between needs improvement">
-</picture>
+A burst of layout shifts, known as a [_session
+window_](/evolving-cls/#why-a-session-window), is when one or more individual
+layout shifts occur in rapid succession with less than 1-second in between each
+shift and a maximum of 5 seconds for the total window duration.
+
+The largest burst is the session window with the maximum cumulative score of all
+layout shifts within that window.
+
+<figure>
+  <video controls autoplay loop muted
+    width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>
+    Example of session windows. Blue bars represent the scores of each individual layout shift.
+  </figcaption>
+</figure>
+
+{% Aside 'caution' %}
+Previously CLS measured the sum total of _all individual layout shift scores_
+that occurred during the entire lifespan of the page.
+To see which tools still provide the ability to benchmark against the original
+implementation, check out [Evolving Cumulative Layout Shift in web tooling](/cls-web-tooling).
+{% endAside %}
 
 ### What is a good CLS score?
 
 To provide a good user experience, sites should strive to have a CLS score of
-less than **0.1**. To ensure you're hitting this target for most of your users,
-a good threshold to measure is the **75th percentile** of page loads, segmented
+**0.1** or less. To ensure you're hitting this target for most of your users, a
+good threshold to measure is the **75th percentile** of page loads, segmented
 across mobile and desktop devices.
 
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg",
+        alt="Good CLS values are 0.1 or less, poor values are greater than 0.25, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,
   see: [Defining the Core Web Vitals metrics
@@ -102,7 +140,7 @@ Layout shifts are defined by the [Layout Instability
 API](https://github.com/WICG/layout-instability), which reports `layout-shift`
 entries any time an element that is visible within the viewport changes its
 start position (for example, its top and left position in the default [writing
-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)) between
+mode](https://developer.mozilla.org/docs/Web/CSS/writing-mode)) between
 two frames. Such elements are considered _unstable elements_.
 
 Note that layout shifts only occur when existing elements change their start
@@ -131,8 +169,7 @@ The union of the visible areas of all _unstable elements_ for the previous frame
 _and_ the current frame&mdash;as a fraction of the total area of the
 viewport&mdash;is the _impact fraction_ for the current frame.
 
-[![Impact fraction example with one _unstable
-element_](layout-shift-1.png)](layout-shift-1.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="Impact fraction example with one _unstable element_", width="800", height="600", linkTo=true %}
 
 In the image above there's an element that takes up half of the viewport in one
 frame. Then, in the next frame, the element shifts down by 25% of the viewport
@@ -148,8 +185,7 @@ is the greatest distance any _unstable element_ has moved in the frame (either
 horizontally or vertically) divided by the viewport's largest dimension (width
 or height, whichever is greater).
 
-[![Distance fraction example with one _unstable
-element_](layout-shift-2.png)](layout-shift-2.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="Distance fraction example with one _unstable element_", width="800", height="600", linkTo=true %}
 
 In the example above, the largest viewport dimension is the height, and the
 unstable element has moved by 25% of the viewport height, which makes the
@@ -167,8 +203,7 @@ is `0.25`, so the _layout shift score_ is `0.75 * 0.25 = 0.1875`.
 The next example illustrates how adding content to an existing element affects
 the layout shift score:
 
-[![Layout shift example with stable and _unstable elements_ and viewport
-clipping](layout-shift-3.png)](layout-shift-3.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="Layout shift example with multiple stable and _unstable elements_", width="800", height="600", linkTo=true %}
 
 The "Click Me!" button is appended to the bottom of the gray box with black
 text, which pushes the green box with white text down (and partially out of the
@@ -194,8 +229,7 @@ The layout shift score is `0.5 x 0.14 = 0.07`.
 
 This last example illustrates multiple _unstable elements_:
 
-[![Layout shift example with multiple stable and _unstable
-elements_](layout-shift-4.png)](layout-shift-4.png)
+{% Img src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/J8AWG72qYlmbAHxjxuLg.png", alt="Layout shift example with stable and _unstable elements_ and viewport clipping", width="800", height="600", linkTo=true %}
 
 In the first frame above there are four results of an API request for animals,
 sorted in alphabetical order. In the second frame, more results are added to the
@@ -208,15 +242,15 @@ items labelled "Dog", "Horse", and "Zebra" all shift their start positions,
 making them _unstable elements_.
 
 Again, the red, dotted rectangles represent the union of these three _unstable
-elements_' before and after areas, which in this case is around 38% of the
-viewport's area (_impact fraction_ of `0.38`).
+elements_' before and after areas, which in this case is around 60% of the
+viewport's area (_impact fraction_ of `0.60`).
 
 The arrows represent the distances that _unstable elements_ have moved from
 their starting positions. The "Zebra" element, represented by the blue arrow,
 has moved the most, by about 30% of the viewport height. That makes the
 _distance fraction_ in this example `0.3`.
 
-The layout shift score is `0.38 x 0.3 = 0.1172`.
+The layout shift score is `0.60 x 0.3 = 0.18`.
 
 ### Expected vs. unexpected layout shifts
 
@@ -242,6 +276,15 @@ Layout shifts that occur within 500 milliseconds of user input will have the
 [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput)
 flag set, so they can be excluded from calculations.
 
+{% Aside 'caution' %}
+  The `hadRecentInput` flag will only be true for discrete input events like tap,
+  click, or keypress. Continuous interactions such as scrolls, drags, or pinch
+  and zoom gestures are not considered "recent input". See the
+  [Layout Instability Spec](https://github.com/WICG/layout-instability#recent-input-exclusion)
+  for more details.
+{% endAside %}
+
+
 #### Animations and transitions
 
 Animations and transitions, when done well, are a great way to update content on
@@ -251,7 +294,10 @@ content that moves gradually and naturally from one position to the next can
 often help the user better understand what's going on, and guide them between
 state changes.
 
-CSS [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
+Be sure to respect [`prefers-reduced-motion`](/prefers-reduced-motion/) browser settings, as some site visitors
+can experience ill effects or attention issues from animation.
+
+CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)
 property allows you to animate elements without triggering layout shifts:
 
 * Instead of changing the `height` and `width` properties, use `transform:
@@ -275,119 +321,96 @@ available in the following tools:
 ### Field tools
 
 - [Chrome User Experience
-  Report](https://developers.google.com/web/tools/chrome-user-experience-report)
-- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+  Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [Search Console (Core Web Vitals
   report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
 
 ### Lab tools
 
-- [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
-- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [WebPageTest](https://webpagetest.org/)
 
-### Measure CLS in JavaScript
+### Measure layout shifts in JavaScript
 
-The easiest way to measure CLS (as well as all Web Vitals [field
-metrics]((/metrics/#in-the-field))) is with the [`web-vitals` JavaScript
-library](https://github.com/GoogleChrome/web-vitals), which wraps all the
-complexity of manually measuring CLS into a single function:
+To measure layout shifts in JavaScript, you use the [Layout Instability API](https://github.com/WICG/layout-instability).
 
-```js
-import {getCLS} from 'web-vitals';
+The following example shows how to create a [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) to log `layout-shift` entries to the console:
 
-// Measure and log the current CLS value,
-// any time it's ready to be reported.
-getCLS(console.log);
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('Layout shift:', entry);
+  }
+}).observe({type: 'layout-shift', buffered: true});
 ```
 
-To manually measure CLS, you can use the [Layout Instability
-API](https://github.com/WICG/layout-instability). The following example shows
-how to create a
-[`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
-that listens for individual `layout-shift` entries and logs them to the console:
+### Measure CLS in JavaScript
 
-{% set entryType = 'layout-shift' %}
+To measure CLS in JavaScript, you need to group these unexpected `layout-shift` entries into sessions, and calculate the maximum session value. You can refer to the [`web vitals` JavaScript library source code](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts) which contains a reference implementation on how CLS is calculated.
 
-```js
-{% include 'content/metrics/performance-observer-try.njk' %}
-  const po = new PerformanceObserver((list) => {
-    for (const entry of list.getEntries()) {
-      console.log(entry);
-    }
-  });
-
-  po.observe({type: 'layout-shift', buffered: true});
-{% include 'content/metrics/performance-observer-catch.njk' %}
-```
+In most cases, the current CLS value at the time the page is being unloaded is the final CLS value for that page, but there are a few important exceptions as noted in the next section. The `web vitals` JavaScript library accounts for these as much as possible, within the limitations of the Web APIs.
+
+#### Differences between the metric and the API
+
+- If a page is loaded in the background, or if it's backgrounded prior to the
+  browser painting any content, then it should not report any CLS value.
+- If a page is restored from the [back/forward
+  cache](/bfcache/#impact-on-core-web-vitals), its CLS value should be reset to
+  zero since users experience this as a distinct page visit.
+- The API does not report `layout-shift` entries for shifts that occur within
+  iframes but the metric does as they are part of the user experience of the
+  page. This can
+  [show as a difference between CrUX and RUM](/crux-and-rum-differences/#iframes).
+  To properly measure CLS you should consider them. Sub-frames can
+  use the API to report their `layout-shift` entries to the parent frame for
+  [aggregation](https://github.com/WICG/layout-instability#cumulative-scores).
+
+In addition to these exceptions, CLS has some added complexity due to the fact
+that it measures the entire lifespan of a page:
 
-CLS is the sum of those individual `layout-shift` entries that didn't occur with
-recent user input. To calculate CLS, declare a variable that stores the current
-score, and then increment it any time a new, unexpected layout shift is
-detected.
+- Users might keep a tab open for a _very_ long time&mdash;days, weeks, months.
+  In fact, a user might never close a tab.
+- On mobile operating systems, browsers typically do not run page unload
+  callbacks for background tabs, making it difficult to report the "final"
+  value.
 
-Rather than reporting every change to CLS (which could happen very frequently),
-it's better to keep track of the current CLS value and report it any time the
-page's [lifecycle
-state](https://developers.google.com/web/updates/2018/07/page-lifecycle-api)
-changes to hidden:
+To handle such cases, CLS should be reported any time a page is
+background&mdash;in addition to any time it's unloaded (the [`visibilitychange`
+event](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange)
+covers both of these scenarios). And analytics systems receiving this data will
+then need to calculate the final CLS value on the backend.
 
-{% set entryCallback = 'onLayoutShiftEntry' %}
+Rather than memorizing and grappling with all of these cases yourself, developers can use the
+[`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) to
+measure CLS, which accounts for everything mentioned above:
 
 ```js
-{% include 'content/metrics/send-to-analytics.njk' %}
-{% include 'content/metrics/performance-observer-try.njk' %}
-  // Store the current layout shift score for the page.
-  let cls = 0;
-
-  function onLayoutShiftEntry(entry) {
-    // Only count layout shifts without recent user input.
-    if (!entry.hadRecentInput) {
-      cls += entry.value;
-    }
-  }
+import {onCLS} from 'web-vitals';
 
-{% include 'content/metrics/performance-observer-init.njk' %}
-
-  // Log the current CLS score any time the
-  // page's lifecycle state changes to hidden.
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'hidden') {
-      // Force any pending records to be dispatched and disconnect the observer.
-      po.takeRecords().forEach((entry) => onLayoutShiftEntry(entry, po));
-      po.disconnect();
-
-      // Report the CLS value to an analytics endpoint.
-      sendToAnalytics({cls});
-    }
-  });
-{% include 'content/metrics/performance-observer-catch.njk' %}
+// Measure and log CLS in all situations
+// where it needs to be reported.
+onCLS(console.log);
 ```
 
+{% Aside %}
+  In some cases (such as cross-origin iframes) it's not possible to measure CLS
+  in JavaScript. See the
+  [limitations](https://github.com/GoogleChrome/web-vitals#limitations) section
+  of the `web-vitals` library for details.
+{% endAside %}
+
 ## How to improve CLS
 
-For most websites, you can avoid all unexpected layout shifts by sticking to a
-few guiding principles:
-
-- **Always include size attributes on your images and video elements, or
-  otherwise reserve the required space with something like [CSS aspect ratio
-  boxes](https://css-tricks.com/aspect-ratio-boxes/).** This approach ensures
-  that the browser can allocate the correct amount of space in the document
-  while the image is loading. Note that you can also use the [unsized-media
-  feature
-  policy](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md)
-  to force this behavior in browsers that support feature policies.
-- **Never insert content above existing content, except in response to a user
-  interaction.** This ensures any layout shifts that occur are expected.
-- **Prefer transform animations to animations of properties that trigger layout
-  changes.** Animate transitions in a way that provides context and continuity
-  from state to state.
-
-For a deep dive on how to improve CLS, see [Optimize
-CLS](https://web.dev/optimize-cls/).
+A full guide on [optimizing CLS](/optimize-cls/) is available to guide you through the process of identifying layout shifts in the field and using lab data to drill down and optimize them.
 
 ## Additional resources
 
+- Google Publisher Tag's guidance on
+  [minimizing layout shift](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)
 - [Understanding Cumulative Layout Shift](https://youtu.be/zIJuY-JCjqw) by
   [Annie Sullivan](https://anniesullie.com/) and [Steve
   Kobes](https://kobes.ca/) at [#PerfMatters](https://perfmattersconf.com/)
diff --git a/src/site/content/en/metrics/cls/layout-shift-1.png b/src/site/content/en/metrics/cls/layout-shift-1.png
deleted file mode 100644
index 6ddb3a92beb..00000000000
Binary files a/src/site/content/en/metrics/cls/layout-shift-1.png and /dev/null differ
diff --git a/src/site/content/en/metrics/cls/layout-shift-2.png b/src/site/content/en/metrics/cls/layout-shift-2.png
deleted file mode 100755
index a5da7d5373d..00000000000
Binary files a/src/site/content/en/metrics/cls/layout-shift-2.png and /dev/null differ
diff --git a/src/site/content/en/metrics/cls/layout-shift-3.png b/src/site/content/en/metrics/cls/layout-shift-3.png
deleted file mode 100755
index 4c0151bb158..00000000000
Binary files a/src/site/content/en/metrics/cls/layout-shift-3.png and /dev/null differ
diff --git a/src/site/content/en/metrics/cls/layout-shift-4.png b/src/site/content/en/metrics/cls/layout-shift-4.png
deleted file mode 100755
index c6836e6ab26..00000000000
Binary files a/src/site/content/en/metrics/cls/layout-shift-4.png and /dev/null differ
diff --git a/src/site/content/en/metrics/custom-metrics/index.md b/src/site/content/en/metrics/custom-metrics/index.md
index 7852cd133c2..f1541813f4d 100644
--- a/src/site/content/en/metrics/custom-metrics/index.md
+++ b/src/site/content/en/metrics/custom-metrics/index.md
@@ -56,6 +56,7 @@ So for any custom metrics you measure on your site, it's best to use one of the
 following APIs if possible.
 
 ### Performance Observer
+{% BrowserCompat 'api.PerformanceObserver' %}
 
 Understanding the PerformanceObserver API is critical to creating custom
 performance metrics because it's the mechanism by which you get data from all
@@ -69,7 +70,7 @@ periods](https://w3c.github.io/requestidlecallback/#idle-periods).
 You create a `PerformanceObserver` by passing it a callback to be run whenever
 new performance entries are dispatched. Then you tell the observer what types of
 entries to listen for via the
-[`observe()`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe)
+[`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe)
 method:
 
 ```js
@@ -134,9 +135,9 @@ Prior to the Performance Observer API, developers could access performance
 entries using the following three methods defined on the
 [`performance`](https://w3c.github.io/performance-timeline/) object:
 
-- [`getEntries()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntries)
-- [`getEntriesByName()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByName)
-- [`getEntriesByType()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByType)
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
 
 While these APIs are still supported, their usage is not recommended because
 they don't allow you to listen for when new entries are emitted. In addition,
@@ -193,6 +194,7 @@ try {
 ```
 
 ### Long Tasks API
+{% BrowserCompat 'api.PerformanceLongTaskTiming' %}
 
 The [Long Tasks API](https://w3c.github.io/longtasks/) is useful for knowing
 when the browser's main thread is blocked for long enough to affect frame rate
@@ -202,11 +204,11 @@ longer than 50 milliseconds (ms).
 Anytime you need to run expensive code (or load and execute large scripts) it's
 useful to track whether or not that code blocked the main thread. In fact, many
 higher-level metrics are built on top of the Long Tasks API themselves (such as
-[Time to Interactive (TTI)](/interactive/) and [Total Blocking Time
-(TBT)](/lighthouse-total-blocking-time/)).
+[Time to Interactive (TTI)](/tti/) and [Total Blocking Time
+(TBT)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)).
 
 To determine when long tasks happen, you can use
-[PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
+[PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
 and register to observe entries of type `longtask`:
 
 ```js
@@ -228,6 +230,7 @@ try {
 ```
 
 ### Element Timing API
+{% BrowserCompat 'api.PerformanceElementTiming' %}
 
 The [Largest Contentful Paint (LCP)](/lcp/) metric is
 useful for knowing when the largest image or text block was painted to the
@@ -385,10 +388,11 @@ try {
 ```
 
 ### Navigation Timing API
+{% BrowserCompat 'api.PerformanceNavigationTiming' %}
 
 The [Navigation Timing API](https://w3c.github.io/navigation-timing/) is similar
 to the Resource Timing API, but it reports only [navigation
-requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests).
+requests](https://developer.chrome.com/docs/workbox/caching-strategies-overview).
 The `navigation` entry type is also similar to the `resource` entry type, but it
 contains some [additional
 information](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming)
@@ -485,4 +489,4 @@ try {
 }
 ```
 
-[devtools]: https://developers.google.com/web/updates/2018/04/devtools#tabs
+[devtools]: https://developer.chrome.com/blog/new-in-devtools-67/#tabs
diff --git a/src/site/content/en/metrics/fcp/fcp-filmstrip.png b/src/site/content/en/metrics/fcp/fcp-filmstrip.png
deleted file mode 100644
index 06225d05cc0..00000000000
Binary files a/src/site/content/en/metrics/fcp/fcp-filmstrip.png and /dev/null differ
diff --git a/src/site/content/en/metrics/fcp/index.md b/src/site/content/en/metrics/fcp/index.md
index 93d0f0ed7d0..bdeafe6616a 100644
--- a/src/site/content/en/metrics/fcp/index.md
+++ b/src/site/content/en/metrics/fcp/index.md
@@ -4,7 +4,7 @@ title: First Contentful Paint (FCP)
 authors:
   - philipwalton
 date: 2019-11-07
-updated: 2020-06-15
+updated: 2022-10-19
 description: |
   This post introduces the First Contentful Paint (FCP) metric and explains
   how to measure it
@@ -13,6 +13,8 @@ tags:
   - metrics
 ---
 
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
 {% Aside %}
   First Contentful Paint (FCP) is an important, user-centric metric for
   measuring [perceived load
@@ -29,7 +31,7 @@ starts loading to when any part of the page's content is rendered on the screen.
 For this metric, "content" refers to text, images (including background images),
 `<svg>` elements, or non-white `<canvas>` elements.
 
-[![FCP timeline from google.com](fcp-filmstrip.png)](fcp-filmstrip.png)
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="FCP timeline from google.com", width="800", height="311", linkTo=true %}
 
 In the above load timeline, FCP happens in the second
 frame, as that's when the first text and image elements are rendered to the
@@ -41,6 +43,30 @@ Paint (FCP) and _[Largest Contentful Paint (LCP)](/lcp/)_
 &mdash;which aims to measure when the page's main contents have finished
 loading.
 
+### What is a good FCP score?
+
+To provide a good user experience, sites should strive to have a First
+Contentful Paint of **1.8 seconds** or less. To ensure you're hitting this
+target for most of your users, a good threshold to measure is the **75th
+percentile** of page loads, segmented across mobile and desktop devices.
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg",
+        alt="Good FCP values are 1.8 seconds or less, poor values are greater than 3.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
 ## How to measure FCP
 
 FCP can be measured [in the lab](/user-centric-performance-metrics/#in-the-lab)
@@ -49,97 +75,110 @@ available in the following tools:
 
 ### Field tools
 
-- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [Chrome User Experience
-  Report](https://developers.google.com/web/tools/chrome-user-experience-report)
+  Report](https://developer.chrome.com/docs/crux/)
 - [Search Console (Speed
   Report)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
-- [Firebase Performance
-  Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web) (beta)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
 
 ### Lab tools
 
-- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
-- [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
-- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 
 ### Measure FCP in JavaScript
 
-The easiest way to measure FCP (as well as all Web Vitals [field
-metrics](/vitals/#field-tools-to-measure-core-web-vitals)
-is with the [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals),
-which wraps all the complexity of manually measuring FCP into a single
-function:
+To measure FCP in JavaScript, you can use the [Paint Timing
+API](https://w3c.github.io/paint-timing/). The following example shows how to
+create a
+[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+that listens for a `paint` entry with the name `first-contentful-paint` and logs
+it to the console.
 
 ```js
-import {getFCP} from 'web-vitals';
-
-// Measure and log the current FCP value,
-// any time it's ready to be reported.
-getFCP(console.log);
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
 ```
 
-To manually measure FCP, you can use the [Paint Timing
-API](https://w3c.github.io/paint-timing/). The following example shows how to
-create a
-[`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
-that listens for paint timing entries and logs the start time of the
-`first-contentful-paint` entry to the console:
+{% Aside 'warning' %}
+
+  This code shows how to log the `first-contentful-paint` entry to the console,
+  but measuring FCP in JavaScript is more complicated. See below for details:
 
-{% set entryType = 'paint' %}
-{% set entryCallback = 'onPaintEntry' %}
+{% endAside %}
+
+In the above example, the logged `first-contentful-paint` entry will tell you
+when the first contentful element was painted. However, in some cases this entry
+is not valid for measuring FCP.
+
+The following section lists the differences between what the API reports and how
+the metric is calculated.
+
+#### Differences between the metric and the API
+
+- The API will dispatch a `first-contentful-paint` entry for pages loaded in a
+  background tab, but those pages should be ignored when calculating FCP (first
+  paint timings should only be considered if the page was in the foreground the
+  entire time).
+- The API does not report `first-contentful-paint` entries when the page is
+  restored from the [back/forward cache](/bfcache/#impact-on-core-web-vitals),
+  but FCP should be measured in these cases since users experience them as
+  distinct page visits.
+- The API [may not report paint timings from cross-origin
+  iframes](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes),
+  but to properly measure FCP you should consider all frames. Sub-frames can use
+  the API to report their paint timings to the parent frame for aggregation.
+
+Rather than memorizing all these subtle differences, developers can use the
+[`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) to
+measure FCP, which handles these differences for you (where possible):
 
 ```js
-{% include 'content/metrics/first-hidden-time.njk' %}
-{% include 'content/metrics/send-to-analytics.njk' %}
-{% include 'content/metrics/performance-observer-try.njk' %}
-  function onPaintEntry(entry, po) {
-    // Only report FCP if the page wasn't hidden prior to
-    // the entry being dispatched. This typically happens when a
-    // page is loaded in a background tab.
-    if (entry.name === 'first-contentful-paint' &&
-        entry.startTime < firstHiddenTime) {
-      // Disconnect the observer.
-      po.disconnect();
-
-      // Report the FCP value to an analytics endpoint.
-      sendToAnalytics({fcp: entry.startTime});
-    }
-  }
+import {onFCP} from 'web-vitals';
 
-{% include 'content/metrics/performance-observer-init.njk' %}
-{% include 'content/metrics/performance-observer-catch.njk' %}
+// Measure and log FCP as soon as it's available.
+onFCP(console.log);
 ```
 
-## What is a good FCP score?
+You can refer to [the source code for
+`onFCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts)
+for a complete example of how to measure FCP in JavaScript.
 
-To provide a good user experience, sites should strive to have First Contentful
-Paint occur within **1 second** of the page starting to load. To ensure you're
-hitting this target for most of your users, a good threshold to measure is the
-**75th percentile** of page loads, segmented across mobile and desktop devices.
+{% Aside %}
+  In some cases (such as cross-origin iframes) it's not possible to measure FCP
+  in JavaScript. See the
+  [limitations](https://github.com/GoogleChrome/web-vitals#limitations) section
+  of the `web-vitals` library for details.
+{% endAside %}
 
 ## How to improve FCP
 
 To learn how to improve FCP for a specific site, you can run a Lighthouse
 performance audit and pay attention to any specific
-[opportunities](/lighthouse-performance/#opportunities) or
-[diagnostics](/lighthouse-performance/#diagnostics) the audit suggests.
+[opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) or
+[diagnostics](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics) the audit suggests.
 
 To learn how to improve FCP in general (for any site), refer to the following
 performance guides:
 
-- [Eliminate render-blocking resources](/render-blocking-resources/)
-- [Minify CSS](/unminified-css/)
-- [Remove unused CSS](/unused-css-rules/)
-- [Preconnect to required origins](/uses-rel-preconnect/)
-- [Reduce server response times (TTFB)](/time-to-first-byte/)
-- [Avoid multiple page redirects](/redirects/)
-- [Preload key requests](/uses-rel-preload/)
-- [Avoid enormous network payloads](/total-byte-weight/)
-- [Serve static assets with an efficient cache policy](/uses-long-cache-ttl/)
-- [Avoid an excessive DOM size](/dom-size/)
-- [Minimize critical request depth](/critical-request-chains/)
-- [Ensure text remains visible during webfont load](/font-display/)
-- [Keep request counts low and transfer sizes small](/resource-summary/)
+- [Eliminate render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [Minify CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [Remove unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [Remove unused JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript/)
+- [Preconnect to required origins](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Reduce server response times (TTFB)](/ttfb/)
+- [Avoid multiple page redirects](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [Preload key requests](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [Serve static assets with an efficient cache policy](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [Minimize critical request depth](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Ensure text remains visible during webfont load](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [Keep request counts low and transfer sizes small](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
 
 {% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/en/metrics/fid/fid-base.svg b/src/site/content/en/metrics/fid/fid-base.svg
deleted file mode 100644
index b63e43420a2..00000000000
--- a/src/site/content/en/metrics/fid/fid-base.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 960.0 312.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 312.0l-960.0 0l0 -312.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 312.0l-960.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 214.56903l782.1417 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 214.56902l776.1417 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m912.88715 216.22075l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#e8c469" d="m348.27032 204.15486l86.33072 0l0 19.842514l-86.33072 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m694.026 204.15547l31.716553 0l0 19.842514l-31.716553 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m467.13385 204.15486l186.64569 0l0 19.842514l-186.64569 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.74652 13.794635l145.51181 0l0 47.68504l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m146.76215 35.594635l0 -9.546875l1.296875 0l5.015625 7.5l0 -7.5l1.203125 0l0 9.546875l-1.296875 0l-5.015625 -7.5l0 7.5l-1.203125 0zm14.000153 -0.859375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm4.9124756 3.46875l-2.625 -6.90625l1.234375 0l1.484375 4.140625q0.234375 0.65625 0.4375 1.390625q0.15625 -0.546875 0.4375 -1.3125l1.53125 -4.21875l1.21875 0l-2.625 6.90625l-1.09375 0zm4.7578125 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.726715 0.578125l1.140625 0.15625q0.078125 0.53125 0.40625 0.78125q0.4375 0.3125 1.1875 0.3125q0.8125 0 1.25 -0.328125q0.453125 -0.3125 0.609375 -0.90625q0.09375 -0.359375 0.078125 -1.5q-0.765625 0.90625 -1.90625 0.90625q-1.4375 0 -2.21875 -1.03125q-0.78125 -1.03125 -0.78125 -2.46875q0 -0.984375 0.359375 -1.8125q0.359375 -0.84375 1.03125 -1.296875q0.6875 -0.453125 1.609375 -0.453125q1.21875 0 2.015625 0.984375l0 -0.828125l1.078125 0l0 5.96875q0 1.609375 -0.328125 2.28125q-0.328125 0.6875 -1.046875 1.078125q-0.703125 0.390625 -1.75 0.390625q-1.234375 0 -2.0 -0.5625q-0.75 -0.5625 -0.734375 -1.671875zm0.984375 -4.15625q0 1.359375 0.53125 1.984375q0.546875 0.625 1.359375 0.625q0.796875 0 1.34375 -0.625q0.546875 -0.625 0.546875 -1.953125q0 -1.265625 -0.5625 -1.90625q-0.5625 -0.640625 -1.359375 -0.640625q-0.765625 0 -1.3125 0.640625q-0.546875 0.625 -0.546875 1.875zm11.162476 2.71875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm5.5531006 2.421875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1561127 -7.140625l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.507965 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0z" fill-rule="nonzero"/><path fill="#000000" d="m146.34027 48.532135l1.203125 -0.109375q0.078125 0.71875 0.390625 1.1875q0.3125 0.453125 0.953125 0.734375q0.65625 0.28125 1.46875 0.28125q0.71875 0 1.265625 -0.21875q0.5625 -0.21875 0.828125 -0.578125q0.265625 -0.375 0.265625 -0.828125q0 -0.453125 -0.265625 -0.78125q-0.25 -0.328125 -0.84375 -0.5625q-0.390625 -0.15625 -1.703125 -0.46875q-1.3125 -0.3125 -1.84375 -0.59375q-0.671875 -0.359375 -1.015625 -0.890625q-0.328125 -0.53125 -0.328125 -1.1875q0 -0.71875 0.40625 -1.34375q0.40625 -0.625 1.1875 -0.953125q0.796875 -0.328125 1.765625 -0.328125q1.046875 0 1.859375 0.34375q0.8125 0.34375 1.25 1.015625q0.4375 0.65625 0.46875 1.484375l-1.203125 0.09375q-0.109375 -0.90625 -0.671875 -1.359375q-0.5625 -0.46875 -1.65625 -0.46875q-1.140625 0 -1.671875 0.421875q-0.515625 0.421875 -0.515625 1.015625q0 0.515625 0.359375 0.84375q0.375 0.328125 1.90625 0.6875q1.546875 0.34375 2.109375 0.59375q0.84375 0.390625 1.234375 0.984375q0.390625 0.578125 0.390625 1.359375q0 0.75 -0.4375 1.4375q-0.421875 0.671875 -1.25 1.046875q-0.8125 0.359375 -1.828125 0.359375q-1.296875 0 -2.171875 -0.375q-0.875 -0.375 -1.375 -1.125q-0.5 -0.765625 -0.53125 -1.71875zm11.733505 2.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm5.6561127 0.1875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9749756 3.46875l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm7.0164948 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#cccccc" d="m136.96323 88.419945l86.33072 0l0 11.055122l-86.33072 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 103.09974l55.43306 0l0 11.055115l-55.43306 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 117.78215l124.976395 0l0 11.055115l-124.976395 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m278.72183 204.15486l12.629913 0l0 19.842514l-12.629913 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 132.46194l243.84251 0l0 11.055115l-243.84251 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m348.27032 147.14174l345.7638 0l0 11.055115l-345.7638 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 63.884514l93.29134 0l0 60.850395l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m45.89977 88.244514l0 -11.453125l2.25 0l4.6875 7.640625l0 -7.640625l2.15625 0l0 11.453125l-2.328125 0l-4.609375 -7.46875l0 7.46875l-2.15625 0zm16.320312 -2.640625l2.1874962 0.359375q-0.4218712 1.203125 -1.3281212 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.0781212 1.21875 1.0312462 3.75l-5.499996 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm7.7734337 -3.4375l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm3.078125 8.296875l-2.625 -8.296875l2.125 0l1.5625 5.4375l1.421875 -5.4375l2.125 0l1.375 5.4375l1.59375 -5.4375l2.15625 0l-2.65625 8.296875l-2.109375 0l-1.4375 -5.34375l-1.40625 5.34375l-2.125 0zm10.3828125 -4.265625q0 -1.09375 0.53125 -2.109375q0.546875 -1.03125 1.53125 -1.5625q1.0 -0.546875 2.21875 -0.546875q1.875 0 3.078125 1.21875q1.203125 1.21875 1.203125 3.09375q0 1.875 -1.21875 3.125q-1.203125 1.234375 -3.046875 1.234375q-1.140625 0 -2.1875 -0.515625q-1.03125 -0.515625 -1.578125 -1.515625q-0.53125 -1.0 -0.53125 -2.421875zm2.25 0.109375q0 1.234375 0.578125 1.890625q0.59375 0.65625 1.453125 0.65625q0.859375 0 1.4375 -0.65625q0.59375 -0.65625 0.59375 -1.90625q0 -1.21875 -0.59375 -1.875q-0.578125 -0.65625 -1.4375 -0.65625q-0.859375 0 -1.453125 0.65625q-0.578125 0.65625 -0.578125 1.890625zm10.1328125 4.15625l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm4.0546875 0l0 -11.453125l2.1875 0l0 6.078125l2.578125 -2.921875l2.703125 0l-2.84375 3.03125l3.046875 5.265625l-2.375 0l-2.078125 -3.734375l-1.03125 1.078125l0 2.65625l-2.1875 0z" fill-rule="nonzero"/><path fill="#000000" d="m36.985706 107.244514l0 -11.453125l4.875 0q1.828125 0 2.65625 0.3125q0.84375 0.296875 1.34375 1.09375q0.5 0.78125 0.5 1.796875q0 1.296875 -0.765625 2.140625q-0.75 0.828125 -2.265625 1.046875q0.75 0.4375 1.234375 0.96875q0.5 0.515625 1.328125 1.859375l1.390625 2.234375l-2.765625 0l-1.671875 -2.5q-0.890625 -1.328125 -1.21875 -1.671875q-0.328125 -0.359375 -0.703125 -0.484375q-0.359375 -0.125 -1.15625 -0.125l-0.46875 0l0 4.78125l-2.3125 0zm2.3125 -6.609375l1.71875 0q1.65625 0 2.0625 -0.140625q0.421875 -0.140625 0.65625 -0.484375q0.234375 -0.34375 0.234375 -0.859375q0 -0.578125 -0.3125 -0.9375q-0.296875 -0.359375 -0.859375 -0.453125q-0.28125 -0.03125 -1.6875 -0.03125l-1.8125 0l0 2.90625zm14.0234375 3.96875l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm9.3984375 8.015625l0 -4.171875q-0.4375 0.546875 -1.078125 0.875q-0.640625 0.328125 -1.375 0.328125q-1.421875 0 -2.328125 -1.0625q-1.078125 -1.25 -1.078125 -3.375q0 -2.0 1.0 -3.109375q1.015625 -1.125 2.515625 -1.125q0.828125 0 1.4375 0.359375q0.609375 0.34375 1.078125 1.046875l0 -1.21875l2.0156212 0l0 11.453125l-2.1874962 0zm0.0625 -7.40625q0 -1.28125 -0.515625 -1.890625q-0.515625 -0.625 -1.296875 -0.625q-0.796875 0 -1.34375 0.640625q-0.53125 0.625 -0.53125 2.0q0 1.359375 0.515625 1.96875q0.515625 0.609375 1.28125 0.609375q0.75 0 1.3125 -0.671875q0.578125 -0.6875 0.578125 -2.03125zm9.742184 4.25l0 -1.25q-0.453125 0.671875 -1.1875 1.0625q-0.734375 0.375 -1.5625 0.375q-0.828125 0 -1.5 -0.359375q-0.65625 -0.375 -0.953125 -1.03125q-0.296875 -0.671875 -0.296875 -1.84375l0 -5.25l2.1875 0l0 3.8125q0 1.75 0.125 2.140625q0.125 0.390625 0.4375 0.625q0.328125 0.234375 0.8125 0.234375q0.5625 0 1.0 -0.3125q0.453125 -0.3125 0.609375 -0.765625q0.171875 -0.453125 0.171875 -2.234375l0 -3.5l2.203125 0l0 8.296875l-2.046875 0zm9.1171875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm3.1953125 2.484375l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875zm13.4765625 -5.921875l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm0.75 5.921875l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 183.65092l93.29134 0l0 60.850388l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m72.53258 208.01093l0 -11.453125l3.453125 0l2.078125 7.8125l2.0625 -7.8125l3.46875 0l0 11.453125l-2.15625 0l0 -9.015625l-2.265625 9.015625l-2.234375 0l-2.265625 -9.015625l0 9.015625l-2.140625 0zm14.984375 -5.765625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm4.3203125 -5.4375l0 -2.03125l2.1875 0l0 2.03125l-2.1875 0zm0 9.421875l0 -8.296875l2.1875 0l0 8.296875l-2.1875 0zm11.9921875 0l-2.203125 0l0 -4.234375q0 -1.34375 -0.140625 -1.734375q-0.140625 -0.40625 -0.453125 -0.625q-0.3125 -0.21875 -0.765625 -0.21875q-0.5625 0 -1.015625 0.3125q-0.453125 0.3125 -0.625 0.828125q-0.171875 0.515625 -0.171875 1.90625l0 3.765625l-2.1875 0l0 -8.296875l2.03125 0l0 1.21875q1.09375 -1.40625 2.734375 -1.40625q0.734375 0 1.328125 0.265625q0.609375 0.25 0.90625 0.65625q0.3125 0.40625 0.4375 0.921875q0.125 0.515625 0.125 1.484375l0 5.15625z" fill-rule="nonzero"/><path fill="#000000" d="m58.24352 227.01093l0 -9.515625l-3.40625 0l0 -1.9375l9.109375 0l0 1.9375l-3.390625 0l0 9.515625l-2.3125 0zm9.367184 -11.453125l0 4.203125q1.0625 -1.234375 2.53125 -1.234375q0.765625 0 1.375 0.28125q0.609375 0.28125 0.90625 0.71875q0.3125 0.4375 0.421875 0.96875q0.125 0.53125 0.125 1.640625l0 4.875l-2.203125 0l0 -4.390625q0 -1.296875 -0.125 -1.640625q-0.125 -0.359375 -0.4375 -0.5625q-0.3125 -0.21875 -0.796875 -0.21875q-0.546875 0 -0.984375 0.265625q-0.421875 0.265625 -0.625 0.8125q-0.1875 0.53125 -0.1875 1.578125l0 4.15625l-2.203125 0l0 -11.453125l2.203125 0zm9.6796875 11.453125l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm8.9296875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm5.6171875 -0.90625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm11.9296875 3.984375l-2.046875 0l0 -1.21875q-0.5 0.703125 -1.203125 1.0625q-0.6875 0.34375 -1.390625 0.34375q-1.421875 0 -2.453125 -1.15625q-1.015625 -1.15625 -1.015625 -3.21875q0 -2.109375 0.984375 -3.203125q1.0 -1.09375 2.515625 -1.09375q1.390625 0 2.40625 1.15625l0 -4.125l2.203125 0l0 11.453125zm-5.859375 -4.328125q0 1.328125 0.359375 1.921875q0.53125 0.859375 1.484375 0.859375q0.765625 0 1.296875 -0.640625q0.53125 -0.65625 0.53125 -1.9375q0 -1.421875 -0.515625 -2.046875q-0.515625 -0.640625 -1.328125 -0.640625q-0.78125 0 -1.3125 0.625q-0.515625 0.625 -0.515625 1.859375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 224.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 224.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m135.1004 31.758503l0 -3.289999l3.2900085 0l0 3.289999l-3.2900085 0z" fill-rule="nonzero"/><path fill="#e8c469" d="m223.5118 204.6483l19.62204 0l0 19.842514l-19.62204 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m129.81366 254.77338l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 252.50656l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.18326 266.16782l0 -7.625l1.03125 0l4.015625 5.984375l0 -5.984375l0.96875 0l0 7.625l-1.046875 0l-4.0 -6.0l0 6.0l-0.96875 0zm11.367477 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm7.2702484 2.453125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm1.9293976 0.84375l-1.6875 -5.53125l0.96875 0l0.875 3.1875l0.328125 1.1875q0.03125 -0.078125 0.296875 -1.140625l0.875 -3.234375l0.953125 0l0.828125 3.203125l0.28125 1.0625l0.3125 -1.0625l0.953125 -3.203125l0.90625 0l-1.71875 5.53125l-0.984375 0l-0.875 -3.3125l-0.21875 -0.9375l-1.109375 4.25l-0.984375 0zm6.3362274 -2.765625q0 -1.53125 0.84375 -2.265625q0.71875 -0.625 1.734375 -0.625q1.140625 0 1.859375 0.75q0.734375 0.75 0.734375 2.0625q0 1.0625 -0.328125 1.6875q-0.3125 0.609375 -0.921875 0.953125q-0.609375 0.328125 -1.34375 0.328125q-1.15625 0 -1.875 -0.734375q-0.703125 -0.75 -0.703125 -2.15625zm0.953125 0q0 1.0625 0.46875 1.59375q0.46875 0.53125 1.15625 0.53125q0.703125 0 1.15625 -0.53125q0.46875 -0.53125 0.46875 -1.625q0 -1.015625 -0.46875 -1.546875q-0.453125 -0.53125 -1.15625 -0.53125q-0.6875 0 -1.15625 0.53125q-0.46875 0.515625 -0.46875 1.578125zm5.3014984 2.765625l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm3.5642395 0l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0zm8.273148 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.738998 5.421875l0 -2.71875q-0.21875 0.3125 -0.609375 0.515625q-0.390625 0.203125 -0.828125 0.203125q-0.984375 0 -1.703125 -0.78125q-0.703125 -0.796875 -0.703125 -2.15625q0 -0.828125 0.28125 -1.484375q0.296875 -0.671875 0.84375 -1.015625q0.546875 -0.34375 1.203125 -0.34375q1.03125 0 1.609375 0.875l0 -0.75l0.84375 0l0 7.65625l-0.9375 0zm-2.875 -4.90625q0 1.0625 0.4375 1.609375q0.453125 0.53125 1.078125 0.53125q0.59375 0 1.015625 -0.5q0.4375 -0.515625 0.4375 -1.546875q0 -1.109375 -0.453125 -1.65625q-0.453125 -0.5625 -1.0625 -0.5625q-0.609375 0 -1.03125 0.515625q-0.421875 0.515625 -0.421875 1.609375zm8.910873 2.78125l0 -0.8125q-0.65625 0.9375 -1.75 0.9375q-0.5 0 -0.921875 -0.1875q-0.421875 -0.1875 -0.625 -0.46875q-0.203125 -0.28125 -0.296875 -0.703125q-0.046875 -0.265625 -0.046875 -0.875l0 -3.421875l0.9375 0l0 3.0625q0 0.734375 0.046875 1.0q0.09375 0.359375 0.375 0.578125q0.296875 0.203125 0.703125 0.203125q0.421875 0 0.796875 -0.203125q0.375 -0.21875 0.515625 -0.59375q0.15625 -0.375 0.15625 -1.078125l0 -2.96875l0.9375 0l0 5.53125l-0.828125 0zm6.0827484 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm4.8483734 1.640625l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm7.75 0.8125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875z" fill-rule="nonzero"/><path fill="#e8c469" d="m129.81366 277.98334l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 275.71652l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.16763 289.3778l0 -7.625l1.515625 0l1.796875 5.390625q0.25 0.765625 0.375 1.140625q0.125 -0.421875 0.40625 -1.234375l1.828125 -5.296875l1.34375 0l0 7.625l-0.96875 0l0 -6.390625l-2.21875 6.390625l-0.90625 0l-2.203125 -6.5l0 6.5l-0.96875 0zm12.3923645 -0.6875q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.3952484 -3.78125l0 -1.078125l0.9375 0l0 1.078125l-0.9375 0zm0 6.546875l0 -5.53125l0.9375 0l0 5.53125l-0.9375 0zm2.3674774 0l0 -5.53125l0.84375 0l0 0.796875q0.609375 -0.921875 1.75 -0.921875q0.5 0 0.921875 0.1875q0.421875 0.171875 0.625 0.46875q0.21875 0.296875 0.296875 0.6875q0.046875 0.265625 0.046875 0.921875l0 3.390625l-0.9375 0l0 -3.359375q0 -0.578125 -0.109375 -0.859375q-0.109375 -0.28125 -0.390625 -0.453125q-0.265625 -0.171875 -0.640625 -0.171875q-0.59375 0 -1.03125 0.390625q-0.4375 0.375 -0.4375 1.4375l0 3.015625l-0.9375 0zm10.934021 -0.84375l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm0.9137726 0.84375l0 -7.625l0.9375 0l0 2.734375q0.65625 -0.765625 1.65625 -0.765625q0.609375 0 1.0625 0.25q0.453125 0.234375 0.640625 0.671875q0.203125 0.421875 0.203125 1.234375l0 3.5l-0.9375 0l0 -3.5q0 -0.703125 -0.3125 -1.015625q-0.296875 -0.328125 -0.859375 -0.328125q-0.40625 0 -0.78125 0.21875q-0.359375 0.21875 -0.515625 0.59375q-0.15625 0.359375 -0.15625 1.015625l0 3.015625l-0.9375 0zm5.9108734 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.832748 2.609375q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm5.9733734 2.765625l0 -0.703125q-0.515625 0.828125 -1.546875 0.828125q-0.65625 0 -1.21875 -0.359375q-0.546875 -0.375 -0.859375 -1.015625q-0.296875 -0.65625 -0.296875 -1.5q0 -0.828125 0.28125 -1.5q0.28125 -0.6875 0.828125 -1.046875q0.546875 -0.359375 1.234375 -0.359375q0.5 0 0.890625 0.21875q0.390625 0.203125 0.625 0.546875l0 -2.734375l0.9375 0l0 7.625l-0.875 0zm-2.953125 -2.75q0 1.046875 0.4375 1.578125q0.453125 0.53125 1.0625 0.53125q0.609375 0 1.03125 -0.5q0.4375 -0.515625 0.4375 -1.53125q0 -1.140625 -0.4375 -1.671875q-0.4375 -0.53125 -1.078125 -0.53125q-0.609375 0 -1.03125 0.515625q-0.421875 0.5 -0.421875 1.609375zm10.309021 1.90625l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm4.5231476 0.15625q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.0202484 1.109375l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm5.703125 1.65625l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/fid/fid-fcp-tti.svg b/src/site/content/en/metrics/fid/fid-fcp-tti.svg
deleted file mode 100644
index 29bdfdca3a1..00000000000
--- a/src/site/content/en/metrics/fid/fid-fcp-tti.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 960.0 408.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 408.0l-960.0 0l0 -408.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 408.0l-960.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 310.56903l782.1417 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 310.56903l776.1417 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m912.88715 312.22076l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m725.7437 109.79463l145.51178 0l0 47.685043l-145.51178 0z" fill-rule="evenodd"/><path fill="#000000" d="m735.7281 131.59464l0 -9.546875l1.90625 0l2.25 6.765625q0.3125 0.9375 0.46875 1.40625q0.15625 -0.515625 0.5 -1.53125l2.28125 -6.640625l1.703125 0l0 9.546875l-1.21875 0l0 -7.984375l-2.765625 7.984375l-1.140625 0l-2.765625 -8.125l0 8.125l-1.21875 0zm15.508667 -0.859375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm3.0062256 -4.71875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.9454346 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm13.6779785 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1405029 1.046875l0 -9.546875l1.171875 0l0 3.421875q0.828125 -0.9375 2.078125 -0.9375q0.765625 0 1.328125 0.296875q0.5625 0.296875 0.8125 0.84375q0.25 0.53125 0.25 1.546875l0 4.375l-1.171875 0l0 -4.375q0 -0.890625 -0.390625 -1.28125q-0.375 -0.40625 -1.078125 -0.40625q-0.515625 0 -0.984375 0.28125q-0.453125 0.265625 -0.65625 0.734375q-0.1875 0.453125 -0.1875 1.265625l0 3.78125l-1.171875 0zm7.3968506 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.037476 3.265625q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm7.4749756 3.46875l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm10.3498535 -4.734375l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.4766846 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625z" fill-rule="nonzero"/><path fill="#000000" d="m735.9937 147.59464l0 -9.546875l1.25 0l0 9.546875l-1.25 0zm7.812317 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm6.6156006 3.453125l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm7.7111206 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm10.5061035 4.125l0 -6.0l-1.03125 0l0 -0.90625l1.03125 0l0 -0.734375q0 -0.703125 0.125 -1.046875q0.171875 -0.453125 0.59375 -0.734375q0.421875 -0.28125 1.203125 -0.28125q0.484375 0 1.09375 0.109375l-0.1875 1.03125q-0.359375 -0.0625 -0.6875 -0.0625q-0.53125 0 -0.75 0.234375q-0.21875 0.21875 -0.21875 0.84375l0 0.640625l1.34375 0l0 0.90625l-1.34375 0l0 6.0l-1.171875 0zm2.984192 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6312256 3.453125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm7.8288574 -2.5l1.234375 -0.109375q0.140625 0.90625 0.640625 1.359375q0.5 0.453125 1.203125 0.453125q0.84375 0 1.421875 -0.640625q0.59375 -0.640625 0.59375 -1.6875q0 -1.0 -0.5625 -1.578125q-0.5625 -0.59375 -1.484375 -0.59375q-0.5625 0 -1.015625 0.265625q-0.453125 0.25 -0.71875 0.671875l-1.09375 -0.15625l0.921875 -4.890625l4.75 0l0 1.109375l-3.8125 0l-0.515625 2.5625q0.859375 -0.59375 1.796875 -0.59375q1.25 0 2.109375 0.875q0.859375 0.859375 0.859375 2.21875q0 1.296875 -0.75 2.234375q-0.921875 1.15625 -2.5 1.15625q-1.3125 0 -2.140625 -0.71875q-0.8125 -0.734375 -0.9375 -1.9375zm10.209351 0.953125l0 -2.609375l-2.609375 0l0 -1.09375l2.609375 0l0 -2.59375l1.09375 0l0 2.59375l2.609375 0l0 1.09375l-2.609375 0l0 2.609375l-1.09375 0zm8.54895 -0.515625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.037476 1.59375l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm1.7109375 -0.921875q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.896851 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm6.1624756 1.390625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625z" fill-rule="nonzero"/><path fill="#e8c469" d="m348.27032 300.15485l86.33072 0l0 19.84253l-86.33072 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m694.026 300.15546l31.716553 0l0 19.84253l-31.716553 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m467.13385 300.15485l186.64569 0l0 19.84253l-186.64569 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m292.13385 109.79527l192.8819 0l0 47.685043l-192.8819 0z" fill-rule="evenodd"/><path fill="#000000" d="m301.7276 128.53278l1.203125 -0.109375q0.078125 0.71875 0.390625 1.1875q0.3125 0.453125 0.953125 0.734375q0.65625 0.28125 1.46875 0.28125q0.71875 0 1.265625 -0.21875q0.5625 -0.21875 0.828125 -0.578125q0.265625 -0.375 0.265625 -0.828125q0 -0.453125 -0.265625 -0.78125q-0.25 -0.328125 -0.84375 -0.5625q-0.390625 -0.15625 -1.703125 -0.46875q-1.3125 -0.3125 -1.84375 -0.59375q-0.671875 -0.359375 -1.015625 -0.890625q-0.328125 -0.53125 -0.328125 -1.1875q0 -0.71875 0.40625 -1.34375q0.40625 -0.625 1.1875 -0.953125q0.796875 -0.328125 1.765625 -0.328125q1.046875 0 1.859375 0.34375q0.8125 0.34375 1.25 1.015625q0.4375 0.65625 0.46875 1.484375l-1.203125 0.09375q-0.109375 -0.90625 -0.671875 -1.359375q-0.5625 -0.46875 -1.65625 -0.46875q-1.140625 0 -1.671875 0.421875q-0.515625 0.421875 -0.515625 1.015625q0 0.515625 0.359375 0.84375q0.375 0.328125 1.90625 0.6875q1.546875 0.34375 2.109375 0.59375q0.84375 0.390625 1.234375 0.984375q0.390625 0.578125 0.390625 1.359375q0 0.75 -0.4375 1.4375q-0.421875 0.671875 -1.25 1.046875q-0.8125 0.359375 -1.828125 0.359375q-1.296875 0 -2.171875 -0.375q-0.875 -0.375 -1.375 -1.125q-0.5 -0.765625 -0.53125 -1.71875zm11.7335205 2.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.0935974 3.703125l-0.125 -1.09375q0.375 0.109375 0.65625 0.109375q0.390625 0 0.625 -0.140625q0.234375 -0.125 0.390625 -0.359375q0.109375 -0.171875 0.359375 -0.875q0.03125 -0.09375 0.109375 -0.28125l-2.625 -6.921875l1.265625 0l1.4375 4.0q0.28125 0.765625 0.5 1.59375q0.203125 -0.796875 0.46875 -1.578125l1.484375 -4.015625l1.171875 0l-2.625 7.015625q-0.421875 1.140625 -0.65625 1.578125q-0.3125 0.578125 -0.71875 0.84375q-0.40625 0.28125 -0.96875 0.28125q-0.328125 0 -0.75 -0.15625zm6.6953125 -2.65625l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm7.71109 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.0531006 2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm15.35144 1.203125q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9749756 3.46875l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm10.2092285 4.125l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm2.539215 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm11.162476 2.59375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm7.4749756 3.46875l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm11.365601 1.234375l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.006226 4.125l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm14.849823 2.59375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9906006 3.46875l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.896851 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0z" fill-rule="nonzero"/><path fill="#000000" d="m303.08698 147.59528l-1.078125 0l0 -9.546875l1.171875 0l0 3.40625q0.734375 -0.921875 1.890625 -0.921875q0.640625 0 1.203125 0.265625q0.578125 0.25 0.9375 0.71875q0.375 0.453125 0.578125 1.109375q0.203125 0.65625 0.203125 1.40625q0 1.78125 -0.875 2.75q-0.875 0.96875 -2.109375 0.96875q-1.21875 0 -1.921875 -1.015625l0 0.859375zm0 -3.5q0 1.234375 0.328125 1.78125q0.5625 0.90625 1.5 0.90625q0.765625 0 1.328125 -0.65625q0.5625 -0.671875 0.5625 -2.0q0 -1.34375 -0.546875 -1.984375q-0.53125 -0.65625 -1.296875 -0.65625q-0.765625 0 -1.328125 0.671875q-0.546875 0.671875 -0.546875 1.9375zm6.3187256 3.5l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm4.01651 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm7.9281006 3.453125l-2.125 -6.90625l1.21875 0l1.09375 3.984375l0.421875 1.484375q0.015625 -0.109375 0.359375 -1.421875l1.09375 -4.046875l1.203125 0l1.03125 4.0l0.34375 1.328125l0.40625 -1.34375l1.171875 -3.984375l1.140625 0l-2.15625 6.90625l-1.21875 0l-1.09375 -4.140625l-0.265625 -1.171875l-1.40625 5.3125l-1.21875 0zm7.8751526 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm12.672607 -2.53125l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm6.6640625 1.671875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9906006 3.46875l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.115448 2.65625l0 -9.5625l1.078125 0l0 0.890625q0.375 -0.53125 0.84375 -0.78125q0.484375 -0.265625 1.15625 -0.265625q0.875 0 1.546875 0.453125q0.6875 0.453125 1.03125 1.28125q0.34375 0.828125 0.34375 1.828125q0 1.046875 -0.375 1.90625q-0.375 0.84375 -1.109375 1.296875q-0.71875 0.453125 -1.53125 0.453125q-0.578125 0 -1.046875 -0.25q-0.46875 -0.25 -0.765625 -0.625l0 3.375l-1.171875 0zm1.0625 -6.078125q0 1.34375 0.53125 1.984375q0.546875 0.625 1.3125 0.625q0.78125 0 1.34375 -0.65625q0.5625 -0.65625 0.5625 -2.046875q0 -1.3125 -0.546875 -1.96875q-0.546875 -0.671875 -1.296875 -0.671875q-0.75 0 -1.328125 0.703125q-0.578125 0.703125 -0.578125 2.03125zm10.865601 2.5625q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm3.0062256 -4.71875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.945465 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm9.3591 -1.484375l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm1.7109375 -0.921875q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm5.874878 -1.171875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5218506 4.125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m136.74652 109.79463l145.51181 0l0 47.685043l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m146.76215 131.59464l0 -9.546875l1.296875 0l5.015625 7.5l0 -7.5l1.203125 0l0 9.546875l-1.296875 0l-5.015625 -7.5l0 7.5l-1.203125 0zm14.000153 -0.859375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm4.9124756 3.46875l-2.625 -6.90625l1.234375 0l1.484375 4.140625q0.234375 0.65625 0.4375 1.390625q0.15625 -0.546875 0.4375 -1.3125l1.53125 -4.21875l1.21875 0l-2.625 6.90625l-1.09375 0zm4.7578125 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.726715 0.578125l1.140625 0.15625q0.078125 0.53125 0.40625 0.78125q0.4375 0.3125 1.1875 0.3125q0.8125 0 1.25 -0.328125q0.453125 -0.3125 0.609375 -0.90625q0.09375 -0.359375 0.078125 -1.5q-0.765625 0.90625 -1.90625 0.90625q-1.4375 0 -2.21875 -1.03125q-0.78125 -1.03125 -0.78125 -2.46875q0 -0.984375 0.359375 -1.8125q0.359375 -0.84375 1.03125 -1.296875q0.6875 -0.453125 1.609375 -0.453125q1.21875 0 2.015625 0.984375l0 -0.828125l1.078125 0l0 5.96875q0 1.609375 -0.328125 2.28125q-0.328125 0.6875 -1.046875 1.078125q-0.703125 0.390625 -1.75 0.390625q-1.234375 0 -2.0 -0.5625q-0.75 -0.5625 -0.734375 -1.671875zm0.984375 -4.15625q0 1.359375 0.53125 1.984375q0.546875 0.625 1.359375 0.625q0.796875 0 1.34375 -0.625q0.546875 -0.625 0.546875 -1.953125q0 -1.265625 -0.5625 -1.90625q-0.5625 -0.640625 -1.359375 -0.640625q-0.765625 0 -1.3125 0.640625q-0.546875 0.625 -0.546875 1.875zm11.162476 2.71875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm5.5531006 2.421875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1561127 -7.140625l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.507965 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0z" fill-rule="nonzero"/><path fill="#000000" d="m146.34027 144.53214l1.203125 -0.109375q0.078125 0.71875 0.390625 1.1875q0.3125 0.453125 0.953125 0.734375q0.65625 0.28125 1.46875 0.28125q0.71875 0 1.265625 -0.21875q0.5625 -0.21875 0.828125 -0.578125q0.265625 -0.375 0.265625 -0.828125q0 -0.453125 -0.265625 -0.78125q-0.25 -0.328125 -0.84375 -0.5625q-0.390625 -0.15625 -1.703125 -0.46875q-1.3125 -0.3125 -1.84375 -0.59375q-0.671875 -0.359375 -1.015625 -0.890625q-0.328125 -0.53125 -0.328125 -1.1875q0 -0.71875 0.40625 -1.34375q0.40625 -0.625 1.1875 -0.953125q0.796875 -0.328125 1.765625 -0.328125q1.046875 0 1.859375 0.34375q0.8125 0.34375 1.25 1.015625q0.4375 0.65625 0.46875 1.484375l-1.203125 0.09375q-0.109375 -0.90625 -0.671875 -1.359375q-0.5625 -0.46875 -1.65625 -0.46875q-1.140625 0 -1.671875 0.421875q-0.515625 0.421875 -0.515625 1.015625q0 0.515625 0.359375 0.84375q0.375 0.328125 1.90625 0.6875q1.546875 0.34375 2.109375 0.59375q0.84375 0.390625 1.234375 0.984375q0.390625 0.578125 0.390625 1.359375q0 0.75 -0.4375 1.4375q-0.421875 0.671875 -1.25 1.046875q-0.8125 0.359375 -1.828125 0.359375q-1.296875 0 -2.171875 -0.375q-0.875 -0.375 -1.375 -1.125q-0.5 -0.765625 -0.53125 -1.71875zm11.733505 2.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm5.6561127 0.1875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9749756 3.46875l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm7.0164948 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#cccccc" d="m136.96323 184.41995l86.33072 0l0 11.055115l-86.33072 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 199.09973l55.43306 0l0 11.05513l-55.43306 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 213.78215l124.976395 0l0 11.055115l-124.976395 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m278.72183 300.15485l12.629913 0l0 19.84253l-12.629913 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 228.46194l243.84251 0l0 11.055115l-243.84251 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m348.27032 243.14174l345.7638 0l0 11.055115l-345.7638 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 159.88452l93.29134 0l0 60.850388l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m45.89977 184.24452l0 -11.453125l2.25 0l4.6875 7.640625l0 -7.640625l2.15625 0l0 11.453125l-2.328125 0l-4.609375 -7.46875l0 7.46875l-2.15625 0zm16.320312 -2.640625l2.1874962 0.359375q-0.4218712 1.203125 -1.3281212 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.0781212 1.21875 1.0312462 3.75l-5.499996 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm7.7734337 -3.4375l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm3.078125 8.296875l-2.625 -8.296875l2.125 0l1.5625 5.4375l1.421875 -5.4375l2.125 0l1.375 5.4375l1.59375 -5.4375l2.15625 0l-2.65625 8.296875l-2.109375 0l-1.4375 -5.34375l-1.40625 5.34375l-2.125 0zm10.3828125 -4.265625q0 -1.09375 0.53125 -2.109375q0.546875 -1.03125 1.53125 -1.5625q1.0 -0.546875 2.21875 -0.546875q1.875 0 3.078125 1.21875q1.203125 1.21875 1.203125 3.09375q0 1.875 -1.21875 3.125q-1.203125 1.234375 -3.046875 1.234375q-1.140625 0 -2.1875 -0.515625q-1.03125 -0.515625 -1.578125 -1.515625q-0.53125 -1.0 -0.53125 -2.421875zm2.25 0.109375q0 1.234375 0.578125 1.890625q0.59375 0.65625 1.453125 0.65625q0.859375 0 1.4375 -0.65625q0.59375 -0.65625 0.59375 -1.90625q0 -1.21875 -0.59375 -1.875q-0.578125 -0.65625 -1.4375 -0.65625q-0.859375 0 -1.453125 0.65625q-0.578125 0.65625 -0.578125 1.890625zm10.1328125 4.15625l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm4.0546875 0l0 -11.453125l2.1875 0l0 6.078125l2.578125 -2.921875l2.703125 0l-2.84375 3.03125l3.046875 5.265625l-2.375 0l-2.078125 -3.734375l-1.03125 1.078125l0 2.65625l-2.1875 0z" fill-rule="nonzero"/><path fill="#000000" d="m36.985706 203.24452l0 -11.453125l4.875 0q1.828125 0 2.65625 0.3125q0.84375 0.296875 1.34375 1.09375q0.5 0.78125 0.5 1.796875q0 1.296875 -0.765625 2.140625q-0.75 0.828125 -2.265625 1.046875q0.75 0.4375 1.234375 0.96875q0.5 0.515625 1.328125 1.859375l1.390625 2.234375l-2.765625 0l-1.671875 -2.5q-0.890625 -1.328125 -1.21875 -1.671875q-0.328125 -0.359375 -0.703125 -0.484375q-0.359375 -0.125 -1.15625 -0.125l-0.46875 0l0 4.78125l-2.3125 0zm2.3125 -6.609375l1.71875 0q1.65625 0 2.0625 -0.140625q0.421875 -0.140625 0.65625 -0.484375q0.234375 -0.34375 0.234375 -0.859375q0 -0.578125 -0.3125 -0.9375q-0.296875 -0.359375 -0.859375 -0.453125q-0.28125 -0.03125 -1.6875 -0.03125l-1.8125 0l0 2.90625zm14.0234375 3.96875l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm9.3984375 8.015625l0 -4.171875q-0.4375 0.546875 -1.078125 0.875q-0.640625 0.328125 -1.375 0.328125q-1.421875 0 -2.328125 -1.0625q-1.078125 -1.25 -1.078125 -3.375q0 -2.0 1.0 -3.109375q1.015625 -1.125 2.515625 -1.125q0.828125 0 1.4375 0.359375q0.609375 0.34375 1.078125 1.046875l0 -1.21875l2.0156212 0l0 11.453125l-2.1874962 0zm0.0625 -7.40625q0 -1.28125 -0.515625 -1.890625q-0.515625 -0.625 -1.296875 -0.625q-0.796875 0 -1.34375 0.640625q-0.53125 0.625 -0.53125 2.0q0 1.359375 0.515625 1.96875q0.515625 0.609375 1.28125 0.609375q0.75 0 1.3125 -0.671875q0.578125 -0.6875 0.578125 -2.03125zm9.742184 4.25l0 -1.25q-0.453125 0.671875 -1.1875 1.0625q-0.734375 0.375 -1.5625 0.375q-0.828125 0 -1.5 -0.359375q-0.65625 -0.375 -0.953125 -1.03125q-0.296875 -0.671875 -0.296875 -1.84375l0 -5.25l2.1875 0l0 3.8125q0 1.75 0.125 2.140625q0.125 0.390625 0.4375 0.625q0.328125 0.234375 0.8125 0.234375q0.5625 0 1.0 -0.3125q0.453125 -0.3125 0.609375 -0.765625q0.171875 -0.453125 0.171875 -2.234375l0 -3.5l2.203125 0l0 8.296875l-2.046875 0zm9.1171875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm3.1953125 2.484375l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875zm13.4765625 -5.921875l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm0.75 5.921875l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 279.6509l93.29134 0l0 60.850403l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m72.53258 304.01093l0 -11.453125l3.453125 0l2.078125 7.8125l2.0625 -7.8125l3.46875 0l0 11.453125l-2.15625 0l0 -9.015625l-2.265625 9.015625l-2.234375 0l-2.265625 -9.015625l0 9.015625l-2.140625 0zm14.984375 -5.765625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm4.3203125 -5.4375l0 -2.03125l2.1875 0l0 2.03125l-2.1875 0zm0 9.421875l0 -8.296875l2.1875 0l0 8.296875l-2.1875 0zm11.9921875 0l-2.203125 0l0 -4.234375q0 -1.34375 -0.140625 -1.734375q-0.140625 -0.40625 -0.453125 -0.625q-0.3125 -0.21875 -0.765625 -0.21875q-0.5625 0 -1.015625 0.3125q-0.453125 0.3125 -0.625 0.828125q-0.171875 0.515625 -0.171875 1.90625l0 3.765625l-2.1875 0l0 -8.296875l2.03125 0l0 1.21875q1.09375 -1.40625 2.734375 -1.40625q0.734375 0 1.328125 0.265625q0.609375 0.25 0.90625 0.65625q0.3125 0.40625 0.4375 0.921875q0.125 0.515625 0.125 1.484375l0 5.15625z" fill-rule="nonzero"/><path fill="#000000" d="m58.24352 323.01093l0 -9.515625l-3.40625 0l0 -1.9375l9.109375 0l0 1.9375l-3.390625 0l0 9.515625l-2.3125 0zm9.367184 -11.453125l0 4.203125q1.0625 -1.234375 2.53125 -1.234375q0.765625 0 1.375 0.28125q0.609375 0.28125 0.90625 0.71875q0.3125 0.4375 0.421875 0.96875q0.125 0.53125 0.125 1.640625l0 4.875l-2.203125 0l0 -4.390625q0 -1.296875 -0.125 -1.640625q-0.125 -0.359375 -0.4375 -0.5625q-0.3125 -0.21875 -0.796875 -0.21875q-0.546875 0 -0.984375 0.265625q-0.421875 0.265625 -0.625 0.8125q-0.1875 0.53125 -0.1875 1.578125l0 4.15625l-2.203125 0l0 -11.453125l2.203125 0zm9.6796875 11.453125l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm8.9296875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm5.6171875 -0.90625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm11.9296875 3.984375l-2.046875 0l0 -1.21875q-0.5 0.703125 -1.203125 1.0625q-0.6875 0.34375 -1.390625 0.34375q-1.421875 0 -2.453125 -1.15625q-1.015625 -1.15625 -1.015625 -3.21875q0 -2.109375 0.984375 -3.203125q1.0 -1.09375 2.515625 -1.09375q1.390625 0 2.40625 1.15625l0 -4.125l2.203125 0l0 11.453125zm-5.859375 -4.328125q0 1.328125 0.359375 1.921875q0.53125 0.859375 1.484375 0.859375q0.765625 0 1.296875 -0.640625q0.53125 -0.65625 0.53125 -1.9375q0 -1.421875 -0.515625 -2.046875q-0.515625 -0.640625 -1.328125 -0.640625q-0.78125 0 -1.3125 0.625q-0.515625 0.625 -0.515625 1.859375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m291.229 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m291.22903 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m289.584 127.75851l0 -3.290001l3.2900085 0l0 3.290001l-3.2900085 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m725.7428 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m725.7428 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m724.0978 127.75851l0 -3.290001l3.289978 0l0 3.290001l-3.289978 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m135.1004 127.75851l0 -3.290001l3.2900085 0l0 3.290001l-3.2900085 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m738.0 160.0l181.98425 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m738.0 160.0l175.98425 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m913.98425 161.65173l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.94226 49.115486l589.5748 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.94226 49.115486l589.5748 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.94226 43.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.94226 43.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m726.5171 43.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m726.5171 43.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.92934 97.115486l154.42519 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.92934 97.115486l154.42519 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.92934 91.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.92934 91.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m291.35452 91.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m291.35452 91.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m137.50131 64.05774l154.4252 0l0 33.6063l-154.4252 0z" fill-rule="evenodd"/><path fill="#000000" d="m201.13579 87.13774l0 -10.484375l7.1875 0l0 1.765625l-5.0625 0l0 2.484375l4.375 0l0 1.78125l-4.375 0l0 4.453125l-2.125 0zm15.655746 -3.859375l2.046875 0.65625q-0.46875 1.71875 -1.578125 2.546875q-1.09375 0.828125 -2.78125 0.828125q-2.078125 0 -3.4375 -1.421875q-1.34375 -1.421875 -1.34375 -3.90625q0 -2.609375 1.359375 -4.0625q1.359375 -1.453125 3.5625 -1.453125q1.921875 0 3.125 1.140625q0.71875 0.671875 1.0625 1.9375l-2.09375 0.5q-0.1875 -0.828125 -0.78125 -1.296875q-0.578125 -0.46875 -1.421875 -0.46875q-1.171875 0 -1.90625 0.84375q-0.71875 0.828125 -0.71875 2.703125q0 1.984375 0.71875 2.84375q0.71875 0.84375 1.859375 0.84375q0.84375 0 1.453125 -0.53125q0.609375 -0.546875 0.875 -1.703125zm3.8655243 3.859375l0 -10.484375l3.40625 0q1.921875 0 2.515625 0.15625q0.90625 0.234375 1.515625 1.03125q0.609375 0.78125 0.609375 2.03125q0 0.96875 -0.359375 1.625q-0.34375 0.65625 -0.890625 1.03125q-0.53125 0.375 -1.09375 0.5q-0.765625 0.15625 -2.203125 0.15625l-1.375 0l0 3.953125l-2.125 0zm2.125 -8.71875l0 2.984375l1.15625 0q1.25 0 1.671875 -0.15625q0.421875 -0.171875 0.65625 -0.515625q0.25 -0.359375 0.25 -0.828125q0 -0.578125 -0.34375 -0.9375q-0.328125 -0.375 -0.84375 -0.46875q-0.375 -0.078125 -1.53125 -0.078125l-1.015625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m137.81364 16.057743l589.57477 0l0 33.6063l-589.57477 0z" fill-rule="evenodd"/><path fill="#000000" d="m425.03433 39.13774l0 -8.718748l-3.109375 0l0 -1.765625l8.34375 0l0 1.765625l-3.109375 0l0 8.718748l-2.125 0zm8.952606 0l0 -8.718748l-3.109375 0l0 -1.765625l8.34375 0l0 1.765625l-3.109375 0l0 8.718748l-2.125 0zm6.5307617 0l0 -10.484373l2.125 0l0 10.484373l-2.125 0z" fill-rule="nonzero"/><path fill="#e8c469" d="m223.5118 300.6483l19.62204 0l0 19.84253l-19.62204 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m129.81366 350.77338l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 348.50656l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.18326 362.16782l0 -7.625l1.03125 0l4.015625 5.984375l0 -5.984375l0.96875 0l0 7.625l-1.046875 0l-4.0 -6.0l0 6.0l-0.96875 0zm11.367477 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm7.2702484 2.453125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm1.9293976 0.84375l-1.6875 -5.53125l0.96875 0l0.875 3.1875l0.328125 1.1875q0.03125 -0.078125 0.296875 -1.140625l0.875 -3.234375l0.953125 0l0.828125 3.203125l0.28125 1.0625l0.3125 -1.0625l0.953125 -3.203125l0.90625 0l-1.71875 5.53125l-0.984375 0l-0.875 -3.3125l-0.21875 -0.9375l-1.109375 4.25l-0.984375 0zm6.3362274 -2.765625q0 -1.53125 0.84375 -2.265625q0.71875 -0.625 1.734375 -0.625q1.140625 0 1.859375 0.75q0.734375 0.75 0.734375 2.0625q0 1.0625 -0.328125 1.6875q-0.3125 0.609375 -0.921875 0.953125q-0.609375 0.328125 -1.34375 0.328125q-1.15625 0 -1.875 -0.734375q-0.703125 -0.75 -0.703125 -2.15625zm0.953125 0q0 1.0625 0.46875 1.59375q0.46875 0.53125 1.15625 0.53125q0.703125 0 1.15625 -0.53125q0.46875 -0.53125 0.46875 -1.625q0 -1.015625 -0.46875 -1.546875q-0.453125 -0.53125 -1.15625 -0.53125q-0.6875 0 -1.15625 0.53125q-0.46875 0.515625 -0.46875 1.578125zm5.3014984 2.765625l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm3.5642395 0l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0zm8.273148 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.738998 5.421875l0 -2.71875q-0.21875 0.3125 -0.609375 0.515625q-0.390625 0.203125 -0.828125 0.203125q-0.984375 0 -1.703125 -0.78125q-0.703125 -0.796875 -0.703125 -2.15625q0 -0.828125 0.28125 -1.484375q0.296875 -0.671875 0.84375 -1.015625q0.546875 -0.34375 1.203125 -0.34375q1.03125 0 1.609375 0.875l0 -0.75l0.84375 0l0 7.65625l-0.9375 0zm-2.875 -4.90625q0 1.0625 0.4375 1.609375q0.453125 0.53125 1.078125 0.53125q0.59375 0 1.015625 -0.5q0.4375 -0.515625 0.4375 -1.546875q0 -1.109375 -0.453125 -1.65625q-0.453125 -0.5625 -1.0625 -0.5625q-0.609375 0 -1.03125 0.515625q-0.421875 0.515625 -0.421875 1.609375zm8.910873 2.78125l0 -0.8125q-0.65625 0.9375 -1.75 0.9375q-0.5 0 -0.921875 -0.1875q-0.421875 -0.1875 -0.625 -0.46875q-0.203125 -0.28125 -0.296875 -0.703125q-0.046875 -0.265625 -0.046875 -0.875l0 -3.421875l0.9375 0l0 3.0625q0 0.734375 0.046875 1.0q0.09375 0.359375 0.375 0.578125q0.296875 0.203125 0.703125 0.203125q0.421875 0 0.796875 -0.203125q0.375 -0.21875 0.515625 -0.59375q0.15625 -0.375 0.15625 -1.078125l0 -2.96875l0.9375 0l0 5.53125l-0.828125 0zm6.0827484 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm4.8483734 1.640625l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm7.75 0.8125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875z" fill-rule="nonzero"/><path fill="#e8c469" d="m129.81366 373.98334l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 371.71652l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.16763 385.3778l0 -7.625l1.515625 0l1.796875 5.390625q0.25 0.765625 0.375 1.140625q0.125 -0.421875 0.40625 -1.234375l1.828125 -5.296875l1.34375 0l0 7.625l-0.96875 0l0 -6.390625l-2.21875 6.390625l-0.90625 0l-2.203125 -6.5l0 6.5l-0.96875 0zm12.3923645 -0.6875q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.3952484 -3.78125l0 -1.078125l0.9375 0l0 1.078125l-0.9375 0zm0 6.546875l0 -5.53125l0.9375 0l0 5.53125l-0.9375 0zm2.3674774 0l0 -5.53125l0.84375 0l0 0.796875q0.609375 -0.921875 1.75 -0.921875q0.5 0 0.921875 0.1875q0.421875 0.171875 0.625 0.46875q0.21875 0.296875 0.296875 0.6875q0.046875 0.265625 0.046875 0.921875l0 3.390625l-0.9375 0l0 -3.359375q0 -0.578125 -0.109375 -0.859375q-0.109375 -0.28125 -0.390625 -0.453125q-0.265625 -0.171875 -0.640625 -0.171875q-0.59375 0 -1.03125 0.390625q-0.4375 0.375 -0.4375 1.4375l0 3.015625l-0.9375 0zm10.934021 -0.84375l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm0.9137726 0.84375l0 -7.625l0.9375 0l0 2.734375q0.65625 -0.765625 1.65625 -0.765625q0.609375 0 1.0625 0.25q0.453125 0.234375 0.640625 0.671875q0.203125 0.421875 0.203125 1.234375l0 3.5l-0.9375 0l0 -3.5q0 -0.703125 -0.3125 -1.015625q-0.296875 -0.328125 -0.859375 -0.328125q-0.40625 0 -0.78125 0.21875q-0.359375 0.21875 -0.515625 0.59375q-0.15625 0.359375 -0.15625 1.015625l0 3.015625l-0.9375 0zm5.9108734 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.832748 2.609375q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm5.9733734 2.765625l0 -0.703125q-0.515625 0.828125 -1.546875 0.828125q-0.65625 0 -1.21875 -0.359375q-0.546875 -0.375 -0.859375 -1.015625q-0.296875 -0.65625 -0.296875 -1.5q0 -0.828125 0.28125 -1.5q0.28125 -0.6875 0.828125 -1.046875q0.546875 -0.359375 1.234375 -0.359375q0.5 0 0.890625 0.21875q0.390625 0.203125 0.625 0.546875l0 -2.734375l0.9375 0l0 7.625l-0.875 0zm-2.953125 -2.75q0 1.046875 0.4375 1.578125q0.453125 0.53125 1.0625 0.53125q0.609375 0 1.03125 -0.5q0.4375 -0.515625 0.4375 -1.53125q0 -1.140625 -0.4375 -1.671875q-0.4375 -0.53125 -1.078125 -0.53125q-0.609375 0 -1.03125 0.515625q-0.421875 0.5 -0.421875 1.609375zm10.309021 1.90625l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm4.5231476 0.15625q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.0202484 1.109375l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm5.703125 1.65625l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/fid/fid-full.svg b/src/site/content/en/metrics/fid/fid-full.svg
deleted file mode 100644
index 56ad9035650..00000000000
--- a/src/site/content/en/metrics/fid/fid-full.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 960.0 456.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 456.0l-960.0 0l0 -456.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 456.0l-960.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 310.56903l782.1417 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 310.56903l776.1417 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m912.88715 312.22076l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m725.7437 109.79463l145.51178 0l0 47.685043l-145.51178 0z" fill-rule="evenodd"/><path fill="#000000" d="m735.7281 131.59464l0 -9.546875l1.90625 0l2.25 6.765625q0.3125 0.9375 0.46875 1.40625q0.15625 -0.515625 0.5 -1.53125l2.28125 -6.640625l1.703125 0l0 9.546875l-1.21875 0l0 -7.984375l-2.765625 7.984375l-1.140625 0l-2.765625 -8.125l0 8.125l-1.21875 0zm15.508667 -0.859375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm3.0062256 -4.71875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.9454346 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm13.6779785 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1405029 1.046875l0 -9.546875l1.171875 0l0 3.421875q0.828125 -0.9375 2.078125 -0.9375q0.765625 0 1.328125 0.296875q0.5625 0.296875 0.8125 0.84375q0.25 0.53125 0.25 1.546875l0 4.375l-1.171875 0l0 -4.375q0 -0.890625 -0.390625 -1.28125q-0.375 -0.40625 -1.078125 -0.40625q-0.515625 0 -0.984375 0.28125q-0.453125 0.265625 -0.65625 0.734375q-0.1875 0.453125 -0.1875 1.265625l0 3.78125l-1.171875 0zm7.3968506 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.037476 3.265625q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm7.4749756 3.46875l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm10.3498535 -4.734375l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.4766846 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625z" fill-rule="nonzero"/><path fill="#000000" d="m735.9937 147.59464l0 -9.546875l1.25 0l0 9.546875l-1.25 0zm7.812317 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm6.6156006 3.453125l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm7.7111206 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm10.5061035 4.125l0 -6.0l-1.03125 0l0 -0.90625l1.03125 0l0 -0.734375q0 -0.703125 0.125 -1.046875q0.171875 -0.453125 0.59375 -0.734375q0.421875 -0.28125 1.203125 -0.28125q0.484375 0 1.09375 0.109375l-0.1875 1.03125q-0.359375 -0.0625 -0.6875 -0.0625q-0.53125 0 -0.75 0.234375q-0.21875 0.21875 -0.21875 0.84375l0 0.640625l1.34375 0l0 0.90625l-1.34375 0l0 6.0l-1.171875 0zm2.984192 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6312256 3.453125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm7.8288574 -2.5l1.234375 -0.109375q0.140625 0.90625 0.640625 1.359375q0.5 0.453125 1.203125 0.453125q0.84375 0 1.421875 -0.640625q0.59375 -0.640625 0.59375 -1.6875q0 -1.0 -0.5625 -1.578125q-0.5625 -0.59375 -1.484375 -0.59375q-0.5625 0 -1.015625 0.265625q-0.453125 0.25 -0.71875 0.671875l-1.09375 -0.15625l0.921875 -4.890625l4.75 0l0 1.109375l-3.8125 0l-0.515625 2.5625q0.859375 -0.59375 1.796875 -0.59375q1.25 0 2.109375 0.875q0.859375 0.859375 0.859375 2.21875q0 1.296875 -0.75 2.234375q-0.921875 1.15625 -2.5 1.15625q-1.3125 0 -2.140625 -0.71875q-0.8125 -0.734375 -0.9375 -1.9375zm10.209351 0.953125l0 -2.609375l-2.609375 0l0 -1.09375l2.609375 0l0 -2.59375l1.09375 0l0 2.59375l2.609375 0l0 1.09375l-2.609375 0l0 2.609375l-1.09375 0zm8.54895 -0.515625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.037476 1.59375l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm1.7109375 -0.921875q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.896851 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm6.1624756 1.390625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625z" fill-rule="nonzero"/><path fill="#e8c469" d="m348.27032 300.15485l86.33072 0l0 19.84253l-86.33072 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m694.026 300.15546l31.716553 0l0 19.84253l-31.716553 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m467.13385 300.15485l186.64569 0l0 19.84253l-186.64569 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m292.13385 109.79527l192.8819 0l0 47.685043l-192.8819 0z" fill-rule="evenodd"/><path fill="#000000" d="m301.7276 128.53278l1.203125 -0.109375q0.078125 0.71875 0.390625 1.1875q0.3125 0.453125 0.953125 0.734375q0.65625 0.28125 1.46875 0.28125q0.71875 0 1.265625 -0.21875q0.5625 -0.21875 0.828125 -0.578125q0.265625 -0.375 0.265625 -0.828125q0 -0.453125 -0.265625 -0.78125q-0.25 -0.328125 -0.84375 -0.5625q-0.390625 -0.15625 -1.703125 -0.46875q-1.3125 -0.3125 -1.84375 -0.59375q-0.671875 -0.359375 -1.015625 -0.890625q-0.328125 -0.53125 -0.328125 -1.1875q0 -0.71875 0.40625 -1.34375q0.40625 -0.625 1.1875 -0.953125q0.796875 -0.328125 1.765625 -0.328125q1.046875 0 1.859375 0.34375q0.8125 0.34375 1.25 1.015625q0.4375 0.65625 0.46875 1.484375l-1.203125 0.09375q-0.109375 -0.90625 -0.671875 -1.359375q-0.5625 -0.46875 -1.65625 -0.46875q-1.140625 0 -1.671875 0.421875q-0.515625 0.421875 -0.515625 1.015625q0 0.515625 0.359375 0.84375q0.375 0.328125 1.90625 0.6875q1.546875 0.34375 2.109375 0.59375q0.84375 0.390625 1.234375 0.984375q0.390625 0.578125 0.390625 1.359375q0 0.75 -0.4375 1.4375q-0.421875 0.671875 -1.25 1.046875q-0.8125 0.359375 -1.828125 0.359375q-1.296875 0 -2.171875 -0.375q-0.875 -0.375 -1.375 -1.125q-0.5 -0.765625 -0.53125 -1.71875zm11.7335205 2.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.0935974 3.703125l-0.125 -1.09375q0.375 0.109375 0.65625 0.109375q0.390625 0 0.625 -0.140625q0.234375 -0.125 0.390625 -0.359375q0.109375 -0.171875 0.359375 -0.875q0.03125 -0.09375 0.109375 -0.28125l-2.625 -6.921875l1.265625 0l1.4375 4.0q0.28125 0.765625 0.5 1.59375q0.203125 -0.796875 0.46875 -1.578125l1.484375 -4.015625l1.171875 0l-2.625 7.015625q-0.421875 1.140625 -0.65625 1.578125q-0.3125 0.578125 -0.71875 0.84375q-0.40625 0.28125 -0.96875 0.28125q-0.328125 0 -0.75 -0.15625zm6.6953125 -2.65625l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm7.71109 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.0531006 2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm15.35144 1.203125q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9749756 3.46875l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm10.2092285 4.125l0 -9.546875l1.171875 0l0 9.546875l-1.171875 0zm2.539215 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm11.162476 2.59375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm7.4749756 3.46875l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm11.365601 1.234375l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.006226 4.125l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0zm14.849823 2.59375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9906006 3.46875l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.896851 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0z" fill-rule="nonzero"/><path fill="#000000" d="m303.08698 147.59528l-1.078125 0l0 -9.546875l1.171875 0l0 3.40625q0.734375 -0.921875 1.890625 -0.921875q0.640625 0 1.203125 0.265625q0.578125 0.25 0.9375 0.71875q0.375 0.453125 0.578125 1.109375q0.203125 0.65625 0.203125 1.40625q0 1.78125 -0.875 2.75q-0.875 0.96875 -2.109375 0.96875q-1.21875 0 -1.921875 -1.015625l0 0.859375zm0 -3.5q0 1.234375 0.328125 1.78125q0.5625 0.90625 1.5 0.90625q0.765625 0 1.328125 -0.65625q0.5625 -0.671875 0.5625 -2.0q0 -1.34375 -0.546875 -1.984375q-0.53125 -0.65625 -1.296875 -0.65625q-0.765625 0 -1.328125 0.671875q-0.546875 0.671875 -0.546875 1.9375zm6.3187256 3.5l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm4.01651 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm7.9281006 3.453125l-2.125 -6.90625l1.21875 0l1.09375 3.984375l0.421875 1.484375q0.015625 -0.109375 0.359375 -1.421875l1.09375 -4.046875l1.203125 0l1.03125 4.0l0.34375 1.328125l0.40625 -1.34375l1.171875 -3.984375l1.140625 0l-2.15625 6.90625l-1.21875 0l-1.09375 -4.140625l-0.265625 -1.171875l-1.40625 5.3125l-1.21875 0zm7.8751526 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm12.672607 -2.53125l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm6.6640625 1.671875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9906006 3.46875l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.115448 2.65625l0 -9.5625l1.078125 0l0 0.890625q0.375 -0.53125 0.84375 -0.78125q0.484375 -0.265625 1.15625 -0.265625q0.875 0 1.546875 0.453125q0.6875 0.453125 1.03125 1.28125q0.34375 0.828125 0.34375 1.828125q0 1.046875 -0.375 1.90625q-0.375 0.84375 -1.109375 1.296875q-0.71875 0.453125 -1.53125 0.453125q-0.578125 0 -1.046875 -0.25q-0.46875 -0.25 -0.765625 -0.625l0 3.375l-1.171875 0zm1.0625 -6.078125q0 1.34375 0.53125 1.984375q0.546875 0.625 1.3125 0.625q0.78125 0 1.34375 -0.65625q0.5625 -0.65625 0.5625 -2.046875q0 -1.3125 -0.546875 -1.96875q-0.546875 -0.671875 -1.296875 -0.671875q-0.75 0 -1.328125 0.703125q-0.578125 0.703125 -0.578125 2.03125zm10.865601 2.5625q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm3.0062256 -4.71875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.945465 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm9.3591 -1.484375l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm1.7109375 -0.921875q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm5.874878 -1.171875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5218506 4.125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm9.974976 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m136.74652 109.79463l145.51181 0l0 47.685043l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m146.76215 131.59464l0 -9.546875l1.296875 0l5.015625 7.5l0 -7.5l1.203125 0l0 9.546875l-1.296875 0l-5.015625 -7.5l0 7.5l-1.203125 0zm14.000153 -0.859375q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm4.9124756 3.46875l-2.625 -6.90625l1.234375 0l1.484375 4.140625q0.234375 0.65625 0.4375 1.390625q0.15625 -0.546875 0.4375 -1.3125l1.53125 -4.21875l1.21875 0l-2.625 6.90625l-1.09375 0zm4.7578125 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.726715 0.578125l1.140625 0.15625q0.078125 0.53125 0.40625 0.78125q0.4375 0.3125 1.1875 0.3125q0.8125 0 1.25 -0.328125q0.453125 -0.3125 0.609375 -0.90625q0.09375 -0.359375 0.078125 -1.5q-0.765625 0.90625 -1.90625 0.90625q-1.4375 0 -2.21875 -1.03125q-0.78125 -1.03125 -0.78125 -2.46875q0 -0.984375 0.359375 -1.8125q0.359375 -0.84375 1.03125 -1.296875q0.6875 -0.453125 1.609375 -0.453125q1.21875 0 2.015625 0.984375l0 -0.828125l1.078125 0l0 5.96875q0 1.609375 -0.328125 2.28125q-0.328125 0.6875 -1.046875 1.078125q-0.703125 0.390625 -1.75 0.390625q-1.234375 0 -2.0 -0.5625q-0.75 -0.5625 -0.734375 -1.671875zm0.984375 -4.15625q0 1.359375 0.53125 1.984375q0.546875 0.625 1.359375 0.625q0.796875 0 1.34375 -0.625q0.546875 -0.625 0.546875 -1.953125q0 -1.265625 -0.5625 -1.90625q-0.5625 -0.640625 -1.359375 -0.640625q-0.765625 0 -1.3125 0.640625q-0.546875 0.625 -0.546875 1.875zm11.162476 2.71875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm5.5531006 2.421875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1561127 -7.140625l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.507965 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0z" fill-rule="nonzero"/><path fill="#000000" d="m146.34027 144.53214l1.203125 -0.109375q0.078125 0.71875 0.390625 1.1875q0.3125 0.453125 0.953125 0.734375q0.65625 0.28125 1.46875 0.28125q0.71875 0 1.265625 -0.21875q0.5625 -0.21875 0.828125 -0.578125q0.265625 -0.375 0.265625 -0.828125q0 -0.453125 -0.265625 -0.78125q-0.25 -0.328125 -0.84375 -0.5625q-0.390625 -0.15625 -1.703125 -0.46875q-1.3125 -0.3125 -1.84375 -0.59375q-0.671875 -0.359375 -1.015625 -0.890625q-0.328125 -0.53125 -0.328125 -1.1875q0 -0.71875 0.40625 -1.34375q0.40625 -0.625 1.1875 -0.953125q0.796875 -0.328125 1.765625 -0.328125q1.046875 0 1.859375 0.34375q0.8125 0.34375 1.25 1.015625q0.4375 0.65625 0.46875 1.484375l-1.203125 0.09375q-0.109375 -0.90625 -0.671875 -1.359375q-0.5625 -0.46875 -1.65625 -0.46875q-1.140625 0 -1.671875 0.421875q-0.515625 0.421875 -0.515625 1.015625q0 0.515625 0.359375 0.84375q0.375 0.328125 1.90625 0.6875q1.546875 0.34375 2.109375 0.59375q0.84375 0.390625 1.234375 0.984375q0.390625 0.578125 0.390625 1.359375q0 0.75 -0.4375 1.4375q-0.421875 0.671875 -1.25 1.046875q-0.8125 0.359375 -1.828125 0.359375q-1.296875 0 -2.171875 -0.375q-0.875 -0.375 -1.375 -1.125q-0.5 -0.765625 -0.53125 -1.71875zm11.733505 2.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm5.6561127 0.1875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9749756 3.46875l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm7.0164948 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#cccccc" d="m136.96323 184.41995l86.33072 0l0 11.055115l-86.33072 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 199.09973l55.43306 0l0 11.05513l-55.43306 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 213.78215l124.976395 0l0 11.055115l-124.976395 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m278.72183 300.15485l12.629913 0l0 19.84253l-12.629913 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m223.29396 228.46194l243.84251 0l0 11.055115l-243.84251 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m348.27032 243.14174l345.7638 0l0 11.055115l-345.7638 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 159.88452l93.29134 0l0 60.850388l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m45.89977 184.24452l0 -11.453125l2.25 0l4.6875 7.640625l0 -7.640625l2.15625 0l0 11.453125l-2.328125 0l-4.609375 -7.46875l0 7.46875l-2.15625 0zm16.320312 -2.640625l2.1874962 0.359375q-0.4218712 1.203125 -1.3281212 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.0781212 1.21875 1.0312462 3.75l-5.499996 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm7.7734337 -3.4375l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm3.078125 8.296875l-2.625 -8.296875l2.125 0l1.5625 5.4375l1.421875 -5.4375l2.125 0l1.375 5.4375l1.59375 -5.4375l2.15625 0l-2.65625 8.296875l-2.109375 0l-1.4375 -5.34375l-1.40625 5.34375l-2.125 0zm10.3828125 -4.265625q0 -1.09375 0.53125 -2.109375q0.546875 -1.03125 1.53125 -1.5625q1.0 -0.546875 2.21875 -0.546875q1.875 0 3.078125 1.21875q1.203125 1.21875 1.203125 3.09375q0 1.875 -1.21875 3.125q-1.203125 1.234375 -3.046875 1.234375q-1.140625 0 -2.1875 -0.515625q-1.03125 -0.515625 -1.578125 -1.515625q-0.53125 -1.0 -0.53125 -2.421875zm2.25 0.109375q0 1.234375 0.578125 1.890625q0.59375 0.65625 1.453125 0.65625q0.859375 0 1.4375 -0.65625q0.59375 -0.65625 0.59375 -1.90625q0 -1.21875 -0.59375 -1.875q-0.578125 -0.65625 -1.4375 -0.65625q-0.859375 0 -1.453125 0.65625q-0.578125 0.65625 -0.578125 1.890625zm10.1328125 4.15625l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm4.0546875 0l0 -11.453125l2.1875 0l0 6.078125l2.578125 -2.921875l2.703125 0l-2.84375 3.03125l3.046875 5.265625l-2.375 0l-2.078125 -3.734375l-1.03125 1.078125l0 2.65625l-2.1875 0z" fill-rule="nonzero"/><path fill="#000000" d="m36.985706 203.24452l0 -11.453125l4.875 0q1.828125 0 2.65625 0.3125q0.84375 0.296875 1.34375 1.09375q0.5 0.78125 0.5 1.796875q0 1.296875 -0.765625 2.140625q-0.75 0.828125 -2.265625 1.046875q0.75 0.4375 1.234375 0.96875q0.5 0.515625 1.328125 1.859375l1.390625 2.234375l-2.765625 0l-1.671875 -2.5q-0.890625 -1.328125 -1.21875 -1.671875q-0.328125 -0.359375 -0.703125 -0.484375q-0.359375 -0.125 -1.15625 -0.125l-0.46875 0l0 4.78125l-2.3125 0zm2.3125 -6.609375l1.71875 0q1.65625 0 2.0625 -0.140625q0.421875 -0.140625 0.65625 -0.484375q0.234375 -0.34375 0.234375 -0.859375q0 -0.578125 -0.3125 -0.9375q-0.296875 -0.359375 -0.859375 -0.453125q-0.28125 -0.03125 -1.6875 -0.03125l-1.8125 0l0 2.90625zm14.0234375 3.96875l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm9.3984375 8.015625l0 -4.171875q-0.4375 0.546875 -1.078125 0.875q-0.640625 0.328125 -1.375 0.328125q-1.421875 0 -2.328125 -1.0625q-1.078125 -1.25 -1.078125 -3.375q0 -2.0 1.0 -3.109375q1.015625 -1.125 2.515625 -1.125q0.828125 0 1.4375 0.359375q0.609375 0.34375 1.078125 1.046875l0 -1.21875l2.0156212 0l0 11.453125l-2.1874962 0zm0.0625 -7.40625q0 -1.28125 -0.515625 -1.890625q-0.515625 -0.625 -1.296875 -0.625q-0.796875 0 -1.34375 0.640625q-0.53125 0.625 -0.53125 2.0q0 1.359375 0.515625 1.96875q0.515625 0.609375 1.28125 0.609375q0.75 0 1.3125 -0.671875q0.578125 -0.6875 0.578125 -2.03125zm9.742184 4.25l0 -1.25q-0.453125 0.671875 -1.1875 1.0625q-0.734375 0.375 -1.5625 0.375q-0.828125 0 -1.5 -0.359375q-0.65625 -0.375 -0.953125 -1.03125q-0.296875 -0.671875 -0.296875 -1.84375l0 -5.25l2.1875 0l0 3.8125q0 1.75 0.125 2.140625q0.125 0.390625 0.4375 0.625q0.328125 0.234375 0.8125 0.234375q0.5625 0 1.0 -0.3125q0.453125 -0.3125 0.609375 -0.765625q0.171875 -0.453125 0.171875 -2.234375l0 -3.5l2.203125 0l0 8.296875l-2.046875 0zm9.1171875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm3.1953125 2.484375l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875zm13.4765625 -5.921875l0 1.75l-1.5 0l0 3.34375q0 1.015625 0.046875 1.1875q0.046875 0.15625 0.1875 0.265625q0.15625 0.109375 0.375 0.109375q0.3125 0 0.890625 -0.203125l0.1875 1.703125q-0.765625 0.328125 -1.734375 0.328125q-0.59375 0 -1.078125 -0.203125q-0.46875 -0.203125 -0.703125 -0.515625q-0.21875 -0.3125 -0.296875 -0.859375q-0.078125 -0.375 -0.078125 -1.546875l0 -3.609375l-1.0 0l0 -1.75l1.0 0l0 -1.65625l2.203125 -1.28125l0 2.9375l1.5 0zm0.75 5.921875l2.203125 -0.328125q0.140625 0.640625 0.5625 0.96875q0.4375 0.328125 1.21875 0.328125q0.84375 0 1.28125 -0.3125q0.28125 -0.21875 0.28125 -0.578125q0 -0.25 -0.15625 -0.421875q-0.15625 -0.15625 -0.734375 -0.28125q-2.65625 -0.59375 -3.359375 -1.078125q-0.984375 -0.671875 -0.984375 -1.859375q0 -1.078125 0.84375 -1.8125q0.859375 -0.734375 2.640625 -0.734375q1.703125 0 2.53125 0.5625q0.828125 0.546875 1.140625 1.625l-2.0625 0.390625q-0.140625 -0.484375 -0.515625 -0.734375q-0.359375 -0.265625 -1.046875 -0.265625q-0.875 0 -1.25 0.234375q-0.25 0.171875 -0.25 0.453125q0 0.234375 0.21875 0.390625q0.296875 0.21875 2.046875 0.625q1.765625 0.390625 2.453125 0.96875q0.6875 0.59375 0.6875 1.640625q0 1.140625 -0.953125 1.96875q-0.953125 0.8125 -2.8125 0.8125q-1.703125 0 -2.6875 -0.6875q-0.984375 -0.6875 -1.296875 -1.875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m23.54593 279.6509l93.29134 0l0 60.850403l-93.29134 0z" fill-rule="evenodd"/><path fill="#000000" d="m72.53258 304.01093l0 -11.453125l3.453125 0l2.078125 7.8125l2.0625 -7.8125l3.46875 0l0 11.453125l-2.15625 0l0 -9.015625l-2.265625 9.015625l-2.234375 0l-2.265625 -9.015625l0 9.015625l-2.140625 0zm14.984375 -5.765625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm4.3203125 -5.4375l0 -2.03125l2.1875 0l0 2.03125l-2.1875 0zm0 9.421875l0 -8.296875l2.1875 0l0 8.296875l-2.1875 0zm11.9921875 0l-2.203125 0l0 -4.234375q0 -1.34375 -0.140625 -1.734375q-0.140625 -0.40625 -0.453125 -0.625q-0.3125 -0.21875 -0.765625 -0.21875q-0.5625 0 -1.015625 0.3125q-0.453125 0.3125 -0.625 0.828125q-0.171875 0.515625 -0.171875 1.90625l0 3.765625l-2.1875 0l0 -8.296875l2.03125 0l0 1.21875q1.09375 -1.40625 2.734375 -1.40625q0.734375 0 1.328125 0.265625q0.609375 0.25 0.90625 0.65625q0.3125 0.40625 0.4375 0.921875q0.125 0.515625 0.125 1.484375l0 5.15625z" fill-rule="nonzero"/><path fill="#000000" d="m58.24352 323.01093l0 -9.515625l-3.40625 0l0 -1.9375l9.109375 0l0 1.9375l-3.390625 0l0 9.515625l-2.3125 0zm9.367184 -11.453125l0 4.203125q1.0625 -1.234375 2.53125 -1.234375q0.765625 0 1.375 0.28125q0.609375 0.28125 0.90625 0.71875q0.3125 0.4375 0.421875 0.96875q0.125 0.53125 0.125 1.640625l0 4.875l-2.203125 0l0 -4.390625q0 -1.296875 -0.125 -1.640625q-0.125 -0.359375 -0.4375 -0.5625q-0.3125 -0.21875 -0.796875 -0.21875q-0.546875 0 -0.984375 0.265625q-0.421875 0.265625 -0.625 0.8125q-0.1875 0.53125 -0.1875 1.578125l0 4.15625l-2.203125 0l0 -11.453125l2.203125 0zm9.6796875 11.453125l-2.1875 0l0 -8.296875l2.03125 0l0 1.171875q0.53125 -0.828125 0.9375 -1.09375q0.421875 -0.265625 0.953125 -0.265625q0.75 0 1.453125 0.40625l-0.6875 1.921875q-0.546875 -0.359375 -1.03125 -0.359375q-0.453125 0 -0.78125 0.25q-0.3125 0.25 -0.5 0.921875q-0.1875 0.65625 -0.1875 2.78125l0 2.5625zm8.9296875 -2.640625l2.1875 0.359375q-0.421875 1.203125 -1.328125 1.84375q-0.90625 0.625 -2.28125 0.625q-2.15625 0 -3.203125 -1.421875q-0.8125 -1.125 -0.8125 -2.859375q0 -2.0625 1.078125 -3.21875q1.078125 -1.171875 2.71875 -1.171875q1.859375 0 2.921875 1.21875q1.078125 1.21875 1.03125 3.75l-5.5 0q0.015625 0.96875 0.515625 1.515625q0.515625 0.546875 1.28125 0.546875q0.515625 0 0.859375 -0.28125q0.359375 -0.28125 0.53125 -0.90625zm0.125 -2.21875q-0.015625 -0.953125 -0.484375 -1.453125q-0.46875 -0.5 -1.140625 -0.5q-0.71875 0 -1.1875 0.53125q-0.46875 0.515625 -0.46875 1.421875l3.28125 0zm5.6171875 -0.90625l-2.0 -0.359375q0.34375 -1.203125 1.15625 -1.78125q0.828125 -0.578125 2.4375 -0.578125q1.46875 0 2.1875 0.34375q0.71875 0.34375 1.015625 0.890625q0.296875 0.53125 0.296875 1.953125l-0.03125 2.5625q0 1.09375 0.109375 1.625q0.109375 0.515625 0.390625 1.109375l-2.171875 0q-0.078125 -0.21875 -0.203125 -0.65625q-0.0625 -0.1875 -0.078125 -0.25q-0.5625 0.546875 -1.203125 0.828125q-0.640625 0.265625 -1.375 0.265625q-1.28125 0 -2.015625 -0.6875q-0.734375 -0.703125 -0.734375 -1.765625q0 -0.703125 0.328125 -1.25q0.34375 -0.5625 0.9375 -0.84375q0.609375 -0.296875 1.75 -0.515625q1.546875 -0.296875 2.140625 -0.546875l0 -0.21875q0 -0.625 -0.3125 -0.890625q-0.3125 -0.28125 -1.1875 -0.28125q-0.578125 0 -0.90625 0.234375q-0.328125 0.234375 -0.53125 0.8125zm2.9375 1.78125q-0.421875 0.140625 -1.34375 0.34375q-0.90625 0.1875 -1.1875 0.375q-0.4375 0.296875 -0.4375 0.765625q0 0.46875 0.34375 0.8125q0.34375 0.328125 0.875 0.328125q0.59375 0 1.140625 -0.390625q0.390625 -0.296875 0.515625 -0.734375q0.09375 -0.28125 0.09375 -1.0625l0 -0.4375zm11.9296875 3.984375l-2.046875 0l0 -1.21875q-0.5 0.703125 -1.203125 1.0625q-0.6875 0.34375 -1.390625 0.34375q-1.421875 0 -2.453125 -1.15625q-1.015625 -1.15625 -1.015625 -3.21875q0 -2.109375 0.984375 -3.203125q1.0 -1.09375 2.515625 -1.09375q1.390625 0 2.40625 1.15625l0 -4.125l2.203125 0l0 11.453125zm-5.859375 -4.328125q0 1.328125 0.359375 1.921875q0.53125 0.859375 1.484375 0.859375q0.765625 0 1.296875 -0.640625q0.53125 -0.65625 0.53125 -1.9375q0 -1.421875 -0.515625 -2.046875q-0.515625 -0.640625 -1.328125 -0.640625q-0.78125 0 -1.3125 0.625q-0.515625 0.625 -0.515625 1.859375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m291.229 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m291.22903 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m289.584 127.75851l0 -3.290001l3.2900085 0l0 3.290001l-3.2900085 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m725.7428 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m725.7428 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m724.0978 127.75851l0 -3.290001l3.289978 0l0 3.290001l-3.289978 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m136.7454 320.0l0 -196.0315" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.7454 320.0l0 -192.2415" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m135.1004 127.75851l0 -3.290001l3.2900085 0l0 3.290001l-3.2900085 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m488.75592 382.94223l0 -82.77164" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m488.75592 379.15222l0 -78.98163" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m490.4009 379.15222l0 3.2900085l-3.2900085 0l0 -3.2900085l3.2900085 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m365.88715 345.9344l122.078735 0l0 47.685028l-122.078735 0z" fill-rule="evenodd"/><path fill="#000000" d="m377.72192 367.73438l0 -9.546875l3.59375 0q1.09375 0 1.75 0.296875q0.65625 0.28125 1.03125 0.890625q0.375 0.609375 0.375 1.265625q0 0.609375 -0.34375 1.15625q-0.328125 0.53125 -0.984375 0.859375q0.859375 0.25 1.328125 0.875q0.46875 0.609375 0.46875 1.4375q0 0.671875 -0.296875 1.25q-0.28125 0.578125 -0.703125 0.890625q-0.40625 0.3125 -1.03125 0.46875q-0.625 0.15625 -1.546875 0.15625l-3.640625 0zm1.265625 -5.53125l2.0625 0q0.84375 0 1.203125 -0.109375q0.484375 -0.140625 0.71875 -0.46875q0.25 -0.34375 0.25 -0.84375q0 -0.46875 -0.234375 -0.828125q-0.21875 -0.359375 -0.640625 -0.5q-0.421875 -0.140625 -1.453125 -0.140625l-1.90625 0l0 2.890625zm0 4.40625l2.375 0q0.609375 0 0.859375 -0.046875q0.4375 -0.078125 0.734375 -0.25q0.296875 -0.1875 0.484375 -0.53125q0.1875 -0.359375 0.1875 -0.8125q0 -0.53125 -0.28125 -0.921875q-0.265625 -0.40625 -0.75 -0.5625q-0.484375 -0.15625 -1.40625 -0.15625l-2.203125 0l0 3.28125zm7.51474 1.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm4.01651 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm7.9281006 3.453125l-2.125 -6.90625l1.21875 0l1.09375 3.984375l0.421875 1.484375q0.015625 -0.109375 0.359375 -1.421875l1.09375 -4.046875l1.203125 0l1.03125 4.0l0.34375 1.328125l0.40625 -1.34375l1.171875 -3.984375l1.140625 0l-2.15625 6.90625l-1.21875 0l-1.09375 -4.140625l-0.265625 -1.171875l-1.40625 5.3125l-1.21875 0zm7.8751526 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm8.141357 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm11.037476 1.59375l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm6.8828125 0.3125l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5374756 -4.0625l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm4.86734 0l-2.625 -6.90625l1.234375 0l1.484375 4.140625q0.234375 0.65625 0.4375 1.390625q0.15625 -0.546875 0.4375 -1.3125l1.53125 -4.21875l1.21875 0l-2.625 6.90625l-1.09375 0zm9.4765625 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.0531006 2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625z" fill-rule="nonzero"/><path fill="#000000" d="m396.4178 383.73438l0 -6.0l-1.03125 0l0 -0.90625l1.03125 0l0 -0.734375q0 -0.703125 0.125 -1.046875q0.171875 -0.453125 0.59375 -0.734375q0.421875 -0.28125 1.203125 -0.28125q0.484375 0 1.09375 0.109375l-0.1875 1.03125q-0.359375 -0.0625 -0.6875 -0.0625q-0.53125 0 -0.75 0.234375q-0.21875 0.21875 -0.21875 0.84375l0 0.640625l1.34375 0l0 0.90625l-1.34375 0l0 6.0l-1.171875 0zm3.4373474 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.92984 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm3.98526 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm9.6953125 1.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm9.374725 1.046875l0 -1.015625q-0.8125 1.171875 -2.1875 1.171875q-0.609375 0 -1.140625 -0.234375q-0.53125 -0.234375 -0.796875 -0.578125q-0.25 -0.359375 -0.359375 -0.875q-0.0625 -0.34375 -0.0625 -1.09375l0 -4.28125l1.171875 0l0 3.828125q0 0.921875 0.0625 1.234375q0.109375 0.46875 0.46875 0.734375q0.359375 0.25 0.890625 0.25q0.515625 0 0.984375 -0.265625q0.46875 -0.265625 0.65625 -0.734375q0.1875 -0.46875 0.1875 -1.34375l0 -3.703125l1.171875 0l0 6.90625l-1.046875 0zm2.4124756 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm8.172607 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.945465 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm7.4124756 2.65625l0 -9.5625l1.078125 0l0 0.890625q0.375 -0.53125 0.84375 -0.78125q0.484375 -0.265625 1.15625 -0.265625q0.875 0 1.546875 0.453125q0.6875 0.453125 1.03125 1.28125q0.34375 0.828125 0.34375 1.828125q0 1.046875 -0.375 1.90625q-0.375 0.84375 -1.109375 1.296875q-0.71875 0.453125 -1.53125 0.453125q-0.578125 0 -1.046875 -0.25q-0.46875 -0.25 -0.765625 -0.625l0 3.375l-1.171875 0zm1.0625 -6.078125q0 1.34375 0.53125 1.984375q0.546875 0.625 1.3125 0.625q0.78125 0 1.34375 -0.65625q0.5625 -0.65625 0.5625 -2.046875q0 -1.3125 -0.546875 -1.96875q-0.546875 -0.671875 -1.296875 -0.671875q-0.75 0 -1.328125 0.703125q-0.578125 0.703125 -0.578125 2.03125zm10.881226 3.421875l0 -1.015625q-0.8125 1.171875 -2.1875 1.171875q-0.609375 0 -1.140625 -0.234375q-0.53125 -0.234375 -0.796875 -0.578125q-0.25 -0.359375 -0.359375 -0.875q-0.0625 -0.34375 -0.0625 -1.09375l0 -4.28125l1.171875 0l0 3.828125q0 0.921875 0.0625 1.234375q0.109375 0.46875 0.46875 0.734375q0.359375 0.25 0.890625 0.25q0.515625 0 0.984375 -0.265625q0.46875 -0.265625 0.65625 -0.734375q0.1875 -0.46875 0.1875 -1.34375l0 -3.703125l1.171875 0l0 6.90625l-1.046875 0zm5.4437256 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m738.0 160.0l181.98425 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m738.0 160.0l175.98425 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m913.98425 161.65173l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m654.03674 382.94223l0 -82.77164" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m654.03674 379.15222l0 -78.98163" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m655.68176 379.15222l0 3.2900085l-3.290039 0l0 -3.2900085l3.290039 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m653.7743 345.18896l153.16534 0l0 47.68506l-153.16534 0z" fill-rule="evenodd"/><path fill="#000000" d="m663.74304 366.98898l0 -9.546875l3.59375 0q1.09375 0 1.75 0.296875q0.65625 0.28125 1.03125 0.890625q0.375 0.609375 0.375 1.265625q0 0.609375 -0.34375 1.15625q-0.328125 0.53125 -0.984375 0.859375q0.859375 0.25 1.328125 0.875q0.46875 0.609375 0.46875 1.4375q0 0.671875 -0.296875 1.25q-0.28125 0.578125 -0.703125 0.890625q-0.40625 0.3125 -1.03125 0.46875q-0.625 0.15625 -1.546875 0.15625l-3.640625 0zm1.265625 -5.53125l2.0625 0q0.84375 0 1.203125 -0.109375q0.484375 -0.140625 0.71875 -0.46875q0.25 -0.34375 0.25 -0.84375q0 -0.46875 -0.234375 -0.828125q-0.21875 -0.359375 -0.640625 -0.5q-0.421875 -0.140625 -1.453125 -0.140625l-1.90625 0l0 2.890625zm0 4.40625l2.375 0q0.609375 0 0.859375 -0.046875q0.4375 -0.078125 0.734375 -0.25q0.296875 -0.1875 0.484375 -0.53125q0.1875 -0.359375 0.1875 -0.8125q0 -0.53125 -0.28125 -0.921875q-0.265625 -0.40625 -0.75 -0.5625q-0.484375 -0.15625 -1.40625 -0.15625l-2.203125 0l0 3.28125zm7.5147705 1.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm4.0164795 -3.453125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm7.9281006 3.453125l-2.125 -6.90625l1.21875 0l1.09375 3.984375l0.421875 1.484375q0.015625 -0.109375 0.359375 -1.421875l1.09375 -4.046875l1.203125 0l1.03125 4.0l0.34375 1.328125l0.40625 -1.34375l1.171875 -3.984375l1.140625 0l-2.15625 6.90625l-1.21875 0l-1.09375 -4.140625l-0.265625 -1.171875l-1.40625 5.3125l-1.21875 0zm7.875122 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm12.672607 -2.53125l1.15625 0.15625q-0.1875 1.1875 -0.96875 1.859375q-0.78125 0.671875 -1.921875 0.671875q-1.40625 0 -2.28125 -0.921875q-0.859375 -0.9375 -0.859375 -2.65625q0 -1.125 0.375 -1.96875q0.375 -0.84375 1.125 -1.25q0.765625 -0.421875 1.65625 -0.421875q1.125 0 1.84375 0.578125q0.71875 0.5625 0.921875 1.609375l-1.140625 0.171875q-0.171875 -0.703125 -0.59375 -1.046875q-0.40625 -0.359375 -0.984375 -0.359375q-0.890625 0 -1.453125 0.640625q-0.546875 0.640625 -0.546875 2.0q0 1.40625 0.53125 2.03125q0.546875 0.625 1.40625 0.625q0.6875 0 1.140625 -0.421875q0.46875 -0.421875 0.59375 -1.296875zm6.6640625 1.671875q-0.65625 0.5625 -1.265625 0.796875q-0.59375 0.21875 -1.28125 0.21875q-1.140625 0 -1.75 -0.546875q-0.609375 -0.5625 -0.609375 -1.4375q0 -0.5 0.21875 -0.921875q0.234375 -0.421875 0.609375 -0.671875q0.375 -0.25 0.84375 -0.390625q0.34375 -0.078125 1.046875 -0.171875q1.421875 -0.171875 2.09375 -0.40625q0 -0.234375 0 -0.296875q0 -0.71875 -0.328125 -1.015625q-0.453125 -0.390625 -1.34375 -0.390625q-0.8125 0 -1.21875 0.296875q-0.390625 0.28125 -0.578125 1.015625l-1.140625 -0.15625q0.15625 -0.734375 0.515625 -1.1875q0.359375 -0.453125 1.03125 -0.6875q0.671875 -0.25 1.5625 -0.25q0.890625 0 1.4375 0.203125q0.5625 0.203125 0.8125 0.53125q0.265625 0.3125 0.375 0.796875q0.046875 0.296875 0.046875 1.078125l0 1.5625q0 1.625 0.078125 2.0625q0.078125 0.4375 0.296875 0.828125l-1.21875 0q-0.1875 -0.359375 -0.234375 -0.859375zm-0.09375 -2.609375q-0.640625 0.265625 -1.921875 0.4375q-0.71875 0.109375 -1.015625 0.25q-0.296875 0.125 -0.46875 0.375q-0.15625 0.25 -0.15625 0.546875q0 0.46875 0.34375 0.78125q0.359375 0.3125 1.046875 0.3125q0.671875 0 1.203125 -0.296875q0.53125 -0.296875 0.78125 -0.8125q0.1875 -0.390625 0.1875 -1.171875l0 -0.421875zm2.9906006 3.46875l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.0998535 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm9.1883545 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.0531006 2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm7.1328125 4.71875l0 -9.5625l1.078125 0l0 0.890625q0.375 -0.53125 0.84375 -0.78125q0.484375 -0.265625 1.15625 -0.265625q0.875 0 1.546875 0.453125q0.6875 0.453125 1.03125 1.28125q0.34375 0.828125 0.34375 1.828125q0 1.046875 -0.375 1.90625q-0.375 0.84375 -1.109375 1.296875q-0.71875 0.453125 -1.53125 0.453125q-0.578125 0 -1.046875 -0.25q-0.46875 -0.25 -0.765625 -0.625l0 3.375l-1.171875 0zm1.0625 -6.078125q0 1.34375 0.53125 1.984375q0.546875 0.625 1.3125 0.625q0.78125 0 1.34375 -0.65625q0.5625 -0.65625 0.5625 -2.046875q0 -1.3125 -0.546875 -1.96875q-0.546875 -0.671875 -1.296875 -0.671875q-0.75 0 -1.328125 0.703125q-0.578125 0.703125 -0.578125 2.03125zm5.9124756 -0.03125q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm6.6468506 3.453125l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm11.896851 0l0 -0.875q-0.65625 1.03125 -1.9375 1.03125q-0.8125 0 -1.515625 -0.453125q-0.6875 -0.453125 -1.078125 -1.265625q-0.375 -0.828125 -0.375 -1.890625q0 -1.03125 0.34375 -1.875q0.34375 -0.84375 1.03125 -1.28125q0.703125 -0.453125 1.546875 -0.453125q0.625 0 1.109375 0.265625q0.5 0.25 0.796875 0.671875l0 -3.421875l1.171875 0l0 9.546875l-1.09375 0zm-3.703125 -3.453125q0 1.328125 0.5625 1.984375q0.5625 0.65625 1.328125 0.65625q0.765625 0 1.296875 -0.625q0.53125 -0.625 0.53125 -1.90625q0 -1.421875 -0.546875 -2.078125q-0.546875 -0.671875 -1.34375 -0.671875q-0.78125 0 -1.3125 0.640625q-0.515625 0.625 -0.515625 2.0z" fill-rule="nonzero"/><path fill="#000000" d="m666.2118 381.9421l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm0.7030029 -2.40625q0 -1.921875 1.078125 -2.84375q0.890625 -0.765625 2.171875 -0.765625q1.421875 0 2.328125 0.9375q0.90625 0.921875 0.90625 2.578125q0 1.328125 -0.40625 2.09375q-0.390625 0.765625 -1.15625 1.1875q-0.765625 0.421875 -1.671875 0.421875q-1.453125 0 -2.359375 -0.921875q-0.890625 -0.9375 -0.890625 -2.6875zm1.203125 0q0 1.328125 0.578125 1.984375q0.59375 0.65625 1.46875 0.65625q0.875 0 1.453125 -0.65625q0.578125 -0.671875 0.578125 -2.03125q0 -1.28125 -0.59375 -1.9375q-0.578125 -0.65625 -1.4375 -0.65625q-0.875 0 -1.46875 0.65625q-0.578125 0.65625 -0.578125 1.984375zm12.9122925 2.40625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm1.1405029 1.046875l0 -9.546875l1.171875 0l0 3.421875q0.828125 -0.9375 2.078125 -0.9375q0.765625 0 1.328125 0.296875q0.5625 0.296875 0.8125 0.84375q0.25 0.53125 0.25 1.546875l0 4.375l-1.171875 0l0 -4.375q0 -0.890625 -0.390625 -1.28125q-0.375 -0.40625 -1.078125 -0.40625q-0.515625 0 -0.984375 0.28125q-0.453125 0.265625 -0.65625 0.734375q-0.1875 0.453125 -0.1875 1.265625l0 3.78125l-1.171875 0zm12.146851 -2.21875l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm10.5061035 4.125l0 -6.0l-1.03125 0l0 -0.90625l1.03125 0l0 -0.734375q0 -0.703125 0.125 -1.046875q0.171875 -0.453125 0.59375 -0.734375q0.421875 -0.28125 1.203125 -0.28125q0.484375 0 1.09375 0.109375l-0.1875 1.03125q-0.359375 -0.0625 -0.6875 -0.0625q-0.53125 0 -0.75 0.234375q-0.21875 0.21875 -0.21875 0.84375l0 0.640625l1.34375 0l0 0.90625l-1.34375 0l0 6.0l-1.171875 0zm3.437378 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.9298096 0l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm3.9852295 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm9.6953125 1.015625l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875zm9.374756 1.046875l0 -1.015625q-0.8125 1.171875 -2.1875 1.171875q-0.609375 0 -1.140625 -0.234375q-0.53125 -0.234375 -0.796875 -0.578125q-0.25 -0.359375 -0.359375 -0.875q-0.0625 -0.34375 -0.0625 -1.09375l0 -4.28125l1.171875 0l0 3.828125q0 0.921875 0.0625 1.234375q0.109375 0.46875 0.46875 0.734375q0.359375 0.25 0.890625 0.25q0.515625 0 0.984375 -0.265625q0.46875 -0.265625 0.65625 -0.734375q0.1875 -0.46875 0.1875 -1.34375l0 -3.703125l1.171875 0l0 6.90625l-1.046875 0zm2.4124756 -2.0625l1.15625 -0.1875q0.109375 0.703125 0.546875 1.078125q0.453125 0.359375 1.25 0.359375q0.8125 0 1.203125 -0.328125q0.390625 -0.328125 0.390625 -0.765625q0 -0.390625 -0.359375 -0.625q-0.234375 -0.15625 -1.1875 -0.390625q-1.296875 -0.328125 -1.796875 -0.5625q-0.484375 -0.25 -0.75 -0.65625q-0.25 -0.421875 -0.25 -0.9375q0 -0.453125 0.203125 -0.84375q0.21875 -0.40625 0.578125 -0.671875q0.28125 -0.1875 0.75 -0.328125q0.46875 -0.140625 1.015625 -0.140625q0.8125 0 1.421875 0.234375q0.609375 0.234375 0.90625 0.640625q0.296875 0.390625 0.40625 1.0625l-1.140625 0.15625q-0.078125 -0.53125 -0.453125 -0.828125q-0.375 -0.3125 -1.0625 -0.3125q-0.8125 0 -1.15625 0.265625q-0.34375 0.265625 -0.34375 0.625q0 0.234375 0.140625 0.421875q0.15625 0.1875 0.453125 0.3125q0.171875 0.0625 1.03125 0.296875q1.25 0.328125 1.734375 0.546875q0.5 0.203125 0.78125 0.609375q0.28125 0.40625 0.28125 1.0q0 0.59375 -0.34375 1.109375q-0.34375 0.515625 -1.0 0.796875q-0.640625 0.28125 -1.453125 0.28125q-1.34375 0 -2.046875 -0.5625q-0.703125 -0.5625 -0.90625 -1.65625zm11.8671875 -0.15625l1.203125 0.140625q-0.28125 1.0625 -1.0625 1.65625q-0.765625 0.578125 -1.96875 0.578125q-1.515625 0 -2.40625 -0.9375q-0.890625 -0.9375 -0.890625 -2.609375q0 -1.75 0.890625 -2.703125q0.90625 -0.96875 2.34375 -0.96875q1.390625 0 2.265625 0.9375q0.875 0.9375 0.875 2.65625q0 0.109375 0 0.3125l-5.15625 0q0.0625 1.140625 0.640625 1.75q0.578125 0.59375 1.4375 0.59375q0.65625 0 1.109375 -0.328125q0.453125 -0.34375 0.71875 -1.078125zm-3.84375 -1.90625l3.859375 0q-0.078125 -0.859375 -0.4375 -1.296875q-0.5625 -0.6875 -1.453125 -0.6875q-0.8125 0 -1.359375 0.546875q-0.546875 0.53125 -0.609375 1.4375zm6.5062256 4.125l0 -6.90625l1.0625 0l0 1.046875q0.40625 -0.734375 0.734375 -0.96875q0.34375 -0.234375 0.765625 -0.234375q0.59375 0 1.203125 0.375l-0.40625 1.078125q-0.4375 -0.25 -0.859375 -0.25q-0.390625 0 -0.703125 0.234375q-0.296875 0.234375 -0.421875 0.640625q-0.203125 0.625 -0.203125 1.359375l0 3.625l-1.171875 0zm8.172607 -8.1875l0 -1.359375l1.171875 0l0 1.359375l-1.171875 0zm0 8.1875l0 -6.90625l1.171875 0l0 6.90625l-1.171875 0zm2.9454346 0l0 -6.90625l1.0625 0l0 0.984375q0.75 -1.140625 2.1875 -1.140625q0.625 0 1.15625 0.21875q0.53125 0.21875 0.78125 0.59375q0.265625 0.359375 0.375 0.859375q0.0625 0.328125 0.0625 1.140625l0 4.25l-1.171875 0l0 -4.203125q0 -0.71875 -0.140625 -1.0625q-0.140625 -0.359375 -0.484375 -0.5625q-0.34375 -0.21875 -0.8125 -0.21875q-0.75 0 -1.296875 0.46875q-0.546875 0.46875 -0.546875 1.796875l0 3.78125l-1.171875 0zm7.4124756 2.65625l0 -9.5625l1.078125 0l0 0.890625q0.375 -0.53125 0.84375 -0.78125q0.484375 -0.265625 1.15625 -0.265625q0.875 0 1.546875 0.453125q0.6875 0.453125 1.03125 1.28125q0.34375 0.828125 0.34375 1.828125q0 1.046875 -0.375 1.90625q-0.375 0.84375 -1.109375 1.296875q-0.71875 0.453125 -1.53125 0.453125q-0.578125 0 -1.046875 -0.25q-0.46875 -0.25 -0.765625 -0.625l0 3.375l-1.171875 0zm1.0625 -6.078125q0 1.34375 0.53125 1.984375q0.546875 0.625 1.3125 0.625q0.78125 0 1.34375 -0.65625q0.5625 -0.65625 0.5625 -2.046875q0 -1.3125 -0.546875 -1.96875q-0.546875 -0.671875 -1.296875 -0.671875q-0.75 0 -1.328125 0.703125q-0.578125 0.703125 -0.578125 2.03125zm10.881226 3.421875l0 -1.015625q-0.8125 1.171875 -2.1875 1.171875q-0.609375 0 -1.140625 -0.234375q-0.53125 -0.234375 -0.796875 -0.578125q-0.25 -0.359375 -0.359375 -0.875q-0.0625 -0.34375 -0.0625 -1.09375l0 -4.28125l1.171875 0l0 3.828125q0 0.921875 0.0625 1.234375q0.109375 0.46875 0.46875 0.734375q0.359375 0.25 0.890625 0.25q0.515625 0 0.984375 -0.265625q0.46875 -0.265625 0.65625 -0.734375q0.1875 -0.46875 0.1875 -1.34375l0 -3.703125l1.171875 0l0 6.90625l-1.046875 0zm5.4437256 -1.046875l0.171875 1.03125q-0.5 0.109375 -0.890625 0.109375q-0.640625 0 -1.0 -0.203125q-0.34375 -0.203125 -0.484375 -0.53125q-0.140625 -0.328125 -0.140625 -1.390625l0 -3.96875l-0.859375 0l0 -0.90625l0.859375 0l0 -1.71875l1.171875 -0.703125l0 2.421875l1.171875 0l0 0.90625l-1.171875 0l0 4.046875q0 0.5 0.046875 0.640625q0.0625 0.140625 0.203125 0.234375q0.140625 0.078125 0.40625 0.078125q0.203125 0 0.515625 -0.046875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m488.75592 407.55774l165.29132 0l0 33.606293l-165.29132 0z" fill-rule="evenodd"/><path fill="#000000" d="m560.6753 430.63776l0 -10.484375l7.1875 0l0 1.765625l-5.0625 0l0 2.484375l4.375 0l0 1.78125l-4.375 0l0 4.453125l-2.125 0zm8.874451 0l0 -10.484375l2.125 0l0 10.484375l-2.125 0zm4.1345215 -10.484375l3.875 0q1.296875 0 1.984375 0.1875q0.921875 0.28125 1.578125 0.984375q0.671875 0.6875 1.015625 1.6875q0.34375 1.0 0.34375 2.484375q0 1.296875 -0.328125 2.234375q-0.390625 1.140625 -1.125 1.84375q-0.546875 0.546875 -1.484375 0.84375q-0.703125 0.21875 -1.875 0.21875l-3.984375 0l0 -10.484375zm2.109375 1.765625l0 6.953125l1.59375 0q0.875 0 1.28125 -0.109375q0.515625 -0.125 0.84375 -0.421875q0.34375 -0.3125 0.5625 -1.015625q0.21875 -0.703125 0.21875 -1.921875q0 -1.21875 -0.21875 -1.859375q-0.21875 -0.65625 -0.609375 -1.015625q-0.375 -0.375 -0.96875 -0.5q-0.453125 -0.109375 -1.75 -0.109375l-0.953125 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m488.75592 407.24408l165.29132 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m488.75592 407.24408l165.29132 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m488.75592 402.12598l0 10.236237" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m488.75592 402.12598l0 10.236237" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m654.04724 402.12598l0 10.236237" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m654.04724 402.12598l0 10.236237" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.94226 49.115486l589.5748 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.94226 49.115486l589.5748 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.94226 43.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.94226 43.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m726.5171 43.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m726.5171 43.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.92934 97.115486l154.42519 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.92934 97.115486l154.42519 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m136.92934 91.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m136.92934 91.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m291.35452 91.997375l0 10.236221" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m291.35452 91.997375l0 10.236221" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m137.50131 64.05774l154.4252 0l0 33.6063l-154.4252 0z" fill-rule="evenodd"/><path fill="#000000" d="m201.13579 87.13774l0 -10.484375l7.1875 0l0 1.765625l-5.0625 0l0 2.484375l4.375 0l0 1.78125l-4.375 0l0 4.453125l-2.125 0zm15.655746 -3.859375l2.046875 0.65625q-0.46875 1.71875 -1.578125 2.546875q-1.09375 0.828125 -2.78125 0.828125q-2.078125 0 -3.4375 -1.421875q-1.34375 -1.421875 -1.34375 -3.90625q0 -2.609375 1.359375 -4.0625q1.359375 -1.453125 3.5625 -1.453125q1.921875 0 3.125 1.140625q0.71875 0.671875 1.0625 1.9375l-2.09375 0.5q-0.1875 -0.828125 -0.78125 -1.296875q-0.578125 -0.46875 -1.421875 -0.46875q-1.171875 0 -1.90625 0.84375q-0.71875 0.828125 -0.71875 2.703125q0 1.984375 0.71875 2.84375q0.71875 0.84375 1.859375 0.84375q0.84375 0 1.453125 -0.53125q0.609375 -0.546875 0.875 -1.703125zm3.8655243 3.859375l0 -10.484375l3.40625 0q1.921875 0 2.515625 0.15625q0.90625 0.234375 1.515625 1.03125q0.609375 0.78125 0.609375 2.03125q0 0.96875 -0.359375 1.625q-0.34375 0.65625 -0.890625 1.03125q-0.53125 0.375 -1.09375 0.5q-0.765625 0.15625 -2.203125 0.15625l-1.375 0l0 3.953125l-2.125 0zm2.125 -8.71875l0 2.984375l1.15625 0q1.25 0 1.671875 -0.15625q0.421875 -0.171875 0.65625 -0.515625q0.25 -0.359375 0.25 -0.828125q0 -0.578125 -0.34375 -0.9375q-0.328125 -0.375 -0.84375 -0.46875q-0.375 -0.078125 -1.53125 -0.078125l-1.015625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m137.81364 16.057743l589.57477 0l0 33.6063l-589.57477 0z" fill-rule="evenodd"/><path fill="#000000" d="m425.03433 39.13774l0 -8.718748l-3.109375 0l0 -1.765625l8.34375 0l0 1.765625l-3.109375 0l0 8.718748l-2.125 0zm8.952606 0l0 -8.718748l-3.109375 0l0 -1.765625l8.34375 0l0 1.765625l-3.109375 0l0 8.718748l-2.125 0zm6.5307617 0l0 -10.484373l2.125 0l0 10.484373l-2.125 0z" fill-rule="nonzero"/><path fill="#e8c469" d="m223.5118 300.6483l19.62204 0l0 19.84253l-19.62204 0z" fill-rule="evenodd"/><path fill="#cccccc" d="m129.81366 350.77338l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 348.50656l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.18326 362.16782l0 -7.625l1.03125 0l4.015625 5.984375l0 -5.984375l0.96875 0l0 7.625l-1.046875 0l-4.0 -6.0l0 6.0l-0.96875 0zm11.367477 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm7.2702484 2.453125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm1.9293976 0.84375l-1.6875 -5.53125l0.96875 0l0.875 3.1875l0.328125 1.1875q0.03125 -0.078125 0.296875 -1.140625l0.875 -3.234375l0.953125 0l0.828125 3.203125l0.28125 1.0625l0.3125 -1.0625l0.953125 -3.203125l0.90625 0l-1.71875 5.53125l-0.984375 0l-0.875 -3.3125l-0.21875 -0.9375l-1.109375 4.25l-0.984375 0zm6.3362274 -2.765625q0 -1.53125 0.84375 -2.265625q0.71875 -0.625 1.734375 -0.625q1.140625 0 1.859375 0.75q0.734375 0.75 0.734375 2.0625q0 1.0625 -0.328125 1.6875q-0.3125 0.609375 -0.921875 0.953125q-0.609375 0.328125 -1.34375 0.328125q-1.15625 0 -1.875 -0.734375q-0.703125 -0.75 -0.703125 -2.15625zm0.953125 0q0 1.0625 0.46875 1.59375q0.46875 0.53125 1.15625 0.53125q0.703125 0 1.15625 -0.53125q0.46875 -0.53125 0.46875 -1.625q0 -1.015625 -0.46875 -1.546875q-0.453125 -0.53125 -1.15625 -0.53125q-0.6875 0 -1.15625 0.53125q-0.46875 0.515625 -0.46875 1.578125zm5.3014984 2.765625l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm3.5642395 0l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0zm8.273148 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.738998 5.421875l0 -2.71875q-0.21875 0.3125 -0.609375 0.515625q-0.390625 0.203125 -0.828125 0.203125q-0.984375 0 -1.703125 -0.78125q-0.703125 -0.796875 -0.703125 -2.15625q0 -0.828125 0.28125 -1.484375q0.296875 -0.671875 0.84375 -1.015625q0.546875 -0.34375 1.203125 -0.34375q1.03125 0 1.609375 0.875l0 -0.75l0.84375 0l0 7.65625l-0.9375 0zm-2.875 -4.90625q0 1.0625 0.4375 1.609375q0.453125 0.53125 1.078125 0.53125q0.59375 0 1.015625 -0.5q0.4375 -0.515625 0.4375 -1.546875q0 -1.109375 -0.453125 -1.65625q-0.453125 -0.5625 -1.0625 -0.5625q-0.609375 0 -1.03125 0.515625q-0.421875 0.515625 -0.421875 1.609375zm8.910873 2.78125l0 -0.8125q-0.65625 0.9375 -1.75 0.9375q-0.5 0 -0.921875 -0.1875q-0.421875 -0.1875 -0.625 -0.46875q-0.203125 -0.28125 -0.296875 -0.703125q-0.046875 -0.265625 -0.046875 -0.875l0 -3.421875l0.9375 0l0 3.0625q0 0.734375 0.046875 1.0q0.09375 0.359375 0.375 0.578125q0.296875 0.203125 0.703125 0.203125q0.421875 0 0.796875 -0.203125q0.375 -0.21875 0.515625 -0.59375q0.15625 -0.375 0.15625 -1.078125l0 -2.96875l0.9375 0l0 5.53125l-0.828125 0zm6.0827484 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm4.8483734 1.640625l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm7.75 0.8125l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875z" fill-rule="nonzero"/><path fill="#e8c469" d="m129.81366 373.98334l15.307083 0l0 15.307098l-15.307083 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m142.37076 371.71652l145.51181 0l0 19.84253l-145.51181 0z" fill-rule="evenodd"/><path fill="#000000" d="m152.16763 385.3778l0 -7.625l1.515625 0l1.796875 5.390625q0.25 0.765625 0.375 1.140625q0.125 -0.421875 0.40625 -1.234375l1.828125 -5.296875l1.34375 0l0 7.625l-0.96875 0l0 -6.390625l-2.21875 6.390625l-0.90625 0l-2.203125 -6.5l0 6.5l-0.96875 0zm12.3923645 -0.6875q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.3952484 -3.78125l0 -1.078125l0.9375 0l0 1.078125l-0.9375 0zm0 6.546875l0 -5.53125l0.9375 0l0 5.53125l-0.9375 0zm2.3674774 0l0 -5.53125l0.84375 0l0 0.796875q0.609375 -0.921875 1.75 -0.921875q0.5 0 0.921875 0.1875q0.421875 0.171875 0.625 0.46875q0.21875 0.296875 0.296875 0.6875q0.046875 0.265625 0.046875 0.921875l0 3.390625l-0.9375 0l0 -3.359375q0 -0.578125 -0.109375 -0.859375q-0.109375 -0.28125 -0.390625 -0.453125q-0.265625 -0.171875 -0.640625 -0.171875q-0.59375 0 -1.03125 0.390625q-0.4375 0.375 -0.4375 1.4375l0 3.015625l-0.9375 0zm10.934021 -0.84375l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm0.9137726 0.84375l0 -7.625l0.9375 0l0 2.734375q0.65625 -0.765625 1.65625 -0.765625q0.609375 0 1.0625 0.25q0.453125 0.234375 0.640625 0.671875q0.203125 0.421875 0.203125 1.234375l0 3.5l-0.9375 0l0 -3.5q0 -0.703125 -0.3125 -1.015625q-0.296875 -0.328125 -0.859375 -0.328125q-0.40625 0 -0.78125 0.21875q-0.359375 0.21875 -0.515625 0.59375q-0.15625 0.359375 -0.15625 1.015625l0 3.015625l-0.9375 0zm5.9108734 0l0 -5.53125l0.84375 0l0 0.84375q0.328125 -0.59375 0.59375 -0.78125q0.28125 -0.1875 0.609375 -0.1875q0.46875 0 0.953125 0.3125l-0.3125 0.859375q-0.34375 -0.203125 -0.6875 -0.203125q-0.3125 0 -0.5625 0.1875q-0.234375 0.1875 -0.34375 0.515625q-0.15625 0.5 -0.15625 1.09375l0 2.890625l-0.9375 0zm7.3454895 -1.78125l0.96875 0.125q-0.234375 0.84375 -0.859375 1.3125q-0.609375 0.46875 -1.578125 0.46875q-1.203125 0 -1.921875 -0.75q-0.703125 -0.75 -0.703125 -2.09375q0 -1.390625 0.71875 -2.15625q0.71875 -0.78125 1.859375 -0.78125q1.109375 0 1.8125 0.765625q0.703125 0.75 0.703125 2.125q0 0.078125 0 0.234375l-4.125 0q0.046875 0.921875 0.515625 1.40625q0.46875 0.484375 1.15625 0.484375q0.515625 0 0.875 -0.265625q0.359375 -0.28125 0.578125 -0.875zm-3.078125 -1.515625l3.09375 0q-0.0625 -0.6875 -0.359375 -1.046875q-0.453125 -0.53125 -1.15625 -0.53125q-0.640625 0 -1.09375 0.4375q-0.4375 0.421875 -0.484375 1.140625zm8.832748 2.609375q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm5.9733734 2.765625l0 -0.703125q-0.515625 0.828125 -1.546875 0.828125q-0.65625 0 -1.21875 -0.359375q-0.546875 -0.375 -0.859375 -1.015625q-0.296875 -0.65625 -0.296875 -1.5q0 -0.828125 0.28125 -1.5q0.28125 -0.6875 0.828125 -1.046875q0.546875 -0.359375 1.234375 -0.359375q0.5 0 0.890625 0.21875q0.390625 0.203125 0.625 0.546875l0 -2.734375l0.9375 0l0 7.625l-0.875 0zm-2.953125 -2.75q0 1.046875 0.4375 1.578125q0.453125 0.53125 1.0625 0.53125q0.609375 0 1.03125 -0.5q0.4375 -0.515625 0.4375 -1.53125q0 -1.140625 -0.4375 -1.671875q-0.4375 -0.53125 -1.078125 -0.53125q-0.609375 0 -1.03125 0.515625q-0.421875 0.5 -0.421875 1.609375zm10.309021 1.90625l0.125 0.828125q-0.390625 0.09375 -0.703125 0.09375q-0.5 0 -0.78125 -0.15625q-0.28125 -0.171875 -0.40625 -0.4375q-0.109375 -0.265625 -0.109375 -1.109375l0 -3.171875l-0.6875 0l0 -0.734375l0.6875 0l0 -1.359375l0.9375 -0.5625l0 1.921875l0.9375 0l0 0.734375l-0.9375 0l0 3.234375q0 0.390625 0.046875 0.515625q0.046875 0.109375 0.15625 0.1875q0.109375 0.0625 0.328125 0.0625q0.15625 0 0.40625 -0.046875zm4.5231476 0.15625q-0.53125 0.453125 -1.015625 0.640625q-0.46875 0.171875 -1.015625 0.171875q-0.921875 0 -1.40625 -0.4375q-0.484375 -0.453125 -0.484375 -1.140625q0 -0.40625 0.171875 -0.734375q0.1875 -0.34375 0.484375 -0.546875q0.3125 -0.203125 0.6875 -0.3125q0.265625 -0.0625 0.828125 -0.140625q1.125 -0.125 1.671875 -0.3125q0 -0.203125 0 -0.25q0 -0.578125 -0.265625 -0.8125q-0.359375 -0.3125 -1.0625 -0.3125q-0.65625 0 -0.984375 0.234375q-0.3125 0.234375 -0.453125 0.8125l-0.921875 -0.125q0.125 -0.578125 0.40625 -0.9375q0.296875 -0.375 0.828125 -0.5625q0.546875 -0.203125 1.25 -0.203125q0.71875 0 1.15625 0.171875q0.4375 0.171875 0.640625 0.421875q0.21875 0.25 0.296875 0.640625q0.046875 0.234375 0.046875 0.859375l0 1.25q0 1.296875 0.0625 1.65625q0.0625 0.34375 0.234375 0.65625l-0.96875 0q-0.15625 -0.296875 -0.1875 -0.6875zm-0.078125 -2.078125q-0.515625 0.203125 -1.53125 0.34375q-0.578125 0.078125 -0.828125 0.1875q-0.234375 0.109375 -0.359375 0.3125q-0.125 0.1875 -0.125 0.4375q0 0.375 0.28125 0.625q0.28125 0.25 0.828125 0.25q0.53125 0 0.953125 -0.234375q0.421875 -0.234375 0.625 -0.65625q0.15625 -0.3125 0.15625 -0.9375l0 -0.328125zm2.0202484 1.109375l0.921875 -0.140625q0.078125 0.5625 0.4375 0.859375q0.359375 0.296875 1.0 0.296875q0.640625 0 0.953125 -0.265625q0.3125 -0.265625 0.3125 -0.625q0 -0.3125 -0.28125 -0.5q-0.1875 -0.125 -0.953125 -0.3125q-1.03125 -0.265625 -1.4375 -0.453125q-0.390625 -0.1875 -0.59375 -0.515625q-0.203125 -0.34375 -0.203125 -0.75q0 -0.359375 0.171875 -0.671875q0.171875 -0.328125 0.453125 -0.53125q0.21875 -0.15625 0.59375 -0.265625q0.390625 -0.125 0.8125 -0.125q0.65625 0 1.140625 0.1875q0.5 0.1875 0.734375 0.515625q0.234375 0.3125 0.3125 0.859375l-0.90625 0.125q-0.0625 -0.4375 -0.375 -0.671875q-0.296875 -0.234375 -0.828125 -0.234375q-0.65625 0 -0.9375 0.21875q-0.265625 0.203125 -0.265625 0.484375q0 0.1875 0.109375 0.328125q0.125 0.15625 0.359375 0.25q0.140625 0.0625 0.828125 0.25q1.0 0.265625 1.390625 0.4375q0.390625 0.15625 0.609375 0.484375q0.234375 0.3125 0.234375 0.796875q0 0.46875 -0.28125 0.890625q-0.265625 0.40625 -0.78125 0.640625q-0.515625 0.21875 -1.171875 0.21875q-1.078125 0 -1.640625 -0.4375q-0.5625 -0.453125 -0.71875 -1.34375zm5.703125 1.65625l0 -7.625l0.9375 0l0 4.34375l2.21875 -2.25l1.21875 0l-2.125 2.0625l2.328125 3.46875l-1.15625 0l-1.8125 -2.828125l-0.671875 0.640625l0 2.1875l-0.9375 0z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/fid/index.md b/src/site/content/en/metrics/fid/index.md
index 93c39b26690..0debaddff81 100644
--- a/src/site/content/en/metrics/fid/index.md
+++ b/src/site/content/en/metrics/fid/index.md
@@ -4,7 +4,7 @@ title: First Input Delay (FID)
 authors:
   - philipwalton
 date: 2019-11-07
-updated: 2020-06-19
+updated: 2023-05-10
 description: |
   This post introduces the First Input Delay (FID) metric and explains
   how to measure it
@@ -13,12 +13,10 @@ tags:
   - metrics
 ---
 
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
 {% Aside %}
-  First Input Delay (FID) is an important, user-centric metric for measuring
-  [load responsiveness](/user-centric-performance-metrics/#types-of-metrics)
-  because it quantifies the experience users feel when trying to interact with
-  unresponsive pages&mdash;a low FID helps ensure that the page is
-  [usable](/user-centric-performance-metrics/#questions).
+  First Input Delay (FID) is the [stable](/vitals/#stable) Core Web Vital metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable. FID will be [replaced by Interaction to Next Paint (INP)](/inp-cwv/) as a Core Web Vital in March 2024.
 {% endAside %}
 
 We all know how important it is to make a good first impression. It's important
@@ -30,42 +28,51 @@ becoming a loyal user or them leaving and never coming back. The question is,
 what makes for a good impression, and how do you measure what kind of impression
 you're likely making on your users?
 
-On the web, first impressions can take a lot of different forms&mdash;we have first
-impressions of a site's design and visual appeal as well as first impressions of
-its speed and responsiveness.
+On the web, first impressions can take a lot of different forms&mdash;we have
+first impressions of a site's design and visual appeal as well as first
+impressions of its speed and responsiveness.
 
 While it is hard to measure how much users like a site's design with web APIs,
 measuring its speed and responsiveness is not!
 
 The first impression users have of how fast your site loads can be measured with
-[First Contentful Paint (FCP)](/fcp/). But how fast your site can paint pixels to
-the screen is just part of the story. Equally important is how responsive your
-site is when users try to interact with those pixels!
+[First Contentful Paint (FCP)](/fcp/). But how fast your site can paint pixels
+to the screen is just part of the story. Equally important is how responsive
+your site is when users try to interact with those pixels!
 
 The First Input Delay (FID) metric helps measure your user's first impression of
 your site's interactivity and responsiveness.
 
 ## What is FID?
 
-FID measures the time from when a user first interacts with a page (i.e. when
+FID measures the time from when a user first interacts with a page (that is, when
 they click a link, tap on a button, or use a custom, JavaScript-powered control)
 to the time when the browser is actually able to begin processing event handlers
 in response to that interaction.
 
-<picture>
-  <source srcset="../vitals/fid_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="../vitals/fid_4x3.svg"
-      alt="Good fid values are 2.5 seconds, poor values are greater than 4.0
-            seconds and anything in between needs improvement">
-</picture>
-
 ### What is a good FID score?
 
 To provide a good user experience, sites should strive to have a First Input
-Delay of less than **100 milliseconds**. To ensure you're hitting this target
-for most of your users, a good threshold to measure is the **75th percentile**
-of page loads, segmented across mobile and desktop devices.
+Delay of **100 milliseconds** or less. To ensure you're hitting this target for
+most of your users, a good threshold to measure is the **75th percentile** of
+page loads, segmented across mobile and desktop devices.
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg",
+        alt="Good FID values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
 
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,
@@ -88,19 +95,18 @@ a large JavaScript file loaded by your app. While it's doing that, it can't run
 any event listeners because the JavaScript it's loading might tell it to do
 something else.
 
-{% Aside 'gotchas' %}
-  FID only measures the "delay" in event processing. It does not measure the
-  event processing time itself nor the time it takes the browser to update the
-  UI after running event handlers. While this time does affect the user
-  experience, including it as part of FID would incentivize developers to
-  respond to events asynchronously—which would improve the metric but likely
-  make the experience worse. See [why only consider the input
-  delay](#why-only-consider-the-input-delay) below for more details.
-{% endAside %}
+{% Aside 'gotchas' %} FID only measures the "delay" in event processing. It does
+  not measure the event processing time itself nor the time it takes the browser
+  to update the UI after running event handlers. While this time does affect the
+  user experience, including it as part of FID would incentivize developers to
+  respond to events asynchronously&mdash;which would improve the metric but
+  likely make the experience worse. See [why only consider the input
+  delay](#why-only-consider-the-input-delay) below for more details. {% endAside
+  %}
 
 Consider the following timeline of a typical web page load:
 
-[![Example page load trace](fid-base.svg)](fid-base.svg)
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="Example page load trace", width="800", height="260", linkTo=true %}
 
 The above visualization shows a page that's making a couple of network requests
 for resources (most likely CSS and JS files), and&mdash;after those resources
@@ -116,18 +122,18 @@ Long first input delays typically occur between [First Contentful Paint
 rendered some of its content but isn't yet reliably interactive. To illustrate
 how this can happen, FCP and TTI have been added to the timeline:
 
-[![Example page load trace with FCP and TTI](fid-fcp-tti.svg)](fid-fcp-tti.svg)
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="Example page load trace with FCP and TTI", width="800", height="340", linkTo=true %}
 
 You may have noticed that there's a fair amount of time (including three [long
 tasks](/custom-metrics/#long-tasks-api)) between FCP and TTI, if a user tries to
-interact with the page during that time (e.g. click on a link), there will be a
+interact with the page during that time (for example, by clicking on a link), there will be a
 delay between when the click is received and when the main thread is able to
 respond.
 
 Consider what would happen if a user tried to interact with the page near the
 beginning of the longest task:
 
-[![Example page load trace with FCP, TTI, and FID](fid-full.svg)](fid-full.svg)
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="Example page load trace with FCP, TTI, and FID", width="800", height="380", linkTo=true %}
 
 Because the input occurs while the browser is in the middle of running a task,
 it has to wait until the task completes before it can respond to the input. The
@@ -151,7 +157,7 @@ listener has not been registered.** The reason is because many user interactions
 do not require an event listener but _do_ require the main thread to be idle in
 order to run.
 
-For example, all of the following native HTML elements need to wait for
+For example, all of the following HTML elements need to wait for
 in-progress tasks on the main thread to complete prior to responding to user
 interactions:
 
@@ -189,7 +195,7 @@ hide their latency by running them on a separate thread).
 
 To put this another way, FID focuses on the R (responsiveness) in the [RAIL
 performance
-model](https://developers.google.com/web/fundamentals/performance/rail), whereas
+model](/rail/), whereas
 scrolling and zooming are more related to A (animation), and their performance
 qualities should be evaluated separately.
 
@@ -216,11 +222,11 @@ to update the UI after running event handlers.
 
 Even though this time is important to the user and _does_ affect the experience,
 it's not included in this metric because doing so could incentivize developers
-to add workarounds that actually make the experience worse—that is, they could
-wrap their event handler logic in an asynchronous callback (via `setTimeout()`
-or `requestAnimationFrame()`) in order to separate it from the task associated
-with the event. The result would be an improvement in the metric score but a
-slower response as perceived by the user.
+to add workarounds that actually make the experience worse&mdash;that is, they
+could wrap their event handler logic in an asynchronous callback (via
+`setTimeout()` or `requestAnimationFrame()`) in order to separate it from the
+task associated with the event. The result would be an improvement in the metric
+score but a slower response as perceived by the user.
 
 However, while FID only measure the "delay" portion of event latency, developers
 who want to track more of the event lifecycle can do so using the [Event Timing
@@ -244,62 +250,85 @@ user to interact with your page. You can measure FID with the following tools.
 ### Field tools
 
 - [Chrome User Experience
-  Report](https://developers.google.com/web/tools/chrome-user-experience-report)
-- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+  Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [Search Console (Core Web Vitals
   report)](https://support.google.com/webmasters/answer/9205520)
-- [Firebase Performance Monitoring
-  (beta)](https://firebase.google.com/docs/perf-mon/get-started-web)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
 
 ### Measure FID in JavaScript
 
-The easiest way to measure FID (as well as all Web Vitals [field
-metrics]((/metrics/#in-the-field))) is with the [`web-vitals` JavaScript
-library](https://github.com/GoogleChrome/web-vitals), which wraps all the
-complexity of manually measuring FID into a single function:
+To measure FID in JavaScript, you can use the [Event Timing
+API](https://wicg.github.io/event-timing). The following example shows how to
+create a
+[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+that listens for
+[`first-input`](https://wicg.github.io/event-timing/#sec-performance-event-timing)
+entries and logs them to the console:
 
 ```js
-import {getFID} from 'web-vitals';
-
-// Measure and log the current FID value,
-// any time it's ready to be reported.
-getFID(console.log);
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
 ```
 
-To manually measure FID, you can use the [Event Timing
-API](https://wicg.github.io/event-timing). The following example shows how to
-create a
-<code>[PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)</code>
-that listens for
-<code>[first-input](https://wicg.github.io/event-timing/#sec-performance-event-timing)</code>
-entries, calculates FID, and logs the value to the console:
+{% Aside 'warning' %}
+  This code shows how to log `first-input` entries to the console and calculate
+  their delay. However, measuring FID in JavaScript is more complicated. See
+  below for details:
+{% endAside %}
 
-{% set entryType = 'first-input' %}
-{% set entryCallback = 'onFirstInputEntry' %}
+In the above example, the `first-input` entry's delay value is measured by
+taking the delta between the entry's `startTime` and `processingStart`
+timestamps. In most cases this will be the FID value; however, not all
+`first-input` entries are valid for measuring FID.
+
+The following section lists the differences between what the API reports and how
+the metric is calculated.
+
+#### Differences between the metric and the API
+
+- The API will dispatch `first-input` entries for pages loaded
+  in a background tab but those pages should be ignored when calculating FID.
+- The API will also dispatch `first-input` entries if the page was backgrounded
+  prior to the first input occurring, but those pages should also be ignored
+  when calculating FID (inputs are only considered if the page was in the
+  foreground the entire time).
+- The API does not report `first-input` entries when the page is restored from
+  the [back/forward cache](/bfcache/#impact-on-core-web-vitals), but FID should
+  be measured in these cases since users experience them as distinct page
+  visits.
+- The API does not report inputs that occur within iframes but the metric does
+  as they are part of the user experience of the page. This can
+  [show as a difference between CrUX and RUM](/crux-and-rum-differences/#iframes).
+  To properly measure FID you should consider them. Sub-frames can use the API
+  to report their `first-input` entries to the parent frame for aggregation.
+
+Rather than memorizing all these subtle differences, developers can use the
+[`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) to
+measure FID, which handles these differences for you (where possible):
 
 ```js
-{% include 'content/metrics/first-hidden-time.njk' %}
-{% include 'content/metrics/send-to-analytics.njk' %}
-{% include 'content/metrics/performance-observer-try.njk' %}
-  function onFirstInputEntry(entry, po) {
-    // Only report FID if the page wasn't hidden prior to
-    // the entry being dispatched. This typically happens when a
-    // page is loaded in a background tab.
-    if (entry.startTime < firstHiddenTime) {
-      const fid = entry.processingStart - entry.startTime;
-
-      // Disconnect the observer.
-      po.disconnect();
-
-      // Report the FID value to an analytics endpoint.
-      sendToAnalytics({fid});
-    }
-  }
+import {onFID} from 'web-vitals';
 
-{% include 'content/metrics/performance-observer-init.njk' %}
-{% include 'content/metrics/performance-observer-catch.njk' %}
+// Measure and log FID as soon as it's available.
+onFID(console.log);
 ```
 
+You can refer to [the source code for
+`onFID()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts)
+for a complete example of how to measure FID in JavaScript.
+
+{% Aside %}
+  In some cases (such as cross-origin iframes) it's not possible to measure FID
+  in JavaScript. See the
+  [limitations](https://github.com/GoogleChrome/web-vitals#limitations) section
+  of the `web-vitals` library for details.
+{% endAside %}
+
 ### Analyzing and reporting on FID data
 
 Due to the expected variance in FID values, it's critical that when reporting on
@@ -320,21 +349,6 @@ percentile of mobile users.
 
 ## How to improve FID
 
-To learn how to improve FID for a specific site, you can run a Lighthouse
-performance audit and pay attention to any specific
-[opportunities](/lighthouse-performance/#opportunities) the audit suggests.
-
-While FID is a field metric (and Lighthouse is a lab metric tool), the guidance
-for improving FID is the same as that for improving the lab metric [Total
-Blocking Time (TBT)](/tbt/).
-
-For a deep dive on how to improve FID, see [Optimize FID](/optimize-fid/). For
-additional guidance on individual performance techniques that can also improve
-FID, see:
-
-- [Reduce the impact of third-party code](/third-party-summary/)
-- [Reduce JavaScript execution time](/bootup-time/)
-- [Minimize main thread work](/mainthread-work-breakdown/)
-- [Keep request counts low and transfer sizes small](/resource-summary/)
+A full guide on [optimizing FID](/optimize-fid/) is available to guide you through techniques to improve this metric.
 
 {% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/en/metrics/index.md b/src/site/content/en/metrics/index.md
new file mode 100644
index 00000000000..48f4e67e5ac
--- /dev/null
+++ b/src/site/content/en/metrics/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2019-11-07
+pathName: metrics
+---
\ No newline at end of file
diff --git a/src/site/content/en/metrics/index.njk b/src/site/content/en/metrics/index.njk
deleted file mode 100644
index c9dca62648e..00000000000
--- a/src/site/content/en/metrics/index.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2019-11-07
-pathName: metrics
-tags:
-  - metrics
----
\ No newline at end of file
diff --git a/src/site/content/en/metrics/inp/index.md b/src/site/content/en/metrics/inp/index.md
new file mode 100644
index 00000000000..ee4599a2b90
--- /dev/null
+++ b/src/site/content/en/metrics/inp/index.md
@@ -0,0 +1,184 @@
+---
+layout: post
+title: Interaction to Next Paint (INP)
+authors:
+  - jlwagner
+date: 2022-05-06
+updated: 2023-06-28
+description: |
+  This post introduces the Interaction to Next Paint (INP) metric and explains how it works, how to measure it, and offers suggestions on how to improve it.
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% BrowserCompat 'api.PerformanceEventTiming.interactionId' %}
+
+{% Aside %}
+Interaction to Next Paint (INP) is a [pending](/vitals/#pending) Core Web Vital metric that will [replace First Input Delay (FID)](/inp-cwv/) in March 2024. INP assesses responsiveness using data from the Event Timing API. When an interaction causes a page to become unresponsive, that is a poor user experience. INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. A low INP means the page was consistently able to respond quickly to all&mdash;or the vast majority&mdash;of user interactions.
+{% endAside %}
+
+Chrome usage data shows that 90% of a user's time on a page is spent _after_ it loads, Thus, careful measurement of responsiveness _throughout_ the page lifecycle is important. This is what the INP metric assesses.
+
+Good responsiveness means that a page responds quickly to interactions made with it. When a page responds to an interaction, the result is _visual feedback_, which is presented by the browser in the next frame the browser presents. Visual feedback tells you if, for example, an item you add to an online shopping cart is indeed being added, whether a mobile navigation menu has opened, if a login form's contents are being authenticated by the server, and so forth.
+
+Some interactions will naturally take longer than others, but for especially complex interactions, it's important to quickly present some initial visual feedback as a cue to the user that something is _happening_.  The time until the next paint is the earliest opportunity to do this. Therefore, the intent of INP is not to measure all the eventual effects of the interaction (such as network fetches and UI updates from other asynchronous operations), but the time in which the _next_ paint is being blocked. By delaying visual feedback, you may be giving users the impression that the page is not responding to their actions.
+
+The goal of INP is to ensure the time from when a user initiates an interaction until the next frame is painted is as short as possible, for all or most interactions the user makes.
+
+In the following video, the example on the right gives immediate visual feedback that an accordion is opening. It also demonstrates how poor responsiveness can cause multiple unintended responses to input because the user thinks the experience is broken.
+
+<style>
+  #responsiveness-video {
+    height: auto;
+    aspect-ratio: 1445 / 370;
+  }
+</style>
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WSmcjiQC4lyLxGoES4dd.mp4", autoplay="true", loop="true", muted="true", playsinline="true", width="1445", height="370", id="responsiveness-video" %}
+  <figcaption>
+    An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.
+  </figcaption>
+</figure>
+
+This article explains how INP works, how to measure it, and points to resources for improving it.
+
+## What is INP?
+
+INP is a metric that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, ignoring outliers.
+
+{% Details %}
+
+{% DetailsSummary %}
+A note on how INP is calculated
+{% endDetailsSummary %}
+
+As stated above, INP is calculated by observing all the interactions made with a page. For most sites the interaction with the worst latency is reported as INP. However, for pages with large numbers of interactions, random hiccups can result in an unusually high interaction on an otherwise responsive site. The more interactions, the more likely this is to happen. To counter this, and give a better measure of the actual responsiveness for those types of pages, we ignore one highest interaction for every 50 interactions. The vast majority of page experiences do not have over 50 interactions so will report the worst interaction. The 75th percentile of all the page views is then reported as usual, which further removes outliers to give a value that the vast majority of users experience or better.
+{% endDetails %}
+
+An _interaction_ is a group of event handlers that fire during the same logical user gesture. For example, "tap" interactions on a touchscreen device include multiple events, such as `pointerup`, `pointerdown`, and `click`. An interaction can be driven by JavaScript, CSS, built-in browser controls (such as form elements), or a combination thereof.
+
+An interaction's latency consists of the single longest [duration](https://w3c.github.io/event-timing/#ref-for-dom-performanceentry-duration%E2%91%A1:~:text=The%20Event%20Timing%20API%20exposes%20a%20duration%20value%2C%20which%20is%20meant%20to%20be%20the%20time%20from%20when%20user%20interaction%20occurs%20(estimated%20via%20the%20Event%27s%20timeStamp)%20to%20the%20next%20time%20the%20rendering%20of%20the%20Event%27s%20relevant%20global%20object%27s%20associated%20Document%E2%80%99s%20is%20updated) of a group of event handlers that drives the interaction, from the time the user begins the interaction to the moment the next frame is presented with visual feedback.
+
+{% Aside 'important' %}
+For more details on how INP is measured, read the ["What's in an interaction?"](#whats-in-an-interaction) section.
+{% endAside %}
+
+### What is a good INP score?
+
+Pinning labels such as "good" or "poor" on a responsiveness metric is difficult. On one hand, you want to encourage development practices that prioritize good responsiveness. On the other hand, you must account for the fact that there's considerable variability in the capabilities of devices people use to set achievable development expectations.
+
+To ensure you're delivering user experiences with good responsiveness, a good threshold to measure is the **75th percentile** of page loads recorded in the field, segmented across mobile and desktop devices:
+
+- An INP below or at **200 milliseconds** means that your page has **good responsiveness**.
+- An INP above **200 milliseconds** and below or at **500 milliseconds** means that your page's responsiveness **needs improvement**.
+- An INP above **500 milliseconds** means that your page has **poor responsiveness**.
+
+<style>
+  .inp-mobile {
+    display: inline;
+  }
+
+  .inp-desktop {
+    display: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .inp-mobile {
+      display: none;
+    }
+
+    .inp-desktop {
+      display: inline;
+    }
+  }
+</style>
+<figure>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-mobile" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 296.6 220.2" style="enable-background:new 0 0 296.6 220.2" xml:space="preserve"><style>.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}</style><path class="st0" d="M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z"/><path class="st1" d="M0 137.1h96v38.4H0v-38.4z"/><path class="st2" d="M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z"/><path class="st3" d="M96 137.1h105.6v38.4H96v-38.4z"/><path class="st2" d="M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z"/><path class="st4" d="M200.6 137.1h96v38.4h-96v-38.4z"/><path class="st2" d="M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z"/></svg>
+  <svg title="A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page's responsiveness needs improvement. Anything over 500 milliseconds means that a page's responsiveness is poor." class="inp-desktop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 658.4 113.6" style="enable-background:new 0 0 658.4 113.6" xml:space="preserve"><style>.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}</style><path class="st0" d="M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z"/><path class="st1" d="M303.2 14.9h115.2v43.2H303.2V14.9z"/><path class="st2" d="M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z"/><path class="st3" d="M418.4 14.9h124.8v43.2H418.4V14.9z"/><path class="st2" d="M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z"/><path class="st4" d="M543.2 14.9h115.2v43.2H543.2V14.9z"/><path class="st2" d="M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z"/></svg>
+</figure>
+
+### What's in an interaction?
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ng0j5yaGYZX9Bm3VQ70c.svg", alt="A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.", width="736", height="193.81333333333" %}
+  <figcaption>
+    The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.
+  </figcaption>
+</figure>
+
+The primary driver of interactivity is often JavaScript, though browsers do provide interactivity through controls _not_ powered by JavaScript, such as checkboxes, radio buttons, and controls powered by CSS.
+
+As far as INP goes, **only the following interaction types are observed:**
+
+- Clicking with a mouse.
+- Tapping on a device with a touchscreen.
+- Pressing a key on either a physical or onscreen keyboard.
+
+{% Aside 'important' %}
+Hovering and scrolling does not factor into INP. However, scrolling with the keyboard (space bar, page up, page down, and so forth) involves a keystroke, which may trigger other events that INP _does_ measure. Any resulting scrolling is _not_ factored into how INP is calculated.
+{% endAside %}
+
+Interactions happen in the main document or in iframes embedded in the document&mdash;for example clicking play on an embedded video. End users will not be aware what is in an iframe or not. Therefore, INP within iframes are needed to measure the user experience for the top level page. Note JavaScript Web APIs will not have access to the iframe contents so may not be able to measure INP within an iframe and this will [show as a difference between CrUX and RUM](/crux-and-rum-differences/#iframes).
+
+Interactions may consist of two parts, each with multiple events. For example, a keystroke consists of the `keydown`, `keypress`, and `keyup` events. Tap interactions contain `pointerup` and `pointerdown` events. The event with the longest duration within the interaction is chosen as the interaction's latency.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/vNosnKDYgBRnFmEvwm0c.svg", alt="A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.", width="736", height="164.37333333333" %}
+  <figcaption>
+    A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.
+  </figcaption>
+</figure>
+
+INP is calculated when the user leaves the page, resulting in a single value that is representative of the page's overall responsiveness throughout the entire page's lifecycle. **A low INP means that a page is reliably responsive to user input.**
+
+### How is INP different from First Input Delay (FID)?
+
+Where INP considers _all_ page interactions, [First Input Delay (FID)](/fid/) only accounts for the _first_ interaction. It also only measures the first interaction's _input delay_, not the time it takes to run event handlers, or the delay in presenting the next frame.
+
+Given that FID is also a [load responsiveness metric](/user-centric-performance-metrics/#types-of-metrics), the rationale behind it is that if the first interaction made with a page in the loading phase has little to no perceptible input delay, the page has made a good first impression.
+
+INP is more than about first impressions. By sampling all interactions, responsiveness can be assessed comprehensively, making INP a more reliable indicator of overall responsiveness than FID.
+
+### What if no INP value is reported?
+
+It's possible that a page can return no INP value. This can happen for a number of reasons:
+
+- The page was loaded, but the user never clicked, tapped, or pressed a key on their keyboard.
+- The page was loaded, but the user interacted with the page using gestures that did not involve clicking, tapping, or using the keyboard. For example, scrolling or hovering over elements does not factor into how INP is calculated.
+- The page is being accessed by a bot such as a search crawler or headless browser that has not been scripted to interact with the page.
+
+## How to measure INP
+
+INP can be measured both in [the field](/lab-and-field-data-differences/#field-data) and in [the lab](/lab-and-field-data-differences/#lab-data) through a variety of tools.
+
+{% Aside 'important' %}
+The best way to measure your website's INP is by gathering metrics from actual users in the field. If you're accustomed to relying on lab data for assessing performance, take some time to read [Why lab and field data can be different (and what to do about it)](/lab-and-field-data-differences/).
+{% endAside %}
+
+### In the field
+
+Ideally, your journey in optimizing INP will start with field data. At its best, field data from Real User Monitoring (RUM) will give you not only a page's INP value, but also contextual data that highlights what specific interaction was responsible for the INP value itself, whether the interaction occurred during or after page load, the type of interaction (click, keypress, or tap), and other valuable information.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Find slow interactions in the field](/find-slow-interactions-in-the-field/).
+{% endAside %}
+
+If your website qualifies for inclusion in the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux/), you can quickly get field data for INP [via CrUX in PageSpeed Insights](/find-slow-interactions-in-the-field/#get-field-data-quickly-with-crux) (and other Core Web Vitals). At a minimum, you can get an origin-level picture of your website's INP, but in some cases, you can also get page-level data as well.
+
+However, while CrUX is useful to tell you that there _is_ a problem at a high level, it often doesn't provide enough detail to help fully understand what the problem is. A RUM solution can help you drill down into more detail as to the pages, users or user interactions which are experiencing slow interactions. Being able to attribute INP to individual interactions avoids guesswork and wasted effort.
+
+### In the lab
+
+Optimally, you'll want to start testing in the lab once you have field data that suggests you have slow interactions. In the absence of field data, however, there are some strategies for reproducing slow interactions in the lab. Such strategies include following common user flows and testing interactions along the way, as well as interacting with the page during load—when the main thread is often busiest—in order to surface slow interactions during that crucial part of the user experience.
+
+{% Aside 'objective' %}
+**Read to learn more:**&nbsp;[Diagnose slow interactions in the lab](/diagnose-slow-interactions-in-the-lab/).
+{% endAside %}
+
+## How to improve INP
+
+A [collection of guides on optimizing INP](/optimize-inp/) is available to guide you through the process of identifying slow interactions in the field and using lab data to drill down and optimize them in a variety of ways.
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/en/metrics/lcp/hero.jpg b/src/site/content/en/metrics/lcp/hero.jpg
deleted file mode 100644
index b72754e7243..00000000000
Binary files a/src/site/content/en/metrics/lcp/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/metrics/lcp/index.md b/src/site/content/en/metrics/lcp/index.md
index 777cf933525..e41251b0de5 100644
--- a/src/site/content/en/metrics/lcp/index.md
+++ b/src/site/content/en/metrics/lcp/index.md
@@ -3,8 +3,9 @@ layout: post
 title: Largest Contentful Paint (LCP)
 authors:
   - philipwalton
+  - tunetheweb
 date: 2019-08-08
-updated: 2020-06-17
+updated: 2023-08-04
 description: |
   This post introduces the Largest Contentful Paint (LCP) metric and explains
   how to measure it
@@ -13,8 +14,10 @@ tags:
   - metrics
 ---
 
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
 {% Aside %}
-  Largest Contentful Paint (LCP) is an important, user-centric metric for
+  Largest Contentful Paint (LCP) is an important, [stable](/vitals/#stable) Core Web Vital metric for
   measuring [perceived load
   speed](/user-centric-performance-metrics/#types-of-metrics) because it marks
   the point in the page load timeline when the page's main content has likely
@@ -25,25 +28,9 @@ tags:
 Historically, it's been a challenge for web developers to measure how quickly
 the main content of a web page loads and is visible to users.
 
-<style>
-#web-vitals {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-#web-vitals > img {
-  align-self: center;
-}
-@media (min-width: 865px) {
-  #web-vitals {
-    flex-direction: row;
-  }
-}
-</style>
-
 Older metrics like
-[load](https://developer.mozilla.org/en-US/docs/Web/Events/load) or
-[DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded)
+[load](https://developer.mozilla.org/docs/Web/Events/load) or
+[DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded)
 are not good because they don't necessarily correspond to what the user sees on
 their screen. And newer, user-centric performance metrics like [First Contentful
 Paint (FCP)](/fcp/) only capture the very beginning of the loading experience.
@@ -51,7 +38,7 @@ If a page shows a splash screen or displays a loading indicator, this moment is
 not very relevant to the user.
 
 In the past we've recommended performance metrics like [First Meaningful Paint
-(FMP)](/first-meaningful-paint/) and [Speed Index (SI)](/speed-index/) (both
+(FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) and [Speed Index (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) (both
 available in Lighthouse) to help capture more of the loading experience after
 the initial paint, but these metrics are complex, hard to explain, and often
 wrong&mdash;meaning they still do not identify when the main content of the page
@@ -66,23 +53,32 @@ of a page is loaded is to look at when the largest element was rendered.
 
 The Largest Contentful Paint (LCP) metric reports the render time of the largest
 [image or text block](#what-elements-are-considered) visible within the
-viewport.
-
-<picture>
-  <source srcset="../vitals/lcp_8x2.svg" media="(min-width: 640px)">
-  <img class="w-screenshot w-screenshot--filled"
-      src="../vitals/lcp_4x3.svg"
-      alt="Good LCP values are 2.5 seconds, poor values are greater than 4.0
-            seconds and anything in between needs improvement">
-</picture>
+viewport, relative to when the page [first started
+loading](https://w3c.github.io/hr-time/#timeorigin-attribute).
 
 ### What is a good LCP score?
 
 To provide a good user experience, sites should strive to have Largest
-Contentful Paint occur within the first **2.5 seconds** of the page starting to
-load. To ensure you're hitting this target for most of your users, a good
-threshold to measure is the **75th percentile** of page loads, segmented across
-mobile and desktop devices.
+Contentful Paint of **2.5 seconds** or less. To ensure you're hitting this
+target for most of your users, a good threshold to measure is the **75th
+percentile** of page loads, segmented across mobile and desktop devices.
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg",
+        alt="Good LCP values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
 
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,
@@ -96,30 +92,38 @@ As currently specified in the [Largest Contentful Paint
 API](https://wicg.github.io/largest-contentful-paint/), the types of elements
 considered for Largest Contentful Paint are:
 
-* `<img>` elements
-* `<image>` elements inside an `<svg>` element
-* `<video>` elements (the poster image is used)
-* An element with a background image loaded via the
-  [`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/url()) function
+- `<img>` elements
+- `<image>` elements inside an `<svg>` element
+- `<video>` elements with a poster image (the poster image load time is used)
+- An element with a background image loaded via the
+  [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) function
   (as opposed to a
-  [CSS gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients))
-* [Block-level](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)
+  [CSS gradient](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients))
+- [Block-level](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)
   elements containing text nodes or other inline-level text elements children.
+- The first frame painted for autoplaying `<video>` elements (as of [August 2023](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/lcp.md))
+- The first frame of an animated image format, such as animated GIFs (as of [August 2023](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/lcp.md))
+
+As well as only considering some elements, certain heurisitics are applied to exclude certain elements that are likely to be seen as "non-contentful" to users. For Chromium-based browsers, these include:
+
+- Elements with an opacity of 0, that are invisible to the user
+- Elements that cover the full viewport, that are likely considered as background rather than content
+- Placeholder images or other images with a low entropy, that likely do not reflect the true content of the page
 
-Note, restricting the elements to this limited set was intentional in order to
-keep things simple in the beginning. Additional elements (e.g. `<svg>`,
-`<video>`) may be added in the future as more research is conducted.
+Browsers are likely to continue to improve these heuristics to ensure we match user expectations of what the largest _contentful_ element is.
+
+These "contentful" heuristics may differ from those used by [First Contentful Paint (FCP)](/fcp/), which may consider some of these elements, such as placeholder images or full viewport images, even if they are ineligible to be LCP candidates. Despite both using "contentful" in their name, the aim of these metrics is different. FCP measures when _any content_ is painted to screen and LCP when the _main content_ is painted so LCP is intented to be more selective.
 
 ### How is an element's size determined?
 
 The size of the element reported for Largest Contentful Paint is typically the
 size that's visible to the user within the viewport. If the element extends
 outside of the viewport, or if any of the element is clipped or has non-visible
-[overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow), those
+[overflow](https://developer.mozilla.org/docs/Web/CSS/overflow), those
 portions do not count toward the element's size.
 
 For image elements that have been resized from their [intrinsic
-size](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size), the
+size](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size), the
 size that gets reported is either the visible size or the intrinsic size,
 whichever is smaller. For example, images that are shrunk down to a much
 smaller than their intrinsic size will only report the size they're displayed
@@ -140,7 +144,7 @@ considered.
   In [spec
   terms](https://wicg.github.io/element-timing/#set-of-owned-text-nodes):
   each text node belongs to the element that generates its [containing
-  block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
+  block](https://developer.mozilla.org/docs/Web/CSS/Containing_block).
 {% endAside %}
 
 ### When is largest contentful paint reported?
@@ -149,20 +153,25 @@ Web pages often load in stages, and as a result, it's possible that the largest
 element on the page might change.
 
 To handle this potential for change, the browser dispatches a
-[`PerformanceEntry`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry)
+[`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)
 of type `largest-contentful-paint` identifying the largest contentful element
 as soon as the browser has painted the first frame. But then, after rendering
 subsequent frames, it will dispatch another
-[`PerformanceEntry`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry)
+[`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)
 any time the largest contentful element changes.
 
-For example, on a page with text and a hero image the browser may initially just render the text—at which point the browser would dispatch a `largest-contentful-paint` entry whose `element` property would likely reference a `<p>` or `<h1>`. Later, once the hero image finishes loading, a second `largest-contentful-paint` entry would be dispatched and its `element` property would reference the `<img>`.
+For example, on a page with text and a hero image the browser may initially just
+render the text&mdash;at which point the browser would dispatch a
+`largest-contentful-paint` entry whose `element` property would likely reference
+a `<p>` or `<h1>`. Later, once the hero image finishes loading, a second
+`largest-contentful-paint` entry would be dispatched and its `element` property
+would reference the `<img>`.
 
 It's important to note that an element can only be considered the largest
 contentful element once it has rendered and is visible to the user. Images that
 have not yet loaded are not considered "rendered". Neither are text nodes using
 web fonts during the [font block
-period](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#The_font_display_timeline).
+period](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline).
 In such cases a smaller element may be reported as the largest contentful
 element, but as soon as the larger element finishes rendering, it'll be
 reported via another  `PerformanceEntry` object.
@@ -172,17 +181,18 @@ the DOM as new content becomes available. If any of these new elements is
 larger than the previous largest contentful element, a new `PerformanceEntry`
 will also be reported.
 
-If a page removes an element from the DOM, that element will no longer be
-considered. Similarly, if an element's associated image resource changes (e.g.
-changing `img.src` via JavaScript), then that element will stop being considered
-until the new image loads.
+If an element that is currently the largest contentful element is removed from
+the viewport (or even removed from the DOM), it will remain the largest
+contentful element unless a larger element is rendered.
 
 {% Aside %}
-  In the future, elements removed from the DOM may still be considered as LCP
-  candidates. [Research is currently being
-  done](https://github.com/WICG/largest-contentful-paint/issues/41#issuecomment-583589387)
-  to assess the impact of this change. You can follow the metrics
-  [CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog) to stay up-to-date.
+  Prior to Chrome 88, removed elements were not considered as largest contentful
+  elements, and removing the current candidate would trigger a new
+  `largest-contentful-paint` entry to be dispatched. However, due to popular UI
+  patterns such as image carousels that often removed DOM elements, the metric
+  was updated to more accurately reflect what users experience. See the
+  [CHANGELOG](https://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/2020_11_lcp.md)
+  for more details.
 {% endAside %}
 
 The browser will stop reporting new entries as soon as the user interacts with
@@ -193,23 +203,26 @@ For analysis purposes, you should only report the most recently dispatched
 `PerformanceEntry` to your analytics service.
 
 {% Aside 'caution' %}
-  Since users can open pages in a background tab, it's possible that the largest
-  contentful paint will not happen until the user focuses the tab, which can be
-  much later than when they first loaded it.
+  Since users can open pages in a background tab, it's possible that
+  `largest-contentful-paint` entries will not be dispatched until the user
+  focuses the tab, which can be much later than when they first loaded it.
+
+  Google tools that measure LCP do not report this metric if the page was
+  loaded in the background, as it does not reflect the user-perceived load time.
 {% endAside %}
 
 #### Load time vs. render time
 
 For security reasons, the render timestamp of images is not exposed for
 cross-origin images that lack the
-[`Timing-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin)
+[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin)
 header. Instead, only their load time is exposed (since this is already exposed
 via many other web APIs).
 
 The [usage example](#measure-lcp-in-javascript)
 below shows how to handle elements whose render time is not available. But,
 when possible, it's always recommended to set the
-[`Timing-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin)
+[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin)
 header, so your metrics will be more accurate.
 
 ### How are element layout and size changes handled?
@@ -224,17 +237,14 @@ on-screen may not be reported. It also means elements initially rendered in the
 viewport that then get pushed down, out of view will still report their
 initial, in-viewport size.
 
-However, (as mentioned above) an element will be removed from consideration if
-it's removed from the DOM or if its associated image resource changes.
-
 ### Examples
 
 Here are some examples of when the Largest Contentful Paint occurs on a few
 popular websites:
 
-![Largest Contentful Paint timeline from cnn.com](lcp-cnn-filmstrip.png)
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="Largest Contentful Paint timeline from cnn.com", width="800", height="311" %}
 
-![Largest Contentful Paint timeline from techcrunch.com](lcp-techcrunch-filmstrip.png)
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="Largest Contentful Paint timeline from techcrunch.com", width="800", height="311" %}
 
 In both of the timelines above, the largest element changes as content loads.
 In the first example, new content is added to the DOM and that changes what
@@ -245,9 +255,9 @@ While it's often the case that late-loading content is larger than content
 already on the page, that's not necessarily the case. The next two examples
 show the Largest Contentful Paint occurring before the page fully loads.
 
-![Largest Contentful Paint timeline from instagram.com](lcp-instagram-filmstrip.png)
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="Largest Contentful Paint timeline from instagram.com", width="800", height="311" %}
 
-![Largest Contentful Paint timeline from google.com](lcp-google-filmstrip.png)
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="Largest Contentful Paint timeline from google.com", width="800", height="311" %}
 
 In the first example, the Instagram logo is loaded relatively early and it
 remains the largest element even as other content is progressively shown. In
@@ -272,91 +282,91 @@ available in the following tools:
 ### Field tools
 
 - [Chrome User Experience
-  Report](https://developers.google.com/web/tools/chrome-user-experience-report)
-- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
+  Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [Search Console (Core Web Vitals
   report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
 
 ### Lab tools
 
-- [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
-- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
 - [WebPageTest](https://webpagetest.org/)
 
 ### Measure LCP in JavaScript
 
-The easiest way to measure LCP (as well as all Web Vitals [field
-metrics](/user-centric-performance-metrics/#in-the-field) is with the [`web-vitals` JavaScript
-library](https://github.com/GoogleChrome/web-vitals), which wraps all the
-complexity of manually measuring LCP into a single function:
+To measure LCP in JavaScript, you can use the [Largest Contentful Paint
+API](https://wicg.github.io/largest-contentful-paint/). The following example
+shows how to create a
+[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
+that listens for `largest-contentful-paint` entries and logs them to the
+console.
 
 ```js
-import {getLCP} from 'web-vitals';
-
-// Measure and log the current LCP value,
-// any time it's ready to be reported.
-getLCP(console.log);
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
 ```
 
-To manually measure LCP, you can use the [Largest Contentful Paint
-API](https://wicg.github.io/largest-contentful-paint/). The following example
-shows how to create a
-[`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
-that listens for `largest-contentful-paint` entries and logs the LCP value to
-the console:
+{% Aside 'warning' %}
+
+  This code shows how to log `largest-contentful-paint` entries to the console,
+  but measuring LCP in JavaScript is more complicated. See below for details:
+
+{% endAside %}
 
-{% set entryType = 'largest-contentful-paint' %}
-{% set entryCallback = 'updateLCP' %}
+In the above example, each logged `largest-contentful-paint` entry represents
+the current LCP candidate. In general, the `startTime` value of the last entry
+emitted is the LCP value&mdash;however, that is not always the case. Not all
+`largest-contentful-paint` entries are valid for measuring LCP.
+
+The following section lists the differences between what the API reports and how
+the metric is calculated.
+
+#### Differences between the metric and the API
+
+- The API will dispatch `largest-contentful-paint` entries for pages loaded in a
+  background tab, but those pages should be ignored when calculating LCP.
+- The API will continue to dispatch `largest-contentful-paint` entries after a
+  page has been backgrounded, but those entries should be ignored when
+  calculating LCP (elements may only be considered if the page was in the
+  foreground the entire time).
+- The API does not report `largest-contentful-paint` entries when the page is
+  restored from the [back/forward cache](/bfcache/#impact-on-core-web-vitals),
+  but LCP should be measured in these cases since users experience them as
+  distinct page visits.
+- The API does not consider elements within iframes but the metric does as they
+  are part of the user experience of the page. In pages with an LCP within an
+  iframe—for example a poster image on an embedded video—this will
+  [show as a difference between CrUX and RUM](/crux-and-rum-differences/#iframes).
+  To properly measure LCP you should consider them. Sub-frames can use the API
+  to report their `largest-contentful-paint` entries to the parent frame for
+  aggregation.
+
+Rather than memorizing all these subtle differences, developers can use the
+[`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) to
+measure LCP, which handles these differences for you (where possible):
 
 ```js
-{% include 'content/metrics/first-hidden-time.njk' %}
-{% include 'content/metrics/send-to-analytics.njk' %}
-{% include 'content/metrics/performance-observer-try.njk' %}
-  // Create a variable to hold the latest LCP value (since it can change).
-  let lcp;
-
-  function updateLCP(entry) {
-    // Only include an LCP entry if the page wasn't hidden prior to
-    // the entry being dispatched. This typically happens when a page is
-    // loaded in a background tab.
-    if (entry.startTime < firstHiddenTime) {
-      // NOTE: the `startTime` value is a getter that returns the entry's
-      // `renderTime` value, if available, or its `loadTime` value otherwise.
-      // The `renderTime` value may not be available if the element is an image
-      // that's loaded cross-origin without the `Timing-Allow-Origin` header.
-      lcp = entry.startTime;
-    }
-  }
+import {onLCP} from 'web-vitals';
 
-{% include 'content/metrics/performance-observer-init.njk' %}
-
-  // Log the final LCP score once the
-  // page's lifecycle state changes to hidden.
-  addEventListener('visibilitychange', function fn(event) {
-    if (document.visibilityState === 'hidden') {
-      removeEventListener('visibilitychange', fn, true);
-
-      // Force any pending records to be dispatched and disconnect the observer.
-      po.takeRecords().forEach((entry) => updateLCP(entry, po));
-      po.disconnect();
-
-      // If LCP is set, report it to an analytics endpoint.
-      if (lcp) {
-        sendToAnalytics({lcp});
-      }
-    }
-  }, true);
-} catch (e) {
-  // Do nothing if the browser doesn't support this API.
-}
+// Measure and log LCP as soon as it's available.
+onLCP(console.log);
 ```
 
+You can refer to [the source code for
+`onLCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts)
+for a complete example of how to measure LCP in JavaScript.
+
 {% Aside %}
-  LCP should not be reported if the page was loaded in a background
-  tab. The above code partially addresses this, but it's not perfect since the
-  page could have been hidden and then shown prior to this code running. A
-  solution to this problem is being discussed in the [Page Visibility API
-  spec](https://github.com/w3c/page-visibility/issues/29)
+  In some cases (such as cross-origin iframes) it's not possible to measure LCP
+  in JavaScript. See the
+  [limitations](https://github.com/GoogleChrome/web-vitals#limitations) section
+  of the `web-vitals` library for details.
 {% endAside %}
 
 ### What if the largest element isn't the most important?
@@ -369,32 +379,10 @@ the article on [custom metrics](/custom-metrics/#element-timing-api).
 
 ## How to improve LCP
 
-LCP is primarily affected by four factors:
-
-* Slow server response times
-* Render-blocking JavaScript and CSS
-* Resource load times
-* Client-side rendering
-
-For a deep dive on how to improve LCP, see [Optimize
-LCP](/optimize-lcp/). For additional guidance on individual
-performance techniques that can also improve LCP, see:
-
-* [Apply instant loading with the PRPL
-  pattern](/apply-instant-loading-with-prpl)
-* [Optimizing the Critical Rendering
-  Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
-* [Optimize your CSS](/fast#optimize-your-css)
-* [Optimize your Images](/fast#optimize-your-images)
-* [Optimize web Fonts](/fast#optimize-web-fonts)
-* [Optimize your JavaScript](/fast#optimize-your-javascript) (for
-  client-rendered sites)
+A full guide on [optimizing LCP](/optimize-lcp/) is available to guide you through the process of identifying LCP timings in the field and using lab data to drill down and optimize them.
 
 ## Additional resources
 
-- [Lessons learned from performance monitoring in
-  Chrome](https://youtu.be/ctavZT87syI) by [Annie
-  Sullivan](https://anniesullie.com/) at
-  [performance.now()](https://perfnow.nl/) (2019)
+- [Lessons learned from performance monitoring in Chrome](https://youtu.be/ctavZT87syI) by [Annie Sullivan](https://anniesullie.com/) at [performance.now()](https://perfnow.nl/) (2019)
 
 {% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/en/metrics/lcp/lcp-cnn-filmstrip.png b/src/site/content/en/metrics/lcp/lcp-cnn-filmstrip.png
deleted file mode 100644
index ac995f4d911..00000000000
Binary files a/src/site/content/en/metrics/lcp/lcp-cnn-filmstrip.png and /dev/null differ
diff --git a/src/site/content/en/metrics/lcp/lcp-google-filmstrip.png b/src/site/content/en/metrics/lcp/lcp-google-filmstrip.png
deleted file mode 100644
index e6f28d24f8a..00000000000
Binary files a/src/site/content/en/metrics/lcp/lcp-google-filmstrip.png and /dev/null differ
diff --git a/src/site/content/en/metrics/lcp/lcp-instagram-filmstrip.png b/src/site/content/en/metrics/lcp/lcp-instagram-filmstrip.png
deleted file mode 100644
index b48ca49e50d..00000000000
Binary files a/src/site/content/en/metrics/lcp/lcp-instagram-filmstrip.png and /dev/null differ
diff --git a/src/site/content/en/metrics/lcp/lcp-techcrunch-filmstrip.png b/src/site/content/en/metrics/lcp/lcp-techcrunch-filmstrip.png
deleted file mode 100644
index 31555d8b964..00000000000
Binary files a/src/site/content/en/metrics/lcp/lcp-techcrunch-filmstrip.png and /dev/null differ
diff --git a/src/site/content/en/metrics/tbt/index.md b/src/site/content/en/metrics/tbt/index.md
index 3f548cc5696..90df8d20d11 100644
--- a/src/site/content/en/metrics/tbt/index.md
+++ b/src/site/content/en/metrics/tbt/index.md
@@ -4,7 +4,7 @@ title: Total Blocking Time (TBT)
 authors:
   - philipwalton
 date: 2019-11-07
-updated: 2020-06-15
+updated: 2022-05-11
 description: |
   This post introduces the Total Blocking Time (TBT) metric and explains
   how to measure it
@@ -38,7 +38,7 @@ because the browser cannot interrupt a task that's in progress. So in the event
 that a user _does_ interact with the page in the middle of a long task, the
 browser must wait for the task to finish before it can respond.
 
-If the task is long enough (e.g. anything above 50 ms), it's likely that the
+If the task is long enough (anything above 50 ms), it's likely that the
 user will notice the delay and perceive the page as sluggish or janky.
 
 The _blocking time_ of a given long task is its duration in excess of 50 ms. And
@@ -48,14 +48,13 @@ long task that occurs between FCP and TTI.
 For example, consider the following diagram of the browser's main thread during
 page load:
 
-[![A tasks timeline on the main thread](tbt-all-tasks.svg)](tbt-all-tasks.svg)
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="A tasks timeline on the main thread", width="800", height="156", linkTo=true %}
 
 The above timeline has five tasks, three of which are Long Tasks because their
 duration exceeds 50 ms. The next diagram shows the blocking time for each of the
 long tasks:
 
-[![A tasks timeline on the main thread showing blocking
-time](tbt-blocking-time.svg)](tbt-blocking-time.svg)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="A tasks timeline on the main thread showing blocking time", width="800", height="156", linkTo=true %}
 
 So while the total time spent running tasks on the main thread is 560 ms, only
 345 ms of that time is considered blocking time.
@@ -117,41 +116,41 @@ value in the second case quantifies the worse experience.
 TBT is a metric that should be measured [in the
 lab](/user-centric-performance-metrics/#in-the-lab). The best way to measure TBT is to run a
 Lighthouse performance audit on your site. See the [Lighthouse documentation on
-TBT](/lighthouse-total-blocking-time) for usage details.
+TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/) for usage details.
 
 ### Lab tools
 
-* [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
-* [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
+* [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+* [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
 * [WebPageTest](https://www.webpagetest.org/)
 
 {% Aside %}
   While it is possible to measure TBT in the field, it's not recommended as user
   interaction can affect your page's TBT in ways that lead to lots of variance
   in your reports. To understand a page's interactivity in the field, you should
-  measure [First Input Delay (FID)](/fid/).
+  measure [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/).
 {% endAside %}
 
 ## What is a good TBT score?
 
 To provide a good user experience, sites should strive to have a Total Blocking
-Time of less than **300 milliseconds** when tested on **average mobile
+Time of less than **200 milliseconds** when tested on **average mobile
 hardware**.
 
 For details on how your page's TBT affects your Lighthouse performance score,
 see [How Lighthouse determines your TBT
-score](/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)
+score](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)
 
 ## How to improve TBT
 
 To learn how to improve TBT for a specific site, you can run a Lighthouse
 performance audit and pay attention to any specific
-[opportunities](/lighthouse-performance/#opportunities) the audit suggests.
+[opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) the audit suggests.
 
 To learn how to improve TBT in general (for any site), refer to the following
 performance guides:
 
-- [Reduce the impact of third-party code](/third-party-summary/)
-- [Reduce JavaScript execution time](/bootup-time/)
-- [Minimize main thread work](/mainthread-work-breakdown/)
-- [Keep request counts low and transfer sizes small](/resource-summary/)
+- [Reduce the impact of third-party code](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Reduce JavaScript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimize main thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Keep request counts low and transfer sizes small](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/en/metrics/tbt/tbt-all-tasks.svg b/src/site/content/en/metrics/tbt/tbt-all-tasks.svg
deleted file mode 100644
index e0514159f52..00000000000
--- a/src/site/content/en/metrics/tbt/tbt-all-tasks.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 863.9632545931759 168.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l863.96326 0l0 168.0l-863.96326 0l0 -168.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l863.96326 0l0 168.0l-863.96326 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.0 112.002625l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m48.0 112.002625l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.0 116.80263l768.3779 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m48.0 116.80263l762.3779 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m810.3779 118.45436l4.538147 -1.6517334l-4.538147 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.810764 25.60105l768.3779 0l0 28.787401l-768.3779 0z" fill-rule="evenodd"/><path fill="#000000" d="m328.65677 35.326l1.65625 7.71875l4.34375 -7.71875l1.609375 0l-1.640625 9.46875l-1.21875 0l0.640625 -3.75l0.78125 -3.8125l-4.296875 7.5625l-0.9375 0l-1.6875 -7.71875l-0.59375 4.09375l-0.625 3.625l-1.21875 0l1.640625 -9.46875l1.546875 0zm12.287231 9.46875q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm5.9282227 0.90625l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799988 2.5625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm11.245911 -1.703125l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm3.3824463 2.5625q0.921875 -1.0 2.125 -0.984375q0.984375 0.015625 1.453125 0.6875q0.484375 0.671875 0.375 1.875l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.078125 -0.03125 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.734375 -10.0l1.1875 0l-0.71875 3.8125zm9.356567 0.21875l-0.546875 -0.0625q-1.140625 0 -1.78125 1.03125l-0.875 5.0l-1.171875 0l1.21875 -7.046875l1.140625 0l-0.171875 0.8125q0.75 -0.96875 1.765625 -0.953125q0.203125 0 0.5625 0.09375l-0.140625 1.125zm2.9865417 6.09375q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm7.427002 6.1875q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm4.9907227 -2.625q0.125 -1.078125 0.578125 -1.9375q0.46875 -0.875 1.140625 -1.296875q0.6875 -0.4375 1.5 -0.40625q1.171875 0.015625 1.8125 0.859375l0.671875 -3.6875l1.171875 0l-1.734375 10.0l-1.0625 0l0.125 -0.75q-0.84375 0.90625 -2.0625 0.875q-0.96875 -0.015625 -1.5625 -0.75q-0.578125 -0.75 -0.625 -1.984375q-0.015625 -0.390625 0.046875 -0.921875zm1.125 0.671875q-0.015625 0.9375 0.328125 1.453125q0.359375 0.515625 1.03125 0.515625q1.015625 0.046875 1.8125 -1.015625l0.5625 -3.265625q-0.390625 -0.953125 -1.421875 -0.984375q-0.6875 -0.015625 -1.21875 0.421875q-0.53125 0.4375 -0.8125 1.234375q-0.28125 0.78125 -0.28125 1.640625zm12.261475 -5.890625l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm2.4605713 8.75l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799683 2.5625l-0.15625 0.78125q0.890625 -0.9375 2.140625 -0.90625q0.671875 0.015625 1.140625 0.3125q0.46875 0.28125 0.640625 0.8125q0.984375 -1.15625 2.328125 -1.125q1.0625 0.03125 1.5625 0.71875q0.5 0.671875 0.375 1.828125l-0.78125 4.625l-1.171875 0l0.765625 -4.640625q0.046875 -0.34375 0 -0.625q-0.125 -0.875 -1.15625 -0.890625q-0.640625 -0.015625 -1.171875 0.40625q-0.515625 0.40625 -0.671875 1.078125l-0.796875 4.671875l-1.1875 0l0.78125 -4.640625q0.09375 -0.71875 -0.21875 -1.109375q-0.296875 -0.390625 -0.9375 -0.40625q-1.09375 -0.015625 -1.75 1.015625l-0.890625 5.140625l-1.1875 0l1.234375 -7.046875l1.109375 0zm12.114075 7.171875q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm4.3957214 6.1875l-1.171875 0l1.71875 -10.0l1.1875 0l-1.734375 10.0zm3.2018738 0l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799988 2.5625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm7.9164734 7.171875q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm7.0376587 2.375q0.21875 -1.515625 0.796875 -2.9375q0.59375 -1.421875 1.4375 -2.421875q0.84375 -1.015625 1.890625 -1.53125l0.171875 0.8125q-1.03125 0.765625 -1.765625 2.0q-0.71875 1.21875 -1.125 2.90625q-0.390625 1.6875 -0.375 3.328125q0 1.34375 0.34375 2.359375q0.34375 1.03125 1.0 1.625l-0.28125 0.734375q-1.09375 -0.765625 -1.671875 -2.25q-0.578125 -1.46875 -0.515625 -3.375q0.015625 -0.625 0.09375 -1.1875l0 -0.0625zm6.9370728 -4.9375l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm5.4918213 8.75q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm9.006348 -1.0q0.09375 -0.734375 -0.796875 -1.03125l-1.234375 -0.359375q-1.546875 -0.53125 -1.484375 -1.765625q0.046875 -0.9375 0.84375 -1.53125q0.796875 -0.59375 1.890625 -0.578125q1.0625 0.015625 1.734375 0.625q0.671875 0.609375 0.640625 1.578125l-1.171875 0q0.015625 -0.53125 -0.328125 -0.859375q-0.34375 -0.328125 -0.921875 -0.34375q-0.609375 -0.015625 -1.046875 0.296875q-0.421875 0.296875 -0.484375 0.765625q-0.078125 0.609375 0.75 0.890625l0.59375 0.171875q1.203125 0.3125 1.703125 0.8125q0.515625 0.5 0.484375 1.234375q-0.046875 0.65625 -0.4375 1.15625q-0.390625 0.484375 -1.046875 0.75q-0.640625 0.25 -1.375 0.21875q-1.125 -0.015625 -1.859375 -0.65625q-0.71875 -0.640625 -0.6875 -1.640625l1.171875 0q0 0.59375 0.375 0.953125q0.390625 0.359375 1.046875 0.359375q0.640625 0.015625 1.109375 -0.265625q0.46875 -0.28125 0.53125 -0.78125zm4.901001 -1.34375l-0.9375 0.828125l-0.40625 2.421875l-1.1875 0l1.75 -10.0l1.171875 0l-1.046875 5.984375l0.734375 -0.734375l2.484375 -2.296875l1.53125 0l-3.234375 3.0l2.234375 4.046875l-1.296875 0l-1.796875 -3.25zm7.697998 -0.28125q0.125 -1.078125 0.578125 -1.9375q0.46875 -0.875 1.140625 -1.296875q0.6875 -0.4375 1.5 -0.40625q1.171875 0.015625 1.8125 0.859375l0.671875 -3.6875l1.171875 0l-1.734375 10.0l-1.0625 0l0.125 -0.75q-0.84375 0.90625 -2.0625 0.875q-0.96875 -0.015625 -1.5625 -0.75q-0.578125 -0.75 -0.625 -1.984375q-0.015625 -0.390625 0.046875 -0.921875zm1.125 0.671875q-0.015625 0.9375 0.328125 1.453125q0.359375 0.515625 1.03125 0.515625q1.015625 0.046875 1.8125 -1.015625l0.5625 -3.265625q-0.390625 -0.953125 -1.421875 -0.984375q-0.6875 -0.015625 -1.21875 0.421875q-0.53125 0.4375 -0.8125 1.234375q-0.28125 0.78125 -0.28125 1.640625zm10.353882 2.15625q-0.828125 0.859375 -2.09375 0.828125q-1.015625 -0.015625 -1.5 -0.703125q-0.484375 -0.703125 -0.359375 -1.921875l0.75 -4.546875l1.1875 0l-0.765625 4.578125q-0.03125 0.28125 -0.015625 0.5625q0.03125 0.46875 0.28125 0.734375q0.25 0.265625 0.6875 0.28125q1.265625 0.03125 1.953125 -1.015625l0.890625 -5.140625l1.171875 0l-1.21875 7.046875l-1.125 0l0.15625 -0.703125zm7.097473 -5.265625l-0.546875 -0.0625q-1.140625 0 -1.78125 1.03125l-0.875 5.0l-1.171875 0l1.21875 -7.046875l1.140625 0l-0.171875 0.8125q0.75 -0.96875 1.765625 -0.953125q0.203125 0 0.5625 0.09375l-0.140625 1.125zm4.1154175 5.96875q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm7.7563477 -7.84375l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm2.4605713 8.75l-1.171875 0l1.21875 -7.046875l1.1719055 0l-1.2187805 7.046875zm0.9687805 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.29690552 0.015625 -0.5000305 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5000305 -0.21875zm4.8581543 2.4375q0.890625 0.015625 1.515625 0.484375q0.640625 0.46875 0.9375 1.296875q0.296875 0.8125 0.203125 1.796875l-0.015625 0.140625q-0.125 1.03125 -0.609375 1.859375q-0.484375 0.828125 -1.265625 1.296875q-0.765625 0.453125 -1.6875 0.421875q-0.890625 -0.015625 -1.53125 -0.46875q-0.625 -0.46875 -0.921875 -1.28125q-0.28125 -0.8125 -0.203125 -1.78125q0.09375 -1.09375 0.59375 -1.953125q0.5 -0.875 1.265625 -1.359375q0.78125 -0.484375 1.71875 -0.453125zm-2.390625 3.78125q-0.046875 0.40625 0 0.84375q0.0625 0.765625 0.453125 1.234375q0.40625 0.453125 1.0625 0.46875q0.578125 0.015625 1.0625 -0.28125q0.5 -0.3125 0.84375 -0.9375q0.34375 -0.625 0.4375 -1.390625q0.046875 -0.59375 0.015625 -1.015625q-0.078125 -0.78125 -0.484375 -1.234375q-0.390625 -0.453125 -1.046875 -0.484375q-0.90625 -0.015625 -1.546875 0.71875q-0.640625 0.734375 -0.78125 1.921875l-0.015625 0.15625zm8.250977 -3.65625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm9.228943 5.140625q0.09375 -0.734375 -0.796875 -1.03125l-1.234375 -0.359375q-1.546875 -0.53125 -1.484375 -1.765625q0.046875 -0.9375 0.84375 -1.53125q0.796875 -0.59375 1.890625 -0.578125q1.0625 0.015625 1.734375 0.625q0.671875 0.609375 0.640625 1.578125l-1.171875 0q0.015625 -0.53125 -0.328125 -0.859375q-0.34375 -0.328125 -0.921875 -0.34375q-0.609375 -0.015625 -1.046875 0.296875q-0.421875 0.296875 -0.484375 0.765625q-0.078125 0.609375 0.75 0.890625l0.59375 0.171875q1.203125 0.3125 1.703125 0.8125q0.515625 0.5 0.484375 1.234375q-0.046875 0.65625 -0.4375 1.15625q-0.390625 0.484375 -1.046875 0.75q-0.640625 0.25 -1.375 0.21875q-1.125 -0.015625 -1.859375 -0.65625q-0.71875 -0.640625 -0.6875 -1.640625l1.171875 0q0 0.59375 0.375 0.953125q0.390625 0.359375 1.046875 0.359375q0.640625 0.015625 1.109375 -0.265625q0.46875 -0.28125 0.53125 -0.78125zm5.729187 -1.90625q-0.234375 1.59375 -0.828125 3.015625q-0.59375 1.40625 -1.4375 2.375q-0.828125 0.984375 -1.84375 1.484375l-0.1875 -0.75q2.234375 -1.671875 2.984375 -5.390625q0.296875 -1.5 0.28125 -2.890625q-0.03125 -2.78125 -1.359375 -4.0l0.3125 -0.71875q0.734375 0.5 1.234375 1.34375q0.5 0.84375 0.734375 1.96875q0.25 1.109375 0.21875 2.3125q-0.015625 0.625 -0.09375 1.1875l-0.015625 0.0625z" fill-rule="nonzero"/><path fill="#e8c469" d="m96.0 104.0l240.0 0l0 24.0l-240.0 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m369.6 104.0l86.39371 0l0 24.0l-86.39371 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m477.84933 104.0l33.606323 0l0 24.0l-33.606323 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m552.0 104.0l27.968506 0l0 24.0l-27.968506 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m624.0 104.0l148.78741 0l0 24.0l-148.78741 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m369.6 60.8l86.39371 0l0 28.787403l-86.39371 0z" fill-rule="evenodd"/><path fill="#000000" d="m407.4485 77.168076l0.90625 -0.078125q0.109375 0.625 0.4375 0.921875q0.328125 0.28125 0.828125 0.28125q0.421875 0 0.75 -0.1875q0.328125 -0.203125 0.53125 -0.53125q0.21875 -0.34375 0.359375 -0.890625q0.140625 -0.5625 0.140625 -1.15625q0 -0.0625 -0.015625 -0.1875q-0.28125 0.453125 -0.765625 0.734375q-0.484375 0.265625 -1.046875 0.265625q-0.953125 0 -1.609375 -0.671875q-0.65625 -0.6875 -0.65625 -1.8125q0 -1.171875 0.6875 -1.875q0.6875 -0.703125 1.71875 -0.703125q0.734375 0 1.34375 0.40625q0.625 0.390625 0.9375 1.140625q0.328125 0.734375 0.328125 2.140625q0 1.453125 -0.3125 2.328125q-0.3125 0.859375 -0.953125 1.3125q-0.625 0.453125 -1.46875 0.453125q-0.890625 0 -1.453125 -0.484375q-0.5625 -0.5 -0.6875 -1.40625zm3.84375 -3.359375q0 -0.8125 -0.4375 -1.28125q-0.421875 -0.484375 -1.03125 -0.484375q-0.625 0 -1.09375 0.515625q-0.453125 0.515625 -0.453125 1.328125q0 0.71875 0.4375 1.1875q0.4375 0.453125 1.078125 0.453125q0.65625 0 1.078125 -0.453125q0.421875 -0.46875 0.421875 -1.265625zm1.9421082 1.359375q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m369.6 89.6l86.39371 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m369.6 89.6l86.39371 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m477.84933 89.6l33.606323 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m477.84933 89.6l33.606323 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m552.0 89.6l27.968506 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m552.0 89.6l27.968506 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m624.0 89.6l148.78741 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m624.0 89.6l148.78741 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m336.0 89.6l-240.0 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m336.0 89.6l-240.0 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m96.0 84.8l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m96.0 84.8l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m336.0 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m336.0 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m369.6 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m369.6 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m456.0 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m456.0 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m477.84933 84.8l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m477.84933 84.8l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m511.44934 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m511.44934 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m552.0 84.8l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m552.0 84.8l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m579.9755 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m579.9755 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m624.0 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m624.0 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m772.7998 84.794754l0 9.606293" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m772.7998 84.794754l0 9.606293" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m96.0 60.8l240.0 0l0 28.787403l-240.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m212.46964 78.02745l0 0.90625l-5.03125 0q-0.015625 -0.34375 0.109375 -0.65625q0.1875 -0.515625 0.609375 -1.015625q0.421875 -0.5 1.234375 -1.140625q1.234375 -1.03125 1.671875 -1.625q0.4375 -0.59375 0.4375 -1.125q0 -0.5625 -0.40625 -0.9375q-0.390625 -0.390625 -1.03125 -0.390625q-0.671875 0 -1.078125 0.40625q-0.40625 0.40625 -0.40625 1.125l-0.96875 -0.09375q0.09375 -1.078125 0.734375 -1.640625q0.65625 -0.5625 1.734375 -0.5625q1.109375 0 1.75 0.609375q0.640625 0.609375 0.640625 1.5q0 0.46875 -0.1875 0.90625q-0.1875 0.4375 -0.625 0.9375q-0.4375 0.484375 -1.453125 1.328125q-0.828125 0.71875 -1.078125 0.96875q-0.234375 0.25 -0.390625 0.5l3.734375 0zm1.0046082 -1.09375l0.984375 -0.078125q0.109375 0.71875 0.5 1.078125q0.40625 0.359375 0.96875 0.359375q0.671875 0 1.140625 -0.5q0.46875 -0.515625 0.46875 -1.359375q0 -0.796875 -0.453125 -1.265625q-0.4375 -0.46875 -1.171875 -0.46875q-0.453125 0 -0.8125 0.21875q-0.359375 0.203125 -0.578125 0.53125l-0.875 -0.125l0.734375 -3.921875l3.796875 0l0 0.90625l-3.046875 0l-0.40625 2.046875q0.6875 -0.484375 1.4375 -0.484375q1.0 0 1.6875 0.703125q0.6875 0.6875 0.6875 1.765625q0 1.046875 -0.609375 1.796875q-0.734375 0.921875 -2.0 0.921875q-1.03125 0 -1.703125 -0.578125q-0.65625 -0.578125 -0.75 -1.546875zm5.9265137 -1.765625q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m624.0 60.8l148.78741 0l0 28.787403l-148.78741 0z" fill-rule="evenodd"/><path fill="#000000" d="m693.4727 78.9337l-0.9375 0l0 -5.96875q-0.34375 0.328125 -0.890625 0.65625q-0.546875 0.3125 -0.984375 0.46875l0 -0.90625q0.796875 -0.359375 1.375 -0.890625q0.59375 -0.53125 0.828125 -1.015625l0.609375 0l0 7.65625zm2.3952026 -2.0l0.984375 -0.078125q0.109375 0.71875 0.5 1.078125q0.40625 0.359375 0.96875 0.359375q0.671875 0 1.140625 -0.5q0.46875 -0.515625 0.46875 -1.359375q0 -0.796875 -0.453125 -1.265625q-0.4375 -0.46875 -1.171875 -0.46875q-0.453125 0 -0.8125 0.21875q-0.359375 0.203125 -0.578125 0.53125l-0.875 -0.125l0.734375 -3.921875l3.796875 0l0 0.90625l-3.046875 0l-0.40625 2.046875q0.6875 -0.484375 1.4375 -0.484375q1.0 0 1.6875 0.703125q0.6875 0.6875 0.6875 1.765625q0 1.046875 -0.609375 1.796875q-0.734375 0.921875 -2.0 0.921875q-1.03125 0 -1.703125 -0.578125q-0.65625 -0.578125 -0.75 -1.546875zm5.9265137 0l0.984375 -0.078125q0.109375 0.71875 0.5 1.078125q0.40625 0.359375 0.96875 0.359375q0.671875 0 1.140625 -0.5q0.46875 -0.515625 0.46875 -1.359375q0 -0.796875 -0.453125 -1.265625q-0.4375 -0.46875 -1.171875 -0.46875q-0.453125 0 -0.8125 0.21875q-0.359375 0.203125 -0.578125 0.53125l-0.875 -0.125l0.734375 -3.921875l3.796875 0l0 0.90625l-3.046875 0l-0.40625 2.046875q0.6875 -0.484375 1.4375 -0.484375q1.0 0 1.6875 0.703125q0.6875 0.6875 0.6875 1.765625q0 1.046875 -0.609375 1.796875q-0.734375 0.921875 -2.0 0.921875q-1.03125 0 -1.703125 -0.578125q-0.65625 -0.578125 -0.75 -1.546875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m475.2 60.800526l33.606293 0l0 28.787403l-33.606293 0z" fill-rule="evenodd"/><path fill="#000000" d="m486.5298 76.9186l0.9375 -0.125q0.15625 0.796875 0.546875 1.15625q0.390625 0.34375 0.9375 0.34375q0.65625 0 1.109375 -0.453125q0.46875 -0.46875 0.46875 -1.140625q0 -0.640625 -0.421875 -1.0625q-0.421875 -0.421875 -1.078125 -0.421875q-0.265625 0 -0.65625 0.109375l0.109375 -0.828125q0.09375 0.015625 0.140625 0.015625q0.59375 0 1.078125 -0.3125q0.484375 -0.3125 0.484375 -0.96875q0 -0.515625 -0.359375 -0.84375q-0.34375 -0.34375 -0.890625 -0.34375q-0.546875 0 -0.921875 0.34375q-0.359375 0.34375 -0.453125 1.03125l-0.9375 -0.171875q0.171875 -0.9375 0.78125 -1.453125q0.609375 -0.515625 1.5 -0.515625q0.625 0 1.15625 0.265625q0.53125 0.265625 0.796875 0.734375q0.28125 0.453125 0.28125 0.984375q0 0.484375 -0.265625 0.890625q-0.265625 0.40625 -0.78125 0.65625q0.671875 0.15625 1.046875 0.65625q0.375 0.484375 0.375 1.21875q0 1.0 -0.734375 1.703125q-0.71875 0.6875 -1.828125 0.6875q-1.0 0 -1.671875 -0.59375q-0.65625 -0.609375 -0.75 -1.5625zm5.910858 0.015625l0.984375 -0.078125q0.109375 0.71875 0.5 1.078125q0.40625 0.359375 0.96875 0.359375q0.671875 0 1.140625 -0.5q0.46875 -0.515625 0.46875 -1.359375q0 -0.796875 -0.453125 -1.265625q-0.4375 -0.46875 -1.171875 -0.46875q-0.453125 0 -0.8125 0.21875q-0.359375 0.203125 -0.578125 0.53125l-0.875 -0.125l0.734375 -3.921875l3.796875 0l0 0.90625l-3.046875 0l-0.40625 2.046875q0.6875 -0.484375 1.4375 -0.484375q1.0 0 1.6875 0.703125q0.6875 0.6875 0.6875 1.765625q0 1.046875 -0.609375 1.796875q-0.734375 0.921875 -2.0 0.921875q-1.03125 0 -1.703125 -0.578125q-0.65625 -0.578125 -0.75 -1.546875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m552.0 60.800526l28.787415 0l0 28.787403l-28.787415 0z" fill-rule="evenodd"/><path fill="#000000" d="m560.92035 76.9186l0.9375 -0.125q0.15625 0.796875 0.546875 1.15625q0.390625 0.34375 0.9375 0.34375q0.65625 0 1.109375 -0.453125q0.46875 -0.46875 0.46875 -1.140625q0 -0.640625 -0.421875 -1.0625q-0.421875 -0.421875 -1.078125 -0.421875q-0.265625 0 -0.65625 0.109375l0.109375 -0.828125q0.09375 0.015625 0.140625 0.015625q0.59375 0 1.078125 -0.3125q0.484375 -0.3125 0.484375 -0.96875q0 -0.515625 -0.359375 -0.84375q-0.34375 -0.34375 -0.890625 -0.34375q-0.546875 0 -0.921875 0.34375q-0.359375 0.34375 -0.453125 1.03125l-0.9375 -0.171875q0.171875 -0.9375 0.78125 -1.453125q0.609375 -0.515625 1.5 -0.515625q0.625 0 1.15625 0.265625q0.53125 0.265625 0.796875 0.734375q0.28125 0.453125 0.28125 0.984375q0 0.484375 -0.265625 0.890625q-0.265625 0.40625 -0.78125 0.65625q0.671875 0.15625 1.046875 0.65625q0.375 0.484375 0.375 1.21875q0 1.0 -0.734375 1.703125q-0.71875 0.6875 -1.828125 0.6875q-1.0 0 -1.671875 -0.59375q-0.65625 -0.609375 -0.75 -1.5625zm5.9108276 -1.75q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/tbt/tbt-blocking-time.svg b/src/site/content/en/metrics/tbt/tbt-blocking-time.svg
deleted file mode 100644
index 78ad1cd59f5..00000000000
--- a/src/site/content/en/metrics/tbt/tbt-blocking-time.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 864.0 168.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l864.0 0l0 168.0l-864.0 0l0 -168.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l864.0 0l0 168.0l-864.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.0 113.60262l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m48.0 113.60262l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.0 118.402626l768.3779 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m48.0 118.40262l762.3779 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m810.3779 120.05435l4.538147 -1.6517334l-4.538147 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.810764 25.60105l768.3779 0l0 28.787401l-768.3779 0z" fill-rule="evenodd"/><path fill="#000000" d="m316.89697 35.326l1.65625 7.71875l4.34375 -7.71875l1.609375 0l-1.640625 9.46875l-1.21875 0l0.640625 -3.75l0.78125 -3.8125l-4.296875 7.5625l-0.9375 0l-1.6875 -7.71875l-0.59375 4.09375l-0.625 3.625l-1.21875 0l1.640625 -9.46875l1.546875 0zm12.287231 9.46875q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm5.9282227 0.90625l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799988 2.5625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm11.245911 -1.703125l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm3.3824463 2.5625q0.921875 -1.0 2.125 -0.984375q0.984375 0.015625 1.453125 0.6875q0.484375 0.671875 0.375 1.875l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.078125 -0.03125 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.734375 -10.0l1.1875 0l-0.71875 3.8125zm9.356567 0.21875l-0.546875 -0.0625q-1.140625 0 -1.78125 1.03125l-0.875 5.0l-1.171875 0l1.21875 -7.046875l1.140625 0l-0.171875 0.8125q0.75 -0.96875 1.765625 -0.953125q0.203125 0 0.5625 0.09375l-0.140625 1.125zm2.9865417 6.09375q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm7.4269714 6.1875q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm4.9907227 -2.625q0.125 -1.078125 0.578125 -1.9375q0.46875 -0.875 1.140625 -1.296875q0.6875 -0.4375 1.5 -0.40625q1.171875 0.015625 1.8125 0.859375l0.671875 -3.6875l1.171875 0l-1.734375 10.0l-1.0625 0l0.125 -0.75q-0.84375 0.90625 -2.0625 0.875q-0.96875 -0.015625 -1.5625 -0.75q-0.578125 -0.75 -0.625 -1.984375q-0.015625 -0.390625 0.046875 -0.921875zm1.125 0.671875q-0.015625 0.9375 0.328125 1.453125q0.359375 0.515625 1.03125 0.515625q1.015625 0.046875 1.8125 -1.015625l0.5625 -3.265625q-0.390625 -0.953125 -1.421875 -0.984375q-0.6875 -0.015625 -1.21875 0.421875q-0.53125 0.4375 -0.8125 1.234375q-0.28125 0.78125 -0.28125 1.640625zm12.261475 -5.890625l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm2.4605713 8.75l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2800293 2.5625l-0.15625 0.78125q0.890625 -0.9375 2.140625 -0.90625q0.671875 0.015625 1.140625 0.3125q0.46875 0.28125 0.640625 0.8125q0.984375 -1.15625 2.328125 -1.125q1.0625 0.03125 1.5625 0.71875q0.5 0.671875 0.375 1.828125l-0.78125 4.625l-1.171875 0l0.765625 -4.640625q0.046875 -0.34375 0 -0.625q-0.125 -0.875 -1.15625 -0.890625q-0.640625 -0.015625 -1.171875 0.40625q-0.515625 0.40625 -0.671875 1.078125l-0.796875 4.671875l-1.1875 0l0.78125 -4.640625q0.09375 -0.71875 -0.21875 -1.109375q-0.296875 -0.390625 -0.9375 -0.40625q-1.09375 -0.015625 -1.75 1.015625l-0.890625 5.140625l-1.1875 0l1.234375 -7.046875l1.109375 0zm12.114014 7.171875q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm4.395752 6.1875l-1.171875 0l1.71875 -10.0l1.1875 0l-1.734375 10.0zm3.2018738 0l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799988 2.5625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm7.916443 7.171875q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm7.0377197 2.375q0.21875 -1.515625 0.796875 -2.9375q0.59375 -1.421875 1.4375 -2.421875q0.84375 -1.015625 1.890625 -1.53125l0.171875 0.8125q-1.03125 0.765625 -1.765625 2.0q-0.71875 1.21875 -1.125 2.90625q-0.390625 1.6875 -0.375 3.328125q0 1.34375 0.34375 2.359375q0.34375 1.03125 1.0 1.625l-0.28125 0.734375q-1.09375 -0.765625 -1.671875 -2.25q-0.578125 -1.46875 -0.515625 -3.375q0.015625 -0.625 0.09375 -1.1875l0 -0.0625zm6.937042 -4.9375l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm5.4918213 8.75q-0.046875 -0.1875 -0.046875 -0.375l0.015625 -0.359375q-0.96875 0.890625 -2.0625 0.859375q-0.921875 -0.015625 -1.515625 -0.578125q-0.578125 -0.578125 -0.515625 -1.453125q0.0625 -1.109375 0.96875 -1.734375q0.921875 -0.640625 2.40625 -0.640625l1.234375 0.015625l0.078125 -0.5625q0.0625 -0.625 -0.25 -1.0q-0.3125 -0.375 -0.921875 -0.375q-0.609375 -0.015625 -1.078125 0.296875q-0.453125 0.296875 -0.5625 0.8125l-1.1875 0q0.0625 -0.609375 0.484375 -1.09375q0.421875 -0.484375 1.078125 -0.734375q0.671875 -0.265625 1.375 -0.25q1.109375 0.015625 1.71875 0.65625q0.609375 0.640625 0.515625 1.703125l-0.578125 3.484375l-0.03125 0.515625q-0.015625 0.34375 0.078125 0.703125l-0.015625 0.109375l-1.1875 0zm-1.859375 -0.90625q0.578125 0.015625 1.078125 -0.265625q0.5 -0.296875 0.859375 -0.796875l0.265625 -1.453125l-0.890625 0q-1.125 0 -1.71875 0.359375q-0.578125 0.34375 -0.65625 0.984375q-0.0625 0.5 0.21875 0.828125q0.296875 0.328125 0.84375 0.34375zm9.006348 -1.0q0.09375 -0.734375 -0.796875 -1.03125l-1.234375 -0.359375q-1.546875 -0.53125 -1.484375 -1.765625q0.046875 -0.9375 0.84375 -1.53125q0.796875 -0.59375 1.890625 -0.578125q1.0625 0.015625 1.734375 0.625q0.671875 0.609375 0.640625 1.578125l-1.171875 0q0.015625 -0.53125 -0.328125 -0.859375q-0.34375 -0.328125 -0.921875 -0.34375q-0.609375 -0.015625 -1.046875 0.296875q-0.421875 0.296875 -0.484375 0.765625q-0.078125 0.609375 0.75 0.890625l0.59375 0.171875q1.203125 0.3125 1.703125 0.8125q0.515625 0.5 0.484375 1.234375q-0.046875 0.65625 -0.4375 1.15625q-0.390625 0.484375 -1.046875 0.75q-0.640625 0.25 -1.375 0.21875q-1.125 -0.015625 -1.859375 -0.65625q-0.71875 -0.640625 -0.6875 -1.640625l1.171875 0q0 0.59375 0.375 0.953125q0.390625 0.359375 1.046875 0.359375q0.640625 0.015625 1.109375 -0.265625q0.46875 -0.28125 0.53125 -0.78125zm4.9010315 -1.34375l-0.9375 0.828125l-0.40625 2.421875l-1.1875 0l1.75 -10.0l1.171875 0l-1.046875 5.984375l0.734375 -0.734375l2.484375 -2.296875l1.53125 0l-3.234375 3.0l2.234375 4.046875l-1.296875 0l-1.796875 -3.25zm13.744812 -0.234375q-0.125 1.078125 -0.59375 1.953125q-0.46875 0.859375 -1.125 1.28125q-0.65625 0.40625 -1.453125 0.390625q-1.28125 -0.03125 -1.890625 -0.953125l-0.25 0.8125l-1.078125 0l1.734375 -10.0l1.1875 0l-0.71875 3.734375q0.84375 -0.9375 2.0625 -0.90625q1.015625 0.03125 1.578125 0.75q0.5625 0.71875 0.59375 1.984375q0.015625 0.421875 -0.03125 0.8125l-0.015625 0.140625zm-1.125 -0.6875q0.03125 -0.953125 -0.3125 -1.453125q-0.34375 -0.5 -1.03125 -0.53125q-1.109375 -0.03125 -1.859375 1.109375l-0.53125 3.0625q0.390625 1.078125 1.46875 1.09375q0.6875 0.03125 1.203125 -0.40625q0.515625 -0.4375 0.78125 -1.21875q0.265625 -0.78125 0.28125 -1.65625zm3.3370056 4.171875l-1.171875 0l1.71875 -10.0l1.1875 0l-1.734375 10.0zm5.826874 -7.171875q0.890625 0.015625 1.515625 0.484375q0.640625 0.46875 0.9375 1.296875q0.296875 0.8125 0.203125 1.796875l-0.015625 0.140625q-0.125 1.03125 -0.609375 1.859375q-0.484375 0.828125 -1.265625 1.296875q-0.765625 0.453125 -1.6875 0.421875q-0.890625 -0.015625 -1.53125 -0.46875q-0.625 -0.46875 -0.921875 -1.28125q-0.28125 -0.8125 -0.203125 -1.78125q0.09375 -1.09375 0.59375 -1.953125q0.5 -0.875 1.265625 -1.359375q0.78125 -0.484375 1.71875 -0.453125zm-2.390625 3.78125q-0.046875 0.40625 0 0.84375q0.0625 0.765625 0.453125 1.234375q0.40625 0.453125 1.0625 0.46875q0.578125 0.015625 1.0625 -0.28125q0.5 -0.3125 0.84375 -0.9375q0.34375 -0.625 0.4375 -1.390625q0.046875 -0.59375 0.015625 -1.015625q-0.078125 -0.78125 -0.484375 -1.234375q-0.390625 -0.453125 -1.046875 -0.484375q-0.90625 -0.015625 -1.546875 0.71875q-0.640625 0.734375 -0.78125 1.921875l-0.015625 0.15625zm8.891632 2.546875q0.640625 0.015625 1.140625 -0.359375q0.515625 -0.390625 0.671875 -1.015625l1.109375 0q-0.09375 0.65625 -0.53125 1.203125q-0.4375 0.546875 -1.09375 0.859375q-0.65625 0.3125 -1.34375 0.28125q-0.875 -0.015625 -1.484375 -0.453125q-0.609375 -0.453125 -0.90625 -1.25q-0.28125 -0.796875 -0.1875 -1.78125l0.03125 -0.328125q0.125 -1.015625 0.59375 -1.8125q0.46875 -0.8125 1.21875 -1.25q0.765625 -0.453125 1.671875 -0.421875q1.109375 0.03125 1.765625 0.75q0.671875 0.703125 0.671875 1.8125l-1.109375 -0.015625q-0.015625 -0.6875 -0.390625 -1.109375q-0.359375 -0.421875 -0.984375 -0.453125q-0.921875 -0.015625 -1.53125 0.6875q-0.609375 0.703125 -0.765625 1.953125l-0.015625 0.171875q-0.03125 0.421875 -0.015625 0.859375q0.046875 0.765625 0.421875 1.21875q0.390625 0.4375 1.0625 0.453125zm6.3957825 -2.40625l-0.9375 0.828125l-0.40625 2.421875l-1.1875 0l1.75 -10.0l1.171875 0l-1.046875 5.984375l0.734375 -0.734375l2.484375 -2.296875l1.53125 0l-3.234375 3.0l2.234375 4.046875l-1.296875 0l-1.796875 -3.25zm5.3684998 3.25l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2799988 2.5625l-0.15625 0.890625q0.9375 -1.046875 2.15625 -1.015625q1.0 0.03125 1.46875 0.703125q0.46875 0.65625 0.359375 1.859375l-0.78125 4.609375l-1.171875 0l0.78125 -4.640625q0.03125 -0.3125 0 -0.578125q-0.109375 -0.921875 -1.078125 -0.9375q-1.0625 -0.015625 -1.859375 1.125l-0.875 5.03125l-1.171875 0l1.21875 -7.046875l1.109375 0zm5.213318 3.515625q0.15625 -1.15625 0.625 -2.0q0.46875 -0.859375 1.1250305 -1.265625q0.671875 -0.40625 1.46875 -0.375q1.21875 0.015625 1.84375 0.921875l0.234375 -0.796875l1.078125 0l-1.171875 6.890625q-0.1875 1.359375 -1.09375 2.15625q-0.90625 0.8125 -2.234375 0.78125q-0.7031555 -0.015625 -1.3594055 -0.34375q-0.65625 -0.328125 -1.03125 -0.890625l0.671875 -0.71875q0.625 0.9375 1.6719055 0.96875q0.84375 0.03125 1.421875 -0.46875q0.59375 -0.5 0.78125 -1.40625l0.125 -0.625q-0.859375 0.859375 -2.015625 0.828125q-0.6562805 -0.015625 -1.1406555 -0.34375q-0.484375 -0.34375 -0.75 -0.96875q-0.265625 -0.640625 -0.296875 -1.421875q0 -0.390625 0.046875 -0.921875zm1.140625 0.671875q-0.015625 0.921875 0.3125 1.4375q0.34378052 0.515625 1.0469055 0.53125q1.046875 0.03125 1.8125 -1.03125l0.546875 -3.234375q-0.390625 -0.96875 -1.40625 -1.0q-0.953125 -0.03125 -1.578125 0.78125q-0.6094055 0.8125 -0.7187805 2.171875l-0.015625 0.34375zm12.213348 -5.890625l-0.296875 1.703125l1.28125 0l-0.171875 0.9375l-1.265625 0l-0.734375 4.375q-0.015625 0.171875 -0.015625 0.3125q0.046875 0.515625 0.5625 0.515625q0.21875 0 0.5625 -0.0625l-0.078125 0.96875q-0.421875 0.125 -0.859375 0.125q-0.703125 -0.015625 -1.0625 -0.515625q-0.34375 -0.5 -0.265625 -1.359375l0.703125 -4.359375l-1.234375 0l0.15625 -0.9375l1.25 0l0.296875 -1.703125l1.171875 0zm2.4605713 8.75l-1.171875 0l1.21875 -7.046875l1.171875 0l-1.21875 7.046875zm0.96875 -9.609375q0.296875 -0.015625 0.484375 0.1875q0.203125 0.1875 0.203125 0.5q0 0.296875 -0.203125 0.5q-0.1875 0.1875 -0.5 0.203125q-0.296875 0.015625 -0.5 -0.171875q-0.1875 -0.1875 -0.1875 -0.5q0.015625 -0.3125 0.203125 -0.5q0.1875 -0.203125 0.5 -0.21875zm3.2800293 2.5625l-0.15625 0.78125q0.890625 -0.9375 2.140625 -0.90625q0.671875 0.015625 1.140625 0.3125q0.46875 0.28125 0.640625 0.8125q0.984375 -1.15625 2.328125 -1.125q1.0625 0.03125 1.5625 0.71875q0.5 0.671875 0.375 1.828125l-0.78125 4.625l-1.171875 0l0.765625 -4.640625q0.046875 -0.34375 0 -0.625q-0.125 -0.875 -1.15625 -0.890625q-0.640625 -0.015625 -1.171875 0.40625q-0.515625 0.40625 -0.671875 1.078125l-0.796875 4.671875l-1.1875 0l0.78125 -4.640625q0.09375 -0.71875 -0.21875 -1.109375q-0.296875 -0.390625 -0.9375 -0.40625q-1.09375 -0.015625 -1.75 1.015625l-0.890625 5.140625l-1.1875 0l1.234375 -7.046875l1.109375 0zm12.114014 7.171875q-1.3125 -0.015625 -2.0625 -0.953125q-0.734375 -0.953125 -0.625 -2.421875l0.03125 -0.28125q0.109375 -1.046875 0.625 -1.90625q0.515625 -0.875 1.25 -1.3125q0.734375 -0.4375 1.578125 -0.421875q1.09375 0.03125 1.703125 0.734375q0.625 0.6875 0.6875 1.875q0.015625 0.421875 -0.03125 0.84375l-0.0625 0.546875l-4.609375 0q-0.109375 0.953125 0.3125 1.625q0.4375 0.671875 1.296875 0.6875q1.046875 0.03125 1.921875 -0.9375l0.6875 0.578125q-0.453125 0.640625 -1.15625 1.0q-0.6875 0.359375 -1.546875 0.34375zm0.75 -6.3125q-0.734375 -0.015625 -1.28125 0.5q-0.53125 0.5 -0.859375 1.515625l3.421875 0.015625l0.03125 -0.109375q0.109375 -0.8125 -0.265625 -1.359375q-0.375 -0.546875 -1.046875 -0.5625zm6.473877 2.375q-0.234375 1.59375 -0.828125 3.015625q-0.59375 1.40625 -1.4375 2.375q-0.828125 0.984375 -1.84375 1.484375l-0.1875 -0.75q2.234375 -1.671875 2.984375 -5.390625q0.296875 -1.5 0.28125 -2.890625q-0.03125 -2.78125 -1.359375 -4.0l0.3125 -0.71875q0.734375 0.5 1.234375 1.34375q0.5 0.84375 0.734375 1.96875q0.25 1.109375 0.21875 2.3125q-0.015625 0.625 -0.09375 1.1875l-0.015625 0.0625z" fill-rule="nonzero"/><path fill="#e8c469" d="m96.0 105.6l240.0 0l0 24.000008l-240.0 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m369.6 105.6l86.39371 0l0 24.000008l-86.39371 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m477.84933 105.6l33.606323 0l0 24.000008l-33.606323 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m552.0 105.6l27.968506 0l0 24.000008l-27.968506 0z" fill-rule="evenodd"/><path fill="#e8c469" d="m624.0 105.6l148.78741 0l0 24.000008l-148.78741 0z" fill-rule="evenodd"/><path fill="#a85d4f" d="m144.0 105.60105l191.9685 0l0 23.999992l-191.9685 0z" fill-rule="evenodd"/><path stroke="#724339" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m144.0 105.60105l191.9685 0l0 23.999992l-191.9685 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m144.0 91.20158l191.9685 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m144.0 91.20158l191.9685 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m144.0 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m144.0 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m336.0 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m336.0 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m144.0 62.401573l191.9685 0l0 28.787407l-191.9685 0z" fill-rule="evenodd"/><path fill="#000000" d="m236.45389 79.62903l0 0.90625l-5.03125 0q-0.015625 -0.34375 0.109375 -0.65625q0.1875 -0.515625 0.609375 -1.015625q0.421875 -0.5 1.234375 -1.140625q1.234375 -1.03125 1.671875 -1.625q0.4375 -0.59375 0.4375 -1.125q0 -0.5625 -0.40625 -0.9375q-0.390625 -0.390625 -1.03125 -0.390625q-0.671875 0 -1.078125 0.40625q-0.40625 0.40625 -0.40625 1.125l-0.96875 -0.09375q0.09375 -1.078125 0.734375 -1.640625q0.65625 -0.5625 1.734375 -0.5625q1.109375 0 1.75 0.609375q0.640625 0.609375 0.640625 1.5q0 0.46875 -0.1875 0.90625q-0.1875 0.4375 -0.625 0.9375q-0.4375 0.484375 -1.453125 1.328125q-0.828125 0.71875 -1.078125 0.96875q-0.234375 0.25 -0.390625 0.5l3.734375 0zm1.0046082 -2.859375q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125zm4.9577637 0q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125z" fill-rule="nonzero"/><path fill="#a85d4f" d="m417.6 105.60105l38.393707 0l0 23.999992l-38.393707 0z" fill-rule="evenodd"/><path stroke="#724339" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m417.6 105.60105l38.393707 0l0 23.999992l-38.393707 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m417.6 91.20158l38.393707 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m417.6 91.20158l38.393707 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m417.6 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m417.6 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m456.0 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m456.0 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m417.6 62.401573l38.393707 0l0 28.787407l-38.393707 0z" fill-rule="evenodd"/><path fill="#000000" d="m434.30786 80.53528l0 -1.828125l-3.296875 0l0 -0.859375l3.46875 -4.9375l0.765625 0l0 4.9375l1.03125 0l0 0.859375l-1.03125 0l0 1.828125l-0.9375 0zm0 -2.6875l0 -3.4375l-2.375 3.4375l2.375 0zm2.9264832 -1.078125q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125z" fill-rule="nonzero"/><path fill="#a85d4f" d="m672.0 105.60105l100.787415 0l0 23.999992l-100.787415 0z" fill-rule="evenodd"/><path stroke="#724339" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m672.0 105.60105l100.787415 0l0 23.999992l-100.787415 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m672.0 91.20158l100.787415 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m672.0 91.20158l100.787415 0" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m672.0 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m672.0 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m772.8 86.396324l0 9.6063" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m772.8 86.396324l0 9.6063" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m672.0 62.401573l100.787415 0l0 28.787407l-100.787415 0z" fill-rule="evenodd"/><path fill="#000000" d="m717.4727 80.53528l-0.9375 0l0 -5.96875q-0.34375 0.328125 -0.890625 0.65625q-0.546875 0.3125 -0.984375 0.46875l0 -0.90625q0.796875 -0.359375 1.375 -0.890625q0.59375 -0.53125 0.828125 -1.015625l0.609375 0l0 7.65625zm2.3952026 -3.765625q0 -1.34375 0.28125 -2.171875q0.28125 -0.828125 0.828125 -1.265625q0.546875 -0.453125 1.375 -0.453125q0.625 0 1.078125 0.25q0.46875 0.234375 0.765625 0.703125q0.3125 0.46875 0.484375 1.140625q0.171875 0.671875 0.171875 1.796875q0 1.34375 -0.28125 2.171875q-0.28125 0.828125 -0.828125 1.28125q-0.546875 0.4375 -1.390625 0.4375q-1.09375 0 -1.71875 -0.78125q-0.765625 -0.953125 -0.765625 -3.109375zm0.96875 0q0 1.875 0.4375 2.5q0.4375 0.625 1.078125 0.625q0.65625 0 1.09375 -0.625q0.4375 -0.625 0.4375 -2.5q0 -1.875 -0.4375 -2.5q-0.4375 -0.625 -1.09375 -0.625q-0.640625 0 -1.03125 0.546875q-0.484375 0.703125 -0.484375 2.578125zm4.9577637 1.765625l0.984375 -0.078125q0.109375 0.71875 0.5 1.078125q0.40625 0.359375 0.96875 0.359375q0.671875 0 1.140625 -0.5q0.46875 -0.515625 0.46875 -1.359375q0 -0.796875 -0.453125 -1.265625q-0.4375 -0.46875 -1.171875 -0.46875q-0.453125 0 -0.8125 0.21875q-0.359375 0.203125 -0.578125 0.53125l-0.875 -0.125l0.734375 -3.921875l3.796875 0l0 0.90625l-3.046875 0l-0.40625 2.046875q0.6875 -0.484375 1.4375 -0.484375q1.0 0 1.6875 0.703125q0.6875 0.6875 0.6875 1.765625q0 1.046875 -0.609375 1.796875q-0.734375 0.921875 -2.0 0.921875q-1.03125 0 -1.703125 -0.578125q-0.65625 -0.578125 -0.75 -1.546875z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/ttfb/index.md b/src/site/content/en/metrics/ttfb/index.md
new file mode 100644
index 00000000000..0dd5c487a3b
--- /dev/null
+++ b/src/site/content/en/metrics/ttfb/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Time to First Byte (TTFB)
+authors:
+  - jlwagner
+  - tunetheweb
+date: 2021-10-26
+updated: 2023-01-19
+description: |
+  This post introduces the Time to First Byte (TTFB) metric and explains
+  how to measure it.
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% BrowserCompat 'api.PerformanceResourceTiming.responseStart' %}
+
+{% Aside %}
+Time to First Byte (TTFB) is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when a web server is too slow to respond to requests. In the case of navigation requests&mdash;that is, requests for an HTML document&mdash;it precedes every other meaningful loading performance metric.
+{% endAside %}
+
+## What is TTFB?
+
+TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ccT8ltSPrTri3tz7AA3h.png", alt="A diagram of network request timings. The phases from left to right are Redirect (which overlaps with Prompt for Unload), Cache, DNS, TCP, Request, Response, Processing, and Load. The associated timings are redirectStart and redirectEnd (which overlap with the Prompt for Unload's unloadEventStart and unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, and loadEventEnd.", width="800", height="337" %}
+  <figcaption>
+    A diagram of network request phases and their associated timings. TTFB measures the elapsed time between <code>startTime</code> and <code>responseStart</code>.
+  </figcaption>
+</figure>
+
+TTFB is the sum of the following request phases:
+
+- Redirect time
+- Service worker startup time (if applicable)
+- DNS lookup
+- Connection and TLS negotiation
+- Request, up until the point at which the first byte of the response has arrived
+
+Reducing latency in connection setup time and on the backend will contribute to a lower TTFB.
+
+### What is a good TTFB score?
+
+Because TTFB precedes [user-centric metrics](/user-centric-performance-metrics/) such as [First Contentful Paint (FCP)](/fcp/) and [Largest Contentful Paint (LCP)](/lcp/), it's recommended that your server responds to navigation requests quickly enough so that the **75th percentile** of users experience an [FCP within the "good" threshold](/fcp/#what-is-a-good-fcp-score). As a rough guide, most sites should strive to have Time To First Byte of **0.8 seconds** or less.
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/ILJ1xKjzVisqOPPyHYVA.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/EcKicxW5ErYYhf8RvpeO.svg",
+        alt="Good TTFB values are 0.8 seconds or less, poor values are greater than 1.8 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
+{% Aside 'important' %}
+<p>TTFB is not a [Core Web Vitals](/vitals/) metric, so it's not absolutely necessary that sites meet the "good" TTFB threshold, provided that it doesn't impede their ability to score well on the metrics that matter.<p>
+<p>Websites vary in how they deliver content. A low TTFB is crucial for getting markup out to the client as soon as possible. However, if a website delivers the initial markup quickly, but that markup then requires JavaScript to populate it with meaningful content—as is the the case with Single Page Applications (SPAs)—then achieving the lowest possible TTFB is especially important so that the client-rendering of markup can occur sooner.<p>
+<p>Conversely, a server-rendered site that does not require as much client-side work could have a higher TTFB, but better FCP and LCP values than an entirely client-rendered experience. This is why the TTFB thresholds are a “rough guide”, and will need to be weighed against how your site delivers its core content.<p>
+{% endAside %}
+
+## How to measure TTFB
+
+TTFB can be measured in [the lab](/user-centric-performance-metrics/#in-the-lab) or in [the field](/user-centric-performance-metrics/#in-the-field) in the following ways.
+
+### Field tools
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
+
+### Lab tools
+
+- In the [network panel](https://developer.chrome.com/docs/devtools/network/) of Chrome's DevTools
+- [WebPageTest](https://www.webpagetest.org/)
+
+### Measure TTFB in JavaScript
+
+You can measure the TTFB of [navigation requests](https://developer.mozilla.org/docs/Web/API/Request/mode) in the browser with the [Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API). The following example shows how to create a [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) that listens for a `navigation` entry and logs it to the console:
+
+```javascript
+new PerformanceObserver((entryList) => {
+  const [pageNav] = entryList.getEntriesByType('navigation');
+
+  console.log(`TTFB: ${pageNav.responseStart}`);
+}).observe({
+  type: 'navigation',
+  buffered: true
+});
+```
+
+{% Aside 'caution' %}
+Not all browsers support `PerformanceObserver` or its `buffered` flag. To get the largest possible browser support, consider adopting the `web-vitals` package, which is discussed below.
+{% endAside %}
+
+The [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) can also measure TTFB in the browser with less complexity:
+
+```javascript
+import {onTTFB} from 'web-vitals';
+
+// Measure and log TTFB as soon as it's available.
+onTTFB(console.log);
+```
+
+### Measuring resource requests
+
+TTFB applies to _all_ requests, not just navigation requests. In particular, resources hosted on cross-origin servers can introduce latency due to the need to set up connections to those servers. To measure TTFB for resources in the field, use the [Resource Timing API](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) within a `PerformanceObserver`:
+
+```javascript
+new PerformanceObserver((entryList) => {
+  const entries = entryList.getEntries();
+
+  for (const entry of entries) {
+    // Some resources may have a responseStart value of 0, due
+    // to the resource being cached, or a cross-origin resource
+    // being served without a Timing-Allow-Origin header set.
+    if (entry.responseStart > 0) {
+      console.log(`TTFB: ${entry.responseStart}`, entry.name);
+    }
+  }
+}).observe({
+  type: 'resource',
+  buffered: true
+});
+```
+
+The above code snippet is similar to the one used to measure the TTFB for a navigation request, except instead of querying for `'navigation'` entries, you query for `'resource'` entries instead. It also accounts for the fact that some resources loaded from the primary origin may return a value of `0`, since the connection is already open, or a resource is instantaneously retrieved from a cache.
+
+{% Aside 'gotchas' %}
+TTFB for cross-origin requests will not be measurable in the field if cross-origin servers fail to set a [`Timing-Allow-Origin` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin).
+{% endAside %}
+
+## How to improve TTFB
+
+An in-depth guide on [optimizing TTFB](/optimize-ttfb/) has been published to give you more guidance on improving your website's TTFB.
diff --git a/src/site/content/en/metrics/tti/index.md b/src/site/content/en/metrics/tti/index.md
index 34874b19f51..679f2d3bb34 100644
--- a/src/site/content/en/metrics/tti/index.md
+++ b/src/site/content/en/metrics/tti/index.md
@@ -4,7 +4,7 @@ title: Time to Interactive (TTI)
 authors:
   - philipwalton
 date: 2019-11-07
-updated: 2020-06-15
+updated: 2022-05-11
 description: |
   This post introduces the Time to Interactive (TTI) metric and explains
   how to measure it
@@ -29,7 +29,7 @@ loading to when its main sub-resources have loaded and it is capable of reliably
 responding to user input quickly.
 
 To calculate TTI based on a [performance
-trace](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference)
+trace](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/)
 of a web page, follow these steps:
 
 1. Start at [First Contentful Paint (FCP)](/fcp/).
@@ -44,7 +44,7 @@ of a web page, follow these steps:
 
 The following diagram should help visualize the steps above:
 
-[![A page load timeline showing how to compute TTI](tti-timeline.svg)](tti-timeline.svg)
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="A page load timeline showing how to compute TTI", width="800", height="473", linkTo=true %}
 
 Historically, developers have optimized pages for fast render times,
 sometimes at the expense of TTI.
@@ -62,7 +62,7 @@ isn't, they'll likely respond in one of two ways:
   leave. They may even lose confidence or trust in the value of your brand.
 
 To avoid this problem, make every effort to minimize the difference
-between FCP and TTI. And in cases were a noticeable difference does exist,
+between FCP and TTI. And in cases where a noticeable difference does exist,
 make it clear through visual indicators that the components on your page are not yet
 interactive.
 
@@ -71,18 +71,18 @@ interactive.
 TTI is a metric that's best measured [in the
 lab](/user-centric-performance-metrics/#in-the-lab). The best way to measure TTI is to run a
 Lighthouse performance audit on your site. See the [Lighthouse documentation on
-TTI](/interactive/) for usage details.
+TTI](/tti/) for usage details.
 
 ### Lab tools
 
-* [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
+* [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
 * [WebPageTest](https://www.webpagetest.org/)
 
 {% Aside %}
   While it's possible to measure TTI in the field, it's not recommended, as user
   interaction can affect your page's TTI in ways that lead to lots of variance
   in your reports. To understand a page's interactivity in the field, you should
-  measure [First Input Delay (FID)](/fid/).
+  measure [First Input Delay (FID)](/fid/) and [Interaction to Next Paint (INP)](/inp/).
 {% endAside %}
 
 ## What is a good TTI score?
@@ -93,22 +93,22 @@ hardware**.
 
 For details on how your page's TTI affects your Lighthouse performance score,
 see [How Lighthouse determines your TTI
-score](/interactive/#how-lighthouse-determines-your-tti-score).
+score](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score).
 
 ## How to improve TTI
 
 To learn how to improve TTI for a specific site, you can run a Lighthouse
 performance audit and pay attention to any specific
-[opportunities](/lighthouse-performance/#opportunities) the audit suggests.
+[opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) the audit suggests.
 
 To learn how to improve TTI in general (for any site), refer to the following
 performance guides:
 
-* [Minify JavaScript](/unminified-javascript/)
-* [Preconnect to required origins](/uses-rel-preconnect/)
-* [Preload key requests](/uses-rel-preload/)
-* [Reduce the impact of third-party code](/third-party-summary/)
-* [Minimize critical request depth](/critical-request-chains/)
-* [Reduce JavaScript execution time](/bootup-time/)
-* [Minimize main thread work](/mainthread-work-breakdown/)
-* [Keep request counts low and transfer sizes small](/resource-summary/)
+* [Minify JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/e.com/docs/lighthouse/performance/unminified-javascript/)
+* [Preconnect to required origins](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+* [Preload key requests](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+* [Reduce the impact of third-party code](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+* [Minimize critical request depth](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+* [Reduce JavaScript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+* [Minimize main thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+* [Keep request counts low and transfer sizes small](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/en/metrics/tti/tti-timeline.svg b/src/site/content/en/metrics/tti/tti-timeline.svg
deleted file mode 100644
index 69ceee9b8f9..00000000000
--- a/src/site/content/en/metrics/tti/tti-timeline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 957.7165354330708 565.5538057742782" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l957.71655 0l0 565.55383l-957.71655 0l0 -565.55383z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l957.71655 0l0 565.55383l-957.71655 0z" fill-rule="evenodd"/><path fill="#efefef" d="m542.61945 23.593178l217.92126 0l0 515.9055l-217.92126 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m542.61847 45.672253l217.914 0l0 25.127743l-217.914 0z" fill-rule="evenodd"/><path fill="#666666" d="m585.0881 64.73788l1.1875 -0.109375q-0.015625 0.25 -0.015625 0.3125q0 0.421875 0.21875 0.859375q0.21875 0.4375 0.59375 0.671875q0.375 0.21875 0.796875 0.21875q0.546875 0 1.109375 -0.375q0.5625 -0.375 0.90625 -1.09375q0.359375 -0.71875 0.359375 -1.4375q0 -0.796875 -0.46875 -1.28125q-0.46875 -0.484375 -1.234375 -0.484375q-0.515625 0 -0.984375 0.25q-0.453125 0.25 -0.84375 0.75l-1.03125 -0.078125l1.4375 -4.875l4.65625 0l-0.21875 1.078125l-3.625 0l-0.71875 2.421875q0.40625 -0.296875 0.828125 -0.4375q0.421875 -0.140625 0.875 -0.140625q1.09375 0 1.796875 0.71875q0.703125 0.71875 0.703125 1.984375q0 1.09375 -0.484375 2.03125q-0.484375 0.921875 -1.328125 1.421875q-0.84375 0.484375 -1.8125 0.484375q-0.828125 0 -1.453125 -0.359375q-0.625 -0.375 -0.953125 -1.015625q-0.3125 -0.65625 -0.3125 -1.3125q0 -0.0625 0.015625 -0.203125zm10.7248535 0.375l1.1875 -0.078125q0 0.515625 0.15625 0.875q0.15625 0.359375 0.578125 0.59375q0.421875 0.21875 0.96875 0.21875q0.78125 0 1.171875 -0.3125q0.390625 -0.3125 0.390625 -0.734375q0 -0.3125 -0.234375 -0.578125q-0.234375 -0.28125 -1.171875 -0.671875q-0.9375 -0.40625 -1.1875 -0.578125q-0.4375 -0.265625 -0.671875 -0.625q-0.21875 -0.359375 -0.21875 -0.828125q0 -0.8125 0.65625 -1.390625q0.65625 -0.59375 1.828125 -0.59375q1.296875 0 1.96875 0.609375q0.6875 0.59375 0.71875 1.578125l-1.15625 0.078125q-0.03125 -0.625 -0.453125 -0.984375q-0.40625 -0.375 -1.171875 -0.375q-0.609375 0 -0.953125 0.28125q-0.328125 0.28125 -0.328125 0.609375q0 0.3125 0.296875 0.5625q0.1875 0.171875 1.0 0.53125q1.359375 0.578125 1.703125 0.921875q0.5625 0.53125 0.5625 1.3125q0 0.515625 -0.3125 1.015625q-0.3125 0.484375 -0.96875 0.78125q-0.640625 0.296875 -1.515625 0.296875q-1.203125 0 -2.046875 -0.59375q-0.84375 -0.59375 -0.796875 -1.921875zm11.6328125 0.015625l1.15625 0.109375q-0.25 0.859375 -1.140625 1.625q-0.890625 0.765625 -2.125 0.765625q-0.765625 0 -1.40625 -0.34375q-0.640625 -0.359375 -0.984375 -1.03125q-0.328125 -0.6875 -0.328125 -1.546875q0 -1.140625 0.515625 -2.203125q0.53125 -1.0625 1.359375 -1.578125q0.84375 -0.515625 1.8125 -0.515625q1.234375 0 1.96875 0.765625q0.75 0.765625 0.75 2.09375q0 0.5 -0.09375 1.046875l-5.09375 0q-0.03125 0.1875 -0.03125 0.359375q0 0.96875 0.4375 1.484375q0.453125 0.5 1.109375 0.5q0.59375 0 1.171875 -0.390625q0.59375 -0.390625 0.921875 -1.140625zm-3.421875 -1.71875l3.875 0q0.015625 -0.1875 0.015625 -0.265625q0 -0.875 -0.453125 -1.34375q-0.4375 -0.484375 -1.125 -0.484375q-0.765625 0 -1.390625 0.53125q-0.609375 0.515625 -0.921875 1.5625zm10.537476 1.546875l1.171875 0.125q-0.4375 1.296875 -1.265625 1.921875q-0.8125 0.625 -1.84375 0.625q-1.140625 0 -1.84375 -0.71875q-0.6875 -0.734375 -0.6875 -2.046875q0 -1.125 0.4375 -2.21875q0.453125 -1.09375 1.28125 -1.65625q0.84375 -0.578125 1.921875 -0.578125q1.109375 0 1.765625 0.625q0.65625 0.625 0.65625 1.65625l-1.15625 0.078125q-0.015625 -0.65625 -0.390625 -1.015625q-0.375 -0.375 -0.984375 -0.375q-0.703125 0 -1.234375 0.453125q-0.515625 0.4375 -0.8125 1.359375q-0.296875 0.90625 -0.296875 1.75q0 0.890625 0.390625 1.34375q0.390625 0.4375 0.96875 0.4375q0.5625 0 1.078125 -0.4375q0.53125 -0.4375 0.84375 -1.328125zm2.1015625 -0.109375q0 -2.015625 1.1875 -3.34375q0.984375 -1.09375 2.578125 -1.09375q1.25 0 2.015625 0.78125q0.765625 0.78125 0.765625 2.109375q0 1.1875 -0.484375 2.21875q-0.484375 1.015625 -1.375 1.5625q-0.890625 0.546875 -1.875 0.546875q-0.796875 0 -1.46875 -0.34375q-0.65625 -0.34375 -1.0 -0.96875q-0.34375 -0.640625 -0.34375 -1.46875zm1.171875 -0.109375q0 0.96875 0.46875 1.484375q0.46875 0.5 1.1875 0.5q0.375 0 0.75 -0.15625q0.375 -0.15625 0.6875 -0.46875q0.328125 -0.3125 0.546875 -0.703125q0.21875 -0.40625 0.359375 -0.875q0.203125 -0.640625 0.203125 -1.234375q0 -0.9375 -0.46875 -1.453125q-0.46875 -0.515625 -1.1875 -0.515625q-0.5625 0 -1.015625 0.265625q-0.453125 0.265625 -0.828125 0.78125q-0.359375 0.5 -0.53125 1.171875q-0.171875 0.671875 -0.171875 1.203125zm6.0218506 2.734375l1.453125 -6.90625l1.0625 0l-0.25 1.203125q0.6875 -0.71875 1.296875 -1.03125q0.609375 -0.328125 1.234375 -0.328125q0.84375 0 1.3125 0.453125q0.484375 0.453125 0.484375 1.21875q0 0.375 -0.171875 1.203125l-0.875 4.1875l-1.171875 0l0.921875 -4.375q0.125 -0.640625 0.125 -0.953125q0 -0.34375 -0.234375 -0.546875q-0.234375 -0.21875 -0.6875 -0.21875q-0.90625 0 -1.609375 0.65625q-0.703125 0.640625 -1.03125 2.21875l-0.671875 3.21875l-1.1875 0zm12.084351 -1.0q-1.015625 1.15625 -2.109375 1.15625q-0.984375 0 -1.640625 -0.71875q-0.65625 -0.734375 -0.65625 -2.109375q0 -1.265625 0.515625 -2.3125q0.515625 -1.046875 1.296875 -1.5625q0.78125 -0.515625 1.5625 -0.515625q1.28125 0 1.9375 1.234375l0.78125 -3.71875l1.171875 0l-1.984375 9.546875l-1.09375 0l0.21875 -1.0zm-3.234375 -1.890625q0 0.71875 0.140625 1.140625q0.140625 0.40625 0.484375 0.6875q0.34375 0.28125 0.828125 0.28125q0.796875 0 1.453125 -0.84375q0.875 -1.109375 0.875 -2.734375q0 -0.8125 -0.4375 -1.265625q-0.421875 -0.46875 -1.078125 -0.46875q-0.421875 0 -0.765625 0.1875q-0.34375 0.1875 -0.6875 0.640625q-0.34375 0.453125 -0.578125 1.15625q-0.234375 0.6875 -0.234375 1.21875zm14.1467285 2.109375q-1.015625 0.9375 -1.9375 0.9375q-0.953125 0 -1.625 -0.734375q-0.65625 -0.734375 -0.65625 -2.078125q0 -1.28125 0.5 -2.328125q0.5 -1.046875 1.28125 -1.5625q0.796875 -0.515625 1.625 -0.515625q0.625 0 1.140625 0.359375q0.53125 0.34375 0.84375 1.0625l0.265625 -1.265625l1.015625 0l-1.984375 9.5625l-1.1875 0l0.71875 -3.4375zm-3.0625 -2.03125q0 1.015625 0.421875 1.515625q0.421875 0.484375 1.0625 0.484375q0.53125 0 1.078125 -0.4375q0.546875 -0.4375 0.890625 -1.328125q0.34375 -0.890625 0.34375 -1.703125q0 -0.859375 -0.4375 -1.328125q-0.4375 -0.484375 -1.0625 -0.484375q-0.625 0 -1.078125 0.40625q-0.609375 0.515625 -0.953125 1.5q-0.265625 0.75 -0.265625 1.375zm10.724976 1.5625q-1.234375 1.40625 -2.546875 1.40625q-0.796875 0 -1.296875 -0.453125q-0.484375 -0.46875 -0.484375 -1.125q0 -0.4375 0.21875 -1.5l0.84375 -3.984375l1.171875 0l-0.921875 4.40625q-0.109375 0.5625 -0.109375 0.859375q0 0.390625 0.234375 0.609375q0.234375 0.21875 0.703125 0.21875q0.484375 0 0.953125 -0.234375q0.484375 -0.234375 0.8125 -0.640625q0.34375 -0.421875 0.5625 -0.984375q0.140625 -0.359375 0.328125 -1.25l0.625 -2.984375l1.1875 0l-1.453125 6.90625l-1.078125 0l0.25 -1.25zm4.3656006 -6.953125l0.28125 -1.34375l1.171875 0l-0.28125 1.34375l-1.171875 0zm-1.71875 8.203125l1.453125 -6.90625l1.171875 0l-1.4375 6.90625l-1.1875 0zm8.08606 -2.34375l1.15625 0.109375q-0.25 0.859375 -1.140625 1.625q-0.890625 0.765625 -2.125 0.765625q-0.765625 0 -1.40625 -0.34375q-0.640625 -0.359375 -0.984375 -1.03125q-0.328125 -0.6875 -0.328125 -1.546875q0 -1.140625 0.515625 -2.203125q0.53125 -1.0625 1.359375 -1.578125q0.84375 -0.515625 1.8125 -0.515625q1.234375 0 1.96875 0.765625q0.75 0.765625 0.75 2.09375q0 0.5 -0.09375 1.046875l-5.09375 0q-0.03125 0.1875 -0.03125 0.359375q0 0.96875 0.4375 1.484375q0.453125 0.5 1.109375 0.5q0.59375 0 1.171875 -0.390625q0.59375 -0.390625 0.921875 -1.140625zm-3.421875 -1.71875l3.875 0q0.015625 -0.1875 0.015625 -0.265625q0 -0.875 -0.453125 -1.34375q-0.4375 -0.484375 -1.125 -0.484375q-0.765625 0 -1.390625 0.53125q-0.609375 0.515625 -0.921875 1.5625zm8.521851 3.109375l-0.203125 0.953125q-0.421875 0.109375 -0.8125 0.109375q-0.703125 0 -1.125 -0.34375q-0.3125 -0.25 -0.3125 -0.703125q0 -0.234375 0.171875 -1.046875l0.828125 -4.015625l-0.921875 0l0.1875 -0.90625l0.9375 0l0.34375 -1.703125l1.359375 -0.8125l-0.53125 2.515625l1.15625 0l-0.1875 0.90625l-1.15625 0l-0.796875 3.8125q-0.15625 0.734375 -0.15625 0.875q0 0.21875 0.109375 0.328125q0.125 0.109375 0.40625 0.109375q0.390625 0 0.703125 -0.078125zm5.952881 0.953125l-0.71875 -6.90625l1.140625 0l0.3125 3.09375l0.125 1.75q0 0.1875 0.03125 0.78125q0.203125 -0.65625 0.328125 -1.015625q0.140625 -0.359375 0.4375 -1.015625l1.65625 -3.59375l1.28125 0l0.21875 3.453125q0.0625 0.78125 0.0625 2.09375q0.328125 -0.859375 1.0625 -2.421875l1.484375 -3.125l1.1875 0l-3.390625 6.90625l-1.21875 0l-0.25 -4.046875q-0.03125 -0.390625 -0.046875 -1.484375q-0.265625 0.703125 -0.625 1.515625l-1.828125 4.015625l-1.25 0zm9.984497 -8.203125l0.28125 -1.34375l1.171875 0l-0.28125 1.34375l-1.171875 0zm-1.71875 8.203125l1.453125 -6.90625l1.171875 0l-1.4375 6.90625l-1.1875 0zm3.0079956 0l1.453125 -6.90625l1.0625 0l-0.25 1.203125q0.6875 -0.71875 1.296875 -1.03125q0.609375 -0.328125 1.234375 -0.328125q0.84375 0 1.3125 0.453125q0.484375 0.453125 0.484375 1.21875q0 0.375 -0.171875 1.203125l-0.875 4.1875l-1.171875 0l0.921875 -4.375q0.125 -0.640625 0.125 -0.953125q0 -0.34375 -0.234375 -0.546875q-0.234375 -0.21875 -0.6875 -0.21875q-0.90625 0 -1.609375 0.65625q-0.703125 0.640625 -1.03125 2.21875l-0.671875 3.21875l-1.1875 0zm12.084351 -1.0q-1.015625 1.15625 -2.109375 1.15625q-0.984375 0 -1.640625 -0.71875q-0.65625 -0.734375 -0.65625 -2.109375q0 -1.265625 0.515625 -2.3125q0.515625 -1.046875 1.296875 -1.5625q0.78125 -0.515625 1.5625 -0.515625q1.28125 0 1.9375 1.234375l0.78125 -3.71875l1.171875 0l-1.984375 9.546875l-1.09375 0l0.21875 -1.0zm-3.234375 -1.890625q0 0.71875 0.140625 1.140625q0.140625 0.40625 0.484375 0.6875q0.34375 0.28125 0.828125 0.28125q0.796875 0 1.453125 -0.84375q0.875 -1.109375 0.875 -2.734375q0 -0.8125 -0.4375 -1.265625q-0.421875 -0.46875 -1.078125 -0.46875q-0.421875 0 -0.765625 0.1875q-0.34375 0.1875 -0.6875 0.640625q-0.34375 0.453125 -0.578125 1.15625q-0.234375 0.6875 -0.234375 1.21875zm6.1937256 0.265625q0 -2.015625 1.1875 -3.34375q0.984375 -1.09375 2.578125 -1.09375q1.25 0 2.015625 0.78125q0.765625 0.78125 0.765625 2.109375q0 1.1875 -0.484375 2.21875q-0.484375 1.015625 -1.375 1.5625q-0.890625 0.546875 -1.875 0.546875q-0.796875 0 -1.46875 -0.34375q-0.65625 -0.34375 -1.0 -0.96875q-0.34375 -0.640625 -0.34375 -1.46875zm1.171875 -0.109375q0 0.96875 0.46875 1.484375q0.46875 0.5 1.1875 0.5q0.375 0 0.75 -0.15625q0.375 -0.15625 0.6875 -0.46875q0.328125 -0.3125 0.546875 -0.703125q0.21875 -0.40625 0.359375 -0.875q0.203125 -0.640625 0.203125 -1.234375q0 -0.9375 -0.46875 -1.453125q-0.46875 -0.515625 -1.1875 -0.515625q-0.5625 0 -1.015625 0.265625q-0.453125 0.265625 -0.828125 0.78125q-0.359375 0.5 -0.53125 1.171875q-0.171875 0.671875 -0.171875 1.203125zm7.3343506 2.734375l-0.71875 -6.90625l1.140625 0l0.3125 3.09375l0.125 1.75q0 0.1875 0.03125 0.78125q0.203125 -0.65625 0.328125 -1.015625q0.140625 -0.359375 0.4375 -1.015625l1.65625 -3.59375l1.28125 0l0.21875 3.453125q0.0625 0.78125 0.0625 2.09375q0.328125 -0.859375 1.0625 -2.421875l1.484375 -3.125l1.1875 0l-3.390625 6.90625l-1.21875 0l-0.25 -4.046875q-0.03125 -0.390625 -0.046875 -1.484375q-0.265625 0.703125 -0.625 1.515625l-1.828125 4.015625l-1.25 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m260.07837 247.61757l280.063 0" fill-rule="evenodd"/><path stroke="#434343" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m260.07837 247.61758l274.063 0" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="1.0" stroke-linecap="butt" d="m534.14136 249.2693l4.538086 -1.6517181l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m223.67769 279.30475l0 62.813538" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m223.67769 279.30475l0 62.813538" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m187.27684 228.42422l72.80153 0l0 38.38669l-72.80153 0z" fill-rule="evenodd"/><path fill="#000000" d="m216.75964 248.82132l-4.5 0l0 4.65625l-2.34375 0l0 -11.375l7.40625 0l0 1.890625l-5.0625 0l0 2.9375l4.5 0l0 1.890625zm10.859375 0.859375q-0.140625 1.84375 -1.359375 2.90625q-1.21875 1.046875 -3.21875 1.046875q-2.1875 0 -3.453125 -1.46875q-1.25 -1.484375 -1.25 -4.046875l0 -0.703125q0 -1.640625 0.578125 -2.890625q0.578125 -1.25 1.65625 -1.90625q1.078125 -0.671875 2.5 -0.671875q1.96875 0 3.171875 1.0625q1.203125 1.046875 1.390625 2.953125l-2.34375 0q-0.09375 -1.109375 -0.625 -1.59375q-0.515625 -0.5 -1.59375 -0.5q-1.171875 0 -1.765625 0.84375q-0.578125 0.828125 -0.59375 2.59375l0 0.859375q0 1.84375 0.5625 2.703125q0.5625 0.84375 1.765625 0.84375q1.078125 0 1.609375 -0.484375q0.546875 -0.5 0.625 -1.546875l2.34375 0zm3.875 -0.21875l0 4.015625l-2.34375 0l0 -11.375l4.4375 0q1.28125 0 2.25 0.46875q0.984375 0.46875 1.5 1.328125q0.53125 0.859375 0.53125 1.96875q0 1.671875 -1.15625 2.640625q-1.140625 0.953125 -3.15625 0.953125l-2.0625 0zm0 -1.890625l2.09375 0q0.9375 0 1.421875 -0.4375q0.484375 -0.4375 0.484375 -1.25q0 -0.84375 -0.5 -1.359375q-0.484375 -0.515625 -1.34375 -0.53125l-2.15625 0l0 3.578125z" fill-rule="nonzero"/><path fill="#d9d2e9" d="m52.567112 108.525665l122.87012 0l0 5.291893l-122.87012 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m52.567112 108.525665l122.87012 0l0 5.291893l-122.87012 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m175.67357 122.527596l230.23836 0l0 5.291893l-230.23836 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m175.67357 122.527596l230.23836 0l0 5.291893l-230.23836 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m175.6741 135.00787l48.0 0l0 5.291336l-48.0 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m175.6741 135.00787l48.0 0l0 5.291336l-48.0 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m243.76549 159.22606l298.8578 0l0 5.2919006l-298.8578 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m243.76549 159.22606l298.8578 0l0 5.2919006l-298.8578 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m262.6805 172.10535l388.76163 0l0 5.2919006l-388.76163 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m262.6805 172.10535l388.76163 0l0 5.2919006l-388.76163 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m242.27985 147.78159l230.23837 0l0 5.2919006l-230.23837 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m242.27985 147.78159l230.23837 0l0 5.2919006l-230.23837 0z" fill-rule="evenodd"/><path fill="#d9d2e9" d="m401.00867 184.98463l454.79932 0l0 5.2918854l-454.79932 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m401.00867 184.98463l454.79932 0l0 5.2918854l-454.79932 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m921.3911 109.29568l0 82.26386l-38.386658 0l0 -82.26386z" fill-rule="evenodd"/><path fill="#666666" d="m896.33777 130.11511l0 -1.421875l8.828125 -4.0625l-8.828125 -1.53125l0 -1.46875l11.375 1.96875l0 1.421875l-8.859375 4.078125l8.859375 1.53125l0 1.46875l-11.375 -1.984375zm-0.15625 6.09375q0.03125 -1.578125 1.15625 -2.46875q1.140625 -0.890625 2.90625 -0.75l0.34375 0.03125q1.25 0.140625 2.28125 0.75q1.046875 0.609375 1.578125 1.484375q0.53125 0.890625 0.5 1.921875q-0.03125 1.296875 -0.875 2.03125q-0.828125 0.75 -2.25 0.828125q-0.515625 0.015625 -1.015625 -0.03125l-0.65625 -0.09375l0 -5.515625q-1.140625 -0.140625 -1.953125 0.375q-0.796875 0.515625 -0.828125 1.546875q-0.03125 1.25 1.125 2.3125l-0.6875 0.8125q-0.765625 -0.53125 -1.203125 -1.375q-0.4375 -0.828125 -0.421875 -1.859375zm7.59375 0.890625q0.015625 -0.875 -0.609375 -1.53125q-0.609375 -0.640625 -1.828125 -1.03125l0 4.109375l0.125 0.03125q0.984375 0.125 1.625 -0.3125q0.65625 -0.4375 0.6875 -1.265625zm3.0625 7.484375l-2.046875 -0.359375l0 1.53125l-1.109375 -0.1875l0 -1.53125l-5.265625 -0.890625q-0.203125 -0.015625 -0.375 0q-0.609375 0.046875 -0.609375 0.65625q0 0.265625 0.078125 0.6875l-1.1875 -0.109375q-0.140625 -0.5 -0.140625 -1.03125q0.015625 -0.84375 0.625 -1.265625q0.609375 -0.421875 1.640625 -0.328125l5.234375 0.859375l0 -1.484375l1.109375 0.1875l0 1.5l2.046875 0.359375l0 1.40625zm-8.5 8.9921875l6.453125 2.703125l0 1.453125l-8.453125 -3.84375l0 -1.15625l6.390625 -0.875l-6.390625 -3.046875l0 -1.140625l8.453125 -0.921875l0 1.359375l-6.296875 0.515625l6.296875 3.0l0 1.140625l-6.453125 0.8125zm6.609375 8.8515625q-0.015625 1.0625 -0.578125 1.8125q-0.5625 0.765625 -1.546875 1.125q-0.984375 0.375 -2.15625 0.25l-0.171875 -0.015625q-1.234375 -0.140625 -2.234375 -0.734375q-1.0 -0.578125 -1.5625 -1.515625q-0.546875 -0.921875 -0.515625 -2.03125q0.015625 -1.0625 0.578125 -1.828125q0.5625 -0.75 1.53125 -1.109375q0.96875 -0.34375 2.140625 -0.25q1.3125 0.125 2.359375 0.71875q1.046875 0.59375 1.609375 1.515625q0.578125 0.9375 0.546875 2.0625zm-4.53125 -2.875q-0.484375 -0.046875 -1.015625 0q-0.921875 0.078125 -1.46875 0.546875q-0.546875 0.484375 -0.578125 1.265625q-0.015625 0.703125 0.34375 1.296875q0.375 0.59375 1.125 1.0q0.75 0.40625 1.671875 0.53125q0.71875 0.0625 1.203125 0.015625q0.953125 -0.09375 1.5 -0.578125q0.546875 -0.46875 0.578125 -1.25q0.015625 -1.09375 -0.875 -1.859375q-0.875 -0.765625 -2.296875 -0.953125l-0.1875 -0.015625zm3.09375 12.3671875l0.0625 -0.65625q0 -1.359375 -1.21875 -2.140625l-6.015625 -1.046875l0 -1.40625l8.453125 1.46875l0.015625 1.359375l-0.984375 -0.203125q1.171875 0.890625 1.140625 2.109375q0 0.265625 -0.109375 0.671875l-1.34375 -0.15625zm-3.265625 3.109375l-1.0 -1.109375l-2.90625 -0.5l0 -1.421875l12.0 2.09375l0 1.40625l-7.171875 -1.25l0.875 0.875l2.75 3.0l0 1.828125l-3.59375 -3.875l-4.859375 2.671875l0 -1.546875l3.90625 -2.171875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m921.35693 266.80344l0 87.811035l-38.393677 0l0 -87.811035z" fill-rule="evenodd"/><path fill="#666666" d="m917.1751 297.68942l-9.265625 1.984375l9.265625 5.21875l0 1.9375l-11.375 -1.984375l0 -1.453125l4.5 0.78125l4.578125 0.921875l-9.078125 -5.15625l0 -1.125l9.265625 -2.03125l-4.90625 -0.703125l-4.359375 -0.75l0 -1.46875l11.375 1.96875l0 1.859375zm-11.375 14.75q0.234375 -0.0625 0.453125 -0.0625l0.4375 0.03125q-1.078125 -1.171875 -1.046875 -2.46875q0.015625 -1.125 0.703125 -1.828125q0.703125 -0.6875 1.734375 -0.625q1.34375 0.078125 2.09375 1.171875q0.765625 1.09375 0.765625 2.890625l-0.015625 1.46875l0.671875 0.09375q0.765625 0.078125 1.203125 -0.296875q0.4375 -0.359375 0.453125 -1.109375q0.015625 -0.71875 -0.359375 -1.28125q-0.359375 -0.5625 -0.96875 -0.6875l-0.015625 -1.421875q0.75 0.078125 1.3125 0.578125q0.578125 0.515625 0.890625 1.3125q0.328125 0.796875 0.3125 1.640625q-0.03125 1.328125 -0.8125 2.0625q-0.765625 0.734375 -2.03125 0.609375l-4.1875 -0.6875l-0.609375 -0.03125q-0.421875 -0.015625 -0.84375 0.09375l-0.140625 -0.015625l0 -1.4375zm1.09375 -2.21875q-0.015625 0.671875 0.328125 1.28125q0.34375 0.609375 0.9375 1.046875l1.75 0.296875l0 -1.0625q0 -1.34375 -0.421875 -2.0625q-0.421875 -0.703125 -1.1875 -0.796875q-0.59375 -0.0625 -1.0 0.28125q-0.390625 0.34375 -0.40625 1.015625zm-1.09375 7.1015625l0 -1.40625l8.453125 1.46875l0 1.40625l-8.453125 -1.46875zm11.546875 1.15625q0.015625 0.359375 -0.21875 0.59375q-0.234375 0.25 -0.609375 0.25q-0.359375 -0.015625 -0.59375 -0.25q-0.234375 -0.21875 -0.25 -0.59375q-0.015625 -0.359375 0.203125 -0.59375q0.234375 -0.234375 0.59375 -0.234375q0.375 0.015625 0.609375 0.234375q0.25 0.234375 0.265625 0.59375zm-3.078125 3.953125l-1.078125 -0.203125q1.25 1.140625 1.21875 2.59375q-0.03125 1.203125 -0.828125 1.765625q-0.796875 0.578125 -2.234375 0.421875l-5.546875 -0.921875l0 -1.40625l5.5625 0.921875q0.390625 0.046875 0.71875 0.015625q1.09375 -0.140625 1.109375 -1.296875q0.03125 -1.265625 -1.359375 -2.234375l-6.03125 -1.046875l0 -1.40625l8.453125 1.46875l0.015625 1.328125z" fill-rule="nonzero"/><path fill="#666666" d="m896.94073 296.1738l0 -3.546875l-10.140625 -1.75l0 -1.46875l10.140625 1.765625l0 -3.546875l1.234375 0.21875l0 8.546875l-1.234375 -0.21875zm-2.71875 2.3671875q1.21875 1.109375 1.1875 2.546875q-0.015625 1.1875 -0.828125 1.765625q-0.796875 0.578125 -2.234375 0.421875l-5.546875 -0.921875l0 -1.40625l5.5625 0.921875q0.390625 0.046875 0.71875 0.015625q1.09375 -0.140625 1.109375 -1.296875q0.03125 -1.296875 -1.359375 -2.234375l-6.03125 -1.046875l0 -1.40625l12.0 2.078125l0 1.421875l-4.578125 -0.859375zm-0.25 11.234375l0.0625 -0.65625q0 -1.359375 -1.21875 -2.140625l-6.015625 -1.046875l0 -1.40625l8.453125 1.46875l0.015625 1.359375l-0.984375 -0.203125q1.171875 0.890625 1.140625 2.109375q0 0.265625 -0.109375 0.671875l-1.34375 -0.15625zm-7.328125 3.5859375q0.03125 -1.578125 1.15625 -2.46875q1.140625 -0.890625 2.90625 -0.75l0.34375 0.03125q1.25 0.140625 2.28125 0.75q1.046875 0.609375 1.578125 1.484375q0.53125 0.890625 0.5 1.921875q-0.03125 1.296875 -0.875 2.03125q-0.828125 0.75 -2.25 0.828125q-0.515625 0.015625 -1.015625 -0.03125l-0.65625 -0.09375l0 -5.515625q-1.140625 -0.140625 -1.953125 0.375q-0.796875 0.515625 -0.828125 1.546875q-0.03125 1.25 1.125 2.3125l-0.6875 0.8125q-0.765625 -0.53125 -1.203125 -1.375q-0.4375 -0.828125 -0.421875 -1.859375zm7.59375 0.890625q0.015625 -0.875 -0.609375 -1.53125q-0.609375 -0.640625 -1.828125 -1.03125l0 4.109375l0.125 0.03125q0.984375 0.125 1.625 -0.3125q0.65625 -0.4375 0.6875 -1.265625zm-7.4375 8.921875q0.234375 -0.0625 0.453125 -0.0625l0.4375 0.03125q-1.078125 -1.171875 -1.046875 -2.46875q0.015625 -1.125 0.703125 -1.828125q0.703125 -0.6875 1.734375 -0.625q1.34375 0.078125 2.09375 1.171875q0.765625 1.09375 0.765625 2.890625l-0.015625 1.46875l0.671875 0.09375q0.765625 0.078125 1.203125 -0.296875q0.4375 -0.359375 0.453125 -1.109375q0.015625 -0.71875 -0.359375 -1.28125q-0.359375 -0.5625 -0.96875 -0.6875l-0.015625 -1.421875q0.75 0.078125 1.3125 0.578125q0.578125 0.515625 0.890625 1.3125q0.328125 0.796875 0.3125 1.640625q-0.03125 1.328125 -0.8125 2.0625q-0.765625 0.734375 -2.03125 0.609375l-4.1875 -0.6875l-0.609375 -0.03125q-0.421875 -0.015625 -0.84375 0.09375l-0.140625 -0.015625l0 -1.4375zm1.09375 -2.21875q-0.015625 0.671875 0.328125 1.28125q0.34375 0.609375 0.9375 1.046875l1.75 0.296875l0 -1.0625q0 -1.34375 -0.421875 -2.0625q-0.421875 -0.703125 -1.1875 -0.796875q-0.59375 -0.0625 -1.0 0.28125q-0.390625 0.34375 -0.40625 1.015625zm3.15625 5.9765625q1.28125 0.15625 2.3125 0.703125q1.046875 0.5625 1.5625 1.375q0.515625 0.8125 0.5 1.78125q-0.03125 1.421875 -1.03125 2.171875l4.40625 0.8125l0 1.421875l-12.0 -2.078125l0 -1.296875l0.90625 0.15625q-1.09375 -1.0 -1.0625 -2.46875q0.03125 -1.171875 0.921875 -1.875q0.890625 -0.6875 2.375 -0.75q0.46875 -0.015625 1.109375 0.046875zm-0.8125 1.359375q-1.125 -0.03125 -1.75 0.390625q-0.609375 0.421875 -0.625 1.234375q-0.046875 1.234375 1.234375 2.1875l3.90625 0.671875q1.15625 -0.46875 1.1875 -1.703125q0.03125 -0.84375 -0.5 -1.484375q-0.53125 -0.625 -1.484375 -0.96875q-0.9375 -0.328125 -1.96875 -0.328125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m50.860584 310.7107l804.9523 0" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m50.860584 310.7107l798.95233 0" fill-rule="evenodd"/><path fill="#000000" stroke="#000000" stroke-width="1.0" stroke-linecap="butt" d="m849.8129 312.36243l4.538086 -1.6517334l-4.538086 -1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m51.657166 279.29974l0 62.813507" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m51.657166 279.29974l0 62.813507" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m38.608204 354.6003l115.755844 0l0 38.38669l-115.755844 0z" fill-rule="evenodd"/><path fill="#000000" d="m57.87383 370.15366l-2.34375 0l-4.5625 -7.484375l0 7.484375l-2.34375 0l0 -11.375l2.34375 0l4.578125 7.5l0 -7.5l2.328125 0l0 11.375zm6.796871 0q-0.15625 -0.3125 -0.21875 -0.765625q-0.8281212 0.921875 -2.1406212 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.0468712 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.2968712 -0.359375 -0.9374962 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5624962 0 2.4843712 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.8593712 -1.578125q0.5 0 0.921875 -0.21875q0.4218712 -0.21875 0.6249962 -0.59375l0 -1.453125l-0.8437462 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.585934 -1.1875l1.578125 -5.6875l2.359375 0l-2.859375 8.453125l-2.15625 0l-2.84375 -8.453125l2.359375 0l1.5625 5.6875zm7.3046875 2.765625l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.9296875 6.34375q0 -1.9375 0.921875 -3.125q0.921875 -1.1875 2.5 -1.1875q1.390625 0 2.15625 0.953125l0.09375 -0.796875l2.046875 0l0 8.171875q0 1.109375 -0.5 1.921875q-0.5 0.828125 -1.421875 1.25q-0.90625 0.4375 -2.140625 0.4375q-0.921875 0 -1.8125 -0.375q-0.875 -0.359375 -1.328125 -0.953125l1.0 -1.375q0.84375 0.953125 2.046875 0.953125q0.890625 0 1.390625 -0.484375q0.5 -0.484375 0.5 -1.375l0 -0.453125q-0.78125 0.890625 -2.046875 0.890625q-1.53125 0 -2.46875 -1.1875q-0.9375 -1.203125 -0.9375 -3.171875l0 -0.09375zm2.25 0.171875q0 1.140625 0.453125 1.796875q0.46875 0.65625 1.28125 0.65625q1.03125 0 1.46875 -0.78125l0 -3.546875q-0.453125 -0.78125 -1.453125 -0.78125q-0.8125 0 -1.28125 0.671875q-0.46875 0.65625 -0.46875 1.984375zm12.1015625 4.125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8125 -0.71875 -0.8125 -1.8125q0 -1.34375 1.0 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.265625 0q0 -0.734375 0.453125 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm8.25 -8.953125l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm5.078125 10.53125l-2.265625 0l0 -8.453125l2.265625 0l0 8.453125zm-2.390625 -10.640625q0 -0.515625 0.328125 -0.84375q0.34375 -0.328125 0.9375 -0.328125q0.578125 0 0.921875 0.328125q0.34375 0.328125 0.34375 0.84375q0 0.515625 -0.359375 0.84375q-0.34375 0.328125 -0.921875 0.328125q-0.5625 0 -0.90625 -0.328125q-0.34375 -0.328125 -0.34375 -0.84375zm3.8984375 6.328125q0 -1.25 0.484375 -2.234375q0.484375 -0.984375 1.390625 -1.515625q0.921875 -0.546875 2.125 -0.546875q1.703125 0 2.78125 1.046875q1.09375 1.046875 1.21875 2.84375l0.015625 0.578125q0 1.9375 -1.09375 3.125q-1.078125 1.171875 -2.90625 1.171875q-1.828125 0 -2.921875 -1.171875q-1.09375 -1.171875 -1.09375 -3.1875l0 -0.109375zm2.265625 0.171875q0 1.203125 0.453125 1.84375q0.453125 0.625 1.296875 0.625q0.8125 0 1.265625 -0.625q0.46875 -0.625 0.46875 -2.015625q0 -1.171875 -0.46875 -1.8125q-0.453125 -0.65625 -1.28125 -0.65625q-0.828125 0 -1.28125 0.640625q-0.453125 0.640625 -0.453125 2.0zm9.21875 -4.3125l0.0625 0.96875q0.90625 -1.125 2.4375 -1.125q1.34375 0 2.0 0.796875q0.65625 0.78125 0.671875 2.34375l0 5.46875l-2.265625 0l0 -5.40625q0 -0.71875 -0.3125 -1.046875q-0.3125 -0.328125 -1.03125 -0.328125q-0.953125 0 -1.4375 0.8125l0 5.96875l-2.25 0l0 -8.453125l2.125 0z" fill-rule="nonzero"/><path fill="#000000" d="m54.53008 386.16928q0 -0.671875 -0.46875 -1.015625q-0.46875 -0.359375 -1.6875 -0.75q-1.21875 -0.40625 -1.9375 -0.78125q-1.9375 -1.046875 -1.9375 -2.828125q0 -0.921875 0.515625 -1.640625q0.53125 -0.71875 1.5 -1.125q0.96875 -0.40625 2.1875 -0.40625q1.21875 0 2.171875 0.4375q0.953125 0.4375 1.46875 1.25q0.53125 0.796875 0.53125 1.828125l-2.34375 0q0 -0.78125 -0.5 -1.21875q-0.484375 -0.4375 -1.375 -0.4375q-0.859375 0 -1.34375 0.375q-0.46875 0.359375 -0.46875 0.953125q0 0.546875 0.5625 0.921875q0.5625 0.375 1.640625 0.703125q2.0 0.609375 2.90625 1.5q0.921875 0.890625 0.921875 2.21875q0 1.46875 -1.125 2.3125q-1.109375 0.84375 -3.0 0.84375q-1.3125 0 -2.390625 -0.484375q-1.078125 -0.484375 -1.640625 -1.3125q-0.5625 -0.84375 -0.5625 -1.9375l2.34375 0q0 1.875 2.25 1.875q0.84375 0 1.3125 -0.328125q0.46875 -0.34375 0.46875 -0.953125zm6.4921875 -7.546875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0zm7.593746 10.53125q-0.15625 -0.3125 -0.21875 -0.765625q-0.828125 0.921875 -2.140625 0.921875q-1.234375 0 -2.0625 -0.71875q-0.8124962 -0.71875 -0.8124962 -1.8125q0 -1.34375 0.9999962 -2.0625q1.0 -0.71875 2.875 -0.734375l1.046875 0l0 -0.484375q0 -0.578125 -0.3125 -0.921875q-0.296875 -0.359375 -0.9375 -0.359375q-0.578125 0 -0.90625 0.28125q-0.3125 0.265625 -0.3125 0.734375l-2.2656212 0q0 -0.734375 0.4531212 -1.359375q0.453125 -0.625 1.28125 -0.96875q0.828125 -0.359375 1.859375 -0.359375q1.5625 0 2.484375 0.78125q0.921875 0.78125 0.921875 2.203125l0 3.671875q0 1.203125 0.328125 1.8125l0 0.140625l-2.28125 0zm-1.859375 -1.578125q0.5 0 0.921875 -0.21875q0.421875 -0.21875 0.625 -0.59375l0 -1.453125l-0.84375 0q-1.703125 0 -1.8125 1.171875l0 0.125q0 0.421875 0.296875 0.703125q0.296875 0.265625 0.8125 0.265625zm10.296875 -4.765625q-0.46875 -0.0625 -0.8125 -0.0625q-1.28125 0 -1.6875 0.875l0 5.53125l-2.25 0l0 -8.453125l2.125 0l0.0625 1.0q0.6875 -1.15625 1.890625 -1.15625q0.375 0 0.703125 0.09375l-0.03125 2.171875zm4.1796875 -4.1875l0 2.078125l1.4375 0l0 1.65625l-1.4375 0l0 4.21875q0 0.46875 0.171875 0.671875q0.1875 0.203125 0.6875 0.203125q0.375 0 0.671875 -0.0625l0 1.71875q-0.671875 0.203125 -1.375 0.203125q-2.375 0 -2.421875 -2.40625l0 -4.546875l-1.234375 0l0 -1.65625l1.234375 0l0 -2.078125l2.265625 0z" fill-rule="nonzero"/><path fill="#d9ead3" d="m559.6531 294.09167l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m559.6531 294.09167l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path fill="#d9ead3" d="m586.6276 294.09167l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m586.6276 294.09167l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path fill="#ff9900" d="m260.72144 294.0925l62.825195 0l0 29.695374l-62.825195 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m260.72144 294.0925l62.825195 0l0 29.695374l-62.825195 0z" fill-rule="evenodd"/><path fill="#d9ead3" d="m118.22767 295.86404l15.361687 0l0 29.695374l-15.361687 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m118.22767 295.86404l15.361687 0l0 29.695374l-15.361687 0z" fill-rule="evenodd"/><path fill="#ff9900" d="m372.9741 294.09055l72.801544 0l0 29.695374l-72.801544 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m372.9741 294.09055l72.801544 0l0 29.695374l-72.801544 0z" fill-rule="evenodd"/><path fill="#d9ead3" d="m340.5816 294.0925l15.361664 0l0 29.695374l-15.361664 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m340.5816 294.0925l15.361664 0l0 29.695374l-15.361664 0z" fill-rule="evenodd"/><path fill="#d9ead3" d="m146.744 295.86404l39.41469 0l0 29.695374l-39.41469 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m146.744 295.86404l39.41469 0l0 29.695374l-39.41469 0z" fill-rule="evenodd"/><path fill="#ff9900" d="m50.860413 458.48575l35.267624 0l0 16.401367l-35.267624 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m50.860413 458.48575l35.267624 0l0 16.401367l-35.267624 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m98.55425 447.49518l317.1516 0l0 38.38669l-317.1516 0z" fill-rule="evenodd"/><path fill="#000000" d="m109.91363 470.4729l4.484375 0l0 1.015625l-5.75 0l0 -9.46875l1.265625 0l0 8.453125zm5.4060516 -2.5625q0 -1.046875 0.40625 -1.875q0.40625 -0.828125 1.125 -1.265625q0.734375 -0.453125 1.65625 -0.453125q1.4375 0 2.328125 1.0q0.890625 0.984375 0.890625 2.640625l0 0.09375q0 1.015625 -0.390625 1.84375q-0.390625 0.8125 -1.125 1.265625q-0.734375 0.453125 -1.6875 0.453125q-1.421875 0 -2.3125 -0.984375q-0.890625 -1.0 -0.890625 -2.640625l0 -0.078125zm1.203125 0.140625q0 1.171875 0.546875 1.875q0.546875 0.703125 1.453125 0.703125q0.921875 0 1.453125 -0.71875q0.546875 -0.71875 0.546875 -2.0q0 -1.171875 -0.546875 -1.890625q-0.546875 -0.71875 -1.46875 -0.71875q-0.890625 0 -1.4375 0.71875q-0.546875 0.703125 -0.546875 2.03125zm7.8511963 -3.609375l0.046875 0.890625q0.796875 -1.015625 2.109375 -1.015625q2.2343674 0 2.2499924 2.515625l0 4.65625l-1.2031174 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -7.046875l1.140625 0zm5.9320145 3.46875q0 -1.640625 0.75 -2.609375q0.765625 -0.984375 2.03125 -0.984375q1.28125 0 2.015625 0.90625l0.046875 -0.78125l1.109375 0l0 6.875q0 1.375 -0.8125 2.15625q-0.8125 0.78125 -2.1875 0.78125q-0.75 0 -1.484375 -0.328125q-0.734375 -0.3125 -1.109375 -0.875l0.625 -0.734375q0.765625 0.96875 1.890625 0.96875q0.875 0 1.359375 -0.5q0.5 -0.5 0.5 -1.390625l0 -0.609375q-0.71875 0.828125 -1.96875 0.828125q-1.234375 0 -2.0 -0.984375q-0.765625 -1.0 -0.765625 -2.71875zm1.203125 0.140625q0 1.1875 0.484375 1.875q0.5 0.671875 1.375 0.671875q1.140625 0 1.671875 -1.03125l0 -3.21875q-0.546875 -1.015625 -1.65625 -1.015625q-0.875 0 -1.375 0.6875q-0.5 0.6875 -0.5 2.03125zm11.495804 -5.3125l0 1.703125l1.3125 0l0 0.9375l-1.3125 0l0 4.359375q0 0.421875 0.171875 0.640625q0.171875 0.21875 0.59375 0.21875q0.21875 0 0.578125 -0.078125l0 0.96875q-0.46875 0.125 -0.921875 0.125q-0.8125 0 -1.21875 -0.484375q-0.40625 -0.484375 -0.40625 -1.390625l0 -4.359375l-1.28125 0l0 -0.9375l1.28125 0l0 -1.703125l1.203125 0zm7.072525 8.75q-0.109375 -0.203125 -0.171875 -0.734375q-0.84375 0.859375 -2.015625 0.859375q-1.03125 0 -1.703125 -0.578125q-0.671875 -0.59375 -0.671875 -1.5q0 -1.09375 0.828125 -1.703125q0.84375 -0.609375 2.359375 -0.609375l1.171875 0l0 -0.5625q0 -0.625 -0.375 -1.0q-0.375 -0.375 -1.109375 -0.375q-0.640625 0 -1.078125 0.328125q-0.4375 0.328125 -0.4375 0.78125l-1.203125 0q0 -0.515625 0.359375 -1.0q0.375 -0.5 1.015625 -0.78125q0.65625 -0.296875 1.421875 -0.296875q1.21875 0 1.90625 0.609375q0.6875 0.609375 0.71875 1.671875l0 3.25q0 0.96875 0.234375 1.53125l0 0.109375l-1.25 0zm-2.0 -0.921875q0.5625 0 1.0625 -0.28125q0.515625 -0.296875 0.734375 -0.765625l0 -1.453125l-0.9375 0q-2.21875 0 -2.21875 1.296875q0 0.5625 0.375 0.890625q0.390625 0.3125 0.984375 0.3125zm8.999771 -0.953125q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75zm4.7316895 -1.390625l-0.75 0.796875l0 2.46875l-1.203125 0l0 -10.0l1.203125 0l0 6.046875l0.640625 -0.765625l2.1875 -2.328125l1.46875 0l-2.734375 2.953125l3.046875 4.09375l-1.40625 0l-2.453125 -3.265625zm8.039047 -0.578125q0 -1.46875 0.390625 -2.828125q0.40625 -1.359375 1.1875 -2.453125q0.78125 -1.109375 1.609375 -1.5625l0.25 0.78125q-0.953125 0.734375 -1.5625 2.234375q-0.59375 1.5 -0.65625 3.34375l-0.015625 0.5625q0 2.515625 0.921875 4.359375q0.5625 1.109375 1.3125 1.734375l-0.25 0.734375q-0.859375 -0.484375 -1.640625 -1.625q-1.546875 -2.203125 -1.546875 -5.28125zm6.2430115 -4.90625l0 1.703125l1.3125 0l0 0.9375l-1.3125 0l0 4.359375q0 0.421875 0.171875 0.640625q0.171875 0.21875 0.59375 0.21875q0.21875 0 0.578125 -0.078125l0 0.96875q-0.46875 0.125 -0.921875 0.125q-0.8125 0 -1.21875 -0.484375q-0.40625 -0.484375 -0.40625 -1.390625l0 -4.359375l-1.28125 0l0 -0.9375l1.28125 0l0 -1.703125l1.203125 0zm7.072525 8.75q-0.109375 -0.203125 -0.171875 -0.734375q-0.84375 0.859375 -2.015625 0.859375q-1.03125 0 -1.703125 -0.578125q-0.671875 -0.59375 -0.671875 -1.5q0 -1.09375 0.828125 -1.703125q0.84375 -0.609375 2.359375 -0.609375l1.171875 0l0 -0.5625q0 -0.625 -0.375 -1.0q-0.375 -0.375 -1.109375 -0.375q-0.640625 0 -1.078125 0.328125q-0.4375 0.328125 -0.4375 0.78125l-1.203125 0q0 -0.515625 0.359375 -1.0q0.375 -0.5 1.015625 -0.78125q0.65625 -0.296875 1.421875 -0.296875q1.21875 0 1.90625 0.609375q0.6875 0.609375 0.71875 1.671875l0 3.25q0 0.96875 0.234375 1.53125l0 0.109375l-1.25 0zm-2.0 -0.921875q0.5625 0 1.0625 -0.28125q0.515625 -0.296875 0.734375 -0.765625l0 -1.453125l-0.9375 0q-2.21875 0 -2.21875 1.296875q0 0.5625 0.375 0.890625q0.390625 0.3125 0.984375 0.3125zm8.999771 -0.953125q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75zm4.7316895 -1.390625l-0.75 0.796875l0 2.46875l-1.203125 0l0 -10.0l1.203125 0l0 6.046875l0.640625 -0.765625l2.1875 -2.328125l1.46875 0l-2.734375 2.953125l3.046875 4.09375l-1.40625 0l-2.453125 -3.265625zm9.398422 3.265625l-1.203125 0l0 -10.0l1.203125 0l0 10.0zm1.6094208 -3.578125q0 -1.046875 0.40625 -1.875q0.40625 -0.828125 1.125 -1.265625q0.734375 -0.453125 1.65625 -0.453125q1.4375 0 2.328125 1.0q0.890625 0.984375 0.890625 2.640625l0 0.09375q0 1.015625 -0.390625 1.84375q-0.390625 0.8125 -1.125 1.265625q-0.734375 0.453125 -1.6875 0.453125q-1.421875 0 -2.3125 -0.984375q-0.890625 -1.0 -0.890625 -2.640625l0 -0.078125zm1.203125 0.140625q0 1.171875 0.546875 1.875q0.546875 0.703125 1.453125 0.703125q0.921875 0 1.453125 -0.71875q0.546875 -0.71875 0.546875 -2.0q0 -1.171875 -0.546875 -1.890625q-0.546875 -0.71875 -1.46875 -0.71875q-0.890625 0 -1.4375 0.71875q-0.546875 0.703125 -0.546875 2.03125zm7.8511963 -3.609375l0.046875 0.890625q0.796875 -1.015625 2.109375 -1.015625q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -7.046875l1.140625 0zm5.932022 3.46875q0 -1.640625 0.75 -2.609375q0.765625 -0.984375 2.03125 -0.984375q1.28125 0 2.015625 0.90625l0.046875 -0.78125l1.109375 0l0 6.875q0 1.375 -0.8125 2.15625q-0.8125 0.78125 -2.1875 0.78125q-0.75 0 -1.484375 -0.328125q-0.734375 -0.3125 -1.109375 -0.875l0.625 -0.734375q0.765625 0.96875 1.890625 0.96875q0.875 0 1.359375 -0.5q0.5 -0.5 0.5 -1.390625l0 -0.609375q-0.71875 0.828125 -1.96875 0.828125q-1.234375 0 -2.0 -0.984375q-0.765625 -1.0 -0.765625 -2.71875zm1.203125 0.140625q0 1.1875 0.484375 1.875q0.5 0.671875 1.375 0.671875q1.140625 0 1.671875 -1.03125l0 -3.21875q-0.546875 -1.015625 -1.65625 -1.015625q-0.875 0 -1.375 0.6875q-0.5 0.6875 -0.5 2.03125zm9.477554 3.5625q-1.421875 0 -2.328125 -0.9375q-0.890625 -0.9375 -0.890625 -2.515625l0 -0.21875q0 -1.046875 0.390625 -1.859375q0.40625 -0.828125 1.125 -1.296875q0.71875 -0.46875 1.5625 -0.46875q1.375 0 2.125 0.90625q0.765625 0.90625 0.765625 2.59375l0 0.5l-4.765625 0q0.015625 1.03125 0.59375 1.671875q0.59375 0.640625 1.484375 0.640625q0.640625 0 1.078125 -0.25q0.453125 -0.265625 0.78125 -0.6875l0.734375 0.5625q-0.875 1.359375 -2.65625 1.359375zm-0.140625 -6.3125q-0.734375 0 -1.234375 0.53125q-0.484375 0.53125 -0.609375 1.484375l3.53125 0l0 -0.078125q-0.046875 -0.921875 -0.5 -1.421875q-0.4375 -0.515625 -1.1875 -0.515625zm7.6860504 0.21875q-0.265625 -0.03125 -0.59375 -0.03125q-1.1875 0 -1.609375 1.0l0 5.0l-1.203125 0l0 -7.046875l1.171875 0l0.03125 0.8125q0.578125 -0.9375 1.671875 -0.9375q0.34375 0 0.53125 0.09375l0 1.109375zm6.0438385 -2.78125l0 1.703125l1.3125 0l0 0.9375l-1.3125 0l0 4.359375q0 0.421875 0.171875 0.640625q0.171875 0.21875 0.59375 0.21875q0.21875 0 0.578125 -0.078125l0 0.96875q-0.46875 0.125 -0.921875 0.125q-0.8125 0 -1.21875 -0.484375q-0.40625 -0.484375 -0.40625 -1.390625l0 -4.359375l-1.28125 0l0 -0.9375l1.28125 0l0 -1.703125l1.203125 0zm3.916275 2.5625q0.8125 -0.984375 2.09375 -0.984375q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -10.0l1.203125 0l0 3.8125zm10.497131 6.1875q-0.109375 -0.203125 -0.171875 -0.734375q-0.84375 0.859375 -2.015625 0.859375q-1.03125 0 -1.703125 -0.578125q-0.671875 -0.59375 -0.671875 -1.5q0 -1.09375 0.828125 -1.703125q0.84375 -0.609375 2.359375 -0.609375l1.171875 0l0 -0.5625q0 -0.625 -0.375 -1.0q-0.375 -0.375 -1.109375 -0.375q-0.640625 0 -1.078125 0.328125q-0.4375 0.328125 -0.4375 0.78125l-1.203125 0q0 -0.515625 0.359375 -1.0q0.375 -0.5 1.015625 -0.78125q0.65625 -0.296875 1.421875 -0.296875q1.21875 0 1.90625 0.609375q0.6875 0.609375 0.71875 1.671875l0 3.25q0 0.96875 0.234375 1.53125l0 0.109375l-1.25 0zm-2.0 -0.921875q0.5625 0 1.0625 -0.28125q0.515625 -0.296875 0.734375 -0.765625l0 -1.453125l-0.9375 0q-2.21875 0 -2.21875 1.296875q0 0.5625 0.375 0.890625q0.390625 0.3125 0.984375 0.3125zm6.0310364 -6.125l0.046875 0.890625q0.796875 -1.015625 2.109375 -1.015625q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -7.046875l1.140625 0zm9.950256 2.296875l0.484375 -4.71875l4.84375 0l0 1.109375l-3.828125 0l-0.28125 2.578125q0.6875 -0.40625 1.578125 -0.40625q1.296875 0 2.046875 0.859375q0.765625 0.84375 0.765625 2.3125q0 1.453125 -0.796875 2.296875q-0.78125 0.84375 -2.203125 0.84375q-1.25 0 -2.046875 -0.6875q-0.796875 -0.703125 -0.90625 -1.9375l1.140625 0q0.109375 0.828125 0.578125 1.234375q0.46875 0.40625 1.234375 0.40625q0.84375 0 1.3125 -0.5625q0.484375 -0.578125 0.484375 -1.578125q0 -0.953125 -0.515625 -1.53125q-0.515625 -0.578125 -1.375 -0.578125q-0.78125 0 -1.234375 0.34375l-0.328125 0.265625l-0.953125 -0.25zm12.874695 0.703125q0 2.125 -0.734375 3.15625q-0.71875 1.015625 -2.25 1.015625q-1.515625 0 -2.25 -1.0q-0.71875 -1.0 -0.75 -3.0l0 -1.609375q0 -2.09375 0.71875 -3.109375q0.71875 -1.015625 2.265625 -1.015625q1.53125 0 2.25 0.984375q0.71875 0.984375 0.75 3.015625l0 1.5625zm-1.203125 -1.640625q0 -1.53125 -0.4375 -2.21875q-0.421875 -0.703125 -1.359375 -0.703125q-0.921875 0 -1.34375 0.703125q-0.421875 0.6875 -0.4375 2.125l0 1.921875q0 1.546875 0.4375 2.28125q0.453125 0.71875 1.359375 0.71875q0.890625 0 1.3125 -0.6875q0.4375 -0.6875 0.46875 -2.171875l0 -1.96875zm7.299164 -1.359375l0.03125 0.78125q0.765625 -0.90625 2.09375 -0.90625q1.46875 0 2.0 1.125q0.359375 -0.5 0.921875 -0.8125q0.5625 -0.3125 1.328125 -0.3125q2.3125 0 2.359375 2.453125l0 4.71875l-1.203125 0l0 -4.640625q0 -0.765625 -0.34375 -1.140625q-0.34375 -0.375 -1.171875 -0.375q-0.65625 0 -1.109375 0.40625q-0.4375 0.40625 -0.515625 1.078125l0 4.671875l-1.203125 0l0 -4.609375q0 -1.546875 -1.5 -1.546875q-1.1875 0 -1.625 1.015625l0 5.140625l-1.203125 0l0 -7.046875l1.140625 0zm14.650391 5.171875q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75zm5.5441895 -1.90625q0 1.453125 -0.390625 2.78125q-0.375 1.328125 -1.15625 2.453125q-0.78125 1.125 -1.640625 1.609375l-0.25 -0.734375q1.0 -0.765625 1.609375 -2.375q0.609375 -1.625 0.625 -3.609375l0 -0.203125q0 -1.359375 -0.296875 -2.53125q-0.28125 -1.1875 -0.796875 -2.109375q-0.5 -0.9375 -1.140625 -1.453125l0.25 -0.734375q0.859375 0.46875 1.640625 1.59375q0.78125 1.109375 1.15625 2.453125q0.390625 1.328125 0.390625 2.859375z" fill-rule="nonzero"/><path fill="#d9ead3" d="m50.860416 493.40756l35.267628 0l0 16.401367l-35.267628 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m50.860416 493.40756l35.267628 0l0 16.401367l-35.267628 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m97.59492 481.59384l317.15164 0l0 38.38669l-317.15164 0z" fill-rule="evenodd"/><path fill="#000000" d="m114.23554 497.13406l-3.046875 0l0 8.453125l-1.234375 0l0 -8.453125l-3.046875 0l0 -1.015625l7.328125 0l0 1.015625zm4.8419495 8.453125q-0.109375 -0.203125 -0.171875 -0.734375q-0.84375 0.859375 -2.015625 0.859375q-1.03125 0 -1.703125 -0.578125q-0.671875 -0.59375 -0.671875 -1.5q0 -1.09375 0.828125 -1.703125q0.84375 -0.609375 2.359375 -0.609375l1.171875 0l0 -0.5625q0 -0.625 -0.375 -1.0q-0.375 -0.375 -1.109375 -0.375q-0.640625 0 -1.078125 0.328125q-0.4375 0.328125 -0.4375 0.78125l-1.203125 0q0 -0.515625 0.359375 -1.0q0.375 -0.5 1.015625 -0.78125q0.65625 -0.296875 1.421875 -0.296875q1.21875 0 1.90625 0.609375q0.6875 0.609375 0.71875 1.671875l0 3.25q0 0.96875 0.234375 1.53125l0 0.109375l-1.25 0zm-2.0 -0.921875q0.5625 0 1.0625 -0.28125q0.515625 -0.296875 0.734375 -0.765625l0 -1.453125l-0.9375 0q-2.21875 0 -2.21875 1.296875q0 0.5625 0.375 0.890625q0.390625 0.3125 0.984375 0.3125zm8.999771 -0.953125q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75zm4.731682 -1.390625l-0.75 0.796875l0 2.46875l-1.203125 0l0 -10.0l1.203125 0l0 6.046875l0.640625 -0.765625l2.1875 -2.328125l1.46875 0l-2.734375 2.953125l3.046875 4.09375l-1.40625 0l-2.453125 -3.265625zm12.195297 1.390625q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75zm3.9660645 -4.3125q0.8125 -0.984375 2.09375 -0.984375q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -10.0l1.203125 0l0 3.8125zm5.8252563 2.609375q0 -1.046875 0.40625 -1.875q0.40625 -0.828125 1.125 -1.265625q0.734375 -0.453125 1.65625 -0.453125q1.4375 0 2.328125 1.0q0.890625 0.984375 0.890625 2.640625l0 0.09375q0 1.015625 -0.390625 1.84375q-0.390625 0.8125 -1.125 1.265625q-0.734375 0.453125 -1.6875 0.453125q-1.421875 0 -2.3125 -0.984375q-0.890625 -1.0 -0.890625 -2.640625l0 -0.078125zm1.203125 0.140625q0 1.171875 0.546875 1.875q0.546875 0.703125 1.453125 0.703125q0.921875 0 1.453125 -0.71875q0.546875 -0.71875 0.546875 -2.0q0 -1.171875 -0.546875 -1.890625q-0.546875 -0.71875 -1.46875 -0.71875q-0.890625 0 -1.4375 0.71875q-0.546875 0.703125 -0.546875 2.03125zm10.116821 -2.53125q-0.265625 -0.03125 -0.59375 -0.03125q-1.1875 0 -1.609375 1.0l0 5.0l-1.203125 0l0 -7.046875l1.171875 0l0.03125 0.8125q0.578125 -0.9375 1.671875 -0.9375q0.34375 0 0.53125 0.09375l0 1.109375zm3.0698547 -2.78125l0 1.703125l1.3125 0l0 0.9375l-1.3125 0l0 4.359375q0 0.421875 0.171875 0.640625q0.171875 0.21875 0.59375 0.21875q0.21875 0 0.578125 -0.078125l0 0.96875q-0.46875 0.125 -0.921875 0.125q-0.8125 0 -1.21875 -0.484375q-0.40625 -0.484375 -0.40625 -1.390625l0 -4.359375l-1.28125 0l0 -0.9375l1.28125 0l0 -1.703125l1.203125 0zm5.635025 8.875q-1.421875 0 -2.328125 -0.9375q-0.890625 -0.9375 -0.890625 -2.515625l0 -0.21875q0 -1.046875 0.390625 -1.859375q0.40625 -0.828125 1.125 -1.296875q0.71875 -0.46875 1.5625 -0.46875q1.375 0 2.125 0.90625q0.765625 0.90625 0.765625 2.59375l0 0.5l-4.765625 0q0.015625 1.03125 0.59375 1.671875q0.59375 0.640625 1.484375 0.640625q0.640625 0 1.078125 -0.25q0.453125 -0.265625 0.78125 -0.6875l0.734375 0.5625q-0.875 1.359375 -2.65625 1.359375zm-0.140625 -6.3125q-0.734375 0 -1.234375 0.53125q-0.484375 0.53125 -0.609375 1.484375l3.53125 0l0 -0.078125q-0.046875 -0.921875 -0.5 -1.421875q-0.4375 -0.515625 -1.1875 -0.515625zm7.6860504 0.21875q-0.265625 -0.03125 -0.59375 -0.03125q-1.1875 0 -1.609375 1.0l0 5.0l-1.203125 0l0 -7.046875l1.171875 0l0.03125 0.8125q0.578125 -0.9375 1.671875 -0.9375q0.34375 0 0.53125 0.09375l0 1.109375zm6.0438385 -2.78125l0 1.703125l1.3125 0l0 0.9375l-1.3125 0l0 4.359375q0 0.421875 0.171875 0.640625q0.171875 0.21875 0.59375 0.21875q0.21875 0 0.578125 -0.078125l0 0.96875q-0.46875 0.125 -0.921875 0.125q-0.8125 0 -1.21875 -0.484375q-0.40625 -0.484375 -0.40625 -1.390625l0 -4.359375l-1.28125 0l0 -0.9375l1.28125 0l0 -1.703125l1.203125 0zm3.916275 2.5625q0.8125 -0.984375 2.09375 -0.984375q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -10.0l1.203125 0l0 3.8125zm10.497131 6.1875q-0.109375 -0.203125 -0.171875 -0.734375q-0.84375 0.859375 -2.015625 0.859375q-1.03125 0 -1.703125 -0.578125q-0.671875 -0.59375 -0.671875 -1.5q0 -1.09375 0.828125 -1.703125q0.84375 -0.609375 2.359375 -0.609375l1.171875 0l0 -0.5625q0 -0.625 -0.375 -1.0q-0.375 -0.375 -1.109375 -0.375q-0.640625 0 -1.078125 0.328125q-0.4375 0.328125 -0.4375 0.78125l-1.203125 0q0 -0.515625 0.359375 -1.0q0.375 -0.5 1.015625 -0.78125q0.65625 -0.296875 1.421875 -0.296875q1.21875 0 1.90625 0.609375q0.6875 0.609375 0.71875 1.671875l0 3.25q0 0.96875 0.234375 1.53125l0 0.109375l-1.25 0zm-2.0 -0.921875q0.5625 0 1.0625 -0.28125q0.515625 -0.296875 0.734375 -0.765625l0 -1.453125l-0.9375 0q-2.21875 0 -2.21875 1.296875q0 0.5625 0.375 0.890625q0.390625 0.3125 0.984375 0.3125zm6.031021 -6.125l0.046875 0.890625q0.796875 -1.015625 2.109375 -1.015625q2.234375 0 2.25 2.515625l0 4.65625l-1.203125 0l0 -4.65625q-0.015625 -0.765625 -0.359375 -1.125q-0.328125 -0.375 -1.0625 -0.375q-0.578125 0 -1.03125 0.3125q-0.4375 0.3125 -0.6875 0.828125l0 5.015625l-1.203125 0l0 -7.046875l1.140625 0zm9.950272 2.296875l0.484375 -4.71875l4.84375 0l0 1.109375l-3.828125 0l-0.28125 2.578125q0.6875 -0.40625 1.578125 -0.40625q1.296875 0 2.046875 0.859375q0.765625 0.84375 0.765625 2.3125q0 1.453125 -0.796875 2.296875q-0.78125 0.84375 -2.203125 0.84375q-1.25 0 -2.046875 -0.6875q-0.796875 -0.703125 -0.90625 -1.9375l1.140625 0q0.109375 0.828125 0.578125 1.234375q0.46875 0.40625 1.234375 0.40625q0.84375 0 1.3125 -0.5625q0.484375 -0.578125 0.484375 -1.578125q0 -0.953125 -0.515625 -1.53125q-0.515625 -0.578125 -1.375 -0.578125q-0.78125 0 -1.234375 0.34375l-0.328125 0.265625l-0.953125 -0.25zm12.87468 0.703125q0 2.125 -0.734375 3.15625q-0.71875 1.015625 -2.25 1.015625q-1.515625 0 -2.25 -1.0q-0.71875 -1.0 -0.75 -3.0l0 -1.609375q0 -2.09375 0.71875 -3.109375q0.71875 -1.015625 2.265625 -1.015625q1.53125 0 2.25 0.984375q0.71875 0.984375 0.75 3.015625l0 1.5625zm-1.203125 -1.640625q0 -1.53125 -0.4375 -2.21875q-0.421875 -0.703125 -1.359375 -0.703125q-0.921875 0 -1.34375 0.703125q-0.421875 0.6875 -0.4375 2.125l0 1.921875q0 1.546875 0.4375 2.28125q0.453125 0.71875 1.359375 0.71875q0.890625 0 1.3125 -0.6875q0.4375 -0.6875 0.46875 -2.171875l0 -1.96875zm3.9996796 -1.359375l0.03125 0.78125q0.765625 -0.90625 2.09375 -0.90625q1.46875 0 2.0 1.125q0.359375 -0.5 0.921875 -0.8125q0.5625 -0.3125 1.328125 -0.3125q2.3125 0 2.359375 2.453125l0 4.71875l-1.203125 0l0 -4.640625q0 -0.765625 -0.34375 -1.140625q-0.34375 -0.375 -1.171875 -0.375q-0.65625 0 -1.109375 0.40625q-0.4375 0.40625 -0.515625 1.078125l0 4.671875l-1.203125 0l0 -4.609375q0 -1.546875 -1.5 -1.546875q-1.1875 0 -1.625 1.015625l0 5.140625l-1.203125 0l0 -7.046875l1.140625 0zm14.650391 5.171875q0 -0.484375 -0.375 -0.75q-0.359375 -0.265625 -1.28125 -0.453125q-0.90625 -0.203125 -1.453125 -0.46875q-0.53125 -0.28125 -0.796875 -0.65625q-0.25 -0.390625 -0.25 -0.90625q0 -0.859375 0.734375 -1.453125q0.734375 -0.609375 1.875 -0.609375q1.1875 0 1.9375 0.625q0.75 0.609375 0.75 1.578125l-1.21875 0q0 -0.5 -0.421875 -0.859375q-0.421875 -0.359375 -1.046875 -0.359375q-0.65625 0 -1.03125 0.296875q-0.375 0.28125 -0.375 0.75q0 0.421875 0.34375 0.65625q0.34375 0.21875 1.25 0.421875q0.90625 0.203125 1.453125 0.484375q0.5625 0.265625 0.828125 0.671875q0.28125 0.390625 0.28125 0.953125q0 0.9375 -0.765625 1.515625q-0.75 0.5625 -1.953125 0.5625q-0.84375 0 -1.5 -0.296875q-0.640625 -0.296875 -1.015625 -0.828125q-0.359375 -0.546875 -0.359375 -1.171875l1.203125 0q0.03125 0.609375 0.484375 0.96875q0.453125 0.34375 1.1875 0.34375q0.6875 0 1.09375 -0.265625q0.421875 -0.28125 0.421875 -0.75z" fill-rule="nonzero"/><path fill="#d9ead3" d="m671.1441 294.0907l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m671.1441 294.0907l15.361694 0l0 29.695374l-15.361694 0z" fill-rule="evenodd"/><path fill="#d9ead3" d="m472.84604 294.09036l15.361664 0l0 29.695343l-15.361664 0z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m472.84604 294.09036l15.361664 0l0 29.695343l-15.361664 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m446.2209 23.580053l-0.12597656 451.3071" fill-rule="evenodd"/><path stroke="#ff0000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" stroke-dasharray="4.0,3.0" d="m446.2209 23.580053l-0.12597656 451.3071" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m542.1074 382.05032l-82.98816 0" fill-rule="evenodd"/><path stroke="#434343" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m542.1074 382.05032l-76.98816 0" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="1.0" stroke-linecap="butt" d="m465.11926 380.3986l-4.5381165 1.6517334l4.5381165 1.6517334z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m414.67758 474.88715l62.834625 0l0 41.95276l-62.834625 0z" fill-rule="evenodd"/><path fill="#000000" d="m443.38004 492.23914l-3.484375 0l0 9.484375l-2.34375 0l0 -9.484375l-3.4375 0l0 -1.890625l9.265625 0l0 1.890625zm10.0234375 0l-3.484375 0l0 9.484375l-2.34375 0l0 -9.484375l-3.4375 0l0 -1.890625l9.265625 0l0 1.890625zm3.8359375 9.484375l-2.34375 0l0 -11.375l2.34375 0l0 11.375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m206.03937 210.65486l35.27559 0l0 29.700775l-35.27559 0z" fill-rule="evenodd"/><path fill="#000000" d="m228.83342 220.10088q2.109375 2.109375 2.109375 5.09375q0 2.984375 -2.109375 5.09375q-2.109375 2.109375 -5.09375 2.109375q-2.984375 0 -5.09375 -2.109375q-2.109375 -2.109375 -2.109375 -5.09375q0 -2.984375 2.109375 -5.09375q2.109375 -2.109375 5.09375 -2.109375q2.984375 0 5.09375 2.109375zm-0.40625 9.78125q1.9375 -1.9375 1.9375 -4.6875q0 -2.75 -1.9375 -4.6875q-1.9375 -1.9375 -4.6875 -1.9375q-2.75 0 -4.6875 1.9375q-1.9375 1.9375 -1.9375 4.6875q0 2.75 1.9375 4.6875q1.9375 1.9375 4.6875 1.9375q2.75 0 4.6875 -1.9375zm-3.8125 -9.78125l0 10.015625l-1.34375 0l0 -7.859375l-2.28125 0l0 -0.9375q2.15625 0.125 2.75 -1.21875l0.875 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m501.2047 217.91602l35.275574 0l0 29.700775l-35.275574 0z" fill-rule="evenodd"/><path fill="#000000" d="m521.9519 230.17453q0 1.171875 -0.828125 2.109375q-0.703125 0.640625 -1.8125 1.453125q-1.984375 1.46875 -2.28125 2.34375l5.21875 0l0 1.296875l-6.75 0l0 -1.171875q0.59375 -1.40625 2.109375 -2.640625q1.640625 -1.28125 2.296875 -1.9375q0.640625 -0.578125 0.640625 -1.453125q0 -0.765625 -0.53125 -1.296875q-0.34375 -0.34375 -1.171875 -0.34375q-0.8125 0 -1.171875 0.34375q-0.53125 0.53125 -0.40625 1.46875l-1.46875 0q-0.0625 -1.40625 0.765625 -2.234375q0.875 -0.875 2.28125 -0.875q1.40625 0 2.234375 0.828125q0.875 0.875 0.875 2.109375zm2.046875 -2.8125q2.109375 2.109375 2.109375 5.09375q0 2.984375 -2.109375 5.09375q-2.109375 2.109375 -5.09375 2.109375q-2.984375 0 -5.09375 -2.109375q-2.109375 -2.109375 -2.109375 -5.09375q0 -2.984375 2.109375 -5.09375q2.109375 -2.109375 5.09375 -2.109375q2.984375 0 5.09375 2.109375zm-0.40625 9.78125q1.9375 -1.9375 1.9375 -4.6875q0 -2.75 -1.9375 -4.6875q-1.9375 -1.9375 -4.6875 -1.9375q-2.75 0 -4.6875 1.9375q-1.9375 1.9375 -1.9375 4.6875q0 2.75 1.9375 4.6875q1.9375 1.9375 4.6875 1.9375q2.75 0 4.6875 -1.9375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m459.1181 352.3491l35.275604 0l0 29.700775l-35.275604 0z" fill-rule="evenodd"/><path fill="#000000" d="m481.91214 361.7951q2.109375 2.109375 2.109375 5.09375q0 2.984375 -2.109375 5.09375q-2.109375 2.109375 -5.09375 2.109375q-2.9843445 0 -5.0937195 -2.109375q-2.109375 -2.109375 -2.109375 -5.09375q0 -2.984375 2.109375 -5.09375q2.109375 -2.109375 5.0937195 -2.109375q2.984375 0 5.09375 2.109375zm-0.40625 9.78125q1.9375 -1.9375 1.9375 -4.6875q0 -2.75 -1.9375 -4.6875q-1.9375 -1.9375 -4.6875 -1.9375q-2.7499695 0 -4.6874695 1.9375q-1.9375 1.9375 -1.9375 4.6875q0 2.75 1.9375 4.6875q1.9375 1.9375 4.6874695 1.9375q2.75 0 4.6875 -1.9375zm-5.6875 -5.6875q1.578125 0.0625 2.046875 -0.40625q0.421875 -0.40625 0.421875 -1.109375q0 -0.703125 -0.46875 -1.171875q-0.359375 -0.359375 -1.125 -0.359375q-0.8125 0 -1.28125 0.46875q-0.40621948 0.40625 -0.5312195 0.875l-1.515625 0q0.234375 -0.9375 0.875 -1.578125q0.9374695 -0.9375 2.5155945 -0.9375q1.40625 0 2.234375 0.828125q0.703125 0.703125 0.703125 1.6875q0 1.0625 -0.53125 1.59375q-0.640625 0.640625 -1.40625 0.75q1.046875 0.234375 1.515625 0.703125q0.703125 0.703125 0.703125 1.703125q0 1.296875 -0.8125 2.109375q-0.9375 0.9375 -2.578125 0.9375q-1.5780945 0 -2.4062195 -0.8125q-0.703125 -0.703125 -0.8125 -1.875l1.453125 0q0.0625 0.640625 0.42184448 0.984375q0.46875 0.46875 1.34375 0.46875q0.9375 0 1.46875 -0.515625q0.46875 -0.46875 0.46875 -1.234375q0 -0.828125 -0.46875 -1.296875q-0.59375 -0.578125 -2.234375 -0.578125l0 -1.234375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m428.51968 501.8084l35.275604 0l0 29.700806l-35.275604 0z" fill-rule="evenodd"/><path fill="#000000" d="m451.31372 511.25443q2.109375 2.1093445 2.109375 5.0937195q0 2.984375 -2.109375 5.09375q-2.109375 2.109375 -5.09375 2.109375q-2.984375 0 -5.09375 -2.109375q-2.109375 -2.109375 -2.109375 -5.09375q0 -2.984375 2.109375 -5.0937195q2.109375 -2.109375 5.09375 -2.109375q2.984375 0 5.09375 2.109375zm-0.40625 9.7812195q1.9375 -1.9375 1.9375 -4.6875q0 -2.75 -1.9375 -4.6874695q-1.9375 -1.9375 -4.6875 -1.9375q-2.75 0 -4.6875 1.9375q-1.9375 1.9374695 -1.9375 4.6874695q0 2.75 1.9375 4.6875q1.9375 1.9375 4.6875 1.9375q2.75 0 4.6875 -1.9375zm-2.8125 -1.875l0 2.109375l-1.34375 0l0 -2.109375l-4.578125 0l0 -1.296875l4.390625 -6.6093445l1.53125 0l0 6.6093445l1.28125 0l0 1.296875l-1.28125 0zm-1.34375 -1.296875l0 -4.734375l-3.171875 4.734375l3.171875 0z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/metrics/user-centric-performance-metrics/index.md b/src/site/content/en/metrics/user-centric-performance-metrics/index.md
index 47c8e0bd059..c86a7911b20 100644
--- a/src/site/content/en/metrics/user-centric-performance-metrics/index.md
+++ b/src/site/content/en/metrics/user-centric-performance-metrics/index.md
@@ -4,6 +4,7 @@ title: User-centric performance metrics
 authors:
   - philipwalton
 date: 2019-11-08
+updated: 2022-05-11
 description: |
   User-centric performance metrics are a critical tool in understanding and
   improving the experience of your site in a way that benefits real
@@ -38,7 +39,7 @@ useful.
 ## Defining metrics
 
 Historically, web performance has been measured with the
-<code>[load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)</code>
+<code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code>
 event. However, even though <code>load</code> is a well-defined moment in a
 page's lifecycle, that moment doesn't necessarily correspond with anything the
 user cares about.
@@ -137,32 +138,40 @@ page.
 
 ## Important metrics to measure
 
-- **[First contentful paint (FCP)](/fcp/):** measures the time from when the
+- **[First Contentful Paint (FCP)](/fcp/):** measures the time from when the
   page starts loading to when any part of the page's content is rendered on the
   screen. _([lab](#in-the-lab), [field](#in-the-field))_
-- **[Largest contentful paint (LCP)](/lcp/):** measures the time from when the
+- **[Largest Contentful Paint (LCP)](/lcp/):** measures the time from when the
   page starts loading to when the largest text block or image element is
   rendered on the screen. _([lab](#in-the-lab), [field](#in-the-field))_
-- **[First input delay (FID)](/fid/):** measures the time from when a user first
-  interacts with your site (i.e. when they click a link, tap a button, or use a
+- **[First Input Delay (FID)](/fid/):** measures the time from when a user first
+  interacts with your site (when they click a link, tap a button, or use a
   custom, JavaScript-powered control) to the time when the browser is actually
   able to respond to that interaction. _([field](#in-the-field))_
+- **[Interaction to Next Paint (INP)](/inp/)**: measures the latency of every
+  tap, click, or keyboard interaction made with the page, and&mdash;based on the
+  number of interactions&mdash;selects the worst interaction latency of the page
+  (or close to the highest) as a single, representative value to describe a
+  page's overall responsiveness. _([lab](#in-the-lab), [field](#in-the-field))_
 - **[Time to Interactive (TTI)](/tti/):** measures the time from when the page
   starts loading to when it's visually rendered, its initial scripts (if any)
   have loaded, and it's capable of reliably responding to user input quickly.
   _([lab](#in-the-lab))_
-- **[Total blocking time (TBT)](/tbt/):** measures the total amount of time
+- **[Total Blocking Time (TBT)](/tbt/):** measures the total amount of time
   between FCP and TTI where the main thread was blocked for long enough to
   prevent input responsiveness. _([lab](#in-the-lab))_
-- **[Cumulative layout shift (CLS)](/cls/):** measures the cumulative score of
+- **[Cumulative Layout Shift (CLS)](/cls/):** measures the cumulative score of
   all unexpected layout shifts that occur between when the page starts loading
   and when its [lifecycle
-  state](https://developers.google.com/web/updates/2018/07/page-lifecycle-api)
+  state](https://developer.chrome.com/blog/page-lifecycle-api/)
   changes to hidden. _([lab](#in-the-lab), [field](#in-the-field))_
+- **[Time to First Byte (TTFB)](/ttfb/)**: measures the time it takes for the
+  network to respond to a user request with the first byte of a resource.
+  _([lab](#in-the-lab), [field](#in-the-field))_
 
 While this list includes metrics measuring many of the various aspects of
-performance relevant to users, it does not include everything (e.g. runtime
-responsiveness and smoothness are not currently covered).
+performance relevant to users, it does not include everything. For example, runtime
+responsiveness and smoothness are not currently covered.
 
 In some cases, new metrics will be introduced to cover missing areas, but in
 other cases the best metrics are ones specifically tailored to your site.
diff --git a/src/site/content/en/mini-apps/index.md b/src/site/content/en/mini-apps/index.md
new file mode 100644
index 00000000000..c7134c1dae5
--- /dev/null
+++ b/src/site/content/en/mini-apps/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+date: 2021-03-03
+# updated: 2021-03-03
+pathName: mini-apps
+---
diff --git a/src/site/content/en/mini-apps/mini-app-about/index.md b/src/site/content/en/mini-apps/mini-app-about/index.md
new file mode 100644
index 00000000000..49b2eb19b7e
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-about/index.md
@@ -0,0 +1,215 @@
+---
+layout: post
+title: What are mini apps?
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-10-28
+description: |
+  This chapter introduces the concept of mini apps and provides examples of their look and feel.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Building blocks and compatibility
+
+Mini apps are small (commonly [2-4&nbsp;MB](https://www.w3.org/2021/10/MiniApp-Overview-breakout.pdf))
+apps that require a
+[super app](/mini-app-super-apps/#for-mini-apps-you-need-super-apps)
+to run. What they have in
+common, independent of the super app, is that they are built with ("dialects" of) the web
+technologies HTML, CSS, and JavaScript. The runtime of a mini app is a
+[WebView](https://research.google/pubs/pub46739/) in the super app, not the underlying operating
+system, which makes mini apps cross platform. The same mini app can run
+in the same super app, no matter if the super app runs on Android, iOS, or another OS. However, not
+all mini apps can run in all super apps, more on this [later](/mini-app-standardization/).
+
+## Discovery
+
+Mini apps are often discovered _ad-hoc_ via branded 2D barcodes, which solves an important
+offline-to-online challenge, for example, getting from a physical restaurant menu to a payment mini
+app, or from a physical e-scooter to a rental mini app. The image below shows an example of such a
+branded 2D barcode for
+[WeChat's demo mini app](https://github.com/wechat-miniprogram/miniprogram-demo). When the code is
+scanned with the WeChat super app, the mini app launches directly.
+Other super apps will typically not be able to recognize the barcode.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SOisfOqKQWr0GZZvUaqn.jpg", alt="WeChat-branded 2d barcode.", width="250", height="250" %}
+  <figcaption>
+    Scanning this 2d barcode with the WeChat app launches a demo mini app.
+  </figcaption>
+</figure>
+
+Mini apps can also be discovered through regular in-app search in the super app, be shared in chat
+messages, or be part of a news item in a news feed. Some super apps have the notion of verified
+accounts that can contain mini apps in their profiles. Mini apps can be highlighted when they are
+physically geographically close, like the mini app of a business in front of which the user
+stands, or virtually close, like when the user gets directions on a map shown in the super
+app. Frequently used mini apps are available in an app drawer that in many super apps can be
+accessed through a swipe down gesture or through a special section in the super app menu.
+
+## The user experience
+
+All super apps have more or less the same user interface for mini apps. A themeable top bar with the
+mini app's name, and, in the upper corner of the screen, a close button on the far right preceded by
+an action menu that provides access to common features like sharing the app, adding it to a
+favorites list or the home screen, reporting abusive apps, providing feedback, and settings. The
+screenshot below shows a shopping mini app running in the context of the Alipay super app with the
+action menu opened.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PkjzF8AyxDVIAMZmhVrr.jpg", alt="The Alipay super app running a shopping mini app with highlighted top bar, action menu button, and close button. The action menu is opened.", width="300", height="649" %}
+  <figcaption>
+    Opened action menu of a shopping mini app running in the Alipay super app.
+  </figcaption>
+</figure>
+
+## UI paradigms
+
+Usually there is a bottom tab bar for the mini app's main navigation. Most [super app providers offer
+components](/mini-app-components/) that help developers quickly implement common UI paradigms,
+such as carousels, accordions, progress bars, spinners, switches, maps, and so on. This also helps make the
+user experience between different mini apps consistent, which is encouraged by
+[WeChat's Mini Program Design Guidelines](https://developers.weixin.qq.com/miniprogram/en/design/).
+This is similar to what Apple incentivizes with its
+[Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/),
+and Google with its [Design for Android](https://developer.android.com/design) recommendations.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nFVCU3HqKERzl7Lops6Q.png", alt="The Douyin demo mini app showcasing the Douyin slider (carousel) component with toggles for auto-advance, dot indicators, etc.", width="300", height="617" %}
+  <figcaption>
+    Douyin's slider (carousel) component with various options.
+  </figcaption>
+</figure>
+
+## Serving
+
+Rather than being served piece by piece as separate resources, mini apps are served as encrypted
+packaged apps, that is, as archives that contain all resources in just one file. Unlike regular web
+apps, they are also not served from the particular origin of the mini app creator, but from the
+super app provider directly. They can still access APIs from the servers of the mini app creator,
+but the core resources (commonly referred to as the app shell), must be served from the super app
+provider. Mini apps have to declare the origins they request additional data from.
+
+## Caching, updates, and deep-linking
+
+Mini apps are kept in the cache of the super app, so the next time the user launches a cached mini
+app, it loads almost instantly. If there is an update, a new app package is loaded. The version
+number can be part of the launch URI (see [Discovery](/mini-app-about/#discovery)), so the super app knows early on
+if the locally cached version is still current. The launch URI also optionally contains the desired
+page of the mini app, so deep-linking into specific pages of mini apps is possible. Via a sitemap,
+mini apps can declare which of their pages should be indexable by the super app provider's mini app
+crawler.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZKLNvNnm3Rr6aBmYbons.png", alt="macOS Finder showing a folder containing cached WeChat mini app `.wxapkg` files.", width="800", height="465" %}
+  <figcaption>
+    Mini apps are cached as encrypted packaged apps.
+  </figcaption>
+</figure>
+
+## Security and permissions
+
+Mini apps are reviewed by the super app provider, which means users perceive them as more secure
+than web apps. They need to declare their potentially required permissions beforehand in a manifest
+or mini app configuration file, which, for some providers, also requires explanations for why each
+permission is needed. Mini apps can of course still lie, but they would have a hard time justifying
+why they are, for example,
+[trying to access motion sensors](https://twitter.com/search?q=why%20website%20access%20%22motion%20sensors%22%20&src=typed_query&f=live)
+without a reason that is apparent to the user. The incentive to fingerprint the user is notably a
+lot lower compared to the web, since the user is typically already logged in to the super app anyway
+(see [Identity, payement, and social graph](/mini-app-about/#identity-payment-social-graph)).
+
+Whenever a mini app performs an operation that requires a special permission, a prompt is shown to
+the user that, if enforced by the platform, also includes the usage justification, as stated by the
+developer. The screenshot below shows the
+[Douyin demo mini app](https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/example/)
+as it asks the user for permission to share their location. In some super apps, there is also an
+imperative API that mini apps can leverage to request permissions without immediately using them, or
+to only check the status of a permission. This may even include an API to open the central super app
+permission settings, which corresponds to
+[Chrome's _Site Settings_](about://settings/content/siteDetails?site=https%3A%2F%2Fexample.com%2F).
+Mini apps also have to declare beforehand the origins of all servers that they potentially will
+request data from.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8To8DiUqnP4qqFfpPNqk.png", alt="The Douyin demo mini app showing a geolocation prompt with two options: 'Not Allowed' and 'Allowed'.", width="300", height="617" %}
+  <figcaption>
+    The Douyin demo mini app asking for the geolocation permission.
+  </figcaption>
+</figure>
+
+## Access to powerful features
+
+The hosting super app offers access to powerful APIs via a JavaScript bridge that gets injected into
+the WebView offered by the super app (see
+[Building blocks and compatibility](/mini-app-about/#building-blocks-and-compatibility)). This JavaScript bridge
+provides hooks into the operating system's APIs. For example, a mini app JavaScript function like
+`getConnectedWifi()`—the capability of a mini app to obtain the name of the currently active Wi-Fi
+network—under the hood is facilitated through Android's
+[`getConnectionInfo()`](<https://developer.android.com/reference/android/net/wifi/WifiManager#getConnectionInfo()>)
+API or iOS'
+[`CNCopyCurrentNetworkInfo()`](https://developer.apple.com/documentation/systemconfiguration/1614126-cncopycurrentnetworkinfo)
+API. Other examples of powerful device APIs exposed in common super apps are Bluetooth, NFC,
+iBeacon, GPS, system clipboard, orientation sensors, battery information, calendar access, phonebook
+access, screen brightness control, file system access, vibration hardware for physical feedback,
+camera and microphone access, screen recording and screenshot creation, network status, UDP sockets,
+barcode scanning, device memory information, and more.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNEKyoLVeq3IUKGXEZEZ.png", alt="The WeChat demo mini app showing a slider that controls the screen brightness of the device moved all the way to the maximum.", width="300", height="649" %}
+  <figcaption>
+    The WeChat demo mini app setting the device's screen brightness to the maximum.
+  </figcaption>
+</figure>
+
+## Access to cloud services
+
+Many super apps also provide "serverless" access to cloud services of the super app provider that,
+apart from raw cloud computing and cloud storage, frequently also include higher-level tasks like
+text translation, object detection or content classification in images, speech recognition, or other
+Machine Learning tasks. Mini apps can be monetized with ads, which are commonly made available by
+super apps providers. Super app platforms usually also provide cloud analytics data, so mini app
+developers can better understand how users interact with their apps.
+
+## Identity, payment, social graph
+
+A very important feature of mini apps is the identity and social graph information that is shared
+from the super app. Super apps like Douyin or WeChat started as social networking sites in the
+broadest sense, where users have a (sometimes even government-verified) identity, a friend or
+follower network, and frequently also payment data stored. For example, a shopping mini app can (or
+sometimes even must) process any payments directly through the payment APIs of the super app and,
+upon user consent, can obtain user data like their shipping address, phone number, and full name,
+all without ever having to force the user to painfully fill out forms. Below, you can see the
+Walmart mini app running in WeChat, opened for the very first time, greeting me with a familiar
+face.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HzPx6ZSqQWvsUDT04ex2.png", alt="The Walmart mini app showing the author's face and name on the 'Me' tab.", width="300", height="649" %}
+  <figcaption>
+    The Walmart mini app with a personalized "Me" view on the first visit.
+  </figcaption>
+</figure>
+
+Mini apps can get highly popular by letting people share their achievements like highscores in a
+game and challenge their contacts through status updates. The mini app is then only a tap away, so
+users can enter into competition without any friction and the mini app thereby grow its reach.
+
+{% Aside 'success' %}
+  In the next chapter, you will learn [what sets mini apps apart from H5 apps and QuickApp](/mini-app-what-are-h5-and-quickapp).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-alternative-runtime-environments/index.md b/src/site/content/en/mini-apps/mini-app-alternative-runtime-environments/index.md
new file mode 100644
index 00000000000..4e5fe8553d9
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-alternative-runtime-environments/index.md
@@ -0,0 +1,287 @@
+---
+layout: post
+title: Other mini app runtime environments
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-09-07
+description: |
+  This chapter presents a number of runtime environments for mini apps that are not mobile devices.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## More than just on mobile
+
+In countries like China, mini apps have taken the market by storm.
+Apart from mobile devices, where mini apps are omnipresent and which are their natural habitat, mini
+apps have started to conquer other runtime environments like cars and the classic desktop.
+
+## Mini apps in cars
+
+In July 2020 the German car maker BMW Group
+[announced](https://www.press.bmwgroup.com/china/article/detail/T0313254ZH_CN/%E2%80%9C2020-%E5%AE%9D%E9%A9%AC%E7%A7%91%E6%8A%80%E6%97%A5%E2%80%9D%E5%9C%A8%E7%BA%BF%E5%8F%91%E5%B8%83%E5%A4%9A%E6%AC%BE%E8%BD%A6%E5%86%85%E6%95%B0%E5%AD%97%E4%BA%A7%E5%93%81)
+a collaboration with Tencent branded as WeScenario, which,
+[according to Tencent](https://www.tencent.com/en-us/articles/2201068.html), will be rolled out to _"30
+leading auto companies in the world, and [bring the WeScenario] ecosystem of social, content and
+services to more than 110 mainstream automobile models"_.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AX07xQlEHL7MDjPo1U1H.jpg", alt="Dashboard of a Tencent car showing two rows of mini app icons.", width="800", height="533" %}
+  <figcaption>
+    Landing page of Tencent WeScenario (Source: <a href="https://www.press.bmwgroup.com/china/article/detail/T0313254ZH_CN/%E2%80%9C2020-%E5%AE%9D%E9%A9%AC%E7%A7%91%E6%8A%80%E6%97%A5%E2%80%9D%E5%9C%A8%E7%BA%BF%E5%8F%91%E5%B8%83%E5%A4%9A%E6%AC%BE%E8%BD%A6%E5%86%85%E6%95%B0%E5%AD%97%E4%BA%A7%E5%93%81">BMW</a>).
+  </figcaption>
+</figure>
+
+## Mini apps on the desktop
+
+### Mini apps in WeChat Desktop
+
+Using the WeChat desktop client available for
+[macOS](https://dldir1.qq.com/weixin/mac/WeChatMac.dmg)
+and [Windows](https://dldir1.qq.com/weixin/Windows/WeChatSetup.exe)), it is possible to run WeChat
+mini apps on the desktop. (Make sure to _not_ load the macOS
+[version from the App Store](https://itunes.apple.com/cn/app/id836500024)
+if you are doing research and want the full experience, since it is more limited.)
+
+To test it on macOS, share a mini app from a mobile device with yourself via the "File Transfer"
+account. This will result in a message that you can then open on the desktop client. In most cases,
+the mini app will then be directly clickable and runnable. In other cases, you have to forward the
+chat history to yourself again from a mobile device.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qLbYBpAoSvbc1Qjc9Ub0.png", alt="The WeChat macOS desktop client showing a chat with oneself with a shared mini app and a chat history as the two visible messages.", width="800", height="602" %}
+  <figcaption>
+    Sharing a mini app with oneself in the WeChat macOS desktop client.
+  </figcaption>
+</figure>
+
+On Windows, the workaround to share mini apps with oneself is not necessary, since there is a
+dedicated mini apps panel that shows the user's recently used mini apps and also includes an app
+search where new mini apps can be discovered.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NQCoGaAWcbuiO37dCNY5.png", alt="The mini app panel in the WeChat Windows client showing the user's recently used mini apps.", width="800", height="531" %}
+  <figcaption>
+    The mini app panel in the WeChat Windows client.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/H5nqmnoK9JjLcu8mWDSH.png", alt="The mini app search in the WeChat Windows client showing mini apps listed in various categories like games, business, education, etc.", width="800", height="576" %}
+  <figcaption>
+    The mini app search in the WeChat Windows client.
+  </figcaption>
+</figure>
+
+WeChat mini apps on the desktop naturally integrate with the operating system. On both macOS and
+Windows, they get their own entry in the multitasking bar and have their own taskbar icon. While on
+macOS, there is an option to be kept in the Dock, the icon disappears the moment the WeChat client
+app gets closed. On Windows, mini app icons can be pinned to the taskbar, but cannot be launched. On
+macOS, the title of the app is always "WeChat" and not the actual title of the app, whereas the
+title is displayed correctly on Windows.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nrvwtwOWot6eZI40evfp.png", alt="The macOS multitask switcher includes mini apps alongside regular macOS app.", width="800", height="79" %}
+  <figcaption>
+    The Starbucks app is a mini app and can be multitasked to like any regular macOS app.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fG4cpJgpyXeqvjn4lF3v.png", alt="The Starbucks mini app icon on the macOS Dock with a WeChat title.", width="646", height="412" %}
+  <figcaption>
+   Mini apps on macOS have WeChat as their title.
+  </figcaption>
+</figure>
+
+Most mini apps are not optimized for desktop yet and run in a fixed, non-resizable window that
+includes the well-known UI affordances and permission prompts as on mobile (see
+[The user experience](/mini-app-about/#the-user-experience)).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uorcciuZIL8sadxTjXbv.png", alt="The Starbucks mini app running on macOS asking for the user profile permission which the user can grant via a prompt shown at the bottom.", width="300", height="484" %}
+  <figcaption>
+    The Starbucks mini app running on macOS asking for the user profile permission.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UGufvRnoaAGm8A3qQG4a.png", alt="The Starbucks mini app running on macOS showing the home screen of the app.", width="300", height="484" %}
+  <figcaption>
+    The Starbucks mini app running on macOS in a fixed, non-resizable window.
+  </figcaption>
+</figure>
+
+Responsive mini apps that are optimized for the desktop (apart from for mobile) can be displayed in
+a wider window that on macOS is currently still fixed, but that on Windows is flexibly resizable.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cUMqQ75zPeCDNTcCWF5D.png", alt="The WeChat components demo app in a responsive app window that can be resized and that by default is wider than the usual mobile screen.", width="800", height="620" %}
+  <figcaption>
+    The WeChat components demo app in a responsive app window.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rPbojIjBGKbNtDviB0MJ.png", alt="The WeChat components demo app in a narrow window showing three boxes A, B, and C stacked on top of each other.", width="300", height="614" %}
+  <figcaption>
+    The WeChat components demo app in a narrow app window.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xnlacc8Xm1eNMCuajYYL.png", alt="The WeChat components demo app in a wide window showing three boxes A, B, and C with A stacked on top of B and C on the side.", width="600", height="565" %}
+  <figcaption>
+    The WeChat components demo app in a wide app window.
+  </figcaption>
+</figure>
+
+Mini app permission settings on macOS can be changed via the context menu. On Windows, this does not
+seem to be possible and the location reported by the demo app appears to be the coarse location that
+Windows allows apps to obtain without asking for permission.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rHyiTGbMauqbSFWBFlMW.png", alt="The WeChat components demo app running on macOS showing two checkboxes for the location and user info permission.", width="500", height="384" %}
+  <figcaption>
+    WeChat mini app settings on macOS.
+  </figcaption>
+</figure>
+
+### Mini apps in the 360 Secure Browser
+
+360 Secure Browser (360 安全浏览器) is a web browser developed by the company Qihoo. Apart from
+[iOS and Android](https://mse.360.cn/), the browser is also available for
+[Windows](https://browser.360.cn/se/), [macOS](https://browser.360.cn/ee/mac/index.html), and
+[Linux](https://browser.360.cn/se/linux/index.html). On Windows, it is capable of running special
+[360 mini apps](https://mp.360.cn/#/). The
+[developer documentation](https://mp.360.cn/doc/miniprogram/dev/) and the
+[API](https://mp.360.cn/doc/miniprogram/dev/#/e1487ee88399013ec06eff05007391fc) are comparable to
+those of other vendors; however, 360 does not offer dedicated DevTools. Instead, developers need to
+create their mini apps in an IDE of their own choosing and can then test them in the browser using a
+special development mode. Debugging happens through Chrome Dev Tools. A
+[demo app](https://mp.360.cn/examples/appdemo.zip) is available for getting started.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IdHpN4GhVWDZ5gmSZ4Jb.png", alt="A 360 mini app running in 360 Secure Browser being debugged with Chrome Dev Tools.", width="800", height="402" %}
+  <figcaption>
+    Debugging a 360 mini app using Chrome Dev Tools.
+  </figcaption>
+</figure>
+
+360 mini apps can run in fullscreen mode and do appear as separate entries in the multitasking bar.
+Via the context menu, a home screen icon can be added that allows for mini apps to be launched from
+the desktop.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M4MPV6TXwsLC6lFn9Jgi.png", alt="A 360 video mini app running in fullscreen mode showing various thumbnails of videos to watch.", width="800", height="402" %}
+  <figcaption>
+    360 mini app running in fullscreen mode.
+  </figcaption>
+</figure>
+
+## Web-based mini apps
+
+There are some mini app platforms that are web-based, but that depend on the presence of a special
+WebView to unlock their full potential.
+
+### LINE
+
+[LINE](https://line.me/) is an app for instant communications on electronic devices such as
+smartphones, tablet computers, and personal computers. In addition, LINE is a platform providing
+various services including digital wallet, news stream, video on demand, and digital comic
+distribution. The service is a subsidiary of Korean internet search engine company,
+[Naver Corporation](http://www.navercorp.com/).
+
+Since LINE [mini apps](https://developers.line.biz/en/docs/line-mini-app/quickstart/) is
+[essentially just a regular web app](https://developers.line.biz/en/docs/line-mini-app/discover/specifications/#supported-platforms-and-versions)
+(see [sample app](https://github.com/line/line-liff-v2-starter)) that pulls in the
+[LINE Front-end Framework](https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app)
+(LIFF),  it can also be accessed outside of the main LINE app through special
+[permanent links](https://developers.line.biz/en/docs/line-mini-app/develop/permanent-links/)
+([example](https://liff.line.me/1653544369-LP5XbPYw)). However, not all APIs are available in such
+cases. Examples of not available in the browser APIs include the
+[`liff.scanCode()`](https://developers.line.biz/en/reference/liff/#scan-code) method for reading QR
+codes or Bluetooth-related APIs like
+[`liff.bluetooth.getAvailability()`](https://developers.line.biz/en/reference/liff/#bluetooth-get-availability).
+To get a feel for the platform, you can test the
+[LINE Playground app](https://liff.line.me/1653544369-LP5XbPYw) in the browser and the LINE app if
+you have a LINE account.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YIlFjXgZhq8ROMrPA1BO.png", alt="The LINE Playground demo app running on an iOS device showing `liff.getOS()` returning 'ios'.", width="300", height="649" %}
+  <figcaption>
+   The LINE Playground demo app running on an iOS device.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UPwJbVhssGfA4IQ89kEo.png", alt="The LINE Playground demo app running in the web browser showing `liff.getOS()` returning 'web'.", width="800", height="510" %}
+  <figcaption>
+   The LINE Playground demo app running in the web browser.
+  </figcaption>
+</figure>
+
+### Google Spot
+
+The [Google Spot Platform](https://developers.google.com/pay/spot) allows developers to set up a
+Spot on [Google Pay](https://pay.google.com/)—a digital storefront that they can create, brand, and
+host however they choose. It is discoverable both online as well as through physical barcodes. Users
+can easily share a "Spot" (as the app calls it) on their favorite messaging app or find it on Google Pay. A Spot is built
+using HTML and JavaScript, so existing investments into mobile websites or PWAs can be easily
+transformed into a Spot by "adding a few lines of JavaScript" according to the announcement post.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/T4OLZX8PIFjFq3gVzUmo.png", alt="The Eat.fit mini app running in the Google Pay super app showing the sign-in bottom sheet.", width="300", height="637" %}
+  <figcaption>
+   The Eat.fit mini app running in the Google Pay super app (Source: <a href="https://developers.google.com/pay/spot">Google</a>).
+  </figcaption>
+</figure>
+
+### Snap Minis
+
+[Snap Inc.](https://snap.com/) is an American camera and social media company most known for its
+chat app [Snapchat](https://www.snapchat.com/). Snap has announced
+[Snap Minis](https://minis.snapchat.com/), bite-size utilities made for friends. They are built with
+HTML5, so they are easy to develop. Plus, they work for all Snapchatters, on any kind of device,
+with no installation required.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vM5d0wK5fCQSV0VyP7HA.png", alt="The Atom Tickets mini app running in Snapchat showing three snapchat users reserving their seats in a movie theater.", width="320", height="470" %}
+  <figcaption>
+   The Atom Tickets mini app running in Snapchat (Source: <a href="https://minis.snapchat.com/">Snap</a>).
+  </figcaption>
+</figure>
+
+### VK Mini Apps
+
+The Russian social networking platform [VK](https://vk.com/mini-apps) runs a [mini app program](https://vk.com/mini-apps)
+that allows developers to [build](https://dev.vk.com/mini-apps/overview) mini apps that tie in deeply with the social network.
+VK mini apps work on both VK's platform-specific mobile apps, as well as on the desktop website.
+Apart from several of the brand's other platforms like [Mail.ru](https://mail.ru/), VK mini apps are also integrated in the
+[Atom browser](https://browser.ru/).
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/tZJgYpdjurBVfhInqWRo.webp", alt="The Все аптеки mini app running in VK.", width="460", height="948" %}
+  <figcaption>
+    The Все аптеки mini app running in VK (Source: <a href="https://vk.com/mini-apps">VK</a>).
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+  Read on to see some examples of the [mini app open source projects](/mini-app-open-source-projects/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-components/index.md b/src/site/content/en/mini-apps/mini-app-components/index.md
new file mode 100644
index 00000000000..1d9ea5277cc
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-components/index.md
@@ -0,0 +1,288 @@
+---
+layout: post
+title: Mini app components
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-03-17
+description: |
+  This chapter provides details on the components that all mini app platforms make available.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Web components
+
+[Web components](https://developer.mozilla.org/docs/Web/Web_Components/) started with the
+promise of letting developers piece them together and build great apps on top of them. Examples of
+such atomic components are GitHub's [time-elements](https://github.com/github/time-elements), Stefan
+Judis' [web-vitals-element](https://github.com/stefanjudis/web-vitals-element), or, shameless plug,
+Google's [dark mode toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle/). When it comes to
+complete design systems, however, I have observed that people prefer to rely on a coherent set of
+components from the same vendor. An incomplete list of examples includes SAP's
+[UI5 Web Components](https://sap.github.io/ui5-webcomponents/), the
+[Polymer Elements](https://www.webcomponents.org/author/PolymerElements),
+[Vaadin's elements](https://www.webcomponents.org/author/vaadin), Microsoft's
+[FAST](https://github.com/microsoft/fast), the
+[Material Web Components](https://github.com/material-components/material-components-web-components),
+arguably the [AMP components](https://amp.dev/documentation/components/), and many more. Due to a
+number of factors out of scope for this article, a lot of developers, however, have also flocked to
+frameworks like [React](https://reactjs.org/), [Vue.js](https://vuejs.org/),
+[Ember.js](https://emberjs.com/), etc. Rather than giving the developer the freedom to choose from
+any of these options (or, dependent on your viewpoint, _forcing_ them to make a technology choice),
+super app providers universally supply a set of components that developers must use.
+
+## Components in mini apps
+
+You can think of these components like any of the component libraries mentioned above. To get an
+overview of the available components, you can browse
+[WeChat's component library](https://developers.weixin.qq.com/miniprogram/en/dev/component/),
+[ByteDance's components](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/component/all),
+[Alipay's components](https://opendocs.alipay.com/mini/component),
+[Baidu's](https://smartprogram.baidu.com/docs/develop/component/component/), and
+[Quick App components](https://doc.quickapp.cn/widgets/common-events.html).
+
+Earlier [I showed](/mini-app-devtools/#custom-elements-under-the-hood) that while, for example, WeChat's `<image>`
+is a web component under the hood, not all of these components are technically web components. Some
+components, like `<map>` and `<video>`, are rendered as
+[OS-built-in components](https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000caab39b88b06b00863ab085b80a)
+that get layered over the WebView. For the developer, this implementation detail is not revealed,
+they are programmed like any other component.
+
+As always, the details vary, but the overall programming concepts are the same across all super app
+providers. An important concept is data binding, as shown before in
+[Markup languages](/mini-app-markup-styling-and-scripting/#markup-languages). Generally, components are grouped by function, so finding the
+right one for the job is easier. Below is an example from Alipay's categorization, which is similar
+to the component grouping of other vendors.
+
+- View containers
+  - `view`
+  - `swiper`
+  - `scroll-view`
+  - `cover-view`
+  - `cover-image`
+  - `movable-view`
+  - `movable-area`
+- Basic content
+  - `text`
+  - `icon`
+  - `progress`
+  - `rich-text`
+- Form components
+  - `button`
+  - `form`
+  - `label`
+  - `input`
+  - `textarea`
+  - `radio`
+  - `radio-group`
+  - `checkbox`
+  - `checkbox-group`
+  - `switch`
+  - `slider`
+  - `picker-view`
+  - `picker`
+- Navigation
+  - `navigator`
+- Media components
+  - `image`
+  - `video`
+- Canvas
+  - `canvas`
+- Map
+  - `map`
+- Open components
+  - `web-view`
+  - `lifestyle`
+  - `contact-button`
+- Accessibility
+  - `aria-component`
+
+Below, you can see Alipay's [`<image>`](https://opendocs.alipay.com/mini/component/image) used in an
+`a:for` directive (see [List rendering](/mini-app-markup-styling-and-scripting/#list-rendering)) that loops over an image data array
+provided in `index.js`.
+
+```js
+/* index.js */
+Page({
+  data: {
+    array: [
+      {
+        mode: "scaleToFill",
+        text: "scaleToFill",
+      },
+      {
+        mode: "aspectFit",
+        text: "aspectFit",
+      },
+    ],
+    src: "https://images.example.com/sample.png",
+  },
+  imageError(e) {
+    console.log("image", e.detail.errMsg);
+  },
+  onTap(e) {
+    console.log("image tap", e);
+  },
+  imageLoad(e) {
+    console.log("image", e);
+  },
+});
+```
+
+```html
+<!-- index.axml -->
+<view class="page">
+  <view class="page-section" a:for="{% raw %}{{array}}{% endraw %}" a:for-item="item">
+    <view class="page-section-demo" onTap="onTap">
+      <image
+        class="image"
+        mode="{% raw %}{{item.mode}}{% endraw %}"
+        onTap="onTap"
+        onError="imageError"
+        onLoad="imageLoad"
+        src="{% raw %}{{src}}{% endraw %}"
+        lazy-load="true"
+        default-source="https://images.example.com/loading.png"
+      />
+    </view>
+  </view>
+</view>
+```
+
+Note the data binding of the `item.mode` to the `mode` attribute, the `src` to the `src` attribute,
+and the three event handlers `onTap`, `onError`, and `onLoad` to the functions of the same name. As
+shown [before](/mini-app-devtools/#custom-elements-under-the-hood), the `<image>` tag internally gets converted into a
+`<div>` with a placeholder of the image's final dimensions, optional lazy loading, a default source,
+etc.
+
+The available configuration options of the component are all listed in the
+[documentation](https://opendocs.alipay.com/mini/component/image). An embedded-in-the-docs
+[component preview with simulator](https://herbox-embed.alipay.com/s/doc-image?chInfo=openhome-doc&theme=light)
+makes the code immediately tangible.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t2Y6WWsRhp6LjThxROUo.png", alt="Alipay component documentation with embedded component preview, showing a code editor with simulator that shows the component rendered on a simulated iPhone 6.", width="800", height="510" %}
+  <figcaption>
+    Alipay component documentation with embedded component preview.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xu2F51XL9Z0M3Z9n6n2O.png", alt="Alipay component preview running in a separate browser tab showing a code editor with simulator that shows the component rendered on a simulated iPhone 6.", width="800", height="514" %}
+  <figcaption>
+    Alipay component preview popped out into its own tab.
+  </figcaption>
+</figure>
+
+Each component also has a QR code that can be scanned with the Alipay app that opens the component
+example in a self-contained minimal example.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gaWqLG5GqeqqfbhWz8D1.png", alt="Alipay's `image` component previewed on a real device after scanning a QR code in the documentation.", width="300", height="649" %}
+  <figcaption>
+    Preview of the Alipay <code>&lt;image&gt;</code> component on a real device after following a <a href="https://qr.alipay.com/s6x01278ucjhjyknjd5ow53">QR code link</a> from the docs.
+  </figcaption>
+</figure>
+
+Developers can jump from the documentation straight into Alipay DevTools IDE by leveraging a
+proprietary URI scheme `antdevtool-tiny://`. This allows the documentation to link directly into a
+to-be-imported mini app project, so developers can get started with the component immediately.
+
+## Custom components
+
+Apart from using the vendor-provided components, developers can also create custom components. The
+concept exists for
+[WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/framework/custom-component/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/custom-component/custom-component),
+[Alipay](https://opendocs.alipay.com/mini/framework/component_configuration), and
+[Baidu](https://smartprogram.baidu.com/docs/develop/framework/custom-component/), as well as
+[Quick App](https://doc.quickapp.cn/tutorial/framework/parent-child-component-communication.html#%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89).
+For example, a Baidu custom component consists of four files that must reside in the same folder:
+`custom.swan`, `custom.css`, `custom.js`, and `custom.json`.
+
+The file `custom.json` denotes the folder contents as a custom component.
+
+```json
+{
+  "component": true
+}
+```
+
+The file `custom.swan` contains the markup and `custom.css` the CSS.
+
+```html
+<view class="name" bindtap="tap">{% raw %}{{name}}{% endraw %} {% raw %}{{age}}{% endraw %}</view>
+```
+
+```css
+.name {
+  color: red;
+}
+```
+
+The file `custom.js` contains the logic. The component lifecycle functions are `attached()`,
+`detached()`, `created()`, and `ready()`. The component can additionally also react on
+[page lifecycle events](/mini-app-project-structure-lifecycle-and-bundling/#mini-app-lifecycle), namely `show()` and `hide()`.
+
+```js
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: "swan",
+    },
+  },
+  data: {
+    age: 1,
+  },
+  methods: {
+    tap: function () {},
+  },
+  lifetimes: {
+    attached: function () {},
+    detached: function () {},
+    created: function () {},
+    ready: function () {},
+  },
+  pageLifetimes: {
+    show: function () {},
+    hide: function () {},
+  },
+});
+```
+
+The custom component can then be imported in `index.json`, the key of the import determines the name
+(here: `"custom"`) that the custom component can then be used with in `index.swan`.
+
+```json
+{
+  "usingComponents": {
+    "custom": "/components/custom/custom"
+  }
+}
+```
+
+```html
+<view>
+  <custom name="swanapp"></custom>
+</view>
+```
+
+{% Aside 'success' %}
+  Continue reading to learn about the [project structure, lifecycle, and bundling](/mini-app-project-structure-lifecycle-and-bundling/) of mini apps.
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-conclusion/index.md b/src/site/content/en/mini-apps/mini-app-conclusion/index.md
new file mode 100644
index 00000000000..d013db3620d
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-conclusion/index.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: Concluding thoughts about mini apps from a web developer
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-06-12
+description: |
+  This chapter concludes the mini apps collection with the observation
+  that thinking outside of the box and taking input and inspiration from
+  outside of one's own bubble can definitely help when building a
+  better future on the web..
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Where does this leave us?
+
+Writing and researching mini apps has been quite a ride, but one that I do not regret. On the one
+hand, the success and the popularity of mini apps have proven their creators right about their approach. On the other
+hand, though, this success is geographically concentrated in regions where the few popular super
+apps are dominant, at least at the time of writing. What is undoubtedly true is that the ecosystem
+is highly fascinating and well worth a look. This collection of articles has provided deep-dives
+into many of the aspects that make a difference when using and creating mini apps. From the
+[DevTools](/mini-app-devtools/) experience to the
+[mark-up](/mini-app-markup-styling-and-scripting/#markup-languages),
+[styling](/mini-app-markup-styling-and-scripting/#styling), and
+[scripting](/mini-app-markup-styling-and-scripting/#scripting) approaches, over to the
+[component model](/mini-app-components/), and finally to the overall
+[architecture](/mini-app-project-structure-lifecycle-and-bundling/); mini apps provide learning and
+inspiration opportunities for app developers, and even so for those who purely aim for the web.
+
+My initial experiments with
+[building a web application the mini app way](/mini-app-example-project/) were
+successful. Future work will show to what extent this model is performant and flexible enough to
+cater for the many shapes that web apps can take. My current _ad-hoc_ approach can be formalized by
+packaging up the relevant pieces of code in a dedicated library, `mini-app.js` if you will. What is
+interesting is that this kind of programming goes back all the way to `frameset`. Just that today it
+is about applications and not documents.
+
+I see great potential for improvement with the entire web development experience by taking
+inspiration from the various mini apps DevTools. From the easy
+[(remote) on-device testing feature](/mini-app-devtools/#simulator-and-real-device-testing-and-debugging)
+to the packaging and [building](/mini-app-project-structure-lifecycle-and-bundling/#the-build-process)
+experience; the integration of the [IDE](/mini-app-devtools/#mini-app-ides) with the DevTools
+environment offers a lot of starting points for making developers' lives easier.
+
+## Closing thoughts
+
+From a features point of view, the web is becoming more and more powerful
+with each release of essentially _any_ browser. The ever-growing
+[list of capabilities](https://developer.chrome.com/blog/fugu-status/) makes use cases possible on the web that were unthinkable a
+mere year ago. At the same time, the need for
+[mini apps standardization](/mini-app-standardization/) shows that developers are not willing or
+able to build the same mini app for each super app. On the horizon maybe there is a desire for an
+abstraction layer on the browser level that allows for mini apps to run on the web, while noting that
+the web is not immune from fragmentation, especially when looking at different browser vendors and
+what they choose to implement and what not. Concluding, I am looking forward to seeing where all
+this is headed. Thinking outside of the box and taking input and inspiration from outside of one's
+own bubble can definitely help when building a better future on the web.
+
+{% Aside 'success' %}
+  Congratulations, you have reached the end of the [mini apps collection](/mini-apps/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-devtools/index.md b/src/site/content/en/mini-apps/mini-app-devtools/index.md
new file mode 100644
index 00000000000..80dab701163
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-devtools/index.md
@@ -0,0 +1,257 @@
+---
+layout: post
+title: Mini app DevTools
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter provides details on the DevTools experience of various mini apps platforms.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## The developer experience
+
+Now that I have covered mini apps _per se_, I want to focus on the developer experience for the
+various super app platforms. Mini app development on all platforms happens in IDEs that are provided
+for free by the super app platforms. While there are more, I want to focus on the four most popular
+ones, and a fifth for Quick App for comparison.
+
+## Mini app IDEs
+
+Like the super apps, the majority of the IDEs are available only in Chinese. You actually want to
+make sure that you install the Chinese version and not a sometimes available English (or overseas)
+version, since it might not be up-to-date. If you are a macOS developer, be aware that not all IDEs
+are signed, which means macOS refuses to run the installer. You can, **at your own risk**, bypass
+this as
+[outlined by Apple help](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac).
+
+- [WeChat DevTools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
+- [Alipay DevTools](https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html)
+- [Baidu DevTools](https://smartprogram.baidu.com/docs/develop/devtools/history/)
+- [ByteDance DevTools](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/developer-instrument-update-and-download)
+- [Quick App DevTools](https://www.quickapp.cn/docCenter/IDEPublicity)
+
+## Mini app starter projects
+
+To get started quickly with mini app development, all super app providers offer demo apps
+that can be downloaded and tested immediately, and that are sometimes also integrated in the "New
+Project" wizards of the various IDEs.
+
+- [WeChat demo](https://github.com/wechat-miniprogram/miniprogram-demo)
+- [Alipay demo](https://opendocs.alipay.com/mini/introduce/demo)
+- [Baidu demo](https://smartprogram.baidu.com/docs/develop/tutorial/demo/)
+- [ByteDance demo](https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/example)
+- [Quick App demo](https://github.com/quickappcn/sample)
+
+## Development flow
+
+After launching the IDE and loading or creating a (demo) mini app, the first step is always to log
+in. Usually you just need to scan a QR code with the super app (where you are already logged in)
+that is generated by the IDE. Very rarely do you have to enter a password. Once you are logged in,
+the IDE knows your identity and lets you start programming, debugging, testing, and submitting your
+app for review. In the following, you can see screenshots of the five IDEs mentioned in the
+paragraph above.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YvjvlB82SfPqHBl56Rz4.png", alt="WeChat DevTools application window showing simulator, code editor, and debugger.", width="800", height="463" %}
+  <figcaption>
+    WeChat DevTools with simulator, code editor, and debugger.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iLbYZFZ9ec245segsIKk.png", alt="Alipay DevTools application window showing code editor, simulator, and debugger.", width="800", height="454" %}
+  <figcaption>
+    Alipay DevTools with code editor, simulator, and debugger.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/svoq0p6GO1PCT0k0bdba.png", alt="Baidu DevTools application window showing simulator, code editor, and debugger.", width="800", height="540" %}
+  <figcaption>
+    Baidu DevTools with simulator, code editor, and debugger.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/myapOcgYOwsEumeFbL3A.png", alt="ByteDance DevTools application window showing simulator, code editor, and debugger.", width="800", height="561" %}
+  <figcaption>
+    ByteDance DevTools with simulator, code editor, and debugger.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dUsfozY82E2YhtlxNJz9.png", alt="Quick App DevTools application window showing code editor, simulator, and debugger.", width="800", height="485" %}
+  <figcaption>
+    Quick App DevTools with code editor, simulator, and debugger.
+  </figcaption>
+</figure>
+
+As you can see, the fundamental components of all IDEs are very similar. You always have a code
+editor based on the [Monaco Editor](https://microsoft.github.io/monaco-editor/), the same project
+that also powers [VS Code](https://github.com/Microsoft/vscode). In all IDEs, there is a debugger
+based on the [Chrome DevTools frontend](https://github.com/ChromeDevTools/devtools-frontend) with
+some modifications, more on those later (see [Debugger](/mini-app-devtools/#debugger)). The IDEs _per se_ are
+implemented either as [NW.js](https://nwjs.io/) or as [Electron](https://www.electronjs.org/) apps,
+the simulators in the IDEs are realized as an
+[NW.js `<webview>` tag](https://docs.nwjs.io/en/latest/References/webview%20Tag/) or
+[Electron `<webview>` tag](https://www.electronjs.org/docs/api/webview-tag), which in turn are based on
+a [Chromium `<webview>` tag](https://www.electronjs.org/docs/api/webview-tag). If you are interested in
+the IDE internals, you can oftentimes simply inspect them with Chrome DevTools with the keyboard
+shortcut <kbd>Control</kbd>+<kbd>Alt</kbd>+<kbd>I</kbd> (or
+<kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>I</kbd> on Mac).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yXcGmOhbi3xrcMIDhw1t.png", alt="Chrome DevTools used to inspect Baidu's DevTools showing the simulator's webview tag in the Chrome DevTools' Elements panel.", width="800", height="504" %}
+  <figcaption>
+    Inspecting Baidu DevTools with Chrome DevTools reveals that the simulator is realized as an Electron <code>&lt;webview&gt;</code> tag.
+  </figcaption>
+</figure>
+
+## Simulator and real device testing and debugging
+
+The simulator is comparable with what you might know from Chrome DevTools'
+[device mode](https://developer.chrome.com/docs/devtools/device-mode/). You can simulate
+different Android and iOS devices, change the scale and device orientation, but also simulate
+various network states, memory pressure, a barcode reading event, unexpected termination, and dark
+mode.
+
+While the built-in simulator suffices to get a rough feeling for how the app behaves, on-device
+testing, like with regular web apps, is irreplaceable. Testing an in-development mini app is just a
+QR code scan away. For example, in ByteDance DevTools, scanning a QR code dynamically generated by the IDE
+with a real device leads to a cloud-hosted version of the mini app that can then immediately be
+tested on the device. The way this works for ByteDance is that the URL behind the QR code
+([example](https://t.zijieimg.com/JMvE5kM/?a=b)) redirects to a hosted page
+([example](https://s.pstatp.com/toutiao/resource/tma_c_reveal_fe/static/redirect.html?version=v2&app_id=ttb3d2c56f2ce8e78c&scene=0&version_type=preview&token=3605997583095982&start_page=pages%2Fcomponent%2Findex&url=%7B%22id%22%3A%22ttb3d2c56f2ce8e78c%22%2C%22name%22%3A%22%E5%90%8D%E7%A7%B0%E9%87%8D%E7%BD%AEttb3d2c56f2ce8e78c%22%2C%22icon%22%3A%22%22%2C%22url%22%3A%22https%3A%2F%2Fsf1-ttcdn-tos.pstatp.com%2Fobj%2Fdeveloper%2Fapp%2Fttb3d2c56f2ce8e78c%2Fpreview%2F%22%2C%22orientation%22%3A0%2C%22ttid%22%3A%226857810517176942605%22%2C%22state%22%3A1%2C%22type%22%3A1%2C%22tech_type%22%3A1%2C%22version%22%3A%22undefined%22%7D&tech_type=1&bdpsum=281c864)),
+that contains links with special URI schemes like, for example, `snssdk1128://`, to preview the mini
+app on the various ByteDance super apps like Douyin or Toutiao
+(here is an [example](snssdk1128://microapp?version=v2&app_id=ttb3d2c56f2ce8e78c&scene=0&version_type=preview&token=3605997583095982&start_page=pages%2Fcomponent%2Findex&url=%7B%22id%22%3A%22ttb3d2c56f2ce8e78c%22%2C%22name%22%3A%22%E5%90%8D%E7%A7%B0%E9%87%8D%E7%BD%AEttb3d2c56f2ce8e78c%22%2C%22icon%22%3A%22%22%2C%22url%22%3A%22https%3A%2F%2Fsf1-ttcdn-tos.pstatp.com%2Fobj%2Fdeveloper%2Fapp%2Fttb3d2c56f2ce8e78c%2Fpreview%2F%22%2C%22orientation%22%3A0%2C%22ttid%22%3A%226857810517176942605%22%2C%22state%22%3A1%2C%22type%22%3A1%2C%22tech_type%22%3A1%2C%22version%22%3A%22undefined%22%7D&tech_type=1&bdpsum=281c864)).
+Other super app providers do not go through an intermediate page, but open the preview directly.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/p0CrYvh00oAV9AUzeoU6.png", alt="ByteDance DevTools showing a QR code that the user can scan with the Douyin app to see the current mini app on their device.", width="800", height="551" %}
+  <figcaption>
+    ByteDance DevTools showing a QR code that the user can scan with the Douyin app for immediate on-device testing.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LNOqaa8z2Oo4CZPa48Bw.png", alt="Intermediate landing page for previewing a ByteDance mini app in various of the company's super apps, opened on a regular desktop browser for reverse-engineering the process.", width="800", height="433" %}
+  <figcaption>
+     Intermediate ByteDance landing page for previewing a mini app (opened on a desktop browser to show the flow).
+  </figcaption>
+</figure>
+
+An even more compelling feature is cloud-based preview remote debugging. After simply scanning a
+special likewise IDE-generated QR code, the mini app opens on the physical device, with a Chrome
+DevTools window running on the computer for remote debugging.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/N5Crv3ryZ3bCNFMv7Lir.png", alt="A mobile phone running a mini app with parts of the UI highlighted by the ByteDance DevTools debugger running on a laptop inspecting it.", width="800", height="600" %}
+  <figcaption>
+   Wirelessly remote-debugging a mini app on a real device with ByteDance DevTools.
+  </figcaption>
+</figure>
+
+## Debugger
+
+### Elements debugging
+
+The mini app debugging experience is very familiar to anyone who has ever worked with Chrome
+DevTools. There are some important differences, though, that make the workflow tailored to mini
+apps. Instead of the Chrome DevTools'
+[Elements panel](https://developer.chrome.com/docs/devtools/#elements), mini app IDEs
+have a customized panel that is tailored to their particular dialect of HTML. For example, in the
+case of WeChat, the panel is called
+[Wxml](https://developers.weixin.qq.com/miniprogram/en/dev/framework/view/wxml/), which stands for
+WeiXin Markup Language. In Baidu DevTools, it's called
+[Swan Element](https://smartprogram.baidu.com/docs/develop/framework/dev/). ByteDance DevTools calls
+it
+[Bxml](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttml).
+Alipay names it [AXML](https://opendocs.alipay.com/mini/framework/axml), and Quick App references
+the panel simply as [UX](https://doc.quickapp.cn/tutorial/framework/for.html). I will dive into
+these markup languages [later](/mini-app-markup-styling-and-scripting/#markup-languages).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/k1FO68wZhzpRNvQl2bN3.png", alt="Inspecting an image with WeChat DevTools' 'Wxml' panel. It shows that the tag in use is an `image` tag.", width="800", height="572" %}
+  <figcaption>
+    Inspecting an <code>&lt;image&gt;</code> element with WeChat DevTools.
+  </figcaption>
+</figure>
+
+### Custom elements under the hood
+
+Inspecting the WebView on a real device via [about://inspect/#devices](about://inspect/#devices)
+reveals that WeChat DevTools was deliberately hiding the truth. Where WeChat DevTools showed an
+`<image>`, the actual thing I am looking at is a custom element called `<wx-image>` with a `<div>`
+as its only child. It is interesting to note that this custom element does not use
+[Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM). More on
+these components [later](/mini-app-components/).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/on9Ty46RyteTI6QTc2vk.png", alt="Inspecting a WeChat mini app running on a real device with Chrome DevTools. Where WeChat DevTools reported I am looking at an `image` tag, Chrome DevTools reveals I am actually dealing with a `wx-image` custom element.", width="800", height="385" %}
+  <figcaption>
+    Inspecting an <code>&lt;image&gt;</code> element with WeChat DevTools reveals that it is actually a <code>&lt;wx-image&gt;</code> custom element.
+  </figcaption>
+</figure>
+
+### CSS debugging
+
+Another difference is the new length unit `rpx` for responsive pixel in the various dialects of CSS
+(more on this unit [later](/mini-app-markup-styling-and-scripting/#styling)). WeChat DevTools uses device-independent CSS length units to
+make developing for different device sizes more intuitive.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bf4YBcscBzbmQtJig7Ij.png", alt="Inspecting a view with a specified top and bottom padding of `200rpx` in WeChat DevTools.", width="800", height="486" %}
+  <figcaption>
+    Inspecting the padding specified in responsive pixels (<code>200rpx 0</code>) of a view with WeChat DevTools.
+  </figcaption>
+</figure>
+
+## Performance auditing
+
+Performance is front and center for mini apps, so it is no surprise that WeChat DevTools and some
+other DevTools have an integrated Lighthouse-inspired auditing tool. The focus areas of the audits
+are Total, Performance, Experience, and Best Practice. The view of the IDE can be customized. In the
+screenshot below I have temporarily hidden the code editor to have more screen real estate for the
+audit tool.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q8Rze6pR9mpDXw9VCaEs.png", alt="Running a performance audit with the built-in audit tool. The scores show Total, Performance, Experience, and Best Practice, each 100 out of 100 points.", width="800", height="485" %}
+  <figcaption>
+    The built-in Audit tool in WeChat DevTools showing Total, Performance, Experience, and Best Practice.
+  </figcaption>
+</figure>
+
+## API mocking
+
+Rather than requiring the developer to set up a separate service, mocking API responses is directly
+part of WeChat DevTools. Via an easy-to-use interface the developer can set up API endpoints and the
+desired mock responses.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/olJmRvdl0zkoWZiiOkiP.png", alt="Setting up a mock response for an API endpoint in WeChat DevTools.", width="800", height="485" %}
+  <figcaption>
+    WeChat DevTools' integrated API response mocking feature.
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+  Read on to learn about the [mark-up, styling, and scripting of mini apps](/mini-app-markup-styling-and-scripting/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-example-project/index.md b/src/site/content/en/mini-apps/mini-app-example-project/index.md
new file mode 100644
index 00000000000..5e022bab9f4
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-example-project/index.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: Applying the mini app programming principles to an example project
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter shows an example project that follows the "programming the mini app way" approach.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## The app domain
+
+To show the [mini app way of programming](/mini-app-programming-way/)
+applied to a web app, I needed a small but complete enough app idea.
+[High-intensity interval training](https://en.wikipedia.org/wiki/High-intensity_interval_training) (HIIT)
+is a cardiovascular exercise strategy of alternating sets of short periods of intense anaerobic exercise with less intense recovery periods.
+Many HIIT trainings use HIIT timers, for example, this [30&nbsp;minute online session](https://www.youtube.com/watch?v=tXOZS3AKKOw)
+from [The Body Coach TV](https://www.youtube.com/user/thebodycoach1) YouTube channel.
+
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tUl2jNm2bFqGBAFF5s63.png", alt="HIIT training online session with green high intensity timer.", width="800", height="450" %}
+    <figcaption>
+      Active period.
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMUgX3WJ4ZfQX38zHP75.png", alt="HIIT training online session with red low intensity timer.", width="800", height="450" %}
+    <figcaption>
+      Resting period.
+    </figcaption>
+  </figure>
+</div>
+
+## HIIT Time example app
+
+For this chapter, I have built a basic example of such a HIIT timer application aptly named
+"HIIT Time" that lets the user define and manage various timers,
+always consisting of a high and a low intensity interval,
+and then select one of them for a training session.
+It is a responsive app with a navbar, a tabbar, and three pages:
+
+- **Workout:** The active page during a workout. It lets the user select one of the timers
+  and features three progress rings: the number of sets, the active period, and the resting period.
+- **Timers:** Manages existing timers and lets the user create new ones.
+- **Preferences:** Allows toggling sound effects and speech output and selecting language and theme.
+
+The following screenshots give an impression of the application.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9RYkQ17tlEy79NlAIFfP.svg", alt="HIIT Time example app in portrait mode.", width="800", height="450" %}
+  <figcaption>
+    HIIT Time "Workout" tab in portrait mode.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SNHMWFvHtCYHEfC9SHPl.svg", alt="HIIT Time example app in landscape mode.", width="800", height="450" %}
+  <figcaption>
+    HIIT Time "Workout" tab in landscape mode.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/f7uqTk1PNMVaHob7FDzA.svg", alt="HIIT Time example app showing management of a timer.", width="800", height="450" %}
+  <figcaption>
+    HIIT Time timer management.
+  </figcaption>
+</figure>
+
+## App structure
+
+As outlined above, the app consists of a navbar, a tabbar, and three pages, arranged in a grid.
+Navbar and tabbar are realized as iframes with a `<div>` container in between them with three more iframes
+for the pages, out of which one is always visible and dependent on the active selection in the tabbar.
+A final iframe pointing to `about:blank` serves for dynamically created in-app pages, which are needed for modifying existing
+timers or creating new ones.
+I call this pattern multi-page single-page app (MPSPA).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rv14TNs1kU0bpW5kv5bq.png", alt="Chrome DevTools view of the HTML structure of the app showing that it consists of six iframes: one for the navbar, one for the tabbar, and three grouped ones for each page of the app, with a final placeholder iframe for dynamic pages.", width="800", height="244" %}
+  <figcaption>
+    The app consists of six iframes.
+  </figcaption>
+</figure>
+
+## Components-based lit-html markup
+
+The structure of each page is realized as [lit-html](https://lit-html.polymer-project.org/) scaffold
+that gets dynamically evaluated at runtime.
+For a background on lit-html, it is an efficient, expressive, extensible HTML templating library for JavaScript.
+By using it directly in the HTML files, the mental programming model is directly output-oriented.
+As a programmer, you write a template of what the final output will look like,
+and lit-html then fills the gaps dynamically based on your data and hooks up the event listeners.
+The app makes use of third-party custom elements like [Shoelace](https://shoelace.style/)'s [`<sl-progress-ring>`](https://shoelace.style/components/progress-ring) or a self-implemented custom element called `<human-duration>`.
+Since custom elements have a declarative API (for example, the `percentage` attribute of the progress ring),
+they work well together with lit-html, as you can see in the listing below.
+
+```html
+<div>
+  <button class="start" @click="${eventHandlers.start}" type="button">
+    ${strings.START}
+  </button>
+  <button class="pause" @click="${eventHandlers.pause}" type="button">
+    ${strings.PAUSE}
+  </button>
+  <button class="reset" @click="${eventHandlers.reset}" type="button">
+    ${strings.RESET}
+  </button>
+</div>
+
+<div class="progress-rings">
+  <sl-progress-ring
+    class="sets"
+    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
+  >
+    <div class="progress-ring-caption">
+      <span>${strings.SETS}</span>
+      <span>${data.sets}</span>
+    </div>
+  </sl-progress-ring>
+</div>
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Toz6JmkCQVt7WLscSnlP.png", alt="Three buttons and a progress ring.", width="300", height="244" %}
+  <figcaption>
+    Rendered section of the page corresponding to the mark-up above.
+  </figcaption>
+</figure>
+
+## Programming model
+
+Each page has a corresponding `Page` class that fills the lit-html markup with life by providing implementations
+of the event handlers and providing the data for each page.
+This class also supports lifecycle methods like `onShow()`, `onHide()`, `onLoad()`, and `onUnload()`.
+Pages have access to a data store that serves for sharing optionally persisted per-page state and global state.
+All strings are centrally managed, so internationalization is built in.
+Routing is handled by the browser essentially for free, since all the app does is toggle iframe visibility and
+for dynamically created pages change the `src` attribute of the placeholder iframe.
+The example below shows the code for closing a dynamically created page.
+
+```js
+import Page from '../page.js';
+
+const page = new Page({
+  eventHandlers: {
+    back: (e) => {
+      e.preventDefault();
+      window.top.history.back();
+    },
+  },
+});
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/y82LVHSxUVAehgQlDbsb.png", alt="In-app page realized as an iframe.", width="500", height="272" %}
+  <figcaption>
+    Navigation happens from iframe to iframe.
+  </figcaption>
+</figure>
+
+## Styling
+
+Styling of pages happens per-page in its own scoped CSS file.
+This means elements can usually just be directly addressed by their element names,
+since no clashes with other pages can occur.
+Global styles are added to each page, so central settings like the `font-family` or the `box-sizing`
+do not need to be declared repeatedly.
+This is also where the themes and dark mode options are defined.
+The listing below shows the rules for the Preferences page that lays out the various form elements
+on a grid.
+
+```css
+main {
+  max-width: 600px;
+}
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 0.5rem;
+  margin-block-end: 1rem;
+}
+
+label {
+  text-align: end;
+  grid-column: 1 / 2;
+}
+
+input,
+select {
+  grid-column: 2 / 3;
+}
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/z3Op4O7OM5NQ1zz8Uah8.png", alt="HIIT Time app preferences page showing a form in grid layout.", width="500", height="312" %}
+  <figcaption>
+    Every page is its own world. Styling happens directly with the element names.
+  </figcaption>
+</figure>
+
+## Screen wake lock
+
+During a workout, the screen should not turn off.
+On browsers that support it, HIIT Time realizes this through a [screen wake lock](/wake-lock/).
+The snippet below shows how it is done.
+
+```js
+if ('wakeLock' in navigator) {
+  const requestWakeLock = async () => {
+    try {
+      page.shared.wakeLock = await navigator.wakeLock.request('screen');
+      page.shared.wakeLock.addEventListener('release', () => {
+        // Nothing.
+      });
+    } catch (err) {
+      console.error(`${err.name}, ${err.message}`);
+    }
+  };
+  // Request a screen wake lock…
+  await requestWakeLock();
+  // …and re-request it when the page becomes visible.
+  document.addEventListener('visibilitychange', async () => {
+    if (
+      page.shared.wakeLock !== null &&
+      document.visibilityState === 'visible'
+    ) {
+      await requestWakeLock();
+    }
+  });
+}
+```
+
+## Testing the application
+
+The HIIT Time application is available on [GitHub](https://github.com/tomayac/hiit-time).
+You can play with the [demo](https://tomayac.github.io/hiit-time/) in a new window,
+or right in the iframe embed below, which simulates a mobile device.
+
+<iframe src="https://tomayac.github.io/hiit-time/#workout" width="411" height="731" loading="lazy" frameborder="0" allow="screen-wake-lock"></iframe>
+
+{% Aside 'success' %}
+  The final chapter ends this collection on mini apps with a [conclusion](/mini-app-conclusion).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-markup-styling-and-scripting/index.md b/src/site/content/en/mini-apps/mini-app-markup-styling-and-scripting/index.md
new file mode 100644
index 00000000000..8d1d9983cd7
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-markup-styling-and-scripting/index.md
@@ -0,0 +1,280 @@
+---
+layout: post
+title: Mini app markup, styling, and scripting
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter looks at the mark-up, styling, and scripting options of various mini apps platforms.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Markup languages
+
+As outlined before, rather than with plain HTML, mini apps are written with dialects of HTML. If you
+have ever dealt with [Vue.js](https://vuejs.org/) text interpolation and directives, you will feel
+immediately at home, but similar concepts existed way before that in XML Transformations
+([XSLT](https://www.w3.org/TR/xslt-30/)). Below, you can see code samples from WeChat's
+[WXML](https://developers.weixin.qq.com/miniprogram/en/dev/framework/view/wxml/), but the concept is
+the same for all mini apps platforms, namely Alipay's
+[AXML](https://opendocs.alipay.com/mini/framework/axml), Baidu's
+[Swan Element](https://smartprogram.baidu.com/docs/develop/framework/dev/), ByteDance's
+[TTML](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttml)
+(despite the DevTools calling it Bxml), and Quick App's
+[HTML](https://doc.quickapp.cn/tutorial/framework/for.html). Just like with Vue.js, the underlying
+mini app programming concept is the
+[model-view-viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) (MVVM).
+
+### Data binding
+
+Data binding corresponds to Vue.js'
+[text interpolation](https://vuejs.org/v2/guide/syntax.html#Text).
+
+```html
+<!-- wxml -->
+<view>{% raw %}{{message}}{% endraw %}</view>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    message: "Hello World!",
+  },
+});
+```
+
+### List rendering
+
+List rendering works like Vue.js [`v-for` directive](https://vuejs.org/v2/guide/list.html).
+
+```html
+<!-- wxml -->
+<view wx:for="{% raw %}{{array}}{% endraw %}">{% raw %}{{item}}{% endraw %}</view>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    array: [1, 2, 3, 4, 5],
+  },
+});
+```
+
+### Conditional rendering
+
+Conditional rendering works like Vue.js'
+[`v-if` directive](https://vuejs.org/v2/guide/conditional.html).
+
+```html
+<!-- wxml -->
+<view wx:if="{% raw %}{{view == 'one'}}{% endraw %}">One</view>
+<view wx:elif="{% raw %}{{view == 'two'}}{% endraw %}">Two</view>
+<view wx:else="{% raw %}{{view == 'three'}}{% endraw %}">Three</view>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    view: "three",
+  },
+});
+```
+
+### Templates
+
+Rather than requiring the imperative
+[cloning of the `content` of an HTML template](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement/content),
+WXML templates can be used declaratively via the `is` attribute that links to a template definition.
+
+```html
+<!-- wxml -->
+<template name="person">
+  <view>
+    First Name: {% raw %}{{firstName}}{% endraw %}, Last Name: {% raw %}{{lastName}}{% endraw %}
+  </view>
+</template>
+```
+
+```html
+<template is="person" data="{% raw %}{{...personA}}{% endraw %}"></template>
+<template is="person" data="{% raw %}{{...personB}}{% endraw %}"></template>
+<template is="person" data="{% raw %}{{...personC}}{% endraw %}"></template>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    personA: { firstName: "Alice", lastName: "Foo" },
+    personB: { firstName: "Bob", lastName: "Bar" },
+    personC: { firstName: "Charly", lastName: "Baz" },
+  },
+});
+```
+
+## Styling
+
+Styling happens with dialects of CSS. WeChat's is named
+[WXSS](https://developers.weixin.qq.com/miniprogram/en/dev/framework/quickstart/code.html#WXSS-Style).
+For Alipay, theirs is called [ACSS](https://opendocs.alipay.com/mini/framework/acss), Baidu's simply
+[CSS](https://smartprogram.baidu.com/docs/develop/framework/view_css/), and for ByteDance, their
+dialect is referred to as
+[TTSS](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttss).
+What they have in common is that they extend CSS with responsive pixels. When writing regular CSS,
+developers need to convert all pixel units to adapt to different mobile device screens with
+different widths and pixel ratios. TTSS supports the `rpx` unit as its underlying layer, which means
+the mini app takes over the job from the developer and converts the units on their behalf, based on
+a specified screen width of `750rpx`. For example, on a Pixel 3a phone with a screen width of
+`393px` (and a device pixel ratio of `2.75`), responsive `200rpx` become `104px` on the real device
+when inspected with Chrome DevTools (393px / 750rpx \* 200rpx ≈ 104px). In Android, the same concept
+is called
+[density-independent pixel](https://developer.android.com/training/multiscreen/screendensities#TaskUseDP).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/n26ptkMoSfiTDanfFh5F.png", alt="Inspecting a view with Chrome DevTools whose responsive pixel padding was specified with `200rpx` shows that it is actually `104px` on a Pixel 3a device.", width="800", height="385" %}
+  <figcaption>
+    Inspecting the actual padding on a Pixel 3a device with Chrome DevTools.
+  </figcaption>
+</figure>
+
+```css
+/* app.wxss */
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0; /* ← responsive pixels */
+  box-sizing: border-box;
+}
+```
+
+Since components (see [later](/mini-app-components/)) do not use shadow DOM, styles declared on a page reach
+into all components. The common stylesheet file organization is to have one root stylesheet for
+global styles, and individual per-page stylesheets specific to each page of the mini app. Styles can
+be imported with an `@import` rule that behaves like the
+[`@import`](https://developer.mozilla.org/docs/Web/CSS/@import) CSS at-rule. Like in HTML,
+styles can also be declared inline, including dynamic text interpolation (see
+[before](/mini-app-markup-styling-and-scripting/#data-binding)).
+
+```html
+<view style="color:{% raw %}{{color}}{% endraw %};" />
+```
+
+## Scripting
+
+Mini apps support a "safe subset" of JavaScript that includes support for modules using varying
+syntaxes that remind of [CommonJS](http://www.commonjs.org/) or [RequireJS](https://requirejs.org/).
+JavaScript code cannot be executed via `eval()` and no functions can be created with
+`new Function()`. The scripting execution context is [V8](https://v8.dev/) or
+[JavaScriptCore](https://developer.apple.com/documentation/javascriptcore) on devices, and V8 or
+[NW.js](https://nwjs.io/) in the simulator. Coding with ES6 or newer syntax is usually possible,
+since the particular DevTools automatically transpile the code to ES5 if the build target is an
+operating system with an older WebView implementation (see [later](/mini-app-project-structure-lifecycle-and-bundling/#the-build-process)). The
+documentation of the super app providers explicitly mentions that their scripting languages are not
+to be confused with and are distinct from JavaScript. This statement, however, refers mostly just to
+the way modules work, that is, that they do not support standard
+[ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) yet.
+
+As mentioned [before](/mini-app-markup-styling-and-scripting/#markup-languages), the mini app programming concept is the
+[model-view-viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) (MVVM).
+The logic layer and the view layer run on different threads, which means the user interface does not
+get blocked by long-running operations. In web terms, you can think of scripts running in a
+[Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers).
+
+WeChat's scripting language is called
+[WXS](https://developers.weixin.qq.com/miniprogram/en/dev/reference/wxs/), Alipay's
+[SJS](https://opendocs.alipay.com/mini/framework/sjs), ByteDance's likewise
+[SJS](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/sjs-syntax-reference/sjs-introduction/).
+Baidu speaks of [JS](https://smartprogram.baidu.com/docs/develop/framework/devjs/) when referencing
+theirs. These scripts need to be included using a special kind of tag, for example, `<wxs>` in
+WeChat. In contrast, Quick App uses regular `<script>` tags and the ES6
+[JS](https://doc.quickapp.cn/framework/script.html) syntax.
+
+```html
+<wxs module="m1">
+  var msg = "hello world";
+  module.exports.message = msg;
+</wxs>
+
+<view>{% raw %}{{m1.message}}{% endraw %}</view>
+```
+
+Modules can also be loaded via a `src` attribute, or imported via `require()`.
+
+```js
+// /pages/tools.wxs
+var foo = "'hello world' from tools.wxs";
+var bar = function (d) {
+  return d;
+};
+module.exports = {
+  FOO: foo,
+  bar: bar,
+};
+module.exports.msg = "some msg";
+```
+
+```html
+<!-- page/index/index.wxml -->
+<wxs src="./../tools.wxs" module="tools" />
+<view>{% raw %}{{tools.msg}}{% endraw %}</view>
+<view>{% raw %}{{tools.bar(tools.FOO)}}{% endraw %}</view>
+```
+
+```js
+// /pages/logic.wxs
+var tools = require("./tools.wxs");
+
+console.log(tools.FOO);
+console.log(tools.bar("logic.wxs"));
+console.log(tools.msg);
+```
+
+### JavaScript bridge API
+
+The JavaScript bridge that connects mini apps with the operating system makes it possible
+to use OS capabilities (see [Access to powerful features](/mini-app-about/#access-to-powerful-features). It
+also offers a number of convenience methods. For an overview, you can check out the different APIs
+of [WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/api/),
+[Alipay](https://opendocs.alipay.com/mini/api),
+[Baidu](https://smartprogram.baidu.com/docs/develop/api/apilist/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/foundation/tt-can-i-use),
+and [Quick App](https://doc.quickapp.cn/features/).
+
+Feature detection is straightforward, since all platforms provide a (literally called like this)
+`canIUse()` method whose name seems inspired by the website [caniuse.com](https://caniuse.com/). For
+example, ByteDance's
+[`tt.canIUse()`](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/foundation/tt-can-i-use)
+allows for support checks for APIs, methods, parameters, options, components, and attributes.
+
+```js
+// Testing if the `<swiper>` component is supported.
+tt.canIUse("swiper");
+// Testing if a particular field is supported.
+tt.canIUse("request.success.data");
+```
+
+{% Aside 'success' %}
+  The next chapter introduces [mini app components](/mini-app-components/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-open-source-projects/index.md b/src/site/content/en/mini-apps/mini-app-open-source-projects/index.md
new file mode 100644
index 00000000000..42391d059c6
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-open-source-projects/index.md
@@ -0,0 +1,301 @@
+---
+layout: post
+title: Mini app open source projects
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter presents a selection of interesting mini app open source projects.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## kbone
+
+The [kbone](https://wechat-miniprogram.github.io/kbone/docs/) project
+([open source on GitHub](https://github.com/Tencent/kbone)) implements an adapter that simulates a
+browser environment in the adaptation layer, so that code written for the web can run without
+changes in a mini app. Several starter templates (among them
+[Vue](https://github.com/wechat-miniprogram/kbone-template-vue),
+[React](https://github.com/wechat-miniprogram/kbone-template-react), and
+[Preact](https://github.com/wechat-miniprogram/kbone-template-preact)) exist that make the
+onboarding experience for web developers coming from these frameworks easier.
+
+A new project can be created with the `kbone-cli` tool. A wizard asks what framework to initiate the
+project with. The code snippet below shows the Preact demo. In the code snippet below, the `mp`
+command builds the mini app, the `web` command builds the web app, and `build` creates the
+production web app.
+
+```bash
+npx kbone-cli init my-app
+cd my-app
+npm run mp
+npm run web
+npm run build
+```
+
+The code snippet below shows a simple counter component that then gets isomorphically rendered in a
+mini app and a web app. The overhead of the mini app is significant, purely judging from the DOM
+structure.
+
+```js
+import { h, Component } from "preact";
+import "./index.css";
+
+class Counter extends Component {
+  state = { count: 1 };
+
+  sub = () => {
+    this.setState((prevState) => {
+      return { count: --prevState.count };
+    });
+  };
+
+  add = () => {
+    this.setState((prevState) => {
+      return { count: ++prevState.count };
+    });
+  };
+
+  clickHandle = () => {
+    if ("undefined" != typeof wx && wx.getSystemInfoSync) {
+      wx.navigateTo({
+        url: "../log/index?id=1",
+      });
+    } else {
+      location.href = "log.html";
+    }
+  };
+
+  render({}, { count }) {
+    return (
+      <div>
+        <button onClick={this.sub}>-</button>
+        <span>{count}</span>
+        <button onClick={this.add}>+</button>
+        <div onClick={this.clickHandle}>跳转</div>
+      </div>
+    );
+  }
+}
+
+export default Counter;
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DDreycxzclMP8IiUplyO.png", alt="The Preact kbone template demo app opened in WeChat DevTools. Inspecting the DOM structure shows a significant overhead compared to the web app.", width="800", height="664" %}
+  <figcaption>
+   The Preact kbone template demo app opened in WeChat DevTools. Note the complex DOM structure and how the plus and minus buttons are actually not <code>&lt;button&gt;</code> elements.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rerYiCnwc92DP7pM7WPc.png", alt="The Preact kbone template demo app opened in the web browser. Inspecting the DOM structure shows the to-be-expected markup based on the Preact component code.", width="800", height="496" %}
+  <figcaption>
+   The Preact kbone template demo app opened in the web browser. Note the DOM structure.
+  </figcaption>
+</figure>
+
+## kbone-ui
+
+The [kbone-ui](https://wechat-miniprogram.github.io/kbone/docs/ui/intro/) project
+([open source on GitHub](https://github.com/wechat-miniprogram/kbone-ui)) is a UI framework that
+facilitates both mini app development as well as Vue.js development with kbone. The kbone-ui
+components emulate the look and feel of
+[WeChat's built-in mini app components](https://developers.weixin.qq.com/miniprogram/dev/component/)
+(also see [Components](/mini-app-components/) above). A
+[demo](https://wechat-miniprogram.github.io/kboneui/ui/#/) that runs directly in the browser lets
+you explore the available components.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wEA4Hr2JyVfKgdHnpb5o.png", alt="Demo of the kbone-ui framework showing form-related components like radio buttons, switches, inputs, and labels.", width="320", height="438" %}
+  <figcaption>
+   The kbone-ui demo showing form-related components.
+  </figcaption>
+</figure>
+
+## WeUI
+
+[WeUI](https://github.com/Tencent/weui) is a set of basic style libraries consistent with WeChat's
+default visual experience. The official WeChat design team has tailored designs for WeChat internal
+web pages and WeChat mini apps to make users' perception of use more uniform. It includes components
+such as `button`, `cell`, `dialog`, `progress`, `toast`, `article`, `actionsheet`, and `icon`. There
+are different versions of WeUI available like [weui-wxss](https://github.com/Tencent/weui-wxss/) for
+WeChat mini apps styled with WXSS (see [Styling](/mini-app-markup-styling-and-scripting/#styling) above),
+[weui.js](https://github.com/weui/weui.js/) for web apps, and
+[react-weui](https://github.com/weui/react-weui/) for WeChat React components.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/V0xswCD3MJltrxALmy8n.png", alt="Demo of the WeUI framework showing form-related components, namely switches.", width="450", height="395" %}
+  <figcaption>
+   The WeUI demo app showing switches.
+  </figcaption>
+</figure>
+
+## Omi
+
+[Omi](https://tencent.github.io/omi/) is a self-proclaimed frontend cross-frameworks framework
+([open source on GitHub](https://github.com/Tencent/omi). It merges Web Components, JSX, Virtual
+DOM, functional style, observer or Proxy into one framework with tiny size and high performance. Its
+aim is to let developers write components once and use them everywhere, such as Omi, React, Preact,
+Vue.js, or Angular. Writing Omi components is very intuitive and free of almost all boilerplate.
+
+```js
+import { render, WeElement, define } from "omi";
+
+define("my-counter", class extends WeElement {
+  data = {
+    count: 1,
+  };
+
+  static css = `
+    span{
+        color: red;
+    }`;
+
+  sub = () => {
+    this.data.count--;
+    this.update();
+  };
+
+  add = () => {
+    this.data.count++;
+    this.update();
+  };
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.sub}>-</button>
+        <span>{this.data.count}</span>
+        <button onClick={this.add}>+</button>
+      </div>
+    );
+  }
+});
+
+render(<my-counter />, "body");
+```
+
+## Omiu
+
+[Omiu](https://tencent.github.io/omi/components/docs/) is a cross framework UI component library
+([open source on GitHub](https://github.com/Tencent/omi#omiu)) developed based on Omi, which outputs
+custom elements of standard web components.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eoNhik827CE4TfaT9ZaV.png", alt="Demo of the Omiu framework showing form-related components, namely switches.", width="800", height="939" %}
+  <figcaption>
+   The Omiu demo app showing switches.
+  </figcaption>
+</figure>
+
+## WePY
+
+[WePY](https://wepyjs.github.io/wepy-docs/) is a framework that allows mini apps to support
+componentized development. Through pre-compilation, developers can choose their favorite development
+style to develop mini apps. The detailed optimization of the framework and the introduction of
+Promises and async functions all make the development of mini app projects easier and more
+efficient. At the same time, WePY is also a growing framework, which has largely absorbed some
+optimized frontend tools and framework design concepts and ideas, mostly from Vue.js.
+
+```html
+<style lang="less">
+  @color: #4d926f;
+  .num {
+    color: @color;
+  }
+</style>
+
+<template>
+  <div class="container">
+    <div class="num" @tap="num++">{% raw %}{{num}}{% endraw %}</div>
+    <custom-component></custom-component>
+    <vendor-component></vendor-component>
+    <div>{% raw %}{{text}}{% endraw %}</div>
+    <input v-model="text" />
+  </div>
+</template>
+
+<config>
+  { usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
+  'module:vendorComponent' } }
+</config>
+
+<script>
+  import wepy from "@wepy/core";
+
+  wepy.page({
+    data: {
+      num: 0,
+      text: "Hello World",
+    },
+  });
+</script>
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ooxZuXzVY9aHXmha36vM.png", alt="WePY 'getting started' documentation page showing the first steps to get going.", width="800", height="505" %}
+  <figcaption>
+   WePY "getting started" documentation.
+  </figcaption>
+</figure>
+
+## vConsole
+
+The [vConsole](https://github.com/Tencent/vConsole) project provides a lightweight, extendable
+frontend developer tool for mobile web pages. It offers a DevTools-like debugger that can be
+injected directly into web apps and mini apps. A
+[demo](http://wechatfe.github.io/vconsole/demo.html) showcases the opportunities. The vConsole
+includes tabs for logs, system, network, elements, and storage.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ow6FfaoI7fMCJDN1819t.png", alt="vConsole demo app. The vConsole opens at the bottom and has tabs for logs, system, network, elements, and storage.", width="800", height="505" %}
+  <figcaption>
+   vConsole demo app showing the elements explorer.
+  </figcaption>
+</figure>
+
+## weweb
+
+The [weweb](https://weidian-inc.github.io/hera/#/) project
+([open source on GitHub](https://github.com/wdfe/weweb)) is the underlying frontend framework of
+the [Hera](https://weidian-inc.github.io/hera/#/) mini app framework that claims to be compatible
+with the syntax of WeChat mini apps, so you can write web applications in the way of mini apps. The
+documentation promises that if you already have a mini app, you can run it in the browser thanks to
+weweb. In my experiments, this did not work reliably for current mini apps, most probably because
+the project has not seen updates recently leading its compiler to miss changes in the
+WeChat platform.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jU9Od9IDqFlmuYzAtirn.png", alt="Documentation of the Hera mini app framework listing the WeChat APIs that it supports like `wx.request`, `wx.uploadFile`, etc.", width="800", height="505" %}
+  <figcaption>
+   Hera mini app framework documentation showing the list of supported WeChat APIs.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/C7ZpPrFE4geW0dylRpZ2.png", alt="The weweb demo mini app compiled with weweb to run in the browser showing form elements.", width="300", height="429" %}
+  <figcaption>
+    The weweb demo mini app compiled with weweb to run in the browser.
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+  In the next chapter, you will learn how to [program the mini app way](/mini-app-programming-way/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-programming-way/index.md b/src/site/content/en/mini-apps/mini-app-programming-way/index.md
new file mode 100644
index 00000000000..3a65e7bfc5b
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-programming-way/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Programming the mini app way
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter introduces the way of programming the mini app way.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## What has worked well for mini apps
+
+In this chapter, I want to look at lessons I learned from researching mini apps from a web
+developer's point of view, or answer the question what does it mean to develop the mini app way.
+
+## Components
+
+Rather than reinvent the wheel and make developers build yet another implementation of common UI paradigms like tabs,
+accordions, carousels, etc., mini apps just ship with a default selection of components that is extensible in case you need more.
+On the web, there are likewise many options, some of which I have listed in the [chapter on mini app components](/mini-app-components/#web-components).
+In an ideal world, component libraries on the web were built in a way that you could mix them freely.
+In practice, too many times, there is a certain lock-in regarding a design system you need to buy in to when you use a component,
+or the component library is distributed in a way that it is all or nothing, but no individual components can be easily added to a project.
+There are, however, atomic components that you can use in isolation, or libraries like [generic-components](https://github.com/thepassle/generic-components)
+that are unstyled on purpose.
+Finding an using those seems like a good idea.
+
+## Model-view-viewmodel
+
+The [model–view–viewmodel](/mini-app-markup-styling-and-scripting/#markup-languages) (MVVM) architectural pattern—that facilitates the
+separation of the development of the graphical user interface (the view) via a markup language from
+the development of the back-end logic (the model)—means the view is not dependent on any specific model platform.
+While there are some documented [disadvantages](https://docs.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm) of the pattern, in general it works really well for applications of the complexity of mini apps.
+It can shine especially with rich templating libraries (see [next chapter](/mini-app-example-project/)).
+
+## Page-wise thinking
+
+Debugging mini apps shows that they are essentially multi-page applications (MPA).
+This has many advantages, like, for example, it allows for trivial routing and conflict-free per-page styling.
+People have [successfully applied MPA architectures](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509) to Progressive Web Apps.
+Thinking in pages also helps manage resources like each page's CSS and JavaScript files, and other assets like images and videos.
+Most importantly, building this way means you get route-based code splitting for free
+if you do not load anything else.
+In that case, each page by definition strictly only loads what it needs to function.
+
+## Build process
+
+Mini apps have [no visible build process](/mini-app-project-structure-lifecycle-and-bundling/#the-build-process).
+On the web, modern build tools like [Snowpack](https://www.snowpack.dev/) leverage JavaScript's built-in
+[module system](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)
+(known as ESM) to avoid unnecessary work and stay fast no matter how big a project grows.
+While it is early days for technologies like [Web Bundles](/web-bundles/), it is something that can be easily added
+to the build process.
+
+## Powerful capabilities
+
+The web platform has gained many [new capabilities](/tags/capabilities/) recently.
+Access to [devices](/tags/devices/) via [Bluetooth](/bluetooth/), [USB](/usb/), [HID](/hid/), [serial](/serial/),
+and [NFC](/nfc/) is all possible now.
+Where mini apps run in WebViews and depend on a [JavaScript bridge](/mini-app-markup-styling-and-scripting/#javascript-bridge-api),
+on the web, these powerful capabilities are available directly,
+so you do not program against an API provided by the JavaScript bridge,
+but against the browser API without an intermediate actor.
+
+{% Aside 'success' %}
+  Read on to see an [example project](/mini-app-example-project/) that puts this way of programming into practice.
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md b/src/site/content/en/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md
new file mode 100644
index 00000000000..a680a30abd6
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md
@@ -0,0 +1,171 @@
+---
+layout: post
+title: Project structure, lifecycle, and bundling
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter covers the project structure, the lifecycle, and the bundling of mini apps.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Mini app project structure
+
+As before with the markup languages, the styling languages, and the components; with the mini app
+project structure, too, the details like the file extensions or the default names vary. The
+overall idea, though, is the same for all super app providers. The project structure always consists of:
+
+- A root file `app.js` that initializes the mini app.
+- A configuration file `app.json` that _roughly_ corresponds to a
+  [web app manifest](https://developer.mozilla.org/docs/Web/Manifest).
+- An optional common style sheet file `app.css` with shared default styles.
+- A `project.config.json` file that contains build information.
+
+All the pages are stored in individual subfolders in a
+`pages` folder. Each page subfolder contains a CSS file, a JS file, an HTML file, and an optional
+configuration JSON file. All files must be named like their containing folder, apart from the file
+extensions. Like that, the mini app just needs a pointer to the directory in the `app.json` file
+(the manifest-like file), and can find all subresources dynamically. From the perspective of a web
+developer, mini apps are thus multi page apps.
+
+```bash
+├── app.js               # Initialization logic
+├── app.json             # Common configuration
+├── app.css              # Common style sheet
+├── project.config.json  # Project configuration
+└── pages                # List of pages
+   ├── index               # Home page
+   │   ├── index.css         # Page style sheet
+   │   ├── index.js          # Page logic
+   │   ├── index.json        # Page configuration
+   │   └── index.html        # Page markup
+   └── other               # Other page
+       ├── other.css         # Page style sheet
+       ├── other.js          # Page logic
+       ├── other.json        # Page configuration
+       └── other.html        # Page markup
+```
+
+## Mini app lifecycle
+
+A mini app must be registered with the super app by calling the globally defined `App()` method.
+Referring to the project structure outlined [before](#mini-app-project-structure), this happens in
+`app.js`. The mini app lifecycle essentially consists of four events: `launch`, `show`, `hide`, and
+`error`. Handlers for these events can be passed to the `App()` method in the form of a
+configuration object, which can also contain a `globalData` property that holds data that should be
+globally available across all pages.
+
+```js
+/* app.js */
+App({
+  onLaunch(options) {
+    // Do something when the app is launched initially.
+  },
+  onShow(options) {
+    // Do something when the app is shown.
+  },
+  onHide() {
+    // Do something when the app is hidden.
+  },
+  onError(msg) {
+    console.log(msg);
+  },
+  globalData: "I am global data",
+});
+```
+
+As usual, the individual details vary, but the concept is the same for
+[WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/reference/api/App.html),
+[Alipay](https://opendocs.alipay.com/mini/framework/app-detail),
+[Baidu](https://smartprogram.baidu.com/docs/develop/framework/app_service_register/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/logic-layer/start-app/),
+and also
+[Quick App](https://doc.quickapp.cn/tutorial/framework/lifecycle.html#app-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F).
+
+## Page lifecycle
+
+Similar to the app lifecycle, the page lifecycle, too, has lifecycle events that the developer can
+listen for and react upon. These core events are `load`, `show`, `ready`, `hide`, and `unload`. Some
+platforms offer additional events like `pulldownrefresh`. Setting up the event handlers happens in
+the `Page()` method that is defined for each page. For the `index` or the `other` pages from the
+project structure [before](#mini-app-project-structure), this would happen in `index.js` or
+`other.js` respectively.
+
+```js
+/* index.js */
+Page({
+  data: {
+    text: "This is page data.",
+  },
+  onLoad: function (options) {
+    // Do something when the page is initially loaded.
+  },
+  onShow: function () {
+    // Do something when the page is shown.
+  },
+  onReady: function () {
+    // Do something when the page is ready.
+  },
+  onHide: function () {
+    // Do something when the page is hidden.
+  },
+  onUnload: function () {
+    // Do something when the page is closed.
+  },
+  onPullDownRefresh: function () {
+    // Do something when the user pulls down to refresh.
+  },
+  onReachBottom: function () {
+    // Do something when the user scrolls to the bottom.
+  },
+  onShareAppMessage: function () {
+    // Do something when the user shares the page.
+  },
+  onPageScroll: function () {
+    // Do something when the user scrolls the page.
+  },
+  onResize: function () {
+    // Do something when the user resizes the page.
+  },
+  onTabItemTap(item) {
+    // Do something when the user taps the page's tab.
+  },
+  customData: {
+    foo: "bar",
+  },
+});
+```
+
+## The build process
+
+The build process of mini apps is abstracted away from the developer. Under the hood, it is using
+industry tools like the [Babel](https://babeljs.io/) compiler for transpilation and minification and
+the [postcss](https://postcss.org/) CSS transformer. The build experience is comparable to that of
+[Next.js](https://nextjs.org/) or
+[`create-react-app`](https://reactjs.org/docs/create-a-new-react-app.html), where developers, if
+they explicitly choose not to, never touch the build parameters. The resulting processed files
+are finally signed, encrypted, and packaged in one or several (sub)packages that then get uploaded
+to the servers of the super app providers. Subpackages are meant for lazy loading, so a mini app
+does not have to be downloaded all at once. The packaging details are meant to be private and are
+not documented, but some package formats like WeChat's `wxapkg` format have been
+[reverse-engineered](https://github.com/sjatsh/unwxapkg).
+
+{% Aside 'success' %}
+  The next chapter provides insights on the [mini app standardization effort](/mini-app-standardization/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-standardization/index.md b/src/site/content/en/mini-apps/mini-app-standardization/index.md
new file mode 100644
index 00000000000..1a239bae8e8
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-standardization/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: Mini app standardization
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter introduces the standardization effort that has been started for mini apps.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## Mini app popularity
+
+Mini apps have seen tremendous growth. WeChat mini apps as of June 2020 have reached
+[830 million active users](https://www.questmobile.com.cn/research/report-new/122), Alipay mini apps
+[401 million active users](https://kr-asia.com/the-mau-of-wechat-alipay-and-baidus-mini-programs-now-add-up-to-more-than-1-billion)
+as of April 2019, and Baidu mini apps in the same month
+[115 million active users](https://kr-asia.com/the-mau-of-wechat-alipay-and-baidus-mini-programs-now-add-up-to-more-than-1-billion).
+Effectively companies have traded building apps for the two operating systems iOS and Android and
+additionally the web for building apps for three or more
+[super apps platforms](/mini-app-super-apps/#for-mini-apps-you-need-super-apps).
+The differences
+between each super app platform may not be as big as the differences between Android, iOS, and the
+web, but nevertheless they exist. Where on Android, iOS, and the web, we have seen cross-platform
+approaches like [Flutter](https://flutter.dev/), [Ionic](https://ionicframework.com/), and
+[React Native](https://reactnative.dev/) ([for Web](https://github.com/necolas/react-native-web))
+gain popularity, in the mini apps ecosystem, we can see an effort led by the
+[MiniApps Ecosystem Community Group](https://www.w3.org/community/miniapps/) with
+[members](https://www.w3.org/community/miniapps/participants) from, among others, Alibaba, Baidu,
+ByteDance, Huawei, Intel, Xiaomi, China Mobile, Facebook, and Google to standardize aspects of mini
+apps.
+
+## Publications
+
+Notable publications of the group so far include a
+[whitepaper](https://w3c.github.io/miniapp/white-paper/), a
+[Comparison of APIs in MiniApps, W3C specs, and PWAs](https://www.w3.org/TR/mini-app-white-paper/comparison.html),
+and specifications and explainers on the following aspects:
+
+- URI Scheme: [spec](https://w3c.github.io/miniapp/specs/uri/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/uri/docs/explainer.md)
+- Lifecycle: [spec](https://w3c.github.io/miniapp/specs/lifecycle/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/lifecycle/docs/explainer.md)
+- Manifest: [spec](https://w3c.github.io/miniapp/specs/manifest/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/manifest/docs/explainer.md)
+- Packaging: [spec](https://w3c.github.io/miniapp/specs/packaging/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/packaging/docs/explainer.md)
+- An exploration of [widget requirements](https://w3c.github.io/miniapp/specs/widget-req/)
+
+W3C member and group participant Fuqiao Xue (W3C) has further published a
+[Comparison of MiniApps and web apps](https://xfq.github.io/miniapp-comparison/) on his own behalf,
+that is, not as an official group publication, but nonetheless worth the read.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NW2O3YZ3kxJPPeFr4Jw6.png", alt="The header of the MiniApp Standardization White Paper in a browser window.", width="800", height="540" %}
+  <figcaption>
+    The MiniApp Standardization White Paper.
+  </figcaption>
+</figure>
+
+## Formal launch of the W3C MiniApps Working Group
+
+On January 19, 2021, the [MiniApps Working Group](https://www.w3.org/2021/miniapps/) was [formally launched](https://www.w3.org/blog/2021/01/w3c-launches-the-miniapps-working-group/) in the W3C.
+The group uses the spelling and capitalization "MiniApps" to distinguish the standardization effort from the technology.
+You can read the group's [charter](https://www.w3.org/2021/01/miniapps-wg-charter.html) to get a feel for the planned work.
+Leaders of the group introduced the effort as follows:
+
+> Currently, there are many variants of MiniApps developed by different vendors with different APIs.
+  To enhance the interoperability between MiniApp platforms, mainstream MiniApp vendors including
+  Alibaba, Baidu, Huawei, and Xiaomi have been working together in the [W3C Chinese Web Interest Group](https://www.w3.org/2018/chinese-web-ig/index.html)
+  since May 2019 and published a [MiniApp Standardization White Paper](https://www.w3.org/TR/mini-app-white-paper/) in September 2019 as the initial standardization exploration for MiniApp technologies. As more global companies get interested in joining the MiniApp related discussion, the MiniApps Ecosystem Community Group launched during TPAC 2019 so that the global Web community can join the discussion.
+
+> Based on extensive standardization requirements, W3C today announced the formal establishment of the MiniApps Working Group,
+  dedicated to in-depth exploration and coordination of the diverse MiniApp ecosystem with W3C members and the public,
+  and enhancing the interoperability of different MiniApp platforms, thereby maximizing the integration of MiniApps and the Web,
+  reducing technical fragmentation and the learning cost of developers.
+
+*"Maximizing the integration of MiniApps and the Web"* in particular sounds very interesting.
+As a curious member of the group, I look forward to seeing where this endeavor is headed.
+
+{% Aside 'success' %}
+  The following chapter looks at [alternative mini app runtime environments](/mini-app-alternative-runtime-environments/) apart from mobile devices.
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-super-apps/index.md b/src/site/content/en/mini-apps/mini-app-super-apps/index.md
new file mode 100644
index 00000000000..8988b4632b4
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-super-apps/index.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Mini apps and super apps
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter introduces the concept of super apps and presents the major super app providers.
+tags:
+  - mini-apps
+---
+
+## Welcome to mini apps
+
+When you look at applications on your phone, you probably have specific apps for specific tasks.
+You might have a banking app. You might have an app for buying public transit tickets. Likely you
+have an app for getting directions, and many more specialized apps. This post introduces you to the
+concept of a different kind of apps—mini apps—sometimes also called mini programs or applets.
+You will first learn about the background of various mini app platforms and their developer experience, and
+then focus on things the web can learn from mini apps. But before learning about mini apps, you first
+need to learn about super apps.
+
+## What are super apps?
+
+Super apps serve as hosts to other apps that run within them: the so-called mini apps. Popular super apps are
+[WeChat](https://weixin.qq.com/) (微信) by Tencent, [Alipay](https://www.alipay.com/) (支付宝) by Ant Group
+(an affiliate company of the Chinese Alibaba Group), the app of the search engine [Baidu](https://baidu.com/) (百度),
+as well as ByteDance's [Douyin](https://www.douyin.com/) (抖音), which you might know as TikTok (蒂克托克).
+The first three are commonly also referred to as BAT, derived from **B**(aidu)**A**(libaba)**T**(encent).
+Super apps have taken the Chinese market by storm, which is why a lot of the examples in this article are Chinese.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/UKmUgG231MtQ2nEo1P0K.PNG", alt="List of recently launched mini apps in the WeChat super app.", width=300, height=649 %}
+  <figcaption>The WeChat super app showing recently launched mini apps.</figcaption>
+</figure>
+
+### A few words about super app platforms
+
+WeChat aims to make itself a one-stop shop to meet almost any need users might have in their daily
+lives. Alipay builds its platforms on top of its payment system, focusing on retail and financial
+services, including credit, loan, insurance, installment, and local life services. Baidu strives to
+transform its search engine from solely connecting people, services, and information into
+information-as-a-service through mini programs for travel, retail, ads, payment, and more. Last but
+not least Douyin wants to boost itself as a hub for social e-commerce and transform to more of an
+entertainment and shopping platform.
+
+### Installing super apps
+
+Super apps are available on multiple operating systems. Note that the versions available in
+the official app stores may not always contain all features or be available in all locales. The
+links below point to links that work universally, but that may require loading from untrusted
+sources, so download and install the apps **at your own risk**. You typically need to create an
+account, which involves revealing your phone number. You might want to consider getting a burner
+phone. Be advised that many super apps only allow you to create a so-called overseas account, which
+does not have all features of a domestic account.
+
+- **WeChat:** [iOS](https://apps.apple.com/us/app/wechat/id414478124),
+  [Android](https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&t=weixin_download_method&sys=android&loc=weixin,android,web,0),
+  [macOS](https://mac.weixin.qq.com/), [Windows](https://pc.weixin.qq.com/)
+- **Baidu:** [iOS](https://apps.apple.com/us/app/%E7%99%BE%E5%BA%A6/id382201985),
+  [Android](https://play.google.com/store/apps/details?id=com.baidu.searchbox&hl=en)
+- **Alipay:** [iOS](https://itunes.apple.com/app/id333206289?mt=8),
+  [Android](https://t.alipayobjects.com/L1/71/100/and/alipay_wap_main.apk)
+- **Douyin:**
+  [iOS](https://itunes.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1&mt=8)
+  (CN-only), [Android](http://s.toutiao.com/UsMYE/)
+
+{% Aside %}
+Since the user interface of many super apps is Chinese-only, use the
+[Google Translate app](https://translate.google.com/intl/en/about/#!#speak-with-the-world) in camera
+mode with a secondary phone (given you have one) to understand what is going on if you do not speak Chinese.
+{% endAside %}
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSLjHjkFgscBC2j2d6j9.png", alt="A secondary phone running Google Translate in camera mode live-translating the user interface of a Chinese mini app running on the primary phone.", width="300", height="520" %}
+  <figcaption>
+    Using Google Translate in camera mode to live-translate a Chinese mini app.
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+  Read on to [learn more about mini apps](/mini-app-about/) in the next chapter.
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/mini-apps/mini-app-what-are-h5-and-quickapp/index.md b/src/site/content/en/mini-apps/mini-app-what-are-h5-and-quickapp/index.md
new file mode 100644
index 00000000000..560142f3d6a
--- /dev/null
+++ b/src/site/content/en/mini-apps/mini-app-what-are-h5-and-quickapp/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: What are H5 and QuickApp?
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  This chapter provides background on H5 apps and QuickApp, which are both distinct from mini apps.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+  This post is part of an article collection where each article builds upon previous articles.
+  If you just landed here, you may want to start reading from the [beginning](/mini-app-super-apps/).
+{% endAside %}
+
+## What mini apps are not
+
+Before I go into more detail on the developer experience of mini apps, I want to briefly mention and
+set apart two technologies that come up in the context of mini apps, H5 and Quick App.
+
+## H5
+
+H5 apps (or pages) are commonly seen as the predecessor of mini apps. What people mean by H5 is
+essentially a well-designed mobile web app (or page) that can be shared easily on chat applications.
+H5 is a reference to the HTML5 umbrella of technologies that includes responsive design, snappy CSS
+animations, multimedia content, etc. The Chinese Wikipedia actually
+[redirects](https://zh.wikipedia.org/wiki/H5) from H5 to HTML5. A good example of a representative
+H5 page experience is the [WeChat H5 boilerplate](https://panteng.github.io/wechat-h5-boilerplate/)
+project's demo.
+
+## Quick App
+
+[Quick App](https://www.quickapp.cn/) is an industry alliance consisting of the following members:
+
+- [vivo open platform](https://dev.vivo.com.cn/)
+- [Huawei Developer Alliance](http://developer.huawei.com/cn/consumer)
+- [OPPO open platform](https://open.oppomobile.com/)
+- [Xiaomi Open Platform](https://dev.mi.com/console/app/newapp.html)
+- [Lenovo Open Platform](http://open.lenovo.com/developer/)
+- [Gionee Open Platform](http://devquickapp.gionee.com/)
+- [Meizu Open Platform](http://open.flyme.cn/)
+- [ZTE Developer Platform](https://dev.ztems.com/)
+- [Nubian Open Platform](http://developer.nubia.com/developer/view/index.html)
+- [OnePlus Open Platform](http://www.oneplus.cn/)
+- [Hisense Open Platform](http://dev.hismarttv.com/)
+- [China Mobile Terminal Corporation](https://www.chinamobileltd.com/tc/global/home.php)
+
+While the technology of Quick App is comparable to "regular" mini apps (see
+[Building blocks and compatibility](/mini-app-about/#building-blocks-and-compatibility)), the discovery of Quick App
+is different. They are meant to be listed in stores, which come pre-installed on devices of the
+manufacturers in the alliance, but can also be shared by means of a deep link (see the
+[Quick App showcase](https://www.quickapp.cn/quickAppShow)). They do not run in the context of a
+super app, but launch as seemingly self-contained full screen applications that feel deeply integrated into
+device. What happens in the background is that they are opened in a full screen view rendered by the
+operating system that provides the JavaScript bridge.
+
+{% Aside 'success' %}
+  The next chapter covers the [developer experience of mini apps](/mini-app-devtools/).
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by
+[Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+and Keith Gu.
diff --git a/src/site/content/en/newsletter/archive/2019/11/index.njk b/src/site/content/en/newsletter/archive/2019/11/index.njk
new file mode 100644
index 00000000000..9166960a7dd
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2019/11/index.njk
@@ -0,0 +1,778 @@
+---
+title: Performance, Chrome Dev Summit and more
+subhead: Read our November 2019 Newsletter for the latest news, updates, and stories for developers!
+date: 2019-11-07
+thumbnail: image/admin/f6I126royVcm8boCpLlg.png
+alt: Lighthouse
+---
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Web Dev</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<!--[if !mso]><!-->
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+               <style>
+.nolineheight{
+line-height:19px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+
+               </style>
+               <![endif]-->
+<!--[if ie]>
+               <style>
+                  .sup {
+                  vertical-align: 6px !important;
+                  font-size: 80% !important;
+                  }
+                  .show_mob
+                  {
+                    mso-hide: all !important;
+                  }
+
+               </style>
+               <![endif]-->
+<style>
+body {
+    font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    color: #000000;
+    -webkit-text-size-adjust: none !important;
+    -webkit-font-smoothing: antialiased !important;
+    -ms-text-size-adjust: none !important;
+}
+table, tr, td {
+    mso-table-lspace: 0pt;
+    mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+    color: #4285f4;
+    text-decoration: none;
+}
+.appleLinks a {
+    color: #000000 !important;
+    text-decoration: none !important;
+}
+strong {
+    font-weight: bold !important;
+}
+em {
+    font-style: italic !important;
+}
+.yshortcuts a span {
+    color: inherit !important;
+    border-bottom: none !important;
+}
+html {
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+    width: 100%;
+}
+.ExternalClass {
+    width: 100%;
+}
+.ExternalClass * {
+    line-height: 100%
+}
+td {
+    -webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+    color: inherit;
+    text-decoration: none;
+}
+.mob-hide {
+    display: none !important;
+}
+div, p, a, li, td {
+    -webkit-text-size-adjust: none;
+}
+td {
+    text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+    color: inherit !important;
+    text-decoration: none !important;
+    font-size: inherit !important;
+    font-family: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+}
+
+@media all and (max-width: 850px) {
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+    width: 320px !important;
+    max-width: 320px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+    width: 280px !important;
+    max-width: 280px !important;
+}
+.logo115 {
+    width: 115px !important;
+}
+.logopadd {
+    padding-top: 19px !important;
+    padding-bottom: 19px !important;
+}
+.logoright {
+    padding-top: 24px !important;
+}
+.hide {
+    display: none !important;
+}
+.block {
+    display: block !important;
+}
+.text {
+    text-align: center !important;
+}
+.wid200 {
+    width: 200px !important;
+}
+.mrg {
+    margin: 0 auto !important;
+}
+.padR {
+    padding-right: 0px !important;
+}
+.fl {
+    float: left !important;
+}
+.padtop20 {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+}
+.padtop13 {
+    padding-top: 13px !important;
+    padding-bottom: 21px !important;
+}
+.padtop8 {
+    padding-top: 8px !important;
+}
+  .font32{
+    font-size: 32px !important;
+    line-height: 46px !important;
+  }
+  .font32_36{
+    font-size: 32px !important;
+    line-height: 36px !important;
+  }
+  .pad27{
+    padding-top: 29px !important;
+  }
+  .padtopB20 {
+    padding-top: 20px !important;
+    padding-bottom: 29px !important;
+}
+  .padtop24 {
+    padding-top: 24px !important;
+    }
+  .padtop20_t {
+    padding-top: 20px !important;
+  }
+  .padtopB28 {
+    padding-top: 28px !important;
+    padding-bottom: 20px !important;
+}
+  .pad23B{
+    padding-bottom: 23px !important;
+  }
+  .padtop8{
+    padding-top: 8px !important;
+  }
+  .padwhitebox{
+    padding: 27px 15px 21px 15px !important;
+  }
+  .heig{
+    height: auto !important;
+  }
+  .sign{
+  padding-top: 36px !important;
+    padding-bottom: 33px !important;
+  }
+  .width174{
+    width: 174px !important;
+  }
+  .pad0{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  .line18{
+    line-height: 18px !important;
+  }
+  .padtop14{
+    padding-top: 14px !important;
+  }
+  .width108{
+    width: 108px !important;
+  }
+  .padtop39{
+    padding-top: 39px !important;
+  }
+  .padtop9{
+    padding-top: 9px !important
+  }
+  .imgcenter{
+	  margin: 0 auto !important;
+	  text-align: center !important;
+  }
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px;">
+  <!-- goto action start here -->
+  <div itemscope itemtype="http://schema.org/EmailMessage">
+           <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
+           <!-- link here     -->
+  <link itemprop="url" href="https://web.dev/use-lighthouse-for-performance-budgets/?utm_medium=email&utm_campaign=web.dev_news">
+  <!-- content here      -->
+  <meta itemprop="name" content="Launch Lighthouse">
+           </div>
+           <!-- content here -->
+           <meta itemprop="description" content="Launch Lighthouse">
+        </div>
+  <!-- goto action end here -->
+<!--Preview starts here-->
+<p style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;" align="center">Tips to improve your performance</p>
+<!--Preview ends here-->
+<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
+  <tr>
+    <td align="center" valign="top"><!--[if !mso]><!-->
+
+      <table border="0" cellspacing="0" cellpadding="0" width="850" class="table-main-gmail" align="center">
+        <!--<![endif]-->
+        <!--[if (gte mso 9)|(IE)]>
+                   <table border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+                      <![endif]-->
+        <tr>
+          <td align="center" valign="top" bgcolor="#ffffff"><table border="0" cellspacing="0" cellpadding="0" width="100%">
+              <!--Logo section starts here-->
+              <tr>
+                <td align="center" class="logobor" valign="top" style="border-bottom: 1px solid #9AA0A6;" width="100%;"><table border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2">
+                    <tr>
+                      <td class="" align="left" valign="top" ><table border="0" cellspacing="0" cellpadding="0">
+                          <tr>
+                            <td align="left" valign="top" class="logo115 logopadd" width="150" height="auto" style="padding-top: 22px; padding-bottom: 23px;"><a href="#" style="cursor: default;pointer-events: none"> <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="150" height="auto" class="logo115" alt="web.dev" title="web.dev"></a></td>
+                          </tr>
+                        </table></td>
+                      <td align="right" valign="top"><table border="0" cellpadding="0" cellspacing="0" align="right" style="vertical-align:top;">
+                          <tr>
+                            <td align="right" class="logoright" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:15px; mso-line-height-rule: exactly; padding:29px 0px 21px 0px;">November 2019</td>
+                          </tr>
+                        </table></td>
+                    </tr>
+                  </table></td>
+              </tr>
+              <!--Logo section ends here-->
+
+              <!--Hero section starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <!--Hero section Dekstop View Start-->
+                        <td align="left" valign="top" style="padding-top: 23px; padding-bottom: 22px;" class="hide"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="left" valign="middle" width="300"><table border="0" cellspacing="0" cellpadding="0" style="vertical-align: middle;">
+                                    <tbody>
+                                      <tr>
+                                        <td class="pad0" align="left" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 40px;">The latest news, techniques, and stories for web developers.</td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td align="right" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
+                                    <tbody>
+                                      <tr>
+                                        <td align="right" valign="top"><a href="#" style="display: block; width: 300px;"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-desktop.png" width="300" alt="Web developers" title="Web developers" /></a></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                        <!--Hero section Dekstop View Ends-->
+
+                        <!--Hero section Mobile View Start-->
+                        <!--[if !mso]><!-->
+                        <td align="center" valign="top" style="display: none; padding-top: 29px; padding-bottom: 30px;" class="block"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" valign="top"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-mobile.png" width="280" alt="Hero" title="Hero" /></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                              <tr>
+                                <td align="center" valign="top" width="300"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-top: 22px;">The latest news, techniques, and stories for web developers.</td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                        <!--<![endif]-->
+                        <!--Hero section Mobile View Ends-->
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Hero section ends here-->
+
+              <!--Tips section starts here-->
+              <tr>
+                <td align="center" valign="top" bgcolor="#E6F4FA"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td align="left" valign="top" style="padding-top: 23px; padding-bottom: 25px;" class="padtop13"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <!--Tips image for Mobile Starts-->
+                              <tr>
+                                <td align="center" valign="top" style="display: none;" class="block"><img src="https://services.google.com/fh/files/emails/webdev-lightbulb-icon-mobile.png" width="32" alt="Tips" title="Tips" /></td>
+                              </tr>
+                              <!--Tips image for Mobile Ends-->
+                              <tr>
+                                <td align="left" valign="middle" width="60" class="hide"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: middle;">
+                                    <tbody>
+                                      <!--Tips image for Desktop Starts-->
+                                      <tr>
+                                        <td align="left" valign="top"><img src="https://services.google.com/fh/files/emails/webdev-lightbulb-icon-desktop.png" width="48" alt="Tips" title="Tips" /></td>
+                                      </tr>
+                                      <!--Tips image for Desktop Ends-->
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" class="text"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padtop8" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 18px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;">Tip of the month</td>
+                                      </tr>
+                                      <tr>
+                                        <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 5px;"><a href="https://web.dev/native-lazy-loading/?utm_medium=email&utm_campaign=web.dev_news" style=" text-decoration: underline; color: #202124;">Use native lazy loading</a> to improve your performance (and reduce your users' cellular bills) by instructing the browser to only load below-the-fold images once your users scroll the page. Available in Chrome 76.</td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Tips section ends here-->
+
+              <!--Featured posts section starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Featured posts</td>
+                      </tr>
+                      <!--Left side image and Right side Text section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/use-lighthouse-for-performance-budgets/?utm_medium=email&utm_campaign=web.dev_news" target="_blank" style="display: block; width: 160px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/lighthouse-logo_512px.png" width="160" alt="Lighthouse" title="Lighthouse" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">GUIDE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Use Lighthouse for performance budgets</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">After you put in the hard work of optimizing your load performance, how do you guarantee that your performance doesn't regress over time? Performance budgets, that's how.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/use-lighthouse-for-performance-budgets/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/use-lighthouse-for-performance-budgets/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side image and Right side Text section ends here-->
+
+                      <!--Left side text and Right side image section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text" style="padding-top: 2px;"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/value-of-speed/?utm_medium=email&utm_campaign=web.dev_news" target="_blank" style="display: block; width: 160px;" class="imgcenter"><img src="https://www.gstatic.com/images/branding/product/2x/pagespeed_512dp.png" width="140" alt="Page speed" title="Page speed" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"  style="padding-right: 20px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;" dir="ltr">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Value of speed </td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Improving your site's load performance makes your company more money. Here's how you prove it to managers and executives.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/value-of-speed/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/value-of-speed/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side text and Right side image section ends here-->
+
+                       <!--Left side image and Right side Text section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/identify-slow-third-party-javascript/?utm_medium=email&utm_campaign=web.dev_news" target="_blank" style="display: block; width: 130px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/js_web.png" width="130" alt="JavaScript" title="JavaScript" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">GUIDE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Identify slow third-party JavaScript</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Do you have a sneaking suspicion that all of those social media widgets and analytics scripts are slowing down your page load? Here's how you find out.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/identify-slow-third-party-javascript/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/identify-slow-third-party-javascript/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side image and Right side Text section ends here-->
+
+
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Featured posts section ends here-->
+
+              <!--New updates and launches section three starts here-->
+              <tr>
+                <td class="padtopB28" align="center" valign="top" bgcolor="#EBF9FF" style="padding-top: 38px; padding-bottom: 50px;"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td class="font32_36 pad23B" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 20px; padding-left: 25px; padding-right: 25px;">New updates and launches</td>
+                      </tr>
+                      <tr>
+                        <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td valign="top" width="190" bgcolor="#ffffff" class="table-main-gmail_2 fl"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" align="center" valign="top" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">Chrome Developer Summit</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8" align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; padding-top: 5px;">Join the Chrome Developer Summit livestream on Nov 11-12th, 2019 to get access to all sessions and exclusive content.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" class="padtop9" style="padding-top: 77px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://developer.chrome.com/devsummit/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">More</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://developer.chrome.com/devsummit/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" width="220" align="center" class="table-main-gmail_2 fl padtop20"><table width="190" border="0" cellspacing="0" cellpadding="0" align="center" class="table-main-gmail_2">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" valign="top" bgcolor="#ffffff" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">Preloading responsive images</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8" align="center"  valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; padding-top: 5px;">You've probably heard about responsive images, and you've maybe heard about link rel="preload". But did you know that starting in Chrome 73 you can combine them to make your image loading even faster?</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" style="padding-top: 17px;" class="padtop9"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://web.dev/preload-responsive-images/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">More</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://web.dev/preload-responsive-images/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" width="190" bgcolor="#ffffff" class="table-main-gmail_2 fl"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" align="center" valign="top" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">Prefetch resources to speed up future navigations</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8 heig" align="center" class="padtop9" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; height: 80px; padding-top: 5px;" height="80">If a user lands on your homepage, and you know it's very likely that they'll visit your login page next, you can use link rel="prefetch" to load your login page's resources ahead of time.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" class="padtop9" style="padding-top: 9px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://web.dev/link-prefetch/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank">More</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://web.dev/link-prefetch/?utm_medium=email&utm_campaign=web.dev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--New updates and launches section three ends here-->
+
+        <!--spacer starts here-->
+        <tr>
+          <td height="20"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" height="20" width="1" border="0" alt="" style="display: block;"></td>
+        </tr>
+        <!--spacer ends here-->
+
+
+
+              <!-- Signature Starts here-->
+              <tr>
+                <td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+          <table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <!-- Sign off content Start -->
+                    <tr>
+                      <td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly;">
+            See you online,
+            </td>
+                    </tr>
+                    <!-- Sign off content End -->
+                    <!-- Signature content Start -->
+                    <tr>
+                      <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; font-weight: 500;">The <a href="#" style="text-decoration: none; cursor: default; pointer-events: none; color: #202124;">web.dev</a> team</td>
+                    </tr>
+                    <!-- Signature content End -->
+                  </table></td>
+              </tr>
+              <!-- Signature Ends here-->
+
+              <!-- Stars and Social icon Starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tr>
+                      <td align="left" valign="top" style="padding-bottom: 31px;"><table border="0" cellspacing="0" cellpadding="0">
+                          <!-- Social icon heading Start -->
+                          <tr>
+                            <td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124;  mso-line-height-rule: exactly;" >Connect&nbsp;with&nbsp;us</td>
+                          </tr>
+                          <!-- Social icon heading Ends -->
+                          <tr>
+                            <td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                  <td align="left"><table border="0" cellspacing="0" cellpadding="0" align="left">
+                                      <tr>
+                                        <!-- Social icon Start -->
+                                        <td width="28px" align="center" ><a href="${track('https://twitter.com/@ChromiumDev', 'footer_image_twitter')}" target="_blank" style="text-decoration:none">
+                      <img src="https://services.google.com/fh/files/emails/webdev-twitter-icon.png" width="28" alt="Twitter" title="Twitter" style="display:block;" /></a>
+                    </td>
+                                        <td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;" /></td>
+
+                                        <td width="29px" align="center"><a href="${track('https://www.youtube.com/user/ChromeDevelopers', 'footer_image_youtube')}" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-youtube-icon.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+
+                                        <td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;" /></td>
+
+                                        <td width="28px" align="center"><a href="${track('https://github.com/googlechrome', 'footer_image_github')}" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-github-icon.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+
+                                       </tr>
+                                      <!-- Social icon Ends -->
+                                    </table></td>
+                                </tr>
+                              </table></td>
+                          </tr>
+                        </table></td>
+                      <td align="right" valign="top"><table width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+                          <!-- Stars icon heading Start -->
+                          <tr>
+                            <td class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Did you find this <span class="block"></span>email useful?</td>
+                          </tr>
+                          <!-- Stars icon heading End -->
+                          <tr>
+                            <td align="right" valign="top" style="padding-top: 9px;"><table border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                  <!-- Stars icon Start -->
+                                  <td align="right" valign="top"><a href="${track('${landing_page()}','footer_star1')}" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star1" alt="Star1" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="${track('${landing_page()}','footer_star2')}" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star2" alt="Star2" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="${track('${landing_page()}','footer_star3')}" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star3" alt="Star3" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="${track('${landing_page()}','footer_star4')}" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star4" alt="Star4" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="${track('${landing_page()}','footer_star5')}" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star5" alt="Star5" /></a></td>
+                                </tr>
+                                <!-- Stars icon End -->
+                              </table></td>
+                          </tr>
+                        </table></td>
+                    </tr>
+                  </table></td>
+              </tr>
+              <!-- Stars and Social icon ends here-->
+
+
+
+<!--Footer section Starts here-->
+<tr>
+  <td class="padtop39" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+  <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+  <tbody><tr>
+  <td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+  <tbody><tr>
+  <td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+  <td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+  </tr>
+  </tbody></table></td>
+  </tr>
+  <!-- Footer Logo Starts -->
+  <tr>
+  <td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+  <a href="https://web.dev/" target="_blank" style="text-decoration: none;">
+  <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+  </a>
+  </td>
+  </tr>
+  <!-- Footer Logo ends -->
+  <!-- Address Starts -->
+  <tr>
+  <td class="pad0" align="center" valign="top" style="color:#757575; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2020 <a href="#" style="text-decoration: none; color: #757575;">Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA</a></td>
+  </tr>
+  <!-- Address Ends -->
+  <!-- Pref Starts -->
+  <!-- Pref Ends -->
+  </tbody></table>
+  </td>
+  </tr>
+  <!--Footer section ends here-->
+            </table></td>
+        </tr>
+      </table></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2020/02/index.njk b/src/site/content/en/newsletter/archive/2020/02/index.njk
new file mode 100644
index 00000000000..7fea853790b
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2020/02/index.njk
@@ -0,0 +1,787 @@
+---
+title: Web Frameworks, Content Management Systems, and More
+subhead: Read our February 2020 Newsletter for the latest news, updates, and stories for developers!
+date: 2020-02-27
+thumbnail: image/admin/WF2miuqdUD0b9E4MZQY2.png
+alt: AirSHIFT
+---
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Web Dev</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<!--[if !mso]><!-->
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+               <style>
+                .out-pad-t-20 {
+                  padding-top: 20px !important;
+                }
+.nolineheight{
+line-height:19px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+
+               </style>
+               <![endif]-->
+<!--[if ie]>
+               <style>
+                  .sup {
+                  vertical-align: 6px !important;
+                  font-size: 80% !important;
+                  }
+                  .show_mob
+                  {
+                    mso-hide: all !important;
+                  }
+
+               </style>
+               <![endif]-->
+<style>
+body {
+    font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    color: #000000;
+    -webkit-text-size-adjust: none !important;
+    -webkit-font-smoothing: antialiased !important;
+    -ms-text-size-adjust: none !important;
+}
+table, tr, td {
+    mso-table-lspace: 0pt;
+    mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+    color: #4285f4;
+    text-decoration: none;
+}
+.appleLinks a {
+    color: #000000 !important;
+    text-decoration: none !important;
+}
+strong {
+    font-weight: bold !important;
+}
+em {
+    font-style: italic !important;
+}
+.yshortcuts a span {
+    color: inherit !important;
+    border-bottom: none !important;
+}
+html {
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+    width: 100%;
+}
+.ExternalClass {
+    width: 100%;
+}
+.ExternalClass * {
+    line-height: 100%
+}
+td {
+    -webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+    color: inherit;
+    text-decoration: none;
+}
+.mob-hide {
+    display: none !important;
+}
+div, p, a, li, td {
+    -webkit-text-size-adjust: none;
+}
+td {
+    text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+    color: inherit !important;
+    text-decoration: none !important;
+    font-size: inherit !important;
+    font-family: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+}
+
+@media all and (max-width: 850px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+    width: 320px !important;
+    max-width: 320px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+    width: 280px !important;
+    max-width: 280px !important;
+}
+.logo115 {
+    width: 115px !important;
+}
+.logopadd {
+    padding-top: 19px !important;
+    padding-bottom: 19px !important;
+}
+.logoright {
+    padding-top: 24px !important;
+}
+.hide {
+    display: none !important;
+}
+.block {
+    display: block !important;
+}
+.text {
+    text-align: center !important;
+}
+.wid200 {
+    width: 200px !important;
+}
+.mrg {
+    margin: 0 auto !important;
+}
+.padR {
+    padding-right: 0px !important;
+}
+.fl {
+    float: left !important;
+}
+.padtop20 {
+    padding-right: 0px !important;
+    padding-bottom: 20px !important;
+    padding-top: 20px !important;
+}
+.padtop13 {
+    padding-top: 13px !important;
+    padding-bottom: 21px !important;
+}
+.padtop8 {
+    padding-top: 8px !important;
+}
+  .font32{
+    font-size: 32px !important;
+    line-height: 46px !important;
+  }
+  .font32_36{
+    font-size: 32px !important;
+    line-height: 36px !important;
+  }
+  .pad27{
+    padding-top: 29px !important;
+  }
+  .padtopB20 {
+    padding-top: 20px !important;
+    padding-bottom: 29px !important;
+}
+  .padtop24 {
+    padding-top: 24px !important;
+    }
+  .padtop20_t {
+    padding-top: 20px !important;
+  }
+  .padtopB28 {
+    padding-top: 28px !important;
+    padding-bottom: 20px !important;
+}
+  .pad23B{
+    padding-bottom: 23px !important;
+  }
+  .padtop8{
+    padding-top: 8px !important;
+  }
+  .padwhitebox{
+    padding: 27px 15px 21px 15px !important;
+  }
+  .heig{
+    height: auto !important;
+  }
+  .centertext{text-align: center !important;}
+  .sign{
+  padding-top: 36px !important;
+    padding-bottom: 33px !important;
+  }
+  .width174{
+    width: 174px !important;
+  }
+  .pad0{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  .line18{
+    line-height: 18px !important;
+  }
+  .padtop14{
+    padding-top: 14px !important;
+  }
+  .width108{
+    width: 108px !important;
+  }
+  .padtop39{
+    padding-top: 39px !important;
+  }
+  .padtop9{
+    padding-top: 9px !important;
+  }
+  .imgcenter{
+    margin: 0 auto !important;
+    text-align: center !important;
+  }
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px;">
+  <!-- goto action start here -->
+  <div itemscope itemtype="http://schema.org/EmailMessage">
+           <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
+           <!-- link here     -->
+  <link itemprop="url" href="https://web.dev/">
+  <!-- content here      -->
+  <meta itemprop="name" content="Open web.dev">
+           </div>
+           <!-- content here -->
+           <meta itemprop="description" content="Open web.dev">
+        </div>
+  <!-- goto action end here -->
+<!--Preview starts here-->
+<p style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;" align="center">Updates and guides for web frameworks, CMSs, and more</p>
+<!--Preview ends here-->
+<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
+  <tr>
+    <td align="center" valign="top"><!--[if !mso]><!-->
+
+      <table border="0" cellspacing="0" cellpadding="0" width="850" class="table-main-gmail" align="center">
+        <!--<![endif]-->
+        <!--[if (gte mso 9)|(IE)]>
+                   <table border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+                      <![endif]-->
+        <tr>
+          <td align="center" valign="top" bgcolor="#ffffff"><table border="0" cellspacing="0" cellpadding="0" width="100%">
+              <!--Logo section starts here-->
+              <tr>
+                <td align="center" class="logobor" valign="top" style="border-bottom: 1px solid #9AA0A6;" width="100%;"><table border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2">
+                    <tr>
+                      <td class="" align="left" valign="top" ><table border="0" cellspacing="0" cellpadding="0">
+                          <tr>
+                            <td align="left" valign="top" class="logo115 logopadd" width="150" height="auto" style="padding-top: 22px; padding-bottom: 23px;"><a href="https://web.dev/" target="_blank" style="text-decoration: none;"> <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="150" height="auto" class="logo115" alt="web.dev" title="web.dev"></a></td>
+                          </tr>
+                        </table></td>
+                      <td align="right" valign="top"><table border="0" cellpadding="0" cellspacing="0" align="right" style="vertical-align:top;">
+                          <tr>
+                            <td align="right" class="logoright" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:15px; mso-line-height-rule: exactly; padding:29px 0px 21px 0px;">February 2020</td>
+                          </tr>
+                        </table></td>
+                    </tr>
+                  </table></td>
+              </tr>
+              <!--Logo section ends here-->
+
+              <!--Hero section starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <!--Hero section Dekstop View Start-->
+                        <td align="left" valign="top" style="padding-top: 23px; padding-bottom: 22px;" class="hide"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="left" valign="middle" width="300"><table border="0" cellspacing="0" cellpadding="0" style="vertical-align: middle;">
+                                    <tbody>
+                                      <tr>
+                                        <td class="pad0" align="left" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 40px;">The latest news, techniques, and stories for web developers.</td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td align="right" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
+                                    <tbody>
+                                      <tr>
+                                        <td align="right" valign="top"><a href="https://web.dev/measure/?utm_medium=email&utm_campaign=web.dev_news" style="display: block; width: 300px; text-decoration: none;" target="_blank"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-desktop.png" width="300" alt="Web developers" title="Web developers" /></a></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                        <!--Hero section Dekstop View Ends-->
+
+                        <!--Hero section Mobile View Start-->
+                        <!--[if !mso]><!-->
+                        <td align="center" valign="top" style="display: none; padding-top: 29px; padding-bottom: 30px;" class="block"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" valign="top">
+                                          <a href="https://web.dev/measure/?utm_medium=email&utm_campaign=web.dev_news" style="text-decoration: none;" target="_blank">
+                                            <img src="https://services.google.com/fh/files/emails/wevdev-hero-img-mobile.png" width="280" alt="Web developers" title="Web developers" />
+                                          </a>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                              <tr>
+                                <td align="center" valign="top" width="300"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-top: 22px;">The latest news, techniques, and stories for web developers.</td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                        <!--<![endif]-->
+                        <!--Hero section Mobile View Ends-->
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Hero section ends here-->
+
+              <!--Tips section starts here-->
+              <tr>
+                <td align="center" valign="top" bgcolor="#E6F4FA"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td align="left" valign="top" style="padding-top: 23px; padding-bottom: 25px;" class="padtop13"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <!--Tips image for Mobile Starts-->
+                              <tr>
+                                <td align="center" valign="top" style="display: none;" class="block"><img src="https://services.google.com/fh/files/emails/webdev-lightbulb-icon-mobile.png" width="32" alt="Tips" title="Tips" /></td>
+                              </tr>
+                              <!--Tips image for Mobile Ends-->
+                              <tr>
+                                <td align="left" valign="middle" width="60" class="hide"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: middle;">
+                                    <tbody>
+                                      <!--Tips image for Desktop Starts-->
+                                      <tr>
+                                        <td align="left" valign="top" class="out-pad-t-20"><img src="https://services.google.com/fh/files/emails/webdev-lightbulb-icon-desktop.png" width="48" alt="Tips" title="Tips" /></td>
+                                      </tr>
+                                      <!--Tips image for Desktop Ends-->
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" class="text"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padtop8" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 18px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;">Tip of the month</td>
+                                      </tr>
+                                      <tr>
+                                        <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 5px;">Developing sites on WordPress? Check out <a href="https://sitekit.withgoogle.com/?utm_medium=email&utm_campaign=web.dev_news" style=" text-decoration: underline; color: #202124;">Site Kit</a>, Google's official WordPress plugin to deploy, manage, and get insights from Google tools to make your site successful.</td>
+                                      </tr>
+
+                                      </td></tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Tips section ends here-->
+
+              <!--Featured posts section starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Featured posts</td>
+                      </tr>
+                      <!--Left side image and Right side Text section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/five-ways-airshift-improved-their-react-app/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 200px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/web_dev_feb_image_one_new.png" width="200" alt="AirSHIFT" title="AirSHIFT" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Five ways AirSHIFT improved their React app's performance</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">A real-world case study of React SPA performance optimization.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/five-ways-airshift-improved-their-react-app/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/five-ways-airshift-improved-their-react-app/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side image and Right side Text section ends here-->
+
+                      <!--Left side text and Right side image section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text" style="padding-top: 2px;"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/react/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 180px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/web_dev_feb_image_two.jpg" width="150" alt="Optimize your React-based web app" title="Optimize your React-based web app" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"  style="padding-right: 20px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;" dir="ltr">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">GUIDE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Optimize your React-based web app</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Learn how you can build performant and progressive React applications.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/react/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/react/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side text and Right side image section ends here-->
+
+                       <!--Left side image and Right side Text section starts here-->
+                      <tr>
+                        <td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td valign="top" class="text"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 225px;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top"><a href="https://web.dev/advancing-framework-ecosystem-cds-2019/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 180px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/web_dev_feb_image_three.png" width="150" alt="Google & frameworks" title="Google & frameworks" style="display: block;" class="imgcenter" /></a></td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+
+                                          <!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+
+                                          <table class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 370px; vertical-align: top;">
+                                            <tbody>
+                                              <tr>
+                                                <td valign="top" class="text padtop24"><table  border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table></td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Google & frameworks</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Learn about Chrome’s work on advancing open-source frameworks.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/advancing-framework-ecosystem-cds-2019/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/advancing-framework-ecosystem-cds-2019/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                      <!--Left side image and Right side Text section ends here-->
+
+
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--Featured posts section ends here-->
+
+                 <!--New updates and launches section three starts here-->
+              <tr>
+                <td class="padtopB28" align="center" valign="top" bgcolor="#EBF9FF" style="padding-top: 38px; padding-bottom: 50px;"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tbody>
+                      <tr>
+                        <td class="font32_36 pad23B" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 20px; padding-left: 25px; padding-right: 25px;">New updates and launches</td>
+                      </tr>
+                      <tr>
+                        <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tbody>
+                              <tr>
+                                <td valign="top" width="190" bgcolor="#ffffff" class="table-main-gmail_2 fl"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" align="center" valign="top" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;"> Better content navigation on <a href="#" style="pointer-events: none; cursor: default; color: #202124;text-decoration: none">web.dev/blog</a></td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8" align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; padding-top: 5px;">We launched tag support on <a href="#" style="pointer-events: none; cursor: default; color: #202124;text-decoration: none">web.dev</a> so you can see all related articles in one view.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" class="padtop9" style="padding-top: 20px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://web.dev/tags/capabilities/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Check it out</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://web.dev/tags/capabilities/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" width="220" align="center" class="table-main-gmail_2 fl padtop20"><table width="190" border="0" cellspacing="0" cellpadding="0" align="center" class="table-main-gmail_2">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" valign="top" bgcolor="#ffffff" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">For Angular developers</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8" align="center"  valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; padding-top: 33px;">Your guide for optimizing Angular apps.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" style="padding-top: 59px;" class="padtop9"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://web.dev/angular/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Get tips and tricks</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://web.dev/angular/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                                <td valign="top" width="190" bgcolor="#ffffff" class="table-main-gmail_2 fl"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                    <tbody>
+                                      <tr>
+                                        <td class="padwhitebox" align="center" valign="top" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                            <tbody>
+                                              <tr>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">Lighthouse Stackpacks</td>
+                                              </tr>
+                                              <tr>
+                                                <td class="padtop8 heig" align="center" class="padtop9" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; height: 80px; padding-top: 33px;" height="80">Tailored guidance on Lighthouse for Angular, WordPress, Magento, React, and AMP.</td>
+                                              </tr>
+                                              <tr>
+                                                <td valign="top" align="center" class="padtop9" style="padding-top: 19px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
+                                                    <tr>
+                                                      <td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:19px;"><a href="https://web.dev/lighthouse-evolution-cds-2019/#lighthouse-stack-packs?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">See updates</a></td>
+                                                      <td align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight_2"><a href="https://web.dev/lighthouse-evolution-cds-2019/#lighthouse-stack-packs?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="13" alt="Arrow" title="Arrow" style="display:block; border:0;" /></a></td>
+                                                    </tr>
+                                                  </table></td>
+                                              </tr>
+                                            </tbody>
+                                          </table></td>
+                                      </tr>
+                                    </tbody>
+                                  </table></td>
+                              </tr>
+                            </tbody>
+                          </table></td>
+                      </tr>
+                    </tbody>
+                  </table></td>
+              </tr>
+              <!--New updates and launches section three ends here-->
+
+        <!--spacer starts here-->
+        <tr>
+          <td height="20"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" height="20" width="1" border="0" alt="" style="display: block;"></td>
+        </tr>
+        <!--spacer ends here-->
+
+
+
+              <!-- Signature Starts here-->
+              <tr>
+                <td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+          <table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <!-- Sign off content Start -->
+                    <tr>
+                      <td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly;">
+            See you online,
+            </td>
+                    </tr>
+                    <!-- Sign off content End -->
+                    <!-- Signature content Start -->
+                    <tr>
+                      <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; font-weight: 500;">The <a href="#" style="text-decoration: none; cursor: default; pointer-events: none; color: #202124;">web.dev</a> team</td>
+                    </tr>
+                    <!-- Signature content End -->
+                  </table></td>
+              </tr>
+              <!-- Signature Ends here-->
+
+              <!-- Stars and Social icon Starts here-->
+              <tr>
+                <td align="center" valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+                    <tr>
+                      <td align="left" valign="top" style="padding-bottom: 31px;"><table border="0" cellspacing="0" cellpadding="0">
+                          <!-- Social icon heading Start -->
+                          <tr>
+                            <td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124;  mso-line-height-rule: exactly;" >Connect&nbsp;with&nbsp;us</td>
+                          </tr>
+                          <!-- Social icon heading Ends -->
+                          <tr>
+                            <td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                  <td align="left"><table border="0" cellspacing="0" cellpadding="0" align="left">
+                                      <tr>
+                                        <!-- Social icon Start -->
+                                        <td width="28px" align="center" ><a href="https://twitter.com/@ChromiumDev" target="_blank" style="text-decoration:none">
+                      <img src="https://services.google.com/fh/files/emails/webdev-twitter-icon.png" width="28" alt="Twitter" title="Twitter" style="display:block;" /></a>
+                    </td>
+                                        <td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;" /></td>
+
+                                        <td width="29px" align="center"><a href="https://www.youtube.com/user/ChromeDevelopers" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-youtube-icon.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+
+                                        <td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;" /></td>
+
+                                        <td width="28px" align="center"><a href="https://github.com/googlechrome" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-github-icon.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+
+                                       </tr>
+                                      <!-- Social icon Ends -->
+                                    </table></td>
+                                </tr>
+                              </table></td>
+                          </tr>
+                        </table></td>
+                      <td align="right" valign="top"><table width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+                          <!-- Stars icon heading Start -->
+                          <tr>
+                            <td class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Did you find this <span class="block"></span>newsletter useful?</td>
+                          </tr>
+                          <!-- Stars icon heading End -->
+                          <tr>
+                            <td align="right" valign="top" style="padding-top: 9px;"><table border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                  <!-- Stars icon Start -->
+                                  <td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star1" alt="Star1" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star2" alt="Star2" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star3" alt="Star3" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star4" alt="Star4" /></a></td>
+                                  <td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;" /></td>
+                                  <td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star5" alt="Star5" /></a></td>
+                                </tr>
+                                <!-- Stars icon End -->
+                              </table></td>
+                          </tr>
+                        </table></td>
+                    </tr>
+                  </table></td>
+              </tr>
+              <!-- Stars and Social icon ends here-->
+
+<!--Footer section Starts here-->
+<tr>
+  <td class="padtop39" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+  <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+  <tbody><tr>
+  <td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+  <tbody><tr>
+  <td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+  <td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+  </tr>
+  </tbody></table></td>
+  </tr>
+  <!-- Footer Logo Starts -->
+  <tr>
+  <td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+  <a href="https://web.dev/" target="_blank" style="text-decoration: none;">
+  <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+  </a>
+  </td>
+  </tr>
+  <!-- Footer Logo ends -->
+  <!-- Address Starts -->
+  <tr>
+  <td class="pad0" align="center" valign="top" style="color:#757575; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2020 <a href="#" style="text-decoration: none; color: #757575;">Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA</a></td>
+  </tr>
+  <!-- Address Ends -->
+  <!-- Pref Starts -->
+  <!-- Pref Ends -->
+  </tbody></table>
+  </td>
+  </tr>
+  <!--Footer section ends here-->
+            </table></td>
+        </tr>
+      </table></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2020/03/index.njk b/src/site/content/en/newsletter/archive/2020/03/index.njk
index bb3d5ece08f..4df1082b01a 100644
--- a/src/site/content/en/newsletter/archive/2020/03/index.njk
+++ b/src/site/content/en/newsletter/archive/2020/03/index.njk
@@ -1,11 +1,9 @@
 ---
-title: March 2020 Newsletter
+title: Supporting you to build a helpful web experience
 subhead: Read our March 2020 Newsletter for the latest news, updates, and stories for developers!
 date: 2020-03-30
-thumbnail: thumbnail.jpg
+thumbnail: image/admin/SHJ7go9Km7hiKLpDg2lE.jpg
 alt: A photo of NFC tags
-eleventyComputed:
-  canonicalUrl: "/newsletter/archive/2020/03/"
 ---
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -516,7 +514,7 @@ a[x-apple-data-detectors] {
                                         <td valign="top" class="text"><table class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
                                             <tbody>
                                               <tr>
-                                                <td valign="top"><a href="https://web.dev/workbox-share-targets/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/workbox.png" width="273" alt="Integrate PWAs into native sharing UIs with Workbox" title="Integrate PWAs into native sharing UIs with Workbox" style="display: block;" class="imgcenter" /></a></td>
+                                                <td valign="top"><a href="https://web.dev/workbox-share-targets/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/workbox.png" width="273" alt="Integrate PWAs into OS-level sharing UIs with Workbox" title="Integrate PWAs into OS-level sharing UIs with Workbox" style="display: block;" class="imgcenter" /></a></td>
                                               </tr>
                                             </tbody>
                                           </table>
@@ -535,10 +533,10 @@ a[x-apple-data-detectors] {
                                                   </table></td>
                                               </tr>
                                               <tr>
-                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Integrate PWAs into native sharing UIs with Workbox</td>
+                                                <td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Integrate PWAs into OS-level sharing UIs with Workbox</td>
                                               </tr>
                                               <tr>
-                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">How to get your PWA to show up next to native apps in system-level sharing UIs.</td>
+                                                <td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">How to get your PWA to show up next to platform-specific apps in system-level sharing UIs.</td>
                                               </tr>
                                               <tr>
                                                 <td valign="top" style="padding-top: 12px;"><table border="0" cellspacing="0" cellpadding="0" class="mrg">
@@ -606,7 +604,7 @@ a[x-apple-data-detectors] {
                                         <td class="padwhitebox" valign="top" bgcolor="#ffffff" style="padding: 27px 15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                             <tbody>
                                               <tr>
-                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">New “Web on Android” guidance</td>
+                                                <td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color:#202124; line-height:28px; mso-line-height-rule: exactly;">New "Web on Android" guidance</td>
                                               </tr>
                                               <tr>
                                                 <td class="padtop8" align="center"  valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:20px; mso-line-height-rule: exactly; padding-top: 72px;">A new space for you to learn more about bringing more web content into Android apps.</td>
diff --git a/src/site/content/en/newsletter/archive/2020/03/thumbnail.jpg b/src/site/content/en/newsletter/archive/2020/03/thumbnail.jpg
deleted file mode 100644
index 3831057a301..00000000000
Binary files a/src/site/content/en/newsletter/archive/2020/03/thumbnail.jpg and /dev/null differ
diff --git a/src/site/content/en/newsletter/archive/2020/06/index.njk b/src/site/content/en/newsletter/archive/2020/06/index.njk
new file mode 100644
index 00000000000..845a82e982b
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2020/06/index.njk
@@ -0,0 +1,708 @@
+---
+title: Web Vitals and web.dev LIVE updates
+subhead: Read our June 2020 Newsletter for the latest news, updates, and stories for developers!
+date: 2020-06-23
+thumbnail: image/admin/faAJ8dvFRxKDBQecYkdO.png
+alt: Defining the Core Web Vitals metrics thresholds
+---
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
+<title>Web Vitals and web.dev LIVE updates</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+</style>
+<![endif]-->
+<!--[if ie]>
+<style>
+.sup {
+vertical-align: 6px !important;
+font-size: 80% !important;
+}
+.show_mob
+{
+mso-hide: all !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass * {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 320px !important;
+max-width: 320px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 280px !important;
+max-width: 280px !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-right: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; bgcolor:#ffffff" bgcolor="#ffffff">
+<!-- goto action start here -->
+<div itemscope="" itemtype="http://schema.org/EmailMessage">
+<div itemprop="action" itemscope="" itemtype="http://schema.org/ViewAction">
+<!-- link here -->
+<link itemprop="url" href="https://web.dev/live">
+<!-- content here -->
+<meta itemprop="name" content="web.dev LIVE">
+</div>
+<!-- content here -->
+<meta itemprop="description" content="web.dev LIVE">
+</div>
+<!-- goto action end here -->
+<!--Preview starts here-->
+<p style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;" align="center">The latest news, techniques, and stories for web developers.</p>
+<!--Preview ends here-->
+<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
+<tbody><tr>
+<td align="center" valign="top"><!--[if !mso]><!-->
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="850" class="table-main-gmail" align="center">
+<!--<![endif]-->
+<!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tbody><tr>
+<td align="center" valign="top" bgcolor="#ffffff"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
+<tbody>
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" valign="top" style="border-bottom: 1px solid #9AA0A6;" width="100%;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2">
+<tbody><tr>
+<td class="" align="left" valign="top"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td aria-hidden="true" align="left" valign="top" class="logo115 logopadd" width="150" height="auto" style="padding-top: 22px; padding-bottom: 23px;"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyYJuHKOb7LV9iaCexRNdv1pH8oeK_wVjbsQpTJWaC2mBz39lUNvOZIPh3Uzau-5WkYOQ" target="_blank" style="text-decoration: none;"> <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="150" height="auto" class="logo115" alt="" title="web.dev"></a></td>
+</tr>
+</tbody></table></td>
+<td align="right" valign="top"><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" style="vertical-align:top;">
+<tbody><tr>
+<td align="right" class="logoright" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:15px; mso-line-height-rule: exactly; padding:29px 0px 21px 0px;">June 2020</td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody></table></td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<!--Hero section Dekstop View Start-->
+<td align="left" valign="top" style="padding-top: 23px; padding-bottom: 22px;" class="hide"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="left" valign="middle" width="300"><table role="presentation" border="0" cellspacing="0" cellpadding="0" style="vertical-align: middle;">
+<tbody>
+<tr>
+<td class="pad0" align="left" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 40px;">The latest news, techniques, and stories for web developers.</td>
+</tr>
+</tbody>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
+<tbody>
+<tr>
+<td aria-hidden="true" align="right" valign="top"><a href="#" style="display: block; width: 300px; text-decoration: none;" target="_blank"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-desktop.png" width="300" alt="" title="The latest news, techniques, and stories for web developers."></a></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+<!--Hero section Dekstop View Ends-->
+<!--Hero section Mobile View Start-->
+<!--[if !mso]><!-->
+<td align="center" valign="top" style="display: none; padding-top: 29px; padding-bottom: 30px;" class="block"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
+<tbody>
+<tr>
+<td aria-hidden="true" align="center" valign="top">
+<a href="#" style="text-decoration: none;" target="_blank">
+<img src="https://services.google.com/fh/files/emails/wevdev-hero-img-mobile.png" width="300" alt="" title="The latest news, techniques, and stories for web developers.">
+</a>
+</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td align="center" valign="top" width="300"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-top: 22px;">The latest news, techniques, and stories for web developers.</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+<!--<![endif]-->
+<!--Hero section Mobile View Ends-->
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Hero section ends here-->
+</tbody>
+</table></td>
+</tr>
+<!--Upcoming event section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Upcoming event</td>
+</tr>
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20 centertext" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td align="left" class="centertext" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="http://www.google.com/appserve/mkt/proof/p/AD-FnEy2OA2nVVxV10n7pCdSzD9sHrcwv2F11YtxT4EdkayzJ2oylcd5iLiVzcu5c6UcvWBWwvsnLHD2HYA3zqNMQv_oKx_P94EjZKXP8We_TZDCPNauicmSscLYlPdfKrx5Q2TtdfOzIXXaFFz3CzVHB9jJwA" target="_blank" style="color: #3740FF; text-decoration:none;">web.dev LIVE</a> is one week away!</td>
+</tr>
+</tbody></table></td>
+</tr>
+<tr>
+<td align="left" class="padR padtop20_t centertext" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Join our three-day digital event to celebrate our community's actions, learn modern web techniques, and connect with each other. Each day we’ll "travel" to different time zones to answer your questions real-time and bring unique content on topics such as <strong>Web Vitals, PWAs, and Google’s privacy updates.</strong></td>
+</tr>
+<tr>
+<td class="centertext" valign="top" align="left" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td class="centertext" align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: bold; line-height:22px;">Add to 📅 <a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEwX5_CuPp0w1j8RPzGIp0VzOe0QPMzuy-tKyzjH4xFsxndnr_YOhX2JyxIcLXtsHtiyWyMxduynsDlAy7TOFDQ2QHxi7IGbJ-tun-Imh_hC-rmokPMotVi9aQQT2OepDLG1YmZCJsCithM6yKrQNfz0AMcvaUZv2YWh1gmpHG68JLQXmY0CwCxL_Ddfn2UtdmVeIad2uQmqNdhOJBQ_rKqJ_7aivXzGM2ooRtd3DGWSugnyNo5X_uh_oAqyeXwf-W8jK9NT4AE9bN0QcurSfzbSgcBV1x47" target="_blank" style="color: #3740FF; text-decoration: none;">Google</a>, <a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEwY-jL-uSNJF8OZr5AtB66-uiw6d5f_tOV9Ta2PN-HeMnv9iSbNtlgl_-6d2zV-_ep2TKDn0_FT_zCE83uoBSANtS7lDiK7a56ybRdLUtQZP9vclPPRUfrq3Ag7xN4wgNSBiltNCH6Cy0S3Ti2Opmpvz-8qb8ofr6xGkEWwGz7qutIobXjSO9aCEdZxCThrPCq2XgT1wupBbctP8QyRcmFCv-Y5Nf2u4Q" target="_blank" style="color: #3740FF; text-decoration: none;">iCal</a>, <a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyqvsLh8905RftkP_A1I2XkSRzOI3O8ILWb4jrQhqdJdLjaW-6Gkl1T1qx5dycmW0TspCzKcwOqLMgf1PkHBQi6NkIyTbj3sHKFzwO3v2cDYUkrtGvPftiBHk2eaXcOMHZZA_pThSpAgKTUJmb2q47WqGjVfBgFVo1CC28HfRiqxGLJ37AGYPtjUO7enGQ0bQScJUDhOq9DcdPws3wswRitNRVwzTKZHlWaNw" target="_blank" style="color: #3740FF; text-decoration: none;">Outlook</a></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Upcoming event section ends here-->
+<!--Featured posts section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Web Vitals</td>
+</tr>
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/defining-core-web-vitals-thresholds/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/module1_june.png" width="273" alt="" title="Defining the Core Web Vitals metrics thresholds" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Defining the Core Web Vitals metrics thresholds</td>
+</tr>
+<tr>
+<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">The research and methodology behind Core Web Vitals thresholds.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td aria-hidden="true" align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/defining-core-web-vitals-thresholds/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/defining-core-web-vitals-thresholds/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side image and Right side Text section ends here-->
+<!--Left side text and Right side image section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
+<tbody>
+<tr>
+<td valign="top" class="text" style="padding-top: 2px;"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/vitals-tools/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/module2_june.png" width="273" alt="" title="Core Web Vitals" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-right: 20px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;" dir="ltr">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Tools to measure Core Web Vitals</td>
+</tr>
+<tr>
+<td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Your favorite developer tools can now measure the Core Web Vitals.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/vitals-tools/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/vitals-tools/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side text and Right side image section ends here-->
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px;border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/vitals-measurement-getting-started/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/module3_june.png" width="273" alt="" title="Getting started with measuring Web Vitals" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Getting started with measuring Web Vitals</td>
+</tr>
+<tr>
+<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Where to start when measuring Web Vitals.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/vitals-measurement-getting-started/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/vitals-measurement-getting-started/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side image and Right side Text section ends here-->
+<!--Left side text and Right side image section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
+<tbody>
+<tr>
+<td valign="top" class="text" style="padding-top: 2px;"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/vitals-field-measurement-best-practices/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/module1_june.png" width="273" alt="" title="Best practices for measuring Web Vitals in the field" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-right: 20px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;" dir="ltr">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Best practices for measuring Web Vitals in the field</td>
+</tr>
+<tr>
+<td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">How to measure Web Vitals with your current analytics tool.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody><tr>
+<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/vitals-field-measurement-best-practices/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/vitals-field-measurement-best-practices/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side text and Right side image section ends here-->
+</tbody>
+</table></td>
+</tr>
+<!--Featured posts section ends here-->
+<!-- Signature Starts here-->
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tbody><tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly;">
+Stay safe &amp; see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; font-weight: 500;"><a href="#" style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</tbody></table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody><tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tbody><tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect&nbsp;with&nbsp;us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tbody><tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://twitter.com/@ChromiumDev" target="_blank" style="text-decoration:none">
+<img src="https://services.google.com/fh/files/emails/webdev-twitter-icon.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://www.youtube.com/user/ChromeDevelopers" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-youtube-icon.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://github.com/googlechrome" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-github-icon.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</tbody></table></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody></table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tbody><tr>
+<td class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Did you find this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://forms.gle/bhVGajdaSLyP7d9y9" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</tbody></table></td>
+</tr>
+</tbody></table></td>
+</tr>
+</tbody></table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tbody><tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tbody><tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/newsletter/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="Arrow" style="display:block; border:0;"></a></td>
+</tr>
+</tbody></table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://web.dev/" target="_blank" style="text-decoration: none;">
+<img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" align="center" valign="top" style="color:#757575; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2020 <a href="#" style="text-decoration: none; color: #757575;">Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+<!-- Pref Starts -->
+<!-- Pref Ends -->
+</tbody></table>
+</td>
+</tr>
+<!--Footer section ends here-->
+</tbody></table></td>
+</tr>
+</tbody></table>
+
+
+<img height="1" width="3" src="https://www.google.com/appserve/mkt/proof/img/AD-FnEwhYFBbcZnvpEDeY4stTa_zYcVGn6YnOXo9odd7j0kkwA.gif">
+</body></html>
diff --git a/src/site/content/en/newsletter/archive/2020/07/index.njk b/src/site/content/en/newsletter/archive/2020/07/index.njk
new file mode 100644
index 00000000000..9cbb36b9906
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2020/07/index.njk
@@ -0,0 +1,662 @@
+---
+title: Native iframe lazy-loading, modern CSS layouts, and more
+subhead: Read our July 2020 Newsletter for the latest news, updates, and stories for developers!
+date: 2020-07-30
+thumbnail: image/admin/gYfaAJ0Qng572rEAiKjZ.jpg
+alt: Browser-level native lazy-loading for iframes is here
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "http: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>Web Vitals and web.dev LIVE updates</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+</style>
+<![endif]-->
+<!--[if ie]>
+<style>
+.sup {
+vertical-align: 6px !important;
+font-size: 80% !important;
+}
+.show_mob
+{
+mso-hide: all !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass * {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600 !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-right: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; bgcolor:#ffffff" bgcolor="#ffffff">
+<!-- goto action start here -->
+<div itemscope itemtype="http://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
+<!-- link here -->
+<link itemprop="url" href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyUDlw2SYLzDPDZ7gI5j72N7kj9E3-DBMurPP_0eLDIStwNNeFvljTHWxPE-vKUnIRo2ilEldB2xwOsZnpDlqeRFg">
+<!-- content here -->
+<meta itemprop="name" content="Open web.dev">
+</div>
+<!-- content here -->
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!-- goto action end here -->
+<!--Preview starts here-->
+<p style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;" align="center">web.dev LIVE videos and more updates</p>
+<!--Preview ends here-->
+<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
+<tr>
+<td align="center" valign="top"><!--[if !mso]><!-->
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width: 850px; width: 100%" class="table-main-gmail pad-l-r-20" align="center">
+<!--<![endif]-->
+<!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" valign="top" bgcolor="#ffffff"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" valign="top" style="border-bottom: 1px solid #9AA0A6;" width="100%;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2">
+<tr>
+<td class="" align="left" valign="top"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td aria-hidden="true" align="left" valign="top" class="logo115 logopadd" width="150" height="auto" style="padding-top: 22px; padding-bottom: 23px;"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyNFp8W8mMLPdiHWzdDTidPYksblM5kVlXUG6wJb8CB-m-i6iLycgc6YgrZoi0_2qO9Or8" target="_blank" style="text-decoration: none;"> <img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="150" height="auto" class="logo115" alt="" title="web.dev"></a></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" style="vertical-align:top;">
+<tr>
+<td align="right" class="logoright" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#202124; line-height:15px; mso-line-height-rule: exactly; padding:29px 0px 21px 0px;">July 2020</td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<!--Hero section Dekstop View Start-->
+<td align="left" valign="top" style="padding-top: 23px; padding-bottom: 22px;" class="hide"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="left" valign="middle" width="300"><table role="presentation" border="0" cellspacing="0" cellpadding="0" style="vertical-align: middle;">
+<tbody>
+<tr>
+<td class="pad0" align="left" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 40px;">The latest news, techniques, and stories for web developers.</td>
+</tr>
+</tbody>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
+<tbody>
+<tr>
+<td aria-hidden="true" align="right" valign="top"><a href="#" style="display: block; width: 300px; text-decoration: none;" target="_blank"><img src="https://services.google.com/fh/files/emails/wevdev-hero-img-desktop.png" width="300" alt="" title=""></a></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+<!--Hero section Dekstop View Ends-->
+<!--Hero section Mobile View Start-->
+<!--[if !mso]><!-->
+<td align="center" valign="top" style="display: none; padding-top: 29px; padding-bottom: 30px;" class="block"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
+<tbody>
+<tr>
+<td aria-hidden="true" align="center" valign="top">
+<a href="#" style="text-decoration: none;" target="_blank">
+<img src="https://services.google.com/fh/files/emails/wevdev-hero-img-mobile.png" width="300" alt="" title="" title="">
+</a>
+</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td align="center" valign="top" width="300"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-top: 22px;">The latest news, techniques, and stories for web developers.</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+<!--<![endif]-->
+<!--Hero section Mobile View Ends-->
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Hero section ends here-->
+</tbody>
+</table></td>
+</tr>
+<!--Upcoming event section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;"><a href="#" style="text-decoration: none; pointer-events: none; cursor: default; color: #202124;">web.dev</a> LIVE</td>
+</tr>
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20 centertext" align="center" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top" align="center"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tr>
+<td align="center" class="centertext" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;">All session videos, now available on demand</td>
+</tr>
+</table></td>
+</tr>
+<tr>
+<td align="center" class="padR padtop20_t centertext" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">During our three-day digital event earlier this month, over 33,000 developers joined us across the world to celebrate the community&#39;s actions in these difficult times, learn modern web techniques, and connect with each other. Each day brought unique content on topics such as <strong>Web Vitals, PWAs,</strong> and <strong>Google’s privacy updates</strong>.</td>
+</tr>
+<tr>
+<td valign="top" align="center" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tr>
+<td aria-hidden="true" align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="http://web.dev/live" style=" color:#202124; text-decoration:none;" target="_blank">Watch all videos</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="http://web.dev/live" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Upcoming event section ends here-->
+<!--Featured posts section starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tbody>
+<tr>
+<td class="font32 pad27" align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color:#202124; line-height:48px; mso-line-height-rule: exactly; padding-bottom: 6px; padding-top: 38px;">Launches and updates</td>
+</tr>
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/webdev_july_newsletter_image_1.jpg" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">LAUNCH</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Choose the best build tool for your project with tooling.report</td>
+</tr>
+<tr>
+<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Select and configure build tools based on best practices.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tr>
+<td aria-hidden="true" align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/introducing-tooling-report/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side image and Right side Text section ends here-->
+<!--Left side text and Right side image section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl">
+<tbody>
+<tr>
+<td valign="top" class="text" style="padding-top: 2px;"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/webdev_july_newsletter_image_2.png" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-right: 20px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;" dir="ltr">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">Ten modern layouts in one line of CSS</td>
+</tr>
+<tr>
+<td class="padR" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">A few powerful lines of CSS to help you build robust modern layouts.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tr>
+<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/one-line-layouts/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side text and Right side image section ends here-->
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td class="padtopB20" align="left" valign="top" style="padding-top: 30px; padding-bottom: 27px;border-bottom: 1px solid #DADCE0;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td align="center" valign="top"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tbody>
+<tr>
+<td valign="top" class="text"><table role="presentation" class="wid200" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 285px;">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" target="_blank" style="display: block; width: 273px;" class="imgcenter"><img src="https://services.google.com/fh/files/emails/lazy_load_webdev_image_updtaed.jpg" width="273" alt="" title="" style="display: block;" class="imgcenter"></a></td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top" style="padding-left: 25px;"><![endif]-->
+<table role="presentation" class="table-main-gmail_2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; width: 310px; vertical-align: top;">
+<tbody>
+<tr>
+<td valign="top" class="text padtop24"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tbody>
+<tr>
+<td class="" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 12px; color:#3740FF; line-height:14px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;">ARTICLE</td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<tr>
+<td valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:30px; mso-line-height-rule: exactly; padding-top: 14px;">It&#39;s time to lazy-load offscreen iframes</td>
+</tr>
+<tr>
+<td class="padR padtop20_t" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;">Browser-level native lazy-loading for iframes is here.</td>
+</tr>
+<tr>
+<td valign="top" style="padding-top: 12px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mrg">
+<tr>
+<td align="left" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank">Read more</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://web.dev/iframe-lazy-loading/?utm_source=email&utm_medium=webdev_news" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+</tbody>
+</table></td>
+</tr>
+<!--Left side image and Right side Text section ends here-->
+</tbody>
+</table></td>
+</tr>
+<!--Featured posts section ends here-->
+<!-- Signature Starts here-->
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly;">
+Stay safe &amp; see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:22px; mso-line-height-rule: exactly; font-weight: 500;"><a href="#" style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExQQ4eNgzlwsxE9KU2NIatxfhbICsG8nkXIB9MU6ENIfetXd5zmm7BH2hoGKkbs_knRyG_d7f25fEBC0sFwhdLbnoiv_6oqdOugZf1FvNc6GcF1V3nTHr4ksQ" target="_blank" style="text-decoration:none">
+<img src="https://services.google.com/fh/files/emails/webdev-twitter-icon.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExEByt_fZw-fr-GNyyd0Pgl_QEekFd_GeBaC_khJXU3yh6wTp4Wn4YlarUNpNYN4ZGmnxBDJSjMKGPeGaBCXwQutLmkMlLMiTyWjmX3Rs-8BxZpCu_HflF_h9lLKxKG_vSAhk5LRFU" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-youtube-icon.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExk3rn0i8CjNqp8qXu6_NYw7IQgcYK-14lqtpupNPL9-7Sxw7SYH6lNrreTl7qizFI2XhIV99cFrrSo8o4VWsC2BhOTJB1lzXLF3cSsTAjEUV95aLjDWn4" target="_blank" style="text-decoration:none"><img src="https://services.google.com/fh/files/emails/webdev-github-icon.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Did you find this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExcz2mNYRfkt4lSPC7oDvZv6SIT3lnzPBKn_R9fwSokPwRBcCEiOT-i3z67CjTkQHacDGNVvHiLEjFML8Xw4N-HujMrZ922ut8o60RctWJ0vuBCg3s" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEwkNxiot8QoRP-J3HmTpqKFTQgHfzD6pPO8pm2GsPmCb_qJR8u2872YsaIkC5XTP-wsz8pMvCDh1sYyFAWLjevqPoNgsPi_WNeFp7eFWVKMzkMenC8" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyqZ2pBtBbcZ7D-05InFmj9w2OxwA8VTYOowFt12zHnYKoQvs207b4l7U_8a6hXtgYeQlma0iA6jvtgR2zpINRZc3wLMuZsdXsAPU9T8dW4vbVgIkw" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEzbNAr70iUrAx2hYulgmJUpzFaas4t2kRKzugs-if4c99uybHMKjXWGTHhAJz3FrHSPbIML_7xfPrziUgC-ZZ8MCnI3cGR8WQ1ezmOmY8QuOU-mjvQ" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://services.google.com/fh/files/emails/spacer_11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEzyGlUv3JRrLM6Km1G3iPRaEkCTeIQpFrAj-5gohUbALOJdlgTpLOKpLB7d9ifW99sjhaVsQvkcLnbVud62T33dDL1QymTGErvwS9qz27GvKktOlmI" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-star.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:22px;"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnExNKk5nG948RqtwkUsTo-WyWihjdvPgyJj54cIddep3XMJQrlXoRk3PHBDIXHd8l-ldo3m3loh3qPUtSO8fR7Po38lH-syyqx3Wldvz-5fVz7dM2jr2idFEN22kiBy8OgLP0AwWqbYbAj__FldREJKGFzrTH1sGRSiHUtceuDHZ-zHD7cJBCkiKGZfU" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEx8o5wiWanlF-pdwA8qRe1j4CMPl8TWar1iXSB9Oy4y1YyUGmv9vHn5OGJb8bSLK7KVq2rF8ykXPsWQyBQ8dy5wrNQXnhfzB0MIVXED8E1su3V9_Axoisaq3yDyLdR37RiJYMY2E0gJ6rZfMtwHhhKuQeAAqmljN1thNjhIsukGoFu43b8mnKR-Ab10rxO93Bg" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://services.google.com/fh/files/emails/webdev-cta-arrow.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://www.google.com/appserve/mkt/proof/p/AD-FnEyNFp8W8mMLPdiHWzdDTidPYksblM5kVlXUG6wJb8CB-m-i6iLycgc6YgrZoi0_2qO9Or8" target="_blank" style="text-decoration: none;">
+<img src="https://services.google.com/fh/files/emails/webdev-logo-desktop.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" align="center" valign="top" style="color:#757575; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2020 <a href="#" style="text-decoration: none; color: #757575;">Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+</table>
+</td>
+</tr>
+<!--Footer section ends here-->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table>
+<img height="1" width="3" src="https://www.google.com/appserve/mkt/proof/img/AD-FnEy_hK1BEPPEd0PnEkaxqekiKW-NTs9u16x6fANrJbvQukk.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/01/index.njk b/src/site/content/en/newsletter/archive/2022/01/index.njk
new file mode 100644
index 00000000000..7d4e2fe0409
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/01/index.njk
@@ -0,0 +1,1053 @@
+---
+title: Responsive design course, building Designcember, and community highlights
+subhead: Read our January 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-01-30
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/QA1dpP0TU5102OO1H3Gg.png
+alt: Learn Responsive Design course logo
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>Responsive design course, building Designcember, and community highlights</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 300px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1ThflzxMskOs09RTLb1SrzaUEwI0hBwBGTxoSIuynEZTXVM4Zi9RF4ZnBzpzHBXXyinpn-sj8ERd36elEY4TmemS160?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">A free course exploring all aspects of responsive design</p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tg-01GOXeSr-a51GhThM8x2uyuIMCOubpwLUFyuYSS2JkLEiuyUHWXU231nuBp30F2lLRp4?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" style="padding-top: 23px; padding-bottom: 23px;" valign="top" class="mobpadad">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="middle" width="300">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: middle;">
+<tr>
+<td align="center" class="pad0" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 0px;" valign="top">Your January newsletter</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 0px;" valign="top">Learn Responsive Design</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiLrK9o3IES9PcpErB8Zn2iUTUUuMNxVBe8K8keS8YAygzQHyLhQk-KtaLs5kjxF4pFozcypUPRzUvAGKFlQo8jld3QNV8gx51ffHu7EdXHMzitvtDCG-9wJwFYqw?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-learning-w640px-h320px-2x.png" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">This course takes you on a journey through the many facets of modern responsive web design. The first few modules ease you in with a history of responsive design and a look at the fundamentals of responsive layouts. From there, you’ll learn about responsive images, typography, accessibility, and more.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Ti-9zkPH7MTypyFYXB_gR-JZQXATsXNqcDZk8NRpWERV3i7EdrmPw6eSCfBeGJRH7whBhE4-wgQpwO4S1gHOZIUCp5PZaJ2FB9dpkrPT2XGQr5WYWpo30E?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Start the course<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px;" valign="top">Building Designcember</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThYBrydZbembLFtybfedeVwAhl-8K7dHty8IfETBgHuCPYvgxSLhh7mVYjg_QjDVV9ZoztfKq1SPhK6lPTEJQ2s36mD2EZUl-EK43JdHYZU2CqDFCqTrlngsMEQ-_wsL8xOkXMf2poPPj6C9LZH-Q?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-december-w1140px-h698px-2x.png" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">A peek into the process and tools used to build the holiday-calendar-style experience of Designcember, our initiative to highlight UI development and design-related content built by us and the community.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Thmbx1gF2g6cPL_OSFx081KLlliy10dd5S9_igPZIhF0VhYHLLfyfZ99uGyrgMjjJoo-cHIBz7p2AQ3YuGs30EahfGCXfHgG7oPSD7GjbWyYEh2R5rybW9VzIzZHnoIIS1o7pIJne43kAs?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Building Designcember<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tbody>
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px;" valign="top">Designcember: Community highlights</td>
+</tr>
+<tr>
+<td align="center" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 5px;" valign="top">
+These interviews are part of Designcember: a celebration of web design brought to you by <a href="#" target="_blank" style="text-decoration: none; color: #202124;">web.dev</a>.
+</td>
+</tr>
+<!--Featured posts section starts here-->
+<!--Left side text and Right side image section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tbody>
+<tr>
+<td align="left" class="padtopB20" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tbody>
+<tr>
+<td class="text hide" align="left" valign="top" style="padding-bottom: 14px;">
+<table border="0" align="left" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td align="left" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" dir="rtl" role="presentation" width="100%">
+<tbody>
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="wid200" role="presentation" style="display: inline-table; width: 200px;" width="100%">
+<tbody>
+<tr>
+<!--[if !mso]><!-->
+<td aria-hidden="true" valign="top" class="padtop" style="padding-top: 0px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tj6Cgii1tNgLVexBA_AdYWi1ewU3R2HavuAbhkrZxlOxIiCb_HaIYkKHivniojOX0lFz5BOaGjnX7uwYD7CywTWU7jRX3DxiIbvlVi3qJQKSX17onUZy0aaW0ckJgiu09CN9gK3PnqZqP1mq09P__XXAIr6qAtwSSNMFsIFSLc?disableTrackingProofPage=true" style="display: block; width: 273px;" target="_blank">
+<img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-girl22x-fill-w1600px-h948px-2x.png" style="display: block;" title="" width="273"></a>
+</td>
+<!--<![endif]-->
+<!--[if mso]>
+<td aria-hidden="true" valign="top" class="padtop" style="padding-top: 8px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tj6Cgii1tNgLVexBA_AdYWi1ewU3R2HavuAbhkrZxlOxIiCb_HaIYkKHivniojOX0lFz5BOaGjnX7uwYD7CywTWU7jRX3DxiIbvlVi3qJQKSX17onUZy0aaW0ckJgiu09CN9gK3PnqZqP1mq09P__XXAIr6qAtwSSNMFsIFSLc?disableTrackingProofPage=true" style="display: block; width: 273px;" target="_blank"><img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-girl22x-fill-w1600px-h948px-2x.png" style="display: block;" title="" width="273" /></a>
+</td>
+<![endif]-->
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]>
+</td>
+<td align="left" valign="top" style="padding-right: 20px;">
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" dir="ltr" role="presentation" style="display: inline-table; width: 323px; vertical-align: top;" width="100%">
+<tbody>
+<tr>
+<td class="text padtop24 show" align="center" valign="top" style="display: none;">
+<table class="show" align="center" border="0" cellpadding="0" cellspacing="0" style="display: none;" role="presentation">
+<tbody>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Lynn Fisher</td>
+</tr>
+<tr>
+<td class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;" valign="top">Lynn Fisher is an American artist known for her many creative projects and yearly portfolio refresh. She currently works with the creative folks at Netlify. Lynn talks to us about her many fun projects.</td>
+</tr>
+<tr>
+<td style="padding-top: 12px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tbody>
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tim0kYpzSitmE0VOfcs8fRPKt-_frd_qJKzuSFtG4CL85Rch5bE_I6CysWhILpubbFHqmUchLa78BKtXqoaRbHDVTdC1nLno5I3arBf6hjpwGfBDmFWabDenvLMZt3ZlkIOLkLE3pCQA0PVZHDDZ0VZw6HwzBEuWdCR?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]><![endif]-->Community highlight: Lynn Fisher<!--[if mso]><![endif]-->
+</a>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<!--Left side text and Right side image section ends here-->
+<!--Left side image and Right side Text section starts here-->
+<tr>
+<td align="left" class="padtopB20" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tbody>
+<tr>
+<td valign="top" align="center">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tbody>
+<tr>
+<td width="285" class="outlookwidth" valign="top" align="left"></td>
+<td class="ol_0 text hide" align="left" valign="top" style="padding-bottom: 14px; padding-left: 6px;">
+<table border="0" align="left" style="" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tbody>
+<tr>
+<td class="text" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="wid200" role="presentation" style="display: inline-table; width: 275px;" width="100%">
+<tbody>
+<tr>
+<td aria-hidden="true" valign="top" class="padtop out-top" style="padding-top: 0px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tj7LdkRbNLIfyN2oFmr-mgydYXW2_qv9SZbCfJozXUIuL6khfQPhDnQeXIsBiFWLVt_mgeAzOTgVZbexNIv4Hru7pGKN9Ym6QV3U4M8_WCoRwdsOVXqeIJ9f8fw80arAEW7RKGsYnHtNgXshReDTcfNiEZswG8SrZX85TpSnO-pSa2zFP0?disableTrackingProofPage=true" style="display: inline-block;" target="_blank">
+<!--[if !mso]><!--><img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-girl12x-fill-w1600px-h1067px-2x.png" style="display: block;" title="" width="273"><!--<![endif]-->
+<!--[if (gte mso 9)|(IE)]>
+<img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-girl12x-fill-w1600px-h1067px-2x.png" style="display: block;" title="" width="253">
+<![endif]--></a>
+</td>
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]>
+</td>
+<td align="left" valign="top" style="padding-left: 25px;">
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 320px; vertical-align: top;" width="100%">
+<tbody>
+<tr>
+<td class="text padtop24 show" align="center" valign="top" style="display: none;">
+<table align="center" border="0" cellpadding="0" cellspacing="0" style="display: none;" class="mrg show" role="presentation">
+<tbody>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td class="ol_0" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-left: 15px;" valign="top">Miriam Suzanne</td>
+</tr>
+<tr>
+<td class="ol_0 padR padtop20_t" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px; padding-left: 15px;" valign="top">Miriam Suzanne is an author, artist, and web developer in Denver, Colorado, and is working on exciting CSS specs such as Container Queries and Cascade Layers. Miriam talks to us about her work with Sass and CSS.</td>
+</tr>
+<tr>
+<td style="padding-top: 12px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_320 mob-wid" role="presentation" width="180">
+<tbody>
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TguW0ODnfN7UcHXsIpZc6LLmFkes9Dh8NEfOo4ooDA1VXWzrL9nNSwn73JBEfsY0TaDG7Z4A8WNfeYXkounECwNS5-c6knRJBqYuRCnDh8VqgQzex-ysIoQXAtgmR_x26TPjmkzmkPV6ukR9Ic8S_MHUTwLZ429IhpzP42O9-jJ?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family:Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Community highlight: Miriam Suzanne<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<!--Left side image and Right side Text section ends here-->
+<!--Left side text and Right side image section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tbody>
+<tr>
+<td align="left" class="padtopB20" style="padding-top: 30px; padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tbody>
+<tr>
+<td class="text hide" align="left" valign="top" style="padding-bottom: 14px;">
+<table border="0" align="left" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td align="left" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" dir="rtl" role="presentation" width="100%">
+<tbody>
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="wid200" role="presentation" style="display: inline-table; width: 285px;" width="100%">
+<tbody>
+<tr>
+<!--[if !mso]><!-->
+<td aria-hidden="true" valign="top" class="padtop" style="padding-top: 0px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tgm30lNjZNzsFQDIi_ekB5CFmaFrVh8nH6PMsXIL3oQz9Sz0FZ-E4Y-vd667GkNxTv1PT3Uv7n-Z2zqFaCOHNyLmOgS-3LFX4MicYTNSV_GByFU87mKTzJbqN4yFPZPrRwI5St87u-QkLIhsTVu8ZPtUuBXurwvDD0YNVk8UOm2dEY-?disableTrackingProofPage=true" style="display: block; width: 273px;" target="_blank"><img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-tedx-fill-w1600px-h1067px-2x.png" style="display: block;" title="" width="273"></a>
+</td>
+<!--<![endif]-->
+<!--[if mso]>
+<td aria-hidden="true" valign="top" class="padtop" style="padding-top: 8px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tgm30lNjZNzsFQDIi_ekB5CFmaFrVh8nH6PMsXIL3oQz9Sz0FZ-E4Y-vd667GkNxTv1PT3Uv7n-Z2zqFaCOHNyLmOgS-3LFX4MicYTNSV_GByFU87mKTzJbqN4yFPZPrRwI5St87u-QkLIhsTVu8ZPtUuBXurwvDD0YNVk8UOm2dEY-?disableTrackingProofPage=true" style="display: block; width: 273px;" target="_blank"><img alt="" class="imgcenter" src="https://www.gstatic.com/gumdrop/files/web-dev-tedx-fill-w1600px-h1067px-2x.png" style="display: block;" title="" width="273" /></a>
+</td>
+<![endif]-->
+</tr>
+</tbody>
+</table>
+<!--[if (gte mso 9)|(IE)]>
+</td>
+<td align="left" valign="top" style="padding-right: 20px;">
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" dir="ltr" role="presentation" style="display: inline-table; width: 310px; vertical-align: top;" width="100%">
+<tbody>
+<tr>
+<td class="text padtop24 show" align="center" valign="top" style="display: none;">
+<table class="show" align="center" border="0" cellpadding="0" cellspacing="0" style="display: none;" role="presentation">
+<tbody>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color:#3740FF; line-height:21px; mso-line-height-rule: exactly; font-weight: 500; letter-spacing: 0.5px; border: #E6E6FA 1.5px solid; padding-left: 10px; padding-right: 10px; border-radius: 20px; padding-top: 2px; padding-bottom: 2px;" valign="top">Article</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<tr>
+<td style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Community highlight: Chen Hui Jing</td>
+</tr>
+<tr>
+<td class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 12px; padding-right: 10px;" valign="top">Chen Hui Jing is a self-taught designer and developer living in Singapore. She works as a front-end developer at Shopify. Hui Jing talks to us about CSS and, in particular, non-English writing systems.</td>
+</tr>
+<tr>
+<td style="padding-top: 12px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tbody>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tbody>
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjHfuTBC7gQcwUnXu6Ss8LDHgTlgbtXuS2slTvgZBXzmwC-seGgbqtqVM4_bERKtXQmkXCaeiAbCfKP4D8CBz42qyFV834IqnmAHzYHu7NYCHruocCBb_8rVOQ6zDKPKvhjBF7nkiupNyYHBoNaGbUVSC7xML7AKDIoT2cD2w?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Community highlight: Chen Hui Jing<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+<!--Left side text and Right side image section ends here-->
+<!--Left side image and Right side Text section starts here-->
+<!--Left side image and Right side Text section ends here-->
+</tbody>
+</table>
+</td>
+</tr>
+<!--Module 3 starts here-->
+<tr>
+<td align="left" class="ol_t0 padtopB20" style="padding-top: 30px; " valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="ol_wid table-main-gmail" role="presentation" width="600" style="border-bottom: 1px solid #DADCE0;
+padding-bottom: 30px;">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Designing in the Browser</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1TiiiswLJ8WM-iIclka68cXvD8oRymErxwjIxiNxpk0KDRZBiyj_LWQDULyRBx_ZwacatbhOeQ1OicIJxFiO-2zWdiCl2wDGnKwKtzerB4PIma9FnPpVq8vzGIo7O9NmIBz9SLYY3FkXotVY96dnmBQvpa9DabHR5CNK_V7YM2kKdWW44qvM28e44RYmxqxrh5b4yyxeJQ?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-designing-browser-default1-fill-w480px-h274px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-designing-browser-dark12x-fill-w480px-h274px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Designing in the Browser returns with Developer Relations Engineer Una Kravets. In this episode, you learn about responsive images and art direction, including how to optimize your art for size and layout.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 12px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TiIoCottSet9Qe1VWXKMyEAsMSJHoakIeb2lln3qJr3EP36Mjw0FKOqN48dfir0T_X7mm8dcpY_Qkn0Rzhm-cgIwu2LspNiSY1ApkPHuO18hXukhh9Z8ZZfkTmetbFtcEZEMgJLZ1UW8zyx7xwDUejuimJbtc9RyMxH63Hep9i2pe-QDf4hkbRIyjjrg5EZxTY?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Tjb7wNuuuy8zgHou7w6yxEi-dpWf7X8tXOzQTtonKLEvRvuiUCMdVx1FePQK6pOPAOOns6ab0i2L9-Q4FNauSaDcAdDqlmfqtSxE-TB3Yz3-Jwcy76ExRNyS_4?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TgXhjS5_quwAsr96T0AQMVw5ik4TDYAiFEuNNdy8e9Sjq0Dz5YI3IiO-khjQGLAlJCjlPZLQdopl84Do-qsfnHgDtkQdCzUJBbMXDvOMRHcx9EjjWcSBz6ik9nlzAlmIzWHQJmp17Vg?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TgVZiPs-cICXS9sIRN-7UZXhp1R4PSf0rRNJaaH461gJoc01jTYWRLF3GlrgIFgj7dRtp8mQr-m_404llPjxCOmz5SJYtNLnF4lWlG_dxRVmridGtOYrHXE?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Thj61qlRe4nMNaTFMc3CKznKvn0xMcCnKuWMZ72MOFMoeNONgwpYPTeNhGzL-BF-jOC7J1Yj89334hQl_hX5wma7_sjlKRhTAjyUADXhshv0c4ypsb9?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiQ6IhpML_G_XfStDlRYrFpvIeBUKdovitcSlQpbroFtUKY9yb2GZsPyFDvx6UWAW2ws46GU1gJH-b6eFCzYUnsTcXif5VzLV-NdPuEHFmUC0SvN9lx?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgLvJWICY7HQIP6RDRkH07Ue5HN04UTG1vzKOf92trfx95IZHSvgD5FdVA6M8Fl_bMIcpJMeSwG641OVKgRaljclGfjaYrUB_iMGWFV1vrN0hcc9_Go?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Th83z3ICcxJeGO3Y8KVQ6VUdxbDxP6Q34lBnv5XXvUF7beG8LfzlNeQ-OY0h7c_Ob_w1DHBCuIRctsnDMXDA4gxi9OD9YkHTxEH4VcUo4z0-H57Vh31?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TjfrrN1VF-g54YAuYJfv3Hjmg4xBEketx9zQY4UF-bGx8vmUAgf9mWxia3tozFlyx3mu4fKMh6u7U4v4fFo91KxpvoI7GESmorawabqo2diyjBLt5FV?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1TgxKlVQqXsjNN94BFCjSbLHk8IGCq0xp3U5QNq6PbOGkI2q7yXx7WZ2BAbMfRvX4mBGUuHX7eczkl_s1Rt8-f072Azx0qMnjEy929FsoAQN6zA_FWuGyMfiKUbNMSRQmO-HRfwFumlaIygSZtv5cTjL8-9sEXZCdAYGa8OyrFF799uCaZIIZOGKddBgkw?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1TjET3CebSMzMs7fkqjz0lu5Wwdel-_HbI2TZ2YVcZLMaftKZp9bdmdgGBQ543BSH3hsfyGwZpJ14IUMHlvYo7jtGScS6DugOk-kUAbNYnEqU39Hz79DQ3hDqZ6_6X1X6Wg_Z_0PU6W2GaVC5cf_uhOtsUNYj2lpE3rWGLluJ_7as4NT8W4NJAQoI_UIMrYAe1ws?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tg-01GOXeSr-a51GhThM8x2uyuIMCOubpwLUFyuYSS2JkLEiuyUHWXU231nuBp30F2lLRp4?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+<!-- Pref Starts -->
+<!-- Pref Ends -->
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1Tg6S7mfYccdOvu_YPlJLNvIWYdYQF5y3a1Km2t1vqHrwlaX.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/02/index.njk b/src/site/content/en/newsletter/archive/2022/02/index.njk
new file mode 100644
index 00000000000..9bc516347a8
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/02/index.njk
@@ -0,0 +1,724 @@
+---
+title: New to the web platform, Chrome and Firefox to reach major version 100 and record and replay user actions
+subhead: Read our February 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-02-27
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/jdHqM8k15dwPFwK2rV2h.jpeg
+alt: Red and yellow rainbow
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>New to the web platform, Chrome and Firefox to reach major version 100 and record and replay user actions</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 200px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.pd-l-r{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1TjNK-sXVj5Z--HuuGqeOkJMDULNLQ9otJ_KpMWAaZBX0bMIibH_Onp-NsO3ASM3003sQkyjFFYhK_8FBYQbdbHYcw?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">Discover interesting features that have landed in browsers during February 2022.</p>
+<p aria-hidden="true" style="padding-top:0; font-size:0px; line-height:0px; color:#ffffff; background-color:#ffffff; margin:0px;" align="center">‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiMashrUs_w-9_nLIEG8_zXzilSRQKAutUf2M-4rzfF2QIrvac00jXgKB_RZg9EbShaJfg?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" style="padding-top: 23px; padding-bottom: 23px;" valign="top" class="mobpadad">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="middle" width="300">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: middle;">
+<tr>
+<td align="center" class="pad0" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 0px;" valign="top">Your latest newsletter</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 0px;" valign="top">New to the web platform in February</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TimrOSC7fcdbxtUY62XUNvzKI7sXoOQct6AiVm3eAMHYMN4RbdQSOSCUncMhgguz8G7wUWaJXeW8vCoPaHq_pqnBkDOolLqmg44Gg_cz_QD8uFZKC_Iker0LEw2KB14sHc?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://services.google.com/fh/files/emails/februarywebplatform.jpeg" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 3px;padding-right: 3px " valign="top">Discover some of the interesting features that have landed in stable and beta web browsers during February 2022.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TgtjSYXYseWHBf66l_soIWpQCGLwuplGr-bi9CJ_4njD7qP4b1srPln-alcAv1fPdZ8-CBmf1SF7lLYYPEm0z5_M1Wa03xQu5McLtd9BJmzkZKebDMzvMo6yzri?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Chrome and Firefox soon to reach major version 100</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tj4D0kw3NANED1Lw2ZGWh4lFZhj-HGG3TUdFZDNbd77U9PKWvuNpj7u9DUoFppEWz1psgBWmr0KXz7lqwkg-Lhrw4QRDJ9BaJkXeP_S8t2sjpSULHbBMi319XxYZ5RcW_gy?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-chromedev-fill-w1140px-h342px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">When Chrome and Firefox reach version 100, sites that rely on identifying the browser version to perform business logic could have issues. Learn about the timeline of events, the strategies that Chrome and Firefox are adopting to mitigate the impact, and how you can help.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TijTlNBQjHtLM_6oQxBi9N1B_GEmsBCECkGVrnJw2UwLNO2mL1HoLOf7m1Dvb2AueVm-TAZS_dtgI3k2J5vxY_zBRcNQ2PBgoCkw-Hgkr_dERwuujX5GovG-TUVgw?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="left" class="ol_t0 padtopB20" style="padding-top: 30px; " valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="ol_wid table-main-gmail" role="presentation" width="600" style="border-bottom: 1px solid #DADCE0;
+padding-bottom: 30px;">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Record and replay user actions in Chrome DevTools</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1TjFVfH0dyvbxU1a7Y4d82hbi7a9cD9xDe37142ClgxdmutWihAbp9DcwFJ0a5jTQu-A8MIfZwnRfncTGVmbjQF4by_sKdHpnPzE1X4lBbXUUn3r6kfxmbyOeL6A7GFqx_AODwWs?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-yt-tut-default-fill-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-yt-tut-dark-fill-w1280px-h720px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Learn how to record, edit, and replay user actions in the Recorder panel in DevTools. See how you can export the recording to a testing tool and replay it to measure performance.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1ThTtEbBtSJGEqPxyeoUn2knPh39-TBZlSsYbKe9uofo8rLZ3TZyqTwXARKZwbuvcJzEMCLZfHefFvA0puaYAos3boKKMd0zKTO7FW_a5Au-cpbehv0UF5aXKPxLue8YHw?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Thu_bCAC60aLGW-AbKbUGcXC35TyYbifDoiLVTuOHpLXm8d94OZyc4_IygXCB_atqMYmgwQhbKC8HtAIp8s02bkfPJRqBJ81ZDCa2zxCCkS9HImvLy6HsTa7w?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Thvwd2gvS8o-uZtO6M7T4WEqh--56-9knY-1CT0WudqzyW0v5tgNoSb8vaQrrtHXvqFGFo3s0OynRMZ7I81hvdLXl_b3A8DUzlna-0ncyTZcnmoCYIrio6KjcN8ciB_5EzW8wDqWYk?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Tilci96wX6q3kclIQvXRsqOMALcJqFHVe_vbn8c8LuzaHQmFz_PdH41MvPNsggq3j7Tws1SjaCCqoINMg_2Ewb1RpMIHmvbr6PAxN7dBMXSlMVqfIr6z2s?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiXRYRgZp3fgM8IMoVj-KI10Frk4wsxL_-2erGs63mQjaOGMwP0DAiYYnOS8rWzmkFwpcfSjXsi0ioxeKMJGlO9Vcp21mmKAm_AsY6Xm-NZuw6A62Q?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgMt8SKBCAFeWTUSbfJQ7vi_mhz8JiszpZk4xSkHkDatsCZ1WUViszsOPZjgMx4ykDX2JH6vax-POOlgdk7FM5Y1lRq2XMrvkMqqYfXN4AYqAc-htg?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiRXGwtWfK3QFyz9noVgyHd4dLlNC-_DIAl9CaFx5XGiFwceLte2lLp4DGsgnLlrOiNX1tQNOZb1fKUTZmUCWF9VU2dQy-irhUnZRXuarA8PwxO2_k?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Tj0wzi2kcYP8iX5sLlTptIdUv4Jq7TdZ_cp-otHkMdiaURxUEC2etK5ssc89QS9V7PX_CA7nBSDiV1acqGV-9tDO6_qorBKXvpz54FNirdqk_l1UIw?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Tj7P4f0EoKtodQ163E9RUE3sdpT26cqBwyaLSxA0XEoA2JsC7GEmLDzV39NrnIpu8R0WmLqW33nNS_cYIQA0x_No3T7HSJabx-rqjnUhQk3Xm7Pmec?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1TjQUiVDxWzcKHsnQFbkXa8jrh0PtcmwvuCHrZSffDmZ74aTOWn_bAx03MzMDdhHYys2CrQMd1VTH3VvyrsXSiuIKi88r7d19kK_ZIpwdz4Ylj5RSSFbqY5Nh0YeXAcVhEinouhFAB8DoPJVQ802qBr8vqmWYf3u8u5thy437Rfox4S6CIp40ZBAcITC?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1ThzH_kRPhYgovyuZoAWKetrWA_gLeDxXkQWEArZ61iDll3fqoCZVtlo9_w7-O1fkucQHMWQZrQNZQgt95Y24oEDAv9sjaCMhJmwmB38uHXivjy9ZEGg3AN0e_UTCOCjfQcA_6MiEs0M8nlUG7JwZfYLn6rYL2gmfjrIJOEN3COqxxJWKAM13jN8110MfrJ7I9w?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiMashrUs_w-9_nLIEG8_zXzilSRQKAutUf2M-4rzfF2QIrvac00jXgKB_RZg9EbShaJfg?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+<!-- Pref Starts -->
+
+<!-- Pref Ends -->
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1TiZU1FMIe3zvIGR7ZlgX81f1jivPj_qcF62Yso92K35Pk4.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/03/index.njk b/src/site/content/en/newsletter/archive/2022/03/index.njk
new file mode 100644
index 00000000000..6408bd58abd
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/03/index.njk
@@ -0,0 +1,574 @@
+---
+title: Interop 2022
+subhead: Read our March 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-03-30
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/rCagFuPcwXuXOLAxe5MA.png
+alt: A brick wall
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>Interop 2022</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 200px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1Tj7RURp0bK9HN7o2HVE3lOMJNir5asDov3MO9D7i5Kwijoye0g1rz99SKipU5i3BDntbM6rmyCr-j_XJXQvg-ayQUk?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">Interop 2022 will improve developing for the web in 15 key areas.</p>
+<p aria-hidden="true" style="padding-top:0; font-size:0px; line-height:0px; color:#ffffff; background-color:#ffffff; margin:0px;" align="center">‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1Thmz3hkOFr19NlXJZZL6luwlrHWXOd7IGTyheWl1ZJZs-WhuYh-uvMfGadyPrWDfgt6ieJm?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 20px;" valign="top">Browsers working together to improve the web</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjN_KjMrPb0ULv-E4PFFNSgZxF0FA3HIkEQJ5MS8ewd-o0bp4nFc2JSlJsoW5iLZjWI6QXggG-tkBCwjt9c9B9Ynmj6D9e32gGWrtUqDBvWnZao-WKn?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-brick-wall-fill-w1140px-h760px-2x.png" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 3px;padding-right: 3px " valign="top">Interop 2022 will improve developing for the web in 15 key areas. For the first time, all the major browser vendors and other stakeholders have come together to solve web developers’ top browsers compatibility issues. Find out how we got here, what the project focuses on, how success will be measured, and how you can track progress.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tgtd2uSzmEqP9bNuan0vtHvaV5D-RYiXnsMuEswvpp76vJeXeMGO5REJV6CsUUuM2hF6mSKdr0sj0Ti59cHFRNG5kl9RBzmW5RtSiWrlLAG0w?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TjXrg8AwtDlkSjhSkk_5vIUteQbWXF9MkRMXG5iAj0nKmNgv8VE4w95B7fho0-3WF4v1_suEKZx1kxEGOOEmgdfYWA3p5_6xebiX4yeGA4sjlgKI3T2argqkhU?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Ti307CNKQWe_awjU-Wk1IqKkGTiN_929WaNVlswtYU2vkdyJwaqBDhGyPH6hEBNr46LmRTciNq6qMlWxsxBJ-goCLWq1Iv6FTGvPBRgnnFatWoQjJzN1PrfaBic04rIQk6inxsSR5jn?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TgsqTU5MlgnZuPxv_BKYMXUnRWVM16kCMZSNFSmB5T0V9LCyfLyaayiFkimfXOJQSnzsdutjMp3nDpl2D8E4CZhMhEzeBNwlPfmtbpPPEtpuxSo9GklxOpn?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TjyiqdsKB4MY5EGH-tGHKi7BRNjBiCwEPIknw5m43U4KGA_xRK4QSOMq6vXGrDxnbPL2y1COH7pKLjltqhIMJRnky3untTW_vwuSdqqBkkR7pnoRiwW?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgoxptFoQ5yMjJaFmPJa6qzVPzXBYewklGaJewtZaGuDaLCNBccZE2Zj92mN2OHryRDQFFVqApSvAdh1ic9c3RKMX1_iLn0L_oPy6lQdRyOADlZtwMI?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1ThXFrxewIAW6Xj4o-5CmWK1IIdjMvIQcdv_WKl7I9bgogB7_yg2oAWvPsFn4e6LuXDyoG7tM7wx6jd68LkO_8H4XT1cjkKhuQBz8b9zR3yDH-OQo8Z3?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TizyyECA1fu3_M6-3N52a-I3rPO1_vAJC726o9sjuO9xfkhta_r-hM4rIzVzD30jqwFEfXCcwm9z3QtyVtg1vSQAZe7wt6dWZ2yWoJahso7T0EzNWJ7?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Tg3o21jZq_aKcVDeGwHAp6ArPBqZ5AyxdJ1QyLE_IsXRzjwUOrcMJ6NyK9p59K2LilCKRKnEmkIURCLW_anu2k-7HuQRSEV_bhfbpsEcEKUeJnXQd7l?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1TiJ5VQoEvgiK0Wl8aDys2fl75Z1r675MpeXScejX85nEd9YRng9lhuPON4AlAGJ4fkSuIocP1q6VABGjQH71LHt5jE7STPTEfkDeT_kdf9EJM5xwwtPpBdvNXInbsjvlr-aQwoDwnKeWpde3vhwc7APkaxkgQ0E9FozW6qa_w3ValmwEmWgfb4cqjmSNA?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1TgrmOI0cNRi6F0bceTlPQESHJZYRIGwOn1kYK2kR6KI3Q-ElMLgbpmrWpQi2fJzqlX2lEgGeT8SR_2yAwSPDtpDd3IZAC3BqyUTvFG7-0FrVZAJbNg4IcIwmNQiSn-iJm53mbKSPwr4uwJ94yTwia4RMY_tMfpVAuyC6EIkpcfbeEZo5Vcw5cDD8N6gDDHH0dmt?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Thmz3hkOFr19NlXJZZL6luwlrHWXOd7IGTyheWl1ZJZs-WhuYh-uvMfGadyPrWDfgt6ieJm?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+<!-- Pref Starts -->
+<!-- Pref Ends -->
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1ThMnQD5U6UrA3OG4cn6qi6mOx76WdCzVGfxOhEOzqgJvMkI.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/04/index.njk b/src/site/content/en/newsletter/archive/2022/04/index.njk
new file mode 100644
index 00000000000..dc7d87d80c1
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/04/index.njk
@@ -0,0 +1,846 @@
+---
+title: New in March, celebrating Chrome 100, and more
+subhead: Read our April 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-04-30
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/P6md8XpLQR9XHX10t65D.png
+alt: Person typing on a keyboard
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>New in March, celebrating Chrome 100, and more</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 200px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.pd-l-r{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1TjYYbCxY3fXdx3H0VTxo9tmD8sDkXKQZt5-Uu_cyXICaKVa8tSw8_TcEwgYdx9lPyxDgj-0MSHLwGCNtq2KSvyX?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">Discover how the web has evolved over Chrome’s 100 releases</p>
+<p aria-hidden="true" style="padding-top:0; font-size:0px; line-height:0px; color:#ffffff; background-color:#ffffff; margin:0px;" align="center">‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjuwI0UzW236rleqpS4epTGb5j-yeWH_fW9FRjkoWveCXDxxU1w1DsFSW8UP559hhObVg?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" style="padding-top: 23px; padding-bottom: 23px;" valign="top" class="mobpadad">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="middle" width="300">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: middle;">
+<tr>
+<td align="center" class="pad0" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 0px;" valign="top">Your latest newsletter</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 0px;" valign="top">New to the web platform in March</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjqbudvcTmG-J00ZHIIxcWd4h5gBcv_ZvaaruScSO2TWllhB0f2cm3EzmwTlQGlFuyn9ozR6LF24aFmh3rryajF6mBTEyxZCS2RzUQSo6XX2erGP2nmXsOHG-h6YHHnIjTGecvi4k_4M7kYUJPtkoxa9CA?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-djtools-whitebackground-w1140px-h342px-2x.png" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 3px;padding-right: 3px " valign="top">Discover cascade layers, hwb color notation, and other features that landed in stable and beta web browsers during March 2022.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1ThDbVZKHGX15FUqUmJ9pynxFFSyH_J8BD8gnTtFhBYySPD_iV6e996L8xlzYrowD4nMj-3BevY-5zCdQvaOediurWK5aYboEmX_94k1pD_BswNpE6W4qA?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Chrome 100</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 0px;">
+<a href="http://notifications.google.com/g/proof/p/APNL1Thu68fwTbPVh2vVzbHZaKCwvJZnmHTyo4eaRwecf_dFADukg5gUmJVXQpQbVMgxYBLiYp_zlbAHRwCnmWClHTorjK80jpvIDZPjLhoJa07zTZ1kqIRbodtrQ1GJ4IfYO54?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-chrome-hundred-whitebackground-w1199px-h675px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">A celebration of the evolution of the web over the last 100 releases of Chrome.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="http://notifications.google.com/g/proof/p/APNL1Th9ejXvXbzh_U_8dP2peNKpcOGo9UFG4JUa9QKpasM7ex-Ufrv4QFSto6bDBLw3GPlLAkkt_SnQfBClP3MxJhqn-gu634nUtYvgORFN85Qnk9g?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Chrome 100<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 1 ends here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Building a loading bar component</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TivVRHHsgP5x3tcrmHxTBJHkUAASyaSafndP57TwxOvHiyr3lZHhU6UvPKM_-3y-7pXagI2I2spo2btHxFImKDm0r6X_kWSmeDFzIFP0HJeKk8vpS4msrKE2Mtkd_-aRgdyZ1YLXCM-0qcSt3_Mn9qKgI5j07L1XVJszGRvmR4?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-pattern-fill-w1140px-h342px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" role="none" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">An introduction to building a color adaptive and accessible loading bar with the <span aria-hidden="true">&lt;</span>progress<span aria-hidden="true">&gt;</span> element.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjZhPt_93ehfTsE-sJgPQ6_zZfhaczmkJUcdnCFmYJb5MtX4EUwu4MWX0K0748sqXA3o3zlhTAnG-H1BHsN7EBYWJfrNa8bcxrm7GsrlQGzg6vpaJNWnihtf3JGBcObZlE9X40v4w?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Read article<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="left" class="ol_t0 padtopB20" style="padding-top: 30px; " valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="ol_wid table-main-gmail" role="presentation" width="600" style="border-bottom: 1px solid #DADCE0;
+padding-bottom: 30px;">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">New in Chrome 100</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1ThcQIsR2BIF8iEwVHMWN2jNFb7D1YyEgElfnlD4q45JkI8gNVgOjWlOn6-vpYIauFavs8KM0sw_osU8nH9mtBOFk_J_sVTx9MQmT2vr1t_WMP01fkKuqa8fwUxnJNxmSXTtO_sFEjSIEHk?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-new-100-chrome-light-whitebackground-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-new-100-chrome-dark-whitebackground-w1280px-h720px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Learn about new features including the Multi-Screen Window Placement API, This API makes it possible to enumerate the displays connected to a user’s machine, and place windows on specific screens.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tj8dcx7E2mX-y58a3ZbqFXC1e3maBPZ9H24aOMFQ4hPcONNDEZBOeg2wY3Hwcub87xAV3kkGWnbyBe3X6ivMnpDy6RC_fI6eeGXjexKqybEwTKmw0rBvA8gshJiw6P0wDb-Wg?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="left" class="ol_t0 padtopB20" style="padding-top: 30px; " valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="ol_wid table-main-gmail" role="presentation" width="600" style="border-bottom: 1px solid #DADCE0;
+padding-bottom: 30px;">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Chrome 100 – What’s new in DevTools</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1TgnfK2e6neZRYVv_rzGlGf13H2ELCK79Q32eIvJIamypjP7_RXVq4OSZnrlWZAlIIPBQDri8gF42zWro4Dn57Y6_A0rZcb0ez8qZHfM-VBILQxh793CJAb4-1WAWoRDQdq1Co52pEP-7A?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-new-in-chrome-light-whitebackground-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-new-in-chrome-dark-whitebackground-w1280px-h720px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Discover the ability to edit @supports in the Styles pane, improvements to the recorder, peview class properties on hover, and more.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjidFqMEYk5J_wJ5tozOHKoR9aNqSSuU4tbHoH2S4vV9UmhQXZJef6E8a7ljaf6vhKL_9r67lhOpQkhRAcIoMi2DiqfjE_5UcLGQSP_IPSMn3gYZkGtvKD_7Ss9WVsawWOCI9tw1g?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Tg9kwIwzuSkhkl0u20BBAPavns5cwSWcf16x665sKtUMtrU_vqA3SXGwip6UuD4GeW04q4qOJX1knk3Z1VQl6h_F1bCW6_Ld3ELCMFJc_BmYMLXejDlsRVc?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TiePkmc9HwHy6bFv7AhXFzBJrw3iv1U4FludcdGV-4X0E7jV4oSZiKjnOZ6XcFXrP2ESZpj44vDeO0BrjNVIoO5Ae5jRMbmmVbCBJCzYySLdaGUiKDdRRP5kGgO12_0ZfMwB-z8dw?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TghTiJOCnYaW9LbTqoLE-WuYT3E3ImF4r5fF-DWUJJiRA5hVy0DSWYRldiArOouMPzLqeYG9ld5X_ikRC-l7bKeKsZAPe9lJGFdXdZeEWDkeMsInLvRoQ?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Ti0BjqbjvcY5RVk5WUNhZPaOGlNtPfe1l6lkpJIGXoouZI_6gsxcJOLkFEDJ3F-rBC6YSMHvay7WvoqH_bKk_tO6KinhpqxUz-LS9d8wZ_pz8B7kA?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TjJ9pXtbehhISufcjaiF1w-rtScCrtpkE9SrQ_ZaE3VKXskLMSRXrPX0k7W61TFQaW2Y79neHLemD21UPYrsQkBQJuflfpnhbjRKVEPjP1aAETBag?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgKafqicdgNAHwXjclD0TYQki7wW2aMagwDckyk1-oICUqVw8lI1EKFIBSqaSrDizQ0kxY0VXTE4xCGZA8tlHaNxXAjkDG25OJe9-yRJi9kHaMMrg?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Ti8U-rdepOd_R0GbT63Od10GHh75SL3paYXGGbQ6iZOH2oeqeYFu5qioAhx44q2ORYBVOXJw8Y_R-_Jl--CYA-PzPVjpeHCxY6spUmS1nyDXHviGw?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Ti6h9fyE7DhHO9z7q8kNLoayT2ruO6xsChgFRQJ-psbbRMCErPkIw08lvpKKElfmcBFCQ0JlA6qmtbU8g6KqLnaQkb9lX3zqypJffB-XTIFxgYcOg?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1Tgq8VDWT3J3uA72a1dpZjn6OCXl05WcpnbnmzD3uA1NWRJKetcbkN3qtiFxKg4C15BCxhCFmjSdZ-5uG5MHx35L756gxIXiJgbfXYyAEOBvwas1aRuS4Nl3QqhTGofyVWKbw04BH1pRLIRkE1OnQ6-_ebDpIiBwb31PwvdVJy1Ai5lBAN7AUNI9Ztw?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1Th71b4MuAu4yrLXX79uw_T6G2uKKNt9l7czlooEtJDrbEcDOzpv_YAxTc4ojHLLLmauxxd9l54ocGq4Ia-H6TSSpNR9RLFatS-EGoJvy7OUjpp0M77UQpFVF5AmdEtvPNTzJfRzJbj7ukEMnCc7pli-uGh1x1JWkZ3-JCrDssBJuzUjZSajJznw3KtbT4wKHw?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjuwI0UzW236rleqpS4epTGb5j-yeWH_fW9FRjkoWveCXDxxU1w1DsFSW8UP559hhObVg?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1TjPM8-upWl_jBZf0ML-qhuwmSDGGJ4p3NRv5zxTfZ1VuQ.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/05/index.njk b/src/site/content/en/newsletter/archive/2022/05/index.njk
new file mode 100644
index 00000000000..c95859b1ef3
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/05/index.njk
@@ -0,0 +1,988 @@
+---
+title: New to the web platform in April
+subhead: Read our May 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-05-30
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/6b3wLHyCU4LpFVLwhswu.png
+alt: Colorful stripes
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>New to the web platform, Chrome and Firefox to reach major version 100 and record and replay user actions</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 200px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.pd-l-r{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1TgK3SEqVQjFk8mIcXFgszBmXoVNnVkImaLXklmiiOqQEcAIsC5_WJP09HK1TVlJmokB3ndpbuSg2B-9HAf7aRZCpFM?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">Chrome 101 - What’s New in DevTools</p>
+<p aria-hidden="true" style="padding-top:0; font-size:0px; line-height:0px; color:#ffffff; background-color:#ffffff; margin:0px;" align="center">‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThXMQhKODrjEajCTlQTIel1RelK7WSHaHMbleOB3n8n9OWoMTQuAdvW4_GgJpMmEoR2jLX0s3ZYcl3Kb8L6Y2sLU6DOFN6C?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" style="padding-top: 23px; padding-bottom: 23px;" valign="top" class="mobpadad">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="middle" width="300">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: middle;">
+<tr>
+<td align="center" class="pad0" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 0px;" valign="top">Your latest newsletter</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 0px;" valign="top">New to the web platform in April</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThInI76OJDZTnjwgBVQXxJ9bvLuvF2aABt_7GwEjdIPGOQk54hQ8uWPIxq-cszlSBd7TM4LzzyocVE5mfDlW6VR2BQizrNuzIawivWK-uMe5nuitMn-nWb9lmk_vpo?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-banner-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="500">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 3px;padding-right: 3px " valign="top">Chrome ships hwb color notation and Fetch Priority, and Firefox lands pdfViewerEnabled. Just some of the interesting features that landed in stable and beta web browsers during April.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1ThNgkPIPmv5j49iUEOCzYJXOdAiHvqjjY1_GcyPQ-Pw5BllW3RaFNVIkx9oiHsuEMhJvU_BYsJ2mS8muT7aAuugP6AcE79llV2HUktZ1wlbT8rn23dltb0k?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">I/O 2022 is here!</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<!--[if !mso]><!-->
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiSj8YR_bjdBuNGy_4gdfZzMkviRbnE6H6RMQLJogoJj0TRHsYO-Rf9drhW9KVNKD-iFo9t_VltZ4dDavoLtFoa8dtVv12VOVffCIAVPxSEEjjjRruUr_J4Xi0XQok?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-io-program-new-whitebackground-w600px-h338px-2x.gif" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+<!--<![endif]-->
+<!--[if (gte mso 9)|(IE)]>
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiSj8YR_bjdBuNGy_4gdfZzMkviRbnE6H6RMQLJogoJj0TRHsYO-Rf9drhW9KVNKD-iFo9t_VltZ4dDavoLtFoa8dtVv12VOVffCIAVPxSEEjjjRruUr_J4Xi0XQok?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-io-program-outlook-whitebackground-w600px-h338px-2x.png" style="display: block;" title="" width="600" />
+</a>
+</td>
+</tr>
+<![endif]-->
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">This year the program looks a little different. Catch all keynotes, product announcements, and learning lab content on day one, and on day two find all the technical sessions available on-demand.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TijcZ3N-0xTLQNGoPsJq7VfTvaTW87h7DMdkGr31SpZCrxEyzafees_j7jTqExwNxigF77IpwK8Avk19TOIBlSw4yrWxLcqGKN1jbG5Nbh0IskmChizZQUu?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Web at I/O<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 2 ends here-->
+<!--Module 3 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Introducing Chrome Dev Insider</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThA7qcwEfsWqkuqBvCZ11l5MR0vXFHhb8wBS8kS2_jhH-Ll5AHbn_QlMOx91nMCYZZvd8_rGBTnUZqbrXpa1KjnfL_Qv18oLvCl05jBkb9C5HvcBcD0X_rap8UUUTyOXCxwfUT4cWw3jPZlzLnKU-tWwhoG8I7e?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-chrome-dev-insider-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Catch the new Chrome Dev Insider blog series. In it, you’ll discover what’s cool and newsworthy and get an insight into decision-making and how we work with the ecosystem.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjCCmRjxN6JqmeMYX3m11CBn2OTYH3mPOUnpGT_Yn0QFH2YLWgkYal0_jCcKZbLyHX6Np_Vt_lXn0lm8T3iZOCclOW8qFfzbOiwynMqYfV2pQGWfmUHS4auD_XABnVc6PVo8yQ3jrN9COjaGtboUoOxGw?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Chrome Dev Insider<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!--Module 4 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">GDE community highlight: Nishu Goel</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tim1oL1MHe-dygTJxwnSd3PxKNEid7H_XqfZykWWodgMKNeC5gYnbWBjg_LravnGAgMNbA1VF0bR92X-mIPjJ-kwgaTSQhstB6PWgGT0VLqWcAS7jvOgFHDeluaeCgw289EwI1b8Z4?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-read-the-interview-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Nishu Goel is a renowned web engineer from India and a Google Developer Expert for Angular and web technologies. She talks about her community involvement, career plans, and the best ways to learn web development.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1ThIffxu2FKKSKqB7Dq40tR_QujMO8gqDVsMl2E_UBMqrglwLLMUWgeAmAFYz7zNMFG7BJP87YUIoPn-Yf_UBQyztAHI06ZmrPyf3KwNUgcmpce1Mrx9-oCukGYrrO2uO4YJ?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Read the interview<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 4 ends here-->
+<!--Module 5 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">RebelMouse grows loyalty and engagement with Core Web Vitals</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiQA3yBwOj3DLUYqctwRPDDh7c16GnpSERQNx7phZctjTrCOAMz4GdlzBAHj0_Hxk2IKc2kilYQGR0okgDqKNTJe6U2-3O0QWWBWnK6SC6vfdeAiVXgfg?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-rebel-mouse-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">See how high-performance scores on Core Web Vitals improve performance on sites powered by RebelMouse. Then get tips on achieving the same on your website.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TieppxmZgRQvAgYDNPSiQ3cuxFvcAPa1-93XV_FO6HnrpEWpmg7xdxi8VrTa_qygvqaA6SntuaTIJecOr6Ycx-k7EuJ8MYhAOLbMw6iKt9nf8U?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Find out how<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 5 ends here-->
+<!--Module 6 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Chrome 101 - What’s New in DevTools</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1TjAYDNiO-ImJZT0rAftLFKI8uLt7AppqTaKwcn4PmXCndfug1DU9-lmX6AaRn_pbFOKVc5pnDf9x1fdrFNYFIK-5cWKlNorqwAyIzv2v_TlZX05Bk-geW7Rx0loQCXZzMf1Qr7gAKoPwGE?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-yt-tut-default-fill-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-yt-tut-dark-fill-w1280px-h720px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Find out about importing and exporting recorded user flows as a JSON file, using @puppeteer/replay as a CLI tool, viewing cascade layers in the Styles pane, and more new stuff in DevTools.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TiJiEGJ83uGL1kDd6snbjnvtRzd53at5DzrsLd8aA7ycrIiWNv3WIRim_N0URoNd9Pzv4tPoy1BHNC70lEAO6_NjL5CZ82AayUm_9Xdsjom7C3zFwQVoPJAENqJhil7GJKJnraa?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 6 ends here-->
+<!--Module 7 starts here-->
+<tr>
+<td align="left" class="ol_t0 padtopB20" style="padding-top: 30px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="ol_wid table-main-gmail" role="presentation" width="600" style="border-bottom: 1px solid #DADCE0;
+padding-bottom: 30px;">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text" style="padding-top: 2px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; " valign="top">Ways to enhance a DIALOG</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 20px;">
+<a class="rollover" class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Th_iEOHoxUFwxqx9SKkYD2heqgYEAnN0sgZQS_bB4iCKN6Y18Dey1HGgYlzpj5F_7a1DMIx1B3fqOLjI8eGWNjT4R7x6A7ig-4qVBBnLckQpdSkGtEyPQO_rhkhr_7SintnquFzkDu4soQ_iKoBJ7Q6bQ?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-dialog-light-fill-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+<!--[if !mso]><!-->
+<div id="√" style="mso-hide:all;"><img class="yhide alt responsive" src="https://www.gstatic.com/gumdrop/files/web-dev-dialog-dark-fill-w1280px-h720px-2x.png" width="600" title="" style="display:block; height:0px;"> </div>
+<!--<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">In this GUI Challenge, @Adam Argyle shows you how to visually enhance the dialog element while maintaining a great accessible, international UX.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tj4frr7TtleDBVXe8KZqOqYO3gNhfzz0vl94kbqsQ59k1JikMYsbN-tVNG68qHuaYmAcwgRRJSPSry8Wqu-Kaw2HXZykoEu553fcK1WCD5Va2tfhnK1W1Hg2GnDFSqxp1jRg06CW6kwUW06L7I?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 7 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TjaEa3mz-fXf7bTTIzwQupP67_anVPIosJ5RtNMCNHeEEeqL6QzjE07br_OWdMyulxiUKCJW2H6R3sEM3TdUQf2zvtLIq5Ninpr-NZ1sVCc3Rc7rA-UAdkLmGE?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TgI0T8x8OQFOHQAYHeWzm_yGrhRUwFEu_Al42kwDhZOGglPckXn61_x8pBn3MJpVl3_6zLRMjOortxuba5uMMLgmbsN2iM-OHKVRmfRMi9q-gFdnwc2TgIfPfHifMzTT_jZKFhwQm-j?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1Th1AAxLc_bhmqDwczyyJXZ4XmQW-Vklpq4-mcWGlc1pPHb00cqEtpugVQFLfqhgFlBbgdtN7ov23izfKbFVRfKPgPcO0pU1zEizmMf7JvSkncVpKTVuVGpy?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TjJyC7nxRi9N0CgAWei9CqJuFb3NFORedXcOCCI9gPsrjz0aOOTiePLbJbMx0JEM8kpMfg1jANdPkdJIx7Q9qwCnSnVexksgBXJ3IWsHrxQ0wl-qoKe?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgPSysoHanno7SeGHMK-6QwepKMmTi_4t9ZQfKX3fJaBPXos5m6F1oXdbSXfRjeUtAE1q3Jl5EPWb41viM63HAYMPjSMWRPyp4lebqji23AovOMio2l?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiB3Z-jCTNSiM0Gy4RT9kDr1_nTt5i4X7kG5o8IPzIoej9lJNYw0ZeZBdEen0pO9z9PLlXzMBsCMoIai_For0C2One9F_gPxH_1xR8T7PZybwpRWZto?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiQEf_ltjCiFuPWnKt9C3illcNhx0XekKbKYfy6pkqqe7c5PzLif4Vf6De_UdGIbgu5geFOIZ7Uq8yc_Xt7fwTRTMhsSuP057qzvg0sSoRPAhkcdzS4?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TipF5vzuX526-hzF27s64HeR7OEA54rJld5akimioO2l-hy6x2lvqqzy7BSQoKz59VbVZyrtbu2Hc6Nl5dLF5v926VJJGNgMaZ3s1LAskmk9w7E9sYb?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1Ti2-04_v-TXGH-RmOyhwfmrOZ4jq6Phkje5M7lh7lJ4KqFSS4vzIrwk8EwpgcRzkTaThChrteuA9bT0HMMQsZcM1giehbK1bqtlaXhHceuBOhoMceHi3YDepXhJ1PbwUkOq0fLD-0o8N1VTqlsJhg650kGXOfM1hG5loyGT55la_zTarsKZiQsyezfxYQ?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1Tg9y-B99So7YSfdeg0JF-k7cClY0L818EHCbas_Tyyfe6KbChjPpDsdGhgTNZ-_1sZ3cZ78t7HAH2-sR1I-JqzbXmQd6dP48X_Y_SGUqXHjUGlosvpnBV2uLsTOTVX249iQ0miJZHHMFRtSChIlOoy0tzDwVDzNd03Hx8FcjUaIenrXXdmyodJjyHNmEbmpmdXM?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThD1Xt5_VFmw5-FVmd97SV7rbRka1cCZwbrXWYRv9oY5QhcBzrZVpVrrmG5EmD63fMLORMg?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1TirpXOARqMFZcOMNdxlxGFIXsBx5-dP0MN9uFo7aPSHSL2K.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/archive/2022/06/index.njk b/src/site/content/en/newsletter/archive/2022/06/index.njk
new file mode 100644
index 00000000000..50d7b596b2f
--- /dev/null
+++ b/src/site/content/en/newsletter/archive/2022/06/index.njk
@@ -0,0 +1,924 @@
+---
+title: Top 10 web things to know from Google I/O
+subhead: Read our June 2022 Newsletter for the latest news, updates, and stories for developers!
+date: 2022-06-30
+thumbnail: image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/pUKoai2AZO4fBSlLwKUV.png
+alt: Hot air baloon
+---
+
+<!doctype html public "- / /w3c / /dtd xhtml 1.0 transitional / /en" "https: / /www.w3.org /tr /xhtml1 /dtd /xhtml1-transitional.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+<title>New to the web platform, Chrome and Firefox to reach major version 100 and record and replay user actions</title>
+<meta https-equiv="Content-Type" content="text/html; charset=utf-8">
+<!--[if !mso]><!-->
+<meta https-equiv="X-UA-Compatible" content="IE=edge">
+<!--<![endif]-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="no index">
+<!--[if mso | ie]>
+<style>
+.ol-f24{font-size:24px !important;}
+.out_pad_b_10{ padding-top: 10px !important;}
+.out-pad-t-20 {
+padding-top: 20px !important;
+}
+.nolineheight{
+line-height:19px !important;
+}
+.out-top{
+padding-top: 8px !important;
+}
+.nolineheight_2{
+line-height:17px !important;
+}
+.out_font13{
+font-size: 13px !important;
+}
+.out_font12{
+font-size: 12px !important;
+}
+.out_wid_200{
+width: 200px !important;
+}
+.out_wid_320{
+width: 320px !important;
+}
+.ol_wid{
+border-top: 1px solid #DADCE0 !important; padding-top: 30px !important;
+}
+.ol_t0{
+padding-top: 0px !important;
+}
+.ol_0{
+padding-left: 0px !important;
+}
+.outlookwidth{
+width:275px !important;
+}
+</style>
+<![endif]-->
+<style>
+body {
+font-family: Google Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+font-size: 12px;
+color: #000000;
+-webkit-text-size-adjust: none !important;
+-webkit-font-smoothing: antialiased !important;
+-ms-text-size-adjust: none !important;
+}
+table, tr, td {
+mso-table-lspace: 0pt;
+mso-table-rspace: 0pt;
+}
+a:link, a:visited, a:hover, a:active {
+color: #4285f4;
+text-decoration: none;
+}
+.appleLinks a {
+color: #000000 !important;
+text-decoration: none !important;
+}
+strong {
+font-weight: bold !important;
+}
+em {
+font-style: italic !important;
+}
+.yshortcuts a span {
+color: inherit !important;
+border-bottom: none !important;
+}
+html {
+-webkit-text-size-adjust: none;
+-ms-text-size-adjust: 100%;
+}
+.ReadMsgBody {
+width: 100%;
+}
+.ExternalClass {
+width: 100%;
+}
+.ExternalClass {
+line-height: 100%
+}
+td {
+-webkit-text-size-adjust: none;
+}
+a[href^=tel] {
+color: inherit;
+text-decoration: none;
+}
+.mob-hide {
+display: none !important;
+}
+div, p, a, li, td {
+-webkit-text-size-adjust: none;
+}
+td {
+text-decoration: none !important;
+}
+a[x-apple-data-detectors] {
+color: inherit !important;
+text-decoration: none !important;
+font-size: inherit !important;
+font-family: inherit !important;
+font-weight: inherit !important;
+line-height: inherit !important;
+}
+.rollover:hover .main {
+height: 0px !important;
+}
+.rollover:hover .alt {
+height: auto !important;
+}
+@media all and (max-width: 600px ){
+.table-main-gmail { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.table-main-gmail_2 { /* Forces Gmail to display Desktop view */
+width: 100% !important;
+max-width: 600px !important;
+}
+.responsive{
+display: block !important;
+width: 100% !important;
+}
+.logo115 {
+width: 115px !important;
+}
+.logopadd {
+padding-top: 19px !important;
+padding-bottom: 19px !important;
+}
+.logoright {
+padding-top: 24px !important;
+}
+.hide {
+display: none !important;
+}
+.block {
+display: block !important;
+}
+.text {
+text-align: center !important;
+}
+.wid200 {
+width: 200px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.padR {
+padding-top: 20px !important;
+}
+.pd-b0{
+padding-bottom: 0px !important;
+}
+.fl {
+float: left !important;
+}
+.padtop20 {
+padding-right: 0px !important;
+padding-bottom: 20px !important;
+padding-top: 20px !important;
+}
+.padtop13 {
+padding-top: 13px !important;
+padding-bottom: 21px !important;
+}
+.padtop8 {
+padding-top: 8px !important;
+}
+.font32{
+font-size: 32px !important;
+line-height: 46px !important;
+}
+.font32_36{
+font-size: 32px !important;
+line-height: 36px !important;
+}
+.pad27{
+padding-top: 29px !important;
+}
+.padtopB20 {
+padding-top: 20px !important;
+padding-bottom: 29px !important;
+}
+.pd-l-r{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.padtopB20_n {
+padding-top: 20px !important;
+padding-bottom: 0px !important;
+}
+.padtop24 {
+padding-top: 24px !important;
+padding-bottom: 14px !important;
+}
+.padtop20_t {
+padding-top: 20px !important;
+}
+.padtopB28 {
+padding-top: 28px !important;
+padding-bottom: 20px !important;
+}
+.pad-l-r-20 {
+padding-left: 20px !important;
+padding-right: 20px !important;
+}
+.padbot29{
+padding-bottom: 29px !important;
+}
+.pad-t-0{
+padding-top: 0px !important;
+}
+.pad23B{
+padding-bottom: 23px !important;
+}
+.padtop8{
+padding-top: 8px !important;
+}
+.padwhitebox{
+padding: 27px 15px 21px 15px !important;
+}
+.heig{
+height: auto !important;
+}
+.centertext{text-align: center !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.width174{
+width: 174px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width108{
+width: 108px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.padtop9{
+padding-top: 9px !important;
+}.pad_b_30{
+padding-bottom: 29px !important;
+}
+.border_none{border-top: 1px solid #DADCE0 !important; border-left: none !important;}
+.imgcenter{
+margin: 0 auto !important;
+text-align: center !important;
+}
+.padtop12{
+padding-top: 12px !important;
+}
+.mobpadad{
+padding-top: 51px !important;
+padding-bottom: 20px !important;
+}
+.padtop{
+padding-top:0px !important;
+}
+.show{
+display: inline-block !important;
+}
+}
+</style>
+<style>
+.& #√ .yhide {
+display: none !important;
+}
+</style>
+</head>
+<body style="margin: 0 auto; padding: 0px; background-color: #ffffff" bgcolor="#ffffff">
+<div itemscope itemtype="https://schema.org/EmailMessage">
+<div itemprop="action" itemscope itemtype="https://schema.org/ViewAction">
+<link itemprop="url" href="https://notifications.google.com/g/proof/p/APNL1TgHdnQsItj5gu2Khc-rYNzhMcKbIqTnDrQ307pM4sB_QJezlNKvVGjNAH93pCzwNibMyn9Xj2lkyH3mzNSEJfYpuQ?disableTrackingProofPage=true">
+<meta itemprop="name" content="Open web.dev">
+</div>
+<meta itemprop="description" content="Open web.dev">
+</div>
+<!--Preview starts here-->
+<p align="center" style=" padding-top:0; font-size:0px; line-height:0px; color:#ffffff;">Top 10 web things to know from Google I/O</p>
+<p aria-hidden="true" style="padding-top:0; font-size:0px; line-height:0px; color:#ffffff; background-color:#ffffff; margin:0px;" align="center">‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </p>
+<!--Preview ends here-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="top">
+<!--[if !mso]><!-->
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail pad-l-r-20" role="presentation" style="max-width: 850px; width: 100%" width="100%">
+<!--<![endif]--><!--[if (gte mso 9)|(IE)]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="850" align="center">
+<![endif]-->
+<tr>
+<td align="center" bgcolor="#ffffff" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+
+<!--Logo section starts here-->
+<tr>
+<td align="center" class="logobor" style="border-bottom: 1px solid #9AA0A6;" valign="top" width="100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="left" aria-hidden="true" class="logo115 logopadd" height="auto" style="padding-top: 22px; padding-bottom: 23px;" valign="top" width="150">
+<a href="https://notifications.google.com/g/proof/p/APNL1TgMyHY5o1WgchIGZotTK2rqYf0XPP6OJzeDNu8u5SelklY0E-tC5VxMxVLluxUB1ZW_876jHizfUeCCQ4HoUoL33iWwzdA?disableTrackingProofPage=true" style="text-decoration: none;" target="_blank"><img alt="" class="logo115" height="auto" src="https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" title="" width="150"></a></td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Logo section ends here-->
+<!--Hero section starts here-->
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" width="600">
+<tr>
+<td align="left" style="padding-top: 23px; padding-bottom: 23px;" valign="top" class="mobpadad">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td align="center" valign="middle" width="300">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: middle;">
+<tr>
+<td align="center" class="pad0" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 28px; color:#202124; line-height:34px; mso-line-height-rule: exactly; font-weight: 500; padding-right: 0px;" valign="top">Your latest newsletter</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Hero section ends here-->
+</table>
+</td>
+</tr>
+<!--Module 1 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style=" padding-bottom: 27px; border-bottom: 1px solid #DADCE0;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="padR" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 0px;" valign="top">New to the web platform in May</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThlGmBRmHI6Yp9IVr1ybA39otJ9jA2PmgyS9t0OJL8KoK7g8UYxGyVFesG3BJqBZ_M1npXPcAOBtz_H-L52U0ZNCWcldLbuQ72K2VG2z3C4N02imDFrv-mpv1454g?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-platform-banner-fill-w1600px-h808px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 3px;padding-right: 3px " valign="top">Discover the Navigation API, Local Font Access API, and many other features that landed in stable and beta web browsers during May.
+</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjgsyJOAe5n9TlZ-f3hq3-lLnLn1nPPMjRWD2LHWDN1RSn4MwR-8mzjoFU8otykMX1dRSDAbeJUVrNTHMWA9N7TBE7HdK7mahnwuAaN9oF-A7SgbyBb768?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank">
+<!--[if mso]>&nbsp;&nbsp;<![endif]-->Read more<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 1 ends here-->
+<!--Module 2 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Google I/O 2022: That&#39;s a wrap</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<!--[if !mso]><!-->
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tik2R8kaerKNnM9sVgtGlUSZAtuQ0vZjVre2-U3z0yLiNMw08lW6QwoCCXpjSiUY6eII2_j_ZNgbulFiXX5KlT6ScianpTGEA27qS82FEsRq63XEpQ2vGsQ_dCrp2c?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-wrap-fill-w1600px-h900px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+<!--<![endif]-->
+<!--[if (gte mso 9)|(IE)]>
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1Tik2R8kaerKNnM9sVgtGlUSZAtuQ0vZjVre2-U3z0yLiNMw08lW6QwoCCXpjSiUY6eII2_j_ZNgbulFiXX5KlT6ScianpTGEA27qS82FEsRq63XEpQ2vGsQ_dCrp2c?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-wrap-fill-w1600px-h900px-2x.png" style="display: block;" title="" width="600" />
+</a>
+</td>
+</tr>
+<![endif]-->
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Get a roundup of the web announcements from Google I/O, including new performance metrics, privacy sandbox, new styling APIs, and more.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjT0Vz05oEpjoC17xnftZXxM13fq8af6YgDztcN1BkFjoNUWLvSwcOUgorQVZTj_Yv6M8HIr_UWrUCnDG1EDIEBjT6dM-w1yaN7CrRgywnmITQNViYc5WOq?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Read the recap<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 2 ends here-->
+<!--Module 3 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Bridging the gap</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjX57DarYozrRTbk_8NUnrHFfsKKuGfn5ocn_z4_U9VhRJk65CGBz84GmCmGeaBZnyh-ZykYrRE19I4BvIKRGbX9nZIeLa7o86O-12JgmXymMcterxJh7o6w0RB?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-bridge-fill-w1600px-h1067px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Learn how initiatives, such as Interop 2022, are making it easier to build for the web.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tg7D_tVIMzKywKGpuI1IEeuOQo20tDEjgcRY2iIAEH-HDNNH2qX3GGOAjLk6FFbRIvuQtNMS_dPRr-m6a9JDMaFBIePrZ0JMwWe0BgeryBw7aXsfe0oIQ?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Read article<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 3 ends here-->
+<!--Module 4 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">State of CSS 2022</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TiPwiYAsbf6Y6l2nzOvuMozBhx75vaz9bt3CymlieqqmLeUpqcOSckESayNPGQ6R0UQNX6zPGjbn_kdQEgTulDcKFvnBP_DZnA06ketIjTBCdBd6mk-xj3pQQ3LeA?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-state-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Explore the web styling features of today and tomorrow, as seen at Google I/O 2022, plus cascade layers, subgrid, and more.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TjorVBplqKWsJYd3zL2YoeY3HJkZD76biZFkzpFj0ICP7C3czu2hnO6-caGINrCBgcVNyuRlkWdwRiw3l_LR3BDYGxgYzwW3AP3Ls2ZfaVGWJ9QJ_8ANwU?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->State of CSS<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 4 ends here-->
+<!--Module 5 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">Top 10 web things to know from Google I/O</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 0px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1TjX43vKok7o3nmCEEvA-vi3lvg4Rjaba6jaKEjg2u46EpWgP4pw8C16bd5KdUXuW8HbF5o_s9--equaE4hfL_D9fK1-sNDhRixLSMx8YVPUsR5RBaaQJgUG8XSofq6-sqqM1a91S_NXLgKxHF1g8naWuDSMqdA_7jNS5jjucr6AXOMOrLGZbU8DA5U4TmtekOjlpqxbvA?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-things-fill-w1280px-h720px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Watch a roundup of all things web from Google I/O 2022, including accent-color, &lt;dialogue&gt;, topic, and more.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1TgUcweM0ZARONeoKlVvvlyajhO1axrZ2iA2CAMO4vPe2lRINBIYHg9p7aOf7dQR1bze9OZPht8y94OvEMpkaYRFJF-muOFyLaiZKR0Z1PqzWBS1ZJy9k69_INvS2j2REsW5A9BVx3Du1zVMXVrRoOkJZit8YJ5FZdzMEkRP8Ljs6aNFdKZOxefL_pR8BF0WlOs?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Watch video<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 5 ends here-->
+<!--Module 6 starts here-->
+<tr>
+<td align="left" class="padbot29 pad-t-0" style="border-bottom: 1px solid #DADCE0; padding-bottom: 27px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="table-main-gmail" role="presentation" width="600">
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<tr>
+<td class="text pad-t-0" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="table-main-gmail_2" role="presentation" style="display: inline-table; width: 600px;" width="100%">
+<tr>
+<td align="center" class="pd-l-r" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 26px; color:#202124; line-height:39px; mso-line-height-rule: exactly; padding-top: 30px; padding-left: 33px; padding-right: 43px;" valign="top">An API for fast, beautiful web fonts</td>
+</tr>
+<tr>
+<td align="center" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="display: inline-table;" width="100%">
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table border="0" cellpadding="0" cellspacing="0" class="" role="presentation">
+<tr>
+<td align="center" aria-hidden="true" valign="top" style="padding-top: 20px;">
+<a class="imgcenter" href="https://notifications.google.com/g/proof/p/APNL1Tj4AZ9OilFD8Gpd__usF0s_-JI-InhyQjexeL1I2zfb0O3joi4GAYWQBdthAfSjoB_RU-pksE_nkFQMEjluFAJhaE-asReO1tHy7A__UJxjzj5Uo2j5aS7jmO9BUaLkW35kWi0jYxwSd_A7jg?disableTrackingProofPage=true" style="" target="_blank">
+<img alt="" class="imgcenter responsive main" src="https://www.gstatic.com/gumdrop/files/web-dev-ru-fill-w1600px-h480px-2x.png" style="display: block;" title="" width="600">
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<tr>
+<td align="center" class="padtop12 padR" dir="ltr" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; padding-top: 20px;padding-left: 10px;padding-right: 10px " valign="top">Learn how to use the Google Fonts CSS API to efficiently deliver web fonts.</td>
+</tr>
+<tr>
+<td align="center" style="padding-top: 20px;" valign="top">
+<table align="center" border="0" cellpadding="0" cellspacing="0" class="mrg" role="presentation">
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" class="out_wid_200 mob-wid" role="presentation" width="180">
+<tr>
+<td align="center" style="-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:0px; background-color:#3740ff; color:#FFFFFF !important; text-align: center; vertical-align: middle">
+<a class="cta1animate" href="https://notifications.google.com/g/proof/p/APNL1Tics64GQifq8_7cjWDTgOWnFN-0PNvpHoye-O_HW0QIqO08BEr90fqpmz4bl9nCtCPloRMBh-lct52WsRyz_WEd9mmKp6dDlzC4QJFacdMnIR8qyo8R3iuVadNd8eKiISMVPLiiqOc?disableTrackingProofPage=true" style="display:block; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:0px; color:#FFFFFF; text-decoration:none; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; line-height:24px; font-weight:500; border-top:12px solid #3740ff; border-right:16px solid #3740ff; border-bottom:12px solid #3740ff; border-left:16px solid #3740ff; text-align: center; white-space: nowrap;letter-spacing: 0.25px; " target="_blank"><!--[if mso]>&nbsp;&nbsp;<![endif]-->Find out how<!--[if mso]>&nbsp;&nbsp;<![endif]-->
+</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+<!--Module 6 ends here-->
+<!-- common part start here --><!-- Signature Starts here-->
+<!--[if mso | ie]>
+<style>
+.nolineheight{
+line-height:19px !important;
+}
+</style>
+<![endif]-->
+<style>
+@media all and (max-width: 600px ){
+.pd-l-r-10{padding-left:10px !important; padding-right:10px !important;}
+.dblock{display:block !important;}
+.sign{
+padding-top: 36px !important;
+padding-bottom: 33px !important;
+}
+.line18{
+line-height: 18px !important;
+}
+.padtop14{
+padding-top: 14px !important;
+}
+.width174{
+width: 174px !important;
+}
+.padtop39{
+padding-top: 39px !important;
+}
+.mrg {
+margin: 0 auto !important;
+}
+.width108{
+width: 108px !important;
+}
+.pad0{
+padding-left: 0px !important;
+padding-right: 0px !important;
+}
+}
+</style>
+<tr>
+<td align="left" valign="top">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
+<tbody>
+<tr>
+<td class="sign" align="center" valign="top" style="padding-top: 44px; padding-bottom: 36px;">
+<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<!-- Sign off content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly;">
+Stay safe and see you online,
+</td>
+</tr>
+<!-- Sign off content End -->
+<!-- Signature content Start -->
+<tr>
+<td align="center" valign="top" style="font-family:Google Sans, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color:#202124; line-height:24px; mso-line-height-rule: exactly; font-weight: 500;"><a style="text-decoration: none;pointer-event:none;cursor:default; color:#202124" target="_blank">Team web.dev</a></td>
+</tr>
+<!-- Signature content End -->
+</table></td>
+</tr>
+<!-- Signature Ends here-->
+<!-- Stars and Social icon Starts here-->
+<tr>
+<td align="center" valign="top"><table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="table-main-gmail_2">
+<tr>
+<td align="left" valign="top" style="padding-bottom: 31px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<!-- Social icon heading Start -->
+<tr>
+<td class="line18" align="left" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Connect with us</td>
+</tr>
+<!-- Social icon heading Ends -->
+<tr>
+<td class="padtop14" align="left" valign="top" style="padding-top: 5px;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<td align="left"><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left">
+<tr>
+<!-- Social icon Start -->
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TjRVftjnqZLMDMSjvXqNvLed5RhGIOoL1EwsaiVsC_sYoGkBXHCU5aav-RfaqWFSG799frGP2qbsAkAPACXORf7xZSevp1Y7MYxNbdikogSKAWtkeQEbPYqfA?disableTrackingProofPage=true" target="_blank" style="text-decoration:none">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-twitter-icon-transparent-w56px-h56px-2x.png" width="28" alt="Twitter" title="Twitter" style="display:block;"></a>
+</td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="29px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1TiH1Ku3aCLA66T_-VPkrmpInE9IfbPzzCaLgSxbmFIowVS4xuddosoPcy8Txv8LJu-5nXe4ip7S_epZZgraj_4s0bz_CbfepmvN64RBlYMkbSDoaVuQM58kmMsiVeLQX4kdYCNBAjw?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-youtube-icon-transparent-w58px-h56px-2x.png" width="29" alt="YouTube" title="YouTube" style="display:block;"></a></td>
+<td width="10"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="10" height="1" border="0" alt="" style="display: block;"></td>
+<td width="28px" align="center"><a href="https://notifications.google.com/g/proof/p/APNL1ThV9cZRSxg5A0rEwpWvoN6qwkAYiEcIIjnIACCGlKfBEXPI6Dxjnjcm8--rVEcec_bg0qfTBuzC4aN6tA7EoL6Ewu49Zi0qDt0k9xngTtAB5Ze-vKgEJ5Y?disableTrackingProofPage=true" target="_blank" style="text-decoration:none"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-github-icon-transparent-w56px-h54px-2x.png" width="28" alt="GitHub" title="GitHub" style="display:block;"></a></td>
+</tr>
+<!-- Social icon Ends -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+<td align="right" valign="top"><table role="presentation" width="230" border="0" cellspacing="0" cellpadding="0" class="width174">
+<!-- Stars icon heading Start -->
+<tr>
+<td role="none" class="line18" align="right" valign="top" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 25px; color: #202124; mso-line-height-rule: exactly;">Was this <span class="block"></span>newsletter useful?</td>
+</tr>
+<!-- Stars icon heading End -->
+<tr>
+<td align="right" valign="top" style="padding-top: 9px;"><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+<tr>
+<!-- Stars icon Start -->
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgbOXpfS-rXgfk3LjRURP5yJySlGyacnrUrGNinleuotjEvsGEYyi1wD0y3fO-UP2eldy3MKEch4nbrarRMvOaIyg8Nav20meliyg7Vc8p7u5IH7yI?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star1" alt="Star1"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TgYNjVqhIT1cq2HNlSBDASfSR1101KEuEdnakY1f2GfmnFZxhhA94rhieDzhytFIanD2bi6LAaOM-yD61I9CsBlQbJ45_Q0eG0ITxGU7o52la1yihE?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star2" alt="Star2"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1Ti3meI7q-R_2nphG9RK0ldqGjtx5KPuYPpkCyVeuQD50v2SRIjOWqdOqbbpXkOlre59Ntj1ZZStja8Zyoj88HYG6vJeyRglI-fSgbfIHc0qQqHaUtI?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star3" alt="Star3"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TiS5q3Ylu73f4tZFjLkvFdmqi9bdvijftzyrIEL52JC1U0p2B5GwzibpIbqhl1Hv_e2P5daUWYdAEdGxhzmEccIP7qHfv8b-N9v2UoxXO8Cgoi6ZwU?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star4" alt="Star4"></a></td>
+<td width="5"><img src="https://www.gstatic.com/gumdrop/files/spacer-11.gif" width="5" height="1" border="0" alt="" style="display: block;"></td>
+<td align="right" valign="top"><a href="https://notifications.google.com/g/proof/p/APNL1TjpfaRJAR-j-nLZhU0pYKeCQTX5Y7W7ylR8ohGOabhm0TL2w1mlGYvCeA6BP7hmFU6pi71yAsH_kpnAe1w_m2mRNEM_TX473UR6N2iZJUMjIsTu7jc?disableTrackingProofPage=true" style="color:#455a64; text-decoration:underline;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-star-transparent-w40px-h38px-2x.png" style="display:inline-table" width="20" title="Star5" alt="Star5"></a></td>
+</tr>
+<!-- Stars icon End -->
+</table></td>
+</tr>
+</table></td>
+</tr>
+</table></td>
+</tr>
+<!-- Stars and Social icon ends here-->
+<!--Footer section Starts here-->
+<tr>
+<td class="padtop39 pd-l-r-10" bgcolor="#F7F8F9" align="center" valign="top" style="padding-top: 34px; padding-bottom: 40px;">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" class="table-main-gmail_2" align="center">
+<tr>
+<td valign="top"><table role="presentation" border="0" cellspacing="0" align="center" cellpadding="0" class="mrg">
+<tr>
+<td align="center" valign="middle" style="font-family:Roboto, Helvetica, Arial, sans-serif; font-size: 16px; mso-line-height-rule: exactly; color:#202124; font-weight: 500; line-height:24px;"><a href="https://notifications.google.com/g/proof/p/APNL1ThoFwTPe5wneOCIIpOGeSV2eHQ2PauA-Yl3ujKuK8638-vYh_iNLB2wNIL9Zh3qw_tlIvElrWu93gUViNL6I4DcFvy-YpR6Y8nOfVh2qqBshkaXjzncQ3s_YdEJQ8W1zyE3VYWUorddprh6viGd9S2c9AZnezdANgBg7ivINULhiT4Z_KLfRFMoZbKN?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank">Subscribe to this newsletter</a></td>
+<td aria-hidden="true" align="left" valign="middle" style="line-height:10px; padding-left: 7px;" class="nolineheight"><a href="https://notifications.google.com/g/proof/p/APNL1Tgf6ZxXKFu2j9CRzCNY4AXFvgJJyYY2jS6qJgj7StnAIw_dbhCTeWY906oNnpJ7TBcORjvGedJnevI0h5tcA2yPf6URpK59yX_VjMkpTC79BJiA60ossAx9rg3GnWFZoO4r2jOWjDowMG1yraWREzO8qocL1fDF22baeX5xYIXxYn6-YiYbhRuW_5Fw5045nD4?disableTrackingProofPage=true" style=" color:#202124; text-decoration:none;" target="_blank"><img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/webdev-cta-arrow-transparent-w32px-h32px-2x.png" width="16" alt="" title="" style="display:block; border:0;"></a></td>
+</tr>
+</table></td>
+</tr>
+<!-- Footer Logo Starts -->
+<tr>
+<td aria-hidden="true" align="center" valign="top" style="padding-top: 20px;">
+<a href="https://notifications.google.com/g/proof/p/APNL1ThmM-RGs0R6JwXHyUmAb2w6z5T1gOiY4S2N_96YsUmF5r3NxU382fBD-DuYb4ftjHo9qCY?disableTrackingProofPage=true" target="_blank" style="text-decoration: none;">
+<img src="https://www.google.com/url?q=https://www.gstatic.com/gumdrop/files/web-dev-post333-transparent-w300px-h68px-2x.png" width="120" height="auto" class="width108" alt="" title="web.dev">
+</a>
+</td>
+</tr>
+<!-- Footer Logo ends -->
+<!-- Address Starts -->
+<tr>
+<td class="pad0" role="none" align="center" valign="top" style="color:#707070; font-family:Roboto, Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; padding-left:25px; padding-right:25px; padding-top:31px;">© 2022 <a style="text-decoration: none; color: #707070; pointer-events: none; cursor: default;">Google LLC 1600 Amphitheatre Parkway, <!--[if !mso]><!--><br aria-hidden="true" style="display:none" class="dblock"><!--<![endif]-->Mountain View, CA 94043, USA</a></td>
+</tr>
+<!-- Address Ends -->
+
+</table>
+</td>
+</tr>
+</tbody>
+</table>
+</td></tr>
+<!--Footer section ends here-->
+<!-- common part end here -->
+</table>
+</td>
+</tr>
+</table>
+<img alt="" height="1" width="3" src="https://notifications.google.com/g/proof/img/APNL1TjTxrSWZnrq-hIhdttLzJ1dHYVGPY6gBcz_qcEn8yfguMs.gif"></body>
+</html>
diff --git a/src/site/content/en/newsletter/index.njk b/src/site/content/en/newsletter/index.njk
index d2e0b85ff83..785162cc092 100644
--- a/src/site/content/en/newsletter/index.njk
+++ b/src/site/content/en/newsletter/index.njk
@@ -1,22 +1,31 @@
 ---
-layout: layout
+layout: default
 title: Newsletter
-permalink: /{{lang}}{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
 description: Stay up to date with the latest about web platform.
 date: 2020-03-13
+eleventyComputed:
+  noindex: "{{ paged.index > 0 }}"
+pageScripts:
+  - '/js/newsletter.js'
 pagination:
   data: collections.newsletters
   size: 1
   alias: paged
+  addAllPagesToCollections: true
 ---
-<div class="newsletter-landing-page">
-  <div class="w-layout-container">
-    {% include 'partials/subscribe.njk' %}
-  </div>
-  <hr>
-  <div class="w-layout-container">
-    <h2 class="w-headline--two w-mt--l w-mb--std w-text--center">Past Editions</h2>
-    <p class="w-text--center">Read past editions of the monthly newsletter for web developers.</p>
-  </div>
+<div class="landing-page">
+  {% include 'partials/subscribe.njk' %}
+
+  {# Hero starts #}
+  <header class="region bg-mid-bg">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h2 class="headline__title">Past Editions</h2>
+        <p>Read past editions of the monthly newsletter for web developers.</p>
+      </div>
+    </div>
+  </header>
+  {# Hero ends #}
+
   {% include 'partials/paged.njk' %}
 </div>
diff --git a/src/site/content/en/notifications/codelab-notifications-get-started/console-output.png b/src/site/content/en/notifications/codelab-notifications-get-started/console-output.png
deleted file mode 100644
index 07663e16afd..00000000000
Binary files a/src/site/content/en/notifications/codelab-notifications-get-started/console-output.png and /dev/null differ
diff --git a/src/site/content/en/notifications/codelab-notifications-get-started/copy-live-app-url.png b/src/site/content/en/notifications/codelab-notifications-get-started/copy-live-app-url.png
deleted file mode 100644
index aca14457015..00000000000
Binary files a/src/site/content/en/notifications/codelab-notifications-get-started/copy-live-app-url.png and /dev/null differ
diff --git a/src/site/content/en/notifications/codelab-notifications-get-started/index.md b/src/site/content/en/notifications/codelab-notifications-get-started/index.md
index f4cb0e245a5..0dfe7402b56 100644
--- a/src/site/content/en/notifications/codelab-notifications-get-started/index.md
+++ b/src/site/content/en/notifications/codelab-notifications-get-started/index.md
@@ -23,11 +23,12 @@ backup glitches:
 #}
 
 In this codelab, you'll use basic features of the
-[Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) to:
+[Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API) to:
 
 * Request permission to send notifications
 * Send notifications
 * Experiment with notification options
+{% BrowserCompat 'api.Notification' %}
 
 ## Remix the sample app and view it in a new tab
 
@@ -38,7 +39,7 @@ Notifications are automatically blocked from the embedded Glitch app, so you won
 
 The Glitch should open in a new Chrome tab:
 
-<img class="w-screenshot" src="./live-app-new-tab.png" alt="Screenshot showing the remixed live app in a new tab">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GVJ94Bn7ef99w7SRPSF.png", alt="Screenshot showing the remixed live app in a new tab", width="800", height="399" %}
 
 As you work through this codelab, make changes to the code in the embedded Glitch on this page. Refresh the new tab with your live app to see the changes.
 
@@ -126,7 +127,7 @@ Notification.requestPermission().then((result) => {
 });
 ```
 
-See the [`Promise` documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for more information on how promises work.
+See the [`Promise` documentation on MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) for more information on how promises work.
 
 {% endAside %}
 
@@ -215,7 +216,7 @@ If the permission state is `granted`, your notification will be displayed.
     }
     ```
 
-    The `Notification` constructor takes two parameters: `title` and `options`. `options` is an object with properties representing visual settings and data you can include in a notification. See the [MDN documentation on notification parameters](https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification#Parameters) for more information.
+    The `Notification` constructor takes two parameters: `title` and `options`. `options` is an object with properties representing visual settings and data you can include in a notification. See the [MDN documentation on notification parameters](https://developer.mozilla.org/docs/Web/API/notification/Notification#Parameters) for more information.
 
 1.  Refresh the Chrome tab in which you are viewing your live app
     and click the **Send notification** button.
@@ -266,7 +267,7 @@ You've also seen what impact user responses have on your app's ability to displa
 
 Now you can experiment with the many visual and data options available when creating a notification.
 The full set of available options is below.
-(See the [Notification documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Notification) for more information on these options.)
+(See the [Notification documentation on MDN](https://developer.mozilla.org/docs/Web/API/Notification) for more information on these options.)
 
 Note that browsers and devices implement these options differently,
 so it's worth testing your notifications on different platforms to see how they look.
diff --git a/src/site/content/en/notifications/codelab-notifications-get-started/live-app-new-tab.png b/src/site/content/en/notifications/codelab-notifications-get-started/live-app-new-tab.png
deleted file mode 100644
index 7334d66b2ad..00000000000
Binary files a/src/site/content/en/notifications/codelab-notifications-get-started/live-app-new-tab.png and /dev/null differ
diff --git a/src/site/content/en/notifications/codelab-notifications-get-started/remix-to-edit.png b/src/site/content/en/notifications/codelab-notifications-get-started/remix-to-edit.png
deleted file mode 100644
index 1edca0fed71..00000000000
Binary files a/src/site/content/en/notifications/codelab-notifications-get-started/remix-to-edit.png and /dev/null differ
diff --git a/src/site/content/en/notifications/codelab-notifications-push-server/index.md b/src/site/content/en/notifications/codelab-notifications-push-server/index.md
index 564a27773fa..1cf6181381c 100644
--- a/src/site/content/en/notifications/codelab-notifications-push-server/index.md
+++ b/src/site/content/en/notifications/codelab-notifications-push-server/index.md
@@ -392,7 +392,7 @@ In your implementation, this handler must:
 * Access the database of active subscriptions.
 * Remove the cancelled subscription from the list of active subscriptions.
 
-The body of the POST request from the client contains the endpoint that yoou need to remove:
+The body of the POST request from the client contains the endpoint that you need to remove:
 
 ```json
 {
diff --git a/src/site/content/en/notifications/codelab-notifications-service-worker/index.md b/src/site/content/en/notifications/codelab-notifications-service-worker/index.md
index 2b7631c9df9..3e9b37ad36e 100644
--- a/src/site/content/en/notifications/codelab-notifications-service-worker/index.md
+++ b/src/site/content/en/notifications/codelab-notifications-service-worker/index.md
@@ -29,7 +29,7 @@ The instructions here assume that you're already familiar with
 service workers and the basics of requesting notification permission and sending notifications.
 If you need a refresher on notifications, see the
 [Get started with the Notifications API](/codelab-notifications-get-started)
-codelab. To learn more about service workers, see Matt Gaunt's [Introduction to service workers](https://developers.google.com/web/fundamentals/primers/service-workers).
+codelab. To learn more about service workers, see Matt Gaunt's [Introduction to service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/).
 
 ## Remix the sample app and view it in a new tab
 
@@ -74,7 +74,7 @@ Now let's take a look at the sample app's code in the embedded Glitch on this pa
 1.  In the embedded Glitch, open `public/service-worker.js`.
 
     As the name suggests, you'll add code to the app to register this file as a
-    [service worker](https://developers.google.com/web/fundamentals/primers/service-workers).
+    [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/).
 
     Although the file is not yet in use by the app, it contains some starting code that will print a message to the console when the service worker is activated.
 
@@ -105,7 +105,7 @@ For the purposes of this codelab, you'll build an app that you can play with and
     }
     ```
 
-    Note that `registerServiceWorker` uses the [`async function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) declaration to make handling promises more convenient. This lets you `await` the resolved value of a `Promise`. For example, the function above awaits the outcome of registering a service worker before updating the UI. See [`await` on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) for more information.
+    Note that `registerServiceWorker` uses the [`async function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) declaration to make handling promises more convenient. This lets you `await` the resolved value of a `Promise`. For example, the function above awaits the outcome of registering a service worker before updating the UI. See [`await` on MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await) for more information.
 
 1.  Now that the user can register a service worker, you can get a reference to the service worker registration object. In `public/index.js`, replace the `getRegistration` function with the following code:
 
@@ -117,7 +117,7 @@ For the purposes of this codelab, you'll build an app that you can play with and
     ```
 
     The function above uses the
-    [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+    [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
     to get the current service worker registration, if it exists.
     It makes getting a reference to the service worker registration a bit more convenient.
 
@@ -174,9 +174,9 @@ Here's what that code is doing:
 
 *   `sendNotification` is an asynchronous function, so you can use `await` to get a reference to the service worker registration.
 
-*   The service worker's `postMessage` method sends data from the app to the service worker. See the [MDN documentation on  postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage) for more information.
+*   The service worker's `postMessage` method sends data from the app to the service worker. See the [MDN documentation on  postMessage](https://developer.mozilla.org/docs/Web/API/Worker/postMessage) for more information.
 
-*   The code checks for the presence of the `navigator.serviceWorker.controller` property before trying to access the `postMessage` function. `navigator.serviceWorker.controller` will be `null` if there is no active service worker, or if the page has been force refreshed (`Shift+`**Reload**). See the [ServiceWorker controller documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/controller) for more information.
+*   The code checks for the presence of the `navigator.serviceWorker.controller` property before trying to access the `postMessage` function. `navigator.serviceWorker.controller` will be `null` if there is no active service worker, or if the page has been force refreshed (`Shift+`**Reload**). See the [ServiceWorker controller documentation on MDN](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/controller) for more information.
 
 ## Handle notifications in the service worker
 
diff --git a/src/site/content/en/notifications/index.md b/src/site/content/en/notifications/index.md
new file mode 100644
index 00000000000..bd7c6596f43
--- /dev/null
+++ b/src/site/content/en/notifications/index.md
@@ -0,0 +1,4 @@
+---
+layout: collection
+pathName: notifications
+---
\ No newline at end of file
diff --git a/src/site/content/en/notifications/index.njk b/src/site/content/en/notifications/index.njk
deleted file mode 100644
index 479a8d3d724..00000000000
--- a/src/site/content/en/notifications/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-pathName: notifications
-tags:
-  - notifications
----
\ No newline at end of file
diff --git a/src/site/content/en/notifications/use-push-notifications-to-engage-users/index.md b/src/site/content/en/notifications/use-push-notifications-to-engage-users/index.md
index 473aa26f1e3..04e31e33b22 100644
--- a/src/site/content/en/notifications/use-push-notifications-to-engage-users/index.md
+++ b/src/site/content/en/notifications/use-push-notifications-to-engage-users/index.md
@@ -20,23 +20,23 @@ Notifications present small chunks of information to a user. Web apps can use no
 
 The look-and-feel of notifications varies between platforms. For example:
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./predicaments-android.png" alt="">
-  <figcaption class="w-figcaption">A notification on an Android device.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3wEi4F7iuNrg2kL85aMI.png", alt="", width="800", height="209" %}
+  <figcaption>A notification on an Android device.</figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./predicaments-macbook.png" alt="">
-  <figcaption class="w-figcaption">A notification on a MacBook.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ho6Nf5CcftL4AmLzoHZ8.png", alt="", width="675", height="124" %}
+  <figcaption>A notification on a MacBook.</figcaption>
 </figure>
 
-Traditionally, web browsers had to initiate the exchange of information between server and client by making a request. [Web push technology](https://developer.mozilla.org/en-US/docs/Web/API/Push_API), on the other hand, lets you configure your server to send notifications when it makes sense for your app. A push service creates unique URLs for each subscribed service worker. Sending messages to a service worker's URL raises events on that service worker, prompting it to display a notification.
+Traditionally, web browsers had to initiate the exchange of information between server and client by making a request. [Web push technology](https://developer.mozilla.org/docs/Web/API/Push_API), on the other hand, lets you configure your server to send notifications when it makes sense for your app. A push service creates unique URLs for each subscribed service worker. Sending messages to a service worker's URL raises events on that service worker, prompting it to display a notification.
 
 Push notifications can help users to get the most out of your app by prompting them to re-open it and use it based on the latest information.
 
 ## Creating and sending notifications
 
-Create notifications using the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API). A `Notification` object has a `title` string and an `options` object. For example:
+Create notifications using the [Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API). A `Notification` object has a `title` string and an `options` object. For example:
 
 ```js
 let title = 'Hi!';
@@ -69,7 +69,7 @@ Bring up the permission prompt **in response to a user gesture** and **when the
 
 The real power of notifications comes from the combination of service workers and push technology:
 
-*   [Service workers](https://developers.google.com/web/fundamentals/primers/service-workers) can run in the background and display notifications even when your app isn't visible on screen.
+*   [Service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) can run in the background and display notifications even when your app isn't visible on screen.
 
 *   Push technology lets you configure your server to send notifications when it makes sense for your app. A push service creates unique URLs for each subscribed service worker. Sending messages to a service worker's URL raises events on that service worker, prompting it to display a notification.
 
diff --git a/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-android.png b/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-android.png
deleted file mode 100644
index 074e9f65665..00000000000
Binary files a/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-android.png and /dev/null differ
diff --git a/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-macbook.png b/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-macbook.png
deleted file mode 100644
index 98373871c7c..00000000000
Binary files a/src/site/content/en/notifications/use-push-notifications-to-engage-users/predicaments-macbook.png and /dev/null differ
diff --git a/src/site/content/en/offline.md b/src/site/content/en/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/en/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/en/offline.njk b/src/site/content/en/offline.njk
deleted file mode 100644
index 0791d4b31a9..00000000000
--- a/src/site/content/en/offline.njk
+++ /dev/null
@@ -1,17 +0,0 @@
----
-layout: layout
-title: Offline
-description: |
-  Network Offline
-noindex: true
-offline: true
----
-
-<div class="w-layout-container--large">
-  <header class="w-page-header">
-    <h1 class="w-page-header__headline w-code">{{ title }}</h1>
-    <p class="w-page-header__copy">
-      There is no Internet connection. We'll try to reload automatically once you're back online! 📶
-    </p>
-  </header>
-</div>
diff --git a/src/site/content/en/patterns/animation/animated-letters/assets/body.html b/src/site/content/en/patterns/animation/animated-letters/assets/body.html
new file mode 100644
index 00000000000..845a578f610
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-letters/assets/body.html
@@ -0,0 +1,3 @@
+<h1 split-by="letter" letter-animation="breath">
+  animated letters
+</h1>
diff --git a/src/site/content/en/patterns/animation/animated-letters/assets/script.js b/src/site/content/en/patterns/animation/animated-letters/assets/script.js
new file mode 100644
index 00000000000..0ae168485f6
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-letters/assets/script.js
@@ -0,0 +1,26 @@
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+  
+  return node
+}
+
+const byLetter = text =>
+  [...text].map(span)
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+if (motionOK) {
+  const splitTargets = document.querySelectorAll('[split-by]')
+
+  splitTargets.forEach(node => {
+    let nodes = byLetter(node.innerText)
+
+    if (nodes)
+      node.firstChild.replaceWith(...nodes)
+  })
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/animated-letters/assets/style.css b/src/site/content/en/patterns/animation/animated-letters/assets/style.css
new file mode 100644
index 00000000000..6d72e2249cf
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-letters/assets/style.css
@@ -0,0 +1,32 @@
+@keyframes breath {
+  from {
+    animation-timing-function: ease-out;
+  }
+
+  to {
+    transform: scale(1.25) translateY(-5px) perspective(1px);
+    text-shadow: 0 0 40px var(--glow-color);
+    animation-timing-function: ease-in-out;
+  }
+}
+
+@media (prefers-reduced-motion:no-preference) {
+  [letter-animation] > span {
+    display: inline-block;
+    white-space: break-spaces;
+  }
+
+  [letter-animation=breath] {
+    --glow-color: white;
+  }
+
+  [letter-animation=breath]>span {
+    animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;
+  }
+}
+
+@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme: light) {
+  [letter-animation=breath] {
+    --glow-color: black;
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/animated-letters/demo.njk b/src/site/content/en/patterns/animation/animated-letters/demo.njk
new file mode 100644
index 00000000000..f7babd0a86a
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-letters/demo.njk
@@ -0,0 +1,22 @@
+---
+patternId: animation/animated-letters
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{height:100%;width:100%;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;-ms-scroll-snap-type:y;scroll-snap-type:y}html>body>section{scroll-snap-align:center}body{min-height:100%;min-width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15vh 2vh}section{height:70vh;display:inline-flex;align-items:center;justify-content:center}h1{font-weight:100;letter-spacing:.25em;text-transform:uppercase;--scalar:2vw;font-size:clamp(1.5rem,calc(1rem + var(--scalar)),8rem)}@media (min-width:481px){h1{--scalar:4vw}}p{font-weight:lighter;line-height:1.25;max-width:20ch;font-size:clamp(1.25rem,calc(1rem + 3vw),3rem)}@media (prefers-reduced-motion:no-preference){[letter-animation]>span{display:inline-block;white-space:break-spaces}[letter-animation=breath]{--glow-color:white}[letter-animation=breath]>span{-webkit-animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme:light){[letter-animation=breath]{--glow-color:black}}@media (prefers-reduced-motion:no-preference){[letter-animation=hover]:hover>span{transform:scale(.75) perspective(1px)}[letter-animation=hover]>span{transition:transform .3s ease;cursor:pointer;will-change:transform}[letter-animation=hover]>span:hover{transform:scale(1.25) perspective(1px)}}@media (prefers-reduced-motion:no-preference){[word-animation]{display:inline-flex;flex-wrap:wrap;gap:1ch}[word-animation=trampoline]>span{display:inline-block;transform:translateY(100%);-webkit-animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (hover){[word-animation=hover]{overflow:hidden;overflow:clip}[word-animation=hover]>span{transition:transform .3s ease;cursor:pointer}[word-animation=hover]>span:not(:hover){transform:translateY(50%)}}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@-webkit-keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@-webkit-keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
+    </style>
+  </head>
+  <body>
+    <h1 split-by="letter" letter-animation="breath">animated letters</h1>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(r){const o=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((r,c)=>{const l=new URL(e,o);if(self[t].moduleMap[l])return r(self[t].moduleMap[l]);const s=new Blob([`import * as m from '${l}';`,`${t}.moduleMap['${l}']=m;`],{type:"text/javascript"}),a=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(s),onerror(){c(new Error(`Failed to import: ${e}`)),n(a)},onload(){r(self[t].moduleMap[l]),n(a)}});document.head.appendChild(a)})),self[t].moduleMap={}}}("assets/");const e=(e,t)=>{const r=document.createElement("span");return r.textContent=e,r.style.setProperty("--index",t),r},{matches:t}=window.matchMedia("(prefers-reduced-motion: no-preference)");if(t){document.querySelectorAll("[split-by]").forEach((t=>{const r=t.getAttribute("split-by");let o=null;var n;"letter"===r?(n=t.innerText,o=[...n].map(e)):"word"===r&&(o=(t=>t.split(" ").map(e))(t.innerText)),o&&t.firstChild.replaceWith(...o)}))}
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/animation/animated-letters/index.md b/src/site/content/en/patterns/animation/animated-letters/index.md
new file mode 100644
index 00000000000..02e35700527
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-letters/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern
+title: Split Text - Animated Letters
+description: |
+  This pattern shows how to create infinitely animated letter effects that respect user's motion preferences.
+  <br><br>
+  <a href="/building-split-text-animations/">Full article</a> · <a href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+Create infinitely animated letter effects that respect
+user's motion preferences.
+
+<a href="/building-split-text-animations/">Full article</a> · <a
+href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a
+href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source
+on Github</a>
diff --git a/src/site/content/en/patterns/animation/animated-words/assets/body.html b/src/site/content/en/patterns/animation/animated-words/assets/body.html
new file mode 100644
index 00000000000..a9db1acd7b9
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-words/assets/body.html
@@ -0,0 +1,3 @@
+<p split-by="word" word-animation="trampoline">
+  split a paragraph of content 🤘💀
+</p>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/animated-words/assets/script.js b/src/site/content/en/patterns/animation/animated-words/assets/script.js
new file mode 100644
index 00000000000..e7b21aedf06
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-words/assets/script.js
@@ -0,0 +1,26 @@
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+  
+  return node
+}
+
+export const byWord = text =>
+  text.split(' ').map(span)
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+if (motionOK) {
+  const splitTargets = document.querySelectorAll('[split-by]')
+
+  splitTargets.forEach(node => {
+    let nodes = byWord(node.innerText)
+
+    if (nodes)
+      node.firstChild.replaceWith(...nodes)
+  })
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/animated-words/assets/style.css b/src/site/content/en/patterns/animation/animated-words/assets/style.css
new file mode 100644
index 00000000000..2031c8ae3ee
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-words/assets/style.css
@@ -0,0 +1,25 @@
+@keyframes trampoline {
+  0% {
+    transform: translateY(100%);
+    animation-timing-function: ease-out
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: ease-in
+  }
+}
+
+@media (prefers-reduced-motion:no-preference) {
+  [word-animation] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 1ch
+  }
+
+  [word-animation=trampoline]>span {
+    display: inline-block;
+    transform: translateY(100%);
+    animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/animated-words/demo.njk b/src/site/content/en/patterns/animation/animated-words/demo.njk
new file mode 100644
index 00000000000..febc1dac635
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-words/demo.njk
@@ -0,0 +1,22 @@
+---
+patternId: animation/animated-words
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{height:100%;width:100%;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;-ms-scroll-snap-type:y;scroll-snap-type:y}html>body>section{scroll-snap-align:center}body{min-height:100%;min-width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15vh 2vh}section{height:70vh;display:inline-flex;align-items:center;justify-content:center}h1{font-weight:100;letter-spacing:.25em;text-transform:uppercase;--scalar:2vw;font-size:clamp(1.5rem,calc(1rem + var(--scalar)),8rem)}@media (min-width:481px){h1{--scalar:4vw}}p{font-weight:lighter;line-height:1.25;max-width:20ch;font-size:clamp(1.25rem,calc(1rem + 3vw),3rem)}@media (prefers-reduced-motion:no-preference){[letter-animation]>span{display:inline-block;white-space:break-spaces}[letter-animation=breath]{--glow-color:white}[letter-animation=breath]>span{-webkit-animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme:light){[letter-animation=breath]{--glow-color:black}}@media (prefers-reduced-motion:no-preference){[letter-animation=hover]:hover>span{transform:scale(.75) perspective(1px)}[letter-animation=hover]>span{transition:transform .3s ease;cursor:pointer;will-change:transform}[letter-animation=hover]>span:hover{transform:scale(1.25) perspective(1px)}}@media (prefers-reduced-motion:no-preference){[word-animation]{display:inline-flex;flex-wrap:wrap;gap:1ch}[word-animation=trampoline]>span{display:inline-block;transform:translateY(100%);-webkit-animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (hover){[word-animation=hover]{overflow:hidden;overflow:clip}[word-animation=hover]>span{transition:transform .3s ease;cursor:pointer}[word-animation=hover]>span:not(:hover){transform:translateY(50%)}}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@-webkit-keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@-webkit-keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
+    </style>
+  </head>
+  <body>
+    <p split-by="word" word-animation="trampoline">split a paragraph of content 🤘💀</p>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(r){const o=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((r,c)=>{const l=new URL(e,o);if(self[t].moduleMap[l])return r(self[t].moduleMap[l]);const s=new Blob([`import * as m from '${l}';`,`${t}.moduleMap['${l}']=m;`],{type:"text/javascript"}),a=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(s),onerror(){c(new Error(`Failed to import: ${e}`)),n(a)},onload(){r(self[t].moduleMap[l]),n(a)}});document.head.appendChild(a)})),self[t].moduleMap={}}}("assets/");const e=(e,t)=>{const r=document.createElement("span");return r.textContent=e,r.style.setProperty("--index",t),r},{matches:t}=window.matchMedia("(prefers-reduced-motion: no-preference)");if(t){document.querySelectorAll("[split-by]").forEach((t=>{const r=t.getAttribute("split-by");let o=null;var n;"letter"===r?(n=t.innerText,o=[...n].map(e)):"word"===r&&(o=(t=>t.split(" ").map(e))(t.innerText)),o&&t.firstChild.replaceWith(...o)}))}
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/animation/animated-words/index.md b/src/site/content/en/patterns/animation/animated-words/index.md
new file mode 100644
index 00000000000..5ee7585c2e5
--- /dev/null
+++ b/src/site/content/en/patterns/animation/animated-words/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern
+title: Split Text - Animated Words
+description: |
+  This pattern shows how to create infinitely animated word effects that respect user's motion preferences.
+  <br><br>
+  <a href="/building-split-text-animations/">Full article</a> · <a href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+Create infinitely animated word effects that respect
+user's motion preferences.
+
+<a href="/building-split-text-animations/">Full article</a> · <a
+href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a
+href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source
+on Github</a>
diff --git a/src/site/content/en/patterns/animation/index.md b/src/site/content/en/patterns/animation/index.md
new file mode 100644
index 00000000000..c8c2ff5ab77
--- /dev/null
+++ b/src/site/content/en/patterns/animation/index.md
@@ -0,0 +1,12 @@
+---
+layout: pattern-set
+title: Animation patterns
+description: A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KL7dFk9XKx5PVUzXT2hb.svg
+---
+
+Welcome to our growing collection of animation patterns. These patterns try to
+demonstrate how you can create engaging animations and interactions while still
+respecting user's preferences for motion. They also support all modern browsers,
+so you can use them with confidence.
+<br><br>
diff --git a/src/site/content/en/patterns/animation/interactive-letters/assets/body.html b/src/site/content/en/patterns/animation/interactive-letters/assets/body.html
new file mode 100644
index 00000000000..78ec3696001
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-letters/assets/body.html
@@ -0,0 +1,3 @@
+<h1 split-by="letter" letter-animation="hover">
+  hover-me letters
+</h1>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-letters/assets/script.js b/src/site/content/en/patterns/animation/interactive-letters/assets/script.js
new file mode 100644
index 00000000000..0ae168485f6
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-letters/assets/script.js
@@ -0,0 +1,26 @@
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+  
+  return node
+}
+
+const byLetter = text =>
+  [...text].map(span)
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+if (motionOK) {
+  const splitTargets = document.querySelectorAll('[split-by]')
+
+  splitTargets.forEach(node => {
+    let nodes = byLetter(node.innerText)
+
+    if (nodes)
+      node.firstChild.replaceWith(...nodes)
+  })
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-letters/assets/style.css b/src/site/content/en/patterns/animation/interactive-letters/assets/style.css
new file mode 100644
index 00000000000..e48f3fcb5c9
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-letters/assets/style.css
@@ -0,0 +1,15 @@
+@media (prefers-reduced-motion:no-preference) {
+  [letter-animation=hover]:hover>span {
+    transform: scale(.75) perspective(1px)
+  }
+
+  [letter-animation=hover]>span {
+    transition: transform .3s ease;
+    cursor: pointer;
+    will-change: transform
+  }
+
+  [letter-animation=hover]>span:hover {
+    transform: scale(1.25) perspective(1px)
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-letters/demo.njk b/src/site/content/en/patterns/animation/interactive-letters/demo.njk
new file mode 100644
index 00000000000..f157109ac51
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-letters/demo.njk
@@ -0,0 +1,22 @@
+---
+patternId: animation/interactive-letters
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{height:100%;width:100%;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;-ms-scroll-snap-type:y;scroll-snap-type:y}html>body>section{scroll-snap-align:center}body{min-height:100%;min-width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15vh 2vh}section{height:70vh;display:inline-flex;align-items:center;justify-content:center}h1{font-weight:100;letter-spacing:.25em;text-transform:uppercase;--scalar:2vw;font-size:clamp(1.5rem,calc(1rem + var(--scalar)),8rem)}@media (min-width:481px){h1{--scalar:4vw}}p{font-weight:lighter;line-height:1.25;max-width:20ch;font-size:clamp(1.25rem,calc(1rem + 3vw),3rem)}@media (prefers-reduced-motion:no-preference){[letter-animation]>span{display:inline-block;white-space:break-spaces}[letter-animation=breath]{--glow-color:white}[letter-animation=breath]>span{-webkit-animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme:light){[letter-animation=breath]{--glow-color:black}}@media (prefers-reduced-motion:no-preference){[letter-animation=hover]:hover>span{transform:scale(.75) perspective(1px)}[letter-animation=hover]>span{transition:transform .3s ease;cursor:pointer;will-change:transform}[letter-animation=hover]>span:hover{transform:scale(1.25) perspective(1px)}}@media (prefers-reduced-motion:no-preference){[word-animation]{display:inline-flex;flex-wrap:wrap;gap:1ch}[word-animation=trampoline]>span{display:inline-block;transform:translateY(100%);-webkit-animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (hover){[word-animation=hover]{overflow:hidden;overflow:clip}[word-animation=hover]>span{transition:transform .3s ease;cursor:pointer}[word-animation=hover]>span:not(:hover){transform:translateY(50%)}}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@-webkit-keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@-webkit-keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
+    </style>
+  </head>
+  <body>
+    <h1 split-by="letter" letter-animation="hover">hover-me letters</h1>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(r){const o=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((r,c)=>{const l=new URL(e,o);if(self[t].moduleMap[l])return r(self[t].moduleMap[l]);const s=new Blob([`import * as m from '${l}';`,`${t}.moduleMap['${l}']=m;`],{type:"text/javascript"}),a=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(s),onerror(){c(new Error(`Failed to import: ${e}`)),n(a)},onload(){r(self[t].moduleMap[l]),n(a)}});document.head.appendChild(a)})),self[t].moduleMap={}}}("assets/");const e=(e,t)=>{const r=document.createElement("span");return r.textContent=e,r.style.setProperty("--index",t),r},{matches:t}=window.matchMedia("(prefers-reduced-motion: no-preference)");if(t){document.querySelectorAll("[split-by]").forEach((t=>{const r=t.getAttribute("split-by");let o=null;var n;"letter"===r?(n=t.innerText,o=[...n].map(e)):"word"===r&&(o=(t=>t.split(" ").map(e))(t.innerText)),o&&t.firstChild.replaceWith(...o)}))}
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/animation/interactive-letters/index.md b/src/site/content/en/patterns/animation/interactive-letters/index.md
new file mode 100644
index 00000000000..7ca2b4d0351
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-letters/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern
+title: Split Text - Hover Letters
+description: |
+  This pattern shows how to create interactive letter effects that respect user's motion preferences.
+  <br><br>
+  <a href="/building-split-text-animations/">Full article</a> · <a href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+Create interactive letter effects that respect
+user's motion preferences.
+
+<a href="/building-split-text-animations/">Full article</a> · <a
+href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a
+href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source
+on Github</a>
diff --git a/src/site/content/en/patterns/animation/interactive-words/assets/body.html b/src/site/content/en/patterns/animation/interactive-words/assets/body.html
new file mode 100644
index 00000000000..d8dec08bc16
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-words/assets/body.html
@@ -0,0 +1,3 @@
+<h1 split-by="word" word-animation="hover">
+  hover the words
+</h1>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-words/assets/script.js b/src/site/content/en/patterns/animation/interactive-words/assets/script.js
new file mode 100644
index 00000000000..e7b21aedf06
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-words/assets/script.js
@@ -0,0 +1,26 @@
+const span = (text, index) => {
+  const node = document.createElement('span')
+
+  node.textContent = text
+  node.style.setProperty('--index', index)
+  
+  return node
+}
+
+export const byWord = text =>
+  text.split(' ').map(span)
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+if (motionOK) {
+  const splitTargets = document.querySelectorAll('[split-by]')
+
+  splitTargets.forEach(node => {
+    let nodes = byWord(node.innerText)
+
+    if (nodes)
+      node.firstChild.replaceWith(...nodes)
+  })
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-words/assets/style.css b/src/site/content/en/patterns/animation/interactive-words/assets/style.css
new file mode 100644
index 00000000000..0bf64826667
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-words/assets/style.css
@@ -0,0 +1,23 @@
+@media (prefers-reduced-motion:no-preference) {
+  [word-animation] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 1ch
+  }
+}
+
+@media (prefers-reduced-motion:no-preference) and (hover) {
+  [word-animation=hover] {
+    overflow: hidden;
+    overflow: clip
+  }
+
+  [word-animation=hover]>span {
+    transition: transform .3s ease;
+    cursor: pointer
+  }
+
+  [word-animation=hover]>span:not(:hover) {
+    transform: translateY(50%)
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/animation/interactive-words/demo.njk b/src/site/content/en/patterns/animation/interactive-words/demo.njk
new file mode 100644
index 00000000000..0d10136dd7b
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-words/demo.njk
@@ -0,0 +1,22 @@
+---
+patternId: animation/interactive-words
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{height:100%;width:100%;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;-ms-scroll-snap-type:y;scroll-snap-type:y}html>body>section{scroll-snap-align:center}body{min-height:100%;min-width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15vh 2vh}section{height:70vh;display:inline-flex;align-items:center;justify-content:center}h1{font-weight:100;letter-spacing:.25em;text-transform:uppercase;--scalar:2vw;font-size:clamp(1.5rem,calc(1rem + var(--scalar)),8rem)}@media (min-width:481px){h1{--scalar:4vw}}p{font-weight:lighter;line-height:1.25;max-width:20ch;font-size:clamp(1.25rem,calc(1rem + 3vw),3rem)}@media (prefers-reduced-motion:no-preference){[letter-animation]>span{display:inline-block;white-space:break-spaces}[letter-animation=breath]{--glow-color:white}[letter-animation=breath]>span{-webkit-animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;animation:breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme:light){[letter-animation=breath]{--glow-color:black}}@media (prefers-reduced-motion:no-preference){[letter-animation=hover]:hover>span{transform:scale(.75) perspective(1px)}[letter-animation=hover]>span{transition:transform .3s ease;cursor:pointer;will-change:transform}[letter-animation=hover]>span:hover{transform:scale(1.25) perspective(1px)}}@media (prefers-reduced-motion:no-preference){[word-animation]{display:inline-flex;flex-wrap:wrap;gap:1ch}[word-animation=trampoline]>span{display:inline-block;transform:translateY(100%);-webkit-animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate;animation:trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate}}@media (prefers-reduced-motion:no-preference) and (hover){[word-animation=hover]{overflow:hidden;overflow:clip}[word-animation=hover]>span{transition:transform .3s ease;cursor:pointer}[word-animation=hover]>span:not(:hover){transform:translateY(50%)}}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@-webkit-keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@keyframes breath{from{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{transform:scale(1.25) translateY(-5px) perspective(1px);text-shadow:0 0 40px var(--glow-color);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}}@-webkit-keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes trampoline{0%{transform:translateY(100%);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:translateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
+    </style>
+  </head>
+  <body>
+    <h1 split-by="word" word-animation="hover">hover the words</h1>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(r){const o=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((r,c)=>{const l=new URL(e,o);if(self[t].moduleMap[l])return r(self[t].moduleMap[l]);const s=new Blob([`import * as m from '${l}';`,`${t}.moduleMap['${l}']=m;`],{type:"text/javascript"}),a=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(s),onerror(){c(new Error(`Failed to import: ${e}`)),n(a)},onload(){r(self[t].moduleMap[l]),n(a)}});document.head.appendChild(a)})),self[t].moduleMap={}}}("assets/");const e=(e,t)=>{const r=document.createElement("span");return r.textContent=e,r.style.setProperty("--index",t),r},{matches:t}=window.matchMedia("(prefers-reduced-motion: no-preference)");if(t){document.querySelectorAll("[split-by]").forEach((t=>{const r=t.getAttribute("split-by");let o=null;var n;"letter"===r?(n=t.innerText,o=[...n].map(e)):"word"===r&&(o=(t=>t.split(" ").map(e))(t.innerText)),o&&t.firstChild.replaceWith(...o)}))}
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/animation/interactive-words/index.md b/src/site/content/en/patterns/animation/interactive-words/index.md
new file mode 100644
index 00000000000..16a6cf14372
--- /dev/null
+++ b/src/site/content/en/patterns/animation/interactive-words/index.md
@@ -0,0 +1,17 @@
+---
+layout: pattern
+title: Split Text - Hover Words
+description: |
+  This pattern shows how to create interactive word effects that respect user's motion preferences.
+  <br><br>
+  <a href="/building-split-text-animations/">Full article</a> · <a href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+Create interactive word effects that respect user's motion preferences.
+
+<a href="/building-split-text-animations/">Full article</a> · <a
+href="https://www.youtube.com/watch?v=3hvN7bkjZBk">Video on YouTube</a> · <a
+href="https://github.com/argyleink/gui-challenges/tree/main/split-text">Source
+on Github</a>
diff --git a/src/site/content/en/patterns/clipboard/copy-images/assets/body.html b/src/site/content/en/patterns/clipboard/copy-images/assets/body.html
new file mode 100644
index 00000000000..28e04bf5b7f
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/assets/body.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to copy images</title>
+  </head>
+  <body>
+    <h1>How to copy images</h1>
+    <img src="assets/fugu.svg" alt="Fugu fish." width="128" height="128">
+    <button type="button">Copy</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.png b/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.png differ
diff --git a/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.svg b/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/assets/fugu.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/clipboard/copy-images/assets/script.js b/src/site/content/en/patterns/clipboard/copy-images/assets/script.js
new file mode 100644
index 00000000000..c04fe1c7831
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/assets/script.js
@@ -0,0 +1,26 @@
+const button = document.querySelector('button');
+const img = document.querySelector('img');
+
+button.addEventListener('click', async () => {
+  const responsePromise = fetch(img.src);
+
+  try {
+    if ('write' in navigator.clipboard) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/svg+xml': new Promise(async (resolve) => {
+            const blob = await responsePromise.then(response => response.blob());
+            resolve(blob);
+          }),
+        }),
+      ]);
+      // Image copied as image.
+    } else {
+      const text = await responsePromise.then(response => response.text());
+      await navigator.clipboard.writeText(text);
+      // Image copied as source code.
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
diff --git a/src/site/content/en/patterns/clipboard/copy-images/assets/style.css b/src/site/content/en/patterns/clipboard/copy-images/assets/style.css
new file mode 100644
index 00000000000..fdd34db3888
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/assets/style.css
@@ -0,0 +1,22 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+button {
+  display: block;
+}
diff --git a/src/site/content/en/patterns/clipboard/copy-images/demo.njk b/src/site/content/en/patterns/clipboard/copy-images/demo.njk
new file mode 100644
index 00000000000..1db1337d478
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/demo.njk
@@ -0,0 +1,80 @@
+---
+patternId: clipboard/copy-images
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to copy images</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to copy images</h1>
+    <img src="assets/fugu.svg" alt="Fugu fish." width="128" height="128">
+    <button type="button">Copy</button>
+
+    {% set script %}
+      const button = document.querySelector('button');
+      const img = document.querySelector('img');
+
+      button.addEventListener('click', async () => {
+        const responsePromise = fetch(img.src);
+        const responsePromise2 = fetch(img.src.replace('.svg', '.png'));
+
+        try {
+          if ('write' in navigator.clipboard) {
+            await navigator.clipboard.write([
+              new ClipboardItem({
+                'image/svg+xml': new Promise(async (resolve) => {
+                  const blob = await responsePromise.then(response => response.blob());
+                  resolve(blob);
+                }),
+                'image/png': new Promise(async (resolve) => {
+                  const blob = await responsePromise2.then(response => response.blob());
+                  resolve(blob);
+                }),
+              }),
+            ]);
+            // Image copied as image.
+          } else {
+            const text = await responsePromise.then(response => response.text());
+            await navigator.clipboard.writeText(text);
+            // Image copied as source code.
+          }
+        } catch (err) {
+          console.error(err.name, err.message);
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/copy-images/fugu.png b/src/site/content/en/patterns/clipboard/copy-images/fugu.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/clipboard/copy-images/fugu.png differ
diff --git a/src/site/content/en/patterns/clipboard/copy-images/fugu.svg b/src/site/content/en/patterns/clipboard/copy-images/fugu.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/fugu.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/clipboard/copy-images/index.md b/src/site/content/en/patterns/clipboard/copy-images/index.md
new file mode 100644
index 00000000000..c32d2fc12a6
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-images/index.md
@@ -0,0 +1,69 @@
+---
+layout: pattern
+title: How to copy images
+subhead: Learn how to copy images to the clipboard.
+description: Learn how to copy images to the clipboard.
+date: 2022-10-10
+authors:
+  - thomassteiner
+height: 800
+static:
+  - assets/fugu.png
+  - assets/fugu.svg
+---
+
+Many modern browsers support copying images to the clipboard in the formats PNG and SVG. Other formats are not yet supported for security reasons.
+
+## The modern way
+
+### Using the Async Clipboard API
+
+The [`Clipboard.write()`](​​https://developer.mozilla.org/docs/Web/API/Clipboard/write) method takes an array of [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem) objects and returns a Promise that resolves when the image is successfully written to the clipboard. `Clipboard.write()` can only be used from the `window` object that has focus.
+
+{% BrowserCompat 'api.Clipboard.write' %}
+
+## The classic way
+
+### Using `navigator.clipboard.writeText()`
+
+While not all browsers support `navigator.clipboard.write()` for binary data
+yet, they all support `navigator.clipboard.writeText()`. If you want to copy
+an SVG image, instead of copying the image itself, you can copy the SVG source code. For PNG images, you are unfortunately out of luck.
+
+{% BrowserCompat 'api.Clipboard.writeText' %}
+
+## Progressive enhancement
+
+```js
+const button = document.querySelector('button');
+const img = document.querySelector('img');
+
+button.addEventListener('click', async () => {
+  const responsePromise = fetch(img.src);
+  try {
+    if ('write' in navigator.clipboard) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/svg+xml': new Promise(async (resolve) => {
+            const blob = await responsePromise.then(response => response.blob());
+            resolve(blob);
+          }),
+        }),
+      ]);
+      // Image copied as image.
+    } else {
+      const text = await responsePromise.then(response => response.text());
+      await navigator.clipboard.writeText(text);
+      // Image copied as source code.
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+```
+
+## Further reading
+
+- [Unblocking clipboard access](/async-clipboard/)
+
+## Demo
diff --git a/src/site/content/en/patterns/clipboard/copy-text/assets/body.html b/src/site/content/en/patterns/clipboard/copy-text/assets/body.html
new file mode 100644
index 00000000000..419a5ab7bf1
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-text/assets/body.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to copy text</title>
+  </head>
+  <body>
+    <h1>How to copy text</h1>
+    <textarea rows="3">
+Some sample text for you to copy. Feel free to edit this.</textarea
+    >
+    <button type="button">Copy</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/copy-text/assets/script.js b/src/site/content/en/patterns/clipboard/copy-text/assets/script.js
new file mode 100644
index 00000000000..6a96f1ad13c
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-text/assets/script.js
@@ -0,0 +1,10 @@
+const textarea = document.querySelector('textarea');
+const button = document.querySelector('button');
+
+button.addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(textarea.value);
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
diff --git a/src/site/content/en/patterns/clipboard/copy-text/assets/style.css b/src/site/content/en/patterns/clipboard/copy-text/assets/style.css
new file mode 100644
index 00000000000..fdd34db3888
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-text/assets/style.css
@@ -0,0 +1,22 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+button {
+  display: block;
+}
diff --git a/src/site/content/en/patterns/clipboard/copy-text/demo.njk b/src/site/content/en/patterns/clipboard/copy-text/demo.njk
new file mode 100644
index 00000000000..b91dd6b1459
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-text/demo.njk
@@ -0,0 +1,61 @@
+---
+patternId: clipboard/copy-text
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to copy text</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to copy text</h1>
+    <textarea rows="3">
+Some sample text for you to copy. Feel free to edit this.</textarea
+    >
+    <button type="button">Copy</button>
+
+    {% set script %}
+      const textarea = document.querySelector('textarea');
+      const button = document.querySelector('button');
+
+      button.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(textarea.value);
+        } catch (err) {
+          console.error(err.name, err.message);
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/copy-text/index.md b/src/site/content/en/patterns/clipboard/copy-text/index.md
new file mode 100644
index 00000000000..e2c282f2088
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/copy-text/index.md
@@ -0,0 +1,68 @@
+---
+layout: pattern
+title: How to copy text
+subhead: Learn how to copy text to the clipboard.
+description: Learn how to copy text to the clipboard.
+date: 2022-10-10
+authors:
+  - joemedley
+height: 800
+---
+
+Cutting and pasting text is one of the most commonly used features of apps in general and desktop applications in particular. How do I copy text on the web? There's an old way and a new way. And it depends on which browser is used.
+
+## The modern way
+
+### Using the Async Clipboard API
+
+The [`Clipboard.writeText()`](​​https://developer.mozilla.org/docs/Web/API/Clipboard/writeText) method takes a string and returns a Promise that resolves when text is successfully written to the clipboard. `Clipboard.writeText()` can only be used from the `window` object that has focus.
+
+{% BrowserCompat 'api.Clipboard.writeText' %}
+
+## The classic way
+
+### Using `document.execCommand()`
+
+Calling [`document.execCommand('copy')`](https://developer.mozilla.org/docs/Web/API/Document/execCommand#copy) returns a boolean value that indicates whether the copy was successful. Call this command inside of a user gesture such as a [click handler](https://developer.mozilla.org/docs/Web/API/Element/click_event#javascript). This approach has limitations when compared to the Async Clipboard API. The `execCommand()` method only works with DOM elements. Because it's synchronous, copying large amounts of data, especially data that must be transformed or sanitized in some way, can block the page.
+
+{% BrowserCompat 'api.Document.execCommand' %}
+
+## Progressive enhancement
+
+```js
+const copyButton = document.querySelector('#copyButton');
+const out = document.querySelector('#out');
+
+if ('clipboard' in navigator) {
+  copyButton.addEventListener('click', () => {
+    navigator.clipboard.writeText(out.value)
+    .then(() => {
+      console.log('Text copied');
+    })
+    .catch((err) => console.error(err.name, err.message));
+  });
+} else {
+  copyButton.addEventListener('click', () => {
+    const textArea = document.createElement('textarea');
+    textArea.value = out.value;
+    textArea.style.opacity = 0;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      const success = document.execCommand('copy');
+      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+    document.body.removeChild(textArea);
+  });
+}
+```
+
+## Further reading
+
+- [Unblocking clipboard access](/async-clipboard/) (the modern way)
+- [Cut and copy commands](https://developer.chrome.com/blog/cut-and-copy-commands/) (the classic way)
+
+## Demo
diff --git a/src/site/content/en/patterns/clipboard/index.md b/src/site/content/en/patterns/clipboard/index.md
new file mode 100644
index 00000000000..adbfb87b995
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/index.md
@@ -0,0 +1,6 @@
+---
+layout: pattern-set
+title: Clipboard patterns
+description: A collection of common patterns for dealing with the clipboard.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/eWdb4ici0H9p8tueeUUG.svg
+---
diff --git a/src/site/content/en/patterns/clipboard/paste-files/assets/body.html b/src/site/content/en/patterns/clipboard/paste-files/assets/body.html
new file mode 100644
index 00000000000..119f333df2c
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-files/assets/body.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>How to paste files</title>
+  </head>
+  <body>
+    <h1>How to paste files</h1>
+    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
+      (for other operating systems) to paste image or text file(s) anywhere in this page.
+    </p>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-files/assets/script.js b/src/site/content/en/patterns/clipboard/paste-files/assets/script.js
new file mode 100644
index 00000000000..648161292f5
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-files/assets/script.js
@@ -0,0 +1,24 @@
+document.addEventListener('paste', async (e) => {
+  // Prevent the default behavior, so you can code your own logic.
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  // Iterate over all pasted files.
+  Array.from(e.clipboardData.files).forEach(async (file) => {
+    // Add more checks here for MIME types you're interested in,
+    // such as `application/pdf`, `video/mp4`, etc.
+    if (file.type.startsWith('image/')) {
+      // For images, create an image and append it to the `body`.
+      const img = document.createElement('img');
+      const blob = URL.createObjectURL(file);
+      img.src = blob;
+      document.body.append(img);
+    } else if (file.type.startsWith('text/')) {
+      // For text files, read the contents and output it into a `textarea`.
+      const textarea = document.createElement('textarea');
+      textarea.value = await file.text();
+      document.body.append(textarea);
+    }
+  });
+});
diff --git a/src/site/content/en/patterns/clipboard/paste-files/assets/style.css b/src/site/content/en/patterns/clipboard/paste-files/assets/style.css
new file mode 100644
index 00000000000..370d8a2599a
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-files/assets/style.css
@@ -0,0 +1,19 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
diff --git a/src/site/content/en/patterns/clipboard/paste-files/demo.njk b/src/site/content/en/patterns/clipboard/paste-files/demo.njk
new file mode 100644
index 00000000000..4226ed9905c
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-files/demo.njk
@@ -0,0 +1,64 @@
+---
+patternId: clipboard/paste-files
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>How to paste files</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+      }
+
+      img {
+        height: auto;
+        max-width: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to paste files</h1>
+    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
+      (for other operating systems) to paste image or text file(s) anywhere in this page.
+    </p>
+    {% set script %}
+      document.addEventListener('paste', async (e) => {
+        // Prevent the default behavior, so you can code your own logic.
+        e.preventDefault();
+        if (!e.clipboardData.files.length) {
+          return;
+        }
+        // Iterate over all pasted files.
+        Array.from(e.clipboardData.files).forEach(async (file) => {
+          // Add more checks here for MIME types you're interested in,
+          // such as `application/pdf`, `video/mp4`, etc.
+          if (file.type.startsWith('image/')) {
+            // For images, create an image and append it to the `body`.
+            const img = document.createElement('img');
+            const blob = URL.createObjectURL(file);
+            img.src = blob;
+            document.body.append(img);
+          } else if (file.type.startsWith('text/')) {
+            // For text files, read the contents and output it into a `textarea`.
+            const textarea = document.createElement('textarea');
+            textarea.value = await file.text();
+            document.body.append(textarea);
+          }
+        });
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-files/index.md b/src/site/content/en/patterns/clipboard/paste-files/index.md
new file mode 100644
index 00000000000..5ed8242f533
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-files/index.md
@@ -0,0 +1,58 @@
+---
+layout: pattern
+title: How to paste files
+date: 2022-10-10
+authors:
+  - harrytheodoulou
+description: >
+  Learn how to handle pasted files into the browser.
+height: 800
+---
+
+Pasting files into the browser consists of using the `paste` event of the `HTMLElement`.
+
+## Using the `HTMLElement`'s `paste` event
+
+As a first step, you add an event listener for the `paste` event at the desired element, commonly
+this is at the `document` level, so no specific element needs to be focused. Next, you use the
+[Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API), which gives you access to
+the `clipboardData` field of the `HTMLElement`'s `paste` event, whose `files` list you can then
+iterate over. Based on the MIME type of each of the files pasted, you can decide whether to render
+it to the screen, as in the case of an image or video, or to paste the text contents of the file
+into, for example, a `textarea` element, in the case of a text file.
+
+{% BrowserCompat 'api.Clipboard' %}
+
+```js
+document.addEventListener('paste', async (e) => {
+  // Prevent the default behavior, so you can code your own logic.
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  // Iterate over all pasted files.
+  Array.from(e.clipboardData.files).forEach(async (file) => {
+    // Add more checks here for MIME types you're interested in,
+    // such as `application/pdf`, `video/mp4`, etc.
+    if (file.type.startsWith('image/')) {
+      // For images, create an image and append it to the `body`.
+      const img = document.createElement('img');
+      const blob = URL.createObjectURL(file);
+      img.src = blob;
+      document.body.append(img);
+    } else if (file.type.startsWith('text/')) {
+      // For text files, read the contents and output it into a `textarea`.
+      const textarea = document.createElement('textarea');
+      textarea.value = await file.text();
+      document.body.append(textarea);
+    }
+  });
+});
+```
+
+## Further reading
+
+- [Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+- [Unblocking clipboard access](/async-clipboard/)
+
+## Demo
diff --git a/src/site/content/en/patterns/clipboard/paste-images/assets/body.html b/src/site/content/en/patterns/clipboard/paste-images/assets/body.html
new file mode 100644
index 00000000000..6bac272d95b
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-images/assets/body.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to paste images</title>
+  </head>
+  <body>
+    <h1>How to paste images</h1>
+    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
+      (for other operating systems) to paste images anywhere in this page.
+    </p>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-images/assets/script.js b/src/site/content/en/patterns/clipboard/paste-images/assets/script.js
new file mode 100644
index 00000000000..54267adc877
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-images/assets/script.js
@@ -0,0 +1,28 @@
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;
+
+  for (const clipboardItem of clipboardItems) {
+    let blob;
+    if (clipboardItem.type?.startsWith('image/')) {
+      // For files from `e.clipboardData.files`.
+      blob = clipboardItem
+      // Do something with the blob.
+      appendImage(blob);
+    } else {
+      // For files from `navigator.clipboard.read()`.
+      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
+      for (const imageType of imageTypes) {
+        blob = await clipboardItem.getType(imageType);
+        // Do something with the blob.
+        appendImage(blob);
+      }
+    }
+  }
+});
+
+const appendImage = (blob) => {
+  const img = document.createElement('img');
+  img.src = URL.createObjectURL(blob);
+  document.body.append(img);
+};
\ No newline at end of file
diff --git a/src/site/content/en/patterns/clipboard/paste-images/assets/style.css b/src/site/content/en/patterns/clipboard/paste-images/assets/style.css
new file mode 100644
index 00000000000..fdd34db3888
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-images/assets/style.css
@@ -0,0 +1,22 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+button {
+  display: block;
+}
diff --git a/src/site/content/en/patterns/clipboard/paste-images/demo.njk b/src/site/content/en/patterns/clipboard/paste-images/demo.njk
new file mode 100644
index 00000000000..864c51b0b29
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-images/demo.njk
@@ -0,0 +1,77 @@
+---
+patternId: clipboard/paste-images
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to paste images</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to paste images</h1>
+    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
+      (for other operating systems) to paste images anywhere in this page.
+    </p>
+    {% set script %}
+      document.addEventListener('paste', async (e) => {
+        e.preventDefault();
+        const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;
+
+        for (const clipboardItem of clipboardItems) {
+          let blob;
+          if (clipboardItem.type?.startsWith('image/')) {
+            // For files from `e.clipboardData.files`.
+            blob = clipboardItem
+            // Do something with the blob.
+            appendImage(blob);
+          } else {
+            // For files from `navigator.clipboard.read()`.
+            const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
+            for (const imageType of imageTypes) {
+              blob = await clipboardItem.getType(imageType);
+              // Do something with the blob.
+              appendImage(blob);
+            }
+          }
+        }
+      });
+
+      const appendImage = (blob) => {
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(blob);
+        document.body.append(img);
+      };
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-images/index.md b/src/site/content/en/patterns/clipboard/paste-images/index.md
new file mode 100644
index 00000000000..63917bac43c
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-images/index.md
@@ -0,0 +1,92 @@
+---
+layout: pattern
+title: How to paste images
+date: 2022-10-10
+authors:
+  - harrytheodoulou
+description: >
+  Pasting images into the browser consists of using the read() method of the Async Clipboard API.
+height: 800
+---
+
+## The modern way
+
+### Using the Async Clipboard API
+
+To read images from the user's clipboard programmatically, that is, after a button click, you can use the [`read()`](https://developer.mozilla.org/docs/Web/API/Clipboard/read) method of the [Async Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API). If permission to read from the clipboard have not been granted yet, the call to `navigator.clipboard.read()` will request it upon the first call of the method.
+
+```js
+const pasteButton = document.querySelector('#paste-button');
+
+pasteButton.addEventListener('click', async () => {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
+      for (const imageType of imageTypes) {
+        const blob = await clipboardItem.getType(imageType);
+        // Do something with the image blob.
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+```
+
+{% BrowserCompat 'api.Clipboard.read' %}
+
+## The classic way
+
+### Listen for the `paste` event
+
+The classic way to paste images is to use the (synchronous) [Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API), which gives you access to the [`clipboardData`](https://developer.mozilla.org/docs/Web/API/ClipboardEvent/clipboardData) field inside the [Document: `paste` event](https://developer.mozilla.org/docs/Web/API/Document/paste_event). However, this method comes with limitations, for example because it's synchronous, pasting large amounts of data can block the page.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+
+  for (const clipboardItem of e.clipboardData.files) {
+    if (clipboardItem.type.startsWith('image/')) {
+      // Do something with the image file.
+    }
+  }
+});
+```
+
+{% BrowserCompat 'api.Clipboard' %}
+
+## Progressive enhancement
+
+For browsers that do not support the Async Clipboard API, it is impossible to access the user's clipboard programmatically (for example, on a button click). Thus for accessing a user's clipboard on a `paste` event, you can use the Async Clipboard API and fall back to the (synchronous) Clipboard API.
+
+The `ClipboardItem` objects coming from `navigator.clipboard.read` have a `types` field which is an array, and `File` objects coming from `event.clipboardData.files` have a `type` field which is a string. You can conditionally check each of the `type` or `types` fields for images in the clipboard:
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;
+
+  for (const clipboardItem of clipboardItems) {
+    let blob;
+    if (clipboardItem.type?.startsWith('image/')) {
+      // For files from `e.clipboardData.files`.
+      blob = clipboardItem
+      // Do something with the blob.
+    } else {
+      // For files from `navigator.clipboard.read()`.
+      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
+      for (const imageType of imageTypes) {
+        blob = await clipboardItem.getType(imageType);
+        // Do something with the blob.
+      }
+    }
+  }
+});
+```
+## Further reading
+
+- Clipboard API on MDN
+- Unblocking clipboard access on web.dev
+
+## Demo
diff --git a/src/site/content/en/patterns/clipboard/paste-text/assets/body.html b/src/site/content/en/patterns/clipboard/paste-text/assets/body.html
new file mode 100644
index 00000000000..2512f14242d
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-text/assets/body.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to paste text</title>
+  </head>
+  <body>
+    <h1>How to paste text</h1>
+    <p>
+      <button type="button">Paste</button>
+    </p>
+    <textarea></textarea>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-text/assets/script.js b/src/site/content/en/patterns/clipboard/paste-text/assets/script.js
new file mode 100644
index 00000000000..75424ea3116
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-text/assets/script.js
@@ -0,0 +1,14 @@
+const pasteButton = document.querySelector('button');
+
+pasteButton.addEventListener('click', async () => {
+  try {
+    const text = await navigator.clipboard.readText()
+    document.querySelector('textarea').value += text;
+    console.log('Text pasted.');
+  } catch (error) {
+    console.log('Failed to read clipboard. Using execCommand instead.');
+    document.querySelector('textarea').focus();
+    const result = document.execCommand('paste')
+    console.log('document.execCommand result: ', result);
+  }
+});
\ No newline at end of file
diff --git a/src/site/content/en/patterns/clipboard/paste-text/assets/style.css b/src/site/content/en/patterns/clipboard/paste-text/assets/style.css
new file mode 100644
index 00000000000..fdd34db3888
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-text/assets/style.css
@@ -0,0 +1,22 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+button {
+  display: block;
+}
diff --git a/src/site/content/en/patterns/clipboard/paste-text/demo.njk b/src/site/content/en/patterns/clipboard/paste-text/demo.njk
new file mode 100644
index 00000000000..d8b63aa601b
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-text/demo.njk
@@ -0,0 +1,65 @@
+---
+patternId: clipboard/paste-text
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to paste text</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to paste text</h1>
+    <p>
+      <button type="button">Paste</button>
+    </p>
+    <textarea></textarea>
+
+    {% set script %}
+      const pasteButton = document.querySelector('button');
+
+      pasteButton.addEventListener('click', async () => {
+        try {
+          const text = await navigator.clipboard.readText()
+          document.querySelector('textarea').value += text;
+          console.log('Text pasted.');
+        } catch (error) {
+          console.log('Failed to read clipboard. Using execCommand instead.');
+          document.querySelector('textarea').focus();
+          const result = document.execCommand('paste')
+          console.log('document.execCommand result: ', result);
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/clipboard/paste-text/index.md b/src/site/content/en/patterns/clipboard/paste-text/index.md
new file mode 100644
index 00000000000..fff523214a0
--- /dev/null
+++ b/src/site/content/en/patterns/clipboard/paste-text/index.md
@@ -0,0 +1,71 @@
+---
+layout: pattern
+title: How to paste text
+date: 2022-10-10
+authors:
+  - harrytheodoulou
+height: 800
+description: >
+  Pasting text into the browser consists of using the readText() method of the Async Clipboard API.
+---
+
+## The modern way
+
+### Using the Async Clipboard API
+
+To read text from the user's clipboard programmatically, for example, after a button click, you can use the [`readText()`](https://developer.mozilla.org/docs/Web/API/Clipboard/readText) method of the [Async Clipboard API](https://developer.mozilla.org/docs/Web/API/Clipboard_API). If permissions to read clipboard have not been granted yet, the call to `navigator.clipboard.readText()` will request it upon the first call to the method.
+
+```js
+const pasteButton = document.querySelector('#paste-button');
+
+pasteButton.addEventListener('click', async () => {
+   try {
+     const text = await navigator.clipboard.readText()
+     document.querySelector('textarea').value += text;
+     console.log('Text pasted.');
+   } catch (error) {
+     console.log('Failed to read clipboard');
+   }
+});
+```
+
+{% BrowserCompat 'api.Clipboard.readText' %}
+
+## The classic way
+
+### Using `document.execCommand()`
+
+By using the [`document.execCommand('paste')`](https://developer.mozilla.org/docs/Web/API/Document/execCommand#paste) you can paste the clipboard content at the insertion point (currently focused HTML element). The `execCommand` method returns a boolean that indicates whether the `paste` event was successful. However this method comes with limitations, for example because it's synchronous, pasting large amounts of data can block the page.
+
+```js
+pasteButton.addEventListener('click', () => {
+  document.querySelector('textarea').focus();
+  const result = document.execCommand('paste')
+  console.log('document.execCommand result: ', result);
+})
+```
+
+{% BrowserCompat 'api.Document.execCommand' %}
+
+## Progressive enhancement
+
+```js
+pasteButton.addEventListener('click', async () => {
+   try {
+     const text = await navigator.clipboard.readText()
+     document.querySelector('textarea').value += text;
+     console.log('Text pasted.');
+   } catch (error) {
+     console.log('Failed to read clipboard. Using execCommand instead.');
+     document.querySelector('textarea').focus();
+     const result = document.execCommand('paste')
+     console.log('document.execCommand result: ', result);
+   }
+});
+```
+## Further reading
+
+- [Clipboard API on MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+- [Unblocking clipboard access](/async-clipboard/#readtext())
+
+## Demo
diff --git a/src/site/content/en/patterns/components/breadcrumbs/assets/body.html b/src/site/content/en/patterns/components/breadcrumbs/assets/body.html
new file mode 100644
index 00000000000..5d5ec6ac6ce
--- /dev/null
+++ b/src/site/content/en/patterns/components/breadcrumbs/assets/body.html
@@ -0,0 +1,41 @@
+<nav class="breadcrumbs" role="navigation">
+  <a href="./home/">
+    <span class="crumbicon">
+      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <use href="#icon-home" />
+      </svg>
+    </span>
+    <span class="home-label">Home</span>
+  </a>
+
+  <span class="crumb-separator" aria-hidden="true">»</span>
+
+  <span class="crumb">
+    <a aria-current="page">Page A</a>
+    <span class="crumbicon">
+      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <use href="#icon-dropdown-arrow" />
+      </svg>
+      <select class="disguised-select" title="Navigate to another page">
+        <option selected>Page A</option>
+        <option>Page B</option>
+        <option>Page C</option>
+      </select>
+    </span>
+  </span>
+</nav>
+
+<svg style="display: none;">
+
+  <symbol id="icon-home">
+    <title>A home icon</title>
+    <path
+      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+  </symbol>
+
+  <symbol id="icon-dropdown-arrow">
+    <title>A down arrow</title>
+    <path d="M19 9l-7 7-7-7" />
+  </symbol>
+
+</svg>
diff --git a/src/site/content/en/patterns/components/breadcrumbs/assets/script.js b/src/site/content/en/patterns/components/breadcrumbs/assets/script.js
new file mode 100644
index 00000000000..4178e1d8c1f
--- /dev/null
+++ b/src/site/content/en/patterns/components/breadcrumbs/assets/script.js
@@ -0,0 +1,39 @@
+const crumbs         = document.querySelectorAll('.breadcrumbs select')
+const allowedKeys    = new Set(['Tab', 'Enter', ' '])
+const preventedKeys  = new Set(['ArrowUp', 'ArrowDown'])
+
+// watch crumbs for *full* changes,
+// ensures it's not a user exploring options via keyboard
+crumbs.forEach(nav => {
+  let ignoreChange = false
+
+  nav.addEventListener('change', e => {
+    if (ignoreChange) return
+
+    const option = e.target
+    const choice = option.value
+    const crumb = option.closest('.crumb')
+
+    // flag crumb so adjacent siblings can be hidden
+    crumb.classList.add('tree-changed')
+
+    // update crumb text to reflect the user's choice
+    crumb.querySelector(':scope > a').textContent = choice
+
+    routePage(choice)
+  })
+
+  nav.addEventListener('keydown', ({ key }) => {
+    if (preventedKeys.has(key))
+      ignoreChange = true
+    else if (allowedKeys.has(key))
+      ignoreChange = false
+  })
+})
+
+const routePage = route => {
+  console.info('change path to: ', route)
+  // change entire URL (window.location)
+  // or 
+  // use your favorite clientside framework's router
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/breadcrumbs/assets/style.css b/src/site/content/en/patterns/components/breadcrumbs/assets/style.css
new file mode 100644
index 00000000000..73bd7accba8
--- /dev/null
+++ b/src/site/content/en/patterns/components/breadcrumbs/assets/style.css
@@ -0,0 +1,116 @@
+.breadcrumbs {
+  --nav-gap: 2ch;
+
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+
+  gap: var(--nav-gap);
+  padding: calc(var(--nav-gap) / 2);
+  scroll-padding-inline: calc(var(--nav-gap) / 2);
+
+  & > a:first-of-type:not(.crumb) {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--nav-gap) / 4);
+
+    @media (width <= 480px) { & > .home-label {
+      display: none;
+    }}
+  }
+
+  & a {
+    text-underline-offset: .25em;
+    outline-offset: 3px;
+
+    /* fix Safari inaccessible dark color scheme links */
+    /* https://bugs.webkit.org/show_bug.cgi?id=226893 */
+    @media (prefers-color-scheme: dark) {
+      @supports (-webkit-hyphens:none) { &[href] {
+        color: hsl(240 100% 81%);
+      }}
+    }
+  }
+
+  & > .crumb:last-of-type {
+    scroll-snap-align: end;
+  }
+
+  @supports (-webkit-hyphens:none) {
+    scroll-snap-type: none;
+  }
+}
+
+.crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--nav-gap) / 4);
+
+  & > a {
+    white-space: nowrap;
+
+    &[aria-current="page"] {
+      font-weight: bold;
+    }
+  }
+
+  &.tree-changed ~ * {
+    display: none;
+  }
+}
+
+.crumb-separator {
+  color: ButtonText;
+}
+
+.disguised-select {
+  inline-size: 100%;
+  block-size: 100%;
+  opacity: .01;
+  font-size: min(100%, 16px);
+}
+
+.crumbicon {
+  --size: 3ch;
+
+  display: grid;
+  grid: [stack] var(--size) / [stack] var(--size);
+  place-items: center;
+  border-radius: 50%;
+
+  --icon-shadow-size: 0px;
+  box-shadow: inset 0 0 0 var(--icon-shadow-size) currentColor;
+  
+  @media (--motionOK) { & {
+    transition: box-shadow .2s ease;
+  }}
+
+  @nest .crumb:is(:focus-within, :hover) > & {
+    --icon-shadow-size: 1px;
+  }
+
+  @nest .crumb > &:is(:focus-within, :hover) {
+    --icon-shadow-size: 2px;
+
+    & svg {
+      stroke-width: 2px;
+    }
+  }
+
+  & > * {
+    grid-area: stack;
+  }
+
+  & > svg {
+    max-block-size: 100%;
+    margin: calc(var(--nav-gap) / 4);
+
+    stroke: currentColor;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1px;
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/breadcrumbs/demo.njk b/src/site/content/en/patterns/components/breadcrumbs/demo.njk
new file mode 100644
index 00000000000..a8f103c25d2
--- /dev/null
+++ b/src/site/content/en/patterns/components/breadcrumbs/demo.njk
@@ -0,0 +1,80 @@
+---
+patternId: components/breadcrumbs
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta name="theme-color" content="deeppink" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
+    <meta name="color-scheme" content="dark light">
+
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{block-size:100%}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:grid;gap:2ch;padding-block:.5ch;place-content:center}.breadcrumbs{--nav-gap:2ch;display:flex;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity;gap:var(--nav-gap);padding:calc(var(--nav-gap)/ 2);scroll-padding-inline:calc(var(--nav-gap)/ 2)}.breadcrumbs>a:first-of-type:not(.crumb){display:inline-flex;align-items:center;gap:calc(var(--nav-gap)/ 4)}@media (max-width:480px){.breadcrumbs>a:first-of-type:not(.crumb)>.home-label{display:none}}.breadcrumbs a{text-underline-offset:.25em;outline-offset:3px}@media (prefers-color-scheme:dark){@supports (-webkit-hyphens:none){.breadcrumbs a[href]{color:#9e9eff}}}.breadcrumbs>.crumb:last-of-type{scroll-snap-align:end}@supports (-webkit-hyphens:none){.breadcrumbs{-ms-scroll-snap-type:none;scroll-snap-type:none}}.crumb{display:inline-flex;align-items:center;gap:calc(var(--nav-gap)/ 4)}.crumb>a{white-space:nowrap}.crumb>a[aria-current=page]{font-weight:700}.crumb.tree-changed~*{display:none}.crumb-separator{color:ButtonText}.disguised-select{inline-size:100%;block-size:100%;opacity:.01;font-size:min(100%,16px)}.crumbicon{--size:3ch;display:grid;grid:[stack] var(--size)/[stack] var(--size);align-items:center;justify-items:center;place-items:center;border-radius:50%;--icon-shadow-size:0px;box-shadow:inset 0 0 0 var(--icon-shadow-size) currentColor}@media (prefers-reduced-motion:no-preference){.crumbicon{transition:box-shadow .2s ease}}.crumb:is([focus-within],:hover)>.crumbicon{--icon-shadow-size:1px}.crumb:is(:focus-within,:hover)>.crumbicon{--icon-shadow-size:1px}.crumb>.crumbicon:is([focus-within],:hover){--icon-shadow-size:2px}.crumb>.crumbicon:is(:focus-within,:hover){--icon-shadow-size:2px}.crumb>.crumbicon:is([focus-within],:hover) svg{stroke-width:2px}.crumb>.crumbicon:is(:focus-within,:hover) svg{stroke-width:2px}.crumbicon>*{grid-area:stack}.crumbicon>svg{max-block-size:100%;margin:calc(var(--nav-gap)/ 4);stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+     <svg style="display: none;">
+
+      <symbol id="icon-home">
+        <title>A home icon</title>
+        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+      </symbol>
+
+      <symbol id="icon-dropdown-arrow">
+        <title>A down arrow</title>
+        <path d="M19 9l-7 7-7-7"/>
+      </symbol>
+
+    </svg>
+
+    <nav class="breadcrumbs" role="navigation">
+      <a href="./home/">
+        <span class="crumbicon">
+          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+            <use href="#icon-home" />
+          </svg>
+        </span>
+        <span class="home-label">Home</span>
+      </a>
+
+      <span class="crumb-separator" aria-hidden="true">|</span>
+
+      <span class="crumb">
+        <a href="./home/collection-b/">Collection B</a>
+        <span class="crumbicon">
+          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+            <use href="#icon-dropdown-arrow" />
+          </svg>
+          <select class="disguised-select" title="Navigate to another collection">
+            <option>Collection A</option>
+            <option selected>Collection B</option>
+            <option>Other Collections</option>
+          </select>
+        </span>
+      </span>
+
+      <span class="crumb-separator" aria-hidden="true">|</span>
+
+      <span class="crumb">
+        <a aria-current="page">Sub Collection C</a>
+        <span class="crumbicon">
+          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+            <use href="#icon-dropdown-arrow" />
+          </svg>
+          <select class="disguised-select" title="Navigate to another sub collection">
+            <option>Sub Collection A</option>
+            <option>Sub Collection B</option>
+            <option selected>Sub Collection C</option>
+          </select>
+        </span>
+      </span>
+    </nav>
+
+    {% set script %}
+      const e=document.querySelectorAll(".breadcrumbs select"),t=new Set(["Tab","Enter"," "]),n=new Set(["ArrowUp","ArrowDown"]);e.forEach((e=>{let o=!1;e.addEventListener("change",(e=>{if(o)return;const t=e.target,n=t.value,c=t.closest(".crumb");c.classList.add("tree-changed"),c.querySelector(":scope > a").textContent=n,r(n)})),e.addEventListener("keydown",(({key:e})=>{n.has(e)?o=!0:t.has(e)&&(o=!1)}))}));const r=e=>{console.info("change path to: ",e)};
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/breadcrumbs/index.md b/src/site/content/en/patterns/components/breadcrumbs/index.md
new file mode 100644
index 00000000000..0ef4b33fe8f
--- /dev/null
+++ b/src/site/content/en/patterns/components/breadcrumbs/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Breadcrumbs
+description: |
+  This pattern shows how to create a responsive and accessible breadcrumbs component for users to navigate your site.
+  <br><br>
+  <a href="/building-a-breadcrumbs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=kHL3gxAlvK8">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/breadcrumbs">Source on Github</a>
+date: 2022-06-01
+height: 350
+---
+
+This pattern shows how to create a responsive and accessible breadcrumbs component for users to navigate your site.
+
+<a href="/building-a-breadcrumbs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=kHL3gxAlvK8">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/breadcrumbs">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/buttons/assets/body.html b/src/site/content/en/patterns/components/buttons/assets/body.html
new file mode 100644
index 00000000000..62a11dde3d8
--- /dev/null
+++ b/src/site/content/en/patterns/components/buttons/assets/body.html
@@ -0,0 +1,19 @@
+<section>
+  <h2>9 button types</h2>
+  <p>Unified modern style, visual differences reinforce purpose.</p>
+</section>
+
+<button>Default</button>
+<input type="button" value="<input>"/>
+<button>
+  <svg viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" aria-hidden="true">
+    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+  </svg>
+  Icon
+</button>
+<button type="submit">Submit</button>
+<button type="button">Type Button</button>
+<button type="reset">Reset</button>
+<button disabled>Disabled</button>
+<button class="btn-custom">Custom</button>
+<input type="file">
diff --git a/src/site/content/en/patterns/components/buttons/assets/script.js b/src/site/content/en/patterns/components/buttons/assets/script.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/site/content/en/patterns/components/buttons/assets/style.css b/src/site/content/en/patterns/components/buttons/assets/style.css
new file mode 100644
index 00000000000..832ac62ba2d
--- /dev/null
+++ b/src/site/content/en/patterns/components/buttons/assets/style.css
@@ -0,0 +1,237 @@
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="file"]
+),
+:where(input[type="file"])::file-selector-button {
+  --_accent-light: hsl(210 100% 40%);
+  --_accent-dark: hsl(210 50% 70%);
+  --_accent: var(--_accent-light);
+
+  --_text-light: hsl(210 10% 30%);
+  --_text-dark: hsl(210 5% 95%);
+  --_text: var(--_text-light);
+  
+  --_bg-light: hsl(0 0% 100%);
+  --_bg-dark: hsl(210 9% 31%);
+  --_bg: var(--_bg-light);
+
+  --_input-well-light: hsl(210 16% 87%);
+  --_input-well-dark: hsl(204 10% 10%);
+  --_input-well: var(--_input-well-light);
+
+  --_padding-inline: 1.75ch;
+  --_padding-block: .75ch;
+  
+  --_border-radius: .5ch;
+  --_border-light: hsl(210 14% 89%);
+  --_border-dark: var(--_bg-dark);
+  --_border: var(--_border-light);
+  
+  --_highlight-size: 0;
+  --_highlight-light: hsl(210 10% 71% / 25%);
+  --_highlight-dark: hsl(210 10% 5% / 25%);
+  --_highlight: var(--_highlight-light);
+  
+  --_ink-shadow-light: 0 1px 0 var(--_border-light);
+  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
+  --_ink-shadow: var(--_ink-shadow-light);
+  
+  --_icon-size: 2ch;
+  --_icon-color: var(--_accent);
+
+  --_shadow-color-light: 220 3% 15%;
+  --_shadow-color-dark: 220 40% 2%;
+  --_shadow-color: var(--_shadow-color-light);
+  --_shadow-strength-light: 1%;
+  --_shadow-strength-dark: 25%;
+  --_shadow-strength: var(--_shadow-strength-light);
+  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
+  --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
+  
+  --_shadow-depth-light: 0 1px var(--_border-light);
+  --_shadow-depth-dark: 0 1px var(--_bg-dark);
+  --_shadow-depth: var(--_shadow-depth-light);
+
+  --_transition-motion-reduce: ;
+  --_transition-motion-ok:
+    box-shadow 145ms ease,
+    outline-offset 145ms ease
+  ;
+  --_transition: var(--_transition-motion-reduce);
+
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: 1.5;
+  border-radius: var(--_border-radius);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+  ),
+  :where(input[type="file"])::file-selector-button {
+    --_bg: var(--_bg-dark);
+    --_text: var(--_text-dark);
+    --_border: var(--_border-dark);
+    --_accent: var(--_accent-dark);
+    --_highlight: var(--_highlight-dark);
+    --_input-well: var(--_input-well-dark);
+    --_ink-shadow: var(--_ink-shadow-dark);
+    --_shadow-depth: var(--_shadow-depth-dark);
+    --_shadow-color: var(--_shadow-color-dark);
+    --_shadow-strength: var(--_shadow-strength-dark);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+  ),
+  :where(input[type="file"])::file-selector-button {
+    --_transition: var(--_transition-motion-ok);
+  }
+}
+
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+),
+:where(input[type="file"])::file-selector-button {
+  cursor: pointer;
+  touch-action: manipulation;
+
+  font-size: var(--_size, 1rem);
+  background: var(--_bg);
+  color: var(--_text);
+  border: 2px solid var(--_border);
+  box-shadow: 
+    var(--_shadow-2),
+    var(--_shadow-depth),
+    0 0 0 var(--_highlight-size) var(--_highlight)
+  ;
+  text-shadow: var(--_ink-shadow);
+  transition: var(--_transition);
+  
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 1ch;
+  
+  font-weight: 700;
+  padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
+
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+/* icons */
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) > :where(svg, [data-icon]) {
+  block-size: var(--_icon-size);
+  inline-size: var(--_icon-size);
+  stroke: var(--_icon-color);
+  filter: drop-shadow(var(--_ink-shadow));
+
+  flex-shrink: 0;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* focus */
+:where(button, input):where(:not(:active)):focus-visible {
+  outline-offset: 5px;
+}
+
+/* pressing */
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):where(:not(:active):hover) {
+  --_highlight-size: .5rem;
+}
+
+/* disabled */
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+)[disabled] {
+  --_bg: none;
+  --_text-light: hsl(210 7% 40%);
+  --_text-dark: hsl(210 11% 71%);
+
+  cursor: not-allowed;
+  box-shadow: var(--_shadow-1);
+}
+
+/* adaptive indigo text */
+:where(
+  [type="submit"], 
+  form button:not([type],[disabled])
+) {
+  --_text: var(--_accent);
+} 
+
+/* red reset */
+:where([type="reset"]) {
+  --_border-light: hsl(0 100% 83%);
+  --_highlight-light: hsl(0 100% 89% / 20%);
+  --_text-light: hsl(0 80% 50%);
+  --_text-dark: hsl(0 100% 89%);
+}
+
+:where([type="reset"]):focus-visible {
+  outline-color: currentColor;
+}
+
+/* file input */
+:where(input[type="file"]) {
+  inline-size: 100%;
+  max-inline-size: max-content;
+  background-color: var(--_input-well);
+}
+
+:where(input[type="button"]),
+:where(input[type="file"])::file-selector-button {
+  appearance: none;
+}
+
+:where(input[type="file"])::file-selector-button {
+  margin-inline-end: var(--_padding-inline);
+}
+
+/* special dark theme styles */
+@media (prefers-color-scheme: dark) {
+  :where(
+    [type="submit"],
+    [type="reset"],
+    [disabled],
+    form button:not([type="button"])
+  ) {
+    --_bg: var(--_input-well);
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/buttons/demo.njk b/src/site/content/en/patterns/components/buttons/demo.njk
new file mode 100644
index 00000000000..f047c030f0f
--- /dev/null
+++ b/src/site/content/en/patterns/components/buttons/demo.njk
@@ -0,0 +1,37 @@
+---
+patternId: components/buttons
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta name="color-scheme" content="light dark">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :where(input[type="file"])::-webkit-file-upload-button{--_accent-light: hsl(210 100% 40%);--_accent-dark: hsl(210 50% 70%);--_accent: var(--_accent-light);--_text-light: hsl(210 10% 30%);--_text-dark: hsl(210 5% 95%);--_text: var(--_text-light);--_bg-light: hsl(0 0% 100%);--_bg-dark: hsl(210 9% 31%);--_bg: var(--_bg-light);--_input-well-light: hsl(210 16% 87%);--_input-well-dark: hsl(204 10% 10%);--_input-well: var(--_input-well-light);--_padding-inline: 1.75ch;--_padding-block: .75ch;--_border-radius: .5ch;--_border-light: hsl(210 14% 89%);--_border-dark: var(--_bg-dark);--_border: var(--_border-light);--_highlight-size: 0;--_highlight-light: hsl(210 10% 71% / 25%);--_highlight-dark: hsl(210 10% 5% / 25%);--_highlight: var(--_highlight-light);--_ink-shadow-light: 0 1px 0 var(--_border-light);--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);--_ink-shadow: var(--_ink-shadow-light);--_icon-size: 2ch;--_icon-color: var(--_accent);--_shadow-color-light: 220 3% 15%;--_shadow-color-dark: 220 40% 2%;--_shadow-color: var(--_shadow-color-light);--_shadow-strength-light: 1%;--_shadow-strength-dark: 25%;--_shadow-strength: var(--_shadow-strength-light);--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));--_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));--_shadow-depth-light: 0 1px var(--_border-light);--_shadow-depth-dark: 0 1px var(--_bg-dark);--_shadow-depth: var(--_shadow-depth-light);--_transition-motion-reduce: ;--_transition-motion-ok: box-shadow 145ms ease, outline-offset 145ms ease ;--_transition: var(--_transition-motion-reduce);font:inherit;letter-spacing:inherit;line-height:1.5;border-radius:var(--_border-radius)}:where(button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]),:where(input[type="file"])::file-selector-button{--_accent-light: hsl(210 100% 40%);--_accent-dark: hsl(210 50% 70%);--_accent: var(--_accent-light);--_text-light: hsl(210 10% 30%);--_text-dark: hsl(210 5% 95%);--_text: var(--_text-light);--_bg-light: hsl(0 0% 100%);--_bg-dark: hsl(210 9% 31%);--_bg: var(--_bg-light);--_input-well-light: hsl(210 16% 87%);--_input-well-dark: hsl(204 10% 10%);--_input-well: var(--_input-well-light);--_padding-inline: 1.75ch;--_padding-block: .75ch;--_border-radius: .5ch;--_border-light: hsl(210 14% 89%);--_border-dark: var(--_bg-dark);--_border: var(--_border-light);--_highlight-size: 0;--_highlight-light: hsl(210 10% 71% / 25%);--_highlight-dark: hsl(210 10% 5% / 25%);--_highlight: var(--_highlight-light);--_ink-shadow-light: 0 1px 0 var(--_border-light);--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);--_ink-shadow: var(--_ink-shadow-light);--_icon-size: 2ch;--_icon-color: var(--_accent);--_shadow-color-light: 220 3% 15%;--_shadow-color-dark: 220 40% 2%;--_shadow-color: var(--_shadow-color-light);--_shadow-strength-light: 1%;--_shadow-strength-dark: 25%;--_shadow-strength: var(--_shadow-strength-light);--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));--_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));--_shadow-depth-light: 0 1px var(--_border-light);--_shadow-depth-dark: 0 1px var(--_bg-dark);--_shadow-depth: var(--_shadow-depth-light);--_transition-motion-reduce: ;--_transition-motion-ok: box-shadow 145ms ease, outline-offset 145ms ease ;--_transition: var(--_transition-motion-reduce);font:inherit;letter-spacing:inherit;line-height:1.5;border-radius:var(--_border-radius)}@media (prefers-color-scheme: dark){:where(input[type="file"])::-webkit-file-upload-button{--_bg: var(--_bg-dark);--_text: var(--_text-dark);--_border: var(--_border-dark);--_accent: var(--_accent-dark);--_highlight: var(--_highlight-dark);--_input-well: var(--_input-well-dark);--_ink-shadow: var(--_ink-shadow-dark);--_shadow-depth: var(--_shadow-depth-dark);--_shadow-color: var(--_shadow-color-dark);--_shadow-strength: var(--_shadow-strength-dark)}:where(button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]),:where(input[type="file"])::file-selector-button{--_bg: var(--_bg-dark);--_text: var(--_text-dark);--_border: var(--_border-dark);--_accent: var(--_accent-dark);--_highlight: var(--_highlight-dark);--_input-well: var(--_input-well-dark);--_ink-shadow: var(--_ink-shadow-dark);--_shadow-depth: var(--_shadow-depth-dark);--_shadow-color: var(--_shadow-color-dark);--_shadow-strength: var(--_shadow-strength-dark)}}@media (prefers-reduced-motion: no-preference){:where(input[type="file"])::-webkit-file-upload-button{--_transition: var(--_transition-motion-ok)}:where(button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]),:where(input[type="file"])::file-selector-button{--_transition: var(--_transition-motion-ok)}}:where(input[type="file"])::-webkit-file-upload-button{cursor:pointer;touch-action:manipulation;font-size:var(--_size, 1rem);background:var(--_bg);color:var(--_text);border:2px solid var(--_border);box-shadow:var(--_shadow-2),var(--_shadow-depth),0 0 0 var(--_highlight-size) var(--_highlight);text-shadow:var(--_ink-shadow);-webkit-transition:var(--_transition);transition:var(--_transition);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:1ch;font-weight:700;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::file-selector-button{cursor:pointer;touch-action:manipulation;font-size:var(--_size, 1rem);background:var(--_bg);color:var(--_text);border:2px solid var(--_border);box-shadow:var(--_shadow-2),var(--_shadow-depth),0 0 0 var(--_highlight-size) var(--_highlight);text-shadow:var(--_ink-shadow);transition:var(--_transition);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:1ch;font-weight:700;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type="button"],input[type="submit"],input[type="reset"])>:where(svg,[data-icon]){block-size:var(--_icon-size);inline-size:var(--_icon-size);stroke:var(--_icon-color);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(button,input):where(:not(:active)):focus-visible{outline-offset:5px}:where(button,input[type="button"],input[type="submit"],input[type="reset"]):where(:not(:active):hover){--_highlight-size: .5rem}:where(button,input[type="button"],input[type="submit"],input[type="reset"])[disabled]{--_bg: none;--_text-light: hsl(210 7% 40%);--_text-dark: hsl(210 11% 71%);cursor:not-allowed;box-shadow:var(--_shadow-1)}:where([type="submit"],form button:not([type]):not([disabled])){--_text: var(--_accent)}:where([type="reset"]){--_border-light: hsl(0 100% 83%);--_highlight-light: hsl(0 100% 89% / 20%);--_text-light: hsl(0 80% 50%);--_text-dark: hsl(0 100% 89%)}:where([type="reset"]):focus-visible{outline-color:currentColor}:where(input[type="file"]){inline-size:100%;max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;background-color:var(--_input-well)}:where(input[type="file"])::-webkit-file-upload-button{-webkit-appearance:none;appearance:none}:where(input[type="button"]),:where(input[type="file"])::file-selector-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(input[type="file"])::-webkit-file-upload-button{-webkit-margin-end:var(--_padding-inline);margin-inline-end:var(--_padding-inline)}:where(input[type="file"])::file-selector-button{-webkit-margin-end:var(--_padding-inline);margin-inline-end:var(--_padding-inline)}@media (prefers-color-scheme: dark){:where([type="submit"],[type="reset"],[disabled],form button:not([type="button"])){--_bg: var(--_input-well)}}.btn-custom{--_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));--_border: hsl(228 89% 63%);--_text: hsl(228 89% 100%);--_ink-shadow: 0 1px 0 hsl(228 57% 50%);--_highlight: hsl(228 94% 67% / 20%)}.btn-large{--_size: 1.5rem}[data-icon=cloud]{--icon-cloud: url(https://api.iconify.design/mdi:apple-icloud.svg) center / contain no-repeat;-webkit-mask:var(--icon-cloud);mask:var(--icon-cloud);background:linear-gradient(to bottom,var(--_accent-dark),var(--_accent-light))}html{block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background-color:#f9fafb}@media (prefers-color-scheme: dark){html{background-color:#22262a}}body{min-block-size:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vmin;padding-inline:5vmin}body,h2,p{margin:0}form{background:hsl(210deg 16% 93%);border:1px solid hsl(210deg 14% 89%);border-radius:.5ch}@media (prefers-color-scheme: dark){form{background:hsl(210deg 10% 23%);border:1px solid hsl(210deg 9% 31%)}}.fluid-flex{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;place-content:center;align-items:flex-start;padding:2ch;gap:2ch}section{display:grid;gap:1ch;text-align:center}.red-squigly{-webkit-text-decoration:red underline wavy;text-decoration:red underline wavy}.github-corner{position:absolute;right:4px;width:80px;height:80px;fill:var(--surface-4);color:var(--surface-1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner>svg{fill:inherit;stroke:inherit;position:absolute;top:0;right:0}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <section>
+      <h2>9 button types</h2>
+      <p>Unified modern style, visual differences reinforce purpose.</p>
+    </section>
+
+    <article class="fluid-flex">
+      <button>Default</button>
+      <input type="button" value="<input>"/>
+      <button>
+        <svg viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" aria-hidden="true">
+          <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+        Icon
+      </button>
+      <button type="submit">Submit</button>
+      <button type="button">Type Button</button>
+      <button type="reset">Reset</button>
+      <button disabled>Disabled</button>
+      <button class="btn-custom">Custom</button>
+      <input type="file">
+    </article>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/buttons/index.md b/src/site/content/en/patterns/components/buttons/index.md
new file mode 100644
index 00000000000..dfcc7b999dd
--- /dev/null
+++ b/src/site/content/en/patterns/components/buttons/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Buttons
+description: |
+  This pattern shows how to style the different buttons types of the web.
+  <br><br>
+  <a href="/building-a-button-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=aJNq-b1zlog">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/buttons">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+This pattern shows how to style the different buttons types of the web.
+
+<a href="/building-a-button-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=aJNq-b1zlog">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/buttons">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/carousel/assets/body.html b/src/site/content/en/patterns/components/carousel/assets/body.html
new file mode 100644
index 00000000000..604d604c8a9
--- /dev/null
+++ b/src/site/content/en/patterns/components/carousel/assets/body.html
@@ -0,0 +1,36 @@
+<div class="gui-carousel" carousel-pagination="dots" carousel-controls="auto" carousel-scrollbar="auto"
+  carousel-snapstop="auto" aria-label="Featured Items Carousel">
+  <div class="gui-carousel--scroller">
+
+    <div class="gui-carousel--snap">
+      <figure class="animate-visibility captioned-image">
+        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/this/1280/720.webp"
+          alt="Blue ocean with a large wave">
+        <figcaption>
+          <a href="#">Learn more about large ocean waves</a>
+        </figcaption>
+      </figure>
+    </div>
+
+    <div class="gui-carousel--snap">
+      <figure class="animate-visibility captioned-image">
+        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/is/1280/720.webp"
+          alt="Frosty orange desert sunset">
+        <figcaption>
+          <a href="#">Learn more about warm deserts</a>
+        </figcaption>
+      </figure>
+    </div>
+
+    <div class="gui-carousel--snap">
+      <figure class="animate-visibility captioned-image">
+        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/a/1280/720.webp"
+          alt="African sahara with a giraffe">
+        <figcaption>
+          <a href="#">Learn more about giraffe's</a>
+        </figcaption>
+      </figure>
+    </div>
+
+  </div>
+</div>
diff --git a/src/site/content/en/patterns/components/carousel/assets/script.js b/src/site/content/en/patterns/components/carousel/assets/script.js
new file mode 100644
index 00000000000..a2bae55c1eb
--- /dev/null
+++ b/src/site/content/en/patterns/components/carousel/assets/script.js
@@ -0,0 +1,398 @@
+import {scrollend} from 'https://cdn.jsdelivr.net/gh/argyleink/scrollyfills@latest/dist/scrollyfills.modern.js'
+
+export default class Carousel {
+  constructor(element) {
+    this.elements = {
+      root:       element,
+      scroller:   element.querySelector('.gui-carousel--scroller'),
+      snaps:      element.querySelectorAll('.gui-carousel--snap'),
+      previous:   null, // generated in #createControl
+      next:       null, // generated in #createControl
+      pagination: null, // generated in #createPagination
+    }
+
+    this.current = undefined        // set in #initializeState
+    this.hasIntersected = new Set() // holds intersection results used on scrollend
+
+    this.elements.root.setAttribute('tabindex', -1)
+    this.elements.root.setAttribute('aria-roledescription', 'carousel')
+
+    this.elements.scroller.setAttribute('role', 'group')
+    this.elements.scroller.setAttribute('aria-label', 'Items Scroller')
+    this.elements.scroller.setAttribute('aria-live', 'Polite')
+
+    this.#createObservers()
+    this.#createPagination()
+    this.#createControls()
+    this.#initializeState()
+    this.#listen()
+    this.#synchronize()
+  }
+
+  #synchronize() {
+    for (let observation of this.hasIntersected) {
+      // toggle inert when it's not intersecting
+      observation.target
+        .toggleAttribute('inert', !observation.isIntersecting)
+
+      // toggle aria-selected on pagination dots
+      const dot = this.elements.pagination
+        .children[this.#getElementIndex(observation.target)]
+
+      dot.setAttribute('aria-selected', observation.isIntersecting)
+      dot.setAttribute('tabindex', !observation.isIntersecting ? '-1' : '0')
+
+      // stash the intersecting snap element
+      if (observation.isIntersecting) {
+        this.current = observation.target
+        this.goToElement({
+          scrollport: this.elements.pagination,
+          element: dot,
+        })
+      }
+    }
+
+    this.#updateControls()
+    this.hasIntersected.clear()
+  }
+
+  goNext() {
+    const next = this.current.nextElementSibling
+
+    if (this.current === next)
+      return
+
+    if (next) {
+      this.goToElement({
+        scrollport: this.elements.scroller,
+        element: next,
+      })
+      this.current = next
+    }
+    else {
+      console.log('at the end')
+    }
+  }
+
+  goPrevious() {
+    const previous = this.current.previousElementSibling
+
+    if (this.current === previous)
+      return
+
+    if (previous) {
+      this.goToElement({
+        scrollport: this.elements.scroller,
+        element: previous,
+      })
+      this.current = previous
+    }
+    else {
+      console.log('at the beginning')
+    }
+  }
+
+  goToElement({scrollport, element}) {
+    const dir = this.#documentDirection()
+
+    const delta = Math.abs(scrollport.offsetLeft - element.offsetLeft)
+    const scrollerPadding = parseInt(getComputedStyle(scrollport)['padding-left'])
+
+    const pos = scrollport.clientWidth / 2 > delta
+      ? delta - scrollerPadding
+      : delta + scrollerPadding
+
+    scrollport.scrollTo(dir === 'ltr' ? pos : pos*-1, 0)
+  }
+
+  #updateControls() {
+    const {lastElementChild:last, firstElementChild:first} = this.elements.scroller
+
+    const isAtEnd   = this.current === last
+    const isAtStart = this.current === first
+
+    // before we possibly disable a button
+    // shift the focus to the complimentary button
+    if (document.activeElement === this.elements.next && isAtEnd)
+      this.elements.previous.focus()
+    else if (document.activeElement === this.elements.previous && isAtStart)
+      this.elements.next.focus()
+
+    this.elements.next.toggleAttribute('disabled', isAtEnd)
+    this.elements.previous.toggleAttribute('disabled', isAtStart)
+  }
+
+  #listen() {
+    // observe children intersection
+    for (let item of this.elements.snaps)
+      this.carousel_observer.observe(item)
+
+    // watch document for removal of this carousel node
+    this.mutation_observer.observe(document, {
+      childList: true,
+      subtree: true,
+    })
+
+    // scrollend listener for sync
+    this.elements.scroller.addEventListener('scrollend', this.#synchronize.bind(this))
+    this.elements.next.addEventListener('click', this.goNext.bind(this))
+    this.elements.previous.addEventListener('click', this.goPrevious.bind(this))
+    this.elements.pagination.addEventListener('click', this.#handlePaginate.bind(this))
+    this.elements.root.addEventListener('keydown', this.#handleKeydown.bind(this))
+  }
+
+  #unlisten() {
+    for (let item of this.elements.snaps)
+      this.carousel_observer.unobserve(item)
+
+    this.mutation_observer.disconnect()
+
+    this.elements.scroller.removeEventListener('scrollend', this.#synchronize)
+    this.elements.next.removeEventListener('click', this.goNext)
+    this.elements.previous.removeEventListener('click', this.goPrevious)
+    this.elements.pagination.removeEventListener('click', this.#handlePaginate)
+    this.elements.root.removeEventListener('keydown', this.#handleKeydown)
+  }
+
+  #createObservers() {
+    this.carousel_observer = new IntersectionObserver(observations => {
+      for (let observation of observations) {
+        this.hasIntersected.add(observation)
+
+        // toggle --in-view class if intersecting or not
+        observation.target.classList
+          .toggle('--in-view', observation.isIntersecting)
+      }
+    }, {
+      root: this.elements.scroller,
+      threshold: .6,
+    })
+
+    this.mutation_observer = new MutationObserver((mutationList, observer) => {
+      mutationList
+        .filter(x => x.removedNodes.length > 0)
+        .forEach(mutation => {
+          [...mutation.removedNodes]
+            .filter(x => x.querySelector('.gui-carousel') === this.elements.root)
+            .forEach(removedEl => {
+              this.#unlisten()
+            })
+        })
+    })
+  }
+
+  #initializeState() {
+    const startIndex = this.elements.root.hasAttribute('carousel-start')
+      ? this.elements.root.getAttribute('carousel-start') - 1
+      : 0
+
+    this.current = this.elements.snaps[startIndex]
+    this.#handleScrollStart()
+
+    // each snap target needs a marker for pagination
+    // each snap needs some a11y love
+    this.elements.snaps.forEach((snapChild, index) => {
+      this.hasIntersected.add({
+        isIntersecting: index === 0,
+        target: snapChild,
+      })
+
+      this.elements.pagination
+        .appendChild(this.#createMarker(snapChild, index))
+
+      snapChild.setAttribute('aria-label', `${index+1} of ${this.elements.snaps.length}`)
+      snapChild.setAttribute('aria-roledescription', 'item')
+    })
+  }
+
+  #handleScrollStart() {
+    if (this.elements.root.hasAttribute('carousel-start')) {
+      const itemIndex = this.elements.root.getAttribute('carousel-start')
+      const startElement = this.elements.snaps[itemIndex - 1]
+
+      this.elements.snaps.forEach(snap =>
+        snap.style.scrollSnapAlign = 'unset')
+
+      startElement.style.scrollSnapAlign = null
+      startElement.style.animation = 'carousel-scrollstart 1ms'
+
+      startElement.addEventListener('animationend', e => {
+        startElement.animation = null
+        this.elements.snaps.forEach(snap =>
+          snap.style.scrollSnapAlign = null)
+      }, {once: true})
+    }
+  }
+
+  #handlePaginate(e) {
+    if (e.target.classList.contains('gui-carousel--pagination'))
+      return
+
+    e.target.setAttribute('aria-selected', true)
+    const item = this.elements.snaps[this.#getElementIndex(e.target)]
+
+    this.goToElement({
+      scrollport: this.elements.scroller,
+      element: item,
+    })
+  }
+
+  #handleKeydown(e) {
+    const dir = this.#documentDirection()
+    const idx = this.#getElementIndex(e.target)
+
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault()
+
+        const next_offset = dir === 'ltr' ? 1 : -1
+        const next_control = dir === 'ltr' ? this.elements.next : this.elements.previous
+
+        if (e.target.closest('.gui-carousel--pagination'))
+          this.elements
+            .pagination.children[idx + next_offset]
+            ?.focus()
+        else {
+          if (document.activeElement === next_control)
+            this.#keypressAnimation(next_control)
+          next_control.focus()
+        }
+
+        dir === 'ltr' ? this.goNext() : this.goPrevious()
+        break
+      case 'ArrowLeft':
+        e.preventDefault()
+
+        const previous_offset = dir === 'ltr' ? -1 : 1
+        const previous_control = dir === 'ltr' ? this.elements.previous : this.elements.next
+
+        if (e.target.closest('.gui-carousel--pagination'))
+          this.elements
+            .pagination.children[idx + previous_offset]
+            ?.focus()
+        else {
+          if (document.activeElement === previous_control)
+            this.#keypressAnimation(previous_control)
+          previous_control.focus()
+        }
+
+        dir === 'ltr' ? this.goPrevious() : this.goNext()
+        break
+    }
+  }
+
+  #getElementIndex(element) {
+    let index = 0
+    while (element = element.previousElementSibling)
+      index++
+    return index
+  }
+
+  #createPagination() {
+    let nav = document.createElement('nav')
+    nav.className = 'gui-carousel--pagination'
+    this.elements.root.appendChild(nav)
+
+    this.elements.pagination = nav
+  }
+
+  #createMarker(item, index) {
+    const markerType = this.elements.root.getAttribute('carousel-pagination')
+    index++ // user facing index shouldnt start at 0
+
+    if (markerType == 'gallery')
+      return this.#createMarkerGallery({index, type: markerType, item})
+    else
+      return this.#createMarkerDot({index, type: markerType, item})
+  }
+
+  #createMarkerDot({index, type, item}) {
+    const marker = document.createElement('button')
+    const img = item.querySelector('img')
+    const caption = item.querySelector('figcaption')
+    marker.className = 'gui-carousel--control'
+    marker.type = 'button'
+    marker.role = 'tab'
+    marker.title = `Item ${index}: ${img?.alt || caption?.innerText}`
+    marker.setAttribute('aria-label', img?.alt || caption?.innerText)
+    marker.setAttribute('aria-setsize', this.elements.snaps.length)
+    marker.setAttribute('aria-posinset', index)
+    marker.setAttribute('aria-controls', `carousel-item-${index}`)
+    return marker
+  }
+
+  #createMarkerGallery({index, type, item}) {
+    const marker = document.createElement('button')
+    const img = item.querySelector('img')
+    marker.style.backgroundImage = `url(${img.src})`
+    marker.className = 'gui-carousel--control --gallery'
+    marker.type = 'button'
+    marker.role = 'tab'
+    marker.title = `Item ${index}: ${img.alt}`
+    marker.setAttribute('aria-label', img.alt)
+    marker.setAttribute('aria-setsize', this.elements.snaps.length)
+    marker.setAttribute('aria-posinset', index)
+    marker.setAttribute('aria-controls', `carousel-item-${index}`)
+    return marker
+  }
+
+  #createControls() {
+    let controls = document.createElement('div')
+    controls.className = 'gui-carousel--controls'
+
+    let prevBtn = this.#createControl('previous')
+    let nextBtn = this.#createControl('next')
+
+    controls.appendChild(prevBtn)
+    controls.appendChild(nextBtn)
+
+    this.elements.previous = prevBtn
+    this.elements.next = nextBtn
+    this.elements.root.prepend(controls)
+  }
+
+  #createControl(btnType) {
+    let control = document.createElement('button')
+    let userFacingText = `${btnType.charAt(0).toUpperCase() + btnType.slice(1)} Item`
+
+    control.type = 'button'
+    control.title = userFacingText
+    control.className = `gui-carousel--control --${btnType}`
+    control.setAttribute('aria-controls', 'gui-carousel--controls')
+    control.setAttribute('aria-label', userFacingText)
+
+    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('aria-hidden', 'true')
+    svg.setAttribute('viewBox', '0 0 20 20')
+    svg.setAttribute('fill', 'currentColor')
+
+    let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('fill-rule', 'evenodd')
+    path.setAttribute('clip-rule', 'evenodd')
+
+    let previousPath = 'M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z'
+    let nextPath = 'M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z'
+
+    path.setAttribute('d', btnType === 'next' ? nextPath : previousPath)
+
+    svg.appendChild(path)
+    control.appendChild(svg)
+
+    return control
+  }
+
+  #keypressAnimation(element) {
+    element.style.animation = 'gui-carousel--control-keypress 145ms var(--ease-2)'
+    element.addEventListener('animationend', e => {
+      element.style.animation = null
+    }, {once: true})
+  }
+
+  #documentDirection() {
+    return document.firstElementChild.getAttribute('dir') || 'ltr'
+  }
+}
+
+document.querySelectorAll('.gui-carousel').forEach(element => {
+  new Carousel(element)
+})
diff --git a/src/site/content/en/patterns/components/carousel/assets/style.css b/src/site/content/en/patterns/components/carousel/assets/style.css
new file mode 100644
index 00000000000..ed819a33960
--- /dev/null
+++ b/src/site/content/en/patterns/components/carousel/assets/style.css
@@ -0,0 +1,246 @@
+:where(.gui-carousel) {
+  --_carousel-item-size: 80%;
+  --_carousel-gutters: max(4rem, calc((100% - var(--_carousel-item-size)) / 2));
+  --_carousel-scrollbar-gutter: var(--size-6);
+  --_carousel-pagination-size: var(--size-8);
+
+  display: grid;
+  grid-template-columns: [carousel-gutter] var(--_carousel-gutters) 1fr [carousel-gutter] var(--_carousel-gutters);
+  grid-template-rows:
+    [carousel-scroller] 1fr
+    [carousel-pagination] var(--_carousel-pagination-size);
+
+  &:focus-visible {
+    outline-offset: -5px;
+  }
+
+  /* configuration handlers */
+  &[carousel-pagination="gallery"] {
+    --_carousel-pagination-size: var(--size-10);
+
+    & > .gui-carousel--pagination {
+      -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 5%, 95%, #000, #0000);
+    }
+  }
+
+  &[carousel-pagination="none"] {
+    grid-template-rows: [carousel-scroller] 1fr;
+
+    & > .gui-carousel--pagination {
+      display: none;
+    }
+  }
+
+  &[carousel-controls="none"] {
+    grid-template-columns: 0 1fr 0;
+
+    & > .gui-carousel--controls {
+      display: none;
+    }
+  }
+
+  &[carousel-scrollbar="none"] {
+    --_carousel-pagination-size: var(--size-5);
+
+    & > .gui-carousel--scroller {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    & > .gui-carousel--pagination {
+      place-self: start center;
+    }
+  }
+
+  &[carousel-snapstop="always"] .gui-carousel--snap {
+    scroll-snap-stop: always;
+  }
+}
+
+:where(.gui-carousel--scroller) {
+  grid-row: 1;
+  grid-column: 1/-1;
+
+  display: grid;
+  grid-auto-columns: 100%;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--_carousel-gutters);
+
+  padding-block: var(--size-2) var(--_carousel-scrollbar-gutter);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: var(--_carousel-gutters);
+  padding-inline: var(--_carousel-gutters);
+
+  @media (--motionOK) {
+    scroll-behavior: smooth;
+  }
+}
+
+:where(.gui-carousel--snap) {
+  scroll-snap-align: center;
+}
+
+:where(.gui-carousel--controls) {
+  display: flex;
+  justify-content: space-between;
+  padding-inline: var(--_carousel-gutters);
+  display: contents;
+
+  & > .gui-carousel--control {
+    margin-block-end: var(--_carousel-scrollbar-gutter);
+
+    &:not([disabled="true"]):active {
+      transform: scale(.95);
+    }
+  }
+}
+
+:where(.gui-carousel--control) {
+  --_shadow-size: 0;
+  --_shadow-highlight-light: hsl(0 0% 50% / 10%);
+  --_shadow-highlight-dark: hsl(0 0% 100% / 20%);
+  --_shadow-highlight: var(--_shadow-highlight-light);
+
+  grid-row: 1;
+  place-self: center;
+  background: var(--surface-1);
+  color: var(--text-2);
+  inline-size: var(--size-8);
+  aspect-ratio: var(--ratio-square);
+  border-radius: var(--radius-round);
+  box-shadow: 0 0 0 var(--_shadow-size) var(--_shadow-highlight);
+  border: var(--border-size-1) solid transparent;
+  text-indent: 10ch;
+  padding: 0;
+  overflow: hidden;
+  z-index: var(--layer-1);
+  transition: opacity .5s var(--ease-2) .5s;
+
+  @media (--motionOK) {
+    transition:
+      opacity .5s var(--ease-2) .5s,
+      transform .2s var(--ease-4),
+      box-shadow .2s var(--ease-4),
+      outline-offset 145ms var(--ease-2)
+    ;
+  }
+
+  @media (--OSdark) {
+    --_shadow-highlight: var(--_shadow-highlight-dark);
+  }
+
+  &:hover {
+    --_shadow-size: 6px;
+  }
+
+  &.--previous {
+    grid-column: 1;
+  }
+
+  &.--next {
+    grid-column: 3;
+  }
+
+  @nest [dir="rtl"] & > svg {
+    transform: rotateY(180deg);
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    transition-delay: 0s;
+
+    & > svg {
+      opacity: .25;
+    }
+  }
+
+  &:not([disabled]):is(:hover, :focus-visible) {
+    color: var(--link);
+  }
+
+  &:not([disabled]) svg > path {
+    @media (--motionOK) {
+      --_transform: translateX(var(--_x)) scale(.95);
+      transition: transform .5s var(--ease-squish-3);
+      transform-origin: center center;
+    }
+  }
+
+  &[aria-label="Next Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
+    --_x: 2px;
+    transform: var(--_transform);
+  }
+
+  &[aria-label="Previous Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
+    --_x: -2px;
+    transform: var(--_transform);
+  }
+}
+
+:where(.gui-carousel--pagination) {
+  grid-column: 1/-1;
+  place-self: center;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--size-2);
+
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+
+  padding-block: var(--size-2);
+  padding-inline: var(--size-4);
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (--motionOK) {
+    scroll-behavior: smooth;
+  }
+
+  @nest [carousel-pagination="gallery"] & {
+    margin-block-end: 0;
+  }
+
+  & > [aria-selected="true"] {
+    background: var(--link);
+  }
+
+  & > [aria-selected="false"] {
+    transform: scale(.75);
+  }
+
+  & > button {
+    inline-size: var(--size-3);
+    background-color: var(--surface-4);
+    border: var(--border-size-1) solid transparent;
+
+    &.--gallery {
+      inline-size: var(--size-fluid-5);
+      border-radius: var(--radius-2);
+      border: none;
+      background-origin: border-box;
+      background-size: cover;
+    }
+  }
+}
+
+@keyframes gui-carousel--control-keypress {
+  0%  { outline-offset: 5px }
+  50% { outline-offset: 0; }
+}
+
+@keyframes carousel-scrollstart {
+  from { scroll-snap-align: center }
+  to   { scroll-snap-align: unset }
+}
diff --git a/src/site/content/en/patterns/components/carousel/demo.njk b/src/site/content/en/patterns/components/carousel/demo.njk
new file mode 100644
index 00000000000..71b20142ef6
--- /dev/null
+++ b/src/site/content/en/patterns/components/carousel/demo.njk
@@ -0,0 +1,61 @@
+---
+patternId: components/carousel
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      @layer base,library,carousel,carousel-custom;@layer base{:where(html){--font-sans:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.05em;--font-letterspacing-3:.075em;--font-letterspacing-4:.15em;--font-letterspacing-5:.5em;--font-letterspacing-6:.75em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50%,at 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50%,at -250%,#374151,#111827,#000);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%}}@-webkit-keyframes fade-in{to{opacity:1}}@keyframes fade-in{to{opacity:1}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-up{to{transform:scale(1.25)}}@-webkit-keyframes scale-down{to{transform:scale(.75)}}@keyframes scale-down{to{transform:scale(.75)}}@-webkit-keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@-webkit-keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@-webkit-keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@-webkit-keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@-webkit-keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@-webkit-keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@-webkit-keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@-webkit-keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@-webkit-keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@-webkit-keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes float{50%{transform:translateY(-25%)}}@keyframes float{50%{transform:translateY(-25%)}}@-webkit-keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@-webkit-keyframes pulse{50%{transform:scale(.9)}}@keyframes pulse{50%{transform:scale(.9)}}}@layer library{:where(html){--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollthumb-color:var(--gray-6);-webkit-text-size-adjust:none;accent-color:var(--link);background-color:var(--surface-1);block-size:100%;caret-color:var(--link);color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}@media (dynamic-range:high){@supports (color(display-p3 0 .5 1)){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}}@media (prefers-color-scheme:dark){:where(html){--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}@media (prefers-color-scheme:light){:where(html){--scrollthumb-color:var(--gray-7)}}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset):not(progress):not(meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){-webkit-text-decoration-color:var(--indigo-2);text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){-webkit-text-decoration-color:var(--grape-2);text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input,textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:.75ch;padding-inline:1.25ch 0}:where(textarea,select,input:not(button):not(button[type]):not(input[type=button]):not(input[type=submit]):not(input[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not(button):not(button[type]):not(input[type=button]):not(input[type=submit]):not(input[type=reset])){background-color:#171a1c}}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){-webkit-padding-start:var(--size-8);padding-inline-start:var(--size-8)}:where(li){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){-webkit-margin-before:var(--size-5);margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){-webkit-text-decoration-color:var(--blue-5);text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}@media (prefers-color-scheme:dark){:where(dialog){background-color:var(--surface-2)}}:where(dialog)::-webkit-backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}:where(dialog)::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}:where(html[\:has\(dialog\[open\]\)]){overflow:hidden}:where(html:has(dialog[open])){overflow:hidden}:where(menu){display:flex;gap:var(--size-3);-webkit-padding-start:0;padding-inline-start:0}:where(sup){font-size:.5em}}@layer carousel{:where(.gui-carousel){--_carousel-item-size: 80%;--_carousel-gutters: max(4rem, calc((100% - var(--_carousel-item-size)) / 2));--_carousel-scrollbar-gutter: var(--size-6);--_carousel-pagination-size: var(--size-8);display:grid;grid-template-columns:[carousel-gutter] var(--_carousel-gutters) 1fr [carousel-gutter] var(--_carousel-gutters);grid-template-rows:[carousel-scroller] 1fr [carousel-pagination] var(--_carousel-pagination-size)}:where(.gui-carousel):focus-visible{outline-offset:-5px}[carousel-pagination=gallery]:where(.gui-carousel){--_carousel-pagination-size: var(--size-10)}[carousel-pagination=gallery]:where(.gui-carousel)>.gui-carousel--pagination{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 5%,95%,#000,rgba(0,0,0,0))}[carousel-pagination=none]:where(.gui-carousel){grid-template-rows:[carousel-scroller] 1fr}[carousel-pagination=none]:where(.gui-carousel)>.gui-carousel--pagination{display:none}[carousel-controls=none]:where(.gui-carousel){grid-template-columns:0 1fr 0}[carousel-controls=none]:where(.gui-carousel)>.gui-carousel--controls{display:none}[carousel-scrollbar=none]:where(.gui-carousel){--_carousel-pagination-size: var(--size-5)}[carousel-scrollbar=none]:where(.gui-carousel)>.gui-carousel--scroller{scrollbar-width:none}[carousel-scrollbar=none]:where(.gui-carousel)>.gui-carousel--scroller::-webkit-scrollbar{display:none}[carousel-scrollbar=none]:where(.gui-carousel)>.gui-carousel--pagination{place-self:start center}[carousel-snapstop=always]:where(.gui-carousel) .gui-carousel--snap{scroll-snap-stop:always}:where(.gui-carousel--scroller){grid-row:1;grid-column:1/-1;display:grid;grid-auto-columns:100%;grid-auto-flow:column;align-items:center;gap:var(--_carousel-gutters);padding-block:var(--size-2) var(--_carousel-scrollbar-gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--_carousel-gutters);padding-inline:var(--_carousel-gutters)}@media (prefers-reduced-motion: no-preference){:where(.gui-carousel--scroller){scroll-behavior:smooth}}:where(.gui-carousel--snap){scroll-snap-align:center}:where(.gui-carousel--controls){display:flex;justify-content:space-between;padding-inline:var(--_carousel-gutters);display:contents}:where(.gui-carousel--controls)>.gui-carousel--control{-webkit-margin-after:var(--_carousel-scrollbar-gutter);margin-block-end:var(--_carousel-scrollbar-gutter)}:where(.gui-carousel--controls)>.gui-carousel--control:not([disabled="true"]):active{transform:scale(.95)}:where(.gui-carousel--control){--_shadow-size: 0;--_shadow-highlight-light: hsl(0 0% 50% / 10%);--_shadow-highlight-dark: hsl(0 0% 100% / 20%);--_shadow-highlight: var(--_shadow-highlight-light);grid-row:1;place-self:center;background:var(--surface-1);color:var(--text-2);inline-size:var(--size-8);aspect-ratio:var(--ratio-square);border-radius:var(--radius-round);box-shadow:0 0 0 var(--_shadow-size) var(--_shadow-highlight);border:var(--border-size-1) solid transparent;text-indent:10ch;padding:0;overflow:hidden;z-index:var(--layer-1);transition:opacity .5s var(--ease-2) .5s}@media (prefers-reduced-motion: no-preference){:where(.gui-carousel--control){transition:opacity .5s var(--ease-2) .5s,transform .2s var(--ease-4),box-shadow .2s var(--ease-4),outline-offset 145ms var(--ease-2)}}@media (prefers-color-scheme: dark){:where(.gui-carousel--control){--_shadow-highlight: var(--_shadow-highlight-dark)}}:where(.gui-carousel--control):hover{--_shadow-size: 6px}.--previous:where(.gui-carousel--control){grid-column:1}.--next:where(.gui-carousel--control){grid-column:3}[dir=rtl] :where(.gui-carousel--control)>svg{transform:rotateY(180deg)}[disabled]:where(.gui-carousel--control){cursor:not-allowed;transition-delay:0s}[disabled]:where(.gui-carousel--control)>svg{opacity:.25}:where(.gui-carousel--control):not([disabled]):is(:hover,:focus-visible){color:var(--link)}@media (prefers-reduced-motion: no-preference){:where(.gui-carousel--control):not([disabled]) svg>path{--_transform: translateX(var(--_x)) scale(.95);transition:transform .5s var(--ease-squish-3);transform-origin:center center}}[aria-label="Next Item"]:where(.gui-carousel--control):not([disabled]):is(:hover,:focus-visible) svg>path{--_x: 2px;transform:var(--_transform)}[aria-label="Previous Item"]:where(.gui-carousel--control):not([disabled]):is(:hover,:focus-visible) svg>path{--_x: -2px;transform:var(--_transform)}:where(.gui-carousel--pagination){grid-column:1/-1;place-self:center;display:grid;grid-auto-flow:column;gap:var(--size-2);max-inline-size:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-block:var(--size-2);padding-inline:var(--size-4);scrollbar-width:none}:where(.gui-carousel--pagination)::-webkit-scrollbar{display:none}@media (prefers-reduced-motion: no-preference){:where(.gui-carousel--pagination){scroll-behavior:smooth}}[carousel-pagination=gallery] :where(.gui-carousel--pagination){-webkit-margin-after:0;margin-block-end:0}:where(.gui-carousel--pagination)>[aria-selected=true]{background:var(--link)}:where(.gui-carousel--pagination)>[aria-selected=false]{transform:scale(.75)}:where(.gui-carousel--pagination)>button{inline-size:var(--size-3);background-color:var(--surface-4);border:var(--border-size-1) solid transparent}:where(.gui-carousel--pagination)>button.--gallery{inline-size:var(--size-fluid-5);border-radius:var(--radius-2);border:none;background-origin:border-box;background-size:cover}@-webkit-keyframes gui-carousel--control-keypress{0%{outline-offset:5px}50%{outline-offset:0}}@keyframes gui-carousel--control-keypress{0%{outline-offset:5px}50%{outline-offset:0}}@-webkit-keyframes carousel-scrollstart{0%{scroll-snap-align:center}to{scroll-snap-align:unset}}@keyframes carousel-scrollstart{0%{scroll-snap-align:center}to{scroll-snap-align:unset}}}@layer carousel-custom{@media (prefers-reduced-motion: no-preference){.animate-visibility{transition:transform .3s var(--ease-3);will-change:transform}.gui-carousel--snap:not(.--in-view) .animate-visibility{transform:scale(.9)}}.fullwidth>.gui-carousel{--_carousel-item-size: 100%}.fullwidth .gui-carousel--scroller{padding-inline:0}.fullwidth .captioned-image{border-radius:0;box-shadow:none;max-inline-size:100%}.fullwidth .captioned-image>img{inline-size:100%}.constrained{max-inline-size:500px;justify-self:center}.scrollhint .gui-carousel--scroller{-moz-column-gap:var(--size-2);column-gap:var(--size-2)}.captioned-image{display:grid;grid:[stack] 100% / [stack] 100%;align-items:end;box-shadow:var(--shadow-4);border-radius:var(--radius-4);overflow:hidden;max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;margin-inline:auto}.captioned-image>*{grid-area:stack}.captioned-image>figcaption{max-inline-size:100%;background:linear-gradient(to top,rgba(0,0,0,.93333),75%,rgba(0,0,0,0));justify-self:stretch;text-align:center;padding-block:var(--size-9) var(--size-3);padding-inline:var(--size-3)}.captioned-image>figcaption>a{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.93333)}.captioned-image>img{-o-object-fit:cover;object-fit:cover;background-color:var(--surface-3);box-shadow:var(--inner-shadow-1)}.product-image{place-content:start;place-items:start}.product-image sup{font-size:.5em}.product-image h4{font-size:var(--font-size-3);font-weight:var(--font-weight-4)}.testimonial>blockquote{-webkit-border-start:none;border-inline-start:none}.testimonial>blockquote>p{font-size:var(--font-size-5);font-weight:var(--font-weight-2);line-height:var(--font-lineheight-0);text-align:center}.testimonial cite{-webkit-border-start:none;border-inline-start:none}.paged-collections .gui-carousel--snap{display:grid;gap:var(--size-5)}@media (min-width: 480px){.paged-collections .gui-carousel--snap{grid-template-columns:repeat(auto-fit,minmax(40%,1fr))}}@media (min-width: 768px){.paged-collections .gui-carousel--snap{grid-template-columns:repeat(4,1fr)}}.hubs .gui-carousel--pagination>button{aspect-ratio:var(--ratio-ultrawide);border-radius:0;inline-size:var(--size-5)}.win-8-example{display:grid;gap:var(--size-5);grid-template-columns:repeat(4,1fr);max-inline-size:70vw;margin-inline:auto}.win-8-example.v2{grid-template-columns:repeat(3,1fr)}.win-8-example.v2>div{aspect-ratio:var(--ratio-landscape)}.win-8-example.v2>div:first-of-type{align-self:stretch}.win-8-example.v3{grid-template-columns:repeat(4,1fr)}.win-8-example.v3>div:first-of-type{grid-column:initial;grid-row:initial}.win-8-example>div{background:var(--indigo-4);box-shadow:var(--shadow-3);border:1px solid transparent;aspect-ratio:var(--ratio-square);opacity:0}.--in-view .win-8-example>div{-webkit-animation:var(--animation-fade-in) forwards;animation:var(--animation-fade-in) forwards;-webkit-animation-duration:2s;animation-duration:2s}.win-8-example>div:first-of-type{grid-column:span 2;grid-row:span 2}.win-8-example>div:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}.win-8-example>div:nth-of-type(3){-webkit-animation-delay:.3s;animation-delay:.3s}.win-8-example>div:nth-of-type(4){-webkit-animation-delay:.4s;animation-delay:.4s}.win-8-example>div:nth-of-type(5){-webkit-animation-delay:.5s;animation-delay:.5s}.win-8-example>div:nth-of-type(6){-webkit-animation-delay:.6s;animation-delay:.6s}.win-8-example>div:nth-of-type(7){-webkit-animation-delay:.7s;animation-delay:.7s}.win-8-example>div:nth-of-type(8){-webkit-animation-delay:.8s;animation-delay:.8s}}body{display:grid;gap:10vh;place-content:center;overflow-x:hidden;max-inline-size:100vw}body>section:first-of-type{-webkit-margin-before:10vh;margin-block-start:10vh}body>section:last-of-type{-webkit-margin-after:10vh;margin-block-end:10vh}section{display:grid;gap:2vh}section h2,section>header{margin-inline:auto;text-align:center}.github-corner{position:absolute;right:4px;width:80px;height:80px;fill:var(--surface-4);color:var(--surface-1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner>svg{fill:inherit;stroke:inherit;position:absolute;top:0;right:0}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <div
+        class="gui-carousel"
+
+        carousel-pagination="dots"
+        carousel-controls="auto"
+        carousel-scrollbar="auto"
+        carousel-snapstop="auto"
+
+        aria-label="Featured Items Carousel"
+      >
+        <div class="gui-carousel--scroller">
+
+          <div class="gui-carousel--snap">
+            <figure class="animate-visibility captioned-image">
+              <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/this/1280/720.webp" alt="Blue ocean with a large wave">
+              <figcaption>
+                <a href="#">Learn more about large ocean waves</a>
+              </figcaption>
+            </figure>
+          </div>
+
+          <div class="gui-carousel--snap">
+            <figure class="animate-visibility captioned-image">
+              <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/is/1280/720.webp" alt="Frosty orange desert sunset">
+              <figcaption>
+                <a href="#">Learn more about warm deserts</a>
+              </figcaption>
+            </figure>
+          </div>
+
+          <div class="gui-carousel--snap">
+            <figure class="animate-visibility captioned-image">
+              <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/a/1280/720.webp" alt="African sahara with a giraffe">
+              <figcaption>
+                <a href="#">Learn more about giraffe's</a>
+              </figcaption>
+            </figure>
+          </div>
+
+        </div>
+      </div>
+
+    {% set script %}
+      (()=>{if(!("onscrollend"in window)){let r=function(n,l,m){let a=n[l];n[l]=function(){let o=Array.prototype.slice.apply(arguments,[0]);a.apply(this,o),o.unshift(a),m.apply(this,o)}},s=function(n,l,m,a){if(l!="scroll"&&l!="scrollend")return;let o=this,c=t.get(o);if(c===void 0){let d=0;c={scrollListener:g=>{clearTimeout(d),d=setTimeout(()=>{e.size?setTimeout(c.scrollListener,100):(o.dispatchEvent(u),d=0)},100)},listeners:0},n.apply(o,["scroll",c.scrollListener]),t.set(o,c)}c.listeners++},i=function(n,l,m){if(l!="scroll"&&l!="scrollend")return;let a=this,o=t.get(a);o!==void 0&&(o[l]--,--o.listeners>0||(n.apply(a,["scroll",o.scrollListener]),t.delete(a)))},u=new Event("scrollend"),e=new Set;document.addEventListener("touchstart",n=>{for(let l of n.changedTouches)e.add(l.identifier)},{passive:!0}),document.addEventListener("touchend",n=>{for(let l of n.changedTouches)e.delete(l.identifier)},{passive:!0});let t=new WeakMap;r(Element.prototype,"addEventListener",s),r(window,"addEventListener",s),r(document,"addEventListener",s),r(Element.prototype,"removeEventListener",i),r(window,"removeEventListener",i),r(document,"removeEventListener",i)}var h=class{constructor(e){this.elements={root:e,scroller:e.querySelector(".gui-carousel--scroller"),snaps:e.querySelectorAll(".gui-carousel--snap"),previous:null,next:null,pagination:null},this.current=void 0,this.hasIntersected=new Set,this.elements.root.setAttribute("tabindex",-1),this.elements.root.setAttribute("aria-roledescription","carousel"),this.elements.scroller.setAttribute("role","group"),this.elements.scroller.setAttribute("aria-label","Items Scroller"),this.elements.scroller.setAttribute("aria-live","Polite"),this.#u(),this.#d(),this.#b(),this.#h(),this.#a(),this.#e()}#e(){for(let e of this.hasIntersected){e.target.toggleAttribute("inert",!e.isIntersecting);let t=this.elements.pagination.children[this.#t(e.target)];t.setAttribute("aria-selected",e.isIntersecting),t.setAttribute("tabindex",e.isIntersecting?"0":"-1"),e.isIntersecting&&(this.current=e.target,this.goToElement({scrollport:this.elements.pagination,element:t}))}this.#o(),this.hasIntersected.clear()}goNext(){let e=this.current.nextElementSibling;this.current!==e&&(e?(this.goToElement({scrollport:this.elements.scroller,element:e}),this.current=e):console.log("at the end"))}goPrevious(){let e=this.current.previousElementSibling;this.current!==e&&(e?(this.goToElement({scrollport:this.elements.scroller,element:e}),this.current=e):console.log("at the beginning"))}goToElement({scrollport:e,element:t}){let r=this.#l(),s=Math.abs(e.offsetLeft-t.offsetLeft),i=parseInt(getComputedStyle(e)["padding-left"]),n=e.clientWidth/2>s?s-i:s+i;e.scrollTo(r==="ltr"?n:n*-1,0)}#o(){let{lastElementChild:e,firstElementChild:t}=this.elements.scroller,r=this.current===e,s=this.current===t;document.activeElement===this.elements.next&&r?this.elements.previous.focus():document.activeElement===this.elements.previous&&s&&this.elements.next.focus(),this.elements.next.toggleAttribute("disabled",r),this.elements.previous.toggleAttribute("disabled",s)}#a(){for(let e of this.elements.snaps)this.carousel_observer.observe(e);this.mutation_observer.observe(document,{childList:!0,subtree:!0}),this.elements.scroller.addEventListener("scrollend",this.#e.bind(this)),this.elements.next.addEventListener("click",this.goNext.bind(this)),this.elements.previous.addEventListener("click",this.goPrevious.bind(this)),this.elements.pagination.addEventListener("click",this.#s.bind(this)),this.elements.root.addEventListener("keydown",this.#r.bind(this))}#c(){for(let e of this.elements.snaps)this.carousel_observer.unobserve(e);this.mutation_observer.disconnect(),this.elements.scroller.removeEventListener("scrollend",this.#e),this.elements.next.removeEventListener("click",this.goNext),this.elements.previous.removeEventListener("click",this.goPrevious),this.elements.pagination.removeEventListener("click",this.#s),this.elements.root.removeEventListener("keydown",this.#r)}#u(){this.carousel_observer=new IntersectionObserver(e=>{for(let t of e)this.hasIntersected.add(t),t.target.classList.toggle("--in-view",t.isIntersecting)},{root:this.elements.scroller,threshold:.6}),this.mutation_observer=new MutationObserver((e,t)=>{e.filter(r=>r.removedNodes.length>0).forEach(r=>{[...r.removedNodes].filter(s=>s.querySelector(".gui-carousel")===this.elements.root).forEach(s=>{this.#c()})})})}#h(){let e=this.elements.root.hasAttribute("carousel-start")?this.elements.root.getAttribute("carousel-start")-1:0;this.current=this.elements.snaps[e],this.#m(),this.elements.snaps.forEach((t,r)=>{this.hasIntersected.add({isIntersecting:r===0,target:t}),this.elements.pagination.appendChild(this.#g(t,r)),t.setAttribute("aria-label",`${r+1} of ${this.elements.snaps.length}`),t.setAttribute("aria-roledescription","item")})}#m(){if(this.elements.root.hasAttribute("carousel-start")){let e=this.elements.root.getAttribute("carousel-start"),t=this.elements.snaps[e-1];this.elements.snaps.forEach(r=>r.style.scrollSnapAlign="unset"),t.style.scrollSnapAlign=null,t.style.animation="carousel-scrollstart 1ms",t.addEventListener("animationend",r=>{t.animation=null,this.elements.snaps.forEach(s=>s.style.scrollSnapAlign=null)},{once:!0})}}#s(e){if(e.target.classList.contains("gui-carousel--pagination"))return;e.target.setAttribute("aria-selected",!0);let t=this.elements.snaps[this.#t(e.target)];this.goToElement({scrollport:this.elements.scroller,element:t})}#r(e){let t=this.#l(),r=this.#t(e.target);switch(e.key){case"ArrowRight":e.preventDefault();let s=t==="ltr"?1:-1,i=t==="ltr"?this.elements.next:this.elements.previous;e.target.closest(".gui-carousel--pagination")?this.elements.pagination.children[r+s]?.focus():(document.activeElement===i&&this.#n(i),i.focus()),t==="ltr"?this.goNext():this.goPrevious();break;case"ArrowLeft":e.preventDefault();let n=t==="ltr"?-1:1,l=t==="ltr"?this.elements.previous:this.elements.next;e.target.closest(".gui-carousel--pagination")?this.elements.pagination.children[r+n]?.focus():(document.activeElement===l&&this.#n(l),l.focus()),t==="ltr"?this.goPrevious():this.goNext();break}}#t(e){let t=0;for(;e=e.previousElementSibling;)t++;return t}#d(){let e=document.createElement("nav");e.className="gui-carousel--pagination",this.elements.root.appendChild(e),this.elements.pagination=e}#g(e,t){let r=this.elements.root.getAttribute("carousel-pagination");return t++,r=="gallery"?this.#v({index:t,type:r,item:e}):this.#p({index:t,type:r,item:e})}#p({index:e,type:t,item:r}){let s=document.createElement("button"),i=r.querySelector("img"),n=r.querySelector("figcaption");return s.className="gui-carousel--control",s.type="button",s.role="tab",s.title=`Item ${e}: ${i?.alt||n?.innerText}`,s.setAttribute("aria-label",i?.alt||n?.innerText),s.setAttribute("aria-setsize",this.elements.snaps.length),s.setAttribute("aria-posinset",e),s.setAttribute("aria-controls",`carousel-item-${e}`),s}#v({index:e,type:t,item:r}){let s=document.createElement("button"),i=r.querySelector("img");return s.style.backgroundImage=`url(${i.src})`,s.className="gui-carousel--control --gallery",s.type="button",s.role="tab",s.title=`Item ${e}: ${i.alt}`,s.setAttribute("aria-label",i.alt),s.setAttribute("aria-setsize",this.elements.snaps.length),s.setAttribute("aria-posinset",e),s.setAttribute("aria-controls",`carousel-item-${e}`),s}#b(){let e=document.createElement("div");e.className="gui-carousel--controls";let t=this.#i("previous"),r=this.#i("next");e.appendChild(t),e.appendChild(r),this.elements.previous=t,this.elements.next=r,this.elements.root.prepend(e)}#i(e){let t=document.createElement("button"),r=`${e.charAt(0).toUpperCase()+e.slice(1)} Item`;t.type="button",t.title=r,t.className=`gui-carousel--control --${e}`,t.setAttribute("aria-controls","gui-carousel--controls"),t.setAttribute("aria-label",r);let s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("aria-hidden","true"),s.setAttribute("viewBox","0 0 20 20"),s.setAttribute("fill","currentColor");let i=document.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("fill-rule","evenodd"),i.setAttribute("clip-rule","evenodd");let n="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",l="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z";return i.setAttribute("d",e==="next"?l:n),s.appendChild(i),t.appendChild(s),t}#n(e){e.style.animation="gui-carousel--control-keypress 145ms var(--ease-2)",e.addEventListener("animationend",t=>{e.style.animation=null},{once:!0})}#l(){return document.firstElementChild.getAttribute("dir")||"ltr"}};document.querySelectorAll(".gui-carousel").forEach(u=>{new h(u)});})();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/carousel/index.md b/src/site/content/en/patterns/components/carousel/index.md
new file mode 100644
index 00000000000..afbffc27b81
--- /dev/null
+++ b/src/site/content/en/patterns/components/carousel/index.md
@@ -0,0 +1,20 @@
+---
+layout: pattern
+title: Carousel
+description: |
+  This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the dialog element.
+  <aside style="max-inline-size: fit-content;" class="aside flow bg-tertiary-box-bg color-tertiary-box-text"><p class="cluster "><span class="aside__icon box-block "><svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg">   <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path> </svg></span><strong>Important</strong></p><div class=" flow"> This pattern uses <a href="https://open-props.style">Open Props</a> </div></aside>
+  <br><br>
+  <a href="https://www.youtube.com/watch?v=CXJv6zM003M">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/carousel">Source on Github</a>
+date: 2022-06-01
+height: 450
+---
+
+This pattern shows how to create a color-adaptive, responsive, and accessible
+carousel component.
+
+{% Aside 'important' %}
+This pattern uses [Open Props](https://open-props.style)
+{% endAside %}
+
+<a href="https://www.youtube.com/watch?v=CXJv6zM003M">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/carousel">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/dialog/assets/body.html b/src/site/content/en/patterns/components/dialog/assets/body.html
new file mode 100644
index 00000000000..4c175782e88
--- /dev/null
+++ b/src/site/content/en/patterns/components/dialog/assets/body.html
@@ -0,0 +1,60 @@
+<dialog id="MegaDialog" inert loading modal-mode="mega"> 
+  <form method="dialog">
+    <header> 
+      <section class="icon-headline">
+        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+          <circle cx="8.5" cy="7" r="4"></circle>
+          <line x1="20" y1="8" x2="20" y2="14"></line>
+          <line x1="23" y1="11" x2="17" y2="11"></line>
+        </svg>
+        <h3>New User</h3>
+      </section>
+      <button onclick="this.closest('dialog').close('close')" type="button" title="Close dialog"> 
+        <title>Close dialog icon</title>
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+    </header>
+    <article>
+      <section class="labelled-input">
+        <label for="userimage">Upload an image</label>
+        <input id="userimage" name="userimage" type="file">
+      </section>
+      <small><b>*</b> Maximum upload 1mb</small>
+    </article>
+    <footer>
+      <menu>
+        <button type="reset" value="clear">Clear</button>
+      </menu>
+      <menu>
+        <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button>
+        <button type="submit" value="confirm">Confirm</button>
+      </menu>
+    </footer>
+  </form>
+</dialog>
+
+<dialog id="MiniDialog" inert loading modal-mode="mini"> 
+  <form method="dialog">
+    <article>
+      <section class="warning-message">
+        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" >
+          <title>A warning icon</title>
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+          <line x1="12" y1="9" x2="12" y2="13"></line>
+          <line x1="12" y1="17" x2="12.01" y2="17"></line>
+        </svg>
+        <p>Are you sure you want to remove this user?</p>
+      </section>
+    </article>
+    <footer>
+      <menu>
+        <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button>
+        <button type="submit" value="confirm">Confirm</button>
+      </menu>
+    </footer>
+  </form>
+</dialog>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/dialog/assets/script.js b/src/site/content/en/patterns/components/dialog/assets/script.js
new file mode 100644
index 00000000000..f69d0bc2fbc
--- /dev/null
+++ b/src/site/content/en/patterns/components/dialog/assets/script.js
@@ -0,0 +1,85 @@
+// custom events to be added to <dialog>
+const dialogClosingEvent = new Event('closing')
+const dialogClosedEvent  = new Event('closed')
+const dialogOpeningEvent = new Event('opening')
+const dialogOpenedEvent  = new Event('opened')
+const dialogRemovedEvent = new Event('removed')
+
+// track opening
+const dialogAttrObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(async mutation => {
+    if (mutation.attributeName === 'open') {
+      const dialog = mutation.target
+
+      const isOpen = dialog.hasAttribute('open')
+      if (!isOpen) return
+
+      dialog.removeAttribute('inert')
+
+      // set focus
+      const focusTarget = dialog.querySelector('[autofocus]')
+      focusTarget
+        ? focusTarget.focus()
+        : dialog.querySelector('button').focus()
+
+      dialog.dispatchEvent(dialogOpeningEvent)
+      await animationsComplete(dialog)
+      dialog.dispatchEvent(dialogOpenedEvent)
+    }
+  })
+})
+
+// track deletion
+const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(mutation => {
+    mutation.removedNodes.forEach(removedNode => {
+      if (removedNode.nodeName === 'DIALOG') {
+        removedNode.removeEventListener('click', lightDismiss)
+        removedNode.removeEventListener('close', dialogClose)
+        removedNode.dispatchEvent(dialogRemovedEvent)
+      }
+    })
+  })
+})
+
+// wait for all dialog animations to complete their promises
+const animationsComplete = element =>
+  Promise.allSettled(
+    element.getAnimations().map(animation => 
+      animation.finished))
+
+// click outside the dialog handler
+const lightDismiss = ({target:dialog}) => {
+  if (dialog.nodeName === 'DIALOG')
+    dialog.close('dismiss')
+}
+
+const dialogClose = async ({target:dialog}) => {
+  dialog.setAttribute('inert', '')
+  dialog.dispatchEvent(dialogClosingEvent)
+
+  await animationsComplete(dialog)
+
+  dialog.dispatchEvent(dialogClosedEvent)
+}
+
+// page load dialogs setup
+export default async function (dialog) {
+  dialog.addEventListener('click', lightDismiss)
+  dialog.addEventListener('close', dialogClose)
+
+  dialogAttrObserver.observe(dialog, { 
+    attributes: true,
+  })
+
+  dialogDeleteObserver.observe(document.body, {
+    attributes: false,
+    subtree: false,
+    childList: true,
+  })
+
+  // remove loading attribute
+  // prevent page load @keyframes playing
+  await animationsComplete(dialog)
+  dialog.removeAttribute('loading')
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/dialog/assets/style.css b/src/site/content/en/patterns/components/dialog/assets/style.css
new file mode 100644
index 00000000000..890cd000d06
--- /dev/null
+++ b/src/site/content/en/patterns/components/dialog/assets/style.css
@@ -0,0 +1,160 @@
+@import "https://unpkg.com/open-props";
+@import "https://unpkg.com/open-props/normalize.min.css";
+
+html:has(dialog[open][modal-mode="mega"]) {
+  overflow: hidden;
+}
+
+dialog {
+  display: grid;
+  background: var(--surface-2);
+  color: var(--text-1);
+  max-inline-size: min(90vw, var(--size-content-3));
+  max-block-size: min(80vh, 100%);
+  max-block-size: min(80dvb, 100%);
+  margin: auto;
+  padding: 0;
+  position: fixed;
+  inset: 0;
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-6);
+  z-index: var(--layer-important);
+  overflow: hidden;
+  transition: opacity .5s var(--ease-3);
+
+  @media (--motionOK) {
+    animation: var(--animation-scale-down) forwards;
+    animation-timing-function: var(--ease-squish-3);
+  }
+
+  @media (--OSdark) {
+    border-block-start: var(--border-size-1) solid var(--surface-3);
+  }
+
+  @media (--md-n-below) {
+    &[modal-mode="mega"] {
+      margin-block-end: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+
+      @media (--motionOK) {
+        animation: var(--animation-slide-out-down) forwards;
+        animation-timing-function: var(--ease-squish-2);
+      }
+    }
+  }
+
+  &:not([open]) {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &[modal-mode="mega"]::backdrop {
+    backdrop-filter: blur(25px);
+  }
+
+  &[modal-mode="mini"]::backdrop {
+    backdrop-filter: none;
+  }
+
+  &::backdrop {
+    transition: backdrop-filter .5s ease;
+  }
+
+  &[loading] {
+    visibility: hidden;
+  }
+
+  &[open] {
+    @media (--motionOK) {
+      animation: var(--animation-slide-in-up) forwards;
+    }
+  }
+
+  & > form {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    align-items: start;
+    max-block-size: 80vh;
+    max-block-size: 80dvb;
+
+    & > article {
+      overflow-y: auto;
+      max-block-size: 100%; /* safari */
+      overscroll-behavior-y: contain;
+      display: grid;
+      justify-items: flex-start;
+      gap: var(--size-3);
+      box-shadow: var(--shadow-2);
+      z-index: var(--layer-1);
+      padding-inline: var(--size-5);
+      padding-block: var(--size-3);
+
+      @media (--OSlight) {
+        background: var(--surface-1);
+
+        &::-webkit-scrollbar {
+          background: var(--surface-1);
+        }
+      }
+
+      @media (--OSdark) {
+        border-block-start: var(--border-size-1) solid var(--surface-3);
+      }
+    }
+
+    & > header {
+      display: flex;
+      gap: var(--size-3);
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-5);
+
+      & > button {
+        border-radius: var(--radius-round);
+        padding: .75ch;
+        aspect-ratio: 1;
+        flex-shrink: 0;
+        place-items: center;
+        stroke: currentColor;
+        stroke-width: 3px;
+      }
+    }
+
+    & > footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--size-3);
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-inline: var(--size-5);
+      padding-block: var(--size-3);
+
+      & > menu {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--size-3);
+        padding-inline-start: 0;
+
+        &:only-child {
+          margin-inline-start: auto;
+        }
+
+        @media (max-width: 410px) {
+          & button[type="reset"] {
+            display: none;
+          }
+        }
+      }
+    }
+
+    & > :is(header, footer) {
+      background-color: var(--surface-2);
+
+      @media (--OSdark) {
+        background-color: var(--surface-1);
+      }
+    }
+  }
+}
diff --git a/src/site/content/en/patterns/components/dialog/demo.njk b/src/site/content/en/patterns/components/dialog/demo.njk
new file mode 100644
index 00000000000..55db59e3cbb
--- /dev/null
+++ b/src/site/content/en/patterns/components/dialog/demo.njk
@@ -0,0 +1,112 @@
+---
+patternId: components/dialog
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :where(html){--font-sans:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.05em;--font-letterspacing-3:.075em;--font-letterspacing-4:.15em;--font-letterspacing-5:.5em;--font-letterspacing-6:.75em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem, min(2vw, 1rem));--font-size-fluid-1:max(1rem, min(4vw, 1.5rem));--font-size-fluid-2:max(1.5rem, min(6vw, 2.5rem));--font-size-fluid-3:max(2rem, min(9vw, 3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:max(.5rem, min(1vw, 1rem));--size-fluid-2:max(1rem, min(2vw, 1.5rem));--size-fluid-3:max(1.5rem, min(3vw, 2rem));--size-fluid-4:max(2rem, min(4vw, 3rem));--size-fluid-5:max(4rem, min(5vw, 5rem));--size-fluid-6:max(5rem, min(7vw, 7.5rem));--size-fluid-7:max(7.5rem, min(10vw, 10rem));--size-fluid-8:max(10rem, min(20vw, 15rem));--size-fluid-9:max(15rem, min(30vw, 20rem));--size-fluid-10:max(20rem, min(40vw, 30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50%,at 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50%,at -250%,#374151,#111827,#000);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,hsl(250 100% 85%/0%)),radial-gradient(circle at bottom left,#86acf9,hsl(220 90% 75%/0%));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,hsl(150 100% 84%/0%));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-strength:25%;--shadow-color:220 40% 2%}}@-webkit-keyframes fade-in{to{opacity:1}}@keyframes fade-in{to{opacity:1}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-up{to{transform:scale(1.25)}}@-webkit-keyframes scale-down{to{transform:scale(.75)}}@keyframes scale-down{to{transform:scale(.75)}}@-webkit-keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@-webkit-keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@-webkit-keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@-webkit-keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@-webkit-keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@-webkit-keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@-webkit-keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@-webkit-keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@-webkit-keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@-webkit-keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes float{50%{transform:translateY(-25%)}}@keyframes float{50%{transform:translateY(-25%)}}@-webkit-keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@-webkit-keyframes pulse{50%{transform:scale(.9)}}@keyframes pulse{50%{transform:scale(.9)}}:where(html){--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollbar-color:var(--gray-7);accent-color:var(--link);-webkit-text-size-adjust:none;background-color:var(--surface-1);block-size:100%;caret-color:var(--link);color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollbar-color) transparent}@media (dynamic-range:high){@supports (color(display-p3 0 .5 1)){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}}@media (prefers-color-scheme:dark){:where(html){--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}@media (prefers-color-scheme:light){:where(html){--scrollbar-color:var(--gray-4)}}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset):not(progress):not(meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms var(--ease-2)}:where(:not(:active)):focus-visible{transition-duration:.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(body){scrollbar-gutter:stable both-edges;min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){-webkit-text-decoration-color:var(--indigo-2);text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){-webkit-text-decoration-color:var(--grape-2);text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(textarea,input:not(button):not(button[type]):not(input[type=button]):not(input[type=submit]):not(input[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}@media (prefers-color-scheme:dark){:where(textarea,input:not(button):not(button[type]):not(input[type=button]):not(input[type=submit]):not(input[type=reset])){background-color:#171a1c}}:where(select,textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){-webkit-padding-start:var(--size-8);padding-inline-start:var(--size-8)}:where(li){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){-webkit-margin-before:var(--size-5);margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);align-items:center;justify-items:center;place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){-webkit-text-decoration-color:var(--blue-5);text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}@media (prefers-color-scheme:dark){:where(dialog){background-color:var(--surface-2)}}:where(dialog)::-webkit-backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}:where(dialog)::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}:where(html[\:has\(dialog\[open\]\)]){overflow:hidden}:where(html:has(dialog[open])){overflow:hidden}:where(menu){display:flex;gap:var(--size-3);-webkit-padding-start:0;padding-inline-start:0}:where(input[type=file])::-webkit-file-upload-button{--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(210 10% 71%/25%);--_highlight-dark:hsl(210 10% 5%/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:2ch;--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:1.75ch;text-align:center;text-shadow:var(--_ink-shadow);-webkit-transition:border-color .5s var(--ease-3) 3s;transition:border-color .5s var(--ease-3) 3s;-webkit-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(210 10% 71%/25%);--_highlight-dark:hsl(210 10% 5%/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:2ch;--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:1.75ch;text-align:center;text-shadow:var(--_ink-shadow);-webkit-transition:border-color .5s var(--ease-3) 3s;transition:border-color .5s var(--ease-3) 3s;-webkit-user-select:none;user-select:none}@media (prefers-color-scheme:dark){:where(input[type=file])::-webkit-file-upload-button{--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}}@media (prefers-reduced-motion:no-preference){:where(input[type=file])::-webkit-file-upload-button{-webkit-transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4);transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{-webkit-transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4);transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4)}}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{--_bg:none;--_text:var(--gray-6);box-shadow:var(--shadow-1);cursor:not-allowed}@media (prefers-color-scheme:dark){:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{--_text:var(--gray-5)}}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-delay:0s;transition-duration:.25s}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where([type=submit],form button:not([type]):not([disabled])){--_text:var(--_accent,var(--link))}:where([type=reset]){--_text:var(--red-6);--_border:var(--red-3)}:where([type=reset]):focus-visible{outline-color:var(--red-6)}@media (prefers-color-scheme:dark){:where([type=reset]){--_text:var(--red-2);--_border:var(--surface-3)}}:where([type=submit],[type=reset],form button:not([type])):is(:hover,:focus-visible):not([disabled]){--_border:currentColor}:where(input[type=file]){align-self:flex-start;border:var(--border-size-1) solid var(--surface-2);border-radius:var(--radius-2);box-shadow:var(--inner-shadow-4);color:var(--text-2);cursor:auto;max-inline-size:100%;padding:0}:where(input[type=file])::-webkit-file-upload-button{cursor:pointer;-webkit-margin-end:1.75ch;margin-inline-end:1.75ch}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-margin-end:1.75ch;margin-inline-end:1.75ch}@media (prefers-color-scheme:dark){:where([disabled]),:where([type=reset]),:where([type=submit]),:where(form button:not([type=button])){--_bg:var(--surface-1)}}html[\:has\(dialog\[open\]\[modal-mode\%3D\%22mega\%22\]\)]{overflow:hidden}html:has(dialog[open][modal-mode="mega"]){overflow:hidden}dialog{display:grid;background:var(--surface-2);color:var(--text-1);max-inline-size:min(90vw,var(--size-content-3));max-block-size:min(80vh,100%);max-block-size:min(80dvb,100%);margin:auto;padding:0;position:fixed;inset:0;border-radius:var(--radius-3);box-shadow:var(--shadow-6);z-index:var(--layer-important);overflow:hidden;transition:opacity .5s var(--ease-3)}@media (prefers-reduced-motion: no-preference){dialog{-webkit-animation:var(--animation-scale-down) forwards;animation:var(--animation-scale-down) forwards;-webkit-animation-timing-function:var(--ease-squish-3);animation-timing-function:var(--ease-squish-3)}}@media (prefers-color-scheme: dark){dialog{-webkit-border-before:var(--border-size-1) solid var(--surface-3);border-block-start:var(--border-size-1) solid var(--surface-3)}}@media (max-width: 768px){dialog[modal-mode=mega]{-webkit-margin-after:0;margin-block-end:0;border-end-end-radius:0;border-end-start-radius:0}}@media (max-width: 768px) and (prefers-reduced-motion: no-preference){dialog[modal-mode=mega]{-webkit-animation:var(--animation-slide-out-down) forwards;animation:var(--animation-slide-out-down) forwards;-webkit-animation-timing-function:var(--ease-squish-2);animation-timing-function:var(--ease-squish-2)}}dialog:not([open]){pointer-events:none;opacity:0}dialog[modal-mode=mega]::-webkit-backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}dialog[modal-mode=mega]::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}dialog[modal-mode=mini]::-webkit-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}dialog[modal-mode=mini]::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}dialog::-webkit-backdrop{-webkit-transition:-webkit-backdrop-filter .5s ease;transition:-webkit-backdrop-filter .5s ease;transition:backdrop-filter .5s ease;transition:backdrop-filter .5s ease,-webkit-backdrop-filter .5s ease}dialog::backdrop{transition:-webkit-backdrop-filter .5s ease;transition:backdrop-filter .5s ease;transition:backdrop-filter .5s ease,-webkit-backdrop-filter .5s ease}dialog[loading]{visibility:hidden}@media (prefers-reduced-motion: no-preference){dialog[open]{-webkit-animation:var(--animation-slide-in-up) forwards;animation:var(--animation-slide-in-up) forwards}}dialog>form{display:grid;grid-template-rows:auto 1fr auto;align-items:start;max-block-size:80vh;max-block-size:80dvb}dialog>form>article{overflow-y:auto;max-block-size:100%;overscroll-behavior-y:contain;display:grid;justify-items:flex-start;gap:var(--size-3);box-shadow:var(--shadow-2);z-index:var(--layer-1);padding-inline:var(--size-5);padding-block:var(--size-3)}@media (prefers-color-scheme: light){dialog>form>article{background:var(--surface-1)}dialog>form>article::-webkit-scrollbar{background:var(--surface-1)}}@media (prefers-color-scheme: dark){dialog>form>article{-webkit-border-before:var(--border-size-1) solid var(--surface-3);border-block-start:var(--border-size-1) solid var(--surface-3)}}dialog>form>header{display:flex;gap:var(--size-3);justify-content:space-between;align-items:flex-start;padding-block:var(--size-3);padding-inline:var(--size-5)}dialog>form>header>button{border-radius:var(--radius-round);padding:.75ch;aspect-ratio:1;flex-shrink:0;align-items:center;justify-items:center;place-items:center;stroke:currentColor;stroke-width:3px}dialog>form>footer{display:flex;flex-wrap:wrap;gap:var(--size-3);justify-content:space-between;align-items:flex-start;padding-inline:var(--size-5);padding-block:var(--size-3)}dialog>form>footer>menu{display:flex;flex-wrap:wrap;gap:var(--size-3);-webkit-padding-start:0;padding-inline-start:0}dialog>form>footer>menu:only-child{-webkit-margin-start:auto;margin-inline-start:auto}@media (max-width: 410px){dialog>form>footer>menu button[type=reset]{display:none}}dialog>form>:is(header,footer){background-color:var(--surface-2)}@media (prefers-color-scheme: dark){dialog>form>:is(header,footer){background-color:var(--surface-1)}}body{display:grid;align-content:center;justify-content:center;place-content:center;padding-inline:var(--size-5)}main{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;place-content:center;gap:var(--size-5)}.user{inline-size:var(--size-fluid-7);aspect-ratio:var(--ratio-square);border-radius:var(--radius-round);border:var(--border-size-1) solid var(--surface-4);display:flex;align-items:stretch;justify-content:stretch;align-items:center;justify-content:center;position:relative}button.user>svg{--_icon-size: var(--size-fluid-4)}.user>button{position:absolute;inset-block-start:0;inset-inline-end:0;border-radius:var(--radius-round);padding:.75ch;aspect-ratio:1;flex-shrink:0}.user.new:not(button){-webkit-animation:var(--animation-slide-in-down),var(--animation-fade-in) forwards;animation:var(--animation-slide-in-down),var(--animation-fade-in) forwards;-webkit-animation-timing-function:var(--ease-elastic-3),var(--ease-3);animation-timing-function:var(--ease-elastic-3),var(--ease-3)}.user img{border-radius:inherit}.labelled-input{display:flex;gap:var(--size-3);flex-wrap:wrap;align-items:center}.warning-message{display:grid;grid-template-columns:var(--size-fluid-3) 1fr;gap:var(--size-3);align-items:center}.warning-message>svg{inline-size:100%;stroke:var(--text-2)}.icon-headline{display:flex;gap:var(--size-3);align-items:center}.icon-headline>svg{inline-size:2em;stroke:var(--text-2)}@media (max-width: 768px){input[type=file]{inline-size:100%}}.github-corner{position:absolute;right:4px;width:80px;height:80px;fill:var(--surface-4);color:var(--surface-1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner>svg{fill:inherit;stroke:inherit;position:absolute;top:0;right:0}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <dialog id="MegaDialog" inert loading modal-mode="mega">
+      <form method="dialog">
+        <header>
+          <section class="icon-headline">
+            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+              <circle cx="8.5" cy="7" r="4"></circle>
+              <line x1="20" y1="8" x2="20" y2="14"></line>
+              <line x1="23" y1="11" x2="17" y2="11"></line>
+            </svg>
+            <h3>New User</h3>
+          </section>
+          <button type="button" title="Close dialog">
+            <title>Close dialog icon</title>
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </header>
+        <article>
+          <section class="labelled-input">
+            <label for="userimage">Upload an image</label>
+            <input id="userimage" name="userimage" type="file">
+          </section>
+          <small><b>*</b> Maximum upload 1mb</small>
+        </article>
+        <footer>
+          <menu>
+            <button type="reset" value="clear">Clear</button>
+          </menu>
+          <menu>
+            <button autofocus type="button">Cancel</button>
+            <button type="submit" value="confirm">Confirm</button>
+          </menu>
+        </footer>
+      </form>
+    </dialog>
+
+    <dialog id="MiniDialog" inert loading modal-mode="mini">
+      <form method="dialog">
+        <article>
+          <section class="warning-message">
+            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" >
+              <title>A warning icon</title>
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+              <line x1="12" y1="9" x2="12" y2="13"></line>
+              <line x1="12" y1="17" x2="12.01" y2="17"></line>
+            </svg>
+            <p>Are you sure you want to remove this user?</p>
+          </section>
+        </article>
+        <footer>
+          <menu>
+            <button autofocus type="button">Cancel</button>
+            <button type="submit" value="confirm">Confirm</button>
+          </menu>
+        </footer>
+      </form>
+    </dialog>
+
+    <main>
+      <div class="user">
+        <img src="https://doodleipsum.com/700x700/avatar-5?i=e49dd48962488beade4c44491e56a5a9" alt="">
+        <button title="Remove user">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+      <div class="user">
+        <img src="https://doodleipsum.com/700x700/avatar-5?i=ca71b901f3ad2ce77d50ab296aff3f5f" alt="">
+        <button title="Remove user">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+      <button class="user" aria-label="Add user">
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </button>
+    </main>
+
+    {% set script %}
+      (()=>{var p=new Event("closing"),w=new Event("closed"),h=new Event("opening"),L=new Event("opened"),b=new Event("removed"),y=new MutationObserver((e,t)=>{e.forEach(async i=>{if(i.attributeName==="open"){let n=i.target;if(!n.hasAttribute("open"))return;n.removeAttribute("inert");let o=n.querySelector("[autofocus]");o?o.focus():n.querySelector("button").focus(),n.dispatchEvent(h),await l(n),n.dispatchEvent(L)}})}),D=new MutationObserver((e,t)=>{e.forEach(i=>{i.removedNodes.forEach(n=>{n.nodeName==="DIALOG"&&(n.removeEventListener("click",d),n.removeEventListener("close",u),n.dispatchEvent(b))})})}),l=e=>Promise.allSettled(e.getAnimations().map(t=>t.finished)),d=({target:e})=>{e.nodeName==="DIALOG"&&e.close("dismiss")},u=async({target:e})=>{e.setAttribute("inert",""),e.dispatchEvent(p),await l(e),e.dispatchEvent(w)};async function c(e){e.addEventListener("click",d),e.addEventListener("close",u),y.observe(e,{attributes:!0}),D.observe(document.body,{attributes:!1,subtree:!1,childList:!0}),await l(e),e.removeAttribute("loading")}var M=e=>{let t=e.get("userimage");if(!t.size)return;let i=new FileReader;i.readAsDataURL(t),i.onload=n=>{let s=document.querySelector("main"),o=document.createElement("div");o.className="new user";let a=document.createElement("img");a.src=n.target.result;let r=document.createElement("button");r.title="Remove user",r.innerHTML=`
+      <svg width="24" height="24" viewBox="0 0 24 24">
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+      `,o.appendChild(a),o.appendChild(r),s.appendChild(o),s.appendChild(s.querySelector("button.user"))}},m=({target:e})=>{console.log("Dialog closing",e)},v=({target:e})=>{if(console.log("Dialog closed",e),console.info("Dialog user action:",e.returnValue),e.returnValue==="confirm"){let t=new FormData(e.querySelector("form"));console.info("Dialog form data",Object.fromEntries(t.entries())),M(t),e.querySelector("form")?.reset()}},g=({target:e})=>{console.log("Dialog open",e)},E=({target:e})=>{console.log("Dialog opening",e)},f=({target:e})=>{e.removeEventListener("closing",m),e.removeEventListener("closed",v),e.removeEventListener("opening",E),e.removeEventListener("opened",g),e.removeEventListener("removed",f),console.log("Dialog removed",e)};document.querySelectorAll('dialog[modal-mode="mega"]').forEach(e=>{c(e),e.addEventListener("closing",m),e.addEventListener("closed",v),e.addEventListener("opening",E),e.addEventListener("opened",g),e.addEventListener("removed",f)});document.querySelector("main").addEventListener("click",e=>{let t=e.target.closest("button:not(.user)");if(!t)return;let i=t.getBoundingClientRect(),n=window.MiniDialog.clientHeight-15,s=window.MiniDialog.clientWidth/2,o=i.left-s;o<0&&(o=10),window.MiniDialog.style.marginTop=i.y-n+"px",window.MiniDialog.style.marginLeft=null,window.innerWidth>=768&&(window.MiniDialog.style.marginLeft=o+"px"),window.MiniDialog.showModal(),window.MiniDialog.addEventListener("closing",({target:a})=>{if(a.returnValue==="confirm"){let r=t.closest(".user");r.style.animation="var(--animation-scale-down), var(--animation-fade-out)",r.addEventListener("animationend",A=>{r.remove()},{once:!0})}},{once:!0})});document.querySelectorAll('[title="Close dialog"]').forEach(e=>{e.addEventListener("click",t=>{e.closest("dialog").close("close")})});document.querySelectorAll('menu > button[type="button"]').forEach(e=>{e.addEventListener("click",t=>{t.target.closest("dialog").close("cancel")})});document.querySelector('[aria-label="Add user"]').addEventListener("click",e=>{window.MegaDialog.showModal()});document.querySelectorAll('dialog[modal-mode="mini"]').forEach(e=>{c(e)});})();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/dialog/index.md b/src/site/content/en/patterns/components/dialog/index.md
new file mode 100644
index 00000000000..4daa6ae393b
--- /dev/null
+++ b/src/site/content/en/patterns/components/dialog/index.md
@@ -0,0 +1,20 @@
+---
+layout: pattern
+title: Dialog
+description: |
+  This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the dialog element.
+  <aside style="max-inline-size: fit-content;" class="aside flow bg-tertiary-box-bg color-tertiary-box-text"><p class="cluster "><span class="aside__icon box-block "><svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg">   <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path> </svg></span><strong>Important</strong></p><div class=" flow"> This pattern uses <a href="https://open-props.style">Open Props</a> </div></aside>
+  <br><br>
+  <a href="/building-a-dialog-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=GDzzIlRhEzM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/dialog">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to create color-adaptive, responsive, and accessible mini
+and mega modals with the `<dialog>` element.
+
+{% Aside 'important' %}
+This pattern uses [Open Props](https://open-props.style)
+{% endAside %}
+
+<a href="/building-a-dialog-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=GDzzIlRhEzM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/dialog">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/game-menu/assets/body.html b/src/site/content/en/patterns/components/game-menu/assets/body.html
new file mode 100644
index 00000000000..e49bf0d924d
--- /dev/null
+++ b/src/site/content/en/patterns/components/game-menu/assets/body.html
@@ -0,0 +1,7 @@
+<ul class="threeD-button-set">
+  <li><button>New Game</button></li>
+  <li><button>Continue</button></li>
+  <li><button>Online</button></li>
+  <li><button>Settings</button></li>
+  <li><button>Quit</button></li>
+</ul>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/game-menu/assets/script.js b/src/site/content/en/patterns/components/game-menu/assets/script.js
new file mode 100644
index 00000000000..81638754818
--- /dev/null
+++ b/src/site/content/en/patterns/components/game-menu/assets/script.js
@@ -0,0 +1,31 @@
+import {rovingIndex} from 'https://cdn.skypack.dev/roving-ux'
+   
+const menu = document.querySelector('.threeD-button-set')
+const menuRect = menu.getBoundingClientRect()
+
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+rovingIndex({
+  element: document.querySelector('.threeD-button-set'),
+  target: 'button',
+})
+
+if (motionOK) {
+  window.addEventListener('mousemove', ({target, clientX, clientY}) => {
+    const {dx,dy} = getAngles(clientX, clientY)
+
+    menu.style.setProperty('--x', `${dy / 20}deg`)
+    menu.style.setProperty('--y', `${dx / 20}deg`)
+  })
+}
+
+const getAngles = (clientX, clientY) => {
+  const { x, y, width, height } = menuRect 
+  
+  const dx = clientX - (x + 0.5 * width)
+  const dy = clientY - (y + 0.5 * height)
+  
+  return {dx,dy}
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/game-menu/assets/style.css b/src/site/content/en/patterns/components/game-menu/assets/style.css
new file mode 100644
index 00000000000..3effd3b94b4
--- /dev/null
+++ b/src/site/content/en/patterns/components/game-menu/assets/style.css
@@ -0,0 +1,177 @@
+body {
+  perspective: 40vw;
+}
+
+.threeD-button-set {
+  --y:;
+  --x:;
+  --distance: 1px;
+  --theme: hsl(180 100% 50%);
+  --theme-bg: hsl(180 100% 50% / 25%);
+  --theme-bg-hover: hsl(180 100% 50% / 40%);
+  --theme-text: white;
+  --theme-shadow: hsl(180 100% 10% / 25%);
+
+  --_max-rotateY: 10deg;
+  --_max-rotateX: 15deg;
+  --_btn-bg: var(--theme-bg);
+  --_btn-bg-hover: var(--theme-bg-hover);
+  --_btn-text: var(--theme-text);
+  --_btn-text-shadow: var(--theme-shadow);
+  --_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);
+
+  /* remove <ul> margins */
+  margin: 0;
+
+  /* vertical rag-right layout */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2.5vh;
+  
+  /* create 3D space context */
+  transform-style: preserve-3d;
+
+  /* clamped menu rotation to not be too extreme */
+  transform: 
+    rotateY(
+      clamp(
+        calc(var(--_max-rotateY) * -1), 
+        var(--y), 
+        var(--_max-rotateY)
+      )
+    ) 
+    rotateX(
+      clamp(
+        calc(var(--_max-rotateX) * -1), 
+        var(--x), 
+        var(--_max-rotateX)
+      )
+    )
+  ;
+
+  /* removes Safari focus ring on <ul> after button interaction */
+  &:focus {
+    outline: none;
+  }
+  
+  @media (--motionOK) {
+    will-change: transform;
+    transition: transform .1s ease;
+    animation: rotate-y 5s ease-in-out infinite;
+  }
+
+  @media (--dark) {
+    --theme: hsl(255 53% 50%);
+    --theme-bg: hsl(255 53% 71% / 25%);
+    --theme-bg-hover: hsl(255 53% 50% / 40%);
+    --theme-shadow: hsl(255 53% 10% / 25%);
+  }
+
+  @media (--HDcolor) {
+    @supports (color: color(display-p3 0 0 0)) {
+      --theme: color(display-p3 .4 0 .9);
+    }
+  }
+}
+
+.threeD-button-set > li {
+  /* change display type from list-item */
+  display: inline-flex;
+
+  /* create context for button pseudos */
+  position: relative;
+
+  /* create 3D space context */
+  transform-style: preserve-3d; 
+}
+  
+.threeD-button-set button {
+  /* strip out default button styles */
+  appearance: none;
+  outline: none;
+  border: none;
+  -webkit-tap-highlight-color: transparent;
+  
+  /* bring in brand styles via props */
+  background-color: var(--_btn-bg);
+  color: var(--_btn-text);
+  text-shadow: 0 1px 1px var(--_btn-text-shadow);
+
+  font-size: min(5vmin, 3rem);
+  font-family: Audiowide;
+  padding-block: .75ch;
+  padding-inline: 2ch;
+  border-radius: 5px 20px;
+
+  /* prepare for 3D perspective transforms */
+  transform: translateZ(var(--distance));
+  transform-style: preserve-3d;
+  
+  &:is(:hover, :focus-visible):not(:active) {
+    /* subtle distance plus bg color change on hover/focus */
+    --distance: 15px;
+    background-color: var(--_btn-bg-hover);
+
+    /* if motion is OK, setup transitions and increase distance */
+    @media (--motionOK) {
+      --distance: 3vmax;
+
+      transition-timing-function: var(--_bounce-ease);
+      transition-duration: .4s;
+
+      &::after  { transition-duration: .5s }
+      &::before { transition-duration: .3s }
+    }
+  }
+  
+  &::after,
+  &::before {
+    /* create empty element */
+    content: '';
+    opacity: .8;
+
+    /* cover the parent (button) */
+    position: absolute;
+    inset: 0;
+
+    /* style the element for border accents */
+    border: 1px solid var(--theme);
+    border-radius: 5px 20px;
+
+    /* move in Z space with a multiplier */
+    transform: translateZ(calc(var(--distance) / 3));
+
+    /* if motion is OK, transition the Z space move */
+    @media (--motionOK) {
+      transition: transform .1s ease-out;   
+    }
+  }
+  
+  /* exceptions for one of the pseudo elements */
+  /* this will be pushed back and have a thicker border */
+  &::before {
+    border-width: 3px;
+    transform: translateZ(calc(var(--distance) / 3 * -1));
+
+    /* in dark mode, it glows! */
+    @media (--dark) {
+      box-shadow: 
+        0 0 25px var(--theme), 
+        inset 0 0 25px var(--theme);
+    }
+  }
+  
+  @media (--motionOK) {
+    will-change: transform;
+    transition: 
+      transform .2s ease,
+      background-color .5s ease;
+  }
+}
+
+@keyframes rotate-y {
+  50% {
+    transform: rotateY(15deg) rotateX(-6deg);
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/game-menu/demo.njk b/src/site/content/en/patterns/components/game-menu/demo.njk
new file mode 100644
index 00000000000..b0616dfbe75
--- /dev/null
+++ b/src/site/content/en/patterns/components/game-menu/demo.njk
@@ -0,0 +1,27 @@
+---
+patternId: components/game-menu
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      @import url(https://fonts.googleapis.com/css2?family=Audiowide&display=swap);body{perspective:40vw}.threeD-button-set{--distance:1px;--theme:hsl(180 100% 50%);--theme-bg:hsl(180 100% 50% / 25%);--theme-bg-hover:hsl(180 100% 50% / 40%);--theme-text:white;--theme-shadow:hsl(180 100% 10% / 25%);--_max-rotateY:10deg;--_max-rotateX:15deg;--_btn-bg:var(--theme-bg);--_btn-bg-hover:var(--theme-bg-hover);--_btn-text:var(--theme-text);--_btn-text-shadow:var(--theme-shadow);--_bounce-ease:cubic-bezier(.5, 1.75, .75, 1.25);margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:2.5vh;transform-style:preserve-3d;transform:rotateY(clamp(calc(var(--_max-rotateY) * -1),var(--y),var(--_max-rotateY))) rotateX(clamp(calc(var(--_max-rotateX) * -1),var(--x),var(--_max-rotateX)))}.threeD-button-set:focus{outline:0}@media (prefers-reduced-motion:no-preference){.threeD-button-set{will-change:transform;transition:transform .1s ease;-webkit-animation:rotate-y 5s ease-in-out infinite;animation:rotate-y 5s ease-in-out infinite}}@media (prefers-color-scheme:dark){.threeD-button-set{--theme:hsl(255 53% 50%);--theme-bg:hsl(255 53% 71% / 25%);--theme-bg-hover:hsl(255 53% 50% / 40%);--theme-shadow:hsl(255 53% 10% / 25%)}}@media (dynamic-range:high){@supports (color:color(display-p3 0 0 0)){.threeD-button-set{--theme:color(display-p3 .4 0 .9)}}}.threeD-button-set>li{display:inline-flex;position:relative;transform-style:preserve-3d}.threeD-button-set button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none;-webkit-tap-highlight-color:transparent;background-color:var(--_btn-bg);color:var(--_btn-text);text-shadow:0 1px 1px var(--_btn-text-shadow);font-size:min(5vmin,3rem);font-family:Audiowide;padding-block:.75ch;padding-inline:2ch;border-radius:5px 20px;transform:translateZ(var(--distance));transform-style:preserve-3d}.threeD-button-set button:is(:hover,:focus-visible):not(:active){--distance:15px;background-color:var(--_btn-bg-hover)}@media (prefers-reduced-motion:no-preference){.threeD-button-set button:is(:hover,:focus-visible):not(:active){--distance:3vmax;transition-timing-function:var(--_bounce-ease);transition-duration:.4s}.threeD-button-set button:is(:hover,:focus-visible):not(:active)::after{transition-duration:.5s}.threeD-button-set button:is(:hover,:focus-visible):not(:active)::before{transition-duration:.3s}}.threeD-button-set button::after,.threeD-button-set button::before{content:'';opacity:.8;position:absolute;inset:0;border:1px solid var(--theme);border-radius:5px 20px;transform:translateZ(calc(var(--distance)/ 3))}@media (prefers-reduced-motion:no-preference){.threeD-button-set button::after,.threeD-button-set button::before{transition:transform .1s ease-out}}.threeD-button-set button::before{border-width:3px;transform:translateZ(calc(var(--distance)/ 3 * -1))}@media (prefers-color-scheme:dark){.threeD-button-set button::before{box-shadow:0 0 25px var(--theme),inset 0 0 25px var(--theme)}}@media (prefers-reduced-motion:no-preference){.threeD-button-set button{will-change:transform;transition:transform .2s ease,background-color .5s ease}}@-webkit-keyframes rotate-y{50%{transform:rotateY(15deg) rotateX(-6deg)}}@keyframes rotate-y{50%{transform:rotateY(15deg) rotateX(-6deg)}}*{box-sizing:border-box;margin:0}html{block-size:100%;background:conic-gradient(at -10%,at 50%,#ff1493,#0ff);background:conic-gradient(at -10% 50%,#ff1493,#0ff)}@media (prefers-color-scheme:dark){html{background:conic-gradient(at -10%,at 50%,#212529,50%,#495057,#212529);background:conic-gradient(at -10% 50%,#212529,50%,#495057,#212529)}}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:grid;align-content:center;justify-content:center;place-content:center}.github-corner{fill:indigo;color:#fff}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <ul class="threeD-button-set">
+      <li><button>New Game</button></li>
+      <li><button>Continue</button></li>
+      <li><button>Online</button></li>
+      <li><button>Settings</button></li>
+      <li><button>Quit</button></li>
+    </ul>
+
+    {% set script %}
+      (()=>{var r=new Map,g=({element:e,target:t})=>{let n=e.querySelectorAll(t||":scope *"),s=n[0];e.tabIndex=-1,n.forEach(o=>o.tabIndex=-1),s.tabIndex=0,r.set(e,{targets:n,active:s,index:0});let d=o=>{r.get("last_rover")!=e&&(i(e,r.get(e).active),r.set("last_rover",e))};e.addEventListener("focusin",d);let a=o=>{switch(o.keyCode){case 39:case 40:o.preventDefault(),x(e);break;case 37:case 38:o.preventDefault(),u(e)}};e.addEventListener("keydown",a);let c=o=>{e.removeEventListener("focusin",d),e.removeEventListener("keydown",a),e.removeEventListener("DOMNodeRemoved",c),r.delete(e),n.forEach(m=>m.tabIndex="")};e.addEventListener("DOMNodeRemovedFromDocument",c)},x=e=>{let t=r.get(e);t.index+=1,t.index>t.targets.length-1&&(t.index=t.targets.length-1);let n=t.targets[t.index];n&&i(e,n)},u=e=>{let t=r.get(e);t.index-=1,t.index<1&&(t.index=0);let n=t.targets[t.index];n&&i(e,n)},i=(e,t)=>{let n=r.get(e);n.active.tabIndex=-1,n.active=t,n.active.tabIndex=0,n.active.focus()};g({element:document.querySelector(".threeD-button-set"),target:"button"});var v=document.querySelector(".threeD-button-set"),l=v.getBoundingClientRect(),{matches:p}=window.matchMedia("(prefers-reduced-motion: no-preference)");p&&window.addEventListener("mousemove",({target:e,clientX:t,clientY:n})=>{let{dx:s,dy:d}=y(t,n);v.style.setProperty("--x",`${d/20}deg`),v.style.setProperty("--y",`${s/20}deg`)});var y=(e,t)=>{let{x:n,y:s,width:d,height:a}=l,c=e-(n+.5*d),o=t-(s+.5*a);return{dx:c,dy:o}};})();
+    {% endset %}
+    <script type="module">{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/game-menu/index.md b/src/site/content/en/patterns/components/game-menu/index.md
new file mode 100644
index 00000000000..6dd9290f6da
--- /dev/null
+++ b/src/site/content/en/patterns/components/game-menu/index.md
@@ -0,0 +1,16 @@
+---
+layout: pattern
+title: Game Menu
+description: |
+  This pattern shows how to create a mouse and keyboard accessible 3D game menu.
+  <br><br>
+  Note: this component uses a library called <a href="https://github.com/argyleink/roving-ux">roving-ux</a> to create a focus group.
+  <br><br>
+  <a href="https://web.dev/building-a-3d-game-menu-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=HCsV8u-KYUw">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/game-menu">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to create a mouse and keyboard accessible 3D game menu.
+
+<a href="https://web.dev/building-a-3d-game-menu-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=HCsV8u-KYUw">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/game-menu">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/index.md b/src/site/content/en/patterns/components/index.md
new file mode 100644
index 00000000000..71af5446eed
--- /dev/null
+++ b/src/site/content/en/patterns/components/index.md
@@ -0,0 +1,11 @@
+---
+layout: pattern-set
+title: Component patterns
+description: A collection of cross browser UI components for use in accelerating or inspiring your own design systems.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J2QtGMJ3e1cJkHFrQ2K3.svg
+---
+
+Welcome to our growing collection of component patterns. These can provide
+inspiration, accessibility requirements, adaptive strategies for viewport and
+user preferences, and more.
+<br><br>
diff --git a/src/site/content/en/patterns/components/loading-bar/assets/body.html b/src/site/content/en/patterns/components/loading-bar/assets/body.html
new file mode 100644
index 00000000000..ebcfd8c3b58
--- /dev/null
+++ b/src/site/content/en/patterns/components/loading-bar/assets/body.html
@@ -0,0 +1,14 @@
+<main id="loading-zone" aria-busy="true">
+  <p>Loading Level</p>
+  <div class="card">
+    <label>
+      <span class="sr-only">Loading progress</span>
+      <progress 
+        indeterminate 
+        role="progressbar" 
+        aria-describedby="loading-zone"
+        tabindex="-1"
+      >unknown</progress>
+    </label>
+  </div>
+</main>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/loading-bar/assets/script.js b/src/site/content/en/patterns/components/loading-bar/assets/script.js
new file mode 100644
index 00000000000..d10f7656d51
--- /dev/null
+++ b/src/site/content/en/patterns/components/loading-bar/assets/script.js
@@ -0,0 +1,35 @@
+const progress = document.querySelector('progress')
+const zone     = document.querySelector('#loading-zone')
+
+const state = {
+  val: .1
+}
+
+const roundDecimals = (val, places) =>
+  +(Math.round(val + "e+" + places)  + "e-" + places)
+
+const setProgress = () => {
+  // set loading zone status
+  zone.setAttribute('aria-busy', state.val < 1)
+
+  // clear attributes if no value to show
+  // <progress> will show indeterminate state
+  if (state.val === null) {
+    progress.removeAttribute('aria-valuenow')
+    progress.removeAttribute('value')
+    progress.focus()
+    return
+  }
+
+  // round bad JS decimal math
+  const val = roundDecimals(state.val, 2)
+  const valPercent = val * 100 + "%"
+  
+  // set value for screenreaders and element values
+  progress.value = val
+  progress.setAttribute('aria-valuenow', valPercent)
+  progress.innerText = valPercent
+
+  // focus so screenreaders hear the announced value update
+  progress.focus()
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/loading-bar/assets/style.css b/src/site/content/en/patterns/components/loading-bar/assets/style.css
new file mode 100644
index 00000000000..700749cf98c
--- /dev/null
+++ b/src/site/content/en/patterns/components/loading-bar/assets/style.css
@@ -0,0 +1,97 @@
+progress {
+  --_track: hsl(228 100% 90%);
+  --_track-size: min(10px, 1ex);
+  --_progress: hsl(228 100% 50%);
+  --_radius: 1e3px;
+  --_indeterminate-track: linear-gradient(to right,
+    var(--_track) 45%,
+    var(--_progress) 0%,
+    var(--_progress) 55%,
+    var(--_track) 0%
+  );
+  --_indeterminate-track-size: 225% 100%;
+  --_indeterminate-track-animation: progress-loading 2s infinite ease;
+  
+  /*  reset  */
+  appearance: none;
+  border: none;
+  
+  /*  custom style  */
+  position: relative;
+  height: var(--_track-size);
+  border-radius: var(--_radius);
+  overflow: hidden;
+
+  @media (prefers-color-scheme: dark) {
+    --_track: hsl(228 20% 30%);
+    --_progress: hsl(228 100% 75%);
+  }
+
+  &:focus-visible {
+    outline-color: var(--_progress);
+  }
+  
+  /*  Safari/Chromium  */
+  &[value]::-webkit-progress-bar {
+    background-color: var(--_track);
+  }
+  
+  &[value]::-webkit-progress-value {
+    background-color: var(--_progress);
+    transition: inline-size .25s ease-out;
+  }
+  
+  /*  Firefox  */
+  &[value]::-moz-progress-bar {
+    background-color: var(--_progress);
+  }
+  
+  /*  indeterminate  */
+  &:indeterminate::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+    background: var(--_indeterminate-track);
+    background-size: var(--_indeterminate-track-size);
+    background-position: right; 
+    animation: var(--_indeterminate-track-animation);
+  }
+  
+  /*  indeterminate Safari  */
+  &:indeterminate::-webkit-progress-bar {
+    background: var(--_indeterminate-track);
+    background-size: var(--_indeterminate-track-size);
+    background-position: right; 
+    animation: var(--_indeterminate-track-animation);
+  }
+  
+  /*  indeterminate Firefox  */
+  &:indeterminate::-moz-progress-bar {
+    background: var(--_indeterminate-track);
+    background-size: var(--_indeterminate-track-size);
+    background-position: right; 
+    animation: var(--_indeterminate-track-animation);
+  }
+  
+  /*  complete  */
+  &:not([max])[value="1"]::before,
+  &[max="100"][value="100"]::before {
+    content: "✓";
+    
+    position: absolute;
+    inset-block: 0;
+    inset-inline: auto 0;
+    display: flex;
+    align-items: center;
+    padding-inline-end: max(calc(var(--_track-size) / 4), 3px);
+
+    color: white;
+    font-size: calc(var(--_track-size) / 1.25);
+  }
+}
+
+@keyframes progress-loading {
+  50% {
+    background-position: left; 
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/loading-bar/demo.njk b/src/site/content/en/patterns/components/loading-bar/demo.njk
new file mode 100644
index 00000000000..d0ed334a7f4
--- /dev/null
+++ b/src/site/content/en/patterns/components/loading-bar/demo.njk
@@ -0,0 +1,41 @@
+---
+patternId: components/loading-bar
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :where(html){--font-sans:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.05em;--font-letterspacing-3:.075em;--font-letterspacing-4:.15em;--font-letterspacing-5:.5em;--font-letterspacing-6:.75em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem, min(2vw, 1rem));--font-size-fluid-1:max(1rem, min(4vw, 1.5rem));--font-size-fluid-2:max(1.5rem, min(6vw, 2.5rem));--font-size-fluid-3:max(2rem, min(9vw, 3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:max(.5rem, min(1vw, 1rem));--size-fluid-2:max(1rem, min(2vw, 1.5rem));--size-fluid-3:max(1.5rem, min(3vw, 2rem));--size-fluid-4:max(2rem, min(4vw, 3rem));--size-fluid-5:max(4rem, min(5vw, 5rem));--size-fluid-6:max(5rem, min(7vw, 7.5rem));--size-fluid-7:max(7.5rem, min(10vw, 10rem));--size-fluid-8:max(10rem, min(20vw, 15rem));--size-fluid-9:max(15rem, min(30vw, 20rem));--size-fluid-10:max(20rem, min(40vw, 30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50%,at 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50%,at -250%,#374151,#111827,#000);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,hsl(250 100% 85%/0%)),radial-gradient(circle at bottom left,#86acf9,hsl(220 90% 75%/0%));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,hsl(150 100% 84%/0%));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-strength:25%;--shadow-color:220 40% 2%}}@-webkit-keyframes fade-in{to{opacity:1}}@keyframes fade-in{to{opacity:1}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-up{to{transform:scale(1.25)}}@-webkit-keyframes scale-down{to{transform:scale(.75)}}@keyframes scale-down{to{transform:scale(.75)}}@-webkit-keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@-webkit-keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@-webkit-keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@-webkit-keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@-webkit-keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@-webkit-keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@-webkit-keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@-webkit-keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@-webkit-keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@-webkit-keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes float{50%{transform:translateY(-25%)}}@keyframes float{50%{transform:translateY(-25%)}}@-webkit-keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@-webkit-keyframes pulse{50%{transform:scale(.9)}}@keyframes pulse{50%{transform:scale(.9)}}:where(html){--brand:var(--pink-6);--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollbar-color:var(--gray-7);accent-color:var(--brand);-webkit-text-size-adjust:none;background-color:var(--surface-1);block-size:100%;caret-color:var(--brand);color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollbar-color) transparent}@media (dynamic-range:high){:where(html){--link:rgb(0,134,235);--link-visited:rgb(163,56,255)}}@media (prefers-color-scheme:dark){:where(html){--brand:var(--pink-4);--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}@media (prefers-color-scheme:light){:where(html){--scrollbar-color:var(--gray-4)}}*,:after,:before{box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}:where(:not(fieldset)){border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms var(--ease-2)}:where(:not(:active)):focus-visible{transition-duration:.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(body){scrollbar-gutter:stable both-edges;min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){-webkit-text-decoration-color:var(--indigo-2);text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){-webkit-text-decoration-color:var(--grape-2);text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:-webkit-max-content;max-inline-size:-moz-max-content;max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){-webkit-padding-start:var(--size-8);padding-inline-start:var(--size-8)}:where(li){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){-webkit-margin-before:var(--size-5);margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);align-items:center;justify-items:center;place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){-webkit-padding-start:var(--size-2);padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){-webkit-text-decoration-color:var(--blue-5);text-decoration-color:var(--blue-5)}:where(input[type=file])::-webkit-file-upload-button{--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(210 10% 71%/25%);--_highlight-dark:hsl(210 10% 5%/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:2ch;--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:1.75ch;text-align:center;text-shadow:var(--_ink-shadow);-webkit-transition:border-color .5s var(--ease-3) 3s;transition:border-color .5s var(--ease-3) 3s;-webkit-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(210 10% 71%/25%);--_highlight-dark:hsl(210 10% 5%/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:2ch;--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:1.75ch;text-align:center;text-shadow:var(--_ink-shadow);-webkit-transition:border-color .5s var(--ease-3) 3s;transition:border-color .5s var(--ease-3) 3s;-webkit-user-select:none;user-select:none}@media (prefers-color-scheme:dark){:where(input[type=file])::-webkit-file-upload-button{--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}}@media (prefers-reduced-motion:no-preference){:where(input[type=file])::-webkit-file-upload-button{-webkit-transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4);transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{-webkit-transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4);transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4)}}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{--_bg:none;--_text:var(--gray-6);box-shadow:var(--shadow-1);cursor:not-allowed}@media (prefers-color-scheme:dark){:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{--_text:var(--gray-5)}}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-delay:0s;transition-duration:.25s}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where([type=submit],form button:not([type]):not([disabled])){--_text:var(--_accent,var(--link))}:where([type=reset]){--_text:var(--red-6);--_border:var(--red-3)}:where([type=reset]):focus-visible{outline-color:var(--red-6)}@media (prefers-color-scheme:dark){:where([type=reset]){--_text:var(--red-2);--_border:var(--surface-3)}}:hover:not([disabled]):where(form button:not([type]),[type=submit],[type=reset]){--_border:currentColor}:focus-visible:not([disabled]):where(form button:not([type]),[type=submit],[type=reset]){--_border:currentColor}:where(input[type=file]){align-self:flex-start;border:var(--border-size-1) solid var(--surface-2);border-radius:var(--radius-2);box-shadow:var(--inner-shadow-4);color:var(--text-2);cursor:auto;padding:0}:where(input[type=file])::-webkit-file-upload-button{cursor:pointer;-webkit-margin-end:1.75ch;margin-inline-end:1.75ch}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-margin-end:1.75ch;margin-inline-end:1.75ch}@media (prefers-color-scheme:dark){:where([disabled]),:where([type=reset]),:where([type=submit]),:where(form button:not([type=button])){--_bg:var(--surface-1)}}progress{--_track: hsl(228 100% 90%);--_track-size: min(10px, 1ex);--_progress: hsl(228 100% 50%);--_radius: 1e3px;--_indeterminate-track: linear-gradient(to right, var(--_track) 45%, var(--_progress) 0%, var(--_progress) 55%, var(--_track) 0% );--_indeterminate-track-size: 225% 100%;--_indeterminate-track-animation: progress-loading 2s infinite ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;position:relative;height:var(--_track-size);border-radius:var(--_radius);overflow:hidden}@media (prefers-color-scheme: dark){progress{--_track: hsl(228 20% 30%);--_progress: hsl(228 100% 75%) }}progress:focus-visible{outline-color:var(--_progress)}progress[value]::-webkit-progress-bar{background-color:var(--_track)}progress[value]::-webkit-progress-value{background-color:var(--_progress);-webkit-transition:inline-size .25s ease-out;transition:inline-size .25s ease-out}progress[value]::-moz-progress-bar{background-color:var(--_progress)}progress:indeterminate:after{content:"";inset:0;position:absolute;background:var(--_indeterminate-track);background-size:var(--_indeterminate-track-size);background-position:right;-webkit-animation:var(--_indeterminate-track-animation);animation:var(--_indeterminate-track-animation)}progress:indeterminate::-webkit-progress-bar{background:var(--_indeterminate-track);background-size:var(--_indeterminate-track-size);background-position:right;-webkit-animation:var(--_indeterminate-track-animation);animation:var(--_indeterminate-track-animation)}progress:indeterminate::-moz-progress-bar{background:var(--_indeterminate-track);background-size:var(--_indeterminate-track-size);background-position:right;animation:var(--_indeterminate-track-animation)}progress[value="1"]:not([max]):before,progress[max="100"][value="100"]:before{content:"\2713";position:absolute;inset-block:0;inset-inline:auto 0;display:flex;align-items:center;-webkit-padding-end:max(calc(var(--_track-size) / 4),3px);padding-inline-end:max(calc(var(--_track-size) / 4),3px);color:#fff;font-size:calc(var(--_track-size) / 1.25)}@-webkit-keyframes progress-loading{50%{background-position:left}}@keyframes progress-loading{50%{background-position:left}}.button-group{display:flex;flex-flow:row wrap;justify-content:center;gap:var(--size-3);padding:var(--size-4) var(--size-6)}label{display:grid;align-items:center;justify-items:center;place-items:center}.sr-only{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}main{display:grid;gap:var(--size-3);text-align:center;min-block-size:80vh;align-content:center;justify-content:center;place-content:center}.card{display:grid;gap:var(--size-3);padding:var(--size-4) var(--size-6);max-inline-size:80vw;background:white;border-radius:var(--radius-round);border:1px solid var(--surface-2);box-shadow:var(--shadow-5);inline-size:var(--size-content-2)}@media (prefers-color-scheme: dark){.card{background:var(--surface-2)}}.card progress{inline-size:100%}body{display:grid;align-content:center;justify-content:center;place-content:center}.github-corner{fill:var(--surface-4);color:var(--surface-1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner>svg{fill:inherit;stroke:inherit;position:absolute;top:0;right:0}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <main id="loading-zone" aria-busy="true">
+      <p>Loading Level</p>
+      <div class="card">
+        <label>
+          <span class="sr-only">Loading progress</span>
+          <progress
+            indeterminate
+            role="progressbar"
+            aria-describedby="loading-zone"
+            tabindex="-1"
+          >unknown</progress>
+        </label>
+      </div>
+    </main>
+
+    <div class="button-group">
+      <button id="increase" onclick="increase()">Increase</button>
+      <button id="decrease" onclick="decrease()">Decrease</button>
+      <button id="complete" type="submit" onclick="complete()">Complete</button>
+      <button id="reset" type="reset" onclick="reset()">Reset</button>
+    </div>
+
+    {% set script %}
+      const c=function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))u(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&u(s)}).observe(document,{childList:!0,subtree:!0});function a(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?r.credentials="include":e.crossorigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function u(e){if(e.ep)return;e.ep=!0;const r=a(e);fetch(e.href,r)}};c();const l=document.querySelector("progress"),d=document.querySelector("#loading-zone"),t={val:.1},f=(o,n)=>+(Math.round(o+"e+"+n)+"e-"+n),i=()=>{if(d.setAttribute("aria-busy",t.val<1),t.val===null){l.removeAttribute("aria-valuenow"),l.removeAttribute("value"),l.focus();return}const o=f(t.val,2),n=o*100+"%";l.value=o,l.setAttribute("aria-valuenow",n),l.innerText=n,l.focus()};setTimeout(o=>i(),2e3);setTimeout(o=>{t.val=.4,i()},4e3);setTimeout(o=>{t.val=.6,i()},5e3);setTimeout(o=>{t.val=.9,i()},6e3);setTimeout(o=>{t.val=1,i()},8e3);window.increase=o=>{t.val+=.2,t.val>1&&(t.val=1),i()};window.decrease=o=>{t.val-=.2,t.val<0&&(t.val=0),i()};window.complete=o=>{t.val=1,i()};window.reset=o=>{t.val=null,i()};
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/loading-bar/index.md b/src/site/content/en/patterns/components/loading-bar/index.md
new file mode 100644
index 00000000000..09c2204ef50
--- /dev/null
+++ b/src/site/content/en/patterns/components/loading-bar/index.md
@@ -0,0 +1,15 @@
+---
+layout: pattern
+title: Loading Bar
+description: |
+  This pattern shows how to build a color adaptive and accessible loading bar with the progress element.
+  <br><br>
+  <a href="/building-a-loading-bar-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=TD1QxlGgIPk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/progress">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+This pattern shows how to build a color adaptive and accessible loading bar with
+the `<progress>` element.
+
+<a href="/building-a-loading-bar-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=TD1QxlGgIPk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/progress">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/media-scroller/assets/body.html b/src/site/content/en/patterns/components/media-scroller/assets/body.html
new file mode 100644
index 00000000000..dbee049bf1b
--- /dev/null
+++ b/src/site/content/en/patterns/components/media-scroller/assets/body.html
@@ -0,0 +1,2216 @@
+<section>
+  <header>
+    <h2>Similar to Locke & Key</h2>
+    <h3>Popular with similar viewers</h3>
+  </header>
+
+  <ul class="horizontal-media-scroller">
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?179">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?82">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?39">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?94">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?95">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?86">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?87">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?88">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?910">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?198">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?287">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?397">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?789">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?785">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?788">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?997">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?93">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?48">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?75">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?999">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?322">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?43">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+  </ul>
+</section>
+
+<section>
+  <header>
+    <h2>Suspense</h2>
+  </header>
+
+  <ul class="horizontal-media-scroller">
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?14">
+      </picture>
+      <figcaption>The Strain (limited)</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?15">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?16">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?17">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?19">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?11">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?12">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?121">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?132">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?123">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?144">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?125">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?126">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?137">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?118">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?419">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?112">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?122">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?313">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?194">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?915">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?176">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?187">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?178">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?189">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?117">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+  </ul>
+</section>
+
+<section>
+  <header>
+    <h2>Horror</h2>
+  </header>
+
+  <ul class="horizontal-media-scroller">
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+      </picture>
+      <figcaption>Penny Awful: An original series</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+      </picture>
+      <figcaption>Legends</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+      </picture>
+      <figcaption>The Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+      </picture>
+      <figcaption>Almost Family</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+      </picture>
+      <figcaption>The Strain</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+      </picture>
+      <figcaption>The Following</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+      </picture>
+      <figcaption>BERLIN STATION</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+      </picture>
+      <figcaption>Penny Dreadful</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+      </picture>
+      <figcaption>Castle Rock</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+      </picture>
+      <figcaption>The Walking Dead</figcaption>
+    </figure></a></li>
+    <li><a href="#"><figure>
+      <picture>
+        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+      </picture>
+      <figcaption>Fear The Walking Dead</figcaption>
+    </figure></a></li>
+  </ul>
+</section>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/media-scroller/assets/script.js b/src/site/content/en/patterns/components/media-scroller/assets/script.js
new file mode 100644
index 00000000000..631bc93c9fd
--- /dev/null
+++ b/src/site/content/en/patterns/components/media-scroller/assets/script.js
@@ -0,0 +1,7 @@
+import {rovingIndex} from "https://cdn.skypack.dev/roving-ux"
+
+document.querySelectorAll('.horizontal-media-scroller')
+  .forEach(scroller => rovingIndex({
+    element: scroller,
+    target: 'a',
+  }))
diff --git a/src/site/content/en/patterns/components/media-scroller/assets/style.css b/src/site/content/en/patterns/components/media-scroller/assets/style.css
new file mode 100644
index 00000000000..0fbb8828c7d
--- /dev/null
+++ b/src/site/content/en/patterns/components/media-scroller/assets/style.css
@@ -0,0 +1,63 @@
+.horizontal-media-scroller {
+  --size: 150px;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: calc(var(--gap) / 2);
+  margin: 0;
+
+  padding-inline-start: var(--gap);
+  padding-inline-end: var(--gap);
+  padding-block-start: calc(var(--gap) / 2);
+  padding-block-end: calc(var(--gap) / 2);
+
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+  scroll-padding-left: var(--gap);
+  scroll-padding-right: var(--gap);
+  scroll-padding-inline: var(--gap);
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+
+  & > li {
+    display: inline-block;
+
+    /*  container padding fix  */
+    &:last-of-type figure {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+
+        inline-size: var(--gap);
+        block-size: 100%;
+
+        inset-block-start: 0;
+        inset-inline-end: calc(var(--gap) * -1);
+      }
+    }
+  }
+
+  & figure {
+    scroll-snap-align: start;
+  }
+
+  & a {
+    display: inline-block;
+    text-decoration: none;
+    color: inherit;
+    outline-offset: 12px;
+
+    &:focus {
+      outline-offset: 7px;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: outline-offset .25s ease;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/media-scroller/demo.njk b/src/site/content/en/patterns/components/media-scroller/demo.njk
new file mode 100644
index 00000000000..b58c0382b3f
--- /dev/null
+++ b/src/site/content/en/patterns/components/media-scroller/demo.njk
@@ -0,0 +1,2238 @@
+---
+patternId: components/media-scroller
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/blokk/blokk.css">
+    <style>
+      :root{--sm-space:1rem;--md-space:2rem}html{block-size:100%}body{min-block-size:100%;box-sizing:border-box;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--md-space);-webkit-padding-before:calc(var(--md-space) * 2);padding-block-start:calc(var(--md-space) * 2);-webkit-padding-after:var(--md-space);padding-block-end:var(--md-space);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}section{--gap:var(--md-space);display:grid;gap:var(--gap)}section>header{-webkit-padding-start:var(--gap);padding-inline-start:var(--gap);-webkit-padding-end:var(--gap);padding-inline-end:var(--gap);display:grid;gap:calc(var(--sm-space)/ 2)}section>header>:is(h2,h3){margin:0}.horizontal-media-scroller{--size:150px;display:grid;grid-auto-flow:column;gap:calc(var(--gap)/ 2);margin:0;-webkit-padding-start:var(--gap);padding-inline-start:var(--gap);-webkit-padding-end:var(--gap);padding-inline-end:var(--gap);-webkit-padding-before:calc(var(--gap)/ 2);padding-block-start:calc(var(--gap)/ 2);-webkit-padding-after:calc(var(--gap)/ 2);padding-block-end:calc(var(--gap)/ 2);overflow-x:auto;overscroll-behavior-inline:contain;-ms-scroll-snap-type:inline mandatory;scroll-snap-type:inline mandatory;scroll-padding-left:var(--gap);scroll-padding-right:var(--gap);scroll-padding-inline:var(--gap)}@media (prefers-reduced-motion:no-preference){.horizontal-media-scroller{scroll-behavior:smooth}}.horizontal-media-scroller>li{display:inline-block}.horizontal-media-scroller>li:last-of-type figure{position:relative}.horizontal-media-scroller>li:last-of-type figure::after{content:"";position:absolute;inline-size:var(--gap);block-size:100%;inset-block-start:0;inset-inline-end:calc(var(--gap) * -1)}.horizontal-media-scroller figure{scroll-snap-align:start}.horizontal-media-scroller a{display:inline-block;text-decoration:none;color:inherit;outline-offset:12px}.horizontal-media-scroller a:focus{outline-offset:7px}@media (prefers-reduced-motion:no-preference){.horizontal-media-scroller a{transition:outline-offset .25s ease}}figure{display:grid;gap:calc(var(--gap)/ 2);margin:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (prefers-reduced-data:reduce){figure{min-inline-size:var(--size)}figure>picture{display:none}}figure>picture{inline-size:var(--size);block-size:var(--size)}figure img{inline-size:100%;block-size:100%;-o-object-fit:cover;object-fit:cover;border-radius:1ex;overflow:hidden;background-image:linear-gradient(to bottom,#666,#333)}figure>figcaption{font-size:1.75rem;font-weight:300;word-break:break-word;font-family:blokk}h2{font-size:var(--md-space);font-weight:800;letter-spacing:.75px}h3{font-weight:400;letter-spacing:.75px}@supports (aspect-ratio:1){.horizontal-media-scroller figure>picture{inline-size:auto;aspect-ratio:1}section:nth-child(2) .horizontal-media-scroller figure>picture{aspect-ratio:16/9}section:nth-child(3) .horizontal-media-scroller figure>picture{block-size:calc(var(--size) * 2);aspect-ratio:4/3}@media (max-width:480px){section:nth-child(3) .horizontal-media-scroller figure>picture{block-size:calc(var(--size) * 1.5)}}}.github-corner{fill:CanvasText;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <section>
+      <header>
+        <h2>Similar to Locke & Key</h2>
+        <h3>Popular with similar viewers</h3>
+      </header>
+
+      <ul class="horizontal-media-scroller">
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?179">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?82">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?39">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?94">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?95">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?86">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?87">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?88">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?910">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?198">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?287">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?397">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?789">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?785">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?788">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?997">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?93">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?48">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?75">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?999">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?322">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?43">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+      </ul>
+    </section>
+
+    <section>
+      <header>
+        <h2>Suspense</h2>
+      </header>
+
+      <ul class="horizontal-media-scroller">
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?14">
+          </picture>
+          <figcaption>The Strain (limited)</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?15">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?16">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?17">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?19">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?11">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?12">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?121">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?132">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?123">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?144">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?125">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?126">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?137">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?118">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?419">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?110">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?112">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?122">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?313">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?194">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?915">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?176">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?187">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?178">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?189">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?117">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+      </ul>
+    </section>
+
+    <section>
+      <header>
+        <h2>Horror</h2>
+      </header>
+
+      <ul class="horizontal-media-scroller">
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+          </picture>
+          <figcaption>Penny Awful: An original series</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?21">
+          </picture>
+          <figcaption>Legends</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?22">
+          </picture>
+          <figcaption>The Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?23">
+          </picture>
+          <figcaption>Almost Family</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?24">
+          </picture>
+          <figcaption>The Strain</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
+          </picture>
+          <figcaption>The Following</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?26">
+          </picture>
+          <figcaption>BERLIN STATION</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
+          </picture>
+          <figcaption>Penny Dreadful</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?28">
+          </picture>
+          <figcaption>Castle Rock</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?29">
+          </picture>
+          <figcaption>The Walking Dead</figcaption>
+        </figure></a></li>
+        <li><a href="#"><figure>
+          <picture>
+            <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?210">
+          </picture>
+          <figcaption>Fear The Walking Dead</figcaption>
+        </figure></a></li>
+      </ul>
+    </section>
+
+    {% set script %}
+      (()=>{var a=new Map,s=({element:e,target:t})=>{let n=e.querySelectorAll(t||":scope *"),o=n[0];e.tabIndex=-1,n.forEach(r=>r.tabIndex=-1),o.tabIndex=0,a.set(e,{targets:n,active:o,index:0}),e.addEventListener("focusin",r=>{a.get("last_rover")!=e&&(i(e,a.get(e).active),a.set("last_rover",e))}),e.addEventListener("keydown",r=>{switch(r.keyCode){case 39:r.preventDefault(),c(e);break;case 37:r.preventDefault(),d(e)}})},c=e=>{let t=a.get(e);t.index+=1,t.index>t.targets.length-1&&(t.index=t.targets.length-1);let n=t.targets[t.index];n&&i(e,n)},d=e=>{let t=a.get(e);t.index-=1,t.index<1&&(t.index=0);let n=t.targets[t.index];n&&i(e,n)},i=(e,t)=>{let n=a.get(e);n.active.tabIndex=-1,n.active=t,n.active.tabIndex=0,n.active.focus()};document.querySelectorAll(".horizontal-media-scroller").forEach(e=>s({element:e,target:"a"}));})();
+    {% endset %}
+    <script type="module">{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/media-scroller/index.md b/src/site/content/en/patterns/components/media-scroller/index.md
new file mode 100644
index 00000000000..9a7144ca0e6
--- /dev/null
+++ b/src/site/content/en/patterns/components/media-scroller/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern
+title: Media Scroller
+description: |
+  This pattern shows how to create horizontal scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!)
+  <br><br>
+  Note: this component uses a library called <a href="https://github.com/argyleink/roving-ux">roving-ux</a> to create a focus group.
+  <br><br>
+  <a href="/building-a-media-scroller-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=jmLdZY_Lo1k">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/media-scroller">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to create horizontal scrolling experiences for the web
+that are minimal, responsive, accessible and work across browsers and platforms
+(like TVs!)
+
+<a href="/building-a-media-scroller-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=jmLdZY_Lo1k">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/media-scroller">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/multi-select/assets/body.html b/src/site/content/en/patterns/components/multi-select/assets/body.html
new file mode 100644
index 00000000000..11555141c03
--- /dev/null
+++ b/src/site/content/en/patterns/components/multi-select/assets/body.html
@@ -0,0 +1,160 @@
+<main>
+  <header>
+    <h1>Lighting</h1>
+    <small>Find your perfect light</small>
+  </header>
+  <aside>
+    <form>
+      <select multiple="true" title="Filter results by category">
+        <optgroup label="New">
+          <option value="last 30 days">Last 30 Days</option>
+          <option value="last 6 months">Last 6 Months</option>
+        </optgroup>
+        <optgroup label="Lamps">
+          <option value="table lamps">Table Lamps</option>
+          <option value="desk lamps">Desk Lamps</option>
+          <option value="floor lamps">Floor Lamps</option>
+        </optgroup>
+        <optgroup label="Ceiling">
+          <option value="chandeliers">Chandeliers</option>
+          <option value="pendant">Pendant</option>
+          <option value="flush">Flush</option>
+          <option value="fans">Fans</option>
+        </optgroup>
+        <optgroup label="By Room">
+          <option value="bedroom">Bedroom</option>
+          <option value="dining room">Dining Room</option>
+          <option value="kitchen">Kitchen</option>
+          <option value="living room">Living Room</option>
+          <option value="bathroom">Bathroom</option>
+          <option value="entryway">Entryway</option>
+          <option value="outdoor">Outdoor</option>
+        </optgroup>
+        <optgroup label="Kids">
+          <option value="lamps">Lamps</option>
+          <option value="night lights">Night Lights</option>
+          <option value="ceiling">Ceiling</option>
+        </optgroup>
+      </select>
+      
+      <fieldset>
+        <legend>New</legend>
+        <div>
+          <input type="checkbox" id="last-30-days" name="new" value="last 30 days">
+          <label for="last-30-days">Last 30 Days</label>
+        </div>
+        <div>
+          <input type="checkbox" id="last-6-months" name="new" value="last 6 months">
+          <label for="last-6-months">Last 6 Months</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Lamps</legend>
+        <div>
+          <input type="checkbox" id="table-lamps" name="lamps" value="table lamps">
+          <label for="table-lamps">Table Lamps</label>
+        </div>
+        <div>
+          <input type="checkbox" id="desk-lamps" name="lamps" value="desk lamps">
+          <label for="desk-lamps">Desk Lamps</label>
+        </div>
+        <div>
+          <input type="checkbox" id="floor-lamps" name="lamps" value="floor lamps">
+          <label for="floor-lamps">Floor Lamps</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Ceiling</legend>
+        <div>
+          <input type="checkbox" id="chandeliers" name="ceiling" value="chandeliers">
+          <label for="chandeliers">Chandeliers</label>
+        </div>
+        <div>
+          <input type="checkbox" id="pendant" name="ceiling" value="pendant">
+          <label for="pendant">Pendant</label>
+        </div>
+        <div>
+          <input type="checkbox" id="flush" name="ceiling" value="flush">
+          <label for="flush">Flush</label>
+        </div>
+        <div>
+          <input type="checkbox" id="fans" name="ceiling" value="fans">
+          <label for="fans">Fans</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>By Room</legend>
+        <div>
+          <input type="checkbox" id="bedroom" name="by room" value="bedroom">
+          <label for="bedroom">Bedroom</label>
+        </div>
+        <div>
+          <input type="checkbox" id="dining-room" name="by room" value="dining room">
+          <label for="dining-room">Dining Room</label>
+        </div>
+        <div>
+          <input type="checkbox" id="kitchen" name="by room" value="kitchen">
+          <label for="kitchen">Kitchen</label>
+        </div>
+        <div>
+          <input type="checkbox" id="living-room" name="by room" value="living room">
+          <label for="living-room">Living Room</label>
+        </div>
+        <div>
+          <input type="checkbox" id="bathroom" name="by room" value="bathroom">
+          <label for="bathroom">Bathroom</label>
+        </div>
+        <div>
+          <input type="checkbox" id="entryway" name="by room" value="entryway">
+          <label for="entryway">Entryway</label>
+        </div>
+        <div>
+          <input type="checkbox" id="outdoor" name="by room" value="outdoor">
+          <label for="outdoor">Outdoor</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Kids</legend>
+        <div>
+          <input type="checkbox" id="lamps" name="kids" value="lamps">
+          <label for="lamps">Lamps</label>
+        </div>
+        <div>
+          <input type="checkbox" id="night-lights" name="kids" value="night lights">
+          <label for="night-lights">Night Lights</label>
+        </div>
+        <div>
+          <input type="checkbox" id="ceiling" name="kids" value="ceiling">
+          <label for="ceiling">Ceiling</label>
+        </div>
+      </fieldset>
+    </form>
+    <div role="status" class="sr-only" id="applied-filters"></div>
+  </aside>
+  <article>
+    <span class="last-30-days table-lamps"></span>
+    <span class="last-6-months desk-lamps"></span>
+    <span class="floor-lamps"></span>
+    <span class="last-6-months chandeliers"></span>
+    <span class="pendant last-6-months"></span>
+    <span class="flush fans"></span>
+    <span class="fans pendant table-lamps"></span>
+    <span class="bedroom"></span>
+    <span class="dining-room last-30-days chandeliers"></span>
+    <span class="kitchen lamps"></span>
+    <span class="living-room"></span>
+    <span class="bathroom living-room chandeliers desk-lamps"></span>
+    <span class="bathroom table-lamps desk-lamps"></span>
+    <span class="entryway last-30-days"></span>
+    <span class="outdoor desk-lamps"></span>
+    <span class="lamps last-30-days"></span>
+    <span class="night-lights table-lamps"></span>
+    <span class="ceiling last-30-days"></span>
+    <span class="floor-lamps table-lamps"></span>
+    <span class="floor-lamps last-6-months"></span>
+    <span class="dining-room last-30-days chandeliers"></span>
+    <span class="kitchen lamps"></span>
+    <span class="living-room"></span>
+    <span class="bathroom living-room chandeliers desk-lamps"></span>
+  </article>
+</main>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/multi-select/assets/script.js b/src/site/content/en/patterns/components/multi-select/assets/script.js
new file mode 100644
index 00000000000..8d7bca9d7f9
--- /dev/null
+++ b/src/site/content/en/patterns/components/multi-select/assets/script.js
@@ -0,0 +1,68 @@
+import 'https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js'
+
+const IsotopeGrid = new Isotope( 'article', {
+  itemSelector: 'span',
+  layoutMode: 'fitRows',
+  percentPosition: true
+})
+  
+const filterGrid = query => {
+  const { matches:motionOK } = window.matchMedia(
+    '(prefers-reduced-motion: no-preference)'
+  )
+  
+  IsotopeGrid.arrange({
+    filter: query,
+    stagger: 25,
+    transitionDuration: motionOK ? '0.4s' : 0,
+  })
+}
+
+// takes a <select> and returns the selection as an array
+const prepareSelectOptions = element =>
+  Array.from(element.selectedOptions).reduce((data, opt) => {
+    data.push([opt.parentElement.label.toLowerCase(), opt.value])
+    return data
+  }, [])
+
+// <select> watcher
+document.querySelector('select').addEventListener('input', e => {
+  let selectData = prepareSelectOptions(e.target)
+  console.warn('Multiselect', selectData)
+
+  // DEMO
+  // isotope query assembly from checkbox selections
+  let query = selectData.reduce((query, val) => {
+    query.push('.' + val[1].split(' ').join('-'))
+    return query
+  }, []).join(',')
+
+  filterGrid(query)
+
+  // update for assistive technology
+  let statusRoleElement = document.querySelector('#applied-filters')
+  let filterResults = IsotopeGrid.getFilteredItemElements().length
+
+  statusRoleElement.style.counterSet = selectData.length
+  statusRoleElement.textContent = " giving " + filterResults + " results"
+})
+
+document
+  .querySelector('aside form')
+  .addEventListener('input', e => {
+    if (e.target.nodeName === 'SELECT') return
+      
+    const formData = new FormData(document.querySelector('form'))
+    console.warn('Checkboxes', Array.from(formData.entries()))
+
+    // DEMO
+    // isotope query assembly from checkbox selections
+    let query = Array.from(formData.values()).reduce((query, val) => {
+      query.push('.' + val.split(' ').join('-'))
+      return query
+    }, []).join(',')
+
+    filterGrid(query)
+
+    document.querySelector('#applied-filters').textContent = " giving " + IsotopeGrid.getFilteredItemElements().length + " results"
+  })
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/multi-select/assets/style.css b/src/site/content/en/patterns/components/multi-select/assets/style.css
new file mode 100644
index 00000000000..a12c6191108
--- /dev/null
+++ b/src/site/content/en/patterns/components/multi-select/assets/style.css
@@ -0,0 +1,77 @@
+main {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 5vmin;
+  align-items: flex-start;
+
+  & > header {
+    grid-column: 1 / -1;
+  }
+
+  @media (orientation: portrait) {
+    grid-template-columns: 1fr;
+  }
+
+  @media (--useSelect) {
+    & > article {
+      grid-row: 3;
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+article {
+  --size: min(300px, calc(25% - 2ch));
+  margin: -1ch;
+
+  & > span {
+    will-change: transform;
+    background: hsl(0 0% 50% / 25%);
+    border-radius: 10px;
+    inline-size: var(--size);
+    block-size: 15ch;
+    margin: 1ch;
+
+    @media (orientation: portrait) {
+      --size: calc(50% - 2ch);
+    }
+
+    @supports (aspect-ratio: 1) {
+      block-size: auto;
+      aspect-ratio: 1;
+    }
+  }
+}
+
+header {
+  display: grid;
+  gap: 1ch;
+}
+
+aside {
+  counter-reset: filters;
+
+  & :checked {
+    counter-increment: filters; 
+  }
+
+  & #applied-filters::before {
+    content: counter(filters) " filters ";
+  }
+}
+
+fieldset:first-of-type {
+  margin-block-start: -5px;
+}
+
+[role="status"] {
+  @media (--useSelect) {
+    display: none;
+  }
+}
+
+.sr-only {
+  inline-size: 0;
+  block-size: 0;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/multi-select/demo.njk b/src/site/content/en/patterns/components/multi-select/demo.njk
new file mode 100644
index 00000000000..fcf43fe62d2
--- /dev/null
+++ b/src/site/content/en/patterns/components/multi-select/demo.njk
@@ -0,0 +1,180 @@
+---
+patternId: components/multi-select
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root{--border-color:hsl(221 30% 90%);--surface-color-1:hsl(221 90% 98%);--surface-color-2:hsl(221 40% 100%);--text-color-1:hsl(221 50% 15%);--text-color-2:hsl(221 20% 40%);--shadow-highlight-color:hsl(219 62% 42% / 25%);--isLTR:1;--isRTL:-1}:root:dir(rtl){--isLTR:-1;--isRTL:1}@media (prefers-color-scheme:dark){:root{--border-color:hsl(221 10% 20%);--surface-color-1:hsl(221 20% 5%);--surface-color-2:hsl(221 5% 10%);--text-color-1:hsl(221 90% 98%);--text-color-2:hsl(221 20% 80%);--shadow-highlight-color:hsl(219 50% 82% / 25%)}}select{font-size:max(100%,1rem);padding-inline:1ch;padding-block:.5ch;display:none}@media (pointer:coarse){select[multiple]{display:block}}form{display:grid;gap:2ch;max-inline-size:30ch}fieldset{padding:2ch;border-radius:10px;background-color:var(--surface-color-2);border:1px solid var(--border-color)}@media (pointer:coarse){fieldset{display:none}}fieldset:focus-within{border-color:var(--text-color-2)}fieldset:focus-within>legend{color:var(--text-color-1)}fieldset>legend{font-size:.9em;color:var(--text-color-2)}fieldset>div+div{-webkit-margin-before:2ch;margin-block-start:2ch}fieldset>div{display:flex;gap:2ch;align-items:baseline;color:var(--text-color-1)}fieldset>div>label{line-height:1.5}*{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:dark light;background-color:var(--surface-color-1);color:var(--text-color-1)}body{min-block-size:100%;font-family:Blokk,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:125%;display:flex;flex-direction:column;padding:10vmin}input[type=checkbox]{margin:0;outline-offset:5px;accent-color:var(--text-color-2);transform-style:preserve-3d;cursor:pointer}input[type=checkbox]:hover::before{--thumb-scale:1}@media (hover:none){input[type=checkbox]{inline-size:1.5rem;block-size:1.5rem}}input[type=checkbox]::before{--thumb-scale:.01;--thumb-highlight-size:3rem;content:"";inline-size:var(--thumb-highlight-size);block-size:var(--thumb-highlight-size);-webkit-clip-path:circle(50%);clip-path:circle(50%);position:absolute;inset-block-start:50%;inset-inline-start:50%;background:hsl(0 0% 50% / 20%);transform-origin:center center;transform:translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));will-change:transform}@media (prefers-reduced-motion:no-preference){input[type=checkbox]::before{transition:transform .2s ease}}main{display:grid;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;gap:5vmin;align-items:flex-start}main>header{grid-column:1/-1}@media (orientation:portrait){main{grid-template-columns:1fr}}@media (pointer:coarse){main>article{grid-row:3;grid-column:1/-1}}article{--size:min(300px, calc(25% - 2ch));margin:-1ch}article>span{will-change:transform;background:hsl(0 0% 50% / 25%);border-radius:10px;inline-size:var(--size);block-size:15ch;margin:1ch}@media (orientation:portrait){article>span{--size:calc(50% - 2ch)}}@supports (aspect-ratio:1){article>span{block-size:auto;aspect-ratio:1}}header{display:grid;gap:1ch}aside{counter-reset:filters}aside :checked{counter-increment:filters}aside #applied-filters::before{content:counter(filters) " filters "}fieldset:first-of-type{-webkit-margin-before:-5px;margin-block-start:-5px}@media (pointer:coarse){[role=status]{display:none}}.sr-only{inline-size:0;block-size:0;overflow:hidden}.github-corner{fill:var(--border-color);color:var(--surface-color-1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Lighting</h1>
+        <small>Find your perfect light</small>
+      </header>
+      <aside>
+        <form>
+          <select multiple="true" title="Filter results by category">
+            <optgroup label="New">
+              <option value="last 30 days">Last 30 Days</option>
+              <option value="last 6 months">Last 6 Months</option>
+            </optgroup>
+            <optgroup label="Lamps">
+              <option value="table lamps">Table Lamps</option>
+              <option value="desk lamps">Desk Lamps</option>
+              <option value="floor lamps">Floor Lamps</option>
+            </optgroup>
+            <optgroup label="Ceiling">
+              <option value="chandeliers">Chandeliers</option>
+              <option value="pendant">Pendant</option>
+              <option value="flush">Flush</option>
+              <option value="fans">Fans</option>
+            </optgroup>
+            <optgroup label="By Room">
+              <option value="bedroom">Bedroom</option>
+              <option value="dining room">Dining Room</option>
+              <option value="kitchen">Kitchen</option>
+              <option value="living room">Living Room</option>
+              <option value="bathroom">Bathroom</option>
+              <option value="entryway">Entryway</option>
+              <option value="outdoor">Outdoor</option>
+            </optgroup>
+            <optgroup label="Kids">
+              <option value="lamps">Lamps</option>
+              <option value="night lights">Night Lights</option>
+              <option value="ceiling">Ceiling</option>
+            </optgroup>
+          </select>
+
+          <fieldset>
+            <legend>New</legend>
+            <div>
+              <input type="checkbox" id="last-30-days" name="new" value="last 30 days">
+              <label for="last-30-days">Last 30 Days</label>
+            </div>
+            <div>
+              <input type="checkbox" id="last-6-months" name="new" value="last 6 months">
+              <label for="last-6-months">Last 6 Months</label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>Lamps</legend>
+            <div>
+              <input type="checkbox" id="table-lamps" name="lamps" value="table lamps">
+              <label for="table-lamps">Table Lamps</label>
+            </div>
+            <div>
+              <input type="checkbox" id="desk-lamps" name="lamps" value="desk lamps">
+              <label for="desk-lamps">Desk Lamps</label>
+            </div>
+            <div>
+              <input type="checkbox" id="floor-lamps" name="lamps" value="floor lamps">
+              <label for="floor-lamps">Floor Lamps</label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>Ceiling</legend>
+            <div>
+              <input type="checkbox" id="chandeliers" name="ceiling" value="chandeliers">
+              <label for="chandeliers">Chandeliers</label>
+            </div>
+            <div>
+              <input type="checkbox" id="pendant" name="ceiling" value="pendant">
+              <label for="pendant">Pendant</label>
+            </div>
+            <div>
+              <input type="checkbox" id="flush" name="ceiling" value="flush">
+              <label for="flush">Flush</label>
+            </div>
+            <div>
+              <input type="checkbox" id="fans" name="ceiling" value="fans">
+              <label for="fans">Fans</label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>By Room</legend>
+            <div>
+              <input type="checkbox" id="bedroom" name="by room" value="bedroom">
+              <label for="bedroom">Bedroom</label>
+            </div>
+            <div>
+              <input type="checkbox" id="dining-room" name="by room" value="dining room">
+              <label for="dining-room">Dining Room</label>
+            </div>
+            <div>
+              <input type="checkbox" id="kitchen" name="by room" value="kitchen">
+              <label for="kitchen">Kitchen</label>
+            </div>
+            <div>
+              <input type="checkbox" id="living-room" name="by room" value="living room">
+              <label for="living-room">Living Room</label>
+            </div>
+            <div>
+              <input type="checkbox" id="bathroom" name="by room" value="bathroom">
+              <label for="bathroom">Bathroom</label>
+            </div>
+            <div>
+              <input type="checkbox" id="entryway" name="by room" value="entryway">
+              <label for="entryway">Entryway</label>
+            </div>
+            <div>
+              <input type="checkbox" id="outdoor" name="by room" value="outdoor">
+              <label for="outdoor">Outdoor</label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>Kids</legend>
+            <div>
+              <input type="checkbox" id="lamps" name="kids" value="lamps">
+              <label for="lamps">Lamps</label>
+            </div>
+            <div>
+              <input type="checkbox" id="night-lights" name="kids" value="night lights">
+              <label for="night-lights">Night Lights</label>
+            </div>
+            <div>
+              <input type="checkbox" id="ceiling" name="kids" value="ceiling">
+              <label for="ceiling">Ceiling</label>
+            </div>
+          </fieldset>
+        </form>
+        <div role="status" class="sr-only" id="applied-filters"></div>
+      </aside>
+      <article>
+        <span class="last-30-days table-lamps"></span>
+        <span class="last-6-months desk-lamps"></span>
+        <span class="floor-lamps"></span>
+        <span class="last-6-months chandeliers"></span>
+        <span class="pendant last-6-months"></span>
+        <span class="flush fans"></span>
+        <span class="fans pendant table-lamps"></span>
+        <span class="bedroom"></span>
+        <span class="dining-room last-30-days chandeliers"></span>
+        <span class="kitchen lamps"></span>
+        <span class="living-room"></span>
+        <span class="bathroom living-room chandeliers desk-lamps"></span>
+        <span class="bathroom table-lamps desk-lamps"></span>
+        <span class="entryway last-30-days"></span>
+        <span class="outdoor desk-lamps"></span>
+        <span class="lamps last-30-days"></span>
+        <span class="night-lights table-lamps"></span>
+        <span class="ceiling last-30-days"></span>
+        <span class="floor-lamps table-lamps"></span>
+        <span class="floor-lamps last-6-months"></span>
+        <span class="dining-room last-30-days chandeliers"></span>
+        <span class="kitchen lamps"></span>
+        <span class="living-room"></span>
+        <span class="bathroom living-room chandeliers desk-lamps"></span>
+      </article>
+    </main>
+
+    {% set script %}
+      (()=>{var ut=Object.create,G=Object.defineProperty;var ht=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var lt=Object.getPrototypeOf,dt=Object.prototype.hasOwnProperty;var ct=u=>G(u,"__esModule",{value:!0});var x=(u,o)=>()=>(o||u((o={exports:{}}).exports,o),o.exports);var pt=(u,o,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of ft(o))!dt.call(u,l)&&l!=="default"&&G(u,l,{get:()=>o[l],enumerable:!(p=ht(o,l))||p.enumerable});return u},mt=u=>pt(ct(G(u!=null?ut(lt(u)):{},"default",u&&u.__esModule&&"default"in u?{get:()=>u.default,enumerable:!0}:{value:u,enumerable:!0})),u);var U=x((J,M)=>{(function(u,o){typeof define=="function"&&define.amd?define(o):typeof M=="object"&&M.exports?M.exports=o():u.EvEmitter=o()})(typeof window!="undefined"?window:J,function(){"use strict";function u(){}var o=u.prototype;return o.on=function(p,l){if(!(!p||!l)){var a=this._events=this._events||{},f=a[p]=a[p]||[];return f.indexOf(l)==-1&&f.push(l),this}},o.once=function(p,l){if(!(!p||!l)){this.on(p,l);var a=this._onceEvents=this._onceEvents||{},f=a[p]=a[p]||{};return f[l]=!0,this}},o.off=function(p,l){var a=this._events&&this._events[p];if(!(!a||!a.length)){var f=a.indexOf(l);return f!=-1&&a.splice(f,1),this}},o.emitEvent=function(p,l){var a=this._events&&this._events[p];if(!(!a||!a.length)){a=a.slice(0),l=l||[];for(var f=this._onceEvents&&this._onceEvents[p],n=0;n<a.length;n++){var s=a[n],g=f&&f[s];g&&(this.off(p,s),delete f[s]),s.apply(this,l)}return this}},o.allOff=function(){delete this._events,delete this._onceEvents},u})});var C=x((yt,R)=>{(function(u,o){typeof define=="function"&&define.amd?define(o):typeof R=="object"&&R.exports?R.exports=o():u.getSize=o()})(window,function(){"use strict";function o(h){var I=parseFloat(h),y=h.indexOf("%")==-1&&!isNaN(I);return y&&I}function p(){}var l=typeof console=="undefined"?p:function(h){console.error(h)},a=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],f=a.length;function n(){for(var h={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},I=0;I<f;I++){var y=a[I];h[y]=0}return h}function s(h){var I=getComputedStyle(h);return I||l("Style returned "+I+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),I}var g=!1,_;function d(){if(!g){g=!0;var h=document.createElement("div");h.style.width="200px",h.style.padding="1px 2px 3px 4px",h.style.borderStyle="solid",h.style.borderWidth="1px 2px 3px 4px",h.style.boxSizing="border-box";var I=document.body||document.documentElement;I.appendChild(h);var y=s(h);_=Math.round(o(y.width))==200,c.isBoxSizeOuter=_,I.removeChild(h)}}function c(h){if(d(),typeof h=="string"&&(h=document.querySelector(h)),!(!h||typeof h!="object"||!h.nodeType)){var I=s(h);if(I.display=="none")return n();var y={};y.width=h.offsetWidth,y.height=h.offsetHeight;for(var i=y.isBorderBox=I.boxSizing=="border-box",t=0;t<f;t++){var e=a[t],r=I[e],m=parseFloat(r);y[e]=isNaN(m)?0:m}var v=y.paddingLeft+y.paddingRight,z=y.paddingTop+y.paddingBottom,S=y.marginLeft+y.marginRight,E=y.marginTop+y.marginBottom,L=y.borderLeftWidth+y.borderRightWidth,b=y.borderTopWidth+y.borderBottomWidth,O=i&&_,X=o(I.width);X!==!1&&(y.width=X+(O?0:v+L));var $=o(I.height);return $!==!1&&(y.height=$+(O?0:z+b)),y.innerWidth=y.width-(v+L),y.innerHeight=y.height-(z+b),y.outerWidth=y.width+S,y.outerHeight=y.height+E,y}}return c})});var N=x((_t,D)=>{(function(u,o){"use strict";typeof define=="function"&&define.amd?define(o):typeof D=="object"&&D.exports?D.exports=o():u.matchesSelector=o()})(window,function(){"use strict";var o=function(){var p=window.Element.prototype;if(p.matches)return"matches";if(p.matchesSelector)return"matchesSelector";for(var l=["webkit","moz","ms","o"],a=0;a<l.length;a++){var f=l[a],n=f+"MatchesSelector";if(p[n])return n}}();return function(l,a){return l[o](a)}})});var Q=x((It,P)=>{(function(u,o){typeof define=="function"&&define.amd?define(["desandro-matches-selector/matches-selector"],function(p){return o(u,p)}):typeof P=="object"&&P.exports?P.exports=o(u,N()):u.fizzyUIUtils=o(u,u.matchesSelector)})(window,function(o,p){"use strict";var l={};l.extend=function(n,s){for(var g in s)n[g]=s[g];return n},l.modulo=function(n,s){return(n%s+s)%s};var a=Array.prototype.slice;l.makeArray=function(n){if(Array.isArray(n))return n;if(n==null)return[];var s=typeof n=="object"&&typeof n.length=="number";return s?a.call(n):[n]},l.removeFrom=function(n,s){var g=n.indexOf(s);g!=-1&&n.splice(g,1)},l.getParent=function(n,s){for(;n.parentNode&&n!=document.body;)if(n=n.parentNode,p(n,s))return n},l.getQueryElement=function(n){return typeof n=="string"?document.querySelector(n):n},l.handleEvent=function(n){var s="on"+n.type;this[s]&&this[s](n)},l.filterFindElements=function(n,s){n=l.makeArray(n);var g=[];return n.forEach(function(_){if(_ instanceof HTMLElement){if(!s){g.push(_);return}p(_,s)&&g.push(_);for(var d=_.querySelectorAll(s),c=0;c<d.length;c++)g.push(d[c])}}),g},l.debounceMethod=function(n,s,g){g=g||100;var _=n.prototype[s],d=s+"Timeout";n.prototype[s]=function(){var c=this[d];clearTimeout(c);var h=arguments,I=this;this[d]=setTimeout(function(){_.apply(I,h),delete I[d]},g)}},l.docReady=function(n){var s=document.readyState;s=="complete"||s=="interactive"?setTimeout(n):document.addEventListener("DOMContentLoaded",n)},l.toDashed=function(n){return n.replace(/(.)([A-Z])/g,function(s,g,_){return g+"-"+_}).toLowerCase()};var f=o.console;return l.htmlInit=function(n,s){l.docReady(function(){var g=l.toDashed(s),_="data-"+g,d=document.querySelectorAll("["+_+"]"),c=document.querySelectorAll(".js-"+g),h=l.makeArray(d).concat(l.makeArray(c)),I=_+"-options",y=o.jQuery;h.forEach(function(i){var t=i.getAttribute(_)||i.getAttribute(I),e;try{e=t&&JSON.parse(t)}catch(m){f&&f.error("Error parsing "+_+" on "+i.className+": "+m);return}var r=new n(i,e);y&&y.data(i,s,r)})})},l})});var Z=x((zt,H)=>{(function(u,o){typeof define=="function"&&define.amd?define(["ev-emitter/ev-emitter","get-size/get-size"],o):typeof H=="object"&&H.exports?H.exports=o(U(),C()):(u.Outlayer={},u.Outlayer.Item=o(u.EvEmitter,u.getSize))})(window,function(o,p){"use strict";function l(i){for(var t in i)return!1;return t=null,!0}var a=document.documentElement.style,f=typeof a.transition=="string"?"transition":"WebkitTransition",n=typeof a.transform=="string"?"transform":"WebkitTransform",s={WebkitTransition:"webkitTransitionEnd",transition:"transitionend"}[f],g={transform:n,transition:f,transitionDuration:f+"Duration",transitionProperty:f+"Property",transitionDelay:f+"Delay"};function _(i,t){!i||(this.element=i,this.layout=t,this.position={x:0,y:0},this._create())}var d=_.prototype=Object.create(o.prototype);d.constructor=_,d._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},d.handleEvent=function(i){var t="on"+i.type;this[t]&&this[t](i)},d.getSize=function(){this.size=p(this.element)},d.css=function(i){var t=this.element.style;for(var e in i){var r=g[e]||e;t[r]=i[e]}},d.getPosition=function(){var i=getComputedStyle(this.element),t=this.layout._getOption("originLeft"),e=this.layout._getOption("originTop"),r=i[t?"left":"right"],m=i[e?"top":"bottom"],v=parseFloat(r),z=parseFloat(m),S=this.layout.size;r.indexOf("%")!=-1&&(v=v/100*S.width),m.indexOf("%")!=-1&&(z=z/100*S.height),v=isNaN(v)?0:v,z=isNaN(z)?0:z,v-=t?S.paddingLeft:S.paddingRight,z-=e?S.paddingTop:S.paddingBottom,this.position.x=v,this.position.y=z},d.layoutPosition=function(){var i=this.layout.size,t={},e=this.layout._getOption("originLeft"),r=this.layout._getOption("originTop"),m=e?"paddingLeft":"paddingRight",v=e?"left":"right",z=e?"right":"left",S=this.position.x+i[m];t[v]=this.getXValue(S),t[z]="";var E=r?"paddingTop":"paddingBottom",L=r?"top":"bottom",b=r?"bottom":"top",O=this.position.y+i[E];t[L]=this.getYValue(O),t[b]="",this.css(t),this.emitEvent("layout",[this])},d.getXValue=function(i){var t=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&!t?i/this.layout.size.width*100+"%":i+"px"},d.getYValue=function(i){var t=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&t?i/this.layout.size.height*100+"%":i+"px"},d._transitionTo=function(i,t){this.getPosition();var e=this.position.x,r=this.position.y,m=i==this.position.x&&t==this.position.y;if(this.setPosition(i,t),m&&!this.isTransitioning){this.layoutPosition();return}var v=i-e,z=t-r,S={};S.transform=this.getTranslate(v,z),this.transition({to:S,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},d.getTranslate=function(i,t){var e=this.layout._getOption("originLeft"),r=this.layout._getOption("originTop");return i=e?i:-i,t=r?t:-t,"translate3d("+i+"px, "+t+"px, 0)"},d.goTo=function(i,t){this.setPosition(i,t),this.layoutPosition()},d.moveTo=d._transitionTo,d.setPosition=function(i,t){this.position.x=parseFloat(i),this.position.y=parseFloat(t)},d._nonTransition=function(i){this.css(i.to),i.isCleaning&&this._removeStyles(i.to);for(var t in i.onTransitionEnd)i.onTransitionEnd[t].call(this)},d.transition=function(i){if(!parseFloat(this.layout.options.transitionDuration)){this._nonTransition(i);return}var t=this._transn;for(var e in i.onTransitionEnd)t.onEnd[e]=i.onTransitionEnd[e];for(e in i.to)t.ingProperties[e]=!0,i.isCleaning&&(t.clean[e]=!0);if(i.from){this.css(i.from);var r=this.element.offsetHeight;r=null}this.enableTransition(i.to),this.css(i.to),this.isTransitioning=!0};function c(i){return i.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}var h="opacity,"+c(n);d.enableTransition=function(){if(!this.isTransitioning){var i=this.layout.options.transitionDuration;i=typeof i=="number"?i+"ms":i,this.css({transitionProperty:h,transitionDuration:i,transitionDelay:this.staggerDelay||0}),this.element.addEventListener(s,this,!1)}},d.onwebkitTransitionEnd=function(i){this.ontransitionend(i)},d.onotransitionend=function(i){this.ontransitionend(i)};var I={"-webkit-transform":"transform"};d.ontransitionend=function(i){if(i.target===this.element){var t=this._transn,e=I[i.propertyName]||i.propertyName;if(delete t.ingProperties[e],l(t.ingProperties)&&this.disableTransition(),e in t.clean&&(this.element.style[i.propertyName]="",delete t.clean[e]),e in t.onEnd){var r=t.onEnd[e];r.call(this),delete t.onEnd[e]}this.emitEvent("transitionEnd",[this])}},d.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(s,this,!1),this.isTransitioning=!1},d._removeStyles=function(i){var t={};for(var e in i)t[e]="";this.css(t)};var y={transitionProperty:"",transitionDuration:"",transitionDelay:""};return d.removeTransitionStyles=function(){this.css(y)},d.stagger=function(i){i=isNaN(i)?0:i,this.staggerDelay=i+"ms"},d.removeElem=function(){this.element.parentNode.removeChild(this.element),this.css({display:""}),this.emitEvent("remove",[this])},d.remove=function(){if(!f||!parseFloat(this.layout.options.transitionDuration)){this.removeElem();return}this.once("transitionEnd",function(){this.removeElem()}),this.hide()},d.reveal=function(){delete this.isHidden,this.css({display:""});var i=this.layout.options,t={},e=this.getHideRevealTransitionEndProperty("visibleStyle");t[e]=this.onRevealTransitionEnd,this.transition({from:i.hiddenStyle,to:i.visibleStyle,isCleaning:!0,onTransitionEnd:t})},d.onRevealTransitionEnd=function(){this.isHidden||this.emitEvent("reveal")},d.getHideRevealTransitionEndProperty=function(i){var t=this.layout.options[i];if(t.opacity)return"opacity";for(var e in t)return e},d.hide=function(){this.isHidden=!0,this.css({display:""});var i=this.layout.options,t={},e=this.getHideRevealTransitionEndProperty("hiddenStyle");t[e]=this.onHideTransitionEnd,this.transition({from:i.visibleStyle,to:i.hiddenStyle,isCleaning:!0,onTransitionEnd:t})},d.onHideTransitionEnd=function(){this.isHidden&&(this.css({display:"none"}),this.emitEvent("hide"))},d.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},_})});var T=x((St,q)=>{(function(u,o){"use strict";typeof define=="function"&&define.amd?define(["ev-emitter/ev-emitter","get-size/get-size","fizzy-ui-utils/utils","./item"],function(p,l,a,f){return o(u,p,l,a,f)}):typeof q=="object"&&q.exports?q.exports=o(u,U(),C(),Q(),Z()):u.Outlayer=o(u,u.EvEmitter,u.getSize,u.fizzyUIUtils,u.Outlayer.Item)})(window,function(o,p,l,a,f){"use strict";var n=o.console,s=o.jQuery,g=function(){},_=0,d={};function c(t,e){var r=a.getQueryElement(t);if(!r){n&&n.error("Bad element for "+this.constructor.namespace+": "+(r||t));return}this.element=r,s&&(this.$element=s(this.element)),this.options=a.extend({},this.constructor.defaults),this.option(e);var m=++_;this.element.outlayerGUID=m,d[m]=this,this._create();var v=this._getOption("initLayout");v&&this.layout()}c.namespace="outlayer",c.Item=f,c.defaults={containerStyle:{position:"relative"},initLayout:!0,originLeft:!0,originTop:!0,resize:!0,resizeContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}};var h=c.prototype;a.extend(h,p.prototype),h.option=function(t){a.extend(this.options,t)},h._getOption=function(t){var e=this.constructor.compatOptions[t];return e&&this.options[e]!==void 0?this.options[e]:this.options[t]},c.compatOptions={initLayout:"isInitLayout",horizontal:"isHorizontal",layoutInstant:"isLayoutInstant",originLeft:"isOriginLeft",originTop:"isOriginTop",resize:"isResizeBound",resizeContainer:"isResizingContainer"},h._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),a.extend(this.element.style,this.options.containerStyle);var t=this._getOption("resize");t&&this.bindResize()},h.reloadItems=function(){this.items=this._itemize(this.element.children)},h._itemize=function(t){for(var e=this._filterFindItemElements(t),r=this.constructor.Item,m=[],v=0;v<e.length;v++){var z=e[v],S=new r(z,this);m.push(S)}return m},h._filterFindItemElements=function(t){return a.filterFindElements(t,this.options.itemSelector)},h.getItemElements=function(){return this.items.map(function(t){return t.element})},h.layout=function(){this._resetLayout(),this._manageStamps();var t=this._getOption("layoutInstant"),e=t!==void 0?t:!this._isLayoutInited;this.layoutItems(this.items,e),this._isLayoutInited=!0},h._init=h.layout,h._resetLayout=function(){this.getSize()},h.getSize=function(){this.size=l(this.element)},h._getMeasurement=function(t,e){var r=this.options[t],m;r?(typeof r=="string"?m=this.element.querySelector(r):r instanceof HTMLElement&&(m=r),this[t]=m?l(m)[e]:r):this[t]=0},h.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},h._getItemsForLayout=function(t){return t.filter(function(e){return!e.isIgnored})},h._layoutItems=function(t,e){if(this._emitCompleteOnItems("layout",t),!(!t||!t.length)){var r=[];t.forEach(function(m){var v=this._getItemLayoutPosition(m);v.item=m,v.isInstant=e||m.isLayoutInstant,r.push(v)},this),this._processLayoutQueue(r)}},h._getItemLayoutPosition=function(){return{x:0,y:0}},h._processLayoutQueue=function(t){this.updateStagger(),t.forEach(function(e,r){this._positionItem(e.item,e.x,e.y,e.isInstant,r)},this)},h.updateStagger=function(){var t=this.options.stagger;if(t==null){this.stagger=0;return}return this.stagger=i(t),this.stagger},h._positionItem=function(t,e,r,m,v){m?t.goTo(e,r):(t.stagger(v*this.stagger),t.moveTo(e,r))},h._postLayout=function(){this.resizeContainer()},h.resizeContainer=function(){var t=this._getOption("resizeContainer");if(!!t){var e=this._getContainerSize();e&&(this._setContainerMeasure(e.width,!0),this._setContainerMeasure(e.height,!1))}},h._getContainerSize=g,h._setContainerMeasure=function(t,e){if(t!==void 0){var r=this.size;r.isBorderBox&&(t+=e?r.paddingLeft+r.paddingRight+r.borderLeftWidth+r.borderRightWidth:r.paddingBottom+r.paddingTop+r.borderTopWidth+r.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},h._emitCompleteOnItems=function(t,e){var r=this;function m(){r.dispatchEvent(t+"Complete",null,[e])}var v=e.length;if(!e||!v){m();return}var z=0;function S(){z++,z==v&&m()}e.forEach(function(E){E.once(t,S)})},h.dispatchEvent=function(t,e,r){var m=e?[e].concat(r):r;if(this.emitEvent(t,m),s)if(this.$element=this.$element||s(this.element),e){var v=s.Event(e);v.type=t,this.$element.trigger(v,r)}else this.$element.trigger(t,r)},h.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},h.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},h.stamp=function(t){t=this._find(t),!!t&&(this.stamps=this.stamps.concat(t),t.forEach(this.ignore,this))},h.unstamp=function(t){t=this._find(t),!!t&&t.forEach(function(e){a.removeFrom(this.stamps,e),this.unignore(e)},this)},h._find=function(t){if(!!t)return typeof t=="string"&&(t=this.element.querySelectorAll(t)),t=a.makeArray(t),t},h._manageStamps=function(){!this.stamps||!this.stamps.length||(this._getBoundingRect(),this.stamps.forEach(this._manageStamp,this))},h._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},h._manageStamp=g,h._getElementOffset=function(t){var e=t.getBoundingClientRect(),r=this._boundingRect,m=l(t),v={left:e.left-r.left-m.marginLeft,top:e.top-r.top-m.marginTop,right:r.right-e.right-m.marginRight,bottom:r.bottom-e.bottom-m.marginBottom};return v},h.handleEvent=a.handleEvent,h.bindResize=function(){o.addEventListener("resize",this),this.isResizeBound=!0},h.unbindResize=function(){o.removeEventListener("resize",this),this.isResizeBound=!1},h.onresize=function(){this.resize()},a.debounceMethod(c,"onresize",100),h.resize=function(){!this.isResizeBound||!this.needsResizeLayout()||this.layout()},h.needsResizeLayout=function(){var t=l(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},h.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},h.appended=function(t){var e=this.addItems(t);!e.length||(this.layoutItems(e,!0),this.reveal(e))},h.prepended=function(t){var e=this._itemize(t);if(!!e.length){var r=this.items.slice(0);this.items=e.concat(r),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(r)}},h.reveal=function(t){if(this._emitCompleteOnItems("reveal",t),!(!t||!t.length)){var e=this.updateStagger();t.forEach(function(r,m){r.stagger(m*e),r.reveal()})}},h.hide=function(t){if(this._emitCompleteOnItems("hide",t),!(!t||!t.length)){var e=this.updateStagger();t.forEach(function(r,m){r.stagger(m*e),r.hide()})}},h.revealItemElements=function(t){var e=this.getItems(t);this.reveal(e)},h.hideItemElements=function(t){var e=this.getItems(t);this.hide(e)},h.getItem=function(t){for(var e=0;e<this.items.length;e++){var r=this.items[e];if(r.element==t)return r}},h.getItems=function(t){t=a.makeArray(t);var e=[];return t.forEach(function(r){var m=this.getItem(r);m&&e.push(m)},this),e},h.remove=function(t){var e=this.getItems(t);this._emitCompleteOnItems("remove",e),!(!e||!e.length)&&e.forEach(function(r){r.remove(),a.removeFrom(this.items,r)},this)},h.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="",this.items.forEach(function(r){r.destroy()}),this.unbindResize();var e=this.element.outlayerGUID;delete d[e],delete this.element.outlayerGUID,s&&s.removeData(this.element,this.constructor.namespace)},c.data=function(t){t=a.getQueryElement(t);var e=t&&t.outlayerGUID;return e&&d[e]},c.create=function(t,e){var r=I(c);return r.defaults=a.extend({},c.defaults),a.extend(r.defaults,e),r.compatOptions=a.extend({},c.compatOptions),r.namespace=t,r.data=c.data,r.Item=I(f),a.htmlInit(r,t),s&&s.bridget&&s.bridget(t,r),r};function I(t){function e(){t.apply(this,arguments)}return e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e}var y={ms:1,s:1e3};function i(t){if(typeof t=="number")return t;var e=t.match(/(^\d*\.?\d*)(\w*)/),r=e&&e[1],m=e&&e[2];if(!r.length)return 0;r=parseFloat(r);var v=y[m]||1;return r*v}return c.Item=f,c})});var K=x((Et,A)=>{(function(u,o){typeof define=="function"&&define.amd?define(["outlayer/outlayer"],o):typeof A=="object"&&A.exports?A.exports=o(T()):(u.Isotope=u.Isotope||{},u.Isotope.Item=o(u.Outlayer))})(window,function(o){"use strict";function p(){o.Item.apply(this,arguments)}var l=p.prototype=Object.create(o.Item.prototype),a=l._create;l._create=function(){this.id=this.layout.itemGUID++,a.call(this),this.sortData={}},l.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var n=this.layout.options.getSortData,s=this.layout._sorters;for(var g in n){var _=s[g];this.sortData[g]=_(this.element,this)}}};var f=l.destroy;return l.destroy=function(){f.apply(this,arguments),this.css({display:""})},p})});var W=x((xt,F)=>{(function(u,o){typeof define=="function"&&define.amd?define(["get-size/get-size","outlayer/outlayer"],o):typeof F=="object"&&F.exports?F.exports=o(C(),T()):(u.Isotope=u.Isotope||{},u.Isotope.LayoutMode=o(u.getSize,u.Outlayer))})(window,function(o,p){"use strict";function l(n){this.isotope=n,n&&(this.options=n.options[this.namespace],this.element=n.element,this.items=n.filteredItems,this.size=n.size)}var a=l.prototype,f=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout","_getOption"];return f.forEach(function(n){a[n]=function(){return p.prototype[n].apply(this.isotope,arguments)}}),a.needsVerticalResizeLayout=function(){var n=o(this.isotope.element),s=this.isotope.size&&n;return s&&n.innerHeight!=this.isotope.size.innerHeight},a._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},a.getColumnWidth=function(){this.getSegmentSize("column","Width")},a.getRowHeight=function(){this.getSegmentSize("row","Height")},a.getSegmentSize=function(n,s){var g=n+s,_="outer"+s;if(this._getMeasurement(g,_),!this[g]){var d=this.getFirstItemSize();this[g]=d&&d[_]||this.isotope.size["inner"+s]}},a.getFirstItemSize=function(){var n=this.isotope.filteredItems[0];return n&&n.element&&o(n.element)},a.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},a.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},l.modes={},l.create=function(n,s){function g(){l.apply(this,arguments)}return g.prototype=Object.create(a),g.prototype.constructor=g,s&&(g.options=s),g.prototype.namespace=n,l.modes[n]=g,g},l})});var w=x((Lt,B)=>{(function(u,o){typeof define=="function"&&define.amd?define(["outlayer/outlayer","get-size/get-size"],o):typeof B=="object"&&B.exports?B.exports=o(T(),C()):u.Masonry=o(u.Outlayer,u.getSize)})(window,function(o,p){"use strict";var l=o.create("masonry");l.compatOptions.fitWidth="isFitWidth";var a=l.prototype;return a._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var f=0;f<this.cols;f++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0},a.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var f=this.items[0],n=f&&f.element;this.columnWidth=n&&p(n).outerWidth||this.containerWidth}var s=this.columnWidth+=this.gutter,g=this.containerWidth+this.gutter,_=g/s,d=s-g%s,c=d&&d<1?"round":"floor";_=Math[c](_),this.cols=Math.max(_,1)},a.getContainerWidth=function(){var f=this._getOption("fitWidth"),n=f?this.element.parentNode:this.element,s=p(n);this.containerWidth=s&&s.innerWidth},a._getItemLayoutPosition=function(f){f.getSize();var n=f.size.outerWidth%this.columnWidth,s=n&&n<1?"round":"ceil",g=Math[s](f.size.outerWidth/this.columnWidth);g=Math.min(g,this.cols);for(var _=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",d=this[_](g,f),c={x:this.columnWidth*d.col,y:d.y},h=d.y+f.size.outerHeight,I=g+d.col,y=d.col;y<I;y++)this.colYs[y]=h;return c},a._getTopColPosition=function(f){var n=this._getTopColGroup(f),s=Math.min.apply(Math,n);return{col:n.indexOf(s),y:s}},a._getTopColGroup=function(f){if(f<2)return this.colYs;for(var n=[],s=this.cols+1-f,g=0;g<s;g++)n[g]=this._getColGroupY(g,f);return n},a._getColGroupY=function(f,n){if(n<2)return this.colYs[f];var s=this.colYs.slice(f,f+n);return Math.max.apply(Math,s)},a._getHorizontalColPosition=function(f,n){var s=this.horizontalColIndex%this.cols,g=f>1&&s+f>this.cols;s=g?0:s;var _=n.size.outerWidth&&n.size.outerHeight;return this.horizontalColIndex=_?s+f:this.horizontalColIndex,{col:s,y:this._getColGroupY(s,f)}},a._manageStamp=function(f){var n=p(f),s=this._getElementOffset(f),g=this._getOption("originLeft"),_=g?s.left:s.right,d=_+n.outerWidth,c=Math.floor(_/this.columnWidth);c=Math.max(0,c);var h=Math.floor(d/this.columnWidth);h-=d%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var I=this._getOption("originTop"),y=(I?s.top:s.bottom)+n.outerHeight,i=c;i<=h;i++)this.colYs[i]=Math.max(y,this.colYs[i])},a._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var f={height:this.maxY};return this._getOption("fitWidth")&&(f.width=this._getContainerFitWidth()),f},a._getContainerFitWidth=function(){for(var f=0,n=this.cols;--n&&this.colYs[n]===0;)f++;return(this.cols-f)*this.columnWidth-this.gutter},a.needsResizeLayout=function(){var f=this.containerWidth;return this.getContainerWidth(),f!=this.containerWidth},l})});var tt=x((bt,Y)=>{(function(u,o){typeof define=="function"&&define.amd?define(["../layout-mode","masonry-layout/masonry"],o):typeof Y=="object"&&Y.exports?Y.exports=o(W(),w()):o(u.Isotope.LayoutMode,u.Masonry)})(window,function(o,p){"use strict";var l=o.create("masonry"),a=l.prototype,f={_getElementOffset:!0,layout:!0,_getMeasurement:!0};for(var n in p.prototype)f[n]||(a[n]=p.prototype[n]);var s=a.measureColumns;a.measureColumns=function(){this.items=this.isotope.filteredItems,s.call(this)};var g=a._getOption;return a._getOption=function(_){return _=="fitWidth"?this.options.isFitWidth!==void 0?this.options.isFitWidth:this.options.fitWidth:g.apply(this.isotope,arguments)},l})});var nt=x((et,it)=>{(function(u,o){typeof define=="function"&&define.amd?define(["../layout-mode"],o):typeof et=="object"?it.exports=o(W()):o(u.Isotope.LayoutMode)})(window,function(o){"use strict";var p=o.create("fitRows"),l=p.prototype;return l._resetLayout=function(){this.x=0,this.y=0,this.maxY=0,this._getMeasurement("gutter","outerWidth")},l._getItemLayoutPosition=function(a){a.getSize();var f=a.size.outerWidth+this.gutter,n=this.isotope.size.innerWidth+this.gutter;this.x!==0&&f+this.x>n&&(this.x=0,this.y=this.maxY);var s={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+a.size.outerHeight),this.x+=f,s},l._getContainerSize=function(){return{height:this.maxY}},p})});var rt=x((Ct,j)=>{(function(u,o){typeof define=="function"&&define.amd?define(["../layout-mode"],o):typeof j=="object"&&j.exports?j.exports=o(W()):o(u.Isotope.LayoutMode)})(window,function(o){"use strict";var p=o.create("vertical",{horizontalAlignment:0}),l=p.prototype;return l._resetLayout=function(){this.y=0},l._getItemLayoutPosition=function(a){a.getSize();var f=(this.isotope.size.innerWidth-a.size.outerWidth)*this.options.horizontalAlignment,n=this.y;return this.y+=a.size.outerHeight,{x:f,y:n}},l._getContainerSize=function(){return{height:this.y}},p})});var ot=x((Tt,k)=>{(function(u,o){typeof define=="function"&&define.amd?define(["outlayer/outlayer","get-size/get-size","desandro-matches-selector/matches-selector","fizzy-ui-utils/utils","./item","./layout-mode","./layout-modes/masonry","./layout-modes/fit-rows","./layout-modes/vertical"],function(p,l,a,f,n,s){return o(u,p,l,a,f,n,s)}):typeof k=="object"&&k.exports?k.exports=o(u,T(),C(),N(),Q(),K(),W(),tt(),nt(),rt()):u.Isotope=o(u,u.Outlayer,u.getSize,u.matchesSelector,u.fizzyUIUtils,u.Isotope.Item,u.Isotope.LayoutMode)})(window,function(o,p,l,a,f,n,s){"use strict";var g=o.jQuery,_=String.prototype.trim?function(i){return i.trim()}:function(i){return i.replace(/^\s+|\s+$/g,"")},d=p.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});d.Item=n,d.LayoutMode=s;var c=d.prototype;c._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),p.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var i in s.modes)this._initLayoutMode(i)},c.reloadItems=function(){this.itemGUID=0,p.prototype.reloadItems.call(this)},c._itemize=function(){for(var i=p.prototype._itemize.apply(this,arguments),t=0;t<i.length;t++){var e=i[t];e.id=this.itemGUID++}return this._updateItemsSortData(i),i},c._initLayoutMode=function(i){var t=s.modes[i],e=this.options[i]||{};this.options[i]=t.options?f.extend(t.options,e):e,this.modes[i]=new t(this)},c.layout=function(){if(!this._isLayoutInited&&this._getOption("initLayout")){this.arrange();return}this._layout()},c._layout=function(){var i=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,i),this._isLayoutInited=!0},c.arrange=function(i){this.option(i),this._getIsInstant();var t=this._filter(this.items);this.filteredItems=t.matches,this._bindArrangeComplete(),this._isInstant?this._noTransition(this._hideReveal,[t]):this._hideReveal(t),this._sort(),this._layout()},c._init=c.arrange,c._hideReveal=function(i){this.reveal(i.needReveal),this.hide(i.needHide)},c._getIsInstant=function(){var i=this._getOption("layoutInstant"),t=i!==void 0?i:!this._isLayoutInited;return this._isInstant=t,t},c._bindArrangeComplete=function(){var i,t,e,r=this;function m(){i&&t&&e&&r.dispatchEvent("arrangeComplete",null,[r.filteredItems])}this.once("layoutComplete",function(){i=!0,m()}),this.once("hideComplete",function(){t=!0,m()}),this.once("revealComplete",function(){e=!0,m()})},c._filter=function(i){var t=this.options.filter;t=t||"*";for(var e=[],r=[],m=[],v=this._getFilterTest(t),z=0;z<i.length;z++){var S=i[z];if(!S.isIgnored){var E=v(S);E&&e.push(S),E&&S.isHidden?r.push(S):!E&&!S.isHidden&&m.push(S)}}return{matches:e,needReveal:r,needHide:m}},c._getFilterTest=function(i){return g&&this.options.isJQueryFiltering?function(t){return g(t.element).is(i)}:typeof i=="function"?function(t){return i(t.element)}:function(t){return a(t.element,i)}},c.updateSortData=function(i){var t;i?(i=f.makeArray(i),t=this.getItems(i)):t=this.items,this._getSorters(),this._updateItemsSortData(t)},c._getSorters=function(){var i=this.options.getSortData;for(var t in i){var e=i[t];this._sorters[t]=h(e)}},c._updateItemsSortData=function(i){for(var t=i&&i.length,e=0;t&&e<t;e++){var r=i[e];r.updateSortData()}};var h=function(){function i(e){if(typeof e!="string")return e;var r=_(e).split(" "),m=r[0],v=m.match(/^\[(.+)\]$/),z=v&&v[1],S=t(z,m),E=d.sortDataParsers[r[1]];return e=E?function(L){return L&&E(S(L))}:function(L){return L&&S(L)},e}function t(e,r){return e?function(v){return v.getAttribute(e)}:function(v){var z=v.querySelector(r);return z&&z.textContent}}return i}();d.sortDataParsers={parseInt:function(i){return parseInt(i,10)},parseFloat:function(i){return parseFloat(i)}},c._sort=function(){if(!!this.options.sortBy){var i=f.makeArray(this.options.sortBy);this._getIsSameSortBy(i)||(this.sortHistory=i.concat(this.sortHistory));var t=I(this.sortHistory,this.options.sortAscending);this.filteredItems.sort(t)}},c._getIsSameSortBy=function(i){for(var t=0;t<i.length;t++)if(i[t]!=this.sortHistory[t])return!1;return!0};function I(i,t){return function(r,m){for(var v=0;v<i.length;v++){var z=i[v],S=r.sortData[z],E=m.sortData[z];if(S>E||S<E){var L=t[z]!==void 0?t[z]:t,b=L?1:-1;return(S>E?1:-1)*b}}return 0}}c._mode=function(){var i=this.options.layoutMode,t=this.modes[i];if(!t)throw new Error("No layout mode: "+i);return t.options=this.options[i],t},c._resetLayout=function(){p.prototype._resetLayout.call(this),this._mode()._resetLayout()},c._getItemLayoutPosition=function(i){return this._mode()._getItemLayoutPosition(i)},c._manageStamp=function(i){this._mode()._manageStamp(i)},c._getContainerSize=function(){return this._mode()._getContainerSize()},c.needsResizeLayout=function(){return this._mode().needsResizeLayout()},c.appended=function(i){var t=this.addItems(i);if(!!t.length){var e=this._filterRevealAdded(t);this.filteredItems=this.filteredItems.concat(e)}},c.prepended=function(i){var t=this._itemize(i);if(!!t.length){this._resetLayout(),this._manageStamps();var e=this._filterRevealAdded(t);this.layoutItems(this.filteredItems),this.filteredItems=e.concat(this.filteredItems),this.items=t.concat(this.items)}},c._filterRevealAdded=function(i){var t=this._filter(i);return this.hide(t.needHide),this.reveal(t.matches),this.layoutItems(t.matches,!0),t.matches},c.insert=function(i){var t=this.addItems(i);if(!!t.length){var e,r,m=t.length;for(e=0;e<m;e++)r=t[e],this.element.appendChild(r.element);var v=this._filter(t).matches;for(e=0;e<m;e++)t[e].isLayoutInstant=!0;for(this.arrange(),e=0;e<m;e++)delete t[e].isLayoutInstant;this.reveal(v)}};var y=c.remove;return c.remove=function(i){i=f.makeArray(i);var t=this.getItems(i);y.call(this,i);for(var e=t&&t.length,r=0;e&&r<e;r++){var m=t[r];f.removeFrom(this.filteredItems,m)}},c.shuffle=function(){for(var i=0;i<this.items.length;i++){var t=this.items[i];t.sortData.random=Math.random()}this.options.sortBy="random",this._sort(),this._layout()},c._noTransition=function(i,t){var e=this.options.transitionDuration;this.options.transitionDuration=0;var r=i.apply(this,t);return this.options.transitionDuration=e,r},c.getFilteredItemElements=function(){return this.filteredItems.map(function(i){return i.element})},d})});var st=mt(ot()),V=new st.default("article",{itemSelector:"span",layoutMode:"fitRows",percentPosition:!0}),at=u=>{let{matches:o}=window.matchMedia("(prefers-reduced-motion: no-preference)");V.arrange({filter:u,stagger:25,transitionDuration:o?"0.4s":0})},gt=u=>Array.from(u.selectedOptions).reduce((o,p)=>(o.push([p.parentElement.label.toLowerCase(),p.value]),o),[]);document.querySelector("select").addEventListener("input",u=>{let o=gt(u.target);console.warn("Multiselect",o);let p=o.reduce((f,n)=>(f.push("."+n[1].split(" ").join("-")),f),[]).join(",");at(p);let l=document.querySelector("#applied-filters"),a=V.getFilteredItemElements().length;l.style.counterSet=o.length,l.textContent=" giving "+a+" results"});document.querySelector("aside form").addEventListener("input",u=>{if(u.target.nodeName==="SELECT")return;let o=new FormData(document.querySelector("form"));console.warn("Checkboxes",Array.from(o.entries()));let p=Array.from(o.values()).reduce((l,a)=>(l.push("."+a.split(" ").join("-")),l),[]).join(",");at(p),document.querySelector("#applied-filters").textContent=" giving "+V.getFilteredItemElements().length+" results"});})();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/multi-select/index.md b/src/site/content/en/patterns/components/multi-select/index.md
new file mode 100644
index 00000000000..819fb5515e6
--- /dev/null
+++ b/src/site/content/en/patterns/components/multi-select/index.md
@@ -0,0 +1,17 @@
+---
+layout: pattern
+title: Multi-Select
+description: |
+  This pattern shows how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
+  <br><br>
+  Note: this component uses a library called <a href="https://www.npmjs.com/package/isotope-layout">Isotope</a> to help with the animation of filtering and sorting in the layout.
+  <br><br>
+  <a href="/building-a-multi-select-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=x0aCdLDZ8BM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/multi-select">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to build a responsive, adaptive, and accessible,
+multiselect component for sort and filter user experiences.
+
+<a href="/building-a-multi-select-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=x0aCdLDZ8BM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/multi-select">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/settings/assets/body.html b/src/site/content/en/patterns/components/settings/assets/body.html
new file mode 100644
index 00000000000..6bea538a746
--- /dev/null
+++ b/src/site/content/en/patterns/components/settings/assets/body.html
@@ -0,0 +1,157 @@
+<main>
+  <h1>Settings</h1>
+  
+  <form>
+
+    <section>
+      <header>
+        <h2>Sound & vibration</h2>
+        <small>Adjust system volume channels</small>
+      </header>
+      
+      <fieldset>
+        
+        <div class="fieldset-item">
+          <picture aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <title>A note icon</title>
+              <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+            </svg>
+          </picture>
+          <div class="input-stack">
+            <label 
+              for="media-volume" 
+              id="media-volume" 
+              aria-hidden="true">
+                Media volume
+            </label>
+            <input 
+              name="media-volume" 
+              aria-labelledby="media-volume" 
+              type="range" 
+              value="3" 
+              max="10" 
+              style="--track-fill: 30%"
+            >
+          </div>
+        </div>
+
+        <div class="fieldset-item">
+          <picture aria-hidden="true">
+            <title>A phone icon</title>
+            <svg viewBox="0 0 24 24">
+              <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+            </svg>
+          </picture>
+          <div class="input-stack">
+            <label for="call-volume" id="call-volume" aria-hidden="true">Call volume</label>
+            <input 
+              name="call-volume" 
+              aria-labelledby="call-volume" 
+              type="range" 
+              value="7" 
+              max="10" 
+              style="--track-fill: 70%"
+            >
+          </div>
+        </div>
+
+        <div class="fieldset-item">
+          <picture aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <title>A bell icon</title>
+              <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+            </svg>
+          </picture>
+          <div class="input-stack">
+            <label for="ring-volume" id="ring-volume" aria-hidden="true">Ring volume</label>
+            <input 
+              name="ring-volume" 
+              aria-labelledby="ring-volume" 
+              type="range" 
+              value="5" 
+              max="10" 
+              style="--track-fill: 50%"
+            >
+          </div>
+        </div>
+
+        <div class="fieldset-item">
+          <picture aria-hidden="true">
+            <svg viewBox="0 0 24 24">
+              <title>An alarm clock icon</title>
+              <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
+            </svg>
+          </picture>
+          <div class="input-stack">
+            <label for="alarm-volume" id="alarm-volume" aria-hidden="true">Alarm volume</label>
+            <input 
+              name="alarm-volume" 
+              aria-labelledby="alarm-volume" 
+              type="range" 
+              value="8" 
+              max="10" 
+              style="--track-fill: 80%"
+            >
+          </div>
+        </div>
+        
+      </fieldset>
+    </section>
+
+    <section>
+      <header>
+        <h2>Notifications</h2>
+        <small>Turn specific channels on/off</small>
+      </header>
+      
+      <fieldset>
+
+        <div class="fieldset-item">
+          <input 
+            type="checkbox"
+            checked
+            id="text-notifications"
+            name="text-notifications"
+          >
+          <div class="input-stack">
+            <label for="text-notifications">
+              <h3>Text Messages</h3>
+              <small>Get notified about all text messages sent to your device</small>
+            </label>
+          </div>
+        </div>
+
+        <div class="fieldset-item">
+          <input 
+            type="checkbox"
+            id="voice-notifications"
+            name="voice-notifications"
+          >
+          <div class="input-stack">
+            <label for="voice-notifications">
+              <h3>Voice Mail</h3>
+              <small>Get notified about all voice messages sent to your device</small>
+            </label>
+          </div>
+        </div>
+
+        <div class="fieldset-item">
+          <input 
+            type="checkbox"
+            id="email-notifications"
+            name="email-notifications"
+          >
+          <div class="input-stack">
+            <label for="email-notifications">
+              <h3>Emails</h3>
+              <small>Get notified about all text messages to your device</small>
+            </label>
+          </div>
+        </div>
+
+      </fieldset>
+    </section>
+
+  </form>
+</main>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/settings/assets/script.js b/src/site/content/en/patterns/components/settings/assets/script.js
new file mode 100644
index 00000000000..baabf1630df
--- /dev/null
+++ b/src/site/content/en/patterns/components/settings/assets/script.js
@@ -0,0 +1,22 @@
+const form = document.querySelector('form')
+const sliders = document.querySelectorAll('input[type="range"]')
+
+const rangeToPercent = slider => {
+  const max = slider.getAttribute('max') || 10
+  const percent = slider.value / max * 100
+
+  return `${parseInt(percent)}%`
+}
+
+sliders.forEach(slider => {
+  slider.style.setProperty('--track-fill', rangeToPercent(slider))
+
+  slider.addEventListener('input', e => {
+    e.target.style.setProperty('--track-fill', rangeToPercent(e.target))
+  })
+})
+
+form.addEventListener('input', e => {
+  const formData = Object.fromEntries(new FormData(form))
+  console.table(formData)
+})
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/settings/assets/style.css b/src/site/content/en/patterns/components/settings/assets/style.css
new file mode 100644
index 00000000000..12c3732c5ee
--- /dev/null
+++ b/src/site/content/en/patterns/components/settings/assets/style.css
@@ -0,0 +1,339 @@
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+:root {
+  --surface1: lch(10 0 0);
+  --surface2: lch(15 0 0);
+  --surface3: lch(20 0 0);
+  --surface4: lch(25 0 0);
+
+  --text1: lch(95 0 0);
+  --text2: lch(75 0 0);
+
+  --brand: lch(64 20 237);
+  --brand-bg1: lch(70 64 349);
+  --brand-bg2: lch(60 84 300);
+
+  --brand-bg-gradient: linear-gradient(
+    to bottom, 
+    var(--brand-bg1), 
+    var(--brand-bg2)
+  );
+
+  --thumb-highlight-color: lch(100 0 0 / 20%);
+
+  --space-xxs: .25rem;
+  --space-xs:  .5rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-xxl: 6rem;
+  
+  --isLTR: 1;
+  --isRTL: -1;
+  
+  &:dir(rtl) {
+    --isLTR: -1;
+    --isRTL: 1;
+  }
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --surface2: lch(100 0 0);
+      --surface3: lch(98 0 0);
+      --surface4: lch(85 0 0);
+
+      --text1: lch(20 0 0);
+      --text2: lch(40 0 0);
+
+      --brand: lch(64 40 237);
+      --brand-bg1: lch(50 64 349);
+      --brand-bg2: lch(40 84 300);
+
+      --thumb-highlight-color: lch(0 0 0 / 20%);
+    }
+  }
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding-block: var(--space-xs);
+
+  background: var(--surface1);
+  color: var(--text1);
+  font-family: system-ui, sans-serif;
+}
+
+h1,h2,h3 { 
+  margin: 0; 
+  font-weight: 500;
+}
+
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+  padding: var(--space-sm);
+
+  @media (width >= 540px) {
+    padding: var(--space-lg);
+  }
+
+  @media (width >= 800px) {
+    padding: var(--space-xl);
+  }
+}
+
+form {
+  max-width: 89vw;
+  display: grid;
+  gap: var(--space-xl) var(--space-xxl);
+  --repeat: auto-fit;
+  grid-template-columns: 
+    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
+  align-items: flex-start;
+
+  @media (orientation: landscape) and (width >= 640px) {
+    --repeat: 2;
+  }
+}
+
+section {
+  display: grid;
+  gap: var(--space-md);
+}
+
+header {
+  display: grid;
+  gap: var(--space-xxs);
+}
+
+fieldset {
+  border: 1px solid var(--surface4);
+  background: var(--surface4);
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 1px;
+  border-radius: var(--space-sm);
+  overflow: hidden;
+  transition: box-shadow .3s ease;
+
+  &:focus-within {
+    box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
+  }
+}
+
+input[type="range"] {
+  --track-height: .5ex;
+  --track-fill: 0%;
+  --thumb-size: 3ex;
+  --thumb-offset: -1.25ex;
+  --thumb-highlight-size: 0px;
+
+  display: block;
+  inline-size: 100%;
+  margin: 1ex 0;
+  appearance: none;
+  background: transparent;
+  outline-offset: 5px;
+
+  @media (hover: none) {
+    --thumb-size: 30px;
+    --thumb-offset: -14px;
+  }
+
+  &::-webkit-slider-runnable-track {
+    appearance: none;
+    block-size: var(--track-height);
+    border-radius: 5ex;
+    background: 
+      linear-gradient(
+        to right, 
+        transparent var(--track-fill), 
+        var(--surface1) 0%
+      ),
+      var(--brand-bg-gradient) fixed;
+  }
+
+  &::-moz-range-track {
+    appearance: none;
+    block-size: var(--track-height);
+    border-radius: 5ex;
+    background: 
+      linear-gradient(
+        to right, 
+        transparent var(--track-fill), 
+        var(--surface1) 0%
+      ),
+      var(--brand-bg-gradient) fixed;
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    cursor: ew-resize;
+    border: 3px solid var(--surface3);
+    block-size: var(--thumb-size);
+    inline-size: var(--thumb-size);
+    margin-block-start: var(--thumb-offset);
+    border-radius: 50%;
+    background: var(--brand-bg-gradient) fixed;
+    box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
+    
+    @media (--motionOK) {
+      transition: box-shadow .1s ease;
+    }
+
+    @nest .fieldset-item:focus-within & {
+      border-color: var(--surface2);
+    }
+  }
+
+  &::-moz-range-thumb {
+    appearance: none;
+    cursor: ew-resize;
+    border: 3px solid var(--surface3);
+    block-size: var(--thumb-size);
+    inline-size: var(--thumb-size);
+    margin-block-start: var(--thumb-offset);
+    border-radius: 50%;
+    background: var(--brand-bg-gradient) fixed;
+    box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
+
+    @media (--motionOK) {
+      transition: box-shadow .1s ease;
+    }
+
+    @nest .fieldset-item:focus-within & {
+      border-color: var(--surface2);
+    }
+  }
+
+  &:is(:hover,:active) {
+    --thumb-highlight-size: 10px;
+  }
+}
+
+input[type="checkbox"] {
+  inline-size: var(--space-sm);
+  block-size: var(--space-sm);
+  margin: 0;
+  outline-offset: 5px;
+  accent-color: var(--brand);
+  position: relative;
+  transform-style: preserve-3d;
+  cursor: pointer;
+
+  &:hover::before {
+    --thumb-scale: 1;
+  }
+
+  @media (hover: none) {
+    inline-size: var(--space-md);
+    block-size: var(--space-md);
+  }
+
+  &::before {
+    --thumb-scale: .01;
+    --thumb-highlight-size: var(--space-xl);
+
+    content: "";
+    inline-size: var(--thumb-highlight-size);
+    block-size: var(--thumb-highlight-size);
+    clip-path: circle(50%);
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    background: var(--thumb-highlight-color);
+    transform-origin: center center;
+    transform: 
+      translateX(calc(var(--isRTL) * 50%)) 
+      translateY(-50%) 
+      translateZ(-1px) 
+      scale(var(--thumb-scale))
+    ;
+    will-change: transform;
+
+    @media (--motionOK) {
+      transition: transform .2s ease;
+    }
+  }
+}
+
+.fieldset-item {
+  background: var(--surface3);
+  transition: background .2s ease;
+
+  display: grid;
+  grid-template-columns: var(--space-lg) 1fr;
+  gap: var(--space-md);
+
+  padding-block: var(--space-sm);
+  padding-inline: var(--space-md);
+
+  @media (width >= 540px) {
+    grid-template-columns: var(--space-xxl) 1fr;
+    gap: var(--space-xs);
+    padding-block: var(--space-md);
+    padding-inline: 0 var(--space-xl);
+  }
+
+  &:focus-within {
+    background: var(--surface2);
+
+    & svg {
+      fill: white;
+    }
+
+    & picture {
+      clip-path: circle(50%);
+      background: var(--brand-bg-gradient) fixed;
+    }
+  }
+
+  & > :is(.input-stack, label) {
+    display: grid;
+    gap: var(--space-xs);
+  }
+
+  & > .input-stack > label {
+    display: contents;
+  }
+
+  & > picture {
+    block-size: var(--space-xl);
+    inline-size: var(--space-xl);
+    clip-path: circle(40%);
+    display: inline-grid;
+    place-content: center;
+    background: var(--surface3) fixed;
+
+    @media (--motionOK) {
+      transition: clip-path .3s ease;
+    }
+  }
+
+  & svg {
+    fill: var(--text2);
+    block-size: var(--space-md);
+  }
+
+  & > :is(picture, input[type="checkbox"]) {
+    place-self: center;
+  }
+}
+
+small {
+  color: var(--text2);
+  line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/settings/demo.njk b/src/site/content/en/patterns/components/settings/demo.njk
new file mode 100644
index 00000000000..c3a170b4043
--- /dev/null
+++ b/src/site/content/en/patterns/components/settings/demo.njk
@@ -0,0 +1,181 @@
+---
+patternId: components/settings
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root{--surface1:rgb(27, 27, 27);--surface2:rgb(37, 37, 37);--surface3:rgb(48, 48, 48);--surface4:rgb(59, 59, 59);--text1:rgb(240, 240, 240);--text2:rgb(184, 184, 184);--brand:rgb(118, 161, 184);--brand-bg1:rgb(255, 117, 195);--brand-bg2:rgb(157, 119, 255);--brand-bg-gradient:linear-gradient(
+    to bottom,
+    var(--brand-bg1),
+    var(--brand-bg2)
+  );--thumb-highlight-color:rgba(255, 255, 254, 0.2);--space-xxs:.25rem;--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-xxl:6rem;--isLTR:1;--isRTL:-1}[dir=rtl]:root{--isLTR:-1;--isRTL:1}@media (prefers-color-scheme:light){:root{--surface1:rgb(226, 226, 226);--surface2:rgb(255, 255, 254);--surface3:rgb(249, 249, 249);--surface4:rgb(212, 212, 212);--text1:rgb(48, 48, 48);--text2:rgb(94, 94, 94);--brand:rgb(47, 167, 214);--brand-bg1:rgb(205, 58, 142);--brand-bg2:rgb(98, 69, 216);--thumb-highlight-color:rgba(0, 0, 0, 0.2)}}html{height:100%;width:100%}body{min-height:100%;min-width:100%;box-sizing:border-box;margin:0;padding-top:var(--space-xl);padding-bottom:var(--space-xl);background:var(--surface1);color:var(--text1);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}h1,h2,h3{margin:0;font-weight:500}main{display:grid;gap:var(--space-xl);align-content:center;justify-content:center;place-content:center;padding:var(--space-sm)}@media (min-width:540px){main{padding:var(--space-lg)}}@media (min-width:800px){main{padding:var(--space-xl)}}form{max-width:89vw;display:grid;gap:var(--space-xl) var(--space-xxl);--repeat:auto-fit;grid-template-columns:repeat(var(--repeat),minmax(min(10ch,100%),35ch));align-items:flex-start}@media (orientation:landscape) and (min-width:640px){form{--repeat:2}}section{display:grid;gap:var(--space-md)}header{display:grid;gap:var(--space-xxs)}fieldset{border:1px solid var(--surface4);background:var(--surface4);padding:0;margin:0;display:grid;gap:1px;border-radius:var(--space-sm);overflow:hidden;transition:box-shadow .3s ease}fieldset[focus-within]{box-shadow:0 5px 20px -10px hsla(0,0%,0%,.5)}fieldset:focus-within{box-shadow:0 5px 20px -10px hsla(0,0%,0%,.5)}input[type=range]{--track-height:.5ex;--track-fill:0%;--thumb-size:3ex;--thumb-offset:-1.25ex;--thumb-highlight-size:0px;display:block;width:100%;margin:1ex 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;outline-offset:5px}@media (hover:none){input[type=range]{--thumb-size:30px;--thumb-offset:-14px}}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;height:var(--track-height);border-radius:5ex;background:linear-gradient(to right,transparent var(--track-fill),var(--surface1) 0),var(--brand-bg-gradient) fixed}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none;height:var(--track-height);border-radius:5ex;background:linear-gradient(to right,transparent var(--track-fill),var(--surface1) 0),var(--brand-bg-gradient) fixed}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:ew-resize;border:3px solid var(--surface3);height:var(--thumb-size);width:var(--thumb-size);margin-top:var(--thumb-offset);border-radius:50%;background:var(--brand-bg-gradient) fixed;box-shadow:0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color)}@media (prefers-reduced-motion:no-preference){input[type=range]::-webkit-slider-thumb{-webkit-transition:box-shadow .1s ease;transition:box-shadow .1s ease}}.fieldset-item[focus-within] input[type=range]::-webkit-slider-thumb{border-color:var(--surface2)}.fieldset-item:focus-within input[type=range]::-webkit-slider-thumb{border-color:var(--surface2)}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;cursor:ew-resize;border:3px solid var(--surface3);height:var(--thumb-size);width:var(--thumb-size);margin-top:var(--thumb-offset);border-radius:50%;background:var(--brand-bg-gradient) fixed;box-shadow:0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color)}@media (prefers-reduced-motion:no-preference){input[type=range]::-moz-range-thumb{-moz-transition:box-shadow .1s ease;transition:box-shadow .1s ease}}.fieldset-item[focus-within] input[type=range]::-moz-range-thumb{border-color:var(--surface2)}.fieldset-item:focus-within input[type=range]::-moz-range-thumb{border-color:var(--surface2)}input[type=range]:is(:hover,:active){--thumb-highlight-size:10px}input[type=checkbox]{width:var(--space-sm);height:var(--space-sm);margin:0;outline-offset:5px;accent-color:var(--brand);position:relative;transform-style:preserve-3d;cursor:pointer}input[type=checkbox]:hover::before{--thumb-scale:1}@media (hover:none){input[type=checkbox]{width:var(--space-md);height:var(--space-md)}}[dir=ltr] input[type=checkbox]::before{left:50%}[dir=rtl] input[type=checkbox]::before{right:50%}input[type=checkbox]::before{--thumb-scale:.01;--thumb-highlight-size:var(--space-xl);content:"";width:var(--thumb-highlight-size);height:var(--thumb-highlight-size);-webkit-clip-path:circle(50%);clip-path:circle(50%);position:absolute;top:50%;background:var(--thumb-highlight-color);transform-origin:center center;transform:translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));will-change:transform}@media (prefers-reduced-motion:no-preference){input[type=checkbox]::before{transition:transform .2s ease}}.fieldset-item{background:var(--surface3);transition:background .2s ease;display:grid;grid-template-columns:var(--space-lg) 1fr;gap:var(--space-md);padding-top:var(--space-sm);padding-bottom:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md)}@media (min-width:540px){[dir=ltr] .fieldset-item{padding-left:0;padding-right:var(--space-xl)}[dir=rtl] .fieldset-item{padding-right:0;padding-left:var(--space-xl)}.fieldset-item{grid-template-columns:var(--space-xxl) 1fr;gap:var(--space-xs);padding-top:var(--space-md);padding-bottom:var(--space-md)}}.fieldset-item[focus-within]{background:var(--surface2)}.fieldset-item:focus-within{background:var(--surface2)}.fieldset-item[focus-within] svg{fill:#fff}.fieldset-item:focus-within svg{fill:#fff}.fieldset-item[focus-within] picture{-webkit-clip-path:circle(50%);clip-path:circle(50%);background:var(--brand-bg-gradient) fixed}.fieldset-item:focus-within picture{-webkit-clip-path:circle(50%);clip-path:circle(50%);background:var(--brand-bg-gradient) fixed}.fieldset-item>:is(.input-stack,label){display:grid;gap:var(--space-xs)}.fieldset-item>.input-stack>label{display:contents}.fieldset-item>picture{height:var(--space-xl);width:var(--space-xl);-webkit-clip-path:circle(40%);clip-path:circle(40%);display:inline-grid;align-content:center;justify-content:center;place-content:center;background:var(--surface3) fixed}@media (prefers-reduced-motion:no-preference){.fieldset-item>picture{transition:-webkit-clip-path .3s ease;transition:clip-path .3s ease;transition:clip-path .3s ease,-webkit-clip-path .3s ease}}.fieldset-item svg{fill:var(--text2);height:var(--space-md)}.fieldset-item>:is(picture,input[type=checkbox]){align-self:center;justify-self:center;place-self:center}small{color:var(--text2);line-height:1.5}.github-corner{color:var(--surface1);fill:var(--surface3)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+     <main>
+      <h1>Settings</h1>
+
+      <form>
+
+        <section>
+          <header>
+            <h2>Sound & vibration</h2>
+            <small>Adjust system volume channels</small>
+          </header>
+
+          <fieldset>
+
+            <div class="fieldset-item">
+              <picture aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <title>A note icon</title>
+                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+                </svg>
+              </picture>
+              <div class="input-stack">
+                <label
+                  for="media-volume"
+                  id="media-volume"
+                  aria-hidden="true">
+                    Media volume
+                </label>
+                <input
+                  name="media-volume"
+                  aria-labelledby="media-volume"
+                  type="range"
+                  value="3"
+                  max="10"
+                  style="--track-fill: 30%"
+                >
+              </div>
+            </div>
+
+            <div class="fieldset-item">
+              <picture aria-hidden="true">
+                <title>A phone icon</title>
+                <svg viewBox="0 0 24 24">
+                  <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+                </svg>
+              </picture>
+              <div class="input-stack">
+                <label for="call-volume" id="call-volume" aria-hidden="true">Call volume</label>
+                <input
+                  name="call-volume"
+                  aria-labelledby="call-volume"
+                  type="range"
+                  value="7"
+                  max="10"
+                  style="--track-fill: 70%"
+                >
+              </div>
+            </div>
+
+            <div class="fieldset-item">
+              <picture aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <title>A bell icon</title>
+                  <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+                </svg>
+              </picture>
+              <div class="input-stack">
+                <label for="ring-volume" id="ring-volume" aria-hidden="true">Ring volume</label>
+                <input
+                  name="ring-volume"
+                  aria-labelledby="ring-volume"
+                  type="range"
+                  value="5"
+                  max="10"
+                  style="--track-fill: 50%"
+                >
+              </div>
+            </div>
+
+            <div class="fieldset-item">
+              <picture aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <title>An alarm clock icon</title>
+                  <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
+                </svg>
+              </picture>
+              <div class="input-stack">
+                <label for="alarm-volume" id="alarm-volume" aria-hidden="true">Alarm volume</label>
+                <input
+                  name="alarm-volume"
+                  aria-labelledby="alarm-volume"
+                  type="range"
+                  value="8"
+                  max="10"
+                  style="--track-fill: 80%"
+                >
+              </div>
+            </div>
+
+          </fieldset>
+        </section>
+
+        <section>
+          <header>
+            <h2>Notifications</h2>
+            <small>Turn specific channels on/off</small>
+          </header>
+
+          <fieldset>
+
+            <div class="fieldset-item">
+              <input
+                type="checkbox"
+                checked
+                id="text-notifications"
+                name="text-notifications"
+              >
+              <div class="input-stack">
+                <label for="text-notifications">
+                  <h3>Text Messages</h3>
+                  <small>Get notified about all text messages sent to your device</small>
+                </label>
+              </div>
+            </div>
+
+            <div class="fieldset-item">
+              <input
+                type="checkbox"
+                id="voice-notifications"
+                name="voice-notifications"
+              >
+              <div class="input-stack">
+                <label for="voice-notifications">
+                  <h3>Voice Mail</h3>
+                  <small>Get notified about all voice messages sent to your device</small>
+                </label>
+              </div>
+            </div>
+
+            <div class="fieldset-item">
+              <input
+                type="checkbox"
+                id="email-notifications"
+                name="email-notifications"
+              >
+              <div class="input-stack">
+                <label for="email-notifications">
+                  <h3>Emails</h3>
+                  <small>Get notified about all text messages to your device</small>
+                </label>
+              </div>
+            </div>
+
+          </fieldset>
+        </section>
+
+      </form>
+    </main>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(r){const o=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((r,a)=>{const s=new URL(e,o);if(self[t].moduleMap[s])return r(self[t].moduleMap[s]);const c=new Blob([`import * as m from '${s}';`,`${t}.moduleMap['${s}']=m;`],{type:"text/javascript"}),l=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(c),onerror(){a(new Error(`Failed to import: ${e}`)),n(l)},onload(){r(self[t].moduleMap[s]),n(l)}});document.head.appendChild(l)})),self[t].moduleMap={}}}("assets/");const e=document.querySelector("form"),t=document.querySelectorAll('input[type="range"]'),r=e=>{const t=e.getAttribute("max")||10,r=e.value/t*100;return`${parseInt(r)}%`};t.forEach((e=>{e.style.setProperty("--track-fill",r(e)),e.addEventListener("input",(e=>{e.target.style.setProperty("--track-fill",r(e.target))}))})),e.addEventListener("input",(t=>{const r=Object.fromEntries(new FormData(e));console.table(r)}));
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/settings/index.md b/src/site/content/en/patterns/components/settings/index.md
new file mode 100644
index 00000000000..103a22276c3
--- /dev/null
+++ b/src/site/content/en/patterns/components/settings/index.md
@@ -0,0 +1,15 @@
+---
+layout: pattern
+title: Settings
+description: |
+  This pattern shows how to build a settings component that is responsive, supports multiple device inputs, and works across browsers.
+  <br><br>
+  <a href="/building-a-settings-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=dm7gnp6eh3Q">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/settings">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to build a settings component that is responsive,
+supports multiple device inputs, and works across browsers.
+
+<a href="/building-a-settings-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=dm7gnp6eh3Q">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/settings">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/sidenav/assets/body.html b/src/site/content/en/patterns/components/sidenav/assets/body.html
new file mode 100644
index 00000000000..a82dc0fbffc
--- /dev/null
+++ b/src/site/content/en/patterns/components/sidenav/assets/body.html
@@ -0,0 +1,43 @@
+<aside id="sidenav-open">
+  <nav>
+    <h4>My</h4>
+    <a href="#">Dashboard</a>
+    <a href="#">Profile</a>
+    <a href="#">Preferences</a>
+    <a href="#">Archive</a>
+
+    <h4>Settings</h4>
+    <a href="#">Accessibility</a>
+    <a href="#">Theme</a>
+    <a href="#">Admin</a>
+  </nav>
+  
+  <a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+</aside>
+
+<main>
+  <header>
+    <a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+      <svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
+        <line x1="0" x2="100%" y1="10%" y2="10%" />
+        <line x1="0" x2="100%" y1="50%" y2="50%" />
+        <line x1="0" x2="100%" y1="90%" y2="90%" />
+      </svg>
+    </a>
+    <h1>Site Title</h1>
+  </header>
+
+  <article>
+    <h2>Totam Header</h2>
+    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+
+    <h3>Subhead Totam Odit</h3>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+    
+    <h3>Subhead</h3>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+  </article>
+</main>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/sidenav/assets/script.js b/src/site/content/en/patterns/components/sidenav/assets/script.js
new file mode 100644
index 00000000000..de392c6f9ca
--- /dev/null
+++ b/src/site/content/en/patterns/components/sidenav/assets/script.js
@@ -0,0 +1,27 @@
+const sidenav = document.querySelector('#sidenav-open')
+const closenav = document.querySelector('#sidenav-close')
+const opennav = document.querySelector('#sidenav-button')
+
+// set focus to our open/close buttons after animation
+sidenav.addEventListener('transitionend', e => {
+  if (e.propertyName !== 'transform')
+    return
+
+  const isOpen = document.location.hash === '#sidenav-open'
+
+  isOpen
+    ? closenav.focus()
+    : opennav.focus()
+
+  if (!isOpen) {
+    history.replaceState(history.state, '')
+  }
+})
+
+// close our menu when esc is pressed
+sidenav.addEventListener('keyup', e => {
+  if (e.code === 'Escape')
+    window.history.length
+      ? window.history.back()
+      : document.location.hash = ''
+})
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/sidenav/assets/style.css b/src/site/content/en/patterns/components/sidenav/assets/style.css
new file mode 100644
index 00000000000..b4e24b6e28f
--- /dev/null
+++ b/src/site/content/en/patterns/components/sidenav/assets/style.css
@@ -0,0 +1,55 @@
+body {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+
+  @media (max-width: 540px) {
+    & > :matches(aside, main) {
+      grid-area: stack;
+    }
+  }
+}
+
+#sidenav-open {
+  --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration: .6s;
+
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+
+  @media (max-width: 540px) {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+
+    visibility: hidden; /* not keyboard accessible when closed */
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition: 
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+    
+    &:target {
+      visibility: visible;
+      transform: translateX(0);
+      transition: transform var(--duration) var(--easeOutExpo);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    --duration: 1ms;
+  }
+}
+
+#sidenav-button,
+#sidenav-close {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  touch-action: manipulation;
+
+  @media (min-width: 540px) {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/sidenav/demo.njk b/src/site/content/en/patterns/components/sidenav/demo.njk
new file mode 100644
index 00000000000..e50b1d9ae46
--- /dev/null
+++ b/src/site/content/en/patterns/components/sidenav/demo.njk
@@ -0,0 +1,64 @@
+---
+patternId: components/sidenav
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/blokk/blokk.css">
+    <style>
+      body{display:grid;grid:[stack] 1fr/-webkit-min-content [stack] 1fr;grid:[stack] 1fr/min-content [stack] 1fr}@media (max-width:540px){body>aside,body>main{grid-area:stack}}#sidenav-open{--easeOutExpo:cubic-bezier(0.16,1,0.3,1);--duration:.6s;display:grid;grid-template-columns:[nav] 2fr [escape] 1fr}@media (max-width:540px){ #sidenav-open{position:-webkit-sticky;position:sticky;top:0;max-height:100vh;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden;transform:translateX(-110vw);will-change:transform;transition:transform var(--duration) var(--easeOutExpo),visibility 0s linear var(--duration)}#sidenav-open:target{visibility:visible;transform:translateX(0);transition:transform var(--duration) var(--easeOutExpo)}}@media (prefers-reduced-motion:reduce){ #sidenav-open{--duration:1ms}}#sidenav-button,#sidenav-close{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation}@media (min-width:540px){ #sidenav-button,#sidenav-close{display:none}}nav{display:inline-flex;flex-direction:column;padding:2rem;font-size:1.25rem;color:#e2e2e2;color:var(--text)}@media (min-width:540px){nav{-webkit-padding-before:4.5rem;padding-block-start:4.5rem}}@media (max-width:540px){nav{background-color:#303030;background-color:var(--surface2);-webkit-border-end:1px var(--surface1);border-inline-end:1px var(--surface1);box-shadow:5px 0 40px rgba(0,0,0,.45);font-size:1.5rem}}nav>h4{text-transform:uppercase}nav>h4:not(:first-child){-webkit-margin-before:2rem;margin-block-start:2rem}nav a{text-decoration:none;line-height:1.25}.hamburger{--size:4rem;display:flex;align-content:center;justify-content:center;place-content:center;padding:1rem;box-sizing:border-box;border-radius:50%;border:2px solid transparent;-webkit-margin-start:-1rem;margin-inline-start:-1rem;block-size:var(--size);inline-size:var(--size);outline:none;transition:border-color .25s ease,background-color .25s ease}.hamburger:hover{border-color:rgba(255,20,146,.5);border-color:hsl(var(--brandHSL)/50%)}.hamburger:focus{border-color:rgba(255,20,146,.12);border-color:hsl(var(--brandHSL)/12%);background:rgba(255,20,146,.1);background:hsl(var(--brandHSL)/10%)}.hamburger:hover svg>line{stroke:#ff1492;stroke:hsl(var(--brandHSL))}.hamburger:active{background:rgba(255,20,146,.2);background:hsl(var(--brandHSL)/20%)}.hamburger>svg{width:100%}.hamburger>svg>line{stroke:#e2e2e2;stroke:var(--text);stroke-width:7px;transition:stroke .25s ease}aside>a{outline-offset:-1px;outline:1px solid transparent}aside>a:focus{outline-color:#ff1492;outline-color:hsl(var(--brandHSL));transition:outline-color .25s ease}main{padding:.5rem 1.5rem}main>header{display:flex;align-items:center;justify-content:space-between;min-block-size:3rem;-webkit-margin-after:1rem;margin-block-end:1rem}article{display:inline-grid;gap:2ch;background:#303030;background:var(--surface2);padding:2ch;border-radius:1ch;box-shadow:0 2px 5px rgba(0,0,0,.2)}article>*{margin:0}article>p+h1,article>p+h2,article>p+h3,article>p+h4,article>p+h5,article>p+h6{margin-top:2ch}:root{--surface:#1b1b1b;--surface2:#303030;--text:#e2e2e2;--text2:#ababab;--brandHSL:328 100% 54%}@media (prefers-color-scheme:light){:root{--surface:#e2e2e2;--surface2:#fffffe;--text:#303030;--text2:#5e5e5e}}body{min-block-size:100vh;font-family:BLOKK,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;padding:0;background:#1b1b1b;background:var(--surface)}body,figure,h1,h2,h3,h4{margin:0;color:#e2e2e2;color:var(--text)}h2{font-size:2.5rem}h3{font-size:1.5rem;max-inline-size:30ch}p{line-height:1.5;color:#ababab;color:var(--text2);max-inline-size:50ch}a{color:#ff7ac1;outline-color:#ff1492;outline-color:hsl(var(--brandHSL));outline-offset:5px}a:hover{color:#ff1492;color:hsl(var(--brandHSL))}
+    </style>
+  </head>
+  <body>
+    <aside id="sidenav-open">
+      <nav>
+        <h4>My</h4>
+        <a href="#">Dashboard</a>
+        <a href="#">Profile</a>
+        <a href="#">Preferences</a>
+        <a href="#">Archive</a>
+
+        <h4>Settings</h4>
+        <a href="#">Accessibility</a>
+        <a href="#">Theme</a>
+        <a href="#">Admin</a>
+      </nav>
+
+      <a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+    </aside>
+
+    <main>
+      <header>
+        <a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+          <svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
+            <line x1="0" x2="100%" y1="10%" y2="10%" />
+            <line x1="0" x2="100%" y1="50%" y2="50%" />
+            <line x1="0" x2="100%" y1="90%" y2="90%" />
+          </svg>
+        </a>
+        <h1>Site Title</h1>
+      </header>
+
+      <article>
+        <h2>Totam Header</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+
+        <h3>Subhead Totam Odit</h3>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+
+        <h3>Subhead</h3>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
+      </article>
+    </main>
+
+    {% set script %}
+      var e=document.querySelector("#sidenav-open"),t=document.querySelector("#sidenav-close"),o=document.querySelector("#sidenav-button");e.addEventListener("transitionend",(function(e){"transform"===e.propertyName&&((e="#sidenav-open"===document.location.hash)?t.focus():o.focus(),e||history.replaceState(history.state,""))})),e.addEventListener("keyup",(function(e){"Escape"===e.code&&(window.history.length?window.history.back():document.location.hash="")}));
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/sidenav/index.md b/src/site/content/en/patterns/components/sidenav/index.md
new file mode 100644
index 00000000000..fd4236d4b80
--- /dev/null
+++ b/src/site/content/en/patterns/components/sidenav/index.md
@@ -0,0 +1,16 @@
+---
+layout: pattern
+title: Sidenav
+description: |
+  This pattern shows how to build a component for the web that is responsive, stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers.
+  <br><br>
+  <a href="/building-a-sidenav-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=uiZqDLqjGRY">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/sidenav">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to build a component for the web that is responsive,
+stateful, supports keyboard navigation, works with and without JavaScript, and
+works across browsers.
+
+<a href="/building-a-sidenav-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=uiZqDLqjGRY">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/sidenav">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/split-buttons/assets/body.html b/src/site/content/en/patterns/components/split-buttons/assets/body.html
new file mode 100644
index 00000000000..6484a0ffc41
--- /dev/null
+++ b/src/site/content/en/patterns/components/split-buttons/assets/body.html
@@ -0,0 +1,74 @@
+<div class="gui-split-button">
+  <button>View Cart</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup">
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+        Checkout
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+        </svg>
+        Quick Pay
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+        </svg>
+        Save for later
+      </button></li>
+    </ul>
+  </span>
+</div>
+
+<div class="gui-split-button">
+  <button>Send</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup">
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        Schedule for later
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+        Delete
+      </button></li>
+      <li><button>
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+        </svg>
+        Save draft
+      </button></li>
+    </ul>
+  </span>
+</div>
+
+<div class="gui-split-button">
+  <button>Squash</button>
+  <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+    <svg aria-hidden="true" viewBox="0 0 20 20">
+      <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+    </svg>
+    <ul class="gui-popup">
+      <li><button>
+        Create a merge commit
+      </button></li>
+      <li><button>
+        Rebase
+      </button></li>
+    </ul>
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/split-buttons/assets/script.js b/src/site/content/en/patterns/components/split-buttons/assets/script.js
new file mode 100644
index 00000000000..80b4eb2cbc7
--- /dev/null
+++ b/src/site/content/en/patterns/components/split-buttons/assets/script.js
@@ -0,0 +1,32 @@
+import $ from 'blingblingjs'
+import {rovingIndex} from 'roving-ux'
+
+const splitButtons = $('.gui-split-button')
+const popupButtons = $('.gui-popup-button')
+
+// popup activating roving index for it's buttons
+popupButtons.forEach(element => 
+  rovingIndex({
+    element,
+    target: 'button',
+  }))
+
+// support escape key
+popupButtons.on('keyup', e => {
+  if (e.code === 'Escape')
+    e.target.blur()
+})
+
+popupButtons.on('focusin', e => {
+  e.currentTarget.setAttribute('aria-expanded', true)
+})
+
+popupButtons.on('focusout', e => {
+  e.currentTarget.setAttribute('aria-expanded', false)
+})
+
+// respond to any button interaction
+splitButtons.on('click', event => {
+  if (event.target.nodeName !== 'BUTTON') return
+  console.info(event.target.innerText)
+})
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/split-buttons/assets/style.css b/src/site/content/en/patterns/components/split-buttons/assets/style.css
new file mode 100644
index 00000000000..98284c0d576
--- /dev/null
+++ b/src/site/content/en/patterns/components/split-buttons/assets/style.css
@@ -0,0 +1,222 @@
+.gui-split-button {
+  --theme:        hsl(220 75% 50%);
+  --theme-hover:  hsl(220 75% 45%);
+  --theme-active: hsl(220 75% 40%);
+  --theme-text:   hsl(220 75% 25%);
+  --theme-border: hsl(220 50% 75%);
+  --ontheme:      hsl(220 90% 98%);
+  --popupbg:      hsl(220 0% 100%);
+
+  --border: 1px solid var(--theme-border);
+  --radius: 6px;
+  --in-speed: 500ms;
+  --out-speed: 100ms;
+
+  display: inline-flex;
+  border-radius: var(--radius);
+  background: var(--theme);
+  color: var(--ontheme);
+  fill: var(--ontheme);
+
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  @media (--dark) {
+    --theme:        hsl(220 50% 60%);
+    --theme-hover:  hsl(220 50% 65%);
+    --theme-active: hsl(220 75% 70%);
+    --theme-text:   hsl(220 10% 85%);
+    --theme-border: hsl(220 20% 70%);
+    --ontheme:      hsl(220 90% 5%);
+    --popupbg:      hsl(220 10% 30%);
+  }
+
+  & button {
+    cursor: pointer;
+    appearance: none;
+    background: none;
+    border: none;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 1ch;
+    white-space: nowrap;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+
+    padding-block: 1.25ch;
+    padding-inline: 2.5ch;
+
+    color: var(--ontheme);
+    outline-color: var(--theme);
+    outline-offset: -5px;
+
+    &:is(:hover, :focus-visible) {
+      background: var(--theme-hover);
+      color: var(--ontheme);
+
+      & > svg {
+        stroke: currentColor;
+        fill: none;
+      }
+    }
+
+    &:active {
+      background: var(--theme-active);
+    }
+  }
+
+  & > button {
+    border-radius: var(--radius) 0 0 var(--radius);
+
+    @supports (border-start-start-radius: 1px) {
+      border-end-start-radius: var(--radius);
+      border-start-start-radius: var(--radius);
+    }
+  }
+
+  @media (--light) {
+    & > button,
+    & button:is(:focus-visible, :hover) {
+      text-shadow: 0 1px 0 var(--theme-active);
+    }
+    & > .gui-popup-button > svg,
+    & button:is(:focus-visible, :hover) > svg {
+      filter: drop-shadow(0 1px 0 var(--theme-active));
+    }
+  }
+  
+  & svg {
+    inline-size: 2ch;
+    box-sizing: content-box;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2px;
+  }
+}
+
+.gui-popup-button {
+  inline-size: 4ch;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-inline-start: var(--border);
+  border-radius: 0 var(--radius) var(--radius) 0;
+
+  @supports (border-start-start-radius: 1px) {
+    border-inline-start: var(--border);
+    border-start-end-radius: var(--radius);
+    border-end-end-radius: var(--radius);
+  }
+
+  &:is(:hover,:focus-within) {
+    background: var(--theme-hover);
+  }
+
+  /* fixes iOS trying to be helpful */
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    background: var(--theme-active);
+  }
+  
+  &:focus-within {
+    & > svg {
+      transition-duration: var(--in-speed);
+      transform: rotateZ(.5turn);
+    }
+    & > .gui-popup {
+      transition-duration: var(--in-speed);
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+  }
+
+  @media (--motionOK) {
+    & > svg {
+      transition: transform var(--out-speed) ease;
+    }
+    & > .gui-popup {
+      transform: translateY(5px);
+
+      transition: 
+        opacity var(--out-speed) ease,
+        transform var(--out-speed) ease;
+    }
+  }
+}
+
+.gui-popup {
+  --shadow: 220 70% 15%;
+  --shadow-strength: 1%;
+
+  opacity: 0;
+  pointer-events: none;
+
+  position: absolute;
+  inset-block-end: 80%;
+  inset-inline-start: -1.5ch;
+  
+  list-style-type: none;
+  background: var(--popupbg);
+  color: var(--theme-text);
+  padding-inline: 0;
+  padding-block: .5ch;
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-size: .9em;
+  transition: opacity var(--out-speed) ease;
+
+  box-shadow:
+    0 -2px 5px 0 hsl(var(--shadow) / calc(var(--shadow-strength) + 5%)),
+    0 1px 1px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 10%)),
+    0 2px 2px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 12%)),
+    0 5px 5px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 13%)),
+    0 9px 9px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 14%)),
+    0 16px 16px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 20%))
+  ;
+
+  /* fixes iOS trying to be helpful */
+  &:focus {outline: none}
+
+  @media (--dark) {
+    --shadow-strength: 5%;
+    --shadow: 220 3% 2%;
+
+    & button:not(:focus-visible, :hover) {
+      text-shadow: 0 1px 0 var(--ontheme);
+    }
+
+    & button:not(:focus-visible, :hover) > svg {
+      filter: drop-shadow(0 1px 0 var(--ontheme));
+    }
+  }
+
+  @media (width <= 400px) {
+    inset-inline-start: -200%;
+  }
+
+  & svg {
+    fill: var(--popupbg);
+    stroke: var(--theme);
+
+    @media (prefers-color-scheme: dark) {
+      stroke: var(--theme-border);
+    }
+  }
+
+  & button {
+    color: var(--theme-text);
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/split-buttons/demo.njk b/src/site/content/en/patterns/components/split-buttons/demo.njk
new file mode 100644
index 00000000000..21c8cdc6038
--- /dev/null
+++ b/src/site/content/en/patterns/components/split-buttons/demo.njk
@@ -0,0 +1,50 @@
+---
+patternId: components/split-buttons
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta name="theme-color" content="deeppink" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      .gui-split-button{--theme:hsl(220, 75%, 50%);--theme-hover:hsl(220, 75%, 45%);--theme-active:hsl(220, 75%, 40%);--theme-text:hsl(220, 75%, 25%);--theme-border:hsl(220, 50%, 75%);--ontheme:hsl(220, 90%, 98%);--popupbg:hsl(220, 0%, 100%);--border:1px solid var(--theme-border);--radius:6px;--in-speed:500ms;--out-speed:100ms;display:inline-flex;border-radius:var(--radius);background:var(--theme);color:var(--ontheme);fill:var(--ontheme);touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}@media (prefers-color-scheme:dark){.gui-split-button{--theme:hsl(220, 50%, 60%);--theme-hover:hsl(220, 50%, 65%);--theme-active:hsl(220, 75%, 70%);--theme-text:hsl(220, 10%, 85%);--theme-border:hsl(220, 20%, 70%);--ontheme:hsl(220, 90%, 5%);--popupbg:hsl(220, 10%, 30%)}}.gui-split-button button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:none;display:inline-flex;align-items:center;gap:1ch;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:500;padding-block:1.25ch;padding-inline:2.5ch;color:var(--ontheme);outline-color:var(--theme);outline-offset:-5px}.gui-split-button button:is(:hover,:focus-visible){background:var(--theme-hover);color:var(--ontheme)}.gui-split-button button:is(:hover,:focus-visible)>svg{stroke:currentColor;fill:none}.gui-split-button button:active{background:var(--theme-active)}.gui-split-button>button{border-radius:var(--radius) 0 0 var(--radius)}@supports (border-start-start-radius:1px){.gui-split-button>button{border-end-start-radius:var(--radius);border-start-start-radius:var(--radius)}}@media (prefers-color-scheme:light){.gui-split-button button:is(:focus-visible,:hover),.gui-split-button>button{text-shadow:0 1px 0 var(--theme-active)}.gui-split-button button:is(:focus-visible,:hover)>svg,.gui-split-button>.gui-popup-button>svg{filter:drop-shadow(0 1px 0 var(--theme-active))}}.gui-split-button svg{inline-size:2ch;box-sizing:content-box;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.gui-popup-button{inline-size:4ch;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;-webkit-border-start:var(--border);border-inline-start:var(--border);border-radius:0 var(--radius) var(--radius) 0}@supports (border-start-start-radius:1px){.gui-popup-button{-webkit-border-start:var(--border);border-inline-start:var(--border);border-start-end-radius:var(--radius);border-end-end-radius:var(--radius)}}.gui-popup-button:is(:hover,:focus-within){background:var(--theme-hover)}.gui-popup-button:focus{outline:0}.gui-popup-button:active{background:var(--theme-active)}.gui-popup-button:focus-within>svg{transition-duration:var(--in-speed);transform:rotateZ(.5turn)}.gui-popup-button:focus-within>.gui-popup{transition-duration:var(--in-speed);opacity:1;transform:translateY(0);pointer-events:auto}@media (prefers-reduced-motion:no-preference){.gui-popup-button>svg{transition:transform var(--out-speed) ease}.gui-popup-button>.gui-popup{transform:translateY(5px);transition:opacity var(--out-speed) ease,transform var(--out-speed) ease}}.gui-popup{--shadow:220 70% 15%;--shadow-strength:1%;opacity:0;pointer-events:none;position:absolute;inset-block-end:80%;inset-inline-start:-1.5ch;list-style-type:none;background:var(--popupbg);color:var(--theme-text);padding-inline:0;padding-block:.5ch;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;font-size:.9em;transition:opacity var(--out-speed) ease;box-shadow:0 -2px 5px 0 hsl(var(--shadow)/ calc(var(--shadow-strength) + 5%)),0 1px 1px -2px hsl(var(--shadow)/ calc(var(--shadow-strength) + 10%)),0 2px 2px -2px hsl(var(--shadow)/ calc(var(--shadow-strength) + 12%)),0 5px 5px -2px hsl(var(--shadow)/ calc(var(--shadow-strength) + 13%)),0 9px 9px -2px hsl(var(--shadow)/ calc(var(--shadow-strength) + 14%)),0 16px 16px -2px hsl(var(--shadow)/ calc(var(--shadow-strength) + 20%))}.gui-popup:focus{outline:0}@media (prefers-color-scheme:dark){.gui-popup{--shadow-strength:5%;--shadow:220 3% 2%}.gui-popup button:not(:focus-visible):not(:hover){text-shadow:0 1px 0 var(--ontheme)}.gui-popup button:not(:focus-visible):not(:hover)>svg{filter:drop-shadow(0 1px 0 var(--ontheme))}}@media (max-width:400px){.gui-popup{inset-inline-start:-200%}}.gui-popup svg{fill:var(--popupbg);stroke:var(--theme)}@media (prefers-color-scheme:dark){.gui-popup svg{stroke:var(--theme-border)}}.gui-popup button{color:var(--theme-text);width:100%}*{box-sizing:border-box;margin:0}html{--brand-hue:200;--brand-saturation:100%;--brand-lightness:50%;--brand-light:hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));--text1-light:hsl(var(--brand-hue) var(--brand-saturation) 10%);--surface1-light:hsl(var(--brand-hue) 25% 97%);--brand-dark:hsl( var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5) );--text1-dark:hsl(var(--brand-hue) 15% 85%);--surface1-dark:hsl(var(--brand-hue) 10% 10%)}:root{--brand:var(--brand-light);--text1:var(--text1-light);--surface1:var(--surface1-light)}@media (prefers-color-scheme:dark){:root{--brand:var(--brand-dark);--text1:var(--text1-dark);--surface1:var(--surface1-dark)}}html{block-size:100%;background-color:var(--surface1);color:var(--text1)}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vmin}.github-corner{fill:var(--text1);color:var(--surface1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <div class="gui-split-button">
+      <button>View Cart</button>
+      <span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
+        <svg aria-hidden="true" viewBox="0 0 20 20">
+          <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+        </svg>
+        <ul class="gui-popup">
+          <li><button>
+            <svg aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            Checkout
+          </button></li>
+          <li><button>
+            <svg aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+            </svg>
+            Quick Pay
+          </button></li>
+          <li><button>
+            <svg aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+            </svg>
+            Save for later
+          </button></li>
+        </ul>
+      </span>
+    </div>
+
+    {% set script %}
+      (()=>{var l={on:function(t,e){return t.split(" ").forEach(n=>this.addEventListener(n,e)),this},off:function(t,e){return t.split(" ").forEach(n=>this.removeEventListener(n,e)),this},attr:function(t,e){return e===void 0?this.getAttribute(t):(e==null?this.removeAttribute(t):this.setAttribute(t,e||""),this)}};function a(t,e=document){let n=t instanceof NodeList||Array.isArray(t)?t:t instanceof HTMLElement||t instanceof SVGElement?[t]:e.querySelectorAll(t);return n.length||(n=[]),Object.assign(Array.from(n).map(r=>Object.assign(r,l)),{on:function(r,i){return this.forEach(o=>o.on(r,i)),this},off:function(r,i){return this.forEach(o=>o.off(r,i)),this},attr:function(r,i){return typeof r=="string"&&i===void 0?this[0].attr(r):(typeof r=="object"?this.forEach(o=>Object.entries(r).forEach(([d,g])=>o.attr(d,g))):typeof r=="string"&&(i||i==null||i=="")&&this.forEach(o=>o.attr(r,i)),this)}})}var s=new Map,u=({element:t,target:e})=>{let n=t.querySelectorAll(e||":scope *"),r=n[0];t.tabIndex=-1,n.forEach(i=>i.tabIndex=-1),r.tabIndex=0,s.set(t,{targets:n,active:r,index:0}),t.addEventListener("focusin",i=>{s.get("last_rover")!=t&&(f(t,s.get(t).active),s.set("last_rover",t))}),t.addEventListener("keydown",i=>{switch(i.keyCode){case 39:case 40:i.preventDefault(),h(t);break;case 37:case 38:i.preventDefault(),p(t)}})},h=t=>{let e=s.get(t);e.index+=1,e.index>e.targets.length-1&&(e.index=e.targets.length-1);let n=e.targets[e.index];n&&f(t,n)},p=t=>{let e=s.get(t);e.index-=1,e.index<1&&(e.index=0);let n=e.targets[e.index];n&&f(t,n)},f=(t,e)=>{let n=s.get(t);n.active.tabIndex=-1,n.active=e,n.active.tabIndex=0,n.active.focus()};var x=a(".gui-split-button"),c=a(".gui-popup-button");c.forEach(t=>u({element:t,target:"button"}));c.on("keyup",t=>{t.code==="Escape"&&t.target.blur()});c.on("focusin",t=>{t.currentTarget.setAttribute("aria-expanded",!0)});c.on("focusout",t=>{t.currentTarget.setAttribute("aria-expanded",!1)});x.on("click",t=>{t.target.nodeName==="BUTTON"&&console.info(t.target.innerText)});})();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/split-buttons/index.md b/src/site/content/en/patterns/components/split-buttons/index.md
new file mode 100644
index 00000000000..2e1b0b548e2
--- /dev/null
+++ b/src/site/content/en/patterns/components/split-buttons/index.md
@@ -0,0 +1,17 @@
+---
+layout: pattern
+title: Split Buttons
+description: |
+  This pattern shows how to build an adaptive and accessible split button component.
+  <br><br>
+  Note: this component uses a library called <a href="https://github.com/argyleink/blingblingjs">BlingBlingJS</a> and <a href="https://github.com/argyleink/roving-ux">Roving UX</a>.
+  <br><br>
+  <a href="/building-a-split-button-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=Qcpru-fIgwk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-buttons">Source on Github</a>
+date: 2022-06-01
+height: 400
+---
+
+This pattern shows how to build an adaptive and accessible split button
+component.
+
+<a href="/building-a-split-button-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=Qcpru-fIgwk">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/split-buttons">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/stories/assets/body.html b/src/site/content/en/patterns/components/stories/assets/body.html
new file mode 100644
index 00000000000..39829f96bfe
--- /dev/null
+++ b/src/site/content/en/patterns/components/stories/assets/body.html
@@ -0,0 +1,17 @@
+<div class="stories"> 
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/480/840);"></article> 
+    <article class="story" style="--bg: url(https://picsum.photos/480/841);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/481/840);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/481/841);"></article>
+  </section>
+  <section class="user">
+    <article class="story" style="--bg: url(https://picsum.photos/482/840);"></article>
+    <article class="story" style="--bg: url(https://picsum.photos/482/843);"></article>
+    <article class="story" style="--bg: url(https://picsum.photos/482/844);"></article>
+  </section>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/stories/assets/script.js b/src/site/content/en/patterns/components/stories/assets/script.js
new file mode 100644
index 00000000000..320a7d78f23
--- /dev/null
+++ b/src/site/content/en/patterns/components/stories/assets/script.js
@@ -0,0 +1,62 @@
+const stories = document.querySelector('.stories')
+const median = stories.offsetLeft + (stories.clientWidth / 2)
+
+const state = {
+  current_story: stories.firstElementChild.lastElementChild
+}
+
+const navigateStories = direction => {
+  const story = state.current_story
+  const lastItemInUserStory = story.parentNode.firstElementChild
+  const firstItemInUserStory = story.parentNode.lastElementChild
+  const hasNextUserStory = story.parentElement.nextElementSibling
+  const hasPrevUserStory = story.parentElement.previousElementSibling
+  
+  if (direction === 'next') {
+    if (lastItemInUserStory === story && !hasNextUserStory)
+      return
+    else if (lastItemInUserStory === story && hasNextUserStory) {
+      state.current_story = story.parentElement.nextElementSibling.lastElementChild
+      story.parentElement.nextElementSibling.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+    else {
+      story.classList.add('seen')
+      state.current_story = story.previousElementSibling
+    }
+  }
+  else if(direction === 'prev') {
+    if (firstItemInUserStory === story && !hasPrevUserStory)
+      return
+    else if (firstItemInUserStory === story && hasPrevUserStory) {
+      state.current_story = story.parentElement.previousElementSibling.firstElementChild
+      story.parentElement.previousElementSibling.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+    else {
+      story.nextElementSibling.classList.remove('seen')
+      state.current_story = story.nextElementSibling
+    }
+  }
+}
+
+stories.addEventListener('click', e => {
+  if (e.target.nodeName !== 'ARTICLE') 
+    return
+  
+  navigateStories(
+    e.clientX > median 
+      ? 'next' 
+      : 'prev')
+})
+
+// left & right are free with snap points 👍
+document.addEventListener('keydown', ({key}) => {
+  if (key !== 'ArrowDown' || key !== 'ArrowUp')
+    navigateStories(
+      key === 'ArrowDown'
+        ? 'next'
+        : 'prev')
+})
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/stories/assets/style.css b/src/site/content/en/patterns/components/stories/assets/style.css
new file mode 100644
index 00000000000..b3763a73080
--- /dev/null
+++ b/src/site/content/en/patterns/components/stories/assets/style.css
@@ -0,0 +1,36 @@
+.stories {
+  display: grid;
+  grid: 1fr / auto-flow 100%;
+  grid-gap: 1ch;
+  gap: 1ch;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior: contain;
+  touch-action: pan-x;
+}
+
+.user {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  display: grid;
+  grid: [story] 1fr / [story] 1fr;
+}
+
+.story {
+  grid-area: story;
+
+  background-size: cover;
+  background-image: 
+    var(--bg), 
+    linear-gradient(to top, rgb(249, 249, 249), rgb(226, 226, 226));
+
+  user-select: none;
+  touch-action: manipulation;
+
+  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1)
+}
+
+.story.seen {
+  opacity: 0;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/stories/demo.njk b/src/site/content/en/patterns/components/stories/demo.njk
new file mode 100644
index 00000000000..f05d622dcb3
--- /dev/null
+++ b/src/site/content/en/patterns/components/stories/demo.njk
@@ -0,0 +1,176 @@
+---
+patternId: components/stories
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      body {
+        min-height: 100vh;
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        place-items: center;
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+        margin: 0;
+        background: hsl(200, 15%, 93%)
+
+        /* parent owned aspects of the responsive stories */
+      }
+
+      body > .stories {
+          width: 100vw;
+          height: 100vh;
+
+          box-shadow:
+            0 5px 2.5px hsla(200, 95%, 3%, .037),
+            0 12px 6.5px hsla(200, 95%, 3%, .053),
+            0 22.5px 13px hsla(200, 95%, 3%, .065),
+            0 40.2px 24px hsla(200, 95%, 3%, .077),
+            0 75.2px 44px hsla(200, 95%, 3%, .093),
+            0 180px 80px hsla(200, 95%, 3%, .13)
+        }
+
+        @media (hover: hover) {
+
+body > .stories {
+      border-radius: 3ch
+  }
+    }
+
+      body > .stories {
+
+          /* desktop constraint */
+        }
+
+      @media (hover: hover) and (min-width: 480px) {
+
+      body > .stories {
+            max-width: 480px;
+            max-height: min(848px, 80vh)
+        }
+          }
+
+      body > .stories {
+
+          /* smaller desktop constraint */
+        }
+
+      @media (hover: hover) and (max-height: 880px) and (min-width: 720px) {
+
+      body > .stories {
+            max-width: 320px;
+            max-height: 568px
+        }
+          }
+
+      .stories {
+        display: grid;
+        grid: 1fr / auto-flow 100%;
+        grid-gap: 1ch;
+        gap: 1ch;
+        overflow-x: auto;
+        -ms-scroll-snap-type: x mandatory;
+            scroll-snap-type: x mandatory;
+        -ms-scroll-chaining: none;
+            overscroll-behavior: contain;
+        touch-action: pan-x;
+      }
+
+      .user {
+        /* outer */
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
+
+        /* inner */
+        display: grid;
+        grid: [story] 1fr / [story] 1fr;
+      }
+
+      .story {
+        grid-area: story;
+
+        background-size: cover;
+        background-image:
+          var(--bg),
+          linear-gradient(to top, rgb(249, 249, 249), rgb(226, 226, 226));
+
+        -webkit-user-select: none;
+
+          -moz-user-select: none;
+
+            -ms-user-select: none;
+
+                user-select: none;
+        touch-action: manipulation;
+
+        transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1)
+      }
+
+      .story.seen {
+          opacity: 0;
+          pointer-events: none;
+        }
+
+      .github-corner {
+        color: hsl(200, 15%, 93%);
+        fill: hsl(200, 15%, 73%)
+      }
+
+      .github-corner:hover .octo-arm {
+          -webkit-animation: octocat-wave 560ms ease-in-out;
+                  animation: octocat-wave 560ms ease-in-out
+        }
+
+      @-webkit-keyframes octocat-wave{
+        0%,100% {
+          transform: rotate(0)
+        }
+        20%,60% {
+          transform: rotate(-25deg)
+        }
+        40%,80% {
+          transform: rotate(10deg)
+        }
+      }
+
+      @keyframes octocat-wave{
+        0%,100% {
+          transform: rotate(0)
+        }
+        20%,60% {
+          transform: rotate(-25deg)
+        }
+        40%,80% {
+          transform: rotate(10deg)
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stories">
+      <section class="user">
+        <article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>
+        <article class="story" style="--bg: url(https://picsum.photos/480/841);"></article>
+      </section>
+      <section class="user">
+        <article class="story" style="--bg: url(https://picsum.photos/481/840);"></article>
+      </section>
+      <section class="user">
+        <article class="story" style="--bg: url(https://picsum.photos/481/841);"></article>
+      </section>
+      <section class="user">
+        <article class="story" style="--bg: url(https://picsum.photos/482/840);"></article>
+        <article class="story" style="--bg: url(https://picsum.photos/482/843);"></article>
+        <article class="story" style="--bg: url(https://picsum.photos/482/844);"></article>
+      </section>
+    </div>
+
+    {% set script %}
+      var e=document.querySelector(".stories"),t=e.offsetLeft+e.clientWidth/2,n={current_story:e.firstElementChild.lastElementChild};function r(e){var t=n.current_story,r=t.parentNode.firstElementChild,l=t.parentNode.lastElementChild,i=t.parentElement.nextElementSibling,o=t.parentElement.previousElementSibling;"next"===e?(r!==t||i)&&(r===t&&i?(n.current_story=t.parentElement.nextElementSibling.lastElementChild,t.parentElement.nextElementSibling.scrollIntoView({behavior:"smooth"})):(t.classList.add("seen"),n.current_story=t.previousElementSibling)):"prev"!==e||l===t&&!o||(l===t&&o?(n.current_story=t.parentElement.previousElementSibling.firstElementChild,t.parentElement.previousElementSibling.scrollIntoView({behavior:"smooth"})):(t.nextElementSibling.classList.remove("seen"),n.current_story=t.nextElementSibling))}e.addEventListener("click",(function(e){"ARTICLE"===e.target.nodeName&&r(e.clientX>t?"next":"prev")})),document.addEventListener("keydown",(function(e){"ArrowDown"===(e=e.key)&&"ArrowUp"===e||r("ArrowDown"===e?"next":"prev")}));
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/stories/index.md b/src/site/content/en/patterns/components/stories/index.md
new file mode 100644
index 00000000000..bac23fad235
--- /dev/null
+++ b/src/site/content/en/patterns/components/stories/index.md
@@ -0,0 +1,15 @@
+---
+layout: pattern
+title: Stories
+description: |
+  This pattern shows how to build a Stories component for the web that is responsive, supports keyboard navigation, and works across browsers.
+  <br><br>
+  <a href="/building-a-stories-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=PzvdREGR0Xw">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/stories">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to build a Stories component for the web that is
+responsive, supports keyboard navigation, and works across browsers.
+
+<a href="/building-a-stories-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=PzvdREGR0Xw">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/stories">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/svg-favicon/assets/body.html b/src/site/content/en/patterns/components/svg-favicon/assets/body.html
new file mode 100644
index 00000000000..7ce889266a9
--- /dev/null
+++ b/src/site/content/en/patterns/components/svg-favicon/assets/body.html
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428" width="400" height="400">
+  <style>
+    .favicon-stroke {
+      stroke-width: 8px;
+      stroke: #8929ff;
+    }
+    #skull-outline { fill: white }
+    #eyes-and-nose, #hat-outline { fill: #8929ff }
+    #hat-fill, #hat-bill { fill: #e662e6 }
+
+    @media (prefers-color-scheme: dark) {
+      .favicon-stroke { stroke: #343a40 }
+      #skull-outline { fill: #adb5bd }
+      #hat-outline { fill: #343a40 }
+      #eyes-and-nose { fill: #343a40 }
+    }
+  </style>
+  <g id="skull">
+    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
+    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
+    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
+  </g>
+  <g id="hat">
+    <path id="hat-fill" d="m36.27 118.44 2-5.41c.37-1 9.25-24.14 33-47.53 21.83-21.56 60.88-47.26 122.91-47.26C258 18.24 294.8 44 314.46 65.65c21.38 23.52 27.49 46.82 27.74 47.8l1.27 5Z"/>
+    <path id="hat-outline" d="M194.17 22.24c120.68 0 144.15 92.2 144.15 92.2H42.05s34.67-92.2 152.12-92.2m0-8c-27.9 0-53.65 5.07-76.52 15.08a162.3 162.3 0 0 0-49.21 33.33c-24.31 24-33.5 48-33.88 49l-4.07 10.82h318.13l-2.54-10c-.26-1-6.62-25.26-28.66-49.51a140.29 140.29 0 0 0-46.52-33.6c-22.25-10-48.06-15.12-76.73-15.12"/>
+    <path id="hat-bill" class="favicon-stroke" stroke-linecap="square" d="M350.7 117.76c69.17 0 112.9-106.93 57.6-106.93-81 0-95.18 74.6-198.47 106.93M80.32 117.86h267.53"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/svg-favicon/assets/script.js b/src/site/content/en/patterns/components/svg-favicon/assets/script.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/site/content/en/patterns/components/svg-favicon/assets/style.css b/src/site/content/en/patterns/components/svg-favicon/assets/style.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/site/content/en/patterns/components/svg-favicon/demo.njk b/src/site/content/en/patterns/components/svg-favicon/demo.njk
new file mode 100644
index 00000000000..a230c865088
--- /dev/null
+++ b/src/site/content/en/patterns/components/svg-favicon/demo.njk
@@ -0,0 +1,43 @@
+---
+patternId: components/svg-favicon
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:light}@media (prefers-color-scheme: dark){html{color-scheme:dark}}svg{max-inline-size:75vw}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:grid;align-content:center;justify-content:center;place-content:center}.github-corner{fill:#ff1493;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@media (prefers-color-scheme: dark){.github-corner{fill:#6a5acd}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428" width="400" height="400">
+      <style>
+        .favicon-stroke {
+          stroke-width: 8px;
+          stroke: #8929ff;
+        }
+        #skull-outline { fill: white }
+        #eyes-and-nose, #hat-outline { fill: #8929ff }
+        #hat-fill, #hat-bill { fill: #e662e6 }
+
+        @media (prefers-color-scheme: dark) {
+          .favicon-stroke { stroke: #343a40 }
+          #skull-outline { fill: #adb5bd }
+          #hat-outline { fill: #343a40 }
+          #eyes-and-nose { fill: #343a40 }
+        }
+      </style>
+      <g id="skull">
+        <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
+        <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
+        <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
+      </g>
+      <g id="hat">
+        <path id="hat-fill" d="m36.27 118.44 2-5.41c.37-1 9.25-24.14 33-47.53 21.83-21.56 60.88-47.26 122.91-47.26C258 18.24 294.8 44 314.46 65.65c21.38 23.52 27.49 46.82 27.74 47.8l1.27 5Z"/>
+        <path id="hat-outline" d="M194.17 22.24c120.68 0 144.15 92.2 144.15 92.2H42.05s34.67-92.2 152.12-92.2m0-8c-27.9 0-53.65 5.07-76.52 15.08a162.3 162.3 0 0 0-49.21 33.33c-24.31 24-33.5 48-33.88 49l-4.07 10.82h318.13l-2.54-10c-.26-1-6.62-25.26-28.66-49.51a140.29 140.29 0 0 0-46.52-33.6c-22.25-10-48.06-15.12-76.73-15.12"/>
+        <path id="hat-bill" class="favicon-stroke" stroke-linecap="square" d="M350.7 117.76c69.17 0 112.9-106.93 57.6-106.93-81 0-95.18 74.6-198.47 106.93M80.32 117.86h267.53"/>
+      </g>
+    </svg>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/svg-favicon/index.md b/src/site/content/en/patterns/components/svg-favicon/index.md
new file mode 100644
index 00000000000..614ccb66d76
--- /dev/null
+++ b/src/site/content/en/patterns/components/svg-favicon/index.md
@@ -0,0 +1,15 @@
+---
+layout: pattern
+title: SVG Favicon
+description: |
+  This pattern shows how to build an adaptive favicon with SVG.
+  <br><br>
+  <a href="/building-an-adaptive-favicon/">Full article</a> · <a href="https://www.youtube.com/watch?v=4pJahmCR8kQ">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/svg-favicon">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to build a dark and light theme adaptive favicon with
+SVG.
+
+<a href="/building-an-adaptive-favicon/">Full article</a> · <a href="https://www.youtube.com/watch?v=4pJahmCR8kQ">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/svg-favicon">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/switch/assets/body.html b/src/site/content/en/patterns/components/switch/assets/body.html
new file mode 100644
index 00000000000..1633e51cbc5
--- /dev/null
+++ b/src/site/content/en/patterns/components/switch/assets/body.html
@@ -0,0 +1,25 @@
+<label for="switch-1" class="gui-switch">
+  Default
+  <input type="checkbox" role="switch" id="switch-1">
+</label>
+
+<label for="switch-2" class="gui-switch">
+  Indeterminate
+  <input type="checkbox" role="switch" id="switch-2">
+  <script>document.getElementById('switch-2').indeterminate = true</script>
+</label>
+
+<label for="switch-3" class="gui-switch">
+  Disabled
+  <input type="checkbox" role="switch" id="switch-3" disabled>
+</label>
+
+<label for="switch-4" class="gui-switch">
+  Disabled (checked)
+  <input type="checkbox" role="switch" id="switch-4" disabled checked>
+</label>
+
+<label for="switch-vertical" class="gui-switch -vertical">
+  Vertical
+  <input type="checkbox" role="switch" id="switch-vertical">
+</label>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/switch/assets/script.js b/src/site/content/en/patterns/components/switch/assets/script.js
new file mode 100644
index 00000000000..c473bb5e3bf
--- /dev/null
+++ b/src/site/content/en/patterns/components/switch/assets/script.js
@@ -0,0 +1,127 @@
+const elements = document.querySelectorAll('.gui-switch')
+const switches = new WeakMap()
+
+const state = {
+  activethumb: null,
+  recentlyDragged: false,
+}
+
+const getStyle = (element, prop) =>
+  parseInt(
+    window.getComputedStyle(element)
+      .getPropertyValue(prop))
+
+const getPseudoStyle = (element, prop) =>
+  parseInt(
+    window.getComputedStyle(element, ':before')
+      .getPropertyValue(prop))
+
+const dragInit = event => {
+  if (event.target.disabled) return
+
+  state.activethumb = event.target
+  state.activethumb.addEventListener('pointermove', dragging)
+  state.activethumb.style.setProperty('--thumb-transition-duration', '0s')
+}
+
+const dragging = event => {
+  if (!state.activethumb) return
+
+  let {thumbsize, bounds, padding} = switches.get(state.activethumb.parentElement)
+  let directionality = getStyle(state.activethumb, '--isLTR')
+
+  let track = (directionality === -1)
+    ? (state.activethumb.clientWidth * -1) + thumbsize + padding
+    : 0
+
+  let pos = Math.round(event.offsetX - thumbsize / 2)
+
+  if (pos < bounds.lower) pos = 0
+  if (pos > bounds.upper) pos = bounds.upper
+
+  state.activethumb.style.setProperty('--thumb-position', `${track + pos}px`)
+}
+
+const dragEnd = event => {
+  if (!state.activethumb) return
+
+  state.activethumb.checked = determineChecked()
+
+  if (state.activethumb.indeterminate)
+    state.activethumb.indeterminate = false
+
+  state.activethumb.style.removeProperty('--thumb-transition-duration')
+  state.activethumb.style.removeProperty('--thumb-position')
+  state.activethumb.removeEventListener('pointermove', dragging)
+  state.activethumb = null
+
+  padRelease()
+}
+
+const padRelease = () => {
+  state.recentlyDragged = true
+
+  setTimeout(_ => {
+    state.recentlyDragged = false
+  }, 300)
+}
+
+const preventBubbles = event => {
+  if (state.recentlyDragged)
+    event.preventDefault() && event.stopPropagation()
+}
+
+const labelClick = event => {
+  if (
+    state.recentlyDragged || 
+    !event.target.classList.contains('gui-switch') || 
+    event.target.querySelector('input').disabled
+  ) return
+
+  let checkbox = event.target.querySelector('input')
+  checkbox.checked = !checkbox.checked
+  event.preventDefault()
+}
+
+const determineChecked = () => {
+  let {bounds} = switches.get(state.activethumb.parentElement)
+  let curpos = 
+    Math.abs(
+      parseInt(
+        state.activethumb.style.getPropertyValue('--thumb-position')))
+
+  if (!curpos) {
+    curpos = state.activethumb.checked
+      ? bounds.lower
+      : bounds.upper
+  }
+
+  return curpos >= bounds.middle
+}
+
+elements.forEach(guiswitch => {
+  let checkbox = guiswitch.querySelector('input')
+  let thumbsize = getPseudoStyle(checkbox, 'width')
+  let padding = getStyle(checkbox, 'padding-left') + getStyle(checkbox, 'padding-right')
+
+  checkbox.addEventListener('pointerdown', dragInit)
+  checkbox.addEventListener('pointerup', dragEnd)
+  checkbox.addEventListener('click', preventBubbles)
+  guiswitch.addEventListener('click', labelClick)
+
+  switches.set(guiswitch, {
+    thumbsize,
+    padding,
+    bounds: {
+      lower: 0,
+      middle: (checkbox.clientWidth - padding) / 4,
+      upper: checkbox.clientWidth - thumbsize - padding,
+    },
+  })
+})
+
+window.addEventListener('pointerup', event => {
+  if (!state.activethumb) return
+
+  dragEnd(event)
+})
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/switch/assets/style.css b/src/site/content/en/patterns/components/switch/assets/style.css
new file mode 100644
index 00000000000..2aecd997492
--- /dev/null
+++ b/src/site/content/en/patterns/components/switch/assets/style.css
@@ -0,0 +1,122 @@
+.gui-switch {
+  --thumb-size: 2rem;
+  --thumb: hsl(0 0% 100%);
+  --thumb-highlight: hsl(0 0% 0% / 25%);
+  
+  --track-size: calc(var(--thumb-size) * 2);
+  --track-padding: 2px;
+  --track-inactive: hsl(80 0% 80%);
+  --track-active: hsl(80 60% 45%);
+
+  --thumb-color: var(--thumb);
+  --thumb-color-highlight: var(--thumb-highlight);
+  --track-color-inactive: var(--track-inactive);
+  --track-color-active: var(--track-active);
+
+  --isLTR: 1;
+
+  display: flex;
+  align-items: center;
+  gap: 2ch;
+  justify-content: space-between;
+
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  @media (prefers-color-scheme: dark) {
+    --thumb: hsl(0 0% 5%);
+    --thumb-highlight: hsl(0 0% 100% / 25%);
+    --track-inactive: hsl(80 0% 35%);
+    --track-active: hsl(80 60% 60%);
+  }
+
+  &:dir(rtl) {
+    --isLTR: -1;
+  }
+
+  &.-vertical {
+    min-block-size: calc(var(--track-size) + calc(var(--track-padding) * 2));
+
+    & > input {
+      transform: rotate(calc(90deg * var(--isLTR) * -1));
+      touch-action: pan-x;
+    }
+  }
+
+  & > input {
+    --thumb-position: 0%;
+    --thumb-transition-duration: .25s;
+    
+    padding: var(--track-padding);
+    background: var(--track-color-inactive);
+    inline-size: var(--track-size);
+    block-size: var(--thumb-size);
+    border-radius: var(--track-size);
+
+    appearance: none;
+    pointer-events: none;
+    touch-action: pan-y;
+    border: none;
+    outline-offset: 5px;
+    box-sizing: content-box;
+
+    flex-shrink: 0;
+    display: grid;
+    align-items: center;
+    grid: [track] 1fr / [track] 1fr;
+
+    transition: background-color .25s ease;
+
+    &::before {
+      --highlight-size: 0;
+
+      content: "";
+      cursor: pointer;
+      pointer-events: auto;
+      grid-area: track;
+      inline-size: var(--thumb-size);
+      block-size: var(--thumb-size);
+      background: var(--thumb-color);
+      box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
+      border-radius: 50%;
+      transform: translateX(var(--thumb-position));
+
+      @media (--motionOK) { & {
+        transition: 
+          transform var(--thumb-transition-duration) ease,
+          box-shadow .25s ease;
+      }}
+    }
+
+    &:not(:disabled):hover::before {
+      --highlight-size: .5rem;
+    }
+
+    &:checked {
+      background: var(--track-color-active);
+      --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
+    }
+
+    &:indeterminate {
+      --thumb-position: calc(
+        calc(calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2))
+        * var(--isLTR)
+      );
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      --thumb-color: transparent;
+
+      &::before {
+        cursor: not-allowed;
+        box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 50%);
+
+        @media (prefers-color-scheme: dark) {
+          box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/switch/demo.njk b/src/site/content/en/patterns/components/switch/demo.njk
new file mode 100644
index 00000000000..75d481040ec
--- /dev/null
+++ b/src/site/content/en/patterns/components/switch/demo.njk
@@ -0,0 +1,33 @@
+---
+patternId: components/switch
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta name="theme-color" content="deeppink" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{box-sizing:border-box;margin:0}html{--brand-hue:200;--brand-saturation:100%;--brand-lightness:50%;--brand-light:hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));--text1-light:hsl(var(--brand-hue) var(--brand-saturation) 10%);--surface1-light:hsl(var(--brand-hue) 25% 100%);--brand-dark:hsl( var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5) );--text1-dark:hsl(var(--brand-hue) 15% 85%);--surface1-dark:hsl(var(--brand-hue) 10% 10%)}:root{--brand:var(--brand-light);--text1:var(--text1-light);--surface1:var(--surface1-light)}@media (prefers-color-scheme:dark){:root{--brand:var(--brand-dark);--text1:var(--text1-dark);--surface1:var(--surface1-dark)}}html{block-size:100%;background-color:var(--surface1);color:var(--text1)}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:grid;align-content:center;justify-content:center;place-content:center;padding:5ch}body>main{display:grid;grid-auto-columns:min(35ch,100%);gap:5ch 20ch;align-items:start;align-content:center;justify-content:center}@media (min-width:720px){body>main{grid-auto-flow:column;grid-auto-columns:30ch}}section{display:grid;gap:2ch;align-items:flex-start}.gui-switch{--thumb-size:2rem;--thumb:hsl(0, 0%, 100%);--thumb-highlight:hsla(0, 0%, 0%, 0.25);--track-size:calc(var(--thumb-size) * 2);--track-padding:2px;--track-inactive:hsl(80, 0%, 80%);--track-active:hsl(80, 60%, 45%);--thumb-color:var(--thumb);--thumb-color-highlight:var(--thumb-highlight);--track-color-inactive:var(--track-inactive);--track-color-active:var(--track-active);--isLTR:1;display:flex;align-items:center;gap:2ch;justify-content:space-between;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}@media (prefers-color-scheme:dark){.gui-switch{--thumb:hsl(0, 0%, 5%);--thumb-highlight:hsla(0, 0%, 100%, 0.25);--track-inactive:hsl(80, 0%, 35%);--track-active:hsl(80, 60%, 60%)}}.gui-switch:dir(rtl){--isLTR:-1}.gui-switch.-vertical{min-block-size:calc(var(--track-size) + calc(var(--track-padding) * 2))}.gui-switch.-vertical>input{transform:rotate(calc(90deg * var(--isLTR) * -1));touch-action:pan-x}.gui-switch>input{--thumb-position:0%;--thumb-transition-duration:.25s;padding:var(--track-padding);background:var(--track-color-inactive);inline-size:var(--track-size);block-size:var(--thumb-size);border-radius:var(--track-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;touch-action:pan-y;border:none;outline-offset:5px;box-sizing:content-box;flex-shrink:0;display:grid;align-items:center;grid:[track] 1fr/[track] 1fr;transition:background-color .25s ease}.gui-switch>input::before{--highlight-size:0;content:"";cursor:pointer;pointer-events:auto;grid-area:track;inline-size:var(--thumb-size);block-size:var(--thumb-size);background:var(--thumb-color);box-shadow:0 0 0 var(--highlight-size) var(--thumb-color-highlight);border-radius:50%;transform:translateX(var(--thumb-position))}@media (prefers-reduced-motion:no-preference){.gui-switch>input::before{transition:transform var(--thumb-transition-duration) ease,box-shadow .25s ease}}.gui-switch>input:not(:disabled):hover::before{--highlight-size:.5rem}.gui-switch>input:checked{background:var(--track-color-active);--thumb-position:calc((var(--track-size) - 100%) * var(--isLTR))}.gui-switch>input:indeterminate{--thumb-position:calc(
+        calc(calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2))
+        * var(--isLTR)
+      )}.gui-switch>input:disabled{cursor:not-allowed;--thumb-color:transparent}.gui-switch>input:disabled::before{cursor:not-allowed;box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.5)}@media (prefers-color-scheme:dark){.gui-switch>input:disabled::before{box-shadow:inset 0 0 0 2px hsla(0,0%,0%,.5)}}.github-corner{fill:var(--text1);color:var(--surface1)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+     <main>
+      <section>
+        <label for="switch-1" class="gui-switch">
+          Default
+          <input type="checkbox" role="switch" id="switch-1">
+        </label>
+      </section>
+    </main>
+
+    {% set script %}
+      const e=(e,t)=>parseInt(window.getComputedStyle(e).getPropertyValue(t)),t=document.querySelectorAll(".gui-switch"),i=new WeakMap,r={activethumb:null,recentlyDragged:!1},n=e=>{e.target.disabled||(r.activethumb=e.target,r.activethumb.addEventListener("pointermove",a),r.activethumb.style.setProperty("--thumb-transition-duration","0s"))},a=t=>{if(!r.activethumb)return;let{thumbsize:n,bounds:a,padding:u}=i.get(r.activethumb.parentElement),d=-1===e(r.activethumb,"--isLTR")?-1*r.activethumb.clientWidth+n+u:0,o=Math.round(t.offsetX-n/2);o<a.lower&&(o=0),o>a.upper&&(o=a.upper),r.activethumb.style.setProperty("--thumb-position",`${d+o}px`)},u=e=>{r.activethumb&&(r.activethumb.checked=l(),r.activethumb.indeterminate&&(r.activethumb.indeterminate=!1),r.activethumb.style.removeProperty("--thumb-transition-duration"),r.activethumb.style.removeProperty("--thumb-position"),r.activethumb.removeEventListener("pointermove",a),r.activethumb=null,d())},d=()=>{r.recentlyDragged=!0,setTimeout((e=>{r.recentlyDragged=!1}),300)},o=e=>{r.recentlyDragged&&e.preventDefault()&&e.stopPropagation()},c=e=>{if(r.recentlyDragged||!e.target.classList.contains("gui-switch")||e.target.querySelector("input").disabled)return;let t=e.target.querySelector("input");t.checked=!t.checked,e.preventDefault()},l=()=>{let{bounds:e}=i.get(r.activethumb.parentElement),t=Math.abs(parseInt(r.activethumb.style.getPropertyValue("--thumb-position")));return t||(t=r.activethumb.checked?e.lower:e.upper),t>=e.middle};t.forEach((t=>{let r=t.querySelector("input"),a=(d=r,l="width",parseInt(window.getComputedStyle(d,":before").getPropertyValue(l)));var d,l;let p=e(r,"padding-left")+e(r,"padding-right");r.addEventListener("pointerdown",n),r.addEventListener("pointerup",u),r.addEventListener("click",o),t.addEventListener("click",c),i.set(t,{thumbsize:a,padding:p,bounds:{lower:0,middle:(r.clientWidth-p)/4,upper:r.clientWidth-a-p}})})),window.addEventListener("pointerup",(e=>{r.activethumb&&u()}));
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/switch/index.md b/src/site/content/en/patterns/components/switch/index.md
new file mode 100644
index 00000000000..ed3d54e1a10
--- /dev/null
+++ b/src/site/content/en/patterns/components/switch/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Switch
+description: |
+  This pattern shows how to create a responsive, adaptive and accessible switch component.
+  <br><br>
+  <a href="/building-a-switch-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=_KqccADghcA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/switch">Source on Github</a>
+date: 2022-06-01
+height: 400
+---
+
+This pattern shows how to create a responsive, adaptive and accessible switch component.
+
+<a href="/building-a-switch-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=_KqccADghcA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/switch">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/tabs/assets/body.html b/src/site/content/en/patterns/components/tabs/assets/body.html
new file mode 100644
index 00000000000..879378d0926
--- /dev/null
+++ b/src/site/content/en/patterns/components/tabs/assets/body.html
@@ -0,0 +1,25 @@
+<snap-tabs>
+  <header class="scroll-snap-x"> 
+    <nav>
+      <a active href="#responsive">Responsive</a>
+      <a href="#accessible">Accessible</a>
+      <a href="#overscroll">Horizontal Overscroll Ready</a>
+      <a href="#more"><!-- ...SVG icon --></a>
+    </nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section class="scroll-snap-x">
+    <article id="responsive">
+      <!-- ...content -->
+    </article>
+    <article id="accessible">
+      <!-- ...content -->
+    </article>
+    <article id="overscroll">
+      <!-- ...content -->
+    </article>
+    <article id="more">
+      <!-- ...content -->
+    </article>
+  </section>
+</snap-tabs>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/tabs/assets/script.js b/src/site/content/en/patterns/components/tabs/assets/script.js
new file mode 100644
index 00000000000..44889a653bd
--- /dev/null
+++ b/src/site/content/en/patterns/components/tabs/assets/script.js
@@ -0,0 +1,90 @@
+import 'https://argyleink.github.io/scroll-timeline/dist/scroll-timeline.js'
+
+const {matches:motionOK} = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+)
+
+// grab and stash elements
+const tabgroup     = document.querySelector('snap-tabs')
+const tabsection   = tabgroup.querySelector(':scope > section')
+const tabnav       = tabgroup.querySelector(':scope nav')
+const tabnavitems  = tabnav.querySelectorAll(':scope a')
+const tabindicator = tabgroup.querySelector(':scope .snap-indicator')
+
+/* 
+  shared timeline for .indicator 
+  and nav > a colors */
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,
+  orientation: 'inline',
+  fill: 'both',
+})
+
+/*
+  for each nav link
+  - animate color based on the scroll timeline
+  - color is active when its the current index*/
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item => 
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill:     'both',
+      timeline: sectionScrollTimeline,
+    }
+  )
+})
+
+if (motionOK) {
+  tabindicator.animate({ 
+      transform: [...tabnavitems].map(({offsetLeft}) => 
+        `translateX(${offsetLeft}px)`),
+      width: [...tabnavitems].map(({offsetWidth}) => 
+        `${offsetWidth}px`)
+    }, {
+      duration: 1000,
+      fill:     'both',
+      timeline: sectionScrollTimeline,
+    }
+  )
+}
+
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active')
+  
+  tabbtn.setAttribute('active', '')
+  tabbtn.scrollIntoView()
+}
+ 
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth
+  const matchingNavItem = tabnavitems[i]
+  
+  matchingNavItem && setActiveTab(matchingNavItem)
+}
+
+tabnav.addEventListener('click', e => {
+  if (e.target.nodeName !== "A") return
+  setActiveTab(e.target)
+})
+
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer)               
+  tabsection.scrollEndTimer = setTimeout(
+    determineActiveTabSection
+  , 100)
+})
+
+window.onload = () => {
+  if (location.hash)
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft
+    
+  determineActiveTabSection()
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/tabs/assets/style.css b/src/site/content/en/patterns/components/tabs/assets/style.css
new file mode 100644
index 00000000000..5a53bf4e2f5
--- /dev/null
+++ b/src/site/content/en/patterns/components/tabs/assets/style.css
@@ -0,0 +1,130 @@
+snap-tabs {
+  --hue: 328deg;
+  --accent: var(--hue) 100% 54%;
+  --indicator-size: 2px;
+
+  --space-1: .5rem;
+  --space-2: 1rem;
+  --space-3: 1.5rem;
+  
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+  position: relative;
+
+  & :matches(header, nav, section, article, a) {
+    outline-color: hsl(var(--accent));
+    outline-offset: -5px;
+  }
+}
+
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+  
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+
+snap-tabs > header {
+  --text-color: hsl(var(--hue) 5% 40%);
+  --text-active-color: hsl(var(--hue) 20% 10%);
+
+  flex-shrink: 0;
+  min-block-size: fit-content;
+
+  display: flex;
+  flex-direction: column;
+
+  & > nav {
+    display: flex;
+  }
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+
+    font-size: .8rem;
+    color: var(--text-color);
+    font-weight: bold;
+    text-decoration: none;
+    padding: var(--space-2) var(--space-3);
+
+    & > svg {
+      inline-size: 1.5em;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background: hsl(var(--accent) / 5%);
+    }
+
+    &:focus {
+      outline-offset: -.5ch;
+    }
+  }
+
+  & > .snap-indicator {
+    inline-size: 0;
+    block-size: var(--indicator-size);
+    border-radius: var(--indicator-size);
+    background: hsl(var(--accent));
+  }
+}
+
+snap-tabs > section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+
+  & > article {
+    scroll-snap-align: start;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+
+    padding: var(--space-2) var(--space-3);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* 
+    - swap to border-bottom styles
+    - transition colors
+    - hide the animated .indicator 
+  */
+
+  snap-tabs {
+    & > header a {
+      border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+      transition:
+        color .7s ease,
+        border-color .5s ease;
+
+      &:matches(:target,:active,[active]) {
+        color: var(--text-active-color);
+        border-block-end-color: hsl(var(--accent));
+      }
+    }
+
+    & .snap-indicator {
+      visibility: hidden;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/tabs/demo.njk b/src/site/content/en/patterns/components/tabs/demo.njk
new file mode 100644
index 00000000000..21cea1bbf49
--- /dev/null
+++ b/src/site/content/en/patterns/components/tabs/demo.njk
@@ -0,0 +1,97 @@
+---
+patternId: components/tabs
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/blokk/blokk.css">
+    <style>
+      html {
+        color-scheme: light;
+        background: white;
+        color: black;
+      }
+      .device{display:flex;flex-direction:column;inline-size:300px;block-size:500px;border-radius:1ch;overflow:hidden;resize:both;border:1px solid #f2f2f2;box-shadow:0 2.9px 1.4px rgba(0,0,0,.018),0 6.8px 3.3px rgba(0,0,0,.026),0 12.3px 5.9px rgba(51,0,27,.032),0 20.4px 9.8px rgba(51,0,27,.038),0 33.6px 16.1px rgba(51,0,27,.044),0 58.7px 28.2px rgba(0,0,0,.052),0 127px 61px rgba(0,0,0,.07)}.device>nav{padding:1.5rem 1.5rem 1rem}.device>nav>svg{width:1.25rem}.device>.tabs{flex:1}snap-tabs{--hue:328deg;--accent:var(--hue) 100% 54%;--indicator-size:2px;--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;display:flex;flex-direction:column;overflow:hidden;position:relative}snap-tabs a,snap-tabs article,snap-tabs header,snap-tabs nav,snap-tabs section{outline-color:hsl(var(--accent));outline-offset:-5px}.scroll-snap-x{overflow-x:auto;overflow-y:hidden;overflow:auto hidden;overscroll-behavior-x:contain;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}@media (prefers-reduced-motion:no-preference){.scroll-snap-x{scroll-behavior:smooth}}@media (hover:none){.scroll-snap-x{scrollbar-width:none}.scroll-snap-x::-webkit-scrollbar{width:0;height:0}}snap-tabs>header{--text-color:hsl(var(--hue) 5% 40%);--text-active-color:hsl(var(--hue) 20% 10%);flex-shrink:0;min-block-size:-webkit-fit-content;min-block-size:-moz-fit-content;min-block-size:fit-content;display:flex;flex-direction:column}snap-tabs>header>nav{display:flex}snap-tabs>header a{scroll-snap-align:start;display:inline-flex;align-items:center;white-space:nowrap;font-size:.8rem;color:var(--text-color);font-weight:700;text-decoration:none;padding:var(--space-2) var(--space-3)}snap-tabs>header a>svg{inline-size:1.5em;pointer-events:none}snap-tabs>header a:hover{background:hsl(var(--accent)/5%)}snap-tabs>header a:focus{outline-offset:-.5ch}snap-tabs>header>.snap-indicator{inline-size:0;block-size:var(--indicator-size);border-radius:var(--indicator-size);background:hsl(var(--accent))}snap-tabs>section{block-size:100%;display:grid;grid-auto-flow:column;grid-auto-columns:100%}snap-tabs>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--space-2) var(--space-3)}@media (prefers-reduced-motion:reduce){snap-tabs>header a{-webkit-border-after:var(--indicator-size) solid hsl(var(--accent)/0%);border-block-end:var(--indicator-size) solid hsl(var(--accent)/0%);transition:color .7s ease,border-color .5s ease}snap-tabs>header a:active,snap-tabs>header a:target,snap-tabs>header a[active]{color:var(--text-active-color);border-block-end-color:hsl(var(--accent))}snap-tabs .snap-indicator{visibility:hidden}}html{block-size:100%;inline-size:100%}body{min-block-size:100%;min-inline-size:100%;margin:0;box-sizing:border-box;display:grid;align-content:center;justify-content:center;place-content:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}p{max-inline-size:35ch;margin-block:.5ch}p+p{-webkit-margin-before:1rem;margin-block-start:1rem}h2{font-size:2.5rem;-webkit-margin-after:.5rem;margin-block-end:.5rem;line-height:1}h2:first-of-type{-webkit-margin-before:0;margin-block-start:0}article{box-sizing:border-box;font-family:Blokk;font-size:1.25rem;line-height:1;color:#333}.github-corner{fill:#ccc;color:#fff}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+     <div class="device">
+      <nav>
+        <svg fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+        </svg>
+      </nav>
+      <snap-tabs>
+        <header class="scroll-snap-x">
+          <nav>
+            <a active href="#responsive">Responsive</a>
+            <a href="#accessible">Accessible</a>
+            <a href="#overscroll">Horizontal Overscroll Ready</a>
+            <a href="#more">
+              <svg fill="currentColor" viewBox="0 0 20 20" role="presentation" focusable="false">
+                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+                </svg>
+            </a>
+          </nav>
+          <span class="snap-indicator"></span>
+        </header>
+        <section class="scroll-snap-x">
+          <article id="responsive">
+            <h2>Sit dolor</h2>
+            <p>Lorem ipsum dolor sit amet consectet adipisicing elit</p>
+            <h2>Lore sf</h2>
+            <p>Lorem ipsum dolor sit amet consectet adipisicing elit</p>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+            <p>Ipsum, a? Tenetur aut a nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <p>nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+            <p>Ipsum, a? Tenetur aut a nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <p>nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+          </article>
+          <article id="accessible">
+            <h2>Tenetur</h2>
+            <p>Lorem ipsum dolor sit amet consectet adipisicing elit. Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+            <h2>Tenet urs</h2>
+            <p>Ipsum, a? Tenetur aut a nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <p>nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <h2>Lore s sdf</h2>
+            <p>Lorem ipsum dolor sit amet consectet adipisicing elit</p>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+            <p>Ipsum, a? Tenetur aut a nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+            <p>nisi, aspernatur earum eligendi id quam nihil sint quas?</p>
+          </article>
+          <article id="overscroll">
+            <h2>Lorems dolor</h2>
+            <p>Lorem ipsum dolor sit amet consectet adipisicing elit</p>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+            <p>nisi, aspernatur earum eligendi id quam nihil sint quas?</p><ul>
+              <li>Lorem</li>
+              <li>ipsum</li>
+              <li>dolor</li>
+            </ul>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+          </article>
+          <article id="more">
+            <h2>Lore s sdf</h2>
+            <ul>
+              <li>Lorem</li>
+              <li>ipsum</li>
+              <li>dolor</li>
+              <li>Lorem</li>
+              <li>ipsum</li>
+              <li>dolor</li>
+            </ul>
+            <p>Sit molestiae itaque rem optio molestias voluptati obcaecati!</p>
+          </article>
+        </section>
+      </snap-tabs>
+    </div>
+
+    {% set script %}
+      function t(t){var n=Array.isArray(t)?e(t):void 0;if(n||(n="undefined"!=typeof Symbol&&Symbol.iterator in Object(t)?Array.from(t):void 0),!n)t:{if(t){if("string"==typeof t){n=e(t,void 0);break t}if("Object"===(n=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n){n=Array.from(n);break t}if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)){n=e(t,void 0);break t}}n=void 0}if(!(t=n))throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");return t}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}!function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function e(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function n(t){return(t=t.trim().match(/^(-?[0-9]*\.?[0-9]*)(px|%)$/))?{value:t[1],unit:t[2]}:null}function r(t){return t===document.scrollingElement?document:t}function o(t){var e=a.get(t).animations;if(0!==e.length){t=t.currentTime;for(var n=0;n<e.length;n++)null==t?"paused"===e[n].playState&&e[n].cancel():e[n].currentTime=t}}function i(t){return 1/0===t.iterationCount?1/0:Math.max((t.startDelay||0)+(t.duration||0)*(t.iterationCount||1)+(t.endDelay||0),0)}function l(t,e,r,o,i){return i?i(e,r,o,"0%"===t?"start":"end"):("block"===r?r="vertical":"inline"===r&&(r="horizontal"),e="vertical"===r?e.scrollHeight-e.clientHeight:e.scrollWidth-e.clientWidth,"%"===(t=n("auto"===o?t:o)).unit?parseFloat(t.value)*e/100:parseFloat(t.value))}var a=new WeakMap,c=[],s=function(){function t(t){a.set(this,{scrollSource:null,orientation:"block",startScrollOffset:"auto",endScrollOffset:"auto",timeRange:"auto",fill:"none",animations:[],animationOptions:[]}),this.scrollSource=t&&t.scrollSource||document.scrollingElement,this.orientation=t&&t.orientation||"block",this.startScrollOffset=t&&t.startScrollOffset||"auto",this.endScrollOffset=t&&t.endScrollOffset||"auto",this.timeRange=t&&t.timeRange||"auto",this.fill=t&&t.fill||"none"}return e(t,[{key:"scrollSource",set:function(t){var e=this;this.scrollSource&&r(this.scrollSource).removeEventListener("scroll",(function(){return o(e)})),t instanceof Element||(t=document.scrollingElement),a.get(this).scrollSource=t,r(t).addEventListener("scroll",(function(){return o(e)})),o(this)},get:function(){return a.get(this).scrollSource}},{key:"orientation",set:function(t){-1===["block","inline","horizontal","vertical"].indexOf(t)&&(t="block"),a.get(this).orientation=t,o(this)},get:function(){return a.get(this).orientation}},{key:"startScrollOffset",set:function(t){var e=a.get(this);e.startScrollOffsetFunction=null;for(var n=0;n<c.length;n++){var r=c[n].parse(t);if(void 0!==r){t=r,e.startScrollOffsetFunction=c[n].evaluate;break}}e.startScrollOffset=t,o(this)},get:function(){return a.get(this).startScrollOffset}},{key:"endScrollOffset",set:function(t){a.get(this).endScrollOffsetFunction=null;for(var e=0;e<c.length;e++){var n=c[e].parse(t);if(void 0!==n){t=n,a.get(this).endScrollOffsetFunction=c[e].evaluate;break}}a.get(this).endScrollOffset=t,o(this)},get:function(){return a.get(this).endScrollOffset}},{key:"timeRange",set:function(t){a.get(this).timeRange=t,o(this)},get:function(){return a.get(this).timeRange}},{key:"currentTime",get:function(){if(!this.scrollSource)return null;var t,e,n=l("0%",this.scrollSource,this.orientation,this.startScrollOffset,a.get(this).startScrollOffsetFunction),r=l("100%",this.scrollSource,this.orientation,this.endScrollOffset,a.get(this).endScrollOffsetFunction),o=this.timeRange;if("auto"===o){o=0;for(var c=a.get(this).animationOptions,s=0;s<c.length;s++)o=Math.max(o,i(c[s]));1/0===o&&(o=0)}return c=this.scrollSource.scrollTop,"inline"!==this.orientation&&"horizontal"!==this.orientation||(c=this.scrollSource.scrollLeft),c<n?"none"===this.fill||"forwards"===this.fill?null:0:c>=r?r<(t=this.scrollSource,"block"===(e=this.orientation)?e="vertical":"inline"===e&&(e="horizontal"),"vertical"===e?t.scrollHeight-t.clientHeight:"horizontal"===e?t.scrollWidth-t.clientWidth:void 0)&&("none"===this.fill||"backwards"===this.fill)?null:o:(c-n)/(r-n)*o}},{key:"__polyfill",get:function(){return!0}}]),t}(),u=new WeakMap,f=[[[0,1,2,3]],[[0,2],[1,3]],[[0],[1,3],[2]],[[0],[1],[2],[3]]],h=function(){function t(t){u.set(this,{target:null,edge:"start",threshold:0,rootMargin:[[0,"px"],[0,"px"],[0,"px"],[0,"px"]]}),this.target=t.target,this.edge=t.edge||"start",this.threshold=t.threshold||0,this.rootMargin=t.rootMargin||"0px 0px 0px 0px",this.clamp=t.clamp||!1}return e(t,[{key:"target",set:function(t){if(!(t instanceof Element))throw u.get(this).target=null,Error("Intersection target must be an element.");u.get(this).target=t},get:function(){return u.get(this).target}},{key:"edge",set:function(t){-1!=["start","end"].indexOf(t)&&(u.get(this).edge=t)},get:function(){return u.get(this).edge}},{key:"threshold",set:function(t){if(0>(t=parseFloat(t))||1<t)throw RangeError("threshold must be in the range [0, 1]");u.get(this).threshold=t},get:function(){return u.get(this).threshold}},{key:"rootMargin",set:function(t){if(1>(t=t.split(/ +/)).length||4<t.length)throw TypeError("rootMargin must contain between 1 and 4 length components");for(var e=[[],[],[],[]],r=0;r<t.length;r++){var o=n(t[r]);if(!o)throw TypeError("Unrecognized rootMargin length");for(var i=f[t.length-1][r],l=0;l<i.length;l++)e[i[l]]=[parseFloat(o.value),o.unit]}u.get(this).rootMargin=e},get:function(){return u.get(this).rootMargin.map((function(t){return t.join("")})).join(" ")}},{key:"clamp",set:function(t){u.get(this).clamp=!!t}}]),t}(),g=window.Element.prototype.animate;if(c.push({parse:function(t){if(t.target)return new h(t)},evaluate:function(t,e,n){"block"==e?e="vertical":"inline"==e&&(e="horizontal");for(var r,o=t==document.scrollingElement?{left:0,right:t.clientWidth,top:0,bottom:t.clientHeight,width:t.clientWidth,height:t.clientHeight}:t.getBoundingClientRect(),i=u.get(n).rootMargin,l=[],a=0;4>a;a++)l.push("%"==(r=i[a])[1]?r[0]*(0==a%2?o.height:o.width)/100:r[0]);i=o.left-l[3],r=o.right-o.left+l[3]+l[1],a=o.top-l[0],l=o.bottom-o.top+l[0]+l[2],o=u.get(n).clamp;var c=n.target.getBoundingClientRect(),s=n.threshold;return"start"==n.edge&&(s=1-s),"vertical"==e?(e=c.top+c.height*s-a+t.scrollTop,o?"end"==n.edge?Math.max(0,e-l):Math.min(e,t.scrollHeight-l):"end"==n.edge?e-l:e):(e=c.left+c.width*s-i+t.scrollLeft,o?"end"==n.edge?Math.max(0,e-r):Math.min(e,t.scrollWidth-r):"end"==n.edge?e-r:e)}}),!Reflect.defineProperty(window,"ScrollTimeline",{value:s}))throw Error("Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window");if(!Reflect.defineProperty(Element.prototype,"animate",{value:function(t,e){var n=e.timeline;if(!(n&&n instanceof s))return g.apply(this,[t,e]);delete e.timeline,(t=g.apply(this,[t,e])).pause();var r=a.get(n).animations,i=a.get(n).animationOptions;return r.push(t),i.push(e),o(n),t}}))throw Error("Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element")}();var n=window.matchMedia("(prefers-reduced-motion: no-preference)").matches,r=document.querySelector("snap-tabs"),o=r.querySelector(":scope > section"),i=r.querySelector(":scope nav"),l=i.querySelectorAll(":scope a"),a=r.querySelector(":scope .snap-indicator"),c=new ScrollTimeline({scrollSource:o,orientation:"inline",fill:"both"});function s(t){i.querySelector(":scope a[active]").removeAttribute("active"),t.setAttribute("active",""),t.scrollIntoView()}function u(){var t=l[o.scrollLeft/o.clientWidth];t&&s(t)}l.forEach((function(e){e.animate({color:t(l).map((function(t){return t===e?"var(--text-active-color)":"var(--text-color)"}))},{duration:1e3,fill:"both",timeline:c})})),n&&a.animate({transform:t(l).map((function(t){return"translateX(".concat(t.offsetLeft,"px)")})),width:t(l).map((function(t){return"".concat(t.offsetWidth,"px")}))},{duration:1e3,fill:"both",timeline:c}),i.addEventListener("click",(function(t){"A"===t.target.nodeName&&s(t.target)})),o.addEventListener("scroll",(function(){clearTimeout(o.scrollEndTimer),o.scrollEndTimer=setTimeout(u,100)})),window.onload=function(){location.hash&&(o.scrollLeft=document.querySelector(location.hash).offsetLeft),u()};
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/tabs/index.md b/src/site/content/en/patterns/components/tabs/index.md
new file mode 100644
index 00000000000..29f059e2699
--- /dev/null
+++ b/src/site/content/en/patterns/components/tabs/index.md
@@ -0,0 +1,16 @@
+---
+layout: pattern
+title: Tabs
+description: |
+  This pattern shows how to create a tab component with grid and scroll snap points.
+  <br><br>
+  Note: this component uses a polyfill for <a href="https://github.com/flackr/scroll-timeline">Scroll Timeline</a> to create the scroll linked animation underline.
+  <br><br>
+  <a href="/building-a-tabs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=mMBcHcvxuuA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/tabs">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to create a tab component with grid and scroll snap points.
+
+<a href="/building-a-tabs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=mMBcHcvxuuA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/tabs">Source on Github</a>
diff --git a/src/site/content/en/patterns/components/toast/assets/body.html b/src/site/content/en/patterns/components/toast/assets/body.html
new file mode 100644
index 00000000000..053fdec623c
--- /dev/null
+++ b/src/site/content/en/patterns/components/toast/assets/body.html
@@ -0,0 +1,6 @@
+<button id="spells">
+  Cast Spell
+</button>
+<button id="actions">
+  Mock User Action
+</button>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/toast/assets/script.js b/src/site/content/en/patterns/components/toast/assets/script.js
new file mode 100644
index 00000000000..0cdd1c91949
--- /dev/null
+++ b/src/site/content/en/patterns/components/toast/assets/script.js
@@ -0,0 +1,72 @@
+const init = () => {
+  const node = document.createElement('section')
+  node.classList.add('gui-toast-group')
+
+  document.firstElementChild.insertBefore(node, document.body)
+  return node
+}
+
+const createToast = text => {
+  const node = document.createElement('output')
+  
+  node.innerText = text
+  node.classList.add('gui-toast')
+  node.setAttribute('role', 'status')
+  node.setAttribute('aria-live', 'polite')
+
+  return node
+}
+
+const addToast = toast => {
+  const { matches:motionOK } = window.matchMedia(
+    '(prefers-reduced-motion: no-preference)'
+  )
+
+  Toaster.children.length && motionOK
+    ? flipToast(toast)
+    : Toaster.appendChild(toast)
+}
+
+const Toast = text => {
+  let toast = createToast(text)
+  addToast(toast)
+
+  return new Promise(async (resolve, reject) => {
+    await Promise.allSettled(
+      toast.getAnimations().map(animation => 
+        animation.finished
+      )
+    )
+    Toaster.removeChild(toast)
+    resolve() 
+  })
+}
+
+// https://aerotwist.com/blog/flip-your-animations/
+const flipToast = toast => {
+  // FIRST
+  const first = Toaster.offsetHeight
+
+  // add new child to change container size
+  Toaster.appendChild(toast)
+
+  // LAST
+  const last = Toaster.offsetHeight
+
+  // INVERT
+  const invert = last - first
+
+  // PLAY
+  const animation = Toaster.animate([
+    { transform: `translateY(${invert}px)` },
+    { transform: 'translateY(0)' }
+  ], {
+    duration: 150,
+    easing: 'ease-out',
+  })
+
+  animation.startTime = document.timeline.currentTime
+}
+
+const Toaster = init()
+export default Toast
\ No newline at end of file
diff --git a/src/site/content/en/patterns/components/toast/assets/style.css b/src/site/content/en/patterns/components/toast/assets/style.css
new file mode 100644
index 00000000000..ba5c047b273
--- /dev/null
+++ b/src/site/content/en/patterns/components/toast/assets/style.css
@@ -0,0 +1,58 @@
+.gui-toast-group {
+  position: fixed;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  padding-block-end: 5vh;
+
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+  gap: 1vh;
+
+  /* optimizations */
+  pointer-events: none;
+}
+
+.gui-toast {
+  --_duration: 3s;
+  --_bg-lightness: 90%;
+  --_travel-distance: 0;
+
+  font-family: system-ui, sans-serif;
+  color: black;
+  background: hsl(0 0% var(--_bg-lightness) / 90%);
+  
+  max-inline-size: min(25ch, 90vw);
+  padding-block: .5ch;
+  padding-inline: 1ch;
+  border-radius: 3px;
+  font-size: 1rem;
+
+  will-change: transform;
+  animation: 
+    fade-in .3s ease,
+    slide-in .3s ease,
+    fade-out .3s ease var(--_duration);
+
+  @media (--dark) {
+    color: white;
+    --_bg-lightness: 20%;
+  }
+
+  @media (--motionOK) {
+    --_travel-distance: 5vh;
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0 }
+}
+
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+
+@keyframes slide-in {
+  from { transform: translateY(var(--_travel-distance, 10px)) }
+}
diff --git a/src/site/content/en/patterns/components/toast/demo.njk b/src/site/content/en/patterns/components/toast/demo.njk
new file mode 100644
index 00000000000..a31d74db8f3
--- /dev/null
+++ b/src/site/content/en/patterns/components/toast/demo.njk
@@ -0,0 +1,27 @@
+---
+patternId: components/toast
+---
+
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      .gui-toast-group{position:fixed;z-index:1;inset-block-end:0;inset-inline:0;-webkit-padding-after:5vh;padding-block-end:5vh;display:grid;justify-items:center;justify-content:center;gap:1vh;pointer-events:none}.gui-toast{--_duration: 3s;--_bg-lightness: 90%;--_travel-distance: 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#000;background:hsl(0 0% var(--_bg-lightness) / 90%);max-inline-size:min(25ch,90vw);padding-block:.5ch;padding-inline:1ch;border-radius:3px;font-size:1rem;will-change:transform;-webkit-animation:fade-in .3s ease,slide-in .3s ease,fade-out .3s ease var(--_duration);animation:fade-in .3s ease,slide-in .3s ease,fade-out .3s ease var(--_duration)}@media (prefers-color-scheme: dark){.gui-toast{color:#fff;--_bg-lightness: 20% }}@media (prefers-reduced-motion: no-preference){.gui-toast{--_travel-distance: 5vh }}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes slide-in{0%{transform:translateY(var(--_travel-distance, 10px))}}@keyframes slide-in{0%{transform:translateY(var(--_travel-distance, 10px))}}*{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:dark light}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:flex;gap:2ch;align-items:center;justify-content:center}@media (max-width: 720px){body{flex-direction:column}}button{font-size:1.5rem;touch-action:manipulation}.github-corner{fill:indigo;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <button id="spells">
+      Cast Spell
+    </button>
+    <button id="actions">
+      Mock User Action
+    </button>
+
+    {% set script %}
+      (()=>{var u={on:function(t,e){return t.split(" ").forEach(s=>this.addEventListener(s,e)),this},off:function(t,e){return t.split(" ").forEach(s=>this.removeEventListener(s,e)),this},attr:function(t,e){return e===void 0?this.getAttribute(t):(e==null?this.removeAttribute(t):this.setAttribute(t,e||""),this)}};function a(t,e=document){let s=t instanceof NodeList||Array.isArray(t)?t:t instanceof HTMLElement||t instanceof SVGElement?[t]:e.querySelectorAll(t);return s.length||(s=[]),Object.assign(Array.from(s).map(n=>Object.assign(n,u)),{on:function(n,o){return this.forEach(i=>i.on(n,o)),this},off:function(n,o){return this.forEach(i=>i.off(n,o)),this},attr:function(n,o){return typeof n=="string"&&o===void 0?this[0].attr(n):(typeof n=="object"?this.forEach(i=>Object.entries(n).forEach(([f,d])=>i.attr(f,d))):typeof n=="string"&&(o||o==null||o=="")&&this.forEach(i=>i.attr(n,o)),this)}})}var h=()=>{let t=document.createElement("section");return t.classList.add("gui-toast-group"),document.firstElementChild.insertBefore(t,document.body),t},m=t=>{let e=document.createElement("output");return e.innerText=t,e.classList.add("gui-toast"),e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e},p=t=>{let{matches:e}=window.matchMedia("(prefers-reduced-motion: no-preference)");r.children.length&&e?E(t):r.appendChild(t)},g=t=>{let e=m(t);return p(e),new Promise(async(s,n)=>{await Promise.allSettled(e.getAnimations().map(o=>o.finished)),r.removeChild(e),s()})},E=t=>{let e=r.offsetHeight;r.appendChild(t);let n=r.offsetHeight-e,o=r.animate([{transform:`translateY(${n}px)`},{transform:"translateY(0)"}],{duration:150,easing:"ease-out"});o.startTime=document.timeline.currentTime},r=h(),c=g;a("#spells").on("click",async()=>{await c(A()),console.log("poof")});a("#actions").on("click",()=>{c(T())});var A=()=>{let t=["Fire","Ice","Lit","Dark","Toast"],e=["I","II","III","IV","V"];return`${t[l(0,t.length-1)]} ${e[l(0,e.length-1)]}`},T=()=>{let t=["Saved","Added to cart","In cart","User removed","Timer set","Added to Favorites",`Multi-Line
+ Support \u{1F44D}`,"This is just really long and completely unnecessary"];return`${t[l(0,t.length-1)]}`},l=(t,e)=>(t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t+1))+t);})();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/components/toast/index.md b/src/site/content/en/patterns/components/toast/index.md
new file mode 100644
index 00000000000..e7686faa96b
--- /dev/null
+++ b/src/site/content/en/patterns/components/toast/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Toast
+description: |
+  This pattern shows how to build an adaptive and accessible toast component.
+  <br><br>
+  <a href="/building-a-toast-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=R75ZVW4LW5o">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/toast">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+This pattern shows how to build an adaptive and accessible toast component.
+
+<a href="/building-a-toast-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=R75ZVW4LW5o">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/toast">Source on Github</a>
diff --git a/src/site/content/en/patterns/example-set/example-pattern/assets/body.html b/src/site/content/en/patterns/example-set/example-pattern/assets/body.html
new file mode 100644
index 00000000000..e9a6c8215bf
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/example-pattern/assets/body.html
@@ -0,0 +1,3 @@
+<div>
+  HTML for the example-pattern
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/example-pattern/assets/script.js b/src/site/content/en/patterns/example-set/example-pattern/assets/script.js
new file mode 100644
index 00000000000..acc27e33b79
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/example-pattern/assets/script.js
@@ -0,0 +1,2 @@
+console.log('Javascript for the example-pattern');
+document.body.append('Javascript for the example-pattern');
diff --git a/src/site/content/en/patterns/example-set/example-pattern/assets/style.css b/src/site/content/en/patterns/example-set/example-pattern/assets/style.css
new file mode 100644
index 00000000000..88cb00c5243
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/example-pattern/assets/style.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/example-pattern/demo.md b/src/site/content/en/patterns/example-set/example-pattern/demo.md
new file mode 100644
index 00000000000..824d3906d15
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/example-pattern/demo.md
@@ -0,0 +1,11 @@
+---
+layout: demo
+patternId: example-set/example-pattern
+draft: true
+noindex: true
+---
+
+<!--
+  Because this pattern has `layout: demo`, all body content here is ignored, and is instead
+  autogenerated by reading "body.html" and including all other assets.
+-->
diff --git a/src/site/content/en/patterns/example-set/example-pattern/index.md b/src/site/content/en/patterns/example-set/example-pattern/index.md
new file mode 100644
index 00000000000..5e6180bf7af
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/example-pattern/index.md
@@ -0,0 +1,10 @@
+---
+layout: pattern
+title: Example pattern
+description: This is the easiest way to create a new pattern, and assets will be combined for your benefit.
+date: 2021-08-10
+draft: true
+noindex: true
+---
+
+Code pattern is a snippet of code, representing a solution to a typical problem.
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/assets/body.html b/src/site/content/en/patterns/example-set/full-html-demo/assets/body.html
new file mode 100644
index 00000000000..779bf587254
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/assets/body.html
@@ -0,0 +1,5 @@
+<div>
+  This HTML is displayed as source code in the samples area of a CodePattern.
+  It is ignored and not included in "demo.html", because this pattern demo is
+  defined as a standalone, full HTML page.
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/assets/script.js b/src/site/content/en/patterns/example-set/full-html-demo/assets/script.js
new file mode 100644
index 00000000000..b1948575cb2
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/assets/script.js
@@ -0,0 +1,6 @@
+console.log('This JS is displayed in the samples area of a CodePattern.');
+
+/**
+ * This file is ignored and not automatically included inside "demo.html",
+ * because this pattern demo is defined as a standalone, full HTML page.
+ */
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/assets/special-script.js b/src/site/content/en/patterns/example-set/full-html-demo/assets/special-script.js
new file mode 100644
index 00000000000..87a8785e413
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/assets/special-script.js
@@ -0,0 +1,6 @@
+console.log('I am a special script declared as a static asset of this demo.');
+
+/**
+ * This file is ignored and not automatically included inside "demo.html",
+ * because this pattern demo is defined as a standalone, full HTML page.
+ */
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/assets/style.css b/src/site/content/en/patterns/example-set/full-html-demo/assets/style.css
new file mode 100644
index 00000000000..dc163d1e645
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/assets/style.css
@@ -0,0 +1,7 @@
+body {
+  background-color: red;
+}
+
+/* This CSS is displayed in the samples area of a CodePattern.
+It is ignored and not included in the demo.html, because in this pattern demo
+is defined as a standalone, full html page. */
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/demo.njk b/src/site/content/en/patterns/example-set/full-html-demo/demo.njk
new file mode 100644
index 00000000000..af259ffa132
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/demo.njk
@@ -0,0 +1,65 @@
+---
+patternId: example-set/full-html-demo
+draft: true
+noindex: true
+---
+
+<!--
+  This demo requires you to specify the full HTML that's used to render the demo, so it doesn't
+  read body.html or include any assets automatically. Use `example-pattern` if you'd like helper
+  behavior.
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="assets/special-script.js"></script>
+  </head>
+  <body>
+    <h1>I'm a full HTML demo.</h1>
+    <p>
+      Please note this file has an .njk extension.
+    </p>
+    <p>
+      To include arbitrary static resources in this demo, you must declare
+      them in <code>static</code> property in this pattern's <code>index.md</code> file.
+      Then you can use them in the demo as static files. E.g.:
+    </p>
+    <pre>
+      <code>
+        // index.md file:
+
+        ---
+        ...
+        static:
+          - special-script.js
+          - icon.svg
+        ---
+      </code>
+    </pre>
+    <pre>
+      <code>
+        // demo.njk file:
+        &lt;script src="special-script.js"&gt;
+        &lt;img src="icon.svg" alt="..."&gt;
+      </code>
+    </pre>
+
+    <p>
+      To use inline scripts, you need to declare them for CSP policy by using <code> cspHash</code> filter:
+      <ul>
+        <li>Declare content of the script as an njk variable (e.g. 'script')</li>
+        <li>Output this variable by passing it throuh <code>cspHash</code> and <code>safe</code> filter</li>
+    </p>
+    <pre>
+      <code>
+        // demo.njk file:
+        &#123;% set script %&#125;
+          console.log('Here goes script logic')
+        &#123;% endset %&#125;
+        &lt;script&gt;&#123;&#123; script | minifyJs | cspHash | safe &#125;&#125;&lt;/script&gt;
+      </code>
+    </pre>
+
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/example-set/full-html-demo/index.md b/src/site/content/en/patterns/example-set/full-html-demo/index.md
new file mode 100644
index 00000000000..fa5411e12b3
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/full-html-demo/index.md
@@ -0,0 +1,33 @@
+---
+layout: pattern
+title: Full HTML demo pattern
+description: Use this pattern if you'd like to show different HTML in the source viewer from what is actually rendered.
+date: 2021-08-10
+draft: true
+noindex: true
+static:
+  - assets/special-script.js
+---
+
+The HTML for the demo page can differ from the code samples displayed
+in the code pattern tabs. To achieve this, include the full HTML for the page
+in the demo.md file in the patterns directory, and ommit the layout property
+in the frontmatter. You still neeed to include the patternId in the
+frontmatter.
+
+<!--
+  Remove the following code if you're creating your own full HTML demo.
+  It's just here for you when _reading_ the site to see example of what you'd put in index.md.
+-->
+
+```html
+---
+patternId: full-html-demo
+---
+
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>I'm a full HTML demo.</body>
+</html>
+```
diff --git a/src/site/content/en/patterns/example-set/graph/assets/body.html b/src/site/content/en/patterns/example-set/graph/assets/body.html
new file mode 100644
index 00000000000..8f0455e5f0b
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/graph/assets/body.html
@@ -0,0 +1,3 @@
+<figure class="highcharts-figure">
+    <div id="container"></div>
+</figure>
diff --git a/src/site/content/en/patterns/example-set/graph/assets/script.js b/src/site/content/en/patterns/example-set/graph/assets/script.js
new file mode 100644
index 00000000000..1a9757a0f05
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/graph/assets/script.js
@@ -0,0 +1,290 @@
+document.addEventListener('pageScriptsLoaded', (e) => {
+  Highcharts.chart('container', {
+    title: {
+      text: 'CMS churn'
+    },
+    accessibility: {
+      point: {
+        valueDescriptionFormat: '{index}. From {point.from} to {point.to}: {point.weight}.'
+      }
+    },
+    series: [{
+        keys: ['from', 'to', 'weight'],
+        data: [
+          [
+              "Joomla",
+              "WordPress",
+              2832
+          ],
+          [
+              "Drupal",
+              "WordPress",
+              2180
+          ],
+          [
+              "Wix",
+              "WordPress",
+              789
+          ],
+          [
+              "Squarespace",
+              "WordPress",
+              628
+          ],
+          [
+              "WordPress",
+              "Drupal",
+              624
+          ],
+          [
+              "WordPress",
+              "Wix",
+              559
+          ],
+          [
+              "WordPress",
+              "Squarespace",
+              550
+          ],
+          [
+              "TYPO3 CMS",
+              "WordPress",
+              459
+          ],
+          [
+              "WordPress",
+              "Joomla",
+              285
+          ],
+          [
+              "DNN",
+              "WordPress",
+              214
+          ],
+          [
+              "WordPress",
+              "Duda",
+              206
+          ],
+          [
+              "WordPress",
+              "Craft CMS",
+              186
+          ],
+          [
+              "WordPress",
+              "1C-Bitrix",
+              179
+          ],
+          [
+              "Duda",
+              "WordPress",
+              163
+          ],
+          [
+              "WordPress",
+              "Tilda",
+              159
+          ],
+          [
+              "GoDaddy Website Builder",
+              "WordPress",
+              155
+          ],
+          [
+              "WordPress",
+              "TYPO3 CMS",
+              141
+          ],
+          [
+              "Weebly",
+              "WordPress",
+              137
+          ],
+          [
+              "WebsPlanet",
+              "Mono.net",
+              136
+          ],
+          [
+              "WordPress",
+              "Contentful",
+              130
+          ],
+          [
+              "1C-Bitrix",
+              "WordPress",
+              129
+          ],
+          [
+              "Joomla",
+              "Drupal",
+              118
+          ],
+          [
+              "Drupal",
+              "Brightspot",
+              118
+          ],
+          [
+              "Drupal",
+              "Adobe Experience Manager",
+              115
+          ],
+          [
+              "Craft CMS",
+              "WordPress",
+              107
+          ],
+          [
+              "WordPress",
+              "Adobe Experience Manager",
+              107
+          ],
+          [
+              "Microsoft SharePoint",
+              "WordPress",
+              106
+          ],
+          [
+              "Squarespace",
+              "Wix",
+              99
+          ],
+          [
+              "Joomla",
+              "1C-Bitrix",
+              96
+          ],
+          [
+              "WebsPlanet",
+              "Duda",
+              95
+          ],
+          [
+              "SilverStripe",
+              "WordPress",
+              92
+          ],
+          [
+              "Business Catalyst",
+              "WordPress",
+              91
+          ],
+          [
+              "Jimdo",
+              "WordPress",
+              86
+          ],
+          [
+              "WordPress",
+              "October CMS",
+              85
+          ],
+          [
+              "Kentico CMS",
+              "WordPress",
+              83
+          ],
+          [
+              "Wix",
+              "Squarespace",
+              79
+          ],
+          [
+              "Sitefinity",
+              "WordPress",
+              76
+          ],
+          [
+              "Tilda",
+              "WordPress",
+              73
+          ],
+          [
+              "Contao",
+              "WordPress",
+              68
+          ],
+          [
+              "DataLife Engine",
+              "WordPress",
+              66
+          ],
+          [
+              "WordPress",
+              "Odoo",
+              66
+          ],
+          [
+              "WordPress",
+              "GoDaddy Website Builder",
+              65
+          ],
+          [
+              "Drupal",
+              "Contentful",
+              64
+          ],
+          [
+              "Liferay",
+              "WordPress",
+              62
+          ],
+          [
+              "Mono.net",
+              "Wix",
+              61
+          ],
+          [
+              "MODX",
+              "WordPress",
+              58
+          ],
+          [
+              "SPIP",
+              "WordPress",
+              57
+          ],
+          [
+              "1C-Bitrix",
+              "Tilda",
+              57
+          ],
+          [
+              "WordPress",
+              "Sitecore",
+              56
+          ],
+          [
+              "TYPO3 CMS",
+              "Drupal",
+              54
+          ],
+          [
+              "Microsoft SharePoint",
+              "Drupal",
+              52
+          ],
+          [
+              "Drupal",
+              "1C-Bitrix",
+              51
+          ]
+        ],
+        type: 'dependencywheel',
+        name: 'CMS churn',
+        dataLabels: {
+            color: '#333',
+            textPath: {
+                enabled: true,
+                attributes: {
+                    dy: 5
+                }
+            },
+            distance: 10
+        },
+        size: '95%'
+    }]
+  });
+});
diff --git a/src/site/content/en/patterns/example-set/graph/assets/style.css b/src/site/content/en/patterns/example-set/graph/assets/style.css
new file mode 100644
index 00000000000..5fb09709730
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/graph/assets/style.css
@@ -0,0 +1,50 @@
+.highcharts-figure,
+.highcharts-data-table table {
+    min-width: 320px;
+    max-width: 800px;
+    margin: 1em auto;
+}
+
+#container {
+    height: 500px;
+}
+
+.highcharts-data-table table {
+    font-family: Verdana, sans-serif;
+    border-collapse: collapse;
+    border: 1px solid #ebebeb;
+    margin: 10px auto;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+}
+
+.highcharts-data-table caption {
+    padding: 1em 0;
+    font-size: 1.2em;
+    color: #555;
+}
+
+.highcharts-data-table th {
+    font-weight: 600;
+    padding: 0.5em;
+}
+
+.highcharts-data-table td,
+.highcharts-data-table th,
+.highcharts-data-table caption {
+    padding: 0.5em;
+}
+
+.highcharts-data-table thead tr,
+.highcharts-data-table tr:nth-child(even) {
+    background: #f8f8f8;
+}
+
+.highcharts-data-table tr:hover {
+    background: #f1f7ff;
+}
+
+#csv {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/graph/demo.md b/src/site/content/en/patterns/example-set/graph/demo.md
new file mode 100644
index 00000000000..5748a762a1b
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/graph/demo.md
@@ -0,0 +1,12 @@
+---
+patternId: example-set/graph
+layout: demo
+noindex: true
+pageScripts:
+  - https://code.highcharts.com/highcharts.js
+  - https://code.highcharts.com/modules/sankey.js
+  - https://code.highcharts.com/modules/dependency-wheel.js
+  - https://code.highcharts.com/modules/exporting.js
+  - https://code.highcharts.com/modules/export-data.js
+  - https://code.highcharts.com/modules/accessibility.js
+---
diff --git a/src/site/content/en/patterns/example-set/graph/index.md b/src/site/content/en/patterns/example-set/graph/index.md
new file mode 100644
index 00000000000..5e105bd23d3
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/graph/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Graph demo pattern
+description: Use this pattern if you'd like to show different HTML in the source viewer from what is actually rendered.
+date: 2021-08-10
+draft: true
+noindex: true
+---
+
+## Graph embed
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/site/content/en/patterns/example-set/image-demo/assets/sample.njk b/src/site/content/en/patterns/example-set/image-demo/assets/sample.njk
new file mode 100644
index 00000000000..f962c21e768
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/image-demo/assets/sample.njk
@@ -0,0 +1,4 @@
+<p>This sample gets displayed in the code samples area,
+but is not included in demo.html</p>
+
+{% Img src="image/admin/3lZosaL1YXafLn4ZRINl.gif", alt="WalkMe state toggle test.", width="441", height="400" %}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/image-demo/demo.md b/src/site/content/en/patterns/example-set/image-demo/demo.md
new file mode 100644
index 00000000000..299a6897193
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/image-demo/demo.md
@@ -0,0 +1,14 @@
+---
+layout: demo
+noindex: true
+patternId: example-set/image-demo
+---
+
+<!--
+  This demo shows off how to use the Img tag, but is actually just a "full HTML demo", as it
+  requires you to specify the full HTML (here!) that's used to render the demo.
+-->
+
+<figure>
+  {% Img src="image/admin/3lZosaL1YXafLn4ZRINl.gif", alt="WalkMe state toggle test.", width="441", height="400" %}
+</figure>
diff --git a/src/site/content/en/patterns/example-set/image-demo/index.md b/src/site/content/en/patterns/example-set/image-demo/index.md
new file mode 100644
index 00000000000..7c7989beaad
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/image-demo/index.md
@@ -0,0 +1,37 @@
+---
+layout: pattern
+title: Image demo pattern
+description: Shows off how to create a pattern that uses the Img shortcode.
+date: 2021-08-10
+height: 400
+noindex: true
+---
+
+It is possible to use an image (static or animated) as a demo in a CodePattern.
+
+Use an `Img` shortcode wrapped in a `<figure>` tag in the demo.md
+file. In this case, you should **not** add *body.html* to the demo assets.
+If you still want to display an HTML snippet, give it a name other than "body".
+
+<!--
+  Remove the following code if you're creating your own image demo.
+  It's just here for you when _reading_ the site to see example of what you'd put in index.md.
+-->
+
+```html
+// demo.md
+
+---
+layout: demo
+patternId: image-demo-example
+---
+
+<figure>
+  {% Img
+    src="image/admin/3lZosaL1YXafLn4ZRINl.gif",
+    alt="WalkMe state toggle test.",
+    width="441",
+    height="400"
+    %}
+</figure>
+```
\ No newline at end of file
diff --git a/src/site/content/en/patterns/example-set/index.md b/src/site/content/en/patterns/example-set/index.md
new file mode 100644
index 00000000000..41f64097312
--- /dev/null
+++ b/src/site/content/en/patterns/example-set/index.md
@@ -0,0 +1,72 @@
+---
+layout: pattern-set
+title: Example Pattern Set
+description: Example set of patterns
+hero: image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg
+draft: true
+noindex: true
+---
+
+## Overview
+
+Code pattern is a snippet of code, representing a solution to a typical problem.
+Patterns are organized as follows: "/patterns/PatternSuite/PatternSet/PatternName"
+
+To create a new pattern:
+
+1. Add a new directory in a chosen "PatternSuite" or "PatternSet" folder.
+   The directory name becomes the ID of the pattern.
+   For example, for a pattern in "/patterns/some-suite/my-pattern/" the pattern ID is "some-suite/my-pattern".
+
+2. Add the following files to the directory:
+
+```text
+site/content/en/patterns/SomePatternSuite/
+  |-+ SomePatternName/
+    |-- index.md
+    |-- demo.md
+    |-+ assets/
+      |--some-asset.ext
+```
+
+### "index.md""
+
+The overview and the description of the pattern.
+
+YAML front matter must contain `layout: pattern` and `title`.
+
+```yaml
+---
+layout: pattern
+title: Example Pattern
+---
+```
+
+### "demo.md"
+
+The actual demo that gets included via `<iframe>`.
+YAML front matter must contain `patternId`.
+
+You have two options for how to build the actual rendered HTML.
+
+1. Include `layout: demo` in the front matter.
+   By doing this, the demo will be built out of "body.html" and all CSS and JS files found in "assets".
+   Most authors will want this!
+
+2. Include the HTML you want to render, but _do not_ specify any `layout:`.
+   (See the "Full HTML demo pattern" and "Image demo pattern", below.)
+
+### "assets" directory
+
+Assets directory can contain one or more files named "asset-name.ext",
+such as "style.css" and "script.js"
+
+Each file is displayed as a tab in samples area of the code pattern.
+
+The file extension is the label of the tab with the sample. For example, the tab
+displaying "style.css" is labeled **CSS**.
+
+If `layout: demo` is specified, as it is in the default example pattern, then the demo HTML will be assembled by including "body.html" from this folder, as well as:
+
+- "\*.css" files get included in the `<head>` of the demo.
+- "\*.js" files get included at the end of the body of the demo.
diff --git a/src/site/content/en/patterns/files/drag-and-drop-directories/assets/body.html b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/body.html
new file mode 100644
index 00000000000..3871916398b
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/body.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to drag and drop directories</title>
+  </head>
+  <body>
+    <main>
+      <h1>How to drag and drop directories</h1>
+      <p>Drag and drop one or multiple files or directories onto the page.</p>
+      <pre></pre>
+    </main>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/drag-and-drop-directories/assets/script.js b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/script.js
new file mode 100644
index 00000000000..e69699097ae
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/script.js
@@ -0,0 +1,44 @@
+const supportsFileSystemAccessAPI =
+  "getAsFileSystemHandle" in DataTransferItem.prototype;
+const supportsWebkitGetAsEntry =
+  "webkitGetAsEntry" in DataTransferItem.prototype;
+
+const elem = document.querySelector("main");
+const debug = document.querySelector("pre");
+
+elem.addEventListener("dragover", (e) => {
+  // Prevent navigation.
+  e.preventDefault();
+});
+
+elem.addEventListener("dragenter", (e) => {
+  elem.style.outline = "solid red 1px";
+});
+
+elem.addEventListener("dragleave", (e) => {
+  elem.style.outline = "";
+});
+
+elem.addEventListener("drop", async (e) => {
+  e.preventDefault();
+  elem.style.outline = "";
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    .filter((item) => item.kind === "file")
+    .map((item) =>
+      supportsFileSystemAccessAPI
+        ? item.getAsFileSystemHandle()
+        : supportsWebkitGetAsEntry
+        ? item.webkitGetAsEntry()
+        : item.getAsFile()
+    );
+
+  for await (const handle of fileHandlesPromises) {
+    if (handle.kind === "directory" || handle.isDirectory) {
+      console.log(`Directory: ${handle.name}`);
+      debug.textContent += `Directory: ${handle.name}\n`;
+    } else {
+      console.log(`File: ${handle.name}`);
+      debug.textContent += `File: ${handle.name}\n`;
+    }
+  }
+});
diff --git a/src/site/content/en/patterns/files/drag-and-drop-directories/assets/style.css b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/style.css
new file mode 100644
index 00000000000..a64d4199b33
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-directories/assets/style.css
@@ -0,0 +1,36 @@
+:root {
+  color-scheme: dark light;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 1rem;
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+main {
+  flex-grow: 1;
+}
+
+footer {
+  margin-top: 1rem;
+  border-top: solid CanvasText 1px;
+  font-size: 0.8rem;
+}
diff --git a/src/site/content/en/patterns/files/drag-and-drop-directories/demo.njk b/src/site/content/en/patterns/files/drag-and-drop-directories/demo.njk
new file mode 100644
index 00000000000..7d1b23c7857
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-directories/demo.njk
@@ -0,0 +1,105 @@
+---
+patternId: files/drag-and-drop-directories
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to drag and drop directories</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 0;
+        padding: 1rem;
+        font-family: system-ui, sans-serif;
+        line-height: 1.5;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      img,
+      video {
+        height: auto;
+        max-width: 100%;
+      }
+
+      main {
+        flex-grow: 1;
+      }
+
+      footer {
+        margin-top: 1rem;
+        border-top: solid CanvasText 1px;
+        font-size: 0.8rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>How to drag and drop directories</h1>
+      <p>Drag and drop one or multiple files or directories onto the page.</p>
+      <pre></pre>
+    </main>
+
+    {% set script %}
+      const supportsFileSystemAccessAPI =
+        "getAsFileSystemHandle" in DataTransferItem.prototype;
+      const supportsWebkitGetAsEntry =
+        "webkitGetAsEntry" in DataTransferItem.prototype;
+
+      const elem = document.querySelector("main");
+      const debug = document.querySelector("pre");
+
+      elem.addEventListener("dragover", (e) => {
+        // Prevent navigation.
+        e.preventDefault();
+      });
+
+      elem.addEventListener("dragenter", (e) => {
+        elem.style.outline = "solid red 1px";
+      });
+
+      elem.addEventListener("dragleave", (e) => {
+        elem.style.outline = "";
+      });
+
+      elem.addEventListener("drop", async (e) => {
+        e.preventDefault();
+        elem.style.outline = "";
+        const fileHandlesPromises = [...e.dataTransfer.items]
+          .filter((item) => item.kind === "file")
+          .map((item) =>
+            supportsFileSystemAccessAPI
+              ? item.getAsFileSystemHandle()
+              : supportsWebkitGetAsEntry
+              ? item.webkitGetAsEntry()
+              : item.getAsFile()
+          );
+
+        for await (const handle of fileHandlesPromises) {
+          if (handle.kind === "directory" || handle.isDirectory) {
+            console.log(`Directory: ${handle.name}`);
+            debug.textContent += `Directory: ${handle.name}\n`;
+          } else {
+            console.log(`File: ${handle.name}`);
+            debug.textContent += `File: ${handle.name}\n`;
+          }
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/drag-and-drop-directories/index.md b/src/site/content/en/patterns/files/drag-and-drop-directories/index.md
new file mode 100644
index 00000000000..16d60775c21
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-directories/index.md
@@ -0,0 +1,123 @@
+---
+layout: pattern
+title: How to drag and drop directories
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to drag and drop directories into the browser.
+height: 800
+---
+
+The
+[HTML Drag and Drop interfaces](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+enable web applications to accept
+[dragged and dropped files](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop)
+on a web page. During a drag and drop operation, dragged file and directory items are associated
+with file entries and directory entries respectively. When it comes to dragging and dropping files
+into the browser, there are two ways of doing it: the modern and the classic way.
+
+## The modern way
+
+### Using the File System Access API's `DataTransferItem.getAsFileSystemHandle()` method
+
+The `DataTransferItem.getAsFileSystemHandle()` method returns a promise with a
+`FileSystemFileHandle` object if the dragged item is a file, and a promise with a
+`FileSystemDirectoryHandle` object if the dragged item is a directory. These handles let you read,
+and optionally write back to the file or directory. Note that the Drag and Drop interface's
+[`DataTransferItem.kind`](https://developer.mozilla.org/docs/Web/API/DataTransferItem/kind) will be
+`"file"` for both files _and_ directories, whereas the File System Access API's
+[`FileSystemHandle.kind`](https://wicg.github.io/file-system-access/#dom-filesystemhandle-kind) will
+be `"file"` for files and `"directory"` for directories.
+
+{% BrowserCompat 'api.DataTransferItem.getAsFileSystemHandle' %}
+
+## The classic way
+
+### Using the non-standard `DataTransferItem.webkitGetAsEntry()` method
+
+The `DataTransferItem.webkitGetAsEntry()` method returns the drag data item's `FileSystemFileEntry`
+if the item is a file, and `FileSystemDirectoryEntry` if the item is a directory. While you can read
+the file or directory, there is no way to write back to them. This method has the disadvantage that
+is not on the standards track, but has the advantage that it supports directories.
+
+{% BrowserCompat 'api.DataTransferItem.webkitGetAsEntry' %}
+
+## Progressive enhancement
+
+The snippet below uses the modern File System Access API's
+`DataTransferItem.getAsFileSystemHandle()` method when it is supported, then falls back to the
+non-standard `DataTransferItem.webkitGetAsEntry()` method, and finally falls back to the classic
+`DataTransferItem.getAsFile()` method. Be sure to check the type of each `handle`, since it could be
+either of:
+
+- `FileSystemDirectoryHandle` when the modern code path is chosen.
+- `FileSystemDirectoryEntry` when the non-standard code path is chosen.
+
+All types have a `name` property, so logging it is fine and will always work.
+
+```js
+// Run feature detection.
+const supportsFileSystemAccessAPI =
+  'getAsFileSystemHandle' in DataTransferItem.prototype;
+const supportsWebkitGetAsEntry =
+  'webkitGetAsEntry' in DataTransferItem.prototype;
+
+// This is the drag and drop zone.
+const elem = document.querySelector('main');
+
+// Prevent navigation.
+elem.addEventListener('dragover', (e) => {
+  e.preventDefault();
+});
+
+// Visually highlight the drop zone.
+elem.addEventListener('dragenter', (e) => {
+  elem.style.outline = 'solid red 1px';
+});
+
+// Visually unhighlight the drop zone.
+elem.addEventListener('dragleave', (e) => {
+  elem.style.outline = '';
+});
+
+// This is where the drop is handled.
+elem.addEventListener('drop', async (e) => {
+  // Prevent navigation.
+  e.preventDefault();
+  if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
+    // Cannot handle directories.
+    return;
+  }
+  // Unhighlight the drop zone.
+  elem.style.outline = '';
+
+  // Prepare an array of promises…
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    // …by including only files (where file misleadingly means actual file _or_
+    // directory)…
+    .filter((item) => item.kind === 'file')
+    // …and, depending on previous feature detection…
+    .map((item) =>
+      supportsFileSystemAccessAPI
+        // …either get a modern `FileSystemHandle`…
+        ? item.getAsFileSystemHandle()
+        // …or a classic `FileSystemFileEntry`.
+        : item.webkitGetAsEntry(),
+    );
+  // Loop over the array of promises.
+  for await (const handle of fileHandlesPromises) {
+    // This is where we can actually exclusively act on the directories.
+    if (handle.kind === 'directory' || handle.isDirectory) {
+      console.log(`Directory: ${handle.name}`);
+    }
+  }
+});
+```
+
+## Further reading
+
+- [File System Access API](/file-system-access/)
+- [Drag and Drop API](/drag-and-drop/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/drag-and-drop-files/assets/body.html b/src/site/content/en/patterns/files/drag-and-drop-files/assets/body.html
new file mode 100644
index 00000000000..152306bed7a
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-files/assets/body.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to drag and drop files</title>
+  </head>
+  <body>
+    <main>
+      <h1>How to drag and drop files</h1>
+      <p>Drag and drop one or multiple files onto the page.</p>
+      <pre></pre>
+    </main>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/drag-and-drop-files/assets/script.js b/src/site/content/en/patterns/files/drag-and-drop-files/assets/script.js
new file mode 100644
index 00000000000..e69699097ae
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-files/assets/script.js
@@ -0,0 +1,44 @@
+const supportsFileSystemAccessAPI =
+  "getAsFileSystemHandle" in DataTransferItem.prototype;
+const supportsWebkitGetAsEntry =
+  "webkitGetAsEntry" in DataTransferItem.prototype;
+
+const elem = document.querySelector("main");
+const debug = document.querySelector("pre");
+
+elem.addEventListener("dragover", (e) => {
+  // Prevent navigation.
+  e.preventDefault();
+});
+
+elem.addEventListener("dragenter", (e) => {
+  elem.style.outline = "solid red 1px";
+});
+
+elem.addEventListener("dragleave", (e) => {
+  elem.style.outline = "";
+});
+
+elem.addEventListener("drop", async (e) => {
+  e.preventDefault();
+  elem.style.outline = "";
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    .filter((item) => item.kind === "file")
+    .map((item) =>
+      supportsFileSystemAccessAPI
+        ? item.getAsFileSystemHandle()
+        : supportsWebkitGetAsEntry
+        ? item.webkitGetAsEntry()
+        : item.getAsFile()
+    );
+
+  for await (const handle of fileHandlesPromises) {
+    if (handle.kind === "directory" || handle.isDirectory) {
+      console.log(`Directory: ${handle.name}`);
+      debug.textContent += `Directory: ${handle.name}\n`;
+    } else {
+      console.log(`File: ${handle.name}`);
+      debug.textContent += `File: ${handle.name}\n`;
+    }
+  }
+});
diff --git a/src/site/content/en/patterns/files/drag-and-drop-files/assets/style.css b/src/site/content/en/patterns/files/drag-and-drop-files/assets/style.css
new file mode 100644
index 00000000000..a64d4199b33
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-files/assets/style.css
@@ -0,0 +1,36 @@
+:root {
+  color-scheme: dark light;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 1rem;
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+main {
+  flex-grow: 1;
+}
+
+footer {
+  margin-top: 1rem;
+  border-top: solid CanvasText 1px;
+  font-size: 0.8rem;
+}
diff --git a/src/site/content/en/patterns/files/drag-and-drop-files/demo.njk b/src/site/content/en/patterns/files/drag-and-drop-files/demo.njk
new file mode 100644
index 00000000000..ad7445b537f
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-files/demo.njk
@@ -0,0 +1,105 @@
+---
+patternId: files/drag-and-drop-files
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to drag and drop files</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 0;
+        padding: 1rem;
+        font-family: system-ui, sans-serif;
+        line-height: 1.5;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      img,
+      video {
+        height: auto;
+        max-width: 100%;
+      }
+
+      main {
+        flex-grow: 1;
+      }
+
+      footer {
+        margin-top: 1rem;
+        border-top: solid CanvasText 1px;
+        font-size: 0.8rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>How to drag and drop files</h1>
+      <p>Drag and drop one or multiple files onto the page.</p>
+      <pre></pre>
+    </main>
+
+    {% set script %}
+      const supportsFileSystemAccessAPI =
+        "getAsFileSystemHandle" in DataTransferItem.prototype;
+      const supportsWebkitGetAsEntry =
+        "webkitGetAsEntry" in DataTransferItem.prototype;
+
+      const elem = document.querySelector("main");
+      const debug = document.querySelector("pre");
+
+      elem.addEventListener("dragover", (e) => {
+        // Prevent navigation.
+        e.preventDefault();
+      });
+
+      elem.addEventListener("dragenter", (e) => {
+        elem.style.outline = "solid red 1px";
+      });
+
+      elem.addEventListener("dragleave", (e) => {
+        elem.style.outline = "";
+      });
+
+      elem.addEventListener("drop", async (e) => {
+        e.preventDefault();
+        elem.style.outline = "";
+        const fileHandlesPromises = [...e.dataTransfer.items]
+          .filter((item) => item.kind === "file")
+          .map((item) =>
+            supportsFileSystemAccessAPI
+              ? item.getAsFileSystemHandle()
+              : supportsWebkitGetAsEntry
+              ? item.webkitGetAsEntry()
+              : item.getAsFile()
+          );
+
+        for await (const handle of fileHandlesPromises) {
+          if (handle.kind === "directory" || handle.isDirectory) {
+            console.log(`Directory: ${handle.name}`);
+            debug.textContent += `Directory: ${handle.name}\n`;
+          } else {
+            console.log(`File: ${handle.name}`);
+            debug.textContent += `File: ${handle.name}\n`;
+          }
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/drag-and-drop-files/index.md b/src/site/content/en/patterns/files/drag-and-drop-files/index.md
new file mode 100644
index 00000000000..48f768ab9dc
--- /dev/null
+++ b/src/site/content/en/patterns/files/drag-and-drop-files/index.md
@@ -0,0 +1,115 @@
+---
+layout: pattern
+title: How to drag and drop files
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to drag and drop files into the browser.
+height: 800
+---
+
+The
+[HTML Drag and Drop interfaces](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+enable web applications to accept
+[dragged and dropped files](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop)
+on a web page. During a drag and drop operation, dragged file and directory items are associated
+with file entries and directory entries respectively. When it comes to dragging and dropping files
+into the browser, there are two ways of doing it: the modern and the classic way.
+
+## The modern way
+
+### Using the File System Access API's `DataTransferItem.getAsFileSystemHandle()` method
+
+The `DataTransferItem.getAsFileSystemHandle()` method returns a promise with a
+`FileSystemFileHandle` object if the dragged item is a file, and a promise with a
+`FileSystemDirectoryHandle` object if the dragged item is a directory. These handles let you read,
+and optionally write back to the file or directory. Note that the Drag and Drop interface's
+[`DataTransferItem.kind`](https://developer.mozilla.org/docs/Web/API/DataTransferItem/kind) will be
+`"file"` for both files _and_ directories, whereas the File System Access API's
+[`FileSystemHandle.kind`](https://wicg.github.io/file-system-access/#dom-filesystemhandle-kind) will
+be `"file"` for files and `"directory"` for directories.
+
+{% BrowserCompat 'api.DataTransferItem.getAsFileSystemHandle' %}
+
+## The classic way
+
+### Using the classic `DataTransferItem.getAsFile()` method
+
+The `DataTransferItem.getAsFile()` method returns the drag data item's `File` object. If the item is
+not a file, this method returns `null`. While you can read the file, there is no way to write back
+to it. This method has the disadvantage that it does not support directories.
+
+{% BrowserCompat 'api.DataTransferItem.getAsFile' %}
+
+## Progressive enhancement
+
+The snippet below uses the modern File System Access API's
+`DataTransferItem.getAsFileSystemHandle()` method when it is supported, then falls back to the
+non-standard `DataTransferItem.webkitGetAsEntry()` method, and finally falls back to the classic
+`DataTransferItem.getAsFile()` method. Be sure to check the type of each `handle`, since it could be
+either of:
+
+- `FileSystemFileHandle` when the modern code path is chosen.
+- `File` when the classic code path is chosen.
+
+All types have a `name` property, so logging it is fine and will always work.
+
+```js
+// Run feature detection.
+const supportsFileSystemAccessAPI =
+  'getAsFileSystemHandle' in DataTransferItem.prototype;
+
+// This is the drag and drop zone.
+const elem = document.querySelector('main');
+
+  // Prevent navigation.
+elem.addEventListener('dragover', (e) => {
+  e.preventDefault();
+});
+
+// Visually highlight the drop zone.
+elem.addEventListener('dragenter', (e) => {
+  elem.style.outline = 'solid red 1px';
+});
+
+// Visually unhighlight the drop zone.
+elem.addEventListener('dragleave', (e) => {
+  elem.style.outline = '';
+});
+
+// This is where the drop is handled.
+elem.addEventListener('drop', async (e) => {
+  // Prevent navigation.
+  e.preventDefault();
+  // Unhighlight the drop zone.
+  elem.style.outline = '';
+  // Prepare an array of promises…
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    // …by including only files (where file misleadingly means actual file _or_
+    // directory)…
+    .filter((item) => item.kind === 'file')
+    // …and, depending on previous feature detection…
+    .map((item) =>
+      supportsFileSystemAccessAPI
+        // …either get a modern `FileSystemHandle`…
+        ? item.getAsFileSystemHandle()
+        // …or a classic `File`.
+        : item.getAsFile(),
+    );
+  // Loop over the array of promises.
+  for await (const handle of fileHandlesPromises) {
+    // This is where we can actually exclusively act on the files.
+    if (handle.kind === 'file' || handle.isFile) {
+      console.log(`File: ${handle.name}`);
+    }
+  }
+});
+```
+
+## Further reading
+
+- [File System Access API](/file-system-access/)
+- [Drag and Drop API](/drag-and-drop/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/body.html b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/body.html
new file mode 100644
index 00000000000..76b86e2aa4f
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/body.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="manifest.json" />
+    <title>How to handle files opened from the file explorer</title>
+    <link rel="stylesheet" href="style.css" />
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          const registration = await navigator.serviceWorker.register(
+            'sw.js',
+          );
+          console.log(
+            'Service worker registered for scope',
+            registration.scope,
+          );
+        });
+      }
+    </script>
+    <script src="script.js" type="module"></script>
+  </head>
+  <body>
+    <h1>How to handle files opened from the file explorer</h1>
+    <p>Install the app. After the installation, try opening an image file from the file explorer with the app.
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.png b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.png differ
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.svg b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/favicon.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/manifest.json b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/manifest.json
new file mode 100644
index 00000000000..30f37715da4
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/manifest.json
@@ -0,0 +1,27 @@
+{
+  "name": "How to handle files opened from the file explorer",
+  "short_name": "Handle files",
+  "start_url": "../demo.html",
+  "id": "../demo.html",
+  "icons": [
+    {
+      "src": "../assets/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "../assets/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "display": "standalone",
+  "file_handlers": [
+    {
+      "action": "../demo.html",
+      "accept": {
+        "image/*": [".jpg", ".jpeg", ".png", ".webp", ".svg"]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/script.js b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/script.js
new file mode 100644
index 00000000000..3f4f04d29b1
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/script.js
@@ -0,0 +1,10 @@
+if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
+  launchQueue.setConsumer((launchParams) => {
+    if (!launchParams.files.length) {
+      return;
+    }
+    for (const fileHandle of launchParams.files) {
+      document.body.innerHTML += `<p>${fileHandle.name}</p>`;
+    }
+  });
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/style.css b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/style.css
new file mode 100644
index 00000000000..370d8a2599a
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/assets/style.css
@@ -0,0 +1,19 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/demo.njk b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/demo.njk
new file mode 100644
index 00000000000..86a849c95db
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/demo.njk
@@ -0,0 +1,84 @@
+---
+patternId: files/handle-files-opened-from-the-file-explorer
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <title>How to handle files opened from the file explorer</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+      }
+
+      img {
+        height: auto;
+        max-width: 100%;
+        display: block;
+      }
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to handle files opened from the file explorer</h1>
+
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <p>Install the app. After the installation, try opening an image file from the file explorer with the app.
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          const registration = await navigator.serviceWorker.register(
+            'sw.js',
+          );
+          console.log(
+            'Service worker registered for scope',
+            registration.scope,
+          );
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
+        launchQueue.setConsumer((launchParams) => {
+          if (!launchParams.files.length) {
+            return;
+          }
+          for (const fileHandle of launchParams.files) {
+            document.body.innerHTML += `<p>${fileHandle.name}</p>`;
+          }
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/index.md b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/index.md
new file mode 100644
index 00000000000..d0ef2d8fe8c
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/index.md
@@ -0,0 +1,151 @@
+---
+layout: pattern
+title: How to handle files opened from the file explorer
+authors:
+  - pliao
+date: 2022-10-10
+description: >
+  Learn how to use the File Handling API to register your web app as a file handler to the operating
+  system.
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - assets/favicon.png
+  - assets/favicon.svg
+---
+
+## The modern way
+
+### Using the File Handling API
+
+First, declare the `file_handlers` attribute in your web app manifest. The File Handling API
+requires you to specify the `action` property (a handling URL) and the `accept` property, which is
+an object with MIME types as keys and arrays of the particularly corresponding file extensions.
+
+```json
+{
+  "file_handlers": [
+    {
+      "action": "./",
+      "accept": {
+        "image/*": [".jpg", ".jpeg", ".png", ".webp", ".svg"]
+      }
+    }
+  ]
+}
+```
+
+Next, you need to use the File Handling API to imperatively deal with opened files via the
+`launchQueue`.
+
+```js
+if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
+  launchQueue.setConsumer((launchParams) => {
+    if (!launchParams.files.length) {
+      return;
+    }
+    for (const fileHandle of launchParams.files) {
+      // Handle the file.
+    }
+  });
+}
+```
+
+{% BrowserCompat 'api.LaunchQueue' %}
+
+## The classic way
+
+### Using the classic `DataTransferItem.getAsFile()` method
+
+If the File Handling API is not supported, you can still drag and drop files from the file explorer
+into the app. The `DataTransferItem.getAsFile()` method returns the drag data item's `File` object.
+If the item is not a file, this method returns `null`. While you can read the file, there is no way
+to write back to it. This method has the disadvantage that it does not support directories.
+
+{% BrowserCompat 'api.DataTransferItem.getAsFile' %}
+
+## Progressive enhancement
+
+The snippet below uses the File Handling API when it's available, and additionally registers drag
+and drop handlers so dragged files can be handled.
+
+Declare the file types that can be handled in the web app manifest. Browsers that don't support the
+File Handling API will just ignore this.
+
+```json
+{
+  "file_handlers": [
+    {
+      "action": "./",
+      "accept": {
+        "image/*": [".jpg", ".jpeg", ".png", ".webp", ".svg"]
+      }
+    }
+  ]
+}
+```
+
+```js
+// File Handling API
+const handleLaunchFiles = () => {
+  window.launchQueue.setConsumer((launchParams) => {
+    if (!launchParams.files.length) {
+      return;
+    }
+    launchParams.files.forEach(async (handle) => {
+      const file = await handle.getFile();
+      console.log(`File: ${file.name}`);
+      // Do something with the file.
+    });
+  });
+};
+
+if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
+  handleLaunchFiles();
+}
+
+// This is the drag and drop zone.
+const elem = document.querySelector('main');
+// Prevent navigation.
+elem.addEventListener('dragover', (e) => {
+  e.preventDefault();
+});
+// Visually highlight the drop zone.
+elem.addEventListener('dragenter', (e) => {
+  elem.style.outline = 'solid red 1px';
+});
+// Visually unhighlight the drop zone.
+elem.addEventListener('dragleave', (e) => {
+  elem.style.outline = '';
+});
+// This is where the drop is handled.
+elem.addEventListener('drop', async (e) => {
+  // Prevent navigation.
+  e.preventDefault();
+  // Unhighlight the drop zone.
+  elem.style.outline = '';
+  // Prepare an array of promises…
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    // …by including only files (where file misleadingly means actual file _or_
+    // directory)…
+    .filter((item) => item.kind === 'file')
+    // …and, depending on previous feature detection…
+    .map((item) => item.getAsFile());
+  // Loop over the array of promises.
+  for await (const handle of fileHandlesPromises) {
+    // This is where we can actually exclusively act on the files.
+    if (handle.isFile) {
+      console.log(`File: ${handle.name}`);
+      // Do something with the file.
+    }
+  }
+});
+```
+
+## Further reading
+
+- [Let installed web applications be file handlers](/file-handling/)
+- [The File System Access API: simplifying access to local files](/file-system-access/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/sw.js b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/sw.js
new file mode 100644
index 00000000000..5b5fc18fab6
--- /dev/null
+++ b/src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/sw.js
@@ -0,0 +1,30 @@
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
diff --git a/src/site/content/en/patterns/files/index.md b/src/site/content/en/patterns/files/index.md
new file mode 100644
index 00000000000..d7d7f5c0cf2
--- /dev/null
+++ b/src/site/content/en/patterns/files/index.md
@@ -0,0 +1,6 @@
+---
+layout: pattern-set
+title: Files and directories patterns
+description: A collection of common patterns for dealing with files and directories.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/Smch2ZFw5PxkiQZPkl3v.svg
+---
diff --git a/src/site/content/en/patterns/files/open-a-directory/assets/body.html b/src/site/content/en/patterns/files/open-a-directory/assets/body.html
new file mode 100644
index 00000000000..009fd61fee5
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-a-directory/assets/body.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
+    />
+    <title>How to open a directory</title>
+  </head>
+  <body>
+    <h1>How to open a directory</h1>
+    <button type="button">Open directory</button>
+    <pre></pre>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/open-a-directory/assets/script.js b/src/site/content/en/patterns/files/open-a-directory/assets/script.js
new file mode 100644
index 00000000000..039cef2b061
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-a-directory/assets/script.js
@@ -0,0 +1,83 @@
+const button = document.querySelector('button');
+const pre = document.querySelector('pre');
+
+const openDirectory = async (mode = "read") => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    "showDirectoryPicker" in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    let directoryStructure = undefined;
+
+    const getFiles = async (dirHandle, path = dirHandle.name) => {
+      const dirs = [];
+      const files = [];
+      for await (const entry of dirHandle.values()) {
+        const nestedPath = `${path}/${entry.name}`;
+        if (entry.kind === "file") {
+          files.push(
+            entry.getFile().then((file) => {
+              file.directoryHandle = dirHandle;
+              file.handle = entry;
+              return Object.defineProperty(file, "webkitRelativePath", {
+                configurable: true,
+                enumerable: true,
+                get: () => nestedPath,
+              });
+            })
+          );
+        } else if (entry.kind === "directory") {
+          dirs.push(getFiles(entry, nestedPath));
+        }
+      }
+      return [
+        ...(await Promise.all(dirs)).flat(),
+        ...(await Promise.all(files)),
+      ];
+    };
+
+    try {
+      const handle = await showDirectoryPicker({
+        mode,
+      });
+      directoryStructure = getFiles(handle, undefined);
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        console.error(err.name, err.message);
+      }
+    }
+    return directoryStructure;
+  }
+  // Fallback if the File System Access API is not supported.
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.webkitdirectory = true;
+
+    input.addEventListener('change', () => {
+      let files = Array.from(input.files);
+      resolve(files);
+    });
+    if ('showPicker' in HTMLInputElement.prototype) {
+      input.showPicker();
+    } else {
+      input.click();
+    }
+  });
+};
+
+button.addEventListener('click', async () => {
+  const filesInDirectory = await openDirectory();
+  if (!filesInDirectory) {
+    return;
+  }
+  Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
+});
diff --git a/src/site/content/en/patterns/files/open-a-directory/assets/style.css b/src/site/content/en/patterns/files/open-a-directory/assets/style.css
new file mode 100644
index 00000000000..b627e034b24
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-a-directory/assets/style.css
@@ -0,0 +1,18 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
diff --git a/src/site/content/en/patterns/files/open-a-directory/demo.njk b/src/site/content/en/patterns/files/open-a-directory/demo.njk
new file mode 100644
index 00000000000..c28adf932b1
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-a-directory/demo.njk
@@ -0,0 +1,128 @@
+---
+patternId: files/open-a-directory
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
+    />
+    <title>How to open a directory</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to open a directory</h1>
+    <button type="button">Open directory</button>
+    <pre></pre>
+
+    {% set script %}
+      const button = document.querySelector('button');
+      const pre = document.querySelector('pre');
+
+      const openDirectory = async (mode = "read") => {
+        // Feature detection. The API needs to be supported
+        // and the app not run in an iframe.
+        const supportsFileSystemAccess =
+          "showDirectoryPicker" in window &&
+          (() => {
+            try {
+              return window.self === window.top;
+            } catch {
+              return false;
+            }
+          })();
+        // If the File System Access API is supported…
+        if (supportsFileSystemAccess) {
+          let directoryStructure = undefined;
+
+          const getFiles = async (dirHandle, path = dirHandle.name) => {
+            const dirs = [];
+            const files = [];
+            for await (const entry of dirHandle.values()) {
+              const nestedPath = `${path}/${entry.name}`;
+              if (entry.kind === "file") {
+                files.push(
+                  entry.getFile().then((file) => {
+                    file.directoryHandle = dirHandle;
+                    file.handle = entry;
+                    return Object.defineProperty(file, "webkitRelativePath", {
+                      configurable: true,
+                      enumerable: true,
+                      get: () => nestedPath,
+                    });
+                  })
+                );
+              } else if (entry.kind === "directory") {
+                dirs.push(getFiles(entry, nestedPath));
+              }
+            }
+            return [
+              ...(await Promise.all(dirs)).flat(),
+              ...(await Promise.all(files)),
+            ];
+          };
+
+          try {
+            const handle = await showDirectoryPicker({
+              mode,
+            });
+            directoryStructure = getFiles(handle, undefined);
+          } catch (err) {
+            if (err.name !== "AbortError") {
+              console.error(err.name, err.message);
+            }
+          }
+          return directoryStructure;
+        }
+        // Fallback if the File System Access API is not supported.
+        return new Promise((resolve) => {
+          const input = document.createElement('input');
+          input.type = 'file';
+          input.webkitdirectory = true;
+
+          input.addEventListener('change', () => {
+            let files = Array.from(input.files);
+            resolve(files);
+          });
+          if ('showPicker' in HTMLInputElement.prototype) {
+            input.showPicker();
+          } else {
+            input.click();
+          }
+        });
+      };
+
+      button.addEventListener('click', async () => {
+        const filesInDirectory = await openDirectory();
+        if (!filesInDirectory) {
+          return;
+        }
+        Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/open-a-directory/index.md b/src/site/content/en/patterns/files/open-a-directory/index.md
new file mode 100644
index 00000000000..7f7c0eb5b83
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-a-directory/index.md
@@ -0,0 +1,127 @@
+---
+layout: pattern
+title: How to open a directory
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to open a directory in the browser.
+height: 800
+---
+
+Dealing with directories is not something you will cope with on a daily basis,
+but occasionally the use case arises, such as wanting to process all images in a directory.
+With the File System Access API, users can now open directories in the browser
+and decide if they need write access or not.
+
+## The modern way
+
+### Using the File System Access API's `showDirectoryPicker()` method
+
+To open a directory, call
+[`showDirectoryPicker()`](https://developer.mozilla.org/docs/Web/API/Window/showDirectoryPicker),
+which returns a promise with the picked directory. If you need write access, you can pass `{ mode: 'readwrite' }` to the method.
+
+{% BrowserCompat 'api.Window.showDirectoryPicker' %}
+
+## The classic way
+
+### Using the `<input type="file" webkitdirectory>` element
+
+The `<input type="file" webkitdirectory>` element on a page allows the user to click it and open
+a directory. The trick now consists of inserting the element invisibly into a page with JavaScript and click it programmatically.
+
+{% BrowserCompat 'api.HTMLInputElement.webkitdirectory' %}
+
+## Progressive enhancement
+
+The method below uses the File System Access API when it's supported
+and else falls back to the classic approach. In both cases the function
+returns a directory, but in case of where the File System Access API
+is supported, each file object also has a `FileSystemDirectoryHandle` stored in
+the `directoryHandle` property and a `FileSystemFileHandle` stored in the `handle` property,
+so you can optionally serialize the handles to disk.
+
+```js
+const openDirectory = async (mode = "read") => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    "showDirectoryPicker" in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    let directoryStructure = undefined;
+
+    // Recursive function that walks the directory structure.
+    const getFiles = async (dirHandle, path = dirHandle.name) => {
+      const dirs = [];
+      const files = [];
+      for await (const entry of dirHandle.values()) {
+        const nestedPath = `${path}/${entry.name}`;
+        if (entry.kind === "file") {
+          files.push(
+            entry.getFile().then((file) => {
+              file.directoryHandle = dirHandle;
+              file.handle = entry;
+              return Object.defineProperty(file, "webkitRelativePath", {
+                configurable: true,
+                enumerable: true,
+                get: () => nestedPath,
+              });
+            })
+          );
+        } else if (entry.kind === "directory") {
+          dirs.push(getFiles(entry, nestedPath));
+        }
+      }
+      return [
+        ...(await Promise.all(dirs)).flat(),
+        ...(await Promise.all(files)),
+      ];
+    };
+
+    try {
+      // Open the directory.
+      const handle = await showDirectoryPicker({
+        mode,
+      });
+      // Get the directory structure.
+      directoryStructure = getFiles(handle, undefined);
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        console.error(err.name, err.message);
+      }
+    }
+    return directoryStructure;
+  }
+  // Fallback if the File System Access API is not supported.
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.webkitdirectory = true;
+
+    input.addEventListener('change', () => {
+      let files = Array.from(input.files);
+      resolve(files);
+    });
+    if ('showPicker' in HTMLInputElement.prototype) {
+      input.showPicker();
+    } else {
+      input.click();
+    }
+  });
+};
+```
+
+## Further reading
+
+- [File System Access API](/file-system-access/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/body.html b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/body.html
new file mode 100644
index 00000000000..6217d5e1a56
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/body.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
+    />
+    <title>How to open one or multiple files</title>
+  </head>
+  <body>
+    <h1>How to open one or multiple files</h1>
+    <button type="button">Open file</button>
+    <button class="multiple" type="button">Open files</button>
+    <pre></pre>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/script.js b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/script.js
new file mode 100644
index 00000000000..65bd43cad82
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/script.js
@@ -0,0 +1,80 @@
+const button = document.querySelector('button');
+const buttonMultiple = document.querySelector('button.multiple');
+const pre = document.querySelector('pre');
+
+const openFileOrFiles = async (multiple = false) => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    "showOpenFilePicker" in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    let fileOrFiles = undefined;
+    try {
+      // Show the file picker, optionally allowing multiple files.
+      fileOrFiles = await showOpenFilePicker({ multiple });
+      if (!multiple) {
+        // Only one file is requested.
+        fileOrFiles = fileOrFiles[0];
+      }
+    } catch (err) {
+      // Fail silently if the user has simply canceled the dialog.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+      }
+    }
+    return fileOrFiles;
+  }
+  // Fallback if the File System Access API is not supported.
+  return new Promise((resolve) => {
+    // Append a new `<input type="file" multiple? />` and hide it.
+    const input = document.createElement('input');
+    input.style.display = 'none';
+    input.type = 'file';
+    document.body.append(input);
+    if (multiple) {
+      input.multiple = true;
+    }
+    // The `change` event fires when the user interacts with the dialog.
+    input.addEventListener('change', () => {
+      // Remove the `<input type="file" multiple? />` again from the DOM.
+      input.remove();
+      // If no files were selected, return.
+      if (!input.files) {
+        return;
+      }
+      // Return all files or just one file.
+      resolve(multiple ? input.files : input.files[0]);
+    });
+    // Show the picker.
+    if ('showPicker' in HTMLInputElement.prototype) {
+      input.showPicker();
+    } else {
+      input.click();
+    }
+  });
+};
+
+button.addEventListener('click', async () => {
+  const file = await openFileOrFiles();
+  if (!file) {
+    return;
+  }
+  pre.textContent += `${file.name}\n`;
+});
+
+buttonMultiple.addEventListener('click', async () => {
+  const files = await openFileOrFiles(true);
+  if (!files) {
+    return;
+  }
+  Array.from(files).forEach((file) => (pre.textContent += `${file.name}\n`));
+});
diff --git a/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/style.css b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/style.css
new file mode 100644
index 00000000000..e37b7480d63
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-one-or-multiple-files/assets/style.css
@@ -0,0 +1,22 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+button {
+  margin: 1rem;
+}
diff --git a/src/site/content/en/patterns/files/open-one-or-multiple-files/demo.njk b/src/site/content/en/patterns/files/open-one-or-multiple-files/demo.njk
new file mode 100644
index 00000000000..6eebd01b6a8
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-one-or-multiple-files/demo.njk
@@ -0,0 +1,130 @@
+---
+patternId: files/open-one-or-multiple-files
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
+    />
+    <title>How to open one or multiple files</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      button {
+       margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to open one or multiple files</h1>
+    <button type="button">Open file</button>
+    <button class="multiple" type="button">Open files</button>
+    <pre></pre>
+
+    {% set script %}
+      const button = document.querySelector('button');
+      const buttonMultiple = document.querySelector('button.multiple');
+      const pre = document.querySelector('pre');
+
+      const openFileOrFiles = async (multiple = false) => {
+        // Feature detection. The API needs to be supported
+        // and the app not run in an iframe.
+        const supportsFileSystemAccess =
+          "showOpenFilePicker" in window &&
+          (() => {
+            try {
+              return window.self === window.top;
+            } catch {
+              return false;
+            }
+          })();
+
+        // If the File System Access API is supported…
+        if (supportsFileSystemAccess) {
+          let fileOrFiles = undefined;
+          try {
+            // Show the file picker, optionally allowing multiple files.
+            fileOrFiles = await showOpenFilePicker({ multiple });
+            if (!multiple) {
+              // Only one file is requested.
+              fileOrFiles = fileOrFiles[0];
+            }
+          } catch (err) {
+            // Fail silently if the user has simply canceled the dialog.
+            if (err.name !== 'AbortError') {
+              console.error(err.name, err.message);
+            }
+          }
+          return fileOrFiles;
+        }
+        // Fallback if the File System Access API is not supported.
+        return new Promise((resolve) => {
+          // Append a new `<input type="file" multiple? />` and hide it.
+          const input = document.createElement('input');
+          input.style.display = 'none';
+          input.type = 'file';
+          document.body.append(input);
+          if (multiple) {
+            input.multiple = true;
+          }
+          // The `change` event fires when the user interacts with the dialog.
+          input.addEventListener('change', () => {
+            // Remove the `<input type="file" multiple? />` again from the DOM.
+            input.remove();
+            // If no files were selected, return.
+            if (!input.files) {
+              return;
+            }
+            // Return all files or just one file.
+            resolve(multiple ? input.files : input.files[0]);
+          });
+          // Show the picker.
+          if ('showPicker' in HTMLInputElement.prototype) {
+            input.showPicker();
+          } else {
+            input.click();
+          }
+        });
+      };
+
+      button.addEventListener('click', async () => {
+        const file = await openFileOrFiles();
+        if (!file) {
+          return;
+        }
+        pre.textContent += `${file.name}\n`;
+      });
+
+      buttonMultiple.addEventListener('click', async () => {
+        const files = await openFileOrFiles(true);
+        if (!files) {
+          return;
+        }
+        Array.from(files).forEach((file) => (pre.textContent += `${file.name}\n`));
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/open-one-or-multiple-files/index.md b/src/site/content/en/patterns/files/open-one-or-multiple-files/index.md
new file mode 100644
index 00000000000..ed2d81bfa15
--- /dev/null
+++ b/src/site/content/en/patterns/files/open-one-or-multiple-files/index.md
@@ -0,0 +1,123 @@
+---
+layout: pattern
+title: How to open one or multiple files
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to open one or multiple files in the browser.
+height: 800
+---
+
+Dealing with files is one of the most common operations for apps on the web.
+Traditionally, users needed to upload a file, make some changes to it, and then
+download it again, resulting in a copy in the Downloads folder.
+With the File System Access API, users can now open files
+directly, make modifications, and save back the changes to the original file.
+
+## The modern way
+
+### Using the File System Access API's `showOpenFilePicker()` method
+
+To open a file, call
+[`showOpenFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showOpenFilePicker),
+which returns a promise with an array of
+the picked file or files. If you need multiple files, you can pass `{ multiple: true, }` to the method.
+
+{% BrowserCompat 'api.Window.showOpenFilePicker' %}
+
+## The classic way
+
+### Using the `<input type="file">` element
+
+The `<input type="file">` element on a page allows the user to click it and open
+one or multiple files. The trick now consists of inserting the element invisibly into a page with JavaScript and clicking it programmatically.
+
+{% BrowserCompat 'html.elements.input' %}
+
+## Progressive enhancement
+
+The method below uses the File System Access API when it's supported
+and else falls back to the classic approach. In both cases the function
+returns an array of files, but in case of where the File System Access API
+is supported, each file object also has a `FileSystemFileHandle` stored in
+the `handle` property, so you can optionally serialize the handle to disk.
+
+```js
+const openFileOrFiles = async (multiple = false) => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    "showOpenFilePicker" in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    let fileOrFiles = undefined;
+    try {
+      // Show the file picker, optionally allowing multiple files.
+      const handles = await showOpenFilePicker({ multiple });
+      // Only one file is requested.
+      if (!multiple) {
+        // Add the `FileSystemFileHandle` as `.handle`.
+        fileOrFiles = await handles[0].getFile();
+        fileOrFiles.handle = handles[0];
+      } else {
+        fileOrFiles = await Promise.all(
+          handles.map(async (handle) => {
+            const file = await handle.getFile();
+            // Add the `FileSystemFileHandle` as `.handle`.
+            file.handle = handle;
+            return file;
+          })
+        );
+      }
+    } catch (err) {
+      // Fail silently if the user has simply canceled the dialog.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+      }
+    }
+    return fileOrFiles;
+  }
+  // Fallback if the File System Access API is not supported.
+  return new Promise((resolve) => {
+    // Append a new `<input type="file" multiple? />` and hide it.
+    const input = document.createElement('input');
+    input.style.display = 'none';
+    input.type = 'file';
+    document.body.append(input);
+    if (multiple) {
+      input.multiple = true;
+    }
+    // The `change` event fires when the user interacts with the dialog.
+    input.addEventListener('change', () => {
+      // Remove the `<input type="file" multiple? />` again from the DOM.
+      input.remove();
+      // If no files were selected, return.
+      if (!input.files) {
+        return;
+      }
+      // Return all files or just one file.
+      resolve(multiple ? Array.from(input.files) : input.files[0]);
+    });
+    // Show the picker.
+    if ('showPicker' in HTMLInputElement.prototype) {
+      input.showPicker();
+    } else {
+      input.click();
+    }
+  });
+};
+```
+
+## Further reading
+
+- [File System Access API](/file-system-access/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/body.html b/src/site/content/en/patterns/files/receive-shared-files/assets/body.html
new file mode 100644
index 00000000000..f78b6932de1
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/assets/body.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="manifest.json" />
+    <title>How to receive shared files</title>
+    <link rel="stylesheet" href="style.css" />
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          const registration = await navigator.serviceWorker.register(
+            'sw.js',
+          );
+          console.log(
+            'Service worker registered for scope',
+            registration.scope,
+          );
+        });
+      }
+    </script>
+    <script src="script.js" type="module"></script>
+  </head>
+  <body>
+    <h1>How to receive shared files</h1>
+    <p>Install the app. After the installation, try sharing an image to it from another app.
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.png b/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.png differ
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.svg b/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/assets/favicon.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/manifest.json b/src/site/content/en/patterns/files/receive-shared-files/assets/manifest.json
new file mode 100644
index 00000000000..aabf3369b55
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/assets/manifest.json
@@ -0,0 +1,32 @@
+{
+  "name": "How to receive shared files",
+  "short_name": "Shared files",
+  "start_url": "../demo.html",
+  "id": "../demo.html",
+  "icons": [
+    {
+      "src": "../assets/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "../assets/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "display": "standalone",
+  "share_target": {
+    "action": "../receive-files/",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "image",
+          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/script.js b/src/site/content/en/patterns/files/receive-shared-files/assets/script.js
new file mode 100644
index 00000000000..e4437c60bca
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/assets/script.js
@@ -0,0 +1,14 @@
+window.addEventListener('load', async () => {
+  if (location.search.includes('share-target')) {
+    const keys = await caches.keys();
+    const mediaCache = await caches.open(
+      keys.filter((key) => key.startsWith('media'))[0],
+    );
+    const image = await mediaCache.match('shared-image');
+    if (image) {
+      const blob = await image.blob();
+      await mediaCache.delete('shared-image');
+      // Handle the shared file somehow.
+    }
+  }
+});
diff --git a/src/site/content/en/patterns/files/receive-shared-files/assets/style.css b/src/site/content/en/patterns/files/receive-shared-files/assets/style.css
new file mode 100644
index 00000000000..370d8a2599a
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/assets/style.css
@@ -0,0 +1,19 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
diff --git a/src/site/content/en/patterns/files/receive-shared-files/demo.njk b/src/site/content/en/patterns/files/receive-shared-files/demo.njk
new file mode 100644
index 00000000000..ec5613e596f
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/demo.njk
@@ -0,0 +1,89 @@
+---
+patternId: files/receive-shared-files
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <title>How to receive shared files</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+      }
+
+      img {
+        height: auto;
+        max-width: 100%;
+        display: block;
+      }
+
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to receive shared files</h1>
+
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <p>Install the app. After the installation, try sharing an image to it from another app.</p>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      if ('serviceWorker' in navigator) {
+          window.addEventListener('load', async () => {
+            const registration = await navigator.serviceWorker.register(
+              'sw.js',
+            );
+            console.log(
+              'Service worker registered for scope',
+              registration.scope,
+            );
+          });
+        }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      window.addEventListener('load', async () => {
+        if (location.search.includes('share-target')) {
+          const keys = await caches.keys();
+          const mediaCache = await caches.open(
+            keys.filter((key) => key.startsWith('media'))[0],
+          );
+          const image = await mediaCache.match('shared-image');
+          if (image) {
+            const blob = await image.blob();
+            await mediaCache.delete('shared-image');
+            // Handle the shared file somehow.
+          }
+        }
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/receive-shared-files/index.md b/src/site/content/en/patterns/files/receive-shared-files/index.md
new file mode 100644
index 00000000000..c042fc5eb81
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/index.md
@@ -0,0 +1,92 @@
+---
+layout: pattern
+title: How to receive shared files
+date: 2022-10-10
+authors:
+  - pliao
+description: >
+  Learn how to receive shared files from other websites in your web app with the Web Share Target
+  API.
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - assets/favicon.png
+  - assets/favicon.svg
+---
+
+## The modern way
+
+### Using the Web Share Target API
+
+First, declare a `share_target` in your web app manifest that lists an `action` (your URL that handles
+shared files), a `method` (`"POST"` for files) and an `enctype` (`"multipart/form-data"` for
+files) and a `params` object that contains a `files` property with an array of objects with a `name`
+and `accept` property that list the sharable file types and the name to obtain them.
+
+```json
+{
+  "share_target": {
+    "action": "/receive-files/",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "image",
+          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
+        }
+      ]
+    }
+  }
+}
+```
+
+You then need to handle incoming `POST` requests in the service worker. The file is temporarily
+stored in a media cache, so it can be consumed in the client. This can be done by redirecting the
+app to a URL with a special marker query parameter like `share-target`.
+
+```js
+self.addEventListener('fetch', (fetchEvent) => {
+  if (fetchEvent.request.url.endsWith('/receive-files/') && fetchEvent.request.method === 'POST') {
+    return fetchEvent.respondWith(
+      (async () => {
+        const formData = await fetchEvent.request.formData();
+        const image = formData.get('image');
+        const keys = await caches.keys();
+        const mediaCache = await caches.open(keys.filter((key) => key.startsWith('media'))[0]);
+        await mediaCache.put('shared-image', new Response(image));
+        return Response.redirect('./?share-target', 303);
+      })(),
+    );
+  }
+});
+```
+
+Finally, you need to consume the file in the client.
+
+```js
+window.addEventListener('load', async () => {
+  if (location.search.includes('share-target')) {
+    const keys = await caches.keys();
+    const mediaCache = await caches.open(
+      keys.filter((key) => key.startsWith('media'))[0],
+    );
+    const image = await mediaCache.match('shared-image');
+    if (image) {
+      const blob = await image.blob();
+      await mediaCache.delete('shared-image');
+      // Handle the shared file somehow.
+    }
+  }
+});
+```
+
+{% BrowserCompat 'html.manifest.share_target' %}
+
+## Further reading
+
+- [Receiving shared data with the Web Share Target API](/web-share-target/)
+- [W3C Web Share Target API](https://w3c.github.io/web-share-target/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/receive-shared-files/sw.js b/src/site/content/en/patterns/files/receive-shared-files/sw.js
new file mode 100644
index 00000000000..cad050ec27f
--- /dev/null
+++ b/src/site/content/en/patterns/files/receive-shared-files/sw.js
@@ -0,0 +1,42 @@
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.url.endsWith('/receive-files/') && event.request.method === 'POST') {
+    return event.respondWith(
+      (async () => {
+        const formData = await event.request.formData();
+        const image = formData.get('image');
+        const keys = await caches.keys();
+        const mediaCache = await caches.open(keys.filter((key) => key.startsWith('media'))[0]);
+        await mediaCache.put('shared-image', new Response(image));
+        return Response.redirect('./?share-target', 303);
+      })(),
+    );
+  }
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
diff --git a/src/site/content/en/patterns/files/save-a-file/assets/body.html b/src/site/content/en/patterns/files/save-a-file/assets/body.html
new file mode 100644
index 00000000000..d64a674175c
--- /dev/null
+++ b/src/site/content/en/patterns/files/save-a-file/assets/body.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to save a file</title>
+  </head>
+  <body>
+    <h1>How to save a file</h1>
+
+    <label
+      >Text to save
+      <textarea rows="3">
+Some sample text for you to save. Feel free to edit this.</textarea
+      >
+    </label>
+    <label>File name <input class="text" value="example.txt" /></label>
+    <button class="text" type="button">Save text</button>
+
+    <label
+      >Image to save
+      <img
+        src="https://cdn.glitch.global/75170424-3d76-41d7-ae77-72d0efb0401b/AVIF%20Test%20picture%20(JPEG%20converted%20to%20AVIF%20with%20Convertio).avif?v=1658240752363"
+        alt="Blue flower."
+        width="630"
+        height="420"
+    /></label>
+    <label>File name <input class="img" value="example.avif" /></label>
+    <button class="img" type="button">Save image</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/save-a-file/assets/script.js b/src/site/content/en/patterns/files/save-a-file/assets/script.js
new file mode 100644
index 00000000000..092c9650a83
--- /dev/null
+++ b/src/site/content/en/patterns/files/save-a-file/assets/script.js
@@ -0,0 +1,67 @@
+const textarea = document.querySelector('textarea');
+const textInput = document.querySelector('input.text');
+const textButton = document.querySelector('button.text');
+
+const img = document.querySelector('img');
+const imgInput = document.querySelector('input.img');
+const imgButton = document.querySelector('button.img');
+
+const saveFile = async (blob, suggestedName) => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    'showSaveFilePicker' in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    try {
+      // Show the file save dialog.
+      const handle = await showSaveFilePicker({
+        suggestedName,
+      });
+      // Write the blob to the file.
+      const writable = await handle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+      return;
+    } catch (err) {
+      // Fail silently if the user has simply canceled the dialog.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+        return;
+      }
+    }
+  }
+  // Fallback if the File System Access API is not supported…
+  // Create the blob URL.
+  const blobURL = URL.createObjectURL(blob);
+  // Create the `<a download>` element and append it invisibly.
+  const a = document.createElement('a');
+  a.href = blobURL;
+  a.download = suggestedName;
+  a.style.display = 'none';
+  document.body.append(a);
+  // Click the element.
+  a.click();
+  // Revoke the blob URL and remove the element.
+  setTimeout(() => {
+    URL.revokeObjectURL(blobURL);
+    a.remove();
+  }, 1000);
+};
+
+textButton.addEventListener('click', async () => {
+  const blob = new Blob([textarea.value], { type: 'text/plain' });
+  await saveFile(blob, textInput.value);
+});
+
+imgButton.addEventListener('click', async () => {
+  const blob = await fetch(img.src).then((response) => response.blob());
+  await saveFile(blob, imgInput.value);
+});
diff --git a/src/site/content/en/patterns/files/save-a-file/assets/style.css b/src/site/content/en/patterns/files/save-a-file/assets/style.css
new file mode 100644
index 00000000000..9910b58b134
--- /dev/null
+++ b/src/site/content/en/patterns/files/save-a-file/assets/style.css
@@ -0,0 +1,32 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+img {
+  max-width: 320px;
+  height: auto;
+}
+
+label,
+button,
+textarea,
+input,
+img {
+  display: block;
+  margin-block: 1rem;
+}
diff --git a/src/site/content/en/patterns/files/save-a-file/demo.njk b/src/site/content/en/patterns/files/save-a-file/demo.njk
new file mode 100644
index 00000000000..d08f813d5e1
--- /dev/null
+++ b/src/site/content/en/patterns/files/save-a-file/demo.njk
@@ -0,0 +1,144 @@
+---
+patternId: files/save-a-file
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to save a file</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      img {
+        max-width: 320px;
+        height: auto;
+      }
+
+      label,
+      button,
+      textarea,
+      input,
+      img {
+        display: block;
+        margin-block: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to save a file</h1>
+
+    <label
+      >Text to save
+      <textarea rows="3">
+Some sample text for you to save. Feel free to edit this.</textarea
+      >
+    </label>
+    <label>File name <input class="text" value="example.txt" /></label>
+    <button class="text" type="button">Save text</button>
+
+    <label
+      >Image to save
+      <img
+        src="https://cdn.glitch.global/75170424-3d76-41d7-ae77-72d0efb0401b/AVIF%20Test%20picture%20(JPEG%20converted%20to%20AVIF%20with%20Convertio).avif?v=1658240752363"
+        alt="Blue flower."
+        width="630"
+        height="420"
+    /></label>
+    <label>File name <input class="img" value="example.avif" /></label>
+    <button class="img" type="button">Save image</button>
+
+    {% set script %}
+      const textarea = document.querySelector('textarea');
+      const textInput = document.querySelector('input.text');
+      const textButton = document.querySelector('button.text');
+
+      const img = document.querySelector('img');
+      const imgInput = document.querySelector('input.img');
+      const imgButton = document.querySelector('button.img');
+
+      const saveFile = async (blob, suggestedName) => {
+        // Feature detection. The API needs to be supported
+        // and the app not run in an iframe.
+        const supportsFileSystemAccess =
+          'showSaveFilePicker' in window &&
+          (() => {
+            try {
+              return window.self === window.top;
+            } catch {
+              return false;
+            }
+          })();
+        // If the File System Access API is supported…
+        if (supportsFileSystemAccess) {
+          try {
+            // Show the file save dialog.
+            const handle = await showSaveFilePicker({
+              suggestedName,
+            });
+            // Write the blob to the file.
+            const writable = await handle.createWritable();
+            await writable.write(blob);
+            await writable.close();
+            return;
+          } catch (err) {
+            // Fail silently if the user has simply canceled the dialog.
+            if (err.name !== 'AbortError') {
+              console.error(err.name, err.message);
+            }
+            return;
+          }
+        }
+        // Fallback if the File System Access API is not supported…
+        // Create the blob URL.
+        const blobURL = URL.createObjectURL(blob);
+        // Create the `<a download>` element and append it invisibly.
+        const a = document.createElement('a');
+        a.href = blobURL;
+        a.download = suggestedName;
+        a.style.display = 'none';
+        document.body.append(a);
+        // Click the element.
+        a.click();
+        // Revoke the blob URL and remove the element.
+        setTimeout(() => {
+          URL.revokeObjectURL(blobURL);
+          a.remove();
+        }, 1000);
+      };
+
+      textButton.addEventListener('click', async () => {
+        const blob = new Blob([textarea.value], { type: 'text/plain' });
+        await saveFile(blob, textInput.value);
+      });
+
+      imgButton.addEventListener('click', async () => {
+        const blob = await fetch(img.src).then((response) => response.blob());
+        await saveFile(blob, imgInput.value);
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/save-a-file/index.md b/src/site/content/en/patterns/files/save-a-file/index.md
new file mode 100644
index 00000000000..d212d3e1b46
--- /dev/null
+++ b/src/site/content/en/patterns/files/save-a-file/index.md
@@ -0,0 +1,102 @@
+---
+layout: pattern
+title: How to save a file
+date: 2022-10-10
+updated: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to save a file in the browser.
+height: 800
+---
+
+Dealing with files is one of the most common operations for apps on the web.
+Traditionally, users needed to upload a file, make some changes to it, and then
+download it again, resulting in a copy in the Downloads folder.
+With the File System Access API, users can now open files
+directly, make modifications, and save back the changes to the original file.
+
+## The modern way
+
+### Using the File System Access API's `showSaveFilePicker()` method
+
+To save a file, call
+[`showSaveFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showSaveFilePicker),
+which returns a promise with [`FileSystemFileHandle`](https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle). You can pass the desired file name to the method as `{ suggestedName: 'example.txt' }`.
+
+{% BrowserCompat 'api.Window.showSaveFilePicker' %}
+
+## The classic way
+
+### Using the `<a download>` element
+
+The `<a download>` element on a page allows the user to click it and download
+a file. The trick now consists of inserting the element invisibly into a page with JavaScript and clicking it programmatically.
+
+{% BrowserCompat 'api.HTMLAnchorElement.download' %}
+
+## Progressive enhancement
+
+The method below uses the File System Access API when it's supported
+and else falls back to the classic approach. In both cases the function
+saves the file, but in case of where the File System Access API
+is supported, the user will get a file save dialog where they can choose
+where the file should be saved.
+
+```js
+const saveFile = async (blob, suggestedName) => {
+  // Feature detection. The API needs to be supported
+  // and the app not run in an iframe.
+  const supportsFileSystemAccess =
+    'showSaveFilePicker' in window &&
+    (() => {
+      try {
+        return window.self === window.top;
+      } catch {
+        return false;
+      }
+    })();
+  // If the File System Access API is supported…
+  if (supportsFileSystemAccess) {
+    try {
+      // Show the file save dialog.
+      const handle = await showSaveFilePicker({
+        suggestedName,
+      });
+      // Write the blob to the file.
+      const writable = await handle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+      return;
+    } catch (err) {
+      // Fail silently if the user has simply canceled the dialog.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+        return;
+      }
+    }
+  }
+  // Fallback if the File System Access API is not supported…
+  // Create the blob URL.
+  const blobURL = URL.createObjectURL(blob);
+  // Create the `<a download>` element and append it invisibly.
+  const a = document.createElement('a');
+  a.href = blobURL;
+  a.download = suggestedName;
+  a.style.display = 'none';
+  document.body.append(a);
+  // Programmatically click the element.
+  a.click();
+  // Revoke the blob URL and remove the element.
+  setTimeout(() => {
+    URL.revokeObjectURL(blobURL);
+    a.remove();
+  }, 1000);
+};
+```
+
+## Further reading
+
+- [File System Access API](/file-system-access/)
+
+## Demo
diff --git a/src/site/content/en/patterns/files/share-files/assets/body.html b/src/site/content/en/patterns/files/share-files/assets/body.html
new file mode 100644
index 00000000000..a0d88a50a97
--- /dev/null
+++ b/src/site/content/en/patterns/files/share-files/assets/body.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title></title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" type="module"></script>
+  </head>
+  <body>
+    <h1>Share a file</h1>
+    <img
+      width="200"
+      height="200"
+      alt="A cat walking in the snow."
+      src="cat.png"
+    />
+    <button type=button></button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/share-files/assets/cat.png b/src/site/content/en/patterns/files/share-files/assets/cat.png
new file mode 100644
index 00000000000..1d7acf58711
Binary files /dev/null and b/src/site/content/en/patterns/files/share-files/assets/cat.png differ
diff --git a/src/site/content/en/patterns/files/share-files/assets/script.js b/src/site/content/en/patterns/files/share-files/assets/script.js
new file mode 100644
index 00000000000..d5e9dc84659
--- /dev/null
+++ b/src/site/content/en/patterns/files/share-files/assets/script.js
@@ -0,0 +1,48 @@
+const button = document.querySelector('button');
+const img =  document.querySelector('img');
+
+const webShareSupported = 'canShare' in navigator;
+button.textContent = webShareSupported ? 'Share' : 'Download';
+
+const shareOrDownload = async (blob, fileName, title, text) => {
+  if (webShareSupported) {
+    const data = {
+      files: [
+        new File([blob], fileName, {
+          type: blob.type,
+        }),
+      ],
+      title,
+      text,
+    };
+    if (navigator.canShare(data)) {
+      try {
+        await navigator.share(data);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          console.error(err.name, err.message);
+        }
+      } finally {
+        return;
+      }
+    }
+  }
+  // Fallback
+  const a = document.createElement('a');
+  a.download = fileName;
+  a.style.display = 'none';
+  a.href = URL.createObjectURL(blob);
+  a.addEventListener('click', () => {
+    setTimeout(() => {
+      URL.revokeObjectURL(a.href);
+      a.remove();
+    }, 1000)
+  });
+  document.body.append(a);
+  a.click();
+};
+
+button.addEventListener('click', async () => {
+  const blob = await fetch(img.src).then(res => res.blob());
+  await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
+});
diff --git a/src/site/content/en/patterns/files/share-files/assets/style.css b/src/site/content/en/patterns/files/share-files/assets/style.css
new file mode 100644
index 00000000000..cc133708c6b
--- /dev/null
+++ b/src/site/content/en/patterns/files/share-files/assets/style.css
@@ -0,0 +1,29 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+
+button {
+  margin: 1rem;
+}
diff --git a/src/site/content/en/patterns/files/share-files/cat.png b/src/site/content/en/patterns/files/share-files/cat.png
new file mode 100644
index 00000000000..1d7acf58711
Binary files /dev/null and b/src/site/content/en/patterns/files/share-files/cat.png differ
diff --git a/src/site/content/en/patterns/files/share-files/demo.njk b/src/site/content/en/patterns/files/share-files/demo.njk
new file mode 100644
index 00000000000..95cfac96d13
--- /dev/null
+++ b/src/site/content/en/patterns/files/share-files/demo.njk
@@ -0,0 +1,109 @@
+---
+patternId: web-apps/share-files
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to share files</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      img,
+      video {
+        height: auto;
+        max-width: 100%;
+        display: block;
+      }
+
+      button {
+       margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to share files</h1>
+    <img
+      width="200"
+      height="200"
+      alt="A cat walking in the snow."
+      src="cat.png"
+    />
+    <button type=button></button>
+
+    {% set script %}
+      const button = document.querySelector('button');
+      const img =  document.querySelector('img');
+
+      const webShareSupported = 'canShare' in navigator;
+      button.textContent = webShareSupported ? 'Share' : 'Download';
+
+      const shareOrDownload = async (blob, fileName, title, text) => {
+        if (webShareSupported) {
+          const data = {
+            files: [
+              new File([blob], fileName, {
+                type: blob.type,
+              }),
+            ],
+            title,
+            text,
+          };
+          if (navigator.canShare(data)) {
+            try {
+              await navigator.share(data);
+            } catch (err) {
+              if (err.name !== 'AbortError') {
+                console.error(err.name, err.message);
+              }
+            } finally {
+              return;
+            }
+          }
+        }
+        // Fallback
+        const a = document.createElement('a');
+        a.download = fileName;
+        a.style.display = 'none';
+        a.href = URL.createObjectURL(blob);
+        a.addEventListener('click', () => {
+          setTimeout(() => {
+            URL.revokeObjectURL(a.href);
+            a.remove();
+          }, 1000)
+        });
+        document.body.append(a);
+        a.click();
+      };
+
+      button.addEventListener('click', async () => {
+        const blob = await fetch(img.src).then(res => res.blob());
+        await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/files/share-files/index.md b/src/site/content/en/patterns/files/share-files/index.md
new file mode 100644
index 00000000000..f4d39dabaee
--- /dev/null
+++ b/src/site/content/en/patterns/files/share-files/index.md
@@ -0,0 +1,112 @@
+---
+layout: pattern
+title: How to share files
+date: 2022-10-10
+authors:
+  - pliao
+description: >
+  Sharing files across different apps nowadays is a popular operation. To achieve this, use the navigator.share() method of Web Share API.
+height: 800
+static:
+  - cat.png
+---
+
+## The modern way
+
+### Using the Web Share API's `share()` method
+
+To share files, call
+[`navigator.share()`](https://developer.mozilla.org/docs/Web/API/Navigator/share). Note that you
+should always check if files can be shared with
+[`navigator.canShare()`](https://developer.mozilla.org/docs/Web/API/Navigator/canShare) and make
+sure your site is using HTTPS before calling the `share()` method.
+
+```js
+// Assume `blob` is a PNG image file.
+const data = {
+  files: [
+    new File([blob], 'image.png', {
+      type: blob.type,
+    }),
+  ],
+  title: 'My title',
+  text: 'My text',
+};
+if (navigator.canShare(data)) {
+  await navigator.share(data);
+}
+```
+
+{% BrowserCompat 'api.Navigator.share' %}
+
+## The classic way
+
+The next best thing to offer to the user if the Web Share API is not supported is falling back to letting the user download the file, so they can share it manually, for example, via email or via a messenger or online social network app.
+
+{% BrowserCompat 'api.HTMLAnchorElement.download' %}
+
+## Progressive enhancement
+
+The method below uses the Web Share API when the browser supports it and when the data can be shared based on the [supported file types](https://developer.mozilla.org/docs/Web/API/Navigator/share#shareable_file_types).
+Else, it falls back to downloading the file.
+
+```js
+const button = document.querySelector('button');
+const img =  document.querySelector('img');
+
+// Feature detection
+const webShareSupported = 'canShare' in navigator;
+// Update the button action text.
+button.textContent = webShareSupported ? 'Share' : 'Download';
+
+const shareOrDownload = async (blob, fileName, title, text) => {
+  // Using the Web Share API.
+  if (webShareSupported) {
+    const data = {
+      files: [
+        new File([blob], fileName, {
+          type: blob.type,
+        }),
+      ],
+      title,
+      text,
+    };
+    if (navigator.canShare(data)) {
+      try {
+        await navigator.share(data);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          console.error(err.name, err.message);
+        }
+      } finally {
+        return;
+      }
+    }
+  }
+  // Fallback implementation.
+  const a = document.createElement('a');
+  a.download = fileName;
+  a.style.display = 'none';
+  a.href = URL.createObjectURL(blob);
+  a.addEventListener('click', () => {
+    setTimeout(() => {
+      URL.revokeObjectURL(a.href);
+      a.remove();
+    }, 1000)
+  });
+  document.body.append(a);
+  a.click();
+};
+
+button.addEventListener('click', async () => {
+  const blob = await fetch(img.src).then(res => res.blob());
+  await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
+});
+```
+
+## Further reading
+
+- [Web Share API on MDN](https://developer.mozilla.org/docs/Web/API/Navigator/share)
+- [Integrate with the OS sharing UI with the Web Share API](/web-share/)
+
+## Demo
diff --git a/src/site/content/en/patterns/index.md b/src/site/content/en/patterns/index.md
new file mode 100644
index 00000000000..b26ec6e955e
--- /dev/null
+++ b/src/site/content/en/patterns/index.md
@@ -0,0 +1,5 @@
+---
+layout: patterns
+title: Patterns
+description: A collection of code snippets to help you optimize your web projects.
+---
diff --git a/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/body.html b/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/body.html
new file mode 100644
index 00000000000..191ce06e502
--- /dev/null
+++ b/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/body.html
@@ -0,0 +1,7 @@
+<div class="parent">
+  <div class="card">
+    <h1>Video Title</h1>
+    <div class="visual"></div>
+    <p>Descriptive Text goes here</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/style.css b/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/style.css
new file mode 100644
index 00000000000..3056ad21f87
--- /dev/null
+++ b/src/site/content/en/patterns/layout/aspect-ratio-image-card/assets/style.css
@@ -0,0 +1,15 @@
+.parent {
+  display: grid;
+  place-items: center;
+}
+
+.visual {
+  aspect-ratio: 16 / 9;
+}
+
+.card {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/aspect-ratio-image-card/demo.md b/src/site/content/en/patterns/layout/aspect-ratio-image-card/demo.md
new file mode 100644
index 00000000000..ca00043597a
--- /dev/null
+++ b/src/site/content/en/patterns/layout/aspect-ratio-image-card/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/aspect-ratio-image-card
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/aspect-ratio-image-card/index.md b/src/site/content/en/patterns/layout/aspect-ratio-image-card/index.md
new file mode 100644
index 00000000000..9729538220e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/aspect-ratio-image-card/index.md
@@ -0,0 +1,29 @@
+---
+layout: pattern
+title: Aspect ratio image card
+description: Maintains the aspect ratio of an image in a card, while letting you resize the card.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4'>
+  </video>
+</figure>
+
+With the [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) property, as you resize the card, the green visual block maintains this 16 x 9 aspect ratio. We are respecting the aspect ratio with `aspect-ratio: 16 / 9`.
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+To maintain a 16 x 9 aspect ratio without this property, you'd need to use a [`padding-top` hack](https://css-tricks.com/aspect-ratio-boxes/) and give it a padding of `56.25%` to set a top-to-width ratio. We will soon have a property for this to avoid the hack and the need to calculate the percentage. You can make a square with `1 / 1` ratio, a 2 to 1 ratio with `2 / 1`, and really just anything you need for this image to scale with a set size ratio.
+
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/autobot/assets/body.html b/src/site/content/en/patterns/layout/autobot/assets/body.html
new file mode 100644
index 00000000000..ca11c8aa16e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/autobot/assets/body.html
@@ -0,0 +1,3 @@
+<article class="autobot">
+  <h1>Autobot</h1>
+</article>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/autobot/assets/style.css b/src/site/content/en/patterns/layout/autobot/assets/style.css
new file mode 100644
index 00000000000..0e8f7f41d4c
--- /dev/null
+++ b/src/site/content/en/patterns/layout/autobot/assets/style.css
@@ -0,0 +1,7 @@
+.autobot {
+  display: flex;
+}
+
+.autobot > * {
+  margin: auto;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/autobot/demo.njk b/src/site/content/en/patterns/layout/autobot/demo.njk
new file mode 100644
index 00000000000..a19d1ec0cbc
--- /dev/null
+++ b/src/site/content/en/patterns/layout/autobot/demo.njk
@@ -0,0 +1,110 @@
+---
+patternId: layout/autobot
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        --surface1: #101010;
+        --surface2: #3b3b3b;
+        --text1: hsl(200 20% 80%);
+
+        --pink: hsl(330 60% 71%);
+        --purple: hsl(267 90% 70%);
+        --blue: hsl(188 90% 70%);
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --surface1:#fffffe;
+          --surface2: #c6c6c6;
+          --text1: hsl(200 20% 20%);
+        }
+      }
+
+      html {
+        block-size: 100%;
+        color-scheme: dark;
+      }
+
+      body {
+        min-block-size: 100%;
+        margin: 0;
+        background: var(--surface1);
+        color: var(--text1);
+        font-family: system-ui;
+        display: grid;
+        place-content: center;
+      }
+
+      body,h1 {
+        background: var(--surface1)
+      }
+
+      h1 {
+        margin: 0;
+        font-weight: lighter;
+        padding: 1ch 2ch;
+        border-radius: 1rem
+      }
+
+      article {
+        background: var(--surface2);
+        border-radius: 1rem 1rem 0 1rem;
+        color: var(--text1);
+
+        overflow: auto;
+        resize: both;
+      }
+
+      footer {
+        display: flex;
+        justify-content: space-between;
+        margin-block-start: .5ch;
+      }
+
+      footer > button {
+        padding: 1ch 2ch;
+        cursor: pointer;
+      }
+
+      .autobot {
+        display: flex;
+      }
+
+      .autobot > * {
+        margin: auto;
+      }
+
+      [has-centering-styles] {
+        border: 2px solid hotpink;
+      }
+    </style>
+  </head>
+  <body>
+    <article class="autobot" has-centering-styles style="inline-size: 30ch; block-size: 15ch;">
+      <h1 has-centering-styles>Autobot</h1>
+    </article>
+    <footer>
+      <button onclick="addEl()">Add element</button>
+      <div>Resize ⤴</div>
+    </footer>
+
+    {% set script %}
+      const examples = ['Sibling', 'Sibling with a long name', 'Maybe a whole paragraph of content, you never know!', 'Short']
+      let position = 0
+
+      function addEl() {
+        let newNode = document.createElement('h1')
+        newNode.textContent = examples[position++] || 'Sibling'
+        newNode.setAttribute('has-centering-styles', true)
+
+        document.querySelector('article').appendChild(newNode)
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/layout/autobot/index.md b/src/site/content/en/patterns/layout/autobot/index.md
new file mode 100644
index 00000000000..fc38984be24
--- /dev/null
+++ b/src/site/content/en/patterns/layout/autobot/index.md
@@ -0,0 +1,22 @@
+---
+layout: pattern
+title: Autobot
+description: |
+  A centering technique where an element pushes equally from all edges of a flex
+  container. Best for quick centering for single items only.
+  <br><br>
+  See the full article for many more details about this
+  technique and when it's efficient.
+  <br><br>
+  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+A centering technique where an element pushes equally from all edges of a flex
+container. Best for quick centering for single items only.
+
+See the full article for many more details about this
+technique and when it's efficient.
+
+<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
diff --git a/src/site/content/en/patterns/layout/clamping-card/assets/body.html b/src/site/content/en/patterns/layout/clamping-card/assets/body.html
new file mode 100644
index 00000000000..8eea1084d7d
--- /dev/null
+++ b/src/site/content/en/patterns/layout/clamping-card/assets/body.html
@@ -0,0 +1,7 @@
+<div class="parent">
+  <div class="card">
+    <h1>Title Here</h1>
+    <div class="visual"></div>
+    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/clamping-card/assets/style.css b/src/site/content/en/patterns/layout/clamping-card/assets/style.css
new file mode 100644
index 00000000000..366d1d37421
--- /dev/null
+++ b/src/site/content/en/patterns/layout/clamping-card/assets/style.css
@@ -0,0 +1,16 @@
+.parent {
+  display: grid;
+  place-items: center;
+}
+
+.card {
+  width: clamp(23ch, 60%, 46ch);
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.visual {
+    height: 125px;
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/clamping-card/demo.md b/src/site/content/en/patterns/layout/clamping-card/demo.md
new file mode 100644
index 00000000000..79b35722b38
--- /dev/null
+++ b/src/site/content/en/patterns/layout/clamping-card/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/clamping-card
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/clamping-card/index.md b/src/site/content/en/patterns/layout/clamping-card/index.md
new file mode 100644
index 00000000000..04ebbbe161e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/clamping-card/index.md
@@ -0,0 +1,30 @@
+---
+layout: pattern
+title: Clamping card
+description: Sets an absolute min and max size, and an actual size for the card.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4'>
+  </video>
+</figure>
+
+In this demo, you are setting the width using `clamp()` like so: `width: clamp(<min>, <actual>, <max>)`.
+
+This sets an absolute min and max size, and an actual size. With values, that can look like:
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+The minimum size here is `23ch` or 23 character units, and the maximum size is `46ch`, 46 characters. [Character width units](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) are based on the font size of the element (specifically the width of the `0` glyph). The 'actual' size is 50%, which represents 50% of this element's parent width.
+
+What the `clamp()` function is doing here is enabling this element to retain a 50% width *until* 50% is either greater than `46ch` (on wider viewports), or smaller than `23ch` (on smaller viewports). In the video, watch how the width of this card increases to its clamped maximum point and decreases to its clamped minimum as the parent stretches and shrinks. It then stays centered in the parent using additional properties to center it. This enables more legible layouts, as the text won't be too wide (above `46ch`) or too squished and narrow (less than `23ch`).
+
+You can use this technique to implement responsive typography. For example: `font-size: clamp(1.5rem, 20vw, 3rem)`. In this case, the font-size of a headline would always stay clamped between `1.5rem` and `3rem` but would grow and shrink based on the `20vw` actual value to fit the width of of the viewport.
+
+This is a great technique to ensure legibility with a minimum and maximum size value, but remember it is not supported in all modern browsers so make sure you have fallbacks and do your testing.
diff --git a/src/site/content/en/patterns/layout/container-query-card/assets/body.html b/src/site/content/en/patterns/layout/container-query-card/assets/body.html
new file mode 100644
index 00000000000..561fd11f8cf
--- /dev/null
+++ b/src/site/content/en/patterns/layout/container-query-card/assets/body.html
@@ -0,0 +1,13 @@
+<div class="container">
+  <div class="card">
+    <div class="visual"></div>
+    <div>
+      <div class="meta">
+        <h1>Card Title Here</h1>
+        <h2 class="time">Subtitle</h2>
+      </div>
+        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
+      <button>I'm a button</button>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/container-query-card/assets/style.css b/src/site/content/en/patterns/layout/container-query-card/assets/style.css
new file mode 100644
index 00000000000..a378ea55fe2
--- /dev/null
+++ b/src/site/content/en/patterns/layout/container-query-card/assets/style.css
@@ -0,0 +1,41 @@
+/* Set containment on parent */
+.container {
+  container: inline-size;
+  width: 100%;
+  max-width: 750px;
+  margin: 0 auto;
+}
+
+/* Base Styles */
+.visual {
+  aspect-ratio: 1 / 1;
+}
+
+.desc {
+  display: none;
+}
+
+.card {
+  text-align: center;
+  padding: 0.5rem;
+}
+
+/* Responsive styles */
+
+/* 2-column grid layout at >=350px */
+@container (min-width: 350px) {
+  .card {
+    display: grid;
+    grid-template-columns: 40% 1fr;
+    align-items: center;
+    gap: 1rem;
+    text-align: left;
+  }
+}
+
+/* Display description at >=500px */
+@container (min-width: 500px) {
+  .desc {
+    display: block;
+  }
+}
diff --git a/src/site/content/en/patterns/layout/container-query-card/demo.md b/src/site/content/en/patterns/layout/container-query-card/demo.md
new file mode 100644
index 00000000000..2d3f72ef012
--- /dev/null
+++ b/src/site/content/en/patterns/layout/container-query-card/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/container-query-card
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/site/content/en/patterns/layout/container-query-card/index.md b/src/site/content/en/patterns/layout/container-query-card/index.md
new file mode 100644
index 00000000000..58c513dbfa3
--- /dev/null
+++ b/src/site/content/en/patterns/layout/container-query-card/index.md
@@ -0,0 +1,75 @@
+---
+layout: pattern
+title: Container query card ⚠️
+description: Card that owns its independent style logic and is styled based on its parent's inline width.
+date: 2021-11-03
+height: 500
+---
+
+{% Aside 'warning' %}
+This demo uses an experimental web technology that is not currently supported in all browsers. To try it out, open Chrome Canary and enable the `#enable-container-queries` flag.
+{% endAside %}
+
+This demo uses [container queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries) to create an intrinsic, responsive card. The card goes from a single-column layout at more narrow sizes to a two-column layout when it is at wider sizes.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-uploads/video/HodOHWjMnbNw56hvNASHWSgZyAf2/LgWuKF0DH9QhoicKgbvA.mp4">
+  </video>
+</figure>
+
+To create the container, first set containment on the parent:
+
+```css
+/* Set containment on parent */
+.container {
+  container-name: myContainer;
+  container-type: inline-size;
+  /* You can also use the shorthand property `container: myContainer / inline-size`.
+}
+```
+
+You can set some base styles:
+
+```css
+.desc {
+  display: none;
+}
+
+.card {
+  text-align: center;
+  padding: 0.5rem;
+}
+```
+
+And update those base styles according to that parent container's inline width:
+
+```css
+/* 2-column grid layout at >=350px */
+@container (min-width: 350px) {
+  .card {
+    display: grid;
+    grid-template-columns: 40% 1fr;
+    align-items: center;
+    gap: 1rem;
+    text-align: left;
+  }
+}
+
+/* Display description at >=500px */
+@container (min-width: 500px) {
+  .desc {
+    display: block;
+  }
+}
+```
+
+This means that if you have this exact same component in different parts of your UI, it's able to use its own logic to resize and best fit its container. You have better control over the card's layout than you would if you only had the global viewport to rely on. The following illustrates this by placing the container query card in a grid with varying column widths:
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-uploads/video/HodOHWjMnbNw56hvNASHWSgZyAf2/YkkfwOM5iKqsKo6gn8oF.mp4">
+  </video>
+</figure>
+
+Explore this [Demo on Codepen](https://codepen.io/una/pen/xxLPwBX)
diff --git a/src/site/content/en/patterns/layout/content-center/assets/body.html b/src/site/content/en/patterns/layout/content-center/assets/body.html
new file mode 100644
index 00000000000..525b4eb1b2e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/content-center/assets/body.html
@@ -0,0 +1,3 @@
+<article class="content-center">
+  <h1>Content Center</h1>
+</article>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/content-center/assets/style.css b/src/site/content/en/patterns/layout/content-center/assets/style.css
new file mode 100644
index 00000000000..c56766c4889
--- /dev/null
+++ b/src/site/content/en/patterns/layout/content-center/assets/style.css
@@ -0,0 +1,5 @@
+.content-center {
+  display: grid;
+  place-content: center;
+  gap: 1ch;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/content-center/demo.njk b/src/site/content/en/patterns/layout/content-center/demo.njk
new file mode 100644
index 00000000000..66a74c88d83
--- /dev/null
+++ b/src/site/content/en/patterns/layout/content-center/demo.njk
@@ -0,0 +1,107 @@
+---
+patternId: layout/content-center
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        --surface1: #101010;
+        --surface2: #3b3b3b;
+        --text1: hsl(200 20% 80%);
+
+        --pink: hsl(330 60% 71%);
+        --purple: hsl(267 90% 70%);
+        --blue: hsl(188 90% 70%);
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --surface1:#fffffe;
+          --surface2: #c6c6c6;
+          --text1: hsl(200 20% 20%);
+        }
+      }
+
+      html {
+        block-size: 100%;
+        color-scheme: dark;
+      }
+
+      body {
+        min-block-size: 100%;
+        margin: 0;
+        background: var(--surface1);
+        color: var(--text1);
+        font-family: system-ui;
+        display: grid;
+        place-content: center;
+      }
+
+      body,h1 {
+        background: var(--surface1)
+      }
+
+      h1 {
+        margin: 0;
+        font-weight: lighter;
+        padding: 1ch 2ch;
+        border-radius: 1rem
+      }
+
+      article {
+        background: var(--surface2);
+        border-radius: 1rem 1rem 0 1rem;
+        color: var(--text1);
+
+        overflow: auto;
+        resize: both;
+      }
+
+      footer {
+        display: flex;
+        justify-content: space-between;
+        margin-block-start: .5ch;
+      }
+
+      footer > button {
+        padding: 1ch 2ch;
+        cursor: pointer;
+      }
+
+      [has-centering-styles] {
+        border: 2px solid hotpink;
+      }
+
+      .content-center {
+        display: grid;
+        place-content: center;
+        gap: 1ch;
+      }
+    </style>
+  </head>
+  <body>
+    <article class="content-center" has-centering-styles style="inline-size: 30ch; block-size: 15ch;">
+      <h1>Content Center</h1>
+    </article>
+    <footer>
+      <button onclick="addEl()">Add element</button>
+      <div>Resize ⤴</div>
+    </footer>
+
+    {% set script %}
+      const examples = ['Sibling', 'Sibling with a long name', 'Maybe a whole paragraph of content, you never know!', 'Short']
+      let position = 0
+
+      function addEl() {
+        let newNode = document.createElement('h1')
+        newNode.textContent = examples[position++] || 'Sibling'
+
+        document.querySelector('article').appendChild(newNode)
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/layout/content-center/index.md b/src/site/content/en/patterns/layout/content-center/index.md
new file mode 100644
index 00000000000..75b663b8bcf
--- /dev/null
+++ b/src/site/content/en/patterns/layout/content-center/index.md
@@ -0,0 +1,22 @@
+---
+layout: pattern
+title: Content Center
+description: |
+  A centering technique that is only a few lines of CSS, works great for many elements,
+  but has the side effect of making children match the width of the widest element.
+  <br><br>
+  See the full article for many more details about this
+  technique and when it's efficient.
+  <br><br>
+  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+A centering technique that is only a few lines of CSS, works great for many elements,
+but has the side effect of making children match the width of the widest element.
+
+See the full article for many more details about this
+technique and when it's efficient.
+
+<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
diff --git a/src/site/content/en/patterns/layout/deconstructed-pancake/assets/body.html b/src/site/content/en/patterns/layout/deconstructed-pancake/assets/body.html
new file mode 100644
index 00000000000..74e830d55cc
--- /dev/null
+++ b/src/site/content/en/patterns/layout/deconstructed-pancake/assets/body.html
@@ -0,0 +1,5 @@
+<div class="parent">
+  <div class="box">1</div>
+  <div class="box">2</div>
+  <div class="box">3</div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/deconstructed-pancake/assets/style.css b/src/site/content/en/patterns/layout/deconstructed-pancake/assets/style.css
new file mode 100644
index 00000000000..fafd0e40c98
--- /dev/null
+++ b/src/site/content/en/patterns/layout/deconstructed-pancake/assets/style.css
@@ -0,0 +1,13 @@
+.parent {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.box {
+  /*  Stretching: */
+  flex: 1 1 150px; 
+  margin: 5px;
+  background: red;
+  gap: 1rem;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/deconstructed-pancake/demo.md b/src/site/content/en/patterns/layout/deconstructed-pancake/demo.md
new file mode 100644
index 00000000000..21fe556051e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/deconstructed-pancake/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/deconstructed-pancake
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/deconstructed-pancake/index.md b/src/site/content/en/patterns/layout/deconstructed-pancake/index.md
new file mode 100644
index 00000000000..5fc15038c5d
--- /dev/null
+++ b/src/site/content/en/patterns/layout/deconstructed-pancake/index.md
@@ -0,0 +1,54 @@
+---
+layout: pattern
+title: Deconstructed pancake
+description: Create a layout that stretches to fit the space, and snaps to the next line at a minimum size.
+date: 2021-11-03
+---
+
+This is a common layout for marketing sites, for example, which may have a row of three items, usually with an image, title, and then some text, describing some features of a product. On smaller screens, you'll want those to stack nicely, and expand as you increase the screen size.
+
+By using flexbox for this effect, you won't need media queries to adjust the placement of these elements when the screen resizes.
+
+The [flex](https://developer.mozilla.org/docs/Web/CSS/flex) shorthand stands for: `flex: <flex-grow> <flex-shrink> <flex-basis>`.
+
+## `flex-grow` Stretching
+
+If you want the boxes to stretch and fill the space as they wrap to the next line, set the value of `<flex-grow>` to 1, for example:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4'>
+  </video>
+</figure>
+
+Now, as you increase or decrease the screen size, these flex items both shrink and grow.
+
+## No stretching
+
+If you want your boxes to fill out to their `<flex-basis>` size, shrink on smaller sizes, but not stretch to fill any additional space, write: `flex: 0 1 <flex-basis>`. In this case, your `<flex-basis>` is 150px:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4'>
+  </video>
+</figure>
diff --git a/src/site/content/en/patterns/layout/fluffy-center/assets/body.html b/src/site/content/en/patterns/layout/fluffy-center/assets/body.html
new file mode 100644
index 00000000000..ac29f91d30c
--- /dev/null
+++ b/src/site/content/en/patterns/layout/fluffy-center/assets/body.html
@@ -0,0 +1,3 @@
+<article>
+  <h1 class="fluffy-center">Fluffy Center</h1>
+</article>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/fluffy-center/assets/style.css b/src/site/content/en/patterns/layout/fluffy-center/assets/style.css
new file mode 100644
index 00000000000..9df62fa9689
--- /dev/null
+++ b/src/site/content/en/patterns/layout/fluffy-center/assets/style.css
@@ -0,0 +1,4 @@
+.fluffy-center {
+  padding: 15vmin;
+  /* any large amount of padding works */
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/fluffy-center/demo.njk b/src/site/content/en/patterns/layout/fluffy-center/demo.njk
new file mode 100644
index 00000000000..0056023d3ca
--- /dev/null
+++ b/src/site/content/en/patterns/layout/fluffy-center/demo.njk
@@ -0,0 +1,112 @@
+---
+patternId: layout/fluffy-center
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        --surface1: #101010;
+        --surface2: #3b3b3b;
+        --text1: hsl(200 20% 80%);
+
+        --pink: hsl(330 60% 71%);
+        --purple: hsl(267 90% 70%);
+        --blue: hsl(188 90% 70%);
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --surface1:#fffffe;
+          --surface2: #c6c6c6;
+          --text1: hsl(200 20% 20%);
+        }
+      }
+
+      html {
+        block-size: 100%;
+        color-scheme: dark;
+      }
+
+      body {
+        min-block-size: 100%;
+        margin: 0;
+        background: var(--surface1);
+        color: var(--text1);
+        font-family: system-ui;
+        display: grid;
+        place-content: center;
+      }
+
+      body,h1 {
+        background: var(--surface1)
+      }
+
+      h1 {
+        margin: 0;
+        font-weight: lighter;
+        padding: 1ch 2ch;
+        border-radius: 1rem
+      }
+
+      article {
+        background: var(--surface2);
+        border-radius: 1rem 1rem 0 1rem;
+        color: var(--text1);
+
+        overflow: auto;
+        resize: both;
+      }
+
+      footer {
+        display: flex;
+        justify-content: space-between;
+        margin-block-start: .5ch;
+      }
+
+      footer > button {
+        padding: 1ch 2ch;
+        cursor: pointer;
+      }
+
+      [has-centering-styles] {
+        border: 2px solid hotpink;
+      }
+
+      article {
+        display: grid;
+        place-content: center;
+      }
+
+      .fluffy-center {
+        padding: 8vmin;
+      }
+    </style>
+  </head>
+  <body>
+    <article style="inline-size: 40ch; block-size: 30ch;">
+      <h1 class="fluffy-center" has-centering-styles>Fluffy Center</h1>
+    </article>
+    <footer>
+      <button onclick="addEl()">Add element</button>
+      <div>Resize ⤴</div>
+    </footer>
+
+    {% set script %}
+      const examples = ['Sibling', 'Sibling with a long name', 'Maybe a whole paragraph of content, you never know!', 'Short']
+      let position = 0
+
+      function addEl() {
+        let newNode = document.createElement('h1')
+        newNode.textContent = examples[position++] || 'Sibling'
+        newNode.setAttribute('has-centering-styles', true)
+        newNode.classList.add('fluffy-center')
+
+        document.querySelector('article').appendChild(newNode)
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/layout/fluffy-center/index.md b/src/site/content/en/patterns/layout/fluffy-center/index.md
new file mode 100644
index 00000000000..ea7ede2e62a
--- /dev/null
+++ b/src/site/content/en/patterns/layout/fluffy-center/index.md
@@ -0,0 +1,22 @@
+---
+layout: pattern
+title: Fluffy Center
+description: |
+  A centering technique that puts the content in the center via equal padding
+  around all its sides.
+  <br><br>
+  See the full article for many more details about this
+  technique and when it's efficient.
+  <br><br>
+  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
+date: 2022-06-01
+height: 500
+---
+
+A centering technique that puts the content in the center via equal padding
+around all its sides.
+
+See the full article for many more details about this
+technique and when it's efficient.
+
+<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
diff --git a/src/site/content/en/patterns/layout/gentle-flex/assets/body.html b/src/site/content/en/patterns/layout/gentle-flex/assets/body.html
new file mode 100644
index 00000000000..ddd3573c9c8
--- /dev/null
+++ b/src/site/content/en/patterns/layout/gentle-flex/assets/body.html
@@ -0,0 +1,3 @@
+<article class="gentle-flex">
+  <h1>Gentle Flex</h1>
+</article>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/gentle-flex/assets/style.css b/src/site/content/en/patterns/layout/gentle-flex/assets/style.css
new file mode 100644
index 00000000000..7b2551ae386
--- /dev/null
+++ b/src/site/content/en/patterns/layout/gentle-flex/assets/style.css
@@ -0,0 +1,7 @@
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/gentle-flex/demo.njk b/src/site/content/en/patterns/layout/gentle-flex/demo.njk
new file mode 100644
index 00000000000..003bf4445b2
--- /dev/null
+++ b/src/site/content/en/patterns/layout/gentle-flex/demo.njk
@@ -0,0 +1,109 @@
+---
+patternId: layout/gentle-flex
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        --surface1: #101010;
+        --surface2: #3b3b3b;
+        --text1: hsl(200 20% 80%);
+
+        --pink: hsl(330 60% 71%);
+        --purple: hsl(267 90% 70%);
+        --blue: hsl(188 90% 70%);
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --surface1:#fffffe;
+          --surface2: #c6c6c6;
+          --text1: hsl(200 20% 20%);
+        }
+      }
+
+      html {
+        block-size: 100%;
+        color-scheme: dark;
+      }
+
+      body {
+        min-block-size: 100%;
+        margin: 0;
+        background: var(--surface1);
+        color: var(--text1);
+        font-family: system-ui;
+        display: grid;
+        place-content: center;
+      }
+
+      body,h1 {
+        background: var(--surface1)
+      }
+
+      h1 {
+        margin: 0;
+        font-weight: lighter;
+        padding: 1ch 2ch;
+        border-radius: 1rem
+      }
+
+      article {
+        background: var(--surface2);
+        border-radius: 1rem 1rem 0 1rem;
+        color: var(--text1);
+
+        overflow: auto;
+        resize: both;
+      }
+
+      footer {
+        display: flex;
+        justify-content: space-between;
+        margin-block-start: .5ch;
+      }
+
+      footer > button {
+        padding: 1ch 2ch;
+        cursor: pointer;
+      }
+
+      [has-centering-styles] {
+        border: 2px solid hotpink;
+      }
+
+      .gentle-flex {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+      }
+    </style>
+  </head>
+  <body>
+    <article class="gentle-flex" has-centering-styles style="inline-size: 30ch; block-size: 15ch;">
+      <h1>Gentle Flex</h1>
+    </article>
+    <footer>
+      <button onclick="addEl()">Add element</button>
+      <div>Resize ⤴</div>
+    </footer>
+
+    {% set script %}
+      const examples = ['Sibling', 'Sibling with a long name', 'Maybe a whole paragraph of content, you never know!', 'Short']
+      let position = 0
+
+      function addEl() {
+        let newNode = document.createElement('h1')
+        newNode.textContent = examples[position++] || 'Sibling'
+
+        document.querySelector('article').appendChild(newNode)
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/layout/gentle-flex/index.md b/src/site/content/en/patterns/layout/gentle-flex/index.md
new file mode 100644
index 00000000000..8a9e4da8b62
--- /dev/null
+++ b/src/site/content/en/patterns/layout/gentle-flex/index.md
@@ -0,0 +1,22 @@
+---
+layout: pattern
+title: Gentle Flex
+description: |
+  A centering technique that only aligns content and doesn't change their size
+  during the process.
+  <br><br>
+  See the full article for many more details about this
+  technique and when it's efficient.
+  <br><br>
+  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+A centering technique that only aligns content and doesn't change their size
+during the process.
+
+See the full article for many more details about this
+technique and when it's efficient.
+
+<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
diff --git a/src/site/content/en/patterns/layout/holy-grail/assets/body.html b/src/site/content/en/patterns/layout/holy-grail/assets/body.html
new file mode 100644
index 00000000000..d2bb1e965a1
--- /dev/null
+++ b/src/site/content/en/patterns/layout/holy-grail/assets/body.html
@@ -0,0 +1,7 @@
+<div class="parent">
+    <header class="section coral">Header</header>
+    <div class="left-side section blue">Left Sidebar</div>
+    <main class="section green"> Main Content</main>
+    <div class="right-side section yellow">Right Sidebar</div>
+    <footer class="section coral">Footer</footer>
+  </div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/holy-grail/assets/style.css b/src/site/content/en/patterns/layout/holy-grail/assets/style.css
new file mode 100644
index 00000000000..616c8742d9e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/holy-grail/assets/style.css
@@ -0,0 +1,25 @@
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+
+header {
+  padding: 2rem;
+  grid-column: 1 / 4;
+}
+
+.left-side {
+  grid-column: 1 / 2;
+}
+
+main {
+  grid-column: 2 / 3;
+}
+
+.right-side {
+  grid-column: 3 / 4;
+}
+
+footer {
+  grid-column: 1 / 4;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/holy-grail/demo.md b/src/site/content/en/patterns/layout/holy-grail/demo.md
new file mode 100644
index 00000000000..c574abc5d7d
--- /dev/null
+++ b/src/site/content/en/patterns/layout/holy-grail/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/holy-grail
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/holy-grail/index.md b/src/site/content/en/patterns/layout/holy-grail/index.md
new file mode 100644
index 00000000000..bb241a21110
--- /dev/null
+++ b/src/site/content/en/patterns/layout/holy-grail/index.md
@@ -0,0 +1,27 @@
+---
+layout: pattern
+title: Holy grail layout
+description: Classic layout with a header, footer, and two sidebars flanking a main content area.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4'>
+  </video>
+</figure>
+
+For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main content. It's similar to the previous layout, but now with sidebars!
+
+To write this entire grid using a single line of code, use the `grid-template` property. This enables you to set both the rows and columns at the same time.
+
+The property and value pair is: `grid-template: auto 1fr auto / auto 1fr auto`. The slash between the first and second space-separated lists is the break between rows and columns.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+As in the last example, where the header and footer had auto-sized content, here the left and right sidebar are automatically sized based on their children's intrinsic size. However, this time it is horizontal size (width) instead of vertical (height).
diff --git a/src/site/content/en/patterns/layout/index.md b/src/site/content/en/patterns/layout/index.md
new file mode 100644
index 00000000000..7309430e6b1
--- /dev/null
+++ b/src/site/content/en/patterns/layout/index.md
@@ -0,0 +1,12 @@
+---
+layout: pattern-set
+title: Layout patterns
+description: A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
+hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/PRyD1Ad1GtT6IZLqWtu1.svg
+---
+
+Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS [grid](/learn/css/grid) and [flexbox](/learn/css/flexbox) to help you achieve common UI patterns such as cards, dynamic grid areas, and full-page layouts, and are supported on all modern browsers.
+
+{% Aside 'caution' %}
+This collection also includes some experimental patterns that use [container queries](https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries). These patterns are denoted by a yellow warning icon (⚠️), and are not currently supported in stable browsers.
+{% endAside %}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/line-up/assets/body.html b/src/site/content/en/patterns/layout/line-up/assets/body.html
new file mode 100644
index 00000000000..9e36a007046
--- /dev/null
+++ b/src/site/content/en/patterns/layout/line-up/assets/body.html
@@ -0,0 +1,17 @@
+<div class="container">
+  <div class="card">
+    <h3>Title - Card 1</h3>
+    <p contenteditable>Medium length description with a few more words here.</p>
+    <div class="visual"></div>
+  </div>
+  <div class="card">
+    <h3>Title - Card 2</h3>
+    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+    <div class="visual"></div>
+  </div>
+  <div class="card">
+    <h3>Title - Card 3</h3>
+    <p contenteditable>Short Description.</p>
+    <div class="visual"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/line-up/assets/style.css b/src/site/content/en/patterns/layout/line-up/assets/style.css
new file mode 100644
index 00000000000..71efb7ecd63
--- /dev/null
+++ b/src/site/content/en/patterns/layout/line-up/assets/style.css
@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.visual {
+  height: 100px;
+  width: 100%;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  justify-content: space-between;
+}
+
+h3 {
+  margin: 0
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/line-up/demo.md b/src/site/content/en/patterns/layout/line-up/demo.md
new file mode 100644
index 00000000000..d15d048b76a
--- /dev/null
+++ b/src/site/content/en/patterns/layout/line-up/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/line-up
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/line-up/index.md b/src/site/content/en/patterns/layout/line-up/index.md
new file mode 100644
index 00000000000..fe8424bf84f
--- /dev/null
+++ b/src/site/content/en/patterns/layout/line-up/index.md
@@ -0,0 +1,24 @@
+---
+layout: pattern
+title: Line up
+description: A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4'>
+  </video>
+</figure>
+
+The main point demonstrated here is the use of `justify-content: space-between`, which places the first and last child elements at the edges of their bounding box, with the remaining space evenly distributed between the elements. For these cards, they are placed in a flexbox display mode, with the direction being set to column using `flex-direction: column`.
+
+This places the title, description, and image block in a vertical column inside of the parent card. Then, applying `justify-content: space-between` anchors the first (title) and last (image block) elements to the edges of the flex container, and the descriptive text in between those gets placed with equal spacing to each endpoint.
+
+```css/3
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
diff --git a/src/site/content/en/patterns/layout/pancake-stack/assets/body.html b/src/site/content/en/patterns/layout/pancake-stack/assets/body.html
new file mode 100644
index 00000000000..35a01ae0c99
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pancake-stack/assets/body.html
@@ -0,0 +1,5 @@
+<div class="parent">
+  <header class="section yellow">Header</header>
+  <main class="section blue">Main</main>
+  <footer class="section green">Footer Content</footer>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/pancake-stack/assets/style.css b/src/site/content/en/patterns/layout/pancake-stack/assets/style.css
new file mode 100644
index 00000000000..706231ed035
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pancake-stack/assets/style.css
@@ -0,0 +1,7 @@
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+
+  /* Just for parent demo size */
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/pancake-stack/demo.md b/src/site/content/en/patterns/layout/pancake-stack/demo.md
new file mode 100644
index 00000000000..d2b54856347
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pancake-stack/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/pancake-stack
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/pancake-stack/index.md b/src/site/content/en/patterns/layout/pancake-stack/index.md
new file mode 100644
index 00000000000..872140a85c4
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pancake-stack/index.md
@@ -0,0 +1,27 @@
+---
+layout: pattern
+title: Pancake stack
+description: Commonly referred to as a sticky footer, this layout is often used for both websites and apps.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4'>
+  </video>
+</figure>
+
+Unlike the [deconstructed pancake](/patterns/layout/deconstructed-pancake), this example does not wrap its children when the screen size changes. Commonly referred to as a [sticky footer](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers), this layout is used for both websites and apps, across mobile applications (the footer is commonly a toolbar), and websites—in particular single page applications.
+
+Adding `display: grid` to the component will give you a single column grid, however the main area will only be as tall as the content with the footer below it.
+
+To make the footer stick to the bottom,  add:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+This sets the header and footer content to automatically take the size of their children, and applies the remaining space (`1fr`) to the main area, while the `auto` sized row will take the size of the minimum content of its children, so as that content increases in size, the row itself will grow to adjust.
diff --git a/src/site/content/en/patterns/layout/pop-n-plop/assets/body.html b/src/site/content/en/patterns/layout/pop-n-plop/assets/body.html
new file mode 100644
index 00000000000..d5f75fd4c8d
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pop-n-plop/assets/body.html
@@ -0,0 +1,3 @@
+<article>
+  <h1 class="pop-n-plop">Pop n' Plop</h1>
+</article>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/pop-n-plop/assets/style.css b/src/site/content/en/patterns/layout/pop-n-plop/assets/style.css
new file mode 100644
index 00000000000..18d2dc303ed
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pop-n-plop/assets/style.css
@@ -0,0 +1,10 @@
+article {
+  position: relative;
+}
+
+.pop-n-plop {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/pop-n-plop/demo.njk b/src/site/content/en/patterns/layout/pop-n-plop/demo.njk
new file mode 100644
index 00000000000..92fe16e64df
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pop-n-plop/demo.njk
@@ -0,0 +1,114 @@
+---
+patternId: layout/pop-n-plop
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        --surface1: #101010;
+        --surface2: #3b3b3b;
+        --text1: hsl(200 20% 80%);
+
+        --pink: hsl(330 60% 71%);
+        --purple: hsl(267 90% 70%);
+        --blue: hsl(188 90% 70%);
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --surface1:#fffffe;
+          --surface2: #c6c6c6;
+          --text1: hsl(200 20% 20%);
+        }
+      }
+
+      html {
+        block-size: 100%;
+        color-scheme: dark;
+      }
+
+      body {
+        min-block-size: 100%;
+        margin: 0;
+        background: var(--surface1);
+        color: var(--text1);
+        font-family: system-ui;
+        display: grid;
+        place-content: center;
+      }
+
+      body,h1 {
+        background: var(--surface1)
+      }
+
+      h1 {
+        margin: 0;
+        font-weight: lighter;
+        padding: 1ch 2ch;
+        border-radius: 1rem
+      }
+
+      article {
+        background: var(--surface2);
+        border-radius: 1rem 1rem 0 1rem;
+        color: var(--text1);
+
+        overflow: auto;
+        resize: both;
+      }
+
+      footer {
+        display: flex;
+        justify-content: space-between;
+        margin-block-start: .5ch;
+      }
+
+      footer > button {
+        padding: 1ch 2ch;
+        cursor: pointer;
+      }
+
+      [has-centering-styles] {
+        border: 2px solid hotpink;
+      }
+
+      article {
+        position: relative;
+      }
+
+      .pop-n-plop {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    </style>
+  </head>
+  <body>
+    <article has-centering-styles style="inline-size: 30ch; block-size: 15ch;">
+      <h1 class="pop-n-plop" has-centering-styles>Pop n' Plop</h1>
+    </article>
+    <footer>
+      <button onclick="addEl()">Add element</button>
+      <div>Resize ⤴</div>
+    </footer>
+
+    {% set script %}
+      const examples = ['Sibling', 'Sibling with a long name', 'Maybe a whole paragraph of content, you never know!', 'Short']
+      let position = 0
+
+      function addEl() {
+        let newNode = document.createElement('h1')
+        newNode.textContent = examples[position++] || 'Sibling'
+        newNode.setAttribute('has-centering-styles', true)
+        newNode.classList.add('pop-n-plop')
+
+        document.querySelector('article').appendChild(newNode)
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/layout/pop-n-plop/index.md b/src/site/content/en/patterns/layout/pop-n-plop/index.md
new file mode 100644
index 00000000000..dd0df60b81e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/pop-n-plop/index.md
@@ -0,0 +1,20 @@
+---
+layout: pattern
+title: Pop n' Plop
+description: |
+  A centering technique for overlaying other content.
+  <br><br>
+  See the full article for many more details about this
+  technique and when it's efficient.
+  <br><br>
+  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+A centering technique for overlaying other content.
+
+See the full article for many more details about this
+technique and when it's efficient.
+
+<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
diff --git a/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/body.html b/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/body.html
new file mode 100644
index 00000000000..cf1addc7faa
--- /dev/null
+++ b/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/body.html
@@ -0,0 +1,7 @@
+<div class="parent white">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+    <div class="box">4</div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/style.css b/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/style.css
new file mode 100644
index 00000000000..40fe24f8415
--- /dev/null
+++ b/src/site/content/en/patterns/layout/repeat-auto-minmax/assets/style.css
@@ -0,0 +1,5 @@
+.parent {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/repeat-auto-minmax/demo.md b/src/site/content/en/patterns/layout/repeat-auto-minmax/demo.md
new file mode 100644
index 00000000000..4f3ed13cf9e
--- /dev/null
+++ b/src/site/content/en/patterns/layout/repeat-auto-minmax/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/repeat-auto-minmax
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/site/content/en/patterns/layout/repeat-auto-minmax/index.md b/src/site/content/en/patterns/layout/repeat-auto-minmax/index.md
new file mode 100644
index 00000000000..e94bce942cb
--- /dev/null
+++ b/src/site/content/en/patterns/layout/repeat-auto-minmax/index.md
@@ -0,0 +1,40 @@
+---
+layout: pattern
+title: RAM (Repeat, Auto, Minmax)
+description: A responsive layout with automatically-placed and flexible children.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4'>
+  </video>
+</figure>
+
+For this seventh example, combine some of the concepts you've already learned about to create a responsive layout with automatically-placed and flexible children. Pretty neat. The key terms to remember here are `repeat`, `auto-(fit|fill)`, and `minmax()`, which you remember by the acronym RAM.
+
+All together, it looks like:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+You are using `repeat()` again, but this time, using the `auto-fit` keyword instead of an explicit numeric value. This enables auto-placement of these child elements. These children have a base minimum value of `150px` with a maximum value `1fr`, meaning on smaller screens, they will take up the full `1fr` width, and as they reach `150px` wide each, they will start to flow onto the same line.
+
+With `auto-fit`, any completely empty tracks will collapse to `0` and the filled tracks will grow to take up their space. However, if you change this to `auto-fill`, empty tracks will take up the same amount of space they would do if filled:
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4'>
+  </video>
+</figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
diff --git a/src/site/content/en/patterns/layout/sidebar-says/assets/body.html b/src/site/content/en/patterns/layout/sidebar-says/assets/body.html
new file mode 100644
index 00000000000..1bdf1d3a541
--- /dev/null
+++ b/src/site/content/en/patterns/layout/sidebar-says/assets/body.html
@@ -0,0 +1,9 @@
+<div class="parent">
+    <div class="section yellow" contenteditable>
+    Min: 100px / Max: 25%
+    </div>
+    <div class="section blue" contenteditable>
+      This element takes the second grid position (1fr), meaning
+      it takes up the rest of the remaining space.
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/sidebar-says/assets/style.css b/src/site/content/en/patterns/layout/sidebar-says/assets/style.css
new file mode 100644
index 00000000000..3dec6aaf6d4
--- /dev/null
+++ b/src/site/content/en/patterns/layout/sidebar-says/assets/style.css
@@ -0,0 +1,4 @@
+.parent {
+  display: grid;
+  grid-template-columns: minmax(100px, 25%) 1fr;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/sidebar-says/demo.md b/src/site/content/en/patterns/layout/sidebar-says/demo.md
new file mode 100644
index 00000000000..aabe11eaa6b
--- /dev/null
+++ b/src/site/content/en/patterns/layout/sidebar-says/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/sidebar-says
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/site/content/en/patterns/layout/sidebar-says/index.md b/src/site/content/en/patterns/layout/sidebar-says/index.md
new file mode 100644
index 00000000000..216eda054ef
--- /dev/null
+++ b/src/site/content/en/patterns/layout/sidebar-says/index.md
@@ -0,0 +1,24 @@
+---
+layout: pattern
+title: Sidebar says
+description: A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.
+date: 2021-11-03
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4'>
+  </video>
+</figure>
+
+This demo takes advantage of the [minmax()](https://developer.mozilla.org/docs/Web/CSS/minmax) function for grid layouts. In the demo this function is used to set the minimum sidebar size to `100px`, but on larger screens, letting that stretch out to `25%`. The sidebar will always take up `25%` of its parent's horizontal space until that `25%` becomes smaller than `100px`.
+
+Add this by using the `grid-template-columns` property with the following value:
+`minmax(100px, 25%) 1fr`. The item in the first column (the sidebar in this case) gets a `minmax` of `100px` at `25%`, and the second item (the `main` section here) takes up the rest of the space as a single `1fr` track.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(100px, 25%) 1fr;
+}
+```
diff --git a/src/site/content/en/patterns/layout/super-centered/assets/body.html b/src/site/content/en/patterns/layout/super-centered/assets/body.html
new file mode 100644
index 00000000000..cecb5b02511
--- /dev/null
+++ b/src/site/content/en/patterns/layout/super-centered/assets/body.html
@@ -0,0 +1,5 @@
+<div class="parent">
+  <div class="box" contenteditable="">
+    :)
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/super-centered/assets/style.css b/src/site/content/en/patterns/layout/super-centered/assets/style.css
new file mode 100644
index 00000000000..461e33f9dcb
--- /dev/null
+++ b/src/site/content/en/patterns/layout/super-centered/assets/style.css
@@ -0,0 +1,7 @@
+.parent {
+  display: grid;
+  place-items: center;
+
+  /* Just for parent demo size */
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/super-centered/demo.md b/src/site/content/en/patterns/layout/super-centered/demo.md
new file mode 100644
index 00000000000..e8cb4599cdb
--- /dev/null
+++ b/src/site/content/en/patterns/layout/super-centered/demo.md
@@ -0,0 +1,100 @@
+---
+patternId: layout/super-centered
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
+
+
+
diff --git a/src/site/content/en/patterns/layout/super-centered/index.md b/src/site/content/en/patterns/layout/super-centered/index.md
new file mode 100644
index 00000000000..96ca3f595d4
--- /dev/null
+++ b/src/site/content/en/patterns/layout/super-centered/index.md
@@ -0,0 +1,19 @@
+---
+layout: pattern
+title: Super centered
+description: Centering a child div in one line of code
+date: 2021-11-03
+---
+
+Use `place-items: center` to center an element within its parent.
+
+First specify grid as the display method, and then write `place-items: center` on the same element. `place-items` is a shorthand to set both `align-items` and `justify-items` at once. By setting it to `center`, both `align-items` and `justify-items` are set to `center`.
+
+```css
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+This enables the content to be perfectly centered within the parent, regardless of intrinsic size.
diff --git a/src/site/content/en/patterns/layout/twelve-span-grid/assets/body.html b/src/site/content/en/patterns/layout/twelve-span-grid/assets/body.html
new file mode 100644
index 00000000000..9b4bd3a9665
--- /dev/null
+++ b/src/site/content/en/patterns/layout/twelve-span-grid/assets/body.html
@@ -0,0 +1,6 @@
+ <div class="parent">
+  <div class="span-12 section coral">Span 12</div>
+  <div class="span-6 section green">Span 6</div>
+  <div class="span-4 section yellow">Span 4</div>
+  <div class="span-2 section blue">Span 2</div>
+</div>
diff --git a/src/site/content/en/patterns/layout/twelve-span-grid/assets/style.css b/src/site/content/en/patterns/layout/twelve-span-grid/assets/style.css
new file mode 100644
index 00000000000..624f7e6cd66
--- /dev/null
+++ b/src/site/content/en/patterns/layout/twelve-span-grid/assets/style.css
@@ -0,0 +1,27 @@
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.span-12 {
+  grid-column: 1 / span 12;
+}
+
+.span-6 {
+  grid-column: 1 / span 6;
+}
+
+.span-4 {
+  grid-column: 4 / span 4;
+}
+
+.span-2 {
+  grid-column: 3 / span 2;
+}
+
+/* centering text */
+.section {
+  display: grid;
+  place-items: center;
+  text-align: center
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/twelve-span-grid/demo.md b/src/site/content/en/patterns/layout/twelve-span-grid/demo.md
new file mode 100644
index 00000000000..9326242ce74
--- /dev/null
+++ b/src/site/content/en/patterns/layout/twelve-span-grid/demo.md
@@ -0,0 +1,97 @@
+---
+patternId: layout/twelve-span-grid
+layout: demo
+---
+
+<style>
+  :root {
+    --coral: hsl(300, 100%, 93%);
+    --coral--b: hsl(280, 100%, 70%);
+    --blue: hsl(200, 100%, 90%);
+    --blue--b: hsl(200, 100%, 80%);
+    --green: hsl(113, 85%, 95%);
+    --green--b: hsl(84, 71%, 53%);
+    --yellow: hsl(30, 100%, 93%);
+    --yellow--b: hsl(40, 100%, 80%);
+    --page-padding: 1rem;
+  }
+
+  body {
+    font-family: system-ui, serif;
+    display: grid;
+    align-items: center;
+    height: 100%;
+  }
+
+  .box {
+    font-size: 2rem;
+    padding: 1rem;
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    border-style: dashed;
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .coral {
+    background-color: var(--coral);
+    border: 1px solid var(--coral--b);
+  }
+
+  .yellow {
+    background-color: var(--yellow);
+    border: 1px solid var(--yellow--b);
+  }
+
+  .blue,
+  .card {
+    background-color: var(--blue);
+    border: 1px solid var(--blue--b);
+  }
+
+  .green,
+  .visual {
+    background-color: var(--green);
+    border: 1px solid var(--green--b);
+  }
+
+  .section {
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-style: dashed;
+  }
+
+  .parent {
+    height: 100%;
+  }
+
+  /* Warning */
+  .warning {
+    max-width: 460px;
+    margin: 0 auto 2rem;
+    background: #ffcebf;
+    border: 1px solid tomato;
+    padding: 1rem;
+  }
+
+  h1 + h2 {
+    margin-top: -1rem;
+  }
+
+  button {
+    border: none;
+    padding: 0.5rem;
+    background: var(--coral);
+    border: 1px solid var(--coral--b);
+    font-weight: 600;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  @supports (container: inline-size) {
+    .warning {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/layout/twelve-span-grid/index.md b/src/site/content/en/patterns/layout/twelve-span-grid/index.md
new file mode 100644
index 00000000000..e1ba4d47fb8
--- /dev/null
+++ b/src/site/content/en/patterns/layout/twelve-span-grid/index.md
@@ -0,0 +1,42 @@
+---
+layout: pattern
+title: 12-span grid
+description: A grid broken up into 12 segments where you can place areas onto the tracks evenly.
+date: 2021-11-03
+height: 400
+---
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4'>
+  </video>
+</figure>
+
+Another classic: the 12-span grid. You can quickly write grids in CSS with the `repeat()` function. Using: `repeat(12, 1fr);` for the grid template columns gives you 12 columns each of `1fr`.
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+Now you have a 12 column track grid, you can place child elements on the grid. One way to do this would be to place them using grid lines. For example, `grid-column: 1 / 13` would span all the way from the first line to the last (13th) and span 12 columns. `grid-column: 1 / 5;` would span the first four.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src='https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4'>
+  </video>
+</figure>
+
+Another way to write this is by using the `span` keyword. With `span`, you set the starting line and then how many columns to span into from that starting point. In this case, `grid-column: 1 / span 12` would be equivalent to `grid-column: 1 / 13`, and `grid-column: 2 / span 6` would be equivalent to `grid-column: 2 / 8`.
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
diff --git a/src/site/content/en/patterns/media/audio-effects/assets/body.html b/src/site/content/en/patterns/media/audio-effects/assets/body.html
new file mode 100644
index 00000000000..249a4e33c4e
--- /dev/null
+++ b/src/site/content/en/patterns/media/audio-effects/assets/body.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔉</text></svg>"
+    />
+    <title>How to add effects to audio</title>
+  </head>
+  <body>
+    <h1>How to add effects to audio</h1>
+    <button type="button">Press to hear audio effect</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/audio-effects/assets/script.js b/src/site/content/en/patterns/media/audio-effects/assets/script.js
new file mode 100644
index 00000000000..be0078ef73a
--- /dev/null
+++ b/src/site/content/en/patterns/media/audio-effects/assets/script.js
@@ -0,0 +1,18 @@
+const button = document.querySelector('button');
+
+button.addEventListener('click', () => {
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const oscillator = audioCtx.createOscillator();
+  oscillator.type = 'sine';
+  // Value is in hertz.
+  oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
+
+  const biquadFilter = audioCtx.createBiquadFilter();
+  biquadFilter.type = 'lowpass';
+  biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
+  oscillator.connect(biquadFilter);
+
+  biquadFilter.connect(audioCtx.destination);
+  oscillator.start();
+  oscillator.stop(2);
+});
diff --git a/src/site/content/en/patterns/media/audio-effects/assets/style.css b/src/site/content/en/patterns/media/audio-effects/assets/style.css
new file mode 100644
index 00000000000..b627e034b24
--- /dev/null
+++ b/src/site/content/en/patterns/media/audio-effects/assets/style.css
@@ -0,0 +1,18 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
diff --git a/src/site/content/en/patterns/media/audio-effects/demo.njk b/src/site/content/en/patterns/media/audio-effects/demo.njk
new file mode 100644
index 00000000000..be66e96b8c4
--- /dev/null
+++ b/src/site/content/en/patterns/media/audio-effects/demo.njk
@@ -0,0 +1,55 @@
+---
+patternId: media/audio-effects
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔉</text></svg>"
+    />
+    <title>How to add effects to audio</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to add effects to audio</h1>
+    <button type="button">Press to hear audio effect</button>
+    {% set script %}
+      const button = document.querySelector('button');
+      button.addEventListener('click', () => {
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        const oscillator = audioCtx.createOscillator();
+        oscillator.type = 'sine';
+        // Value is in hertz.
+        oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
+        const biquadFilter = audioCtx.createBiquadFilter();
+        biquadFilter.type = 'lowpass';
+        biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
+        oscillator.connect(biquadFilter);
+        biquadFilter.connect(audioCtx.destination);
+        oscillator.start();
+        oscillator.stop(2);
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/audio-effects/index.md b/src/site/content/en/patterns/media/audio-effects/index.md
new file mode 100644
index 00000000000..04d3181ad96
--- /dev/null
+++ b/src/site/content/en/patterns/media/audio-effects/index.md
@@ -0,0 +1,84 @@
+---
+layout: pattern
+title: How to add effects to audio
+date: 2022-10-10
+authors:
+  - conwayt
+description: >
+  Learn how to use the Web Audio API to add effects to audio sources.
+height: 800
+---
+
+## The modern way
+The Web Audio API uses the `AudioContext()` interface to manage sources, filters, and destinations. Once you’ve created a new `AudioContext()`, create an audio source node, like an `AudioBufferSourceNode` or `OscillatorNode`.  As an example, consider a basic oscillator with a [low pass filter](https://en.wikipedia.org/wiki/Low-pass_filter) applied.
+
+{% BrowserCompat 'api.AudioContext' %}
+
+### Using the `createBiquadFilter()` method
+
+First, create a new `AudioContext()`. Then create an audio source node, like an [`AudioBufferSourceNode`](https://developer.mozilla.org/docs/Web/API/AudioBufferSourceNode) or [`OscillatorNode`](https://developer.mozilla.org/docs/Web/API/OscillatorNode).  You'll create a `sine` oscillator node, for this example, which has a frequency of 420 hertz from the moment it starts playing.
+
+```js
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const oscillator = audioCtx.createOscillator()
+oscillator.type = 'sine';
+ // Value is in hertz.
+oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);
+```
+
+Next, create an effect node using `createBiquadFilter()`. Set the type to `lowpass` and the frequency to start one second after the start of playback. Then connect the `biquadFilter` to the `oscillator`.
+
+```js
+const biquadFilter = audioCtx.createBiquadFilter();
+biquadFilter.type = 'lowpass';
+biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
+oscillator.connect(biquadFilter);
+```
+
+Finally connect the `biquadFilter` to the destination of the `audioCtx`, before starting the `oscillator` and stopping it after two seconds of playback.
+
+```js
+biquadFilter.connect(audioCtx.destination);
+oscillator.start();
+oscillator.stop(2);
+```
+
+The sound from the oscillator is passed through the unaffected filter, and on to the destination, which is your computer's speakers. After one second of playback, the `lowpass` filter comes into effect. After two seconds, the oscillator is stopped.
+
+{% BrowserCompat 'api.BiquadNodeFilter' %}
+### Other available filters and effects
+
+Other filter nodes can be added to an `AudioContext` to create different effects:
+
+- [`createWaveShaper()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createWaveShaper) is used to add distortion to a source.
+- [`createGain()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createGain) is used to boost the overall signal of the source it's applied to.
+- [`createConvolver()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createConvolver) is most commonly used to add reverb to a source.
+- [`createDelay()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createDelay) is used to add delay to the start of a source.
+- [`createDynamicsCompressor()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createDynamicsCompressor) is used to raise the volume of the quietest part of a source, and lower the volume of the loudest parts.
+- [`createPanner()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createPanner) and [`createStereoPanner()`](https://developer.mozilla.org/docs/Web/API/BaseAudioContext/createStereoPanner) are used for changing the spatial position of sound output.
+
+## The classic way
+
+Before the availability of the Web Audio API, there was no way to add effects to audio in the browser.  Workarounds using server-side rendering and switching between streams are possible, but this can incur a lot of network overhead.
+
+### Using the audio element
+
+The only audio effects that can be directly controlled are playback and volume.
+
+```js
+const audio = document.querySelector('audio');
+ // Sets audio volume to 50%
+audio.volume = 0.5;
+// Doubles the playback rate.
+audio.playbackRate = 2;
+```
+
+{% BrowserCompat 'api.HTMLAudioElement' %}
+
+## Further reading
+
+- [W3C Web Audio Specification](https://webaudio.github.io/web-audio-api/)
+- [Getting started with Web Audio API](/webaudio-intro/)
+- [Web Audio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)
+
+## Demo
diff --git a/src/site/content/en/patterns/media/index.md b/src/site/content/en/patterns/media/index.md
new file mode 100644
index 00000000000..7e5fe9b4127
--- /dev/null
+++ b/src/site/content/en/patterns/media/index.md
@@ -0,0 +1,10 @@
+---
+layout: pattern-set
+title: Media patterns
+description: A collection of common patterns for working with media.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/wm2Up29DH49oPbOu3xUY.svg
+---
+
+Welcome to our collection of media patterns. These intend to help you
+create modern media experiences on the web for great audio and video playback.
+<br><br>
diff --git a/src/site/content/en/patterns/media/media-session/assets/body.html b/src/site/content/en/patterns/media/media-session/assets/body.html
new file mode 100644
index 00000000000..ae390127c95
--- /dev/null
+++ b/src/site/content/en/patterns/media/media-session/assets/body.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
+    />
+    <title>How to customize media notifications</title>
+  </head>
+  <body>
+    <h1>How to customize media notifications</h1>
+    <video controls playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
+    <p>Credits: Media files are © copyright Blender Foundation | <a href="https://www.blender.org">www.blender.org</a>.</p>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/media-session/assets/script.js b/src/site/content/en/patterns/media/media-session/assets/script.js
new file mode 100644
index 00000000000..e91d8628c6f
--- /dev/null
+++ b/src/site/content/en/patterns/media/media-session/assets/script.js
@@ -0,0 +1,34 @@
+const video = document.querySelector("video");
+
+navigator.mediaSession.metadata = new MediaMetadata({
+  title: "Caminandes 2: Gran Dillama - Blender Animated Short",
+  artist: "Blender Foundation",
+  artwork: [
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-96.png",  sizes: "96x96" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-128.png", sizes: "128x128" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-256.png", sizes: "256x256" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-512.png", sizes: "512x512" },
+  ],
+});
+
+navigator.mediaSession.setActionHandler("play", async () => {
+  // Resume playback
+  try {
+    await video.play();
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+
+navigator.mediaSession.setActionHandler("pause", () => {
+  // Pause active playback
+  video.pause();
+});
+
+video.addEventListener("play", () => {
+  navigator.mediaSession.playbackState = "playing";
+});
+
+video.addEventListener("pause", () => {
+  navigator.mediaSession.playbackState = "paused";
+});
diff --git a/src/site/content/en/patterns/media/media-session/assets/style.css b/src/site/content/en/patterns/media/media-session/assets/style.css
new file mode 100644
index 00000000000..f1c6b05d996
--- /dev/null
+++ b/src/site/content/en/patterns/media/media-session/assets/style.css
@@ -0,0 +1,20 @@
+:root {
+  color-scheme: dark light;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+video {
+  display: block;
+  margin-top: 10px;
+  max-width: 100%;
+}
diff --git a/src/site/content/en/patterns/media/media-session/demo.njk b/src/site/content/en/patterns/media/media-session/demo.njk
new file mode 100644
index 00000000000..489cd43538b
--- /dev/null
+++ b/src/site/content/en/patterns/media/media-session/demo.njk
@@ -0,0 +1,80 @@
+---
+patternId: media/media-session
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
+    />
+    <title>How to customize media notifications</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      video {
+        display: block;
+        margin-top: 10px;
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to customize media notifications</h1>
+    <video controls playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
+    <p>Credits: Media files are © copyright Blender Foundation | <a href="https://www.blender.org">www.blender.org</a>.</p>
+    {% set script %}
+const video = document.querySelector("video");
+
+navigator.mediaSession.metadata = new MediaMetadata({
+  title: "Caminandes 2: Gran Dillama - Blender Animated Short",
+  artist: "Blender Foundation",
+  artwork: [
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-96.png",  sizes: "96x96" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-128.png", sizes: "128x128" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-256.png", sizes: "256x256" },
+    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-512.png", sizes: "512x512" },
+  ],
+});
+
+navigator.mediaSession.setActionHandler("play", async () => {
+  // Resume playback
+  try {
+    await video.play();
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+
+navigator.mediaSession.setActionHandler("pause", () => {
+  // Pause active playback
+  video.pause();
+});
+
+video.addEventListener("play", () => {
+  navigator.mediaSession.playbackState = "playing";
+});
+
+video.addEventListener("pause", () => {
+  navigator.mediaSession.playbackState = "paused";
+});
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/media-session/index.md b/src/site/content/en/patterns/media/media-session/index.md
new file mode 100644
index 00000000000..68b95084b3c
--- /dev/null
+++ b/src/site/content/en/patterns/media/media-session/index.md
@@ -0,0 +1,74 @@
+---
+layout: pattern
+title: How to customize media notifications
+date: 2022-11-03
+authors:
+  - beaufortfrancois
+description: >
+  Learn how to let the user control media playback on the lock screen, in a widget, or with hardware keys.
+height: 800
+---
+
+The [Media Session API](https://developer.mozilla.org/docs/Web/API/Media_Session_API) allows websites to let users know what's currently playing in their browser and control it without returning to the page that launched it. The user experience can be customized through metadata in custom media notifications, media events such as playing, pausing, seeking, and track changing. These customizations are available in several contexts, including desktop media hubs, media notifications on mobile, and even on wearable devices.
+
+{% BrowserCompat 'api.MediaSession' %}
+
+<figure>
+  {% Img src="image/admin/qwTz64KKq4rq7WeA3rlT.jpg", alt="Screenshots of Media Session contexts.", width="800", height="330" %}
+  <figcaption>Media hub on desktop, media notification on mobile, and a wearable device.</figcaption>
+</figure>
+
+When a website is playing audio or video, users automatically get media notifications either in the notification tray on mobile, or the media hub on desktop. The browser does its best to show appropriate information by using the document's title and the largest icon image it can find. The Media Session API allows you to customize the media notification with some richer media metadata such as the title, artist name, album name, and artwork as shown below.
+
+<figure>
+  {% Img src="image/admin/eiavbbCE6TlI8osR1tYT.jpg", alt="Media Session interfaces illustration.", width="800", height="353" %}
+  <figcaption>Anatomy of a media notification on mobile.</figcaption>
+</figure>
+
+The example below shows you how to create a custom media notification and respond to basic media actions such as play and pause.
+
+```js
+const video = document.querySelector("video");
+
+navigator.mediaSession.metadata = new MediaMetadata({
+  title: "Never Gonna Give You Up",
+  artist: "Rick Astley",
+  album: "Whenever You Need Somebody",
+  artwork: [
+    { src: "https://via.placeholder.com/96",  sizes: "96x96" },
+    { src: "https://via.placeholder.com/128", sizes: "128x128" },
+    { src: "https://via.placeholder.com/256", sizes: "256x256" },
+    { src: "https://via.placeholder.com/512", sizes: "512x512" },
+  ],
+});
+
+navigator.mediaSession.setActionHandler("play", async () => {
+  // Resume playback
+  try {
+    await video.play();
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+
+navigator.mediaSession.setActionHandler("pause", () => {
+  // Pause active playback
+  video.pause();
+});
+
+video.addEventListener("play", () => {
+  navigator.mediaSession.playbackState = "playing";
+});
+
+video.addEventListener("pause", () => {
+  navigator.mediaSession.playbackState = "paused";
+});
+```
+
+## Further reading
+
+- [W3C Media Session Specification](https://w3c.github.io/mediasession/)
+- [Customize media notifications and playback controls with the Media Session API](/media-session/)
+- [MDN Media Session API](https://developer.mozilla.org/docs/Web/API/Media_Session_API)
+
+## Demo
diff --git a/src/site/content/en/patterns/media/microphone-process/assets/body.html b/src/site/content/en/patterns/media/microphone-process/assets/body.html
new file mode 100644
index 00000000000..252ebb65c3a
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/assets/body.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙️</text></svg>"
+    />
+    <title>How to process audio from the user's microphone</title>
+  </head>
+  <body>
+    <h1>How to process audio from the user's microphone</h1>
+    <button id="startMicrophoneButton">Start using microphone</button>
+    <button id="stopMicrophoneButton" disabled>Stop using microphone</button>
+    <pre id="logs"></pre>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/microphone-process/assets/processor.js b/src/site/content/en/patterns/media/microphone-process/assets/processor.js
new file mode 100644
index 00000000000..0c5987cd9a8
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/assets/processor.js
@@ -0,0 +1,12 @@
+// This file is evaluated in the audio rendering thread
+// upon context.audioWorklet.addModule() call.
+
+class WorkletProcessor extends AudioWorkletProcessor {
+  process([input], [output]) {
+    // Copy inputs to outputs.
+    output[0].set(input[0]);
+    return true;
+  }
+}
+  
+registerProcessor("processor", WorkletProcessor);
diff --git a/src/site/content/en/patterns/media/microphone-process/assets/script.js b/src/site/content/en/patterns/media/microphone-process/assets/script.js
new file mode 100644
index 00000000000..887a72b3ad3
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/assets/script.js
@@ -0,0 +1,31 @@
+const startMicrophoneButton = document.querySelector('#startMicrophoneButton');
+const stopMicrophoneButton = document.querySelector('#stopMicrophoneButton');
+
+let stream;
+
+startMicrophoneButton.addEventListener("click", async () => {
+  // Prompt the user to use their microphone.
+  stream = await navigator.mediaDevices.getUserMedia({
+    audio: true,
+  });
+  const context = new AudioContext();
+  const source = context.createMediaStreamSource(stream);
+
+  // Load and execute the module script.
+  await context.audioWorklet.addModule("processor.js");
+  // Create an AudioWorkletNode. The name of the processor is the
+  // one passed to registerProcessor() in the module script.
+  const processor = new AudioWorkletNode(context, "processor");
+
+  source.connect(processor).connect(context.destination);
+
+  stopMicrophoneButton.disabled = false;
+  log("Your microphone audio is being used.");
+});
+
+stopMicrophoneButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+
+  log("Your microphone audio is not used anymore.");
+});
diff --git a/src/site/content/en/patterns/media/microphone-process/assets/style.css b/src/site/content/en/patterns/media/microphone-process/assets/style.css
new file mode 100644
index 00000000000..aabf5932e6b
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/assets/style.css
@@ -0,0 +1,23 @@
+:root {
+  color-scheme: dark light;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+button {
+  display: block;
+  margin-bottom: 4px;
+}
+pre {
+  color: red;
+  white-space: pre-line;
+}
diff --git a/src/site/content/en/patterns/media/microphone-process/demo.njk b/src/site/content/en/patterns/media/microphone-process/demo.njk
new file mode 100644
index 00000000000..949a6fe5364
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/demo.njk
@@ -0,0 +1,96 @@
+---
+patternId: media/microphone-process
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙️</text></svg>"
+    />
+    <title>How to process audio from the user's microphone</title>
+    {# Include the GA object so we can start queuing events. #}
+    {% include 'partials/analytics.njk' %}
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      button {
+        display: block;
+        margin-bottom: 4px;
+      }
+      pre {
+        color: red;
+        white-space: pre-line;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to process audio from the user's microphone</h1>
+    <button id="startMicrophoneButton">Start using microphone</button>
+    <button id="stopMicrophoneButton" disabled>Stop using microphone</button>
+    <pre id="logs"></pre>
+    {% set script %}
+      const startMicrophoneButton = document.querySelector('#startMicrophoneButton');
+      const stopMicrophoneButton = document.querySelector('#stopMicrophoneButton');
+
+      let stream;
+
+      startMicrophoneButton.addEventListener("click", async () => {
+        // Prompt the user to use their microphone.
+        stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        });
+        const context = new AudioContext();
+        const source = context.createMediaStreamSource(stream);
+
+        // Load and execute the module script.
+        await context.audioWorklet.addModule("processor.js");
+        // Create an AudioWorkletNode. The name of the processor is the
+        // one passed to registerProcessor() in the module script.
+        const processor = new AudioWorkletNode(context, "processor");
+
+        source.connect(processor).connect(context.destination);
+
+        stopMicrophoneButton.disabled = false;
+        log("Your microphone audio is being used.");
+      });
+
+      stopMicrophoneButton.addEventListener("click", () => {
+        // Stop the stream.
+        stream.getTracks().forEach(track => track.stop());
+
+        log("Your microphone audio is not used anymore.");
+      });
+
+      /* Utils */
+
+      function log(text) {
+        document.querySelector('#logs').textContent += `${text}\r\n`;
+      }
+
+      window.onunhandledrejection = (event) => {
+        log(`> ${event.reason}`);
+      };
+      window.onerror = (error) => {
+        log(`> ${error}`);
+      };
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/microphone-process/index.md b/src/site/content/en/patterns/media/microphone-process/index.md
new file mode 100644
index 00000000000..6dca7c8ed45
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/index.md
@@ -0,0 +1,84 @@
+---
+layout: pattern
+title: How to process audio from the user's microphone
+date: 2023-01-19
+authors:
+  - beaufortfrancois
+description: >
+  Learn how to process audio from the user's microphone.
+height: 800
+static:
+  - processor.js
+---
+
+Accessing the user's camera and microphone is possible on the web platform with the [Media Capture and Streams API](https://www.w3.org/TR/mediacapture-streams/). The [`getUserMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) method prompts the user to access a camera and/or microphone to capture as a media stream. This stream can then be processed in a separate [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API) thread with an [AudioWorklet](https://developer.mozilla.org/docs/Web/API/AudioWorklet) that provides very low latency audio processing.
+
+The example below shows how you can process audio from the user's microphone in a performant way.
+
+```js
+let stream;
+
+startMicrophoneButton.addEventListener("click", async () => {
+  // Prompt the user to use their microphone.
+  stream = await navigator.mediaDevices.getUserMedia({
+    audio: true,
+  });
+  const context = new AudioContext();
+  const source = context.createMediaStreamSource(stream);
+
+  // Load and execute the module script.
+  await context.audioWorklet.addModule("processor.js");
+  // Create an AudioWorkletNode. The name of the processor is the
+  // one passed to registerProcessor() in the module script.
+  const processor = new AudioWorkletNode(context, "processor");
+
+  source.connect(processor).connect(context.destination);
+  log("Your microphone audio is being used.");
+});
+
+stopMicrophoneButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+
+  log("Your microphone audio is not used anymore.");
+});
+```
+
+```js
+// processor.js
+// This file is evaluated in the audio rendering thread
+// upon context.audioWorklet.addModule() call.
+
+class Processor extends AudioWorkletProcessor {
+  process([input], [output]) {
+    // Copy inputs to outputs.
+    output[0].set(input[0]);
+    return true;
+  }
+}
+
+registerProcessor("processor", Processor);
+```
+
+## Browser support
+
+### MediaDevices.getUserMedia()
+
+{% BrowserCompat 'api.MediaDevices.getUserMedia' %}
+
+### Web Audio
+
+{% BrowserCompat 'api.AudioContext' %}
+
+### AudioWorklet
+
+{% BrowserCompat 'api.AudioWorklet' %}
+
+## Further reading
+
+- [W3C Media Capture and Streams Specification](https://www.w3.org/TR/mediacapture-streams/)
+- [W3C Web Audio Specification](https://webaudio.github.io/web-audio-api/)
+- [Enter AudioWorklet](https://developer.chrome.com/blog/audio-worklet/)
+
+## Demo
+
diff --git a/src/site/content/en/patterns/media/microphone-process/processor.js b/src/site/content/en/patterns/media/microphone-process/processor.js
new file mode 100644
index 00000000000..4406bf4707f
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-process/processor.js
@@ -0,0 +1,12 @@
+// This file is evaluated in the audio rendering thread
+// upon context.audioWorklet.addModule() call.
+
+class WorkletProcessor extends AudioWorkletProcessor {
+  process([input], [output]) {
+    // Copy inputs to outputs.
+    output[0].set(input[0]);
+    return true;
+  }
+}
+
+registerProcessor("processor", WorkletProcessor);
diff --git a/src/site/content/en/patterns/media/microphone-record/assets/body.html b/src/site/content/en/patterns/media/microphone-record/assets/body.html
new file mode 100644
index 00000000000..aeb2cdd8ab1
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-record/assets/body.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙️</text></svg>"
+    />
+    <title>How to record audio from the user's microphone</title>
+  </head>
+  <body>
+    <h1>How to record audio from the user's microphone</h1>
+    <button id="startMicrophoneButton">Start using microphone</button>
+    <button id="stopMicrophoneButton" disabled>Stop using microphone</button>
+    <button id="startRecordButton" disabled>Start recording</button>
+    <button id="stopRecordButton" disabled>Stop recording</button>
+    <pre id="logs"></pre>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/microphone-record/assets/script.js b/src/site/content/en/patterns/media/microphone-record/assets/script.js
new file mode 100644
index 00000000000..a2e3c2b67cb
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-record/assets/script.js
@@ -0,0 +1,60 @@
+const startMicrophoneButton = document.querySelector('#startMicrophoneButton');
+const stopMicrophoneButton = document.querySelector('#stopMicrophoneButton');
+const startRecordButton = document.querySelector('#startRecordButton');
+const stopRecordButton = document.querySelector('#stopRecordButton');
+
+let stream;
+let recorder;
+
+startMicrophoneButton.addEventListener("click", async () => {
+  // Prompt the user to use their microphone.
+  stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  recorder = new MediaRecorder(stream);
+
+  stopMicrophoneButton.disabled = false;
+  startRecordButton.disabled = false;
+  log("Your microphone audio is being used.");
+});
+
+stopMicrophoneButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+
+  startRecordButton.disabled = true;
+  stopRecordButton.disabled = true;
+  log("Your microphone audio is not used anymore.");
+});
+
+startRecordButton.addEventListener("click", async () => {
+  // For the sake of more legible code, this sample only uses the
+  // `showSaveFilePicker()` method. In production, you need to
+  // cater for browsers that don't support this method, as
+  // outlined in https://web.dev/patterns/files/save-a-file/.
+
+  // Prompt the user to choose where to save the recording file.
+  const suggestedName = "microphone-recording.webm";
+  const handle = await window.showSaveFilePicker({ suggestedName });
+  const writable = await handle.createWritable();
+
+  // Start recording.
+  recorder.start();
+  recorder.addEventListener("dataavailable", async (event) => {
+    // Write chunks to the file.
+    await writable.write(event.data);
+    if (recorder.state === "inactive") {
+      // Close the file when the recording stops.
+      await writable.close();
+    }
+  });
+
+  stopRecordButton.disabled = false;
+  log("Your microphone audio is being recorded locally.");
+});
+
+stopRecordButton.addEventListener("click", () => {
+  // Stop the recording.
+  recorder.stop();
+
+  stopRecordButton.disabled = true;
+  log("Your microphone audio has been successfully recorded locally.");
+});
diff --git a/src/site/content/en/patterns/media/microphone-record/assets/style.css b/src/site/content/en/patterns/media/microphone-record/assets/style.css
new file mode 100644
index 00000000000..aabf5932e6b
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-record/assets/style.css
@@ -0,0 +1,23 @@
+:root {
+  color-scheme: dark light;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+button {
+  display: block;
+  margin-bottom: 4px;
+}
+pre {
+  color: red;
+  white-space: pre-line;
+}
diff --git a/src/site/content/en/patterns/media/microphone-record/demo.njk b/src/site/content/en/patterns/media/microphone-record/demo.njk
new file mode 100644
index 00000000000..f6fb600a080
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-record/demo.njk
@@ -0,0 +1,120 @@
+---
+patternId: media/microphone-record
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙️</text></svg>"
+    />
+    <title>How to record audio from the user's microphone</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      button {
+        display: block;
+        margin-bottom: 4px;
+      }
+      pre {
+        color: red;
+        white-space: pre-line;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to record audio from the user's microphone</h1>
+    <button id="startMicrophoneButton">Start using microphone</button>
+    <button id="stopMicrophoneButton" disabled>Stop using microphone</button>
+    <button id="startRecordButton" disabled>Start recording</button>
+    <button id="stopRecordButton" disabled>Stop recording</button>
+    <pre id="logs"></pre>
+    {% set script %}
+      const startMicrophoneButton = document.querySelector('#startMicrophoneButton');
+      const stopMicrophoneButton = document.querySelector('#stopMicrophoneButton');
+      const startRecordButton = document.querySelector('#startRecordButton');
+      const stopRecordButton = document.querySelector('#stopRecordButton');
+
+      let stream;
+      let recorder;
+
+      startMicrophoneButton.addEventListener("click", async () => {
+        // Prompt the user to use their microphone.
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        recorder = new MediaRecorder(stream);
+
+        stopMicrophoneButton.disabled = false;
+        startRecordButton.disabled = false;
+        log("Your microphone audio is being used.");
+      });
+
+      stopMicrophoneButton.addEventListener("click", () => {
+        // Stop the stream.
+        stream.getTracks().forEach(track => track.stop());
+
+        startRecordButton.disabled = true;
+        stopRecordButton.disabled = true;
+        log("Your microphone audio is not used anymore.");
+      });
+
+      startRecordButton.addEventListener("click", async () => {
+        // Prompt the user to choose where to save the recording file.
+        const suggestedName = "microphone-recording.webm";
+        const handle = await window.showSaveFilePicker({ suggestedName });
+        const writable = await handle.createWritable();
+
+        // Start recording.
+        recorder.start();
+        recorder.addEventListener("dataavailable", async (event) => {
+          // Write chunks to the file.
+          await writable.write(event.data);
+          if (recorder.state === "inactive") {
+            // Close the file when the recording stops.
+            await writable.close();
+          }
+        });
+
+        stopRecordButton.disabled = false;
+        log("Your microphone audio is being recorded locally.");
+      });
+
+      stopRecordButton.addEventListener("click", () => {
+        // Stop the recording.
+        recorder.stop();
+
+        stopRecordButton.disabled = true;
+        log("Your microphone audio has been successfully recorded locally.");
+      });
+
+      /* Utils */
+
+      function log(text) {
+        document.querySelector('#logs').textContent += `${text}\r\n`;
+      }
+
+      window.onunhandledrejection = (event) => {
+        log(`> ${event.reason}`);
+      };
+      window.onerror = (error) => {
+        log(`> ${error}`);
+      };
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/microphone-record/index.md b/src/site/content/en/patterns/media/microphone-record/index.md
new file mode 100644
index 00000000000..47955bc8823
--- /dev/null
+++ b/src/site/content/en/patterns/media/microphone-record/index.md
@@ -0,0 +1,81 @@
+---
+layout: pattern
+title: How to record audio from the user's microphone
+date: 2022-10-19
+authors:
+  - beaufortfrancois
+description: >
+  Learn how to record audio from the user's microphone.
+height: 800
+---
+
+Accessing the user's camera and microphone is possible on the web platform with the [Media Capture and Streams API](https://www.w3.org/TR/mediacapture-streams/). The [`getUserMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) method prompts the user to access a camera and/or microphone to capture as a media stream. This stream can then be recorded with the [MediaRecorder API](https://developer.chrome.com/blog/mediarecorder/) or shared with others over the network. The recording can be saved to a local file via the [`showOpenFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showOpenFilePicker) method.
+
+The example below shows how you can record audio from the user's microphone in the WebM format and save the recording to the user's file system.
+
+```js
+let stream;
+let recorder;
+
+startMicrophoneButton.addEventListener("click", async () => {
+  // Prompt the user to use their microphone.
+  stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  recorder = new MediaRecorder(stream);
+});
+
+stopMicrophoneButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+});
+
+startRecordButton.addEventListener("click", async () => {
+  // For the sake of more legible code, this sample only uses the
+  // `showSaveFilePicker()` method. In production, you need to
+  // cater for browsers that don't support this method, as
+  // outlined in https://web.dev/patterns/files/save-a-file/.
+
+  // Prompt the user to choose where to save the recording file.
+  const suggestedName = "microphone-recording.webm";
+  const handle = await window.showSaveFilePicker({ suggestedName });
+  const writable = await handle.createWritable();
+
+  // Start recording.
+  recorder.start();
+  recorder.addEventListener("dataavailable", async (event) => {
+    // Write chunks to the file.
+    await writable.write(event.data);
+    if (recorder.state === "inactive") {
+      // Close the file when the recording stops.
+      await writable.close();
+    }
+  });
+});
+
+stopRecordButton.addEventListener("click", () => {
+  // Stop the recording.
+  recorder.stop();
+});
+```
+
+## Browser support
+
+### MediaDevices.getUserMedia()
+
+{% BrowserCompat 'api.MediaDevices.getUserMedia' %}
+
+### MediaRecorder API
+
+{% BrowserCompat 'api.MediaRecorder' %}
+
+### File System Access API's showSaveFilePicker()
+
+{% BrowserCompat 'api.Window.showOpenFilePicker' %}
+
+## Further reading
+
+- [W3C Media Capture and Streams Specification](https://www.w3.org/TR/mediacapture-streams/)
+- [W3C MediaStream Recording Specification](https://w3c.github.io/mediacapture-record/#mediarecorder-api)
+- [WICG File System Access Specification](https://wicg.github.io/file-system-access/)
+
+## Demo
+
diff --git a/src/site/content/en/patterns/media/picture-in-picture/assets/body.html b/src/site/content/en/patterns/media/picture-in-picture/assets/body.html
new file mode 100644
index 00000000000..36478b6ca81
--- /dev/null
+++ b/src/site/content/en/patterns/media/picture-in-picture/assets/body.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
+    />
+    <title>How to add Picture-in-Picture to video controls</title>
+  </head>
+  <body>
+    <h1>How to add Picture-in-Picture to video controls</h1>
+    <button id="togglePipButton">Picture-in-Picture</button>
+    <button id="toggleFakePipButton">Fake Picture-in-Picture</button>
+    <video autoplay muted playsinline loop src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/picture-in-picture/assets/script.js b/src/site/content/en/patterns/media/picture-in-picture/assets/script.js
new file mode 100644
index 00000000000..f2b7c76bb39
--- /dev/null
+++ b/src/site/content/en/patterns/media/picture-in-picture/assets/script.js
@@ -0,0 +1,50 @@
+const video = document.querySelector('video');
+const togglePipButton = document.querySelector('#togglePipButton');
+const toggleFakePipButton = document.querySelector('#toggleFakePipButton');
+
+togglePipButton.addEventListener("click", async (event) => {
+  togglePipButton.disabled = true;
+  try {
+    if (video !== document.pictureInPictureElement) {
+      await video.requestPictureInPicture();
+    } else {
+      await document.exitPictureInPicture();
+    }
+  } finally {
+    togglePipButton.disabled = false;
+  }
+});
+
+video.addEventListener("enterpictureinpicture", (event) => {
+  togglePipButton.classList.add("on");
+});
+
+video.addEventListener("leavepictureinpicture", (event) => {
+  togglePipButton.classList.remove("on");
+});
+
+/* Feature detection */
+if ("pictureInPictureEnabled" in document) {
+  // Hide fake PiP button if Picture-in-Picture is supported.
+  toggleFakePipButton.hidden = true;
+  // Set button ability depending on whether Picture-in-Picture can be used.
+  setPipButton();
+  video.addEventListener("loadedmetadata", setPipButton);
+  video.addEventListener("emptied", setPipButton);
+} else {
+  // Hide button if Picture-in-Picture is not supported.
+  togglePipButton.hidden = true;
+}
+
+function setPipButton() {
+  togglePipButton.disabled =
+    video.readyState === 0 ||
+    !document.pictureInPictureEnabled ||
+    video.disablePictureInPicture;
+}
+
+/* Fake Picture-in-Picture */
+toggleFakePipButton.addEventListener("click", (event) => {
+  toggleFakePipButton.classList.toggle("on");
+  video.classList.toggle("fake-pip");
+});
\ No newline at end of file
diff --git a/src/site/content/en/patterns/media/picture-in-picture/assets/style.css b/src/site/content/en/patterns/media/picture-in-picture/assets/style.css
new file mode 100644
index 00000000000..36eec95d4ac
--- /dev/null
+++ b/src/site/content/en/patterns/media/picture-in-picture/assets/style.css
@@ -0,0 +1,32 @@
+:root {
+  color-scheme: dark light;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+button:before {
+  content: "Enter ";
+}
+button.on:before {
+  content: "Leave ";
+}
+video {
+  display: block;
+  margin-top: 10px;
+  max-width: 100%;
+}
+video.fake-pip {
+  position: fixed;
+  z-index: 1000;
+  bottom: 10px;
+  right: 10px;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/media/picture-in-picture/demo.njk b/src/site/content/en/patterns/media/picture-in-picture/demo.njk
new file mode 100644
index 00000000000..3e184ba3161
--- /dev/null
+++ b/src/site/content/en/patterns/media/picture-in-picture/demo.njk
@@ -0,0 +1,109 @@
+---
+patternId: media/picture-in-picture
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
+    />
+    <title>How to add Picture-in-Picture to video controls</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      button:before {
+        content: "Enter ";
+      }
+      button.on:before {
+        content: "Leave ";
+      }
+      video {
+        display: block;
+        margin-top: 10px;
+        max-width: 100%;
+      }
+      video.fake-pip {
+        position: fixed;
+        z-index: 1000;
+        bottom: 10px;
+        right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to add Picture-in-Picture to video controls</h1>
+    <button id="togglePipButton">Picture-in-Picture</button>
+    <button id="toggleFakePipButton">Fake Picture-in-Picture</button>
+    <video autoplay muted playsinline loop src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
+    {% set script %}
+      const video = document.querySelector('video');
+      const togglePipButton = document.querySelector('#togglePipButton');
+      const toggleFakePipButton = document.querySelector('#toggleFakePipButton');
+
+      togglePipButton.addEventListener("click", async (event) => {
+        togglePipButton.disabled = true;
+        try {
+          if (video !== document.pictureInPictureElement) {
+            await video.requestPictureInPicture();
+          } else {
+            await document.exitPictureInPicture();
+          }
+        } finally {
+          togglePipButton.disabled = false;
+        }
+      });
+
+      video.addEventListener("enterpictureinpicture", (event) => {
+        togglePipButton.classList.add("on");
+      });
+
+      video.addEventListener("leavepictureinpicture", (event) => {
+        togglePipButton.classList.remove("on");
+      });
+
+      /* Feature detection */
+      if ("pictureInPictureEnabled" in document) {
+        // Hide fake PiP button if Picture-in-Picture is supported.
+        toggleFakePipButton.hidden = true;
+        // Set button ability depending on whether Picture-in-Picture can be used.
+        setPipButton();
+        video.addEventListener("loadedmetadata", setPipButton);
+        video.addEventListener("emptied", setPipButton);
+      } else {
+        // Hide button if Picture-in-Picture is not supported.
+        togglePipButton.hidden = true;
+      }
+
+      function setPipButton() {
+        togglePipButton.disabled =
+          video.readyState === 0 ||
+          !document.pictureInPictureEnabled ||
+          video.disablePictureInPicture;
+      }
+
+      /* Fake Picture-in-Picture */
+      toggleFakePipButton.addEventListener("click", (event) => {
+        toggleFakePipButton.classList.toggle("on");
+        video.classList.toggle("fake-pip");
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/picture-in-picture/index.md b/src/site/content/en/patterns/media/picture-in-picture/index.md
new file mode 100644
index 00000000000..9a603c52df8
--- /dev/null
+++ b/src/site/content/en/patterns/media/picture-in-picture/index.md
@@ -0,0 +1,89 @@
+---
+layout: pattern
+title: How to add Picture-in-Picture to video controls
+date: 2022-10-14
+authors:
+  - beaufortfrancois
+description: >
+  Learn how to create a custom Picture-in-Picture button for your video player.
+height: 800
+---
+
+## The modern way
+
+The [Picture-in-Picture (PiP) Web API](https://w3c.github.io/picture-in-picture/) allows websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites or applications on their device.
+
+{% BrowserCompat 'api.Picture-in-Picture_API' %}
+
+The example below shows you how to create a button that users can use to toggle Picture-in-Picture on a video.
+
+```js
+togglePipButton.addEventListener("click", async (event) => {
+  togglePipButton.disabled = true;
+  try {
+    if (video !== document.pictureInPictureElement) {
+      await video.requestPictureInPicture();
+    } else {
+      await document.exitPictureInPicture();
+    }
+  } finally {
+    togglePipButton.disabled = false;
+  }
+});
+
+video.addEventListener("enterpictureinpicture", (event) => {
+  togglePipButton.classList.add("on");
+});
+
+video.addEventListener("leavepictureinpicture", (event) => {
+  togglePipButton.classList.remove("on");
+});
+
+/* Feature detection */
+if ("pictureInPictureEnabled" in document) {
+  // Set button ability depending on whether Picture-in-Picture can be used.
+  setPipButton();
+  video.addEventListener("loadedmetadata", setPipButton);
+  video.addEventListener("emptied", setPipButton);
+} else {
+  // Hide button if Picture-in-Picture is not supported.
+  togglePipButton.hidden = true;
+}
+
+function setPipButton() {
+  togglePipButton.disabled =
+    video.readyState === 0 ||
+    !document.pictureInPictureEnabled ||
+    video.disablePictureInPicture;
+}
+```
+
+## The classic way
+
+Before the availability of the Picture-in-Picture Web API, there was no way to create a floating video window always on top of other windows. Playing the video on top of other elements on the web page is possible though with CSS.
+
+The example below shows you how to display your video on top of other elements at the bottom right corner of your web page when the user clicks a button.
+
+```js
+toggleFakePipButton.addEventListener("click", (event) => {
+  video.classList.toggle("fake-pip");
+});
+```
+
+```css
+/* Place the video in the bottom right corner on top of everything else via CSS. */
+video.fake-pip {
+  position: fixed;
+  z-index: 1000;
+  bottom: 10px;
+  right: 10px;
+}
+```
+
+## Further reading
+
+- [W3C Picture-in-Picture Specification](https://w3c.github.io/picture-in-picture/)
+- [Watch video using Picture-in-Picture](https://developer.chrome.com/blog/watch-video-using-picture-in-picture/)
+- [MDN Picture-in-Picture API](https://developer.mozilla.org/docs/Web/API/Picture-in-Picture_API)
+
+## Demo
diff --git a/src/site/content/en/patterns/media/screen-record/assets/body.html b/src/site/content/en/patterns/media/screen-record/assets/body.html
new file mode 100644
index 00000000000..f95e62c4fc0
--- /dev/null
+++ b/src/site/content/en/patterns/media/screen-record/assets/body.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖥️</text></svg>"
+    />
+    <title>How to record the user's screen</title>
+  </head>
+  <body>
+    <h1>How to record the user's screen</h1>
+    <button id="startShareScreenButton">Start sharing screen</button>
+    <button id="stopShareScreenButton" disabled>Stop sharing screen</button>
+    <button id="startRecordButton" disabled>Start recording</button>
+    <button id="stopRecordButton" disabled>Stop recording</button>
+    <video autoplay muted playsinline></video>
+    <pre id="logs"></pre>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/screen-record/assets/script.js b/src/site/content/en/patterns/media/screen-record/assets/script.js
new file mode 100644
index 00000000000..30fd6fcabe7
--- /dev/null
+++ b/src/site/content/en/patterns/media/screen-record/assets/script.js
@@ -0,0 +1,65 @@
+const video = document.querySelector('video');
+const startShareScreenButton = document.querySelector('#startShareScreenButton');
+const stopShareScreenButton = document.querySelector('#stopShareScreenButton');
+const startRecordButton = document.querySelector('#startRecordButton');
+const stopRecordButton = document.querySelector('#stopRecordButton');
+
+let stream;
+let recorder;
+
+startShareScreenButton.addEventListener("click", async () => {
+  // Prompt the user to share their screen.
+  stream = await navigator.mediaDevices.getDisplayMedia();
+  recorder = new MediaRecorder(stream);
+  // Preview the screen locally.
+  video.srcObject = stream;
+
+  startRecordButton.disabled = false;
+  stopShareScreenButton.disabled = false;
+  log("Your screen is being shared.");
+});
+
+stopShareScreenButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+  video.srcObject = null;
+
+  stopShareScreenButton.disabled = true;
+  startRecordButton.disabled = true;
+  stopRecordButton.disabled = true;
+  log("Your screen is not shared anymore.");
+});
+
+startRecordButton.addEventListener("click", async () => {
+  // For the sake of more legible code, this sample only uses the
+  // `showSaveFilePicker()` method. In production, you need to
+  // cater for browsers that don't support this method, as
+  // outlined in https://web.dev/patterns/files/save-a-file/.
+
+  // Prompt the user to choose where to save the recording file.
+  const suggestedName = "screen-recording.webm";
+  const handle = await window.showSaveFilePicker({ suggestedName });
+  const writable = await handle.createWritable();
+
+  // Start recording.
+  recorder.start();
+  recorder.addEventListener("dataavailable", async (event) => {
+    // Write chunks to the file.
+    await writable.write(event.data);
+    if (recorder.state === "inactive") {
+      // Close the file when the recording stops.
+      await writable.close();
+    }
+  });
+
+  stopRecordButton.disabled = false;
+  log("Your screen is being recorded locally.");
+});
+
+stopRecordButton.addEventListener("click", () => {
+  // Stop the recording.
+  recorder.stop();
+
+  stopRecordButton.disabled = true;
+  log("Your screen has been successfully recorded locally.");
+});
diff --git a/src/site/content/en/patterns/media/screen-record/assets/style.css b/src/site/content/en/patterns/media/screen-record/assets/style.css
new file mode 100644
index 00000000000..8f37fee3f09
--- /dev/null
+++ b/src/site/content/en/patterns/media/screen-record/assets/style.css
@@ -0,0 +1,30 @@
+:root {
+  color-scheme: dark light;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+button {
+  display: block;
+  margin-bottom: 4px;
+}
+video {
+  display: block;
+  margin-top: 10px;
+  max-width: 100%;
+  background: black;
+  max-height: 480px;
+}
+pre {
+  color: red;
+  white-space: pre-line;
+}
diff --git a/src/site/content/en/patterns/media/screen-record/demo.njk b/src/site/content/en/patterns/media/screen-record/demo.njk
new file mode 100644
index 00000000000..9b4642fc630
--- /dev/null
+++ b/src/site/content/en/patterns/media/screen-record/demo.njk
@@ -0,0 +1,133 @@
+---
+patternId: media/screen-record
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖥️</text></svg>"
+    />
+    <title>How to record the user's screen</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+      html {
+        box-sizing: border-box;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+      button {
+        display: block;
+        margin-bottom: 4px;
+      }
+      video {
+        display: block;
+        margin-top: 10px;
+        max-width: 100%;
+        background: black;
+        max-height: 480px;
+      }
+      pre {
+        color: red;
+        white-space: pre-line;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to record the user's screen</h1>
+    <button id="startShareScreenButton">Start sharing screen</button>
+    <button id="stopShareScreenButton" disabled>Stop sharing screen</button>
+    <button id="startRecordButton" disabled>Start recording</button>
+    <button id="stopRecordButton" disabled>Stop recording</button>
+    <video autoplay muted playsinline></video>
+    <pre id="logs"></pre>
+    {% set script %}
+      const video = document.querySelector('video');
+      const startShareScreenButton = document.querySelector('#startShareScreenButton');
+      const stopShareScreenButton = document.querySelector('#stopShareScreenButton');
+      const startRecordButton = document.querySelector('#startRecordButton');
+      const stopRecordButton = document.querySelector('#stopRecordButton');
+
+      let stream;
+      let recorder;
+
+      startShareScreenButton.addEventListener("click", async () => {
+        // Prompt the user to share their screen.
+        stream = await navigator.mediaDevices.getDisplayMedia();
+        recorder = new MediaRecorder(stream);
+        // Preview the screen locally.
+        video.srcObject = stream;
+
+        startRecordButton.disabled = false;
+        stopShareScreenButton.disabled = false;
+        log("Your screen is being shared.");
+      });
+
+      stopShareScreenButton.addEventListener("click", () => {
+        // Stop the stream.
+        stream.getTracks().forEach(track => track.stop());
+        video.srcObject = null;
+
+        stopShareScreenButton.disabled = true;
+        startRecordButton.disabled = true;
+        stopRecordButton.disabled = true;
+        log("Your screen is not shared anymore.");
+      });
+
+      startRecordButton.addEventListener("click", async () => {
+        // Prompt the user to choose where to save the recording file.
+        const suggestedName = "screen-recording.webm";
+        const handle = await window.showSaveFilePicker({ suggestedName });
+        const writable = await handle.createWritable();
+
+        // Start recording.
+        recorder.start();
+        recorder.addEventListener("dataavailable", async (event) => {
+          // Write chunks to the file.
+          await writable.write(event.data);
+          if (recorder.state === "inactive") {
+            // Close the file when the recording stops.
+            await writable.close();
+          }
+        });
+
+        stopRecordButton.disabled = false;
+        log("Your screen is being recorded locally.");
+      });
+
+      stopRecordButton.addEventListener("click", () => {
+        // Stop the recording.
+        recorder.stop();
+
+        stopRecordButton.disabled = true;
+        log("Your screen has been successfully recorded locally.");
+      });
+
+      /* Utils */
+
+      function log(text) {
+        document.querySelector('#logs').textContent += `${text}\r\n`;
+      }
+
+      window.onunhandledrejection = (event) => {
+        log(`> ${event.reason}`);
+      };
+      window.onerror = (error) => {
+        log(`> ${error}`);
+      };
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/media/screen-record/index.md b/src/site/content/en/patterns/media/screen-record/index.md
new file mode 100644
index 00000000000..d00512b46d8
--- /dev/null
+++ b/src/site/content/en/patterns/media/screen-record/index.md
@@ -0,0 +1,84 @@
+---
+layout: pattern
+title: How to record the user's screen
+date: 2022-10-14
+authors:
+  - beaufortfrancois
+description: >
+  Learn how to record the user's screen.
+height: 800
+---
+
+Sharing tabs, windows, and screens is possible on the web platform with the [Screen Capture API](https://w3c.github.io/mediacapture-screen-share/). The [`getDisplayMedia()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) method allows the user to select a screen to capture as a media stream. This stream can then be recorded with the [MediaRecorder API](https://developer.chrome.com/blog/mediarecorder/) or shared with others over the network. The recording can be saved to a local file via the [`showOpenFilePicker()`](https://developer.mozilla.org/docs/Web/API/Window/showOpenFilePicker) method.
+
+The example below shows how you can record the user's screen in the WebM format, locally preview on the same page, and save the recording to the user's file system.
+
+```js
+let stream;
+let recorder;
+
+shareScreenButton.addEventListener("click", async () => {
+  // Prompt the user to share their screen.
+  stream = await navigator.mediaDevices.getDisplayMedia();
+  recorder = new MediaRecorder(stream);
+  // Preview the screen locally.
+  video.srcObject = stream;
+});
+
+stopShareScreenButton.addEventListener("click", () => {
+  // Stop the stream.
+  stream.getTracks().forEach(track => track.stop());
+  video.srcObject = null;
+});
+
+startRecordButton.addEventListener("click", async () => {
+  // For the sake of more legible code, this sample only uses the
+  // `showSaveFilePicker()` method. In production, you need to
+  // cater for browsers that don't support this method, as
+  // outlined in https://web.dev/patterns/files/save-a-file/.
+
+  // Prompt the user to choose where to save the recording file.
+  const suggestedName = "screen-recording.webm";
+  const handle = await window.showSaveFilePicker({ suggestedName });
+  const writable = await handle.createWritable();
+
+  // Start recording.
+  recorder.start();
+  recorder.addEventListener("dataavailable", async (event) => {
+    // Write chunks to the file.
+    await writable.write(event.data);
+    if (recorder.state === "inactive") {
+      // Close the file when the recording stops.
+      await writable.close();
+    }
+  });
+});
+
+stopRecordButton.addEventListener("click", () => {
+  // Stop the recording.
+  recorder.stop();
+});
+```
+
+## Browser support
+
+### MediaDevices.getDisplayMedia()
+
+{% BrowserCompat 'api.MediaDevices.getDisplayMedia' %}
+
+### MediaRecorder API
+
+{% BrowserCompat 'api.MediaRecorder' %}
+
+### File System Access API's showSaveFilePicker()
+
+{% BrowserCompat 'api.Window.showOpenFilePicker' %}
+
+## Further reading
+
+- [W3C Screen Capture Specification](https://w3c.github.io/mediacapture-screen-share/)
+- [W3C MediaStream Recording Specification](https://w3c.github.io/mediacapture-record/#mediarecorder-api)
+- [WICG File System Access Specification](https://wicg.github.io/file-system-access/)
+
+## Demo
+
diff --git a/src/site/content/en/patterns/theming/color-schemes/assets/body.html b/src/site/content/en/patterns/theming/color-schemes/assets/body.html
new file mode 100644
index 00000000000..1dd2248a14a
--- /dev/null
+++ b/src/site/content/en/patterns/theming/color-schemes/assets/body.html
@@ -0,0 +1,52 @@
+<header>
+  <h3>Scheme</h3>
+  <form id="theme-switcher">
+    <div>
+      <input checked type="radio" id="auto" name="theme" value="auto">
+      <label for="auto">Auto</label>
+    </div>
+    <div>
+      <input type="radio" id="light" name="theme" value="light">
+      <label for="light">Light</label>
+    </div>
+    <div>
+      <input type="radio" id="dark" name="theme" value="dark">
+      <label for="dark">Dark</label>
+    </div>
+    <div>
+      <input type="radio" id="dim" name="theme" value="dim">
+      <label for="dim">Dim</label>
+    </div>
+  </form>
+</header>
+
+<main>
+  <section>
+    <div class="surface-samples">
+      <div class="surface1 rad-shadow">1</div>
+      <div class="surface2 rad-shadow">2</div>
+      <div class="surface3 rad-shadow">3</div>
+      <div class="surface4 rad-shadow">4</div>
+    </div>
+  </section>
+
+  <section>
+    <div class="text-samples">
+      <h1 class="text1">
+        <span class="swatch brand rad-shadow"></span>
+        Brand
+      </h1>
+      <h1 class="text1">
+        <span class="swatch text1 rad-shadow"></span>
+        Text Color 1
+      </h1>
+      <h1 class="text2">
+        <span class="swatch text2 rad-shadow"></span>
+        Text Color 2
+      </h1>
+      <br>
+      <p class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <p class="text2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+  </section>
+</main>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/theming/color-schemes/assets/script.js b/src/site/content/en/patterns/theming/color-schemes/assets/script.js
new file mode 100644
index 00000000000..4b86de20046
--- /dev/null
+++ b/src/site/content/en/patterns/theming/color-schemes/assets/script.js
@@ -0,0 +1,8 @@
+const switcher = document.querySelector('#theme-switcher')
+const doc = document.firstElementChild
+
+switcher.addEventListener('input', e =>
+  setTheme(e.target.value))
+
+const setTheme = theme =>
+  doc.setAttribute('color-scheme', theme)
\ No newline at end of file
diff --git a/src/site/content/en/patterns/theming/color-schemes/assets/style.css b/src/site/content/en/patterns/theming/color-schemes/assets/style.css
new file mode 100644
index 00000000000..6a937dc9529
--- /dev/null
+++ b/src/site/content/en/patterns/theming/color-schemes/assets/style.css
@@ -0,0 +1,158 @@
+* {
+  /* brand foundation */
+  --brand-hue: 200;
+  --brand-saturation: 100%;
+  --brand-lightness: 50%;
+
+  /* light */
+  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
+  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
+  --text2-light: hsl(var(--brand-hue) 30% 30%);
+  --surface1-light: hsl(var(--brand-hue) 25% 90%);
+  --surface2-light: hsl(var(--brand-hue) 20% 99%);
+  --surface3-light: hsl(var(--brand-hue) 20% 92%);
+  --surface4-light: hsl(var(--brand-hue) 20% 85%);
+  --surface-shadow-light: var(--brand-hue) 10% 20%;
+  --shadow-strength-light: .02;
+
+  /* dark */
+  --brand-dark: hsl(
+    var(--brand-hue)
+    calc(var(--brand-saturation) / 2)
+    calc(var(--brand-lightness) / 1.5)
+  );
+  --text1-dark: hsl(var(--brand-hue) 15% 85%);
+  --text2-dark: hsl(var(--brand-hue) 5% 65%);
+  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
+  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
+  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
+  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
+  --surface-shadow-dark: var(--brand-hue) 50% 3%;
+  --shadow-strength-dark: .8;
+
+  /* dim */
+  --brand-dim: hsl(
+    var(--brand-hue)
+    calc(var(--brand-saturation) / 1.25)
+    calc(var(--brand-lightness) / 1.25)
+  );
+  --text1-dim: hsl(var(--brand-hue) 15% 75%);
+  --text2-dim: hsl(var(--brand-hue) 10% 61%);
+  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
+  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
+  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
+  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
+  --surface-shadow-dim: var(--brand-hue) 30% 13%;
+  --shadow-strength-dim: .2;
+}
+
+:root {
+  color-scheme: light;
+
+  /* set defaults */
+  --brand: var(--brand-light);
+  --text1: var(--text1-light);
+  --text2: var(--text2-light);
+  --surface1: var(--surface1-light);
+  --surface2: var(--surface2-light);
+  --surface3: var(--surface3-light);
+  --surface4: var(--surface4-light);
+  --surface-shadow: var(--surface-shadow-light);
+  --shadow-strength: var(--shadow-strength-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    --brand: var(--brand-dark);
+    --text1: var(--text1-dark);
+    --text2: var(--text2-dark);
+    --surface1: var(--surface1-dark);
+    --surface2: var(--surface2-dark);
+    --surface3: var(--surface3-dark);
+    --surface4: var(--surface4-dark);
+    --surface-shadow: var(--surface-shadow-dark);
+    --shadow-strength: var(--shadow-strength-dark);
+  }
+}
+
+[color-scheme="light"] {
+  color-scheme: light;
+
+  --brand: var(--brand-light);
+  --text1: var(--text1-light);
+  --text2: var(--text2-light);
+  --surface1: var(--surface1-light);
+  --surface2: var(--surface2-light);
+  --surface3: var(--surface3-light);
+  --surface4: var(--surface4-light);
+  --surface-shadow: var(--surface-shadow-light);
+  --shadow-strength: var(--shadow-strength-light);
+}
+
+[color-scheme="dark"] {
+  color-scheme: dark;
+
+  --brand: var(--brand-dark);
+  --text1: var(--text1-dark);
+  --text2: var(--text2-dark);
+  --surface1: var(--surface1-dark);
+  --surface2: var(--surface2-dark);
+  --surface3: var(--surface3-dark);
+  --surface4: var(--surface4-dark);
+  --surface-shadow: var(--surface-shadow-dark);
+  --shadow-strength: var(--shadow-strength-dark);
+}
+
+[color-scheme="dim"] {
+  color-scheme: dark;
+
+  --brand: var(--brand-dim);
+  --text1: var(--text1-dim);
+  --text2: var(--text2-dim);
+  --surface1: var(--surface1-dim);
+  --surface2: var(--surface2-dim);
+  --surface3: var(--surface3-dim);
+  --surface4: var(--surface4-dim);
+  --surface-shadow: var(--surface-shadow-dim);
+  --shadow-strength: var(--shadow-strength-dim);
+}
+
+/* READY TO USE! */
+.brand {
+  color: var(--brand);
+  background-color: var(--brand);
+}
+
+.surface1 {
+  background-color: var(--surface1);
+  color: var(--text2);
+}
+
+.surface2 {
+  background-color: var(--surface2);
+  color: var(--text2);
+}
+
+.surface3 {
+  background-color: var(--surface3);
+  color: var(--text1);
+}
+
+.surface4 {
+  background-color: var(--surface4);
+  color: var(--text1);
+}
+
+.text1 {
+  color: var(--text1);
+}
+
+p.text1 {
+  font-weight: 200;
+}
+
+.text2 {
+  color: var(--text2);
+}
diff --git a/src/site/content/en/patterns/theming/color-schemes/demo.njk b/src/site/content/en/patterns/theming/color-schemes/demo.njk
new file mode 100644
index 00000000000..f6bab942305
--- /dev/null
+++ b/src/site/content/en/patterns/theming/color-schemes/demo.njk
@@ -0,0 +1,81 @@
+---
+patternId: theming/color-schemes
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      *{--brand-hue:200;--brand-saturation:100%;--brand-lightness:50%;--brand-light:hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));--text1-light:hsl(var(--brand-hue) var(--brand-saturation) 10%);--text2-light:hsl(var(--brand-hue) 30% 30%);--surface1-light:hsl(var(--brand-hue) 25% 90%);--surface2-light:hsl(var(--brand-hue) 20% 99%);--surface3-light:hsl(var(--brand-hue) 20% 92%);--surface4-light:hsl(var(--brand-hue) 20% 85%);--surface-shadow-light:var(--brand-hue) 10% 20%;--shadow-strength-light:.02;--brand-dark:hsl(
+        var(--brand-hue)
+        calc(var(--brand-saturation) / 2)
+        calc(var(--brand-lightness) / 1.5)
+      );--text1-dark:hsl(var(--brand-hue) 15% 85%);--text2-dark:hsl(var(--brand-hue) 5% 65%);--surface1-dark:hsl(var(--brand-hue) 10% 10%);--surface2-dark:hsl(var(--brand-hue) 10% 15%);--surface3-dark:hsl(var(--brand-hue) 5%  20%);--surface4-dark:hsl(var(--brand-hue) 5% 25%);--surface-shadow-dark:var(--brand-hue) 50% 3%;--shadow-strength-dark:.8;--brand-dim:hsl(
+        var(--brand-hue)
+        calc(var(--brand-saturation) / 1.25)
+        calc(var(--brand-lightness) / 1.25)
+      );--text1-dim:hsl(var(--brand-hue) 15% 75%);--text2-dim:hsl(var(--brand-hue) 10% 61%);--surface1-dim:hsl(var(--brand-hue) 10% 20%);--surface2-dim:hsl(var(--brand-hue) 10% 25%);--surface3-dim:hsl(var(--brand-hue) 5%  30%);--surface4-dim:hsl(var(--brand-hue) 5% 35%);--surface-shadow-dim:var(--brand-hue) 30% 13%;--shadow-strength-dim:.2}:root{color-scheme:light;--brand:var(--brand-light);--text1:var(--text1-light);--text2:var(--text2-light);--surface1:var(--surface1-light);--surface2:var(--surface2-light);--surface3:var(--surface3-light);--surface4:var(--surface4-light);--surface-shadow:var(--surface-shadow-light);--shadow-strength:var(--shadow-strength-light)}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--brand:var(--brand-dark);--text1:var(--text1-dark);--text2:var(--text2-dark);--surface1:var(--surface1-dark);--surface2:var(--surface2-dark);--surface3:var(--surface3-dark);--surface4:var(--surface4-dark);--surface-shadow:var(--surface-shadow-dark);--shadow-strength:var(--shadow-strength-dark)}}[color-scheme=light]{color-scheme:light;--brand:var(--brand-light);--text1:var(--text1-light);--text2:var(--text2-light);--surface1:var(--surface1-light);--surface2:var(--surface2-light);--surface3:var(--surface3-light);--surface4:var(--surface4-light);--surface-shadow:var(--surface-shadow-light);--shadow-strength:var(--shadow-strength-light)}[color-scheme=dark]{color-scheme:dark;--brand:var(--brand-dark);--text1:var(--text1-dark);--text2:var(--text2-dark);--surface1:var(--surface1-dark);--surface2:var(--surface2-dark);--surface3:var(--surface3-dark);--surface4:var(--surface4-dark);--surface-shadow:var(--surface-shadow-dark);--shadow-strength:var(--shadow-strength-dark)}[color-scheme=dim]{color-scheme:dark;--brand:var(--brand-dim);--text1:var(--text1-dim);--text2:var(--text2-dim);--surface1:var(--surface1-dim);--surface2:var(--surface2-dim);--surface3:var(--surface3-dim);--surface4:var(--surface4-dim);--surface-shadow:var(--surface-shadow-dim);--shadow-strength:var(--shadow-strength-dim)}*{box-sizing:border-box;margin:0}html{block-size:100%;background-color:var(--surface1);color:var(--text1)}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;padding:5vmax;display:grid;align-content:center;justify-content:center;place-content:center;gap:5vmax}main{display:flex;flex-flow:row wrap;align-items:center;align-content:center;justify-content:center;gap:10vmax 10vmin}section{display:grid;gap:2.5vh}h1{font-weight:100}p{max-inline-size:35ch;font-size:1.25rem;line-height:1.5}header{display:inline-grid;gap:1ch}form{display:flex;gap:2ch}form>div{display:inline-flex;align-items:center;gap:.75ch}.surface-samples{display:grid;--size:20ch;grid-template-columns:var(--size) var(--size);grid-auto-rows:var(--size);gap:2ch}@media (max-width:480px){.surface-samples{--size:40vw}}.surface-samples>*{border-radius:1rem;display:grid;align-content:center;justify-content:center;place-content:center;font-size:3rem;font-weight:200}.text-samples{display:grid;gap:1.5ch}.text-samples>h1{font-size:2.5rem;display:inline-flex;align-items:center;gap:1ch}.brand{color:var(--brand);background-color:var(--brand)}.surface1{background-color:var(--surface1);color:var(--text2)}.surface2{background-color:var(--surface2);color:var(--text2)}.surface3{background-color:var(--surface3);color:var(--text1)}.surface4{background-color:var(--surface4);color:var(--text1)}.text1{color:var(--text1)}p.text1{font-weight:200}.text2{color:var(--text2)}.swatch{display:inline-block;flex-shrink:0;inline-size:1.5ch;block-size:1.5ch;border-radius:50%}.swatch.text1{background-color:var(--text1)}.swatch.text2{background-color:var(--text2)}.rad-shadow{border:1px solid hsl(var(--brand-hue) 10% 50% / 15%);box-shadow:0 1rem .5rem -.5rem;box-shadow:0 2.8px 2.2px hsl(var(--surface-shadow)/ calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow)/ calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow)/ calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow)/ calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow)/ calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))}.github-corner{fill:var(--surface4);color:var(--text2)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+  </head>
+  <body>
+    <header>
+      <h3>Scheme</h3>
+      <form id="theme-switcher">
+        <div>
+          <input checked type="radio" id="auto" name="theme" value="auto">
+          <label for="auto">Auto</label>
+        </div>
+        <div>
+          <input type="radio" id="light" name="theme" value="light">
+          <label for="light">Light</label>
+        </div>
+        <div>
+          <input type="radio" id="dark" name="theme" value="dark">
+          <label for="dark">Dark</label>
+        </div>
+        <div>
+          <input type="radio" id="dim" name="theme" value="dim">
+          <label for="dim">Dim</label>
+        </div>
+      </form>
+    </header>
+
+    <main>
+      <section>
+        <div class="surface-samples">
+          <div class="surface1 rad-shadow">1</div>
+          <div class="surface2 rad-shadow">2</div>
+          <div class="surface3 rad-shadow">3</div>
+          <div class="surface4 rad-shadow">4</div>
+        </div>
+      </section>
+
+      <section>
+        <div class="text-samples">
+          <h1 class="text1">
+            <span class="swatch brand rad-shadow"></span>
+            Brand
+          </h1>
+          <h1 class="text1">
+            <span class="swatch text1 rad-shadow"></span>
+            Text Color 1
+          </h1>
+          <h1 class="text2">
+            <span class="swatch text2 rad-shadow"></span>
+            Text Color 2
+          </h1>
+          <br>
+          <p class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <p class="text2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </div>
+      </section>
+    </main>
+
+    {% set script %}
+      !function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(o){const r=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((o,c)=>{const s=new URL(e,r);if(self[t].moduleMap[s])return o(self[t].moduleMap[s]);const l=new Blob([`import * as m from '${s}';`,`${t}.moduleMap['${s}']=m;`],{type:"text/javascript"}),m=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(l),onerror(){c(new Error(`Failed to import: ${e}`)),n(m)},onload(){o(self[t].moduleMap[s]),n(m)}});document.head.appendChild(m)})),self[t].moduleMap={}}}("assets/");const e=document.querySelector("#theme-switcher"),t=document.firstElementChild;e.addEventListener("input",(e=>o(e.target.value)));const o=e=>t.setAttribute("color-scheme",e);
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/theming/color-schemes/index.md b/src/site/content/en/patterns/theming/color-schemes/index.md
new file mode 100644
index 00000000000..777aa2086f8
--- /dev/null
+++ b/src/site/content/en/patterns/theming/color-schemes/index.md
@@ -0,0 +1,14 @@
+---
+layout: pattern
+title: Color Schemes with HSL
+description: |
+  This pattern shows how to go beyond light and dark themes with CSS custom properties.
+  <br><br>
+  <a href="/building-a-color-scheme/">Full article</a> · <a href="https://www.youtube.com/watch?v=oHcTn83M1ls">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/color-schemes">Source on Github</a>
+date: 2022-06-01
+height: 600
+---
+
+This pattern shows how to go beyond light and dark themes with CSS custom properties.
+
+<a href="/building-a-color-scheme/">Full article</a> · <a href="https://www.youtube.com/watch?v=oHcTn83M1ls">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/color-schemes">Source on Github</a>
diff --git a/src/site/content/en/patterns/theming/hsl-starter-kit/assets/body.html b/src/site/content/en/patterns/theming/hsl-starter-kit/assets/body.html
new file mode 100644
index 00000000000..f5b802dbb2b
--- /dev/null
+++ b/src/site/content/en/patterns/theming/hsl-starter-kit/assets/body.html
@@ -0,0 +1 @@
+<h1><b>HSL</b> is <u>awesome.</u></h1>
diff --git a/src/site/content/en/patterns/theming/hsl-starter-kit/assets/style.css b/src/site/content/en/patterns/theming/hsl-starter-kit/assets/style.css
new file mode 100644
index 00000000000..2ab29aafe98
--- /dev/null
+++ b/src/site/content/en/patterns/theming/hsl-starter-kit/assets/style.css
@@ -0,0 +1,90 @@
+:root {
+  color-scheme: dark light;
+
+  /* destructure brand channels */
+  --hue: 200; /* change me!! */
+  --saturation: 100%;
+  --lightness: 50%;
+
+  /* build colors with props */
+  --brand: hsl(
+    var(--hue)
+    var(--saturation)
+    var(--lightness)
+  );
+
+  /* very dark brand blue */
+  --text: hsl(
+    var(--hue)
+    var(--saturation)
+    10% /* lower is darker */
+  );
+
+  /* very bright brand white */
+  --surface: hsl(
+    var(--hue)
+    calc(var(--saturation) / 2)
+    95% /* higher is lighter */
+  );
+}
+
+h1 {
+  font-size: 10vmin;
+  font-weight: 300;
+}
+
+b {
+  color: hsl(
+    var(--hue)
+    var(--saturation)
+    30%
+  );
+}
+
+u {
+  text-decoration-color: var(--brand);
+}
+
+html {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+body {
+  color: var(--text);
+  background: var(--surface);
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  font-family: system-ui, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* just tweak the lightness */
+  /* maybe desaturate too */
+
+  :root {
+    --text: hsl(
+      var(--hue)
+      calc(var(--saturation) / 2)
+      85%
+    );
+
+    --surface: hsl(
+      var(--hue)
+      var(--saturation)
+      5%
+    );
+  }
+
+  b {
+    color: hsl(
+      var(--hue)
+      var(--saturation)
+      75%
+    );
+  }
+}
diff --git a/src/site/content/en/patterns/theming/hsl-starter-kit/demo.njk b/src/site/content/en/patterns/theming/hsl-starter-kit/demo.njk
new file mode 100644
index 00000000000..741dc75913c
--- /dev/null
+++ b/src/site/content/en/patterns/theming/hsl-starter-kit/demo.njk
@@ -0,0 +1,106 @@
+---
+patternId: theming/hsl-starter-kit
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      :root {
+        color-scheme: dark light;
+
+        /* destructure brand channels */
+        --hue: 200; /* change me!! */
+        --saturation: 100%;
+        --lightness: 50%;
+
+        /* build colors with props */
+        --brand: hsl(
+          var(--hue)
+          var(--saturation)
+          var(--lightness)
+        );
+
+        /* very dark brand blue */
+        --text: hsl(
+          var(--hue)
+          var(--saturation)
+          10% /* lower is darker */
+        );
+
+        /* very bright brand white */
+        --surface: hsl(
+          var(--hue)
+          calc(var(--saturation) / 2)
+          95% /* higher is lighter */
+        );
+      }
+
+      h1 {
+        font-size: 10vmin;
+        font-weight: 300;
+      }
+
+      b {
+        color: hsl(
+          var(--hue)
+          var(--saturation)
+          30%
+        );
+      }
+
+      u {
+        text-decoration-color: var(--brand);
+      }
+
+      html {
+        block-size: 100%;
+        inline-size: 100%;
+      }
+
+      body {
+        color: var(--text);
+        background: var(--surface);
+        min-block-size: 100%;
+        min-inline-size: 100%;
+        margin: 0;
+        box-sizing: border-box;
+        display: grid;
+        place-content: center;
+        font-family: system-ui, sans-serif;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        /* just tweak the lightness */
+        /* maybe desaturate too */
+
+        :root {
+          --text: hsl(
+            var(--hue)
+            calc(var(--saturation) / 2)
+            85%
+          );
+
+          --surface: hsl(
+            var(--hue)
+            var(--saturation)
+            5%
+          );
+        }
+
+        b {
+          color: hsl(
+            var(--hue)
+            var(--saturation)
+            75%
+          );
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1><b>HSL</b> is <u>awesome.</u></h1>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/theming/hsl-starter-kit/index.md b/src/site/content/en/patterns/theming/hsl-starter-kit/index.md
new file mode 100644
index 00000000000..e31ab3766e6
--- /dev/null
+++ b/src/site/content/en/patterns/theming/hsl-starter-kit/index.md
@@ -0,0 +1,11 @@
+---
+layout: pattern
+title: Light and Dark HSL Starter Kit
+description: |
+  This pattern shows how to use HSL to create harmonious light and dark themes with CSS custom properties.
+date: 2022-06-01
+height: 400
+---
+
+This pattern shows how to use HSL to create harmonious
+light and dark themes with CSS custom properties.
diff --git a/src/site/content/en/patterns/theming/index.md b/src/site/content/en/patterns/theming/index.md
new file mode 100644
index 00000000000..a255effa986
--- /dev/null
+++ b/src/site/content/en/patterns/theming/index.md
@@ -0,0 +1,11 @@
+---
+layout: pattern-set
+title: Theming patterns
+description: A collection of techniques to assist in managing color throughout your projects.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/X2nU3op9YZAqzox7FDgN.svg
+---
+
+Welcome to our growing collection of theming patterns. These intend to help you
+create adaptive color systems so user's preferences for things like light or
+dark, are easy to orchestrate.
+<br><br>
diff --git a/src/site/content/en/patterns/theming/theme-switch/assets/body.html b/src/site/content/en/patterns/theming/theme-switch/assets/body.html
new file mode 100644
index 00000000000..6c80c426571
--- /dev/null
+++ b/src/site/content/en/patterns/theming/theme-switch/assets/body.html
@@ -0,0 +1,19 @@
+<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
+  <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+    <mask class="moon" id="moon-mask">
+      <rect x="0" y="0" width="100%" height="100%" fill="white" />
+      <circle cx="24" cy="10" r="6" fill="black" />
+    </mask>
+    <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+    <g class="sun-beams" stroke="currentColor">
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+     </g>
+  </svg>
+</button>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/theming/theme-switch/assets/script.js b/src/site/content/en/patterns/theming/theme-switch/assets/script.js
new file mode 100644
index 00000000000..f3b738f17bc
--- /dev/null
+++ b/src/site/content/en/patterns/theming/theme-switch/assets/script.js
@@ -0,0 +1,58 @@
+const storageKey = 'theme-preference'
+
+const onClick = () => {
+  // flip current value
+  theme.value = theme.value === 'light'
+    ? 'dark'
+    : 'light'
+
+  setPreference()
+}
+
+const getColorPreference = () => {
+  if (localStorage.getItem(storageKey))
+    return localStorage.getItem(storageKey)
+  else
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+}
+
+const setPreference = () => {
+  localStorage.setItem(storageKey, theme.value)
+  reflectPreference()
+}
+
+const reflectPreference = () => {
+  document.firstElementChild
+    .setAttribute('data-theme', theme.value)
+
+  document
+    .querySelector('#theme-toggle')
+    ?.setAttribute('aria-label', theme.value)
+}
+
+const theme = {
+  value: getColorPreference(),
+}
+
+// set early so no page flashes / CSS is made aware
+reflectPreference()
+
+window.onload = () => {
+  // set on load so screen readers can see latest value on the button
+  reflectPreference()
+
+  // now this script can find and listen for clicks on the control
+  document
+    .querySelector('#theme-toggle')
+    .addEventListener('click', onClick)
+}
+
+// sync with system changes
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', ({matches:isDark}) => {
+    theme.value = isDark ? 'dark' : 'light'
+    setPreference()
+  })
\ No newline at end of file
diff --git a/src/site/content/en/patterns/theming/theme-switch/assets/style.css b/src/site/content/en/patterns/theming/theme-switch/assets/style.css
new file mode 100644
index 00000000000..55e85f4775c
--- /dev/null
+++ b/src/site/content/en/patterns/theming/theme-switch/assets/style.css
@@ -0,0 +1,77 @@
+@import "https://unpkg.com/open-props/easings.min.css";
+
+.sun-and-moon > :is(.moon, .sun, .sun-beams) {
+  transform-origin: center;
+}
+
+.sun-and-moon > :is(.moon, .sun) {
+  fill: var(--icon-fill);
+}
+
+.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
+  fill: var(--icon-fill-hover);
+}
+
+.sun-and-moon > .sun-beams {
+  stroke: var(--icon-fill);
+  stroke-width: 2px;
+}
+
+.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
+  stroke: var(--icon-fill-hover);
+}
+
+[data-theme="dark"] .sun-and-moon > .sun {
+  transform: scale(1.75);
+}
+
+[data-theme="dark"] .sun-and-moon > .sun-beams {
+  opacity: 0;
+}
+
+[data-theme="dark"] .sun-and-moon > .moon > circle {
+  transform: translateX(-7px);
+}
+
+@supports (cx: 1) {
+  [data-theme="dark"] .sun-and-moon > .moon > circle {
+    cx: 17;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sun-and-moon > .sun {
+    transition: transform .5s var(--ease-elastic-3);
+  }
+
+  .sun-and-moon > .sun-beams {
+    transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
+  }
+
+  .sun-and-moon .moon > circle {
+    transition: transform .25s var(--ease-out-5);
+  }
+
+  @supports (cx: 1) {
+    .sun-and-moon .moon > circle {
+      transition: cx .25s var(--ease-out-5);
+    }
+  }
+
+  [data-theme="dark"] .sun-and-moon > .sun {
+    transition-timing-function: var(--ease-3);
+    transition-duration: .25s;
+    transform: scale(1.75);
+  }
+
+  [data-theme="dark"] .sun-and-moon > .sun-beams {
+    transition-duration: .15s;
+    transform: rotateZ(-25deg);
+  }
+
+  [data-theme="dark"] .sun-and-moon > .moon > circle {
+    transition-duration: .5s;
+    transition-delay: .25s;
+  }
+}
diff --git a/src/site/content/en/patterns/theming/theme-switch/demo.njk b/src/site/content/en/patterns/theming/theme-switch/demo.njk
new file mode 100644
index 00000000000..ee640ec862b
--- /dev/null
+++ b/src/site/content/en/patterns/theming/theme-switch/demo.njk
@@ -0,0 +1,96 @@
+---
+patternId: theming/theme-switch
+---
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="color-scheme" content="dark light">
+    <link rel="icon" href="https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/PGTSinGx9liHBuzggHNC.svg" type="image/svg+xml">
+    <style>
+      @import"https://unpkg.com/open-props/easings.min.css";.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.theme-toggle:is(:hover,:focus-visible)>.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill-hover)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px}.theme-toggle:is(:hover,:focus-visible) .sun-and-moon>.sun-beams{stroke:var(--icon-fill-hover)}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{opacity:0}[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(0);cx:17}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon .moon>circle{transition:transform .25s var(--ease-out-5)}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s var(--ease-out-5)}}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75);transition-timing-function:var(--ease-3);transition-duration:.25s}[data-theme=dark] .sun-and-moon>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}[data-theme=dark] .sun-and-moon>.moon>circle{transition-delay:.25s;transition-duration:.5s}}.theme-toggle{--size: 2rem;--icon-fill: hsl(210 10% 30%);--icon-fill-hover: hsl(210 10% 15%);background:none;border:none;padding:0;inline-size:var(--size);block-size:var(--size);aspect-ratio:1;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:5px}.theme-toggle>svg{inline-size:100%;block-size:100%;stroke-linecap:round}[data-theme=dark] .theme-toggle{--icon-fill: hsl(210 10% 70%);--icon-fill-hover: hsl(210 15% 90%) }@media (hover: none){.theme-toggle{--size: 48px }}*{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:light}html[data-theme=dark]{color-scheme:dark}@supports not (color-scheme: dark){html[data-theme=dark]{background:#111}}body{min-block-size:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;display:grid;align-content:center;justify-content:center;place-content:center}.github-corner{fill:#ff69b4;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}[data-theme=dark] .github-corner{fill:indigo}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
+    </style>
+    {% set script %}
+      const storageKey = 'theme-preference'
+
+      const onClick = () => {
+        // flip current value
+        theme.value = theme.value === 'light'
+          ? 'dark'
+          : 'light'
+
+        setPreference()
+      }
+
+      const getColorPreference = () => {
+        if (localStorage.getItem(storageKey))
+          return localStorage.getItem(storageKey)
+        else
+          return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+      }
+
+      const setPreference = () => {
+        localStorage.setItem(storageKey, theme.value)
+        reflectPreference()
+      }
+
+      const reflectPreference = () => {
+        document.firstElementChild
+          .setAttribute('data-theme', theme.value)
+
+        document
+          .querySelector('#theme-toggle')
+          ?.setAttribute('aria-label', theme.value)
+      }
+
+      const theme = {
+        value: getColorPreference(),
+      }
+
+      // set early so no page flashes / CSS is made aware
+      reflectPreference()
+
+      window.onload = () => {
+        // set on load so screen readers can see latest value on the button
+        reflectPreference()
+
+        // now this script can find and listen for clicks on the control
+        document
+          .querySelector('#theme-toggle')
+          .addEventListener('click', onClick)
+      }
+
+      // sync with system changes
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', ({matches:isDark}) => {
+          theme.value = isDark ? 'dark' : 'light'
+          setPreference()
+        })
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </head>
+  <body>
+    <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
+      <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+        <mask class="moon" id="moon-mask">
+          <rect x="0" y="0" width="100%" height="100%" fill="white" />
+          <circle cx="24" cy="10" r="6" fill="black" />
+        </mask>
+        <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+        <g class="sun-beams" stroke="currentColor">
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+         </g>
+      </svg>
+    </button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/theming/theme-switch/index.md b/src/site/content/en/patterns/theming/theme-switch/index.md
new file mode 100644
index 00000000000..ad786777990
--- /dev/null
+++ b/src/site/content/en/patterns/theming/theme-switch/index.md
@@ -0,0 +1,21 @@
+---
+layout: pattern
+title: Dark and Light Theme Switch
+description: |
+  This pattern shows how to create a switch for your website that allows changing between light and dark themes, and saving that preference for subsequent visits.
+  <aside style="max-inline-size: fit-content;" class="aside flow bg-tertiary-box-bg color-tertiary-box-text"><p class="cluster "><span class="aside__icon box-block "><svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg">   <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path> </svg></span><strong>Important</strong></p><div class=" flow"> This pattern uses the <a href="https://open-props.style/#easing">easings</a> from <a href="https://open-props.style">Open Props</a> </div></aside>
+  <br><br>
+  <a href="/building-a-theme-switch-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=kZiS1QStIWc">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/theme-switch">Source on Github</a>
+date: 2022-06-01
+height: 300
+---
+
+This pattern shows how to create a switch for your website that allows changing
+between light and dark themes, and saving that preference for subsequent visits.
+
+{% Aside 'important' %}
+This pattern uses the [easings](https://open-props.style/#easing)
+from [Open Props](https://open-props.style)
+{% endAside %}
+
+<a href="/building-a-theme-switch-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=kZiS1QStIWc">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/theme-switch">Source on Github</a>
diff --git a/src/site/content/en/patterns/web-apps/badges/app-badge.png b/src/site/content/en/patterns/web-apps/badges/app-badge.png
new file mode 100644
index 00000000000..5bcd8c2af3d
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/badges/app-badge.png differ
diff --git a/src/site/content/en/patterns/web-apps/badges/app-icon.png b/src/site/content/en/patterns/web-apps/badges/app-icon.png
new file mode 100644
index 00000000000..5bcd8c2af3d
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/badges/app-icon.png differ
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/app-icon.png b/src/site/content/en/patterns/web-apps/badges/assets/app-icon.png
new file mode 100644
index 00000000000..5bcd8c2af3d
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/badges/assets/app-icon.png differ
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/body.html b/src/site/content/en/patterns/web-apps/badges/assets/body.html
new file mode 100644
index 00000000000..84cc7349201
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/assets/body.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="manifest.json" />
+    <title>How to create an app badge</title>
+    <link rel="stylesheet" href="style.css" />
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          const registration = await navigator.serviceWorker.register(
+            'sw.js',
+          );
+          console.log(
+            'Service worker registered for scope',
+            registration.scope,
+          );
+        });
+      }
+    </script>
+    <script src="script.js" type="module"></script>
+  </head>
+  <body>
+    <h1>How to create an app badge</h1>
+    <ol>
+      <li>
+        Watch the favicon. You should see a counter that updates each second
+        integrated into the favicon.
+        <img
+          src="../favicon.png"
+          style="width: 250px; height: auto"
+          width="528"
+          height="74"
+          alt="Favicon with counter."
+        />
+      </li>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button disabled type="button">Install</button>
+        </p>
+      </li>
+      <li>
+        Watch the app icon in your operating system's task bar. You should see a
+        counter that updates each second as an app badge.
+        <img
+          src="../app-badge.png"
+          style="width: 80px; height: auto"
+          width="282"
+          height="388"
+          alt="App badge with counter."
+        />
+      </li>
+    </ol>
+    <favicon-badge src="../favicon.svg" textColor="#fff" badge="" />
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/favicon.png b/src/site/content/en/patterns/web-apps/badges/assets/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/badges/assets/favicon.png differ
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/favicon.svg b/src/site/content/en/patterns/web-apps/badges/assets/favicon.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/assets/favicon.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/manifest.json b/src/site/content/en/patterns/web-apps/badges/assets/manifest.json
new file mode 100644
index 00000000000..3beb7656c79
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/assets/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "How to create an app badge",
+  "short_name": "App Badge",
+  "start_url": "../demo.html",
+  "id": "../demo.html",
+  "icons": [
+    {
+      "src": "../assets/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "../assets/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "display": "standalone"
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/script.js b/src/site/content/en/patterns/web-apps/badges/assets/script.js
new file mode 100644
index 00000000000..316a30643d4
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/assets/script.js
@@ -0,0 +1,104 @@
+import 'https://unpkg.com/favicon-badge@2.0.0/dist/FavIconBadge.js';
+
+// The `<favicon-badge>` custom element.
+const favicon = document.querySelector('favicon-badge');
+// The install button.
+const installButton = document.querySelector('button');
+
+// Feature detection.
+const supportsAppBadge = 'setAppBadge' in navigator;
+
+// This function will either set the favicon or the native
+// app badge. The implementation is dynamically changed at runtime.
+let setAppBadge;
+
+// Variable for the counter.
+let i = 0;
+
+// Returns a value between 0 and 9.
+const getAppBadgeValue = () => {
+  if (i > 9) {
+    i = 0;
+  }
+  return i++;
+};
+
+// Function to set a favicon badge.
+const setAppBadgeFavicon = (value) => {
+  favicon.badge = value;
+};
+
+// Function to set a native app badge.
+const setAppBadgeNative = (value) => {
+  navigator.setAppBadge(value);
+}
+
+// If the app is installed and native app badges are supported,
+// use the native app badge.
+if (
+  matchMedia('(display-mode: standalone)').matches &&
+  supportsAppBadge
+) {
+  setAppBadge = setAppBadgeNative;
+// In all other cases (i.e., if the app is not installed or native
+//  app badges are not supported), use the favicon badge.
+} else {
+  setAppBadge = setAppBadgeFavicon;
+}
+
+// Update the badge every second.
+setInterval(() => {
+  setAppBadge(getAppBadgeValue());
+}, 1000);
+
+// Only relevant for browsers that support installation.
+if ('BeforeInstallPromptEvent' in window) {
+  // Variable to stash the `BeforeInstallPromptEvent`.
+  let installEvent = null;
+
+  // Function that will be run when the app is installed.
+  const onInstall = () => {
+    // Disable the install button.
+    installButton.disabled = true;
+    // No longer needed.
+    installEvent = null;
+
+    if (supportsAppBadge) {
+      // Remove the favicon badge.
+      favicon.badge = false;
+      // Switch the implementation so it uses the native
+      // app badge.
+      setAppBadge = setAppBadgeNative;
+    }
+  };
+
+  window.addEventListener('beforeinstallprompt', (event) => {
+    // Do not show the install prompt quite yet.
+    event.preventDefault();
+    // Stash the `BeforeInstallPromptEvent` for later.
+    installEvent = event;
+    // Enable the install button.
+    installButton.disabled = false;
+  });
+
+  installButton.addEventListener('click', async () => {
+    // If there is no stashed `BeforeInstallPromptEvent`, return.
+    if (!installEvent) {
+      return;
+    }
+    // Use the stashed `BeforeInstallPromptEvent` to prompt the user.
+    installEvent.prompt();
+    const result = await installEvent.userChoice;
+    // If the user installs the app, run `onInstall()`.
+    if (result.outcome === 'accepted') {
+      onInstall();
+    }
+  });
+
+  // The user can decide to ignore the install button
+  // and just use the browser prompt directly. In this case
+  // likewise run `onInstall()`.
+  window.addEventListener('appinstalled', (event) => {
+    onInstall();
+  });
+}
diff --git a/src/site/content/en/patterns/web-apps/badges/assets/style.css b/src/site/content/en/patterns/web-apps/badges/assets/style.css
new file mode 100644
index 00000000000..370d8a2599a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/assets/style.css
@@ -0,0 +1,19 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
diff --git a/src/site/content/en/patterns/web-apps/badges/demo.njk b/src/site/content/en/patterns/web-apps/badges/demo.njk
new file mode 100644
index 00000000000..b0561494380
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/demo.njk
@@ -0,0 +1,167 @@
+---
+patternId: web-apps/badges
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <title>How to create an app badge</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 1rem;
+      }
+      img {
+        height: auto;
+        max-width: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to create an app badge</h1>
+    <style>
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+    <ol>
+      <li>
+        Watch the favicon. You should see a counter that updates each second
+        integrated into the favicon.
+        <img
+          src="assets/favicon.png"
+          style="width: 250px; height: auto"
+          width="528"
+          height="74"
+          alt="Favicon with counter."
+        />
+      </li>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button id="install" disabled type="button">Install</button>
+        </p>
+      </li>
+      <li>
+        Watch the app icon in your operating system's task bar. You should see a
+        counter that updates each second as an app badge.
+        <img
+          src="assets/app-icon.png"
+          style="width: 80px; height: auto"
+          width="282"
+          height="388"
+          alt="App badge with counter."
+        />
+      </li>
+    </ol>
+    <favicon-badge src="data:image/svg+xml, %3Csvg enable-background='new 0 0 128 128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3ClinearGradient id='f' x1='83.081' x2='105.28' y1='36.552' y2='36.552' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%238D6E63' offset='.0037206'/%3E%3Cstop stop-color='%2376594F' offset='.4152'/%3E%3Cstop stop-color='%234E342E' offset='.9989'/%3E%3C/linearGradient%3E%3Cpath d='m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z' fill='url(%23f)'/%3E%3Cpath d='m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z' fill='%235D4037'/%3E%3Cpolyline points='30.29 103.37 31.17 108.44 37.99 106.57' fill='%238D6E63'/%3E%3Cpolyline points='47.01 107.96 50.67 111.08 55.27 108.39' fill='%23A1887F'/%3E%3Cpolyline points='70.45 105.84 76.92 107.91 78.15 102.63' fill='%23BCAAA4'/%3E%3Cpolyline points='84.19 96.2 90.9 95.4 90.06 90.03' fill='%238D6E63'/%3E%3ClinearGradient id='e' x1='90.754' x2='108.35' y1='79.097' y2='79.097' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%238D6E63' offset='.0037206'/%3E%3Cstop stop-color='%2376594F' offset='.4152'/%3E%3Cstop stop-color='%234E342E' offset='.9989'/%3E%3C/linearGradient%3E%3Cpath d='m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z' fill='url(%23e)'/%3E%3Cpath d='m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z' fill='%235D4037'/%3E%3ClinearGradient id='d' x1='64.17' x2='64.17' y1='27.642' y2='107.86' gradientTransform='matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235D2813' offset='.1715'/%3E%3Cstop stop-color='%236A3A27' offset='.2429'/%3E%3Cstop stop-color='%238D6859' offset='.3885'/%3E%3Cstop stop-color='%23C5B2AA' offset='.5932'/%3E%3Cstop stop-color='%23fff' offset='.7926'/%3E%3C/linearGradient%3E%3Cpath d='m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z' fill='url(%23d)'/%3E%3Cpath d='m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z' fill='%236D4C41'/%3E%3ClinearGradient id='c' x1='37.747' x2='63.178' y1='49.106' y2='49.106' gradientTransform='matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235D4037' offset='.0022355'/%3E%3Cstop stop-color='%23462D28' offset='.7745'/%3E%3Cstop stop-color='%233E2723' offset='.9989'/%3E%3C/linearGradient%3E%3Cpath d='m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z' fill='url(%23c)'/%3E%3Cpolyline points='26.79 89.88 28.89 95.75 34.49 93.08' fill='%23BCAAA4'/%3E%3Cpolyline points='42.28 96.62 45.56 101.61 50.22 97.71' fill='%23BCAAA4'/%3E%3Cpolyline points='16.25 86.69 15.43 96.38 24.03 95.47' fill='%23D7CCC8'/%3E%3Cpolyline points='62.26 97.53 66.89 101.26 70.23 95.98' fill='%23BCAAA4'/%3E%3Cpolyline points='55.12 104.31 59.74 108.04 63.09 102.76' fill='%23BCAAA4'/%3E%3Cpolyline points='76.49 94.53 82.87 96.17 82.74 89.65' fill='%23D7CCC8'/%3E%3Cpolyline points='37.77 79.99 40.25 85.68 44.45 81.59' fill='%236D4C41'/%3E%3Cpolyline points='52.45 87.68 56.87 91.85 59.18 86.33' fill='%236D4C41'/%3E%3Cpolyline points='53.86 70.2 57.51 75.45 60.27 69.66' fill='%238D6E63'/%3E%3Cpolyline points='67.45 67.52 72.89 70.58 73 64.1' fill='%238D6E63'/%3E%3Cpolyline points='81.12 71.93 86.55 74.98 86.67 68.51' fill='%238D6E63'/%3E%3Cpolyline points='71.83 82.9 77.01 86.42 77.63 79.98' fill='%235D4037'/%3E%3Cpolyline points='86.87 58.21 88.2 50.26 80.04 51.38' fill='%233E2723'/%3E%3Cpolyline points='77.45 45.42 76.45 37.42 68.98 41.08' fill='%233E2723'/%3E%3Cpolyline points='83.66 38.32 82.49 28.88 73.68 33.21' fill='%234E342E'/%3E%3Cpolyline points='77.15 31.71 74.62 22.57 66.54 28.27' fill='%233E2723'/%3E%3Cpolyline points='44.38 29.09 36.37 22.65 32.34 32.32' fill='%234E342E' stroke='%233E2723' stroke-miterlimit='10' stroke-width='.8152'/%3E%3Cpolyline points='63.01 34.13 58.71 22.46 50.9 32.1' fill='%233E2723'/%3E%3Cpolyline points='55.09 28.11 49 19.79 42.82 27.93' fill='%233E2723'/%3E%3Cpolyline points='30.01 30.61 21.44 25.28 18.55 35.26' fill='%233E2723'/%3E%3Cpolyline points='71.23 30.98 67.42 21.27 59.44 27.41' fill='%234E342E'/%3E%3Cpolyline points='20.57 72.15 21.14 77.91 25.96 74.98' fill='%236D4C41'/%3E%3Cpolyline points='12.55 75.13 7 82.08 14.42 82.08' fill='%23BCAAA4'/%3E%3Cpolyline points='16.24 56.96 12.28 62.42 18.7 64.05' fill='%236D4C41'/%3E%3Cpolyline points='34.25 66.48 35.09 73.04 40.15 69.3' fill='%238D6E63'/%3E%3Cpath d='m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z' fill='%23fff'/%3E%3Cpath d='m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z'/%3E%3Cg display='none'%3E%3Cg display='inline'%3E%3Cg opacity='.6'%3E%3Ccircle cx='-117.33' cy='64' r='28' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2625'/%3E%3Cline x1='-97.33' x2='-97.33' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-137.33' x2='-137.33' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-117.33' x2='-117.33' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-53.33' x2='-181.33' y1='64' y2='64' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-53.33' x2='-181.33' y1='44' y2='44' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-53.33' x2='-181.33' y1='83.75' y2='83.75' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-53.33' x2='-181.33' y1='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='-181.33' x2='-53.33' y1='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cg opacity='.61'%3E%3Cpath d='m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z'/%3E%3C/g%3E%3Cpath d='m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2578'/%3E%3Cpath d='m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2628'/%3E%3Cpath d='m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2627'/%3E%3C/g%3E%3Cg opacity='.2'%3E%3Cdefs%3E%3Crect id='h' x='-181.33' width='128' height='128' opacity='.2'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23h'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23b)'%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'%3E%3Cline x1='-209.33' x2='-209.33' y1='160' y2='-32'/%3E%3Cline x1='-205.33' x2='-205.33' y1='160' y2='-32'/%3E%3Cline x1='-201.33' x2='-201.33' y1='160' y2='-32'/%3E%3Cline x1='-197.33' x2='-197.33' y1='160' y2='-32'/%3E%3Cline x1='-193.33' x2='-193.33' y1='160' y2='-32'/%3E%3Cline x1='-189.33' x2='-189.33' y1='160' y2='-32'/%3E%3Cline x1='-185.33' x2='-185.33' y1='160' y2='-32'/%3E%3Cline x1='-181.33' x2='-181.33' y1='160' y2='-32'/%3E%3Cline x1='-177.33' x2='-177.33' y1='160' y2='-32'/%3E%3Cline x1='-173.33' x2='-173.33' y1='160' y2='-32'/%3E%3Cline x1='-169.33' x2='-169.33' y1='160' y2='-32'/%3E%3Cline x1='-165.33' x2='-165.33' y1='160' y2='-32'/%3E%3Cline x1='-161.33' x2='-161.33' y1='160' y2='-32'/%3E%3Cline x1='-157.33' x2='-157.33' y1='160' y2='-32'/%3E%3Cline x1='-153.33' x2='-153.33' y1='160' y2='-32'/%3E%3Cline x1='-149.33' x2='-149.33' y1='160' y2='-32'/%3E%3Cline x1='-145.33' x2='-145.33' y1='160' y2='-32'/%3E%3Cline x1='-141.33' x2='-141.33' y1='160' y2='-32'/%3E%3Cline x1='-137.33' x2='-137.33' y1='160' y2='-32'/%3E%3Cline x1='-133.33' x2='-133.33' y1='160' y2='-32'/%3E%3Cline x1='-129.33' x2='-129.33' y1='160' y2='-32'/%3E%3Cline x1='-125.33' x2='-125.33' y1='160' y2='-32'/%3E%3Cline x1='-121.33' x2='-121.33' y1='160' y2='-32'/%3E%3Cline x1='-117.33' x2='-117.33' y1='160' y2='-32'/%3E%3Cline x1='-113.33' x2='-113.33' y1='160' y2='-32'/%3E%3Cline x1='-109.33' x2='-109.33' y1='160' y2='-32'/%3E%3Cline x1='-105.33' x2='-105.33' y1='160' y2='-32'/%3E%3Cline x1='-101.33' x2='-101.33' y1='160' y2='-32'/%3E%3Cline x1='-97.33' x2='-97.33' y1='160' y2='-32'/%3E%3Cline x1='-93.33' x2='-93.33' y1='160' y2='-32'/%3E%3Cline x1='-89.33' x2='-89.33' y1='160' y2='-32'/%3E%3Cline x1='-85.33' x2='-85.33' y1='160' y2='-32'/%3E%3Cline x1='-81.33' x2='-81.33' y1='160' y2='-32'/%3E%3Cline x1='-77.33' x2='-77.33' y1='160' y2='-32'/%3E%3Cline x1='-73.33' x2='-73.33' y1='160' y2='-32'/%3E%3Cline x1='-69.33' x2='-69.33' y1='160' y2='-32'/%3E%3Cline x1='-65.33' x2='-65.33' y1='160' y2='-32'/%3E%3Cline x1='-61.33' x2='-61.33' y1='160' y2='-32'/%3E%3Cline x1='-57.33' x2='-57.33' y1='160' y2='-32'/%3E%3Cline x1='-53.33' x2='-53.33' y1='160' y2='-32'/%3E%3Cline x1='-49.33' x2='-49.33' y1='160' y2='-32'/%3E%3Cline x1='-45.33' x2='-45.33' y1='160' y2='-32'/%3E%3Cline x1='-44.33' x2='-44.33' y1='166.05' y2='-25.95'/%3E%3Cline x1='-37.33' x2='-37.33' y1='160' y2='-32'/%3E%3Cline x1='-33.33' x2='-33.33' y1='160' y2='-32'/%3E%3Cline x1='-29.33' x2='-29.33' y1='160' y2='-32'/%3E%3Cline x1='-25.33' x2='-25.33' y1='160' y2='-32'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'%3E%3Cline x1='-213.33' x2='-21.33' y1='-28' y2='-28'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-24' y2='-24'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-20' y2='-20'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-16' y2='-16'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-12' y2='-12'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-8' y2='-8'/%3E%3Cline x1='-213.33' x2='-21.33' y1='-4' y2='-4'/%3E%3Cline x1='-213.33' x2='-21.33'/%3E%3Cline x1='-213.33' x2='-21.33' y1='4' y2='4'/%3E%3Cline x1='-213.33' x2='-21.33' y1='8' y2='8'/%3E%3Cline x1='-213.33' x2='-21.33' y1='12' y2='12'/%3E%3Cline x1='-213.33' x2='-21.33' y1='16' y2='16'/%3E%3Cline x1='-213.33' x2='-21.33' y1='20' y2='20'/%3E%3Cline x1='-213.33' x2='-21.33' y1='24' y2='24'/%3E%3Cline x1='-213.33' x2='-21.33' y1='28' y2='28'/%3E%3Cline x1='-213.33' x2='-21.33' y1='32' y2='32'/%3E%3Cline x1='-213.33' x2='-21.33' y1='36' y2='36'/%3E%3Cline x1='-213.33' x2='-21.33' y1='40' y2='40'/%3E%3Cline x1='-213.33' x2='-21.33' y1='44' y2='44'/%3E%3Cline x1='-213.33' x2='-21.33' y1='48' y2='48'/%3E%3Cline x1='-213.33' x2='-21.33' y1='52' y2='52'/%3E%3Cline x1='-213.33' x2='-21.33' y1='56' y2='56'/%3E%3Cline x1='-213.33' x2='-21.33' y1='60' y2='60'/%3E%3Cline x1='-213.33' x2='-21.33' y1='64' y2='64'/%3E%3Cline x1='-213.33' x2='-21.33' y1='68' y2='68'/%3E%3Cline x1='-213.33' x2='-21.33' y1='72' y2='72'/%3E%3Cline x1='-213.33' x2='-21.33' y1='76' y2='76'/%3E%3Cline x1='-213.33' x2='-21.33' y1='80' y2='80'/%3E%3Cline x1='-213.33' x2='-21.33' y1='84' y2='84'/%3E%3Cline x1='-213.33' x2='-21.33' y1='88' y2='88'/%3E%3Cline x1='-213.33' x2='-21.33' y1='92' y2='92'/%3E%3Cline x1='-213.33' x2='-21.33' y1='96' y2='96'/%3E%3Cline x1='-213.33' x2='-21.33' y1='100' y2='100'/%3E%3Cline x1='-213.33' x2='-21.33' y1='104' y2='104'/%3E%3Cline x1='-213.33' x2='-21.33' y1='108' y2='108'/%3E%3Cline x1='-213.33' x2='-21.33' y1='112' y2='112'/%3E%3Cline x1='-213.33' x2='-21.33' y1='116' y2='116'/%3E%3Cline x1='-213.33' x2='-21.33' y1='120' y2='120'/%3E%3Cline x1='-213.33' x2='-21.33' y1='124' y2='124'/%3E%3Cline x1='-213.33' x2='-21.33' y1='128' y2='128'/%3E%3Cline x1='-213.33' x2='-21.33' y1='132' y2='132'/%3E%3Cline x1='-213.33' x2='-21.33' y1='136' y2='136'/%3E%3Cline x1='-213.33' x2='-21.33' y1='140' y2='140'/%3E%3Cline x1='-213.33' x2='-21.33' y1='144' y2='144'/%3E%3Cline x1='-213.33' x2='-21.33' y1='148' y2='148'/%3E%3Cline x1='-213.33' x2='-21.33' y1='152' y2='152'/%3E%3Cline x1='-213.33' x2='-21.33' y1='156' y2='156'/%3E%3C/g%3E%3Cpath d='m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23F44336'%3E%3Crect x='-181.33' width='4' height='128' opacity='.3'/%3E%3Crect x='-57.33' width='4' height='128' opacity='.3'/%3E%3Crect transform='matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)' x='-119.33' y='-58' width='4' height='120' opacity='.3'/%3E%3Crect transform='matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)' x='-119.33' y='66' width='4' height='120' opacity='.3'/%3E%3C/g%3E%3C/g%3E%3Cg display='inline'%3E%3Cg opacity='.6'%3E%3Ccircle cx='64' cy='64' r='28' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2625'/%3E%3Cline x1='84' x2='84' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='44' x2='44' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='64' x2='64' y2='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='128' y1='64' y2='64' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='128' y1='44' y2='44' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='128' y1='83.75' y2='83.75' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x1='128' y1='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cline x2='128' y1='128' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'/%3E%3Cg opacity='.61'%3E%3Cpath d='M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z'/%3E%3C/g%3E%3Cpath d='m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2578'/%3E%3Cpath d='m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2628'/%3E%3Cpath d='M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z' fill='none' opacity='.61' stroke='%23000' stroke-miterlimit='10' stroke-width='.2627'/%3E%3C/g%3E%3Cg opacity='.2'%3E%3Cdefs%3E%3Crect id='g' width='128' height='128' opacity='.2'/%3E%3C/defs%3E%3CclipPath id='a'%3E%3Cuse xlink:href='%23g'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'%3E%3Cline x1='-28' x2='-28' y1='160' y2='-32'/%3E%3Cline x1='-24' x2='-24' y1='160' y2='-32'/%3E%3Cline x1='-20' x2='-20' y1='160' y2='-32'/%3E%3Cline x1='-16' x2='-16' y1='160' y2='-32'/%3E%3Cline x1='-12' x2='-12' y1='160' y2='-32'/%3E%3Cline x1='-8' x2='-8' y1='160' y2='-32'/%3E%3Cline x1='-4' x2='-4' y1='160' y2='-32'/%3E%3Cline y1='160' y2='-32'/%3E%3Cline x1='4' x2='4' y1='160' y2='-32'/%3E%3Cline x1='8' x2='8' y1='160' y2='-32'/%3E%3Cline x1='12' x2='12' y1='160' y2='-32'/%3E%3Cline x1='16' x2='16' y1='160' y2='-32'/%3E%3Cline x1='20' x2='20' y1='160' y2='-32'/%3E%3Cline x1='24' x2='24' y1='160' y2='-32'/%3E%3Cline x1='28' x2='28' y1='160' y2='-32'/%3E%3Cline x1='32' x2='32' y1='160' y2='-32'/%3E%3Cline x1='36' x2='36' y1='160' y2='-32'/%3E%3Cline x1='40' x2='40' y1='160' y2='-32'/%3E%3Cline x1='44' x2='44' y1='160' y2='-32'/%3E%3Cline x1='48' x2='48' y1='160' y2='-32'/%3E%3Cline x1='52' x2='52' y1='160' y2='-32'/%3E%3Cline x1='56' x2='56' y1='160' y2='-32'/%3E%3Cline x1='60' x2='60' y1='160' y2='-32'/%3E%3Cline x1='64' x2='64' y1='160' y2='-32'/%3E%3Cline x1='68' x2='68' y1='160' y2='-32'/%3E%3Cline x1='72' x2='72' y1='160' y2='-32'/%3E%3Cline x1='76' x2='76' y1='160' y2='-32'/%3E%3Cline x1='80' x2='80' y1='160' y2='-32'/%3E%3Cline x1='84' x2='84' y1='160' y2='-32'/%3E%3Cline x1='88' x2='88' y1='160' y2='-32'/%3E%3Cline x1='92' x2='92' y1='160' y2='-32'/%3E%3Cline x1='96' x2='96' y1='160' y2='-32'/%3E%3Cline x1='100' x2='100' y1='160' y2='-32'/%3E%3Cline x1='104' x2='104' y1='160' y2='-32'/%3E%3Cline x1='108' x2='108' y1='160' y2='-32'/%3E%3Cline x1='112' x2='112' y1='160' y2='-32'/%3E%3Cline x1='116' x2='116' y1='160' y2='-32'/%3E%3Cline x1='120' x2='120' y1='160' y2='-32'/%3E%3Cline x1='124' x2='124' y1='160' y2='-32'/%3E%3Cline x1='128' x2='128' y1='160' y2='-32'/%3E%3Cline x1='132' x2='132' y1='160' y2='-32'/%3E%3Cline x1='136' x2='136' y1='160' y2='-32'/%3E%3Cline x1='137' x2='137' y1='166.05' y2='-25.95'/%3E%3Cline x1='144' x2='144' y1='160' y2='-32'/%3E%3Cline x1='148' x2='148' y1='160' y2='-32'/%3E%3Cline x1='152' x2='152' y1='160' y2='-32'/%3E%3Cline x1='156' x2='156' y1='160' y2='-32'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='.25'%3E%3Cline x1='-32' x2='160' y1='-28' y2='-28'/%3E%3Cline x1='-32' x2='160' y1='-24' y2='-24'/%3E%3Cline x1='-32' x2='160' y1='-20' y2='-20'/%3E%3Cline x1='-32' x2='160' y1='-16' y2='-16'/%3E%3Cline x1='-32' x2='160' y1='-12' y2='-12'/%3E%3Cline x1='-32' x2='160' y1='-8' y2='-8'/%3E%3Cline x1='-32' x2='160' y1='-4' y2='-4'/%3E%3Cline x1='-32' x2='160'/%3E%3Cline x1='-32' x2='160' y1='4' y2='4'/%3E%3Cline x1='-32' x2='160' y1='8' y2='8'/%3E%3Cline x1='-32' x2='160' y1='12' y2='12'/%3E%3Cline x1='-32' x2='160' y1='16' y2='16'/%3E%3Cline x1='-32' x2='160' y1='20' y2='20'/%3E%3Cline x1='-32' x2='160' y1='24' y2='24'/%3E%3Cline x1='-32' x2='160' y1='28' y2='28'/%3E%3Cline x1='-32' x2='160' y1='32' y2='32'/%3E%3Cline x1='-32' x2='160' y1='36' y2='36'/%3E%3Cline x1='-32' x2='160' y1='40' y2='40'/%3E%3Cline x1='-32' x2='160' y1='44' y2='44'/%3E%3Cline x1='-32' x2='160' y1='48' y2='48'/%3E%3Cline x1='-32' x2='160' y1='52' y2='52'/%3E%3Cline x1='-32' x2='160' y1='56' y2='56'/%3E%3Cline x1='-32' x2='160' y1='60' y2='60'/%3E%3Cline x1='-32' x2='160' y1='64' y2='64'/%3E%3Cline x1='-32' x2='160' y1='68' y2='68'/%3E%3Cline x1='-32' x2='160' y1='72' y2='72'/%3E%3Cline x1='-32' x2='160' y1='76' y2='76'/%3E%3Cline x1='-32' x2='160' y1='80' y2='80'/%3E%3Cline x1='-32' x2='160' y1='84' y2='84'/%3E%3Cline x1='-32' x2='160' y1='88' y2='88'/%3E%3Cline x1='-32' x2='160' y1='92' y2='92'/%3E%3Cline x1='-32' x2='160' y1='96' y2='96'/%3E%3Cline x1='-32' x2='160' y1='100' y2='100'/%3E%3Cline x1='-32' x2='160' y1='104' y2='104'/%3E%3Cline x1='-32' x2='160' y1='108' y2='108'/%3E%3Cline x1='-32' x2='160' y1='112' y2='112'/%3E%3Cline x1='-32' x2='160' y1='116' y2='116'/%3E%3Cline x1='-32' x2='160' y1='120' y2='120'/%3E%3Cline x1='-32' x2='160' y1='124' y2='124'/%3E%3Cline x1='-32' x2='160' y1='128' y2='128'/%3E%3Cline x1='-32' x2='160' y1='132' y2='132'/%3E%3Cline x1='-32' x2='160' y1='136' y2='136'/%3E%3Cline x1='-32' x2='160' y1='140' y2='140'/%3E%3Cline x1='-32' x2='160' y1='144' y2='144'/%3E%3Cline x1='-32' x2='160' y1='148' y2='148'/%3E%3Cline x1='-32' x2='160' y1='152' y2='152'/%3E%3Cline x1='-32' x2='160' y1='156' y2='156'/%3E%3C/g%3E%3Cpath d='m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23F44336'%3E%3Crect width='4' height='128' opacity='.3'/%3E%3Crect x='124' width='4' height='128' opacity='.3'/%3E%3Crect transform='matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)' x='62' y='-58' width='4' height='120' opacity='.3'/%3E%3Crect transform='matrix(-1.837e-16 1 -1 -1.837e-16 190 62)' x='62' y='66' width='4' height='120' opacity='.3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E" textColor="#fff" badge=""></favicon-badge>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          try {
+            const registration = await navigator.serviceWorker.register('sw.js');
+            console.log(
+              'Service worker registered for scope',
+              registration.scope,
+            );
+          } catch (err) {
+            console.error(err.name, err.message);
+          }
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/favicon-badge@2.0.0/dist/FavIconBadge.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      const favicon = document.querySelector('favicon-badge');
+      const installButton = document.querySelector('#install');
+      const supportsAppBadge = 'setAppBadge' in navigator;
+      let setAppBadge;
+      let i = 0;
+      const getAppBadgeValue = () => {
+        if (i > 9) {
+          i = 0;
+        }
+        return i++;
+      };
+      const setAppBadgeFavicon = (value) => {
+        favicon.badge = value;
+      };
+      const setAppBadgeNative = (value) => {
+        navigator.setAppBadge(value);
+      }
+      if (
+        matchMedia('(display-mode: standalone)').matches &&
+        supportsAppBadge
+      ) {
+        setAppBadge = setAppBadgeNative;
+      } else {
+        setAppBadge = setAppBadgeFavicon;
+      }
+      setInterval(() => {
+        setAppBadge(getAppBadgeValue());
+      }, 1000);
+      if ('BeforeInstallPromptEvent' in window) {
+        let installEvent = null;
+        const onInstall = () => {
+          installButton.disabled = true;
+          installEvent = null;
+          if (supportsAppBadge) {
+            favicon.badge = false;
+            setAppBadge = setAppBadgeNative;
+          }
+        };
+        window.addEventListener('beforeinstallprompt', (event) => {
+          event.preventDefault();
+          installEvent = event;
+          installButton.disabled = false;
+        });
+        installButton.addEventListener('click', async () => {
+          if (!installEvent) {
+            return;
+          }
+          installEvent.prompt();
+          const result = await installEvent.userChoice;
+          if (result.outcome === 'accepted') {
+            onInstall();
+          }
+        });
+        window.addEventListener('appinstalled', (event) => {
+          onInstall();
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/badges/favicon.png b/src/site/content/en/patterns/web-apps/badges/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/badges/favicon.png differ
diff --git a/src/site/content/en/patterns/web-apps/badges/favicon.svg b/src/site/content/en/patterns/web-apps/badges/favicon.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/favicon.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/web-apps/badges/index.md b/src/site/content/en/patterns/web-apps/badges/index.md
new file mode 100644
index 00000000000..5fc9fd2ee12
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/index.md
@@ -0,0 +1,149 @@
+---
+layout: pattern
+title: How to create an app badge
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to create an app badge.
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - assets/app-badge.png
+  - assets/app-icon.png
+  - assets/favicon.png
+  - assets/favicon.svg
+---
+
+Badges are used to convey non-urgent information to the user. For example,
+they are used to indicate the status of an app, or the number of unread items.
+The classic way of creating an app badge is to add a number to the favicon.
+On modern browsers, after an app has been installed, there is a built-in way
+to add a badge to the app icon in the operating system's task bar.
+
+## The modern way
+
+### Using the `navigator.setAppBadge()` method
+
+The `navigator.setAppBadge()` method sets a badge on the icon associated with
+the installed app. The method takes an optional single argument, which is
+an integer which will be used as the value of the badge. Setting the number to 0
+clears the app badge. Not providing an argument results in a generic badge, commonly
+displayed as a colored dot.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/Niy9c011GzoVQmPbSEF5.png", alt="App icon showing the actual icon with the number 3 as the badge value.", width="282", height="388" %}
+
+{% BrowserCompat 'api.Navigator.setAppBadge' %}
+
+## The classic way
+
+### Adding a number to the favicon
+
+If the app is not installed yet, you can add a number to the favicon. There are many
+ways of doing so, for example, by drawing the favicon dynamically to a canvas with
+the badge info added and displaying it as a Blob URL, or to craft an SVG image with
+the badge info as a data URL.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/lGNsfETYtEFncrktRX6F.png", alt="Favicon showing the actual icon with the number 5 as the badge value.", width="760", height="86" %}
+
+## Progressive enhancement
+
+The snippet below uses a custom element
+[`<favicon-badge></favicon-badge>`](https://github.com/fallaciousreasoning/badgable-favicon#readme)
+that lets the developer declaratively set a badge on the favicon specified via the `src` attribute
+by passing an integer to the `badge` attribute. When the user installs the application, the badge
+is "upgraded" to a native operating system badge.
+
+```js
+import 'https://unpkg.com/favicon-badge@2.0.0/dist/FavIconBadge.js';
+
+// DOM references.
+const favicon = document.querySelector('favicon-badge');
+const installButton = document.querySelector('button');
+
+// Feature detection.
+const supportsAppBadge = 'setAppBadge' in navigator;
+
+let setAppBadge;
+
+// For the demo simply set the badge between [0, 9].
+let i = 0;
+const getAppBadgeValue = () => {
+  if (i > 9) {
+    i = 0;
+  }
+  return i++;
+};
+
+// Set the badge on the favicon.
+const setAppBadgeFavicon = (value) => {
+  favicon.badge = value;
+};
+
+// Set the native operating system badge.
+const setAppBadgeNative = (value) => {
+  navigator.setAppBadge(value);
+}
+
+// If the app is installed and the Badging API is supported,
+// set the badge on the native operating system. Else, fall
+// back to the favicon.
+if (
+  matchMedia('(display-mode: standalone)').matches &&
+  supportsAppBadge
+) {
+  setAppBadge = setAppBadgeNative;
+} else {
+  setAppBadge = setAppBadgeFavicon;
+}
+
+// Set a new badge every second.
+setInterval(() => {
+  setAppBadge(getAppBadgeValue());
+}, 1000);
+
+// If installation is supported…
+if ('BeforeInstallPromptEvent' in window) {
+  let installEvent = null;
+  const onInstall = () => {
+    // After installation, "upgrade" to the native operating system badge.
+    installButton.disabled = true;
+    installEvent = null;
+    if (supportsAppBadge) {
+      favicon.badge = false;
+      setAppBadge = setAppBadgeNative;
+    }
+  };
+
+  // …listen for the `beforeinstallprompt` event.
+  window.addEventListener('beforeinstallprompt', (event) => {
+    event.preventDefault();
+    installEvent = event;
+    installButton.disabled = false;
+  });
+
+  // Deal with installation.
+  installButton.addEventListener('click', async () => {
+    if (!installEvent) {
+      return;
+    }
+    installEvent.prompt();
+    const result = await installEvent.userChoice;
+    if (result.outcome === 'accepted') {
+      onInstall();
+    }
+  });
+
+  // Listen for the `appinstalled` in case the user installs the app manually.
+  window.addEventListener('appinstalled', (event) => {
+    onInstall();
+  });
+}
+```
+
+## Further reading
+
+- [Badging for app icons](badging-api/)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/badges/sw.js b/src/site/content/en/patterns/web-apps/badges/sw.js
new file mode 100644
index 00000000000..5b5fc18fab6
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/badges/sw.js
@@ -0,0 +1,30 @@
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
diff --git a/src/site/content/en/patterns/web-apps/contacts/assets/body.html b/src/site/content/en/patterns/web-apps/contacts/assets/body.html
new file mode 100644
index 00000000000..b4564204deb
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/contacts/assets/body.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to access contacts from the address book</title>
+  </head>
+  <body>
+    <h1>How to access contacts from the address book</h1>
+
+    <p>Ship your order as a present to a friend.</p>
+    <button hidden type="button">Open address book</button>
+    <pre></pre>
+
+    <label> Name <input class="name" autocomplete="name"></label>
+
+    <label hidden>Address <input class="address" required></label>
+
+    <label>Street <input class="autofill" autocomplete="address-line1" required></label>
+
+    <label>City <input class="autofill" autocomplete="address-level2" required></label>
+
+    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>
+
+    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>
+
+    <label>Country <input class="autofill" autocomplete="country"></label>
+
+    <label>Email<input class="email" autocomplete="email"></label>
+
+    <label>Telephone<input class="tel" autocomplete="tel"></label>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/contacts/assets/script.js b/src/site/content/en/patterns/web-apps/contacts/assets/script.js
new file mode 100644
index 00000000000..ea8d1926fbe
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/contacts/assets/script.js
@@ -0,0 +1,29 @@
+const button = document.querySelector('button');
+const name = document.querySelector('.name')
+const address = document.querySelector('.address')
+const email = document.querySelector('.email')
+const tel = document.querySelector('.tel')
+const pre = document.querySelector('pre')
+const autofills = document.querySelectorAll('.autofill')
+
+if ('contacts' in navigator) {
+  button.hidden = false;
+  for (const autofill of autofills) {
+    autofill.parentElement.style.display = 'none'
+  }
+  address.parentElement.style.display = 'block';
+  button.addEventListener('click', async () => {
+    const props = ['name', 'email', 'tel', 'address'];
+    const opts = {multiple: false};
+    try {
+      const [contact] = await navigator.contacts.select(props, opts);
+      name.value = contact.name;
+      address.value = contact.address;
+      tel.value = contact.tel
+      email.value = contact.email;
+    } catch (err) {
+      pre.textContent = `${err.name}: ${err.message}`
+    }
+  });
+}
+
diff --git a/src/site/content/en/patterns/web-apps/contacts/assets/style.css b/src/site/content/en/patterns/web-apps/contacts/assets/style.css
new file mode 100644
index 00000000000..8c140f77f40
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/contacts/assets/style.css
@@ -0,0 +1,18 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
+
+input {
+  display: block;
+  margin-block-end: 1rem;
+}
diff --git a/src/site/content/en/patterns/web-apps/contacts/demo.njk b/src/site/content/en/patterns/web-apps/contacts/demo.njk
new file mode 100644
index 00000000000..8760a875ffb
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/contacts/demo.njk
@@ -0,0 +1,108 @@
+---
+patternId: web-apps/contacts
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to access contacts from the address book</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+      }
+
+      input {
+        display: block;
+        margin-block-end: 1rem;
+      }
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to access contacts from the address book</h1>
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <p>Ship your order as a present to a friend.</p>
+    <button hidden type="button">Open address book</button>
+    <pre></pre>
+
+    <label> Name <input class="name" autocomplete="name"></label>
+
+    <label hidden>Address <input class="address" required></label>
+
+    <label>Street <input class="autofill" autocomplete="address-line1" required></label>
+
+    <label>City <input class="autofill" autocomplete="address-level2" required></label>
+
+    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>
+
+    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>
+
+    <label>Country <input class="autofill" autocomplete="country"></label>
+
+    <label>Email<input class="email" autocomplete="email"></label>
+
+    <label>Telephone<input class="tel" autocomplete="tel"></label>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      const button = document.querySelector('button');
+      const name = document.querySelector('.name')
+      const address = document.querySelector('.address')
+      const email = document.querySelector('.email')
+      const tel = document.querySelector('.tel')
+      const pre = document.querySelector('pre')
+      const autofills = document.querySelectorAll('.autofill')
+
+      if ('contacts' in navigator) {
+        button.hidden = false;
+        for (const autofill of autofills) {
+          autofill.parentElement.style.display = 'none'
+        }
+        address.parentElement.style.display = 'block';
+        button.addEventListener('click', async () => {
+          const props = ['name', 'email', 'tel', 'address'];
+          const opts = {multiple: false};
+          try {
+            const [contact] = await navigator.contacts.select(props, opts);
+            name.value = contact.name;
+            address.value = contact.address;
+            tel.value = contact.tel
+            email.value = contact.email;
+          } catch (err) {
+            pre.textContent = `${err.name}: ${err.message}`
+          }
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/contacts/index.md b/src/site/content/en/patterns/web-apps/contacts/index.md
new file mode 100644
index 00000000000..5b636e02c44
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/contacts/index.md
@@ -0,0 +1,81 @@
+---
+layout: pattern
+title: How to access contacts from the address book
+date: 2022-10-10
+authors:
+  - thomassteiner
+description: >
+  Learn how to get contacts from the address book.
+height: 800
+---
+
+Sometimes you want to let users of your app select one of their contacts to message via an email or
+chat application, or help them discover which of their contacts have already joined a social
+platform.
+
+## The modern way
+
+### Using the Contact Picker API
+
+To get contacts from the address book, you need to use the
+[Contact Picker API](https://developer.mozilla.org/docs/Web/API/Contact_Picker_API), which allows
+users to select entries from their contact list and share limited details of the selected entries
+with your app. Several properties like `name`, `email`, `tel`, `address`, and `icon` are available.
+To find out about the concretely supported properties, call `navigator.contacts.getProperties()`. To
+allow the user to select multiple contacts, pass `{multiple: true}` as the second parameter of
+`navigator.contacts.select()`.
+
+{% BrowserCompat 'api.ContactsManager' %}
+
+The Contact Picker API is available in the Android version of Chrome from version 80.
+
+## The classic way
+
+### Using a regular form
+
+The fallback method is to use a regular form that lets the user enter the contact's details.
+
+{% BrowserCompat 'html.elements.form' %}
+
+## Progressive enhancement
+
+If the Contact Picker API is supported, hide the static form fields and show a picker button
+instead.
+
+```js
+const button = document.querySelector('button');
+const name = document.querySelector('.name');
+const address = document.querySelector('.address');
+const email = document.querySelector('.email');
+const tel = document.querySelector('.tel');
+const pre = document.querySelector('pre');
+const autofills = document.querySelectorAll('.autofill');
+
+if ('contacts' in navigator) {
+  button.hidden = false;
+  for (const autofill of autofills) {
+    autofill.parentElement.style.display = 'none';
+  }
+  address.parentElement.style.display = 'block';
+  button.addEventListener('click', async () => {
+    const props = ['name', 'email', 'tel', 'address'];
+    const opts = { multiple: false };
+    try {
+      const [contact] = await navigator.contacts.select(props, opts);
+      name.value = contact.name;
+      address.value = contact.address;
+      tel.value = contact.tel;
+      email.value = contact.email;
+    } catch (err) {
+      pre.textContent = `${err.name}: ${err.message}`;
+    }
+  });
+}
+```
+
+## Further reading
+
+- [Contact Picker API](https://developer.mozilla.org/docs/Web/API/Contact_Picker_API)
+- [A contact picker for the web](/contact-picker/)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/index.md b/src/site/content/en/patterns/web-apps/index.md
new file mode 100644
index 00000000000..ced35c8f2e3
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/index.md
@@ -0,0 +1,6 @@
+---
+layout: pattern-set
+title: Web apps patterns
+description: A collection of common patterns for building web apps.
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yyuu9Wob0ix4z2jgBY1S.svg
+---
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/assets/body.html b/src/site/content/en/patterns/web-apps/multiple-screens/assets/body.html
new file mode 100644
index 00000000000..cb137a116e9
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/assets/body.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to use multiple screens</title>
+    <link rel="stylesheet" href="/style.css" />
+    <script src="/script.js" type="module"></script>
+  </head>
+  <body>
+    <h1>How to use multiple screens</h1>
+    <div>
+      <div>
+        Permission Status:
+        <span id="permissionStatus"></span>
+      </div>
+      <div>Screens Available: <span id="screensAvail"></span></div>
+    </div>
+    <button id="detectScreen">Detect Screens</button>
+    <button id="create" disabled>Create Page On Random Screen</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/assets/script.js b/src/site/content/en/patterns/web-apps/multiple-screens/assets/script.js
new file mode 100644
index 00000000000..2633f90e493
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/assets/script.js
@@ -0,0 +1,71 @@
+const detectButton = document.querySelector('#detectScreen');
+const createButton = document.querySelector('#create');
+const permissionLabel = document.querySelector('#permissionStatus');
+const screensAvailLabel = document.querySelector('#screensAvail');
+const popupUrl = 'supporting-popup.html';
+let screenDetails = undefined;
+let permission = undefined;
+let currentScreenLength = undefined;
+
+detectButton.addEventListener('click', async () => {
+  if ('getScreenDetails' in window) {
+    screenDetails = await window.getScreenDetails();
+    screenDetails.addEventListener('screenschange', (event) => {
+      if (screenDetails.screens.length !== currentScreenLength) {
+        currentScreenLength = screenDetails.screens.length;
+        updateScreenInfo();
+      }
+    });
+    try {
+      permission =
+        (await navigator.permissions.query({ name: 'window-placement' }))
+          .state === 'granted'
+          ? 'Granted'
+          : 'No Permission';
+    } catch (err) {
+      console.error(err);
+    }
+    currentScreenLength = screenDetails.screens.length;
+    updateScreenInfo();
+  } else {
+    screenDetails = window.screen;
+    permission = 'Multi-Screen Window Placement API - NOT SUPPORTED';
+    currentScreenLength = 1;
+    updateScreenInfo();
+  }
+});
+
+createButton.addEventListener('click', () => {
+  const screen =
+    screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
+  const options = {
+    x: screen.availLeft,
+    y: screen.availTop,
+    width: screen.availWidth,
+    height: screen.availHeight,
+  };
+  window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
+});
+
+const getFeaturesFromOptions = (options) => {
+  return (
+    'left=' +
+    options.x +
+    ',top=' +
+    options.y +
+    ',width=' +
+    options.width +
+    ',height=' +
+    options.height
+  );
+};
+
+const updateScreenInfo = () => {
+  screensAvailLabel.innerHTML = currentScreenLength;
+  permissionLabel.innerHTML = permission;
+  if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
+    createButton.disabled = false;
+  } else {
+    createButton.disabled = true;
+  }
+};
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/assets/style.css b/src/site/content/en/patterns/web-apps/multiple-screens/assets/style.css
new file mode 100644
index 00000000000..b627e034b24
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/assets/style.css
@@ -0,0 +1,18 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/assets/supporting-popup.html b/src/site/content/en/patterns/web-apps/multiple-screens/assets/supporting-popup.html
new file mode 100644
index 00000000000..043838b6e09
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/assets/supporting-popup.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to use multiple screens</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <script>
+      function randomBackgroundColor() {
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        var bgColor = 'rgb(' + r + ',' + g + ',' + b + ')';
+        document.body.style.backgroundColor = bgColor;
+      }
+      randomBackgroundColor();
+    </script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/demo.njk b/src/site/content/en/patterns/web-apps/multiple-screens/demo.njk
new file mode 100644
index 00000000000..656956888c8
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/demo.njk
@@ -0,0 +1,122 @@
+---
+patternId: web-apps/multiple-screens
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+    </style>
+    <title>How to use multiple screens</title>
+  </head>
+  <body>
+    <h1>How to use multiple screens</h1>
+    <div>
+      <div>
+        Permission Status:
+        <span id="permissionStatus"></span>
+      </div>
+      <div>Screens Available: <span id="screensAvail"></span></div>
+    </div>
+    <button id="detectScreen">Detect Screens</button>
+    <button id="create" disabled>Create Page On Random Screen</button>
+    {% set script %}
+      const detectButton = document.querySelector('#detectScreen');
+      const createButton = document.querySelector('#create');
+      const permissionLabel = document.querySelector('#permissionStatus');
+      const screensAvailLabel = document.querySelector('#screensAvail');
+      const popupUrl = 'popup.html';
+      let screenDetails = undefined;
+      let permission = undefined;
+      let currentScreenLength = undefined;
+
+      detectButton.addEventListener('click', async () => {
+        if ('getScreenDetails' in window) {
+          screenDetails = await window.getScreenDetails();
+          screenDetails.addEventListener('screenschange', (event) => {
+            if (screenDetails.screens.length !== currentScreenLength) {
+              currentScreenLength = screenDetails.screens.length;
+              updateScreenInfo();
+            }
+          });
+          try {
+            permission =
+              (await navigator.permissions.query({ name: 'window-management' }))
+                .state === 'granted'
+                ? 'Granted'
+                : 'No Permission';
+          } catch (err) {
+            console.error(err);
+          }
+          currentScreenLength = screenDetails.screens.length;
+          updateScreenInfo();
+        } else {
+          screenDetails = window.screen;
+          permission = 'Window Management API - NOT SUPPORTED';
+          currentScreenLength = 1;
+          updateScreenInfo();
+        }
+      });
+
+      createButton.addEventListener('click', () => {
+        const screen =
+          screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
+        const options = {
+          x: screen.availLeft,
+          y: screen.availTop,
+          width: screen.availWidth,
+          height: screen.availHeight,
+        };
+        window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
+      });
+
+      const getFeaturesFromOptions = (options) => {
+        return (
+          'left=' +
+          options.x +
+          ',top=' +
+          options.y +
+          ',width=' +
+          options.width +
+          ',height=' +
+          options.height
+        );
+      };
+
+      const updateScreenInfo = () => {
+        screensAvailLabel.innerHTML = currentScreenLength;
+        permissionLabel.innerHTML = permission;
+        if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
+          createButton.disabled = false;
+        } else {
+          createButton.disabled = true;
+        }
+      };
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/index.md b/src/site/content/en/patterns/web-apps/multiple-screens/index.md
new file mode 100644
index 00000000000..e54903c697b
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/index.md
@@ -0,0 +1,138 @@
+---
+layout: pattern
+title: How to use multiple screens
+date: 2022-10-10
+updated: 2023-05-19
+authors:
+  - pliao
+  - thomassteiner
+description: >
+  Learn how to use the Window Management API to control multiple screens.
+height: 800
+static:
+  - popup.html
+---
+
+## The modern way
+
+### Using `window.getScreenDetails()`
+
+To make sure your browser supports the `getScreenDetails()` method, first check if it exists
+on the `window` object. Then, call `window.getScreenDetails()` to get attached screens. Adding an
+event listener to adapt to changed screen details allows you to manage multiple screens according to
+the needs of your app.
+
+```js
+if ('getScreenDetails' in window) {
+  // The Window Management API is supported.
+  const screenDetails = await window.getScreenDetails();
+  screenDetails.addEventListener('screenschange', (event) => {
+    // Handle screens change.
+  });
+}
+```
+
+{% BrowserCompat 'api.Window.getScreenDetails' %}
+
+## The classic way
+
+### Using the window.screen method
+
+There's no classic way to control multi-screen layouts, but you can fall back to controlling the
+current screen by using the `window.screen` property and polyfill the new API shape.
+
+```js
+if (!('getScreenDetails' in window)) {
+  // Returning a one-element array with the current screen,
+  // noting that there might be more.
+  window.getScreenDetails = async () => [window.screen];
+  // Set to `false`, noting that this might be a lie.
+  window.screen.isExtended = false;
+}
+```
+
+{% BrowserCompat 'api.Window.screen' %}
+
+## Progressive enhancement
+
+The demo below shows how you can handle multiple screens with the Window Management API.
+The code checks the browser capability first and then falls back to the classic way.
+
+```js
+const detectButton = document.querySelector('#detectScreen');
+const createButton = document.querySelector('#create');
+const permissionLabel = document.querySelector('#permissionStatus');
+const screensAvailLabel = document.querySelector('#screensAvail');
+const popupUrl = './popup.html';
+let screenDetails = undefined;
+let permission = undefined;
+let currentScreenLength = undefined;
+
+detectButton.addEventListener('click', async () => {
+  if ('getScreenDetails' in window) {
+    screenDetails = await window.getScreenDetails();
+    screenDetails.addEventListener('screenschange', (event) => {
+      if (screenDetails.screens.length !== currentScreenLength) {
+        currentScreenLength = screenDetails.screens.length;
+        updateScreenInfo();
+      }
+    });
+    try {
+      permission =
+        (await navigator.permissions.query({ name: 'window-management' })).state === 'granted'
+          ? 'Granted'
+          : 'No Permission';
+    } catch (err) {
+      console.error(err);
+    }
+    currentScreenLength = screenDetails.screens.length;
+    updateScreenInfo();
+  } else {
+    screenDetails = window.screen;
+    permission = 'Window Management API - NOT SUPPORTED';
+    currentScreenLength = 1;
+    updateScreenInfo();
+  }
+});
+
+createButton.addEventListener('click', () => {
+  let screen = screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
+  options = {
+    x: screen.availLeft,
+    y: screen.availTop,
+    width: screen.availWidth,
+    height: screen.availHeight,
+  };
+  window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
+});
+
+function getFeaturesFromOptions(options) {
+  return (
+    'left=' +
+    options.x +
+    ',top=' +
+    options.y +
+    ',width=' +
+    options.width +
+    ',height=' +
+    options.height
+  );
+}
+
+updateScreenInfo = () => {
+  screensAvailLabel.innerHTML = currentScreenLength;
+  permissionLabel.innerHTML = permission;
+  if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
+    createButton.disabled = false;
+  } else {
+    createButton.disabled = true;
+  }
+};
+```
+
+## Further reading
+
+- [Managing several displays with the Window Management API](https://developer.chrome.com/articles/window-management/)
+- [Screen API](https://developer.mozilla.org/docs/Web/API/Screen)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/multiple-screens/popup.njk b/src/site/content/en/patterns/web-apps/multiple-screens/popup.njk
new file mode 100644
index 00000000000..ee19a17082a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/multiple-screens/popup.njk
@@ -0,0 +1,30 @@
+---
+patternId: web-apps/multiple-screens
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to use multiple screens</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    {% set script %}
+      function randomBackgroundColor() {
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        var bgColor = 'rgb(' + r + ',' + g + ',' + b + ')';
+        document.body.style.backgroundColor = bgColor;
+      }
+      randomBackgroundColor();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/body.html b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/body.html
new file mode 100644
index 00000000000..3f9e97f3954
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/body.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="icon"
+      href=""
+    />
+    <link rel="manifest" href="./manifest.json" />
+    <title>How to periodically synchronize data in the background</title>
+    <link rel="stylesheet" href="/style.css" />
+    <script src="/script.js" defer></script>
+  </head>
+  <body>
+    <h1>How to periodically synchronize data in the background</h1>
+    <p class="available">Periodic background sync can be used. Install the app first.</p>
+    <p class="not-available">Periodic background sync cannot be used.</p>
+    <h2>Last updated</h2>
+    <p class="last-updated">Never</p>
+    <h2>Registered tags</h2>
+    <ul>
+      <li>None yet.</li>
+    </ul>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.png b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.png differ
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.svg b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.svg
new file mode 100644
index 00000000000..02a11329f05
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/favicon.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="f" x1="83.081" x2="105.28" y1="36.552" y2="36.552" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m89.2 43.21c-0.84-0.18-3.53-2.77-6.12-5.84 4.16-2.1 16.11-7.47 20.68-7.47 0.46 0 0.69 0.06 0.78 0.09 0.34 0.12 0.71 0.33 0.73 1.26 0.07 2.9-3.13 7.42-4.52 7.99l-1.24 0.52c-2.69 1.12-8.28 3.47-10.2 3.47-0.03-0.02-0.07-0.02-0.11-0.02z" fill="url(#f)"/><path d="m103.76 31.39h0.04c0.03 1.67-2.37 5.78-3.62 6.45-0.36 0.15-0.78 0.32-1.25 0.52-1.91 0.8-7.6 3.18-9.39 3.34-0.77-0.45-2.36-1.98-4.05-3.86 5.03-2.38 14.65-6.45 18.27-6.45m0-3c-6.12 0-22.98 8.27-22.97 8.55 0 0 5.96 7.51 8.25 7.76 0.09 0.01 0.18 0.01 0.28 0.01 2.54 0 9.26-2.97 12.01-4.09 2.85-1.17 8.22-10.44 3.72-12.05-0.34-0.12-0.78-0.18-1.29-0.18z" fill="#5D4037"/><polyline points="30.29 103.37 31.17 108.44 37.99 106.57" fill="#8D6E63"/><polyline points="47.01 107.96 50.67 111.08 55.27 108.39" fill="#A1887F"/><polyline points="70.45 105.84 76.92 107.91 78.15 102.63" fill="#BCAAA4"/><polyline points="84.19 96.2 90.9 95.4 90.06 90.03" fill="#8D6E63"/><linearGradient id="e" x1="90.754" x2="108.35" y1="79.097" y2="79.097" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6E63" offset=".0037206"/><stop stop-color="#76594F" offset=".4152"/><stop stop-color="#4E342E" offset=".9989"/></linearGradient><path d="m97.03 83.58c-2.7 0-4.91-0.32-6.27-0.58l2.37-8.25c0.73-0.06 1.82-0.13 3.09-0.13 5.15 0 8.91 1.04 10.58 2.94 1.19 1.35 1.74 2.5 1.5 3.15-0.18 0.5-1.19 1.75-6.55 2.54-1.54 0.21-3.13 0.33-4.72 0.33z" fill="url(#e)"/><path d="m96.21 76.12c4.64 0 8.09 0.89 9.45 2.43 0.77 0.87 1.04 1.41 1.13 1.66-0.37 0.28-1.63 1.01-5.28 1.55-1.46 0.21-2.97 0.32-4.5 0.32-1.68 0-3.17-0.13-4.36-0.29l1.61-5.62c0.57-0.03 1.23-0.05 1.95-0.05m0-3c-2.45 0-4.25 0.23-4.25 0.23l-3.08 10.76s3.35 0.97 8.15 0.97c1.52 0 3.19-0.1 4.93-0.35 7.27-1.07 10.13-3.43 5.95-8.16-2.54-2.89-7.9-3.45-11.7-3.45z" fill="#5D4037"/><linearGradient id="d" x1="64.17" x2="64.17" y1="27.642" y2="107.86" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D2813" offset=".1715"/><stop stop-color="#6A3A27" offset=".2429"/><stop stop-color="#8D6859" offset=".3885"/><stop stop-color="#C5B2AA" offset=".5932"/><stop stop-color="#fff" offset=".7926"/></linearGradient><path d="m52.52 107.19c-37.81-0.61-44.98-29.22-46.31-41.49-0.61-5.6-0.56-10.55-0.53-13.82 0.02-1.77 0.03-3.01-0.05-3.85 0.32-0.14 0.89-0.29 1.25-0.38 1.27-0.33 3.01-0.78 3.15-2.46 0.13-1.54-1.28-2.47-2.42-3.21-0.15-0.1-0.34-0.22-0.52-0.35 3.71-3.46 20.01-14.52 46.65-14.52h0.63c18.29 0.12 32.11 8.38 41.07 24.55 0.37 0.67 0.62 1.12 0.84 1.43 1.78 2.55 4.66 2.82 5.82 2.82 0.39 0 0.63-0.03 0.63-0.03 0.15-0.02 0.3-0.06 0.44-0.12l13.32-5.84c0.58-0.13 1.11-0.19 1.59-0.19 1.18 0 3.94 0 4.24 7.24 0.36 8.46-2.77 8.7-3.95 8.79-0.06 0-0.13 0.01-0.2 0.01-1.42 0-4.41-0.79-7.31-1.55-3.76-0.99-7.65-2.01-10.28-2.01-0.83 0-1.51 0.1-2.07 0.31-3.31 1.21-4.05 4.22-3.98 5.71-0.04 2.2-1.38 38.98-41 38.98-0.31-0.01-0.66-0.01-1.01-0.02z" fill="url(#d)"/><path d="m53.76 28.63h0.62c11.37 0.07 21.04 3.4 28.75 9.9 6.22 5.24 9.45 11.07 11 13.86 0.4 0.72 0.66 1.19 0.92 1.56 2.19 3.13 5.67 3.47 7.07 3.47 0.41 0 0.7-0.03 0.8-0.04 0.3-0.03 0.6-0.11 0.88-0.24l13.18-5.78c0.41-0.08 0.79-0.12 1.12-0.12 0.8 0 2.48 0 2.72 5.78 0.3 6.99-1.77 7.15-2.54 7.21h-0.08c-1.22 0-4.25-0.8-6.92-1.5-3.85-1.01-7.84-2.06-10.67-2.06-1.01 0-1.86 0.13-2.6 0.4-4.09 1.5-5.04 5.22-4.98 7.14-0.03 0.91-0.45 10.06-5.25 18.99-6.59 12.25-18.1 18.46-34.22 18.46-0.34 0-0.68 0-1.02-0.01-36.59-0.57-43.53-28.24-44.82-40.11-0.6-5.51-0.55-10.41-0.51-13.64 0.01-1.1 0.02-2.01 0.01-2.76 0.02 0 0.04-0.01 0.06-0.01 1.32-0.34 4.05-1.05 4.29-3.81 0.15-1.73-0.85-2.92-1.88-3.75 5.05-3.85 19.63-12.94 44.07-12.94m0-3.05c-31.09 0-47.47 14.49-48.44 15.71-0.97 1.23 3.32 2.41 3.2 3.77s-4.74 0.92-4.43 2.87-0.36 9.06 0.61 17.94c0.63 5.76 4.74 42.15 47.8 42.84 0.36 0.01 0.72 0.01 1.07 0.01 42 0 42.52-40.53 42.52-40.53s-0.21-3.09 2.98-4.25c0.41-0.15 0.93-0.21 1.55-0.21 4.55 0 14.12 3.56 17.59 3.56 0.11 0 0.22 0 0.32-0.01 4.13-0.32 5.62-4.05 5.35-10.37-0.23-5.45-1.87-8.7-5.77-8.7-0.63 0-1.32 0.08-2.06 0.26l-13.46 5.9s-0.17 0.02-0.46 0.02c-0.96 0-3.22-0.22-4.57-2.17-1.76-2.52-11.65-26.43-43.15-26.63-0.23-0.01-0.44-0.01-0.65-0.01z" fill="#6D4C41"/><linearGradient id="c" x1="37.747" x2="63.178" y1="49.106" y2="49.106" gradientTransform="matrix(.9998 -.0211 .0211 .9998 -1.3443 1.3702)" gradientUnits="userSpaceOnUse"><stop stop-color="#5D4037" offset=".0022355"/><stop stop-color="#462D28" offset=".7745"/><stop stop-color="#3E2723" offset=".9989"/></linearGradient><path d="m37.31 43.68s4.13 2.45 1.83 7.32 5.92 8.24 12.4 8.35 11.54-10.92 11.2-15.99c-0.35-5.06-15.24-5.74-25.43 0.32z" fill="url(#c)"/><polyline points="26.79 89.88 28.89 95.75 34.49 93.08" fill="#BCAAA4"/><polyline points="42.28 96.62 45.56 101.61 50.22 97.71" fill="#BCAAA4"/><polyline points="16.25 86.69 15.43 96.38 24.03 95.47" fill="#D7CCC8"/><polyline points="62.26 97.53 66.89 101.26 70.23 95.98" fill="#BCAAA4"/><polyline points="55.12 104.31 59.74 108.04 63.09 102.76" fill="#BCAAA4"/><polyline points="76.49 94.53 82.87 96.17 82.74 89.65" fill="#D7CCC8"/><polyline points="37.77 79.99 40.25 85.68 44.45 81.59" fill="#6D4C41"/><polyline points="52.45 87.68 56.87 91.85 59.18 86.33" fill="#6D4C41"/><polyline points="53.86 70.2 57.51 75.45 60.27 69.66" fill="#8D6E63"/><polyline points="67.45 67.52 72.89 70.58 73 64.1" fill="#8D6E63"/><polyline points="81.12 71.93 86.55 74.98 86.67 68.51" fill="#8D6E63"/><polyline points="71.83 82.9 77.01 86.42 77.63 79.98" fill="#5D4037"/><polyline points="86.87 58.21 88.2 50.26 80.04 51.38" fill="#3E2723"/><polyline points="77.45 45.42 76.45 37.42 68.98 41.08" fill="#3E2723"/><polyline points="83.66 38.32 82.49 28.88 73.68 33.21" fill="#4E342E"/><polyline points="77.15 31.71 74.62 22.57 66.54 28.27" fill="#3E2723"/><polyline points="44.38 29.09 36.37 22.65 32.34 32.32" fill="#4E342E" stroke="#3E2723" stroke-miterlimit="10" stroke-width=".8152"/><polyline points="63.01 34.13 58.71 22.46 50.9 32.1" fill="#3E2723"/><polyline points="55.09 28.11 49 19.79 42.82 27.93" fill="#3E2723"/><polyline points="30.01 30.61 21.44 25.28 18.55 35.26" fill="#3E2723"/><polyline points="71.23 30.98 67.42 21.27 59.44 27.41" fill="#4E342E"/><polyline points="20.57 72.15 21.14 77.91 25.96 74.98" fill="#6D4C41"/><polyline points="12.55 75.13 7 82.08 14.42 82.08" fill="#BCAAA4"/><polyline points="16.24 56.96 12.28 62.42 18.7 64.05" fill="#6D4C41"/><polyline points="34.25 66.48 35.09 73.04 40.15 69.3" fill="#8D6E63"/><path d="m33.66 39.32c-0.14 5.06-4.13 9.04-8.91 8.89s-8.54-4.37-8.4-9.43 4.13-9.04 8.91-8.89 8.54 4.37 8.4 9.43z" fill="#fff"/><path d="m28.16 42.6c-1.85 1.85-4.76 1.76-6.51-0.2-1.74-1.96-1.66-5.04 0.19-6.88s4.76-1.76 6.51 0.2c1.74 1.95 1.66 5.03-0.19 6.88z"/><g display="none"><g display="inline"><g opacity=".6"><circle cx="-117.33" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="-97.33" x2="-97.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-137.33" x2="-137.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-117.33" x2="-117.33" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-53.33" x2="-181.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="-181.33" x2="-53.33" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="m-117.33 4.26c32.94 0 59.74 26.8 59.74 59.74s-26.8 59.74-59.74 59.74-59.74-26.8-59.74-59.74 26.79-59.74 59.74-59.74m0-0.26c-33.14 0-60 26.86-60 60s26.86 60 60 60 60-26.86 60-60-26.87-60-60-60z"/></g><path d="m-73.36 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.62 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m-81.33 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="m-67.57 108h-99.54c-5.63 0-10.23-4.6-10.23-10.23v-67.49c0-5.63 4.6-10.23 10.23-10.23h99.54c5.63 0 10.23 4.6 10.23 10.23v67.48c0.01 5.64-4.6 10.24-10.23 10.24z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="h" x="-181.33" width="128" height="128" opacity=".2"/></defs><clipPath id="b"><use xlink:href="#h"/></clipPath><g clip-path="url(#b)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-209.33" x2="-209.33" y1="160" y2="-32"/><line x1="-205.33" x2="-205.33" y1="160" y2="-32"/><line x1="-201.33" x2="-201.33" y1="160" y2="-32"/><line x1="-197.33" x2="-197.33" y1="160" y2="-32"/><line x1="-193.33" x2="-193.33" y1="160" y2="-32"/><line x1="-189.33" x2="-189.33" y1="160" y2="-32"/><line x1="-185.33" x2="-185.33" y1="160" y2="-32"/><line x1="-181.33" x2="-181.33" y1="160" y2="-32"/><line x1="-177.33" x2="-177.33" y1="160" y2="-32"/><line x1="-173.33" x2="-173.33" y1="160" y2="-32"/><line x1="-169.33" x2="-169.33" y1="160" y2="-32"/><line x1="-165.33" x2="-165.33" y1="160" y2="-32"/><line x1="-161.33" x2="-161.33" y1="160" y2="-32"/><line x1="-157.33" x2="-157.33" y1="160" y2="-32"/><line x1="-153.33" x2="-153.33" y1="160" y2="-32"/><line x1="-149.33" x2="-149.33" y1="160" y2="-32"/><line x1="-145.33" x2="-145.33" y1="160" y2="-32"/><line x1="-141.33" x2="-141.33" y1="160" y2="-32"/><line x1="-137.33" x2="-137.33" y1="160" y2="-32"/><line x1="-133.33" x2="-133.33" y1="160" y2="-32"/><line x1="-129.33" x2="-129.33" y1="160" y2="-32"/><line x1="-125.33" x2="-125.33" y1="160" y2="-32"/><line x1="-121.33" x2="-121.33" y1="160" y2="-32"/><line x1="-117.33" x2="-117.33" y1="160" y2="-32"/><line x1="-113.33" x2="-113.33" y1="160" y2="-32"/><line x1="-109.33" x2="-109.33" y1="160" y2="-32"/><line x1="-105.33" x2="-105.33" y1="160" y2="-32"/><line x1="-101.33" x2="-101.33" y1="160" y2="-32"/><line x1="-97.33" x2="-97.33" y1="160" y2="-32"/><line x1="-93.33" x2="-93.33" y1="160" y2="-32"/><line x1="-89.33" x2="-89.33" y1="160" y2="-32"/><line x1="-85.33" x2="-85.33" y1="160" y2="-32"/><line x1="-81.33" x2="-81.33" y1="160" y2="-32"/><line x1="-77.33" x2="-77.33" y1="160" y2="-32"/><line x1="-73.33" x2="-73.33" y1="160" y2="-32"/><line x1="-69.33" x2="-69.33" y1="160" y2="-32"/><line x1="-65.33" x2="-65.33" y1="160" y2="-32"/><line x1="-61.33" x2="-61.33" y1="160" y2="-32"/><line x1="-57.33" x2="-57.33" y1="160" y2="-32"/><line x1="-53.33" x2="-53.33" y1="160" y2="-32"/><line x1="-49.33" x2="-49.33" y1="160" y2="-32"/><line x1="-45.33" x2="-45.33" y1="160" y2="-32"/><line x1="-44.33" x2="-44.33" y1="166.05" y2="-25.95"/><line x1="-37.33" x2="-37.33" y1="160" y2="-32"/><line x1="-33.33" x2="-33.33" y1="160" y2="-32"/><line x1="-29.33" x2="-29.33" y1="160" y2="-32"/><line x1="-25.33" x2="-25.33" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-213.33" x2="-21.33" y1="-28" y2="-28"/><line x1="-213.33" x2="-21.33" y1="-24" y2="-24"/><line x1="-213.33" x2="-21.33" y1="-20" y2="-20"/><line x1="-213.33" x2="-21.33" y1="-16" y2="-16"/><line x1="-213.33" x2="-21.33" y1="-12" y2="-12"/><line x1="-213.33" x2="-21.33" y1="-8" y2="-8"/><line x1="-213.33" x2="-21.33" y1="-4" y2="-4"/><line x1="-213.33" x2="-21.33"/><line x1="-213.33" x2="-21.33" y1="4" y2="4"/><line x1="-213.33" x2="-21.33" y1="8" y2="8"/><line x1="-213.33" x2="-21.33" y1="12" y2="12"/><line x1="-213.33" x2="-21.33" y1="16" y2="16"/><line x1="-213.33" x2="-21.33" y1="20" y2="20"/><line x1="-213.33" x2="-21.33" y1="24" y2="24"/><line x1="-213.33" x2="-21.33" y1="28" y2="28"/><line x1="-213.33" x2="-21.33" y1="32" y2="32"/><line x1="-213.33" x2="-21.33" y1="36" y2="36"/><line x1="-213.33" x2="-21.33" y1="40" y2="40"/><line x1="-213.33" x2="-21.33" y1="44" y2="44"/><line x1="-213.33" x2="-21.33" y1="48" y2="48"/><line x1="-213.33" x2="-21.33" y1="52" y2="52"/><line x1="-213.33" x2="-21.33" y1="56" y2="56"/><line x1="-213.33" x2="-21.33" y1="60" y2="60"/><line x1="-213.33" x2="-21.33" y1="64" y2="64"/><line x1="-213.33" x2="-21.33" y1="68" y2="68"/><line x1="-213.33" x2="-21.33" y1="72" y2="72"/><line x1="-213.33" x2="-21.33" y1="76" y2="76"/><line x1="-213.33" x2="-21.33" y1="80" y2="80"/><line x1="-213.33" x2="-21.33" y1="84" y2="84"/><line x1="-213.33" x2="-21.33" y1="88" y2="88"/><line x1="-213.33" x2="-21.33" y1="92" y2="92"/><line x1="-213.33" x2="-21.33" y1="96" y2="96"/><line x1="-213.33" x2="-21.33" y1="100" y2="100"/><line x1="-213.33" x2="-21.33" y1="104" y2="104"/><line x1="-213.33" x2="-21.33" y1="108" y2="108"/><line x1="-213.33" x2="-21.33" y1="112" y2="112"/><line x1="-213.33" x2="-21.33" y1="116" y2="116"/><line x1="-213.33" x2="-21.33" y1="120" y2="120"/><line x1="-213.33" x2="-21.33" y1="124" y2="124"/><line x1="-213.33" x2="-21.33" y1="128" y2="128"/><line x1="-213.33" x2="-21.33" y1="132" y2="132"/><line x1="-213.33" x2="-21.33" y1="136" y2="136"/><line x1="-213.33" x2="-21.33" y1="140" y2="140"/><line x1="-213.33" x2="-21.33" y1="144" y2="144"/><line x1="-213.33" x2="-21.33" y1="148" y2="148"/><line x1="-213.33" x2="-21.33" y1="152" y2="152"/><line x1="-213.33" x2="-21.33" y1="156" y2="156"/></g><path d="m-21.58-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect x="-181.33" width="4" height="128" opacity=".3"/><rect x="-57.33" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 -115.33 119.33)" x="-119.33" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 8.6667 243.33)" x="-119.33" y="66" width="4" height="120" opacity=".3"/></g></g><g display="inline"><g opacity=".6"><circle cx="64" cy="64" r="28" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2625"/><line x1="84" x2="84" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="44" x2="44" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="64" x2="64" y2="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="64" y2="64" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="44" y2="44" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="83.75" y2="83.75" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x1="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><line x2="128" y1="128" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".25"/><g opacity=".61"><path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/></g><path d="m107.97 115.97h-87.94c-4.42 0-8.03-3.61-8.03-8.03v-87.91c0-4.42 3.61-8.03 8.03-8.03h87.94c4.42 0 8.03 3.61 8.03 8.03v87.91c0 4.42-3.61 8.03-8.03 8.03z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2578"/><path d="m100 124h-72c-4.4 0-8-3.6-8-8v-104c0-4.4 3.6-8 8-8h72c4.4 0 8 3.6 8 8v104c0 4.4-3.6 8-8 8z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2628"/><path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" fill="none" opacity=".61" stroke="#000" stroke-miterlimit="10" stroke-width=".2627"/></g><g opacity=".2"><defs><rect id="g" width="128" height="128" opacity=".2"/></defs><clipPath id="a"><use xlink:href="#g"/></clipPath><g clip-path="url(#a)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-28" x2="-28" y1="160" y2="-32"/><line x1="-24" x2="-24" y1="160" y2="-32"/><line x1="-20" x2="-20" y1="160" y2="-32"/><line x1="-16" x2="-16" y1="160" y2="-32"/><line x1="-12" x2="-12" y1="160" y2="-32"/><line x1="-8" x2="-8" y1="160" y2="-32"/><line x1="-4" x2="-4" y1="160" y2="-32"/><line y1="160" y2="-32"/><line x1="4" x2="4" y1="160" y2="-32"/><line x1="8" x2="8" y1="160" y2="-32"/><line x1="12" x2="12" y1="160" y2="-32"/><line x1="16" x2="16" y1="160" y2="-32"/><line x1="20" x2="20" y1="160" y2="-32"/><line x1="24" x2="24" y1="160" y2="-32"/><line x1="28" x2="28" y1="160" y2="-32"/><line x1="32" x2="32" y1="160" y2="-32"/><line x1="36" x2="36" y1="160" y2="-32"/><line x1="40" x2="40" y1="160" y2="-32"/><line x1="44" x2="44" y1="160" y2="-32"/><line x1="48" x2="48" y1="160" y2="-32"/><line x1="52" x2="52" y1="160" y2="-32"/><line x1="56" x2="56" y1="160" y2="-32"/><line x1="60" x2="60" y1="160" y2="-32"/><line x1="64" x2="64" y1="160" y2="-32"/><line x1="68" x2="68" y1="160" y2="-32"/><line x1="72" x2="72" y1="160" y2="-32"/><line x1="76" x2="76" y1="160" y2="-32"/><line x1="80" x2="80" y1="160" y2="-32"/><line x1="84" x2="84" y1="160" y2="-32"/><line x1="88" x2="88" y1="160" y2="-32"/><line x1="92" x2="92" y1="160" y2="-32"/><line x1="96" x2="96" y1="160" y2="-32"/><line x1="100" x2="100" y1="160" y2="-32"/><line x1="104" x2="104" y1="160" y2="-32"/><line x1="108" x2="108" y1="160" y2="-32"/><line x1="112" x2="112" y1="160" y2="-32"/><line x1="116" x2="116" y1="160" y2="-32"/><line x1="120" x2="120" y1="160" y2="-32"/><line x1="124" x2="124" y1="160" y2="-32"/><line x1="128" x2="128" y1="160" y2="-32"/><line x1="132" x2="132" y1="160" y2="-32"/><line x1="136" x2="136" y1="160" y2="-32"/><line x1="137" x2="137" y1="166.05" y2="-25.95"/><line x1="144" x2="144" y1="160" y2="-32"/><line x1="148" x2="148" y1="160" y2="-32"/><line x1="152" x2="152" y1="160" y2="-32"/><line x1="156" x2="156" y1="160" y2="-32"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".25"><line x1="-32" x2="160" y1="-28" y2="-28"/><line x1="-32" x2="160" y1="-24" y2="-24"/><line x1="-32" x2="160" y1="-20" y2="-20"/><line x1="-32" x2="160" y1="-16" y2="-16"/><line x1="-32" x2="160" y1="-12" y2="-12"/><line x1="-32" x2="160" y1="-8" y2="-8"/><line x1="-32" x2="160" y1="-4" y2="-4"/><line x1="-32" x2="160"/><line x1="-32" x2="160" y1="4" y2="4"/><line x1="-32" x2="160" y1="8" y2="8"/><line x1="-32" x2="160" y1="12" y2="12"/><line x1="-32" x2="160" y1="16" y2="16"/><line x1="-32" x2="160" y1="20" y2="20"/><line x1="-32" x2="160" y1="24" y2="24"/><line x1="-32" x2="160" y1="28" y2="28"/><line x1="-32" x2="160" y1="32" y2="32"/><line x1="-32" x2="160" y1="36" y2="36"/><line x1="-32" x2="160" y1="40" y2="40"/><line x1="-32" x2="160" y1="44" y2="44"/><line x1="-32" x2="160" y1="48" y2="48"/><line x1="-32" x2="160" y1="52" y2="52"/><line x1="-32" x2="160" y1="56" y2="56"/><line x1="-32" x2="160" y1="60" y2="60"/><line x1="-32" x2="160" y1="64" y2="64"/><line x1="-32" x2="160" y1="68" y2="68"/><line x1="-32" x2="160" y1="72" y2="72"/><line x1="-32" x2="160" y1="76" y2="76"/><line x1="-32" x2="160" y1="80" y2="80"/><line x1="-32" x2="160" y1="84" y2="84"/><line x1="-32" x2="160" y1="88" y2="88"/><line x1="-32" x2="160" y1="92" y2="92"/><line x1="-32" x2="160" y1="96" y2="96"/><line x1="-32" x2="160" y1="100" y2="100"/><line x1="-32" x2="160" y1="104" y2="104"/><line x1="-32" x2="160" y1="108" y2="108"/><line x1="-32" x2="160" y1="112" y2="112"/><line x1="-32" x2="160" y1="116" y2="116"/><line x1="-32" x2="160" y1="120" y2="120"/><line x1="-32" x2="160" y1="124" y2="124"/><line x1="-32" x2="160" y1="128" y2="128"/><line x1="-32" x2="160" y1="132" y2="132"/><line x1="-32" x2="160" y1="136" y2="136"/><line x1="-32" x2="160" y1="140" y2="140"/><line x1="-32" x2="160" y1="144" y2="144"/><line x1="-32" x2="160" y1="148" y2="148"/><line x1="-32" x2="160" y1="152" y2="152"/><line x1="-32" x2="160" y1="156" y2="156"/></g><path d="m159.75-31.75v191.5h-191.5v-191.5h191.5m0.25-0.25h-192v192h192v-192z"/></g></g><g fill="#F44336"><rect width="4" height="128" opacity=".3"/><rect x="124" width="4" height="128" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 66 -62)" x="62" y="-58" width="4" height="120" opacity=".3"/><rect transform="matrix(-1.837e-16 1 -1 -1.837e-16 190 62)" x="62" y="66" width="4" height="120" opacity=".3"/></g></g></g></svg>
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/manifest.json b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/manifest.json
new file mode 100644
index 00000000000..d30d3764fc8
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "How to periodically synchronize data in the background",
+  "short_name": "Periodic Background Sync",
+  "start_url": "./",
+  "id": "./",
+  "icons": [
+    {
+      "src": "../assets/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "../assets/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    }
+  ],
+  "display": "standalone"
+}
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/script.js b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/script.js
new file mode 100644
index 00000000000..b567b77294a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/script.js
@@ -0,0 +1,76 @@
+const available = document.querySelector('.available');
+const notAvailable = document.querySelector('.not-available');
+const ul = document.querySelector('ul');
+const lastUpdated = document.querySelector('.last-updated');
+
+const updateContent = async () => {
+  const data = await fetch(
+    'https://worldtimeapi.org/api/timezone/Europe/London.json'
+  ).then((response) => response.json());
+  return new Date(data.unixtime * 1000);
+};
+
+const registerPeriodicBackgroundSync = async (registration) => {
+  const status = await navigator.permissions.query({
+    name: 'periodic-background-sync',
+  });
+  if (status.state === 'granted' && 'periodicSync' in registration) {
+    try {
+      // Register the periodic background sync.
+      await registration.periodicSync.register('content-sync', {
+        // An interval of one day.
+        minInterval: 24 * 60 * 60 * 1000,
+      });
+      available.hidden = false;
+      notAvailable.hidden = true;
+
+      // List registered periodic background sync tags.
+      const tags = await registration.periodicSync.getTags();
+      if (tags.length) {
+        ul.innerHTML = '';
+      }
+      tags.forEach((tag) => {
+        const li = document.createElement('li');
+        li.textContent = tag;
+        ul.append(li);
+      });
+
+      // Update the user interface with the last periodic background sync data.
+      const backgroundSyncCache = await caches.open('periodic-background-sync');
+      if (backgroundSyncCache) {
+        const backgroundSyncResponse =
+          backgroundSyncCache.match('/last-updated');
+        if (backgroundSyncResponse) {
+          lastUpdated.textContent = `${await fetch('/last-updated').then(
+            (response) => response.text()
+          )} (periodic background-sync)`;
+        }
+      }
+
+      // Listen for incoming periodic background sync messages.
+      navigator.serviceWorker.addEventListener('message', async (event) => {
+        if (event.data.tag === 'content-sync') {
+          lastUpdated.textContent = `${await updateContent()} (periodic background sync)`;
+        }
+      });
+    } catch (err) {
+      console.error(err.name, err.message);
+      available.hidden = true;
+      notAvailable.hidden = false;
+      lastUpdated.textContent = 'Never';
+    }
+  } else {
+    available.hidden = true;
+    notAvailable.hidden = false;
+    lastUpdated.textContent = `${await updateContent()} (manual)`;
+  }
+};
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', async () => {
+    const registration = await navigator.serviceWorker.register('./sw.js');
+    console.log('Service worker registered for scope', registration.scope);
+
+    await registerPeriodicBackgroundSync(registration);
+  });
+}
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/style.css b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/style.css
new file mode 100644
index 00000000000..e695bb178ff
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/assets/style.css
@@ -0,0 +1,15 @@
+html {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+  color-scheme: dark light;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+}
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/demo.njk b/src/site/content/en/patterns/web-apps/periodic-background-sync/demo.njk
new file mode 100644
index 00000000000..e9b56632bca
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/demo.njk
@@ -0,0 +1,142 @@
+---
+patternId: web-apps/periodic-background-sync
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <title>How to periodically synchronize data in the background</title>
+    <style>
+      html {
+        box-sizing: border-box;
+        font-family: system-ui, sans-serif;
+        color-scheme: dark light;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+      }
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to periodically synchronize data in the background</h1>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <p class="available">Periodic background sync can be used. Install the app first.</p>
+    <p class="not-available">Periodic background sync cannot be used.</p>
+    <h2>Last updated</h2>
+    <p class="last-updated">Never</p>
+    <h2>Registered tags</h2>
+    <ul>
+      <li>None yet.</li>
+    </ul>
+    {% set script %}
+      const available = document.querySelector('.available');
+      const notAvailable = document.querySelector('.not-available');
+      const ul = document.querySelector('ul');
+      const lastUpdated = document.querySelector('.last-updated');
+
+      const updateContent = async () => {
+        const data = await fetch(
+          'https://worldtimeapi.org/api/timezone/Europe/London.json'
+        ).then((response) => response.json());
+        return new Date(data.unixtime * 1000);
+      };
+
+      const registerPeriodicBackgroundSync = async (registration) => {
+        const status = await navigator.permissions.query({
+          name: 'periodic-background-sync',
+        });
+        if (status.state === 'granted' && 'periodicSync' in registration) {
+          try {
+            // Register the periodic background sync.
+            await registration.periodicSync.register('content-sync', {
+              // An interval of one day.
+              minInterval: 24 * 60 * 60 * 1000,
+            });
+            available.hidden = false;
+            notAvailable.hidden = true;
+
+            // List registered periodic background sync tags.
+            const tags = await registration.periodicSync.getTags();
+            if (tags.length) {
+              ul.innerHTML = '';
+            }
+            tags.forEach((tag) => {
+              const li = document.createElement('li');
+              li.textContent = tag;
+              ul.append(li);
+            });
+
+            // Update the user interface with the last periodic background sync data.
+            const backgroundSyncCache = await caches.open('periodic-background-sync');
+            if (backgroundSyncCache) {
+              const backgroundSyncResponse =
+                backgroundSyncCache.match('/last-updated');
+              if (backgroundSyncResponse) {
+                lastUpdated.textContent = `${await fetch('/last-updated').then(
+                  (response) => response.text()
+                )} (periodic background-sync)`;
+              }
+            }
+
+            // Listen for incoming periodic background sync messages.
+            navigator.serviceWorker.addEventListener('message', async (event) => {
+              if (event.data.tag === 'content-sync') {
+                lastUpdated.textContent = `${await updateContent()} (periodic background sync)`;
+              }
+            });
+          } catch (err) {
+            console.error(err.name, err.message);
+            available.hidden = true;
+            notAvailable.hidden = false;
+            lastUpdated.textContent = 'Never';
+          }
+        } else {
+          available.hidden = true;
+          notAvailable.hidden = false;
+          lastUpdated.textContent = `${await updateContent()} (manual)`;
+        }
+      };
+
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', async () => {
+          const registration = await navigator.serviceWorker.register('sw.js');
+          console.log('Service worker registered for scope', registration.scope);
+
+          await registerPeriodicBackgroundSync(registration);
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
+
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/index.md b/src/site/content/en/patterns/web-apps/periodic-background-sync/index.md
new file mode 100644
index 00000000000..84c3d1f0197
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/index.md
@@ -0,0 +1,100 @@
+---
+layout: pattern
+title: How to periodically synchronize data in the background
+date: 2022-10-10
+description: >
+  Learn how to use Periodic Background Sync to enable web applications to periodically synchronize
+  data in the background.
+authors:
+  - chuijun
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - assets/favicon.png
+  - assets/favicon.svg
+---
+
+## The modern way
+
+Periodic background sync lets you show fresh content when a progressive web app or service
+worker-backed page is launched. It does this by downloading data in the background when the app or
+page is not being used.
+
+### Using the Periodic Background Sync API
+
+After the service worker is installed, use the
+[Permissions API](https://developer.mozilla.org/docs/Web/API/Permissions_API) to query for
+`periodic-background-sync`. You can do this from either a window or a service worker context.
+
+```js
+const status = await navigator.permissions.query({
+  name: 'periodic-background-sync',
+});
+if (status.state === 'granted') {
+  // Periodic background sync can be used.
+} else {
+  // Periodic background sync cannot be used.
+}
+```
+
+Registering a periodic sync requires both a tag and a minimum synchronization interval
+(`minInterval`). The tag identifies the registered sync so that multiple syncs can be registered. In
+the example below, the tag name is `'content-sync'` and the `minInterval` is one day.
+
+```js
+navigator.serviceWorker.ready.then(async registration => {
+  try {
+	await registration.periodicSync.register('get-cats', { minInterval: 24 * 60 * 60 * 1000 });
+    console.log(Periodic background sync registered.');
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+});
+```
+
+Call `periodicSync.getTags()` to retrieve an array of registration tags. The example below uses tag
+names to confirm that cache updating is active to avoid updating again.
+
+```js
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  const tags = await registration.periodicSync.getTags();
+  // Only update content if sync isn't set up.
+  if (!tags.includes('content-sync')) {
+    updateContentOnPageLoad();
+  }
+} else {
+  // If periodic background sync isn't supported, always update.
+  updateContentOnPageLoad();
+}
+```
+
+To respond to a periodic background sync event add a `periodicsync` event handler to your service
+worker. The event object passed to it will contain a tag parameter matching the value used during
+registration. For example, if a periodic background sync was registered with the name
+`'content-sync'`, then `event.tag` will be `'content-sync'`.
+
+```js
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    event.waitUntil(syncContent());
+  }
+});
+```
+
+### Browser compatibility
+
+{% BrowserCompat 'api.PeriodicSyncManager' %}
+
+## The classic way
+
+Rather than updating data in the background so it's ready when the user loads the app, the classic
+way simply consists of updating the data on load.
+
+## Further reading
+
+- [Richer offline experiences with the Periodic Background Sync API](/i18n/en/periodic-background-sync/)
+- [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/periodic-background-sync/sw.js b/src/site/content/en/patterns/web-apps/periodic-background-sync/sw.js
new file mode 100644
index 00000000000..efd4b1e3ee9
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/periodic-background-sync/sw.js
@@ -0,0 +1,66 @@
+const updateContent = async () => {
+  const data = await fetch(
+    'https://worldtimeapi.org/api/timezone/Europe/London.json'
+  ).then((response) => response.json());
+  return new Date(data.unixtime * 1000);
+};
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      if (event.request.url.endsWith('last-updated')) {
+        console.log(event.request.url);
+        console.log(await caches.match(event.request.url));
+        return (await caches.match(event.request.url)) || new Response('Never');
+      }
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })()
+  );
+});
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    event.waitUntil(
+      (async () => {
+        // Sync new data in the background and store it.
+        const lastUpdated = await updateContent();
+        const backgroundSyncCache = await caches.open(
+          'periodic-background-sync'
+        );
+        backgroundSyncCache.put('/last-updated', new Response(lastUpdated));
+
+        // Notify potentially running clients, so they can update.
+        self.clients.matchAll().then((clientList) => {
+          for (const client of clientList) {
+            client.postMessage({
+              tag: event.tag,
+            });
+          }
+        });
+      })()
+    );
+  }
+});
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/body.html b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/body.html
new file mode 100644
index 00000000000..799d9f0fda2
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/body.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="manifest" href="manifest.json" />
+    <title>How to add Richer Install UI to your web app</title>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('sw.js');
+        });
+      }
+    </script>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+    <h1>How to add Richer Install UI to your web app</h1>
+    <ol>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button disabled type="button">Install</button>
+        </p>
+      </li>
+      <li>
+        When you click on install a dialog similar to the ones from app stores
+        will be displayed.
+      </li>
+      <li>
+        The dialog includes the `description` and `screenshots` set in the app
+        manifest.
+      </li>
+      <li>
+        Screenshots should be different depending if the app is being installed
+        on a mobile or desktop device, according to the `form_factor` value set
+        for the screenshots on the manifest
+      </li>
+    </ol>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/manifest.json b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/manifest.json
new file mode 100644
index 00000000000..2a8f3426bfd
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/manifest.json
@@ -0,0 +1,40 @@
+{
+  "name": "Richer Install UI Example",
+  "short_name": "Richer Install UI",
+  "start_url": "../demo.html",
+  "icons": [
+    {
+      "src": "../icons/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "description": "This app demonstrate using the description and screenshots fields in the web app manifest to provide a richer install experience.",
+  "screenshots": [
+    {
+      "src": "./screens/squoosh-riui-phone1.jpg",
+      "type": "image/png",
+      "sizes": "540x1123",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "./screens/squoosh-riui-phone.jpg",
+      "type": "image/jpeg",
+      "sizes": "540x1123",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "./screens/squoosh-riui-desktop.jpg",
+      "type": "image/jpeg",
+      "sizes": "1194x1002",
+      "form_factor": "wide"
+    },
+    {
+      "src": "./screens/squoosh-riui-desktop1.jpg",
+      "type": "image/jpeg",
+      "sizes": "1194x1002",
+      "form_factor": "wide"
+    }
+  ],
+  "display": "standalone"
+}
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop.jpg b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop.jpg
new file mode 100644
index 00000000000..a66b20b4545
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop.jpg differ
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop1.jpg b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop1.jpg
new file mode 100644
index 00000000000..8b02420c4b8
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-desktop1.jpg differ
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone.jpg b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone.jpg
new file mode 100644
index 00000000000..74b801b5b67
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone.jpg differ
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone1.jpg b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone1.jpg
new file mode 100644
index 00000000000..3a3122f14f6
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/screens/squoosh-riui-phone1.jpg differ
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/assets/script.js b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/script.js
new file mode 100644
index 00000000000..e8c1be47a45
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/assets/script.js
@@ -0,0 +1,46 @@
+// The install button.
+const installButton = document.querySelector('button');
+
+// Only relevant for browsers that support installation.
+if ('BeforeInstallPromptEvent' in window) {
+  // Variable to stash the `BeforeInstallPromptEvent`.
+  let installEvent = null;
+
+  // Function that will be run when the app is installed.
+  const onInstall = () => {
+    // Disable the install button.
+    installButton.disabled = true;
+    // No longer needed.
+    installEvent = null;
+  };
+
+  window.addEventListener('beforeinstallprompt', (event) => {
+    // Do not show the install prompt quite yet.
+    event.preventDefault();
+    // Stash the `BeforeInstallPromptEvent` for later.
+    installEvent = event;
+    // Enable the install button.
+    installButton.disabled = false;
+  });
+
+  installButton.addEventListener('click', async () => {
+    // If there is no stashed `BeforeInstallPromptEvent`, return.
+    if (!installEvent) {
+      return;
+    }
+    // Use the stashed `BeforeInstallPromptEvent` to prompt the user.
+    installEvent.prompt();
+    const result = await installEvent.userChoice;
+    // If the user installs the app, run `onInstall()`.
+    if (result.outcome === 'accepted') {
+      onInstall();
+    }
+  });
+
+  // The user can decide to ignore the install button
+  // and just use the browser prompt directly. In this case
+  // likewise run `onInstall()`.
+  window.addEventListener('appinstalled', () => {
+    onInstall();
+  });
+}
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/demo.njk b/src/site/content/en/patterns/web-apps/richer-install-ui/demo.njk
new file mode 100644
index 00000000000..0db683ca411
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/demo.njk
@@ -0,0 +1,101 @@
+---
+patternId: web-apps/richer-install-ui
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <title>How to add Richer Install UI to your web app</title>
+    <style>
+      html {
+        font-family: system-ui, sans-serif;
+      }
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to create app shortcuts</h1>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <h1>How to add Richer Install UI to your web app</h1>
+    <ol>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button id="install" disabled type="button">Install</button>
+        </p>
+      </li>
+      <li>
+        When you click on install a dialog similar to the ones from app stores
+        will be displayed.
+      </li>
+      <li>
+        The dialog includes the `description` and `screenshots` set in the app
+        manifest.
+      </li>
+      <li>
+        Screenshots should be different depending if the app is being installed
+        on a mobile or desktop device, according to the `form_factor` value set
+        for the screenshots on the manifest
+      </li>
+    </ol>
+
+    {% set script %}
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('sw.js');
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      const installButton = document.querySelector('#install');
+      if ('BeforeInstallPromptEvent' in window) {
+        let installEvent = null;
+        const onInstall = () => {
+          installButton.disabled = true;
+          installEvent = null;
+        };
+        window.addEventListener('beforeinstallprompt', (event) => {
+          event.preventDefault();
+          installEvent = event;
+          installButton.disabled = false;
+        });
+        installButton.addEventListener('click', async () => {
+          if (!installEvent) {
+            return;
+          }
+          installEvent.prompt();
+          const result = await installEvent.userChoice;
+          if (result.outcome === 'accepted') {
+            onInstall();
+          }
+        });
+        window.addEventListener('appinstalled', (event) => {
+          onInstall();
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/icons/favicon.png b/src/site/content/en/patterns/web-apps/richer-install-ui/icons/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/richer-install-ui/icons/favicon.png differ
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/index.md b/src/site/content/en/patterns/web-apps/richer-install-ui/index.md
new file mode 100644
index 00000000000..b3d324bd7d5
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/index.md
@@ -0,0 +1,116 @@
+---
+layout: pattern
+title: How to add Richer Install UI
+date: 2023-03-27
+authors:
+  - ajara
+description: |
+  Add an app store-like install experience to your app by adding the description and screenshots fields to your manifest.
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - icons/favicon.png
+  - assets/screens/squoosh-riui-desktop.jpg
+  - assets/screens/squoosh-riui-desktop1.jpg
+  - assets/screens/squoosh-riui-phone.jpg
+  - assets/screens/squoosh-riui-phone1.jpg
+---
+
+App stores provide a space for developers to showcase their apps before installation, with screenshots and text information that help the user make the choice to install the app. Richer install UI provides a similar space for web app developers to invite their users to install their app, directly from the browser. This enhanced UI is available in Chrome for Android and desktop environments.
+
+## Default prompt
+See the example below for the default experience, which doesn’t provide enough context.
+
+<figure>
+{% Img src="image/SeARmcA1EicLXagFnVOe0ou9cqK2/yshUdzH27Gm1Rzdj9s8O.png", alt="The browser default install dialog for desktop.", width="385", height="676" %}
+ <figcaption>
+    Default install dialog on desktop
+  </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/SeARmcA1EicLXagFnVOe0ou9cqK2/y5sNbIN19bPNbqni3xay.png", alt="The browser default install dialog for mobile.", width="556", height="781" %}
+ <figcaption>
+    Default install dialog on mobile
+  </figcaption>
+</figure>
+
+## Richer Install UI
+To get the Richer Install UI dialog instead of the regular small default prompt,  add  `screenshots` and `description` fields to your web manifest. Check out the Squoosh.app example below:
+
+<figure>
+  {% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/5SlCnibmZHqkXdGVgPZY.jpeg", alt="Richer Install UI on desktop and mobile", width="800", height="386" %}
+  <figcaption>
+    Richer installation UI on desktop and mobile.
+  </figcaption>
+</figure>
+
+The Richer Install UI dialog is composed of the contents of the `description` and `screenshots` fields in the web manifest.
+
+To trigger the dialog you just need to add at least one screenshot for the corresponding form factor, but it is recommended to add the description as well. Checkout the specifics for those fields below.
+## Screenshots
+
+Screenshots really add the 'richer' part to the new install UI and we strongly recommend their use. In your manifest you add the `screenshots` member, which takes an array that requires at least one image and Chrome will display up to eight. An example is shown below.
+
+```json
+ "screenshots": [
+    {
+     "src": "source/image1.gif",
+      "sizes": "640x320",
+      "type": "image/gif",
+      "form_factor": "wide",
+      "label": "Wonder Widgets"
+    }
+]
+```
+Screenshots must follow these criteria:
+
+- Width and height must be at least 320px and at most 3,840px.
+- The maximum dimension can't be more than 2.3 times as long as the minimum dimension.
+- All screenshots with the _same form factor_ value must have _identical aspect ratios_.
+- Only JPEG and PNG image formats are supported.
+- Only eight screenshots will be shown. If more are added, the user agent simply ignores them.
+
+Also, you need to include the size and type of the image so it renders correctly. [See this demo](https://glitch.com/edit/#!/richerinstall-screenshot?path=manifest.json%3A14%3A24).
+
+The `form_factor` indicates to the browser whether the screenshot should appear on desktop (`wide`) or mobile environments (`narrow`).
+
+## Description
+
+The `description` member describes the application in the installation prompt, to invite the user to keep the app.
+
+The dialog would display even without a `description`, but it is encouraged.
+There is a maximum that kicks in after 7 lines of text (roughly 324 characters) and longer descriptions are truncated and an ellipsis is appended (as you can see in [this example](https://glitch.com/edit/#!/richerinstall-longer-description)).
+
+```json
+{
+…
+"description": "Compress and compare images with different codecs
+right in your browser."
+}
+```
+
+
+<figure>
+  {% Img src="image/xizoeLGxYNf3VLUHc5BsIoiE1Af1/oOj7Ls7cQ8E274faxfOz.jpg",
+alt="Description added", width="342", height="684" %}
+  <figcaption>Description added.</figcaption>
+</figure>
+<figure>
+  {% Img src="image/xizoeLGxYNf3VLUHc5BsIoiE1Af1/Dpzs03K6QmBkZaefX2nU.jpg",
+alt="A longer description that has been truncated.", width="342", height="684" %}
+  <figcaption>Longer descriptions are truncated.</figcaption>
+</figure>
+
+The description appears at the top of the installation prompt.
+
+You may have noticed from the screenshots that installation dialogs also list the app's origin. Origins that are too long to fit the UI are truncated, this is also known as eliding and is used
+as a [security measure to protect users](https://chromium.googlesource.com/chromium/src/+/master/docs/security/url_display_guidelines/url_display_guidelines.md#eliding-urls).
+
+## Further reading
+
+- [Richer PWA installation UI](https://developer.chrome.com/blog/richer-pwa-installation/)
+- [Richer install UI available for desktop](https://developer.chrome.com/blog/richer-install-ui-desktop/)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/richer-install-ui/sw.js b/src/site/content/en/patterns/web-apps/richer-install-ui/sw.js
new file mode 100644
index 00000000000..fd079dc633e
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/richer-install-ui/sw.js
@@ -0,0 +1,30 @@
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
diff --git a/src/site/content/en/patterns/web-apps/share/assets/body.html b/src/site/content/en/patterns/web-apps/share/assets/body.html
new file mode 100644
index 00000000000..1458b25f733
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/assets/body.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to let the user share the website they are on</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>How to let the user share the website they are on</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at libero
+      eget ante congue molestie. Integer varius enim leo. Duis est nisi,
+      ullamcorper et posuere eu, mattis sed lorem. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit. In at suscipit erat, et sollicitudin lorem.
+    </p>
+    <img src="https://placekitten.com/400/300" width=400 height=300>
+    <p>
+      In euismod ornare scelerisque. Nunc imperdiet augue ac porttitor
+      porttitor. Pellentesque habitant morbi tristique senectus et netus et
+      malesuada fames ac turpis egestas. Curabitur eget pretium elit, et
+      interdum quam.
+    </p>
+    <hr />
+    <button type="button"><span class="icon"></span>Share</button>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/share/assets/script.js b/src/site/content/en/patterns/web-apps/share/assets/script.js
new file mode 100644
index 00000000000..656d525e37a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/assets/script.js
@@ -0,0 +1,44 @@
+// DOM references
+const button = document.querySelector('button');
+const icon = button.querySelector('.icon');
+const canonical = document.querySelector('link[rel="canonical"]');
+
+// Find out if the user is on a device made by Apple.
+const IS_MAC = /Mac|iPhone/.test(navigator.platform);
+// Find out if the user is on a Windows device.
+const IS_WINDOWS = /Win/.test(navigator.platform);
+// For Apple devices or Windows, use the platform-specific share icon.
+icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
+
+button.addEventListener('click', async () => {
+  // Title and text are identical, since the title may actually be ignored.
+  const title = document.title;
+  const text = document.title;
+  // Use the canonical URL, if it exists, else, the current location.
+  const url = canonical?.href || location.href;
+
+  // Feature detection to see if the Web Share API is supported.
+  if ('share' in navigator) {
+    try {
+      await navigator.share({
+        url,
+        text,
+        title,
+      });
+      return;
+    } catch (err) {
+      // If the user cancels, an `AbortError` is thrown.
+      if (err.name !== "AbortError") {
+        console.error(err.name, err.message);
+      }
+    }
+  }
+  // Fallback to use Twitter's Web Intent URL.
+  // (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
+  const shareURL = new URL('https://twitter.com/intent/tweet');
+  const params = new URLSearchParams();
+  params.append('text', text);
+  params.append('url', url);
+  shareURL.search = params;
+  window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
+});
diff --git a/src/site/content/en/patterns/web-apps/share/assets/style.css b/src/site/content/en/patterns/web-apps/share/assets/style.css
new file mode 100644
index 00000000000..3d21dfbbbcd
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/assets/style.css
@@ -0,0 +1,47 @@
+:root {
+  color-scheme: dark light;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+button {
+  display: flex;
+}
+
+button .icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-size: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+  button .icon {
+    filter: invert();
+  }
+}
+
+.share {
+  background-image: url('share.svg');
+}
+
+.sharemac {
+  background-image: url('sharemac.svg');
+}
diff --git a/src/site/content/en/patterns/web-apps/share/demo.njk b/src/site/content/en/patterns/web-apps/share/demo.njk
new file mode 100644
index 00000000000..0dd111aab11
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/demo.njk
@@ -0,0 +1,116 @@
+---
+patternId: web-apps/share
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to let the user share the website they are on</title>
+    <style>
+      :root {
+        color-scheme: dark light;
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 1rem;
+        font-family: system-ui, sans-serif;
+      }
+
+      img,
+      video {
+        height: auto;
+        max-width: 100%;
+      }
+
+      button {
+        display: flex;
+      }
+
+      button > span {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background-size: 1em;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        button > span {
+          filter: invert();
+        }
+      }
+
+      .share {
+        background-image: url('share.svg');
+      }
+
+      .sharemac {
+        background-image: url('sharemac.svg');
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to let the user share the website they are on</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at libero
+      eget ante congue molestie. Integer varius enim leo. Duis est nisi,
+      ullamcorper et posuere eu, mattis sed lorem. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit. In at suscipit erat, et sollicitudin lorem.
+    </p>
+    <img src="https://placekitten.com/400/300" width=400 height=300>
+    <p>
+      In euismod ornare scelerisque. Nunc imperdiet augue ac porttitor
+      porttitor. Pellentesque habitant morbi tristique senectus et netus et
+      malesuada fames ac turpis egestas. Curabitur eget pretium elit, et
+      interdum quam.
+    </p>
+    <hr />
+    <button type="button"><span class="icon"></span>Share</button>
+    {% set script %}
+      const IS_MAC = /Mac|iPhone/.test(navigator.platform);
+      const IS_WINDOWS = /Win/.test(navigator.platform);
+
+      const button = document.querySelector('button');
+      const icon = button.querySelector('.icon');
+      const canonical = document.querySelector('link[rel="canconical"]');
+
+      icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
+
+      button.addEventListener('click', async () => {
+        const title = document.title;
+        const text = document.title;
+        const url = canonical?.href || location.href;
+        if ('share' in navigator) {
+          try {
+            await navigator.share({
+              url,
+              text,
+              title,
+            });
+            return;
+          } catch (err) {
+            if (err.name !== "AbortError") {
+              console.error(err.name, err.message);
+            }
+          }
+        }
+        const shareURL = new URL('https://twitter.com/intent/tweet');
+        const params = new URLSearchParams();
+        params.append('text', text);
+        params.append('url', url);
+        shareURL.search = params;
+        window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
+      });
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/share/index.md b/src/site/content/en/patterns/web-apps/share/index.md
new file mode 100644
index 00000000000..e1831c53eb5
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/index.md
@@ -0,0 +1,118 @@
+---
+layout: pattern
+title: How to let the user share the website they are on
+date: 2022-10-10
+updated: 2022-10-17
+description: >
+  Learn how to let the user share the website they are on.
+authors:
+  - thomassteiner
+height: 800
+static:
+  - share.svg
+  - sharemac.svg
+  - sharewindows.svg
+---
+
+Letting the user share the website they are on is a common web apps pattern
+that you can find on many news sites, blogs, or shopping sites. Since linking is
+one of the web's super powers, the hope is to acquire traffic from users who see
+the shared link on social networking sites, or who receive it via chat messages
+or even plain old school via email.
+
+## The modern way
+
+### Using the Web Share API
+
+The [Web Share API](/web-share/) lets the user share data like
+the URL of the page they are on, along with a title and descriptive text.
+The `navigator.share()` method of the Web Share API invokes the native sharing
+mechanism of the device. It returns a promise and takes a single argument with
+the to-be-shared data. Possible values are:
+
+- `url`: A string representing the URL to be shared.
+- `text`: A string representing text to be shared.
+- `title`: A string representing a title to be shared. May be ignored by the browser.
+
+{% BrowserCompat 'api.Navigator.share' %}
+
+## The classic way
+
+### Using a social networking site's share intent
+
+Not all browsers support the Web Share API yet. A fallback is thus to integrate with
+your target audience's most popular social networking sites. A popular example
+is Twitter, whose [Web Intent URL](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent) allows for a text and a URL to be shared. The method typically consists
+of crafting a URL and opening it in a browser.
+
+## UI considerations
+
+It is a nice touch to respect the platform's established share icon according to the UI
+guidelines of the operating system vendors.
+
+- Windows:
+  <svg style="display: block; background-color: white; width: 24px; height: 24px;" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.605 6.83811C31.2415 6.49733 30.7103 6.40497 30.2531 6.60304C29.7959 6.80111 29.5 7.25178 29.5 7.75003V13.2223C29.1425 13.2305 28.7251 13.2514 28.26 13.2944C26.725 13.4362 24.6437 13.8204 22.4841 14.799C18.0824 16.7935 13.5579 21.1728 12.5081 30.3581C12.4493 30.8729 12.7141 31.3706 13.174 31.6094C13.6338 31.8482 14.1932 31.7785 14.5805 31.4343C18.9164 27.5801 22.9778 25.9209 25.9168 25.2155C27.3897 24.862 28.5872 24.7466 29.4032 24.718C29.4361 24.7169 29.4684 24.7158 29.5 24.715V30.25C29.5 30.7483 29.7959 31.1989 30.2531 31.397C30.7103 31.5951 31.2415 31.5027 31.605 31.162L43.605 19.9119C43.857 19.6756 44 19.3455 44 19C44 18.6545 43.857 18.3244 43.605 18.0881L31.605 6.83811ZM30.606 15.7422L30.6257 15.7438L30.6285 15.7441L30.6269 15.7439C30.9779 15.7787 31.3272 15.6635 31.5888 15.4268C31.8506 15.1899 32 14.8532 32 14.5V10.6353L40.9224 19L32 27.3647V23.5C32 22.8696 31.5462 22.34 30.9051 22.2597L30.9036 22.2595L30.902 22.2593L30.8982 22.2588L30.8883 22.2577L30.8597 22.2545C30.8368 22.252 30.8062 22.249 30.768 22.2456C30.6917 22.2389 30.5853 22.2309 30.4506 22.2242C30.1812 22.2109 29.7982 22.2026 29.3156 22.2195C28.3503 22.2534 26.9854 22.3881 25.3333 22.7845C22.6531 23.4278 19.2341 24.7565 15.5547 27.4384C17.0405 21.3588 20.4181 18.4798 23.5159 17.0761C25.3563 16.2422 27.15 15.9076 28.49 15.7838C29.1577 15.7221 29.7057 15.7134 30.081 15.7196C30.2684 15.7227 30.412 15.7295 30.5052 15.7351C30.5517 15.738 30.5856 15.7405 30.606 15.7422ZM12.25 8.00003C8.79822 8.00003 6 10.7983 6 14.25V35.75C6 39.2018 8.79822 42 12.25 42H33.75C37.2018 42 40 39.2018 40 35.75V33.5C40 32.8097 39.4404 32.25 38.75 32.25C38.0596 32.25 37.5 32.8097 37.5 33.5V35.75C37.5 37.8211 35.8211 39.5 33.75 39.5H12.25C10.1789 39.5 8.5 37.8211 8.5 35.75V14.25C8.5 12.179 10.1789 10.5 12.25 10.5H20.5C21.1904 10.5 21.75 9.94039 21.75 9.25003C21.75 8.55967 21.1904 8.00003 20.5 8.00003H12.25Z" fill="#212121"/>
+</svg>
+- Apple:
+  <svg style="display: block; background-color: white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/></svg>
+- Android and other operating systems:
+  <svg style="display: block; background-color: white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
+
+## Progressive enhancement
+
+The snippet below uses the Web Share API when it is supported, then falls back to
+Twitter's Web Intent URL.
+
+```js
+// DOM references
+const button = document.querySelector('button');
+const icon = button.querySelector('.icon');
+const canonical = document.querySelector('link[rel="canonical"]');
+
+// Find out if the user is on a device made by Apple.
+const IS_MAC = /Mac|iPhone/.test(navigator.platform);
+// Find out if the user is on a Windows device.
+const IS_WINDOWS = /Win/.test(navigator.platform);
+// For Apple devices or Windows, use the platform-specific share icon.
+icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
+
+button.addEventListener('click', async () => {
+  // Title and text are identical, since the title may actually be ignored.
+  const title = document.title;
+  const text = document.title;
+  // Use the canonical URL, if it exists, else, the current location.
+  const url = canonical?.href || location.href;
+
+  // Feature detection to see if the Web Share API is supported.
+  if ('share' in navigator) {
+    try {
+      await navigator.share({
+        url,
+        text,
+        title,
+      });
+      return;
+    } catch (err) {
+      // If the user cancels, an `AbortError` is thrown.
+      if (err.name !== "AbortError") {
+        console.error(err.name, err.message);
+      }
+    }
+  }
+  // Fallback to use Twitter's Web Intent URL.
+  // (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
+  const shareURL = new URL('https://twitter.com/intent/tweet');
+  const params = new URLSearchParams();
+  params.append('text', text);
+  params.append('url', url);
+  shareURL.search = params;
+  window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
+});
+```
+
+## Further reading
+
+- [Web Share API](/web-share/)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/share/share.svg b/src/site/content/en/patterns/web-apps/share/share.svg
new file mode 100644
index 00000000000..07fc6639ed2
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-apps/share/sharemac.svg b/src/site/content/en/patterns/web-apps/share/sharemac.svg
new file mode 100644
index 00000000000..8ad5fe6ebfe
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/sharemac.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-apps/share/sharewindows.svg b/src/site/content/en/patterns/web-apps/share/sharewindows.svg
new file mode 100644
index 00000000000..d53ddd32930
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/share/sharewindows.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.605 6.83811C31.2415 6.49733 30.7103 6.40497 30.2531 6.60304C29.7959 6.80111 29.5 7.25178 29.5 7.75003V13.2223C29.1425 13.2305 28.7251 13.2514 28.26 13.2944C26.725 13.4362 24.6437 13.8204 22.4841 14.799C18.0824 16.7935 13.5579 21.1728 12.5081 30.3581C12.4493 30.8729 12.7141 31.3706 13.174 31.6094C13.6338 31.8482 14.1932 31.7785 14.5805 31.4343C18.9164 27.5801 22.9778 25.9209 25.9168 25.2155C27.3897 24.862 28.5872 24.7466 29.4032 24.718C29.4361 24.7169 29.4684 24.7158 29.5 24.715V30.25C29.5 30.7483 29.7959 31.1989 30.2531 31.397C30.7103 31.5951 31.2415 31.5027 31.605 31.162L43.605 19.9119C43.857 19.6756 44 19.3455 44 19C44 18.6545 43.857 18.3244 43.605 18.0881L31.605 6.83811ZM30.606 15.7422L30.6257 15.7438L30.6285 15.7441L30.6269 15.7439C30.9779 15.7787 31.3272 15.6635 31.5888 15.4268C31.8506 15.1899 32 14.8532 32 14.5V10.6353L40.9224 19L32 27.3647V23.5C32 22.8696 31.5462 22.34 30.9051 22.2597L30.9036 22.2595L30.902 22.2593L30.8982 22.2588L30.8883 22.2577L30.8597 22.2545C30.8368 22.252 30.8062 22.249 30.768 22.2456C30.6917 22.2389 30.5853 22.2309 30.4506 22.2242C30.1812 22.2109 29.7982 22.2026 29.3156 22.2195C28.3503 22.2534 26.9854 22.3881 25.3333 22.7845C22.6531 23.4278 19.2341 24.7565 15.5547 27.4384C17.0405 21.3588 20.4181 18.4798 23.5159 17.0761C25.3563 16.2422 27.15 15.9076 28.49 15.7838C29.1577 15.7221 29.7057 15.7134 30.081 15.7196C30.2684 15.7227 30.412 15.7295 30.5052 15.7351C30.5517 15.738 30.5856 15.7405 30.606 15.7422ZM12.25 8.00003C8.79822 8.00003 6 10.7983 6 14.25V35.75C6 39.2018 8.79822 42 12.25 42H33.75C37.2018 42 40 39.2018 40 35.75V33.5C40 32.8097 39.4404 32.25 38.75 32.25C38.0596 32.25 37.5 32.8097 37.5 33.5V35.75C37.5 37.8211 35.8211 39.5 33.75 39.5H12.25C10.1789 39.5 8.5 37.8211 8.5 35.75V14.25C8.5 12.179 10.1789 10.5 12.25 10.5H20.5C21.1904 10.5 21.75 9.94039 21.75 9.25003C21.75 8.55967 21.1904 8.00003 20.5 8.00003H12.25Z" fill="#212121"/>
+</svg>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/assets/body.html b/src/site/content/en/patterns/web-apps/shortcuts/assets/body.html
new file mode 100644
index 00000000000..3ca183f767a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/assets/body.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="manifest" href="manifest.json" />
+    <title>How to create app shortcuts</title>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('sw.js');
+        });
+      }
+    </script>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+    <h1>How to create app shortcuts</h1>
+    <ol>
+      <li>
+        You can drag these <a href="blue.html">blue page</a> or
+        <a href="red.html">red page</a> links to the bookmarks bar
+        and access them later.
+      </li>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button disabled type="button">Install</button>
+        </p>
+      </li>
+    </ol>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/assets/manifest.json b/src/site/content/en/patterns/web-apps/shortcuts/assets/manifest.json
new file mode 100644
index 00000000000..88195ab3b3a
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/assets/manifest.json
@@ -0,0 +1,29 @@
+{
+  "name": "How to create app shortcuts",
+  "short_name": "App shortcuts",
+  "start_url": "../demo.html",
+  "icons": [
+    {
+      "src": "../icons/favicon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Feel blue",
+      "short_name": "Blue",
+      "description": "Open a blue webpage",
+      "url": "../blue.html",
+      "icons": [{ "src": "../icons/blue.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Feel red",
+      "short_name": "Red",
+      "description": "Open a red webpage",
+      "url": "../red.html",
+      "icons": [{ "src": "../icons/red.png", "sizes": "192x192" }]
+    }
+  ],
+  "display": "standalone"
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/assets/script.js b/src/site/content/en/patterns/web-apps/shortcuts/assets/script.js
new file mode 100644
index 00000000000..e8c1be47a45
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/assets/script.js
@@ -0,0 +1,46 @@
+// The install button.
+const installButton = document.querySelector('button');
+
+// Only relevant for browsers that support installation.
+if ('BeforeInstallPromptEvent' in window) {
+  // Variable to stash the `BeforeInstallPromptEvent`.
+  let installEvent = null;
+
+  // Function that will be run when the app is installed.
+  const onInstall = () => {
+    // Disable the install button.
+    installButton.disabled = true;
+    // No longer needed.
+    installEvent = null;
+  };
+
+  window.addEventListener('beforeinstallprompt', (event) => {
+    // Do not show the install prompt quite yet.
+    event.preventDefault();
+    // Stash the `BeforeInstallPromptEvent` for later.
+    installEvent = event;
+    // Enable the install button.
+    installButton.disabled = false;
+  });
+
+  installButton.addEventListener('click', async () => {
+    // If there is no stashed `BeforeInstallPromptEvent`, return.
+    if (!installEvent) {
+      return;
+    }
+    // Use the stashed `BeforeInstallPromptEvent` to prompt the user.
+    installEvent.prompt();
+    const result = await installEvent.userChoice;
+    // If the user installs the app, run `onInstall()`.
+    if (result.outcome === 'accepted') {
+      onInstall();
+    }
+  });
+
+  // The user can decide to ignore the install button
+  // and just use the browser prompt directly. In this case
+  // likewise run `onInstall()`.
+  window.addEventListener('appinstalled', () => {
+    onInstall();
+  });
+}
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/blue.html b/src/site/content/en/patterns/web-apps/shortcuts/blue.html
new file mode 100644
index 00000000000..a0d8d7fb997
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/blue.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Blue page</title>
+  </head>
+  <body style="background-color: blue;"></body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/demo.njk b/src/site/content/en/patterns/web-apps/shortcuts/demo.njk
new file mode 100644
index 00000000000..0594fcfefe8
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/demo.njk
@@ -0,0 +1,92 @@
+---
+patternId: web-apps/shortcuts
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="manifest" href="assets/manifest.json" />
+    <title>How to create app shortcuts</title>
+    <style>
+      html {
+        font-family: system-ui, sans-serif;
+      }
+      own-window {
+        border: dashed red 2px;
+        padding: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>How to create app shortcuts</h1>
+
+    {# Script loader for sourced scripts, as they cannot be authorized by a CSP hash. #}
+    {% include 'partials/script-loader.njk' %}
+    {% set apiScripts %}
+      loadScript('https://unpkg.com/own-window@1.0.3/dist/index.min.js', null);
+    {% endset %}
+    <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    <own-window>
+      <div>This demo needs to run in its own window, not in an iframe.</div>
+      <button type="button">Open in new window</button>
+    </own-window>
+
+    <ol>
+      <li>
+        You can drag these <a href="blue.html">blue page</a> or
+        <a href="red.html">red page</a> links to the bookmarks bar
+        and access them later.
+      </li>
+      <li>
+        Install the app by clicking the button below. After the installation,
+        the button is disabled.
+        <p>
+          <button id="install" disabled>Install</button>
+        </p>
+      </li>
+    </ol>
+
+    {% set script %}
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('sw.js');
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+
+    {% set script %}
+      const installButton = document.querySelector('#install');
+      if ('BeforeInstallPromptEvent' in window) {
+        let installEvent = null;
+        const onInstall = () => {
+          installButton.disabled = true;
+          installEvent = null;
+        };
+        window.addEventListener('beforeinstallprompt', (event) => {
+          event.preventDefault();
+          installEvent = event;
+          installButton.disabled = false;
+        });
+        installButton.addEventListener('click', async () => {
+          if (!installEvent) {
+            return;
+          }
+          installEvent.prompt();
+          const result = await installEvent.userChoice;
+          if (result.outcome === 'accepted') {
+            onInstall();
+          }
+        });
+        window.addEventListener('appinstalled', (event) => {
+          onInstall();
+        });
+      }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+  </body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/icons/blue.png b/src/site/content/en/patterns/web-apps/shortcuts/icons/blue.png
new file mode 100644
index 00000000000..f09def3e0e1
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/shortcuts/icons/blue.png differ
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/icons/favicon.png b/src/site/content/en/patterns/web-apps/shortcuts/icons/favicon.png
new file mode 100644
index 00000000000..1fac22c2ee7
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/shortcuts/icons/favicon.png differ
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/icons/red.png b/src/site/content/en/patterns/web-apps/shortcuts/icons/red.png
new file mode 100644
index 00000000000..6c06c736a0a
Binary files /dev/null and b/src/site/content/en/patterns/web-apps/shortcuts/icons/red.png differ
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/index.md b/src/site/content/en/patterns/web-apps/shortcuts/index.md
new file mode 100644
index 00000000000..3a6025bee76
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/index.md
@@ -0,0 +1,83 @@
+---
+layout: pattern
+title: How to create app shortcuts
+date: 2022-10-10
+authors:
+  - beaufortfrancois
+description: |
+  Learn how to create app shortcuts.
+height: 800
+static:
+  - sw.js
+  - assets/manifest.json
+  - icons/favicon.png
+  - icons/blue.png
+  - icons/red.png
+  - blue.html
+  - red.html
+---
+
+App shortcuts help users quickly start common or recommended tasks within your web app. Easy access to those tasks from anywhere the app icon is displayed will enhance users' productivity as well as increase their engagement with the web app.
+
+## The modern way
+
+### Define app shortcuts in the web app manifest
+
+The app shortcuts menu is invoked by right-clicking the app icon in the taskbar (Windows) or dock (macOS) on the user's desktop, or by touch & holding the app's launcher icon on Android.
+
+<div class="switcher" >
+  <figure>
+    {% Img src="image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt="An opened app shortcuts menu on Android.", width="800", height="420" %}
+    <figcaption>App shortcuts menu opened on Android</figcaption>
+  </figure>
+
+  <figure>
+    {% Img src="image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt="An opened app shortcuts menu on Windows.", width="800", height="420" %}
+    <figcaption>App shortcuts menu opened on Windows</figcaption>
+  </figure>
+</div>
+
+The app shortcuts menu is shown only for [Progressive Web Apps](/progressive-web-apps/) that are installed. Check out [Installation](/learn/pwa/installation/) in our [Learn PWA](/learn/pwa/) module to learn about installability requirements.
+
+Each app shortcut expresses a user intent, each of which is associated with a URL within the scope of your web app. The URL is opened when a user activates the app shortcut.
+
+App shortcuts are optionally declared in the `shortcuts` array member of the [web app manifest](/learn/pwa/web-app-manifest/). Below is an example of a potential web app manifest.
+
+```json
+{
+  "name": "Player FM",
+  "start_url": "https://player.fm?utm_source=homescreen",
+  "shortcuts": [
+    {
+      "name": "Open Play Later",
+      "short_name": "Play Later",
+      "description": "View the list of podcasts you saved for later",
+      "url": "/play-later?utm_source=homescreen",
+      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "View Subscriptions",
+      "short_name": "Subscriptions",
+      "description": "View the list of podcasts you listen to",
+      "url": "/subscriptions?utm_source=homescreen",
+      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
+    }
+  ]
+}
+```
+
+{% BrowserCompat 'html.manifest.shortcuts' %}
+
+## The classic way
+
+### Let user drag links to the bookmark bar
+
+If the app is not installed yet, you can suggest the user to drag some links from your web page and release them in their browser bookmark bar. That way, they can quickly start common or recommended tasks within your web app.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/9KJ65kyrc7nxs04Ycc7R.mp4", controls=true, autoplay=true, loop=true, muted=true %}
+
+## Further reading
+
+- [Get things done quickly with app shortcuts](app-shortcuts/)
+
+## Demo
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/red.html b/src/site/content/en/patterns/web-apps/shortcuts/red.html
new file mode 100644
index 00000000000..6b5d6f13dd5
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/red.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Red page</title>
+  </head>
+  <body style="background-color: red;"></body>
+</html>
diff --git a/src/site/content/en/patterns/web-apps/shortcuts/sw.js b/src/site/content/en/patterns/web-apps/shortcuts/sw.js
new file mode 100644
index 00000000000..fd079dc633e
--- /dev/null
+++ b/src/site/content/en/patterns/web-apps/shortcuts/sw.js
@@ -0,0 +1,30 @@
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  self.clients.claim();
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await event.preloadResponse;
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      } catch {
+        return new Response('Offline');
+      }
+    })(),
+  );
+});
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/body.html
new file mode 100644
index 00000000000..ec63f8105f4
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/body.html
@@ -0,0 +1,33 @@
+<div id="carousel">
+  <div id="slide-container">
+    <div class="slide" data-slideIndex="0">
+      <div class="slide-banner">Tour the Empire State Building! <a href="">Buy tickets now.</a></div>
+      <img width="1200" height="600" src="./newyork.jpg">
+    </div>
+    <div class="slide" data-slideIndex="1">
+      <div class="slide-banner">Ride the Shinkansen! <a href="">Buy tickets now.</a></div>
+      <img width="1200" height="600" src="./tokyo.jpg">
+    </div>
+    <div class="slide" data-slideIndex="2">
+      <div class="slide-banner">Discover relaxation! <a href="">Buy tickets now.</a></div>
+      <img width="1200" height="600" src="./beach.jpg">
+    </div>
+    <div class="slide" data-slideIndex="3">
+      <div class="slide-banner">See penguins! <a href="">Buy tickets now.</a></div>
+      <img width="1200" height="600" src="./penguins.jpg">
+    </div>
+    <div class="slide" data-slideIndex="4">
+      <div class="slide-banner">Take a ride on the wheel! <a href="">Buy tickets now.</a></div>
+      <img width="1200" height="600" src="./wheel.jpg">
+    </div>
+  </div>
+  <div id="back-button" class="arrow back">←</div>
+  <div id="forward-button" class="arrow forward">→</div>
+  <div class="slide-indicators">
+    <div class="slide-indicator active"></div>
+    <div class="slide-indicator"></div>
+    <div class="slide-indicator"></div>
+    <div class="slide-indicator"></div>
+    <div class="slide-indicator"></div>
+  </div>
+</div>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/script.js
new file mode 100644
index 00000000000..e52b0156729
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/script.js
@@ -0,0 +1,65 @@
+function autoplayCarousel() {
+    const carouselEl = document.getElementById("carousel");
+    const slideContainerEl = carouselEl.querySelector("#slide-container");
+    const slideEl = carouselEl.querySelector(".slide");
+    let slideWidth = slideEl.offsetWidth;
+    // Add click handlers
+    document.querySelector("#back-button")
+        .addEventListener("click", () => navigate("backward"));
+    document.querySelector("#forward-button")
+        .addEventListener("click", () => navigate("forward"));
+    document.querySelectorAll(".slide-indicator")
+        .forEach((dot, index) => {
+            dot.addEventListener("click", () => navigate(index));
+            dot.addEventListener("mouseenter", () => clearInterval(autoplay));
+        });
+    // Add keyboard handlers
+    document.addEventListener('keydown', (e) => {
+        if (e.code === 'ArrowLeft') {
+            clearInterval(autoplay);
+            navigate("backward");
+        } else if (e.code === 'ArrowRight') {
+            clearInterval(autoplay);
+            navigate("forward");
+        }
+    });
+    // Add resize handler
+    window.addEventListener('resize', () => {
+        slideWidth = slideEl.offsetWidth;
+    });
+    // Autoplay
+    const autoplay = setInterval(() => navigate("forward"), 3000);
+    slideContainerEl.addEventListener("mouseenter", () => clearInterval(autoplay));
+    // Slide transition
+    const getNewScrollPosition = (arg) => {
+        const gap = 10;
+        const maxScrollLeft = slideContainerEl.scrollWidth - slideWidth;
+        if (arg === "forward") {
+            const x = slideContainerEl.scrollLeft + slideWidth + gap;
+            return x <= maxScrollLeft ? x : 0;
+        } else if (arg === "backward") {
+            const x = slideContainerEl.scrollLeft - slideWidth - gap;
+            return x >= 0 ? x : maxScrollLeft;
+        } else if (typeof arg === "number") {
+            const x = arg * (slideWidth + gap);
+            return x;
+        }
+    }
+    const navigate = (arg) => {
+        slideContainerEl.scrollLeft = getNewScrollPosition(arg);
+    }
+    // Slide indicators
+    const slideObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const slideIndex = entry.target.dataset.slideindex;
+                carouselEl.querySelector('.slide-indicator.active').classList.remove('active');
+                carouselEl.querySelectorAll('.slide-indicator')[slideIndex].classList.add('active');
+            }
+        });
+    }, { root: slideContainerEl, threshold: .1 });
+    document.querySelectorAll('.slide').forEach((slide) => {
+        slideObserver.observe(slide);
+    });
+}
+autoplayCarousel();
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/style.css
new file mode 100644
index 00000000000..ad3f60424db
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/assets/style.css
@@ -0,0 +1,86 @@
+#carousel {
+    max-width: 1200px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    position: relative;
+}  
+.slide-indicators {
+    display: flex;
+    justify-content: center;
+}
+.slide-indicator {
+    height: 44px;
+    width: 50px;
+    display: flex;
+    justify-items: center;
+    cursor: pointer;
+}
+.slide-indicator:after {
+    content: "";
+    background-color: #878787;
+    height: 10px;
+    margin-top: 10px;
+    width: 40px;
+}
+.slide-indicator.active:after,
+.slide-indicator:hover:after {
+    background-color: #000000;
+}
+.slide-banner {
+    background-color: #000000;
+    color: #ffffff;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+    padding: 15px;
+    font-size: 2.5vw;
+}
+.slide-banner a {
+    color: #ffffff;
+}
+#slide-container {
+    scroll-snap-type: x mandatory;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 10px;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+}
+.slide {
+    scroll-snap-align: center;
+    position: relative;
+    min-width: 100%;
+    padding-top: 50%;
+}
+.slide img {
+    height: 100%;
+    width: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.arrow {
+    color: #ffffff;
+    height: 20px;
+    width: 20px;
+    background-color: #000000;
+    position: absolute;
+    padding: 10px;
+    opacity: .3;
+    cursor: pointer;
+}
+.arrow.back {
+    left: 10px;
+    top: 10px;
+}
+.arrow.forward {
+    right: 10px;
+    top: 10px;
+}
+.arrow:hover {
+    opacity: 1;
+}
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/demo.njk
new file mode 100644
index 00000000000..13adffeb28a
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/demo.njk
@@ -0,0 +1,218 @@
+---
+patternId: web-vitals-patterns/carousels/carousel-autoplay
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Autoplay Carousel Demo</title>
+    <style>
+        body {
+            padding: 1em;
+            font-family: system-ui;
+            text-align: center;
+        }
+        #carousel {
+            max-width: 1200px;
+            display: flex;
+            flex-direction: column;
+            margin: 0 auto;
+            position: relative;
+        }
+        .slide-indicators {
+            display: flex;
+            justify-content: center;
+        }
+        .slide-indicator {
+            height: 44px;
+            width: 50px;
+            display: flex;
+            justify-items: center;
+            cursor: pointer;
+        }
+        .slide-indicator:after {
+            content: "";
+            background-color: #878787;
+            height: 10px;
+            margin-top: 10px;
+            width: 40px;
+        }
+        .slide-indicator.active:after,
+        .slide-indicator:hover:after {
+            background-color: #000000;
+        }
+        .slide-banner {
+            background-color: #000000;
+            color: #ffffff;
+            position: absolute;
+            left: 0;
+            bottom: 20px;
+            padding: 15px;
+            font-size: 2.5vw;
+        }
+        .slide-banner a {
+            color: #ffffff;
+        }
+        #slide-container {
+            scroll-snap-type: x mandatory;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            gap: 10px;
+            -webkit-overflow-scrolling: touch;
+            scroll-behavior: smooth;
+        }
+        .slide {
+            scroll-snap-align: center;
+            position: relative;
+            min-width: 100%;
+            padding-top: 50%;
+        }
+        .slide img {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .arrow {
+            color: #ffffff;
+            height: 20px;
+            width: 20px;
+            background-color: #000000;
+            position: absolute;
+            padding: 10px;
+            opacity: .3;
+            cursor: pointer;
+        }
+        .arrow.back {
+            left: 10px;
+            top: 10px;
+        }
+        .arrow.forward {
+            right: 10px;
+            top: 10px;
+        }
+        .arrow:hover {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <h1>Autoplay carousel</h1>
+    <div id="carousel">
+        <div id="slide-container">
+            <div class="slide" data-slideIndex="0">
+                <div class="slide-banner">Tour the Empire State Building! <a href="">Buy tickets now.</a></div>
+                <img width="1200" height="600" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/d5JiF2JjxniJRH6xviYA.jpg">
+            </div>
+            <div class="slide" data-slideIndex="1">
+                <div class="slide-banner">Ride the Shinkansen! <a href="">Buy tickets now.</a></div>
+                <img width="1200" height="600" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/atRogpxlJTXAvhWe654i.jpg">
+            </div>
+            <div class="slide" data-slideIndex="2">
+                <div class="slide-banner">Discover relaxation! <a href="">Buy tickets now.</a></div>
+                <img width="1200" height="600" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/q8svpF1B6dG5wNuiTgyV.jpg">
+            </div>
+            <div class="slide" data-slideIndex="3">
+                <div class="slide-banner">See penguins! <a href="">Buy tickets now.</a></div>
+                <img width="1200" height="600" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/oweFaoCZ4g8bieZdvG5L.jpg">
+            </div>
+            <div class="slide" data-slideIndex="4">
+                <div class="slide-banner">Take a ride on the wheel! <a href="">Buy tickets now.</a></div>
+                <img width="1200" height="600" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/G0aWgHwWJTPZus9YEMyH.jpg">
+            </div>
+        </div>
+        <div id="back-button" class="arrow back">←</div>
+        <div id="forward-button" class="arrow forward">→</div>
+        <div class="slide-indicators">
+            <div class="slide-indicator active"></div>
+            <div class="slide-indicator"></div>
+            <div class="slide-indicator"></div>
+            <div class="slide-indicator"></div>
+            <div class="slide-indicator"></div>
+        </div>
+    </div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+        iaculis eu non diam phasellus.
+    </p>
+    {% set script %}
+        function autoplayCarousel(){
+            const carouselEl = document.getElementById("carousel");
+            const slideContainerEl = carouselEl.querySelector("#slide-container");
+            const slideEl = carouselEl.querySelector(".slide");
+            let slideWidth = slideEl.offsetWidth;
+            // Add click handlers
+            document.querySelector("#back-button")
+                .addEventListener("click", () => navigate("backward"));
+            document.querySelector("#forward-button")
+                .addEventListener("click", () => navigate("forward"));
+            document.querySelectorAll(".slide-indicator")
+                .forEach((dot, index) => {
+                    dot.addEventListener("click", () => navigate(index));
+                    dot.addEventListener("mouseenter", () => clearInterval(autoplay));
+                });
+            // Add keyboard handlers
+            document.addEventListener('keydown', (e) => {
+                if (e.code === 'ArrowLeft') {
+                    clearInterval(autoplay);
+                    navigate("backward");
+                } else if (e.code === 'ArrowRight') {
+                    clearInterval(autoplay);
+                    navigate("forward");
+                }
+            });
+            // Add resize handler
+            window.addEventListener('resize', () => {
+                slideWidth = slideEl.offsetWidth;
+            });
+            // Autoplay
+            const autoplay = setInterval(() => navigate("forward"), 3000);
+            slideContainerEl.addEventListener("mouseenter", () => clearInterval(autoplay));
+            // Slide transition
+            const getNewScrollPosition = (arg) => {
+                const gap = 10;
+                const maxScrollLeft = slideContainerEl.scrollWidth - slideWidth;
+                if (arg === "forward") {
+                    const x = slideContainerEl.scrollLeft + slideWidth + gap;
+                    return x <= maxScrollLeft ? x : 0;
+                } else if (arg === "backward") {
+                    const x = slideContainerEl.scrollLeft - slideWidth - gap;
+                    return x >= 0 ? x : maxScrollLeft;
+                } else if (typeof arg === "number") {
+                    const x = arg * (slideWidth + gap);
+                    return x;
+                }
+            }
+            const navigate = (arg) => {
+                slideContainerEl.scrollLeft = getNewScrollPosition(arg);
+            }
+            // Slide indicators
+            const slideObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const slideIndex = entry.target.dataset.slideindex;
+                        carouselEl.querySelector('.slide-indicator.active').classList.remove('active');
+                        carouselEl.querySelectorAll('.slide-indicator')[slideIndex].classList.add('active');
+                    }
+                });
+            }, { root: slideContainerEl, threshold: .1 });
+            document.querySelectorAll('.slide').forEach((slide) => {
+                slideObserver.observe(slide);
+            });
+        }
+        autoplayCarousel();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/index.md b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/index.md
new file mode 100644
index 00000000000..2af2f04016a
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/carousel-autoplay/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern
+title: Autoplay carousel
+description: This carousel uses CSS scroll snap to create
+  smooth, performant slide transitions that do not cause layout
+  shifts.
+date: 2021-08-17
+height: 600
+---
+
+This carousel uses [CSS scroll snap](/css-scroll-snap/) to create
+smooth, performant slide transitions that do not cause [layout
+shifts](/debugging-layout-shifts/).
+
+This carousel can be navigated in a variety of ways: in addition to navigation
+controls, it supports keyboard navigation and swiping. To maximize usability and
+readability, the carousel stops auto-transitioning once the user mouseovers
+within the carousel area.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/carousels/index.md b/src/site/content/en/patterns/web-vitals-patterns/carousels/index.md
new file mode 100644
index 00000000000..4b0e8900316
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/carousels/index.md
@@ -0,0 +1,18 @@
+---
+layout: pattern-set
+title: Carousels
+description: Performant carousels
+date: 2021-08-10
+---
+
+A carousel is a UX component that displays content in a slideshow-like manner.
+Large, above-the-fold carousels often contain a page's [Largest Contentful Paint
+(LCP) element](/lcp/#what-elements-are-considered), and therefore
+can have a significant impact on [LCP](/lcp). In addition, a
+surprising number of carousels use [non-composited
+animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/) that can contribute to
+[Cumulative Layout Shift (CLS)](/cls). On pages with autoplaying
+carousels, this has the potential to cause infinite layout shifts.
+
+To learn about performance and UX best practices for carousels, see
+[Carousel Best Practices](/carousel-best-practices/).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/assets/body.html
new file mode 100644
index 00000000000..f7385dc0024
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/assets/body.html
@@ -0,0 +1,17 @@
+<head>
+    <style>
+        @font-face {
+            font-family: 'Google Sans';
+            src: url("GoogleSans-Regular.woff2") format('woff2');
+            font-display: swap;
+        }
+        body {
+            font-family: system-ui;
+            font-size: 1em;
+        }
+        h1 {
+            font-family: 'Google Sans', sans-serif;
+            font-size: 3em;
+        }
+    </style>
+</head>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/demo.md b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/demo.md
new file mode 100644
index 00000000000..a7de20b05c4
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/demo.md
@@ -0,0 +1,42 @@
+---
+patternId: web-vitals-patterns/fonts/fonts-self-hosted
+---
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Self-hosted fonts demo</title>
+    <style>
+        @font-face {
+            font-family: 'Google Sans';
+            src: url("/fonts/google-sans/regular/latin.woff2") format('woff2');
+            font-display: swap;
+        }
+        body {
+            padding: 1em 3em;
+            font-family: system-ui;
+            font-size: 1em;
+            line-height: 1.5;
+        }
+        h1 {
+            font-family: 'Google Sans', sans-serif;
+            font-size: 3em;
+        }
+    </style>
+</head>
+<body>
+    <h1>Self-hosted Fonts</h1>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/index.md b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/index.md
new file mode 100644
index 00000000000..522c0550439
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/font-self-hosted/index.md
@@ -0,0 +1,53 @@
+---
+layout: pattern
+title: Self-hosted fonts
+description:
+  This demo combines two performance techniques to deliver
+  a self-hosted font as quickly as possible&#58; use of inline font declarations
+  and use of the WOFF2 font format.
+date: 2021-08-19
+updated: 2021-08-19
+height: 400
+---
+
+Self-hosted fonts are font files that are served from your own servers - rather
+than those of a third-party font provider (for example, Google Fonts).
+
+It is incredibly important to deliver fonts quickly: faster font delivery not
+only means that text will be visible to the user sooner - but it also has a
+large impact on whether a font causes layout shifts. If a font cannot be
+delivered before it is needed, there will typically be a layout shift when the
+font is swapped. The size of this layout shift can vary depending on how closely
+the fallback font matches the web font. To see this phenomena in action, view
+the demo and compare the layout shifts that occur on a fast connection versus a
+slow connection.
+
+The example below combines two performance techniques to deliver a self-hosted
+font as quickly as possible: use of inline font declarations and use of the
+WOFF2 font format.
+
+* **Inline font declarations**: Inlining `@font-face` and `font-family`
+  declarations in the main document, rather than including this information in
+  an external stylesheet, allows the browser to determine which font files will
+  be used on the page without having to wait for a separate stylesheet file to
+  download. This is important because generally browsers will not download font
+  files until they know that they are used on the page. In most situations,
+  inline font declarations are [preferable to using `preload` to load
+  fonts](/font-best-practices/#avoid-using-preload-to-load-fonts).
+
+* **WOFF2**: Of the modern font fonts, [WOFF2](https://caniuse.com/woff2) is the
+  newest, has the widest browser support, and offers the best compression.
+  Because it uses Brotli, WOFF2 compresses 30% better than WOFF.
+
+To further improve performance, consider using [font
+subsetting](/reduce-webfont-size/#unicode-range-subsetting). Font
+subsetting is the practice of breaking a font file into smaller subsets -
+typically with the goal of removing unused glyphs. This can significantly reduce
+the filesize of a font. Tools for creating font subsets include
+[fontkit](https://github.com/foliojs/fontkit),
+[subfont](https://github.com/Munter/subfont), and
+[glyphhanger](https://github.com/zachleat/glyphhanger).
+
+For more information on best practices for self-hosted fonts, see [Using
+self-hosted
+fonts](/font-best-practices/#using-self-hosted-fonts).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/assets/body.html
new file mode 100644
index 00000000000..de1e17ebd31
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/assets/body.html
@@ -0,0 +1,15 @@
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: system-ui;
+            font-size: 1em;
+        }
+        h1 {
+            font-family: 'Zen Tokyo Zoo', sans-serif;
+            font-size: 3em;
+        }
+    </style>
+</head>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/demo.md b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/demo.md
new file mode 100644
index 00000000000..a72ef8f068a
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/demo.md
@@ -0,0 +1,39 @@
+---
+patternId: web-vitals-patterns/fonts/fonts-third-party
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Third-party fonts demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
+    <style>
+        body {
+            padding: 1em 3em;
+            font-family: system-ui;
+            font-size: 1em;
+            line-height: 1.5;
+        }
+        h1 {
+            font-family: 'Zen Tokyo Zoo', sans-serif;
+            font-size: 3em;
+        }
+    </style>
+</head>
+<body>
+    <h1>Third-party Fonts</h1>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/index.md b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/index.md
new file mode 100644
index 00000000000..16851494f74
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/fonts-third-party/index.md
@@ -0,0 +1,42 @@
+---
+layout: pattern
+title: Third-party fonts
+description:
+  The demo combines two performance techniques to load a
+  third-party font as quickly as possible&#58; use of inline font declarations
+  and use of preconnect resource hints.
+date: 2021-08-19
+updated: 2021-08-19
+height: 400
+---
+
+It is incredibly important to deliver fonts quickly: faster font delivery not
+only means that text will be visible to the user sooner - but it also has a
+large impact on whether a font causes layout shifts. If a font cannot be
+delivered before it is needed, there will typically be a layout shift when the
+font is swapped. The size of this layout shift can vary depending on how closely
+the fallback font matches the web font. To see this phenomena in action, view
+the demo and compare the layout shifts that occur on a fast connection versus a
+slow connection.
+
+The example below combines two performance techniques to load a third-party font
+as quickly as possible: use of inline font declarations and use of `preconnect`
+resource hints. Although this code snippet demonstrates how
+to load fonts from [Google Fonts](https://fonts.google.com/), these techniques
+also apply to other third-party font providers.
+
+* **Inline font declarations**: Inlining `font-family`
+  declarations in the main document, rather than including this information in
+  an external stylesheet, allows the browser to determine which font files will
+  be used on the page without having to wait for a separate stylesheet file to
+  download. This is important because generally browsers will not download font
+  files until they know that they are used on the page. In most situations,
+  inline font declarations are [preferable to using `preload` to load
+  fonts](/font-best-practices/#avoid-using-preload-to-load-fonts).
+
+* **Preconnect**: The recommended way to load Google Fonts is to use the
+  `<link>` tag in conjunction with `preconnect` resource hints. The `preconnect`
+  resource hint establishes an early connection with the third-party origin. In
+  the code snippet below, the first resource hint sets up a connection for
+  downloading the font stylesheet; the second resource hint sets up a connection
+  for downloading font files.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/fonts/index.md b/src/site/content/en/patterns/web-vitals-patterns/fonts/index.md
new file mode 100644
index 00000000000..0e9c40c3f3c
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/fonts/index.md
@@ -0,0 +1,17 @@
+---
+layout: pattern-set
+title: Fonts
+description: Load fonts quickly
+date: 2021-08-17
+---
+
+If a web font has not been loaded, browsers typically delay rendering any text
+that uses the web font. In many situations, this delays [First Contentful Paint
+(FCP)](/fcp). In some situations, this delays [Largest Contentful
+Paint (LCP)](/lcp).
+
+In addition, fonts can cause [layout
+shifts](/debug-layout-shifts). These layout shifts occur when a
+web font and its fallback font take up different amounts of space on the page.
+
+For more information, see [Best practices for fonts](/font-best-practices/).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/assets/body.html
new file mode 100644
index 00000000000..afe56115c32
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/assets/body.html
@@ -0,0 +1 @@
+<img width="267" height="400" src="dog.jpg">
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/demo.md b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/demo.md
new file mode 100644
index 00000000000..07940bab16b
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/demo.md
@@ -0,0 +1,40 @@
+---
+patternId: web-vitals-patterns/images/img-tag
+---
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>&lt;img&gt; tag demo</title>
+    <style>
+        body {
+            padding: 1em;
+            font-family: system-ui;
+            display: grid;
+            justify-items: center;
+            text-align: center;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>&lt;img&gt; tag</h1>
+        <img src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/1vlvQuXxUuQbpfr1owP8.jpeg" width="400" height="267" alt="Photo of dog on pink background">
+    </div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/index.md b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/index.md
new file mode 100644
index 00000000000..af4086ad8e6
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/img-tag/index.md
@@ -0,0 +1,28 @@
+---
+layout: pattern
+title: <img> tag
+description: This image loads without causing layout shifts.
+date: 2021-08-17
+updated: 2021-08-17
+height: 400
+---
+
+Setting the `width` and `height` attributes on `<img>` tags helps prevent
+[layout shifts](/debug-layout-shifts/). This information
+allows the browser to reserve the correct amount of space for the image.
+
+* **Set the `width` and `height` attributes:** The values of these attributes should
+  be set to match the dimensions of the image itself (that is, its [intrinsic
+  size](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)) -
+  rather than dimensions that the image will be displayed at.
+
+* **Adjust image styling as needed:** Depending on the image's existing styling,
+  adding `width` and `height` attributes may cause the image to render
+  differently. In many cases, this can be fixed by adding `height: auto` or
+  `width: auto` to the existing styling.
+
+| Previous CSS styling | Change to |
+|------------------------|-----|
+| img { width: 100%; } | img { width: 100%; height: auto; }|
+| img { max-width: 100%; } | img { max-width: 100% height: auto; }|
+| img { height: 100%; } | img { height: 100%; width: auto }|
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/index.md b/src/site/content/en/patterns/web-vitals-patterns/images/index.md
new file mode 100644
index 00000000000..4ead7431b77
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/index.md
@@ -0,0 +1,12 @@
+---
+layout: pattern-set
+title: Images
+description: Display images without causing layout shifts
+date: 2021-08-17
+---
+
+Images can cause layout shifts if they load after the surrounding page has
+already been rendered. This issue is more prominent in situations where images
+are slow to load - for example, on a slow connection or when loading an image
+with a particularly large file size.
+
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/assets/body.html
new file mode 100644
index 00000000000..12a6619844e
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/assets/body.html
@@ -0,0 +1,16 @@
+<!-- Using density descriptors -->
+<img width="480" height="330"
+    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
+    src="cat-1x.jpg"
+    alt="Photo of a cat on a green background">
+<!-- Using width descriptors -->    
+<img width="256" height="128"
+    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
+    src="dog-256w.jpg"
+    alt="Photo of a dog on a orange background">
+<!-- Picture tag -->
+<picture>
+    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
+    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
+    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
+</picture>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/demo.md b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/demo.md
new file mode 100644
index 00000000000..55bfb5f8a50
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/demo.md
@@ -0,0 +1,70 @@
+---
+patternId: web-vitals-patterns/images/responsive-img-density
+---
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Responsive images</title>
+    <style>
+        body {
+            padding: 1em;
+            margin: 0;
+            font-family: system-ui;
+            display: grid;
+            justify-items: center;
+            text-align: center;
+        }
+        img {
+            display: block;
+            margin: 0 auto;
+            max-width: 100%;
+            height: auto;
+        }
+        p {
+            padding: .5em;
+        }
+        .container {
+            margin: 1em 0;
+            width: 100%;
+        }
+        .width-descriptor {
+            max-width: 1028px;
+            width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>Responsive Images</h1>
+    <div class="container">
+        <h3>Using density descriptors</h3>
+        <img width="480" height="330" srcset="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/nPq8KhTDpmxkuTORmcAg.jpg, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/fAKE40F3Jg7N5yE1Tb6T.jpg 2x, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/8bA5SpW58D7kYbyPij6r.jpg 3x" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/nPq8KhTDpmxkuTORmcAg.jpg" alt="Photo of a cat on a green background">
+    </div>
+    <div class="container">
+        <h3>Using width descriptors</h3>
+        <img class="width-descriptor" width="256" height="128" srcset="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/zYodlaB3bPU4CYslLbbh.jpg 256w, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/KMFxcZmusA753IpnFZl4.jpg 512w, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/6Gc1wnPIE6GbDqhBAi8V.jpg 1028w" src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/zYodlaB3bPU4CYslLbbh.jpg" alt="Photo of a dog on an orange background">
+    </div>
+    <div class="container">
+        <h3>Picture tag</h3>
+        <p>This image changes depending on the width of the browser window.</p>
+        <picture>
+            <source media="(max-width: 720px)" width="600" height="300" srcset="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/aaYUJUNf32kelZk6mqYY.jpg"/>
+            <source media="(min-width: 721px)" width="600" height="600" srcset="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/VP7HTRswZiePrzMBFVYb.jpg 1x, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/emPmNvJu1i3pypP7uLUw.jpg 2x, https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/ZPIGDeKINDI4mi4Pcf0m.jpg 3x"/>
+            <img src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/aaYUJUNf32kelZk6mqYY.jpg" width="600" height="300" alt="Photo of the Empire State Building">
+        </picture>
+    </div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/index.md b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/index.md
new file mode 100644
index 00000000000..c5c8e1f45df
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/images/responsive-images/index.md
@@ -0,0 +1,53 @@
+---
+layout: pattern
+title: Responsive images and art direction
+description: These responsive images load without causing layout shifts.
+date: 2021-08-17
+updated: 2021-08-17
+height: 400
+---
+
+[Responsive
+images](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+are often implemented using the
+[`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset)
+attribute. The `srcset` attribute is a comma-separated list of image filenames
+and their
+[width](https://html.spec.whatwg.org/multipage/images.html#width-descriptor) or
+density descriptors. To prevent layout shifts, set the `width` and `height`
+attributes on `<img>` and `<source>` tags that use `srcset`.
+
+
+
+**For responsive images that use density descriptors:**
+
+* All images listed in `src` and `srcset` should have the same [aspect
+  ratio](https://en.wikipedia.org/wiki/Aspect_ratio_(image)).
+* Set the `width` and `height` attributes to match the dimensions of the `1x`
+  image.
+* The `src` attribute should refer to the `1x` image.
+
+**For responsive images that use width descriptors:**
+* All images listed in `src` and `srcset` should have the same aspect ratio.
+* Set the `width` and `height` attributes to match the dimensions of the
+  fallback image.
+* **Adjust image styling as needed:** In the absence of any CSS styling, setting
+  `width` and `height` on a responsive image that uses width descriptors will
+  cause the image to always render at the same size - even if the images listed
+  in `srcset` have varying dimensions. This behavior may not be what you want.
+  Adding `width: 100%; height: auto;` or `width: 100vw; height: auto;` to your
+  image styling may give you the visual appearance you want.
+
+**For &lt;picture&gt; tags:**
+
+* **Set the `width` and `height` attributes for all `<source>` tags:** The
+  appropriate values for `width` and `height` will depend on how the `<source>`
+  tag uses `srcset`. (See above for information on working with `srcset`.)
+* **Adjust image styling:** If you need to adjust image styling, keep in mind
+  that adding styling to a `<source>` tag will have no effect - a `<source>` tag
+  is an [empty
+  element](https://developer.mozilla.org/docs/Web/HTML/Element/source).
+  Instead, you will need to style the corresponding `<img>` tag.
+* **Set the `width` and `height` attributes on the `<img>` tag:** These values
+  should match the intrinsic size of the fallback image.
+  
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/index.md b/src/site/content/en/patterns/web-vitals-patterns/index.md
new file mode 100644
index 00000000000..8e46cce715b
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/index.md
@@ -0,0 +1,9 @@
+---
+layout: pattern-set
+title: Web Vitals patterns
+description: A collection of common UX patterns optimized for Core Web Vitals.
+  This collection includes patterns that are often tricky to implement without
+  hurting your Core Web Vitals scores. You can use the code in these examples to
+  help ensure your projects stay on the right track.
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/NcqmhRbQCFP5twoNcOHg.svg
+---
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/index.md b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/index.md
new file mode 100644
index 00000000000..42827b22931
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/index.md
@@ -0,0 +1,12 @@
+---
+layout: pattern-set
+title: Infinite scroll
+description: Avoid layout shifts when using infinite scroll
+date: 2021-08-20
+updated: 2021-08-20
+height: 500
+---
+
+Infinite scroll is a UX pattern where content is continuously added to the page
+as a user scrolls. Some implementations of infinite scroll can be a source of
+[layout shifts](/debugging-layout-shifts/).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/body.html
new file mode 100644
index 00000000000..cae5031f51a
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/body.html
@@ -0,0 +1,12 @@
+<div id="infinite-scroll-container">
+    <div id="sentinel"></div>
+    <div class="item">A</div>
+    <div class="item">B</div>
+    <div class="item">C</div>
+    <div class="item">D</div>
+    <div class="item">E</div>
+    <button id="infinite-scroll-button" disabled>
+        <span class="disabled-text">Loading more items...</span>
+        <span class="active-text">Show more</span>
+    </button>
+</div>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/script.js
new file mode 100644
index 00000000000..9037d227c9e
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/script.js
@@ -0,0 +1,59 @@
+function infiniteScroll() {
+    let responseBuffer = [];
+    let hasMore;
+    let requestPending = false;
+    const loadingButtonEl = document.querySelector('#infinite-scroll-button');
+    const containerEl = document.querySelector('#infinite-scroll-container');
+    const sentinelEl = document.querySelector("#sentinel");
+    const insertNewItems = () => {
+        while (responseBuffer.length > 0) {
+            const data = responseBuffer.shift();
+            const el = document.createElement("div");
+            el.textContent = data;
+            el.classList.add("item");
+            el.classList.add("new");
+            containerEl.insertBefore(el, loadingButtonEl);
+            console.log(`inserted: ${data}`);
+        }
+        sentinelObserver.observe(sentinelEl);
+        if (hasMore === false) {
+            loadingButtonEl.style = "display: none";
+            sentinelObserver.unobserve(sentinelEl);
+            listObserver.unobserve(loadingButtonEl);
+        }
+        loadingButtonEl.disabled = true
+    }
+    loadingButtonEl.addEventListener("click", insertNewItems);
+    const requestHandler = () => {
+        if (requestPending) return;
+        console.log("making request");
+        requestPending = true;
+        fakeServer.fakeRequest().then((response) => {
+            console.log("server response", response);
+            requestPending = false;
+            responseBuffer = responseBuffer.concat(response.items);
+            hasMore = response.hasMore;
+            loadingButtonEl.disabled = false;;
+        });
+    }
+    const sentinelObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.intersectionRatio > 0) {
+                observer.unobserve(sentinelEl);
+                requestHandler();
+            }
+        });
+    });
+    const listObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.intersectionRatio > 0 && entry.intersectionRatio < 1) {
+                insertNewItems();
+            }
+        });
+    }, {
+        rootMargin: "0px 0px 200px 0px"
+    });
+    sentinelObserver.observe(sentinelEl);
+    listObserver.observe(loadingButtonEl);
+}
+infiniteScroll();
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/style.css
new file mode 100644
index 00000000000..38a667d8c1a
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/assets/style.css
@@ -0,0 +1,48 @@
+:root {
+    --active-button-primary: #0080ff;
+    --active-button-font:#ffffff;
+    --disabled-button-primary: #f5f5f5;
+    --disabled-button-secondary: #c4c4c4;
+    --disabled-button-font: #000000;
+}
+#infinite-scroll-container {
+    position: relative;
+}
+#sentinel {
+    position: absolute;
+    bottom: 150vh;
+}
+#infinite-scroll-button {
+    cursor: pointer;
+    border: none;
+    padding: 1em;
+    width: 100%;
+    font-size: 1em;
+}
+#infinite-scroll-button:enabled {
+    color: var(--active-button-font);
+    background-color: var(--active-button-primary)
+}
+#infinite-scroll-button:disabled {
+    color: var(--disabled-button-font);
+    background-color: var(--disabled-button-primary);
+    cursor: not-allowed;
+    animation: 3s ease-in-out infinite loadingAnimation;
+}
+#infinite-scroll-button:enabled .disabled-text {
+    display: none;
+}
+#infinite-scroll-button:disabled .active-text {
+    display: none;
+}
+@keyframes loadingAnimation {
+    0% {
+        background-color: var(--disabled-button-primary);
+    }
+    50% {
+        background-color: var(--disabled-button-secondary);
+    }
+    100% {
+        background-color: var(--disabled-button-primary);
+    }
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/demo.njk
new file mode 100644
index 00000000000..77727067612
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/demo.njk
@@ -0,0 +1,220 @@
+---
+patternId: web-vitals-patterns/infinite-scroll/infinite-scroll
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Infinite Scroll Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        :root {
+            --active-button-primary: #0080ff;
+            --active-button-font:#ffffff;
+            --disabled-button-primary: #f5f5f5;
+            --disabled-button-secondary: #c4c4c4;
+            --disabled-button-font: #000000;
+        }
+        /* --- Demo Setup ------------------------------------------------*/
+        body {
+            margin: 0;
+            font-family: system-ui;
+            text-align: center;
+            scroll-behavior: auto;
+            overscroll-behavior-y: none;
+        }
+        .item {
+            width: 100%;
+            aspect-ratio: 1 / 1;
+            font-size: 5em;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid black;
+        }
+        .button-wrapper {
+            padding: 0 40px 40px 40px;
+        }
+        .footer {
+            padding: 1em;
+        }
+        select {
+            margin: 20px;
+        }
+        /* --- Infinite Scroll ---------------------------------------------*/
+        #infinite-scroll-container {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            max-width: 500px;
+            gap: 20px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #sentinel {
+            position: absolute;
+            bottom: 150vh;
+        }
+        #infinite-scroll-button {
+            cursor: pointer;
+            border: none;
+            padding: 1em;
+            width: 100%;
+            font-size: 1em;
+        }
+        #infinite-scroll-button:enabled {
+            color: var(--active-button-font);
+            background-color: var(--active-button-primary)
+        }
+        #infinite-scroll-button:disabled {
+            color: var(--disabled-button-font);
+            background-color: var(--disabled-button-primary);
+            cursor: not-allowed;
+            animation: 3s ease-in-out infinite loadingAnimation;
+        }
+        #infinite-scroll-button:enabled .disabled-text {
+            display: none;
+        }
+        #infinite-scroll-button:disabled .active-text {
+            display: none;
+        }
+        @keyframes loadingAnimation {
+            0% {
+                background-color: var(--disabled-button-primary);
+            }
+            50% {
+                background-color: var(--disabled-button-secondary);
+            }
+            100% {
+                background-color: var(--disabled-button-primary);
+            }
+        }
+</style>
+</head>
+<body>
+    <h1>Infinite Scroll</h1>
+    <p>Server response delay:</p>
+    <select name="delay-select" id="delay-select">
+        <option value="0">0ms</option>
+        <option value="50">50ms</option>
+        <option value="500">500ms</option>
+        <option value="1000">1000ms</option>
+        <option value="2000">2000ms</option>
+        <option value="5000">5000ms</option>
+    </select>
+    <div id="infinite-scroll-container">
+        <div id="sentinel"></div>
+        <div class="item">A</div>
+        <div class="item">B</div>
+        <div class="item">C</div>
+        <div class="item">D</div>
+        <div class="item">E</div>
+        <button id="infinite-scroll-button" disabled>
+            <span class="disabled-text">Loading more items...</span>
+            <span class="active-text">Show more</span>
+        </button>
+        <div class="footer">Privacy Policy | About Us | Corporate | Like & Subscribe</div>
+    </div>
+    {% set script %}
+        function infiniteScroll() {
+            //------- Demo setup code -------------------------------------------------------
+            const setupDemo = (() => {
+                const selectEl = document.getElementById("delay-select");
+                // Initialize select value
+                const delay = new URL(window.location.href).searchParams.get("delay") || 50;
+                selectEl.value = delay;
+                // Add select handler
+                selectEl.addEventListener('change', (e) => {
+                    const delay = e.target.value;
+                    let url = new URL(window.location.href);
+                    url.searchParams.set("delay", delay);
+                    window.location.href = url;
+                });
+                // When page is refreshed, scroll to top
+                window.onbeforeunload = () => {
+                    window.scrollTo(0, 0);
+                };
+            })();
+            const fakeServer = (() => {
+                const remainingItems = [...Array(50).keys()].map((i) => {
+                    const randomHexCode = Math.floor(Math.random()*16777215).toString(16);
+                    return {value: i, color: `#${randomHexCode}`}
+                })
+                const serverDelay = parseInt(document.getElementById("delay-select").value);
+                return {
+                    fakeRequest: async () => {
+                        return new Promise((resolve) => {
+                            const items = remainingItems.splice(0, 3);
+                            const response = {
+                                items: items,
+                                hasMore: remainingItems.length > 0
+                            }
+                            setTimeout(() => resolve(response), serverDelay);
+                        });
+                    }
+                }
+            })();
+            //------- Infinite scroll -------------------------------------------------------
+            let responseBuffer = [];
+            let hasMore;
+            let requestPending = false;
+            const loadingButtonEl = document.querySelector('#infinite-scroll-button');
+            const containerEl = document.querySelector('#infinite-scroll-container');
+            const sentinelEl = document.querySelector("#sentinel");
+            const insertNewItems = () => {
+                while (responseBuffer.length > 0) {
+                    const data = responseBuffer.shift();
+                    const el = document.createElement("div");
+                    el.textContent = data.value;
+                    el.style.backgroundColor = data.color;
+                    el.classList.add("item");
+                    containerEl.insertBefore(el, loadingButtonEl);
+                    console.log(`inserted: ${data}`);
+                }
+                sentinelObserver.observe(sentinelEl);
+                if (hasMore === false) {
+                    loadingButtonEl.style = "display: none";
+                    sentinelObserver.unobserve(sentinelEl);
+                    listObserver.unobserve(loadingButtonEl);
+                }
+                loadingButtonEl.disabled = true
+            }
+            loadingButtonEl.addEventListener("click", insertNewItems);
+            const requestHandler = () => {
+                if (requestPending) return;
+                console.log("making request");
+                requestPending = true;
+                fakeServer.fakeRequest().then((response) => {
+                    console.log("server response", response);
+                    requestPending = false;
+                    responseBuffer = responseBuffer.concat(response.items);
+                    hasMore = response.hasMore;
+                    loadingButtonEl.disabled = false;;
+                });
+            }
+            const sentinelObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.intersectionRatio > 0) {
+                        observer.unobserve(sentinelEl);
+                        requestHandler();
+                    }
+                });
+            });
+            const listObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.intersectionRatio > 0 && entry.intersectionRatio < 1) {
+                        insertNewItems();
+                    }
+                });
+            }, {
+                rootMargin: "0px 0px 200px 0px"
+            });
+            sentinelObserver.observe(sentinelEl);
+            listObserver.observe(loadingButtonEl);
+        }
+        infiniteScroll();
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+</body>
+</html>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/index.md b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/index.md
new file mode 100644
index 00000000000..b40bd4592bc
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/index.md
@@ -0,0 +1,50 @@
+---
+layout: pattern
+title: Infinite scroll
+description: In this implementation of infinite scroll there
+  are never any layout shifts - regardless of how long it takes the server to
+  respond with new content.
+date: 2021-08-18
+updated: 2021-08-18
+height: 500
+---
+
+This infinite scroll implementation is designed to ensure that there are never any
+layout shifts - regardless of how long it takes the server to respond with new content.
+
+One of the most common issues with many infinite scroll implementations is that
+the page footer (or similar UX element) gets pushed further down the page
+whenever new items are added. With this infinite scroll implementation, this
+never occurs.
+
+**High-level approach**
+
+Whenever possible, new items are inserted into the page before the user reaches
+them. Because this insertion happens offscreen (and is not visible to the user),
+the user experiences no layout shifts.
+
+In the event that new content cannot be inserted in time, a "Show More" button
+is displayed instead. However, the button is enabled only when new items are
+ready to be displayed - this ensures that the user does not click the button
+only to find that nothing happens. Thus, regardless of how slowly the server
+responds with new content (or how quickly the user scrolls), there will never be
+any unexpected layout shifts.
+
+**Implementation**
+
+The [Intersection Observer
+API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)
+is a performant way of monitoring the position and visibility of page
+elements. This design is implemented using two separate intersertion observers:
+- `listObserver` observes the position of the `#infinite-scroll-button` that is
+  located at the end of the infinite scroll list. When the button is nearing the
+  viewport, uninserted content is added to the DOM.
+- `sentinelObserver` observes the position of the `#sentinel` element. When the
+  sentinel becomes visible, more content is requested from the server. Adjusting
+  the position of the sentinel is a way of controlling how far in advance that
+  new content should be requested from the server.
+
+
+This is not the only way to address layout shifts stemming
+from use of infinite scroll. Other ways to approach this problem include
+switching to pagination, using list virtualization, and adjusting page layouts.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/index.md b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/index.md
new file mode 100644
index 00000000000..89d6ff579dd
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/index.md
@@ -0,0 +1,10 @@
+---
+layout: pattern-set
+title: Banners and notices
+description: Banners and notices that don't cause layout shifts
+date: 2021-08-17
+---
+
+Banners and notices are a common source of layout shifts. Inserting a banner into the DOM after the surrounding page has already been rendered pushes the page elements below it further down the page.
+
+For more information, see [Best practices for cookie notices](/cookie-notice-best-practices/).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/body.html
new file mode 100644
index 00000000000..c162d89d43f
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/body.html
@@ -0,0 +1,7 @@
+<div id="banner" class="banner">
+  <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+  <div>
+    <h1>Notice</h1>
+    Lorem ipsum dolor sit amet.
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/script.js
new file mode 100644
index 00000000000..8b3be4ca815
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/script.js
@@ -0,0 +1,3 @@
+document.getElementById("close-button").onclick = () => {
+    document.getElementById("banner").style.display = "none";
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/style.css
new file mode 100644
index 00000000000..739fb804499
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/assets/style.css
@@ -0,0 +1,34 @@
+body {
+    overscroll-behavior-y: none;
+    font-family: system-ui;
+    padding: 2em;
+    background-color: #f4f4f4;
+}
+.banner {
+    animation: slideIn 1000ms ease-in-out;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 1rem;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+}
+@keyframes slideIn {
+    from {
+        transform: translateY(100vh);
+    }
+    to {
+        transform: translateY(0vh);
+    }
+}
+.close-button {
+    background: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/demo.njk
new file mode 100644
index 00000000000..dd1a4bba8b8
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/demo.njk
@@ -0,0 +1,275 @@
+---
+patternId: notice-animated-footer
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Animated Footer Demo</title>
+    <style>
+        body {
+            overscroll-behavior-y: none;
+            font-family: system-ui;
+            padding: 2em;
+            background-color: #f4f4f4;
+        }
+        .banner {
+            animation: slideIn 1000ms ease-in-out;
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: white;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateY(100vh);
+            }
+            to {
+                transform: translateY(0vh);
+            }
+        }
+        .close-button {
+            background: transparent;
+            border: none;
+            padding: 1em;
+            font-size: 1em;
+            position: absolute;
+            right: 0;
+            top: 0;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div id="banner" class="banner">
+        <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+        <div>
+            <h1>Notice</h1>
+            Lorem ipsum dolor sit amet.
+        </div>
+    </div>
+    {% set script %}
+        document.getElementById("close-button").onclick = () => {
+            document.getElementById("banner").style = "display: none";
+        }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+    <div class="filler">
+        <h1>Animated Footer</h1>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+    </div>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/index.md b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/index.md
new file mode 100644
index 00000000000..d26736ae300
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-animated-footer/index.md
@@ -0,0 +1,15 @@
+---
+layout: pattern
+title: Animated footer
+description: This banner slides-in from the bottom of the page
+  without causing layout shifts.
+date: 2021-08-18
+updated: 2021-08-18
+height: 300
+---
+
+This animated footer slides-in from the bottom of the page. The effect is
+created by using the CSS
+[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)
+property. The result is a [performant
+animation](/animations-guide/) that does not cause layout shifts.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/body.html
new file mode 100644
index 00000000000..52330bb8828
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/body.html
@@ -0,0 +1,7 @@
+<div id="modal" class="modal">
+    <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+    <div>
+        <h1>Notice</h1>
+        Lorem ipsum dolor sit amet.
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/script.js
new file mode 100644
index 00000000000..616d2d5e8cc
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/script.js
@@ -0,0 +1,3 @@
+document.getElementById("close-button").onclick = () => {
+    document.getElementById("modal").style.display = "none";
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/style.css
new file mode 100644
index 00000000000..05c5c2c714f
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/assets/style.css
@@ -0,0 +1,26 @@
+body {
+    overscroll-behavior-y: none;
+    font-family: system-ui;
+    padding: 2em;
+    background-color: #f4f4f4;
+}
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    min-width: 66%;
+    transform: translate(-50%, -50%);
+    padding: 1em 2em 2em 2em;
+    background-color: white;
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+}
+.close-button {
+    background: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/demo.njk
new file mode 100644
index 00000000000..712851a3031
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/demo.njk
@@ -0,0 +1,268 @@
+---
+patternId: notice-modal
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Modal Demo</title>
+    <style>
+        body {
+            overscroll-behavior-y: none;
+            font-family: system-ui;
+            padding: 2em;
+            background-color: #f4f4f4;
+        }
+        .modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            min-width: 66%;
+            transform: translate(-50%, -50%);
+            padding: 1em 2em 2em 2em;
+            background-color: white;
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+        }
+        .close-button {
+            background: transparent;
+            border: none;
+            padding: 1em;
+            font-size: 1em;
+            position: absolute;
+            right: 0;
+            top: 0;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="modal" class="modal">
+        <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+        <div>
+            <h1>Notice</h1>
+            Lorem ipsum dolor sit amet.
+        </div>
+    </div>
+    {% set script %}
+        document.getElementById("close-button").onclick = () => {
+            document.getElementById("modal").style = "display: none";
+        }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+    <h1>Modal</h1>
+    <div class="filler">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+    </div>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/index.md b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/index.md
new file mode 100644
index 00000000000..45b40790d54
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-modal/index.md
@@ -0,0 +1,11 @@
+---
+layout: pattern
+title: Modal
+description: Modals can be used as an alternative to banner notices.
+date: 2021-08-10
+height: 300
+---
+
+Modals can be used as an alternative to banner notices. Because modals get
+displayed on top of existing page content, they do not cause layout shifts when
+they are displayed. This modal grows in size to fit its contents.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/body.html
new file mode 100644
index 00000000000..4fd8b274570
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/body.html
@@ -0,0 +1,7 @@
+<div id="banner" class="banner">
+    <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+    <div>
+        <h1>Notice</h1>
+        Lorem ipsum dolor sit amet.
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/script.js
new file mode 100644
index 00000000000..8b3be4ca815
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/script.js
@@ -0,0 +1,3 @@
+document.getElementById("close-button").onclick = () => {
+    document.getElementById("banner").style.display = "none";
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/style.css
new file mode 100644
index 00000000000..41b36574166
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/assets/style.css
@@ -0,0 +1,25 @@
+body {
+    font-family: system-ui;
+    padding: 2em;
+    overscroll-behavior-y: none;
+    background-color: #f4f4f4;
+}
+.banner {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 1rem;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+}
+.close-button {
+    background: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/demo.njk
new file mode 100644
index 00000000000..bad8263e019
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/demo.njk
@@ -0,0 +1,267 @@
+---
+patternId: notice-sticky-footer
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Sticky Footer Demo</title>
+    <style>
+        body {
+            font-family: system-ui;
+            padding: 2em;
+            overscroll-behavior-y: none;
+            background-color: #f4f4f4;
+        }
+        .banner {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: white;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+        }
+        .close-button {
+            background: transparent;
+            border: none;
+            padding: 1em;
+            font-size: 1em;
+            position: absolute;
+            right: 0;
+            top: 0;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="banner" class="banner">
+        <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
+        <div>
+            <h1>Notice</h1>
+            Lorem ipsum dolor sit amet.
+        </div>
+    </div>
+    {% set script %}
+        document.getElementById("close-button").onclick = () => {
+            document.getElementById("banner").style = "display: none";
+        }
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+    <div class="filler">
+        <h1>Sticky Footer</h1>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam
+            erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla.
+            Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue.
+            Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam
+            erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean
+            euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum
+            iaculis eu non diam phasellus.
+        </p>
+    </div>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/index.md b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/index.md
new file mode 100644
index 00000000000..eaf96e3ce04
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/notices-pattern-set/notice-sticky-footer/index.md
@@ -0,0 +1,13 @@
+---
+layout: pattern
+title: Sticky footer
+description: This sticky footer banner does not cause layout shifts when it
+  is inserted into the page.
+date: 2021-08-10
+height: 300
+---
+
+Sticky footers are a popular way of displaying notices. Notices placed in the
+footer are less likely to obscure page elements like navigation bars, branding,
+and banner ads. In addition, sticky footers do not cause layout shifts when they
+are inserted into the page.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/index.md b/src/site/content/en/patterns/web-vitals-patterns/placeholders/index.md
new file mode 100644
index 00000000000..8c558007bde
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/index.md
@@ -0,0 +1,12 @@
+---
+layout: pattern-set
+title: Placeholders
+description: Reserve space for future page content
+date: 2021-08-20
+updated: 2021-08-20
+height: 500
+---
+
+Placeholders reserve space for future page content. Placeholders can be used as
+a solution to layout shifts caused by injecting page content; they can also be
+used in conjunction with lazy loading.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/body.html
new file mode 100644
index 00000000000..d24cf60bdf5
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/body.html
@@ -0,0 +1,38 @@
+<div class="grid">
+    <div class="item">
+        <div class="image-container">
+            <img src="hats.jpg">
+        </div>
+        <div class="text-container">Hats</div>
+    </div>
+    <div class="item empty">
+        <div class="image-container">
+            <img src="">
+        </div>
+        <div class="text-container">Watches</div>
+    </div>
+    <div class="item empty">
+        <div class="image-container">
+            <img src="">
+        </div>
+        <div class="text-container"></div>
+    </div>
+    <div class="item empty">
+        <div class="image-container">
+            <img src="">
+        </div>
+        <div class="text-container"></div>
+    </div>
+    <div class="item empty">
+        <div class="image-container">
+            <img src="">
+        </div>
+        <div class="text-container"></div>
+    </div>
+    <div class="item empty">
+        <div class="image-container">
+            <img src="">
+        </div>
+        <div class="text-container"></div>
+    </div>
+</div>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/script.js b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/script.js
new file mode 100644
index 00000000000..d5d04728af9
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/script.js
@@ -0,0 +1,29 @@
+const data = [
+    {
+        description: "Watches",
+        src: "https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/GMPpoERpp9aM5Rihk5F2.jpg"
+    },
+    {
+        description: "Shirt",
+        src: "shirt.jpg"
+    },
+    {
+        description: "Shorts",
+        src: "shorts.jpg"
+    },
+    {
+        description: "Sunglasses",
+        src: "sunglasses.jpg"
+    },
+    {
+        description: "Shoes",
+        src: "shoes.jpg"
+    }
+];
+document.querySelectorAll(".item.empty").forEach((el, index) => {
+    if (data[index]) {
+        el.classList = "item loaded";
+        el.querySelector("img").src = data[index].src;
+        el.querySelector(".text-container").innerHTML = data[index].description;
+    }
+});
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/style.css
new file mode 100644
index 00000000000..d550d82839b
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/assets/style.css
@@ -0,0 +1,58 @@
+:root {
+    --placeholder-primary: #eeeeee;
+    --placeholder-secondary: #cccccc;
+}
+.grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1em;
+    width: 100%;
+    max-width: 650px;
+    margin: 1em 0em;
+}
+.item {
+    display: grid;
+    gap: .5em;
+    width: 200px;
+}
+.text-container {
+    font-size: 1em;
+    height: 1.5em;
+    text-align: center;
+    font-weight: bold;
+}
+.image-container {
+    width: 200px;
+    height: 200px;;
+    animation: placeholder ease-in-out 2s infinite;
+}
+.image-container img {
+    width: 100%;
+}
+@keyframes placeholder {
+    0% {
+        background-color: var(--placeholder-primary);
+    }
+    50% {
+        background-color: var(--placeholder-secondary);
+    }
+    100% {
+        background-color: var(--placeholder-primary);
+    }
+}
+@keyframes fadeIn {
+    0% {
+        opacity: 0%;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+.item.loaded .image-container {
+    animation: none;
+}
+.item.loaded .image-container img{
+    animation: fadeIn linear .5s;
+}
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/demo.njk b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/demo.njk
new file mode 100644
index 00000000000..6dea5d52720
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/demo.njk
@@ -0,0 +1,157 @@
+---
+patternId: web-vitals-patterns/placeholders/placeholders
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Placeholder demo</title>
+    <style>
+        :root {
+            --placeholder-primary: #eeeeee;
+            --placeholder-secondary: #cccccc;
+        }
+        body {
+            padding: 1em;
+            font-family: system-ui;
+            display: grid;
+            justify-items: center;
+        }
+        .grid {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1em;
+            width: 100%;
+            max-width: 650px;
+            margin: 1em 0em;
+        }
+        .item {
+            display: grid;
+            gap: .5em;
+            width: 200px;
+        }
+        .text-container {
+            font-size: 1em;
+            height: 1.5em;
+            text-align: center;
+            font-weight: bold;
+        }
+        .image-container {
+            width: 200px;
+            height: 200px;
+            animation: placeholder ease-in-out 2s infinite;
+        }
+        .image-container img {
+            width: 100%;
+        }
+        @keyframes placeholder {
+            0% {
+                background-color: var(--placeholder-primary);
+            }
+            50% {
+                background-color: var(--placeholder-secondary);
+            }
+            100% {
+                background-color: var(--placeholder-primary);
+            }
+        }
+        @keyframes fadeIn {
+            0% {
+                opacity: 0%;
+            }
+            100% {
+                opacity: 100%;
+            }
+        }
+        .item.loaded .image-container {
+            animation: none;
+        }
+        .item.loaded .image-container img{
+            animation: fadeIn linear .5s;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Placeholders</h1>
+    <button>Reload</button>
+    <div class="grid">
+        <div class="item">
+            <div class="image-container">
+                <img src="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/LiTG3VL5E1mRXiYgjCjc.jpg">
+            </div>
+            <div class="text-container">Hats</div>
+        </div>
+        <div class="item empty">
+            <div class="image-container">
+                <img src="">
+            </div>
+            <div class="text-container"></div>
+        </div>
+        <div class="item empty">
+            <div class="image-container">
+                <img src="">
+            </div>
+            <div class="text-container"></div>
+        </div>
+        <div class="item empty">
+            <div class="image-container">
+                <img src="">
+            </div>
+            <div class="text-container"></div>
+        </div>
+        <div class="item empty">
+            <div class="image-container">
+                <img src="">
+            </div>
+            <div class="text-container"></div>
+        </div>
+        <div class="item empty">
+            <div class="image-container">
+                <img src="">
+            </div>
+            <div class="text-container"></div>
+        </div>
+    </div>
+    {% set script %}
+        document.querySelector("button").addEventListener("click", ()=> {
+            window.location.reload();
+        });
+        setTimeout(() => {
+            const data = [
+                {
+                    description: "Watches",
+                    src: "https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/GMPpoERpp9aM5Rihk5F2.jpg"
+                },
+                {
+                    description: "Shirt",
+                    src:"https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/eM7KKuO6MQv43UWd0bSG.jpg"
+                },
+                {
+                    description: "Shorts",
+                    src:"https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/CXdSCe7iBNHX1SQGR9Xd.jpg"
+                },
+                {
+                    description: "Sunglasses",
+                    src:"https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/sSJWeg59fl3ObQurc50r.jpg"
+                },
+                {
+                    description: "Shoes",
+                    src:"https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/4d94KXdGWwPr9lBa4ui9.jpg"
+                }
+            ];
+            document.querySelectorAll(".item.empty").forEach((el, index) => {
+                if(data[index]){
+                    el.classList = "item loaded";
+                    el.querySelector("img").src = data[index].src;
+                    el.querySelector(".text-container").innerHTML = data[index].description;
+                }
+            });
+        }, 3000);
+    {% endset %}
+    <script>{{ script | minifyJs | cspHash | safe }}</script>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/index.md b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/index.md
new file mode 100644
index 00000000000..59fe4e9dbbe
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/placeholders/placeholders/index.md
@@ -0,0 +1,22 @@
+---
+layout: pattern
+title: Placeholders
+description: These placeholders provide users with a visual indication that
+  new content is loading; they also help prevent layout shifts.
+date: 2021-08-23
+updated: 2021-08-23
+height: 700
+---
+
+Creating placeholders for page content can sometimes be as simple as adding a
+background effect to existing page elements. In this example, all list items
+share the same underlying HTML structure. However, the placeholders are styled
+with a gray background that uses a CSS animation to create a pulsing loading
+effect.
+
+Depending on how your page elements are implemented, you may also need to adjust
+your CSS slightly to ensure that the placeholders still take up space even
+though they don't contain content. Often this takes the form of adding `width`
+or `height` properties to existing page elements. For instance, in this example,
+adding `height: 1.5em` to `.text-container` ensures that its placeholder remains
+visible even though it doesn't contain any text.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/index.md b/src/site/content/en/patterns/web-vitals-patterns/video/index.md
new file mode 100644
index 00000000000..e4bf95ffe50
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/index.md
@@ -0,0 +1,11 @@
+---
+layout: pattern-set
+title: Video
+description: Performant Video
+date: 2021-08-17
+---
+
+Video can impact Web Vitals by being a source of [layout
+shifts](/debug-layout-shifts/). In addition, in some scenarios
+large video files can delay LCP by monopolizing network resources and delaying
+the loading of other page resources.
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/assets/body.html
new file mode 100644
index 00000000000..204b2a581be
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/assets/body.html
@@ -0,0 +1,3 @@
+<video autoplay loop muted playsinline width="320" height="240">
+    <source src="dog.mp4" type="video/mp4">
+</video>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/demo.md b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/demo.md
new file mode 100644
index 00000000000..62227bbe63c
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/demo.md
@@ -0,0 +1,36 @@
+---
+patternId: web-vitals-patterns/video/video-gif
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Video demo</title>
+    <style>
+        body {
+            font-family: system-ui;
+            display: grid;
+            justify-items: center;
+            padding: 1em;
+            line-height: 1.5;
+        }
+    </style>
+</head>
+<body>
+    <h1>GIF-style video</h1>
+    <video autoplay loop muted playsinline width="320" height="240">
+        <source src="https://web-dev.imgix.net/video/j2RDdG43oidUy6AL6LovThjeX9c2/HhcHgzvoYoMJ57J9fk2w.mp4" type="video/mp4">
+    </video>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/index.md b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/index.md
new file mode 100644
index 00000000000..cb8cb88c5a6
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video-gif/index.md
@@ -0,0 +1,16 @@
+---
+layout: pattern
+title: GIF-style video
+description: This &ltvideo&gt; tag looks and feels like a
+  GIF but is far more performant.
+date: 2021-08-19
+updated: 2021-08-19
+height: 500
+---
+
+Animated GIFs can be 5-20x larger than the equivalent MP4 video. However, MP4
+videos can be configured to look and feel like GIFs by including the `autoplay loop
+muted playsinline` attributes on the `<video>` tag. In addition, to prevent
+layout shifts, make sure to set the `width` and `height` attributes. For
+instructions on converting GIFs to MP4, see [Create MPEG
+Videos](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/#create-mpeg-videos).
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/body.html b/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/body.html
new file mode 100644
index 00000000000..ac3c8008bb4
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/body.html
@@ -0,0 +1,3 @@
+<video controls width="960" height="540" poster="flower-960-poster.png">
+    <source src="flower-960.mp4" type="video/mp4">
+</video>
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/style.css b/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/style.css
new file mode 100644
index 00000000000..d1a8163f68f
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video/assets/style.css
@@ -0,0 +1,4 @@
+video {
+    max-width: 100%;
+    height: auto;
+}
\ No newline at end of file
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video/demo.md b/src/site/content/en/patterns/web-vitals-patterns/video/video/demo.md
new file mode 100644
index 00000000000..449761a94ce
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video/demo.md
@@ -0,0 +1,41 @@
+---
+patternId: web-vitals-patterns/video/video
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Video demo</title>
+    <style>
+        body {
+            font-family: system-ui;
+            display: grid;
+            justify-items: center;
+            padding: 1em;
+            line-height: 1.5;
+        }
+        video {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Video</h1>
+    <video controls width="960" height="540" poster="https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/3N9Da7li9rJxbooRM3hU.png">
+        <source src="https://web-dev.imgix.net/video/j2RDdG43oidUy6AL6LovThjeX9c2/oHIJC3xKftkPdyClOFxw.mp4" type="video/mp4">
+    </video>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
+        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
+        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
+        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
+        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
+        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
+        iaculis eu non diam phasellus.
+    </p>
+</body>
diff --git a/src/site/content/en/patterns/web-vitals-patterns/video/video/index.md b/src/site/content/en/patterns/web-vitals-patterns/video/video/index.md
new file mode 100644
index 00000000000..34eb080de98
--- /dev/null
+++ b/src/site/content/en/patterns/web-vitals-patterns/video/video/index.md
@@ -0,0 +1,31 @@
+---
+layout: pattern
+title: Video
+description: This video loads without causing layout shifts and
+  displays a poster image.
+date: 2021-08-19
+updated: 2021-08-19
+height: 500
+---
+
+When optimizing video for Core Web Vitals make sure to set the `width` and
+`height` attributes on the `<video>` tag. Depending on the situation, you may
+also want to utilize the `poster` attribute.
+
+* **`width` and `height` attributes**: To prevent layout shifts, set the `width`
+  and `height` attributes on the `<video>` tag. This allows the browser to
+  determine the dimensions of the video (and reserve the correct amount of
+  space) - without having to wait for the video to download.
+
+* **`poster` attribute (optional)**: The
+  [`poster`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)
+  attribute specifies the image that should be displayed while a video is
+  downloading. If a video is the LCP element, LCP is determined by the time that
+  the poster image is rendered - rather than when the overall video loads. If
+  this attribute is not specified, the browser will wait until the first frame
+  of the video is available, then use this as the poster image; videos without
+  a `poster` attribute are currently [not considered for Largest Contentful
+  Paint](/lcp/#what-elements-are-considered).
+
+In this example, CSS is used to ensure that the video resizes to fit its
+container. This has no impact on Web Vitals but is a useful technique.
diff --git a/src/site/content/en/payments/android-payment-apps-delegation/index.md b/src/site/content/en/payments/android-payment-apps-delegation/index.md
index 85419904020..ef0e09658b0 100644
--- a/src/site/content/en/payments/android-payment-apps-delegation/index.md
+++ b/src/site/content/en/payments/android-payment-apps-delegation/index.md
@@ -6,10 +6,13 @@ subhead: |
 authors:
   - sahel
 date: 2020-07-17
+updated: 2021-09-14
 description: |
   Learn how to modify your Android payment app to provide the user's selected shipping address as well as contact information when the merchant has requested them via the Payment Request API.
 tags:
   - payments
+feedback:
+  - api
 ---
 
 Entering shipping address and contact information through a web form can be a
@@ -19,19 +22,18 @@ rate.
 That's why the Payment Request API supports a feature to request shipping
 address and contact information. This provides multiple benefits:
 
-* Users can pick the right address with just a few taps.    
+* Users can pick the right address with just a few taps.
 * The address is always returned in [the standardized
-  format](https://w3c.github.io/payment-request/#paymentaddress-interface).    
+  format](https://w3c.github.io/payment-request/#paymentaddress-interface).
 * Submitting an incorrect address is less likely.
 
-This functionality can be deferred to a payment app to offer a unified payment
-experience and it's called *delegation*.
+Browsers can defer the collection of shipping address and contact information to
+a payment app to provide a unified payment experience. This functionality is
+called *delegation*.
 
 Whenever possible, Chrome delegates the collection of a customer's shipping
 address and contact information to the invoked Android payment app. The
-delegation reduces the friction during checkout because the user's installed
-payment apps usually have more accurate information about their shipping address
-and contact details.
+delegation reduces the friction during checkout.
 
 The merchant website can dynamically update the shipping options and total price
 depending on the customer's choice of the shipping address and the shipping
@@ -48,21 +50,25 @@ option.
 </figure>
 
 {% Aside %}
-Learn how to implement an [Android native payment
-app](https://web.dev/android-payment-apps-developers-guide/) in advance.
+Learn how to implement an [Android payment
+app](/android-payment-apps-developers-guide/) in advance.
 {% endAside %}
 
-To add delegation support to an already existing Android native payment app,
+To add delegation support to an already existing Android payment app,
 implement the following steps:
 
-1.  Declare supported delegations.
-2.  Parse `PAY` intent extras for required payment options.
-3.  Provide required information in payment response.
-4.  [Optional] Support dynamic flow:
-    1.  Notify the merchant about changes in the user selected payment method,
-        shipping address, or shipping option.
-    2.  Receive updated payment details from the merchant (for example, the
-        adjusted total amount based on the selected shipping option's cost).
+1.  [Declare supported delegations](#declare-supported-delegations).
+2.  [Parse `PAY` intent extras for required payment
+     options](#parse-pay-intent-extras-for-required-payment-options).
+3.  [Provide required information in payment
+     response](#provide-required-information-in-a-payment-response).
+4.  [[Optional] Support dynamic flow](#optional-support-dynamic-flow):
+    1.  [Notify the merchant about changes in the user selected payment method,
+        shipping address, or shipping
+        option](#notify-the-merchant-about-changes-in-the-user-selected-payment-method-shipping-address-or-shipping-option).
+    2.  [Receive updated payment details from the merchant (for example, the
+        adjusted total amount based on the selected shipping option's
+        cost)](#receive-updated-payment-details-from-the-merchant).
 
 ## Declare supported delegations
 
@@ -81,7 +87,7 @@ app. Declare the supported delegations as a `<meta-data>` in your app's
 </activity>
 ```
 
-`<resource>` must be a list of strings chosen from the following valid values: 
+`<resource>` must be a list of strings chosen from the following valid values:
 
 ```json
 [ "payerName", "payerEmail", "payerPhone", "shippingAddress" ]
@@ -199,13 +205,13 @@ To do so the following parameters must be specified as Intent extras:
     * `recipient`
     * `region`
     * `sortingCode`
-    * `addressLine`  
+    * `addressLine`
   All keys other than the `addressLine` have string values. The `addressLine`
   is an array of strings.
 * `shippingOptionId` - The identifier of the user-selected shipping option. This
   should be a non-empty string when `paymentOptions.requestShipping` is true.
 
-###  Payment response validation
+###  Validate payment response
 
 If the activity result of a payment response received from the invoked payment
 app is set to `RESULT_OK`, then Chrome will check for required additional
@@ -222,7 +228,7 @@ messages:
 'Payment app returned invalid response. Missing field "shipping option".'
 ```
 
-Below is an example of a valid response:
+The following code sample is an example of a valid response:
 
 ```kotlin
 fun Intent.populateRequestedPaymentOptions() {
@@ -304,12 +310,18 @@ interface IPaymentDetailsUpdateService {
 
 ```kotlin
 private fun bind() {
-    val intent = Intent()
-    intent.setClassName(
-        callingPackageName,
-        "org.chromium.components.payments.PaymentDetailsUpdateService")
-    intent.action = IPaymentDetailsUpdateService::class.java.name
-    isBound = bindService(intent, connection, Context.BIND_AUTO_CREATE)
+    // The action is introduced in Chrome version 92, which supports the service in Chrome
+    // and other browsers (e.g., WebLayer).
+    val newIntent = Intent("org.chromium.intent.action.UPDATE_PAYMENT_DETAILS")
+        .setPackage(callingBrowserPackage)
+    if (packageManager.resolveService(newIntent, PackageManager.GET_RESOLVED_FILTER) == null) {
+        // Fallback to Chrome-only approach.
+        newIntent.setClassName(
+            callingBrowserPackage,
+            "org.chromium.components.payments.PaymentDetailsUpdateService")
+        newIntent.action = IPaymentDetailsUpdateService::class.java.name
+    }
+    isBound = bindService(newIntent, connection, Context.BIND_AUTO_CREATE)
 }
 
 private val connection = object : ServiceConnection {
@@ -333,7 +345,7 @@ The `callingPackageName` used for the service's start intent can have one of the
 following values depending on the browser that has initiated the payment
 request.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -372,6 +384,12 @@ request.
           <code>"org.chromium.chrome"</code>
         </td>
       </tr>
+      <tr>
+        <td>Google Quick Search Box (a WebLayer embedder)</td>
+        <td>
+          <code>"com.google.android.googlequicksearchbox"</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
diff --git a/src/site/content/en/payments/android-payment-apps-developers-guide/index.md b/src/site/content/en/payments/android-payment-apps-developers-guide/index.md
index bcea12cb5ea..02ccaca39c7 100644
--- a/src/site/content/en/payments/android-payment-apps-developers-guide/index.md
+++ b/src/site/content/en/payments/android-payment-apps-developers-guide/index.md
@@ -10,20 +10,23 @@ date: 2020-05-25
 description: |
   Learn how to adapt your Android payment app to work with Web Payments and provide a better user experience for customers.
 tags:
+  - blog
   - payments
+feedback:
+  - api
 ---
 
 The [Payment Request API](https://www.w3.org/TR/payment-request/) brings to the
-web a native browser-based interface that allows users to enter required payment
-information easier than ever before. The API can also invoke native payment
+web a built-in browser-based interface that allows users to enter required payment
+information easier than ever before. The API can also invoke platform-specific payment
 apps.
+{% BrowserCompat 'api.PaymentRequest' %}
 
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">Checkout flow with native Google Pay app that uses Web Payments</a>.
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/hzMuAwPAGpNmgxHpaHAq.mp4", autoplay="true", loop="true"
+  %}
+  <figcaption>Checkout flow with platform-specific Google Pay app that uses Web Payments.
   </figcaption>
 </figure>
 
@@ -45,7 +48,7 @@ To understand how merchants integrate with payment apps, check out [Life of a
 payment transaction](/life-of-a-payment-transaction/).
 {% endAside%}
 
-It takes four steps to implement Web Payments in an Android native payment app:
+It takes four steps to implement Web Payments in an Android payment app:
 
 1. Let merchants discover your payment app.
 2. Let a merchant know if a customer has an enrolled instrument (such as credit
@@ -144,84 +147,6 @@ class SampleIsReadyToPayService : Service() {
 }
 ```
 
-### Parameters
-
-Pass the following parameters to `onBind` as Intent extras:
-
-* `methodNames`
-* `methodData`
-* `topLevelOrigin`
-* `topLevelCertificateChain`
-* `topLevelCertificateChain`
-* `paymentRequestOrigin`
-
-```kotlin
-override fun onBind(intent: Intent?): IBinder? {
-  val extras: Bundle? = intent?.extras
-  // …
-}
-```
-
-#### `methodNames`
-
-The names of the methods being queried. The elements are the keys in the
-`methodData` dictionary, and indicate the methods that the payment app supports.
-
-```kotlin
-val methodNames: List<String>? = extras.getStringArrayList("methodNames")
-```
-
-#### `methodData`
-
-A mapping from each entry of `methodNames` to the
-[`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying).
-
-```kotlin
-val methodData: Bundle? = extras.getBundle("methodData")
-```
-
-#### `topLevelOrigin`
-
-The merchant's origin without the scheme (the scheme-less origin of the
-top-level browsing context). For example, `https://mystore.com/checkout` will be
-passed as `mystore.com`.
-
-```kotlin
-val topLevelOrigin: String? = extras.getString("topLevelOrigin")
-```
-
-#### `topLevelCertificateChain`
-
-The merchant's certificate chain (the certificate chain of the top-level
-browsing context). Null for localhost and file on disk, which are both secure
-contexts without SSL certificates. The certificate chain is necessary because a
-payment app might have different trust requirements for websites.
-
-```kotlin
-val topLevelCertificateChain: Array<Parcelable>? =
-    extras.getParcelableArray("topLevelCertificateChain")
-```
-
-Each `Parcelable` is a `Bundle` with a `"certificate"` key and a byte array
-value.
-
-```kotlin
-val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
-  (p as Bundle).getByteArray("certificate")
-}
-```
-
-#### `paymentRequestOrigin`
-
-The schemeless origin of the iframe browsing context that invoked the `new
-PaymentRequest(methodData, details, options)` constructor in JavaScript. If the
-constructor was invoked from the top-level context, then the value of this
-parameter equals the value of `topLevelOrigin` parameter.
-
-```kotlin
-val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
-```
-
 ### Response
 
 The service can send its response via `handleIsReadyToPay(Boolean)` method.
@@ -248,7 +173,7 @@ to verify that the calling package has the right signature.
 ## Step 3: Let a customer make payment
 
 The merchant calls `show()` to [launch the payment
-app](/life-of-a-payment-transaction#step-4:-the-browser-launches-the-payment-app)
+app](/life-of-a-payment-transaction#launch)
 so the customer can make a payment. The payment app is invoked via an Android
 intent `PAY` with transaction information in the intent parameters.
 
@@ -277,7 +202,7 @@ To support multiple payment methods, add a `<meta-data>` tag with a
 
   <meta-data
     android:name="org.chromium.default_payment_method_name"
-    android:value="https://bobpay.xyz/pay" />
+    android:value="https://bobbucks.dev/pay" />
   <meta-data
     android:name="org.chromium.payment_method_names"
     android:resource="@array/method_names" />
@@ -412,7 +337,7 @@ The activity can send its response back through `setResult` with `RESULT_OK`.
 
 ```kotlin
 setResult(Activity.RESULT_OK, Intent().apply {
-  putExtra("methodName", "https://bobpay.xyz/pay")
+  putExtra("methodName", "https://bobbucks.dev/pay")
   putExtra("details", "{\"token\": \"put-some-data-here\"}")
 })
 finish()
diff --git a/src/site/content/en/payments/empowering-payment-apps-with-web-payments/index.md b/src/site/content/en/payments/empowering-payment-apps-with-web-payments/index.md
index d9f562adb52..fe4bf9ac414 100644
--- a/src/site/content/en/payments/empowering-payment-apps-with-web-payments/index.md
+++ b/src/site/content/en/payments/empowering-payment-apps-with-web-payments/index.md
@@ -9,7 +9,10 @@ description: |
 date: 2020-05-25
 updated: 2020-07-16
 tags:
+  - blog
   - payments
+feedback:
+  - api
 ---
 
 One of the key ecosystem drivers for the web are payments. With secure,
@@ -40,12 +43,11 @@ of billing data for every purchase. See a demo below of how Google Pay leverages
 Web Payments to build a seamless flow. The same can be achieved by any other
 payment app:
 
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">Checkout flow with Google Pay and Web Payments.</a>.
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/hzMuAwPAGpNmgxHpaHAq.mp4", autoplay="true", loop="true"
+  %}
+  <figcaption>Checkout flow with Google Pay and Web Payments.
   </figcaption>
 </figure>
 
@@ -80,7 +82,7 @@ security.
 
 ### Better developer experience
 
-* **Easy integration:** Web Payments can be extended from an existing native
+* **Easy integration:** Web Payments can be extended from an existing platform-specific
   payment app or a web-based payment app.
 
 * **Low integration cost:** Merchants can integrate Web Payments with JavaScript
@@ -89,14 +91,10 @@ security.
 * **Standards:** The protocol and data format for exchanging information with
   merchants is standardized and doesn't require deep integration.
 
-* **Dynamic price updates:** Merchants can dynamically change the shipping cost
-  based on the shipping address selected in the payment app, without deep
-  integration.
-
 ###  Stricter security
 
 * [Sideloading](https://en.wikipedia.org/wiki/Sideloading) prevention when
-  invoking native payment apps.
+  invoking platform-specific payment apps.
 
 * Designed with upcoming security and privacy paradigms in mind.
 
@@ -126,7 +124,7 @@ Consider the existing approaches to integrating payments on the web:
 
 Here's how they compare to Web Payments:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <td></td>
@@ -161,7 +159,7 @@ Here's how they compare to Web Payments:
       <td>✔</td>
     </tr>
     <tr>
-      <td>Native app integration</td>
+      <td>Platform-specific app integration</td>
       <td>✔</td>
       <td></td>
       <td></td>
@@ -187,18 +185,18 @@ Here's how they compare to Web Payments:
   </table>
 </div>
 
-{% Aside %} *Redirecting to a native payment app can be done in-context with the
+{% Aside %} *Redirecting to a platform-specific payment app can be done in-context with the
 merchant website though redirecting to another website completely loses the
 context. {% endAside %}
 
 ##  Integrating Web Payments in existing apps
 
-You can integrate Web Payments in both native and web-based payment apps: if the
-native payment app is not installed, the web-based payment app can be used as a
+You can integrate Web Payments in both platform-specific and web-based payment apps: if the
+platform-specific payment app is not installed, the web-based payment app can be used as a
 fallback. Customers and merchants can seamlessly send and receive payments
 through a payment method of their choice, depending on the environment.
 
-###  Native payment apps
+###  Platform-specific payment apps
 
 * Ideal for payment apps that already have a large install base and want to give
   existing users a consistent experience on the web.
@@ -208,7 +206,7 @@ through a payment method of their choice, depending on the environment.
   Payments performs signature verification before running the payment app which
   makes malicious payment apps impossible to be sideloaded.
 
-In the video above, Google Pay is a native payment app.
+In the video above, Google Pay is a platform-specific payment app.
 
 ###  Web based payment apps
 
@@ -221,12 +219,11 @@ In the video above, Google Pay is a native payment app.
 * The web-based route is ideal for web services that have a large number of
   customers with their card on file.
 
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/web-based-payment-app.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/web-based-payment-app.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/kM6NP47k4Xzl4tHWISCm.mp4", autoplay="true", loop="true"
+  %}
+  <figcaption>
     Checkout flow with a web-based payment app.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/payments/handling-optional-payment-information/index.md b/src/site/content/en/payments/handling-optional-payment-information/index.md
new file mode 100644
index 00000000000..ce1b0d36db9
--- /dev/null
+++ b/src/site/content/en/payments/handling-optional-payment-information/index.md
@@ -0,0 +1,534 @@
+---
+layout: post
+title: Handling optional payment information with a service worker
+subhead: |
+  How to adapt your web-based payment app to Web Payments and provide a better user experience for customers.
+authors:
+  - agektmr
+date: 2020-08-31
+updated: 2023-01-12
+description: |
+  Once a web-based payment app is registered, it's ready to accept payment requests from merchants. This article teaches you how to orchestrate a payment transaction from a service worker during runtime.
+tags:
+  - payments
+  - service-worker
+feedback:
+  - api
+---
+
+{% Aside 'warning' %}
+
+Shipping and address support in [the Payment Request API was once removed from
+the specification](https://github.com/w3c/payment-request/pull/955) and from
+Chrome, but is [being reverted](https://github.com/w3c/payment-request/pull/996)
+in the spec. Thus, we've reverted the documentation about shipping and address as
+well.
+
+{% endAside %}
+
+Once [a web-based payment app receives a payment request and initiates a payment
+transaction](/orchestrating-payment-transactions), the service worker will act
+as the hub for communication between the merchant and the payment app. This post
+explains how a payment app can pass information about the payment method,
+shipping address, or contact information to the merchant using a service worker.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kDteyNFNEVnJQyTPw5p8.png", alt="Handling optional payment information with a service worker", width="800", height="2335", class="w-screenshot" %}
+  <figcaption>
+    Handling optional payment information with a service worker
+  </figcaption>
+</figure>
+
+## Inform the merchant of a payment method change {: #payment-method-changes }
+Payment apps can support multiple payment instruments with different payment methods.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Customer</th>
+        <th>Payment Method</th>
+        <th>Payment Instrument</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="3">A</td>
+        <td>Credit Card Issuer 1</td>
+        <td><code>****1234</code></td>
+      </tr>
+      <tr>
+        <td>Credit Card Issuer 1</td>
+        <td><code>****4242</code></td>
+      </tr>
+      <tr>
+        <td>Bank X</td>
+        <td><code>******123</code></td>
+      </tr>
+      <tr>
+        <td rowspan="2">B</td>
+        <td>Credit Card Issuer 2</td>
+        <td><code>****5678</code></td>
+      </tr>
+      <tr>
+        <td>Bank X</td>
+        <td><code>******456</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+For example, in the above table, Customer A's web-based wallet has two credit
+cards and one bank account registered. In this case, the app is handling three
+payment instruments (`****1234`, `****4242`, `******123`) and two payment
+methods (Credit Card Issuer 1 and Bank X). On a payment transaction, the payment
+app can let the customer pick one of the payment instruments and use it to pay
+for the merchant.
+
+<figure style="width:300px; margin:auto;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yZYmEL3y1e2cPaLNz34K.png", alt="Payment method picker UI", width="800", height="1600" %}
+  <figcaption>
+    Payment method picker UI
+  </figcaption>
+</figure>
+
+The payment app can let the merchant know which payment method the customer
+picked before sending the full payment response. This is useful when the
+merchant wants to run a discount campaign for a specific payment method brand,
+for example.
+
+With the Payment Handler API, the payment app can send a "payment method change"
+event to the merchant via a service worker to notify the new payment method
+identifier. The service worker should invoke
+`PaymentRequestEvent.changePaymentMethod()` with the new payment method
+information.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ogXzkcdinU3RNC9cMzN0.png", alt="Inform the merchant of a payment method change", width="800", height="659" %}
+  <figcaption>
+    Inform the merchant of a payment method change
+  </figcaption>
+</figure>
+
+Payment apps can pass a `methodDetails` object as the optional second argument
+for `PaymentRequestEvent.changePaymentMethod()`. This object can contain
+arbitrary payment method details required for the merchant to process the change
+event.
+
+{% Aside 'warning' %}
+Sharing detailed information about a customer with the merchant before the
+transaction is finalized is potentially a privacy risk. As a best practice,
+payment apps should omit unnecessary details as much as possible.
+{% endAside %}
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+…
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      …
+      case 'PAYMENT_METHOD_CHANGED':
+        const newMethod = e.data.paymentMethod;
+        const newDetails = e.data.methodDetails;
+        // Redact or check that no sensitive information is passed in
+        // `newDetails`.
+        // Notify the merchant of the payment method change
+        details =
+          await payment_request_event.changePaymentMethod(newMethod, newDetails);
+      …
+```
+
+When the merchant receives a `paymentmethodchange` event from the Payment
+Request API, they can update the payment details and respond with a
+[`PaymentDetailsUpdate`](https://w3c.github.io/payment-request/#paymentdetailsupdate-dictionary)
+object.
+
+{% Label %}
+[merchant]
+{% endLabel %}
+
+```js
+request.addEventListener('paymentmethodchange', e => {
+  if (e.methodName === 'another-pay') {
+    // Apply $10 discount for example.
+    const discount = {
+      label: 'special discount',
+      amount: {
+        currency: 'USD',
+        // The value being string complies the spec
+        value: '-10.00'
+      }
+    };
+    let total = 0;
+    details.displayItems.push(discount);
+    for (let item of details.displayItems) {
+     total += parseFloat(item.amount.value);
+    }
+    // Convert the number back to string
+    details.total.amount.value = total.toString();
+  }
+  // Pass a promise to `updateWith()` and send updated payment details
+  e.updateWith(details);
+});
+```
+
+When the merchant responds, the promise that
+[`PaymentRequestEvent.changePaymentMethod()`](https://w3c.github.io/payment-handler/#dom-paymentrequestevent-changepaymentmethod)
+returned will resolve with a
+[`PaymentRequestDetailsUpdate`](https://w3c.github.io/payment-handler/#the-paymentrequestdetailsupdate)
+object.
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+…
+        // Notify the merchant of the payment method change
+        details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
+        // Provided the new payment details,
+        // send a message back to the frontend to update the UI
+        postMessage('UPDATE_REQUEST', details);
+        break;
+…
+```
+
+Use the object to update the UI on the frontend. See [Reflect the updated
+payment details](#reflect-the-updated-payment-details).
+
+## Inform the merchant of a shipping address change {: #shipping-address-changes }
+
+Payment apps can provide a customer's shipping address to the merchant as part
+of a payment transaction.
+
+This is useful for merchants because they can delegate the address collection to
+payment apps. And, because the address data will be provided in [the standard
+data format](https://w3c.github.io/payment-request/#dom-addressinit), the
+merchant can expect to receive shipping addresses in consistent structure.
+
+Additionally, customers can register their address information with their
+preferred payment app and reuse it for different merchants.
+
+<figure class="w-figure" style="width:300px; margin:auto;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0ytdyaEC7tkPkBTv5rIu.png", alt="Shipping address picker UI", width="800", height="1600", class="w-screenshot" %}
+  <figcaption class="w-figcaption">
+    Shipping address picker UI
+  </figcaption>
+</figure>
+
+Payment apps can provide a UI to edit a shipping address or to select
+pre-registered address information for the customer on a payment transaction.
+When a shipping address is determined temporarily, the payment app can let the
+merchant know of the redacted address information. This provides merchants with
+multiple benefits:
+
+* A merchant can determine whether the customer meets the regional restriction
+  to ship the item (for example, domestic only).
+* A merchant can change the list of shipping options based on the region of the
+  shipping address (For example, international regular or express).
+* A merchant can apply the new shipping cost based on the address and update the
+  total price.
+
+With the Payment Handler API, the payment app can send a "shipping address
+change" event to the merchant from the service worker to notify the new shipping
+address. The service worker should invoke
+[`PaymentRequestEvent.changeShippingAddress()`](https://w3c.github.io/payment-handler/#dom-paymentrequestevent-changeshippingaddress)
+with the [new address
+object](https://www.w3.org/TR/payment-request/#dom-addressinit).
+
+<figure class="w-figure">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aVv5d9OEcEjH1Z6nUQKb.png", alt="Inform the merchant of a shipping address change", width="800", height="675", class="w-screenshot" %}
+  <figcaption class="w-figcaption">
+    Inform the merchant of a shipping address change
+  </figcaption>
+</figure>
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+...
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      …
+      case 'SHIPPING_ADDRESS_CHANGED':
+        const newAddress = e.data.shippingAddress;
+        details =
+          await payment_request_event.changeShippingAddress(newAddress);
+      …
+```
+
+{% Aside 'key-term' %}
+**Redacted address**. Informing the full shipping address to the merchant in
+this case is not necessary and risks customers' privacy. The merchant only
+receives the parts of the address that they need to determine the shipping cost.
+Specifically, the browser will clear the `organization`, `phone`, `recipient`,
+`addressLine` fields from the payment app provided address before raising the
+`shippingaddresschange` event in the merchant's DOM.
+{% endAside %}
+
+The merchant will receive a `shippingaddresschange` event from the Payment
+Request API so they can respond with the updated [`PaymentDetailsUpdate`](https://w3c.github.io/payment-request/#paymentdetailsupdate-dictionary).
+
+{% Label %}
+[merchant]
+{% endLabel %}
+
+```js
+request.addEventListener('shippingaddresschange', e => {
+  // Read the updated shipping address and update the request.
+  const addr = request.shippingAddress;
+  const details = getPaymentDetailsFromShippingAddress(addr);
+  // `updateWith()` sends back updated payment details
+  e.updateWith(details);
+});
+```
+
+When the merchant responds, the promise
+[`PaymentRequestEvent.changeShippingAddress()`](https://w3c.github.io/payment-handler/#dom-paymentrequestevent-changeshippingaddress)
+returned will resolve with a
+[`PaymentRequestDetailsUpdate`](https://w3c.github.io/payment-handler/#the-paymentrequestdetailsupdate)
+object.
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+…
+        // Notify the merchant of the shipping address change
+        details = await payment_request_event.changeShippingAddress(newAddress);
+        // Provided the new payment details,
+        // send a message back to the frontend to update the UI
+        postMessage('UPDATE_REQUEST', details);
+        break;
+…
+```
+
+Use the object to update the UI on the frontend. See [Reflect the updated
+payment details](#reflect-the-updated-payment-details).
+
+## Inform the merchant of a shipping option change
+
+Shipping options are delivery methods merchants use to ship purchased items to a customer. Typical shipping options include:
+* Free shipping
+* Express shipping
+* International shipping
+* Premium international shipping
+
+Each comes with its own cost. Usually faster methods/options are more expensive.
+
+Merchants using the Payment Request API can delegate this selection to a payment
+app. The payment app can use the information to construct a UI and let the
+customer pick a shipping option.
+
+<figure class="w-figure" style="width:300px; margin:auto;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/VkHwTharTqX7oFK62RkA.png", alt="Shipping option picker UI", width="800", height="1600", class="w-screenshot" %}
+  <figcaption class="w-figcaption">
+    Shipping option picker UI
+  </figcaption>
+</figure>
+
+The list of shipping options specified in the merchant's Payment Request API is
+propagated to the payment app's service worker as a property of
+`PaymentRequestEvent`.
+
+{% Label %}
+[merchant]
+{% endLabel %}
+
+```js
+const request = new PaymentRequest([{
+  supportedMethods: 'https://bobbucks.dev/pay',
+  data: { transactionId: '****' }
+}], {
+  displayItems: [{
+    label: 'Anvil L/S Crew Neck - Grey M x1',
+    amount: { currency: 'USD', value: '22.15' }
+  }],
+  shippingOptions: [{
+    id: 'standard',
+    label: 'Standard',
+    amount: { value: '0.00', currency: 'USD' },
+    selected: true
+  }, {
+    id: 'express',
+    label: 'Express',
+    amount: { value: '5.00', currency: 'USD' }
+  }],
+  total: {
+    label: 'Total due',
+    amount: { currency: 'USD', value : '22.15' }
+  }
+}, {  requestShipping: true });
+```
+
+The payment app can let the merchant know which shipping option the customer
+picked. This is important for both the merchant and the customer because
+changing the shipping option changes the total price as well. The merchant needs
+to be informed of the latest price for the payment verification later and the
+customer also needs to be aware of the change.
+
+With the Payment Handler API, the payment app can send a "shipping option
+change" event to the merchant from the service worker. The service worker should
+invoke
+[`PaymentRequestEvent.changeShippingOption()`](https://w3c.github.io/payment-handler/#dom-paymentrequestevent-changeshippingoption)
+with the new shipping option ID.
+
+<figure class="w-figure">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mERzHqvPGrjKWu29m5q1.png", alt="Inform the merchant of a shipping option change", width="800", height="667", class="w-screenshot" %}
+  <figcaption class="w-figcaption">
+    Inform the merchant of a shipping option change
+  </figcaption>
+</figure>
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+…
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      …
+      case 'SHIPPING_OPTION_CHANGED':
+        const newOption = e.data.shippingOptionId;
+        details =
+          await payment_request_event.changeShippingOption(newOption);
+      …
+```
+
+The merchant will receive a `shippingoptionchange` event from the Payment
+Request API. The merchant should use the information to update the total price
+and then respond with the updated
+[`PaymentDetailsUpdate`](https://w3c.github.io/payment-request/#paymentdetailsupdate-dictionary).
+
+{% Label %}
+[merchant]
+{% endLabel %}
+
+```js
+request.addEventListener('shippingoptionchange', e => {
+  // selected shipping option
+  const shippingOption = request.shippingOption;
+  const newTotal = {
+    currency: 'USD',
+    label: 'Total due',
+    value: calculateNewTotal(shippingOption),
+  };
+  // `updateWith()` sends back updated payment details
+  e.updateWith({ total: newTotal });
+});
+```
+
+When the merchant responds, the promise that
+[`PaymentRequestEvent.changeShippingOption()`](https://w3c.github.io/payment-handler/#dom-paymentrequestevent-changeshippingoption)
+returned will resolve with a
+[`PaymentRequestDetailsUpdate`](https://w3c.github.io/payment-handler/#the-paymentrequestdetailsupdate)
+object.
+
+{% Label %}
+[payment handler] service-worker.js
+{% endLabel %}
+
+```js
+…
+        // Notify the merchant of the shipping option change
+        details = await payment_request_event.changeShippingOption(newOption);
+        // Provided the new payment details,
+        // send a message back to the frontend to update the UI
+        postMessage('UPDATE_REQUEST', details);
+        break;
+…
+```
+
+Use the object to update the UI on the frontend. See [Reflect the updated
+payment details](#reflect-the-updated-payment-details).
+
+## Reflect the updated payment details {: #reflect-the-updated-payment-details }
+
+Once the merchant finishes updating the payment details, the promises returned
+from `.changePaymentMethod()`, `.changeShippingAddress()` and
+`.changeShippingOption()` will resolve with a common
+[`PaymentRequestDetailsUpdate`](https://w3c.github.io/payment-handler/#the-paymentrequestdetailsupdate)
+object. The payment handler can use the result to reflect updated total price
+and shipping options to the UI.
+
+{% Aside %}
+ The `PaymentRequestDetailsUpdate` object is passed from the merchant and it
+ contains the exact information the merchant put in the `PaymentDetailsUpdate`
+ object via the Payment Request API. The best way to ensure that merchants give
+ you the information you expect is to provide good developer documentation, or
+ provide a JavaScript library to control the information, or both.
+{% endAside %}
+
+Merchants may return errors for a few reasons:
+
+* The payment method is not acceptable.
+* The shipping address is outside of their supported regions.
+* The shipping address contains invalid information.
+* The shipping option is not selectable for the provided shipping address or
+  some other reason.
+
+Use the following properties to reflect the error status:
+
+* **`error`**: Human readable error string. This is the best string to display
+  to customers.
+* **`shippingAddressErrors`**:
+  [`AddressErrors`](https://www.w3.org/TR/payment-request/#dom-addresserrors)
+  object that contains in-detail error string per address property. This is
+  useful if you want to open a form that lets the customer edit their address
+  and you need to point them directly to the invalid fields.
+* **`paymentMethodErrors`**: Payment-method-specific error object. You can ask
+  merchants to provide a structured error, but the Web Payments spec authors
+  recommend keeping it a simple string.
+
+## Sample code
+
+Most of sample codes you saw in this document were excerpts from the following
+working sample app:
+
+[https://paymenthandler-demo.glitch.me](https://paymenthandler-demo.glitch.me)
+
+{% Label %}
+[payment handler] service worker
+{% endLabel %}
+
+{% Glitch {
+  id: 'paymenthandler-demo',
+  path: 'public/service-worker.js',
+  previewSize: 0,
+  allow: []
+} %}
+
+{% Label %}
+[payment handler] frontend
+{% endLabel %}
+
+{% Glitch {
+  id: 'paymenthandler-demo',
+  path: 'public/pay.js',
+  previewSize: 0,
+  allow: []
+} %}
+
+To try it out:
+
+1. Go to [https://paymentrequest-demo.glitch.me/](https://paymentrequest-demo.glitch.me/).
+2. Go to the bottom of the page.
+3. Press **Add a payment button**.
+4. Enter `https://paymenthandler-demo.glitch.me` to the **Payment Method Identifier** field.
+5. Press **Pay** button next to the field.
diff --git a/src/site/content/en/payments/how-payment-ecosystem-works/index.md b/src/site/content/en/payments/how-payment-ecosystem-works/index.md
new file mode 100644
index 00000000000..6ed645b45d5
--- /dev/null
+++ b/src/site/content/en/payments/how-payment-ecosystem-works/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: How the payment ecosystem works
+subhead: |
+  Learn more about who is involved in the Web Payments ecosystem, how they interact with each other, and how you can participate.
+authors:
+  - agektmr
+date: 2018-09-10
+updated: 2021-09-14
+description: |
+  Learn more about who is involved in the Web Payments ecosystem, how they interact with each other, and how you can participate.
+tags:
+  - payments
+feedback:
+  - api
+---
+
+Let's see how the payment ecosystem works with Web Payments.
+
+## The anatomy of Web Payments
+
+_Web Payments_ comprises multiple web standards:
+
+*   **Payment Request API:** The [Payment Request
+    API](/how-payment-request-api-works/) enables fast and easy checkouts
+    through a native browser UI. It provides a consistent checkout flow while
+    reducing the need for users to enter their shipping and payment information
+    on every checkout.
+*   **Payment Handler API:** The [Payment Handler
+    API](/web-based-payment-apps-overview/) opens up the ecosystem to
+    payment providers by allowing their web-based payment applications to act as
+    payment methods on merchant websites through the standard Payment Request
+    API.
+*   **Payment Method Identifiers:** The [Payment Method
+    Identifiers](/setting-up-a-payment-method/#step-1-provide-the-payment-method-identifier)
+    defines how strings (`https://google.com/pay`,
+    `https://apple.com/apple-pay`, and so on) can be used to identify a payment
+    method. Along with standardized payment method identifiers, it allows anyone
+    to define their own payment method with URL-based payment method
+    identifiers.
+*   **Payment Method Manifest:** The [Payment Method
+    Manifest](/setting-up-a-payment-method/#step-2-serve-the-payment-method-manifest)
+    defines the machine-readable manifest file, known as a payment method
+    manifest, describing how a payment method participates in the payment
+    ecosystem, and how such files are to be used.
+
+## How the payment request process works
+
+There are typically four participants in an online transaction.
+
+<table>
+  <tr>
+   <th style="width:30%;">Players</th>
+   <th style="width:50%;">Description</th>
+   <th style="width:20%;">API usage</th>
+  </tr>
+  <tr>
+   <td>Customers</td>
+   <td>Users who go through a checkout flow to purchase item(s) online.
+   </td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>Merchants</td>
+   <td>Businesses selling products on their website.
+   </td>
+   <td>Payment Request API</td>
+  </tr>
+  <tr>
+   <td>Payment Service Providers (PSPs)</td>
+   <td>Third-party companies that actually process payments,
+   which involves charging customers and crediting merchants.
+   Alternatively called payment gateways or payment processors.
+   </td>
+   <td>Payment Request API</td>
+  </tr>
+  <tr>
+   <td>Payment Handlers</td>
+   <td>Third-party companies which provide applications that typically
+   store customers' payment credentials and on their authorization
+   provide them to merchants to process a transaction.
+   </td>
+   <td>Payment Handler API</td>
+  </tr>
+</table>
+
+<figure>
+  {% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/blpCp1iuXVShq3dw9LRH.png", alt="The typical sequence of events in processing a credit card payment on the web", width="800", height="532" %}
+  <figcaption><i>The typical sequence of events in processing a credit card
+  payment on the web</i></figcaption>
+</figure>
+
+1.  The Customer visits a merchant's website, adds items to a shopping cart, and
+    starts the checkout flow.
+1.  The Merchant needs the customer's payment credentials to process the
+    transaction. They present a payment request UI to the customer using [**the
+    Payment Request API**](/how-payment-request-api-works). The UI lists various
+    methods of payment specified by [**the Payment Method
+    Identifiers**](/setting-up-a-payment-method/#step-1-provide-the-payment-method-identifier).
+    The payment methods can include credit card numbers saved to the browser, or
+    payment handlers such as Google Pay, Samsung Pay, and similar. The Merchant can
+    optionally request the customer's shipping address and contact information.
+1.  If the customer chooses a payment method like Google Pay, Chrome launches
+    either a platform-native payment app or a web-based payment app. This step
+    is completely up to the payment handler's implementation, based on **the
+    Payment Method Manifest**. After the customer authorizes the payment, the
+    payment handler returns a response to the Payment Request API, which relays
+    it to the merchant site. (If the payment is push type such as bank
+    transfers, cryptocurrencies, the payment is already processed when the
+    merchant receives the response.)
+1.  The merchant site sends a payment credential to a PSP to process the payment
+    and initiate funds transfer. Usually, verifying the payment on the server
+    side is also required.
+1.  The PSP processes the payment, securely requesting a funds transfer from the
+    customer's bank or credit card issuer to the merchant, and then returns a
+    success or failure result to the merchant website.
+1.  The merchant website notifies the customer of the success or failure of the
+    transaction and displays the next step, for example, shipping the purchased item.
+
+## Caveat: PSP Reliance
+
+If you are a merchant and want to accept credit card payments, PSPs are an
+important link in the payment processing chain. Implementing the Payment Request
+API does not remove the need for a PSP.
+
+Merchants usually rely on a third-party PSP to perform payment processing for
+convenience and expense reasons. This is primarily because most PSPs maintain
+compliance with [PCI
+DSS](https://en.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard),
+an information security standard that regulates the safety of cardholder data.
+
+Because achieving and maintaining strict PCI DSS compliance can be expensive and
+difficult, most merchants find that relying on a compliant PSP avoids going
+through the certification process themselves. Some large and financially robust
+companies, however, obtain their own PCI DSS certification specifically to avoid
+such third-party reliance.
+
+It's especially important when you are handling a primary account number (PAN)
+as a payment credential, that is the number embossed on the card. Handling one
+with JavaScript requires [PCI SAQ
+A-EP](https://www.pcisecuritystandards.org/documents/PCI-DSS-v3_2-SAQ-A_EP.pdf)
+compliance.
+
+Thus, delegating payment processing to a PCI DSS-compliant PSP both simplifies
+the merchant site's requirements and ensures payment information integrity for
+the customer.
+
+## Next up
+
+Learn about the Payment Request API's fields and methods in [How the Payment
+Request API
+Works](/how-payment-request-api-works).
diff --git a/src/site/content/en/payments/how-payment-request-api-works/index.md b/src/site/content/en/payments/how-payment-request-api-works/index.md
new file mode 100644
index 00000000000..572e2e9708f
--- /dev/null
+++ b/src/site/content/en/payments/how-payment-request-api-works/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: How Payment Request API works
+subhead: |
+  Learn how the Payment Request API works at a high level.
+authors:
+  - agektmr
+date: 2018-09-10
+updated: 2022-01-31
+description: |
+  Learn how the Payment Request API works at a high level.
+tags:
+  - payments
+feedback:
+  - api
+---
+
+## Payment Request API
+
+When a customer tries to purchase something from your website, the site must ask
+the customer to provide payment information and, optionally, other information
+such as shipping preference. You can achieve this easily and quickly using the
+[Payment Request API (PR API)](https://w3c.github.io/payment-request/).
+
+## Basic structure
+
+Constructing a `PaymentRequest` object requires two parameters: _payment
+methods_ and _payment details_. In addition, a third _payment options_ parameter
+is optional. A basic request could be created like this:
+
+```javascript
+const request = new PaymentRequest(paymentMethods, paymentDetails);
+```
+
+Let's look at how each parameter is built and used.
+
+### Payment methods
+
+The first parameter, _paymentMethods_, is a list of supported payment methods in
+an array variable. Each element in the array comprises two components,
+`supportedMethods` and, optionally, `data`.
+
+For `supportedMethods`, the merchant needs to specify a [Payment Method
+Identifier](/setting-up-a-payment-method/#step-1-provide-the-payment-method-identifier)
+such as `https://bobbucks.dev/pay`. The existence and content of `data` depends on
+the content of `supportedMethods` and payment app provider's design.
+
+Both pieces of information should be provided by the payment app provider.
+
+```javascript
+// Supported payment methods
+const paymentMethods = [{
+  supportedMethods: 'https://bobbucks.dev/pay',
+  data: {
+    ... // Optional parameters defined by the payment app provider.
+  }
+}];
+```
+
+### Payment details
+
+The second parameter, _paymentDetails_, is passed as an object and specifies
+payment details for the transaction. It contains the required value `total`,
+which specifies the total amount due from the customer. This parameter can also
+optionally list the purchased items.
+
+In the example below, the optional purchased items list (just one item, in this
+case) is shown, as is the required total amount due. In both cases the currency
+unit is specified with each individual amount.
+
+```javascript
+const paymentDetails = {
+  displayItems: [{
+    label: 'Anvil L/S Crew Neck - Grey M x1',
+    amount: { currency: 'USD', value: '22.15' }
+  }],
+  total: {
+    label: 'Total due',
+    amount: { currency: 'USD', value : '22.15' }
+  }
+};
+```
+
+## Check whether the payment method is available
+
+Before invoking the payment procedure, the merchant can check whether the user and
+the environment are ready for making a payment.
+
+Calling `canMakePayment()` checks if the browser supports at
+least one payment method specified in the object.
+
+```js
+request.canMakePayment().then(result => {
+  if (result) {
+    // This browser supports the specified payment method.
+  } else {
+    // This browser does NOT support the specified payment method.
+  }
+}).catch(e => {
+  // An exception
+});
+```
+
+Learn more about [PaymentRequest.canMakePayment() on MDN](https://developer.mozilla.org/docs/Web/API/PaymentRequest/canMakePayment)
+
+## The `show()` method
+
+After setting the two parameters and creating the `request` object as shown
+above, you can call the `show()` method, which displays the payment app user
+interface.
+
+{% Aside 'warning' %}
+
+To call the `show()` method, you must add a [user
+activation](https://developer.chrome.com/blog/user-activation/).
+This means the call must be inside an event listener, such as
+`click`. Note that Chrome [enforces this constraint from version
+102](https://chromestatus.com/feature/5948593429020672).
+
+{% endAside %}
+
+```javascript
+request.show().then(response => {
+  // [process payment]
+  // send to a PSP etc.
+  response.complete('success');
+});
+```
+
+{% Aside %}
+
+`basic-card` payment method is deprecated from Chrome 100. If the browser doesn't
+support any of the specified payment methods, it will throw
+`NotSupportedError`. Make sure to first check the payment method availability with
+`canMakePayment()`.
+
+{% endAside %}
+
+How payment app user interface will look is completely up to the payment app
+provider. After the customer agrees to make a payment, a JSON object is passed
+to the merchant which contains all the required information to transfer money.
+The merchant can then send it to the PSP to process the payment.
+
+Finally, you may close the Payment Request UI by completing the process with
+`response.complete('success')` or `response.complete('fail')` depending on the
+result that the PSP returns.
+
+## Next up
+
+Learn more about [Web Payments](/payments/).
diff --git a/src/site/content/en/payments/index.md b/src/site/content/en/payments/index.md
new file mode 100644
index 00000000000..54ab1e2fe46
--- /dev/null
+++ b/src/site/content/en/payments/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: payments
+---
diff --git a/src/site/content/en/payments/index.njk b/src/site/content/en/payments/index.njk
deleted file mode 100644
index 256e612be04..00000000000
--- a/src/site/content/en/payments/index.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: payments
-tags:
-  - payments
----
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/123.svg b/src/site/content/en/payments/life-of-a-payment-transaction/123.svg
deleted file mode 100644
index bf9862d695b..00000000000
--- a/src/site/content/en/payments/life-of-a-payment-transaction/123.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 785.75 298">
-  <!-- svg-source:excalidraw -->
-  <defs>
-    <style>
-      @font-face {
-        font-family: "Virgil";
-        src: url("https://excalidraw.com/FG_Virgil.woff2");
-      }
-      @font-face {
-        font-family: "Cascadia";
-        src: url("https://excalidraw.com/Cascadia.woff2");
-      }
-    </style>
-  </defs>
-  <rect x="0" y="0" width="785.75" height="298" fill="#ffffff"></rect><g transform="translate(84.5 57) rotate(0 22 22)"><path d="M22 0 C26.47808701414956 -0.28088296247695804, 32.5303656520591 2.1170655694945624, 36.141327413103866 5.147022251382484 C39.75228917414863 8.176978933270407, 42.84723198790961 13.537577133224612, 43.66577056626858 18.17974009132753 C44.484309144627545 22.82190304943045, 43.40944678544163 28.917750405672923, 41.05255888325765 33 C38.695670981073675 37.082249594327074, 33.95394349256844 41.06103138107499, 29.524443153164714 42.67323765728999 C25.094942813760987 44.285443933504986, 18.905057186239016 44.285443933504986, 14.475556846835289 42.67323765728999 C10.046056507431562 41.06103138107499, 5.304329018926325 37.082249594327074, 2.947441116742347 33 C0.5905532145583692 28.917750405672923, -0.4843091446275407 22.82190304943045, 0.3342294337314229 18.17974009132753 C1.1527680120903865 13.537577133224612, 4.247710825851366 8.17697893327041, 7.8586725868961285 5.147022251382488 C11.469634347940891 2.117065569494566, 19.64311209781602 0.7845037085637477, 21.999999999999996 0 C24.356887902183974 -0.7845037085637477, 22 0.07333333333333475, 22 0.4400000000000013 M22 0 C26.47808701414956 -0.28088296247695804, 32.5303656520591 2.1170655694945624, 36.141327413103866 5.147022251382484 C39.75228917414863 8.176978933270407, 42.84723198790961 13.537577133224612, 43.66577056626858 18.17974009132753 C44.484309144627545 22.82190304943045, 43.40944678544163 28.917750405672923, 41.05255888325765 33 C38.695670981073675 37.082249594327074, 33.95394349256844 41.06103138107499, 29.524443153164714 42.67323765728999 C25.094942813760987 44.285443933504986, 18.905057186239016 44.285443933504986, 14.475556846835289 42.67323765728999 C10.046056507431562 41.06103138107499, 5.304329018926325 37.082249594327074, 2.947441116742347 33 C0.5905532145583692 28.917750405672923, -0.4843091446275407 22.82190304943045, 0.3342294337314229 18.17974009132753 C1.1527680120903865 13.537577133224612, 4.247710825851366 8.17697893327041, 7.8586725868961285 5.147022251382488 C11.469634347940891 2.117065569494566, 19.64311209781602 0.7845037085637477, 21.999999999999996 0 C24.356887902183974 -0.7845037085637477, 22 0.07333333333333475, 22 0.4400000000000013" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(43.25 124) rotate(0 24.5 24)"><text x="24.5" y="39" font-family="Helvetica" font-size="36px" fill="#000000" text-anchor="middle" style="white-space: pre;">🐭</text></g><g><g transform="translate(133.0609817547354 169.16819062903522) rotate(0 82.0851143185048 -1.192592858150249)"><path d="M0.07516695521771899 -0.4159046854823828 C27.46740851397933 -0.4269813816652364, 137.9335447085709 -0.3801709631610247, 165.5147377596421 -0.31376238407532364 M-1.344509122632444 -1.6798585906997323 C25.776279531189516 -2.014109628799624, 136.81324463923136 -2.044818053707812, 164.49577901296297 -2.0714233322251836" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(133.0609817547354 169.16819062903522) rotate(0 82.0851143185048 -1.192592858150249)"><path d="M135.61975929266382 7.985830050843077 C148.6748019235603 3.967709691342593, 160.35087174048311 -1.5452445907702401, 165.36209229722598 -0.2628786722380916 M135.75314835491199 8.809253832275289 C145.7905842291241 5.644330230731819, 153.14708551229663 1.302072071627574, 165.306162076704 -2.070553489047686" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(133.0609817547354 169.16819062903522) rotate(0 82.0851143185048 -1.192592858150249)"><path d="M135.60390935181078 -12.535372427696387 C148.6229496721537 -8.411222427107166, 160.30530833404626 -5.781896420865344, 165.36209229722598 -0.2628786722380916 M135.73729841405896 -11.711948646264176 C145.76049288813715 -8.454352147830617, 153.12195463397154 -6.3742103992280486, 165.306162076704 -2.070553489047686" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g transform="translate(130.25 112) rotate(0 64.5 24)"><text x="0" y="19" font-family="Cascadia" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;">initiate</text><text x="0" y="43" font-family="Cascadia" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;">transaction</text></g><g><g transform="translate(106.5 91) rotate(0 -1.479750000000081 -12.605249999999998)"><path d="M0 0 C0.16666666666666666 -4, 0.8333333333333334 -20.5, 1 -24 C1.1666666666666667 -27.5, 1.8333333333333335 -22.666666666666668, 1 -21 C0.16666666666666663 -19.333333333333332, -3.1666666666666665 -15.5, -4 -14 C-4.833333333333333 -12.5, -4 -12.333333333333334, -4 -12 M0 0 C0.16666666666666666 -4, 0.8333333333333334 -20.5, 1 -24 C1.1666666666666667 -27.5, 1.8333333333333335 -22.666666666666668, 1 -21 C0.16666666666666663 -19.333333333333332, -3.1666666666666665 -15.5, -4 -14 C-4.833333333333333 -12.5, -4 -12.333333333333334, -4 -12" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g stroke-opacity="0.6" fill-opacity="0.6" transform="translate(394.25 127) rotate(0 70 18.5)"><path d="M3.240981739014387 -2.570476036518812 L140.55124120041728 0.9639853425323963 L136.5364693813026 40.91350485756993 L-3.207020241767168 38.9259096570313" stroke="none" stroke-width="0" fill="#fab005"></path><path d="M2.0074762292206287 -1.1149392910301685 C38.82189307920635 2.3783493880182505, 84.4213631823659 -2.5865490790456533, 143.6946387477219 -0.09300871565937996 M1.234795829281211 0.8294752333313227 C35.91599055752158 -3.7465456761419773, 71.25638595409691 -1.5442335046827793, 138.43320961855352 1.4614971969276667 M141.53604938462377 2.639845173805952 C143.452918669004 8.332765562739224, 138.88034345747903 24.52743689771742, 136.84115089848638 36.19502083584666 M141.62054415605962 1.2869571540504694 C138.22432415788992 9.709368744213135, 138.37648796146735 20.845290847681465, 138.87909855507314 37.96635193563998 M140.5714470334351 37.31975094601512 C109.27791815437376 34.77024552635849, 70.68179604411125 34.032222364470364, -3.5942575745284557 34.59261993691325 M139.7872735466808 36.48137182928622 C94.55015988647938 36.8962245926261, 46.25630451180041 37.050223623216155, 1.4423333015292883 35.87079812027514 M1.1059787459671497 39.700046580284834 C-1.7909510454721749 28.28213222930208, 3.0625525393895803 12.105959058739245, 1.7440041489899158 0.8242758922278881 M-0.3988660965114832 35.33465529419482 C-0.03023929020389915 30.40311875147745, 1.7490340409614147 21.731113229878247, -0.47382686473429203 -0.09658758901059628" stroke="#d9480f" stroke-width="2" fill="none"></path></g><g transform="translate(378.25 133.5) rotate(0 60 11.5)"><text x="60" y="18" font-family="Helvetica" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;">         BobPay</text></g><g transform="translate(302.25 10) rotate(0 160.5 139)"><path d="M-2.258634978893947 1.8257370102553365 C99.22364803927911 -0.391631463974605, 200.59632493254983 1.1846292665460247, 319.8661750860383 -1.5913306450577733 M-0.2800230555336475 -0.8684464647002695 C124.03165923808922 -1.1898722276482223, 248.89320083400702 -0.8387303404915452, 320.9519526043586 -0.9690510047927378 M324.05397190967034 -2.032658702321507 C322.177211376942 86.77854418695277, 320.21175711234997 168.96115598552728, 320.1151325408454 275.9836983503939 M320.005810041353 -0.25223304826021115 C323.59174346570217 89.96778660313765, 323.6057195225759 179.49177289438003, 320.05624427957673 279.17390424890846 M322.88393036976936 277.3433207378615 C237.75091370790776 277.1863288897483, 155.45301355239377 276.6773109181205, 0.9475635192719458 276.9718739761031 M321.90747932477336 277.7309277348267 C221.30119017089928 276.67595120723854, 122.95153335369508 276.04897556890694, 0.20673874706797596 277.5082293182694 M-1.579598089062689 280.25587805492745 C0.9737499100423639 176.5476436200333, 0.15914661926320273 78.19168480488861, -2.6012498520740013 0.7322785358625157 M0.1121883763877265 279.06108141194665 C2.335936479970206 219.9614240998302, 0.4889429655869142 160.7996939356149, 1.2477189836528888 -0.9895864913958778" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(660.75 172) rotate(0 57.5 16)"><text x="57.5" y="25" font-family="Helvetica" font-size="28px" fill="#000000" text-anchor="middle" style="white-space: pre;">customer</text></g><g><g transform="translate(547.7551140492778 193.94851186797018) rotate(0 -8.335149784497958 -18.71864495495332)"><path d="M0.09256271682679662 -0.7050960537046194 C-2.4784984881368923 -7.331894048551711, -13.382590617581034 -32.488567217191026, -16.396722424961716 -38.976414482668 M-1.3179805861786007 1.5391245727613567 C-3.865172733248537 -4.954379832732172, -13.813582164204444 -30.751514275756932, -16.76286228582272 -37.45363810416306" stroke="#000000" stroke-width="4" fill="none"></path></g><g transform="translate(547.7551140492778 193.94851186797018) rotate(0 -8.335149784497958 -18.71864495495332)"><path d="M-3.5791558498150007 -19.805152610222663 C-5.70034347962313 -25.915874183394937, -9.939845316281529 -26.778872954792007, -15.52806645654151 -36.62416287083174 M-1.9246765706321494 -22.43586717480686 C-5.594745847238963 -26.2093078473752, -11.039123744618829 -30.548414099646862, -16.37884993966678 -36.793676810711574" stroke="#000000" stroke-width="4" fill="none"></path></g><g transform="translate(547.7551140492778 193.94851186797018) rotate(0 -8.335149784497958 -18.71864495495332)"><path d="M-17.09528626455802 -14.27222173747127 C-16.290754419488717 -21.605839302325094, -17.568371078946765 -23.681308317468933, -15.52806645654151 -36.62416287083174 M-15.440806985375167 -16.902936302055465 C-15.29263776435635 -22.132217307605817, -16.95318296971054 -28.020264275646163, -16.37884993966678 -36.793676810711574" stroke="#000000" stroke-width="4" fill="none"></path></g></g><g transform="translate(332.25 97) rotate(0 23 23)"><path d="M23 0 C27.681636423883628 -0.29365036986227455, 34.0090186362436 2.2132958226534054, 37.7841150227904 5.380977808263506 C41.5592114093372 8.548659793873606, 44.7948334419055 14.152921548371186, 45.65057831928078 19.0060919136606 C46.50632319665606 23.859262278950016, 45.38260345750716 30.232193605930785, 42.918584287042094 34.5 C40.45456511657703 38.76780639406922, 35.49730456041246 42.92744189839658, 30.866463296490384 44.61293027807589 C26.235622032568305 46.29841865775521, 19.7643779674317 46.29841865775521, 15.13353670350962 44.61293027807589 C10.50269543958754 42.92744189839658, 5.545434883422978 38.76780639406922, 3.0814157129579094 34.5 C0.6173965424928416 30.232193605930785, -0.5063231966560661 23.859262278950013, 0.34942168071921387 19.006091913660597 C1.205166558094494 14.152921548371182, 4.440788590662791 8.54865979387361, 8.215884977209589 5.380977808263509 C11.990981363756386 2.2132958226534094, 20.535980829534928 0.8201629680439181, 22.999999999999996 0 C25.464019170465065 -0.8201629680439181, 23 0.07666666666666738, 23 0.46000000000000085 M23 0 C27.681636423883628 -0.29365036986227455, 34.0090186362436 2.2132958226534054, 37.7841150227904 5.380977808263506 C41.5592114093372 8.548659793873606, 44.7948334419055 14.152921548371186, 45.65057831928078 19.0060919136606 C46.50632319665606 23.859262278950016, 45.38260345750716 30.232193605930785, 42.918584287042094 34.5 C40.45456511657703 38.76780639406922, 35.49730456041246 42.92744189839658, 30.866463296490384 44.61293027807589 C26.235622032568305 46.29841865775521, 19.7643779674317 46.29841865775521, 15.13353670350962 44.61293027807589 C10.50269543958754 42.92744189839658, 5.545434883422978 38.76780639406922, 3.0814157129579094 34.5 C0.6173965424928416 30.232193605930785, -0.5063231966560661 23.859262278950013, 0.34942168071921387 19.006091913660597 C1.205166558094494 14.152921548371182, 4.440788590662791 8.54865979387361, 8.215884977209589 5.380977808263509 C11.990981363756386 2.2132958226534094, 20.535980829534928 0.8201629680439181, 22.999999999999996 0 C25.464019170465065 -0.8201629680439181, 23 0.07666666666666738, 23 0.46000000000000085" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(552.25 231) rotate(0 23 23)"><path d="M23 0 C27.681636423883628 -0.29365036986227455, 34.0090186362436 2.2132958226534054, 37.7841150227904 5.380977808263506 C41.5592114093372 8.548659793873606, 44.7948334419055 14.152921548371186, 45.65057831928078 19.0060919136606 C46.50632319665606 23.859262278950016, 45.38260345750716 30.232193605930785, 42.918584287042094 34.5 C40.45456511657703 38.76780639406922, 35.49730456041246 42.92744189839658, 30.866463296490384 44.61293027807589 C26.235622032568305 46.29841865775521, 19.7643779674317 46.29841865775521, 15.13353670350962 44.61293027807589 C10.50269543958754 42.92744189839658, 5.545434883422978 38.76780639406922, 3.0814157129579094 34.5 C0.6173965424928416 30.232193605930785, -0.5063231966560661 23.859262278950013, 0.34942168071921387 19.006091913660597 C1.205166558094494 14.152921548371182, 4.440788590662791 8.54865979387361, 8.215884977209589 5.380977808263509 C11.990981363756386 2.2132958226534094, 20.535980829534928 0.8201629680439181, 22.999999999999996 0 C25.464019170465065 -0.8201629680439181, 23 0.07666666666666738, 23 0.46000000000000085 M23 0 C27.681636423883628 -0.29365036986227455, 34.0090186362436 2.2132958226534054, 37.7841150227904 5.380977808263506 C41.5592114093372 8.548659793873606, 44.7948334419055 14.152921548371186, 45.65057831928078 19.0060919136606 C46.50632319665606 23.859262278950016, 45.38260345750716 30.232193605930785, 42.918584287042094 34.5 C40.45456511657703 38.76780639406922, 35.49730456041246 42.92744189839658, 30.866463296490384 44.61293027807589 C26.235622032568305 46.29841865775521, 19.7643779674317 46.29841865775521, 15.13353670350962 44.61293027807589 C10.50269543958754 42.92744189839658, 5.545434883422978 38.76780639406922, 3.0814157129579094 34.5 C0.6173965424928416 30.232193605930785, -0.5063231966560661 23.859262278950013, 0.34942168071921387 19.006091913660597 C1.205166558094494 14.152921548371182, 4.440788590662791 8.54865979387361, 8.215884977209589 5.380977808263509 C11.990981363756386 2.2132958226534094, 20.535980829534928 0.8201629680439181, 22.999999999999996 0 C25.464019170465065 -0.8201629680439181, 23 0.07666666666666738, 23 0.46000000000000085" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(314.25 18) rotate(0 5 5)"><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="none" stroke-width="0" fill="#fa5252"></path><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(333.25 18) rotate(0 5 5)"><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="none" stroke-width="0" fill="#fab005"></path><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(351.25 18) rotate(0 5 5)"><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="none" stroke-width="0" fill="#40c057"></path><path d="M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964 M5 0 C6.017747048670354 -0.06383703692658142, 7.393264920922523 0.48115126579421874, 8.213938048432697 1.16977778440511 C9.03461117594287 1.8584043030160013, 9.738007269979457 3.0767220757328664, 9.92403876506104 4.131759111665348 C10.110070260142622 5.186796147597829, 9.865783360327644 6.572216001289301, 9.330127018922195 7.5 C8.794470677516745 8.427783998710698, 7.7168053392201 9.33205258660795, 6.710100716628344 9.69846310392954 C5.703396094036588 10.064873621251131, 4.296603905963413 10.064873621251133, 3.2898992833716565 9.698463103929543 C2.2831946607799 9.332052586607952, 1.2055293224832557 8.4277839987107, 0.6698729810778064 7.5 C0.13421663967235697 6.572216001289301, -0.11007026014262236 5.186796147597829, 0.07596123493896023 4.131759111665348 C0.2619927300205428 3.0767220757328664, 0.9653888240571288 1.8584043030160018, 1.786061951567302 1.1697777844051105 C2.6067350790774753 0.4811512657942192, 4.464343658594549 0.17829629740085182, 4.999999999999999 0 C5.535656341405449 -0.17829629740085182, 5 0.016666666666666316, 5 0.09999999999999964" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(552.25 192) rotate(0 20 16)"><text x="20" y="23" font-family="Virgil" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;">click</text></g><g><g transform="translate(593.25 199) rotate(0 5 -2.5)"><path d="M0 0 C1.6666666666666667 -0.8333333333333334, 8.333333333333334 -4.166666666666667, 10 -5 M0 0 C1.6666666666666667 -0.8333333333333334, 8.333333333333334 -4.166666666666667, 10 -5" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(597.25 210) rotate(0 5.5 -0.5)"><path d="M0 0 C1.8333333333333333 -0.16666666666666666, 9.166666666666666 -0.8333333333333334, 11 -1 M0 0 C1.8333333333333333 -0.16666666666666666, 9.166666666666666 -0.8333333333333334, 11 -1" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(594.25 218) rotate(0 4.5 3)"><path d="M0 0 C1.5 1, 7.5 5, 9 6 M0 0 C1.5 1, 7.5 5, 9 6" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(546.25 207) rotate(0 -4.5 -2.5)"><path d="M0 0 C-1.5 -0.8333333333333334, -7.5 -4.166666666666667, -9 -5 M0 0 C-1.5 -0.8333333333333334, -7.5 -4.166666666666667, -9 -5" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(547.25 215) rotate(0 -4 0)"><path d="M0 0 C-1.3333333333333333 0, -6.666666666666667 0, -8 0 M0 0 C-1.3333333333333333 0, -6.666666666666667 0, -8 0" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(551.25 220) rotate(0 -3 2)"><path d="M0 0 C-1 0.6666666666666666, -5 3.3333333333333335, -6 4 M0 0 C-1 0.6666666666666666, -5 3.3333333333333335, -6 4" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(348.25 115) rotate(0 6.4734999999999445 5.347500000000004)"><path d="M0 0 C0 -0.6666666666666666, -1 -3.1666666666666665, 0 -4 C1 -4.833333333333333, 4.5 -5.166666666666667, 6 -5 C7.5 -4.833333333333333, 8.666666666666666 -4.666666666666667, 9 -3 C9.333333333333334 -1.3333333333333333, 9.833333333333334 2, 8 5 C6.166666666666667 8, -3.166666666666667 13.333333333333334, -2 15 C-0.8333333333333333 16.666666666666668, 12.166666666666666 15, 15 15 M0 0 C0 -0.6666666666666666, -1 -3.1666666666666665, 0 -4 C1 -4.833333333333333, 4.5 -5.166666666666667, 6 -5 C7.5 -4.833333333333333, 8.666666666666666 -4.666666666666667, 9 -3 C9.333333333333334 -1.3333333333333333, 9.833333333333334 2, 8 5 C6.166666666666667 8, -3.166666666666667 13.333333333333334, -2 15 C-0.8333333333333333 16.666666666666668, 12.166666666666666 15, 15 15" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g><g transform="translate(569.25 244) rotate(0 6.013000000000034 10.600000000000001)"><path d="M0 0 C0 -0.16666666666666666, -1.1666666666666667 -0.6666666666666667, 0 -1 C1.1666666666666667 -1.3333333333333333, 5.333333333333333 -2.6666666666666665, 7 -2 C8.666666666666666 -1.3333333333333335, 9.5 1.6666666666666667, 10 3 C10.5 4.333333333333333, 10.833333333333334 5, 10 6 C9.166666666666666 7, 6.166666666666667 8.5, 5 9 C3.833333333333333 9.5, 1.8333333333333333 9, 3 9 C4.166666666666667 9, 10.333333333333334 8.5, 12 9 C13.666666666666666 9.5, 12.5 11.5, 13 12 C13.5 12.5, 14.833333333333334 10.666666666666666, 15 12 C15.166666666666666 13.333333333333334, 14.5 18.5, 14 20 C13.5 21.5, 12.5 20.5, 12 21 C11.5 21.5, 12.666666666666666 22.666666666666668, 11 23 C9.333333333333334 23.333333333333332, 4.333333333333334 23.666666666666668, 2 23 C-0.3333333333333335 22.333333333333332, -2.1666666666666665 19.666666666666668, -3 19 M0 0 C0 -0.16666666666666666, -1.1666666666666667 -0.6666666666666667, 0 -1 C1.1666666666666667 -1.3333333333333333, 5.333333333333333 -2.6666666666666665, 7 -2 C8.666666666666666 -1.3333333333333335, 9.5 1.6666666666666667, 10 3 C10.5 4.333333333333333, 10.833333333333334 5, 10 6 C9.166666666666666 7, 6.166666666666667 8.5, 5 9 C3.833333333333333 9.5, 1.8333333333333333 9, 3 9 C4.166666666666667 9, 10.333333333333334 8.5, 12 9 C13.666666666666666 9.5, 12.5 11.5, 13 12 C13.5 12.5, 14.833333333333334 10.666666666666666, 15 12 C15.166666666666666 13.333333333333334, 14.5 18.5, 14 20 C13.5 21.5, 12.5 20.5, 12 21 C11.5 21.5, 12.666666666666666 22.666666666666668, 11 23 C9.333333333333334 23.333333333333332, 4.333333333333334 23.666666666666668, 2 23 C-0.3333333333333335 22.333333333333332, -2.1666666666666665 19.666666666666668, -3 19" stroke="#000000" stroke-width="2" fill="none"></path></g></g><g transform="translate(306.25 36) rotate(0 158 17.5)"><path d="M0 0 L316 0 L316 35 L0 35" stroke="none" stroke-width="0" fill="#fa5252"></path><path d="M0 0 C70.04471197314561 0, 140.08942394629122 0, 316 0 M0 0 C69.84509209804237 0, 139.69018419608474 0, 316 0 M316 0 C316 8.538422471377999, 316 17.076844942755997, 316 35 M316 0 C316 7.355024622287602, 316 14.710049244575204, 316 35 M316 35 C198.41113383583723 35, 80.82226767167447 35, 0 35 M316 35 C207.42236722297966 35, 98.84473444595932 35, 0 35 M0 35 C0 25.32919701328501, 0 15.658394026570022, 0 0 M0 35 C0 27.85251162806526, 0 20.705023256130517, 0 0" stroke="#000000" stroke-width="2" fill="none"></path></g><g transform="translate(318.75 35) rotate(0 39.5 16)"><text x="39.5" y="23" font-family="Virgil" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;">🧀 shop</text></g><g transform="translate(10 174) rotate(0 58.5 16)"><text x="58.5" y="25" font-family="Helvetica" font-size="28px" fill="#000000" text-anchor="middle" style="white-space: pre;">merchant</text></g><g transform="translate(717.5 145) rotate(0 0 0)"><text x="0" y="28" font-family="Helvetica" font-size="36px" fill="#000000" text-anchor="middle" style="white-space: pre;"></text></g><g transform="translate(693.5 130) rotate(0 18 25)"><text x="0" y="36" font-family="Virgil" font-size="36px" fill="#000000" text-anchor="start" style="white-space: pre;">🐻</text></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/4.svg b/src/site/content/en/payments/life-of-a-payment-transaction/4.svg
deleted file mode 100644
index 6bfbe6076c4..00000000000
--- a/src/site/content/en/payments/life-of-a-payment-transaction/4.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 670.875 366"><defs><style>@font-face{font-family:&quot;Virgil&quot;;src:url(&quot;https://excalidraw.com/FG_Virgil.woff2&quot;)}@font-face{font-family:&quot;Cascadia&quot;;src:url(&quot;https://excalidraw.com/Cascadia.woff2&quot;)}</style></defs><path fill="#fff" d="M0 0h670.875v366H0z"/><path d="M182.375 104h316v35h-316" stroke-width="0" fill="#fa5252"/><path d="M182.375 104h316m-316 0h316m0 0v35m0-35v35m0 0h-316m316 0h-316m0 0v-35m0 35v-35M175.68 78.695c113.527 3.207 227.462 1.757 325.545.124m-323.004.432c122.712 1.894 247.193.659 322.126-2.31m.725 3.575c.474 81.804 2.065 165.188-.542 275.946m-.678-277.993c-3.189 100.743-1.08 204.416-.565 278.373m2.055-3.584c-126.65-1.13-247.535 3.075-322.441 2.997m320.124-1.345c-66.718.28-133.35 1.504-319.687.025m.776 1.806c-1.203-109.26-5.69-213.199.32-276.936m-2.455 277.714c2.82-63.207 1.465-124.022 1.292-279.954" stroke="#000" stroke-width="2" fill="none"/><g stroke-opacity=".3" fill-opacity=".3"><path d="M180.625 103h316v252h-316" stroke-width="0" fill="#868e96"/><path d="M180.625 103h316m-316 0h316m0 0v252m0-252v252m0 0h-316m316 0h-316m0 0V103m0 252V103" stroke="#000" stroke-width="2" fill="none"/></g><path d="M251.625 160h189v173h-189" stroke-width="0" fill="#fff"/><path d="M251.625 160h189m-189 0h189m0 0v173m0-173v173m0 0h-189m189 0h-189m0 0V160m0 173V160" stroke="#000" stroke-width="2" fill="none"/><text x="18" y="36" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(588.375 210)">🐻</text><text x="57.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(545.875 264)">customer</text><path d="M195.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fa5252"/><path d="M195.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M214.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fab005"/><path d="M214.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M232.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#40c057"/><path d="M232.375 86c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><text x="39.5" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(194.875 103)">🧀 shop</text><g stroke-opacity=".7" fill-opacity=".7"><path d="M310.852 290.928l72.797 5.572-4.439 28.728-68.205-.903" stroke-width="0" fill="#fab005"/><path d="M314.457 291.028c14.427 3.695 26.774 4.915 65.383 2.198m-67.331-1.272c25.906.24 52.838 1.002 70.666 2.409m.918-5.14c-4.383 13.329-.923 19.245.968 36.09m-4.15-33.594c.09 10.16 3.102 19.104 2.146 28.451m-3.303 1.435c-26.253.496-48.838 2.793-71.93 3.75m75.532-2.332c-25.002-2.101-46.549 1.127-71.309-2.666m2.773 4.891c-7.217-11.424-7.873-16.732-5.075-34.75m2.052 30.859c-1.622-6.286.754-16.699-2.6-27.7" stroke="#d9480f" stroke-width="2" fill="none"/></g><text x="18.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(326.375 298.5)">PAY</text><g font-family="Helvetica" font-size="20"><text y="18" style="white-space:pre" transform="translate(270.875 169.5)">Shipping options</text><text y="41" style="white-space:pre" transform="translate(270.875 169.5)">Free - $0</text><text y="64" style="white-space:pre" transform="translate(270.875 169.5)">Express - $5</text></g><text x="48" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(296.375 260.5)">TOTAL: $5</text><path d="M402.875 196h15.057v15.057h-15.057" stroke-width="0" fill="#ced4da"/><path d="M402.875 196h15.057m-15.057 0h15.057m0 0v15.057m0-15.057v15.057m0 0h-15.057m15.057 0h-15.057m0 0V196m0 15.057V196" stroke="#000" stroke-width="2" fill="none"/><path d="M402.318 218.814h15.057v15.057h-15.057" stroke-width="0" fill="#ced4da"/><path d="M402.318 218.814h15.057m-15.057 0h15.057m0 0v15.057m0-15.057v15.057m0 0h-15.057m15.057 0h-15.057m0 0v-15.057m0 15.057v-15.057" stroke="#000" stroke-width="2" fill="none"/><g><text y="14" font-family="Helvetica" font-size="16" style="white-space:pre" transform="translate(406.404 193.529)">x</text></g><g><text x="24.5" y="39" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(44.25 215)">🐭</text></g><g><text x="58.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(10 265)">merchant</text></g><g><path d="M329.5 10c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44m0-.44c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M327.5 18c-1 3.167-5 16-6 19s-3.5-.333 0-1 17.5-2.5 21-3m-15-15c-1 3.167-5 16-6 19s-3.5-.333 0-1 17.5-2.5 21-3" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M335.5 28l-2 18m2-18l-2 18" stroke="#000" stroke-width="2" fill="none"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/5.svg b/src/site/content/en/payments/life-of-a-payment-transaction/5.svg
deleted file mode 100644
index 3440b841867..00000000000
--- a/src/site/content/en/payments/life-of-a-payment-transaction/5.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 776.5 702"><defs><style>@font-face{font-family:&quot;Virgil&quot;;src:url(&quot;https://excalidraw.com/FG_Virgil.woff2&quot;)}@font-face{font-family:&quot;Cascadia&quot;;src:url(&quot;https://excalidraw.com/Cascadia.woff2&quot;)}</style></defs><path fill="#fff" d="M0 0h776.5v702H0z"/><text x="24.5" y="39" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(44 532)">🐭</text><text x="58.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(10 580)">merchant</text><path d="M114.062 577.934c26.558-.054 132.595.435 158.703.384m-159.689-1.63c26.479-.41 132.67-.407 159.346-.011" stroke="#000" stroke-width="2" fill="none"/><path d="M243.53 588.686c11.22-6.885 19.148-8.324 27.505-12.13m-26.358 9.975c9.08-2.111 16.253-5.698 27.573-9.024" stroke="#000" stroke-width="2" fill="none"/><path d="M243.654 568.165c11.236-.289 19.124 4.868 27.381 8.39m-26.234-10.545c8.882 4.193 16.017 6.909 27.45 11.497" stroke="#000" stroke-width="2" fill="none"/><g font-family="Cascadia" font-size="20"><text y="19" style="white-space:pre" transform="translate(138 496.5)">update</text><text y="43" style="white-space:pre" transform="translate(138 496.5)">payment</text><text y="67" style="white-space:pre" transform="translate(138 496.5)">details</text></g><path d="M302.5 440h316v35h-316" stroke-width="0" fill="#fa5252"/><path d="M302.5 440h316m-316 0h316m0 0v35m0-35v35m0 0h-316m316 0h-316m0 0v-35m0 35v-35M297.3 416.365c101.41-7.382 209.392-5.396 323.855-4.362m-322.144 2.892c82.7-3.961 166.593-4.27 321.135.458m1.057-2.888c-4.884 55.475-6.678 110.468-2.163 277.048m1.044-274.512c2.876 60.438 1.934 119.313.459 277.608m.203-2.02c-104.33.064-209.92-2.039-321.82.693m321.948-.456c-121.727 4.124-243.207 5.504-322.515-.125m-1.233-.689c1.838-109.205 3.073-216.294 4.285-276.038m-2.793 277.992c-1.315-81.576.025-159.62-.082-278.915" stroke="#000" stroke-width="2" fill="none"/><g stroke-opacity=".3" fill-opacity=".3"><path d="M300.75 439h316v252h-316" stroke-width="0" fill="#868e96"/><path d="M300.75 439h316m-316 0h316m0 0v252m0-252v252m0 0h-316m316 0h-316m0 0V439m0 252V439" stroke="#000" stroke-width="2" fill="none"/></g><path d="M371.75 496h189v173h-189" stroke-width="0" fill="#fff"/><path d="M371.75 496h189m-189 0h189m0 0v173m0-173v173m0 0h-189m189 0h-189m0 0V496m0 173V496" stroke="#000" stroke-width="2" fill="none"/><path d="M315.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fa5252"/><path d="M315.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M334.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fab005"/><path d="M334.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M352.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#40c057"/><path d="M352.5 422c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><text x="39.5" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(315 439)">🧀 shop</text><g stroke-opacity=".7" fill-opacity=".7"><path d="M434.682 625.022l69.5 7.894.457 24.669-72.282 1.554" stroke-width="0" fill="#fab005"/><path d="M431.117 625.512c23.351 6.317 52.232.478 68.693.592m-69.94 1.882c25.136.606 50.678-.748 74.735-.741m1.026-.628c-3.65 14.891-.672 23-4.33 30.127m1.743-27.56c-1.799 10.115-.851 21.379.553 30.745m-4.529 1.905c-24.731-2.967-57.155 1.272-70.89-4.62m74.083-.071c-16.461 1.553-36.053-.543-70.857 1.068m-3.17 2.41c6.508-11.452.313-24.178 4.967-32.908m-1.024 30.94c-1.923-9.72.019-18.553-.187-28.92" stroke="#d9480f" stroke-width="2" fill="none"/></g><text x="18.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(446.5 634.5)">PAY</text><g font-family="Helvetica" font-size="20"><text y="18" style="white-space:pre" transform="translate(391 505.5)">Shipping options</text><text y="41" style="white-space:pre" transform="translate(391 505.5)">Free - $0</text><text y="64" style="white-space:pre" transform="translate(391 505.5)">Express - $5</text></g><text x="53.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(412 596.5)">TOTAL: $10</text><path d="M523 532h15.057v15.057H523" stroke-width="0" fill="#ced4da"/><path d="M523 532h15.057M523 532h15.057m0 0v15.057m0-15.057v15.057m0 0H523m15.057 0H523m0 0V532m0 15.057V532" stroke="#000" stroke-width="2" fill="none"/><path d="M522.443 554.814H537.5v15.057h-15.057" stroke-width="0" fill="#ced4da"/><path d="M522.443 554.814H537.5m-15.057 0H537.5m0 0v15.057m0-15.057v15.057m0 0h-15.057m15.057 0h-15.057m0 0v-15.057m0 15.057v-15.057" stroke="#000" stroke-width="2" fill="none"/><text y="14" font-family="Helvetica" font-size="16" style="white-space:pre" transform="translate(526.529 552.529)">x</text><path d="M286.143 245.717c-28.353.082-141.688-.067-169.834-.038m168.384-1.156c-27.98-.184-137.988-.475-165.99-.55" stroke="#000" stroke-width="2" fill="none"/><path d="M146.451 232.781c-7.44 4.908-16.254 6.043-28.82 10.972m29.682-10.317c-10.738 3.712-22.37 9.321-28.367 11.089" stroke="#000" stroke-width="2" fill="none"/><path d="M146.395 253.302c-7.284-1.76-16.079-7.29-28.764-9.55m29.626 10.205c-10.615-4.282-22.225-6.667-28.31-9.432" stroke="#000" stroke-width="2" fill="none"/><g font-family="Cascadia" font-size="20"><text y="19" style="white-space:pre" transform="translate(163.625 163.5)">shipping</text><text y="43" style="white-space:pre" transform="translate(163.625 163.5)">option</text><text y="67" style="white-space:pre" transform="translate(163.625 163.5)">change</text></g><path d="M299.75 100h316v35h-316" stroke-width="0" fill="#fa5252"/><path d="M299.75 100h316m-316 0h316m0 0v35m0-35v35m0 0h-316m316 0h-316m0 0v-35m0 35v-35M296.729 73.45C402.436 79.251 506.334 75.656 614.12 72M297.09 75.05c110.32.23 223.436-1.586 318.49-2.324m-1.031 3.216c-.675 57-2.559 113.318 4.287 277.834m-1.897-280.912c1.968 84.419-.564 165.004-1.173 280.023m1.334-2.654c-120.899 1.532-234.862 4.398-320.597 1.39m321.153-.564c-88.089-4.414-177.287-3.932-320.775 1.886m-3.631.582c.092-58.896.402-118.562 2.453-278.069m-.603 276.76c3.08-73.963 1.044-146.575 1.973-278.44" stroke="#000" stroke-width="2" fill="none"/><g stroke-opacity=".3" fill-opacity=".3"><path d="M298 99h316v252H298" stroke-width="0" fill="#868e96"/><path d="M298 99h316m-316 0h316m0 0v252m0-252v252m0 0H298m316 0H298m0 0V99m0 252V99" stroke="#000" stroke-width="2" fill="none"/></g><path d="M369 156h189v173H369" stroke-width="0" fill="#fff"/><path d="M369 156h189m-189 0h189m0 0v173m0-173v173m0 0H369m189 0H369m0 0V156m0 173V156" stroke="#000" stroke-width="2" fill="none"/><path d="M312.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fa5252"/><path d="M312.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M331.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fab005"/><path d="M331.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M349.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#40c057"/><path d="M349.75 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><text x="20" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(564.75 247)">click</text><path d="M605.75 254l10-5m-10 5l10-5M609.75 265l11-1m-11 1l11-1M606.75 273l9 6m-9-6l9 6M558.75 262l-9-5m9 5l-9-5M559.75 270h-8m8 0h-8M563.75 275l-6 4m6-4l-6 4" stroke="#000" stroke-width="2" fill="none"/><text x="39.5" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(312.25 99)">🧀 shop</text><g stroke-opacity=".7" fill-opacity=".7"><path d="M424.758 289.734l75.098-.86-1.316 26.496-70.03 3.934" stroke-width="0" fill="#fab005"/><path d="M430.382 291.305c23.308-5.322 51.23-5.513 66.733-3.567m-68.753.35c14.862 2.042 33.948.587 72.324.07m2.888-2.555c-4.107 9.896-1.451 24.288-7.322 33.854m2.66-28.524c1.685 7.67.7 15.707 2.205 25.096m-3.551 3.743c-24.892 2.827-47.156-4.068-65.42-3.623m68.515 3.197c-16.836-.552-30.976-1.307-73.074-1.545m-2.618-2.461c-.418-1.38 2.62-15.743 7.14-28.01m-3.433 29.437c-.296-8.289-2.553-18.605-1.582-29.626" stroke="#d9480f" stroke-width="2" fill="none"/></g><g><text x="18.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(443.75 294.5)">PAY</text></g><g font-family="Helvetica" font-size="20"><text y="18" style="white-space:pre" transform="translate(388.25 165.5)">Shipping options</text><text y="41" style="white-space:pre" transform="translate(388.25 165.5)">Free - $0</text><text y="64" style="white-space:pre" transform="translate(388.25 165.5)">Express - $5</text></g><g><text x="48" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(415.75 256.5)">TOTAL: $5</text></g><g><path d="M520.25 192h15.057v15.057H520.25" stroke-width="0" fill="#ced4da"/><path d="M520.25 192h15.057m-15.057 0h15.057m0 0v15.057m0-15.057v15.057m0 0H520.25m15.057 0H520.25m0 0V192m0 15.057V192" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M519.693 214.814h15.057v15.057h-15.057" stroke-width="0" fill="#ced4da"/><path d="M519.693 214.814h15.057m-15.057 0h15.057m0 0v15.057m0-15.057v15.057m0 0h-15.057m15.057 0h-15.057m0 0v-15.057m0 15.057v-15.057" stroke="#000" stroke-width="2" fill="none"/></g><g><text y="14" font-family="Helvetica" font-size="16" style="white-space:pre" transform="translate(523.779 212.529)">x</text></g><g><path d="M546.142 254.875c-2.183-4.322-11.216-22.067-13.25-26.619m14.957 25.375c-1.71-4.569-10.265-22.982-12.695-27.1" stroke="#000" stroke-width="2" fill="none"/><path d="M545.955 235.9c-.807-.933-4.046-4.06-11.94-8.327m12.102 9.522c-4.276-3.202-7.104-8.212-11.031-11.056" stroke="#000" stroke-width="2" fill="none"/><path d="M536.585 240.706c1.19-1.863-.093-5.993-2.57-13.133m2.731 14.327c-.922-4.941-.399-11.67-1.66-15.861" stroke="#000" stroke-width="2" fill="none"/></g><g><text x="24.5" y="39" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(46.75 203)">🐭</text></g><g><text x="58.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(12.5 253)">merchant</text></g><g><text x="18" y="36" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(694 197)">🐻</text></g><g><text x="57.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(651.5 251)">customer</text></g><g><text x="18" y="36" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(692 527)">🐻</text></g><g><text x="57.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(649.5 581)">customer</text></g><g><path d="M454 10c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44m0-.44c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M450.264 23c-.525 2.053-2.8 10.707-3.15 12.32-.35 1.614-1.225-1.613 1.05-2.64 2.275-1.026 9.8-4.84 12.6-3.52 2.8 1.32 6.65 8.8 4.2 11.441-2.45 2.64-15.75 4.107-18.9 4.4-3.15.294.175-2.2 0-2.64-.175-.44-.874.147-1.05 0-.174-.147 0-.733 0-.88M450.265 23c-.525 2.053-2.8 10.707-3.15 12.32-.35 1.614-1.225-1.613 1.05-2.64 2.275-1.026 9.8-4.84 12.6-3.52 2.8 1.32 6.65 8.8 4.2 11.441-2.45 2.64-15.75 4.107-18.9 4.4-3.15.294.175-2.2 0-2.64-.175-.44-.874.147-1.05 0-.174-.147 0-.733 0-.88" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M448 22l17 1m-17-1l17 1" stroke="#000" stroke-width="2" fill="none"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/6.svg b/src/site/content/en/payments/life-of-a-payment-transaction/6.svg
deleted file mode 100644
index 1a12ac2316d..00000000000
--- a/src/site/content/en/payments/life-of-a-payment-transaction/6.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 777.5 708"><defs><style>@font-face{font-family:&quot;Virgil&quot;;src:url(&quot;https://excalidraw.com/FG_Virgil.woff2&quot;)}@font-face{font-family:&quot;Cascadia&quot;;src:url(&quot;https://excalidraw.com/Cascadia.woff2&quot;)}</style></defs><path fill="#fff" d="M0 0h777.5v708H0z"/><text x="24.5" y="39" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(48 195)">🐭</text><text x="58.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(10 251)">merchant</text><path d="M270.268 237.158c-25.472.296-127.436 2.642-152.943 3.216m154.76-1.044c-25.508-.092-129.523-.573-155.42-.664" stroke="#000" stroke-width="2" fill="none"/><path d="M143.494 229.436c-3.715 2-9.831 5.266-25.373 7.782m27.515-8.873c-9.935 2.895-19.872 6.531-29.824 10.754" stroke="#000" stroke-width="2" fill="none"/><path d="M143.41 249.957c-3.799-2.716-9.895-4.165-25.29-12.739m27.432 11.648c-9.848-4.036-19.757-7.33-29.74-9.767" stroke="#000" stroke-width="2" fill="none"/><g font-family="Cascadia" font-size="20"><text y="19" style="white-space:pre" transform="translate(150.5 184)">payment</text><text y="43" style="white-space:pre" transform="translate(150.5 184)">credential</text></g><text x="89" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(378 599.5)">Payment accepted</text><path d="M569 608.5l10-5m-10 5l10-5" stroke="#364fc7" stroke-width="2" fill="none"/><path d="M572 618.5l11-1m-11 1l11-1" stroke="#5c940d" stroke-width="2" fill="none"/><path d="M570 627.5l9 6m-9-6l9 6" stroke="#a61e4d" stroke-width="2" fill="none"/><path d="M361 611.5l-9-5m9 5l-9-5" stroke="#862e9c" stroke-width="2" fill="none"/><path d="M362 619.5h-8m8 0h-8" stroke="#c92a2a" stroke-width="2" fill="none"/><path d="M366 624.5l-6 4m6-4l-6 4" stroke="#087f5b" stroke-width="2" fill="none"/><path d="M120.307 585.604c27.598.134 138.634-.361 166.711-.486m-168.219-.432c27.873.382 142.143 1.499 170.411 1.674" stroke="#000" stroke-width="2" fill="none"/><path d="M261.341 594.734c9.656-.923 20.125-4.749 26.357-9.364m-25.859 11.604c8.771-4.182 19.498-7.328 27.995-11.35M261.512 574.213c9.41 6.997 19.814 11.09 26.186 11.157m-25.688-8.917c8.704 2.89 19.371 6.813 27.824 9.17" stroke="#000" stroke-width="2" fill="none"/><g font-family="Cascadia" font-size="20"><text y="19" style="white-space:pre" transform="translate(127.5 529)">complete</text><text y="43" style="white-space:pre" transform="translate(127.5 529)">transaction</text></g><path d="M414.688 550.508c4.792 5.713 11.128 41.654 29.425 35.857 18.298-5.796 66.86-58.766 80.36-70.635m-107.748 33.475c4.7 5.853 9.24 41.135 27.025 35.23 17.784-5.906 66.068-59.314 79.681-70.664" stroke="#2b8a3e" stroke-width="2" fill="none"/><path d="M302.5 100h316v35h-316" stroke-width="0" fill="#fa5252"/><path d="M302.5 100h316m-316 0h316m0 0v35m0-35v35m0 0h-316m316 0h-316m0 0v-35m0 35v-35M300.211 72.102c111.243 1.622 226.285 1.24 320.624 3.046M298.73 72.777c117.185 3.728 235.476 4.537 319.828 1.061m.765 2.288c-2.714 64.373-5.315 132.684.523 274.917m.828-276.072c-5.413 64.838-4.983 129.77-.37 277.122m1.55-1.404c-121.627.207-241.535 1.181-325.023 3.671m323.349-3.615c-67.602-.582-135.248 2.009-321.242.228m-2.371.083c1.54-69.795 4.078-146.522 1.733-279.272m-1.158 280.112c-1.29-66.068-1.161-133.311 1.45-277.92" stroke="#000" stroke-width="2" fill="none"/><g stroke-opacity=".3" fill-opacity=".3"><path d="M299.75 99h316v252h-316" stroke-width="0" fill="#868e96"/><path d="M299.75 99h316m-316 0h316m0 0v252m0-252v252m0 0h-316m316 0h-316m0 0V99m0 252V99" stroke="#000" stroke-width="2" fill="none"/></g><path d="M371.75 156h189v173h-189" stroke-width="0" fill="#fff"/><path d="M371.75 156h189m-189 0h189m0 0v173m0-173v173m0 0h-189m189 0h-189m0 0V156m0 173V156" stroke="#000" stroke-width="2" fill="none"/><path d="M315.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fa5252"/><path d="M315.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M334.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fab005"/><path d="M334.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><path d="M352.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#40c057"/><path d="M352.5 82c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/><text x="20" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(524.5 320)">click</text><path d="M566.5 325l10-5m-10 5l10-5M570.5 336l11-1m-11 1l11-1M569.5 342l9 6m-9-6l9 6M519.5 334l-9-5m9 5l-9-5M520.5 339h-8m8 0h-8M523.5 344l-6 4m6-4l-6 4" stroke="#000" stroke-width="2" fill="none"/><text x="39.5" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(315 99)">🧀 shop</text><g stroke-opacity=".7" fill-opacity=".7"><path d="M429.094 285.918l70.414 6.212 7.295 24.556-73.09 3.097" stroke-width="0" fill="#fab005"/><path d="M430.123 289.196c25.11-2.475 46-2.22 69.772-2.432m-68.86.828c22.4 1.43 41.72-.074 70.03.85m2.433 1.421c-1.413 12.142.108 23.753.138 28.75m-1.918-30.879c.425 11.217 2.7 21.764 3.07 29.987m-5.254 1.617c-17.69.534-49.696-2.3-68.65-.382m73.222.357c-19.866-1.683-36.71-2.77-71.616-.873m-.675 1.301c-1.928-7.643-.84-12.943.144-34.249m.966 32.927c-3.5-6.952-1.194-11.906-1.176-30.234" stroke="#d9480f" stroke-width="2" fill="none"/></g><text x="18.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(446.5 294.5)">PAY</text><g font-family="Helvetica" font-size="20"><text y="18" style="white-space:pre" transform="translate(391 165.5)">Shipping options</text><text y="41" style="white-space:pre" transform="translate(391 165.5)">Free - $0</text><text y="64" style="white-space:pre" transform="translate(391 165.5)">Express - $5</text></g><text x="53.5" y="18" font-family="Helvetica" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(412 256.5)">TOTAL: $10</text><path d="M523 192h15.057v15.057H523" stroke-width="0" fill="#ced4da"/><path d="M523 192h15.057M523 192h15.057m0 0v15.057m0-15.057v15.057m0 0H523m15.057 0H523m0 0V192m0 15.057V192" stroke="#000" stroke-width="2" fill="none"/><path d="M522.443 214.814H537.5v15.057h-15.057" stroke-width="0" fill="#ced4da"/><path d="M522.443 214.814H537.5m-15.057 0H537.5m0 0v15.057m0-15.057v15.057m0 0h-15.057m15.057 0h-15.057m0 0v-15.057m0 15.057v-15.057" stroke="#000" stroke-width="2" fill="none"/><text y="14" font-family="Helvetica" font-size="16" style="white-space:pre" transform="translate(526.529 212.529)">x</text><path d="M505.462 332.766c-1.97-4.23-9.232-21.063-11.03-25.437m12.742 27.699c-2.123-4.499-11.53-24.857-13.727-29.387" stroke="#000" stroke-width="2" fill="none"/><path d="M503.078 315.924c-1.112-2.78-5.118-7.013-8.713-10.117m9.33 10.763c-2.075-3.497-5.259-6.08-10.483-10.544" stroke="#000" stroke-width="2" fill="none"/><path d="M493.968 320.218c1.541-3.948.163-9.42.397-14.411m.22 15.057c.403-4.564-.331-8.301-1.373-14.838M300.979 417.946c110.411 1.123 216.984-.337 325.388 1.416m-324.517.076c93.04-2.754 186.882-4.905 320.955.544m1.502 1.561c-2.29 100.916.68 206.86-1.67 278.994m1.75-280.972c.006 102.12-.649 204.053.342 277.919m.965 1.797c-71.213 3.125-140.335 2.212-321.555-1.083m320.663-.128c-72.111 1.627-143.511 1.558-323.258.962m-.34.197c4.405-101.377-.421-198.564-1.528-276.304m2.977 273.948c1.609-84.187 3.48-168.111 1.016-276.335" stroke="#000" stroke-width="2" fill="none"/><g><path d="M319.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fa5252"/><path d="M319.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M338.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#fab005"/><path d="M338.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M356.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke-width="0" fill="#40c057"/><path d="M356.75 428c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1m0-.1c1.018-.064 2.393.481 3.214 1.17.82.688 1.524 1.907 1.71 2.962.186 1.055-.058 2.44-.594 3.368-.536.928-1.613 1.832-2.62 2.198-1.007.367-2.413.367-3.42 0-1.007-.366-2.084-1.27-2.62-2.198-.536-.928-.78-2.313-.594-3.368.186-1.055.89-2.274 1.71-2.962.82-.689 2.678-.992 3.214-1.17.536-.178 0 .017 0 .1" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M306.75 446h316v35h-316" stroke-width="0" fill="#fa5252"/><path d="M306.75 446h316m-316 0h316m0 0v35m0-35v35m0 0h-316m316 0h-316m0 0v-35m0 35v-35" stroke="#000" stroke-width="2" fill="none"/></g><g><text x="39.5" y="23" font-family="Virgil" font-size="20" text-anchor="middle" style="white-space:pre" transform="translate(319.25 445)">🧀 shop</text></g><g><text x="18" y="36" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(695 184)">🐻</text></g><g><text x="57.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(652.5 238)">customer</text></g><g><text x="18" y="36" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(693 535)">🐻</text></g><g><text x="57.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(650.5 589)">customer</text></g><g><text x="24.5" y="39" font-family="Helvetica" font-size="36" text-anchor="middle" style="white-space:pre" transform="translate(53.5 539)">🐭</text></g><g><text x="58.5" y="25" font-family="Helvetica" font-size="28" text-anchor="middle" style="white-space:pre" transform="translate(15.5 595)">merchant</text></g><g><path d="M457 10c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44m0-.44c4.478-.28 10.53 2.117 14.141 5.147 3.611 3.03 6.706 8.39 7.525 13.033.818 4.642-.257 10.738-2.613 14.82-2.357 4.082-7.1 8.061-11.529 9.673-4.43 1.612-10.619 1.612-15.048 0-4.43-1.612-9.172-5.59-11.529-9.673-2.356-4.082-3.431-10.178-2.613-14.82.819-4.642 3.914-10.003 7.525-13.033 3.61-3.03 11.784-4.362 14.141-5.147 2.357-.785 0 .073 0 .44" stroke="#000" stroke-width="2" fill="none"/></g><g><path d="M461.944 18c-1.957 1.804-9.429 6.854-11.742 10.823-2.312 3.968-3.558 10.461-2.135 12.987 1.424 2.525 8.54 1.984 10.675 2.164 2.134.18 1.6 1.083 2.134-1.082.534-2.164 3.38-10.642 1.068-11.905-2.313-1.262-12.453 3.608-14.944 4.33M461.944 18c-1.957 1.804-9.429 6.854-11.742 10.823-2.312 3.968-3.558 10.461-2.135 12.987 1.424 2.525 8.54 1.984 10.675 2.164 2.134.18 1.6 1.083 2.134-1.082.534-2.164 3.38-10.642 1.068-11.905-2.313-1.262-12.453 3.608-14.944 4.33" stroke="#000" stroke-width="2" fill="none"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/index.md b/src/site/content/en/payments/life-of-a-payment-transaction/index.md
index 31eba63b2fe..563eff55dfc 100644
--- a/src/site/content/en/payments/life-of-a-payment-transaction/index.md
+++ b/src/site/content/en/payments/life-of-a-payment-transaction/index.md
@@ -16,7 +16,7 @@ tags:
   - payments
 ---
 
-Web Payments APIs are dedicated payment features built into the browser natively
+Web Payments APIs are dedicated payment features built into the browser
 for the first time. With Web Payments, merchant integration with payment apps
 becomes simpler while the customer experience gets streamlined and more secure.
 
@@ -32,27 +32,21 @@ The process involves 6 steps:
 2. The merchant shows a payment button.
 3. The customer presses the payment button.
 
-    ![A diagram of a cheese shop website with a BobPay (payment app)
-    button.](123.svg)
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NQIh5tt5wsQFC5yKLCaU.svg", alt="A diagram of a cheese shop website with a BobPay (payment app) button.", width="786", height="298" %}
 
 4. The browser launches the payment app.
 
-    ![A diagram of the cheese shop website with BobPay app launched in a modal.
-    The modal shows shipping options and total cost.](4.svg)
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IHztIcfJKeWDUIkugTkb.svg", alt="A diagram of the cheese shop website with BobPay app launched in a modal. The modal shows shipping options and total cost.", width="671", height="366" %}
 
 5. If the customer changes any details (such as shipping options or their
    address), the merchant updates the transaction details reflecting the change.
 
-    ![A diagram showing the customer choosing a different shipping option in
-    BobPay app modal. A second diagram showing the merchant updating the total
-    cost displayed in BobPay.](5.svg)
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BR9Od63aOdG9CaaD1z7K.svg", alt="A diagram showing the customer choosing a different shipping option in BobPay app modal. A second diagram showing the merchant updating the total cost displayed in BobPay.", width="777", height="702" %}
 
 6. After the customer confirms the purchase, the merchant validates the payment
    and completes the transaction.
 
-    ![A diagram showing the customer pressing the "Pay" button in BobPay,
-    followed by a diagram of the cheese shop page showing "Payment
-    accepted".](6.svg)
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Q6VqimbOxJ3ZXHvB8ry.svg", alt="A diagram showing the customer pressing the \"Pay\" button in BobPay, followed by a diagram of the cheese shop page showing \"Payment accepted\".", width="778", height="708" %}
 
 ## Step 1: The merchant initiates a payment transaction
 
@@ -141,7 +135,7 @@ The
 [`canMakePayment()`](https://developer.mozilla.org/docs/Web/API/PaymentRequest/canMakePayment)
 method of `PaymentRequest` returns `true` if a payment app is available on the
 customer's device. "Available" means that a payment app that supports the
-payment method is discovered, and that the native payment app is installed, or
+payment method is discovered, and that the platform-specific payment app is installed, or
 the web-based payment app is [ready to be
 registered](/setting-up-a-payment-method#jit-register).
 
@@ -193,9 +187,9 @@ If the payment handler is designed to return a transaction ID upon setting the
 total price, the ID can be passed as part of the promise result.
 {% endAside %}
 
-## Step 4: The browser launches the payment app
+## Step 4: The browser launches the payment app {: #launch }
 
-The browser can launch a native or a web-based payment app. (You can learn more
+The browser can launch a platform-specific or a web-based payment app. (You can learn more
 about [how Chrome determines which payment app to
 launch](/setting-up-a-payment-method#how-chrome-determines-which-payment-app-to-launch).)
 
@@ -246,13 +240,13 @@ request.addEventListener('paymentmethodchange', e => {
 
 A payment app can optionally provide the customer's shipping address. This is
 convenient for customers because they don't have to manually enter any details
-into a form and they can store their shipping address in their prefered payment
+into a form and they can store their shipping address in their preferred payment
 apps, rather than on multiple different merchant websites.
 
 If a customer updates their shipping address in a payment app after the
-transaction has been initiated, a shipping address change event will be emitted
-to the merchant. This helps the merchant determine the shipping cost based on
-the new address, update the total price, and return it back to the payment app.
+transaction has been initiated, a `'shippingaddresschange'` event will be sent
+to the merchant. This event helps the merchant determine the shipping cost based
+on the new address, update the total price, and return it to the payment app.
 
 ```js
 request.addEventListener('shippingaddresschange', e => {
@@ -278,12 +272,12 @@ that choice to the payment app. The shipping options are displayed as a list of
 prices and service names the customer can select from. For example:
 
 * Standard shipping - Free
-* Express shipping - $5
+* Express shipping - 5 USD
 
-When a customer updates the shipping option in a payment app, a shipping option
-change event will be emitted to the merchant. The merchant can then determine
-the shipping cost, update the total price, and return it back to the payment
-app.
+When a customer updates the shipping option in a payment app, a
+`'shippingoptionchange'` event will be sent to the merchant. The merchant can
+then determine the shipping cost, update the total price, and return it to the
+payment app.
 
 ```js
 request.addEventListener('shippingoptionchange', e => {
@@ -293,7 +287,7 @@ request.addEventListener('shippingoptionchange', e => {
 });
 ```
 
-The merchant can modify the shipping options dynamically based on the customer's
+The merchant can dynamically modify the shipping options based on the customer's
 shipping address as well. This is useful when a merchant wants to offer
 different sets of shipping options for domestic and international customers.
 
@@ -385,7 +379,7 @@ doPaymentRequest();
 
 * Learn how to declare a payment method identifier in detail in [Setting up a
   payment method](/setting-up-a-payment-method).
-* Learn how to build a native payment app in
+* Learn how to build a platform-specific payment app in
   [Android payment apps developer's guide](/android-payment-apps-developers-guide).
-* Learn how to build a web-based payment app in *Web-based payment apps developer's
-  guide* (coming soon).
+* Learn how to build a web-based payment app in [Web-based payment apps developer's
+  guide](/web-based-payment-apps-overview).
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI-mobile.png b/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI-mobile.png
deleted file mode 100755
index 9d137a7d6d4..00000000000
Binary files a/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI-mobile.png and /dev/null differ
diff --git a/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI.png b/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI.png
deleted file mode 100755
index 98f3cb450d7..00000000000
Binary files a/src/site/content/en/payments/life-of-a-payment-transaction/payment-request-UI.png and /dev/null differ
diff --git a/src/site/content/en/payments/orchestrating-payment-transactions/index.md b/src/site/content/en/payments/orchestrating-payment-transactions/index.md
new file mode 100644
index 00000000000..096366db667
--- /dev/null
+++ b/src/site/content/en/payments/orchestrating-payment-transactions/index.md
@@ -0,0 +1,443 @@
+---
+layout: post
+title: Orchestrating payment transactions with a service worker
+subhead: |
+  How to adapt your web-based payment app to Web Payments and provide a better user experience for customers.
+authors:
+  - agektmr
+date: 2020-08-31
+updated: 2021-09-14
+description: |
+  Once a web-based payment app is registered, it's ready to accept payment requests from merchants. This article teaches you how to orchestrate a payment transaction from a service worker during runtime.
+tags:
+  - payments
+  - service-worker
+feedback:
+  - api
+---
+
+Once [the payment app is registered](/registering-a-web-based-payment-app/), you
+are ready to accept payment requests from merchants. This post explains how to
+orchestrate a payment transaction from a service worker during runtime (i.e.
+when a window is displayed and the user is interacting with it).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/b0Pz24lmWMepSM6tboa1.png", alt="Orchestrating payment transactions with a service worker", width="800", height="945" %}
+  <figcaption>
+    Orchestrating payment transactions with a service worker
+  </figcaption>
+</figure>
+
+"Runtime payment parameter changes" refer to a set of events that allows the
+merchant and payment handler to exchange messages while the user is interacting
+with the payment handler. Learn more in [Handling optional payment information
+with a service worker](/handling-optional-payment-information).
+
+## Receive a payment request event from the merchant {: #receive-payment-request-event }
+
+When a customer chooses to pay with your web-based payment app and [the merchant
+invokes
+`PaymentRequest.show()`](/life-of-a-payment-transaction/#),
+your service worker will receive a `paymentrequest` event. Add an event listener
+to the service worker to capture the event and prepare for the next action.
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+let payment_request_event;
+let resolver;
+let client;
+
+// `self` is the global object in service worker
+self.addEventListener('paymentrequest', async e => {
+  if (payment_request_event) {
+    // If there's an ongoing payment transaction, reject it.
+    resolver.reject();
+  }
+  // Preserve the event for future use
+  payment_request_event = e;
+…
+```
+
+{% Aside 'caution' %}
+Remember that a service worker is a single instance across different tabs and
+windows in the same browser. Global variables are shared across all tabs and
+windows.
+{% endAside %}
+
+The preserved `PaymentRequestEvent` contains important information about this
+transaction:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Property name</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+      <td><code>topOrigin</code></td>
+        <td>
+          A string that indicates the origin of the top-level web page (usually the payee merchant). Use this to identify the merchant origin.
+        </td>
+      </tr>
+      <tr>
+        <td><code>paymentRequestOrigin</code></td>
+        <td>
+          A string that indicates the origin of the invoker. This can be the same as <code>topOrigin</code> when the merchant invokes the Payment Request API directly, but may be different if the API is invoked from within an iframe by a third party such as a payment gateway.
+        </td>
+      </tr>
+      <tr>
+        <td><code>paymentRequestId</code></td>
+        <td>
+          The <code>id</code> property of the <code><a href="https://w3c.github.io/payment-request/#paymentdetailsinit-dictionary">PaymentDetailsInit</a></code> provided to the Payment Request API. If the merchant omits, the browser will provide an auto-generated ID.
+        </td>
+      </tr>
+      <tr>
+        <td><code>methodData</code></td>
+        <td>
+          The payment-method-specific data provided by the merchant as part of <code><a href="https://w3c.github.io/payment-request/#dom-paymentmethoddata">PaymentMethodData</a></code>.
+Use this to determine the payment transaction details.
+        </td>
+      </tr>
+      <tr>
+        <td><code>total</code></td>
+        <td>
+          The total amount provided by the merchant as part of <code><a href="https://w3c.github.io/payment-request/#dom-paymentdetailsinit">PaymentDetailsInit</a></code>.
+Use this to construct a UI to let the customer know the total amount to pay.
+        </td>
+      </tr>
+      <tr>
+        <td><code>instrumentKey</code></td>
+        <td>
+          The instrument key selected by the user. This reflects the <code><a href="https://w3c.github.io/payment-handler/#paymentinstruments-interface">instrumentKey</a></code> you provided in advance. An empty string indicates that the user did not specify any instruments.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Open the payment handler window to display the web-based payment app frontend {: #open-payment-handler-window }
+
+When a `paymentrequest` event is received, the payment app can open a payment
+handler window by calling `PaymentRequestEvent.openWindow()`. The payment
+handler window will present the customers your payment app's interface where
+they can authenticate, choose shipping address and options, and authorize the
+payment. We'll cover how to write the frontend code in *Handling payments on the
+payment frontend* (coming soon).
+
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/kM6NP47k4Xzl4tHWISCm.mp4", autoplay="true", loop="true", muted="true"
+  %}
+  <figcaption>
+    Checkout flow with a web-based payment app.
+  </figcaption>
+</figure>
+
+Pass a preserved promise to `PaymentRequestEvent.respondWith()` so that you can
+resolve it with a payment result in the future.
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+self.addEventListener('paymentrequest', async e => {
+…
+  // Retain a promise for future resolution
+  // Polyfill for PromiseResolver is provided below.
+  resolver = new PromiseResolver();
+
+  // Pass a promise that resolves when payment is done.
+  e.respondWith(resolver.promise);
+  // Open the checkout page.
+  try {
+    // Open the window and preserve the client
+    client = await e.openWindow(checkoutURL);
+    if (!client) {
+      // Reject if the window fails to open
+      throw 'Failed to open window';
+    }
+  } catch (err) {
+    // Reject the promise on failure
+    resolver.reject(err);
+  };
+});
+…
+```
+
+You can use a convenient `PromiseResolver` polyfill to resolve a promise at
+arbitrary timing.
+
+```js
+class PromiseResolver {
+  constructor() {
+    this.promise_ = new Promise((resolve, reject) => {
+      this.resolve_ = resolve;
+      this.reject_ = reject;
+    })
+  }
+  get promise() { return this.promise_ }
+  get resolve() { return this.resolve_ }
+  get reject() { return this.reject_ }
+}
+```
+
+{% Aside %}
+
+For security reasons, the frontend page opened in the payment handler window
+must have valid HTTPS certificates and no [mixed
+content](/what-is-mixed-content/); otherwise the payment request will be
+cancelled by Chrome. Learn more at [Debugging a web-based payment
+app](/registering-a-web-based-payment-app/#debugging-a-web-based-payment-app).
+
+{% endAside %}
+
+## Exchange information with the frontend {: #exchange-information }
+
+The payment app's service worker can exchange messages with the payment app's
+frontend through `ServiceWorkerController.postMessage()`. To receive messages
+from the frontend, listen to `message` events.
+
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+// Define a convenient `postMessage()` method
+const postMessage = (type, contents = {}) => {
+  if (client) client.postMessage({ type, ...contents });
+}
+```
+
+### Receive the ready signal from the frontend {: #receive-ready-signal }
+
+Once the payment handler window is opened, the service worker should wait for a
+ready-state signal from the payment app frontend. The service worker can pass
+important information to the frontend when it is ready.
+
+{% Label %}
+[payment handler] frontend:
+{% endLabel %}
+
+```js
+navigator.serviceWorker.controller.postMessage({
+  type: 'WINDOW_IS_READY'
+});
+```
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      // `WINDOW_IS_READY` is a frontend's ready state signal
+      case 'WINDOW_IS_READY':
+        const { total } = payment_request_event;
+…
+```
+
+### Pass the transaction details to the frontend {: #pass-details }
+
+Now send the payment details back. In this case you're only sending the total of
+the payment request, but you can pass more details if you like.
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+        // Pass the payment details to the frontend
+        postMessage('PAYMENT_IS_READY', { total });
+        break;
+…
+```
+
+{% Label %}
+[payment handler] frontend:
+{% endLabel %}
+
+```js
+let total;
+
+navigator.serviceWorker.addEventListener('message', async e => {
+  switch (e.data.type) {
+      case 'PAYMENT_IS_READY':
+        ({ total } = e.data);
+        // Update the UI
+        renderHTML(total);
+        break;
+…
+```
+
+## Return the customer's payment credentials {: #return-credentials }
+
+When the customer authorizes the payment, the frontend can send a post message
+to the service worker to proceed. You can resolve the promise passed to
+`PaymentRequestEvent.respondWith()` to send the result back to the merchant.
+Pass a
+[`PaymentHandlerResponse`](https://w3c.github.io/payment-handler/#dom-paymenthandlerresponse)
+object.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>Property name</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+      <td><code>methodName</code></td>
+        <td>
+          The payment method identifier used to make payment.
+        </td>
+      </tr>
+      <tr>
+        <td><code>details</code></td>
+        <td>
+          The payment method specific data that provides necessary information for the merchant to process payment.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Label %}
+[payment handler] frontend:
+{% endLabel %}
+
+```js
+  const paymentMethod = …
+
+  postMessage('PAYMENT_AUTHORIZED', {
+    paymentMethod,              // Payment method identifier
+  });
+```
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      …
+      case 'PAYMENT_AUTHORIZED':
+        // Resolve the payment request event promise
+        // with a payment response object
+        const response = {
+          methodName: e.data.paymentMethod,
+          details: { id: 'put payment credential here' },
+        }
+        resolver.resolve(response);
+        // Don't forget to initialize.
+        payment_request_event = null;
+        break;
+      …
+```
+
+## Cancel the payment transaction {: #cancel-transaction }
+
+To allow the customer to cancel the transaction, the frontend can send a post
+message to the service worker to do so. The service worker can then resolve the
+promise passed to `PaymentRequestEvent.respondWith()` with `null` to indicate to
+the merchant that the transaction has been cancelled.
+
+{% Label %}
+[payment handler] frontend:
+{% endLabel %}
+
+```js
+  postMessage('CANCEL_PAYMENT');
+```
+
+{% Label %}
+[payment handler] service-worker.js:
+{% endLabel %}
+
+```js
+…
+// Received a message from the frontend
+self.addEventListener('message', async e => {
+  let details;
+  try {
+    switch (e.data.type) {
+      …
+      case 'CANCEL_PAYMENT':
+        // Resolve the payment request event promise
+        // with null
+        resolver.resolve(null);
+        // Don't forget to initialize.
+        payment_request_event = null;
+        break;
+      …
+```
+
+## Sample code
+
+All sample codes you saw in this document were excerpts from the following
+working sample app:
+
+[https://paymenthandler-demo.glitch.me](https://paymenthandler-demo.glitch.me)
+
+{% Label %}
+[payment handler] service worker
+{% endLabel %}
+
+{% Glitch {
+  id: 'paymenthandler-demo',
+  path: 'public/service-worker.js',
+  previewSize: 0,
+  allow: []
+} %}
+
+{% Label %}
+[payment handler] frontend
+{% endLabel %}
+
+{% Glitch {
+  id: 'paymenthandler-demo',
+  path: 'public/pay.js',
+  previewSize: 0,
+  allow: []
+} %}
+
+To try it out:
+
+1. Go to [https://paymentrequest-demo.glitch.me/](https://paymentrequest-demo.glitch.me/).
+2. Go to the bottom of the page.
+3. Press **Add a payment button**.
+4. Enter `https://paymenthandler-demo.glitch.me` to the **Payment Method Identifier** field.
+5. Press **Pay** button next to the field.
+
+
+## Next steps
+
+In this article, we learned how to orchestrate a payment transaction from a
+service worker. The next step is to learn how to add some more advanced features
+to the service worker.
+
+* [Handling optional payment information with a service worker](/handling-optional-payment-information)
+
+
diff --git a/src/site/content/en/payments/registering-a-web-based-payment-app/debug-payment-handler.png b/src/site/content/en/payments/registering-a-web-based-payment-app/debug-payment-handler.png
deleted file mode 100644
index 30665d894b3..00000000000
Binary files a/src/site/content/en/payments/registering-a-web-based-payment-app/debug-payment-handler.png and /dev/null differ
diff --git a/src/site/content/en/payments/registering-a-web-based-payment-app/index.md b/src/site/content/en/payments/registering-a-web-based-payment-app/index.md
index 26de3ec5f2f..fa181e6aa83 100644
--- a/src/site/content/en/payments/registering-a-web-based-payment-app/index.md
+++ b/src/site/content/en/payments/registering-a-web-based-payment-app/index.md
@@ -6,11 +6,13 @@ subhead: |
 authors:
   - agektmr
 date: 2020-07-17
-updated: 2020-07-20
+updated: 2023-01-12
 description: |
   Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.
 tags:
   - payments
+feedback:
+  - api
 ---
 
 Web-based payment apps are [Progressive Web Apps
@@ -21,16 +23,15 @@ requests from a merchant, launches the payment app, and mediates the
 communication with the merchant.
 
 To configure a web-based payment app, you need to register available payment
-methods, delegation options, and a service worker. You can configure your
-web-based payment app declaratively with a web app manifest or imperatively with
-JavaScript.
+methods, and a service worker. You can configure your web-based payment app
+declaratively with a web app manifest.
 
 {% include 'content/payments/browser-compatibility.njk' %}
 
 ## Configuring a payment app with a web app manifest
 
 To configure your web-based payment app declaratively, [serve a web app
-manifest](/setting-up-a-payment-method/#step-3:-serve-a-web-app-manifest).
+manifest](/setting-up-a-payment-method/#step-3-serve-a-web-app-manifest).
 
 The following properties in the web app manifest are relevant for web-based payment apps:
 * `name`
@@ -39,11 +40,9 @@ The following properties in the web app manifest are relevant for web-based paym
     * `src`
     * `scope`
     * `use_cache`
-* `payment`
-    * `supported_delegations`
 
 Check out [Setting up a payment
-method](/setting-up-a-payment-method/#step-3:-serve-a-web-app-manifest)
+method](/setting-up-a-payment-method/#step-3-serve-a-web-app-manifest)
 to make sure your payment method manifest points to your web app manifest
 properly.
 
@@ -57,7 +56,7 @@ registration*.
 {% endAside %}
 
 The JIT registration requires only serving [the web app
-manifest](/setting-up-a-payment-method/#step-3:-serve-a-web-app-manifest)
+manifest](/setting-up-a-payment-method/#step-3-serve-a-web-app-manifest)
 and no additional coding. If you've already configured your web app manifest and
 are serving it properly, you should be all set. The browser will handle the
 rest.
@@ -68,207 +67,6 @@ JIT registration happens only when the payment method manifest points to a
 single payment app.
 {% endAside %}
 
-## Configure a payment app with JavaScript
-
-Configuring a web-based payment app using JavaScript allows you to register
-multiple payment methods and manually unregister service workers.
-
-### Manually register a service worker
-
-A service worker is a JavaScript file you can register using
-[`navigator.serviceWorker.register()`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register).
-If you have a service worker file named `service-worker.js`, you can register it
-to the visitor's browser by running the following code:
-
-<!--
-  {% Glitch {
-    id: 'paymenthandler-demo',
-    path: 'public/index.js:32:1',
-    height: 480
-  } %}
-  -->
-
-{% Label %}[payment handler] payment app's landing page{% endLabel %}
-
-```js
-// Feature detection
-if ('serviceWorker' in navigator) {
-  // Register a service worker
-  navigator.serviceWorker.register(
-    // A service worker JS file is separate
-    'service-worker.js'
-  );
-  // PaymentManager requires the service worker to be active.
-  // One simple method to activate a service worker is through
-  // a `ready` promise.
-  const registration = await navigator.serviceWorker.ready;
-…
-```
-
-{% include 'content/reliable/workbox.njk' %}
-
-{% Aside %}
-If you are new to the service worker, learn more at [Service Workers: an
-Introduction](https://developers.google.com/web/fundamentals/primers/service-workers).
-{% endAside %}
-
-### Set a payment instrument
-
-{% Aside 'key-term' %}
-Payment apps can support multiple ways for making a payment. For example, a
-customer can add multiple credit cards or e-wallets to a payment app. Each of
-them is a payment instrument.
-{% endAside %}
-
-Once the service worker is registered, [a service worker registration
-object](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration) is
-returned. Call
-[`registration.paymentManager.instrument.set()`](https://w3c.github.io/payment-handler/#paymentinstruments-interface)
-to set a payment instrument. It accepts two arguments, a string that represents
-the instrument key and a [`PaymentInstrument`
-object](https://w3c.github.io/payment-handler/#dom-paymentinstrument) that
-contains details about the instrument.
-
-{% Label %}[payment handler] payment app's landing pages{% endLabel %}
-
-```js
-…
-  // Feature detection
-  if (!registration.paymentManager) return;
-
-
-  await registration.paymentManager.instruments.set(
-    // Payment instrument key
-    'bobpay_card_1',
-    // Payment instrument details
-    {
-      // This parameter will be ignored in Chrome
-      name: 'Payment Handler Example',
-      // This parameter will be used to match against
-      // the PaymentRequest.
-      method: 'https://bobpay.xyz/pay'
-    }
-  );
-```
-
-<div class="w-table-wrapper">
-  <table>
-    <thead>
-      <tr>
-        <th colspan="2">Arguments</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td colspan="2">
-          <a href="https://w3c.github.io/payment-handler/#paymentinstruments-interface"><code>instrumentKey</code></a> (required)
-        </td>
-        <td>
-          An arbitrary string used only to identify the instrument when you want to update it. It's not visible to customers and it's recommended you use an identifier from your payment app backend.
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="5">
-          <a href="https://w3c.github.io/payment-handler/#paymentinstrument-dictionary"><code>PaymentInstrument</code></a>
-        </td>
-        <td></td>
-        <td>
-          Details of the payment instrument.
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="https://developer.mozilla.org/docs/Web/Manifest/name"><code>name</code></a> (required)
-        </td>
-        <td>
-          Sets a string as the instrument name. Required but ignored in Chrome.
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <a href="https://developer.mozilla.org/docs/Web/Manifest/icons"><code>icons</code></a>
-        </td>
-        <td>
-          Sets an array of <a href="https://w3c.github.io/payment-handler/#imageobject-dictionary"><code>ImageObject</code></a>s that the Payment Request sheet will display. Ignored in Chrome.
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <code>method</code>
-        </td>
-        <td>
-          A supported payment method identifier.
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <code>capabilities</code>
-        </td>
-        <td>
-          Sets the <a href="https://w3c.github.io/payment-handler/#capabilities-example">payment method specific parameters as an object</a>. As of July 2020, basic-card is the only payment method that accepts capabilities.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% Aside %}
-Chrome ignores the `name` and `icons` properties. It respects the [web app
-manifest](/setting-up-a-payment-method/#step-3:-serve-a-web-app-manifest)'s
-respective properties instead, but other browsers may behave differently.
-{% endAside %}
-
-### Enable delegations
-
-Entering shipping address and contact information through a web form can be a
-cumbersome experience for customers. It can cause errors and lower conversion
-rate.
-
-That's why the Payment Request API supports a feature to request shipping
-address and contact information. This provides multiple benefits:
-
-* Users can pick the right address with just a few taps.
-* The address is always returned in [the standardized
-  format](https://w3c.github.io/payment-request/#paymentaddress-interface).
-* Submitting an incorrect address is less likely.
-
-Payment apps can integrate this functionality to offer a more unified payment
-experience. This is called *delegation*.
-
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
-    Checkout flow with a web-based payment app.
-  </figcaption>
-</figure>
-
-Web-based payment apps can declare their support for delegation using the web
-app manifest's `payment.supported_delegations` field or through JavaScript.
-
-To let the browser know that the payment app accepts a delegation, use
-[`PaymentManager.enableDelegations()`](https://w3c.github.io/payment-handler/#enabledelegations-method).
-
-{% Label %}[payment handler] payment app's landing page{% endLabel %}
-
-```js
-…
- await registration.paymentManager.enableDelegations([
-  'shippingAddress', 'payerName'
-]);
-…
-```
-
-You can declare supported delegation options as an array of strings:
-
-* `shippingAddress`: The payment handler can provide a shipping address.
-* `payerName`: The payment handler can provide the payer's name.
-* `payerPhone`: The payment handler can provide the payer's phone number.
-* `payerEmail`: The payment handler can provide the payer's address.
-
 ## Debugging a web-based payment app
 
 When developing a web-based payment app frontend, you'll probably jump between
@@ -312,13 +110,13 @@ flags](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
 You can port forward the local web server to an Android device using Chrome's
 DevTools and test how it works from a mobile browser. To learn how to do it,
 check out [Access Local
-Servers](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server).
+Servers](https://developer.chrome.com/docs/devtools/remote-debugging/local-server/).
 
 ### Remote debugging a website on Android Chrome from desktop DevTools
 
 You can also debug Android Chrome on desktop DevTools. To learn how to do it,
 check out [Get Started with Remote Debugging Android
-Devices](https://developers.google.com/web/tools/chrome-devtools/remote-debugging).
+Devices](https://developer.chrome.com/docs/devtools/remote-debugging/).
 
 ### Payment Handler event logging
 
@@ -329,19 +127,17 @@ easier local development. Open DevTools on the merchant context and go to the
 from other domains" and click the "Record" button to start capturing events sent
 to the service worker that handles payments.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="./debug-payment-handler.png" 
-       alt="A screenshot of Payment Handler event logging.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FixX1Ld3y0Vgb4ZcSBGc.png", alt="A screenshot of Payment Handler event logging.", width="800", height="585" %}
+  <figcaption>
     Payment Handler event logging.
   </figcaption>
 </figure>
 
 ## Next steps
 
-You learned how to register a service worker, set payment instruments, and
-define delegation availability for a web-based payment app. The next step is to
-learn how the service worker can orchestrate a payment transaction at runtime.
+The next step is to learn how the service worker can orchestrate a payment
+transaction at runtime.
 
-* Orchestrating a payment transaction on the service worker
+* [Orchestrating payment transactions with a service
+  worker](/orchestrating-payment-transactions)
diff --git a/src/site/content/en/payments/setting-up-a-payment-method/diagram_direct.png b/src/site/content/en/payments/setting-up-a-payment-method/diagram_direct.png
deleted file mode 100644
index b27c21c4160..00000000000
Binary files a/src/site/content/en/payments/setting-up-a-payment-method/diagram_direct.png and /dev/null differ
diff --git a/src/site/content/en/payments/setting-up-a-payment-method/diagram_indirect.png b/src/site/content/en/payments/setting-up-a-payment-method/diagram_indirect.png
deleted file mode 100644
index 6195ad2c29a..00000000000
Binary files a/src/site/content/en/payments/setting-up-a-payment-method/diagram_indirect.png and /dev/null differ
diff --git a/src/site/content/en/payments/setting-up-a-payment-method/index.md b/src/site/content/en/payments/setting-up-a-payment-method/index.md
index 63aa1164ede..8d320af86d2 100644
--- a/src/site/content/en/payments/setting-up-a-payment-method/index.md
+++ b/src/site/content/en/payments/setting-up-a-payment-method/index.md
@@ -12,9 +12,11 @@ description: |
   payment app. Learn how to set up a payment method and get your payment app
   ready for merchants and customers to make payments.
 date: 2020-05-25
-updated: 2020-07-17
+updated: 2021-09-14
 tags:
   - payments
+feedback:
+  - api
 ---
 
 To be used with the Payment Request API, a payment app must be associated with a
@@ -40,10 +42,8 @@ Every payment app needs to provide the following:
   provided by a third party)
 - Web app manifest
 
-<figure class="w-figure">
-  <img src="diagram_direct.png"
-       alt="Diagram: How a browser discovers the payment app from a URL-based payment
-method identifier">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kvLIMUysDNEG3IfPxKz6.png", alt="Diagram: How a browser discovers the payment app from a URL-based payment method identifier", width="800", height="587" %}
 </figure>
 
 The discovery process starts when a merchant initiates a transaction:
@@ -55,7 +55,7 @@ The discovery process starts when a merchant initiates a transaction:
 2. The browser determines the [web app
    manifest](https://developer.mozilla.org/docs/Web/Manifest) URL from the
    payment method manifest and fetches the web app manifest.
-3. The browser determines whether to launch the native payment app or the
+3. The browser determines whether to launch the OS payment app or the
    web-based payment app from the web app manifest.
 
 The next sections explain in detail how to set up your own payment method so
@@ -69,7 +69,7 @@ is a URL-based string. For example, Google Pay's identifier is
 `https://google.com/pay`. Payment app developers can pick any URL as a payment
 method identifier as long as they have control over it and can serve arbitrary
 content. In this article, we'll use
-[`https://bobpay.xyz/pay`](https://bobpay.xyz/pay) as the payment method
+[`https://bobbucks.dev/pay`](https://bobbucks.dev/pay) as the payment method
 identifier.
 
 {% Aside %}
@@ -87,7 +87,7 @@ for the `supportedMethods` property. For example:
 
 ```js
 const request = new PaymentRequest([{
-  supportedMethods: 'https://bobpay.xyz/pay'
+  supportedMethods: 'https://bobbucks.dev/pay'
 }], {
   total: {
     label: 'total',
@@ -115,7 +115,7 @@ manifest body.
 A payment method manifest has two fields, `default_applications` and
 `supported_origins`.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -151,7 +151,7 @@ A payment method manifest file should look like this:
 
 ```json
 {
-  "default_applications": ["https://bobpay.xyz/manifest.json"],
+  "default_applications": ["https://bobbucks.dev/manifest.json"],
   "supported_origins": [
     "https://alicepay.friendsofalice.example"
   ]
@@ -172,26 +172,25 @@ that points to another URL where the browser can fetch the payment method
 manifest. This is useful when a payment method manifest is hosted at a different
 server or when the payment app is served by a third party.
 
-![How a browser discovers the payment app from a URL-based payment method
-identifier with redirects](diagram_indirect.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5YDqz1ppLkjHd9HYgXYH.png", alt="How a browser discovers the payment app from a URL-based payment method identifier with redirects", width="800", height="698" %}
 
 Configure the payment method server to respond with a HTTP `Link` header with
 the `rel="payment-method-manifest"` attribute and the [payment method
 manifest](https://w3c.github.io/payment-method-manifest/) URL.
 
-For example, if the manifest is at `https://bobpay.xyz/payment-manifest.json`,
+For example, if the manifest is at `https://bobbucks.dev/payment-manifest.json`,
 the response header would include:
 
 ```http
-Link: <https://bobpay.xyz/payment-manifest.json>; rel="payment-method-manifest"
+Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
 ```
 
 The URL can be a fully-qualified domain name or a relative path. Inspect
-`https://bobpay.xyz/pay/` for network traffic to see an example. You may use a
+`https://bobbucks.dev/pay/` for network traffic to see an example. You may use a
 `curl` command as well:
 
 ```shell
-curl --include https://bobpay.xyz/pay
+curl --include https://bobbucks.dev/pay
 ```
 
 {% Aside %}
@@ -201,9 +200,9 @@ documentation](https://github.com/w3c/payment-request-info/wiki/PaymentMethodPra
 
 ## Step 3: Serve a web app manifest
 
-A [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) is
+A [web app manifest](https://developer.mozilla.org/docs/Web/Manifest) is
 used to define a web app as the name suggests. It's a widely used manifest file
-to [define a Progressive Web App (PWA)](https://web.dev/add-manifest/).
+to [define a Progressive Web App (PWA)](/add-manifest/).
 
 Typical web app manifest would look like this:
 
@@ -231,14 +230,6 @@ Typical web app manifest would look like this:
     "scope": "/",
     "use_cache": false
   },
-  "payment": {
-    "supported_delegations": [
-      "shippingAddress",
-      "payerName",
-      "payerEmail",
-      "payerPhone"
-    ]
-  },
   "start_url": "/",
   "display": "standalone",
   "theme_color": "#3f51b5",
@@ -262,7 +253,7 @@ Typical web app manifest would look like this:
 The information described in a web app manifest is also used to define how a
 payment app appears in the Payment Request UI.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -291,7 +282,7 @@ payment app appears in the Payment Request UI.
       </tr>
       <tr>
         <td>
-          <code><a href="https://developer.mozilla.org/docs/Web/Manifest/serviceworker">serviceworker</a></code>
+          <code><a href="https://developer.mozilla.org/docs/Web/API/Service_Worker_API">serviceworker</a></code>
         </td>
         <td>
         Used to detect the service worker that runs as the web-based payment
@@ -322,8 +313,8 @@ payment app appears in the Payment Request UI.
           <code><a href="https://developer.mozilla.org/docs/Web/Manifest/related_applications">related_applications</a></code>
         </td>
         <td>
-        Used to detect the native app that acts as the native payment app.
-        Find more details at <a href="/native-payment-apps-overview">Android
+        Used to detect the app that acts as the OS-provided payment app.
+        Find more details at <a href="/android-payment-apps-developers-guide/">Android
         payment apps developer guide</a>.
         </td>
       </tr>
@@ -332,17 +323,7 @@ payment app appears in the Payment Request UI.
           <code><a href="https://developer.mozilla.org/docs/Web/Manifest/prefer_related_applications">prefer_related_applications</a></code>
         </td>
         <td>
-        Used to determine which payment app to launch when both a native payment app and a web-based payment app are available.
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <code><a href="https://github.com/sahel-sh/shipping-contact-delegation/blob/master/Explainer.md#edit-just-in-time-jit-installation">payment.supported_delegations</a></code>
-        </td>
-        <td>
-        A string array used to determine the additional information that the
-        payment app can provide. <code>shippingAddress</code>, <code>payerName</code>, <code>payerEmail</code>,
-        and <code>payerPhone</code> are valid values.
+        Used to determine which payment app to launch when both an OS-provided payment app and a web-based payment app are available.
         </td>
       </tr>
     </tbody>
@@ -350,10 +331,9 @@ payment app appears in the Payment Request UI.
   </table>
 </div>
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./web-app-manifest.png"
-       alt="Payment app with an icon.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lyP2t7T5R5bVzqh0LUTx.png", alt="Payment app with an icon.", width="800", height="237" %}
+  <figcaption>
     Payment app label and icon.
   </figcaption>
 </figure>
@@ -362,20 +342,20 @@ The web app manifest's `name` property is used as the payment app name, `icons`
 property is used as the payment app icon.
 
 ## How Chrome determines which payment app to launch
-### Launching the native payment app
+### Launching the platform-specific payment app
 
-To launch the native payment app, the following conditions must be met:
+To launch the platform-specific payment app, the following conditions must be met:
 
 - The `related_applications` field is specified in the web app manifest and:
     - The installed app's package ID and signature match, while the minimum
       version (`min_version`) in the web app manifest is less than or equal to
       the version of the installed application.
 - The `prefer_related_applications` field is `true`.
-- The native payment app is installed and has:
+- The platform-specific payment app is installed and has:
     - An intent filter of `org.chromium.action.PAY`.
     - A payment method identifier specified as the value for the `org.chromium.default_payment_method_name` property.
 
-Check out the [Android payment apps: developer's guide](/native-payment-apps-overview)
+Check out the [Android payment apps: developer's guide](/android-payment-apps-developers-guide/)
 for more details about how to set these up.
 
 {% Label %}[payment handler] /manifest.json{% endLabel %}
@@ -393,7 +373,7 @@ for more details about how to set these up.
 }]
 ```
 
-If the browser has determined that the native payment app is available, the
+If the browser has determined that the platform-specific payment app is available, the
 discovery flow is terminated here. Otherwise it continues to the next step --
 launching the web-based payment app.
 
@@ -414,18 +394,19 @@ advance. [It can be registered just-in-time](#jit-register).
 
 
 ## Understanding the special optimizations
+
 ### How browsers can skip the Payment Request UI and launch a payment app directly
-In Chrome, when `show()` method of `PaymentRequest` is called, the Payment Request API displays a
-browser native UI called the "Payment Request UI". This UI allows users to
-choose a payment app, shipping options and delivery address, and payer's contact
-information. After pressing the **Continue** button in the Payment Request UI, the selected payment app is launched.
-
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/without-skip-the-sheet.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/without-skip-the-sheet.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
+
+In Chrome, when `show()` method of `PaymentRequest` is called, the Payment
+Request API displays a browser-provided UI called the "Payment Request UI". This
+UI allows users to choose a payment app. After pressing the **Continue** button
+in the Payment Request UI, the selected payment app is launched.
+
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/VOKIj5Tqfi2bNPCjtkyi.mp4", autoplay="true", loop="true", muted="true"
+  %}
+  <figcaption>
     Payment Request UI intervenes before launching the payment app.
   </figcaption>
 </figure>
@@ -436,12 +417,11 @@ the browser can delegate fulfillment of that information to payment apps and
 launch a payment app directly without showing the Payment Request UI when
 `show()` is called.
 
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/8T37CEyLisAjwW39dRwB.mp4", autoplay="true", loop="true", muted="true"
+  %}
+  <figcaption>
     Skip the Payment Request UI and launch the payment app directly.
   </figcaption>
 </figure>
@@ -450,8 +430,6 @@ To launch a payment app directly, the following conditions must be met:
 - `show()` is triggered with a user gesture (for example, a mouse click).
 - There is only a single payment app that:
     - Supports the requested payment method identifier.
-    - Can fulfill all the delegated requirements (such as shipping address,
-      payer's phone number, or payer's name).
 
 {% Aside %}
 Safari currently only supports Apple Pay so it always launches the app directly,
@@ -459,6 +437,7 @@ skipping the Payment Request UI.
 {% endAside %}
 
 ### When is a web-based payment app registered just-in-time (JIT)? {: #jit-register}
+
 Web-based payment apps can be launched without the user's explicit prior visit
 to the payment app website and registering the service worker. The service
 worker can be registered just-in-time when the user chooses to pay with the
@@ -478,8 +457,8 @@ single payment app.
 {% endAside %}
 
 ## Next Steps
-Now that you have your payment app discoverable, learn how to develop a native
+Now that you have your payment app discoverable, learn how to develop a platform-specific
 payment app and a web-based payment app.
 
 - [Android payment apps: developer's guide](/android-payment-apps-developers-guide)
-- Web based payment apps developer guide (Coming soon)
+- [Web based payment apps developer guide](/web-based-payment-apps-overview)
diff --git a/src/site/content/en/payments/setting-up-a-payment-method/web-app-manifest.png b/src/site/content/en/payments/setting-up-a-payment-method/web-app-manifest.png
deleted file mode 100644
index 77a81ad5528..00000000000
Binary files a/src/site/content/en/payments/setting-up-a-payment-method/web-app-manifest.png and /dev/null differ
diff --git a/src/site/content/en/payments/web-based-payment-apps-overview/index.md b/src/site/content/en/payments/web-based-payment-apps-overview/index.md
index a295ad0ec39..5264639bfaf 100644
--- a/src/site/content/en/payments/web-based-payment-apps-overview/index.md
+++ b/src/site/content/en/payments/web-based-payment-apps-overview/index.md
@@ -6,28 +6,31 @@ subhead: |
 authors:
   - agektmr
 date: 2020-07-17
+updated: 2021-09-14
 description: |
   Learn how to adapt your web-based payment app to work with Web Payments and provide a better user experience for customers.
 tags:
+  - blog
   - payments
+feedback:
+  - api
 ---
 
 [Web Payments](/empowering-payment-apps-with-web-payments/#what-is-web-payments)
 brings to the web a browser's built-in interface that allows users to enter
 required payment information easier than ever before. The APIs can invoke
-web-based payment apps, as well as [native payment
+web-based payment apps, as well as [Android payment
 apps](/android-payment-apps-developers-guide/).
 
 {% include 'content/payments/browser-compatibility.njk' %}
 
 ## Benefits of web-based payment apps
 
-<figure class="w-figure" style="width:300px; margin:auto;">
-  <video controls autoplay loop muted class="w-screenshot">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.mp4" type="video/mp4">
-  </video>
-  <figcaption class="w-figcaption">
+<figure>
+  {% Video
+    src="video/YLflGBAPWecgtKJLqCJHSzHqe2J2/8T37CEyLisAjwW39dRwB.mp4", autoplay="true", loop="true", muted="true"
+  %}
+  <figcaption>
     Checkout flow with a web-based payment app.
   </figcaption>
 </figure>
@@ -37,7 +40,7 @@ apps](/android-payment-apps-developers-guide/).
   redirects or pop-ups.
 * Web Payments APIs can be integrated into established websites allowing you to
   leverage the existing user base.
-* Unlike native apps, web-based payment apps don't need to be installed in
+* Unlike platform-specific apps, web-based payment apps don't need to be installed in
   advance.
 
 ## How does a web-based payment app work?
@@ -46,7 +49,7 @@ Web-based payment apps are built using the standard web technologies. Every
 web-based payment app must include a service worker.
 
 {% Aside %}
-A [Service worker](https://developers.google.com/web/fundamentals/primers/service-workers)
+A [Service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/)
 is an event-driven script that runs in the background even if the registering
 website is not open in the browser. Service workers enable websites to work
 offline and send push notifications, because they can respond to requests with
@@ -69,11 +72,11 @@ transaction](/life-of-a-payment-transaction/).
 In order for a merchant to use your payment app, they need to use the [Payment
 Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API) and
 specify the payment method you support using the [payment method
-identifier](/setting-up-a-payment-method/#step-1:-provide-the-payment-method-identifier).
+identifier](/setting-up-a-payment-method/#step-1-provide-the-payment-method-identifier).
 
 If you have a payment method identifier that is unique to your payment app, you
 can set up your own [payment method
-manifest](/setting-up-a-payment-method/#step-2:-serve-the-payment-method-manifest)
+manifest](/setting-up-a-payment-method/#step-2-serve-the-payment-method-manifest)
 and let browsers discover your app.
 
 Learn how it works and how you can set up a new payment method in [Setting up a
@@ -89,15 +92,14 @@ if used in a top-level document, with only a few exceptions:
 * `window.open()` is disabled.
 
 {% Aside 'caution' %}
-Payment Handler API is only supported in Chrome as of July 2020. However, since
-Chromium based browsers already have the implementation, some of them may expose
-the API in the future. Also, [Mozilla recently announced it's implementing the
-API](https://groups.google.com/g/mozilla.dev.platform/c/gBQp1URD1lE/m/Fswh-5-ZBgAJ).
+Payment Handler API is only supported in Chrome as of January 2023. However,
+since Chromium based browsers already have the implementation, some of them may
+expose the API in the future.
 {% endAside %}
 
 ### WebAuthn support
 
-[WebAuthn](https://developers.google.com/web/updates/2018/05/webauthn) is an
+[WebAuthn](https://developer.chrome.com/blog/webauthn/) is an
 authentication mechanism based on the public key cryptography. You can let users
 sign-in through a biometric verification. WebAuthn is already supported in the
 payment handler window on Chrome, and the standard body is looking into creating
@@ -106,7 +108,7 @@ an even-tighter connection between Web Payments and WebAuthn.
 ### Credential Management API support
 
 [The Credential Management
-API](https://developers.google.com/web/fundamentals/security/credential-management/)
+API](/security-credential-management/)
 provides a programmatic interface between the site and the browser for seamless
 sign-in across devices. You can let users sign-in to your website automatically
 based on the information stored to the browser's password manager. It's planned
@@ -115,7 +117,7 @@ development](https://bugs.chromium.org/p/chromium/issues/detail?id=1052383).
 
 ### WebOTP support
 
-[The Web OTP API](/web-otp/) helps you programmatically obtain an
+[The WebOTP API](/web-otp/) helps you programmatically obtain an
 OTP from an SMS message and verify a phone number for the user more easily. It's
 planned to be enabled in Chrome, but still [under
 development](https://bugs.chromium.org/p/chromium/issues/detail?id=1051930).
@@ -128,5 +130,5 @@ tracker](https://bugs.chromium.org/u/maxlg@chromium.org/hotlists/Expandable-paym
 To start building a web-based payment app, you have three distinct parts to implement:
 
 * [Registering a web-based payment app](/registering-a-web-based-payment-app)
-* Orchestrating a payment transaction on the service worker
-* Handling optional payment information on the service worker
+* [Orchestrating payment transactions with a service worker](/orchestrating-payment-transactions)
+* [Handling optional payment information with a service worker](/handling-optional-payment-information)
diff --git a/src/site/content/en/payments/web-payments-overview/index.md b/src/site/content/en/payments/web-payments-overview/index.md
new file mode 100644
index 00000000000..7d54054ed78
--- /dev/null
+++ b/src/site/content/en/payments/web-payments-overview/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: Web Payments overview
+subhead: |
+  Learn more about Web Payments and how they work.
+authors:
+  - agektmr
+date: 2018-09-10
+updated: 2021-09-14
+description: |
+  Learn more about Web Payments and how they work.
+tags:
+  - payments
+feedback:
+  - api
+---
+
+
+Web Payments is an emerging web standard being developed by the W3C to
+simplify online payments and enable a broader set of players to participate
+easily in the payments ecosystem on the web. The standards are flexible; they
+work with various types of payment systems and are intended to work on any
+browser on any device, payment method, or payment service provider. This
+flexibility enables development simplicity, deployment consistency, and future
+compatibility with emerging payment technologies.
+
+## Benefits of Web Payments
+
+**For consumers**, they simplify checkout flow, by making it a few taps instead
+of typing small characters many times on a virtual keyboard.
+
+**For merchants**, they make it easier to implement with a variety of payment
+options already filtered for the customer.
+
+**For payment handlers**, they allow bringing any type of payment methods to the
+web with relatively easy integration.
+
+**For payment service providers**, they bring new payment methods and enhance
+the ability of businesses to serve more customers with a better developer
+experience and more secure solutions.
+
+## Three principles of Web Payments
+
+<section style="display:flex;background-color:#f7f7f7;padding-bottom:32px;">
+  <div style="min-width:50%;padding-top:32px;">
+    {% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/voaNzDaJcKQFBwtuFem7.png", alt="Standard and Open", width="800", height="508" %}
+  </div>
+  <div style="min-width:50%">
+    <h3>Standard and open</h3>
+    Web Payments are an open payment standard for the web platform for the first time
+    in history. They are available for anyone to implement.</div>
+</section>
+<section style="display:flex;padding-bottom:32px;">
+  <div style="min-width:50%">
+    <h3>Easy and consistent</h3>
+    Web Payments make checkout easy for the user, by reusing stored
+payments and address information and removing the need for the user to fill in checkout forms.
+Since the UI is implemented by the browser natively, users see a familiar and consistent checkout
+experience on any website that uses the standard.</div>
+  <div style="min-width:50%;padding-top:32px;">
+    {% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/DXwSsz8wgEO3ffCT2s15.png", alt="Easy and Consistent", width="800", height="508" %}
+  </div>
+</section>
+<section style="display:flex;background-color:#f7f7f7;padding-bottom:32px;">
+  <div style="min-width:50%;padding-top:32px;">
+    {% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9ksUqSzpIvHLiazAoyTk.png", alt="Secure and Flexible", width="800", height="508" %}
+  </div>
+  <div style="min-width:50%">
+    <h3>Secure and flexible</h3>
+    Web Payments provide industry-leading payment technology to the
+web, and can easily integrate a secure payment solution.</div>
+</section>
+
+## Next up
+
+Learn [How payment ecosystem works](/how-payment-ecosystem-works) with Web
+Payments.
+
+
diff --git a/src/site/content/en/podcasts/index.njk b/src/site/content/en/podcasts/index.njk
index 43858542ef1..c98a22b30ed 100644
--- a/src/site/content/en/podcasts/index.njk
+++ b/src/site/content/en/podcasts/index.njk
@@ -1,5 +1,5 @@
 ---
-layout: layout
+layout: default
 title: Podcasts
 description: |
   Level up your web development skills by listening to podcasts from Google
@@ -8,67 +8,41 @@ description: |
   build with best practices in mind.
 date: 2020-04-06
 ---
-<div class="podcast-landing-page">
-  <header class="w-masthead-about">
-    <div class="w-masthead-about__container">
-      <div class="w-masthead-about__left">
-        <h1 class="w-headline--two w-font-weight--medium w-mt--non">
-          Podcasts
-        </h1>
-        <p>
-          Level up your web development skills by listening to podcasts from
-          Google Developers. Our podcasts highlight the latest in modern web
-          development with pro-tips, insights, and techniques to help you learn
-          what's new and how to build with best practices in mind.
-        </p>
-      </div>
-      <div class="w-masthead-about__right">
-        <img class="w-masthead-about__image" src="/images/headers/about.svg" alt="">
+
+<div class="wide-card-index">
+
+  {# Hero starts #}
+  <header class="region bg-mid-bg">
+    <div class="wrapper">
+      <div class="headline all-center flow">
+        <h1 class="headline__title">{{ title }}</h1>
+        <p>{{ description }}</p>
       </div>
     </div>
   </header>
+  {# Hero ends #}
 
-  <section>
-    <div class="w-layout-container w-pb--non">
-      <header class="w-text--center">
-        <h2 class="w-headline--two-faded w-mt--non">
-          Featured podcasts
-        </h2>
-      </header>
-    </div>
+  {# Cards #}
+  <div class="region wrapper" data-size="narrow">
+    <nav class="auto-grid" aria-label="podcasts">
+      {% for podcast in podcasts %}
+        <a
+          href="{{ podcast.url }}"
+          class="card"
+          data-category="web.dev"
+          data-label="Podcasts: {{podcast.title}}"
+          data-action="click"
+          role="listitem"
+        >
+          <img src="{{ podcast.thumbnail }}" alt="" loading="lazy" width="100%" height="240" />
+          <div class="card__content flow">
+            <h2 class="card__heading text-size-2">{{ podcast.title }}</h2>
+            <p class="text-size-0">{{ podcast.description }}</p>
+          </div>
+        </a>
+      {% endfor %}
+    </nav>
+  </div>
+  {# Cards end #}
 
-    <div class="w-grid w-pb--std">
-      <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--two" role="list">
-        {% for podcast in podcasts %}
-          <a
-            href="{{ podcast.url }}"
-            class="w-card gc-analytics-event"
-            data-category="web.dev"
-            data-label="Podcasts: {{podcast.title}}"
-            data-action="click"
-            role="listitem"
-          >
-            <div class="w-path-card">
-              <div class="w-path-card__cover">
-                <img
-                  class="w-path-card__cover-image w-path-card__cover-image--fill"
-                  src="{{ podcast.thumbnail }}"
-                  alt=""
-                  loading="lazy"
-                  width="100%"
-                  height="240"
-                />
-              </div>
-              <div class="w-path-card__desc">
-                <h2 class="w-path-card__headline">{{ podcast.title }}</h2>
-                <p class="w-path-card__subhead">
-                  {{ podcast.description }}
-                </p>
-              </div>
-            </div>
-          </a>
-        {% endfor %}
-      </div>
-    </div>
-  </section>
 </div>
diff --git a/src/site/content/en/progressive-web-apps/add-manifest/index.md b/src/site/content/en/progressive-web-apps/add-manifest/index.md
index c4714a4b5a2..4cdb3297b0a 100644
--- a/src/site/content/en/progressive-web-apps/add-manifest/index.md
+++ b/src/site/content/en/progressive-web-apps/add-manifest/index.md
@@ -4,37 +4,46 @@ title: Add a web app manifest
 authors:
   - petelepage
   - beaufortfrancois
+  - thomassteiner
 date: 2018-11-05
-updated: 2020-05-28
+updated: 2022-09-14
 description: |
   The web app manifest is a simple JSON file that tells the browser about your
   web application and how it should behave when installed on the user's mobile
   device or desktop.
 tags:
   - progressive-web-apps
+  - web-app-manifest
+feedback:
+  - api
 ---
 
 The web app manifest is a JSON file that tells the browser about your
 Progressive Web App and how it should behave when installed on the user's
 desktop or mobile device. A typical manifest file includes the app name, the
 icons the app should use, and the URL that should be opened when the
-app is launched.
+app is launched, among other things.
+{% BrowserCompat 'html.manifest.name' %}
 
-Manifest files are [supported](https://developer.mozilla.org/en-US/docs/Web/Manifest#Browser_compatibility) in Chrome, Edge, Firefox, UC Browser, Opera,
-and the Samsung browser. Safari has partial support.
+## Create the manifest file {: #create }
 
-## Create the manifest.webmanifest file {: #create }
+The manifest file can have any name, but is commonly named `manifest.json` and
+served from the root (your website's top-level directory). The specification
+suggests the extension should be `.webmanifest`, but browsers also support
+`.json` extensions, which may be easier for developers to understand.
 
-The manifest file can have any name, but is commonly named
-`manifest.webmanifest` and served from the root (your website's top-level
-directory).
+A typical manifest looks something like this:
 
 ```json
 {
   "short_name": "Weather",
   "name": "Weather: Do I need an umbrella?",
-  "description": "Weather forecast information",
   "icons": [
+    {
+      "src": "/images/icons-vector.svg",
+      "type": "image/svg+xml",
+      "sizes": "512x512"
+    },
     {
       "src": "/images/icons-192.png",
       "type": "image/png",
@@ -46,6 +55,7 @@ directory).
       "sizes": "512x512"
     }
   ],
+  "id": "/?source=pwa",
   "start_url": "/?source=pwa",
   "background_color": "#3367D6",
   "display": "standalone",
@@ -66,6 +76,21 @@ directory).
       "url": "/tomorrow?source=pwa",
       "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
     }
+  ],
+  "description": "Weather forecast information",
+  "screenshots": [
+    {
+      "src": "/images/screenshot1.png",
+      "type": "image/png",
+      "sizes": "540x720",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "/images/screenshot2.jpg",
+      "type": "image/jpg",
+      "sizes": "720x540",
+      "form_factor": "wide"
+    }
   ]
 }
 ```
@@ -78,6 +103,21 @@ You must provide at least the `short_name` or `name` property. If both are
 provided, `short_name` is used on the user's home screen, launcher, or other
 places where space may be limited. `name` is used when the app is installed.
 
+{% Aside %}
+Operating systems usually expect to have a title for each app window. This
+title is displayed in various window-switching surfaces such as
+<kbd>alt</kbd>+<kbd>tab</kbd>, overview mode, and the shelf window list.
+
+For PWAs running in standalone mode, Chromium prepends the `short_name`
+(or, if it's not available, the `name`) to what is
+specified in the `<title>` of the HTML document to prevent disguise attacks
+where standalone apps might try to be mistaken, for example, for operating
+system dialogs.
+
+In consequence, developers should _not_ repeat the
+application name in the `<title>` when the app is running in standalone mode.
+{% endAside %}
+
 #### `icons` {: #icons }
 
 When a user installs your PWA, you can define a set of icons for the browser
@@ -89,12 +129,27 @@ include the `src`, a `sizes` property, and the `type` of image. To use
 icons on Android, you'll also need to add `"purpose": "any maskable"` to the
 `icon` property.
 
-For Chrome, you must provide at least a 192x192 pixel icon, and a 512x512
-pixel icon. If only those two icon sizes are provided, Chrome will
-automatically scale the icons to fit the device. If you'd prefer to scale your
+For Chromium, you must provide at least a 192x192 pixel icon, and a 512x512
+pixel icon. If only those two icon sizes are provided, Chrome
+automatically scales the icons to fit the device. If you'd prefer to scale your
 own icons, and adjust them for pixel-perfection, provide icons in increments
 of 48dp.
 
+{% Aside %}
+Chromium-based browsers also support SVG icons which can be scaled arbitrarily
+without looking pixelated and that support advanced features like
+[responsiveness to `prefers-color-scheme`](https://blog.tomayac.com/2021/07/21/dark-mode-web-app-manifest-app-icons/),
+with the caveat that the icons do not update live, but remain in the
+state they were in at install time.
+
+To use SVG icons safely, you should always specify a rasterized icon as a
+fallback for browsers that do not support SVG icons.
+{% endAside %}
+
+#### `id` {: #id }
+
+The `id` property allows you to explicitly define the identifier used for your application. Adding the `id` property to the manifest removes the dependency on the `start_url` or the location of the manifest, and makes it possible for them to be updated in the future. For more information, see [Uniquely identifying PWAs with the web app manifest id property](https://developer.chrome.com/blog/pwa-manifest-id/).
+
 #### `start_url` {: #start-url }
 
 The `start_url` is required and tells the browser where your application
@@ -113,10 +168,11 @@ application is first launched on mobile.
 #### `display` {: #display }
 
 You can customize what browser UI is shown when your app is launched. For
-example, you can hide the address bar and browser chrome. Games can even
-be made to launch full screen.
+example, you can hide the address bar and browser
+user interface elements. Games can even
+be made to launch full screen. The `display` property takes one of the following values:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table id="display-params">
     <thead>
       <tr>
@@ -135,13 +191,11 @@ be made to launch full screen.
       <tr>
         <td><code>standalone</code></td>
         <td>
-          Opens the web app to look and feel like a standalone native
+          Opens the web app to look and feel like a standalone
           app. The app runs in its own window, separate from the browser, and
-          hides standard browser UI elements like the URL bar.
-          <figure class="w-figure">
-            <img class="w-screenshot"
-                src="standalone-pwa-window.png"
-                alt="An example of a PWA window with standalone display.">
+          hides standard browser UI elements such as the URL bar.
+          <figure>
+            {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/XdBsDeRZozIyXyiXA59n.png", alt="An example of a PWA window with standalone display.", width="800", height="196" %}
           </figure>
         </td>
       </tr>
@@ -151,10 +205,8 @@ be made to launch full screen.
           This mode is similar to <code>standalone</code>, but provides the
           user a minimal set of UI elements for controlling navigation (such
           as back and reload).
-          <figure class="w-figure">
-            <img class="w-screenshot"
-                src="minimal-ui-pwa-window.png"
-                alt="An example of a PWA window with minimal-ui display.">
+          <figure>
+            {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/trPwjcMio7tBKGBNoT9u.png", alt="An example of a PWA window with minimal-ui display.", width="800", height="196" %}
           </figure>
         </td>
       </tr>
@@ -166,6 +218,52 @@ be made to launch full screen.
   </table>
 </div>
 
+#### `display_override` {: #display-override }
+
+Web apps can choose how they are displayed by setting a `display` mode in their manifest as
+[explained above](#display). Browsers are *not* required to support all display modes, but they
+*are* required to support the
+[spec-defined fallback chain](https://w3c.github.io/manifest/#dfn-fallback-display-mode)
+(`"fullscreen"` → `"standalone"` → `"minimal-ui"` → `"browser"`). If they don't support a given
+mode, they fall back to the next display mode in the chain. This inflexible behavior can be
+problematic in rare cases. For example, a developer cannot request `"minimal-ui"` without being
+forced back into the `"browser"` display mode when `"minimal-ui"` is not supported.
+Another problem is that the current behavior makes it impossible to introduce new display
+modes in a backward compatible way, since explorations like tabbed application mode don't have a
+natural place in the fallback chain.
+
+These problems are solved by the `display_override` property, which the browser considers *before*
+the `display` property. Its value is a sequence of strings that are considered in the listed order, and the
+first supported display mode is applied. If none are supported, the browser falls back to evaluating
+the `display` field.
+
+Consider the example below. (The details of
+[`"window-control-overlay"`](/window-controls-overlay/) are out-of-scope for
+this article.)
+
+```json
+{
+  "display_override": ["window-control-overlay", "minimal-ui"],
+  "display": "standalone",
+}
+```
+
+As stated, the browser will look at `display_override` first.
+
+1. `"window-control-overlay"`
+1. `"minimal-ui"`
+
+If neither option is available, it falls back to `display`. If `"standalone"` is
+not available, it resumes spec-defined fallabck chain from that point.
+
+1. `"standalone"`
+1. `"minimal-ui"`
+1. `"browser"`
+
+{% Aside %}
+  The browser will not consider `display_override` unless `display` is also present.
+{% endAside %}
+
 #### `scope` {: #scope }
 
 The `scope` defines the set of URLs that the browser considers to be within your
@@ -175,9 +273,9 @@ your web app. Your `start_url` must reside within the `scope`.
 
 {% Aside 'caution' %}
 If the user clicks a link in your app that navigates outside of the
-`scope`, the link will open and render within the existing PWA window. If
+`scope`, the link opens and renders within the existing PWA window. If
 you want the link to open in a browser tab, you must add `target="_blank"`
-to the `<a>` tag. On Android, links with `target="_blank"` will open in a
+to the `<a>` tag. On Android, links with `target="_blank"` open in a
 [Chrome Custom Tab](https://developer.chrome.com/multidevice/android/customtabs).
 {% endAside %}
 
@@ -198,25 +296,67 @@ The `theme_color` sets the color of the tool bar, and may be reflected in
 the app's preview in task switchers. The `theme_color` should match the
 `meta` theme color specified in your document head.
 
-<figure class="w-figure">
-  <img class="w-screenshot"
-      src="theme_color-pwa-window.png"
-      alt="An example of a PWA window with custom theme_color.">
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8mkBdT3O0FZLo0PUppvv.png", alt="An example of a PWA window with custom theme_color.", width="800", height="196" %}
+  <figcaption>
+    An example of a PWA window with custom theme_color.
+  </figcaption>
 </figure>
 
+As of Chromium&nbsp;93 and Safari&nbsp;15, you can adjust this color in a
+media query with the `media` attribute of the `meta` theme color element. The
+first one that matches will be picked. For example, you could have one color for
+light mode and another one for dark mode. At the time of writing, you can't
+define those in your manifest. See [w3c/manifest#975 GitHub
+issue](https://github.com/w3c/manifest/issues/975).
+
+```html
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">
+```
+
 #### `shortcuts` {: #shortcuts }
 
 The `shortcuts` property is an array of [app shortcut](/app-shortcuts) objects
 whose goal is to provide quick access to key tasks within your app. Each member
 is a dictionary that contains at least a `name` and a `url`.
 
+#### `description` {: #description }
+
+The `description` property describes the purpose of your app.
+
+#### `screenshots` {: #screenshots }
+
+The `screenshots` property is an array of image objects representing your app
+in common usage scenarios. Each object must include the `src`, a `sizes`
+property, and the `type` of image.  The `form_factor` property is optional.
+You can set it either to `"wide"` for screenshots applicable to wide screens
+only or `"narrow"` for narrow screenshots. You should only use it when the
+layout varies by screen size.
+
+In Chrome, the image must respond to certain criteria:
+
+* Width and height must be at least 320px and at most 3840px.
+* The maximum dimension can't be more than 2.3 times as long as the minimum
+  dimension.
+* All screenshots matching the appropriate form factor must have the same
+  aspect ratio.
+
+<figure>
+  {% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/5SlCnibmZHqkXdGVgPZY.jpeg", alt="Screenshots of richer installation UI on desktop and mobile", width="800", height="386" %}
+  <figcaption>
+    Richer installation UI on desktop and mobile.
+  </figcaption>
+</figure>
+
 ## Add the web app manifest to your pages {: #link-manifest }
 
 After creating the manifest, add a `<link>` tag to all the pages of your
 Progressive Web App. For example:
 
 ```html
-<link rel="manifest" href="/manifest.webmanifest">
+<link rel="manifest" href="/manifest.json">
 ```
 
 {% Aside 'gotchas' %}
@@ -230,10 +370,16 @@ include `crossorigin="use-credentials"` in the manifest tag.
 To verify your manifest is setup correctly, use the **Manifest** pane in the
 **Application** panel of Chrome DevTools.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled"
-       src="lh-manifest.png"
-       alt="The application panel in Chrome Devtools with the manifest tab selected.">
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FpIOY0Ak6FAA5xMuB9IT.png", alt="The application panel in Chrome Devtools with the manifest tab selected.", width="800", height="601" %}
+  <figcaption>
+    Test your manifest in DevTools.
+  </figcaption>
+</figure>
+
+<figure>
+
 </figure>
 
 This pane provides a human-readable version of many of your manifest's
@@ -261,12 +407,10 @@ Chrome will choose the icon that closely matches the device resolution for the
 device. Providing 192px and 512px icons is sufficient for most cases, but
 you can provide additional icons for pixel perfection.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ## Further reading
 
 There are several additional properties that can be added to the web app
 manifest. Refer to the [MDN Web App Manifest documentation][mdn-manifest]
 for more information.
 
-[mdn-manifest]: https://developer.mozilla.org/en-US/docs/Web/Manifest
+[mdn-manifest]: https://developer.mozilla.org/docs/Web/Manifest
diff --git a/src/site/content/en/progressive-web-apps/add-manifest/lh-manifest.png b/src/site/content/en/progressive-web-apps/add-manifest/lh-manifest.png
deleted file mode 100644
index 62201004d22..00000000000
Binary files a/src/site/content/en/progressive-web-apps/add-manifest/lh-manifest.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/add-manifest/minimal-ui-pwa-window.png b/src/site/content/en/progressive-web-apps/add-manifest/minimal-ui-pwa-window.png
deleted file mode 100644
index f2cf7ceae04..00000000000
Binary files a/src/site/content/en/progressive-web-apps/add-manifest/minimal-ui-pwa-window.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/add-manifest/standalone-pwa-window.png b/src/site/content/en/progressive-web-apps/add-manifest/standalone-pwa-window.png
deleted file mode 100644
index 8cc53c2fc54..00000000000
Binary files a/src/site/content/en/progressive-web-apps/add-manifest/standalone-pwa-window.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/add-manifest/theme_color-pwa-window.png b/src/site/content/en/progressive-web-apps/add-manifest/theme_color-pwa-window.png
deleted file mode 100644
index 30820bdf9f2..00000000000
Binary files a/src/site/content/en/progressive-web-apps/add-manifest/theme_color-pwa-window.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image0.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image0.png
deleted file mode 100644
index ec82e12a1c8..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image0.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image1.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image1.png
deleted file mode 100644
index 2baf8f38442..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image1.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image10.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image10.png
deleted file mode 100644
index b15a7a3447d..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image10.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image11.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image11.png
deleted file mode 100644
index a3ab7420e5e..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image11.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image12.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image12.png
deleted file mode 100644
index a713d1b9bda..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image12.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image13.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image13.png
deleted file mode 100644
index 516dfbae56b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image13.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image14.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image14.png
deleted file mode 100644
index 832dfac9779..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image14.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image15.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image15.png
deleted file mode 100644
index bac6f5b78e4..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image15.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image16.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image16.png
deleted file mode 100644
index 2264381efea..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image16.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image17.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image17.png
deleted file mode 100644
index ff7fe0eee94..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image17.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image18.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image18.png
deleted file mode 100644
index 1ea77bdfc5c..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image18.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image19.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image19.png
deleted file mode 100644
index a332f070f4b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image19.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image2.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image2.png
deleted file mode 100644
index c4a9a54e65f..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image2.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image20.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image20.png
deleted file mode 100644
index 5db34141a02..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image20.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image21.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image21.png
deleted file mode 100644
index fc70d066363..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image21.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image22.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image22.png
deleted file mode 100644
index 510178e1496..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image22.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image3.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image3.png
deleted file mode 100644
index 9aa6a098486..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image3.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image4.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image4.png
deleted file mode 100644
index 8b2c0a2b4bb..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image4.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image5.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image5.png
deleted file mode 100644
index 609d375b12b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image5.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image6.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image6.png
deleted file mode 100644
index ac03bcf3e14..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image6.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image7.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image7.png
deleted file mode 100644
index 8cea168edbc..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image7.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image8.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image8.png
deleted file mode 100644
index df257ea49ee..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image8.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/image9.png b/src/site/content/en/progressive-web-apps/app-like-pwas/image9.png
deleted file mode 100644
index ffc23949c7b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/app-like-pwas/image9.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/app-like-pwas/index.md b/src/site/content/en/progressive-web-apps/app-like-pwas/index.md
index d95e0e3a3b4..8bc23af4549 100644
--- a/src/site/content/en/progressive-web-apps/app-like-pwas/index.md
+++ b/src/site/content/en/progressive-web-apps/app-like-pwas/index.md
@@ -6,38 +6,38 @@ authors:
   - thomassteiner
 description: |
   Learn how to make your Progressive Web App feel like a "real" app by understanding
-  how to implement native app patterns with web technologies.
+  how to implement platform-specific app patterns with web technologies.
 date: 2020-06-15
-updated: 2020-07-23
+updated: 2022-03-25
 tags:
   - capabilities
 ---
 
-When you play Progressive Web App buzzword bingo, it is a safe bet to set on "PWAs are just websites". Microsoft's PWA documentation [agrees](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), we [say it](https://web.dev/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites) on this very site, and even PWA nominators Frances Berriman and Alex Russell [write so](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites), too. Yes, PWAs are just websites, but they are also way more than that. If done right, a PWA will not feel like a website, but like a "real" app. Now what does it mean to feel like a real app?
+When you play Progressive Web App buzzword bingo, it is a safe bet to set on "PWAs are just websites". Microsoft's PWA documentation [agrees](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), we [say it](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites) on this very site, and even PWA nominators Frances Berriman and Alex Russell [write so](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites), too. Yes, PWAs are just websites, but they are also way more than that. If done right, a PWA will not feel like a website, but like a "real" app. Now what does it mean to feel like a real app?
 
-In order to answer this question, let me use the native Apple [Podcasts](https://support.apple.com/en-us/HT201859) app as an example.
+To answer this question, let me use the Apple [Podcasts](https://support.apple.com/en-us/HT201859) app as an example.
 It is available on macOS on desktop and on iOS (and iPadOS respectively) on mobile.
 While Podcasts is a media application, the core ideas I illustrate with its help apply to other categories of apps, too.
 
-<figure class="w-figure">
-  <img src="./image0.png" alt="An iPhone and a MacBook side by side, both running the Podcasts application." class="w-screenshot" width="600">
-  <figcaption class="w-figcaption">Apple Podcasts on iPhone and on macOS (<a href="https://support.apple.com/en-us/HT201859">Source</a>).</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="An iPhone and a MacBook side by side, both running the Podcasts application.", width="800", height="617" %}
+  <figcaption>Apple Podcasts on iPhone and on macOS (<a href="https://support.apple.com/en-us/HT201859">Source</a>).</figcaption>
 </figure>
 
 {% Aside 'caution' %}
-Each native app feature that is listed below has a **How to do this on the web**
+Each iOS/Android/desktop app feature that is listed below has a **How to do this on the web**
 component that you can open for more details.
-Please note that not all browsers on the various operating systems support all the listed APIs
+Note that not all browsers on the various operating systems support all the listed APIs
 or functionalities. Be sure to carefully review the compatibility notes in the linked articles.
 {% endAside %}
 
 ## Capable of running offline
 
-If you take a step back and think of some of the native applications you may have on your mobile phone or desktop computer, one thing clearly stands out: you never get nothing. In the Podcasts app, even if I am offline, there is always something. When there is no network connection, the app naturally still opens. The **Top Charts** section does not show any content, but instead falls back to a **Can't connect right now** message paired with a **Retry** button. It may not be the most welcoming experience, but I get something.
+If you take a step back and think of the platform-specific applications you have on your mobile phone or desktop computer, one thing clearly stands out: you never get nothing. In the Podcasts app, even if I am offline, there is always something. When there is no network connection, the app naturally still opens. The **Top Charts** section does not show any content, but instead falls back to a **Can't connect right now** message paired with a **Retry** button. It may not be the most welcoming experience, but I get something.
 
-<figure class="w-figure">
-  <img src="./image4.png" alt="The Podcasts app showing a 'Cannot connect right now.' info message when no network connection is available." width="600">
-  <figcaption class="w-figcaption">Podcasts app without network connection.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="The Podcasts app showing a 'Cannot connect right now.' info message when no network connection is available.", width="800", height="440" %}
+  <figcaption>Podcasts app without network connection.</figcaption>
 </figure>
 
 {% Details %}
@@ -56,9 +56,9 @@ If you take a step back and think of some of the native applications you may hav
 While offline, via the left-hand drawer, I can still navigate to the **Downloaded** section and enjoy downloaded podcast episodes that are ready to be played
 and are displayed with all metadata like artwork and descriptions.
 
-<figure class="w-figure">
-  <img src="./image16.png" alt="Podcasts app with a downloaded episode of a podcast playing." width="600">
-  <figcaption class="w-figcaption">Downloaded podcast episodes can be played even without network.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="Podcasts app with a downloaded episode of a podcast playing.", width="800", height="440" %}
+  <figcaption>Downloaded podcast episodes can be played even without network.</figcaption>
 </figure>
 
 {% Details %}
@@ -66,22 +66,22 @@ and are displayed with all metadata like artwork and descriptions.
   How to do this on the web
 {% endDetailsSummary %}
   Previously downloaded media content can be served from the cache, for example using the
-  <a href="https://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av">Serve cached audio and video</a>
-  recipe from the <a href="https://developers.google.com/web/tools/workbox">Workbox</a> library.
-  Other content can always be stored in the cache, or in IndexedDB. Read the article <a href="https://web.dev/storage-for-the-web/">Storage for the web</a>
+  <a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Serve cached audio and video</a>
+  recipe from the <a href="https://developer.chrome.com/docs/workbox/">Workbox</a> library.
+  Other content can always be stored in the cache, or in IndexedDB. Read the article <a href="/storage-for-the-web/">Storage for the web</a>
   for all details and to know when to use what storage technology.
   If you have data that should be persistently stored without the risk of being purged when the
   available amount of memory gets low, you can use the
-  <a href="https://web.dev/persistent-storage/">Persistent Storage API</a>.
+  <a href="/persistent-storage/">Persistent Storage API</a>.
 {% endDetails %}
 
 ## Proactive background downloading
 
-When I am back online, I can of course search for content with a query like `http 203`, and when I decide to subscribe to the search result, the [HTTP 203 podcast](https://web.dev/podcasts/), the latest episode of the series is immediately downloaded, no questions asked.
+When I am back online, I can of course search for content with a query like `http 203`, and when I decide to subscribe to the search result, the [HTTP 203 podcast](/podcasts/), the latest episode of the series is immediately downloaded, no questions asked.
 
-<figure class="w-figure">
-  <img src="./image10.png" alt="The Podcasts app downloading the latest episode of a podcast immediately after subscribing." width="600">
-  <figcaption class="w-figcaption">After subscribing to a podcast, the latest episode is immediately downloaded.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="The Podcasts app downloading the latest episode of a podcast immediately after subscribing.", width="800", height="658" %}
+  <figcaption>After subscribing to a podcast, the latest episode is immediately downloaded.</figcaption>
 </figure>
 
 {% Details %}
@@ -97,50 +97,50 @@ When I am back online, I can of course search for content with a query like `htt
 
 The Podcasts app integrates naturally with other applications. For example, when I right-click an episode that I like, I can share it to other apps on my device, like the Messages app. It also naturally integrates with the system clipboard. I can right-click any episode and copy a link to it.
 
-<figure class="w-figure">
-  <img src="./image19.png" class="w-screenshot" alt="The Podcasts app's context menu invoked on a podcast episode with the 'Share Episode > Messages' option selected." width="600">
-  <figcaption class="w-figcaption">Sharing a podcast episode to the Messages app.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="The Podcasts app's context menu invoked on a podcast episode with the 'Share Episode > Messages' option selected.", width="800", height="392" %}
+  <figcaption>Sharing a podcast episode to the Messages app.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/web-share/">Web Share API</a> and the <a href="https://web.dev/web-share-target/">Web Share Target API</a>
+  The <a href="/web-share/">Web Share API</a> and the <a href="/web-share-target/">Web Share Target API</a>
   allow your app to share and receive texts, files, and links to and from other applications on the device.
   Although it is not yet possible for a web app to add menu items to the operating system's built-in right-click menu, there are lots of other ways to link to and from other apps on the device.
-  With the <a href="https://web.dev/image-support-for-async-clipboard/">Async Clipboard API</a>, you can programmatically read and write
+  With the <a href="/image-support-for-async-clipboard/">Async Clipboard API</a>, you can programmatically read and write
   text and image data (PNG images) to the system clipboard.
-  On Android, you can use the <a href="https://web.dev/contact-picker/">Contact Picker API</a> to select entries from the device's contacts manager.
-  If you offer both a native app and a PWA, you can use the <a href="https://web.dev/get-installed-related-apps/">Get Installed Related Apps API</a>
-  to check if the native app is installed, in which case you do not need to encourage the user to install the PWA or accept web push notifications.
+  On Android, you can use the <a href="/contact-picker/">Contact Picker API</a> to select entries from the device's contacts manager.
+  If you offer both a platform-specific app and a PWA, you can use the <a href="/get-installed-related-apps/">Get Installed Related Apps API</a>
+  to check if the platform-specific app is installed, in which case you do not need to encourage the user to install the PWA or accept web push notifications.
 {% endDetails %}
 
 ## Background app refreshing
 
 In the Podcasts app's settings, I can configure the app to download new episodes automatically. Like that, I do not even have to think about it, updated content will always just be there. Magic.
 
-<figure class="w-figure">
-  <img src="./image15.png" alt="The Podcasts app's settings menu in the 'General' section where the 'Refresh Podcasts' option is set to 'Every Hour'." width="495">
-  <figcaption class="w-figcaption">Podcasts configured to check for new podcast episode every hour.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="The Podcasts app's settings menu in the 'General' section where the 'Refresh Podcasts' option is set to 'Every Hour'.", width="800", height="465" %}
+  <figcaption>Podcasts configured to check for new podcast episode every hour.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/periodic-background-sync/">Periodic Background Sync API</a>
+  The <a href="/periodic-background-sync/">Periodic Background Sync API</a>
   allows your app to refresh its content regularly in the background without the need for it to be running.
   This means new content is proactively available, so your users can start delving into it right away whenever they decide.
 {% endDetails %}
 
 ## State synchronized over the cloud
 
-At the same time, my subscriptions are synchronized across all devices I own. In a seamless world, I do not have to worry about manually keeping my podcast subscriptions in sync. Likewise, I do not have to be afraid that my mobile device's memory will be consumed by episodes I have already listened to on my desktop and vice versa. The play state is kept in sync, and listened-to episodes are automatically deleted.
+At the same time, my subscriptions are synchronized across all devices I own. In a seamless world, I do not have to worry about manually keeping my podcast subscriptions in sync. Likewise, I do not have to be afraid that my mobile device's memory will be consumed by episodes I have already listened to on my desktop. The play state is kept in sync, and listened-to episodes are automatically deleted.
 
-<figure class="w-figure">
-  <img src="./image11.png" alt="The Podcasts app's settings menu in the 'Advanced' section where the 'Sync subscriptions across devices' option is activated." width="495">
-  <figcaption class="w-figcaption">State is synchronized over the cloud.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="The Podcasts app's settings menu in the 'Advanced' section where the 'Sync subscriptions across devices' option is activated.", width="800", height="525" %}
+  <figcaption>State is synchronized over the cloud.</figcaption>
 </figure>
 
 {% Details %}
@@ -155,20 +155,20 @@ At the same time, my subscriptions are synchronized across all devices I own. In
 When I am busy with another application, say, reading a news page in the Chrome browser, I can still control the Podcasts app with the media keys on my laptop.
 There is no need to switch to the app just to skip forward or backward.
 
-<figure class="w-figure">
-  <img src="./image9.png" alt="Apple MacBook Pro Magic Keyboard with annotated media keys." width="600">
-  <figcaption class="w-figcaption">The media keys allow for controlling the Podcasts app (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">Source</a>).</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="Apple MacBook Pro Magic Keyboard with annotated media keys.", width="800", height="406" %}
+  <figcaption>The media keys allow for controlling the Podcasts app (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">Source</a>).</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  Media keys are supported by the <a href="https://web.dev/media-session/">Media Session API</a>.
+  Media keys are supported by the <a href="/media-session/">Media Session API</a>.
   Like that, users can make use of the hardware media keys on their physical keyboards, headphones, or even control the web app
   from the software media keys on their smartwatches.
   An additional idea to smooth seeking operations is to send a
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API">vibration pattern</a>
+  <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">vibration pattern</a>
   when the user seeks over a significant part of the content, for example, passing the opening credits or a chapter boundary.
 {% endDetails %}
 
@@ -176,9 +176,9 @@ There is no need to switch to the app just to skip forward or backward.
 
 Of course I can always multitask back to the Podcasts app from anywhere. The app has a clearly distinguishable icon that I can also put on my desktop or application dock so Podcasts can be launched immediately when I feel like it.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./image3.png" alt="The macOS task switcher with a number of app icons to choose from, one of them the Podcasts app." >
-  <figcaption class="w-figcaption w-figcaption--fullbleed">Multitasking back to the Podcasts app.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="The macOS task switcher with a number of app icons to choose from, one of them the Podcasts app.", width="800", height="630" %}
+  <figcaption>Multitasking back to the Podcasts app.</figcaption>
 </figure>
 
 {% Details %}
@@ -187,7 +187,7 @@ Of course I can always multitask back to the Podcasts app from anywhere. The app
 {% endDetailsSummary %}
   Progressive Web Apps on both desktop and mobile can be installed to the home screen, start menu, or application dock.
   Installation can happen based on a proactive prompt, or fully controlled by the app developer.
-  The article <a href="https://web.dev/install-criteria/">What does it take to be installable?</a> covers everything you need to know.
+  The article <a href="/install-criteria/">What does it take to be installable?</a> covers everything you need to know.
   When multitasking, PWAs appear independent from the browser.
 {% endDetails %}
 
@@ -195,16 +195,16 @@ Of course I can always multitask back to the Podcasts app from anywhere. The app
 
 The most common app actions, **Search** for new content and **Check for New Episodes**, are available right from the context menu of the app in the Dock. Via the **Options** menu, I can also decide to open the app at login time.
 
-<figure class="w-figure">
-  <img src="./image18.png" alt="Podcasts app icon context menu showing the 'Search' and 'Check for New Episodes' options." class="w-screenshot" width="267">
-  <figcaption class="w-figcaption">Quick actions are immediately available right from the app icon.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="Podcasts app icon context menu showing the 'Search' and 'Check for New Episodes' options.", width="534", height="736" %}
+  <figcaption>Quick actions are immediately available right from the app icon.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  By specifying <a href="https://web.dev/app-shortcuts/">app icon shortcuts</a>
+  By specifying <a href="/app-shortcuts/">app icon shortcuts</a>
   in the PWA's web app manifest, you can register quick routes to common tasks that users can reach directly from the app icon.
   On operating systems like macOS, users can also right-click the app icon and set the app to launch at login time.
   There is ongoing work on a proposal for <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">run on login</a>.
@@ -212,11 +212,11 @@ The most common app actions, **Search** for new content and **Check for New Epis
 
 ## Act as default app
 
-Other native applications and even websites or emails can integrate with the Podcasts app by leveraging the `podcasts://` URL scheme. If I follow a link like [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903) while in the browser, I am brought right into the Podcasts app and can decide to subscribe or listen to the podcast.
+Other iOS applications and even websites or emails can integrate with the Podcasts app by leveraging the `podcasts://` URL scheme. If I follow a link like [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903) while in the browser, I am brought right into the Podcasts app and can decide to subscribe or listen to the podcast.
 
-<figure class="w-figure">
-  <img src="./image20.png" alt="The Chrome browser showing a confirmation dialog asking the user whether they want to open the Podcasts app.">
-  <figcaption class="w-figcaption">The Podcasts app can be opened right from the browser.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="The Chrome browser showing a confirmation dialog asking the user whether they want to open the Podcasts app.", width="800", height="492" %}
+  <figcaption>The Podcasts app can be opened right from the browser.</figcaption>
 </figure>
 
 {% Details %}
@@ -225,41 +225,41 @@ Other native applications and even websites or emails can integrate with the Pod
 {% endDetailsSummary %}
   Handling fully custom URL schemes is not yet possible, but there is ongoing work on a proposal for
   <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URL Protocol Handling</a>
-  for PWAs. Currently, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> with a <code>web+</code> scheme prefix is the best alternative.
+  for PWAs. Currently, <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> with a <code>web+</code> scheme prefix is the best alternative.
 {% endDetails %}
 
-## Native file system integration
+## Local file system integration
 
-You may not immediately think of it, but the Podcasts app naturally integrates with the native file system. When I download a podcast episode, on my laptop it is stored in `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`. Unlike, say `~/Documents`, this directory is of course not meant to be accessed directly by regular users, but it is there.
+You may not immediately think of it, but the Podcasts app naturally integrates with the local file system. When I download a podcast episode, on my laptop it is stored in `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`. Unlike, say `~/Documents`, this directory is of course not meant to be accessed directly by regular users, but it is there.
 Other storage mechanisms than files are referenced in the [offline content](#offline-content-available-and-media-playable) section.
 
-<figure class="w-figure">
-  <img src="./image5.png" alt="The macOS Finder navigated to the Podcasts app's system directory.">
-  <figcaption class="w-figcaption">Podcast episodes are stored in a special system app folder.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="The macOS Finder navigated to the Podcasts app's system directory.", width="800", height="337" %}
+  <figcaption>Podcast episodes are stored in a special system app folder.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/native-file-system/">Native File System API</a> enables developers to get access to the local file system
-  of the device. You can use it directly or via the <a href="https://github.com/GoogleChromeLabs/browser-nativefs">browser-nativefs</a>
+  The <a href="/file-system-access/">File System Access API</a> enables developers to get access to the local file system
+  of the device. You can use it directly or via the <a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access</a>
   support library that transparently provides a fallback for browsers that do not support the API.
   For security reasons, system directories are not web-accessible.
 {% endDetails %}
 
-## Native look and feel
+## Platform look and feel
 
-There is a more subtle thing that is self-evident for a native application like Podcasts: none of the text labels are selectable and all text blends in with the system font of the machine. Also my choice of system color theme (dark mode) is respected.
+There is a more subtle thing that is self-evident for an iOS application like Podcasts: none of the text labels are selectable and all text blends in with the system font of the machine. Also my choice of system color theme (dark mode) is respected.
 
-<div class="w-columns">
-  <figure class="w-figure">
-    <img src="./image2.png" alt="The Podcasts app in dark mode." width="350">
-    <figcaption class="w-figcaption">The Podcasts app supports light and dark mode.</figcaption>
+<div class="switcher">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="The Podcasts app in dark mode.", width="800", height="463" %}
+    <figcaption>The Podcasts app supports light and dark mode.</figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="./image7.png" alt="The Podcasts app in light mode." width="350">
-    <figcaption class="w-figcaption">The app uses the default system font.</figcaption>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="The Podcasts app in light mode.", width="800", height="463" %}
+    <figcaption>The app uses the default system font.</figcaption>
   </figure>
 </div>
 
@@ -267,33 +267,33 @@ There is a more subtle thing that is self-evident for a native application like
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  By leveraging the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-select"><code>user-select</code></a>
-  CSS property with the value of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a>,
+  By leveraging the <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a>
+  CSS property with the value of <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a>,
   you can protect UI elements from being accidentally selected.
   Be sure, though, to not abuse this property for making <em>app contents</em> unselectable.
   It should only be used for UI elements like button texts, etc.
-  The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#<generic-name>:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a>
-  value for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> CSS property allows you to
+  The <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#<generic-name>:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a>
+  value for the <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> CSS property allows you to
   specify the default UI font of the system to be used for your app.
-  Finally, your app can obey to the user's color scheme preference by respecting their <a href="https://web.dev/prefers-color-scheme/"><code>prefers-color-scheme</code></a> choice, with an optional <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">dark mode toggle</a>
+  Finally, your app can obey to the user's color scheme preference by respecting their <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a> choice, with an optional <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">dark mode toggle</a>
   to override it.
   Another thing to decide on might be what the browser should do when reaching
   the boundary of a scrolling area, for example, to implement custom <em>pull to refresh</em>.
-  This is possible with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> CSS property.  
+  This is possible with the <a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> CSS property.
 {% endDetails %}
 
 ## Customized title bar
 
 When you look at the Podcasts app window, you notice that it does not have a classic integrated title bar and toolbar, like, for example, the Safari browser window, but a customized experience that looks like a sidebar docked to the main player window.
 
-<figure class="w-figure">
-  <img src="./image8.png" class="w-screenshot" alt="The Safari browser's integrated tile bar and toolbar.">
-  <figcaption class="w-figcaption"></figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="The Safari browser's integrated tile bar and toolbar.", width="800", height="40" %}
+  <figcaption></figcaption>
 </figure>
 
-<figure class="w-figure">
-  <img src="./image1.png" class="w-screenshot" alt="The Podcasts app's customized split customized title bar.">
-  <figcaption class="w-figcaption">Customized title bars of Safari and Podcasts.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="The Podcasts app's customized split customized title bar.", width="800", height="43" %}
+  <figcaption>Customized title bars of Safari and Podcasts.</figcaption>
 </figure>
 
 {% Details %}
@@ -301,8 +301,8 @@ When you look at the Podcasts app window, you notice that it does not have a cla
   How to do this on the web
 {% endDetailsSummary %}
   While not currently possible, <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">title bar customization</a> is being worked on at the moment.
-  You can (and should), however, specify the <a href="https://web.dev/add-manifest/#display"><code>display</code></a> and the
-  <a href="https://web.dev/add-manifest/#theme-color"><code>theme-color</code></a> properties of the web app manifest to
+  You can (and should), however, specify the <a href="/add-manifest/#display"><code>display</code></a> and the
+  <a href="/add-manifest/#theme-color"><code>theme-color</code></a> properties of the web app manifest to
   determine the look and feel of your application window and to decide which default browser controls—potentially none of them—should be shown.
 {% endDetails %}
 
@@ -310,9 +310,9 @@ When you look at the Podcasts app window, you notice that it does not have a cla
 
 In-app animations are snappy and smooth in Podcasts. For example, when I open the **Episode Notes** drawer on the right, it elegantly slides in. When I remove one episode from my downloads, the remaining episodes float up and consume the screen real estate that was freed by the deleted episode.
 
-<figure class="w-figure">
-  <img src="./image14.png" alt="The Podcasts app with the 'Episode Notes' drawer expanded.">
-  <figcaption class="w-figcaption">In-app animations like when opening a drawer are snappy.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="The Podcasts app with the 'Episode Notes' drawer expanded.", width="800", height="463" %}
+  <figcaption>In-app animations like when opening a drawer are snappy.</figcaption>
 </figure>
 
 {% Details %}
@@ -322,23 +322,23 @@ In-app animations are snappy and smooth in Podcasts. For example, when I open th
   Performant animations on the web are certainly possible if you take into account a number of best practices
   outlined in the article <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Animations and Performance</a>.
   Scroll animations as commonly seen in paginated content or media carousels can be massively improved by using the <a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a> feature.
-  For full control, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.
+  For full control, you can use the <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a>.
 {% endDetails %}
 
 ## Content surfaced outside of app
 
 The Podcasts app on iOS can surface content in other locations than the actual application, for example, in the system's Widgets view, or in the form of a Siri Suggestion. Having proactive, usage-based calls-to-action that just require a tap to interact with can greatly increase the re-engagement rate of an app like Podcasts.
 
-<figure class="w-figure">
-  <img src="./image6.png" alt="iOS Widget view showing the Podcasts app suggesting a new episode of a podcast." width="300">
-  <figcaption class="w-figcaption">App content is surfaced outside of the main Podcasts app.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="iOS Widget view showing the Podcasts app suggesting a new episode of a podcast.", width="751", height="1511" %}
+  <figcaption>App content is surfaced outside of the main Podcasts app.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/content-indexing-api/">Content Index API</a> allows your application
+  The <a href="/content-indexing-api/">Content Index API</a> allows your application
   to tell the browser which content of the PWA is available offline.
   This allows the browser to surface this content outside of the main app.
   By marking up interesting content in your app as suitable for <a href="https://developers.google.com/search/docs/data-types/speakable">speakable</a>
@@ -350,16 +350,16 @@ The Podcasts app on iOS can surface content in other locations than the actual a
 
 When a podcast episode is playing, the Podcasts app shows a beautiful control widget on the lock screen that features metadata like the episode artwork, the episode title, and the podcast name.
 
-<figure class="w-figure">
-  <img src="./image17.png" alt="iOS media playback widget on the lock screen showing a podcast episode with rich metadata." width="300">
-  <figcaption class="w-figcaption">Media playing in the app can be controlled from the lock screen.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="iOS media playback widget on the lock screen showing a podcast episode with rich metadata.", width="751", height="1511" %}
+  <figcaption>Media playing in the app can be controlled from the lock screen.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/media-session/">Media Session API</a> lets you specify metadata like artwork, track titles, etc.
+  The <a href="/media-session/">Media Session API</a> lets you specify metadata like artwork, track titles, etc.
   that then gets displayed on the lock screen, smartwatches, or other media widgets in the browser.
 {% endDetails %}
 
@@ -370,9 +370,9 @@ Push notifications have become a bit of an annoyance on the web
 But if used properly, they can add a lot of value.
 For example, the iOS Podcasts app can optionally notify me of new episodes of podcasts I am subscribed to or recommend new ones, as well as alert me of new app features.
 
-<figure class="w-figure">
-  <img src="./image12.png" alt="iOS Podcasts app in the 'Notifications' settings screen showing the 'New Episodes' notifications toggle activated." width="300">
-  <figcaption class="w-figcaption">Apps can send push notifications to inform the user about new content.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="iOS Podcasts app in the 'Notifications' settings screen showing the 'New Episodes' notifications toggle activated.", width="751", height="1511" %}
+  <figcaption>Apps can send push notifications to inform the user about new content.</figcaption>
 </figure>
 
 {% Details %}
@@ -382,23 +382,23 @@ For example, the iOS Podcasts app can optionally notify me of new episodes of po
   The <a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a>
   allows your app to receive push notifications so you can notify your users about noteworthy events around your PWA.
   For notifications that should fire at a known time in the future and that do not require a network connection,
-  you can use the <a href="https://web.dev/notification-triggers/">Notification Triggers API</a>.
+  you can use the <a href="/notification-triggers/">Notification Triggers API</a>.
 {% endDetails %}
 
 ## App icon badging
 
 Whenever there are new episodes available for one of the podcasts I am subscribed to, an app icon badge on the Podcasts home screen icon appears, again encouraging me to re-engage with the app in a way that is not intrusive.
 
-<figure class="w-figure">
-  <img src="./image13.png" alt="iOS settings screen showing the 'Badges' toggle activated." width="310">
-  <figcaption class="w-figcaption">Badges are a subtle way for applications to inform users about new content.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="iOS settings screen showing the 'Badges' toggle activated.", width="751", height="1511" %}
+  <figcaption>Badges are a subtle way for applications to inform users about new content.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  You can set app icon badges with the <a href="https://web.dev/badging-api/">Badging API</a>.
+  You can set app icon badges with the <a href="/badging-api/">Badging API</a>.
   This is especially useful when your PWA has some notion of "unread" items or when you need a means
   to unobtrusively draw the user's attention back to the app.
 {% endDetails %}
@@ -408,16 +408,16 @@ Whenever there are new episodes available for one of the podcasts I am subscribe
 When podcast media is playing, the screen may turn off, but the system will not enter standby mode.
 Apps can optionally keep the screen awake, too, for example to display lyrics or captions.
 
-<figure class="w-figure">
-  <img src="./image21.png" alt="macOS Preferences in the 'Energy Saver' section.">
-  <figcaption class="w-figcaption">Apps can keep the screen awake.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="macOS Preferences in the 'Energy Saver' section.", width="800", height="573" %}
+  <figcaption>Apps can keep the screen awake.</figcaption>
 </figure>
 
 {% Details %}
 {% DetailsSummary %}
   How to do this on the web
 {% endDetailsSummary %}
-  The <a href="https://web.dev/wakelock/">Screen Wake Lock API</a> allows you to prevent the screen from turning off.
+  The <a href="/wakelock/">Screen Wake Lock API</a> allows you to prevent the screen from turning off.
   Media playback on the web automatically prevents the system from entering standby mode.
 {% endDetails %}
 
@@ -426,9 +426,9 @@ Apps can optionally keep the screen awake, too, for example to display lyrics or
 While the Podcasts app is part of the macOS desktop experience, on iOS it needs to be installed from the App Store.
 A quick search for `podcast`, `podcasts`, or `apple podcasts` immediately turns the app up in the App Store.
 
-<figure class="w-figure">
-  <img src="./image22.png" alt="iOS App Store search for 'podcasts' reveals the Podcasts app." width="300">
-  <figcaption class="w-figcaption">Users have learned to discover apps in app stores.</figcaption>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="iOS App Store search for 'podcasts' reveals the Podcasts app.", width="751", height="1511" %}
+  <figcaption>Users have learned to discover apps in app stores.</figcaption>
 </figure>
 
 {% Details %}
@@ -436,7 +436,7 @@ A quick search for `podcast`, `podcasts`, or `apple podcasts` immediately turns
   How to do this on the web
 {% endDetailsSummary %}
   While Apple does not allow PWAs on the App Store, on Android, you can submit your PWA
-  <a href="https://web.dev/using-a-pwa-in-your-android-app/">wrapped in a Trusted Web Activity</a>.
+  <a href="/using-a-pwa-in-your-android-app/">wrapped in a Trusted Web Activity</a>.
   The <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> script makes this a painless operation.
   This script is also what internally powers <a href="https://www.pwabuilder.com/">PWABuilder</a>'s Android app export feature,
   which you can use without touching the command line.
@@ -446,7 +446,7 @@ A quick search for `podcast`, `podcasts`, or `apple podcasts` immediately turns
 
 The table below shows a compact overview of all features and provides a list of useful resources for realizing them on the web.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -473,13 +473,13 @@ The table below shows a compact overview of all features and provides a list of
           <ul>
             <li>
               <a
-                href="https://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av"
+                href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/"
                 >Serve cached audio and video</a
               >
             </li>
-            <li><a href="https://developers.google.com/web/tools/workbox">Workbox library</a></li>
-            <li><a href="https://web.dev/storage-for-the-web/">Storage API</a></li>
-            <li><a href="https://web.dev/persistent-storage/">Persistent Storage API</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">Workbox library</a></li>
+            <li><a href="/storage-for-the-web/">Storage API</a></li>
+            <li><a href="/persistent-storage/">Persistent Storage API</a></li>
           </ul>
         </td>
       </tr>
@@ -499,14 +499,14 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#sharing-to-and-interacting-with-other-applications">Sharing to and interacting with other applications</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/web-share/">Web Share API</a></li>
-            <li><a href="https://web.dev/web-share-target/">Web Share Target API</a></li>
+            <li><a href="/web-share/">Web Share API</a></li>
+            <li><a href="/web-share-target/">Web Share Target API</a></li>
             <li>
-              <a href="https://web.dev/image-support-for-async-clipboard/">Async Clipboard API</a>
+              <a href="/image-support-for-async-clipboard/">Async Clipboard API</a>
             </li>
-            <li><a href="https://web.dev/contact-picker/">Contact Picker API</a></li>
+            <li><a href="/contact-picker/">Contact Picker API</a></li>
             <li>
-              <a href="https://web.dev/get-installed-related-apps/"
+              <a href="/get-installed-related-apps/"
                 >Get Installed Related Apps API</a
               >
             </li>
@@ -518,7 +518,7 @@ The table below shows a compact overview of all features and provides a list of
         <td>
           <ul>
             <li>
-              <a href="https://web.dev/periodic-background-sync/">Periodic Background Sync API</a>
+              <a href="/periodic-background-sync/">Periodic Background Sync API</a>
             </li>
           </ul>
         </td>
@@ -539,7 +539,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#hardware-media-key-controls">Hardware media key controls</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/media-session/">Media Session API</a></li>
+            <li><a href="/media-session/">Media Session API</a></li>
           </ul>
         </td>
       </tr>
@@ -547,7 +547,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#multitasking-and-app-shortcut">Multitasking and app shortcut</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/install-criteria/">Installability criteria</a></li>
+            <li><a href="/install-criteria/">Installability criteria</a></li>
           </ul>
         </td>
       </tr>
@@ -555,7 +555,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#quick-actions-in-context-menu">Quick actions in context menu</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/app-shortcuts/">App icon shortcuts</a></li>
+            <li><a href="/app-shortcuts/">App icon shortcuts</a></li>
             <li>
               <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin"
                 >Run on login</a
@@ -576,7 +576,7 @@ The table below shows a compact overview of all features and provides a list of
             </li>
             <li>
               <a
-                href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"
+                href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"
                 ><code>registerProtocolHandler()</code></a
               >
             </li>
@@ -584,35 +584,35 @@ The table below shows a compact overview of all features and provides a list of
         </td>
       </tr>
       <tr>
-        <td><a href="#native-file-system-integration">Native file system integration</a></td>
+        <td><a href="#local-file-system-integration">Local file system integration</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/native-file-system/">Native File System API</a></li>
+            <li><a href="/file-system-access/">File System Access API</a></li>
             <li>
-              <a href="https://github.com/GoogleChromeLabs/browser-nativefs"
-                >browser-nativefs library</a
+              <a href="https://github.com/GoogleChromeLabs/browser-fs-access"
+                >browser-fs-access library</a
               >
             </li>
           </ul>
         </td>
       </tr>
       <tr>
-        <td><a href="#native-look-and-feel">Native look and feel</a></td>
+        <td><a href="#platform-look-and-feel">Platform look and feel</a></td>
         <td>
           <ul>
             <li>
               <a
-                href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Syntax:~:text=none,-The"
+                href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"
                 ><code>user-select: none</code></a
               >
             </li>
             <li>
-              <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"
                 ><code>font-family: system-ui</code></a
               >
             </li>
             <li>
-              <a href="https://web.dev/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
             </li>
             <li>
               <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">Dark mode toggle</a>
@@ -630,8 +630,8 @@ The table below shows a compact overview of all features and provides a list of
                 >Title bar customization</a
               > (early stage)
             </li>
-            <li><a href="https://web.dev/add-manifest/#display">Display mode</a></li>
-            <li><a href="https://web.dev/add-manifest/#theme-color">Theme color</a></li>
+            <li><a href="/add-manifest/#display">Display mode</a></li>
+            <li><a href="/add-manifest/#theme-color">Theme color</a></li>
           </ul>
         </td>
       </tr>
@@ -651,7 +651,7 @@ The table below shows a compact overview of all features and provides a list of
               >
             </li>
             <li>
-              <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API"
+              <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API"
                 >Web Animations API</a
               >
             </li>
@@ -662,7 +662,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#content-surfaced-outside-of-app">Content surfaced outside of app</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/content-indexing-api/">Content Index API</a></li>
+            <li><a href="/content-indexing-api/">Content Index API</a></li>
             <li>
               <a href="https://developers.google.com/search/docs/data-types/speakable"
                 >Speakable content</a
@@ -680,7 +680,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#lock-screen-media-control-widget">Lock screen media control widget</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/media-session/">Media Session API</a></li>
+            <li><a href="/media-session/">Media Session API</a></li>
           </ul>
         </td>
       </tr>
@@ -693,7 +693,7 @@ The table below shows a compact overview of all features and provides a list of
                 >Push API</a
               >
             </li>
-            <li><a href="https://web.dev/notification-triggers/">Notification Triggers API</a></li>
+            <li><a href="/notification-triggers/">Notification Triggers API</a></li>
           </ul>
         </td>
       </tr>
@@ -701,7 +701,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#app-icon-badging">App icon badging</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/badging-api/">Badging API</a></li>
+            <li><a href="/badging-api/">Badging API</a></li>
           </ul>
         </td>
       </tr>
@@ -709,7 +709,7 @@ The table below shows a compact overview of all features and provides a list of
         <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">Media playback trumps energy saver settings</a></td>
         <td>
           <ul>
-            <li><a href="https://web.dev/wakelock/">Screen Wake Lock API</a></li>
+            <li><a href="/wakelock/">Screen Wake Lock API</a></li>
           </ul>
         </td>
       </tr>
@@ -718,7 +718,7 @@ The table below shows a compact overview of all features and provides a list of
         <td>
           <ul>
             <li>
-              <a href="https://web.dev/using-a-pwa-in-your-android-app/">Trusted Web Activity</a>
+              <a href="/using-a-pwa-in-your-android-app/">Trusted Web Activity</a>
             </li>
             <li>
               <a href="https://github.com/GoogleChromeLabs/bubblewrap"
@@ -736,21 +736,21 @@ The table below shows a compact overview of all features and provides a list of
 ## Conclusion
 
 PWAs have come a long way since their introduction in 2015.
-In the context of [Project Fugu 🐡](/fugu-status), the cross-company Chromium team is working on closing the last remaining gaps.
+In the context of [Project Fugu 🐡](https://developer.chrome.com/blog/fugu-status), the cross-company Chromium team is working on closing the last remaining gaps.
 By following even only some of the pieces of advice in this article,
-you can piece by piece get closer to that app-like native feeling and make your users forget
+you can piece by piece get closer to that app-like feeling and make your users forget
 that they are dealing with "just a website", because, honestly, most of them do not care
 how your app is built (and why should they?), as long as it feels like a *real* app.
 
 ## Acknowledgements
 
 This article was reviewed by
-[Kayce Basques](https://web.dev/authors/kaycebasques/),
-[Joe Medley](https://web.dev/authors/joemedley/),
+[Kayce Basques](/authors/kaycebasques/),
+[Joe Medley](/authors/joemedley/),
 [Joshua Bell](https://github.com/inexorabletash),
 [Dion Almaer](https://blog.almaer.com/),
-[Ade Oshineye](http://www.oshineye.com/),
-[Pete LePage](https://web.dev/authors/petelepage/),
-[Sam Thorogood](https://web.dev/authors/samthor/),
+[Ade Oshineye](https://blog.oshineye.com/),
+[Pete LePage](/authors/petelepage/),
+[Sam Thorogood](/authors/samthor/),
 [Reilly Grant](https://github.com/reillyeon),
 and [Jeffrey Yasskin](https://github.com/jyasskin).
diff --git a/src/site/content/en/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/en/progressive-web-apps/codelab-make-installable/index.md
index 50dfcf97a9b..fa547151b78 100644
--- a/src/site/content/en/progressive-web-apps/codelab-make-installable/index.md
+++ b/src/site/content/en/progressive-web-apps/codelab-make-installable/index.md
@@ -4,44 +4,46 @@ title: Make it installable
 authors:
   - petelepage
 date: 2018-11-05
-updated: 2020-02-28
+updated: 2023-06-06
 description: |
   In this codelab, learn how to make a site installable using the
   beforeinstallprompt event.
-glitch: make-it-installable
+glitch: make-it-installable?path=script.js
 related_post: customize-install
 tags:
   - progressive-web-apps
 ---
 
-This glitch already contains the critical components required to make a
-Progressive Web App installable, including a
-[very simple service worker](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js)
-and a
-[web app manifest](https://glitch.com/edit/#!/make-it-installable?path=manifest.json).
+This glitch contains the [web manifest](https://glitch.com/edit/#!/make-it-installable?path=manifest.json) with the required fields to make a Web App [installable](/install-criteria/).
+
 It also has an install button that is hidden by default.
 
 ## Listen for the beforeinstallprompt event
 
 When the browser fires the `beforeinstallprompt` event, that's the indication
-that the Progressive Web App can be installed and an install button can be shown
-to the user. The `beforeinstallprompt` event is fired when the PWA meets the
-criteria for installability.
+that the Web App can be installed and an install button can be shown
+to the user. The `beforeinstallprompt` event is fired when the app meets [the
+installability criteria](/install-criteria/).
+
+Capturing the event enables developers to customize the installation and prompt the user
+to install when they consider it is the best time.
 
 {% Instruction 'remix', 'ol' %}
 1. Add a `beforeinstallprompt` event handler to the `window` object.
-1. Save the `event` as a global variable; we'll need it later to show the
+2. Save the `event` as a global variable; we'll need it later to show the
     prompt.
-1. Unhide the install button.
+3. Unhide the install button.
 
 Code:
 
 ```js
 window.addEventListener('beforeinstallprompt', (event) => {
+  // Prevent the mini-infobar from appearing on mobile.
+  event.preventDefault();
   console.log('👍', 'beforeinstallprompt', event);
   // Stash the event so it can be triggered later.
   window.deferredPrompt = event;
-  // Remove the 'hidden' class from the install button container
+  // Remove the 'hidden' class from the install button container.
   divInstall.classList.toggle('hidden', false);
 });
 ```
@@ -52,6 +54,12 @@ To show the install prompt, call `prompt()` on the saved `beforeinstallprompt`
 event. Calling `prompt()` is done in the install button click handler because
 `prompt()` must be called from a user gesture.
 
+{% Aside 'gotcha' %}
+You need to open your app in its own browser tab. The side-by-side preview pane
+in Glitch doesn't work for this codelab, since it will be run in an iframe.
+Choose Glitch's "Preview in a new window" mode instead.
+{% endAside %}
+
 1. Add a click event handler for the install button.
 1. Call `prompt()` on the saved `beforeinstallprompt` event.
 1. Log the results of the prompt.
@@ -61,7 +69,7 @@ event. Calling `prompt()` is done in the install button click handler because
 Code:
 
 ```js
-butInstall.addEventListener('click', () => {
+butInstall.addEventListener('click', async () => {
   console.log('👍', 'butInstall-clicked');
   const promptEvent = window.deferredPrompt;
   if (!promptEvent) {
@@ -71,33 +79,34 @@ butInstall.addEventListener('click', () => {
   // Show the install prompt.
   promptEvent.prompt();
   // Log the result
-  promptEvent.userChoice.then((result) => {
-    console.log('👍', 'userChoice', result);
-    // Reset the deferred prompt variable, since
-    // prompt() can only be called once.
-    window.deferredPrompt = null;
-    // Hide the install button.
-    divInstall.classList.toggle('hidden', true);
-  });
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // Reset the deferred prompt variable, since
+  // prompt() can only be called once.
+  window.deferredPrompt = null;
+  // Hide the install button.
+  divInstall.classList.toggle('hidden', true);
 });
 ```
 
 ## Track the install event
 
-Installing a Progressive Web App through an install button is only one way users
-can install a PWA. They can also use Chrome's menu, the mini-infobar, and
+Installing a Web App through an install button is only one way users
+can install it. They can also use Chrome's menu, the mini-infobar, and
 through [an icon in the omnibox](/promote-install/#browser-promotion). You can
 track all of these ways of installation by listening for the `appinstalled`
 event.
 
 1. Add an `appinstalled` event handler to the `window` object.
-1. Log the install event to analytics or other mechanism.
+2. Log the install event to analytics or other mechanism.
 
 Code:
 
 ```js
 window.addEventListener('appinstalled', (event) => {
   console.log('👍', 'appinstalled', event);
+  // Clear the deferredPrompt so it can be garbage collected
+  window.deferredPrompt = null;
 });
 ```
 
@@ -107,5 +116,5 @@ Congratulations, you app is now installable!
 
 Here are some additional things that you can do:
 
-+  [Detecting if your app is launched from the home screen](https://developers.google.com/web/fundamentals/app-install-banners/#detect-mode)
-+  [How to show the native app install prompt instead](https://developers.google.com/web/fundamentals/app-install-banners/native)
++  [Detect if your app is launched from the home screen](/customize-install/#detect-mode)
++  [Show the operating system's app install prompt instead](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/en/progressive-web-apps/customize-install/index.md b/src/site/content/en/progressive-web-apps/customize-install/index.md
index 0a01a50cf2c..d12e41e6956 100644
--- a/src/site/content/en/progressive-web-apps/customize-install/index.md
+++ b/src/site/content/en/progressive-web-apps/customize-install/index.md
@@ -4,7 +4,7 @@ title: How to provide your own in-app install experience
 authors:
   - petelepage
 date: 2020-02-14
-updated: 2020-06-17
+updated: 2021-05-19
 description: |
   Use the beforeinstallprompt event to provide a custom, seamless, in-app
   install experience for your users.
@@ -22,10 +22,9 @@ other installed app.
 In addition to the [browser provided install experience](/promote-install/#browser-promotion),
 it's possible to provide your own custom install flow, directly within your app.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="spotify-custom-install.png"
-       alt="Install App button provided in the Spotify PWA">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Install App button provided in the Spotify PWA", width="491", height="550" %}
+  <figcaption>
     "Install App" button provided in the Spotify PWA
   </figcaption>
 </figure>
@@ -39,8 +38,6 @@ entertainment applications also benefit from the extra screen real-estate
 created by removing the browser toolbars from the window in installed
 `standalone` or `minimal-ui` modes.
 
-<div class="w-clearfix"></div>
-
 ## Promoting installation {: #promote-installation }
 
 To indicate your Progressive Web App is installable, and to provide a custom
@@ -54,11 +51,11 @@ in-app install flow:
 
 {% Aside %}
   The `beforeinstallprompt` event, and the `appinstalled` event have been moved
-  from the Web App Manifest spec to their own
+  from the web app manifest spec to their own
   [incubator](https://github.com/WICG/beforeinstallprompt). The Chrome team
   remains committed to supporting them, and has no plans to remove or deprecate
-  support. **web.dev continues to recommend using them to provide a customized
-  install experience.**
+  support. Google's Web DevRel team continues to recommend using them to provide a customized
+  install experience.
 {% endAside %}
 
 ### Listen for the `beforeinstallprompt` event {: #beforeinstallprompt }
@@ -69,6 +66,7 @@ event, and update your user interface to indicate that the user can install
 your PWA. This is highlighted below.
 
 ```js
+// Initialize deferredPrompt for use later to show browser install prompt.
 let deferredPrompt;
 
 window.addEventListener('beforeinstallprompt', (e) => {
@@ -78,6 +76,8 @@ window.addEventListener('beforeinstallprompt', (e) => {
   deferredPrompt = e;
   // Update UI notify the user they can install the PWA
   showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
 });
 ```
 
@@ -97,19 +97,17 @@ in the `deferredPrompt` variable). It shows the user a modal install dialog,
 asking them to confirm they want to install your PWA.
 
 ```js
-buttonInstall.addEventListener('click', (e) => {
+buttonInstall.addEventListener('click', async () => {
   // Hide the app provided install promotion
-  hideMyInstallPromotion();
+  hideInstallPromotion();
   // Show the install prompt
   deferredPrompt.prompt();
   // Wait for the user to respond to the prompt
-  deferredPrompt.userChoice.then((choiceResult) => {
-    if (choiceResult.outcome === 'accepted') {
-      console.log('User accepted the install prompt');
-    } else {
-      console.log('User dismissed the install prompt');
-    }
-  });
+  const { outcome } = await deferredPrompt.userChoice;
+  // Optionally, send analytics event with outcome of user choice
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null;
 });
 ```
 
@@ -133,9 +131,13 @@ whenever your PWA is installed, no matter what mechanism is used to install
 your PWA.
 
 ```js
-window.addEventListener('appinstalled', (evt) => {
-  // Log install to analytics
-  console.log('INSTALL: Success');
+window.addEventListener('appinstalled', () => {
+  // Hide the app-provided install promotion
+  hideInstallPromotion();
+  // Clear the deferredPrompt so it can be garbage collected
+  deferredPrompt = null;
+  // Optionally, send analytics event to indicate successful install
+  console.log('PWA was installed');
 });
 ```
 
@@ -155,17 +157,15 @@ this yet, so you must check `navigator.standalone`, it returns a boolean
 indicating whether the browser is running in standalone mode.
 
 ```js
-window.addEventListener('DOMContentLoaded', () => {
-  let displayMode = 'browser tab';
-  if (navigator.standalone) {
-    displayMode = 'standalone-ios';
-  }
-  if (window.matchMedia('(display-mode: standalone)').matches) {
-    displayMode = 'standalone';
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
   }
-  // Log launch display mode to analytics
-  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
-});
+  return 'browser';
+}
 ```
 
 ### Track when the display mode changes
@@ -174,15 +174,13 @@ To track if the user changes between `standalone`, and `browser tab`, listen for
 changes to the `display-mode` media query.
 
 ```js
-window.addEventListener('DOMContentLoaded', () => {
-  window.matchMedia('(display-mode: standalone)').addListener((evt) => {
-    let displayMode = 'browser tab';
-    if (evt.matches) {
-      displayMode = 'standalone';
-    }
-    // Log display mode change to analytics
-    console.log('DISPLAY_MODE_CHANGED', displayMode);
-  });
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
 });
 ```
 
@@ -201,16 +199,6 @@ PWA, use conditional CSS:
 
 ## Updating your app's icon and name
 
-### Chrome on Android
-
-On Android, when your PWA is launched, Chrome will check the currently
-installed manifest against the live manifest. If an update is required, it
-will be [queued and updated][update-flow] once the device is plugged in and
-connected to Wi-Fi.
-
-### Chrome on Desktop
-
-On Desktop, the manifest is not automatically updated, but this is planned for
-a future update.
-
-[update-flow]: https://developers.google.com/web/fundamentals/integration/webapks#update-webapk
+What if you need to update your app name, or provide new icons?
+Check out [How Chrome handles updates to the web app manifest](/manifest-updates/)
+to see when and how are those changes are reflected in Chrome.
diff --git a/src/site/content/en/progressive-web-apps/customize-install/spotify-custom-install.png b/src/site/content/en/progressive-web-apps/customize-install/spotify-custom-install.png
deleted file mode 100644
index 31175ebf033..00000000000
Binary files a/src/site/content/en/progressive-web-apps/customize-install/spotify-custom-install.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/define-install-strategy/a2hs-infobar.png b/src/site/content/en/progressive-web-apps/define-install-strategy/a2hs-infobar.png
deleted file mode 100644
index df3c7930cc3..00000000000
Binary files a/src/site/content/en/progressive-web-apps/define-install-strategy/a2hs-infobar.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/define-install-strategy/index.md b/src/site/content/en/progressive-web-apps/define-install-strategy/index.md
index 4ae4fc45e4e..d3aa0508e50 100644
--- a/src/site/content/en/progressive-web-apps/define-install-strategy/index.md
+++ b/src/site/content/en/progressive-web-apps/define-install-strategy/index.md
@@ -5,115 +5,115 @@ authors:
   - demianrenzulli
   - petelepage
 date: 2020-05-12
-updated: 2020-05-13
+updated: 2022-06-13
 description: |
   Best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.
 tags:
   - progressive-web-apps
 ---
 
-In the past, app installs were only possible in the context of native applications. Today, modern web apps offer installable experiences that provide the same level of integration and reliability as native apps.
+In the past, app installation was only possible in the context of platform-specific applications. Today, modern web apps offer installable experiences that provide the same level of integration and reliability as platform-specific apps.
 
 You can achieve this in different ways:
 
-- Installing the PWA [from the browser](https://web.dev/customize-install/).
-- Installing the PWA [from the app store](https://developers.google.com/web/android/trusted-web-activity).
+- Installing the PWA [from the browser](/customize-install/).
+- Installing the PWA [from the app store](https://developer.chrome.com/docs/android/trusted-web-activity/).
 
-Having different distribution channels is a powerful way of reaching a broad number of users, but choosing the right strategy to promote them can be challenging.
+Having different distribution channels is a powerful way of reaching a broad number of users, but choosing the right strategy to promote your the installation of your PWA can be challenging.
 
-This guide explores best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization. The installation offerings covered include PWAs installed from both the browser and the App Store, as well as native apps.
+This guide explores best practices for combining different installation options to increase installation rates and avoid platform competition and cannibalization. The installation offerings covered include PWAs installed from both the browser and the App Store, as well as platform-specific apps.
+
+{% YouTube '6R9pupbDXYw' %}
 
 ## Why make your web app installable?
 
 Installed Progressive Web Apps run in a standalone window instead of a browser tab. They're launchable from the user's home screen, dock, taskbar, or shelf. It's possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they're installed on.
 
-But having both an installable web app and a native app can be confusing for users. For some users native apps may be the best choice, but for others they can present some drawbacks:
+But having both an installable web app and a platform-specific app can be confusing for users. For some users platform-specific apps may be the best choice, but for others they can present some drawbacks:
 
-- **Storage constraints:** Installing a new app might mean deleting others, or cleaning up space, by removing valuable content. This is especially disadvantageous for users on low-end devices.
-- **Available bandwidth:** Downloading an app can be a costly and slow process, even more for users on slow connections and expensive data plans.
-- **Friction:** Leaving a website and moving to a store to download an app creates additional friction and delays a user action that could be performed directly in the web.
-- **Update cycle:** Making changes in native apps might require going through an app review process, which can slow down changes and experiments (e.g. A/B tests).
+- **Storage constraints:** installing a new app might mean deleting others, or cleaning up space, by removing valuable content. This is especially disadvantageous for users on low-end devices.
+- **Available bandwidth:** downloading an app can be a costly and slow process, even more so for users on slow connections and expensive data plans.
+- **Friction:** leaving a website and moving to a store to download an app creates additional friction and delays a user action that could be performed directly in the web.
+- **Update cycle:** making changes in platform-specific apps might require going through an app review process, which can slow down changes and experiments (A/B tests, for example).
 
-In some cases, the percentage of users that won't download your native app might be large, for example: those that think that they won't use the app very often, or can't justify spending several megabytes of storage or data. You can determine the size of this segment in several ways, for example by using an analytics setup to track the percentage of "mobile web only" users.
+In some cases, the percentage of users who won't download your platform-specific app might be large, for example: those that think that they won't use the app very often, or can't justify spending several megabytes of storage or data. You can determine the size of this segment in several ways, for example by using an analytics setup to track the percentage of "mobile web only" users.
 
 If the size of this segment is considerable, that's a good indication that you need to provide alternative ways of installing your experiences.
 
-## Promoting the installing of your PWA through the browser
-
-If you have a high quality PWA, it may be better to promote its installation over your native app. For example, if the native app is missing functionality offered by your PWA, or if it hasn't been updated in a while. It can also be helpful to promote installation of your PWA if the native app wasn't optimized for bigger screens, such as on Chrome OS.
+## Promoting installation of your PWA through the browser
 
-For some apps, driving native app installations is a key part of the business model, in that case, it makes business sense to show a native app install promotion. But, some users might be more comfortable staying on the web. If that segment can be identified, the PWA prompt can be shown only to them (what we call "PWA as fallback").
+If you have a high quality PWA, it may be better to promote its installation over your platform-specific app. For example, if the platform-specific app is missing functionality offered by your PWA, or if it hasn't been updated in a while. It can also be helpful to promote installation of your PWA if the platform-specific app wasn't optimized for bigger screens, such as on ChromeOS.
 
-In this section we'll explore different ways of maximizing the installation rate of PWAs installed through the browser.
+For some apps, driving platform-specific app installations is a key part of the business model, in that case, it makes business sense to promote installation of your platform-specific app. But, some users might be more comfortable staying on the web. If that segment can be identified, the PWA prompt can be shown only to them (what we call "PWA as fallback").
 
 ### PWA as primary installable experience
 
-Once a PWA meets the [installability criteria](https://web.dev/install-criteria/), most browsers will show an indication that the PWA is installable. For example, Desktop Chrome will show an installable icon in the address bar, and on mobile, it will show a mini-infobar:
+Once a PWA meets the [installability criteria](/install-criteria/), most browsers show an indication that the PWA is installable. For example, desktop Chrome shows an installable icon in the address bar, and on mobile, it shows a mini-infobar:
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="a2hs-infobar.png" alt="Standard Chrome install prompt called mini-infobar">
-  <figcaption class="w-figcaption">
-    The mini-infobar
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1VOvbQjeenZOBAmzjVN5.png", alt="Standard Chrome install prompt, called a mini-infobar", width="400", height="208" %}
+  <figcaption>
+    The mini-infobar.
   </figcaption>
 </figure>
 
-While that may be enough for some experiences, if your goal is to drive installations of your PWA, we highly recommend you listen for the [`BeforeInstallPromptEvent`](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent), and follow the [patterns for promoting the installation](https://web.dev/promote-install/) of your PWA.
+While that may be enough for some experiences, if your goal is to drive installations of your PWA, we highly recommend you listen for the [`BeforeInstallPromptEvent`](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent), and follow the [patterns for promoting the installation](/promote-install/) of your PWA.
 
 
-## Prevent your PWA from cannibalizing your native app install rate
+## Prevent your PWA from cannibalizing your platform-specific app install rate
 
-In some cases, you may choose to promote the installation of your native app over your PWA, but in this case, we still recommend you provide a mechanism to allow users to install your PWA. This fallback option makes it possible for users who can't, or don't want to install your native app to get a similar, installed experience.
+In some cases, you may choose to promote the installation of your platform-specific app over your PWA, but in this case, we still recommend you provide a mechanism to allow users to install your PWA. This fallback option makes it possible for users who can't, or don't want to install your platform-specific app to get a similar, installed experience.
 
-The first step to implement this strategy is to define a heuristic for when you'll show the user an install promotion for your PWA, for example:
+The first step to implement this strategy is to define a heuristic for when you'll show the user an install promotion for your PWA.
 
-__"A PWA user is a user that has seen the native app install prompt and not installed the native app. They have returned to the site at least five times, or they have clicked the app banner, but have continued using the website instead."__
+**For example:** A PWA user is a user that has seen the platform-specific app install prompt and not installed the platform-specific app. They have returned to the site at least five times, or they have clicked the app banner, but have continued using the website instead.
 
 Then, the heuristic can be implemented in the following way:
 
-1. Show the native app install banner.
+1. Show the platform-specific app install banner.
 1. If a user dismisses the banner, set a cookie with that information (e.g. `document.cookie = "app-install-banner=dismissed"`).
 1. Use another cookie to track the number of user visits to the site (e.g. `document.cookie = "user-visits=1"`).
-1. Write a function, such as `isPWAUser()`, that uses the information previously stored in the cookies along with the [`getInstalledRelatedApps()`](https://web.dev/get-installed-related-apps/) API to determine if a user is considered a "PWA user".
-1. At the moment when the user performs a meaningful action, call `isPWAUser()`. If the function returns true and the PWA install prompt was saved previously, you can show the PWA install button.
+1. Write a function, such as `isPWAUser()`, that uses the information previously stored in the cookies along with the [`getInstalledRelatedApps()`](/get-installed-related-apps/) API to determine if a user is considered a "PWA user".
+1. When the user performs a meaningful action, call `isPWAUser()`. If the function returns true and the PWA install prompt was saved previously, you can show the PWA install button.
 
-## Promoting the installing of your PWA through an app store
+## Promoting installation of your PWA through an app store
 
-Apps that are available in App stores can be built with different technologies, including PWA techniques. In [Blending PWA into native environments](https://youtu.be/V7YX4cZ_Cto) you can find a summary of the technologies that can be used to that end.
+Apps for App stores can be built with different technologies, including PWA techniques. In [Blending PWA into native environments](https://youtu.be/V7YX4cZ_Cto) you can find a summary of the technologies that can be used to that end.
 
 In this section we'll classify apps in the store in two groups:
 
-- **Native apps:** These apps are mostly built with native code. Their size depends on the platform, but it's usually above 10MB in Android, and 30MB in iOS. You might want to promote your native app if you don't have a PWA, or if the native app presents a more complete feature set.
-- **Lightweight apps:** These apps can be built with native code as well, but they are commonly built with web technology, packaged in a native wrapper. Full PWAs can be uploaded to the stores as well. Some companies opt to provide these as "lite" experiences, and others have used this approach for their flagship (core) apps as well.
+- **Platform-specific apps:** these apps are mostly built with platform-specific code. Their sizes depend on the platform, but they're usually above 10MB on Android, and 30MB on iOS. You might want to promote your platform-specific app if you don't have a PWA, or if the platform-specific app presents a more complete feature set.
+- **Lightweight apps:** these apps can be built with platform-specific code as well, but they are commonly built with web technology, packaged in a platform-specific wrapper. Full PWAs can be uploaded to the stores as well. (This is discussed [later](#promoting-lightweight-apps) in this article.) Some companies opt to provide these as "lite" experiences, and others have used this approach for their flagship (core) apps as well.
 
 ### Promoting Lightweight Apps
 
 According to a [Google Play study](https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2), for every 6 MB increase to an APK's size, the install conversion rate decreases by 1%. This means that the download completion rate of an app of 10 MB could be approximately **30% higher than an app of 100 MB!**
 
-To address this, some companies are leveraging their PWA to provide a lightweight version of their app in the Play Store using Trusted Web Activities. [Trusted Web Activities](https://developers.google.com/web/android/trusted-web-activity) make it possible to deliver your PWA in the Play Store, and because it's built using the web, the app size is usually only a few megabytes.
+To address this, some companies are leveraging their PWA to provide a lightweight version of their app in the Play Store using [Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/) (TWA). TWAs wrap your PWA in a webview like component, and the resulting app size is usually only a few megabytes.
 
-Oyo, one of India's largest hospitality companies, built a [Lite version of their app](https://web.dev/oyo-lite-twa/), and made it available in the Play Store using TWA.  It's only 850 KB, just 7% the size of their native Android app. And once installed, it's indistinguishable from  their native app:
+Oyo, one of India's largest hospitality companies, built a [Lite version of their app](/oyo-lite-twa/), and made it available in the Play Store using a TWA. At the time this article was written, the Oyo app was only 850 KB, just 7% the size of their Android app. And once installed, it's indistinguishable from their Android app:
 
-<figure class="w-figure">
-  <video controls autoplay loop muted class="w-screenshot">
+<figure>
+  <video controls autoplay loop muted>
     <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
     <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
   </video>
- <figcaption class="w-figcaption">
+ <figcaption>
     OYO Lite in action.
   </figcaption>
 </figure>
 
-Oyo kept both the flagship and "lite" app versions in the store, leaving the final decision to users.
+Oyo kept both the flagship and "lite" app versions in the store, providing a choice to their users.
 
 #### Providing a lightweight web experience
 
-Intuitively, users on low-end devices, might be more inclined to download lightweight versions of apps than users on high-end phones. Therefore, if it's possible to identify a user's device, one could prioritize the lightweight app install banner over the heavier native app version.
+Intuitively, users on low-end devices, might be more inclined to download lightweight versions of apps than users on high-end phones. Therefore, if it's possible to identify a user's device, you could prioritize the lightweight app install banner over the heavier platform-specific app version.
 
 On the web, it's possible to obtain device signals and approximately map them to device categories (e.g. "high", "mid", or "low"). You can obtain this information in different ways, using either JavaScript APIs or client hints.
 
-#### Using JavaScript APIs
+#### Using JavaScript
 
-Using JavaScript APIs like [navigator.hardwareConcurrency](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), [navigator.deviceMemory](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory), and [navigator.connection](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection) you can get information about the device CPU, memory and network status respectively. For example:
+Using JavaScript properties such as [navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), [navigator.deviceMemory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory), and [navigator.connection](https://developer.mozilla.org/docs/Web/API/Navigator/connection) you can get information about the device CPU, memory and network status respectively. For example:
 
 ```javascript
 const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
@@ -121,7 +121,7 @@ const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
 
 #### Using client hints
 
-Device signals can be also inferred in HTTP request headers, through [client hints](https://developer.mozilla.org/en-US/docs/Glossary/Client_hints). Here's how you can implement the previous code for device memory with client hints:
+Device signals can be also inferred in HTTP request headers, through [client hints](https://developer.mozilla.org/docs/Glossary/Client_hints). Here's how you can implement the previous code for device memory with client hints:
 
 First, tell the browser you are interested in receiving device memory hints in the header of the HTTP response for any first-party request:
 
@@ -131,7 +131,7 @@ Content-Type: text/html
 Accept-CH: Device-Memory
 ```
 
-Then, you'll start receiving Device-Memory information in the request header of HTTP requests:
+Then, you'll start receiving `Device-Memory` information in the request header of HTTP requests:
 
 ```html
 GET /main.js HTTP/1.1
@@ -156,16 +156,16 @@ Finally, create your own logic to map this information to device categories, and
 
 ```javascript
 if (isDeviceMidOrLowEnd()) {
-   // show “Lite app” install banner or PWA A2HS prompt
+   // show "Lite app" install banner or PWA A2HS prompt
 } else {
-  // show “Core app” install banner
+  // show "Core app" install banner
 }
 ```
 
 {% Aside %}
-Covering in depth techniques on how to map device signals to device categories is out of the scope of this guide, but you can check out Addy Osmani's [adaptive loading guide](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69), Philip Walton's [The Device Memory API](https://developers.google.com/web/updates/2017/12/device-memory)  and Jeremy Wagner's [Adapting to Users with Client Hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/) for more information on best practices around this.
+Covering in depth techniques on how to map device signals to device categories is out of the scope of this guide, but you can check out Addy Osmani's [adaptive loading guide](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69), Philip Walton's [The Device Memory API](https://developer.chrome.com/blog/device-memory/)  and Jeremy Wagner's [Adapting to Users with Client Hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/) for more information on best practices around this.
 {% endAside %}
 
 ## Conclusion
 
-The ability to have an icon in the user's home screen is one of the most engaging features of applications. Given that historically this was only possible for native apps, companies might think that showing an app store install banner would be enough to convince users to install their experiences. Currently there are more options to have the user install an app, including offering lightweight app experiences in the stores, and letting users add PWAs to the homescreen, by prompting them to do it directly from the website.
+The ability to have an icon in the user's home screen is one of the most engaging features of applications. Given that historically this was only possible for apps installed from app stores, companies might think that showing an app store install banner would be enough to convince users to install their experiences. Currently there are more options for letting users install an app, including offering lightweight app experiences in the stores, and letting users add PWAs to the home screen by prompting them to do it directly from the website.
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-1.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-1.jpg
deleted file mode 100644
index 635db0c8a34..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-1.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-10.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-10.jpg
deleted file mode 100644
index 5a12daa9c44..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-10.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-11.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-11.jpg
deleted file mode 100644
index e058e5bb1ab..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-11.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-12.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-12.jpg
deleted file mode 100644
index 7e39162c75b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-12.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-13.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-13.jpg
deleted file mode 100644
index 4a1c1d5fd04..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-13.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-14.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-14.jpg
deleted file mode 100644
index b3175c1ba0d..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-14.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-2.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-2.jpg
deleted file mode 100644
index 3d6a1453b61..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-2.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-3.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-3.jpg
deleted file mode 100644
index 5f6e61fdac8..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-3.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-4.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-4.jpg
deleted file mode 100644
index f487d59ba82..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-4.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-5.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-5.jpg
deleted file mode 100644
index d1e04c9cb4d..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-5.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-6.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-6.jpg
deleted file mode 100644
index b1702c4c4a8..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-6.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-7.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-7.jpg
deleted file mode 100644
index 0c94dde05ae..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-7.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-8.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-8.jpg
deleted file mode 100644
index 9125ef695ee..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-8.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/img-9.jpg b/src/site/content/en/progressive-web-apps/drive-business-success/img-9.jpg
deleted file mode 100644
index 5822fe6e06a..00000000000
Binary files a/src/site/content/en/progressive-web-apps/drive-business-success/img-9.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/drive-business-success/index.md b/src/site/content/en/progressive-web-apps/drive-business-success/index.md
index 126e83493c9..d5a80b59e07 100644
--- a/src/site/content/en/progressive-web-apps/drive-business-success/index.md
+++ b/src/site/content/en/progressive-web-apps/drive-business-success/index.md
@@ -4,28 +4,32 @@ title: How Progressive Web Apps can drive business success
 authors:
   - sfourault
 date: 2020-05-20
-updated: 2020-05-20
+updated: 2022-08-09
 description: Build a solid business case for your PWA. Learn when you should invest, and how you can measure its success.
 tags:
   - progressive-web-apps
 ---
 
 Progressive Web Apps are on a lot of companies' roadmap to modernize their
-website and adapt to users' new expectations. Like all new concepts and
-technical capabilities, they raise questions: is it what my customers want,
-how much will it grow my business, what is technically feasible?
+websites and adapt to users' new expectations. As with many technologies, PWAs
+raise questions: is it what my customers want, how much will it grow my
+business, what is technically feasible?
 
-![Identify your stakeholders](img-1.jpg)
+<figure>
+  {% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="Identify your stakeholders.", width="800", height="254" %}
+  <figcaption>
+    Identify your stakeholders.
+  </figcaption>
+</figure>
 
 To shape your digital strategy, several stakeholders are often involved: the
-Product Manager and CMO are co-owners of the business impact of each feature,
-the CTO assesses the feasibility and reliability of a technology, the UX
-Researchers validate that a feature answers a real customer issue.
+product manager and chief marketing officer are co-owners of the business impact of each feature,
+the chief technology officer assesses the feasibility and reliability of a technology, the user experience
+researchers validate that a feature answers a real customer issue.
 
 This article aims to help you answer those three questions and shape your
 PWA project. You will start from your customer needs, translate this into
-PWA features, and focus on measuring the business impact that each feature
-brings to the table.
+PWA features, and focus on measuring the business impact of each.
 
 ## PWAs solve customer needs {: #solve-customer-needs }
 
@@ -33,24 +37,29 @@ One rule we love to follow at Google when making products is
 "[focus on the user and all else will follow][ten-things-we-know]". Think
 _user-first_: what are my customers' needs, and how does a PWA provide them?
 
-![Identify customer needs](img-2.jpg)
+<figure>
+  {% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="Identify customer needs.", width="800", height="262" %}
+  <figcaption>
+    Identify customer needs.
+  </figcaption>
+</figure>
 
 When doing user research, we find some interesting patterns:
 
-* Users hate delays and unreliability on mobile: the level of stress caused by
+* Users hate delays and unreliability on mobile. The level of stress caused by
   mobile delays is [comparable to watching a horror movie][horror-movie].
 * Fifty percent of smartphone users are more likely to use a company's mobile
   site when browsing or shopping because they
   [don't want to download an app][twg-shopping].
-* One of the top reasons for uninstalling an app is the
-  [limited storage][twg-uninstall] (whereas an installed PWA usually takes
+* One of the top reasons for uninstalling an app is
+  [limited storage][twg-uninstall]. (An installed PWA usually takes
   less than 1MB).
 * Smartphone users are more likely to purchase from mobile sites that
   [offer relevant recommendations][twg-purchase] on products, and 85% of
   smartphone users say [mobile notifications are useful][twg-notifications].
 
 According to those observations, we found out that customers prefer
-experiences that are fast, installable, reliable, and engaging (F.I.R.E.)!
+experiences that are fast, installable, reliable, and engaging (F.I.R.E.).
 
 ## PWAs leverage modern web capabilities {: #modern-capabilities }
 
@@ -59,17 +68,22 @@ meeting your customers' needs by making your site fast, installable, reliable,
 and engaging.
 
 For example, using a service worker to [cache your resources][cache-resources]
-and doing [predictive prefetching][wb-precache] makes your site faster, and
-more reliable. Making your site Installable provides an easy way for your
-customers to access it directly from their home screen or app launcher. And
-new APIs like [Web Push Notifications][mdn-web-push] make it easier to
-re-engage your users with personalized content to generate loyalty.
-
-![Improving the user experience with new capabilities](img-3.jpg)
+and doing [predictive prefetching][wb-precache] makes your site faster, and more
+reliable. Making your site Installable provides an easy way for your customers
+to access it directly from their home screen or app launcher. And APIs such as
+[Web Push Notifications][mdn-web-push] make it easier to re-engage your users
+with personalized content to generate loyalty.
+
+<figure>
+  {% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="Improving the user experience with web capabilities.", width="800", height="393" %}
+  <figcaption>
+    Improving the user experience with web capabilities.
+  </figcaption>
+</figure>
 
 ## Understand the business impact {: #business-impact }
 
-The business success definition can be a lot of things depending on your
+The business success definition can be many things depending on your
 activity:
 
 * Users spending more time on your service
@@ -77,9 +91,9 @@ activity:
 * Improved conversion rates
 * More returning visitors
 
-Most PWA projects result in a higher mobile conversion rate, and you can
+Most PWA projects result in a higher mobile conversion rate. You can
 learn more from the numerous [PWA case studies][pwa-case-studies]. Depending
-on your objectives, you may want to prioritize some aspects of PWA that make
+on your objectives, you may want to prioritize the aspects of PWAs that make
 more sense for your business, and it's completely OK. PWA features can be
 cherry-picked and launched separately.
 
@@ -90,7 +104,7 @@ Let's measure the business impact of each of these great F.I.R.E features.
 A recent [study from Deloitte Digital][deloitte-study] shows that page speed
 has a significant impact on business metrics.
 
-There's a lot you can do to optimize the speed of your site to optimize the
+There's much you can do to optimize the speed of your site to improve
 critical user journeys for all of your users. If you don't know where to
 start, take a look at our [Fast](/fast/) section, and use
 [Lighthouse][lighthouse] to prioritize the most important things to fix.
@@ -104,39 +118,54 @@ Thanks to your daily measurements and [the "value of speed" methodology][value-o
 you can isolate the impact of your incremental speed changes and calculate
 how much extra revenue your work has generated.
 
-![Measure the value of speed and correlate it with conversions](img-4.jpg)
+<figure>
+  {% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="Measure the value of speed and correlate it with conversions.", width="800", height="306" %}
+  <figcaption>
+    Measure the value of speed and correlate it with conversions.
+  </figcaption>
+</figure>
 
 Ebay made [speed a company objective][ebay-speed] for 2019. They used
-techniques like performance budget, critical path optimization, and
-predictive prefetching. They concluded that for every 100 milliseconds
+techniques such as performance budget, critical path optimization, and
+predictive prefetching. They concluded that for every 100 millisecond
 improvement in search page loading time, add-to-card count increased by 0.5%.
 
-![A 100ms improvement in load time resulted in a 0.5% increase in add to cart count for eBay](img-5.jpg)
+<figure>
+  {% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="A 100ms improvement in load time resulted in a 0.5% increase in add to cart count for eBay.", width="800", height="184" %}
+  <figcaption>
+    A 100ms improvement in load time resulted in a 0.5% increase in add to cart count for eBay.
+  </figcaption>
+</figure>
 
 ### The business impact of an installable website {: #impact-installable }
 
-Why would you want a user to install your PWA? To make it easier to come back
-to your site. Where a native app install would add at least three steps
-(redirection to Play Store, downloading, relaunching the native app at the
-top of the funnel), PWA installation is done seamlessly in one click, and it
-doesn't take the user away from the current conversion funnel.
+Why would you want a user to install your PWA? To make it easier to come back to
+your site. Where an Android app installation would add at least three steps
+(redirection to Play Store, downloading the app, launching the app), PWA
+installation is done seamlessly in one click without taking the user away from
+the current conversion funnel.
 
-![The install experience should be seamless](img-6.jpg)
+<figure>
+  {% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="The install experience should be seamless.", width="800", height="239" %}
+  <figcaption>
+    The install experience should be seamless.
+  </figcaption>
+</figure>
 
-Once installed, users are able to launch it in one click from the icon on
+Once an app is installed, users can launch it in one click using the icon on
 their home screen, see it in their app tray when they are switching between
-apps, or find it via an app search result.  We call this app dynamic
+apps, or find it via an app search result.  We call this dynamic
 Discover-Launch-Switch, and making your PWA installable is the key to
 unlocking access.
 
 In addition to being accessible from familiar discovery and launch surfaces
-on their device, a PWA launches exactly like a native app: in a standalone
-experience, separate from the browser. Additionally, it benefits from native
+on their device, a PWA launches exactly like a platform-specific app: in a standalone
+experience, separate from the browser. Additionally, it benefits from OS-level
 device services such as the app switcher and settings.
 
 Users who install your PWA are likely your most engaged users, with better
 engagement metrics than casual visitors, including more repeat visits,
-longer time on site and higher conversion rates, often at parity with native
+longer time on site and higher conversion rates, often at parity with platform-specific
 app users on mobile devices.
 
 To make your PWA installable, it needs to meet the
@@ -144,100 +173,125 @@ To make your PWA installable, it needs to meet the
 [promote the installation](/promote-install/) within your user experience on
 desktop and mobile, including iOS.
 
-![PWAs are installable everywhere](img-7.jpg)
+<figure>
+  {% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="PWAs are installable everywhere.", width="800", height="227" %}
+  <figcaption>
+    PWAs are installable everywhere.
+  </figcaption>
+</figure>
 
-Once you've begun to promote the installation of your PWA, you should
+Once you've begun promoting the installation of your PWA, you should
 measure how many users are installing your PWA, and how they use your PWA.
 
 To maximize the number of users installing your site, you may want to
 [test different][pwabook-ch4] promotion messages ("install in one
 second", or "add our shortcut to follow your order" for example), different
 placements (header banner, in-feed), and try proposing it at different steps
-of the funnel (on the second page visited, or after a booking).
+of the installation funnel (on the second page visited, or after a booking).
 
 To understand where your users are leaving and how to improve retention, the
-install funnel can be [measured][pwabook-ch8] in four ways:
+installation funnel can be [measured][pwabook-ch8] in four ways:
 
 * Number of users eligible to install
-* Number of users who clicked on the UI install prompt
-* Number of users who both accepted and declined to install
-* Number of users who have successfully installed
+* Number of users who clicked on the install prompt
+* Number of users who both accepted and declined the install prompt
+* Number of users who successfully installed
 
-You can start promoting your PWA install to all your users or use a more
-cautious approach by only experimenting with a small group of users.
+You can promote your PWA installation to all your users or take a more
+cautious approach by experimenting with a small group of users.
 
-After a few days or weeks you should already have some data to measure the
-impact on your business. What is the behaviour of people coming from the
+A few days or weeks should give you enough data to measure the
+impact on your business. What is the behavior of people coming from the
 installed shortcut? Do they engage more, do they convert more?
 
-To segment users who installed your PWA, track the
-[`appinstalled` event][appinstalled-event], and use JavaScript to
-[check if users are in standalone mode][is-standalone] (indicating usage of
-the installed PWA). Then use these as variables or dimensions for your
-analytics tracking.
-
-![Measure the value of installation](img-8.jpg)
-
-The [case study of Weekendesk][twg-weekendest] is interesting: they propose
-Installation on the second page visited to maximise the install rate, and
-they observed that customers coming back via the icon on the home screen were
-more than twice as likely to book a stay with them.
-
-![Installed users had a 2.5x higher conversion rate](img-9.jpg)
-
-Installation is a great way to make people return on your site and improve
+To segment users who installed your PWA, track the [`appinstalled`
+event][appinstalled-event], and use JavaScript to [check if users are in
+standalone mode][is-standalone], which indicates use of the installed PWA.
+Then use these as variables or dimensions for your analytics tracking.
+
+<figure>
+  {% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="Measure the value of installation.", width="800", height="253" %}
+  <figcaption>
+    Measure the value of installation.
+  </figcaption>
+</figure>
+
+The [case study of Weekendesk][twg-weekendest] is interesting; to increase
+the chance a user would install their PWA, they promote installation on the
+second page visited. Users who launched the PWA from their home screen
+were more than twice as likely to book a stay through their PWA!
+
+<figure>
+  {% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="Installed users had a 2.5 times higher conversion rate.", width="800", height="201" %}
+  <figcaption>
+    Installed users had a 2.5 times higher conversion rate.
+  </figcaption>
+</figure>
+
+Installation is a great way to encourage people return to your site and improve
 your customer loyalty. You can also think of personalizing the experience for
-those premium users.
+premium users.
 
-Even if you already have a native app, you may test to propose your app first
-then push the PWA later for those who declined or did not engage with the app
-install banner. Some of your users that are "semi-engaged" may not meet the
-threshold for an app store-based install. This cohort can be addressed with
-PWA installability that is often perceived as lighter, and with less friction.
+Even if you have a platform-specific app, users may feel they don't want to, or
+don't need to install it. These semi-engaged users may feel a PWA is right for
+them as it is often perceived as lighter, and can be installed with less friction.
 
-![PWAs can reach semi-engaged users](img-10.jpg)
+<figure>
+  {% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="PWAs can reach semi-engaged users.", width="800", height="229" %}
+  <figcaption>
+    PWAs can reach semi-engaged users.
+  </figcaption>
+</figure>
 
 ### The business impact of a reliable website {: #impact-reliable }
 
-The Chrome Dino game, offered when a user is offline, is played more than
-[270 million times][chrome-dino-game] a month. This impressive number shows
-that network reliability is a considerable opportunity, especially in
-markets with unreliable or expensive mobile data like India, Brazil, Mexico,
-or Indonesia.
+The Chrome Dino game, offered when a user is offline, is played more than [270
+million times][chrome-dino-game] a month. This impressive number shows that
+network reliability is a considerable opportunity for PWA use, especially in
+markets with unreliable networks or expensive mobile data such as India, Brazil,
+Mexico, or Indonesia.
 
-When a native app, installed from an app store, is launched, users expect
-it to open, regardless of whether they're connected to the internet.
+When an app installed from an app store is launched, users expect
+it to open regardless of whether they're connected to the internet.
 Progressive Web Apps should be no different.
 
 At a minimum, a simple offline page that tells the user the app isn't
 available without a network connection should be served. Then, consider
-taking the experience a step further by providing some
+taking the experience a step further by providing
 [functionality that makes sense while offline][pwabook-ch6]. For example,
 you could provide access to tickets or boarding passes, offline wish lists,
 call center contact information, articles or recipes that the user has
 recently viewed, etc.
 
-![Be helpful, even when offline](img-11.jpg)
-
-Once you've implemented a [reliable user experience][pwabook-ch6], you may
-want to measure it; how many users are going offline, in which geographies,
-and do they stay on the website when the network is back?
-
-Offline usage can be measured by recording analytics pings when the user goes
-[offline or online][pwabook-ch8]. It tells you how many users continue
-browsing on your website after the network comes back.
-
-![Trivago saw a 67% of users who came back online continue browsing](img-12.jpg)
+<figure>
+  {% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="Be helpful, even when offline.", width="800", height="243" %}
+  <figcaption>
+    Be helpful, even when offline.
+  </figcaption>
+</figure>
+
+Once you've implemented a [reliable user experience][pwabook-ch6], you may want
+to measure it; how many users are going offline, in which geographies, and do
+they stay on the website when the network is back? Analytics can tell you when
+users go generally go [offline and online][pwabook-ch8]. This tells you how many
+users continue browsing on your website after the network comes back.
+
+<figure>
+  {% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivago saw a 67% increase in users who came back online and continue browsing.", width="800", height="272" %}
+  <figcaption>
+    Trivago saw a 67% increase in users who came back online continue browsing.
+  </figcaption>
+</figure>
 
 The [Trivago case study][twg-trivago] illustrates how this can impact your
-business objectives: for users whose sessions were interrupted by an
+business objectives. For users whose sessions were interrupted by an
 offline period (around three percent of users), 67% of those who come
 back online continued browsing the site.
 
 ### The business impact of an engaging website {: #impact-engaging }
 
-Web push notifications allow users to opt-in to timely updates from sites
-they love and allow you to effectively re-engage them with customized,
+Web push notifications allow users to opt-in to timely updates from sites they
+need or care about and allow you to effectively re-engage them with customized,
 relevant content.
 
 Be careful, though. Asking users to sign up for web notifications when they
@@ -250,11 +304,11 @@ of stock products, etc.
 Technically, [push notifications][dgc-web-push] on the web run in the
 background thanks to a service worker and are often sent by a system built for
 managing campaigns (e.g. Firebase). This feature brings great business value
-for mobile (Android) and desktop users: it increases repeated visits and
+for mobile (Android) and desktop users. It increases repeated visits and
 consequently sales and conversions.
 
-To measure the effectiveness of your push campaigns, your need to measure
-the whole funnel:
+To measure the effectiveness of your push campaigns, you need to measure
+the whole funnel including:
 
 * Number of users eligible for push notifications
 * Number of users who click a custom notification UI prompt
@@ -263,21 +317,31 @@ the whole funnel:
 * Number of users who engage with notifications
 * Conversion and engagement of users coming from a notification
 
-![Measure the value of Web Push Notifications](img-13.jpg)
+<figure>
+  {% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="Measure the value of web push notifications.", width="800", height="255" %}
+  <figcaption>
+    Measure the value of web push notifications.
+  </figcaption>
+</figure>
 
-There are a lot of great case studies on web push notifications, like
-[Carrefour who multiplied their conversion rate by 4.5][carrefour-45x] by
+There are a lot of great case studies on web push notifications, such as the one
+with [Carrefour who multiplied their conversion rate by 4.5][carrefour-45x] by
 re-engaging users with abandoned carts.
 
 ## The P in PWA: a progressive launch, feature by feature {: #feature-by-feature }
 
-PWAs are modern websites that benefit from the massive reach of the web,
-combined with all the user-friendly features that users love in native apps.
-They leverage a set of best practices and modern web APIs, that can be
+PWAs are modern websites that combine the massive reach of the web, combined
+with all the user-friendly features that users expect in Android, iOS, or
+desktop apps. They use a set of best practices and modern web APIs that can be
 implemented independently depending on your business specificities and
 priorities.
 
-![Progressively launch your PWA](img-14.jpg)
+<figure>
+  {% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="Progressively launch your PWA.", width="800", height="253" %}
+  <figcaption>
+    Progressively launch your PWA.
+  </figcaption>
+</figure>
 
 To accelerate the modernization of your website and make it a real PWA,
 we encourage you to be agile: launch feature by feature. First, research
@@ -288,11 +352,11 @@ measure precisely how much extra money your PWA generated.
 [pwa-case-studies]: https://www.pwastats.com/
 [precache-app]: /service-workers-cache-storage/
 [wb-precache]: /precache-with-workbox/
-[mdn-webpush]: https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices
+[mdn-webpush]: https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices
 [ten-things-we-know]: https://www.google.com/about/philosophy.html
 [horror-movie]: https://blog.hubspot.com/marketing/mobile-website-load-faster
 [deloitte-study]: https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html
-[lighthouse]: https://developers.google.com/web/tools/lighthouse
+[lighthouse]: https://developer.chrome.com/docs/lighthouse/overview/
 [perf-budget-ci]: /incorporate-performance-budgets-into-your-build-tools/
 [value-of-speed]: /value-of-speed/
 [ebay-speed]: /shopping-for-speed-on-ebay/
@@ -308,8 +372,8 @@ measure precisely how much extra money your PWA generated.
 [twg-purchase]: https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/
 [twg-trivago]: https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/
 [twg-notifications]: https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/
-[not-ux-bp]: https://developers.google.com/web/fundamentals/push-notifications/permission-ux
-[dgc-web-push]: https://developers.google.com/web/fundamentals/push-notifications/
+[not-ux-bp]: /push-notifications-permissions-ux/
+[dgc-web-push]: /notifications/
 [carrefour-45x]: https://useinsider.com/case-studies/carrefour/
 [cache-resources]: /service-workers-cache-storage/
-[mdn-web-push]: https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices
+[mdn-web-push]: https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices
diff --git a/src/site/content/en/progressive-web-apps/index.md b/src/site/content/en/progressive-web-apps/index.md
new file mode 100644
index 00000000000..fbbfce85f44
--- /dev/null
+++ b/src/site/content/en/progressive-web-apps/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2020-02-24
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/en/progressive-web-apps/index.njk b/src/site/content/en/progressive-web-apps/index.njk
deleted file mode 100644
index 47b29eef9fb..00000000000
--- a/src/site/content/en/progressive-web-apps/index.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2020-02-24
-pathName: progressive-web-apps
-tags:
-  - progressive-web-apps
----
diff --git a/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_desktop.png b/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_desktop.png
deleted file mode 100644
index 017de142d0f..00000000000
Binary files a/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_mobile.png b/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_mobile.png
deleted file mode 100644
index 3a352af61e8..00000000000
Binary files a/src/site/content/en/progressive-web-apps/install-criteria/how-does-it-work_mobile.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/install-criteria/index.md b/src/site/content/en/progressive-web-apps/install-criteria/index.md
index f067187b549..b91cb6be89b 100644
--- a/src/site/content/en/progressive-web-apps/install-criteria/index.md
+++ b/src/site/content/en/progressive-web-apps/install-criteria/index.md
@@ -4,7 +4,7 @@ title: What does it take to be installable?
 authors:
   - petelepage
 date: 2020-02-14
-updated: 2020-06-17
+updated: 2022-06-09
 description: |
   Progressive Web App installability criteria.
 tags:
@@ -12,14 +12,14 @@ tags:
 ---
 
 Progressive Web Apps (PWAs) are modern, high quality applications built
-using web technology. PWAs offer similar capabilities to native apps, they
+using web technology. PWAs offer similar capabilities to iOS/Android/desktop apps, they
 are reliable even in unstable network conditions, and are installable making
 it easier for users to find and use them.
 
 Most users are familiar with installing applications, and the benefits of an
 installed experience. Installed applications appear on operating system
 launch surfaces, such as the Applications folder on Mac OS X, the Start menu
-on Windows, and the homescreen on Android and iOS. Installed applications
+on Windows, and the home screen on Android and iOS. Installed applications
 also show up in the activity switcher, device search engines such as
 Spotlight and in content sharing sheets.
 
@@ -28,18 +28,16 @@ installable when it meets certain criteria. Example indicators include an
 Install button in the address bar, or an Install menu item in the overflow
 menu.
 
-<div class="w-columns" >
-  <figure class="w-figure" id="browser-install-promo">
-    <img src="how-does-it-work_desktop.png"
-        alt="Screenshot of omnibox with install indicator visible.">
-    <figcaption class="w-figcaption">
+<div class="switcher" >
+  <figure id="browser-install-promo">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="Screenshot of omnibox with install indicator visible.", width="800", height="307" %}
+    <figcaption>
       Browser provided install promotion (desktop)
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="how-does-it-work_mobile.png"
-        alt="Screenshot of browser provided install promotion.">
-    <figcaption class="w-figcaption">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="Screenshot of browser provided install promotion.", width="800", height="307" %}
+    <figcaption>
       Browser provided install promotion (mobile)
     </figcaption>
   </figure>
@@ -56,31 +54,32 @@ it will fire the `beforeinstallprompt` event and show the in-browser install
 promotion:
 
 * The web app is not already installed
-* Meets a user engagement heuristic
+* Meets the user engagement heuristics:
+  * The user needs to have clicked or tapped on the page at least once (at any time, even during a previous page load)
+  * The user needs to have spent at least 30 seconds viewing the page (at any time)
 * Be served over HTTPS
-* Includes a [Web App Manifest][add-manifest] that includes:
+* Includes a [web app manifest][add-manifest] that includes:
   * `short_name` or `name`
   * `icons` - must include a 192px and a 512px icon
   * `start_url`
   * `display` - must be one of `fullscreen`, `standalone`, or `minimal-ui`
-  * Note: `prefer_related_applications` must not be present, or be `false`
-* Registers a service worker with a functional `fetch` handler
+  * `prefer_related_applications` must not be present, or be `false`
 
 Other browsers have similar criteria for installation, though there may be
 minor differences. Check the respective sites for full details:
 
 * [Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)
-* [Firefox](https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen#How_do_you_make_an_app_A2HS-ready)
+* [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
 * [Opera](https://dev.opera.com/articles/installable-web-apps/)
-* [Samsung Internet](https://hub.samsunginter.net/docs/ambient-badging/)
-* [UC Browser](https://plus.ucweb.com/docs/pwa/docs-en/zvrh56)
 
 {% Aside %}
 On Android, if the web app manifest includes `related_applications` and
 `"prefer_related_applications": true`, the user will be directed to the
 Google Play store and
-[prompted to install the specified native app](https://developers.google.com/web/fundamentals/app-install-banners/native)
+[prompted to install the specified Android app](https://developer.chrome.com/blog/app-install-banners-native/)
 instead.
 {% endAside %}
 
 [add-manifest]: /add-manifest/
+[offline-fallback]: /offline-fallback-page/
+[new-offline-detection]: https://developer.chrome.com/blog/improved-pwa-offline-detection/
diff --git a/src/site/content/en/progressive-web-apps/manifest-updates/index.md b/src/site/content/en/progressive-web-apps/manifest-updates/index.md
new file mode 100644
index 00000000000..3ec280f2c0b
--- /dev/null
+++ b/src/site/content/en/progressive-web-apps/manifest-updates/index.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: How Chrome handles updates to the web app manifest
+subhead: What it takes to change icons, shortcuts, colors, and other metadata for your PWA
+authors:
+  - petelepage
+  - ajara
+  - beaufortfrancois
+date: 2020-10-14
+updated: 2021-10-26
+description: What it takes to change icons, shortcuts, colors, and other metadata in your web app manifest for your PWA.
+tags:
+  - progressive-web-apps
+---
+
+{% Aside %}
+We are currently gathering data on browsers other than Chrome. If you would
+like to help us gather this data or add content to this page, please leave a
+comment in [issue #4038](https://github.com/GoogleChrome/web.dev/issues/4038).
+{% endAside %}
+
+When a PWA is installed, the browser uses information from the web app
+manifest for the app name, the icons the app should use, and the URL that
+should be opened when the app is launched. But what if you need to update
+app shortcuts or try a new theme color? When and how are those changes
+reflected in the browser?
+
+{% Aside 'caution' %}
+Do not change the name or location of your web app manifest file, doing so
+may prevent the browser from updating your PWA.
+{% endAside %}
+
+In most cases, changes should be reflected within a day or two of the
+PWA being launched, after the manifest has been updated.
+
+## Updates on desktop Chrome {: #cr-desktop }
+
+When the PWA is launched, or opened in a browser tab, Chrome determines the
+last time the local manifest was checked for changes. If the manifest hasn't
+been checked since the browser last started, or it hasn't been checked in the
+last 24 hours, Chrome will make a network request for the manifest, then
+compare it against the local copy.
+
+If select properties in the manifest have changed (see list below), Chrome
+queues the new manifest, and after all windows have been closed, installs it.
+Once installed, all fields from the new manifest (except `name`, `short_name`,
+and `icons`) are updated.
+
+### Which properties will trigger an update? {: #cr-desktop-trigger }
+
+* `display` (see below)
+* `scope`
+* `shortcuts`
+* `start_url`
+* `theme_color`
+* `file_handlers`
+
+{% Aside 'caution' %}
+Changes to `name`, `short_name` and `icons` are **not**
+currently supported on desktop Chrome, though work is underway to support them.
+{% endAside %}
+
+{% Aside 'caution' %}
+Changes to the `start_url` require the manifest `id` to be set.
+[More info](https://developer.chrome.com/blog/pwa-manifest-id/)
+{% endAside %}
+
+<!-- CrBug for name/shortname https://crbug.com/1088338 -->
+<!-- CrBug for start_url https://crbug.com/1095947 -->
+
+### What happens when the `display` field is updated?
+
+If you update your app's display mode from `browser` to `standalone` your
+existing users will not have their apps open in a window after updating. There
+are two display settings for a web app, the one from the manifest (that you
+control) and a window/browser tab setting controlled by the user. The user
+preference is always respected.
+
+### Testing manifest updates {: #cr-desktop-test }
+
+The `chrome://web-app-internals` page (available in Chrome 85 or later),
+includes detailed information about all of the PWAs installed on the device,
+and can help you understand when the manifest was last updated, how often
+it's updated, and more.
+
+To manually force Chrome to check for an updated manifest, you can either launch
+Chrome with the [command line flag][flag] `--disable-manifest-update-throttle`
+or restart Chrome (use `about://restart`), this resets the timer so that Chrome
+will check for an updated manifest when the PWA is next launched. Then launch
+the PWA. After closing the PWA, it should be updated with the new manifest
+properties.
+
+### References {: #cr-desktop-ref }
+
+* [Updatable Web Manifest Fields][updatable-manifest-doc]
+
+## Updates on Chrome for Android {: #cr-android }
+
+When the PWA is launched, Chrome determines the last time the local manifest
+was checked for changes. If the manifest hasn't been checked in the last 24
+hours, Chrome will schedule a network request for the manifest, then compare
+it against the local copy.
+
+If select properties in the manifest have changed (see list below), Chrome
+queues the new manifest, and after all windows of the PWA have been closed,
+the device is plugged in, and connected to WiFi, Chrome requests an updated
+WebAPK from the server. Once updated, all fields from the new manifest are
+used.
+
+### Which properties will trigger an update? {: #cr-android-trigger }
+
+* `background_color`
+* `display`
+* `orientation`
+* `scope`
+* `shortcuts`
+* `start_url`
+* `theme_color`
+* `web_share_target`
+
+If Chrome is unable to get an updated manifest from the server, it may
+increase the time between checks to 30 days.
+
+{% Aside 'caution' %}
+Changes to `name`, `short_name` and `icons` are **not** currently supported
+on Android Chrome, though work is underway to support them.
+{% endAside %}
+
+### Testing manifest updates {: #cr-android-test }
+
+The `about://webapks` page includes detailed information about all of the
+PWAs installed on the device, and can tell you when the manifest was last
+updated, how often it's updated, and more.
+
+To manually schedule an update to the manifest, overriding the timer and
+local manifest do the following:
+
+1. Plug in the device and ensure it's connected to WiFi.
+2. Use the Android task manager to shut down the PWA, then use the App panel
+   in Android settings to force stop the PWA.
+3. In Chrome, open `about://webapks` and click the "Update" button for the
+   PWA. "Update Status" should change to "Pending".
+4. Launch the PWA, and verify it's loaded properly.
+5. Use the Android task manager to shut down the PWA, then use the App panel
+   in Android settings to force stop the PWA.
+
+The PWA usually updates within a few minutes, once the update has completed,
+"Update Status" should change to "Successful"
+
+### References {: #cr-android-ref }
+
+* [`UpdateReason` enum][update-enum] for Chrome on Android
+
+[flag]: https://www.chromium.org/developers/how-tos/run-chromium-with-flags
+[updatable-manifest-doc]: https://docs.google.com/document/d/1twU_yAoTDp4seZMmqrDzJFQtrM7Z60jXHkXjMIO2VpM/preview
+[update-enum]: https://cs.chromium.org/chromium/src/chrome/browser/android/webapk/webapk.proto?l=35
diff --git a/src/site/content/en/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/en/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..96ca8057b84
--- /dev/null
+++ b/src/site/content/en/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,320 @@
+---
+layout: post
+title: Create an offline fallback page
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2022-06-15
+description: Learn how to create a simple offline experience for your app.
+tags:
+  - progressive-web-apps
+---
+
+What do the Google Assistant app, the Slack app, the Zoom app, and almost
+any other platform-specific app on your phone or computer have in common? Right, they always at least give you *something*.
+Even when you do not have a network connection, you can still open the Assistant app, or enter
+Slack, or launch Zoom. You might not get anything particularly meaningful or even
+be unable to achieve what you wanted to achieve, but at least you get _something_ and the app is in
+control.
+
+<figure role="group" aria-labelledby="fig-apps-wrapper">
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="Google Assistant mobile app while offline.", width="621", height="1344" %}
+    <figcaption id="fig-assistant">
+      Google Assistant.
+    </figcaption>
+  </figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="Slack mobile app while offline.", width="621", height="1344" %}
+    <figcaption id="fig-slack">
+      Slack.
+    </figcaption>
+  </figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="Zoom mobile app while offline.", width="621", height="1344" %}
+    <figcaption id="fig-zoom">
+      Zoom.
+    </figcaption>
+  </figure>
+
+  <figcaption id="fig-apps-wrapper">
+    With platform-specific apps, even when you do not have a network connection, you never get nothing.
+  </figcaption>
+
+</figure>
+
+In contrast, on the Web, traditionally you get nothing when you are offline. Chrome gives you
+the [offline dino game](https://www.blog.google/products/chrome/chrome-dino/), but that is it.
+
+<figure role="group" aria-labelledby="fig-offline-wrapper">
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="Google Chrome mobile app showing the offline dino game.", width="800", height="1731" %}
+    <figcaption id="fig-chrome-ios">
+      Google Chrome for iOS.
+    </figcaption>
+  </figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="Google Chrome desktop app showing the offline dino game.", width="800", height="607" %}
+    <figcaption id="fig-chrome">
+      Google Chrome for macOS.
+    </figcaption>
+  </figure>
+
+  <figcaption id="fig-offline-wrapper">
+    On the Web, when you do not have a network connection, by default you get nothing.
+  </figcaption>
+
+</figure>
+
+## An offline fallback page with a custom service worker
+
+It does not have to be this way, though. Thanks to
+[service workers and the Cache Storage API](/service-workers-cache-storage/), you can provide a
+customized offline experience for your users. This can be a simple branded page with the information
+that the user is currently offline, but it can just as well be a more creative solution, like, for
+example, the famous [trivago offline maze game](https://www.trivago.com/offline) with a manual
+**Reconnect** button and an automatic reconnection attempt countdown.
+
+<figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="The trivago offline page with the trivago offline maze.", width="800", height="616" %}
+    <figcaption>
+      The trivago offline maze.
+    </figcaption>
+  </figure>
+
+### Registering the service worker
+
+The way to make this happen is through a service worker. You can register a service worker
+from your main page as in the code sample below. Usually you do this once
+your app has loaded.
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### The service worker code
+
+The contents of the actual service worker file may seem a little involved at first sight, but the
+comments in the sample below should clear things up. The core idea is to pre-cache a file named
+`offline.html` that only gets served on _failing_ navigation requests, and to let the browser handle
+all other cases:
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+// This variable is intentionally declared and unused.
+// Add a comment for your linter if you want:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request ensures that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be
+      // from the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // Only call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's
+          // supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is
+          // likely due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't
+  // intercept the request. If there are any other fetch handlers
+  // registered, they will get a chance to call event.respondWith().
+  // If no fetch handlers call event.respondWith(), the request
+  // will be handled by the browser as if there were no service
+  // worker involvement.
+});
+```
+
+### The offline fallback page
+
+The `offline.html` file is where you can get creative and adapt it to your needs and add your
+branding. The example below shows the bare minimum of what is possible.
+It demonstrates both manual reload based on a button press as well as automatic reload
+based on the [`online` event](https://developer.mozilla.org/docs/Web/API/Window/online_event)
+and regular server polling.
+
+{% Aside 'gotchas' %} You need to cache all resources required by your offline page. One
+way to deal with this is to inline everything, so the offline page is self-contained. This is what I
+do in the example below. {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>You are offline</h1>
+
+    <p>Click the button below to try reloading.</p>
+    <button type="button">⤾ Reload</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // Manual reload feature.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Listen to changes in the network state, reload when online.
+      // This handles the case when the device is completely offline.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Check if the server is responding and reload the page if it is.
+      // This handles the case when the device is online, but the server
+      // is offline or misbehaving.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Verify we get a valid response from the server
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // Unable to connect to the server, ignore.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## Demo
+
+You can see the offline fallback page in action in the
+[demo](https://offline-fallback-demo.glitch.me/index.html) embedded below. If you are
+interested, you can explore the [source code](https://glitch.com/edit/#!/offline-fallback-demo) on
+Glitch.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&previewSize=100"
+    title="offline-fallback-demo on Glitch"
+    allow="geolocation; microphone; camera; midi; vr; encrypted-media"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+### Side note on making your app installable
+
+Now that your site has an offline fallback page, you might wonder about next steps. To make
+your app installable, you need to add a [web app manifest](/add-manifest/) and optionally come up
+with an [install strategy](/define-install-strategy/).
+
+### Side note on serving an offline fallback page with Workbox.js
+
+You may have heard of [Workbox](https://developer.chrome.com/docs/workbox/).
+Workbox is a set of JavaScript libraries for adding offline support to web apps. If you prefer to
+write less service worker code yourself, you can use the Workbox recipe for an
+[offline page only](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only).
+
+Up next, learn [how to define an install strategy](/define-install-strategy/) for your app.
diff --git a/src/site/content/en/progressive-web-apps/promote-install/after-conversion_desktop.png b/src/site/content/en/progressive-web-apps/promote-install/after-conversion_desktop.png
deleted file mode 100644
index bc004dda37f..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/after-conversion_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/after-conversion_mobile.png b/src/site/content/en/progressive-web-apps/promote-install/after-conversion_mobile.png
deleted file mode 100644
index 0a5c5379e1c..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/after-conversion_mobile.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/banner.png b/src/site/content/en/progressive-web-apps/promote-install/banner.png
deleted file mode 100644
index d4b2398e51c..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/banner.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/elevated-install_desktop.png b/src/site/content/en/progressive-web-apps/promote-install/elevated-install_desktop.png
deleted file mode 100644
index 61cf3899f1a..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/elevated-install_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/elevated-install_mobile.png b/src/site/content/en/progressive-web-apps/promote-install/elevated-install_mobile.png
deleted file mode 100644
index 3dcfd44a38b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/elevated-install_mobile.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/game-over.png b/src/site/content/en/progressive-web-apps/promote-install/game-over.png
deleted file mode 100644
index caeb8a8e9c5..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/game-over.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/game-start.png b/src/site/content/en/progressive-web-apps/promote-install/game-start.png
deleted file mode 100644
index 8ec7beface7..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/game-start.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/header.png b/src/site/content/en/progressive-web-apps/promote-install/header.png
deleted file mode 100644
index 67d549fa020..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/header.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_desktop.png b/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_desktop.png
deleted file mode 100644
index 017de142d0f..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_mobile.png b/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_mobile.png
deleted file mode 100644
index 3a352af61e8..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/how-does-it-work_mobile.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/in-feed.png b/src/site/content/en/progressive-web-apps/promote-install/in-feed.png
deleted file mode 100644
index 6b73e20e4d0..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/in-feed.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/index.md b/src/site/content/en/progressive-web-apps/promote-install/index.md
index 892e07eca1d..4c49ec30356 100644
--- a/src/site/content/en/progressive-web-apps/promote-install/index.md
+++ b/src/site/content/en/progressive-web-apps/promote-install/index.md
@@ -10,6 +10,8 @@ description: |
   How to promote installation of Progressive Web Apps and best practices.
 tags:
   - progressive-web-apps
+feedback:
+  - api
 ---
 
 Installing your Progressive Web App (PWA) can make it easier for users to
@@ -17,25 +19,22 @@ find and use. Even with browser promotion, some users don't realize that
 they can install a PWA, so it can be helpful to provide an in-app experience
 that you can use to promote and enable installation of your PWA.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="simple-button_mobile-crop.png"
-      alt="Screenshot of simple install button in PWA.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="Screenshot of simple install button in PWA.", width="800", height="368" %}
+  <figcaption>
     A simple install button provided within your PWA.
   </figcaption>
 </figure>
 
-This list is by no means exhaustive, but offers a starting point for different
+This article is by no means exhaustive, but offers a starting point for different
 ways to promote the installation of your PWA. Regardless of which pattern, *or
 patterns* you use,  they all lead to the same code that triggers the install
 flow, documented in
 [How to provide your own in-app install experience](/customize-install/).
 
-<div class="w-clearfix">&nbsp;</div>
+## Best practices {: #best-practices }
 
-## PWA install promotion best practices {: #best-practices }
-
-There are some best practices that apply no matter what promotional patterns
+There are some best practices that apply no matter which promotional patterns
 you're using on your site.
 
 * Keep promotions outside of the flow of your user journeys. For example,
@@ -46,47 +45,43 @@ you're using on your site.
   user's preference if they do this and only re-prompt if there's a change
   in the user's relationship with your content such as if they signed in or
   completed a purchase.
-* Combine more than one of these techniques in different parts of your PWA,
-  but be careful not to overwhelm or annoy your user with install promotion.
+* Combine techniques in different parts of your PWA, but be careful not to
+  overwhelm or annoy your user with install promotion.
 * Only show the promotion **after** the
   [`beforeinstallprompt` event](/customize-install/#beforeinstallprompt) has
-  been fired.
+  fired.
 
 ## Automatic browser promotion {: #browser-promotion }
 
-When [certain criteria](/install-criteria/) are met, most browsers will
-automatically indicate to the user that your Progressive Web App is
-installable. For example, desktop Chrome shows an install button in the omnibox.
+When [certain criteria](/install-criteria/) are met, most browsers automatically
+indicate to the user that your Progressive Web App is installable. For example,
+desktop Chrome shows an install button in the omnibox.
 
-<div class="w-columns">
-  <figure class="w-figure" id="browser-install-promo">
-    <img src="how-does-it-work_desktop.png"
-        alt="Screenshot of omnibox with install indicator visible.">
-    <figcaption class="w-figcaption">
-      Browser provided install promotion (desktop)
+<div class="switcher">
+  <figure id="browser-install-promo">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="Screenshot of omnibox with a visible install indicator.", width="800", height="307" %}
+    <figcaption>
+      Browser-provided install promotion (desktop).
     </figcaption>
   </figure>
-  <figure class="w-figure">
-    <img src="how-does-it-work_mobile.png"
-        alt="Screenshot of browser provided install promotion.">
-    <figcaption class="w-figcaption">
-      Browser provided install promotion (mobile)
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="Screenshot of browser-provided install promotion.", width="800", height="307" %}
+    <figcaption>
+      Browser-provided install promotion (mobile).
     </figcaption>
   </figure>
 </div>
 
-<div class="w-clearfix">&nbsp;</div>
-
-Chrome for Android will show a mini-infobar to the user, though this can be
+Chrome for Android shows a mini infobar to the user, though this can be
 prevented by calling `preventDefault()` on the `beforeinstallprompt` event.
 If you do not call `preventDefault()`, the banner will be shown the first time
-a user visits your site and it meets the installability criteria on Android,
+a user visits your site and meets the installability criteria on Android,
 and then again after approximately 90 days.
 
-## Application UI promotional patterns {: #app-ui-patterns }
+## User interface promotional patterns {: #app-ui-patterns }
 
-Application UI promotional patterns can be used for almost any kind of PWA and
-appear in the application UI, such as site navigation and banners. As with
+User interface promotional patterns can be used for almost any kind of PWA and
+appear in places such as site navigation and banners. As with
 any other type of promotional pattern, it's important to be aware of the
 user's context to minimize disruption of the user's journey.
 
@@ -94,8 +89,6 @@ Sites which are thoughtful about when they trigger promotion UI achieve a
 larger number of installs and avoid interfering with the journeys of users
 who aren't interested in installation.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Simple install button {: #simple-button }
 
 The simplest possible UX is to include an 'Install' or 'Get app' button at an
@@ -103,15 +96,13 @@ appropriate location in your web content. Ensure the button doesn't block
 other important functionality and is out of the way of the user's journey
 through your application.
 
-<figure class="w-figure">
-  <img src="simple-button_desktop.png" alt="Custom install button">
-  <figcaption class="w-figcaption">
-    Simple install button
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="Custom install button..", width="800", height="448" %}
+  <figcaption>
+    Simple install button.
   </figcaption>
 </figure>
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Fixed header {: #header }
 
 This is an install button that is part of the header of your site. Other
@@ -119,10 +110,10 @@ header content often includes site branding such as a logo and the hamburger
 menu. Headers may be `position:fixed` or not depending on your site's
 functionality and user needs.
 
-<figure class="w-figure">
-  <img src="elevated-install_desktop.png" alt="Custom install button in header">
-  <figcaption class="w-figcaption">
-    Custom install button in header
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="Custom install button in header.", width="800", height="448" %}
+  <figcaption>
+    Custom install button in header.
   </figcaption>
 </figure>
 
@@ -132,9 +123,9 @@ return to your experience. Pixels in your PWA header are precious,
 so make sure your installation call to action is appropriately sized, of greater
 importance than other possible header content, and unintrusive.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="elevated-install_mobile.png" alt="Custom install button in header">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="Custom install button in header", width="800", height="430" %}
+  <figcaption>
     Custom install button in header
   </figcaption>
 </figure>
@@ -150,13 +141,11 @@ Make sure you:
   to offer your user in the header, and weigh the priority of the install
   promotion relative to other options.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Navigation menu {: #nav }
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="nav.png" alt="Custom install button in nav menu">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="Custom install button in nav menu", width="800", height="1117" %}
+  <figcaption>
     Add an install button/promotion in a slide out navigation menu.
   </figcaption>
 </figure>
@@ -171,18 +160,16 @@ Make sure you:
 * Offer a short, relevant pitch for why the user would benefit from
   installing your PWA.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Landing page {: #landing }
 
 The purpose of a landing page is to promote your products and services,
-so this is one place where it is appropriate to go large with promoting
+so this is one place where it is appropriate to go large when promoting
 the benefits of installing your PWA.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="landing.png" alt="Custom install prompt on landing page">
-  <figcaption class="w-figcaption">
-    Custom install prompt on landing page
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="Custom install prompt on a landing page.", width="800", height="1117" %}
+  <figcaption>
+    Custom install prompt on a landing page.
   </figcaption>
 </figure>
 
@@ -199,61 +186,57 @@ Make sure you:
 * Consider adding an install promotion in the part of your app where users spend
   most of their time.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Install banner {: #banner }
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="banner.png" alt="Custom install banner at top of page.">
-  <figcaption class="w-figcaption">
-    A dismissible banner at the top of the page.
-  </figcaption>
-</figure>
-
 Most users have encountered installation banners in mobile experiences and are
 familiar with the interactions offered by a banner. Banners should be used
 carefully because they can disrupt the user.
 
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="Custom install banner at top of page.", width="800", height="1000" %}
+  <figcaption>
+    A dismissible banner at the top of the page.
+  </figcaption>
+</figure>
+
 Make sure you:
 
 * Wait until the user has demonstrated interest in your site before showing
   a banner. If the user dismisses your banner, don't show it again unless
   the user triggers a conversion event that indicates a higher level of
-  engagement with your content such as a purchase on an e-commerce site or
+  engagement with your content such as a purchase on an e&#8209;commerce site or
   signing up for an account.
 * Provide a brief explanation of the value of installing your PWA in the
-  banner. For example, you can differentiate the install of a PWA from a
-  native app by mentioning that it uses almost no storage on the user's
+  banner. For example, you can differentiate the install of a PWA from an
+  iOS/Android app by mentioning that it uses almost no storage on the user's
   device or that it will install instantly without a store redirect.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Temporary UI {: #temporary-ui }
 
 Temporary UI, such as the [Snackbar](https://material.io/components/snackbars/)
 design pattern, notifies the user, and allows them to easily complete an
-action. In this case, install the app. When used properly, these kinds of UI
+action, in this case, installing the app. When used properly, these kinds of UI
 patterns don't interrupt the user flow, and are typically automatically
 dismissed if ignored by the user.
 
-<figure class="w-figure">
-  <img src="temporary-ui_desktop.png" alt="Custom install banner as snackbar.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="Custom install banner as snackbar.", width="800", height="448" %}
+  <figcaption>
     A dismissible snackbar indicating the PWA is installable.
   </figcaption>
 </figure>
 
-Show the snackbar after a few engagements, interactions with your app. If it
+Show the snackbar after a few interactions with your app. If it
 appears on  page load, or out of context, it can be easily missed, or lead
 to cognitive overload. When this happens, users will simply dismiss everything
-they see. And remember, new users to your site may not be ready to install your
+they see. Remember, new users to your site may not be ready to install your
 PWA. Therefore, it's best to wait until you have strong interest signals from
 the user before using this pattern, for example, repeat visits, a user sign
 in, or similar conversion event.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="temporary-ui_mobile.png" alt="Custom install banner as snackbar.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="Custom install banner as snackbar.", width="800", height="424" %}
+  <figcaption>
     A dismissible snackbar indicating the PWA is installable.
   </figcaption>
 </figure>
@@ -267,59 +250,53 @@ Make sure you:
   using this pattern, for example, repeat visits, a user sign in,
   or similar conversion event.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ## After conversion
 
 Immediately after a user conversion event, for example after a purchase on
-an e-commerce site, is an excellent opportunity to promote the installation of
+an e&#8209;commerce site, is an excellent opportunity to promote the installation of
 your PWA. The user is clearly engaged with your content, and a conversion
 often signals that the user will engage with your services again.
 
-<figure class="w-figure">
-  <img src="after-conversion_desktop.png" alt="Screenshot of install promotion after conversion.">
-  <figcaption class="w-figcaption">
-    Install promotion after user has completed purchase.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="An install promotion after conversion.", width="800", height="448" %}
+  <figcaption>
+    An install promotion after a user has completed a purchase.
   </figcaption>
 </figure>
 
 ### Booking or checkout journey {: #journey }
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="after-conversion_mobile.png" alt="Install promotion after a user journey.">
-  <figcaption class="w-figcaption">
-    Install promotion after a user journey.
-  </figcaption>
-</figure>
-
-Show an install promotion during or after a sequential journey such as those typical of
+Show an install promotion during or after a sequential journey such as after
 booking or checkout flows. If you're displaying the promotion after the user
 has completed the journey, you can often make it more prominent since the
 journey is completed.
 
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="An install promotion after a user journey.", width="800", height="1419" %}
+  <figcaption>
+    An install promotion after a user journey.
+  </figcaption>
+</figure>
+
 Make sure you:
 
 * Include a relevant call to action. Which users will benefit from installing
-  your app and why? How is it relevant to the journey they are currently
-  undertaking?
-* If your brand has unique offers for installed app users, be sure to mention
-  them here.
+  your app and why? How is it relevant to the journey they are currently on?
+* If your brand has unique offers for installed app users, mention them.
 * Keep the promotion out of the way of next steps in your journey or you can
-  negatively affect your journey completion rates. In the e-commerce example
+  negatively affect journey completion rates. In the e&#8209;commerce example
   above, notice how the key call to action to checkout is above the
   app install promotion.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ### Sign up, sign in, or sign out flow {: #sign-up}
 
 This promotion is a special case of the [journey](#journey) promotional
 pattern where the promotion card can be more prominent.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="sign-up.png" alt="Custom install button on the sign up page.">
-  <figcaption class="w-figcaption">
-    Custom install button on the sign up page.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="A custom install button on the sign up page.", width="800", height="1117" %}
+  <figcaption>
+    A custom install button on the sign up page.
   </figcaption>
 </figure>
 
@@ -337,12 +314,10 @@ Make sure you:
 * Consider adding an additional install promotion within the signed-in areas
   of your app.
 
-<div class="w-clearfix">&nbsp;</div>
-
 ## Inline promotional patterns
 
 Inline promotional techniques interweave promotions with site content. This
-is often more subtle than promotion in application UI, which has tradeoffs.
+is often more subtle than promotion in the user interface, which has tradeoffs.
 You want your promotion to stand out enough that interested users will notice
 it, but not so much that it detracts from the quality of your user experience.
 
@@ -351,10 +326,10 @@ it, but not so much that it detracts from the quality of your user experience.
 An in-feed install promotion appears between news articles or other lists of
 information cards in your PWA.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="in-feed.png" alt="Install promotion within content feed.">
-  <figcaption class="w-figcaption">
-    Install promotion within content feed.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="An install promotion within a content feed.", width="800", height="1000" %}
+  <figcaption>
+    An install promotion within a content feed.
   </figcaption>
 </figure>
 
diff --git a/src/site/content/en/progressive-web-apps/promote-install/journey.png b/src/site/content/en/progressive-web-apps/promote-install/journey.png
deleted file mode 100644
index 40b22895c75..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/journey.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/landing.png b/src/site/content/en/progressive-web-apps/promote-install/landing.png
deleted file mode 100644
index 6e4044bfa6c..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/landing.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/nav.png b/src/site/content/en/progressive-web-apps/promote-install/nav.png
deleted file mode 100644
index c242bf75f27..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/nav.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/plp.png b/src/site/content/en/progressive-web-apps/promote-install/plp.png
deleted file mode 100644
index 569488cc77b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/plp.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/pwa-omnibox-install.jpg b/src/site/content/en/progressive-web-apps/promote-install/pwa-omnibox-install.jpg
deleted file mode 100644
index a34d7c9a975..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/pwa-omnibox-install.jpg and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/sign-up.png b/src/site/content/en/progressive-web-apps/promote-install/sign-up.png
deleted file mode 100644
index 4c93c2cf78b..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/sign-up.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/simple-button_desktop.png b/src/site/content/en/progressive-web-apps/promote-install/simple-button_desktop.png
deleted file mode 100644
index 4c4b06357b1..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/simple-button_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/simple-button_mobile-crop.png b/src/site/content/en/progressive-web-apps/promote-install/simple-button_mobile-crop.png
deleted file mode 100644
index b501676fe31..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/simple-button_mobile-crop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_desktop.png b/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_desktop.png
deleted file mode 100644
index 7660ff6497a..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_desktop.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_mobile.png b/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_mobile.png
deleted file mode 100644
index bd6e9dbf54a..00000000000
Binary files a/src/site/content/en/progressive-web-apps/promote-install/temporary-ui_mobile.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/pwa-checklist/index.md b/src/site/content/en/progressive-web-apps/pwa-checklist/index.md
index a4e3a768e7d..b1b79486e96 100644
--- a/src/site/content/en/progressive-web-apps/pwa-checklist/index.md
+++ b/src/site/content/en/progressive-web-apps/pwa-checklist/index.md
@@ -5,7 +5,7 @@ authors:
   - samrichard
   - petelepage
 date: 2020-01-06
-updated: 2020-02-24
+updated: 2022-07-18
 description: |
   What makes a good, or great Progressive Web App?
 tags:
@@ -16,7 +16,7 @@ tags:
 <!--lint disable heading-increment-->
 
 Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver
-native-like capabilities, reliability, and installability while reaching
+enhanced capabilities, reliability, and installability while reaching
 _anyone, anywhere, on any device_ with a single codebase. To help you create
 the best possible experience, use the [core](#core) and [optimal](#optimal)
 checklists and recommendations to guide you.
@@ -53,11 +53,11 @@ application to how it actually performs.
 
 While all applications have different needs, the performance audits in
 Lighthouse are based on the
-[RAIL user-centric performance model](https://developers.google.com/web/fundamentals/performance/rail),
+[Core Web Vitals](/vitals/),
 and scoring high on those audits will make it more likely that your users have
 an enjoyable experience. You can also use
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
-or the [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report/)
+[PageSpeed Insights](https://pagespeed.web.dev/)
+or the [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
 to get real-world performance data for your web app.
 
 #### How
@@ -119,7 +119,7 @@ cross-browser, progressive methodology.
   [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
   gives a practical introduction and links to more advanced topics.
 * MDN has an article titled
-  [Implementing feature detection](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+  [Implementing feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
   that talks about how to detect a feature  by directly querying it.
 
 {% endDetails %}
@@ -179,24 +179,23 @@ as they are to mobile.
 Provides a custom offline page
 
 When users are offline, keeping them in your PWA provides a more seamless
-and native-like experience than dropping back to the default browser offline
+experience than dropping back to the default browser offline
 page.
 
 {% endDetailsSummary %}
 
 When users are offline, keeping them in your PWA provides a more seamless
-and native-like experience than dropping back to the default browser offline
+experience than dropping back to the default browser offline
 page.
 
 #### Why
 
 Users expect installed apps to work regardless of their connection status.
-A native app never shows a blank page when it is offline, and a Progressive
+A platform-specific app never shows a blank page when it is offline, and a Progressive
 Web App should never show the browser default offline page. Providing a
 custom offline experience, both when a user navigates to a URL that hasn't
 been cached and when a user tries to use a feature that requires a connection,
-helps to bridge the native-web app gap and makes your experience feel more
-native.
+helps your web experience feel like it's part of the device it's running on.
 
 #### How
 
@@ -232,7 +231,7 @@ appears in the task list, just like other apps.
 Why would you want a user to install your PWA? The same reason you'd want a
 user to install your app from an app store. Users who install your apps
 are your most engaged audience, and have better engagement metrics than
-typical visitors, often at parity with native app users on mobile devices.
+typical visitors, often at parity with app users on mobile devices.
 These metrics include more repeat visits, longer times on your site and
 higher conversion rates.
 
@@ -248,8 +247,8 @@ doing it yourself.
 
 To create a truly great Progressive Web App, one that feels like a
 best-in-class app, you need more than just the core checklist. The optimal
-Progressive Web App checklist is about making your PWA feel native while
-taking advantage of what makes the web powerful.
+Progressive Web App checklist is about making your PWA feel like it's part
+of the device it's running on while taking advantage of what makes the web powerful.
 
 
 {% Details %}
@@ -281,14 +280,14 @@ for users.
 After determining which features your users expect to work offline, you'll
 need to make your content available and adaptable to offline contexts. In
 addition, you can use
-[IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb),
+[IndexedDB](/indexeddb/),
 an in-browser NoSQL storage system, to store and retrieve data, and
-[background sync](https://developers.google.com/web/updates/2015/12/background-sync)
+[background sync](https://developer.chrome.com/blog/background-sync/)
 to allow users to take actions while offline and defer server communications
 until the user has a stable connection again. You can also use service
 workers to store other kinds of content, such as images, video files, and
 audio files for offline use, as well as use them to implement
-[safe, long-lived sessions](https://developers.google.com/web/updates/2016/06/2-cookie-handoff)
+[safe, long-lived sessions](https://developer.chrome.com/blog/2-cookie-handoff/)
 to keep users authenticated. From a user experience perspective, you can use
 [skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)
 that give users a perception of speed and content while loading that can
@@ -322,7 +321,7 @@ making your PWA accessible, you ensure it's usable for everyone.
 
 W3C's [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
 is a good place to start. A majority of accessibility testing
-must be done manually. Tools like the [Accessibility](/lighthouse-accessibility/)
+must be done manually. Tools like the [Accessibility](https://developer.chrome.com/docs/lighthouse/accessibility/)
 audits in Lighthouse, [axe](https://github.com/dequelabs/axe-core), and
 [Accessibility Insights](https://accessibilityinsights.io/) can help you
 automate some accessibility testing. It's also important to use semantically
@@ -362,7 +361,7 @@ client-side rendering.
 Start by ensuring that each URL has a unique, descriptive title and meta
 description. Then you can use the
 [Google Search Console](https://search.google.com/search-console/about)
-and the [Search Engine Optimization audits](/lighthouse-seo/) in Lighthouse to
+and the [Search Engine Optimization audits](https://developer.chrome.com/docs/lighthouse/seo/) in Lighthouse to
 help you debug and fix discoverability issues with your PWA. You can also use
 [Bing](https://www.bing.com/toolbox/webmaster)'s or
 [Yandex](https://webmaster.yandex.com/welcome/)'s webmaster tools, and
@@ -396,7 +395,7 @@ input-specific controls as well (such as pull-to-refresh).
 
 #### How
 
-The [Pointer Events API](https://developers.google.com/web/updates/2016/10/pointer-events)
+The [Pointer Events API](https://developer.chrome.com/blog/pointer-events/)
 provides a unified interface for working with various input options, and is
 especially good for adding stylus support. For supporting both touch and
 keyboard, ensure that you're using the correct semantic elements (anchors,
@@ -432,7 +431,7 @@ in-context rationale to the user for why you need that permission.
 
 #### How
 
-The [Permission UX](https://developers.google.com/web/fundamentals/push-notifications/permission-ux)
+The [Permission UX](/push-notifications-permissions-ux/)
 article and UX Planet's
 [The Right Ways to Ask Users for Permissions](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27)
 are good resources to understand how to design permission prompts that, while
diff --git a/src/site/content/en/progressive-web-apps/pwas-in-app-stores/index.md b/src/site/content/en/progressive-web-apps/pwas-in-app-stores/index.md
new file mode 100644
index 00000000000..1af2407eef1
--- /dev/null
+++ b/src/site/content/en/progressive-web-apps/pwas-in-app-stores/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: PWAs in app stores
+authors:
+  - thomassteiner
+date: 2023-03-31
+updated: 2023-03-31
+description: |
+  Progressive Web Apps can be submitted to app stores like the Android Play Store or the Microsoft Store and more.
+tags:
+  - progressive-web-apps
+---
+
+PWAs can be accessed through a web browser, but they can also be installed on a user's home screen as outlined in the articles in the section [Provide an installable experience](/progressive-web-apps/#provide-an-installable-experience). One of the challenges with PWAs, however, is distributing them to app stores. This is where [PWABuilder](https://pwabuilder.com/) comes in.  
+PWABuilder is a powerful tool that allows developers to create packages that can be submitted to various app stores:
+
+- [Google Play Store](https://play.google.com/store)
+- [Microsoft Store](https://apps.microsoft.com/)
+- [Apple App Store](https://www.apple.com/app-store/)
+- [Meta Quest Store](https://www.oculus.com/experiences/quest/)
+
+One of the major advantages of using PWABuilder to create packages is that it simplifies the process of publishing your web application to app stores. Normally, submitting an app to app stores requires a lot of work, including writing code in languages web developers may not necessarily be familiar with, creating app icons, configuring various settings, and testing the app across different devices and operating systems. PWABuilder takes care of many of these tasks automatically, reducing the amount of time and effort required to publish apps.  
+
+{% Aside %}
+Internally, PWABuilder uses a command line tool called [`bubblewrap`](https://github.com/GoogleChromeLabs/bubblewrap), which you can learn more about in the article [Trusted Web Activities Quick Start Guide](https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/). Rather than use PWABuilder, you can run `bubblewrap` directly if you prefer the command line over graphical user interfaces.
+{% endAside %}
+
+## Prerequisites
+
+If your web app meets a few baseline PWA requirements, you can use PWABuilder to validate, score, and package your application for stores.
+
+- Your PWA needs to be published at a public URL.
+- It must have a complete [web app manifest](https://developer.mozilla.org/docs/Web/Manifest).
+- The app has to be served with HTTPS.
+
+{% Aside 'important' %}
+<p>To publish your package, you will also need a developer account with each platform you want to publish with. For the Microsoft and Google Play stores, these cost a one time fee. For the Apple App Store, an account costs a recurring fee per year. Meta Quest accounts are free.</p>
+<p>By submitting to stores, you need to play by their rules. These rules may require you to use their payment mechanisms and pay a commission for each purchase. They may also restrict certain types of content. Carefully assess these aspects for each store you want to publish to.</p>
+{% endAside %}
+
+## Packaging
+
+You can have an application package for your PWA in a few steps:
+
+- From the homepage of PWABuilder, enter a URL to start the packaging process. PWABuilder will take you to the report card page for your application, where you can view scores and action items for your progressive web app.  
+- To proceed to packaging your app, click the **Package for Stores** button on the top right of the scorecard page.  
+- Browse the options for packaging, and select a platform by clicking **Generate Package**. You will be prompted for metadata related to your application, which will vary depending on platform.
+- Lastly, select **Download Package** to download your package.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/zBI3DyULt7jcI9ynDbbN.png", alt="SVGcode PWA in the PWABuilder user interface.", width="800", height="1136" %}
+
+## Submitting
+
+For guidance on how to publish a PWA to a specific store, be sure to check out the platform-specific articles:
+
+- [Microsoft Store](https://docs.pwabuilder.com/#/builder/windows)
+- [Google Play Store](https://docs.pwabuilder.com/#/builder/android)
+- [Apple App Store](https://docs.pwabuilder.com/#/builder/app-store)
+- [Meta Quest Store](https://docs.pwabuilder.com/#/builder/meta)
+
+## Example 
+
+I have generated store packages for one of my apps, [SVGcode](/svgcode), using PWABuilder.
+
+<p><a href="https://play.google.com/store/apps/details?id=de.svgco.twa"><img width="200px" src="https://raw.githubusercontent.com/tomayac/SVGcode/main/public/badges/play-store.svg" alt="Get it on Google Play."></a></p>
+
+<p><a href="https://www.microsoft.com/en-us/p/svgcode/9plhxdgsw1rj#activetab=pivot:overviewtab"><img width="200px" src="https://raw.githubusercontent.com/tomayac/SVGcode/main/public/badges/microsoft-store.svg" alt="Get it from Microsoft."></a></p>
+
+Apart from these stores, you can of course get the app in the browser as well.
+
+<p><a href="https://svgco.de/"><img width="200px" src="https://raw.githubusercontent.com/tomayac/SVGcode/main/public/badges/web-browser.svg" alt="Use it in your web browser."></a></p>
diff --git a/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
index ab5adc4c7c2..1432c4e4a60 100644
--- a/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
+++ b/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -4,7 +4,7 @@ title: Using a PWA in your Android app
 authors:
   - andreban
 date: 2020-03-19
-updated: 2020-04-30
+updated: 2021-12-06
 description: |
   How to open a Progressive Web App in an Android app.
 tags:
@@ -14,7 +14,7 @@ tags:
 ## Start a PWA in an Android app
 
 [Progressive Web Apps][1] (PWA) are web applications that use app-like features to create
-high quality experiences that are fast, reliable and engaging.
+high quality experiences that are fast, reliable, and engaging.
 
 The web has incredible reach and offers powerful ways for users to discover new experiences. But
 users are also used to searching for applications in their operating system store. Those users are,
@@ -26,7 +26,7 @@ Apps from their Android apps.
 
 Trusted Web Activity is an open standard that allows browsers to provide a fully web platform
 compatible container that renders PWAs inside an Android app. The feature
-is available in [Chrome][2], and in development in [Firefox Preview Nightly][3].
+is available in [Chrome][2], and in development in [Firefox Nightly][3].
 
 ### Existing solutions were limited
 
@@ -66,8 +66,23 @@ nightly version.
 ### Quality Criteria
 
 Web developers should use a Trusted Web Activity when they want to include web content in an
-Android app. Web content in a Trusted Web Activity must meet Lighthouse's PWA install quality
-criteria and additional Android-specific criteria such as [policy compliance][9].
+Android app.
+
+Web content in a Trusted Web Activity must meet the PWA installability criteria.
+
+Additionally, to match the behavior users expect from Android applications,
+[Chrome 86 introduced a change][18] where failing to handle the following scenarios is considered a
+crash:
+
+  - Failure to verify digital asset links at application launch.
+  - Failure to return HTTP 200 for an offline network resource request.
+  - A navigation request returning an HTTP 404 or 5xx error".
+
+When one of those scenarios happens in the Trusted Web Activity, it causes a user visible
+crash of the Android application. Check out the [guidance][19] on handling those scenarios in your
+service worker.
+
+The application must also meet additional Android-specific criteria such as [policy compliance][9].
 
 {% Aside 'caution' %}
   When your app is designed primarily for children under 13, additional
@@ -75,11 +90,10 @@ criteria and additional Android-specific criteria such as [policy compliance][9]
   with using Trusted Web Activity.
 {% endAside %}
 
-<figure class="w-figure w-figure--center">
-  <img src="lh-score.png" style="max-width: 100%;"
-    alt="A screenshot showing the Lighthouse score for AirHorn, with the PWA badge and a performance score of 100."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    The PWA badge and a minimum Lighthouse score of 80 are required.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="A screenshot showing the Lighthouse score for AirHorn, with the PWA badge and a performance score of 100.", width="800", height="141" %}
+  <figcaption>
+    The PWA badge in Lighthouse shows if your PWA passes the installability criteria.
   </figcaption>
 </figure>
 
@@ -157,11 +171,11 @@ Finally, move your application from the closed test channel to production!
 
 [1]: /progressive-web-apps/
 [2]: https://play.google.com/store/apps/details?id=com.android.chrome
-[3]: https://play.google.com/store/apps/details?id=org.mozilla.fenix.nightly
+[3]: https://play.google.com/store/apps/details?id=org.mozilla.fenix
 [4]: https://developer.android.com/reference/android/webkit/WebView
 [5]: https://cordova.apache.org/
 [6]: /contact-picker/
-[7]: /native-file-system/
+[7]: /file-system-access/
 [8]: https://developers.google.com/web/updates/2019/02/using-twa
 [9]: https://play.google.com/about/developer-content-policy/
 [10]: https://github.com/GoogleChromeLabs/bubblewrap
@@ -170,5 +184,7 @@ Finally, move your application from the closed test channel to production!
 [13]: https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/
 [14]: https://developers.google.com/digital-asset-links/v1/getting-started
 [15]: https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool
-[16]: https://developers.google.com/web/tools/lighthouse
+[16]: https://developer.chrome.com/docs/lighthouse/overview/
 [17]: /fugu-status/
+[18]: https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html
+[19]: https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria
diff --git a/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/lh-score.png b/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/lh-score.png
deleted file mode 100644
index 32c5b588406..00000000000
Binary files a/src/site/content/en/progressive-web-apps/using-a-pwa-in-your-android-app/lh-score.png and /dev/null differ
diff --git a/src/site/content/en/progressive-web-apps/what-are-pwas/capabilities-reach.svg b/src/site/content/en/progressive-web-apps/what-are-pwas/capabilities-reach.svg
deleted file mode 100644
index 54163a26401..00000000000
--- a/src/site/content/en/progressive-web-apps/what-are-pwas/capabilities-reach.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 370 367" style="enable-background:new 0 0 370 367;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#9AA0A6;stroke-width:3;stroke-miterlimit:10;}
-	.st1{fill:#9AA0A6;}
-	.st2{font-family:'Roboto-Medium';}
-	.st3{font-size:24px;}
-	.st4{fill:none;stroke:#FBBC04;stroke-width:12;stroke-miterlimit:10;}
-	.st5{fill:#FBBC04;}
-	.st6{fill:#34A853;}
-	.st7{fill:none;stroke:#34A853;stroke-width:12;stroke-miterlimit:10;}
-	.st8{fill:none;stroke:#4285F4;stroke-width:12;stroke-miterlimit:10;}
-	.st9{fill:#4285F4;}
-</style>
-<path class="st0" d="M35.7,335.3V9"/>
-<path class="st1" d="M41.7,10.7l-6-10.4l-6,10.4C29.7,10.7,41.7,10.7,41.7,10.7z"/>
-<path class="st0" d="M35.2,335.3h326.4"/>
-<path class="st1" d="M359.8,341.3l10.4-6l-10.4-6V341.3z"/>
-<circle class="st1" cx="35.2" cy="334.8" r="4.5"/>
-<text transform="matrix(1 0 0 1 166.9633 367.2246)" class="st1 st2 st3">Reach</text>
-<text transform="matrix(6.123234e-17 -1 1 6.123234e-17 17.6633 233.1846)" class="st1 st2 st3">Capabilities</text>
-<g>
-	<circle class="st4" cx="108.4" cy="79.3" r="49"/>
-	<path class="st5" d="M82.3,65.5h13.3V52.2H82.3V65.5z M102.3,105.5h13.3V92.2h-13.3V105.5z M82.3,105.5h13.3V92.2H82.3V105.5z
-		 M82.3,85.5h13.3V72.2H82.3V85.5z M102.3,85.5h13.3V72.2h-13.3V85.5z M122.3,52.1v13.3h13.3V52.2L122.3,52.1z M102.3,65.5h13.3
-		V52.2h-13.3V65.5z M122.3,85.5h13.3V72.2h-13.3L122.3,85.5z M122.3,105.5h13.3V92.2h-13.3L122.3,105.5z"/>
-</g>
-<g>
-	<path d="M308,87.4l1.9-4.9h5.6l-2.6-7.4l3.3-8.3l9.5,25.1h-7l-1.6-4.5L308,87.4z"/>
-	<path class="st6" d="M302,91.9l10.1-25.1h-6.7L298.5,83l-4.9-16.2h-5.2L283.2,83l-3.7-7.4L276.1,86l3.4,5.9h6.6l4.8-14.5l4.5,14.6
-		L302,91.9z"/>
-	<path d="M265.3,83.3h4.1c1.1,0,2.3-0.1,3.4-0.4l1.1-3.3l3-9.2c-0.2-0.4-0.5-0.7-0.8-1c-1.5-1.7-3.8-2.5-6.7-2.5h-10.4v25.1h6.4
-		L265.3,83.3z M270.8,72.6c0.6,0.6,0.9,1.5,0.9,2.4c0,0.9-0.2,1.7-0.8,2.4c-0.9,0.8-2,1.1-3.2,1h-2.4v-6.8h2.4
-		C268.8,71.6,269.9,71.9,270.8,72.6L270.8,72.6z"/>
-	<circle class="st7" cx="292.3" cy="79.3" r="49"/>
-</g>
-<g>
-	<path d="M60.8,144.2h1.9l6.5,10.3h0.1l-0.1-2.5v-7.8h1.5v12.9h-1.6l-6.8-10.7h-0.1l0.1,2.5v8.3h-1.5V144.2z"/>
-	<path d="M74.1,157c-0.5-0.3-0.9-0.6-1.2-1.1s-0.4-1-0.4-1.6c0-1,0.4-1.7,1.1-2.3s1.7-0.8,2.8-0.8c0.6,0,1.1,0.1,1.5,0.2
-		c0.5,0.1,0.8,0.3,1.1,0.4v-0.6c0-0.7-0.2-1.2-0.7-1.6c-0.5-0.4-1.1-0.6-1.8-0.6c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.8,0.5-1,0.9
-		l-1.2-0.9c0.4-0.6,0.9-1,1.5-1.3s1.3-0.5,2.1-0.5c1.2,0,2.2,0.3,2.9,1c0.7,0.7,1.1,1.5,1.1,2.7v5.8h-1.5v-1.3h-0.1
-		c-0.3,0.4-0.7,0.8-1.2,1.1c-0.5,0.3-1.1,0.5-1.8,0.5C75.2,157.4,74.6,157.3,74.1,157z M77.5,155.7c0.4-0.3,0.8-0.6,1.1-1.1
-		c0.3-0.4,0.4-0.9,0.4-1.5c-0.3-0.2-0.6-0.3-1.1-0.5s-0.9-0.2-1.3-0.2c-0.8,0-1.5,0.2-1.9,0.5s-0.6,0.8-0.6,1.4
-		c0,0.5,0.2,0.9,0.6,1.2c0.4,0.3,0.9,0.5,1.5,0.5C76.6,156.1,77,155.9,77.5,155.7z"/>
-	<path d="M84.8,157.2c-0.3-0.1-0.6-0.3-0.8-0.5c-0.2-0.2-0.4-0.5-0.5-0.8c-0.1-0.3-0.2-0.7-0.2-1.1v-5.5h-1.6V148h1.6v-2.6h1.5v2.6
-		h2.2v1.4h-2.2v5.1c0,0.5,0.1,0.9,0.3,1.1c0.2,0.3,0.6,0.4,1,0.4c0.3,0,0.7-0.1,1-0.3v1.5c-0.2,0.1-0.4,0.1-0.5,0.2
-		c-0.2,0-0.4,0.1-0.7,0.1C85.5,157.4,85.2,157.4,84.8,157.2z"/>
-	<path d="M89.1,146c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3
-		c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3C89.6,146.3,89.4,146.2,89.1,146z M89.2,148h1.5v9.2h-1.5
-		V148z"/>
-	<path d="M92.1,148h1.6l2.8,7.4h0l2.9-7.4h1.6l-3.7,9.2h-1.5L92.1,148z"/>
-	<path d="M103.8,156.8c-0.7-0.4-1.2-1-1.6-1.7c-0.4-0.7-0.6-1.6-0.6-2.5c0-0.9,0.2-1.7,0.5-2.4c0.4-0.7,0.9-1.3,1.6-1.8
-		s1.5-0.7,2.3-0.7c0.9,0,1.7,0.2,2.3,0.6c0.7,0.4,1.2,1,1.5,1.7c0.4,0.7,0.5,1.5,0.5,2.4c0,0.2,0,0.3-0.1,0.5h-7.3
-		c0,0.7,0.2,1.3,0.5,1.8c0.3,0.5,0.7,0.8,1.1,1.1c0.5,0.2,0.9,0.4,1.4,0.4c1.2,0,2.1-0.6,2.7-1.7l1.3,0.6c-0.4,0.7-0.9,1.3-1.6,1.8
-		c-0.7,0.4-1.5,0.6-2.5,0.6C105.3,157.4,104.5,157.2,103.8,156.8z M108.8,151.6c0-0.4-0.1-0.8-0.3-1.2s-0.5-0.7-0.9-1
-		c-0.4-0.3-0.9-0.4-1.6-0.4c-0.7,0-1.3,0.2-1.8,0.7c-0.5,0.5-0.8,1.1-1,1.8H108.8z"/>
-	<path d="M119.9,144.2h1.7l4.9,12.9h-1.7l-1.3-3.5h-5.6l-1.3,3.5H115L119.9,144.2z M123,152.2l-1.7-4.6l-0.5-1.4h-0.1l-0.5,1.4
-		l-1.7,4.6H123z"/>
-	<path d="M127.9,148h1.5v1.4h0.1c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.5,1.9-0.5c0.8,0,1.6,0.2,2.2,0.6c0.7,0.4,1.2,1,1.6,1.7
-		c0.4,0.7,0.6,1.6,0.6,2.5c0,0.9-0.2,1.8-0.6,2.5c-0.4,0.7-0.9,1.3-1.6,1.7c-0.7,0.4-1.4,0.6-2.2,0.6c-0.7,0-1.3-0.2-1.9-0.5
-		c-0.6-0.3-1-0.7-1.3-1.2h-0.1l0.1,1.3v4h-1.5V148z M133.9,155.6c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8s-0.1-1.3-0.4-1.8
-		c-0.3-0.5-0.7-0.9-1.1-1.2c-0.5-0.3-1-0.4-1.5-0.4c-0.5,0-1,0.1-1.5,0.4c-0.5,0.3-0.8,0.7-1.1,1.2c-0.3,0.5-0.4,1.1-0.4,1.8
-		s0.1,1.3,0.4,1.8c0.3,0.5,0.6,0.9,1.1,1.2c0.5,0.3,1,0.4,1.5,0.4C132.9,156,133.4,155.9,133.9,155.6z"/>
-	<path d="M138.5,148h1.5v1.4h0.1c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.5,1.9-0.5c0.8,0,1.6,0.2,2.2,0.6c0.7,0.4,1.2,1,1.6,1.7
-		c0.4,0.7,0.6,1.6,0.6,2.5c0,0.9-0.2,1.8-0.6,2.5c-0.4,0.7-0.9,1.3-1.6,1.7c-0.7,0.4-1.4,0.6-2.2,0.6c-0.7,0-1.3-0.2-1.9-0.5
-		c-0.6-0.3-1-0.7-1.3-1.2h-0.1l0.1,1.3v4h-1.5V148z M144.5,155.6c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8s-0.1-1.3-0.4-1.8
-		c-0.3-0.5-0.7-0.9-1.1-1.2c-0.5-0.3-1-0.4-1.5-0.4c-0.5,0-1,0.1-1.5,0.4c-0.5,0.3-0.8,0.7-1.1,1.2c-0.3,0.5-0.4,1.1-0.4,1.8
-		s0.1,1.3,0.4,1.8c0.3,0.5,0.6,0.9,1.1,1.2c0.5,0.3,1,0.4,1.5,0.4C143.5,156,144,155.9,144.5,155.6z"/>
-	<path d="M150,156.7c-0.7-0.5-1.1-1.1-1.4-1.8l1.4-0.6c0.2,0.6,0.6,1,1,1.3c0.5,0.3,0.9,0.5,1.5,0.5c0.6,0,1.1-0.1,1.5-0.4
-		c0.4-0.2,0.6-0.6,0.6-1c0-0.4-0.2-0.7-0.5-0.9c-0.3-0.2-0.8-0.4-1.5-0.6l-1.1-0.3c-0.7-0.2-1.3-0.5-1.8-0.9c-0.5-0.4-0.7-1-0.7-1.7
-		c0-0.5,0.2-1,0.5-1.4c0.3-0.4,0.7-0.7,1.3-0.9c0.5-0.2,1.1-0.3,1.7-0.3c0.8,0,1.5,0.2,2.2,0.5s1.1,0.8,1.3,1.5l-1.3,0.6
-		c-0.4-0.8-1.1-1.2-2.2-1.2c-0.5,0-0.9,0.1-1.3,0.4c-0.4,0.2-0.6,0.5-0.6,0.9c0,0.3,0.1,0.6,0.4,0.8s0.7,0.4,1.2,0.5l1.3,0.3
-		c0.9,0.2,1.6,0.6,2,1s0.7,1,0.7,1.6c0,0.6-0.2,1.1-0.5,1.5c-0.3,0.4-0.8,0.8-1.3,1c-0.6,0.2-1.2,0.3-1.8,0.3
-		C151.5,157.4,150.6,157.2,150,156.7z"/>
-</g>
-<g>
-	<g>
-		<circle class="st8" cx="292.3" cy="242.3" r="49"/>
-		<path class="st9" d="M292.2,209c-18.4,0-33.3,15-33.3,33.4c0,18.4,15,33.3,33.4,33.3c18.4,0,33.3-14.9,33.3-33.3
-			C325.6,223.9,310.7,209,292.2,209C292.3,209,292.2,209,292.2,209z M315.3,229h-9.8c-1-4.1-2.6-8.1-4.6-11.9
-			C307,219.2,312.1,223.4,315.3,229z M292.3,215.8c2.8,4,4.9,8.5,6.4,13.2h-12.7C287.3,224.3,289.5,219.8,292.3,215.8L292.3,215.8z
-			 M266.5,249c-1.2-4.4-1.2-9,0-13.3h11.3c-0.6,4.4-0.6,8.9,0,13.3H266.5z M269.2,255.6h9.8c1,4.1,2.6,8.1,4.6,11.9
-			C277.5,265.4,272.4,261.2,269.2,255.6L269.2,255.6z M279,229h-9.8c3.2-5.6,8.3-9.8,14.4-11.9C281.6,220.9,280.1,224.8,279,229z
-			 M292.3,268.8c-2.8-4-4.9-8.5-6.4-13.2h12.7C297.2,260.4,295.1,264.8,292.3,268.8L292.3,268.8z M300.1,249h-15.6
-			c-0.7-4.4-0.7-8.9,0-13.3h15.6C300.8,240.1,300.8,244.6,300.1,249z M300.9,267.5c2-3.8,3.6-7.7,4.6-11.9h9.8
-			C312.1,261.2,307,265.4,300.9,267.5L300.9,267.5z M306.8,249c0.6-4.4,0.6-8.9,0-13.3h11.3c1.1,4.4,1.1,9,0,13.3H306.8z"/>
-	</g>
-	<g>
-		<path d="M251.5,307h1.7l2.3,9.5l0.2,0.9h0.1l0.3-0.9l2.9-9.5h1.6l2.8,9.5l0.3,0.9h0.1l2.5-10.3h1.7l-3.5,12.9h-1.6l-2.7-9.3
-			l-0.3-1h-0.1l-0.3,1l-2.8,9.3h-1.6L251.5,307z"/>
-		<path d="M270,319.5c-0.7-0.4-1.2-1-1.6-1.7c-0.4-0.7-0.6-1.6-0.6-2.5c0-0.9,0.2-1.7,0.5-2.4c0.4-0.7,0.9-1.3,1.6-1.8
-			s1.5-0.7,2.3-0.7c0.9,0,1.7,0.2,2.3,0.6c0.7,0.4,1.2,1,1.5,1.7c0.4,0.7,0.5,1.5,0.5,2.4c0,0.2,0,0.3-0.1,0.5h-7.3
-			c0,0.7,0.2,1.3,0.5,1.8c0.3,0.5,0.7,0.8,1.1,1.1s0.9,0.4,1.4,0.4c1.2,0,2.1-0.6,2.7-1.7l1.3,0.6c-0.4,0.7-0.9,1.3-1.6,1.8
-			c-0.7,0.4-1.5,0.6-2.5,0.6C271.5,320.1,270.7,319.9,270,319.5z M275,314.3c0-0.4-0.1-0.8-0.3-1.2c-0.2-0.4-0.5-0.7-0.9-1
-			c-0.4-0.3-0.9-0.4-1.6-0.4c-0.7,0-1.3,0.2-1.8,0.7s-0.8,1.1-1,1.8H275z"/>
-		<path d="M281.2,319.7c-0.6-0.3-1-0.7-1.3-1.2h-0.1v1.3h-1.5V307h1.5v3.8l-0.1,1.3h0.1c0.3-0.5,0.7-0.9,1.3-1.2
-			c0.6-0.3,1.2-0.5,1.9-0.5c0.8,0,1.6,0.2,2.2,0.6c0.7,0.4,1.2,1,1.6,1.7c0.4,0.7,0.6,1.6,0.6,2.5c0,0.9-0.2,1.8-0.6,2.5
-			c-0.4,0.7-0.9,1.3-1.6,1.7c-0.7,0.4-1.4,0.6-2.2,0.6C282.3,320.1,281.7,320,281.2,319.7z M284.4,318.3c0.5-0.3,0.8-0.7,1.1-1.2
-			c0.3-0.5,0.4-1.1,0.4-1.8c0-0.7-0.1-1.3-0.4-1.8c-0.3-0.5-0.7-0.9-1.1-1.2c-0.5-0.3-1-0.4-1.5-0.4c-0.5,0-1,0.1-1.5,0.4
-			s-0.8,0.7-1.1,1.2s-0.4,1.1-0.4,1.8s0.1,1.3,0.4,1.8s0.6,0.9,1.1,1.2s1,0.4,1.5,0.4C283.4,318.7,283.9,318.6,284.4,318.3z"/>
-		<path d="M296.9,307h1.7l4.9,12.9h-1.7l-1.3-3.5H295l-1.3,3.5H292L296.9,307z M300,314.9l-1.7-4.6l-0.5-1.4h-0.1l-0.5,1.4l-1.7,4.6
-			H300z"/>
-		<path d="M304.9,310.7h1.5v1.4h0.1c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.5,1.9-0.5c0.8,0,1.6,0.2,2.2,0.6s1.2,1,1.6,1.7
-			s0.6,1.6,0.6,2.5c0,0.9-0.2,1.8-0.6,2.5s-0.9,1.3-1.6,1.7s-1.4,0.6-2.2,0.6c-0.7,0-1.3-0.2-1.9-0.5c-0.6-0.3-1-0.7-1.3-1.2h-0.1
-			l0.1,1.3v4h-1.5V310.7z M310.9,318.3c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8c0-0.7-0.1-1.3-0.4-1.8
-			c-0.3-0.5-0.7-0.9-1.1-1.2s-1-0.4-1.5-0.4s-1,0.1-1.5,0.4s-0.8,0.7-1.1,1.2c-0.3,0.5-0.4,1.1-0.4,1.8s0.1,1.3,0.4,1.8
-			c0.3,0.5,0.6,0.9,1.1,1.2s1,0.4,1.5,0.4S310.4,318.6,310.9,318.3z"/>
-		<path d="M315.5,310.7h1.5v1.4h0.1c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.5,1.9-0.5c0.8,0,1.6,0.2,2.2,0.6s1.2,1,1.6,1.7
-			s0.6,1.6,0.6,2.5c0,0.9-0.2,1.8-0.6,2.5s-0.9,1.3-1.6,1.7s-1.4,0.6-2.2,0.6c-0.7,0-1.3-0.2-1.9-0.5c-0.6-0.3-1-0.7-1.3-1.2H317
-			l0.1,1.3v4h-1.5V310.7z M321.5,318.3c0.5-0.3,0.8-0.7,1.1-1.2c0.3-0.5,0.4-1.1,0.4-1.8c0-0.7-0.1-1.3-0.4-1.8
-			c-0.3-0.5-0.7-0.9-1.1-1.2s-1-0.4-1.5-0.4s-1,0.1-1.5,0.4s-0.8,0.7-1.1,1.2c-0.3,0.5-0.4,1.1-0.4,1.8s0.1,1.3,0.4,1.8
-			c0.3,0.5,0.6,0.9,1.1,1.2s1,0.4,1.5,0.4S321,318.6,321.5,318.3z"/>
-		<path d="M327,319.4c-0.7-0.5-1.1-1.1-1.4-1.8l1.4-0.6c0.2,0.6,0.6,1,1,1.3c0.5,0.3,0.9,0.5,1.5,0.5c0.6,0,1.1-0.1,1.5-0.4
-			c0.4-0.2,0.6-0.6,0.6-1c0-0.4-0.2-0.7-0.5-0.9c-0.3-0.2-0.8-0.4-1.5-0.6l-1.1-0.3c-0.7-0.2-1.3-0.5-1.8-0.9
-			c-0.5-0.4-0.7-1-0.7-1.7c0-0.5,0.2-1,0.5-1.4c0.3-0.4,0.7-0.7,1.3-0.9c0.5-0.2,1.1-0.3,1.7-0.3c0.8,0,1.5,0.2,2.2,0.5
-			c0.6,0.3,1.1,0.8,1.3,1.5l-1.3,0.6c-0.4-0.8-1.1-1.2-2.2-1.2c-0.5,0-0.9,0.1-1.3,0.4s-0.6,0.5-0.6,0.9c0,0.3,0.1,0.6,0.4,0.8
-			c0.3,0.2,0.7,0.4,1.2,0.5l1.3,0.3c0.9,0.2,1.6,0.6,2,1s0.7,1,0.7,1.6c0,0.6-0.2,1.1-0.5,1.5c-0.3,0.4-0.8,0.8-1.3,1
-			c-0.6,0.2-1.2,0.3-1.8,0.3C328.5,320.1,327.6,319.9,327,319.4z"/>
-	</g>
-</g>
-</svg>
diff --git a/src/site/content/en/progressive-web-apps/what-are-pwas/index.md b/src/site/content/en/progressive-web-apps/what-are-pwas/index.md
index 2863a85ff61..9deaaf16459 100644
--- a/src/site/content/en/progressive-web-apps/what-are-pwas/index.md
+++ b/src/site/content/en/progressive-web-apps/what-are-pwas/index.md
@@ -5,7 +5,7 @@ authors:
   - samrichard
   - petelepage
 date: 2020-01-06
-updated: 2020-02-24
+updated: 2020-06-09
 description: |
   An introduction to Progressive Web Apps (PWAs) and the three pillars that
   separate them from other web apps.
@@ -15,63 +15,62 @@ tags:
 
 The web is an incredible platform. Its mix of ubiquity across devices and
 operating systems, its user-centered security model, and the fact that neither
-its specification nor its implementation is controlled by a single company makes
+its specification nor its implementation are controlled by a single company makes
 the web a unique platform to develop software on. Combined with its inherent
 linkability, it's possible to search it and share what you've found with
 anyone, anywhere. Whenever you go to a website, it's up-to-date, and your
 experience with that site can be as ephemeral or as permanent as you'd like. Web
 applications can reach _anyone, anywhere, on any device_ with a single codebase.
 
-Native applications, are known for being incredibly rich and reliable. They're
+Platform-specific applications are known for being incredibly rich and reliable. They're
 ever-present, on home screens, docks, and taskbars. They work regardless of
 network connection. They launch in their own standalone experience. They can
 read and write files from the local file system, access hardware connected via
-USB, serial or bluetooth, and even interact with data stored on your device,
-like contacts and calendar events. In native applications, you can do things
-like take pictures, see playing songs listed on the home screen, or control song
-playback while in another app. Native applications feel like _part_ of the
+USB, serial port, or bluetooth, and even interact with data stored on your device,
+such as contacts and calendar events. In these applications, you can do things
+such as take pictures, see playing songs listed on the home screen, or control song
+playback while in another app. Platform-specific applications feel like _part_ of the
 device they run on.
 
-<figure class="w-figure">
-  <img src="./capabilities-reach.svg" style="max-width: 100%;"
-    alt="A graph illustrating the relative capabilites and reach of native apps, with high capabilities, web apps, with high reach, and progressive web apps, which have both high capabilities and high reach."/>
-  <figcaption class="w-figcaption w-figcaption--fullbleed">
-    Capabilities vs. reach of native apps, web app, and progressive web apps.
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="A graph illustrating the relative capabilites and reach of platform-specific apps, with high capabilities, web apps, with high reach, and progressive web apps, which have both high capabilities and high reach.", width="370", height="367" %}
+  <figcaption>
+    Capabilities vs. reach of platform-specific apps, web apps, and progressive web apps.
   </figcaption>
 </figure>
 
-If you think about native apps and web apps in terms of capabilities and reach,
-native apps represent the best of capabilities whereas web apps represent the
+If you think about platform-specific apps and web apps in terms of capabilities and reach,
+platform-specific apps represent the best of capabilities whereas web apps represent the
 best of reach. So where do Progressive Web Apps fit in?
 
 Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver
-native-like capabilities, reliability, and installability while reaching
+enhanced capabilities, reliability, and installability while reaching
 _anyone, anywhere, on any device_ with a single codebase.
 
 ## The three app pillars
 
-Progressive Web Apps are web applications that have been designed so they are
+Progressive Web Apps are web applications that have been designed to be
 capable, reliable, and installable. These three pillars transform them into an
-experience that feels like a native application.
+experience that feels like a platform-specific application.
 
 ### Capable
 
 The web is quite capable in its own right today. For example, you can build a hyper-local
 video chat app using WebRTC, geolocation, and push notifications. You can make
-that app installable and take those conversations virtual with WebGL and WebVR.
-With the introduction of Web Assembly, developers can tap into other ecosystems,
-like C, C++, and Rust, and bring decades of work and capabilities to the web
-too. [Squoosh.app](https://squoosh.app/), for instance, leverages this for its
+that app installable and take its conversations virtual with WebGL and WebVR.
+With the introduction of WebAssembly, developers can tap into other ecosystems,
+such as C, C++, and Rust, and bring decades of work and capabilities to the web.
+[Squoosh.app](https://squoosh.app/), for instance, uses this for its
 advanced image compression.
 
-Until recently, only native apps could really lay claim to these capabilities.
+Until recently, only platform-specific apps could really lay claim to these capabilities.
 While some capabilities are still out of the web's reach, new and upcoming APIs
 are looking to change that, expanding what the web can do with features like
 file system access, media controls, app badging, and full clipboard support. All
 of these capabilities are built with the web's secure, user-centric permission
-model, ensuring that going to a website is never a scary proposition for users.
+model, ensuring that going to a website is never scary for users.
 
-Between modern APIs, Web Assembly, and new and upcoming APIs, web applications
+Between modern APIs, WebAssembly, and new and upcoming APIs, web applications
 are more capable than ever, and those capabilities are only growing.
 
 ### Reliable
@@ -84,17 +83,17 @@ load times go from 1 second to ten seconds, the probability of a user bouncing
 [increases by 123%](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/).
 Performance doesn't stop after the `onload` event. Users should never wonder whether their
 interaction—for example, clicking a button—was registered or not. Scrolling and
-animation should feel smooth. Performance affects your entire experience, from
-how users perceive your application to how it actually performs.
+animation should feel smooth. Performance affects the entire user experience, from
+how they perceive your application to how it actually performs.
 
 Finally, reliable applications need to be usable regardless of network
 connection. Users expect apps to start up on slow or flaky network connections
 or even when offline. They expect the most recent content they've interacted
-with, like media tracks or tickets and itineraries, to be available and usable
+with, such as media tracks or tickets and itineraries, to be available and usable
 even if getting a request to your server is hard. When a request isn't possible,
 they expect to be told there's trouble instead of silently failing or crashing.
 
-Users love apps that respond to interaction in the blink of an eye, and an
+Users deserve apps that respond to interaction in the blink of an eye, and an
 experience they can depend on.
 
 ### Installable
@@ -104,7 +103,7 @@ tab. They're launchable from on the user's home screen, dock, taskbar, or shelf.
 It's possible to search for them on a device and jump between them with the app
 switcher, making them feel like part of the device they're installed on.
 
-New capabilities open up after a web app is installed. Keyboard shortcuts usually
+New capabilities open up after a web app is installed. Keyboard shortcuts, usually
 reserved when running in the browser, become available. Progressive Web
 Apps can register to accept content from other applications, or to be the
 default application to handle different types of files.
@@ -124,11 +123,17 @@ seen impressive results. For example, Twitter saw a 65% increase in pages per
 session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing
 the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3
 times more organic traffic, 58% more subscriptions, and 49% more daily active
-users. Hulu replaced their native desktop experience with a Progressive Web App
+users. Hulu replaced their platform-specific desktop experience with a Progressive Web App
 and saw a 27% increase in return visits.
 
 Progressive Web Apps provide you with a unique opportunity to deliver a web
 experience your users will love. Using the latest web features to bring
-native-like capabilities and reliability, Progressive Web Apps allow what you
+enhanced capabilities and reliability, Progressive Web Apps allow what you
 build to be installed by _anyone, anywhere, on any device_ with a single
 codebase.
+
+<!--lint disable no-unescaped-template-tags-->
+{% from 'macros/prerender.njk' import prerender with context %}
+{# Prerender /progressive-web-apps/ as a test of prerendering #}
+{{ prerender('/progressive-web-apps/') }}
+<!--lint enable no-unescaped-template-tags-->
diff --git a/src/site/content/en/react/accessibility-auditing-react/hero-accessibility-auditing-react.jpg b/src/site/content/en/react/accessibility-auditing-react/hero-accessibility-auditing-react.jpg
deleted file mode 100644
index accfc4cd806..00000000000
Binary files a/src/site/content/en/react/accessibility-auditing-react/hero-accessibility-auditing-react.jpg and /dev/null differ
diff --git a/src/site/content/en/react/accessibility-auditing-react/img-a11y-lint.png b/src/site/content/en/react/accessibility-auditing-react/img-a11y-lint.png
deleted file mode 100644
index 4019ecb64ec..00000000000
Binary files a/src/site/content/en/react/accessibility-auditing-react/img-a11y-lint.png and /dev/null differ
diff --git a/src/site/content/en/react/accessibility-auditing-react/index.md b/src/site/content/en/react/accessibility-auditing-react/index.md
index c98fb6c5bd8..0048ada4eee 100644
--- a/src/site/content/en/react/accessibility-auditing-react/index.md
+++ b/src/site/content/en/react/accessibility-auditing-react/index.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility auditing with react-axe and eslint-plugin-jsx-a11y
-hero: hero-accessibility-auditing-react.jpg
+hero: image/admin/CYDdWUK4iah3Xe8yEfoR.jpg
 subhead: |
   Your React site is not progressive if it's not accessible. Auditing during development can help you spot any issues.
 date: 2019-04-29
@@ -36,10 +36,10 @@ concerns on your site.
 
 ## Why is this useful?
 
-It is crucial to build web sites that provide every user, regardless of their
+It is crucial to build websites that provide every user, regardless of their
 impairment or restriction, the capability to access its content. Using auditing
 libraries such as `react-axe` and `eslint-plugin-jsx-a11y` during the
-development of your React application will automatically surface any
+development of your React application will automatically expose any
 accessibility issues as they pop up.
 
 ## Use eslint-plugin-jsx-a11y
@@ -79,7 +79,7 @@ To enable pre-configured linting provided by CRA:
 
 Some common accessibility issues will now show up.
 
-![Image accessibility warning in linter](./img-a11y-lint.png)
+{% Img src="image/admin/n8Da1iOU3XCpu7avccaS.png", alt="Image accessibility warning in linter", width="800", height="500" %}
 
 To check for even more accessibility rules, modify the file to automatically
 include all the recommended rules by the plugin:
@@ -98,7 +98,7 @@ If you would like an even stricter subset of rules, switch to strict mode:
 }
 ```
 
-![Label accessibility error in linter](./label-a11y-lint.png)
+{% Img src="image/admin/LVsEpuH55MeHaY7RIpl3.png", alt="Label accessibility error in linter", width="800", height="500" %}
 
 The project
 [documentation](https://github.com/evcohen/eslint-plugin-jsx-a11y#difference-between-recommended-and-strict-mode)
@@ -131,15 +131,15 @@ if (process.env.NODE_ENV !== 'production') {
 ```
 
 A
-[dynamic import](https://developers.google.com/web/updates/2017/11/dynamic-import)
+[dynamic import](https://v8.dev/features/dynamic-import)
 is used here to only load the library when it is not in production mode before
 rendering and booting up the root `App` component. This ensures that it is not
-unecessarily included in the final production bundle.
+unnecessarily included in the final production bundle.
 
 Now when you run the application during development, issues are surfaced
 directly to the Chrome DevTools console.
 
-<img class="w-screenshot w-screenshot--filled" src="./react-axe-devtools.png" alt="React Axe in Chrome DevTools">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7kiPTpXD47VBf83n6mqz.png", alt="React Axe in Chrome DevTools", width="800", height="430" %}
 
 A severity level is also assigned for each violation. These levels are:
 
@@ -164,4 +164,4 @@ A severity level is also assigned for each violation. These levels are:
    recommended or strict mode.
 3. In addition to local development testing, include `react-axe` into your
    application to catch any issues on the final rendered DOM. Do not include it
-   into your production bundle.
\ No newline at end of file
+   into your production bundle.
diff --git a/src/site/content/en/react/accessibility-auditing-react/label-a11y-lint.png b/src/site/content/en/react/accessibility-auditing-react/label-a11y-lint.png
deleted file mode 100644
index dcf27ea78d8..00000000000
Binary files a/src/site/content/en/react/accessibility-auditing-react/label-a11y-lint.png and /dev/null differ
diff --git a/src/site/content/en/react/accessibility-auditing-react/react-axe-devtools.png b/src/site/content/en/react/accessibility-auditing-react/react-axe-devtools.png
deleted file mode 100644
index a6b538cc87f..00000000000
Binary files a/src/site/content/en/react/accessibility-auditing-react/react-axe-devtools.png and /dev/null differ
diff --git a/src/site/content/en/react/add-manifest-react/devtools.png b/src/site/content/en/react/add-manifest-react/devtools.png
deleted file mode 100644
index 3320d4b083c..00000000000
Binary files a/src/site/content/en/react/add-manifest-react/devtools.png and /dev/null differ
diff --git a/src/site/content/en/react/add-manifest-react/hero-add-manifest-react.jpg b/src/site/content/en/react/add-manifest-react/hero-add-manifest-react.jpg
deleted file mode 100644
index 59c4be74a9b..00000000000
Binary files a/src/site/content/en/react/add-manifest-react/hero-add-manifest-react.jpg and /dev/null differ
diff --git a/src/site/content/en/react/add-manifest-react/icon-home-screen.png b/src/site/content/en/react/add-manifest-react/icon-home-screen.png
deleted file mode 100644
index e9f1bbf898c..00000000000
Binary files a/src/site/content/en/react/add-manifest-react/icon-home-screen.png and /dev/null differ
diff --git a/src/site/content/en/react/add-manifest-react/index.md b/src/site/content/en/react/add-manifest-react/index.md
index e5fd5927505..1f3ca12a81d 100644
--- a/src/site/content/en/react/add-manifest-react/index.md
+++ b/src/site/content/en/react/add-manifest-react/index.md
@@ -3,8 +3,9 @@ layout: post
 title: Add a web app manifest with Create React App
 subhead: |
   A web app manifest is included into Create React App by default and allows anyone to install your React application on their device.
-hero: hero-add-manifest-react.jpg
+hero: image/admin/pOjpReVK54kUJP6nZMwn.jpg
 date: 2019-04-29
+updated: 2021-05-19
 description: |
   Create React App includes a web app manifest by default. Modifying this file
   will allow you to change how your application is displayed when installed on
@@ -15,30 +16,30 @@ authors:
 
 {% Aside %}
   If you don't know how web app manifest files work, refer to the
-  [Add a Web App Manifest](/add-manifest) guide first.
+  [Add a web app manifest](/add-manifest) guide first.
 {% endAside %}
 
 Create React App (CRA) includes a web app manifest by default. Modifying this
 file will allow you to change how your application is displayed when installed
 on the user's device.
 
-<figure class="w-figure">
-  <img src="./icon-home-screen.png" alt="A progressive web app icon on a mobile phone's home screen">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yra3Y2jPf2tS5ELxJdAK.png", alt="A progressive web app icon on a mobile phone's home screen", width="317", height="640" %}
 </figure>
 
 ## Why is this useful?
 
 Web app manifest files provide the capability to change how an installed
-application will look like on a device home screen. By modifying properties in
-the JSON file, you can modify a number of details in your application, including
-its:
+application will look like on the user's desktop or mobile device. By modifying
+properties in the JSON file, you can modify a number of details in your
+application, including its:
 
 * Name
 * Description
 * App icon
 * Theme color
 
-The [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Manifest)
+The [MDN documentation](https://developer.mozilla.org/docs/Web/Manifest)
 covers all the properties that can be changed in detail.
 
 ## Modify the default manifest
@@ -54,6 +55,16 @@ In CRA, a default manifest file, `/public/manifest.json` is included automatical
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",
@@ -63,7 +74,7 @@ In CRA, a default manifest file, `/public/manifest.json` is included automatical
 }
 ```
 
-This allows anybody to install the device to their home screen and see some
+This allows anybody to install the application on their device and see some
 default details of the application. The HTML file, `public/index.html`, also
 includes a `<link>` element to load the manifest.
 
@@ -87,7 +98,7 @@ To find out if all the properties are working correctly in this example:
 {% Instruction 'devtools-application' %}
 -  In the **Application** panel, click the **Manifest** tab.
 
-<img class="w-screenshot w-screenshot--filled" src="./devtools.png" alt="DevTool's Manifest tab shows the properties from the app manifest file.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IpK9fr3O0zEX1GJXq9mw.png", alt="DevTool's Manifest tab shows the properties from the app manifest file.", width="800", height="695" %}
 
 ## Conclusion
 
@@ -97,5 +108,5 @@ To find out if all the properties are working correctly in this example:
 2. If you would like users to install the application on their device, modify
    the manifest file (or create one if you are not using CRA) with any
    properties that you like. The
-   [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Manifest)
+   [MDN documentation](https://developer.mozilla.org/docs/Web/Manifest)
    explains all the required and optional attributes.
diff --git a/src/site/content/en/react/code-splitting-suspense/hero-code-splitting-suspense.jpg b/src/site/content/en/react/code-splitting-suspense/hero-code-splitting-suspense.jpg
deleted file mode 100644
index 212103b15c6..00000000000
Binary files a/src/site/content/en/react/code-splitting-suspense/hero-code-splitting-suspense.jpg and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-suspense/index.md b/src/site/content/en/react/code-splitting-suspense/index.md
index 2a52424e6cc..273018b8a91 100644
--- a/src/site/content/en/react/code-splitting-suspense/index.md
+++ b/src/site/content/en/react/code-splitting-suspense/index.md
@@ -3,7 +3,7 @@ layout: post
 title: Code splitting with React.lazy and Suspense
 subhead: |
   You never need to ship more code than necessary to your users, so split your bundles to make sure this never happens!
-hero: hero-code-splitting-suspense.jpg
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
 date: 2019-04-29
 description: |
   The React.lazy method makes it easy to code-split a React application on a
@@ -12,6 +12,8 @@ description: |
 authors:
   - houssein
   - jeffposnick
+feedback:
+  - api
 ---
 
 {% Aside %}
@@ -101,8 +103,8 @@ To better demonstrate how this works:
 The loading indicator will show for longer now. Notice how all the code that
 makes up the `AvatarComponent` is fetched as a separate chunk.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./split-component-chunk.png" alt="DevTools network panel showing one chunk.js file being downloaded">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt="DevTools network panel showing one chunk.js file being downloaded", width="800", height="478" %}
 </figure>
 
 {% Aside %}
@@ -181,7 +183,7 @@ any React component can serve as an error boundary if it implements either (or
 both) of the lifecycle methods `static getDerivedStateFromError()` or
 `componentDidCatch()`.
 
-To detect and handle lazy-loading failures, you can wrap your `Suspense`
+To detect and handle lazy loading failures, you can wrap your `Suspense`
 component with a parent components that serves as an error boundary. Inside the
 error boundary's `render()` method, you can render the children as-is if there's
 no error, or render a custom error message if something goes wrong:
diff --git a/src/site/content/en/react/code-splitting-suspense/split-component-chunk.png b/src/site/content/en/react/code-splitting-suspense/split-component-chunk.png
deleted file mode 100644
index 703566a00f9..00000000000
Binary files a/src/site/content/en/react/code-splitting-suspense/split-component-chunk.png and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/index.md b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
index 7e431724df1..5dc0c07a96f 100755
--- a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
+++ b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
@@ -6,13 +6,15 @@ authors:
 subhead: |
   How to speed up your Next.js app with code splitting and smart loading strategies.
 date: 2019-11-08
+feedback:
+  - api
 ---
 
 ## What will you learn?
 
 This post explains different types of [code
 splitting](/reduce-javascript-payloads-with-code-splitting/) and how to use
-dynamic imports to speed up your Next.js apps. 
+dynamic imports to speed up your Next.js apps.
 
 ## Route-based and component-based code splitting
 
@@ -21,13 +23,13 @@ When users load your application, Next.js only sends the code needed for the
 initial route. When users navigate around the application, they fetch the chunks
 associated with the other routes. Route-based code splitting minimizes the
 amount of script that needs to be parsed and compiled at once, which results in
-faster page load times. 
+faster page load times.
 
 While route-based code splitting is a good default, you can further optimize the
 loading process with code splitting on the component level. If you have large
 components in your app, it's a great idea to split them into separate chunks.
 That way, any large components that are not critical or only render on certain
-user interactions (like clicking a button) can be lazy-loaded. 
+user interactions (like clicking a button) can be lazy-loaded.
 
 Next.js supports [dynamic `import()`](https://v8.dev/features/dynamic-import),
 which allows you to import JavaScript modules (including React components)
@@ -35,7 +37,7 @@ dynamically and load each import as a separate chunk. This gives you
 component-level code splitting and enables you to control resource loading so
 that users only download the code they need for the part of the site that
 they're viewing. In Next.js, these components are [server-side rendered
-(SSR)](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
+(SSR)](/rendering-on-the-web/)
 by default.
 
 ## Dynamic imports in action
@@ -44,7 +46,7 @@ This post includes several versions of a sample app that consists of a simple
 page with one button. When you click the button, you get to see a cute puppy. As
 you move through each version of the app, you'll see how dynamic imports are
 different from [static
-imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+imports](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)
 and how to work with them.
 
 In the first version of the app, the puppy lives in `components/Puppy.js`. To
@@ -75,15 +77,15 @@ To see how Next.js bundles the app, inspect the network trace in DevTools:
 When you load the page, all the necessary code, including the `Puppy.js`
 component, is bundled in `index.js`:
 
-<figure class="w-figure">
-<img src="./network1.png" alt="DevTools Network tab showing showing six JavaScript files: index.js, app.js, webpack.js, main.js, 0.js and the dll (dynamic-link library) file.">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6KWlTYFhoIEIGqnuMwlh.png", alt="DevTools Network tab showing showing six JavaScript files: index.js, app.js, webpack.js, main.js, 0.js and the dll (dynamic-link library) file.", width="800", height="665" %}
 </figure>
 
 When you press the **Click me** button, only the request for the puppy JPEG is
 added to the **Network** tab:
 
-<figure class="w-figure">
-<img src="./network2.png" alt="DevTools Network tab after the button click, showing the same six JavaScript files and one image.">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7MkXVqnqfIbW74VV48kB.png", alt="DevTools Network tab after the button click, showing the same six JavaScript files and one image.", width="800", height="665" %}
 </figure>
 
 The downside of this approach is that even if users don't click the button to
@@ -117,22 +119,22 @@ When you first load the app, only `index.js` is downloaded. This time it's
 0.5&nbsp;KB smaller (it went down from 37.9&nbsp;KB to 37.4&nbsp;KB) because it
 doesn't include the code for the `Puppy` component:
 
-<figure class="w-figure">
-<img src="./network3.png" alt="DevTools Network showing the same six JavaScript files, except index.js is now 0.5 KB smaller.">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K7Ii3bxUkb37LrZjjWT1.png", alt="DevTools Network showing the same six JavaScript files, except index.js is now 0.5 KB smaller.", width="800", height="665" %}
 </figure>
 
 The `Puppy` component is now in a separate chunk, `1.js`, which is loaded only
 when you press the button:
 
-<figure class="w-figure">
-<img src="./network4.png" alt="DevTools Network tab after the button click, showing the additional 1.js file and the image added to the bottom of the file list.">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DfVDv5poQmwXwOKmnvd.png", alt="DevTools Network tab after the button click, showing the additional 1.js file and the image added to the bottom of the file list.", width="800", height="665" %}
 </figure>
 
 {% Aside %} By default, Next.js names these dynamic chunks _number_.js, where
 _number_ starts from 1. {% endAside %}
 
 In real-world applications, components are often [much
-larger](https://bundlephobia.com/result?p=moment@2.24.0), and lazy-loading them
+larger](https://bundlephobia.com/result?p=moment@2.24.0), and lazy loading them
 can trim your initial JavaScript payload by hundreds of kilobytes.
 
 ## Dynamic imports with custom loading indicator
@@ -169,8 +171,8 @@ DevTools:
 Now when you click the button it takes a while to load the component and the app
 displays the "Loading…" message in the meantime.
 
-<figure class="w-figure">
-<img src="./loading.png" alt='A dark screen with the text "Loading...".'>
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tjlpmwolBVp1jh948Fln.png", alt="A dark screen with the text \"Loading...\".", width="800", height="663" %}
 </figure>
 
 ## Dynamic imports without SSR
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/loading.png b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/loading.png
deleted file mode 100755
index dec08d49225..00000000000
Binary files a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/loading.png and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network1.png b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network1.png
deleted file mode 100755
index 07755491b24..00000000000
Binary files a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network1.png and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network2.png b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network2.png
deleted file mode 100755
index eb000000e43..00000000000
Binary files a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network2.png and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network3.png b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network3.png
deleted file mode 100755
index 9fe72b2be73..00000000000
Binary files a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network3.png and /dev/null differ
diff --git a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network4.png b/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network4.png
deleted file mode 100755
index c904b4d92de..00000000000
Binary files a/src/site/content/en/react/code-splitting-with-dynamic-imports-in-nextjs/network4.png and /dev/null differ
diff --git a/src/site/content/en/react/codelab-quicklink/cdt-blog-optimized.png b/src/site/content/en/react/codelab-quicklink/cdt-blog-optimized.png
deleted file mode 100644
index de844e47d50..00000000000
Binary files a/src/site/content/en/react/codelab-quicklink/cdt-blog-optimized.png and /dev/null differ
diff --git a/src/site/content/en/react/codelab-quicklink/cdt-blog-unoptimized.png b/src/site/content/en/react/codelab-quicklink/cdt-blog-unoptimized.png
deleted file mode 100644
index f47192b0d1c..00000000000
Binary files a/src/site/content/en/react/codelab-quicklink/cdt-blog-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/react/codelab-quicklink/cdt-home-optimized.png b/src/site/content/en/react/codelab-quicklink/cdt-home-optimized.png
deleted file mode 100644
index 16886ac6f0c..00000000000
Binary files a/src/site/content/en/react/codelab-quicklink/cdt-home-optimized.png and /dev/null differ
diff --git a/src/site/content/en/react/codelab-quicklink/cdt-home-unoptimized.png b/src/site/content/en/react/codelab-quicklink/cdt-home-unoptimized.png
deleted file mode 100644
index 9a1d6e0dfcb..00000000000
Binary files a/src/site/content/en/react/codelab-quicklink/cdt-home-unoptimized.png and /dev/null differ
diff --git a/src/site/content/en/react/codelab-quicklink/index.md b/src/site/content/en/react/codelab-quicklink/index.md
index ff59cccae07..938fef960a4 100644
--- a/src/site/content/en/react/codelab-quicklink/index.md
+++ b/src/site/content/en/react/codelab-quicklink/index.md
@@ -31,24 +31,24 @@ Complete the following instructions in the new tab that just opened:
 
 {% Instruction 'devtools-network', 'ol' %}
 {% Instruction 'disable-cache', 'ol' %}
-1. In the [Throttling drop-down list](https://developers.google.com/web/tools/chrome-devtools/network/reference#throttling), select **Fast 3G** to simulate a slow connection type.
+1. In the [Throttling drop-down list](https://developer.chrome.com/docs/devtools/network/reference/#throttling), select **Fast 3G** to simulate a slow connection type.
 {% Instruction 'reload-app', 'ol' %}
-1. Type `chunk` into the [Filter textbox](https://developers.google.com/web/tools/chrome-devtools/network/reference#filter-by-property) to hide any resources that do not include `chunk` in their name.
+1. Type `chunk` into the [Filter textbox](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-property) to hide any resources that do not include `chunk` in their name.
 
-<img class="w-screenshot" src="./cdt-home-unoptimized.png" alt="Network panel showing the home page chunks.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DCl6nkEfsVukurm8gBsy.png", alt="Network panel showing the home page chunks.", width="800", height="194" %}
 
-The site uses [route-based code splitting](https://web.dev/reduce-javascript-payloads-with-code-splitting/), thanks to which only the necessary code is requested at the beginning.
+The site uses [route-based code splitting](/reduce-javascript-payloads-with-code-splitting/), thanks to which only the necessary code is requested at the beginning.
 
-1. [Clear the network requests in DevTools](https://developers.google.com/web/tools/chrome-devtools/network/reference#clear).
+1. [Clear the network requests in DevTools](https://developer.chrome.com/docs/devtools/network/reference/#clear).
 1. Within the app, click the **Blog** link to navigate to that page.
 
 The JS and CSS chunks for the new route are loaded to render the page.
 
-<img class="w-screenshot" src="./cdt-blog-unoptimized.png" alt="Network panel showing the blog page chunks.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/23QuiFZwo7rouJaqmz9m.png", alt="Network panel showing the blog page chunks.", width="800", height="119" %}
 
 Next, you'll implement Quicklink in this site, so that these chunks can be prefetched in the home page, making the navigation faster.
 
-This allows you to combine the best of both techniques: 
+This allows you to combine the best of both techniques:
 
 - Route-based code splitting tells the browser to only load the necessary chunks at a higher priority at page load time.
 - Prefetching tells the browser to load the chunks for in-viewport links at the lowest priority, during the browser's idle time.
@@ -180,16 +180,16 @@ Repeat the first 6 steps from [Measure](#measure). Don't navigate to the blog pa
 
 When the home page loads the chunks for that route are loaded. After that, Quicklink prefetches the route's chunks for the in-viewport links:
 
-<img class="w-screenshot" src="./cdt-home-optimized.png" alt="Network panel showing the home page prefetching chunks.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lClOmOYDx8Cg3RZakAu2.png", alt="Network panel showing the home page prefetching chunks.", width="800", height="286" %}
 
 These chunks are requested at the lowest priority and without blocking the page.
 
-Next: 
+Next:
 
 1. Clear the Network log again.
 1. Disable the **Disable cache** checkbox.
 1. Click the **Blog** link to navigate to that page.
 
-<img class="w-screenshot" src="./cdt-blog-optimized.png" alt="Network panel showing the blog page with chunks picked up from cache.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bJJYT3gDIWU9PeeXSdOE.png", alt="Network panel showing the blog page with chunks picked up from cache.", width="800", height="95" %}
 
 The **Size** column indicates that these chunks were retrieved from the "prefetch cache", instead of the network. Loading these chunks without a Quicklink took approximately **580ms**. Using the library it now takes **2ms**, which represents a **99% reduction**!
diff --git a/src/site/content/en/react/get-started-optimize-react/hero-get-started-optimize-react.jpg b/src/site/content/en/react/get-started-optimize-react/hero-get-started-optimize-react.jpg
deleted file mode 100644
index 6ffa35bcb60..00000000000
Binary files a/src/site/content/en/react/get-started-optimize-react/hero-get-started-optimize-react.jpg and /dev/null differ
diff --git a/src/site/content/en/react/get-started-optimize-react/index.md b/src/site/content/en/react/get-started-optimize-react/index.md
index 55593b6e827..51069c900bf 100644
--- a/src/site/content/en/react/get-started-optimize-react/index.md
+++ b/src/site/content/en/react/get-started-optimize-react/index.md
@@ -3,7 +3,7 @@ layout: post
 title: 'Get started: optimize your React app'
 subhead: |
   Want to make your React site as fast and accessible as possible? You've come to the right place!
-hero: hero-get-started-optimize-react.jpg
+hero: image/admin/seZsv5V8KU5oVlB7sO0b.jpg
 date: 2019-04-29
 description: |
   React is an open-source library that makes building UIs easier. This learning
@@ -40,7 +40,7 @@ The tutorials in this learning path do *not* focus on:
 Although both of these concepts will be touched on when needed, all the guides
 and codelabs in this section will instead focus on how to build fast and
 accessible React sites. For this reason, [a basic knowledge of React is
-required](https://reactjs.org/docs).
+required](https://reactjs.org/docs/getting-started.html).
 
 ## Create React App
 
diff --git a/src/site/content/en/react/how-amp-can-guarantee-fastness-in-your-nextjs-app/index.md b/src/site/content/en/react/how-amp-can-guarantee-fastness-in-your-nextjs-app/index.md
index 482ee3ee1c8..83fe1c41120 100644
--- a/src/site/content/en/react/how-amp-can-guarantee-fastness-in-your-nextjs-app/index.md
+++ b/src/site/content/en/react/how-amp-can-guarantee-fastness-in-your-nextjs-app/index.md
@@ -19,7 +19,7 @@ explains [the different ways you can support AMP in a Next.js app](#strategies),
 then helps you [decide which approach is best for you](#guidance).
 
 The intended audience for this guide is a web developer who has decided to use Next.js but is
-unsure of whether to support AMP. 
+unsure of whether to support AMP.
 
 {% Aside %}
   This guide was not written for web developers who have decided to use AMP but are unsure of what
@@ -63,7 +63,7 @@ framework but rather a server-side templating engine for generating AMP pages.
 If you're serious about load performance, an AMP-only page could be a good way to make sure
 that your page gets fast and stays fast. But here's the catch: in order to guarantee fastness,
 AMP prohibits certain architectural patterns and HTML elements that often lead to slow pages.
-For example, AMP doesn't allow custom synchronous JavaScript because 
+For example, AMP doesn't allow custom synchronous JavaScript because
 [render-blocking resources][blockers] are a common cause of slow page loads.
 
 In order to understand whether an AMP-only approach is right for you, you need to figure out
@@ -87,15 +87,15 @@ two versions of each page.
 
 AMP guarantees that your site gets fast and stays fast by enforcing patterns that lead to
 fastness and prohibiting patterns that lead to slowness. AMP HTML and AMP Caches are the two
-main ways that AMP guarantess fastness. But before adopting AMP you should make sure that it
+main ways that AMP guarantees fastness. But before adopting AMP you should make sure that it
 can support all of your site's requirements.
 
 [intro]: /performance-as-a-default-with-nextjs
 [collection]: /react#nextjs
 [prerendering]: https://developers.googleblog.com/2019/08/the-speed-benefit-of-amp-prerendering.html
 [tags]: https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags
-[blockers]: /render-blocking-resources
+[blockers]: https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/
 [why]: https://blog.amp.dev/2017/01/13/why-amp-caches-exist/
 [how]: https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/#how-does-my-amp-page-get-cached?
 [amp-script]: https://amp.dev/documentation/components/amp-script/
-[overview]: https://amp.dev/about/how-amp-works/
\ No newline at end of file
+[overview]: https://amp.dev/about/how-amp-works/
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/amp.png b/src/site/content/en/react/how-to-use-amp-in-nextjs/amp.png
deleted file mode 100644
index 6d199ea9b0a..00000000000
Binary files a/src/site/content/en/react/how-to-use-amp-in-nextjs/amp.png and /dev/null differ
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/ampimg.png b/src/site/content/en/react/how-to-use-amp-in-nextjs/ampimg.png
deleted file mode 100644
index 400ebd5745d..00000000000
Binary files a/src/site/content/en/react/how-to-use-amp-in-nextjs/ampimg.png and /dev/null differ
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/hybrid.png b/src/site/content/en/react/how-to-use-amp-in-nextjs/hybrid.png
deleted file mode 100644
index 6f8d0e7ae4c..00000000000
Binary files a/src/site/content/en/react/how-to-use-amp-in-nextjs/hybrid.png and /dev/null differ
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/index.md b/src/site/content/en/react/how-to-use-amp-in-nextjs/index.md
index 4995fe761b6..8dd1b5f4b1e 100644
--- a/src/site/content/en/react/how-to-use-amp-in-nextjs/index.md
+++ b/src/site/content/en/react/how-to-use-amp-in-nextjs/index.md
@@ -43,7 +43,7 @@ export const config = { amp: 'hybrid' };
 const Home = () => (
   <p>This is the home page</p>
 );
-  
+
 export default Home;
 ```
 
@@ -54,14 +54,12 @@ export default Home;
 1. Add `?amp=1` to the end of the URL. The page looks the same, but if you look in the
    Console you'll see that the AMP version of the page is being rendered.
 
-<figure class="w-figure">
-  <img src="hybrid.png" class="w-screenshot-filled"
-       alt="The live page and a message in the Chrome DevTools Console stating that the page is 
-            powered by AMP.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ybkMSvzPYUoIpgU4eA1E.png", alt="The live page and a message in the Chrome DevTools Console stating that the page is powered by AMP.", width="800", height="376" %}
 </figure>
 
 Since the page only has a single `<p>` tag, there's no visible difference between the
-main page and its AMP version. 
+main page and its AMP version.
 
 #### How to conditionally serve AMP components
 
@@ -94,17 +92,14 @@ depending on which version of the page was requested.
 
 1. Load the main version of the page:
 
-   <figure class="w-figure">
-     <img src="main.png" class="w-screenshot-filled"
-          alt="A screenshot of the main version of the page.">
+   <figure>
+     {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iXgDaiqLkqLY8kYoKSl7.png", alt="A screenshot of the main version of the page.", width="800", height="637" %}
    </figure>
 
 1. Add `?amp=1` to the end of the URL again to load the AMP version of the page:
 
-   <figure class="w-figure">
-     <img src="amp.png" class="w-screenshot-filled"
-          alt="A screenshot of the AMP version of the page that is displaying different text
-               than the main version.">
+   <figure>
+     {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kWIKm1ADltg2B2444bLR.png", alt="A screenshot of the AMP version of the page that is displaying different text than the main version.", width="800", height="637" %}
    </figure>
 
 1. Try rendering AMP's replacement of the image tag, `amp-img`:
@@ -149,21 +144,17 @@ depending on which version of the page was requested.
    specified by width and height. Check out [Layout & media queries][layout] to learn more about
    the supported layouts of AMP elements, and [amp-img] to learn more about that element's
    optimizations.
-    
+
 1. View the main version of the page again.
 
-   <figure class="w-figure">
-     <img src="mainimg.png" class="w-screenshot-filled"
-          alt="A screenshot showing that the image in the main version of the
-               page overflows the viewport.">
+   <figure>
+     {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/307bH0fcWyCUBhK47CUg.png", alt="A screenshot showing that the image in the main version of the page overflows the viewport.", width="800", height="637" %}
    </figure>
 
 1. View the AMP version of the page again.
 
-   <figure class="w-figure">
-     <img src="ampimg.png" class="w-screenshot-filled"
-          alt="A screenshot showing that the image in the AMP version of the page has been
-               automatically resized to fit the viewport.">
+   <figure>
+     {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rTuu0WR9Rj6o07eLFFb4.png", alt="A screenshot showing that the image in the AMP version of the page has been automatically resized to fit the viewport.", width="800", height="637" %}
    </figure>
 
 ### How to create AMP-only pages {: #amponly }
@@ -181,7 +172,7 @@ to users and search engines at all times.
    const Home = () => (
      <p>This is an AMP-only page</p>
    );
-     
+
    export default Home;
    ```
 
@@ -191,4 +182,4 @@ to users and search engines at all times.
 [hook]: https://reactjs.org/docs/hooks-overview.html
 [layout]: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/
 [amp-img]: https://amp.dev/documentation/examples/components/amp-img/
-[amp-script]: https://amp.dev/documentation/components/amp-script/
\ No newline at end of file
+[amp-script]: https://amp.dev/documentation/components/amp-script/
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/main.png b/src/site/content/en/react/how-to-use-amp-in-nextjs/main.png
deleted file mode 100644
index 03986a3d324..00000000000
Binary files a/src/site/content/en/react/how-to-use-amp-in-nextjs/main.png and /dev/null differ
diff --git a/src/site/content/en/react/how-to-use-amp-in-nextjs/mainimg.png b/src/site/content/en/react/how-to-use-amp-in-nextjs/mainimg.png
deleted file mode 100644
index 17066e4ffae..00000000000
Binary files a/src/site/content/en/react/how-to-use-amp-in-nextjs/mainimg.png and /dev/null differ
diff --git a/src/site/content/en/react/index.md b/src/site/content/en/react/index.md
new file mode 100644
index 00000000000..8cb25e67aa4
--- /dev/null
+++ b/src/site/content/en/react/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: react
+---
\ No newline at end of file
diff --git a/src/site/content/en/react/index.njk b/src/site/content/en/react/index.njk
deleted file mode 100644
index 5e93341ac45..00000000000
--- a/src/site/content/en/react/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: react
----
\ No newline at end of file
diff --git a/src/site/content/en/react/performance-as-a-default-with-nextjs/devtools.png b/src/site/content/en/react/performance-as-a-default-with-nextjs/devtools.png
deleted file mode 100644
index 10b02bd37b3..00000000000
Binary files a/src/site/content/en/react/performance-as-a-default-with-nextjs/devtools.png and /dev/null differ
diff --git a/src/site/content/en/react/performance-as-a-default-with-nextjs/index.md b/src/site/content/en/react/performance-as-a-default-with-nextjs/index.md
index e8f76a4fdcd..9cbc2ecfd23 100644
--- a/src/site/content/en/react/performance-as-a-default-with-nextjs/index.md
+++ b/src/site/content/en/react/performance-as-a-default-with-nextjs/index.md
@@ -31,7 +31,7 @@ aim to explain them in more detail and show you how you can use them to build a
 performant experience.
 
 {% Aside %}
-  This collection assumes that you have a basic knowledge of React. If not, check out 
+  This collection assumes that you have a basic knowledge of React. If not, check out
   [React's Getting Started page](https://reactjs.org/docs/getting-started.html).
 {% endAside %}
 
@@ -118,19 +118,17 @@ Moreover, every initial page load in Next.js is **server-side rendered**. If you
 the Network panel in DevTools, you can see the initial request for the document returns
 a fully server-rendered page.
 
-<figure class="w-figure">
-  <img src="devtools.png" 
-       alt="The Preview tab of the Network panel shows that Next.js returns
-            visually complete HTML when a page is requested.">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bq2tjbZwvpwqQhFsHp0Q.png", alt="The Preview tab of the Network panel shows that Next.js returns visually complete HTML when a page is requested.", width="800", height="529" %}
+  <figcaption>
     The Preview tab of the Network panel shows that Next.js returns visually complete
     HTML when a page is requested.
   </figcaption>
 </figure>
 
 {% Aside %}
-  Check out [Server Rendering](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering) 
-  to learn how server-side rendering often results in a better experience for users. 
+  Check out [Server Rendering](/rendering-on-the-web/#server-rendering)
+  to learn how server-side rendering often results in a better experience for users.
 {% endAside %}
 
 These are only a few of the many features provided by Next.js automatically. Many
@@ -149,5 +147,5 @@ Every other guide in this collection will explore a specific Next.js feature in
 
 [collection]: /react
 [cra]: https://create-react-app.dev/
-[ssr]: https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering
-[amp]: /how-amp-can-guarantee-fastness-in-your-nextjs-app
\ No newline at end of file
+[ssr]: /rendering-on-the-web/#server-rendering
+[amp]: /how-amp-can-guarantee-fastness-in-your-nextjs-app
diff --git a/src/site/content/en/react/precache-with-workbox-react/hero-precache-with-workbox-react.jpg b/src/site/content/en/react/precache-with-workbox-react/hero-precache-with-workbox-react.jpg
deleted file mode 100644
index fa156410b61..00000000000
Binary files a/src/site/content/en/react/precache-with-workbox-react/hero-precache-with-workbox-react.jpg and /dev/null differ
diff --git a/src/site/content/en/react/precache-with-workbox-react/index.md b/src/site/content/en/react/precache-with-workbox-react/index.md
index fb7fb95f27c..9099bb6916f 100644
--- a/src/site/content/en/react/precache-with-workbox-react/index.md
+++ b/src/site/content/en/react/precache-with-workbox-react/index.md
@@ -3,13 +3,15 @@ layout: post
 title: Precaching in Create React App with Workbox
 subhead: |
   Caching assets with a service worker can speed up repeat visits and provide offline support. Workbox makes this easy and is included in Create React App by default.
-hero: hero-precache-with-workbox-react.jpg
+hero: image/admin/SgXCZjcjvhXuNIskeeBN.jpg
 date: 2019-04-29
 description: |
   Workbox is built into Create React App with a default configuration that
   precaches all static assets in your application with every build.
 authors:
   - houssein
+feedback:
+  - api
 ---
 
 {% Aside %}
@@ -18,12 +20,12 @@ authors:
   first.
 {% endAside %}
 
-[`Workbox`](https://developers.google.com/web/tools/workbox/) is built into
+[`Workbox`](https://developer.chrome.com/docs/workbox/) is built into
 Create React App (CRA) with a default configuration that precaches all the
 static assets in your application with every build.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./service-workers.png" width="300" alt="Requests/responses with service worker">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3s4l29dJ6ch6QBmTvVg3.png", alt="Requests/responses with service worker", width="800", height="1224" %}
 </figure>
 
 ## Why is this useful?
@@ -38,7 +40,7 @@ ability to surface content when the user is offline.
 
 **Workbox** is a collection of tools that allow you create and maintain service
 workers. In CRA, the
-[`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+[`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
 is already included into the production build and only needs to be enabled in
 the `src/index.js` file in order to register a new service worker with every
 build:
@@ -73,7 +75,7 @@ You'll notice that instead of showing the payload size, the `Size` column shows
 a `(from ServiceWorker)` message to indicate that these resources were retrieved
 from the service worker.
 
-<img class="w-screenshot w-screenshot--filled" src="./network-requests-sw.png" alt="Network requests with a service worker">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/N7YbiAIT88s8wPUriwo0.png", alt="Network requests with a service worker", width="800", height="450" %}
 
 Since the service worker caches all static assets, try to use the application
 while offline:
@@ -104,7 +106,7 @@ single `workbox.config.js` file.
 {% Aside %}
 For more details on all the caching strategies that a service worker can use,
 take a look at the
-[Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/).
+[Offline Cookbook](/offline-cookbook/).
 {% endAside %}
 
 ## Handling a cache-first strategy
@@ -114,7 +116,7 @@ is an excellent way to build sites that load faster on subsequent visits and
 work offline to some extent. However, there are a few things that need to
 be taken into consideration:
 
-+  How can caching behaviours by a service worker be tested?
++  How can caching behaviors by a service worker be tested?
 +  Should there be a message for users to let them know they are looking at
    cached content?
 
diff --git a/src/site/content/en/react/precache-with-workbox-react/network-requests-sw.png b/src/site/content/en/react/precache-with-workbox-react/network-requests-sw.png
deleted file mode 100644
index 57b45ce4055..00000000000
Binary files a/src/site/content/en/react/precache-with-workbox-react/network-requests-sw.png and /dev/null differ
diff --git a/src/site/content/en/react/precache-with-workbox-react/service-workers.png b/src/site/content/en/react/precache-with-workbox-react/service-workers.png
deleted file mode 100644
index a3af10a964f..00000000000
Binary files a/src/site/content/en/react/precache-with-workbox-react/service-workers.png and /dev/null differ
diff --git a/src/site/content/en/react/prerender-with-react-snap/compare.gif b/src/site/content/en/react/prerender-with-react-snap/compare.gif
deleted file mode 100644
index 3834a84c901..00000000000
Binary files a/src/site/content/en/react/prerender-with-react-snap/compare.gif and /dev/null differ
diff --git a/src/site/content/en/react/prerender-with-react-snap/hero-prerender-with-react-snap.jpg b/src/site/content/en/react/prerender-with-react-snap/hero-prerender-with-react-snap.jpg
deleted file mode 100644
index 17ed48dcf9b..00000000000
Binary files a/src/site/content/en/react/prerender-with-react-snap/hero-prerender-with-react-snap.jpg and /dev/null differ
diff --git a/src/site/content/en/react/prerender-with-react-snap/index.md b/src/site/content/en/react/prerender-with-react-snap/index.md
index 885765fb83f..3555b1c5da2 100644
--- a/src/site/content/en/react/prerender-with-react-snap/index.md
+++ b/src/site/content/en/react/prerender-with-react-snap/index.md
@@ -3,26 +3,28 @@ layout: post
 title: Pre-render routes with react-snap
 subhead: |
   Not server-side rendering but still want to speed up the performance of your React site? Try pre-rendering!
-hero: hero-prerender-with-react-snap.jpg
+hero: image/admin/LTvlmRgA6MLec9QT4Tsv.jpg
 date: 2019-04-29
 description: |
   react-snap is a third-party library that pre-renders pages on your site into
   static HTML files. This can improve First Paint times in your application.
 authors:
   - houssein
+feedback:
+  - api
 ---
 
 [`react-snap`](https://github.com/stereobooster/react-snap) is a third-party
 library that pre-renders pages on your site into static HTML files. This can
 improve
-[First Paint](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint)
+[First Paint](/user-centric-performance-metrics/#important-metrics-to-measure)
 times in your application.
 
 Here's a comparison of the same application with and without pre-rendering
 loaded on a simulated 3G connection and mobile device:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./compare.gif" alt="A side by side loading comparsion. The version using pre-rendering loads 4.2 seconds faster.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t5OiDw1VGxrbqbcxMh3J.gif", alt="A side by side loading comparison. The version using pre-rendering loads 4.2 seconds faster.", width="600", height="435" %}
 </figure>
 
 {% Aside %}
@@ -71,7 +73,7 @@ Then add a `postbuild` script in your `package.json`:
 }
 ```
 
-This would automatically run the `react-snap` command everytime a new build of
+This would automatically run the `react-snap` command every time a new build of
 the applications made (`npm build`).
 
 {% Aside %}
@@ -111,7 +113,7 @@ each route that is crawled. You can take a look at what the HTML payload looks
 like by clicking the URL of the HTML request and then clicking the **Previews**
 tab within Chrome DevTools.
 
-<img class="w-screenshot" src="./preview-html.png" alt="A before and after comparison. The after shot shows content has rendered.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5U36PBU7H7Boswn5Gfq.png", alt="A before and after comparison. The after shot shows content has rendered.", width="800", height="450" %}
 
 {% Aside %}
   `react-snap` can be used for other frameworks than React! This includes Vue
@@ -142,7 +144,7 @@ following in your `package.json` file:
 
 Taking a look at the response preview in Chrome DevTools will now show the styled page with critical CSS inlined.
 
-<img class="w-screenshot" src="./preview-critical-css-inline.png" alt="A before and after comparison. The after shot shows content has rendered and is styled because of inlined critical CSS.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sgxwVZfvpYchXnn1mQrY.png", alt="A before and after comparison. The after shot shows content has rendered and is styled because of inlined critical CSS.", width="800", height="450" %}
 
 {% Aside 'caution' %}
   The `inlineCSS` option is still experimental. It is worth double-checking to
diff --git a/src/site/content/en/react/prerender-with-react-snap/preview-critical-css-inline.png b/src/site/content/en/react/prerender-with-react-snap/preview-critical-css-inline.png
deleted file mode 100644
index 30bfac0a0e3..00000000000
Binary files a/src/site/content/en/react/prerender-with-react-snap/preview-critical-css-inline.png and /dev/null differ
diff --git a/src/site/content/en/react/prerender-with-react-snap/preview-html.png b/src/site/content/en/react/prerender-with-react-snap/preview-html.png
deleted file mode 100644
index 8b23e6f860b..00000000000
Binary files a/src/site/content/en/react/prerender-with-react-snap/preview-html.png and /dev/null differ
diff --git a/src/site/content/en/react/quicklink/hero.png b/src/site/content/en/react/quicklink/hero.png
deleted file mode 100644
index b9ff2c8a568..00000000000
Binary files a/src/site/content/en/react/quicklink/hero.png and /dev/null differ
diff --git a/src/site/content/en/react/quicklink/index.md b/src/site/content/en/react/quicklink/index.md
index 3bebbd60e3f..19a17834af8 100644
--- a/src/site/content/en/react/quicklink/index.md
+++ b/src/site/content/en/react/quicklink/index.md
@@ -4,7 +4,7 @@ title: Speed up navigations in React with Quicklink
 subhead: |
   Automatically prefetch in-viewport links with quicklink for React single page applications.
 date: 2020-06-08
-hero: hero.png
+hero: image/admin/S4BkwUJKPdL9ijtgtEJA.png
 description: |
   quicklink is a library to achieve faster subsequent page-loads by prefetching in-viewport links during idle time.
 authors:
@@ -13,13 +13,15 @@ authors:
   - antonkarlovskiy
 codelabs:
   - codelab-quicklink
+feedback:
+  - api
 ---
 
-[Prefetching](https://web.dev/link-prefetch/) is a technique to speed up navigations by downloading the resources for the next page, ahead of time. [Quicklink](https://github.com/GoogleChromeLabs/quicklink) is a library that allows you to implement this technique at scale, by automatically prefetching links as they come into the view.
+[Prefetching](/link-prefetch/) is a technique to speed up navigations by downloading the resources for the next page, ahead of time. [Quicklink](https://github.com/GoogleChromeLabs/quicklink) is a library that allows you to implement this technique at scale, by automatically prefetching links as they come into the view.
 
-In multi-page apps the library prefetches documents (e.g. `/article.html`), for in-viewport links, so that when the user clicks on these links they can be picked up from the [HTTP cache](https://web.dev/http-cache/).
+In multi-page apps the library prefetches documents (e.g. `/article.html`), for in-viewport links, so that when the user clicks on these links they can be picked up from the [HTTP cache](/http-cache/).
 
-[Single-page apps](https://en.wikipedia.org/wiki/Single-page_application) commonly use a technique called [route-based code splitting](https://web.dev/reduce-javascript-payloads-with-code-splitting/). This allows the site to load the code for a given route only when the user navigates to it. These files (JS, CSS) are commonly referred to as "chunks".
+[Single-page apps](https://en.wikipedia.org/wiki/Single-page_application) commonly use a technique called [route-based code splitting](/reduce-javascript-payloads-with-code-splitting/). This allows the site to load the code for a given route only when the user navigates to it. These files (JS, CSS) are commonly referred to as "chunks".
 
 With that said, in these sites, instead of prefetching documents the biggest performance gains come from prefetching these chunks before the page needs them.
 
@@ -131,7 +133,7 @@ const App = () => (
 
 The `withQuicklink()` HOC uses the path of the route as a key to obtain its associated chunks from `rmanifest.json`.
 Under the hood, as links come into the view, the library injects a `<link rel="prefetch">` tag in the page for each chunk so they can be prefetched.
-Prefetched resources will be requested at the lowest priority by the browser and kept in the [HTTP Cache](https://web.dev/http-cache/) for 5 minutes, after which point, the `cache-control` rules of the resource apply.
+Prefetched resources will be requested at the lowest priority by the browser and kept in the [HTTP Cache](/http-cache/) for 5 minutes, after which point, the `cache-control` rules of the resource apply.
 As a result of this, when a user clicks on a link and moves to a given route, the chunks will be retrieved from the cache, greatly improving the time it takes to render that route.
 
 ## Conclusion
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/console.png b/src/site/content/en/react/route-prefetching-in-nextjs/console.png
deleted file mode 100755
index abd8bfa831c..00000000000
Binary files a/src/site/content/en/react/route-prefetching-in-nextjs/console.png and /dev/null differ
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/index.md b/src/site/content/en/react/route-prefetching-in-nextjs/index.md
index 5db2e018209..0b5765f389d 100755
--- a/src/site/content/en/react/route-prefetching-in-nextjs/index.md
+++ b/src/site/content/en/react/route-prefetching-in-nextjs/index.md
@@ -6,6 +6,9 @@ authors:
 subhead: |
   How Next.js speeds up navigations with route prefetching and how to customize it.
 date: 2019-11-08
+updated: 2022-08-12
+feedback:
+  - api
 ---
 
 ## What will you learn?
@@ -18,12 +21,12 @@ In [Next.js](https://nextjs.org/), you don't need to set up routing manually.
 Next.js uses file-system-based routing, which lets you just create files and folders
 inside the `./pages/` directory:
 
-<figure class="w-figure">
-<img class="w-screenshot" src="./pages-directory.png" alt="Screenshot of the pages directory containting three files: index.js, margherita.js, and pineapple-pizza.js.">
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cwpyvEgBCIbkqrbsbL0.png", alt="Screenshot of the pages directory containting three files: index.js, margherita.js, and pineapple-pizza.js.", width="376", height="348" %}
 </figure>
 
 To link to different pages, use the
-[`<Link>`](https://nextjs.org/docs#with-link) component, similarly to how you'd
+[`<Link>`](https://nextjs.org/docs/api-reference/next/link) component, similarly to how you'd
 use the good old `<a>` element:
 
 ```js
@@ -34,8 +37,7 @@ use the good old `<a>` element:
 
 When you use the `<Link>` component for navigation, Next.js does a little bit
 more for you. Normally, a page is downloaded when you follow a link to it, but
-[Next.js automatically prefetches](https://nextjs.org/docs#prefetching-pages)
-the JavaScript needed to render the page.
+Next.js automatically prefetches the JavaScript needed to render the page.
 
 When you load a page with a few links, odds are that by the time you follow
 a link, the component behind it has already been fetched. This improves
@@ -62,15 +64,15 @@ Use Chrome DevTools to verify that `margherita.js` is prefetched:
 When you load `index.js`, the **Network** tab shows that `margherita.js` is
 downloaded too:
 
-![DevTools Network tab with margherita.js highlighted.](network1.png)
+{% Img src="image/admin/ajJKWGvPidRa1nvqzXKL.png", alt="DevTools Network tab with margherita.js highlighted.", width="800", height="639" %}
 
 ## How automatic prefetching works
 
 Next.js prefetches only links that appear in the viewport and uses the [Intersection
-Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)
 to detect them. It also disables prefetching when the network connection is slow
 or when users have
-[`Save-Data`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data)
+[`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data)
 turned on. Based on these checks, Next.js dynamically injects [`<link
 rel="preload">`](/preload-critical-assets/) tags to download components for
 subsequent navigations.
@@ -84,11 +86,10 @@ check the `README.md` in Glitch examples. {% endAside %}
 
 {% Aside %} Because `<link rel="preload">` requests resources with high
 priority, the browser expects them to be used right away, which triggers
-Console warnings. [Priority
-hints](https://developers.google.com/web/updates/2019/02/priority-hints) will
-soon become available in Chrome, which will allow Next.js to indicate lower
+Console warnings. [Fetch Priority](/fetch-priority/) will
+is available in Chrome, which will allow Next.js to indicate lower
 priority for resources that are not needed immediately with `<link rel="preload"
-importance="low">`. {% endAside %}
+fetchpriority="low">`. {% endAside %}
 
 ## Avoid unnecessary prefetching
 
@@ -114,14 +115,14 @@ To inspect the network activity, follow the steps from the first example. When
 you load `index.js`, the DevTools **Network** tab shows that `margherita.js` is
 downloaded, but `pineapple-pizza.js` is not:
 
-![DevTools Network tab with margherita.js highlighted.](network2.png)
+{% Img src="image/admin/8YTg0ym7vJbQm9oCVQYz.png", alt="DevTools Network tab with margherita.js highlighted.", width="800", height="639" %}
 
 ## Prefetching with custom routing
 
 The `<Link>` component is suitable for most use cases, but you can also build
 your own component to do routing. Next.js makes this easy for you with the
-router API available in [`next/router`](https://nextjs.org/docs#userouter). If
-you want to do something (for example, submit a form) before navigating to a new
+router API available in [`next/router`](https://nextjs.org/docs/api-reference/next/router#userouter).
+If you want to do something (for example, submit a form) before navigating to a new
 route, you can define that in your custom routing code.
 
 When you use custom components for routing, you can add prefetching to them too.
@@ -131,7 +132,7 @@ To implement prefetching in your routing code, use the `prefetch` method from
 Take a look at `components/MyLink.js` in this example app:
 
 {% Glitch {
-  id: 'nextjs-routing',
+  id: 'custom-routing-nextjs',
   path: 'components/MyLink.js',
   height: 480
 } %}
@@ -172,13 +173,12 @@ and to `false` on `/pineapple-pizza`.
 When you load `index.js`, the **Network** tab shows that `margherita.js` is
 downloaded and `pineapple-pizza.js` is not:
 
-![DevTools Network tab with margherita.js highlighted.](network3.png)
+{% Img src="image/admin/MWPy8nvBJCnzy4zGVRln.png", alt="DevTools Network tab with margherita.js highlighted.", width="800", height="639" %}
 
 When you click on either link, the **Console** logs "Having fun with Next.js."
 and navigates to the new route:
 
-![DevTools Console displaying the message 'Having fun with
-Next.js.'](console.png)
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/goiEqi3SIWJBUqsk7j6H.png", alt="DevTools Console displaying the message 'Having fun with Next.js.'", width="800", height="690" %}
 
 ## Conclusion
 
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/network1.png b/src/site/content/en/react/route-prefetching-in-nextjs/network1.png
deleted file mode 100755
index 02064c3a9a8..00000000000
Binary files a/src/site/content/en/react/route-prefetching-in-nextjs/network1.png and /dev/null differ
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/network2.png b/src/site/content/en/react/route-prefetching-in-nextjs/network2.png
deleted file mode 100755
index f2e4e497c09..00000000000
Binary files a/src/site/content/en/react/route-prefetching-in-nextjs/network2.png and /dev/null differ
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/network3.png b/src/site/content/en/react/route-prefetching-in-nextjs/network3.png
deleted file mode 100755
index 2af0fd7e615..00000000000
Binary files a/src/site/content/en/react/route-prefetching-in-nextjs/network3.png and /dev/null differ
diff --git a/src/site/content/en/react/route-prefetching-in-nextjs/pages-directory.png b/src/site/content/en/react/route-prefetching-in-nextjs/pages-directory.png
deleted file mode 100755
index bf6231d7b91..00000000000
Binary files a/src/site/content/en/react/route-prefetching-in-nextjs/pages-directory.png and /dev/null differ
diff --git a/src/site/content/en/react/virtualize-long-lists-react-window/difference-in-scrolling.jpg b/src/site/content/en/react/virtualize-long-lists-react-window/difference-in-scrolling.jpg
deleted file mode 100644
index d0cfdd2d1d2..00000000000
Binary files a/src/site/content/en/react/virtualize-long-lists-react-window/difference-in-scrolling.jpg and /dev/null differ
diff --git a/src/site/content/en/react/virtualize-long-lists-react-window/hero-virtualize-long-lists-react-window.jpg b/src/site/content/en/react/virtualize-long-lists-react-window/hero-virtualize-long-lists-react-window.jpg
deleted file mode 100644
index 0f3ecc9cc29..00000000000
Binary files a/src/site/content/en/react/virtualize-long-lists-react-window/hero-virtualize-long-lists-react-window.jpg and /dev/null differ
diff --git a/src/site/content/en/react/virtualize-long-lists-react-window/index.md b/src/site/content/en/react/virtualize-long-lists-react-window/index.md
index 5b7667a5813..b733c2bc799 100644
--- a/src/site/content/en/react/virtualize-long-lists-react-window/index.md
+++ b/src/site/content/en/react/virtualize-long-lists-react-window/index.md
@@ -3,13 +3,15 @@ layout: post
 title: Virtualize large lists with react-window
 subhead: |
   Super large tables and lists can slow down your site's performance signficantly. Virtualization can help!
-hero: hero-virtualize-long-lists-react-window.jpg
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
 date: 2019-04-29
 description: |
   react-window is a library that allows large lists to be rendered efficiently.
 authors:
   - houssein
   - developit
+feedback:
+  - api
 ---
 
 [`react-window`](https://react-window.now.sh/#/examples/list/fixed-size) is a
@@ -36,9 +38,9 @@ very small subset of the entire list and the "window" of visible content _moves_
 when the user continues to scroll. This improves both the rendering and
 scrolling performance of the list.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./window-diagram.jpg" alt="Window of content in a virtualized list">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="Window of content in a virtualized list", width="578", height="525" %}
+  <figcaption>
     Moving "window" of content in a virtualized list
   </figcaption>
 </figure>
@@ -165,14 +167,14 @@ an example.
 or grids. In this context, the "window" of visible content changes as the user
 scrolls horizontally **and** vertically.
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./window-diagram-grid.jpg" alt="Moving window of content in a virtualized grid is two-dimensional">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="Moving window of content in a virtualized grid is two-dimensional", width="739", height="516" %}
+  <figcaption>
     Moving "window" of content in a virtualized grid is two-dimensional
   </figcaption>
 </figure>
 
-Similary, both `FixedSizeGrid` and `VariableSizeGrid` components can be used
+Similarly, both `FixedSizeGrid` and `VariableSizeGrid` components can be used
 depending on whether the size of specific list items can vary.
 
 * For `FixedSizeGrid`, the API is about the same but with the fact that heights,
@@ -205,9 +207,9 @@ calculations and DOM mutations slower.
 
 The following diagram might help summarize this:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./difference-in-scrolling.jpg" alt="Difference in scrolling between a regular and virtualized list">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="Difference in scrolling between a regular and virtualized list", width="800", height="531" %}
+  <figcaption>
     Difference in scrolling between a regular and virtualized list
   </figcaption>
 </figure>
@@ -326,7 +328,7 @@ list.
 } %}
 
 Scrolling down the list might feel the same, but a request is now made to
-retrieve 10 users from a [random user API](https://randomuser.me/) everytime you
+retrieve 10 users from a [random user API](https://randomuser.me/) every time you
 scroll close to the end of the list. This is all done while only rendering a
 single "window" of results at at a time.
 
@@ -353,7 +355,7 @@ const Row = ({ index, style }) => {
 Since items in a virtualized list only change when the user scrolls, blank
 space can briefly flash as newer entries are about to be displayed. You can
 try quickly scrolling any of the previous examples in this guide to notice
-this. 
+this.
 
 To improve the user experience of virtualized lists, `react-window` allows
 you to overscan items with the `overscanCount` property. This allows you to
@@ -388,7 +390,7 @@ application, follow these steps:
 
 1. Measure rendering and scrolling performance. This
    [article](https://addyosmani.com/blog/react-window/) shows how the [FPS
-   meter](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/#analyze_frames_per_second)
+   meter](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second)
    in Chrome DevTools can be used to explore how efficiently items are rendered
    on a list.
 2. Include `react-window` for any long lists or grids that are affecting
@@ -398,7 +400,7 @@ application, follow these steps:
    cannot add this functionality yourself.
 4. Wrap your virtualized list with `react-window-infinite-loader` if you need to
    lazy load items as the user scrolls.
-5. Use the `overscanCount` property for your lists and the 
+5. Use the `overscanCount` property for your lists and the
    `overscanColumnsCount` and `overscanRowsCount` properties for your grids
    to prevent a flash of empty content. Do not overscan too many entries as
    this will affect performance negatively.
diff --git a/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram-grid.jpg b/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram-grid.jpg
deleted file mode 100644
index 2594e318146..00000000000
Binary files a/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram-grid.jpg and /dev/null differ
diff --git a/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram.jpg b/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram.jpg
deleted file mode 100644
index 8182b5341d3..00000000000
Binary files a/src/site/content/en/react/virtualize-long-lists-react-window/window-diagram.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/adaptive-loading-with-service-workers/cloudinary-workbox.png b/src/site/content/en/reliable/adaptive-loading-with-service-workers/cloudinary-workbox.png
deleted file mode 100644
index 5efeb98e0a8..00000000000
Binary files a/src/site/content/en/reliable/adaptive-loading-with-service-workers/cloudinary-workbox.png and /dev/null differ
diff --git a/src/site/content/en/reliable/adaptive-loading-with-service-workers/index.md b/src/site/content/en/reliable/adaptive-loading-with-service-workers/index.md
index c8548573828..612f9e1862e 100644
--- a/src/site/content/en/reliable/adaptive-loading-with-service-workers/index.md
+++ b/src/site/content/en/reliable/adaptive-loading-with-service-workers/index.md
@@ -8,6 +8,7 @@ authors:
   - demianrenzulli
   - jeffposnick
 date: 2020-06-23
+updated: 2020-08-20
 description: |
    Learn to use service workers and the Network Information API to achieve an adaptive loading strategy.
 tags:
@@ -15,25 +16,29 @@ tags:
   - case-study
   - network
   - service-worker
+  - memory
   - amp
+feedback:
+  - api
 ---
 
+{% YouTube id='fhqCwDP69PI', startTime='161' %}
+
 Users access websites through a wide variety of devices and network connections. Even in major cities, where mobile networks are fast and reliable, one can end up experiencing slower load times, for example, when commuting in the subway, in a car, or just when moving around.
 In regions like emerging markets, this phenomenon is even more common, not only due to unreliable networks, but also because devices tend to have less memory and CPU processing power.
 
-[Adaptive loading](https://web.dev/adaptive-loading-cds-2019/) is a web performance pattern that lets you adapt your site based on the user's network and device conditions.
+[Adaptive loading](/adaptive-loading-cds-2019/) is a web performance pattern that lets you adapt your site based on the user's network and device conditions.
 
-The adaptive loading pattern is made possible by [service workers](https://web.dev/service-workers-cache-storage/), the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API), the [Hardware Concurrency API](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), and the [Device Memory API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory). In this guide we explore how you can use service workers and the Network Information API to achieve an adaptive loading strategy.
+The adaptive loading pattern is made possible by [service workers](/service-workers-cache-storage/), the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API), the [Hardware Concurrency API](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), and the [Device Memory API](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory). In this guide we explore how you can use service workers and the Network Information API to achieve an adaptive loading strategy.
 
 ## Production case
 
 [Terra](https://www.terra.com.br/) is one of the biggest media companies in Brazil. It has a large user base, coming from a wide variety of devices and networks.
 
-To provide a more reliable experience to all their users, Terra combines service workers and the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to deliver lower quality images to users on 2G or 3G connections.
+To provide a more reliable experience to all their users, Terra combines service workers and the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) to deliver lower quality images to users on 2G or 3G connections.
 
-<figure class="w-figure">
-  <img src="terra-adaptive-images.png" 
-       alt="A screenshot of Terra's home page connected to different image qualities according to the connection type.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EQst12doZ2b8CLO0MtO5.png", alt="A screenshot of Terra's home page connected to different image qualities according to the connection type.", width="734", height="381" %}
 </figure>
 
 The company also found that the scripts and assets (like banners) loaded by ad networks were especially detrimental to users navigating in 3G or slower connections.
@@ -42,22 +47,21 @@ As is the case with many publishers, Terra serves [AMP](https://amp.dev/) versio
 
 Taking that into consideration, Terra decided to start serving AMP versions of their pages not only to users coming from search engines, but also to those navigating their site in 3G connections or slower.
 
-To achieve that, they use the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) in the service worker to detect if the request comes from 3G or slower. If that's the case, they change the URL of the page to request the AMP version of the page instead.
+To achieve that, they use the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) in the service worker to detect if the request comes from 3G or slower. If that's the case, they change the URL of the page to request the AMP version of the page instead.
 
-<figure class="w-figure">
-  <img src="terra-adaptive-amp.png" 
-       alt="A screenshot of Terra's article page connected to different image qualities according to the connection type.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4kfDfkeIzxVXLoaTylug.png", alt="A screenshot of Terra's article page connected to different image qualities according to the connection type.", width="741", height="379" %}
 </figure>
 
 Thanks to this technique, they send **70% less bytes** to users on slower connections. The **time spent** in AMP pages is higher for 3G users and ads in AMP pages have a better **CTR (click-through-rate)** for that group.
 
 ## Implement adaptive loading with Workbox
 
-In this section we'll explore how [Workbox](https://web.dev/workbox/) can be used to implement adaptive loading strategies.
+In this section we'll explore how [Workbox](/workbox/) can be used to implement adaptive loading strategies.
 
-Workbox provides several [runtime caching strategies](https://web.dev/runtime-caching-with-workbox/) out of the box. They are used to indicate how the service worker generates a response after receiving a `fetch` event.
+Workbox provides several [runtime caching strategies](/runtime-caching-with-workbox/) out of the box. They are used to indicate how the service worker generates a response after receiving a `fetch` event.
 
-For example, in a [Cache First](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_first_cache_falling_back_to_network) strategy the [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) will be fulfilled using the cached response (if available). If there isn't a cached response, the `Request` will be fulfilled by a network request and the response will be cached.
+For example, in a [Cache First](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network) strategy the [`Request`](https://developer.mozilla.org/docs/Web/API/Request) will be fulfilled using the cached response (if available). If there isn't a cached response, the `Request` will be fulfilled by a network request and the response will be cached.
 
 ```javascript
 import {registerRoute} from 'workbox-routing';
@@ -69,7 +73,7 @@ registerRoute(
 );
 ```
 
-Caching strategies can be customized with [Workbox plugins](https://developers.google.com/web/tools/workbox/guides/using-plugins). These allow you to add additional behaviors by manipulating requests and responses during the lifecycle of a request. Workbox has several built-in plugins for common cases and APIs, but you can also define a [custom plugin](https://developers.google.com/web/tools/workbox/guides/using-plugins#custom_plugins), and introduce some custom logic of your choice.
+Caching strategies can be customized with [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/). These allow you to add additional behaviors by manipulating requests and responses during the lifecycle of a request. Workbox has several built-in plugins for common cases and APIs, but you can also define a [custom plugin](https://developer.chrome.com/docs/workbox/using-plugins/#methods-for-custom-plugins), and introduce some custom logic of your choice.
 
 To achieve adapting loading, define a custom plugin, called, for example, `adaptiveLoadingPlugin`:
 
@@ -105,7 +109,7 @@ const adaptiveLoadingPlugin = {
 The previous code does the following:
 
 - Implements a `requestWillFetch()` callback: This is called whenever a network request is about to be made, so you can alter the `Request`.
-- Checks the connection type, by using the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency). Based on the status of the network, it creates a new URL part, indicating the quality of the image to fetch (e.g. `q_30` for 3G users).
+- Checks the connection type, by using the [Network Information API](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency). Based on the status of the network, it creates a new URL part, indicating the quality of the image to fetch (e.g. `q_30` for 3G users).
 - Creates a new URL based on the dynamic `newPart` value, and returns the new `Request` to be made, based on that URL.
 
 Next, pass the plugin to a `cacheFirst` strategy containing a regular expression to match image URLs (e.g. `/img/`):
@@ -134,12 +138,11 @@ Finally the response will be persisted in the cache, and sent back to the page.
 
 Cloudinary, a video and image hosting service, has a [Workbox Plugin](https://www.npmjs.com/package/cloudinary-workbox-plugin) that encapsulates the functionality explained in the previous section, making it even easier to implement.
 
-<figure class="w-figure">
-  <img src="cloudinary-workbox.png" 
-       alt="Cloudinary and Workbox logos.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iY2R0e4PvimaoVORo8Go.png", alt="Cloudinary and Workbox logos.", width="637", height="269" %}
 </figure>
 
-The plugin is designed to work with the [Workbox webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). To implement it, use the [`GenerateSW()`](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW) class:
+The plugin is designed to work with the [Workbox webpack plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/). To implement it, use the [`GenerateSW()`](https://developer.chrome.com/docs/workbox/reference/workbox-webpack-plugin/#type-GenerateSW) class:
 
 ```javascript
 new workboxPlugin.GenerateSW({
@@ -172,4 +175,4 @@ The previous code does the following:
 
 ## Explore more adaptive loading strategies
 
-You can go beyond this, by mapping device signals, like [hardware concurrency](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency) and [device memory](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory) to device categories and then serving different assets depending on the device type (low-, mid- or high-end).
+You can go beyond this, by mapping device signals, like [hardware concurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency) and [device memory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) to device categories and then serving different assets depending on the device type (low-, mid- or high-end).
diff --git a/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-amp.png b/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-amp.png
deleted file mode 100644
index bd8eba97b0e..00000000000
Binary files a/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-amp.png and /dev/null differ
diff --git a/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-images.png b/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-images.png
deleted file mode 100644
index 3dab9a1d247..00000000000
Binary files a/src/site/content/en/reliable/adaptive-loading-with-service-workers/terra-adaptive-images.png and /dev/null differ
diff --git a/src/site/content/en/reliable/app-shell-ux-with-service-workers/dev-architecture.png b/src/site/content/en/reliable/app-shell-ux-with-service-workers/dev-architecture.png
deleted file mode 100644
index d45d2fe377d..00000000000
Binary files a/src/site/content/en/reliable/app-shell-ux-with-service-workers/dev-architecture.png and /dev/null differ
diff --git a/src/site/content/en/reliable/app-shell-ux-with-service-workers/homepage.jpg b/src/site/content/en/reliable/app-shell-ux-with-service-workers/homepage.jpg
deleted file mode 100644
index 1af889818e1..00000000000
Binary files a/src/site/content/en/reliable/app-shell-ux-with-service-workers/homepage.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/app-shell-ux-with-service-workers/index.md b/src/site/content/en/reliable/app-shell-ux-with-service-workers/index.md
index 7f98d359936..de1bcac6292 100644
--- a/src/site/content/en/reliable/app-shell-ux-with-service-workers/index.md
+++ b/src/site/content/en/reliable/app-shell-ux-with-service-workers/index.md
@@ -8,6 +8,7 @@ authors:
   - demianrenzulli
   - jeffposnick
 date: 2020-06-23
+updated: 2020-08-20
 description: >
   How to achieve an SPA-like architecture in multi-page apps by combining
   partials, service workers, and streams.
@@ -18,11 +19,13 @@ tags:
   - service-worker
 ---
 
+{% YouTube id='fhqCwDP69PI', startTime='438' %}
+
 [Single-page app (SPA)](https://en.wikipedia.org/wiki/Single-page_application) is an architectural pattern in which the browser runs JavaScript code to update the existing page when the user visits a different section of the site, as opposed to loading an entire new page.
 
-This means that the web app doesn't perform an actual page reload. The [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) is used instead to navigate back and forth through the user's history and manipulate the contents of the history stack.
+This means that the web app doesn't perform an actual page reload. The [History API](https://developer.mozilla.org/docs/Web/API/History_API) is used instead to navigate back and forth through the user's history and manipulate the contents of the history stack.
 
-Using this type of architecture can provide an [app shell UX](https://developers.google.com/web/fundamentals/architecture/app-shell) that's fast, reliable, and usually consumes less data when navigating.
+Using this type of architecture can provide an [app shell UX](/learn/pwa/architecture/) that's fast, reliable, and usually consumes less data when navigating.
 
 In multi-page apps (MPAs) each time a user navigates to a new URL, the browser progressively renders HTML specific to that page. This means a full page refresh every time you visit a new page.
 
@@ -33,37 +36,34 @@ In this article we'll analyze how you can achieve an SPA-like architecture in mu
 
 [DEV](https://dev.to/) is a community where software developers write articles, take part in discussions, and build their professional profiles.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" 
-       src="homepage.jpg" 
-       alt="A screenshot of https://dev.to">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Vk2qqXg5PmLV7oCR7xVh.jpg", alt="A screenshot of https://dev.to", width="800", height="482" %}
 </figure>
 
-Their architecture is a multi-page app based on traditional backend templating through Ruby on Rails. Their team was interested in some of the benefits of an app shell model, but didn't want to undertake a major architectural change or move away from their original tech stack. 
+Their architecture is a multi-page app based on traditional backend templating through Ruby on Rails. Their team was interested in some of the benefits of an app shell model, but didn't want to undertake a major architectural change or move away from their original tech stack.
 
 Here's how their solution works:
 
-1. First, they create partials of their home page for the header and the footer (`shell_top.html` and `shell_bottom.html`) and deliver them as standalone HTML snippets with an endpoint. These assets are added to the cache at the service worker `install` event (what's commonly referred to as [precaching](https://web.dev/precache-with-workbox/)).
-1. When a navigation request is intercepted by the service worker, they create a [streamed response](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) by combining the cached header and footer with the main page content that just came from the server. The body is the only actual part of the page that requires fetching data from the network.
+1. First, they create partials of their home page for the header and the footer (`shell_top.html` and `shell_bottom.html`) and deliver them as standalone HTML snippets with an endpoint. These assets are added to the cache at the service worker `install` event (what's commonly referred to as [precaching](/precache-with-workbox/)).
+1. When a navigation request is intercepted by the service worker, they create a [streamed response](https://developer.mozilla.org/docs/Web/API/ReadableStream) by combining the cached header and footer with the main page content that just came from the server. The body is the only actual part of the page that requires fetching data from the network.
 
-<figure class="w-figure">
-  <img src="dev-architecture.png" 
-       alt="Dev's architecture consisting on static headers and footers that are cached and a body requested from the network.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QkGCrnzggZmrp1PXrbHb.png", alt="Dev's architecture consisting on static headers and footers that are cached and a body requested from the network.", width="800", height="363" %}
 </figure>
 
-The key element of this solution is the usage of [streams](https://developers.google.com/web/updates/2016/06/sw-readablestreams), which enables [incremental creations and updates](https://streams.spec.whatwg.org/#intro) of data sources. The Streams API also provides an interface for reading or writing asynchronous chunks of data, only a subset of which might be available in memory at any given time.
+The key element of this solution is the usage of [streams](https://developer.chrome.com/blog/sw-readablestreams/), which enables [incremental creations and updates](https://streams.spec.whatwg.org/#intro) of data sources. The Streams API also provides an interface for reading or writing asynchronous chunks of data, only a subset of which might be available in memory at any given time.
 This way, the header of the page can be rendered as soon as it's picked from the cache, while the rest of the content is being fetched from the network. As a result, the navigation experience is so fast that users don't perceive an actual page refresh, only the new content (the body) being updated.
 
 The resulting UX is similar to the app shell UX pattern of SPAs, implemented on a MPA site.
 
-{% Aside %} 
+{% Aside %}
 The previous section contains a quick summary of DEV's solution. For a more detailed explanation check out their [blog post](https://dev.to/devteam/instant-webpages-and-terabytes-of-data-savings-through-the-magic-of-service-workers-1mkc) on this topic.
 {% endAside %}
 
 ## Implement an app shell UX architecture in MPAs with Workbox
 
-In this section we'll cover a summary of the different parts involved in implementing an app shell UX architecture in MPAs. 
-For a more detailed post on how to implement this on a real site, check out [Beyond SPAs: alternative architectures for your PWA](https://developers.google.com/web/updates/2018/05/beyond-spa).
+In this section we'll cover a summary of the different parts involved in implementing an app shell UX architecture in MPAs.
+For a more detailed post on how to implement this on a real site, check out [Beyond SPAs: alternative architectures for your PWA](https://developer.chrome.com/blog/beyond-spa/).
 
 ### The server
 
@@ -98,10 +98,10 @@ After the first page load, the service worker is registered, allowing you to fet
 
 #### Precaching static assets
 
-The first step is to cache the partial HTML templates, so they are immediately available. 
-With [Workbox precaching](https://developers.google.com/web/tools/workbox/modules/workbox-precaching) you can store these files at the `install` event of the service worker and keep them up to date when changes are deployed to the web app.
+The first step is to cache the partial HTML templates, so they are immediately available.
+With [Workbox precaching](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/) you can store these files at the `install` event of the service worker and keep them up to date when changes are deployed to the web app.
 
-Depending on the build process, Workbox has different solutions to generate a service worker and indicate the list of files to precache, including [webpack](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) and [gulp](https://developers.google.com/web/tools/workbox/guides/codelabs/gulp) plugins, a [generic node module](https://developers.google.com/web/tools/workbox/modules/workbox-build) and a [command line interface](https://developers.google.com/web/tools/workbox/modules/workbox-cli).
+Depending on the build process, Workbox has different solutions to generate a service worker and indicate the list of files to precache, including [webpack](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) and [gulp](https://developers.google.com/codelabs/workbox-lab#0) plugins, a [generic node module](https://developer.chrome.com/docs/workbox/modules/workbox-build/) and a [command line interface](https://developer.chrome.com/docs/workbox/modules/workbox-cli/).
 
 For a partials configuration like the one described earlier, the resulting service worker file should contain something similar to the following:
 
@@ -121,8 +121,8 @@ workbox.precaching.precacheAndRoute([
 
 #### Streaming
 
-Next, add the service worker logic so that the precached partial HTML can be sent back to the web app immediately. This is a crucial part of being reliably fast. Using the [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) within our service worker makes that possible.
-[Workbox Streams](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-streams) abstracts the details of how streaming works. The package lets you pass to the library a mix of streaming sources, both from caches and runtime data that might come from the network. Workbox takes care of coordinating the individual sources and stitching them together into a single, streaming response. 
+Next, add the service worker logic so that the precached partial HTML can be sent back to the web app immediately. This is a crucial part of being reliably fast. Using the [Streams API](https://developer.mozilla.org/docs/Web/API/Streams_API) within our service worker makes that possible.
+[Workbox Streams](https://developer.chrome.com/docs/workbox/reference/workbox-streams/) abstracts the details of how streaming works. The package lets you pass to the library a mix of streaming sources, both from caches and runtime data that might come from the network. Workbox takes care of coordinating the individual sources and stitching them together into a single, streaming response.
 
 First, set up the strategies in Workbox to handle the different sources that will make up the streaming response.
 
@@ -140,21 +140,27 @@ const apiStrategy = workbox.strategies.staleWhileRevalidate({
 ```
 
 - The first strategy reads data that's been precached, like the partial HTML templates.
-- The second strategy implements the [stale-while-revalidate](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#stale-while-revalidate) caching logic, along with [least-recently-used cache expiration](https://developers.google.com/web/tools/workbox/modules/workbox-expiration#restrict_the_number_of_cache_entries) logic once we reach 50 entries.
+- The second strategy implements the [stale-while-revalidate](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#stale-while-revalidate) caching logic, along with [least-recently-used cache expiration](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/#restrict-the-number-of-cache-entries) logic once we reach 50 entries.
 
 Next, tell Workbox how to use the strategies to construct a complete, streaming response, by passing in an array of sources as functions to execute immediately:
 
 ```javascript
 workbox.streams.strategy([
-  () => cacheStrategy.makeRequest({request: '/head.html'}),
-  () => cacheStrategy.makeRequest({request: '/navbar.html'}),
+  () => cacheStrategy.handle({
+      request: new Request(getCacheKeyForURL("/head.html")),
+    }),
+  () => cacheStrategy.handle({
+      request: new Request(getCacheKeyForURL("/navbar.html")),
+    }),
   async ({event, url}) => {
     const tag = url.searchParams.get('tag') || DEFAULT_TAG;
-    const listResponse = await apiStrategy.makeRequest(…);
+    const listResponse = await apiStrategy.handle(…);
     const data = await listResponse.json();
     return templates.index(tag, data.items);
   },
-  () => cacheStrategy.makeRequest({request: '/foot.html'}),
+  () => cacheStrategy.handle({
+      request: new Request(getCacheKeyForURL("/foot.html")),
+    }),
 ]);
 ```
 
diff --git a/src/site/content/en/reliable/broadcast-updates-guide/index.md b/src/site/content/en/reliable/broadcast-updates-guide/index.md
new file mode 100644
index 00000000000..7ef3f762b71
--- /dev/null
+++ b/src/site/content/en/reliable/broadcast-updates-guide/index.md
@@ -0,0 +1,280 @@
+---
+layout: post
+title: "Broadcast updates to pages with service workers"
+authors:
+  - demianrenzulli
+  - andrewguan
+date: 2020-12-08
+description: |
+  How service workers can proactively communicate with the page to inform about certain events.
+tags:
+  - service-worker
+  - offline
+---
+
+In some scenarios the service worker might need to proactively communicate with any of the active
+tabs it controls to inform of a certain event. Examples include:
+
+- Informing the page when a new version of the service worker has been installed, so that the page
+  can show an **"Update to refresh"** button to the user to access the new functionality
+  immediately.
+- Letting the user know about a change on cached data that took place on the service worker side, by
+  showing an indication, like: **"The app is now ready to work offline"**, or **"New version of the
+  content available"**.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/RpZYhHYGpPY9e3AjxuaQ.png", alt="Diagram showing a service worker communicating with the page to send an update.", width="550", height="318" %}
+</figure>
+
+We'll call these types of use cases where the service worker doesn't need to receive a message from
+the page to start a communication **"broadcast updates"**. In this guide we'll review different
+ways of implementing this type of communication between pages and service workers, by using standard
+browser APIs and the [Workbox library](https://developer.chrome.com/docs/workbox/).
+
+{% Aside %}
+  Check out [Workers overview](/workers-overview/) for a high-level explanation
+  of when to use web workers versus service workers and the rest of the
+  [Communicate with workers](/reliable/#communicate-with-workers) series
+  for guides on other common use cases.
+{% endAside %}
+
+## Production cases {: #production-cases }
+
+### Tinder {: #tinder }
+
+Tinder PWA uses [`workbox-window`](https://developer.chrome.com/docs/workbox/modules/workbox-window/) to listen to
+important service worker lifecycle moments from the page ("installed", "controlled" and
+"activated"). That way when a new service worker comes into play, it shows an **"Update Available"**
+banner, so that they can refresh the PWA and access the latest features:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/I8TQ9quakuxJc4l6aNvW.png", alt="A screenshot of Tinder's webapp 'Update Available' functionality.", width="650", height="366" %}
+  <figcaption>In the Tinder PWA, the service worker tells the page that a new version is ready, and the page shows users a "Update Available" banner.</figcaption>
+</figure>
+
+### Squoosh {: #squoosh }
+
+In the [Squoosh PWA](https://squoosh.app/), when the service worker has cached all of the necessary
+assets to make it work offline, it sends a message to the page to show a "Ready to work offline"
+toast, letting the user know about the feature:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tRM8WvCI0aEdVGWGDpLS.png", alt="A screenshot of Squoosh webapp 'Ready to work offline' functionality.", width="550", height="380" %}
+  <figcaption>In the Squoosh PWA the service worker broadcasts an update to the page when cache is ready, and the page displays "Ready to work offline" toast.
+</figcaption>
+</figure>
+
+## Using Workbox {: #using-workbox }
+
+### Listen to service worker lifecycle events {: #listen-to-service-worker-lifecycle-events }
+
+`workbox-window` provides a straightforward interface to listen to [important service worker lifecycle
+events](https://developer.chrome.com/docs/workbox/modules/workbox-window/#important-service-worker-lifecycle-moments).
+Under the hood, the library uses client-side APIs like
+[`updatefound`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/onupdatefound)
+and [statechange](https://developer.mozilla.org/docs/Web/API/ServiceWorker/onstatechange)
+and provides higher level event listeners in the `workbox-window` object, making it easier for the
+user to consume these events.
+
+The following page code lets you detect every time a new version of the service worker is installed,
+so you can communicate it to the user:
+
+```javascript
+const wb = new Workbox('/sw.js');
+
+wb.addEventListener('installed', (event) => {
+  if (event.isUpdate) {
+    // Show "Update App" banner
+  }
+});
+
+wb.register();
+```
+
+### Inform the page of changes in cache data {: #inform-the-page-of-changes-in-cache-data }
+
+The Workbox package
+[`workbox-broadcast-update`](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)
+provides a standard way of notifying window clients that a cached response has been updated. This is
+most commonly used along with the [StaleWhileRevalidate
+strategy](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#stale-while-revalidate).
+
+To broadcast updates add a `broadcastUpdate.BroadcastUpdatePlugin` to your strategy options in the
+service worker side:
+
+```javascript
+import {registerRoute} from 'workbox-routing';
+import {StaleWhileRevalidate} from 'workbox-strategies';
+import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';
+
+registerRoute(
+  ({url}) => url.pathname.startsWith('/api/'),
+  new StaleWhileRevalidate({
+    plugins: [
+      new BroadcastUpdatePlugin(),
+    ],
+  })
+);
+```
+
+In your web app, you can listen for these events like so:
+
+```javascript
+navigator.serviceWorker.addEventListener('message', async (event) => {
+  // Optional: ensure the message came from workbox-broadcast-update
+  if (event.data.meta === 'workbox-broadcast-update') {
+    const {cacheName, updatedUrl} = event.data.payload;
+
+    // Do something with cacheName and updatedUrl.
+    // For example, get the cached content and update
+    // the content on the page.
+    const cache = await caches.open(cacheName);
+    const updatedResponse = await cache.match(updatedUrl);
+    const updatedText = await updatedResponse.text();
+  }
+});
+```
+
+## Using browser APIs {: #using-browser-apis }
+
+If the functionality that Workbox provides is not enough for your needs, use the following browser
+APIs to implement **"broadcast updates"**:
+
+### Broadcast Channel API {: #broadcast-channel-api }
+
+The service worker creates a [BroadcastChannel
+object](https://developer.mozilla.org/docs/Web/API/BroadcastChannel) and starts sending
+messages to it. Any context (e.g. page) interested in receiving these messages can instantiate a
+`BroadcastChannel` object and implement a message handler to receive messages.
+
+To inform the page when a new service worker is installed, use the following code:
+
+```javascript
+// Create Broadcast Channel to send messages to the page
+const broadcast = new BroadcastChannel('sw-update-channel');
+
+self.addEventListener('install', function (event) {
+  // Inform the page every time a new service worker is installed
+  broadcast.postMessage({type: 'CRITICAL_SW_UPDATE'});
+});
+```
+
+The page listens to these events by subscribing to the `sw-update-channel`:
+
+```javascript
+// Create Broadcast Channel and listen to messages sent to it
+const broadcast = new BroadcastChannel('sw-update-channel');
+
+broadcast.onmessage = (event) => {
+  if (event.data && event.data.type === 'CRITICAL_SW_UPDATE') {
+    // Show "update to refresh" banner to the user.
+  }
+};
+```
+
+This is a simple technique, but its limitation is browser support: at the moment of this writing,
+[Safari doesn't support this API](https://caniuse.com/?search=Broadcastchannel).
+
+### Client API {: #client-api }
+
+The [Client API](https://developer.mozilla.org/docs/Web/API/Client) provides a straightforward
+way of communicating with multiple clients from the service worker by iterating over an array of
+[`Client`](https://developer.mozilla.org/docs/Web/API/Client) objects.
+
+Use the following service worker code to send a message to the last focused tab:
+
+```javascript
+// Obtain an array of Window client objects
+self.clients.matchAll(options).then(function (clients) {
+  if (clients && clients.length) {
+    // Respond to last focused tab
+    clients[0].postMessage({type: 'MSG_ID'});
+  }
+});
+```
+
+The page implements a message handler to intercept these messages:
+
+```javascript
+// Listen to messages
+navigator.serviceWorker.onmessage = (event) => {
+     if (event.data && event.data.type === 'MSG_ID') {
+         // Process response
+   }
+};
+```
+
+Client API is a great option for cases like broadcasting information to multiple active tabs. The
+API is supported by all major browsers, but not all of its methods are. Check browser support before
+using it.
+
+### Message Channel {: #message-channel }
+
+[Message Channel](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API) requires
+an initial configuration step, by passing a port from the page to the service worker, to establish a
+communication channel between them. The page instantiates a `MessageChannel` object and passes a
+port to the service worker, via the `postMessage()` interface:
+
+```javascript
+const messageChannel = new MessageChannel();
+
+// Init port
+navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
+  messageChannel.port2,
+]);
+```
+
+The page listens to messages by implementing an "onmessage" handler on that port:
+
+```javascript
+// Listen to messages
+messageChannel.port1.onmessage = (event) => {
+  // Process message
+};
+```
+
+The service worker receives the port and saves a reference to it:
+
+```javascript
+// Initialize
+let communicationPort;
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'PORT_INITIALIZATION') {
+    communicationPort = event.ports[0];
+  }
+});
+```
+
+From that point it can send messages to the page, by calling `postMessage()` in the reference to the
+port:
+
+```javascript
+// Communicate
+communicationPort.postMessage({type: 'MSG_ID' });
+```
+
+`MessageChannel` might be more complex to implement, due to the need of initializing ports, but it's
+supported by [all major browsers](https://caniuse.com/?search=channel%20messaging).
+
+## Next steps {: #next-steps }
+
+In this guide we explored one particular case of Window to service worker communication:
+**"broadcast updates"**. The examples explored include listening to important service worker
+lifecycle events, and communicating to the page about changes in content or cached data. You can think
+of more interesting use cases where the service worker proactively communicates with the page,
+without receiving any message previously.
+
+For more patterns of Window and service worker communication check out:
+
+- [Imperative caching guide](/imperative-caching-guide): Calling a service worker from the page to
+  cache resources in advance (e.g. in prefetching scenarios).
+- [Two-way communication](/two-way-communication-guide): Delegating a task to a service worker (e.g.
+  a heavy download), and keeping the page informed on the progress.
+
+## Additional resources {: #additional-resources }
+
+- [workbox-window](https://developer.chrome.com/docs/workbox/modules/workbox-window/)
+- [workbox-broadcast-update](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)
+- [Workbox 4: Implementing refresh-to-update-version flow using the workbox-window
+  module](https://medium.com/google-developer-experts/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c)
diff --git a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/index.md b/src/site/content/en/reliable/codelab-building-resilient-search-experiences/index.md
index 3310c5c3fed..74b00470902 100644
--- a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/index.md
+++ b/src/site/content/en/reliable/codelab-building-resilient-search-experiences/index.md
@@ -13,8 +13,8 @@ related_post: resilient-search-experiences
 
 This codelab shows you how to implement a resilient search experience with Workbox. The demo app it uses contains a search box that calls a server endpoint, and redirects the user to a basic HTML page.
 
-{% Aside %} 
-This codelab uses [Chrome DevTools](https://www.google.com/chrome/). Download Chrome if you don't already have it. 
+{% Aside %}
+This codelab uses [Chrome DevTools](https://www.google.com/chrome/). Download Chrome if you don't already have it.
 {% endAside %}
 
 ## Measure
@@ -28,29 +28,29 @@ In the new tab that just opened, check how the website behaves when going offlin
 
 {% Instruction 'devtools-network', 'ol' %}
 1. Open Chrome DevTools and select the Network panel.
-1. In the [Throttling drop-down list](https://developers.google.com/web/tools/chrome-devtools/network/reference#throttling), select **Offline**.
+1. In the [Throttling drop-down list](https://developer.chrome.com/docs/devtools/network/reference/#throttling), select **Offline**.
 1. In the demo app enter a search query, then click the **Search** button.
 
 The standard browser error page is shown:
 
-![A screenshot of the default offline UX in the browser.](offline-ux-default.png)
+{% Img src="image/admin/g4Naxj1RnipuqxqzC62x.png", alt="A screenshot of the default offline UX in the browser.", width="800", height="465" %}
 
 ## Provide a fallback response
 
-The service worker contains the code to add the offline page to the [precache list](https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list), so it can always be cached at the service worker `install` event.
+The service worker contains the code to add the offline page to the [precache list](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/#explanation-of-the-precache-list), so it can always be cached at the service worker `install` event.
 
 Usually you would need to instruct Workbox to add this file to the precache list at build time, by integrating the library with your build tool of choice (e.g. [webpack](https://webpack.js.org/) or [gulp](https://gulpjs.com/)).
 
 For simplicity, we've already done it for you. The following code at `public/sw.js` does that:
 
 ```javascript
-const FALLBACK_HTML_URL = ‘/index_offline.html’;
+const FALLBACK_HTML_URL = '/index_offline.html';
 …
 workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);
 ```
 
-{% Aside %} 
-To learn more about how to integrate Workbox with build tools, check out the [webpack Workbox plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) and the [Gulp Workbox plugin](https://developers.google.com/web/tools/workbox/guides/codelabs/gulp).
+{% Aside %}
+To learn more about how to integrate Workbox with build tools, check out the [webpack Workbox plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) and the [Gulp Workbox plugin](https://developers.google.com/codelabs/workbox-lab#0).
 {% endAside %}
 
 Next, add code to use the offline page as a fallback response:
@@ -79,7 +79,7 @@ workbox.routing.setCatchHandler(({event}) => {
 
 The code does the following:
 
-- Defines a default [Network Only strategy](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_only) that will apply to all requests.
+- Defines a default [Network Only strategy](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#network-only) that will apply to all requests.
 - Declares a global error handler, by calling `workbox.routing.setCatchHandler()` to manage failed requests. When requests are for documents, a fallback offline HTML page will be returned.
 
 To test this functionality:
@@ -96,7 +96,7 @@ To test this functionality:
 
 The fallback HTML page is shown:
 
-![A screenshot of the custom offline UX in the browser.](offline-ux-custom.png)
+{% Img src="image/admin/2o0feM6Ib4GnLdKQqV9G.png", alt="A screenshot of the custom offline UX in the browser.", width="800", height="456" %}
 
 ## Request notification permission
 
@@ -119,7 +119,7 @@ The code does the following:
 
 ## Persist offline queries and retry when back online
 
-Next, implement [Workbox Background Sync](https://developers.google.com/web/tools/workbox/modules/workbox-background-sync) to persist offline queries, so they can be retried when the browser detects that connectivity has returned.
+Next, implement [Workbox Background Sync](https://developer.chrome.com/docs/workbox/modules/workbox-background-sync/) to persist offline queries, so they can be retried when the browser detects that connectivity has returned.
 
 1. Open `public/sw.js` for edit.
 1. Add the following code at the end of the file:
@@ -147,12 +147,12 @@ const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
 
 The code does the following:
 
-- `workbox.backgroundSync.Plugin` contains the logic to add failed requests to a queue so they can be retried later. These requests will be persisted in [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).
+- `workbox.backgroundSync.Plugin` contains the logic to add failed requests to a queue so they can be retried later. These requests will be persisted in [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API).
 - `maxRetentionTime` indicates the amount of time a request may be retried. In this case we have chosen 60 minutes (after which it will be discarded).
-- `onSync` is the most important part of this code. This callback will be called when connection is back so that queued requests are retrieved and then fetched from the network. 
+- `onSync` is the most important part of this code. This callback will be called when connection is back so that queued requests are retrieved and then fetched from the network.
 - The network response is added to the `offline-search-responses` cache, appending the `&notification=true` query param, so that this cache entry can be picked up when a user clicks on the notification.
 
-To integrate background sync with your service, define a [NetworkOnly](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_only) strategy for requests to the search URL (`/search_action`) and pass the previously defined `bgSyncPlugin`. Add the following code to the bottom of `public/sw.js`:
+To integrate background sync with your service, define a [NetworkOnly](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#network-only) strategy for requests to the search URL (`/search_action`) and pass the previously defined `bgSyncPlugin`. Add the following code to the bottom of `public/sw.js`:
 
 ```javascript
 const matchSearchUrl = ({url}) => {
@@ -170,7 +170,7 @@ workbox.routing.registerRoute(
 
 This tells Workbox to always go to the network, and, when requests fail, use the background sync logic.
 
-Next, add the following code to the bottom of `public/sw.js` to define a caching strategy for requests coming from notifications. Use a [CacheFirst](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_first_cache_falling_back_to_network) strategy, so they can be served from the cache.
+Next, add the following code to the bottom of `public/sw.js` to define a caching strategy for requests coming from notifications. Use a [CacheFirst](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network) strategy, so they can be served from the cache.
 
 ```javascript
 const matchNotificationUrl = ({url}) => {
@@ -226,7 +226,7 @@ self.addEventListener('notificationclick', function(event) {
 
 Once the connection is back a notification will be shown:
 
-![A screenshot of the full offline flow.](offline-ux-flow.png)
+{% Img src="image/admin/kvnl2PlazBdppGF4eMi0.png", alt="A screenshot of the full offline flow.", width="800", height="315" %}
 
 ## Conclusion
 
diff --git a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-custom.png b/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-custom.png
deleted file mode 100644
index 3504f349756..00000000000
Binary files a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-custom.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-default.png b/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-default.png
deleted file mode 100644
index 7e8ef7334ed..00000000000
Binary files a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-default.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-flow.png b/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-flow.png
deleted file mode 100644
index db8368107e1..00000000000
Binary files a/src/site/content/en/reliable/codelab-building-resilient-search-experiences/offline-ux-flow.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-explore-network-panel/allow-location.png b/src/site/content/en/reliable/codelab-explore-network-panel/allow-location.png
deleted file mode 100755
index 6ad8a57decd..00000000000
Binary files a/src/site/content/en/reliable/codelab-explore-network-panel/allow-location.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-explore-network-panel/index.md b/src/site/content/en/reliable/codelab-explore-network-panel/index.md
index 9f02de72fbf..f576bae8bb3 100644
--- a/src/site/content/en/reliable/codelab-explore-network-panel/index.md
+++ b/src/site/content/en/reliable/codelab-explore-network-panel/index.md
@@ -37,7 +37,7 @@ application.
 The Network panel shows all the assets loaded because of your initial
 navigation:
 
-<img class="screenshot" src="./initial-navigation.png" alt="Chrome DevTools' network panel.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kofLXSq1f3ekY7KY9QK7.png", alt="Chrome DevTools' network panel.", width="800", height="219", class="screenshot" %}
 
 {% Aside %}
 The actual columns you see in the Network panel may be different; the
@@ -76,7 +76,7 @@ Trigger these additional requests by clicking **Find Me** in the app and then
 **Allow** in the popup that appears.
 This will allow the site to access your current location:
 
-<img src="./allow-location.png" alt="The allow location permission prompt.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TJTq6re6eiVf74N8SwWE.png", alt="The allow location permission prompt.", width="638", height="257" %}
 
 {% Aside %}
 You could also deny geolocation permission, in which case the web app
@@ -87,7 +87,7 @@ Once the web app has a location to work with, clicking **Find Nearby
 Wikipedia Entries** results in several additional network requests. You
 should see something like this:
 
-![image](./network-requests.png)
+{% Img src="image/admin/Y9EAf75LBCkkpXyatG3f.png", alt="image", width="800", height="567" %}
 
 ## Interpret the new entries
 
@@ -96,7 +96,7 @@ and response pair.
 
 The first row of the new entries represents a request with a type of `fetch`,
 which corresponds to the
-[way the web app requests data](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+[way the web app requests data](https://developer.mozilla.org/docs/Web/API/Fetch_API)
 from the Wikipedia API.
 
 The following rows all are images (`png` or `jpeg`) associated with the
diff --git a/src/site/content/en/reliable/codelab-explore-network-panel/initial-navigation.png b/src/site/content/en/reliable/codelab-explore-network-panel/initial-navigation.png
deleted file mode 100755
index 810272e5a3f..00000000000
Binary files a/src/site/content/en/reliable/codelab-explore-network-panel/initial-navigation.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-explore-network-panel/network-requests.png b/src/site/content/en/reliable/codelab-explore-network-panel/network-requests.png
deleted file mode 100755
index ecaee02ca08..00000000000
Binary files a/src/site/content/en/reliable/codelab-explore-network-panel/network-requests.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-http-cache/codelab-http-cache.md b/src/site/content/en/reliable/codelab-http-cache/codelab-http-cache.md
index cb013f98be5..30cfe77cd7b 100644
--- a/src/site/content/en/reliable/codelab-http-cache/codelab-http-cache.md
+++ b/src/site/content/en/reliable/codelab-http-cache/codelab-http-cache.md
@@ -55,8 +55,8 @@ of a build process that already took place.
 When responding to requests for URLs that don't contain versioning info, make
 sure you add `Cache-Control: no-cache` to your response messages. Along with
 that, setting one of two additional response headers is recommended: either
-[`Last-Modified`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified)
-or [`ETag`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag). The
+[`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified)
+or [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag). The
 `index.html` falls into this category. You can break this down into two steps.
 
 First, the `Last-Modified` and `ETag` headers are controlled by the
@@ -112,7 +112,7 @@ request is for a versioned URL, and if so, add the `Cache-Control:
 max-age=31536000` header.
 
 The most robust way of doing this is to use a
-[regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+[regular expression](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions)
 to see whether the asset being requested matches a specific pattern that you
 know the hashes fall into. In the case of this sample project, it's always eight
 characters from the set of digits 0–9 and the lowercase letters a–f (i.e.
@@ -167,7 +167,7 @@ sure that the right headers are being set by previewing the live app with the De
 displayed in the Network panel to include the information that is most relevant, by right-clicking in
 the column header:
 
-<img class="screenshot" src="./configure-response-headers.png" alt="Configuring DevTools' Network panel.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L98OANnCWWOU36dTwd8r.png", alt="Configuring DevTools' Network panel.", width="800", height="931", class="screenshot" %}
 
 Here, the columns to pay attention to are `Name`, `Status`, `Cache-Control`,
 `ETag`, and `Last-Modified`.
@@ -177,11 +177,11 @@ Here, the columns to pay attention to are `Name`, `Status`, `Cache-Control`,
 After the page has loaded, you should see entries in the Network panel that look
 like the following:
 
-<img class="screenshot" src="./network-panel.png" alt="Network panel columns.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQbDCXUvXPlqThlPbLIp.png", alt="Network panel columns.", width="800", height="172", class="screenshot" %}
 
 The first row is for the HTML document that you navigated to. This is properly
 served with `Cache-Control: no-cache`. The HTTP response status for that request
-is a [`304`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304). This
+is a [`304`](https://developer.mozilla.org/docs/Web/HTTP/Status/304). This
 means that the browser knew not to use the cached HTML immediately, but instead
 made an HTTP request to the web server, using the `Last-Modified` and `ETag`
 information to see if there was any update to the HTML that it already had in
@@ -195,12 +195,12 @@ HTTP 304 response."
 
 The next two rows are for the versioned JavaScript and CSS assets. You should
 see them served with `Cache-Control: max-age=31536000`, and the HTTP status for
-each is [`200`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200).
+each is [`200`](https://developer.mozilla.org/docs/Web/HTTP/Status/200).
 Because of the configuration used, there is no actual request being made to the
 Node.js server, and clicking on the entry will show you additional detail,
 including that the response came "(from disk cache)".
 
-<img class="screenshot" src="./status-code.png" alt="A network response status of 200.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bx1DtsiX7e9tdOSf1ogZ.png", alt="A network response status of 200.", width="800", height="175", class="screenshot" %}
 
 The actual values for the ETag and Last-Modified columns don't matter much. The
 important thing is to confirm that they're being set.
diff --git a/src/site/content/en/reliable/codelab-http-cache/configure-response-headers.png b/src/site/content/en/reliable/codelab-http-cache/configure-response-headers.png
deleted file mode 100755
index d6e1303a9a7..00000000000
Binary files a/src/site/content/en/reliable/codelab-http-cache/configure-response-headers.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-http-cache/network-panel.png b/src/site/content/en/reliable/codelab-http-cache/network-panel.png
deleted file mode 100755
index 158ff0273a3..00000000000
Binary files a/src/site/content/en/reliable/codelab-http-cache/network-panel.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-http-cache/status-code.png b/src/site/content/en/reliable/codelab-http-cache/status-code.png
deleted file mode 100755
index f58b7d83286..00000000000
Binary files a/src/site/content/en/reliable/codelab-http-cache/status-code.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-service-workers/index.md b/src/site/content/en/reliable/codelab-service-workers/index.md
index 569a5f88025..33483587217 100644
--- a/src/site/content/en/reliable/codelab-service-workers/index.md
+++ b/src/site/content/en/reliable/codelab-service-workers/index.md
@@ -32,7 +32,7 @@ The files in the sample project most relevant to this codelab are:
 
 A service worker (even an empty one, like the current `service-worker.js` file)
 won't be used unless it's
-[registered](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register)
+[registered](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register)
 first. You can do this via a call to:
 
 ```js
@@ -47,7 +47,7 @@ Before you add that code, though, there are a couple of points to take into
 account.
 
 First, not every browser
-[supports](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility)
+[supports](https://developer.mozilla.org/docs/Web/API/Service_Worker_API#Browser_compatibility)
 service workers. This is particularly true for older versions of browsers that
 don't automatically update. So it's a best practice to call
 `navigator.serviceWorker.register()` conditionally, after checking whether
@@ -56,9 +56,9 @@ don't automatically update. So it's a best practice to call
 Second, when you register a service worker, the browser runs the code in your
 `service-worker.js` file, and may potentially start downloading URLs to populate
 caches, depending on the code in your service worker's
-[`install`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#install)
+[`install`](/service-worker-lifecycle/#install)
 and
-[`activate`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#activate)
+[`activate`](/service-worker-lifecycle/#activate)
 event handlers.
 
 Running additional code and downloading assets can use up
@@ -90,9 +90,9 @@ if ('serviceWorker' in navigator) {
 
 Your `service-worker.js` file is where all the logic for your service worker
 implementation would normally go. You'd use a mix of the service worker
-[lifecycle events](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle),
+[lifecycle events](/service-worker-lifecycle/),
 the
-[Cache Storage API](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage),
+[Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage),
 and knowledge about your web app's network traffic to create a perfectly crafted
 service worker, ready to handle all of your web app's requests.
 
@@ -125,18 +125,17 @@ files, it's time to visit the Live version of your sample project, and observe
 the service worker in action.
 
 {% Instruction 'preview' %}
-{% Instruction 'devtools' %}
 {% Instruction 'devtools-console', 'ul' %}
 
 You should see something like the following log messages,
 showing that the service worker has been installed and activated:
 
-<img class="screenshot" src="./sw-installed-activated.png" alt="Shows service worker is installed and activated.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qN2ZoovNYzp7wZHvqY9c.png", alt="Shows service worker is installed and activated.", width="800", height="88", class="screenshot" %}
 
 Then visit the **Applications** tab, and select the **Service Workers** panel.
 You should see something like the following:
 
-<img class="screenshot" src="./sw-panel.png" alt="Shows service worker details in service worker panel.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2jTU0nCScsyvHqhb3ajQ.png", alt="Shows service worker details in service worker panel.", width="800", height="386", class="screenshot" %}
 
 This lets you know that there's a service worker with a source URL of
 `service-worker.js`, for the web app `solar-donkey.glitch.me`, that's currently
@@ -160,7 +159,7 @@ windows and opening a new one.
 
 One of the key concepts to understand when developing with service workers is
 the idea of
-[an update flow](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#updates).
+[an update flow](/service-worker-lifecycle/#updates).
 
 After your users visit a web app which registers a service worker, they'll end
 up with the code for the current copy of `service-worker.js` installed on their
@@ -194,13 +193,13 @@ After making that change, return to the Live version of your sample app, and
 reload the page with the DevTools Application tab still open. You should see
 something like the following:
 
-<img class="screenshot" src="./two-sw-versions.png" alt="Shows two versions of service worker installed.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5zmK7uePWyZ4JMxXAEYd.png", alt="Shows two versions of service worker installed.", width="800", height="454", class="screenshot" %}
 
 This shows that there are two versions of your service worker installed at this
 point. The previous version, which was already activated, is running and in
 control of the current page. The updated version of the service worker is listed
 right below. It's in the
-[`waiting` state](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#waiting),
+[`waiting` state](/service-worker-lifecycle/#waiting),
 and will remain waiting until all of the open tabs that are controlled by the
 old service worker are closed.
 
@@ -212,7 +211,7 @@ previous instances of your web app.
 
 {% Aside %}
 If you don't want to wait, it's possible to
-[call `skipWaiting()`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase)
+[call `skipWaiting()`](/service-worker-lifecycle/#skip-the-waiting-phase)
 inside of your service worker (usually in the `install` handler), or to simulate
 that behave by clicking on the `skipWaiting` link in DevTools.
 {% endAside %}
diff --git a/src/site/content/en/reliable/codelab-service-workers/sw-installed-activated.png b/src/site/content/en/reliable/codelab-service-workers/sw-installed-activated.png
deleted file mode 100755
index eba7b96752c..00000000000
Binary files a/src/site/content/en/reliable/codelab-service-workers/sw-installed-activated.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-service-workers/sw-panel.png b/src/site/content/en/reliable/codelab-service-workers/sw-panel.png
deleted file mode 100755
index 01eb56b4de1..00000000000
Binary files a/src/site/content/en/reliable/codelab-service-workers/sw-panel.png and /dev/null differ
diff --git a/src/site/content/en/reliable/codelab-service-workers/two-sw-versions.png b/src/site/content/en/reliable/codelab-service-workers/two-sw-versions.png
deleted file mode 100755
index fd53c74fa42..00000000000
Binary files a/src/site/content/en/reliable/codelab-service-workers/two-sw-versions.png and /dev/null differ
diff --git a/src/site/content/en/reliable/handling-navigation-requests/hero.jpg b/src/site/content/en/reliable/handling-navigation-requests/hero.jpg
deleted file mode 100644
index db0b952f73a..00000000000
Binary files a/src/site/content/en/reliable/handling-navigation-requests/hero.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/handling-navigation-requests/index.md b/src/site/content/en/reliable/handling-navigation-requests/index.md
index 30c3c1a6241..9fe473682a7 100644
--- a/src/site/content/en/reliable/handling-navigation-requests/index.md
+++ b/src/site/content/en/reliable/handling-navigation-requests/index.md
@@ -7,7 +7,7 @@ subhead: |
 authors:
   - jeffposnick
 date: 2020-07-13
-hero: hero.jpg
+hero: image/admin/YekhsmFaDpnxwhG14CQv.jpg
 alt: Picture of a compass.
 description: |
   Navigation requests are requests for HTML made whenever you enter a new URL in the navigation bar,
@@ -19,6 +19,8 @@ tags:
   - network
   - service-worker
   - offline
+feedback:
+  - api
 ---
 
 Navigation requests are requests for HTML documents made by your browser whenever you enter a new
@@ -32,9 +34,9 @@ caching](/http-cache/).
 As detailed in the [Identify resources loaded from the
 network](/identify-resources-via-network-panel/) guide, a navigation request is the first of
 potentially many requests made in the
-["waterfall"](https://developers.google.com/web/tools/chrome-devtools/network/reference#waterfall)
+["waterfall"](https://developer.chrome.com/docs/devtools/network/reference/#waterfall)
 of network traffic. The HTML that you load via a navigation request kicks off the flow of all other
-requests for subresources like images, scripts, and styles. 
+requests for subresources like images, scripts, and styles.
 
 Inside of a service worker's `fetch` event handler, you can determine whether a request is a
 navigation by checking the `request.mode` property on the `FetchEvent`. If it's set to `'navigate'`,
@@ -85,14 +87,14 @@ those URLs being revalidated independently of each other.
 
 A single-page architecture is frequently used by modern web applications. In it, client-side
 JavaScript modifies the HTML in response to user actions. This model uses the [History
-API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to modify the current URL as the
+API](https://developer.mozilla.org/docs/Web/API/History_API) to modify the current URL as the
 user interacts with the web app, leading to what's effectively a "simulated" navigation. While
 subsequent navigations might be "fake", the initial navigation is real, and it's still important to
 make sure that it isn't blocked on the network.
 
 Fortunately, if you're using the single-page architecture, there's a straightforward pattern to
 follow for serving the initial navigation from the cache: the [application
-shell](https://developers.google.com/web/fundamentals/architecture/app-shell). In this model, your
+shell](/learn/pwa/architecture/). In this model, your
 service worker responds to navigation requests by returning the same, single HTML file that has
 already been precached—regardless of the URL being requested. This HTML should be bare-bones,
 consisting of, perhaps, a generic loading indicator or [skeleton
@@ -101,7 +103,7 @@ has loaded this HTML from the cache, your existing client-side JavaScript takes
 the correct HTML content for the URL from the original navigation request.
 
 Workbox provides the tools that you need to implement this approach; the <code>[navigateFallback
-option](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW)</code>
+option](https://developer.chrome.com/docs/workbox/reference/workbox-build/#method-generateSW)</code>
 allows you to specify which HTML document to use as your app shell, along with an optional allow and
 deny list to limit this behavior to a subset of your URLs.
 
@@ -120,7 +122,7 @@ particular, if your web server uses JavaScript (without relying on
 If your web server falls into that category and you would like to explore one approach to moving
 HTML generation off the network and into your service worker, the guidance in [Beyond SPAs:
 alternative architectures for your
-PWA](https://developers.google.com/web/updates/2018/05/beyond-spa) can get you started.
+PWA](https://developer.chrome.com/blog/beyond-spa/) can get you started.
 
 ### Everything else {: #everything-else }
 
@@ -130,13 +132,13 @@ down your navigations. Starting up the service worker without using it to respon
 request will introduce a small amount of latency (as explained in [Building Faster, More Resilient
 Apps with Service Worker](https://youtu.be/25aCD5XL1Jk)). You can mitigate this overhead by enabling
 a feature called [navigation
-preload](https://developers.google.com/web/updates/2017/02/navigation-preload), and then [using the
+preload](https://developer.chrome.com/blog/navigation-preload/), and then [using the
 network
-response](https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response)
+response](https://developer.chrome.com/blog/navigation-preload/#using-the-preloaded-response)
 that's been preloaded inside of your `fetch` event handler.
 
 Workbox [provides a helper
-library](https://developers.google.com/web/tools/workbox/modules/workbox-navigation-preload) that
+library](https://developer.chrome.com/docs/workbox/modules/workbox-navigation-preload/) that
 feature-detects whether navigation preload is supported, and if so, simplifies the process of
 telling your service worker to use the network response.
 
diff --git a/src/site/content/en/reliable/http-cache/flowchart.png b/src/site/content/en/reliable/http-cache/flowchart.png
deleted file mode 100644
index 52e00ef3c03..00000000000
Binary files a/src/site/content/en/reliable/http-cache/flowchart.png and /dev/null differ
diff --git a/src/site/content/en/reliable/http-cache/http-cache.png b/src/site/content/en/reliable/http-cache/http-cache.png
deleted file mode 100644
index fbbb059acc6..00000000000
Binary files a/src/site/content/en/reliable/http-cache/http-cache.png and /dev/null differ
diff --git a/src/site/content/en/reliable/http-cache/index.md b/src/site/content/en/reliable/http-cache/index.md
index 043a8006f74..e1bc9e67556 100644
--- a/src/site/content/en/reliable/http-cache/index.md
+++ b/src/site/content/en/reliable/http-cache/index.md
@@ -14,13 +14,15 @@ description: >
   work.
 codelabs:
   - codelab-http-cache
+feedback:
+  - api
 ---
 
-Fetching resources over the network is both slow and expensive: 
+Fetching resources over the network is both slow and expensive:
 
 * Large responses require many roundtrips between the browser and the server.
 * Your page won't load until all of its [critical resources][crp] have downloaded completely.
-* If a person is accessing your site with a limited mobile data plan, every unnecessary 
+* If a person is accessing your site with a limited mobile data plan, every unnecessary
   network request is a waste of their money.
 
 How can you avoid unnecessary network requests? The browser's HTTP Cache is your
@@ -48,8 +50,8 @@ the request. If there's a match, the response is read from the cache, which
 eliminates both the network latency and the data costs that the transfer incurs.
 
 The HTTP Cache's behavior is controlled by a combination of
-[request headers](https://developer.mozilla.org/en-US/docs/Glossary/Request_header) and
-[response headers](https://developer.mozilla.org/en-US/docs/Glossary/Response_header).
+[request headers](https://developer.mozilla.org/docs/Glossary/Request_header) and
+[response headers](https://developer.mozilla.org/docs/Glossary/Response_header).
 In an ideal scenario, you'll have control over both the code for your
 web application (which will determine the request headers) and your web server's
 configuration (which will determine the response headers).
@@ -73,10 +75,10 @@ HTTP caching for you, without extra effort.
 {% Aside %}
 Developers who do need more control over the HTTP Cache in their web application
 have an alternative—you can "drop down" a level, and manually use the [Fetch
-API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), passing it
-[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) objects
+API](https://developer.mozilla.org/docs/Web/API/Fetch_API), passing it
+[`Request`](https://developer.mozilla.org/docs/Web/API/Request) objects
 with specific
-[`cache`](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache)
+[`cache`](https://developer.mozilla.org/docs/Web/API/Request/cache)
 overrides set. That's beyond the scope of this guide, though!
 {% endAside %}
 
@@ -91,7 +93,7 @@ into effective caching behavior:
   long, the browser and other intermediate caches should cache the individual
   response.
 * [`ETag`][etag]. When
-  the browser finds an expired cached response, it can send a small token 
+  the browser finds an expired cached response, it can send a small token
   (usually a hash of the file's contents) to the server to check if the file has
   changed. If the server returns the same token, then the file is the same, and there's
   no need to re-download it.
@@ -133,7 +135,7 @@ web server's response headers.
   {% DetailsSummary 'h4' %}
     How versioned URLs can help your caching strategy
     Versioned URLs are a good practice because they make it easier to invalidate
-    cached responses. 
+    cached responses.
   {% endDetailsSummary %}
   Suppose your server instructs browsers to cache a CSS file
   for 1 year (<code>Cache-Control: max-age=31536000</code>) but your designer just made an
@@ -171,7 +173,7 @@ of assigning hash fingerprints to your asset URLs.
 
 {% Aside %}
 You can also add the [`immutable`
-property](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading)
+property](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading)
 to your `Cache-Control` header as a further optimization, though it [will be
 ignored](https://www.keycdn.com/blog/cache-control-immutable#browser-support) in
 some browsers.
@@ -231,7 +233,7 @@ that has expired. `ETag` is the recommended approach because it's more accurate.
   the file. The browser doesn't need to know how the fingerprint is generated; it
   only needs to send it to the server on the next request. If the fingerprint is
   still the same, then the resource hasn't changed and the browser can skip the
-  download. 
+  download.
 {% endDetails %}
 
 By setting `ETag` or `Last-Modified`, you'll end up making the
@@ -248,13 +250,13 @@ very little data to transfer when sending this type of response, so it's usually
 much faster than having to actually send back a copy of the actual resource
 being requested.
 
-<figure class="w-figure">
-  <img src="./http-cache.png" alt="A diagram of a client requesting a resource and the server responding with a 304 header.">
-  <figcaption class="w-figcaption w-text--left">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="A diagram of a client requesting a resource and the server responding with a 304 header.", width="474", height="215" %}
+  <figcaption>
     The browser requests <code>/file</code> from the server and includes the <code>If-None-Match</code>
     header to instruct the server to only return the full file if the <code>ETag</code> of
     the file on the server doesn't match the browser's <code>If-None-Match</code> value. In this
-    case, the 2 values did match, so the browser returns a <code>304 Not Modified</code> response
+    case, the 2 values did match, so the server returns a <code>304 Not Modified</code> response
     with instructions on how much longer the file should be cached (<code>Cache-Control: max-age=120</code>).
   </figcaption>
 </figure>
@@ -284,6 +286,9 @@ If you're looking to go beyond the basics of using the `Cache-Control` header,
 check out Jake Archibald's [Caching best practices & max-age
 gotchas](https://jakearchibald.com/2016/caching-best-practices/) guide.
 
+See [Love your cache](/love-your-cache) for guidance on how to optimize
+your cache usage for return visitors.
+
 ## Appendix: More tips {: #tips }
 
 If you have more time, here are further ways that you can optimize your usage of the HTTP Cache:
@@ -299,11 +304,11 @@ If you have more time, here are further ways that you can optimize your usage of
 
 ## Appendix: `Cache-Control` flowchart {: #flowchart }
 
-![Flowchart](flowchart.png)
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="Flowchart", width="595", height="600" %}
 
 ## Appendix: `Cache-Control` examples {: #examples }
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -315,14 +320,14 @@ If you have more time, here are further ways that you can optimize your usage of
       <tr>
         <td><code>max-age=86400</code></td>
         <td>
-          The response can be cached by browsers and intermediary caches for 
+          The response can be cached by browsers and intermediary caches for
           up to 1 day (60 seconds x 60 minutes x 24 hours).
         </td>
       </tr>
       <tr>
         <td><code>private, max-age=600</code></td>
         <td>
-          The response can be cached by the browser (but not intermediary caches) for up to 10 
+          The response can be cached by the browser (but not intermediary caches) for up to 10
           minutes (60 seconds x 10 minutes).
         </td>
       </tr>
@@ -342,7 +347,7 @@ If you have more time, here are further ways that you can optimize your usage of
   </table>
 </div>
 
-[crp]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path
+[crp]: /critical-rendering-path/
 [304]: https://developer.mozilla.org/docs/Web/HTTP/Status/304
 [if-modified-since]: https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since
 [if-none-match]: https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match
diff --git a/src/site/content/en/reliable/identify-resources-via-network-panel/index.md b/src/site/content/en/reliable/identify-resources-via-network-panel/index.md
index bdfbe372bf1..49f8d7547e5 100644
--- a/src/site/content/en/reliable/identify-resources-via-network-panel/index.md
+++ b/src/site/content/en/reliable/identify-resources-via-network-panel/index.md
@@ -18,8 +18,8 @@ The Network panel in your browser's DevTools helps identify what resources are
 loaded and when they are loaded. Each row in the Network panel corresponds to a
 specific URL that your web app has loaded.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./network-panel.png" alt="Chrome DevTools' network panel.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7TVH0ZV5TBIe5qwNDzAn.png", alt="Chrome DevTools' network panel.", width="800", height="602" %}
 </figure>
 
 {% Aside 'codelab' %}
@@ -55,7 +55,7 @@ make sense for hundreds of large images, for instance.
 Another part of the overall loading picture is _when_ everything gets loaded.
 
 Some requests to the network, such as the
-[navigation request](https://developer.mozilla.org/en-US/docs/Web/API/Request/mode#Value)
+[navigation request](https://developer.mozilla.org/docs/Web/API/Request/mode#Value)
 for your initial HTML, are made unconditionally as soon as a user visits a given
 URL. That HTML might contain hardcoded references to critical CSS or JavaScript
 files that must also load in order to display your interactive page. These
@@ -72,7 +72,7 @@ critical loading path.
 
 {% Aside %}
 Advanced techniques outside the scope of this guide, like [<link
-rel="preload">](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content),
+rel="preload">](https://developer.mozilla.org/docs/Web/HTML/Preloading_content),
 add a twist to this story by giving a head start to what would otherwise be a
 late-loaded request.
 {% endAside %}
@@ -83,8 +83,8 @@ The Name and Type columns help provide a meaningful picture of _what_'s being
 loaded. The answer to "_what_'s loading?" in the example above is a total of
 four URLs, each representing a unique type of content.
 
-<figure class="w-figure">
-  <img class="w-screenshot w-screenshot--filled" src="./network-panel-urls.png" alt="Chrome DevTools' network panel showing four files loading.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9wqFFPDtX9BPLvrVOQhc.png", alt="Chrome DevTools' network panel showing four files loading.", width="800", height="602" %}
 </figure>
 
 The Name represents the URL that your browser requested—though you'll only see
@@ -111,7 +111,7 @@ for example, `v2.html`. All of the subsequent requests will flow (like a
 waterfall!) from this initial navigation request, based on what images, scripts,
 and styles the HTML document references.
 
-<img class="w-screenshot" src="./waterfall.png" alt="Chrome DevTools' waterfall view.">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FuPs0Rk4nWlSP74FOJ5Q.png", alt="Chrome DevTools' waterfall view.", width="774", height="244" %}
 
 The waterfall shows that as soon as `v2.html` has finished loading, the requests
 for the assets it references (also referred to as _subresources_) start. The
@@ -119,4 +119,4 @@ browser can request multiple subresources at the same time, and that's
 represented by the overlapping bars in the Waterfall column for `main.css` and
 `logo.svg`. Finally, you can see from the screenshot that `main.js` starts
 loading last, and it finishes loading after the other three URLs have completed
-as well. 
+as well.
diff --git a/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel-urls.png b/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel-urls.png
deleted file mode 100644
index 87dd415edab..00000000000
Binary files a/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel-urls.png and /dev/null differ
diff --git a/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel.png b/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel.png
deleted file mode 100755
index 5e3404f8d80..00000000000
Binary files a/src/site/content/en/reliable/identify-resources-via-network-panel/network-panel.png and /dev/null differ
diff --git a/src/site/content/en/reliable/identify-resources-via-network-panel/waterfall.png b/src/site/content/en/reliable/identify-resources-via-network-panel/waterfall.png
deleted file mode 100755
index 5e0310fa3ad..00000000000
Binary files a/src/site/content/en/reliable/identify-resources-via-network-panel/waterfall.png and /dev/null differ
diff --git a/src/site/content/en/reliable/imperative-caching-guide/index.md b/src/site/content/en/reliable/imperative-caching-guide/index.md
new file mode 100644
index 00000000000..3b50c33943c
--- /dev/null
+++ b/src/site/content/en/reliable/imperative-caching-guide/index.md
@@ -0,0 +1,283 @@
+---
+layout: post
+title: "Imperative caching guide"
+authors:
+  - demianrenzulli
+  - andrewguan
+date: 2020-12-08
+description: |
+  How to communicate window and service worker to perform tasks related to performance, caching and offline.
+tags:
+  - service-worker
+  - performance
+  - offline
+---
+
+Some websites might need to communicate to the service worker without the need of being
+informed about the result. Here are some examples:
+
+- A page sends the service worker a list of URLs [to
+  prefetch](/instant-navigation-experiences/), so that, when the user clicks on a
+  link the document or page subresources are already available in the cache, making subsequent
+  navigation much faster.
+- The page asks the service worker to retrieve and cache a set of top articles, to have them
+  available for offline purposes.
+
+Delegating these types of non-critical tasks to the service worker has the benefit of freeing up the
+main thread for better handling more pressing tasks such as responding to user interactions.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gCpdKiIbSDZBMJEJE2tZ.png", alt="Diagram of a page requesting resources to cache to a service worker.", width="565", height="264" %}
+</figure>
+
+In this guide we'll explore how to implement a **one-way** communication technique from the page to
+the service worker by using standard browser APIs and the Workbox library. We'll call these types of
+use cases **imperative caching**.
+
+{% Aside %}
+  Check out [Workers overview](/workers-overview/) for a high-level explanation
+  of when to use web workers versus service workers and the rest of the
+  [Communicate with workers](/reliable/#communicate-with-workers) series
+  for guides on other common use cases.
+{% endAside %}
+
+## Production case {: #production-case }
+
+1-800-Flowers.com implemented **imperative caching** (prefetching) with service workers via
+[`postMessage()`](https://developer.mozilla.org/docs/Web/API/Worker/postMessage) to prefetch the
+top items in category pages to speed up subsequent navigation to product detail pages.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eNMKYuaKnlYu0N3IIhI5.png", alt="Logo of 1-800 Flowers.", width="400", height="203" %}
+</figure>
+
+They use a mixed approach to decide which items to prefetch:
+
+- At page load time they ask the servicer worker to retrieve the JSON data for the top 9 items, and
+  add the resulting response objects to the cache.
+- For the remaining items, they listen to the [`mouseover`
+  ](https://developer.mozilla.org/docs/Web/API/Element/mouseover_event) event, so that, when a
+  user moves the cursor on top of an item, they can trigger a fetch for the resource on "demand".
+
+They use the [Cache API](https://developer.mozilla.org/docs/Web/API/Cache) to store JSON
+responses:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FH4clAbGShyIdhj4jWdL.png", alt="Logo of 1-800 Flowers.", width="728", height="287" %}
+   <figcaption>Prefetching JSON product data from product listing pages in 1-800Flowers.com.</figcaption>
+</figure>
+
+When the user clicks on an item, the JSON data associated with it can be picked up from the cache,
+without the need of going to the network, making the navigation faster.
+
+## Using Workbox {: #using-workbox }
+
+[Workbox](https://developer.chrome.com/docs/workbox/) provides an easy way to send messages to
+a service worker, via the [`workbox-window`](https://developer.chrome.com/docs/workbox/modules/workbox-window/) package, a set of modules
+that are intended to run in the window context. They're a complement to the other Workbox packages
+that run in the service worker.
+
+To communicate the page with the service worker, first obtain a Workbox object reference to the
+registered service worker:
+
+```javascript
+const wb = new Workbox('/sw.js');
+wb.register();
+```
+
+Then you can directly send the message declaratively, without the hassle of the getting the
+registration, checking for activation, or thinking about the underlying communication API:
+
+```javascript
+wb.messageSW({"type": "PREFETCH", "payload": {"urls": ["/data1.json", "data2.json"]}}); });
+```
+
+The service worker implements a [`message`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/message_event) handler to
+listen to these messages. It can optionally return a response, although, in cases like these, it's
+not necessary:
+
+```javascript
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'PREFETCH') {
+    // do something
+  }
+});
+```
+
+## Using browser APIs {: #using-browser-apis }
+
+If the Workbox library is not enough for your needs, here is how you can implement window to service
+worker communication, using browser APIs.
+
+The [postMessage API](https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage)
+can be used to establish a **one-way** communication mechanism from the page to the service worker.
+
+The page calls
+[`postMessage()`](https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage) on the
+service worker interface:
+
+```javascript
+navigator.serviceWorker.controller.postMessage({
+  type: 'MSG_ID',
+  payload: 'some data to perform the task',
+});
+```
+The service worker implements a [`message`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/message_event) handler to
+listen to these messages.
+
+```javascript
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === MSG_ID) {
+    // do something
+  }
+});
+```
+
+The `{type : 'MSG_ID'}` attribute is not absolutely required, but it is one way to allow the page to
+send different types of instructions to the service worker (that is, 'to prefetch' vs. 'to clear
+storage'). The service worker can branch into different execution paths based on this flag.
+
+If the operation was successful, the user will be able to get the benefits from it but, if not, it won't alter the main user flow. For example, when 1-800-Flowers.com attempts to precache, the page doesn't need to know whether the service worker succeeded. If it does, then the user will enjoy a faster navigation. If it doesn't the page still needs to navigate to the new page. It's just going to take a little longer.
+
+### A simple prefetching example {: #a-simple-prefetching-example }
+
+One of the most common applications of **imperative caching** is **prefetching**, meaning fetching
+resources for a given URL, before the user moves to it, in order to speed up navigation.
+
+There are different ways of implementing prefetching in sites:
+
+- Using [Link prefetch tags](/link-prefetch/) in pages: resources are kept in the
+  browser cache for five minutes, after which the normal `Cache-Control` rules for the resource
+  apply.
+- Complementing the previous technique with [a runtime caching strategy in the service
+  worker](/instant-navigation-experiences/) to extend the lifetime of the prefetch
+  resource beyond this limit.
+
+For relatively simple prefetching scenarios, like prefetching documents, or specific assets (JS,
+CSS, etc.), those techniques are the best approach.
+
+If additional logic is required, for example, parsing the prefetch resource (a JSON file or page) in
+order to fetch its internal URLs, it's more appropriate to delegate this task entirely to the
+service worker.
+
+Delegating these types of operations to the service worker has the following advantages:
+
+- Offloading the heavy lifting of fetching and post-fetch processing (which will be introduced
+  later) to a secondary thread. By doing this, it frees the main thread to handle more important
+  tasks such as responding to user interactions.
+- Allowing multiple clients (e.g. tabs) to reuse a common functionality, and even calling the
+  service simultaneously without blocking the main thread.
+
+### Prefetch product detail pages {: #prefetch-product-detail-pages }
+
+First use [`postMessage()`](https://developer.mozilla.org/docs/Web/API/Worker/postMessage) on
+the service worker interface and pass an array of URLs to cache:
+
+```javascript
+navigator.serviceWorker.controller.postMessage({
+  type: 'PREFETCH',
+  payload: {
+    urls: [
+      'www.exmaple.com/apis/data_1.json',
+      'www.exmaple.com/apis/data_2.json',
+    ],
+  },
+});
+```
+
+In the service worker, implement a [`message`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/message_event) handler to
+intercept and process messages sent by any active tab:
+
+```javascript
+addEventListener('message', (event) => {
+  let data = event.data;
+  if (data && data.type === 'PREFETCH') {
+    let urls = data.payload.urls;
+    for (let i in urls) {
+      fetchAsync(urls[i]);
+    }
+  }
+});
+```
+In the previous code we introduced a small helper function called `fetchAsync()` to iterate on the
+array of URLs and issue a fetch request for each of them:
+
+```javascript
+async function fetchAsync(url) {
+  // await response of fetch call
+  let prefetched = await fetch(url);
+  // (optionally) cache resources in the service worker storage
+}
+```
+
+When the response is obtained you can rely on the caching headers of the resource. In many cases
+though, like in product detail pages, resources are not cached (which means, they have a
+`Cache-control` header of `no-cache`). In cases like these you can override this behavior, by
+storing the fetched resource in the service worker cache. This has the added benefit of allowing the
+file to be served in offline scenarios.
+
+### Beyond JSON data {: #beyond-json-data }
+
+Once the JSON data is fetched from a server endpoint, it often contains other URLs that are also
+worth prefetching, such as an image or other endpoint data that are associated with this first-level
+data.
+
+Let's say that in our example, the JSON data returned is the information of a grocery shopping site:
+
+```json
+{
+  "productName": "banana",
+  "productPic": "https://cdn.example.com/product_images/banana.jpeg",
+  "unitPrice": "1.99"
+ }
+```
+
+Modify the `fetchAsync()` code to iterate over the list of products and cache the hero image for
+each of them:
+
+```javascript
+async function fetchAsync(url, postProcess) {
+  // await response of fetch call
+  let prefetched = await fetch(url);
+
+  //(optionally) cache resource in the service worker cache
+
+  // carry out the post fetch process if supplied
+  if (postProcess) {
+    await postProcess(prefetched);
+  }
+}
+
+async function postProcess(prefetched) {
+  let productJson = await prefetched.json();
+  if (productJson && productJson.product_pic) {
+    fetchAsync(productJson.product_pic);
+  }
+}
+```
+
+You can add some exception handling around this code for situations like 404s.
+But the beauty of using a service worker to prefetch is that it can fail without much
+consequence to the page and the main thread. You may also have more elaborate logic in the
+post-processing of the prefetched content, making it more flexible and decoupled with the data it's
+handling. The sky's the limit.
+
+{% Aside 'caution' %} Prefetching techniques consume extra bytes for resources that are not
+immediately needed, so it needs to be applied thoughtfully; only prefetch resources when you are
+confident that users will need them. Avoid prefetching when users are on slow connections.
+You can detect that with the [Network Information
+API](https://developer.mozilla.org/docs/Web/API/Network_Information_API). {% endAside %}
+
+## Conclusion {: #conclusion }
+
+In this article, we covered a common use case of **one-way** communication between page and service
+worker: **imperative caching**. The examples discussed are only meant for demonstrating one way of
+using this pattern and the same approach can be applied to other use cases as well, for example,
+caching top articles on demand for offline consumption, bookmarking, and others.
+
+For more patterns of page and service worker communication, check out:
+
+- [Broadcast updates](/broadcast-updates-guide): Calling the page from the service worker to inform
+  about important updates (e.g. a new version of the webapp is available).
+- [Two-way communication](/two-way-communication-guide): Delegating a task to a service worker (e.g.
+  a heavy download), and keeping the page informed on the progress.
diff --git a/src/site/content/en/reliable/index.md b/src/site/content/en/reliable/index.md
new file mode 100644
index 00000000000..d617dcda8e7
--- /dev/null
+++ b/src/site/content/en/reliable/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: reliable
+---
\ No newline at end of file
diff --git a/src/site/content/en/reliable/index.njk b/src/site/content/en/reliable/index.njk
deleted file mode 100644
index a23cf58e0bf..00000000000
--- a/src/site/content/en/reliable/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: reliable
----
\ No newline at end of file
diff --git a/src/site/content/en/reliable/instant-navigation-experiences/index.md b/src/site/content/en/reliable/instant-navigation-experiences/index.md
index 6f0ab670412..f176dff16f4 100644
--- a/src/site/content/en/reliable/instant-navigation-experiences/index.md
+++ b/src/site/content/en/reliable/instant-navigation-experiences/index.md
@@ -7,6 +7,7 @@ authors:
   - jeffposnick
   - gilbertococchi
 date: 2020-06-23
+updated: 2020-08-20
 description: |
   Different ways in which service workers can be used as a complement of traditional prefetching techniques.
 tags:
@@ -16,55 +17,54 @@ tags:
   - service-worker
 ---
 
+{% YouTube id='fhqCwDP69PI', startTime='285' %}
+
 Performing a task on a site commonly involves several steps. For example, purchasing a product in an e-commerce website might involve searching for a product, picking an item from the list of results, adding the item to the cart, and completing the operation by checking out.
 
-In technical terms, moving through different pages means making a **navigation request**. As a general rule, you **don't** want to use long-lived `Cache-Control` headers to cache the HTML response for a navigation request. They should normally be satisfied via the network, with `Cache-Control: no-cache`, to ensure that the HTML, along with the chain of subsequent network requests, is (reasonably) fresh. 
+In technical terms, moving through different pages means making a **navigation request**. As a general rule, you **don't** want to use long-lived `Cache-Control` headers to cache the HTML response for a navigation request. They should normally be satisfied via the network, with `Cache-Control: no-cache`, to ensure that the HTML, along with the chain of subsequent network requests, is (reasonably) fresh.
 Having to go against the network each time the user navigates to a new page unfortunately means that each navigation might be slow—at the very least, it means that it won't be *reliably* fast.
 
-To speed up these requests, if you can anticipate the user's action, you can request these pages and assets beforehand and keep them in the cache for a short period of time until the user clicks on these links. This technique is called [prefetching](https://web.dev/link-prefetch/) and it's commonly implemented by adding `<link rel="prefetch">` tags to pages, indicating the resource to prefetch.
+To speed up these requests, if you can anticipate the user's action, you can request these pages and assets beforehand and keep them in the cache for a short period of time until the user clicks on these links. This technique is called [prefetching](/link-prefetch/) and it's commonly implemented by adding `<link rel="prefetch">` tags to pages, indicating the resource to prefetch.
 
-In this guide we'll explore different ways in which [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) can be used as a complement of traditional prefetching techniques.
+In this guide we'll explore different ways in which [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) can be used as a complement of traditional prefetching techniques.
 
 ## Production cases
 
-[MercadoLibre](https://www.mercadolibre.com.ar/) is the biggest e-commerce site in Latin America. To speed up navigations, they dynamically inject `<link rel=”prefetch”>` tags in some parts of the flow. For example, in listing pages, they fetch the next result page as soon as the user scrolls to the bottom of the listing:
+[MercadoLibre](https://www.mercadolibre.com.ar/) is the biggest e-commerce site in Latin America. To speed up navigations, they dynamically inject `<link rel="prefetch">` tags in some parts of the flow. For example, in listing pages, they fetch the next result page as soon as the user scrolls to the bottom of the listing:
 
-<figure class="w-figure">
-  <img src="mercadolibre-prefetch.png" 
-       alt="Screenshot of MercadoLibre's listing pages onea and two and a Link Prefetch tag connecting both.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/80D6QavdktSNb6xnhXE0.png", alt="Screenshot of MercadoLibre's listing pages one and two and a Link Prefetch tag connecting both.", width="682", height="397" %}
 </figure>
 
-Prefetched files are requested at the "Lowest" priority and stored in the [HTTP cache](https://web.dev/http-cache/) or the [memory cache](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) (depending on whether the resource is cacheable or not), for an amount of time that varies by browsers. For example, as of Chrome 85, this value is 5 minutes. Resources are kept around for five minutes, after which the normal `Cache-Control` rules for the resource apply.
+Prefetched files are requested at the "Lowest" priority and stored in the [HTTP cache](/http-cache/) or the [memory cache](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) (depending on whether the resource is cacheable or not), for an amount of time that varies by browsers. For example, as of Chrome 85, this value is 5 minutes. Resources are kept around for five minutes, after which the normal `Cache-Control` rules for the resource apply.
 
 Using service worker caching can help you extend the lifetime of prefetch resources beyond the five-minute window.
 
-For example, Italian sports portal [Virgilio Sport](https://sport.virgilio.it/) uses service workers to prefetch the most popular posts in their home page. They also use the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) to avoid prefetching for users that are on a 2G connection.
+For example, Italian sports portal [Virgilio Sport](https://sport.virgilio.it/) uses service workers to prefetch the most popular posts in their home page. They also use the [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API) to avoid prefetching for users that are on a 2G connection.
 
-<figure class="w-figure">
-  <img src="virgilio-sport-logo.png" 
-       alt="Virgilio Sport logo.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqiSoliDKZ9SR1NX2Ek3.png", alt="Virgilio Sport logo.", width="340", height="100" %}
 </figure>
 
 As a result of this, over 3 weeks of observation Virgilio Sport witnessed load times for navigation to articles improve **78%**, and the number of article impressions increase **45%**.
 
-<figure class="w-figure">
-  <img src="virgilio-sport-prefetch.png" 
-       alt="A screenshot of Virgilio Sport home and article pages, with impact metrics after prefetching.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wn7OR4CA21QJUYhs8OUu.png", alt="A screenshot of Virgilio Sport home and article pages, with impact metrics after prefetching.", width="536", height="442" %}
 </figure>
 
 ## Implement precaching with Workbox
 
-In the following section we'll use [Workbox](https://web.dev/workbox/) to show how to implement different caching techniques in the service worker that can be used as a complement to `<link rel="prefetch">`, or even a replacement for it, by delegating this task completely to the service worker.
+In the following section we'll use [Workbox](/workbox/) to show how to implement different caching techniques in the service worker that can be used as a complement to `<link rel="prefetch">`, or even a replacement for it, by delegating this task completely to the service worker.
 
-{% Aside 'caution' %} You must take steps to ensure that adding a service worker to your site doesn't end up actually slowing down your navigations. Starting up the service worker without using it to respond to a navigation request will introduce a small amount of latency (as explained in [Building Faster, More Resilient Apps with Service Workers](https://www.youtube.com/watch?v=25aCD5XL1Jk)). You can mitigate this overhead by enabling a feature called [navigation preload](https://developers.google.com/web/updates/2017/02/navigation-preload), and then using the [network response](https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response) that's been preloaded inside of your fetch event handler.
+{% Aside 'caution' %} You must take steps to ensure that adding a service worker to your site doesn't end up actually slowing down your navigations. Starting up the service worker without using it to respond to a navigation request will introduce a small amount of latency (as explained in [Building Faster, More Resilient Apps with Service Workers](https://www.youtube.com/watch?v=25aCD5XL1Jk)). You can mitigate this overhead by enabling a feature called [navigation preload](https://developer.chrome.com/blog/navigation-preload/), and then using the [network response](https://developer.chrome.com/blog/navigation-preload/#using-the-preloaded-response) that's been preloaded inside of your fetch event handler.
 {% endAside %}
 
 ### 1. Precache static pages and page subresources
 
-[Precaching](https://web.dev/precache-with-workbox/) is the ability of the service worker to save files to the cache while it's installing. 
+[Precaching](/precache-with-workbox/) is the ability of the service worker to save files to the cache while it's installing.
 
 {% Aside %}
-Precaching sounds similar to prefetching, but it's a different technique. In the first one, the service worker fetches and stores resources (typically static files) while it's installing and keeps them in the cache until a new version of the file is available. In the second, resources are requested ahead of time to have it in the cache for brief periods of time in order to speed up subsequent navigations. 
+Precaching sounds similar to prefetching, but it's a different technique. In the first one, the service worker fetches and stores resources (typically static files) while it's installing and keeps them in the cache until a new version of the file is available. In the second, resources are requested ahead of time to have it in the cache for brief periods of time in order to speed up subsequent navigations.
 {% endAside %}
 
 In the following cases precaching is used to achieve a similar goal as prefetching: making navigations faster.
@@ -80,7 +80,7 @@ workbox.precaching.precacheAndRoute([
 ]);
 ```
 
-#### Precaching page subresources 
+#### Precaching page subresources
 
 Precaching static assets that the different sections of the site might use (e.g. JavaScript, CSS, etc.), is a general best practice and can give an extra boost in prefetching scenarios.
 
@@ -109,7 +109,7 @@ As mentioned earlier, `<link rel="prefetch">` fetches and keeps resources in the
 
 Service workers allow you to extend the lifetime of the prefetch pages, while providing the added benefit of making those resources available for offline usage.
 
-In the previous example, one could complement the `<link rel="prefetch">` used to prefetch a product page with a [Workbox runtime caching strategy](https://web.dev/runtime-caching-with-workbox/).
+In the previous example, one could complement the `<link rel="prefetch">` used to prefetch a product page with a [Workbox runtime caching strategy](/runtime-caching-with-workbox/).
 
 To implement that:
 
@@ -132,23 +132,22 @@ new workbox.strategies.StaleWhileRevalidate({
 });
 ```
 
-In this case, we have opted to use a [stale-while-revalidate strategy](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#stale-while-revalidate). In this strategy, pages can be requested from both the cache and the network, in parallel. The response comes from the cache if available, otherwise from the network. The cache is always kept up to date with the network response with each successful request.
+In this case, we have opted to use a [stale-while-revalidate strategy](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#stale-while-revalidate). In this strategy, pages can be requested from both the cache and the network, in parallel. The response comes from the cache if available, otherwise from the network. The cache is always kept up to date with the network response with each successful request.
 
 ### 3. Delegate prefetching to the service worker
 
 In most cases the best approach is to use `<link rel="prefetch">`. The tag is a [resource hint](https://www.w3.org/TR/resource-hints/) designed to make prefetching as efficient as possible.
 
-In some cases, though, it might be better to delegate this task completely to the service worker. 
+In some cases, though, it might be better to delegate this task completely to the service worker.
 For example: to prefetch the first few products in a client-side rendered product listing page, one might need to inject several `<link rel="prefetch">` tags dynamically in the page, based on an API response. This can momentarily consume time on the page's main thread and make the implementation more difficult.
 
 In cases like this, use a "page to service worker communication strategy", to delegate the task of prefetching completely to the service worker. This type of communication can be achieved by using [worker.postMessage()](https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage):
 
-<figure class="w-figure">
-  <img src="page-to-sw.png" 
-       alt="An icon of a page making two way communication with a service worker.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vokHySREOo6Y3PpxzxRC.png", alt="An icon of a page making two way communication with a service worker.", width="626", height="205" %}
 </figure>
 
-The [Workbox Window package](https://developers.google.com/web/tools/workbox/modules/workbox-window) simplifies this type of communication, abstracting many details of the underlying call being done. 
+The [Workbox Window package](https://developer.chrome.com/docs/workbox/modules/workbox-window/) simplifies this type of communication, abstracting many details of the underlying call being done.
 
 Prefetching with Workbox Window can be implemented in the following way:
 
@@ -161,7 +160,7 @@ wb.register();
 const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
 ```
 
-- In the service worker: implement a message handler to issue a `fetch()` request for each URL to prefetch: 
+- In the service worker: implement a message handler to issue a `fetch()` request for each URL to prefetch:
 
 ```javascript
 addEventListener('message', (event) => {
diff --git a/src/site/content/en/reliable/instant-navigation-experiences/mercadolibre-prefetch.png b/src/site/content/en/reliable/instant-navigation-experiences/mercadolibre-prefetch.png
deleted file mode 100644
index 3cb113b00f7..00000000000
Binary files a/src/site/content/en/reliable/instant-navigation-experiences/mercadolibre-prefetch.png and /dev/null differ
diff --git a/src/site/content/en/reliable/instant-navigation-experiences/page-to-sw.png b/src/site/content/en/reliable/instant-navigation-experiences/page-to-sw.png
deleted file mode 100644
index 18ecb3a2789..00000000000
Binary files a/src/site/content/en/reliable/instant-navigation-experiences/page-to-sw.png and /dev/null differ
diff --git a/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-logo.png b/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-logo.png
deleted file mode 100644
index 1028a936f44..00000000000
Binary files a/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-logo.png and /dev/null differ
diff --git a/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-prefetch.png b/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-prefetch.png
deleted file mode 100644
index 5375d2c1444..00000000000
Binary files a/src/site/content/en/reliable/instant-navigation-experiences/virgilio-sport-prefetch.png and /dev/null differ
diff --git a/src/site/content/en/reliable/measuring-offline-usage/index.md b/src/site/content/en/reliable/measuring-offline-usage/index.md
new file mode 100644
index 00000000000..f680b14a8aa
--- /dev/null
+++ b/src/site/content/en/reliable/measuring-offline-usage/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Measuring offline usage
+subhead: >
+  How to track offline usage of your site so that you can make a case as to why
+  your site needs a better offline experience.
+description: >
+  How to track offline usage of your site so that you can make a case as to why
+  your site needs a better offline experience.
+authors:
+  - giesau
+  - martinschierle
+date: 2020-10-28
+tags:
+  - blog
+  - offline
+  - network
+  - service-worker
+  - metrics
+hero: image/admin/NvPzgpuXtjuz5oE54SWn.jpg
+alt: People on a subway.
+---
+
+This article shows you how to track offline usage of your site to help you make a case for why your
+site needs a better offline mode. It also explains pitfalls and problems to avoid when implementing
+offline usage analytics.
+
+## The pitfalls of the online and offline browser events
+
+The obvious solution for tracking offline usage is to create event listeners for the
+[`online`](https://developer.mozilla.org/docs/Web/API/Window/online_event) and
+[`offline`](https://developer.mozilla.org/docs/Web/API/Window/offline_event) events (which
+[many browsers support](https://caniuse.com/#feat=online-status)) and to put your analytics tracking
+logic in those listeners. Unfortunately, there are several problems and limitations with this
+approach:
+
++   In general tracking every network connection status event might be excessive, and is
+    counter-productive in a privacy-centric world where as little data as possible should be
+    collected. Additionally the `online` and `offline` events can fire for just a split second of
+    network loss, which a user probably wouldn't even see or notice.
++   The analytics tracking of offline activity would never reach the analytics server because
+    the user is… well, offline.
++   Tracking a timestamp locally when a user goes offline and sending the offline activity to
+    the analytics server when the user goes back online depends on the user revisiting your site.
+    If the user drops off your site due to a lack of an offline mode and never revisits, you have
+    no way to track that. The ability to track offline drop-offs is critical data for building a
+    case about why your site needs a better offline mode.
++   The `online` event is not very reliable as it
+    [only knows about network access](https://developer.mozilla.org/docs/Web/API/NavigatorOnLine/onLine),
+    not internet access. Therefore a user might still be offline, and sending the tracking ping can
+    still fail.
++   Even if the user still stays on the current page while being offline, none of the other
+    analytics events (e.g. scroll events, clicks, etc.) are tracked either, which might be the more
+    relevant and useful information.
++   Being offline in itself is also not too meaningful in general. As a website developer it may
+    be more important to know what kinds of resources failed to load. This is especially relevant
+    in the context of SPAs, where a dropped network connection might not lead to a browser offline
+    error page (which users understand) but more likely to random dynamic parts of the page failing
+    silently.
+
+You can still use this solution to gain a basic understanding of offline usage, but the many
+drawbacks and limitations need to be considered carefully.
+
+## A better approach: the service worker
+
+The solution that enables offline mode turns out to be the better solution for tracking offline
+usage.  The basic idea is to store analytics pings into IndexedDB as long as the user is offline,
+and just resend them when the user goes online again. For Google Analytics this is already available
+[off-the-shelf through a Workbox module](https://developer.chrome.com/docs/workbox/modules/workbox-google-analytics/),
+but keep in mind that hits sent more than
+[four hours deferred](https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#qt)
+may not be processed. In its simplest form, it can be activated within a Workbox-based service
+worker with these two lines:
+
+```js
+import * as googleAnalytics from 'workbox-google-analytics';
+
+googleAnalytics.initialize();
+```
+
+This tracks all existing events and pageview pings while being offline, but you wouldn't know that
+they happened offline (as they are just replayed as-is). For this
+[you can manipulate tracking requests with Workbox](https://developer.chrome.com/docs/workbox/modules/workbox-google-analytics/#using-a-custom-dimension-to-track-online-vs-offline-interactions)
+by adding an `offline` flag to the analytics ping, using a custom dimension (`cd1` in the code
+sample below):
+
+```js
+import * as googleAnalytics from 'workbox-google-analytics';
+
+googleAnalytics.initialize({
+  parameterOverrides: {
+    cd1: 'offline',
+  },
+});
+```
+
+What if the user drops out of the page due to being offline, before an internet connection comes
+back? Even though this normally puts the service worker to sleep (because it's unable to send the data
+when the connection comes back), the Workbox Google Analytics module uses the [Background Sync
+API](https://developer.chrome.com/blog/background-sync/), which sends the analytics
+data later when the connection comes back, even if the user closes the tab or browser.
+
+There is still a drawback: while this makes existing tracking offline-capable, you would most likely
+not see much relevant data coming in until you implement a basic offline mode. Users would still
+drop off your site quickly when the connection breaks away. But now you can at least measure and
+quantify this, by comparing average session length and user engagement for users with the offline
+dimension applied versus your regular users.
+
+## SPAs and lazy loading
+
+If users visiting a page built as a multi-page website go offline and try to navigate, the browser's
+default offline page shows up, helping users understand what is happening. However, pages built as
+single-page applications work differently. The user stays on the same page, and new content is
+loaded dynamically through AJAX without any browser navigation. Users do not see the browser error
+page when going offline. Instead, the dynamic parts of the page render with errors, go into
+undefined states, or just stop being dynamic.
+
+Similar effects can happen within multi-page websites due to lazy loading. For example, maybe the
+initial load happened online, but the user went offline before scrolling. All lazy loaded content
+below the fold will silently fail and be missing.
+
+As these cases are really irritating to users, it makes sense to track them. Service workers are the
+perfect spot to catch network errors, and eventually track them using analytics. With Workbox, a
+[global catch handler](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#comprehensive-fallbacks)
+can be configured to inform the page about failed requests by sending a message event:
+
+```js
+import { setCatchHandler } from 'workbox-routing';
+
+setCatchHandler(({ event }) => {
+  // https://developer.mozilla.org/docs/Web/API/Client/postMessage
+  event.waitUntil(async function () {
+    // Exit early if we don't have access to the client.
+    // Eg, if it's cross-origin.
+    if (!event.clientId) return;
+
+    // Get the client.
+    const client = await clients.get(event.clientId);
+    // Exit early if we don't get the client.
+    // Eg, if it closed.
+    if (!client) return;
+
+    // Send a message to the client.
+    client.postMessage({
+      action: "network_fail",
+      url: event.request.url,
+      destination: event.request.destination
+    });
+
+    return Response.error();
+
+  }());
+});
+```
+
+Rather than listening to all failed requests, another way is to catch errors on specific routes
+only. As an example, if we want to report errors happening on routes to `/products/*` only, we can
+add a check in `setCatchHandler` which filters the URI with a regular expression.
+A cleaner solution is to implement registerRoute with a custom handler. This encapsulates the
+business logic into a separate route, with better maintainability in more complex service workers:
+
+```js
+import { registerRoute } from 'workbox-routing';
+import { NetworkOnly } from 'workbox-strategies';
+
+const networkOnly = new NetworkOnly();
+registerRoute(
+  new RegExp('https:\/\/example\.com\/products\/.+'),
+  async (params) => {
+    try {
+      // Attempt a network request.
+      return await networkOnly.handle(params);
+    } catch (error) {
+      // If it fails, report the error.
+      const event = params.event;
+      if (!event.clientId) return;
+      const client = await clients.get(event.clientId);
+      if (!client) return;
+
+      client.postMessage({
+        action: "network_fail",
+        url: event.request.url,
+        destination: "products"
+      });
+
+      return Response.error();
+    }
+  }
+);
+```
+
+As a final step, the page needs to listen to the `message` event, and send out the analytics ping.
+Again, make sure to buffer analytics requests that happen offline within the service worker. As
+described before, initialize the `workbox-google-analytics` plugin for built-in Google Analytics
+support.
+
+The following example uses Google Analytics, but can be applied in the same way for other analytics
+vendors.
+
+```js
+if ("serviceWorker" in navigator) {
+  // ... SW registration here
+
+  // track offline error events
+  navigator.serviceWorker.addEventListener("message", event => {
+    if (gtag && event.data && event.data.action === "network_fail") {
+      gtag("event", "network_fail", {
+        event_category: event.data.destination,
+        // event_label: event.data.url,
+        // value: event.data.value
+      });
+    }
+  });
+}
+```
+
+This will track failed resource loads in Google Analytics, where they can be analyzed with
+[reporting](https://support.google.com/analytics/answer/1033068?hl=en). The derived insight can be
+used to improve service worker caching and error handling in general, to make the page more robust
+and reliable under unstable network conditions.
+
+## Next steps
+
+This article showed different ways of tracking offline usage with their advantages and shortcomings.
+While this can help to quantify how many of your users go offline and run into problems due to it,
+it's still just a start. As long as your website does not offer a well-built offline mode, you
+obviously won't see much offline usage in analytics.
+
+We recommend to get the full tracking in place, and then extend your offline capabilities in
+iterations with an eye on tracking numbers. Start with a simple offline error page first–with
+[Workbox it's trivial to
+do](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only)–and
+should be considered a UX best practice similar to custom 404 pages anyway. Then work your way
+[towards more advanced offline fallbacks](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#comprehensive-fallbacks)
+and finally towards real offline content. Make sure you advertise and explain this to your users
+well, and you will see increasing usage. After all, everyone goes offline every once in a while.
+
+Check out [How to report metrics and build a performance culture](/how-to-report-metrics/)
+and [Fixing website speed cross-functionally](/fixing-website-speed-cross-functionally/) for tips
+on persuading cross-functional stakeholders to invest more in your website. Although those posts
+are focused on performance, they should help you get general ideas about how to engage
+stakeholders.
+
+Hero photo by [JC Gellidon][hero] on [Unsplash][unsplash].
+
+[hero]: https://unsplash.com/@jcgellidon?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText
+[unsplash]: https://unsplash.com/s/photos/subway-people?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText
diff --git a/src/site/content/en/reliable/network-connections-unreliable/index.md b/src/site/content/en/reliable/network-connections-unreliable/index.md
index 16f0aae28ed..219f109734e 100644
--- a/src/site/content/en/reliable/network-connections-unreliable/index.md
+++ b/src/site/content/en/reliable/network-connections-unreliable/index.md
@@ -4,6 +4,7 @@ title: What is network reliability and how do you measure it?
 authors:
   - jeffposnick
 date: 2018-11-05
+updated: 2020-10-08
 description: |
   The modern web is enjoyed by a wide swath of people, using a range of
   different devices and types of network connections. Your creations can reach
@@ -22,8 +23,8 @@ reliability means.
 
 One way of thinking about reliability is whether your web app will work without
 a network connection. This is a type of reliability that users take for granted
-with "native apps," installed on a mobile device from an app store. When you see
-an icon for a native app, you expect to be able to tap on it and open up some
+with platform-specific apps installed on a mobile device from an app store. When you see
+an icon for one of these apps, you expect to be able to tap on it and open up some
 sort of experience, regardless of whether you're currently connected to the
 Internet.
 
@@ -37,8 +38,8 @@ web app loading at a fast enough speed when they have a network connection that
 might be less than ideal. Will returning users have the same experience
 interacting with your web app when they're on a cellular connection as they do
 when they're on wi-fi? And what about users who have a high-latency, or
-"[lie-fi](https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi)"
-connection—will your web app be reliably fast even in those scenarios?
+"[lie-fi](/performance-poor-connectivity/#what-is-lie-fi)"
+connection. Will your web app be reliably fast even in those scenarios?
 
 It's not enough to  be fast under the best circumstances. Your users will view
 your web app's performance through the lens of how it behaves in all network
@@ -46,13 +47,13 @@ conditions.
 
 ## Reliable is achievable
 
-The good news is that the modern web platform provides technologies—such as 
-[service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) and the
-[Cache Storage API](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage)—that
+The good news is that the modern web platform provides technologies—such as
+[service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and the
+[Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage)—that
 can serve as the building blocks for creating reliable web applications. They
 allow you to write code which sits between your web app and the network. In
 many cases, you can bypass the network entirely, and instead use previously
-cached content to fulfill your web app's requests. 
+cached content to fulfill your web app's requests.
 
 ## Your guiding light: Responds with a 200 OK while offline
 
@@ -62,12 +63,12 @@ service worker you implement really does help your web app avoid the network?
 How do you prevent a small change to your caching strategy from breaking your
 carefully crafted offline experience?
 
-[Lighthouse](https://developers.google.com/web/tools/lighthouse/) provides one
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) provides one
 specific test that is of particular interest when building a reliable web app:
 **Responds with a 200 OK while offline**:
 
-<figure class="w-figure">
-  <img class="w-screenshot" src="./responds-200-offline.png" alt="Lighthouse's progressive web app report showing a passing responds with a 200 when offline audit.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5bc5TNicZiBgDdWkgAXg.png", alt="Lighthouse's progressive web app report showing a passing responds with a 200 when offline audit.", width="800", height="253" %}
 </figure>
 
 {% Aside %}
@@ -91,5 +92,5 @@ techniques you need to identify what your web app is loading, and teach you how
 to use Lighthouse to make that loading experience reliable.
 
 Throughout this process, you're encouraged to keep re-running the Lighthouse
-audits. They serve as a guiding light throughout your journey, starting with a new 
+audits. They serve as a guiding light throughout your journey, starting with a new
 web application and ending with a reliable progressive web app.
diff --git a/src/site/content/en/reliable/network-connections-unreliable/responds-200-offline.png b/src/site/content/en/reliable/network-connections-unreliable/responds-200-offline.png
deleted file mode 100644
index 417d10df32f..00000000000
Binary files a/src/site/content/en/reliable/network-connections-unreliable/responds-200-offline.png and /dev/null differ
diff --git a/src/site/content/en/reliable/offline-cookbook/index.md b/src/site/content/en/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..3c9eec127c9
--- /dev/null
+++ b/src/site/content/en/reliable/offline-cookbook/index.md
@@ -0,0 +1,772 @@
+---
+layout: post
+title: The Offline Cookbook
+description: Some common recipes for making your app work offline.
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+With [Service Worker][sw_primer] we gave up trying to solve offline, and gave developers the moving
+parts to go solve it themselves. It gives you control over caching and how requests are handled.
+That means you get to create your own patterns. Let's take a look at a few possible patterns in
+isolation, but in practice you'll likely use many of them in tandem depending on URL and context.
+
+For a working demo of some of these patterns, see [Trained-to-thrill][ttt], and
+[this video](https://www.youtube.com/watch?v=px-J9Ghvcx4) showing the performance impact.
+
+## The cache machine—when to store resources
+
+[Service Worker][sw_primer] lets you handle requests independently from caching, so I'll demonstrate
+them separately. First up, caching, when should it be done?
+
+### On install—as a dependency {: #on-install-as-dependency }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="On install - as a dependency.", width="800", height="498" %}
+  <figcaption>On install - as a dependency.</figcaption>
+</figure>
+
+Service Worker gives you an `install` event. You can use this to get stuff ready, stuff that must be
+ready before you handle other events. While this happens any previous version of your Service Worker
+is still running and serving pages, so the things you do here mustn't disrupt that.
+
+**Ideal for:** CSS, images, fonts, JS, templates… basically anything you'd consider static to that
+"version" of your site.
+
+These are things that would make your site entirely non-functional if they failed to be fetched, things
+an equivalent platform-specific app would make part of the initial download.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil` takes a promise to define the length and success of the install. If the promise
+rejects, the installation is considered a failure and this Service Worker will be abandoned (if an
+older version is running, it'll be left intact). `caches.open()` and `cache.addAll()` return promises.
+If any of the resources fail to be fetched, the `cache.addAll()` call rejects.
+
+On [trained-to-thrill][ttt] I use this to
+[cache static assets](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3).
+
+### On install—not as a dependency {: #on-install-not }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="On install - not as a dependency.", width="800", height="500" %}
+  <figcaption>On install - not as a dependency.</figcaption>
+</figure>
+
+This is similar to above, but won't delay install completing and won't cause installation to fail if caching
+fails.
+
+**Ideal for:** bigger resources that aren't needed straight away, such as assets for later levels of
+a game.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+The above example does not pass the `cache.addAll` promise for levels 11–20 back to
+`event.waitUntil`, so even if it fails, the game will still be available offline. Of course, you'll
+have to cater for the possible absence of those levels and reattempt caching them if they're
+missing.
+
+The Service Worker may be killed while levels 11–20 download since it's finished handling events,
+meaning they won't be cached. In future the
+[Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API)
+will handle cases like this, and larger downloads such as movies. That API is currently only
+supported on Chromium forks.
+
+### On activate {: #on-activate }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="On activate.", width="800", height="500" %}
+  <figcaption>On activate.</figcaption>
+</figure>
+
+**Ideal for:** clean-up and migration.
+
+Once a new Service Worker has installed and a previous version isn't being used, the new one
+activates, and you get an `activate` event. Because the old version is out of the way, it's a good
+time to handle
+[schema migrations in IndexedDB](/indexeddb-best-practices/)
+and also delete unused caches.
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+During activation, other events such as `fetch` are put into a queue, so a long activation could
+potentially block page loads. Keep your activation as lean as possible, and only use it for things you
+_couldn't_ do while the old version was active.
+
+On [trained-to-thrill][ttt] I use this to
+[remove old caches](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17).
+
+### On user interaction {: #on-user-interaction }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="On user interaction.", width="800", height="222" %}
+  <figcaption>On user interaction.</figcaption>
+</figure>
+
+**Ideal for:** when the whole site can't be taken offline, and you chose to allow the user to select
+the content they want available offline. E.g. a video on something like YouTube, an article on
+Wikipedia, a particular gallery on Flickr.
+
+Give the user a "Read later" or "Save for offline" button. When it's clicked, fetch what you need
+from the network and pop it in the cache.
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+The [caches API][caches_api] is available from pages as well as service workers, meaning you
+can add to the cache directly from the page.
+
+### On network response {: #on-network-response }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="On network response.", width="800", height="390" %}
+  <figcaption>On network response.</figcaption>
+</figure>
+
+**Ideal for:** frequently updating resources such as a user's inbox, or article contents. Also
+useful for non-essential content such as avatars, but care is needed.
+
+If a request doesn't match anything in the cache, get it from the network, send it to the page, and
+add it to the cache at the same time.
+
+If you do this for a range of URLs, such as avatars, you'll need to be careful you don't bloat the
+storage of your origin. If the user needs to reclaim disk space you don't want to be the prime
+candidate. Make sure you get rid of items in the cache you don't need any more.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+To allow for efficient memory usage, you can only read a response/request's body once. The code
+above uses [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) to create additional
+copies that can be read separately.
+
+On [trained-to-thrill][ttt] I use this to
+[cache Flickr images](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109).
+
+### Stale-while-revalidate {: #stale-while-revalidate }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="Stale-while-revalidate.", width="800", height="388" %}
+  <figcaption>Stale-while-revalidate.</figcaption>
+</figure>
+
+**Ideal for:** frequently updating resources where having the very latest version is non-essential.
+Avatars can fall into this category.
+
+If there's a cached version available, use it, but fetch an update for next time.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+This is very similar to HTTP's [stale-while-revalidate](https://www.mnot.net/blog/2007/12/12/stale).
+
+### On push message {: #on-push-message }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="On push message.", width="800", height="498" %}
+  <figcaption>On push message.</figcaption>
+</figure>
+
+The [Push API](/push-notifications/) is another feature built on top of
+Service Worker. This allows the Service Worker to be awoken in response to a message from the OS's
+messaging service. This happens even when the user doesn't have a tab open to your site. Only the
+Service Worker is woken up. You request permission to do this from a page and the user will be
+prompted.
+
+**Ideal for:** content relating to a notification, such as a chat message, a breaking news story, or
+an email. Also infrequently changing content that benefits from immediate sync, such as a todo list
+update or a calendar alteration.
+
+{% YouTube '0i7YdSEQI1w' %}
+
+The common final outcome is a notification which, when tapped, opens/focuses a relevant page, but
+for which updating caches before this happens is _extremely_ important. The user is obviously online at the
+time of receiving the push message, but they may not be when they finally interact with the
+notification, so making this content available offline is important.
+
+This code updates caches before showing a notification:
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### On background-sync {: #on-background-sync }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="On background-sync.", width="800", height="219" %}
+  <figcaption>On background-sync.</figcaption>
+</figure>
+
+[Background sync](https://developer.chrome.com/blog/background-sync/) is another feature built on top of
+Service Worker. It allows you to request background data synchronization as a one-off, or on an
+(extremely heuristic) interval. This happens even when the user doesn't have a tab open to your
+site. Only the Service Worker is woken up. You request permission to do this from a page and the user
+will be prompted.
+
+**Ideal for:** non-urgent updates, especially those that happen so regularly that a push message per
+update would be too frequent for users, such as social timelines or news articles.
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## Cache persistence {: #cache-persistence }
+
+Your origin is given a certain amount of free space to do what it wants with. That free space is
+shared between all origin storage:
+[(local) Storage](https://developer.mozilla.org/docs/Web/API/Storage),
+[IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB),
+[File System Access](/file-system-access/), and of course
+[Caches](https://developer.mozilla.org/docs/Web/API/Cache).
+
+The amount you get isn't spec'd. It will differ depending on device and storage conditions. You can
+find out how much you've got via:
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+However, like all browser storage, the browser is free to throw away your data if the device comes
+under storage pressure. Unfortunately the browser can't tell the difference between those movies you
+want to keep at all costs, and the game you don't really care about.
+
+To work around this, use the
+[StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager) interface:
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+Of course, the user has to grant permission.  For this, use the Permissions API.
+
+Making the user part of this flow is important, as we
+can now expect them to be in control of deletion. If their device comes under storage pressure, and
+clearing non-essential data doesn't solve it, the user gets to judge which items to keep and
+remove.
+
+For this to work, it requires operating systems to treat "durable" origins as equivalent to platform-specific
+apps in their breakdowns of storage usage, rather than reporting the browser as a single item.
+
+## Serving Suggestions—responding to requests {: #serving-suggestions }
+
+It doesn't matter how much caching you do, the service worker won't use the cache unless you tell it
+when and how. Here are a few patterns for handling requests:
+
+### Cache only {: #cache-only }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="Cache only.", width="800", height="272" %}
+  <figcaption>Cache only.</figcaption>
+</figure>
+
+**Ideal for:** anything you'd consider static to a particular "version" of your site. You should
+have cached these in the install event, so you can depend on them being there.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+…although you don't often need to handle this case specifically,
+[Cache, falling back to network](#cache-falling-back-to-network) covers it.
+
+### Network only {: #network-only }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="Network only.", width="800", height="272" %}
+  <figcaption>Network only.</figcaption>
+</figure>
+
+**Ideal for:** things that have no offline equivalent, such as analytics pings, non-GET requests.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+…although you don't often need to handle this case specifically,
+[Cache, falling back to network](#cache-falling-back-to-network) covers it.
+
+### Cache, falling back to network {: #cache-falling-back-to-network }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="Cache, falling back to network.", width="800", height="395" %}
+  <figcaption>Cache, falling back to network.</figcaption>
+</figure>
+
+**Ideal for:** building offline-first. In such cases, this is how you'll handle the majority of
+requests. Other patterns will be exceptions based on the incoming request.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+This gives you the "cache only" behavior for things in the cache and the "network only" behavior
+for anything not-cached (which includes all non-GET requests, as they cannot be cached).
+
+### Cache and network race {: #cache-and-network-race }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="Cache and network race.", width="800", height="427" %}
+  <figcaption>Cache and network race.</figcaption>
+</figure>
+
+**Ideal for:** small assets where you're chasing performance on devices with slow disk access.
+
+With some combinations of older hard drives, virus scanners, and faster internet connections,
+getting resources from the network can be quicker than going to disk. However, going to the network
+when the user has the content on their device can be a waste of data, so bear that in mind.
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### Network falling back to cache {: #network-falling-back-to-cache }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="Network falling back to cache.", width="800", height="388" %}
+  <figcaption>Network falling back to cache.</figcaption>
+</figure>
+
+**Ideal for:** a quick-fix for resources that update frequently, outside of the "version" of the
+site. E.g. articles, avatars, social media timelines, and game leader boards.
+
+This means you give online users the most up-to-date content, but offline users get an older cached
+version. If the network request succeeds you'll most likely want to
+[update the cache entry](#on-network-response).
+
+However, this method has flaws. If the user has an intermittent or slow connection they'll have to
+wait for the network to fail before they get the perfectly acceptable content already on their
+device. This can take an extremely long time and is a frustrating user experience. See the next
+pattern, [Cache then network](#cache-then-network), for a better solution.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### Cache then network {: #cache-then-network }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="Cache then network.", width="800", height="478" %}
+  <figcaption>Cache then network.</figcaption>
+</figure>
+
+**Ideal for:** content that updates frequently. E.g. articles, social media timelines, and games.
+leaderboards.
+
+This requires the page to make two requests, one to the cache, and one to the network. The idea is to
+show the cached data first, then update the page when/if the network data arrives.
+
+Sometimes you can just replace the current data when new data arrives (e.g. game leaderboard), but
+that can be disruptive with larger pieces of content. Basically, don't "disappear" something the
+user may be reading or interacting with.
+
+Twitter adds the new content above the old content and adjusts the scroll position so the user is
+uninterrupted. This is possible because Twitter mostly retains a mostly-linear order to content. I
+copied this pattern for [trained-to-thrill][ttt] to get content on screen as fast as possible, while
+displaying up-to-date content as soon as it arrives.
+
+**Code in the page:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**Code in the Service Worker:**
+
+You should always go to the network and update a cache as you go.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+In [trained-to-thrill][ttt] I worked around this by using
+[XHR instead of fetch](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3),
+and abusing the Accept header to tell the Service Worker where to get the result from
+([page code](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70),
+[Service Worker code](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)).
+
+### Generic fallback {: #generic-fallback }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="Generic fallback.", width="800", height="389" %}
+  <figcaption>Generic fallback.</figcaption>
+</figure>
+
+If you fail to serve something from the cache and/or network you may want to provide a generic
+fallback.
+
+**Ideal for:** secondary imagery such as avatars, failed POST requests, and an "Unavailable while offline".
+page.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+The item you fallback to is likely to be an [install dependency](#on-install-as-dependency).
+
+If your page is posting an email, your service worker may fall back to storing the email in an IndexedDB
+'outbox' and respond by letting the page know that the send failed but the data was successfully
+retained.
+
+### Service worker-side templating {: #Service Worker-side-templating }
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="ServiceWorker-side templating.", width="800", height="463" %}
+  <figcaption>ServiceWorker-side templating.</figcaption>
+</figure>
+
+**Ideal for:** pages that cannot have their server response cached.
+
+[Rendering pages on the server makes things fast](https://jakearchibald.com/2013/progressive-enhancement-is-faster/),
+but that can mean including state data that may not make sense in a cache, e.g. "Logged in as…". If
+your page is controlled by a service worker, you may instead choose to request JSON data along with a
+template, and render that instead.
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## Putting it together
+
+You aren't limited to one of these methods. In fact, you'll likely use many of them depending on request
+URL. For example, [trained-to-thrill][ttt] uses:
+
+- [cache on install](#on-install-as-dependency), for the static UI and behavior
+- [cache on network response](#on-network-response), for the Flickr images and data
+- [fetch from cache, falling back to network](#cache-falling-back-to-network), for most requests
+- [fetch from cache, then network](#cache-then-network), for the Flickr search results
+
+Just look at the request and decide what to do:
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+…you get the picture.
+
+### Credits
+
+…for the lovely icons:
+
+- [Code](http://thenounproject.com/term/code/17547/) by buzzyrobot
+- [Calendar](http://thenounproject.com/term/calendar/4672/) by Scott Lewis
+- [Network by](http://thenounproject.com/term/network/12676/) Ben Rizzo
+- [SD](http://thenounproject.com/term/sd-card/6185/) by Thomas Le Bas
+- [CPU](http://thenounproject.com/term/cpu/72043/) by iconsmind.com
+- [Trash](http://thenounproject.com/term/trash/20538/) by trasnik
+- [Notification](http://thenounproject.com/term/notification/32514/) by @daosme
+- [Layout](http://thenounproject.com/term/layout/36872/) by Mister Pixel
+- [Cloud](http://thenounproject.com/term/cloud/2788/) by P.J. Onori
+
+And thanks to [Jeff Posnick](https://twitter.com/jeffposnick) for catching many howling errors
+before I hit "publish".
+
+### Further reading
+
+- [Service Workers—an Introduction][sw_primer]
+- [Is Service Worker ready?][is_sw_ready]—track the implementation status across the main browsers
+- [JavaScript Promises—an Introduction](/promises) - guide
+  to promises
+
+[ttt]: https://jakearchibald.github.io/trained-to-thrill/
+[is_sw_ready]: https://jakearchibald.github.io/isserviceworkerready/
+[sw_primer]: /service-workers-cache-storage/
+[caches_api]: https://developer.mozilla.org/docs/Web/API/Cache
diff --git a/src/site/content/en/reliable/offline-ux-design-guidelines/index.md b/src/site/content/en/reliable/offline-ux-design-guidelines/index.md
new file mode 100644
index 00000000000..47cb12b8a30
--- /dev/null
+++ b/src/site/content/en/reliable/offline-ux-design-guidelines/index.md
@@ -0,0 +1,420 @@
+---
+layout: post
+title: Offline UX design guidelines
+subhead: A guide to designing web experiences for slow networks and offline.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+date: 2016-11-10
+updated: 2022-06-13
+tags:
+  - progressive-web-apps
+  - ux
+  - network
+  - offline
+---
+
+This article provides design guidelines on how to create a great experience
+on both slow networks and offline.
+
+The quality of a network connection can be affected by a number of factors such as:
+
+- Poor coverage of a provider.
+- Extreme weather conditions.
+- Power outages.
+- Entering into permanent "dead zones" such as in buildings with walls that block network connections.
+- Entering into temporary "dead zones" such as when traveling on a train and going through a tunnel.
+- Time-boxed internet connections such as those in airports or hotels.
+- Cultural practices that require limited or no internet access at specific times or days.
+
+Your goal is to provide a good experience that lessens the impact of changes in connectivity.
+
+## Decide what to show your users when they have a bad network connection
+
+The first question that must be asked is what does success and failure of a network connection look
+like? A successful connection is your app's normal online experience. The failure of a connection,
+however, can be both the offline state of your app as well how the app behaves when there is a laggy
+network.
+
+When thinking about the success or failure of a network connection you need to ask yourself these
+important UX questions:
+
+- How long do you wait to determine the success or failure of a connection?
+- What can you do while success or failure is being determined?
+- What should you do in the event of failure?
+- How do you inform the user of the above?
+
+### Inform users of their current state and change of state
+
+Inform the user of both the actions they can still take when they have a network failure and the
+current state of the application. For example, a notification could say:
+
+> You seem to have a bad network connection. Not to worry! Messages will be sent when the
+> network is restored.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/roxoXuJ9x7qUHFVWMgXZ.png", alt="The Emojoy emoji messaging app informing the user when a change in state occurs.", width="335", height="601" %}
+  <figcaption>
+    Clearly inform the user when a change in state occurs as soon as possible.
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GvE07BeSsnTyxnRbkZhz.png", alt="The I/O 2016 app informing the user when a change in state occurs.", width="335", height="601" %}
+  <figcaption>
+    The Google I/O app used a "toast" to let the user know when they were offline.
+  </figcaption>
+</figure>
+
+### Inform users when the network connection improves or is restored
+
+How you inform the user that their network connection has improved depends
+on your application. Apps such as a stock market app that prioritize current information
+should auto-update and notify the user as soon as possible.
+
+It is recommended that you let the user know that your web app has been updated "in the background"
+by using a visual cue such as, for example, a material design toast element. This involves detecting both the
+the presence of a service worker and an update to its managed
+content. You can see a code example of this <a
+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function
+at work here</a>.
+
+One example of this would be [Chrome Platform Status](https://chromestatus.com)
+which posts a note to the user when the app has been updated.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ikam7evJEVSicAnVxvWA.png", alt="An example weather app.", width="324", height="598" %}
+  <figcaption>
+    Some apps, such as the weather app, need to auto-update because old data
+    is not useful.
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5TtIkRCPsuxAOajX8LPF.png", alt="Chrome Status uses a toast", width="336", height="598" %}
+  <figcaption>
+    Apps such as Chrome Status let the user know
+    when content has been updated via a toast.
+  </figcaption>
+</figure>
+
+You may also show the last time the app was updated at all times in a prominent space. This would
+be useful for a currency converter app, for example.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nK4V7aUvmLvaNJgF1S2I.png", alt="The Material Money app being out-of-date.", width="324", height="598" %}
+  <figcaption>
+    Material Money caches rates…
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wqaFuHzeAC2wR0D3pt7R.png", alt="Material money has been updated", width="324", height="598" %}
+  <figcaption>
+    …and notifies the user when the app has been updated.
+  </figcaption>
+</figure>
+
+Applications such as news apps could show a simple tap-to-update notification
+informing the user of new content. Auto-updating would cause users to lose
+their place.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="An example news app, Tailpiece in its normal state", width="360", height="665" %}
+  <figcaption>
+    Tailpiece, an online newspaper, will auto-download the latest news…
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WNIMNF14cSF29fntl1Lc.png", alt="Example news app, Tailpiece when its ready to be updated", width="360", height="665" %}
+  <figcaption>
+    …but allow users to refresh manually so they do not lose their place in an article.
+  </figcaption>
+</figure>
+
+### Update the UI to reflect the current contextual state
+
+Each bit of UI may have its own context and functionality that will change depending on if it
+requires a successful connection. One example would be an e&#8209;commerce site that can be browsed
+offline. The Buy button and pricing would be disabled until a connection is reestablished.
+
+Other forms of contextual states could include data. For example, the financial application
+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market
+is open. The whole interface turns white and then grays out when the market closes. When the value
+of stock increases or decreases, each individual stock widget turns green or red depending on its
+state.
+
+### Educate the user so they understand what the offline model is
+
+Offline is a new mental model for everyone. You need to educate your users about what changes will
+occur when they don't have a connection. Inform them of where large data is saved and give them
+settings to change the default behavior. Make sure you use multiple UI design components such as
+informative language, icons, notifications, color, and imagery to convey these ideas collectively
+rather than relying on a single design choice, such as an icon on its own, to tell the whole story.
+
+## Provide an offline experience by default
+
+If your app doesn't require much data, then cache that data by default. Users can become
+increasingly frustrated if they can only access their data with a network connection. Try to make
+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,
+where an app that lessens the impact of a network failure will feel magical to the user.
+
+News sites could benefit from auto-downloading and auto-saving the latest news so a
+user could read today's news without a connection, perhaps downloading the text without the article
+images. Also, adapt to the user's behavior. For example, if the sports section is what they typically view,
+make that the priority download.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M39yiHQYpXacVII6d7zX.png", alt="Tailpiece informs the user that they are offline with various design widgets.", width="360", height="665" %}
+  <figcaption>
+    If the device is offline, Tailpiece will notify the user with a status message…
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KpkzjYNoCWquWKXTvM28.png", alt="Tailpiece has a visual indicator that shows what sections are ready for offline use.", width="360", height="665" %}
+  <figcaption>
+    …letting them know that they can at least partially still use the app.
+  </figcaption>
+</figure>
+
+{% Aside %}
+  When it comes to communicating an app's status, saying "The network is down" sends the message
+  that the app's network is experiencing problems, whereas "You are disconnected" makes it clearer
+  to the user that the problem is on their end.
+{% endAside %}
+
+## Inform the user when the app is ready for offline consumption
+
+When a web app first loads you need to indicate to the user if it is ready for offline use. Do this
+with a
+[widget that provides brief feedback](https://material.io/components/snackbars)
+about an operation through a message at the bottom of the screen such as, for example, when a section has
+been synced or a data file has downloaded.
+
+Again think of the language you are using to make sure it is fit for your audience. Ensure the
+messaging is the same in all instances where it's used. The term offline is generally
+misunderstood by a non-technical audience so use action-based language that your audience can relate
+to.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fNOute6xBzFcDUNMeXDe.png", alt="I/O app offline.", width="360", height="664" %}
+  <figcaption>
+    The Google I/O 2016 app notified the user when
+    the app is ready for offline use…
+  </figcaption>
+</figure>
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Od6jUnazP8n7CMe18G2C.png", alt="Chrome Status site is offline.", width="360", height="664" %}
+  <figcaption>
+    …and so does the Chrome Platform Status site, which includes information about the occupied storage.
+  </figcaption>
+</figure>
+
+### Make 'save for offline' an obvious part of the interface for data-heavy apps
+
+If an application uses large amounts of data, make sure that there is a switch or pin to add an item
+for offline use rather than auto-downloading, unless a user has specifically asked for this behavior
+via a settings menu. Make sure that the pin or download UI is not obscured by other UI elements and
+that the feature is obvious to the user.
+
+One example would be a music player that requires large data files. The user is aware of the
+associated data cost, but may also want to use the player offline.
+Downloading music for later use requires the user to plan ahead, so education about this may be
+required during onboarding.
+
+### Clarify what is available offline
+
+Be clear as to the option you are providing. You may need to show a tab or setting that shows an
+"offline library" or [content index](/content-indexing-api/),
+so the user can easily see what they have stored on their phone and what needs to
+be saved. Make sure the settings are concise and be clear where the data will be stored and who has
+access to it.
+
+### Show the actual cost of an action
+
+Many users equate offline capability with 'downloading'. Users in countries where network
+connections regularly fail or aren't available often share content with other users, or save content
+for offline use when they have connectivity.
+
+Users on data plans may avoid downloading large files for fear of cost, so you may also want to
+display an associated cost so users can make an active comparison for a specific file or task. For
+example, if the music app above could detect if the user is on a data plan and show the file size so
+that users can see the cost of a file.
+
+### Help prevent hacked experiences
+
+Often users hack an experience without realizing they are doing it. For example before cloud-based
+file sharing web apps, it was common for users to save large files and attach them to emails so
+they could carry on editing from a different device. It is important not to be pulled into their
+hacked experience but rather look at what they are trying to achieve. In other words instead of
+thinking of how you can make attaching a large file more user-friendly, solve the problem of
+sharing large files across multiple devices.
+
+## Make experiences transferable from one device to another
+
+When building for flaky networks, try to sync as soon as the connection improves
+so that the experience is transferable. For example, imagine a travel app losing
+a network connection mid-way through a booking. When the connection is reestablished, the app syncs
+with the user's account allowing them to continue their booking on their desktop device. Not being
+able to transfer experiences can be incredibly jarring to users.
+
+Inform the user of the current state of their data. For example, you could show whether the
+app has synced. Educate them where possible but try not to overburden them with messaging.
+
+## Create inclusive design experiences
+
+When designing seek to be inclusive by providing meaningful design devices, simple language,
+standard iconography, and meaningful imagery that will guide the user to complete the action or task
+rather than hinder their progress.
+
+### Use simple, concise language
+
+Good UX is not just about a well designed interface. It includes the path a user takes as well as
+the words used in the app. Avoid tech jargon when explaining the state of the app or
+individual UI components. Consider that the phrase "app offline" might not convey to the user the
+current state of the app.
+
+<div class="switcher">
+{% Compare 'worse' %}
+  <figure style="display: inline-block; max-width: 45%;">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MaYiuInHsZ2mbPQcbD4l.png", alt="A service worker icon is a bad example.", width="350", height="149" %}
+    <figcaption>
+      Avoid terms that aren't intelligible to non-technical users.
+    </figcaption>
+  </figure>
+{% endCompare %}
+
+{% Compare 'better' %}
+  <figure style="display: inline-block; max-width: 45%;">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIjYKLFK5DbrDJDJeDqu.png", alt="A download icon is a good example.", width="350", height="149" %}
+    <figcaption>
+      Use language and imagery that describe the action.
+    </figcaption>
+  </figure>
+{% endCompare %}
+</div>
+
+### Use multiple design devices to create accessible user experiences
+
+Use language, color, and visual components to demonstrate a change of state or current status.
+Solely using color to demonstrate state may not be noticed by the user and may be inaccessible to
+users with visual disabilities. Also, the instinct for designers is to use grayed UI
+to represent offline, but this can have a loaded meaning on the web. Grayed UI such as input elements
+on a form also means that an element is disabled. This can cause confusion if you *only*
+use color to depict state.
+
+To prevent misunderstandings, express different states to the user in multiple ways, for example
+with color, labels, and UI components.
+
+<div class="switcher">
+{% Compare 'worse' %}
+  <figure style="display: inline-block; max-width: 45%;">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uj28SN1ZepiIvya4YTe1.png", alt="A bad example only using color.", width="720", height="368" %}
+    <figcaption>
+      Avoid using color as the sole means to describe what is happening.
+    </figcaption>
+  </figure>
+{% endCompare %}
+
+{% Compare 'better' %}
+  <figure style="display: inline-block; max-width: 45%;">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/s78eC2GBEkDQouqhBYMO.png", alt="A good example that uses color and text to show an error.", width="720", height="368" %}
+    <figcaption>
+      Use a mixture of design elements to convey meaning.
+    </figcaption>
+  </figure>
+{% endCompare %}
+</div>
+
+### Use icons that convey meaning
+
+Make sure that information is conveyed correctly with meaningful text labels as well as icons. Icons
+alone can be problematic, since the concept of offline on the web is relatively new. Users may
+misunderstand icons used on their own. For example, using a floppy disc for save makes sense to an
+older generation but young users who have never seen a floppy disc may be confused by the metaphor.
+Likewise, the 'hamburger' menu icon has been known to confuse users when presented without a label.
+
+When introducing an offline icon try to remain consistent with industry standard visuals (when they
+exist) as well as providing a text label and description. For example, saving for offline might be
+a typical download icon or perhaps if the action involves syncing it could be a syncing icon. Some
+actions may be interpreted as saving for offline rather than demonstrating a network's status. Think
+of the action you are trying to convey rather than presenting the user with an abstract concept. For
+example, save or download data would be action-based.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/h2FFD3nLIOdSzWg5H5kO.png", alt="Various icon examples that convey offline", width="700", height="299" %}
+
+Offline can mean a number of things depending on the context, such as download, export, pin, etc.
+For more inspiration checkout the
+[Material Design icon set](https://material.io/resources/icons/).
+
+### Use skeleton layouts with other feedback mechanisms
+
+A skeleton layout is essentially a wireframe version of your app that displays while content is
+being loaded. This helps demonstrate to the user that content is about to be loaded. Consider also
+using a preloader UI as well, with a text label informing the user that the app is loading. One
+example would be to pulsate the wireframe content giving the app the feeling that it is alive and
+loading. This reassures the user that something is happening and helps prevent resubmissions or
+refreshes of your app.
+
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUIrcbblhHe5YPSrrwRy.png", alt="A skeleton layout example.", width="360", height="665" %}
+  <figcaption>
+    A skeleton placeholder layout is shown during the download of the article…
+  </figcaption>
+</figure>
+<figure style="display: inline-block; max-width: 45%;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="A loaded article example.", width="360", height="665" %}
+  <figcaption>
+    …that gets replaced with the real contents once the download finishes.
+  </figcaption>
+</figure>
+
+### Don't block content
+
+In some applications, a user might trigger an action such as creating a new document. Some apps will
+try to connect to a server in order to sync the new document and to demonstrate this they display an
+intrusive loading modal dialog that covers the entire screen. This may work fine if the user has a
+stable network connection, but if the network is unstable they won't be able to escape from this
+action and the UI effectively blocks them from doing anything else. Network requests that block
+content should be avoided. Allow the user to continue to browse your app and queue tasks that will
+be performed and synced once the connection has improved.
+
+Demonstrate the state of an action by providing your users with feedback. For example, if a user is
+editing a doc, consider changing the feedback design so it is visibly different from when they are
+online but still shows that their file was "saved" and will sync when they have a network
+connection. This will educate the user about the different states available and reassure them that
+their task or action has been stored. This has the added benefit of the user growing more confident
+using your application.
+
+## Design for the next billion
+
+In many regions, low-end devices are commonplace, connectivity is unreliable and, for many users,
+data is unaffordable. You will need to earn user trust by being transparent and frugal with data.
+Think about ways to help users on poor connections and simplify the interface to help speed up
+tasks. Always try to ask users before downloading data-heavy content.
+
+Offer low bandwidth options for users on laggy connections. So if the network connection is slow,
+provide small assets. Offer an option to choose high or low quality assets.
+
+## Conclusion
+
+Education is key to offline UX as users are unfamiliar with these concepts. Try to create associations
+with things that are familiar, e.g downloading for later use is the same as offlining data.
+
+When designing for unstable network connections, remember these guidelines:
+
+- Design for the success, failure, and instability of a network connection.
+- Data may be expensive, so be considerate to the user.
+- For most users globally, the tech environment is almost exclusively mobile.
+- Low-end devices are commonplace, with limited storage, memory, and processing power, and small
+  displays and lower touchscreen quality. Make sure performance is a part of your design process.
+- Allow users to browse your application when they are offline.
+- Inform users of their current state and of changes in states.
+- Try to provide offline by default if your app doesn't require much data.
+- If the app is data-heavy, educate users about how they can download for offline use.
+- Make experiences transferable between devices.
+- Use language, icons, imagery, typography, and color together to express ideas to the user.
+- Provide reassurance and feedback to help the user.
diff --git a/src/site/content/en/reliable/precache-with-workbox/index.md b/src/site/content/en/reliable/precache-with-workbox/index.md
index 5e5c542fb37..2735e1fdacc 100644
--- a/src/site/content/en/reliable/precache-with-workbox/index.md
+++ b/src/site/content/en/reliable/precache-with-workbox/index.md
@@ -9,6 +9,8 @@ description: |
   the service worker is installing. Precaching makes it possible to serve cached
   files to the browser without going to the network. Use precaching with Workbox
   for critical assets that your site needs even when offline.
+feedback:
+  - api
 ---
 
 One feature of service workers is the ability to save files to the cache when
@@ -20,7 +22,7 @@ when offline: main page, styles, fallback image and essential scripts.
 ## Why should you use Workbox?
 
 Using Workbox for precaching is optional. You can write your own code to
-[precache critical assets when the service worker is installing](https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker).
+[precache critical assets when the service worker is installing](/learn/pwa/caching/).
 The primary benefit of using Workbox is its out-of-the-box version control.
 You'll run into a lot less trouble updating precached assets using Workbox than
 if you had to manage the versioning and updating of these files on your own.
@@ -29,10 +31,10 @@ if you had to manage the versioning and updating of these files on your own.
 
 Precaching is driven by a list of URLs and associated versioning information for
 each URL. Taken together, this information is known as a
-[**precache manifest**](https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list).
+[**precache manifest**](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/#explanation-of-the-precache-list).
 The manifest is the "source of truth" for the state of everything meant to be in
 the precache for a given version of a web app. A precache manifest, in the
-format used by [Workbox](https://developers.google.com/web/tools/workbox/),
+format used by [Workbox](https://developer.chrome.com/docs/workbox/),
 looks something like:
 
 ```js
@@ -64,7 +66,7 @@ assets are cached, they need to respond to outgoing requests. That requires a
 been precached, and return those cached responses reliably, bypassing the
 network in the process. Since the service worker checks the cache for responses
 (and uses those before the network), this is called a
-[**cache-first strategy**](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_first_cache_falling_back_to_network).
+[**cache-first strategy**](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network).
 
 ## Efficient updates
 
@@ -73,7 +75,7 @@ state; if a URL/revision combination in the manifest changes, a service worker
 _knows_ that the previous cached entry is no longer valid, and needs to be
 updated. It only takes a single network request, made automatically by the
 browser as part of the service worker
-[update check](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#updates),
+[update check](/service-worker-lifecycle/#updates),
 to determine which precached URLs need to be refreshed.
 
 ## Updates to precached resources
@@ -87,9 +89,9 @@ precache state at any point in time.
 If there's an existing URL with a new revision field, or if any URLs have been
 added or dropped from the manifest, that's a sign to your service worker that
 updates need to be performed, as part of the
-[`install`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#install_1)
+[`install`](/service-worker-lifecycle/#install)
 and
-[`activate`](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#activate_1)
+[`activate`](/service-worker-lifecycle/#activate)
 event handlers. For instance, if you've made some changes to your site and
 rebuilt, your latest precache manifest might have undergone the following
 changes:
@@ -114,13 +116,13 @@ that are no longer used (`'app.abcd1234.js'`).
 ## True "app store" install experience
 
 Another benefit of precaching is that you can give your users an experience that
-would otherwise be difficult to achieve outside of a native "app store"
+would otherwise be difficult to achieve outside of an "app store"
 installation. Once a user visits any page on your web app for the first time,
 you can potentially precache _all_ of the URLs needed to display _any_ of your
 web app's views ahead of time, without having to wait until they visit each
 individual view.
 
-When a user installs a native app, they expect every part to display quickly,
+When a user installs an app, they expect every part to display quickly,
 not just the views that they've gone to in the past. Precaching brings that same
 experience to web apps.
 
@@ -138,7 +140,7 @@ caching strategy](/runtime-caching-with-workbox/) to ensure these
 assets are cached-as-you-go.
 
 Always keep in mind that precaching involves using network bandwidth and storage
-on a user's device (just like installing a native app from an app store does).
+on a user's device (just like installing an app from an app store does).
 It's up to you as the developer to precache judiciously, and avoid a bloated
 precache manifest.
 
diff --git a/src/site/content/en/reliable/resilient-search-experiences/index.md b/src/site/content/en/reliable/resilient-search-experiences/index.md
index 0c722286fbb..0e0d4630ae0 100644
--- a/src/site/content/en/reliable/resilient-search-experiences/index.md
+++ b/src/site/content/en/reliable/resilient-search-experiences/index.md
@@ -8,6 +8,7 @@ authors:
   - demianrenzulli
   - jeffposnick
 date: 2020-06-23
+updated: 2020-08-20
 description: |
   Even in locations with fast networks a user might lose connection or connect to a flaky network, at some moments of the day.
   Use the  Background Sync API and Web Push Notifications to provide a resilient search experience in these cases.
@@ -21,12 +22,14 @@ codelabs:
   - codelab-building-resilient-search-experiences
 ---
 
+{% YouTube id='fhqCwDP69PI', startTime='35' %}
+
 Even in locations with fast networks a user might lose connection or connect to a flaky network, at some moments of the day.
-For example: a user is on the subway searching on the phone for a product on an e-commerce website. She types the product name, clicks the "search" button, and while waiting for the results, the connection is lost, leading to the standard browser offline page.
+For example: a user is on the subway searching on the phone for a product on an e-commerce website. They type the product name, click the "search" button, and while waiting for the results, the connection is lost, leading to the standard browser offline page.
 
 As a result, unless the user decides to come back to the site later, and repeat the same task, the site might lose a potential transaction and customer.
 
-To provide a more resilient search experience in these cases you can use the [Background Sync API](https://developers.google.com/web/updates/2015/12/background-sync), which persists failed queries so they can be retried once the connection is recovered. This technique, in combination with [Web Push Notifications](https://developers.google.com/web/fundamentals/push-notifications) lets you inform the user of the search results, allowing you to keep them engaged with your service.
+To provide a more resilient search experience in these cases you can use the [Background Sync API](https://developer.chrome.com/blog/background-sync/), which persists failed queries so they can be retried once the connection is recovered. This technique, in combination with [Web Push Notifications](/push-notifications/) lets you inform the user of the search results, allowing you to keep them engaged with your service.
 
 {% Aside 'codelab' %}
   Try the [Building resilient search experiences with Workbox](/codelab-building-resilient-search-experiences)
@@ -35,36 +38,35 @@ To provide a more resilient search experience in these cases you can use the [Ba
 
 ## Production case
 
-For concrete application of this technique let's take a look at Google Search for Chrome in Android. 
+For concrete application of this technique let's take a look at Google Search for Chrome in Android.
 When visiting the Google Search web app and going offline, instead of showing the standard network error page, the site serves a custom offline response, but allows users to enter their search query immediately.
 The page also prompts the user to opt-in for notifications, to receive a link to the search results page once the connection is recovered.
 
-<figure class="w-figure">
-  <img src="search-offline-screen.png" 
-       alt="A screenshot of the background retry interface in Google Search.">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqDtqgbKOsxRFnr2lNSy.png", alt="A screenshot of the background retry interface in Google Search.", width="257", height="475" %}
 </figure>
 
-When the user performs a search, the service worker allows the query to be deferred and sent to Google's servers as soon as the device goes back online by using the [Background Sync API](https://developers.google.com/web/updates/2015/12/background-sync), and to inform the user of the result by using the [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API).
+When the user performs a search, the service worker allows the query to be deferred and sent to Google's servers as soon as the device goes back online by using the [Background Sync API](https://developer.chrome.com/blog/background-sync/), and to inform the user of the result by using the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API).
 
-![A screenshot of the offline flow in Google Search.](search-offline-flow.png)
+{% Img src="image/admin/ZZItVQMLUPmVbwJlfDck.png", alt="A screenshot of the offline flow in Google Search.", width="800", height="436" %}
 
-Service workers allow Google Search to provide a [meaningful offline experience](https://web.dev/google-search-sw/#meaningful-offline-experience) and keep the user engaged, letting them complete their task.
+Service workers allow Google Search to provide a [meaningful offline experience](/google-search-sw/#meaningful-offline-experience) and keep the user engaged, letting them complete their task.
 
 ## Implement resilient search experiences with Workbox
 
-While Google Search implements this functionality without using Workbox, the [Workbox library](https://developers.google.com/web/tools/workbox) makes it easier by providing a [Background Sync module](https://developers.google.com/web/tools/workbox/modules/workbox-background-sync), which takes care of many implementation details for us.
+While Google Search implements this functionality without using Workbox, the [Workbox library](https://developer.chrome.com/docs/workbox/) makes it easier by providing a [Background Sync module](https://developer.chrome.com/docs/workbox/modules/workbox-background-sync/), which takes care of many implementation details for us.
 
-![A service worker and a cache object communicating wiith each other.](workbox-background-sync.png)
+{% Img src="image/admin/X06meG8U60SABUabxwHb.png", alt="A service worker and a cache object communicating with each other.", width="800", height="383" %}
 
 To implement a resilient search experience in Workbox, first, import the following modules in your service worker:
 
 ```javascript
-import {BackgroundSyncPlugin} from 'workbox-background-sync'; 
-import {registerRoute} from 'workbox-routing'; 
+import {BackgroundSyncPlugin} from 'workbox-background-sync';
+import {registerRoute} from 'workbox-routing';
 import {NetworkOnly} from 'workbox-strategies';
 ```
 
-Next, create an instance of the [workbox.backgroundSync plugin](https://developers.google.com/web/tools/workbox/reference-docs/v4/workbox.backgroundSync.Plugin), to automatically add failed requests to a queue, so they can be retried later:
+Next, create an instance of the [workbox.backgroundSync plugin](https://developer.chrome.com/docs/workbox/reference/workbox-background-sync/#type-BackgroundSyncPlugin), to automatically add failed requests to a queue, so they can be retried later:
 
 ```javascript
 const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
@@ -89,11 +91,11 @@ const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
 
 The plugin receives the following parameters:
 
-- `offlineQueryQueue`: The name of the queue that will be used to persist the failed requests in [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).
+- `offlineQueryQueue`: The name of the queue that will be used to persist the failed requests in [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API).
 - `maxRetentionTime`: The amount of time in minutes a request may be retried, after which point they will be discarded.
 - `onSync`: The callback that will be triggered when the connection is recovered. At that point, each failed request can be dequeued and processed, by calling `queue.shiftRequest()`.
 
-Finally, define a [networkOnly](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_only) runtime caching strategy for requests to the search URL (e.g. `/search_action`) and pass it the `bgSyncPlugin` defined previously:
+Finally, define a [networkOnly](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#network-only) runtime caching strategy for requests to the search URL (e.g. `/search_action`) and pass it the `bgSyncPlugin` defined previously:
 
 ```javascript
 workbox.routing.registerRoute(
@@ -110,7 +112,7 @@ As a result, when the user goes offline while searching, the query is automatica
 
 ## Conclusion
 
-In this article you learned how to implement a search experience capable of responding gracefully to offline scenarios, by combining the [Background Sync API](https://developers.google.com/web/updates/2015/12/background-sync) and the [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API).
+In this article you learned how to implement a search experience capable of responding gracefully to offline scenarios, by combining the [Background Sync API](https://developer.chrome.com/blog/background-sync/) and the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API).
 We used Workbox to show how to implement this feature, as it simplifies the process, but the same can be achieved by writing vanilla service worker code.
 
 In the code samples we focused on the core part of the feature: how requests are intercepted and managed by the service worker. For a step-by-step guide on how to implement this functionality, including the offline page and the notification logic, check out the codelab at the end of this article.
diff --git a/src/site/content/en/reliable/resilient-search-experiences/search-offline-flow.png b/src/site/content/en/reliable/resilient-search-experiences/search-offline-flow.png
deleted file mode 100644
index f39bbe677ae..00000000000
Binary files a/src/site/content/en/reliable/resilient-search-experiences/search-offline-flow.png and /dev/null differ
diff --git a/src/site/content/en/reliable/resilient-search-experiences/search-offline-screen.png b/src/site/content/en/reliable/resilient-search-experiences/search-offline-screen.png
deleted file mode 100644
index 32a9d2c02e9..00000000000
Binary files a/src/site/content/en/reliable/resilient-search-experiences/search-offline-screen.png and /dev/null differ
diff --git a/src/site/content/en/reliable/resilient-search-experiences/workbox-background-sync.png b/src/site/content/en/reliable/resilient-search-experiences/workbox-background-sync.png
deleted file mode 100644
index c9a1eb289d4..00000000000
Binary files a/src/site/content/en/reliable/resilient-search-experiences/workbox-background-sync.png and /dev/null differ
diff --git a/src/site/content/en/reliable/runtime-caching-with-workbox/cache-first.png b/src/site/content/en/reliable/runtime-caching-with-workbox/cache-first.png
deleted file mode 100755
index c10d7fd534d..00000000000
Binary files a/src/site/content/en/reliable/runtime-caching-with-workbox/cache-first.png and /dev/null differ
diff --git a/src/site/content/en/reliable/runtime-caching-with-workbox/index.md b/src/site/content/en/reliable/runtime-caching-with-workbox/index.md
index bf6159a8153..dd60e37d473 100644
--- a/src/site/content/en/reliable/runtime-caching-with-workbox/index.md
+++ b/src/site/content/en/reliable/runtime-caching-with-workbox/index.md
@@ -9,6 +9,8 @@ description: |
   While runtime caching doesn't help with the reliability of the current
   request, runtime caching with Workbox can help make future requests for the
   same URL more reliable.
+feedback:
+  - api
 ---
 
 Runtime caching refers to gradually adding responses to a cache "as you go".
@@ -38,10 +40,10 @@ your web app, and a copy of the response is stored using the Cache Storage
 API—either creating a new entry, or updating a previous entry for the same
 URL.
 
-![Diagram showing the request going from the page to the service worker and from the servic worker to the network. The network request fails so the request goes to the cache.](network-first.png)
+{% Img src="image/admin/AyTKqrG1aBH2JOkz3LzL.png", alt="Diagram showing the request going from the page to the service worker and from the service worker to the network. The network request fails so the request goes to the cache.", width="800", height="388" %}
 
 If the network request fails entirely, or
-[takes too long](https://developers.google.com/web/tools/workbox/guides/common-recipes#force_a_timeout_on_network_requests)
+[takes too long](https://developer.chrome.com/docs/workbox/forcing-a-network-timeout/)
 to return a response, then the most recent response from the cache is returned
 instead.
 
@@ -58,7 +60,7 @@ successful, it's returned to your web app and a copy is saved in a cache. This
 cached copy will be used to bypass the network the next time a request for the
 same URLs is made.
 
-![Diagram showing the request going from the page to the service worker and from the servic worker to the cache. The cache request fails so the request goes to the network.](./cache-first.png)
+{% Img src="image/admin/HR4BhK1uWqjve9bC5h6u.png", alt="Diagram showing the request going from the page to the service worker and from the service worker to the cache. The cache request fails so the request goes to the network.", width="800", height="395" %}
 
 ### Stale-while-revalidate
 
@@ -72,20 +74,20 @@ response is used to update any previously cached response. If the initial cache
 check was a miss, a copy of the network response is also passed back to your web
 app.
 
-![Diagram showing the request going from the page to the service worker and from the servic worker to the cache. The cache immediately returns a response while also fetching an update from the network for future requests.](stale-while-revalidate.png)
+{% Img src="image/admin/lPpEfVFxdd9qGqLIx1gy.png", alt="Diagram showing the request going from the page to the service worker and from the service worker to the cache. The cache immediately returns a response while also fetching an update from the network for future requests.", width="800", height="388" %}
 
 ### Why should you use Workbox?
 
 These caching strategies amount to recipes that you would normally have to
 rewrite in your own service worker, again and again. Instead of resorting to
 that, Workbox offers them packaged up as part of its
-[strategies library](https://developers.google.com/web/tools/workbox/modules/workbox-strategies),
+[strategies library](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/),
 ready for you to drop in to your service worker.
 
 Workbox also provides versioning support, allowing you to automatically
-[expire](https://developers.google.com/web/tools/workbox/modules/workbox-cache-expiration)
+[expire](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/)
 cached entries, or notify your web app when
-[updates](https://developers.google.com/web/tools/workbox/modules/workbox-broadcast-cache-update)
+[updates](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)
 to a previously cached entry occur.
 
 ## Which of your assets should be cached, with which strategies?
diff --git a/src/site/content/en/reliable/runtime-caching-with-workbox/network-first.png b/src/site/content/en/reliable/runtime-caching-with-workbox/network-first.png
deleted file mode 100755
index 8b191f16349..00000000000
Binary files a/src/site/content/en/reliable/runtime-caching-with-workbox/network-first.png and /dev/null differ
diff --git a/src/site/content/en/reliable/runtime-caching-with-workbox/stale-while-revalidate.png b/src/site/content/en/reliable/runtime-caching-with-workbox/stale-while-revalidate.png
deleted file mode 100755
index f259a96d83e..00000000000
Binary files a/src/site/content/en/reliable/runtime-caching-with-workbox/stale-while-revalidate.png and /dev/null differ
diff --git a/src/site/content/en/reliable/service-worker-caching-and-http-caching/caching-flow.png b/src/site/content/en/reliable/service-worker-caching-and-http-caching/caching-flow.png
deleted file mode 100644
index 69fec873363..00000000000
Binary files a/src/site/content/en/reliable/service-worker-caching-and-http-caching/caching-flow.png and /dev/null differ
diff --git a/src/site/content/en/reliable/service-worker-caching-and-http-caching/index.md b/src/site/content/en/reliable/service-worker-caching-and-http-caching/index.md
index 96292b2926b..67c4379a079 100644
--- a/src/site/content/en/reliable/service-worker-caching-and-http-caching/index.md
+++ b/src/site/content/en/reliable/service-worker-caching-and-http-caching/index.md
@@ -33,15 +33,15 @@ At a high-level, a browser follows the caching order below when it requests a re
     decides whether to return the resource itself based on its programmed caching strategies. Note
     that this does not happen automatically. You need to create a fetch event handler in your
     service worker and intercept network requests so that the requests are served from the service
-    worker's cache rather than the network. 
+    worker's cache rather than the network.
 1.  **HTTP cache (also known as the browser cache)**: If the resource is found in the [HTTP
     Cache](/http-cache) and has not yet expired, the browser automatically uses the
     resource from the  HTTP cache.
 1.  **Server-side:** If nothing is found in the service worker cache or the HTTP cache, the
     browser goes to the network to request the resource. If the resource isn't cached in a CDN, the
-    request must go all the way back to the origin server. 
+    request must go all the way back to the origin server.
 
-![Caching flow](caching-flow.png)
+{% Img src="image/admin/vtKWC9Bg9dAMzoFKTeAM.png", alt="Caching flow", width="800", height="585" %}
 
 {% Aside %}Note that some browsers like Chrome have a **memory cache** layer in front of the service
 worker cache. The details of the memory cache depend on each browser's implementation.
@@ -52,7 +52,7 @@ Unfortunately, there is no clear specification for this part yet.{% endAside %}
 ### Service worker caching
 
 A service worker intercepts network-type HTTP requests and uses a
-[caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#serving-suggestions)
+[caching strategy](/offline-cookbook/#serving-suggestions)
 to determine what resources should be returned to the browser. The service worker cache and the HTTP
 cache serve the same general purpose, but the service worker cache offers more caching capabilities,
 such as fine-grained control over exactly what is cached and how caching is done.
@@ -62,14 +62,14 @@ such as fine-grained control over exactly what is cached and how caching is done
 A service worker intercepts HTTP requests with [event
 listeners](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) (usually the `fetch` event). This
 [code snippet](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) demonstrates the logic of a
-[Cache-First](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_first_cache_falling_back_to_network)
-caching strategy. 
+[Cache-First](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network)
+caching strategy.
 
-![A diagram showing how service workers intercept HTTP requests](workbox.png)
+{% Img src="image/admin/INLfnhEpmL4KpMmFXnTL.png", alt="A diagram showing how service workers intercept HTTP requests", width="800", height="516" %}
 
-It's highly recommended to use [Workbox](https://developers.google.com/web/tools/workbox) to avoid
+It's highly recommended to use [Workbox](https://developer.chrome.com/docs/workbox/) to avoid
 reinventing the wheel. For example, you can
-[register resource URL paths with a single line of regex code](https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_regular_expression_route).
+[register resource URL paths with a single line of regex code](https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-regular-expression-route).
 
 ```js
 import {registerRoute} from 'workbox-routing';
@@ -154,7 +154,7 @@ In addition to fine-grained control of caching logic, service worker caching als
     example, a user may purge the cache by manually cleaning up from a browser's settings UI, or
     triggering a hard-reload on a page. With a service worker cache you have a much higher
     likelihood that your cached content stays cached. See [Persistent
-    storage](https://developers.google.com/web/updates/2016/06/persistent-storage) to learn more.
+    storage](/persistent-storage/) to learn more.
 +   **Higher flexibility with flaky networks or offline experiences:** With the HTTP cache you
     only have a binary choice: either the resource is cached, or not. With service worker caching
     you can mitigate little "hiccups" much easier (with the "stale-while-revalidate" strategy),
@@ -166,7 +166,7 @@ In addition to fine-grained control of caching logic, service worker caching als
 
 The first time a browser loads a web page and related resources, it stores these resources in its
 HTTP cache. The HTTP cache is usually enabled automatically by browsers, unless it has been
-explicitly disabled by the end user. 
+explicitly disabled by the end user.
 
 Using HTTP caching means relying on the server to determine when to cache a resource and for how
 long.
@@ -237,7 +237,7 @@ short-term.
 #### Scenario: Long-term caching (Cache, falling back to network)
 
 +   When a cached resource is valid (<= 30 days): The service worker returns the cached
-    resource immediately without going to the network. 
+    resource immediately without going to the network.
 +   When a cached resource is expired (> 30 days): The service worker goes to the network to
     fetch the resource. The browser doesn't have a copy of the resource in its HTTP cache, so it
     goes server-side for the resource.
@@ -275,7 +275,7 @@ server-side.
 In all scenarios, the service worker cache can still return cached resources when the network is
 unstable. On the other hand, the HTTP cache is not reliable when the network is unstable or down.
 
-### Different cache expiry logic at the service worker cache and HTTP layers 
+### Different cache expiry logic at the service worker cache and HTTP layers
 
 To demonstrate the pros and cons, we'll again look at long-term, medium-term, and short-term
 scenarios.
@@ -379,5 +379,5 @@ suggestions to look at when designing your cache strategies:
 +   [Network reliability](/reliable/)
 +   [Prevent unnecessary network requests with the HTTP Cache](/http-cache)
 +   [HTTP cache codelab](/codelab-http-cache/)
-+   [Measuring the real-world performance impact of service workers](https://developers.google.com/web/showcase/2016/service-worker-perf)
-+   [Cache-Control vs. Expires](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
\ No newline at end of file
++   [Measuring the real-world performance impact of service workers](/service-worker-perf/)
++   [Cache-Control vs. Expires](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
diff --git a/src/site/content/en/reliable/service-worker-caching-and-http-caching/workbox.png b/src/site/content/en/reliable/service-worker-caching-and-http-caching/workbox.png
deleted file mode 100644
index f465582ba74..00000000000
Binary files a/src/site/content/en/reliable/service-worker-caching-and-http-caching/workbox.png and /dev/null differ
diff --git a/src/site/content/en/reliable/service-worker-lifecycle/index.md b/src/site/content/en/reliable/service-worker-lifecycle/index.md
new file mode 100644
index 00000000000..d106688c054
--- /dev/null
+++ b/src/site/content/en/reliable/service-worker-lifecycle/index.md
@@ -0,0 +1,376 @@
+---
+layout: post
+title: The service worker lifecycle
+authors:
+  - jakearchibald
+date: 2016-09-29
+updated: 2018-12-05
+description: |
+   A deep-dive into the service worker lifecycle.
+tags:
+  - javascript
+  - install
+  - offline
+  - progressive-web-apps
+  - service-worker
+---
+
+The lifecycle of the service worker is its most complicated part. If you don't know what it's trying to do and what the benefits are, it can feel like it's fighting you. But once you know how it works, you can deliver seamless, unobtrusive updates to users, mixing the best of web and native patterns.
+
+This is a deep dive, but the bullets at the start of each section cover most of what you need to know.
+
+## The intent
+
+The intent of the lifecycle is to:
+
+* Make offline-first possible.
+* Allow a new service worker to get itself ready without disrupting the current one.
+* Ensure an in-scope page is controlled by the same service worker (or no service worker) throughout.
+* Ensure there's only one version of your site running at once.
+
+That last one is pretty important. Without service workers, users can load one tab to your site, then later open another. This can result in two versions of your site running at the same time. Sometimes this is ok, but if you're dealing with storage you can easily end up with two tabs having very different opinions on how their shared storage should be managed. This can result in errors, or worse, data loss.
+
+{% Aside 'caution' %}
+Users actively dislike data loss. It causes them great sadness.
+{% endAside %}
+
+## The first service worker
+
+In brief:
+
+* The `install` event is the first event a service worker gets, and it only happens once.
+* A promise passed to `installEvent.waitUntil()` signals the duration and success or failure of your install.
+* A service worker won't receive events like `fetch` and `push` until it successfully finishes installing and becomes "active".
+* By default, a page's fetches won't go through a service worker unless the page request itself went through a service worker. So you'll need to refresh the page to see the effects of the service worker.
+* `clients.claim()` can override this default, and take control of non-controlled pages.
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/rdeulhDt9H1tqOdqh9Cj.mp4", autoplay=true, controls=true, loop=true %}
+</figure>
+
+Take this HTML:
+
+```html
+<!DOCTYPE html>
+An image will appear here in 3 seconds:
+<script>
+  navigator.serviceWorker.register('/sw.js')
+    .then(reg => console.log('SW registered!', reg))
+    .catch(err => console.log('Boo!', err));
+
+  setTimeout(() => {
+    const img = new Image();
+    img.src = '/dog.svg';
+    document.body.appendChild(img);
+  }, 3000);
+</script>
+```
+
+It registers a service worker, and adds image of a dog after 3 seconds.
+
+Here's its service worker, `sw.js`:
+
+```js
+self.addEventListener('install', event => {
+  console.log('V1 installing…');
+
+  // cache a cat SVG
+  event.waitUntil(
+    caches.open('static-v1').then(cache => cache.add('/cat.svg'))
+  );
+});
+
+self.addEventListener('activate', event => {
+  console.log('V1 now ready to handle fetches!');
+});
+
+self.addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+
+  // serve the cat SVG from the cache if the request is
+  // same-origin and the path is '/dog.svg'
+  if (url.origin == location.origin && url.pathname == '/dog.svg') {
+    event.respondWith(caches.match('/cat.svg'));
+  }
+});
+```
+
+It caches an image of a cat, and serves it whenever there's a request for `/dog.svg`. However, if you [run the above example](https://service-worker-lifecycle-demos.glitch.me/main/), you'll see a dog the first time you load the page. Hit refresh, and you'll see the cat.
+
+Note: Cats are better than dogs. They just *are*.
+
+### Scope and control
+
+The default scope of a service worker registration is `./` relative to the script URL. This means if you register a service worker at `//example.com/foo/bar.js` it has a default scope of `//example.com/foo/`.
+
+We call pages, workers, and shared workers `clients`. Your service worker can only control clients that are in-scope. Once a client is "controlled", its fetches go through the in-scope service worker. You can detect if a client is controlled via `navigator.serviceWorker.controller` which will be null or a service worker instance.
+
+### Download, parse, and execute
+
+Your very first service worker downloads when you call `.register()`. If your script fails to download, parse, or throws an error in its initial execution, the register promise rejects, and the service worker is discarded.
+
+Chrome's DevTools shows the error in the console, and in the service worker section of the application tab:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6IpquorXzgFFDcxAZRVk.png", alt="Error displayed in service worker DevTools tab", width="800", height="438" %}
+</figure>
+
+### Install
+
+The first event a service worker gets is `install`. It's triggered as soon as the worker executes, and it's only called once per service worker. If you alter your service worker script the browser considers it a different service worker, and it'll get its own `install` event. I'll cover [updates in detail later](#updates).
+
+The `install` event is your chance to cache everything you need before being able to control clients. The promise you pass to `event.waitUntil()` lets the browser know when your install completes, and if it was successful.
+
+If your promise rejects, this signals the install failed, and the browser throws the service worker away. It'll never control clients. This means we can't rely on `cat.svg` being present in the cache in our `fetch` events. It's a dependency.
+
+### Activate
+
+Once your service worker is ready to control clients and handle functional events like `push` and `sync`, you'll get an `activate` event. But that doesn't mean the page that called `.register()` will be controlled.
+
+The first time you load [the demo](https://service-worker-lifecycle-demos.glitch.me/main/), even though `dog.svg` is requested long after the service worker activates, it doesn't handle the request, and you still see the image of the dog. The default is *consistency*, if your page loads without a service worker, neither will its subresources. If you load [the demo](https://service-worker-lifecycle-demos.glitch.me/main/) a second time (in other words, refresh the page), it'll be controlled. Both the page and the image will go through `fetch` events, and you'll see a cat instead.
+
+### clients.claim
+
+You can take control of uncontrolled clients by calling `clients.claim()` within your service worker once it's activated.
+
+Here's [a variation of the demo above](https://service-worker-lifecycle-demos.glitch.me/claimed/) which calls `clients.claim()` in its `activate` event. You *should* see a cat the first time. I say "should", because this is timing sensitive. You'll only see a cat if the service worker activates and `clients.claim()` takes effect before the image tries to load.
+
+If you use your service worker to load pages differently than they'd load via the network, `clients.claim()` can be troublesome, as your service worker ends up controlling some clients that loaded without it.
+
+{% Aside %}
+**Note:** I see a lot of people including `clients.claim()` as boilerplate, but I
+rarely do so myself. It only really matters on the very first load, and due to
+progressive enhancement the page is usually working happily without service
+worker anyway.
+{% endAside %}
+
+## Updating the service worker {: #updates}
+
+In brief:
+
+* An update is triggered if any of the following happens:
+  * A navigation to an in-scope page.
+  * A functional events such as `push` and `sync`, unless there's been an update check within the previous 24 hours.
+  * Calling `.register()` *only if* the service worker URL has changed. However, you should [avoid changing the worker URL](#avoid-url-change).
+* Most browsers, including [Chrome 68 and later](https://developer.chrome.com/blog/fresher-sw/), default to ignoring caching headers when checking for updates of the registered service worker script. They still respect caching headers when fetching resources loaded inside a service worker via `importScripts()`. You can override this default behavior by setting the [`updateViaCache`](https://developers.google.com/web/updates/2018/06/fresher-sw/#updateviacache) option when registering your service worker.
+* Your service worker is considered updated if it's byte-different to the one the browser already has. (We're extending this to include imported scripts/modules too.)
+* The updated service worker is launched alongside the existing one, and gets its own `install` event.
+* If your new worker has a non-ok status code (for example, 404), fails to parse, throws an error during execution, or rejects during install, the new worker is thrown away, but the current one remains active.
+* Once successfully installed, the updated worker will `wait` until the existing worker is controlling zero clients. (Note that clients overlap during a refresh.)
+* `self.skipWaiting()` prevents the waiting, meaning the service worker activates as soon as it's finished installing.
+
+<figure>
+  {% Video src="video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/5ipiSRfkCL45aglik4hK.mp4", autoplay=true, controls=true, loop=true %}
+</figure>
+
+Let's say we changed our service worker script to respond with a picture of a horse rather than a cat:
+
+```js
+const expectedCaches = ['static-v2'];
+
+self.addEventListener('install', event => {
+  console.log('V2 installing…');
+
+  // cache a horse SVG into a new cache, static-v2
+  event.waitUntil(
+    caches.open('static-v2').then(cache => cache.add('/horse.svg'))
+  );
+});
+
+self.addEventListener('activate', event => {
+  // delete any caches that aren't in expectedCaches
+  // which will get rid of static-v1
+  event.waitUntil(
+    caches.keys().then(keys => Promise.all(
+      keys.map(key => {
+        if (!expectedCaches.includes(key)) {
+          return caches.delete(key);
+        }
+      })
+    )).then(() => {
+      console.log('V2 now ready to handle fetches!');
+    })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+
+  // serve the horse SVG from the cache if the request is
+  // same-origin and the path is '/dog.svg'
+  if (url.origin == location.origin && url.pathname == '/dog.svg') {
+    event.respondWith(caches.match('/horse.svg'));
+  }
+});
+```
+
+{% Aside %}
+**Note:** I have no strong opinions on horses.
+{% endAside %}
+
+[Check out a demo of the above](https://service-worker-lifecycle-demos.glitch.me/main/v2.html). You should still see an image of a cat. Here's why…
+
+### Install
+
+Note that I've changed the cache name from `static-v1` to `static-v2`. This means I can set up the new cache without overwriting things in the current one, which the old service worker is still using.
+
+This patterns creates version-specific caches, akin to assets a native app would bundle with its executable. You may also have caches that aren't version specific, such as `avatars`.
+
+### Waiting
+
+After it's successfully installed, the updated service worker delays activating until the existing service worker is no longer controlling clients. This state is called "waiting", and it's how the browser ensures that only one version of your service worker is running at a time.
+
+If you ran [the updated demo](https://service-worker-lifecycle-demos.glitch.me/main/v2.html), you should still see a picture of a cat, because the V2 worker hasn't yet activated. You can see the new service worker waiting in the "Application" tab of DevTools:
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/x5RaAqvkC5QOjRWyEVv0.png", alt="DevTools showing new service worker waiting", width="800", height="344" %}
+</figure>
+
+Even if you only have one tab open to the demo, refreshing the page isn't enough to let the new version take over. This is due to how browser navigations work. When you navigate, the current page doesn't go away until the response headers have been received, and even then the current page may stay if the response has a `Content-Disposition` header. Because of this overlap, the current service worker is always controlling a client during a refresh.
+
+To get the update, close or navigate away from all tabs using the current service worker. Then, when you [navigate to the demo again](https://service-worker-lifecycle-demos.glitch.me/main/v2.html), you should see the horse.
+
+This pattern is similar to how Chrome updates. Updates to Chrome download in the background, but don't apply until Chrome restarts. In the mean time, you can continue to use the current version without disruption. However, this is a pain during development, but DevTools has ways to make it easier, which I'll cover [later in this article](#devtools).
+
+### Activate
+
+This fires once the old service worker is gone, and your new service worker is able to control clients. This is the ideal time to do stuff that you couldn't do while the old worker was still in use, such as migrating databases and clearing caches.
+
+In the demo above, I maintain a list of caches that I expect to be there, and in the `activate` event I get rid of any others, which removes the old `static-v1` cache.
+
+{% Aside 'caution' %}
+You may not be updating from the previous version. It may be a service worker many versions old.
+{% endAside %}
+
+If you pass a promise to `event.waitUntil()` it'll buffer functional events (`fetch`, `push`, `sync` etc.) until the promise resolves. So when your `fetch` event fires, the activation is fully complete.
+
+{% Aside 'caution' %}
+The cache storage API is "origin storage" (like localStorage, and IndexedDB). If you run many sites on the same origin (for example, `yourname.github.io/myapp`), be careful that you don't delete caches for your other sites. To avoid this, give your cache names a prefix unique to the current site, eg `myapp-static-v1`, and don't touch caches unless they begin with `myapp-`.
+{% endAside %}
+
+### Skip the waiting phase
+
+The waiting phase means you're only running one version of your site at once, but if you don't need that feature, you can make your new service worker activate sooner by calling `self.skipWaiting()`.
+
+This causes your service worker to kick out the current active worker and activate itself as soon as it enters the waiting phase (or immediately if it's already in the waiting phase). It *doesn't* cause your worker to skip installing, just waiting.
+
+It doesn't really matter when you call `skipWaiting()`, as long as it's during or before waiting. It's pretty common to call it in the `install` event:
+
+```js
+self.addEventListener('install', event => {
+  self.skipWaiting();
+
+  event.waitUntil(
+    // caching etc
+  );
+});
+```
+
+But you may want to call it as a results of a `postMessage()` to the service worker. As in, you want to `skipWaiting()` following a user interaction.
+
+[Here's a demo that uses `skipWaiting()`](https://service-worker-lifecycle-demos.glitch.me/main/v3.html). You should see a picture of a cow without having to navigate away. Like `clients.claim()` it's a race, so you'll only see the cow if the new service worker fetches, installs and activates before the page tries to load the image.
+
+{% Aside 'caution' %}
+`skipWaiting()` means that your new service worker is likely controlling pages that were loaded with an older version. This means some of your page's fetches will have been handled by your old service worker, but your new service worker will be handling subsequent fetches. If this might break things, don't use `skipWaiting()`.
+{% endAside %}
+
+### Manual updates
+
+As I mentioned earlier, the browser checks for updates automatically after navigations and functional events, but you can also trigger them manually:
+
+```js
+navigator.serviceWorker.register('/sw.js').then(reg => {
+  // sometime later…
+  reg.update();
+});
+```
+
+If you expect the user to be using your site for a long time without reloading, you may want to call `update()` on an interval (such as hourly).
+
+### Avoid changing the URL of your service worker script {: #avoid-url-change}
+
+If you've read [my post on caching best practices](https://jakearchibald.com/2016/caching-best-practices/), you may consider giving each version of your service worker a unique URL. **Don't do this!** This is usually bad practice for service workers, just update the script at its current location.
+
+It can land you with a problem like this:
+
+1. `index.html` registers `sw-v1.js` as a service worker.
+2. `sw-v1.js` caches and serves `index.html` so it works offline-first.
+3. You update `index.html` so it registers your new and shiny `sw-v2.js`.
+
+If you do the above, the user never gets `sw-v2.js`, because `sw-v1.js` is serving the old version of `index.html` from its cache. You've put yourself in a position where you need to update your service worker in order to update your service worker. Ew.
+
+However, for [the demo above](https://service-worker-lifecycle-demos.glitch.me/main/v2.html), I *have* changed the URL of the service worker. This is so, for the sake of the demo, you can switch between the versions. It isn't something I'd do in production.
+
+## Making development easy {: #devtools}
+
+The service worker lifecycle is built with the user in mind, but during development it's a bit of a pain. Thankfully there are a few tools to help out:
+
+### Update on reload
+
+This one's my favourite.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/7DmQ1yJvTqjWbBoxh1ud.png", alt="DevTools showing 'update on reload'", width="800", height="344" %}
+</figure>
+
+This changes the lifecycle to be developer-friendly. Each navigation will:
+
+1. Refetch the service worker.
+2. Install it as a new version even if it's byte-identical, meaning your `install` event runs and your caches update.
+3. Skip the waiting phase so the new service worker activates.
+4. Navigate the page.
+
+This means you'll get your updates on each navigation (including refresh) without having to reload twice or close the tab.
+
+### Skip waiting
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JkYj44hXCg4CM8dgdbKE.png", alt="DevTools showing 'skip waiting'", width="800", height="344" %}
+</figure>
+
+If you have a worker waiting, you can hit "skip waiting" in DevTools to immediately promote it to "active".
+
+### Shift-reload
+
+If you force-reload the page (shift-reload) it bypasses the service worker entirely. It'll be uncontrolled. This feature is in the spec, so it works in other service-worker-supporting browsers.
+
+## Handling updates
+
+The service worker was designed as part of the [extensible web](https://extensiblewebmanifesto.org/). The idea is that we, as browser developers, acknowledge that we are not better at web development than web developers. And as such, we shouldn't provide narrow high-level APIs that solve a particular problem using patterns *we* like, and instead give you access to the guts of the browser and let you do it how you want, in a way that works best for *your* users.
+
+So, to enable as many patterns as we can, the whole update cycle is observable:
+
+```js
+navigator.serviceWorker.register('/sw.js').then(reg => {
+  reg.installing; // the installing worker, or undefined
+  reg.waiting; // the waiting worker, or undefined
+  reg.active; // the active worker, or undefined
+
+  reg.addEventListener('updatefound', () => {
+    // A wild service worker has appeared in reg.installing!
+    const newWorker = reg.installing;
+
+    newWorker.state;
+    // "installing" - the install event has fired, but not yet complete
+    // "installed"  - install complete
+    // "activating" - the activate event has fired, but not yet complete
+    // "activated"  - fully active
+    // "redundant"  - discarded. Either failed install, or it's been
+    //                replaced by a newer version
+
+    newWorker.addEventListener('statechange', () => {
+      // newWorker.state has changed
+    });
+  });
+});
+
+navigator.serviceWorker.addEventListener('controllerchange', () => {
+  // This fires when the service worker controlling this page
+  // changes, eg a new worker has skipped waiting and become
+  // the new active worker.
+});
+```
+
+## The lifecycle goes ever on
+
+As you can see, it pays to understand the service worker lifecycle&mdash;and with that understanding, service worker behaviors should seem more logical, and less mysterious. That knowledge will give you more confidence as you deploy and update service workers.
diff --git a/src/site/content/en/reliable/service-workers-cache-storage/crow.jpg b/src/site/content/en/reliable/service-workers-cache-storage/crow.jpg
deleted file mode 100644
index 4928d370134..00000000000
Binary files a/src/site/content/en/reliable/service-workers-cache-storage/crow.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/service-workers-cache-storage/index.md b/src/site/content/en/reliable/service-workers-cache-storage/index.md
index 1902ae92a4a..68427d54968 100644
--- a/src/site/content/en/reliable/service-workers-cache-storage/index.md
+++ b/src/site/content/en/reliable/service-workers-cache-storage/index.md
@@ -19,9 +19,9 @@ when loading versioned URLs that you've previously visited. On its own, the HTTP
 cache is not enough.
 
 Fortunately, two newer tools are available to help turn the tide in your favor:
-[service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+[service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
 and the
-[Cache Storage API](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage).
+[Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage).
 Since they're so often used together, it's worth learning about them both at the
 same time.
 
@@ -46,6 +46,7 @@ having to worry about the network. That entails using the other piece of the
 puzzle: the Cache Storage API.
 
 ## The Cache Storage API
+{% BrowserCompat 'api.CacheStorage' %}
 
 The Cache Storage  API opens up a whole new range of possibilities, by giving
 developers complete control over the contents of the cache. Instead of relying
@@ -94,12 +95,12 @@ Check out [The Cache API: A quick guide](/cache-api-quick-guide/) to learn more.
 
 There are some things to keep in mind about the API's design:
 
-+  [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
++  [`Request`](https://developer.mozilla.org/docs/Web/API/Request)
     objects are used as the unique keys when reading and writing to these
     caches. As a convenience, you can pass in a URL string like
     `'https://example.com/index.html'` as the key instead of an actual
     `Request` object, and the API will automatically handle that for you.
-+  [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
++  [`Response`](https://developer.mozilla.org/docs/Web/API/Response)
     objects are used as the values in these caches.
 +  The `Cache-Control` header on a given `Response` is effectively ignored
     when caching data. There are no automatic, built-in expiration or freshness
@@ -107,7 +108,7 @@ There are some things to keep in mind about the API's design:
     code explicitly removes it. (There are libraries to simplify cache
     maintenance on your behalf. They'll be covered later on in this series.)
 +  Unlike with older, synchronous APIs such as
-    [`LocalStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage),
+    [`LocalStorage`](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage),
     all Cache Storage API operations are asynchronous.
 
 ## A quick detour: promises and async/await
@@ -116,9 +117,9 @@ Service workers and the Cache Storage API use
 [asynchronous programming concepts](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming)).
 In particular, they rely heavily on promises to represent the future result of
 async operations. You should familiarize yourself with
-[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise),
+[promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise),
 and the related
-[`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
+[`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await)
 syntax, before diving in.
 
 {% Aside 'codelab' %}
@@ -132,7 +133,7 @@ workers and the Cache Storage API are effectively lower-level building blocks,
 with a number of edge cases and "gotchas". There are some higher-level tools
 that can help smooth the difficult bits of those APIs, and provide all you need
 to build a production-ready service worker. The next guide covers one such tool:
-[Workbox](https://developers.google.com/web/tools/workbox/).
+[Workbox](https://developer.chrome.com/docs/workbox/).
 
 {% Aside 'success' %}
 Learn while having fun. Check out the new [Service Workies game!](https://serviceworkies.com/).
diff --git a/src/site/content/en/reliable/service-workers-cache-storage/kolohe.jpg b/src/site/content/en/reliable/service-workers-cache-storage/kolohe.jpg
deleted file mode 100644
index bf73c7d2c84..00000000000
Binary files a/src/site/content/en/reliable/service-workers-cache-storage/kolohe.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/service-workers-cache-storage/lani.jpg b/src/site/content/en/reliable/service-workers-cache-storage/lani.jpg
deleted file mode 100644
index e105e97d878..00000000000
Binary files a/src/site/content/en/reliable/service-workers-cache-storage/lani.jpg and /dev/null differ
diff --git a/src/site/content/en/reliable/two-way-communication-guide/index.md b/src/site/content/en/reliable/two-way-communication-guide/index.md
new file mode 100644
index 00000000000..c461a149881
--- /dev/null
+++ b/src/site/content/en/reliable/two-way-communication-guide/index.md
@@ -0,0 +1,390 @@
+---
+layout: post
+title: "Two-way communication with service workers"
+authors:
+  - demianrenzulli
+  - andrewguan
+date: 2020-12-08
+description: |
+    How establish a two-way communication channel between the page and the service worker.
+tags:
+  - service-worker
+  - offline
+---
+
+In some cases, a web app might need to establish a **two-way** communication channel between the
+page and the service worker.
+
+For example: in a podcast PWA one could build a feature to let the user [download episodes for
+offline consumption](/app-like-pwas/#proactive-background-downloading) and allow the
+service worker to keep the page regularly informed about the progress, so the [main
+thread](https://developer.mozilla.org/docs/Glossary/Main_thread) can update the UI.
+
+In this guide we'll explore the different ways of implementing a **two-way** communication between
+the [Window](https://developer.mozilla.org/docs/Web/API/Window) and [service
+worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) context, by exploring
+different APIs, the [Workbox library](https://developer.chrome.com/docs/workbox/), as well as
+some advanced cases.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HIbZyXbQNijm1S4eQlEv.png", alt="Diagram showing a service worker and the page exchanging messages.", width="800", height="310" %}
+</figure>
+
+{% Aside %}
+  Check out [Workers overview](/workers-overview/) for a high-level explanation
+  of when to use web workers versus service workers and the rest of the
+  [Communicate with workers](/reliable/#communicate-with-workers) series
+  for guides on other common use cases.
+{% endAside %}
+
+## Using Workbox {: #using-workbox }
+
+[`workbox-window`](https://developer.chrome.com/docs/workbox/modules/workbox-window/) is a set of
+modules of the [Workbox library](https://developer.chrome.com/docs/workbox/) that are intended
+to run in the window context. The [`Workbox`
+](https://developer.chrome.com/docs/workbox/reference/workbox-window/#type-Workbox) class provides a `messageSW()` method to send a message to the instance's registered service worker and
+await a response.
+
+The following page code creates a new `Workbox` instance and sends a message to the service worker
+to obtain its version:
+
+```javascript
+const wb = new Workbox('/sw.js');
+wb.register();
+
+const swVersion = await wb.messageSW({type: 'GET_VERSION'});
+console.log('Service Worker version:', swVersion);
+```
+
+The service worker implements a message listener on the other end, and responds to the registered
+service worker:
+
+```javascript
+const SW_VERSION = '1.0.0';
+
+self.addEventListener('message', (event) => {
+  if (event.data.type === 'GET_VERSION') {
+    event.ports[0].postMessage(SW_VERSION);
+  }
+});
+```
+
+Under the hood the library uses a browser API that we'll review in the next section: [Message
+Channel](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API), but abstracts many
+implementation details, making it easier to use, while leveraging the [wide browser
+support](https://caniuse.com/mdn-api_messagechannel_port1) this API has.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DxyWzq96JQCU3hADZiN8.png", alt="Diagram showing two-way communication between page and service worker, using Workbox Window.", width="700", height="410" %}
+</figure>
+
+## Using Browser APIs {: #using-browser-apis }
+
+If the Workbox library is not enough for your needs, there are several lower-level APIs available to
+implement **"two-way"** communication between pages and service workers. They have some similarities
+and differences:
+
+Similarities:
+
+- In all cases the communication starts on one end via the `postMessage()` interface and is received
+  on the other end by implementing a `message` handler.
+- In practice, all the available APIs allow us to implement the same use cases, but some of them
+  might simplify development in some scenarios.
+
+Differences:
+
+- They have different ways of identifying the other side of the communication: some of them use an
+  explicit reference to the other context, while others can communicate implicitly via a proxy
+  object instantiated on each side.
+- Browser support varies among them.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nPYcdQbxAezigMiuoLJg.png", alt="Diagram showing two-way communication between page and service worker, and the available browser APIs.", width="600", height="273" %}
+</figure>
+
+### Broadcast Channel API {: #broadcast-channel-api }
+{% BrowserCompat 'api.BroadcastChannel' %}
+
+The [Broadcast Channel API](https://developer.mozilla.org/docs/Web/API/Broadcast_Channel_API)
+allows basic communication between browsing contexts via [BroadcastChannel
+objects](https://developer.mozilla.org/docs/Web/API/BroadcastChannel).
+
+To implement it, first, each context has to instantiate a `BroadcastChannel` object with the same ID
+and send and receive messages from it:
+
+```javascript
+const broadcast = new BroadcastChannel('channel-123');
+```
+
+The BroadcastChannel object exposes a `postMessage()` interface to send a message to any listening
+context:
+
+```javascript
+//send message
+broadcast.postMessage({ type: 'MSG_ID', });
+```
+
+Any browser context can listen to messages via the `onmessage` method of the `BroadcastChannel`
+object:
+
+```javascript
+//listen to messages
+broadcast.onmessage = (event) => {
+  if (event.data && event.data.type === 'MSG_ID') {
+    //process message...
+  }
+};
+```
+
+As seen, there's no explicit reference to a particular context, so there's no need of obtaining a
+reference first to the service worker or any particular client.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uWl3NVD3rxbSoA0JxvuN.png", alt="Diagram showing two-way communication between page and service worker, using a Broadcast Channel object.", width="700", height="355" %}
+</figure>
+
+The disadvantage is that, at the moment of this writing, the API has support from Chrome, Firefox
+and Edge, but other browsers, like Safari, [don't support it
+yet](https://caniuse.com/?search=broadcastchannel).
+
+### Client API {: #channel-api }
+{% BrowserCompat 'api.Client' %}
+
+The [Client API](https://developer.mozilla.org/docs/Web/API/Client) allows you to obtain a
+reference to all the [`WindowClient`](https://developer.mozilla.org/docs/Web/API/WindowClient) objects representing the active tabs that the service worker is controlling.
+
+Since the page is controlled by a single service worker, it listens to and sends messages to the
+active service worker directly via the `serviceWorker` interface:
+
+```javascript
+//send message
+navigator.serviceWorker.controller.postMessage({
+  type: 'MSG_ID',
+});
+
+//listen to messages
+navigator.serviceWorker.onmessage = (event) => {
+  if (event.data && event.data.type === 'MSG_ID') {
+    //process response
+  }
+};
+```
+
+Similarly, the service worker listens to messages by implementing an `onmessage` listener:
+
+```javascript
+//listen to messages
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'MSG_ID') {
+    //Process message
+  }
+});
+```
+
+To communicate back with any of its clients, the service worker obtains an array of
+[`WindowClient`](https://developer.mozilla.org/docs/Web/API/WindowClient) objects by executing
+methods such as
+[`Clients.matchAll()`](https://developer.mozilla.org/docs/Web/API/Clients/matchAll) and
+[`Clients.get()`](https://developer.mozilla.org/docs/Web/API/Clients/get). Then it can
+`postMessage()` any of them:
+
+```javascript
+//Obtain an array of Window client objects
+self.clients.matchAll(options).then(function (clients) {
+  if (clients && clients.length) {
+    //Respond to last focused tab
+    clients[0].postMessage({type: 'MSG_ID'});
+  }
+});
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/oApyHsmljr1KkBW85Wv9.png", alt="Diagram showing a service worker communicating with an array of clients.", width="500", height="348" %}
+</figure>
+
+`Client API` is a good option to communicate easily with all the active tabs from a service worker
+in a relatively straightforward way. The API is supported by [all major
+browsers](https://wpt.fyi/results/service-workers/service-worker/client-id.https.html?label=experimental&label=master&aligned),
+but not all its methods might be available, so make sure to check browser support before
+implementing it in your site.
+
+{% Aside %} In this guide we focus mostly on reliability use cases. Another interesting usage of
+this API is synchronizing data across documents via a service worker. Check out [this episode of
+HTTP 203](https://www.youtube.com/watch?v=9UNwHmagedE&feature=youtu.be&t=697) to know more about it.
+{% endAside %}
+
+### Message Channel {: #message-channel }
+{% BrowserCompat 'api.MessageChannel' %}
+
+[Message Channel](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API) requires
+defining and passing a port from one context to another to establish a **two-way** communication
+channel.
+
+To initialize the channel, the page instantiates a [`MessageChannel`](https://developer.mozilla.org/docs/Web/API/MessageChannel/MessageChannel) object and uses it
+to send a port to the registered service worker. The page also implements an `onmessage` listener on
+it to receive messages from the other context:
+
+```javascript
+const messageChannel = new MessageChannel();
+
+//Init port
+navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
+  messageChannel.port2,
+]);
+
+//Listen to messages
+messageChannel.port1.onmessage = (event) => {
+  // Process message
+};
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/THMp68FKAah5qYIsiFOk.png", alt="Diagram showing a page passing a port to a service worker, to establish two-way communication.", width="600", height="344" %}
+</figure>
+
+The service worker receives the port, saves a reference to it and uses it to send a message to the other
+side:
+
+```javascript
+let communicationPort;
+
+//Save reference to port
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'PORT_INITIALIZATION') {
+    communicationPort = event.ports[0];
+  }
+});
+
+//Send messages
+communicationPort.postMessage({type: 'MSG_ID'});
+```
+
+`MessageChannel` is currently supported by [all major
+browsers](https://caniuse.com/?search=channel).
+
+### Advanced APIs: Background Sync and Background Fetch {: #advanced-apis:-background-sync-and-background-fetch }
+
+In this guide we explored ways of implementing **two-way** communication techniques, for relatively
+simple cases, like passing a string message describing the operation to perform, or a list of URLs
+to cache from one context to the other. In this section we'll explore two APIs to handle specific
+scenarios: lack of connectivity and long downloads.
+
+#### Background Sync {: #background-sync }
+{% BrowserCompat 'api.SyncManager' %}
+
+A chat app might want to make sure that messages are never lost due to bad connectivity. The
+[Background Sync API](https://developer.chrome.com/blog/background-sync/) lets you
+defer actions to be retried when the user has stable connectivity. This is useful for ensuring that
+whatever the user wants to send, is actually sent.
+
+Instead of the `postMessage()` interface, the page registers a `sync`:
+
+```javascript
+navigator.serviceWorker.ready.then(function (swRegistration) {
+  return swRegistration.sync.register('myFirstSync');
+});
+```
+
+The service worker then listens for the `sync` event to process the message:
+
+```javascript
+self.addEventListener('sync', function (event) {
+  if (event.tag == 'myFirstSync') {
+    event.waitUntil(doSomeStuff());
+  }
+});
+```
+
+The function `doSomeStuff()` should return a promise indicating the success/failure of whatever it's
+trying to do. If it fulfills, the sync is complete. If it fails, another sync will be scheduled to
+retry. Retry syncs also wait for connectivity, and employ an exponential back-off.
+
+Once the operation has been performed, the service worker can then communicate back with the page to
+update the UI, by using any of the communication APIs explored earlier.
+
+Google search uses Background Sync to persist failed queries due to bad connectivity, and retry
+them later when the user is online. Once the operation is performed, they communicate the result to
+the user via a web push notification:
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eMbvk9IRoaAggs8t5CbF.png", alt="Diagram showing a page passing a port to a service worker, to establish two-way communication.", width="700", height="381" %}
+</figure>
+
+{% Aside %} Check out [Resilient search experiences
+](/resilient-search-experiences/) to learn how to implement this feature using [Workbox Background
+Sync](https://developer.chrome.com/docs/workbox/modules/workbox-background-sync/). {% endAside
+%}
+
+#### Background Fetch {: #background-fetch }
+{% BrowserCompat 'api.BackgroundFetchManager' %}
+
+For relatively short bits of work like sending a message, or a list of URLs to cache, the options
+explored so far are a good choice. If the task takes too long the browser will kill the service
+worker, otherwise it's a risk to the user's privacy and battery.
+
+The [Background Fetch API](https://developer.chrome.com/blog/background-fetch/)
+allows you to offload a long task to a service worker, like downloading movies, podcasts, or levels
+of a game.
+
+To communicate to the service worker from the page, use `backgroundFetch.fetch`, instead of
+`postMessage()`:
+
+```javascript
+navigator.serviceWorker.ready.then(async (swReg) => {
+  const bgFetch = await swReg.backgroundFetch.fetch(
+    'my-fetch',
+    ['/ep-5.mp3', 'ep-5-artwork.jpg'],
+    {
+      title: 'Episode 5: Interesting things.',
+      icons: [
+        {
+          sizes: '300x300',
+          src: '/ep-5-icon.png',
+          type: 'image/png',
+        },
+      ],
+      downloadTotal: 60 * 1024 * 1024,
+    },
+  );
+});
+```
+
+The `BackgroundFetchRegistration` object allows the page listen to the `progress` event to follow
+the progress of the download:
+
+```javascript
+bgFetch.addEventListener('progress', () => {
+  // If we didn't provide a total, we can't provide a %.
+  if (!bgFetch.downloadTotal) return;
+
+  const percent = Math.round(
+    (bgFetch.downloaded / bgFetch.downloadTotal) * 100,
+  );
+  console.log(`Download progress: ${percent}%`);
+});
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ii1koJyCl0drJyewTIxV.png", alt="Diagram showing a page passing a port to a service worker, to establish two-way communication.", width="700", height="434" %}
+    <figcaption>The UI is updated to indicate the progress of a download (left). Thanks to service workers, the operation can continue running when all tabs have been closed (right).
+    </figcaption>
+</figure>
+
+{% Aside %} Check out the [Background Fetch
+guide](https://developer.chrome.com/blog/background-fetch/), which includes an
+[example podcast app](https://bgfetch-http203.glitch.me/) along with its [Glitch
+code](https://glitch.com/edit/#!/bgfetch-http203). {% endAside %}
+
+## Next steps {: #next-steps }
+
+In this guide we explored the most general case of communication between page and service workers
+(bidirectional communication).
+
+Many times, one might need only one context to communicate with the other, without receiving a
+response. Check out the following guides for guidance how to implement unidirectional techniques in
+your pages from and to the service worker, along with use cases and production examples:
+
+- [Imperative caching guide](/imperative-caching-guide): Calling a service worker from the page to
+  cache resources in advance (e.g. in prefetching scenarios).
+- [Broadcast updates](/broadcast-updates-guide): Calling the page from the service worker to inform
+  about important updates (e.g. a new version of the webapp is available).
diff --git a/src/site/content/en/reliable/workbox/index.md b/src/site/content/en/reliable/workbox/index.md
index 05bd7770119..06e102f839c 100644
--- a/src/site/content/en/reliable/workbox/index.md
+++ b/src/site/content/en/reliable/workbox/index.md
@@ -8,17 +8,19 @@ description: |
   Workbox is a high-level service worker toolkit built on top of the Service
   Worker and Cache Storage APIs. It provides a production-ready set of libraries
   for adding offline support to web apps.
+feedback:
+  - api
 ---
 
 Two APIs play a crucial role in building reliable web apps:
-[Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
-and [Cache Storage](https://developer.mozilla.org/en-US/docs/Web/API/Cache). But
+[Service Worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)
+and [Cache Storage](https://developer.mozilla.org/docs/Web/API/Cache). But
 using them effectively—without introducing subtle bugs or bumping into edge
 cases—can be a challenge. For example, errors in your service worker code can
 cause caching problems; users might be shown out-of-date content or broken
 links.
 
-[Workbox](https://developers.google.com/web/tools/workbox/) is a high-level
+[Workbox](https://developer.chrome.com/docs/workbox/) is a high-level
 service worker toolkit built on top of the Service Worker and Cache Storage
 APIs. It provides a production-ready set of libraries for adding offline support to
 web apps. The toolkit is structured into two collections: tools that help manage
@@ -30,27 +32,27 @@ build process.
 This is the code that runs inside of your service worker script and controls how
 it intercepts outgoing requests and interacts with the Cache Storage API.
 Workbox has a
-[dozen or so library modules in total](https://developers.google.com/web/tools/workbox/modules/),
+[dozen or so library modules in total](https://developer.chrome.com/docs/workbox/modules/),
 that each handle a variety of specialized use cases. The most important modules
 determine _whether_ the service worker will respond (known as
-[routing](https://developers.google.com/web/tools/workbox/modules/workbox-routing)),
+[routing](https://developer.chrome.com/docs/workbox/modules/workbox-routing/)),
 and _how_ it will respond (known as the
-[caching strategy](https://developers.google.com/web/tools/workbox/modules/workbox-strategies)).
+[caching strategy](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/)).
 
 ### Build integration
 
 Workbox offers
-[command line](https://developers.google.com/web/tools/workbox/modules/workbox-cli),
-[Node.js module](https://developers.google.com/web/tools/workbox/modules/workbox-build),
+[command line](https://developer.chrome.com/docs/workbox/modules/workbox-cli/),
+[Node.js module](https://developer.chrome.com/docs/workbox/modules/workbox-build/),
 and
-[webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+[webpack plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
 tools that provide alternative ways to accomplish two things:
 
 +  Create a service worker script based on a set of configuration
     options. The generated service worker uses Workbox's runtime libraries
     "under the hood" to put into action the caching strategies you configure.
 +  Generate a list of URLs that should be
-    "[precached](https://developers.google.com/web/tools/workbox/modules/workbox-precaching)",
+    "[precached](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/)",
     based on configurable patterns to include and exclude files generated
     during your build process.
 
@@ -58,7 +60,7 @@ tools that provide alternative ways to accomplish two things:
 
 Using Workbox when building your service worker is optional—there are a number
 of guides out there that walk through
-[common caching strategies](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/)
+[common caching strategies](/offline-cookbook/)
 from a "vanilla" service worker perspective. If you do decide to use Workbox,
 here are some of its benefits.
 
@@ -77,8 +79,7 @@ Workbox automatically detects when you're running a development version of your
 website on `localhost`, and turns on debug logging in your browser's JavaScript
 console.
 
-<img class="w-screenshot" src="./workbox-logging.png"
-  alt="Workbox logging to the DevTools console">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gvsGSU3urfjl52jRcj3j.png", alt="Workbox logging to the DevTools console", width="800", height="438" %}
 
 By following along with the log messages, you can get to the root of any
 configuration or invalidation problems much more quickly than if you were going
@@ -91,16 +92,16 @@ automatically falls back to alternative implementations of features that are
 missing from certain browsers.
 
 +  The
-    [`workbox-broadcast-cache-update module`](https://developers.google.com/web/tools/workbox/modules/workbox-broadcast-cache-update)
+    [`workbox-broadcast-cache-update module`](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)
     uses the
-    [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
+    [Broadcast Channel API](https://developer.mozilla.org/docs/Web/API/Broadcast_Channel_API)
     when available, and falls back to a
-    [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)-based
+    [`postMessage()`](https://developer.mozilla.org/docs/Web/API/Window/postMessage)-based
     implementation on browsers that lack support.
 +  The
-    [workbox-background-sync module](https://developers.google.com/web/tools/workbox/modules/workbox-background-sync)
+    [workbox-background-sync module](https://developer.chrome.com/docs/workbox/modules/workbox-background-sync/)
     uses the
-    [Background Sync API](https://developers.google.com/web/updates/2015/12/background-sync)
+    [Background Sync API](https://developer.chrome.com/blog/background-sync/)
     if possible, and if not, falls back to retrying queued events each time the
     service worker starts up.
 
@@ -121,10 +122,10 @@ Workbox integration found in many popular starter kits and add-on plugins:
 
 If you already have a build process for your site in place, dropping in the
 appropriate
-[command line](https://developers.google.com/web/tools/workbox/modules/workbox-cli),
-[Node.js module](https://developers.google.com/web/tools/workbox/modules/workbox-build),
+[command line](https://developer.chrome.com/docs/workbox/modules/workbox-cli/),
+[Node.js module](https://developer.chrome.com/docs/workbox/modules/workbox-build/),
 or
-[webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+[webpack plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
 tool may be all you need to start using Workbox.
 
 In particular, the Workbox command line interface makes it easy to get up and
@@ -150,8 +151,8 @@ See the [documentation of the options](https://goo.gl/gVo87N) for details.
 
 If you have an existing service worker and want to try out Workbox's runtime
 libraries,
-[import Workbox from its official CDN](https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_workbox_sw_via_cdn)
-and start using it for runtime caching right away. Please note that this use
+[import Workbox from its official CDN](https://developer.chrome.com/docs/workbox/modules/workbox-sw/#using-workbox-sw-via-cdn)
+and start using it for runtime caching right away. This use
 case means that you won't be able to take advantage of precaching (which
 requires build-time integration), but it's great for prototyping and trying out
 different caching strategies on the fly.
diff --git a/src/site/content/en/reliable/workbox/workbox-logging.png b/src/site/content/en/reliable/workbox/workbox-logging.png
deleted file mode 100644
index 9d989f56153..00000000000
Binary files a/src/site/content/en/reliable/workbox/workbox-logging.png and /dev/null differ
diff --git a/src/site/content/en/reliable/workers-overview/index.md b/src/site/content/en/reliable/workers-overview/index.md
new file mode 100644
index 00000000000..06053e29e73
--- /dev/null
+++ b/src/site/content/en/reliable/workers-overview/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: "Workers overview"
+subhead: >
+  How web workers and service workers can improve the performance
+  of your site, and when to use a web worker versus a service worker.
+authors:
+  - demianrenzulli
+  - andrewguan
+date: 2020-12-08
+description: |
+    How web workers and service workers can improve the performance of your website, and when to use a web worker versus a service worker.
+hero: image/admin/Gfdeo856rHPAXJbXvPDi.jpeg
+thumbnail: image/admin/Gfdeo856rHPAXJbXvPDi.jpeg
+tags:
+  - blog
+  - service-worker
+  - performance
+  - offline
+---
+
+This overview explains how web workers and service workers can improve the performance of your website, and when to use a web worker versus a service worker. Check out the rest of [this series](#next-steps) for
+specific patterns of window and service worker communication.
+
+## How workers can improve your website {: #how-workers-can-improve-your-website }
+
+The browser uses a single thread (the [main
+thread](https://developer.mozilla.org/docs/Glossary/Main_thread)) to run all the JavaScript in
+a web page, as well as to perform tasks like rendering the page and performing garbage collection.
+Running excessive JavaScript code can block the main thread, delaying the browser from performing
+these tasks and leading to a poor user experience.
+
+In iOS/Android application development, a common pattern to ensure that the app's main thread
+remains free to respond to user events is to offload operations to additional threads. In fact, in
+the latest versions of Android, blocking the main thread for too long [leads to an app
+crash](https://www.youtube.com/watch?v=eHjHlujp3Tg&feature=youtu.be&t=806).
+
+On the web, JavaScript was designed around the concept of a single thread, and lacks capabilities
+needed to implement a multithreading model like the one apps have, like shared memory.
+
+Despite these limitations, a similar pattern can be achieved in the web by using
+workers to run scripts in background
+threads, allowing them to perform tasks without interfering with the main thread. Workers are an
+entire JavaScript scope running on a separate thread, without any shared memory.
+
+In this post you'll learn about two different types of workers (web workers and service workers), their similarities and differences, and the most common patterns for using them in production websites.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eN5kePr9U0aZMgCyekhJ.png", alt="Diagram showing two links between the Window object and a web worker and service worker.", width="728", height="418" %}
+</figure>
+
+## Web workers and service workers {: #web-workers-and-service-workers }
+
+### Similarities {: #similarities }
+
+[Web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers)
+and [service
+workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+are two types of workers available to websites. They have some things in common:
+
+- Both run in a secondary thread, allowing JavaScript code to execute without blocking the main
+  thread and the user interface.
+- They don't have access to the [`Window`](https://developer.mozilla.org/docs/Web/API/Window)
+  and [`Document`](https://developer.mozilla.org/docs/Web/API/Document) objects, so they can't
+  interact with the DOM directly, and they have limited access to browser APIs.
+
+### Differences {: #differences }
+
+One might think that most things that can be delegated to a web worker can be done in a service
+worker and vice versa, but there are important differences between them:
+
+- Unlike web workers, service workers allow you to intercept network requests (via the
+  [`fetch`](https://developer.mozilla.org/docs/Web/API/FetchEvent) event) and to listen for Push
+  API events in the background (via the
+  [`push`](https://developer.mozilla.org/docs/Web/API/PushEvent) event).
+- A page can spawn multiple web workers, but a single service worker controls all the active tabs
+  under the
+  [scope](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/scope) it was
+  registered with.
+- The lifespan of the web worker is tightly coupled to the tab it belongs to, while the [service
+  worker's
+  lifecycle](/service-worker-lifecycle/) is
+  independent of it. For that reason, closing the tab where a web worker is running will terminate
+  it, while a service worker can continue running in the background, even when the site doesn't have
+  any active tabs open.
+
+{% Aside %} For relatively short bits of work like sending a message, the browser won't likely
+terminate a service worker when there are no active tabs, but if the task takes too long the browser
+will terminate the service worker, otherwise it's a risk to the user's privacy and battery. APIs
+like [Background Fetch](https://developer.chrome.com/blog/background-fetch/), that
+can let you avoid the service worker's termination. {% endAside %}
+
+## Use cases {: #use-cases }
+
+The differences between both types of workers suggest in which situations one might want to use one
+or the other:
+
+**Use cases for web workers** are more commonly related to offloading work (like [heavy
+computations](https://www.youtube.com/watch?v=mDdgfyRB5kg&feature=youtu.be&t=875)) to a secondary
+thread, to avoid blocking the UI.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZCC24V8uqi6HfFjRzuPq.png", alt="Diagram showing a link from the Window object to a web worker.", width="500", height="175" %}
+</figure>
+
+- **Example:** the team that built the videogame [PROXX](https://proxx.app/) wanted to leave the
+  main thread as free as possible to take care of user input and animations. To achieve that, they
+  [used web workers](/proxx-announce/#web-workers) to run the game logic and state
+  maintenance on a separate thread.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xXNCbahCtPrS8rw6uf1z.png", alt="A screenshot of the videogame PROXX.", width="225", height="403", style="width: inherit; margin: auto;" %}
+</figure>
+
+**Service workers tasks** are generally more related to acting as a network proxy, handling
+background tasks, and things like caching and offline.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GmGcVnb2y1yNc4ZIFFQ8.png", alt="A screenshot of the videogame PROXX.", width="624", height="267" %}
+</figure>
+
+**Example:** In a [podcast PWA](https://bgfetch-http203.glitch.me/), one might want to allow users
+to download complete episodes to listen to them while offline. A service worker, and, in particular,
+the [Background Fetch API](https://developer.chrome.com/blog/background-fetch/) can
+be used to that end. That way, if the user closes the tab while the episode is downloading, the task
+doesn't have to be interrupted.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/oUH6K2JvcmfdAynTMjxQ.png", alt="A screenshot of a Podcast PWA.", width="500", height="310" %}
+    <figcaption>The UI is updated to indicate the progress of a download (left). Thanks to service workers, the operation can continue running when all tabs have been closed (right).</figcaption>
+</figure>
+
+## Tools and libraries {: #tools-and-libraries }
+
+Window and worker communication can be implemented by using different lower level APIs. Fortunately,
+there are libraries that abstract this process, taking care of the most common use cases. In this
+section, we'll cover two of them that take care of window to web workers and service workers
+respectively: [Comlink](https://github.com/GoogleChromeLabs/comlink) and
+[Workbox](https://developer.chrome.com/docs/workbox/).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MNMwX5KuJt5iOLZJbdO0.png", alt="A screenshot of the videogame PROXX.", width="500", height="269" %}
+</figure>
+
+### Comlink {: #comlink }
+
+[Comlink](https://github.com/GoogleChromeLabs/comlink) is a small (1.6k)
+[RPC](https://en.wikipedia.org/wiki/Remote_procedure_call) library that takes care of many
+underlying details when building websites that use Web Workers. It has been used in websites
+like [PROXX](https://proxx.app/) and [Squoosh](https://squoosh.app/). A summary of its motivations
+and code samples can be found [here](https://surma.dev/things/when-workers/).
+
+### Workbox {: #workbox }
+
+[Workbox](https://developer.chrome.com/docs/workbox/) is a popular library to build websites
+that use service workers. It packages a set of best practices around things like caching, offline,
+background synchronization, etc. The [`workbox-window`](https://developer.chrome.com/docs/workbox/modules/workbox-window/) module provides a
+convenient way to exchange messages between the service worker and the page.
+
+## Next steps {: #next-steps }
+
+The rest of this series focuses on patterns for window and service worker communication:
+
+- [Imperative caching guide](/imperative-caching-guide): Calling a service worker from the page to
+  cache resources in advance (e.g. in prefetching scenarios).
+- [Broadcast updates](/broadcast-updates-guide/): Calling the page from the service worker to inform
+  about important updates (e.g. a new version of the website is available).
+- [Two-way communication](/two-way-communication-guide/): Delegating a task to a service worker
+  (e.g. a heavy download), and keeping the page informed on the progress.
+
+For patterns of window and web worker communication check out: [Use web workers to run JavaScript
+off the browser's main thread](/off-main-thread/).
diff --git a/src/site/content/en/secure/assess-spam-damage/index.md b/src/site/content/en/secure/assess-spam-damage/index.md
new file mode 100644
index 00000000000..8cba9652240
--- /dev/null
+++ b/src/site/content/en/secure/assess-spam-damage/index.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Assess spam damage
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Find out what to do if your site has been hacked to host spam.
+tags:
+  - security
+---
+
+This step is for sites hacked to host spam, often with the warning
+_"This site may be hacked"_ displayed in search results. It's one of the
+longest steps in the recovery process. In this step, you'll compile a list of
+the damaged files on your site. You'll use this list in a later step,
+[Clean and maintain your site](/clean-and-maintain-your-site/).
+
+{% Aside %}
+If your site was affected by malware and is flagged with the warning
+_"This site may harm your computer"_ in search results, see the
+corresponding article,
+[Assess malware damage (Hacked with malware)](/secure/hacked-with-malware/).
+{% endAside %}
+
+{% YouTube "lG5lOix9b9k" %}
+
+Because certain hacking campaigns affect hundreds and thousands of sites in
+similar ways, they can be cleaned up using a set of specific steps. If any of
+these hacking campaigns describe the hack on your site, click through to read
+the guide.
+
+* [Fixing the Japanese Keyword Hack](/secure/fixing-the-japanese-keyword-hack/)
+* [Fixing the Gibberish Hack](/secure/fixing-the-gibberish-hack/)
+* [Fixing the Cloaked Keywords and Links Hack](/secure/fixing-the-cloaked-keywords-hack/)
diff --git a/src/site/content/en/secure/browser-sandbox/index.md b/src/site/content/en/secure/browser-sandbox/index.md
index 8db5fd1bda7..a1b0f198e73 100644
--- a/src/site/content/en/secure/browser-sandbox/index.md
+++ b/src/site/content/en/secure/browser-sandbox/index.md
@@ -13,13 +13,13 @@ description: |
 To defend against attacks, a developer needs to mitigate vulnerabilities and add
 security features to an application. Luckily, on the web, the browser provides
 many security features. Some are available for developers to opt-in, and some
-are turned on by default to protect users. 
+are turned on by default to protect users.
 
-## The idea of a "sandbox"  
+## The idea of a "sandbox"
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./sandbox.png" alt="browser as a sandbox">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kPXwa8wRoJ5DGw97Mx3D.png", alt="browser as a sandbox", width="719", height="403" %}
+  <figcaption>
     Figure: Browser as a sandbox
   </figcaption>
 </figure>
@@ -43,7 +43,7 @@ would probably click on it without asking questions like "What kind of
 JavaScript will this site download?".
 
 The browser sandbox is the key feature that makes browsing on the web
-frictionless by making it safer to run arbitrary code. 
+frictionless by making it safer to run arbitrary code.
 
 ## Make it secure by design
 
@@ -53,7 +53,7 @@ security? Absolutely yes!
 First of all, sandbox features are not the perfect shield. Even though browser
 engineers work hard, browsers could have vulnerabilities and attackers are
 always trying to bypass the sandbox (such as with
-[Spectre Attack](https://developers.google.com/web/updates/2018/02/meltdown-spectre)).
+[Spectre Attack](https://developer.chrome.com/blog/meltdown-spectre/)).
 
 The sandbox could sometimes get in a way of creating a great web experience. For
 example, a browser may block a fetch request to an image hosted on a different
diff --git a/src/site/content/en/secure/browser-sandbox/sandbox.png b/src/site/content/en/secure/browser-sandbox/sandbox.png
deleted file mode 100644
index 18e06e53d39..00000000000
Binary files a/src/site/content/en/secure/browser-sandbox/sandbox.png and /dev/null differ
diff --git a/src/site/content/en/secure/build-a-support-team/index.md b/src/site/content/en/secure/build-a-support-team/index.md
new file mode 100644
index 00000000000..bdbd34d6bc6
--- /dev/null
+++ b/src/site/content/en/secure/build-a-support-team/index.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: Build a support team
+date: 2015-01-01
+updated: 2023-05-02
+description: >
+  Work with your site hoster to deal with spam damage, and find online communities to help.
+tags:
+  - security
+---
+
+{% YouTube "xYBX1JMhHI0" %}
+
+## You'll need
+
+The ability to contact your hoster.
+
+## Tell your hoster that your site has been compromised
+
+Your hoster can make sure their other customers weren't affected, and they can
+potentially help recover your site.
+
+## Locate reputable online resources and helpful communities
+
+Your goal is to find out where to turn if you have problems with the recovery
+process. In addition to this series of articles and your hoster's
+help system, try searching and reading responses in discussion forums or even
+posting a question yourself.
+
+[Google Search Central](https://developers.google.com/search)'s discussion
+forum has a special subforum for
+[Malware and hacked sites](https://support.google.com/webmasters/threads?hl=en&thread_filter=(category:security_malware_hacked)).
+Most responses come from highly engaged members and the community's
+[Product Experts](https://productexperts.withgoogle.com/).
+
+## Determine if this is something you can handle yourself
+
+Fixing the site yourself requires the ability to read and understand code, how
+to use command-line server tools, possibly how to change web server
+configurations for your site. If you feel ill-equipped to do this yourself,
+consider enlisting a qualified professional to help you.
+
+Here are some tips for finding a qualified professional:
+
+* Seek referrals from the standout members of reputable online communities.
+* Transfer your site to new hoster who specializes in site recovery and can
+  recover your site as part of the transfer.
diff --git a/src/site/content/en/secure/clean-and-maintain-your-site/index.md b/src/site/content/en/secure/clean-and-maintain-your-site/index.md
new file mode 100644
index 00000000000..16524cbfa6b
--- /dev/null
+++ b/src/site/content/en/secure/clean-and-maintain-your-site/index.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: Clean and maintain your site
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  This post explains how to clean up your site after it has been hacked.
+tags:
+  - security
+---
+
+## You'll need
+
+* Shell/terminal administrator access to your site's servers: web, database,
+  files
+* Knowledge of shell/terminal commands
+* Understanding of code (such as PHP or JavaScript)
+* Storage to create backups of your site (including the files, database,
+  images, etc.)
+
+{% YouTube "OAvydrgDa6Q" %}
+
+## Next actions
+
+We'll cover several actions in this step:
+
+* Where to locate additional resources if you believe the hacker intended to
+  obtain users' personal information (such as with phishing pages)
+* Option to use [Remove URLs](https://www.google.com/webmasters/tools/removals)
+  in Search Console to expedite removal of entirely new, undesirable,
+  user-visible URLs created by the hacker that you don't want surfacing in
+  Google Search results.
+* Option to use
+  [Fetch as Google](https://www.support.google.com/webmasters/answer/1352276)
+  in Search Console to expedite processing by Google of clean pages --
+  meaning pages that are either new or newly updated -- that you want to
+  appear in Google search results
+* Installation of the latest, most secure version of software
+* Removal of unnecessary or unused applications or plugins that could make
+  your site more vulnerable in the future
+* Restoring good content and eliminating the hacker's content
+* Fixing the root cause vulnerability exploited by the hacker
+* Changing all passwords
+* Planning to keep your site secure
+
+### 1. Locate support resources
+
+Locate support resources when dealing with loss of confidential information,
+such as with phishing pages.
+
+If confidential user information was obtained from your site (for example,
+because it was part of a phishing attack), you may want to consider any
+business, regulatory, or legal responsibilities before you begin cleaning
+your site or deleting any files. In cases of phishing,
+[antiphishing.org](https://antiphishing.org) has useful resources such as
+their document
+[What to do if you your site has been hacked by phishers](https://docs.apwg.org/reports/APWG_WTD_HackedWebsite.pdf).
+
+### 2. Consider expediting removal of new URLs created by the hacker
+
+If the hacker created entirely new, user-visible URLs, you can have these
+pages more quickly removed from Google search results by using the
+[Remove URLs](https://www.google.com/webmasters/tools/removals) feature in
+Search Console. This an entirely optional step. If you simply delete the
+pages and then configure your server to return a
+[404 status code](https://www.support.google.com/webmasters/answer/40132),
+the pages will naturally fall out of Google's index with time.
+
+* The decision to use URL Removal will likely depend on the number of new,
+  unwanted pages created (too many pages might be cumbersome to include in
+  Remove URLs), as well as the potential damage these pages could cause users.
+  To keep the pages submitted through URL Removal from ever appearing in
+  search results, be sure the pages are also configured to return a 404
+  File not Found response for the unwanted/removed URLs.
+* Don't use this tool to request removal of any previously good pages that
+  were only damaged by the hacker -- you'll want these pages to appear in
+  search results once they're cleaned up. _URL Removal is only for pages
+  you'll never want to appear in results._
+
+### 3. Consider expediting processing by Google of your clean pages
+
+If you have new or updated clean pages, you can use the
+[Fetch as Google](https://www.support.google.com/webmasters/answer/1352276)
+feature in Search Console to submit these pages to Google's index. This is
+entirely optional; if you skip this step, your new or modified pages will
+likely be crawled and processed with time.
+
+### 4. Start cleaning up your server(s)
+
+Now is the time to start cleaning up your site based on the notes you took
+during [Assess the damage](hacked_with_spam) and
+[Identify the vulnerability](vulnerability). The following path you'll take
+in this step depends on the type of backup you have available.
+
+* Clean and current backup
+* Clean but outdated backup
+* No backup available
+
+First, check that this backup was created **before** your site was hacked.
+
+#### Clean and current backup
+
+1. Restore your backup.
+2. Install any software upgrades, updates, or patches available. This
+   includes software for the OS if you're in control of the server, and all
+   applications, such as the content management system, ecommerce platform,
+   plugins, templates, etc.
+3. Consider whether you can eliminate software on your server (e.g.,
+   widgets, plugins, or applications) that the site no longer uses.
+4. Correct the vulnerability.
+5. Make sure all issues found during [Assess the damage](hacked_with_spam)
+   are addressed.
+6. Change the passwords one more time for all accounts related to the site
+   (e.g., logins for FTP access, database access, system administrators, and
+   CMS accounts). On Unix-based systems:
+
+```shell
+passwd admin1
+```
+
+#### Clean but outdated backup
+
+1. Make a disk image of your current site even though it's still infected.
+  This copy is just for safety. Mark the copy as infected to distinguish
+  it from the others. On a Unix-based system, making a disk image could be:
+```shell
+dd if=/dev/sda bs=1024 conv=noerror,sync | gzip -c -9 \
+> /mirror/full-backup-20120125-infected.gz
+```
+2. Make a backup file system copy of your server, including images and media
+  files. If you have a database, backup the database as well.
+```shell
+tar -pczf full-backup-20120125-infected.tar.gz www/
+mysqldump -u root -p --all-databases | gzip -9 \
+> fulldb_backup-20120125-infected.sql
+```
+3. Restore the clean but outdated backup on your server.
+4. Consider whether you can eliminate software on your server (e.g., widgets,
+   plugins, or applications) that the site no longer uses.
+5. Upgrade all software, including the OS if you're in control of the server,
+   and all software applications, such as the content management system,
+   ecommerce platform, plugins, templates, etc. Be sure to check and install
+   available security updates and patches.
+6. Correct the vulnerability.
+7. Perform a site `diff` either manually or in an automated fashion --
+   between the clean backup and the current infected copy.
+```shell
+diff -qr www/ backups/full-backup-20120124/
+```
+
+8. Upload any new, clean content that you'd like to preserve from the
+   infected copy on the upgraded server.
+```shell
+rsync -avz /backups/full-backup-20120124/www/clean-file.jpg /www/
+```
+9. Check that each URL listed from [Assess the damage](hacked_with_spam) has
+   been corrected.
+10. Change the passwords one more time for all accounts related to the site
+    (for example, logins for FTP access, database access, system
+    administrators, and CMS accounts). On Unix-based systems:
+```shell
+$passwd admin1
+```
+
+#### No backup available
+
+Make two backups of your site even though it's still infected. Having an extra backup will help recover accidentally deleted content, or allow you  to revert and try again if things go awry. Label each backup with "infected" for future reference.
+
+One of your backups will be a disk image or "clone version" of your site. This format makes restoring content even simpler. You can leave the disk image aside for an emergency. On a Unix-based system, making a disk image could be:
+
+```shell
+dd if=/dev/sda bs=1024 conv=noerror,sync | gzip -c -9 \
+> /mirror/full-backup-20120125-infected.gz
+```
+
+The other backup will be a file system copy from your server, including images and media files. If you have a database, backup the database as well.
+
+```shell
+tar -pczf full-backup-20120125-infected.tar.gz www/
+mysqldump -u root -p --all-databases | gzip -9 \
+> fulldb_backup-20120125-infected.sql
+```
+
+If you don't have a disk image, make two backups of the database and two backups of the filesystem.
+
+Clean the site's content on the new backup filesystem copy (not the server itself)
+
+1. If your earlier investigation found too lenient file permissions, go ahead and correct them. Make sure you do this on the backup copy, not the server itself.
+2. Also on the backup copy, clean all files corresponding to the URLs discovered as compromised from [Assess the damage](/secure/hacked-with-spam/). These may be server configuration files, JavaScript, HTML, PHP.
+3. Make sure to also remove (serve a 404 response) for new files created by the hacker (which you may or may not have submitted using the URL Removal tool in Search Console.)
+4. Correct the vulnerability if it exists in your code or cracked passwords. Input validation libraries or security audits may be of help.
+5. If your site has a database, begin cleaning up hacker-modified records in your backup. Just before you think you're done, perform a check on more of the records to make sure it looks clean.
+6. Change the passwords one more time for all accounts related to the site (for example, logins for FTP access, database access, system administrators, and CMS accounts). On Unix-based systems:
+
+```shell
+$passwd admin1
+```
+
+At this point, the once-infected backup copy of your site should contain only clean data. Keep this clean copy on the side and move
+to action #5.
+
+### 5. Eliminate unnecessary software
+
+Consider whether you can eliminate software on your server -- such as
+widgets, plugins, or applications -- that the site no longer uses.
+This can increase security and simplify future maintenance.
+
+### 6. Clean all servers
+
+1. Perform a clean installation, not just an upgrade. Upgrades may leave
+  files from a previous version. If an infected file remains on the server,
+  another hack is more likely to occur.
+    * The fresh installation should include the OS if you're in control of
+    the server, and all software applications, such as the content
+    management system, ecommerce platform, plugins, templates, etc. Be sure
+    to check for available security updates and patches.
+2. Transfer good content from the clean backup filesystem copy to the
+   freshly installed server(s). Upload/restore only the known clean
+   files/database. Be sure to maintain the appropriate file permissions and
+   not to overwrite the freshly installed system files.
+3. Perform one last change of passwords for all accounts related to the
+   site (e.g., logins for FTP access, database access, system administrators,
+   and CMS accounts). On Unix-based systems:
+
+```shell
+passwd admin1
+```
+
+### 7. Create a long-term maintenance plan
+
+We strongly recommend that you do the following:
+
+* Make regular, automated backups of your site.
+* Be vigilant about keeping software updated.
+* Understand the security practices of all applications, plugins, third-party
+  software, etc., before you install them on your server. A security
+  vulnerability in one software application can affect the safety of your
+  entire site.
+* Enforce creation of strong passwords.
+* Keep all devices used to log in to the machine secure (updated operating
+  system and browser).
+
+### 8. Double-check that cleanup is complete
+
+Make sure you can answer "yes" to the following questions:
+
+* Have I taken the proper steps if the hacker obtained users' personal
+  information?
+* Is my site running the latest, most secure version of software?
+* Have I removed all unnecessary or unused applications or plugins that could
+  make my site more vulnerable in the future?
+* Did I restore my content and eliminate the hacker's content?
+* Did I fix the root cause vulnerability that allowed my site to be hacked?
+* Do I have a plan to keep my site secure?
+
+You can now bring your site back online.
diff --git a/src/site/content/en/secure/codelab-same-origin-iframe/codelab-same-origin-iframe.md b/src/site/content/en/secure/codelab-same-origin-iframe/codelab-same-origin-iframe.md
index 7bac9bda0e9..d9b113928c4 100644
--- a/src/site/content/en/secure/codelab-same-origin-iframe/codelab-same-origin-iframe.md
+++ b/src/site/content/en/secure/codelab-same-origin-iframe/codelab-same-origin-iframe.md
@@ -28,4 +28,4 @@ const message = iframe.contentDocument.getElementById('message').innerText;
 Try changing the `src` of the `iframe` to `https://other-iframe.glitch.me/`.
 Can the host page still access the secret message?
 
-Since the host and embeded `iframe` do not have the same origin, access to the data is restricted.
+Since the host and embedded `iframe` do not have the same origin, access to the data is restricted.
diff --git a/src/site/content/en/secure/cross-origin-isolation-guide/index.md b/src/site/content/en/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..baba1b50b89
--- /dev/null
+++ b/src/site/content/en/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,225 @@
+---
+layout: post
+title: A guide to enable cross-origin isolation
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2022-06-23
+subhead: |
+  Cross-origin isolation enables a web page to use powerful features such as
+  SharedArrayBuffer. This article explains how to enable cross-origin
+  isolation on your website.
+description: |
+  Cross-origin isolation enables a web page to use powerful features such as
+  SharedArrayBuffer. This article explains how to enable cross-origin
+  isolation on your website.
+tags:
+  - security
+---
+
+This guide shows you how to enable cross-origin isolation. Cross-origin
+isolation is required if you want to use
+[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer),
+[`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/)
+or [high resolution timer with better
+precision](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/).
+
+If you intend to enable cross-origin isolation, evaluate the impact this will
+have on other cross-origin resources on your website, such as ad placements.
+
+{% Details %}
+{% DetailsSummary %}
+Determine where in your website `SharedArrayBuffer` is used
+
+Starting in Chrome 92, functionalities that use `SharedArrayBuffer` will no longer
+work without cross-origin isolation. If you landed on this page due to a
+`SharedArrayBuffer` deprecation message, it's likely either your website or one of
+the resources embedded on it is using `SharedArrayBuffer`. To ensure nothing breaks
+on your website due to deprecation, start by identifying where it's used.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+* Turn on cross-origin isolation to keep using `SharedArrayBuffer`.
+* If you rely on third-party code that uses `SharedArrayBuffer`, notify the third-party
+  provider to take action.
+{% endAside %}
+
+If you are not sure where in your site a `SharedArrayBuffer` is used, there are
+two ways find out:
+
+* Using Chrome DevTools
+* (Advanced) Using Deprecation Reporting
+
+If you already know where you are using `SharedArrayBuffer`, skip to
+[Analyze the impact of cross-origin isolation](#analysis).
+
+### Using Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/open/)
+allows developers to inspect websites.
+
+1. [Open the Chrome
+   DevTools](https://developer.chrome.com/docs/devtools/open/) on
+   the page you suspect might be using `SharedArrayBuffer`.
+2. Select the **Console** panel.
+3. If the page is using `SharedArrayBuffer`, the following message will show up:
+      ```text
+      [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+      ```
+4. The filename and the line number at the end of the message (for example, `common-bundle.js:535`)
+   indicate where the `SharedArrayBuffer` is coming from. If it's a third-party library,
+   contact the developer to fix the issue. If it's implemented as part of your website, follow
+   the guide below to enable cross-origin isolation.
+
+<figure>
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation", width="800", height="163" %}
+   <figcaption>
+      DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation.
+   </figcaption>
+</figure>
+
+### (Advanced) Using Deprecation Reporting
+
+Some browsers have [a reporting functionality of deprecating
+APIs](https://wicg.github.io/deprecation-reporting/) to a specified endpoint.
+
+1. [Set up a deprecation report server and get the reporting
+   URL](/coop-coep/#set-up-reporting-endpoint). You can achieve this by either
+   using a public service or building one yourself.
+2. Using the URL, set the following HTTP header to pages that are potentially
+   serving `SharedArrayBuffer`.
+      ```http
+      Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+      ```
+3. Once the header starts to propagate, the endpoint you registered to should
+   start collecting deprecation reports.
+
+See an example implementation here:
+[https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me).
+
+{% endDetails %}
+
+## Analyze the impact of cross-origin isolation  {: #analysis}
+
+Wouldn't it be great if you could assess the impact that enabling cross-origin
+isolation would have on your site without actually breaking anything? The
+[`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) and
+[`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy)
+HTTP headers allow you to do just that.
+
+1. Set [`Cross-Origin-Opener-Policy-Report-Only:
+   same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document)
+   on your top-level document. As the name indicates, this header only sends
+   reports about the impact that `COOP: same-origin` **would** have on your
+   site—it won't actually disable communication with popup windows.
+2. Set up reporting and configure a web server to receive and save the reports.
+3. Set [`Cross-Origin-Embedder-Policy-Report-Only:
+   require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources)
+   on your top-level document. Again, this header lets you see the impact of
+   enabling `COEP: require-corp` without actually affecting your site's
+   functioning yet. You can configure this header to send reports to the same
+   reporting server that you set up in the previous step.
+
+{% Aside %}
+You can also [enable the **Domain**
+column](https://developer.chrome.com/docs/devtools/network/#information)
+in Chrome DevTools **Network** panel to get a general view of which resources
+would be impacted.
+{% endAside %}
+
+{% Aside 'caution' %}
+
+Enabling cross-origin isolation will block the loading of cross-origin resources
+that you don't explicitly opt-in, and it will prevent your top-level document
+from being able to communicate with popup windows.
+
+We've been exploring ways to deploy `Cross-Origin-Resource-Policy` at scale, as
+cross-origin isolation requires all subresources to explicitly opt-in. And we
+have come up with the idea of going in the opposite direction: [a new COEP
+"credentialless"
+mode](https://developer.chrome.com/blog/coep-credentialless-origin-trial/) that
+allows loading resources without the CORP header by stripping all their
+credentials. We hope this will lighten your burden of making sure the
+subresources are sending the `Cross-Origin-Resource-Policy` header.
+
+Though `credentialless` mode is available on Chrome from version 96, it's not
+supported by any other browsers yet, this may cause some developers find it
+challenging to deploy COOP or COEP at this stage.
+
+Also, it's known that the `Cross-Origin-Opener-Policy: same-origin` header will
+break integrations that require cross-origin window interactions such as OAuth
+and payments. To mitigate this problem, we are exploring [relaxing the
+condition](https://github.com/whatwg/html/issues/6364) to enable cross-origin
+isolation to `Cross-Origin-Opener-Policy: same-origin-allow-popups`. This way
+the communication with the window opened by itself will be possible.
+
+If you want to enable cross-origin isolation but are blocked by these
+challenges, we recommend [registering for an origin
+trial](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)
+and waiting until the new modes are available. We are not planning to terminate
+the origin trial until these new modes are available.
+
+{% endAside %}
+
+## Mitigate the impact of cross-origin isolation
+
+After you have determined which resources will be affected by cross-origin
+isolation, here are general guidelines for how you actually opt-in those
+cross-origin resources:
+
+1. On cross-origin resources such as images, scripts, stylesheets, iframes, and
+   others, set the [`Cross-Origin-Resource-Policy:
+   cross-origin`](https://resourcepolicy.fyi/#cross-origin) header. On same-site
+   resources, set [`Cross-Origin-Resource-Policy:
+   same-site`](https://resourcepolicy.fyi/#same-origin) header.
+2. For resources loadable using [CORS](/cross-origin-resource-sharing/), make
+   sure it is enabled, by setting the `crossorigin` attribute in its HTML tag
+   (for example, `<img src="example.jpg" crossorigin>`). For JavaScript fetch
+   request, make sure `request.mode` is set to `cors`.
+3. If you want to use powerful features such as `SharedArrayBuffer` inside a
+   loaded iframe, append `allow="cross-origin-isolated"` to the `<iframe>`.
+4. If cross-origin resources loaded into iframes or worker scripts involve
+   another layer of iframes or worker scripts, recursively apply steps described
+   in this section before moving forward.
+5. Once you confirm that all cross-origin resources are opted-in, set the
+   `Cross-Origin-Embedder-Policy: require-corp` header on iframes and worker
+   scripts (This is required regardless of same-origin or cross-origin).
+6. Make sure there are no cross-origin popup windows that require communication
+   through `postMessage()`. There's no way to keep them working when
+   cross-origin isolation is enabled. You can move the communication to another
+   document that isn't cross-origin isolated, or use a different communication
+   method (for example, HTTP requests).
+
+## Enable cross-origin isolation
+
+After you have mitigated the impact by cross-origin isolation, here are general
+guidelines to enable cross-origin isolation:
+
+1. Set the `Cross-Origin-Opener-Policy: same-origin` header on your top-level
+   document. If you had set `Cross-Origin-Opener-Policy-Report-Only:
+   same-origin`, replace it. This blocks communication between your top-level
+   document and its popup windows.
+2. Set the `Cross-Origin-Embedder-Policy: require-corp` header on your top-level
+   document. If you had set `Cross-Origin-Embedder-Policy-Report-Only:
+   require-corp`, replace it. This will block the loading of cross-origin
+   resources that are not opted-in.
+3. Check that `self.crossOriginIsolated` returns `true` in console to verify
+   that your page is cross-origin isolated.
+
+{% Aside 'gotchas' %}
+
+Enabling cross-origin isolation on a local server might be a pain as simple
+servers do not support sending headers. You can launch Chrome with a command
+line flag `--enable-features=SharedArrayBuffer` to enable `SharedArrayBuffer`
+without enabling cross-origin isolation. Learn [how to run Chrome with a command
+line flag on respective
+platforms](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+{% endAside %}
+
+## Resources
+
+* [Making your website "cross-origin isolated" using COOP and COEP](/coop-coep/)
+* [SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome
+  92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/en/secure/cross-origin-resource-sharing/index.md b/src/site/content/en/secure/cross-origin-resource-sharing/index.md
index 6bfd189a8c5..82d330b9e98 100644
--- a/src/site/content/en/secure/cross-origin-resource-sharing/index.md
+++ b/src/site/content/en/secure/cross-origin-resource-sharing/index.md
@@ -35,9 +35,9 @@ additional origin.
 
 ## How does a resource request work on the web?
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./request_response.png" alt="request and response">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="request and response", width="668", height="327" %}
+  <figcaption>
     Figure: Illustrated client request and server response
   </figcaption>
 </figure>
@@ -182,8 +182,8 @@ Access-Control-Allow-Credentials: true
 
 ## Preflight requests for complex HTTP calls
 
-If a web app needs a complex HTTP request, the browser adds a **preflight
-request** to the front of the request chain.
+If a web app needs a complex HTTP request, the browser adds a **[preflight
+request](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)** to the front of the request chain.
 
 The CORS specification defines a **complex request** as
 
diff --git a/src/site/content/en/secure/cross-origin-resource-sharing/request_response.png b/src/site/content/en/secure/cross-origin-resource-sharing/request_response.png
deleted file mode 100644
index 76aebab8eb5..00000000000
Binary files a/src/site/content/en/secure/cross-origin-resource-sharing/request_response.png and /dev/null differ
diff --git a/src/site/content/en/secure/enable-https/index.md b/src/site/content/en/secure/enable-https/index.md
new file mode 100644
index 00000000000..e23ab74f657
--- /dev/null
+++ b/src/site/content/en/secure/enable-https/index.md
@@ -0,0 +1,474 @@
+---
+layout: post
+title: Enabling HTTPS on your servers
+description: >
+  Enabling HTTPS on your servers is critical to securing your webpages.
+authors:
+  - chrispalmer
+  - mattgaunt
+date: 2015-03-27
+updated: 2022-01-28
+tags:
+  - security
+---
+
+## Steps covered in this article
+
+1. Create a 2048-bit RSA public/private key pair.
+1. Generate a certificate signing request (CSR) that embeds your public key.
+1. Share your CSR with your Certificate Authority (CA) to receive a final
+  certificate or a certificate chain.
+1. Install your final certificate in a non-web-accessible place such as
+  `/etc/ssl` (Linux and Unix) or wherever IIS requires it (Windows).
+
+## Generating keys and certificate signing requests
+
+This section uses the openssl command-line program, which comes with most
+Linux, BSD, and Mac OS X systems, to generate private/public keys and a CSR.
+
+### Generate a public/private key pair
+
+Let's start by generating a 2,048-bit RSA key pair. A smaller key, such
+as 1,024 bits, is insufficiently resistant to brute-force guessing attacks. A
+larger key, such as 4,096 bits, is overkill. Over time, key sizes increase as
+computer processing gets cheaper. 2,048 is currently the sweet spot.
+
+The command to generate the RSA key pair is:
+
+```bash
+openssl genrsa -out www.example.com.key 2048
+```
+
+This gives the following output:
+
+```bash
+Generating RSA private key, 2048 bit long modulus
+.+++
+.......................................................................................+++
+e is 65537 (0x10001)
+```
+
+### Generate a certificate signing request
+
+In this step, you embed your public key and information about your organization
+and your website into a certificate signing request or CSR. The *openssl*
+command interactively asks you for the required metadata.
+
+Running the following command:
+
+```bash
+openssl req -new -sha256 -key www.example.com.key -out www.example.com.csr
+```
+
+Outputs the following:
+
+```bash
+You are about to be asked to enter information that will be incorporated
+into your certificate request
+
+What you are about to enter is what is called a Distinguished Name or a DN.
+There are quite a few fields but you can leave some blank
+For some fields there will be a default value,
+If you enter '.', the field will be left blank.
+-----
+Country Name (2 letter code) [AU]:CA
+State or Province Name (full name) [Some-State]:California
+Locality Name (for example, city) []:Mountain View
+Organization Name (for example, company) [Internet Widgits Pty Ltd]:Example, Inc.
+Organizational Unit Name (for example, section) []:Webmaster Help Center Example
+Team
+Common Name (e.g. server FQDN or YOUR name) []:www.example.com
+Email Address []:webmaster@example.com
+
+Please enter the following 'extra' attributes
+to be sent with your certificate request
+A challenge password []:
+An optional company name []:
+```
+
+To ensure the validity of the CSR, run this command:
+
+```bash
+openssl req -text -in www.example.com.csr -noout
+```
+
+And the response should look like this:
+
+```bash
+Certificate Request:
+    Data:
+        Version: 0 (0x0)
+        Subject: C=CA, ST=California, L=Mountain View, O=Google, Inc.,
+OU=Webmaster Help Center Example Team,
+CN=www.example.com/emailAddress=webmaster@example.com
+        Subject Public Key Info:
+            Public Key Algorithm: rsaEncryption
+                Public-Key: (2048 bit)
+                Modulus:
+                    00:ad:fc:58:e0:da:f2:0b:73:51:93:29:a5:d3:9e:
+                    f8:f1:14:13:64:cc:e0:bc:be:26:5d:04:e1:58:dc:
+                    ...
+                Exponent: 65537 (0x10001)
+        Attributes:
+            a0:00
+    Signature Algorithm: sha256WithRSAEncryption
+         5f:05:f3:71:d5:f7:b7:b6:dc:17:cc:88:03:b8:87:29:f6:87:
+         2f:7f:00:49:08:0a:20:41:0b:70:03:04:7d:94:af:69:3d:f4:
+         ...
+```
+
+### Submit your CSR to a certificate authority
+
+Different certificate authorities (CAs) require different methods for sending
+them your CSRs. Methods may include using a form on their website, sending the
+CSR by email, or something else. Some CAs (or their resellers) may even automate
+some or all of the process (including, in some cases, key pair and CSR
+generation).
+
+Send the CSR to your CA, and follow their instructions to receive your final
+certificate or certificate chain.
+
+Different CAs charge different amounts of money for the service of vouching
+for your public key.
+
+There are also options for mapping your key to more than one DNS name, including
+several distinct names (e.g. all of example.com, www.example.com, example.net,
+and www.example.net) or "wildcard" names such as \*.example.com.
+
+For example, one CA currently offers these prices:
+
+* Standard: $16/year, valid for example.com and www.example.com.
+* Wildcard: $150/year, valid for example.com and \*.example.com.
+
+At these prices, wildcard certificates are economical when you have more than 9
+subdomains; otherwise, you can just buy one or more single-name certificates. (If
+you have more than, say, five subdomains, you might find a wildcard certificate
+more convenient when you come to enable HTTPS on your servers.)
+
+{% Aside %}
+Keep in mind that in wildcard certificates the wildcard applies to only
+one DNS label. A certificate good for \*.example.com will work for
+foo.example.com and bar.example.com, but _not_ for foo.bar.example.com.
+{% endAside %}
+
+Copy the certificates to all your front-end servers in a non-web-accessible
+place such as `/etc/ssl` (Linux and Unix) or wherever IIS (Windows) requires
+them.
+
+## Enable HTTPS on your servers
+
+Enabling HTTPS on your servers is a critical step in providing security for
+your web pages.
+
+* Use Mozilla's Server Configuration tool to set up your server for HTTPS support.
+* Regularly test your site with the Qualys' handy SSL Server Test and ensure
+  you get at least an A or A+.
+
+At this point, you must make a crucial operations decision. Choose one of the
+following:
+
+* Dedicate a distinct IP address to each hostname your web server serves content
+  from.
+* Use name-based virtual hosting.
+
+If you have been using distinct IP addresses for each hostname, you can
+easily support both HTTP and HTTPS for all clients.
+
+However, most site operators use name-based virtual hosting to conserve IP
+addresses and because it's more convenient in general. The problem with IE on
+Windows XP and Android earlier than 2.3 is that they do not understand [Server
+Name Indication](https://en.wikipedia.org/wiki/Server_Name_Indication)
+(SNI), which is crucial for HTTPS name-based virtual hosting.
+
+Someday—hopefully soon—clients that don't support SNI will be replaced
+with modern software. Monitor the user agent string in your request logs to know
+when enough of your user population has migrated to modern software. (You can
+decide what your threshold is; perhaps less than 5%, or less then 1%.)
+
+If you don't already have HTTPS service available on your servers, enable it now
+(without redirecting HTTP to HTTPS; see below). Configure your web server to use
+the certificates you bought and installed. You might find [Mozilla's handy
+configuration
+generator](https://mozilla.github.io/server-side-tls/ssl-config-generator/)
+useful.
+
+If you have many hostnames or subdomains, they each need to use the right
+certificate.
+
+{% Aside 'warning'%}
+Warning: If you've already completed these steps, but are using HTTPS for the
+sole purpose of redirecting clients back to HTTP, stop doing that now. See the
+next section to make sure HTTPS and HTTP work smoothly.
+{% endAside %}
+
+{% Aside %}
+Ultimately you should redirect HTTP requests to HTTPS and use HTTP
+Strict Transport Security (HSTS). However, this is not the right stage in
+the migration process to do that; see "Redirect HTTP To HTTPS" and
+"Turn On Strict Transport Security And Secure Cookies."
+{% endAside %}
+
+Now, and throughout your site's lifetime, check your HTTPS configuration with
+[Qualys' handy SSL Server Test](https://www.ssllabs.com/ssltest/).
+Your site should score an A or A+; treat anything that causes a lower grade as
+a bug. (Today's A is tomorrow's B, because attacks against algorithms and
+protocols are always improving!)
+
+## Make intrasite URLs relative
+
+Now that you are serving your site on both HTTP and HTTPS, things need to work as
+smoothly as possible, regardless of protocol. An important factor is using
+relative URLs for intrasite links.
+
+Make sure intrasite URLs and external URLs are agnostic to protocol; that is,
+make sure you use relative paths or leave out the protocol like
+`//example.com/something.js`.
+
+A problem arises when you serve a page via HTTPS that includes HTTP
+resources, known as
+[mixed content](/what-is-mixed-content/).
+Browsers warn users that the full strength of HTTPS has been lost. In fact,
+in the case of active mixed content (script, plug-ins, CSS, iframes), browsers
+often simply won't load or execute the content at all, resulting in a
+broken page. And remember, it's perfectly OK to include HTTPS resources in an
+HTTP page.
+
+{% Aside %}
+See [Fixing Mixed Content](/fixing-mixed-content)
+for more details about ways to fix and prevent mixed content.
+{% endAside %}
+
+Additionally, when you link to other pages in your site, users could get
+downgraded from HTTPS to HTTP.
+
+These problems happen when your pages include fully-qualified, intrasite URLs
+that use the *http://* scheme.
+
+{% Compare 'worse' %}
+
+```html
+<h1>Welcome To Example.com</h1>
+<script src="http://example.com/jquery.js"></script>
+<link rel="stylesheet" href="http://assets.example.com/style.css"/>
+<img src="http://img.example.com/logo.png"/>;
+<p>A <a href="http://example.com/2014/12/24/">new post on cats!</a></p>
+```
+
+{% CompareCaption %}
+Avoid using fully qualified intrasite URLs.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+In other words, make intrasite URLs as relative as possible: either
+protocol-relative (lacking a protocol, starting with `//example.com`) or
+host-relative (starting with just the path, like `/jquery.js`).
+
+{% Compare 'better' %}
+
+```html
+<h1>Welcome To Example.com</h1>
+<script src="/jquery.js"></script>
+<link rel="stylesheet" href="/assets/style.css"/>
+<img src="/images/logo.png"/>;
+<p>A <a href="/2014/12/24/">new post on cats!</a></p>
+```
+
+{% CompareCaption %}
+Use relative intrasite URLs.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<h1>Welcome To Example.com</h1>
+<script src="//example.com/jquery.js"></script>
+<link rel="stylesheet" href="//assets.example.com/style.css"/>
+<img src="//img.example.com/logo.png"/>;
+<p>A <a href="//example.com/2014/12/24/">new post on cats!</a></p>
+```
+
+{% CompareCaption %}
+Or, use protocol-relative intrasite URLs.
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<h1>Welcome To Example.com</h1>
+<script src="/jquery.js"></script>
+<link rel="stylesheet" href="/assets/style.css"/>
+<img src="/images/logo.png"/>;
+<p>A <a href="/2014/12/24/">new post on cats!</a></p>
+&lt;p>Check out this <a href="<b>https://foo.com/</b>">other cool site.</a></p>
+```
+
+{% CompareCaption %}
+Use HTTPS URLs for intersite URLs (where possible).
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Do this with a script, not by hand. If your site's content is in a database,
+test your script on a development copy of your database. If
+your site's content consists of simple files, test your script on a
+development copy of the files. Push the changes to production only after the
+changes pass QA, as normal. You can use [Bram van Damme's
+script](https://github.com/bramus/mixed-content-scan) or something similar to
+detect mixed content in your site.
+
+When linking to other sites (as opposed to including resources from them),
+don't change the protocol since you don't have control over how those sites
+operate.
+
+To make migration smoother for large sites, we recommend
+protocol-relative URLs. If you are not sure whether you can fully deploy
+HTTPS yet, forcing your site to use HTTPS for all sub-resources may backfire.
+There is likely to be a period of time in which HTTPS is new and weird for
+you, and the HTTP site must still work as well as ever. Over time, you'll
+complete the migration and lock in HTTPS (see the next two sections).
+
+If your site depends on scripts, images, or other resources served from a third
+party, such as a CDN or jquery.com, you have two options:
+
+* Use protocol-relative URLs for these resources. If the third party does not
+  serve HTTPS, ask them to. Most already do, including jquery.com.
+* Serve the resources from a server that you control, and which offers both HTTP
+  and HTTPS. This is often a good idea anyway, because then you have better
+  control over your site's appearance, performance, and security. In addition,
+  you don't have to trust a third party, which is always nice.
+
+
+{% Aside %}
+Keep in mind that you also need to change intrasite URLs in your
+stylesheets, JavaScript, redirect rules, `<link>` tags, and CSP declarations,
+not just in the HTML pages.
+{% endAside %}
+
+## Redirect HTTP to HTTPS
+
+You need to put a [canonical link](https://support.google.com/webmasters/answer/139066)
+at the head of your page to tell search engines that HTTPS is the best way to
+get to your site.
+
+Set `<link rel="canonical" href="https://…"/>` tags in your pages. This
+helps search engines determine the best way to get to your site.
+
+## Turn on Strict Transport Security and secure cookies
+
+At this point, you are ready to "lock in" the use of HTTPS.
+
+* Use HTTP Strict Transport Security (HSTS) to avoid the cost of the 301 redirect.
+* Always set the Secure flag on cookies.
+
+First, use [Strict Transport Security](https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security)
+to tell clients that they should always connect to your server via HTTPS, even
+when following an `http://` reference. This defeats attacks such as
+[SSL Stripping](http://www.thoughtcrime.org/software/sslstrip/),
+and also avoids the round-trip cost of the `301 redirect` that we enabled in
+[Redirect HTTP to HTTPS](#redirect-http-to-https).
+
+{% Aside %}
+Clients that have noted your site as a known HSTS Host are likely to
+<a href="https://tools.ietf.org/html/rfc6797#section-12.1">hard-fail
+if your site ever has an error in its TLS configuration</a> (such as an
+expired certificate). HSTS is explicitly designed this way to ensure that
+network attackers cannot trick clients into accessing the site without HTTPS.
+Do not enable HSTS until you are certain that your site operation is robust
+enough to avoid ever deploying HTTPS with certificate validation errors.
+{% endAside %}
+
+Turn on HTTP Strict Transport Security (HSTS) by setting the
+`Strict-Transport-Security` header. [OWASP's HSTS page has links to
+instructions](https://www.owasp.org/index.php/HTTP_Strict_Transport_Security)
+for various server software.
+
+Most web servers offer a similar ability to add custom headers.
+
+{% Aside %}
+`max-age` is measured in seconds. You can start with low values and
+gradually increase the `max-age` as you become more comfortable operating
+an HTTPS-only site.
+{% endAside %}
+
+It is also important to make sure that clients never send cookies (such as for
+authentication or site preferences) over HTTP. For example, if a user's
+authentication cookie were to be exposed in plain text, the security guarantee of
+their entire session would be destroyed—even if you have done everything else
+right!
+
+Therefore, change your web application to always set the Secure flag on cookies
+that it sets. [This OWASP page explains how to set the Secure
+flag](https://www.owasp.org/index.php/SecureFlag) in several application
+frameworks. Every application framework has a way to set the flag.
+
+Most web servers offer a simple redirect feature. Use `301 (Moved Permanently)`
+to indicate to search engines and browsers that the HTTPS version is canonical,
+and redirect your users to the HTTPS version of your site from HTTP.
+
+### Search ranking
+
+Google uses [HTTPS as a positive search quality
+indicator](https://googlewebmastercentral.blogspot.com/2014/08/https-as-ranking-signal.html).
+Google also publishes a guide for [how to transfer, move, or migrate your
+site](https://support.google.com/webmasters/topic/6029673) while maintaining
+its search rank. Bing also publishes [guidelines for
+webmasters](http://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a).
+
+### Performance
+
+When the content and application layers are well-tuned (see
+[Steve Souders' books](https://stevesouders.com/) for great
+advice), the remaining TLS performance concerns are generally small, relative
+to the overall cost of the application. Additionally, you can reduce and
+amortize those costs. (For great advice on TLS optimization and generally, see
+[High Performance Browser Networking](https://hpbn.co/) by Ilya Grigorik.)
+See also Ivan Ristic's [OpenSSL
+Cookbook](https://www.feistyduck.com/books/openssl-cookbook/) and
+[Bulletproof SSL And TLS](https://www.feistyduck.com/books/bulletproof-ssl-and-tls/).
+
+In some cases, TLS can _improve_ performance, mostly as a result of making
+HTTP/2 possible. Chris Palmer gave a talk on [HTTPS and HTTP/2 performance at
+Chrome Dev Summit 2014](https://developers.google.com/web/shows/cds/2014/tls-all-the-things).
+
+### Referer headers
+
+When users follow links from your HTTPS site to other HTTP sites, user agents
+don't send the Referer header. If this is a problem, there are several ways to
+solve it:
+
+* The other sites should migrate to HTTPS. If referee sites can complete the
+  [Enable HTTPS on your servers](#enable-https-on-your-servers) section of
+  this guide, you can change links in your site to theirs from `http://` to
+  `https://`, or you can use protocol-relative links.
+* To work around a variety of problems with Referer headers, use the new
+  [Referrer Policy standard](http://www.w3.org/TR/referrer-policy/#referrer-policy-delivery-meta).
+
+Because search engines are migrating to HTTPS, in the future, you are likely
+to see _more_ Referer headers when you migrate to HTTPS.
+
+{% Aside 'caution' %}
+According to the [HTTP RFC](https://tools.ietf.org/html/rfc2616#section-15.1.3),
+clients **SHOULD NOT** include a Referer header field in a (non-secure) HTTP
+request if the referring page is transferred with a secure protocol.
+{% endAside %}
+
+### Ad revenue
+
+Site operators that monetize their site by showing ads want to make sure that
+migrating to HTTPS does not reduce ad impressions. But due to mixed content
+security concerns, an HTTP `<iframe>` doesn't work in an HTTPS page. There is a
+tricky collective action problem here: until advertisers publish over HTTPS,
+site operators cannot migrate to HTTPS without losing ad revenue; but until site
+operators migrate to HTTPS, advertisers have little motivation to publish HTTPS.
+
+Advertisers should at least offer ad service via HTTPS (such as by completing
+the "Enable HTTPS on your servers" section on this page). Many already do. You
+should ask advertisers that do not serve HTTPS at all to at least start.
+You may wish to defer completing
+[Make IntraSite URLs relative](#make-intrasite-urls-relative) until enough
+advertisers interoperate properly.
diff --git a/src/site/content/en/secure/faq-for-hacked-sites/index.md b/src/site/content/en/secure/faq-for-hacked-sites/index.md
new file mode 100644
index 00000000000..b8a2bfdbaa9
--- /dev/null
+++ b/src/site/content/en/secure/faq-for-hacked-sites/index.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: FAQ for hacked sites
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  This article brings together answers to the questions about hacking we at Google hear most often. 
+tags:
+  - security
+---
+
+This article brings together answers to the questions about hacking we at
+Google hear most often.
+
+## Why did my site get hacked? {: #mean }
+
+Hackers have different motives for compromising a website. Examples include:
+
+* **Financial gain through web spam:** Placing spam links on your website or
+  redirecting your website's traffic to external parties.
+* **Stealing sensitive information:** Copying files containing customer
+  data like credit card numbers, personally identifiable information, or
+  login credentials.
+* **Communicating a political or social message:** Defacing a website as a
+  form of hacktivism to emphasize a point of view and cause change.
+* **Malware:** Injecting malicious code through scripts or iFrames that pull
+  content from another website that tries to attack any computer that views
+  the page.
+* **Thrill-seeking or vandalism:** For no particular reason other than the
+  thrill of invading and vandalizing your site.
+
+## How do I know I’ve been hacked? {: #know }
+
+Examples of common signs that your website has been attacked include
+unusual traffic spikes (especially from unrelated search terms), visitors
+reporting malware, newly created account(s) with administrator privileges,
+or suspicious new pages added to your site.
+
+## How did I get hacked? {: #how }
+
+There are many possibilities such as software vulnerabilities, leaked or
+guessed password, unauthenticated administrator pages, unsanitized database
+queries, unnecessary open ports, or exploiting a human weaknesses through
+social engineering like phishing or impersonation of a trusted authority.
+Eliminating or mitigating these vulnerabilities is extremely important.
+
+## Where can I go if I have additional questions? {: #questions }
+
+The [Webmaster Help Forums](https://support.google.com/webmasters/go/community)
+has an active group of Googlers and technical contributors that can help you
+with additional feedback. Also, most major Content Management System (CMS)
+providers have detailed documentation on how to resolve hacked cases. You
+can also seek help from a trusted security professional.
+
+## How can I reproduce the warnings displayed to the users of my site?
+
+Safe Browsing displays warnings based on the user's browsing context. As a webmaster,
+you may not be able to easily reproduce the warnings in your own browsing.
+The Search Console [Security
+Issues report](https://support.google.com/webmasters/answer/9044101) will tell
+you whether the issues Safe Browsing has seen with your website have been
+addressed.
+
diff --git a/src/site/content/en/secure/first-party-cookie-recipes/index.md b/src/site/content/en/secure/first-party-cookie-recipes/index.md
new file mode 100644
index 00000000000..3e2a6dc69e3
--- /dev/null
+++ b/src/site/content/en/secure/first-party-cookie-recipes/index.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: First-party cookie recipes
+subhead: |
+  Learn how to set first-party cookies to ensure security, cross-browser compatibility, and minimize chances of breakage once third-party cookies are phased out.
+authors:
+  - mihajlija
+date: 2022-06-07
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/7znCv6cME5csfvqZlbZJ.jpg
+description: |
+  Learn how to set first-party cookies to ensure security, cross-browser compatibility, and minimize chances of breakage once third-party cookies are phased out.
+tags:
+  - security
+  - privacy
+  - blog
+---
+
+
+Cookies can be first-party or third-party relative to the user's context; depending on which site the user is on at the time. If the cookie's registrable domain and scheme match the current top-level page, that is, what's displayed in the browser's address bar, the cookie is considered to be from the [same site](/same-site-same-origin/) as the page and it's generally referred to as a first-party cookie.
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/bN6n3dyOEkhwnVUFGOUQ.png", alt="", width="800", height="604" %}
+
+Cookies from domains other than the current site are generally referred to as [third-party cookies](/samesite-cookie-recipes/#use-cases-for-cross-site-or-third-party-cookies).
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/HtvSbbHN7Sdj1xJURIqj.png", alt="", width="800", height="693" %}
+
+{% Aside %}
+The distinction between first-party and third-party context on the web isn't always obvious and the effect it has on different resources can vary. To address some of the challenges with how browsers treat first-party and third-party cookies, [First-Party Sets](https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/) proposes to allow related domain names owned and operated by the same entity to declare themselves as belonging to the same first party.
+{% endAside %}
+
+## The good first-party cookie recipe
+
+If the cookie you're setting is not used across sites, for example, it's used to manage sessions on your site and it's never used in a cross-site iframe, that cookie is always used in a first-party context.
+
+By default, cookies can be shared across sites, accessed by JavaScript, and sent over HTTP connections, which comes with some privacy and security risks. While there's ongoing work to improve the default behavior, through [Privacy Sandbox](https://developer.chrome.com/docs/privacy-sandbox/) and other proposals such as [origin-bound cookies](https://github.com/sbingler/Origin-Bound-Cookies), there's a lot you can do today by setting additional attributes on your cookies.
+
+The following configuration is best practice, ensuring security and cross-browser compatibility for most first-party cookies. It will provide you with a safe foundation, which you can adjust to open up permissions only when necessary. This article also covers recipe variations for some specific use-cases.
+
+### The recipe
+
+```text
+Set-Cookie:
+__Host-cookie-name=cookie-value;
+Secure;
+Path=/;
+HttpOnly;
+Max-Age=7776000;
+SameSite=Lax;
+```
+
+{% Details %}
+
+{% DetailsSummary %}
+Details
+{% endDetailsSummary %}
+
+`__Host` is an optional prefix that makes some attributes mandatory and forbids others:
+
+-   `Secure` must be present
+-   `Domain` must be omitted
+-   `Path` must be `/`
+
+With `__Host` added, you can rely on the browser to check if attributes above are set in line with `__Host` rules and reject the cookie if not.
+
+`Secure` protects cookies from being stolen on insecure networks because it only allows sending cookies over [HTTPS connections](/why-https-matters/). If you haven't fully [migrated your site to HTTPS](/why-https-matters/), make that a priority.
+
+The `Domain` attribute specifies which hosts can receive a cookie. Omitting it restricts the cookie to the current document host, excluding subdomains: the cookie for `example.com` will be sent on every request to `example.com` but not on requests to `images.example.com`. If you have different apps running on different subdomains, this reduces the risk of one compromised domain allowing a door into the others.
+
+`Path` indicates the path that must exist in the requested URL for the browser to send the `Cookie` header. Setting ``Path=/`` means that the cookie is sent to all URL paths on that domain. The combination of no `Domain` and `Path=/` makes the cookie bound to the origin as closely as possible, so it behaves similarly to other client-side storage such as `LocalStorage`—there's no confusion that `example.com/a` might receive different values to `example.com/b`.
+
+The `HttpOnly` attribute adds some protection against malicious third-party scripts on your sites by [restricting JavaScript access](https://developer.mozilla.org/docs/Web/HTTP/Cookies#restrict_access_to_cookies). It allows a cookie to be sent only in request headers and makes them unavailable to JavaScript via `document.cookie`.
+
+{% Aside %}
+Even with `HttpOnly`, you can still trigger requests from JavaScript, like fetch or XML HTTP requests⁠—and if you've specified including credentials, cookies (including HTTP only cookies) will be sent⁠ on those requests—they're just not visible to those client-side scripts in any way. If any of those scripts on your site have been compromised or are malicious, their access to potentially sensitive cookie data is limited.
+{% endAside %}
+
+`Max-Age` limits the life of a cookie as browser sessions can last a pretty long time and you don't want stale cookies hanging around forever. It's good for short-term cookies, such as user sessions or even shorter ones such as tokens for form submission. `Max-Age` is defined in seconds and in the example above it's set to 7776000 seconds which is 90 days. This is a reasonable default, which you can change depending on your use case.
+
+{% Aside %}
+The maximum value of [`Max-Age` must not be greater than 400 days](https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-the-max-age-attribute) (34560000 seconds).  Another way to limit the life of a cookie is specifying the `Expires` attribute which sets an expiration date in the future, instead of an expiration duration. Note that the date and time set in the `Expires` attribute are relative to the client the cookie is being set on, not the server.
+{% endAside %}
+
+[`SameSite=Lax`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite#lax) restricts the cookie to only be sent on same-site requests. That is, where the request matches the current browsing context–the top level site the user is currently visiting which is displayed in their location bar. `SameSite=Lax` is the default in modern browsers but it's good practice to specify it for compatibility across browsers which may have different defaults. By explicitly marking the cookie as same-site only, you are restricting it to your first-party contexts, and you should not have to make changes to that cookie when third-party cookies go away.
+
+To learn more about different cookie attributes, check out [`Set-Cookie` documentation on MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie).
+
+{% endDetails %}
+
+
+## First-party cookie recipe for sites with subdomains
+
+If you have a site with subdomains and want to have one session across all of them, the `Host` prefix can be too restrictive. For example `news.site` could have subdomains for topics, such as `finance.news.site` and `sport.news.site` and you'd want one user session on all of them. In that case, use the `__Secure` prefix instead of `__Host` and specify `Domain`.
+
+### The recipe
+
+```text
+Set-Cookie:
+__Secure-cookie-name=cookie-value;
+Secure;
+Domain=news.site;
+Path=/;
+HttpOnly;
+Max-Age=7776000;
+SameSite=Lax;
+```
+
+{% Details %}
+
+{% DetailsSummary %}
+Details
+{% endDetailsSummary %}
+
+`__Secure` is an optional prefix which asserts fewer requirements than `__Host`: it only requires that the cookie be set with the `Secure` attribute.
+
+{% Aside %}
+The `Secure` attribute restricts the cookie to be sent only over the HTTPS protocol. The `__Secure` prefix tells the browser to check if the cookie is set with the `Secure` attribute and reject it if it's not. This ensures that an attacker can not overwrite secure cookies with another cookie that is missing the `Secure` attribute.\
+{% endAside %}
+
+{% endDetails %}
+
+
+## Restricting first-party cookie access on requests initiated from third-party websites
+
+While `SameSite=Lax` cookies are not sent on cross-site subrequests (for example, when loading embedded images or iframes on a third-party site), they are sent when a user is navigating to the origin site (for example, when following a link from a different site).
+
+You can further restrict cookies access and disallow sending them along with requests initiated from third-party websites with `SameSite=Strict`. This is useful when you have cookies relating to functionality that will always be behind an initial navigation, such as changing a password or making a purchase.
+
+### The recipe
+
+```text
+Set-Cookie:
+__Host-cookie-name=cookie-value;
+Secure;
+Path=/;
+HttpOnly;
+Max-Age=7776000;
+SameSite=Strict;
+```
\ No newline at end of file
diff --git a/src/site/content/en/secure/fixing-mixed-content/index.md b/src/site/content/en/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..47128b00021
--- /dev/null
+++ b/src/site/content/en/secure/fixing-mixed-content/index.md
@@ -0,0 +1,209 @@
+---
+layout: post
+title: Fixing mixed content
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2022-11-17
+description: >
+  Find out how to fix mixed content errors on your website,
+  in order to protect users and ensure that all of your content loads.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+Supporting HTTPS for your website is an important step to protecting your site and your users from attack,
+but mixed content can render that protection useless.
+Increasingly insecure mixed content will be blocked by browsers, as explained in [What is mixed content?](/what-is-mixed-content)
+
+In this guide we will demonstrate techniques and tools for fixing existing mixed content issues
+and preventing new ones from happening.
+
+## Finding mixed content by visiting your site
+
+When visiting an HTTPS page in Google Chrome,
+the browser alerts you to mixed content as errors and warnings in the JavaScript console.
+
+In [What is mixed content?](/what-is-mixed-content),
+you can find a number of examples and see how the problems are reported in Chrome DevTools.
+
+The example of [passive mixed content](https://passive-mixed-content.glitch.me/) will give the following warnings.
+If the browser is able to find the content at an `https` URL it automatically upgrades it, then shows a message.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="Chrome DevTools showing the warnings displayed when mixed content is detected and upgraded", width="800", height="294" %}
+</figure>
+
+[Active mixed content](https://active-mixed-content.glitch.me/) is blocked and displays a warning.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="Chrome DevTools showing the warnings displayed when active mixed content is blocked", width="800", height="304" %}
+</figure>
+
+If you find warnings like these for `http://` URLs on your site,
+you need to fix them in your site's source.
+It's helpful to make a list of these URLs, along with the page you found them on, for use when you fix them.
+
+{% Aside %}
+Mixed content errors and warnings are only shown for the page you are currently viewing,
+and the JavaScript console is cleared every time you navigate to a new  page.
+This means you will have to view every page of your site individually to find these errors.
+{% endAside %}
+
+### Finding mixed content in your site
+
+You can search for mixed content directly in your source code.
+Search for `http://` in your source and look for tags that include HTTP URL attributes.
+Note that having `http://` in the `href` attribute of anchor tags (`<a>`)
+is often not a mixed content issue, with some notable exceptions discussed later.
+
+If your site is published using a content management system,
+it is possible that links to insecure URLs are inserted when pages are published.
+For example, images may be included with a full URL rather than a relative path.
+You will need to find and fix these within the CMS content.
+
+### Fixing mixed content
+
+Once you've found mixed content in your site's source,
+you can follow these steps to fix it.
+
+If you get a console message that a resource request has been automatically upgraded from HTTP to HTTPS,
+you can safely change the `http://` URL for the resource in your code to `https://`.
+You can also check to see if a resource is available securely by changing `http://` to `https://` in the browser URL bar
+and attempting to open the URL in a browser tab.
+
+If the resource is not available via `https://`, you should consider one of the following options:
+
+* Include the resource from a different host, if one is available.
+* Download and host the content on your site directly, if you are legally allowed to do so.
+* Exclude the resource from your site altogether.
+
+Having fixed the problem,
+view the page where you found the error originally and verify that the error no longer appears.
+
+### Beware of non-standard tag usage
+
+Beware of non-standard tag usage on your site.
+For instance, anchor (`<a>`) tag URLs don't result in mixed content errors,
+as they cause the browser to navigate to a new page.
+This means they usually don't need to be fixed.
+However some image gallery scripts override the functionality of the `<a>`
+tag and load the HTTP resource specified by the `href` attribute into a lightbox display on the page,
+causing a mixed content problem.
+
+## Handle mixed content at scale
+
+The manual steps above work well for smaller websites;
+but for large websites or sites with many separate development teams,
+it can be tough to keep track of all the content being loaded.
+To help with this task, you can use content security policy
+to instruct the browser to notify you about mixed content and ensure that your pages never unexpectedly load insecure resources.
+
+### Content security policy
+
+[Content security policy](/csp/) (CSP)
+is a multi-purpose browser feature that you can use to manage mixed content at scale.
+The CSP reporting mechanism can be used to track mixed content on your site,
+and provide enforcement policies to protect users by upgrading or blocking mixed content.
+
+You can enable these features for a page by including the
+`Content-Security-Policy` or `Content-Security-Policy-Report-Only` header in the response sent from your server.
+Additionally you can set `Content-Security-Policy`
+(though **not** `Content-Security-Policy-Report-Only`) using a `<meta>` tag in the `<head>` section of your page.
+
+{% Aside %}
+Modern browsers enforce all content security policies that they receive.
+Multiple CSP header values received by the browser in the response header or
+`<meta>` elements are combined and enforced as a single policy;
+reporting policies are likewise combined.
+Policies are combined by taking the intersection of the policies;
+that is to say, each policy after the first can only further restrict the allowed content, not broaden it.
+{% endAside %}
+
+### Finding mixed content with content security policy
+
+You can use content security policy to collect reports of mixed content on your site.
+To enable this feature, set the `Content-Security-Policy-Report-Only` directive by adding it as a response header for your site.
+
+Response header:
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %}
+The [report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) response header is being deprecated in favor of
+[report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to).
+{% BrowserCompat 'http.headers.Content-Security-Policy.report-to' %}
+
+You can provide both headers, in which case `report-uri` will be ignored if the browser supports `report-to`.
+{% endAside %}
+
+Whenever a user visits a page on your site,
+their browser sends JSON-formatted reports regarding anything that violates the content security policy to
+`https://example.com/reportingEndpoint`.
+In this case, anytime a subresource is loaded over HTTP, a report is sent.
+These reports include the page URL where the policy violation occurred and the subresource URL that violated the policy.
+If you configure your reporting endpoint to log these reports,
+you can track the mixed content on your site without visiting each page yourself.
+
+The two caveats to this are:
+
+* Users have to visit your page in a browser that understands the CSP header. This is true for most modern browsers.
+* You only get reports for pages visited by your users.
+So if you have pages that don't get much traffic,
+it might be some time before you get reports for your entire site.
+
+The [Content security policy](/csp/)
+guide has more information and an example endpoint.
+
+### Alternatives to reporting with CSP
+
+If your site is hosted for you by a platform such as Blogger,
+you may not have access to modify headers and add a CSP.
+Instead, a viable alternative could be to use a website crawler to find issues across your site for you, such as
+[HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker)
+or
+[Mixed Content Scan](https://github.com/bramus/mixed-content-scan).
+
+### Upgrading insecure requests
+{% BrowserCompat 'http.headers.Upgrade-Insecure-Requests' %}
+
+Browsers are beginning to upgrade and block insecure requests.
+You can use CSP directives to force automatic upgrading or blocking of these assets.
+
+The [`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/)
+CSP directive instructs the browser to upgrade insecure URLs before making network requests.
+
+As an example, if a page contains an image tag with an HTTP URL such as
+`<img src="http://example.com/image.jpg">`
+
+The browser instead makes a secure request for
+`https://example.com/image.jpg`, thus saving the user from mixed content.
+
+You can enable this behavior either by sending a `Content-Security-Policy` header with this directive:
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+Or by embedding that same directive inline in the document's `<head>`
+section using a `<meta>` element:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+As with browser automatic upgrading, if the resource is not available over HTTPS,
+the upgraded request fails and the resource is not loaded.
+This maintains the security of your page. The `upgrade-insecure-requests` directive will go further than automatic browser upgrading,
+attempting to upgrade requests that the browser currently does not.
+
+The `upgrade-insecure-requests` directive cascades into `<iframe>` documents,
+ensuring the entire page is protected.
diff --git a/src/site/content/en/secure/fixing-the-cloaked-keywords-hack/index.md b/src/site/content/en/secure/fixing-the-cloaked-keywords-hack/index.md
new file mode 100644
index 00000000000..d6ebc0fe98a
--- /dev/null
+++ b/src/site/content/en/secure/fixing-the-cloaked-keywords-hack/index.md
@@ -0,0 +1,321 @@
+---
+layout: post
+title: Fixing the cloaked keywords and links hack
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+    This guide is created specifically for a type of hack that adds keyword-heavy gibberish pages to your site.
+tags:
+  - security
+---
+
+{% Aside %}
+Unsure whether or not your site is hacked? Start by reading our
+[how to check if your site is hacked](/secure/how-do-I-know-if-my-site-was-hacked/) guide.
+{% endAside %}
+
+This guide is created specifically for a type of hack that adds keyword-heavy
+gibberish pages to your site which we'll refer to as the cloaked keywords and
+links hack. It's designed for users of
+[popular Content Management Systems (CMSs)](https://en.wikipedia.org/wiki/Web_content_management_system#Notable_web_CMS),
+but you'll find this guide useful even if you don't use a CMS.
+
+We want to make sure this guide is really helpful to you. Please
+[leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+to help us improve!
+
+
+## Identifying this type of hack
+
+The cloaked keywords and link hack automatically creates many pages with
+nonsensical text, links, and images. These pages sometimes contain basic
+template elements from the original site, so at first glance, the pages might
+look like normal parts of your site until you read the content.
+
+The hacked pages are created to manipulate Google's ranking factors.
+Hackers will often attempt to monetize this by selling the links on the
+hacked pages to different 3rd parties. Often the hacked pages will also
+redirect visitors to an unrelated page, like a porn site where hackers can
+earn money.
+
+Start by checking the
+[Security Issues](https://www.google.com/webmasters/tools/security-issues)
+tool in Search Console to see if Google has discovered any of these hacked
+pages on your site. Sometimes you can also uncover pages like this by
+opening a Google Search window and typing in `site:_your site url_`, with
+the root level URL of your site. This will show you the pages that Google
+has indexed for your site, including the hacked pages. Flip through a
+couple of pages of search results to see if you spot any unusual URLs.
+If you don't see any hacked content in Google Search, use the same search
+terms with a different search engine. An example of what that would
+look like is below.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/AHIHyXOH9o3XDWxieqJU.png", alt="Search results generated by this hack.", width="728", height="457" %}
+
+{% Aside %}
+Notice that the search results here contain many pages not created by
+the site owner. If you look closely at the descriptions, you'll see
+examples of the gibberish text that this hack creates.
+{% endAside %}
+
+Typically, when you click a link to a hacked page you will either be
+redirected to another site, or you will see a page full of gibberish
+content. However, you might also see a message suggesting that the page
+does not exist (for example, a 404 error). Don't be fooled! Hackers will
+try to trick you into thinking the page is gone or fixed when it's
+still hacked. They do this by [cloaking](//support.google.com/webmasters/answer/66355)
+content. Check for cloaking by entering your site's URLs in the
+[Inspect URL tool](https://support.google.com/webmasters/answer/9012289)
+tool. The Fetch as Google tool allows you to see the underlying hidden content.
+
+If you see these issues, your site has most likely been affected
+by this type of hack.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/dsH6ljQBxZENFotiAtnX.png", alt="An example page created by this hack.", width="708", height="384" %}
+
+
+## Fixing the hack
+
+Before you start, make an offline copy of any files before you remove
+them, in case you need to restore them later. Better yet, back up your
+entire site before you start the cleanup process. You can do this by
+saving all the files that are on your server to a location off your
+server or searching for the best backup options for your particular
+Content Management System (CMS). If you're using a CMS, you should
+back up the database as well.
+
+### Check your `.htaccess` file (3 steps)
+
+The cloaked keywords and link hack uses your `.htaccess` file to automatically
+create cloaked pages on your site. Familiarizing yourself with
+[`.htaccess` basics](https://httpd.apache.org/docs/current/howto/htaccess.html)
+on the official Apache site can help you understand better how the hack is
+affecting your site, but it isn't required.
+
+#### Step 1
+
+Locate your `.htaccess` file on your site. If you're not sure where to find it
+and you're using a CMS like WordPress, Joomla, or Drupal, search for
+".htaccess file location" in a search engine along with the name of your CMS.
+Depending on your site, you might see multiple `.htaccess` files.
+Make a list of all of `.htaccess` file locations.
+
+{% Aside %}
+The `.htaccess` is often a "hidden file." Make sure to enable showing
+hidden files when you're searching for it.
+{% endAside %}
+
+#### Step 2
+
+Open the `.htaccess` file to view the contents in the file. In the file, you
+should be able to identify one line of code that looks something like the
+following:
+
+```txt
+RewriteRule (.*cj2fa.*|^tobeornottobe$) /injected_file.php?q=$1 [L]
+```
+
+The variables on this line can change. Both `cj2fa` and `tobeornottobe` can
+be any mix of letters or words. What's important is to identify the `.php`
+that's referenced in this line.
+
+Write down the `.php` file mentioned in the `.htaccess` file. In the example,
+the `.php` file is named `injected_file.php`, but in reality the name of
+the `.php` file won't be as obvious. It's usually a random set of innocuous
+words like `horsekeys.php`, `potatolake.php`, and so on. There's a high
+chance this is a malicious `.php` file we'll need to track down and
+remove later.
+
+{% Aside 'caution' %}
+Not all lines with `RewriteRule` and a `.php` file in your `.htaccess`
+are malicious. If you're unsure what a line of code is doing, you can get
+help from a group of experienced webmasters in the
+[Webmaster Help Forums](https://support.google.com/webmasters/go/community).
+{% endAside %}
+
+#### Step 3
+
+Replace all `.htaccess` files with a clean or default version of the
+`.htaccess` file. You can usually find a default version of a `.htaccess`
+file by searching for "default `.htaccess` file" and the name of your CMS.
+For sites with multiple `.htaccess` files, find a clean version of each one
+and perform the replacement.
+
+If no default `.htaccess` exists and you've never configured an `.htaccess`
+file on your site, the `.htaccess` file you find on your site is probably
+malicious. Save a copy of the `.htaccess` file(s) offline just in case and
+delete the `.htaccess` file from your site.
+
+### Finding and removing other malicious files (5 steps)
+
+Identifying malicious files can be tricky and can take several hours.
+Take your time when checking your files. If you haven't yet, this is a
+good time to back up the files on your site. Do a Google search for
+"back up site" and the name of your CMS to find instructions on how
+to back up your site.
+
+#### Step 1
+
+If you use a CMS, reinstall all the core (default) files that come in the
+default distribution of your CMS, as well as anything you may have added
+(such as themes, modules, plugins). This helps ensure that these files are
+clear of hacked content. You can do a Google search for "reinstall"
+and your CMS name to find instructions on the reinstallation process.
+If you have any plugins, modules, extensions, or themes, make sure
+to reinstall those as well.
+
+{% Aside 'caution' %}
+Reinstalling your core files can cause you to lose any
+customizations that you've made. Be sure to create a backup of your
+database and all files before you reinstall.
+{% endAside %}
+
+#### Step 2
+
+Start by looking for the `.php` file that you identified in the `.htaccess`
+file earlier. Depending on how you're accessing the files on your server,
+you should have some type of search functionality. Search for the
+malicious file name. If you find it, first make a backup copy and
+store it in another location just in case you need to restore it,
+then delete it from your site.
+
+#### Step 3
+
+Look for any other malicious or compromised files left. You might have
+already removed all malicious files in the previous two steps, but it's
+best to work through these next few steps in case there are more files
+on your site that have been compromised.
+
+Don't get overwhelmed by thinking that you need to open and look
+through every PHP file. Start by creating a list of suspicious PHP
+files that you want to investigate. Here are a few ways to determine
+which PHP files are suspicious:
+
+* If you've already reloaded your CMS files, look only at files that are
+  not part of your default CMS files or folders. This should rule out a
+  large number of PHP files and leave you with a handful of files to look at.
+* Sort the files on your site by the date they were last modified. Look for
+  files that were modified within a few months of the time that you first
+  discovered your site was hacked.
+* Sort the files on your site by size. Look for any unusually large files.
+
+Note: Attackers commonly inject scripts into the following files:
+`index.php`, `wp-load.php`, `404.php`, and `view.php`.
+
+#### Step 4
+
+Once you have a list of suspicious PHP files, check to see if they
+are malicious. If you're unfamiliar with PHP, this process might be
+more time consuming, so consider brushing up on some
+[PHP documentation](https://php.net/docs.php). If you're completely
+new to coding, we recommend [getting help](support_team). In the meantime,
+there are some basic patterns that you can look for to identify malicious files.
+
+If you use a CMS, and are not in the habit of editing those files
+directly, compare the files on your server to a list of the default
+files packaged with the CMS and any plugins and themes. Look for files
+that do not belong, as well as files whose sizes seem larger than their
+defaults.
+
+First, scan through the suspicious files you've already identified to
+look for large blocks of text with a combination of seemingly jumbled
+letters and numbers. The large block of text is usually preceded by a
+combination of PHP functions like `base64_decode`, `rot13`, `eval`,
+`strrev`, `gzinflate`. Here is an example of what the block of code might
+look like. Sometimes all this code will be stuffed into one long line
+of text, making it look smaller than it actually is.
+
+```txt
+// Hackers try to confuse webmasters by encoding malicious code into
+// blocks of texts. Be wary of unfamiliar code blocks like this.
+
+base64_decode(strrev("hMXZpRXaslmYhJXZuxWd2BSZ0l2cgknbhByZul2czVmckRWYgknYgM3ajFGd0FGIlJXd0Vn
+ZgknbhBSbvJnZgUGdpNHIyV3b5BSZyV3YlNHIvRHI0V2Zy9mZgQ3Ju9GRg4SZ0l2cgIXdvlHI4lmZg4WYjBSdvlHIsU2c
+hVmcnBydvJGblBiZvBCdpJGIhBCZuFGIl1Wa0BCa0l2dgQXdCBiLkJXYoBSZiBibhNGIlR2bjBycphGdgcmbpRXYjNXdmJ2b
+lRGI5xWZ0Fmb1RncvZmbVBiLn5WauVGcwFGagM3J0FGa3BCZuFGdzJXZk5Wdg8GdgU3b5BicvZGI0xWdjlmZmlGZgQXagU2ah
+1GIvRHIzlGa0BSZrlGbgUGZvNGIlRWaoByb0BSZrlGbgMnclt2YhhEIuUGZvNGIlxmYhRWYlJnb1BychByZulGZhJXZ1F3ch
+1GIlR2bjBCZlRXYjNXdmJ2bgMXdvl2YpxWYtBiZvBSZjVWawBSYgMXagMXaoRFIskGS"));
+```
+
+Sometimes the code isn't jumbled and just looks like normal script. If you're
+not certain whether or not the code is bad, stop by our
+[Webmaster Help Forums](https://productforums.google.com/forum/#!forum/webmasters)
+where a group of experienced webmasters can help you look over the files.
+
+#### Step 5
+
+Now that you know which files are suspicious, create a backup or a local
+copy by saving them onto your computer just in case it wasn't malicious,
+and delete the suspicious files.
+
+### Check to see if your site is clean
+
+Once you're done getting rid of hacked files, check to see if your hard
+work paid off. Remember those gibberish pages you identified earlier?
+Use the Fetch as Google tool on them again to see if they still exist.
+If they respond as "Not Found" in Fetch as Google, chances are you're in
+pretty good shape and you can move on to fixing the vulnerabilities on your site.
+
+{% Aside %}
+You can also follow the steps in the
+[Hacked Sites Troubleshooter](https://support.google.com/webmasters/troubleshooter/6155978)
+to check if there's still hacked content on your site.
+{% endAside %}
+
+## How do I prevent getting hacked again?
+
+Fixing vulnerabilities on your site is an essential final step for
+fixing your site. A recent study done found that 20% of hacked sites
+get hacked again within 1 day. Knowing exactly how your site was
+hacked is helpful. Read our
+[top ways websites get hacked by spammers](/secure/top-ways-websites-get-hacked-by-spammers/)
+guide to start your investigation. However, if you're unable to find out
+how your site was hacked, below is a checklist of things you can do
+reduce vulnerabilities on your site.
+
+* **Regularly scan your computer:** Use any popular virus scanner to check
+  for viruses or vulnerabilities.
+* **Regularly change your passwords:** Regularly changing the passwords to
+  all your website accounts like your hosting provider, FTP, and CMS can
+  prevent unauthorized access to your site. It's important to create a strong,
+  unique password for each account.
+* **Use
+  [Two-Factor Authentication (2FA)](https://en.wikipedia.org/wiki/Two-factor_authentication):**
+  Consider enabling 2FA on any service that requires you to log in. 2FA
+  makes it harder for hackers to log in even if they successfully steal
+  your password.
+* **Update your CMS, plugins, extensions, and modules regularly:**
+  Hopefully you've already done this step. Many sites get hacked because
+  of the outdated software running on a site. Some CMSs support auto-updating.
+* **Consider subscribing to a security service to monitor your site:**
+  There's a lot of great services out there that can help you monitor your
+  site for a small fee. Consider registering with them to keep your site safe.
+
+## Additional resources {: #resources }
+
+If you're still having trouble fixing your site, there are a few more
+resources that might help you.
+
+These tools scan your site and may be able to find problematic content.
+Other than VirusTotal, Google doesn't run or support them.
+
+[Virus Total](https://www.virustotal.com/),
+[Aw-snap.info](http://aw-snap.info/),
+[Sucuri Site Check](https://sitecheck.sucuri.net/),
+[Quttera](http://www.quttera.com/): These are just some tools that may be
+able to scan your site for problematic content. Keep in mind that these
+scanners can't guarantee that they will identify every type of
+problematic content.
+
+Here are additional resources from Google that can help you:
+
+* [Google Webmaster Help Forum](//support.google.com/webmasters/go/community)
+* [Google Webmaster Help for Hacked Sites](//developers.google.com/webmasters/hacked/)
+* [Google SafeBrowsing](//safebrowsing.google.com/)
+
+{% Aside %}
+Missing a tool you think might be useful?
+[Leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+and let us know.
+{% endAside %}
+
diff --git a/src/site/content/en/secure/fixing-the-gibberish-hack/index.md b/src/site/content/en/secure/fixing-the-gibberish-hack/index.md
new file mode 100644
index 00000000000..d2f0963cdb1
--- /dev/null
+++ b/src/site/content/en/secure/fixing-the-gibberish-hack/index.md
@@ -0,0 +1,322 @@
+---
+layout: post
+title: Fixing the gibberish hack
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  This guide is created specifically for a type of hack that adds keyword-heavy gibberish pages to your site.
+tags:
+  - security
+---
+
+{% Aside %}
+Unsure whether or not your site is hacked? Start by reading our
+[how to check if your site is hacked](/secure/how-do-I-know-if-my-site-was-hacked/) guide.
+{% endAside %}
+
+This guide is created specifically for a type of hack that adds
+keyword-heavy gibberish pages to your site which we'll refer to as the
+gibberish hack. It's designed for users of popular
+[Content Management Systems (CMSs)](https://en.wikipedia.org/wiki/Web_content_management_system#Notable_web_CMS),
+but you'll find this guide useful even if you don't use a CMS.
+
+We want to make sure this guide is really helpful to you. Please
+[leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+to help us improve!
+
+## Identifying this type of hack {: #identifying }
+
+The gibberish hack automatically creates many pages with non-sensical
+sentences filled with keywords on your site. These are pages that you
+didn't create, but have URLs that might be compelling for users to click.
+Hackers do this so the hacked pages show up in Google Search. Then, if
+people try to visit these pages, they'll be redirected to an unrelated
+page, like a porn site. Hackers make money when people visit these
+unrelated pages. Here are some examples of the type of files you might
+see on a site affected by the gibberish hack:
+
+* `www.example.com/cheap-hair-styles-cool.html`
+* `www.example.com/free-pictures-fun.html`
+* `www.example.com/nice-song-download-file.php`
+
+Sometimes they appear in a folder composed of random characters and
+use different languages:
+
+* `www.example.com/jfwoea/cheap-hair-styles-cool.html`
+* `www.example.com/jfwoea/free-pictures-fun.html`
+* `www.example.com/jfwoea/www-ki-motn-dudh-photo.php`
+* `www.example.com/jfwoea/foto-cewe-zaman-sekarang.php`
+
+
+Start by checking the
+[Security Issues](https://www.google.com/webmasters/tools/security-issues)
+tool in Search Console to see if Google has discovered any of these hacked
+pages on your site. Sometimes you can also uncover pages like this by
+opening a Google Search window and typing in `site:_your site url_`, with
+the root level URL of your site. This will show you the pages that Google
+has indexed for your site, including the hacked pages. Flip through a
+couple of pages of search results to see if you spot any unusual URLs.
+If you don't see any hacked content in Google Search, use the same search
+terms with a different search engine. An example of what that would
+look like is below.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/Tly4nzXP8q1ndhqoaMtJ.png", alt="Search results showing pages from this hack.", width="600", height="402" %}
+
+{% Aside %}
+Notice that the search results here contain many pages not created by
+the site owner. If you look closely at the descriptions, you'll see
+examples of the gibberish text that this hack creates.
+{% endAside %}
+
+Typically, when you click a link to a hacked page you will either be
+redirected to another site, or you will see a page full of gibberish
+content. However, you might also see a message suggesting that the page
+does not exist (for example, a 404 error). Don't be fooled! Hackers will
+try to trick you into thinking the page is gone or fixed when it's
+still hacked. They do this by [cloaking](//support.google.com/webmasters/answer/66355)
+content. Check for cloaking by entering your site's URLs in the
+[Inspect URL tool](https://support.google.com/webmasters/answer/9012289)
+tool. The Fetch as Google tool allows you to see the underlying hidden content.
+
+If you see these issues, your site has most likely been affected
+by this type of hack.
+
+## Fixing the hack {: #fixing }
+
+Before you start, make an offline copy of any files before you remove
+them, in case you need to restore them later. Better yet, back up your
+entire site before you start the cleanup process. You can do this by
+saving all the files that are on your server to a location off your
+server or searching for the best backup options for your particular
+Content Management System (CMS). If you're using a CMS, you should
+back up the database as well.
+
+### Check your `.htaccess` file (2 steps)
+
+The gibberish hack redirects visitors from your site using the `.htaccess` file.
+
+#### Step 1
+
+Locate your `.htaccess` file on your site. If you're not sure where to find it
+and you're using a CMS like WordPress, Joomla, or Drupal, search for
+".htaccess file location" in a search engine along with the name of your CMS.
+Depending on your site, you might see multiple `.htaccess` files. 
+Make a list of all of `.htaccess` file locations.
+
+{% Aside %}
+The `.htaccess` is often a "hidden file." Make sure to enable showing
+hidden files when you're searching for it.
+{% endAside %}
+
+#### Step 2
+
+Replace all `.htaccess` files with a clean or default version of the
+`.htaccess` file. You can usually find a default version of a `.htaccess` 
+file by searching for "default `.htaccess` file" and the name of your CMS.
+For sites with multiple `.htaccess` files, find a clean version of each one
+and perform the replacement.
+
+If no default `.htaccess` exists and you've never configured an `.htaccess`
+file on your site, the `.htaccess` file you find on your site is probably
+malicious. Save a copy of the `.htaccess` file(s) offline just in case and
+delete the `.htaccess` file from your site.
+
+### Finding and removing other malicious files (5 steps)
+
+Identifying malicious files can be tricky and can take several hours.
+Take your time when checking your files. If you haven't yet, this is a
+good time to back up the files on your site. Do a Google search for
+"back up site" and the name of your CMS to find instructions on how
+to back up your site.
+
+#### Step 1
+
+If you use a CMS, reinstall all the core (default) files that come in the
+default distribution of your CMS, as well as anything you may have added
+(such as themes, modules, plugins). This helps ensure that these files are
+clear of hacked content. You can do a Google search for "reinstall"
+and your CMS name to find instructions on the reinstallation process.
+If you have any plugins, modules, extensions, or themes, make sure
+to reinstall those as well.
+
+{% Aside 'caution' %}
+Reinstalling your core files can cause you to lose any
+customizations that you've made. Be sure to create a backup of your
+database and all files before you reinstall.
+{% endAside %}
+
+#### Step 2
+
+Now you need to look for any other malicious or compromised files left.
+This is the most difficult and time-consuming part of the process,
+but after this you're almost done!
+
+This hack typically leaves two types of files: `.txt` files and .php
+files. The `.txt` files serve are template files, and the `.php` files
+determine what type of non-sensical content to load onto your site.
+Start by looking for the `.txt` files. Depending on how you're connecting
+to your site, you should see some type of search functionality for files
+Search for ".txt" to pull up all the files with a `.txt` extension. Most
+of these will be legitimate files of text like license agreements,
+readme files, and so on. You're looking for a particular set of `.txt`
+files that contain HTML code used to create spammy templates. Below are
+snippets of different pieces of code that you might find in these
+malicious `.txt` files.
+
+Hackers use keyword replacement to create the spammy pages. You'll most
+likely see some type of generic word that can be replaced throughout
+the hacked file.
+
+```html
+<title>{keyword}</title>
+<meta name="description" content="{keyword}" />
+<meta name="keywords" content="{keyword}" />
+<meta property="og:title" content="{keyword}" />
+```
+
+Additionally, most of these files contain some type of code that positions
+spammy links and spammy text off the visible page.
+
+```html
+<div style="position: absolute; top: -1000px; left: -1000px;">
+    Cheap prescription drugs
+</div>
+```
+
+Remove these `.txt` files. If they're all in the same folder you can remove
+the entire folder.
+
+#### Step 3
+
+The malicious PHP files are a bit harder to track down. There could
+be one or many malicious PHP files on your site. They could all be
+contained in the same subdirectory or scattered around your site.
+
+Don't get overwhelmed by thinking that you need to open and look
+through every PHP file. Start by creating a list of suspicious PHP
+files that you want to investigate. Here are a few ways to determine
+which PHP files are suspicious:
+
+* Since you've already reloaded your CMS files, look only at files that
+  are not part of your default CMS files or folders. This should eliminate
+  a large number of PHP files and leave you with a handful of files to look at.
+* Sort the files on your site by last modified date. Look for files that
+  were modified within a few months of the time that you first discovered
+  your site was hacked.
+* Sort the files on your site by size. Look for any unusually large files.
+
+#### Step 4
+
+Once you have a list of suspicious PHP files, check to see if they
+are malicious. If you're unfamiliar with PHP, this process might be
+more time consuming, so consider brushing up on some
+[PHP documentation](https://php.net/docs.php). If you're completely
+new to coding, we recommend [getting help](/secure/build-a-support-team/). In the meantime,
+there are some basic patterns that you can look for to identify malicious files.
+
+If you use a CMS, and are not in the habit of editing those files
+directly, compare the files on your server to a list of the default
+files packaged with the CMS and any plugins and themes. Look for files
+that do not belong, as well as files whose sizes seem larger than their
+defaults.
+
+First, scan through the suspicious files you've already identified to
+look for large blocks of text with a combination of seemingly jumbled
+letters and numbers. The large block of text is usually preceded by a
+combination of PHP functions like `base64_decode`, `rot13`, `eval`,
+`strrev`, `gzinflate`. Here is an example of what the block of code might
+look like. Sometimes all this code will be stuffed into one long line
+of text, making it look smaller than it actually is.
+
+```txt
+// Hackers try to confuse webmasters by encoding malicious code into
+// blocks of texts. Be wary of unfamiliar code blocks like this.
+
+base64_decode(strrev("hMXZpRXaslmYhJXZuxWd2BSZ0l2cgknbhByZul2czVmckRWYgknYgM3ajFGd0FGIlJXd0Vn
+ZgknbhBSbvJnZgUGdpNHIyV3b5BSZyV3YlNHIvRHI0V2Zy9mZgQ3Ju9GRg4SZ0l2cgIXdvlHI4lmZg4WYjBSdvlHIsU2c
+hVmcnBydvJGblBiZvBCdpJGIhBCZuFGIl1Wa0BCa0l2dgQXdCBiLkJXYoBSZiBibhNGIlR2bjBycphGdgcmbpRXYjNXdmJ2b
+lRGI5xWZ0Fmb1RncvZmbVBiLn5WauVGcwFGagM3J0FGa3BCZuFGdzJXZk5Wdg8GdgU3b5BicvZGI0xWdjlmZmlGZgQXagU2ah
+1GIvRHIzlGa0BSZrlGbgUGZvNGIlRWaoByb0BSZrlGbgMnclt2YhhEIuUGZvNGIlxmYhRWYlJnb1BychByZulGZhJXZ1F3ch
+1GIlR2bjBCZlRXYjNXdmJ2bgMXdvl2YpxWYtBiZvBSZjVWawBSYgMXagMXaoRFIskGS"));
+```
+
+Sometimes the code isn't jumbled and just looks like normal script. If you're
+not certain whether or not the code is bad, stop by our
+[Webmaster Help Forums](https://productforums.google.com/forum/#!forum/webmasters)
+where a group of experienced webmasters can help you look over the files.
+
+#### Step 5
+
+Now that you know which files are suspicious, create a backup or a local
+copy by saving them onto your computer just in case it wasn't malicious,
+and delete the suspicious files.
+
+### Check to see if your site is clean
+
+Once you're done getting rid of hacked files, check to see if your hard
+work paid off. Remember those gibberish pages you identified earlier?
+Use the Fetch as Google tool on them again to see if they still exist.
+If they respond as "Not Found" in Fetch as Google, chances are you're in
+pretty good shape and you can move on to fixing the vulnerabilities on your site.
+
+Note: You can also follow the steps in the
+[Hacked Sites Troubleshooter](https://support.google.com/webmasters/troubleshooter/6155978)
+to check if there's still hacked content on your site.
+
+## How do I prevent getting hacked again?
+
+Fixing vulnerabilities on your site is an essential final step for
+fixing your site. A recent study done found that 20% of hacked sites
+get hacked again within 1 day. Knowing exactly how your site was
+hacked is helpful. Read our 
+[top ways websites get hacked by spammers](/secure/top-ways-websites-get-hacked-by-spammers/)
+guide to start your investigation. However, if you're unable to find out
+how your site was hacked, below is a checklist of things you can do
+reduce vulnerabilities on your site.
+
+* **Regularly scan your computer:** Use any popular virus scanner to check
+  for viruses or vulnerabilities.
+* **Regularly change your passwords:** Regularly changing the passwords to
+  all your website accounts like your hosting provider, FTP, and CMS can
+  prevent unauthorized access to your site. It's important to create a strong,
+  unique password for each account.
+* **Use
+  [Two-Factor Authentication (2FA)](https://en.wikipedia.org/wiki/Two-factor_authentication):**
+  Consider enabling 2FA on any service that requires you to log in. 2FA
+  makes it harder for hackers to log in even if they successfully steal
+  your password.
+* **Update your CMS, plugins, extensions, and modules regularly:**
+  Hopefully you've already done this step. Many sites get hacked because
+  of the outdated software running on a site. Some CMSs support auto-updating.
+* **Consider subscribing to a security service to monitor your site:**
+  There's a lot of great services out there that can help you monitor your
+  site for a small fee. Consider registering with them to keep your site safe.
+
+## Additional resources {: #resources }
+
+If you're still having trouble fixing your site, there are a few more
+resources that might help you.
+
+These tools scan your site and may be able to find problematic content.
+Other than VirusTotal, Google doesn't run or support them.
+
+[Virus Total](https://www.virustotal.com/),
+[Aw-snap.info](http://aw-snap.info/),
+[Sucuri Site Check](https://sitecheck.sucuri.net/),
+[Quttera](http://www.quttera.com/): These are just some tools that may be
+able to scan your site for problematic content. Keep in mind that these
+scanners can't guarantee that they will identify every type of
+problematic content.
+
+Here are additional resources from Google that can help you:
+
+* [Google Webmaster Help Forum](//support.google.com/webmasters/go/community)
+* [Google Webmaster Help for Hacked Sites](//developers.google.com/webmasters/hacked/)
+* [Google SafeBrowsing](//safebrowsing.google.com/)
+
+{% Aside %}
+Missing a tool you think might be useful?
+[Leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+and let us know.
+{% endAside %}
+
diff --git a/src/site/content/en/secure/fixing-the-japanese-keyword-hack/index.md b/src/site/content/en/secure/fixing-the-japanese-keyword-hack/index.md
new file mode 100644
index 00000000000..06cd913c75d
--- /dev/null
+++ b/src/site/content/en/secure/fixing-the-japanese-keyword-hack/index.md
@@ -0,0 +1,312 @@
+---
+layout: post
+title: Fixing the Japanese keyword hack
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  This guide is created specifically for a type of hack that creates autogenerated Japanese text on your site.
+tags:
+  - security
+---
+
+{% Aside %}
+Unsure whether or not your site is hacked? Start by reading our
+[how to check if your site is hacked](/how-do-i-know-if-my-site-was-hacked/) guide.
+{% endAside %}
+
+This guide is created specifically for a type of hack that creates
+autogenerated Japanese text on your site which we'll refer to as the
+Japanese keyword hack. It's designed for users of popular
+[Content Management Systems (CMSs)](https://en.wikipedia.org/wiki/Web_content_management_system#Notable_web_CMS),
+but you'll find this guide useful even if you don't use a CMS.
+
+We want to make sure this guide is really helpful to you. Please
+[leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+to help us improve!
+
+## Identifying this type of hack {: #identifying }
+
+The Japanese keywords hack typically creates new pages with autogenerated
+Japanese text on your site in randomly generated directory names
+(for instance, `http://example.com/ltjmnjp/341.html`). These pages are
+monetized using affiliate links to stores selling fake brand merchandise
+and then shown in Google search. Here's an example of what one of these pages look like:
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/8rVjW3mT2zNOIKN6Cb7u.png", alt="An example of a page with the Japanese keyword hack.", width="757", height="170" %}
+
+With this type of hack, the hacker will typically add themselves as a
+property owner in Search Console, in order to increase profits by
+manipulating your site's settings like geotargeting or sitemaps.
+If you've received a notification that someone you don't know has
+verified your site in [Search Console](https://www.google.com/webmasters/tools/),
+there's a strong possibility that your site has been hacked.
+
+
+Start by checking the
+[Security Issues](https://www.google.com/webmasters/tools/security-issues)
+tool in Search Console to see if Google has discovered any of these hacked
+pages on your site. Sometimes you can also uncover pages like this by
+opening a Google Search window and typing in `site:_your site url_`, with
+the root level URL of your site. This will show you the pages that Google
+has indexed for your site, including the hacked pages. Flip through a
+couple of pages of search results to see if you spot any unusual URLs.
+If you don't see any hacked content in Google Search, use the same search
+terms with a different search engine. An example of what that would
+look like follows.
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/9z7RmWrmzcEr4dQqq1QR.png", alt="An example of a hacked site in search.", width="762", height="693" %}
+
+
+{% Aside %}
+Notice that the search results here contain many pages not created by
+the site owner. If you look closely at the descriptions, you'll see
+examples of the gibberish text that this hack creates.
+{% endAside %}
+
+Typically, when you click a link to a hacked page you will either be
+redirected to another site, or you will see a page full of gibberish
+content. However, you might also see a message suggesting that the page
+does not exist (for example, a 404 error). Don't be fooled! Hackers will
+try to trick you into thinking the page is gone or fixed when it's
+still hacked. They do this by [cloaking](//support.google.com/webmasters/answer/66355)
+content. Check for cloaking by entering your site's URLs in the
+[Inspect URL tool](https://support.google.com/webmasters/answer/9012289)
+tool. The Fetch as Google tool allows you to see the underlying hidden content.
+
+If you see these issues, your site has most likely been affected
+by this type of hack.
+
+## Fixing the hack {: #fixing }
+
+Before you start, make an offline copy of any files before you remove
+them, in case you need to restore them later. Better yet, back up your
+entire site before you start the cleanup process. You can do this by
+saving all the files that are on your server to a location off your
+server or searching for the best backup options for your particular
+Content Management System (CMS). If you're using a CMS, you should
+back up the database as well.
+
+### Remove newly created accounts from Search Console
+
+If a new owner you don't recognize has been added to your Search Console
+account, revoke their access as soon as possible. You can check which users
+are verified for your site on the
+[Search Console verification page](https://www.google.com/webmasters/verification).
+Click on "Verification Details" for the site to view all verified users.
+
+To remove an owner from Search Console, read through the Remove Owner
+section of the
+[Managing users, owners, and permissions Help Center](https://support.google.com/webmasters/answer/2453966).
+You'll need to remove the associated verification token which is typically
+either an HTML file on the root of your site or a dynamically generated
+`.htaccess` file mimicking an HTML file.
+
+If you are unable to find an HTML verification token on your site,
+check for a rewrite rule in your `.htaccess` file. The rewrite rule
+will look similar to this:
+
+```txt
+RewriteEngine On
+RewriteRule ^google(.*)\.html$ dir/file.php?google=$1 [L]
+```
+
+{% Aside %}
+You can typically check if you've successfully removed a dynamically
+generated verification token by navigating to a simulated verification
+token file like `wwww.example.com/google[random number and letters].html`.
+For example, if your site is www.brandonsbaseballcards.com, try navigating
+to www.brandonsbaseballcards.com/google1234.html. If that page returns a
+HTTP 404, then the dynamically generated verification token is likely fixed.
+{% endAside %}
+
+To remove the dynamically generated verification token from your
+`.htaccess` file, follow the steps below.
+
+### Check your `.htaccess` file (2 steps)
+
+Aside from using a `.htaccess` file to create dynamically generated
+verification tokens, hackers often use `.htaccess` rules to redirect
+users or create gibberish spammy pages. Unless you have custom
+`.htaccess` rules, consider replacing your `.htaccess` with a
+completely new copy.
+
+#### Step 1
+
+Locate your `.htaccess` file on your site. If you're not sure where to find it
+and you're using a CMS like WordPress, Joomla, or Drupal, search for
+".htaccess file location" in a search engine along with the name of your CMS.
+Depending on your site, you might see multiple `.htaccess` files. 
+Make a list of all of `.htaccess` file locations.
+
+{% Aside %}
+The `.htaccess` is often a "hidden file." Make sure to enable showing
+hidden files when you're searching for it.
+{% endAside %}
+
+#### Step 2
+
+Replace all `.htaccess` files with a clean or default version of the
+`.htaccess` file. You can usually find a default version of a `.htaccess` 
+file by searching for "default `.htaccess` file" and the name of your CMS.
+For sites with multiple `.htaccess` files, find a clean version of each one
+and perform the replacement.
+
+If no default `.htaccess` exists and you've never configured an `.htaccess`
+file on your site, the `.htaccess` file you find on your site is probably
+malicious. Save a copy of the `.htaccess` file(s) offline just in case and
+delete the `.htaccess` file from your site.
+
+### Remove All Malicious Files and Scripts (4 steps)
+
+Identifying malicious files can be tricky and can take several hours.
+Take your time when checking your files. If you haven't yet, this is a
+good time to back up the files on your site. Do a Google search for
+"back up site" and the name of your CMS to find instructions on how
+to back up your site.
+
+**Step 1**
+
+If you use a CMS, reinstall all the core (default) files that come in the
+default distribution of your CMS, as well as anything you may have added
+(such as themes, modules, plugins). This helps ensure that these files are
+clear of hacked content. You can do a Google search for "reinstall"
+and your CMS name to find instructions on the reinstallation process.
+If you have any plugins, modules, extensions, or themes, make sure
+to reinstall those as well.
+
+{% Aside 'caution' %}
+Reinstalling your core files can cause you to lose any
+customizations that you've made. Be sure to create a backup of your
+database and all files before you reinstall.
+{% endAside %}
+
+**Step 2**
+
+Hackers will often modify your sitemap or add a new sitemaps to help get their
+URLs indexed more quickly. If you previously had a sitemap file, check the
+file for any suspicious links and remove them from your sitemap. If
+there are any sitemap files you don't remember adding to your site,
+double check them and remove them if they only contain spammy URLs.
+
+**Step 3**
+
+Look for any other malicious or compromised files left. You might have
+already removed all malicious files in the previous two steps, but it's
+best to work through these next few steps in case there are more files
+on your site that have been compromised.
+
+Don't get overwhelmed by thinking that you need to open and look
+through every PHP file. Start by creating a list of suspicious PHP
+files that you want to investigate. Here are a few ways to determine
+which PHP files are suspicious:
+
+* If you've already reloaded your CMS files, look only at files that are
+  not part of your default CMS files or folders. This should rule out a
+  large number of PHP files and leave you with a handful of files to look at.
+* Sort the files on your site by the date they were last modified. Look for
+  files that were modified within a few months of the time that you first
+  discovered your site was hacked.
+* Sort the files on your site by size. Look for any unusually large files.
+
+{% Aside %}
+Attackers commonly inject scripts into the following files:
+`index.php`, `wp-load.php`, `404.php`, and `view.php`.
+{% endAside %}
+
+**Step 4**
+
+Once you have a list of suspicious PHP files, check to see if they
+are malicious. If you're unfamiliar with PHP, this process might be
+more time consuming, so consider brushing up on some
+[PHP documentation](https://php.net/docs.php). If you're completely
+new to coding, we recommend [getting help](support_team). In the meantime,
+there are some basic patterns that you can look for to identify malicious files.
+
+If you use a CMS, and are not in the habit of editing those files
+directly, compare the files on your server to a list of the default
+files packaged with the CMS and any plugins and themes. Look for files
+that do not belong, as well as files whose sizes seem larger than their
+defaults.
+
+Scan through the suspicious files you've already identified to look
+for blocks of obfuscated code. This might look like a combination of
+seemingly jumbled letters and numbers. The obfuscated code is usually
+preceded by a combination of PHP functions like `base64_decode`, `rot13`,
+`eval`, `strrev`, `gzinflate`. Here is an example of what the block of code
+might look like. Sometimes all this code will be stuffed into one long line
+of text, making it look smaller than it actually is.
+
+```txt
+$O_O0O_O0_0=urldecode("%6E1%7A%62%2F%6D%615%5C%76%740%6928%2D%70
+%78%75%71%79%2A6%6C%72%6B%64%679%5F%65%68%63%73%77%6F4%2B%6637%6A");
+$OO0_0OO0__=$O_O0O_O0_0{26}.$O_O0O_O0_0{6}.$O_O0O_O0_0{10}.$O_O0O_O0_0{30}
+```
+
+### Check to see if your site is clean
+
+Once you're done getting rid of hacked files, check to see if your hard
+work paid off. Remember those gibberish pages you identified earlier?
+Use the Fetch as Google tool on them again to see if they still exist.
+If they respond as "Not Found" in Fetch as Google, chances are you're in
+pretty good shape and you can move on to fixing the vulnerabilities on your site.
+
+Note: You can also follow the steps in the
+[Hacked Sites Troubleshooter](https://support.google.com/webmasters/troubleshooter/6155978)
+to check if there's still hacked content on your site.
+
+## How do I prevent getting hacked again?
+
+Fixing vulnerabilities on your site is an essential final step for
+fixing your site. A recent study done found that 20% of hacked sites
+get hacked again within 1 day. Knowing exactly how your site was
+hacked is helpful. Read our 
+[top ways websites get hacked by spammers](/secure/top-ways-websites-get-hacked-by-spammers/)
+guide to start your investigation. However, if you're unable to find out
+how your site was hacked, below is a checklist of things you can do
+reduce vulnerabilities on your site.
+
+* **Regularly scan your computer:** Use any popular virus scanner to check
+  for viruses or vulnerabilities.
+* **Regularly change your passwords:** Regularly changing the passwords to
+  all your website accounts like your hosting provider, FTP, and CMS can
+  prevent unauthorized access to your site. It's important to create a strong,
+  unique password for each account.
+* **Use
+  [Two-Factor Authentication (2FA)](https://en.wikipedia.org/wiki/Two-factor_authentication):**
+  Consider enabling 2FA on any service that requires you to log in. 2FA
+  makes it harder for hackers to log in even if they successfully steal
+  your password.
+* **Update your CMS, plugins, extensions, and modules regularly:**
+  Hopefully you've already done this step. Many sites get hacked because
+  of the outdated software running on a site. Some CMSs support auto-updating.
+* **Consider subscribing to a security service to monitor your site:**
+  There's a lot of great services out there that can help you monitor your
+  site for a small fee. Consider registering with them to keep your site safe.
+
+## Additional resources {: #resources }
+
+If you're still having trouble fixing your site, there are a few more
+resources that might help you.
+
+These tools scan your site and may be able to find problematic content.
+Other than VirusTotal, Google doesn't run or support them.
+
+[Virus Total](https://www.virustotal.com/),
+[Aw-snap.info](http://aw-snap.info/),
+[Sucuri Site Check](https://sitecheck.sucuri.net/),
+[Quttera](http://www.quttera.com/): These are just some tools that may be
+able to scan your site for problematic content. Keep in mind that these
+scanners can't guarantee that they will identify every type of
+problematic content.
+
+Here are additional resources from Google that can help you:
+
+* [Google Webmaster Help Forum](//support.google.com/webmasters/go/community)
+* [Google Webmaster Help for Hacked Sites](//developers.google.com/webmasters/hacked/)
+* [Google SafeBrowsing](//safebrowsing.google.com/)
+
+{% Aside %}
+Missing a tool you think might be useful?
+[Leave feedback](https://docs.google.com/a/google.com/forms/d/12iF45BaZuEgwn29A7DOW73rd1Hi_7NiAHCFWB3zMu0U/viewform)
+and let us know.
+{% endAside %}
diff --git a/src/site/content/en/secure/glossary-for-hacked-sites/index.md b/src/site/content/en/secure/glossary-for-hacked-sites/index.md
new file mode 100644
index 00000000000..3e45b6e964b
--- /dev/null
+++ b/src/site/content/en/secure/glossary-for-hacked-sites/index.md
@@ -0,0 +1,193 @@
+---
+layout: post
+title: Glossary for hacked sites
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  The glossary covers a collection of technical terms that are referenced throughout our security documentation. 
+tags:
+  - security
+---
+
+The glossary covers a collection of technical terms that are referenced
+throughout our security documentation. The list is ordered alphabetically
+with each term in bold text followed by a definition of the term.
+
+## Administrator privileges
+
+Administrator privileges are the highest level of permission account
+setting on a system. These type of privileges allow actions like deleting the
+entire site, resetting passwords, or uploading files.
+
+## Back door
+
+A back door is a program installed on a system to bypass authentication
+controls and maintain access.
+
+## Cloaking
+
+Cloaking is the practice of presenting different content or URLs to human
+users and search engines.
+
+For example, dynamic scripts and .htaccess rules can return status codes
+based on the requests processed. Using this tactic, hackers hide their tracks
+by returning a 404 or 500 error code to certain IP addresses or browsers,
+while serving spam to other IP addresses or browsers.
+
+## Configuration files
+
+Configuration files are used to store information like database location and
+credentials for dynamic sites.
+
+## Content Management System (CMS)
+
+Content management systems are software packages that help users easily
+create and edit websites. Examples include WordPress, Drupal, and Joomla!,
+though there are many others, including some that are custom-built.
+
+## Digital forensic specialists
+
+Digital forensic specialists are people or teams that can help you clean your
+site and identify how your site was compromised.
+
+## Static web page
+
+A static web page has a single, constant file that displays content for
+a website.
+
+## Dynamic web page
+
+A dynamic web page uses scripts to generate content on the site. A dynamic
+web page uses software to generate pages each time they are requested, using
+a combination of scripts and templates to place content.
+
+## `eval()`
+
+In PHP and JavaScript, `eval()` is a function that evaluates a string and
+returns the result. Eval functions are discouraged when a site deals with
+user input because it opens a vulnerability that allows attackers to sneak in
+malicious code (for example the injection of harmful PHP commands).
+
+## File Transfer Protocol (FTP)
+
+File Transfer Protocol (FTP) is a protocol used to transfer files from one
+machine to another.
+
+## Hidden files
+
+Hidden files are files that don't show up in a directory by default.
+Typically, files like .htaccess are hidden to protect important information
+from being accidentally modified. You need to configure your filesystem to
+allow you to see and edit hidden files.
+
+## HTTP Status Codes
+
+HTTP Status codes are standardized responses that web servers return along
+with content when users try to interact with a page, e.g. loading a page or
+submitting a comment. These codes help users understand how the website is
+responding or identify errors. Refer to the
+[World Wide Web Consortium's Status Code page](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
+for a full list of status codes and what they mean.
+
+## iFrame
+
+An iFrame allows a web page to display content from one page within another.
+Hidden iframes are a common tactic used by hackers to redirect users to their
+sites.
+
+## Log file
+
+Log files are files where web servers record user requests to keep track of
+all activities performed on the server. You can identify hacking attempts or
+suspicious traffic to your site by looking through log files.
+
+## Malware
+
+Malware is any software specifically designed to harm a computer, the
+software it is running, or its users.
+[Learn more about malware](https://support.google.com/webmasters/answer/3258249).
+
+## Obfuscation
+
+Obfuscation is a tactic used to confuse people interpreting code by making
+the code harder to read. Common obfuscation methods by hackers include
+character substitution, intentionally confusing variable names, using
+encodings like `base64`, `rot13`, `gzip`, url encoding, hex encoding, or a
+combination of them. Sometimes these methods, such as `base64` and `gzip`, are
+also used to compress and hide large amounts of code, like entire web shells.
+
+## Phishing
+
+Phishing is a form of social engineering that tricks users into giving away
+sensitive information (for instance, user names or passwords) by masquerading
+as a trusted source. For example, a phisher will email a potential victim
+pretending to be their bank and ask for their bank account credentials.
+[Learn more about phishing](https://support.google.com/websearch/answer/106318).
+
+## Search Console
+
+Google Search Console is a free service offered by Google that helps you
+monitor and maintain your site's presence in Google Search results. Google
+also uses Search Console to communicate with webmasters about website issues.
+[Learn more about Search Console](https://support.google.com/webmasters/answer/4559176?ref_topic=3309469).
+
+## Sitemap
+
+A sitemap is a file containing a list of web pages on a site that informs
+search engines about the organization of the site's content.
+[Learn more about sitemaps](https://support.google.com/webmasters/answer/156184).
+
+## Social engineering
+
+Social engineering is a technique for gaining access to or control of
+sensitive information by trying to trick people into providing access rather
+than attacking the code directly. One of the most common forms of social
+engineering is phishing.
+[Learn more about social engineering](https://support.google.com/webmasters/answer/6350487).
+
+## Traffic spike
+
+Traffic spikes are a sudden or unexpected surge in website traffic.
+
+## Two-factor authentication (2FA)
+
+Two-factor authentication is a security mechanism for protecting account
+login by requiring at least two tokens of proof. For example, a user using
+two-factor authentication would need both a password and security code
+received via SMS in order to access their account.
+
+## Web hosting service
+
+A web hosting service provides users with space to host their site on a
+web server, for example Google Sites. Extra features or tools may be
+available depending on the service.
+
+## Web scripting languages
+
+Web scripting languages are usually used in combination with HTML to add
+extra features to a site. For example, scripting languages are used for
+processing forms, moderating comments, or special visual effects. In context,
+the hacked recovery guides use the term scripting language to refer to
+either PHP or JavaScript.
+
+PHP is a server-side scripting language, which means the web server
+interprets and executes its commands.
+
+Javascript is primarily a client-side language, which means the user's
+browser interprets and executes its commands.
+
+## Web server
+
+A web server is the machine and software that hosts and controls web
+pages and other files related to a website.
+
+## Web shell
+
+A web shell is a back door script that allows attackers to maintain
+access over a server.
+
+## Webspam
+
+Webspam is deceptive search engine optimization (SEO) tactics or spam
+content that attempts to boost the ranking or popularity of a site by
+deceiving and manipulating search engines.
diff --git a/src/site/content/en/secure/hacked-with-malware/index.md b/src/site/content/en/secure/hacked-with-malware/index.md
new file mode 100644
index 00000000000..87b87172920
--- /dev/null
+++ b/src/site/content/en/secure/hacked-with-malware/index.md
@@ -0,0 +1,302 @@
+---
+layout: post
+title: Hacked with malware
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  This guide explains how to deal with a site that has been hacked with malware.
+tags:
+  - security
+---
+
+Malware is any software or mobile application specifically designed to harm a
+computer, a mobile device, the software it's running, or its users.
+You can [read more about what malware is here](https://support.google.com/webmasters/answer/3258249).
+
+If your site contains malware, users will typically see
+the warning _"This site may harm your computer"_ displayed in search results
+or in an interstitial page shown by the browser when the user attempts to visit
+your site, something like this:
+
+{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/INhVTTPZ65TEBG9N4Qpz.gif", alt="Representative malware interstitial page", width="800", height="450" %}
+
+{% Aside %}
+If your site was affected by spam, not malware, displaying the warning
+_"This site may be hacked"_ in search results, please see the page
+[Assess spam damage (Hacked with spam)](/secure/hacked-with-spam/).
+{% endAside %}
+
+{% YouTube "Snt45fZQIiU" %}
+
+## What you'll need
+
+* Shell/terminal administrator access to your site's servers: web, database, files.
+* Knowledge of shell/terminal commands.
+* Ability to run SQL queries on the database.
+
+
+## Preparation {: #preparation }
+
+1. [Sign up for Search Console](https://support.google.com/webmasters/answer/9274190),
+   and verify ownership of your hacked site as described there.
+   Search Console provides a sample of affected pages, which makes finding and
+   fixing hacked-with-malware issues much easier. In addition, you will be warned
+   when your site is detected to be affected by many types of malware or other hacks.
+1. View the [Google Safe Browsing diagnostic page](/safe-browsing/) diagnostic
+   page to see public information about whether a site is potentially harmful to users.
+   You can see the listing status for your page or site at a URL similar to this:
+     `https://transparencyreport.google.com/safe-browsing/search?url=***&lt;&lt;page_or_site>>***` For example:
+     `https://transparencyreport.google.com/safe-browsing/search?url=webmastercentralblog.blogspot.com`
+
+   ***<<page_or_site>>*** can be a specific page URL (`http://example.com/badpage`) or
+   your entire site (example.com).
+
+1. **Avoid using a browser to view pages on your site.** Because malware often
+   spreads by exploiting browser vulnerabilities, opening an infected malware
+   page in a browser may damage your computer. Unless the diagnosing instructions
+   say to access the page directly in your browser, you should use [cURL](https://www.google.com/search?q=cURL) or
+   [Wget](https://www.google.com/search?q=Wget) to perform HTTP requests
+   (for example, to fetch a page).
+
+   These freely available tools are helpful in diagnosing redirects, and have
+   the flexibility to include referrer or user-agent information. Including a
+   specific referrer or user-agent is helpful in mimicking hackers since
+   hackers may only serve malicious content to users with specific
+   user-agents or referrers to target more "real people" and can avoid
+   detection from site owners and malware scanners.
+
+```shell
+`curl -v --referer "http://www.google.com" <your-url>`
+```
+
+Here's an example that specifies both a user agent and a referrer:
+
+```shell
+`curl -v --referer "https://www.google.com" --user-agent "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; FSL 7.0.7.01001)" http://www.example.com/page.html`
+```
+
+We recommend fetching a page with and without `--referer "https://www.google.com"` because some malware is only activated when users come from Google Search results.
+
+1. Create a document to record findings from this step. The document will
+   eventually include (at minimum) the name/location of each file damaged and
+   notes about how it was infected, and will serve as the basis for
+   [Clean and maintain your site](clean_site).
+
+1. Watch the video above to see how malware works and how you can stay
+   safe during your malware investigation.
+
+## Diagnosis {: #diagnosis }
+
+Determine which malware is affecting your site:
+
+1. Open the [Security Issues report](https://search.google.com/search-console/security-issues)
+   for your site in Search Console.
+   Expand the description of the malware warning to see a list of example affected pages.
+   Note that this list is not exhaustive; you might not get example pages for
+   all types of malware on your site.
+1. Test your example pages for the following types of malware:
+
+Warning: Opening affected pages directly in the browser can download malicious content to your computer.
+Unless directed to visit the page directly in your browser as part of the debugging
+process, use cURL or Wget to access your site.
+
+### Server configuration malware (unwanted redirects)
+
+{% YouTube "zyAxY5boWSs" %}
+
+A hacker has compromised your site and is redirecting visitors from your good site to their malware attack site, likely by modifying your server's configuration file(s). Server configuration files commonly allow the site administrator to specify URL redirects for specific pages or directories on a website. For example, on Apache servers, this is the `.htaccess` file as well as `httpd.conf`.
+
+#### Diagnosis
+
+Visit some of the example URLs shown in the Security Issues report. A response from a page infected with the "server configuration" infection might include the following headers:
+
+```shell
+&lt; HTTP/1.1 301 Moved Permanently
+&lt; Date: Sun, 24 Feb 2013 21:06:45 GMT
+&lt; Server: Apache
+&lt; Location: http://&lt;<strong>_malware-attack-site_</strong>&gt;/index.html
+&lt; Content-Length: 253
+```
+
+#### Determine affected files
+
+Log in to your server through shell/terminal access (the site may be offline if you wish) and review relevant server configuration files. There may be more than one hacked server configuration file on your site. Check these files for unwanted directives, such as redirects, where the hacker can configure your site to redirect to unknown malware attack sites. For example, in the .htaccess file, you might see a redirect such as this:
+
+```shell
+RewriteEngine On
+RewriteCond %{HTTP_REFERER} .*google.*
+**RewriteRule ^third-page.html($|/) http://&lt;<em><strong>_malware-site_</strong></em>&gt;/index.html** [R=301]
+```
+
+{% Aside %}
+Any files that include these bad redirects; you will need to clean them later.
+{% endAside %}
+
+### SQL injection
+
+{% YouTube "oZ2kTLDXNNU" %}
+
+A hacker has compromised your site's database. For example, the hacker may have programmatically inserted malicious code into every record of a database table, so that when the server loads a page that requires information from the database, the malicious code is now embedded in the page's content and can potentially harm site visitors.
+
+#### Diagnosis
+
+1. Run some queries on the affected URLs in the command-line, and examine the response for SQL attack words like "iframe" or "eval".
+1. Next, log in to your database server or view your database through a tool like <a href="http://www.phpmyadmin.net/home_page/index.php">phpMyAdmin</a>. If you used Wget or cURL, try to correlate the damage found in the page's source code through Wget or cURL with the actual database entries. For example, if you noticed your pages included a dangerous iframe, you could perform a SQL query searching for iframe code. For example:
+```shell
+SELECT * FROM blog_posts WHERE post_text LIKE '%&gt;iframe%';
+``` 
+1. You may also want to check database log and error files on your server for unusual activity, such as unexpected SQL commands that seem abnormal for regular users or errors.
+
+#### Fix the issue
+
+Either update each infected database record or you can restore your last known database backup.
+
+### Code injection
+
+{% YouTube "8SX2Ks2XOgo" %}
+
+Pages on your site were modified to include malicious code, such as an iframe to a malware attack site.
+
+#### Diagnosis
+
+Visit some of the example URLs shown in the Security Issues report with cURL or wGet and examine for suspicious code. Injected code can take many types, and can be hard to find. It may be helpful to search for words like "iframe" to find iframe code. Other helpful keywords are "script", "eval", and "unescape." For example, to search all files for "iframe" on Unix-based systems:
+
+```shell
+$grep -irn "iframe" ./ | less</pre>
+```
+
+Here are some common malware patterns to look for.
+
+An iframe that loads a malicious site:
+
+```html
+&lt;iframe frameborder="0" height="0" src="http://&lt;<strong><em>_malware-site_</em></strong>&gt;/path/file"
+  style="display:none" width="0"&gt;&lt;/iframe&gt;
+```
+
+JavaScript or another scripting language that calls and runs scripts from an attack site:
+
+```html
+&lt;script type='text/javascript' src='http://&lt;<em><strong>_malware-site_</strong></em>&gt;/js/x55.js'&gt;&lt;/script&gt;
+```
+
+Scripting that redirects the browser to an attack site:
+
+```html
+&lt;script&gt;
+  if (document.referrer.match(/google\.com/)) {
+    window.location("http://&lt;<em><strong>_malware-site_</strong></em>&gt;/");
+  }
+&lt;/script&gt;
+```
+
+Malicious code that's obfuscated to avoid detection:
+
+```js
+eval(base64_decode("aWYoZnVuaauUl+hasdqetiDi2iOwlOHTgs+slgsfUNlsgasdf"));
+```
+
+Shared object files designed to randomly write harmful code to otherwise benign scripts:
+
+```shell
+#httpd.conf modified by the hacker
+LoadModule harmful_module modules/mod_harmful.so
+AddModule mod_harmful.c
+```
+
+### Malicious error templates
+
+{% YouTube "nVnn8HQJ4Ao" %}
+
+The template used for error messages, such as 404 File not Found, is configured to distribute malware. In this way, attackers can launch attacks on URLs that do not even exist on your site.
+
+#### Diagnosis
+
+Request a page on your site that doesn't exist, or that throws another type of error, and examine the response to see if it comes from another site or otherwise contains malware.
+
+#### Fix the issue
+   
+Log in to your webserver and search your server configuration files for error page directives. For example, the error template for Apache webservers can be declared in the .htaccess file. Here is an example .htaccess file entry that retrieves 404 error pages from a malicious site:
+
+```shell
+ErrorDocument 404 http://&lt;<span class="red-text"><em><strong>_malware-site_</strong></em></span>&gt;/index.html
+```
+
+When ready to clean your site, you can either replace the .htaccess files(s) with a known good backup, or you can delete the unwanted ErrorDocument directives on the existing .htaccess file(s). Be sure to also clean the actual error files if they exist on your site. Last, restart your webserver to make sure that all changes take effect.
+
+### Loading resources from a compromised or malicious site
+
+Your site uses content or resources from a website that is known to contain malicious content. These could be JavaScript files, images, or other files. Because of this, your site will be flagged for malware, which is loaded from that other site.
+
+#### Diagnosis
+
+Visit some of the example URLs shown in the Security Issues report. 
+
+#### Fix the issue
+
+1. Confirm the issue by browsing to a few of the sample URLs listed in
+        the Security Issues report in Search Console. You should see
+        a browser warning.
+1. The browser warning will tell you the domain of the questionable
+        content. Remove all references to the flagged site listed in the
+        browser warning.
+1. If the content from a flagged site was included without your knowledge, the problem is more
+        serious and your site has most likely been compromised, and you should
+        continue to examine your site for other hacks and vulnerabilities.
+1. If you intentionally included content from a legitimate site that became flagged and you wish to re-include the content after the flagged site becomes cleaned up, you can monitor the status of the flagged site using the [Google Safe Browsing diagnostics page](https://www.google.com/transparencyreport/safebrowsing) for that site (`http://www.google.com/safebrowsing/diagnostic?site=www.example.com`). Legitimate sites are often cleaned up quickly by their owners.
+
+## Additional investigation {: #additional }
+
+{% YouTube "2A4dLkXXUjo" %}
+
+Next, check for any additional malicious files or changes on your
+system. Be aware that the hacker may have
+modified existing pages or database records, created entirely new spammy
+pages, written functions to display spam on clean pages, or left "back doors"
+that allow the hacker re-entry to your site, or that re-inject malicious
+code that you've removed.
+
+If your site is online, consider taking it offline for this investigation.
+
+If you have a known good backup of your site, determine which files have been created or modified since the backup and investigate them. On Unix-based systems, you can use a command such as this to find new files:
+
+```shell
+diff -qr <current-directory> <backup-directory>
+```
+
+For example:
+
+```shell
+diff -qr www/ backups/full-backup-20120124/
+```
+
+also:
+
+```shell
+md5sum <current-page> <backup-page>
+```
+
+For example:
+
+```shell
+md5sum www/page.html backups/full-backup-20120124/page.html
+```
+
+**Check server, access, and error logs for any suspicious activity** such as failed login attempts, command history (especially as root), the creation of unknown user accounts, and so on. Be aware that the hacker may have altered these logs for their own purposes. (If helpful, some examples are shown in the video for [Identify the vulnerability](/secure/identify-the-vulnerability/).)
+
+**Check configuration files for redirects**. Your configuration files are typically named `.htaccess` and `httpd.conf`. Hackers often create conditional redirects based on the user-agent, time of day, or referrer. If you need to update configuration files, you may need to restart your server for your changes to take effect.
+
+**Check for overly-lenient folder and file permissions.** Hackers tamper with permissions because if lenient permissions remain undetected by the site owner, the hacker will have a way to reenter the site. Files greater than `644 (rw-r--r--)` and folders greater than `755 (rwxr-xr-x)` can cause security issues. Make sure any looser permission are really necessary. On Unix-based systems, try:
+
+```shell
+find <your-dir> -type d -not -perm 755 -exec ls -ld {} \;
+```
+
+and:
+
+```shell
+find <your-dir> -type f -not -perm 644 -exec ls -la {} \;
+```
+
+If you have a database, investigate record by record, using a tool like
+   [phpMyAdmin](https://www.phpmyadmin.net/home_page/index.php).
diff --git a/src/site/content/en/secure/hacked/index.md b/src/site/content/en/secure/hacked/index.md
new file mode 100644
index 00000000000..04bba245169
--- /dev/null
+++ b/src/site/content/en/secure/hacked/index.md
@@ -0,0 +1,29 @@
+---
+layout: post
+title: Help, I think I've been hacked
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Learn how and why websites are hacked.
+tags:
+  - security
+---
+
+Every day, cybercriminals compromise thousands of websites. Hacks are often invisible to users, yet remain harmful to anyone viewing the page—including the site owner. For example, a hacker may have infected your site with harmful code which in turn can record keystrokes on visitors' computers, stealing login credentials for online banking or financial transactions. If you're not sure whether or not your site was hacked, start by reading [how do I know if my site is hacked](/secure/how-do-i-know-if-my-site-was-hacked/)?
+
+
+<figure>
+    {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/INhVTTPZ65TEBG9N4Qpz.gif", alt="Different errors that might indicate a hacked site.", width="800", height="450" %}
+    <figcaption>If you're a site owner and you see one of these, you might have been hacked.</figcaption>
+</figure>
+
+## Learn more about hacking
+
+The following video covers:
+
+- How and why sites are hacked.
+- The process for recovering a site and removing any user-facing warnings.
+- Approximate time to fix the site.
+- Fixing it yourself or hiring a professional.
+
+{% YouTube "mbJvL61DOZg" %}
diff --git a/src/site/content/en/secure/how-do-i-know-if-my-site-was-hacked/index.md b/src/site/content/en/secure/how-do-i-know-if-my-site-was-hacked/index.md
new file mode 100644
index 00000000000..97ecd466f44
--- /dev/null
+++ b/src/site/content/en/secure/how-do-i-know-if-my-site-was-hacked/index.md
@@ -0,0 +1,48 @@
+---
+layout: post
+title: How do I know if my site was hacked?
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Steps to follow if you think that your site may be hacked.
+tags:
+  - security
+---
+
+Follow these steps if:
+
+*   You've been alerted by Google that your site is hacked
+*   You see a warning in search that your site is hacked or compromised
+*   You're not sure if your site is actually hacked
+
+If you're unsure if your site is actually hacked, or if you think your site
+was incorrectly flagged, start by registering your site in
+[Search Console](http://search.google.com/search-console/). Go to the
+[Security Issues](https://search.google.com/search-console/security-issues)
+sections of Search Console and look for example URLs where Google detected
+that your site has been hacked. The video below provides an overview of how Search Console can help you.
+
+{% YouTube "oPsOZI8x5VM" %}
+
+If you're unable to see hacked content on the URLs provided in Search Console,
+the hacked content might be using a technique known as
+[cloaking](//support.google.com/webmasters/answer/66355). Cloaking makes
+cleaning a site more difficult by showing different content to different
+types of users. For example, when you go to a page on your site like
+www.example.com/cheap-drugs, you might see a page without any content.
+This might lead you to believe that the hacked content on your site
+doesn't exist. However, when a search engine like Google accesses
+www.example.com/cheap-drugs, it will see spammy words and links.
+
+To check for cloaking, use the
+[Hacked Sites Troubleshooter](https://support.google.com/webmasters/troubleshooter/6155978).
+The troubleshooter will walk you through a few tools like the `site:`
+search operator and
+[Inspect URL tool](https://support.google.com/webmasters/answer/9012289)
+that can help you uncover any cloaked hacked content.
+
+After you've double checked your pages, if you still think think your site
+was incorrectly flagged, please post in the
+[Webmaster Help Forums](https://productforums.google.com/forum/#!forum/webmasters).
+Otherwise, start building your [support team](/build-a-support-team/).
+
diff --git a/src/site/content/en/secure/identify-the-vulnerability/index.md b/src/site/content/en/secure/identify-the-vulnerability/index.md
new file mode 100644
index 00000000000..ac8baf86d3d
--- /dev/null
+++ b/src/site/content/en/secure/identify-the-vulnerability/index.md
@@ -0,0 +1,128 @@
+---
+layout: post
+title: Identify the vulnerability
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  How to search for vulnerabilities on your site.
+tags:
+  - security
+---
+
+As there may be multiple, independent hacks in place, even if you're able to
+find and fix one vulnerability, we recommend continuing to search for others.
+Start your investigation by reading about the [top ways websites get hacked
+by spammers](/secure/top-ways-sites-get-hacked-by-spammers/).
+
+{% YouTube "SpSNvSUpc3k" %}
+
+## You'll need
+
+* Shell/terminal administrator access to your site's servers: web, database,
+  files
+* Knowledge of shell or terminal commands
+* Understanding of code (such as PHP or JavaScript)
+* Ability to run two antivirus scanners
+
+## Next actions
+
+We'll cover several common ways a site can be compromised. Hopefully, one of
+these vulnerabilities will either apply to your site or will shed light on
+additional possibilities.
+
+Please be aware that **vulnerability scanners** differ from
+**antivirus scanners**. Vulnerability scanners can be far more invasive and
+have greater potential to cause unwanted damage to your site. Please follow
+all directions, such as backing up your site, before running the scanner.
+
+## Potential vulnerabilities
+
+Potential vulnerabilities to investigate include:
+
+### Virus-infected administrator's computer
+
+On an administrator's virus-infected computer, the hacker may have installed
+spyware to record the site admin's keystrokes.
+
+* **Check for viruses on administrator's systems.** We recommend running
+  several reputable antivirus scanners, or AV scanners, on every computer
+  used by an administrator to log in to the site. Since new malware infections
+  are constantly being designed to evade scanners, this action isn't a
+  foolproof method of virus detection. Since AV scanners might report false
+  positives, running several scanners can provide more data points to
+  determining whether a vulnerability exists. Also consider scanning both your
+  webserver and all devices used to update or post to the site, just to be safe.
+    * If the AV scanner detects spyware, a virus, trojan horse, or any
+      suspicious program, investigate the site's server logs to check for
+      activity by the administrator who owns the infected computer.
+    * Log files may have been altered by the hacker. If not, correlating the
+      administrator's username with suspicious commands in the log file is
+      further evidence that a virus on an administrator's system caused the
+      site to be vulnerable.
+
+### Weak or reused passwords
+
+Cracking a weak password can be relatively easy for hackers, and it provides
+them direct access to your server. Strong passwords have a combination of
+letters and numbers, punctuation, no words or slang that might be found in a
+dictionary. Passwords should only be used for one application, not reused
+throughout the web. When passwords are reused, it only takes one security
+breach-on one application for a hacker to find the login-and-password then
+attempt to reuse it elsewhere.
+
+* In the server log, check for undesirable activity, such as multiple login
+  attempts for an administrator or an administrator making unexpected commands.
+  Make note of when the suspicious activity occurred because understanding when
+  the hack first took place helps determine what backups may still be clean.
+
+### Out-of-date software
+
+Check that your server(s) have installed the latest version of the operating
+system, content management system, blogging platform, applications, plugins,
+etc.
+
+* Research (perhaps through a web search) all installed software to determine
+  if your version contains a security advisory. If so, the possibility that
+  outdated software caused your site to be vulnerable is quite likely.
+* As a best practice, always aim to keep your servers' software up to date,
+  regardless of whether outdated software resulted in vulnerability issues this time.
+
+### 4. Permissive coding practices, such as open redirects and SQL injections
+
+#### Open redirects
+
+Open redirects are coded with the intention for the URL structure to allow
+the addition of another URL so users can reach a useful file or webpage on the
+site. For example:
+
+`http://example.com/page.php?url=http://example.com/good-file.pdf`
+
+or
+
+`http://example.com/page.php?url=malware-attack-site>`
+
+* If your site is abused by open redirects, you likely noticed the message
+  in Search Console provided example URLs that included open redirects to an
+  undesirable destination.
+* To prevent open redirects in the future, check if "allow open redirects"
+  is turned on by default in your software, whether your code can prohibit
+  off-domain redirects, or if you can sign the redirect so that only those
+  with properly hashed URLs and the cryptographic signature can be redirected.
+
+#### SQL injections
+
+SQL injections occur when a hacker is able to add rogue commands to user input
+fields executed by your database. SQL injections update records in your
+database with unwanted spam or malware content, or they dump valuable data
+to output for the hacker. If your site uses a database, and especially if
+you were infected with the malware type
+[SQL injection](https://www.support.google.com/webmasters/answer/3024309),
+it's possible that your site was compromised by a SQL injection.
+
+* Login to the database server and look for suspicious content in the
+  database, such as otherwise regular text fields that now show iframes or
+  scripts.
+* For suspicious values, check that the user input is validated and properly
+  escaped or perhaps strongly typed so they can't be executed as code. if
+  user input isn't checked before database processing, SQL injection may be
+  a root-cause vulnerability on your site.
diff --git a/src/site/content/en/secure/index.md b/src/site/content/en/secure/index.md
new file mode 100644
index 00000000000..a789e83308a
--- /dev/null
+++ b/src/site/content/en/secure/index.md
@@ -0,0 +1,8 @@
+---
+layout: collection
+override:tags: []
+date: 2018-11-05
+pathName: secure
+tags:
+  - security
+---
\ No newline at end of file
diff --git a/src/site/content/en/secure/index.njk b/src/site/content/en/secure/index.njk
deleted file mode 100644
index 56f18b253ae..00000000000
--- a/src/site/content/en/secure/index.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: secure
-tags:
-  - security
----
\ No newline at end of file
diff --git a/src/site/content/en/secure/network-error-logging/index.md b/src/site/content/en/secure/network-error-logging/index.md
new file mode 100644
index 00000000000..e5a5a7caecc
--- /dev/null
+++ b/src/site/content/en/secure/network-error-logging/index.md
@@ -0,0 +1,318 @@
+---
+layout: post
+title: Network Error Logging (NEL)
+authors:
+  - ericbidelman
+  - maudn
+date: 2022-01-31
+description: Use Network Error Logging (NEL) to collect client-side network errors.
+tags:
+  - monitoring
+  - security
+---
+
+## Introduction {: #intro }
+
+Network Error Logging (NEL) is a mechanism for
+collecting **client-side network errors** from an origin.
+
+It uses the `NEL` HTTP response header to tell the browser to collect network errors, then integrates with the Reporting API to report the errors to a server.
+
+{% Aside 'caution' %}
+To set up Network Error Logging for your site, you will need to use the **legacy** Reporting API that relies on the `Report-To` header.
+
+This is because the new Reporting API, that relies on the `Reporting-Endpoints` header, does **not** support Network Error Logging. Learn more in [Browser support](/reporting-api/#browser-support).
+
+Instead, a new mechanism for Network Error Logging will be developed in the future. Once that becomes available, switch from the legacy Reporting API to that new mechanism.
+{% endAside %}
+
+## Overview of the legacy Reporting API
+
+### The legacy `Report-To` Header {: #header }
+
+To use the legacy Reporting API, you'll need to set a `Report-To` HTTP response header. Its
+value is an object which describes an endpoint group for the browser
+to report errors to:
+
+```http
+Report-To:
+{
+    "max_age": 10886400,
+    "endpoints": [{
+    "url": "https://analytics.provider.com/browser-errors"
+    }]
+}
+```
+
+If your endpoint URL lives on a different origin than your site, the
+endpoint should support CORS preflight requests. (e.g. `Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS; Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With`).
+
+In the example, sending this response header with your main page
+configures the browser to report browser-generated warnings
+to the endpoint `https://analytics.provider.com/browser-errors` for `max_age` seconds.
+It's important to note that all subsequent HTTP requests made by the page
+(for images, scripts, etc.) are ignored. Configuration is setup during
+the response of the main page.
+
+### Explanation of header fields {: #fields }
+
+Each endpoint configuration contains a `group` name, `max_age`, and `endpoints`
+array. You can also choose whether to consider subdomains when reporting
+errors by using the `include_subdomains` field.
+
+| Field                | Type             | Description                                                                                                                                                                                     |
+| -------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `group`              | string           | Optional. If a `group` name is not specified, the endpoint is given a name of "default".                                                                                                        |
+| `max_age`            | number           | **Required**. A non-negative integer that defines the lifetime of the endpoint in seconds. A value of "0" will cause the endpoint group to be removed from the user agent’s reporting cache.    |
+| `endpoints`          | Array&lt;Object> | **Required**. An array of JSON objects that specify the actual URL of your report collector.                                                                                                    |
+| `include_subdomains` | boolean          | Optional. A boolean that enables the endpoint group for all subdomains of the current origin's host. If omitted or anything other than "true", the subdomains are not reported to the endpoint. |
+
+The `group` name is a unique name used to associate a string with
+an endpoint. Use this name in other places that integrate
+with the Reporting API to refer to a specific endpoint group.
+
+The `max-age` field is also required and specifies how
+long the browser should use the endpoint and report errors to it.
+
+The `endpoints` field is an array to provide failover and load balancing
+features. See the section on [Failover and load balancing](#load). It's
+important to note that the **browser will select only one endpoint**, even
+if the group lists several collectors in `endpoints`. If you want to send a
+report to several servers at once, your backend will need to forward the
+reports.
+
+### How does the browser send reports? {: #send-how }
+
+The browser periodically batches reports and sends them to the reporting
+endpoints that you configure.
+
+To send reports, the browser issues a `POST`
+request with
+`Content-Type: application/reports+json` and a body containing the array of
+warnings/errors which were captured.
+
+### When does the browser send reports? {: #send-when }
+
+**Reports are delivered out-of-band from your app**, meaning the browser
+controls when reports are sent to your server(s).
+
+The browser attempts to
+deliver queued reports at the most opportune time. This may be as soon as they're ready (in order to provide
+timely feedback to the developer) but the browser can also delay delivery if it's
+busy processing higher priority work, or if the user is on a slow and/or
+congested network at the time.
+The browser may also prioritize sending
+reports about a particular origin first, if the user is a frequent visitor.
+
+There's little to no performance concern
+(e.g. network contention with your app) when using the Reporting API. There's
+also no way to control when the browser sends queued reports.
+
+### Configuring multiple endpoints {: #multi }
+
+A single response can configure several endpoints at once by sending
+multiple `Report-To` headers:
+
+```http
+Report-To: {
+             "group": "default",
+             "max_age": 10886400,
+             "endpoints": [{
+               "url": "https://example.com/browser-reports"
+             }]
+           }
+Report-To: {
+             "group": "network-errors-endpoint",
+             "max_age": 10886400,
+             "endpoints": [{
+               "url": "https://example.com/network-errors"
+             }]
+           }
+```
+
+or by combining them into a single HTTP header:
+
+```http
+Report-To: {
+             "group": "network-errors-endpoint",
+             "max_age": 10886400,
+             "endpoints": [{
+               "url": "https://example.com/network-errors"
+             }]
+           },
+           {
+             "max_age": 10886400,
+             "endpoints": [{
+               "url": "https://example.com/browser-errors"
+             }]
+           }
+```
+
+Once you've sent the `Report-To` header, the browser caches the endpoints
+according to their `max_age` values, and sends all of those nasty console
+warnings/errors to your URLs.
+
+### Failover and load balancing {: #load }
+
+Most of the time you'll be configuring one URL collector per group. However,
+since reporting can generate a good deal of traffic, the spec includes failover
+and load-balancing features inspired by the DNS
+[SRV record](https://tools.ietf.org/html/rfc2782#).
+
+The browser will do its best to deliver a report to **at most one** endpoint
+in a group. Endpoints can be assigned a `weight` to distribute load, with each
+endpoint receiving a specified fraction of reporting traffic. Endpoints can
+also be assigned a `priority` to set up fallback collectors.
+
+Fallback collectors are only tried when uploads to primary collectors fail.
+
+**Example**: Create a fallback collector at `https://backup.com/reports`:
+
+```http
+Report-To: {
+             "group": "endpoint-1",
+             "max_age": 10886400,
+             "endpoints": [
+               {"url": "https://example.com/reports", "priority": 1},
+               {"url": "https://backup.com/reports", "priority": 2}
+             ]
+           }
+```
+
+## Setting up Network Error Logging {: #setup-nel }
+
+### Setup {: #setup }
+
+To use NEL, set up the `Report-To` header with a
+collector that uses a named group:
+
+```http
+Report-To: {
+    ...
+  }, {
+    "group": "network-errors",
+    "max_age": 2592000,
+    "endpoints": [{
+      "url": "https://analytics.provider.com/networkerrors"
+    }]
+  }
+```
+
+Next, send the `NEL` response header to start collecting errors. Since NEL
+is opt-in for an origin, you only need to send the header once. Both `NEL` and
+`Report-To` will apply to future requests to the same origin and will continue
+to collect errors according to the `max_age` value that was used to set up
+the collector.
+
+The header value should be a JSON object that contains a `max_age` and
+`report_to` field. Use the latter to reference the group name of your
+network errors collector:
+
+```http
+GET /index.html HTTP/1.1
+NEL: {"report_to": "network-errors", "max_age": 2592000}
+```
+
+{% Aside 'caution' %}
+The `Report-To` header uses a hyphen. Here, `report_to` uses an underscore.
+{% endAside %}
+
+### Subresources {: #sub }
+
+{% Aside 'important' %}
+NEL works across navigations and subresources fetches.
+But for subresources, the containing page has no visibility
+into the NEL reports about cross-origin requests that it makes.
+{% endAside %}
+
+**Example**: If `example.com` loads `foobar.com/cat.gif` and that resource fails
+to load:
+
+- `foobar.com`'s NEL collector is notified
+- `example.com`'s NEL collector is **not** notified
+
+The
+rule of thumb is that NEL reproduces server-side logs, just generated on
+the client.
+
+Since `example.com` has no visibility into `foobar.com`'s server
+logs, it also has no visibility into its NEL reports.
+
+### Debugging report configurations {: #debug }
+
+If you don't see reports showing up on your server, head over to
+`chrome://net-export/`. That page is useful for
+verifying things are configured correctly and reports are being sent
+out properly.
+
+### What about ReportingObserver? {: #reporting-observer }
+
+[`ReportingObserver`](/reporting-observer) is a related, but different reporting mechanism. It's based on JavaScript calls.
+**It's not suited for network error logging**, as network errors
+can't be intercepted via JavaScript.
+
+## Example server {: #example }
+
+Below is an example Node server that uses Express. It shows how to configure reporting for network errors, and creates a dedicated handler to capture the result.
+
+```js
+const express = require('express');
+
+const app = express();
+app.use(
+  express.json({
+    type: ['application/json', 'application/reports+json'],
+  }),
+);
+app.use(express.urlencoded());
+
+app.get('/', (request, response) => {
+  // Note: report_to and not report-to for NEL.
+  response.set('NEL', `{"report_to": "network-errors", "max_age": 2592000}`);
+
+  // The Report-To header tells the browser where to send network errors.
+  // The default group (first example below) captures interventions and
+  // deprecation reports. Other groups, like the network-error group, are referenced by their "group" name.
+  response.set(
+    'Report-To',
+    `{
+    "max_age": 2592000,
+    "endpoints": [{
+      "url": "https://reporting-observer-api-demo.glitch.me/reports"
+    }],
+  }, {
+    "group": "network-errors",
+    "max_age": 2592000,
+    "endpoints": [{
+      "url": "https://reporting-observer-api-demo.glitch.me/network-reports"
+    }]
+  }`,
+  );
+
+  response.sendFile('./index.html');
+});
+
+function echoReports(request, response) {
+  // Record report in server logs or otherwise process results.
+  for (const report of request.body) {
+    console.log(report.body);
+  }
+  response.send(request.body);
+}
+
+app.post('/network-reports', (request, response) => {
+  console.log(`${request.body.length} Network error reports:`);
+  echoReports(request, response);
+});
+
+const listener = app.listen(process.env.PORT, () => {
+  console.log(`Your app is listening on port ${listener.address().port}`);
+});
+```
+
+## Further reading
+
+- [Monitor your web application with the Reporting API](/reporting-api) (main post on the Reporting API)
+- [Migration guide from Reporting API v0 to v1](/reporting-api-migration)
+- [Specification: legacy Reporting API (v0)](https://www.w3.org/TR/reporting/)
+- [Specification: new Reporting API (v1)](https://w3c.github.io/reporting/)
diff --git a/src/site/content/en/secure/quarantine-your-site/index.md b/src/site/content/en/secure/quarantine-your-site/index.md
new file mode 100644
index 00000000000..1907db5a7d2
--- /dev/null
+++ b/src/site/content/en/secure/quarantine-your-site/index.md
@@ -0,0 +1,67 @@
+---
+layout: post
+title: Quarantine your site
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Take your site offline while you fix the problems.
+tags:
+  - security
+---
+
+## You'll need
+
+* Ability to prevent your webserver from serving pages (alternatively, you
+  can discuss options with your hoster). Please be aware that in later steps
+  you'll need to bring your site back online for short periods of time.
+* Account management permissions (the ability to view all users, delete users,
+  and change all passwords related to your account).
+
+{% YouTube "StID0NXeycw" %}
+
+## Next actions
+
+### 1. Take your site offline
+
+Take your site offline so that it no longer serves content to users. For
+example, stop your webserver or point your website's DNS entries to a static
+page on a different server that uses a 503 HTTP response code.
+
+By taking your compromised site completely offline, you can complete
+administrative tasks with less interference from the hacker, and meanwhile,
+malicious code or spammy files won't be exposed to visitors. It's unlikely
+that taking your site offline intermittently or temporarily during the recovery
+process will affect future ranking of your site in search results.
+
+Contacting your hoster is helpful if you're unsure how to take your site
+  offline. For instance, your hoster might configure at 503 response for your
+  site *from outside your infected directories* (which is a fine option).
+  Convey to your hoster that you'll soon need to toggle your site between
+  online and offline for testing purposes as that may help them give you the
+  most self-service method for taking your site offline.
+
+Having your site return a 4xx or 5xx [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
+  isn't enough to protect your users. Harmful content can still be returned to
+  users with 404, 503, etc. *The 503 status code is a useful signal that your
+  site is down temporarily, but the response should occur from outside your
+  compromised server/site.*
+
+Using a [`robots.txt disallow`](/search/reference/robots_txt) is also
+  insufficient because it only blocks search engine crawlers. Regular users
+  can still access harmful content.
+
+### 2. Contact your hoster
+
+If you haven't already done so, **contact your hoster to make them aware of
+the situation**. If your hoster was also compromised, it may help them
+understand the scope of the problem.
+
+### 3. Perform thorough user account management
+
+* View a list of your site's users accounts and check if the hacker created
+  a new user account. If illicit accounts were created, write down the unwanted
+  account names for later investigation. Then delete the accounts to prevent
+  future logins by the hacker.
+* Change the passwords for all site users and accounts. This includes logins
+  for FTP, database access, system administrators, and content management
+  system (CMS) accounts.
\ No newline at end of file
diff --git a/src/site/content/en/secure/request-a-review/index.md b/src/site/content/en/secure/request-a-review/index.md
new file mode 100644
index 00000000000..7c37e43060d
--- /dev/null
+++ b/src/site/content/en/secure/request-a-review/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Request a review
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  You must request a review from Google to have your page or site unflagged as dangerous or possibly deceptive to users.
+tags:
+  - security
+---
+
+You must request a review from Google to have your page or site unflagged as
+dangerous or possibly deceptive to users.
+
+{% YouTube "lc3UjnDcMxo" %}
+
+## You'll need
+
+* Knowledge of shell/terminal commands
+
+## What you'll do
+
+### 1. Prerequisites
+
+Before requesting a review, confirm that you've taken the following steps:
+
+* Verified ownership of your site in Search Console
+* Cleaned your site of the hacker's vandalism
+* Corrected the vulnerability
+* Brought your clean site back online
+
+### 2. Double-check that your pages are available and clean
+
+To be safe, use either Wget or cURL to view pages on your site, such as your
+homepage and a URL modified by the hacker; these should now be clean. If so,
+and you're confident that same applies to the rest of the pages on your site,
+it's time to request a review.
+
+Note: Your pages must be available to be crawled by Googlebot to ensure that
+they are clean. Make sure that they are not roboted out or blocked from
+indexing by `noindex` robots META tags or directives.
+
+### 3. Request a review
+
+Before requesting a review:
+
+* **be sure that the problem is truly fixed**;
+requesting a review if the problem still exists will only prolong the period
+of time that your site is flagged as dangerous.
+
+* **double-check where you should request a review**; the review process will
+take place in a specific tool, depending on the issue your site is facing.
+Please refer to the channels below.
+
+
+#### A. Hacked site
+
+*You received a hacked site notification in the
+[**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+of the Search Console:*
+
+1. Now that you have gone through the successive steps of the clean-up process,
+  you can go in the [**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+  report again and find the issue either as a site-wide match, or as a partial
+  match.
+2. Select **Request a review**.
+
+    In order to submit a review, we ask that you provide more information on what
+    you did to clean the site. For each category of hacked spam, you can write a
+    sentence explaining how the site was cleaned (for example, "For Content
+    injection hacked URLs, I removed the spammy content and corrected the
+    vulnerability: updating an out-of-date plugin.").
+
+
+#### B. Unwanted software (including malware)
+
+*You received a malware or unwanted software notification in the
+[**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+of the Search Console:*
+
+1. Open the
+  [**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+  again in Search Console. The report may still show the warnings and sample
+  infected URLs you saw before.
+2. Select **Request a review**.
+
+In order to submit a review, we ask that you provide more information on
+what you did to remove the policy violation from your site. For example,
+"I removed the 3rd-party code that was distributing malware on my
+website and replaced it with a more modern version of the code".
+
+
+You did not receive a malware or unwanted software notification in the
+[**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+of the Search Console, but you received a notification in your AdWords account:
+
+1. Request a review through the
+  [AdWords support center](https://support.google.com/adwords/contact/site_policy).
+
+
+#### C. Phishing or Social Engineering
+
+You received a phishing notification in the
+[**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+of the Search Console:
+
+1. Open the
+  [**Security Issues report**](https://www.google.com/webmasters/tools/security-issues)
+  again in Search Console. The report may still show the warnings and sample
+  infected URLs you saw before.
+2. Select **Request a review**.
+
+In order to submit a review, we ask you to provide more information on what you did to remove the policy violation from your site. For example, "I removed the page that was asking users to enter personal information".
+
+3. You can also request the review at
+  [google.com/safebrowsing/report_error/](https://www.google.com/safebrowsing/report_error/).
+  On top of serving as a reporting tool for site owners who believe their page
+  was incorrectly flagged for phishing, this report will trigger a review of
+  phishing pages that have been cleaned to lift warnings.
+
+### 4. Wait for the review to be processed
+
+* **Hacked with spam review process time:** Reviews for sites hacked with
+  spam may require up to several weeks to process. This is because spam
+  reviews can involve manual investigation or a complete reprocessing of
+  the hacked pages. If the review is approved, Security Issues will no
+  longer display hacked category types or example hacked URLs.
+* **Malware review processing time:** Reviews for sites infected with
+  malware require a few days to process. Once the review is completed, the
+  response will be available within your **Messages** in Search Console.
+* **Phishing review processing time:** Phishing reviews take about a day to
+  process. If successful, the user-visible phishing warning will be
+  removed and your page may again surface in search results.
+
+If Google finds that your site is clean, warnings from browsers and
+search results should be removed within 72 hours.
+
+If Google determines that you have not fixed the problem, the Security
+Issues report in Search Console could display more sample infected
+URLs to assist your next investigation for example. Malware, phishing or hacked
+with spam site warnings will remain in search results and/or browsers as a
+caution to protect users.
+
+### Final steps
+
+#### If your request was approved
+
+Verify that your site works as expected: pages load properly and links are clickable. To keep your site safe, we encourage all site owners to implement the maintenance and security plan created in [Clean and maintain your site](/secure/clean-and-maintain-your-site/).
+
+#### If your request was not approved
+
+Reassess your site for [malware](/secure/hacked-with-malware/) or [spam](/secure/hacked-with-spam/), or for any modifications or new files created by the hacker. Alternatively, you can consider requesting more help from [specialists in your support team](/secure/build-your-support-team/).
diff --git a/src/site/content/en/secure/same-origin-policy/clickjacking.png b/src/site/content/en/secure/same-origin-policy/clickjacking.png
deleted file mode 100644
index bf476672db3..00000000000
Binary files a/src/site/content/en/secure/same-origin-policy/clickjacking.png and /dev/null differ
diff --git a/src/site/content/en/secure/same-origin-policy/index.md b/src/site/content/en/secure/same-origin-policy/index.md
index c4418a4cc2a..f7ef15e7f77 100644
--- a/src/site/content/en/secure/same-origin-policy/index.md
+++ b/src/site/content/en/secure/same-origin-policy/index.md
@@ -4,6 +4,7 @@ title: Same-origin policy
 authors:
   - kosamari
 date: 2018-11-05
+updated: 2022-05-23
 description: |
   A browser can load and display resources from multiple sites. If there is no
   restriction on interactions between those resources, and if a script is
@@ -33,7 +34,7 @@ embed resources from a different origin. This policy is mostly a historical
 artifact and can expose your site to vulnerabilities such as [clickjacking using
 iframes](#how-to-prevent-clickjacking). You can restrict cross-origin reading
 of these tags using a [Content Security
-Policy](https://developers.google.com/web/fundamentals/security/csp/).
+Policy](/csp/).
 
 ## What's considered same-origin?
 
@@ -54,13 +55,13 @@ because the scheme is different.
 Generally, embedding a cross-origin resource is permitted, while reading a
 cross-origin resource is blocked.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tbody>
     <tr>
       <td>iframes</td>
       <td>
-        Cross-origin embedding is usually permitted (depending on the <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="noopener">X-Frame-Options</a></code> directive), but cross-origin reading (such as using JavaScript to access a document in an iframe) isn't.
+        Cross-origin embedding is usually permitted (depending on the <code><a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options" rel="noopener">X-Frame-Options</a></code> directive), but cross-origin reading (such as using JavaScript to access a document in an iframe) isn't.
       </td>
     </tr>
     <tr>
@@ -78,7 +79,7 @@ cross-origin resource is blocked.
     <tr>
       <td>images</td>
       <td>
-        Embedding cross-origin images is permitted. However, reading cross-origin images (such as loading a cross-origin image into a <code>canvas</code> element using JavaScript) is blocked.
+        Embedding cross-origin images is permitted. However, reading cross-origin image data (such as retrieving binary data from a cross-origin image using JavaScript) is blocked.
       </td>
     </tr>
     <tr>
@@ -101,13 +102,13 @@ cross-origin resource is blocked.
 [See how the same-origin policy works when accessing data inside an iframe](/codelab-same-origin-iframe).
 {% endAside %}
 
-{% Assessment page, 'self-assessment' %}
+{% Assessment 'self-assessment' %}
 
 ### How to prevent Clickjacking
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./clickjacking.png" alt="clickjacking">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jFXSbDjBonhdGD65rCc1.png", alt="clickjacking", width="800", height="408" %}
+  <figcaption>
     Figure: Clickjacking mechanism illustrated in 3 separate layers (base site,
     iframed site, transparent button).
   </figcaption>
@@ -120,11 +121,11 @@ attackers.
 
 To block other sites from embedding your site in an iframe, add a content
 security policy with [`frame-ancestors`
-directive](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
+directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
 to the HTTP headers.
 
 Alternatively, you can add `X-Frame-Options` to the HTTP headers see
-[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
+[MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options)
 for list of options.
 
 ## Wrap up
diff --git a/src/site/content/en/secure/same-origin-policy/self-assessment.assess.yml b/src/site/content/en/secure/same-origin-policy/self-assessment.assess.yml
index 4bf66e43c95..d533162173f 100644
--- a/src/site/content/en/secure/same-origin-policy/self-assessment.assess.yml
+++ b/src/site/content/en/secure/same-origin-policy/self-assessment.assess.yml
@@ -74,8 +74,7 @@ questions:
     stem: Can this image be drawn on the canvas?
     options:
       - rationale: |
-          **It depends!** 😅 The image is on a different origin.
-          If the origin's owner gave the image the appropriate
-          [CORS header](/cross-origin-resource-sharing),
-          the image can be safely drawn. If not, the image will
-          [cause an error](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F).
+          **Yes.** Although the image is on a different origin, loading it as an
+          `img` source does not require CORS. However, accessing the binary of
+          the image using JavaScript such as `getImageData`, `toBlob` or
+          `toDataURL` requires an explicit permission by CORS.
diff --git a/src/site/content/en/secure/same-site-same-origin/eTLD+1.png b/src/site/content/en/secure/same-site-same-origin/eTLD+1.png
deleted file mode 100644
index a07f408fa63..00000000000
Binary files a/src/site/content/en/secure/same-site-same-origin/eTLD+1.png and /dev/null differ
diff --git a/src/site/content/en/secure/same-site-same-origin/index.md b/src/site/content/en/secure/same-site-same-origin/index.md
index d0c7f38c0ce..e062511743a 100644
--- a/src/site/content/en/secure/same-site-same-origin/index.md
+++ b/src/site/content/en/secure/same-site-same-origin/index.md
@@ -4,7 +4,7 @@ title: Understanding "same-site" and "same-origin"
 authors:
   - agektmr
 date: 2020-04-15
-updated: 2020-06-10
+updated: 2023-01-25
 description: |
   "same-site" and "same-origin" are frequently cited but often misunderstood
   terms. This article helps you understand what they are and how they are
@@ -20,16 +20,19 @@ iframes.
 
 ## Origin
 
-![Origin](same-origin.png)
+{%
+  Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/Zn352nyD12uz6ORlLZiT.png",
+  alt="Origin", width="800", height="130"
+%}
 
 "Origin" is a combination of a
-[scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol)
+[scheme](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol)
 (also known as the
-[protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol), for
-example [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP) or
-[HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)),
+[protocol](https://developer.mozilla.org/docs/Glossary/Protocol), for
+example [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) or
+[HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)),
 [hostname](https://en.wikipedia.org/wiki/Hostname), and
-[port](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port)
+[port](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port)
 (if specified). For example, given a URL of `https://www.example.com:443/foo` ,
 the "origin" is `https://www.example.com:443`.
 
@@ -37,7 +40,7 @@ the "origin" is `https://www.example.com:443`.
 Websites that have the combination of the same scheme, hostname, and port are
 considered "same-origin". Everything else is considered "cross-origin".
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -82,34 +85,58 @@ considered "same-origin". Everything else is considered "cross-origin".
 
 ## Site
 
-![Site](same-site.png)
+{% Aside 'important' %}
 
-Top-level domains (TLDs) such as `.com` and `.org` are listed in the [Root Zone
+The definition of "site" has evolved and [the spec says it includes the
+scheme](https://github.com/whatwg/url/issues/448). This change has been included from late 2019. This
+effectively changes the definition of "same-site" and "cross-site" as well. What
+has been called "[schemeful same-site](/schemeful-samesite/)" is now "same-site"
+and a new concept of "schemeless same-site" emerged. Read on to learn more.
+
+{% endAside %}
+
+{%
+  Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GbXtpqme6JcvlxpWRcYf.png",
+  alt="Site (TLD+1)", width="800", height="165"
+%}
+
+[Top-level domains (TLDs)](https://developer.mozilla.org/docs/Glossary/TLD) such
+as `.com` and `.org` are listed in the [Root Zone
 Database](https://www.iana.org/domains/root/db). In the example above, "site" is
-the combination of the TLD and the part of the domain just before it. For
-example, given a URL of `https://www.example.com:443/foo` , the "site" is
-`example.com`.
-
-However, for domains such as `.co.jp` or `.github.io`, just using the TLD of
-`.jp` or `.io` is not granular enough to identify the "site". And there is no
-way to algorithmically determine the level of registrable domains for a
-particular TLD. That's why a list of "effective TLDs" was created. These are
-defined in the [Public Suffix List](https://wiki.mozilla.org/Public_Suffix_List).
- The list of eTLDs is maintained at
-[publicsuffix.org/list](https://publicsuffix.org/list/).
-
-The whole site name is known as the eTLD+1. For example, given a URL of
-`https://my-project.github.io` , the eTLD is `.github.io` and the eTLD+1 is
-`my-project.github.io`, which is considered a "site". In other words, the eTLD+1
-is the effective TLD and the part of the domain just before it.
-
-![eTLD+1](eTLD+1.png)
-
-### "same-site" and "cross-site"
-Websites that have the same eTLD+1 are considered "same-site". Websites that
-have a different eTLD+1 are "cross-site".
-
-<div class="w-table-wrapper">
+the combination of the
+[scheme](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol),
+the [TLD](https://developer.mozilla.org/docs/Glossary/TLD) and the part of the
+domain just before it (We call it TLD+1). For example, given a URL of
+`https://www.example.com:443/foo` , the "site" is `https://example.com`.
+
+### Public Suffix List and eTLD
+
+For domains that include things such as `.co.jp` or `.github.io`, just using
+`.jp` or `.io` is not granular enough to identify the "site". There is no way to
+algorithmically determine the level of registrable domains for a particular TLD.
+ That's why a list of public suffixes defined in the [Public Suffix
+List](https://wiki.mozilla.org/Public_Suffix_List) was created. These public
+suffixes are also called *effective TLDs (eTLDs)*. The list of eTLDs is
+maintained at [publicsuffix.org/list](https://publicsuffix.org/list/).
+
+To identify the "site" part of a domain that includes an eTLD, apply the same
+practice as the example with `.com`. Taking
+`https://www.project.github.io:443/foo` as an example, the scheme is `https`,
+the eTLD is `.github.io` and the eTLD+1 is `project.github.io`, so
+`https://project.github.io` is considered the "site" for this URL.
+
+{%
+  Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/7ihtYJeEPX4epAe37onN.png",
+  alt="Site (eTLD+1)", width="800", height="157"
+%}
+
+### "same-site" and "cross-site" {: #same-site-cross-site }
+
+Websites that have the same scheme and the same eTLD+1 are considered
+"same-site". Websites that have a different scheme or a different eTLD+1 are
+"cross-site".
+
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -130,7 +157,7 @@ have a different eTLD+1 are "cross-site".
       </tr>
       <tr>
         <td><strong>http</strong>://www.example.com:443</td>
-        <td><strong>same-site: different schemes don't matter</strong></td>
+        <td>cross-site: different schemes</td>
       </tr>
       <tr>
         <td>https://www.example.com:<strong>80</strong></td>
@@ -148,26 +175,28 @@ have a different eTLD+1 are "cross-site".
   </table>
 </div>
 
-### "schemeful same-site"
+### "schemeless same-site"
 
-![schemeful same-site](schemeful-same-site.png)
+{%
+  Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/G2VfM8BA5Q5LTaz22Puu.png",
+  alt="schemeless same-site", width="800", height="123"
+%}
 
-Though "same-site" ignores schemes ("schemeless same-site"), there are cases
-that must strictly distinguish between schemes in order to prevent HTTP being
-used as [a weak
+The definition of "same-site" evolved to consider the URL scheme as part of the
+site in order to prevent HTTP being used as [a weak
 channel](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8).
-In those cases, some documents refer to "same-site" more explicitly as
-"[schemeful same-site](https://github.com/sbingler/schemeful-same-site/)". In
-that case, `http://www.example.com` and `https://www.example.com` are considered
-cross-site because the schemes don't match.
+The older concept of "same-site" without scheme comparison is now called
+"schemeless same-site". For example, `http://www.example.com` and
+`https://www.example.com` are considered schemeless same-site but not same-site,
+because only the eTLD+1 part matters and the scheme is not taken into account.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
         <th>Origin A</th>
         <th>Origin B</th>
-        <th>Explanation of whether Origin A and B are "schemeful same-site"</th>
+        <th>Explanation of whether Origin A and B are "schemeless same-site"</th>
       </tr>
     </thead>
     <tbody>
@@ -178,23 +207,23 @@ cross-site because the schemes don't match.
       </tr>
       <tr>
         <td>https://<strong>login</strong>.example.com:443</td>
-        <td><strong>schemeful same-site: different subdomains don't matter</strong></td>
+        <td><strong>schemeless same-site: different subdomains don't matter</strong></td>
       </tr>
       <tr>
         <td><strong>http</strong>://www.example.com:443</td>
-        <td>cross-site: different schemes</td>
+        <td><strong>schemeless same-site: different schemes don't matter</strong></td>
       </tr>
       <tr>
         <td>https://www.example.com:<strong>80</strong></td>
-        <td><strong>schemeful same-site: different ports don't matter</strong></td>
+        <td><strong>schemeless same-site: different ports don't matter</strong></td>
       </tr>
       <tr>
         <td><strong>https://www.example.com:443</strong></td>
-        <td><strong>schemeful same-site: exact match</strong></td>
+        <td><strong>schemeless same-site: exact match</strong></td>
       </tr>
       <tr>
         <td><strong>https://www.example.com</strong></td>
-        <td><strong>schemeful same-site: ports don't matter</strong></td>
+        <td><strong>schemeless same-site: ports don't matter</strong></td>
       </tr>
     </tbody>
   </table>
@@ -202,16 +231,38 @@ cross-site because the schemes don't match.
 
 ## How to check if a request is "same-site", "same-origin", or "cross-site"
 
-Chrome sends requests along with a `Sec-Fetch-Site` HTTP header. No other
-browsers support `Sec-Fetch-Site` as of April 2020. This is part of a larger [Fetch Metadata
-Request Headers Request Headers](https://www.w3.org/TR/fetch-metadata/)
-proposal. The header will have one of the following values:
+All modern browsers (Safari support [landing
+soon](https://bugs.webkit.org/show_bug.cgi?id=238265)) send requests along with
+a [`Sec-Fetch-Site` HTTP
+header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site). The
+header has one of the following values:
 
 * `cross-site`
 * `same-site`
 * `same-origin`
 * `none`
 
+{% Aside %}
+
+`same-site` here means schemeful same-site, rather than the old schemeless
+same-site.
+
+{% endAside %}
+
 By examining the value of `Sec-Fetch-Site`, you can determine if the request is
-"same-site", "same-origin", or "cross-site" ("schemeful-same-site" is not
-captured in `Sec-Fetch-Site`).
+"same-site", "same-origin", or "cross-site".
+
+{% Aside 'important' %}
+
+You can reasonably trust the value of `Sec-Fetch-Site` header because:
+<ul>
+  <li>[HTTP headers starting with `Sec-` can not be modified by
+   JavaScript](https://www.w3.org/TR/fetch-metadata/#sec-prefix).</li>
+  <li>These headers are always set by the browser.</li>
+</ul>
+
+Even if a server receives a manipulated value for the `Sec-Fetch-Site`
+header, sent by a random HTTP client, no user or browser will be
+harmed by breaking the same-origin policy.
+
+{% endAside %}
diff --git a/src/site/content/en/secure/same-site-same-origin/same-origin.png b/src/site/content/en/secure/same-site-same-origin/same-origin.png
deleted file mode 100644
index c9c93c1c865..00000000000
Binary files a/src/site/content/en/secure/same-site-same-origin/same-origin.png and /dev/null differ
diff --git a/src/site/content/en/secure/same-site-same-origin/same-site.png b/src/site/content/en/secure/same-site-same-origin/same-site.png
deleted file mode 100644
index 3bb8ba1700c..00000000000
Binary files a/src/site/content/en/secure/same-site-same-origin/same-site.png and /dev/null differ
diff --git a/src/site/content/en/secure/same-site-same-origin/schemeful-same-site.png b/src/site/content/en/secure/same-site-same-origin/schemeful-same-site.png
deleted file mode 100644
index 14e7e6628c6..00000000000
Binary files a/src/site/content/en/secure/same-site-same-origin/schemeful-same-site.png and /dev/null differ
diff --git a/src/site/content/en/secure/securely-hosting-user-data/index.md b/src/site/content/en/secure/securely-hosting-user-data/index.md
new file mode 100644
index 00000000000..95371bdd714
--- /dev/null
+++ b/src/site/content/en/secure/securely-hosting-user-data/index.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: Securely hosting user data in modern web applications
+authors:
+  - ddworken
+date: 2023-06-08
+description: >
+  How to securely display user-controlled content on web applications.
+tags:
+  - security
+---
+
+{% Aside %} 
+This article was originally posted on the [Google Security Blog](https://security.googleblog.com/2023/04/securely-hosting-user-data-in-modern.html). 
+{% endAside %}
+
+Many web applications need to display user-controlled content. This can be as simple as serving user-uploaded images (for example, profile photos), or as complex as rendering user-controlled HTML (for example, a web development tutorial). This has always been difficult to do securely, so we've worked to find easy, but secure solutions that can be applied to most types of web applications.
+
+## Classic solutions for isolating untrusted content
+
+The classic solution for securely serving user-controlled content is to use what are known as [sandbox domains](https://security.googleblog.com/2012/08/content-hosting-for-modern-web.html). The basic idea is that if your application's main domain is `example.com`, you could serve all untrusted content on `exampleusercontent.com`. Since these two domains are [cross-site](/same-site-same-origin), any malicious content on `exampleusercontent.com` can't impact `example.com`.  
+This approach can be used to safely serve all kinds of untrusted content including images, downloads, and HTML. While it may not seem like it is necessary to use this for images or downloads, doing so helps avoid risks from [content sniffing](https://en.wikipedia.org/wiki/Content_sniffing), especially in legacy browsers.  
+Sandbox domains are widely used across the industry and have worked well for a long time. But, they have two major downsides:
+
+- Applications often need to restrict content access to a single user, which requires implementing authentication and authorization. Since sandbox domains purposefully do not share cookies with the main application domain, this is very difficult to do securely. To support authentication, sites either have to rely on [capability URLs](https://www.w3.org/TR/capability-urls), or they have to set separate authentication cookies for the sandbox domain. This second method is especially problematic in the modern web where many browsers restrict cross-site cookies by default.
+- While user content is isolated from the main site, it isn't isolated from other user content. This creates the risk of malicious user content attacking other data on the sandbox domain (for example, via reading same-origin data).
+
+It is also worth noting that sandbox domains help mitigate phishing risks since resources are clearly segmented onto an isolated domain.
+
+## Modern solutions for serving user content
+
+Over time the web has evolved, and there are now easier, more secure ways to serve untrusted content. There are many different approaches here, so we will outline two solutions that are currently in wide use at Google.
+
+### Approach 1: Serving inactive user content
+
+If a site only needs to serve inactive user content (that is content that is not HTML or JavaScript, for example images and downloads), this can now be safely done without an isolated sandbox domain. There are two key steps:
+
+* Always set the `Content-Type` header to a well-known [MIME type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) that is supported by all browsers and guaranteed not to contain active content (when in doubt, `application/octet-stream` is a safe choice).
+* In addition, always set the below response headers to ensure that the browser fully isolates the response.
+
+<table>
+  <thead>
+    <tr>
+      <th><strong>Response Header</strong></th>
+      <th><strong>Purpose</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><p><pre>
+X-Content-Type-Options: nosniff
+</pre></p></td>
+      <td>Prevents content sniffing</td>
+    </tr>
+    <tr>
+      <td><p><pre>
+Content-Disposition: attachment; filename="download"
+</pre></p></td>
+      <td>Triggers a download rather than rendering</td>
+    </tr>
+    <tr>
+      <td><p><pre>
+Content-Security-Policy: sandbox
+</pre></p></td>
+      <td>Sandboxes the content as if it was served on a separate domain</td>
+    </tr>
+    <tr>
+      <td><p><pre>
+Content-Security-Policy: default-src ‘none'
+</pre></p></td>
+      <td>Disables JavaScript execution (and inclusion of any subresources)</td>
+    </tr>
+    <tr>
+      <td><p><pre>
+Cross-Origin-Resource-Policy: same-site
+</pre></p></td>
+      <td>Prevents the page from being included cross-site</td>
+    </tr>
+  </tbody>
+</table>
+
+This combination of headers ensures that the response can only be loaded as a subresource by your application, or downloaded as a file by the user. Furthermore, the headers provide multiple layers of protection against browser bugs through the CSP sandbox header and the `default-src` restriction. Overall, the setup outlined above provides a high degree of confidence that responses served in this way cannot lead to injection or isolation vulnerabilities.
+
+#### Defense in depth
+
+While the above solution represents a generally sufficient defense against XSS, there are a number of additional hardening measures that you can apply to provide additional layers of security:
+
+-  Set a `X-Content-Security-Policy: sandbox` header for compatibility with IE11.
+-  Set a `Content-Security-Policy: frame-ancestors 'none'` header to block the endpoint from being embedded.
+-  Sandbox user content on an isolated subdomain by:
+    -  Serving user content on an isolated subdomain (e.g. Google uses domains such as `product.usercontent.google.com`).
+    -  Set `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: require-corp` to enable [cross-origin isolation](/coop-coep).
+
+### Approach 2: Serving active user content
+
+Safely serving active content (for example, HTML or SVG images) can also be done without the weaknesses of the classic sandbox domain approach.  
+The simplest option is to take advantage of the `Content-Security-Policy: sandbox` header to tell the browser to isolate the response. While not all web browsers currently implement process isolation for sandbox documents, ongoing refinements to browser process models are likely to improve the separation of sandboxed content from embedding applications. If [SpectreJS](https://security.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html) and [renderer compromise](https://chromium.googlesource.com/chromium/src/+/master/docs/security/compromised-renderers.md) attacks are outside of your threat model, then using CSP sandbox is likely a sufficient solution.  
+At Google, we've developed a solution that can fully isolate untrusted active content by modernizing the concept of sandbox domains. The core idea is to:
+
+- Create a new sandbox domain that is added to the [public suffix list](https://publicsuffix.org/). For example, by adding `exampleusercontent.com` to the PSL, you can ensure that `foo.exampleusercontent.com` and `bar.exampleusercontent.com` are cross-site and thus fully isolated from each other.
+- URLs matching `*.exampleusercontent.com/shim` are all routed to a static shim file. This shim file contains a short HTML and JavaScript snippet that listens to the `message` event handler and renders any content it receives.
+- To use this, the product creates either an iframe or a popup to `$RANDOM_VALUE.exampleusercontent.com/shim` and uses `postMessage` to send the untrusted content to the shim for rendering.
+- The rendered content is transformed to a Blob and rendered inside a [sandboxed iframe](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-sandbox).
+
+Compared to the classic sandbox domain approach, this ensures that all content is fully isolated on a unique site. And, by having the main application deal with retrieving the data to be rendered, it is no longer necessary to use capability URLs.
+
+## Conclusion
+
+Together, these two solutions make it possible to migrate off of classic sandbox domains like `googleusercontent.com` to more secure solutions that are compatible with third-party cookie blocking. At Google, we've already migrated many products to use these solutions and have more migrations planned for the next year. 
\ No newline at end of file
diff --git a/src/site/content/en/secure/security-attacks/index.md b/src/site/content/en/secure/security-attacks/index.md
index 0e0354328a4..57edac8a3db 100644
--- a/src/site/content/en/secure/security-attacks/index.md
+++ b/src/site/content/en/secure/security-attacks/index.md
@@ -37,9 +37,9 @@ your application data before it gets to a user's browser, showing modified
 information on the site or direct the user to an unintended destination. This is
 sometimes called **modification of messages**.
 
-<figure class="w-figure">
-  <img src="./modification.png" alt="modification of message">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qrf4KBAceYxf2E5A8f6J.png", alt="modification of message", width="800", height="475" %}
+  <figcaption>
     A web site being tampered by attacker to guide user to a phishing site.
   </figcaption>
 </figure>
@@ -59,9 +59,9 @@ without you noticing.
 With a **passive attack**, the attacker tries to collect or learn information
 from the application but does not affect the application itself.
 
-<figure class="w-figure w-figure--inline-right">
-  <img src="./passiveattack.png" alt="passive attack">
-  <figcaption class="w-figcaption">
+<figure data-float="right">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QtAWlZRXJULRaQLQ7bKQ.png", alt="passive attack", width="547", height="344" %}
+  <figcaption>
     Attacker eavesdropping communication between a user and a server.
   </figcaption>
 </figure>
diff --git a/src/site/content/en/secure/security-attacks/modification.png b/src/site/content/en/secure/security-attacks/modification.png
deleted file mode 100644
index 586be61fc25..00000000000
Binary files a/src/site/content/en/secure/security-attacks/modification.png and /dev/null differ
diff --git a/src/site/content/en/secure/security-attacks/passiveattack.png b/src/site/content/en/secure/security-attacks/passiveattack.png
deleted file mode 100644
index c12d0f7c97b..00000000000
Binary files a/src/site/content/en/secure/security-attacks/passiveattack.png and /dev/null differ
diff --git a/src/site/content/en/secure/security-headers/index.md b/src/site/content/en/secure/security-headers/index.md
new file mode 100644
index 00000000000..8ad05b52f59
--- /dev/null
+++ b/src/site/content/en/secure/security-headers/index.md
@@ -0,0 +1,1057 @@
+---
+layout: post
+title: Security headers quick reference
+subhead: Learn more about headers that can keep your site safe and quickly look up the most important details.
+authors:
+  - agektmr
+  - maudn
+  - arturjanc
+date: 2021-05-18
+updated: 2022-02-14
+hero: image/YLflGBAPWecgtKJLqCJHSzHqe2J2/E3BVnrBFNV6w2Uqxn3bQ.jpg
+alt: A keylock in front of compressed code
+description: |
+  This article lists the most important security headers you can use to protect
+  your website. Use it to understand web-based security features, learn how to
+  implement them on your website, and as a reference for when you need a reminder.
+tags:
+  - blog
+  - security
+---
+
+This article lists the most important security headers you can use to protect
+your website. Use it to understand web-based security features, learn how to
+implement them on your website, and as a reference for when you need a reminder.
+
+Security headers recommended for websites that handle sensitive user data:
+: [Content Security Policy (CSP)](#csp)
+: [Trusted Types](#tt)
+
+Security headers recommended for all websites:
+: [X-Content-Type-Options](#xcto)
+: [X-Frame-Options](#xfo)
+: [Cross-Origin Resource Policy (CORP)](#corp)
+: [Cross-Origin Opener Policy (COOP)](#coop)
+: [HTTP Strict Transport Security (HSTS)](#hsts)
+
+Security headers for websites with advanced capabilities:
+: [Cross-Origin Resource Sharing (CORS)](#cors)
+: [Cross-Origin Embedder Policy (COEP)](#coep)
+
+{% Details %}
+{% DetailsSummary %}
+
+Known threats on the web
+
+Before diving into security headers, learn about known threats on the web
+and why you'd want to use these security headers.
+
+{% endDetailsSummary %}
+
+Before diving into security headers, learn about known threats on the web
+and why you'd want to use these security headers.
+
+### Protect your site from injection vulnerabilities
+
+Injection vulnerabilities arise when untrusted data processed by your
+application can affect its behavior and, commonly, lead to the execution of
+attacker-controlled scripts. The most common vulnerability caused by injection
+bugs is [cross-site
+scripting](https://portswigger.net/web-security/cross-site-scripting) (XSS) in
+its various forms, including [reflected
+XSS](https://portswigger.net/web-security/cross-site-scripting/reflected),
+[stored XSS](https://portswigger.net/web-security/cross-site-scripting/stored),
+[DOM-based
+XSS](https://portswigger.net/web-security/cross-site-scripting/dom-based), and
+other variants.
+
+An XSS vulnerability can typically give an attacker complete access to user data
+processed by the application and any other information hosted in the same [web
+origin](/same-site-same-origin/#origin).
+
+Traditional defenses against injections include consistent use of autoescaping
+HTML template systems, avoiding the use of [dangerous JavaScript
+APIs](https://domgo.at/cxss/sinks), and properly processing user data by hosting
+file uploads in a separate domain and sanitizing user-controlled HTML.
+
+* Use [Content Security Policy (CSP)](#csp) to control which scripts can be
+  executed by your application to mitigate the risk of injections.
+* Use [Trusted Types](#tt) to enforce sanitization of data passed into dangerous
+  JavaScript APIs.
+* Use [X-Content-Type-Options](#xcto) to prevent the browser from
+  misinterpreting the MIME types of your website's resources, which can lead to
+  script execution.
+
+### Isolate your site from other websites
+
+The openness of the web allows websites to interact with each other in ways that
+can violate an application's security expectations. This includes unexpectedly
+making authenticated requests or embedding data from another application in the
+attacker's document, allowing the attacker to modify or read application data.
+
+Common vulnerabilities that undermine web isolation include
+[clickjacking](https://portswigger.net/web-security/clickjacking), [cross-site
+request forgery](https://portswigger.net/web-security/csrf) (CSRF), [cross-site
+script inclusion](https://www.scip.ch/en/?labs.20160414) (XSSI), and various
+[cross-site leaks](https://xsleaks.dev).
+
+* Use [X-Frame-Options](#xfo) to prevent your documents from being embedded by a
+  malicious website.
+* Use [Cross-Origin Resource Policy (CORP)](#corp) to prevent your website's
+  resources from being included by a cross-origin website.
+* Use [Cross-Origin Opener Policy (COOP)](#coop) to protect your website's
+  windows from interactions by malicious websites.
+* Use [Cross-Origin Resource Sharing (CORS)](#cors) to control access to your
+  website's resources from cross-origin documents.
+
+[Post-Spectre Web
+Development](https://www.w3.org/TR/post-spectre-webdev/) is a great read
+if you are interested in these headers.
+
+### Build a powerful website securely
+
+[Spectre](https://ieeexplore.ieee.org/document/8835233) puts any data loaded
+into the same [browsing context group](/why-coop-coep/) potentially readable
+despite [same-origin policy](/same-origin-policy/). Browsers restrict features
+that may possibly exploit the vulnerability behind a special environment called
+"[cross-origin isolation](/coop-coep/)". With cross-origin isolation, you can
+use powerful features such as `SharedArrayBuffer`.
+
+* Use [Cross-Origin Embedder Policy (COEP)](#coep) along with [COOP](#coop) to
+  enable cross-origin isolation.
+
+### Encrypt traffic to your site
+
+Encryption issues appear when an application does not fully encrypt data in
+transit, allowing eavesdropping attackers to learn about the user's interactions
+with the application.
+
+Insufficient encryption can arise in the following cases: not using HTTPS,
+[mixed content](/what-is-mixed-content/), setting cookies without the [`Secure`
+attribute](https://developer.mozilla.org/docs/Web/HTTP/Cookies#restrict_access_to_cookies)
+(or [`__Secure`
+prefix](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Cookie_prefixes)),
+or [lax CORS validation
+logic](https://blog.detectify.com/2018/04/26/cors-misconfigurations-explained/).
+
+* Use [HTTP Strict Transport Security (HSTS)](#hsts) to consisitently serve your
+  contents through HTTPS.
+
+{% endDetails %}
+
+## Content Security Policy (CSP) {: #csp}
+
+[Cross-Site Scripting
+(XSS)](https://www.google.com/about/appsecurity/learning/xss/) is an attack
+where a vulnerability on a website allows a malicious script to be injected and
+executed.
+
+`Content-Security-Policy` provides an added layer to mitigate XSS attacks by
+restricting which scripts can be executed by the page.
+
+It's recommended that you enable strict CSP using one of the following approaches:
+
+* If you render your HTML pages on the server, use **a nonce-based strict CSP**.
+* If your HTML has to be served statically or cached, for example if it's a
+  single-page application, use **a hash-based strict CSP**.
+
+{% Label %}Example usage: A nonce-based CSP{% endLabel%}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use CSP
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+{% Aside %}
+
+A CSP can be an *extra* protection against XSS attacks; you should still make
+sure to escape (and sanitize) user input.
+
+{% endAside %}
+
+#### 1. Use a nonce-based strict CSP {: #nonce-based-csp}
+
+If you render your HTML pages on the server, use **a nonce-based strict CSP**.
+
+{% Aside 'caution' %}
+
+A nonce is a random number used only once. A nonce-based CSP is only secure if
+you can generate a different nonce for each response. If you can't do this, use
+[a hash-based CSP](#hash-based-csp) instead.
+
+{% endAside %}
+
+Generate a new script nonce value for every request on the server side and set
+the following header:
+
+{% Label %}server configuration file{% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+In HTML, in order to load the scripts, set the `nonce` attribute of all
+`<script>` tags to the same `{RANDOM1}` string.
+
+{% Label %}index.html{% endLabel %}
+
+```html
+<script nonce="{RANDOM1}" src="https://example.com/script1.js"></script>
+<script nonce="{RANDOM1}">
+  // Inline scripts can be used with the `nonce` attribute.
+</script>
+```
+
+[Google Photos](https://photos.google.com/) is a good nonce-based strict CSP
+example. Use DevTools to see how it's used.
+
+#### 2. Use a hash-based strict CSP {: #hash-based-csp}
+
+If your HTML has to be served statically or cached, for example if you're
+building a single-page application, use **a hash-based strict CSP**.
+
+{% Label %}server configuration file{% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'sha256-{HASH1}' 'sha256-{HASH2}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+In HTML, you'll need to inline your scripts in order to apply a hash-based
+policy, because [most browsers don't support hashing external
+scripts](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned).
+
+{% Label %}index.html{% endLabel %}
+
+```html
+<script>
+...// your script1, inlined
+</script>
+<script>
+...// your script2, inlined
+</script>
+```
+
+To load external scripts, read "Load sourced scripts dynamically" under
+[Option B: Hash-based CSP Response Header](/strict-csp/#hash-based-csp) section.
+
+[CSP Evaluator](https://csp-evaluator.withgoogle.com/) is a good tool to
+evaluate your CSP, but at the same time a good nonce-based strict CSP example.
+Use DevTools to see how it's used.
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.csp.Content-Security-Policy' %}
+
+{% Aside 'gotchas' %}
+
+* `https:` is a fallback for Safari and `unsafe-inline` is a fallback for very
+  old browser versions. `https:` and `unsafe-inline` don't make your policy less
+  safe because they will be ignored by browsers who support `strict-dynamic`.
+  Read more in [Add fallbacks to support Safari and older
+  browsers](/strict-csp/#step-4-add-fallbacks-to-support-safari-and-older-browsers).
+* Safari does *not* support `strict-dynamic` yet. But a strict CSP like in the
+  examples above is safer than an allowlist CSP (and much safer than no CSP at
+  all) for all of your users. Even in Safari, a strict CSP protects your site
+  from some types of XSS attacks, because the presence of the CSP disallows
+  certain unsafe patterns.
+
+{% endAside %}
+
+### Other things to note about CSP
+
+* [`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
+  directive protects your site from clickjacking—a risk that arises if you allow
+  untrusted sites to embed yours. If you prefer simpler solution, you can use
+  [`X-Frame-Options`](#xfo) to block being loaded, but `frame-ancestors` gives
+  you an advanced configuration to only allow specific origins as embedders.
+* You may have used [a CSP to ensure that all of your site's resources are
+  loaded over HTTPS](/fixing-mixed-content/#content-security-policy). This has
+  become less relevant: nowadays, most browsers block
+  [mixed-content](/what-is-mixed-content/).
+* You can also set a CSP in [report-only
+  mode](/strict-csp/#step-2-set-a-strict-csp-and-prepare-your-scripts).
+* If you can't set a CSP as a header server-side, you can also set it as a meta
+  tag. Note that you can't use **report-only** mode for meta tags (though
+  [this may change](https://github.com/w3c/webappsec-csp/issues/277)).
+
+### Learn more
+
+* [Mitigate XSS with a Strict Content Security Policy (CSP)](/strict-csp)
+* [Content Security Policy Cheat
+  Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
+
+{% endDetails %}
+
+## Trusted Types {: #tt}
+
+[DOM-based
+XSS](https://portswigger.net/web-security/cross-site-scripting/dom-based) is an
+attack where a malicious data is passed into a sink that supports dynamic code
+execution such as `eval()` or `.innerHTML`.
+
+Trusted Types provide the tools to write, security review, and maintain
+applications free of DOM XSS. They can be enabled via [CSP](#csp) and make
+JavaScript code secure by default by limiting dangerous web APIs to only accept
+a special object—a Trusted Type.
+
+To create these objects you can define security policies in which you can ensure
+that security rules (such as escaping or sanitization) are consistently applied
+before the data is written to the DOM. These policies are then the only places
+in code that could potentially introduce DOM XSS.
+
+{% Label %}Example usages{% endLabel %}
+
+```http
+Content-Security-Policy: require-trusted-types-for 'script'
+```
+
+```javascript
+// Feature detection
+if (window.trustedTypes && trustedTypes.createPolicy) {
+  // Name and create a policy
+  const policy = trustedTypes.createPolicy('escapePolicy', {
+    createHTML: str => {
+      return str.replace(/\</g, '&lt;').replace(/>/g, '&gt;');
+    }
+  });
+}
+```
+
+```javascript
+// Assignment of raw strings is blocked by Trusted Types.
+el.innerHTML = 'some string'; // This throws an exception.
+
+// Assignment of Trusted Types is accepted safely.
+const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)&gt;'
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use Trusted Types
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+1. Enforce Trusted Types for dangerous DOM sinks
+    {% Label %}CSP and Trusted Types header:{% endLabel %}
+
+    ```http
+    Content-Security-Policy: require-trusted-types-for 'script'
+    ```
+
+    Currently `'script'` is the only acceptable value for
+    `require-trusted-types-for` directive.
+
+    Of course, you can combine Trusted Types with other CSP directives:
+
+    {% Label %}
+    Merging a nonce-based CSP from above with Trusted Types:
+    {% endLabel %}
+
+    ```http
+    Content-Security-Policy:
+      script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+      object-src 'none';
+      base-uri 'none';
+      require-trusted-types-for 'script';
+    ```
+
+    {% Aside %}
+
+    You may limit allowed Trusted Types policy names by setting an additional
+    `trusted-types` directive (for example, `trusted-types myPolicy`). However, this is
+    not a requirement.
+
+    {% endAside %}
+
+2. Define a policy
+
+    {% Label %}Policy:{% endLabel %}
+
+    ```javascript
+    // Feature detection
+    if (window.trustedTypes && trustedTypes.createPolicy) {
+      // Name and create a policy
+      const policy = trustedTypes.createPolicy('escapePolicy', {
+        createHTML: str => {
+          return str.replace(/\</g, '&lt;').replace(/>/g, '&gt;');
+        }
+      });
+    }
+    ```
+
+    {% Aside %}
+
+    You can define policies with arbitrary names unless you limit the names of
+    allowed Trusted Types policies by setting the `trusted-types` directive.
+
+    {% endAside %}
+
+3. Apply the policy
+
+    {% Label %}Use the policy when writing data to the DOM:{% endLabel %}
+
+    ```javascript
+    // Assignment of raw strings are blocked by Trusted Types.
+    el.innerHTML = 'some string'; // This throws an exception.
+
+    // Assignment of Trusted Types is accepted safely.
+    const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+    el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)&gt;'
+    ````
+
+    With `require-trusted-types-for 'script'`, using a trusted type is a
+    requirement. Using any dangerous DOM API with a string will result in an
+    error.
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.csp.Content-Security-Policy.trusted-types' %}
+
+### Learn more
+
+* [Prevent DOM-based cross-site scripting vulnerabilities with Trusted
+  Types](/trusted-types/)
+* [CSP: require-trusted-types-for - HTTP |
+  MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for)
+* [CSP: trusted-types - HTTP |
+  MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
+* [Trusted Types demo](https://www.compass-demo.com/trusted-types/)—open DevTools Inspector and see
+  what is happening
+
+{% endDetails %}
+
+## X-Content-Type-Options {: #xcto}
+
+When a malicious HTML document is served from your domain (for example, if an
+image uploaded to a photo service contains valid HTML markup), some browsers
+will treat it as an active document and allow it to execute scripts in the
+context of the application, leading to a [cross-site scripting
+bug](https://www.google.com/about/appsecurity/learning/xss/).
+
+`X-Content-Type-Options: nosniff` prevents it by instructing the browser that
+the [MIME type](https://mimesniff.spec.whatwg.org/#introduction) set in the
+`Content-Type` header for a given response is correct. This header is
+recommended for **all of your resources**.
+
+{% Label %}Example usage{% endLabel%}
+
+```http
+X-Content-Type-Options: nosniff
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use X-Content-Type-Options
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+`X-Content-Type-Options: nosniff` is recommended for all resources served from
+your server along with the correct `Content-Type` header.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/IWqRWe9R1mOJImmMbLoM.png",
+alt="X-Content-Type-Options: nosniff", width="800", height="237" %}
+
+{% Label %}Example headers sent with a document HTML{% endLabel %}
+
+```http
+X-Content-Type-Options: nosniff
+Content-Type: text/html; charset=utf-8
+```
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.X-Content-Type-Options' %}
+
+### Learn more
+
+* [X-Content-Type-Options - HTTP MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options)
+
+{% endDetails %}
+
+## X-Frame-Options {: #xfo}
+
+If a malicious website can embed your site as an iframe, this may allow
+attackers to invoke unintended actions by the user with
+[clickjacking](https://portswigger.net/web-security/clickjacking). Also, in some
+cases [Spectre-type
+attacks](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) give
+malicious websites a chance to learn about the contents of an embedded document.
+
+`X-Frame-Options` indicates whether or not a browser should be allowed to render
+a page in a `<frame>`, `<iframe>`, `<embed>`, or `<object>`. **All documents**
+are recommended to send this header to indicate whether they allow being
+embedded by other documents.
+
+{% Aside %}
+
+If you need more granular control such as allowing only a specific origin to
+embed the document, use the [CSP](#csp)
+[`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
+directive.
+
+{% endAside %}
+
+{% Label %}Example usage{% endLabel%}
+
+```http
+X-Frame-Options: DENY
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use X-Frame-Options
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+All documents that are not designed to be embedded should use `X-Frame-Options` header.
+
+You can try how the following configurations affect loading an iframe on [this
+demo](https://cross-origin-isolation.glitch.me/). Change the `X-Frame-Options`
+dropdown menu and click the **Reload the iframe** button.
+
+#### Protects your website from being embedded by any other websites
+
+Deny being embedded by any other documents.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2ZM5obgGK38CMcZ75PkH.png",
+alt="X-Frame-Options: DENY", width="800", height="237" %}
+
+```http
+X-Frame-Options: DENY
+```
+
+#### Protects your website from being embedded by any cross-origin websites
+
+Allow being embedded only by same-origin documents.
+
+```http
+X-Frame-Options: SAMEORIGIN
+```
+
+{% Aside 'gotchas' %}
+
+Documents being embeddable by default means the web developers need to
+explicitly send `DENY` or `SAMEORIGIN` to stop being embedded and protect
+themselves from side-channel attacks. The Chrome team is considering switching
+to block document embeds by default so that websites will be secure even if they
+don't explicitly set the header. In that new world, documents would need to
+explicitly opt-in to be embedded.
+
+{% endAside %}
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.X-Frame-Options' %}
+
+### Learn more
+
+* [X-Frame-Options - HTTP](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options)
+
+{% endDetails %}
+
+## Cross-Origin Resource Policy (CORP) {: #corp}
+
+An attacker can embed resources from another origin, for example from your site,
+to learn information about them by exploiting web-based [cross-site
+leaks](https://xsleaks.dev/).
+
+`Cross-Origin-Resource-Policy` mitigates this risk by indicating the set of
+websites it can be loaded by. The header takes one of three values:
+`same-origin`, `same-site`, and `cross-origin`. **All resources** are
+recommended to send this header to indicate whether they allow being loaded by
+other websites.
+
+{% Label %}Example usage{% endLabel%}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use CORP
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+It is recommended that **all** resources are served with one of the following
+three headers.
+
+You can try how the following configurations affect loading resources under a
+[`Cross-Origin-Embedder-Policy: require-corp` environment](#coep) on [this
+demo](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Change the
+**Cross-Origin-Resource-Policy** dropdown menu and click the **Reload the
+iframe** or **Reload the image** button to see the effect.
+
+#### Allow resources to be loaded `cross-origin`
+
+It's recommended that CDN-like services apply `cross-origin` to resources
+(since they are usually loaded by cross-origin pages), unless they are already served
+through [CORS](#cors) which has a similar effect.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/qP2mspVMC6RazxDjWUrL.png",
+alt="Cross-Origin-Resource-Policy: cross-origin", width="800", height="234" %}
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+#### Limit resources to be loaded from the `same-origin`
+
+`same-origin` should be applied to resources that are intended to be loaded only
+by same-origin pages. You should apply this to resources that include sensitive
+information about the user, or responses of an API that is intended to be called
+only from the same origin.
+
+Keep in mind that resources with this header can still be loaded directly, for
+example by navigating to the URL in a new browser window. Cross-Origin Resource
+Policy only protects the resource from being embedded by other websites.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/7UzYMWsbKkh89m5ZImvj.png",
+alt="Cross-Origin-Resource-Policy: same-origin", width="800", height="238" %}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+#### Limit resources to be loaded from the `same-site`
+
+`same-site` is recommended to be applied to resources that are similar to above
+but are intended to be loaded by other subdomains of your site.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/R9yNRGSJ4xABc560WRJI.png",
+alt="Cross-Origin-Resource-Policy: same-site", width="800", height="233" %}
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+{% Aside %}
+
+To learn more about the difference between same-origin and same-site, check out
+[Understanding "same-site" and "same-origin"](/same-site-same-origin/).
+
+{% endAside %}
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.Cross-Origin-Resource-Policy' %}
+
+### Learn more
+
+* [Consider deploying cross-origin resource policy](https://resourcepolicy.fyi/)
+* [Making your website "cross-origin isolated" using COOP and COEP](/coop-coep/)
+* [Why you need "cross-origin isolated" for powerful features](/why-coop-coep/)
+
+{% endDetails %}
+
+## Cross-Origin Opener Policy (COOP) {: #coop}
+
+An attacker's website can open another site in a popup window to learn
+information about it by exploiting web-based [cross-site
+leaks](https://xsleaks.dev/). In some cases, this may also allow the
+exploitation of side-channel attacks based on
+[Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)).
+
+The `Cross-Origin-Opener-Policy` header provides a way for a document to isolate
+itself from cross-origin windows opened through `window.open()` or a link with
+`target="_blank"` without `rel="noopener"`. As a result, any cross-origin opener
+of the document will have no reference to it and will not be able to interact
+with it.
+
+{% Label %}Example usage{% endLabel%}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use COOP
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+You can try how the following configurations affect communication with a
+cross-origin popup window on [this demo](https://cross-origin-isolation.glitch.me/).
+Change the **Cross-Origin-Opener-Policy** dropdown menu for both the document
+and the popup window, click the **Open a popup** button then click **Send a
+postMessage** to see if the message is actually delivered.
+
+#### Isolate a document from cross-origin windows
+
+Setting `same-origin` puts the document to be isolated from cross-origin
+document windows.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/mSDG9auD7r5asxGJvJjg.png",
+alt="Cross-Origin-Opener-Policy: same-origin", width="800",
+height="235" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Isolate a document from cross-origin windows but allow popups
+
+Setting `same-origin-allow-popups` allows a document to retain a reference to
+its popup windows unless they set COOP with `same-origin` or
+`same-origin-allow-popups`. This means `same-origin-allow-popups` can still
+protect the document from being referenced when opened as a popup window, but
+allow it to communicate with its own popups.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2uJZ0s2VnjxJUcBI2Ol9.png",
+alt="Cross-Origin-Opener-Policy: same-origin-allow-popups", width="800",
+height="233" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+#### Allow a document to be referenced by cross-origin windows
+
+`unsafe-none` is the default value but you can explicitly indicate that this
+document can be opened by a cross-origin window and retain mutual access.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/oSco89ZT3RP7gZzNKDjY.png",
+alt="Cross-Origin-Opener-Policy: unsafe-none", width="800", height="233" %}
+
+{% Aside 'gotchas' %}
+
+`unsafe-none` being the default means the web developers need to send
+`same-origin` or `same-origin-allow-popups` explicitly to protect their website
+from side-channel attacks.
+
+{% endAside %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+{% Aside %}
+
+Features such as `SharedArrayBuffer` or
+`performance.measureUserAgentSpecificMemory()` are disabled by default. Some
+browsers allow you to use them in "cross-origin isolated" contexts, which
+require you to set [COOP](#coop) and [COEP](#coep) headers.
+
+To learn more, read [Making your website "cross-origin isolated" using COOP and
+COEP](/coop-coep/).
+
+{% endAside %}
+
+#### Report patterns incompatible with COOP
+
+You can receive reports when COOP prevents cross-window interactions with the
+Reporting API.
+
+```http
+Cross-Origin-Opener-Policy: same-origin; report-to="coop"
+```
+
+COOP also supports a report-only mode so you can receive reports without
+actually blocking communication between cross-origin documents.
+
+```http
+Cross-Origin-Opener-Policy-Report-Only: same-origin; report-to="coop"
+```
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.Cross-Origin-Opener-Policy' %}
+
+### Learn more
+
+* [Why you need "cross-origin isolated" for powerful features](/why-coop-coep/)
+
+{% endDetails %}
+
+## Cross-Origin Resource Sharing (CORS) {: #cors}
+
+Unlike other items in this article, Cross-Origin Resource Sharing (CORS) is not
+a header, but a browser mechanism that requests and permits access to
+cross-origin resources.
+
+By default, browsers enforce [the same-origin policy](/same-origin-policy/) to
+prevent a web page from accessing cross-origin resources. For example, when a
+cross-origin image is loaded, even though it's displayed on the web page
+visually, the JavaScript on the page doesn't have access to the image's data.
+The resource provider can relax restrictions and allow other websites to read
+the resource by opting-in with CORS.
+
+{% Label %}Example usage{% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use CORS
+
+{% endDetailsSummary %}
+
+Before looking into how to configure CORS, it's helpful to understand the
+distinction between request types. Depending on request details, a request will
+be classified as a **simple request** or a **preflighted request**.
+
+Criteria for a simple request:
+
+* The method is `GET`, `HEAD`, or `POST`.
+* The custom headers only include `Accept`, `Accept-Language`,
+  `Content-Language`, and `Content-Type`.
+* The `Content-Type` is `application/x-www-form-urlencoded`,
+  `multipart/form-data`, or `text/plain`.
+
+Everything else is classified as a preflighted request. For more details,
+check out [Cross-Origin Resource Sharing (CORS) - HTTP |
+MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS#simple_requests).
+
+### Recommended usages
+
+#### Simple request
+
+When a request meets the simple request criteria, the browser sends a
+cross-origin request with an `Origin` header that indicates the requesting
+origin.
+
+{% Label %}Example request header{% endLabel %}
+
+```http
+Get / HTTP/1.1
+Origin: https://example.com
+```
+
+{% Label %}Example response header{% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+* `Access-Control-Allow-Origin: https://example.com` indicates that the
+  `https://example.com` can access the contents of the response. Resources meant
+  to be readable by any site can set this header to `*`, in which case the
+  browser will only require the request to be made [without
+  credentials](https://developer.mozilla.org/docs/Web/API/Request/credentials#value).
+* `Access-Control-Allow-Credentials: true` indicates that requests which carry
+  credentials (cookies) are allowed to load the resource. Otherwise,
+  authenticated requests will be rejected even if the requesting origin is
+  present in the `Access-Control-Allow-Origin` header.
+
+You can try how the simple request affect loading resources under a
+[`Cross-Origin-Embedder-Policy: require-corp` environment](#coep) on [this
+demo](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Click the
+**Cross-Origin Resource Sharing** checkbox and click the **Reload the image**
+button to see the effect.
+
+#### Preflighted requests
+
+A preflighted request is preceded with an `OPTIONS` request to check if the
+subsequent request is allowed to be sent.
+
+{% Label %}Example request header{% endLabel %}
+
+```http
+OPTIONS / HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+```
+
+* `Access-Control-Request-Method: POST` allows the following request to be made
+  with the  `POST` method.
+* `Access-Control-Request-Headers: X-PINGOTHER, Content-Type` allows the
+  requester to set the `X-PINGOTHER` and `Content-Type` HTTP headers in the
+  subsequent request.
+
+{% Label %}Example response headers{% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+```
+
+* `Access-Control-Allow-Methods: POST, GET, OPTIONS` indicates that subsequent
+  requests can be made with the  `POST`, `GET` and `OPTIONS` methods.
+* `Access-Control-Allow-Headers: X-PINGOTHER, Content-Type` indicates subsequent
+  requests can include the `X-PINGOTHER` and `Content-Type` headers.
+* `Access-Control-Max-Age: 86400`  indicates that the result of the preflighted
+  request can be cached for 86400 seconds.
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.Access-Control-Allow-Origin' %}
+
+### Learn more
+
+* [Cross-Origin Resource Sharing (CORS)](/cross-origin-resource-sharing/)
+* [Cross-Origin Resource Sharing (CORS) - HTTP |
+  MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+
+{% endDetails %}
+
+## Cross-Origin Embedder Policy (COEP) {: #coep}
+
+To reduce the ability of [Spectre-based
+attacks](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) to
+steal cross-origin resources, features such as `SharedArrayBuffer` or
+`performance.measureUserAgentSpecificMemory()` are disabled by default.
+
+`Cross-Origin-Embedder-Policy: require-corp` prevents documents and workers from
+loading cross-origin resources such as images, scripts, stylesheets, iframes and
+others unless these resources explicitly opt into being loaded via [CORS](#cors)
+or [CORP](#corp) headers. COEP can be combined with`Cross-Origin-Opener-Policy`
+to opt a document into [cross-origin isolation](/cross-origin-isolation-guide/).
+
+Use `Cross-Origin-Embedder-Policy: require-corp` when you want to enable
+[cross-origin isolation](/coop-coep/) for your document.
+
+{% Label %}Example usage{% endLabel %}
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use COEP
+
+{% endDetailsSummary %}
+
+### Example usages
+
+COEP takes a single value of `require-corp`. By sending this header, you can
+instruct the browser to block loading resources that do not opt-in via
+[CORS](#cors) or [CORP](#corp).
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="How COEP works",
+width="800", height="410" %}
+
+You can try how the following configurations affect loading resources on [this
+demo](https://cross-origin-isolation.glitch.me/). Change the
+**Cross-Origin-Embedder-Policy** dropdown menu, the
+**Cross-Origin-Resource-Policy** dropdown menu, the **Report Only** checkbox etc
+to see how they affect loading resources. Also, open [the reporting endpoint
+demo](https://reporting-endpoint.glitch.me/) to see if the blocked resources are
+reported.
+
+#### Enable cross-origin isolation
+
+Enable [cross-origin isolation](/coop-coep) by sending
+`Cross-Origin-Embedder-Policy: require-corp` along with
+`Cross-Origin-Opener-Policy: same-origin`.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Report resources incompatible withn COEP
+
+You can receive reports of blocked resources caused by COEP with the Reporting
+API.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp; report-to="coep"
+```
+
+COEP also supports report-only mode so you can receive reports without actually
+blocking loading resources.
+
+```http
+Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="coep"
+```
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.Cross-Origin-Embedder-Policy' %}
+
+### Learn more
+* [Making your website "cross-origin isolated" using COOP and COEP](/coop-coep/)
+* [Why you need "cross-origin isolated" for powerful features](/why-coop-coep/)
+* [A guide to enable cross-origin isolation](/cross-origin-isolation-guide/)
+
+{% endDetails %}
+
+## HTTP Strict Transport Security (HSTS) {: #hsts}
+
+Communication over a plain HTTP connection is not encrypted, making the
+transferred data accessible to network-level eavesdroppers.
+
+`Strict-Transport-Security` header informs the browser that it should never load
+the site using HTTP and use HTTPS instead. Once it's set, the browser will use
+HTTPS instead of HTTP to access the domain without a redirect for a duration
+defined in the header.
+
+{% Label %}Example usage{% endLabel%}
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+{% Details %}
+{% DetailsSummary %}
+
+How to use HSTS
+
+{% endDetailsSummary %}
+
+### Recommended usages
+
+All websites that transition from HTTP to HTTPS should respond with a
+`Strict-Transport-Security` header when a request with HTTP is received.
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+### Supported browsers
+
+{% BrowserCompat 'http.headers.Strict-Transport-Security' %}
+
+### Learn more
+* [Strict-Transport-Security -
+  HTTP](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)
+
+{% endDetails %}
+
+## Further reading
+
+* [Post-Spectre Web Development](https://www.w3.org/TR/post-spectre-webdev/)
diff --git a/src/site/content/en/secure/security-not-scary/index.md b/src/site/content/en/secure/security-not-scary/index.md
index 304bf530f67..ef7305cb14a 100644
--- a/src/site/content/en/secure/security-not-scary/index.md
+++ b/src/site/content/en/secure/security-not-scary/index.md
@@ -23,9 +23,9 @@ or "an attacker stole credit card information from a shopping site".
 But security is something to be taken as a positive and necessary part of web
 development just like "user experience" or "accessibility".
 
-<figure class="w-figure">
-  <img src="./securityimage.png" alt="Negative and positive images of security">
-  <figcaption class="w-figcaption">
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M5QZ4By9jyroim97MO0m.png", alt="Negative and positive images of security", width="800", height="359" %}
+  <figcaption>
     A hacker in hoodie is a negative security image. A team working on a project
     together is a positive security image.
   </figcaption>
@@ -66,7 +66,7 @@ data is a common attack.)
 
 When an application is not secure, different people could be affected.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tbody>
       <tr>
diff --git a/src/site/content/en/secure/security-not-scary/securityimage.png b/src/site/content/en/secure/security-not-scary/securityimage.png
deleted file mode 100644
index 30f18f7e5e2..00000000000
Binary files a/src/site/content/en/secure/security-not-scary/securityimage.png and /dev/null differ
diff --git a/src/site/content/en/secure/top-ways-sites-get-hacked-by-spammers/index.md b/src/site/content/en/secure/top-ways-sites-get-hacked-by-spammers/index.md
new file mode 100644
index 00000000000..c31fcce943b
--- /dev/null
+++ b/src/site/content/en/secure/top-ways-sites-get-hacked-by-spammers/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: Top ways sites get hacked by spammers
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Find out the ways that spammers can compromise your site.
+tags:
+  - security
+---
+
+Understanding how your site was compromised is an important part of
+protecting your site from attacks. In this article, we will cover some
+security vulnerabilities that can result in your site being compromised. 
+The following video provides the different types of hacks and ways hackers can take control of your site.
+
+{% YouTube "_e66dUipkss" %}
+
+## Compromised passwords
+
+Attackers can use password guessing techniques by trying different passwords
+until they guess the right one. Password guessing attacks can be conducted
+through various methods such as trying common passwords or scanning through
+random combinations of letters and numbers until the password is discovered.
+To prevent this, create a strong password that is difficult to guess.
+You can find
+[tips for creating a strong password](https://support.google.com/accounts/answer/32040)
+in Google's help center article.
+
+There are two important points to remember. First, it's important to avoid
+reusing passwords across services. Once attackers are able to identify a
+working username and password combination, they will try to use the username
+and password combination on as many services as possible. Therefore,
+using different passwords on different services can prevent other
+accounts on other services from being compromised.
+
+Second, take advantage of two-factor authentication (2FA) like
+[Google 2-Step Verification](https://www.google.com/landing/2step/) if
+the option is available. 2FA allows a second layer of login credentials,
+usually via a text message code or other dynamically generated pin,
+that diminishes an attacker's ability to access your account with just a
+stolen password. Some CMS providers have guidance on configuring 2FA:
+see documentation for
+[Joomla!](https://docs.joomla.org/J3.x:Two_Factor_Authentication),
+[WordPress](https://codex.wordpress.org/Two_Step_Authentication),
+or [Drupal](https://www.drupal.org/project/tfa).
+
+## Missing security updates
+
+Older versions of software can be affected by high-risk security
+vulnerabilities that enable attackers to compromise an entire site.
+Attackers actively seek out old software with vulnerabilities. Ignoring
+a vulnerability on your site increases the chance of your site being attacked.
+
+{% Aside %}
+It's essential to periodically check for software updates for your
+site in order to patch vulnerabilities. Better yet, set up automatic
+updates for your software where possible and sign up for security
+announcement lists for any of your active running software.
+{% endAside %}
+
+Some examples of software to you'll want to keep updated include:
+
+* Web server software, if you run your own servers.
+* Content Management System. Example: security releases from
+  [Wordpress](https://wordpress.org/news/category/security/),
+  [Drupal](https://www.drupal.org/security), and
+  [Joomla!](https://developer.joomla.org/security-centre.html).
+* All plugins and add-ons you use on your site.
+
+## Insecure themes and plugins
+
+Plugins and themes on a CMS add valuable, enhanced functionality. However,
+outdated or unpatched themes and plugins are a major source of
+vulnerabilities on websites. If you use themes or plugins on your
+site, make sure to keep them up to date. Remove themes or plugins
+that are no longer maintained by their developers.
+
+Be extremely cautious of free plugins or themes from untrusted
+sites. It's a common tactic for attackers to add malicious code to
+free versions of paid plugins or themes. When removing a plugin,
+make sure to remove all its files from your server rather than
+simply disabling it.
+
+## Social engineering
+
+[Social engineering](https://en.wikipedia.org/wiki/Social_engineering_(security))
+is about exploiting human nature to bypass sophisticated security
+infrastructure. These types of attacks trick authorized users into
+providing confidential information such as passwords. For example,
+a common form of social engineering is phishing. During a phishing
+attempt, an attacker will send an email pretending to be a legitimate
+organization and request confidential information.
+
+{% Aside 'caution' %}
+According to a
+[study from Google about social engineering](http://research.google.com/pubs/pub43469.html),
+some of the most effective phishing campaigns have a 45% success rate!
+{% endAside %}
+
+Remember never to give out any sensitive information (for example, passwords,
+credit card numbers, banking information, or even your date of birth)
+unless you're sure about the requestor's identity. If your site is managed
+by several people, consider providing training to raise security awareness
+against social engineering attacks. You can refer to the Gmail Help Center
+for [basic phishing protection tips](https://support.google.com/mail/answer/8253).
+
+## Security policy holes
+
+If you are a system administrator or run your own site, remember that
+poor security policies can allow attackers to compromise your site.
+Some examples include:
+
+* Allowing users to create weak passwords.
+* Giving administrative access to users who don't require it.
+* Not enabling HTTPS on your site and allowing users to sign in using HTTP.
+* Allowing file uploads from unauthenticated users, or with no type checking.
+
+A few basic tips to protect your site:
+
+* Ensure your website is configured with high security controls by disabling
+  unnecessary services.
+* Test access controls and user privileges.
+* Use encryption for pages that handle sensitive information, like login pages.
+* Regularly checking your logs for any suspicious activities.
+
+## Data leaks
+
+Data leaks can happen when confidential data is uploaded and a
+misconfiguration makes that confidential information publicly available.
+For example, error handling and messaging in a web application can
+potentially leak configuration information in an unhandled error message.
+Using a method known as ["dorking"](https://en.wikipedia.org/wiki/Google_hacking),
+malicious actors can exploit search engine functionality to find this data.
+
+Ensure that your site doesn't reveal sensitive information to
+unauthorized users by conducting periodic checks and restricting
+confidential data to trusted entities through security policies. If
+you do happen to discover any sensitive information displayed on your
+site that urgently needs to be removed from Google Search results, you
+can use the [URL removal tool](https://www.google.com/webmasters/tools/removals)
+to remove individual URLs from Google Search.
diff --git a/src/site/content/en/secure/use-search-console/index.md b/src/site/content/en/secure/use-search-console/index.md
new file mode 100644
index 00000000000..c2f73309eb1
--- /dev/null
+++ b/src/site/content/en/secure/use-search-console/index.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Use Search Console
+date: 2015-01-01
+updated: 2022-03-04
+description: >
+  Verify ownership then check your site using Search Console.
+tags:
+  - security
+---
+
+{% YouTube "jC7jja6ebBM" %}
+
+If you've already
+[verified ownership](https://www.support.google.com/webmasters/answer/35179)
+of your site, you can skip the first action below and go right to checking your
+site information in Search Console.
+
+## You'll need
+
+* The ability to
+  [verify ownership](https://www.support.google.com/webmasters/answer/35179)
+  of your site using a technique such as adding a file in the root directory,
+  authoring of
+  [`meta` tags](https://www.support.google.com/webmasters/answer/79812),
+  owning a Google Analytics administrative account for the site, etc.
+
+
+## What you'll do
+
+In this section, you'll perform the following actions:
+
+1. [Verify ownership of your site in Search Console.](#verify)
+2. [Check that the hacker didn't already verify ownership in Search Console
+   and make unwanted settings changes.](#check)
+3. [Determine the nature of the attack.](#determine)
+
+### Verify ownership of your site in Search Console {: #verify }
+
+1. Open a browser and navigate to [Webmaster Central](http://www.google.com/webmasters).
+2. Click **Search Console**.
+3. Sign in to Search Console using a
+   [Google account](https://www.google.com/accounts). If you don't have a
+   Google account, click **Create an account**. A new Google account doesn't
+   mean you'll lose your existing email account with another company.
+   ([More information about accounts](https://accounts.google.com/SignUp).)
+4. Click **Add a site**. Type your site's URL in the box, then click
+   **Continue**.
+5. Decide the most convenient verification method for you. The
+   **Recommended method** tab on the verification page shows the method Google
+   thinks will work best. Additional methods are listed on the
+   **Alternate methods** tab.
+   ([More information about verification](https://goo.gl/kQnHQ).)
+6. Bring your site back online if you selected a verification method that
+   requires access to your site, such as HTML meta tag or HTML file.
+7. Click **Verify** to verify ownership using your selected method. If
+   verification is successful, you'll see a congratulatory screen mentioning
+   that you're a verified owner. You can take your site back offline, but
+   be aware that it will need to be back online in future steps.
+
+
+### Check that the hacker didn't already verify ownership {: #check }
+
+Once verified, check that the hacker didn't already verify ownership in
+Search Console and make unwanted settings changes.
+
+1. Navigate to the main Search Console homepage by clicking the Search Console logo.
+2. Find your site, then click **Manage site.**
+3. Click **Add or remove users**.
+4. Be sure that all
+   [users and owners](https://www.support.google.com/webmasters/answer/44227)
+   listed are authorized.
+5. Document the email address of any unauthorized user (in case it's helpful
+   in the future), then delete the user from your site. For unauthorized
+   owners, you'll need to both delete the owner and any possible verification
+   tokens, such as a verification metatag on your homepage or a HTML file on
+   your server.
+   ([More information.](https://www.support.google.com/webmasters/answer/2454036))
+6. Investigate for unwanted settings changes in Search Console. Click the
+   <span class="material-icons">settings</span> Settings icon, then click
+   [**Site Settings**](https://www.support.google.com/webmasters/answer/2454036)
+   to check for possible undesirable changes by the hacker such as a lower
+   [Crawl rate](https://www.support.google.com/webmasters/answer/48620)
+   (perhaps with the goal to avoid search engine spiders). Also, check that
+   nothing unusual is listed in the section **Google Index** >
+   [Remove URLs](https://www.support.google.com/webmasters/answer/164734) or
+   <span class="material-icons">settings</span> >
+   [Change of Address](https://www.support.google.com/webmasters/answer/83106).
+
+### Determine the nature of the attack {: #determine }
+
+The information in the Message Center and Security Issues in Search Console can
+help you determine whether your site was compromised in any of the following
+ways:
+
+* With spammy content that could reduce the quality and relevance of
+  search results.
+* For phishing purposes.
+* To distribute malware.
+
+To investigate hacking or malware using Search Console, complete the following
+steps:
+
+1. Navigate to the Search Console homepage by clicking the Search Console logo
+   in the upper corner.
+2. Click **Messages**.
+3. Check if there is are any critical messages from Google regarding whether
+   your site was used for 1) serving spammy pages, text or links, 2) phishing,
+   3) distributing malware. If you have a phishing notification, please do
+   not delete this message until you have completed the entire recovery process.
+4. Navigate to **Security Issues** in Webmaster tools.
+    * Sites affected with malware will show a top-level heading of "Malware,"
+      and then categories of malware types, such as "Modified server
+      configuration" or "Error template injection." In these cases, the hacker
+      may be using your site to infect your visitors with software designed to
+      access confidential information or harm their computers. To find out
+      how to fix this, please continue to
+      [Assess malware damage](/secure/hacked-with-malware/).
+    * Sites that were hacked to serve spam may display a top-level heading of
+      "Hacked" and then categories hack types, such as "Content injection."
+      It’s likely the hacker has placed spammy pages, text, or links on your
+      site. To find out how to fix this, please continue to
+      [Assess spam damage](/secure/hacked-with-spam/).
+    * Sites with a "phishing notification" in Search Console Message Center
+      may not show any information within Security Issues. By creating phishing
+      pages on your site, the hacker is using your site to obtain users' login,
+      password, or financial details, often by masquerading as a trustworthy
+      site. Since the cleanup for phishing is similar to spam, please continue
+      to [Assess spam damage](/secure/hacked-with-spam/).
+
diff --git a/src/site/content/en/secure/what-is-mixed-content/index.md b/src/site/content/en/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..160d709422c
--- /dev/null
+++ b/src/site/content/en/secure/what-is-mixed-content/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: What is mixed content?
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: >
+  Mixed content occurs when initial HTML is loaded over a secure HTTPS connection,
+  but other resources are loaded over an insecure HTTP connection.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+**Mixed content** occurs when initial HTML is loaded over a secure
+[HTTPS](/why-https-matters/) connection, but other resources (such as images,
+videos, stylesheets, scripts) are loaded over an insecure HTTP connection.
+This is called mixed content
+because both HTTP and HTTPS content are being loaded to display the same page,
+and the initial request was secure over HTTPS.
+
+Requesting subresources using the insecure HTTP protocol weakens the security of the entire page,
+as these requests are vulnerable to [**on-path attacks**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1),
+where an attacker eavesdrops on a network connection and views or modifies the communication between two parties.
+Using these resources, attackers can track users and replace content on a website,
+and in the case of active mixed content, take complete control over the page, not just the insecure resources.
+
+Although many browsers report mixed content warnings to the user,
+by the time this happens, it is too late:
+the insecure requests have already been performed and the security of the page is compromised.
+
+This is why browsers are increasingly blocking mixed content.
+If you have mixed content on your site,
+then fixing it will ensure the content continues to load as browsers become more strict.
+
+## The two types of mixed content
+
+The two types of mixed content are: active and passive.
+
+**Passive mixed content** refers to content that doesn't interact with the rest of the page,
+and thus a man-in-the-middle attack is restricted to what they can do if they intercept or change that content.
+Passive mixed content is defined as images, video, and audio content.
+
+**Active mixed content** interacts with the page as a whole and allows an attacker to do almost anything with the page.
+Active mixed content includes scripts, stylesheets, iframes,
+and other code that the browser can download and execute.
+
+### Passive mixed content
+
+Passive mixed content is seen as less problematic yet still poses a security threat to your site and your users.
+For example, an attacker can intercept HTTP requests for images on your site and swap or replace these images;
+the attacker can swap the _save_ and _delete_ button images,
+causing your users to delete content without intending to;
+replace your product diagrams with lewd or pornographic content,
+defacing your site; or replace your product pictures with ads for a different site or product.
+
+Even if the attacker doesn't alter the content of your site,
+an attacker can track users via mixed content requests.
+The attacker can tell which pages a user visits and which products they view based on images or other resources that the browser loads.
+
+If passive mixed content is present most browsers will indicate in the URL bar that the page is not secure,
+even when the page itself was loaded over HTTPS.
+You can observe this behavior with this [demo](https://passive-mixed-content.glitch.me/)
+that contains examples of passive mixed content.
+
+Until recently passive mixed content was loaded in all browsers,
+as to block it would have broken many websites.
+This is now beginning to change and so it is vital to update any instances of mixed content on your site.
+
+[Chrome is currently rolling out](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html )
+automatic upgrading of passive mixed content where possible.
+Automatic upgrading means that if the asset is available over HTTPS, but has been hardcoded as HTTP,
+the browser will load the HTTPS version. If no secure version can be found the asset will not load.
+
+Whenever it detects mixed content or auto-upgrades passive mixed content,
+Chrome logs detailed messages to the **Issues** tab in DevTools
+to guide you on how to fix the specific issue.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="The Issues tab in Chrome DevTools shows detailed information about the specific mixed content issue and how to fix it", width="800", height="310" %}
+</figure>
+
+### Active mixed content
+
+Active mixed content poses a greater threat than passive mixed content.
+An attacker can intercept and rewrite active content,
+thereby taking full control of your page or even your entire website.
+This allows the attacker to change anything about the page,
+including displaying entirely different content,
+stealing user passwords or other login credentials,
+stealing user session cookies,
+or redirecting the user to a different site entirely.
+
+Due to the severity of this threat,
+most browsers already block this type of content by default to protect users,
+but functionality varies between browser vendors and versions.
+
+This other [demo](https://active-mixed-content.glitch.me/) contains examples of active mixed content.
+[Load the example over HTTP](http://active-mixed-content.glitch.me/)
+to see the content that's blocked when you [load the example over
+HTTPS](https://active-mixed-content.glitch.me/). Blocked content will also
+be detailed in the **Issues** tab.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="The Issues tab in Chrome DevTools shows detailed information about the specific mixed content issue and how to fix it", width="800", height="361" %}
+</figure>
+
+{% Aside %}
+  Browsers also highlight blocked content in their DevTools. Blocked content
+  issues are detailed in the **Issues** tab in Chromium-based browsers. Firefox
+  and Safari log messages in the console.
+{% endAside %}
+
+## The mixed content specification
+
+Browsers follow the [mixed content specification](https://w3c.github.io/webappsec-mixed-content/),
+which defines the [**optionally blockable content**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content)
+and [**blockable content**](https://w3c.github.io/webappsec-mixed-content/#category-blockable) categories.
+
+From the spec,
+a resource qualifies as optionally blockable content
+"when the risk of allowing its usage as mixed content is outweighed by the risk of breaking significant portions of the web";
+this is a subset of the passive mixed content category described above.
+
+All content that is not **optionally blockable** is considered **blockable**,
+and should be blocked by the browser.
+
+{% Aside %}
+There is a [Level 2 of the Mixed Content specification](https://w3c.github.io/webappsec-mixed-content/level2.html) in progress,
+which will add automatic upgrading to the spec.
+{% endAside %}
+
+In recent years, [HTTPS usage has risen dramatically](https://transparencyreport.google.com/https/overview),
+and has become the clear default on the web.
+This makes it more feasible now for browsers to consider blocking all mixed content,
+even those subresource types defined in the [mixed content specification](https://w3c.github.io/webappsec/specs/mixedcontent/) as **optionally blockable**.
+This is why we now see Chrome taking a stricter approach to these subresources.
+
+### Older browsers
+
+It is important to remember that not every visitor to your website uses the most up-to-date browsers.
+Different versions from different browser vendors each treat mixed content differently.
+At worst, older browsers and versions don't block any mixed content at all,
+which is very unsafe for the user.
+
+By fixing your mixed content problems you ensure that your content is visible in new browsers.
+You also help protect users from dangerous content that isn't blocked by older browsers.
diff --git a/src/site/content/en/shows/feed.11tydata.js b/src/site/content/en/shows/feed.11tydata.js
new file mode 100644
index 00000000000..d45326e1c08
--- /dev/null
+++ b/src/site/content/en/shows/feed.11tydata.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {feed} = require('../../../_collections/hooks/shows');
+
+module.exports = {
+  pagination: {
+    before: (shows) => feed(shows),
+  },
+};
diff --git a/src/site/content/en/shows/feed.njk b/src/site/content/en/shows/feed.njk
new file mode 100644
index 00000000000..be63522453d
--- /dev/null
+++ b/src/site/content/en/shows/feed.njk
@@ -0,0 +1,51 @@
+---
+renderData:
+  metadata:
+    author: Google Developers
+    category: "{{ paged.title | i18n(locale) }}"
+    icon: https://web.dev/images/social.png
+    id: https://web.dev/
+    logo: https://web.dev/images/shared/rss-banner.png
+    subtitle: "{{ paged.description | i18n(locale) }}"
+    title: "{{ paged.title | i18n(locale) }} on web.dev"
+    url: https://web.dev{{ paged.href }}feed.xml
+noindex: true
+permalink: "/{{lang}}{{ paged.href }}feed.xml"
+pagination:
+  data: collections.shows
+  size: 1
+  alias: paged
+  resolve: values
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <id>{{ renderData.metadata.id }}</id>
+  <title>{{ renderData.metadata.title }}</title>
+  <updated>{{ site.buildDate | rssDate }}</updated>
+  <author>
+    <name>{{ renderData.metadata.author }}</name>
+  </author>
+  <link href="{{ renderData.metadata.url }}" rel="self"/>
+  <link href="{{ renderData.metadata.id }}"/>
+  <category term="{{ renderData.metadata.title }}"/>
+  <icon>{{ renderData.metadata.icon }}</icon>
+  <logo>{{ renderData.metadata.logo }}</logo>
+  <subtitle>{{ renderData.metadata.subtitle }}</subtitle>
+  {% for post in paged.elements -%}
+  {#  absoluteUrl comes from 11ty RSS Plugin (@see https://www.11ty.dev/docs/plugins/rss/) #}
+  {% set absolutePostUrl -%}{{ post.url | url | absoluteUrl(renderData.metadata.url) }}{%- endset %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ post.date | rssDate }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content type="html" mode="escaped">{{ post.data.description | md({linkify: true, breaks: true, xhtmlOut: true}) | safe }}</content>
+    {% for entry in post.data.authors %}
+    {%- set author = collections.authors[entry] -%}
+    <author>
+      <name>{{ author.title | i18n(locale) }}</name>
+    </author>
+    {%- endfor %}
+  </entry>
+  {%- endfor %}
+</feed>
diff --git a/src/site/content/en/shows/index.11tydata.js b/src/site/content/en/shows/index.11tydata.js
new file mode 100644
index 00000000000..63b638f468b
--- /dev/null
+++ b/src/site/content/en/shows/index.11tydata.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {index} = require('../../../_collections/hooks/shows');
+
+module.exports = {
+  pagination: {
+    before: (shows) => index(shows),
+  },
+};
diff --git a/src/site/content/en/shows/index.md b/src/site/content/en/shows/index.md
new file mode 100644
index 00000000000..6737c3fc10a
--- /dev/null
+++ b/src/site/content/en/shows/index.md
@@ -0,0 +1,12 @@
+---
+layout: index-page
+title: Shows
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+pagination:
+  data: collections.shows
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/shows/individual.11tydata.js b/src/site/content/en/shows/individual.11tydata.js
new file mode 100644
index 00000000000..c140d66786b
--- /dev/null
+++ b/src/site/content/en/shows/individual.11tydata.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {individual} = require('../../../_collections/hooks/shows');
+const {lang} = require('../lang');
+
+module.exports = {
+  pagination: {
+    before: (shows) => individual(shows, lang),
+  },
+};
diff --git a/src/site/content/en/shows/individual.md b/src/site/content/en/shows/individual.md
new file mode 100644
index 00000000000..406961c71a1
--- /dev/null
+++ b/src/site/content/en/shows/individual.md
@@ -0,0 +1,18 @@
+---
+layout: item-page
+path: 'shows'
+title: Shows
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+renderData:
+  title: "{{ paged.overrideTitle or paged.title | i18n(locale) or title }}"
+  description: "{{ paged.description | i18n(locale) or description }}"
+  rss: "{{ paged.href }}feed.xml"
+  hero: "{{ paged.data.hero }}"
+pagination:
+  data: collections.shows
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/shows/show/index.11tydata.js b/src/site/content/en/shows/show/index.11tydata.js
new file mode 100644
index 00000000000..eb366b052b2
--- /dev/null
+++ b/src/site/content/en/shows/show/index.11tydata.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  pagination: {
+    before: (shows) =>
+      shows.reduce((all, current) => [...all, ...current.elements], []),
+  },
+};
diff --git a/src/site/content/en/shows/show/index.njk b/src/site/content/en/shows/show/index.njk
new file mode 100644
index 00000000000..f2c8dd6bce4
--- /dev/null
+++ b/src/site/content/en/shows/show/index.njk
@@ -0,0 +1,14 @@
+---
+layout: show
+permalink: /{{lang}}{{ paged.url }}index.html
+renderData:
+  title: "{{ paged.data.title }}"
+  description: "{{ paged.data.subhead }}"
+  hero: "{{ paged.data.thumbnail }}"
+pagination:
+  data: collections.shows
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/spaces/2022-08-04-ui-ama/index.md b/src/site/content/en/spaces/2022-08-04-ui-ama/index.md
new file mode 100644
index 00000000000..c8b4a98a9c3
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-04-ui-ama/index.md
@@ -0,0 +1,16 @@
+---
+title: Ask me anything with the UI DevRel Team
+description: Join the Chrome UI DevRel Team to ask your questions about building modern web interfaces.
+hosts:
+  - bramus
+  - jheyy
+  - una
+primary_host:
+  - una
+event_date: 2022-08-04
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://calendar.google.com/calendar/u/0/r/eventedit?&text=Ask+me+anything+with+the+UI+DevRel+Team&details=Join+the+Chrome+UI+DevRel+Team+to+ask+your+questions+about+building+modern+web+interfaces.&location=Twitter+Spaces&dates=20220804T160000Z%2F20220804T170000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/R9XoE2mlNWutW0W3l132.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-08-09-new-on-web/index.md b/src/site/content/en/spaces/2022-08-09-new-on-web/index.md
new file mode 100644
index 00000000000..2d589a835fc
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-09-new-on-web/index.md
@@ -0,0 +1,15 @@
+---
+title: What's new on the web
+description: Learn about changes to the web platform and new APIs that you can use today.
+hosts:
+  - adamargyle
+  - rachelandrew
+primary_host:
+  - rachelandrew
+event_date: 2022-08-09
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=What%27s+new+on+the+web&details=Learn+about+changes+to+the+web+platform+and+new+APIs+that+you+can+use+today.&location=Twitter+Spaces&dates=20220809T160000Z%2F20220809T170000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/hA1XcPxp5UnRatLNp2D3.mp3
+permalink: false
+---
diff --git a/src/site/content/en/spaces/2022-08-11-feature-fundamentals/index.md b/src/site/content/en/spaces/2022-08-11-feature-fundamentals/index.md
new file mode 100644
index 00000000000..e6baebfcbb6
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-11-feature-fundamentals/index.md
@@ -0,0 +1,15 @@
+---
+title: Browser feature fundamentals
+description: Learn how browsers develop web platform features and usher them through the standards process.
+hosts:
+  - samdutton
+  - rowan_m
+primary_host:
+  - rowan_m
+event_date: 2022-08-11
+event_time: 5AM PT / 8AM ET / 1PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=Browser+feature+fundamentals&details=Learn+how+browsers+develop+web+platform+features+and+usher+them+through+the+standards+process.&location=Twitter+Spaces&dates=20220811T120000Z%2F20220811T130000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/tNFontA6JHhrsPbG6iew.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-08-16-devs-telling-us/index.md b/src/site/content/en/spaces/2022-08-16-devs-telling-us/index.md
new file mode 100644
index 00000000000..961c2673291
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-16-devs-telling-us/index.md
@@ -0,0 +1,16 @@
+---
+title: What are developers telling us?
+description: Let's talk data! Listen to the Chrome team talk about what we're learning from developer feedback.
+hosts:
+  - kosamari
+  - kadirtopal
+  - andreban
+primary_host:
+  - andreban
+event_date: 2022-08-16
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=What+are+developers+telling+us%3F&details=Let%27s+talk+data%21+Listen+to+the+Chrome+team+talk+about+what+we%27re+learning+from+developer+feedback.&location=Twitter+Spaces&dates=20220816T160000Z%2F20220816T170000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/bKWEpx22Ur4TEwtc3Qfp.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-08-18-web-perf-ama/index.md b/src/site/content/en/spaces/2022-08-18-web-perf-ama/index.md
new file mode 100644
index 00000000000..71cca41d63c
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-18-web-perf-ama/index.md
@@ -0,0 +1,18 @@
+---
+title: Ask me anything, web performance edition
+description: Ask these web performance experts your questions on optimizing your web experiences.
+hosts:
+  - anniesullie
+  - tunetheweb
+  - rviscomi
+  - patmeenan
+  - philipwalton
+primary_host:
+  - philipwalton
+event_date: 2022-08-18
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=Ask+me+anything%2C+web+performance+edition&details=Ask+these+web+performance+experts+your+questions+on+optimizing+your+web+experiences.&location=Twitter+Spaces&dates=20220818T160000Z%2F20220818T170000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/0HZFzBvvxg5Os02VKEEu.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-08-23-modern-web/index.md b/src/site/content/en/spaces/2022-08-23-modern-web/index.md
new file mode 100644
index 00000000000..9b6a1926dec
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-23-modern-web/index.md
@@ -0,0 +1,15 @@
+---
+title: Modern web capabilities
+description: The web is full of powerful capabilities and APIs. Take advantage of them in your web apps.
+hosts:
+  - thomassteiner
+  - petelepage
+primary_host:
+  - thomassteiner
+event_date: 2022-08-23
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=Modern+web+capabilities&details=The+web+is+full+of+powerful+capabilities+and+APIs.+Take+advantage+of+them+in+your+web+apps.&location=Twitter+Spaces&dates=20220823T160000Z%2F20220823T170000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/7ejv3GVjk11QgRRxUd6j.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-08-25-identity/index.md b/src/site/content/en/spaces/2022-08-25-identity/index.md
new file mode 100644
index 00000000000..9c4b1a4de35
--- /dev/null
+++ b/src/site/content/en/spaces/2022-08-25-identity/index.md
@@ -0,0 +1,15 @@
+---
+title: Web Identity
+description: Ask your questions on how to build advanced authentication systems.
+hosts:
+  - agektmr
+  - rowan_m
+primary_host:
+  - rowan_m
+event_date: 2022-08-25
+event_time: 5AM PT / 8AM ET / 1PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=Web+Identity&details=Ask+your+questions+on+how+to+build+advanced+authentication+systems.&location=Twitter+Spaces&dates=20220825T120000Z%2F20220825T130000Z"
+tags: twitter-space
+audio: https://storage.googleapis.com/web-dev-uploads/file/X7g946Tojqe1w46oZXgE54ngb9r2/5oYhkKcUmovn3DXHywYM.mp3
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/2022-09-16-subgrid/index.md b/src/site/content/en/spaces/2022-09-16-subgrid/index.md
new file mode 100644
index 00000000000..6bed25868d4
--- /dev/null
+++ b/src/site/content/en/spaces/2022-09-16-subgrid/index.md
@@ -0,0 +1,13 @@
+---
+title: CSS Subgrid
+description: What is it, nice use cases, what's the syntax like, and more!
+hosts:
+  - adamargyle
+  - davideast
+primary_host:
+  - adamargyle
+event_date: 2022-09-16
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://twitter.com/i/spaces/1OwGWwjkRmnGQ"
+tags: twitter-space
+---
diff --git a/src/site/content/en/spaces/2022-10-13-chrometober/index.md b/src/site/content/en/spaces/2022-10-13-chrometober/index.md
new file mode 100644
index 00000000000..0c5e3c73c2f
--- /dev/null
+++ b/src/site/content/en/spaces/2022-10-13-chrometober/index.md
@@ -0,0 +1,16 @@
+---
+title: How we built Chrometober
+description: Join the Chrome UI DevRel and Chrome Interactions Eng team to chat about how we built Chrometober using scroll-linked animations and the scroll-timeline polyfill.
+hosts:
+  - bramus
+  - flackr
+  - una
+  - jheyy
+primary_host:
+  - una
+event_date: 2022-10-13
+event_time: 9AM PT / 12PM ET / 5PM GMT
+cal_link: "https://www.google.com/calendar/render?action=TEMPLATE&text=How+we+built+Chrometober+-+Twitter+Space&details=Join+the+Chrome+UI+DevRel+and+Chrome+Interactions+Eng+team+to+chat+about+how+we+built+Chrometober+using+scroll-linked+animations.&dates=20221013T160000Z%2F20221013T170000Z"
+tags: twitter-space
+permalink: false
+---
\ No newline at end of file
diff --git a/src/site/content/en/spaces/_example/index.md b/src/site/content/en/spaces/_example/index.md
new file mode 100644
index 00000000000..ee1811cda2d
--- /dev/null
+++ b/src/site/content/en/spaces/_example/index.md
@@ -0,0 +1,15 @@
+---
+title: Title Goes Here Title Goes Here Title Goes Here
+description: We’re learning all about Vertex AI this week as Carter Morgan and Jay Jenkins Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+hosts:
+  - jeffposnick
+  - una
+primary_host:
+  - jeffposnick
+twitter_link: http://twitter.com
+event_date: 2023-02-21
+audio: https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556
+tags: twitter-space
+permalink: false
+draft: true
+---
diff --git a/src/site/content/en/spaces/_example_ended/index.md b/src/site/content/en/spaces/_example_ended/index.md
new file mode 100644
index 00000000000..f7e18d26be6
--- /dev/null
+++ b/src/site/content/en/spaces/_example_ended/index.md
@@ -0,0 +1,15 @@
+---
+title: Title Goes Here Title Goes Here Title Goes Here
+description: We’re learning all about Vertex AI this week as Carter Morgan and Jay Jenkins Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+hosts:
+  - jeffposnick
+  - una
+primary_host:
+  - una
+twitter_link: http://twitter.com
+event_date: 2021-02-21
+audio: https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556
+tags: twitter-space
+permalink: false
+draft: true
+---
diff --git a/src/site/content/en/spaces/index.md b/src/site/content/en/spaces/index.md
new file mode 100644
index 00000000000..d8500bdca79
--- /dev/null
+++ b/src/site/content/en/spaces/index.md
@@ -0,0 +1,5 @@
+---
+layout: spaces
+title: Connect with us on Twitter Spaces
+description: Hear about what the Chrome team is working on and ask your burning questions through live discussion on Twitter Spaces. Add upcoming events to your calendar to join us live, or catch up later with the recorded audio. See upcoming and previous spaces below.
+---
diff --git a/src/site/content/en/tags/feed.njk b/src/site/content/en/tags/feed.njk
index ba5e3fe1a6a..cf4517ac5aa 100644
--- a/src/site/content/en/tags/feed.njk
+++ b/src/site/content/en/tags/feed.njk
@@ -2,12 +2,12 @@
 renderData:
   metadata:
     author: Google Developers
-    category: "{{ paged.title }}"
+    category: "{{ paged.title | i18n(locale) }}"
     icon: https://web.dev/images/social.png
     id: https://web.dev/
-    logo: https://web.dev/images/rss-banner.png
-    subtitle: "{{ paged.description }}"
-    title: "{{ paged.title }} on web.dev"
+    logo: https://web.dev/images/shared/rss-banner.png
+    subtitle: "{{ paged.description | i18n(locale) }}"
+    title: "{{ paged.overrideTitle or paged.title | i18n(locale) }} on web.dev"
     url: https://web.dev{{ paged.href }}feed.xml
 noindex: true
 permalink: "/{{lang}}{{ paged.href }}feed.xml"
@@ -21,7 +21,7 @@ pagination:
 <feed xmlns="http://www.w3.org/2005/Atom">
   <id>{{ renderData.metadata.id }}</id>
   <title>{{ renderData.metadata.title }}</title>
-  <updated>{{ paged.elements | reverse | rssLastUpdatedDate }}</updated>
+  <updated>{{ site.buildDate | rssDate }}</updated>
   <author>
     <name>{{ renderData.metadata.author }}</name>
   </author>
@@ -33,17 +33,17 @@ pagination:
   <subtitle>{{ renderData.metadata.subtitle }}</subtitle>
   {% for post in paged.elements -%}
   {#  absoluteUrl comes from 11ty RSS Plugin (@see https://www.11ty.dev/docs/plugins/rss/) #}
-  {% set absolutePostUrl -%}{{ post.data.canonicalUrl | url | absoluteUrl(renderData.metadata.url) }}{%- endset %}
+  {% set absolutePostUrl -%}{{ post.url | url | absoluteUrl(renderData.metadata.url) }}{%- endset %}
   <entry>
     <title>{{ post.data.title }}</title>
     <link href="{{ absolutePostUrl }}"/>
     <updated>{{ post.date | rssDate }}</updated>
     <id>{{ absolutePostUrl }}</id>
-    <content type="html">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+    <content type="html" mode="escaped">{{ post.templateContent | replace("web-copy-code", "div") | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
     {% for entry in post.data.authors %}
-    {%- set author =  collections.authors[entry] -%}
+    {%- set author = collections.authors[entry] -%}
     <author>
-      <name>{{ author.title }}</name>
+      <name>{{ author.title | i18n(locale) }}</name>
     </author>
     {%- endfor %}
   </entry>
diff --git a/src/site/content/en/tags/index.md b/src/site/content/en/tags/index.md
new file mode 100644
index 00000000000..88540b14472
--- /dev/null
+++ b/src/site/content/en/tags/index.md
@@ -0,0 +1,12 @@
+---
+layout: index-page
+title: Tags
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+pagination:
+  data: collections.tags
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/tags/index.njk b/src/site/content/en/tags/index.njk
deleted file mode 100644
index 19ead0426f2..00000000000
--- a/src/site/content/en/tags/index.njk
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: layout
-title: Tags
-permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
-description: Our latest news, updates, and stories for developers
-pagination:
-  data: collections.tags
-  size: 1
-  alias: paged
-  resolve: values
-eleventyComputed:
-  canonicalUrl: "{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}"
----
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="tags-landing-page">
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
-
-  <div class="w-layout-container w-pb--non">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline">{{ title }}</h1>
-      <p class="w-page-header__copy">{{ description }}</p>
-    </header>
-  </div>
-  {% include 'partials/paged.njk' %}
-</div>
diff --git a/src/site/content/en/tags/individual.11tydata.js b/src/site/content/en/tags/individual.11tydata.js
index 37ff5e0ed6f..08dcf499b3f 100644
--- a/src/site/content/en/tags/individual.11tydata.js
+++ b/src/site/content/en/tags/individual.11tydata.js
@@ -15,10 +15,10 @@
  */
 
 const {individual} = require('../../../_collections/hooks/tags');
-const lang = require('../lang');
+const {lang} = require('../lang');
 
 module.exports = {
   pagination: {
-    before: (tags) => individual(tags, lang.lang),
+    before: (tags) => individual(tags, lang),
   },
 };
diff --git a/src/site/content/en/tags/individual.md b/src/site/content/en/tags/individual.md
new file mode 100644
index 00000000000..4cdf906f6f0
--- /dev/null
+++ b/src/site/content/en/tags/individual.md
@@ -0,0 +1,19 @@
+---
+layout: item-page
+path: 'tags'
+showHero: true
+title: Tags
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+renderData:
+  title: "{{ paged.overrideTitle or paged.title | i18n(locale) or title }}"
+  description: "{{ paged.description | i18n(locale) or description }}"
+  rss: "{{ paged.href }}feed.xml"
+  hero: "{{ paged.data.hero }}"
+pagination:
+  data: collections.tags
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/en/tags/individual.njk b/src/site/content/en/tags/individual.njk
deleted file mode 100644
index 217a8c712e0..00000000000
--- a/src/site/content/en/tags/individual.njk
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: layout
-title: Tags
-permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
-description: Our latest news, updates, and stories for developers
-renderData:
-  title: "{{ paged.title or title }}"
-  description: "{{ paged.description or description }}"
-  rss: "{{ paged.href }}feed.xml"
-pagination:
-  data: collections.tags
-  size: 1
-  alias: paged
-  resolve: values
-eleventyComputed:
-  canonicalUrl: "{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}"
----
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-<div class="tags-landing-page">
-  {# Make sure Actions are first in the tab order. #}
-  <div class="w-actions">
-    {% include 'partials/subscribe-action.njk' %}
-  </div>
-
-  <div class="w-layout-container w-pb--non">
-    <header class="w-page-header">
-      <h1 class="w-page-header__headline w-tags-page-header__headline">{{ renderData.title }}</h1>
-      <p class="w-page-header__copy">{{ renderData.description | safe }}</p>
-    </header>
-  </div>
-  {% include 'partials/paged.njk' %}
-</div>
diff --git a/src/site/content/en/third_party/chrometober-2022/LICENSE b/src/site/content/en/third_party/chrometober-2022/LICENSE
new file mode 100644
index 00000000000..1d3fd947f8c
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2022 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/src/site/content/en/third_party/chrometober-2022/android-chrome-192x192.png b/src/site/content/en/third_party/chrometober-2022/android-chrome-192x192.png
new file mode 100644
index 00000000000..656a63622af
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/android-chrome-192x192.png differ
diff --git a/src/site/content/en/third_party/chrometober-2022/android-chrome-512x512.png b/src/site/content/en/third_party/chrometober-2022/android-chrome-512x512.png
new file mode 100644
index 00000000000..c5260d50909
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/android-chrome-512x512.png differ
diff --git a/src/site/content/en/third_party/chrometober-2022/apple-touch-icon.png b/src/site/content/en/third_party/chrometober-2022/apple-touch-icon.png
new file mode 100644
index 00000000000..5fe36445b96
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/apple-touch-icon.png differ
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/Branch.a36bf11c.svg b/src/site/content/en/third_party/chrometober-2022/assets/Branch.a36bf11c.svg
new file mode 100644
index 00000000000..6f18aa0a82a
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/Branch.a36bf11c.svg
@@ -0,0 +1,10 @@
+<svg class="feature branch" viewBox="0 0 291 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.99 69.62c2.96-14.43 17.57-23.3 31.75-19.27l131.63 34.12c9.59 2.73 15.45 12.39 13.45 22.15-2.03 9.87-11.39 16.46-21.36 15.02L22.22 99.78C7.78 97.71-1.93 83.9 1 69.61l-.01.01Z" fill="#594B63"/>
+  <path d="m148.39 90.27 78.8-86.78c3.25-3.57 8.71-4.01 12.48-1 3.72 2.96 4.54 8.28 1.9 12.23l-65.07 97.5c-5.79 8.68-17.76 10.58-25.96 4.12-8.14-6.42-9.13-18.4-2.16-26.07h.01Z" fill="#594B63"/>
+  <path d="m148.39 90.27 78.8-86.78c3.25-3.57 8.71-4.01 12.48-1 3.72 2.96 4.54 8.28 1.9 12.23l-65.07 97.5c-5.79 8.68-17.76 10.58-25.96 4.12-8.14-6.42-9.13-18.4-2.16-26.07h.01Z" fill="#594B63"/>
+  <path d="m180.27 79.16 70.24 10.52a5.54 5.54 0 0 1 4.7 5.95 5.542 5.542 0 0 1-5.52 5.08h-71.03c-6.33 0-11.31-5.38-10.81-11.69.5-6.26 6.2-10.79 12.41-9.86h.01Z" fill="#594B63"/>
+  <path d="m88.16 90.74 27.89 60.14a6.65 6.65 0 0 1-11.28 6.98l-38.66-53.47c-4.46-6.14-2.74-14.77 3.73-18.73 6.43-3.93 14.84-1.59 18.32 5.09v-.01Z" fill="#594B63"/>
+  <path d="m113.95 66.63 47.59-14.45c1.96-.6 4.04.43 4.76 2.35.71 1.89-.15 4-1.97 4.87l-44.92 21.35c-4 1.9-8.77-.01-10.35-4.15-1.57-4.11.68-8.69 4.89-9.97Z" fill="#594B63"/>
+  <path d="m223.77 91.84 24.42 21.3c1.01.88 1.16 2.38.35 3.44-.8 1.04-2.26 1.3-3.37.59l-27.3-17.44a4.945 4.945 0 0 1-1.28-7.15 4.932 4.932 0 0 1 7.19-.74h-.01Z" fill="#594B63"/>
+  <path d="m215.28 31.29 69.71-1.85a5.445 5.445 0 0 1 5.57 4.95 5.435 5.435 0 0 1-4.47 5.85L217.42 52.4c-6.12 1.08-11.86-3.28-12.45-9.46-.59-6.14 4.15-11.49 10.31-11.66v.01Z" fill="#594B63"/>
+</svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/Fence.0bdb1d1b.svg b/src/site/content/en/third_party/chrometober-2022/assets/Fence.0bdb1d1b.svg
new file mode 100644
index 00000000000..128f530ea8b
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/Fence.0bdb1d1b.svg
@@ -0,0 +1,11 @@
+<svg class="feature fence" viewBox="0 0 261 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A spooky fence.</title>
+  <path d="m199.35 110.54-9.41-1.25a2.583 2.583 0 0 1-2.24-2.54l-.48-84.2c0-.76.33-1.48.91-1.98l15.05-12.83c1.14-.97 2.87-.77 3.75.44l11.61 15.81c.43.59.59 1.33.45 2.04l-16.78 82.47a2.574 2.574 0 0 1-2.87 2.04h.01Z" fill="#A58050"/>
+  <path d="m171.25 103.15-10.84-.18a2.58 2.58 0 0 1-2.53-2.41l-5.54-82.54c-.04-.66.17-1.31.59-1.82l12.28-14.83a2.588 2.588 0 0 1 3.93-.06l13.2 15.03c.49.56.72 1.31.62 2.06l-11.71 84.75Z" fill="#A58050"/>
+  <path d="m138.37 111.3-9.49.17c-1.29.02-2.4-.91-2.6-2.18L113.25 26.1c-.12-.75.1-1.52.6-2.09l12.97-14.93a2.587 2.587 0 0 1 3.78-.13l13.84 13.9c.51.52.79 1.23.75 1.95l-4.29 84.05a2.586 2.586 0 0 1-2.53 2.45Z" fill="#A58050"/>
+  <path d="m101.66 104.24-10.83.46c-1.34.06-2.5-.92-2.67-2.25l-10.4-82.07c-.08-.66.09-1.32.48-1.85L89.62 3c.94-1.28 2.8-1.42 3.92-.29l14.07 14.22c.53.53.8 1.27.74 2.02l-6.68 85.29h-.01Z" fill="#A58050"/>
+  <path d="m57.33 115.56-9.46-.84a2.582 2.582 0 0 1-2.35-2.45l-4.06-84.1c-.04-.76.26-1.5.82-2.02l14.49-13.46c1.1-1.02 2.83-.89 3.77.28l12.27 15.3c.46.57.65 1.3.54 2.02L60.1 113.4a2.578 2.578 0 0 1-2.78 2.16h.01Z" fill="#A58050"/>
+  <path d="m26.5 105.82-10.84-.04c-1.34 0-2.46-1.04-2.56-2.37L6.45 20.95c-.05-.66.15-1.31.56-1.83L19.09 4.13c1-1.24 2.86-1.29 3.93-.11l13.4 14.85c.5.56.74 1.3.65 2.05l-10.56 84.9h-.01Z" fill="#A58050"/>
+  <path d="m226.08 114.74-9.15-2.52a2.581 2.581 0 0 1-1.87-2.83l10.98-83.48c.1-.75.53-1.43 1.17-1.84l16.66-10.67c1.26-.81 2.95-.37 3.66.94l9.35 17.24c.35.64.41 1.4.17 2.08l-27.84 79.42a2.578 2.578 0 0 1-3.12 1.63l-.01.03Z" fill="#A58050"/>
+  <path d="M255.53 67.81 3.14 59.08a2.586 2.586 0 0 1-2.49-2.53l-.19-9.67a2.582 2.582 0 0 1 2.65-2.63l255.25 6.95c1.63.04 2.81 1.57 2.44 3.16l-2.66 11.45a2.589 2.589 0 0 1-2.6 2h-.01Z" fill="#A58050"/>
+</svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/Shelves.685778f6.svg b/src/site/content/en/third_party/chrometober-2022/assets/Shelves.685778f6.svg
new file mode 100644
index 00000000000..43d9d9b34fa
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/Shelves.685778f6.svg
@@ -0,0 +1,103 @@
+<svg class="feature shelves" viewBox="0 0 261 332" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M48.68 293h12.8v32c0 3.53-2.87 6.4-6.4 6.4-3.53 0-6.4-2.87-6.4-6.4v-32Z" fill="#000"/>
+  <path d="M1.67 295.75h12.8v29.26c0 3.53-2.87 6.4-6.4 6.4-3.53 0-6.4-2.87-6.4-6.4v-29.26Z" fill="#000"/>
+  <path d="M199.94 295.75h12.8v29.26c0 3.53-2.87 6.4-6.4 6.4-3.53 0-6.4-2.87-6.4-6.4v-29.26Z" fill="#000"/>
+  <path d="M246.73 293h12.8v32c0 3.53-2.87 6.4-6.4 6.4-3.53 0-6.4-2.87-6.4-6.4v-32Z" fill="#000"/>
+  <path d="M18.05.53h162.03c17.34 0 31.42 14.08 31.42 31.42v247.96c0 17.34-14.08 31.42-31.42 31.42H18.05c-9.76 0-17.68-7.92-17.68-17.68V18.21C.37 8.45 8.29.53 18.05.53Z" fill="#7B9C8A"/>
+  <path d="M48.89.53h197.4c7.58 0 13.74 6.16 13.74 13.74v283.32c0 7.58-6.16 13.74-13.74 13.74H48.89V.53Z" fill="#97B8A6"/>
+  <path d="M248.22 12.33h-93.11v51.14h93.11V12.33Z" fill="#7B9C8A"/>
+  <path d="M248.22 144.78h-28.85v72.13h28.85v-72.13Z" fill="#7B9C8A"/>
+  <path d="M248.22 67.41h-28.85v76.06h28.85V67.41Z" fill="#7B9C8A"/>
+  <path d="M128.89 67.41h-28.85v76.06h28.85V67.41Z" fill="#7B9C8A"/>
+  <path d="M248.22 219.53h-47.21v82.62h47.21v-82.62Z" fill="#7B9C8A"/>
+  <path d="M152.49 219.53h-47.21v82.62h47.21v-82.62Z" fill="#7B9C8A"/>
+  <path d="M250.19.53H48.89v310.8h199.23c6.57 0 11.9-5.33 11.9-11.9V10.36c0-5.43-4.4-9.84-9.84-9.84l.01.01ZM62 130.86V75.95c0-4.07 3.3-7.37 7.37-7.37h49.07c4.07 0 7.37 3.3 7.37 7.37v54.91c0 4.07-3.3 7.37-7.37 7.37H69.37a7.37 7.37 0 0 1-7.37-7.37Zm78.18-62.28h99.36c4.07 0 7.37 3.3 7.37 7.37v54.91c0 4.07-3.3 7.37-7.37 7.37h-99.36a7.37 7.37 0 0 1-7.37-7.37V75.95c0-4.07 3.3-7.37 7.37-7.37Zm98.73-54.94c4.41 0 7.99 3.58 7.99 7.99v31.85c0 4.07-3.3 7.37-7.37 7.37H69.36a7.37 7.37 0 0 1-7.37-7.37V21c0-4.07 3.3-7.37 7.37-7.37h169.55v.01ZM69.36 219.53h74.06c4.07 0 7.37 3.3 7.37 7.37v63.95c0 4.07-3.3 7.37-7.37 7.37H69.36a7.37 7.37 0 0 1-7.37-7.37V226.9c0-4.07 3.3-7.37 7.37-7.37Zm177.54 70.69c0 4.41-3.58 7.99-7.99 7.99H166.4a7.37 7.37 0 0 1-7.37-7.37v-63.95c0-4.07 3.3-7.37 7.37-7.37h73.13c4.07 0 7.37 3.3 7.37 7.37v63.33ZM61.99 204.29v-50.76c0-4.07 3.3-7.37 7.37-7.37h170.17c4.07 0 7.37 3.3 7.37 7.37v50.76c0 4.07-3.3 7.37-7.37 7.37H69.36a7.37 7.37 0 0 1-7.37-7.37Z" fill="#CBDECE"/>
+  <path d="M159.8 81.53h-19.34a2.3 2.3 0 0 0-2.3 2.3v52.09a2.3 2.3 0 0 0 2.3 2.3h19.34a2.3 2.3 0 0 0 2.3-2.3V83.83a2.3 2.3 0 0 0-2.3-2.3Z" fill="#9D975E"/>
+  <path d="M178.89 75.61h-14.88a2.3 2.3 0 0 0-2.3 2.3v57.66a2.3 2.3 0 0 0 2.3 2.3h14.88a2.3 2.3 0 0 0 2.3-2.3V77.91a2.3 2.3 0 0 0-2.3-2.3Z" fill="#86758B"/>
+  <path d="M224.45 80.14h-25.99a2.3 2.3 0 0 0-2.3 2.3v53.14a2.3 2.3 0 0 0 2.3 2.3h25.99a2.3 2.3 0 0 0 2.3-2.3V82.44a2.3 2.3 0 0 0-2.3-2.3Z" fill="#B96D6B"/>
+  <path d="M168.11 81.53h-8.27a2.3 2.3 0 0 0-2.3 2.3v52.09a2.3 2.3 0 0 0 2.3 2.3h8.27a2.3 2.3 0 0 0 2.3-2.3V83.83a2.3 2.3 0 0 0-2.3-2.3Z" fill="#B9B36E"/>
+  <path d="M199.72 89.87h-8.96a2.3 2.3 0 0 0-2.3 2.3v43.4a2.3 2.3 0 0 0 2.3 2.3h8.96a2.3 2.3 0 0 0 2.3-2.3v-43.4a2.3 2.3 0 0 0-2.3-2.3Z" fill="#6C697E"/>
+  <path d="M191.81 75.61h-14.88a2.3 2.3 0 0 0-2.3 2.3v57.66a2.3 2.3 0 0 0 2.3 2.3h14.88a2.3 2.3 0 0 0 2.3-2.3V77.91a2.3 2.3 0 0 0-2.3-2.3Z" fill="#A1858F"/>
+  <path d="M208.03 89.87h-8.96a2.3 2.3 0 0 0-2.3 2.3v43.4a2.3 2.3 0 0 0 2.3 2.3h8.96a2.3 2.3 0 0 0 2.3-2.3v-43.4a2.3 2.3 0 0 0-2.3-2.3Z" fill="#817F94"/>
+  <path d="M238.29 80.14h-23.22a2.3 2.3 0 0 0-2.3 2.3v53.14a2.3 2.3 0 0 0 2.3 2.3h23.22a2.3 2.3 0 0 0 2.3-2.3V82.44a2.3 2.3 0 0 0-2.3-2.3Z" fill="#C08783"/>
+  <path d="M240.59 85.01h-27.82v7.65h27.82v-7.65Z" fill="#B96D6B"/>
+  <path d="M240.59 126.74h-27.82v7.65h27.82v-7.65Z" fill="#B96D6B"/>
+  <path d="M210.33 93.7h-13.56v4.52h13.56V93.7Z" fill="#6C697E"/>
+  <path d="M194.11 79.79h-19.48v1.74h19.48v-1.74Z" fill="#C5A4BD"/>
+  <path d="M210.92 133.08h-14.77v-3.34l14.77-.13v3.47Z" fill="#6C697E"/>
+  <path d="M184.54 129.53c4.324 0 7.83-10.356 7.83-23.13s-3.506-23.13-7.83-23.13-7.83 10.356-7.83 23.13 3.506 23.13 7.83 23.13Z" fill="#C5A4BD"/>
+  <path d="M166.67 86.4h-5.39a2 2 0 0 0-2 2v42.95a2 2 0 0 0 2 2h5.39a2 2 0 0 0 2-2V88.4a2 2 0 0 0-2-2Z" fill="#A68C5B"/>
+  <path d="M108.03 211.12H81.39c-2.7 0-4.97-2.02-5.29-4.69l-3.66-30.73c-.38-3.17 2.1-5.95 5.29-5.95h33.95c3.19 0 5.66 2.78 5.29 5.95l-3.66 30.73a5.32 5.32 0 0 1-5.29 4.69h.01Z" fill="#D8EBE4"/>
+  <path d="M105.88 209.67H83.4c-2.45 0-4.52-1.81-4.84-4.23l-4.07-30.24h39.02l-2.75 30.04a4.89 4.89 0 0 1-4.87 4.44l-.01-.01Z" fill="#99A3BA"/>
+  <path d="M109.2 169.75H80.24c-.33-2.17-.65-4.34-.98-6.51a3.18 3.18 0 0 1 3.15-3.65h24.62a3.19 3.19 0 0 1 3.15 3.65c-.33 2.17-.65 4.34-.98 6.51Z" fill="#000"/>
+  <path d="M94.29 181.38c-.48 0-.94.06-1.39.15 0-.1 0-.19-.02-.29-.39-2.83-3.73-4.72-7.45-4.21-3.72.51-6.42 3.22-6.02 6.05.4 2.83 3.73 4.72 7.45 4.21.58-.08 1.12-.22 1.64-.39.41 2.15 2.65 3.78 5.43 3.77 3.13-.01 5.76-2.1 5.86-4.67.1-2.56-2.36-4.63-5.49-4.62h-.01Z" fill="#D8EBE4"/>
+  <path d="M111.235 182.741c.396-2.302-2.094-4.652-5.562-5.247-3.467-.596-6.598.787-6.994 3.09-.395 2.302 2.095 4.652 5.562 5.248 3.467.595 6.598-.788 6.994-3.091Z" fill="#D8EBE4"/>
+  <path d="M102.744 207.821c1.921-.774 3.074-2.406 2.574-3.645-.499-1.24-2.461-1.618-4.382-.845-1.921.774-3.074 2.406-2.575 3.646.5 1.239 2.461 1.617 4.383.844Z" fill="#D8EBE4"/>
+  <path d="M86.525 199.454c3.185-.851 5.352-3.095 4.84-5.01-.512-1.915-3.51-2.778-6.694-1.926-3.186.852-5.353 3.095-4.84 5.01.512 1.916 3.509 2.778 6.694 1.926Z" fill="#D8EBE4"/>
+  <path d="M88.682 201.64c.414-1.758-1.038-3.604-3.242-4.123-2.204-.518-4.326.487-4.74 2.245-.414 1.758 1.038 3.603 3.242 4.122 2.204.518 4.326-.486 4.74-2.244Z" fill="#D8EBE4"/>
+  <path d="M99.206 200.98c3.416-.907 5.791-3.127 5.305-4.958-.486-1.831-3.649-2.58-7.066-1.673-3.416.907-5.791 3.127-5.305 4.958.486 1.831 3.65 2.58 7.066 1.673Z" fill="#D8EBE4"/>
+  <path d="M106.353 197.46c2.645-1.494 3.853-4.362 2.699-6.406-1.155-2.044-4.235-2.489-6.879-.995-2.645 1.494-3.853 4.361-2.7 6.405 1.155 2.044 4.235 2.49 6.88.996Z" fill="#D8EBE4"/>
+  <path d="M85.861 182.872c1.642-.223 2.866-1.19 2.734-2.158-.132-.969-1.57-1.573-3.211-1.35-1.642.224-2.866 1.19-2.734 2.159.132.969 1.57 1.573 3.211 1.349Z" fill="#000"/>
+  <path d="M92.473 186.916c1.298-.171 2.23-1.215 2.084-2.332-.148-1.117-1.319-1.884-2.616-1.713-1.298.171-2.23 1.215-2.084 2.332.147 1.117 1.318 1.884 2.616 1.713Z" fill="#000"/>
+  <path d="M108.002 183.744c.078-.763-1.137-1.513-2.714-1.674-1.577-.161-2.918.328-2.996 1.091-.078.764 1.137 1.514 2.714 1.675 1.577.161 2.918-.328 2.996-1.092Z" fill="#000"/>
+  <path d="M103.8 195.674c.753-.739.833-1.878.18-2.544-.654-.667-1.794-.608-2.547.13-.753.739-.834 1.878-.18 2.544.653.667 1.793.608 2.547-.13Z" fill="#000"/>
+  <path d="M96.564 199.523c1.152-.265 1.95-1.068 1.783-1.795-.167-.727-1.236-1.101-2.388-.836-1.152.264-1.95 1.068-1.783 1.795.167.726 1.236 1.101 2.388.836Z" fill="#000"/>
+  <path d="M103.16 206.33c.613 0 1.11-.533 1.11-1.19 0-.657-.497-1.19-1.11-1.19-.613 0-1.11.533-1.11 1.19 0 .657.497 1.19 1.11 1.19Z" fill="#000"/>
+  <path d="M87.11 196.43c1.21 0 2.19-.694 2.19-1.55 0-.856-.98-1.55-2.19-1.55s-2.19.694-2.19 1.55c0 .856.98 1.55 2.19 1.55Z" fill="#000"/>
+  <path d="M86.849 200.374c.157-.581-.328-1.218-1.085-1.424-.757-.205-1.498.099-1.656.68-.158.581.328 1.218 1.085 1.424.756.206 1.498-.099 1.656-.68Z" fill="#000"/>
+  <path d="M181.02 231.96c8.31.64 33.44 4.73 42.35 30.63.15.44.05.93-.25 1.28-2.73 3.14-15.51 18.97-8.48 31.87.47.87-.17 1.93-1.16 1.93l-20.38-.07c-.89 0-1.52-.87-1.24-1.71 1.25-3.8 3.03-13.09-6.69-19.13-.53-.33-.76-.98-.55-1.57 1.25-3.37 4.35-14.34-5.61-19.74a1.31 1.31 0 0 1-.48-1.87c1.98-3.04 6.32-11.31 1.29-19.62-.55-.91.15-2.07 1.22-1.99l-.02-.01Z" fill="#A07887"/>
+  <path d="M224.96 262.7c0-.07-.01-.13-.02-.19 0-.05 0-.1-.02-.15-8.46-32.79-46.18-31.18-46.55-31.17-.76.04-1.35.69-1.31 1.45.04.75.67 1.33 1.42 1.31h.03c.09-.01 9.14-.43 19.03 2.99 11.94 4.13 19.91 11.81 23.71 22.84-20.92-11.18-42.47-6.62-43.42-6.41-.75.16-1.22.9-1.05 1.65.16.75.91 1.21 1.65 1.05.22-.05 20.43-4.32 40.02 5.37-21.24 1.32-34.5 11.86-35.09 12.34-.59.48-.69 1.35-.2 1.95.28.35.7.52 1.12.51.29 0 .58-.11.83-.31.14-.12 13.74-10.91 34.93-11.8-4.12 4.53-10.99 15.2-7 33.26.15.66.74 1.1 1.39 1.08a1.372 1.372 0 0 0 1.31-1.68c-4.98-22.53 8-32.5 8.65-32.98.09-.06.16-.14.23-.23.02-.03.06-.05.08-.08.04-.05.06-.11.09-.17.04-.07.08-.14.1-.22 0-.01.01-.03.02-.04.01-.04 0-.09.01-.13.02-.09.03-.17.03-.26l.01.02Z" fill="#806280"/>
+  <path d="M129.99 24.78c-3.66.25-14.48 2.41-23.72 5.02-.7.2-1.29.68-1.62 1.32-.51.99-1.47 2.58-3.04 4.03-2.41-1.61-4.39-3.8-5.65-6.43-.79-1.64-2.41-3.06-4.53-3.74-3.6-1.15-7.28.26-8.2 3.16-.93 2.9 1.24 6.18 4.85 7.33 1.25.4 2.51.49 3.66.32 1.37-.21 2.76-.19 4.1.16 1.1.28 2.07.7 2.94 1.18-.76.39-1.6.71-2.53.94-1.34.34-2.74.35-4.1.14-1.15-.18-2.41-.1-3.66.29-3.61 1.13-5.8 4.4-4.89 7.3.91 2.9 4.57 4.34 8.18 3.21 2.13-.67 3.76-2.07 4.56-3.71 1.19-2.44 3-4.5 5.2-6.06 1.36 1.36 2.21 2.8 2.67 3.72.33.65.91 1.13 1.61 1.33 9.22 2.66 20.03 4.89 23.69 5.16.58.04.77-.75.24-.98-4.48-1.91-16.17-6.86-24.6-11.33 8.48-4.47 20.52-9.48 25.09-11.4.53-.22.34-1.02-.23-.98l-.02.02Zm-41.44 8.77c-2.57-1.12-4.03-3.49-3.24-5.29.78-1.8 3.51-2.35 6.08-1.23 2.57 1.12 4.59 3.8 3.81 5.6-.78 1.8-4.07 2.04-6.65.92Zm6.81 7.69c.71 1.83-1.31 4.83-3.93 5.84-2.62 1.01-5.32.35-6.03-1.48s.84-4.14 3.46-5.15c2.62-1.01 5.79-1.04 6.5.79Z" fill="#806760"/>
+  <path d="M203.53 186.43h-5.66a1.04 1.04 0 0 0-1.04 1.04v.26c0 .574.466 1.04 1.04 1.04h5.66a1.04 1.04 0 0 0 1.04-1.04v-.26a1.04 1.04 0 0 0-1.04-1.04Z" fill="#5D506D"/>
+  <path d="m201.17 200.79-.49-5.14c-.02-.2-.33-.2-.35 0l-.51 5.15c-.08.79-.92 1.34-1.76 1.13-2.6-.65-4.51-2.84-4.51-5.43v-5.93c0-1.48 1.31-2.68 2.92-2.68h8.04c1.61 0 2.92 1.2 2.92 2.68v5.93c0 2.59-1.91 4.78-4.51 5.43-.84.21-1.68-.34-1.76-1.14h.01Z" fill="#5D506D"/>
+  <path d="m192.11 176.1 2.79-.04c.45 0 .62.54.22.74l-3.01 1.56v-2.27.01Z" fill="#5D506D"/>
+  <path d="m192.11 171.69 2.79-.04c.45 0 .62.54.22.74l-3.01 1.56v-2.27.01Z" fill="#5D506D"/>
+  <path d="M197.4 181.16h-2.18v-.65c0-1.09-1.18-1.97-2.65-1.99v-9.17c-1.45 0-2.62.87-2.62 1.94v8.19c0 1.9 1.84 3.48 4.28 3.83v.07h6.17v-.02c0-1.22-1.34-2.21-2.99-2.21l-.01.01Z" fill="#5D506D"/>
+  <path d="m209.04 176.33-2.77-.04c-.45 0-.61.54-.22.74l2.99 1.56v-2.27.01Z" fill="#5D506D"/>
+  <path d="m209.04 171.92-2.77-.04c-.45 0-.61.54-.22.74l2.99 1.56v-2.27.01Z" fill="#5D506D"/>
+  <path d="M208.58 169.59v9.17c-1.47.02-2.65.9-2.65 1.99v.42h-2.18c-1.65 0-2.99.99-2.99 2.21v.02h5.17v.23c2.91 0 5.27-1.75 5.27-3.9v-8.19c0-1.07-1.17-1.94-2.62-1.94v-.01Z" fill="#5D506D"/>
+  <path d="M208.42 181.25c.38-.29.2-.96-.26-.97H193.41c-.46 0-.64.68-.26.97l1.06.81v1.51c0 1.83 1.3 3.32 2.91 3.32h7.31c1.61 0 2.91-1.49 2.91-3.32v-1.51l1.06-.81h.02Z" fill="#5D506D"/>
+  <path d="M213.32 180.56c-.54.89-1.07 1.79-1.61 2.68-.38.64-.77 1.28-1.15 1.91-.09.15-.78 1.04-.73 1.21-.04-.13.54-.12.25-.26-.11-.05-.48.07-.6.09l-2.03.29-3.36.48c-.93.13-.53 1.54.39 1.41 1.17-.17 2.34-.33 3.51-.5.87-.12 2.44-.02 3.08-.71.69-.75 1.16-1.93 1.68-2.8.61-1.02 1.22-2.04 1.83-3.05.49-.81-.78-1.55-1.26-.74v-.01Z" fill="#5D506D"/>
+  <path d="M186.37 181c.63 1.14 1.26 2.29 1.89 3.43.42.76.92 2.4 1.79 2.77 1.07.45 2.65.41 3.79.58 1.27.2 2.54.39 3.81.59.92.14 1.32-1.27.39-1.41-1.13-.17-2.25-.35-3.38-.52-.82-.13-1.64-.25-2.47-.38-.23-.04-1.46-.4-1.65-.25-.15.11.26.26.27.23.02-.1-.24-.44-.29-.52l-1.07-1.94c-.61-1.1-1.21-2.2-1.82-3.3-.45-.83-1.72-.09-1.26.74V181Z" fill="#5D506D"/>
+  <path d="M216.05 195.79c-1.17-1.95-2.34-3.91-3.51-5.86a.76.76 0 0 0-.83-.34c-1.76.49-3.51.98-5.27 1.46-.91.25-.52 1.67.39 1.41 1.76-.49 3.51-.98 5.27-1.46l-.83-.34c1.17 1.95 2.34 3.91 3.51 5.86.48.81 1.75.07 1.26-.74l.01.01Z" fill="#5D506D"/>
+  <path d="M214.07 204.16c-1.17-3.03-2.34-6.05-3.51-9.08-.12-.31-.36-.54-.71-.54h-3.08c-.94 0-.94 1.46 0 1.46h3.08l-.71-.54c1.17 3.03 2.34 6.05 3.51 9.08.34.87 1.75.49 1.41-.39l.01.01Z" fill="#5D506D"/>
+  <path d="M186.76 196.53c1.17-1.95 2.34-3.91 3.51-5.86l-.83.34c1.76.49 3.51.98 5.27 1.46.91.25 1.3-1.16.39-1.41-1.76-.49-3.51-.98-5.27-1.46a.747.747 0 0 0-.83.34c-1.17 1.95-2.34 3.91-3.51 5.86-.49.81.78 1.55 1.26.74l.01-.01Z" fill="#5D506D"/>
+  <path d="M188.88 204.55c1.17-3.03 2.34-6.05 3.51-9.08l-.71.54h3.08c.94 0 .94-1.46 0-1.46h-3.08c-.35 0-.59.23-.71.54-1.17 3.03-2.34 6.05-3.51 9.08-.34.88 1.07 1.26 1.41.39l.01-.01Z" fill="#5D506D"/>
+  <path d="M230.7 208.6h-59.76c-.41 0-.75-.33-.76-.74l-.3-13.11c.08-15.65 11.87-28.85 27.44-30.73.41-.05.75-.3.93-.65-2.01-.64-3.27-1.92-3.27-3.39 0-2.9 4.59-2.9 6.1-2.9 1.51 0 6.1 0 6.1 2.9 0 1.44-1.23 2.71-3.19 3.36.17.36.52.63.94.68 15.57 1.88 27.36 15.08 27.44 30.71v.06l-.91 13.11c-.03.4-.36.71-.76.71v-.01Zm-59.01-1.52h58.3l.86-12.37c-.09-14.85-11.3-27.39-26.1-29.18a2.735 2.735 0 0 1-2.4-2.72v-.02c0-.35.24-.66.59-.74 1.6-.38 2.72-1.23 2.72-2.08 0-1.19-2.87-1.37-4.57-1.37-1.7 0-4.57.18-4.57 1.37 0 .87 1.15 1.73 2.81 2.1.35.08.6.39.6.74 0 1.38-1.03 2.55-2.4 2.72-14.81 1.79-26.03 14.34-26.1 29.2l.29 12.34-.03.01Z" fill="#D8EBE4"/>
+  <path d="M232.26 206.77h-63.28a2.517 2.517 0 0 0-2.52 2.515 2.517 2.517 0 0 0 2.52 2.515h63.28a2.517 2.517 0 0 0 2.52-2.515 2.517 2.517 0 0 0-2.52-2.515Z" fill="#806760"/>
+  <path d="M91.35 248.47h-8.83c-.92 0-1.57.88-1.34 1.77 2.07 7.94-6.1 11.05-9.13 11.91-.63.18-1.05.78-1.01 1.44l2.31 32.9c.05.73.66 1.3 1.39 1.3h24.38c.73 0 1.34-.57 1.39-1.3l2.31-32.9c.05-.66-.37-1.26-1.01-1.44-3.03-.87-11.19-3.98-9.13-11.91.23-.89-.42-1.77-1.34-1.77h.01Z" fill="#D1CFAC"/>
+  <path d="M88.97 251.57H84.9c-.73 0-1.35-.52-1.49-1.23l-1.23-5.64c-.18-.94.54-1.82 1.49-1.82h6.53c.96 0 1.68.88 1.49 1.82l-1.23 5.64a1.53 1.53 0 0 1-1.49 1.23Z" fill="#A87E42"/>
+  <path d="M99.49 276.54c0 2.13-.47 5.58-.83 7.92a2.924 2.924 0 0 1-2.89 2.47h-18.4c-1.47 0-2.71-1.09-2.9-2.54-.21-1.61-.41-4.1-.41-7.85 0-8.14 5.69-14.73 12.72-14.73s12.72 6.6 12.72 14.73h-.01Z" fill="#A87E42"/>
+  <path d="M247.05 49.8c-3.87-8.52-11.25-7.38-11.57-7.32a.492.492 0 0 1-.44-.16.594.594 0 0 1-.13-.48c.37-2.22.07-4.07-.89-5.51-1.64-2.46-4.69-2.94-4.72-2.95a.526.526 0 0 1-.43-.55c.09-7.17-6.91-7.63-7.21-7.65a.48.48 0 0 1-.37-.2.548.548 0 0 1-.1-.43c.83-5.58-6.62-10.49-6.69-10.54a.559.559 0 0 1-.22-.63.53.53 0 0 1 .5-.41l33.21-.07c.28 0 .51.25.5.55l-.46 36.09a.552.552 0 0 1-.52.56c-.19 0-.37-.11-.45-.3h-.01Zm-30.62-35.72c2.19 1.76 6.13 5.57 5.83 10.05 1.79.27 7.46 1.64 7.63 8.23.99.23 3.45 1.02 4.96 3.3 1.02 1.53 1.41 3.43 1.16 5.66 1.9-.09 7.41.21 11.01 6.17l.43-33.47-31.02.06Z" fill="#fff"/>
+  <path d="M221.58 25.18c.06 0 .12-.01.18-.04l26.38-11.06c.27-.11.4-.43.3-.72-.1-.29-.39-.43-.66-.32L221.4 24.1c-.27.11-.4.43-.3.72.08.22.27.36.47.36h.01Z" fill="#fff"/>
+  <path d="M229.27 32.94c.13 0 .25-.05.35-.15l18.69-18.81c.21-.21.23-.56.04-.79a.483.483 0 0 0-.72-.02l-18.69 18.81c-.21.21-.23.56-.04.79.1.12.24.18.37.18v-.01Z" fill="#fff"/>
+  <path d="M235.3 42.48c.19 0 .38-.12.47-.32l12.66-28.36c.12-.28.02-.61-.24-.74-.25-.13-.56 0-.69.27l-12.66 28.36c-.12.28-.02.61.24.74.07.04.14.05.22.05Z" fill="#fff"/>
+  <path d="M247.66 28.52c.12 0 .24-.04.34-.13.22-.2.25-.55.08-.78-1.99-2.64-4.62-2.15-5.75-1.77-.73-2.26-2.64-2.73-3.99-2.65.12-1.67-.21-2.92-.98-3.73-.68-.71-1.54-.9-2.17-.94.34-1.07.35-2.07 0-2.96-.71-1.86-2.65-2.55-2.74-2.57-.27-.09-.56.07-.65.37-.09.29.06.6.32.7.02 0 1.59.57 2.11 1.96.3.81.2 1.77-.31 2.86-.09.19-.07.41.04.58.11.17.31.25.5.21.01 0 1.34-.25 2.16.61.63.66.83 1.84.6 3.49-.02.18.03.36.15.48s.29.17.46.13c.12-.03 3.02-.68 3.63 2.31.03.16.13.3.27.37s.3.07.44 0c.12-.06 3-1.5 5.09 1.26.1.13.24.2.38.2h.02Z" fill="#fff"/>
+  <path d="M247.85 38.85c.06 0 .12-.01.17-.03.27-.11.41-.43.32-.71-1.79-5.59-6.88-5.67-8.68-5.51.03-1.51-.36-2.74-1.16-3.67-1.26-1.47-3.18-1.74-4.03-1.78-.61-2.81-1.65-4.68-3.1-5.55-.81-.49-1.57-.56-2.11-.52.46-6.95-4.54-7.69-4.6-7.7-.28-.04-.54.18-.58.49-.04.31.16.58.44.62.19.03 4.4.7 3.66 7.2-.02.19.05.38.18.5.14.12.32.15.49.09.04-.01.97-.34 2.03.32 1.23.76 2.16 2.57 2.67 5.24.05.26.26.44.51.43.02 0 2.38-.08 3.69 1.45.71.83.99 1.99.85 3.48-.02.17.04.34.16.46s.28.17.44.13c.25-.05 6.28-1.19 8.18 4.72.07.23.27.37.48.36l-.01-.02Z" fill="#fff"/>
+  <path d="M146.11 209.34c-3.29 2.71-8.12 2.7-11.4-.02a3.526 3.526 0 0 1-1.1-3.75c1.08-3.54 3.25-11.45 3.25-17.81H144c0 6.8 2.12 14.36 3.21 17.8.43 1.37.01 2.87-1.09 3.78h-.01Z" fill="#D1CFAC"/>
+  <path d="M155.68 190.51c2.42 0 4.11-2.47 3.17-4.7-2.56-6.05-9.8-10.41-18.35-10.41s-15.7 4.31-18.3 10.3c-.98 2.27.65 4.8 3.13 4.8h30.35v.01Z" fill="#C15656"/>
+  <g clip-path="url(#toad-hat)">
+    <path d="M129.78 184.32c2.971 0 5.38-2.252 5.38-5.03 0-2.778-2.409-5.03-5.38-5.03s-5.38 2.252-5.38 5.03c0 2.778 2.409 5.03 5.38 5.03Z" fill="#DEF1E5"/>
+    <path d="M151.52 194.62c2.971 0 5.38-2.458 5.38-5.49s-2.409-5.49-5.38-5.49-5.38 2.458-5.38 5.49 2.409 5.49 5.38 5.49Z" fill="#DEF1E5"/>
+    <path d="M147.17 180.51c2.336 0 4.23-1.773 4.23-3.96 0-2.187-1.894-3.96-4.23-3.96-2.336 0-4.23 1.773-4.23 3.96 0 2.187 1.894 3.96 4.23 3.96Z" fill="#DEF1E5"/>
+    <path d="M135.62 194.62c3.667 0 6.64-2.252 6.64-5.03 0-2.778-2.973-5.03-6.64-5.03s-6.64 2.252-6.64 5.03c0 2.778 2.973 5.03 6.64 5.03Z" fill="#DEF1E5"/>
+    <path d="M141 184.32a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" fill="#DEF1E5"/>
+  </g>
+  <path d="m110.31 126.34 3.63 4.15c.79.91 1.13 2.18.89 3.4l-.37 1.88c-.24 1.21-1.23 2.08-2.37 2.08H77.53c-1.07 0-2.01-.76-2.32-1.87l-.54-1.95c-.41-1.47.02-3.05 1.09-4.05l4.58-4.27 19.02-3.73 10.95 4.36Z" fill="#806760"/>
+  <path d="m82.82 102.6-7.3-3.32c-1.43-.65-3.05.27-3.37 1.92l-1.8 9.5c-.12.65-.02 1.33.3 1.9l10.52 18.84c.45.8 1.4 1.09 2.17.65l2.95-1.68c.68-.38 1.51-.21 2.01.41l2.06 2.56c.49.61 1.3.79 1.98.42l3.43-1.85c.92-.5 2.03.03 2.31 1.1.3 1.15 1.54 1.65 2.47 1l2.12-1.48a1.53 1.53 0 0 1 1.82.03l2.34 1.73c.75.56 1.79.35 2.3-.48l1.96-3.17 6.47-16.71c.1-.26.12-.55.05-.82l-3.34-12.62c-.25-.95-1.38-1.22-1.98-.48l-8.4 10.41 1.32-14.23c.08-.84-.2-1.68-.75-2.28l-7.02-7.58c-1.04-1.13-2.74-1.1-3.76.06l-6.83 7.83c-.52.6-.78 1.42-.7 2.24l1.6 16.13-3.64-8.7c-.26-.61-.72-1.1-1.29-1.36v.03Z" fill="#C87D59"/>
+  <path d="M79.39 110.16 71.9 96.78l12.29 2.52c1.88.39 2.6 2.89 1.24 4.35l-6.03 6.52-.01-.01Z" fill="#CF8A77"/>
+  <path d="m98.41 98.34-4.47-15.86L107.8 89c2.12 1 2.34 4.15.39 5.49l-9.77 3.85h-.01Z" fill="#CF8A77"/>
+  <path d="m109.92 116.69 3.32-18.56 9.13 13.01c1.4 1.99.16 4.86-2.15 4.99l-10.3.57v-.01Z" fill="#CF8A77"/>
+  <path d="m92.36 134.43-10.72 1.27-12.34-23.67 10.09-1.87 12.97 24.27Z" fill="#CF8A77"/>
+  <path d="m84.29 93.67 14.12 4.67-.32 34.73-9.48-14.51-4.32-24.89Z" fill="#CF8A77"/>
+  <path d="m103.88 110.47-.57 19.92 7.2-14.01-6.63-5.91Z" fill="#CF8A77"/>
+  <path d="M193.64 20.56c-3.21-.83-6.8.55-6.8 2.64v12.35h-4.4V24.41c0-.81-.66-1.47-1.47-1.47-.81 0-1.47.66-1.47 1.47v11.14h-3.52V20.9c0-.81-.66-1.47-1.47-1.47-.81 0-1.47.66-1.47 1.47v14.65h-2.34v-8.79c0-.81-.66-1.47-1.47-1.47-.81 0-1.47.66-1.47 1.47v8.79h-5.26c-.42-2.19-1.31-5.98-2.84-8.54-2.25-3.79-5.27-6.23-7.53-4.55-2.25 1.68-1.16 5.51 1.65 8.77 1.89 2.19 5.3 4.17 7.34 5.23-.07.17-.11.35-.11.54 0 .33.11.63.29.87-2.01 1.04-5.58 3.07-7.53 5.33-2.81 3.26-3.9 7.09-1.65 8.77 2.25 1.68 5.28-.76 7.53-4.55 1.63-2.73 2.54-6.87 2.92-8.96h5.18v7.62c0 .81.66 1.47 1.47 1.47.81 0 1.47-.66 1.47-1.47v-7.62h2.34v13.48c0 .81.66 1.47 1.47 1.47.81 0 1.47-.66 1.47-1.47V38.46h3.52v10.55c0 .81.66 1.47 1.47 1.47.81 0 1.47-.66 1.47-1.47V38.46h4.4v10.37c0 2.05 3.49 3.48 6.65 2.68 2.79-.7 5.32-1.83 7.47-3.27.84-.56.96-1.75.24-2.46-.8-.78-1.89-1.8-3.09-2.76-.71-.57-.04-1.7.8-1.33 1.91.83 3.94 1.53 5.22 1.95.8.26 1.67-.06 2.11-.77 1.28-2.09 1.99-4.41 1.99-6.87 0-7.18-6.1-13.27-14.59-15.47l.01.03Zm2.43 17.34c-2.18 0-3.96-2.56-3.96-5.71s1.77-5.71 3.96-5.71 3.96 2.56 3.96 5.71-1.77 5.71-3.96 5.71Z" fill="#D8EBE4"/>
+  <path d="M126.79 232.54h-7.7c-.8 0-1.38.75-1.18 1.52.78 2.97-.56 6.56-2.36 9.71-3.72 6.51-5.44 13.98-5.26 21.48l.69 28.28a4.45 4.45 0 0 0 4.45 4.34h15.02c2.41 0 4.39-1.93 4.45-4.34l.69-28.28c.18-7.5-1.54-14.96-5.26-21.48-1.8-3.15-3.14-6.75-2.36-9.71.2-.77-.38-1.52-1.18-1.52Z" fill="#D1CFAC"/>
+  <path d="M124.71 236.63h-3.55c-.64 0-1.18-.45-1.3-1.07l-1.07-4.92c-.16-.82.47-1.58 1.3-1.58h5.7c.84 0 1.46.76 1.3 1.58l-1.07 4.92c-.12.62-.67 1.07-1.3 1.07h-.01Z" fill="#806760"/>
+  <path d="M132.93 265.51c0 2.45-.37 16.77-.65 19.46-.17 1.64-1.14 2.85-2.27 2.85h-14.46c-1.15 0-2.13-1.25-2.28-2.93-.17-1.85-.32-15.07-.32-19.38 0-9.38 4.82-13.53 9.99-13.53s9.99 4.15 9.99 13.53Z" fill="#806760"/>
+  <defs>
+    <clipPath id="toad-hat">
+      <path d="M155.68 190.51c2.42 0 4.11-2.47 3.17-4.7-2.56-6.05-9.8-10.41-18.35-10.41s-15.7 4.31-18.3 10.3c-.98 2.27.65 4.8 3.13 4.8h30.35v.01Z" fill="#C15656"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back--dark.89ee8c43.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back--dark.89ee8c43.svg
new file mode 100644
index 00000000000..94f4f2b8714
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back--dark.89ee8c43.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 360 504" style="enable-background:new 0 0 360 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#362D3D;}
+	.st1{fill:#C68D47;}
+</style>
+<rect x="-12" y="-7" class="st0" width="377.5" height="511.8"/>
+<path class="st1" d="M12.9,29l0.4,445.6c0,6.6,5.4,12,12,12l311.4,0.2c6.6,0,12-5.4,12-12V28.6c0-6.6-5.4-12-12-12L24.9,17
+	C18.3,17,12.9,22.4,12.9,29L12.9,29z M278.3,23.4c0,10.1,7.4,13.7,12.7,13.3l28.5-2.6l-5.1,7.6c-2.1,2.9-4.8,9.2,0.6,13.7
+	c5.5,4.4,11.7,1,14.1-1.6l2.5-2.4l-3,24.5c-0.4,5.3,3.2,12.8,13.3,12.8c0.4,0,0.9,0,1.3-0.1v326.5c-0.2,0-0.4,0-0.6,0
+	c-10.1,0-13.7,7.4-13.3,12.7l2.6,28.5l-7.6-5.1c-2.9-2.1-9.2-4.8-13.6,0.6c-4.4,5.5-1,11.7,1.6,14.1l2.4,2.5l-24.5-3
+	c-5.3-0.4-12.8,3.2-12.8,13.3c0,0.4-193.5,1.5-193.5,1.5c-0.1-10-7.4-13.5-12.7-13.2l-28.5,2.6l5.1-7.6c2.1-2.9,4.8-9.2-0.6-13.6
+	c-5.5-4.4-11.7-1-14.1,1.6l-2.5,2.4l3-24.5c0.4-5.3-3.2-12.8-13.3-12.8c-0.4,0-1.4-327.8-1.4-327.8c0.2,0,0.3,0,0.5,0
+	c10.1,0,13.7-7.4,13.3-12.7L30,46.3l7.6,5.1c2.9,2.1,9.2,4.8,13.7-0.6c4.4-5.5,1-11.7-1.6-14.1l-2.4-2.5l24.5,3
+	c5.3,0.4,12.8-3.2,12.8-13.3C84.6,23.4,278.3,23.4,278.3,23.4L278.3,23.4z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back.1c723e9c.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back.1c723e9c.svg
new file mode 100644
index 00000000000..80c8e963e2b
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_back.1c723e9c.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 504"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clippath);}.cls-3{fill:#fff;}.cls-4{fill:#7eab98;}.cls-5{fill:#9f7149;}.cls-6{fill:#944a2b;}.cls-7{fill:#8f652d;}.cls-8{fill:#a87b3a;}.cls-9{fill:#b09593;}.cls-10{fill:#ca9b89;}.cls-11{fill:#d0984f;}.cls-12{fill:#53945f;}.cls-13{fill:#634e5a;}.cls-14{fill:#3d373a;}.cls-15{fill:#47394f;}.cls-16{fill:#774130;}.cls-17{clip-path:url(#clippath-1);}.cls-18{clip-path:url(#clippath-4);}.cls-19{clip-path:url(#clippath-3);}.cls-20{clip-path:url(#clippath-2);}</style><clipPath id="clippath"><rect class="cls-1" x="388.43" y="547.3" width="559.27" height="509.05" transform="translate(1336.13 1603.65) rotate(-180)"/></clipPath><clipPath id="clippath-1"><path class="cls-1" d="M306.39,405.2c11.3-9.23,26.82-9,35.13,.34,.59-1.28,1.34-2.5,2.26-3.62,7.38-9.04,22.73-8.71,34.29,.72,11.56,9.44,14.95,24.42,7.57,33.45-7.38,9.04-22.73,8.71-34.29-.72-2.46-2.01-4.54-4.27-6.24-6.67-1.75,4.68-4.85,9.12-9.19,12.66-11.56,9.44-27.54,8.99-35.69-.99-8.15-9.99-5.39-25.73,6.16-35.17Z"/></clipPath><clipPath id="clippath-2"><rect class="cls-1" x="-93.93" y="545.97" width="446.76" height="502.08"/></clipPath><clipPath id="clippath-3"><path class="cls-1" d="M136.56,501.65h.19c20.23,0,36.66,16.43,36.66,36.66v22.97c0,4.71-3.82,8.53-8.53,8.53h-56.45c-4.71,0-8.53-3.82-8.53-8.53v-22.97c0-20.23,16.43-36.66,36.66-36.66Z"/></clipPath><clipPath id="clippath-4"><path class="cls-1" d="M136.56,501.65h.19c20.23,0,36.66,16.43,36.66,36.66v22.97c0,4.71-3.82,8.53-8.53,8.53h-56.45c-4.71,0-8.53-3.82-8.53-8.53v-22.97c0-20.23,16.43-36.66,36.66-36.66Z"/></clipPath></defs><g class="cls-2"><path class="cls-15" d="M331.01,1012.92c14.77,1.52,29.96-1.52,39.69-13.34,.17-.19,.34-.38,.5-.57,20.15-70.14,14.36-465.07,14.36-465.07,1.24-52.7,44.31-94.78,97.03-94.78h0c51.92,0,94.64,40.86,96.96,92.73l19.56,438.84,.39,.03s-1.44,15.97,9.14,28.25c.17,.19,.33,.38,.5,.57,9.73,11.82,24.92,14.86,39.69,13.34,.25,0,.5,0,.75,0,48.5,.15,83.99,27.72,83.99,65.7h-26.55c-9.95,0-19.7-2.54-28.51-7.17l-.1-.05c-9.42-4.91-21.04-7.05-31.36-4.01-4.48,1.32-8.59,3.39-12.59,5.69-6.4,3.68-13.68,5.54-21.06,5.54h0c-.35,0-.71,0-1.06,0-8.29,1.14-17.02,.38-25.41,0h-1.05c-13.67,0-27.87,0-41.84,0,0,0-98.69,.43-145.17,.56-12.46,.04-24.69-3.63-34.9-10.76-6.09-4.24-14.01-8.03-22.36-8.03-10.55,0-17.22,4.51-22.05,9.57-5.24,5.5-12.48,8.66-20.08,8.66h-49.03c22.03-67.61,80.31-65.7,80.56-65.7Z"/><path class="cls-4" d="M25.51,393.96l-.59-.56,2.56,.02c2.49-.65,5.05-1.19,7.66-1.58,10.38-1.56,20.58-.83,30.08,1.83l810.18,5.33c5.55-1.23,11.42-1.87,17.5-1.83,33.56,.25,60.61,21.29,60.42,46.98-.19,25.07-26.24,45.31-58.67,46.04,1.46,4.59,2.58,9.35,3.32,14.26,7.46,49.57-26.19,95.74-75.15,103.1-11.96,1.8-23.73,1.11-34.8-1.67,.69,2.44,1.24,4.94,1.64,7.5,5.52,34.87-17.93,67.56-52.38,73-12.16,1.92-24.05,.19-34.61-4.38-7.76,18.85-30.78,32.52-57.97,32.52-26.84,0-49.61-13.32-57.66-31.79-10.7,18.74-31.22,31.42-54.78,31.42-25.06,0-46.68-14.34-56.7-35.06-9.56,10.33-23.4,16.83-38.8,16.83-10.21,0-19.73-2.86-27.77-7.79-5.91,20.95-30.26,36.65-59.39,36.65-33.56,0-60.77-20.83-60.77-46.53,0-.72,.02-1.44,.07-2.16-25.72,15.85-54.89,15.6-67.45-1.49-3.55-4.83-5.41-10.52-5.76-16.65-9.11,5.52-19.84,8.71-31.31,8.71-33.12,0-59.97-26.52-59.97-59.23,0-9.77,2.39-18.98,6.63-27.1-3.84,.61-7.78,.92-11.8,.89-30.7-.23-56.66-19.84-66.09-46.98-38,3.92-72.72-22.63-78.45-60.72-5.4-35.92,16.86-69.63,50.84-79.58Z"/><g><ellipse cx="341.59" cy="420.93" rx="60.32" ry="83.17"/><rect class="cls-16" x="309.15" y="408.6" width="74.48" height="95.51" rx="31.78" ry="31.78" transform="translate(692.78 912.7) rotate(-180)"/><g><g><path class="cls-5" d="M306.85,459.11s39.22-5.22,36.6-32.51c2.58,26.84,38.23,25.31,38.23,25.31,12.24-1.18,21.22-12.06,20.04-24.3h0c-2.79-28.97-28.53-50.19-57.49-47.4l-14.28,1.37c-28.97,2.79-50.19,28.53-47.4,57.49h0c1.18,12.24,12.06,21.22,24.3,20.04Z"/><path class="cls-10" d="M363.99,379.81l-24.22,18.74-32.9-12.79s28.33-21.02,57.12-5.94Z"/><path class="cls-5" d="M338.45,411.15c-3.39-3.18-3.66-8.47-.62-11.98l27.7-31.97s5.61-6.91,11.47-1.77c5.86,5.13-.53,11.61-.53,11.61l-1.17,1.32c1.73-.3,3.77,.04,5.39,2.32,3.54,4.98-2.51,8.76-2.51,8.76l-28.5,22.21c-3.36,2.62-8.13,2.4-11.24-.51h0Z"/><path class="cls-5" d="M342.18,411.15c3.39-3.18,3.66-8.47,.62-11.98l-27.7-31.97s-5.61-6.91-11.47-1.77c-5.86,5.13,.53,11.61,.53,11.61l1.17,1.32c-1.73-.3-3.77,.04-5.39,2.32-3.54,4.98,2.51,8.76,2.51,8.76l28.5,22.21c3.36,2.62,8.13,2.4,11.24-.51h0Z"/></g><g><path d="M347.59,396.36c.33,0,.66-.12,.93-.36,10.46-9.43,21.54-5.54,22.01-5.37,.72,.26,1.51-.11,1.77-.82s-.1-1.51-.82-1.77c-.53-.2-13.07-4.67-24.81,5.91-.57,.51-.61,1.39-.1,1.95,.27,.3,.65,.46,1.03,.46Z"/><path d="M308.52,398.33c.27,0,.55-.08,.79-.25,9.95-6.89,20.47-1.71,20.58-1.66,.68,.34,1.51,.07,1.86-.61s.07-1.51-.61-1.86c-.49-.25-12.11-5.97-23.4,1.85-.63,.44-.79,1.3-.35,1.92,.27,.39,.7,.6,1.14,.6Z"/><g><path class="cls-3" d="M306.39,405.2c11.3-9.23,26.82-9,35.13,.34,.59-1.28,1.34-2.5,2.26-3.62,7.38-9.04,22.73-8.71,34.29,.72,11.56,9.44,14.95,24.42,7.57,33.45-7.38,9.04-22.73,8.71-34.29-.72-2.46-2.01-4.54-4.27-6.24-6.67-1.75,4.68-4.85,9.12-9.19,12.66-11.56,9.44-27.54,8.99-35.69-.99-8.15-9.99-5.39-25.73,6.16-35.17Z"/><g class="cls-17"><ellipse cx="328.67" cy="425.19" rx="13.7" ry="10.78" transform="translate(-191.6 559.83) rotate(-66.81)"/><ellipse cx="363.39" cy="421.84" rx="10.31" ry="13.7" transform="translate(-178.43 293.63) rotate(-35.94)"/><path class="cls-12" d="M304.44,361.45h39.84v31.12h-58.78v-12.18c0-10.45,8.49-18.94,18.94-18.94Z" transform="translate(629.78 754.01) rotate(-180)"/><path class="cls-12" d="M326.13,358.85h58.78v31.12h-39.84c-10.45,0-18.94-8.49-18.94-18.94v-12.18h0Z" transform="translate(-19.55 19.59) rotate(-3.07)"/></g></g><path d="M346.45,424.1c14.11,4.67,22.31,25.38,7.18,43.72-.88,1.06-2.57,.76-3.03-.54-3.23-9.04-21.11-13.18-20.25-22.36,.07-.73,.59-1.33,1.28-1.53,2.95-.84,10.8-5.55,12.52-17.8,.16-1.11,1.25-1.83,2.3-1.48Z"/></g></g><path class="cls-6" d="M283.38,443.67s46.66,5.36,52.19,60.15c0,0-42.64-3.81-52.19-60.15Z"/><path d="M341.59,337.77c33.31,0,60.32,37.24,60.32,83.17,0,45.93-27.01,83.17-60.32,83.17-33.31,0-60.32-37.24-60.32-83.17,0-45.93,27.01-83.17,60.32-83.17m0-6.4c-9.29,0-18.27,2.49-26.7,7.41-7.96,4.64-15.06,11.23-21.13,19.59-12.18,16.79-18.89,39.01-18.89,62.56,0,23.55,6.71,45.77,18.89,62.56,6.06,8.36,13.17,14.95,21.13,19.59,8.43,4.91,17.41,7.41,26.7,7.41,9.29,0,18.27-2.49,26.7-7.41,7.96-4.64,15.06-11.23,21.13-19.59,12.18-16.79,18.89-39.01,18.89-62.56,0-23.55-6.71-45.77-18.89-62.56-6.06-8.36-13.17-14.95-21.13-19.59-8.43-4.91-17.41-7.41-26.7-7.41h0Z"/></g></g><rect class="cls-15" x="-363.83" y="-7.94" width="368.66" height="513.77"/><g class="cls-20"><g><path class="cls-14" d="M227.3,676.8H52v-134.87c0-9.48,4.02-18.52,11.07-24.86l50.67-45.65c12.23-11.02,30.66-11.5,43.45-1.15l57.71,46.72c7.85,6.35,12.41,15.91,12.41,26.01v133.8Z"/><path class="cls-9" d="M136.62,502.33h.08c20.21,0,36.62,16.41,36.62,36.62v22.37c0,4.7-3.82,8.52-8.52,8.52h-56.28c-4.7,0-8.52-3.82-8.52-8.52v-22.37c0-20.21,16.41-36.62,36.62-36.62Z"/><path class="cls-13" d="M38.83,545.33c-3.07,0-6.12-1.31-8.25-3.85-3.81-4.55-3.21-11.34,1.34-15.15l99.21-83.08c3.88-3.25,9.5-3.35,13.5-.25l104.32,80.93c4.69,3.64,5.55,10.4,1.91,15.09-3.64,4.69-10.4,5.55-15.09,1.91l-97.47-75.62-92.57,77.52c-2.01,1.69-4.46,2.51-6.9,2.51Z"/><g class="cls-19"><path class="cls-7" d="M112.54,529.81c0,10.22-4.09,16.26-8.57,19.02-2.75,1.7-5.93-.95-5.93-4.89v-46.89c5.92,0,14.5,17.96,14.5,32.76Z"/><path class="cls-7" d="M160.37,529.81c0,10.22,4.09,16.26,8.57,19.02,2.75,1.7,5.93-.95,5.93-4.89v-46.89c-5.92,0-14.5,17.96-14.5,32.76Z"/><path class="cls-8" d="M182.58,526.16c.38,2.63-2.07,4.78-4.64,4.08-3.17-.86-7.03-1.74-9.59-1.74-5.02,0-10.03,3.39-15.05,3.39s-10.03-3.39-15.05-3.39c-5.02,0-10.03,3.39-15.05,3.39s-10.03-3.39-15.05-3.39c-2.48,0-6.2,.83-9.31,1.67-2.64,.71-5.1-1.59-4.59-4.26,1.5-7.77,4.09-21.11,5.46-27.7,.46-2.22,2.26-3.94,4.51-4.26,6.08-.86,15.48,0,19.46,0,4.93,0,9.86,3.39,14.78,3.39s9.86-3.39,14.78-3.39c3.96,0,14.23-.89,20.67-.01,2.33,.32,4.16,2.15,4.54,4.47,1.08,6.74,3.02,20.11,4.12,27.76Z"/></g><g class="cls-18"><path class="cls-7" d="M112.54,529.81c0,10.22-4.09,16.26-8.57,19.02-2.75,1.7-5.93-.95-5.93-4.89v-46.89c5.92,0,14.5,17.96,14.5,32.76Z"/><path class="cls-7" d="M160.37,529.81c0,10.22,4.09,16.26,8.57,19.02,2.75,1.7,5.93-.95,5.93-4.89v-46.89c-5.92,0-14.5,17.96-14.5,32.76Z"/><path class="cls-8" d="M182.58,526.16c.38,2.63-2.07,4.78-4.64,4.08-3.17-.86-7.03-1.74-9.59-1.74-5.02,0-10.03,3.39-15.05,3.39s-10.03-3.39-15.05-3.39c-5.02,0-10.03,3.39-15.05,3.39s-10.03-3.39-15.05-3.39c-2.48,0-6.2,.83-9.31,1.67-2.64,.71-5.1-1.59-4.59-4.26,1.5-7.77,4.09-21.11,5.46-27.7,.46-2.22,2.26-3.94,4.51-4.26,6.08-.86,15.48,0,19.46,0,4.93,0,9.86,3.39,14.78,3.39s9.86-3.39,14.78-3.39c3.96,0,14.23-.89,20.67-.01,2.33,.32,4.16,2.15,4.54,4.47,1.08,6.74,3.02,20.11,4.12,27.76Z"/></g><rect class="cls-14" x="133.25" y="499.02" width="6.62" height="78.68"/></g></g><rect class="cls-15" x="-1.81" y="-7" width="367.27" height="511.84"/><path class="cls-11" d="M12.92,29.02l.39,445.56c0,6.63,5.38,12,12,12l311.38,.19c6.64,0,12.02-5.38,12.02-12.01V28.62c0-6.64-5.39-12.02-12.03-12.01l-311.77,.38c-6.63,0-12,5.39-12,12.02Zm265.42-5.6c0,10.13,7.42,13.66,12.67,13.34l28.54-2.61-5.1,7.6c-2.06,2.88-4.82,9.21,.64,13.65,5.46,4.43,11.66,.97,14.09-1.56l2.48-2.39-2.99,24.48c-.43,5.3,3.2,12.8,13.33,12.8,.44,0,.85-.03,1.26-.06V415.18c-.22,0-.42-.03-.65-.03-10.13,0-13.66,7.42-13.34,12.67l2.61,28.54-7.6-5.1c-2.88-2.06-9.21-4.82-13.65,.64-4.43,5.46-.97,11.66,1.56,14.09l2.39,2.48-24.48-2.99c-5.3-.43-12.8,3.2-12.8,13.33,0,.44-193.52,1.54-193.52,1.54-.08-10.01-7.44-13.5-12.66-13.19l-28.54,2.61,5.1-7.6c2.06-2.88,4.82-9.21-.64-13.65-5.46-4.43-11.66-.97-14.09,1.56l-2.48,2.39,2.99-24.48c.43-5.3-3.2-12.8-13.33-12.8-.44,0-1.36-327.75-1.36-327.75,.17,0,.33,.02,.5,.02,10.13,0,13.66-7.42,13.34-12.67l-2.61-28.54,7.6,5.1c2.88,2.06,9.21,4.82,13.65-.64,4.43-5.46,.97-11.66-1.56-14.09l-2.39-2.48,24.48,2.99c5.3,.43,12.8-3.2,12.8-13.33,0-.44,193.76-.41,193.76-.41Z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover--dark.7266b69c.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover--dark.7266b69c.svg
new file mode 100644
index 00000000000..6e60a98a83f
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover--dark.7266b69c.svg
@@ -0,0 +1,583 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 360 504" style="enable-background:new 0 0 360 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000179619779359741343720000010782550604806440631_);}
+	.st1{fill:#7EAB98;}
+	.st2{fill:#362D3D;}
+	.st3{fill:#4F4051;}
+	.st4{fill:#C68D47;}
+	.st5{enable-background:new    ;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="748.4" y="547.3" width="559.3" height="509"/>
+	</defs>
+	<clipPath id="SVGID_00000008829290860409558350000000879331521212538040_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000008829290860409558350000000879331521212538040_);">
+		<path class="st1" d="M385.5,394l-0.6-0.6l2.6,0c2.5-0.6,5-1.2,7.7-1.6c10.4-1.6,20.6-0.8,30.1,1.8l810.2,5.3
+			c5.6-1.2,11.4-1.9,17.5-1.8c33.6,0.2,60.6,21.3,60.4,47c-0.2,25.1-26.2,45.3-58.7,46c1.5,4.6,2.6,9.4,3.3,14.3
+			c7.5,49.6-26.2,95.7-75.2,103.1c-12,1.8-23.7,1.1-34.8-1.7c0.7,2.4,1.2,4.9,1.6,7.5c5.5,34.9-17.9,67.6-52.4,73
+			c-12.2,1.9-24.1,0.2-34.6-4.4c-7.8,18.8-30.8,32.5-58,32.5c-26.8,0-49.6-13.3-57.7-31.8c-10.7,18.7-31.2,31.4-54.8,31.4
+			c-25.1,0-46.7-14.3-56.7-35.1c-9.6,10.3-23.4,16.8-38.8,16.8c-10.2,0-19.7-2.9-27.8-7.8c-5.9,21-30.3,36.7-59.4,36.7
+			c-33.6,0-60.8-20.8-60.8-46.5c0-0.7,0-1.4,0.1-2.2c-25.7,15.8-54.9,15.6-67.5-1.5c-3.5-4.8-5.4-10.5-5.8-16.7
+			c-9.1,5.5-19.8,8.7-31.3,8.7c-33.1,0-60-26.5-60-59.2c0-9.8,2.4-19,6.6-27.1c-3.8,0.6-7.8,0.9-11.8,0.9
+			c-30.7-0.2-56.7-19.8-66.1-47c-38,3.9-72.7-22.6-78.5-60.7C329.3,437.6,351.6,403.9,385.5,394L385.5,394z"/>
+	</g>
+</g>
+<rect x="-0.9" y="-0.8" class="st2" width="362.8" height="505.6"/>
+<path class="st3" d="M306.3,105.6c-8.2-3.1-25-9.2-25-9.6c1.1-18.7-17.4-33.8-41.6-33.8c-0.5,0-1,0-1.5,0c-8.4,0.2-15.9-3.3-19.5-9
+	c-6.8-11-21.7-18.6-39.1-18.6c-17.9,0-33.2,8-39.7,19.6c-3.3,5.8-10.8,9.5-19.1,9.4c-0.2,0-0.4,0-0.6,0C96,63.7,77.6,78.6,78.4,97
+	c-8.9,2.5-17.7,5.4-26.3,8.6c-6.3,2.4-10.1,7.5-9.8,13.2c5.8,90.5,5.9,170.1,0.2,260.6c-0.4,5.7,3.4,10.8,9.8,13.2
+	c8.6,3.2,17.3,6.1,26.3,8.6c0,0.2-0.1,0.5-0.1,0.8c-1.1,18.6,17.4,33.8,41.6,33.8c0.1,0,0.1,0,0.2,0c8.3,0,15.8,3.7,18.8,9.6
+	c6.1,12.2,21.8,20.9,40.4,20.9c18.5,0,34.2-8.6,40.3-20.8c3-6,10.5-9.8,18.8-9.7c0.3,0,0.6,0,0.9,0c24.2,0,42.7-15.1,41.6-33.8
+	c0-0.4-0.1-0.7-0.1-1.1c8.5-2.4,16.9-5.2,25-8.2c6.3-2.4,10.1-7.5,9.7-13.2c-5.7-90.5-5.6-170.1,0.2-260.6
+	C316.4,113.2,312.6,108,306.3,105.6L306.3,105.6z"/>
+<path class="st4" d="M11.6,29L12,474.6c0,6.6,5.4,12,12,12l311.4,0.2c6.6,0,12-5.4,12-12V28.6c0-6.6-5.4-12-12-12L23.6,17
+	C17,17,11.6,22.4,11.6,29L11.6,29z M277,23.4c0,10.1,7.4,13.7,12.7,13.3l28.5-2.6l-5.1,7.6c-2.1,2.9-4.8,9.2,0.6,13.7
+	c5.5,4.4,11.7,1,14.1-1.6l2.5-2.4l-3,24.5c-0.4,5.3,3.2,12.8,13.3,12.8c0.4,0,0.9,0,1.3-0.1v326.5c-0.2,0-0.4,0-0.6,0
+	c-10.1,0-13.7,7.4-13.3,12.7l2.6,28.5l-7.6-5.1c-2.9-2.1-9.2-4.8-13.6,0.6c-4.4,5.5-1,11.7,1.6,14.1l2.4,2.5l-24.5-3
+	c-5.3-0.4-12.8,3.2-12.8,13.3c0,0.4-193.5,1.5-193.5,1.5c-0.1-10-7.4-13.5-12.7-13.2l-28.5,2.6l5.1-7.6c2.1-2.9,4.8-9.2-0.6-13.6
+	c-5.5-4.4-11.7-1-14.1,1.6l-2.5,2.4l3-24.5c0.4-5.3-3.2-12.8-13.3-12.8c-0.4,0-1.4-327.8-1.4-327.8c0.2,0,0.3,0,0.5,0
+	c10.1,0,13.7-7.4,13.3-12.7l-2.6-28.5l7.6,5.1c2.9,2.1,9.2,4.8,13.6-0.6c4.4-5.5,1-11.7-1.6-14.1L46,34.1l24.5,3
+	c5.3,0.4,12.8-3.2,12.8-13.3C83.3,23.4,277,23.4,277,23.4L277,23.4z"/>
+<g>
+	<path class="st4" d="M81.9,139c-0.5-2-0.9-4-1.4-5.9c-0.3-1.2-0.4-2-0.2-2.4c0.1-0.4,0.4-1,1-1.7c0.5-0.8,1-1.2,1.3-1.2
+		c0.5-0.1,1.1-0.1,1.8,0.1c0.8,0.2,1.3,0.5,1.8,0.8c-0.5,0.5-1,1-1.5,1.5c-0.7-0.4-1.2-0.6-1.6-0.5c-0.1,0-0.3,0.1-0.4,0.4
+		c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2,0,0.7,0.2,1.4c0,0.1,0.1,0.2,0.1,0.3c0.9-0.2,1.8-0.4,2.8-0.6c0.1,0.6,0.3,1.2,0.4,1.8
+		c-0.9,0.2-1.8,0.4-2.8,0.6c0.3,1.4,0.7,2.9,1,4.3C83.3,138.7,82.6,138.9,81.9,139L81.9,139z"/>
+	<path class="st4" d="M86.6,129.5c0.7-0.1,1.4-0.3,2.1-0.4c0.4,1.9,0.8,3.7,1.2,5.6c0,0.2,0.2,0.3,0.4,0.5s0.4,0.2,0.5,0.2
+		c0.1,0,0.4-0.3,0.8-0.8c-0.4-1.9-0.8-3.8-1.2-5.8c0.7-0.1,1.4-0.3,2.1-0.4c0.6,2.7,1.1,5.4,1.7,8.1c-0.5,0.1-1,0.2-1.6,0.3
+		c-0.1-0.3-0.2-0.6-0.4-0.8c-0.6,0.9-1.1,1.3-1.4,1.4s-0.8-0.1-1.6-0.5s-1.2-0.9-1.3-1.4C87.4,133.3,87,131.4,86.6,129.5L86.6,129.5
+		z"/>
+	<path class="st4" d="M97.6,135.6c-0.7,0.1-1.3,0.3-2,0.4c-0.3-1.7-0.7-3.4-1.1-5.2c-0.1-0.5-0.2-0.9-0.4-1.1
+		c-0.2-0.2-0.4-0.5-0.7-0.6c0.5-0.5,1-1,1.5-1.5c0.4,0.2,0.8,0.5,1.1,0.9c0.6-0.8,1.1-1.3,1.4-1.4c0.3-0.1,0.8,0.1,1.6,0.6
+		s1.2,0.9,1.3,1.5c0.2,1,0.4,1.9,0.6,2.9c0.1,0.5,0.2,0.9,0.4,1.1c0.2,0.3,0.4,0.5,0.7,0.6c-0.5,0.5-1,1-1.5,1.5
+		c-0.8-0.4-1.4-1.2-1.6-2.2c-0.2-1.1-0.4-2.2-0.7-3.3c0-0.2-0.2-0.3-0.4-0.5c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.3-0.8,0.8
+		C96.8,131.7,97.2,133.6,97.6,135.6L97.6,135.6z"/>
+	<path class="st4" d="M110.5,124.8c0.3,2.1,0.7,4.1,1,6.2c0.1,0.3,0.4,0.6,0.9,0.8c-0.4,0.5-0.8,0.9-1.2,1.4
+		c-0.2-0.1-0.3-0.2-0.6-0.4s-0.4-0.4-0.6-0.6c-0.7,1-1.2,1.5-1.6,1.5c-0.2,0-0.7-0.1-1.3-0.6s-1.1-0.8-1.3-1.1
+		c-0.2-0.3-0.4-1-0.6-2.1s-0.3-1.8-0.2-2.2c0.1-0.4,0.3-0.8,0.8-1.5c0.5-0.6,0.8-1,1.1-1c0.4-0.1,1,0.2,2,0.8c0-0.3,0-0.6,0-0.9
+		C109.4,125,110,124.9,110.5,124.8L110.5,124.8z M108.7,127.5c-0.1-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.1-0.5-0.1s-0.2,0.1-0.3,0.3
+		c-0.1,0.2-0.2,0.3-0.2,0.4c-0.1,0.2-0.1,0.8,0.1,1.8s0.3,1.6,0.5,1.8c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.1,0.3,0.2,0.4,0.1
+		s0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.4s0-0.7-0.2-1.8C108.9,128.2,108.8,127.6,108.7,127.5L108.7,127.5z"/>
+	<path class="st4" d="M115.5,132.4c-0.7,0.1-1.4,0.2-2,0.3c-0.3-1.7-0.6-3.5-0.8-5.2c-0.1-0.5-0.2-0.9-0.4-1.2s-0.4-0.5-0.7-0.6
+		c0.5-0.5,1-1,1.5-1.4c0.4,0.2,0.8,0.5,1,0.9c0.7-0.8,1.2-1.3,1.5-1.3c0.3-0.1,0.8,0.2,1.6,0.6c0.7,0.5,1.1,1,1.2,1.5
+		c0.1,1,0.3,1.9,0.4,2.9c0.1,0.5,0.2,0.9,0.4,1.2c0.2,0.3,0.4,0.5,0.7,0.7c-0.5,0.5-1,0.9-1.5,1.4c-0.8-0.5-1.3-1.2-1.5-2.3
+		c-0.2-1.1-0.3-2.2-0.5-3.4c0-0.2-0.2-0.3-0.4-0.5c-0.2-0.2-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.3-0.8,0.8
+		C114.9,128.5,115.2,130.5,115.5,132.4L115.5,132.4z"/>
+	<path class="st4" d="M120.4,123.9c0.5-0.6,0.9-0.9,1.2-1c0.3,0,0.8,0.2,1.5,0.6c0-0.2-0.1-0.5-0.1-0.7c-0.1-0.5-0.2-0.9-0.3-1.2
+		c-0.2-0.3-0.4-0.5-0.7-0.7c0.5-0.5,1.1-0.9,1.6-1.4c0.8,0.5,1.3,1.2,1.5,2.3c0.4,3,0.8,6,1.2,8.9c-0.5,0.1-1.1,0.1-1.6,0.2
+		c-0.1-0.3-0.2-0.6-0.3-0.9c-0.7,0.8-1.2,1.3-1.5,1.3c-0.2,0-0.7-0.2-1.3-0.6s-1-0.8-1.1-1.1c-0.2-0.2-0.3-1-0.5-2.2s-0.2-2-0.2-2.3
+		C119.7,125,119.9,124.6,120.4,123.9L120.4,123.9z M123.2,125.3c-0.1-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.5-0.1
+		c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.2-0.2,0.3-0.2,0.4c0,0.2,0,0.7,0.2,1.8c0.1,1,0.3,1.6,0.3,1.8c0.1,0.1,0.2,0.2,0.3,0.4
+		c0.2,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.4c0-0.1,0-0.6,0-1.2c0-0.2-0.1-0.4-0.1-0.6
+		C123.4,126,123.3,125.4,123.2,125.3L123.2,125.3z"/>
+	<path class="st4" d="M129.4,124.4c-0.1-0.4-0.1-0.8-0.1-1.1c0.3-0.1,0.5-0.2,0.8-0.3c-0.1-1.1-0.2-1.8-0.1-2.1
+		c0.1-0.3,0.4-0.7,1.1-1.3s1.1-0.9,1.4-1c0.3,0,0.8,0.1,1.3,0.3c0.5,0.2,0.9,0.5,1.2,0.9c-0.5,0.4-1,0.8-1.4,1.2
+		c-0.4-0.4-0.6-0.6-0.8-0.6c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.3-0.3,0.4c-0.1,0.2,0,0.6,0.1,1.5c0.8-0.1,1.5-0.2,2.2-0.2
+		c0.1,0.5,0.1,1.1,0.2,1.6c-0.7,0.1-1.5,0.2-2.2,0.2c0.2,2,0.5,4,0.7,6c-0.7,0.1-1.4,0.2-2,0.2c-0.2-2-0.5-4-0.7-6
+		C129.9,124.3,129.7,124.3,129.4,124.4z"/>
+	<path class="st4" d="M138,129.5c-0.7,0.1-1.4,0.1-2.1,0.2c-0.2-1.8-0.4-3.5-0.6-5.2c-0.1-0.5-0.2-0.9-0.3-1.2
+		c-0.2-0.3-0.4-0.5-0.7-0.7c0.5-0.4,1.1-0.9,1.6-1.4c0.4,0.3,0.7,0.6,1,1c0.7-0.8,1.2-1.2,1.5-1.2c0.2,0,0.6,0.1,1,0.5
+		s0.8,0.7,0.9,1.2c-0.5,0.4-1.1,0.9-1.6,1.3c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.3-0.3-0.3c-0.2,0-0.5,0.3-0.9,0.7
+		C137.6,125.6,137.8,127.5,138,129.5L138,129.5z"/>
+	<path class="st4" d="M141.2,117.7c0.1,0,0.4,0.1,0.8,0.4c0.4,0.3,0.6,0.5,0.7,0.6c0,0.1-0.2,0.4-0.6,0.7s-0.6,0.6-0.7,0.6
+		s-0.4-0.1-0.8-0.4s-0.6-0.5-0.7-0.6c0-0.1,0.2-0.4,0.6-0.7C140.9,117.9,141.1,117.7,141.2,117.7L141.2,117.7z M140.4,121
+		c0.7-0.1,1.4-0.1,2.1-0.2c0.2,1.8,0.3,3.5,0.5,5.3c0.1,0.5,0.1,0.9,0.3,1.2c0.1,0.3,0.4,0.5,0.7,0.7c-0.5,0.4-1.1,0.9-1.6,1.3
+		c-0.8-0.5-1.2-1.3-1.4-2.4C140.8,124.9,140.6,122.9,140.4,121L140.4,121z"/>
+	<path class="st4" d="M149.4,120.2c0.2,2.6,0.4,5.2,0.6,7.7c0.1,1.3,0.1,2.1,0,2.3c-0.1,0.3-0.5,0.7-1.1,1.3
+		c-0.7,0.6-1.2,0.9-1.5,0.9c-0.4,0-0.8-0.1-1.4-0.4s-1-0.7-1.3-1.1c0.5-0.4,1-0.8,1.5-1.2c0.1,0.1,0.1,0.1,0.2,0.2
+		c0.4,0.4,0.7,0.7,0.9,0.6c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0-0.8,0-1.9c0-0.2,0-0.4,0-0.6
+		c-0.7,0.6-1.1,0.8-1.4,0.9c-0.2,0-0.7-0.2-1.3-0.7c-0.6-0.5-1-0.9-1.1-1.1s-0.2-0.9-0.3-1.9c-0.1-1.1-0.1-1.7,0-2s0.4-0.7,0.9-1.3
+		c0.5-0.6,0.9-0.9,1.2-0.9c0.3,0,0.9,0.3,1.8,0.8c0-0.3,0.1-0.5,0.1-0.8C148.3,120.3,148.9,120.2,149.4,120.2L149.4,120.2z
+		 M147.4,122.7c-0.1-0.1-0.2-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.5-0.2c-0.1,0-0.2,0.1-0.4,0.2c-0.1,0.1-0.2,0.3-0.2,0.4
+		c-0.1,0.2-0.1,0.7,0,1.5c0.1,0.8,0.1,1.3,0.2,1.5c0.1,0.1,0.1,0.2,0.3,0.3s0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.2
+		c0.2-0.2,0.4-0.3,0.4-0.4c0.1-0.1,0.1-0.6,0-1.5C147.5,123.3,147.5,122.8,147.4,122.7L147.4,122.7z"/>
+	<path class="st4" d="M153.3,128.2c-0.7,0-1.4,0.1-2.1,0.1c-0.2-2.8-0.4-5.6-0.6-8.3c0-0.5-0.1-0.9-0.3-1.2
+		c-0.1-0.3-0.4-0.5-0.7-0.7c0.6-0.4,1.1-0.9,1.7-1.3c0.8,0.5,1.2,1.3,1.3,2.4c0,0.5,0.1,0.9,0.1,1.4c0.6-0.6,1.1-0.9,1.4-0.9
+		c0.3,0,0.8,0.2,1.5,0.8c0.7,0.5,1,1.1,1.1,1.6c0.1,1,0.1,2,0.2,2.9c0,0.5,0.1,0.9,0.2,1.2s0.4,0.5,0.6,0.7
+		c-0.6,0.4-1.1,0.8-1.6,1.3c-0.8-0.5-1.2-1.3-1.3-2.4c-0.1-1.1-0.1-2.3-0.2-3.4c0-0.2-0.1-0.3-0.3-0.5c-0.2-0.2-0.4-0.3-0.6-0.2
+		c-0.2,0-0.4,0.2-0.9,0.7C153,124.3,153.1,126.2,153.3,128.2L153.3,128.2z"/>
+	<path class="st4" d="M160.5,121.2c0.1,1.1,0.1,2.2,0.2,3.4c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.8,0.7,1.4,0.9
+		c-0.6,0.4-1.1,0.8-1.7,1.2c-0.6-0.3-1.2-0.6-1.6-1.1c-0.4-0.5-0.7-1-0.7-1.6c-0.1-1.3-0.1-2.7-0.2-4c-0.3,0-0.5,0-0.8,0
+		c0-0.4,0-0.8-0.1-1.2c0.3-0.1,0.5-0.2,0.8-0.2c-0.1-0.5-0.1-0.9-0.2-1.2c-0.1-0.3-0.3-0.6-0.6-0.8c0.6-0.4,1.1-0.8,1.7-1.3
+		c0.8,0.5,1.2,1.3,1.3,2.4c0,0.2,0,0.3,0,0.5c0.6,0,1.2-0.1,1.8-0.1c0,0.5,0.1,1.1,0.1,1.6C161.7,121.1,161.1,121.1,160.5,121.2
+		L160.5,121.2z"/>
+	<path class="st4" d="M168.9,123.3c0,0.2,0,0.4,0,0.6c-1.3,0-2.5,0.1-3.8,0.1c0,0.6,0.1,1.1,0.3,1.4c0.1,0.1,0.1,0.2,0.3,0.4
+		s0.3,0.2,0.4,0.2s0.3-0.1,0.5-0.4c0.2-0.2,0.4-0.6,0.5-0.9c0.6,0.4,1.1,0.7,1.6,1.1c-0.3,0.5-0.7,1-1.2,1.4c-0.6,0.4-1,0.6-1.4,0.6
+		c-0.4,0-0.9-0.2-1.6-0.8c-0.7-0.5-1.1-0.9-1.3-1.2c-0.2-0.3-0.3-1-0.3-2.2c-0.1-1.2,0-1.9,0.1-2.2c0.1-0.3,0.5-0.7,1.2-1.3
+		s1.1-0.8,1.5-0.9c0.3,0,0.8,0.2,1.5,0.8c0.7,0.5,1.1,0.9,1.3,1.2S168.9,122.2,168.9,123.3L168.9,123.3z M166.6,121.5
+		c-0.1-0.1-0.2-0.3-0.4-0.4c-0.2-0.1-0.3-0.2-0.5-0.2c-0.1,0-0.3,0.2-0.5,0.4c-0.2,0.3-0.3,0.7-0.3,1.2c0.6,0,1.2,0,1.8-0.1
+		C166.8,122,166.7,121.6,166.6,121.5L166.6,121.5z"/>
+	<path class="st4" d="M172.4,127.4c-0.7,0-1.4,0-2.1,0.1c0-1.8-0.1-3.5-0.1-5.3c0-0.5-0.1-0.9-0.2-1.2s-0.3-0.5-0.6-0.7
+		c0.6-0.4,1.1-0.8,1.7-1.2c0.4,0.3,0.7,0.6,0.9,1c0.8-0.7,1.3-1.1,1.6-1.1c0.3,0,0.8,0.3,1.5,0.8c0.7,0.6,1,1.1,1,1.7c0,1,0,2,0,3
+		c0,0.5,0.1,0.9,0.2,1.2c0.1,0.3,0.3,0.5,0.6,0.7c-0.6,0.4-1.1,0.8-1.7,1.2c-0.8-0.6-1.1-1.4-1.2-2.5c0-1.1,0-2.3-0.1-3.4
+		c0-0.2-0.1-0.3-0.3-0.5c-0.2-0.2-0.4-0.3-0.5-0.3c-0.2,0-0.5,0.2-0.9,0.7C172.3,123.5,172.3,125.5,172.4,127.4L172.4,127.4z"/>
+	<path class="st4" d="M178.4,115.9c0.1,0,0.4,0.2,0.8,0.5c0.4,0.3,0.6,0.6,0.6,0.7c0,0.1-0.2,0.3-0.6,0.7c-0.4,0.3-0.7,0.5-0.8,0.5
+		s-0.4-0.2-0.8-0.5c-0.4-0.3-0.6-0.6-0.6-0.7c0-0.1,0.2-0.3,0.6-0.7C178.1,116,178.3,115.9,178.4,115.9L178.4,115.9z M177.4,119.1
+		c0.7,0,1.4,0,2.1,0c0,1.8,0,3.5,0,5.3c0,0.5,0.1,0.9,0.2,1.2c0.1,0.3,0.3,0.5,0.6,0.8c-0.6,0.4-1.1,0.8-1.7,1.2
+		c-0.8-0.6-1.1-1.4-1.1-2.5C177.4,123.1,177.4,121.1,177.4,119.1L177.4,119.1z"/>
+	<path class="st4" d="M183,127.3c-0.7,0-1.4,0-2.1,0c0-1.8,0-3.5,0-5.3c0-0.5-0.1-0.9-0.2-1.2s-0.3-0.5-0.6-0.8
+		c0.6-0.4,1.2-0.8,1.7-1.2c0.4,0.3,0.7,0.7,0.9,1.1c0.8-0.7,1.3-1.1,1.7-1.1s0.8,0.3,1.4,0.9c0.6,0.6,1,1.1,0.9,1.7c0,1,0,2,0,3
+		c0,0.5,0.1,0.9,0.2,1.2s0.3,0.5,0.6,0.8c-0.6,0.4-1.1,0.8-1.7,1.2c-0.7-0.6-1.1-1.4-1.1-2.5c0-1.1,0-2.3,0-3.4
+		c0-0.2-0.1-0.4-0.3-0.6s-0.4-0.3-0.5-0.3c-0.2,0-0.5,0.2-0.9,0.6C183,123.4,183,125.4,183,127.3L183,127.3z"/>
+	<path class="st4" d="M194,119.3c-0.1,2.6-0.2,5.2-0.2,7.7c0,1.3-0.1,2.1-0.2,2.3s-0.6,0.6-1.3,1.1c-0.7,0.5-1.3,0.8-1.6,0.8
+		c-0.4,0-0.8-0.2-1.3-0.6c-0.5-0.4-0.9-0.8-1.2-1.2c0.5-0.4,1.1-0.7,1.6-1.1c0.1,0.1,0.1,0.1,0.1,0.2c0.4,0.5,0.6,0.7,0.8,0.7
+		c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.1-0.8,0.1-1.9c0-0.2,0-0.4,0.1-0.6c-0.7,0.5-1.2,0.7-1.5,0.7
+		c-0.2,0-0.6-0.3-1.2-0.8c-0.5-0.6-0.9-1-1-1.2c-0.1-0.3-0.2-0.9-0.1-2s0.1-1.7,0.2-2c0.1-0.3,0.5-0.7,1-1.2c0.6-0.5,1-0.8,1.3-0.8
+		c0.3,0,0.9,0.3,1.7,1c0.1-0.3,0.1-0.5,0.2-0.8C193,119.2,193.5,119.2,194,119.3L194,119.3z M191.8,121.5c-0.1-0.1-0.2-0.3-0.4-0.4
+		c-0.2-0.1-0.4-0.2-0.5-0.2s-0.2,0.1-0.4,0.2c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0.2-0.1,0.7-0.2,1.5s0,1.4,0.1,1.5
+		c0,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.4-0.3,0.5-0.4c0.1-0.1,0.1-0.6,0.1-1.5
+		C191.8,122.2,191.8,121.7,191.8,121.5L191.8,121.5z"/>
+	<path class="st4" d="M200.9,121.2c-0.1,1.1-0.1,2.2-0.2,3.4c0,0.5,0.1,0.9,0.4,1.3c0.3,0.4,0.8,0.8,1.3,1c-0.6,0.4-1.2,0.7-1.8,1.1
+		c-0.6-0.3-1.1-0.7-1.5-1.3c-0.4-0.5-0.6-1.1-0.6-1.6c0.1-1.3,0.1-2.7,0.2-4c-0.3,0-0.5,0-0.8,0c0-0.4,0-0.8,0.1-1.2
+		c0.3-0.1,0.5-0.1,0.8-0.2c0-0.5-0.1-0.9-0.1-1.2s-0.3-0.6-0.6-0.9c0.6-0.4,1.2-0.7,1.8-1.1c0.7,0.6,1.1,1.5,1,2.5
+		c0,0.2,0,0.3,0,0.5c0.6,0,1.2,0.1,1.8,0.1c0,0.5-0.1,1.1-0.1,1.6C202.1,121.2,201.5,121.2,200.9,121.2L200.9,121.2z"/>
+	<path class="st4" d="M204.9,116.6c0.1,0,0.4,0.2,0.8,0.5c0.4,0.3,0.6,0.6,0.6,0.7s-0.2,0.3-0.6,0.6s-0.7,0.5-0.8,0.5
+		c-0.1,0-0.4-0.2-0.7-0.5s-0.6-0.6-0.6-0.7c0-0.1,0.2-0.3,0.6-0.7C204.5,116.7,204.8,116.5,204.9,116.6L204.9,116.6z M203.6,119.7
+		c0.7,0,1.4,0.1,2.1,0.1c-0.1,1.8-0.2,3.5-0.3,5.3c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.3,0.6,0.6,0.8c-0.6,0.4-1.2,0.7-1.8,1.1
+		c-0.7-0.6-1-1.5-1-2.5C203.4,123.7,203.5,121.7,203.6,119.7z"/>
+	<path class="st4" d="M212.6,126.6c-0.2,0.3-0.5,0.7-1.1,1.2c-0.6,0.5-1,0.7-1.3,0.7s-0.7-0.3-1.3-0.9c0,0.4-0.1,0.9-0.1,1.3
+		c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.3,0.6,0.5,0.8c-0.6,0.4-1.2,0.7-1.8,1.1c-0.7-0.6-1-1.5-1-2.6c0.1-2.2,0.3-4.3,0.4-6.5
+		c0.1-1-0.2-1.7-0.7-2.1c0.6-0.4,1.2-0.7,1.8-1.1c0.3,0.2,0.5,0.6,0.8,1.2c0.9-0.7,1.5-1,1.8-1c0.2,0,0.6,0.3,1.2,0.9
+		c0.5,0.6,0.8,1,0.9,1.4s0.1,1.1,0,2.2S212.7,126.2,212.6,126.6L212.6,126.6z M209,125.9c0.1,0.1,0.2,0.3,0.4,0.4
+		c0.2,0.2,0.4,0.2,0.6,0.2c0.1,0,0.4-0.2,0.6-0.5c0.1-0.2,0.3-0.8,0.3-1.8c0.1-1,0-1.6-0.1-1.8c-0.1-0.1-0.1-0.2-0.2-0.4
+		c-0.1-0.1-0.2-0.2-0.3-0.2s-0.3,0.1-0.5,0.2c-0.2,0.1-0.4,0.2-0.5,0.4s-0.2,0.7-0.2,1.8C209,125.2,209,125.8,209,125.9L209,125.9z"
+		/>
+	<path class="st4" d="M219,126.6c0,0.3-0.5,0.8-1.3,1.5c-0.9,0.7-1.5,1-1.9,0.9s-0.9-0.3-1.4-0.7c-0.5-0.4-0.9-0.9-1.2-1.4
+		c0.6-0.3,1.1-0.6,1.7-1c0.5,0.8,0.8,1.1,1.1,1.2c0.2,0,0.4-0.1,0.7-0.2c0.3-0.2,0.4-0.3,0.4-0.4c0,0-0.1-0.1-0.4-0.3
+		s-0.5-0.4-0.9-0.6s-0.7-0.5-1-0.8c-0.3-0.3-0.6-0.6-0.8-1s-0.3-0.8-0.3-1.2c0-0.4,0.4-0.8,1.2-1.4c0.8-0.5,1.3-0.8,1.7-0.8
+		s0.9,0.3,1.4,0.7c0.6,0.4,0.9,0.9,1.2,1.4c-0.6,0.3-1.1,0.6-1.7,0.9c-0.5-0.8-0.8-1.2-1.1-1.2c-0.1,0-0.3,0.1-0.5,0.2
+		c-0.2,0.1-0.3,0.2-0.3,0.3c0,0.1,0.2,0.3,0.5,0.6s0.8,0.5,1.2,0.8c0.4,0.3,0.8,0.7,1.2,1.1C218.9,125.7,219,126.2,219,126.6
+		L219,126.6z"/>
+	<path class="st4" d="M229.6,121.9c-0.2,2.1-0.5,4.2-0.7,6.2c0,0.4,0.2,0.7,0.6,1c-0.5,0.3-1,0.7-1.5,1c-0.1-0.1-0.3-0.3-0.4-0.5
+		s-0.3-0.5-0.4-0.8c-0.9,0.7-1.6,1.1-1.9,1c-0.2,0-0.6-0.3-1.1-0.9s-0.8-1.1-0.9-1.4c-0.1-0.3-0.1-1.1,0-2.2
+		c0.1-1.1,0.2-1.8,0.4-2.2s0.6-0.7,1.2-1.2c0.6-0.5,1.1-0.7,1.3-0.7c0.4,0,0.9,0.5,1.7,1.3c0.1-0.3,0.2-0.6,0.3-0.9
+		C228.6,121.8,229.1,121.8,229.6,121.9L229.6,121.9z M227.2,123.9c-0.1-0.1-0.2-0.3-0.4-0.4c-0.2-0.2-0.4-0.2-0.5-0.3
+		c-0.1,0-0.2,0-0.4,0.2s-0.2,0.2-0.3,0.3c-0.2,0.2-0.3,0.8-0.4,1.8c-0.1,1-0.1,1.6,0,1.8c0,0.1,0.1,0.2,0.2,0.4
+		c0.1,0.2,0.2,0.2,0.3,0.2s0.3,0,0.5-0.2s0.4-0.2,0.5-0.3c0.1-0.1,0.2-0.7,0.3-1.8C227.2,124.7,227.2,124.1,227.2,123.9L227.2,123.9
+		z"/>
+	<path class="st4" d="M232.4,130.5c-0.7-0.1-1.4-0.2-2-0.2c0.2-1.8,0.4-3.5,0.6-5.2c0.1-0.5,0.1-0.9-0.1-1.2
+		c-0.1-0.3-0.3-0.6-0.5-0.8c0.6-0.3,1.2-0.7,1.9-1c0.4,0.3,0.6,0.7,0.7,1.2c0.9-0.6,1.5-0.9,1.8-0.9c0.3,0,0.8,0.4,1.3,1
+		c0.6,0.7,0.8,1.2,0.8,1.8c-0.1,1-0.3,1.9-0.4,2.9c-0.1,0.5-0.1,0.9,0,1.2s0.2,0.6,0.5,0.8c-0.6,0.3-1.2,0.6-1.9,0.9
+		c-0.7-0.7-0.9-1.5-0.8-2.6c0.1-1.1,0.3-2.2,0.4-3.4c0-0.2-0.1-0.4-0.2-0.6c-0.2-0.2-0.3-0.3-0.5-0.3s-0.5,0.2-1,0.5
+		C232.9,126.6,232.6,128.5,232.4,130.5L232.4,130.5z"/>
+	<path class="st4" d="M239.4,123.7c0.6-0.5,1.1-0.7,1.4-0.6s0.7,0.4,1.3,1c0-0.2,0.1-0.5,0.1-0.7c0.1-0.5,0.1-0.9,0-1.2
+		c-0.1-0.3-0.2-0.6-0.5-0.8c0.6-0.3,1.3-0.6,1.9-0.9c0.7,0.7,0.9,1.6,0.8,2.6c-0.4,3-0.9,6-1.3,8.9c-0.5-0.1-1.1-0.2-1.6-0.2
+		c0-0.3,0-0.6-0.1-0.9c-0.9,0.6-1.5,0.9-1.8,0.8c-0.2,0-0.6-0.4-1.1-1s-0.8-1.1-0.8-1.3c-0.1-0.3,0-1,0.1-2.3s0.3-2,0.5-2.2
+		C238.4,124.6,238.8,124.2,239.4,123.7L239.4,123.7z M241.8,125.8c-0.1-0.1-0.2-0.3-0.4-0.5s-0.4-0.3-0.5-0.3s-0.2,0-0.4,0.2
+		c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.2,0.7-0.3,1.8c-0.1,1-0.2,1.6-0.1,1.8c0,0.1,0.1,0.3,0.2,0.4s0.2,0.2,0.3,0.2
+		c0.1,0,0.3,0,0.5-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.2-0.5,0.3-1.2c0-0.2,0.1-0.4,0.1-0.6C241.8,126.5,241.8,125.9,241.8,125.8
+		L241.8,125.8z"/>
+	<path class="st4" d="M250.9,126.4c-0.2,1.1-0.4,2.2-0.6,3.3c-0.1,0.5,0,0.9,0.3,1.4c0.3,0.4,0.7,0.8,1.2,1.2
+		c-0.6,0.3-1.3,0.6-1.9,0.9c-0.6-0.4-1-0.9-1.4-1.4c-0.3-0.6-0.5-1.1-0.4-1.7c0.2-1.3,0.4-2.7,0.6-4c-0.3,0-0.5-0.1-0.8-0.1
+		c0.1-0.4,0.1-0.8,0.2-1.1c0.3,0,0.5,0,0.8-0.1c0.1-0.5,0.1-0.9,0-1.2c-0.1-0.3-0.2-0.6-0.5-0.9c0.6-0.3,1.3-0.6,1.9-0.9
+		c0.7,0.7,0.9,1.6,0.7,2.6c0,0.2-0.1,0.3-0.1,0.4c0.6,0.1,1.2,0.2,1.8,0.3c-0.1,0.5-0.2,1.1-0.3,1.6
+		C252,126.7,251.4,126.6,250.9,126.4L250.9,126.4z"/>
+	<path class="st4" d="M254.8,133.9c-0.7-0.1-1.4-0.2-2-0.4c0.3-1.7,0.6-3.5,0.9-5.2c0.1-0.5,0.1-0.9,0-1.2c-0.1-0.3-0.2-0.6-0.5-0.8
+		c0.6-0.3,1.3-0.6,1.9-0.9c0.3,0.4,0.6,0.8,0.7,1.2c0.9-0.6,1.5-0.8,1.8-0.8c0.2,0,0.5,0.3,0.9,0.7c0.4,0.4,0.5,0.9,0.5,1.4
+		c-0.6,0.3-1.2,0.6-1.9,0.8c0-0.2,0-0.5,0-0.7c-0.1-0.2-0.1-0.4-0.2-0.4c-0.2,0-0.5,0.1-1,0.5C255.4,130,255.1,131.9,254.8,133.9
+		L254.8,133.9z"/>
+	<path class="st4" d="M261.1,123.4c0.1,0,0.3,0.2,0.7,0.6c0.3,0.4,0.5,0.7,0.5,0.8c0,0.1-0.3,0.3-0.7,0.6c-0.5,0.2-0.8,0.4-0.9,0.3
+		c-0.1,0-0.3-0.2-0.7-0.6c-0.3-0.4-0.5-0.7-0.5-0.8c0-0.1,0.3-0.3,0.7-0.6C260.7,123.5,261,123.4,261.1,123.4L261.1,123.4z
+		 M259.4,126.3c0.7,0.1,1.4,0.3,2.1,0.4c-0.3,1.7-0.7,3.5-1,5.2c-0.1,0.5-0.1,0.9,0,1.2c0.1,0.3,0.2,0.6,0.4,0.9
+		c-0.6,0.3-1.3,0.6-1.9,0.8c-0.6-0.7-0.9-1.6-0.6-2.6C258.7,130.2,259.1,128.3,259.4,126.3L259.4,126.3z"/>
+	<path class="st4" d="M261.5,133.4c-0.1-0.4-0.1-1.2,0.1-2.4c0.2-1.3,0.5-2,0.8-2.3c0.2-0.2,0.7-0.5,1.4-0.9s1.2-0.5,1.6-0.4
+		c0.3,0.1,0.8,0.3,1.3,0.9c0.5,0.5,0.8,1,1,1.6c-0.6,0.2-1.2,0.5-1.8,0.7c-0.1-0.3-0.2-0.6-0.4-0.9s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.5,0.1-0.8,0.5c-0.2,0.2-0.4,0.8-0.6,1.8c-0.2,1-0.2,1.6-0.2,1.9c0.1,0.1,0.1,0.3,0.2,0.5c0.1,0.2,0.2,0.3,0.4,0.3
+		c0.1,0,0.3-0.1,0.6-0.2s0.5-0.4,0.7-0.8c0.5,0.5,0.9,0.9,1.4,1.4c-0.4,0.4-0.9,0.8-1.5,1.1c-0.6,0.3-1.1,0.4-1.5,0.3
+		s-0.8-0.4-1.3-1C261.9,134.1,261.6,133.7,261.5,133.4L261.5,133.4z"/>
+	<path class="st4" d="M269.2,136.7c-0.7-0.1-1.4-0.3-2-0.4c0.6-2.7,1.1-5.5,1.7-8.2c0.1-0.5,0.1-0.9,0.1-1.2
+		c-0.1-0.3-0.2-0.6-0.4-0.9c0.6-0.3,1.3-0.5,2-0.8c0.6,0.7,0.8,1.6,0.6,2.7c-0.1,0.6-0.2,1.1-0.4,1.7c1-0.6,1.6-0.9,1.9-0.8
+		c0.3,0.1,0.7,0.4,1.2,1.2s0.8,1.2,0.8,1.6c0,0.2-0.3,0.6-0.8,1.1s-0.9,0.8-1.2,1.1c0.5,1.1,0.8,2,0.9,2.8c-0.7,0.3-1.5,0.6-2.2,0.9
+		c-0.1-0.9-0.2-1.6-0.3-2.2c-0.1-0.6-0.4-1.2-0.8-1.7c0-0.2,0.1-0.4,0.1-0.5c0.4-0.1,0.8-0.4,1.2-0.8s0.7-0.6,0.8-0.8
+		c-0.2-0.4-0.4-0.7-0.6-0.7c-0.1,0-0.3,0-0.6,0.2c-0.3,0.2-0.6,0.3-0.8,0.5C270,133.1,269.6,134.9,269.2,136.7L269.2,136.7z"/>
+	<path class="st4" d="M280.1,136.6c-0.1,0.3-0.6,0.7-1.5,1.2c-1,0.5-1.6,0.7-2,0.7c-0.4-0.1-0.8-0.4-1.3-0.9s-0.8-1-1-1.6
+		c0.6-0.2,1.2-0.5,1.8-0.7c0.4,0.8,0.6,1.2,0.9,1.3c0.2,0,0.4,0,0.7-0.1c0.3-0.1,0.5-0.2,0.5-0.4c0,0-0.1-0.2-0.3-0.4
+		c-0.2-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.6-0.6-0.9-0.9c-0.3-0.3-0.5-0.7-0.7-1.1c-0.2-0.4-0.2-0.8-0.1-1.2c0.1-0.4,0.5-0.8,1.4-1.2
+		c0.8-0.4,1.5-0.6,1.8-0.5c0.4,0.1,0.8,0.4,1.3,0.9c0.5,0.5,0.8,1,1,1.6c-0.6,0.2-1.2,0.4-1.8,0.7c-0.4-0.8-0.6-1.2-0.9-1.3
+		c-0.1,0-0.3,0-0.5,0.1c-0.2,0.1-0.3,0.2-0.4,0.3s0.1,0.3,0.5,0.6c0.3,0.3,0.7,0.6,1.1,1s0.7,0.8,1,1.2
+		C280.1,135.8,280.2,136.2,280.1,136.6L280.1,136.6z"/>
+</g>
+<path class="st4" d="M197.4,63.1c0,0-0.4,7.3-6.8,8.9c1.3-2.2,0-5.4,0-5.4l-3-8.5c-0.4-0.8-1.5-0.7-1.8,0.2l-2,6.7
+	c-0.1-0.1-0.2-0.1-0.3-0.2c-0.2-0.1-0.3-0.1-0.5-0.2c-1.2-1.3-2.7-1.8-3.5-1.2c-0.4,0.3-0.6,0.8-0.5,1.3c-0.7-0.4-1.4-0.6-2.1-0.5
+	l-1.1-6.5c-0.2-0.8-1.3-1-1.8-0.3l-4.1,8.3c0,0-1.1,1.9-1.1,3.8c0,0-0.1,0-0.1-0.1c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0.1,0,0.1
+	c0,0.2,0,0.3,0.1,0.5c0,0.8,0.2,1.7,0.7,2.5c-6.5-1.2-7.3-8.5-7.3-8.5c-5.4,1.2-15.8,11.1-11.6,27.4c0,0,6.6-8.8,16.5-3.9
+	c0,0,1.8-4.3,6-4.1c5.4,0.1,6.5,6.8,6.5,6.8c0.5,0.7,1.7,0.9,2,0.1c1.2-4.3,3.8-7.3,6.1-7.5c4.1-0.5,6.2,3.7,6.2,3.7
+	c9.6-5.5,16.8,2.8,16.8,2.8C213.9,73.1,202.9,64,197.4,63.1L197.4,63.1z"/>
+<path class="st4" d="M163.6,440c0,0,0.4-7.3,6.8-8.9c-1.3,2.2,0,5.4,0,5.4l3,8.5c0.4,0.8,1.5,0.7,1.8-0.2l2-6.7
+	c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.3,0.1,0.5,0.2c1.2,1.3,2.7,1.8,3.5,1.2c0.4-0.3,0.6-0.8,0.5-1.3c0.7,0.4,1.4,0.6,2.1,0.5
+	l1.1,6.5c0.2,0.9,1.3,1,1.8,0.3l4.1-8.3c0,0,1.1-1.9,1.1-3.8c0,0,0.1,0,0.1,0c0-0.1-0.1-0.2-0.1-0.3c0,0,0-0.1,0-0.1
+	c0-0.2,0-0.3-0.1-0.5c0-0.8-0.2-1.7-0.7-2.5c6.5,1.2,7.3,8.5,7.3,8.5c5.4-1.2,15.8-11.1,11.6-27.4c0,0-6.6,8.8-16.5,3.9
+	c0,0-1.8,4.3-6,4.1c-5.4-0.1-6.5-6.8-6.5-6.8c-0.5-0.7-1.7-0.9-2-0.1c-1.2,4.3-3.8,7.3-6.1,7.5c-4.1,0.5-6.2-3.7-6.2-3.7
+	c-9.6,5.5-16.8-2.9-16.8-2.9C147.2,430,158.1,439.2,163.6,440L163.6,440z"/>
+<g>
+	<g>
+		<path class="st4" d="M106.9,179.7c-2,0.5-4,1.1-6,1.6c-2.2-7.7-4.3-15.4-6.5-23.1c-0.4-1.4-0.9-2.5-1.5-3.1
+			c-0.6-0.6-1.4-1.2-2.5-1.5c1.5-1.6,3-3.2,4.6-4.8c2.8,1,4.6,2.9,5.4,5.9c0.3,1.3,0.7,2.6,1,3.9c1.6-2.1,2.9-3.2,3.8-3.4
+			c0.9-0.2,2.6,0.2,5,1.3c2.4,1.1,3.7,2.5,4,4c0.6,2.8,1.2,5.5,1.8,8.3c0.3,1.5,0.8,2.6,1.3,3.3s1.3,1.3,2.2,1.7
+			c-1.5,1.5-2.9,2.9-4.3,4.4c-2.6-1.1-4.2-3.2-4.9-6.1c-0.8-3.2-1.5-6.3-2.3-9.5c-0.1-0.5-0.5-0.9-1.2-1.3c-0.7-0.4-1.3-0.5-1.8-0.4
+			c-0.5,0.1-1.3,0.9-2.3,2.5C104.1,168.8,105.5,174.2,106.9,179.7L106.9,179.7z"/>
+		<path class="st4" d="M129,174.9c-2,0.4-4.1,0.7-6.1,1.1c-1-4.9-2-9.9-3-14.9c-0.3-1.5-0.7-2.6-1.3-3.3s-1.3-1.3-2.3-1.8
+			c1.6-1.5,3.2-2.9,4.8-4.4c1.4,0.6,2.4,1.5,3.3,2.5c2.1-2.5,3.6-3.8,4.6-3.9c0.7-0.1,1.8,0.3,3.3,1.1c1.5,0.9,2.5,1.9,2.9,3.2
+			c-1.6,1.4-3.2,2.8-4.7,4.1c-0.1-0.7-0.4-1.3-0.9-1.9c-0.4-0.6-0.8-0.9-1.1-0.8c-0.6,0.1-1.4,0.9-2.6,2.3
+			C127,163.8,128,169.4,129,174.9L129,174.9z"/>
+		<path class="st4" d="M150.7,170.2c-1.8,1.6-3.1,2.5-4,2.6c-0.9,0.1-2.4-0.4-4.5-1.6c-2.1-1.2-3.4-2.1-4-2.7c-0.8-1-1.5-3.2-2-6.8
+			c-0.5-3.6-0.5-5.9,0-7.1c0.4-0.8,1.4-2,3.3-3.7c1.9-1.7,3.3-2.6,4.2-2.7c1-0.1,2.6,0.4,4.8,1.6c2.2,1.2,3.5,2.2,4.1,2.8
+			c0.8,1,1.3,3.3,1.6,6.9c0.3,3.6,0.2,5.9-0.4,7.1C153.5,167.4,152.4,168.5,150.7,170.2L150.7,170.2z M144.9,167.2
+			c0.5,0.4,0.9,0.6,1.2,0.5s0.6-0.3,1.1-0.8c0.4-0.5,0.8-0.9,0.9-1.3c0.3-0.7,0.4-2.5,0-5.5s-0.7-4.8-1.2-5.4
+			c-0.3-0.3-0.7-0.7-1.2-1.1c-0.6-0.4-1-0.6-1.3-0.5c-0.3,0-0.7,0.3-1.1,0.8s-0.8,0.9-1,1.3c-0.4,0.7-0.3,2.5,0.1,5.5
+			c0.4,3,0.8,4.8,1.3,5.4C144,166.5,144.4,166.9,144.9,167.2L144.9,167.2z"/>
+		<path class="st4" d="M175.2,170.3c-2.1,0-4.1,0.1-6.1,0.2c-0.2-5.4-0.4-10.9-0.7-16.3c0-0.5-0.3-1-0.9-1.5
+			c-0.6-0.5-1.1-0.8-1.5-0.7c-0.4,0-1.1,0.4-1.9,1.2c0.3,5.9,0.6,11.8,1,17.6c-2.1,0.1-4.1,0.2-6.1,0.4c-0.4-5-0.8-10.1-1.1-15.1
+			c-0.1-1.5-0.4-2.6-0.9-3.4c-0.5-0.8-1.1-1.4-2.1-2c1.7-1.3,3.5-2.5,5.2-3.8c1.2,0.7,2,1.5,2.6,2.3c2.1-1.8,3.5-2.7,4.4-2.8
+			c0.5,0,1.3,0.3,2.5,0.9s2.2,1.3,3.2,2.2c2.6-2.3,4.4-3.4,5.4-3.4c1,0,2.6,0.8,4.6,2.4s3,3.3,3,4.8c0,2.8-0.1,5.6-0.1,8.5
+			c0,1.5,0.1,2.6,0.5,3.5c0.4,0.8,0.9,1.6,1.8,2.2c-1.8,1.1-3.5,2.2-5.2,3.3c-2.2-1.7-3.4-4-3.4-7.1c0-3.2,0-6.5-0.1-9.8
+			c0-0.5-0.3-1-0.9-1.6c-0.6-0.5-1.1-0.8-1.5-0.8c-0.4,0-1.1,0.4-2.1,1.1c0.1,0.3,0.1,0.5,0.1,0.7C175,159,175.1,164.6,175.2,170.3
+			L175.2,170.3z"/>
+		<path class="st4" d="M207.4,159.4c0,0.5-0.1,1.1-0.1,1.6c-3.9-0.3-7.8-0.6-11.6-0.8c-0.1,1.8,0.1,3.1,0.5,4.2
+			c0.1,0.4,0.4,0.7,0.8,1.1s0.8,0.6,1.2,0.6c0.4,0,1-0.3,1.7-1c0.7-0.7,1.3-1.5,1.7-2.4c1.6,1.2,3.1,2.4,4.6,3.6
+			c-1,1.4-2.4,2.6-4.2,3.5s-3.2,1.4-4.3,1.4c-1.1-0.1-2.5-0.9-4.5-2.5c-1.9-1.6-3.2-2.9-3.6-3.8c-0.4-0.9-0.6-3-0.5-6.4
+			c0.1-3.4,0.4-5.5,0.9-6.4c0.5-0.9,1.8-2,4-3.5c2.2-1.5,3.8-2.2,4.9-2.1c1,0.1,2.6,0.9,4.6,2.6s3.2,3,3.6,3.9
+			C207.6,153.9,207.7,156.1,207.4,159.4L207.4,159.4z M201,153.4c-0.2-0.4-0.6-0.8-1.1-1.2c-0.5-0.4-1-0.6-1.4-0.6
+			c-0.4,0-1,0.3-1.6,1.1c-0.6,0.8-1,1.9-1.2,3.4c1.9,0.1,3.7,0.2,5.6,0.3C201.3,154.8,201.2,153.8,201,153.4L201,153.4z"/>
+		<path class="st4" d="M217.7,153.2c-0.4,3.2-0.7,6.4-1.1,9.6c-0.2,1.4,0.2,2.7,1.1,3.9s2.1,2.3,3.8,3.2c-1.9,0.9-3.7,1.8-5.5,2.7
+			c-1.8-1-3.2-2.3-4.3-3.9c-1.1-1.6-1.6-3.1-1.5-4.8c0.4-3.9,0.7-7.7,1.1-11.5c-0.8-0.1-1.6-0.1-2.5-0.2c0.1-1.1,0.2-2.2,0.3-3.3
+			c0.9-0.1,1.7-0.2,2.5-0.3c0.1-1.4,0-2.6-0.3-3.4s-0.8-1.7-1.7-2.6c2-1,3.9-1.9,5.9-2.8c2.3,1.9,3.2,4.4,2.9,7.5
+			c-0.1,0.4-0.1,0.9-0.1,1.3c1.9,0.2,3.7,0.4,5.6,0.7c-0.2,1.5-0.4,3.1-0.6,4.6C221.4,153.7,219.5,153.5,217.7,153.2L217.7,153.2z"
+			/>
+		<path class="st4" d="M234.8,173.4c-2.1,1.1-3.6,1.5-4.5,1.4s-2.2-1.1-3.8-2.8c-1.7-1.7-2.7-2.9-3.1-3.7c-0.5-1.2-0.5-3.5,0-7.1
+			s1.1-5.8,2-6.8c0.6-0.6,1.9-1.5,4.2-2.6s3.9-1.6,4.8-1.4c1,0.2,2.4,1.1,4.1,2.9c1.8,1.8,2.8,3.1,3.1,3.8c0.5,1.2,0.4,3.5-0.3,7.1
+			c-0.7,3.5-1.5,5.8-2.3,6.7C238.4,171.5,237,172.3,234.8,173.4L234.8,173.4z M230.1,169c0.4,0.5,0.8,0.8,1,0.8s0.7-0.1,1.3-0.5
+			s1-0.7,1.3-1c0.5-0.6,1-2.3,1.6-5.3c0.5-2.9,0.6-4.8,0.3-5.5c-0.2-0.4-0.5-0.8-0.9-1.4s-0.8-0.8-1.1-0.9s-0.7,0.1-1.3,0.4
+			c-0.6,0.4-1,0.7-1.3,1c-0.5,0.6-1,2.3-1.5,5.3c-0.5,2.9-0.5,4.8-0.2,5.5C229.4,168,229.7,168.4,230.1,169L230.1,169z"/>
+		<path class="st4" d="M241.5,176.3c1.6-7.8,3.2-15.6,4.8-23.5c0.3-1.5,0.3-2.6,0.1-3.5s-0.7-1.7-1.5-2.5c2.1-0.7,4.1-1.5,6.2-2.2
+			c2.1,2.2,2.8,4.7,2.1,7.7c-0.3,1.3-0.6,2.6-0.9,3.9c2.3-1.1,3.9-1.5,4.8-1.3c0.9,0.2,2,1.3,3.4,3.3s2.1,3.4,2.2,4.1
+			c0.2,0.8-0.2,3-1.2,6.5c-0.9,3.5-1.7,5.6-2.2,6.2c-0.4,0.6-1.7,1.5-3.7,2.6c-2.1,1.1-3.4,1.6-4.1,1.4c-1.1-0.3-2.5-1.7-4.4-4.3
+			c-0.4,0.8-0.7,1.7-1.1,2.5C244.5,177,243,176.7,241.5,176.3L241.5,176.3z M249.3,171.2c0.1,0.4,0.5,0.9,1.1,1.4s1,0.9,1.4,0.9
+			c0.3,0.1,0.8,0,1.2-0.3c0.5-0.3,0.9-0.6,1.1-0.9s0.8-2,1.5-4.9c0.7-2.9,1-4.6,0.9-5c-0.1-0.4-0.3-0.9-0.6-1.4
+			c-0.3-0.5-0.6-0.8-1-0.8c-0.3-0.1-0.9,0-1.7,0.2c-0.8,0.2-1.3,0.4-1.6,0.7c-0.4,0.4-0.9,2.1-1.6,5.1
+			C249.4,169.1,249.1,170.8,249.3,171.2L249.3,171.2z"/>
+		<path class="st4" d="M281,174.8c-0.2,0.5-0.3,1-0.5,1.5c-3.7-1.3-7.5-2.5-11.2-3.6c-0.5,1.7-0.7,3.1-0.5,4.2
+			c0,0.4,0.2,0.8,0.5,1.3c0.3,0.5,0.6,0.8,1.1,0.9c0.4,0.1,1.1,0,1.9-0.5s1.6-1.1,2.3-1.9c1.3,1.5,2.5,3.1,3.7,4.6
+			c-1.3,1.1-2.9,1.9-4.9,2.4c-2,0.5-3.5,0.6-4.5,0.3c-1-0.3-2.3-1.5-3.8-3.6s-2.4-3.6-2.6-4.5s0.1-3.1,1-6.4s1.7-5.3,2.4-6
+			s2.3-1.5,4.8-2.4c2.5-0.9,4.3-1.2,5.2-0.9s2.3,1.5,3.9,3.7c1.6,2.1,2.5,3.7,2.6,4.7C282.5,169.5,282,171.6,281,174.8L281,174.8z
+			 M276.2,167.4c-0.1-0.4-0.4-0.9-0.8-1.4c-0.4-0.5-0.8-0.8-1.2-1s-1,0.1-1.8,0.7s-1.4,1.6-2,3.1c1.8,0.5,3.6,1.1,5.4,1.6
+			C276.2,168.8,276.3,167.8,276.2,167.4L276.2,167.4z"/>
+		<path class="st4" d="M286.8,189.5c-2-0.7-3.9-1.4-5.9-2.1c1.7-4.8,3.4-9.5,5.1-14.3c0.5-1.4,0.7-2.6,0.6-3.5s-0.5-1.8-1.1-2.7
+			c2.1-0.5,4.2-0.9,6.4-1.3c0.9,1.2,1.4,2.5,1.6,3.9c3.1-1,5.1-1.3,6-1c0.6,0.2,1.4,1.1,2.3,2.7c0.9,1.5,1.2,2.9,0.9,4.2
+			c-2.1,0.4-4.2,0.7-6.2,1.1c0.2-0.7,0.3-1.4,0.2-2.1s-0.2-1.2-0.5-1.3c-0.5-0.2-1.7,0-3.4,0.7C290.8,178.9,288.8,184.2,286.8,189.5
+			L286.8,189.5z"/>
+	</g>
+	<path class="st4" d="M63.2,182.9c-0.8-2-1.7-4.1-2.5-6.1c-2.2-5.4-3.2-9.1-2.8-11.1s1.8-4.9,4.2-8.9c2.5-4,4.6-6.2,6.4-6.9
+		c3-1.1,6.9-0.8,11.6,0.8c4.7,1.6,8,4.1,10,7.2c-2.4,2.6-4.7,5.2-7,7.9c-1.6-2.1-3.7-3.9-6.2-5.3s-4.2-2-4.9-1.7
+		c-1.3,0.5-2.4,2.1-3.3,4.9c-0.4,1.1,0.4,4.1,2.2,9c0.8,2.1,1.6,4.1,2.3,6.2c1.9,5.1,3.3,7.8,4.2,8.3c2.3,1.6,4.1,2.2,5.2,1.8
+		c0.7-0.2,1.5-1.5,2.6-3.8c1.1-2.3,1.7-4.7,1.8-7.1c3.3,0.9,6.5,1.8,9.8,2.7c0,3.4-1.3,6.9-3.8,10.5c-2.5,3.6-4.9,5.9-7.5,6.8
+		c-1.5,0.5-4.2,0-8.2-1.5c-4-1.5-6.9-2.7-8.4-3.9S65.5,188.3,63.2,182.9L63.2,182.9z"/>
+</g>
+<g class="st5">
+	<path class="st4" d="M56.8,256.7v2.4h-7.4v-14.3h2.8v11.8H56.8z"/>
+	<path class="st4" d="M58.8,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C58.3,244.1,58.7,243.9,58.8,243.9z M57.4,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M61,251.1v-1.5l1-0.2c0-1.5,0.1-2.5,0.2-2.8c0.1-0.3,0.7-0.9,1.5-1.6c0.9-0.7,1.5-1.1,1.9-1.1s0.9,0.2,1.6,0.6
+		c0.6,0.4,1.1,0.8,1.4,1.3l-2,1.3c-0.4-0.6-0.7-0.9-1-0.9c-0.1,0-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5
+		c-0.1,0.2-0.1,0.8-0.1,1.9h2.9v2.1h-2.9v8H62v-8H61z"/>
+	<path class="st4" d="M71.4,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		c-0.6-0.7-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1
+		H71.4z"/>
+	<path class="st4" d="M84.8,248.2h2.7v10.3c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,0.9-1.6,1.7s-1.5,1.1-2,1.1c-0.4,0-1-0.2-1.7-0.7
+		c-0.7-0.5-1.2-1-1.6-1.6l2.1-1.4l0.2,0.3c0.5,0.6,0.8,1,1,1c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.4-0.4,0.4-0.5
+		c0.1-0.2,0.1-0.8,0.1-1.9v-1.1c-0.8,0.7-1.3,1.1-1.7,1.1c-0.4,0-1-0.4-1.8-1.1c-0.8-0.8-1.3-1.5-1.3-2.2v-3.5
+		c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v4.1c0,0.2,0.1,0.5,0.4,0.7c0.3,0.3,0.5,0.4,0.7,0.4
+		c0.2,0,0.5-0.3,1.1-0.8V248.2z"/>
+	<path class="st4" d="M94.4,258.4c-0.8,0.7-1.4,1-1.8,1s-1-0.3-1.8-1c-0.8-0.7-1.3-1.2-1.5-1.5c-0.3-0.5-0.4-1.6-0.4-3.3
+		c0-1.7,0.1-2.7,0.4-3.2c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.8-1s1,0.3,1.8,1s1.3,1.2,1.5,1.5c0.3,0.5,0.4,1.6,0.4,3.2
+		c0,1.7-0.1,2.8-0.4,3.3C95.8,257.2,95.2,257.7,94.4,258.4z M92.1,256.7c0.2,0.2,0.4,0.3,0.5,0.3s0.3-0.1,0.5-0.3
+		c0.2-0.2,0.4-0.4,0.5-0.5c0.2-0.3,0.3-1.1,0.3-2.5c0-1.4-0.1-2.2-0.3-2.5c-0.1-0.2-0.2-0.3-0.5-0.5c-0.2-0.2-0.4-0.3-0.5-0.3
+		s-0.3,0.1-0.5,0.3c-0.2,0.2-0.4,0.4-0.5,0.5c-0.2,0.3-0.3,1.1-0.3,2.5s0.1,2.2,0.3,2.5C91.7,256.3,91.9,256.5,92.1,256.7z"/>
+	<path class="st4" d="M97.4,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11h-2.1
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1c-0.8-0.8-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M109.6,259.1h-2.7v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8c0.6,0.5,0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M125.6,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1s1.1,0.8,1.6,1.3C125.3,254.7,125.6,255.3,125.6,255.8z"/>
+	<path class="st4" d="M134.3,256.5c-0.2,0.4-0.6,1-1.4,1.8c-0.7,0.7-1.3,1.1-1.6,1.1c-0.4,0-1-0.4-1.8-1.1v1.8
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3v-8.7c0-1.3-0.3-2.2-1-2.8l2.2-1.6
+		c0.4,0.3,0.7,0.8,1.1,1.5c1.1-1,1.8-1.5,2.3-1.5c0.3,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.4,1.8c0.2,0.4,0.3,1.4,0.3,2.9
+		S134.5,256.1,134.3,256.5z M129.7,256c0.1,0.2,0.3,0.3,0.6,0.5c0.3,0.2,0.5,0.3,0.7,0.3c0.2,0,0.4-0.3,0.7-0.8
+		c0.2-0.3,0.3-1.1,0.3-2.4c0-1.3-0.1-2.1-0.3-2.4c-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.3-0.3-0.4-0.3s-0.4,0.1-0.7,0.3
+		c-0.3,0.2-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1-0.1,2.4C129.6,255.1,129.6,255.9,129.7,256z"/>
+	<path class="st4" d="M137,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C136.5,244.1,136.9,243.9,137,243.9z M135.6,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M142.9,259.1h-2.7v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8c0.6,0.5,0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M148.5,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C148.1,244.1,148.4,243.9,148.5,243.9z M147.1,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M154.4,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		c-0.6-0.7-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1
+		H154.4z"/>
+	<path class="st4" d="M164.9,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1s1.1,0.8,1.6,1.3C164.6,254.7,164.9,255.3,164.9,255.8z"/>
+	<path class="st4" d="M182.5,251.2v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2c-0.9,0.9-1.5,1.4-1.9,1.4
+		c-0.5,0-1.3-0.8-2.4-2.3c-1.1,1.5-1.9,2.3-2.4,2.3c-0.4,0-1-0.5-1.9-1.4s-1.4-1.6-1.6-2s-0.2-1.4-0.2-3v-4.8h2.7v4.8
+		c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4s0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7c0.1-0.2,0.2-0.8,0.2-1.8
+		v-5.5h2.7v4.8c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4c0.1,0,0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7
+		c0.1-0.2,0.2-1.1,0.2-2.5v-0.9c0-1.2-0.3-2-0.8-2.6l2-1.6C182,248.7,182.5,249.8,182.5,251.2z"/>
+	<path class="st4" d="M185,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9s-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C184.5,244.1,184.8,243.9,185,243.9z M183.6,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M190.9,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		s-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H190.9z"
+		/>
+	<path class="st4" d="M197.4,259.1h-2.7V248c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v1.9
+		c0.8-0.7,1.5-1.1,1.8-1.1c0.4,0,1,0.4,1.8,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M215.8,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5s-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		c-0.5-0.3-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1c0.6,0.3,1.1,0.8,1.6,1.3C215.6,254.7,215.8,255.3,215.8,255.8z"/>
+	<path class="st4" d="M216.6,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11H222
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1s-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M233.6,256.5c-0.2,0.4-0.6,1-1.4,1.8c-0.7,0.7-1.3,1.1-1.6,1.1s-1-0.4-1.8-1.1v1.8c0,0.7,0.1,1.2,0.2,1.6
+		c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3v-8.7c0-1.3-0.3-2.2-1-2.8l2.2-1.6c0.4,0.3,0.7,0.8,1.1,1.5
+		c1.1-1,1.8-1.5,2.3-1.5c0.3,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.4,1.8c0.2,0.4,0.3,1.4,0.3,2.9S233.8,256.1,233.6,256.5z M229,256
+		c0.1,0.2,0.3,0.3,0.6,0.5c0.3,0.2,0.5,0.3,0.7,0.3c0.2,0,0.4-0.3,0.7-0.8c0.2-0.3,0.3-1.1,0.3-2.4c0-1.3-0.1-2.1-0.3-2.4
+		c-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.3-0.3-0.4-0.3s-0.4,0.1-0.7,0.3c-0.3,0.2-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1-0.1,2.4
+		C228.8,255.1,228.9,255.9,229,256z"/>
+	<path class="st4" d="M242.3,253.6v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.5,0-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C242.2,251.1,242.3,252.1,242.3,253.6z M239.5,251.1c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C239.7,251.7,239.6,251.2,239.5,251.1z"/>
+	<path class="st4" d="M246.7,259.1H244v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8s0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5c-0.2,0-0.6,0.3-1.2,0.9
+		V259.1z"/>
+	<path class="st4" d="M254.1,259.1h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M268.3,248.2v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H268.3z M265.5,251.3c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C265.6,252.2,265.6,251.4,265.5,251.3z"/>
+	<path class="st4" d="M273.2,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H273.2z"/>
+	<path class="st4" d="M276.5,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11h-2.1
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1s-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M288.7,259.1H286v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8s0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5c-0.2,0-0.6,0.3-1.2,0.9
+		V259.1z"/>
+	<path class="st4" d="M300.5,248.2v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H300.5z M297.6,251.3c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C297.8,252.2,297.7,251.4,297.6,251.3z"/>
+	<path class="st4" d="M302,243.9h2.7v11.3c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V243.9z"/>
+</g>
+<g class="st5">
+	<path class="st4" d="M90.4,273.8v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2S87,282,86.6,282c-0.5,0-1.3-0.8-2.4-2.3
+		c-1.1,1.5-1.9,2.3-2.4,2.3c-0.4,0-1-0.5-1.9-1.4s-1.4-1.6-1.6-2s-0.2-1.4-0.2-3v-4.8h2.7v4.8c0,1.4,0,2.3,0.1,2.5
+		c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4s0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7c0.1-0.2,0.2-0.8,0.2-1.8v-5.5h2.7v4.8
+		c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4c0.1,0,0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7
+		c0.1-0.2,0.2-1.1,0.2-2.5v-0.9c0-1.2-0.3-2-0.8-2.6l2-1.6C89.9,271.3,90.4,272.4,90.4,273.8z"/>
+	<path class="st4" d="M98.9,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C98.8,273.7,98.9,274.6,98.9,276.2z M96,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C96.2,274.3,96.2,273.8,96,273.6z"/>
+	<path class="st4" d="M100.6,281.7v-11.1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v1.9
+		c0.8-0.7,1.4-1.1,1.8-1.1c0.4,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.3,1.6c0.1,0.3,0.2,1.4,0.2,3c0,1.7-0.1,2.7-0.2,3
+		c-0.1,0.3-0.5,0.9-1.3,1.6c-0.7,0.7-1.3,1.1-1.6,1.1c-0.5,0-1.2-0.5-2.3-1.5l-0.2,1.2H100.6z M103.4,278.6c0.1,0.2,0.3,0.3,0.6,0.5
+		c0.3,0.2,0.5,0.3,0.7,0.3s0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.4,0.4-0.5c0.1-0.2,0.1-1,0.1-2.4c0-1.4,0-2.2-0.1-2.4
+		c-0.1-0.2-0.2-0.4-0.4-0.5s-0.3-0.3-0.5-0.3s-0.4,0.1-0.7,0.3c-0.3,0.2-0.5,0.3-0.6,0.5c-0.1,0.2-0.2,1-0.2,2.5
+		C103.2,277.6,103.3,278.4,103.4,278.6z"/>
+	<path class="st4" d="M115.2,271.6c0.7-0.7,1.3-1.1,1.6-1.1s1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6
+		c1,0.8,1.5,1.9,1.5,3.3v12h-2.1l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.1-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C114,272.8,114.4,272.3,115.2,271.6z M118.5,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C118.6,274.8,118.6,274,118.5,273.8z"/>
+	<path class="st4" d="M129.8,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C129.7,273.7,129.8,274.6,129.8,276.2z M126.9,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C127.1,274.3,127,273.8,126.9,273.6z"/>
+	<path class="st4" d="M138.7,273.8v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2c-0.9,0.9-1.6,1.4-2,1.4s-1.1-0.5-2-1.4
+		c-0.9-0.9-1.5-1.6-1.6-2c-0.2-0.4-0.3-1.4-0.3-3v-4.8h2.7v4.8c0,1.4,0.1,2.3,0.2,2.5c0.1,0.3,0.3,0.5,0.5,0.8
+		c0.2,0.3,0.4,0.4,0.6,0.4s0.3-0.1,0.6-0.4c0.2-0.3,0.4-0.5,0.5-0.8c0.1-0.3,0.2-1.1,0.2-2.5v-0.9c0-0.7-0.1-1.2-0.2-1.6
+		c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6C138.2,271.3,138.7,272.4,138.7,273.8z"/>
+	<path class="st4" d="M145.9,266.5c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C145.4,266.7,145.7,266.5,145.9,266.5z M144.5,270.7h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1L146,282c-1-0.8-1.5-1.9-1.5-3.3V270.7z"/>
+	<path class="st4" d="M149.9,271.6c0.7-0.7,1.3-1.1,1.6-1.1s1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6
+		c1,0.8,1.5,1.9,1.5,3.3v12H154l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.1-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C148.7,272.8,149.2,272.3,149.9,271.6z M153.2,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C153.4,274.8,153.3,274,153.2,273.8z"/>
+	<path class="st4" d="M164.5,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C164.4,273.7,164.5,274.6,164.5,276.2z M161.6,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C161.8,274.3,161.7,273.8,161.6,273.6z"/>
+	<path class="st4" d="M173.2,270.7v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H173.2z M170.4,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		c-0.3-0.2-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5s0.1-0.9,0.2-2.4
+		C170.5,274.8,170.5,274,170.4,273.8z"/>
+	<path class="st4" d="M182,278.4c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		c0.8,0.5,1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1c0.6,0.3,1.1,0.8,1.6,1.3C181.7,277.3,182,277.9,182,278.4z"/>
+	<path class="st4" d="M195,270.7v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H195z M192.2,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		c-0.3-0.2-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C192.3,274.8,192.3,274,192.2,273.8z"/>
+	<path class="st4" d="M199.9,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M207.8,271.6c0.7-0.7,1.3-1.1,1.6-1.1c0.4,0,1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1
+		l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v12h-2.1l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.2-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C206.6,272.8,207,272.3,207.8,271.6z M211.1,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C211.2,274.8,211.2,274,211.1,273.8z"/>
+	<path class="st4" d="M219.8,279.5c-0.3-0.4-0.4-1.5-0.4-3.2c0-1.7,0.1-2.8,0.4-3.3c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.9-1
+		c0.4,0,1,0.3,1.8,0.8s1.3,1.1,1.7,1.8l-2.1,1.4c-0.2-0.3-0.4-0.7-0.7-1.1c-0.3-0.4-0.5-0.6-0.7-0.6c-0.3,0-0.6,0.3-0.9,0.9
+		c-0.2,0.4-0.3,1.2-0.3,2.5s0.1,2.2,0.3,2.5c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.5,0.3c0.2,0,0.4-0.2,0.7-0.5
+		c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.4,0-1.1-0.3-1.9-1
+		C220.6,280.3,220,279.8,219.8,279.5z"/>
+	<path class="st4" d="M232.8,281c-0.8,0.7-1.4,1-1.8,1s-1-0.3-1.8-1c-0.8-0.7-1.3-1.2-1.5-1.5c-0.3-0.5-0.4-1.6-0.4-3.3
+		c0-1.7,0.1-2.7,0.4-3.2c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.8-1s1,0.3,1.8,1s1.3,1.2,1.5,1.5c0.3,0.5,0.4,1.6,0.4,3.2
+		c0,1.7-0.1,2.8-0.4,3.3C234.1,279.8,233.6,280.3,232.8,281z M230.4,279.3c0.2,0.2,0.4,0.3,0.5,0.3s0.3-0.1,0.5-0.3
+		c0.2-0.2,0.4-0.4,0.5-0.5c0.2-0.3,0.3-1.1,0.3-2.5c0-1.4-0.1-2.2-0.3-2.5c-0.1-0.2-0.2-0.3-0.5-0.5c-0.2-0.2-0.4-0.3-0.5-0.3
+		s-0.3,0.1-0.5,0.3c-0.2,0.2-0.4,0.4-0.5,0.5c-0.2,0.3-0.3,1.1-0.3,2.5s0.1,2.2,0.3,2.5C230.1,278.9,230.2,279.1,230.4,279.3z"/>
+	<path class="st4" d="M239,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M248.8,272.9v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3L249,282c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H248.8z"/>
+	<path class="st4" d="M259.6,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.5,0-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C259.5,273.7,259.6,274.6,259.6,276.2z M256.7,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C256.9,274.3,256.8,273.8,256.7,273.6z"/>
+	<path class="st4" d="M264,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M273.8,272.9v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3L274,282c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H273.8z"/>
+	<path class="st4" d="M279.4,278.6c0.1,0,0.5,0.2,1.1,0.7c0.6,0.5,0.8,0.8,0.8,1c0,0.2-0.3,0.5-0.8,1c-0.6,0.5-0.9,0.7-1.1,0.7
+		s-0.5-0.2-1.1-0.7s-0.8-0.8-0.8-1c0-0.2,0.3-0.5,0.8-1C278.9,278.8,279.2,278.6,279.4,278.6z M280.7,267.2
+		c-0.1,4.1-0.2,6.5-0.2,7.3s0.1,1.4,0.3,2l-1.9,1.4c-0.4-0.5-0.7-1.6-0.8-3.3l-0.3-7.3H280.7z"/>
+</g>
+<g>
+	<g class="st5">
+		<path class="st4" d="M144.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6c-2.8,1.8-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H153v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3c1.6-1.1,2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9c-0.4,0-1.1,0.5-2,1.6c-0.9,1.1-1.6,2.3-1.8,3.7l-4.8-2.8
+			c0.4-1.9,1.6-3.7,3.5-5.5C141.3,188.2,143,187.3,144.6,187.3z"/>
+		<path class="st4" d="M172.1,215c-2,1.7-3.4,2.6-4.4,2.6c-1,0-2.5-0.9-4.4-2.6c-2-1.7-3.2-3.1-3.7-4.1c-0.3-0.6-0.5-2.5-0.5-5.8
+			v-5.4c0-3.1,0.2-5.1,0.6-6c0.4-0.9,1.6-2.2,3.5-3.9c2-1.7,3.4-2.6,4.4-2.6c1,0,2.5,0.9,4.4,2.6s3.2,3.1,3.7,4.1
+			c0.3,0.7,0.5,2.6,0.5,5.8v5.4c0,3.1-0.2,5.1-0.6,6S174,213.3,172.1,215z M166.3,211.2c0.5,0.4,0.9,0.7,1.3,0.7s0.8-0.2,1.3-0.7
+			c0.5-0.4,0.9-0.8,1.1-1.2c0.2-0.4,0.3-2,0.3-4.9v-5.4c0-2.4-0.1-3.9-0.2-4.5c-0.2-0.6-0.5-1.1-1.1-1.5c-0.5-0.4-1-0.7-1.4-0.7
+			s-0.8,0.2-1.4,0.7c-0.5,0.4-0.9,0.9-1.1,1.3c-0.2,0.5-0.3,2-0.3,4.7v5.4c0,2.8,0.1,4.5,0.3,4.8
+			C165.5,210.4,165.8,210.8,166.3,211.2z"/>
+		<path class="st4" d="M190.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6s-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H199v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3s2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9s-1.1,0.5-2,1.6c-0.9,1.1-1.6,2.3-1.8,3.7l-4.8-2.8c0.4-1.9,1.6-3.7,3.5-5.5
+			C187.3,188.2,189.1,187.3,190.6,187.3z"/>
+		<path class="st4" d="M213.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6c-2.8,1.8-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H222v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3c1.6-1.1,2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9c-0.4,0-1.1,0.5-2,1.6s-1.6,2.3-1.8,3.7l-4.8-2.8c0.4-1.9,1.6-3.7,3.5-5.5
+			S212.1,187.3,213.6,187.3z"/>
+	</g>
+	<path class="st4" d="M250.8,214.2l0.6-3.9c0.1-0.6,0.5-1.1,1-1.4l3.1-1.5c1.3-0.6,1.3-2.8,0-3.4l-3.2-1.4c-0.5-0.2-0.9-0.8-1-1.4
+		l-0.6-3.9c-0.2-1.4-1.6-2-2.5-1.1l-3.4,3.3c-0.3,0.3-0.8,0.5-1.2,0.4l-4.4-0.7c-1.3-0.2-2.2,1.5-1.5,2.8l1.2,2l0.4,0.6
+		c0.4,0.6,0.4,1.4,0,2l0,0.1l-1.4,2.6c-0.7,1.3,0.2,3,1.5,2.8l4.4-0.7c0.4-0.1,0.9,0.1,1.2,0.4l3.4,3.2
+		C249.2,216.2,250.6,215.5,250.8,214.2z"/>
+	<path class="st4" d="M110.2,214.2l-0.6-3.9c-0.1-0.6-0.5-1.1-1-1.4l-3.1-1.5c-1.3-0.6-1.3-2.8,0-3.4l3.2-1.4c0.5-0.2,0.9-0.8,1-1.4
+		l0.6-3.9c0.2-1.4,1.6-2,2.5-1.1l3.4,3.3c0.3,0.3,0.8,0.5,1.2,0.4l4.4-0.7c1.3-0.2,2.2,1.5,1.5,2.8l-1.2,2l-0.4,0.6
+		c-0.3,0.6-0.3,1.4,0,2l0,0.1l1.4,2.6c0.7,1.3-0.2,3-1.5,2.8l-4.3-0.7c-0.4-0.1-0.9,0.1-1.2,0.4l-3.4,3.2
+		C111.8,216.2,110.4,215.5,110.2,214.2z"/>
+</g>
+<path class="st4" d="M106.1,109.4c-3.7,0-6.8-1.1-9-3.1c-2.4-2.3-3.7-5.8-3.7-10.1c0-8.5,6.1-17.6,19.6-18.7c8.4-0.7,17.3,6,26,12.5
+	c8.3,6.2,16.9,12.7,24.7,12.4c14.9-0.5,16.1-11.6,16.2-12.1c0.1-0.8,0.8-1.4,1.6-1.3s1.4,0.8,1.3,1.6c-0.4,4.9-4.9,14.2-19,14.7
+	c-8.8,0.3-17.8-6.4-26.5-13c-8.2-6.1-16.7-12.5-24-11.9c-12.5,1-16.9,9.2-16.9,15.8c0,3.5,1,6.2,2.8,7.9c1.9,1.8,4.7,2.5,8.3,2.3
+	c4.8-0.2,7.3-3.6,7.2-6.9c-0.1-2.8-2-6-7.3-5.9c-0.8,0-1.5-0.6-1.5-1.4c0-0.8,0.6-1.5,1.4-1.5c0.1,0,0.2,0,0.2,0
+	c6.7,0,9.9,4.5,10,8.7c0.1,4.6-3.3,9.7-10,9.9C107,109.3,106.5,109.4,106.1,109.4L106.1,109.4z"/>
+<path class="st4" d="M256.9,108.8c-0.5,0-1,0-1.6-0.1c-6.6-0.2-10.1-5.1-10-9.7c0.1-5.8,5.4-8.4,10.1-8.3c0.8,0,1.4,0.7,1.4,1.5
+	c0,0.8-0.7,1.4-1.5,1.4c-5.1-0.1-7.1,2.9-7.2,5.5c-0.1,3.2,2.4,6.5,7.2,6.7c3.8,0.2,6.6-0.5,8.4-2.1c1.7-1.6,2.5-4.1,2.5-7.4
+	c0-6.7-4.4-14.8-16.9-15.8c-7.3-0.6-15.8,5.8-24,11.9c-8.7,6.5-17.8,13.3-26.5,13c-14.1-0.5-18.6-9.8-19-14.7
+	c-0.1-0.8,0.5-1.5,1.3-1.6c0.8-0.1,1.5,0.5,1.6,1.3c0,0.5,1.2,11.5,16.2,12.1c7.8,0.3,16.4-6.2,24.7-12.4c8.7-6.5,17.6-13.1,26-12.5
+	c13.5,1.1,19.6,10.2,19.6,18.7c0,4.2-1.2,7.4-3.5,9.6C263.7,107.8,260.7,108.8,256.9,108.8L256.9,108.8z"/>
+<path class="st4" d="M244.8,425.5c-7.6,0-15.6-6-23.4-11.8c-7.8-5.9-15.9-11.9-23.2-11.6c-14,0.5-15.1,10.9-15.2,11.3
+	c-0.1,0.8-0.8,1.4-1.6,1.3c-0.8-0.1-1.4-0.8-1.3-1.6c0-0.1,1.3-13.4,18-14c8.3-0.3,16.8,6.1,25.1,12.2c7.7,5.8,15.7,11.7,22.6,11.2
+	c11.7-1,15.8-8.6,15.8-14.8c0-2.6-0.9-4.9-2.6-6.5c-2.1-2-5.4-2.9-9.4-2.7c-4.4,0.1-6.6,2.8-6.5,5.4c0.1,2.5,2.2,4.9,6.9,4.8
+	c0.8,0,1.5,0.6,1.5,1.4c0,0.8-0.6,1.5-1.4,1.5c-6.7,0.1-9.8-3.9-9.9-7.7c-0.1-4,3.1-8.2,9.3-8.4c4.7-0.3,8.8,0.9,11.5,3.5
+	c2.3,2.2,3.5,5.1,3.5,8.6c0,8.1-5.7,16.7-18.5,17.7C245.6,425.5,245.2,425.5,244.8,425.5L244.8,425.5z"/>
+<path class="st4" d="M118.2,425.5c-0.4,0-0.8,0-1.1,0c-12.8-1-18.5-9.7-18.5-17.7c0-3.5,1.2-6.4,3.5-8.6c2.7-2.5,6.8-3.8,11.5-3.5
+	c6.2,0.2,9.6,4.6,9.4,8.6c-0.1,3.7-3.1,7.6-9.7,7.5c-0.8,0-1.4-0.7-1.4-1.5c0-0.8,0.7-1.4,1.5-1.4c4.8,0.1,6.7-2.5,6.7-4.6
+	c0.1-2.7-2.2-5.4-6.7-5.6c-4-0.3-7.3,0.7-9.4,2.7c-1.7,1.6-2.6,3.9-2.6,6.5c0,6.2,4.2,13.9,15.8,14.8c6.8,0.5,14.8-5.4,22.6-11.2
+	c8.2-6.2,16.8-12.5,25.1-12.2c16.6,0.6,17.9,13.8,18,14c0.1,0.8-0.5,1.5-1.3,1.6c-0.8,0.1-1.5-0.5-1.6-1.3c0-0.5-1.2-10.8-15.2-11.3
+	c-7.3-0.3-15.4,5.8-23.2,11.6C133.8,419.5,125.8,425.4,118.2,425.5L118.2,425.5z"/>
+<path class="st4" d="M276.9,296.5c0-1.1-1.3-1.2-1.3-1.2s-189.1-0.5-189.3-0.5c-0.8-0.1-1.9,0.5-2,1.3c-0.1,0.8,0.7,1.9,1.5,2.1
+	c0.3,0,28.7,5.3,34.5,18.8c1.9,4.4,1.1,9.3-2.3,14.6c0,0,0,0,0,0l-0.5,0.3c-0.7,0.4-1,1.2-0.7,1.9c0.2,0.5,0.8,0.9,1.3,0.9
+	c0.2,0,0.5-0.1,0.7-0.2l1.4-0.8h0c4.7-0.7,31-3.6,40,16.1c0,0,0,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1
+	c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0
+	c0,0,0,0,0.1,0c0.1,0,0.3,0.1,0.4,0.1c0,0,0,0,0,0c0.1,0,0.2,0,0.4,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2-0.1
+	c0.2-0.1,24.1-12.5,47.3-1.2c0,0,0,0,0,0l0.6,1.2c0.3,0.5,0.8,0.8,1.3,0.8c0.2,0,0.5,0,0.7-0.2c0.7-0.4,1-1.2,0.6-2l-0.1-0.2
+	c1-2,10.9-20.2,43.9-16.5c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0s0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2-0.1
+	c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0.1-0.1c0,0,0,0,0-0.1
+	c0,0,0-0.1,0-0.1c0-0.1,0-0.2,0.1-0.3c0,0,0,0,0-0.1c0-0.2,0-0.5-0.1-0.7c0,0,0,0,0,0c0-0.1-3.9-9-0.1-18
+	c2.7-6.3,8.6-11.2,17.5-14.4C276.3,297.9,276.9,297.6,276.9,296.5L276.9,296.5z M233.9,318.7l-18.8-8.8c0,0,0,0,0,0
+	c-1-1.5-2.9-4.9-2.1-7.7c0.5-1.7,2-3.1,4.6-4c0.4-0.1,0.6-0.4,0.8-0.7c0,0,0,0,0,0H241c0,0,0.1,0,0,0.1c-3.7,2.2-6.2,5-7.5,8.5
+	C231.9,310.6,232.8,315.3,233.9,318.7C234,318.7,234,318.7,233.9,318.7L233.9,318.7z M149.5,319.5c-2,0.1-3.9,0.3-5.7,0.5
+	c0,0-0.1,0,0-0.1l16.6-9.7h0c3,0.7,9.5,2.7,12.4,8.4c0,0,0,0,0,0l-3.3,7.7c0,0,0,0-0.1,0C165.7,321.6,158.8,319.2,149.5,319.5
+	L149.5,319.5z M138.1,309.9c-2.2-6.1-8.2-10.1-12.7-12.4c0,0,0-0.1,0-0.1h17.3c0,0,0,0,0,0c0.2,0.4,0.7,0.8,1.2,0.8
+	c4.8,0.4,13,2.1,14.6,5.5c0.6,1.1,0.3,2.5-0.7,4.1c-0.1,0.2-0.2,0.5-0.2,0.8c0,0,0,0,0,0l-19.7,11.5c0,0-0.1,0-0.1,0
+	C139.1,316.5,139.2,313.1,138.1,309.9L138.1,309.9z M184,300.2l8.5,16.2c0,0,0,0.1,0,0c-5.9-1.8-11.8-1-15.3-0.1c0,0-0.1,0,0,0
+	L184,300.2C183.9,300.2,184,300.2,184,300.2L184,300.2z M195.7,316.5l-8.6-16.5c0,0,0-0.1,0.1,0l21.5,10.1c0,0,0,0.1,0,0.1
+	C201.9,310.9,197.8,314.2,195.7,316.5C195.8,316.5,195.8,316.5,195.7,316.5L195.7,316.5z M210.7,307.8l-22-10.3c0,0,0-0.1,0-0.1h24
+	c0,0,0,0,0,0.1c-1.3,1.1-2.2,2.4-2.6,3.9C209.6,303.5,210,305.8,210.7,307.8C210.8,307.8,210.7,307.8,210.7,307.8L210.7,307.8z
+	 M174.2,315.4c-2.8-3.9-7-6-10.2-7.1c0,0,0,0,0-0.1l17.7-10.3c0,0,0.1,0,0.1,0L174.2,315.4C174.3,315.4,174.3,315.5,174.2,315.4
+	L174.2,315.4z M175.6,319.8c2.4-0.8,11.4-3.1,18.9,0.6c0,0,0,0,0,0l4.9,9.3c0,0,0,0.1,0,0c-12.1-5.1-22.5-3.2-27.2-1.9
+	c0,0-0.1,0,0,0L175.6,319.8C175.6,319.8,175.6,319.8,175.6,319.8L175.6,319.8z M197.2,319.3C197.2,319.3,197.2,319.3,197.2,319.3
+	c1.5-2.1,6.7-7.5,17.2-6.3c0.2,0,0.4,0,0.5,0l16.2,7.6c0,0,0,0.1,0,0.1c-15.6-0.2-24.7,5.9-28.4,9.1c0,0,0,0-0.1,0L197.2,319.3
+	L197.2,319.3z M161.7,306.2C161.7,306.2,161.6,306.2,161.7,306.2c0.2-1.4,0.1-2.7-0.5-3.9c-1.1-2.3-3.8-3.8-6.6-4.9c0,0,0-0.1,0-0.1
+	h22.2c0,0,0.1,0,0,0.1L161.7,306.2L161.7,306.2z M123,315.8c-4.3-9.9-18.5-15.6-27.9-18.3c0,0,0-0.1,0-0.1h23.3c0,0,0,0,0,0
+	c0.2,0.2,0.4,0.5,0.7,0.5c0.1,0,13.2,4.4,16.2,12.9c1.3,3.6,0.6,7.7-2.2,11.9c0,0,0,0,0,0l-10.3,6c0,0-0.1,0-0.1,0
+	C124.6,324.2,124.7,319.9,123,315.8L123,315.8z M136.7,330.8c-3.9-0.6-7.5-0.6-10.4-0.5c0,0-0.1,0,0-0.1l9.3-5.4l0,0
+	c4.3-1.2,25.9-6.7,32.7,4.9c0,0,0,0,0,0l-6.8,16c0,0-0.1,0-0.1,0C156.5,337.6,148,332.4,136.7,330.8L136.7,330.8z M164.4,346.3
+	C164.4,346.3,164.4,346.3,164.4,346.3l6.2-14.6c0.1,0,0.1,0,0.2,0c0.1-0.1,14.3-6,30.4,2.4c0.1,0.1,0.3,0.1,0.4,0.1l5.7,11
+	c0,0,0,0.1,0,0C189.1,337.9,171.7,343.3,164.4,346.3L164.4,346.3z M211,345.9l-7-13.4c0,0,0,0,0,0c1.2-1.1,3.6-3,7-4.7
+	c5.1-2.5,13.7-5.2,26-3.8c0.3,0,0.6,0,0.8-0.1c0,0,0,0,0,0l11,5.2c0,0,0,0.1,0,0.1C224.6,328.7,214.3,340.9,211,345.9
+	C211.1,345.9,211,345.9,211,345.9L211,345.9z M255.3,311.4c-2.8,6.6-2,13-1,16.8c0,0,0,0-0.1,0l-16.3-7.7c0,0,0,0,0,0
+	c-1.2-2.5-3.5-8.3-1.6-13.6c1.4-3.9,4.8-6.9,10.2-8.8c0.4-0.1,0.6-0.4,0.8-0.7c0,0,0,0,0,0h22.2c0,0,0,0,0,0.1
+	C262.6,300.9,257.8,305.5,255.3,311.4L255.3,311.4z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover.ce0f1ead.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover.ce0f1ead.svg
new file mode 100644
index 00000000000..7703a1ba084
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_cover.ce0f1ead.svg
@@ -0,0 +1,583 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 360 504" style="enable-background:new 0 0 360 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000030462702641642609580000005466037501980492188_);}
+	.st1{fill:#7EAB98;}
+	.st2{fill:#47394F;}
+	.st3{fill:#645665;}
+	.st4{fill:#D0984F;}
+	.st5{enable-background:new    ;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="748.4" y="547.3" width="559.3" height="509"/>
+	</defs>
+	<clipPath id="SVGID_00000122702577340821787020000010962078422223741333_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000122702577340821787020000010962078422223741333_);">
+		<path class="st1" d="M385.5,394l-0.6-0.6l2.6,0c2.5-0.6,5-1.2,7.7-1.6c10.4-1.6,20.6-0.8,30.1,1.8l810.2,5.3
+			c5.6-1.2,11.4-1.9,17.5-1.8c33.6,0.2,60.6,21.3,60.4,47c-0.2,25.1-26.2,45.3-58.7,46c1.5,4.6,2.6,9.4,3.3,14.3
+			c7.5,49.6-26.2,95.7-75.2,103.1c-12,1.8-23.7,1.1-34.8-1.7c0.7,2.4,1.2,4.9,1.6,7.5c5.5,34.9-17.9,67.6-52.4,73
+			c-12.2,1.9-24.1,0.2-34.6-4.4c-7.8,18.8-30.8,32.5-58,32.5c-26.8,0-49.6-13.3-57.7-31.8c-10.7,18.7-31.2,31.4-54.8,31.4
+			c-25.1,0-46.7-14.3-56.7-35.1c-9.6,10.3-23.4,16.8-38.8,16.8c-10.2,0-19.7-2.9-27.8-7.8c-5.9,21-30.3,36.7-59.4,36.7
+			c-33.6,0-60.8-20.8-60.8-46.5c0-0.7,0-1.4,0.1-2.2c-25.7,15.8-54.9,15.6-67.5-1.5c-3.5-4.8-5.4-10.5-5.8-16.7
+			c-9.1,5.5-19.8,8.7-31.3,8.7c-33.1,0-60-26.5-60-59.2c0-9.8,2.4-19,6.6-27.1c-3.8,0.6-7.8,0.9-11.8,0.9
+			c-30.7-0.2-56.7-19.8-66.1-47c-38,3.9-72.7-22.6-78.5-60.7C329.3,437.6,351.6,403.9,385.5,394L385.5,394z"/>
+	</g>
+</g>
+<rect x="-0.9" y="-0.8" class="st2" width="362.8" height="505.6"/>
+<path class="st3" d="M306.3,105.6c-8.2-3.1-25-9.2-25-9.6c1.1-18.7-17.4-33.8-41.6-33.8c-0.5,0-1,0-1.5,0c-8.4,0.2-15.9-3.3-19.5-9
+	c-6.8-11-21.7-18.6-39.1-18.6c-17.9,0-33.2,8-39.7,19.6c-3.3,5.8-10.8,9.5-19.1,9.4c-0.2,0-0.4,0-0.6,0C96,63.7,77.6,78.6,78.4,97
+	c-8.9,2.5-17.7,5.4-26.3,8.6c-6.3,2.4-10.1,7.5-9.8,13.2c5.8,90.5,5.9,170.1,0.2,260.6c-0.4,5.7,3.4,10.8,9.8,13.2
+	c8.6,3.2,17.3,6.1,26.3,8.6c0,0.2-0.1,0.5-0.1,0.8c-1.1,18.6,17.4,33.8,41.6,33.8c0.1,0,0.1,0,0.2,0c8.3,0,15.8,3.7,18.8,9.6
+	c6.1,12.2,21.8,20.9,40.4,20.9c18.5,0,34.2-8.6,40.3-20.8c3-6,10.5-9.8,18.8-9.7c0.3,0,0.6,0,0.9,0c24.2,0,42.7-15.1,41.6-33.8
+	c0-0.4-0.1-0.7-0.1-1.1c8.5-2.4,16.9-5.2,25-8.2c6.3-2.4,10.1-7.5,9.7-13.2c-5.7-90.5-5.6-170.1,0.2-260.6
+	C316.4,113.2,312.6,108,306.3,105.6L306.3,105.6z"/>
+<path class="st4" d="M11.6,29L12,474.6c0,6.6,5.4,12,12,12l311.4,0.2c6.6,0,12-5.4,12-12V28.6c0-6.6-5.4-12-12-12L23.6,17
+	C17,17,11.6,22.4,11.6,29L11.6,29z M277,23.4c0,10.1,7.4,13.7,12.7,13.3l28.5-2.6l-5.1,7.6c-2.1,2.9-4.8,9.2,0.6,13.7
+	c5.5,4.4,11.7,1,14.1-1.6l2.5-2.4l-3,24.5c-0.4,5.3,3.2,12.8,13.3,12.8c0.4,0,0.9,0,1.3-0.1v326.5c-0.2,0-0.4,0-0.6,0
+	c-10.1,0-13.7,7.4-13.3,12.7l2.6,28.5l-7.6-5.1c-2.9-2.1-9.2-4.8-13.6,0.6c-4.4,5.5-1,11.7,1.6,14.1l2.4,2.5l-24.5-3
+	c-5.3-0.4-12.8,3.2-12.8,13.3c0,0.4-193.5,1.5-193.5,1.5c-0.1-10-7.4-13.5-12.7-13.2l-28.5,2.6l5.1-7.6c2.1-2.9,4.8-9.2-0.6-13.6
+	c-5.5-4.4-11.7-1-14.1,1.6l-2.5,2.4l3-24.5c0.4-5.3-3.2-12.8-13.3-12.8c-0.4,0-1.4-327.8-1.4-327.8c0.2,0,0.3,0,0.5,0
+	c10.1,0,13.7-7.4,13.3-12.7l-2.6-28.5l7.6,5.1c2.9,2.1,9.2,4.8,13.6-0.6c4.4-5.5,1-11.7-1.6-14.1L46,34.1l24.5,3
+	c5.3,0.4,12.8-3.2,12.8-13.3C83.3,23.4,277,23.4,277,23.4L277,23.4z"/>
+<g>
+	<path class="st4" d="M81.9,139c-0.5-2-0.9-4-1.4-5.9c-0.3-1.2-0.4-2-0.2-2.4c0.1-0.4,0.4-1,1-1.7c0.5-0.8,1-1.2,1.3-1.2
+		c0.5-0.1,1.1-0.1,1.8,0.1c0.8,0.2,1.3,0.5,1.8,0.8c-0.5,0.5-1,1-1.5,1.5c-0.7-0.4-1.2-0.6-1.6-0.5c-0.1,0-0.3,0.1-0.4,0.4
+		c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2,0,0.7,0.2,1.4c0,0.1,0.1,0.2,0.1,0.3c0.9-0.2,1.8-0.4,2.8-0.6c0.1,0.6,0.3,1.2,0.4,1.8
+		c-0.9,0.2-1.8,0.4-2.8,0.6c0.3,1.4,0.7,2.9,1,4.3C83.3,138.7,82.6,138.9,81.9,139L81.9,139z"/>
+	<path class="st4" d="M86.6,129.5c0.7-0.1,1.4-0.3,2.1-0.4c0.4,1.9,0.8,3.7,1.2,5.6c0,0.2,0.2,0.3,0.4,0.5s0.4,0.2,0.5,0.2
+		c0.1,0,0.4-0.3,0.8-0.8c-0.4-1.9-0.8-3.8-1.2-5.8c0.7-0.1,1.4-0.3,2.1-0.4c0.6,2.7,1.1,5.4,1.7,8.1c-0.5,0.1-1,0.2-1.6,0.3
+		c-0.1-0.3-0.2-0.6-0.4-0.8c-0.6,0.9-1.1,1.3-1.4,1.4s-0.8-0.1-1.6-0.5s-1.2-0.9-1.3-1.4C87.4,133.3,87,131.4,86.6,129.5L86.6,129.5
+		z"/>
+	<path class="st4" d="M97.6,135.6c-0.7,0.1-1.3,0.3-2,0.4c-0.3-1.7-0.7-3.4-1.1-5.2c-0.1-0.5-0.2-0.9-0.4-1.1
+		c-0.2-0.2-0.4-0.5-0.7-0.6c0.5-0.5,1-1,1.5-1.5c0.4,0.2,0.8,0.5,1.1,0.9c0.6-0.8,1.1-1.3,1.4-1.4c0.3-0.1,0.8,0.1,1.6,0.6
+		s1.2,0.9,1.3,1.5c0.2,1,0.4,1.9,0.6,2.9c0.1,0.5,0.2,0.9,0.4,1.1c0.2,0.3,0.4,0.5,0.7,0.6c-0.5,0.5-1,1-1.5,1.5
+		c-0.8-0.4-1.4-1.2-1.6-2.2c-0.2-1.1-0.4-2.2-0.7-3.3c0-0.2-0.2-0.3-0.4-0.5c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.3-0.8,0.8
+		C96.8,131.7,97.2,133.6,97.6,135.6L97.6,135.6z"/>
+	<path class="st4" d="M110.5,124.8c0.3,2.1,0.7,4.1,1,6.2c0.1,0.3,0.4,0.6,0.9,0.8c-0.4,0.5-0.8,0.9-1.2,1.4
+		c-0.2-0.1-0.3-0.2-0.6-0.4s-0.4-0.4-0.6-0.6c-0.7,1-1.2,1.5-1.6,1.5c-0.2,0-0.7-0.1-1.3-0.6s-1.1-0.8-1.3-1.1
+		c-0.2-0.3-0.4-1-0.6-2.1s-0.3-1.8-0.2-2.2c0.1-0.4,0.3-0.8,0.8-1.5c0.5-0.6,0.8-1,1.1-1c0.4-0.1,1,0.2,2,0.8c0-0.3,0-0.6,0-0.9
+		C109.4,125,110,124.9,110.5,124.8L110.5,124.8z M108.7,127.5c-0.1-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.1-0.5-0.1s-0.2,0.1-0.3,0.3
+		c-0.1,0.2-0.2,0.3-0.2,0.4c-0.1,0.2-0.1,0.8,0.1,1.8s0.3,1.6,0.5,1.8c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.1,0.3,0.2,0.4,0.1
+		s0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.4s0-0.7-0.2-1.8C108.9,128.2,108.8,127.6,108.7,127.5L108.7,127.5z"/>
+	<path class="st4" d="M115.5,132.4c-0.7,0.1-1.4,0.2-2,0.3c-0.3-1.7-0.6-3.5-0.8-5.2c-0.1-0.5-0.2-0.9-0.4-1.2s-0.4-0.5-0.7-0.6
+		c0.5-0.5,1-1,1.5-1.4c0.4,0.2,0.8,0.5,1,0.9c0.7-0.8,1.2-1.3,1.5-1.3c0.3-0.1,0.8,0.2,1.6,0.6c0.7,0.5,1.1,1,1.2,1.5
+		c0.1,1,0.3,1.9,0.4,2.9c0.1,0.5,0.2,0.9,0.4,1.2c0.2,0.3,0.4,0.5,0.7,0.7c-0.5,0.5-1,0.9-1.5,1.4c-0.8-0.5-1.3-1.2-1.5-2.3
+		c-0.2-1.1-0.3-2.2-0.5-3.4c0-0.2-0.2-0.3-0.4-0.5c-0.2-0.2-0.4-0.2-0.6-0.2c-0.2,0-0.4,0.3-0.8,0.8
+		C114.9,128.5,115.2,130.5,115.5,132.4L115.5,132.4z"/>
+	<path class="st4" d="M120.4,123.9c0.5-0.6,0.9-0.9,1.2-1c0.3,0,0.8,0.2,1.5,0.6c0-0.2-0.1-0.5-0.1-0.7c-0.1-0.5-0.2-0.9-0.3-1.2
+		c-0.2-0.3-0.4-0.5-0.7-0.7c0.5-0.5,1.1-0.9,1.6-1.4c0.8,0.5,1.3,1.2,1.5,2.3c0.4,3,0.8,6,1.2,8.9c-0.5,0.1-1.1,0.1-1.6,0.2
+		c-0.1-0.3-0.2-0.6-0.3-0.9c-0.7,0.8-1.2,1.3-1.5,1.3c-0.2,0-0.7-0.2-1.3-0.6s-1-0.8-1.1-1.1c-0.2-0.2-0.3-1-0.5-2.2s-0.2-2-0.2-2.3
+		C119.7,125,119.9,124.6,120.4,123.9L120.4,123.9z M123.2,125.3c-0.1-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.5-0.1
+		c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.2-0.2,0.3-0.2,0.4c0,0.2,0,0.7,0.2,1.8c0.1,1,0.3,1.6,0.3,1.8c0.1,0.1,0.2,0.2,0.3,0.4
+		c0.2,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.4c0-0.1,0-0.6,0-1.2c0-0.2-0.1-0.4-0.1-0.6
+		C123.4,126,123.3,125.4,123.2,125.3L123.2,125.3z"/>
+	<path class="st4" d="M129.4,124.4c-0.1-0.4-0.1-0.8-0.1-1.1c0.3-0.1,0.5-0.2,0.8-0.3c-0.1-1.1-0.2-1.8-0.1-2.1
+		c0.1-0.3,0.4-0.7,1.1-1.3s1.1-0.9,1.4-1c0.3,0,0.8,0.1,1.3,0.3c0.5,0.2,0.9,0.5,1.2,0.9c-0.5,0.4-1,0.8-1.4,1.2
+		c-0.4-0.4-0.6-0.6-0.8-0.6c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.3-0.3,0.4c-0.1,0.2,0,0.6,0.1,1.5c0.8-0.1,1.5-0.2,2.2-0.2
+		c0.1,0.5,0.1,1.1,0.2,1.6c-0.7,0.1-1.5,0.2-2.2,0.2c0.2,2,0.5,4,0.7,6c-0.7,0.1-1.4,0.2-2,0.2c-0.2-2-0.5-4-0.7-6
+		C129.9,124.3,129.7,124.3,129.4,124.4z"/>
+	<path class="st4" d="M138,129.5c-0.7,0.1-1.4,0.1-2.1,0.2c-0.2-1.8-0.4-3.5-0.6-5.2c-0.1-0.5-0.2-0.9-0.3-1.2
+		c-0.2-0.3-0.4-0.5-0.7-0.7c0.5-0.4,1.1-0.9,1.6-1.4c0.4,0.3,0.7,0.6,1,1c0.7-0.8,1.2-1.2,1.5-1.2c0.2,0,0.6,0.1,1,0.5
+		s0.8,0.7,0.9,1.2c-0.5,0.4-1.1,0.9-1.6,1.3c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.3-0.3-0.3c-0.2,0-0.5,0.3-0.9,0.7
+		C137.6,125.6,137.8,127.5,138,129.5L138,129.5z"/>
+	<path class="st4" d="M141.2,117.7c0.1,0,0.4,0.1,0.8,0.4c0.4,0.3,0.6,0.5,0.7,0.6c0,0.1-0.2,0.4-0.6,0.7s-0.6,0.6-0.7,0.6
+		s-0.4-0.1-0.8-0.4s-0.6-0.5-0.7-0.6c0-0.1,0.2-0.4,0.6-0.7C140.9,117.9,141.1,117.7,141.2,117.7L141.2,117.7z M140.4,121
+		c0.7-0.1,1.4-0.1,2.1-0.2c0.2,1.8,0.3,3.5,0.5,5.3c0.1,0.5,0.1,0.9,0.3,1.2c0.1,0.3,0.4,0.5,0.7,0.7c-0.5,0.4-1.1,0.9-1.6,1.3
+		c-0.8-0.5-1.2-1.3-1.4-2.4C140.8,124.9,140.6,122.9,140.4,121L140.4,121z"/>
+	<path class="st4" d="M149.4,120.2c0.2,2.6,0.4,5.2,0.6,7.7c0.1,1.3,0.1,2.1,0,2.3c-0.1,0.3-0.5,0.7-1.1,1.3
+		c-0.7,0.6-1.2,0.9-1.5,0.9c-0.4,0-0.8-0.1-1.4-0.4s-1-0.7-1.3-1.1c0.5-0.4,1-0.8,1.5-1.2c0.1,0.1,0.1,0.1,0.2,0.2
+		c0.4,0.4,0.7,0.7,0.9,0.6c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0-0.8,0-1.9c0-0.2,0-0.4,0-0.6
+		c-0.7,0.6-1.1,0.8-1.4,0.9c-0.2,0-0.7-0.2-1.3-0.7c-0.6-0.5-1-0.9-1.1-1.1s-0.2-0.9-0.3-1.9c-0.1-1.1-0.1-1.7,0-2s0.4-0.7,0.9-1.3
+		c0.5-0.6,0.9-0.9,1.2-0.9c0.3,0,0.9,0.3,1.8,0.8c0-0.3,0.1-0.5,0.1-0.8C148.3,120.3,148.9,120.2,149.4,120.2L149.4,120.2z
+		 M147.4,122.7c-0.1-0.1-0.2-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.5-0.2c-0.1,0-0.2,0.1-0.4,0.2c-0.1,0.1-0.2,0.3-0.2,0.4
+		c-0.1,0.2-0.1,0.7,0,1.5c0.1,0.8,0.1,1.3,0.2,1.5c0.1,0.1,0.1,0.2,0.3,0.3s0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.2
+		c0.2-0.2,0.4-0.3,0.4-0.4c0.1-0.1,0.1-0.6,0-1.5C147.5,123.3,147.5,122.8,147.4,122.7L147.4,122.7z"/>
+	<path class="st4" d="M153.3,128.2c-0.7,0-1.4,0.1-2.1,0.1c-0.2-2.8-0.4-5.6-0.6-8.3c0-0.5-0.1-0.9-0.3-1.2
+		c-0.1-0.3-0.4-0.5-0.7-0.7c0.6-0.4,1.1-0.9,1.7-1.3c0.8,0.5,1.2,1.3,1.3,2.4c0,0.5,0.1,0.9,0.1,1.4c0.6-0.6,1.1-0.9,1.4-0.9
+		c0.3,0,0.8,0.2,1.5,0.8c0.7,0.5,1,1.1,1.1,1.6c0.1,1,0.1,2,0.2,2.9c0,0.5,0.1,0.9,0.2,1.2s0.4,0.5,0.6,0.7
+		c-0.6,0.4-1.1,0.8-1.6,1.3c-0.8-0.5-1.2-1.3-1.3-2.4c-0.1-1.1-0.1-2.3-0.2-3.4c0-0.2-0.1-0.3-0.3-0.5c-0.2-0.2-0.4-0.3-0.6-0.2
+		c-0.2,0-0.4,0.2-0.9,0.7C153,124.3,153.1,126.2,153.3,128.2L153.3,128.2z"/>
+	<path class="st4" d="M160.5,121.2c0.1,1.1,0.1,2.2,0.2,3.4c0,0.5,0.2,0.9,0.6,1.3c0.4,0.4,0.8,0.7,1.4,0.9
+		c-0.6,0.4-1.1,0.8-1.7,1.2c-0.6-0.3-1.2-0.6-1.6-1.1c-0.4-0.5-0.7-1-0.7-1.6c-0.1-1.3-0.1-2.7-0.2-4c-0.3,0-0.5,0-0.8,0
+		c0-0.4,0-0.8-0.1-1.2c0.3-0.1,0.5-0.2,0.8-0.2c-0.1-0.5-0.1-0.9-0.2-1.2c-0.1-0.3-0.3-0.6-0.6-0.8c0.6-0.4,1.1-0.8,1.7-1.3
+		c0.8,0.5,1.2,1.3,1.3,2.4c0,0.2,0,0.3,0,0.5c0.6,0,1.2-0.1,1.8-0.1c0,0.5,0.1,1.1,0.1,1.6C161.7,121.1,161.1,121.1,160.5,121.2
+		L160.5,121.2z"/>
+	<path class="st4" d="M168.9,123.3c0,0.2,0,0.4,0,0.6c-1.3,0-2.5,0.1-3.8,0.1c0,0.6,0.1,1.1,0.3,1.4c0.1,0.1,0.1,0.2,0.3,0.4
+		s0.3,0.2,0.4,0.2s0.3-0.1,0.5-0.4c0.2-0.2,0.4-0.6,0.5-0.9c0.6,0.4,1.1,0.7,1.6,1.1c-0.3,0.5-0.7,1-1.2,1.4c-0.6,0.4-1,0.6-1.4,0.6
+		c-0.4,0-0.9-0.2-1.6-0.8c-0.7-0.5-1.1-0.9-1.3-1.2c-0.2-0.3-0.3-1-0.3-2.2c-0.1-1.2,0-1.9,0.1-2.2c0.1-0.3,0.5-0.7,1.2-1.3
+		s1.1-0.8,1.5-0.9c0.3,0,0.8,0.2,1.5,0.8c0.7,0.5,1.1,0.9,1.3,1.2S168.9,122.2,168.9,123.3L168.9,123.3z M166.6,121.5
+		c-0.1-0.1-0.2-0.3-0.4-0.4c-0.2-0.1-0.3-0.2-0.5-0.2c-0.1,0-0.3,0.2-0.5,0.4c-0.2,0.3-0.3,0.7-0.3,1.2c0.6,0,1.2,0,1.8-0.1
+		C166.8,122,166.7,121.6,166.6,121.5L166.6,121.5z"/>
+	<path class="st4" d="M172.4,127.4c-0.7,0-1.4,0-2.1,0.1c0-1.8-0.1-3.5-0.1-5.3c0-0.5-0.1-0.9-0.2-1.2s-0.3-0.5-0.6-0.7
+		c0.6-0.4,1.1-0.8,1.7-1.2c0.4,0.3,0.7,0.6,0.9,1c0.8-0.7,1.3-1.1,1.6-1.1c0.3,0,0.8,0.3,1.5,0.8c0.7,0.6,1,1.1,1,1.7c0,1,0,2,0,3
+		c0,0.5,0.1,0.9,0.2,1.2c0.1,0.3,0.3,0.5,0.6,0.7c-0.6,0.4-1.1,0.8-1.7,1.2c-0.8-0.6-1.1-1.4-1.2-2.5c0-1.1,0-2.3-0.1-3.4
+		c0-0.2-0.1-0.3-0.3-0.5c-0.2-0.2-0.4-0.3-0.5-0.3c-0.2,0-0.5,0.2-0.9,0.7C172.3,123.5,172.3,125.5,172.4,127.4L172.4,127.4z"/>
+	<path class="st4" d="M178.4,115.9c0.1,0,0.4,0.2,0.8,0.5c0.4,0.3,0.6,0.6,0.6,0.7c0,0.1-0.2,0.3-0.6,0.7c-0.4,0.3-0.7,0.5-0.8,0.5
+		s-0.4-0.2-0.8-0.5c-0.4-0.3-0.6-0.6-0.6-0.7c0-0.1,0.2-0.3,0.6-0.7C178.1,116,178.3,115.9,178.4,115.9L178.4,115.9z M177.4,119.1
+		c0.7,0,1.4,0,2.1,0c0,1.8,0,3.5,0,5.3c0,0.5,0.1,0.9,0.2,1.2c0.1,0.3,0.3,0.5,0.6,0.8c-0.6,0.4-1.1,0.8-1.7,1.2
+		c-0.8-0.6-1.1-1.4-1.1-2.5C177.4,123.1,177.4,121.1,177.4,119.1L177.4,119.1z"/>
+	<path class="st4" d="M183,127.3c-0.7,0-1.4,0-2.1,0c0-1.8,0-3.5,0-5.3c0-0.5-0.1-0.9-0.2-1.2s-0.3-0.5-0.6-0.8
+		c0.6-0.4,1.2-0.8,1.7-1.2c0.4,0.3,0.7,0.7,0.9,1.1c0.8-0.7,1.3-1.1,1.7-1.1s0.8,0.3,1.4,0.9c0.6,0.6,1,1.1,0.9,1.7c0,1,0,2,0,3
+		c0,0.5,0.1,0.9,0.2,1.2s0.3,0.5,0.6,0.8c-0.6,0.4-1.1,0.8-1.7,1.2c-0.7-0.6-1.1-1.4-1.1-2.5c0-1.1,0-2.3,0-3.4
+		c0-0.2-0.1-0.4-0.3-0.6s-0.4-0.3-0.5-0.3c-0.2,0-0.5,0.2-0.9,0.6C183,123.4,183,125.4,183,127.3L183,127.3z"/>
+	<path class="st4" d="M194,119.3c-0.1,2.6-0.2,5.2-0.2,7.7c0,1.3-0.1,2.1-0.2,2.3s-0.6,0.6-1.3,1.1c-0.7,0.5-1.3,0.8-1.6,0.8
+		c-0.4,0-0.8-0.2-1.3-0.6c-0.5-0.4-0.9-0.8-1.2-1.2c0.5-0.4,1.1-0.7,1.6-1.1c0.1,0.1,0.1,0.1,0.1,0.2c0.4,0.5,0.6,0.7,0.8,0.7
+		c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.1-0.8,0.1-1.9c0-0.2,0-0.4,0.1-0.6c-0.7,0.5-1.2,0.7-1.5,0.7
+		c-0.2,0-0.6-0.3-1.2-0.8c-0.5-0.6-0.9-1-1-1.2c-0.1-0.3-0.2-0.9-0.1-2s0.1-1.7,0.2-2c0.1-0.3,0.5-0.7,1-1.2c0.6-0.5,1-0.8,1.3-0.8
+		c0.3,0,0.9,0.3,1.7,1c0.1-0.3,0.1-0.5,0.2-0.8C193,119.2,193.5,119.2,194,119.3L194,119.3z M191.8,121.5c-0.1-0.1-0.2-0.3-0.4-0.4
+		c-0.2-0.1-0.4-0.2-0.5-0.2s-0.2,0.1-0.4,0.2c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0.2-0.1,0.7-0.2,1.5s0,1.4,0.1,1.5
+		c0,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.3-0.1,0.5-0.2c0.2-0.1,0.4-0.3,0.5-0.4c0.1-0.1,0.1-0.6,0.1-1.5
+		C191.8,122.2,191.8,121.7,191.8,121.5L191.8,121.5z"/>
+	<path class="st4" d="M200.9,121.2c-0.1,1.1-0.1,2.2-0.2,3.4c0,0.5,0.1,0.9,0.4,1.3c0.3,0.4,0.8,0.8,1.3,1c-0.6,0.4-1.2,0.7-1.8,1.1
+		c-0.6-0.3-1.1-0.7-1.5-1.3c-0.4-0.5-0.6-1.1-0.6-1.6c0.1-1.3,0.1-2.7,0.2-4c-0.3,0-0.5,0-0.8,0c0-0.4,0-0.8,0.1-1.2
+		c0.3-0.1,0.5-0.1,0.8-0.2c0-0.5-0.1-0.9-0.1-1.2s-0.3-0.6-0.6-0.9c0.6-0.4,1.2-0.7,1.8-1.1c0.7,0.6,1.1,1.5,1,2.5
+		c0,0.2,0,0.3,0,0.5c0.6,0,1.2,0.1,1.8,0.1c0,0.5-0.1,1.1-0.1,1.6C202.1,121.2,201.5,121.2,200.9,121.2L200.9,121.2z"/>
+	<path class="st4" d="M204.9,116.6c0.1,0,0.4,0.2,0.8,0.5c0.4,0.3,0.6,0.6,0.6,0.7s-0.2,0.3-0.6,0.6s-0.7,0.5-0.8,0.5
+		c-0.1,0-0.4-0.2-0.7-0.5s-0.6-0.6-0.6-0.7c0-0.1,0.2-0.3,0.6-0.7C204.5,116.7,204.8,116.5,204.9,116.6L204.9,116.6z M203.6,119.7
+		c0.7,0,1.4,0.1,2.1,0.1c-0.1,1.8-0.2,3.5-0.3,5.3c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.3,0.6,0.6,0.8c-0.6,0.4-1.2,0.7-1.8,1.1
+		c-0.7-0.6-1-1.5-1-2.5C203.4,123.7,203.5,121.7,203.6,119.7z"/>
+	<path class="st4" d="M212.6,126.6c-0.2,0.3-0.5,0.7-1.1,1.2c-0.6,0.5-1,0.7-1.3,0.7s-0.7-0.3-1.3-0.9c0,0.4-0.1,0.9-0.1,1.3
+		c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.3,0.6,0.5,0.8c-0.6,0.4-1.2,0.7-1.8,1.1c-0.7-0.6-1-1.5-1-2.6c0.1-2.2,0.3-4.3,0.4-6.5
+		c0.1-1-0.2-1.7-0.7-2.1c0.6-0.4,1.2-0.7,1.8-1.1c0.3,0.2,0.5,0.6,0.8,1.2c0.9-0.7,1.5-1,1.8-1c0.2,0,0.6,0.3,1.2,0.9
+		c0.5,0.6,0.8,1,0.9,1.4s0.1,1.1,0,2.2S212.7,126.2,212.6,126.6L212.6,126.6z M209,125.9c0.1,0.1,0.2,0.3,0.4,0.4
+		c0.2,0.2,0.4,0.2,0.6,0.2c0.1,0,0.4-0.2,0.6-0.5c0.1-0.2,0.3-0.8,0.3-1.8c0.1-1,0-1.6-0.1-1.8c-0.1-0.1-0.1-0.2-0.2-0.4
+		c-0.1-0.1-0.2-0.2-0.3-0.2s-0.3,0.1-0.5,0.2c-0.2,0.1-0.4,0.2-0.5,0.4s-0.2,0.7-0.2,1.8C209,125.2,209,125.8,209,125.9L209,125.9z"
+		/>
+	<path class="st4" d="M219,126.6c0,0.3-0.5,0.8-1.3,1.5c-0.9,0.7-1.5,1-1.9,0.9s-0.9-0.3-1.4-0.7c-0.5-0.4-0.9-0.9-1.2-1.4
+		c0.6-0.3,1.1-0.6,1.7-1c0.5,0.8,0.8,1.1,1.1,1.2c0.2,0,0.4-0.1,0.7-0.2c0.3-0.2,0.4-0.3,0.4-0.4c0,0-0.1-0.1-0.4-0.3
+		s-0.5-0.4-0.9-0.6s-0.7-0.5-1-0.8c-0.3-0.3-0.6-0.6-0.8-1s-0.3-0.8-0.3-1.2c0-0.4,0.4-0.8,1.2-1.4c0.8-0.5,1.3-0.8,1.7-0.8
+		s0.9,0.3,1.4,0.7c0.6,0.4,0.9,0.9,1.2,1.4c-0.6,0.3-1.1,0.6-1.7,0.9c-0.5-0.8-0.8-1.2-1.1-1.2c-0.1,0-0.3,0.1-0.5,0.2
+		c-0.2,0.1-0.3,0.2-0.3,0.3c0,0.1,0.2,0.3,0.5,0.6s0.8,0.5,1.2,0.8c0.4,0.3,0.8,0.7,1.2,1.1C218.9,125.7,219,126.2,219,126.6
+		L219,126.6z"/>
+	<path class="st4" d="M229.6,121.9c-0.2,2.1-0.5,4.2-0.7,6.2c0,0.4,0.2,0.7,0.6,1c-0.5,0.3-1,0.7-1.5,1c-0.1-0.1-0.3-0.3-0.4-0.5
+		s-0.3-0.5-0.4-0.8c-0.9,0.7-1.6,1.1-1.9,1c-0.2,0-0.6-0.3-1.1-0.9s-0.8-1.1-0.9-1.4c-0.1-0.3-0.1-1.1,0-2.2
+		c0.1-1.1,0.2-1.8,0.4-2.2s0.6-0.7,1.2-1.2c0.6-0.5,1.1-0.7,1.3-0.7c0.4,0,0.9,0.5,1.7,1.3c0.1-0.3,0.2-0.6,0.3-0.9
+		C228.6,121.8,229.1,121.8,229.6,121.9L229.6,121.9z M227.2,123.9c-0.1-0.1-0.2-0.3-0.4-0.4c-0.2-0.2-0.4-0.2-0.5-0.3
+		c-0.1,0-0.2,0-0.4,0.2s-0.2,0.2-0.3,0.3c-0.2,0.2-0.3,0.8-0.4,1.8c-0.1,1-0.1,1.6,0,1.8c0,0.1,0.1,0.2,0.2,0.4
+		c0.1,0.2,0.2,0.2,0.3,0.2s0.3,0,0.5-0.2s0.4-0.2,0.5-0.3c0.1-0.1,0.2-0.7,0.3-1.8C227.2,124.7,227.2,124.1,227.2,123.9L227.2,123.9
+		z"/>
+	<path class="st4" d="M232.4,130.5c-0.7-0.1-1.4-0.2-2-0.2c0.2-1.8,0.4-3.5,0.6-5.2c0.1-0.5,0.1-0.9-0.1-1.2
+		c-0.1-0.3-0.3-0.6-0.5-0.8c0.6-0.3,1.2-0.7,1.9-1c0.4,0.3,0.6,0.7,0.7,1.2c0.9-0.6,1.5-0.9,1.8-0.9c0.3,0,0.8,0.4,1.3,1
+		c0.6,0.7,0.8,1.2,0.8,1.8c-0.1,1-0.3,1.9-0.4,2.9c-0.1,0.5-0.1,0.9,0,1.2s0.2,0.6,0.5,0.8c-0.6,0.3-1.2,0.6-1.9,0.9
+		c-0.7-0.7-0.9-1.5-0.8-2.6c0.1-1.1,0.3-2.2,0.4-3.4c0-0.2-0.1-0.4-0.2-0.6c-0.2-0.2-0.3-0.3-0.5-0.3s-0.5,0.2-1,0.5
+		C232.9,126.6,232.6,128.5,232.4,130.5L232.4,130.5z"/>
+	<path class="st4" d="M239.4,123.7c0.6-0.5,1.1-0.7,1.4-0.6s0.7,0.4,1.3,1c0-0.2,0.1-0.5,0.1-0.7c0.1-0.5,0.1-0.9,0-1.2
+		c-0.1-0.3-0.2-0.6-0.5-0.8c0.6-0.3,1.3-0.6,1.9-0.9c0.7,0.7,0.9,1.6,0.8,2.6c-0.4,3-0.9,6-1.3,8.9c-0.5-0.1-1.1-0.2-1.6-0.2
+		c0-0.3,0-0.6-0.1-0.9c-0.9,0.6-1.5,0.9-1.8,0.8c-0.2,0-0.6-0.4-1.1-1s-0.8-1.1-0.8-1.3c-0.1-0.3,0-1,0.1-2.3s0.3-2,0.5-2.2
+		C238.4,124.6,238.8,124.2,239.4,123.7L239.4,123.7z M241.8,125.8c-0.1-0.1-0.2-0.3-0.4-0.5s-0.4-0.3-0.5-0.3s-0.2,0-0.4,0.2
+		c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.2,0.7-0.3,1.8c-0.1,1-0.2,1.6-0.1,1.8c0,0.1,0.1,0.3,0.2,0.4s0.2,0.2,0.3,0.2
+		c0.1,0,0.3,0,0.5-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.2-0.5,0.3-1.2c0-0.2,0.1-0.4,0.1-0.6C241.8,126.5,241.8,125.9,241.8,125.8
+		L241.8,125.8z"/>
+	<path class="st4" d="M250.9,126.4c-0.2,1.1-0.4,2.2-0.6,3.3c-0.1,0.5,0,0.9,0.3,1.4c0.3,0.4,0.7,0.8,1.2,1.2
+		c-0.6,0.3-1.3,0.6-1.9,0.9c-0.6-0.4-1-0.9-1.4-1.4c-0.3-0.6-0.5-1.1-0.4-1.7c0.2-1.3,0.4-2.7,0.6-4c-0.3,0-0.5-0.1-0.8-0.1
+		c0.1-0.4,0.1-0.8,0.2-1.1c0.3,0,0.5,0,0.8-0.1c0.1-0.5,0.1-0.9,0-1.2c-0.1-0.3-0.2-0.6-0.5-0.9c0.6-0.3,1.3-0.6,1.9-0.9
+		c0.7,0.7,0.9,1.6,0.7,2.6c0,0.2-0.1,0.3-0.1,0.4c0.6,0.1,1.2,0.2,1.8,0.3c-0.1,0.5-0.2,1.1-0.3,1.6
+		C252,126.7,251.4,126.6,250.9,126.4L250.9,126.4z"/>
+	<path class="st4" d="M254.8,133.9c-0.7-0.1-1.4-0.2-2-0.4c0.3-1.7,0.6-3.5,0.9-5.2c0.1-0.5,0.1-0.9,0-1.2c-0.1-0.3-0.2-0.6-0.5-0.8
+		c0.6-0.3,1.3-0.6,1.9-0.9c0.3,0.4,0.6,0.8,0.7,1.2c0.9-0.6,1.5-0.8,1.8-0.8c0.2,0,0.5,0.3,0.9,0.7c0.4,0.4,0.5,0.9,0.5,1.4
+		c-0.6,0.3-1.2,0.6-1.9,0.8c0-0.2,0-0.5,0-0.7c-0.1-0.2-0.1-0.4-0.2-0.4c-0.2,0-0.5,0.1-1,0.5C255.4,130,255.1,131.9,254.8,133.9
+		L254.8,133.9z"/>
+	<path class="st4" d="M261.1,123.4c0.1,0,0.3,0.2,0.7,0.6c0.3,0.4,0.5,0.7,0.5,0.8c0,0.1-0.3,0.3-0.7,0.6c-0.5,0.2-0.8,0.4-0.9,0.3
+		c-0.1,0-0.3-0.2-0.7-0.6c-0.3-0.4-0.5-0.7-0.5-0.8c0-0.1,0.3-0.3,0.7-0.6C260.7,123.5,261,123.4,261.1,123.4L261.1,123.4z
+		 M259.4,126.3c0.7,0.1,1.4,0.3,2.1,0.4c-0.3,1.7-0.7,3.5-1,5.2c-0.1,0.5-0.1,0.9,0,1.2c0.1,0.3,0.2,0.6,0.4,0.9
+		c-0.6,0.3-1.3,0.6-1.9,0.8c-0.6-0.7-0.9-1.6-0.6-2.6C258.7,130.2,259.1,128.3,259.4,126.3L259.4,126.3z"/>
+	<path class="st4" d="M261.5,133.4c-0.1-0.4-0.1-1.2,0.1-2.4c0.2-1.3,0.5-2,0.8-2.3c0.2-0.2,0.7-0.5,1.4-0.9s1.2-0.5,1.6-0.4
+		c0.3,0.1,0.8,0.3,1.3,0.9c0.5,0.5,0.8,1,1,1.6c-0.6,0.2-1.2,0.5-1.8,0.7c-0.1-0.3-0.2-0.6-0.4-0.9s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.5,0.1-0.8,0.5c-0.2,0.2-0.4,0.8-0.6,1.8c-0.2,1-0.2,1.6-0.2,1.9c0.1,0.1,0.1,0.3,0.2,0.5c0.1,0.2,0.2,0.3,0.4,0.3
+		c0.1,0,0.3-0.1,0.6-0.2s0.5-0.4,0.7-0.8c0.5,0.5,0.9,0.9,1.4,1.4c-0.4,0.4-0.9,0.8-1.5,1.1c-0.6,0.3-1.1,0.4-1.5,0.3
+		s-0.8-0.4-1.3-1C261.9,134.1,261.6,133.7,261.5,133.4L261.5,133.4z"/>
+	<path class="st4" d="M269.2,136.7c-0.7-0.1-1.4-0.3-2-0.4c0.6-2.7,1.1-5.5,1.7-8.2c0.1-0.5,0.1-0.9,0.1-1.2
+		c-0.1-0.3-0.2-0.6-0.4-0.9c0.6-0.3,1.3-0.5,2-0.8c0.6,0.7,0.8,1.6,0.6,2.7c-0.1,0.6-0.2,1.1-0.4,1.7c1-0.6,1.6-0.9,1.9-0.8
+		c0.3,0.1,0.7,0.4,1.2,1.2s0.8,1.2,0.8,1.6c0,0.2-0.3,0.6-0.8,1.1s-0.9,0.8-1.2,1.1c0.5,1.1,0.8,2,0.9,2.8c-0.7,0.3-1.5,0.6-2.2,0.9
+		c-0.1-0.9-0.2-1.6-0.3-2.2c-0.1-0.6-0.4-1.2-0.8-1.7c0-0.2,0.1-0.4,0.1-0.5c0.4-0.1,0.8-0.4,1.2-0.8s0.7-0.6,0.8-0.8
+		c-0.2-0.4-0.4-0.7-0.6-0.7c-0.1,0-0.3,0-0.6,0.2c-0.3,0.2-0.6,0.3-0.8,0.5C270,133.1,269.6,134.9,269.2,136.7L269.2,136.7z"/>
+	<path class="st4" d="M280.1,136.6c-0.1,0.3-0.6,0.7-1.5,1.2c-1,0.5-1.6,0.7-2,0.7c-0.4-0.1-0.8-0.4-1.3-0.9s-0.8-1-1-1.6
+		c0.6-0.2,1.2-0.5,1.8-0.7c0.4,0.8,0.6,1.2,0.9,1.3c0.2,0,0.4,0,0.7-0.1c0.3-0.1,0.5-0.2,0.5-0.4c0,0-0.1-0.2-0.3-0.4
+		c-0.2-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.6-0.6-0.9-0.9c-0.3-0.3-0.5-0.7-0.7-1.1c-0.2-0.4-0.2-0.8-0.1-1.2c0.1-0.4,0.5-0.8,1.4-1.2
+		c0.8-0.4,1.5-0.6,1.8-0.5c0.4,0.1,0.8,0.4,1.3,0.9c0.5,0.5,0.8,1,1,1.6c-0.6,0.2-1.2,0.4-1.8,0.7c-0.4-0.8-0.6-1.2-0.9-1.3
+		c-0.1,0-0.3,0-0.5,0.1c-0.2,0.1-0.3,0.2-0.4,0.3s0.1,0.3,0.5,0.6c0.3,0.3,0.7,0.6,1.1,1s0.7,0.8,1,1.2
+		C280.1,135.8,280.2,136.2,280.1,136.6L280.1,136.6z"/>
+</g>
+<path class="st4" d="M197.4,63.1c0,0-0.4,7.3-6.8,8.9c1.3-2.2,0-5.4,0-5.4l-3-8.5c-0.4-0.8-1.5-0.7-1.8,0.2l-2,6.7
+	c-0.1-0.1-0.2-0.1-0.3-0.2c-0.2-0.1-0.3-0.1-0.5-0.2c-1.2-1.3-2.7-1.8-3.5-1.2c-0.4,0.3-0.6,0.8-0.5,1.3c-0.7-0.4-1.4-0.6-2.1-0.5
+	l-1.1-6.5c-0.2-0.8-1.3-1-1.8-0.3l-4.1,8.3c0,0-1.1,1.9-1.1,3.8c0,0-0.1,0-0.1-0.1c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0.1,0,0.1
+	c0,0.2,0,0.3,0.1,0.5c0,0.8,0.2,1.7,0.7,2.5c-6.5-1.2-7.3-8.5-7.3-8.5c-5.4,1.2-15.8,11.1-11.6,27.4c0,0,6.6-8.8,16.5-3.9
+	c0,0,1.8-4.3,6-4.1c5.4,0.1,6.5,6.8,6.5,6.8c0.5,0.7,1.7,0.9,2,0.1c1.2-4.3,3.8-7.3,6.1-7.5c4.1-0.5,6.2,3.7,6.2,3.7
+	c9.6-5.5,16.8,2.8,16.8,2.8C213.9,73.1,202.9,64,197.4,63.1L197.4,63.1z"/>
+<path class="st4" d="M163.6,440c0,0,0.4-7.3,6.8-8.9c-1.3,2.2,0,5.4,0,5.4l3,8.5c0.4,0.8,1.5,0.7,1.8-0.2l2-6.7
+	c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.3,0.1,0.5,0.2c1.2,1.3,2.7,1.8,3.5,1.2c0.4-0.3,0.6-0.8,0.5-1.3c0.7,0.4,1.4,0.6,2.1,0.5
+	l1.1,6.5c0.2,0.9,1.3,1,1.8,0.3l4.1-8.3c0,0,1.1-1.9,1.1-3.8c0,0,0.1,0,0.1,0c0-0.1-0.1-0.2-0.1-0.3c0,0,0-0.1,0-0.1
+	c0-0.2,0-0.3-0.1-0.5c0-0.8-0.2-1.7-0.7-2.5c6.5,1.2,7.3,8.5,7.3,8.5c5.4-1.2,15.8-11.1,11.6-27.4c0,0-6.6,8.8-16.5,3.9
+	c0,0-1.8,4.3-6,4.1c-5.4-0.1-6.5-6.8-6.5-6.8c-0.5-0.7-1.7-0.9-2-0.1c-1.2,4.3-3.8,7.3-6.1,7.5c-4.1,0.5-6.2-3.7-6.2-3.7
+	c-9.6,5.5-16.8-2.9-16.8-2.9C147.2,430,158.1,439.2,163.6,440L163.6,440z"/>
+<g>
+	<g>
+		<path class="st4" d="M106.9,179.7c-2,0.5-4,1.1-6,1.6c-2.2-7.7-4.3-15.4-6.5-23.1c-0.4-1.4-0.9-2.5-1.5-3.1
+			c-0.6-0.6-1.4-1.2-2.5-1.5c1.5-1.6,3-3.2,4.6-4.8c2.8,1,4.6,2.9,5.4,5.9c0.3,1.3,0.7,2.6,1,3.9c1.6-2.1,2.9-3.2,3.8-3.4
+			c0.9-0.2,2.6,0.2,5,1.3c2.4,1.1,3.7,2.5,4,4c0.6,2.8,1.2,5.5,1.8,8.3c0.3,1.5,0.8,2.6,1.3,3.3s1.3,1.3,2.2,1.7
+			c-1.5,1.5-2.9,2.9-4.3,4.4c-2.6-1.1-4.2-3.2-4.9-6.1c-0.8-3.2-1.5-6.3-2.3-9.5c-0.1-0.5-0.5-0.9-1.2-1.3c-0.7-0.4-1.3-0.5-1.8-0.4
+			c-0.5,0.1-1.3,0.9-2.3,2.5C104.1,168.8,105.5,174.2,106.9,179.7L106.9,179.7z"/>
+		<path class="st4" d="M129,174.9c-2,0.4-4.1,0.7-6.1,1.1c-1-4.9-2-9.9-3-14.9c-0.3-1.5-0.7-2.6-1.3-3.3s-1.3-1.3-2.3-1.8
+			c1.6-1.5,3.2-2.9,4.8-4.4c1.4,0.6,2.4,1.5,3.3,2.5c2.1-2.5,3.6-3.8,4.6-3.9c0.7-0.1,1.8,0.3,3.3,1.1c1.5,0.9,2.5,1.9,2.9,3.2
+			c-1.6,1.4-3.2,2.8-4.7,4.1c-0.1-0.7-0.4-1.3-0.9-1.9c-0.4-0.6-0.8-0.9-1.1-0.8c-0.6,0.1-1.4,0.9-2.6,2.3
+			C127,163.8,128,169.4,129,174.9L129,174.9z"/>
+		<path class="st4" d="M150.7,170.2c-1.8,1.6-3.1,2.5-4,2.6c-0.9,0.1-2.4-0.4-4.5-1.6c-2.1-1.2-3.4-2.1-4-2.7c-0.8-1-1.5-3.2-2-6.8
+			c-0.5-3.6-0.5-5.9,0-7.1c0.4-0.8,1.4-2,3.3-3.7c1.9-1.7,3.3-2.6,4.2-2.7c1-0.1,2.6,0.4,4.8,1.6c2.2,1.2,3.5,2.2,4.1,2.8
+			c0.8,1,1.3,3.3,1.6,6.9c0.3,3.6,0.2,5.9-0.4,7.1C153.5,167.4,152.4,168.5,150.7,170.2L150.7,170.2z M144.9,167.2
+			c0.5,0.4,0.9,0.6,1.2,0.5s0.6-0.3,1.1-0.8c0.4-0.5,0.8-0.9,0.9-1.3c0.3-0.7,0.4-2.5,0-5.5s-0.7-4.8-1.2-5.4
+			c-0.3-0.3-0.7-0.7-1.2-1.1c-0.6-0.4-1-0.6-1.3-0.5c-0.3,0-0.7,0.3-1.1,0.8s-0.8,0.9-1,1.3c-0.4,0.7-0.3,2.5,0.1,5.5
+			c0.4,3,0.8,4.8,1.3,5.4C144,166.5,144.4,166.9,144.9,167.2L144.9,167.2z"/>
+		<path class="st4" d="M175.2,170.3c-2.1,0-4.1,0.1-6.1,0.2c-0.2-5.4-0.4-10.9-0.7-16.3c0-0.5-0.3-1-0.9-1.5
+			c-0.6-0.5-1.1-0.8-1.5-0.7c-0.4,0-1.1,0.4-1.9,1.2c0.3,5.9,0.6,11.8,1,17.6c-2.1,0.1-4.1,0.2-6.1,0.4c-0.4-5-0.8-10.1-1.1-15.1
+			c-0.1-1.5-0.4-2.6-0.9-3.4c-0.5-0.8-1.1-1.4-2.1-2c1.7-1.3,3.5-2.5,5.2-3.8c1.2,0.7,2,1.5,2.6,2.3c2.1-1.8,3.5-2.7,4.4-2.8
+			c0.5,0,1.3,0.3,2.5,0.9s2.2,1.3,3.2,2.2c2.6-2.3,4.4-3.4,5.4-3.4c1,0,2.6,0.8,4.6,2.4s3,3.3,3,4.8c0,2.8-0.1,5.6-0.1,8.5
+			c0,1.5,0.1,2.6,0.5,3.5c0.4,0.8,0.9,1.6,1.8,2.2c-1.8,1.1-3.5,2.2-5.2,3.3c-2.2-1.7-3.4-4-3.4-7.1c0-3.2,0-6.5-0.1-9.8
+			c0-0.5-0.3-1-0.9-1.6c-0.6-0.5-1.1-0.8-1.5-0.8c-0.4,0-1.1,0.4-2.1,1.1c0.1,0.3,0.1,0.5,0.1,0.7C175,159,175.1,164.6,175.2,170.3
+			L175.2,170.3z"/>
+		<path class="st4" d="M207.4,159.4c0,0.5-0.1,1.1-0.1,1.6c-3.9-0.3-7.8-0.6-11.6-0.8c-0.1,1.8,0.1,3.1,0.5,4.2
+			c0.1,0.4,0.4,0.7,0.8,1.1s0.8,0.6,1.2,0.6c0.4,0,1-0.3,1.7-1c0.7-0.7,1.3-1.5,1.7-2.4c1.6,1.2,3.1,2.4,4.6,3.6
+			c-1,1.4-2.4,2.6-4.2,3.5s-3.2,1.4-4.3,1.4c-1.1-0.1-2.5-0.9-4.5-2.5c-1.9-1.6-3.2-2.9-3.6-3.8c-0.4-0.9-0.6-3-0.5-6.4
+			c0.1-3.4,0.4-5.5,0.9-6.4c0.5-0.9,1.8-2,4-3.5c2.2-1.5,3.8-2.2,4.9-2.1c1,0.1,2.6,0.9,4.6,2.6s3.2,3,3.6,3.9
+			C207.6,153.9,207.7,156.1,207.4,159.4L207.4,159.4z M201,153.4c-0.2-0.4-0.6-0.8-1.1-1.2c-0.5-0.4-1-0.6-1.4-0.6
+			c-0.4,0-1,0.3-1.6,1.1c-0.6,0.8-1,1.9-1.2,3.4c1.9,0.1,3.7,0.2,5.6,0.3C201.3,154.8,201.2,153.8,201,153.4L201,153.4z"/>
+		<path class="st4" d="M217.7,153.2c-0.4,3.2-0.7,6.4-1.1,9.6c-0.2,1.4,0.2,2.7,1.1,3.9s2.1,2.3,3.8,3.2c-1.9,0.9-3.7,1.8-5.5,2.7
+			c-1.8-1-3.2-2.3-4.3-3.9c-1.1-1.6-1.6-3.1-1.5-4.8c0.4-3.9,0.7-7.7,1.1-11.5c-0.8-0.1-1.6-0.1-2.5-0.2c0.1-1.1,0.2-2.2,0.3-3.3
+			c0.9-0.1,1.7-0.2,2.5-0.3c0.1-1.4,0-2.6-0.3-3.4s-0.8-1.7-1.7-2.6c2-1,3.9-1.9,5.9-2.8c2.3,1.9,3.2,4.4,2.9,7.5
+			c-0.1,0.4-0.1,0.9-0.1,1.3c1.9,0.2,3.7,0.4,5.6,0.7c-0.2,1.5-0.4,3.1-0.6,4.6C221.4,153.7,219.5,153.5,217.7,153.2L217.7,153.2z"
+			/>
+		<path class="st4" d="M234.8,173.4c-2.1,1.1-3.6,1.5-4.5,1.4s-2.2-1.1-3.8-2.8c-1.7-1.7-2.7-2.9-3.1-3.7c-0.5-1.2-0.5-3.5,0-7.1
+			s1.1-5.8,2-6.8c0.6-0.6,1.9-1.5,4.2-2.6s3.9-1.6,4.8-1.4c1,0.2,2.4,1.1,4.1,2.9c1.8,1.8,2.8,3.1,3.1,3.8c0.5,1.2,0.4,3.5-0.3,7.1
+			c-0.7,3.5-1.5,5.8-2.3,6.7C238.4,171.5,237,172.3,234.8,173.4L234.8,173.4z M230.1,169c0.4,0.5,0.8,0.8,1,0.8s0.7-0.1,1.3-0.5
+			s1-0.7,1.3-1c0.5-0.6,1-2.3,1.6-5.3c0.5-2.9,0.6-4.8,0.3-5.5c-0.2-0.4-0.5-0.8-0.9-1.4s-0.8-0.8-1.1-0.9s-0.7,0.1-1.3,0.4
+			c-0.6,0.4-1,0.7-1.3,1c-0.5,0.6-1,2.3-1.5,5.3c-0.5,2.9-0.5,4.8-0.2,5.5C229.4,168,229.7,168.4,230.1,169L230.1,169z"/>
+		<path class="st4" d="M241.5,176.3c1.6-7.8,3.2-15.6,4.8-23.5c0.3-1.5,0.3-2.6,0.1-3.5s-0.7-1.7-1.5-2.5c2.1-0.7,4.1-1.5,6.2-2.2
+			c2.1,2.2,2.8,4.7,2.1,7.7c-0.3,1.3-0.6,2.6-0.9,3.9c2.3-1.1,3.9-1.5,4.8-1.3c0.9,0.2,2,1.3,3.4,3.3s2.1,3.4,2.2,4.1
+			c0.2,0.8-0.2,3-1.2,6.5c-0.9,3.5-1.7,5.6-2.2,6.2c-0.4,0.6-1.7,1.5-3.7,2.6c-2.1,1.1-3.4,1.6-4.1,1.4c-1.1-0.3-2.5-1.7-4.4-4.3
+			c-0.4,0.8-0.7,1.7-1.1,2.5C244.5,177,243,176.7,241.5,176.3L241.5,176.3z M249.3,171.2c0.1,0.4,0.5,0.9,1.1,1.4s1,0.9,1.4,0.9
+			c0.3,0.1,0.8,0,1.2-0.3c0.5-0.3,0.9-0.6,1.1-0.9s0.8-2,1.5-4.9c0.7-2.9,1-4.6,0.9-5c-0.1-0.4-0.3-0.9-0.6-1.4
+			c-0.3-0.5-0.6-0.8-1-0.8c-0.3-0.1-0.9,0-1.7,0.2c-0.8,0.2-1.3,0.4-1.6,0.7c-0.4,0.4-0.9,2.1-1.6,5.1
+			C249.4,169.1,249.1,170.8,249.3,171.2L249.3,171.2z"/>
+		<path class="st4" d="M281,174.8c-0.2,0.5-0.3,1-0.5,1.5c-3.7-1.3-7.5-2.5-11.2-3.6c-0.5,1.7-0.7,3.1-0.5,4.2
+			c0,0.4,0.2,0.8,0.5,1.3c0.3,0.5,0.6,0.8,1.1,0.9c0.4,0.1,1.1,0,1.9-0.5s1.6-1.1,2.3-1.9c1.3,1.5,2.5,3.1,3.7,4.6
+			c-1.3,1.1-2.9,1.9-4.9,2.4c-2,0.5-3.5,0.6-4.5,0.3c-1-0.3-2.3-1.5-3.8-3.6s-2.4-3.6-2.6-4.5s0.1-3.1,1-6.4s1.7-5.3,2.4-6
+			s2.3-1.5,4.8-2.4c2.5-0.9,4.3-1.2,5.2-0.9s2.3,1.5,3.9,3.7c1.6,2.1,2.5,3.7,2.6,4.7C282.5,169.5,282,171.6,281,174.8L281,174.8z
+			 M276.2,167.4c-0.1-0.4-0.4-0.9-0.8-1.4c-0.4-0.5-0.8-0.8-1.2-1s-1,0.1-1.8,0.7s-1.4,1.6-2,3.1c1.8,0.5,3.6,1.1,5.4,1.6
+			C276.2,168.8,276.3,167.8,276.2,167.4L276.2,167.4z"/>
+		<path class="st4" d="M286.8,189.5c-2-0.7-3.9-1.4-5.9-2.1c1.7-4.8,3.4-9.5,5.1-14.3c0.5-1.4,0.7-2.6,0.6-3.5s-0.5-1.8-1.1-2.7
+			c2.1-0.5,4.2-0.9,6.4-1.3c0.9,1.2,1.4,2.5,1.6,3.9c3.1-1,5.1-1.3,6-1c0.6,0.2,1.4,1.1,2.3,2.7c0.9,1.5,1.2,2.9,0.9,4.2
+			c-2.1,0.4-4.2,0.7-6.2,1.1c0.2-0.7,0.3-1.4,0.2-2.1s-0.2-1.2-0.5-1.3c-0.5-0.2-1.7,0-3.4,0.7C290.8,178.9,288.8,184.2,286.8,189.5
+			L286.8,189.5z"/>
+	</g>
+	<path class="st4" d="M63.2,182.9c-0.8-2-1.7-4.1-2.5-6.1c-2.2-5.4-3.2-9.1-2.8-11.1s1.8-4.9,4.2-8.9c2.5-4,4.6-6.2,6.4-6.9
+		c3-1.1,6.9-0.8,11.6,0.8c4.7,1.6,8,4.1,10,7.2c-2.4,2.6-4.7,5.2-7,7.9c-1.6-2.1-3.7-3.9-6.2-5.3s-4.2-2-4.9-1.7
+		c-1.3,0.5-2.4,2.1-3.3,4.9c-0.4,1.1,0.4,4.1,2.2,9c0.8,2.1,1.6,4.1,2.3,6.2c1.9,5.1,3.3,7.8,4.2,8.3c2.3,1.6,4.1,2.2,5.2,1.8
+		c0.7-0.2,1.5-1.5,2.6-3.8c1.1-2.3,1.7-4.7,1.8-7.1c3.3,0.9,6.5,1.8,9.8,2.7c0,3.4-1.3,6.9-3.8,10.5c-2.5,3.6-4.9,5.9-7.5,6.8
+		c-1.5,0.5-4.2,0-8.2-1.5c-4-1.5-6.9-2.7-8.4-3.9S65.5,188.3,63.2,182.9L63.2,182.9z"/>
+</g>
+<g class="st5">
+	<path class="st4" d="M56.8,256.7v2.4h-7.4v-14.3h2.8v11.8H56.8z"/>
+	<path class="st4" d="M58.8,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C58.3,244.1,58.7,243.9,58.8,243.9z M57.4,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M61,251.1v-1.5l1-0.2c0-1.5,0.1-2.5,0.2-2.8c0.1-0.3,0.7-0.9,1.5-1.6c0.9-0.7,1.5-1.1,1.9-1.1s0.9,0.2,1.6,0.6
+		c0.6,0.4,1.1,0.8,1.4,1.3l-2,1.3c-0.4-0.6-0.7-0.9-1-0.9c-0.1,0-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5
+		c-0.1,0.2-0.1,0.8-0.1,1.9h2.9v2.1h-2.9v8H62v-8H61z"/>
+	<path class="st4" d="M71.4,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		c-0.6-0.7-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1
+		H71.4z"/>
+	<path class="st4" d="M84.8,248.2h2.7v10.3c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,0.9-1.6,1.7s-1.5,1.1-2,1.1c-0.4,0-1-0.2-1.7-0.7
+		c-0.7-0.5-1.2-1-1.6-1.6l2.1-1.4l0.2,0.3c0.5,0.6,0.8,1,1,1c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.4-0.4,0.4-0.5
+		c0.1-0.2,0.1-0.8,0.1-1.9v-1.1c-0.8,0.7-1.3,1.1-1.7,1.1c-0.4,0-1-0.4-1.8-1.1c-0.8-0.8-1.3-1.5-1.3-2.2v-3.5
+		c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v4.1c0,0.2,0.1,0.5,0.4,0.7c0.3,0.3,0.5,0.4,0.7,0.4
+		c0.2,0,0.5-0.3,1.1-0.8V248.2z"/>
+	<path class="st4" d="M94.4,258.4c-0.8,0.7-1.4,1-1.8,1s-1-0.3-1.8-1c-0.8-0.7-1.3-1.2-1.5-1.5c-0.3-0.5-0.4-1.6-0.4-3.3
+		c0-1.7,0.1-2.7,0.4-3.2c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.8-1s1,0.3,1.8,1s1.3,1.2,1.5,1.5c0.3,0.5,0.4,1.6,0.4,3.2
+		c0,1.7-0.1,2.8-0.4,3.3C95.8,257.2,95.2,257.7,94.4,258.4z M92.1,256.7c0.2,0.2,0.4,0.3,0.5,0.3s0.3-0.1,0.5-0.3
+		c0.2-0.2,0.4-0.4,0.5-0.5c0.2-0.3,0.3-1.1,0.3-2.5c0-1.4-0.1-2.2-0.3-2.5c-0.1-0.2-0.2-0.3-0.5-0.5c-0.2-0.2-0.4-0.3-0.5-0.3
+		s-0.3,0.1-0.5,0.3c-0.2,0.2-0.4,0.4-0.5,0.5c-0.2,0.3-0.3,1.1-0.3,2.5s0.1,2.2,0.3,2.5C91.7,256.3,91.9,256.5,92.1,256.7z"/>
+	<path class="st4" d="M97.4,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11h-2.1
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1c-0.8-0.8-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M109.6,259.1h-2.7v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8c0.6,0.5,0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M125.6,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1s1.1,0.8,1.6,1.3C125.3,254.7,125.6,255.3,125.6,255.8z"/>
+	<path class="st4" d="M134.3,256.5c-0.2,0.4-0.6,1-1.4,1.8c-0.7,0.7-1.3,1.1-1.6,1.1c-0.4,0-1-0.4-1.8-1.1v1.8
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3v-8.7c0-1.3-0.3-2.2-1-2.8l2.2-1.6
+		c0.4,0.3,0.7,0.8,1.1,1.5c1.1-1,1.8-1.5,2.3-1.5c0.3,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.4,1.8c0.2,0.4,0.3,1.4,0.3,2.9
+		S134.5,256.1,134.3,256.5z M129.7,256c0.1,0.2,0.3,0.3,0.6,0.5c0.3,0.2,0.5,0.3,0.7,0.3c0.2,0,0.4-0.3,0.7-0.8
+		c0.2-0.3,0.3-1.1,0.3-2.4c0-1.3-0.1-2.1-0.3-2.4c-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.3-0.3-0.4-0.3s-0.4,0.1-0.7,0.3
+		c-0.3,0.2-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1-0.1,2.4C129.6,255.1,129.6,255.9,129.7,256z"/>
+	<path class="st4" d="M137,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C136.5,244.1,136.9,243.9,137,243.9z M135.6,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M142.9,259.1h-2.7v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8c0.6,0.5,0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5
+		c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M148.5,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C148.1,244.1,148.4,243.9,148.5,243.9z M147.1,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M154.4,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		c-0.6-0.7-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1
+		H154.4z"/>
+	<path class="st4" d="M164.9,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1s1.1,0.8,1.6,1.3C164.6,254.7,164.9,255.3,164.9,255.8z"/>
+	<path class="st4" d="M182.5,251.2v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2c-0.9,0.9-1.5,1.4-1.9,1.4
+		c-0.5,0-1.3-0.8-2.4-2.3c-1.1,1.5-1.9,2.3-2.4,2.3c-0.4,0-1-0.5-1.9-1.4s-1.4-1.6-1.6-2s-0.2-1.4-0.2-3v-4.8h2.7v4.8
+		c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4s0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7c0.1-0.2,0.2-0.8,0.2-1.8
+		v-5.5h2.7v4.8c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4c0.1,0,0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7
+		c0.1-0.2,0.2-1.1,0.2-2.5v-0.9c0-1.2-0.3-2-0.8-2.6l2-1.6C182,248.7,182.5,249.8,182.5,251.2z"/>
+	<path class="st4" d="M185,243.9c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9s-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C184.5,244.1,184.8,243.9,185,243.9z M183.6,248.2h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V248.2z"/>
+	<path class="st4" d="M190.9,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8c0.4,0.5,1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6
+		s-0.8-1.4-0.8-2.1v-5.4h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H190.9z"
+		/>
+	<path class="st4" d="M197.4,259.1h-2.7V248c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v1.9
+		c0.8-0.7,1.5-1.1,1.8-1.1c0.4,0,1,0.4,1.8,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M215.8,255.8c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5s-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		c-0.5-0.3-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		s1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1c0.6,0.3,1.1,0.8,1.6,1.3C215.6,254.7,215.8,255.3,215.8,255.8z"/>
+	<path class="st4" d="M216.6,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11H222
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1s-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M233.6,256.5c-0.2,0.4-0.6,1-1.4,1.8c-0.7,0.7-1.3,1.1-1.6,1.1s-1-0.4-1.8-1.1v1.8c0,0.7,0.1,1.2,0.2,1.6
+		c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3v-8.7c0-1.3-0.3-2.2-1-2.8l2.2-1.6c0.4,0.3,0.7,0.8,1.1,1.5
+		c1.1-1,1.8-1.5,2.3-1.5c0.3,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.4,1.8c0.2,0.4,0.3,1.4,0.3,2.9S233.8,256.1,233.6,256.5z M229,256
+		c0.1,0.2,0.3,0.3,0.6,0.5c0.3,0.2,0.5,0.3,0.7,0.3c0.2,0,0.4-0.3,0.7-0.8c0.2-0.3,0.3-1.1,0.3-2.4c0-1.3-0.1-2.1-0.3-2.4
+		c-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.3-0.3-0.4-0.3s-0.4,0.1-0.7,0.3c-0.3,0.2-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1-0.1,2.4
+		C228.8,255.1,228.9,255.9,229,256z"/>
+	<path class="st4" d="M242.3,253.6v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.5,0-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C242.2,251.1,242.3,252.1,242.3,253.6z M239.5,251.1c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C239.7,251.7,239.6,251.2,239.5,251.1z"/>
+	<path class="st4" d="M246.7,259.1H244v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8s0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5c-0.2,0-0.6,0.3-1.2,0.9
+		V259.1z"/>
+	<path class="st4" d="M254.1,259.1h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V259.1z"/>
+	<path class="st4" d="M268.3,248.2v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H268.3z M265.5,251.3c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C265.6,252.2,265.6,251.4,265.5,251.3z"/>
+	<path class="st4" d="M273.2,250.3v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3l-2.2,1.6c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H273.2z"/>
+	<path class="st4" d="M276.5,248.2h2.7v7.6c0,0.2,0.1,0.5,0.3,0.7c0.2,0.3,0.4,0.4,0.6,0.4c0.2,0,0.6-0.3,1.2-0.8v-7.8h2.7v11h-2.1
+		l-0.2-1.2c-1,1-1.7,1.4-2.1,1.4s-1-0.4-1.8-1.1s-1.2-1.5-1.2-2.2V248.2z"/>
+	<path class="st4" d="M288.7,259.1H286v-7c0-0.7-0.1-1.2-0.3-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4c0.3,0,0.7,0.3,1.2,0.8s0.9,1.1,1,1.6l-2.2,1.6c0-0.3-0.1-0.6-0.2-1s-0.3-0.5-0.4-0.5c-0.2,0-0.6,0.3-1.2,0.9
+		V259.1z"/>
+	<path class="st4" d="M300.5,248.2v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H300.5z M297.6,251.3c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C297.8,252.2,297.7,251.4,297.6,251.3z"/>
+	<path class="st4" d="M302,243.9h2.7v11.3c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6c-1-0.8-1.5-1.9-1.5-3.3V243.9z"/>
+</g>
+<g class="st5">
+	<path class="st4" d="M90.4,273.8v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2S87,282,86.6,282c-0.5,0-1.3-0.8-2.4-2.3
+		c-1.1,1.5-1.9,2.3-2.4,2.3c-0.4,0-1-0.5-1.9-1.4s-1.4-1.6-1.6-2s-0.2-1.4-0.2-3v-4.8h2.7v4.8c0,1.4,0,2.3,0.1,2.5
+		c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4s0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7c0.1-0.2,0.2-0.8,0.2-1.8v-5.5h2.7v4.8
+		c0,1.4,0,2.3,0.1,2.5c0.1,0.3,0.2,0.5,0.4,0.8s0.3,0.4,0.5,0.4c0.1,0,0.3-0.1,0.5-0.4c0.2-0.3,0.3-0.5,0.4-0.7
+		c0.1-0.2,0.2-1.1,0.2-2.5v-0.9c0-1.2-0.3-2-0.8-2.6l2-1.6C89.9,271.3,90.4,272.4,90.4,273.8z"/>
+	<path class="st4" d="M98.9,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C98.8,273.7,98.9,274.6,98.9,276.2z M96,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C96.2,274.3,96.2,273.8,96,273.6z"/>
+	<path class="st4" d="M100.6,281.7v-11.1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v1.9
+		c0.8-0.7,1.4-1.1,1.8-1.1c0.4,0,0.9,0.4,1.6,1.1c0.7,0.7,1.2,1.3,1.3,1.6c0.1,0.3,0.2,1.4,0.2,3c0,1.7-0.1,2.7-0.2,3
+		c-0.1,0.3-0.5,0.9-1.3,1.6c-0.7,0.7-1.3,1.1-1.6,1.1c-0.5,0-1.2-0.5-2.3-1.5l-0.2,1.2H100.6z M103.4,278.6c0.1,0.2,0.3,0.3,0.6,0.5
+		c0.3,0.2,0.5,0.3,0.7,0.3s0.3-0.1,0.5-0.3c0.2-0.2,0.3-0.4,0.4-0.5c0.1-0.2,0.1-1,0.1-2.4c0-1.4,0-2.2-0.1-2.4
+		c-0.1-0.2-0.2-0.4-0.4-0.5s-0.3-0.3-0.5-0.3s-0.4,0.1-0.7,0.3c-0.3,0.2-0.5,0.3-0.6,0.5c-0.1,0.2-0.2,1-0.2,2.5
+		C103.2,277.6,103.3,278.4,103.4,278.6z"/>
+	<path class="st4" d="M115.2,271.6c0.7-0.7,1.3-1.1,1.6-1.1s1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6
+		c1,0.8,1.5,1.9,1.5,3.3v12h-2.1l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.1-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C114,272.8,114.4,272.3,115.2,271.6z M118.5,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C118.6,274.8,118.6,274,118.5,273.8z"/>
+	<path class="st4" d="M129.8,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C129.7,273.7,129.8,274.6,129.8,276.2z M126.9,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C127.1,274.3,127,273.8,126.9,273.6z"/>
+	<path class="st4" d="M138.7,273.8v1.8c0,1.6-0.1,2.6-0.3,3c-0.2,0.4-0.7,1.1-1.6,2c-0.9,0.9-1.6,1.4-2,1.4s-1.1-0.5-2-1.4
+		c-0.9-0.9-1.5-1.6-1.6-2c-0.2-0.4-0.3-1.4-0.3-3v-4.8h2.7v4.8c0,1.4,0.1,2.3,0.2,2.5c0.1,0.3,0.3,0.5,0.5,0.8
+		c0.2,0.3,0.4,0.4,0.6,0.4s0.3-0.1,0.6-0.4c0.2-0.3,0.4-0.5,0.5-0.8c0.1-0.3,0.2-1.1,0.2-2.5v-0.9c0-0.7-0.1-1.2-0.2-1.6
+		c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6C138.2,271.3,138.7,272.4,138.7,273.8z"/>
+	<path class="st4" d="M145.9,266.5c0.1,0,0.5,0.2,1,0.7c0.5,0.4,0.8,0.7,0.8,0.9c0,0.2-0.3,0.5-0.8,0.9c-0.5,0.4-0.9,0.7-1,0.7
+		c-0.1,0-0.5-0.2-1-0.7c-0.5-0.4-0.8-0.7-0.8-0.9s0.3-0.5,0.8-0.9C145.4,266.7,145.7,266.5,145.9,266.5z M144.5,270.7h2.7v7
+		c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1L146,282c-1-0.8-1.5-1.9-1.5-3.3V270.7z"/>
+	<path class="st4" d="M149.9,271.6c0.7-0.7,1.3-1.1,1.6-1.1s1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1l2.2-1.6
+		c1,0.8,1.5,1.9,1.5,3.3v12H154l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.1-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C148.7,272.8,149.2,272.3,149.9,271.6z M153.2,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C153.4,274.8,153.3,274,153.2,273.8z"/>
+	<path class="st4" d="M164.5,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8s-1.4,0.8-1.8,0.8s-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C164.4,273.7,164.5,274.6,164.5,276.2z M161.6,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C161.8,274.3,161.7,273.8,161.6,273.6z"/>
+	<path class="st4" d="M173.2,270.7v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H173.2z M170.4,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		c-0.3-0.2-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5s0.1-0.9,0.2-2.4
+		C170.5,274.8,170.5,274,170.4,273.8z"/>
+	<path class="st4" d="M182,278.4c0,0.4-0.5,1.1-1.6,2.1c-1,1-1.8,1.5-2.3,1.5c-0.5,0-1.1-0.3-1.9-0.8s-1.3-1.1-1.7-1.8l2.1-1.4
+		c0.7,1,1.2,1.4,1.5,1.4c0.2,0,0.5-0.1,0.9-0.3c0.3-0.2,0.5-0.4,0.5-0.7c0-0.1-0.2-0.2-0.5-0.4c-0.3-0.2-0.7-0.4-1.2-0.7
+		s-0.9-0.6-1.4-0.9c-0.5-0.3-0.9-0.8-1.2-1.3c-0.3-0.5-0.5-1-0.5-1.5s0.5-1.2,1.4-2s1.6-1.2,2.1-1.2c0.5,0,1.1,0.3,1.9,0.8
+		c0.8,0.5,1.3,1.1,1.7,1.8l-2.1,1.4c-0.7-1-1.2-1.4-1.5-1.4c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.4,0.3-0.4,0.5s0.2,0.4,0.7,0.7
+		c0.5,0.3,1,0.6,1.6,1c0.6,0.3,1.1,0.8,1.6,1.3C181.7,277.3,182,277.9,182,278.4z"/>
+	<path class="st4" d="M195,270.7v8.3c0.1,0.5,0.4,0.9,1,1.3l-1.8,1.6c-0.2-0.1-0.4-0.3-0.7-0.7c-0.3-0.3-0.5-0.6-0.7-1
+		c-1.1,1.1-1.9,1.6-2.4,1.6c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.4-1.8c-0.2-0.4-0.3-1.4-0.3-2.9s0.1-2.5,0.3-2.9
+		c0.2-0.4,0.6-1,1.4-1.8c0.7-0.7,1.3-1.1,1.6-1.1c0.5,0,1.2,0.5,2.3,1.5l0.2-1.2H195z M192.2,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		c-0.3-0.2-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.3-0.3,0.5c-0.2,0.2-0.3,1.1-0.3,2.4c0,1.4,0.1,2.2,0.3,2.4
+		c0.1,0.1,0.2,0.3,0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.1,0.1-0.9,0.2-2.4
+		C192.3,274.8,192.3,274,192.2,273.8z"/>
+	<path class="st4" d="M199.9,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M207.8,271.6c0.7-0.7,1.3-1.1,1.6-1.1c0.4,0,1,0.4,1.8,1.1v-1c0-0.7-0.1-1.2-0.2-1.6c-0.2-0.4-0.4-0.7-0.8-1
+		l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v12h-2.1l-0.2-1.2c-1,1-1.7,1.4-2.2,1.4c-0.3,0-0.9-0.4-1.6-1.1c-0.7-0.7-1.2-1.3-1.3-1.6
+		c-0.2-0.3-0.2-1.4-0.2-3c0-1.7,0.1-2.7,0.2-3C206.6,272.8,207,272.3,207.8,271.6z M211.1,273.8c-0.1-0.2-0.3-0.3-0.6-0.5
+		s-0.5-0.3-0.7-0.3s-0.3,0.1-0.5,0.3c-0.2,0.2-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,1-0.1,2.4c0,1.4,0,2.2,0.1,2.4c0.1,0.2,0.2,0.4,0.4,0.5
+		c0.2,0.2,0.3,0.3,0.5,0.3s0.4-0.1,0.7-0.3c0.3-0.2,0.5-0.3,0.6-0.5c0.1-0.2,0.1-0.7,0.2-1.6v-0.8
+		C211.2,274.8,211.2,274,211.1,273.8z"/>
+	<path class="st4" d="M219.8,279.5c-0.3-0.4-0.4-1.5-0.4-3.2c0-1.7,0.1-2.8,0.4-3.3c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.9-1
+		c0.4,0,1,0.3,1.8,0.8s1.3,1.1,1.7,1.8l-2.1,1.4c-0.2-0.3-0.4-0.7-0.7-1.1c-0.3-0.4-0.5-0.6-0.7-0.6c-0.3,0-0.6,0.3-0.9,0.9
+		c-0.2,0.4-0.3,1.2-0.3,2.5s0.1,2.2,0.3,2.5c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.5,0.3c0.2,0,0.4-0.2,0.7-0.5
+		c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.4,0-1.1-0.3-1.9-1
+		C220.6,280.3,220,279.8,219.8,279.5z"/>
+	<path class="st4" d="M232.8,281c-0.8,0.7-1.4,1-1.8,1s-1-0.3-1.8-1c-0.8-0.7-1.3-1.2-1.5-1.5c-0.3-0.5-0.4-1.6-0.4-3.3
+		c0-1.7,0.1-2.7,0.4-3.2c0.2-0.3,0.7-0.8,1.5-1.5c0.8-0.7,1.4-1,1.8-1s1,0.3,1.8,1s1.3,1.2,1.5,1.5c0.3,0.5,0.4,1.6,0.4,3.2
+		c0,1.7-0.1,2.8-0.4,3.3C234.1,279.8,233.6,280.3,232.8,281z M230.4,279.3c0.2,0.2,0.4,0.3,0.5,0.3s0.3-0.1,0.5-0.3
+		c0.2-0.2,0.4-0.4,0.5-0.5c0.2-0.3,0.3-1.1,0.3-2.5c0-1.4-0.1-2.2-0.3-2.5c-0.1-0.2-0.2-0.3-0.5-0.5c-0.2-0.2-0.4-0.3-0.5-0.3
+		s-0.3,0.1-0.5,0.3c-0.2,0.2-0.4,0.4-0.5,0.5c-0.2,0.3-0.3,1.1-0.3,2.5s0.1,2.2,0.3,2.5C230.1,278.9,230.2,279.1,230.4,279.3z"/>
+	<path class="st4" d="M239,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M248.8,272.9v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3L249,282c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H248.8z"/>
+	<path class="st4" d="M259.6,276.2v0.7h-4.9c0,0.8,0.1,1.5,0.3,1.9c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.2,0.4,0.3,0.5,0.3
+		c0.2,0,0.4-0.2,0.7-0.5c0.3-0.3,0.5-0.7,0.7-1.2l2.1,1.5c-0.4,0.7-0.9,1.3-1.7,1.8c-0.8,0.5-1.4,0.8-1.8,0.8c-0.5,0-1.1-0.4-2-1.1
+		c-0.9-0.7-1.4-1.3-1.6-1.7c-0.2-0.4-0.3-1.4-0.3-3c0-1.6,0.1-2.6,0.3-3c0.2-0.4,0.7-1,1.6-1.7c0.9-0.7,1.5-1.1,1.9-1.1
+		s1,0.4,1.9,1.1c0.9,0.7,1.4,1.3,1.6,1.7C259.5,273.7,259.6,274.6,259.6,276.2z M256.7,273.6c-0.1-0.2-0.3-0.4-0.5-0.5
+		c-0.2-0.2-0.4-0.3-0.6-0.3c-0.2,0-0.4,0.2-0.6,0.5c-0.2,0.4-0.4,0.9-0.4,1.6h2.3C256.9,274.3,256.8,273.8,256.7,273.6z"/>
+	<path class="st4" d="M264,281.7h-2.7v-7c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.7-0.8-1l2.2-1.6c0.5,0.4,0.9,0.9,1.1,1.4
+		c1-1,1.7-1.4,2.1-1.4s1,0.4,1.9,1.1c0.8,0.8,1.3,1.5,1.3,2.2v3.9c0,0.7,0.1,1.2,0.2,1.6c0.2,0.4,0.4,0.7,0.8,1l-2.2,1.6
+		c-1-0.8-1.5-1.9-1.5-3.3v-4.5c0-0.2-0.1-0.5-0.4-0.7c-0.2-0.3-0.5-0.4-0.7-0.4c-0.2,0-0.6,0.3-1.2,0.9V281.7z"/>
+	<path class="st4" d="M273.8,272.9v4.5c0,0.6,0.2,1.2,0.7,1.8s1,1,1.8,1.3L274,282c-0.8-0.4-1.5-0.9-2.1-1.6s-0.8-1.4-0.8-2.1v-5.4
+		h-1v-1.5l1-0.2c0-0.7-0.1-1.2-0.2-1.6s-0.4-0.8-0.8-1.1l2.2-1.6c1,0.8,1.5,1.9,1.5,3.3v0.6h2.3v2.1H273.8z"/>
+	<path class="st4" d="M279.4,278.6c0.1,0,0.5,0.2,1.1,0.7c0.6,0.5,0.8,0.8,0.8,1c0,0.2-0.3,0.5-0.8,1c-0.6,0.5-0.9,0.7-1.1,0.7
+		s-0.5-0.2-1.1-0.7s-0.8-0.8-0.8-1c0-0.2,0.3-0.5,0.8-1C278.9,278.8,279.2,278.6,279.4,278.6z M280.7,267.2
+		c-0.1,4.1-0.2,6.5-0.2,7.3s0.1,1.4,0.3,2l-1.9,1.4c-0.4-0.5-0.7-1.6-0.8-3.3l-0.3-7.3H280.7z"/>
+</g>
+<g>
+	<g class="st5">
+		<path class="st4" d="M144.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6c-2.8,1.8-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H153v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3c1.6-1.1,2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9c-0.4,0-1.1,0.5-2,1.6c-0.9,1.1-1.6,2.3-1.8,3.7l-4.8-2.8
+			c0.4-1.9,1.6-3.7,3.5-5.5C141.3,188.2,143,187.3,144.6,187.3z"/>
+		<path class="st4" d="M172.1,215c-2,1.7-3.4,2.6-4.4,2.6c-1,0-2.5-0.9-4.4-2.6c-2-1.7-3.2-3.1-3.7-4.1c-0.3-0.6-0.5-2.5-0.5-5.8
+			v-5.4c0-3.1,0.2-5.1,0.6-6c0.4-0.9,1.6-2.2,3.5-3.9c2-1.7,3.4-2.6,4.4-2.6c1,0,2.5,0.9,4.4,2.6s3.2,3.1,3.7,4.1
+			c0.3,0.7,0.5,2.6,0.5,5.8v5.4c0,3.1-0.2,5.1-0.6,6S174,213.3,172.1,215z M166.3,211.2c0.5,0.4,0.9,0.7,1.3,0.7s0.8-0.2,1.3-0.7
+			c0.5-0.4,0.9-0.8,1.1-1.2c0.2-0.4,0.3-2,0.3-4.9v-5.4c0-2.4-0.1-3.9-0.2-4.5c-0.2-0.6-0.5-1.1-1.1-1.5c-0.5-0.4-1-0.7-1.4-0.7
+			s-0.8,0.2-1.4,0.7c-0.5,0.4-0.9,0.9-1.1,1.3c-0.2,0.5-0.3,2-0.3,4.7v5.4c0,2.8,0.1,4.5,0.3,4.8
+			C165.5,210.4,165.8,210.8,166.3,211.2z"/>
+		<path class="st4" d="M190.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6s-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H199v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3s2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9s-1.1,0.5-2,1.6c-0.9,1.1-1.6,2.3-1.8,3.7l-4.8-2.8c0.4-1.9,1.6-3.7,3.5-5.5
+			C187.3,188.2,189.1,187.3,190.6,187.3z"/>
+		<path class="st4" d="M213.6,187.3c1,0,2.4,0.8,4.2,2.5c1.9,1.7,3.1,3,3.8,4.2c0.3,0.5,0.5,1.7,0.5,3.6c0,1.9-0.2,3.1-0.6,3.7
+			c-0.4,0.6-2,1.8-4.8,3.6c-2.8,1.8-4.6,3.1-5.3,4c-0.2,0.3-0.4,0.9-0.4,1.8v1.6H222v4.8h-17v-6c0-1.7,0.2-3,0.6-3.8
+			c0.4-0.8,1.3-1.8,2.7-2.9c1.4-1.1,2.9-2.2,4.5-3.3c1.6-1.1,2.6-1.7,2.9-2c0.3-0.3,0.5-0.7,0.5-1.5c0-0.7-0.1-1.4-0.3-2
+			c-0.2-0.6-0.5-1.2-1.1-1.8c-0.5-0.6-1-0.9-1.4-0.9c-0.4,0-1.1,0.5-2,1.6s-1.6,2.3-1.8,3.7l-4.8-2.8c0.4-1.9,1.6-3.7,3.5-5.5
+			S212.1,187.3,213.6,187.3z"/>
+	</g>
+	<path class="st4" d="M250.8,214.2l0.6-3.9c0.1-0.6,0.5-1.1,1-1.4l3.1-1.5c1.3-0.6,1.3-2.8,0-3.4l-3.2-1.4c-0.5-0.2-0.9-0.8-1-1.4
+		l-0.6-3.9c-0.2-1.4-1.6-2-2.5-1.1l-3.4,3.3c-0.3,0.3-0.8,0.5-1.2,0.4l-4.4-0.7c-1.3-0.2-2.2,1.5-1.5,2.8l1.2,2l0.4,0.6
+		c0.4,0.6,0.4,1.4,0,2l0,0.1l-1.4,2.6c-0.7,1.3,0.2,3,1.5,2.8l4.4-0.7c0.4-0.1,0.9,0.1,1.2,0.4l3.4,3.2
+		C249.2,216.2,250.6,215.5,250.8,214.2z"/>
+	<path class="st4" d="M110.2,214.2l-0.6-3.9c-0.1-0.6-0.5-1.1-1-1.4l-3.1-1.5c-1.3-0.6-1.3-2.8,0-3.4l3.2-1.4c0.5-0.2,0.9-0.8,1-1.4
+		l0.6-3.9c0.2-1.4,1.6-2,2.5-1.1l3.4,3.3c0.3,0.3,0.8,0.5,1.2,0.4l4.4-0.7c1.3-0.2,2.2,1.5,1.5,2.8l-1.2,2l-0.4,0.6
+		c-0.3,0.6-0.3,1.4,0,2l0,0.1l1.4,2.6c0.7,1.3-0.2,3-1.5,2.8l-4.3-0.7c-0.4-0.1-0.9,0.1-1.2,0.4l-3.4,3.2
+		C111.8,216.2,110.4,215.5,110.2,214.2z"/>
+</g>
+<path class="st4" d="M106.1,109.4c-3.7,0-6.8-1.1-9-3.1c-2.4-2.3-3.7-5.8-3.7-10.1c0-8.5,6.1-17.6,19.6-18.7c8.4-0.7,17.3,6,26,12.5
+	c8.3,6.2,16.9,12.7,24.7,12.4c14.9-0.5,16.1-11.6,16.2-12.1c0.1-0.8,0.8-1.4,1.6-1.3s1.4,0.8,1.3,1.6c-0.4,4.9-4.9,14.2-19,14.7
+	c-8.8,0.3-17.8-6.4-26.5-13c-8.2-6.1-16.7-12.5-24-11.9c-12.5,1-16.9,9.2-16.9,15.8c0,3.5,1,6.2,2.8,7.9c1.9,1.8,4.7,2.5,8.3,2.3
+	c4.8-0.2,7.3-3.6,7.2-6.9c-0.1-2.8-2-6-7.3-5.9c-0.8,0-1.5-0.6-1.5-1.4c0-0.8,0.6-1.5,1.4-1.5c0.1,0,0.2,0,0.2,0
+	c6.7,0,9.9,4.5,10,8.7c0.1,4.6-3.3,9.7-10,9.9C107,109.3,106.5,109.4,106.1,109.4L106.1,109.4z"/>
+<path class="st4" d="M256.9,108.8c-0.5,0-1,0-1.6-0.1c-6.6-0.2-10.1-5.1-10-9.7c0.1-5.8,5.4-8.4,10.1-8.3c0.8,0,1.4,0.7,1.4,1.5
+	c0,0.8-0.7,1.4-1.5,1.4c-5.1-0.1-7.1,2.9-7.2,5.5c-0.1,3.2,2.4,6.5,7.2,6.7c3.8,0.2,6.6-0.5,8.4-2.1c1.7-1.6,2.5-4.1,2.5-7.4
+	c0-6.7-4.4-14.8-16.9-15.8c-7.3-0.6-15.8,5.8-24,11.9c-8.7,6.5-17.8,13.3-26.5,13c-14.1-0.5-18.6-9.8-19-14.7
+	c-0.1-0.8,0.5-1.5,1.3-1.6c0.8-0.1,1.5,0.5,1.6,1.3c0,0.5,1.2,11.5,16.2,12.1c7.8,0.3,16.4-6.2,24.7-12.4c8.7-6.5,17.6-13.1,26-12.5
+	c13.5,1.1,19.6,10.2,19.6,18.7c0,4.2-1.2,7.4-3.5,9.6C263.7,107.8,260.7,108.8,256.9,108.8L256.9,108.8z"/>
+<path class="st4" d="M244.8,425.5c-7.6,0-15.6-6-23.4-11.8c-7.8-5.9-15.9-11.9-23.2-11.6c-14,0.5-15.1,10.9-15.2,11.3
+	c-0.1,0.8-0.8,1.4-1.6,1.3c-0.8-0.1-1.4-0.8-1.3-1.6c0-0.1,1.3-13.4,18-14c8.3-0.3,16.8,6.1,25.1,12.2c7.7,5.8,15.7,11.7,22.6,11.2
+	c11.7-1,15.8-8.6,15.8-14.8c0-2.6-0.9-4.9-2.6-6.5c-2.1-2-5.4-2.9-9.4-2.7c-4.4,0.1-6.6,2.8-6.5,5.4c0.1,2.5,2.2,4.9,6.9,4.8
+	c0.8,0,1.5,0.6,1.5,1.4c0,0.8-0.6,1.5-1.4,1.5c-6.7,0.1-9.8-3.9-9.9-7.7c-0.1-4,3.1-8.2,9.3-8.4c4.7-0.3,8.8,0.9,11.5,3.5
+	c2.3,2.2,3.5,5.1,3.5,8.6c0,8.1-5.7,16.7-18.5,17.7C245.6,425.5,245.2,425.5,244.8,425.5L244.8,425.5z"/>
+<path class="st4" d="M118.2,425.5c-0.4,0-0.8,0-1.1,0c-12.8-1-18.5-9.7-18.5-17.7c0-3.5,1.2-6.4,3.5-8.6c2.7-2.5,6.8-3.8,11.5-3.5
+	c6.2,0.2,9.6,4.6,9.4,8.6c-0.1,3.7-3.1,7.6-9.7,7.5c-0.8,0-1.4-0.7-1.4-1.5c0-0.8,0.7-1.4,1.5-1.4c4.8,0.1,6.7-2.5,6.7-4.6
+	c0.1-2.7-2.2-5.4-6.7-5.6c-4-0.3-7.3,0.7-9.4,2.7c-1.7,1.6-2.6,3.9-2.6,6.5c0,6.2,4.2,13.9,15.8,14.8c6.8,0.5,14.8-5.4,22.6-11.2
+	c8.2-6.2,16.8-12.5,25.1-12.2c16.6,0.6,17.9,13.8,18,14c0.1,0.8-0.5,1.5-1.3,1.6c-0.8,0.1-1.5-0.5-1.6-1.3c0-0.5-1.2-10.8-15.2-11.3
+	c-7.3-0.3-15.4,5.8-23.2,11.6C133.8,419.5,125.8,425.4,118.2,425.5L118.2,425.5z"/>
+<path class="st4" d="M276.9,296.5c0-1.1-1.3-1.2-1.3-1.2s-189.1-0.5-189.3-0.5c-0.8-0.1-1.9,0.5-2,1.3c-0.1,0.8,0.7,1.9,1.5,2.1
+	c0.3,0,28.7,5.3,34.5,18.8c1.9,4.4,1.1,9.3-2.3,14.6c0,0,0,0,0,0l-0.5,0.3c-0.7,0.4-1,1.2-0.7,1.9c0.2,0.5,0.8,0.9,1.3,0.9
+	c0.2,0,0.5-0.1,0.7-0.2l1.4-0.8h0c4.7-0.7,31-3.6,40,16.1c0,0,0,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1
+	c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0
+	c0,0,0,0,0.1,0c0.1,0,0.3,0.1,0.4,0.1c0,0,0,0,0,0c0.1,0,0.2,0,0.4,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2-0.1
+	c0.2-0.1,24.1-12.5,47.3-1.2c0,0,0,0,0,0l0.6,1.2c0.3,0.5,0.8,0.8,1.3,0.8c0.2,0,0.5,0,0.7-0.2c0.7-0.4,1-1.2,0.6-2l-0.1-0.2
+	c1-2,10.9-20.2,43.9-16.5c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0s0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2-0.1
+	c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0.1-0.1c0,0,0,0,0-0.1
+	c0,0,0-0.1,0-0.1c0-0.1,0-0.2,0.1-0.3c0,0,0,0,0-0.1c0-0.2,0-0.5-0.1-0.7c0,0,0,0,0,0c0-0.1-3.9-9-0.1-18
+	c2.7-6.3,8.6-11.2,17.5-14.4C276.3,297.9,276.9,297.6,276.9,296.5L276.9,296.5z M233.9,318.7l-18.8-8.8c0,0,0,0,0,0
+	c-1-1.5-2.9-4.9-2.1-7.7c0.5-1.7,2-3.1,4.6-4c0.4-0.1,0.6-0.4,0.8-0.7c0,0,0,0,0,0H241c0,0,0.1,0,0,0.1c-3.7,2.2-6.2,5-7.5,8.5
+	C231.9,310.6,232.8,315.3,233.9,318.7C234,318.7,234,318.7,233.9,318.7L233.9,318.7z M149.5,319.5c-2,0.1-3.9,0.3-5.7,0.5
+	c0,0-0.1,0,0-0.1l16.6-9.7h0c3,0.7,9.5,2.7,12.4,8.4c0,0,0,0,0,0l-3.3,7.7c0,0,0,0-0.1,0C165.7,321.6,158.8,319.2,149.5,319.5
+	L149.5,319.5z M138.1,309.9c-2.2-6.1-8.2-10.1-12.7-12.4c0,0,0-0.1,0-0.1h17.3c0,0,0,0,0,0c0.2,0.4,0.7,0.8,1.2,0.8
+	c4.8,0.4,13,2.1,14.6,5.5c0.6,1.1,0.3,2.5-0.7,4.1c-0.1,0.2-0.2,0.5-0.2,0.8c0,0,0,0,0,0l-19.7,11.5c0,0-0.1,0-0.1,0
+	C139.1,316.5,139.2,313.1,138.1,309.9L138.1,309.9z M184,300.2l8.5,16.2c0,0,0,0.1,0,0c-5.9-1.8-11.8-1-15.3-0.1c0,0-0.1,0,0,0
+	L184,300.2C183.9,300.2,184,300.2,184,300.2L184,300.2z M195.7,316.5l-8.6-16.5c0,0,0-0.1,0.1,0l21.5,10.1c0,0,0,0.1,0,0.1
+	C201.9,310.9,197.8,314.2,195.7,316.5C195.8,316.5,195.8,316.5,195.7,316.5L195.7,316.5z M210.7,307.8l-22-10.3c0,0,0-0.1,0-0.1h24
+	c0,0,0,0,0,0.1c-1.3,1.1-2.2,2.4-2.6,3.9C209.6,303.5,210,305.8,210.7,307.8C210.8,307.8,210.7,307.8,210.7,307.8L210.7,307.8z
+	 M174.2,315.4c-2.8-3.9-7-6-10.2-7.1c0,0,0,0,0-0.1l17.7-10.3c0,0,0.1,0,0.1,0L174.2,315.4C174.3,315.4,174.3,315.5,174.2,315.4
+	L174.2,315.4z M175.6,319.8c2.4-0.8,11.4-3.1,18.9,0.6c0,0,0,0,0,0l4.9,9.3c0,0,0,0.1,0,0c-12.1-5.1-22.5-3.2-27.2-1.9
+	c0,0-0.1,0,0,0L175.6,319.8C175.6,319.8,175.6,319.8,175.6,319.8L175.6,319.8z M197.2,319.3C197.2,319.3,197.2,319.3,197.2,319.3
+	c1.5-2.1,6.7-7.5,17.2-6.3c0.2,0,0.4,0,0.5,0l16.2,7.6c0,0,0,0.1,0,0.1c-15.6-0.2-24.7,5.9-28.4,9.1c0,0,0,0-0.1,0L197.2,319.3
+	L197.2,319.3z M161.7,306.2C161.7,306.2,161.6,306.2,161.7,306.2c0.2-1.4,0.1-2.7-0.5-3.9c-1.1-2.3-3.8-3.8-6.6-4.9c0,0,0-0.1,0-0.1
+	h22.2c0,0,0.1,0,0,0.1L161.7,306.2L161.7,306.2z M123,315.8c-4.3-9.9-18.5-15.6-27.9-18.3c0,0,0-0.1,0-0.1h23.3c0,0,0,0,0,0
+	c0.2,0.2,0.4,0.5,0.7,0.5c0.1,0,13.2,4.4,16.2,12.9c1.3,3.6,0.6,7.7-2.2,11.9c0,0,0,0,0,0l-10.3,6c0,0-0.1,0-0.1,0
+	C124.6,324.2,124.7,319.9,123,315.8L123,315.8z M136.7,330.8c-3.9-0.6-7.5-0.6-10.4-0.5c0,0-0.1,0,0-0.1l9.3-5.4l0,0
+	c4.3-1.2,25.9-6.7,32.7,4.9c0,0,0,0,0,0l-6.8,16c0,0-0.1,0-0.1,0C156.5,337.6,148,332.4,136.7,330.8L136.7,330.8z M164.4,346.3
+	C164.4,346.3,164.4,346.3,164.4,346.3l6.2-14.6c0.1,0,0.1,0,0.2,0c0.1-0.1,14.3-6,30.4,2.4c0.1,0.1,0.3,0.1,0.4,0.1l5.7,11
+	c0,0,0,0.1,0,0C189.1,337.9,171.7,343.3,164.4,346.3L164.4,346.3z M211,345.9l-7-13.4c0,0,0,0,0,0c1.2-1.1,3.6-3,7-4.7
+	c5.1-2.5,13.7-5.2,26-3.8c0.3,0,0.6,0,0.8-0.1c0,0,0,0,0,0l11,5.2c0,0,0,0.1,0,0.1C224.6,328.7,214.3,340.9,211,345.9
+	C211.1,345.9,211,345.9,211,345.9L211,345.9z M255.3,311.4c-2.8,6.6-2,13-1,16.8c0,0,0,0-0.1,0l-16.3-7.7c0,0,0,0,0,0
+	c-1.2-2.5-3.5-8.3-1.6-13.6c1.4-3.9,4.8-6.9,10.2-8.8c0.4-0.1,0.6-0.4,0.8-0.7c0,0,0,0,0,0h22.2c0,0,0,0,0,0.1
+	C262.6,300.9,257.8,305.5,255.3,311.4L255.3,311.4z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg
new file mode 100644
index 00000000000..b464c12e9ae
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg
@@ -0,0 +1,1004 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6D5318;}
+	.st1{fill:#FFF5EA;}
+	.st2{opacity:0.45;fill:#646470;enable-background:new    ;}
+	.st3{clip-path:url(#SVGID_00000001663058551404217680000013149051905671630230_);}
+	.st4{fill:#805D99;}
+	.st5{fill:#AF80CC;}
+	.st6{fill:#B088C4;}
+	.st7{fill:#FFFFFF;}
+	.st8{clip-path:url(#SVGID_00000145753946260431082120000003859205259149432996_);}
+	.st9{fill:#020100;}
+	.st10{fill:#6E5F74;}
+	.st11{fill:#C07B54;}
+	.st12{fill:#DCC1AA;}
+	.st13{fill:#C1733E;}
+	.st14{fill:#80778F;}
+	.st15{fill:#5E546D;}
+	.st16{fill:#050505;}
+	.st17{fill:#D296B1;}
+	.st18{clip-path:url(#SVGID_00000107564853966077244930000004210777951185050047_);}
+	.st19{fill:none;stroke:#000000;stroke-width:1.79;stroke-linecap:round;stroke-miterlimit:10;}
+	.st20{clip-path:url(#SVGID_00000093882876429191045770000009424420355695470985_);}
+	.st21{fill:#8F3232;}
+	.st22{fill:#BF4A4A;}
+	.st23{fill:#414551;}
+	.st24{fill:#607697;}
+	.st25{fill:#375480;}
+	.st26{fill:#17181C;}
+	.st27{fill:#5A5E6D;}
+	.st28{clip-path:url(#SVGID_00000101810332789998168890000011855812401495047848_);}
+	.st29{fill:#191A1E;}
+	.st30{fill:#80978F;}
+	.st31{fill:#98B8AF;}
+	.st32{fill:#63757C;}
+	.st33{fill:#718880;}
+	.st34{clip-path:url(#SVGID_00000098210397332391179100000016846176448006568602_);}
+	.st35{clip-path:url(#SVGID_00000150087017048700878620000017074110707016521639_);}
+	.st36{fill:#C7CB7D;}
+	.st37{clip-path:url(#SVGID_00000104668293409691138560000011432183348608216202_);}
+	.st38{clip-path:url(#SVGID_00000181785952534719611720000016386664355710098860_);}
+	.st39{fill:#785D80;}
+	.st40{fill:#8B80A2;}
+	.st41{fill:#C15A5A;}
+	.st42{fill:#A88045;}
+</style>
+<rect x="-1" y="-2.2" class="st0" width="720.7" height="509.6"/>
+<path d="M692.4,489.2H26.9c-6.2,0-11.3-5.1-11.3-11.3V27.1c0-6.2,5.1-11.3,11.3-11.3h665.5c6.2,0,11.3,5.1,11.3,11.3v450.9
+	C703.8,484.2,698.7,489.2,692.4,489.2z M30.9,485.2h657.5c6.2,0,11.3-5.1,11.3-11.3V31.1c0-6.2-5.1-11.3-11.3-11.3H30.9
+	c-6.2,0-11.3,5.1-11.3,11.3v442.9C19.6,480.2,24.6,485.2,30.9,485.2L30.9,485.2z"/>
+<g>
+	<polygon class="st1" points="652.4,266.9 404.7,270.8 405.4,53.5 653.2,49.5 	"/>
+	<polygon class="st2" points="640.6,240.2 414.7,243.8 415.3,65.6 641.2,62 	"/>
+	<g>
+		<defs>
+			<polygon id="SVGID_1_" points="640.6,240.2 414.4,243.8 415,65.5 641.2,61.9 			"/>
+		</defs>
+		<clipPath id="SVGID_00000085956841741250545750000016057336469081329287_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_00000085956841741250545750000016057336469081329287_);">
+			<g>
+				<g>
+					<path class="st4" d="M577.8,144.8c0,0,20.4-0.9,28,18.9c0.9,2.4,5.1,1.6,6.5-0.6c8.4-22.6,21.2-23.2,21.2-23.2l-5.4-7.5
+						l-21.9-0.5L577.8,144.8L577.8,144.8z"/>
+					<g>
+						<path class="st4" d="M593.8,118.7c0,0-18.5,8.8-33.3-10c-7.2-9.2-9.7-18.8-9.7-18.8c-17.9,1.9-57.7,38.9-17.6,85.7
+							c0,0,5.1-18,30.9-21.9c0,0,14.5-11,32.2-4.7L593.8,118.7L593.8,118.7z"/>
+						<path class="st5" d="M550.8,89.7c-4.5,15.2-9.1,31.7,4.6,56.4c0,0-16.8,9.7-22.5,32.4C507.9,160.4,505,101.1,550.8,89.7
+							L550.8,89.7z"/>
+					</g>
+					<g>
+						<path class="st4" d="M619.7,119.5c0,0,41.4-4.4,40.1-41c0,0,34.2-2.8,57.2,50c0,0-19.3,4.1-28.7,23c0,0-12.3-20.2-34.2,2.1
+							c0,0-7.3-18.7-34.6-11.7L619.7,119.5L619.7,119.5z"/>
+						<path class="st5" d="M659.8,78.5c0,0,24.2,24.3,26.8,76.5c0,0,6.4-12.3,32.6-25.2C719.1,129.8,702.3,79.4,659.8,78.5z"/>
+					</g>
+				</g>
+				<g>
+					<path d="M630.8,148.4c-1.3-0.4-3.5-0.8-4.9-1c-0.7-0.1-1.3,0.3-1.4,0.9c-0.4,1.3-1,3.4-1.2,4.6c-0.3,2.1,0.2,4,1.6,4.1
+						c1,0,1.7-0.9,2-2.2c0.9,1.4,2.1,2,3.1,1.4c1.2-0.6,1.1-2.4-0.1-4.2c-0.1-0.1-0.2-0.2-0.2-0.3c1.9,0.9,3.8,1.2,4.3-0.1
+						C634.4,150.4,632.9,149.1,630.8,148.4L630.8,148.4z"/>
+					<path class="st5" d="M616.1,144.8c-1-1.4-1.8-3.1-2.5-4.8c-1.6-3.9,2.8-7.4,6.5-5c1.7,1.1,3.2,2.2,4.4,3.5
+						c4.5,4.6,6.4,10,3.2,12.5S619.8,150.1,616.1,144.8L616.1,144.8z"/>
+				</g>
+				<g>
+					<path d="M598.8,157.3c-0.8-1.1-2.3-2.8-3.2-3.8c-0.5-0.5-1.2-0.6-1.7-0.2c-1.2,0.7-3,2-4,2.8c-1.6,1.5-2.5,3.2-1.4,4.1
+						c0.8,0.7,1.9,0.4,3-0.4c-0.2,1.6,0.4,2.8,1.5,3c1.4,0.2,2.4-1.1,2.6-3.2c0-0.1,0-0.2,0-0.4c0.9,1.9,2.2,3.2,3.5,2.6
+						C600.3,161.1,600,159.1,598.8,157.3L598.8,157.3z"/>
+					<path class="st5" d="M591.5,144.1c0.5-1.7,1.4-3.4,2.4-5.1c2-3.4,7.5-2.3,8,1.7c0.3,2,0.4,4.1,0.1,5.9c-0.8,6.1-3.9,10.9-8,10
+						C589.9,155.7,589.6,150.1,591.5,144.1L591.5,144.1z"/>
+				</g>
+				<g>
+					
+						<ellipse transform="matrix(0.9755 -0.2202 0.2202 0.9755 -12.8191 136.2224)" class="st6" cx="604.7" cy="125.6" rx="20.8" ry="26"/>
+					<path class="st7" d="M604.8,107.9c-16,3.4-16.4,15.1-15.6,17.9c0.8,2.1,2.9,4,5.3,2.9c-0.6,5,2.4,12.5,8.6,11
+						c2.1-0.3,3.5-2.4,3.4-4.6c1.7,1.7,3.2,3.1,5.7,3.7c6.2,1.3,10.6-5.5,8.6-10.7c2.5,0.6,5.9,0.7,7.3-2.1
+						C630.5,120.2,620.9,104.5,604.8,107.9L604.8,107.9z"/>
+				</g>
+				<path class="st6" d="M624.8,69.4l-2.9,0.4c-0.2-3.9-2-7.2-5.1-8.9c-4-2.2-9.2-1.1-13.2,2.4c-0.4-2.5-1.5-4.5-3.3-5.5
+					c-4.5-2.5-11.7,1.9-16.1,9.7c-1.5,2.7-2.5,5.4-2.9,7.9l-6.1,0.8c-7.9,1.1-13.1,8.1-11.8,15.7l2.6,17.8
+					c1.6,8.9,10.3,15.1,19.6,13.9l44.7-6.1c9.2-1.3,15.4-9.5,13.8-18.4l-2.6-17.8C640.2,73.7,632.7,68.4,624.8,69.4L624.8,69.4z"/>
+				<g>
+					<path class="st6" d="M582.4,82.3c1.4-2.8,1.4-6,0-8.9l-17.4-35.8c-1.8-3.5-7-3.2-8.2,0.5l-7.7,38.9c0,0-4.9,18.4,6.7,26.2
+						c6.2,4.2,14.7,2.1,18-4.3L582.4,82.3L582.4,82.3z"/>
+					<path class="st7" d="M569.6,61.7c-0.7,0.3-1.1,0.9-1.2,1.6c-3.4-2.8-6.8-4-8.6-2c-1.6,1.9-0.5,4.8,2.2,7.5
+						c-3.5-0.1-5.9,1.3-6.4,4.2c-0.5,3.5,2.5,6.2,7.3,6.9c-1.9,1.5-2.8,3.3-1.7,5.2c1.7,2.8,5.7,2.4,9.3,0.1l7.5-7.4
+						c0.9-1,1.1-2.4,0.6-3.7c-0.7-1.9-2.9-7.1-2.9-7.1S572.5,60.2,569.6,61.7L569.6,61.7z"/>
+					
+						<ellipse transform="matrix(0.5713 -0.8208 0.8208 0.5713 181.9465 506.6089)" class="st6" cx="575.9" cy="79.1" rx="10.8" ry="6.8"/>
+				</g>
+				<g>
+					<path class="st6" d="M621.2,76.5c-2.6-2.1-4.1-5.3-4-8.5l0.5-38.8c0.2-3.8,5.1-5.4,7.7-2.4L649.4,60c0,0,6.7,8.2,7.4,17
+						c0.9,11.5-13,18-22.3,10.4L621.2,76.5L621.2,76.5z"/>
+					<path class="st7" d="M625,53.9c0.8,0,1.4,0.4,1.9,1c1.7-3.9,4.2-6.4,6.8-5.2c2.4,1,2.8,4.1,1.7,7.6c3.1-1.5,6-1.2,7.8,1.2
+						c2.2,2.9,0.8,6.6-3.2,9.1c2.4,0.6,4.1,1.9,4,4c-0.1,3.2-4,4.5-8.3,3.8l-10.4-3.6c-1.3-0.6-2.2-1.7-2.4-3
+						c-0.3-2-0.9-7.5-0.9-7.5S621.7,53.6,625,53.9L625,53.9z"/>
+					<path class="st6" d="M628.5,77.5c-1.4,0.9-3.2,1.6-5,2.2c-4.2,1.3-9.3-4.5-7.4-8.3c0.9-1.7,1.9-3.4,3.1-4.6
+						c4.4-4.4,10.4-5.8,14-1.7S634,74.1,628.5,77.5L628.5,77.5z"/>
+				</g>
+				<g>
+					<g>
+						<path class="st7" d="M625.4,76.9c-7.4-4.9-16.6-4.4-20.6,1.3c-0.2,0.3-0.4,0.5-0.5,0.8c-0.9-1.2-2-2.2-3.3-3
+							c-6.4-3.7-15.4-0.2-20.1,7.7s-3.4,17.3,3,20.9c6.4,3.7,15.4,0.2,20.1-7.7c0.8-1.4,1.5-2.9,2-4.4c1.3,1.8,3,3.4,5,4.8
+							c7.4,4.9,16.6,4.4,20.6-1.3C635.5,90.5,632.7,81.9,625.4,76.9L625.4,76.9z"/>
+						<g>
+							<defs>
+								<path id="SVGID_00000171682689772222904030000016327869836712327319_" d="M625.4,76.9c-7.4-4.9-16.6-4.4-20.6,1.3
+									c-0.2,0.3-0.4,0.5-0.5,0.8c-0.9-1.2-2-2.2-3.3-3c-6.4-3.7-15.4-0.2-20.1,7.7s-3.4,17.3,3,20.9c6.4,3.7,15.4,0.2,20.1-7.7
+									c0.8-1.4,1.5-2.9,2-4.4c1.3,1.8,3,3.4,5,4.8c7.4,4.9,16.6,4.4,20.6-1.3C635.5,90.5,632.7,81.9,625.4,76.9L625.4,76.9z"/>
+							</defs>
+							<clipPath id="SVGID_00000054231880559393158220000005099787992857059001_">
+								<use xlink:href="#SVGID_00000171682689772222904030000016327869836712327319_"  style="overflow:visible;"/>
+							</clipPath>
+							<g style="clip-path:url(#SVGID_00000054231880559393158220000005099787992857059001_);">
+								
+									<ellipse transform="matrix(0.9577 -0.2877 0.2877 0.9577 0.466 180.3964)" class="st9" cx="614" cy="88.6" rx="3.1" ry="6.9"/>
+								
+									<ellipse transform="matrix(0.103 -0.9947 0.9947 0.103 443.5689 674.7653)" class="st9" cx="595.9" cy="91.5" rx="6.8" ry="3.2"/>
+								
+									<ellipse transform="matrix(0.8665 -0.4992 0.4992 0.8665 40.5336 305.1962)" class="st10" cx="590.8" cy="76.8" rx="17.1" ry="12.4"/>
+								
+									<ellipse transform="matrix(0.1168 -0.9932 0.9932 0.1168 469.0321 675.9617)" class="st10" cx="614.6" cy="74.3" rx="12" ry="17.5"/>
+							</g>
+						</g>
+					</g>
+					<path d="M597.1,110.3c0,0,0.7,8,13.2,4.6c7.7-2.1,6-8.3,6-8.3s-7.5-0.8-9.9-5.4C604.2,106.3,597.1,110.3,597.1,110.3
+						L597.1,110.3z"/>
+					<path class="st7" d="M592.4,111.9l6.6-2.6l0.8,6.7c0.2,1.9-2.2,2.9-3.5,1.5L592.4,111.9L592.4,111.9z"/>
+					<path class="st7" d="M615.2,106.4l7.2,0.3l-2.1,6.3c-0.6,1.8-3.2,1.8-3.9-0.1L615.2,106.4L615.2,106.4z"/>
+					<path class="st7" d="M600.7,107.4l3.9-3.2l0.3,5.5c0.1,1.2-1.5,1.8-2.3,0.8L600.7,107.4L600.7,107.4z"/>
+					<path class="st7" d="M607.8,103.3l5.1,2.1l-2,3.8c-0.6,1.1-2.2,0.8-2.5-0.4L607.8,103.3z"/>
+					<path d="M627,106.8c0,0-0.1,0.1-0.1,0.1c-8.1,3.1-16.9-0.3-20.7-3.6c-7.5,10.8-16,9.7-19.4,8.6c-0.6-0.2-0.9-0.7-0.7-1.3
+						c0.2-0.5,0.8-0.8,1.3-0.7c3,0.9,10.8,1.9,17.7-8.9l0.8-1.2l1,1.1c2.6,3,11.5,7,19.3,3.9c0.5-0.2,1.2,0.1,1.4,0.6
+						C627.6,106,627.4,106.5,627,106.8L627,106.8z"/>
+					<path class="st6" d="M602.2,113.6c0.3-1.4,3.1-2.5,5.3-1.1c0.7-1.3,4-2.1,4.9-0.8C612.5,113.8,603,115.2,602.2,113.6z"/>
+					<path d="M601.4,72.2c-0.3,0.2-0.6,0.2-1,0c-9.3-4.1-16,0.7-16.3,0.9c-0.5,0.3-1.1,0.2-1.5-0.2c-0.4-0.4-0.3-1.1,0.2-1.4
+						c0.3-0.2,7.9-5.8,18.5-1.2c0.5,0.2,0.8,0.8,0.6,1.3C601.7,72,601.6,72.1,601.4,72.2L601.4,72.2z"/>
+					<path d="M623.3,68.7c-0.2,0.1-0.4,0.1-0.7,0c-8.2-3.1-14.2,2-14.5,2.2c-0.4,0.4-1.1,0.3-1.5-0.1c-0.4-0.4-0.4-1.1,0.1-1.4
+						c0.3-0.2,7.2-6.1,16.6-2.5c0.5,0.2,0.8,0.8,0.7,1.3C623.8,68.4,623.6,68.6,623.3,68.7L623.3,68.7z"/>
+					<path class="st10" d="M610,102.6l-7.1,1.3c-3,0.6-6-1.4-6.7-4.3l0,0c-0.7-2.9,1.2-5.8,4.2-6.3l7.1-1.3c3-0.6,6,1.4,6.7,4.3l0,0
+						C614.9,99.2,613,102,610,102.6z"/>
+				</g>
+			</g>
+			<g>
+				<g>
+					<path class="st11" d="M495.9,196.5c-5.2-1.1-15.7-2.6-24.5,0.2c-1.5,0.5-2.6,2.3-2.2,3.8c1.3,4.3,4.3,13.2,12.8,20.1
+						c7.5,6,16.9,10.1,24.6-1.9S506.5,198.7,495.9,196.5L495.9,196.5z"/>
+					<path class="st12" d="M491.4,195c-8.4-2.6-19.6-3.9-26.1-2.4c-1.6,0.4-2.6,2.1-2,3.6c1.5,3.6,8.5,14.1,14.2,20.1
+						c2.5,2.8,6.3,2.5,7.9,0.6c1-1.2,1-2.9,0.2-4.6c2.1,0.4,4.1-0.1,5.4-1.6c1.8-2.1,1.3-5.3-0.9-7.5c2.3,0.3,4.3-0.4,5.1-1.8
+						C496.4,199.4,495.9,196.1,491.4,195L491.4,195z"/>
+				</g>
+				<g>
+					<path class="st11" d="M504.8,253.9c-7.2-1.4-5.5-8.1-5.5-8.1l4-46.2c0,0,1.4-14.4,14.4-11.9c12.9,2.4,8.5,15.4,8.5,15.4
+						l-12.5,45.4C513.7,248.5,512,255.3,504.8,253.9L504.8,253.9z"/>
+					<path class="st11" d="M510.4,256.2l-24.8,0.8c-2,0.1-3.6-1.4-3.6-3.4l0,0c-0.1-5.8,4.6-10.6,10.5-10.8l15.4-0.5
+						c3.4-0.1,6.1,2.5,6.2,5.8l0.1,4.2C514.2,254.4,512.5,256.1,510.4,256.2L510.4,256.2z"/>
+				</g>
+				<g>
+					<path class="st13" d="M565.8,253.9c7.2-1.3,5.9-8,5.9-8l-1.7-46.3c0,0-0.7-14.4-13.8-12.1c-13,2.3-9.2,15.4-9.2,15.4l10.1,45.6
+						C557.1,248.5,558.5,255.2,565.8,253.9L565.8,253.9z"/>
+					<path class="st13" d="M560,256.2l24.8,1.1c2,0.1,3.7-1.4,3.8-3.3v-0.1c0.4-5.7-4.1-10.6-10-10.8l-15.3-0.7
+						c-3.4-0.1-6.3,2.4-6.5,5.7l-0.3,4.3C556.3,254.3,557.9,256.1,560,256.2L560,256.2z"/>
+				</g>
+				<g>
+					<g>
+						<path class="st11" d="M453.2,160.3L453.2,160.3c0.5-2.9,3.1-5.1,6.1-5.1l30.8,0.2c5.5,0.7,9.2,5.6,8.4,11l0,0
+							c-0.8,5.3-5.9,9.1-11.4,8.4l-29.6-8.1C454.6,165.9,452.8,163.2,453.2,160.3L453.2,160.3z"/>
+						
+							<ellipse transform="matrix(0.9349 -0.3548 0.3548 0.9349 -26.1233 169.7021)" class="st11" cx="449.7" cy="156.1" rx="11.8" ry="11.4"/>
+					</g>
+					<g>
+						<path class="st14" d="M484.9,189l-6.6-34.7l35.3-1.3c8.1-0.4,15.1,5.1,16.2,12.9l0,0c1.1,7.1-3.1,14.1-10,16.8l-28.5,9.9
+							C488.6,193.6,485.5,191.9,484.9,189L484.9,189z"/>
+						<path class="st15" d="M488.9,195.2L488.9,195.2c-3,0.6-5.8-1.3-6.3-4.2l-6-33.8c-0.5-2.9,1.5-5.7,4.5-6.3l0,0
+							c3-0.6,5.8,1.3,6.3,4.2l6,33.8C493.9,191.9,491.9,194.7,488.9,195.2z"/>
+					</g>
+				</g>
+				<g>
+					<path class="st14" d="M578.2,234.3l-82.1,1.2c-2.6,0-4.5-2.2-4-4.7l11.8-83.1c2.6-14.1,14.9-24.7,29.6-25.4l0,0
+						c14.8-0.7,27.8,9,31,23l17.7,84C582.8,231.8,580.9,234.2,578.2,234.3L578.2,234.3z"/>
+					
+						<ellipse transform="matrix(0.983 -0.1836 0.1836 0.983 -18.5681 101.2007)" class="st15" cx="537.2" cy="150.9" rx="28.2" ry="15.2"/>
+					<path class="st15" d="M484.9,231.4L484.9,231.4c0.1-2.9,2.6-5.3,5.6-5.3l92.2,0.5c3,0,5.4,2.4,5.3,5.4l0,0
+						c-0.1,2.9-2.6,5.3-5.6,5.3l-92.2-0.5C487.2,236.8,484.8,234.4,484.9,231.4z"/>
+				</g>
+				<g>
+					<g>
+						<path class="st16" d="M475.2,87.2c7,0,13.4,1.2,18.9,3.5c0.5,0.2,0.9,0.4,1.4,0.6c6.5,2.9,12.5,7.2,15.1,13.7
+							c3,9.3-7,21.3-17.1,19c-8.2-2.2-13-10.4-15.8-17.8c-0.2-0.5-0.3-0.9-0.5-1.4C475.6,99.6,474.9,93.7,475.2,87.2L475.2,87.2z"/>
+						<path class="st7" d="M492.2,95.5c-0.4,0.5-0.5,1.1-0.4,1.7c-3.7-0.9-6.9-0.6-7.5,1.6c-0.6,2.1,1.5,3.9,4.6,5.1
+							c-2.8,1.2-4.2,3.2-3.4,5.6c0.9,2.9,4.3,4,8.3,2.7c-0.9,1.9-0.9,3.6,0.6,4.7c2.3,1.6,5.4-0.2,7.4-3.4l3.1-8.6
+							c0.3-1.1,0-2.3-0.9-3.1c-1.3-1.2-4.9-4.5-4.9-4.5S493.9,93.2,492.2,95.5L492.2,95.5z"/>
+					</g>
+					<g>
+						<path class="st16" d="M563.1,67.2c-6.3,3.1-11.5,7.1-15.5,11.6c-0.3,0.4-0.7,0.8-1,1.2c-4.5,5.5-8.1,12.1-7.7,19.1
+							c1.3,9.7,15.5,16,23.5,9.4c6.4-5.6,7.2-15.1,6.6-23.1c0-0.5-0.1-1-0.2-1.4C568.1,78.6,566.3,72.9,563.1,67.2L563.1,67.2z"/>
+						<path class="st7" d="M552.7,81.5c0.6,0.3,0.9,0.8,1,1.4c3-2.4,6-3.5,7.5-1.7c1.4,1.6,0.3,4.2-2.1,6.6c3-0.1,5.1,1.2,5.4,3.7
+							c0.4,3.1-2.3,5.4-6.5,6c1.6,1.3,2.3,2.9,1.3,4.5c-1.5,2.4-5,2.1-8.1,0l-6.3-6.5c-0.7-0.9-0.9-2.1-0.5-3.2
+							c0.7-1.7,2.6-6.2,2.6-6.2S550.2,80.2,552.7,81.5L552.7,81.5z"/>
+					</g>
+					<g>
+						<path class="st12" d="M540.3,153.9c54.3-13.5,35.8-53.4,35.8-53.4L478,123.6C478,123.6,477.4,166.6,540.3,153.9z"/>
+						<g>
+							<path class="st11" d="M529.2,111.3c-2.4,3-3.4,6.1-2.6,8.7c2.2,7.1,16.8,13.4,32.3,8.5c17.9-6.1,17-28.3,17-28.3
+								S553,105.7,529.2,111.3z"/>
+							<path class="st11" d="M478,123.6c-0.2,0,8.5,15.2,28.5,14.5c20-0.8,29.8-13.4,28.9-20.8c-0.3-2.4-1.6-5.3-4.1-6.9
+								C507.2,116,481.5,122.9,478,123.6z"/>
+							<path class="st11" d="M489,124.3c-2-14.2,9.5-31.8,30.9-36.6c21.3-4.8,42.2,4.1,46.7,17.6L489,124.3L489,124.3z"/>
+						</g>
+					</g>
+					<g>
+						<path class="st14" d="M547.4,89l-54.3,18l7.8-55.3c0.4-3,4.3-4.3,6.5-2.2L547.4,89L547.4,89z"/>
+						<path class="st14" d="M465.1,116.8L465.1,116.8c0.3,0.9,1.4,1.4,2.4,1.1l111.8-40.2c1-0.3,1.5-1.4,1.1-2.3l0,0
+							c-0.3-0.9-1.4-1.4-2.3-1.1l-111.8,40.2C465.3,114.8,464.8,115.8,465.1,116.8L465.1,116.8z"/>
+					</g>
+					<g>
+						<g>
+							<path class="st16" d="M519.8,136.2c0,0,1.8,9.4,14.6,6.9c12.8-2.5,10.2-12.7,10.2-12.7s-9.5,0-13.9-3.6
+								C527.8,133.6,519.8,136.2,519.8,136.2L519.8,136.2z"/>
+							<path class="st17" d="M526.9,140.9c0.4-2,4.2-3.7,7.3-1.9c0.9-1.9,5.4-3.3,6.7-1.5C541.1,140.4,528,143.2,526.9,140.9
+								L526.9,140.9z"/>
+							<path class="st7" d="M520.9,135.2l6.6-4.6l1.2,6c0.1,1-1.6,2-2.8,1.3L520.9,135.2L520.9,135.2z"/>
+							<path class="st7" d="M534.3,128.4l7.9,2.3l-2.7,3.6c-0.4,1.4-2.5,1.7-3,0.4L534.3,128.4z"/>
+							<path class="st16" d="M515,137.8c-0.6,0-1.2-0.5-1.1-1.1c0-0.6,0.5-1.1,1.2-1.1c6.6,0,12.6-4.4,13.9-10.2l0.5-2.1l1.5,1.5
+								c2.8,2.7,11.5,6.8,18.8,4.1c0.6-0.2,1.3,0.1,1.5,0.7c0.2,0.6-0.1,1.2-0.7,1.5c-7.4,2.7-15.7-0.5-19.8-3.4
+								C528.5,133.5,522.1,137.8,515,137.8L515,137.8L515,137.8z"/>
+						</g>
+						<g>
+							<path class="st7" d="M540.4,98.3c-7.8,0.2-14.4,3.7-17.1,8.4c-1.1-1.6-2.5-2.8-4.2-3.4c-5.7-2.1-12.6,2.7-15.7,10.5
+								c-0.1,0.2-0.2,0.4-0.2,0.6c-2.9,7.1-1.4,19.3,8.6,18.6c7-0.2,11.3-6.5,13-12.7c0.1-0.3,0.2-0.6,0.2-0.8s0.1-0.6,0.2-0.8
+								c3.4,3.5,9.3,5.7,16,5.6c10.4-0.3,18.7-6.3,18.5-13.5C559.4,103.6,550.8,98,540.4,98.3L540.4,98.3z"/>
+							<g>
+								<defs>
+									<path id="SVGID_00000093863835956845771530000006525867272176999326_" d="M540.4,98.3c-7.8,0.2-14.4,3.7-17.1,8.4
+										c-1.1-1.6-2.5-2.8-4.2-3.4c-5.7-2.1-12.6,2.7-15.7,10.5c-0.1,0.2-0.2,0.4-0.2,0.6c-2.9,7.1-1.4,19.3,8.6,18.6
+										c7-0.2,11.3-6.5,13-12.7c0.1-0.3,0.2-0.6,0.2-0.8s0.1-0.6,0.2-0.8c3.4,3.5,9.3,5.7,16,5.6c10.4-0.3,18.7-6.3,18.5-13.5
+										C559.4,103.6,550.8,98,540.4,98.3L540.4,98.3z"/>
+								</defs>
+								<clipPath id="SVGID_00000089536144266146664670000014881350870240431242_">
+									<use xlink:href="#SVGID_00000093863835956845771530000006525867272176999326_"  style="overflow:visible;"/>
+								</clipPath>
+								<g style="clip-path:url(#SVGID_00000089536144266146664670000014881350870240431242_);">
+									<path class="st17" d="M554,101.7c-3.5-2.8-8.4-4.9-14.3-4.8c-7.8,0.2-14.4,3.7-17.1,8.4c-1.1-1.6-2.5-2.8-4.2-3.4
+										c-5.8-2.1-13,2.9-16,11.2c-0.8,2.2-1.2,4.5-1.3,6.6c3.6-1.7,5.4-9.5,12.4-11.9c8.5-4,9.1,4.7,11.1,3.9
+										c2.2-0.8,0.9-7.3,13.3-9.5C543.1,101.2,548.4,103.8,554,101.7L554,101.7z"/>
+									
+										<ellipse transform="matrix(0.2617 -0.9652 0.9652 0.2617 266.5616 587.548)" class="st16" cx="517.3" cy="119.5" rx="6.6" ry="4.1"/>
+									
+										<ellipse transform="matrix(0.6576 -0.7533 0.7533 0.6576 97.9866 444.3542)" class="st16" cx="537.9" cy="114.4" rx="4.2" ry="6.6"/>
+								</g>
+							</g>
+							<path class="st16" d="M559.3,98.7c-0.4-0.5-1.1-0.6-1.6-0.2c-1.1,0.9-2.3,1.6-3.5,2.1c0.9-0.7,1.8-1.5,2.6-2.4
+								c1-1.3-1-2.8-1.9-1.5c-0.9,1.3-2,2.4-3.2,3.3c0.8-0.8,1.5-1.8,2.1-2.9c0.7-1.5-1.5-2.6-2.1-1.1c-0.6,1.4-1.5,2.7-2.7,3.7
+								c-0.8,0.7-1.6,1.2-2.5,1.7c-20.1-2.2-22.9,9.3-23,9.8c-0.1,0.6,0.2,1.3,0.9,1.4c0.1,0,0.2,0,0.3,0c0.5,0,1-0.3,1.1-0.9
+								c0.1-0.4,2.6-10.2,21.2-7.9c1.7,0.2,7.4,0.6,12.3-3.5C559.7,99.9,559.7,99.2,559.3,98.7L559.3,98.7z"/>
+							<path class="st16" d="M525.5,110.8c-0.1-0.2-2.5-5.3-7.4-5.7c-4.1-0.4-8.6,2.6-13.4,8.9c-1.2,0.6-2.6,1-4,1.2
+								c-1.6,0.2-3.2,0.1-4.7-0.4c-1.5-0.5-2.2,1.8-0.7,2.3c1.3,0.3,2.6,0.4,3.9,0.3c-1.4,0.3-2.9,0.3-4.3,0.2
+								c-1.6-0.2-1.8,2.3-0.2,2.4c0.9,0,1.7-0.1,2.6-0.2c-1.2,0.3-2.5,0.3-3.8,0.2c-0.7-0.1-1.2,0.4-1.3,1s0.4,1.2,1,1.3
+								c0.7,0.1,1.4,0.1,2.1,0.1c4.2-0.1,7.8-2.1,10.5-6c4.4-6.2,8.5-9.2,11.9-8.9c3.6,0.3,5.5,4.3,5.5,4.4c0.3,0.6,1,0.9,1.6,0.6
+								C525.5,112.1,525.8,111.4,525.5,110.8L525.5,110.8z"/>
+						</g>
+						<path class="st16" d="M538.8,119.2c0.8,3.2-8.5,8.2-8.5,8.2s-10.4-0.3-11.2-3.6s3-6.9,8.5-8.2S538,116,538.8,119.2
+							L538.8,119.2z"/>
+					</g>
+				</g>
+			</g>
+			<g>
+				<g>
+					<path class="st7" d="M496,106.1c-8.2,35-31.1,57.7-63.3,59c0,0-37.6,0.9-50.1-19.7c-0.5-0.9-0.7-2-0.5-3l0,0
+						c0.7-3.1,4.5-4.5,7-2.5c3.4,2.7,8.4,5.4,15.1,5.5c13.7,0.3,23.1-20.5,14.2-35.5s-6.9-45.3,33.2-47.7
+						C467.8,61.6,504.3,71,496,106.1L496,106.1z"/>
+					<path class="st7" d="M449.7,62c1.5-14.2,14-17.6,22.4-16.3c8.4,1.4,10.4,9.5,11.1,13.7c0.4,2.5,1.1,5.1,2.9,6.9
+						c2.1,2,5.5,2.4,8.4,1.8c1.4-0.3,2.9-0.8,4.3-0.6c2.3,0.3,4.1,2.6,4.1,4.9c0,2.3-1.4,4.5-3.3,5.9c-1.9,1.4-4.3,2.1-6.6,2.4
+						c-9.6,1.4-19.8-2.9-25.2-10.8L449.7,62L449.7,62z"/>
+				</g>
+				<path class="st19" d="M480,86.9c-5.8-3.9-12.6-4.7-16.7-2.3c-2.5-5.7-10.6-8.8-19.3-7.2c-9.7,1.9-16.6,9.1-15.3,16.1
+					s10.2,11.2,19.9,9.3c5.2-1,9.5-3.5,12.3-6.7c1.4,2.8,3.7,5.6,7,7.7c7.1,4.8,15.6,4.9,18.9,0.2C490.2,99.4,487.1,91.7,480,86.9z"
+					/>
+				<g>
+					<g>
+						<defs>
+							<path id="SVGID_00000073689652421403830060000004634042480881743496_" d="M480,86.9c-5.8-3.9-12.6-4.7-16.7-2.3
+								c-2.5-5.7-10.6-8.8-19.3-7.2c-9.7,1.9-16.6,9.1-15.3,16.1s10.2,11.2,19.9,9.3c5.2-1,9.5-3.5,12.3-6.7c1.4,2.8,3.7,5.6,7,7.7
+								c7.1,4.8,15.6,4.9,18.9,0.2C490.2,99.4,487.1,91.7,480,86.9z"/>
+						</defs>
+						<clipPath id="SVGID_00000087382687239269506960000016069895946037951895_">
+							<use xlink:href="#SVGID_00000073689652421403830060000004634042480881743496_"  style="overflow:visible;"/>
+						</clipPath>
+						<g style="clip-path:url(#SVGID_00000087382687239269506960000016069895946037951895_);">
+							<ellipse transform="matrix(0.7925 -0.6099 0.6099 0.7925 39.3584 307.3872)" cx="471.4" cy="95.9" rx="4.6" ry="7.5"/>
+							<ellipse transform="matrix(0.9045 -0.4264 0.4264 0.9045 4.0883 202.0918)" cx="453.4" cy="91.9" rx="7.7" ry="5.5"/>
+						</g>
+					</g>
+					<path d="M460.8,76c-0.2,0-0.4-0.2-0.6-0.4c-5.1-7.6-13.5-3.8-13.9-3.6c-0.5,0.2-1,0-1.2-0.4s0-1,0.4-1.2
+						c0.1-0.1,10.1-4.6,16.1,4.2c0.3,0.4,0.2,0.9-0.3,1.2C461.3,76,461,76,460.8,76L460.8,76z"/>
+					<path d="M484.5,87.8c-0.2,0-0.4-0.2-0.5-0.3c-5.8-7.3-15.2-7.4-15.3-7.4c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9
+						c0.4,0,10.4,0.1,16.7,8.1c0.3,0.4,0.2,0.9-0.2,1.2C485.1,87.8,484.8,87.8,484.5,87.8L484.5,87.8z"/>
+					<path d="M435.1,108.7c-12.1-2.4-12.4-13.5-12.4-13.7c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.8l0,0
+						c0,0.4,0.3,10.7,12.5,12.2c6.8,0.8,9.8,0.3,13-0.3c2.8-0.5,5.7-1.1,11.3-0.6c6,0.6,9.3,2,12.3,3.3c2.8,1.2,5.1,2.2,8.8,2
+						c7-0.3,7.5-6.7,7.5-6.9c0-0.5,0.5-0.9,1-0.8c0.5,0,0.9,0.4,0.8,0.9c-0.2,2.8-2.3,8.3-9.3,8.6c-4.2,0.2-6.7-0.9-9.6-2.1
+						c-2.9-1.2-6.1-2.6-11.7-3.1c-5.3-0.5-8,0-10.8,0.5c-3.2,0.6-6.4,1.2-13.5,0.3C436.2,108.9,435.6,108.8,435.1,108.7L435.1,108.7
+						z"/>
+				</g>
+				<g>
+					<path class="st21" d="M473.5,117.8l-13.6,2.1c-0.7,0.1-1.2,0.7-1.3,1.4l0,0.3c-0.1,0.7,0.2,1.4,0.9,1.7l12.5,5.4
+						c0.9,0.4,1.9-0.3,2.1-1.3l1.2-7.8C475.3,118.5,474.5,117.7,473.5,117.8L473.5,117.8z"/>
+					<path class="st21" d="M443.2,125.3l14.1-2.3c0.5-0.1,0.8-0.5,0.9-1l0.2-1c0.1-0.5-0.1-1-0.6-1.2l-12.9-5.7
+						c-0.6-0.3-1.3,0.2-1.4,0.9l-1.4,9.1C442,124.8,442.6,125.4,443.2,125.3L443.2,125.3z"/>
+					
+						<ellipse transform="matrix(0.1106 -0.9939 0.9939 0.1106 287.2479 563.7639)" class="st22" cx="458.6" cy="121.4" rx="3.8" ry="4.3"/>
+				</g>
+				<g>
+					<path d="M439,60.4c-2.1-4.6-7.8-7.2-13.2-7.3c-7.6-0.1-13,5.4-13.3,13c-0.1,3.3,0.6,6.6,2.8,8.7C433.3,71,439,60.4,439,60.4
+						L439,60.4z"/>
+					<path class="st21" d="M412.9,71.8c0.4,0.8,1.1,2,1.7,2.6c18.4-4.1,24.1-15.2,24.1-15.2c-0.3-0.6-0.6-1.1-0.9-1.6
+						c-0.2-0.3-0.7-0.3-1,0c-2.1,2.3-10.9,10.8-23.6,13.3C412.9,71,412.6,71.4,412.9,71.8L412.9,71.8z"/>
+					<path d="M408,76.3c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.7,0.6-0.7c0.2,0,25-1.9,34-21.7c0.1-0.3,0.5-0.5,0.9-0.3
+						s0.5,0.5,0.3,0.8C433.8,74.4,408.3,76.3,408,76.3C408,76.3,408,76.3,408,76.3z"/>
+				</g>
+				<path d="M466.2,148.3c-2.6-0.2-9.2-0.9-12.2-4.2c-1.2-1.3-1.7-2.8-1.5-4.6c0.1-1.6,0.9-3,2.2-4c4.7-3.8,15.4-2.7,15.9-2.7
+					c0.5,0.1,0.9,0.5,0.9,1.1c-0.1,0.5-0.5,0.9-1.1,0.9c-0.1,0-10.4-1.1-14.5,2.3c-0.9,0.8-1.4,1.6-1.5,2.7c-0.1,1.2,0.2,2.2,1,3.1
+					c3.1,3.5,11.8,3.6,11.9,3.6c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,0.9C467.2,148.3,466.8,148.3,466.2,148.3L466.2,148.3z"/>
+				<path d="M437.8,142.3c-4.8-0.3-9.9-3.2-10.2-3.3c-0.5-0.3-0.6-0.9-0.4-1.3c0.3-0.5,0.9-0.6,1.3-0.4c0.1,0,7.7,4.2,12.1,2.8
+					c1.1-0.4,1.9-1.1,2.4-2.2c0.5-1,0.5-2,0.1-3.1c-1.9-4.9-11.3-9.1-11.4-9.2c-0.5-0.2-0.7-0.8-0.5-1.3s0.8-0.7,1.3-0.5
+					c0.4,0.2,10.3,4.6,12.4,10.3c0.6,1.6,0.6,3.1-0.1,4.6c-0.7,1.6-1.9,2.7-3.6,3.2C440.2,142.3,439,142.4,437.8,142.3L437.8,142.3z
+					"/>
+			</g>
+			<g>
+				<g>
+					
+						<ellipse transform="matrix(0.8503 -0.5264 0.5264 0.8503 -46.3423 268.0638)" class="st23" cx="448" cy="215.5" rx="27.6" ry="26.4"/>
+					<path class="st24" d="M476.2,215.5c-0.1-4.2-1.2-8.1-3.2-11.4c-2.9,3.8-7.6,8.6-15.1,12.5c-14.7,7.5-37.2,2.1-37.4,2
+						c0,0,0,0,0,0l0.2,2.7c1.6,12.9,13.7,22.4,28.1,21.6C464.2,242,476.5,229.7,476.2,215.5L476.2,215.5z"/>
+					<path class="st24" d="M465.3,217.8c-2.7-7.8-8.1-12.9-12.2-15.8l3.3-4.4c4.7,3.4,10.9,9.3,14,18.3L465.3,217.8L465.3,217.8z"/>
+					<path class="st24" d="M436.8,224.4c0.5-5-0.2-10-2-15.1l5.1-2c2.1,5.8,2.9,11.6,2.3,17.4L436.8,224.4L436.8,224.4z"/>
+					
+						<ellipse transform="matrix(0.7874 -0.6165 0.6165 0.7874 -44.1942 318.4838)" class="st25" cx="439.6" cy="223.3" rx="1.9" ry="1.8"/>
+					
+						<ellipse transform="matrix(0.7874 -0.6165 0.6165 0.7874 -33.4902 333.9242)" class="st25" cx="467.3" cy="215.5" rx="1.9" ry="1.8"/>
+					<path class="st25" d="M461.2,218.1c-2.7,1.4-7.8,3.4-14.9,4.3c-1,0.1-1.8,1.1-1.7,2.1l1,7.9c0.1,0.4,0.3,0.9,0.6,1.1
+						c1.4,1.1,5.4,3.8,9.2,2.9c4-0.9,7.9-6.6,9-8.4c0.2-0.4,0.3-0.8,0.3-1.2l-0.9-7.4C463.7,218.2,462.4,217.6,461.2,218.1
+						L461.2,218.1z"/>
+				</g>
+				<g>
+					<path class="st26" d="M461.1,262.5c-0.2,0-0.4-0.1-0.5-0.2c-0.3-0.3-0.2-0.8,0.1-1c2.9-2.5,4.8-5.9,6.5-9.1
+						c1.8-3.5,2.5-7.3,1.9-10.7c-0.4-2-1.2-3.8-2.4-5.4c-0.2-0.3-0.2-0.8,0.1-1c0.3-0.3,0.8-0.2,1,0.1c1.4,1.7,2.3,3.8,2.7,6
+						c0.7,3.7-0.1,7.8-2.1,11.6c-1.8,3.4-3.7,6.9-6.9,9.6C461.5,262.4,461.3,262.5,461.1,262.5L461.1,262.5z"/>
+					<path class="st25" d="M460.4,262l-0.2,2.7l16.3,0.6c0,0,0.9-4.7-3.5-5.6c-4.1-0.9-4.9,3.7-11.3,1.5
+						C461.1,261,460.5,261.4,460.4,262L460.4,262z"/>
+					<path class="st7" d="M475.3,268.3L475.3,268.3c-0.2-0.1-0.5-0.2-0.7,0l-1.1,0.5c-0.2,0.1-0.4,0.1-0.6,0l-1.7-0.9
+						c-0.2-0.1-0.4-0.1-0.5,0l-1.7,0.8c-0.2,0.1-0.4,0.1-0.6,0l-1.2-0.6c-0.1-0.1-0.3-0.1-0.5,0l-1.7,0.6c-0.1,0-0.3,0-0.4,0
+						l-2.2-0.8c-0.1-0.1-0.3-0.1-0.5,0l-1,0.4c-0.4,0.2-0.9-0.1-0.9-0.6l0.2-2.9l16.3,0.4l-0.2,2.6
+						C476.3,268.3,475.7,268.6,475.3,268.3L475.3,268.3z"/>
+				</g>
+				<g>
+					<path class="st26" d="M417.1,261c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.4-0.7-0.1-1c5.3-6.9,9.9-14.4,13.6-22.2
+						c0.2-0.4,0.6-0.5,1-0.4c0.4,0.2,0.5,0.6,0.4,0.9c-3.8,7.9-8.4,15.5-13.7,22.5C417.6,260.9,417.4,261,417.1,261L417.1,261z"/>
+					<path class="st25" d="M418.1,260.4l-0.2,2.7l-16.3-0.3c0,0-0.2-4.7,4.3-5.4c4.2-0.6,4.4,4,11.1,2.1
+						C417.5,259.3,418.1,259.7,418.1,260.4L418.1,260.4z"/>
+					<path class="st7" d="M402.4,265.8L402.4,265.8c0.2-0.1,0.5-0.1,0.7,0l1,0.6c0.2,0.1,0.4,0.1,0.6,0l1.8-0.8
+						c0.2-0.1,0.4-0.1,0.5,0l1.5,0.8c0.2,0.1,0.4,0.1,0.6,0l1.2-0.5c0.2-0.1,0.3-0.1,0.5,0l1.6,0.7c0.1,0.1,0.3,0.1,0.4,0l2.3-0.7
+						c0.2,0,0.3,0,0.5,0l1,0.5c0.4,0.2,0.9-0.1,0.9-0.6l0.2-2.9l-16.3-0.4l-0.2,2.6C401.4,265.8,401.9,266.1,402.4,265.8
+						L402.4,265.8z"/>
+				</g>
+				<g>
+					<path class="st26" d="M484.9,226.6C484.9,226.6,485,226.6,484.9,226.6c0.5-0.1,0.7-0.5,0.6-0.9c-0.3-1.2,0.6-2.4,1.6-3
+						c1.1-0.6,2.3-0.9,3.7-1.2l0.5-0.1c1.6-0.3,3.3-0.8,4.5-1.9c1.3-1.2,2-3,1.9-4.9c0-1.6-0.6-3.2-1.6-4.9c-2.3-3.9-6.4-7-11.1-8.5
+						c-4.4-1.3-9.2-1.3-14,0c-0.4,0.1-0.6,0.5-0.5,0.9c0.1,0.4,0.5,0.6,0.9,0.5c4.6-1.3,9.1-1.3,13.2-0.1c4.4,1.3,8.1,4.2,10.3,7.8
+						c0.9,1.5,1.3,2.9,1.4,4.2c0,1.5-0.5,2.9-1.5,3.8c-1,0.9-2.5,1.3-3.8,1.6l-0.5,0.1c-1.4,0.3-2.9,0.6-4.1,1.4
+						c-1.4,0.9-2.7,2.6-2.3,4.6C484.2,226.4,484.6,226.6,484.9,226.6L484.9,226.6z"/>
+					<path class="st26" d="M488,228.1c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.8-0.2-1c-0.8-0.5-1.3-1.5-1.2-2.5s0.8-1.9,1.6-2.2
+						c0.4-0.2,0.5-0.6,0.4-1s-0.6-0.5-1-0.4c-1.4,0.6-2.4,2-2.5,3.5c-0.1,1.5,0.6,3,1.9,3.8C487.7,228.1,487.9,228.1,488,228.1
+						L488,228.1z"/>
+					<path class="st26" d="M490.3,226.9c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.8-0.2-1c-0.7-0.4-1.2-1-1.6-1.7
+						c-0.2-0.4-0.3-0.6-0.3-0.9c0-0.3,0.1-0.6,0.3-0.9s0.5-0.4,0.9-0.4c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7
+						c-0.7,0-1.4,0.3-1.9,0.8c-0.5,0.5-0.8,1.2-0.8,1.9c0,0.5,0.2,1,0.5,1.6c0.5,0.9,1.2,1.7,2.1,2.2
+						C490,226.9,490.1,226.9,490.3,226.9L490.3,226.9z"/>
+				</g>
+				<g>
+					<path class="st26" d="M473,202.6c1.3-0.2,2.6-0.7,3.9-1.3c2.1-1.1,4.6-2.4,6.3-4.5c1.9-2.3,2.6-5.3,3.1-7.9l0.2-0.8
+						c0.5-2.3,0.9-4.8,2.1-6.8c1-1.9,3.2-4,5.9-3.9c0.4,0,0.8-0.3,0.8-0.7s-0.3-0.7-0.7-0.8c-2.8-0.1-5.6,1.7-7.2,4.6
+						c-1.3,2.2-1.8,4.8-2.2,7.2l-0.1,0.8c-0.5,2.4-1.1,5.2-2.8,7.2c-1.5,1.9-3.8,3.1-5.8,4.1c-1.6,0.8-3.4,1.6-5,1.1
+						c-0.4-0.1-0.8,0.1-0.9,0.5s0.1,0.8,0.5,0.9C471.6,202.7,472.3,202.7,473,202.6L473,202.6z"/>
+					<path class="st26" d="M486.5,185.5c0.2,0,0.5-0.2,0.6-0.4c1.1-2.6,3.4-4.6,6.1-5.4c0.4-0.1,0.6-0.5,0.5-0.9s-0.5-0.6-0.9-0.5
+						c-3.1,1-5.7,3.3-7,6.2c-0.2,0.4,0,0.8,0.4,0.9C486.3,185.5,486.4,185.5,486.5,185.5L486.5,185.5z"/>
+					<path class="st26" d="M486.6,185.6c0.2,0,0.4-0.1,0.5-0.3c1.1-1.6,3-2.8,5-3.1c0.4-0.1,0.7-0.4,0.6-0.8s-0.4-0.7-0.8-0.6
+						c-2.4,0.3-4.7,1.7-6,3.7c-0.2,0.3-0.1,0.8,0.2,1C486.3,185.6,486.5,185.6,486.6,185.6L486.6,185.6z"/>
+				</g>
+				<g>
+					<path class="st26" d="M403.9,246.3c0.3-0.1,0.5-0.3,0.6-0.6c0.1-0.4-0.2-0.8-0.6-0.9c-1.6-0.3-3-1.5-3.9-3.2
+						c-0.7-1.4-1-3.1-1.1-5.4c0-4.9,1.4-10,4.1-14.1s6.7-7.6,11.2-9.7c2.9-1.3,5.5-1.8,7.8-1.5c0.4,0.1,0.8-0.2,0.8-0.6
+						c0.1-0.4-0.2-0.8-0.6-0.8c-2.6-0.4-5.5,0.2-8.6,1.6c-4.8,2.2-9,5.9-11.8,10.3c-2.8,4.4-4.4,9.7-4.3,14.9c0,2.5,0.4,4.4,1.2,6
+						c1.1,2.1,2.9,3.6,4.9,4C403.7,246.3,403.8,246.3,403.9,246.3L403.9,246.3z"/>
+					<path class="st26" d="M403.1,244c0.3-0.1,0.7-0.1,1-0.3c0.8-0.4,1.5-1.1,1.9-1.9s0.4-1.8,0-2.6c-0.1-0.4-0.6-0.6-1-0.4
+						s-0.6,0.6-0.4,0.9c0.2,0.5,0.2,1.1,0,1.6s-0.6,0.9-1.1,1.1c-0.5,0.2-1.2,0.3-1.8,0.3c-0.5,0-1.1,0-1.4-0.3
+						c-0.3-0.3-0.8-0.3-1,0s-0.3,0.7,0,1c0.8,0.8,1.9,0.7,2.5,0.7C402.1,244.1,402.6,244.1,403.1,244L403.1,244z"/>
+					<path class="st26" d="M401.9,243.8c0.7-0.1,1.3-0.4,1.7-0.9c0.5-0.5,0.8-1.3,0.7-2c0-0.6-0.2-1.2-0.6-1.9
+						c-0.2-0.4-0.6-0.5-1-0.3c-0.4,0.2-0.5,0.6-0.3,1c0.2,0.4,0.4,0.9,0.4,1.3c0,0.4-0.1,0.8-0.3,1c-0.2,0.3-0.6,0.4-1.1,0.5
+						c-0.5,0-1,0-1.5-0.2c-0.4-0.1-0.8,0.2-0.9,0.6s0.2,0.8,0.6,0.9c0.6,0.1,1.3,0.2,2,0.2C401.7,243.8,401.8,243.8,401.9,243.8
+						L401.9,243.8z"/>
+				</g>
+				<path class="st24" d="M421.9,181.1c2.5,3.3,6.3,5.2,10.1,5.9c3.9,0.7,7.9,0.1,11.6-2c3.7-2.1,6.5-5.5,8.4-9.5
+					c1.9-3.9,2.8-8.5,1.8-12.6c-1-4.1-3.9-6.9-8.1-7.9c-4.1-1-9.6-0.1-14.7,2.8c-5.1,2.9-8.9,7.2-10.4,11.4
+					C419,173.6,419.5,177.8,421.9,181.1L421.9,181.1z"/>
+				<path class="st27" d="M419.3,195.2c2,10.7,14.4,17.4,27.6,15.1c13.2-2.4,22.3-13,20.3-23.7c-2-10.7-14.1-16.3-27.3-13.9
+					C426.6,175.1,417.3,184.5,419.3,195.2z"/>
+				<g>
+					<g>
+						<path class="st7" d="M431.3,181.9c3-2,6.7-1.8,8.2,0.4c0.5,0.7,0.7,1.6,0.7,2.5c0.2-0.1,0.4-0.2,0.6-0.2
+							c2.8-0.9,5.6-0.1,7.2,1.8c0.2-0.4,0.4-0.8,0.7-1.2c1.2-1.4,3.2-1.7,5.3-1.2c-0.1-1,0.1-1.9,0.8-2.6c1.5-1.6,4.5-1.3,6.8,0.7
+							c2.3,2,3,4.9,1.5,6.6c-0.8,0.8-1.9,1.1-3.2,1c0.5,1.7,0.2,3.4-0.8,4.5c-1.9,2.1-5.8,1.8-8.7-0.7c-0.7-0.6-1.2-1.3-1.7-2
+							c-0.7,1.7-2.2,3.1-4.2,3.8c-3.4,1.1-7-0.4-8-3.4c-0.2-0.5-0.3-1.1-0.3-1.6c-2.8,1.5-6,1.2-7.5-0.9
+							C427.1,187.3,428.3,183.9,431.3,181.9L431.3,181.9z"/>
+						<g>
+							<defs>
+								<path id="SVGID_00000160155947563304451920000001659287788258441110_" d="M431.3,181.9c3-2,6.7-1.8,8.2,0.4
+									c0.5,0.7,0.7,1.6,0.7,2.5c0.2-0.1,0.4-0.2,0.6-0.2c2.8-0.9,5.6-0.1,7.2,1.8c0.2-0.4,0.4-0.8,0.7-1.2
+									c1.2-1.4,3.2-1.7,5.3-1.2c-0.1-1,0.1-1.9,0.8-2.6c1.5-1.6,4.5-1.3,6.8,0.7c2.3,2,3,4.9,1.5,6.6c-0.8,0.8-1.9,1.1-3.2,1
+									c0.5,1.7,0.2,3.4-0.8,4.5c-1.9,2.1-5.8,1.8-8.7-0.7c-0.7-0.6-1.2-1.3-1.7-2c-0.7,1.7-2.2,3.1-4.2,3.8c-3.4,1.1-7-0.4-8-3.4
+									c-0.2-0.5-0.3-1.1-0.3-1.6c-2.8,1.5-6,1.2-7.5-0.9C427.1,187.3,428.3,183.9,431.3,181.9L431.3,181.9z"/>
+							</defs>
+							<clipPath id="SVGID_00000145053766875087963670000006459759631603457934_">
+								<use xlink:href="#SVGID_00000160155947563304451920000001659287788258441110_"  style="overflow:visible;"/>
+							</clipPath>
+							<g style="clip-path:url(#SVGID_00000145053766875087963670000006459759631603457934_);">
+								
+									<ellipse transform="matrix(0.5854 -0.8108 0.8108 0.5854 30.5281 438.614)" class="st29" cx="444.1" cy="189.5" rx="2.9" ry="2.1"/>
+								
+									<ellipse transform="matrix(0.7448 -0.6673 0.6673 0.7448 -10.8302 350.1772)" class="st29" cx="452.4" cy="189.2" rx="2.1" ry="2.9"/>
+								
+									<ellipse transform="matrix(0.7303 -0.6831 0.6831 0.7303 -9.4174 348.1598)" class="st29" cx="436.2" cy="186" rx="2.7" ry="1.9"/>
+								
+									<ellipse transform="matrix(0.6819 -0.7315 0.7315 0.6819 10.3406 393.611)" class="st29" cx="457.7" cy="184.9" rx="1.7" ry="2.8"/>
+							</g>
+						</g>
+						<path class="st26" d="M446.5,182.7c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.2-0.8-0.2-1c-2.8-2-5.4-0.4-6.3,0.7
+							c-0.3,0.3-0.2,0.8,0.1,1s0.8,0.2,1-0.1c0.2-0.2,1.9-2.1,4.3-0.4C446.1,182.7,446.3,182.8,446.5,182.7L446.5,182.7z"/>
+						<path class="st26" d="M448.1,184.2c0.2,0,0.4-0.1,0.5-0.3c1-1.7,3.6-1.4,3.7-1.4c0.4,0.1,0.8-0.2,0.8-0.6
+							c0.1-0.4-0.2-0.8-0.6-0.8c-0.1,0-3.6-0.5-5.1,2.1c-0.2,0.3-0.1,0.8,0.2,1C447.7,184.1,447.9,184.2,448.1,184.2L448.1,184.2z"
+							/>
+					</g>
+					<g>
+						<path class="st7" d="M433.1,200.6c0.4,1.6,1.2,4.2,2.8,6.3c0.3,0.4,1,0.2,1-0.2l-0.8-6.1l-1.9-1.2L433.1,200.6L433.1,200.6z"
+							/>
+						<path class="st26" d="M430.8,202.8c0.9-0.2,1.7-0.6,2.5-1.1c2.5-2,2.7-5.5,0.5-7.8c-0.5-0.6-1.2-1-1.9-1.4
+							c-0.4-0.2-0.8,0-1,0.3c-0.2,0.4,0,0.8,0.4,0.9c0.5,0.2,1,0.6,1.4,1c1.6,1.7,1.4,4.3-0.5,5.8c-0.9,0.7-2.2,1.1-3.4,1
+							c-0.4-0.1-0.8,0.2-0.8,0.6c0,0.4,0.3,0.7,0.7,0.8C429.4,203,430.1,202.9,430.8,202.8L430.8,202.8z"/>
+						<path class="st26" d="M450.2,202.7c5.3-1.1,8.5-3.3,10.3-5c0.3-0.3,0.3-0.7,0-1s-0.8-0.3-1.1,0c-1.9,1.8-5.5,4.1-11.7,5
+							c-6.8,1-10-1-12.4-2.4c-0.3-0.2-0.5-0.3-0.8-0.5c-0.4-0.2-0.8-0.1-1,0.2s-0.1,0.8,0.3,1c0.2,0.1,0.5,0.3,0.8,0.5
+							c2.6,1.6,6.2,3.7,13.5,2.6C448.8,203,449.5,202.8,450.2,202.7L450.2,202.7z"/>
+					</g>
+				</g>
+				<g>
+					<path class="st24" d="M434.7,174l29.1-8.4c1.2-0.3,2.2,0.4,1.9,1.4c-1,3.1-4.1,8.7-14.5,11.5C436.4,182.5,434.7,174,434.7,174
+						L434.7,174z"/>
+					<path class="st25" d="M423.7,175.8c0.2-0.3,0.7-0.5,1-0.3c1.6,0.8,3.5,1,5.2,0.6c-0.1-0.1-0.3-0.1-0.5-0.2
+						c-1-0.6-1.9-1.4-2.3-2.4c-0.2-0.4,0-0.8,0.4-0.9c0.4-0.2,0.8,0,1,0.4c0.4,0.8,1,1.4,1.7,1.8c0.7,0.4,1.5,0.5,2.2,0.5
+						c0.7-0.3,1.7-0.8,3.1-1.3c0.3-2-0.5-4.1-2.1-5.5c-0.3-0.3-0.3-0.7,0-1s0.8-0.3,1,0c1.7,1.5,2.6,3.7,2.6,5.9
+						c1.5-0.6,3.3-1.4,5.2-2.1c-0.6-2.3-2.3-4.4-4.5-5.5c-0.4-0.2-0.5-0.6-0.3-0.9c0.2-0.4,0.6-0.5,1-0.3c2.5,1.2,4.5,3.5,5.2,6.2
+						c1.7-0.6,3.4-1.2,5-1.8c0,0,0,0,0,0c0.4-0.7,0.6-1.4,0.6-2.1c0.2-1.6-0.3-3.3-1.4-4.6c-0.2-0.3-0.2-0.8,0.1-1
+						c0.3-0.2,0.8-0.2,1,0.1c1.3,1.6,1.9,3.6,1.7,5.6c-0.1,0.5-0.2,1-0.3,1.4c1.7-0.5,3.2-0.9,4.5-1.1c0.4-0.1,0.8,0.2,0.9,0.6
+						s-0.2,0.8-0.6,0.8c-5.7,0.9-18.2,6.2-21.8,7.8c-0.1,0.1-0.2,0.2-0.4,0.2c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
+						c-0.2,0.1-0.4,0.2-0.4,0.2c-0.7,0.4-1.4,0.6-2.1,0.8c-2.1,0.5-4.4,0.2-6.3-0.7C423.6,176.6,423.5,176.1,423.7,175.8
+						L423.7,175.8z"/>
+				</g>
+			</g>
+			<g>
+				<path class="st30" d="M569.9,261.3c1.1-2.4,1.1-4.9-0.3-7.1c-0.2-0.3-0.4-0.6-0.7-0.8c-4.4-3.9-10.8-2.9-16-0.4
+					c-0.4,0.2-0.8,0.4-1.2,0.6c-4.5,2.4-8.4,6-10.2,10.7c-1.8,5.3,0.7,10.8,5,13.8c3.2,2.2,7.3,3.2,11.1,1.5
+					c6.9-3.8,6.6-12.1,11.4-17.1C569.4,262.1,569.6,261.7,569.9,261.3L569.9,261.3z"/>
+				<g>
+					<path class="st31" d="M537.5,297.7L537.5,297.7c-4.1-0.3-7.1-4-6.8-8.4l0.5-24.6c0.7-7.8,4-13.9,12.1-13.4
+						c6.3,0.4,8.3,4.5,8.5,10c0.1,2.5-0.2,4.9-0.8,7.3l-5.4,22.6C544.6,295.3,541.2,298,537.5,297.7L537.5,297.7z"/>
+					<path class="st31" d="M539.9,301.4l-18.4-0.4c-2.3,0-4.1-1.9-4-4.1l0,0c0.3-6.7,6.1-12.1,13-11.9l7.4,0.1
+						c3.9,0.1,7,3.3,6.8,7.1l-0.2,5C544.4,299.6,542.3,301.5,539.9,301.4L539.9,301.4z"/>
+				</g>
+				<g>
+					<path class="st31" d="M498.6,295L498.6,295c-3.6-1.8-4.8-6.4-2.8-10.3l10.3-22.6c3.8-6.9,9.2-11.4,16.2-7.8
+						c5.6,2.8,5.7,7.3,3.7,12.5c-0.9,2.3-2.2,4.5-3.6,6.5l-13.9,18.9C506,295.5,501.8,296.7,498.6,295L498.6,295z"/>
+					<path class="st31" d="M501.2,295.8l-16.6-7.5c-2.1-0.9-2.9-3.4-1.9-5.4l0,0c3-6.1,10.5-8.8,16.6-6l6.6,3c3.5,1.6,5,5.8,3.3,9.3
+						l-2.2,4.5C506,295.9,503.4,296.8,501.2,295.8L501.2,295.8z"/>
+				</g>
+				<g>
+					<g>
+						<path class="st31" d="M485,232c-1.3,4.2-5.7,6.7-9.9,5.6c-4.1-1.2-6.5-5.5-5.1-9.8l0.8-3c0.7-2.6,3.4-4.2,6.1-3.5l4.9,1.4
+							c3.1,0.9,4.9,4.1,3.9,7.2L485,232L485,232z"/>
+						<path class="st31" d="M476.5,227.2L476.5,227.2c0.9-2.9,4-4.7,7.1-4l20.4,4.9c5.3,1.5,9,4.6,7.2,10.5c-1.4,4.6-4.6,5.5-8.5,5
+							c-1.7-0.2-3.4-0.8-5-1.5l-18.1-8.2C477,232.8,475.7,229.9,476.5,227.2L476.5,227.2z"/>
+					</g>
+					<path class="st32" d="M513.6,230.6l-21.8-7.1c-0.7-0.2-1.4,0.5-1,1.2l2.4,4c0.3,0.5,0,1.1-0.6,1.2l-6.5,0.9
+						c-0.6,0.1-0.9,0.8-0.5,1.3l3.5,4c0.4,0.4,0.2,1.1-0.4,1.3l-3.2,0.9c-0.8,0.2-0.8,1.3,0,1.5l22.4,7.1c4.7,1.5,9.7-1.1,11.2-5.7
+						l0,0C520.5,236.8,518.1,232.1,513.6,230.6L513.6,230.6z"/>
+				</g>
+				<path class="st32" d="M555.6,247.2l0.1-19.1c0-2.3-1.9-4.1-4.2-4l-44.4,0.7c-2.3,0-4.2,1.9-4.2,4.2l-0.1,21.7c0,0.1,0,0.2,0,0.4
+					l-5.2,17.7c-0.3,1.1,0.8,2,1.8,1.5l7.8-3.3c0.5-0.2,1.2-0.1,1.5,0.4l2.8,3.2c0.4,0.5,1.2,0.6,1.7,0.2l6.1-3.8
+					c0.5-0.3,1.3-0.3,1.7,0.2l5,5.3c0.5,0.6,1.5,0.5,2,0l5.4-5.9c0.6-0.6,1.6-0.6,2.1,0l3.4,4.5c0.5,0.6,1.4,0.7,2,0.1l4.9-4.7
+					c0.5-0.5,1.2-0.5,1.7-0.1l6.6,4.8c0.9,0.6,2.2,0,2.1-1.1L555.6,247.2L555.6,247.2z"/>
+				<g>
+					<g>
+						<path class="st31" d="M582.5,234.5c0.4,4.4,4.3,7.6,8.6,7.1s7.5-4.4,7.1-8.7l-0.2-3.1c-0.2-2.7-2.5-4.7-5.3-4.4l-5.1,0.6
+							c-3.2,0.4-5.6,3.2-5.3,6.4L582.5,234.5L582.5,234.5z"/>
+						<path class="st31" d="M591.8,231.2L591.8,231.2c-0.3-3-3-5.3-6.1-5.1l-21.1,1.4c-5.5,0.6-9.9,3.1-9.3,9.1
+							c0.5,4.8,3.4,6.2,7.3,6.3c1.8,0.1,3.5-0.2,5.2-0.6l19.6-5.1C590.2,236.6,592.1,234,591.8,231.2L591.8,231.2z"/>
+					</g>
+					<path class="st32" d="M550.9,228.7l26.7-3.9c0.8-0.1,1.2,0.7,0.7,1.3l-3.2,3.5c-0.4,0.4-0.2,1.1,0.3,1.3l6.2,2
+						c0.6,0.2,0.8,1,0.2,1.4l-4.3,3.4c-0.5,0.4-0.4,1.1,0.1,1.3l3,1.4c0.7,0.3,0.5,1.4-0.3,1.5L557,245c-4.9,0.7-9.3-2.7-9.8-7.4
+						l-0.4-3.7C546.5,231.4,548.3,229.1,550.9,228.7L550.9,228.7z"/>
+				</g>
+				<g>
+					<path class="st31" d="M575.3,192.6L575.3,192.6c0-13.4-11-24.1-24.6-23.8l-27.1,0.4c-13.6,0.2-24.7,11.2-24.8,24.6v0.1
+						c-7.6,3-12.9,10.2-13,18.6v1c0,10.9,7.9,22.8,51.8,22.1s50.4-12.9,50.5-23.8v-1C588.2,202.5,582.9,195.4,575.3,192.6
+						L575.3,192.6z"/>
+					<g>
+						
+							<ellipse transform="matrix(0.7849 -0.6196 0.6196 0.7849 13.7704 361.1418)" class="st31" cx="527" cy="160.7" rx="9.3" ry="17.4"/>
+						
+							<ellipse transform="matrix(0.3867 -0.9222 0.9222 0.3867 161.5356 581.6985)" class="st31" cx="518.1" cy="169.4" rx="11.4" ry="18.2"/>
+						
+							<ellipse transform="matrix(0.9349 -0.3548 0.3548 0.9349 -30.7153 190.9471)" class="st31" cx="505.3" cy="179.2" rx="11.4" ry="11.1"/>
+					</g>
+				</g>
+				<g>
+					<g>
+						<path class="st31" d="M552.4,162.8c1.9-16.4,13.8-28.3,28-34.7c10.9-6.2,29.2-5.2,33.6,9.9c2.7,10.2-6.9,18.1-15.3,19.4
+							c-7.5,1.8-15-0.6-22.7-0.3c-6.4,0.6-11.6,5.2-16.7,8.7C558.4,166.7,554.6,163.8,552.4,162.8L552.4,162.8z"/>
+						<path class="st7" d="M553.6,163.5c3.5-11,12.7-27.5,34-33.1c9.8-1.9,20.2-0.8,21.5,9.7c0.7,7-7.3,12-13.7,12.6
+							c-5.8,0.9-11.8-0.6-17.5-0.3c-10.7,0.7-20.3,13.4-20.3,13.4S555.1,164.3,553.6,163.5L553.6,163.5z"/>
+					</g>
+					<g>
+						<path class="st31" d="M556.1,164.9c6.7-15.2,21.6-23.3,36.9-25.5c12.2-2.9,29.3,3.3,29,19.1c-0.4,10.6-11.9,15.4-20.3,14.4
+							c-7.7-0.4-14.1-4.8-21.5-6.7c-6.3-1.2-12.6,1.7-18.5,3.6C560.5,170.3,557.9,166.5,556.1,164.9L556.1,164.9z"/>
+						<path class="st7" d="M557,165.8c6.7-9.6,20.2-22.9,42.2-22.2c9.9,1,19.4,5,17.6,15.4c-1.4,6.9-10.5,9.5-16.8,8.2
+							c-5.8-0.7-11-4-16.6-5.2c-10.4-2.4-23.3,7.1-23.3,7.1S558.1,167,557,165.8L557,165.8z"/>
+					</g>
+					<path class="st33" d="M555.8,180.6l-11.5-4.8c-4.9-2.1-7.1-7.6-4.9-12.5l0.5-1.2c2.2-4.8,8-7.1,12.8-5l11.5,4.8
+						c4.9,2.1,7.1,7.6,4.9,12.5l-0.5,1.2C566.4,180.4,560.6,182.7,555.8,180.6z"/>
+				</g>
+				<g>
+					<path class="st7" d="M534.6,231.1l-7.4,0.1l-1.3-8.4c0,0,1.9,0.3,5.8-7c0.6,5.2,3.9,6.5,3.9,6.5L534.6,231.1L534.6,231.1z"/>
+					<path class="st16" d="M547.3,218c-0.6-0.1-1.2,0.3-1.3,0.9c-0.5,2.2-2,3.5-4.7,3.9c-7.3,0.1-7.9-4.4-8.3-7.6
+						c0-0.2-0.1-0.5-0.1-0.7c-0.1-0.6-0.6-1.1-1.3-1.1c-0.6,0-1.2,0.4-1.4,1.1c0,0.2-0.1,0.4-0.1,0.6c-0.8,3.6-2,7.2-7.1,7.2
+						c-2.1,0.1-3.7-0.3-4.7-1.3c-1.3-1.2-1.2-3-1.2-3c0-0.6-0.4-1.1-1-1.1c-0.6,0-1.1,0.4-1.2,1c0,0.1-0.1,2.7,1.8,4.6
+						c1.5,1.4,3.6,2.1,6.4,1.9c3.7-0.1,5.9-1.7,7.2-3.6l0,4.4c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1v-4.2c1.4,2.2,3.9,4.1,9,4h0.1
+						h0.1c4.7-0.6,6.3-3.4,6.7-5.6C548.3,218.7,547.9,218.1,547.3,218L547.3,218z"/>
+					<g>
+						
+							<ellipse transform="matrix(0.7518 -0.6593 0.6593 0.7518 3.3167 412.9046)" class="st7" cx="550.2" cy="202" rx="13.4" ry="16.2"/>
+						<g>
+							<defs>
+								
+									<ellipse id="SVGID_00000123409037828281909010000014404815683802120125_" transform="matrix(0.7518 -0.6593 0.6593 0.7518 3.3167 412.9046)" cx="550.2" cy="202" rx="13.4" ry="16.2"/>
+							</defs>
+							<clipPath id="SVGID_00000021828213544008992680000002514785876612005812_">
+								<use xlink:href="#SVGID_00000123409037828281909010000014404815683802120125_"  style="overflow:visible;"/>
+							</clipPath>
+							<g style="clip-path:url(#SVGID_00000021828213544008992680000002514785876612005812_);">
+								
+									<ellipse transform="matrix(0.9963 -8.593860e-02 8.593860e-02 0.9963 -15.193 47.6191)" class="st16" cx="545.5" cy="200.3" rx="4.5" ry="7.2"/>
+								<path class="st33" d="M534.8,196.9c10.4,2.1,22.6-1.1,29.3-3.3l-1.8-10.6l-26.3,1.2L534.8,196.9L534.8,196.9z"/>
+							</g>
+						</g>
+						<path class="st16" d="M565.9,191c-0.3-0.5-1-0.7-1.5-0.4c-0.1,0.1-0.2,0.1-0.4,0.2c0.3-0.6,0.5-0.9,0.5-1
+							c0.2-0.6,0-1.2-0.6-1.4c-0.6-0.2-1.2,0.1-1.4,0.6c0,0-0.1,0.3-0.4,0.7c0-0.5-0.3-1-0.8-1.1c-0.6-0.1-1.2,0.2-1.4,0.8
+							c0,0.2-1.1,3.6-4.7,4.9c-9.8,2.7-19.6,2.2-19.7,2.2c-0.6,0-1.1,0.4-1.2,1s0.4,1.1,1,1.1c0.2,0,1.6,0.1,3.7,0.1
+							c4-0.1,10.5-0.5,17.1-2.4c0.1,0,0.2,0,0.2,0c0.5-0.1,1-0.3,1.5-0.5c2.6-0.8,5.2-1.9,7.5-3.3C566,192.2,566.2,191.6,565.9,191
+							L565.9,191z"/>
+					</g>
+					<g>
+						
+							<ellipse transform="matrix(0.8046 -0.5938 0.5938 0.8046 -17.9755 345.9358)" class="st7" cx="516.6" cy="200.3" rx="16.6" ry="13.1"/>
+						<g>
+							<defs>
+								
+									<ellipse id="SVGID_00000031892180504416565940000016219067016216338595_" transform="matrix(0.8046 -0.5938 0.5938 0.8046 -17.9755 345.9358)" cx="516.6" cy="200.3" rx="16.6" ry="13.1"/>
+							</defs>
+							<clipPath id="SVGID_00000146492050601996363490000012921256417190192791_">
+								<use xlink:href="#SVGID_00000031892180504416565940000016219067016216338595_"  style="overflow:visible;"/>
+							</clipPath>
+							<g style="clip-path:url(#SVGID_00000146492050601996363490000012921256417190192791_);">
+								
+									<ellipse transform="matrix(9.480336e-02 -0.9955 0.9955 9.480336e-02 272.3531 700.1349)" class="st16" cx="521.2" cy="200.3" rx="7.8" ry="4.8"/>
+								<path class="st33" d="M533.2,197.1c-9.6,1.1-20.2-3-25.9-5.8l3.1-10.2l23.5,3.4L533.2,197.1L533.2,197.1z"/>
+							</g>
+						</g>
+						<path class="st16" d="M531.7,196.4c-0.1,0-9.9,0-19.5-3.2c-3.5-1.4-4.2-4.9-4.2-5.1c-0.1-0.6-0.7-1-1.3-0.9
+							c-0.5,0.1-0.9,0.6-0.9,1.1c-0.2-0.4-0.3-0.7-0.3-0.7c-0.2-0.6-0.8-0.9-1.4-0.7s-0.9,0.8-0.7,1.4c0,0.1,0.1,0.4,0.4,1
+							c-0.1-0.1-0.2-0.1-0.4-0.2c-0.5-0.3-1.2-0.2-1.5,0.3c-0.4,0.5-0.2,1.2,0.3,1.5c2.3,1.5,4.7,2.7,7.2,3.7
+							c0.4,0.2,0.9,0.4,1.4,0.6c0,0,0.1,0,0.2,0c0.4,0.1,0.9,0.3,1.3,0.4l0,0l0,0c9.5,3,18.8,3,19.3,3l0,0c0.6,0,1.1-0.5,1.1-1.1
+							C532.8,196.8,532.3,196.4,531.7,196.4L531.7,196.4z"/>
+					</g>
+					
+						<ellipse transform="matrix(0.9996 -2.704930e-02 2.704930e-02 0.9996 -5.4573 14.468)" class="st33" cx="532" cy="209" rx="12.3" ry="7.4"/>
+				</g>
+			</g>
+			<g>
+				<g>
+					<path class="st36" d="M605.5,287.1L605.5,287.1c-4.5-1-7.5-5.3-6.8-9.9l5.8-85.4c2.1-8.2,10.7-13.4,19.1-11.4l0,0
+						c8.4,1.9,13.5,10.2,11.3,18.4l-18.6,82.5C614.7,285.6,610,288.1,605.5,287.1z"/>
+					<path class="st36" d="M581.4,218.8c0,0,5.7,13.7,29,0.8l15.6-10.7c0,0,0.6-0.5,1.4-1.5c5.4-6.3,0.9-16.3-7.5-15.6
+						c0,0,1,10.1-5.4,11.9c-9.1,2.7-12.2,1.6-16.2,9.6C593.7,223.1,581.4,218.8,581.4,218.8L581.4,218.8z"/>
+				</g>
+				<g>
+					<path class="st36" d="M631.5,180.7c-3.8-4.7-9.9-7.7-16.3-8.4c-0.3,0-0.6-0.1-0.9-0.1c-4-0.4-8.1,0.1-11.6,1.4
+						c-0.3,0.1-0.6,0.2-0.8,0.3c-5.9,2.2-13.8,7.3-15.1,21.3c0,0-8.8-4.3-14.1,3.2c-4.2,5.9-1.1,16,8.4,19.9
+						c15.8,6.5,16.5-6,23-11.7s26.9,0.9,30.5-9.6c0.1-0.2,0.2-0.5,0.2-0.8c1.4-4.9,0.8-10.1-2.7-14.9
+						C631.9,181.2,631.7,181,631.5,180.7z"/>
+					<g>
+						
+							<ellipse transform="matrix(0.9349 -0.3548 0.3548 0.9349 -28.3543 227.4928)" class="st7" cx="606.2" cy="191.1" rx="9.2" ry="9"/>
+						<path d="M590.5,220.7c-2.9,0.4-6.3-0.1-10.3-1.4c-0.7-0.2-1-0.9-0.8-1.5s0.9-1,1.6-0.8c11.1,3.6,14.7-0.6,16.6-4.7
+							c2.3-5.1,5.9-9.8,15.6-9.4c4.3,0.2,6.2-2.2,6.9-3.6c1.2-2.4,1.1-5.4-0.3-7c-0.4-0.5-0.3-1.3,0.2-1.7c0.5-0.4,1.3-0.4,1.8,0.1
+							c2,2.4,2.2,6.4,0.6,9.6c-1.8,3.4-5.1,5.2-9.3,5c-7.8-0.3-10.8,2.8-13.2,7.9C597.9,217.7,594.8,220.1,590.5,220.7L590.5,220.7z
+							"/>
+						<path d="M581.8,203.4c1,2.4,0.7,6.5,0.7,6.5s-3.9-1.9-5.3-4c-1.5-2.1-1.7-4.5,0.1-5.5S580.8,201,581.8,203.4z"/>
+						<g>
+							<defs>
+								
+									<ellipse id="SVGID_00000036232662010501950390000018215678954115870869_" transform="matrix(0.9349 -0.3548 0.3548 0.9349 -28.3543 227.4928)" cx="606.2" cy="191.1" rx="9.2" ry="9"/>
+							</defs>
+							<clipPath id="SVGID_00000129918046823118255640000006383523234435491977_">
+								<use xlink:href="#SVGID_00000036232662010501950390000018215678954115870869_"  style="overflow:visible;"/>
+							</clipPath>
+							<g style="clip-path:url(#SVGID_00000129918046823118255640000006383523234435491977_);">
+								<g>
+									<defs>
+										
+											<ellipse id="SVGID_00000079474983167370377450000008294018188045377164_" transform="matrix(0.9349 -0.3548 0.3548 0.9349 -28.023 227.3214)" cx="605.9" cy="190.1" rx="9.2" ry="9"/>
+									</defs>
+									<clipPath id="SVGID_00000108283120435429785390000004719415005380397728_">
+										<use xlink:href="#SVGID_00000079474983167370377450000008294018188045377164_"  style="overflow:visible;"/>
+									</clipPath>
+									<g style="clip-path:url(#SVGID_00000108283120435429785390000004719415005380397728_);">
+										<ellipse transform="matrix(0.7949 -0.6067 0.6067 0.7949 9.0691 407.4281)" cx="607.2" cy="190.3" rx="6.8" ry="6.6"/>
+									</g>
+								</g>
+								<path class="st39" d="M596.8,191.7c2.5,1.3,5.5,1.8,8.6,1.4c3.9-0.5,7.3-2.3,9.6-4.9c-1.2-4-5.3-6.7-9.9-6.1
+									C600.1,182.7,596.5,187,596.8,191.7L596.8,191.7z"/>
+							</g>
+						</g>
+					</g>
+				</g>
+				<g>
+					<path class="st39" d="M633.4,136.9c5.3,3.6,12,10.3,15.1,13.6c0.6,0.6,0,1.6-0.8,1.4c-4.7-0.8-14.6-2.7-20.3-5.6
+						c-7.6-3.8-10.3-7.1-8.1-10.8C621.6,131.8,626.2,132,633.4,136.9L633.4,136.9z"/>
+					<path class="st40" d="M596.7,166.8L596.7,166.8c-0.2,0.7,0.2,1.4,1,1.6l43.7,16.3c0.7,0.2,1.5-0.3,1.7-1l0,0
+						c0.2-0.7-0.2-1.4-1-1.6l-43.7-16.3C597.6,165.7,596.9,166.1,596.7,166.8z"/>
+					<path class="st40" d="M648.5,153.1L632,179.5l-20.4-8l4.1-28.7c0.2-1.5,1.8-2.5,3.3-2.1l28.2,8.7
+						C648.7,149.9,649.4,151.7,648.5,153.1z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path d="M490.5,255.1c0,0.4,0,0.8,0,1.2s-0.1,0.8-0.2,1.2c-0.1,0.1-0.2,0.2-0.2,0.3s-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3
+			c-0.1,0.1-0.2,0.2-0.2,0.3s-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.2-0.2,0.3c-0.2,0.1-0.4,0.2-0.5,0.5c-0.1,0-0.2,0.1-0.4,0.2
+			s-0.2,0.2-0.3,0.3c-0.3,0.1-0.5,0.3-0.8,0.5s-0.5,0.4-0.8,0.5c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0.1c0,0-0.1,0-0.1,0.1
+			c0,0-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0s0,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0.1s-0.2,0.1-0.2,0.2
+			c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.2,0.2c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1
+			c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.1-0.1
+			c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2-0.1l-0.2-0.1c-0.1,0-0.2,0-0.2,0
+			c-0.1-0.1-0.1-0.1-0.2-0.2s-0.2-0.1-0.3,0c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c0,0,0,0-0.1,0s0,0-0.1,0
+			c0,0-0.1-0.1-0.1-0.1s-0.1-0.1-0.1-0.1c0,0,0,0,0,0c0,0,0,0,0,0c0-0.1,0-0.1-0.1-0.2s-0.1-0.1-0.2-0.1c-0.1-0.2-0.1-0.4-0.1-0.6
+			c0-0.2-0.1-0.4-0.1-0.6c0-0.1,0-0.1-0.1-0.2s0-0.2,0-0.2c0-0.1,0-0.2,0-0.4c0-0.2,0.1-0.3,0.1-0.4c0.1-0.4,0.2-0.9,0.3-1.3
+			c0.1-0.4,0.3-0.8,0.5-1.2c0.2-0.4,0.4-0.8,0.5-1.2c0.2-0.4,0.4-0.8,0.5-1.2c0,0,0,0,0.1,0l0-0.1c0,0,0,0,0-0.1s0,0,0.1,0v0
+			c0,0,0-0.1,0-0.1s0-0.1,0-0.1c0.1-0.1,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.2-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.4-0.4
+			v-0.1c0,0,0-0.1,0-0.1s0-0.1,0.1-0.1c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4s0.3-0.2,0.5-0.3
+			c0.1,0,0.1-0.1,0.2-0.2c0-0.1,0.1-0.1,0.1-0.2c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.3-0.1,0.4-0.1s0.3-0.1,0.4-0.1
+			c0.2,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.2,0.2,0.4s0.1,0.3,0.2,0.4c0,0.2,0.1,0.3,0.2,0.4c0.2,0,0.5,0,0.7,0.1c0.2,0,0.5,0.1,0.6,0.3
+			c0,0,0,0,0.1,0c0,0,0.1,0,0.1-0.1s0-0.1,0.1-0.1h0c0.2,0.1,0.5,0.3,0.7,0.4c0.2,0.1,0.4,0.3,0.6,0.5c0,0,0.1,0.1,0.1,0.1
+			s0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0.1,0.1,0.1,0.1,0.1c0.4,0.6,0.7,1.3,0.8,2.1c0,0.1,0,0.2,0,0.2c0,0.1,0,0.1,0,0.2
+			c0,0.1,0,0.1,0,0.1S490.5,255,490.5,255.1L490.5,255.1z M489.7,255.7c0-0.3,0-0.6-0.1-0.9c0,0,0.1,0,0.1-0.1c0,0,0-0.1,0-0.1v-0.1
+			l-0.1-0.2c0-0.1,0-0.2-0.1-0.3s-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
+			s-0.2-0.2-0.3-0.4c0,0-0.1,0-0.1,0s-0.1-0.1,0-0.1c-0.1,0-0.3-0.1-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.2c-0.2,0-0.4-0.1-0.5-0.1
+			c-0.2-0.1-0.4-0.1-0.5-0.1c-0.1,0-0.2,0-0.4,0.1c0,0.1,0.1,0.1,0.1,0.2s0,0.1,0,0.2c0.2,0.1,0.4,0.2,0.5,0.4c0,0-0.1,0.1-0.1,0.1
+			s-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0-0.1,0c-0.1,0-0.2,0-0.2-0.1c-0.1,0-0.1,0-0.3,0c-0.1-0.1-0.3-0.2-0.4-0.3
+			s-0.3-0.2-0.4-0.3c0-0.1-0.1-0.1-0.1-0.2s-0.1-0.1-0.1-0.2c0-0.1-0.1-0.1-0.1-0.2s-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0-0.1
+			c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0-0.1,0.1-0.2,0.1c-0.1,0.2-0.1,0.3-0.2,0.5s-0.2,0.3-0.4,0.4c-0.1,0.1-0.2,0.3-0.3,0.4
+			c-0.1,0.1-0.2,0.3-0.2,0.5c-0.2,0.3-0.5,0.6-0.6,1c-0.2,0.4-0.4,0.8-0.4,1.1c-0.2,0.2-0.3,0.4-0.4,0.6c-0.1,0.2-0.1,0.5-0.1,0.7
+			c0,0-0.1,0-0.1,0.1l-0.1,0.2c0,0,0,0.1-0.1,0.1v0.1c0,0.1,0,0.1,0,0.2s0,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0.1,0,0.1
+			c0,0.1,0,0.1,0,0.2c-0.1,0-0.1,0.1-0.2,0.1s-0.1,0.1-0.1,0.2c0,0.2,0,0.5-0.1,0.7c0,0.2,0,0.5,0,0.7c0,0.3,0,0.5,0.1,0.8
+			c0.1,0.1,0.1,0.1,0.2,0.2s0.1,0.2,0.2,0.2s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0.1,0.1
+			c0.2,0,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.5,0c0.1,0,0.2,0,0.4,0c0.1,0,0.2-0.1,0.3-0.2c0.4,0,0.8-0.1,1.2-0.3c0.4-0.2,0.7-0.4,1-0.6
+			h0.2c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.2c0,0,0,0,0.1,0s0.1,0,0.1,0c0.1-0.1,0.2-0.1,0.2-0.2
+			c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.3-0.2,0.5-0.3c0.2-0.1,0.3-0.2,0.5-0.4s0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.3,0.3-0.5
+			c0,0,0.1,0,0.1,0c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0.1-0.1s0.1,0,0.1,0c0-0.1,0-0.1,0-0.2s0.1-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1
+			s0.1-0.1,0.1-0.1V257c0.1-0.2,0.2-0.4,0.2-0.6C489.6,256.1,489.7,255.9,489.7,255.7L489.7,255.7z"/>
+		<path d="M498.6,259.3c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.2s-0.2,0.1-0.3,0.2s-0.2,0.1-0.3,0.2h-0.1
+			c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.6s-0.2-0.5-0.2-0.7s-0.1-0.5-0.2-0.7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.2-0.2,0.3
+			c-0.1,0.1-0.1,0.2-0.2,0.3s-0.2,0.1-0.3,0.2c0,0,0,0.1-0.1,0.2c0,0,0,0.1,0,0.2c-0.2,0.1-0.3,0.2-0.5,0.3s-0.3,0.2-0.4,0.4
+			s-0.3,0.2-0.4,0.4s-0.3,0.2-0.5,0.3c0,0,0,0,0,0c-0.1,0-0.2,0-0.2,0.1s-0.2,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0s-0.1,0-0.1-0.1
+			c0,0-0.1,0-0.2-0.1c0,0-0.1,0-0.2,0c-0.1-0.1-0.2-0.2-0.3-0.4c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2
+			c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.4c0-0.2,0.1-0.4,0.1-0.7s0.1-0.5,0.1-0.7c0-0.2,0.1-0.5,0.2-0.7
+			c0.1-0.2,0.2-0.4,0.3-0.6V256c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2,0-0.3
+			c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0c0,0.1,0,0.1,0.1,0.1v0c0,0.2,0,0.3,0,0.5
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1-0.1,0.3-0.1,0.4c0,0.1-0.1,0.3-0.1,0.4c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0-0.1,0
+			c0,0.3-0.1,0.5-0.1,0.8s-0.1,0.5-0.1,0.8c0,0.2,0,0.3,0.1,0.5c0,0.2,0.1,0.3,0.2,0.5h0c0.1,0,0.1,0,0.2,0c0,0,0.1,0.1,0.2,0.1
+			c0.1,0,0.1,0,0.2-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.2,0,0.2-0.1s0.1-0.1,0.2-0.1l0.2-0.2c0.1,0,0.1-0.1,0.2-0.1c0,0,0-0.1,0-0.1
+			l0.1-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0.1,0,0.2,0,0.2-0.1s0.1-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1s0.1-0.1,0.1-0.1
+			c0-0.1,0.1-0.3,0.2-0.5s0.2-0.4,0.3-0.6c0.1-0.2,0.2-0.4,0.2-0.6c0.1-0.2,0.1-0.3,0.1-0.4c0,0,0-0.1,0-0.1s0-0.1,0-0.1v0
+			c0.1-0.1,0.1-0.2,0.2-0.2c0-0.1,0.1-0.2,0.2-0.3s0.1-0.2,0.2-0.2c0.1-0.1,0.1-0.1,0.3-0.2c0.1,0,0.2,0.1,0.4,0.1
+			c0.1,0,0.2,0,0.4,0.1c0,0.2,0,0.4,0.1,0.6c0,0.2,0.1,0.4,0.2,0.6c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3c0,0.1,0,0.3,0,0.5s0,0.3,0.1,0.4
+			c0,0.1-0.1,0.2-0.1,0.4c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.1,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.2c0,0,0.1,0,0.1,0s0,0,0.1,0
+			c0.1,0.1,0.1,0.1,0.2,0.2C498.5,259.2,498.6,259.3,498.6,259.3L498.6,259.3z"/>
+		<path d="M513.7,258.8c0,0.1,0,0.2-0.1,0.3s-0.1,0.1-0.2,0.2c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.2,0-0.5,0-0.7,0.1
+			c-0.2,0.1-0.4,0.1-0.6,0.2c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2,0c-0.2,0-0.5,0.1-0.8,0.1c-0.3,0-0.5,0.1-0.8,0.1
+			c-0.3,0-0.5,0.1-0.8,0.1c-0.3,0-0.5,0.1-0.7,0.2c0,0,0,0-0.1,0s0,0-0.1,0c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2,0c-0.1,0-0.2,0.1-0.2,0.1
+			c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2-0.1c-0.2,0.1-0.4,0.1-0.5,0.2
+			c-0.2,0-0.4,0-0.6,0c-0.1,0-0.3,0-0.5,0c-0.2,0-0.3-0.1-0.5-0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.3-0.2-0.3-0.3
+			c-0.1-0.1-0.1-0.1-0.1-0.2s-0.1-0.2-0.2-0.2c0-0.2,0-0.3,0.1-0.5s0-0.3,0.1-0.5c0.1-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.5
+			c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.2,0.4-0.3c0.1-0.1,0.2-0.2,0.4-0.3s0.3-0.2,0.4-0.3c0,0,0-0.1,0.1-0.1s0.1-0.1,0.1-0.1
+			c0,0,0.1-0.1,0.1-0.1s0.1-0.1,0.1-0.1c0.3-0.2,0.5-0.4,0.7-0.6c0.2-0.2,0.3-0.5,0.4-0.8c-0.1-0.1-0.3-0.2-0.5-0.2
+			c-0.2,0-0.3-0.1-0.5-0.1c-0.1,0-0.3,0-0.5,0s-0.3,0-0.5,0c-0.2,0.1-0.3,0.1-0.5,0.1s-0.4,0-0.5,0.1c-0.2,0-0.4,0-0.5,0.1
+			c-0.2,0-0.3,0.1-0.5,0.2c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2s-0.4,0.2-0.6,0.3c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1
+			c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0.1,0,0.1s0,0.1,0,0.1c-0.1,0.2-0.1,0.5-0.1,0.7c0,0.2,0,0.4,0,0.6
+			c0,0.2,0,0.4,0,0.6c0,0.2,0,0.5-0.1,0.7c0,0.2,0.1,0.4,0.1,0.6s0.1,0.4,0.1,0.6c0,0.2,0.1,0.4,0.2,0.6s0.2,0.4,0.3,0.5
+			c0,0,0,0,0,0c0,0,0,0,0,0h0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.1,0.3-0.1,0.4
+			c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.4-0.1s-0.2-0.1-0.3-0.2c-0.1-0.1-0.2-0.2-0.2-0.3s-0.2-0.2-0.3-0.2c-0.1-0.2-0.1-0.4-0.2-0.7
+			c-0.1-0.2-0.1-0.5-0.3-0.6c0-0.1,0-0.1,0-0.2c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.2,0-0.2c0-0.1,0-0.2,0-0.2
+			c0-0.1,0-0.2,0-0.4c0-0.1,0-0.2,0-0.4c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0.1-0.1c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.4s0-0.2,0-0.3
+			c0-0.1,0-0.1,0-0.2s0-0.1,0-0.2l-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0.1-0.1,0.1s-0.1,0.1-0.1,0.1s0,0-0.1,0c0,0,0,0,0,0s0,0,0,0
+			c0,0,0,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.1
+			s-0.1-0.1-0.1-0.1c0,0-0.1,0-0.2,0c0,0,0-0.1,0-0.1s0-0.1,0-0.2v-0.2c0-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.2-0.1,0.3-0.2l0.3-0.1
+			c0.1-0.1,0.2-0.1,0.3-0.2h0.1c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2s0.2-0.2,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2
+			c0.1,0,0.2,0.1,0.3,0.1s0.2,0,0.3,0s0.2,0,0.3-0.1s0.2-0.1,0.2-0.2c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.3-0.1
+			s0.2-0.1,0.3-0.2c0.1,0,0.3,0,0.5,0c0.1,0,0.3-0.1,0.5-0.1c0.1,0,0.3-0.1,0.5-0.1c0.1,0,0.3,0,0.5,0c0.2,0,0.5,0,0.8-0.1
+			c0.2-0.1,0.5-0.1,0.8-0.1c0.2,0,0.4,0,0.5,0c0.2,0,0.4,0,0.5,0c0.1,0,0.2,0.1,0.3,0.1s0.2,0,0.3,0c0.2,0.2,0.5,0.4,0.7,0.7v0.2
+			c0,0.2,0,0.3-0.1,0.5c0,0.2-0.1,0.3-0.2,0.5s-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.3-0.2,0.5c-0.5,0.4-1,0.9-1.5,1.3
+			c-0.5,0.4-1,0.9-1.5,1.3c0,0.1,0,0.1-0.1,0.2s0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0.1,0,0.2h0.1
+			c0,0,0.1,0,0.1,0h0.2c0.3,0,0.6,0,0.9,0s0.6-0.1,0.9-0.1s0.6-0.1,0.9-0.1s0.6-0.1,0.9-0.1c0.1,0,0.1,0,0.2-0.1s0.1,0,0.2-0.1h0
+			c0,0,0.1,0,0.1,0s0.1,0,0.1,0c0,0,0.1,0,0.1,0s0.1,0,0.1,0c0.1,0,0.2,0,0.3-0.1c0.1,0,0.2,0,0.4,0c0.4,0,0.9-0.1,1.3-0.1
+			c0.4,0,0.9-0.1,1.3-0.2c0,0,0.1,0.1,0.2,0.1c0.1,0,0.1,0,0.2,0s0.2,0,0.2,0C513.6,258.7,513.7,258.7,513.7,258.8L513.7,258.8z"/>
+		<path d="M527.6,253.8c0,0.1,0,0.2,0,0.4s-0.1,0.2-0.2,0.4c-0.1,0-0.2,0.1-0.3,0.1s-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.3,0
+			s-0.3,0-0.4,0c-0.2,0-0.4,0.1-0.6,0.1s-0.4,0.1-0.6,0.1c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0s0,0,0,0c0,0,0,0-0.1,0
+			c-0.1,0-0.1,0-0.2-0.1c-0.2,0.1-0.5,0.1-0.7,0.2c-0.2,0.1-0.5,0.1-0.7,0.2c-0.1,0-0.2,0.1-0.4,0.1s-0.2,0.1-0.4,0.1
+			c-0.1,0-0.1,0-0.2,0.1l-0.2,0.1c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.3,0-0.4,0.1c-0.2,0.1-0.3,0.1-0.4,0.2h-0.1
+			c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.1,0.1c0,0,0,0.1-0.1,0.1c-0.3,0-0.5,0.1-0.8,0.1s-0.5,0.1-0.7,0.2s-0.5,0.2-0.7,0.2
+			s-0.5,0.1-0.8,0.2c0,0.1,0,0.3,0,0.5c0,0.1,0,0.3,0,0.5c0,0.2,0.1,0.4,0.2,0.5v0c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1
+			c0,0.2,0,0.4,0.1,0.5c0,0.2,0.1,0.3,0.2,0.5c0,0.2,0.1,0.3,0.1,0.5c0,0.2,0.1,0.3,0.1,0.5c0,0,0,0.1,0,0.1s0,0.1,0,0.1
+			c0,0.1,0.1,0.1,0.1,0.2c0,0,0.1,0.1,0.1,0.1c0,0,0,0.1,0,0.1v0.1c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.3
+			s-0.1,0.2-0.1,0.3c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.1-0.2-0.2s-0.1-0.2-0.2-0.3s-0.1-0.2-0.2-0.2
+			c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.1,0-0.3-0.1-0.4c0-0.1-0.1-0.3-0.2-0.4c0-0.2,0-0.5-0.1-0.8s-0.1-0.5-0.2-0.7
+			c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.2c0-0.2,0-0.4,0-0.6c0-0.2,0-0.4,0-0.6c0,0,0-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1h0
+			c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.2-0.2-0.3c0-0.1-0.1-0.2-0.1-0.3
+			c0-0.2,0-0.3,0.1-0.5c0.2,0,0.4-0.1,0.6-0.2s0.4-0.1,0.5-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0.1-0.3c0-0.1-0.1-0.1-0.1-0.2
+			s-0.1-0.1-0.1-0.2c0,0,0-0.1,0-0.1c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0-0.3,0.1-0.4s0-0.3,0.1-0.4c0-0.1,0.1-0.3,0.1-0.4
+			c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0.1-0.3c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1-0.1-0.1-0.3-0.1-0.4
+			c0-0.2,0.1-0.4,0.4-0.5c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2s0.1-0.1,0.1-0.2c0-0.1-0.1-0.2-0.1-0.2
+			c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.1-0.1s0.1,0,0.2,0
+			c0.2,0,0.3,0,0.5,0.1s0.3,0.2,0.4,0.3c0.1,0,0.2,0,0.2-0.1s0.1-0.1,0.2-0.1s0.1-0.1,0.2-0.1s0.1,0,0.2,0c0-0.1,0.1-0.1,0.1-0.1
+			s0.1,0,0.2-0.1c0.1,0,0.1,0,0.2-0.1s0.1-0.1,0.1-0.1c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0s0.1,0,0.1,0
+			c0.2-0.1,0.4-0.2,0.6-0.2c0.2-0.1,0.5-0.1,0.7-0.1c0.5-0.3,1.1-0.5,1.7-0.6c0.6-0.1,1.2-0.2,1.8-0.2c0.1,0,0.2,0,0.2,0
+			s0.2,0,0.2,0s0.2,0,0.3,0.1c0.1,0,0.2,0.1,0.3,0.1s0.2,0.1,0.3,0.2s0.2,0.1,0.2,0.2c0.1,0.1,0.1,0.3,0.1,0.4c0,0.1,0,0.1,0,0.2
+			s0,0.1,0,0.2c0,0.1,0,0.2,0.1,0.3c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1s-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1
+			c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c0,0-0.1,0-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.2,0v0c0-0.1,0-0.1-0.1-0.2
+			c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3,0.1-0.3,0.2c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0h0
+			c-0.4,0-0.8,0.1-1.2,0.2c-0.4,0.1-0.8,0.2-1.2,0.3s-0.8,0.3-1.2,0.4c-0.4,0.1-0.8,0.3-1.2,0.4c-0.1,0.1-0.2,0.2-0.3,0.3
+			c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1s-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.3,0,0.6
+			c0,0.1-0.1,0.1-0.1,0.1c0,0.1,0,0.1,0,0.1c0,0.1,0,0.1,0,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2
+			c0,0.3,0,0.6-0.1,0.9c0,0.1,0.1,0.1,0.1,0.2s0,0.2,0,0.2c0,0.1,0,0.1,0,0.2s0,0.1,0,0.2c0,0,0.1,0,0.1,0h0.1c0.1,0,0.3,0,0.3-0.1
+			c0.1-0.1,0.2-0.1,0.3-0.1c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1-0.1c0,0,0-0.1,0.1-0.1l0.4-0.1c0.3-0.1,0.5-0.1,0.7-0.2
+			c0.2-0.1,0.5-0.2,0.7-0.3c0,0,0.1,0,0.2,0s0.1,0,0.2,0s0.1,0,0.2,0c0,0,0.1,0,0.1,0c0,0,0.1-0.1,0.2-0.1s0.1-0.1,0.1-0.1h0
+			c0,0,0,0,0.1,0s0,0,0.1,0h0c0.2-0.1,0.3-0.1,0.4-0.2c0.2-0.1,0.4-0.1,0.7-0.2s0.5-0.1,0.7-0.2c0.2,0,0.4-0.1,0.7-0.1
+			c0.2-0.1,0.4-0.1,0.6-0.1c0.1,0,0.2,0,0.3,0c0.1-0.1,0.2-0.1,0.3-0.1s0.2-0.1,0.3-0.1c0,0,0.1,0,0.1,0s0.1,0,0.2,0
+			c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.1,0.7-0.2c0.1,0.1,0.1,0.1,0.1,0.2C527.7,253.7,527.7,253.8,527.6,253.8L527.6,253.8z"/>
+		<path d="M534.3,259.4c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0
+			c0,0-0.1,0-0.1,0s-0.1,0-0.1,0.1s0,0.1-0.1,0.1c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c0,0-0.1,0-0.2,0c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.1,0
+			c0,0,0,0-0.1,0s0,0-0.1-0.1s0,0-0.1,0c-0.1,0-0.1,0-0.1,0s-0.1,0-0.2-0.1c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1-0.1-0.1-0.2-0.2-0.3
+			c-0.1-0.1-0.1-0.2-0.2-0.4s-0.2-0.2-0.2-0.3h-0.1c-0.1,0-0.2,0.1-0.3,0.2c0,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.1
+			c-0.2,0.1-0.4,0.1-0.5,0.1s-0.4,0.1-0.6,0.1H529c0,0-0.1,0-0.2,0c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.2,0
+			c0,0-0.1,0-0.1,0.1c0,0,0,0.1-0.1,0.1h-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0-0.1,0
+			c0,0,0,0-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0-0.1,0.1s-0.1,0-0.1,0c0,0.1,0,0.2-0.1,0.2s-0.1,0.1-0.1,0.2c-0.1,0-0.2,0.1-0.2,0.2
+			s-0.1,0.1-0.2,0.2c0,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2c0,0,0,0.1,0,0.2c-0.1,0.1-0.2,0.1-0.3,0.2
+			c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0-0.4-0.1-0.5-0.3c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.1-0.1,0.2-0.1
+			c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.3-0.3,0.4-0.5c0.1-0.2,0.2-0.4,0.4-0.5
+			c0.1-0.2,0.3-0.4,0.4-0.5v-0.2c0.2-0.2,0.4-0.5,0.4-0.8c0.1,0,0.1-0.1,0.2-0.1c0-0.1,0-0.1,0-0.2c0,0,0.1,0,0.1,0s0,0,0.1,0
+			c0.1-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.2-0.3,0.2-0.5c0.1-0.1,0.2-0.3,0.2-0.5s0.1-0.4,0.1-0.6c0.1,0,0.2-0.1,0.2-0.2
+			c0-0.1,0-0.2,0-0.2c0.1-0.1,0.2-0.2,0.2-0.4c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.3,0.1-0.5c0-0.1,0.1-0.3,0.2-0.4v0
+			c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1l0,0c0.1,0,0.2-0.1,0.2-0.2c0-0.1,0.1-0.1,0.2-0.2c0.2,0.1,0.3,0.2,0.4,0.2s0.3,0,0.5,0.1
+			c0.1,0.1,0.2,0.2,0.2,0.4c0,0.1,0,0.3,0.1,0.4c0.1,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.1,0.5,0.2,0.7c0,0.1,0.1,0.3,0.1,0.4
+			c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.2,0,0.4c0,0.1,0,0.2,0.1,0.3l0.1,0.2c0,0.1,0.1,0.2,0.1,0.2s0.1,0.2,0.1,0.3
+			c0.1,0.2,0.1,0.5,0.2,0.7s0.1,0.5,0.2,0.7c0,0.1,0.1,0.1,0.2,0.1s0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.2,0h0.1
+			c0,0,0.1,0,0.1,0c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2-0.1,0.2s-0.1,0.1-0.1,0.2c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.2,0-0.3,0-0.5,0.1
+			c0.1,0.1,0.2,0.2,0.3,0.3s0.2,0.2,0.3,0.2c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0.1,0.3,0c0.1,0,0.1,0,0.2,0
+			c0.1,0.1,0.1,0.1,0.2,0.2C534.2,259.3,534.2,259.4,534.3,259.4L534.3,259.4z M530.7,257.7c0-0.1,0-0.2-0.1-0.3s-0.1-0.1-0.1-0.2
+			c0-0.1-0.1-0.2-0.1-0.3s0-0.2-0.1-0.3c-0.1-0.2-0.1-0.5-0.2-0.8s-0.2-0.5-0.3-0.7c0-0.1,0-0.1,0-0.1v0c-0.1-0.1-0.1-0.2-0.2-0.3
+			c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3s-0.1-0.2-0.2-0.2c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.1c0,0,0,0.1,0,0.1
+			c-0.1,0-0.1,0.1-0.2,0.2c0,0.1-0.1,0.1-0.2,0.2c-0.1,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.4-0.3,0.6
+			s-0.2,0.4-0.3,0.7c-0.1,0.1-0.2,0.2-0.2,0.3c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.2,0.1c0.1,0,0.2,0,0.3,0s0.2,0,0.2,0
+			c0.1,0,0.2,0,0.2,0.1c0.1,0,0.2-0.1,0.3-0.1s0.2,0,0.3-0.1c0.2,0,0.3,0.1,0.5,0.1c0.1,0,0.2,0,0.3,0s0.2,0,0.3-0.1
+			c0.1,0,0.1,0,0.2,0.1s0.1,0,0.2,0c0,0,0.1-0.1,0.1-0.1C530.6,257.8,530.7,257.8,530.7,257.7L530.7,257.7z"/>
+		<path d="M545.3,258.5c0,0.1,0,0.2,0,0.4c0,0,0,0-0.1,0.1c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c0,0,0,0,0,0.1c-0.2,0-0.5,0.1-0.7,0.2
+			c-0.2,0.1-0.5,0.2-0.7,0.3c-0.1,0-0.2-0.1-0.3-0.1s-0.2-0.1-0.3-0.1c-0.1-0.2-0.3-0.5-0.4-0.8s-0.2-0.6-0.2-0.8
+			c0-0.2,0-0.4,0.1-0.6c0-0.2,0-0.4,0-0.7c0-0.2,0.1-0.4,0.1-0.6c0-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4,0-0.7v-0.2c0,0,0,0-0.1,0.1
+			s0,0.1-0.1,0.1s0,0.1,0,0.1c0,0,0,0.1,0,0.1c-0.1,0.1-0.2,0.2-0.3,0.4s-0.1,0.3-0.2,0.4c-0.1,0.2-0.2,0.3-0.3,0.5
+			c-0.1,0.1-0.3,0.3-0.4,0.4v0c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c-0.2,0.1-0.4,0.2-0.5,0.3c-0.2,0.1-0.3,0.3-0.4,0.4
+			c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.2c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0
+			c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0h-0.2c0,0-0.1,0-0.2,0c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.2-0.1
+			c-0.1,0-0.2-0.1-0.2-0.1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.2-0.3-0.4-0.5c0-0.2-0.1-0.4-0.2-0.5s-0.2-0.4-0.3-0.5
+			c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2-0.1-0.2c0-0.1-0.1-0.2-0.1-0.2c0-0.1,0-0.1,0-0.1c-0.1,0.1-0.1,0.2-0.2,0.3c0,0.1,0,0.3,0,0.4
+			c0,0.1,0,0.2,0,0.2c-0.1,0.1-0.1,0.2-0.1,0.4c0,0.2,0,0.3,0,0.4c0,0.1,0,0.3,0,0.4c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.1,0,0.2,0.1,0.2
+			c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0-0.1,0s0,0,0,0.1c0,0,0,0.1,0,0.1s0,0.1,0,0.1c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3
+			c0,0.2,0,0.4,0.1,0.5c0,0.1,0.1,0.2,0.2,0.2s0.1,0.1,0.2,0.1c0.1,0,0.2,0.1,0.2,0.2c0,0.1-0.1,0.1-0.1,0.2s-0.1,0.1-0.2,0.1
+			c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0,0.2h-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0s0,0-0.1,0l-0.1-0.1
+			c0,0-0.1,0-0.1,0s-0.1,0-0.2,0c-0.1-0.3-0.2-0.7-0.3-1c-0.1-0.4-0.1-0.7-0.1-1c0,0,0-0.1,0-0.1c0,0,0,0,0.1,0V258
+			c0-0.2,0-0.5,0-0.7s0-0.5,0-0.7c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0.1-0.3,0.1-0.4s0.1-0.3,0-0.4c0-0.1,0-0.1,0-0.2
+			c0.1,0,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0-0.2,0-0.2c0-0.1,0-0.2,0-0.2c0.1-0.1,0.1-0.3,0.1-0.5s0-0.3,0.1-0.5
+			c0,0,0-0.1,0-0.2c0-0.1,0-0.3,0.1-0.4c0-0.1,0.1-0.3,0.3-0.4c0.1,0.1,0.3,0.1,0.5,0.1c0.2,0,0.3,0,0.5-0.1c0,0,0.1,0,0.1,0.1
+			s0.1,0,0.1,0.1c0,0,0.1,0,0.1,0c0,0,0.1,0,0.2,0c0.1,0.2,0.2,0.4,0.2,0.6s0.1,0.4,0.2,0.7c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
+			c0,0.1,0,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2s0.1,0.1,0.1,0.2c0,0.1,0,0.2,0,0.3c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.2,0.2,0.3,0.3,0.5
+			c0.1,0,0.1,0,0.2,0.1c0,0,0.1,0.1,0.1,0.2c0.1,0,0.1,0,0.2,0l0.2,0c0.3-0.1,0.6-0.2,0.8-0.4c0.2-0.2,0.5-0.3,0.8-0.4
+			c0.3-0.3,0.6-0.7,0.8-1.1s0.5-0.8,0.7-1.2v-0.2c0,0,0.1-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0-0.1,0-0.2,0.1-0.3
+			c0-0.1,0.1-0.2,0.1-0.2s0.1-0.2,0.1-0.2c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1c0.1-0.1,0.2-0.2,0.4-0.2c0.2,0,0.3,0,0.5,0.1
+			c0.2,0.1,0.3,0.1,0.5,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0,0.4,0,0.6l0,0.8c0,0.1,0,0.1-0.1,0.1
+			c0,0-0.1,0.1-0.1,0.1v0.1c0,0,0,0.1,0,0.1c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7s-0.1,0.4-0.1,0.7c0,0.1,0,0.2,0,0.2
+			s0,0.2,0,0.2c0,0.1,0,0.1,0,0.3c0,0.1,0,0.2,0.1,0.3c0,0.1,0.1,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0
+			c0.1,0,0.2,0,0.3,0C545.2,258.4,545.3,258.4,545.3,258.5L545.3,258.5z"/>
+		<path d="M548.2,258.3c0,0.1-0.1,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.2c0,0-0.1,0-0.2,0s-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0s-0.1,0-0.1,0
+			c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.2-0.1c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.2-0.3-0.4c-0.1-0.1-0.2-0.3-0.3-0.4c0-0.3,0-0.5-0.1-0.8
+			c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4,0.1-0.6c0-0.2,0.1-0.4,0.1-0.6
+			c0-0.2,0-0.4,0-0.6c0-0.2,0-0.4-0.1-0.6v-0.1c0-0.1,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.1,0-0.1-0.1-0.2c0-0.1,0.1-0.1,0.1-0.1
+			c0,0,0.1-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0.1s0.2,0.1,0.2,0.2
+			c0.1,0.4,0.2,0.7,0.2,1.1c0,0.4,0,0.8-0.1,1.2c0,0.4-0.1,0.8-0.1,1.2s0.1,0.7,0.2,1.1h0c0,0,0.1,0,0.1,0s0,0,0.1,0c0,0,0,0,0.1,0
+			c0,0.1,0.1,0.3,0.2,0.4C548,258.1,548.1,258.2,548.2,258.3L548.2,258.3z"/>
+		<path d="M555.5,256.8c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.1,0.2c0,0,0,0.1,0,0.1c-0.1,0-0.2,0-0.2,0.1c0,0.1-0.1,0.1-0.1,0.2h-0.2
+			c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1c-0.2,0-0.3,0.1-0.4,0.1c-0.1,0.1-0.3,0.1-0.4,0.2c-0.1,0.1-0.2,0.1-0.4,0.2
+			s-0.3,0.1-0.4,0.2c-0.1,0.1-0.2,0.2-0.3,0.3h0c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c0,0,0,0,0,0c-0.2,0.2-0.5,0.2-0.8,0.2
+			c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0s0,0-0.1,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.3,0
+			c-0.2-0.1-0.3-0.2-0.4-0.3s-0.2-0.2-0.3-0.4c0-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.1-0.1-0.2-0.2c0,0,0-0.1,0-0.2c0-0.1,0-0.2,0-0.2
+			c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3c0-0.3,0.1-0.6,0.1-0.9c0-0.3,0.1-0.6,0.2-0.8
+			c0-0.1,0-0.2,0-0.2v-0.2c0-0.1,0-0.3-0.1-0.4c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1-0.1-0.2-0.2-0.2v0c0-0.2-0.1-0.3-0.2-0.4
+			c0-0.3,0-0.5,0.2-0.6c0.1-0.1,0.3-0.2,0.5-0.4c0-0.1,0-0.1,0-0.1c0,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.2,0
+			c0,0.1,0.1,0.1,0.2,0.2c0.1,0,0.2,0,0.2,0.1v0.1c0,0.2,0.1,0.4,0.2,0.6c0,0.1,0,0.1,0,0.2s0,0.1,0,0.2c0,0.1,0,0.2,0,0.3
+			c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3c0,0.1-0.1,0.2-0.1,0.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.4c0,0.1,0,0.2,0,0.4c0,0.1-0.1,0.2-0.1,0.3
+			c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.4,0.2,0.5c0,0.1,0.1,0.1,0.2,0.1s0.2,0,0.3,0
+			c0.1,0,0.2,0,0.3,0s0.2-0.1,0.2-0.1c0,0,0.1,0,0.1,0.1c0,0,0,0.1,0.1,0.1c0.4-0.2,0.9-0.4,1.3-0.5c0.4-0.2,0.9-0.4,1.3-0.6
+			c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2,0C555.3,256.7,555.3,256.7,555.5,256.8L555.5,256.8C555.5,256.7,555.5,256.8,555.5,256.8
+			L555.5,256.8z"/>
+		<path d="M560.9,251.8c0,0.1,0,0.1-0.1,0.2c-0.1,0.1-0.1,0.1-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1v0.1c-0.1,0.1-0.1,0.2-0.2,0.2
+			c0,0.1-0.1,0.2-0.1,0.3s0,0.2-0.1,0.3c0,0.1,0,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.2c-0.1,0.1-0.1,0.1-0.1,0.2
+			c-0.1,0.1-0.1,0.3-0.1,0.4s-0.1,0.3-0.2,0.4v0.1c0,0.1,0,0.1,0,0.1c-0.1,0.2-0.2,0.4-0.3,0.7s-0.1,0.5-0.2,0.8s-0.1,0.6-0.1,0.8
+			c0,0.3-0.1,0.5-0.1,0.8c0,0.2,0.1,0.3,0.2,0.5c0.1,0.1,0.2,0.3,0.2,0.5c0.2,0,0.3,0.1,0.5,0.1c0.1,0.1,0.2,0.2,0.3,0.3
+			c0,0.1-0.1,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0-0.2,0-0.2-0.1c0,0-0.1,0-0.2,0c-0.2-0.1-0.3-0.2-0.4-0.3
+			c-0.1-0.1-0.2-0.2-0.3-0.3c0,0,0,0-0.1,0h-0.1c0-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.2-0.3s-0.1-0.2-0.2-0.3c0-0.1-0.1-0.2-0.1-0.3
+			c0-0.4,0-0.8,0.1-1.1s0.1-0.8,0.1-1.1v-0.1c-0.2,0-0.3,0.1-0.5,0.2c-0.2,0.1-0.3,0.1-0.5,0.2c0,0-0.1,0-0.1,0.1c0,0,0,0.1-0.1,0.1
+			c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4-0.1c-0.1,0-0.3-0.1-0.4-0.1
+			c-0.1-0.1-0.2-0.1-0.3-0.2c0,0,0,0-0.1,0c0,0,0,0-0.1,0s0,0-0.1,0s0,0-0.1,0c-0.1-0.1-0.1-0.2-0.2-0.3l-0.1-0.3
+			c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.2c0-0.1,0-0.3,0-0.4s0-0.3,0-0.4c0-0.1,0-0.2,0.1-0.4c0-0.1-0.1-0.2-0.1-0.3
+			s0-0.2,0-0.3c0-0.1,0-0.2,0-0.4c0-0.1,0.1-0.2,0.1-0.3s0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.1,0.3-0.1c0.2,0,0.3,0,0.4,0.1
+			c0.1,0.1,0.3,0.1,0.4,0.2c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3c0,0.2,0,0.4,0,0.5s0,0.4,0,0.6c0,0.2,0,0.4,0.1,0.5
+			c0,0.2,0.2,0.3,0.3,0.5h0c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.2,0c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0.1,0,0.1,0
+			c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.1,0.2-0.2c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2-0.1s0.1-0.1,0.2-0.1
+			c0,0,0.1,0,0-0.1c0-0.1,0-0.1,0-0.1c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0-0.1,0.1-0.2,0.1-0.3s0.1-0.2,0.2-0.2
+			c0-0.2,0.1-0.3,0.1-0.5s0.1-0.3,0.2-0.5c0.1-0.2,0.1-0.3,0.2-0.5c0.1-0.2,0.1-0.3,0.1-0.5c0.1-0.1,0.2-0.2,0.2-0.3
+			c0-0.1,0.1-0.2,0.1-0.3c0.1,0,0.2,0,0.3-0.1c0.1,0,0.2,0,0.3,0h0.2c0,0,0.1,0.1,0.1,0.1l0.1,0.1c-0.1,0.1-0.1,0.2-0.1,0.3
+			c0,0.1,0,0.2,0.1,0.2S560.9,251.8,560.9,251.8L560.9,251.8z"/>
+	</g>
+	<g>
+		<path d="M592.5,249.1c0,0.1,0,0.3,0,0.4c0,0.1-0.1,0.3-0.1,0.4c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1
+			c-0.1,0.1-0.1,0.3-0.2,0.5c0,0.2-0.1,0.3-0.1,0.5l-0.1,0.5c0,0.2-0.1,0.3-0.1,0.5v0c0,0,0,0.1,0,0.1s0,0.1,0,0.1v0
+			c-0.1,0.3-0.2,0.6-0.2,0.9c0,0.3-0.1,0.6-0.2,0.9c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1-0.1,0.2l-0.1,0.1
+			c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1v0.1c0,0.2,0,0.3,0,0.4s0,0.3-0.2,0.4c0,0.2,0,0.4,0,0.5s-0.1,0.4-0.1,0.5c0,0.1-0.1,0.3-0.1,0.4
+			s-0.1,0.3-0.1,0.4c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3c0,0.2,0,0.3,0,0.5s0,0.3-0.1,0.5c0,0.1,0.1,0.2,0.1,0.3c0.1,0.1,0.1,0.2,0.1,0.3
+			c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0,0.1,0,0.1,0,0.1c0,0.1,0,0.2-0.1,0.2c0,0,0,0.1,0,0.1v0.1
+			c0,0,0,0.1,0,0.2c0,0.1,0,0.1-0.1,0.1c0,0,0,0,0-0.1s0-0.1,0-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0l-0.1-0.1c0,0-0.1,0-0.1-0.1
+			s-0.1,0-0.2,0c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.2-0.1-0.4-0.1-0.5c0,0,0,0,0-0.1
+			l0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.2,0.1-0.4,0.1-0.5c0-0.2,0-0.4,0.1-0.5
+			c0-0.1,0-0.2,0-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0.1-0.3c0-0.1,0.1-0.2,0.1-0.2c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1
+			c0-0.2,0-0.3,0-0.5s0.1-0.3,0.1-0.5c0-0.1,0-0.1,0-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0s0,0,0,0c0-0.1,0-0.2,0-0.2
+			c0,0,0.1-0.1,0.1-0.1c0-0.1,0-0.1,0-0.1c0-0.1,0-0.1,0-0.2s0-0.1,0.1-0.1v-0.1c0-0.2,0-0.5,0.1-0.7s0.1-0.5,0.2-0.7v0
+			c0,0,0-0.1,0-0.1s0,0,0-0.1v0c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.2,0-0.3,0.1-0.5c0-0.2,0-0.3,0.1-0.5c0-0.1,0-0.1,0-0.2
+			v-0.2c0-0.2,0-0.3,0-0.5c0-0.1,0-0.3,0.1-0.5c0-0.1,0-0.1,0.1-0.2c0-0.1,0-0.2,0-0.2c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3
+			c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.2,0.2-0.3h0.3c0.1,0,0.2,0,0.3,0
+			s0.2,0.1,0.2,0.2c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0.1,0.2s0,0.1,0.1,0.2s0,0.1,0,0.1c0,0.1,0,0.2-0.1,0.2c0,0.1,0.1,0.1,0.1,0.2
+			C592.5,249,592.5,249.1,592.5,249.1L592.5,249.1z"/>
+		<path d="M603.2,247.6c0,0.2,0,0.3-0.1,0.5s-0.2,0.3-0.4,0.3c-0.1,0.1-0.1,0.3-0.2,0.4s-0.2,0.2-0.3,0.3s-0.2,0.2-0.3,0.3
+			c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0-0.1,0.1-0.2,0.1s-0.1,0.1-0.2,0.1c-0.1,0.1-0.2,0.2-0.2,0.3s-0.2,0.1-0.3,0.2
+			c-0.4,0.6-0.8,1.1-1.1,1.7c-0.3,0.6-0.7,1.1-1,1.7v0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1-0.1,0.2c0.1,0.1,0.2,0.2,0.3,0.2
+			c0.1,0.1,0.2,0.1,0.3,0.2s0.2,0.1,0.3,0.2s0.2,0.1,0.2,0.2c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0.1,0.2,0.1c0,0.1,0.1,0.1,0.1,0.2
+			c0.1,0.1,0.1,0.1,0.2,0.1s0.1,0.1,0.2,0.1s0.1,0.1,0.2,0.1c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.1,0.3,0.2c0,0.1,0.1,0.2,0.1,0.2
+			s0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3c-0.1,0.2-0.3,0.4-0.4,0.5s-0.2,0.4-0.3,0.6
+			c-0.2,0.1-0.5,0.3-0.7,0.4c-0.2,0.1-0.5,0.3-0.7,0.5c-0.1,0-0.2,0-0.4,0.1s-0.2,0.1-0.3,0.2c-0.2,0.1-0.5,0.1-0.7,0.2
+			s-0.5,0.1-0.7,0.1c-0.2,0-0.4,0-0.6,0c-0.1,0-0.2-0.1-0.4-0.2s-0.2-0.1-0.3-0.2c-0.1-0.1-0.2-0.2-0.4-0.3v0c0,0,0-0.1,0-0.1
+			c0,0,0,0,0-0.1c0,0,0-0.1-0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.3,0-0.4c0-0.4,0-0.7,0.1-1c0.1-0.3,0.2-0.6,0.3-0.9
+			c0.1-0.3,0.3-0.6,0.5-0.9c0.2-0.3,0.3-0.6,0.4-0.9c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1-0.2-0.2-0.3-0.3-0.4
+			s-0.2-0.2-0.3-0.3c-0.1-0.1-0.2-0.2-0.2-0.4c0,0,0,0,0,0s0,0,0,0c0,0,0-0.1-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.2
+			c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.4c0-0.1,0-0.2,0-0.2c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0.1-0.2,0.1-0.3s0.1-0.2,0.2-0.3
+			s0.2-0.1,0.2-0.2c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0-0.2c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.3-0.2c0,0,0.1-0.1,0.2-0.1
+			c0,0,0.1,0,0.2-0.1c0,0,0-0.1,0-0.1s0-0.1,0-0.1c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.2,0.3-0.3h0c0.1,0,0.2,0,0.3-0.1
+			c0.1-0.1,0.2-0.1,0.3-0.1c0-0.1,0.1-0.1,0.2-0.2s0.2-0.1,0.2-0.1c0.1,0,0.2-0.1,0.2-0.1s0.2-0.1,0.2-0.1c0.2,0,0.4-0.1,0.6-0.2
+			l0.6-0.2c0.2-0.1,0.4-0.1,0.6-0.2s0.4-0.1,0.6-0.1c0-0.1,0.1-0.1,0.1-0.2c0.1,0,0.1-0.1,0.2-0.1c0.1-0.1,0.1-0.1,0.2-0.2
+			s0.1-0.2,0.2-0.2s0.1-0.1,0.2-0.2s0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1s0.2,0.1,0.2,0.2h0c0.1,0,0.1,0,0.2-0.1
+			C603.1,247.4,603.2,247.5,603.2,247.6L603.2,247.6z M599.7,249.7c-0.1,0-0.1,0-0.2,0.1s-0.1,0.1-0.2,0.1c0-0.1-0.1-0.1-0.1-0.1
+			c-0.1,0-0.1,0-0.2,0.1s-0.2,0.1-0.2,0.1c0,0-0.1,0-0.1,0c-0.1,0.1-0.2,0.2-0.4,0.2s-0.3,0.1-0.5,0.1c-0.1,0.2-0.3,0.3-0.5,0.4
+			c0,0,0-0.1,0-0.1c0,0,0,0,0,0h0v0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c-0.2,0.1-0.3,0.1-0.4,0.2s-0.2,0.2-0.3,0.3
+			c-0.1,0.1-0.2,0.2-0.3,0.4s-0.2,0.2-0.2,0.4c0,0,0,0.1,0,0.1s0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0.1,0.1,0.1,0.3,0.2,0.4
+			s0.2,0.3,0.3,0.4c0.1,0.1,0.2,0.2,0.3,0.3s0.3,0.1,0.5,0.2c0,0,0,0,0,0s0,0,0.1,0c0.1-0.3,0.3-0.5,0.4-0.8
+			c0.2-0.3,0.3-0.5,0.6-0.7c0.1-0.2,0.2-0.4,0.3-0.5s0.2-0.3,0.3-0.5c0-0.2,0.1-0.3,0.1-0.4s0.2-0.2,0.2-0.3s0.2-0.2,0.2-0.3
+			S599.7,249.8,599.7,249.7L599.7,249.7z M600.2,257.1L600.2,257.1c-0.1-0.2-0.2-0.3-0.2-0.4s-0.2-0.2-0.3-0.3c0,0-0.1-0.1-0.1-0.1
+			c0-0.1-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1
+			c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1-0.1c0,0-0.1-0.1-0.1-0.1s-0.1-0.1-0.1-0.1s-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1h-0.1
+			c0,0.1,0,0.1,0,0.1c0,0,0,0.1-0.1,0.1s0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0s0,0.1,0,0.1
+			c-0.2,0.3-0.3,0.7-0.4,1s-0.2,0.7-0.3,1c0,0,0,0,0,0.1s0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1
+			s0,0.1-0.1,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.3,0.1,0.4,0.1c0.1,0,0.2-0.1,0.3-0.1
+			c0.1,0,0.2,0,0.3-0.1s0.2,0,0.3-0.1c0.1,0,0.2-0.1,0.2-0.1h0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.1,0.2-0.2c0.1,0,0.2-0.1,0.3-0.1
+			c0.1-0.1,0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.2-0.2,0.2-0.2c0-0.1,0-0.1,0-0.2c0,0,0-0.1,0.1-0.1s0-0.1,0-0.1
+			S600.2,257.1,600.2,257.1L600.2,257.1z"/>
+		<path d="M613.3,249.6c0,0.2,0,0.4-0.1,0.5s-0.1,0.4-0.1,0.5c-0.2,0.2-0.4,0.3-0.6,0.5c-0.2,0.2-0.4,0.3-0.6,0.5
+			c-0.1,0.2-0.2,0.4-0.3,0.7c-0.1,0.3-0.1,0.5-0.2,0.7c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1l0,0l0,0
+			c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.2,1c0,0,0,0.1,0,0.2s0,0.3,0,0.5
+			c0,0.2,0,0.4,0,0.6s0,0.3,0,0.3c0,0.3,0,0.6,0.1,0.9s0.2,0.6,0.4,0.8c0,0.1,0,0.1,0,0.2s0,0.1,0,0.2c0,0.1-0.1,0.1-0.1,0.2
+			c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0-0.2,0c-0.1,0-0.2,0-0.3-0.1c-0.1,0-0.2-0.1-0.3-0.2c0,0,0-0.1,0-0.2
+			c0-0.1,0-0.3-0.1-0.5c0-0.1-0.1-0.3-0.2-0.5c0-0.2-0.1-0.3-0.2-0.5s-0.1-0.3-0.1-0.5c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2
+			c0,0,0-0.1-0.1-0.1s0,0,0-0.1v-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0-0.1,0-0.2,0-0.3v-0.3c0-0.5,0-1,0.1-1.6
+			c0.1-0.5,0.2-1,0.3-1.5c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.1c0,0-0.1,0-0.1,0
+			c-0.1,0-0.2,0-0.3,0.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.3,0.1-0.6,0.2-0.9,0.4c-0.3,0.1-0.6,0.2-0.9,0.3c-0.1,0.1-0.3,0.2-0.4,0.2
+			s-0.3,0.1-0.5,0.1s-0.3,0.1-0.5,0.1c-0.2,0-0.3,0.1-0.5,0.1c-0.1,0-0.2,0-0.3,0s-0.2,0-0.3,0c-0.1,0-0.2,0-0.4,0c0,0,0,0,0,0
+			c0,0-0.1,0-0.1,0.1s0,0.1-0.1,0.1c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c-0.2-0.1-0.3-0.1-0.5-0.1
+			s-0.3-0.1-0.5-0.1c-0.1-0.1-0.1-0.1-0.2-0.2s-0.1-0.1-0.2-0.1c0-0.1,0-0.1-0.1-0.2c0-0.1,0-0.1,0-0.2c0-0.2,0-0.3,0-0.4
+			c0-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.2,0.3-0.3c0.2-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.3-0.2,0.4-0.3
+			c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.2-0.2,0.3-0.3c0.1,0,0.2-0.1,0.3-0.1
+			c0.1-0.1,0.2-0.1,0.3-0.2s0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0,0,0.1-0.1,0.1-0.1s0.1-0.1,0.1-0.1c0.1-0.1,0.2-0.1,0.3-0.1
+			c0.1,0,0.2-0.1,0.4-0.1c0.2-0.1,0.4-0.2,0.7-0.3s0.4-0.2,0.6-0.2c0.2-0.1,0.4-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0,0,0,0,0,0
+			c0,0,0,0,0.1,0c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.4,0.2c0.2,0,0.3-0.1,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2
+			c0.2,0.1,0.4,0.1,0.6,0.2s0.3,0.2,0.5,0.4c0,0,0,0.1,0,0.1C613.2,249.5,613.2,249.6,613.3,249.6L613.3,249.6z M610.8,250.4
+			c-0.1-0.1-0.2-0.1-0.3-0.2s-0.2-0.2-0.2-0.4c0-0.1,0-0.1,0-0.2c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.2-0.1h0
+			c-0.2,0.1-0.3,0.1-0.5,0.2l-0.5,0.1c-0.2,0.1-0.3,0.1-0.5,0.1c-0.2,0.1-0.3,0.1-0.4,0.2h-0.4c-0.1,0.1-0.2,0.2-0.3,0.3
+			s-0.3,0.2-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.2c0,0-0.1,0.1-0.1,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0,0,0
+			c0,0,0,0,0,0h0c0,0-0.1,0.1-0.1,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.2,0.2-0.3,0.3
+			c-0.1,0.1-0.2,0.2-0.4,0.4c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.2c0,0.1-0.1,0.1-0.1,0.2c0,0.1-0.1,0.1-0.1,0.2v0.1
+			c0.1,0,0.2,0.1,0.2,0.1s0.2,0.1,0.2,0.1c0.1,0,0.1,0,0.2,0s0.1,0,0.2,0c0.4,0,0.7-0.1,1-0.1s0.7-0.2,1-0.3s0.6-0.2,1-0.4
+			c0.3-0.1,0.7-0.2,1-0.3h0c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1-0.1,0.2-0.3,0.4-0.4c0.2-0.1,0.4-0.2,0.5-0.3
+			c0.2-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.2-0.3,0.1-0.6c0.1-0.1,0.1-0.2,0.2-0.3S610.8,250.5,610.8,250.4L610.8,250.4z"/>
+		<path d="M622.4,255.6v0.1c0,0,0,0.1,0,0.1c0,0,0,0.1-0.1,0.1s0,0.1-0.1,0.1c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0,0.3
+			c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.2-0.3,0.3s-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.2-0.3,0.3c0,0.1-0.1,0.1-0.1,0.2
+			s-0.1,0.1-0.1,0.2c-0.2,0.2-0.5,0.4-0.7,0.6s-0.5,0.4-0.7,0.5c-0.2,0.2-0.5,0.3-0.8,0.5c-0.3,0.1-0.6,0.3-0.8,0.4c0,0,0,0,0,0
+			c0,0,0,0-0.1,0c0,0-0.1,0-0.1-0.1c-0.2,0.1-0.5,0.2-0.7,0.3s-0.5,0.1-0.8,0.1c-0.1,0-0.2,0-0.4,0s-0.2,0-0.4,0
+			c-0.1-0.1-0.2-0.1-0.4-0.2c-0.1,0-0.2-0.1-0.3-0.2s-0.2-0.1-0.3-0.2c-0.1-0.1-0.2-0.2-0.2-0.4c-0.1,0-0.1-0.1-0.2-0.1
+			s-0.1,0-0.2,0c0,0,0-0.1,0-0.1s0,0,0-0.1c0,0,0-0.1-0.1-0.1c0,0-0.1,0-0.1,0c-0.2-0.3-0.3-0.7-0.3-1c-0.1-0.4-0.1-0.7-0.1-1.1
+			c0-0.2,0-0.4,0-0.6c0-0.2,0-0.4,0.1-0.6c0.1-0.1,0.1-0.2,0.2-0.3s0.1-0.2,0.1-0.4s0-0.2,0.1-0.4s0.1-0.2,0.1-0.3
+			c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2s0.1-0.1,0.2-0.1c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0.1-0.2,0.2-0.4,0.2-0.6
+			c0.1-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.1-0.4,0.2-0.6s0.2-0.4,0.3-0.5c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.2-0.4,0.3-0.5
+			c0.1-0.2,0.2-0.3,0.3-0.5s0.2-0.4,0.2-0.6c0,0,0.1,0,0.1-0.1c0,0,0-0.1,0.1-0.1s0-0.1,0.1-0.1s0.1,0,0.1,0c0-0.1,0-0.2,0.1-0.2
+			c0-0.1,0.1-0.1,0.1-0.2s0.1-0.1,0.2-0.2c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.2-0.2,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2s0.2-0.2,0.3-0.3
+			c0.1-0.1,0.2-0.2,0.2-0.4c0.2-0.1,0.5-0.2,0.7-0.3c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.1,0,0.1,0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1
+			c0.1,0,0.2,0.1,0.2,0.1s0.1,0,0.2,0c0.1,0,0.1,0,0.2,0h0.1c0,0,0,0.1,0,0.1v0.1c0,0.2,0,0.4-0.1,0.6s-0.2,0.4-0.4,0.5v0.1
+			c0,0,0,0-0.1,0s0,0,0,0.1c0,0,0,0-0.1,0.1c0,0,0,0-0.1,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1s0,0,0,0.1c-0.1,0-0.1,0-0.2,0
+			c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.2-0.1-0.2-0.1c-0.1,0.1-0.2,0.1-0.3,0.2s-0.2,0.1-0.3,0.2l-0.1,0.1
+			c-0.1,0.1-0.2,0.2-0.2,0.3s-0.1,0.2-0.2,0.3c-0.2,0.2-0.4,0.4-0.6,0.6c-0.2,0.2-0.3,0.5-0.3,0.8c-0.1,0-0.1,0.1-0.1,0.1
+			c0,0.1-0.1,0.1-0.2,0.1v0c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1v0h0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0.1,0,0.2-0.1,0.3
+			c0,0.1-0.1,0.2-0.1,0.3s-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0,0.3c0,0-0.1,0-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.2,0,0.3
+			c0,0.1-0.1,0.2-0.1,0.3s-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0,0.3c-0.1,0.1-0.1,0.2-0.1,0.3s0,0.2,0,0.3c0,0.1,0,0.2,0,0.3
+			s-0.1,0.2-0.1,0.3c0,0.2,0,0.3-0.1,0.4c0,0.1-0.1,0.3-0.2,0.4c0,0.1,0.1,0.1,0.1,0.2c0,0,0,0.1,0,0.1s0,0.1,0,0.2
+			c0,0.1,0,0.1,0,0.2c0.2,0,0.2-0.2,0.3-0.4c0.1,0,0.2-0.1,0.3-0.1s0.1-0.1,0.2-0.2s0.1-0.1,0.2-0.2s0.2-0.1,0.3-0.1
+			c0.2-0.2,0.4-0.4,0.6-0.6c0.2-0.2,0.4-0.3,0.6-0.5h0c0.1,0,0.2,0,0.3-0.1s0.2-0.1,0.2-0.2h0c0,0,0,0,0.1,0s0,0,0.1,0h0
+			c0,0,0.1-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.2-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.3-0.1,0.5-0.2c0.1-0.1,0.2-0.1,0.3-0.1
+			s0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0.2,0.1,0.5,0.2,0.8,0.3c0.2,0.1,0.5,0.2,0.7,0.3v0.1
+			c0,0,0,0.1,0,0.1s0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0.1,0.2,0.2,0.3,0.3,0.6
+			C622.3,255.2,622.3,255.4,622.4,255.6L622.4,255.6z M621.2,255.2l-0.1-0.1c0,0,0-0.1,0-0.1c-0.1,0-0.1,0-0.2,0
+			c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1h-0.1c-0.1,0-0.1,0-0.2,0l-0.2,0c0,0-0.1,0-0.2,0
+			c-0.1,0-0.1,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.1c-0.2,0.1-0.5,0.2-0.7,0.2c-0.1,0.1-0.1,0.1-0.2,0.2s-0.1,0.1-0.2,0.2
+			c-0.2,0-0.3,0.1-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.1-0.3,0.2c0,0.1-0.1,0.2-0.2,0.2
+			s-0.2,0.1-0.2,0.1s-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1s0,0,0,0.1h0
+			c-0.1,0-0.1,0-0.1,0c0,0,0,0.1-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.2,0.1-0.2,0.2c-0.2,0.1-0.3,0.3-0.4,0.5
+			c-0.1,0.2-0.2,0.4-0.3,0.6c0.2,0.4,0.5,0.8,0.8,1.1c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.1,0.4,0.1c0.1,0,0.1,0,0.2,0
+			s0.1,0,0.2,0c0,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.3-0.1,0.4-0.1s0.3-0.1,0.4-0.2h0.2c0.1-0.1,0.2-0.1,0.2-0.2s0.1,0,0.2,0
+			c0.1-0.1,0.2-0.2,0.4-0.3s0.3-0.1,0.4-0.2c0-0.1,0-0.2,0.1-0.2c0,0,0.1,0,0.2,0c0.2-0.3,0.5-0.5,0.8-0.7s0.5-0.5,0.7-0.7v0
+			c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0.1,0,0.1,0s0,0,0.1,0c0.1-0.2,0.2-0.5,0.3-0.7C621.1,255.7,621.2,255.5,621.2,255.2
+			L621.2,255.2z"/>
+	</g>
+</g>
+<path class="st41" d="M350.3,218.3l-10.6-15.2l-9.6,14.3c-3.8,3.6-9.6,0.6-9.5-5l1.6-212.6h37.4l0.2,213.4
+	C359.9,218.8,354.1,221.9,350.3,218.3z"/>
+<path class="st42" d="M406,78.7l19-25.9c1.8-2.4,0.4-6-2.4-6.3l-24,0.8c-2.6-0.3-4.6,2.4-3.9,5.1l4.9,25.1
+	C400.5,80.5,404.1,81.2,406,78.7L406,78.7z"/>
+<path class="st42" d="M426.2,268.8l-20.4-22.8c-1.9-2.1-5.3-1.7-6,0.8l-2.9,21.6c-0.6,2.2,1.5,4.7,4,4.6l23.3,1.1
+	C427,274.2,428.2,271,426.2,268.8L426.2,268.8z"/>
+<path class="st42" d="M651.6,241.4l-21.3,24.1c-2,2.3-0.9,5.9,1.9,6.5l23.9,1.4c2.5,0.5,4.8-2,4.3-4.7l-2.7-25.4
+	C657.3,240.1,653.7,239,651.6,241.4L651.6,241.4z"/>
+<path class="st42" d="M630,50.6l22.3,20.9c2.1,1.9,5.5,1.2,5.9-1.3l1-21.8c0.4-2.3-1.8-4.5-4.4-4.3l-23.3,0.9
+	C628.8,45.4,627.8,48.6,630,50.6L630,50.6z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg
new file mode 100644
index 00000000000..631717244ab
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1,.cls-2{fill:none;}.cls-3{clip-path:url(#clippath);}.cls-4{fill:#050505;}.cls-5{fill:#020100;}.cls-6{fill:#fff;}.cls-7{fill:#fff5ea;}.cls-8{fill:#80778f;}.cls-9{fill:#98b8af;}.cls-10{fill:#805d99;}.cls-11{fill:#8b80a2;}.cls-12{fill:#8f3232;}.cls-13{fill:#a88045;}.cls-14{fill:#c15a5a;}.cls-15{fill:#af80cc;}.cls-16{fill:#b088c4;}.cls-17{fill:#c07b54;}.cls-18{fill:#c1733e;}.cls-19{fill:#bf4a4a;}.cls-20{fill:#c7cb7d;}.cls-21{fill:#d296b1;}.cls-22{fill:#dcc1aa;}.cls-23{fill:#dcd1b4;}.cls-24{fill:#17181c;}.cls-25{fill:#414551;}.cls-26{fill:#375480;}.cls-27{fill:#191a1e;}.cls-28{fill:#6e5f74;}.cls-29{fill:#718880;}.cls-30{fill:#80978f;}.cls-31{fill:#63757c;}.cls-32{fill:#5a5e6d;}.cls-33{fill:#607697;}.cls-34{fill:#5e546d;}.cls-35{fill:#785d80;}.cls-36{clip-path:url(#clippath-1);}.cls-37{clip-path:url(#clippath-4);}.cls-38{clip-path:url(#clippath-3);}.cls-39{clip-path:url(#clippath-2);}.cls-40{clip-path:url(#clippath-7);}.cls-41{clip-path:url(#clippath-8);}.cls-42{clip-path:url(#clippath-6);}.cls-43{clip-path:url(#clippath-5);}.cls-2{stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.79px;}.cls-44{fill:#646470;opacity:.45;}</style><clipPath id="clippath"><polygon class="cls-1" points="640.58 240.22 414.38 243.84 415.01 65.51 641.21 61.9 640.58 240.22"/></clipPath><clipPath id="clippath-1"><path class="cls-1" d="M625.4,76.93c-7.36-4.95-16.58-4.38-20.59,1.28-.19,.27-.36,.54-.52,.82-.88-1.2-1.99-2.21-3.32-2.98-6.37-3.67-15.39-.23-20.13,7.67-4.74,7.9-3.42,17.27,2.95,20.94,6.37,3.67,15.39,.23,20.13-7.67,.85-1.42,1.51-2.89,1.97-4.37,1.28,1.78,2.95,3.42,4.98,4.78,7.36,4.95,16.58,4.38,20.59-1.28,4.01-5.65,1.29-14.25-6.07-19.2Z"/></clipPath><clipPath id="clippath-2"><path class="cls-1" d="M540.39,98.32c-7.78,.22-14.38,3.65-17.13,8.37-1.06-1.6-2.49-2.81-4.24-3.44-5.66-2.05-12.6,2.65-15.74,10.53-.08,.2-.16,.41-.23,.61-2.94,7.12-1.41,19.31,8.56,18.62,7.01-.24,11.26-6.53,13.02-12.7,.08-.28,.15-.56,.22-.84s.13-.56,.18-.83c3.43,3.51,9.35,5.73,16.02,5.55,10.39-.29,18.67-6.31,18.49-13.46-.18-7.14-8.75-12.7-19.14-12.41Z"/></clipPath><clipPath id="clippath-3"><path class="cls-1" d="M480.01,86.91c-5.84-3.93-12.59-4.7-16.67-2.28-2.51-5.7-10.56-8.85-19.26-7.18-9.73,1.87-16.59,9.06-15.32,16.06,1.27,7,10.18,11.16,19.91,9.29,5.18-1,9.55-3.5,12.31-6.68,1.35,2.8,3.74,5.55,6.95,7.71,7.13,4.79,15.61,4.89,18.94,.22,3.33-4.67,.26-12.34-6.86-17.14Z"/></clipPath><clipPath id="clippath-4"><path class="cls-1" d="M431.31,181.86c2.99-2,6.67-1.82,8.2,.41,.51,.73,.72,1.6,.67,2.5,.2-.08,.4-.16,.61-.23,2.75-.89,5.61-.09,7.16,1.81,.17-.42,.42-.81,.73-1.16,1.23-1.36,3.25-1.72,5.3-1.16-.1-.98,.14-1.88,.76-2.56,1.47-1.62,4.51-1.3,6.81,.71,2.29,2.01,2.96,4.95,1.49,6.57-.75,.82-1.9,1.15-3.16,1,.47,1.68,.23,3.36-.83,4.53-1.93,2.13-5.81,1.82-8.67-.69-.68-.6-1.24-1.27-1.68-1.97-.69,1.69-2.21,3.13-4.25,3.79-3.44,1.12-7.04-.41-8.05-3.41-.18-.54-.26-1.08-.26-1.62-2.83,1.51-6.05,1.19-7.46-.85-1.54-2.23-.36-5.65,2.64-7.65Z"/></clipPath><clipPath id="clippath-5"><ellipse class="cls-1" cx="550.19" cy="202.04" rx="13.41" ry="16.18" transform="translate(3.32 412.91) rotate(-41.25)"/></clipPath><clipPath id="clippath-6"><ellipse class="cls-1" cx="516.64" cy="200.28" rx="16.58" ry="13.09" transform="translate(-17.98 345.94) rotate(-36.43)"/></clipPath><clipPath id="clippath-7"><ellipse class="cls-1" cx="606.19" cy="191.05" rx="9.23" ry="8.96" transform="translate(-28.35 227.51) rotate(-20.78)"/></clipPath><clipPath id="clippath-8"><ellipse class="cls-1" cx="605.89" cy="190.06" rx="9.23" ry="8.96" transform="translate(-28.02 227.34) rotate(-20.78)"/></clipPath></defs><rect class="cls-23" x="-.99" y="-2.16" width="720.66" height="509.64"/><path d="M692.44,489.24H26.9c-6.25,0-11.31-5.06-11.31-11.31V27.06c0-6.25,5.06-11.31,11.31-11.31H692.44c6.25,0,11.31,5.06,11.31,11.31V477.93c0,6.25-5.06,11.31-11.31,11.31Zm-661.54-4H688.44c6.25,0,11.31-5.06,11.31-11.31V31.06c0-6.25-5.06-11.31-11.31-11.31H30.9c-6.25,0-11.31,5.06-11.31,11.31V473.93c0,6.25,5.06,11.31,11.31,11.31Z"/><g><polygon class="cls-7" points="652.41 266.87 404.68 270.83 405.44 53.46 653.17 49.5 652.41 266.87"/><polygon class="cls-44" points="640.62 240.22 414.72 243.83 415.33 65.58 641.23 61.97 640.62 240.22"/><g class="cls-3"><g><g><path class="cls-10" d="M577.82,144.83s20.41-.92,28,18.94c.94,2.45,5.09,1.6,6.49-.57,8.37-22.6,21.24-23.23,21.24-23.23l-5.41-7.5-21.91-.53-28.41,12.89Z"/><g><path class="cls-10" d="M593.75,118.68s-18.55,8.83-33.28-10.04c-7.18-9.19-9.66-18.78-9.66-18.78-17.86,1.88-57.7,38.86-17.56,85.74,0,0,5.07-18.04,30.92-21.91,0,0,14.47-11.04,32.2-4.69l-2.63-30.33Z"/><path class="cls-15" d="M550.84,89.71c-4.52,15.23-9.11,31.69,4.64,56.44,0,0-16.79,9.73-22.48,32.37-25.08-18.13-28.04-77.43,17.85-88.81Z"/></g><g><path class="cls-10" d="M619.66,119.47s41.38-4.39,40.07-40.96c0,0,34.21-2.84,57.15,50.05,0,0-19.28,4.07-28.73,23,0,0-12.3-20.16-34.18,2.13,0,0-7.31-18.7-34.56-11.72l.24-22.51Z"/><path class="cls-15" d="M659.82,78.47s24.22,24.35,26.75,76.53c0,0,6.37-12.28,32.56-25.21,0,0-16.86-50.39-59.31-51.32Z"/></g></g><g><path d="M630.83,148.41c-1.32-.43-3.55-.81-4.9-1.03-.65-.1-1.26,.26-1.44,.86-.39,1.27-1.01,3.43-1.17,4.65-.27,2.15,.19,4.02,1.63,4.08,1.03,.04,1.7-.86,1.96-2.16,.93,1.36,2.09,1.96,3.08,1.43,1.2-.63,1.11-2.36-.12-4.16-.07-.1-.15-.21-.24-.32,1.94,.95,3.79,1.17,4.29-.06,.52-1.28-1-2.63-3.11-3.31Z"/><path class="cls-15" d="M616.07,144.8c-.97-1.4-1.81-3.07-2.52-4.77-1.64-3.89,2.84-7.35,6.49-5.02,1.65,1.06,3.23,2.23,4.43,3.47,4.47,4.57,6.44,10.03,3.23,12.54-3.21,2.51-7.93-.87-11.62-6.22Z"/></g><g><path d="M598.79,157.31c-.77-1.12-2.29-2.78-3.22-3.75-.45-.47-1.17-.56-1.71-.22-1.15,.73-3.05,1.98-3.98,2.81-1.62,1.46-2.48,3.16-1.38,4.08,.79,.66,1.92,.38,2.97-.44-.15,1.6,.37,2.75,1.51,2.96,1.36,.25,2.43-1.11,2.63-3.22,.01-.12,.02-.25,.02-.38,.91,1.9,2.24,3.19,3.45,2.56,1.25-.65,.93-2.6-.3-4.4Z"/><path class="cls-15" d="M591.53,144.12c.54-1.68,1.42-3.44,2.4-5.11,2.03-3.42,7.51-2.29,8.03,1.69,.27,2.03,.37,4.1,.14,5.88-.79,6.12-3.91,10.9-8.04,10.01-4.13-.88-4.47-6.47-2.54-12.47Z"/></g><g><ellipse class="cls-16" cx="604.67" cy="125.65" rx="20.79" ry="25.97" transform="translate(-12.83 136.19) rotate(-12.72)"/><path class="cls-6" d="M604.83,107.93c-16.04,3.44-16.38,15.06-15.56,17.91,.8,2.14,2.93,3.99,5.26,2.86-.6,4.99,2.43,12.54,8.6,10.99,2.06-.28,3.48-2.42,3.42-4.55,1.68,1.71,3.2,3.14,5.73,3.71,6.25,1.29,10.64-5.54,8.57-10.67,2.53,.57,5.94,.72,7.34-2.13,2.35-5.84-7.32-21.56-23.36-18.11Z"/></g><path class="cls-16" d="M624.83,69.44l-2.91,.4c-.21-3.86-1.98-7.23-5.14-8.94-4.02-2.18-9.16-1.08-13.15,2.36-.37-2.5-1.48-4.46-3.31-5.46-4.51-2.45-11.74,1.88-16.13,9.67-1.5,2.67-2.48,5.4-2.94,7.93l-6.11,.84c-7.86,1.08-13.14,8.11-11.79,15.71l2.6,17.8c1.58,8.92,10.34,15.13,19.57,13.87l44.74-6.12c9.23-1.26,15.42-9.52,13.84-18.44l-2.6-17.8c-1.35-7.6-8.81-12.9-16.68-11.82Z"/><g><path class="cls-16" d="M582.4,82.34c1.41-2.76,1.43-6.02,.04-8.87l-17.37-35.78c-1.81-3.46-7.02-3.15-8.16,.49l-7.68,38.92s-4.89,18.4,6.65,26.2c6.21,4.2,14.72,2.07,17.99-4.32l8.52-16.65Z"/><path class="cls-6" d="M569.59,61.74c-.66,.34-1.06,.91-1.23,1.64-3.43-2.79-6.85-4.03-8.63-1.99-1.63,1.87-.46,4.8,2.19,7.54-3.49-.12-5.94,1.32-6.38,4.15-.54,3.49,2.53,6.22,7.32,6.86-1.91,1.49-2.76,3.32-1.65,5.17,1.65,2.77,5.74,2.4,9.33,.08l7.52-7.4c.87-1,1.12-2.39,.64-3.65-.73-1.94-2.86-7.11-2.86-7.11,0,0-3.36-6.85-6.26-5.3Z"/><ellipse class="cls-16" cx="575.88" cy="79.11" rx="10.81" ry="6.8" transform="translate(181.99 506.6) rotate(-55.16)"/></g><g><path class="cls-16" d="M621.25,76.53c-2.6-2.14-4.09-5.27-4.04-8.52l.54-38.81c.18-3.82,5.11-5.35,7.73-2.39l23.9,33.19s6.72,8.23,7.41,17.04c.9,11.51-13.04,17.99-22.27,10.39l-13.27-10.91Z"/><path class="cls-6" d="M625.01,53.87c.76,.04,1.39,.39,1.9,.97,1.71-3.88,4.17-6.36,6.76-5.25,2.37,1.02,2.76,4.12,1.73,7.64,3.07-1.51,5.97-1.2,7.75,1.16,2.19,2.91,.78,6.59-3.21,9.09,2.44,.57,4.09,1.87,4.01,3.97-.13,3.15-3.97,4.46-8.32,3.82l-10.36-3.6c-1.27-.55-2.17-1.69-2.36-3.01-.29-2.03-.91-7.52-.91-7.52,0,0-.34-7.5,3.02-7.27Z"/><path class="cls-16" d="M628.47,77.53c-1.43,.89-3.21,1.59-5.05,2.15-4.22,1.26-9.3-4.48-7.38-8.33,.87-1.74,1.9-3.37,3.09-4.57,4.38-4.43,10.36-5.82,14.05-1.69,3.69,4.13,.77,9.04-4.7,12.44Z"/></g><g><g><path class="cls-6" d="M625.4,76.93c-7.36-4.95-16.58-4.38-20.59,1.28-.19,.27-.36,.54-.52,.82-.88-1.2-1.99-2.21-3.32-2.98-6.37-3.67-15.39-.23-20.13,7.67-4.74,7.9-3.42,17.27,2.95,20.94,6.37,3.67,15.39,.23,20.13-7.67,.85-1.42,1.51-2.89,1.97-4.37,1.28,1.78,2.95,3.42,4.98,4.78,7.36,4.95,16.58,4.38,20.59-1.28,4.01-5.65,1.29-14.25-6.07-19.2Z"/><g class="cls-36"><ellipse class="cls-5" cx="614.02" cy="88.63" rx="3.11" ry="6.88" transform="translate(.46 180.38) rotate(-16.72)"/><ellipse class="cls-5" cx="595.93" cy="91.46" rx="6.85" ry="3.2" transform="translate(443.56 674.8) rotate(-84.09)"/><ellipse class="cls-28" cx="590.77" cy="76.85" rx="17.07" ry="12.36" transform="translate(40.52 305.18) rotate(-29.95)"/><ellipse class="cls-28" cx="614.58" cy="74.26" rx="12.03" ry="17.52" transform="translate(469.03 675.95) rotate(-83.29)"/></g></g><path d="M597.14,110.28s.74,7.98,13.2,4.57c7.67-2.1,6.04-8.29,6.04-8.29,0,0-7.51-.77-9.9-5.44-2.28,5.23-9.33,9.16-9.33,9.16Z"/><path class="cls-6" d="M592.37,111.95l6.61-2.57,.8,6.68c.24,1.89-2.15,2.92-3.52,1.51l-3.9-5.63Z"/><path class="cls-6" d="M615.16,106.37l7.2,.34-2.14,6.32c-.6,1.79-3.24,1.76-3.9-.05l-1.17-6.61Z"/><path class="cls-6" d="M600.74,107.36l3.91-3.22,.27,5.48c.07,1.22-1.51,1.79-2.33,.83l-1.84-3.1Z"/><path class="cls-6" d="M607.81,103.34l5.14,2.07-2,3.81c-.56,1.08-2.25,.81-2.49-.39l-.65-5.49Z"/><path d="M626.95,106.81s-.09,.05-.14,.07c-8.08,3.11-16.92-.32-20.73-3.59-7.5,10.84-16.02,9.68-19.41,8.64-.56-.17-.88-.74-.72-1.28,.16-.53,.75-.83,1.31-.66,3.03,.93,10.81,1.92,17.72-8.88l.76-1.19,.95,1.1c2.57,2.98,11.45,6.96,19.28,3.95,.53-.21,1.16,.05,1.39,.57,.21,.47,.02,1-.41,1.25Z"/><path class="cls-16" d="M602.23,113.55c.3-1.43,3.07-2.5,5.31-1.07,.67-1.35,3.96-2.11,4.86-.79,.15,2.09-9.35,3.54-10.17,1.86Z"/><path d="M601.36,72.25c-.28,.16-.64,.19-.97,.04-9.35-4.11-16.01,.74-16.29,.95-.46,.34-1.12,.25-1.48-.19-.37-.44-.3-1.08,.15-1.42,.32-.24,7.89-5.82,18.45-1.18,.54,.24,.78,.84,.56,1.35-.09,.2-.23,.35-.41,.45Z"/><path d="M623.27,68.67c-.21,.06-.44,.05-.66-.03-8.16-3.09-14.23,1.97-14.48,2.19-.43,.36-1.09,.31-1.48-.13-.39-.43-.36-1.08,.06-1.44,.29-.25,7.22-6.07,16.58-2.53,.55,.21,.84,.8,.65,1.33-.11,.31-.37,.53-.67,.61Z"/><path class="cls-28" d="M609.97,102.58l-7.08,1.32c-3.02,.56-6.02-1.36-6.69-4.28h0c-.67-2.93,1.23-5.76,4.25-6.32l7.08-1.32c3.02-.56,6.02,1.36,6.69,4.28h0c.67,2.93-1.23,5.76-4.25,6.32Z"/></g></g><g><g><path class="cls-17" d="M495.85,196.51c-5.25-1.09-15.71-2.63-24.46,.16-1.55,.5-2.59,2.28-2.16,3.76,1.34,4.27,4.33,13.21,12.76,20.14,7.53,6.02,16.92,10.08,24.64-1.88,7.72-11.96-.16-20.03-10.78-22.18Z"/><path class="cls-22" d="M491.42,195c-8.35-2.58-19.57-3.9-26.07-2.36-1.63,.39-2.6,2.09-2.03,3.61,1.46,3.62,8.45,14.12,14.19,20.09,2.55,2.84,6.31,2.52,7.89,.55,.95-1.18,.97-2.9,.25-4.57,2.06,.41,4.12-.11,5.38-1.57,1.78-2.06,1.34-5.27-.91-7.51,2.26,.26,4.28-.38,5.11-1.8,1.18-2.04,.66-5.31-3.81-6.42Z"/></g><g><path class="cls-17" d="M504.8,253.88c-7.18-1.36-5.45-8.05-5.45-8.05l4.02-46.23s1.44-14.41,14.36-11.95c12.92,2.45,8.46,15.45,8.46,15.45l-12.46,45.44s-1.76,6.71-8.94,5.35Z"/><path class="cls-17" d="M510.43,256.16l-24.83,.81c-1.96,.06-3.57-1.44-3.6-3.35h0c-.08-5.75,4.63-10.57,10.51-10.76l15.39-.5c3.37-.11,6.14,2.47,6.19,5.77l.06,4.23c.03,2.04-1.64,3.74-3.72,3.81Z"/></g><g><path class="cls-18" d="M565.77,253.94c7.25-1.29,5.86-8,5.86-8l-1.65-46.26s-.7-14.42-13.75-12.1c-13.04,2.32-9.25,15.36-9.25,15.36l10.13,45.56s1.42,6.73,8.66,5.44Z"/><path class="cls-18" d="M560.04,256.16l24.75,1.06c1.96,.08,3.65-1.39,3.78-3.3v-.05c.38-5.73-4.11-10.59-10.01-10.84l-15.3-.66c-3.38-.14-6.28,2.4-6.5,5.68l-.28,4.27c-.13,2.03,1.46,3.75,3.54,3.84Z"/></g><g><g><path class="cls-17" d="M453.21,160.31h0c.46-2.93,3.07-5.11,6.09-5.08l30.78,.25c5.45,.71,9.19,5.63,8.35,10.97h0c-.84,5.34-5.93,9.1-11.38,8.38l-29.63-8.11c-2.86-.78-4.65-3.52-4.2-6.42Z"/><ellipse class="cls-17" cx="449.71" cy="156.08" rx="11.79" ry="11.44" transform="translate(-26.12 169.71) rotate(-20.78)"/></g><g><path class="cls-8" d="M484.94,189l-6.6-34.74,35.33-1.28c8.06-.45,15.06,5.12,16.21,12.9h0c1.06,7.13-3.09,14.12-9.98,16.84l-28.45,9.9c-2.89,1-5.96-.71-6.52-3.62Z"/><path class="cls-34" d="M488.91,195.25h0c-2.98,.56-5.81-1.34-6.32-4.24l-5.97-33.77c-.51-2.9,1.48-5.71,4.46-6.27h0c2.98-.56,5.81,1.34,6.32,4.24l5.97,33.77c.51,2.9-1.48,5.71-4.46,6.27Z"/></g></g><g><path class="cls-8" d="M578.2,234.27l-82.14,1.24c-2.58,.04-4.5-2.25-3.97-4.72l11.78-83.1c2.6-14.13,14.94-24.74,29.57-25.41h0c14.78-.68,27.77,8.96,31,23.01l17.74,83.98c.63,2.51-1.32,4.97-3.98,5.01Z"/><ellipse class="cls-34" cx="537.21" cy="150.82" rx="28.21" ry="15.24" transform="translate(-18.56 101.25) rotate(-10.58)"/><path class="cls-34" d="M484.91,231.45h0c.08-2.95,2.59-5.34,5.61-5.32l92.19,.47c3.02,.02,5.41,2.42,5.33,5.38h0c-.08,2.95-2.59,5.34-5.61,5.32l-92.19-.47c-3.02-.02-5.41-2.42-5.33-5.38Z"/></g><g><g><path class="cls-4" d="M475.22,87.15c6.99-.04,13.38,1.21,18.91,3.52,.46,.19,.92,.39,1.36,.6,6.47,2.94,12.51,7.21,15.1,13.73,3.04,9.3-7,21.3-17.06,18.96-8.19-2.19-12.95-10.37-15.83-17.82-.16-.46-.32-.92-.47-1.39-1.63-5.15-2.38-11.08-2.02-17.6Z"/><path class="cls-6" d="M492.2,95.54c-.39,.51-.49,1.11-.35,1.74-3.74-.92-6.9-.63-7.53,1.64-.57,2.07,1.45,3.95,4.57,5.12-2.78,1.2-4.16,3.24-3.44,5.64,.89,2.95,4.33,3.96,8.34,2.68-.93,1.88-.91,3.64,.65,4.68,2.34,1.57,5.41-.24,7.35-3.4l3.12-8.61c.31-1.11-.02-2.29-.87-3.11-1.3-1.25-4.92-4.53-4.92-4.53,0,0-5.23-4.15-6.91-1.85Z"/></g><g><path class="cls-4" d="M563.12,67.21c-6.3,3.09-11.5,7.06-15.48,11.6-.33,.38-.65,.76-.97,1.15-4.55,5.53-8.14,12.07-7.67,19.08,1.27,9.72,15.45,16.02,23.49,9.43,6.42-5.62,7.18-15.1,6.56-23.08-.05-.48-.11-.97-.18-1.45-.75-5.36-2.62-11.02-5.76-16.72Z"/><path class="cls-6" d="M552.69,81.52c.56,.3,.9,.8,1.03,1.44,3.03-2.43,6.02-3.5,7.51-1.71,1.37,1.64,.3,4.21-2.06,6.6,3.02-.09,5.11,1.18,5.43,3.66,.4,3.06-2.32,5.44-6.48,5.98,1.62,1.31,2.31,2.92,1.32,4.53-1.49,2.42-5.02,2.08-8.07,.04l-6.35-6.5c-.73-.88-.91-2.1-.48-3.2,.67-1.69,2.63-6.22,2.63-6.22,0,0,3.06-5.99,5.53-4.62Z"/></g><g><path class="cls-22" d="M540.26,153.89c54.26-13.48,35.79-53.39,35.79-53.39l-98.09,23.05s-.54,43.02,62.3,30.34Z"/><g><path class="cls-17" d="M529.21,111.33c-2.42,3.02-3.43,6.07-2.59,8.73,2.22,7.08,16.76,13.42,32.35,8.47,17.91-6.14,17.03-28.31,17.03-28.31,0,0-23.01,5.49-46.79,11.11Z"/><path class="cls-17" d="M477.96,123.55c-.17,.04,8.53,15.24,28.51,14.48,19.98-.76,29.79-13.41,28.92-20.8-.28-2.36-1.57-5.31-4.14-6.93-24.05,5.69-49.74,12.58-53.29,13.25Z"/><path class="cls-17" d="M488.95,124.29c-2.04-14.25,9.52-31.83,30.87-36.59,21.35-4.76,42.18,4.11,46.72,17.57l-77.59,19.02Z"/></g></g><g><path class="cls-8" d="M547.44,89.02l-54.28,18.05,7.76-55.26c.43-3.05,4.27-4.35,6.46-2.2l40.06,39.42Z"/><path class="cls-8" d="M465.14,116.79h0c.33,.93,1.38,1.41,2.35,1.07l111.78-40.18c.96-.34,1.47-1.38,1.14-2.32h0c-.33-.93-1.38-1.41-2.35-1.07l-111.78,40.18c-.96,.34-1.47,1.38-1.14,2.32Z"/></g><g><g><path class="cls-4" d="M519.8,136.25s1.82,9.42,14.62,6.9c12.8-2.51,10.16-12.68,10.16-12.68,0,0-9.48,.01-13.93-3.55-2.81,6.71-10.85,9.32-10.85,9.32Z"/><path class="cls-21" d="M526.89,140.88c.39-2.02,4.17-3.74,7.27-1.93,.9-1.94,5.41-3.28,6.66-1.51,.24,2.91-12.78,5.72-13.94,3.44Z"/><path class="cls-6" d="M520.93,135.23l6.57-4.56,1.21,5.96c.09,1.03-1.59,2.04-2.85,1.27l-4.93-2.67Z"/><path class="cls-6" d="M534.31,128.4l7.87,2.34-2.72,3.63c-.4,1.44-2.45,1.7-3.03,.39l-2.12-6.36Z"/><path class="cls-4" d="M514.99,137.78c-.64,0-1.16-.52-1.14-1.15,.01-.63,.55-1.15,1.2-1.15,6.64,0,12.63-4.37,13.93-10.17l.46-2.06,1.52,1.46c2.79,2.7,11.45,6.82,18.79,4.13,.61-.22,1.28,.07,1.5,.67,.22,.59-.1,1.25-.71,1.48-7.4,2.72-15.69-.49-19.79-3.44-2.25,5.94-8.68,10.23-15.73,10.23h0Z"/></g><g><path class="cls-6" d="M540.39,98.32c-7.78,.22-14.38,3.65-17.13,8.37-1.06-1.6-2.49-2.81-4.24-3.44-5.66-2.05-12.6,2.65-15.74,10.53-.08,.2-.16,.41-.23,.61-2.94,7.12-1.41,19.31,8.56,18.62,7.01-.24,11.26-6.53,13.02-12.7,.08-.28,.15-.56,.22-.84s.13-.56,.18-.83c3.43,3.51,9.35,5.73,16.02,5.55,10.39-.29,18.67-6.31,18.49-13.46-.18-7.14-8.75-12.7-19.14-12.41Z"/><g class="cls-39"><path class="cls-21" d="M554,101.7c-3.52-2.79-8.4-4.92-14.26-4.76-7.78,.22-14.38,3.65-17.13,8.37-1.06-1.6-2.49-2.81-4.24-3.44-5.81-2.1-12.96,2.89-15.97,11.15-.81,2.22-1.23,4.46-1.31,6.58,3.65-1.71,5.37-9.5,12.45-11.91,8.52-4,9.09,4.7,11.13,3.93,2.21-.84,.93-7.29,13.28-9.5,5.16-.92,10.42,1.63,16.05-.41Z"/><ellipse class="cls-4" cx="517.34" cy="119.56" rx="6.59" ry="4.1" transform="translate(266.54 587.57) rotate(-74.83)"/><ellipse class="cls-4" cx="537.9" cy="114.41" rx="4.19" ry="6.55" transform="translate(97.94 444.35) rotate(-48.88)"/></g><path class="cls-4" d="M559.33,98.67c-.41-.52-1.14-.61-1.63-.2-1.09,.91-2.28,1.58-3.5,2.07,.93-.7,1.79-1.51,2.58-2.44,.99-1.28-.95-2.81-1.86-1.48-.87,1.28-1.99,2.42-3.25,3.35,.82-.85,1.55-1.81,2.12-2.9,.7-1.46-1.47-2.55-2.1-1.06-.56,1.38-1.55,2.67-2.72,3.72-.76,.67-1.6,1.25-2.5,1.71-20.13-2.25-22.92,9.28-23.03,9.78-.14,.64,.25,1.28,.87,1.45,.09,.03,.19,.04,.28,.04,.52,0,.98-.35,1.11-.89,.1-.42,2.6-10.23,21.18-7.93,1.65,.2,7.39,.55,12.3-3.53,.49-.41,.56-1.16,.15-1.68Z"/><path class="cls-4" d="M525.53,110.81c-.1-.22-2.47-5.28-7.42-5.74-4.14-.39-8.63,2.6-13.35,8.87-1.24,.64-2.61,1.04-4,1.22-1.6,.2-3.25,.11-4.67-.37-1.55-.49-2.25,1.85-.68,2.28,1.32,.3,2.64,.37,3.94,.27-1.42,.26-2.88,.34-4.28,.18-1.63-.18-1.84,2.28-.2,2.37,.88,.01,1.74-.05,2.58-.17-1.2,.28-2.47,.33-3.81,.16-.66-.09-1.25,.37-1.34,1.02s.37,1.25,1.02,1.33c.7,.09,1.39,.13,2.06,.12,4.16-.08,7.77-2.11,10.52-5.97,4.4-6.16,8.53-9.25,11.95-8.94,3.56,.32,5.46,4.3,5.5,4.37,.27,.59,.98,.86,1.57,.58,.6-.27,.86-.98,.59-1.57Z"/></g><path class="cls-4" d="M538.8,119.23c.75,3.23-8.51,8.25-8.51,8.25,0,0-10.4-.32-11.15-3.55-.75-3.23,3.05-6.91,8.48-8.21,5.43-1.3,10.43,.27,11.18,3.5Z"/></g></g></g><g><g><path class="cls-6" d="M496,106.06c-8.24,35.03-31.11,57.73-63.34,59.01,0,0-37.65,.94-50.06-19.68-.54-.9-.7-1.98-.47-3.01h0c.69-3.11,4.49-4.48,6.98-2.5,3.37,2.68,8.4,5.36,15.13,5.52,13.68,.32,23.1-20.48,14.25-35.52-8.85-15.04-6.86-45.29,33.23-47.65,16.11-.64,52.53,8.81,44.29,43.84Z"/><path class="cls-6" d="M449.71,61.96c1.52-14.18,13.98-17.64,22.39-16.28,8.41,1.36,10.42,9.53,11.08,13.7,.4,2.52,1.06,5.15,2.92,6.91,2.14,2.02,5.47,2.43,8.42,1.8,1.42-.31,2.85-.83,4.28-.64,2.34,.3,4.06,2.59,4.07,4.91,.02,2.32-1.41,4.51-3.33,5.9-1.92,1.39-4.29,2.06-6.64,2.39-9.65,1.37-19.81-2.95-25.23-10.75l-17.96-7.93Z"/></g><path class="cls-2" d="M480.01,86.91c-5.84-3.93-12.59-4.7-16.67-2.28-2.51-5.7-10.56-8.85-19.26-7.18-9.73,1.87-16.59,9.06-15.32,16.06,1.27,7,10.18,11.16,19.91,9.29,5.18-1,9.55-3.5,12.31-6.68,1.35,2.8,3.74,5.55,6.95,7.71,7.13,4.79,15.61,4.89,18.94,.22,3.33-4.67,.26-12.34-6.86-17.14Z"/><g><g class="cls-38"><ellipse cx="471.41" cy="95.85" rx="4.58" ry="7.52" transform="translate(39.36 307.39) rotate(-37.58)"/><ellipse cx="453.36" cy="91.93" rx="7.73" ry="5.46" transform="translate(4.08 202.08) rotate(-25.24)"/></g><path d="M460.78,75.99c-.22-.04-.42-.17-.56-.37-5.14-7.58-13.5-3.77-13.85-3.6-.45,.21-.99,.03-1.19-.41s-.01-.96,.44-1.18c.1-.05,10.13-4.64,16.11,4.19,.27,.4,.16,.95-.26,1.22-.21,.14-.46,.18-.69,.14Z"/><path d="M484.52,87.75c-.2-.04-.39-.15-.52-.32-5.75-7.29-15.18-7.38-15.27-7.38-.5,0-.89-.39-.88-.88,0-.49,.42-.88,.92-.88,.42,0,10.38,.08,16.67,8.05,.3,.38,.22,.93-.17,1.24-.22,.17-.49,.22-.74,.17Z"/><path d="M435.11,108.7c-12.12-2.42-12.36-13.54-12.36-13.66,0-.49,.4-.89,.89-.9,.49-.02,.9,.37,.91,.85h0c0,.44,.26,10.72,12.45,12.23,6.81,.85,9.81,.29,12.97-.31,2.8-.53,5.7-1.07,11.26-.56,5.95,.55,9.31,2,12.28,3.28,2.83,1.22,5.07,2.19,8.81,2,7.01-.35,7.51-6.65,7.53-6.92,.03-.48,.46-.86,.95-.84,.5,.03,.87,.43,.84,.91-.17,2.82-2.33,8.26-9.27,8.6-4.17,.21-6.69-.88-9.62-2.14-2.85-1.23-6.07-2.62-11.73-3.14-5.3-.49-7.95,0-10.75,.53-3.17,.59-6.44,1.21-13.54,.33-.57-.07-1.11-.16-1.64-.26Z"/></g><g><path class="cls-12" d="M473.51,117.82l-13.59,2.13c-.67,.1-1.21,.67-1.33,1.38l-.05,.29c-.12,.72,.23,1.42,.85,1.69l12.48,5.43c.9,.39,1.94-.26,2.09-1.31l1.16-7.84c.15-1.04-.65-1.91-1.62-1.75Z"/><path class="cls-12" d="M443.24,125.26l14.09-2.33c.45-.07,.82-.47,.9-.97l.17-1.03c.08-.51-.15-.99-.57-1.18l-12.92-5.73c-.61-.27-1.32,.19-1.43,.92l-1.35,9.09c-.11,.73,.43,1.33,1.09,1.22Z"/><ellipse class="cls-19" cx="458.58" cy="121.38" rx="3.83" ry="4.34" transform="translate(287.26 563.73) rotate(-83.65)"/></g><g><path d="M438.99,60.43c-2.11-4.56-7.75-7.2-13.21-7.26-7.65-.08-13.05,5.44-13.29,13-.1,3.27,.63,6.58,2.83,8.67,18.01-3.79,23.66-14.41,23.66-14.41Z"/><path class="cls-12" d="M412.86,71.78c.42,.8,1.12,2.01,1.74,2.61,18.42-4.07,24.15-15.19,24.15-15.19-.26-.56-.57-1.09-.92-1.59-.22-.31-.69-.34-.96-.05-2.13,2.26-10.85,10.79-23.56,13.31-.43,.08-.66,.55-.46,.92Z"/><path d="M407.95,76.34c-.33-.02-.59-.27-.61-.6-.02-.35,.26-.66,.62-.68,.25-.02,24.95-1.87,34-21.7,.15-.33,.54-.48,.87-.34,.33,.14,.48,.52,.33,.84-9.38,20.57-34.88,22.46-35.13,22.48-.03,0-.05,0-.08,0Z"/></g><path d="M466.24,148.28c-2.6-.16-9.25-.89-12.24-4.22-1.17-1.3-1.68-2.84-1.51-4.58,.15-1.61,.89-2.97,2.21-4.04,4.69-3.84,15.43-2.74,15.88-2.69,.53,.06,.91,.53,.86,1.06-.06,.53-.51,.92-1.06,.86-.1,0-10.39-1.06-14.46,2.27-.91,.75-1.41,1.64-1.51,2.73-.11,1.2,.22,2.22,1.02,3.11,3.12,3.47,11.81,3.62,11.9,3.62,.54-.01,.96,.44,.95,.98,0,.53-.44,.96-.98,.95-.07,0-.46,0-1.06-.04Z"/><path d="M437.81,142.28c-4.75-.29-9.93-3.16-10.2-3.31-.46-.26-.63-.85-.37-1.31,.26-.46,.85-.63,1.31-.37,.08,.04,7.68,4.25,12.12,2.8,1.14-.37,1.94-1.09,2.44-2.19,.46-1,.47-2.02,.06-3.12-1.87-4.92-11.3-9.13-11.4-9.18-.49-.21-.71-.78-.49-1.27,.22-.49,.79-.71,1.27-.49,.42,.18,10.27,4.59,12.42,10.26,.6,1.59,.57,3.14-.1,4.61-.73,1.59-1.94,2.68-3.6,3.22-1.06,.35-2.24,.44-3.45,.37Z"/></g><g><g><ellipse class="cls-25" cx="447.98" cy="215.49" rx="27.57" ry="26.35" transform="translate(-46.35 268.06) rotate(-31.76)"/><path class="cls-33" d="M476.24,215.5c-.07-4.18-1.22-8.06-3.2-11.44-2.85,3.81-7.6,8.65-15.14,12.5-14.72,7.53-37.2,2.08-37.35,2.04,0,0,0,.02,0,.03l.18,2.66c1.62,12.93,13.68,22.4,28.12,21.56,15.38-.89,27.64-13.14,27.39-27.35Z"/><path class="cls-33" d="M465.34,217.84c-2.67-7.77-8.11-12.9-12.21-15.84l3.28-4.37c4.69,3.37,10.94,9.27,14.04,18.3l-5.11,1.9Z"/><path class="cls-33" d="M436.78,224.38c.51-4.96-.17-10.03-2.01-15.06l5.1-1.99c2.11,5.77,2.88,11.62,2.3,17.36l-5.38-.31Z"/><ellipse class="cls-26" cx="439.59" cy="223.3" rx="1.88" ry="1.81" transform="translate(-44.19 318.49) rotate(-38.06)"/><ellipse class="cls-26" cx="467.32" cy="215.5" rx="1.88" ry="1.81" transform="translate(-33.48 333.93) rotate(-38.06)"/><path class="cls-26" d="M461.2,218.13c-2.73,1.35-7.77,3.37-14.88,4.28-1.05,.13-1.81,1.07-1.68,2.07l.98,7.95c.06,.45,.29,.86,.65,1.15,1.43,1.12,5.35,3.8,9.2,2.9,4.05-.94,7.88-6.58,9.03-8.39,.22-.36,.32-.77,.27-1.17l-.89-7.44c-.15-1.23-1.51-1.92-2.67-1.34Z"/></g><g><path class="cls-24" d="M461.13,262.48c-.19,0-.38-.09-.52-.24-.26-.3-.21-.76,.1-1.03,2.94-2.51,4.84-5.89,6.52-9.13,1.84-3.54,2.52-7.34,1.92-10.68-.36-1.97-1.19-3.82-2.4-5.35-.25-.31-.18-.77,.14-1.02,.32-.26,.78-.21,1.03,.1,1.35,1.7,2.28,3.77,2.68,5.96,.66,3.66-.07,7.79-2.06,11.62-1.76,3.38-3.74,6.9-6.89,9.59-.15,.13-.34,.19-.52,.18Z"/><path class="cls-26" d="M460.42,262.01l-.19,2.73,16.27,.57s.86-4.66-3.53-5.57c-4.15-.87-4.93,3.74-11.33,1.46-.56-.2-1.19,.21-1.23,.81Z"/><path class="cls-6" d="M475.28,268.31h0c-.19-.15-.46-.17-.68-.05l-1.07,.55c-.19,.1-.4,.1-.58,0l-1.73-.85c-.17-.08-.38-.09-.55,0l-1.66,.75c-.18,.08-.39,.08-.56,0l-1.18-.59c-.15-.08-.33-.09-.5-.03l-1.73,.58c-.14,.05-.3,.05-.44,0l-2.17-.83c-.15-.06-.32-.06-.47,0l-1.05,.41c-.44,.17-.89-.15-.86-.61l.2-2.89,16.28,.43-.18,2.64c-.04,.52-.64,.8-1.05,.5Z"/></g><g><path class="cls-24" d="M417.15,260.97c-.14,0-.28-.05-.4-.14-.32-.23-.38-.69-.13-1.01,5.29-6.93,9.85-14.42,13.56-22.25,.17-.37,.61-.54,.98-.38,.37,.16,.52,.59,.35,.95-3.75,7.93-8.37,15.51-13.72,22.52-.16,.2-.39,.31-.63,.3Z"/><path class="cls-26" d="M418.07,260.35l-.19,2.73-16.29-.3s-.22-4.68,4.28-5.37c4.25-.65,4.4,3.99,11.09,2.06,.59-.17,1.15,.27,1.11,.88Z"/><path class="cls-6" d="M402.4,265.84h0c.21-.14,.48-.14,.69-.02l1,.61c.17,.1,.39,.12,.58,.04l1.84-.76c.18-.08,.39-.07,.55,.02l1.55,.84c.17,.09,.37,.1,.56,.02l1.25-.53c.16-.07,.34-.07,.5,0l1.64,.67c.14,.06,.29,.06,.44,.02l2.28-.72c.16-.05,.33-.04,.47,.03l.99,.47c.41,.2,.91-.1,.94-.56l.2-2.89-16.28-.43-.18,2.64c-.04,.52,.53,.84,.98,.55Z"/></g><g><path class="cls-24" d="M484.91,226.56s.05,0,.07-.01c.4-.09,.64-.48,.56-.87-.26-1.16,.62-2.38,1.63-3,1.06-.65,2.32-.9,3.66-1.16l.46-.09c1.62-.33,3.29-.79,4.53-1.91,1.28-1.16,2-3,1.93-4.94-.05-1.55-.58-3.2-1.57-4.9-2.3-3.95-6.35-7.04-11.1-8.48-4.35-1.31-9.2-1.3-14.04,.04-.39,.11-.62,.51-.51,.89,.11,.39,.52,.61,.91,.5,4.57-1.26,9.14-1.28,13.22-.05,4.4,1.33,8.14,4.18,10.26,7.81,.87,1.5,1.33,2.92,1.38,4.23,.05,1.52-.49,2.94-1.46,3.82-1.03,.93-2.52,1.29-3.83,1.56l-.45,.09c-1.41,.28-2.86,.57-4.15,1.35-1.41,.86-2.73,2.65-2.29,4.55,.08,.37,.44,.61,.81,.56Z"/><path class="cls-24" d="M488.05,228.09c.2-.03,.4-.13,.52-.32,.22-.33,.13-.78-.21-1.01-.81-.54-1.31-1.54-1.22-2.5,.09-.96,.75-1.87,1.64-2.25,.37-.16,.54-.59,.38-.96s-.6-.53-.97-.37c-1.4,.6-2.39,1.96-2.52,3.46-.13,1.5,.6,3.01,1.87,3.84,.15,.1,.33,.14,.5,.12Z"/><path class="cls-24" d="M490.3,226.88c.21-.03,.41-.14,.53-.34,.21-.34,.11-.79-.24-1-.67-.42-1.23-1-1.61-1.69-.19-.35-.29-.64-.29-.9,0-.31,.12-.63,.34-.85,.22-.22,.54-.35,.85-.35,.4,0,.74-.32,.74-.72,0-.4-.33-.73-.73-.73-.72,0-1.41,.29-1.91,.79-.5,.51-.77,1.2-.75,1.91,.01,.49,.17,1,.47,1.55,.5,.91,1.23,1.69,2.13,2.24,.15,.09,.32,.12,.48,.1Z"/></g><g><path class="cls-24" d="M473.03,202.59c1.33-.17,2.65-.72,3.9-1.34,2.14-1.05,4.57-2.35,6.28-4.48,1.86-2.31,2.57-5.28,3.09-7.87l.16-.79c.46-2.34,.94-4.76,2.09-6.81,1.04-1.85,3.22-3.98,5.92-3.89,.4,.02,.75-.3,.76-.7,.01-.4-.3-.74-.71-.75-2.76-.1-5.61,1.72-7.25,4.64-1.27,2.25-1.77,4.79-2.25,7.24l-.15,.78c-.49,2.43-1.14,5.19-2.8,7.25-1.52,1.89-3.78,3.1-5.78,4.08-1.56,.77-3.37,1.55-5.02,1.12-.39-.1-.79,.13-.9,.52s.13,.78,.52,.89c.72,.19,1.44,.21,2.15,.12Z"/><path class="cls-24" d="M486.52,185.51c.25-.03,.47-.19,.58-.43,1.12-2.56,3.4-4.59,6.1-5.45,.39-.12,.6-.53,.48-.91-.12-.38-.54-.59-.93-.47-3.09,.98-5.7,3.31-6.99,6.25-.16,.37,0,.8,.38,.95,.13,.05,.26,.07,.39,.05Z"/><path class="cls-24" d="M486.64,185.59c.2-.03,.39-.13,.51-.31,1.14-1.65,3.02-2.8,5.03-3.07,.4-.05,.68-.42,.63-.82s-.41-.68-.83-.62c-2.41,.33-4.67,1.71-6.04,3.69-.23,.33-.14,.78,.19,1.01,.15,.1,.34,.14,.51,.12Z"/></g><g><path class="cls-24" d="M403.87,246.33c.29-.05,.53-.28,.59-.58,.07-.39-.19-.77-.59-.85-1.58-.29-3.03-1.48-3.89-3.18-.7-1.4-1.04-3.1-1.06-5.35-.04-4.94,1.42-9.97,4.1-14.15,2.68-4.18,6.66-7.63,11.2-9.73,2.88-1.33,5.5-1.84,7.78-1.51,.4,.06,.78-.22,.83-.61,.06-.4-.22-.76-.62-.82-2.57-.37-5.47,.18-8.62,1.63-4.8,2.21-9,5.86-11.82,10.27-2.83,4.41-4.36,9.71-4.32,14.93,.02,2.48,.4,4.38,1.21,5.98,1.06,2.11,2.91,3.59,4.94,3.96,.09,.02,.18,.02,.27,0Z"/><path class="cls-24" d="M403.06,243.98c.33-.06,.66-.15,.98-.29,.84-.37,1.52-1.07,1.87-1.91,.35-.84,.36-1.81,.03-2.65-.15-.37-.57-.56-.95-.42-.38,.14-.57,.56-.42,.94,.2,.51,.19,1.08-.02,1.58-.21,.5-.62,.91-1.12,1.14-.53,.24-1.18,.27-1.79,.29-.52,.01-1.09,0-1.35-.27-.28-.29-.75-.3-1.04-.02-.29,.28-.3,.74-.02,1.02,.75,.76,1.9,.73,2.45,.72,.43-.01,.9-.03,1.37-.12Z"/><path class="cls-24" d="M401.92,243.75c.69-.13,1.28-.43,1.69-.88,.48-.52,.75-1.27,.72-2.04-.02-.61-.21-1.25-.56-1.9-.19-.35-.64-.48-1-.3-.36,.19-.49,.63-.3,.98,.25,.45,.38,.87,.39,1.26,.01,.4-.11,.78-.34,1.02-.24,.26-.64,.42-1.1,.46-.46,.04-.95-.04-1.54-.17-.4-.09-.79,.16-.88,.55s.16,.78,.56,.86c.62,.14,1.29,.25,1.98,.2,.13-.01,.25-.03,.38-.05Z"/></g><path class="cls-33" d="M421.9,181.13c2.46,3.33,6.26,5.24,10.14,5.93,3.92,.67,7.92,.11,11.61-2.01,3.68-2.13,6.51-5.49,8.41-9.46,1.86-3.95,2.78-8.49,1.77-12.6-1-4.09-3.92-6.92-8.11-7.88-4.15-.98-9.58-.11-14.71,2.8-5.14,2.89-8.85,7.17-10.44,11.41-1.62,4.26-1.12,8.49,1.33,11.81Z"/><path class="cls-32" d="M419.32,195.23c2.01,10.7,14.35,17.43,27.56,15.05,13.22-2.39,22.3-12.99,20.29-23.69-2.01-10.7-14.13-16.26-27.34-13.87-13.22,2.39-22.52,11.81-20.51,22.51Z"/><g><g><path class="cls-6" d="M431.31,181.86c2.99-2,6.67-1.82,8.2,.41,.51,.73,.72,1.6,.67,2.5,.2-.08,.4-.16,.61-.23,2.75-.89,5.61-.09,7.16,1.81,.17-.42,.42-.81,.73-1.16,1.23-1.36,3.25-1.72,5.3-1.16-.1-.98,.14-1.88,.76-2.56,1.47-1.62,4.51-1.3,6.81,.71,2.29,2.01,2.96,4.95,1.49,6.57-.75,.82-1.9,1.15-3.16,1,.47,1.68,.23,3.36-.83,4.53-1.93,2.13-5.81,1.82-8.67-.69-.68-.6-1.24-1.27-1.68-1.97-.69,1.69-2.21,3.13-4.25,3.79-3.44,1.12-7.04-.41-8.05-3.41-.18-.54-.26-1.08-.26-1.62-2.83,1.51-6.05,1.19-7.46-.85-1.54-2.23-.36-5.65,2.64-7.65Z"/><g class="cls-37"><ellipse class="cls-27" cx="444.1" cy="189.46" rx="2.93" ry="2.08" transform="translate(30.53 438.61) rotate(-54.17)"/><ellipse class="cls-27" cx="452.37" cy="189.21" rx="2.08" ry="2.94" transform="translate(-10.8 350.2) rotate(-41.86)"/><ellipse class="cls-27" cx="436.19" cy="185.98" rx="2.71" ry="1.91" transform="translate(-9.39 348.17) rotate(-43.09)"/><ellipse class="cls-27" cx="457.69" cy="184.94" rx="1.74" ry="2.79" transform="translate(10.32 393.6) rotate(-47.01)"/></g><path class="cls-24" d="M446.52,182.72c.18-.03,.35-.13,.46-.29,.24-.32,.16-.78-.17-1.01-2.84-2.02-5.36-.44-6.3,.67-.26,.31-.21,.77,.1,1.02,.31,.25,.77,.21,1.03-.09,.19-.22,1.92-2.11,4.3-.42,.17,.12,.37,.16,.56,.13Z"/><path class="cls-24" d="M448.09,184.16c.2-.04,.39-.15,.5-.34,1.05-1.73,3.64-1.37,3.66-1.37,.4,.06,.78-.21,.84-.61,.06-.39-.21-.76-.61-.83-.15-.02-3.59-.52-5.15,2.05-.21,.34-.1,.79,.25,.99,.16,.09,.34,.12,.51,.09Z"/></g><g><path class="cls-6" d="M433.13,200.55c.37,1.65,1.18,4.25,2.81,6.34,.32,.41,.99,.24,.97-.25l-.83-6.13-1.94-1.16-1,1.2Z"/><path class="cls-24" d="M430.77,202.8c.9-.19,1.73-.58,2.45-1.15,2.49-1.96,2.73-5.46,.54-7.81-.54-.58-1.18-1.04-1.92-1.38-.39-.18-.83-.04-1,.3-.16,.35,.02,.77,.4,.95,.53,.25,1,.59,1.39,1.01,1.62,1.73,1.41,4.34-.46,5.82-.94,.74-2.19,1.09-3.43,.96-.42-.05-.77,.23-.79,.62-.02,.39,.31,.74,.73,.78,.71,.08,1.4,.04,2.07-.1Z"/><path class="cls-24" d="M450.25,202.67c5.26-1.14,8.48-3.27,10.3-4.96,.29-.26,.27-.71-.04-1-.31-.29-.79-.31-1.07-.04-1.92,1.78-5.52,4.09-11.73,5-6.75,.98-10.03-.97-12.43-2.39-.28-.17-.55-.33-.82-.48-.37-.21-.83-.11-1.03,.22-.2,.33-.06,.77,.31,.98,.25,.14,.51,.3,.78,.46,2.61,1.55,6.19,3.68,13.52,2.61,.77-.11,1.5-.24,2.19-.39Z"/></g></g><g><path class="cls-33" d="M434.66,173.99l29.12-8.45c1.16-.34,2.16,.43,1.85,1.42-.96,3.05-4.13,8.7-14.54,11.52-14.69,3.99-16.43-4.48-16.43-4.48Z"/><path class="cls-26" d="M423.69,175.76c.2-.34,.66-.47,1.02-.28,1.56,.81,3.46,1.02,5.23,.61-.15-.07-.31-.14-.45-.21-1.03-.55-1.86-1.42-2.34-2.44-.17-.36,0-.78,.38-.94,.37-.16,.82,0,.98,.35,.35,.75,.97,1.39,1.72,1.8,.67,.36,1.45,.51,2.22,.48,.66-.29,1.74-.76,3.09-1.33,.26-2-.52-4.12-2.06-5.47-.3-.26-.31-.71-.03-1,.28-.29,.75-.31,1.05-.04,1.7,1.5,2.63,3.67,2.59,5.87,1.55-.64,3.33-1.36,5.18-2.08-.57-2.33-2.26-4.41-4.45-5.47-.36-.18-.51-.6-.32-.95,.19-.35,.64-.49,1.01-.31,2.55,1.23,4.45,3.52,5.16,6.2,1.68-.63,3.38-1.25,5.01-1.78,0-.01,0-.02,.01-.03,.35-.68,.57-1.39,.65-2.12,.19-1.63-.31-3.3-1.36-4.58-.25-.31-.19-.75,.13-1,.32-.24,.79-.19,1.05,.11,1.29,1.56,1.9,3.6,1.66,5.6-.06,.49-.17,.96-.32,1.43,1.67-.51,3.21-.9,4.45-1.1,.41-.07,.79,.19,.85,.58,.06,.39-.22,.76-.62,.82-5.73,.92-18.17,6.23-21.79,7.8-.1,.11-.23,.21-.39,.24-.03,0-.06,.01-.09,.02-.04,0-.09,0-.13,.01-.24,.11-.38,.17-.39,.17-.66,.35-1.37,.6-2.1,.77-2.12,.49-4.42,.25-6.31-.74-.36-.19-.49-.62-.28-.96Z"/></g></g><g><path class="cls-30" d="M569.87,261.28c1.09-2.35,1.11-4.94-.31-7.11-.2-.28-.42-.55-.67-.79-4.39-3.93-10.78-2.92-16.04-.43-.4,.19-.8,.39-1.19,.6-4.53,2.38-8.41,6.05-10.18,10.73-1.78,5.33,.69,10.75,5.03,13.82,3.16,2.17,7.26,3.17,11.12,1.45,6.93-3.83,6.61-12.12,11.44-17.15,.3-.34,.56-.71,.8-1.11Z"/><g><path class="cls-9" d="M537.45,297.72h0c-4.07-.28-7.09-3.97-6.84-8.36l.51-24.56c.71-7.78,3.98-13.91,12.06-13.36,6.35,.43,8.31,4.48,8.51,9.98,.09,2.45-.21,4.92-.78,7.32l-5.37,22.61c-.93,3.93-4.37,6.63-8.09,6.38Z"/><path class="cls-9" d="M539.91,301.44l-18.4-.39c-2.29-.05-4.07-1.9-3.97-4.14h0c.28-6.72,6.08-12.06,12.95-11.91l7.38,.15c3.94,.08,6.99,3.27,6.83,7.12l-.21,4.95c-.1,2.38-2.15,4.27-4.59,4.22Z"/></g><g><path class="cls-9" d="M498.58,295.03h0c-3.56-1.8-4.81-6.37-2.81-10.34l10.33-22.58c3.77-6.95,9.18-11.4,16.25-7.83,5.56,2.8,5.7,7.3,3.67,12.47-.9,2.31-2.16,4.48-3.64,6.49l-13.93,18.93c-2.42,3.29-6.61,4.5-9.87,2.85Z"/><path class="cls-9" d="M501.17,295.82l-16.57-7.55c-2.06-.94-2.92-3.35-1.92-5.38h0c3.01-6.11,10.46-8.77,16.64-5.95l6.65,3.03c3.54,1.61,5.02,5.76,3.3,9.26l-2.21,4.49c-1.06,2.16-3.7,3.11-5.89,2.11Z"/></g><g><g><path class="cls-9" d="M485,231.96c-1.31,4.24-5.74,6.73-9.89,5.57-4.15-1.16-6.45-5.53-5.13-9.77l.82-3.02c.7-2.6,3.44-4.17,6.07-3.49l4.9,1.41c3.11,.9,4.85,4.09,3.9,7.16l-.66,2.13Z"/><path class="cls-9" d="M476.53,227.22h0c.91-2.95,4.04-4.7,7.07-3.97l20.35,4.9c5.32,1.49,9.03,4.64,7.22,10.5-1.43,4.6-4.61,5.53-8.49,5-1.73-.24-3.41-.76-4.99-1.48l-18.12-8.22c-2.58-1.17-3.87-4.03-3.03-6.73Z"/></g><path class="cls-31" d="M513.6,230.62l-21.76-7.08c-.71-.23-1.35,.54-.97,1.17l2.38,3.96c.29,.49-.02,1.12-.6,1.2l-6.5,.92c-.64,.09-.93,.84-.52,1.31l3.54,4.01c.38,.43,.17,1.12-.4,1.28l-3.23,.94c-.77,.22-.8,1.28-.04,1.51l22.35,7.09c4.65,1.46,9.69-1.12,11.18-5.72h0c1.44-4.44-.97-9.13-5.43-10.58Z"/></g><path class="cls-31" d="M555.62,247.25l.07-19.1c0-2.26-1.86-4.06-4.17-4.02l-44.39,.71c-2.31,.04-4.19,1.9-4.2,4.16l-.08,21.68c0,.12-.02,.24-.05,.36l-5.18,17.73c-.31,1.06,.76,1.97,1.79,1.53l7.8-3.33c.54-.23,1.17-.09,1.54,.35l2.76,3.25c.42,.5,1.17,.61,1.74,.25l6.08-3.83c.55-.34,1.26-.26,1.69,.19l5.05,5.31c.53,.56,1.45,.54,1.97-.05l5.37-5.94c.56-.62,1.56-.6,2.06,.05l3.44,4.45c.48,.62,1.41,.68,1.99,.13l4.93-4.67c.47-.45,1.21-.5,1.73-.12l6.63,4.82c.89,.65,2.17-.02,2.14-1.12l-.71-22.76Z"/><g><g><path class="cls-9" d="M582.52,234.49c.42,4.37,4.26,7.55,8.59,7.1,4.33-.45,7.5-4.35,7.08-8.72l-.18-3.09c-.15-2.66-2.52-4.66-5.26-4.42l-5.12,.57c-3.25,.36-5.63,3.21-5.33,6.37l.21,2.19Z"/><path class="cls-9" d="M591.84,231.25h0c-.29-3.04-3-5.28-6.14-5.06l-21.07,1.44c-5.55,.58-9.86,3.06-9.29,9.1,.45,4.75,3.4,6.18,7.33,6.3,1.76,.05,3.51-.18,5.22-.62l19.56-5.06c2.79-.72,4.65-3.31,4.38-6.09Z"/></g><path class="cls-31" d="M550.9,228.68l26.68-3.95c.75-.11,1.22,.74,.72,1.3l-3.16,3.49c-.39,.43-.21,1.1,.35,1.27l6.22,1.97c.61,.19,.75,.97,.24,1.37l-4.31,3.35c-.47,.36-.4,1.07,.13,1.32l2.99,1.45c.71,.34,.53,1.38-.27,1.49l-23.49,3.3c-4.88,.67-9.32-2.68-9.85-7.43l-.41-3.69c-.28-2.54,1.56-4.86,4.16-5.25Z"/></g><g><path class="cls-9" d="M575.34,192.64v-.09c.05-13.34-10.97-23.98-24.62-23.76l-27.07,.43c-13.64,.22-24.74,11.21-24.79,24.55v.09c-7.56,2.99-12.93,10.24-12.96,18.64v1.03c-.04,10.92,7.92,22.84,51.79,22.14,43.87-.7,50.43-12.85,50.47-23.77v-1.03c.03-8.39-5.29-15.47-12.83-18.22Z"/><g><ellipse class="cls-9" cx="527.03" cy="160.76" rx="9.35" ry="17.37" transform="translate(13.75 361.13) rotate(-38.29)"/><ellipse class="cls-9" cx="518.1" cy="169.38" rx="11.41" ry="18.19" transform="translate(161.56 581.69) rotate(-67.25)"/><ellipse class="cls-9" cx="505.33" cy="179.22" rx="11.45" ry="11.12" transform="translate(-30.71 190.95) rotate(-20.78)"/></g></g><g><g><path class="cls-9" d="M552.44,162.8c1.91-16.41,13.85-28.34,27.95-34.73,10.86-6.18,29.16-5.23,33.63,9.92,2.73,10.18-6.87,18.08-15.32,19.45-7.55,1.83-14.98-.55-22.71-.26-6.44,.65-11.64,5.21-16.72,8.67-.92,.86-4.63-2.02-6.82-3.06Z"/><path class="cls-6" d="M553.58,163.48c3.55-11.04,12.65-27.51,34.03-33.09,9.85-1.89,20.17-.78,21.51,9.66,.69,7-7.29,11.99-13.71,12.6-5.81,.94-11.78-.65-17.53-.27-10.67,.71-20.26,13.42-20.26,13.42,0,0-2.55-1.53-4.03-2.32Z"/></g><g><path class="cls-9" d="M556.09,164.86c6.7-15.25,21.59-23.34,36.91-25.48,12.16-2.87,29.29,3.26,29.03,19.11-.43,10.57-11.91,15.45-20.35,14.37-7.72-.38-14.09-4.79-21.52-6.71-6.32-1.2-12.62,1.71-18.49,3.6-1.13,.57-3.8-3.26-5.58-4.88Z"/><path class="cls-6" d="M556.97,165.84c6.65-9.62,20.21-22.88,42.2-22.17,9.93,.98,19.42,4.99,17.58,15.42-1.42,6.94-10.5,9.47-16.78,8.23-5.81-.74-11.01-3.98-16.6-5.25-10.36-2.35-23.26,7.15-23.26,7.15,0,0-1.97-2.2-3.14-3.38Z"/></g><path class="cls-29" d="M555.75,180.61l-11.48-4.81c-4.9-2.05-7.09-7.63-4.89-12.46l.54-1.18c2.2-4.83,7.95-7.08,12.84-5.03l11.48,4.81c4.9,2.05,7.09,7.63,4.89,12.46l-.54,1.18c-2.2,4.83-7.95,7.08-12.84,5.03Z"/></g><g><path class="cls-6" d="M534.64,231.07l-7.41,.12-1.29-8.43s1.91,.31,5.79-7c.57,5.21,3.9,6.46,3.9,6.46l-.99,8.85Z"/><path class="cls-4" d="M547.29,218.04c-.59-.1-1.18,.29-1.29,.88-.45,2.23-1.99,3.49-4.73,3.87-7.26,.09-7.87-4.37-8.32-7.63-.03-.25-.07-.49-.1-.71-.1-.63-.62-1.09-1.28-1.1-.62-.01-1.23,.43-1.37,1.05-.04,.18-.09,.38-.13,.58-.82,3.62-2.04,7.16-7.14,7.24-2.14,.12-3.73-.31-4.73-1.28-1.27-1.22-1.22-2.96-1.22-3.01,.03-.59-.44-1.09-1.04-1.11-.61-.01-1.13,.45-1.16,1.04,0,.11-.12,2.7,1.83,4.6,1.46,1.42,3.61,2.06,6.36,1.91,3.73-.06,5.89-1.67,7.21-3.61l-.02,4.44c0,.6,.49,1.07,1.1,1.06s1.1-.5,1.11-1.1v-4.22c1.36,2.24,3.9,4.08,8.98,4h.06s.06,0,.06,0c4.73-.62,6.26-3.41,6.7-5.64,.12-.59-.27-1.15-.87-1.25Z"/><g><ellipse class="cls-6" cx="550.19" cy="202.04" rx="13.41" ry="16.18" transform="translate(3.32 412.91) rotate(-41.25)"/><g class="cls-43"><ellipse class="cls-4" cx="545.48" cy="200.29" rx="4.45" ry="7.19" transform="translate(-15.19 47.6) rotate(-4.93)"/><path class="cls-29" d="M534.82,196.88c10.36,2.05,22.62-1.13,29.34-3.34l-1.85-10.6-26.26,1.18-1.22,12.76Z"/></g><path class="cls-4" d="M565.88,191.02c-.3-.51-.98-.68-1.51-.37-.12,.07-.25,.14-.37,.21,.34-.56,.51-.94,.53-.99,.23-.55-.05-1.17-.61-1.39-.56-.21-1.21,.06-1.44,.62-.02,.04-.14,.32-.39,.73,.03-.5-.29-.96-.81-1.09-.59-.15-1.19,.2-1.36,.78-.04,.16-1.07,3.59-4.66,4.85-9.83,2.71-19.57,2.18-19.7,2.17-.62-.03-1.14,.42-1.19,1.01-.05,.59,.4,1.11,1.01,1.14,.19,.01,1.58,.09,3.74,.06,3.95-.06,10.48-.51,17.08-2.4,.07,0,.15-.01,.22-.03,.54-.14,1.03-.32,1.51-.5,2.59-.84,5.15-1.92,7.53-3.3,.53-.31,.71-.97,.41-1.48Z"/></g><g><ellipse class="cls-6" cx="516.64" cy="200.28" rx="16.58" ry="13.09" transform="translate(-17.98 345.94) rotate(-36.43)"/><g class="cls-42"><ellipse class="cls-4" cx="521.16" cy="200.3" rx="7.82" ry="4.81" transform="translate(272.36 700.13) rotate(-84.56)"/><path class="cls-29" d="M533.23,197.15c-9.61,1.12-20.19-3.03-25.93-5.77l3.15-10.21,23.46,3.4-.69,12.59Z"/></g><path class="cls-4" d="M531.72,196.36c-.13,0-9.91,.02-19.45-3.2-3.46-1.44-4.16-4.92-4.19-5.08-.11-.58-.68-.96-1.27-.85-.53,.1-.9,.55-.91,1.05-.21-.42-.31-.7-.32-.74-.18-.57-.79-.88-1.37-.69s-.92,.79-.74,1.36c.02,.05,.15,.45,.43,1.02-.12-.08-.24-.15-.35-.23-.5-.33-1.19-.21-1.54,.29-.35,.49-.23,1.16,.27,1.5,2.26,1.52,4.74,2.74,7.25,3.72,.44,.2,.9,.39,1.4,.55,.05,.02,.11,.02,.17,.02,.43,.15,.86,.3,1.29,.43,0,0,0,0,0,0,0,0,0,0,0,0,9.5,3.04,18.78,3.02,19.3,3.01h0c.6,0,1.1-.49,1.11-1.09,0-.6-.48-1.07-1.09-1.07Z"/></g><ellipse class="cls-29" cx="532.05" cy="208.94" rx="12.27" ry="7.39" transform="translate(-5.46 14.48) rotate(-1.55)"/></g></g><g><g><path class="cls-20" d="M605.46,287.09h0c-4.55-1.04-7.47-5.3-6.77-9.85l5.8-85.38c2.13-8.25,10.67-13.38,19.06-11.45h0c8.39,1.92,13.47,10.17,11.34,18.42l-18.62,82.48c-1.61,4.32-6.28,6.82-10.81,5.78Z"/><path class="cls-20" d="M581.41,218.83s5.66,13.73,28.98,.77l15.61-10.7s.61-.52,1.42-1.46c5.36-6.27,.93-16.29-7.45-15.57,0,0,1.04,10.08-5.37,11.95-9.08,2.66-12.23,1.63-16.15,9.58-4.77,9.66-17.03,5.43-17.03,5.43Z"/></g><g><path class="cls-20" d="M631.52,180.74c-3.76-4.72-9.93-7.72-16.26-8.45-.31-.04-.62-.07-.93-.1-4.05-.35-8.13,.13-11.63,1.44-.29,.1-.57,.2-.85,.31-5.88,2.23-13.83,7.26-15.11,21.34,0,0-8.8-4.29-14.11,3.21-4.18,5.88-1.1,16.03,8.36,19.9,15.76,6.46,16.48-5.96,22.99-11.69s26.92,.9,30.49-9.6c.08-.25,.16-.51,.23-.76,1.37-4.85,.75-10.14-2.68-14.93-.16-.22-.33-.45-.5-.67Z"/><g><ellipse class="cls-6" cx="606.19" cy="191.05" rx="9.23" ry="8.96" transform="translate(-28.35 227.51) rotate(-20.78)"/><path d="M590.51,220.74c-2.89,.4-6.31-.06-10.29-1.36-.65-.21-.99-.9-.76-1.54s.94-.98,1.59-.77c11.12,3.64,14.72-.62,16.62-4.74,2.35-5.12,5.87-9.8,15.58-9.41,4.27,.17,6.16-2.21,6.91-3.65,1.22-2.35,1.1-5.35-.28-6.99-.43-.51-.35-1.28,.18-1.72,.53-.43,1.32-.37,1.75,.14,2,2.37,2.24,6.42,.57,9.63-1.75,3.35-5.13,5.18-9.27,5.01-7.78-.31-10.81,2.81-13.16,7.94-2.02,4.39-5.13,6.87-9.43,7.46Z"/><path d="M581.83,203.38c1.01,2.42,.7,6.49,.7,6.49,0,0-3.87-1.88-5.34-3.99-1.47-2.1-1.68-4.51,.11-5.51,1.79-1,3.52,.59,4.53,3.01Z"/><g class="cls-40"><g class="cls-41"><ellipse cx="607.25" cy="190.31" rx="6.8" ry="6.62" transform="translate(9.06 407.42) rotate(-37.35)"/></g><path class="cls-35" d="M596.81,191.7c2.51,1.26,5.48,1.82,8.6,1.45,3.9-.47,7.28-2.33,9.6-4.95-1.22-4.02-5.33-6.68-9.87-6.13-5,.61-8.66,4.89-8.33,9.64Z"/></g></g></g><g><path class="cls-35" d="M633.36,136.92c5.29,3.64,12,10.34,15.13,13.58,.58,.6,.02,1.59-.81,1.44-4.68-.8-14.62-2.73-20.28-5.59-7.58-3.82-10.3-7.08-8.07-10.79,2.23-3.72,6.9-3.56,14.04,1.36Z"/><path class="cls-11" d="M596.68,166.84h0c-.19,.71,.24,1.43,.97,1.61l43.7,16.3c.73,.17,1.47-.26,1.66-.98h0c.19-.71-.24-1.43-.97-1.61l-43.7-16.3c-.73-.17-1.47,.26-1.66,.98Z"/><path class="cls-11" d="M648.51,153.08l-16.51,26.43-20.39-7.96,4.06-28.71c.22-1.53,1.8-2.52,3.29-2.06l28.21,8.7c1.54,.47,2.19,2.23,1.34,3.6Z"/></g></g></g><g><path d="M490.54,255.12c.01,.42,0,.84-.05,1.24-.05,.4-.12,.81-.22,1.22-.1,.08-.16,.17-.18,.28-.02,.11-.06,.22-.11,.32-.04,.08-.1,.17-.18,.27-.07,.1-.16,.2-.25,.3s-.18,.21-.27,.31c-.09,.11-.16,.21-.22,.32-.23,.08-.39,.24-.48,.49-.12,.05-.25,.1-.38,.16-.13,.06-.22,.16-.27,.29-.28,.15-.54,.32-.79,.51-.25,.19-.51,.35-.8,.5-.04,.04-.08,.07-.13,.09-.05,.02-.1,.04-.15,.07-.05,.02-.09,.05-.14,.09-.04,.04-.06,.08-.07,.13-.03,0-.05,0-.06-.01-.01-.01-.04-.02-.08-.03-.08,.05-.12,.12-.11,.21-.03-.01-.07-.02-.13-.02-.09,0-.18,.03-.27,.09-.09,.06-.16,.12-.22,.18-.09,.05-.2,.09-.31,.14-.12,.05-.2,.12-.25,.23-.03-.03-.08-.04-.14-.04-.07,0-.14,.02-.22,.07-.08,.04-.13,.09-.17,.14-.11,0-.21,.02-.3,.06-.1,.04-.19,.07-.29,.11-.1,.04-.2,.07-.29,.1-.1,.03-.2,.05-.3,.05-.06,0-.11-.01-.14-.04-.03-.03-.07-.05-.12-.08-.04,.03-.1,.07-.2,.11-.1,.04-.17,.06-.21,.06-.08,0-.17,0-.25-.03-.08-.02-.16-.04-.25-.07l-.24-.07c-.08-.02-.16-.03-.25-.04-.07-.06-.15-.12-.25-.18-.1-.06-.19-.08-.28-.05-.04-.11-.1-.21-.18-.29-.08-.08-.17-.15-.27-.22-.02-.01-.05-.03-.08-.04-.03-.01-.05-.02-.06-.04-.04-.02-.08-.06-.11-.13-.03-.07-.07-.1-.11-.1,0,0-.02,0-.03,.01-.01,0-.02,.01-.03,.01-.02-.07-.04-.13-.07-.19-.03-.06-.09-.1-.16-.11-.07-.19-.11-.38-.14-.58-.03-.19-.06-.38-.11-.58-.02-.06-.04-.13-.06-.22-.02-.09-.03-.16-.04-.23,0-.11,.01-.25,.04-.4,.03-.16,.06-.29,.08-.41,.08-.43,.19-.86,.34-1.27,.14-.41,.3-.82,.47-1.22,.17-.41,.35-.81,.53-1.21,.18-.4,.35-.81,.51-1.22,.03,0,.05,0,.06-.02l.03-.06s.03-.04,.04-.06c.01-.02,.04-.02,.07-.02v-.03s0-.08,.03-.11c.03-.03,.03-.08,.01-.15,.12-.14,.22-.29,.3-.46,.08-.17,.16-.34,.25-.5,.08-.17,.17-.33,.27-.49,.1-.16,.22-.3,.37-.41v-.08s-.01-.08,0-.12c.01-.04,.03-.07,.07-.08,.13-.14,.25-.28,.33-.41,.09-.14,.18-.27,.27-.4,.09-.13,.2-.26,.31-.38s.26-.23,.45-.33c.08-.04,.14-.1,.18-.17,.04-.08,.08-.13,.15-.16,.03-.02,.06-.03,.1-.03,.03,0,.07-.01,.1-.03,.13-.04,.26-.09,.39-.15s.27-.09,.41-.09c.18,0,.33,.04,.42,.14,.1,.1,.18,.22,.24,.36,.06,.14,.11,.29,.16,.44,.04,.16,.11,.29,.2,.4,.23,0,.46,.03,.7,.05,.24,.03,.45,.12,.63,.27,.02,0,.03,.01,.06,0,.04,0,.06-.02,.06-.05,0-.03,.02-.05,.06-.05h.03c.23,.13,.46,.27,.67,.42,.22,.15,.43,.31,.64,.48,.04,.03,.08,.06,.12,.08,.04,.02,.08,.05,.11,.09,.04,.04,.08,.09,.11,.15,.04,.06,.07,.11,.1,.15,.4,.64,.68,1.33,.83,2.07,.02,.08,.03,.16,.05,.23,.01,.07,.02,.15,.02,.21,0,.07,.02,.11,.05,.13,.03,.02,.05,.06,.05,.12Zm-.87,.59c0-.3-.05-.58-.14-.86,.04-.02,.06-.04,.07-.07,.01-.03,.02-.07,.01-.11v-.06s-.15-.24-.15-.24c-.01-.1-.03-.2-.07-.29-.04-.09-.08-.18-.13-.27-.05-.09-.09-.18-.14-.26-.04-.09-.08-.18-.09-.29-.13-.09-.24-.19-.34-.3-.1-.11-.19-.23-.27-.36-.05-.02-.1-.04-.15-.04-.05,0-.06-.05-.05-.12-.14-.03-.27-.08-.38-.15-.11-.07-.22-.14-.33-.23-.18-.03-.35-.07-.53-.13-.17-.05-.35-.07-.53-.07-.12,0-.24,.03-.36,.08,.04,.06,.06,.12,.06,.19,0,.07,.01,.14,.03,.21,.25,.05,.4,.19,.46,.42-.04,.02-.07,.05-.1,.09s-.06,.06-.08,.09c-.03,.03-.06,.05-.1,.07-.04,.02-.08,.04-.14,.04-.11,0-.19-.01-.25-.05-.06-.04-.15-.04-.27-.02-.13-.11-.26-.22-.39-.34-.13-.12-.27-.23-.42-.32-.02-.07-.06-.14-.11-.2-.05-.06-.1-.11-.15-.17-.05-.05-.1-.11-.14-.17-.04-.06-.07-.13-.07-.22,0-.05,0-.09,0-.11-.05-.01-.08-.02-.1-.02-.06,0-.12,.02-.17,.07-.05,.04-.11,.07-.18,.09-.06,.18-.14,.34-.25,.48-.11,.14-.23,.27-.35,.4-.12,.13-.23,.27-.33,.41-.1,.14-.17,.31-.21,.51-.24,.3-.46,.65-.65,1.03-.2,.38-.35,.75-.44,1.11-.17,.2-.3,.41-.4,.62-.09,.22-.15,.46-.15,.72-.04,.02-.07,.05-.09,.09l-.11,.23s-.04,.07-.08,.09v.06c0,.06,0,.11-.03,.16s-.05,.1-.07,.14c-.03,.04-.05,.09-.07,.13-.02,.04-.03,.09-.03,.14,0,.06,.02,.12,.05,.18-.08,.02-.14,.06-.16,.13-.02,.07-.06,.13-.1,.19-.02,.24-.05,.48-.07,.73-.02,.25-.03,.49-.03,.73,0,.28,.04,.55,.11,.83,.07,.07,.13,.14,.19,.22,.06,.08,.11,.16,.17,.23s.12,.14,.2,.19c.07,.05,.16,.09,.28,.1,0,.05,.01,.09,.04,.11,.02,.02,.04,.05,.06,.09,.16,.05,.33,.09,.51,.11,.18,.03,.35,.04,.53,.04,.12,0,.25-.02,.37-.05,.13-.03,.23-.1,.31-.19,.39-.02,.78-.12,1.16-.3,.38-.17,.73-.36,1.05-.56h.24c.08-.12,.18-.21,.3-.29,.12-.08,.25-.14,.38-.21,.02-.02,.05-.03,.09-.05s.07-.03,.09-.05c.08-.06,.17-.13,.25-.21,.09-.08,.17-.15,.26-.22,.15-.12,.31-.23,.46-.33,.16-.11,.31-.22,.46-.35s.29-.26,.42-.4c.13-.14,.24-.3,.33-.47,.05,0,.08-.02,.11-.04,.03-.03,.05-.06,.07-.09,.02-.03,.04-.06,.07-.08,.03-.02,.07-.04,.12-.04,0-.07,.01-.12,.04-.17s.06-.09,.09-.14c.03-.04,.07-.08,.1-.12s.06-.09,.09-.15v-.31c.11-.2,.19-.4,.25-.62,.05-.22,.07-.44,.07-.66Z"/><path d="M498.63,259.34c-.03,.11-.08,.21-.14,.28-.07,.08-.14,.15-.23,.21-.09,.06-.18,.12-.28,.17s-.19,.11-.28,.17h-.15c-.32,.01-.57-.06-.75-.21-.18-.15-.31-.33-.41-.56-.1-.23-.17-.47-.22-.73-.05-.26-.11-.5-.17-.71-.09,.08-.17,.17-.22,.27-.06,.1-.12,.2-.18,.3-.06,.1-.13,.19-.21,.27-.08,.08-.18,.14-.31,.17-.02,.05-.04,.11-.07,.16-.03,.05-.04,.11-.05,.17-.17,.09-.32,.2-.45,.32s-.27,.25-.4,.38c-.13,.13-.27,.25-.41,.37s-.3,.22-.47,.3c0,0-.02-.01-.05-.01-.09,0-.18,.03-.25,.07s-.16,.07-.25,.07c-.06,0-.12,0-.17-.03s-.1-.05-.15-.07c-.05-.03-.1-.05-.16-.06-.05-.01-.11-.02-.17,0-.08-.13-.18-.25-.31-.37-.13-.11-.21-.24-.25-.39-.02-.07-.03-.14-.03-.21,0-.07-.02-.14-.03-.22-.03-.11-.06-.22-.1-.34-.04-.11-.08-.23-.1-.35,.03-.2,.06-.42,.09-.67s.06-.49,.11-.73c.04-.24,.11-.48,.19-.7,.08-.22,.19-.41,.32-.57v-.08c-.02-.12,0-.23,.05-.34,.04-.11,.09-.21,.14-.31,.05-.1,.09-.2,.13-.29,.04-.1,.04-.21,.01-.33,.09-.05,.19-.09,.28-.12,.1-.03,.2-.05,.31-.05,.1,0,.19,0,.28,.04-.01,.06,.01,.1,.08,.11v.03c0,.16,0,.31-.04,.46-.03,.15-.08,.3-.13,.45-.05,.15-.1,.29-.14,.44-.05,.14-.08,.29-.1,.44-.03,0-.05,.02-.06,.05-.01,.02-.02,.04-.03,.07,0,.02-.02,.04-.03,.06-.02,.02-.04,.02-.07,.02-.04,.26-.08,.52-.12,.78-.04,.26-.06,.52-.06,.78,0,.16,.02,.32,.06,.48,.03,.16,.1,.32,.18,.46h.05c.08-.01,.15,0,.2,.04,.05,.04,.12,.07,.2,.11,.06-.02,.12-.04,.17-.07,.05-.03,.08-.07,.07-.14,.1-.01,.18-.04,.25-.08s.13-.09,.18-.14l.17-.16c.06-.05,.13-.09,.22-.12,0-.04,0-.08,.03-.1l.07-.07s.04-.05,.05-.07c.01-.03,.01-.07,0-.12,.09,0,.16-.03,.21-.07,.05-.04,.09-.08,.14-.13,.04-.05,.08-.1,.12-.15,.04-.05,.09-.1,.15-.14,.05-.11,.12-.26,.21-.45,.09-.19,.18-.38,.27-.59,.09-.2,.17-.4,.24-.58,.07-.18,.1-.32,.1-.42,0-.04-.01-.07-.03-.1-.02-.03-.03-.06-.02-.1v-.03c.06-.08,.11-.16,.16-.25,.05-.09,.1-.18,.16-.26,.06-.08,.12-.16,.18-.23,.07-.07,.15-.12,.26-.16,.12,.03,.25,.06,.38,.07,.13,.01,.25,.04,.37,.08,.01,.18,.04,.4,.07,.65,.04,.24,.1,.45,.18,.62,0,.1,0,.19,0,.28,0,.09,0,.18,0,.27,0,.15,.01,.3,.03,.46,.02,.16,.04,.3,.09,.43-.05,.11-.07,.23-.07,.36,0,.17,.04,.33,.09,.48,.06,.15,.1,.31,.13,.48,.1,.13,.24,.19,.4,.19,.04,0,.07,0,.1-.01s.05-.02,.08-.04c.06,.07,.12,.13,.17,.19,.05,.06,.11,.12,.18,.17Z"/><path d="M513.73,258.81c-.01,.11-.05,.2-.11,.26-.06,.06-.14,.12-.22,.17-.04,0-.07-.01-.11-.01-.04,0-.07,0-.11,0-.24,0-.46,.03-.67,.11-.21,.07-.42,.13-.65,.16-.08,.02-.15,.02-.21,.02-.06,0-.13,0-.2,.02-.25,.04-.51,.08-.78,.11-.28,.03-.55,.07-.83,.11-.27,.04-.54,.09-.81,.14-.26,.05-.51,.13-.74,.23-.02-.01-.05-.03-.07-.05s-.05-.03-.08-.03c-.08,0-.15,.01-.22,.04s-.14,.03-.21,.03c-.08,.05-.16,.08-.25,.1-.09,.02-.18,.04-.26,.05-.09,.01-.17,.03-.26,.06-.08,.02-.16,.07-.24,.13-.06-.03-.14-.04-.23-.04-.09,0-.15-.03-.18-.08-.17,.09-.36,.14-.55,.17-.2,.03-.39,.04-.59,.04-.13,0-.28-.02-.45-.04-.17-.03-.34-.06-.51-.12-.17-.05-.33-.11-.48-.19s-.26-.17-.34-.28c-.06-.07-.1-.15-.12-.24-.02-.09-.08-.16-.17-.2,.02-.17,.04-.34,.07-.5,.03-.16,.05-.33,.08-.5,.15-.13,.29-.27,.43-.41,.13-.15,.26-.3,.38-.46,.14-.07,.28-.16,.4-.26,.12-.1,.25-.2,.37-.31,.12-.1,.25-.21,.37-.31,.12-.1,.26-.19,.4-.27,.02-.05,.05-.1,.09-.13,.04-.03,.08-.07,.13-.1,.05-.03,.09-.07,.12-.12s.06-.09,.08-.15c.26-.16,.49-.37,.69-.61,.19-.24,.32-.51,.37-.81-.13-.1-.28-.17-.45-.19-.17-.03-.34-.05-.51-.06-.15,0-.31,0-.48,.01-.17,.01-.33,.01-.5,0-.17,.06-.34,.09-.52,.11-.18,.02-.36,.04-.53,.05-.18,.02-.35,.04-.52,.08-.17,.04-.34,.1-.5,.2-.03,0-.06,0-.09,0-.03,0-.06,0-.09,0-.25,0-.48,.05-.69,.16s-.42,.21-.63,.31c-.01,.03-.02,.05-.02,.07,0,.04,.01,.09,.03,.13,.02,.04,.03,.08,.03,.13,0,0-.01,.01-.01,.02,0,0,0,.02-.01,.02,0,.04-.02,.07-.03,.1-.01,.03-.02,.06-.04,.1-.08,.24-.12,.48-.12,.71,0,.19,0,.38,.02,.57,.01,.19,.02,.38,.01,.57,0,.24-.04,.46-.1,.67,.04,.18,.08,.36,.12,.56,.04,.2,.08,.39,.13,.58,.05,.19,.11,.38,.18,.56s.16,.35,.27,.51c0,.02,0,.03,.01,.03,.02,0,.03,0,.05,0h.09s.05,.01,.05,.04c.02,.02,.03,.04,.04,.06,0,.02,.02,.03,.05,.05,.02,.02,.02,.05,0,.09,0,.15-.04,.29-.1,.42-.07,.13-.1,.27-.12,.42-.09,.02-.18,.04-.25,.04-.13,0-.25-.04-.35-.1-.1-.06-.2-.13-.28-.22-.09-.09-.17-.18-.25-.27s-.17-.17-.26-.23c-.06-.21-.12-.44-.17-.69-.06-.25-.14-.47-.26-.64,.03-.07,.04-.15,.04-.25,0-.15-.01-.29-.05-.44-.04-.14-.05-.29-.04-.44,0-.08,0-.16,.02-.25,.02-.08,.03-.16,.03-.25,0-.13-.01-.25-.05-.37-.04-.12-.05-.24-.05-.37,0-.06,.02-.12,.04-.17,.02-.06,.04-.11,.08-.15-.04-.09-.05-.17-.04-.26,0-.13,.02-.25,.04-.36s.03-.22,.04-.33c0-.06,0-.12-.02-.17s-.02-.11-.04-.16l-.1-.03s-.09,.01-.13,.04c-.04,.02-.08,.05-.11,.08-.03,.03-.06,.06-.08,.08-.02,.02-.05,.03-.07,.03-.02,0-.03,0-.05,0-.02,0-.04,0-.05,0-.02,0-.04,.02-.09,.05-.04,.03-.09,.06-.15,.1s-.11,.07-.16,.1c-.05,.03-.09,.06-.13,.06-.08-.01-.15-.04-.2-.08-.05-.04-.1-.08-.14-.12s-.09-.08-.14-.11c-.05-.03-.1-.04-.17-.04-.02-.04-.04-.09-.04-.14,0-.05,0-.1,0-.16v-.18c.05-.1,.12-.18,.2-.25,.09-.07,.18-.12,.28-.17l.3-.14c.1-.05,.19-.11,.27-.17h.1c.14,0,.26-.03,.36-.09,.1-.06,.2-.13,.29-.21,.09-.08,.18-.16,.28-.25,.09-.08,.2-.15,.31-.2,.09,.04,.17,.06,.27,.09s.19,.04,.29,.04c.1,0,.2-.02,.31-.05,.11-.03,.19-.09,.25-.17,.04,.01,.07,.02,.1,.03,.03,0,.06,0,.1,0,.12,0,.23-.02,.34-.06,.11-.04,.22-.1,.33-.16,.15,0,.3-.01,.45-.04,.15-.03,.3-.06,.45-.1,.15-.03,.3-.07,.45-.09,.15-.03,.3-.04,.45-.04,.25,0,.5-.03,.75-.09,.24-.06,.49-.08,.75-.08,.18,0,.35,.01,.52,.03,.17,.01,.35,.02,.52,0,.1,.04,.19,.08,.27,.11,.08,.03,.18,.04,.31,.02,.25,.2,.48,.42,.69,.69v.19c0,.17-.02,.34-.07,.5-.05,.17-.11,.33-.18,.49-.07,.16-.14,.32-.22,.47-.08,.16-.16,.31-.23,.46-.49,.45-.98,.9-1.46,1.35-.49,.44-.99,.88-1.51,1.29-.01,.07-.03,.14-.06,.2-.03,.06-.04,.12-.05,.19,0,.04,0,.07,.01,.09,.05,.01,.1,.04,.15,.08,.04,.04,.06,.09,.04,.16h.1s.06,.01,.06,.04h.18c.29,.01,.58,0,.87-.04,.29-.04,.58-.08,.88-.12s.59-.09,.88-.13c.29-.04,.58-.07,.87-.08,.07-.02,.14-.04,.22-.06s.14-.05,.21-.09h.03c.05,0,.09,.01,.12,.04,.03,.03,.07,.05,.12,.05,.04,0,.08,0,.12-.02,.04-.02,.09-.03,.13-.04,.11-.03,.22-.05,.34-.06,.12,0,.24-.02,.35-.04,.44-.05,.89-.08,1.32-.11,.44-.02,.87-.09,1.31-.2,.04,.05,.09,.08,.16,.1,.07,.02,.14,.03,.22,.05s.15,.04,.21,.05c.07,.02,.11,.06,.14,.13Z"/><path d="M527.6,253.84c0,.12-.02,.24-.05,.37s-.09,.25-.15,.35c-.1,.02-.19,.05-.27,.11-.08,.06-.14,.09-.19,.11-.1,.02-.22,.03-.35,.03-.13,0-.26,0-.36,.02-.21,.02-.41,.05-.61,.08s-.4,.08-.6,.13c-.02,0-.03,0-.05,0-.02,0-.02,.01-.02,.03,0,.02,0,.03,.01,.04s.01,.03,.01,.04c0,.02-.02,.03-.07,.04-.08,0-.14-.02-.17-.07-.24,.07-.49,.13-.73,.2-.24,.07-.49,.14-.73,.2-.12,.03-.24,.05-.36,.08-.12,.03-.24,.06-.36,.1-.06,.02-.12,.04-.18,.08l-.18,.12s-.07-.01-.1-.01-.06,0-.09,0c-.13,0-.27,.03-.41,.08-.15,.05-.27,.12-.38,.21h-.08c-.08,0-.13,0-.16-.03-.07,0-.11,.02-.12,.06-.01,.05-.04,.09-.08,.13-.26,.03-.52,.08-.77,.15-.25,.07-.5,.15-.74,.24-.24,.09-.49,.17-.74,.25-.25,.08-.5,.15-.75,.2-.03,.15-.04,.32-.03,.51,0,.15,.02,.32,.05,.51,.03,.19,.1,.35,.19,.49v.02s-.01,.06-.04,.08c-.03,.02-.04,.04-.04,.08,0,.19,.03,.38,.08,.55,.05,.17,.1,.34,.15,.5,.05,.16,.1,.33,.14,.49,.05,.16,.07,.33,.08,.5,0,.04,0,.09,0,.13s0,.08-.01,.13c.02,.07,.06,.12,.12,.16,.05,.04,.1,.09,.14,.15,0,.04,.01,.07,.01,.1v.11c0,.13,0,.24-.03,.34-.03,.1-.06,.19-.11,.28-.04,.09-.09,.17-.14,.26s-.1,.18-.14,.29c-.08,.02-.14,.03-.18,.03-.12,0-.21-.03-.28-.08-.07-.06-.14-.13-.2-.21-.06-.08-.11-.17-.16-.26-.05-.09-.11-.16-.18-.22,0-.04,.01-.07,.02-.1,0-.03,0-.06,0-.1,0-.15-.03-.29-.09-.43-.05-.14-.11-.27-.18-.4-.01-.25-.05-.5-.1-.75s-.12-.49-.21-.72c.01-.09,.02-.18,.03-.26,0-.09,0-.17,0-.25,0-.22-.02-.43-.05-.65-.03-.21-.04-.43-.03-.65-.02-.04-.05-.07-.07-.09-.02-.03-.04-.06-.06-.09h-.05c-.12,0-.23,.02-.33,.04-.11,.02-.21,.03-.32,.04-.04,0-.07,0-.1,0-.03,0-.07,0-.1-.01-.09-.08-.15-.17-.2-.27-.05-.1-.07-.21-.08-.32,0-.16,.04-.31,.13-.45,.19-.05,.38-.11,.57-.18,.19-.07,.37-.15,.54-.24,.02-.11,.03-.22,.03-.34,0-.11,.04-.22,.11-.32-.02-.06-.06-.11-.11-.16-.05-.05-.08-.1-.08-.17,0-.04,0-.08,.02-.15,.07-.08,.13-.19,.15-.32,.03-.13,.05-.26,.07-.4,.02-.14,.04-.28,.06-.43,.02-.14,.07-.27,.13-.38-.02-.06-.03-.12-.04-.2,0-.07-.02-.13-.02-.19,0-.09,0-.18,0-.27,0-.09,.03-.18,.06-.26-.09-.09-.16-.21-.22-.34-.06-.13-.09-.26-.09-.38,0-.25,.11-.4,.36-.48,0-.03-.02-.05-.02-.08,0-.02,0-.04,0-.07,0-.07,.02-.13,.05-.19s.07-.12,.09-.18c-.04-.1-.06-.18-.06-.24,0-.06,0-.11,.03-.16,.02-.05,.04-.1,.05-.16,.02-.08,.04-.14,.05-.2,0-.06,.03-.11,.06-.16,.03-.04,.07-.08,.12-.1,.05-.02,.13-.04,.23-.04,.17,0,.33,.04,.49,.14,.16,.1,.28,.21,.37,.33,.08,0,.16-.03,.22-.06,.06-.03,.13-.05,.18-.08s.12-.05,.18-.07c.06-.02,.14-.03,.24-.02,.02-.05,.06-.09,.12-.11s.12-.04,.18-.05c.06-.01,.12-.03,.17-.05,.05-.02,.09-.07,.1-.13,.03,.02,.07,.03,.1,.03,.04,0,.08,0,.11-.02,.04-.01,.08-.02,.13-.02,.05,0,.08,.01,.12,.04,.2-.11,.41-.19,.63-.25,.23-.05,.45-.09,.67-.1,.52-.3,1.08-.5,1.66-.62,.58-.12,1.17-.19,1.76-.2,.08,0,.17,0,.25-.01s.16,0,.24,.01c.08,.01,.18,.04,.28,.07,.1,.04,.21,.08,.31,.13,.1,.05,.2,.11,.3,.17s.17,.12,.23,.17c.06,.13,.1,.26,.1,.39,0,.06,0,.12,0,.17s0,.11,0,.17c0,.09,.02,.19,.07,.3-.02,0-.06,0-.12,0-.07,0-.13,.02-.17,.05-.04,.03-.09,.07-.12,.1-.04,.04-.07,.07-.11,.1-.03,.03-.07,.05-.1,.05-.06,0-.11,0-.16-.03-.04-.02-.09-.04-.13-.07-.04-.02-.09-.05-.13-.06-.05-.02-.1-.02-.16-.01v-.04c0-.08-.03-.14-.09-.16-.05-.02-.1-.06-.13-.11-.12,0-.23-.02-.34-.04-.11-.02-.23-.03-.34-.02-.15,0-.27,.06-.35,.17-.04-.01-.07-.03-.1-.05-.03-.02-.06-.03-.11-.02h-.03c-.41,.01-.82,.07-1.22,.16-.4,.1-.79,.21-1.18,.34s-.78,.28-1.16,.43c-.39,.15-.78,.28-1.16,.4-.09,.12-.18,.21-.28,.27-.1,.06-.2,.11-.29,.15-.09,.04-.19,.08-.28,.12-.09,.04-.17,.1-.23,.19-.06,.08-.11,.2-.14,.34-.03,.15-.04,.34-.01,.6-.04,.05-.06,.1-.06,.15,0,.05-.01,.1-.02,.15,0,.05-.02,.09-.03,.14-.01,.04-.04,.09-.08,.12,.02,.07,.03,.15,.04,.22,0,.08,.02,.15,.02,.22,0,.31-.04,.62-.14,.92,.04,.06,.06,.12,.06,.2,0,.08,0,.16-.03,.22-.02,.07-.03,.14-.03,.22,0,.08,.02,.15,.05,.2,.05,0,.07,.01,.08,.04h.07c.14,0,.26-.04,.35-.11,.1-.07,.21-.11,.32-.11,.02,0,.05,0,.08,.02,.03,.01,.06,.02,.08,.02,.05,0,.08-.02,.07-.06,0-.04,0-.06,.06-.08l.41-.08c.26-.05,.51-.11,.74-.18,.23-.07,.46-.17,.69-.3,.05,.02,.12,.03,.18,.03,.06,0,.13-.01,.2-.03,.07-.02,.13-.03,.2-.03,.05,0,.1,0,.13,.02,.04-.03,.1-.06,.17-.08,.07-.02,.11-.06,.11-.13h.02s.05,0,.07,.02c.02,.02,.04,.02,.07,.02h.05c.16-.08,.3-.14,.43-.18,.21-.06,.44-.11,.69-.16,.25-.05,.46-.12,.65-.24,.22,0,.44-.05,.65-.12,.21-.08,.42-.12,.64-.12,.1,0,.19,.01,.28,.04,.08-.05,.17-.09,.27-.12s.19-.07,.26-.13c.05,0,.09,.01,.14,.01,.05,0,.1,0,.16,0,.23,0,.45-.04,.66-.11,.21-.07,.42-.12,.65-.16,.06,.06,.09,.12,.11,.18,.02,.06,.03,.13,.03,.19Z"/><path d="M534.34,259.4c-.02,.1-.07,.19-.14,.26-.07,.06-.16,.12-.26,.16-.1,.04-.2,.07-.3,.08-.1,.01-.2,.02-.28,.02-.04,0-.08,0-.11,0-.03,0-.07,0-.11,0-.04,0-.06,.02-.06,.06s-.02,.06-.06,.08c-.04-.01-.08-.02-.12-.03s-.08,0-.12,0c-.05,0-.11,0-.16,.02-.05,0-.1,.01-.14,.01-.06,0-.1,0-.13-.02-.03-.01-.05-.03-.07-.05-.02-.02-.04-.04-.06-.06-.02-.02-.05-.04-.09-.05-.06-.02-.1-.02-.13,0-.03,.02-.09,0-.16-.06-.09-.07-.18-.16-.24-.27-.07-.11-.13-.22-.2-.34-.06-.12-.13-.24-.21-.35s-.16-.22-.25-.31h-.09c-.14,0-.23,.06-.28,.18-.04-.02-.08-.05-.12-.08s-.08-.06-.13-.08c-.18,.06-.36,.11-.55,.15-.19,.04-.38,.07-.57,.07h-.16s-.1,0-.15-.01c-.08,.03-.14,.07-.21,.11-.06,.04-.13,.07-.21,.07-.05,0-.1-.01-.16-.04-.05,0-.07,.02-.06,.06,0,.04-.02,.06-.07,.06h-.1c-.11,0-.21,.01-.32,.02-.1,.01-.21,.02-.32,.02-.15,0-.3-.01-.45-.04-.04,.02-.08,.04-.13,.04-.03,.02-.05,.04-.07,.07-.01,.03-.03,.06-.04,.09-.02,.03-.03,.05-.06,.07s-.06,.03-.11,.02c-.01,.09-.05,.16-.11,.21-.06,.05-.09,.13-.09,.24-.08,.05-.15,.1-.2,.17-.05,.07-.1,.14-.16,.22-.05,.08-.11,.15-.16,.22-.06,.07-.13,.12-.21,.16-.04,.04-.05,.12-.03,.21-.08,.07-.18,.13-.31,.19-.12,.05-.24,.08-.34,.09-.22,0-.38-.11-.47-.33,0-.07,0-.15,.01-.24,0-.09,.02-.17,.05-.25,.02-.08,.05-.15,.1-.21,.04-.06,.11-.11,.19-.14,0-.07-.03-.11-.07-.14-.05-.02-.07-.07-.06-.14,.21-.1,.38-.23,.53-.39,.15-.16,.28-.33,.41-.51,.12-.18,.25-.36,.37-.54,.13-.18,.27-.35,.43-.49v-.23c.22-.24,.36-.52,.42-.82,.08-.02,.14-.06,.16-.12,.03-.06,.04-.13,.03-.21,.04,0,.06-.02,.07-.05,.01-.03,.04-.04,.1-.03,.06-.18,.14-.35,.22-.5,.08-.15,.16-.3,.24-.46,.08-.15,.15-.31,.21-.48s.1-.35,.13-.55c.11-.01,.17-.06,.17-.16,0-.09,.02-.18,.03-.25,.11-.11,.2-.23,.25-.38,.05-.14,.1-.29,.14-.45,.04-.15,.09-.31,.14-.46,.05-.15,.13-.29,.24-.41v-.03s-.02-.06-.05-.07c-.03,0-.05-.03-.05-.07,0,0,.01-.02,.01-.02,.09-.04,.16-.1,.2-.19,.04-.09,.11-.15,.2-.19,.16,.12,.31,.2,.43,.22s.29,.04,.49,.05c.1,.1,.16,.23,.18,.37,.02,.15,.04,.29,.09,.43,.07,.24,.14,.47,.22,.69,.08,.23,.14,.46,.18,.69,.03,.14,.07,.27,.14,.4,.06,.12,.11,.25,.14,.39,.02,.1,.02,.22,0,.35-.01,.13,0,.24,.06,.34l.08,.18c.04,.08,.08,.17,.1,.25s.06,.18,.08,.27c.07,.22,.13,.46,.19,.72,.06,.26,.14,.49,.25,.69,.04,.07,.1,.12,.18,.15,.08,.03,.17,.04,.27,.05,.1,0,.2,0,.29,0,.1,0,.18-.01,.25-.01h.12s.09,0,.14,.02c.03,.06,.05,.11,.05,.16,0,.09-.03,.16-.09,.21-.06,.05-.09,.11-.09,.18,0,.04,.02,.08,.05,.12-.03,0-.08,0-.14,0-.18,0-.35,.04-.52,.1,.06,.12,.15,.23,.26,.31,.11,.08,.22,.16,.33,.23,.07-.06,.16-.09,.24-.1,.09,0,.18,.02,.26,.05,.08,.04,.17,.06,.26,.05,.07,0,.12-.01,.15-.04,.06,.06,.11,.13,.16,.2,.04,.07,.09,.13,.15,.19Zm-3.65-1.69c-.02-.12-.05-.22-.08-.27s-.07-.12-.09-.2c-.03-.1-.06-.21-.07-.33-.01-.12-.04-.23-.06-.34-.06-.25-.13-.5-.2-.75s-.16-.5-.27-.73c.03-.05,.04-.09,.04-.12v-.03c-.07-.07-.12-.16-.16-.27-.03-.11-.07-.21-.09-.32-.03-.11-.07-.21-.11-.3-.04-.09-.11-.17-.21-.22-.02,.05-.03,.1-.03,.16,0,.05,0,.1,.02,.15,.01,.04,.02,.09,.02,.14-.08,.04-.13,.1-.16,.18-.03,.08-.09,.14-.16,.19-.06,.24-.14,.47-.25,.68-.11,.21-.22,.43-.35,.64-.12,.21-.24,.43-.35,.64-.11,.21-.2,.44-.26,.67-.1,.07-.16,.16-.2,.26-.03,.11-.05,.21-.04,.31,.07,.04,.15,.05,.24,.06,.09,0,.18,0,.26,0,.08,0,.17,0,.24,.02,.08,.01,.15,.05,.21,.11,.1-.03,.21-.06,.33-.07,.12-.01,.22-.05,.29-.1,.15,.05,.32,.07,.5,.07,.09,0,.18-.01,.27-.03,.09-.02,.17-.04,.26-.06,.07,.01,.12,.04,.16,.07,.04,.03,.1,.04,.17,.04,.04-.03,.06-.06,.07-.1,0-.03,.02-.07,.05-.1Z"/><path d="M545.31,258.52c-.04,.12-.04,.24-.02,.36-.02,.03-.05,.05-.08,.06-.03,0-.06,.02-.09,.03-.03,.01-.06,.03-.07,.05-.02,.02-.02,.05,0,.11-.25,.02-.49,.08-.72,.17-.23,.1-.45,.2-.67,.31-.12-.03-.22-.08-.3-.13s-.19-.08-.32-.09c-.14-.25-.27-.51-.38-.79s-.18-.56-.19-.84c0-.21,.03-.4,.1-.57,0-.22,0-.44,.04-.66,.03-.22,.07-.43,.12-.65,.04-.21,.08-.43,.12-.65,.03-.22,.05-.44,.04-.66v-.25s-.04,.02-.06,.05c-.02,.03-.04,.07-.06,.11-.02,.04-.03,.08-.05,.12-.01,.04-.02,.06-.03,.07-.13,.1-.23,.22-.3,.37-.07,.15-.14,.29-.23,.41-.1,.16-.21,.31-.33,.47-.12,.15-.26,.27-.43,.36v.02s0,.06-.03,.08c-.02,.02-.03,.05,0,.11-.19,.07-.37,.16-.53,.27-.16,.12-.3,.26-.4,.43-.15,.04-.29,.1-.43,.16-.13,.07-.27,.14-.4,.22-.06,.03-.12,.07-.19,.12-.07,.04-.14,.08-.21,.09-.06,.02-.14,.04-.25,.05-.1,0-.21,.02-.32,.03-.11,0-.22,.02-.33,.02h-.25s-.09,0-.15-.04c-.06-.03-.13-.07-.2-.12-.07-.04-.15-.08-.23-.12-.08-.04-.15-.07-.22-.08-.07-.19-.16-.36-.27-.51-.12-.15-.24-.3-.36-.45-.04-.18-.1-.36-.17-.55-.07-.19-.19-.35-.35-.47,.04-.05,.05-.11,.05-.18,0-.08-.02-.16-.06-.23-.04-.07-.06-.16-.06-.24,0-.06,0-.1,0-.13-.08,.09-.14,.21-.17,.34-.03,.14-.04,.26-.04,.38,0,.09,.02,.17,.04,.24-.07,.11-.12,.24-.13,.39-.02,.16-.02,.29-.02,.41,0,.15,.02,.29,.05,.43-.12,.12-.18,.27-.17,.44,0,.1,.03,.18,.08,.25,0,.03,0,.05-.02,.07-.01,.01-.03,.03-.05,.03-.02,0-.04,.02-.06,.03-.02,.01-.03,.03-.03,.06,0,.04,0,.08,0,.12,0,.04,0,.09,0,.13,0,.1,0,.21,0,.32,0,.11,0,.22,0,.33,0,.22,.03,.37,.08,.46,.04,.09,.1,.16,.17,.2,.07,.04,.14,.08,.22,.13,.08,.04,.16,.13,.24,.25-.02,.07-.06,.12-.12,.16-.06,.04-.11,.08-.16,.13-.05,.04-.09,.09-.13,.14-.04,.05-.05,.13-.04,.22h-.06c-.1,0-.2,.02-.29,.05-.09,.03-.19,.05-.29,.05-.02,0-.05,0-.07,0-.02,0-.05,0-.07,0l-.12-.06s-.08-.03-.12-.03c-.04,0-.09,0-.15,.03-.12-.33-.21-.68-.27-1.03-.07-.36-.1-.71-.11-1.05,0-.04,0-.08,.03-.12,.02-.04,.05-.05,.09-.04v-.21c-.01-.23,0-.46,.04-.68,.04-.22,.05-.45,.04-.69,0-.07,0-.13-.01-.2,0-.07-.01-.13-.02-.19,.04-.13,.07-.26,.11-.39,.04-.13,.06-.27,.05-.41,0-.06-.02-.13-.04-.21,.06-.04,.1-.1,.13-.18,.03-.07,.05-.15,.06-.23,.01-.09,.02-.17,.03-.25,0-.08,.01-.16,.02-.22,.07-.15,.11-.31,.11-.48,0-.17,.04-.33,.1-.48,0-.03-.01-.08-.02-.16,0-.15,.02-.3,.06-.45,.05-.15,.14-.27,.3-.36,.14,.05,.3,.07,.49,.07,.18,0,.34-.04,.5-.09,.05,.01,.09,.03,.13,.05s.08,.04,.12,.05c.04,.02,.09,.03,.13,.04,.05,0,.1,0,.16,0,.08,.21,.16,.43,.22,.65,.06,.22,.11,.45,.15,.68,.02,.1,.03,.2,.03,.31s0,.22,.03,.31c0,.06,.03,.11,.06,.16,.03,.05,.06,.1,.1,.16s.06,.12,.08,.2c.02,.07,.03,.17,.02,.28,.09,.19,.19,.37,.3,.55,.11,.17,.23,.34,.35,.51,.07,.02,.13,.05,.19,.08,.05,.03,.09,.08,.11,.16,.07,0,.13,0,.19,.03l.2,.05c.29-.1,.56-.22,.8-.38,.25-.16,.51-.29,.78-.4,.33-.33,.61-.69,.85-1.09,.24-.4,.47-.79,.71-1.18v-.25s.08-.05,.11-.09c.03-.03,.08-.06,.13-.08,0-.09,.02-.18,.06-.26,.03-.09,.07-.17,.11-.25,.04-.08,.08-.16,.1-.24,.03-.08,.04-.16,.04-.25,0-.05,0-.1-.02-.13,.11-.11,.25-.17,.41-.18,.15,0,.31,.03,.47,.09,.16,.07,.31,.13,.45,.18,.09,.18,.16,.36,.21,.56,.05,.2,.08,.4,.1,.61,.02,.21,.03,.42,.04,.62l.02,.79c0,.06-.03,.1-.06,.13-.03,.03-.06,.07-.07,.12v.11s0,.07,0,.11c0,.16-.01,.32-.04,.49-.03,.22-.08,.44-.13,.66-.05,.22-.08,.44-.07,.67,0,.08,0,.16,.02,.25s.03,.16,.05,.24c-.04,.07-.05,.15-.05,.26,0,.12,.03,.23,.07,.33,.04,.1,.1,.2,.16,.29,.11,0,.21,0,.32-.02,.11,0,.22-.02,.33-.02,.11,0,.21,0,.3,.02,.09,.02,.19,.05,.29,.11Z"/><path d="M548.17,258.32c-.04,.06-.08,.12-.13,.17-.05,.05-.1,.1-.15,.16-.05,.02-.11,.04-.18,.04-.07,0-.13,0-.18,0-.06,0-.11,0-.16,0-.05,0-.09,.02-.12,.05-.06-.01-.11-.04-.14-.08s-.09-.06-.16-.07c-.03,0-.06,0-.09,0-.12-.12-.23-.25-.33-.39-.1-.14-.19-.27-.28-.39-.01-.27-.04-.55-.09-.83,0-.07-.02-.13-.04-.2-.02-.07-.03-.13-.04-.19,0-.07,0-.15,.01-.22,0-.07,.02-.14,.02-.2,.02-.22,.05-.43,.09-.64,.03-.21,.06-.42,.09-.64,.03-.19,.04-.4,.03-.61,0-.21-.05-.41-.12-.59v-.06c0-.06,.02-.11,.03-.15,.02-.04,.03-.09,.04-.14,.01-.08,0-.14-.06-.18,.02-.06,.06-.1,.11-.12,.05-.02,.08-.06,.09-.13,0-.03,0-.06,0-.09,.06-.02,.12-.05,.19-.07,.06-.02,.13-.02,.19,0,.1,.01,.19,.04,.27,.09,.08,.05,.15,.1,.22,.16,.13,.35,.19,.73,.18,1.13-.01,.4-.04,.8-.08,1.2-.04,.4-.07,.8-.07,1.18,0,.38,.06,.74,.21,1.06h.02s.07,0,.09-.03c.02-.03,.05-.05,.09-.04,.03,.01,.05,.02,.06,.02,.03,.15,.09,.29,.16,.42,.07,.13,.15,.26,.24,.4Z"/><path d="M555.51,256.79c0,.08-.03,.14-.09,.19s-.09,.1-.09,.16c0,.03,.02,.07,.05,.11-.11,0-.18,.04-.22,.11-.04,.07-.07,.14-.11,.23h-.15s-.07,.01-.09,.03c-.02,.01-.04,.04-.06,.06-.02,.03-.04,.07-.07,.12-.15,.03-.28,.08-.42,.15-.13,.07-.26,.14-.39,.21-.12,.08-.25,.15-.38,.22-.13,.07-.26,.13-.4,.18-.07,.11-.16,.21-.29,.28h-.03s-.07,0-.1-.01-.06-.03-.1-.02c-.02,0-.04,0-.05,.01-.23,.16-.48,.24-.77,.24-.08,0-.15,0-.22-.01-.07,0-.14-.01-.22-.01-.02,0-.04,0-.04,.02l-.02,.05s-.02,.03-.03,.05-.04,.02-.09,.02c-.08,0-.17,0-.25-.03-.08-.02-.17-.02-.27,0-.18-.09-.32-.18-.42-.27-.1-.09-.2-.22-.29-.39-.04-.08-.09-.16-.16-.23-.07-.07-.12-.15-.15-.24,0-.03-.02-.08-.04-.16-.02-.08-.03-.16-.05-.25-.02-.09-.03-.17-.05-.25-.01-.08-.02-.14-.02-.17,0-.09,0-.18,.01-.26,0-.09,.02-.17,.03-.26,.04-.29,.06-.57,.08-.86,.01-.29,.07-.57,.17-.84-.02-.08-.03-.16-.03-.23v-.24c-.01-.14-.03-.26-.07-.36,.06-.1,.09-.21,.08-.33,0-.13-.06-.21-.18-.23v-.03c0-.16-.06-.28-.17-.36,0-.26,.05-.46,.19-.59,.13-.13,.31-.25,.53-.35,.03-.05,.04-.08,.03-.11,.05,.01,.1,.03,.15,.04,.05,.01,.09,.02,.14,.02,.08,0,.15-.01,.21-.04,.03,.09,.09,.14,.18,.16,.1,.02,.18,.04,.24,.07v.14c0,.23,.07,.45,.19,.65-.03,.06-.05,.12-.05,.19,0,.07,0,.13,0,.19,0,.09,0,.18,.02,.27,0,.09,.02,.17,.02,.26,0,.09,0,.18-.02,.27-.02,.09-.06,.17-.13,.24,0,.1,0,.21,0,.33,0,.12,0,.25-.01,.38,0,.13-.03,.25-.05,.37-.03,.12-.07,.22-.13,.29,0,.11,0,.23,0,.34,0,.12,0,.23,0,.33,0,.16,.02,.36,.04,.58,.02,.22,.08,.41,.17,.55,.04,.06,.12,.1,.23,.13,.11,.03,.2,.04,.27,.04,.08,0,.17-.02,.26-.05,.09-.03,.15-.08,.19-.14,.05,0,.08,.03,.09,.06,.02,.04,.04,.07,.08,.09,.43-.19,.87-.37,1.3-.55,.43-.17,.86-.38,1.27-.6,.06,.03,.13,.04,.2,.04,.08,0,.15-.01,.23-.03,.08-.02,.15-.03,.23-.03h.08s.02,.08,.03,.1Z"/><path d="M560.92,251.84c0,.07-.03,.12-.08,.17-.06,.05-.08,.08-.08,.1,0,.04,0,.08,.03,.09,.02,.02,.02,.04,.02,.06v.06c-.07,.08-.13,.16-.16,.25-.04,.09-.06,.18-.09,.27s-.04,.19-.06,.29c-.02,.1-.04,.19-.07,.28-.04,.09-.08,.17-.14,.23-.06,.07-.11,.14-.14,.22-.06,.14-.1,.28-.13,.42s-.09,.27-.19,.4v.06c0,.05,.01,.1,.05,.13-.14,.19-.25,.41-.33,.67s-.14,.53-.19,.81c-.05,.28-.09,.56-.12,.84-.03,.28-.07,.53-.12,.76,.04,.16,.11,.32,.19,.46,.08,.14,.17,.29,.25,.45,.15,.03,.3,.08,.45,.14,.14,.06,.25,.17,.31,.32-.01,.15-.06,.27-.14,.35-.08,.08-.18,.17-.3,.26-.09-.03-.16-.05-.21-.07-.05-.02-.13-.02-.24,0-.15-.11-.29-.19-.42-.26-.13-.06-.25-.18-.35-.34-.02-.02-.04-.03-.07-.03h-.1c-.04-.08-.09-.18-.15-.28-.06-.1-.11-.2-.17-.31-.06-.11-.11-.21-.15-.32-.04-.11-.06-.21-.07-.29,0-.38,.02-.76,.08-1.14,.06-.38,.09-.76,.08-1.15v-.11c-.16,.04-.31,.1-.45,.17-.15,.07-.3,.13-.45,.17-.05,.02-.08,.04-.09,.08,0,.04-.03,.07-.07,.09-.08,0-.15,.02-.22,.02-.07,0-.13,0-.2,.01-.13,0-.27,0-.41,0-.14,0-.28-.03-.42-.06-.14-.03-.27-.08-.39-.15-.12-.06-.23-.15-.32-.25-.02,0-.03,.02-.06,.02-.02,0-.05,.01-.07,.01-.02,0-.05,0-.07,0-.02,0-.04-.01-.06-.02-.06-.08-.12-.17-.16-.26l-.12-.29c-.04-.09-.09-.19-.13-.27-.05-.09-.11-.17-.19-.24-.03-.13-.04-.26-.04-.39,0-.13,0-.27,.02-.39,.02-.13,.04-.25,.08-.38-.03-.09-.06-.18-.07-.28s-.02-.19-.02-.29c0-.11,0-.23,.02-.35,.02-.12,.06-.23,.11-.33s.12-.19,.22-.26c.09-.07,.21-.11,.35-.11,.15,0,.3,.03,.43,.11,.13,.07,.26,.15,.39,.23,.02,.09,.03,.18,.04,.26,0,.08,.02,.18,.02,.27,0,.18,0,.36-.01,.54-.01,.18-.02,.37-.01,.55,0,.19,.03,.37,.09,.54,.05,.17,.15,.32,.28,.47h.05c.06-.01,.12,0,.16,.03,.05,.03,.1,.04,.16,.04,.05,0,.1-.02,.12-.07,.03-.04,.07-.06,.11-.06,.05,0,.08,0,.1,.02,.02,.01,.04,.02,.06,.02,.08,0,.18-.04,.29-.1,.11-.06,.17-.13,.2-.21,.03,.02,.07,.03,.12,.03,.06,0,.12-.02,.17-.06,.05-.04,.12-.06,.21-.06,.05,0,.06-.03,.05-.08-.01-.06,0-.09,.04-.11,.09-.04,.19-.1,.3-.17,.11-.07,.2-.12,.27-.14,.04-.1,.08-.19,.14-.28,.06-.09,.11-.17,.17-.25,.02-.17,.06-.34,.12-.5s.13-.32,.21-.47c.07-.16,.14-.32,.21-.48,.07-.16,.11-.32,.13-.49,.08-.08,.15-.17,.19-.27,.05-.1,.09-.2,.12-.29,.08-.02,.17-.04,.29-.05,.11,0,.21-.01,.3-.01h.2s.06,.08,.1,.12l.12,.11c-.07,.11-.1,.21-.09,.32,0,.08,.02,.16,.06,.24s.08,.15,.13,.21Z"/></g><g><path d="M592.48,249.09c0,.14-.01,.28-.04,.42-.03,.13-.06,.27-.08,.42,0,.01-.01,.04,0,.08,0,.04,0,.08,.01,.12,0,.04,.02,.08,.04,.11-.07,.15-.12,.3-.16,.46-.03,.16-.06,.33-.09,.49l-.08,.5c-.03,.17-.06,.33-.11,.49v.03s.01,.07,.03,.1c.02,.03,.03,.06,.03,.1v.04c-.09,.3-.15,.62-.2,.94-.04,.32-.12,.62-.23,.9,.02,.07,.03,.13,.03,.16,0,.08,0,.15-.02,.21-.02,.06-.04,.12-.07,.17l-.07,.14s-.04,.09-.05,.14c0,.03,0,.06,0,.09v.09c0,.17,0,.31,0,.43,0,.12-.05,.26-.15,.4,0,.19-.02,.37-.05,.54s-.07,.35-.13,.53c-.03,.15-.07,.29-.12,.44-.05,.15-.08,.29-.1,.43-.01,.07-.01,.16,0,.26,.01,.1,.02,.2,.02,.28,0,.17,0,.33,0,.49,0,.16-.03,.32-.06,.47,.02,.11,.07,.21,.13,.29,.06,.09,.1,.19,.12,.29,.02,.02,.04,.03,.07,.03,.01,0,.03,0,.05-.01,.02,0,.04-.01,.06-.01,.03,0,.05,0,.07,.02,.02,.06,.04,.11,.04,.15,0,.09-.04,.16-.12,.23,0,.04,.01,.08,.01,.11v.11c0,.05,0,.12,0,.2,0,.08-.05,.12-.12,.12-.04,0-.05-.02-.05-.06,0-.04-.02-.07-.05-.08-.04,.02-.08,.02-.11,.02-.06,0-.11,0-.15-.03l-.11-.06s-.08-.04-.12-.06c-.04-.02-.09-.02-.15-.01-.06-.11-.13-.21-.2-.3-.07-.1-.16-.18-.25-.26-.06-.17-.09-.35-.11-.53-.02-.18-.06-.36-.13-.52,0,0,.02-.03,.03-.07l.04-.11s.03-.07,.04-.11c.01-.04,.02-.06,.01-.08,0-.04,0-.08-.03-.11-.02-.03-.03-.07-.04-.1,.05-.17,.08-.35,.09-.54,.01-.2,.05-.37,.13-.51,0-.07,.01-.16,.02-.25,0-.1,.02-.19,.03-.28,.02-.09,.04-.18,.07-.26,.03-.08,.08-.16,.14-.21-.02-.04-.03-.08-.03-.12,0-.05,0-.09,0-.12,0-.17,.01-.34,.05-.5,.04-.16,.08-.33,.13-.5,.01-.05,.03-.1,.05-.15,.02-.05,.03-.11,.05-.16,0-.01,0-.03,0-.04,0-.01,0-.03,0-.04,0-.09-.02-.17-.04-.25,.04-.03,.07-.07,.09-.12,.01-.05,.03-.1,.04-.15,0-.05,.02-.11,.03-.16,.01-.05,.04-.09,.07-.13v-.05c0-.25,.02-.5,.09-.74,.07-.24,.13-.48,.18-.72v-.04s0-.05-.02-.06c-.02-.01-.02-.04-.02-.06v-.02c.01-.06,.03-.13,.05-.19,.02-.06,.04-.12,.05-.19,.03-.16,.05-.32,.06-.48,0-.16,.04-.31,.09-.47-.02-.06-.03-.11-.03-.17v-.17c0-.16,0-.32,.01-.48,.01-.15,.04-.31,.07-.47,.01-.06,.03-.13,.06-.23,.02-.09,.03-.17,.03-.22,0-.09-.02-.17-.04-.26-.02-.09-.04-.18-.04-.26,0-.04,0-.09,0-.13,0-.04,.02-.08,.05-.12-.05-.09-.08-.2-.09-.32,0-.1,0-.2,.04-.31,.03-.1,.08-.19,.15-.27h.33c.1-.01,.21,0,.31,.03,.1,.03,.18,.09,.24,.19,.02,.02,.03,.06,.05,.11,.02,.05,.04,.11,.06,.17,.02,.06,.04,.12,.06,.17,.02,.05,.02,.09,.02,.12,0,.09-.02,.17-.06,.24,.05,.06,.09,.12,.1,.19,.01,.07,.02,.14,.02,.21Z"/><path d="M603.18,247.6c0,.17-.04,.34-.13,.51-.09,.17-.23,.27-.43,.31-.06,.15-.14,.27-.24,.38-.1,.11-.2,.22-.3,.32-.1,.1-.21,.21-.31,.32-.11,.11-.19,.23-.26,.36-.07,.02-.13,.05-.18,.1-.05,.05-.1,.09-.17,.1-.08,.1-.16,.2-.24,.28-.08,.08-.18,.15-.31,.2-.39,.55-.76,1.11-1.11,1.68-.35,.57-.7,1.14-1.05,1.71v.06c0,.08,0,.14-.04,.2-.03,.05-.05,.11-.07,.17,.08,.09,.17,.17,.27,.23,.1,.06,.21,.12,.31,.18s.21,.12,.31,.19c.1,.07,.18,.15,.25,.25,.08,0,.15,.02,.2,.06,.05,.03,.12,.05,.2,.05,.03,.08,.08,.14,.13,.19,.06,.05,.12,.09,.19,.14s.14,.08,.21,.11,.14,.08,.2,.12c.05,.11,.11,.2,.19,.29,.08,.08,.17,.15,.27,.21,.03,.08,.07,.17,.11,.25,.04,.08,.09,.15,.13,.23,.04,.07,.08,.15,.11,.23,.03,.08,.04,.17,.05,.27,0,.12,0,.23-.04,.34-.14,.17-.26,.35-.36,.55s-.21,.39-.34,.58c-.23,.14-.47,.28-.7,.42-.23,.14-.46,.29-.67,.47-.13,.01-.25,.04-.36,.09-.11,.05-.21,.12-.31,.21-.24,.06-.49,.12-.73,.18-.24,.06-.49,.09-.74,.1-.24,0-.42-.01-.56-.05-.13-.04-.25-.09-.36-.16-.11-.07-.21-.15-.32-.23-.11-.09-.25-.18-.43-.27v-.03s0-.06,.02-.08c.01-.02,.02-.04,.02-.07,0-.04-.03-.11-.08-.2-.05-.09-.1-.15-.13-.19-.03-.14-.04-.28-.04-.43,0-.38,.03-.73,.12-1.05,.09-.32,.21-.62,.35-.92,.14-.29,.29-.59,.45-.88,.16-.29,.29-.61,.41-.94-.08-.13-.2-.23-.34-.29-.14-.07-.28-.12-.42-.15-.06-.16-.15-.28-.27-.36-.12-.08-.23-.18-.34-.29-.09-.12-.15-.24-.18-.35,0-.01,0-.02,0-.03s0-.01,0-.03c-.02-.04-.04-.06-.08-.05-.04,.01-.06,0-.08-.04-.02-.02-.03-.08-.04-.19-.01-.1-.03-.22-.04-.34-.01-.12-.02-.24-.03-.36,0-.11-.01-.19-.01-.23,.04-.09,.07-.18,.1-.28,.03-.1,.07-.2,.11-.29s.1-.18,.16-.26,.15-.14,.24-.18c0-.08,.02-.14,.06-.19,.04-.04,.06-.11,.05-.21,.12-.05,.24-.12,.33-.2,.1-.08,.2-.16,.3-.25,.05-.04,.1-.06,.15-.08,.05-.01,.1-.04,.15-.08,.04-.03,.05-.05,.04-.07-.01-.02,0-.05,.04-.09,.11,0,.23-.04,.35-.13,.12-.09,.22-.18,.29-.26h.03c.12,0,.23-.04,.33-.1,.1-.06,.22-.09,.34-.08,.04-.07,.09-.13,.16-.17s.15-.07,.24-.1c.08-.03,.17-.06,.25-.09,.08-.03,.16-.07,.21-.13,.21-.03,.41-.09,.61-.16l.61-.21c.21-.07,.41-.14,.61-.2,.2-.06,.41-.11,.63-.15,.04-.07,.08-.12,.14-.16,.06-.04,.12-.08,.17-.13,.07-.07,.14-.14,.19-.23,.05-.09,.11-.17,.16-.25,.05-.08,.12-.14,.19-.2,.07-.06,.17-.09,.3-.09,.12,0,.22,.03,.31,.09,.09,.06,.16,.15,.2,.25h.02c.08,0,.14-.03,.18-.08,.04,.11,.06,.21,.06,.32Zm-3.45,2.09c-.07,0-.13,.02-.17,.06-.04,.04-.09,.06-.15,.08-.02-.07-.07-.11-.14-.1-.06,0-.13,.03-.2,.08-.07,.05-.15,.07-.22,.08-.04,0-.08,0-.11-.03-.11,.13-.25,.21-.43,.25-.18,.04-.34,.08-.49,.1-.11,.19-.27,.31-.5,.37,0-.02,0-.05,0-.07,0-.03-.02-.04-.05-.04h-.02s0,.02,0,.02c0,.04-.01,.06-.04,.08-.03,.01-.03,.05-.01,.1-.15,.07-.28,.15-.39,.25-.11,.1-.21,.2-.3,.32-.09,.12-.18,.24-.26,.36-.08,.12-.16,.25-.24,.37,0,.04,0,.08,0,.12s0,.09,0,.13c0,.07-.01,.14-.05,.22,.06,.15,.13,.29,.21,.43s.16,.27,.26,.38c.1,.12,.21,.22,.34,.3,.13,.08,.28,.14,.46,.18,0-.02,.01-.04,.03-.04,.02,0,.04,0,.06,0,.13-.27,.27-.54,.42-.82,.15-.27,.34-.52,.58-.72,.08-.18,.18-.35,.29-.52,.11-.17,.22-.34,.32-.52,.02-.16,.06-.29,.13-.4,.07-.11,.15-.21,.24-.32s.17-.21,.25-.32c.08-.11,.14-.23,.17-.38Zm.47,7.41v-.05c-.09-.11-.17-.21-.25-.31-.08-.1-.18-.2-.29-.29-.04-.04-.07-.08-.1-.14-.03-.06-.06-.1-.1-.14-.08-.06-.16-.09-.26-.11-.1-.02-.19-.05-.27-.11-.04-.03-.07-.06-.1-.09-.03-.04-.06-.07-.1-.1-.05-.03-.09-.05-.14-.06-.05,0-.1-.02-.14-.05-.05-.03-.09-.06-.12-.11s-.08-.08-.13-.11c-.05-.03-.11-.05-.17-.06-.06,0-.12-.02-.18-.05h-.09c-.01,.05-.03,.09-.05,.12-.02,.03-.04,.06-.06,.09-.02,.03-.03,.07-.04,.1,0,.04,0,.09,0,.15-.02,0-.03,0-.06,0-.04,0-.06,.01-.06,.04,0,.03-.02,.05-.04,.06-.16,.33-.3,.66-.43,.99-.13,.33-.25,.67-.34,1.03,0,.01-.02,.05-.03,.12s-.02,.11-.02,.12c0,.04,0,.07,.03,.1,.02,.03,.02,.06,.02,.1,0,.01,0,.03-.01,.04-.02,.03-.04,.06-.04,.1s-.03,.07-.06,.08c.03,.07,.05,.14,.05,.2,0,.07,.01,.13,.04,.18,.09,.1,.21,.17,.34,.21,.13,.04,.26,.08,.38,.12,.08-.04,.17-.08,.27-.1,.1-.02,.19-.04,.28-.06,.09-.02,.18-.05,.28-.08,.09-.03,.17-.08,.25-.15h.04c.13,0,.22-.04,.29-.09,.07-.06,.14-.13,.21-.22,.14-.03,.25-.07,.34-.14,.08-.07,.16-.14,.23-.23,.07-.08,.13-.17,.2-.25,.06-.08,.15-.16,.25-.22,.01-.07,.03-.12,.05-.17,.02-.05,.04-.1,.06-.15,.02-.05,.04-.1,.05-.15,.01-.05,.02-.11,.02-.18Z"/><path d="M613.26,249.62c0,.19-.02,.37-.07,.54-.05,.17-.09,.36-.12,.54-.21,.16-.41,.33-.6,.51-.19,.17-.39,.34-.61,.49-.11,.21-.2,.45-.27,.71-.07,.26-.14,.51-.2,.74,0,.02,0,.04,0,.06,0,.04,.01,.07,.03,.09,.02,.03,.03,.06,.03,.09h0s-.01,.03-.01,.03c-.03,.11-.06,.21-.09,.32-.03,.1-.06,.2-.08,.31-.06,.33-.11,.64-.15,.95-.04,.31-.11,.63-.19,.96,0,0,0,.09,0,.25,0,.16,0,.34,0,.54,0,.19,0,.38,0,.56,0,.18,0,.28,0,.32,0,.32,.05,.64,.12,.94,.07,.3,.21,.58,.42,.83-.02,.07-.03,.13-.03,.21,0,.08,.02,.15,.04,.22-.04,.06-.07,.12-.1,.17-.03,.05-.06,.11-.1,.15-.04,.05-.08,.09-.13,.12-.05,.03-.12,.05-.2,.05-.1,0-.22-.02-.35-.07-.13-.05-.23-.1-.32-.17,0-.04,0-.09,0-.16,0-.15-.03-.3-.08-.46-.05-.15-.1-.31-.15-.47-.05-.16-.1-.32-.15-.49s-.08-.34-.08-.52c0-.06,0-.12,.02-.19,.01-.07,.02-.13,.02-.19,0-.04-.02-.06-.06-.08-.04-.02-.05-.04-.04-.08v-.08s0-.06,.02-.09c.02-.02,.03-.05,.05-.08-.01-.09-.02-.18-.02-.27v-.27c-.02-.52,0-1.04,.06-1.55,.06-.52,.15-1.02,.27-1.53-.02-.05-.04-.11-.04-.17,0-.07,0-.13,.03-.2,.02-.07,.03-.14,.03-.21,0-.05-.01-.1-.04-.14-.02-.01-.06-.02-.12-.02-.12,0-.23,.03-.33,.09-.1,.06-.19,.13-.27,.21-.31,.11-.61,.23-.92,.35-.3,.13-.61,.23-.93,.32-.13,.1-.28,.17-.44,.23s-.33,.11-.5,.15c-.17,.04-.35,.09-.52,.13-.17,.04-.34,.09-.49,.15-.1,0-.19,0-.28,0s-.19,.02-.29,.02c-.12,0-.24,0-.36-.03,0,0,0-.01-.02,0-.05,0-.08,.02-.09,.06-.01,.04-.04,.06-.08,.06-.04,0-.09,0-.13-.02-.04-.02-.09-.02-.14-.02-.04,0-.09,0-.14,.02-.05,.01-.09,.03-.14,.04-.16-.05-.31-.1-.46-.15s-.3-.08-.48-.08c-.06-.06-.11-.12-.16-.2s-.11-.13-.21-.15c-.02-.06-.04-.13-.06-.2-.02-.07-.03-.13-.03-.2,0-.16,.01-.3,.05-.41,.04-.12,.09-.23,.17-.33,.08-.11,.17-.21,.27-.31,.11-.1,.22-.22,.35-.34,.17-.08,.31-.19,.44-.32,.12-.13,.27-.24,.43-.32,.1-.12,.21-.23,.34-.33,.13-.09,.26-.18,.39-.27,.14-.08,.27-.17,.39-.26,.13-.09,.25-.19,.35-.31,.12-.03,.23-.06,.34-.12,.11-.06,.21-.12,.31-.18,.1-.06,.21-.12,.31-.18,.11-.06,.22-.1,.35-.12,.04-.04,.07-.08,.11-.14s.08-.09,.11-.11c.1-.06,.21-.11,.34-.15,.12-.04,.24-.09,.36-.14,.22-.1,.44-.19,.65-.28,.21-.09,.42-.17,.63-.23,.21-.07,.43-.12,.65-.17,.22-.04,.46-.07,.71-.09,0,.02,.02,.03,.05,.04,.03,0,.05,0,.06,0,.11,.08,.23,.17,.34,.25,.11,.08,.23,.15,.36,.2,.16-.02,.28-.06,.38-.11,.09-.06,.2-.11,.33-.18,.22,.06,.42,.14,.61,.24,.19,.1,.35,.24,.48,.42,0,.04,.01,.09,.02,.13,0,.05,0,.1,0,.15Zm-2.49,.79c-.13-.07-.24-.13-.34-.2s-.16-.18-.16-.35c0-.07,0-.13,0-.16-.07,0-.13-.02-.17-.05-.04-.04-.1-.06-.17-.05h-.04c-.15,.08-.3,.15-.45,.2l-.46,.14c-.15,.05-.31,.1-.46,.15-.15,.05-.3,.13-.44,.22h-.4c-.09,.14-.2,.25-.33,.34-.13,.09-.26,.16-.41,.23-.14,.06-.28,.13-.42,.2-.14,.07-.26,.15-.37,.25-.04,.03-.07,.08-.11,.15-.04,.07-.07,.1-.11,.11-.02,0-.03,0-.05,0-.02,0-.04,0-.05,0h-.03c-.05,.04-.1,.08-.14,.13-.04,.05-.09,.09-.13,.14-.04,.04-.09,.08-.14,.12-.05,.03-.11,.06-.18,.06-.12,.12-.24,.24-.35,.34-.11,.1-.24,.22-.39,.37-.01,.08-.04,.15-.09,.21s-.1,.12-.15,.17c-.05,.05-.1,.11-.13,.17-.04,.06-.06,.12-.06,.18v.05c.08,.02,.17,.05,.25,.08,.08,.03,.16,.07,.24,.1,.06,0,.12,0,.19,0,.07,0,.13,0,.19,0,.36,0,.7-.06,1.03-.15,.33-.09,.66-.19,.98-.31,.32-.12,.64-.24,.96-.38,.32-.13,.65-.24,.98-.33h.04s.06,0,.08,.02c.02,.01,.05,.02,.08,.02,.02,0,.04,0,.04-.01,.09-.15,.23-.27,.41-.36,.18-.08,.36-.17,.53-.26,.17-.09,.31-.2,.43-.33,.11-.13,.15-.32,.11-.55,.07-.09,.12-.19,.15-.3,.03-.11,.05-.22,.06-.34Z"/><path d="M622.37,255.59v.14s0,.08,0,.12c-.02,.02-.04,.05-.07,.11s-.05,.1-.07,.12c-.06,.11-.1,.21-.13,.31-.03,.09-.04,.2-.04,.33-.11,.1-.21,.21-.3,.33-.09,.12-.19,.23-.28,.34-.09,.11-.19,.22-.29,.33-.1,.1-.22,.19-.35,.27-.03,.08-.07,.14-.12,.19-.05,.05-.09,.12-.1,.2-.24,.18-.48,.38-.73,.57s-.49,.38-.74,.55c-.25,.18-.52,.34-.79,.49-.27,.15-.56,.27-.85,.36,0,0-.02,.01-.05,.02-.03,0-.05,.01-.06,.01-.04,0-.06-.02-.08-.06-.21,.13-.45,.22-.71,.26-.26,.04-.51,.06-.76,.07-.13,0-.25,0-.37,0-.12,0-.24,0-.37,0-.12-.08-.24-.14-.37-.2-.12-.05-.24-.11-.35-.18-.11-.07-.21-.15-.3-.24-.09-.09-.16-.22-.2-.37-.07-.05-.12-.09-.16-.12-.04-.03-.11-.04-.2-.03,0-.04,0-.06,.02-.08,.02-.02,.02-.04,.01-.08-.02-.04-.04-.06-.09-.06-.04,0-.08,0-.12,0-.16-.33-.27-.68-.35-1.03-.08-.35-.12-.71-.13-1.08,0-.22,0-.43,.02-.64,.02-.21,.05-.42,.09-.63,.07-.07,.12-.17,.15-.28,.03-.11,.06-.23,.07-.35s.04-.24,.07-.36,.08-.21,.14-.3c-.02-.07-.04-.15-.04-.25,0-.06,0-.12,.03-.17s.07-.09,.15-.09c-.02-.05-.02-.11-.02-.18,0-.07,0-.13-.02-.16,.08-.18,.15-.37,.2-.56,.06-.19,.12-.38,.18-.58,.06-.19,.13-.38,.2-.57s.16-.36,.27-.53c.02-.22,.07-.42,.15-.6,.08-.18,.16-.36,.26-.53,.1-.17,.19-.34,.29-.51,.1-.17,.18-.36,.24-.55,.05,0,.09-.03,.11-.06,.02-.03,.04-.07,.06-.11,.02-.04,.05-.07,.08-.1,.03-.03,.08-.04,.14-.04,.02-.09,.05-.17,.09-.25,.04-.08,.09-.15,.14-.22,.05-.07,.1-.14,.15-.21,.05-.07,.08-.15,.11-.24,.11-.08,.22-.16,.35-.22,.12-.07,.24-.14,.35-.22,.11-.08,.21-.17,.29-.26,.09-.1,.15-.22,.19-.36,.24-.07,.45-.17,.65-.28,.19-.12,.4-.22,.61-.3,.08,0,.12,.01,.11,.04,0,.03,0,.06,0,.11,0,.04,.01,.07,.04,.09,.08,.03,.15,.05,.21,.05,.06,0,.12,0,.18-.02,.06,0,.12-.01,.19-.02h.1s.01,.05,.01,.08v.09c0,.2-.04,.41-.14,.62s-.24,.38-.4,.51v.15s-.05,.01-.07,.03c-.02,.02-.04,.04-.05,.06-.02,.02-.04,.04-.06,.05-.02,.02-.05,.02-.09,.01-.01,.04-.02,.08-.02,.12,0,.02,0,.04,0,.06,0,.02,.01,.04,.02,.06-.06,0-.11,0-.15-.03-.04-.02-.07-.06-.09-.12-.08-.04-.18-.07-.28-.09-.1-.02-.19-.06-.25-.13-.08,.05-.18,.11-.3,.18s-.22,.13-.29,.18l-.11,.12c-.09,.1-.17,.19-.25,.27-.08,.08-.14,.18-.18,.31-.23,.19-.43,.41-.58,.65-.15,.24-.27,.5-.34,.77-.06,.03-.1,.08-.12,.14-.02,.07-.07,.1-.15,.1v.02s0,.05,.02,.07c.02,.01,.02,.04,.02,.06v.04s-.03,0-.03,0c-.03,0-.06,0-.08,.01-.02,0-.04,.02-.06,.02-.01,.12-.04,.23-.07,.34-.04,.11-.08,.22-.12,.33-.04,.11-.08,.22-.1,.33-.03,.11-.04,.22-.02,.33-.05,.02-.08,.04-.09,.08,0,.04-.03,.07-.07,.09,0,.11-.02,.21-.05,.31-.04,.1-.08,.2-.12,.31-.04,.11-.08,.21-.1,.31-.03,.1-.03,.21,0,.31-.06,.08-.11,.17-.13,.26-.02,.09-.03,.19-.04,.29,0,.1-.02,.2-.04,.29s-.06,.18-.12,.26c-.01,.16-.03,.3-.07,.43-.04,.13-.09,.27-.15,.41,.04,.06,.06,.13,.06,.21,0,.05,0,.1,0,.15,0,.05,0,.1,0,.16,0,.08,.02,.15,.05,.2,.15-.05,.24-.17,.27-.35,.12-.03,.21-.07,.29-.13s.14-.12,.21-.19c.07-.07,.14-.13,.21-.19s.17-.1,.28-.13c.17-.21,.36-.4,.58-.57,.21-.17,.42-.34,.63-.51h.03c.1,0,.2-.04,.31-.11,.11-.07,.2-.14,.25-.22h.02s.04,0,.06,.02,.04,.02,.06,.02h.04c.05-.04,.1-.07,.14-.11,.04-.03,.09-.07,.14-.1,.15-.1,.3-.18,.47-.23,.17-.06,.34-.12,.51-.18,.11-.05,.22-.09,.33-.12s.22-.05,.35-.06c.1,0,.21,0,.31,.04,.1,.03,.21,.04,.32,.04,.06,0,.13-.01,.21-.04,.25,.09,.5,.19,.75,.29,.24,.11,.49,.21,.74,.32v.08s0,.05,0,.08,.02,.05,.05,.07c.02,.04,.05,.07,.08,.09,.03,.03,.06,.06,.09,.1,.12,.16,.2,.34,.26,.55,.06,.2,.09,.4,.09,.59Zm-1.19-.41l-.07-.11s-.04-.07-.05-.12c-.07,0-.14,0-.19-.03-.05-.02-.09-.05-.12-.09-.03-.04-.07-.08-.1-.12-.03-.04-.08-.08-.12-.13h-.1c-.06,0-.12,0-.17-.01l-.15-.04s-.1-.03-.15-.04c-.06-.01-.12-.02-.21-.02-.26,0-.51,.05-.74,.14-.24,.09-.48,.16-.72,.21-.06,.08-.13,.14-.21,.18-.08,.04-.14,.1-.18,.19-.15,.02-.28,.05-.39,.11-.11,.05-.21,.11-.3,.18-.09,.07-.19,.14-.28,.21-.1,.07-.21,.12-.34,.16-.04,.09-.09,.16-.16,.2s-.15,.1-.23,.14-.15,.1-.22,.16c-.07,.06-.1,.14-.12,.24-.05,.04-.12,.06-.21,.05-.01,.04-.02,.08-.02,.12,0,.02,0,.04,0,.06,0,.02,.01,.04,.02,.06h-.03c-.07,0-.11,.02-.14,.04-.03,.03-.05,.06-.07,.09-.02,.04-.04,.08-.05,.12-.02,.04-.04,.08-.08,.1-.09,.06-.17,.12-.24,.18-.16,.13-.29,.29-.38,.48-.1,.19-.18,.37-.26,.56,.2,.42,.46,.8,.78,1.15,.01,0,.04-.01,.07-.01,.09,0,.18,.02,.28,.08,.09,.06,.22,.08,.38,.08,.06,0,.12,0,.18,0,.06,0,.12,0,.18,0,.05,0,.1,0,.15,0,.04,0,.09,0,.13,.02,.12-.05,.26-.1,.4-.15,.14-.05,.26-.12,.36-.21h.19c.08-.08,.15-.13,.2-.16,.05-.03,.13-.05,.24-.05,.12-.12,.24-.22,.36-.3,.12-.08,.26-.14,.43-.18,.03-.11,.05-.18,.08-.21,.02-.03,.1-.04,.23-.04,.23-.26,.48-.5,.75-.72,.27-.22,.51-.46,.74-.72v-.05s0-.07,.01-.1c0-.03,.02-.07,.02-.1,.04,0,.08-.01,.1-.03s.05-.04,.09-.05c.1-.25,.2-.5,.29-.73,.09-.23,.14-.48,.15-.76Z"/></g></g><path class="cls-14" d="M350.28,218.27l-10.62-15.19-9.59,14.31c-3.77,3.65-9.65,.57-9.5-4.98L322.18-.17h37.35l.2,213.44c.14,5.51-5.68,8.59-9.45,5Z"/><path class="cls-13" d="M405.96,78.67l19.04-25.86c1.77-2.44,.4-5.99-2.43-6.3l-23.96,.77c-2.58-.28-4.64,2.38-3.91,5.06l4.93,25.09c.83,3.05,4.51,3.77,6.34,1.24Z"/><path class="cls-13" d="M426.16,268.82l-20.44-22.76c-1.93-2.12-5.33-1.68-6.03,.79l-2.88,21.64c-.64,2.25,1.45,4.68,3.98,4.62l23.32,1.12c2.87-.07,4.06-3.21,2.06-5.41Z"/><path class="cls-13" d="M651.61,241.42l-21.27,24.06c-1.98,2.27-.93,5.93,1.86,6.49l23.94,1.37c2.55,.51,4.83-1.95,4.35-4.7l-2.67-25.43c-.55-3.11-4.16-4.16-6.21-1.8Z"/><path class="cls-13" d="M630.04,50.63l22.32,20.92c2.11,1.95,5.46,1.21,5.94-1.3l1.01-21.8c.44-2.3-1.85-4.54-4.36-4.26l-23.33,.88c-2.85,.31-3.77,3.55-1.59,5.57Z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg
new file mode 100644
index 00000000000..acabc494308
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg
@@ -0,0 +1,332 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#314423;}
+	.st1{fill:#1B1D2D;}
+	.st2{fill:#382B14;}
+	.st3{clip-path:url(#SVGID_00000116231376954771971890000016660426217235132580_);}
+	.st4{fill:#47394F;}
+	.st5{fill:#786280;}
+	.st6{fill:#7EAB98;}
+	.st7{fill:#7A5B3D;}
+	.st8{fill:#594545;}
+	.st9{clip-path:url(#SVGID_00000177445357531958674510000001450383834768997547_);}
+	.st10{fill:#282225;}
+	.st11{fill:#315B31;}
+	.st12{fill:#504251;}
+	.st13{fill:#B09593;}
+	.st14{fill:#47333F;}
+	.st15{fill:#383F3F;}
+	.st16{clip-path:url(#SVGID_00000176764924534425311560000017353301225724563084_);}
+	.st17{fill:#8F652D;}
+	.st18{fill:#804C21;}
+	.st19{fill:#A87B3A;}
+	.st20{fill:#3D373A;}
+	.st21{clip-path:url(#SVGID_00000081639616971787876180000004506618667053312447_);}
+	.st22{clip-path:url(#SVGID_00000136373114916789589150000017286248732212751268_);}
+	.st23{clip-path:url(#SVGID_00000040538312705299998370000013019671933030940085_);}
+	.st24{clip-path:url(#SVGID_00000103982612280959648750000001428673906986761638_);}
+	.st25{fill:#58435B;}
+	.st26{clip-path:url(#SVGID_00000162314770652074822390000010014802345867831463_);}
+	.st27{fill:#A58050;}
+</style>
+<rect x="-1.5" y="244.7" class="st0" width="721.6" height="260.6"/>
+<rect x="-0.4" y="-2" class="st1" width="719.5" height="260"/>
+<path class="st2" d="M617.6,79.8v63H436.5v-17.2c0-12.6-10.2-22.8-22.8-22.8h-68.2c-12.6,0-22.8,10.2-22.8,22.8v54.1h-29.2V49.2
+	c0-11.2-9-20.2-20.2-20.2H172c-11.2,0-20.2,9-20.2,20.2v106.6h-44.4v-33.4c0-13.1-10.6-23.7-23.7-23.7h-72
+	c-13.1,0-23.7,10.6-23.7,23.7v151.9h743.2V79.8c0-11.8-9.5-21.3-21.3-21.3h-71C627.1,58.6,617.6,68.1,617.6,79.8L617.6,79.8z"/>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="755.7" y="0.5" width="559.3" height="509"/>
+	</defs>
+	<clipPath id="SVGID_00000112629272226321632430000004109517492067599024_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000112629272226321632430000004109517492067599024_);">
+		<g>
+			<polygon class="st4" points="799,315.3 678.8,276 662.4,337 782.9,399.9 			"/>
+			
+				<ellipse transform="matrix(0.1978 -0.9802 0.9802 0.1978 237.5913 903.1612)" class="st5" cx="670.6" cy="306.4" rx="31.6" ry="22.4"/>
+		</g>
+		<path class="st4" d="M698.2,466.2c14.8,1.5,30-1.5,39.7-13.3c0.2-0.2,0.3-0.4,0.5-0.6c20.2-70.1,14.4-465.1,14.4-465.1
+			c1.2-52.7,44.3-94.8,97-94.8l0,0c51.9,0,94.6,40.9,97,92.7L966.3,424l0.4,0c0,0-1.4,16,9.1,28.2c0.2,0.2,0.3,0.4,0.5,0.6
+			c9.7,11.8,24.9,14.9,39.7,13.3c0.2,0,0.5,0,0.8,0c48.5,0.1,84,27.7,84,65.7h-26.6c-9.9,0-19.7-2.5-28.5-7.2l-0.1,0
+			c-9.4-4.9-21-7-31.4-4c-4.5,1.3-8.6,3.4-12.6,5.7c-6.4,3.7-13.7,5.5-21.1,5.5l0,0c-0.3,0-0.7,0-1.1,0c-8.3,1.1-17,0.4-25.4,0h-1
+			c-13.7,0-27.9,0-41.8,0c0,0-98.7,0.4-145.2,0.6c-12.5,0-24.7-3.6-34.9-10.8c-6.1-4.2-14-8-22.4-8c-10.5,0-17.2,4.5-22,9.6
+			c-5.2,5.5-12.5,8.7-20.1,8.7h-49C639.7,464.2,698,466.2,698.2,466.2L698.2,466.2z"/>
+		<path class="st6" d="M392.7-152.8l-0.6-0.6l2.6,0c2.5-0.6,5-1.2,7.7-1.6c10.4-1.6,20.6-0.8,30.1,1.8l810.2,5.3
+			c5.6-1.2,11.4-1.9,17.5-1.8c33.6,0.2,60.6,21.3,60.4,47c-0.2,25.1-26.2,45.3-58.7,46c1.5,4.6,2.6,9.3,3.3,14.3
+			c7.5,49.6-26.2,95.7-75.2,103.1c-12,1.8-23.7,1.1-34.8-1.7c0.7,2.4,1.2,4.9,1.6,7.5c5.5,34.9-17.9,67.6-52.4,73
+			c-12.2,1.9-24.1,0.2-34.6-4.4c-7.8,18.9-30.8,32.5-58,32.5c-26.8,0-49.6-13.3-57.7-31.8c-10.7,18.7-31.2,31.4-54.8,31.4
+			c-25.1,0-46.7-14.3-56.7-35.1c-9.6,10.3-23.4,16.8-38.8,16.8c-10.2,0-19.7-2.9-27.8-7.8c-5.9,20.9-30.3,36.7-59.4,36.7
+			c-33.6,0-60.8-20.8-60.8-46.5c0-0.7,0-1.4,0.1-2.2c-25.7,15.9-54.9,15.6-67.5-1.5c-3.5-4.8-5.4-10.5-5.8-16.7
+			c-9.1,5.5-19.8,8.7-31.3,8.7c-33.1,0-60-26.5-60-59.2c0-9.8,2.4-19,6.6-27.1c-3.8,0.6-7.8,0.9-11.8,0.9
+			c-30.7-0.2-56.7-19.8-66.1-47c-38,3.9-72.7-22.6-78.5-60.7C336.5-109.2,358.8-142.9,392.7-152.8L392.7-152.8z"/>
+	</g>
+</g>
+<g>
+	<path class="st7" d="M151.7,300.4c-8,4-9.8-3.4-18.7-3.4s-8.9,3.6-17.9,3.6s-8.9-3.6-17.9-3.6c-8.9,0-8.9,3.6-17.9,3.6
+		c-8.9,0-8.9-3.6-17.9-3.6s-9,3.6-17.9,3.6s-9-3.6-17.9-3.6c-9,0-10.7,7.4-18.7,3.4c-4-2,2.6-6.1,2.6-10.6s-3.6-4.5-3.6-9.1
+		s3.6-4.5,3.6-9.1s-3.6-4.5-3.6-9s3.6-4.5,3.6-9.1s-3.6-4.5-3.6-9.1s3.6-4.5,3.6-9.1s-6.6-8.6-2.6-10.7c8-4,9.8,3.4,18.7,3.4
+		s8.9-3.6,17.9-3.6s9,3.6,17.9,3.6s9-3.6,17.9-3.6s8.9,3.6,17.9,3.6s8.9-3.6,17.9-3.6s9,3.6,17.9,3.6s10.7-7.4,18.7-3.4
+		c4,2-2.6,6.1-2.6,10.6s3.6,4.5,3.6,9.1s-3.6,4.5-3.6,9.1c0,4.5,3.6,4.5,3.6,9.1s-3.6,4.5-3.6,9.1s3.6,4.5,3.6,9s-4.7,5.2-3.5,9.5
+		C150.7,295.8,155.8,298.3,151.7,300.4L151.7,300.4z"/>
+	<path class="st8" d="M28.6,225.5L28.6,225.5c2.5,0,4.5,2,4.5,4.5v67.5c0,2.5-2,4.5-4.5,4.5l0,0c-2.5,0-4.5-2-4.5-4.5V230
+		C24.1,227.5,26.1,225.5,28.6,225.5z"/>
+	<path class="st8" d="M130.8,225.5L130.8,225.5c2.5,0,4.5,2,4.5,4.5v67.5c0,2.5-2,4.5-4.5,4.5l0,0c-2.5,0-4.5-2-4.5-4.5V230
+		C126.2,227.5,128.2,225.5,130.8,225.5z"/>
+</g>
+<g>
+	<path class="st7" d="M319.9,311.2c-8.4,4.5-10.2-3.8-19.6-3.8s-9.4,4-18.8,4c-9.4,0-9.4-4-18.8-4c-9.4,0-9.4,4-18.8,4
+		c-9.4,0-9.4-4-18.8-4c-9.4,0-9.4,4-18.8,4c-9.4,0-9.4-4-18.8-4c-9.4,0-11.2,8.3-19.6,3.8c-4.2-2.3,2.7-6.8,2.7-11.9
+		s-3.8-5.1-3.8-10.1s3.8-5.1,3.8-10.1s-3.8-5.1-3.8-10.1s3.8-5.1,3.8-10.1s-3.8-5.1-3.8-10.1s3.8-5.1,3.8-10.1s-7-9.6-2.7-11.9
+		c8.4-4.5,10.2,3.8,19.6,3.8s9.4-4,18.8-4s9.4,4,18.8,4s9.4-4,18.8-4s9.4,4,18.8,4c9.4,0,9.4-4,18.8-4s9.4,4,18.8,4
+		s11.2-8.3,19.6-3.8c4.2,2.3-2.7,6.8-2.7,11.9s3.8,5.1,3.8,10.1s-3.8,5.1-3.8,10.1s3.8,5.1,3.8,10.1s-3.8,5.1-3.8,10.1
+		s3.8,5.1,3.8,10.1s-4.9,5.8-3.7,10.7C318.9,306.1,324.1,308.9,319.9,311.2L319.9,311.2z"/>
+	<path class="st8" d="M190.7,227.5h0.2c2.6,0,4.6,2.1,4.6,4.6v76.3c0,2.6-2.1,4.6-4.6,4.6h-0.2c-2.6,0-4.6-2.1-4.6-4.6v-76.3
+		C186,229.6,188.1,227.5,190.7,227.5z"/>
+	<path class="st8" d="M297.8,227.5h0.2c2.6,0,4.6,2.1,4.6,4.6v76.3c0,2.6-2.1,4.6-4.6,4.6h-0.2c-2.6,0-4.6-2.1-4.6-4.6v-76.3
+		C293.1,229.6,295.2,227.5,297.8,227.5z"/>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_00000034080858648005939030000004758198041547465106_" x="273.3" y="-0.8" width="446.8" height="502.1"/>
+	</defs>
+	<clipPath id="SVGID_00000120540749362253401030000015354928451710348982_">
+		<use xlink:href="#SVGID_00000034080858648005939030000004758198041547465106_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000120540749362253401030000015354928451710348982_);">
+		<g>
+			<path class="st10" d="M594.5,130H419.2V-4.8c0-9.5,4-18.5,11.1-24.9L481-75.3c12.2-11,30.7-11.5,43.5-1.2l57.7,46.7
+				c7.8,6.4,12.4,15.9,12.4,26V130z"/>
+			<path class="st10" d="M375.8,34.6h263.3c5.9,0,10.6,4.8,10.6,10.6v259.5c0,5.9-4.8,10.6-10.6,10.6H375.8
+				c-5.9,0-10.6-4.8-10.6-10.6V45.2C365.2,39.3,369.9,34.6,375.8,34.6z"/>
+			<path class="st11" d="M737.8,329.9c0-0.5,0-1,0-1.5c0-7.9-4.2-14.9-10.4-18.8c0.9-2.4,1.4-5,1.4-7.6c0-12.1-9.7-21.9-21.7-21.9
+				c-1.4,0-2.7,0.1-4,0.4c-0.4-2.1-1.2-4-2.4-5.7c-6.4-8.8-21.8-8.3-34.5,1.2c-3.3,2.5-6.1,5.3-8.3,8.4
+				c-4.9-6.8-14.2-11.4-24.9-11.4c-6.6,0-12.6,1.8-17.5,4.7c-4.3-6.9-12-11.4-20.7-11.4l0,0c-2.1,0-3.8,1.8-3.8,3.9v59.8
+				L737.8,329.9L737.8,329.9z"/>
+			<path class="st11" d="M277.4,329.9c0-0.5,0-1,0-1.6c0-8,4-15,9.9-18.9c-0.8-2.4-1.3-5-1.3-7.7c0-12.2,9.2-22.1,20.6-22.1
+				c1.3,0,2.6,0.1,3.8,0.4c0.4-2.1,1.1-4,2.3-5.7c6-8.9,20.6-8.3,32.6,1.2c3.1,2.5,5.8,5.4,7.9,8.4c4.6-6.8,13.4-11.5,23.5-11.5
+				c6.2,0,12,1.8,16.5,4.7c4.1-6.9,11.4-11.5,19.6-11.5l0,0c2,0,3.6,1.8,3.6,3.9v60.1h-98L277.4,329.9L277.4,329.9z"/>
+			<path class="st12" d="M508.3,141.7L508.3,141.7c26,0,47.2,21.1,47.2,47.2v75.4h-94.4v-75.4C461.1,162.8,482.3,141.7,508.3,141.7
+				L508.3,141.7z"/>
+			<path class="st13" d="M601,354.5H411c-4.7,0-8.3-4.2-7.7-8.8l10.5-74.6c0.5-3.8,3.8-6.7,7.7-6.7h165.4c3.7,0,6.9,2.6,7.6,6.3
+				l14.2,74.5C609.5,350.1,605.9,354.5,601,354.5L601,354.5z"/>
+			<path class="st13" d="M508.3,156.9L508.3,156.9c16.1,0,29.1,13,29.1,29.1v17.8c0,3.7-3,6.8-6.8,6.8H486c-3.7,0-6.8-3-6.8-6.8V186
+				C479.2,169.9,492.3,156.9,508.3,156.9L508.3,156.9z"/>
+			<path class="st13" d="M503.9-44.4L503.9-44.4c20.3,0,36.7,16.4,36.7,36.6v22.4c0,4.7-3.8,8.5-8.5,8.5h-56.3
+				c-4.7,0-8.5-3.8-8.5-8.5V-7.8C467.2-28,483.6-44.4,503.9-44.4L503.9-44.4z"/>
+			<path class="st14" d="M653.3,101H365.4c-9.7,0-17-8.5-15.1-17.7l8-40.4c1.4-7,7.7-12.1,15.1-12.1h270c7.1,0,13.3,4.7,15,11.5
+				l9.9,40.4C670.6,92,663.3,101,653.3,101L653.3,101z"/>
+			<path class="st15" d="M409.3,314c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6l198.7-4.3c0,0,0,0,0,0c0.9,0,1.6,0.7,1.6,1.6
+				c0,0.9-0.7,1.6-1.6,1.6L409.3,314C409.3,314,409.3,314,409.3,314L409.3,314z"/>
+			<path class="st15" d="M600.2,287.6L600.2,287.6l-192.3-2.7c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.8-1.6,1.6-1.6l192.2,2.7
+				c0.9,0,1.6,0.7,1.6,1.6C601.8,286.9,601.1,287.6,600.2,287.6L600.2,287.6z"/>
+			<path class="st15" d="M613.1,339.5C613.1,339.5,613.1,339.5,613.1,339.5l-216.2-3.8c-0.9,0-1.6-0.8-1.6-1.6
+				c0-0.9,0.7-1.6,1.6-1.6c0,0,0,0,0,0l216.2,3.8c0.9,0,1.6,0.8,1.6,1.6C614.7,338.8,614,339.5,613.1,339.5z"/>
+			<g>
+				<path class="st13" d="M416.4,141.2L416.4,141.2c18.2,0,33,14.8,33,33v42.8c0,4.2-3.4,7.7-7.7,7.7h-50.7c-4.2,0-7.7-3.4-7.7-7.7
+					v-42.8C383.4,156,398.2,141.2,416.4,141.2L416.4,141.2z"/>
+				<g>
+					<defs>
+						<path id="SVGID_00000070080381217711941410000014819097072633576856_" d="M416.4,141.2h0.2c18.3,0,33.1,14.8,33.1,33.1v42.9
+							c0,4.2-3.5,7.7-7.7,7.7h-51c-4.2,0-7.7-3.4-7.7-7.7v-42.9C383.3,156.1,398.1,141.2,416.4,141.2L416.4,141.2z"/>
+					</defs>
+					<clipPath id="SVGID_00000127046131018036717610000007963755538973992634_">
+						<use xlink:href="#SVGID_00000070080381217711941410000014819097072633576856_"  style="overflow:visible;"/>
+					</clipPath>
+					<g style="clip-path:url(#SVGID_00000127046131018036717610000007963755538973992634_);">
+						<g>
+							<path class="st17" d="M394.7,166.7c0,9.2-3.7,14.7-7.7,17.2c-2.5,1.5-5.4-0.9-5.4-4.4v-42.3
+								C386.9,137.1,394.7,153.3,394.7,166.7L394.7,166.7z"/>
+							<path class="st17" d="M386.2,227.4h11c2.8,0,5-2.4,4.6-5.2c-1.4-10.8-6-34.8-20.3-34.8v35.3
+								C381.6,225.3,383.7,227.4,386.2,227.4L386.2,227.4z"/>
+							<path class="st18" d="M381.6,180.3h4.3c2.8,0,5,2.2,5,5v0c0,2.8-2.2,5-5,5h-4.3V180.3L381.6,180.3L381.6,180.3z"/>
+						</g>
+						<g>
+							<path class="st17" d="M446.2,227.4h-11c-2.8,0-5-2.4-4.6-5.2c1.4-10.8,6-34.8,20.3-34.8v35.3
+								C450.9,225.3,448.8,227.4,446.2,227.4L446.2,227.4z"/>
+							<path class="st17" d="M437.9,166.7c0,9.2,3.7,14.7,7.7,17.2c2.5,1.5,5.4-0.9,5.4-4.4v-42.3
+								C445.6,137.1,437.9,153.3,437.9,166.7L437.9,166.7z"/>
+							<path class="st18" d="M451,190.3h-4.3c-2.8,0-5-2.2-5-5v0c0-2.8,2.2-5,5-5h4.3V190.3L451,190.3L451,190.3z"/>
+						</g>
+						<path class="st19" d="M457.9,163.4c0.3,2.4-1.9,4.3-4.2,3.7c-2.9-0.8-6.4-1.6-8.7-1.6c-4.5,0-9.1,3.1-13.6,3.1
+							s-9.1-3.1-13.6-3.1s-9.1,3.1-13.6,3.1s-9.1-3.1-13.6-3.1c-2.2,0-5.6,0.8-8.4,1.5c-2.4,0.6-4.6-1.4-4.1-3.9
+							c1.4-7,3.7-19.1,4.9-25c0.4-2,2-3.6,4.1-3.9c5.5-0.8,14,0,17.6,0c4.5,0,8.9,3.1,13.4,3.1s8.9-3.1,13.4-3.1
+							c3.6,0,12.9-0.8,18.7,0c2.1,0.3,3.8,1.9,4.1,4C455.2,144.4,456.9,156.5,457.9,163.4L457.9,163.4z"/>
+					</g>
+				</g>
+				<rect x="413.2" y="137.1" class="st20" width="6" height="98.1"/>
+				<polygon class="st20" points="379.1,194 379.1,188 453.2,189 453.1,195 				"/>
+			</g>
+			<g>
+				<path class="st13" d="M599.7,141.3L599.7,141.3c18.6,0,33.7,15.1,33.7,33.7v43.7c0,4.3-3.5,7.8-7.8,7.8h-51.7
+					c-4.3,0-7.8-3.5-7.8-7.8V175C566,156.4,581.1,141.3,599.7,141.3L599.7,141.3z"/>
+				<g>
+					<defs>
+						<path id="SVGID_00000127742546254006326110000005097102945316824984_" d="M599.6,141.3h0.2c18.6,0,33.8,15.1,33.8,33.8v43.8
+							c0,4.3-3.5,7.9-7.8,7.9h-52c-4.3,0-7.8-3.5-7.8-7.9v-43.8C565.9,156.4,581,141.3,599.6,141.3L599.6,141.3z"/>
+					</defs>
+					<clipPath id="SVGID_00000155865449666102541690000017749080605930619816_">
+						<use xlink:href="#SVGID_00000127742546254006326110000005097102945316824984_"  style="overflow:visible;"/>
+					</clipPath>
+					<g style="clip-path:url(#SVGID_00000155865449666102541690000017749080605930619816_);">
+						<g>
+							<path class="st17" d="M577.5,167.2c0,9.4-3.8,15-7.9,17.5c-2.5,1.6-5.5-0.9-5.5-4.5v-43.2
+								C569.6,137.1,577.5,153.6,577.5,167.2L577.5,167.2z"/>
+							<path class="st17" d="M568.9,229.1h11.3c2.8,0,5-2.5,4.7-5.3c-1.4-11-6.1-35.4-20.7-35.4v36
+								C564.1,227,566.2,229.1,568.9,229.1z"/>
+							<path class="st18" d="M564.1,181.2h4.3c2.8,0,5.1,2.3,5.1,5.1v0c0,2.8-2.3,5.1-5.1,5.1h-4.3V181.2L564.1,181.2z"/>
+						</g>
+						<g>
+							<path class="st17" d="M630,229.1h-11.3c-2.8,0-5-2.5-4.7-5.3c1.4-11,6.1-35.4,20.7-35.4v36C634.8,227,632.7,229.1,630,229.1z
+								"/>
+							<path class="st17" d="M621.5,167.2c0,9.4,3.8,15,7.9,17.5c2.5,1.6,5.5-0.9,5.5-4.5v-43.2
+								C629.4,137.1,621.5,153.6,621.5,167.2L621.5,167.2z"/>
+							<path class="st18" d="M634.9,191.3h-4.3c-2.8,0-5.1-2.3-5.1-5.1v0c0-2.8,2.3-5.1,5.1-5.1h4.3V191.3L634.9,191.3z"/>
+						</g>
+						<path class="st19" d="M642,163.9c0.3,2.4-1.9,4.4-4.3,3.8c-2.9-0.8-6.5-1.6-8.8-1.6c-4.6,0-9.2,3.1-13.9,3.1
+							s-9.2-3.1-13.9-3.1s-9.2,3.1-13.9,3.1s-9.2-3.1-13.9-3.1c-2.3,0-5.7,0.8-8.6,1.5c-2.4,0.6-4.7-1.5-4.2-3.9
+							c1.4-7.1,3.8-19.4,5-25.5c0.4-2.1,2.1-3.6,4.2-3.9c5.6-0.8,14.3,0,17.9,0c4.5,0,9.1,3.1,13.6,3.1s9.1-3.1,13.6-3.1
+							c3.7,0,13.1-0.8,19,0c2.2,0.3,3.8,2,4.2,4.1C639.2,144.5,640.9,156.8,642,163.9L642,163.9z"/>
+					</g>
+				</g>
+				<rect x="595.1" y="137.1" class="st20" width="6.1" height="100"/>
+				<polygon class="st20" points="560.7,194.3 560.3,188.2 635.6,183.5 636.1,189.6 				"/>
+			</g>
+			<g>
+				<defs>
+					<path id="SVGID_00000167369961064010885220000006441685890151615130_" d="M503.8-45.1h0.2c20.2,0,36.7,16.4,36.7,36.7v23
+						c0,4.7-3.8,8.5-8.5,8.5h-56.5c-4.7,0-8.5-3.8-8.5-8.5v-23C467.1-28.7,483.6-45.1,503.8-45.1L503.8-45.1z"/>
+				</defs>
+				<clipPath id="SVGID_00000168796857375772554710000015006601971508096408_">
+					<use xlink:href="#SVGID_00000167369961064010885220000006441685890151615130_"  style="overflow:visible;"/>
+				</clipPath>
+				<g style="clip-path:url(#SVGID_00000168796857375772554710000015006601971508096408_);">
+					<g>
+						<path class="st17" d="M479.8-17c0,10.2-4.1,16.3-8.6,19c-2.8,1.7-5.9-1-5.9-4.9v-46.9C471.2-49.7,479.8-31.8,479.8-17z"/>
+						<path class="st17" d="M470.4,50.3h12.2c3.1,0,5.5-2.7,5.1-5.8c-1.5-12-6.6-38.5-22.5-38.5v39.1
+							C465.3,48,467.6,50.3,470.4,50.3L470.4,50.3z"/>
+						<path class="st18" d="M465.3-1.9h4.7c3,0,5.5,2.5,5.5,5.5v0c0,3-2.5,5.5-5.5,5.5h-4.7V-1.9L465.3-1.9z"/>
+					</g>
+					<g>
+						<path class="st17" d="M536.9,50.3h-12.2c-3.1,0-5.5-2.7-5.1-5.8C521,32.5,526.2,6,542,6v39.1C542,48,539.7,50.3,536.9,50.3
+							L536.9,50.3z"/>
+						<path class="st17" d="M527.6-17c0,10.2,4.1,16.3,8.6,19c2.8,1.7,5.9-1,5.9-4.9v-46.9C536.2-49.7,527.6-31.8,527.6-17z"/>
+						<path class="st18" d="M542.1,9.2h-4.7c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h4.7V9.2L542.1,9.2z"/>
+					</g>
+				</g>
+			</g>
+			<g>
+				<defs>
+					<path id="SVGID_00000110437588400708553960000000402681062045067912_" d="M503.8-45.1h0.2c20.2,0,36.7,16.4,36.7,36.7v23
+						c0,4.7-3.8,8.5-8.5,8.5h-56.5c-4.7,0-8.5-3.8-8.5-8.5v-23C467.1-28.7,483.6-45.1,503.8-45.1L503.8-45.1z"/>
+				</defs>
+				<clipPath id="SVGID_00000109012488654285442550000011448568516357647503_">
+					<use xlink:href="#SVGID_00000110437588400708553960000000402681062045067912_"  style="overflow:visible;"/>
+				</clipPath>
+				<g style="clip-path:url(#SVGID_00000109012488654285442550000011448568516357647503_);">
+					<g>
+						<path class="st17" d="M479.8-17c0,10.2-4.1,16.3-8.6,19c-2.8,1.7-5.9-1-5.9-4.9v-46.9C471.2-49.7,479.8-31.8,479.8-17z"/>
+						<path class="st17" d="M470.4,50.3h12.2c3.1,0,5.5-2.7,5.1-5.8c-1.5-12-6.6-38.5-22.5-38.5v39.1
+							C465.3,48,467.6,50.3,470.4,50.3L470.4,50.3z"/>
+						<path class="st18" d="M465.3-1.9h4.7c3,0,5.5,2.5,5.5,5.5v0c0,3-2.5,5.5-5.5,5.5h-4.7V-1.9L465.3-1.9z"/>
+					</g>
+					<g>
+						<path class="st17" d="M536.9,50.3h-12.2c-3.1,0-5.5-2.7-5.1-5.8C521,32.5,526.2,6,542,6v39.1C542,48,539.7,50.3,536.9,50.3
+							L536.9,50.3z"/>
+						<path class="st17" d="M527.6-17c0,10.2,4.1,16.3,8.6,19c2.8,1.7,5.9-1,5.9-4.9v-46.9C536.2-49.7,527.6-31.8,527.6-17z"/>
+						<path class="st18" d="M542.1,9.2h-4.7c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h4.7V9.2L542.1,9.2z"/>
+					</g>
+				</g>
+			</g>
+			<rect x="500.5" y="-47.7" class="st20" width="6.6" height="78.7"/>
+			<polygon class="st20" points="463.1,5.8 462.7,-0.8 544.5,-5.9 545,0.7 			"/>
+			<path class="st20" d="M542.9,216.4L542.9,216.4c2.6,0,4.6,2.1,4.6,4.6v6.8c0,2.6-2.1,4.6-4.6,4.6l0,0c-2.6,0-4.6-2.1-4.6-4.6
+				v-6.8C538.3,218.5,540.3,216.4,542.9,216.4z"/>
+			<g>
+				<defs>
+					<path id="SVGID_00000089551913632628446320000006891879991212302999_" d="M653.3,101H365.4c-9.7,0-17-8.5-15.1-17.7l8-40.4
+						c1.4-7,7.7-12.1,15.1-12.1h270c7.1,0,13.3,4.7,15,11.5l9.9,40.4C670.6,92,663.3,101,653.3,101L653.3,101z"/>
+				</defs>
+				<clipPath id="SVGID_00000127042454689822578910000002201863883656430985_">
+					<use xlink:href="#SVGID_00000089551913632628446320000006891879991212302999_"  style="overflow:visible;"/>
+				</clipPath>
+				<g style="clip-path:url(#SVGID_00000127042454689822578910000002201863883656430985_);">
+					<path class="st25" d="M652.7,50.4c-6,0-11.7-2.1-16.2-6c-4.5,3.9-10.2,6-16.2,6c-6.9,0-13.4-2.8-18.1-7.9
+						c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5c-4.7,4.8-11,7.5-17.7,7.5s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9
+						s-13.8-3-18.5-8.3c-4.7,5.3-11.3,8.3-18.5,8.3s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5
+						c-4.6,4.8-11,7.5-17.7,7.5s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9c-12.2,0-22.8-9.1-24.5-21.2c-0.1-0.9,0.5-1.7,1.4-1.9
+						c0.9-0.1,1.7,0.5,1.9,1.4c1.5,10.5,10.6,18.4,21.2,18.4c6.6,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6
+						c4.1,5.2,10.2,8.1,16.8,8.1s12.4-2.8,16.4-7.7c0.6-0.8,1.9-0.8,2.5,0c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1s13.1-3.1,17.1-8.6c0.3-0.4,0.8-0.7,1.3-0.7s1,0.2,1.3,0.7
+						c4.1,5.5,10.4,8.6,17.2,8.6c6.8,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1
+						s12.3-2.8,16.4-7.7c0.3-0.4,0.8-0.6,1.3-0.6l0,0c0.5,0,1,0.2,1.3,0.6c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1c5.6,0,11-2.2,15-6.1c0.6-0.6,1.7-0.6,2.3,0
+						c4,4,9.4,6.1,15,6.1c10.6,0,19.7-7.9,21.2-18.4c0.1-0.9,1-1.5,1.9-1.4c0.9,0.1,1.5,1,1.4,1.9C675.4,41.3,664.9,50.4,652.7,50.4
+						L652.7,50.4z"/>
+					<path class="st25" d="M652.7,71.9c-6,0-11.7-2.1-16.2-6c-4.5,3.9-10.2,6-16.2,6c-6.9,0-13.4-2.8-18.1-7.9
+						c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5c-4.7,4.8-11,7.5-17.7,7.5s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9
+						s-13.8-3-18.5-8.3c-4.7,5.3-11.3,8.3-18.5,8.3s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5
+						c-4.6,4.8-11,7.5-17.7,7.5S390.7,69.1,386,64c-4.7,5-11.2,7.9-18.1,7.9c-12.2,0-22.8-9.1-24.5-21.2c-0.1-0.9,0.5-1.7,1.4-1.9
+						s1.7,0.5,1.9,1.4c1.5,10.5,10.6,18.4,21.2,18.4c6.6,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6
+						c4.1,5.2,10.2,8.1,16.8,8.1s12.4-2.8,16.4-7.7c0.6-0.8,1.9-0.8,2.5,0c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1s13.1-3.1,17.1-8.6c0.3-0.4,0.8-0.7,1.3-0.7s1,0.2,1.3,0.7
+						c4.1,5.4,10.4,8.6,17.2,8.6c6.8,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1
+						s12.3-2.8,16.4-7.7c0.3-0.4,0.8-0.6,1.3-0.6l0,0c0.5,0,1,0.2,1.3,0.6c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1c5.6,0,11-2.2,15-6.1c0.6-0.6,1.7-0.6,2.3,0
+						c4,4,9.4,6.1,15,6.1c10.6,0,19.7-7.9,21.2-18.4c0.1-0.9,1-1.5,1.9-1.4c0.9,0.1,1.5,1,1.4,1.9C675.4,62.8,664.9,71.9,652.7,71.9
+						L652.7,71.9z"/>
+					<path class="st25" d="M652.7,93.4c-6,0-11.7-2.1-16.2-6c-4.5,3.9-10.2,6-16.2,6c-6.9,0-13.4-2.8-18.1-7.9
+						c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5c-4.7,4.8-11,7.5-17.7,7.5s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9
+						s-13.8-3-18.5-8.3c-4.7,5.3-11.3,8.3-18.5,8.3s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9s-13.1-2.7-17.7-7.5
+						c-4.6,4.8-11,7.5-17.7,7.5s-13.4-2.8-18.1-7.9c-4.7,5-11.2,7.9-18.1,7.9c-12.2,0-22.8-9.1-24.5-21.2c-0.1-0.9,0.5-1.7,1.4-1.9
+						c0.9-0.1,1.7,0.5,1.9,1.4c1.5,10.5,10.6,18.4,21.2,18.4c6.6,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6
+						c4.1,5.2,10.2,8.1,16.8,8.1s12.4-2.8,16.4-7.7c0.6-0.8,1.9-0.8,2.5,0c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1s13.1-3.1,17.1-8.6c0.3-0.4,0.8-0.7,1.3-0.7s1,0.2,1.3,0.7
+						c4.1,5.4,10.4,8.6,17.2,8.6c6.8,0,12.7-3,16.8-8.1c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1
+						s12.3-2.8,16.4-7.7c0.3-0.4,0.8-0.6,1.3-0.6l0,0c0.5,0,1,0.2,1.3,0.6c4.1,4.9,10.1,7.7,16.4,7.7s12.7-3,16.8-8.1
+						c0.3-0.4,0.8-0.6,1.3-0.6s1,0.2,1.3,0.6c4.1,5.2,10.2,8.1,16.8,8.1c5.6,0,11-2.2,15-6.1c0.6-0.6,1.7-0.6,2.3,0
+						c4,4,9.4,6.1,15,6.1c10.6,0,19.7-7.9,21.2-18.4c0.1-0.9,1-1.5,1.9-1.4s1.5,1,1.4,1.9C675.4,84.2,664.9,93.4,652.7,93.4
+						L652.7,93.4z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_00000068670187546312765290000006997648838893338777_" x="489.2" y="333.7" width="231.1" height="169.9"/>
+	</defs>
+	<clipPath id="SVGID_00000001661444385947318150000005706384595966266253_">
+		<use xlink:href="#SVGID_00000068670187546312765290000006997648838893338777_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000001661444385947318150000005706384595966266253_);">
+		<g>
+			<g>
+				<path class="st27" d="M570.1,463.5l10.3-1.2c1.4-0.2,2.5-1.2,2.5-2.5l0.5-81.3c0-0.7-0.4-1.4-1-1.9l-16.5-12.4
+					c-1.2-0.9-3.2-0.7-4.1,0.4L549,380c-0.5,0.6-0.7,1.3-0.5,2l18.4,79.6C567.2,462.9,568.6,463.7,570.1,463.5L570.1,463.5z"/>
+				<path class="st27" d="M600.9,456.4l11.9-0.2c1.5,0,2.7-1,2.8-2.3l6.1-79.7c0-0.6-0.2-1.3-0.6-1.8l-13.5-14.3
+					c-1.1-1.2-3.2-1.2-4.3-0.1l-14.5,14.5c-0.5,0.5-0.8,1.3-0.7,2L600.9,456.4L600.9,456.4L600.9,456.4z"/>
+				<path class="st27" d="M637,464.3l10.4,0.2c1.4,0,2.6-0.9,2.8-2.1l14.3-80.3c0.1-0.7-0.1-1.5-0.7-2l-14.2-14.4
+					c-1.1-1.1-3-1.1-4.2-0.1l-15.2,13.4c-0.6,0.5-0.9,1.2-0.8,1.9l4.7,81.1C634.3,463.2,635.5,464.3,637,464.3L637,464.3z"/>
+				<path class="st27" d="M677.4,457.5l11.9,0.4c1.5,0,2.8-0.9,2.9-2.2l11.4-79.2c0.1-0.6-0.1-1.3-0.5-1.8l-12.5-15
+					c-1-1.2-3.1-1.4-4.3-0.3l-15.4,13.7c-0.6,0.5-0.9,1.2-0.8,2L677.4,457.5L677.4,457.5L677.4,457.5z"/>
+				<path class="st27" d="M726,468.4l10.4-0.8c1.4-0.1,2.5-1.1,2.6-2.4l4.5-81.2c0-0.7-0.3-1.5-0.9-1.9l-15.9-13
+					c-1.2-1-3.1-0.9-4.1,0.3L709,384.2c-0.5,0.5-0.7,1.3-0.6,2l14.5,80.2C723.2,467.6,724.6,468.5,726,468.4L726,468.4z"/>
+				<path class="st27" d="M540.7,467.6l10-2.4c1.4-0.3,2.2-1.5,2.1-2.7l-12-80.6c-0.1-0.7-0.6-1.4-1.3-1.8l-18.3-10.3
+					c-1.4-0.8-3.2-0.4-4,0.9l-10.3,16.6c-0.4,0.6-0.5,1.4-0.2,2l30.6,76.6C537.8,467.3,539.3,468,540.7,467.6L540.7,467.6z"/>
+				<path class="st27" d="M508.4,422.3l277.1-8.4c1.5,0,2.7-1.1,2.7-2.4l0.2-9.3c0-1.4-1.3-2.6-2.9-2.5l-280.2,6.7
+					c-1.8,0-3.1,1.5-2.7,3l2.9,11C505.9,421.5,507.1,422.4,508.4,422.3L508.4,422.3z"/>
+			</g>
+			<path d="M762.5,418.1c-0.3,15.5,0.3,30.6,0.3,46.2c0,1.6,0,3.1,0,4.7c0,24.9,0,49.8,0,49.8l-276,1.4c-0.8-14.8,12.7-26.9,26.4-34
+				c-2.3-3.4-3.6-7.4-4.5-11.3c-0.3-2.4-0.3-4.8,0-7.1c0.3-2.1,0.8-4.1,1.6-6.1c4.6-13.6,19.9-22.7,36-22.8c2,0,4,0.1,6,0.4
+				c2.1,0.2,4.1,0.8,6,1.1c3.9-23.5,35.5-26.6,55.5-16.8c1.4,0.6,2.8,1.2,4.2,2c6.8,3.6,12.3,8.8,15.7,15.8c0.8,1.6,1.5,3.2,2.1,4.8
+				c1.3-1.1,2.6-2.4,4-3.5c1.4-1.2,2.8-2.2,4.4-3.1c18.3-11.6,43.3-16.5,64.3-7.1c1.6,0.6,3.2,1.3,4.7,2.1c1.6,0.5,2.9,1.4,4.6,2.2
+				c1.1-1.6,2.4-3.1,3.8-4.5C731.9,422.4,747.2,415.5,762.5,418.1"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg
new file mode 100644
index 00000000000..674bba6684d
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clippath);}.cls-3{fill:#69775f;}.cls-4{fill:#7eab98;}.cls-5{fill:#804c21;}.cls-6{fill:#9c866d;}.cls-7{fill:#8c7d6b;}.cls-8{fill:#8f652d;}.cls-9{fill:#a87b3a;}.cls-10{fill:#b09593;}.cls-11{fill:#a58050;}.cls-12{fill:#634e5a;}.cls-13{fill:#594545;}.cls-14{fill:#644f65;}.cls-15{fill:#383f3f;}.cls-16{fill:#3d373a;}.cls-17{fill:#47394f;}.cls-18{fill:#776c56;}.cls-19{fill:#7a657c;}.cls-20{fill:#786280;}.cls-21{fill:#778d77;}.cls-22{clip-path:url(#clippath-1);}.cls-23{clip-path:url(#clippath-4);}.cls-24{clip-path:url(#clippath-3);}.cls-25{clip-path:url(#clippath-2);}.cls-26{clip-path:url(#clippath-7);}.cls-27{clip-path:url(#clippath-6);}.cls-28{clip-path:url(#clippath-5);}</style><clipPath id="clippath"><rect class="cls-1" x="755.66" y=".53" width="559.27" height="509.05" transform="translate(2070.6 510.12) rotate(-180)"/></clipPath><clipPath id="clippath-1"><rect class="cls-1" x="273.3" y="-.79" width="446.76" height="502.08"/></clipPath><clipPath id="clippath-2"><path class="cls-1" d="M416.36,141.24h.18c18.27,0,33.1,14.83,33.1,33.1v42.93c0,4.25-3.45,7.7-7.7,7.7h-50.97c-4.25,0-7.7-3.45-7.7-7.7v-42.93c0-18.27,14.83-33.1,33.1-33.1Z"/></clipPath><clipPath id="clippath-3"><path class="cls-1" d="M599.6,141.32h.18c18.63,0,33.75,15.12,33.75,33.75v43.77c0,4.33-3.52,7.85-7.85,7.85h-51.98c-4.33,0-7.85-3.52-7.85-7.85v-43.77c0-18.63,15.12-33.75,33.75-33.75Z"/></clipPath><clipPath id="clippath-4"><path class="cls-1" d="M503.79-45.11h.19c20.23,0,36.66,16.43,36.66,36.66V14.52c0,4.71-3.82,8.53-8.53,8.53h-56.45c-4.71,0-8.53-3.82-8.53-8.53V-8.46c0-20.23,16.43-36.66,36.66-36.66Z"/></clipPath><clipPath id="clippath-5"><path class="cls-1" d="M503.79-45.11h.19c20.23,0,36.66,16.43,36.66,36.66V14.52c0,4.71-3.82,8.53-8.53,8.53h-56.45c-4.71,0-8.53-3.82-8.53-8.53V-8.46c0-20.23,16.43-36.66,36.66-36.66Z"/></clipPath><clipPath id="clippath-6"><path class="cls-1" d="M653.34,101H365.44c-9.67,0-16.95-8.52-15.13-17.71l7.99-40.37c1.39-7.02,7.74-12.1,15.13-12.1h269.99c7.14,0,13.34,4.74,14.99,11.46l9.91,40.37c2.3,9.36-5.04,18.35-14.99,18.35Z"/></clipPath><clipPath id="clippath-7"><rect class="cls-1" x="489.24" y="333.66" width="231.12" height="169.94"/></clipPath></defs><rect class="cls-3" x="-1.53" y="244.74" width="721.59" height="260.63"/><rect class="cls-7" x="-.36" y="-1.96" width="719.46" height="259.97"/><path class="cls-18" d="M617.59,79.85v63.02h-181.13v-17.23c0-12.6-10.22-22.82-22.82-22.82h-68.24c-12.6,0-22.82,10.22-22.82,22.82v54.07h-29.17V49.24c0-11.16-9.05-20.21-20.21-20.21h-101.24c-11.16,0-20.21,9.05-20.21,20.21v106.56h-44.44v-33.43c0-13.1-10.62-23.71-23.71-23.71H11.58c-13.1,0-23.71,10.62-23.71,23.71v151.89H731.09V79.85c0-11.75-9.52-21.27-21.27-21.27h-70.97c-11.75,0-21.27,9.52-21.27,21.27Z"/><g class="cls-2"><g><polygon class="cls-17" points="799.03 315.32 678.8 276.02 662.4 337.05 782.9 399.92 799.03 315.32"/><ellipse class="cls-20" cx="670.65" cy="306.43" rx="31.64" ry="22.41" transform="translate(237.57 903.19) rotate(-78.59)"/></g><path class="cls-17" d="M698.24,466.16c14.77,1.52,29.96-1.52,39.69-13.34,.17-.19,.34-.38,.5-.57,20.15-70.14,14.36-465.07,14.36-465.07,1.24-52.7,44.31-94.78,97.03-94.78h0c51.92,0,94.64,40.86,96.96,92.73l19.56,438.84,.39,.03s-1.44,15.97,9.14,28.25c.17,.19,.33,.38,.5,.57,9.73,11.82,24.92,14.86,39.69,13.34,.25,0,.5,0,.75,0,48.5,.15,83.99,27.72,83.99,65.7h-26.55c-9.95,0-19.7-2.54-28.51-7.17l-.1-.05c-9.42-4.91-21.04-7.05-31.36-4.01-4.48,1.32-8.59,3.39-12.59,5.69-6.4,3.68-13.68,5.54-21.06,5.54h0c-.35,0-.71,0-1.06,0-8.29,1.14-17.02,.38-25.41,0h-1.05c-13.67,0-27.87,0-41.84,0,0,0-98.69,.43-145.17,.56-12.46,.04-24.69-3.63-34.9-10.76-6.09-4.24-14.01-8.03-22.36-8.03-10.55,0-17.22,4.51-22.05,9.57-5.24,5.5-12.48,8.66-20.08,8.66h-49.03c22.03-67.61,80.31-65.7,80.56-65.7Z"/><path class="cls-4" d="M392.74-152.81l-.59-.56,2.56,.02c2.49-.65,5.05-1.19,7.66-1.58,10.38-1.56,20.58-.83,30.08,1.83l810.18,5.33c5.55-1.23,11.42-1.87,17.5-1.83,33.56,.25,60.61,21.29,60.42,46.98-.19,25.07-26.24,45.31-58.67,46.04,1.46,4.59,2.58,9.35,3.32,14.26,7.46,49.57-26.19,95.74-75.15,103.1-11.96,1.8-23.73,1.11-34.8-1.67,.69,2.44,1.24,4.94,1.64,7.5,5.52,34.87-17.93,67.56-52.38,73-12.16,1.92-24.05,.19-34.61-4.38-7.76,18.85-30.78,32.52-57.97,32.52-26.84,0-49.61-13.32-57.66-31.79-10.7,18.74-31.22,31.42-54.78,31.42-25.06,0-46.68-14.34-56.7-35.06-9.56,10.33-23.4,16.83-38.8,16.83-10.21,0-19.73-2.86-27.77-7.79-5.91,20.95-30.26,36.65-59.39,36.65-33.56,0-60.77-20.83-60.77-46.53,0-.72,.02-1.44,.07-2.16-25.72,15.85-54.89,15.6-67.45-1.49-3.55-4.83-5.41-10.52-5.76-16.65-9.11,5.52-19.84,8.71-31.31,8.71-33.12,0-59.97-26.52-59.97-59.23,0-9.77,2.39-18.98,6.63-27.1-3.84,.61-7.78,.92-11.8,.89-30.7-.23-56.66-19.84-66.09-46.98-38,3.92-72.72-22.63-78.45-60.72-5.4-35.92,16.86-69.63,50.84-79.58Z"/></g><g><path class="cls-6" d="M151.72,300.35c-7.99,4.04-9.76-3.38-18.71-3.38s-8.95,3.57-17.91,3.57-8.95-3.57-17.91-3.57c-8.95,0-8.95,3.57-17.91,3.57-8.95,0-8.95-3.57-17.91-3.57s-8.95,3.57-17.91,3.57c-8.96,0-8.96-3.57-17.91-3.57-8.96,0-10.73,7.42-18.72,3.38-4.04-2.04,2.59-6.12,2.59-10.65s-3.57-4.53-3.57-9.06,3.57-4.53,3.57-9.06-3.57-4.53-3.57-9.05,3.57-4.53,3.57-9.06-3.57-4.53-3.57-9.05,3.57-4.53,3.57-9.06-6.64-8.61-2.59-10.66c7.99-4.04,9.76,3.38,18.71,3.38s8.95-3.57,17.91-3.57,8.95,3.57,17.91,3.57,8.95-3.57,17.91-3.57,8.95,3.57,17.91,3.57,8.95-3.57,17.91-3.57,8.96,3.57,17.91,3.57,10.73-7.42,18.72-3.38c4.04,2.04-2.59,6.12-2.59,10.65s3.57,4.53,3.57,9.06-3.57,4.53-3.57,9.06,3.57,4.53,3.57,9.05-3.57,4.53-3.57,9.06,3.57,4.53,3.57,9.05-4.71,5.16-3.51,9.53c1.55,5.64,6.57,8.14,2.53,10.18Z"/><rect class="cls-13" x="24.11" y="225.48" width="9.06" height="76.58" rx="4.53" ry="4.53"/><rect class="cls-13" x="126.22" y="225.48" width="9.06" height="76.58" rx="4.53" ry="4.53"/></g><g><path class="cls-6" d="M319.91,311.22c-8.38,4.52-10.24-3.78-19.63-3.78s-9.39,3.99-18.79,3.99c-9.39,0-9.39-3.99-18.79-3.99-9.39,0-9.39,3.99-18.79,3.99-9.39,0-9.39-3.99-18.79-3.99-9.39,0-9.39,3.99-18.79,3.99-9.4,0-9.4-3.99-18.79-3.99-9.4,0-11.25,8.3-19.64,3.78-4.24-2.28,2.72-6.84,2.72-11.91s-3.75-5.06-3.75-10.12,3.75-5.06,3.75-10.12-3.75-5.06-3.75-10.12,3.75-5.06,3.75-10.13-3.75-5.06-3.75-10.12,3.75-5.06,3.75-10.13-6.96-9.62-2.72-11.91c8.38-4.52,10.24,3.78,19.63,3.78s9.39-3.99,18.79-3.99,9.39,3.99,18.79,3.99,9.39-3.99,18.79-3.99,9.39,3.99,18.79,3.99,9.39-3.99,18.79-3.99,9.4,3.99,18.79,3.99,11.25-8.3,19.64-3.78c4.24,2.28-2.72,6.84-2.72,11.91s3.75,5.06,3.75,10.12c0,5.06-3.75,5.06-3.75,10.12,0,5.06,3.75,5.06,3.75,10.12s-3.75,5.06-3.75,10.13,3.75,5.06,3.75,10.12-4.94,5.77-3.68,10.66c1.62,6.3,6.89,9.1,2.65,11.38Z"/><rect class="cls-13" x="186.04" y="227.52" width="9.5" height="85.6" rx="4.64" ry="4.64"/><rect class="cls-13" x="293.15" y="227.52" width="9.5" height="85.6" rx="4.64" ry="4.64"/></g><g class="cls-22"><g><path class="cls-16" d="M594.54,130.04h-175.31V-4.83c0-9.48,4.02-18.52,11.07-24.86l50.67-45.65c12.23-11.02,30.66-11.5,43.45-1.15l57.71,46.72c7.85,6.35,12.41,15.91,12.41,26.01V130.04Z"/><rect class="cls-16" x="365.19" y="34.59" width="284.47" height="280.7" rx="10.61" ry="10.61"/><path class="cls-21" d="M737.79,329.86c.04-.51,.05-1.03,.05-1.55,0-7.94-4.18-14.9-10.44-18.75,.88-2.38,1.36-4.96,1.36-7.65,0-12.12-9.73-21.94-21.73-21.94-1.38,0-2.72,.13-4.02,.38-.4-2.06-1.2-3.97-2.42-5.67-6.36-8.84-21.79-8.28-34.47,1.25-3.31,2.49-6.1,5.34-8.31,8.35-4.88-6.81-14.19-11.41-24.87-11.41-6.58,0-12.64,1.75-17.47,4.68-4.34-6.86-12-11.42-20.74-11.42h0c-2.11,0-3.83,1.76-3.83,3.92v59.8h146.9Z"/><path class="cls-21" d="M277.43,329.86c-.03-.51-.05-1.03-.05-1.56,0-7.99,3.96-14.98,9.89-18.85-.83-2.4-1.29-4.99-1.29-7.69,0-12.18,9.21-22.06,20.57-22.06,1.3,0,2.57,.13,3.81,.38,.38-2.07,1.13-4,2.29-5.7,6.02-8.89,20.63-8.33,32.64,1.25,3.13,2.5,5.78,5.37,7.87,8.4,4.62-6.84,13.43-11.47,23.55-11.47,6.23,0,11.97,1.76,16.54,4.71,4.1-6.9,11.36-11.48,19.63-11.48h0c1.99,0,3.63,1.77,3.63,3.94v60.14s-98.03,0-98.03,0h-41.04Z"/><path class="cls-14" d="M508.33,141.67h0c26.04,0,47.19,21.14,47.19,47.19v75.42h-94.37v-75.42c0-26.04,21.14-47.19,47.19-47.19Z"/><path class="cls-10" d="M601.02,354.55h-190.07c-4.71,0-8.34-4.17-7.68-8.84l10.46-74.55c.54-3.83,3.82-6.68,7.68-6.68h165.37c3.72,0,6.92,2.65,7.62,6.3l14.24,74.55c.91,4.78-2.75,9.22-7.62,9.22Z"/><path class="cls-10" d="M508.33,156.89h0c16.05,0,29.09,13.03,29.09,29.09v17.83c0,3.74-3.03,6.77-6.77,6.77h-44.64c-3.74,0-6.77-3.03-6.77-6.77v-17.83c0-16.05,13.03-29.09,29.09-29.09Z"/><path class="cls-10" d="M503.85-44.43h.08c20.21,0,36.62,16.41,36.62,36.62V14.56c0,4.7-3.82,8.52-8.52,8.52h-56.28c-4.7,0-8.52-3.82-8.52-8.52V-7.81c0-20.21,16.41-36.62,36.62-36.62Z"/><path class="cls-12" d="M653.34,101H365.44c-9.67,0-16.95-8.52-15.13-17.71l7.99-40.37c1.39-7.02,7.74-12.1,15.13-12.1h269.99c7.14,0,13.34,4.74,14.99,11.46l9.91,40.37c2.3,9.36-5.04,18.35-14.99,18.35Z"/><path class="cls-15" d="M409.28,313.95c-.87,0-1.59-.7-1.61-1.58-.02-.89,.69-1.63,1.58-1.65l198.7-4.3s.02,0,.04,0c.87,0,1.59,.7,1.61,1.58,.02,.89-.69,1.63-1.58,1.65l-198.7,4.3s-.02,0-.04,0Z"/><path class="cls-15" d="M600.18,287.6s-.02,0-.02,0l-192.24-2.69c-.89-.01-1.6-.74-1.59-1.64,.01-.89,.75-1.61,1.64-1.59l192.24,2.69c.89,.01,1.6,.74,1.59,1.64-.01,.88-.73,1.59-1.61,1.59Z"/><path class="cls-15" d="M613.09,339.49s-.02,0-.03,0l-216.17-3.76c-.89-.02-1.6-.75-1.58-1.64,.02-.88,.73-1.59,1.61-1.59,0,0,.02,0,.03,0l216.17,3.76c.89,.02,1.6,.75,1.58,1.64-.02,.88-.73,1.59-1.61,1.59Z"/><g><path class="cls-10" d="M416.39,141.22h0c18.22,0,33.02,14.79,33.02,33.02v42.81c0,4.24-3.44,7.68-7.68,7.68h-50.67c-4.24,0-7.68-3.44-7.68-7.68v-42.81c0-18.22,14.79-33.02,33.02-33.02Z"/><g class="cls-25"><g><path class="cls-8" d="M394.67,166.67c0,9.22-3.69,14.68-7.74,17.18-2.49,1.53-5.36-.86-5.36-4.41v-42.34c5.34,0,13.09,16.21,13.09,29.58Z"/><path class="cls-8" d="M386.22,227.36h11.04c2.79,0,4.95-2.44,4.6-5.2-1.36-10.82-5.97-34.75-20.28-34.75v35.32c0,2.56,2.08,4.63,4.64,4.63Z"/><path class="cls-5" d="M381.58,180.31h4.27c2.75,0,4.98,2.23,4.98,4.98v.04c0,2.75-2.23,4.98-4.98,4.98h-4.27v-9.99h0Z"/></g><g><path class="cls-8" d="M446.22,227.36h-11.04c-2.79,0-4.95-2.44-4.6-5.2,1.36-10.82,5.97-34.75,20.28-34.75v35.32c0,2.56-2.08,4.63-4.64,4.63Z"/><path class="cls-8" d="M437.86,166.67c0,9.22,3.69,14.68,7.74,17.18,2.49,1.53,5.36-.86,5.36-4.41v-42.34c-5.34,0-13.09,16.21-13.09,29.58Z"/><path class="cls-5" d="M441.71,180.31h4.27c2.75,0,4.98,2.23,4.98,4.98v.04c0,2.75-2.23,4.98-4.98,4.98h-4.27v-9.99h0Z" transform="translate(892.67 370.6) rotate(180)"/></g><path class="cls-9" d="M457.92,163.37c.34,2.38-1.87,4.32-4.19,3.69-2.86-.78-6.35-1.58-8.66-1.58-4.53,0-9.06,3.06-13.59,3.06s-9.06-3.06-13.59-3.06-9.06,3.06-13.59,3.06-9.06-3.06-13.59-3.06c-2.24,0-5.59,.75-8.41,1.51-2.38,.64-4.61-1.43-4.14-3.85,1.35-7.01,3.69-19.06,4.93-25.01,.42-2.01,2.04-3.56,4.07-3.85,5.49-.77,13.98,0,17.57,0,4.45,0,8.9,3.06,13.35,3.06s8.9-3.06,13.35-3.06c3.58,0,12.85-.8,18.66,0,2.11,.29,3.76,1.94,4.1,4.03,.98,6.08,2.73,18.16,3.72,25.06Z"/></g><rect class="cls-16" x="413.16" y="137.05" width="5.98" height="98.08"/><polygon class="cls-16" points="379.11 193.96 379.14 187.98 453.18 188.99 453.15 194.97 379.11 193.96"/></g><g><path class="cls-10" d="M599.67,141.3h0c18.58,0,33.67,15.09,33.67,33.67v43.66c0,4.32-3.51,7.83-7.83,7.83h-51.67c-4.32,0-7.83-3.51-7.83-7.83v-43.66c0-18.58,15.09-33.67,33.67-33.67Z"/><g class="cls-24"><g><path class="cls-8" d="M577.48,167.25c0,9.41-3.77,14.97-7.89,17.52-2.53,1.56-5.46-.87-5.46-4.5v-43.18c5.45,0,13.35,16.53,13.35,30.16Z"/><path class="cls-8" d="M568.86,229.14h11.26c2.84,0,5.05-2.48,4.69-5.3-1.38-11.03-6.09-35.44-20.68-35.44v36.02c0,2.61,2.12,4.72,4.73,4.72Z"/><path class="cls-5" d="M564.13,181.16h4.35c2.8,0,5.07,2.27,5.07,5.07v.04c0,2.8-2.27,5.07-5.07,5.07h-4.35v-10.18h0Z"/></g><g><path class="cls-8" d="M630.05,229.14h-11.26c-2.84,0-5.05-2.48-4.69-5.3,1.38-11.03,6.09-35.44,20.68-35.44v36.02c0,2.61-2.12,4.72-4.73,4.72Z"/><path class="cls-8" d="M621.53,167.25c0,9.41,3.77,14.97,7.89,17.52,2.53,1.56,5.46-.87,5.46-4.5v-43.18c-5.45,0-13.35,16.53-13.35,30.16Z"/><path class="cls-5" d="M625.45,181.16h4.35c2.8,0,5.07,2.27,5.07,5.07v.04c0,2.8-2.27,5.07-5.07,5.07h-4.35v-10.18h0Z" transform="translate(1260.33 372.5) rotate(180)"/></g><path class="cls-9" d="M641.98,163.89c.35,2.42-1.91,4.4-4.27,3.76-2.92-.8-6.48-1.61-8.83-1.61-4.62,0-9.24,3.12-13.86,3.12-4.62,0-9.24-3.12-13.86-3.12-4.62,0-9.24,3.12-13.86,3.12-4.62,0-9.24-3.12-13.86-3.12-2.29,0-5.7,.76-8.57,1.54-2.43,.65-4.7-1.46-4.23-3.92,1.38-7.15,3.76-19.43,5.03-25.51,.43-2.05,2.08-3.63,4.15-3.92,5.6-.79,14.26,0,17.91,0,4.54,0,9.08,3.12,13.61,3.12s9.08-3.12,13.61-3.12c3.65,0,13.11-.82,19.03,0,2.15,.29,3.83,1.98,4.18,4.11,1,6.2,2.78,18.51,3.8,25.56Z"/></g><rect class="cls-16" x="595.11" y="137.05" width="6.1" height="100.02"/><polygon class="cls-16" points="560.7 194.29 560.26 188.21 635.63 183.49 636.06 189.57 560.7 194.29"/></g><g class="cls-23"><g><path class="cls-8" d="M479.77-16.95c0,10.22-4.09,16.26-8.57,19.02-2.75,1.7-5.93-.95-5.93-4.89V-49.71c5.92,0,14.5,17.96,14.5,32.76Z"/><path class="cls-8" d="M470.41,50.27h12.23c3.09,0,5.48-2.7,5.1-5.75-1.5-11.98-6.62-38.49-22.46-38.49V45.14c0,2.83,2.3,5.12,5.14,5.12Z"/><path class="cls-5" d="M465.27-1.85h4.73c3.04,0,5.51,2.47,5.51,5.51v.04c0,3.04-2.47,5.51-5.51,5.51h-4.73V-1.85h0Z"/></g><g><path class="cls-8" d="M536.87,50.27h-12.23c-3.09,0-5.48-2.7-5.1-5.75,1.5-11.98,6.62-38.49,22.46-38.49V45.14c0,2.83-2.3,5.12-5.14,5.12Z"/><path class="cls-8" d="M527.61-16.95c0,10.22,4.09,16.26,8.57,19.02,2.75,1.7,5.93-.95,5.93-4.89V-49.71c-5.92,0-14.5,17.96-14.5,32.76Z"/><path class="cls-5" d="M531.87-1.85h4.73c3.04,0,5.51,2.47,5.51,5.51v.04c0,3.04-2.47,5.51-5.51,5.51h-4.73V-1.85h0Z" transform="translate(1073.98 7.37) rotate(180)"/></g></g><g class="cls-28"><g><path class="cls-8" d="M479.77-16.95c0,10.22-4.09,16.26-8.57,19.02-2.75,1.7-5.93-.95-5.93-4.89V-49.71c5.92,0,14.5,17.96,14.5,32.76Z"/><path class="cls-8" d="M470.41,50.27h12.23c3.09,0,5.48-2.7,5.1-5.75-1.5-11.98-6.62-38.49-22.46-38.49V45.14c0,2.83,2.3,5.12,5.14,5.12Z"/><path class="cls-5" d="M465.27-1.85h4.73c3.04,0,5.51,2.47,5.51,5.51v.04c0,3.04-2.47,5.51-5.51,5.51h-4.73V-1.85h0Z"/></g><g><path class="cls-8" d="M536.87,50.27h-12.23c-3.09,0-5.48-2.7-5.1-5.75,1.5-11.98,6.62-38.49,22.46-38.49V45.14c0,2.83-2.3,5.12-5.14,5.12Z"/><path class="cls-8" d="M527.61-16.95c0,10.22,4.09,16.26,8.57,19.02,2.75,1.7,5.93-.95,5.93-4.89V-49.71c-5.92,0-14.5,17.96-14.5,32.76Z"/><path class="cls-5" d="M531.87-1.85h4.73c3.04,0,5.51,2.47,5.51,5.51v.04c0,3.04-2.47,5.51-5.51,5.51h-4.73V-1.85h0Z" transform="translate(1073.98 7.37) rotate(180)"/></g></g><rect class="cls-16" x="500.48" y="-47.74" width="6.62" height="78.68"/><polygon class="cls-16" points="463.14 5.81 462.67 -.79 544.52 -5.92 544.99 .68 463.14 5.81"/><rect class="cls-16" x="538.27" y="216.42" width="9.27" height="16.03" rx="4.64" ry="4.64"/><g class="cls-27"><path class="cls-19" d="M652.69,50.43c-5.99,0-11.67-2.12-16.16-6.01-4.49,3.89-10.18,6.01-16.16,6.01-6.92,0-13.41-2.84-18.09-7.87-4.68,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.78-2.99-18.47-8.28c-4.69,5.29-11.32,8.28-18.47,8.28s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.68,5.02-11.16,7.87-18.09,7.87-12.24,0-22.77-9.13-24.49-21.24-.13-.9,.5-1.74,1.4-1.87,.9-.13,1.74,.5,1.87,1.4,1.49,10.49,10.61,18.4,21.22,18.4,6.57,0,12.69-2.96,16.79-8.12,.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.63-.75,1.9-.75,2.53,0,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s13.06-3.13,17.15-8.58c.31-.41,.8-.66,1.32-.66s1.01,.24,1.32,.66c4.09,5.45,10.35,8.58,17.15,8.58s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.31-.37,.78-.59,1.27-.59h0c.49,0,.95,.22,1.27,.59,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12,5.64,0,10.97-2.18,15.01-6.13,.64-.63,1.67-.63,2.31,0,4.03,3.96,9.36,6.13,15.01,6.13,10.61,0,19.73-7.91,21.22-18.4,.13-.9,.97-1.53,1.87-1.4,.9,.13,1.53,.96,1.4,1.87-1.72,12.11-12.25,21.24-24.49,21.24Z"/><path class="cls-19" d="M652.69,71.9c-5.99,0-11.67-2.12-16.16-6.01-4.49,3.89-10.18,6.01-16.16,6.01-6.92,0-13.41-2.84-18.09-7.87-4.68,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.78-2.99-18.47-8.28c-4.69,5.29-11.32,8.28-18.47,8.28s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.68,5.02-11.16,7.87-18.09,7.87-12.24,0-22.77-9.13-24.49-21.24-.13-.9,.5-1.74,1.4-1.87s1.74,.5,1.87,1.4c1.49,10.49,10.61,18.4,21.22,18.4,6.57,0,12.69-2.96,16.79-8.12,.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.63-.75,1.9-.75,2.53,0,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s13.06-3.13,17.15-8.58c.31-.41,.8-.66,1.32-.66s1.01,.24,1.32,.66c4.09,5.45,10.35,8.58,17.15,8.58s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.31-.37,.78-.59,1.27-.59h0c.49,0,.95,.22,1.27,.59,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12,5.64,0,10.97-2.18,15.01-6.13,.64-.63,1.67-.63,2.31,0,4.03,3.96,9.36,6.13,15.01,6.13,10.61,0,19.73-7.91,21.22-18.4,.13-.9,.97-1.53,1.87-1.4,.9,.13,1.53,.96,1.4,1.87-1.72,12.11-12.25,21.24-24.49,21.24Z"/><path class="cls-19" d="M652.69,93.37c-5.99,0-11.67-2.12-16.16-6.01-4.49,3.89-10.18,6.01-16.16,6.01-6.92,0-13.41-2.84-18.09-7.87-4.68,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.78-2.99-18.47-8.28c-4.69,5.29-11.32,8.28-18.47,8.28s-13.41-2.84-18.09-7.87c-4.67,5.02-11.16,7.87-18.09,7.87s-13.06-2.7-17.7-7.46c-4.65,4.76-11,7.46-17.7,7.46s-13.41-2.84-18.09-7.87c-4.68,5.02-11.16,7.87-18.09,7.87-12.24,0-22.77-9.13-24.49-21.24-.13-.9,.5-1.74,1.4-1.87,.9-.12,1.74,.5,1.87,1.4,1.49,10.49,10.61,18.4,21.22,18.4,6.57,0,12.69-2.96,16.79-8.12,.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.63-.75,1.9-.75,2.53,0,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s13.06-3.13,17.15-8.58c.31-.41,.8-.66,1.32-.66s1.01,.24,1.32,.66c4.09,5.45,10.35,8.58,17.15,8.58s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12s12.35-2.8,16.44-7.68c.31-.37,.78-.59,1.27-.59h0c.49,0,.95,.22,1.27,.59,4.09,4.88,10.08,7.68,16.44,7.68s12.69-2.96,16.79-8.12c.31-.39,.79-.62,1.29-.62s.98,.23,1.29,.62c4.1,5.16,10.22,8.12,16.79,8.12,5.64,0,10.97-2.18,15.01-6.13,.64-.63,1.67-.63,2.31,0,4.03,3.96,9.36,6.13,15.01,6.13,10.61,0,19.73-7.91,21.22-18.4,.13-.9,.97-1.53,1.87-1.4,.9,.13,1.53,.96,1.4,1.87-1.72,12.11-12.25,21.24-24.49,21.24Z"/></g></g></g><g class="cls-26"><g><g><path class="cls-11" d="M570.09,463.55l10.33-1.2c1.4-.16,2.45-1.21,2.46-2.45l.52-81.26c0-.73-.36-1.43-1-1.91l-16.53-12.38c-1.25-.94-3.15-.74-4.12,.42l-12.75,15.26c-.47,.57-.65,1.28-.49,1.97l18.42,79.59c.3,1.28,1.67,2.14,3.15,1.97Z"/><path class="cls-11" d="M600.94,456.42l11.9-.18c1.47-.02,2.68-1.03,2.78-2.32l6.08-79.66c.05-.64-.18-1.26-.64-1.76l-13.48-14.31c-1.11-1.18-3.16-1.21-4.31-.06l-14.5,14.5c-.54,.54-.79,1.27-.68,1.98l12.85,81.79h0Z"/><path class="cls-11" d="M637.04,464.28l10.42,.16c1.41,.02,2.63-.88,2.85-2.1l14.3-80.28c.13-.73-.11-1.46-.66-2.02l-14.24-14.41c-1.08-1.09-2.99-1.15-4.15-.12l-15.19,13.42c-.56,.5-.86,1.18-.82,1.88l4.71,81.11c.08,1.31,1.29,2.34,2.78,2.36Z"/><path class="cls-11" d="M677.36,457.47l11.89,.44c1.47,.05,2.75-.89,2.93-2.18l11.42-79.2c.09-.63-.1-1.27-.53-1.79l-12.5-14.99c-1.03-1.24-3.07-1.37-4.3-.28l-15.44,13.73c-.58,.51-.87,1.22-.81,1.95l7.34,82.31h0Z"/><path class="cls-11" d="M726.03,468.39l10.38-.82c1.41-.11,2.51-1.12,2.58-2.36l4.46-81.16c.04-.73-.29-1.45-.9-1.94l-15.91-12.99c-1.21-.98-3.11-.86-4.14,.27l-13.48,14.77c-.5,.55-.71,1.26-.59,1.95l14.55,80.2c.23,1.29,1.57,2.21,3.05,2.09Z"/><path class="cls-11" d="M540.74,467.61l10.05-2.43c1.36-.33,2.24-1.49,2.06-2.73l-12.05-80.56c-.11-.73-.58-1.38-1.28-1.77l-18.29-10.29c-1.39-.78-3.23-.36-4.02,.91l-10.27,16.64c-.38,.62-.45,1.35-.18,2.01l30.56,76.65c.49,1.24,1.99,1.92,3.42,1.58Z"/><path class="cls-11" d="M508.41,422.32l277.12-8.43c1.5-.05,2.7-1.12,2.73-2.44l.21-9.33c.03-1.42-1.29-2.58-2.91-2.54l-280.25,6.71c-1.79,.04-3.09,1.52-2.68,3.05l2.92,11.05c.31,1.16,1.5,1.97,2.86,1.93Z"/></g><path d="M762.5,418.1c-.33,15.45,.33,30.6,.32,46.17,0,1.57,0,3.13,0,4.69,0,24.91,0,49.82,0,49.82l-275.95,1.43c-.76-14.83,12.69-26.89,26.36-34.04-2.28-3.43-3.58-7.44-4.45-11.3-.33-2.41-.32-4.79,.01-7.12,.29-2.07,.84-4.09,1.61-6.06,4.61-13.59,19.91-22.72,36-22.75,2.01,0,4.04,.13,6.05,.4,2.11,.21,4.06,.78,6.02,1.06,3.9-23.45,35.47-26.6,55.48-16.84,1.44,.59,2.85,1.24,4.2,1.96,6.77,3.59,12.34,8.81,15.65,15.79,.84,1.58,1.55,3.19,2.12,4.81,1.3-1.14,2.6-2.36,3.98-3.51,1.38-1.16,2.83-2.25,4.44-3.15,18.26-11.64,43.32-16.5,64.29-7.1,1.61,.63,3.19,1.32,4.73,2.09,1.63,.53,2.93,1.39,4.56,2.25,1.14-1.61,2.43-3.13,3.85-4.55,10.14-9.75,25.44-16.62,40.73-14.04"/></g></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg
new file mode 100644
index 00000000000..bc21e6bf459
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#597059;}
+	.st1{fill:#3D4359;}
+	.st2{fill:#544763;}
+	.st3{fill:#C6BF6A;}
+	.st4{fill:#999270;}
+	.st5{fill:#505169;}
+	.st6{fill:#778D77;}
+	.st7{clip-path:url(#SVGID_00000152250200904793171730000008097737391016279725_);}
+	.st8{fill:#47394F;}
+	.st9{fill:#867692;}
+	.st10{fill:#2E5644;}
+	.st11{fill:#AA5367;}
+	.st12{fill:#5E805E;}
+	.st13{fill:#B2697B;}
+	.st14{fill:#675677;}
+	.st15{fill:none;stroke:#6D5E7C;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st16{fill:#406040;}
+</style>
+<rect x="1.8" y="250" class="st0" width="723.2" height="256.5"/>
+<rect x="3.7" y="0.7" class="st1" width="720.8" height="262.6"/>
+<path class="st2" d="M532,402.2c-0.9-1.5-1.9-3.1-2.8-4.6c-1.7-2.8-4.8-4.5-8-4.5h-0.3v-49.8c0-19-15.4-34.3-34.3-34.3l0,0
+	c-19,0-34.3,15.4-34.3,34.3v49.8h-0.3c-3.3,0-6.4,1.7-8,4.5c-0.9,1.5-1.9,3.1-2.8,4.6c-1.5,2.4,0.3,5.5,3.1,5.5h84.7
+	C531.7,407.8,533.5,404.7,532,402.2L532,402.2z"/>
+<path class="st2" d="M698.4,444.9c-1-1.7-2.1-3.5-3.1-5.2c-1.9-3.1-5.1-5-8.7-5.1c3.2-15.9,7.9-39.6,11.2-56.3
+	c0.6-3.2-0.5-6.4-3-8.5c-5.6-4.8-11.5-15.2-17.8-19.6c-13.2-9.6-36.4-9.4-49.4,0.3c-6,4.3-11.6,14.7-16.9,19.3
+	c-2.4,2.1-3.5,5.3-2.9,8.4c3.3,16.7,8,40.4,11.2,56.3c-3.6,0.1-6.8,2-8.7,5.1c-1,1.7-2.1,3.5-3.1,5.2c-1.7,2.7,0.3,6.2,3.5,6.2h84.2
+	C698.1,451.1,700.1,447.6,698.4,444.9L698.4,444.9z"/>
+<path class="st2" d="M384.4,375.1l-10.7-19.5c-2.1-3.2-5.7-5.1-9.5-5.1h-31.6c-3.8,0-7.4,1.9-9.5,5.1l-10.7,19.5
+	c-1.7,2.6-2.3,5.8-1.6,8.9l13.3,58.8c-2.9,0.6-5.4,2.3-6.9,4.9c-1,1.7-2.1,3.5-3.1,5.2c-1.7,2.7,0.3,6.2,3.5,6.2h62
+	c3.2,0,5.2-3.5,3.5-6.2c-1-1.7-2.1-3.5-3.1-5.2c-1.5-2.6-4.1-4.3-6.9-4.9L386,384C386.7,380.9,386.1,377.7,384.4,375.1z"/>
+<circle class="st3" cx="669.7" cy="77.1" r="110.5"/>
+<path class="st4" d="M616.4,98.7c0-6.7-5.5-12.2-12.2-12.2c-0.1,0-0.2,0-0.2,0c-2.7-5.8-8.6-9.8-15.5-9.8c-0.5,0-0.9,0-1.4,0.1
+	c-1.5-12.5-10.5-22.6-22.3-25.8c0.6-2.2,0.9-4.6,0.9-7c0-15.3-12.4-27.6-27.6-27.6c-10.5,0-19.7,5.9-24.3,14.5
+	c-5.3-2.4-11.1-3.7-17.3-3.7c-11.5,0-21.9,4.6-29.5,12.1c-6.2-4.1-13.5-6.5-21.5-6.5c-15.8,0-29.3,9.4-35.5,22.8
+	c-2.5-0.7-5.1-1.1-7.8-1.1c-13.2,0-24.4,9.1-27.4,21.5c-0.6-0.1-1.2-0.1-1.8-0.1c-9.7,0-17.5,10.8-17.5,20.5
+	c0,5.6,2.6,10.6,6.7,13.8l246.1,0C613,108.5,616.4,104,616.4,98.7L616.4,98.7z"/>
+<path class="st4" d="M842.5,190.2c0-6.7-5.5-12.2-12.2-12.2c-0.1,0-0.2,0-0.2,0c-2.7-5.8-8.6-9.8-15.5-9.8c-0.5,0-0.9,0-1.4,0.1
+	c-1.5-12.5-10.5-22.6-22.3-25.8c0.6-2.2,0.9-4.6,0.9-7c0-15.3-12.4-27.6-27.6-27.6c-10.5,0-19.7,5.9-24.3,14.5
+	c-5.3-2.4-11.1-3.7-17.3-3.7c-11.5,0-21.9,4.6-29.5,12.2c-6.2-4.1-13.5-6.4-21.5-6.4c-15.8,0-29.3,9.4-35.5,22.8
+	c-2.5-0.7-5.1-1.1-7.8-1.1c-13.2,0-24.4,9.1-27.4,21.5c-0.6-0.1-1.2-0.1-1.8-0.1c-9.7,0-17.5,10.8-17.5,20.5
+	c0,5.6,2.6,10.6,6.7,13.8l246.1,0C839.1,200,842.5,195.5,842.5,190.2L842.5,190.2z"/>
+<path class="st5" d="M443.2,111.7c-3.8,7.3-10,10-15.8,10.8c0.2-0.2,0.4-0.5,0.5-0.8c0-0.1,0-0.1,0.1-0.1c0.1-0.1,0.2-0.2,0.3-0.4
+	c-0.1,0-0.1,0-0.2,0c1.3-2.9,0.9-6.5,0.9-6.5l-0.9-15.5c-0.2-1.5-2.1-2-2.9-0.8l-6,9.4c-0.9-0.6-2.2-0.8-3.5-0.6
+	c0.4-0.9,0.4-1.7,0-2.4c-0.8-1.5-3.5-1.7-6.2-0.5c-0.3,0-0.6,0-0.9,0c-0.2,0-0.4,0-0.6,0l1.3-11.7c0.1-1.5-1.6-2.4-2.7-1.4
+	l-10.3,11.1c0,0-4.2,4-3.6,8.3c-8.8-6.8-4.6-18.3-4.6-18.3c-9-2.3-32,4.7-38.2,32.3c0,0,16.6-8.1,27.8,6.7c0,0,6-5.1,12.1-1.5
+	c3.5,1.8,5.4,8.2,4.5,15.6c-0.2,1.4,2,1.9,3.1,1.1c0,0,8.7-11.7,16.1-9.4c4.7,1,7.9,8.4,7.9,8.4c11.4-5.6,19.6,4.4,19.6,4.4
+	c5.7-8.5,20.3-1.8,20.3-1.8C463.6,120,443.2,111.7,443.2,111.7L443.2,111.7z"/>
+<path class="st5" d="M659.8,162.4c3,5.7,7.9,7.9,12.4,8.5c-0.2-0.2-0.3-0.4-0.4-0.6c0,0,0-0.1,0-0.1c-0.1-0.1-0.2-0.2-0.3-0.3
+	c0,0,0.1,0,0.1,0c-1-2.3-0.7-5.1-0.7-5.1l0.7-12.2c0.2-1.2,1.7-1.5,2.3-0.6l4.8,7.4c0.7-0.5,1.7-0.7,2.8-0.5c-0.3-0.7-0.3-1.4,0-1.9
+	c0.7-1.2,2.7-1.3,4.8-0.4c0.2,0,0.5,0,0.7,0c0.2,0,0.3,0,0.5,0l-1-9.2c-0.1-1.2,1.3-1.9,2.1-1.1l8.1,8.7c0,0,3.3,3.1,2.8,6.5
+	c7-5.3,3.6-14.4,3.6-14.4c7.1-1.8,25.2,3.7,30.1,25.5c0,0-13.1-6.4-21.9,5.3c0,0-4.7-4-9.5-1.2c-2.8,1.4-4.2,6.4-3.6,12.3
+	c0.1,1.1-1.5,1.5-2.5,0.9c0,0-6.8-9.2-12.7-7.4c-3.7,0.8-6.2,6.6-6.2,6.6c-9-4.4-15.4,3.4-15.4,3.4c-4.5-6.7-16-1.4-16-1.4
+	C643.7,168.9,659.8,162.4,659.8,162.4L659.8,162.4z"/>
+<path class="st2" d="M319.1,340.9c-0.9-1.5-1.9-3.1-2.8-4.6c-1.7-2.8-4.8-4.5-8-4.5h-0.3V212.6c0-7.2-5.8-13-13-13h-42.8
+	c-7.2,0-13,5.8-13,13v119.1h-0.3c-3.3,0-6.4,1.7-8.1,4.5c-0.9,1.5-1.9,3.1-2.8,4.6c-1.5,2.4,0.3,5.5,3.1,5.5H316
+	C318.8,346.4,320.5,343.3,319.1,340.9z"/>
+<path class="st2" d="M486.1,294.6c-0.8-1.4-1.7-2.8-2.5-4.1c-1.5-2.5-4.3-4.1-7.2-4.1h-1.9v-44.9c0-34.1-27.7-61.8-61.8-61.8l0,0
+	c-34.1,0-61.8,27.7-61.8,61.8v44.9h-1.9c-3,0-5.7,1.5-7.2,4.1c-0.8,1.4-1.7,2.8-2.5,4.1c-1.3,2.2,0.2,5,2.8,5h141.3
+	C485.8,299.6,487.4,296.8,486.1,294.6L486.1,294.6z"/>
+<path class="st2" d="M704.8,305.1c-0.9-1.5-1.8-3-2.7-4.5c-1.7-2.8-4.7-4.5-7.9-4.5h-0.3v-43.9c0-21.4-17.3-38.7-38.7-38.7h-91
+	c-21.4,0-38.7,17.3-38.7,38.7v43.9h-1.9c-3.2,0-6.2,1.7-7.9,4.5c-0.9,1.5-1.8,3-2.7,4.5c-1.4,2.4,0.3,5.4,3,5.4h185.8
+	C704.5,310.5,706.2,307.5,704.8,305.1L704.8,305.1z"/>
+<path class="st6" d="M376.3,300.2c2.9-5,6.6-9.8,11.1-14.1c0.7-0.7-0.5-1.7-1.5-1.2c-4.7,2.5-8.9,5.6-12.5,8.9
+	c1.2-5.3,2.6-10.5,4.4-15.7c0.3-0.9-1.5-1.4-2.1-0.6c-3.5,4.3-6.4,8.9-8.7,13.6c-1-2.7-2.1-5.5-3.4-8.1c-0.4-0.8-2.1-0.5-2.1,0.4
+	c0.1,5.9,0.5,11.8,1.1,17.6C367.1,300.2,371.7,299.9,376.3,300.2L376.3,300.2z"/>
+<path class="st6" d="M352.8,460.4c-3-5.1-6.8-10-11.3-14.4c-0.7-0.7,0.5-1.8,1.5-1.2c4.9,2.6,9.1,5.7,12.8,9.1
+	c-1.2-5.4-2.7-10.8-4.5-16.1c-0.3-0.9,1.5-1.4,2.1-0.6c3.6,4.4,6.6,9.1,8.9,13.9c1-2.8,2.2-5.6,3.4-8.3c0.4-0.9,2.1-0.5,2.1,0.4
+	c-0.1,6-0.5,12-1.1,18C362.1,460.3,357.4,460,352.8,460.4L352.8,460.4z"/>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="-0.2" y="0.5" width="559.3" height="509"/>
+	</defs>
+	<clipPath id="SVGID_00000101062390421127310850000014715482761084867989_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000101062390421127310850000014715482761084867989_);">
+		<g>
+			<polygon class="st8" points="128.6,264.5 248.8,225.1 265.2,286.2 144.7,349 			"/>
+			
+				<ellipse transform="matrix(0.9802 -0.1978 0.1978 0.9802 -45.4819 55.8828)" class="st9" cx="256.9" cy="255.6" rx="22.4" ry="31.6"/>
+		</g>
+		<polygon class="st8" points="43.2,315.3 -77,276 -93.4,337 27.1,399.9 		"/>
+		<path class="st8" d="M-57.6,466.2c14.8,1.5,30-1.5,39.7-13.3c0.2-0.2,0.3-0.4,0.5-0.6C2.7,382.1-3-12.8-3-12.8
+			c1.2-52.7,44.3-94.8,97-94.8l0,0c51.9,0,94.6,40.9,97,92.7L210.5,424l0.4,0c0,0-1.4,16,9.1,28.2c0.2,0.2,0.3,0.4,0.5,0.6
+			c9.7,11.8,24.9,14.9,39.7,13.3c0.2,0,0.5,0,0.8,0c48.5,0.1,84,27.7,84,65.7h-26.5c-10,0-19.7-2.5-28.5-7.2l-0.1,0
+			c-9.4-4.9-21-7-31.4-4c-4.5,1.3-8.6,3.4-12.6,5.7c-6.4,3.7-13.7,5.5-21.1,5.5l0,0c-0.4,0-0.7,0-1.1,0c-8.3,1.1-17,0.4-25.4,0h-1.1
+			c-13.7,0-27.9,0-41.8,0c0,0-98.7,0.4-145.2,0.6c-12.5,0-24.7-3.6-34.9-10.8c-6.1-4.2-14-8-22.4-8c-10.5,0-17.2,4.5-22,9.6
+			c-5.2,5.5-12.5,8.7-20.1,8.7h-49C-116.1,464.2-57.8,466.1-57.6,466.2L-57.6,466.2z"/>
+		<path class="st10" d="M-363.1-152.8l-0.6-0.6l2.6,0c2.5-0.6,5-1.2,7.7-1.6c10.4-1.6,20.6-0.8,30.1,1.8l810.2,5.3
+			c5.5-1.2,11.4-1.9,17.5-1.8c33.6,0.2,60.6,21.3,60.4,47c-0.2,25.1-26.2,45.3-58.7,46c1.5,4.6,2.6,9.3,3.3,14.3
+			c7.5,49.6-26.2,95.7-75.1,103.1c-12,1.8-23.7,1.1-34.8-1.7c0.7,2.4,1.2,4.9,1.6,7.5c5.5,34.9-17.9,67.6-52.4,73
+			c-12.2,1.9-24,0.2-34.6-4.4c-7.8,18.9-30.8,32.5-58,32.5c-26.8,0-49.6-13.3-57.7-31.8c-10.7,18.7-31.2,31.4-54.8,31.4
+			c-25.1,0-46.7-14.3-56.7-35.1c-9.6,10.3-23.4,16.8-38.8,16.8c-10.2,0-19.7-2.9-27.8-7.8C14.5,162.3-9.9,178-39,178
+			c-33.6,0-60.8-20.8-60.8-46.5c0-0.7,0-1.4,0.1-2.2c-25.7,15.9-54.9,15.6-67.5-1.5c-3.6-4.8-5.4-10.5-5.8-16.7
+			c-9.1,5.5-19.8,8.7-31.3,8.7c-33.1,0-60-26.5-60-59.2c0-9.8,2.4-19,6.6-27.1c-3.8,0.6-7.8,0.9-11.8,0.9
+			c-30.7-0.2-56.7-19.8-66.1-47c-38,3.9-72.7-22.6-78.4-60.7C-419.3-109.2-397-142.9-363.1-152.8L-363.1-152.8z"/>
+		<g>
+			<path class="st11" d="M336.6,64.2L336.6,64.2c-0.6-0.9-1.9-1.2-2.8-0.5l-0.1,0.1c-4.2,3.2-10.4,1-11.6-4.2l-5-22.3
+				c-0.9-11.4,11-20.8,21.4-16.2l3.4,3.4l5.6-1.7c11.4-1.1,19.3,12.9,14.8,23.4l-13.3,17.9C346,68.6,339.5,68.6,336.6,64.2
+				L336.6,64.2z"/>
+			<g>
+				<ellipse class="st10" cx="302.8" cy="17.9" rx="36.2" ry="28.4"/>
+				<ellipse class="st10" cx="353.9" cy="-1.6" rx="32.7" ry="30.7"/>
+			</g>
+		</g>
+		<g>
+			<path class="st11" d="M239.6,122L239.6,122c-1-0.9-2.6-0.7-3.4,0.4l-0.1,0.2c-3.8,5.2-11.7,4.8-14.9-0.8l-13.7-24.2
+				c-5-12.9,5.4-28.1,19.1-26.3l5.1,2.8l5.9-4c12.8-5.2,27,8.2,25.5,22l-9.2,25.5C252.2,123.8,244.6,126.1,239.6,122L239.6,122z"/>
+			<g>
+				
+					<ellipse transform="matrix(0.5697 -0.8218 0.8218 0.5697 53.1081 196.147)" class="st10" cx="213.9" cy="47.4" rx="28.4" ry="36.2"/>
+				
+					<ellipse transform="matrix(0.5697 -0.8218 0.8218 0.5697 65.2101 245.503)" class="st10" cx="267.1" cy="60.5" rx="30.7" ry="32.7"/>
+			</g>
+		</g>
+		<g>
+			<path class="st11" d="M110.8,93.6L110.8,93.6c-1.2-0.7-2.7-0.2-3.3,1l-0.1,0.2c-2.8,5.8-10.6,6.8-14.8,2l-18-21.2
+				c-7.4-11.8,0-28.6,13.9-29.4L94,48l5.1-5c11.6-7.6,28,3,29.1,16.8L124,86.6C123.4,93,116.4,96.7,110.8,93.6L110.8,93.6z"/>
+			<g>
+				
+					<ellipse transform="matrix(0.9546 -0.2979 0.2979 0.9546 -17.4119 19.3359)" class="st10" cx="54.7" cy="66.8" rx="36.2" ry="28.4"/>
+				
+					<ellipse transform="matrix(0.9546 -0.2979 0.2979 0.9546 -5.37 30.6211)" class="st10" cx="97.8" cy="32.9" rx="32.7" ry="30.7"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+	<path class="st12" d="M286,346.3c0,0,2.7-9.1-8.7-14.3C277.2,332,276,344,286,346.3z"/>
+	<path class="st12" d="M287.1,345.3c0,0-8.1-3.5-14.2,6.5C272.8,351.8,283.8,354.2,287.1,345.3z"/>
+	<path class="st12" d="M276.7,347c-9.9,0-16.8-1.8-17.3-1.9c-0.8-0.2-1.3-1-1.1-1.8s1-1.3,1.8-1.1c0.2,0.1,25.3,6.5,49.4-5.8
+		c0.7-0.4,1.6-0.1,2,0.6c0.4,0.7,0.1,1.6-0.6,2C298.6,345.4,286.2,347,276.7,347L276.7,347z"/>
+	<path class="st11" d="M263.8,321.7c-0.5,0.5-0.9,1-1.3,1.6c-0.8,1.3-1.4,2.6-1.7,4.1c-4.2-0.3-8.4,1.6-10.8,5.4s-2.5,8.4-0.6,12.1
+		c-1.2,0.8-2.2,1.9-3,3.2c-0.6,0.9-1,1.8-1.3,2.8c0.1,0,0.1,0.1,0.2,0.1c6.4,4.2,14.6,3.6,20.2-0.9c1.4-1.1,2.7-2.5,3.7-4.1
+		c0.9-1.3,1.5-2.7,2-4.1c2.4-7.2-0.3-15.5-7-19.8C264.1,321.9,264,321.8,263.8,321.7L263.8,321.7z"/>
+	<path class="st13" d="M260.3,340.1c-2.6,4-2.9,9-1.2,13.1c2.3-0.6,4.5-1.7,6.4-3.2c1.4-1.1,2.7-2.5,3.7-4.1c0.9-1.3,1.5-2.7,2-4.1
+		c0.9-2.6,1-5.4,0.6-8C267.3,333.8,262.9,336,260.3,340.1L260.3,340.1z"/>
+</g>
+<path class="st14" d="M568.2,231.9h79.7c13.3,0,24.1,10.8,24.1,24.1v20c0,6.2-5,11.2-11.2,11.2H555.3c-6.2,0-11.2-5-11.2-11.2v-20
+	C544.1,242.7,554.9,231.9,568.2,231.9L568.2,231.9z"/>
+<g>
+	<line class="st15" x1="561.4" y1="249.2" x2="592.1" y2="249.2"/>
+	<line class="st15" x1="600.5" y1="249.2" x2="622.4" y2="249.2"/>
+	<line class="st15" x1="561.4" y1="257.1" x2="613" y2="257.1"/>
+	<line class="st15" x1="627.1" y1="257.1" x2="663.8" y2="257.1"/>
+	<line class="st15" x1="590.3" y1="266.2" x2="627.1" y2="266.2"/>
+	<line class="st15" x1="631.5" y1="249.2" x2="662" y2="249.2"/>
+	<line class="st15" x1="568.2" y1="275.6" x2="601.9" y2="275.6"/>
+	<line class="st15" x1="611.2" y1="275.6" x2="635.2" y2="275.6"/>
+</g>
+<g>
+	<path class="st12" d="M678.8,468.1c-3.6-0.3-8.2-2.1-12.5-7.9c0,0,8.4-2.8,14.8,1.2C684.3,463.4,682.6,468.4,678.8,468.1
+		L678.8,468.1z"/>
+	<path class="st12" d="M677,455.5c-2.8,2.3-7.3,4.3-14.4,3.3c0,0,4-7.9,11.2-9.7C677.5,448.2,679.9,453,677,455.5L677,455.5z"/>
+	<path class="st12" d="M677.4,459.8c7.1-1.1,11.9-3.2,12.2-3.4c0.5-0.2,0.8-0.9,0.5-1.4s-0.9-0.8-1.4-0.5
+		c-0.2,0.1-17.5,7.6-36.2,1.5c-0.6-0.2-1.2,0.1-1.4,0.7s0.1,1.2,0.7,1.4C661.4,461.2,670.5,460.9,677.4,459.8L677.4,459.8z"/>
+	<path class="st13" d="M696.6,466.3c2-0.2,3.5-1.6,4.2-3.3c1.8,0.4,3.8-0.2,5-1.8c1.2-1.5,1.4-3.6,0.6-5.3c1.6-1,2.5-2.8,2.3-4.8
+		c-0.2-2-1.6-3.5-3.3-4.2c0.4-1.8-0.2-3.8-1.8-5s-3.6-1.4-5.3-0.6c-1-1.6-2.8-2.5-4.8-2.3s-3.5,1.6-4.2,3.3c-1.8-0.4-3.8,0.2-5,1.8
+		s-1.4,3.6-0.6,5.3c-1.6,1-2.5,2.8-2.3,4.8c0.2,2,1.6,3.5,3.3,4.2c-0.4,1.8,0.2,3.8,1.8,5s3.6,1.4,5.3,0.6
+		C692.8,465.6,694.7,466.5,696.6,466.3z"/>
+	<circle class="st11" cx="695.1" cy="452.7" r="5.7"/>
+</g>
+<path class="st16" d="M-4.9,432.3c0.2,11.9-0.2,23.6-0.2,35.6c0,1.2,0,2.4,0,3.6c0,19.2,0,38.4,0,38.4l207.8,1.1
+	c0.6-11.4-9.6-20.7-19.9-26.2c1.7-2.6,2.7-5.7,3.4-8.7c0.2-1.9,0.2-3.7,0-5.5c-0.2-1.6-0.6-3.1-1.2-4.7c-3.5-10.5-15-17.5-27.1-17.5
+	c-1.5,0-3,0.1-4.6,0.3c-1.6,0.2-3.1,0.6-4.5,0.8c-2.9-18.1-26.7-20.5-41.8-13c-1.1,0.5-2.1,1-3.2,1.5c-5.1,2.8-9.3,6.8-11.8,12.2
+	c-0.6,1.2-1.2,2.5-1.6,3.7c-1-0.9-2-1.8-3-2.7s-2.1-1.7-3.3-2.4c-13.8-9-32.6-12.7-48.4-5.5c-1.2,0.5-2.4,1-3.6,1.6
+	c-1.2,0.4-2.2,1.1-3.4,1.7c-0.9-1.2-1.8-2.4-2.9-3.5C18.1,435.6,6.6,430.3-4.9,432.3"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg
new file mode 100644
index 00000000000..fb55ee04966
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#6d5e7c;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}.cls-3{clip-path:url(#clippath);}.cls-4{fill:#7eab98;}.cls-5{fill:#6c7081;}.cls-6{fill:#867692;}.cls-7{fill:#b2697b;}.cls-8{fill:#a58050;}.cls-9{fill:#aa5367;}.cls-10{fill:#d0cbaf;}.cls-11{fill:#e1dea6;}.cls-12{fill:#6d5e7c;}.cls-13{fill:#47394f;}.cls-14{fill:#5e805e;}.cls-15{fill:#505169;}.cls-16{fill:#7c6a8b;}.cls-17{fill:#778d77;}.cls-18{clip-path:url(#clippath-1);}</style><clipPath id="clippath"><rect class="cls-1" x="-.18" y=".53" width="559.27" height="509.05" transform="translate(558.92 510.12) rotate(-180)"/></clipPath><clipPath id="clippath-1"><rect class="cls-1" x="-266.6" y="333.66" width="231.12" height="169.94"/></clipPath></defs><rect class="cls-17" x="1.78" y="250.04" width="723.18" height="256.55"/><rect class="cls-5" x="3.67" y=".7" width="720.85" height="262.61"/><path class="cls-12" d="M531.99,402.23c-.93-1.53-1.86-3.07-2.79-4.6-1.71-2.82-4.76-4.54-8.05-4.54h-.31v-49.83c0-18.96-15.37-34.34-34.34-34.34h0c-18.96,0-34.34,15.37-34.34,34.34v49.83h-.31c-3.29,0-6.35,1.72-8.05,4.54-.93,1.53-1.86,3.07-2.79,4.6-1.47,2.42,.28,5.52,3.11,5.52h84.75c2.83,0,4.58-3.1,3.11-5.52Z"/><path class="cls-12" d="M698.44,444.86c-1.05-1.73-2.1-3.46-3.14-5.19-1.86-3.06-5.12-4.97-8.68-5.11,3.15-15.87,7.87-39.6,11.18-56.27,.63-3.16-.5-6.41-2.95-8.49-5.59-4.75-11.51-15.18-17.75-19.59-13.22-9.58-36.41-9.44-49.41,.27-5.95,4.33-11.59,14.66-16.92,19.3-2.41,2.1-3.51,5.32-2.89,8.44,3.32,16.68,8.04,40.44,11.2,56.34-3.56,.13-6.84,2.04-8.7,5.11-1.05,1.73-2.1,3.46-3.14,5.19-1.66,2.73,.31,6.23,3.51,6.23h84.19c3.2,0,5.16-3.49,3.51-6.23Z"/><path class="cls-12" d="M384.4,375.08l-10.71-19.51c-2.13-3.19-5.7-5.1-9.54-5.1h-31.59c-3.83,0-7.41,1.91-9.54,5.1l-10.71,19.51c-1.74,2.61-2.34,5.82-1.65,8.89l13.28,58.76c-2.86,.59-5.39,2.34-6.94,4.9-1.05,1.73-2.1,3.46-3.14,5.19-1.66,2.73,.31,6.23,3.51,6.23h61.97c3.2,0,5.16-3.49,3.51-6.23-1.05-1.73-2.1-3.46-3.14-5.19-1.55-2.56-4.08-4.31-6.94-4.9l13.28-58.76c.69-3.06,.1-6.28-1.65-8.89Z"/><circle class="cls-11" cx="669.72" cy="77.12" r="110.55"/><path class="cls-10" d="M616.38,98.72c0-6.74-5.47-12.21-12.21-12.21-.07,0-.15,0-.22,0-2.74-5.78-8.63-9.78-15.45-9.78-.46,0-.91,.02-1.36,.06-1.49-12.46-10.48-22.61-22.33-25.79,.59-2.24,.91-4.6,.91-7.03,0-15.26-12.37-27.63-27.63-27.63-10.52,0-19.67,5.88-24.34,14.54-5.26-2.38-11.1-3.71-17.26-3.71-11.5,0-21.92,4.64-29.49,12.15-6.17-4.08-13.55-6.45-21.5-6.45-15.76,0-29.34,9.35-35.5,22.8-2.49-.72-5.12-1.11-7.84-1.11-13.25,0-24.36,9.14-27.37,21.46-.6-.06-1.22-.1-1.84-.1-9.67,0-17.5,10.84-17.5,20.51,0,5.58,2.62,10.55,6.69,13.75l246.13,.03c4.73-1.68,8.11-6.2,8.11-11.5Z"/><path class="cls-10" d="M842.51,190.19c0-6.74-5.47-12.21-12.21-12.21-.07,0-.15,0-.22,0-2.74-5.78-8.63-9.78-15.45-9.78-.46,0-.91,.02-1.36,.06-1.49-12.46-10.48-22.61-22.33-25.79,.59-2.24,.91-4.6,.91-7.03,0-15.26-12.37-27.63-27.63-27.63-10.52,0-19.67,5.88-24.34,14.54-5.26-2.38-11.1-3.71-17.26-3.71-11.5,0-21.92,4.64-29.49,12.15-6.17-4.08-13.55-6.45-21.5-6.45-15.76,0-29.34,9.35-35.5,22.8-2.49-.72-5.12-1.11-7.84-1.11-13.25,0-24.36,9.14-27.37,21.46-.6-.06-1.22-.1-1.84-.1-9.67,0-17.5,10.84-17.5,20.51,0,5.58,2.62,10.55,6.69,13.75l246.13,.03c4.73-1.68,8.11-6.2,8.11-11.5Z"/><path class="cls-15" d="M443.25,111.69c-3.78,7.28-10.03,10-15.79,10.76,.19-.24,.36-.51,.52-.8,.02-.05,.04-.1,.07-.14,.11-.12,.23-.23,.33-.36-.06,0-.11,0-.17,.01,1.28-2.92,.85-6.5,.85-6.5l-.9-15.49c-.24-1.48-2.11-1.96-2.94-.75l-6.02,9.4c-.94-.62-2.2-.84-3.51-.63,.39-.88,.43-1.74,.05-2.42-.84-1.51-3.48-1.68-6.16-.51-.3-.02-.61-.03-.92-.02-.2,0-.4,.02-.6,.04l1.32-11.65c.12-1.48-1.59-2.41-2.69-1.45l-10.28,11.1s-4.19,3.98-3.6,8.26c-8.82-6.77-4.59-18.27-4.59-18.27-9.02-2.31-32.02,4.65-38.19,32.32,0,0,16.6-8.11,27.76,6.67,0,0,6-5.06,12.09-1.53,3.52,1.79,5.4,8.18,4.51,15.58-.16,1.36,1.95,1.86,3.11,1.15,0,0,8.68-11.68,16.14-9.45,4.72,1.03,7.89,8.44,7.89,8.44,11.36-5.55,19.59,4.36,19.59,4.36,5.66-8.49,20.33-1.8,20.33-1.8,2.19-28.01-18.2-36.31-18.2-36.31Z"/><path class="cls-15" d="M659.79,162.36c2.98,5.74,7.9,7.88,12.44,8.48-.15-.19-.29-.4-.41-.63-.02-.04-.03-.08-.05-.11-.09-.09-.18-.18-.26-.28,.04,0,.09,0,.13,.01-1-2.3-.67-5.12-.67-5.12l.71-12.2c.19-1.16,1.66-1.54,2.31-.59l4.75,7.41c.74-.49,1.74-.66,2.77-.49-.3-.7-.34-1.37-.04-1.91,.66-1.19,2.74-1.33,4.85-.4,.24-.02,.48-.03,.73-.02,.16,0,.32,.01,.47,.03l-1.04-9.18c-.1-1.17,1.26-1.9,2.12-1.15l8.1,8.74s3.3,3.14,2.84,6.51c6.95-5.33,3.61-14.39,3.61-14.39,7.11-1.82,25.23,3.67,30.09,25.46,0,0-13.08-6.39-21.88,5.26,0,0-4.73-3.99-9.53-1.21-2.77,1.41-4.25,6.44-3.56,12.28,.13,1.07-1.53,1.47-2.45,.91,0,0-6.84-9.2-12.72-7.45-3.72,.81-6.21,6.65-6.21,6.65-8.95-4.37-15.44,3.44-15.44,3.44-4.46-6.69-16.02-1.42-16.02-1.42-1.73-22.07,14.34-28.61,14.34-28.61Z"/><path class="cls-12" d="M319.08,340.86c-.93-1.53-1.86-3.07-2.79-4.6-1.71-2.82-4.76-4.54-8.05-4.54h-.31v-119.15c0-7.16-5.8-12.96-12.96-12.96h-42.75c-7.16,0-12.96,5.8-12.96,12.96v119.15h-.31c-3.29,0-6.35,1.72-8.05,4.54-.93,1.53-1.86,3.07-2.79,4.6-1.47,2.42,.28,5.52,3.11,5.52h84.75c2.83,0,4.58-3.1,3.11-5.52Z"/><path class="cls-12" d="M486.08,294.62c-.84-1.38-1.67-2.76-2.51-4.14-1.54-2.53-4.28-4.08-7.25-4.08h-1.88v-44.88c0-34.13-27.67-61.81-61.81-61.81h0c-34.13,0-61.81,27.67-61.81,61.81v44.88h-1.88c-2.96,0-5.71,1.55-7.25,4.08-.84,1.38-1.67,2.76-2.51,4.14-1.32,2.18,.25,4.96,2.8,4.96h141.28c2.55,0,4.12-2.79,2.8-4.96Z"/><path class="cls-12" d="M704.8,305.12c-.91-1.5-1.82-3.01-2.73-4.51-1.67-2.76-4.67-4.45-7.9-4.45h-.3v-43.86c0-21.39-17.34-38.74-38.74-38.74h-90.95c-21.39,0-38.74,17.34-38.74,38.74v43.86h-1.86c-3.23,0-6.23,1.69-7.9,4.45-.91,1.5-1.82,3.01-2.73,4.51-1.44,2.38,.27,5.41,3.05,5.41h185.76c2.78,0,4.49-3.04,3.05-5.41Z"/><path class="cls-17" d="M376.3,300.24c2.94-5,6.64-9.77,11.06-14.12,.71-.69-.53-1.72-1.47-1.21-4.74,2.55-8.94,5.58-12.52,8.94,1.16-5.28,2.63-10.53,4.41-15.72,.31-.88-1.45-1.41-2.09-.62-3.51,4.34-6.43,8.93-8.74,13.64-1.03-2.74-2.15-5.46-3.37-8.15-.38-.84-2.09-.5-2.07,.41,.15,5.9,.51,11.78,1.07,17.62,4.54-.85,9.15-1.12,13.72-.79Z"/><path class="cls-17" d="M352.77,460.36c-3-5.11-6.78-9.98-11.3-14.43-.73-.7,.54-1.76,1.51-1.24,4.85,2.6,9.13,5.71,12.8,9.14-1.19-5.4-2.69-10.76-4.51-16.06-.32-.9,1.48-1.44,2.13-.63,3.58,4.44,6.57,9.13,8.93,13.94,1.05-2.8,2.2-5.58,3.44-8.33,.39-.86,2.14-.51,2.11,.42-.15,6.03-.52,12.04-1.09,18.01-4.64-.87-9.35-1.14-14.02-.81Z"/><g class="cls-3"><g><polygon class="cls-13" points="128.59 264.45 248.81 225.15 265.21 286.18 144.71 349.05 128.59 264.45"/><ellipse class="cls-6" cx="256.96" cy="255.56" rx="22.41" ry="31.64" transform="translate(-45.49 55.9) rotate(-11.41)"/></g><polygon class="cls-13" points="43.18 315.32 -77.04 276.02 -93.44 337.05 27.06 399.92 43.18 315.32"/><path class="cls-13" d="M-57.6,466.16c14.77,1.52,29.96-1.52,39.69-13.34,.17-.19,.34-.38,.5-.57C2.74,382.1-3.04-12.83-3.04-12.83c1.24-52.7,44.31-94.78,97.03-94.78h0c51.92,0,94.64,40.86,96.96,92.73l19.56,438.84,.39,.03s-1.44,15.97,9.14,28.25c.17,.19,.33,.38,.5,.57,9.73,11.82,24.92,14.86,39.69,13.34,.25,0,.5,0,.75,0,48.5,.15,83.99,27.72,83.99,65.7h-26.55c-9.95,0-19.7-2.54-28.51-7.17l-.1-.05c-9.42-4.91-21.04-7.05-31.36-4.01-4.48,1.32-8.59,3.39-12.59,5.69-6.4,3.68-13.68,5.54-21.06,5.54h0c-.35,0-.71,0-1.06,0-8.29,1.14-17.02,.38-25.41,0h-1.05c-13.67,0-27.87,0-41.84,0,0,0-98.69,.43-145.17,.56-12.46,.04-24.69-3.63-34.9-10.76-6.09-4.24-14.01-8.03-22.36-8.03-10.55,0-17.22,4.51-22.05,9.57-5.24,5.5-12.48,8.66-20.08,8.66h-49.03c22.03-67.61,80.31-65.7,80.56-65.7Z"/><path class="cls-4" d="M-363.1-152.81l-.59-.56,2.56,.02c2.49-.65,5.05-1.19,7.66-1.58,10.38-1.56,20.58-.83,30.08,1.83l810.18,5.33c5.55-1.23,11.42-1.87,17.5-1.83,33.56,.25,60.61,21.29,60.42,46.98-.19,25.07-26.24,45.31-58.67,46.04,1.46,4.59,2.58,9.35,3.32,14.26,7.46,49.57-26.19,95.74-75.15,103.1-11.96,1.8-23.73,1.11-34.8-1.67,.69,2.44,1.24,4.94,1.64,7.5,5.52,34.87-17.93,67.56-52.38,73-12.16,1.92-24.05,.19-34.61-4.38-7.76,18.85-30.78,32.52-57.97,32.52-26.84,0-49.61-13.32-57.66-31.79-10.7,18.74-31.22,31.42-54.78,31.42-25.06,0-46.68-14.34-56.7-35.06-9.56,10.33-23.4,16.83-38.8,16.83-10.21,0-19.73-2.86-27.77-7.79-5.91,20.95-30.26,36.65-59.39,36.65-33.56,0-60.77-20.83-60.77-46.53,0-.72,.02-1.44,.07-2.16-25.72,15.85-54.89,15.6-67.45-1.49-3.55-4.83-5.41-10.52-5.76-16.65-9.11,5.52-19.84,8.71-31.31,8.71-33.12,0-59.97-26.52-59.97-59.23,0-9.77,2.39-18.98,6.63-27.1-3.84,.61-7.78,.92-11.8,.89-30.7-.23-56.66-19.84-66.09-46.98-38,3.92-72.72-22.63-78.45-60.72-5.4-35.92,16.86-69.63,50.84-79.58Z"/><g><path class="cls-9" d="M336.56,64.17h0c-.61-.93-1.88-1.15-2.77-.49l-.15,.11c-4.25,3.17-10.35,.95-11.58-4.2l-5.01-22.34c-.89-11.39,10.95-20.84,21.38-16.17l3.36,3.43,5.62-1.73c11.38-1.07,19.33,12.88,14.83,23.38l-13.33,17.93c-2.88,4.48-9.42,4.52-12.35,.07Z"/><g><ellipse class="cls-4" cx="302.76" cy="17.94" rx="36.24" ry="28.38"/><ellipse class="cls-4" cx="353.94" cy="-1.57" rx="32.69" ry="30.66"/></g></g><g><path class="cls-9" d="M239.62,122.01h0c-1.04-.86-2.59-.67-3.39,.41l-.14,.19c-3.82,5.17-11.69,4.75-14.93-.81l-13.68-24.19c-5.04-12.92,5.38-28.07,19.14-26.32l5.12,2.8,5.93-3.99c12.84-5.24,26.99,8.16,25.46,21.95l-9.18,25.52c-1.77,6.22-9.35,8.56-14.32,4.43Z"/><g><ellipse class="cls-4" cx="213.86" cy="47.35" rx="28.38" ry="36.24" transform="translate(53.12 196.14) rotate(-55.27)"/><ellipse class="cls-4" cx="267.05" cy="60.47" rx="30.66" ry="32.69" transform="translate(65.22 245.5) rotate(-55.27)"/></g></g><g><path class="cls-9" d="M110.75,93.62h0c-1.18-.65-2.67-.18-3.26,1.04l-.1,.21c-2.78,5.8-10.59,6.85-14.82,2l-17.97-21.2c-7.37-11.75,.03-28.58,13.88-29.44l5.55,1.79,5.08-5.03c11.63-7.56,28.04,2.96,29.12,16.79l-4.24,26.79c-.58,6.44-7.58,10.16-13.24,7.04Z"/><g><ellipse class="cls-4" cx="54.73" cy="66.8" rx="36.24" ry="28.38" transform="translate(-17.41 19.33) rotate(-17.33)"/><ellipse class="cls-4" cx="97.78" cy="32.93" rx="32.69" ry="30.66" transform="translate(-5.37 30.62) rotate(-17.33)"/></g></g></g><g><path class="cls-14" d="M285.96,346.31s2.74-9.08-8.73-14.34c0,0-1.21,12,8.73,14.34Z"/><path class="cls-14" d="M287.06,345.26s-8.11-3.53-14.25,6.53c0,0,10.99,2.43,14.25-6.53Z"/><path class="cls-14" d="M276.69,347.05c-9.92,0-16.77-1.78-17.31-1.92-.8-.21-1.27-1.04-1.06-1.84,.21-.8,1.03-1.27,1.84-1.06,.25,.07,25.29,6.53,49.39-5.79,.74-.38,1.64-.09,2.02,.65,.38,.74,.08,1.64-.65,2.02-12.33,6.3-24.69,7.94-34.22,7.94Z"/><path class="cls-9" d="M263.82,321.71c-.47,.5-.9,1.04-1.28,1.64-.83,1.27-1.39,2.65-1.69,4.06-4.17-.28-8.37,1.64-10.82,5.39s-2.52,8.37-.59,12.08c-1.17,.84-2.2,1.9-3.04,3.18-.57,.88-1.02,1.81-1.34,2.76,.06,.04,.12,.08,.18,.12,6.41,4.19,14.57,3.58,20.25-.94,1.41-1.12,2.67-2.49,3.72-4.09,.86-1.31,1.52-2.7,1.98-4.13,2.36-7.25-.31-15.47-7-19.84-.12-.08-.24-.16-.36-.23Z"/><path class="cls-7" d="M260.29,340.08c-2.65,4.05-2.92,8.96-1.18,13.1,2.3-.6,4.48-1.68,6.38-3.19,1.41-1.12,2.67-2.49,3.72-4.09,.86-1.31,1.52-2.7,1.98-4.13,.85-2.63,1.05-5.39,.63-8.04-4.5,.06-8.88,2.29-11.53,6.34Z"/></g><path class="cls-16" d="M568.21,231.91h79.69c13.29,0,24.08,10.79,24.08,24.08v20.02c0,6.18-5.02,11.2-11.2,11.2h-105.46c-6.18,0-11.2-5.02-11.2-11.2v-20.02c0-13.29,10.79-24.08,24.08-24.08Z"/><g><line class="cls-2" x1="561.38" y1="249.16" x2="592.13" y2="249.16"/><line class="cls-2" x1="600.53" y1="249.16" x2="622.43" y2="249.16"/><line class="cls-2" x1="561.38" y1="257.12" x2="612.96" y2="257.12"/><line class="cls-2" x1="627.06" y1="257.12" x2="663.79" y2="257.12"/><line class="cls-2" x1="590.34" y1="266.19" x2="627.07" y2="266.19"/><line class="cls-2" x1="631.5" y1="249.16" x2="662.02" y2="249.16"/><line class="cls-2" x1="568.24" y1="275.59" x2="601.93" y2="275.59"/><line class="cls-2" x1="611.15" y1="275.59" x2="635.15" y2="275.59"/></g><g><path class="cls-14" d="M678.75,468.12c-3.6-.32-8.15-2.15-12.52-7.92,0,0,8.42-2.78,14.76,1.18,3.27,2.04,1.6,7.07-2.24,6.73Z"/><path class="cls-14" d="M676.96,455.47c-2.76,2.34-7.26,4.28-14.44,3.33,0,0,3.95-7.94,11.23-9.66,3.75-.89,6.15,3.84,3.21,6.33Z"/><path class="cls-14" d="M677.38,459.84c7.14-1.14,11.87-3.2,12.24-3.37,.55-.25,.8-.89,.55-1.44-.25-.55-.89-.8-1.44-.55-.17,.08-17.45,7.6-36.22,1.5-.57-.19-1.19,.13-1.38,.7-.19,.57,.13,1.19,.7,1.38,9.6,3.12,18.68,2.88,25.54,1.79Z"/><path class="cls-7" d="M696.63,466.32c1.97-.22,3.55-1.56,4.17-3.32,1.82,.41,3.79-.21,5.03-1.76,1.24-1.55,1.4-3.61,.6-5.29,1.57-.99,2.53-2.83,2.31-4.8-.22-1.97-1.56-3.55-3.32-4.17,.41-1.82-.21-3.79-1.76-5.03-1.55-1.24-3.61-1.4-5.29-.6-.99-1.57-2.83-2.53-4.8-2.31-1.97,.22-3.55,1.56-4.17,3.32-1.82-.41-3.79,.21-5.03,1.76s-1.4,3.61-.6,5.29c-1.57,.99-2.53,2.83-2.31,4.8,.22,1.97,1.56,3.55,3.32,4.17-.41,1.82,.21,3.79,1.76,5.03,1.55,1.24,3.61,1.4,5.29,.6,.99,1.57,2.83,2.53,4.8,2.31Z"/><circle class="cls-9" cx="695.09" cy="452.69" r="5.74"/></g><g class="cls-18"><g><g><path class="cls-8" d="M4.03,459l11.9-.04c1.47,0,2.7-1,2.81-2.29l7.3-79.58c.06-.64-.16-1.27-.62-1.76l-13.26-14.47c-1.09-1.19-3.14-1.24-4.31-.11l-14.72,14.33c-.55,.54-.81,1.26-.71,1.98l11.6,81.93h0Z"/><path class="cls-8" d="M-247.44,422.32l277.12-8.43c1.5-.05,2.7-1.12,2.73-2.44l.21-9.33c.03-1.42-1.29-2.58-2.91-2.54l-280.25,6.71c-1.79,.04-3.09,1.52-2.68,3.05l2.92,11.05c.31,1.16,1.5,1.97,2.86,1.93Z"/></g><path d="M6.66,418.1c-.33,15.45,.33,30.6,.32,46.17,0,1.57,0,3.13,0,4.69,0,24.91,0,49.82,0,49.82l-275.95,1.43c-.76-14.83,12.69-26.89,26.36-34.04-2.28-3.43-3.58-7.44-4.45-11.3-.33-2.41-.32-4.79,.01-7.12,.29-2.07,.84-4.09,1.61-6.06,4.61-13.59,19.91-22.72,36-22.75,2.01,0,4.04,.13,6.05,.4,2.11,.21,4.06,.78,6.02,1.06,3.9-23.45,35.47-26.6,55.48-16.84,1.44,.59,2.85,1.24,4.2,1.96,6.77,3.59,12.34,8.81,15.65,15.79,.84,1.58,1.55,3.19,2.12,4.81,1.3-1.14,2.6-2.36,3.98-3.51,1.38-1.16,2.83-2.25,4.44-3.15,18.26-11.64,43.32-16.5,64.29-7.1,1.61,.63,3.19,1.32,4.73,2.09,1.63,.53,2.93,1.39,4.56,2.25,1.14-1.61,2.43-3.13,3.85-4.55,10.14-9.75,25.44-16.62,40.73-14.04"/></g></g><path class="cls-14" d="M-4.9,432.29c.25,11.9-.25,23.58-.24,35.57,0,1.21,0,2.41,0,3.61,0,19.19,0,38.38,0,38.38l207.77,1.1c.57-11.43-9.56-20.71-19.85-26.22,1.72-2.64,2.7-5.73,3.35-8.71,.25-1.85,.24-3.69,0-5.48-.22-1.59-.63-3.15-1.21-4.67-3.47-10.47-14.99-17.5-27.11-17.53-1.51,0-3.04,.1-4.56,.31-1.59,.16-3.06,.6-4.53,.82-2.94-18.07-26.71-20.49-41.77-12.97-1.09,.45-2.14,.96-3.16,1.51-5.1,2.76-9.29,6.79-11.78,12.16-.63,1.22-1.17,2.46-1.6,3.71-.98-.88-1.96-1.82-3-2.71s-2.13-1.73-3.34-2.43c-13.75-8.97-32.62-12.71-48.41-5.47-1.21,.48-2.4,1.02-3.56,1.61-1.23,.41-2.21,1.07-3.43,1.73-.86-1.24-1.83-2.41-2.9-3.5-7.64-7.51-19.15-12.8-30.67-10.82"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg
new file mode 100644
index 00000000000..d67912a84fd
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#597059;}
+	.st1{fill:#3D4359;}
+	.st2{fill:#999270;}
+	.st3{fill:#5A7184;}
+	.st4{fill:#495768;}
+	.st5{fill:#594B63;}
+	.st6{fill:#867692;}
+	.st7{clip-path:url(#SVGID_00000138552620425005119300000014317059332893795243_);}
+	.st8{fill:#47394F;}
+	.st9{fill:#1E1B15;}
+	.st10{fill:#6D5E7C;}
+	.st11{fill:#61697C;}
+	.st12{fill:#4C5766;}
+	.st13{clip-path:url(#SVGID_00000093855991487319360380000005617427749424281739_);}
+</style>
+<rect x="-1.1" y="233.1" class="st0" width="723.2" height="272.3"/>
+<rect x="-0.3" y="-3.1" class="st1" width="723.4" height="246.6"/>
+<path class="st2" d="M426.2,63.2c0-4.2-3.4-7.5-7.5-7.5c0,0-0.1,0-0.1,0c-1.7-3.6-5.3-6-9.5-6c-0.3,0-0.6,0-0.8,0
+	c-0.9-7.7-6.5-14-13.8-15.9c0.4-1.4,0.6-2.8,0.6-4.3c0-9.4-7.6-17.1-17.1-17.1c-6.5,0-12.1,3.6-15,9c-3.2-1.5-6.9-2.3-10.7-2.3
+	c-7.1,0-13.5,2.9-18.2,7.5c-3.8-2.5-8.4-4-13.3-4c-9.7,0-18.1,5.8-21.9,14.1c-1.5-0.4-3.2-0.7-4.8-0.7c-8.2,0-15,5.7-16.9,13.3
+	c-0.4,0-0.8-0.1-1.1-0.1c-6,0-10.8,6.7-10.8,12.7c0,3.4,1.6,6.5,4.1,8.5l152.1,0C424.1,69.3,426.2,66.5,426.2,63.2z"/>
+<path class="st2" d="M648.1,113.5c0-4.2-3.4-7.5-7.5-7.5c0,0-0.1,0-0.1,0c-1.7-3.6-5.3-6-9.5-6c-0.3,0-0.6,0-0.8,0
+	c-0.9-7.7-6.5-14-13.8-15.9c0.4-1.4,0.6-2.8,0.6-4.3c0-9.4-7.6-17.1-17.1-17.1c-6.5,0-12.2,3.6-15,9c-3.2-1.5-6.9-2.3-10.7-2.3
+	c-7.1,0-13.5,2.9-18.2,7.5c-3.8-2.5-8.4-4-13.3-4c-9.7,0-18.1,5.8-21.9,14.1c-1.5-0.4-3.2-0.7-4.8-0.7c-8.2,0-15,5.7-16.9,13.3
+	c-0.4,0-0.8-0.1-1.1-0.1c-6,0-10.8,6.7-10.8,12.7c0,3.4,1.6,6.5,4.1,8.5l152.1,0C646,119.6,648.1,116.8,648.1,113.5z"/>
+<rect x="131.9" y="164.8" class="st3" width="595.6" height="92.5"/>
+<path class="st4" d="M128,156.8h598.8c4.1,0,7.5,3.4,7.5,7.5v0c0,4.1-3.4,7.5-7.5,7.5H128c-4.1,0-7.5-3.4-7.5-7.5v0
+	C120.5,160.2,123.8,156.8,128,156.8z"/>
+<g>
+	<path class="st5" d="M700.4,357.5l-20.6-15c-3.5-2.6-5.8-6.5-6.4-10.9c-0.8-6.3-1.6-12.6-2.3-18.9c-27.2,4-54.7,4.4-81.9,1.4
+		c-0.5,3.9-1,7.8-1.5,11.7c-0.7,5.9-4.6,11-10.1,13.2l-13.2,5.4c-3.1,1.1-8.5,4.6-6.8,10.9s8.2,6.9,11.4,6.2l37.4-6.5
+		c3.3-0.6,6.4,1.4,7.4,4.6l4.2,13.5c0.5,2.3,1.7,14,16.2,12.6s13.8-13.4,14.1-15.7l1.2-6.1c0.9-4.3,5.4-6.7,9.3-5l32.8,14.3
+		c2.9,1.4,9.1,2.8,12.2-3C707.2,364.3,703.1,359.3,700.4,357.5L700.4,357.5z"/>
+	
+		<ellipse transform="matrix(0.9998 -1.884844e-02 1.884844e-02 0.9998 -5.8157 11.9326)" class="st6" cx="630.1" cy="314.5" rx="40.9" ry="12.4"/>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="759.7" y="-523.5" width="559.3" height="509"/>
+	</defs>
+	<clipPath id="SVGID_00000091708713221499517000000013565372961228037562_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000091708713221499517000000013565372961228037562_);">
+		<path class="st8" d="M702.2-57.8c14.8,1.5,30-1.5,39.7-13.3c0.2-0.2,0.3-0.4,0.5-0.6c20.2-70.1,14.4-465.1,14.4-465.1
+			c1.2-52.7,44.3-94.8,97-94.8l0,0c51.9,0,94.6,40.9,97,92.7L970.3-100l0.4,0c0,0-1.4,16,9.1,28.2c0.2,0.2,0.3,0.4,0.5,0.6
+			c9.7,11.8,24.9,14.9,39.7,13.3c0.2,0,0.5,0,0.8,0c48.5,0.2,84,27.7,84,65.7h-26.6c-9.9,0-19.7-2.5-28.5-7.2l-0.1-0.1
+			c-9.4-4.9-21-7.1-31.4-4c-4.5,1.3-8.6,3.4-12.6,5.7C999.3,6,992,7.9,984.6,7.9l0,0c-0.3,0-0.7,0-1.1,0c-8.3,1.1-17,0.4-25.4,0h-1
+			c-13.7,0-27.9,0-41.8,0c0,0-98.7,0.4-145.2,0.6c-12.5,0-24.7-3.6-34.9-10.8c-6.1-4.2-14-8-22.4-8c-10.5,0-17.2,4.5-22,9.6
+			c-5.2,5.5-12.5,8.7-20.1,8.7h-49C643.7-59.8,702-57.8,702.2-57.8L702.2-57.8z"/>
+	</g>
+</g>
+<path class="st0" d="M384.3,257.8c4-6.9,9.1-13.4,15.2-19.4c1-0.9-0.7-2.4-2-1.7c-6.5,3.5-12.3,7.7-17.2,12.3
+	c1.6-7.3,3.6-14.5,6.1-21.6c0.4-1.2-2-1.9-2.9-0.9c-4.8,6-8.8,12.3-12,18.8c-1.4-3.8-3-7.5-4.6-11.2c-0.5-1.2-2.9-0.7-2.8,0.6
+	c0.2,8.1,0.7,16.2,1.5,24.2C371.6,257.7,378,257.3,384.3,257.8L384.3,257.8z"/>
+<path class="st9" d="M378.5,419.7c0,16.2-35.3,24.5-78.9,24.5s-78.9-6.9-78.9-24.5s47.9-22.6,47.9-22.6l69.9,1.2
+	C338.6,398.4,378.5,403.5,378.5,419.7L378.5,419.7z"/>
+<path class="st10" d="M343.6,301l-12.5-22.9c-2.5-3.7-6.7-6-11.2-6h-37c-4.5,0-8.7,2.2-11.2,6L259.1,301c-2,3.1-2.7,6.8-1.9,10.4
+	l15.6,68.9c-3.4,0.7-6.3,2.8-8.1,5.7c-1.2,2-2.5,4.1-3.7,6.1c-1.9,3.2,0.4,7.3,4.1,7.3h72.6c3.8,0,6-4.1,4.1-7.3
+	c-1.2-2-2.5-4.1-3.7-6.1c-1.8-3-4.8-5-8.1-5.7l15.6-68.9C346.3,307.9,345.6,304.1,343.6,301L343.6,301z"/>
+<g>
+	<path class="st11" d="M557.1,253.3H398.1c5.7-36.2,11.4-72.4,17-108.6h125C545.8,180.9,551.5,217.1,557.1,253.3L557.1,253.3z"/>
+	<path class="st12" d="M407.3,139.3h140.6c4.3,0,7.8,3.5,7.8,7.8l0,0c0,4.3-3.5,7.8-7.8,7.8H407.3c-4.3,0-7.8-3.5-7.8-7.8l0,0
+		C399.5,142.8,403,139.3,407.3,139.3z"/>
+	<path class="st12" d="M389.6,250.4h176c4.2,0,7.6,3.4,7.6,7.6v13.5c0,4.2-3.4,7.6-7.6,7.6h-176c-4.2,0-7.6-3.4-7.6-7.6V258
+		C382,253.8,385.4,250.4,389.6,250.4z"/>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_00000161615958634911619530000000688282176607178380_" x="-1.3" y="-3.1" width="357.1" height="509.5"/>
+	</defs>
+	<clipPath id="SVGID_00000009583480419067562460000015101750564901266360_">
+		<use xlink:href="#SVGID_00000161615958634911619530000000688282176607178380_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000009583480419067562460000015101750564901266360_);">
+		<g>
+			<g>
+				<path d="M33,174.2l-19.1,9.3l-1.9,70.1l21.6,21.1l86.7,8.4l29.7-27.2c0,0-13.8-18.2,4.2-58.2l-94-16.3L33,174.2L33,174.2z"/>
+				<path class="st5" d="M224.4,353.3c0.7-20.9-16.2-34.8-32.3-38.6c-34.5-7.7-41.9-45.3-41.9-45.3l2.3-22.4
+					c0.7-2.6-2.3-4.5-4.4-2.8l-13.4,20.1c-1.6,1.3-5.3,1.2-5.7-0.8l-10.4-16.6c-0.5-2.3-3.4-2.9-4.8-1.1l-6.3,14.3
+					c-1.2,1.5-3.6,1.4-4.5-0.4L97,249.1c-1.2-2.1-4.3-1.8-5,0.6L79.5,266c-0.7,2.5-4.2,2.7-5.1,0.2l-4.1-10.5c-0.9-2.3-4.1-2.3-5,0
+					l-1.8,4.5c-1.2,3-3.7,6.6-19.5,6.6c-15,0-34.4-24.8-15.8-80.5c1.3-3.9,7.2-3.6,9.3-0.1l12.7,26.1c1.4,1.3,3.7,0.8,4.4-0.9
+					l8.5-19.6c0.8-1.9,3.2-2.3,4.6-0.7l17,19.2c1.4,1.6,4.1,1,4.7-1l4.6-12.5c0.6-2,3.1-2.6,4.6-1.1l11,13.5
+					c1.7,2.4,4.6,1.9,5.8-0.2l6.9-8.9c2.5-3.1,4.7-3.1,6.1-0.4l4.6,4.5c1.9,1.9,5.1,0.2,4.6-2.4c-0.2-5.5,6.1-7.2,8.8-2.3l6.3,9.9
+					c2.1,1.2,4.6-0.7,4-3l-2.6-17.1l7.9-15.1c4.1-6.3,11.5-46.9-0.5-72.8c-9.8-21.2-16.3-43.8-18.2-67.1C141.5,13.8,140-5.1,140-5.1
+					L-4.6-5.6c0,0,17.6,236.6-14,296.6c-0.1,0.1-13.7,24.8-37.6,26.1c-9.9,1.8-32.4,2-49.8,35.3l150.9,0.8v0.3L224.4,353.3
+					L224.4,353.3z"/>
+			</g>
+			<g>
+				<path class="st5" d="M76.4,66.1L76.4,66.1c-3.7-14.2-18.8-22.3-32.8-17.5L-85.9,89.9c-9.4,3.2-14.8,13.2-12.2,22.8l0,0
+					c2.6,9.8,12.3,15.8,22.2,13.8L56.9,97.4C71.2,94.6,80.1,80.2,76.4,66.1L76.4,66.1z"/>
+				<path class="st5" d="M-13.8,96.1l-24.6,61.6c-1.5,3.2-0.2,7,2.9,8.6l0,0c3,1.6,6.8,0.6,8.7-2.3l35.7-55.5
+					c4.1-6.4,1.9-14.9-4.8-18.5l0,0C-2.4,86.5-10.7,89.3-13.8,96.1z"/>
+			</g>
+		</g>
+	</g>
+</g>
+<path class="st0" d="M653.6,364.8c-2.3-7.1-5.7-14.1-10-20.8c-0.7-1.1,1.1-2,2.2-1.1c5.3,4.5,9.7,9.5,13.3,14.7c0-7-0.4-14-1.2-21
+	c-0.2-1.2,2.2-1.4,2.8-0.2c3.2,6.4,5.6,13,7.2,19.5c2-3.2,4.2-6.3,6.5-9.3c0.7-1,2.8-0.1,2.5,1.1c-1.8,7.4-3.9,14.7-6.2,21.9
+	C665.1,367.3,659.4,365.7,653.6,364.8L653.6,364.8z"/>
+<path class="st0" d="M48.3,363.4c6-10.2,13.6-20,22.7-28.9c1.5-1.4-1.1-3.5-3-2.5c-9.7,5.2-18.3,11.4-25.7,18.3
+	c2.4-10.8,5.4-21.6,9-32.2c0.6-1.8-3-2.9-4.3-1.3c-7.2,8.9-13.2,18.3-17.9,28c-2.1-5.6-4.4-11.2-6.9-16.7c-0.8-1.7-4.3-1-4.2,0.8
+	c0.3,12.1,1,24.1,2.2,36.1C29.6,363.2,39,362.7,48.3,363.4L48.3,363.4z"/>
+<path class="st0" d="M338.4,447.2c-3.8-6.4-8.5-12.6-14.2-18.2c-0.9-0.9,0.7-2.2,1.9-1.6c6.1,3.3,11.5,7.2,16.1,11.5
+	c-1.5-6.8-3.4-13.5-5.7-20.2c-0.4-1.1,1.9-1.8,2.7-0.8c4.5,5.6,8.3,11.5,11.2,17.5c1.3-3.5,2.8-7,4.3-10.5c0.5-1.1,2.7-0.6,2.7,0.5
+	c-0.2,7.6-0.6,15.1-1.4,22.7C350.3,447.1,344.3,446.8,338.4,447.2L338.4,447.2z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg
new file mode 100644
index 00000000000..6aa99f11d6b
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clippath);}.cls-3{fill:#6c7081;}.cls-4{fill:#867692;}.cls-5{fill:#737a8d;}.cls-6{fill:#af8467;}.cls-7{fill:#d0cbaf;}.cls-8{fill:#c49a88;}.cls-9{fill:#1e1b15;}.cls-10{fill:#6d5e7c;}.cls-11{fill:#5b6778;}.cls-12{fill:#594b63;}.cls-13{fill:#8290a0;}.cls-14{fill:#47394f;}.cls-15{fill:#4c5766;}.cls-16{fill:#778d77;}.cls-17{clip-path:url(#clippath-1);}.cls-18{clip-path:url(#clippath-2);}</style><clipPath id="clippath"><rect class="cls-1" x="759.65" y="-523.47" width="559.27" height="509.05" transform="translate(2078.58 -537.88) rotate(-180)"/></clipPath><clipPath id="clippath-1"><rect class="cls-1" x="-1.31" y="-3.09" width="357.1" height="509.52"/></clipPath><clipPath id="clippath-2"><rect class="cls-1" x="285.12" y="530.19" width="109.49" height="86.71"/></clipPath></defs><rect class="cls-16" x="-1.12" y="233.1" width="723.18" height="272.34"/><rect class="cls-3" x="-.31" y="-3.09" width="723.4" height="246.63"/><path class="cls-7" d="M426.24,63.21c0-4.17-3.38-7.54-7.54-7.54-.05,0-.09,0-.14,0-1.69-3.57-5.33-6.04-9.55-6.04-.28,0-.56,.01-.84,.04-.92-7.7-6.47-13.97-13.8-15.94,.36-1.39,.56-2.84,.56-4.34,0-9.43-7.64-17.07-17.07-17.07-6.5,0-12.15,3.63-15.04,8.98-3.25-1.47-6.86-2.29-10.66-2.29-7.11,0-13.55,2.87-18.22,7.51-3.81-2.52-8.37-3.99-13.28-3.99-9.74,0-18.13,5.78-21.94,14.09-1.54-.44-3.16-.69-4.84-.69-8.19,0-15.05,5.65-16.91,13.26-.37-.04-.75-.06-1.14-.06-5.97,0-10.81,6.7-10.81,12.67,0,3.45,1.62,6.52,4.13,8.5l152.08,.02c2.92-1.04,5.01-3.83,5.01-7.11Z"/><path class="cls-7" d="M648.11,113.52c0-4.17-3.38-7.54-7.54-7.54-.05,0-.09,0-.14,0-1.69-3.57-5.33-6.04-9.55-6.04-.28,0-.56,.01-.84,.04-.92-7.7-6.47-13.97-13.8-15.94,.36-1.39,.56-2.84,.56-4.34,0-9.43-7.64-17.07-17.07-17.07-6.5,0-12.15,3.63-15.04,8.98-3.25-1.47-6.86-2.29-10.66-2.29-7.11,0-13.55,2.87-18.22,7.51-3.81-2.52-8.37-3.99-13.28-3.99-9.74,0-18.13,5.78-21.94,14.09-1.54-.44-3.16-.69-4.84-.69-8.19,0-15.05,5.65-16.91,13.26-.37-.04-.75-.06-1.14-.06-5.97,0-10.81,6.7-10.81,12.67,0,3.45,1.62,6.52,4.13,8.5l152.08,.02c2.92-1.04,5.01-3.83,5.01-7.11Z"/><rect class="cls-13" x="131.89" y="164.77" width="595.56" height="92.53"/><rect class="cls-11" x="120.48" y="156.81" width="613.75" height="14.98" rx="7.49" ry="7.49"/><g><path class="cls-12" d="M700.4,357.47l-20.6-15.01c-3.51-2.56-5.81-6.49-6.36-10.88-.78-6.3-1.57-12.59-2.35-18.89-27.18,3.95-54.69,4.42-81.88,1.4-.49,3.91-.97,7.82-1.46,11.73-.73,5.92-4.62,11.01-10.09,13.23l-13.22,5.35c-3.07,1.14-8.49,4.57-6.75,10.85s8.23,6.87,11.39,6.19l37.43-6.47c3.28-.57,6.44,1.37,7.44,4.57l4.22,13.46c.54,2.29,1.72,14.05,16.16,12.62,14.44-1.43,13.85-13.39,14.1-15.74l1.24-6.13c.87-4.3,5.42-6.74,9.34-5.02l32.75,14.32c2.92,1.39,9.09,2.82,12.25-2.95,3.16-5.77-.94-10.85-3.61-12.64Z"/><ellipse class="cls-4" cx="630.12" cy="314.48" rx="40.92" ry="12.44" transform="translate(-5.82 11.94) rotate(-1.08)"/></g><g class="cls-2"><path class="cls-14" d="M702.23-57.84c14.77,1.52,29.96-1.52,39.69-13.34,.17-.19,.34-.38,.5-.57,20.15-70.14,14.36-465.07,14.36-465.07,1.24-52.7,44.31-94.78,97.03-94.78h0c51.92,0,94.64,40.86,96.96,92.73l19.56,438.84,.39,.03s-1.44,15.97,9.14,28.25c.17,.19,.33,.38,.5,.57,9.73,11.82,24.92,14.86,39.69,13.34,.25,0,.5,0,.75,0,48.5,.15,83.99,27.72,83.99,65.7h-26.55c-9.95,0-19.7-2.54-28.51-7.17l-.1-.05c-9.42-4.91-21.04-7.05-31.36-4.01-4.48,1.32-8.59,3.39-12.59,5.69-6.4,3.68-13.68,5.54-21.06,5.54h0c-.35,0-.71,0-1.06,0-8.29,1.14-17.02,.38-25.41,0h-1.05c-13.67,0-27.87,0-41.84,0,0,0-98.69,.43-145.17,.56-12.46,.04-24.69-3.63-34.9-10.76-6.09-4.24-14.01-8.03-22.36-8.03-10.55,0-17.22,4.51-22.05,9.57-5.24,5.5-12.48,8.66-20.08,8.66h-49.03c22.03-67.61,80.31-65.7,80.56-65.7Z"/></g><path class="cls-16" d="M384.26,257.8c4.04-6.88,9.13-13.43,15.21-19.42,.98-.94-.72-2.37-2.03-1.67-6.52,3.5-12.29,7.68-17.22,12.29,1.6-7.26,3.62-14.48,6.07-21.61,.43-1.22-1.99-1.94-2.87-.85-4.82,5.97-8.84,12.28-12.02,18.75-1.41-3.77-2.95-7.51-4.63-11.21-.52-1.16-2.88-.69-2.84,.56,.21,8.11,.7,16.19,1.47,24.24,6.24-1.17,12.58-1.53,18.86-1.09Z"/><path class="cls-9" d="M378.47,419.73c0,16.25-35.31,24.54-78.86,24.54s-78.86-6.89-78.86-24.54,47.88-22.57,47.88-22.57l69.95,1.24s39.88,5.09,39.88,21.34Z"/><path class="cls-10" d="M343.63,301.04l-12.55-22.88c-2.49-3.74-6.69-5.98-11.18-5.98h-37.03c-4.49,0-8.69,2.24-11.18,5.98l-12.55,22.88c-2.04,3.06-2.74,6.83-1.93,10.42l15.56,68.88c-3.36,.69-6.32,2.75-8.14,5.74-1.23,2.03-2.46,4.06-3.69,6.09-1.94,3.2,.37,7.3,4.11,7.3h72.65c3.75,0,6.05-4.09,4.11-7.3-1.23-2.03-2.46-4.06-3.69-6.09-1.81-3-4.78-5.05-8.14-5.74l15.56-68.88c.81-3.59,.11-7.36-1.93-10.42Z"/><g><path class="cls-5" d="M557.14,253.32h-159.07c5.68-36.21,11.36-72.42,17.04-108.63h124.98c5.68,36.21,11.36,72.42,17.04,108.63Z"/><rect class="cls-15" x="399.47" y="139.33" width="156.26" height="15.62" rx="7.81" ry="7.81"/><rect class="cls-15" x="382.02" y="250.36" width="191.17" height="28.7" rx="7.6" ry="7.6"/></g><g class="cls-17"><g><g><path d="M32.97,174.24l-19.06,9.28-1.86,70.11,21.64,21.15,86.7,8.37,29.7-27.21s-13.82-18.24,4.18-58.24l-94.01-16.32-27.28-7.13Z"/><path class="cls-12" d="M224.38,353.31c.73-20.87-16.21-34.75-32.3-38.58-34.49-7.66-41.94-45.34-41.94-45.34l2.27-22.41c.72-2.57-2.33-4.52-4.36-2.8l-13.44,20.13c-1.57,1.33-5.3,1.21-5.72-.8l-10.42-16.62c-.48-2.26-3.38-2.93-4.8-1.1l-6.31,14.28c-1.2,1.54-3.58,1.36-4.52-.36l-5.8-10.57c-1.17-2.13-4.32-1.77-4.99,.56l-12.56,16.35c-.71,2.5-4.19,2.66-5.14,.24l-4.1-10.5c-.89-2.29-4.12-2.31-5.04-.03l-1.84,4.55c-1.2,2.96-3.7,6.59-19.54,6.59-14.98,0-34.36-24.82-15.75-80.46,1.3-3.9,7.16-3.62,9.3-.11l12.67,26.08c1.38,1.3,3.65,.81,4.37-.95l8.53-19.56c.77-1.87,3.24-2.27,4.56-.74l16.98,19.19c1.41,1.63,4.07,1.04,4.66-1.03l4.62-12.52c.58-2.02,3.14-2.65,4.58-1.11l11.04,13.51c1.71,2.44,4.63,1.95,5.76-.17l6.89-8.91c2.46-3.11,4.66-3.11,6.12-.43l4.63,4.49c1.89,1.86,5.06,.18,4.57-2.43-.19-5.47,6.15-7.18,8.83-2.3l6.31,9.86c2.09,1.24,4.63-.68,4.01-3.03l-2.6-17.08,7.88-15.1c4.14-6.28,11.5-46.91-.49-72.75-9.83-21.21-16.32-43.81-18.2-67.11-1.65-20.47-3.14-39.36-3.14-39.36L-4.61-5.64S13.02,230.97-18.63,290.97c-.11,.12-13.72,24.78-37.56,26.06-9.88,1.79-32.44,2.04-49.82,35.26l150.91,.77v.26H224.38Z"/></g><g><path class="cls-12" d="M76.43,66.14h0c-3.74-14.25-18.81-22.31-32.75-17.52L-85.89,89.86c-9.42,3.25-14.75,13.21-12.22,22.85h0c2.56,9.75,12.27,15.81,22.15,13.84L56.89,97.41c14.3-2.86,23.25-17.17,19.54-31.28Z"/><path class="cls-12" d="M-13.82,96.13l-24.58,61.56c-1.45,3.2-.16,6.97,2.93,8.61h0c3.05,1.62,6.83,.64,8.71-2.26L8.94,108.55c4.12-6.37,1.93-14.9-4.75-18.5h0c-6.63-3.58-14.91-.78-18.01,6.08Z"/></g></g></g><path class="cls-16" d="M653.57,364.84c-2.32-7.1-5.67-14.1-10.04-20.78-.71-1.06,1.13-2.02,2.19-1.12,5.26,4.5,9.7,9.47,13.29,14.67-.01-6.96-.43-13.96-1.24-20.97-.15-1.2,2.21-1.38,2.79-.2,3.22,6.42,5.63,12.99,7.25,19.54,2.04-3.17,4.2-6.28,6.47-9.33,.71-.96,2.77-.06,2.49,1.08-1.8,7.37-3.86,14.67-6.17,21.87-5.48-2.32-11.2-3.91-17.03-4.75Z"/><path class="cls-16" d="M48.35,363.35c6.02-10.25,13.6-20.02,22.67-28.93,1.46-1.41-1.08-3.53-3.02-2.49-9.72,5.22-18.31,11.44-25.66,18.32,2.38-10.82,5.39-21.58,9.04-32.2,.64-1.81-2.96-2.9-4.28-1.26-7.19,8.9-13.17,18.3-17.91,27.95-2.1-5.62-4.4-11.19-6.9-16.71-.77-1.73-4.29-1.03-4.23,.83,.31,12.09,1.04,24.13,2.19,36.12,9.31-1.75,18.75-2.29,28.11-1.62Z"/><g class="cls-18"><g><rect class="cls-8" x="269.38" y="389.77" width="204.1" height="305.87"/><rect class="cls-6" x="276.49" y="395.13" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="324.97" y="395.13" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="373.46" y="395.13" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="421.94" y="395.13" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="276.49" y="445.28" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="324.97" y="445.28" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="373.46" y="445.28" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="421.94" y="445.28" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="250.24" y="420.21" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="444.73" y="420.21" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="298.73" y="420.21" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="347.21" y="420.21" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="395.7" y="420.21" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="250.24" y="469.76" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="444.73" y="469.76" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="298.73" y="469.76" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="347.21" y="469.76" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="395.7" y="469.76" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="276.49" y="495.43" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="324.97" y="495.43" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="373.46" y="495.43" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-6" x="421.94" y="495.43" width="44.29" height="20.55" rx="5.56" ry="5.56"/></g></g><path class="cls-16" d="M338.44,447.23c-3.78-6.44-8.55-12.57-14.24-18.16-.92-.88,.68-2.21,1.9-1.56,6.1,3.28,11.5,7.18,16.12,11.49-1.5-6.79-3.39-13.55-5.69-20.22-.4-1.14,1.86-1.82,2.69-.79,4.51,5.59,8.27,11.49,11.25,17.54,1.32-3.53,2.76-7.03,4.33-10.49,.48-1.08,2.69-.65,2.66,.52-.19,7.59-.65,15.15-1.36,22.68-5.84-1.1-11.78-1.43-17.65-1.01Z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg
new file mode 100644
index 00000000000..0407653e924
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg
@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#597059;}
+	.st1{fill:#C4AC8C;}
+	.st2{fill:#9B977C;}
+	.st3{opacity:0.9;}
+	.st4{clip-path:url(#SVGID_00000132066222489165052670000015125266306548061840_);}
+	.st5{fill:#AF8171;}
+	.st6{fill:#966D51;}
+	.st7{fill:#456045;}
+	.st8{fill:#9E8C3F;}
+	.st9{fill:#C4B253;}
+	.st10{fill:#7074B8;}
+	.st11{fill:#D4D2AC;}
+	.st12{fill:#99A4BD;}
+	.st13{fill:#595D66;}
+	.st14{fill:#66805E;}
+	.st15{fill:#80655D;}
+	.st16{fill:#C44D4D;}
+	.st17{fill:#997D30;}
+	.st18{fill:#BC6D5B;}
+	.st19{fill:#53586D;}
+</style>
+<rect x="-0.9" y="-0.8" class="st0" width="723.2" height="342.5"/>
+<rect x="0.2" y="343" class="st1" width="719.8" height="161.2"/>
+<g>
+	<rect x="-0.2" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="45.2" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="90.1" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="135.4" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="-0.2" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="45.2" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="90.1" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="135.4" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="179.9" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="225.2" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="270.1" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="315.5" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="179.9" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="225.2" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="270.1" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="315.5" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="360.4" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="405.7" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="450.6" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="496" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="360.4" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="405.7" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="450.6" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="496" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="540.5" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="585.8" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="630.7" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="676" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="540.5" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="585.8" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="630.7" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="676" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="-0.2" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="45.2" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="90.1" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="135.4" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="-0.2" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="45.2" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="90.1" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="135.4" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="179.9" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="225.2" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="270.1" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="315.5" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="179.9" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="225.2" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="270.1" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="315.5" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="360.4" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="405.7" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="450.6" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="496" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="360.4" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="405.7" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="450.6" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="496" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="540.5" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="585.8" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="630.7" y="340.9" class="st2" width="44.9" height="40.7"/>
+	<rect x="676" y="381.3" class="st2" width="44.9" height="40.7"/>
+	<rect x="540.5" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="585.8" y="462.8" class="st2" width="44.9" height="40.7"/>
+	<rect x="630.7" y="422.4" class="st2" width="44.9" height="40.7"/>
+	<rect x="676" y="462.8" class="st2" width="44.9" height="40.7"/>
+</g>
+<g class="st3">
+	<g>
+		<defs>
+			<path id="SVGID_1_" d="M721.4,206.9c-71.4-22.1-74-71.8-117.6-104C557.1,68.4,558,0.6,558,0.6l163.4-0.9V206.9z"/>
+		</defs>
+		<clipPath id="SVGID_00000111173458783991640460000004086181342235884451_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_00000111173458783991640460000004086181342235884451_);">
+			<rect x="544.3" y="-4.4" class="st5" width="203.4" height="305.9"/>
+			<path class="st6" d="M556.9,0.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6V6.5
+				C551.4,3.4,553.8,0.9,556.9,0.9z"/>
+			<path class="st6" d="M605.2,0.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6V6.5
+				C599.7,3.4,602.2,0.9,605.2,0.9z"/>
+			<path class="st6" d="M653.6,0.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6V6.5
+				C648,3.4,650.5,0.9,653.6,0.9z"/>
+			<path class="st6" d="M701.9,0.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6V6.5
+				C696.3,3.4,698.8,0.9,701.9,0.9z"/>
+			<path class="st6" d="M556.9,51.1h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.5
+				C551.4,53.6,553.8,51.1,556.9,51.1z"/>
+			<path class="st6" d="M605.2,51.1h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.5
+				C599.7,53.6,602.2,51.1,605.2,51.1z"/>
+			<path class="st6" d="M653.6,51.1h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.5
+				C648,53.6,650.5,51.1,653.6,51.1z"/>
+			<path class="st6" d="M701.9,51.1h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.5
+				C696.3,53.6,698.8,51.1,701.9,51.1z"/>
+			<path class="st6" d="M530.8,26h33c3.1,0,5.5,2.5,5.5,5.6V41c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.4
+				C525.2,28.5,527.7,26,530.8,26z"/>
+			<path class="st6" d="M724.6,26h33c3.1,0,5.5,2.5,5.5,5.6V41c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.4
+				C719,28.5,721.5,26,724.6,26z"/>
+			<path class="st6" d="M579.1,26h33c3.1,0,5.5,2.5,5.5,5.6V41c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.4
+				C573.5,28.5,576,26,579.1,26z"/>
+			<path class="st6" d="M627.4,26h33c3.1,0,5.5,2.5,5.5,5.6V41c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.4
+				C621.8,28.5,624.3,26,627.4,26z"/>
+			<path class="st6" d="M675.7,26h33c3.1,0,5.5,2.5,5.5,5.6V41c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.4
+				C670.2,28.5,672.7,26,675.7,26z"/>
+			<path class="st6" d="M530.8,75.6h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C525.2,78,527.7,75.6,530.8,75.6z"/>
+			<path class="st6" d="M724.6,75.6h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C719,78,721.5,75.6,724.6,75.6z"/>
+			<path class="st6" d="M579.1,75.6h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C573.5,78,576,75.6,579.1,75.6z"/>
+			<path class="st6" d="M627.4,75.6h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C621.8,78,624.3,75.6,627.4,75.6z"/>
+			<path class="st6" d="M675.7,75.6h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C670.2,78,672.7,75.6,675.7,75.6z"/>
+			<path class="st6" d="M556.9,101.2h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C551.4,103.7,553.8,101.2,556.9,101.2z"/>
+			<path class="st6" d="M605.2,101.2h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C599.7,103.7,602.2,101.2,605.2,101.2z"/>
+			<path class="st6" d="M653.6,101.2h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C648,103.7,650.5,101.2,653.6,101.2z"/>
+			<path class="st6" d="M701.9,101.2h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C696.3,103.7,698.8,101.2,701.9,101.2z"/>
+			<path class="st6" d="M556.9,151.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C551.4,153.9,553.8,151.4,556.9,151.4z"/>
+			<path class="st6" d="M605.2,151.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C599.7,153.9,602.2,151.4,605.2,151.4z"/>
+			<path class="st6" d="M653.6,151.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C648,153.9,650.5,151.4,653.6,151.4z"/>
+			<path class="st6" d="M701.9,151.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C696.3,153.9,698.8,151.4,701.9,151.4z"/>
+			<path class="st6" d="M530.8,126.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C525.2,128.8,527.7,126.3,530.8,126.3z"/>
+			<path class="st6" d="M724.6,126.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C719,128.8,721.5,126.3,724.6,126.3z"/>
+			<path class="st6" d="M579.1,126.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C573.5,128.8,576,126.3,579.1,126.3z"/>
+			<path class="st6" d="M627.4,126.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C621.8,128.8,624.3,126.3,627.4,126.3z"/>
+			<path class="st6" d="M675.7,126.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C670.2,128.8,672.7,126.3,675.7,126.3z"/>
+			<path class="st6" d="M530.8,175.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C525.2,178.3,527.7,175.9,530.8,175.9z"/>
+			<path class="st6" d="M724.6,175.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C719,178.3,721.5,175.9,724.6,175.9z"/>
+			<path class="st6" d="M579.1,175.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C573.5,178.3,576,175.9,579.1,175.9z"/>
+			<path class="st6" d="M627.4,175.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C621.8,178.3,624.3,175.9,627.4,175.9z"/>
+			<path class="st6" d="M675.7,175.9h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C670.2,178.3,672.7,175.9,675.7,175.9z"/>
+			<path class="st6" d="M556.9,200.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C551.4,202.8,553.8,200.3,556.9,200.3z"/>
+			<path class="st6" d="M605.2,200.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C599.7,202.8,602.2,200.3,605.2,200.3z"/>
+			<path class="st6" d="M653.6,200.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C648,202.8,650.5,200.3,653.6,200.3z"/>
+			<path class="st6" d="M701.9,200.3h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C696.3,202.8,698.8,200.3,701.9,200.3z"/>
+			<path class="st6" d="M556.9,250.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5V256
+				C551.4,252.9,553.8,250.4,556.9,250.4z"/>
+			<path class="st6" d="M605.2,250.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5V256
+				C599.7,252.9,602.2,250.4,605.2,250.4z"/>
+			<path class="st6" d="M653.6,250.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5V256
+				C648,252.9,650.5,250.4,653.6,250.4z"/>
+			<path class="st6" d="M701.9,250.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5V256
+				C696.3,252.9,698.8,250.4,701.9,250.4z"/>
+			<path class="st6" d="M530.8,225.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C525.2,227.8,527.7,225.4,530.8,225.4z"/>
+			<path class="st6" d="M724.6,225.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C719,227.8,721.5,225.4,724.6,225.4z"/>
+			<path class="st6" d="M579.1,225.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C573.5,227.8,576,225.4,579.1,225.4z"/>
+			<path class="st6" d="M627.4,225.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C621.8,227.8,624.3,225.4,627.4,225.4z"/>
+			<path class="st6" d="M675.7,225.4h33c3.1,0,5.5,2.5,5.5,5.6v9.4c0,3.1-2.5,5.6-5.5,5.6h-33c-3.1,0-5.5-2.5-5.5-5.6v-9.4
+				C670.2,227.8,672.7,225.4,675.7,225.4z"/>
+			<path class="st6" d="M530.8,274.9h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.5
+				C525.2,277.4,527.7,274.9,530.8,274.9z"/>
+			<path class="st6" d="M724.6,274.9h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.5
+				C719,277.4,721.5,274.9,724.6,274.9z"/>
+			<path class="st6" d="M579.1,274.9h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.5
+				C573.5,277.4,576,274.9,579.1,274.9z"/>
+			<path class="st6" d="M627.4,274.9h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.5
+				C621.8,277.4,624.3,274.9,627.4,274.9z"/>
+			<path class="st6" d="M675.7,274.9h33c3.1,0,5.5,2.5,5.5,5.5v9.5c0,3.1-2.5,5.5-5.5,5.5h-33c-3.1,0-5.5-2.5-5.5-5.5v-9.5
+				C670.2,277.4,672.7,274.9,675.7,274.9z"/>
+		</g>
+	</g>
+</g>
+<rect x="-0.9" y="312.9" class="st7" width="723.2" height="31.1"/>
+<g>
+	<path d="M370.3,344.3h11.1v27.9c0,3.1-2.5,5.6-5.6,5.6l0,0c-3.1,0-5.6-2.5-5.6-5.6V344.3L370.3,344.3z"/>
+	<path d="M331,346.7h11.1v25.5c0,3.1-2.5,5.6-5.6,5.6l0,0c-3.1,0-5.6-2.5-5.6-5.6V346.7L331,346.7z"/>
+	<path d="M428.9,346.7H440v25.5c0,3.1-2.5,5.6-5.6,5.6l0,0c-3.1,0-5.6-2.5-5.6-5.6V346.7L428.9,346.7z"/>
+	<path d="M469.6,344.3h11.1v27.9c0,3.1-2.5,5.6-5.6,5.6l0,0c-3.1,0-5.6-2.5-5.6-5.6V344.3L469.6,344.3z"/>
+	<g>
+		<path class="st8" d="M342.1,123.7h94.7c12.8,0,23.1,10.3,23.1,23.1v190.2c0,12.8-10.3,23.1-23.1,23.1h-94.7
+			c-12.8,0-23.1-10.3-23.1-23.1V146.8C319,134.1,329.3,123.7,342.1,123.7z"/>
+		<path class="st9" d="M468.5,360.2h-94.7c-12.8,0-23.1-10.3-23.1-23.1V146.8c0-12.8,10.3-23.1,23.1-23.1h94.7
+			c12.8,0,23.1,10.3,23.1,23.1v190.2C491.6,349.9,481.3,360.2,468.5,360.2z"/>
+	</g>
+	<path d="M491.8,237.7H350.1c-0.7,0-1.2-0.5-1.2-1.2s0.5-1.2,1.2-1.2h141.7c0.7,0,1.2,0.5,1.2,1.2S492.5,237.7,491.8,237.7z"/>
+	<path d="M473.6,261.4L473.6,261.4c2.5,0,4.4,2,4.4,4.5v17.8c0,2.5-2,4.5-4.4,4.5l0,0c-2.5,0-4.4-2-4.4-4.5v-17.8
+		C469.1,263.4,471.1,261.4,473.6,261.4z"/>
+	<path class="st10" d="M437.3,224c-0.3,0.1-0.6,0.2-0.9,0.3s-0.7,0.2-1.1,0.3c-0.4,0.1-0.8,0.2-1.2,0.2c-0.4,0.1-0.8,0.1-1.1,0.1
+		c-1,0-1.6-0.4-1.9-1.2l-3.8-10.8c-0.1-0.3-0.1-0.6,0-0.8c0.1-0.2,0.3-0.5,0.6-0.7c0.5-0.4,1.1-0.7,1.8-1.1c0.8-0.4,1.5-0.7,2.4-1
+		c2-0.7,3.6-0.9,4.9-0.6c1.3,0.3,2.2,1.1,2.7,2.5c0.2,0.7,0.2,1.4,0,2c-0.2,0.6-0.6,1.2-1.2,1.7c0.8-0.1,1.6,0.1,2.3,0.5
+		s1.2,1,1.5,1.9c0.5,1.5,0.4,2.8-0.5,4C440.9,222.3,439.4,223.3,437.3,224L437.3,224z M432.7,215.7l1.7-0.6c0.7-0.2,1.1-0.5,1.3-0.9
+		c0.2-0.4,0.2-0.8,0.1-1.2c-0.1-0.4-0.4-0.7-0.9-0.8s-1-0.1-1.7,0.2c-0.2,0.1-0.5,0.2-0.8,0.3s-0.5,0.2-0.7,0.3L432.7,215.7
+		L432.7,215.7z M434.6,221.3c0.2,0,0.5-0.1,0.9-0.2c0.4-0.1,0.7-0.2,1-0.3c0.6-0.2,1.1-0.5,1.4-0.9c0.3-0.4,0.4-0.9,0.2-1.4
+		c-0.2-0.5-0.5-0.8-0.9-0.9s-1,0-1.6,0.2l-1.9,0.7L434.6,221.3L434.6,221.3z"/>
+	<g>
+		<path class="st11" d="M366.3,192.1l26.1-4c2-0.3,3.9,1.1,4.2,3.1l4.1,26.8c0.3,2-1.1,3.9-3.1,4.2l-26.1,4c-2,0.3-3.9-1.1-4.2-3.1
+			l-4.1-26.8C362.9,194.3,364.3,192.4,366.3,192.1z"/>
+		<path class="st12" d="M368.1,193.4l23-3.5c1.8-0.3,3.4,0.9,3.7,2.7l3.4,22.1c0.3,1.8-0.9,3.4-2.7,3.7l-23,3.5
+			c-1.8,0.3-3.4-0.9-3.7-2.7l-3.4-22.1C365.1,195.4,366.3,193.7,368.1,193.4z"/>
+		<path class="st13" d="M396.4,203.1l-6.9-8.2c-0.7-0.9-2.1-0.6-2.5,0.5l-3.8,9.6l-6.6-7.6c-0.6-0.8-1.9-0.7-2.4,0.2l-4,7l-2.7-3.3
+			c-0.5-0.6-1.6-0.2-1.5,0.7l2.6,16.7l29.6-4.6L396.4,203.1L396.4,203.1z"/>
+		<path class="st14" d="M395.1,213.7l-4.9-10.5c-0.4-0.8-1.5-0.6-1.7,0.2l-1.8,8.3l-4-9.5c-0.3-0.8-1.5-0.7-1.7,0.2l-1.3,6.3
+			l-3.5-5.4c-0.5-0.8-1.7-0.4-1.6,0.5l0.5,11.3l-2.9-4.1c-0.5-0.6-1.5-0.4-1.6,0.4l-0.5,2.9l-0.6-1c-0.5-0.9-1.8-0.4-1.7,0.6
+			l0.9,5.4c0,0,0.9,3.1,3.7,2.7l23-3.5c0,0,3.2-0.6,2.7-3.7l-0.7-4.3c-0.1-1-1.6-1-1.8,0L395.1,213.7L395.1,213.7z"/>
+		<path class="st15" d="M368.8,219.4c0.1,0.4,1.1,3.1,3.7,2.7l23-3.5c0,0,3.2-0.6,2.7-3.7L368.8,219.4L368.8,219.4z"/>
+		<path class="st16" d="M372.4,186.9c0.2-0.2,0.5-0.4,0.9-0.7s0.8-0.5,1.3-0.6c0.6-0.2,1.2-0.3,1.8-0.3s1,0.2,1.3,0.6
+			c0.5,0.6,1,1.3,1.6,2.1s1.2,1.6,1.8,2.5c0.6,0.9,1.2,1.7,1.8,2.5s1.1,1.6,1.5,2.2c-0.1,0.2-0.3,0.5-0.5,0.7
+			c-0.3,0.2-0.6,0.4-1,0.6c-0.3,0.1-0.6,0.2-0.8,0.2c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.1-0.5-0.3s-0.3-0.3-0.4-0.5l-0.8-1.2
+			l-3.5,1.2c0,0.4,0.1,0.9,0.1,1.3c0,0.4,0.1,0.9,0.1,1.3c-0.2,0.1-0.3,0.2-0.5,0.4c-0.2,0.1-0.4,0.2-0.7,0.3
+			c-0.6,0.2-1.2,0.3-1.6,0.2s-0.7-0.4-0.8-0.8c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0-0.4,0-0.7c0-0.4-0.1-0.9-0.1-1.4c0-0.6,0-1.2,0-1.9
+			c0-0.7,0-1.4,0-2.1c0-0.7,0-1.4,0-2c0-0.6,0-1.2,0-1.7S372.3,187.2,372.4,186.9L372.4,186.9z M375.5,188.6c0,0.6,0,1.3,0,2
+			c0,0.7,0,1.5,0.1,2.2l2.4-0.8c-0.4-0.6-0.8-1.2-1.3-1.8c-0.4-0.6-0.8-1.1-1.1-1.6L375.5,188.6L375.5,188.6z"/>
+	</g>
+	<g>
+		<g>
+			<path class="st11" d="M390.4,139.8l-1.1,1.3l-1.6-0.7c-0.5-0.2-1-0.1-1.3,0.3l-1.1,1.3l-1.6-0.7c-0.5-0.2-1-0.1-1.3,0.3l-1.1,1.3
+				l-1.6-0.7c-0.5-0.2-1-0.1-1.3,0.3l-1.1,1.3l-0.6-0.2c-0.2-0.1-0.5,0.1-0.4,0.4l7.2,31.9l0.6,0.3c0.4,0.2,0.8,0.1,1-0.2l1.2-1.5
+				l1.8,0.8c0.3,0.2,0.7,0.1,1-0.2l1.2-1.5l1.8,0.8c0.3,0.2,0.7,0.1,1-0.2l1.2-1.5l1.8,0.8c0.3,0.2,0.7,0.1,1-0.2l1.2-1.5l0,0
+				c0.6,0.2,1.2-0.3,1.1-1l-7-30.9l-0.7-0.4C391.3,139.3,390.7,139.4,390.4,139.8L390.4,139.8z"/>
+			
+				<ellipse transform="matrix(0.9756 -0.2193 0.2193 0.9756 -25.1259 88.9061)" class="st12" cx="387.8" cy="157.6" rx="5.8" ry="12.1"/>
+		</g>
+		<path class="st17" d="M399.9,143.7c-1.4-0.2-2.5,0.1-3.4,0.9c-0.9,0.8-1.4,1.9-1.6,3.5c-0.2,1.6,0,2.9,0.8,3.8s1.8,1.6,3.2,1.7
+			c0.8,0.1,1.4,0.1,2-0.1c0.5-0.1,1.1-0.3,1.6-0.5c0.3,0.3,0.5,0.6,0.6,1c0.1,0.4,0.2,0.8,0.1,1.3c-0.1,0.8-0.6,1.3-1.5,1.7
+			s-2.2,0.5-3.9,0.3c-1.2-0.2-2.4-0.5-3.4-1s-1.9-1.1-2.6-2s-1.2-1.8-1.5-3c-0.3-1.2-0.4-2.5-0.2-4.1c0.2-1.4,0.6-2.7,1.2-3.7
+			s1.3-1.9,2.2-2.5c0.9-0.6,1.9-1.1,3-1.4c1.1-0.2,2.2-0.3,3.4-0.1c1.7,0.2,3,0.7,3.8,1.3c0.9,0.7,1.2,1.4,1.1,2.3
+			c-0.1,0.5-0.2,0.9-0.5,1.2s-0.6,0.6-0.9,0.7c-0.4-0.4-0.9-0.7-1.4-1C401.2,143.9,400.6,143.7,399.9,143.7L399.9,143.7z"/>
+	</g>
+</g>
+<path class="st18" d="M416,448.7h-28.5c1.5-1.3,2.5-3.2,2.5-5.4l0,0c0-4-3.2-7.2-7.2-7.2h-76.1c-0.1,0-0.2,0-0.3,0
+	c-0.1,0-0.2,0-0.3,0h-92.8c-4.4,0-7.9,3.5-7.9,7.9l0,0c0,2.4,1,4.5,2.7,5.9h-11.7c-4.4,0-8,3.6-7.9,8.1c0.1,4.4,3.8,7.8,8.2,7.8
+	h28.5c-1.5,1.3-2.5,3.2-2.5,5.4l0,0c0,4,3.2,7.2,7.2,7.2H306c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0h92.8c4.4,0,7.9-3.5,7.9-7.9l0,0
+	c0-2.4-1-4.5-2.7-5.9h11.7c4.4,0,8-3.6,7.9-8.1C424.1,452.1,420.3,448.7,416,448.7z"/>
+<path class="st19" d="M421.6,447.9l-66.8,1.2l-9.5-23.8c-0.9-2.2-3-3.7-5.4-3.7h-68.2c-2.5,0-4.7,1.5-5.5,3.9l-7.6,21.4
+	c-1.4,3.8,1.5,7.8,5.5,7.8h90.3l67.1,1.6c2.4,0.1,4.4-1.8,4.4-4.2S423.9,447.8,421.6,447.9L421.6,447.9z"/>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg
new file mode 100644
index 00000000000..4405d5c65fa
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clippath);}.cls-3{fill:#66805e;}.cls-4{fill:#997d30;}.cls-5{fill:#99a4bd;}.cls-6{fill:#80655d;}.cls-7{fill:#c44d4d;}.cls-8{fill:#9e8c3f;}.cls-9{fill:#cf846f;}.cls-10{fill:#b2b09a;}.cls-11{fill:#af8467;}.cls-12{fill:#ddcaad;}.cls-13{fill:#c4b253;}.cls-14{fill:#c49a88;}.cls-15{fill:#d4d2ac;}.cls-16{fill:#53586d;}.cls-17{fill:#7074b8;}.cls-18{fill:#595d66;}.cls-19{fill:#47394f;}.cls-20{fill:#5e805e;}.cls-21{fill:#778d77;}.cls-22{clip-path:url(#clippath-1);}.cls-23{opacity:.9;}</style><clipPath id="clippath"><path class="cls-1" d="M721.42,206.9c-71.4-22.07-73.96-71.76-117.58-103.99C557.11,68.36,557.99,.55,557.99,.55l163.43-.91V206.9Z"/></clipPath><clipPath id="clippath-1"><rect class="cls-1" x="-.18" y="-527.45" width="559.27" height="509.05" transform="translate(558.92 -545.85) rotate(-180)"/></clipPath></defs><rect class="cls-21" x="-.88" y="-.82" width="723.18" height="342.52"/><rect class="cls-12" x=".16" y="342.99" width="719.83" height="161.21"/><g><rect class="cls-10" x="-.15" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="45.18" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="90.09" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="135.42" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="-.15" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="45.18" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="90.09" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="135.42" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="179.9" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="225.23" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="270.14" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="315.47" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="179.9" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="225.23" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="270.14" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="315.47" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="360.41" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="405.74" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="450.64" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="495.97" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="360.41" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="405.74" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="450.64" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="495.97" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="540.45" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="585.78" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="630.69" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="676.02" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="540.45" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="585.78" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="630.69" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="676.02" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="-.15" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="45.18" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="90.09" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="135.42" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="-.15" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="45.18" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="90.09" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="135.42" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="179.9" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="225.23" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="270.14" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="315.47" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="179.9" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="225.23" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="270.14" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="315.47" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="360.41" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="405.74" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="450.64" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="495.97" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="360.41" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="405.74" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="450.64" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="495.97" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="540.45" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="585.78" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="630.69" y="340.94" width="44.91" height="40.74"/><rect class="cls-10" x="676.02" y="381.3" width="44.91" height="40.74"/><rect class="cls-10" x="540.45" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="585.78" y="462.79" width="44.91" height="40.74"/><rect class="cls-10" x="630.69" y="422.43" width="44.91" height="40.74"/><rect class="cls-10" x="676.02" y="462.79" width="44.91" height="40.74"/></g><g class="cls-23"><g class="cls-2"><rect class="cls-14" x="544.27" y="-4.42" width="203.42" height="305.87"/><rect class="cls-11" x="551.36" y=".94" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y=".94" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y=".94" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y=".94" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="551.36" y="51.08" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y="51.08" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y="51.08" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y="51.08" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="26.01" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="26.01" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="26.01" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="26.01" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="26.01" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="75.56" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="75.56" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="75.56" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="75.56" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="75.56" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="551.36" y="101.23" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y="101.23" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y="101.23" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y="101.23" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="551.36" y="151.37" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y="151.37" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y="151.37" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y="151.37" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="126.3" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="126.3" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="126.3" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="126.3" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="126.3" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="175.85" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="175.85" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="175.85" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="175.85" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="175.85" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="551.36" y="200.29" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y="200.29" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y="200.29" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y="200.29" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="551.36" y="250.43" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="599.68" y="250.43" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="648.01" y="250.43" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="696.33" y="250.43" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="225.36" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="225.36" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="225.36" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="225.36" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="225.36" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="525.2" y="274.91" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="719.03" y="274.91" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="573.52" y="274.91" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="621.85" y="274.91" width="44.14" height="20.55" rx="5.55" ry="5.55"/><rect class="cls-11" x="670.17" y="274.91" width="44.14" height="20.55" rx="5.55" ry="5.55"/></g></g><g class="cls-22"><path class="cls-19" d="M-57.6-61.82c14.77,1.52,29.96-1.52,39.69-13.34,.17-.19,.34-.38,.5-.57C2.74-145.88-3.04-540.81-3.04-540.81c1.24-52.7,44.31-94.78,97.03-94.78h0c51.92,0,94.64,40.86,96.96,92.73l19.56,438.84,.39,.03s-1.44,15.97,9.14,28.25c.17,.19,.33,.38,.5,.57,9.73,11.82,24.92,14.86,39.69,13.34,.25,0,.5,0,.75,0,48.5,.15,83.99,27.72,83.99,65.7h-26.55c-9.95,0-19.7-2.54-28.51-7.17l-.1-.05c-9.42-4.91-21.04-7.05-31.36-4.01-4.48,1.32-8.59,3.39-12.59,5.69-6.4,3.68-13.68,5.54-21.06,5.54h0c-.35,0-.71,0-1.06,0-8.29,1.14-17.02,.38-25.41,0h-1.05c-13.67,0-27.87,0-41.84,0,0,0-98.69,.43-145.17,.56C-2.2,4.47-14.43,.8-24.65-6.32c-6.09-4.24-14.01-8.03-22.36-8.03-10.55,0-17.22,4.51-22.05,9.57-5.24,5.5-12.48,8.66-20.08,8.66h-49.03C-116.13-63.72-57.85-61.82-57.6-61.82Z"/></g><rect class="cls-20" x="-.88" y="312.91" width="723.18" height="31.07"/><g><path d="M370.31,344.31h11.14v27.86c0,3.07-2.5,5.57-5.57,5.57h0c-3.07,0-5.57-2.5-5.57-5.57v-27.86h0Z"/><path d="M331,346.7h11.14v25.47c0,3.07-2.5,5.57-5.57,5.57h0c-3.07,0-5.57-2.5-5.57-5.57v-25.47h0Z"/><path d="M428.89,346.7h11.14v25.47c0,3.07-2.5,5.57-5.57,5.57h0c-3.07,0-5.57-2.5-5.57-5.57v-25.47h0Z"/><path d="M469.62,344.31h11.14v27.86c0,3.07-2.5,5.57-5.57,5.57h0c-3.07,0-5.57-2.5-5.57-5.57v-27.86h0Z"/><g><rect class="cls-8" x="318.97" y="123.74" width="140.86" height="236.45" rx="23.1" ry="23.1"/><path class="cls-13" d="M468.54,360.19h-94.66c-12.76,0-23.1-10.34-23.1-23.1V146.84c0-12.76,10.34-23.1,23.1-23.1h94.66c12.76,0,23.1,10.34,23.1,23.1v190.25c0,12.76-10.34,23.1-23.1,23.1Z"/></g><path d="M491.82,237.69h-141.73c-.67,0-1.2-.54-1.2-1.2s.54-1.2,1.2-1.2h141.73c.67,0,1.2,.54,1.2,1.2s-.54,1.2-1.2,1.2Z"/><rect x="469.12" y="261.42" width="8.89" height="26.67" rx="4.45" ry="4.45"/><path class="cls-17" d="M437.28,224.01c-.26,.09-.57,.19-.93,.3-.36,.11-.73,.2-1.13,.29-.39,.09-.78,.16-1.18,.22-.39,.06-.76,.08-1.11,.07-.96-.03-1.57-.44-1.85-1.24l-3.75-10.75c-.11-.32-.11-.6,0-.84,.11-.24,.31-.46,.58-.68,.46-.37,1.06-.73,1.82-1.09,.75-.36,1.54-.68,2.37-.97,1.96-.69,3.59-.88,4.88-.59,1.29,.29,2.17,1.12,2.66,2.51,.24,.69,.25,1.36,.02,1.99-.22,.64-.63,1.19-1.23,1.66,.84-.05,1.62,.11,2.33,.5,.71,.39,1.22,1.01,1.52,1.87,.53,1.52,.36,2.84-.52,3.96-.87,1.12-2.37,2.05-4.49,2.79Zm-4.59-8.34l1.68-.59c.66-.23,1.1-.52,1.31-.87,.21-.35,.24-.76,.07-1.24-.14-.41-.43-.68-.86-.81s-.99-.07-1.68,.17c-.23,.08-.49,.18-.79,.3s-.52,.22-.68,.31l.95,2.72Zm1.96,5.62c.24-.01,.53-.07,.87-.16,.35-.1,.67-.2,.98-.3,.61-.21,1.08-.52,1.4-.91,.32-.4,.38-.86,.2-1.4-.18-.51-.47-.81-.88-.91-.41-.1-.96-.02-1.65,.22l-1.89,.66,.98,2.81Z"/><g><rect class="cls-15" x="365.09" y="189.89" width="33.74" height="34.54" rx="3.69" ry="3.69" transform="translate(-27.04 60.44) rotate(-8.74)"/><rect class="cls-5" x="366.87" y="191.51" width="29.81" height="28.92" rx="3.26" ry="3.26" transform="translate(-26.86 60.4) rotate(-8.74)"/><path class="cls-18" d="M396.44,203.07l-6.88-8.23c-.74-.88-2.15-.62-2.54,.46l-3.78,9.63-6.58-7.64c-.65-.82-1.92-.72-2.44,.18l-4.04,7.03-2.73-3.28c-.54-.65-1.59-.18-1.46,.66l2.57,16.69,29.57-4.55-1.68-10.95Z"/><path class="cls-3" d="M395.15,213.66l-4.92-10.49c-.36-.78-1.51-.65-1.69,.19l-1.82,8.34-3.99-9.51c-.34-.82-1.54-.7-1.71,.17l-1.26,6.34-3.53-5.39c-.5-.76-1.69-.38-1.65,.53l.47,11.28-2.9-4.09c-.46-.65-1.48-.42-1.62,.37l-.49,2.87-.57-.98c-.5-.86-1.82-.39-1.66,.6l.93,5.41s.93,3.15,3.71,2.72l23.03-3.54s3.21-.58,2.72-3.71l-.67-4.34c-.15-1-1.58-1.02-1.77-.03l-.63,3.26Z"/><path class="cls-6" d="M368.75,219.35c.12,.37,1.11,3.08,3.7,2.68l23.03-3.54s3.17-.58,2.73-3.67l-29.46,4.53Z"/><path class="cls-7" d="M372.36,186.91c.17-.2,.46-.44,.86-.71,.4-.27,.83-.48,1.28-.64,.64-.22,1.24-.33,1.8-.32,.56,.01,.98,.2,1.26,.55,.46,.59,.98,1.27,1.56,2.06s1.17,1.61,1.76,2.46c.6,.85,1.19,1.69,1.76,2.51s1.08,1.56,1.52,2.2c-.09,.23-.27,.46-.54,.67-.27,.22-.62,.4-1.04,.55-.31,.11-.58,.17-.8,.2-.23,.02-.43,0-.6-.05-.17-.06-.33-.15-.47-.29-.14-.14-.28-.3-.42-.5l-.81-1.21-3.48,1.21c.03,.42,.07,.85,.11,1.3,.04,.45,.08,.88,.11,1.3-.16,.13-.33,.25-.51,.36-.18,.11-.42,.22-.7,.32-.65,.23-1.18,.28-1.57,.17-.39-.11-.66-.37-.8-.77-.06-.18-.1-.37-.11-.56-.01-.2-.03-.43-.05-.7-.03-.38-.06-.85-.07-1.42-.02-.57-.04-1.18-.05-1.85-.02-.66-.02-1.35-.03-2.05,0-.7,0-1.37,0-1.99,0-.62,0-1.18,0-1.67,0-.49,.02-.87,.03-1.13Zm3.17,1.68c0,.6,.01,1.27,.02,2.01,0,.74,.04,1.48,.09,2.22l2.39-.83c-.42-.63-.84-1.24-1.26-1.84-.42-.6-.79-1.13-1.13-1.6l-.11,.04Z"/></g><g><g><path class="cls-15" d="M390.41,139.8l-1.06,1.27-1.56-.73c-.46-.22-1.01-.09-1.34,.3l-1.1,1.32-1.56-.72c-.46-.22-1.01-.09-1.34,.3l-1.1,1.32-1.56-.72c-.46-.22-1.01-.09-1.34,.3l-1.1,1.32-.58-.2c-.23-.08-.46,.12-.4,.36l7.16,31.87,.57,.31c.35,.19,.78,.11,1.03-.2l1.22-1.47,1.77,.82c.34,.16,.74,.07,.98-.22l1.25-1.5,1.77,.82c.34,.16,.74,.07,.98-.22l1.24-1.5,1.77,.82c.34,.16,.74,.07,.98-.22l1.24-1.5h0c.61,.21,1.21-.33,1.07-.96l-6.95-30.9-.66-.36c-.47-.26-1.06-.15-1.41,.27Z"/><ellipse class="cls-5" cx="387.85" cy="157.61" rx="5.76" ry="12.06" transform="translate(-25.13 88.91) rotate(-12.67)"/></g><path class="cls-4" d="M399.86,143.66c-1.41-.18-2.55,.11-3.41,.87-.86,.76-1.4,1.93-1.6,3.51-.21,1.59,.05,2.87,.77,3.84,.72,.97,1.79,1.55,3.2,1.73,.75,.1,1.4,.08,1.95-.05,.55-.13,1.08-.3,1.59-.49,.28,.3,.48,.64,.61,1.01,.13,.38,.16,.81,.1,1.28-.1,.75-.6,1.33-1.5,1.74-.9,.41-2.2,.51-3.91,.29-1.23-.16-2.36-.49-3.39-.97s-1.91-1.15-2.62-1.98c-.71-.83-1.23-1.83-1.55-3-.32-1.17-.38-2.52-.18-4.06,.19-1.43,.57-2.66,1.16-3.69,.59-1.03,1.32-1.87,2.2-2.52,.88-.65,1.86-1.1,2.96-1.35,1.09-.25,2.24-.29,3.43-.14,1.69,.22,2.95,.66,3.81,1.34,.85,.67,1.22,1.44,1.11,2.3-.06,.48-.24,.87-.52,1.19-.28,.32-.59,.56-.93,.72-.44-.37-.91-.7-1.42-1-.51-.29-1.12-.48-1.84-.58Z"/></g></g><path class="cls-9" d="M415.96,448.7h-28.54c1.5-1.32,2.46-3.24,2.46-5.4h0c0-3.97-3.21-7.18-7.18-7.18h-76.13c-.09,0-.18,.02-.28,.03-.09,0-.18-.03-.28-.03h-92.75c-4.38,0-7.93,3.55-7.93,7.93h0c0,2.37,1.04,4.49,2.69,5.94h-11.67c-4.43,0-8.01,3.63-7.92,8.07,.08,4.36,3.82,7.78,8.19,7.78h28.54c-1.5,1.32-2.46,3.24-2.46,5.4h0c0,3.97,3.21,7.18,7.18,7.18h76.13c.09,0,.18-.02,.28-.03,.09,0,.18,.03,.28,.03h92.75c4.38,0,7.93-3.55,7.93-7.93h0c0-2.37-1.04-4.49-2.69-5.94h11.67c4.43,0,8.01-3.63,7.92-8.07-.08-4.36-3.82-7.78-8.19-7.78Z"/><path class="cls-16" d="M421.58,447.86l-66.78,1.2-9.46-23.83c-.88-2.22-3.03-3.68-5.42-3.68h-68.19c-2.47,0-4.67,1.55-5.5,3.88l-7.57,21.36c-1.35,3.79,1.47,7.78,5.5,7.78h90.27l67.09,1.61c2.39,.13,4.4-1.77,4.4-4.16s-1.97-4.26-4.34-4.16Z"/></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg
new file mode 100644
index 00000000000..f55c1b189d0
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 720 504" style="enable-background:new 0 0 720 504;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2603F;}
+	.st1{fill:#BF9A58;}
+	.st2{fill:none;stroke:#917240;stroke-width:3;stroke-miterlimit:10;}
+	.st3{fill:#C6B38B;}
+	.st4{fill:#5B3B3B;}
+	.st5{fill:#544A46;}
+	.st6{fill:#70635C;}
+	.st7{fill:#3A322F;}
+	.st8{fill:#FFD76F;}
+	.st9{clip-path:url(#SVGID_00000018202764047105714440000005094059849736999870_);}
+	.st10{fill:#AF8171;}
+	.st11{fill:#966D51;}
+	.st12{fill:#967642;}
+	.st13{fill:#492D2C;}
+	.st14{fill:#603E3E;}
+	.st15{opacity:0.9;}
+</style>
+<rect x="-15.7" y="363.5" class="st0" width="787.3" height="149.8"/>
+<rect x="-19" y="-1.3" class="st1" width="785.6" height="365.5"/>
+<g>
+	<line class="st2" x1="506.4" y1="-3.9" x2="506.4" y2="337.3"/>
+	<line class="st2" x1="394.2" y1="-3.9" x2="394.2" y2="337.3"/>
+	<line class="st2" x1="338.1" y1="-3.9" x2="338.1" y2="337.3"/>
+	<line class="st2" x1="282.1" y1="-3.9" x2="282.1" y2="337.3"/>
+	<line class="st2" x1="226" y1="-3.9" x2="226" y2="337.3"/>
+	<line class="st2" x1="169.9" y1="-3.9" x2="169.9" y2="337.3"/>
+	<line class="st2" x1="113.8" y1="-3.9" x2="113.8" y2="337.3"/>
+	<line class="st2" x1="57.7" y1="-3.9" x2="57.7" y2="337.3"/>
+	<line class="st2" x1="674.7" y1="-3.9" x2="674.7" y2="337.3"/>
+	<line class="st2" x1="618.6" y1="-3.9" x2="618.6" y2="337.3"/>
+	<line class="st2" x1="562.5" y1="-3.9" x2="562.5" y2="337.3"/>
+	<line class="st2" x1="450.3" y1="-3.9" x2="450.3" y2="337.3"/>
+</g>
+<rect x="-15.7" y="333.6" class="st3" width="785.6" height="35.9"/>
+<path class="st4" d="M712,315.8c0-11.4-5.1-21.6-13.1-28.5c-1.5-1.3-0.6-3.7,1.3-3.7h6.5c2.3,0,4.1-1.8,4.1-4.1v-7.1
+	c0-2.3-1.8-4.1-4.1-4.1h-64.7c-2.3,0-4.1,1.8-4.1,4.1v7.1c0,2.3,1.8,4.1,4.1,4.1l0,0c4.1,0,6.3,4.8,3.6,7.9
+	c-5.5,6.5-8.9,15-8.9,24.3c0,11.9,5.5,22.5,14.2,29.4c8.1,6.5,12.9,16.1,12.9,26.5l0,0h-11.6c-1.7,0-3,1.4-3,3v4.5c0,1.7,1.4,3,3,3
+	h44.4c1.7,0,3-1.4,3-3v-4.5c0-1.7-1.4-3-3-3H685c0-10.3,4.8-20,12.9-26.5C706.5,338.2,712.1,327.6,712,315.8L712,315.8z"/>
+<g>
+	<g>
+		<rect x="429" y="266.4" width="153.2" height="97"/>
+		<g>
+			<rect x="548.8" y="259.2" class="st5" width="45.7" height="103.2"/>
+			<g>
+				<rect x="367.9" y="259.2" class="st5" width="45.7" height="103.2"/>
+				<polygon class="st6" points="400.6,259.2 400.6,362.4 436.1,362.4 436.1,273.1 577,273.1 577,362.4 612.4,362.4 612.4,259.2 
+									"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path d="M349.6,358.2h248.2c2.8,0,5,2.2,5,5v17.1c0,2.8-2.2,5-5,5H349.6c-2.8,0-5-2.2-5-5v-17.1
+			C344.6,360.4,346.9,358.2,349.6,358.2z"/>
+		<path class="st7" d="M382.4,358.2h248.2c2.8,0,5,2.2,5,5v17.1c0,2.8-2.2,5-5,5H382.4c-2.8,0-5-2.2-5-5v-17.1
+			C377.4,360.4,379.7,358.2,382.4,358.2z"/>
+	</g>
+	<g>
+		<path d="M357,239h233.4c2.4,0,4.4,2,4.4,4.4v12.5c0,2.4-2,4.4-4.4,4.4H357c-2.4,0-4.4-2-4.4-4.4v-12.5
+			C352.6,241,354.6,239,357,239z"/>
+		<path class="st7" d="M389.8,239h233.4c2.4,0,4.4,2,4.4,4.4v12.5c0,2.4-2,4.4-4.4,4.4H389.8c-2.4,0-4.4-2-4.4-4.4v-12.5
+			C385.4,241,387.4,239,389.8,239z"/>
+	</g>
+	<g>
+		<path class="st8" d="M436.2,318.4c0,0-0.1,0-0.2,0c-0.3-0.1-0.5-0.3-0.5-0.6v-43.5c0-0.4,0.3-0.7,0.7-0.7l43.5-0.1l0,0
+			c0.3,0,0.6,0.2,0.6,0.5c0.1,0.3,0,0.6-0.3,0.8c-0.1,0.1-10,6-9,12.8c0,0.2,0,0.4-0.1,0.5c-0.1,0.1-0.3,0.2-0.5,0.2
+			c-0.4,0-9.6,0.6-9.6,9.3c0,0.3-0.2,0.6-0.6,0.7c0,0-4,0.6-6.2,3.6c-1.3,1.8-1.7,4-1.3,6.7c0,0.2,0,0.4-0.2,0.6s-0.4,0.2-0.6,0.2
+			c-0.4-0.1-10.1-1.4-15.3,8.9C436.7,318.2,436.5,318.4,436.2,318.4L436.2,318.4z M436.9,274.8v40.4c4.8-7.2,12-7.6,14.5-7.5
+			c-0.3-2.7,0.3-5,1.6-6.8c2-2.8,5.3-3.7,6.6-4c0.3-8,7.8-9.6,10.1-10c-0.3-5.4,4.9-10,7.8-12.2L436.9,274.8L436.9,274.8z"/>
+		<path class="st8" d="M470.6,288.1c-0.1,0-0.2,0-0.2,0L436,274.9c-0.4-0.1-0.5-0.5-0.4-0.9c0.1-0.4,0.5-0.5,0.9-0.4l34.4,13.2
+			c0.4,0.1,0.5,0.5,0.4,0.9C471.1,288,470.9,288.1,470.6,288.1L470.6,288.1z"/>
+		<path class="st8" d="M460.4,297.5c-0.2,0-0.3-0.1-0.5-0.2l-24.2-22.6c-0.3-0.2-0.3-0.7,0-1c0.2-0.3,0.7-0.3,1,0l24.2,22.6
+			c0.3,0.2,0.3,0.7,0,1C460.8,297.5,460.6,297.5,460.4,297.5L460.4,297.5z"/>
+		<path class="st8" d="M452.3,309.1c-0.2,0-0.5-0.1-0.6-0.4l-16.1-34.1c-0.2-0.3,0-0.7,0.3-0.9c0.3-0.1,0.7,0,0.9,0.3l16.1,34.1
+			c0.2,0.3,0,0.7-0.3,0.9C452.5,309.1,452.4,309.1,452.3,309.1L452.3,309.1z"/>
+		<path class="st8" d="M436.2,292.2c-0.1,0-0.3,0-0.4-0.2c-0.3-0.2-0.3-0.7-0.1-1c2.7-3.1,6.1-2.5,7.6-2.1c1-2.7,3.6-3.3,5.3-3.1
+			c-0.1-2,0.4-3.5,1.4-4.5c0.9-0.8,2-1.1,2.9-1.1c-0.4-1.3-0.4-2.5,0.1-3.6c1-2.2,3.6-3,3.7-3.1c0.4-0.1,0.7,0.1,0.8,0.5
+			s-0.1,0.7-0.5,0.8c0,0-2.1,0.7-2.8,2.3c-0.4,1-0.3,2.1,0.3,3.5c0.1,0.2,0.1,0.5-0.1,0.7c-0.2,0.2-0.4,0.3-0.7,0.2
+			c0,0-1.8-0.3-2.9,0.7c-0.9,0.8-1.2,2.2-0.9,4.2c0,0.2-0.1,0.4-0.2,0.6s-0.4,0.2-0.6,0.1c-0.2,0-3.9-0.9-4.8,2.7
+			c0,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.1-0.6,0c-0.2-0.1-3.9-1.9-6.7,1.5C436.6,292.1,436.4,292.2,436.2,292.2L436.2,292.2z"/>
+		<path class="st8" d="M435.9,304.8c-0.1,0-0.1,0-0.2,0c-0.4-0.1-0.5-0.5-0.4-0.9c2.5-6.8,9.1-6.9,11.5-6.7c0-1.8,0.5-3.3,1.6-4.4
+			c1.7-1.8,4.2-2.1,5.3-2.2c0.8-3.4,2.2-5.6,4.2-6.7c1.1-0.6,2.1-0.7,2.8-0.6c-0.5-8.4,6.1-9.3,6.2-9.3c0.4,0,0.7,0.2,0.8,0.6
+			s-0.2,0.7-0.6,0.8c-0.2,0-5.8,0.9-4.9,8.7c0,0.2-0.1,0.5-0.2,0.6s-0.4,0.2-0.6,0.1c0,0-1.3-0.4-2.7,0.4c-1.6,0.9-2.9,3.1-3.6,6.3
+			c-0.1,0.3-0.4,0.5-0.7,0.5c0,0-3.1-0.1-4.9,1.8c-0.9,1-1.3,2.4-1.2,4.2c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.4,0.2-0.6,0.2
+			c-0.3-0.1-8.2-1.4-10.8,5.8C436.5,304.6,436.2,304.8,435.9,304.8L435.9,304.8z"/>
+	</g>
+</g>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="283.8" y="-1.1" width="109.5" height="86.7"/>
+	</defs>
+	<clipPath id="SVGID_00000163763098996064219720000014320302320766370473_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000163763098996064219720000014320302320766370473_);">
+		<rect x="268" y="-141.5" class="st10" width="204.1" height="305.9"/>
+		<path class="st11" d="M280.7,14.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C275.2,16.8,277.6,14.3,280.7,14.3z"/>
+		<path class="st11" d="M329.2,14.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C323.6,16.8,326.1,14.3,329.2,14.3z"/>
+		<path class="st11" d="M377.7,14.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C372.1,16.8,374.6,14.3,377.7,14.3z"/>
+		<path class="st11" d="M426.2,14.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C420.6,16.8,423.1,14.3,426.2,14.3z"/>
+		<path class="st11" d="M254.5-10.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C248.9-8.3,251.4-10.8,254.5-10.8z"/>
+		<path class="st11" d="M449-10.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H449c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C443.4-8.3,445.9-10.8,449-10.8z"/>
+		<path class="st11" d="M303-10.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H303c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C297.4-8.3,299.9-10.8,303-10.8z"/>
+		<path class="st11" d="M351.4-10.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C345.9-8.3,348.4-10.8,351.4-10.8z"/>
+		<path class="st11" d="M399.9-10.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C394.4-8.3,396.9-10.8,399.9-10.8z"/>
+		<path class="st11" d="M254.5,38.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C248.9,41.2,251.4,38.8,254.5,38.8z"/>
+		<path class="st11" d="M449,38.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H449c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C443.4,41.2,445.9,38.8,449,38.8z"/>
+		<path class="st11" d="M303,38.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H303c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C297.4,41.2,299.9,38.8,303,38.8z"/>
+		<path class="st11" d="M351.4,38.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C345.9,41.2,348.4,38.8,351.4,38.8z"/>
+		<path class="st11" d="M399.9,38.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C394.4,41.2,396.9,38.8,399.9,38.8z"/>
+		<path class="st11" d="M280.7,63.2h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C275.2,65.7,277.6,63.2,280.7,63.2z"/>
+		<path class="st11" d="M329.2,63.2h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C323.6,65.7,326.1,63.2,329.2,63.2z"/>
+		<path class="st11" d="M377.7,63.2h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C372.1,65.7,374.6,63.2,377.7,63.2z"/>
+		<path class="st11" d="M426.2,63.2h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C420.6,65.7,423.1,63.2,426.2,63.2z"/>
+		<path class="st11" d="M280.7,113.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C275.2,115.8,277.6,113.3,280.7,113.3z"/>
+		<path class="st11" d="M329.2,113.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C323.6,115.8,326.1,113.3,329.2,113.3z"/>
+		<path class="st11" d="M377.7,113.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C372.1,115.8,374.6,113.3,377.7,113.3z"/>
+		<path class="st11" d="M426.2,113.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C420.6,115.8,423.1,113.3,426.2,113.3z"/>
+		<path class="st11" d="M254.5,88.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C248.9,90.7,251.4,88.3,254.5,88.3z"/>
+		<path class="st11" d="M449,88.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H449c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C443.4,90.7,445.9,88.3,449,88.3z"/>
+		<path class="st11" d="M303,88.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H303c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C297.4,90.7,299.9,88.3,303,88.3z"/>
+		<path class="st11" d="M351.4,88.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C345.9,90.7,348.4,88.3,351.4,88.3z"/>
+		<path class="st11" d="M399.9,88.3h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C394.4,90.7,396.9,88.3,399.9,88.3z"/>
+		<path class="st11" d="M254.5,137.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C248.9,140.3,251.4,137.8,254.5,137.8z"/>
+		<path class="st11" d="M449,137.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H449c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C443.4,140.3,445.9,137.8,449,137.8z"/>
+		<path class="st11" d="M303,137.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6H303c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C297.4,140.3,299.9,137.8,303,137.8z"/>
+		<path class="st11" d="M351.4,137.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C345.9,140.3,348.4,137.8,351.4,137.8z"/>
+		<path class="st11" d="M399.9,137.8h33.2c3.1,0,5.6,2.5,5.6,5.6v9.4c0,3.1-2.5,5.6-5.6,5.6h-33.2c-3.1,0-5.6-2.5-5.6-5.6v-9.4
+			C394.4,140.3,396.9,137.8,399.9,137.8z"/>
+	</g>
+</g>
+<path class="st12" d="M337.5,84l1.7,72.2c0,5.1,4.2,9.2,9.5,9.2l0,0c2.8,0,5.4-1.2,7.1-3.1v36.4c0,5.6,4.5,10.4,10.2,10.4
+	c5.9,0.1,10.6-4.5,10.6-10.1V184c1.9,2.1,4.7,3.4,7.8,3.4l0,0c5.8,0,10.5-4.5,10.5-10.1V59c0-2.1-1.8-3.8-4-3.8l-49.5,25
+	C339.3,80.1,337.6,81.9,337.5,84L337.5,84z"/>
+<path class="st12" d="M337.6,88.1v99.6c0,5.2-4.2,9.4-9.4,9.4l0,0c-2.8,0-5.3-1.2-7.1-3.2v37.3c0,5.7-4.5,10.6-10.2,10.7
+	c-5.8,0.1-10.6-4.6-10.6-10.4v-15.3c-1.9,2.1-4.7,3.5-7.8,3.5l0,0c-5.7,0-10.4-4.6-10.4-10.4V88.1c0-2.2,1.8-3.9,3.9-3.9h47.5
+	C335.9,84.1,337.7,85.9,337.6,88.1L337.6,88.1z"/>
+<g>
+	<path class="st13" d="M-158.3,400.6h585.8c15.6,0,28.3,12.7,28.3,28.3v72.4c0,15.6-12.7,28.3-28.3,28.3h-585.8
+		c-15.6,0-28.3-12.7-28.3-28.3v-72.4C-186.6,413.3-174,400.6-158.3,400.6z"/>
+	<path class="st14" d="M437.7,428.9v72.4c0,5.7-4.6,10.3-10.3,10.3h-585.8c-5.7,0-10.3-4.6-10.3-10.3v-72.4
+		c0-5.7,4.6-10.3,10.3-10.3h585.8C433.1,418.6,437.7,423.2,437.7,428.9z"/>
+	<path class="st13" d="M52.9,499.9l-42.5-28.4c-5.7-3.4-5.7-11.7,0.1-15.4l43.3-28.7c3.8-2.4,8.7-2.3,12.2,0.3l41.4,26.5
+		c4.8,3.5,4.8,10.7-0.1,14.4l-42.1,30.4C61.5,501.8,56.7,502.1,52.9,499.9z"/>
+	<path class="st13" d="M209,499.9l-42.5-28.4c-5.7-3.4-5.7-11.7,0.1-15.4l43.3-28.7c3.8-2.4,8.7-2.3,12.2,0.3l41.4,26.5
+		c4.8,3.5,4.8,10.7,0,14.4l-42.1,30.4C217.6,501.8,212.8,502.1,209,499.9z"/>
+	<path class="st13" d="M365.1,499.9l-42.5-28.4c-5.7-3.4-5.7-11.7,0-15.4l43.3-28.7c3.8-2.4,8.7-2.3,12.2,0.3l41.4,26.5
+		c4.8,3.5,4.8,10.7,0,14.4l-42.1,30.4C373.8,501.8,368.9,502.1,365.1,499.9L365.1,499.9z"/>
+</g>
+<g class="st15">
+</g>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg
new file mode 100644
index 00000000000..a5e2536e936
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Backgrounds_complex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 504"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#ad8e56;stroke-miterlimit:10;stroke-width:3px;}.cls-3{clip-path:url(#clippath);}.cls-4{fill:#ffd76f;}.cls-5{fill:#af8467;}.cls-6{fill:#ad8e56;}.cls-7{fill:#d1af6c;}.cls-8{fill:#c49a88;}.cls-9{fill:#c87750;}.cls-10{fill:#dccda5;}.cls-11{fill:#70635c;}.cls-12{fill:#72504f;}.cls-13{fill:#544a46;}.cls-14{fill:#3a322f;}.cls-15{fill:#5b3b3b;}.cls-16{fill:#5e403d;}</style><clipPath id="clippath"><rect class="cls-1" x="283.8" y="-1.11" width="109.49" height="86.71"/></clipPath></defs><rect class="cls-9" x="-15.73" y="363.5" width="787.35" height="149.81"/><rect class="cls-7" x="-19.05" y="-1.31" width="785.62" height="365.46"/><g><line class="cls-2" x1="506.43" y1="-3.88" x2="506.43" y2="337.26"/><line class="cls-2" x1="394.25" y1="-3.88" x2="394.25" y2="337.26"/><line class="cls-2" x1="338.15" y1="-3.88" x2="338.15" y2="337.26"/><line class="cls-2" x1="282.06" y1="-3.88" x2="282.06" y2="337.26"/><line class="cls-2" x1="225.97" y1="-3.88" x2="225.97" y2="337.26"/><line class="cls-2" x1="169.88" y1="-3.88" x2="169.88" y2="337.26"/><line class="cls-2" x1="113.79" y1="-3.88" x2="113.79" y2="337.26"/><line class="cls-2" x1="57.7" y1="-3.88" x2="57.7" y2="337.26"/><line class="cls-2" x1="674.7" y1="-3.88" x2="674.7" y2="337.26"/><line class="cls-2" x1="618.61" y1="-3.88" x2="618.61" y2="337.26"/><line class="cls-2" x1="562.52" y1="-3.88" x2="562.52" y2="337.26"/><line class="cls-2" x1="450.34" y1="-3.88" x2="450.34" y2="337.26"/></g><rect class="cls-10" x="-15.73" y="333.62" width="785.62" height="35.85"/><path class="cls-15" d="M712.05,315.75c0-11.42-5.09-21.65-13.11-28.55-1.48-1.27-.62-3.67,1.32-3.67h6.52c2.27,0,4.11-1.84,4.11-4.11v-7.11c0-2.27-1.84-4.11-4.11-4.11h-64.72c-2.27,0-4.11,1.84-4.11,4.11v7.11c0,2.27,1.84,4.11,4.11,4.11h0c4.11,0,6.28,4.79,3.63,7.93-5.55,6.55-8.89,15.03-8.89,24.29,0,11.9,5.52,22.5,14.15,29.39,8.08,6.46,12.89,16.14,12.89,26.48h0s-11.59,0-11.59,0c-1.68,0-3.04,1.36-3.04,3.04v4.52c0,1.68,1.36,3.04,3.04,3.04h44.36c1.68,0,3.04-1.36,3.04-3.04v-4.52c0-1.68-1.36-3.04-3.04-3.04h-11.59c0-10.34,4.82-20.02,12.89-26.48,8.62-6.89,14.15-17.5,14.15-29.39Z"/><g><g><rect x="428.95" y="266.41" width="153.22" height="97.04"/><g><rect class="cls-13" x="548.84" y="259.16" width="45.7" height="103.22"/><g><rect class="cls-13" x="367.93" y="259.16" width="45.7" height="103.22"/><polygon class="cls-11" points="400.61 259.16 400.61 362.38 436.09 362.38 436.09 273.13 576.95 273.13 576.95 362.38 612.43 362.38 612.43 259.16 400.61 259.16"/></g></g></g><g><rect x="344.63" y="358.18" width="258.19" height="27.05" rx="4.99" ry="4.99"/><rect class="cls-14" x="377.42" y="358.18" width="258.19" height="27.05" rx="4.99" ry="4.99"/></g><g><rect x="352.63" y="239" width="242.18" height="21.24" rx="4.39" ry="4.39"/><rect class="cls-14" x="385.43" y="239" width="242.18" height="21.24" rx="4.39" ry="4.39"/></g><g><path class="cls-4" d="M436.2,318.38c-.05,0-.1,0-.16-.02-.3-.07-.52-.34-.52-.65v-43.55c0-.37,.3-.67,.67-.67l43.55-.13h0c.3,0,.57,.2,.65,.49,.08,.29-.04,.6-.3,.76-.1,.06-9.95,6.04-8.95,12.76,.03,.19-.02,.38-.14,.52-.12,.15-.3,.24-.48,.25-.39,.02-9.58,.63-9.58,9.27,0,.33-.25,.62-.58,.67-.04,0-4.05,.61-6.24,3.59-1.28,1.75-1.7,3.98-1.26,6.66,.04,.21-.03,.43-.18,.58-.15,.15-.37,.22-.58,.19-.41-.06-10.08-1.39-15.29,8.91-.12,.23-.35,.37-.6,.37Zm.67-43.55v40.39c4.83-7.22,12.05-7.61,14.54-7.52-.29-2.68,.26-4.98,1.62-6.84,2.03-2.76,5.26-3.72,6.56-4.01,.33-7.95,7.79-9.64,10.14-9.98-.33-5.41,4.9-10.03,7.81-12.17l-40.67,.13Z"/><path class="cls-4" d="M470.6,288.13c-.08,0-.16-.01-.24-.04l-34.41-13.17c-.35-.13-.52-.52-.39-.87,.13-.35,.52-.52,.87-.39l34.41,13.17c.35,.13,.52,.52,.39,.87-.1,.27-.36,.43-.63,.43Z"/><path class="cls-4" d="M460.39,297.54c-.16,0-.33-.06-.46-.18l-24.19-22.58c-.27-.25-.29-.68-.03-.95,.25-.27,.68-.29,.95-.03l24.19,22.58c.27,.25,.29,.68,.03,.95-.13,.14-.31,.21-.49,.21Z"/><path class="cls-4" d="M452.32,309.1c-.25,0-.49-.14-.61-.39l-16.13-34.14c-.16-.34-.01-.74,.32-.89,.33-.15,.74-.01,.89,.32l16.13,34.14c.16,.34,.01,.74-.32,.89-.09,.04-.19,.06-.29,.06Z"/><path class="cls-4" d="M436.2,292.17c-.15,0-.31-.05-.44-.16-.28-.24-.31-.67-.07-.95,2.7-3.15,6.13-2.53,7.61-2.06,1.03-2.72,3.56-3.26,5.33-3.13-.1-2.01,.38-3.52,1.42-4.49,.91-.84,2.05-1.07,2.88-1.1-.41-1.3-.38-2.5,.09-3.57,.99-2.24,3.57-3.03,3.68-3.07,.36-.11,.73,.1,.84,.45,.11,.35-.09,.73-.45,.84-.03,0-2.11,.66-2.84,2.33-.43,.97-.33,2.13,.3,3.46,.11,.23,.08,.5-.08,.7-.16,.2-.41,.3-.66,.25-.02,0-1.75-.32-2.85,.7-.85,.79-1.16,2.2-.92,4.2,.03,.22-.06,.43-.22,.58-.16,.15-.39,.2-.6,.15-.16-.04-3.94-.86-4.84,2.74-.05,.2-.19,.36-.37,.45-.19,.08-.4,.08-.58,0-.16-.08-3.88-1.86-6.72,1.45-.13,.15-.32,.23-.51,.23Z"/><path class="cls-4" d="M435.93,304.8c-.08,0-.15-.01-.23-.04-.35-.13-.53-.51-.4-.86,2.45-6.76,9.13-6.88,11.48-6.71-.02-1.82,.51-3.31,1.58-4.43,1.68-1.78,4.2-2.12,5.32-2.18,.84-3.39,2.24-5.65,4.16-6.72,1.07-.6,2.07-.69,2.77-.64-.49-8.39,6.09-9.31,6.16-9.32,.37-.05,.7,.22,.75,.58s-.21,.7-.58,.75c-.25,.03-5.78,.87-4.91,8.71,.02,.23-.07,.46-.25,.6-.18,.14-.42,.19-.64,.11-.05-.02-1.27-.4-2.67,.39-1.63,.92-2.87,3.12-3.59,6.34-.07,.31-.35,.53-.68,.53-.03,0-3.12-.08-4.86,1.77-.94,1-1.34,2.41-1.17,4.2,.02,.21-.06,.41-.22,.56-.15,.14-.37,.2-.57,.17-.33-.06-8.22-1.4-10.81,5.75-.1,.27-.36,.44-.63,.44Z"/></g></g><g class="cls-3"><g><rect class="cls-8" x="268.05" y="-141.53" width="204.1" height="305.87"/><rect class="cls-5" x="275.16" y="14.27" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="323.65" y="14.27" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="372.13" y="14.27" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="420.62" y="14.27" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="248.92" y="-10.8" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="443.4" y="-10.8" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="297.4" y="-10.8" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="345.88" y="-10.8" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="394.37" y="-10.8" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="248.92" y="38.75" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="443.4" y="38.75" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="297.4" y="38.75" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="345.88" y="38.75" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="394.37" y="38.75" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="275.16" y="63.18" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="323.65" y="63.18" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="372.13" y="63.18" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="420.62" y="63.18" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="275.16" y="113.33" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="323.65" y="113.33" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="372.13" y="113.33" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="420.62" y="113.33" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="248.92" y="88.26" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="443.4" y="88.26" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="297.4" y="88.26" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="345.88" y="88.26" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="394.37" y="88.26" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="248.92" y="137.81" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="443.4" y="137.81" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="297.4" y="137.81" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="345.88" y="137.81" width="44.29" height="20.55" rx="5.56" ry="5.56"/><rect class="cls-5" x="394.37" y="137.81" width="44.29" height="20.55" rx="5.56" ry="5.56"/></g></g><path class="cls-6" d="M337.55,83.96l1.66,72.18c0,5.06,4.24,9.16,9.46,9.16h0c2.84,0,5.38-1.22,7.12-3.14v36.42c0,5.57,4.5,10.35,10.25,10.45,5.86,.1,10.64-4.46,10.64-10.11v-14.89c1.91,2.1,4.71,3.43,7.83,3.43h0c5.77,0,10.45-4.53,10.45-10.11V58.98c0-2.12-1.77-3.83-3.96-3.83l-49.49,24.98c-2.19,0-3.96,1.72-3.96,3.83Z"/><path class="cls-6" d="M337.64,88.06v99.61c0,5.19-4.21,9.39-9.39,9.39h0c-2.82,0-5.34-1.25-7.06-3.22v37.34c0,5.71-4.47,10.61-10.18,10.71-5.82,.11-10.56-4.58-10.56-10.37v-15.26c-1.9,2.15-4.67,3.52-7.77,3.52h0c-5.73,0-10.37-4.64-10.37-10.37V88.06c0-2.17,1.76-3.93,3.93-3.93h47.48c2.17,0,3.93,1.76,3.93,3.93Z"/><g><rect class="cls-16" x="-186.62" y="400.61" width="642.36" height="128.93" rx="28.28" ry="28.28"/><rect class="cls-12" x="88.09" y="161.9" width="92.93" height="606.36" rx="10.28" ry="10.28" transform="translate(599.63 330.52) rotate(90)"/><path class="cls-16" d="M52.91,499.87l-42.53-28.35c-5.72-3.4-5.7-11.73,.05-15.36l43.26-28.72c3.82-2.41,8.66-2.29,12.24,.31l41.39,26.53c4.81,3.5,4.79,10.74-.05,14.43l-42.13,30.35c-3.59,2.74-8.43,3.06-12.23,.81Z"/><path class="cls-16" d="M209.01,499.87l-42.53-28.35c-5.72-3.4-5.7-11.73,.05-15.36l43.26-28.72c3.82-2.41,8.66-2.29,12.24,.31l41.39,26.53c4.81,3.5,4.79,10.74-.05,14.43l-42.13,30.35c-3.59,2.74-8.43,3.06-12.23,.81Z"/><path class="cls-16" d="M365.12,499.87l-42.53-28.35c-5.72-3.4-5.7-11.73,.05-15.36l43.26-28.72c3.82-2.41,8.66-2.29,12.24,.31l41.39,26.53c4.81,3.5,4.79,10.74-.05,14.43l-42.13,30.35c-3.59,2.74-8.43,3.06-12.23,.81Z"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/framed.e77bc765.css b/src/site/content/en/third_party/chrometober-2022/assets/framed.e77bc765.css
new file mode 100644
index 00000000000..b902f3c31ba
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/framed.e77bc765.css
@@ -0,0 +1 @@
+:where(html){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.05em;--font-letterspacing-3:.075em;--font-letterspacing-4:.15em;--font-letterspacing-5:.5em;--font-letterspacing-6:.75em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}:where(html){--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollthumb-color:var(--gray-6);-webkit-text-size-adjust:none;accent-color:var(--link);background-color:var(--surface-1);block-size:100%;caret-color:var(--link);color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}@media (dynamic-range:high){@supports (color(display-p3 0 .5 1)){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}}@media (prefers-color-scheme:dark){:where(html){--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}@media (prefers-color-scheme:light){:where(html){--scrollthumb-color:var(--gray-7)}}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input,textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:.75ch;padding-inline:1.25ch 0}:where(textarea,select,input:not(button,button[type],input[type=button],input[type=submit],input[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not(button,button[type],input[type=button],input[type=submit],input[type=reset])){background-color:#171a1c}}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}@media (prefers-color-scheme:dark){:where(dialog){background-color:var(--surface-2)}}:where(dialog)::backdrop{backdrop-filter:blur(25px)}:where(html[\:has\(dialog\[open\]\)]){overflow:hidden}:where(html:has(dialog[open])){overflow:hidden}:where(menu){display:flex;gap:var(--size-3);padding-inline-start:0}:where(sup){font-size:.5em}.host-iframe{border:0;aspect-ratio:16 / 10;width:100vw;min-height:480px}
diff --git a/src/site/content/en/third_party/chrometober-2022/assets/index.9ed1d485.css b/src/site/content/en/third_party/chrometober-2022/assets/index.9ed1d485.css
new file mode 100644
index 00000000000..316f43ed556
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/assets/index.9ed1d485.css
@@ -0,0 +1 @@
+:where(html){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.05em;--font-letterspacing-3:.075em;--font-letterspacing-4:.15em;--font-letterspacing-5:.5em;--font-letterspacing-6:.75em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}:where(html){--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollthumb-color:var(--gray-6);-webkit-text-size-adjust:none;accent-color:var(--link);background-color:var(--surface-1);block-size:100%;caret-color:var(--link);color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}@media (dynamic-range:high){@supports (color(display-p3 0 .5 1)){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}}@media (prefers-color-scheme:dark){:where(html){--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}@media (prefers-color-scheme:light){:where(html){--scrollthumb-color:var(--gray-7)}}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input,textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:.75ch;padding-inline:1.25ch 0}:where(textarea,select,input:not(button,button[type],input[type=button],input[type=submit],input[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not(button,button[type],input[type=button],input[type=submit],input[type=reset])){background-color:#171a1c}}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}@media (prefers-color-scheme:dark){:where(dialog){background-color:var(--surface-2)}}:where(dialog)::backdrop{backdrop-filter:blur(25px)}:where(html[\:has\(dialog\[open\]\)]){overflow:hidden}:where(html:has(dialog[open])){overflow:hidden}:where(menu){display:flex;gap:var(--size-3);padding-inline-start:0}:where(sup){font-size:.5em}:root{--page: hsl(40 100% 98%);--line: hsl(0 0% 0% / .1);--cover: hsl(24 30% 14%);--spine: hsl(10 50% 6%);--fontCopy: "Nanum Gothic", sans-serif;--fontTitle: "Germania One", sans-serif}*,*:after,*:before{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;transition:background .2s}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:where(html){font-family:var(--fontCopy);overflow-y:hidden;overflow-x:scroll;scroll-snap-type:x mandatory}:where(html.block){grid-auto-flow:row;overflow-x:hidden;overflow-y:scroll;scroll-snap-type:y mandatory}.scarecrow{left:5%;width:60%;bottom:35%}.scarecrow__eye--left,.scarecrow__eye--right{transform-origin:50% 50%;transform-box:fill-box}.fence{bottom:12%;left:0;width:65%}.eyes{bottom:-1%;left:-1%;width:75%}.dark-eyes{transform-box:fill-box}#darkEyesOne{transform-box:fill-box;transform-origin:50% 65%}#darkEyesTwo{--delay: 2;transform-origin:50% 75%}@media (prefers-reduced-motion: no-preference){.in-view .dark-eyes-clip{animation:blink 6s calc(var(--delay, 0) * 1s) infinite}}@keyframes blink{0%,46%,48%,50%,to{scale:1 1}47%,49%{scale:1 .01}}.content-block--one{right:10%;top:4%}.content-block--two{right:5%;top:55%}.content-block:where(.astro-SCMHTS4H){background:hsl(0deg 0% 0% / 70%);color:var(--gray-0);border-radius:min(3vh,var(--size-4));padding:clamp(.75rem,2vw,1.25rem);display:grid;gap:var(--size-2);position:absolute;cursor:pointer;width:50%}.content-block:where(.astro-SCMHTS4H):not(:has(a)){cursor:initial}.content-block:where(.astro-SCMHTS4H) h2:where(.astro-SCMHTS4H){color:var(--gray-0);font-size:clamp(.6rem,var(--cqi) * 4,1.5rem)}.content-block:where(.astro-SCMHTS4H) :is(p,a):where(.astro-SCMHTS4H){font-size:clamp(.6rem,var(--cqi) * 3,1.5rem)}.content-block:where(.astro-SCMHTS4H) a:where(.astro-SCMHTS4H){justify-self:end;color:var(--orange-4);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--orange-4)}.pumpkin--one{width:16%;left:17%;bottom:47%}.pumpkin--two{width:18%;left:50%;bottom:39%}.pumpkin--three{width:20%;left:10%;bottom:33.5%}.content-block--three{right:5%;top:5%}.pumpkin__flame,.pumpkin__flame circle{transform-box:fill-box;transform-origin:50% 100%}.pumpkin__flame{scale:.8}.pumpkin__flame circle{transition:scale .2s;scale:0}.pumpkin__flame circle:first-of-type{fill:#ff9233f2}.pumpkin__flame circle:last-of-type{fill:#fc3}.pumpkin--one{--index: 1}.pumpkin--two{--index: 2}.pumpkin--three{--index: 3}@media (prefers-color-scheme: dark){.pumpkin__flame{animation:pumpkin-flicker 3s calc(var(--index, 0) * -1s) infinite linear}.pumpkin__flame circle{scale:1}@keyframes pumpkin-flicker{50%{scale:1}}}.content-block--four{left:30%;bottom:10%}.owl{width:34%;left:10%;bottom:34%}.owl__owl{scale:1.1;transform-origin:50% 100%;transform-box:fill-box}.content-block--five{left:5%;top:23%}.content-block--six{right:5%;top:60%}@media (max-width: 450px){.content-block--five{top:10%}.content-block--six{top:52%}}.bat{width:56%;right:16%;top:2%}@keyframes bat__wings__angle{to{transform:rotate(var(--wing-angle--end, 0deg))}}.bat__wing{--wing-angle--end: 24deg;transform-origin:var(--origin, 0 100%);transform-box:fill-box;transform:rotate(calc(var(--wing-angle--start, 0deg) * -1));animation:bat__wings__angle 1s ease-in-out infinite alternate}.bat__wing--right{--wing-angle--end: -24deg}.bat__wing--left{--origin: 100% 100%}@keyframes bat__head__size{to{scale:1.05}}.bat__head,.bat__beard{transform-origin:50% 100%;transform-box:fill-box;scale:1;animation:bat__head__size 1.5s ease-in-out infinite alternate}.bat__beard{transform-origin:50% 0%}.bunny{width:40%;bottom:5%;right:30%;transform-origin:50% 100%}.content-block--seven{right:5%;top:10%;display:none}.content-block--eight{right:5%;top:40%}.branch{width:80%;left:26%;top:-8%}.tree-eyes{width:40%;top:20%;left:5%}.coffin{width:46%;bottom:4%;left:34%}.snake{width:38%;bottom:3%;left:10%}@keyframes snake__lantern__flame{0%{fill:#bf6b31}to{fill:#aa5368}}.snake__lantern__flame{fill:#bf6b31;animation:snake__lantern__flame 2s ease-in-out infinite alternate}@keyframes snake__lantern__wiggle{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)}}.snake__lantern{transform-origin:50% 0%;transform-box:fill-box;animation:snake__lantern__wiggle 3s ease-out infinite alternate}.coffin__lid{transform-origin:50% 100%;transform-box:fill-box}.tree-eyes{--angle: -10deg;--distance: -10%;transition:all .3s ease-in-out}.tree-eyes:hover{--hovered: 1}.tree__eye__eyelid{transform-origin:50% 50%;transform-box:fill-box;transition:rotate,translate;transition-duration:.3s;transition-timing-function:ease-in-out}.tree__eye__eyelid path{fill:#594b62}.tree__eye__eyelid--topleft{rotate:calc(var(--angle) * (var(--hovered) * 1));translate:calc(var(--distance) * var(--hovered)) calc(var(--hovered) * var(--distance))}.tree__eye__eyelid--topright{rotate:calc(var(--angle) * (var(--hovered) * -2.25));translate:calc(var(--distance) * (var(--hovered) * -1.5)) calc(var(--distance) * (var(--hovered) * 2.5))}.content-block--nine{right:4%;top:5%}.content-block--ten{right:7%;top:50%}.gargoyle{width:45%;left:9%;top:3%}.fox{width:65%;bottom:2%;left:2%}.wand-canvas{height:100%;width:200%;position:fixed;pointer-events:none;right:0;display:none}.in-view .wand-canvas{display:block}.gargoyle{overflow:visible}.gargoyle__wing--right{transform-origin:100px 100px!important}.gargoyle__wing--left{transform-origin:70px 100px!important}.content-block--eleven{bottom:5%;left:5%}.shelves{width:65%;bottom:26%;left:10%}.spider{bottom:4%;right:4%;width:40%}.content-block--twelve{right:5%;top:30%}.content-block--thirteen{left:5%;bottom:4%}.ghost{width:38%;top:6%;left:15%}@keyframes ghost{0%{scale:1;translate:1% -2%}20%{translate:-1% -1%}40%{scale:.95;translate:-2% 0%}70%{scale:1.05}80%{translate:-2% -1%}to{scale:1;translate:-1% 2.5%}}.ghost{transform-origin:50% 100%;transform-box:fill-box;animation:ghost 10s ease-in-out infinite alternate}.ghost__body{animation:ghost-phase 10s ease-in-out infinite}@keyframes ghost-phase{50%{opacity:.4}}.chair-owl{width:40%;bottom:5%;left:5%}.chandelier{width:44%;left:2%;top:-1%}.content-block--fourteen{right:5%;top:10%}.content-block--fifteen{right:10%;top:55%}.portrait{width:34%;left:8%;top:12%}.log-fire{width:25%;bottom:29%;left:24%}.content-block--sixteen{right:5%;top:5%}.content-block--seventeen{right:10%;bottom:5%}.portrait__eye--mover{transition:translate .2s}.portrait__eye--mover.portrait__eye--left{translate:clamp(-10px,var(--lx, 0) * 1px,4px) clamp(-4px,var(--ly, 0) * .5px,10px)}.portrait__eye--mover.portrait__eye--right{translate:clamp(-4px,var(--rx, 0) * 1px,10px) clamp(-4px,var(--ry, 0) * .5px,10px)}.credits:where(.astro-GAHQGNUU){padding:clamp(1.5rem,var(--cqi) * 10,4rem);container:credits / inline-size}h2:where(.astro-GAHQGNUU){font-size:clamp(1.25rem,var(--cqi) * 12,3.5rem);text-transform:uppercase;text-align:center;font-family:var(--fontTitle)}dl:where(.astro-GAHQGNUU){width:65%;display:grid;gap:clamp(.1rem,var(--cqi) * 4.5,3rem) clamp(.5rem,var(--cqi) * 3,3.5rem);grid-template-columns:repeat(2,auto);align-items:center;margin-top:calc(var(--cqi) * 7);width:100%;font-size:clamp(.5rem,var(--cqi) * 3,2rem)}.credits:where(.astro-GAHQGNUU) a:where(.astro-GAHQGNUU){color:var(--orange-9);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--orange-9)}@media (prefers-color-scheme:dark){.credits:where(.astro-GAHQGNUU) a:where(.astro-GAHQGNUU){color:var(--orange-4);text-underline-color:var(--orange-4)}}dt:where(.astro-GAHQGNUU){margin:0}dd:where(.astro-GAHQGNUU){color:var(--text-1)}.colophon:where(.astro-QJDWFVEU){position:absolute;top:60%;padding:0 clamp(.5rem,var(--cqi) * 5,3.5rem);width:93%}.colophon:where(.astro-QJDWFVEU) p:where(.astro-QJDWFVEU){font-size:clamp(.55rem,var(--cqi) * 3,2rem);color:var(--text-1)}.colophon:where(.astro-QJDWFVEU) a:where(.astro-QJDWFVEU){color:var(--orange-9);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--orange-9)}@media (prefers-color-scheme:dark){.colophon:where(.astro-QJDWFVEU) a:where(.astro-QJDWFVEU){color:var(--orange-4);text-underline-color:var(--orange-4)}}@media (max-width: 450px){.colophon:where(.astro-QJDWFVEU){top:56%;padding:0 clamp(.1rem,var(--cqi) * 5,3.5rem)}}.book-placeholder{--size: clamp(12rem, 72vw, 80vmin);--aspect-ratio: 360 / 504;--cqi: calc(.01 * (var(--size) * (var(--aspect-ratio))));position:fixed;height:var(--size);aspect-ratio:var(--aspect-ratio);top:50%;left:50%;transform:translate(-50%,-50%) scale(1);perspective:2500px;transform-style:preserve-3d;z-index:2;transition:transform .2s .2s}.book-instruction{position:fixed;top:50%;left:50%;z-index:2;color:var(--text-1);text-align:center;font-size:calc(var(--cqi) * 8);font-family:Germania One,sans-serif;opacity:.3;transform:translate(-50%,calc(25% + (var(--size) * .5)));transition:transform .2s;clip-path:inset(0 -100% 0 -100%)}.book-instruction svg{width:calc(var(--cqi) * 6);aspect-ratio:1;position:absolute;fill:var(--text-1);left:100%;top:50%;transform:translate(50%,-50%)}.book-instruction span{display:inline-block}@supports (-apple-pay-button-style: inherit){.content-block p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}@media (min-width: 600px){.content-block p{display:block}}}@supports not (-apple-pay-button-style: inherit){@media (max-width: 600px) or (max-height: 600px){.content-block p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}}.book{height:100%;width:100%;list-style-type:none;margin:0;padding:0;transform-style:preserve-3d;perspective:2500px;perspective-origin:-25% 50%;scale:1;container:book / inline-size}.page__side:not(.in-view) *{animation:none!important}@media (prefers-reduced-motion: reduce){.page__side *{animation:none!important}}[data-timeline-trigger]{padding:0;list-style-type:none;position:relative;max-inline-size:100%}html.inline body{grid-auto-flow:column;display:grid}html.inline [data-timeline-trigger]{height:100vh;height:100svh;width:clamp(10rem,10vw,300px);width:clamp(10rem,10svw,300px)}html.block [data-timeline-trigger]{width:100vw;width:100svw;height:clamp(10rem,10vw,300px);height:clamp(10rem,10svw,300px)}[data-timeline-trigger]:not(:last-of-type){max-width:100%;scroll-snap-align:end}[data-timeline-trigger]:last-of-type{scroll-snap-align:start;position:relative}[data-timeline-trigger]>h2{position:absolute;white-space:nowrap;color:var(--gray-6);opacity:.5;font-size:clamp(1.25rem,6vmin,4rem);font-family:Germania One,sans-serif}html.inline [data-timeline-trigger]>h2{top:50%;left:100%;transform:translate(-50%,-50%) rotate(-90deg) translateY(-100%)}html.block [data-timeline-trigger]>h2{top:100%;left:50%;transform:translate(-50%,-50%) rotate(0) translateY(-100%)}body>[data-timeline-trigger]:is([data-timeline-trigger--first],[data-timeline-trigger--last],#specificitybump){height:100vh;width:100vw;height:100svh;width:100svw}.book__page{height:100%;width:100%;position:absolute;transform-style:preserve-3d;max-inline-size:100%;padding:0}.book__page:not(.page--cover){height:96%;width:96%;left:0;top:2%}.page--cover:after{content:"";top:0;height:100%;width:4px;background:var(--spine);position:absolute}.page--cover-front{z-index:20}.page--cover-back:after{right:calc(100% - 2px)}.page--cover-front:after{right:calc(100% - 2px)}.page__background{height:100%;width:200%;object-fit:cover;object-position:0 0;position:absolute;top:0;left:0}.page__content{height:100%;width:100%;position:absolute;top:0;left:0;z-index:2;overflow:hidden}.page__background--left{object-position:0 0}.page__background--right{object-position:100% 0}.page__feature{position:absolute}.page__paper{position:absolute;height:100%;width:100%;transform-origin:0 50%;transform-style:preserve-3d}.page__side--front .page__bookmark{left:0}.page__side--back .page__bookmark{right:0}.page__bookmark{display:none;width:10%;height:20%;background:var(--orange-6);position:absolute;top:0;transform:translate(50%,-50%);z-index:2;clip-path:polygon(0 0,10% 0,50% 15%,90% 0,100% 0,100% 100%,0 100%);border-radius:var(--radius-2)}.page__side{position:absolute;height:100%;width:100%;--start: 4.5%;--end: 5%;background:repeating-linear-gradient(transparent var(--start),var(--line) var(--start) var(--end),transparent var(--end) calc(var(--end) + var(--start))) 50% 50% / 80% 80% no-repeat,var(--page, var(--gray-0));backface-visibility:hidden;transform:rotateY(var(--offset, 0deg))}.page__side.in-view{transform:rotateY(var(--offset, 0deg)) translateZ(1px)}.page--cover-front .page__side--front,.page--cover-back .page__side--back{background:var(--cover)}.page--cover-front .page__side--back{background:linear-gradient(var(--page),var(--page)) 100% 50% / 96% 96% no-repeat,var(--cover)}.page--cover-back .page__side--front{background:linear-gradient(var(--page),var(--page)) 0% 50% / 96% 96% no-repeat,var(--cover)}.page__side--back{--offset: 180deg}.page__side--back .page__number{left:2%}.page__side--front .page__number{right:2%}.page__number{font-family:monospace;position:absolute;bottom:2%;font-size:calc(var(--size) * .025);color:#0000004d}
diff --git a/src/site/content/en/third_party/chrometober-2022/chrometober.njk b/src/site/content/en/third_party/chrometober-2022/chrometober.njk
new file mode 100644
index 00000000000..65adda53427
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/chrometober.njk
@@ -0,0 +1,1131 @@
+<!DOCTYPE html><html lang="en" class="inline"><head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+		<meta name="generator" content="Astro v1.1.5">
+		<title>Chrometober 2022</title>
+		<link rel="icon" type="image/svg+xml" href="/third_party/chrometober-2022/favicon.svg">
+		<link rel="apple-touch-icon" sizes="180x180" href="/third_party/chrometober-2022/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/third_party/chrometober-2022/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/third_party/chrometober-2022/favicon-16x16.png">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+		<link href="https://fonts.googleapis.com/css2?family=Germania+One&amp;family=Nanum+Gothic:wght@400;700&amp;display=swap" rel="stylesheet">
+		<!-- <script is:inline type="module" src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script> -->
+  	<link rel="stylesheet" href="/third_party/chrometober-2022/assets/index.9ed1d485.css">
+
+    {# Sourced scripts cannot be authorized by a CSP hash individually, so we need
+    to use an inline script loader for any sourced scripts. #}
+    {# This works because the CSP includes the 'strict-dynamic' keyword, allowing
+    the children of an authorized script to run. #}
+    {% set scriptLoader %}
+    function loadScript(url, type) {
+      const s = document.createElement('script');
+      s.src = url;
+      s.onload = function() {
+        document.dispatchEvent(new CustomEvent('scriptLoaded', {detail: {url}}));
+      }
+      if (type) {
+        s.type = type;
+      }
+      if (type === 'module') {
+        s.async = false; // Preserve load order.
+        const pre = document.createElement('link');
+        pre.rel = 'modulepreload';
+        pre.href = url;
+        document.head.append(pre);
+        // We use DOMContentLoaded as the loader script is running sync, and inserting a module script here doesn't defer. This brings back normal type="module" behavior.
+        window.addEventListener('DOMContentLoaded', function() {
+          document.head.append(s);
+        });
+      } else {
+        document.head.append(s);
+      }
+    }
+    {% endset %}
+    <script>{{ scriptLoader | minifyJs | cspHash | safe }}</script>
+
+      {% set apiScripts %}
+        loadScript('/third_party/chrometober-2022/hoisted.1780bd6d.js', "module");
+      {% endset %}
+      <script>{{ apiScripts | minifyJs | cspHash | safe }}</script>
+
+    </head>
+	<body>
+		<main class="book-placeholder" aria-label="A book with artful pages and interesting links to articles for October. Turn pages with the arrow keys.">
+    <h1 class="book-instruction" aria-hidden="">
+      <span>S</span>
+      <span>c</span>
+      <span>r</span>
+      <span>o</span>
+      <span>l</span>
+      <span>l</span>
+      <svg viewBox="0 0 448 512" title="arrow-right">
+        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+      </svg>
+    </h1>
+    <ul class="book" style="--count: 7;">
+      <li class="book__page page page--cover-front" data-scroll-target="1" style="--index:0;" aria-label="Fun and frightening tips and tricks. Chrometober 2022. Lift your spirits with supernatural web dev ideas and content!">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 0">
+
+      <picture>
+        <source media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <picture>
+    <source srcset="/third_party/chrometober-2022/assets/chrometober_cover--dark.7266b69c.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+    <img src="/third_party/chrometober-2022/assets/chrometober_cover.ce0f1ead.svg" class="page__background" alt="Fun and frightening tips and tricks. Chrometober 2022. Lift your spirits with supernatural web dev ideas and content!" aria-hidden="true" height="214" width="150">
+</picture>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 1">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img class="page__feature fence" src="/third_party/chrometober-2022/assets/Fence.0bdb1d1b.svg" alt="A spooky fence." width="300" height="133">
+<svg class="page__feature eyes" viewBox="0 0 253 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Five pairs of disembodied eyes stare out from the shadowy space at the bottom of a picket fence.</title>
+  <path d="M252.14 107.25c.69-15.37-11.56-27.86-24.01-35.27 2.07-3.56 3.26-7.71 4.06-11.71.3-2.49.29-4.97 0-7.38a31.47 31.47 0 0 0-1.46-6.28c-4.2-14.09-18.13-23.54-32.79-23.57-1.83 0-3.68.14-5.51.42-1.92.21-3.7.81-5.48 1.1C183.39.26 154.64-3 136.42 7.11a42.45 42.45 0 0 0-3.83 2.03c-6.17 3.72-11.24 9.13-14.25 16.36-.76 1.64-1.41 3.31-1.93 4.99-1.19-1.19-2.37-2.45-3.63-3.64-1.26-1.2-2.58-2.33-4.04-3.27-16.63-12.06-39.45-17.1-58.55-7.36-1.46.65-2.9 1.37-4.31 2.16-1.49.55-2.67 1.44-4.15 2.33A35.128 35.128 0 0 0 38.22 16C28.98 5.9 15.05-1.22 1.12 1.45c.3 16-.3 31.71-.29 47.85v56.48l251.33 1.48-.02-.01Z" fill="#000"></path>
+  <g class="dark-eyes dark-eyes--two" clip-path="url(#darkEyesTwo)">
+    <path d="M134.87 75.4c-2.55-6.99-10.32-10.58-17.36-8.01-4.01 1.46-6.91 4.6-8.2 8.32-.42-.91-.99-1.75-1.72-2.48-3.89-3.89-10.82-3.26-15.48 1.4s-5.29 11.59-1.4 15.48c3.89 3.89 10.82 3.26 15.48-1.4 1.35-1.35 2.36-2.89 3.02-4.49.05.16.1.32.16.49 2.55 6.99 10.32 10.58 17.36 8.01 7.04-2.57 10.68-10.32 8.13-17.31l.01-.01Z" fill="#fff"></path>
+    <path d="M121.039 87.03c.956-1.85-.293-4.395-2.79-5.686-2.498-1.29-5.297-.837-6.253 1.013-.956 1.85.293 4.395 2.791 5.686 2.497 1.29 5.297.837 6.252-1.012Z" fill="#000"></path>
+    <path d="M103.686 87.077c1.912-2.06 2.153-4.946.538-6.445-1.616-1.499-4.475-1.043-6.387 1.017-1.913 2.06-2.153 4.947-.538 6.445 1.615 1.5 4.475 1.044 6.387-1.017Z" fill="#000"></path>
+  </g>
+  <path d="M74.34 65.98c-6.27-2.16-12.75.16-14.49 5.19-.03.07-.05.15-.07.22-4.05-3.16-10.59-1.87-14.83 3.01-4.34 5.01-4.61 11.89-.59 15.38 4.02 3.49 10.8 2.25 15.14-2.75 1.63-1.88 2.69-4.02 3.16-6.15 1.42 1.41 3.26 2.58 5.39 3.32 6.27 2.16 12.75-.16 14.49-5.19 1.74-5.03-1.94-10.86-8.21-13.02l.01-.01Z" fill="#fff"></path>
+  <path d="M52.98 78.49c2.618 0 4.74-2.055 4.74-4.59 0-2.535-2.122-4.59-4.74-4.59-2.618 0-4.74 2.055-4.74 4.59 0 2.535 2.122 4.59 4.74 4.59Z" fill="#000"></path>
+  <path d="M67.5 74.05c2.618 0 4.74-2.055 4.74-4.59 0-2.535-2.122-4.59-4.74-4.59-2.618 0-4.74 2.055-4.74 4.59 0 2.535 2.122 4.59 4.74 4.59Z" fill="#000"></path>
+  <g class="dark-eyes dark-eyes--one" clip-path="url(#darkEyesOne)">
+    <path d="M53.44 44.42c-5.2-6.02-13.18-7.66-17.82-3.65-.13.11-.26.23-.38.35-.43-.77-.96-1.49-1.6-2.13-5.09-5.09-14.97-3.47-22.07 3.62-7.09 7.09-8.72 16.97-3.62 22.07 5.09 5.09 14.97 3.47 22.07-3.62 1.75-1.75 3.17-3.67 4.23-5.65.63 1.22 1.43 2.4 2.39 3.51 5.2 6.02 13.18 7.66 17.82 3.65 4.64-4.01 4.19-12.14-1.01-18.16l-.01.01Z" fill="#fff"></path>
+    <path d="M29.078 58.467c2.689-3.085 3.104-7.124.927-9.022-2.178-1.898-6.123-.936-8.812 2.149-2.689 3.085-3.104 7.124-.927 9.022 2.178 1.898 6.123.936 8.812-2.149Z" fill="#000"></path>
+    <path d="M48.699 58.955c1.597-2.164.349-5.796-2.789-8.111-3.137-2.316-6.975-2.438-8.572-.275-1.597 2.165-.349 5.796 2.788 8.111 3.138 2.316 6.976 2.439 8.573.275Z" fill="#000"></path>
+  </g>
+  <path d="M150.74 38c-3.86-6.68-14.64-7.67-24.09-2.21-4.59 2.65-8.01 6.33-9.88 10.18-2.18-2.16-5.26-3.86-8.87-4.64-7.96-1.74-15.44 1.59-16.72 7.43-1.27 5.84 4.15 11.98 12.11 13.71 5.74 1.25 11.23-.13 14.33-3.19 4.53 5.27 14.33 5.7 23.01.69 9.45-5.46 13.98-15.29 10.13-21.97h-.02Z" fill="#fff"></path>
+  <path d="m85.052 32.679 19.497 1.572c8.153.657 14.238 7.81 13.581 15.963l-34.27-2.763 1.192-14.772Z" fill="#000"></path>
+  <path d="m152.725 29.4-34.73 21.066-.332-.547c-4.06-6.694-1.924-15.417 4.77-19.478l22.615-13.717 7.686 12.67-.009.006Z" fill="#000"></path>
+  <path d="M107.198 59.106c1.772-.317 2.544-4.297 1.724-8.892-.82-4.594-2.921-8.062-4.694-7.745-1.772.316-2.544 4.297-1.724 8.891.82 4.594 2.921 8.062 4.694 7.746Z" fill="#000"></path>
+  <path d="M131.261 56.168c1.273-1.273-.37-4.98-3.67-8.28-3.3-3.3-7.007-4.943-8.281-3.67-1.273 1.273.37 4.98 3.67 8.28 3.3 3.3 7.007 4.944 8.281 3.67Z" fill="#000"></path>
+  <path d="M200.08 66.58c-5.95-4.43-13.1-5.23-17.34-2.31-3.74-3.85-11.27-4.05-17.97-.19-7.52 4.34-11.13 12.17-8.06 17.48 3.07 5.31 11.65 6.1 19.17 1.76 2.25-1.3 4.14-2.9 5.61-4.66 1.28 2.08 3.07 4.06 5.31 5.73 6.96 5.19 15.57 5.41 19.24.49 3.67-4.92 1-13.11-5.96-18.3Z" fill="#fff"></path>
+  <path d="M172.393 77.166c3.52-1.476 5.357-5.096 4.103-8.086-1.254-2.99-5.123-4.217-8.643-2.741-3.519 1.476-5.356 5.096-4.102 8.085 1.254 2.99 5.123 4.217 8.642 2.742Z" fill="#000"></path>
+  <path d="M199.222 78.185c2.015-2.686.995-6.854-2.279-9.31-3.273-2.456-7.56-2.27-9.576.416-2.015 2.686-.995 6.854 2.279 9.31 3.273 2.456 7.561 2.27 9.576-.416Z" fill="#000"></path>
+  <path d="m147.666 66.862 17.865-7.966c7.471-3.33 16.239.03 19.57 7.501l-31.4 14-6.035-13.535Z" fill="#000"></path>
+  <path d="m216.162 87.186-35.178-20.31.32-.555c3.915-6.78 12.59-9.105 19.371-5.19l22.906 13.225-7.41 12.835-.009-.005Z" fill="#000"></path>
+  <defs>
+    <clipPath id="darkEyesOne" class="dark-eyes-clip">
+      <path d="M53.44 44.42c-5.2-6.02-13.18-7.66-17.82-3.65-.13.11-.26.23-.38.35-.43-.77-.96-1.49-1.6-2.13-5.09-5.09-14.97-3.47-22.07 3.62-7.09 7.09-8.72 16.97-3.62 22.07 5.09 5.09 14.97 3.47 22.07-3.62 1.75-1.75 3.17-3.67 4.23-5.65.63 1.22 1.43 2.4 2.39 3.51 5.2 6.02 13.18 7.66 17.82 3.65 4.64-4.01 4.19-12.14-1.01-18.16l-.01.01Z" fill="#fff"></path>
+    </clipPath>
+    <clipPath id="darkEyesTwo" class="dark-eyes-clip">
+      <path d="M134.87 75.4c-2.55-6.99-10.32-10.58-17.36-8.01-4.01 1.46-6.91 4.6-8.2 8.32-.42-.91-.99-1.75-1.72-2.48-3.89-3.89-10.82-3.26-15.48 1.4s-5.29 11.59-1.4 15.48c3.89 3.89 10.82 3.26 15.48-1.4 1.35-1.35 2.36-2.89 3.02-4.49.05.16.1.32.16.49 2.55 6.99 10.32 10.58 17.36 8.01 7.04-2.57 10.68-10.32 8.13-17.31l.01-.01Z" fill="#fff"></path>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature scarecrow" viewBox="0 0 199 247" fill="none" xmlns="http://www.w3.org/2000/svg" alt="An illustrated cartoon scarecrow attached to its frame. It is smiling and wearing a brown hat, red shirt, and gray trousers.">
+  <title>An illustrated cartoon scarecrow attached to its frame. It is smiling and wearing a brown hat, red shirt, and gray trousers.</title>
+  <path d="M90.13 59.49a2.78 2.78 0 1 0-5.56 0v184.64a2.78 2.78 0 0 0 5.56 0V59.49Z" fill="#594B4B"></path>
+  <path d="m195.817 101.086.001-.01a2.62 2.62 0 0 0-2.474-2.758L8.656 88.283a2.62 2.62 0 0 0-2.758 2.474v.01a2.62 2.62 0 0 0 2.473 2.758L193.06 103.56a2.619 2.619 0 0 0 2.758-2.474Z" fill="#594B4B"></path>
+  <path d="M115.41 223.18c-4.04-8.01-3.79-13.79-3.79-13.79s8.06 1 13.16 8.13c5.09 7.13 4.42 10.21 2.18 12.24-2.24 2.03-7.51 1.43-11.55-6.58Z" fill="#E9BD66"></path>
+  <path d="M109.16 226.44c-.73-8.94 1.93-16.32 1.93-16.32s4.64 6.56 6.37 15.15c1.73 8.58-.88 10.51-3.24 10.84-2.36.33-4.33-.74-5.06-9.67Z" fill="#E9BD66"></path>
+  <path d="M103.62 218.01c4.78-7.59 8.04-8.64 8.04-8.64s3.63 5.04-.07 12.98c-3.69 7.94-7.55 10.05-10.09 8.52-2.55-1.53-2.66-5.28 2.12-12.86Z" fill="#E9BD66"></path>
+  <path d="M115.41 223.18c-4.04-8.01-3.79-13.79-3.79-13.79s8.06 1 13.16 8.13c5.09 7.13 4.42 10.21 2.18 12.24-2.24 2.03-7.51 1.43-11.55-6.58Z" fill="#E8C280"></path>
+  <path d="M109.16 226.44c-.73-8.94 1.93-16.32 1.93-16.32s4.64 6.56 6.37 15.15c1.73 8.58-.88 10.51-3.24 10.84-2.36.33-4.33-.74-5.06-9.67Z" fill="#E8C280"></path>
+  <path d="M103.62 218.01c4.78-7.59 8.04-8.64 8.04-8.64s3.63 5.04-.07 12.98c-3.69 7.94-7.55 10.05-10.09 8.52-2.55-1.53-2.66-5.28 2.12-12.86Z" fill="#E8C280"></path>
+  <path d="M64.75 220.19c-.99-8.92 1.26-14.25 1.26-14.25s7.21 3.75 9.49 12.21c2.28 8.46.58 11.11-2.23 12.23-2.81 1.12-7.53-1.28-8.52-10.2v.01Z" fill="#E8C280"></path>
+  <path d="M57.75 221.06c2.43-8.63 7.51-14.62 7.51-14.62s2.05 7.77.68 16.42c-1.37 8.64-4.49 9.54-6.82 9.03-2.33-.51-3.8-2.2-1.36-10.83h-.01Z" fill="#E8C280"></path>
+  <path d="M55.51 211.23c7.13-5.44 10.55-5.28 10.55-5.28s1.64 5.99-4.6 12.14c-6.23 6.15-10.58 6.78-12.43 4.46-1.85-2.32-.64-5.88 6.48-11.31v-.01Z" fill="#E8C280"></path>
+  <path d="M111.42 219.71c-10.86 2.13-20.46-4.35-21.39-14.24-1.46-13.27-3.73-32.28-5.19-45.55-.85-7.73 4.37-14.82 12-16.31 7.63-1.49 15.13 3.11 17.26 10.59 3.65 12.84 8.12 31.43 11.77 44.26 2.87 9.51-3.58 19.12-14.45 21.25Z" fill="#7F7F94"></path>
+  <path d="M63.83 218.45c-10.76-2.6-16.79-12.48-13.51-21.86l15.97-48.05c2.42-7.29 10.04-11.47 17.51-9.67l.27.06c7.47 1.8 12.34 8.99 11.17 16.59-2.04 13.26-7.37 36.37-9.42 49.63-1.36 9.84-11.23 15.89-21.99 13.29v.01Z" fill="#7F7F94"></path>
+  <path d="m56.48 177.4 6.72-19.7 10.58 3.56c1.48.51 2.26 2.11 1.75 3.59l-5.01 14.55a2.815 2.815 0 0 1-3.55 1.76l-10.49-3.76Z" fill="#492F2F"></path>
+  <path d="m115.59 155.26-49.84-3.96c-1.2-.1-2.09-1.14-2-2.34l.44-5.51c.1-1.2 1.14-2.09 2.34-2l49.84 3.96c1.2.1 2.09 1.14 2 2.34l-.44 5.51c-.1 1.2-1.14 2.09-2.34 2Z" fill="#492F2F"></path>
+  <path d="M184.4 115c-8.92-.95-15.67-4.95-15.67-4.95s7.32-3.32 16.07-3.42c8.75-.09 14.13 2.49 14.02 4.87-.11 2.38-5.51 4.45-14.42 3.5Z" fill="#E8C280"></path>
+  <path d="M181.4 120.87c-7.83-4.38-12.47-10.7-12.47-10.7s8.03-.19 16.12 3.16c8.08 3.35 12.02 7.84 10.98 9.98-1.04 2.14-6.82 1.93-14.64-2.44h.01Z" fill="#E8C280"></path>
+  <path d="M173.34 120.84c-4.89-7.51-4.75-10.68-4.75-10.68s5.37-.59 10.89 6.2c5.52 6.78 6.09 10.94 4.01 12.31-2.08 1.37-5.27-.32-10.15-7.83Z" fill="#E8C280"></path>
+  <path d="M14.24 104.12c8.96.38 16.23-2.56 16.23-2.56s-6.74-4.38-15.38-5.77C6.45 94.4.74 96.15.5 98.52c-.24 2.37 4.79 5.22 13.74 5.6Z" fill="#E8C280"></path>
+  <path d="M16.33 110.37c8.39-3.16 13.92-8.73 13.92-8.73s-7.92-1.38-16.41.73-13.05 5.96-12.34 8.24c.71 2.27 6.45 2.92 14.84-.24h-.01Z" fill="#E8C280"></path>
+  <path d="M24.31 111.54c5.95-6.7 6.29-9.85 6.29-9.85s-5.22-1.38-11.7 4.51c-6.47 5.89-7.65 9.92-5.8 11.58 1.85 1.66 5.26.46 11.21-6.24Z" fill="#E8C280"></path>
+  <path d="m26.02 95.61 147.6 9.88c1.3.09 2.28 1.21 2.2 2.51l-.59 33.54a2.356 2.356 0 0 1-2.84 2.15l-51.38-11.49 1.43 14.65a2.357 2.357 0 0 1-2.53 2.45l-57.87-4.25a2.361 2.361 0 0 1-2.17-2.65l1.23-12.35-39.98 6.73c-1.5.19-2.8-1.07-2.64-2.58l5.03-36.47c.13-1.27 1.24-2.2 2.5-2.12h.01Z" fill="#BB6565"></path>
+  <path d="m153.92 139.65-21.08-4.78.15-7.87c.03-1.56 1.32-2.8 2.88-2.77l15.38.31c1.55.03 2.78 1.3 2.77 2.84l-.1 12.27Z" fill="#968083"></path>
+  <path d="m38.66 96.43 21.08 1.49-.15 11.16a2.826 2.826 0 0 1-2.88 2.77l-15.38-.31a2.823 2.823 0 0 1-2.77-2.84l.1-12.27Z" fill="#968083"></path>
+  <path d="m88.59 147.02-20.77-1.44.11-11.14a2.81 2.81 0 0 1 3.02-2.61l15.04.49c1.54.11 2.71 1.44 2.61 2.98l-.02 11.72h.01Z" fill="#968083"></path>
+  <path d="M93.22 148.71c-.68 0-1.23-.55-1.23-1.23v-44.61a1.23 1.23 0 1 1 2.46 0v44.61c0 .68-.55 1.23-1.23 1.23Z" fill="#000"></path>
+  <path d="M101.71 127.68a3.88 3.88 0 0 1-3.87-3.87 3.88 3.88 0 0 1 3.87-3.87 3.88 3.88 0 0 1 3.87 3.87 3.88 3.88 0 0 1-3.87 3.87Zm0-5.27c-.77 0-1.4.63-1.4 1.4 0 .77.63 1.4 1.4 1.4.77 0 1.4-.63 1.4-1.4 0-.77-.63-1.4-1.4-1.4Z" fill="#000"></path>
+  <path d="M101.71 143.87a3.88 3.88 0 0 1-3.87-3.87 3.88 3.88 0 0 1 3.87-3.87 3.88 3.88 0 0 1 3.87 3.87 3.88 3.88 0 0 1-3.87 3.87Zm0-5.27c-.77 0-1.4.63-1.4 1.4 0 .77.63 1.4 1.4 1.4.77 0 1.4-.63 1.4-1.4 0-.77-.63-1.4-1.4-1.4Z" fill="#000"></path>
+  <path d="m63.14 58.49 59.72 1.56 5.82 23.11c.32 1.28.41 2.62.21 3.92-.1.69-.24 1.37-.42 2.05-.13.48-.27.96-.44 1.43-.17.46-.36.91-.57 1.36-.21.45-.43.89-.67 1.33-2.76 4.23-6.38 8.05-11.4 9.31 1.44 1.94 2.86 4.18 3.64 6.7.79 2.52-1.49 4.55-3.98 4.72-3.41.12-5.72-2.8-8.41-4.49-1.37 2.4-1.56 5.79-4.13 7.5-1.59.84-3.44.73-4.57-1.18-.82-1.9-1.03-3.77-.92-5.62-1.37 2.4-2.78 5.41-5.57 5.56-3.41.12-4.11-3.94-4.26-6.73-3.79 1.33-7.95 3.88-12.2 2.41-4.23-1.78-1.79-6.6 1.38-7.96-2.12-.74-4.26-1.17-6.03-2.2-.39-.19-.78-.39-1.16-.6-3.44-1.88-7.3-5.67-9.26-9.79-.7-1.47-.93-3.12-.71-4.73l3.91-27.65.02-.01Z" fill="#E8C280"></path>
+  <path d="M64.55 55.2c7.06-24.96 22.42-34.66 22.42-34.66-.31-2.01-.48-4.02-.42-5.87C86.83 6.4 89.59-.34 94.81.39c5.23.73 6.89 8.01 5.22 15.91-.02.1-.05.19-.07.29 2.3-1.54 4.67-2.9 6.8-3.7 7.73-2.92 13.93-1.96 15.4 2.88 1.31 4.34-2.35 8.48-8.78 10.6 5.66 2.44 9.24 6.04 7.62 10.02-1.51 3.73-6.21 4.51-11.58 3.1l12.85 19.26-57.73-3.55h.01Z" fill="#5E3D3D"></path>
+  <path d="m65.1 55.21 54.84 2.76c1.88.1 3.09-1.97 2.08-3.56l-5.3-8.33c-.4-.64-1.09-1.03-1.84-1.07l-46.85-2.12c-1.03-.05-1.96.58-2.3 1.55l-2.69 7.69c-.51 1.46.52 3 2.07 3.08h-.01Z" fill="#492F2F"></path>
+  <path d="M157.07 65.18c2.61.1 3.57-3.16 1.27-4.32-10.7-5.4-35.86-6.08-35.86-6.08l-54.3-1.19s-29.77-.45-37.08 2.18c-2.49.89-1.89 4.34.77 4.44l125.21 4.98-.01-.01Z" fill="#5E3D3D"></path>
+  <path d="M86.35 88.269c6.948-2.954 10.89-9.324 8.805-14.23-2.085-4.904-9.408-6.486-16.356-3.532-6.948 2.953-10.89 9.324-8.805 14.228 2.085 4.905 9.408 6.487 16.356 3.534Z" fill="#fff"></path>
+  <path d="M115.664 86.57c2.693-4.367-.12-10.988-6.283-14.789-6.163-3.8-13.342-3.34-16.035 1.027-2.693 4.367.12 10.988 6.282 14.788 6.163 3.8 13.343 3.341 16.036-1.026Z" fill="#fff"></path>
+  <path d="M90.587 81.039c1.4-3.132.898-6.4-1.118-7.302-2.017-.901-4.787.906-6.186 4.038-1.4 3.13-.899 6.4 1.118 7.301 2.017.902 4.786-.906 6.186-4.037Z" fill="#000" class="scarecrow__eye scarecrow__eye--left"></path>
+  <path d="M110.566 85.214c2.097-1.03 2.556-4.392 1.025-7.51-1.531-3.119-4.472-4.812-6.569-3.782-2.097 1.03-2.556 4.392-1.025 7.51 1.531 3.118 4.472 4.812 6.569 3.782Z" fill="#000" class="scarecrow__eye scarecrow__eye--right"></path>
+  <path d="M101.58 91.85H90.92c-1.2 0-1.94-1.48-1.33-2.66l5.18-9.36c.59-1.13 2.03-1.15 2.64-.04l5.48 9.36c.65 1.17-.09 2.69-1.31 2.69v.01Z" fill="#D17B54"></path>
+  <path d="M117.2 91.28c-.45-.51-1.22-.57-1.74-.12-.51.45-1.04.87-1.57 1.26l-.62-.87a1.233 1.233 0 0 0-2 1.44l.58.8c-.7.42-1.42.79-2.15 1.13l-.48-.93c-.31-.6-1.06-.84-1.66-.53-.6.31-.84 1.06-.53 1.66l.37.72c-1.22.42-2.5.74-3.84.97l-.16-.79a1.24 1.24 0 0 0-1.46-.96c-.67.14-1.09.79-.96 1.46l.13.61c-.68.06-1.38.11-2.1.13-1.33.04-2.63.04-3.89 0v-.98a1.23 1.23 0 1 0-2.46 0v.87c-2.68-.18-5.19-.53-7.55-1.06l.31-1.15a1.23 1.23 0 0 0-.86-1.51c-.65-.18-1.33.21-1.51.86l-.33 1.19c-1.86-.54-3.6-1.2-5.25-1.98l.33-.69c.29-.61.03-1.35-.58-1.64-.62-.3-1.35-.03-1.64.58l-.3.62c-.8-.46-1.58-.95-2.33-1.47-.56-.39-1.33-.26-1.72.31-.39.56-.25 1.33.31 1.72.86.6 1.75 1.16 2.67 1.68l-.42.87c-.29.61-.03 1.35.58 1.64a1.23 1.23 0 0 0 1.64-.58l.38-.8c1.78.84 3.67 1.55 5.67 2.13l-.34 1.25c-.18.66.21 1.33.86 1.51.11.03.22.04.33.04.54 0 1.04-.36 1.19-.91l.35-1.28c2.56.58 5.29.96 8.2 1.15v.95a1.23 1.23 0 1 0 2.46 0v-.84c.6.02 1.2.02 1.81.02.71 0 1.43-.01 2.16-.03.86-.02 1.71-.08 2.53-.16l.26 1.26c.12.58.63.98 1.21.98.08 0 .17 0 .25-.03.67-.14 1.09-.79.96-1.46l-.23-1.09c1.56-.28 3.05-.67 4.48-1.18l.57 1.09c.22.42.65.67 1.1.67a1.239 1.239 0 0 0 1.1-1.8l-.46-.89c.84-.39 1.66-.83 2.46-1.31l.66.91c.24.34.62.51 1 .51.25 0 .5-.08.72-.23.55-.4.68-1.17.28-1.72l-.61-.85c.6-.44 1.18-.91 1.75-1.4.51-.45.57-1.23.12-1.74l-.03-.01Z" fill="#000"></path>
+  <path d="M75.89 68.69c-.38 0-.76-.18-1-.51-.4-.55-.27-1.32.28-1.72.32-.23 7.84-5.53 17.59-.68.61.3.86 1.04.55 1.65-.3.61-1.05.86-1.65.55-8.38-4.17-14.78.28-15.05.47-.22.16-.47.23-.72.23v.01Z" fill="#000"></path>
+  <path d="M114.45 72.12c-.34 0-.67-.14-.92-.41-5.35-5.93-12.73-4.28-13.04-4.21-.66.16-1.33-.25-1.48-.91-.16-.66.25-1.33.91-1.48.37-.09 9.09-2.09 15.44 4.95.46.51.42 1.29-.09 1.74-.24.21-.53.32-.83.32h.01Z" fill="#000"></path>
+</svg>
+<article class="content-block content-block--one astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">New in Chrome</h2>
+  <p id="New-in-Chrome" class="astro-SCMHTS4H">Lift your spirits with a round up of all the tools and features in Chrome.</p>
+  <a href="https://www.youtube.com/watch?v=qwdN1fJA_d8&amp;list=PLNYkxOF6rcIDfz8XEA3loxY32tYh7CI3m" target="_blank" rel="noopener" aria-describedby="New-in-Chrome" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--two astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrometober <abbr title="Ask me anything">AMA</abbr></h2>
+  <p id="Chrometober-<abbr-title='Ask-me-anything'>AMA</abbr>" class="astro-SCMHTS4H">Join us live on Thursday October 13 as we give you a peek into how we built this site using scroll-linked animations.</p>
+  <a href="https://web.dev/spaces" target="_blank" rel="noopener" aria-describedby="Chrometober-<abbr-title='Ask-me-anything'>AMA</abbr>" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="2" style="--index:1;" aria-label="page 1">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 1">
+      <a class="page__bookmark" href="#trigger-1">
+          <span class="sr-only">Navigate to page 2</span>
+        </a>
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature pumpkin--one" viewBox="0 0 72 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A carved pumpkin that is in anguish.</title>
+  <path d="m46.9 16.5-11.29.81 2.87-14.83A2.274 2.274 0 0 1 40.72.64h3.22c1.21 0 2.21.95 2.27 2.16l.7 13.7h-.01Z" fill="#778D77"></path>
+  <path d="m52.72 13.23-35.35 2.56C8.54 16.83 1.65 23.73 1 33.06c-.64 9.33 5.19 16.26 14.04 16.51l34.13.28c.34.02 21.11 2.87 22.53-17.72.7-10.13-7.8-18.59-18.99-18.91l.01.01Z" fill="#D66A3A"></path>
+  <path d="m60.95 31.16-5.32 3.48c-.78.51-1.92.41-2.54-.24l-4.57-4.71c-.54-.56-1.49-.72-2.26-.39l-9.04 3.91c-.44.19-.95.22-1.42.09l-14.08-3.93c-.86-.24-1.8.08-2.2.75-.5.82-1.77 1.08-2.68.54l-3.01-1.79c-1.04-.62-2.51-.17-2.82.85L7.95 39.81c-.42 1.37 1.5 2.41 2.86 1.54l4.06-2.58c.81-.51 1.98-.38 2.58.31l4.98 5.68c.61.69 1.79.82 2.6.29l6.68-4.4c.82-.54 2.02-.4 2.62.31l3.53 4.17c.78.92 2.47.83 3.1-.17l2.61-4.18c.52-.83 1.82-1.07 2.71-.5l8.31 5.26c.94.59 2.3.3 2.77-.6l1.5-2.88c.46-.88 1.8-1.18 2.74-.61l.21.13c1.25.76 3.01-.05 2.88-1.32l-.79-8.07c-.12-1.19-1.8-1.79-2.93-1.05l-.02.02Z" fill="#000"></path>
+  <path d="M45.442 29.008c4.272-1.484 6.828-5.301 5.708-8.525s-5.492-4.635-9.765-3.15c-4.273 1.485-6.828 5.302-5.708 8.526s5.492 4.634 9.765 3.15Z" fill="#000"></path>
+  <path d="M32.38 25.866c1.497-2.681.244-6.232-2.799-7.93-3.043-1.7-6.723-.904-8.22 1.777-1.497 2.681-.244 6.232 2.799 7.93 3.042 1.7 6.722.904 8.22-1.777Z" fill="#000"></path>
+  <g clip-path="url(#face-one)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-one">
+      <path d="m60.95 31.16-5.32 3.48c-.78.51-1.92.41-2.54-.24l-4.57-4.71c-.54-.56-1.49-.72-2.26-.39l-9.04 3.91c-.44.19-.95.22-1.42.09l-14.08-3.93c-.86-.24-1.8.08-2.2.75-.5.82-1.77 1.08-2.68.54l-3.01-1.79c-1.04-.62-2.51-.17-2.82.85L7.95 39.81c-.42 1.37 1.5 2.41 2.86 1.54l4.06-2.58c.81-.51 1.98-.38 2.58.31l4.98 5.68c.61.69 1.79.82 2.6.29l6.68-4.4c.82-.54 2.02-.4 2.62.31l3.53 4.17c.78.92 2.47.83 3.1-.17l2.61-4.18c.52-.83 1.82-1.07 2.71-.5l8.31 5.26c.94.59 2.3.3 2.77-.6l1.5-2.88c.46-.88 1.8-1.18 2.74-.61l.21.13c1.25.76 3.01-.05 2.88-1.32l-.79-8.07c-.12-1.19-1.8-1.79-2.93-1.05l-.02.02Z" fill="#000"></path>
+  <path d="M45.442 29.008c4.272-1.484 6.828-5.301 5.708-8.525s-5.492-4.635-9.765-3.15c-4.273 1.485-6.828 5.302-5.708 8.526s5.492 4.634 9.765 3.15Z" fill="#000"></path>
+  <path d="M32.38 25.866c1.497-2.681.244-6.232-2.799-7.93-3.043-1.7-6.723-.904-8.22 1.777-1.497 2.681-.244 6.232 2.799 7.93 3.042 1.7 6.722.904 8.22-1.777Z" fill="#000"></path>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature pumpkin--two" viewBox="0 0 74 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A happy carved pumpkin.</title>
+  <path d="m47.77 18.29-13.7-1.66L38.54 2.4c.3-1.16 1.52-1.95 2.9-1.91l3.18.41c1.54.05 2.76 1.13 2.79 2.45l.35 14.94h.01Z" fill="#778D77"></path>
+  <path d="M61.73 16.03s-38.7-4.5-39.06-4.51C10.8 11.1.84 20.26.42 31.99 0 43.72 9.28 53.57 21.15 54c.36.01 37.72-.8 38.18-.78 7.66.27 14.17-7.85 14.54-18.15.35-9.81-5.01-18.05-12.14-19.04Z" fill="#D66A3A"></path>
+  <path d="M60.1 36.32c-.68.89-1.98 2.02-4.41 2.98 0 2.62-2.28 5.09-5.52 5.76-2.56.54-5.03-.2-6.46-1.72-.7 1.9-2.55 3.48-4.95 3.98-3.43.72-6.7-1.04-7.35-3.92-1.35 1.17-3.32 1.71-5.33 1.28-2.01-.43-3.59-1.73-4.34-3.35-1.17.96-2.7 1.4-4.24 1.07-2.77-.59-4.51-3.44-3.88-6.37.2-.93.61-1.75 1.17-2.42-3.83-4.82-10.24.7-7.36 4.85.22.31.45.62.69.93 5.2 6.53 15.35 10.11 30.18 10.63 14.62.52 24.36-2.36 28.94-8.58.27-.37.51-.73.74-1.1 2.85-4.69-3.98-8.88-7.87-4.03l-.01.01Z" fill="#000"></path>
+  <path d="M27.819 32.55c5.157-1.587 8.365-6.032 7.166-9.928-1.199-3.895-6.352-5.766-11.509-4.179-5.157 1.588-8.365 6.033-7.166 9.928 1.2 3.896 6.352 5.767 11.509 4.18Z" fill="#000"></path>
+  <path d="M56.806 32.22c2.144-3.538.195-8.64-4.353-11.398-4.549-2.756-9.974-2.123-12.118 1.414-2.144 3.538-.195 8.64 4.353 11.397 4.548 2.757 9.973 2.124 12.118-1.414Z" fill="#000"></path>
+  <g clip-path="url(#face-two)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-two">
+      <path d="M60.1 36.32c-.68.89-1.98 2.02-4.41 2.98 0 2.62-2.28 5.09-5.52 5.76-2.56.54-5.03-.2-6.46-1.72-.7 1.9-2.55 3.48-4.95 3.98-3.43.72-6.7-1.04-7.35-3.92-1.35 1.17-3.32 1.71-5.33 1.28-2.01-.43-3.59-1.73-4.34-3.35-1.17.96-2.7 1.4-4.24 1.07-2.77-.59-4.51-3.44-3.88-6.37.2-.93.61-1.75 1.17-2.42-3.83-4.82-10.24.7-7.36 4.85.22.31.45.62.69.93 5.2 6.53 15.35 10.11 30.18 10.63 14.62.52 24.36-2.36 28.94-8.58.27-.37.51-.73.74-1.1 2.85-4.69-3.98-8.88-7.87-4.03l-.01.01Z" fill="#000"></path>
+  <path d="M27.819 32.55c5.157-1.587 8.365-6.032 7.166-9.928-1.199-3.895-6.352-5.766-11.509-4.179-5.157 1.588-8.365 6.033-7.166 9.928 1.2 3.896 6.352 5.767 11.509 4.18Z" fill="#000"></path>
+  <path d="M56.806 32.22c2.144-3.538.195-8.64-4.353-11.398-4.549-2.756-9.974-2.123-12.118 1.414-2.144 3.538-.195 8.64 4.353 11.397 4.548 2.757 9.973 2.124 12.118-1.414Z" fill="#000"></path>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature pumpkin pumpkin--three" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A sad carved pumpkin.</title>
+  <path d="m41.75 18.47-12.36.48 3.65-16.09A2.497 2.497 0 0 1 35.55.92l3.51.11c1.32.04 2.38 1.12 2.41 2.44l.28 14.98v.02Z" fill="#778D77"></path>
+  <path d="m50.93 9.95-35.55 4.21C6.51 15.82.89 26.26.43 40.36c-.45 14.1 4.39 24.58 13.31 24.86l34.38.1c.34.03 23.37 4.37 24.37-26.76.49-15.31-10.29-28.25-21.56-28.61Z" fill="#D66A3A"></path>
+  <path d="M16.12 57.91c-3.3 1.59-7.3-.89-6.6-4.1 2.13-9.71 8.39-24.93 26.58-24.05 18.22.88 24.49 15.73 26.64 25.01.72 3.13-3.03 5.58-6.35 4.15L36.17 50.2c-1.33-.57-2.89-.54-4.17.07l-15.88 7.65v-.01Z" fill="#000"></path>
+  <path d="M21.018 31.5c4.039-1.926 6.054-6.126 4.502-9.381-1.552-3.256-6.084-4.334-10.122-2.409-4.038 1.926-6.053 6.125-4.501 9.38 1.552 3.256 6.083 4.334 10.121 2.41Z" fill="#000"></path>
+  <path d="M59.875 30.66c2.3-3.245.776-8.275-3.4-11.235-4.178-2.96-9.428-2.73-11.727.515-2.3 3.245-.776 8.274 3.4 11.234 4.178 2.96 9.428 2.73 11.727-.515Z" fill="#000"></path>
+  <g clip-path="url(#face-three)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-three">
+      <path d="M16.12 57.91c-3.3 1.59-7.3-.89-6.6-4.1 2.13-9.71 8.39-24.93 26.58-24.05 18.22.88 24.49 15.73 26.64 25.01.72 3.13-3.03 5.58-6.35 4.15L36.17 50.2c-1.33-.57-2.89-.54-4.17.07l-15.88 7.65v-.01Z" fill="#000"></path>
+      <path d="M21.018 31.5c4.039-1.926 6.054-6.126 4.502-9.381-1.552-3.256-6.084-4.334-10.122-2.409-4.038 1.926-6.053 6.125-4.501 9.38 1.552 3.256 6.083 4.334 10.121 2.41Z" fill="#000"></path>
+      <path d="M59.875 30.66c2.3-3.245.776-8.275-3.4-11.235-4.178-2.96-9.428-2.73-11.727.515-2.3 3.245-.776 8.274 3.4 11.234 4.178 2.96 9.428 2.73 11.727-.515Z" fill="#000"></path>
+    </clipPath>
+  </defs>
+</svg>
+
+
+<article class="content-block content-block--three astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Learn Accessibility</h2>
+  <p id="Learn-Accessibility" class="astro-SCMHTS4H">There's nothing scary about designing for accessibility. Learn how in this new web.dev course.</p>
+  <a href="https://web.dev/learn/accessibility" target="_blank" rel="noopener" aria-describedby="Learn-Accessibility" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 2">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature owl" viewBox="0 0 113 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A tree with red fruit or flowers in its branches. An owl is looking out from a round hollow in the tree’s trunk.</title>
+  <defs>
+    <clipPath id="tree-hole">
+      <path d="M56.97 145.71c27.951 0 50.61-31.242 50.61-69.78S84.921 6.15 56.97 6.15 6.36 37.392 6.36 75.93s22.659 69.78 50.61 69.78Z"></path>
+      <path d="M56.97 6.15c27.95 0 50.61 31.24 50.61 69.78 0 38.54-22.66 69.78-50.61 69.78S6.36 114.47 6.36 75.93c0-38.54 22.66-69.78 50.61-69.78Zm0-5.37c-7.8 0-15.33 2.09-22.4 6.21-6.67 3.89-12.64 9.42-17.73 16.44C6.62 37.52.99 56.16.99 75.92c0 19.76 5.63 38.41 15.85 52.49 5.09 7.02 11.05 12.55 17.73 16.44 7.07 4.12 14.61 6.21 22.4 6.21 7.8 0 15.33-2.09 22.4-6.21 6.67-3.89 12.64-9.42 17.73-16.44 10.22-14.09 15.85-32.73 15.85-52.49 0-19.76-5.63-38.41-15.85-52.49-5.09-7.02-11.05-12.55-17.73-16.44C72.3 2.87 64.76.78 56.97.78Z"></path>
+    </clipPath>
+  </defs>
+  <path d="M56.97 145.71c27.951 0 50.61-31.242 50.61-69.78S84.921 6.15 56.97 6.15 6.36 37.392 6.36 75.93s22.659 69.78 50.61 69.78Z" fill="#000"></path>
+  <path d="M56.97 6.15c27.95 0 50.61 31.24 50.61 69.78 0 38.54-22.66 69.78-50.61 69.78S6.36 114.47 6.36 75.93c0-38.54 22.66-69.78 50.61-69.78Zm0-5.37c-7.8 0-15.33 2.09-22.4 6.21-6.67 3.89-12.64 9.42-17.73 16.44C6.62 37.52.99 56.16.99 75.92c0 19.76 5.63 38.41 15.85 52.49 5.09 7.02 11.05 12.55 17.73 16.44 7.07 4.12 14.61 6.21 22.4 6.21 7.8 0 15.33-2.09 22.4-6.21 6.67-3.89 12.64-9.42 17.73-16.44 10.22-14.09 15.85-32.73 15.85-52.49 0-19.76-5.63-38.41-15.85-52.49-5.09-7.02-11.05-12.55-17.73-16.44C72.3 2.87 64.76.78 56.97.78Z" fill="#000"></path>
+  <g clip-path="url(#tree-hole)">
+    <g class="owl__owl">
+      <path d="M56.41 145.71h9.16c14.73 0 26.67-11.941 26.67-26.67V92.25c0-14.73-11.94-26.67-26.67-26.67h-9.16c-14.73 0-26.67 11.94-26.67 26.67v26.79c0 14.729 11.94 26.67 26.67 26.67Z" fill="#5E3743"></path>
+      <path d="M27.82 107.96s32.91-4.38 30.71-27.28c2.17 22.52 32.08 21.24 32.08 21.24 10.27-.99 17.8-10.12 16.81-20.39-2.34-24.3-23.94-42.11-48.24-39.77L47.2 42.91C22.9 45.25 5.09 66.85 7.43 91.15c.99 10.27 10.12 17.8 20.39 16.81Z" fill="#B27282"></path>
+      <path d="M75.75 41.42 55.43 57.14 27.82 46.4s23.77-17.64 47.93-4.98Z" fill="#D69BAE"></path>
+      <path d="M54.32 67.72a7.267 7.267 0 0 1-.52-10.05l23.24-26.82s4.71-5.8 9.62-1.49c4.92 4.31-.45 9.74-.45 9.74l-.98 1.11c1.45-.25 3.16.04 4.53 1.95 2.97 4.18-2.1 7.35-2.1 7.35L63.75 68.15a7.254 7.254 0 0 1-9.43-.43Z" fill="#B27282"></path>
+      <path d="M57.46 67.72c2.84-2.67 3.07-7.1.52-10.05L34.74 30.85s-4.71-5.8-9.62-1.49c-4.92 4.31.45 9.74.45 9.74l.98 1.11c-1.45-.25-3.16.04-4.53 1.95-2.97 4.18 2.1 7.35 2.1 7.35l23.91 18.64a7.254 7.254 0 0 0 9.43-.43Z" fill="#B27282"></path>
+      <path d="M61.99 55.31c.28 0 .56-.1.78-.3 8.78-7.91 18.07-4.65 18.46-4.51.6.22 1.27-.09 1.49-.69.22-.6-.09-1.27-.69-1.49-.44-.16-10.97-3.92-20.82 4.96-.48.43-.51 1.16-.09 1.64.23.25.55.38.86.38l.01.01Z" fill="#000"></path>
+      <path d="M29.21 56.96c.23 0 .46-.07.66-.21 8.35-5.78 17.18-1.44 17.27-1.39.57.29 1.27.06 1.56-.51.29-.57.06-1.27-.51-1.56-.41-.21-10.16-5.01-19.64 1.55-.53.36-.66 1.09-.29 1.61.23.33.59.5.96.5l-.01.01Z" fill="#000"></path>
+      <path d="M27.43 62.73c9.48-7.74 22.5-7.55 29.48.29.49-1.08 1.12-2.1 1.89-3.04 6.19-7.58 19.07-7.31 28.77.61s12.54 20.49 6.35 28.07c-6.19 7.58-19.07 7.31-28.77-.61a28.315 28.315 0 0 1-5.23-5.59c-1.47 3.93-4.07 7.65-7.71 10.62-9.7 7.92-23.11 7.55-29.95-.83-6.84-8.38-4.53-21.59 5.17-29.51v-.01Z" fill="#fff"></path>
+      <g class="owl__eyes">
+        <path d="M54.392 83.034c2.501-5.838.804-12.166-3.79-14.135-4.594-1.968-10.346 1.17-12.847 7.007-2.501 5.839-.804 12.167 3.79 14.135s10.346-1.169 12.847-7.007Z" fill="#000" class="owl__eye--left"></path>
+        <path d="M82.02 86.041c3.868-2.804 3.981-9.245.254-14.387-3.728-5.143-9.886-7.038-13.754-4.234-3.867 2.804-3.98 9.245-.253 14.388 3.728 5.142 9.885 7.037 13.753 4.233Z" fill="#000" class="owl__eye--right"></path>
+      </g>
+      <path d="M61.04 78.58c11.84 3.92 18.72 21.3 6.02 36.68-.74.89-2.16.64-2.55-.45-2.71-7.58-17.71-11.06-16.99-18.76.06-.61.49-1.12 1.08-1.28 2.47-.71 9.06-4.66 10.51-14.94.13-.93 1.05-1.54 1.93-1.24v-.01Z" fill="#000"></path>
+      <path d="M107.19 86.28s-37.57 11.89-33.36 57.9c0 0 34.51-9.97 33.36-57.9Z" fill="#994E63"></path>
+      <path d="M8.12 95.01s39.15 4.5 43.79 50.47c0 0-35.78-3.2-43.79-50.47Z" fill="#994E63"></path>
+    </g>
+  </g>
+</svg>
+
+
+
+
+<article class="content-block content-block--four astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Password Manager Compat</h2>
+  <p id="Password-Manager-Compat" class="astro-SCMHTS4H">Know 'whoo' has access to your accounts and how password managers can protect you.</p>
+  <a href="https://developer.chrome.com/password-manager-compatible/" target="_blank" rel="noopener" aria-describedby="Password-Manager-Compat" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="3" style="--index:2;" aria-label="page 2">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 2">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature bat" viewBox="0 0 201 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A pink vampire bat in a cartoon style. It has two prominent fangs.</title>
+  <path d="M64.22 108.41s18.58 9.68 14.13 31.52c-.55 2.7 3.61 4.07 6.07 2.83 20.11-16.09 31.84-10.03 31.84-10.03l-.58-9.56-19.09-11.76-32.38-2.99.01-.01Z" fill="#7C5399"></path>
+  <g class="bat__wing bat__wing--left">
+    <path d="M90.25 92s-21.5-.1-25.76-24.41c-2.08-11.85.37-21.95.37-21.95-17.42-6.29-72.49 10.39-58.61 72.43 0 0 13.6-14.62 39.38-6.59 0 0 18.82-3.82 32.05 10.13L90.25 92Z" fill="#7C5399"></path>
+    <path d="M64.96 45.51C53.25 57.74 40.88 71.1 41.33 100.49c0 0-20.31 1.54-36.76 20.2-14.19-28.31 12.4-85.21 60.39-75.18Z" fill="#AA72CC"></path>
+  </g>
+  <g class="bat__wing bat__wing--right">
+    <path d="M115.49 107.07s39.08 17.35 58.47-16.34c0 0 31.87 15.05 22.45 74.63 0 0-19.34-6.26-38.34 5.97 0 0 .44-24.53-31.44-15.68 0 0 4.04-20.65-23.99-28.38l12.86-20.2h-.01Z" fill="#7C5399"></path>
+    <path d="M174.05 90.73s7.75 34.46-19.33 82.88c0 0 12.54-7.81 42.97-5.99 0 0 13.39-54.18-23.65-76.88l.01-.01Z" fill="#AA72CC"></path>
+  </g>
+  <path d="M109.11 138.95c-.92-1.06-2.69-2.57-3.76-3.45-.52-.43-1.26-.41-1.76.04-1.06.95-2.82 2.57-3.65 3.6-1.45 1.8-2.09 3.73-.85 4.53.88.57 1.99.1 2.95-.94.06 1.71.75 2.84 1.93 2.88 1.41.05 2.31-1.56 2.23-3.81 0-.13-.02-.27-.03-.41 1.18 1.86 2.7 3.01 3.83 2.15 1.18-.89.59-2.89-.89-4.59Z" fill="#000"></path>
+  <path d="M98.08 128.09c-.07-1.76.12-3.7.45-5.61.74-4.36 6.64-5.18 8.56-1.19.87 1.81 1.6 3.68 1.97 5.41 1.39 6.43.06 12.37-4.19 12.98-4.26.62-6.53-4.87-6.79-11.6v.01Z" fill="#AA72CC"></path>
+  <path d="M75.76 130.48c-.05-1.41-.46-3.68-.74-5.04-.13-.66-.72-1.11-1.39-1.08-1.42.07-3.81.21-5.1.49-2.26.48-3.97 1.58-3.52 2.98.33 1 1.48 1.33 2.88 1.13-1.03 1.36-1.21 2.67-.32 3.45 1.07.93 2.78.25 4.14-1.55.08-.1.16-.22.23-.34-.26 2.18.19 4.04 1.61 4.09 1.47.05 2.28-1.87 2.2-4.12l.01-.01Z" fill="#000"></path>
+  <path d="M76.75 114.83c1.42-1.24 3.19-2.38 5-3.37 3.72-2.05 7.93 1.8 6.16 5.66-.91 1.97-1.97 3.89-3.18 5.39-4.13 5.12-9.58 7.82-12.73 4.9-3.15-2.92-.32-8.14 4.76-12.57l-.01-.01Z" fill="#AA72CC"></path>
+  <path d="M118.451 113.463c6.024-13.906 2.107-28.991-8.749-33.693-10.855-4.702-24.538 2.76-30.562 16.665-6.023 13.906-2.106 28.991 8.75 33.693 10.855 4.702 24.538-2.759 30.561-16.665Z" fill="#AA72CC"></path>
+  <path class="bat__beard" d="M108.84 89.02c-16.13-5.15-22.95 5.15-23.83 8.15-.49 2.34.34 5.11 3.05 5.29-3.33 4.2-4.9 12.58 1.44 14.35 1.98.81 4.44-.39 5.58-2.35.52 2.41 1.06 4.48 2.98 6.3 4.81 4.39 12.53.48 13.58-5.22 1.92 1.82 4.85 3.71 7.69 1.86 5.36-4.06 5.63-23.23-10.49-28.39v.01Z" fill="#fff"></path>
+  <g class="bat__head">
+    <path d="m148.16 64.56-2.8-1.14c1.99-3.59 2.31-7.54.48-10.72-2.33-4.04-7.5-5.69-12.96-4.64 1.08-2.45 1.2-4.79.14-6.63-2.62-4.54-11.44-4.35-19.7.42-2.83 1.63-5.23 3.59-7.05 5.65l-5.87-2.39c-7.56-3.08-16.18.55-19.26 8.11l-7.69 17.41c-3.61 8.87.65 18.99 9.52 22.6l43.02 17.52c8.87 3.61 18.99-.65 22.6-9.52l7.69-17.41c3.08-7.56-.55-16.18-8.11-19.26h-.01Z" fill="#AA72CC"></path>
+    <path d="M103.37 54.36c2.8-1.76 4.64-4.7 5.02-7.98l4.73-41.25c.34-4.06-4.45-6.46-7.5-3.76L76.96 32.55S62.3 46.64 68.13 59.64c3.14 7 11.86 9.45 18.35 5.37l16.89-10.65Z" fill="#AA72CC"></path>
+    <path d="M103.62 29.15c-.77-.04-1.45.28-2 .84-1.46-4.29-3.8-7.16-6.52-6.24-2.49.85-3.11 4.1-2.3 7.94-3.02-1.9-5.99-1.87-7.98.46-2.44 2.87-1.26 6.92 2.62 9.96-2.53.37-4.31 1.58-4.37 3.82-.09 3.35 3.73 5.12 8.21 4.87l10.81-2.8a4.012 4.012 0 0 0 2.62-2.96c.44-2.12 1.47-7.89 1.47-7.89s.88-7.92-2.56-8.01v.01Z" fill="#fff"></path>
+    <path d="M102.453 54.386c5.731-2.75 9.033-7.782 7.374-11.237-1.659-3.455-7.649-4.027-13.38-1.276-5.73 2.75-9.032 7.782-7.373 11.237 1.658 3.456 7.648 4.027 13.379 1.276Z" fill="#AA72CC"></path>
+    <path d="M141.01 69.12c-1.1-3.27-.66-6.87 1.21-9.77l22.28-34.76c2.3-3.36 7.53-2.19 8.19 1.83l2.5 42.28s1.32 10.89-3.02 19.2c-5.67 10.86-21.64 9.53-25.55-2.09l-5.61-16.69Z" fill="#AA72CC"></path>
+    <path d="M157.08 50.6c.65.42 1.01 1.07 1.13 1.86 3.69-2.62 7.27-3.6 8.93-1.26 1.53 2.14.13 5.14-2.77 7.79 3.56.22 5.96 1.99 6.2 5.03.31 3.76-3.02 6.35-7.94 6.56 1.84 1.77 2.57 3.8 1.32 5.65-1.88 2.78-6.02 1.98-9.51-.84l-7.14-8.59a3.985 3.985 0 0 1-.4-3.93c.88-1.98 3.41-7.26 3.41-7.26s3.91-6.94 6.75-5.01h.02Z" fill="#fff"></path>
+    <path d="M146.84 73.74c-1.77.07-3.73-.21-5.67-.66-4.44-1.03-5.71-8.84-1.85-11.32 1.75-1.12 3.58-2.06 5.3-2.53 6.36-1.74 12.44.08 13.38 5.7.94 5.63-4.4 8.56-11.15 8.81h-.01Z" fill="#AA72CC"></path>
+    <path d="M144.46 71.62c-3.73-8.26-12.21-12.49-18.93-9.45-.32.14-.62.3-.92.47-.11-1.53-.52-3.02-1.26-4.4-3.58-6.59-13.48-8.13-22.12-3.45-8.63 4.69-12.73 13.84-9.15 20.43s13.48 8.13 22.12 3.45c1.55-.84 2.96-1.83 4.2-2.92.13 2.26.69 4.6 1.72 6.88 3.73 8.26 12.21 12.49 18.93 9.45 6.72-3.04 9.15-12.2 5.42-20.46h-.01Z" fill="#fff"></path>
+    <path d="M129.675 72.004c1.334-3.782 1.059-7.325-.613-7.914-1.672-.59-4.108 1.998-5.441 5.78-1.333 3.78-1.059 7.324.613 7.913 1.672.59 4.108-1.998 5.441-5.78Z" fill="#020100"></path>
+    <path d="M117.448 67.37c2.005-3.472 2.358-7.02.789-7.926-1.569-.906-4.466 1.174-6.47 4.647-2.005 3.472-2.359 7.022-.79 7.927 1.569.906 4.466-1.175 6.471-4.647Z" fill="#020100"></path>
+    <path clip-path="url(#eyes)" d="M114.575 66.518c9.865-.541 17.548-6.716 17.16-13.791-.388-7.075-8.7-12.372-18.566-11.83-9.866.54-17.548 6.715-17.16 13.79.388 7.075 8.7 12.372 18.566 11.83Z" fill="#533D60"></path>
+    <path clip-path="url(#eyes)" d="M150.825 74.106c4.164-5.734 1.059-15.088-6.935-20.894-7.995-5.806-17.851-5.866-22.015-.132-4.164 5.733-1.059 15.088 6.936 20.894 7.994 5.806 17.85 5.865 22.014.132Z" fill="#533D60"></path>
+    <path d="M100.73 87.17s-3.82 7.58 9.11 10.93c7.96 2.06 10-4.38 10-4.38s-6.22-4.56-5.71-10.01c-4.96 3.55-13.4 3.46-13.4 3.46Z" fill="#000"></path>
+    <path d="m95.57 86.22 7.29 1.09-3.04 6.45c-.85 1.83-3.54 1.52-3.96-.45l-.29-7.09Z" fill="#fff"></path>
+    <path d="m118.86 92.93 6.18 4.02-5.45 4.61c-1.54 1.31-3.86-.08-3.42-2.06l2.68-6.57h.01Z" fill="#fff"></path>
+    <path d="m105.55 86.39 5.26-.89-2.84 5.09c-.62 1.14-2.34.84-2.53-.45l.11-3.75Z" fill="#fff"></path>
+    <path d="m114.07 86.4 3.39 4.51-3.91 2.41c-1.1.69-2.45-.42-1.98-1.64l2.5-5.29v.01Z" fill="#fff"></path>
+    <path d="M129.05 99.39c-.05 0-.11 0-.16-.01-8.89-1.36-14.79-9.01-16.32-13.92-12.73 5.92-19.61.49-22.03-2.19a1.076 1.076 0 1 1 1.6-1.44c2.16 2.4 8.49 7.3 20.67 1.11l1.34-.68.22 1.48c.6 4.01 6.22 12.19 14.84 13.5.59.09.99.64.9 1.23-.08.53-.54.92-1.07.92h.01Z" fill="#000"></path>
+    <path d="M103.39 92.74c1.07-1.14 4.12-.68 5.29 1.77 1.35-.87 4.69.13 4.74 1.79-1.04 1.96-10.26-1.62-10.04-3.56h.01Z" fill="#AA72CC"></path>
+    <path d="M124.83 57.84c-.34 0-.68-.16-.89-.46-5.96-8.53-14.58-7.58-14.95-7.53a1.08 1.08 0 0 1-1.2-.94c-.07-.59.34-1.13.93-1.21.41-.05 10.25-1.19 16.99 8.43a1.076 1.076 0 0 1-.89 1.69l.01.02Z" fill="#000"></path>
+    <path d="M144.86 62.25c-.23 0-.45-.07-.65-.22-7.13-5.34-14.82-1.94-15.14-1.79-.54.25-1.18 0-1.43-.53-.25-.54-.01-1.18.53-1.43.37-.17 9.17-4.1 17.34 2.02.48.36.57 1.03.22 1.51-.21.28-.54.43-.86.43l-.01.01Z" fill="#000"></path>
+    <path d="m120.216 75.938-7.001-2.456a5.74 5.74 0 1 0-3.8 10.833l7.001 2.456a5.74 5.74 0 0 0 3.8-10.833Z" fill="#533D60"></path>
+  </g>
+  <defs>
+    <clipPath id="eyes">
+      <path d="M144.46 71.62c-3.73-8.26-12.21-12.49-18.93-9.45-.32.14-.62.3-.92.47-.11-1.53-.52-3.02-1.26-4.4-3.58-6.59-13.48-8.13-22.12-3.45-8.63 4.69-12.73 13.84-9.15 20.43s13.48 8.13 22.12 3.45c1.55-.84 2.96-1.83 4.2-2.92.13 2.26.69 4.6 1.72 6.88 3.73 8.26 12.21 12.49 18.93 9.45 6.72-3.04 9.15-12.2 5.42-20.46h-.01Z" fill="#fff"></path>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<svg class="page__feature bunny" viewBox="0 0 176 213" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A green rabbit, standing in a typical zombie pose with its arms outstretched in front of its body.</title>
+  <path d="M114.73 164.55c1.27-2.81 1.29-5.94-.39-8.58-.24-.35-.5-.67-.79-.97-5.19-4.82-12.71-3.73-18.91-.83-.48.22-.95.46-1.4.7-5.33 2.78-9.89 7.13-11.95 12.74-2.07 6.39.86 12.97 5.99 16.76 3.73 2.68 8.57 3.96 13.11 1.96 8.15-4.48 7.75-14.48 13.42-20.46.35-.4.66-.84.93-1.32h-.01Z" fill="#76978B"></path>
+  <path d="M76.67 207.85c-4.8-.41-8.37-4.92-8.09-10.21l.5-29.6c.8-9.37 4.63-16.69 14.16-15.88 7.49.64 9.81 5.56 10.07 12.19.12 2.96-.22 5.92-.89 8.81l-6.23 27.15c-1.08 4.71-5.12 7.91-9.51 7.54h-.01Z" fill="#8CB8AC"></path>
+  <path d="m68.415 192.326 8.703.328c4.637.175 8.262 4.084 8.087 8.721l-.224 5.956a5.202 5.202 0 0 1-5.393 5l-21.694-.818a4.891 4.891 0 0 1-4.702-5.071c.305-8.094 7.128-14.422 15.223-14.116Z" fill="#8CB8AC"></path>
+  <path d="M30.84 203.86c-4.21-2.23-5.69-7.77-3.36-12.52l12.08-27.03c4.41-8.31 10.77-13.56 19.13-9.12 6.56 3.49 6.75 8.91 4.38 15.11-1.06 2.77-2.53 5.36-4.27 7.76l-16.34 22.56c-2.84 3.92-7.77 5.3-11.62 3.25v-.01Z" fill="#8CB8AC"></path>
+  <path d="m31.593 182.131 7.847 3.78c4.18 2.014 5.94 7.046 3.927 11.227l-2.587 5.369a5.202 5.202 0 0 1-6.941 2.428l-19.56-9.421a4.891 4.891 0 0 1-2.283-6.528c3.515-7.297 12.3-10.37 19.597-6.855Z" fill="#8CB8AC"></path>
+  <path d="M18.78 138.77c.02 5.31-4.11 9.62-9.23 9.64-5.12.02-9.27-4.27-9.29-9.58l-.15-3.74a5.76 5.76 0 0 1 5.63-5.99l6.06.03c3.84.02 6.96 3.13 6.97 6.98v2.66h.01Z" fill="#8CB8AC"></path>
+  <path d="M7.5 136.07a6.868 6.868 0 0 1 6.59-6.88l24.8-.98c6.56-.02 11.89 2.4 11.91 9.74.02 5.76-3.26 7.87-7.84 8.52-2.05.29-4.13.23-6.18-.08l-23.46-3.57a6.866 6.866 0 0 1-5.83-6.76l.01.01Z" fill="#8CB8AC"></path>
+  <path d="m50.72 127.91-27.17-1.07c-.89-.04-1.34 1.06-.68 1.66l4.11 3.78c.5.46.37 1.29-.25 1.57l-7.04 3.18c-.69.31-.76 1.27-.12 1.68l5.44 3.47c.59.37.59 1.23 0 1.61l-3.32 2.14c-.79.51-.45 1.73.49 1.76l27.85.88c5.78.17 10.58-4.44 10.64-10.23.05-5.58-4.34-10.2-9.92-10.42l-.03-.01Z" fill="#5B737C"></path>
+  <path d="M97.88 147.37v-23.02c0-2.72-2.21-4.93-4.93-4.93H40.62c-2.72 0-4.93 2.21-4.93 4.93v26.13c0 .14-.02.29-.06.43l-6.04 21.27c-.36 1.27.91 2.39 2.12 1.88l9.19-3.87a1.56 1.56 0 0 1 1.82.45l3.27 3.97c.5.61 1.38.75 2.05.33l7.16-4.51c.64-.4 1.48-.29 1.99.27l5.98 6.5c.63.68 1.71.68 2.33-.02l6.3-7.06c.66-.74 1.83-.69 2.43.1l4.08 5.43c.57.75 1.66.84 2.34.19l5.79-5.54c.56-.53 1.42-.58 2.03-.12l7.83 5.93c1.05.8 2.56.02 2.52-1.31l-.94-27.45v.02Z" fill="#5B737C"></path>
+  <path d="M60.02 146.27c.98 5.22-2.31 10.21-7.33 11.15-5.03.94-9.89-2.53-10.87-7.74l-.82-3.65a5.758 5.758 0 0 1 4.46-6.91l5.96-1.06c3.78-.68 7.41 1.83 8.11 5.61l.49 2.62v-.02Z" fill="#8CB8AC"></path>
+  <path d="M48.44 145.66a6.867 6.867 0 0 1 5.24-7.96l24.22-5.44c6.45-1.21 12.13.22 13.48 7.43 1.06 5.67-1.78 8.33-6.18 9.8-1.96.66-4.02.97-6.09 1.04l-23.72.72c-3.38.1-6.33-2.27-6.95-5.6v.01Z" fill="#8CB8AC"></path>
+  <path d="m93.72 128.85-31.37 4.42c-.88.12-1.13 1.28-.38 1.75l4.72 2.99c.58.37.6 1.21.03 1.59l-6.36 4.38c-.63.43-.52 1.38.18 1.67l5.97 2.44c.65.26.8 1.11.29 1.58l-2.89 2.7c-.69.64-.13 1.78.79 1.64l27.56-4.1c5.72-.86 9.62-6.26 8.64-11.96l-.76-4.42a5.712 5.712 0 0 0-6.42-4.69v.01Z" fill="#5B737C"></path>
+  <path d="M120.9 81.91v-.11c0-16.08-13.04-29.12-29.12-29.12H59.87c-16.08 0-29.12 13.04-29.12 29.12v.11c-8.89 3.46-15.2 12.1-15.2 22.22v1.24c0 13.17 9.43 27.68 61.14 27.68s59.4-14.52 59.4-27.68v-1.24c0-10.12-6.31-18.76-15.2-22.22h.01Z" fill="#8CB8AC"></path>
+  <path d="M76.433 59.238c4.852-3.666 3.128-14.124-3.85-23.36-6.977-9.237-16.567-13.753-21.419-10.088-4.852 3.665-3.128 14.124 3.85 23.36 6.977 9.237 16.567 13.753 21.419 10.088Z" fill="#8CB8AC"></path>
+  <path d="M72.95 61.943c3.182-6.804-3.03-16.432-13.875-21.505-10.846-5.074-22.218-3.672-25.4 3.132-3.183 6.803 3.03 16.432 13.875 21.505 10.845 5.074 22.217 3.671 25.4-3.132Z" fill="#8CB8AC"></path>
+  <path d="M38.31 77.84c7.428 0 13.45-6.022 13.45-13.45 0-7.428-6.022-13.45-13.45-13.45-7.428 0-13.45 6.022-13.45 13.45 0 7.428 6.022 13.45 13.45 13.45Z" fill="#8CB8AC"></path>
+  <path d="M93.78 45.51c2.19-19.74 16.21-33.89 32.8-41.33 12.77-7.25 34.35-5.74 39.68 12.61 3.26 12.32-8.02 21.66-17.98 23.16-8.89 2.06-17.66-.95-26.77-.76-7.59.66-13.7 6.06-19.68 10.14-1.08 1.02-5.47-2.52-8.05-3.82Z" fill="#8CB8AC"></path>
+  <path d="M95.12 46.35c4.13-13.24 14.79-32.92 39.98-39.23 11.6-2.09 23.78-.55 25.39 12.06.85 8.45-8.54 14.32-16.11 14.92-6.85 1.03-13.89-1.01-20.67-.66-12.57.65-23.83 15.78-23.83 15.78s-3.01-1.89-4.76-2.87Z" fill="#fff"></path>
+  <path d="M98.09 48.06c7.83-18.26 25.36-27.72 43.4-30.01 14.33-3.22 34.54 4.49 34.3 23.6-.46 12.74-13.97 18.39-23.93 16.93-9.1-.61-16.62-6.05-25.4-8.5-7.46-1.57-14.87 1.81-21.77 3.98-1.33.66-4.5-4-6.6-5.99v-.01Z" fill="#8CB8AC"></path>
+  <path d="M99.13 49.26c7.8-11.47 23.72-27.2 49.66-25.92 11.71 1.37 22.91 6.39 20.79 18.92-1.65 8.34-12.33 11.22-19.75 9.59-6.85-1.01-12.99-5.01-19.58-6.64-12.22-3.03-27.39 8.18-27.39 8.18s-2.33-2.68-3.72-4.13h-.01Z" fill="#fff"></path>
+  <path d="m107.675 44.7-13.552-6.023c-5.778-2.568-12.545.035-15.113 5.814l-.633 1.425c-2.568 5.78.035 12.546 5.813 15.114l13.552 6.022c5.779 2.568 12.545-.035 15.114-5.813l.633-1.426c2.568-5.779-.035-12.545-5.814-15.113Z" fill="#68887D"></path>
+  <path d="M73.08 127.46h-8.73l-1.56-10.19s2.26.41 6.8-8.33c.7 6.29 4.62 7.86 4.62 7.86l-1.13 10.65v.01Z" fill="#fff"></path>
+  <path d="M87.94 112c-.7-.14-1.39.32-1.52 1.03-.52 2.67-2.33 4.17-5.55 4.57-8.56-.03-9.3-5.42-9.84-9.36-.04-.3-.08-.59-.12-.86-.12-.77-.74-1.32-1.51-1.35-.73-.03-1.44.49-1.62 1.23-.05.22-.1.45-.16.7-.95 4.35-2.38 8.59-8.39 8.59-2.52.1-4.4-.45-5.59-1.63-1.5-1.49-1.45-3.59-1.45-3.65a1.31 1.31 0 0 0-1.23-1.36c-.72-.03-1.33.52-1.36 1.23 0 .13-.13 3.25 2.18 5.58 1.72 1.74 4.27 2.56 7.51 2.42 4.39 0 6.94-1.9 8.48-4.21v5.36c0 .72.58 1.3 1.3 1.3.72 0 1.3-.58 1.3-1.3v-5.09c1.59 2.72 4.6 4.99 10.58 4.99h.15c5.57-.67 7.36-4 7.88-6.68.14-.71-.33-1.39-1.03-1.52l-.01.01Z" fill="#050505"></path>
+  <path d="M103.388 108.16c6.858-5.396 7.012-16.639.346-25.11-6.667-8.473-17.63-10.966-24.488-5.57-6.858 5.396-7.012 16.639-.346 25.111 6.667 8.472 17.63 10.965 24.488 5.569Z" fill="#fff"></path>
+  <path d="M85.567 97.025c2.812-.683 4.176-5.013 3.045-9.671-1.13-4.659-4.327-7.882-7.139-7.2-2.812.683-4.176 5.012-3.045 9.671 1.13 4.659 4.327 7.882 7.139 7.2Z" fill="#050505"></path>
+  <path clip-path="url(#eyeRight)" d="M73.15 86.24c12.22 2.67 26.66-.92 34.57-3.46l-2.23-12.82-30.95.92-1.39 15.36Z" fill="#68887D"></path>
+  <path d="M109.74 79.78c-.36-.62-1.16-.83-1.78-.47-.14.08-.29.16-.44.24.4-.66.59-1.12.62-1.19a1.298 1.298 0 0 0-2.41-.97c-.02.05-.16.38-.46.87.04-.6-.35-1.17-.96-1.33a1.29 1.29 0 0 0-1.59.91c-.05.19-1.24 4.31-5.48 5.76-11.57 3.08-23.06 2.25-23.21 2.24a1.3 1.3 0 0 0-1.4 1.19 1.3 1.3 0 0 0 1.19 1.4c.23.02 1.86.14 4.41.14 4.65 0 12.35-.41 20.12-2.56.09 0 .18-.01.26-.03.63-.16 1.22-.36 1.77-.57 3.04-.97 6.06-2.21 8.87-3.84.62-.36.83-1.16.47-1.78l.02-.01Z" fill="#050505"></path>
+  <path d="M61.544 102.468c8.472-6.667 10.966-17.63 5.57-24.488-5.397-6.858-16.64-7.012-25.112-.345-8.471 6.666-10.965 17.63-5.569 24.488 5.397 6.857 16.64 7.012 25.111.345Z" fill="#fff"></path>
+  <path d="M64.08 89.057c1.277-5.038-.157-9.747-3.204-10.52-3.046-.771-6.55 2.687-7.827 7.725-1.277 5.037.158 9.747 3.204 10.519 3.046.772 6.55-2.686 7.827-7.724Z" fill="#050505"></path>
+  <path clip-path="url(#eyeLeft)" d="M71.27 86.55c-11.32 1.17-23.81-4.04-30.59-7.46l3.67-12.25 27.67 4.55-.76 15.16h.01Z" fill="#68887D"></path>
+  <path d="M69.49 85.56c-.15 0-11.68-.17-22.94-4.24-4.09-1.8-4.92-6.01-4.96-6.21-.13-.71-.8-1.17-1.51-1.05-.62.11-1.06.64-1.07 1.25-.25-.51-.36-.85-.38-.9-.21-.68-.93-1.07-1.62-.86-.69.21-1.08.93-.87 1.62.02.07.17.54.51 1.24-.14-.09-.28-.18-.42-.28a1.299 1.299 0 1 0-1.49 2.13c2.68 1.87 5.59 3.39 8.56 4.62.52.25 1.06.49 1.66.7.06.02.13.02.2.03.51.19 1.02.37 1.53.55 11.21 3.85 22.14 4 22.77 4h.01c.71 0 1.29-.57 1.3-1.29 0-.72-.57-1.31-1.29-1.31h.01Z" fill="#050505"></path>
+  <path d="M69.93 109.64c7.986 0 14.46-3.989 14.46-8.91 0-4.92-6.474-8.91-14.46-8.91-7.986 0-14.46 3.99-14.46 8.91 0 4.921 6.474 8.91 14.46 8.91Z" fill="#68887D"></path>
+  <defs>
+    <clipPath id="eyeLeft">
+      <path d="M61.544 102.468c8.472-6.667 10.966-17.63 5.57-24.488-5.397-6.858-16.64-7.012-25.112-.345-8.471 6.666-10.965 17.63-5.569 24.488 5.397 6.857 16.64 7.012 25.111.345Z" fill="#fff"></path>
+    </clipPath>
+    <clipPath id="eyeRight">
+      <path d="M103.388 108.16c6.858-5.396 7.012-16.639.346-25.11-6.667-8.473-17.63-10.966-24.488-5.57-6.858 5.396-7.012 16.639-.346 25.111 6.667 8.472 17.63 10.965 24.488 5.569Z" fill="#fff"></path>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<article class="content-block content-block--five astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Fugu Patterns</h2>
+  <p id="Fugu-Patterns" class="astro-SCMHTS4H">Check out these fang-tastic new reusable capabilities patterns.</p>
+  <a href="https://web.dev/new-patterns-for-amazing-apps/" target="_blank" rel="noopener" aria-describedby="Fugu-Patterns" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--six astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrome Concepts</h2>
+  <p id="Chrome-Concepts" class="astro-SCMHTS4H">Join Sam to learn about how the pieces of Chrome are stitched together.</p>
+  <a href="https://youtube.com/playlist?list=PLNYkxOF6rcIBzsbjZKyOdO-iwQTjidz1P" target="_blank" rel="noopener" aria-describedby="Chrome-Concepts" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 3">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img src="/third_party/chrometober-2022/assets/Branch.a36bf11c.svg" class="page__feature branch" alt="" aria-hidden="true" width="271" height="150">
+<svg class="page__feature coffin" viewBox="0 0 162 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Behind the snake, two arms and a leg are emerging from an open coffin marked on its lid with a moon symbol.</title>
+  <defs>
+    <clipPath id="lid">
+      <path d="M47.83 190.49 10.8 83.78a7.939 7.939 0 0 1-.02-5.14l14.8-43.53a7.927 7.927 0 0 1 6.96-5.35l59.79-4a7.908 7.908 0 0 1 7.61 4.37L120.4 71.3c.78 1.58 1.02 3.37.67 5.1L98.58 187.09a7.92 7.92 0 0 1-7.22 6.32l-35.54 2.38a7.902 7.902 0 0 1-8-5.3h.01Z" fill="#4C3E3B"></path>
+    </clipPath>
+  </defs>
+  <g class="coffin__box">
+    <path d="M132.09 21.27H63.08c-3.16 0-6.02 1.9-7.24 4.83L35.53 74.9a7.84 7.84 0 0 0-.32 5.08l31.66 115.65a7.835 7.835 0 0 0 7.56 5.77h46.31c3.53 0 6.63-2.36 7.56-5.77l31.66-115.65a7.84 7.84 0 0 0-.32-5.08l-20.31-48.8a7.85 7.85 0 0 0-7.24-4.83Z" fill="#261F1D"></path>
+    <path d="M74.43 193.76c-.09 0-24.97-90.66-30.71-111.55-.76-2.77-.58-5.7.53-8.35 3.39-8.14 11.04-26.5 15.48-37.07 2.01-4.79 6.7-7.9 11.89-7.9 13.29.01 38.78.04 52.09.08 5.19.01 9.86 3.14 11.86 7.93 4.38 10.54 11.99 28.84 15.36 36.96 1.1 2.65 1.28 5.58.52 8.34-5.73 20.87-30.62 111.56-30.71 111.56H74.43Z" fill="#000"></path>
+  </g>
+  <g class="coffin__zombie">
+    <path d="M126.08 191.92c3.55-2.3 4.47-7.28 2.07-11.26l-12.6-22.77c-4.49-6.94-10.48-11.05-17.54-6.48-5.55 3.59-5.32 8.37-2.79 13.62 1.13 2.34 2.62 4.51 4.32 6.47l16.04 18.5c2.79 3.21 7.24 4.03 10.5 1.92Z" fill="#8CB8AC"></path>
+    <path d="m141.458 186.886-16.497 9.586a4.576 4.576 0 0 1-6.248-1.655l-2.632-4.531a7.391 7.391 0 0 1 2.676-10.102l6.623-3.849c6.156-3.577 14.058-1.483 17.635 4.673a4.306 4.306 0 0 1-1.557 5.878Z" fill="#8CB8AC"></path>
+    <path d="m108.75 147.06 15.03 18.75c.67.87-.11 2.11-1.19 1.88l-6.77-1.45c-.83-.18-1.57.55-1.41 1.38l1.83 9.4c.18.92-.74 1.68-1.61 1.32l-7.4-3.02c-.8-.33-1.67.29-1.63 1.15l.22 4.89c.05 1.16-1.43 1.7-2.13.77l-15.31-19.57c-4.32-5.73-3.08-13.89 2.73-18.09 5.61-4.05 13.43-2.91 17.65 2.58l-.01.01Z" fill="#5B737C"></path>
+    <path d="M135.34 130.25c-.86 5.13 2.44 9.96 7.38 10.79 4.94.83 9.65-2.65 10.51-7.78l.74-3.59a5.649 5.649 0 0 0-4.49-6.69l-5.86-.94a6.867 6.867 0 0 0-7.85 5.64l-.43 2.57Z" fill="#8CB8AC"></path>
+    <path d="M146.68 129.45c.6-3.57-1.73-6.97-5.27-7.7l-23.82-4.9c-6.34-1.07-11.88.43-13.07 7.52-.94 5.57 1.89 8.13 6.22 9.49 1.93.61 3.96.88 5.98.91l23.25.29c3.31.04 6.16-2.34 6.71-5.61Z" fill="#8CB8AC"></path>
+    <path d="m106.2 114.67 26.44 3.29c.86.11 1.13 1.23.4 1.71l-4.58 3a.934.934 0 0 0 0 1.56l6.3 4.2c.62.41.53 1.35-.15 1.64l-5.81 2.48a.938.938 0 0 0-.26 1.56l2.87 2.6c.68.62.16 1.75-.75 1.62l-27.06-3.59c-5.62-.76-9.52-5.98-8.65-11.59.84-5.41 5.82-9.17 11.25-8.49v.01Z" fill="#5B737C"></path>
+    <path d="M153.98 100.91c5.12-.92 8.55-5.66 7.67-10.59-.88-4.93-5.75-8.19-10.87-7.27l-3.63.52c-3.13.44-5.28 3.37-4.78 6.49l1.09 5.83c.69 3.7 4.25 6.15 7.95 5.49l2.57-.46v-.01Z" fill="#8CB8AC"></path>
+    <path d="M151.35 92.72c-.33-3.6-3.46-6.3-7.07-6.09L120 87.99c-6.4.59-11.37 3.46-10.71 10.62.52 5.62 3.91 7.38 8.45 7.58 2.02.09 4.05-.16 6.02-.65l22.55-5.67a6.721 6.721 0 0 0 5.05-7.14l-.01-.01Z" fill="#8CB8AC"></path>
+    <path d="m108.44 88.8 26.4-3.59c.86-.12 1.4.9.82 1.55l-3.65 4.07c-.45.5-.24 1.29.39 1.51l7.16 2.44c.7.24.86 1.17.27 1.62l-4.98 3.89a.934.934 0 0 0 .15 1.57l3.44 1.77c.82.42.6 1.65-.31 1.76l-27.08 3.46c-5.63.71-10.74-3.34-11.33-8.98-.57-5.44 3.28-10.35 8.7-11.09l.02.02Z" fill="#5B737C"></path>
+  </g>
+  <g class="coffin__lid">
+    <path d="m96.71 18.17-69.5 4.65a7.898 7.898 0 0 0-6.96 5.35L3.08 78.68c-.57 1.67-.56 3.48.02 5.14l39.67 114.33a7.902 7.902 0 0 0 8 5.3l46.64-3.12a7.9 7.9 0 0 0 7.22-6.32l24.1-118.59c.35-1.73.12-3.52-.67-5.1l-23.74-47.77a7.892 7.892 0 0 0-7.61-4.37v-.01Z" fill="#332927"></path>
+    <path d="M47.83 190.49 10.8 83.78a7.939 7.939 0 0 1-.02-5.14l14.8-43.53a7.927 7.927 0 0 1 6.96-5.35l59.79-4a7.908 7.908 0 0 1 7.61 4.37L120.4 71.3c.78 1.58 1.02 3.37.67 5.1L98.58 187.09a7.92 7.92 0 0 1-7.22 6.32l-35.54 2.38a7.902 7.902 0 0 1-8-5.3h.01Z" fill="#4C3E3B"></path>
+    <g class="coffin__grooves" clip-path="url(#lid)">
+      <path d="M25.07 26.64c2.37 6.09.88 12.74-1.33 18.65-2.27 6.07-5.35 11.85-6.8 18.2-1.44 6.3-.61 12.38 1.63 18.38 2.13 5.67 5.23 11.16 6.21 17.2 1.05 6.45-.32 12.91-1.4 19.26-1.02 6.02-1.68 12.08-.64 18.14 1.81 10.67 7.29 20.16 12.51 29.48 5.71 10.19 11.66 20.97 11.4 33-.06 2.66 4.07 2.37 4.12-.28.47-22.29-17.9-38.67-23.23-59.31-1.43-5.53-1.47-11.11-.67-16.74.93-6.49 2.53-12.93 2.4-19.53-.13-6.6-2.61-12.46-5.12-18.4-2.37-5.59-4.53-11.33-3.71-17.51 1.88-14.1 14.26-27.12 8.51-41.91-.96-2.47-4.87-1.13-3.9 1.36l.02.01Z" fill="#66504C"></path>
+      <path d="M33.19 23.7c5.71 9.77 3.58 21.76.89 32.11-1.51 5.81-3.27 11.56-4.28 17.48-1.02 5.95-1.24 12.05-.8 18.07 1.77 24.43 13.53 46.31 22.66 68.56 5.07 12.35 10.05 25.68 8.72 39.27-.11 1.11.44 2.2 1.61 2.44 1 .21 2.33-.49 2.44-1.61 1.21-12.37-2.24-24.43-6.64-35.87-4.43-11.53-9.78-22.68-14.41-34.13-4.59-11.34-8.5-23.08-9.91-35.29-.69-6.01-.79-12.11 0-18.12.8-6.04 2.5-11.89 4.07-17.76 3.28-12.22 5.82-25.9-.94-37.46-1.34-2.3-4.76.03-3.42 2.32l.01-.01Z" fill="#66504C"></path>
+      <path d="M72.38 199.03c3.42-11.69.71-24.01-3.25-35.19-2.07-5.84-4.49-11.55-6.59-17.38-2.1-5.83-3.85-11.61-5.32-17.55-2.92-11.77-4.59-23.84-5.05-35.96-.23-6.04-.15-12.09.24-18.13.41-6.32 1.13-12.62 1.38-18.96.28-6.94-.14-13.84-1.79-20.61-1.56-6.44-4.18-12.59-7.64-18.23-1.39-2.27-4.81.05-3.42 2.32 6.21 10.15 8.93 21.65 8.81 33.49-.06 6.15-.71 12.27-1.19 18.4-.48 6.13-.72 12.21-.61 18.33.21 12.04 1.65 24.03 4.22 35.8 1.27 5.83 2.83 11.59 4.68 17.26 1.89 5.8 4.17 11.45 6.36 17.14 4.68 12.16 8.92 25.45 5.12 38.44-.31 1.07.58 2.23 1.61 2.44 1.17.24 2.13-.53 2.44-1.61Z" fill="#66504C"></path>
+      <path d="M46.1 16.91c4.82 8.02 8.15 16.98 9.69 26.21.78 4.66 1.13 9.39 1.05 14.12a70.97 70.97 0 0 1-.45 6.83c-.24 2.05-.53 4.13.06 6.15.58 2 2.26 3.54 4.36 3.73 2.21.21 4.22-1.11 5.62-2.72 2.85-3.29 4.17-8.18 4.7-12.41 1.13-9.01-1.04-17.88-2.86-26.64-1.96-9.42-3.53-19.98 1.33-28.8 1.29-2.34-2.42-4.17-3.7-1.84-8.72 15.83.63 33.64 1.37 50.12.18 4.06-.12 8.24-1.5 12.1-.64 1.8-1.45 3.82-2.85 5.17-.9.87-2.19 1.45-2.59-.1-.42-1.64.07-3.55.24-5.19.23-2.29.36-4.59.39-6.89.07-4.51-.27-9.03-.99-13.49-1.64-10.14-5.16-19.87-10.46-28.67-1.37-2.28-4.79.04-3.42 2.32h.01Z" fill="#66504C"></path>
+      <path d="M71.15 13.07c1.15 7.29 2.3 14.58 3.45 21.86l1.65 10.46c.55 3.49 1.25 7.02 1.4 10.57.13 3.08-.38 6.03-1.74 8.81-1.17 2.41-2.75 4.57-4.39 6.67-3.64 4.66-7.3 9.17-9.44 14.76-4.26 11.1-3.62 23.43-.59 34.75 3.5 13.09 10.16 25.02 15.63 37.33 6.02 13.56 10.94 28.64 7.73 43.58-.56 2.6 3.49 3.43 4.05.83 6-27.94-13.06-52.1-21.66-77.13-3.83-11.14-5.67-23.45-2.31-34.96 1.63-5.58 4.73-10.16 8.3-14.66 3.55-4.48 7.27-9.2 8.26-14.99.66-3.86.16-7.75-.44-11.58-.63-4.03-1.27-8.06-1.91-12.09-1.29-8.16-2.58-16.32-3.86-24.48-.17-1.1-1.01-2-2.2-1.92-1.04.07-2.1 1.09-1.92 2.2l-.01-.01Z" fill="#66504C"></path>
+      <path d="M105.35 174.7c-4.99-11.65-8.32-23.97-9.75-36.56-1.27-11.2-1.43-23.5 4.92-33.33 2.99-4.63 7.37-8.36 12.67-10.02L110.8 94c4.1 6.45 5.41 14.32 3.72 21.76-.59 2.6 3.46 3.42 4.05.83 1.94-8.51.33-17.55-4.34-24.91-.5-.79-1.53-1.06-2.39-.79-10.96 3.43-17.78 13.99-19.99 24.8-1.28 6.27-1.26 12.77-.72 19.12.57 6.72 1.68 13.4 3.25 19.96 1.75 7.29 4.13 14.42 7.08 21.3 1.04 2.43 4.95 1.09 3.9-1.36l-.01-.01Z" fill="#66504C"></path>
+      <path d="M120.79 87.93c-2.04-5.3-6.33-8.98-10.64-12.43-4.5-3.6-8.69-7.23-11.17-12.56-5.24-11.25-4.23-24.14-6.9-36.04-1.5-6.67-4.22-13.02-9.06-17.94-1.87-1.9-4.58 1.22-2.72 3.11 8.48 8.6 8.85 21.77 10.17 33.03.7 6.03 1.67 12.16 4 17.8 2.32 5.61 5.99 10.02 10.65 13.84 4.39 3.61 9.66 7.04 11.79 12.56.95 2.47 4.86 1.13 3.9-1.36l-.02-.01Z" fill="#66504C"></path>
+      <path d="M97.46 17.46c1.22 10.25 2.43 20.51 3.65 30.76.55 4.67.54 10.06 3.01 14.21 2.18 3.65 6.56 5.68 10.62 3.89 4.95-2.18 6.59-7.32 7.75-12.17.62-2.59-3.43-3.41-4.05-.83-.78 3.28-1.68 7.47-5.04 9.1-3.18 1.54-5.68-1.24-6.61-4.06-.65-1.97-.81-4.07-1.05-6.12-.26-2.23-.53-4.45-.79-6.68-.53-4.45-1.06-8.9-1.58-13.35-.59-5.01-1.19-10.02-1.78-15.02-.31-2.63-4.44-2.37-4.12.28l-.01-.01Z" fill="#66504C"></path>
+      <path d="M77.33 20.53c7.45 21.93 15.43 47.19 4.96 69.56-2.35 5.02-5.89 9.13-8.85 13.77-1.48 2.32-2.69 4.83-3.28 7.53-.64 2.95-.54 6.03 0 8.99 1.13 6.24 3.64 12.23 5.73 18.2 2.19 6.27 4.39 12.53 6.58 18.8 4.98 14.22 9.96 28.43 14.94 42.65.88 2.51 4.78 1.16 3.9-1.36-4.42-12.61-8.83-25.22-13.25-37.83-2.22-6.34-4.44-12.69-6.67-19.03-2.13-6.09-4.53-12.14-6.29-18.35-.79-2.77-1.37-5.65-1.25-8.56.11-2.82 1.07-5.42 2.47-7.85 2.72-4.74 6.47-8.77 8.97-13.67 5.08-9.96 6.64-21.45 5.97-32.51-.87-14.35-5.43-28.17-10.02-41.69-.85-2.51-4.76-1.16-3.9 1.36l-.01-.01Z" fill="#66504C"></path>
+      <path d="M109.87 137.29c-.47-6.78-.95-13.56-1.42-20.34-.09-1.33-1.47-2.26-2.74-1.81-3.52 1.25-5.82 4.31-6.91 7.79-1.22 3.91-.71 8.19-.4 12.2.57 7.5 1.38 15.19 4.1 22.26 1.54 4 3.7 7.62 6.54 10.82.74.83 2.25.57 2.91-.19.81-.93.55-2.08-.19-2.91-4.26-4.8-6.49-11.1-7.68-17.32-.63-3.3-1.02-6.65-1.32-9.99-.31-3.49-.8-7.11-.55-10.62.23-3.25 1.52-6.95 4.85-8.14l-2.74-1.81c.47 6.78.95 13.56 1.42 20.34.18 2.65 4.31 2.38 4.12-.28h.01Z" fill="#66504C"></path>
+      <path d="M.49 65.9a78.762 78.762 0 0 1 14.14 27.73c2.99 10.7 3.4 21.83 2.09 32.83-.78 6.55-2.08 13.03-3.54 19.46-.59 2.6 3.46 3.42 4.05.83 2.69-11.79 4.8-23.86 4.28-36a81.4 81.4 0 0 0-7.82-31.43c-2.67-5.6-5.92-10.88-9.77-15.74-1.64-2.07-5.08.23-3.42 2.32H.49Z" fill="#66504C"></path>
+      <path d="M83.68 109.42c-17.34 1.16-32.34-11.96-33.5-29.3-1.16-17.33 11.89-32.29 29.22-33.49 2.1-.15 4.16-.08 6.16.17 1.12.14 1.56-1.41.52-1.86-5.3-2.29-11.22-3.38-17.38-2.98-20.4 1.35-36.1 18.91-35.14 39.34.99 21.14 19.13 37.24 40.14 35.84a37.45 37.45 0 0 0 18.25-6.15c1.51-1 .42-3.35-1.32-2.83-2.22.67-4.55 1.1-6.97 1.26h.02Z" fill="#C0B19E"></path>
+    </g>
+  </g>
+</svg>
+<svg class="snake page__feature" viewBox="0 0 135 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A snake slithers away in profile. It is holding a shovel and a lamp with a candle inside, and wearing a top hat.</title>
+  <defs>
+    <clipPath id="eye">
+      <path d="M35.95 67.23a8.44 8.44 0 1 0 0-16.88 8.44 8.44 0 0 0 0 16.88Z" fill="#fff"></path>
+    </clipPath>
+  </defs>
+  <path d="M24.49 148.17a8.37 8.37 0 0 1-5.05-10.04l14.87-78.8c2.87-7.41 11.2-11.1 18.61-8.23 7.41 2.87 11.1 11.2 8.23 18.61l-26.19 74.46a8.363 8.363 0 0 1-10.47 4Z" fill="#B6BD73"></path>
+  <path d="M10.31 81.5s3.6 13.51 26.25 4.42l15.39-7.97s.61-.41 1.45-1.18c5.58-5.16 2.68-15.06-5.02-15.46 0 0-.19 9.52-6.22 10.45-8.55 1.31-11.3-.05-15.76 6.86-5.42 8.39-16.09 2.88-16.09 2.88Z" fill="#B6BD73"></path>
+  <path d="m97.58 97.97-25.55-7a8.34 8.34 0 0 1-6.46-9.85 8.34 8.34 0 0 1 9.85-6.46l25.55 7a8.34 8.34 0 0 1 6.46 9.85 8.34 8.34 0 0 1-9.85 6.46Z" fill="#B6BD73"></path>
+  <path d="m104.65 98.57-23.66 11.92a8.328 8.328 0 0 1-8.4-14.38l23.66-11.92a8.328 8.328 0 0 1 8.4 14.38Z" fill="#B6BD73"></path>
+  <path d="M62.06 122.8c-1.79-1.27-2.5-3.45-1.63-5.05l7.75-16.26c1.94-2.74 6.04-6.57 11.12-2.93 5.08 3.64 2.8 8.67.87 11.41l-12.81 12.7c-1.22 1.34-3.51 1.4-5.3.14v-.01Z" fill="#B6BD73"></path>
+  <path d="m113.69 74.89-17.06-15.2c-1.77-1.58-1.85-4.37-.18-6.25l10.95-12.29c5.72-6.42 16.78-5.98 22.11-5.32 1.89.23 3.38 1.59 3.81 3.44 1.23 5.36 2.97 16.7-2.45 22.78l-10.95 12.29c-1.67 1.87-4.46 2.11-6.23.54v.01Z" fill="#5C4E6D"></path>
+  <path d="M52.62 124.75a2.357 2.357 0 0 1-.18-3.33l58.46-64.13a2.357 2.357 0 1 1 3.51 3.15l-58.46 64.13c-.87.97-2.36 1.05-3.33.18Z" fill="#000"></path>
+  <path d="M93.71 128.62H30.28c-5.998 0-10.86 4.862-10.86 10.86 0 5.998 4.862 10.86 10.86 10.86h63.43c5.998 0 10.86-4.862 10.86-10.86 0-5.998-4.862-10.86-10.86-10.86Z" fill="#B6BD73"></path>
+  <path d="M70.74 76.31c3.31-1.1 6.91.48 8.34 3.67l24.96 53.83c2.04 6.11-1.27 12.71-7.38 14.75-6.11 2.04-12.71-1.27-14.75-7.38L66.27 84.22a6.793 6.793 0 0 1 4.48-7.91h-.01Z" fill="#B6BD73"></path>
+  <path d="M51.81 110.06c.88-1.11 2.31-1.48 3.31-.86l11.49 6.09c1.69 1.35 4 4.12 1.48 7.25s-5.68 1.48-7.37.14l-9.01-9.21c-.82-.84-.77-2.31.11-3.41h-.01Z" fill="#B6BD73"></path>
+  <g class="snake__lantern">
+    <path d="M15.59 97.15c-4.75 0-8.61-3.86-8.61-8.61s3.86-8.61 8.61-8.61 8.61 3.86 8.61 8.61-3.86 8.61-8.61 8.61Zm0-13.93c-2.94 0-5.33 2.39-5.33 5.33s2.39 5.33 5.33 5.33 5.33-2.39 5.33-5.33-2.39-5.33-5.33-5.33Z" fill="#4C3E3B"></path>
+    <path d="M1.64 100.42h27.72c-1.49 9.51-2.98 19.02-4.47 28.52H6.12c-1.49-9.51-2.98-19.02-4.47-28.52h-.01Z" fill="#C0B19E"></path>
+    <path d="M1.56 101.19h27.88a1.53 1.53 0 0 0 1.53-1.53v-2.72a1.53 1.53 0 0 0-1.53-1.53H1.56a1.53 1.53 0 0 0-1.53 1.53v2.72c0 .845.685 1.53 1.53 1.53Z" fill="#332927"></path>
+    <path d="M13.69 102.4c.04-.34.45-.48.69-.24 2.74 2.81 5.67 6.8 5.1 10.96-.46 3.09-4.17 3.86-6.79 2.62-2.32-1.24-2.47-4.17-1.54-6.33.98-2.24 2.21-4.35 2.55-7.02l-.01.01Z" fill="#BF6B31" class="snake__lantern__flame"></path>
+    <path d="M12.01 116.86h6.88a3.24 3.24 0 0 1 3.24 3.24v6H8.77v-6a3.24 3.24 0 0 1 3.24-3.24Z" fill="#fff"></path>
+    <path d="M15.07 119.94c-.63 0-1.14-.51-1.14-1.14v-6.35a1.14 1.14 0 1 1 2.28 0v6.35c0 .63-.51 1.14-1.14 1.14Z" fill="#000"></path>
+    <path d="M4.74 130.35h21.51a2.05 2.05 0 0 0 2.05-2.05v-1.37a2.05 2.05 0 0 0-2.05-2.05H4.74a2.05 2.05 0 0 0-2.05 2.05v1.37a2.05 2.05 0 0 0 2.05 2.05Z" fill="#332927"></path>
+  </g>
+  <path d="M60.13 52.43c-2.88-4.88-8.15-8.46-13.82-9.95l-.84-.21c-3.64-.85-7.4-.91-10.73-.15-.27.06-.54.11-.81.18-5.59 1.33-13.39 4.99-16.13 17.95 0 0-7.51-5.12-13.18 1.19-4.46 4.94-2.8 14.79 5.36 19.61 13.6 8.03 15.65-3.44 22.2-7.95 6.55-4.51 24.36 4.28 28.79-5.04.1-.22.2-.45.3-.68 1.79-4.34 1.82-9.35-.76-14.25-.12-.23-.25-.46-.38-.69v-.01Z" fill="#B6BD73"></path>
+  <g class="snake__eye" clip-path="url(#eye)">
+    <path d="M35.95 67.23a8.44 8.44 0 1 0 0-16.88 8.44 8.44 0 0 0 0 16.88Z" fill="#fff"></path>
+    <path d="M48.65 61.253c1.184-3.26-.454-6.845-3.657-8.007-3.204-1.163-6.76.539-7.942 3.799-1.183 3.26.455 6.846 3.658 8.008 3.203 1.162 6.76-.54 7.942-3.8Z" fill="#000"></path>
+    <path d="M27.35 58.19c2.14 1.49 4.78 2.4 7.65 2.45 3.6.06 6.88-1.24 9.28-3.39-.66-3.9-4.09-6.91-8.28-6.97-4.61-.07-8.42 3.44-8.65 7.91Z" fill="#765480"></path>
+  </g>
+  <path d="M18.37 84.44c-2.67 0-5.73-.86-9.2-2.59-.57-.28-.8-.97-.52-1.53s.97-.8 1.53-.52c9.7 4.82 13.45 1.3 15.63-2.29 2.71-4.47 6.44-8.38 15.22-6.77 3.86.71 5.85-1.27 6.69-2.52 1.37-2.03 1.6-4.84.53-6.55-.34-.53-.18-1.24.36-1.58.53-.34 1.24-.18 1.58.36 1.55 2.46 1.31 6.27-.57 9.05-1.96 2.9-5.24 4.17-8.99 3.48-7.04-1.29-10.14 1.23-12.85 5.71-2.33 3.83-5.44 5.74-9.41 5.74v.01Z" fill="#000"></path>
+  <path d="M12.43 67.16c.65 2.38-.1 6.13-.1 6.13s-3.3-2.25-4.4-4.4c-1.1-2.14-1.02-4.42.72-5.12 1.74-.7 3.13 1 3.78 3.38v.01Z" fill="#000"></path>
+  <path d="M73.78 9.15c2.3 5.53 4.21 14.21 5.04 18.36.15.76-.76 1.28-1.34.75-3.23-2.95-9.96-9.42-12.94-14.51-3.99-6.81-4.49-10.76-.95-12.63 3.54-1.87 7.08.57 10.18 8.03h.01Z" fill="#765480"></path>
+  <path d="M30.03 35.01c-.26.64.06 1.37.7 1.62L68.61 57.4c.64.26 1.37-.06 1.62-.7.26-.64-.06-1.37-.7-1.62L31.65 34.31c-.64-.26-1.37.06-1.62.7Z" fill="#8475A2"></path>
+  <path d="M78.68 28.83 60.71 51.34 43.07 41.32l6.91-26.23c.37-1.4 1.92-2.12 3.22-1.5l24.66 11.72c1.34.64 1.74 2.36.81 3.52h.01Z" fill="#8475A2"></path>
+</svg>
+<svg class="page__feature tree-eyes" viewBox="0 0 137 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A purplish tree, bare of leaves. It has an angry-looking face with an open mouth with jagged teeth.</title>
+  <path d="M68.319 81.582c2.107-5.739 1.29-11.319-1.827-12.463-3.116-1.144-7.35 2.582-9.457 8.32-2.107 5.74-1.289 11.32 1.827 12.464 3.116 1.144 7.35-2.581 9.457-8.32Z" fill="#000"></path>
+  <path d="M87.325 89.379c3.085-1.225 3.756-6.825 1.5-12.507-2.257-5.682-6.587-9.295-9.672-8.07-3.085 1.225-3.756 6.825-1.5 12.507 2.257 5.682 6.587 9.295 9.672 8.07Z" fill="#000"></path>
+  <path d="M125.671 57.677c5.734-12.414-4.47-29.338-22.791-37.8-18.321-8.46-37.821-5.256-43.555 7.158-5.733 12.415 4.47 29.338 22.791 37.8 18.321 8.461 37.821 5.257 43.555-7.158Z" fill="#fff"></path>
+  <path d="M44.413 70.566c18.585-1.01 32.94-14.918 32.062-31.065-.877-16.147-16.654-28.418-35.239-27.408C22.652 13.103 8.297 27.01 9.175 43.158c.877 16.147 16.654 28.418 35.238 27.408Z" fill="#fff"></path>
+  <path d="M99.515 53.076c5.144-2.186 6.817-9.834 3.737-17.082-3.079-7.249-9.746-11.353-14.89-9.167-5.144 2.185-6.818 9.833-3.738 17.082 3.08 7.248 9.747 11.352 14.89 9.167Z" fill="#000"></path>
+  <path d="M61.655 43.438c3.18-7.578 1.297-15.594-4.208-17.904-5.505-2.311-12.546 1.959-15.727 9.536-3.18 7.578-1.296 15.594 4.209 17.904 5.504 2.311 12.545-1.959 15.726-9.536Z" fill="#000"></path>
+  <g class="tree__eye__eyelid tree__eye__eyelid--topright">
+    <path d="M61.73 27.08c.71 4.21 2.63 8.37 7.03 10.61 11.11 5.66 27.27.48 27.27.48l26.64-6.5" stroke="#000" stroke-width="2.92" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="m83.15 40.38 50.66-11.07L128.12.48l-69.8 15.24 1.96 9.92c2.06 10.44 12.3 17.04 22.86 14.73l.01.01Z" fill="#47394F"></path>
+  </g>
+  <g class="tree__eye__eyelid tree__eye__eyelid--topleft">
+    <path d="M52.31 29.88.3 30.57V1.28L71.95.33v10.08c0 10.61-8.79 19.33-19.64 19.47Z" fill="#47394F"></path>
+    <path d="M9.84 29.73h35.02s25.29 4.86 24.32-22.37" stroke="#000" stroke-width="2.92" stroke-linecap="round" stroke-linejoin="round"></path>
+  </g>
+</svg>
+<article class="content-block content-block--seven astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">TBD</h2>
+  <p id="TBD" class="astro-SCMHTS4H">Spooky Tree - N/A -- not shown</p>
+  <a href="#" target="_blank" rel="noopener" aria-describedby="TBD" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--eight astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">HTTP 203</h2>
+  <p id="HTTP-203" class="astro-SCMHTS4H">Unearth some scary good web platform tools &amp; ideas with Jake and his guests.</p>
+  <a href="https://www.youtube.com/watch?v=xl9R8aTOW_I&amp;list=PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9" target="_blank" rel="noopener" aria-describedby="HTTP-203" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="4" style="--index:3;" aria-label="page 3">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 3">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature gargoyle" viewBox="0 0 166 227" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A horned gargoyle squatting on a stone pedestal. It has fangs and a neutral expression. It is holding a trick-or-treating candy bag in the shape of a Jack O’ Lantern.</title>
+  <path d="M110.03 129.11H59.56c-4.03-20.09-8.06-40.18-12.09-60.28 24.53-7.05 50.11-7.05 74.64 0-4.03 20.09-8.06 40.18-12.09 60.28h.01Z" fill="#5A6578"></path>
+  <path opacity=".82" d="M59.69 78.2h20.03c2.84 0 5.14 2.31 5.14 5.14v4.04c0 8.13-6.6 14.73-14.73 14.73H59.68c-2.84 0-5.14-2.31-5.14-5.14V83.35c0-2.84 2.31-5.14 5.14-5.14l.01-.01Z" fill="#4E5967"></path>
+  <path opacity=".82" d="M109.34 102.1H98.89c-8.13 0-14.73-6.6-14.73-14.73v-4.04c0-2.84 2.31-5.14 5.14-5.14h20.03c2.84 0 5.14 2.31 5.14 5.14v13.62c0 2.84-2.31 5.14-5.14 5.14l.01.01Z" fill="#4E5967"></path>
+  <path class="gargoyle__wing gargoyle__wing--left" d="M1.92 6.61c10.02-3.94 35.96-11.36 59.05 5.51 4.27 3.12 6.41 8.36 5.64 13.59-1.23 8.41-1.73 22.09 5.66 31.03 2.72 3.29 1.64 8.26-2.17 10.18l-11.91 5.99c-3.39 1.71-7.55.1-8.83-3.48-1.95-5.44-6.52-12.14-17.23-13.23-1.05-.11-1.88-.94-2.02-1.99-.65-4.97-3.68-18.24-17.38-18.95a2.27 2.27 0 0 1-2.13-2.47c.44-4.86.21-15.74-9.17-22.2-1.5-1.03-1.21-3.33.49-3.99v.01Z" fill="#4B5663"></path>
+  <path class="gargoyle__wing gargoyle__wing--right" d="M164.07 5.87c-10.02-3.94-35.96-11.36-59.05 5.51-4.27 3.12-6.41 8.36-5.64 13.59 1.23 8.41 1.73 22.09-5.66 31.03-2.72 3.29-1.64 8.26 2.17 10.18l11.91 5.99c3.39 1.71 7.55.1 8.83-3.48 1.95-5.44 6.52-12.14 17.23-13.23 1.05-.11 1.88-.94 2.02-1.99.65-4.97 3.68-18.24 17.38-18.95a2.27 2.27 0 0 0 2.13-2.47c-.44-4.86-.21-15.74 9.17-22.2 1.5-1.03 1.21-3.33-.49-3.99v.01Z" fill="#4B5663"></path>
+  <path d="M113.65 84.18c-.34-10.28 18.22-14.14 24.42-5.08l.12.18c4.38 6.55 4.53 11.6.38 18.3l-9.3 16.15c-1.21 2.11-3.96 3.51-7 3.58-4.18.1-7.61-2.33-7.72-5.46l-.9-27.69v.02Z" fill="#72798C"></path>
+  <path d="m144.747 127.009-24.302-.938a3.704 3.704 0 0 1-3.555-3.84l.164-4.236a5.982 5.982 0 0 1 6.206-5.745l15.069.581c5.756.222 10.252 5.079 10.029 10.835a3.482 3.482 0 0 1-3.611 3.343Z" fill="#72798C"></path>
+  <path d="M141.4 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="M133.05 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="M125.54 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="M58.1 84.18c.34-10.28-18.22-14.14-24.42-5.08l-.12.18c-4.38 6.55-4.53 11.6-.38 18.3l9.3 16.15c1.21 2.11 3.96 3.51 7 3.58 4.18.1 7.61-2.33 7.72-5.46l.9-27.69v.02Z" fill="#72798C"></path>
+  <path d="m31.61 112.826 15.069-.581a5.982 5.982 0 0 1 6.206 5.744l.163 4.237a3.704 3.704 0 0 1-3.554 3.84l-24.302.938a3.483 3.483 0 0 1-3.612-3.343c-.222-5.756 4.274-10.613 10.03-10.835Z" fill="#72798C"></path>
+  <path d="M41.21 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="M32.85 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="M24.49 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"></path>
+  <path d="m55.87 175.13 8.54-21.67c1.68-4.25 5.78-7.05 10.35-7.05h15.83c4.89 0 9.2 3.19 10.63 7.86l6.33 20.6" stroke="#000" stroke-width="2.55" stroke-miterlimit="10" fill="none"></path>
+  <path d="M63.14 68.5c-3.02-14.21-23.28-14.38-26.49-.21l-.06.27c-1.51 6.93-.36 14.18 3.02 20.41l27.26 37.28a4.357 4.357 0 0 0 4.73 1.62 4.382 4.382 0 0 0 3.08-5.11L63.15 68.5h-.01Z" fill="#7A859A"></path>
+  <path d="M71.7 109.84c-2.49-10.9-18.05-10.88-20.48.03-.02.07-.03.15-.05.22-1.67 7.87-.44 13.22 4.61 19.37l11.61 14.97a6.245 6.245 0 0 0 11.02-5.22l-6.71-29.37Z" fill="#7A859A"></path>
+  <path d="M73.98 135.29c-3.62-2.2-9.28.36-11.75 4.42-2.47 4.06-2.64 10.72.98 12.92l2.49 1.66c2.14 1.43 6.27 1.15 7.87-1.38l4.72-7.47c1.84-3.07.13-7.45-2.49-9.04l-1.82-1.1v-.01Z" fill="#7A859A"></path>
+  <path d="M104.97 70.49c3.02-14.21 23.28-14.38 26.49-.21l.06.27c1.51 6.93.36 14.18-3.02 20.41l-27.26 37.28a4.357 4.357 0 0 1-4.73 1.62 4.382 4.382 0 0 1-3.08-5.11l11.53-54.26h.01Z" fill="#7A859A"></path>
+  <path d="M96.4 111.83c2.49-10.9 18.05-10.88 20.48.03.02.07.03.15.05.22 1.67 7.87.44 13.22-4.61 19.37l-11.61 14.97a6.245 6.245 0 0 1-11.02-5.22l6.71-29.37Z" fill="#7A859A"></path>
+  <path d="M94.13 137.28c3.62-2.2 9.28.36 11.75 4.42 2.47 4.06 2.64 10.72-.98 12.92l-2.49 1.66c-2.14 1.43-6.27 1.15-7.87-1.38l-4.72-7.47c-1.84-3.07-.13-7.45 2.49-9.04l1.82-1.1v-.01Z" fill="#7A859A"></path>
+  <path d="m109.3 50.71 3.95-22.68c.12-2.49-3.56-3.97-5.58-2.25L91.81 44.14s17.49 6.68 17.49 6.57Z" fill="#fff"></path>
+  <path d="m63.38 51.26-5.42-22.38c-.26-2.48 3.57-4.28 5.81-2.72l17.84 17.06s-18.22 8.15-18.24 8.04h.01Z" fill="#fff"></path>
+  <path d="M47.55 43.85c13.35 0 17.31 6.68 17.31 6.68l.25 15.83s-17.56-7.42-17.56-22.5v-.01Z" fill="#818EA0"></path>
+  <path d="M124.7 43.85c-13.35 0-17.31 6.68-17.31 6.68l-.25 15.83s17.56-7.42 17.56-22.5v-.01Z" fill="#818EA0"></path>
+  <path d="m62.38 53.47-1.83 14.61h51.13l-1.6-15.06s-4.68-16.09-24.31-16.09-23.4 16.55-23.4 16.55l.01-.01Z" fill="#818EA0"></path>
+  <path d="m79.64 42.63 13.56.07c3.79.02 7.18-2.63 7.82-6.37 0-.03 0-.05.01-.08.76-4.24-2.1-8.47-6.82-10.13-1.67-.59-3.14-1.64-4.09-3.13-2.59-4.07-7.14-6.51-11.74-5.73-7.07 1.19-10.26 8.96-7.77 16.55.6 1.94 1.44 3.7 2.43 5.24 1.43 2.24 3.94 3.57 6.6 3.58Z" fill="#818EA0"></path>
+  <path d="m111.85 70.32-2.68-7.28c-.86-2.33-4.16-2.32-5 .01l-2.64 7.29c-.04.1.04.21.15.21l10.02-.02c.11 0 .19-.11.15-.21Z" fill="#fff"></path>
+  <path d="m70.06 70.32-2.68-7.28c-.86-2.33-4.16-2.32-5 .01l-2.64 7.29c-.04.1.04.21.15.21l10.02-.02c.11 0 .19-.11.15-.21Z" fill="#fff"></path>
+  <path d="M60.82 67.59h50.61a2.88 2.88 0 0 1 2.88 2.88v4.38c0 3.36-2.73 6.09-6.09 6.09H64.03c-3.36 0-6.09-2.73-6.09-6.09v-4.38a2.88 2.88 0 0 1 2.88-2.88Z" fill="#576273"></path>
+  <path d="M95.77 44.91c-4.21 0-7.88 1.98-9.77 4.89-1.89-2.92-5.55-4.89-9.77-4.89-6.15 0-11.13 4.21-11.13 9.4s4.98 9.4 11.13 9.4c4.21 0 7.88-1.98 9.77-4.89 1.89 2.92 5.55 4.89 9.77 4.89 6.15 0 11.13-4.21 11.13-9.4s-4.98-9.4-11.13-9.4Z" fill="#fff"></path>
+  <path d="M76.11 59.37c3.004 0 5.44-1.939 5.44-4.33s-2.436-4.33-5.44-4.33c-3.004 0-5.44 1.939-5.44 4.33s2.436 4.33 5.44 4.33Z" fill="#23201F"></path>
+  <path d="M95.39 59.37c3.004 0 5.44-1.939 5.44-4.33s-2.436-4.33-5.44-4.33c-3.004 0-5.44 1.939-5.44 4.33s2.436 4.33 5.44 4.33Z" fill="#23201F"></path>
+  <path d="M95.62 44.38c-4.43 0-8.29 2.08-10.27 5.15-.91 1.41-1.43 3.02-1.43 4.74 0 .26.02.52.04.78h23.33c.02-.26.04-.52.04-.78 0-5.46-5.24-9.88-11.7-9.88l-.01-.01Z" fill="#576273"></path>
+  <path d="M76.38 44.38c-4.43 0-8.29 2.08-10.27 5.15-.91 1.41-1.43 3.02-1.43 4.74 0 .26.02.52.04.78h23.33c.02-.26.04-.52.04-.78 0-5.46-5.24-9.88-11.7-9.88l-.01-.01Z" fill="#576273"></path>
+  <path d="M93.01 70.98c-4.64.74-9.37.74-14.02 0-1.82-.29-2.92-2.18-2.3-3.91 1.55-4.34 3.49-9.76 4.5-12.6a2.957 2.957 0 0 1 2.79-1.96h4.03c1.25 0 2.37.79 2.79 1.96 1.02 2.85 2.95 8.26 4.5 12.6.62 1.73-.48 3.62-2.3 3.91h.01Z" fill="#72798C"></path>
+  <path d="M122.22 208.04c0-.78-.05-1.54-.14-2.31-.02-.26-.05-.52-.09-.78-3.23-9.63-9.7-18.23-10.9-28.35-.26-2.17-2.12-3.79-4.3-3.79h-50.2c-2.12 0-3.9 1.54-4.27 3.62-.37 2.08-1.17 4.23-1.84 6.4-3.34 8.48-8.74 15.94-9.51 25.2 0 4.59 1.71 8.95 4.62 12.16 4.62 4.84 10.64 6.06 16.91 6.11 12.66.24 25.26.5 37.91.13 6.53-.12 12.76-1.51 17.59-6.7 2.67-3.19 4.21-7.21 4.22-11.71v.02Z" fill="#CB7748"></path>
+  <path d="M94.64 179.51c-4.9-1.23-9.64-.34-12.49 1.98-.32.26-.79.26-1.11 0-2.85-2.33-7.59-3.21-12.49-1.98-7.04 1.76-11.74 7.21-10.5 12.17.77 3.07 3.64 5.24 7.38 6.02a.902.902 0 0 0 1.08-.91v-.05c0-2.56 2.13-4.63 4.76-4.63 2.15 0 3.97 1.39 4.55 3.3.16.54.79.78 1.28.51 1.5-.79 2.8-1.77 3.85-2.86.35-.36.94-.36 1.29 0 1.08 1.13 2.44 2.13 4.01 2.94.5.26 1.12 0 1.27-.53.56-1.94 2.39-3.37 4.57-3.37 2.63 0 4.76 2.07 4.76 4.63v.01c0 .58.52 1.03 1.09.91 3.65-.82 6.44-2.96 7.19-5.97 1.24-4.96-3.46-10.41-10.5-12.17h.01Z" fill="#000"></path>
+  <path d="M108.18 198.39c-3.71.71-9.77 1.81-13.46 2.19-.89.09-1.56.84-1.56 1.74v3.98c0 .96-.78 1.74-1.74 1.74h-3.45c-.96 0-1.74-.78-1.74-1.74v-3.33c0-.98-.8-1.77-1.78-1.74-2.49.06-4.99.04-7.48-.05-.98-.04-1.8.76-1.8 1.74v3.38c0 .96-.78 1.74-1.74 1.74h-3.45c-.96 0-1.74-.78-1.74-1.74v-4.18c0-.88-.66-1.63-1.54-1.73-3.81-.44-7.6-1.06-11.37-1.84-1.83-.38-3.49 1.17-3.21 3.02.88 5.84 4.03 16.34 15.38 16.34 2.72.26 5.45.45 8.18.56.99.04 1.82-.75 1.82-1.74v-3.33c0-.96.78-1.74 1.74-1.74h3.97c.96 0 1.74.78 1.74 1.74v3.36c0 .99.82 1.78 1.81 1.74 2.99-.1 5.98-.3 8.96-.59 12.7 0 15.22-10.92 15.66-16.68.14-1.76-1.45-3.16-3.18-2.83l-.02-.01Z" fill="#000"></path>
+</svg>
+
+
+
+
+<svg class="page__feature fox" viewBox="0 0 245 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A fox dressed in a purple wizard’s robes and hat, and holding a wand topped with a star. It conjures up blue smoke from a cauldron marked with a star symbol.</title>
+  <path d="m19.53 23.56 3.92.49-10.06 93.54s-.17 4.83-4.21 4.17c-4.04-.66-3.25-5.11-3.25-5.11l13.6-93.1v.01Z" fill="#DCB99B"></path>
+  <path d="m26.02 32.85-3.72-2.68c-.86-.62-2.05-.75-3.02-.34l-4.23 1.79c-2.08.88-4.5-.77-3.96-2.71l1.76-6.36c.17-.62.03-1.29-.39-1.84L8.17 15.1c-1.15-1.51-.03-3.46 2.04-3.55l5.83-.25c.95-.04 1.78-.5 2.21-1.2l2.69-4.44c1.12-1.86 4.4-1.49 5.08.57l1.63 4.93c.26.79.97 1.41 1.89 1.66l5.63 1.53c2 .55 2.67 2.7 1.21 3.92l-5.42 4.52c-.53.44-.81 1.06-.78 1.7l.31 6.59c.09 2.01-2.63 3.09-4.47 1.77Z" fill="#D288A9"></path>
+  <path d="M61.1 159.03c-5.51-1.14-16.48-2.72-25.55.3-1.61.54-2.64 2.45-2.16 4.03 1.52 4.55 4.88 14.08 13.87 21.44 8.03 6.39 17.94 10.67 25.69-2.15s-.71-21.39-11.85-23.63v.01Z" fill="#C07347"></path>
+  <path d="M56.44 157.44c-8.79-2.71-20.55-4.06-27.29-2.38-1.69.42-2.66 2.25-2.03 3.86 1.62 3.86 9.2 15.03 15.36 21.37 2.74 3.01 6.66 2.66 8.26.54.96-1.27.94-3.1.13-4.88 2.17.43 4.3-.14 5.58-1.71 1.81-2.21 1.26-5.64-1.15-8.02 2.37.26 4.46-.43 5.29-1.95 1.18-2.18.55-5.68-4.16-6.83h.01Z" fill="#DCB99B"></path>
+  <path d="M71.98 220.24c-7.53-1.42-5.9-8.57-5.9-8.57l2.96-49.39s1.12-15.39 14.68-12.84c13.56 2.55 9.25 16.45 9.25 16.45l-11.8 48.59s-1.66 7.18-9.19 5.76Z" fill="#C07347"></path>
+  <path d="m58.911 208.477 16.068-.62a6.385 6.385 0 0 1 6.621 6.129l.175 4.517a3.942 3.942 0 0 1-3.786 4.089l-25.91 1a3.709 3.709 0 0 1-3.85-3.565c-.237-6.135 4.556-11.314 10.692-11.55h-.01Z" fill="#C07347"></path>
+  <path d="M135.67 219.97c7.53-1.42 5.9-8.57 5.9-8.57l-2.96-49.39s-1.12-15.39-14.68-12.84c-13.56 2.55-9.25 16.45-9.25 16.45l11.8 48.59s1.66 7.18 9.19 5.76Z" fill="#C16B31"></path>
+  <path d="m155.681 223.316-25.911-1a3.941 3.941 0 0 1-3.785-4.089l.174-4.517a6.385 6.385 0 0 1 6.622-6.129l16.068.62c6.135.237 10.929 5.415 10.692 11.551a3.709 3.709 0 0 1-3.85 3.564h-.01Z" fill="#C16B31"></path>
+  <path d="M182.69 75.6a6.244 6.244 0 0 0-8.25-.69L148.63 94.1c-4.16 3.98-4.3 10.58-.32 14.74s10.58 4.3 14.74.32l20.02-25.35a6.254 6.254 0 0 0-.39-8.2l.01-.01Z" fill="#C07347"></path>
+  <path d="M184.28 84.16c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27-6.777 0-12.27 5.494-12.27 12.27 0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347"></path>
+  <path d="m167.48 121.81-14.44-33.83-31.09 19.89c-7.19 4.4-9.9 13.51-6.3 21.13a16.496 16.496 0 0 0 18.52 9.04l29.22-7.83c3.63-.97 5.56-4.93 4.08-8.39l.01-.01Z" fill="#7A6D8F"></path>
+  <path d="m151.691 85.843-.009.004a5.71 5.71 0 0 0-2.673 7.62l15.915 33.114a5.71 5.71 0 0 0 7.62 2.673l.009-.005a5.71 5.71 0 0 0 2.673-7.62l-15.915-33.114a5.71 5.71 0 0 0-7.62-2.672Z" fill="#5A4D6D"></path>
+  <path d="M14.42 99.76a6.26 6.26 0 0 1 8.04-1.98l28.49 14.91c4.73 3.28 5.91 9.78 2.63 14.51-3.28 4.73-9.78 5.91-14.51 2.63l-23.75-21.9c-2.29-2.12-2.68-5.6-.9-8.16v-.01Z" fill="#C07347"></path>
+  <path d="M13.15 106.3c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27C6.373 81.76.88 87.253.88 94.03c0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347"></path>
+  <path d="m38.73 143.24 1.85-37.83 36.06 7.86c8.27 1.63 13.98 9.23 13.24 17.63-.68 7.69-6.59 13.88-14.23 14.9l-31.21 2.9c-3.17.29-5.86-2.28-5.7-5.46h-.01Z" fill="#7A6D8F"></path>
+  <path d="m44.198 102.671-.01-.001a5.71 5.71 0 0 0-6.048 5.351l-2.243 36.671a5.71 5.71 0 0 0 5.351 6.048l.01.001a5.71 5.71 0 0 0 6.048-5.351l2.243-36.671a5.71 5.71 0 0 0-5.35-6.048Z" fill="#5A4D6D"></path>
+  <path d="m148.12 198.89-85.77 1.77c-2.69.06-4.76-2.37-4.27-5.02l10.08-88.79c2.34-15.1 14.95-26.5 30.21-27.3 15.42-.81 29.25 9.42 32.99 24.39l20.78 89.57c.73 2.67-1.25 5.32-4.02 5.38Z" fill="#7A6D8F"></path>
+  <path d="M106.16 126.046c15.933-3.065 27.47-12.725 25.767-21.576-1.703-8.851-16-13.541-31.934-10.476-15.934 3.066-27.47 12.726-25.768 21.577 1.703 8.851 16 13.541 31.935 10.475Z" fill="#5A4D6D"></path>
+  <path d="M158.34 196.41v-.01a5.71 5.71 0 0 0-5.71-5.71H56.31a5.71 5.71 0 0 0-5.71 5.71v.01a5.71 5.71 0 0 0 5.71 5.71h96.32a5.71 5.71 0 0 0 5.71-5.71Z" fill="#5A4D6D"></path>
+  <path d="M128.72 149.19c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"></path>
+  <path d="M120.93 166.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"></path>
+  <path d="M145.69 145.21c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"></path>
+  <path d="M158.31 131.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"></path>
+  <path d="M145.85 159.49c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"></path>
+  <path d="M157.69 155.95c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"></path>
+  <path d="M178.95 122.82c9.278 0 16.8-7.799 16.8-17.42 0-9.62-7.522-17.42-16.8-17.42s-16.8 7.8-16.8 17.42c0 9.621 7.522 17.42 16.8 17.42Z" fill="#9DB1CE"></path>
+  <path d="M194.58 144.32c10.979 0 19.88-9.232 19.88-20.62 0-11.388-8.901-20.62-19.88-20.62s-19.88 9.232-19.88 20.62c0 11.388 8.901 20.62 19.88 20.62Z" fill="#9DB1CE"></path>
+  <path d="M198.44 107.27c6.556 0 11.87-5.511 11.87-12.31 0-6.798-5.314-12.31-11.87-12.31-6.556 0-11.87 5.511-11.87 12.31s5.314 12.31 11.87 12.31Z" fill="#9DB1CE"></path>
+  <path d="M212.04 122c7.76 0 14.05-6.519 14.05-14.56s-6.29-14.56-14.05-14.56c-7.76 0-14.05 6.519-14.05 14.56S204.28 122 212.04 122Z" fill="#9DB1CE"></path>
+  <path d="M232.05 114.9c6.633 0 12.01-5.574 12.01-12.45 0-6.876-5.377-12.45-12.01-12.45s-12.01 5.574-12.01 12.45c0 6.876 5.377 12.45 12.01 12.45Z" fill="#9DB1CE"></path>
+  <path d="M219.19 105.93c7.158 0 12.96-6.017 12.96-13.44 0-7.423-5.802-13.44-12.96-13.44-7.158 0-12.96 6.017-12.96 13.44 0 7.423 5.802 13.44 12.96 13.44Z" fill="#9DB1CE"></path>
+  <path d="M171.96 144.77c8.82 0 15.97-7.414 15.97-16.56 0-9.146-7.15-16.56-15.97-16.56s-15.97 7.414-15.97 16.56c0 9.146 7.15 16.56 15.97 16.56Z" fill="#9DB1CE"></path>
+  <path d="M183.61 196.02c.2-12.2-5.49-25.62-14.82-35.6h3.97c1.51 0 2.73-1.22 2.73-2.73v-4.85c0-1.51-1.22-2.73-2.73-2.73H99.89c-1.51 0-2.73 1.22-2.73 2.73v4.85c0 1.51 1.22 2.73 2.73 2.73h3.97c-9.33 9.97-15.01 23.4-14.82 35.6.14 10.93 4.74 18.22 12.26 22.91l-1.56 6.4a4.58 4.58 0 0 0 8.42 3.37l3.12-5.42c7.25 2.14 15.83 3.02 25.05 3.07 8.53-.05 16.5-.8 23.39-2.61l3.5 5.23a4.584 4.584 0 0 0 8.17-3.95l-1.64-5.15c8.46-4.63 13.72-12.16 13.86-23.85Z" fill="#050505"></path>
+  <path d="M140.24 204.1c-8.66 0-15.68-7.02-15.68-15.68s6.99-15.66 15.64-15.68c1.05 0 2.07.1 3.06.29.55.11.82-.65.32-.91a18.723 18.723 0 0 0-8.54-2.06c-10.19 0-18.58 8.21-18.78 18.39-.21 10.54 8.28 19.16 18.77 19.16 3.38 0 6.54-.89 9.28-2.45.79-.45.32-1.65-.56-1.45-1.13.26-2.3.39-3.51.39Z" fill="#63594E"></path>
+  <path d="M36.63 42.37c7.3-.08 14.01 1.22 19.84 3.65.49.2.97.41 1.44.63 6.84 3.11 13.26 7.63 16.14 14.58 3.42 9.92-6.74 22.78-17.31 20.34-8.61-2.29-13.81-11-17.01-18.94-.18-.49-.36-.98-.52-1.48-1.84-5.49-2.79-11.81-2.58-18.78Z" fill="#050505"></path>
+  <path d="M54.59 51.23c-.4.55-.48 1.18-.31 1.86-3.94-.97-7.22-.63-7.82 1.79-.54 2.22 1.62 4.21 4.91 5.45-2.87 1.3-4.26 3.49-3.45 6.04 1.01 3.14 4.63 4.2 8.78 2.82-.93 2.02-.85 3.89.81 5 2.49 1.66 5.65-.29 7.59-3.67l3.03-9.22c.29-1.19-.09-2.45-.99-3.31-1.39-1.33-5.27-4.81-5.27-4.81s-5.57-4.4-7.27-1.94l-.01-.01Z" fill="#fff"></path>
+  <path d="M127.91 20.6c-6.5 3.33-11.83 7.6-15.86 12.47-.34.41-.66.82-.98 1.23-4.61 5.93-8.18 12.93-7.5 20.42 1.59 10.37 16.57 17.02 24.79 9.94 6.56-6.04 7.1-16.16 6.24-24.68-.06-.51-.14-1.03-.22-1.55-.93-5.72-3.04-11.75-6.46-17.82l-.01-.01Z" fill="#050505"></path>
+  <path d="M117.4 35.93c.6.31.96.85 1.11 1.53 3.1-2.61 6.19-3.77 7.8-1.87 1.47 1.74.42 4.49-1.97 7.06 3.15-.11 5.37 1.23 5.77 3.88.49 3.27-2.28 5.82-6.61 6.43 1.73 1.4 2.49 3.1 1.5 4.84-1.49 2.59-5.19 2.25-8.43.08l-6.81-6.91c-.79-.94-1.01-2.23-.58-3.41.66-1.81 2.58-6.65 2.58-6.65s3.03-6.42 5.65-4.97l-.01-.01Z" fill="#fff"></path>
+  <path d="M106.35 113.27c56.32-14.69 35.96-57.21 35.96-57.21L40.46 81.21s.59 45.93 65.89 32.06Z" fill="#DCB99B"></path>
+  <path d="M93.67 67.89c-2.44 3.24-3.42 6.5-2.47 9.34 2.51 7.55 17.87 14.24 34.02 8.87 18.55-6.65 17.03-30.32 17.03-30.32s-23.89 5.98-48.58 12.12v-.01Z" fill="#C07347"></path>
+  <path d="M40.46 81.22c-.18.04 9.32 16.22 30.17 15.3 20.85-.92 30.76-14.49 29.66-22.37-.35-2.52-1.78-5.66-4.51-7.37-24.97 6.21-51.62 13.7-55.31 14.44h-.01Z" fill="#C07347"></path>
+  <path d="M51.96 81.95c-2.51-15.2 9.1-34.04 31.26-39.24 22.17-5.2 44.16 4.16 49.27 18.5L51.95 81.95h.01Z" fill="#C07347"></path>
+  <path d="M112.12 43.97 55.91 63.54l6.63-59.05c.37-3.25 4.34-4.67 6.68-2.39l42.9 41.87Z" fill="#7A6D8F"></path>
+  <path d="M26.89 74.07c.37 1 1.48 1.5 2.48 1.13l115.68-43.52c1-.37 1.5-1.48 1.13-2.48-.37-1-1.48-1.5-2.48-1.13L28.02 71.59c-1 .37-1.5 1.48-1.13 2.48Z" fill="#7A6D8F"></path>
+  <path d="M84.51 94.55s2.15 10.04 15.46 7.29c13.31-2.75 10.28-13.59 10.28-13.59s-9.9.06-14.64-3.71c-2.75 7.18-11.09 10.01-11.09 10.01h-.01Z" fill="#050505"></path>
+  <path d="M92.03 99.46c.35-2.16 4.26-4.02 7.55-2.1.89-2.07 5.56-3.53 6.92-1.65.33 3.1-13.2 6.17-14.47 3.75Z" fill="#D288A9"></path>
+  <path d="m85.66 93.45 6.75-4.91 1.42 6.35c.12 1.1-1.61 2.19-2.94 1.37l-5.22-2.82-.01.01Z" fill="#fff"></path>
+  <path d="m99.46 86.09 8.28 2.45-2.74 3.89c-.38 1.54-2.52 1.83-3.15.43l-2.38-6.78-.01.01Z" fill="#fff"></path>
+  <path d="M79.53 96.21c-.67 0-1.22-.54-1.22-1.22 0-.68.54-1.23 1.22-1.23 6.94-.04 13.08-4.73 14.27-10.93l.43-2.21 1.62 1.55c2.99 2.87 12.14 7.22 19.73 4.3a1.223 1.223 0 0 1 .88 2.28c-7.65 2.94-16.4-.44-20.77-3.56-2.19 6.36-8.79 10.97-16.16 11.01v.01Z" fill="#050505"></path>
+  <path d="M105 53.93c-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-5.97-2.15-13.1 2.89-16.16 11.33-.08.22-.15.44-.23.66-2.88 7.62-.95 20.62 9.44 19.84 7.31-.3 11.59-7.04 13.26-13.63.07-.3.14-.6.2-.9.06-.3.12-.6.17-.89 3.68 3.72 9.92 6.07 16.88 5.83 10.84-.37 19.33-6.85 18.95-14.47-.38-7.63-9.48-13.51-20.32-13.15Z" fill="#fff"></path>
+  <path d="M119.31 57.48c-3.75-2.96-8.91-5.21-15.02-5-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-6.12-2.21-13.46 3.16-16.39 11.99-.79 2.38-1.17 4.77-1.2 7.03 3.76-1.84 5.36-10.18 12.69-12.78 8.79-4.32 9.62 4.97 11.73 4.13 2.28-.91.78-7.79 13.62-10.21 5.37-1.01 10.93 1.68 16.76-.53v-.01Z" fill="#D288A9"></path>
+  <path d="M83.744 75.279c.835-3.77-.372-7.242-2.696-7.757-2.324-.515-4.885 2.123-5.72 5.892-.835 3.77.373 7.242 2.697 7.757 2.324.515 4.884-2.123 5.72-5.892Z" fill="#050505"></path>
+  <path d="M110.619 70.832c1.292-2.044-.301-5.372-3.56-7.431-3.258-2.06-6.948-2.073-8.24-.028-1.293 2.045.3 5.372 3.559 7.432 3.259 2.06 6.948 2.072 8.241.027Z" fill="#050505"></path>
+  <path d="M124.79 54.21c-.44-.55-1.21-.65-1.71-.21-1.11.97-2.34 1.7-3.6 2.22.95-.76 1.83-1.62 2.62-2.62 1-1.37-1.06-3-1.98-1.57a14.35 14.35 0 0 1-3.31 3.6c.84-.91 1.57-1.94 2.14-3.11.69-1.56-1.6-2.71-2.22-1.12-.54 1.48-1.55 2.86-2.74 3.99-.77.72-1.64 1.34-2.57 1.84-21.09-2.3-23.69 10.03-23.79 10.57-.13.68.29 1.37.94 1.54.1.03.2.04.29.04.54 0 1.02-.38 1.14-.96.09-.45 2.45-10.93 21.91-8.58 1.73.21 7.73.55 12.75-3.83.5-.44.55-1.24.11-1.8h.02Z" fill="#050505"></path>
+  <path d="M89.81 67.36c-.11-.23-2.72-5.62-7.9-6.09-4.34-.39-8.94 2.82-13.7 9.54-1.28.69-2.7 1.13-4.15 1.33-1.67.22-3.4.14-4.89-.37-1.63-.52-2.3 1.99-.65 2.44 1.38.31 2.77.38 4.13.27-1.48.29-3 .38-4.47.21-1.71-.18-1.86 2.45-.14 2.53.92 0 1.81-.07 2.69-.2-1.24.3-2.57.37-3.98.19-.69-.09-1.29.41-1.37 1.1-.08.69.42 1.33 1.1 1.41.73.09 1.45.13 2.15.11 4.34-.1 8.06-2.3 10.83-6.43 4.44-6.6 8.67-9.92 12.24-9.62 3.73.33 5.82 4.56 5.86 4.64.3.63 1.05.91 1.66.61.62-.3.87-1.05.57-1.68l.02.01Z" fill="#050505"></path>
+  <path d="M103.9 76.27c.87 3.45-8.67 8.86-8.67 8.86s-10.87-.28-11.74-3.73c-.87-3.45 3-7.39 8.64-8.81 5.64-1.42 10.91.23 11.77 3.68Z" fill="#050505"></path>
+</svg>
+<canvas class="wand-canvas"></canvas><article class="content-block content-block--nine astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H"><abbr title="Graphic User Interface">GUI</abbr> Challenges</h2>
+  <p id="<abbr-title='Graphic-User-Interface'>GUI</abbr>-Challenges" class="astro-SCMHTS4H">Join Adam and learn how to approach your most ghoulish UI challenges.</p>
+  <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ" target="_blank" rel="noopener" aria-describedby="<abbr-title='Graphic-User-Interface'>GUI</abbr>-Challenges" class="astro-SCMHTS4H">Read more</a>
+</article><article class="content-block content-block--ten astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">New in DevTools</h2>
+  <p id="New-in-DevTools" class="astro-SCMHTS4H">Debugging is magical in this helpful video series.</p>
+  <a href="https://www.youtube.com/watch?v=5gBqTXctxO8&amp;list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD&amp;index=1" target="_blank" rel="noopener" aria-describedby="New-in-DevTools" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 4">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img src="/third_party/chrometober-2022/assets/Shelves.685778f6.svg" class="page__feature shelves" alt="A blue bookshelf holding a few books. Other items on its shelves include a detached bat wing, a fish skeleton, a large pair of scissors, and a dung beetle in a glass bell jar." width="118" height="150">
+<article class="content-block content-block--eleven astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Learn <abbr title="Hyper Text Markup Language">HTML</abbr></h2>
+  <p id="Learn-<abbr-title='Hyper-Text-Markup-Language'>HTML</abbr>" class="astro-SCMHTS4H">Everything has its place in HTML. Learn how to choose the right semantic elements.</p>
+  <a href="https://web.dev/learn/html" target="_blank" rel="noopener" aria-describedby="Learn-<abbr-title='Hyper-Text-Markup-Language'>HTML</abbr>" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="5" style="--index:4;" aria-label="page 4">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 4">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature ghost" viewBox="0 0 140 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A white ghost emerging through the closed door of a refrigerator. It has a small black bowler hat floating just above its head. It is holding groceries stolen from the fridge.</title>
+  <path class="ghost__body" d="M139.53 74.68c-.32 49.02-23.54 85.46-65.46 95.78 0 0-49.14 11.31-71.61-12.94a5.729 5.729 0 0 1-1.52-3.89c-.03-4.34 4.55-7.19 8.41-5.21 5.23 2.68 12.63 4.92 21.51 3.33 18.06-3.22 24.19-33.54 8.06-51.28C22.8 82.73 16.35 41.78 68.27 27.91c20.96-5.16 71.59-2.26 71.27 46.76l-.01.01Z" fill="#fff"></path>
+  <path class="ghost__body" d="M65.55 28.1C63.29 8.75 78.62.79 90.06.37c11.44-.42 16.53 9.96 18.66 15.35 1.28 3.26 2.94 6.6 5.9 8.46 3.41 2.13 7.91 1.78 11.59.15 1.78-.79 3.49-1.87 5.43-2 3.16-.22 6.1 2.38 6.82 5.47.72 3.09-.5 6.41-2.61 8.78-2.11 2.37-5.01 3.9-8 4.97-12.26 4.41-26.89 1.34-36.35-7.63l-25.96-5.81.01-.01Z" fill="#fff"></path>
+  <path d="M112.81 53.36c-8.85-3.69-17.94-2.92-22.57 1.4-5-6.94-16.51-9.01-27.43-4.45-12.21 5.1-19.06 16.54-15.29 25.55 3.76 9.01 16.71 12.19 28.92 7.09 6.5-2.71 11.48-7.23 14.15-12.22 2.61 3.38 6.57 6.42 11.44 8.45 10.79 4.51 21.95 2.37 24.93-4.76 2.98-7.13-3.36-16.57-14.15-21.07v.01Z" stroke="#000" stroke-width="2.41" stroke-miterlimit="10" stroke-linecap="round" fill="#FFF"></path>
+  <path d="M112.863 70.187c1.693-2.932-.936-7.619-5.872-10.468-4.936-2.85-10.31-2.784-12.003.148-1.692 2.932.937 7.62 5.873 10.469 4.936 2.85 10.309 2.783 12.002-.149Z" fill="#000"></path>
+  <path d="M81.376 71.044c4.508-3.488 6.107-8.971 3.572-12.247-2.534-3.276-8.243-3.105-12.751.383-4.508 3.488-6.108 8.971-3.573 12.247 2.535 3.276 8.244 3.105 12.752-.383Z" fill="#000"></path>
+  <path d="M84.29 43.9c-.3 0-.61-.11-.84-.34-9.02-8.76-18.85-1.43-19.26-1.11-.53.4-1.28.3-1.69-.23a1.2 1.2 0 0 1 .23-1.69c.12-.09 11.91-8.9 22.4 1.3.48.46.49 1.23.02 1.7-.24.24-.55.36-.86.36v.01Z" fill="#000"></path>
+  <path d="M118.98 53.28c-.27 0-.55-.09-.78-.28-9.73-8.21-22.14-5.82-22.26-5.79-.65.13-1.29-.29-1.42-.94-.13-.65.29-1.29.94-1.42.55-.11 13.65-2.67 24.3 6.31.51.43.57 1.19.14 1.7-.24.28-.58.43-.92.43v-.01Z" fill="#000"></path>
+  <path d="M60.4 94.47c-16.64 0-20.28-14.8-20.31-14.96-.15-.65.25-1.3.9-1.45a1.2 1.2 0 0 1 1.44.9c.14.58 3.56 14.25 20.01 13.01 9.2-.69 12.96-2.24 16.94-3.88 3.52-1.45 7.17-2.95 14.62-3.75 7.97-.86 12.82.18 17.1 1.1 4.08.87 7.31 1.57 12.16.32 9.1-2.34 7.87-10.89 7.81-11.26-.1-.66.35-1.27 1-1.38.66-.1 1.27.34 1.38 1 .62 3.82-.59 11.66-9.59 13.97-5.41 1.39-9.05.61-13.27-.29-4.1-.88-8.75-1.88-16.34-1.06-7.11.76-10.43 2.13-13.96 3.58-3.98 1.64-8.09 3.34-17.68 4.05-.77.06-1.51.08-2.23.08l.02.02Z" fill="#000"></path>
+  <path d="m114.57 92.23-17.2 6.47c-.84.32-1.39 1.21-1.33 2.2l.02.41c.06 1 .73 1.84 1.62 2.03l18.01 3.92c1.3.28 2.47-.87 2.35-2.31l-.83-10.79c-.11-1.43-1.42-2.37-2.65-1.91l.01-.02Z" fill="#8F2828"></path>
+  <path d="m77.07 110.27 17.8-6.88c.57-.22.94-.85.9-1.53l-.08-1.42c-.04-.7-.49-1.28-1.1-1.42L75.92 94.8c-.88-.2-1.67.6-1.59 1.61l.96 12.51c.08 1 .96 1.66 1.8 1.34l-.02.01Z" fill="#8F2828"></path>
+  <path d="M101.943 101.061c.031-2.882-2.554-5.247-5.774-5.281-3.22-.035-5.854 2.275-5.885 5.157-.03 2.883 2.554 5.248 5.774 5.282 3.22.034 5.855-2.275 5.885-5.158Z" fill="#BF3D3D"></path>
+  <path d="M54.2 20.48c-3.26-6.09-11.05-9.32-18.37-9.03-10.24.4-16.93 8.32-16.53 18.66.18 4.48 1.48 8.95 4.62 11.65 23.73-6.39 30.27-21.28 30.27-21.28h.01Z" fill="#000"></path>
+  <path d="M20.33 37.75c.64 1.06 1.69 2.68 2.58 3.44 24.26-6.8 30.85-22.39 30.85-22.39-.4-.75-.86-1.45-1.38-2.11a.824.824 0 0 0-1.29 0c-2.63 3.23-13.48 15.48-30.24 19.77a.87.87 0 0 0-.53 1.29h.01Z" fill="#8F2828"></path>
+  <path d="M14.21 44.32c-.44 0-.82-.33-.87-.78-.06-.48.29-.92.77-.98.33-.04 33.21-4.23 43.4-31.94.17-.46.67-.69 1.13-.52.46.17.69.67.52 1.13-10.57 28.73-44.5 33.04-44.85 33.08h-.1v.01Z" fill="#000"></path>
+  <path d="m124.03 92.8-7.77-1.63c-.81-.17-1.55.48-1.51 1.31.35 7.37-7.42 8.6-10.24 8.8-.59.04-1.07.49-1.15 1.08l-4.05 29.4c-.09.65.34 1.26.98 1.4l21.47 4.51c.64.14 1.28-.25 1.46-.88l8.12-28.54c.16-.57-.1-1.18-.62-1.45-2.51-1.32-9.12-5.57-5.84-12.18.37-.74-.04-1.64-.85-1.81v-.01Z" fill="#99A4BD"></path>
+  <path d="m121.37 95.09-3.59-.75c-.64-.13-1.1-.7-1.09-1.36l-.04-5.19c.01-.86.81-1.5 1.65-1.32l5.75 1.21c.84.18 1.32 1.08.98 1.88l-2.13 4.74c-.26.6-.9.94-1.54.81l.01-.02Z" fill="#AB7B39"></path>
+  <path d="M126.02 119.03c-.39 1.88-1.45 4.83-2.2 6.82a2.626 2.626 0 0 1-3 1.64l-16.2-3.4a2.63 2.63 0 0 1-2.08-2.77c.11-1.45.4-3.69 1.09-6.99 1.51-7.17 7.74-11.92 13.92-10.62 6.19 1.3 9.98 8.16 8.47 15.33v-.01Z" fill="#AB7B39"></path>
+  <path d="M67.54 114.67c-.24 1.55.18 3.08 1.02 4.19-.77.81-1.29 1.97-1.36 3.34-.1 2.25 1.16 4.37 3 5.06 1.3.48 2.72-.59 3.77-1.7 1.14-1.21 2.69-1.73 4.22-1.38l13.64 3.15.98-6.44-13.86-3.45c-1.78-.44-3.28-1.84-4.1-3.76-.56-1.3-1.37-2.59-2.44-2.85-2.28-.55-4.46 1.17-4.87 3.83v.01Z" fill="#FFA8A8"></path>
+  <path d="M112.25 110.54c-.75-.11-1.52-.2-2.3-.27-12.07-.94-22.38 5.08-23.03 13.45-.65 8.37 8.6 15.91 20.67 16.86.41.03.81.05 1.22.07l3.45-30.11h-.01Z" fill="#C44D4D"></path>
+  <path d="M121.397 127.217c1.376-8.191-2.188-15.618-7.961-16.589-5.773-.97-11.57 4.884-12.946 13.075-1.377 8.192 2.187 15.619 7.96 16.589 5.774.971 11.57-4.883 12.947-13.075Z" fill="#CF7272"></path>
+  <path d="M115.174 126.082c.335-2.48-.867-4.688-2.684-4.934-1.817-.245-3.561 1.566-3.896 4.045-.335 2.48.867 4.689 2.684 4.934 1.817.245 3.562-1.566 3.896-4.045Z" fill="#FFA8A8"></path>
+  <path d="M94.27 138.82c5.644 0 10.22-4.576 10.22-10.22 0-5.644-4.576-10.22-10.22-10.22-5.644 0-10.22 4.576-10.22 10.22 0 5.644 4.576 10.22 10.22 10.22Z" fill="#80655D"></path>
+  <path d="M92.04 122.11h-2.72a.71.71 0 0 0-.71.71v2.72c0 .392.318.71.71.71h2.72a.71.71 0 0 0 .71-.71v-2.72a.71.71 0 0 0-.71-.71Z" fill="#000"></path>
+  <path d="m99.946 126.197-1.445.319a1.33 1.33 0 0 0-1.012 1.586l.559 2.529a1.33 1.33 0 0 0 1.585 1.012l1.446-.32a1.329 1.329 0 0 0 1.011-1.585l-.559-2.529a1.329 1.329 0 0 0-1.585-1.012Z" fill="#000"></path>
+  <path d="m98.652 124.442-.192-2.172a.571.571 0 0 0-.618-.518l-2.171.192a.57.57 0 0 0-.518.618l.192 2.171a.57.57 0 0 0 .618.518l2.171-.191a.57.57 0 0 0 .518-.618Z" fill="#000"></path>
+  <path d="m94.03 130.345-.493-1.564a1.54 1.54 0 0 0-1.932-1.006l-2.976.939a1.539 1.539 0 0 0-1.005 1.931l.493 1.564a1.54 1.54 0 0 0 1.932 1.006l2.975-.938a1.54 1.54 0 0 0 1.006-1.932Z" fill="#000"></path>
+  <path d="m98.662 134.933-.191-2.171a.57.57 0 0 0-.618-.518l-2.172.191a.57.57 0 0 0-.517.618l.191 2.172a.57.57 0 0 0 .618.518l2.171-.192a.57.57 0 0 0 .518-.618Z" fill="#000"></path>
+  <path class="ghost__body" d="M108.39 133.37s-20.64-2.61-21.73 7.03c-1.08 9.64 17.39 10.21 17.39 10.21s23.37 4.29 29.3-12.55c4.21-11.47 1.39-19.35-3.52-20.66l-7.86 9.61a17.348 17.348 0 0 1-13.59 6.36h.01Z" fill="#fff"></path>
+  <path d="M63.92 138.12H50.45c-.2 0-.37-.16-.38-.36-.62-13.21-1.25-26.42-1.87-39.63-.08-1.79 1.35-3.3 3.14-3.3h11.54c.21 0 .38.17.38.37.34 14.17.69 28.35 1.03 42.52 0 .21-.17.39-.38.39l.01.01Z" fill="#805F80"></path>
+  <path d="M85.71 138.12H59.32l-.99-39.99a3.213 3.213 0 0 1 3.21-3.29h26.42c1.6 0 2.88 1.34 2.81 2.94-.58 12.4-1.17 24.79-1.75 37.19a3.311 3.311 0 0 1-3.31 3.16v-.01Z" fill="#A37589"></path>
+  <path d="M81.93 129.18H66.3c-1.5 0-2.72-1.19-2.76-2.69l-.71-24.82a2.937 2.937 0 0 1 2.94-3.02h16.7c1.66 0 2.98 1.37 2.94 3.02l-.71 24.82a2.764 2.764 0 0 1-2.76 2.69h-.01Z" fill="#D49FC4"></path>
+  <path d="M74.52 107.87c3.96 0 7.18 3.22 7.18 7.18v8.68c0 1.63-1.32 2.95-2.95 2.95H70.3c-1.63 0-2.95-1.32-2.95-2.95v-8.68c0-3.96 3.22-7.18 7.18-7.18h-.01Z" fill="#A37589"></path>
+  <path d="M74.52 112.41a5.67 5.67 0 1 0 0-11.34 5.67 5.67 0 0 0 0 11.34Z" fill="#805F80"></path>
+  <path d="M55.73 133.82h-2.6c-1.08 0-1.97-.87-2.01-1.95l-1.03-31.11c-.04-1.14.88-2.09 2.02-2.09h2.6c1.08 0 1.97.87 2.01 1.95l1.03 31.11c.04 1.14-.88 2.09-2.02 2.09Z" fill="#B07FA4"></path>
+  <path class="ghost__body" d="M47.4 113.14s-8.75 5.59-8.75 13.76c0 14.83 26.77 19.35 26.77 19.35s14.51 3.87 16.45-3.22c1.93-9.03-15.8-15.8-15.8-15.8s-14.78-5.95-18.66-14.08l-.01-.01Z" fill="#fff"></path>
+</svg>
+
+
+<svg class="page__feature spider" viewBox="0 0 159 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A friendly-looking spider in a janitor’s uniform, complete with a hat. It is standing up on two of its eight legs and sweeping the floor with two more.</title>
+  <path d="M83.96 132.05c22.92 0 41.5-18.397 41.5-41.09 0-22.693-18.58-41.09-41.5-41.09s-41.5 18.397-41.5 41.09c0 22.693 18.58 41.09 41.5 41.09Z" fill="#3C4151"></path>
+  <path d="M127.05 89.82c-.55-6.42-2.71-12.34-6.07-17.45-3.94 5.97-10.68 13.6-21.76 19.83-21.65 12.17-56.49 4.72-56.72 4.67v.04l.56 4.08c3.83 19.8 23.19 33.86 45.11 31.98 23.35-2 40.75-21.32 38.88-43.15Z" fill="#567097"></path>
+  <path d="M110.66 93.86c-4.88-11.83-13.72-19.5-20.27-23.84l4.54-6.85c7.51 4.98 17.65 13.8 23.32 27.56l-7.6 3.13h.01Z" fill="#567097"></path>
+  <path d="M68.64 108.32c-.68-7.63-3.17-15.17-7.4-22.41l7.09-4.15c4.85 8.29 7.71 16.98 8.5 25.83l-8.19.73Z" fill="#567097"></path>
+  <path d="M71.12 107.19a2.82 2.82 0 1 0 0-5.64 2.82 2.82 0 0 0 0 5.64Z" fill="#2E4F80"></path>
+  <path d="M113.44 93.01a2.82 2.82 0 1 0 0-5.64 2.82 2.82 0 0 0 0 5.64Z" fill="#2E4F80"></path>
+  <path d="M104.38 94.48c-4.01 2.18-11.5 5.49-22.24 7.18-1.58.25-2.64 1.72-2.35 3.25l2.32 12.18c.13.69.53 1.31 1.11 1.74 2.3 1.67 8.55 5.62 14.33 4.08 6.07-1.61 11.33-10.43 12.88-13.27.3-.55.41-1.19.29-1.81l-2.14-11.39c-.35-1.88-2.5-2.88-4.21-1.95l.01-.01Z" fill="#2E4F80"></path>
+  <path d="M108.92 162.65a1.114 1.114 0 0 1-.76-1.93c4.22-3.97 6.75-9.24 8.99-14.3 2.44-5.52 3.08-11.38 1.8-16.5-.75-3.01-2.21-5.82-4.22-8.12-.41-.47-.36-1.17.1-1.58.47-.41 1.17-.36 1.58.1 2.24 2.56 3.87 5.69 4.71 9.05 1.4 5.6.71 11.97-1.92 17.94-2.32 5.26-4.97 10.76-9.5 15.02-.22.2-.49.3-.77.3l-.01.02Z" fill="#17181C"></path>
+  <path d="M107.79 161.94v4.21l24.86.21s.82-7.19-5.96-8.42c-6.42-1.17-7.13 5.95-17.12 2.71-.88-.29-1.78.37-1.78 1.3v-.01Z" fill="#2E4F80"></path>
+  <path d="M131.1 171.03a.974.974 0 0 0-1.05-.05l-1.58.89c-.27.15-.6.17-.89.04l-2.73-1.24a1.01 1.01 0 0 0-.85.01l-2.46 1.22c-.27.13-.58.14-.85.01l-1.86-.86a1 1 0 0 0-.76-.03l-2.58.96c-.22.08-.45.08-.67 0l-3.4-1.19a.996.996 0 0 0-.72.03l-1.55.68a.986.986 0 0 1-1.38-.9v-4.45h24.86v4.07c0 .8-.9 1.26-1.55.81h.02Z" fill="#fff"></path>
+  <path d="M41.73 162.11a1.114 1.114 0 0 1-.93-1.74c7.33-10.87 13.5-22.56 18.34-34.75.23-.58.88-.86 1.45-.63.57.23.86.88.63 1.45a184.66 184.66 0 0 1-18.56 35.17c-.22.32-.57.49-.93.49v.01Z" fill="#17181C"></path>
+  <path d="M43.08 161.12v4.21l-24.86.21s-.82-7.19 5.96-8.42c6.42-1.17 7.13 5.95 17.12 2.71.88-.29 1.78.37 1.78 1.3v-.01Z" fill="#2E4F80"></path>
+  <path d="M19.77 170.21c.31-.22.72-.24 1.05-.05l1.58.89c.27.15.6.17.89.04l2.73-1.24c.27-.12.58-.12.85.01l2.46 1.22c.27.13.58.14.85.01l1.86-.86a1 1 0 0 1 .76-.03l2.58.96c.22.08.45.08.67 0l3.4-1.19c.23-.08.49-.07.72.03l1.55.68a.986.986 0 0 0 1.38-.9v-4.45H18.24v4.07c0 .8.9 1.26 1.55.81h-.02Z" fill="#fff"></path>
+  <path d="M26.24 138.27h-.11a1.12 1.12 0 0 1-1.01-1.22c.17-1.82-1.4-3.53-3.05-4.28-1.73-.79-3.68-.93-5.76-1.08l-.71-.05c-2.51-.19-5.12-.57-7.21-2.06-2.16-1.53-3.61-4.21-3.88-7.18-.22-2.38.26-5 1.42-7.8 2.7-6.48 8.2-11.99 15.1-15.1 6.3-2.84 13.64-3.75 21.21-2.64a1.118 1.118 0 0 1-.33 2.21c-7.15-1.06-14.05-.2-19.96 2.46-6.39 2.88-11.47 7.95-13.96 13.92-1.02 2.46-1.44 4.72-1.26 6.73.22 2.33 1.32 4.41 2.95 5.56 1.73 1.22 4.05 1.49 6.09 1.65l.7.05c2.18.16 4.43.32 6.52 1.27 2.3 1.04 4.64 3.53 4.35 6.53-.06.58-.54 1.01-1.11 1.01l.01.02Z" fill="#17181C"></path>
+  <path d="M21.79 141.22c-.31 0-.63-.13-.85-.39-.4-.47-.35-1.17.11-1.58 1.13-.98 1.67-2.61 1.35-4.07-.32-1.46-1.49-2.72-2.92-3.13-.59-.17-.93-.8-.76-1.39.17-.59.8-.93 1.39-.76 2.23.65 3.98 2.54 4.48 4.81.49 2.27-.32 4.71-2.07 6.23-.21.18-.47.27-.73.27v.01Z" fill="#17181C"></path>
+  <path d="M18.16 139.79a1.113 1.113 0 0 1-.71-1.98c.94-.76 1.66-1.77 2.1-2.9.22-.57.31-1.04.27-1.44-.05-.48-.3-.94-.67-1.24-.37-.3-.88-.44-1.36-.38-.61.08-1.17-.35-1.25-.97-.08-.61.35-1.17.97-1.25a4.06 4.06 0 0 1 3.04.85c.85.68 1.4 1.69 1.51 2.77.07.75-.06 1.56-.41 2.46a9.19 9.19 0 0 1-2.77 3.83c-.21.17-.46.25-.71.25h-.01Z" fill="#17181C"></path>
+  <path d="M39.48 99.31c-2.04 0-4.14-.6-6.16-1.3-3.44-1.2-7.36-2.73-10.35-5.65-3.25-3.19-4.9-7.58-6.2-11.45l-.39-1.18c-1.15-3.5-2.34-7.11-4.49-10.02-1.94-2.64-5.64-5.47-9.69-4.82-.61.1-1.18-.31-1.28-.92-.1-.61.31-1.18.92-1.28 4.15-.68 8.81 1.56 11.85 5.7 2.35 3.2 3.6 6.99 4.81 10.65l.39 1.17c1.21 3.62 2.74 7.72 5.64 10.56 2.66 2.61 6.31 4.02 9.52 5.14 2.51.87 5.38 1.73 7.8.75.57-.23 1.22.04 1.46.62s-.04 1.23-.62 1.46c-1.05.42-2.13.6-3.23.6l.02-.03Z" fill="#17181C"></path>
+  <path d="M15.77 75.77c-.38 0-.75-.2-.96-.55-2.2-3.7-6.04-6.38-10.27-7.16a1.12 1.12 0 0 1-.9-1.3c.11-.61.7-1.01 1.3-.9 4.85.9 9.26 3.98 11.78 8.22.32.53.14 1.22-.39 1.53-.18.11-.38.16-.57.16h.01Z" fill="#17181C"></path>
+  <path d="M15.62 75.92c-.31 0-.62-.13-.84-.38-2.05-2.31-5.11-3.7-8.19-3.73-.62 0-1.11-.51-1.11-1.13 0-.62.49-1.12 1.13-1.11 3.71.04 7.38 1.71 9.84 4.49.41.46.37 1.17-.09 1.58-.21.19-.48.28-.74.28Z" fill="#17181C"></path>
+  <path d="M113.15 64.28a1.12 1.12 0 0 1-.76-1.94c7.33-6.81 11.57-16.85 11.33-26.86-.24-10.01-4.95-19.83-12.59-26.29-.47-.4-.53-1.11-.13-1.58s1.11-.53 1.58-.13c8.13 6.86 13.13 17.31 13.39 27.95.25 10.64-4.25 21.31-12.04 28.55-.22.2-.49.3-.76.3h-.02Z" fill="#17181C"></path>
+  <path d="M116.45 14.26c-.17 0-.35-.04-.51-.12a22.48 22.48 0 0 0-9.67-2.48c-.62-.02-1.11-.53-1.09-1.15.02-.62.49-1.11 1.15-1.09 3.69.09 7.37 1.03 10.65 2.73a1.122 1.122 0 0 1-.52 2.12l-.01-.01Z" fill="#17181C"></path>
+  <path d="M117.3 16.14c-.18 0-.37-.04-.54-.14-3.09-1.7-7.03-1.89-10.27-.5a1.12 1.12 0 0 1-.88-2.06c3.86-1.66 8.55-1.43 12.23.59a1.12 1.12 0 0 1-.54 2.1v.01Z" fill="#17181C"></path>
+  <path d="M151.09 112.86c-.45 0-.87-.27-1.04-.72-.22-.58.06-1.22.64-1.45 2.28-.88 4.11-3.08 4.9-5.9.65-2.32.67-4.99.06-8.41-1.35-7.51-4.95-14.73-10.14-20.33-5.19-5.6-12.11-9.74-19.5-11.66-4.69-1.22-8.74-1.26-12.05-.13-.59.2-1.22-.11-1.42-.7-.2-.58.11-1.22.7-1.42 3.73-1.28 8.22-1.25 13.33.08 7.8 2.03 15.11 6.39 20.58 12.3 5.48 5.91 9.28 13.53 10.7 21.46.68 3.77.64 6.76-.11 9.42-.98 3.49-3.32 6.25-6.25 7.38-.13.05-.27.08-.4.08Z" fill="#17181C"></path>
+  <path d="M151.63 109.06c-.51 0-1.03-.05-1.55-.17a5.61 5.61 0 0 1-3.34-2.37 5.632 5.632 0 0 1-.8-4.02c.11-.61.69-1.01 1.3-.9.61.11 1.01.69.9 1.3-.15.82.02 1.7.48 2.4.45.7 1.18 1.22 1.99 1.42.86.21 1.83.08 2.76-.06.78-.12 1.63-.31 1.94-.79.34-.52 1.03-.66 1.55-.32s.66 1.03.32 1.55c-.9 1.37-2.63 1.64-3.46 1.77-.65.1-1.36.2-2.09.2v-.01Z" fill="#17181C"></path>
+  <path d="M153.27 108.39c-1.06 0-2.03-.3-2.78-.87-.87-.66-1.47-1.72-1.66-2.9-.14-.93-.04-1.96.3-3.04.19-.59.82-.91 1.4-.73.59.19.92.82.73 1.4-.24.75-.31 1.43-.22 2.02.1.62.39 1.15.8 1.46.43.32 1.07.47 1.78.4.71-.07 1.41-.32 2.26-.68a1.12 1.12 0 0 1 .88 2.06c-.89.38-1.86.74-2.91.85-.19.02-.39.03-.57.03h-.01Z" fill="#17181C"></path>
+  <path d="M92.27 27.7c-1.49 6.58-5.6 12.1-10.51 15.93-4.97 3.82-10.74 5.95-16.97 5.6-6.22-.36-11.96-3.13-16.77-7.43-4.75-4.31-8.55-10.16-9.47-16.79-.93-6.61 1.47-12.8 6.65-17.25C50.32 3.31 58.21.61 66.84 1.03c8.63.39 16.09 3.82 20.63 8.75 4.6 4.94 6.29 11.37 4.8 17.93v-.01Z" fill="#567097"></path>
+  <path d="M103.68 60.76c0 16.79-16.56 30.41-36.98 30.41-20.42 0-36.98-13.61-36.98-30.41S46.28 32.2 66.7 32.2c20.42 0 36.98 11.76 36.98 28.56Z" fill="#53586D"></path>
+  <path d="M82.01 43.75c-5.04-2.22-10.48-.93-12.15 2.87-.55 1.25-.62 2.62-.29 3.97-.32-.07-.65-.13-.98-.18-4.37-.6-8.42 1.4-10.2 4.71-.38-.59-.85-1.12-1.42-1.56-2.22-1.72-5.35-1.72-8.25-.3-.13-1.51-.74-2.82-1.85-3.68-2.65-2.06-7.11-.74-9.97 2.94-2.86 3.68-3.04 8.33-.39 10.39 1.35 1.05 3.17 1.22 5.01.65-.24 2.69.6 5.16 2.52 6.65 3.48 2.7 9.19 1.17 12.77-3.43.85-1.1 1.5-2.27 1.96-3.45 1.51 2.37 4.18 4.14 7.41 4.59 5.45.75 10.41-2.56 11.08-7.39.12-.86.09-1.72-.06-2.54 4.66 1.52 9.37.15 10.91-3.34 1.67-3.8-1.05-8.68-6.09-10.9h-.01Z" fill="#fff"></path>
+  <path d="M68.116 64.389c1.072-1.391.344-3.749-1.625-5.265-1.969-1.516-4.434-1.618-5.505-.226-1.072 1.391-.344 3.748 1.625 5.265 1.969 1.516 4.434 1.618 5.505.226Z" fill="#191A1E"></path>
+  <path d="M56.212 64.642c1.245-2.151 1.022-4.608-.498-5.488-1.52-.88-3.762.151-5.007 2.302-1.245 2.151-1.022 4.608.499 5.488 1.52.88 3.761-.151 5.006-2.302Z" fill="#191A1E"></path>
+  <path d="M81.528 56.403c.906-1.34.1-3.468-1.8-4.75-1.899-1.283-4.173-1.236-5.079.105-.905 1.342-.1 3.468 1.8 4.751 1.9 1.283 4.173 1.236 5.079-.106Z" fill="#191A1E"></path>
+  <path d="M44.068 59.517c1.192-2.028 1.132-4.276-.134-5.02-1.267-.745-3.26.296-4.453 2.324-1.192 2.029-1.132 4.276.135 5.02 1.266.745 3.26-.295 4.452-2.324Z" fill="#191A1E"></path>
+  <path d="M59.52 49.21c-.28 0-.56-.1-.77-.31a1.11 1.11 0 0 1-.03-1.58c3.68-3.84 7.89-2.14 9.6-.71.47.4.53 1.1.14 1.58-.4.47-1.1.53-1.57.14-.35-.28-3.46-2.68-6.55.54-.22.23-.51.34-.81.34h-.01Z" fill="#17181C"></path>
+  <path d="M57.57 51.83c-.31 0-.62-.13-.84-.38-2.06-2.34-5.82-1.09-5.86-1.07-.58.2-1.22-.11-1.42-.69-.2-.58.1-1.22.69-1.42.21-.08 5.21-1.77 8.28 1.71a1.122 1.122 0 0 1-.84 1.86l-.01-.01Z" fill="#17181C"></path>
+  <path d="M85.96 71.36c.24 2.63.31 6.83-1.04 10.53-.27.73-1.32.69-1.51-.06l-1.7-9.56 2.25-2.39 2 1.49v-.01Z" fill="#fff"></path>
+  <path d="M90.41 74c-1.38 0-2.77-.31-4.07-.94-4.51-2.16-6.51-7.39-4.47-11.66.5-1.05 1.21-1.97 2.11-2.72.47-.4 1.18-.34 1.58.13.4.47.34 1.18-.13 1.58-.65.55-1.17 1.22-1.53 1.98-1.51 3.16.02 7.05 3.41 8.67 1.71.82 3.67.93 5.39.33.58-.21 1.22.1 1.43.68.21.58-.1 1.22-.68 1.43-.98.35-2 .52-3.03.52h-.01Z" fill="#17181C"></path>
+  <path d="M62.31 80.18c-8.11 0-13.74-2.18-17.17-4.15-.54-.31-.72-.99-.41-1.53s.99-.72 1.53-.41c3.61 2.07 9.88 4.4 19.24 3.74 10.18-.72 13.98-4.75 16.76-7.69.33-.35.64-.68.95-.99a1.11 1.11 0 0 1 1.58 0c.44.43.44 1.14 0 1.58-.3.3-.6.62-.91.95-3.03 3.21-7.18 7.6-18.23 8.38-1.16.08-2.27.12-3.34.12Z" fill="#17181C"></path>
+  <path d="m76.43 134.81 3.96 1.16 31.22-105.7c.32-1.1-.3-2.25-1.4-2.57-1.09-.32-2.24.31-2.56 1.4L76.43 134.81Z" fill="#563F3D"></path>
+  <path d="M84.58 160.8 58.9 153l3-9.81c2.16-7.09 9.65-11.09 16.74-8.94 7.09 2.16 11.09 9.65 8.94 16.74l-3 9.81Z" fill="#563F3D"></path>
+  <path d="m84.54 160.74-1.29 21.71c-.05.84-.95 1.35-1.7.97l-1.29-.66c-.27-.14-.58-.16-.87-.08l-4.08 1.24c-1.01.31-2.08.32-3.09.03l-2.51-.71a7.372 7.372 0 0 0-4.06.03l-2.87.85c-1.03.31-2.14.3-3.17 0l-2.29-.69c-1.33-.4-2.75-.44-4.1-.1l-5.23 1.31c-.52.13-1.07.12-1.59-.02l-2.49-.71c-.19-.05-.39-.06-.58-.01l-1.93.45c-1.02.24-1.81-.88-1.25-1.76l18.75-29.57 25.63 7.72h.01Z" fill="#C6B773"></path>
+  <path d="m73.09 31.99-46.05-2.55c-1.83-.1-3.03 1.4-2.22 2.78 2.51 4.25 9.22 11.64 25.6 12.25 23.14.87 22.66-12.48 22.66-12.48h.01Z" fill="#567097"></path>
+  <path d="M89.94 30.81c-.42-.45-1.14-.48-1.6-.07-2.01 1.77-4.75 2.74-7.5 2.74a8.285 8.285 0 0 0 3.18-4.97c.12-.59-.28-1.17-.9-1.28-.61-.12-1.21.27-1.33.87a6.058 6.058 0 0 1-1.9 3.3c-.86.77-1.95 1.28-3.1 1.49-1.08-.21-2.84-.53-5.04-.92-1.1-2.91-.7-6.38 1.08-8.95.35-.5.21-1.18-.31-1.52-.52-.33-1.22-.2-1.57.3a11.896 11.896 0 0 0-1.72 9.73c-2.52-.43-5.4-.89-8.4-1.32 0-3.71 1.75-7.42 4.61-9.78.48-.39.53-1.08.13-1.54-.41-.46-1.12-.51-1.6-.12a14.95 14.95 0 0 0-5.41 11.12c-2.71-.37-5.44-.69-8.04-.93-.01-.01-.02-.03-.03-.04-.76-.9-1.34-1.89-1.72-2.95-.86-2.38-.73-5.07.37-7.36.26-.55.01-1.2-.55-1.45-.57-.25-1.24-.01-1.5.53-1.34 2.8-1.51 6.08-.45 9 .26.71.59 1.39.98 2.04-2.65-.18-5.06-.23-6.97-.1-.62.04-1.09.57-1.05 1.17.05.6.6 1.06 1.21 1.01 8.79-.61 29.08 3.02 34.98 4.12.19.14.42.23.67.23h.13c.07 0 .14-.02.2-.03.4.08.62.12.64.12 1.1.29 2.24.43 3.38.43 3.3 0 6.62-1.18 9.06-3.32.46-.41.5-1.1.07-1.54v-.01Z" fill="#2E4F80"></path>
+  <path d="M109.5 100.53c-3.23 0-6.67-.53-10.26-1.59a48.034 48.034 0 0 1-15.82-8.08c-.49-.38-.6-1.1-.23-1.61s1.07-.62 1.57-.23c4.55 3.51 9.63 6.1 15.09 7.71 5.02 1.48 9.67 1.87 13.83 1.16 4.84-.83 9.02-3.17 11.76-6.59 4.55-5.69 4.67-14.88.28-20.91-2.82-3.87-7.49-6.49-12.5-7.01-.61-.06-1.06-.63-1-1.26.06-.63.61-1.1 1.23-1.03 5.71.6 10.84 3.48 14.07 7.92 5.07 6.96 4.92 17.18-.34 23.76-3.08 3.86-7.74 6.49-13.12 7.4-1.46.25-2.98.37-4.55.37l-.01-.01Z" fill="#17181C"></path>
+  <path d="M90.67 95.42c-.32 0-.63-.14-.85-.41-.99-1.21-2.12-2.58-2.84-4.2-.85-1.92-.97-3.96-.32-5.6 1.09-2.73 4.34-4.23 7.25-3.36 2.56.77 4.6 3.18 5.18 6.13.12.62-.27 1.23-.87 1.36-.61.13-1.2-.28-1.32-.9-.41-2.09-1.86-3.85-3.61-4.37-1.78-.54-3.91.41-4.56 2.02-.42 1.05-.31 2.42.28 3.76.59 1.33 1.57 2.52 2.51 3.67.4.49.34 1.21-.13 1.63-.21.18-.47.27-.72.27Z" fill="#17181C"></path>
+  <path d="M90.32 95.29c-.19 0-.38-.05-.56-.16-1.71-1.02-2.61-3.28-2.08-5.25.59-2.19 2.9-3.7 5.04-3.28 2.22.43 3.82 2.79 3.43 5.06-.11.63-.69 1.04-1.3.93-.61-.11-1.01-.71-.9-1.34.18-1.01-.63-2.19-1.63-2.38-1.02-.2-2.2.58-2.48 1.63-.26.97.2 2.13 1.05 2.64.53.32.72 1.03.41 1.58-.21.37-.58.57-.97.57h-.01Z" fill="#17181C"></path>
+  <path d="M57.76 122.59c-3.12 0-6.38-.31-9.49-1.34-5.28-1.75-9.4-5.54-11.03-10.13-1.91-5.4.12-11.85 4.52-14.38.53-.31 1.22-.12 1.53.41.31.54.12 1.22-.41 1.53-3.51 2.02-5.1 7.26-3.53 11.69 1.39 3.94 4.99 7.21 9.62 8.75 4.44 1.47 9.17 1.36 13.63 1.02 11.92-.92 19.84-4.04 24.92-9.82.41-.46 1.11-.51 1.58-.1.46.41.51 1.11.1 1.58-7.21 8.21-18.54 9.97-26.43 10.58-1.59.12-3.28.22-5.02.22l.01-.01Z" fill="#17181C"></path>
+  <path d="M88.23 112.28c-.28 0-.55-.1-.77-.31-.45-.43-.47-1.13-.04-1.58.51-.54 1.05-1.1 1.34-1.72.25-.54.29-1.12.1-1.48-.21-.4-.72-.61-1-.71-.51-.17-2.37-.04-3.48.98-.84.77-1.08 1.88-.72 3.39.14.6-.23 1.2-.83 1.35-.61.14-1.2-.23-1.35-.83-.68-2.91.38-4.63 1.39-5.55 1.74-1.6 4.43-1.87 5.69-1.45 1.05.35 1.84.97 2.28 1.78.53 1 .51 2.3-.06 3.49-.45.94-1.13 1.66-1.74 2.3-.22.23-.52.35-.81.35v-.01Z" fill="#17181C"></path>
+  <path d="M88.01 112.5a1.121 1.121 0 0 1-.83-1.87c.41-.45 1.5-1.66 1.91-2.58l.06-.12c.69-1.14.6-2.35-.24-3.17-1.02-1-3.34-1.46-6.54.54-.52.33-1.21.17-1.54-.36-.33-.52-.17-1.21.36-1.54 4.31-2.69 7.7-1.81 9.3-.24 1.55 1.52 1.79 3.87.62 5.87-.51 1.09-1.48 2.23-2.27 3.1-.22.24-.52.37-.83.37Z" fill="#17181C"></path>
+</svg>
+<article class="content-block content-block--twelve astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">No Spooky Cookies</h2>
+  <p id="No-Spooky-Cookies" class="astro-SCMHTS4H">There's nothing spooky about cookies when you learn about how the recipe is getting improved with CHIPS and First-Party Sets.</p>
+  <a href="https://developer.chrome.com/blog/no-spooky-cookies" target="_blank" rel="noopener" aria-describedby="No-Spooky-Cookies" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--thirteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">PWA Summit</h2>
+  <p id="PWA-Summit" class="astro-SCMHTS4H">Clean up your web apps with these just-landed videos from PWA summit.</p>
+  <a href="https://www.youtube.com/watch?v=tEOzwbvmTpA&amp;list=PLdwe-qCygjtFuWAeFoPI6-_9FKt2BRLh3" target="_blank" rel="noopener" aria-describedby="PWA-Summit" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 5">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature chair-owl" viewBox="0 0 159 210" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>An owl in pajamas, nightcap, and slippers sits in a yellow armchair with its feet propped up. It is reading a book.</title>
+  <path d="m49.43 186.31 50.02 1.34-.09-61.34H49.02l.41 60Z" fill="#751E1E"></path>
+  <path d="M107.32 209.55c-2.97 0-5.39-2.41-5.39-5.39v-26.93h10.77v26.93c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"></path>
+  <path d="M153.48 209.56c-2.97 0-5.39-2.41-5.39-5.39v-24.62h10.77v24.62c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"></path>
+  <path d="m96.36 186.31 50.02 1.34-.09-61.34H95.95l.41 60Z" fill="#8D6C38"></path>
+  <path d="M158.43 187.85v-12.69H51.94v12.69h106.49Z" fill="#B78A4E"></path>
+  <path d="M158.86 187.47h-12.69v-57.55c0-1.99 1.62-3.61 3.61-3.61h5.48c1.99 0 3.61 1.62 3.61 3.61v57.55h-.01Z" fill="#B78A4E"></path>
+  <path d="M57.73 209.56c-2.97 0-5.39-2.41-5.39-5.39v-24.62h10.77v24.62c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"></path>
+  <path d="M6.54 209.55c-2.97 0-5.39-2.41-5.39-5.39v-26.93h10.77v26.93c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"></path>
+  <path d="M114.63 126.7H.77V33.86C.77 15.68 15.53.92 33.71.92h47.97c18.18 0 32.94 14.76 32.94 32.94v92.84h.01Z" fill="#8D6C38"></path>
+  <path d="M125.01 126.7H11.15V33.86C11.15 15.68 25.91.92 44.09.92h47.97C110.24.92 125 15.68 125 33.86v92.84h.01Z" fill="#B78A4E"></path>
+  <path d="m29.59 152.47 104.69-3.87v-30.76c0-9.98-7.95-18.06-17.75-18.06l-69.19 3.87c-9.8 0-17.75 8.09-17.75 18.06v30.76Z" fill="#47818F"></path>
+  <path d="m65.18 106.74 44.31-1.77-15.98 19.72-28.33-17.95Z" fill="#7F5C3E"></path>
+  <path d="m64.79 105.42 28.62 18.95-21.01-.72c-1.78-.06-2.6-2.52-1.29-3.88l1.52-1.58-11.67-4.14c-1.45-.51-1.87-2.59-.77-3.76l4.6-4.88v.01Z" fill="#569FB6"></path>
+  <path d="m110.02 102.08-16.66 22.49 15.38-3.83c1.24-.36 1.37-2.78.21-3.82l-1.35-1.2 7.44-5.85c.92-.72.85-2.72-.14-3.62l-4.88-4.18v.01Z" fill="#569FB6"></path>
+  <path d="M94.9 181.962c1.949-4.597-5.032-11.953-15.593-16.431-10.56-4.479-20.701-4.383-22.65.213-1.95 4.597 5.031 11.953 15.592 16.432 10.56 4.478 20.702 4.382 22.65-.214Z" fill="#7F5C3E"></path>
+  <path d="M133.737 179.315c1.843-4.64-5.304-11.835-15.964-16.071-10.66-4.235-20.797-3.908-22.64.732-1.844 4.64 5.303 11.835 15.964 16.071 10.66 4.235 20.796 3.908 22.64-.732Z" fill="#7F5C3E"></path>
+  <path d="m135.75 115.68.09 7.82-42.39 17.45.12-8.91c.06-4.13 2.53-6.25 6.44-7.94 2.62-1.14 10.02-3.41 16.56-4.14 6.54-.73 13.52-1.43 16.19-5.26 0 0 .01-.02.02-.03.91-1.25 2.94-.53 2.96 1.02l.01-.01Z" fill="#fff"></path>
+  <path d="m49.01 121.96.39 6.07 47.49 8.88-.67-7.5c-1.4-3.96-5.16-6.25-9.62-6.35-2.99-.06-6.54 1.56-11.99 2.37-5.45.8-18.64-1.76-22.56-4.41-1.01-.68-2.5-.22-3.04.94Z" fill="#fff"></path>
+  <path d="m93.06 175.15 7.03-.08c1.46-.02 2.64-1.33 2.64-2.93l.04-39.17c0-1.6-1.18-2.89-2.63-2.87l-7.03.08c-1.46.02-2.64 1.33-2.64 2.93l-.04 39.17c0 1.6 1.18 2.89 2.63 2.87Z" fill="#75A69A"></path>
+  <path d="m49.5 125.18 41.72 6.6-.04 40.92-42.69-4.78c-1.28-.14-2.25-1.23-2.23-2.5l.4-37.87c.02-1.49 1.36-2.61 2.85-2.38l-.01.01Z" fill="#75A69A"></path>
+  <path d="m99.8 133.92 35.49-16.34c1.66-.97 3.76.24 3.76 2.16l-.04 39.02c0 .97-.58 1.85-1.48 2.23l-38.18 11.83.45-38.89v-.01Z" fill="#75A69A"></path>
+  <path d="M148.1 128.97c.15 3.83.5 10.34.8 15.66.28 5.01-4.19 9.23-9.3 8.69-18.39-1.93-26.65-13.95-26.65-13.95l26.85-15.11c3.79-1.83 8.14.64 8.3 4.7v.01Z" fill="#7F5C3E"></path>
+  <path d="M85.17 144.36s-5.16 16.85-30.78 20.55l-25.57-9.25s-11.24-8.59-2.46-21.74l58.81 10.44Z" fill="#7F5C3E"></path>
+  <path d="M97.11 183.24c.64.16 1.36-.2 1.36-.56.71-8.21 2.85-15.34 6.42-22.48.36-.71-1.07-1.07-1.78-1.07-4.99 2.14-7.85 7.14-9.63 12.13-1.07 3.92-2.85 10.7 2.59 12.09.35.01.7-.03 1.05-.12l-.01.01Z" fill="#CFBBA6"></path>
+  <path d="M93.47 185.18c3.943 0 7.14-2.315 7.14-5.17s-3.197-5.17-7.14-5.17c-3.943 0-7.14 2.315-7.14 5.17s3.197 5.17 7.14 5.17Z" fill="#CFBBA6"></path>
+  <path d="M92.56 184.88c2.47 2.12 8.25 1.76 11.43-2.59 3.17-4.29 2.69-9.35.66-9.9-2.06-.62-5.75 2.4-9.41 5.17-3.6 2.8-5.21 5.19-2.68 7.32Z" fill="#CFBBA6"></path>
+  <path d="M108.23 151.4c-.05 0-5.97-.95-5.97-.95-6.54-.8-12.5 3.86-13.3 10.4l-1.45 11.83c-.25 2.01 1.19 3.84 3.2 4.09l3.11.38.54 11.47c-.33 2.74 2.01 5.05 5.24 5.16l5.32.35c3.23.12 6.12-2.01 6.45-4.74l3.32-27.46c.58-4.75-.41-9.21-6.47-10.53h.01Z" fill="#47818F"></path>
+  <path d="M130.53 179.84c.59-.27 1.66-.98 1.31-1.34-2.5-8.21-1.43-15.7.71-23.9.36-.71-.71-1.07-1.43-1.07-3.57.71-4.99 3.92-5.71 6.78-2.14 6.06-4.28 17.84 4.09 19.89.35-.06.7-.18 1.02-.35l.01-.01Z" fill="#CFBBA6"></path>
+  <path d="M132.62 180.12c.64.16 1.36-.2 1.36-.56.71-8.21 2.85-15.34 6.42-22.48.36-.71-1.07-1.07-1.78-1.07-4.99 2.14-7.85 7.14-9.63 12.13-1.07 3.92-2.85 10.7 2.59 12.09.35.01.7-.03 1.05-.12l-.01.01Z" fill="#CFBBA6"></path>
+  <path d="M128.98 182.06c3.943 0 7.14-2.315 7.14-5.17s-3.197-5.17-7.14-5.17c-3.943 0-7.14 2.315-7.14 5.17s3.197 5.17 7.14 5.17Z" fill="#CFBBA6"></path>
+  <path d="M126.29 182.11c2.47 2.12 8.25 1.76 11.43-2.59 3.17-4.29 2.69-9.35.66-9.9-2.06-.62-5.75 2.4-9.41 5.17-3.6 2.8-5.21 5.19-2.68 7.32Z" fill="#CFBBA6"></path>
+  <path d="M141.88 149.15c-.05 0-5.97-.95-5.97-.95-6.54-.8-12.5 3.86-13.3 10.4l-1.45 11.83c-.25 2.01 1.19 3.84 3.2 4.09l3.11.38.54 11.47c-.33 2.74 2.01 5.05 5.24 5.16l5.32.35c3.23.12 6.12-2.01 6.45-4.74l3.32-27.46c.58-4.75-.41-9.21-6.47-10.53h.01Z" fill="#47818F"></path>
+  <path d="M109.63 33.61s0-30.39-41.93-30.39-48.85 49.62-48.85 49.62l8.85 3.46c14.23-18.85 35-19.23 35-19.23l46.93-3.46Z" fill="#569FB6"></path>
+  <path d="m57.82 19.65-.38 22.38 50.7.87.33-22.03c.04-2.6 3.3-3.75 4.96-1.75 6.68 8.05 18.01 28.61 18.89 58.05 0 0 4.12 35.08-33.22 34.44l-26.37 1.86s-38.66 7.8-39.03-39.52c-1.35-42.28 13.02-53.81 20.22-56.92 1.86-.81 3.93.6 3.9 2.63v-.01Z" fill="#7F5C3E"></path>
+  <path d="M71.04 55.16c5.87 0 11.34 1.75 15.91 4.76a29.53 29.53 0 0 1 17.75-5.91c16.45 0 29.78 13.43 29.78 30s-13.33 30-29.78 30H71.04c-16.13 0-29.2-13.17-29.2-29.43 0-16.25 13.08-29.43 29.2-29.43v.01Z" fill="#CFBBA6"></path>
+  <path d="M60.04 70.27c9.76-7.31 22.37-6.95 28.55.69.56-1.03 1.24-2 2.06-2.9 6.56-7.21 19.03-6.76 27.84.99 8.82 7.75 10.64 19.88 4.08 27.08-6.56 7.21-19.03 6.76-27.84-.99-1.88-1.65-3.43-3.5-4.66-5.45-1.71 3.76-4.51 7.3-8.26 10.11-9.99 7.48-22.96 6.93-28.97-1.22-6.01-8.15-2.79-20.83 7.2-28.31Z" fill="#fff"></path>
+  <path d="M112.88 60.44s-9.57-5.24-20.19 1.82" stroke="#000" stroke-width="2.26" stroke-miterlimit="10" stroke-linecap="round"></path>
+  <path d="M78.86 61.21s-10.12-3.17-18.02 4.5" stroke="#000" stroke-width="2.26" stroke-miterlimit="10" stroke-linecap="round"></path>
+  <path d="M84.19 93.689c2.317-4.565 1.556-9.606-1.699-11.258-3.255-1.652-7.773.71-10.09 5.275s-1.556 9.605 1.7 11.257c3.254 1.653 7.772-.709 10.089-5.274Z" fill="#000"></path>
+  <path d="M110.714 97.286c3.204-1.85 3.834-6.758 1.407-10.962s-6.993-6.113-10.197-4.263c-3.205 1.85-3.835 6.758-1.408 10.963 2.427 4.204 6.993 6.112 10.198 4.262Z" fill="#000"></path>
+  <g clip-path="url(#owlEyes)">
+    <path d="M55.39 54h73.85v9.33c0 8.86-7.19 16.05-16.05 16.05H64.47c-5.01 0-9.08-4.07-9.08-9.08V53.99 54Z" fill="#7F5C3E"></path>
+  </g>
+  <path d="M56.2 49.38h56.46a4.66 4.66 0 0 0 4.66-4.66v-7.99a4.66 4.66 0 0 0-4.66-4.66H56.2a4.66 4.66 0 0 0-4.66 4.66v7.99a4.66 4.66 0 0 0 4.66 4.66Z" fill="#fff"></path>
+  <path d="M20.58 70.92c6.478 0 11.73-5.252 11.73-11.73 0-6.478-5.252-11.73-11.73-11.73-6.478 0-11.73 5.252-11.73 11.73 0 6.478 5.252 11.73 11.73 11.73Z" fill="#fff"></path>
+  <path d="M91.92 83.99c14.25 3.49 23.46 21.65 9.39 38.82-.81.99-2.51.81-3.04-.34-3.68-7.94-21.64-10.77-21.26-19.04.03-.65.52-1.22 1.2-1.43 2.88-.9 10.43-5.51 11.51-16.57.1-1 1.15-1.7 2.21-1.44h-.01Z" fill="#B77E4B"></path>
+  <path d="M64.63 187.47H51.94v-61.16h8.62c2.25 0 4.08 1.83 4.08 4.08v57.08h-.01Z" fill="#B78A4E"></path>
+  <path d="m1.33 186.32 50.8 1.33-.08-61.34H.92l.41 60.01Z" fill="#8D6C38"></path>
+  <defs>
+    <clipPath id="owlEyes">
+      <path d="M60.04 70.27c9.76-7.31 22.37-6.95 28.55.69.56-1.03 1.24-2 2.06-2.9 6.56-7.21 19.03-6.76 27.84.99 8.82 7.75 10.64 19.88 4.08 27.08-6.56 7.21-19.03 6.76-27.84-.99-1.88-1.65-3.43-3.5-4.66-5.45-1.71 3.76-4.51 7.3-8.26 10.11-9.99 7.48-22.96 6.93-28.97-1.22-6.01-8.15-2.79-20.83 7.2-28.31Z"></path>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature chandelier" viewBox="0 0 186 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A purple candle chandelier with two candles on each of its four arms. It has a pair of eyes at the bottom of its body. </title>
+  <path d="M109.99 203.79c-.19 0-.39-.05-.57-.15-15.98-9.29-16.58-28.5-16.6-29.85L82.62 61.03v-.12l7.8-59.44c.07-.62.63-1.08 1.26-1 .62.07 1.07.64 1 1.26l-7.77 59.33L95.1 173.72c0 .19.38 19.18 15.47 27.95.54.32.73 1.01.41 1.56-.21.36-.59.57-.99.57v-.01Z" fill="#000"></path>
+  <path d="M98.704 192.38c3.224-1.032 5.16-3.988 4.323-6.602-.837-2.614-4.129-3.897-7.353-2.865-3.225 1.033-5.16 3.988-4.323 6.603.837 2.614 4.129 3.896 7.353 2.864Z" fill="#603E50"></path>
+  <path d="M113.21 197.78c1.8 2.55 1.28 8.22.8 11.44-.19 1.28-1.5 2.2-2.77 1.95-3.19-.63-8.71-2.05-10.51-4.59-2.58-3.66-1.88-8.6 1.56-11.03 3.45-2.43 8.33-1.43 10.92 2.23Z" fill="#603E50"></path>
+  <path d="M74.93 115.59c-16.64 0-27.74-10.27-35.64-17.59-1.99-1.84-3.87-3.59-5.56-4.89-1.27-.98-2.84-1.62-4.54-1.84l-6.56-.84c-4.27-.48-7.56.76-9.24 3.49-1.43 2.34-1.37 5.48.17 7.81 1.84 2.79 5.25 3.98 9.62 3.35 1.89-.27 3.64-1.42 4.56-2.99.47-.81.92-2.07.38-3.48-.01-.03-.02-.06-.03-.1-.84-2.6-3.71-3.78-5.99-3.4-1.25.2-3.34 1.03-3.33 4.33 0 1.05-.84 1.9-1.89 1.91-1.04 0-1.89-.84-1.9-1.89-.02-4.28 2.54-7.46 6.52-8.1 3.79-.62 8.64 1.26 10.19 5.93.83 2.19.59 4.57-.67 6.72-1.52 2.58-4.24 4.39-7.3 4.83-5.82.84-10.68-.99-13.33-5.02-2.37-3.6-2.46-8.26-.24-11.89 2.45-4 7.17-5.92 12.93-5.27l6.59.84c2.38.3 4.59 1.21 6.39 2.61 1.81 1.41 3.75 3.2 5.8 5.1 9.91 9.17 23.49 21.73 46.34 14.35.99-.32 2.07.22 2.39 1.22.32 1-.22 2.07-1.22 2.39-5.23 1.69-10.04 2.41-14.45 2.41l.01.01Z" fill="#603E50"></path>
+  <path d="m32.21 87.81-7.98-1.06 4.64-28.39 7.99 1.07-4.65 28.38Z" fill="#FFE084"></path>
+  <path d="M38.5 60.39c.64-1.74-.66-2.37-2-2.56-1.71-.25-4.38-.62-5.69-.77-1.55-.18-3.05.61-3.63 1.92-.67 1.53-.91 3.95.85 7.5 1.56 1.85-2.21 6.2.8 6.82 1.7.35 2.39-.54 2.66-1.38.12-.39.71-.44.93-.1l.43.67c.57.88 3.99 1.66 5.03-3.18.29-2.22-.51-4.18.62-8.91v-.01Z" fill="#BE8E42"></path>
+  <path d="M31.24 41.06c-.02-.35.38-.57.67-.37 3.32 2.42 7.03 6.01 7.17 10.4.07 3.26-3.62 4.71-6.54 3.9-2.6-.87-3.28-3.86-2.7-6.25.62-2.48 1.51-4.87 1.39-7.68h.01Z" fill="#C8733E"></path>
+  <path d="M33.41 59.93h-.14c-.62-.08-1.07-.64-.99-1.27l.8-6.59a1.138 1.138 0 1 1 2.26.28l-.8 6.59c-.07.58-.56 1-1.13 1v-.01Z" fill="#161414"></path>
+  <path d="M75.13 125.95c-2.92 0-5.81-.64-8.1-1.5-.04-.02-.09-.03-.13-.05-3.39-1.57-5.62-4.19-6.46-7.56-1.48-5.93 1.57-13.53 5.26-18.42 1.23-1.63 1.71-3 1.36-3.85-.43-1.05-2.23-1.93-4.69-2.29l-12.8-1.81a1.897 1.897 0 0 1-1.61-2.15 1.897 1.897 0 0 1 2.15-1.61l12.81 1.81c2.3.34 6.34 1.38 7.66 4.6.91 2.21.29 4.76-1.84 7.59-3.04 4.04-5.79 10.52-4.61 15.21.57 2.26 1.98 3.9 4.32 5 4.03 1.51 9.56 1.94 12.88-.47 2.06-1.5 3.03-3.98 2.86-7.38a1.9 1.9 0 0 1 1.8-1.99c1.05-.06 1.94.76 1.99 1.8.29 5.92-2.24 9.05-4.42 10.63-2.43 1.76-5.44 2.43-8.43 2.43v.01Z" fill="#603E50"></path>
+  <path d="m61.46 87.91-7.98-1.06 4.65-28.39 7.98 1.07-4.65 28.38Z" fill="#FFE084"></path>
+  <path d="M66.65 65.75c-.28-1.24-.1-3.04.16-4.55.26-1.54-.95-2.96-2.67-3.13l-5.06-.5c-1.78-.17-3.35 1.07-3.4 2.69-.07 2.35-1.86 5.63-2.08 7.33-.22 1.7.64 2.43 2 3 .92.31 1.47-.29 1.76-.69.4-1.25-.27-3.48.44-3.41 4.06-.03.29 5.2 1.66 8.07.09.1.18.2.29.28.76.58 2.02.62 2.77.02.11-.09.2-.18.29-.3.64-1.91.42-3.88.9-5.77 1.86.4 3.02-1.21 2.99-2.63 0-.14-.01-.29-.04-.43l-.01.02Z" fill="#BE8E42"></path>
+  <path d="M56.57 42.71c-.13-.33.19-.67.52-.56 3.9 1.26 8.56 3.52 10.06 7.64 1.08 3.08-1.97 5.6-5 5.74-2.74-.01-4.32-2.65-4.51-5.1-.19-2.54-.08-5.1-1.07-7.73v.01Z" fill="#C8733E"></path>
+  <path d="M62.08 60.92h-.12c-.63-.07-1.08-.63-1.01-1.25l.71-6.6c.07-.63.63-1.08 1.25-1.01.63.07 1.08.63 1.01 1.25l-.71 6.6c-.06.58-.56 1.02-1.13 1.02v-.01Z" fill="#161414"></path>
+  <path d="M102.02 125.84c-1.79 0-3.44-.43-4.84-1.28-2.22-1.36-4.89-4.48-4.94-11.61a1.9 1.9 0 0 1 1.89-1.91h.01c1.04 0 1.89.84 1.9 1.89.03 4.26 1.11 7.16 3.12 8.39 1.88 1.15 4.71.94 7.8-.59 1.81-1.12 2.86-2.46 3.21-4.12.83-3.97-2.37-9.13-4.86-12.67-2.03-2.89-2.61-5.5-1.73-7.75.87-2.22 3.11-3.82 6.3-4.51l10.72-2.25a1.9 1.9 0 0 1 2.25 1.47c.22 1.03-.44 2.03-1.47 2.25l-10.71 2.25c-1.84.4-3.17 1.21-3.55 2.18-.48 1.23.44 2.96 1.3 4.18 2.89 4.12 6.6 10.22 5.46 15.63-.57 2.72-2.26 4.95-5.02 6.63-.04.03-.09.05-.14.08-2.32 1.16-4.62 1.75-6.72 1.75l.02-.01Z" fill="#603E50"></path>
+  <path d="m116.92 90.2-6.67 1.33-5.28-28.19 6.67-1.33 5.28 28.19Z" fill="#FFE084"></path>
+  <path d="M104.54 70.32c-.1 1.46.84 2.82 2.02 2.92h.03c.8.07 1.38-.83 1.19-1.82l-.6-3.21c-.3-1.6 1.19-1.77 1.44-1.27l.53 1.05c.44.87 1.47.6 1.48-.39l.03-1.94c0-.56.45-.66.66-.15l1.74 9.93c.59 1.41 2.58.81 2.79-1.51.11-1.16-1.8-4.36-2.44-6.97-.64-2.61 0-4.63-.91-5.6-.33-.35-.76-.48-1.16-.39l-5.92 1.34c-1.63.23-1.06 3.06-.88 5.67.06.83.04 1.65 0 2.33v.01Z" fill="#BE8E42"></path>
+  <path d="M97.5 51.12c-.28-.21-.2-.66.15-.75 3.98-1.02 9.11-1.59 12.58 1.1 2.56 2.03 1.32 5.79-1.16 7.52-2.33 1.45-5.06.06-6.54-1.9-1.52-2.05-2.79-4.27-5.03-5.97Z" fill="#C8733E"></path>
+  <path d="M108.77 64.43c-.53 0-1-.37-1.11-.9l-1.38-6.49c-.13-.62.26-1.22.88-1.35.61-.13 1.22.26 1.35.88l1.38 6.49c.13.62-.26 1.22-.88 1.35-.08.02-.16.02-.24.02Z" fill="#161414"></path>
+  <path d="M103.5 114.57c-3.46 0-7.22-.6-11.32-1.98a1.896 1.896 0 0 1-1.19-2.41c.33-.99 1.41-1.53 2.41-1.19 19.29 6.49 30.01-6.39 37.84-15.8 1.64-1.97 3.19-3.83 4.65-5.31 1.51-1.52 3.4-2.53 5.49-2.93l6.73-1.2c4.74-.83 9.07.74 11.88 4.29 2.97 3.75 3.73 9.16 1.88 13.47-1.83 4.28-5.78 6.92-11.12 7.41-3.31.28-5.91-.48-7.74-2.27-2.53-2.47-2.86-6.23-2.69-8.95.3-4.73 4.32-7.51 8.06-7.48 3.36.03 6.86 2.37 7.09 7.52.05 1.05-.77 1.94-1.81 1.98-1.07.05-1.93-.77-1.98-1.81-.15-3.48-2.38-3.88-3.32-3.88h-.04c-1.92 0-4.03 1.37-4.19 3.92-.1 1.58-.03 4.45 1.55 6 1 .98 2.6 1.39 4.74 1.2 4.96-.46 7.07-3.04 7.96-5.12 1.31-3.07.76-6.93-1.37-9.62-1.95-2.46-4.88-3.49-8.25-2.91l-6.69 1.19c-1.3.25-2.52.9-3.48 1.87-1.35 1.36-2.85 3.16-4.43 5.06-6.53 7.85-15.78 18.95-30.65 18.95h-.01Z" fill="#603E50"></path>
+  <path d="m147.5 83.65-6.69 1.25-4.96-28.24 6.68-1.26 4.97 28.25Z" fill="#FFE084"></path>
+  <path d="M145.57 60.65c-.28-.62-.59-1.37-.82-2.17-.74-2.5-1.21-5.35-2.81-4.96l-5.99.97c-.4.06-.76.35-.94.8-.52 1.24.79 2.89 1.11 5.56.32 2.67-.63 4.68-.13 5.72 1.01 2.08 3.07 1.9 3.13.36l-.66-3.48c-.05-.26.22-.43.42-.28.32.25.71.37 1.17.29.76-.14 1.55-1.09 1.28-1.98-.15-.49-.4-1.32-.57-1.88-.21-.68.47-1.29 1.05-.93.25.16.47.47.57 1l.56 3.21c.18 1 1.03 1.61 1.75 1.25 0 0 .02 0 .02-.01 1.06-.54 1.46-2.15.86-3.48v.01Z" fill="#BE8E42"></path>
+  <path d="M127.49 42.79a.424.424 0 0 1 .19-.74c4.03-.78 9.19-1.05 12.5 1.84 2.43 2.18.98 5.85-1.6 7.44-2.41 1.31-5.06-.23-6.41-2.28-1.39-2.14-2.53-4.42-4.67-6.25l-.01-.01Z" fill="#C8733E"></path>
+  <path d="M139.22 56.53c-.52 0-.99-.36-1.11-.89l-1.46-6.47c-.14-.61.25-1.22.86-1.36.62-.14 1.22.25 1.36.86l1.46 6.47a1.141 1.141 0 0 1-1.11 1.39Z" fill="#161414"></path>
+  <path d="M115.83 165.04c-1.04 0-2.12-.12-3.24-.36a1.9 1.9 0 0 1-1.46-2.26 1.904 1.904 0 0 1 2.26-1.46c2.66.57 4.95.24 6.8-.99 2.6-1.72 3.81-4.82 4.11-6.37.81-4.21 4.4-7.38 8.72-7.7l11.93-.88c1.03-.09 1.96.71 2.03 1.75.08 1.05-.71 1.96-1.75 2.03l-11.93.88c-2.61.19-4.78 2.1-5.27 4.63-.51 2.66-2.33 6.56-5.74 8.82-1.91 1.26-4.07 1.89-6.45 1.89l-.01.02Z" fill="#603E50"></path>
+  <path d="m141.086 116.808-7.277.22.866 28.677 7.277-.22-.866-28.677Z" fill="#FFE084"></path>
+  <path d="M142.46 118.16c-.14-1.34-.72-2.21-1.84-2.24-2.05-.06-4.13.2-6.18.29-2.49.11-1.95 3.66-1.89 4.86.08 1.5.07 2.93-.02 4.42-.06.92.33 1.83 1.1 2.03.67.18 1.52-.39 1.58-1.32.07-1.13.13-2.26.13-3.39.62 1.39 2.64.99 2.55-.93a6.04 6.04 0 0 0-.09-.82c-.03-.3-.07-.61-.07-.89-.13-1.26 1.23-1.36 1.46 0 .07.4.23.98.34 1.36.17.59.42 1.16.69 1.69.79 1.51 2.53.58 2.47-1.05-.05-1.34-.09-2.69-.23-4.03v.02Z" fill="#BE8E42"></path>
+  <path d="M131.12 99.88c-.09-.34.25-.65.57-.5 3.77 1.62 8.19 4.3 9.3 8.55.79 3.17-2.48 5.39-5.51 5.25-2.73-.27-4.05-3.04-4.02-5.5.05-2.55.4-5.08-.34-7.8Z" fill="#C8733E"></path>
+  <path d="M136.94 118.86c-.62 0-1.13-.5-1.14-1.12l-.1-6.64c0-.63.49-1.15 1.12-1.16h.02c.62 0 1.13.5 1.14 1.12l.1 6.64c0 .63-.49 1.15-1.12 1.16h-.02Z" fill="#161414"></path>
+  <path d="M169.93 190.48c-2.95 0-6.05-.85-9.1-2.54-3.18-1.76-5.52-5.03-6.24-8.74-.66-3.4.13-6.79 2.17-9.32 3.86-5.22 10.34-5.67 14.5-3.44 3.61 1.94 6.59 6.41 4.11 13.16-.36.98-1.45 1.49-2.44 1.13a1.905 1.905 0 0 1-1.13-2.44c1.41-3.84.56-6.94-2.34-8.5-2.76-1.48-7.08-1.15-9.67 2.38-.02.03-.04.05-.06.07-1.37 1.69-1.88 3.9-1.42 6.24.51 2.62 2.13 4.92 4.35 6.14 5.01 2.78 9.85 2.76 13.65-.03 3.8-2.8 5.79-7.94 4.84-12.5-.93-4.48-4.48-7.64-9.99-8.89l-8.48-1.78c-2.3-.48-4.64-.3-6.79.52-3.59 1.37-7.03 3.38-10.34 5.33-11.7 6.87-23.8 13.96-40.59-9.82-.6-.86-.4-2.04.46-2.65.86-.6 2.04-.4 2.65.46 14.77 20.93 23.95 15.55 35.56 8.74 3.45-2.03 7.02-4.12 10.91-5.6 2.83-1.08 5.91-1.31 8.92-.68l8.52 1.79c6.97 1.59 11.66 5.9 12.9 11.83 1.26 6.06-1.27 12.63-6.3 16.33a14.362 14.362 0 0 1-8.64 2.84l-.01-.03Z" fill="#603E50"></path>
+  <path d="m176.775 131.096-7.133-1.453-5.725 28.113 7.134 1.453 5.724-28.113Z" fill="#FFE084"></path>
+  <path d="m172.38 128.41 4 .89a2.5 2.5 0 0 1 1.89 1.89c.37 1.7.8 4.43.25 6.37-.86 3.43-1.28 8.99-4.07 9.21-1.93 0-.43-4.07 0-6.21-.64.86-2.14.86-2.57 0-.86-1.71 1.28-3 .43-4.71-.21-.21-.64-.43-.86-.21-1.93.64-.43 4.07-3 3.64-2.57-.43-.43-4.71-.43-4.71l1.45-4.48a2.494 2.494 0 0 1 2.91-1.67v-.01Z" fill="#BE8E42"></path>
+  <path d="M167.11 114c-.18-.31.08-.69.43-.63 4.05.63 9 2.13 11.13 5.97 1.55 2.87-1.06 5.84-4.03 6.45-2.71.42-4.68-1.94-5.26-4.32-.58-2.48-.88-5.02-2.27-7.47Z" fill="#C8733E"></path>
+  <path d="M173.87 130.97h-.14c-.62-.08-1.07-.65-.99-1.27l.82-6.59c.08-.62.65-1.07 1.27-.99.62.08 1.07.65.99 1.27l-.82 6.59c-.07.58-.56 1-1.13 1v-.01Z" fill="#161414"></path>
+  <path d="M19.52 198.22c-2.46 0-4.86-.62-7.09-1.87-5.45-3.07-8.77-9.28-8.25-15.45.5-6.04 4.63-10.89 11.33-13.3l8.27-2.82c2.91-.99 6-1.14 8.94-.41 4.04 1 7.84 2.64 11.51 4.23 12.36 5.35 22.12 9.57 34.23-13.01.5-.93 1.65-1.27 2.57-.78.92.5 1.27 1.65.78 2.57-13.76 25.66-26.64 20.09-39.09 14.7-3.53-1.53-7.18-3.11-10.92-4.03-2.23-.55-4.58-.44-6.8.32l-8.24 2.81c-5.28 1.91-8.42 5.47-8.8 10.03-.39 4.64 2.22 9.5 6.33 11.82 4.11 2.31 8.92 1.73 13.55-1.63 2.05-1.48 3.38-3.96 3.57-6.62.17-2.38-.61-4.51-2.17-6.02l-.07-.07c-3-3.18-7.33-2.98-9.88-1.18-2.69 1.9-3.16 5.08-1.29 8.72.48.93.11 2.08-.82 2.56-.93.48-2.08.11-2.56-.82-3.28-6.39-.87-11.2 2.48-13.56 3.85-2.72 10.35-3.06 14.81 1.65 2.33 2.27 3.53 5.54 3.29 8.99-.26 3.77-2.18 7.3-5.12 9.44-3.42 2.48-7.05 3.74-10.55 3.74l-.01-.01Z" fill="#603E50"></path>
+  <path d="m13.833 137.661-6.903 2.311 9.108 27.206 6.904-2.312-9.109-27.205Z" fill="#FFE084"></path>
+  <path d="M6.12 141.43c-.39-1.28-.19-2.31.84-2.78 1.88-.85 3.9-1.42 5.84-2.13 2.35-.87 3.15 2.93 3.55 4.06.51 1.41 2.67 6.41 3.33 7.75.41.82.4 1.81-.24 2.3-.55.43-1.56.23-1.97-.6-.51-1.01-1.6-3.59-2.03-4.63-.03 1.52-2.33 1.98-2.99.18-.09-.25-.17-.51-.24-.79-.08-.29-.17-.59-.28-.85-.29-1.78-1.88-1.7-1.8-.53.08.61.68 3.06.62 3.65-.15 1.69-2.12 1.51-2.69-.01-.47-1.25-1.57-4.34-1.96-5.63l.02.01Z" fill="#BE8E42"></path>
+  <path d="M.1 123.78c-.18-.3.06-.69.41-.64 4.07.53 9.06 1.89 11.29 5.67 1.62 2.83-.91 5.87-3.86 6.56-2.7.49-4.73-1.81-5.37-4.18-.65-2.47-1.01-5-2.47-7.4v-.01Z" fill="#C8733E"></path>
+  <path d="M10.43 140.14c-.49 0-.94-.32-1.09-.81l-1.91-6.36c-.18-.6.16-1.24.76-1.42.6-.18 1.24.16 1.42.76l1.91 6.36a1.142 1.142 0 0 1-1.09 1.47Z" fill="#161414"></path>
+  <path d="M68.11 167.13c-6.49 0-10.08-3.24-11.97-6.08-1.43-2.15-4.17-3.07-6.65-2.24l-11.35 3.8c-1 .33-2.07-.2-2.4-1.2-.33-1 .2-2.07 1.2-2.4l11.35-3.8c4.11-1.38 8.64.16 11.02 3.73 2.15 3.23 5.56 4.68 10.13 4.33 1.04-.08 1.96.7 2.04 1.75.08 1.05-.7 1.96-1.75 2.04-.56.04-1.09.06-1.61.06l-.01.01Z" fill="#603E50"></path>
+  <path d="m36.837 128.823-6.904 2.311 9.108 27.206 6.904-2.311-9.108-27.206Z" fill="#FFE084"></path>
+  <path d="M41.02 135.85c-.1-.15-.2-.3-.3-.47-.39-.63-1.9-3.59-2.88-5.53-.5-.99-1.65-1.47-2.7-1.13l-4.27 1.38c-1.06.34-1.71 1.4-1.53 2.5.69 4.22 2.55 13.87 5.06 12.86 1.65-.66 1.04-2.62.06-4.89 1.23.58 2.95-.65 2.39-2.1a1.573 1.573 0 0 0 1.27-.41c.11.36.28.69.57.98.11.11.23.2.36.28.39.23.87.31 1.36.15 1.71-.64 1.28-2.36.62-3.63l-.01.01Z" fill="#BE8E42"></path>
+  <path d="M23.5 115.58c-.18-.31.07-.69.42-.64 4.06.58 9.03 2.01 11.21 5.82 1.59 2.85-.99 5.85-3.95 6.5-2.7.45-4.7-1.88-5.31-4.26-.62-2.48-.94-5.01-2.37-7.44v.02Z" fill="#C8733E"></path>
+  <path d="M34.01 131.59c-.47 0-.91-.29-1.08-.76l-2.19-6.27c-.21-.59.11-1.24.7-1.45.59-.21 1.24.11 1.45.7l2.19 6.27c.21.59-.11 1.24-.7 1.45-.12.04-.25.06-.38.06h.01Z" fill="#161414"></path>
+  <path d="m92.06 146.98-1.57.14c-6.58.6-11.88-5.32-10.56-11.8l4.14-20.29c.33-1.64.25-3.33-.25-4.92l-6.17-19.7c-1.88-6 2.26-12.21 8.53-12.78 6.38-.58 11.62 4.99 10.64 11.33l-3.27 21.26c-.24 1.58-.1 3.19.42 4.7l6.53 19.04c2.08 6.05-2.07 12.45-8.45 13.03l.01-.01Z" fill="#603E50"></path>
+  <path d="M93.04 64.88c.39 4.31-7.37 17.96-7.37 17.96S75.58 70.8 75.19 66.49c-.39-4.31 3.29-8.16 8.22-8.6 4.93-.45 9.24 2.68 9.63 6.99Z" fill="#603E50"></path>
+  <path d="M94.142 176.432c14.548-1.317 25.495-11.743 24.451-23.288-1.045-11.546-13.685-19.838-28.234-18.522-14.548 1.317-25.495 11.743-24.45 23.289 1.044 11.545 13.684 19.837 28.233 18.521Z" fill="#603E50"></path>
+  <path d="M105.22 145.94c-5.38-3.07-11.74-2.06-14.2 2.26-.04.06-.07.13-.1.19-3.17-3.61-9.4-3.55-14.14.2-4.86 3.85-6.29 10.12-3.2 14.02 3.09 3.9 9.53 3.94 14.38.09 1.82-1.44 3.16-3.23 3.96-5.1 1.06 1.54 2.54 2.93 4.38 3.98 5.38 3.07 11.74 2.06 14.2-2.26 2.46-4.32.1-10.31-5.28-13.38Z" fill="#fff"></path>
+  <path d="M90.266 154.432c.425-2.252-1.114-4.433-3.437-4.871-2.323-.437-4.55 1.034-4.974 3.286-.425 2.252 1.114 4.433 3.437 4.871 2.323.437 4.55-1.034 4.974-3.286Z" fill="#000"></path>
+  <path d="M101.58 153.326c.424-2.253-1.115-4.433-3.438-4.871-2.323-.438-4.55 1.033-4.974 3.286-.425 2.252 1.114 4.433 3.437 4.87 2.323.438 4.55-1.033 4.975-3.285Z" fill="#000"></path>
+  <path d="M73.28 147.65a1.14 1.14 0 0 1-.98-1.72c1.43-2.43 4.72-6.43 10.71-5.9.63.05 1.09.61 1.04 1.23-.05.63-.61 1.09-1.23 1.04-4.51-.39-7.14 2.38-8.55 4.78-.21.36-.59.56-.98.56l-.01.01Z" fill="#161414"></path>
+  <path d="M106 143.41c-.26 0-.52-.09-.73-.26-2.1-1.75-5.5-3.45-9.76-1.56-.58.25-1.25 0-1.5-.58-.26-.58 0-1.25.58-1.5 5.61-2.49 10.02.12 12.14 1.89.48.4.55 1.12.15 1.61-.23.27-.55.41-.88.41v-.01Z" fill="#161414"></path>
+</svg>
+<article class="content-block content-block--fourteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">DevTools Tips</h2>
+  <p id="DevTools-Tips" class="astro-SCMHTS4H">Illuminate bugs in your code with these quick and useful DevTools tips and tricks.</p>
+  <a href="https://www.youtube.com/watch?v=hdRDTj6ObiE&amp;list=PLNYkxOF6rcIAcezfL8q0rjt13ufKseL5X" target="_blank" rel="noopener" aria-describedby="DevTools-Tips" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--fifteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrome Dev Insider</h2>
+  <p id="Chrome-Dev-Insider" class="astro-SCMHTS4H">Read up on the 'whoo's who in Chrome with this series.</p>
+  <a href="https://developer.chrome.com/tags/insider/" target="_blank" rel="noopener" aria-describedby="Chrome-Dev-Insider" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="6" style="--index:5;" aria-label="page 5">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 5">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature log-fire" viewBox="0 0 135 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A brown fireplace with a lit fire. The fire is depicted as a single, large orange flame with a puzzled or nervous expression.</title>
+  <path d="M125.47 67.11 6.2 84.96c-3.37.5-5.86 2.91-5.63 5.42l.69 7.45c.23 2.53 3.15 4.24 6.55 3.84L127.38 87.7l-1.91-20.59Z" fill="#422925"></path>
+  <path d="M134.382 77.602c.044-5.722-3.892-10.39-8.79-10.428-4.899-.038-8.906 4.57-8.949 10.292-.044 5.721 3.891 10.39 8.79 10.427 4.898.038 8.905-4.57 8.949-10.291Z" fill="#281515"></path>
+  <path d="m11.45 95.36 109.37 3.55c3.09.1 5.51-1.83 5.48-4.34l-.12-7.48c-.04-2.54-2.56-4.74-5.67-4.95L11.13 74.7l.32 20.66Z" fill="#422925"></path>
+  <path d="M13.341 95.433c4.403-.539 7.407-5.584 6.71-11.269-.695-5.685-4.828-9.856-9.23-9.317-4.402.539-7.406 5.584-6.71 11.269.696 5.684 4.829 9.856 9.23 9.317Z" fill="#281515"></path>
+  <path d="M92.24 1.56c-3.48 6.65-1.93 15.07-1.38 22.63.13 1.73 1.92 2.8 3.5 2.09 9.67-4.31 6.02-16.75 1.49-24.64v-.02c-.71-1.49-2.84-1.53-3.6-.07l-.01.01Z" fill="#EF8229"></path>
+  <path d="M99.25 34.86c-.69.88-2.19 1.97-3.55 2.92a2.015 2.015 0 0 0-.14 3.2c3.19 2.66 7.26 4.09 10.98 1.68 9.14-5.93 6.88-16.92 7.44-22.55.13-1.32-1.35-2.17-2.43-1.41-3.09 2.17-8.29 6.91-12.29 16.16h-.01Z" fill="#EF8229"></path>
+  <path d="M53.45 13.55c.28-2.15 3.42-3.12 5.27-1.62 21.4 17.38 44.41 42.16 40.59 68.65-3.13 19.65-31.43 25.17-51.73 17.77-17.93-7.44-19.52-26.02-12.71-39.87 7.2-14.35 16.35-27.93 18.58-44.93Z" fill="#EF8229"></path>
+  <path d="M41.8 53.04c-.29 0-.58-.11-.81-.33-.45-.45-.45-1.17 0-1.61.24-.24 5.96-5.88 15.03-3.09.6.19.94.83.76 1.43-.19.61-.83.94-1.43.76-7.72-2.37-12.54 2.31-12.74 2.51-.22.22-.52.33-.81.33Z" fill="#000"></path>
+  <path d="M83.44 48.91c-.24 0-.49-.08-.7-.24-5.48-4.24-11.64-1.6-11.7-1.57-.58.26-1.25 0-1.51-.58s0-1.25.58-1.51c.3-.13 7.48-3.21 14.03 1.85a1.146 1.146 0 0 1-.71 2.05h.01Z" fill="#000"></path>
+  <path d="M55.61 85.53c-.74 0-1.49-.22-2.13-.67-.97-.7-1.97-1.37-2.98-2.02-.33-.21-.78-.25-1.23-.11-.41.13-.72.4-.84.71a1.145 1.145 0 1 1-2.14-.82c.37-.97 1.2-1.72 2.27-2.07 1.09-.35 2.28-.22 3.18.36 1.04.67 2.08 1.37 3.07 2.08.58.41 1.48.29 1.92-.28.92-1.18 1.9-2.35 2.92-3.49.64-.72 1.6-1.16 2.64-1.2 1.02-.04 2 .31 2.68.96.89.84 1.76 1.71 2.6 2.59.49.51 1.42.53 1.96.04.93-.86 1.91-1.72 2.91-2.55.82-.68 1.98-.97 3.1-.75 1.08.21 1.98.84 2.46 1.73.24.44.48.88.71 1.32.17.32.51.55.92.64.44.09.89 0 1.21-.26.38-.3.76-.6 1.15-.9.83-.63 1.93-.86 3.02-.62 1.08.24 1.97.89 2.44 1.8a1.14 1.14 0 1 1-2.02 1.06c-.16-.3-.5-.53-.91-.62-.43-.09-.85-.02-1.14.2-.38.29-.75.58-1.12.88-.86.68-1.99.94-3.11.7-1.08-.23-1.98-.89-2.48-1.81-.23-.44-.46-.86-.7-1.29-.15-.29-.49-.5-.89-.58-.45-.09-.9.01-1.2.26-.97.8-1.91 1.63-2.81 2.47-1.45 1.34-3.82 1.27-5.17-.14-.81-.85-1.66-1.7-2.51-2.51-.24-.23-.6-.37-1.01-.33-.41.02-.79.18-1.02.44-.99 1.1-1.94 2.24-2.82 3.38-.72.92-1.82 1.4-2.93 1.4Z" fill="#161414"></path>
+  <path d="M81.14 50.15c-7.38-3.7-15.48-1.84-18.21 4.13-3.39-1.95-8.05-2.48-12.79-1.12-8.16 2.34-13.47 9.42-11.87 15.81 1.61 6.39 9.52 9.67 17.68 7.32 4.71-1.35 8.46-4.28 10.5-7.74 1.41 1.46 3.13 2.74 5.09 3.72 7.45 3.73 15.63 1.8 18.29-4.31 2.65-6.11-1.24-14.09-8.68-17.82l-.01.01Z" fill="#fff"></path>
+  <path d="M61.675 68.656c3.129-1.042 4.835-4.38 3.81-7.455-1.023-3.076-4.39-4.726-7.517-3.684-3.129 1.04-4.835 4.379-3.811 7.455 1.024 3.076 4.39 4.725 7.518 3.684Z" fill="#000"></path>
+  <path d="M77.082 63.624c.937-3.005-1.034-6.293-4.403-7.344-3.37-1.05-6.86.534-7.797 3.54-.938 3.005 1.034 6.293 4.403 7.343 3.37 1.05 6.86-.534 7.797-3.539Z" fill="#000"></path>
+  <path d="M122.72 87.94 11.4 91.87c-3.14.11-5.61 2.21-5.57 4.72l.12 7.48c.04 2.54 2.61 4.57 5.77 4.57l111.32-.04-.32-20.66Z" fill="#422925"></path>
+  <path d="M122.208 108.625c4.539-.083 8.134-4.774 8.031-10.478-.104-5.704-3.867-10.261-8.406-10.179-4.539.082-8.135 4.773-8.031 10.477.103 5.705 3.867 10.262 8.406 10.18Z" fill="#281515"></path>
+</svg>
+<svg class="page__feature portrait" viewBox="0 0 145 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A portrait of an [Oscar the Grouch?], shown from the shoulders up. The portrait is in an oval frame and shows the [] in a lounge suit and with a stern expression.</title>
+  <path d="M71.8 159.62c-17.7 0-34.32-8.24-46.8-23.2C12.62 121.57 5.8 101.86 5.8 80.9S12.62 40.23 25 25.38c12.48-14.96 29.1-23.2 46.8-23.2 17.7 0 34.32 8.24 46.8 23.2 12.38 14.85 19.2 34.56 19.2 55.52s-6.82 40.67-19.2 55.52c-12.48 14.96-29.1 23.2-46.8 23.2Z" fill="#000"></path>
+  <path d="M118.54 93.89h-97.3c-.52 0-.98-.26-1.17-.66-.19-.4-.05-.84.33-1.13.82-.61 1.68-1.18 2.57-1.71l-2.84-.28c-.52-.05-.95-.37-1.06-.79-.12-.42.1-.86.54-1.09 2.23-1.19 4.53-2.13 6.85-2.81-1.7-2.53-2.94-5.14-3.7-7.8L21 80.49c-.23.38-.73.6-1.25.56-.52-.05-.95-.35-1.07-.77-1.64-5.28-1.78-10.33-.45-15.07l-.21.13c-.42.25-.98.27-1.41.04-.44-.23-.66-.65-.55-1.07 1.46-5.98 4.23-11.25 8.25-15.69l-1.2.31c-.44.12-.93.02-1.26-.25-.33-.27-.45-.67-.31-1.03 1.64-4.26 4.27-7.75 7.83-10.39 2.24-1.65 4.84-2.97 7.76-3.93L35 32.34c-.39-.18-.64-.53-.64-.9s.25-.71.65-.89c5.98-2.69 11.28-2.91 15.25-2.36l-2.1-3.26c-.23-.35-.18-.78.11-1.1.29-.32.78-.47 1.26-.38.25.04 5.89 1.06 10.87 3.6 3.84-4.9 10.7-11.01 22.12-13.72.42-.1.87-.01 1.19.23.32.24.46.61.37.96l-1.7 6.72c5.71-3.15 12.03-4.4 18.83-3.72.41.04.77.25.96.55.19.3.18.66-.02.96l-5.25 7.88c3.67-.32 8.53.05 13.98 2.5.4.18.65.52.65.89s-.24.72-.64.9l-4.99 2.31c7.02 1.78 14.9 5.9 18.08 15.3.12.36 0 .75-.33 1.01s-.8.35-1.24.24l-2.59-.66c4.07 3.96 7.13 8.71 9.12 14.16.15.41-.02.84-.43 1.1-.41.26-.97.29-1.41.07l-2.45-1.21c1.29 3.55 1.8 7.38 1.51 11.44-.03.43-.38.79-.88.92s-1.04-.01-1.36-.35l-1.23-1.3c.65 3.47.51 7.13-.44 10.93-.1.42-.51.74-1.03.81-.51.07-1.02-.14-1.28-.51l-2.14-3.11c-.48 1.21-1.01 2.4-1.61 3.56 2.96.68 5.88 1.79 8.71 3.3.44.23.66.67.54 1.09-.12.42-.54.73-1.06.79l-5.63.57c.2.14.4.29.6.43.38.28.51.73.33 1.13-.18.4-.65.66-1.17.66l.03.01Z" fill="#B3C6A8"></path>
+  <path d="M39.62 50.07a.92.92 0 0 1-.45-.12.897.897 0 0 1-.32-1.23c2.5-4.24 8.24-11.22 18.65-10.31.49.04.86.48.81.97-.04.49-.47.86-.97.81-9.44-.82-14.67 5.56-16.95 9.43a.91.91 0 0 1-.77.44v.01Z" fill="#161414"></path>
+  <path d="M105.08 51.04c-.32 0-.64-.18-.8-.48-2-3.88-6.76-10.32-16.21-10.32H87.65c-.49 0-.89-.39-.9-.88 0-.49.38-.9.88-.91h.44c10.39 0 15.6 7.05 17.79 11.29a.895.895 0 0 1-.79 1.31l.01-.01Z" fill="#161414"></path>
+  <path d="M46.15 84.9a.895.895 0 0 1-.41-1.69c2.25-1.18 4.11-1.11 5.9-1.03 1.34.05 2.6.1 4.01-.39 1.45-.43 1.88-.98 2.42-1.67.72-.93 1.54-1.98 4.33-2.5 2.83-.39 4.36.27 5.71.84 1.05.45 2.03.86 3.66.83 1.66.04 2.66-.38 3.71-.83 1.35-.57 2.88-1.23 5.66-.85 2.84.52 3.65 1.58 4.37 2.51.54.69.96 1.24 2.37 1.66 1.46.51 2.72.46 4.05.41 1.79-.07 3.64-.15 5.9 1.03.44.23.61.77.38 1.21-.23.44-.77.61-1.21.38-1.83-.96-3.37-.9-4.99-.83-1.45.06-2.94.12-4.68-.49-1.92-.57-2.62-1.47-3.24-2.26-.63-.81-1.12-1.44-3.24-1.83-2.25-.3-3.38.17-4.68.73-1.12.48-2.41 1-4.41.97-1.97.04-3.24-.49-4.37-.97-1.3-.55-2.43-1.03-4.72-.72-2.08.39-2.57 1.02-3.2 1.83-.62.79-1.32 1.7-3.28 2.28-1.69.6-3.19.54-4.63.48-1.63-.06-3.16-.13-4.99.83-.13.07-.28.1-.42.1v-.03Z" fill="#000"></path>
+  <path d="M41.8 89.27c2.817 0 5.1-2.104 5.1-4.7s-2.283-4.7-5.1-4.7c-2.817 0-5.1 2.104-5.1 4.7s2.283 4.7 5.1 4.7Z" fill="#EF8229"></path>
+  <path d="M102.04 88.67c2.745 0 4.97-2.104 4.97-4.7s-2.225-4.7-4.97-4.7c-2.745 0-4.97 2.104-4.97 4.7s2.225 4.7 4.97 4.7Z" fill="#EF8229"></path>
+  <path d="M94.56 46.78c-8.4-5.68-18.53-5.84-23.16-.54-4.63-5.31-14.76-5.14-23.16.54-8.74 5.91-12.3 15.54-7.96 21.52 4.35 5.98 14.96 6.03 23.7.13 3.22-2.18 5.74-4.86 7.42-7.69 1.68 2.82 4.2 5.51 7.42 7.69 8.74 5.91 19.35 5.85 23.7-.13 4.35-5.98.79-15.61-7.96-21.52Z" fill="#fff"></path>
+  <g class="portrait__eyes" clip-path="url(#grouchEyes)">
+    <path class="portrait__eye portrait__eye--right portrait__eye--mover" d="M91.762 58.364c1.484-2.908-.308-6.793-4.003-8.679-3.694-1.885-7.892-1.057-9.376 1.85-1.483 2.908.309 6.793 4.003 8.678 3.694 1.886 7.892 1.058 9.376-1.85Z" fill="#000"></path>
+    <path class="portrait__eye portrait__eye--left portrait__eye--mover" d="M61.901 59.951c3.69-1.894 5.473-5.783 3.983-8.687-1.49-2.904-5.69-3.723-9.38-1.829-3.69 1.894-5.473 5.784-3.983 8.688 1.49 2.903 5.69 3.722 9.38 1.828Z" fill="#000"></path>
+    <path class="portrait__eye portrait__eye--right" d="M91.762 58.364c1.484-2.908-.308-6.793-4.003-8.679-3.694-1.885-7.892-1.057-9.376 1.85-1.483 2.908.309 6.793 4.003 8.678 3.694 1.886 7.892 1.058 9.376-1.85Z" fill="none"></path>
+    <path class="portrait__eye portrait__eye--left" d="M61.901 59.951c3.69-1.894 5.473-5.783 3.983-8.687-1.49-2.904-5.69-3.723-9.38-1.829-3.69 1.894-5.473 5.784-3.983 8.688 1.49 2.903 5.69 3.722 9.38 1.828Z" fill="none"></path>
+  </g>
+  <path d="M67.57 54.64c2.32.37 4.47-1.34 4.61-3.69.35-5.59-1.35-15.02-15.7-18.3-14.82-3.38-19.63 6.42-21.17 12.41-.58 2.27.93 4.54 3.24 4.91l29.02 4.66v.01Z" fill="#EF8229"></path>
+  <path d="M104.07 48.02c2.3-.51 3.67-2.88 2.94-5.12-1.73-5.33-6.77-13.48-21.32-11.26-15.03 2.29-15.9 13.18-15.14 19.32.29 2.32 2.53 3.88 4.81 3.38l28.71-6.32Z" fill="#EF8229"></path>
+  <path d="M81.24 37.49s4.63 8.69-7.61 12.72c-.39.13-.81-.14-.75-.48l.75-4.27c.07-.39-.43-.68-.85-.49-1.94.83-6.4 2.4-11.27 1.71-.74-.1-.95-.89-.34-1.24l5.39-3.17" fill="#B3C6A8"></path>
+  <path d="M73.42 51.14c-.36 0-.71-.12-.98-.36-.35-.31-.52-.76-.44-1.2l.63-3.57c-2.37.96-6.59 2.22-11.24 1.57-.74-.1-1.31-.61-1.44-1.28-.13-.64.18-1.27.77-1.62l5.39-3.17c.43-.25.98-.11 1.23.32s.11.98-.32 1.23l-4.8 2.82c4.53.46 8.62-1.03 10.21-1.72.53-.23 1.15-.15 1.59.2.4.31.58.79.5 1.27l-.63 3.56c3.61-1.29 5.91-3.12 6.85-5.45 1.19-2.98-.27-5.79-.29-5.82a.894.894 0 1 1 1.58-.84c.08.14 1.87 3.58.37 7.33-1.19 2.96-4.04 5.2-8.49 6.67-.16.05-.32.08-.49.08v-.02Z" fill="#101110"></path>
+  <path d="M80.76 101.76h-2.5c-7.727 0-13.99 6.264-13.99 13.99v5.79c0 7.726 6.264 13.99 13.99 13.99h2.5c7.727 0 13.99-6.264 13.99-13.99v-5.79c0-7.726-6.263-13.99-13.99-13.99Z" fill="#EF8229"></path>
+  <path d="m135.8 106.88-24.58-2.29-4.36-4.79-23.61 33.19-47.31-34.82-9.46 8.13L9.43 110s14.16 52.05 64.1 50.76c49.94-1.29 62.26-53.9 62.26-53.9l.01.02Z" fill="#603E50"></path>
+  <path d="m100.3 92.43-57.8-.31-6.59 6.32 29.58 21.32 7.56-10.4c2.57-3.54 7.72-3.89 10.75-.74l10.06 9.86 13.01-18.68-6.56-7.37h-.01Z" fill="#F2ECD1"></path>
+  <path d="m35.92 98.16-12.28 10.62c-1.24 1.14-.77 3.03.89 3.6l28.96 10.72c1.63.56 2.13 2.4.95 3.55l-6.72 6.83c-1.34 1.31-.49 3.42 1.48 3.67l42.58 1.92-55.86-40.91Z" fill="#472C3C"></path>
+  <path d="M79.31 152.54c-2.57 0-4.66-2.03-4.66-4.52 0-2.49 2.09-4.52 4.66-4.52 2.57 0 4.66 2.03 4.66 4.52 0 2.49-2.09 4.52-4.66 4.52Zm0-7.25c-1.58 0-2.87 1.22-2.87 2.73s1.29 2.73 2.87 2.73 2.86-1.22 2.86-2.73-1.29-2.73-2.86-2.73Z" fill="#000"></path>
+  <path d="M63.86 112.75c-2.03 0-3.69-1.71-3.69-3.81s1.65-3.81 3.69-3.81 3.69 1.71 3.69 3.81-1.65 3.81-3.69 3.81Zm0-5.82c-1.04 0-1.89.9-1.89 2.02s.85 2.01 1.89 2.01 1.89-.9 1.89-2.01c0-1.11-.85-2.02-1.89-2.02Z" fill="#000"></path>
+  <path d="M93.44 112.75c-2.03 0-3.69-1.71-3.69-3.81s1.65-3.81 3.69-3.81 3.69 1.71 3.69 3.81-1.65 3.81-3.69 3.81Zm0-5.82c-1.04 0-1.9.9-1.9 2.02s.85 2.01 1.9 2.01c1.05 0 1.89-.9 1.89-2.01 0-1.11-.85-2.02-1.89-2.02Z" fill="#000"></path>
+  <path d="m91.22 139.07 17.57-5.45c1.69-.83 2.28-2.73 1.31-4.21l-6.11-5.04c-.88-1.35-.48-3.08.94-4l9.26-7.14c1.53-1 1.86-2.91.74-4.27l-8.16-9.15-23.34 33.23 7.8 6.04-.01-.01Z" fill="#472C3C"></path>
+  <path d="M90.43 157.14c-.5 0-.89-.41-.89-.9l.06-15.64c0-1.54-.73-2.99-1.98-3.89L35.53 99.03a.896.896 0 0 1 1.05-1.45l52.09 37.68a6.59 6.59 0 0 1 2.72 5.35l-.06 15.64c0 .49-.4.89-.9.89Z" fill="#000"></path>
+  <path d="M65.44 120.61c-.18 0-.37-.06-.53-.17a.894.894 0 0 1-.19-1.25l7.65-10.41c1.6-1.89 3.84-2.93 6.31-2.93 2.54 0 4.96 1.13 6.63 3.09l8.48 8.21a.9.9 0 0 1-1.25 1.29l-8.57-8.3c-1.34-1.58-3.27-2.49-5.3-2.49-1.92 0-3.67.81-4.92 2.27l-7.6 10.33c-.18.24-.45.37-.72.37l.01-.01Z" fill="#000"></path>
+  <path d="M83.56 132.97a.896.896 0 0 1-.72-1.42l23.34-32.4a.896.896 0 0 1 1.45 1.05l-23.34 32.4a.91.91 0 0 1-.73.37Z" fill="#000"></path>
+  <path class="portrait__nose" d="M72.67 77.01c-6.1 0-9.3-4.34-8.28-8.61.47-1.98.94-3.95 1.42-5.93.75-3.16 3.01-5.35 6.92-5.35s6.06 2.19 6.81 5.35c.47 1.98.94 3.95 1.42 5.93 1.02 4.26-2.18 8.61-8.28 8.61h-.01Z" fill="#EF8229"></path>
+  <path d="M72.56 163.29c-19.41 0-37.63-8.5-51.31-23.94C7.67 124.03.2 103.69.2 82.08c0-21.61 7.48-41.95 21.05-57.27C34.93 9.37 53.15.87 72.56.87c19.41 0 37.63 8.5 51.31 23.94 13.58 15.32 21.05 35.66 21.05 57.27 0 21.61-7.48 41.95-21.05 57.27-13.68 15.44-31.9 23.94-51.31 23.94Zm0-155.48c-36.07 0-65.42 33.31-65.42 74.26s29.35 74.26 65.42 74.26 65.42-33.31 65.42-74.26S108.63 7.81 72.56 7.81Z" fill="#BD8835"></path>
+  <defs>
+    <clipPath id="grouchEyes">
+      <path d="M94.56 46.78c-8.4-5.68-18.53-5.84-23.16-.54-4.63-5.31-14.76-5.14-23.16.54-8.74 5.91-12.3 15.54-7.96 21.52 4.35 5.98 14.96 6.03 23.7.13 3.22-2.18 5.74-4.86 7.42-7.69 1.68 2.82 4.2 5.51 7.42 7.69 8.74 5.91 19.35 5.85 23.7-.13 4.35-5.98.79-15.61-7.96-21.52Z" fill="#fff"></path>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<article class="content-block content-block--sixteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">The <abbr title="Cascading Style Sheets">CSS</abbr> Podcast</h2>
+  <p id="The-<abbr-title='Cascading-Style-Sheets'>CSS</abbr>-Podcast" class="astro-SCMHTS4H">It's alive! Join Una and Adam in the revived CSS podcast, with new episodes landing weekly.</p>
+  <a href="https://thecsspodcast.libsyn.com/" target="_blank" rel="noopener" aria-describedby="The-<abbr-title='Cascading-Style-Sheets'>CSS</abbr>-Podcast" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--seventeen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">How we built Chrometober</h2>
+  <p id="How-we-built-Chrometober" class="astro-SCMHTS4H">We'll illuminate how this website was built using scroll-linked animations and a few UI tricks.</p>
+  <a href="https://web.dev/building-chrometober" target="_blank" rel="noopener" aria-describedby="How-we-built-Chrometober" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 6">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <div class="credits astro-GAHQGNUU">
+  <h2 class="astro-GAHQGNUU">Brought to you by:</h2>
+  <dl class="astro-GAHQGNUU">
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=rudepetsclub" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Tyler Reed
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Illustration &amp; Design
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=jh3yy" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Jhey Tompkins
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Architectural and Creative Lead
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=una" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Una Kravets
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Project Lead
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=bramus" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Bramus Van Damme
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Site Contributor
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=argyleink" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Adam Argyle
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Accessibility Review
+    </dd>
+    <dt class="astro-GAHQGNUU">Aaron Forinton</dt>
+    <dd class="astro-GAHQGNUU">
+      Copywriting
+    </dd>
+  </dl>
+</div>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page page--cover-back" data-scroll-target="7" style="--index:6;" aria-label="book back">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 6">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <div class="colophon astro-QJDWFVEU">
+  <p class="astro-QJDWFVEU">This storybook demo is a Chrome experiment built to highlight scroll-linked animations using the <a href="https://github.com/flackr/scroll-timeline" rel="noopener noreferrer" target="_blank" class="astro-QJDWFVEU">scroll-timeline polyfill</a> and some of our team's work. Happy spooky month!</p>
+  </div>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 7">
+
+      <picture>
+        <source media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <picture>
+    <source srcset="/third_party/chrometober-2022/assets/chrometober_back--dark.89ee8c43.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+    <img src="/third_party/chrometober-2022/assets/chrometober_back.1c723e9c.svg" class="page__cover page__background" alt="" aria-hidden="true" height="214" width="150">
+</picture>
+      </div>
+    </div>
+  </div>
+</li>
+    </ul>
+  </main><div data-timeline-trigger="" data-timeline-trigger--first="" aria-hidden="true" inert="">
+  </div><div id="trigger-1" data-timeline-trigger="" data-scroll-trigger="1" aria-hidden="true" inert="">
+    </div><div id="trigger-2" data-timeline-trigger="" data-scroll-trigger="2" aria-hidden="true" inert="">
+    </div><div id="trigger-3" data-timeline-trigger="" data-scroll-trigger="3" aria-hidden="true" inert="">
+    </div><div id="trigger-4" data-timeline-trigger="" data-scroll-trigger="4" aria-hidden="true" inert="">
+    </div><div id="trigger-5" data-timeline-trigger="" data-scroll-trigger="5" aria-hidden="true" inert="">
+    </div><div id="trigger-6" data-timeline-trigger="" data-scroll-trigger="6" aria-hidden="true" inert="">
+    </div><div id="trigger-7" data-timeline-trigger="" data-scroll-trigger="7" aria-hidden="true" inert="">
+    </div><div data-timeline-trigger="" data-timeline-trigger--last="" aria-hidden="true" inert="">
+    <h2>Thanks for checking this out!</h2>
+  </div>
+
+
+
+
+<!-- Moved these up so can wrap them in the DOMContentLoaded as an attempt -->
+
+</body></html>
\ No newline at end of file
diff --git a/src/site/content/en/third_party/chrometober-2022/favicon-16x16.png b/src/site/content/en/third_party/chrometober-2022/favicon-16x16.png
new file mode 100644
index 00000000000..6d134d1af95
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/favicon-16x16.png differ
diff --git a/src/site/content/en/third_party/chrometober-2022/favicon-32x32.png b/src/site/content/en/third_party/chrometober-2022/favicon-32x32.png
new file mode 100644
index 00000000000..51c639bba4a
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/favicon-32x32.png differ
diff --git a/src/site/content/en/third_party/chrometober-2022/favicon.ico b/src/site/content/en/third_party/chrometober-2022/favicon.ico
new file mode 100644
index 00000000000..dc946603c21
Binary files /dev/null and b/src/site/content/en/third_party/chrometober-2022/favicon.ico differ
diff --git a/src/site/content/en/third_party/chrometober-2022/favicon.svg b/src/site/content/en/third_party/chrometober-2022/favicon.svg
new file mode 100644
index 00000000000..0f390629787
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/favicon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#000"/>
+      <stop offset="1" stop-color="#000" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+	<style>
+    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
+  </style>
+</svg>
diff --git a/src/site/content/en/third_party/chrometober-2022/hoisted.1780bd6d.js b/src/site/content/en/third_party/chrometober-2022/hoisted.1780bd6d.js
new file mode 100644
index 00000000000..28e24d7090d
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/hoisted.1780bd6d.js
@@ -0,0 +1,2 @@
+const Qe=()=>{const f=document.querySelectorAll("[data-scroll-trigger]"),d=document.querySelectorAll(".page__side"),v=w=>{for(let I of d)I.classList.remove("in-view"),I.triggers&&I.triggers.forEach(({el:R,trigger:M,action:U})=>{R&&M&&U&&R.removeEventListener(M,U)});let S=w.reverse().find(I=>I.isIntersecting),E;if(!S&&w.length>1)return;!S&&w.length===1?(E=(!w[0].isIntersecting&&w[0]).target.dataset.scrollTrigger-1,S=document.querySelector(`[data-scroll-target="${E}"]`)):(S=S.target,E=parseInt(S.dataset.scrollTrigger));let P=document.querySelector(`[data-scroll-target="${E}"] .page__side--back`),k=document.querySelector(`[data-scroll-target="${E+1}"] .page__side--front`);d.forEach(I=>I.setAttribute("inert","")),P?.removeAttribute("inert"),P?.classList.add("in-view"),k?.removeAttribute("inert"),k?.classList.add("in-view"),P?.triggers&&P.triggers.forEach(({el:I,trigger:R,action:M})=>{I&&R&&M?I.addEventListener(R,M):M&&!I&&!R&&M()}),k?.triggers&&k.triggers.forEach(({el:I,trigger:R,action:M})=>{I&&R&&M?I.addEventListener(R,M):M&&!I&&!R&&M()}),window.ga&&window.ga("send","event",{event_action:"Section Order",event_label:`pages-${E}-and-${E+1}`,event_category:"Chrometober Book",non_interaction:!0})};(w=>{const S=new IntersectionObserver(v,{threshold:.9});for(let E of w)S.observe(E)})(f)};Qe();(function(){function f(i,n){for(var e=0;e<n.length;e++){var t=n[e];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(i,t.key,t)}}function d(i,n,e){return n&&f(i.prototype,n),e&&f(i,e),i}function v(){return(v=Object.assign||function(i){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(i[t]=e[t])}return i}).apply(this,arguments)}function y(i,n){i.prototype=Object.create(n.prototype),i.prototype.constructor=i,w(i,n)}function w(i,n){return(w=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(i,n)}function S(i){if(i===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return i}function E(i,n){(n==null||n>i.length)&&(n=i.length);for(var e=0,t=new Array(n);e<n;e++)t[e]=i[e];return t}function P(i,n){var e=typeof Symbol<"u"&&i[Symbol.iterator]||i["@@iterator"];if(e)return(e=e.call(i)).next.bind(e);if(Array.isArray(i)||(e=function(r,o){if(r){if(typeof r=="string")return E(r,o);var a=Object.prototype.toString.call(r).slice(8,-1);return a==="Object"&&r.constructor&&(a=r.constructor.name),a==="Map"||a==="Set"?Array.from(r):a==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?E(r,o):void 0}}(i))||n&&i&&typeof i.length=="number"){e&&(i=e);var t=0;return function(){return t>=i.length?{done:!0}:{done:!1,value:i[t++]}}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}(function(){var i,n=new WeakMap;function e(a){for(var l,u=[],h=0;h<a.length;h++)u[h]=typeof(l=a[h])=="number"?new CSSUnitValue(l,"number"):l;return u}var t=function(){function a(l,u,h,m){n.set(this,{values:e(l),operator:u,name:h||u,delimiter:m||", "})}return a.prototype.toString=function(){var l=n.get(this);return l.name+"("+l.values.join(l.delimiter)+")"},d(a,[{key:"operator",get:function(){return n.get(this).operator}},{key:"values",get:function(){return n.get(this).values}}]),a}(),r=((i={CSSUnitValue:function(){function a(l,u){n.set(this,{value:l,unit:u})}return a.prototype.toString=function(){var l=n.get(this);return""+l.value+function(u){switch(u){case"percent":return"%";case"number":return"";default:return u.toLowerCase()}}(l.unit)},d(a,[{key:"value",get:function(){return n.get(this).value},set:function(l){n.get(this).value=l}},{key:"unit",get:function(){return n.get(this).unit}}]),a}(),CSSKeywordValue:function(){function a(l){this.value=l}return a.prototype.toString=function(){return this.value.toString()},a}(),CSSMathSum:function(a){function l(u){return a.call(this,arguments,"sum","calc"," + ")||this}return y(l,a),l}(t),CSSMathProduct:function(a){function l(u){return a.call(this,arguments,"product","calc"," * ")||this}return y(l,a),l}(t),CSSMathNegate:function(a){function l(u){return a.call(this,[arguments[0]],"negate","-")||this}return y(l,a),l}(t)}).CSSMathNegate=function(a){function l(u){return a.call(this,[1,arguments[0]],"invert","calc"," / ")||this}return y(l,a),l}(t),i.CSSMathMax=function(a){function l(){return a.call(this,arguments,"max")||this}return y(l,a),l}(t),i.CSSMathMin=function(a){function l(){return a.call(this,arguments,"min")||this}return y(l,a),l}(t),i);if(!window.CSS&&!Reflect.defineProperty(window,"CSS",{value:{}}))throw Error("Error installing CSSOM support");for(var o in window.CSSUnitValue||["number","percent","em","ex","px","cm","mm","in","pt","pc","Q","vw","vh","vmin","vmax","rems","ch","deg","rad","grad","turn","ms","s","Hz","kHz","dppx","dpi","dpcm","fr"].forEach(function(a){if(!Reflect.defineProperty(CSS,a,{value:function(l){return new CSSUnitValue(l,a)}}))throw Error("Error installing CSS."+a)}),r)if(!(o in window)&&!Reflect.defineProperty(window,o,{value:r[o]}))throw Error("Error installing CSSOM support for "+o)})(),new CSSKeywordValue("auto");var k=new WeakMap;function I(i){return i===document.scrollingElement?document:i}function R(i){U(i);var n=k.get(i).animations;if(n.length!==0)for(var e=i.currentTime,t=0;t<n.length;t++)n[t].tickAnimation(e)}function M(i,n){if(!i)return null;var e=getComputedStyle(i).writingMode=="horizontal-tb",t=i.scrollTop;return(n=="horizontal"||n=="inline"&&e||n=="block"&&!e)&&(t=Math.abs(i.scrollLeft)),t}function U(i){if(i instanceof ae){var n=i.subject;n&&getComputedStyle(n).display!="none"?ne(i,fe(n)):ne(i,null)}else(function(e){var t=k.get(e);t.anonymousSource&&ne(e,Ee(t.anonymousSource,t.anonymousTarget))})(i)}function ne(i,n){var e=k.get(i),t=e.source,r=e.scrollListener;if(t!=n&&(t&&r&&I(t).removeEventListener("scroll",r),k.get(i).source=n,n)){var o=function(){R(i)};I(n).addEventListener("scroll",o),e.scrollListener=o}}function ue(i,n){for(var e=k.get(i).animations,t=0;t<e.length;t++)e[t].animation==n&&e.splice(t,1)}function Se(i,n,e){for(var t=k.get(i).animations,r=0;r<t.length;r++)if(t[r].animation==n)return;t.push({animation:n,tickAnimation:e}),R(i)}var H=function(){function i(n){k.set(this,{source:null,orientation:"block",anonymousSource:n?n.anonymousSource:null,anonymousTarget:n?n.anonymousTarget:null,subject:null,inset:n?n.inset:null,animations:[],scrollListener:null}),ne(this,n&&n.source!==void 0?n.source:document.scrollingElement),this.orientation=n&&n.orientation||"block",R(this)}return d(i,[{key:"source",get:function(){return k.get(this).source},set:function(n){ne(this,n),R(this)}},{key:"orientation",get:function(){return k.get(this).orientation},set:function(n){if(["block","inline","horizontal","vertical"].indexOf(n)===-1)throw TypeError("Invalid orientation");k.get(this).orientation=n,R(this)}},{key:"duration",get:function(){return CSS.percent(100)}},{key:"phase",get:function(){var n=this.source;if(!n)return"inactive";var e=getComputedStyle(n);return e.display=="none"?"inactive":n==document.scrollingElement||e.overflow!="visible"&&e.overflow!="clip"?"active":"inactive"}},{key:"currentTime",get:function(){var n=this.source;if(!n||this.phase=="inactive")return null;var e=this.orientation,t=M(n,e),r=function(o,a){var l=getComputedStyle(o).writingMode=="horizontal-tb";return a==="block"?a=l?"vertical":"horizontal":a==="inline"&&(a=l?"horizontal":"vertical"),a==="vertical"?o.scrollHeight-o.clientHeight:a==="horizontal"?o.scrollWidth-o.clientWidth:void 0}(n,e);return r>0?CSS.percent(100*t/r):CSS.percent(100)}},{key:"__polyfill",get:function(){return!0}}]),i}();function me(i,n){for(var e=i.parentElement;e!=null;){if(n(e))return e;e=e.parentElement}}function Ee(i,n){return i=="root"?document.scrollingElement:fe(n)}function ze(i){switch(getComputedStyle(i).display){case"block":case"inline-block":case"list-item":case"table":case"table-caption":case"flow-root":case"flex":case"grid":return!0}return!1}function be(i){var n=getComputedStyle(i);return n.transform!="none"||n.perspective!="none"||n.willChange=="transform"||n.willChange=="perspective"||n.filter!="none"||n.willChange=="filter"||n.backdropFilter!="none"}function Fe(i){return getComputedStyle(i).position!="static"||be(i)}function Ge(i){switch(getComputedStyle(i).position){case"static":case"relative":case"sticky":return me(i,ze);case"absolute":return me(i,Fe);case"fixed":return me(i,be)}}function fe(i){if(i){for(;i=Ge(i);)switch(getComputedStyle(i)["overflow-x"]){case"auto":case"scroll":case"hidden":return i==document.body&&getComputedStyle(document.scrollingElement).overflow=="visible"?document.scrollingElement:i}return document.scrollingElement}}function de(i,n){var e=k.get(i);return i.phase==="inactive"?null:i instanceof ae?he(n,i.source,i.subject,e.orientation,e.inset):null}function he(i,n,e,t,r){for(var o=0,a=0,l=e,u=n.offsetParent;l&&l!=u;)a+=l.offsetLeft,o+=l.offsetTop,l=l.offsetParent;a-=n.offsetLeft+n.clientLeft,o-=n.offsetTop+n.clientTop;var h=getComputedStyle(n),m=h.writingMode=="horizontal-tb",s=void 0,c=void 0,g=void 0;t=="horizontal"||t=="inline"&&m||t=="block"&&!m?(s=e.clientWidth,c=a,(h.direction=="rtl"||h.writingMode=="vertical-rl")&&(c+=n.scrollWidth-n.clientWidth),g=n.clientWidth):(s=e.clientHeight,c=o,g=n.clientHeight);var _=function(ie,J){var z={start:0,end:0};if(!ie)return z;var le=ie.split(" "),O=[];if(le.forEach(function(D){D.endsWith("%")?O.push(J/100*parseFloat(D)):D.endsWith("px")?O.push(parseFloat(D)):D==="auto"&&O.push(0)}),O.length>2)throw TypeError("Invalid inset");return O.length==1?(z.start=O[0],z.end=O[0]):O.length==2&&(z.start=O[0],z.end=O[1]),z}(r,g),T=c-g+_.end,N=c+s-_.start,b=T+s,j=N-s,B=Math.min(b,j),q=Math.max(b,j),$=void 0,X=void 0;switch(i){case"cover":$=T,X=N;break;case"contain":$=B,X=q;break;case"enter":$=T,X=B;break;case"exit":$=q,X=N}return{start:$,end:X}}function we(i,n,e){return ke(de(i,n),e,de(i,"cover"))}function ke(i,n,e){return i&&e?(n.value/100*(i.end-i.start)+i.start-e.start)/(e.end-e.start):0}var ae=function(i){function n(e){var t;return e.axis&&(e.orientation=e.axis),t=i.call(this,e)||this,k.get(S(t)).subject=e&&e.subject?e.subject:void 0,U(S(t)),R(S(t)),t}return y(n,i),d(n,[{key:"source",get:function(){return U(this),k.get(this).source},set:function(e){throw new Error("Cannot set the source of a view timeline")}},{key:"subject",get:function(){return k.get(this).subject}},{key:"axis",get:function(){return k.get(this).orientation}},{key:"currentTime",get:function(){var e=null,t=M(this.source,this.orientation);if(t==e)return e;var r=de(this,"cover");return r?CSS.percent((t-r.start)/(r.end-r.start)*100):e}}]),n}(H),Ye=window.Element.prototype.animate,Ie=window.Animation,xe=["enter","exit","cover","contain"],K=function(){function i(){var e=this;this.state="pending",this.nativeResolve=this.nativeReject=null,this.promise=new Promise(function(t,r){e.nativeResolve=t,e.nativeReject=r})}var n=i.prototype;return n.resolve=function(e){this.state="resolved",this.nativeResolve(e)},n.reject=function(e){this.state="rejected",this.promise.catch(function(){}),this.nativeReject(e)},i}();function oe(i){i.readyPromise=new K,requestAnimationFrame(function(){i.timeline.currentTime!==null&&Oe(i)})}function Re(){return new DOMException("The user aborted a request","AbortError")}function Q(i,n){if(n===null)return n;if(typeof n!="number")throw new DOMException("Unexpected value: "+n+".  Cannot convert to CssNumberish","InvalidStateError");var e=A(i);return CSS.percent(e?100*n/e:0)}function x(i,n){if(i.timeline){if(n===null)return n;if(n.unit==="percent"){var e=A(i);return n.value*e/100}throw new DOMException("CSSNumericValue must be a percentage for progress based animations.","NotSupportedError")}if(n==null||typeof n=="number")return n;var t=n.to("ms");if(convertTime)return t.value;throw new DOMException("CSSNumericValue must be either a number or a time value for time based animations.","InvalidStateError")}function Me(i){if(i.finishedPromise&&i.finishedPromise.state=="pending"&&i.proxy.playState=="finished"){i.finishedPromise.resolve(i.proxy),i.animation.pause();var n=new CustomEvent("finish",{detail:{currentTime:i.proxy.currentTime,timelineTime:i.proxy.timeline.currentTime}});Object.defineProperty(n,"currentTime",{get:function(){return this.detail.currentTime}}),Object.defineProperty(n,"timelineTime",{get:function(){return this.detail.timelineTime}}),requestAnimationFrame(function(){queueMicrotask(function(){i.animation.dispatchEvent(n)})})}}function Z(i){return i.pendingPlaybackRate!==null?i.pendingPlaybackRate:i.animation.playbackRate}function L(i){i.pendingPlaybackRate!==null&&(i.animation.playbackRate=i.pendingPlaybackRate,i.pendingPlaybackRate=null)}function Ce(i){if(!i.timeline)return null;var n=x(i,i.timeline.currentTime);if(n===null||i.startTime===null)return null;var e=(n-i.startTime)*i.animation.playbackRate;return e==-0&&(e=0),e}function _e(i,n){if(!i.timeline)return null;var e=x(i,i.timeline.currentTime);return e==null?null:e-n/i.animation.playbackRate}function V(i,n,e){if(i.timeline){var t=n?x(i,i.proxy.currentTime):Ce(i);if(t&&i.startTime!=null&&!i.proxy.pending){var r=Z(i),o=A(i),a=i.previousCurrentTime;r>0&&t>=o?((a===null||a<o)&&(a=o),i.holdTime=n?t:a):r<0&&t<=0?((a==null||a>0)&&(a=0),i.holdTime=n?t:a):r!=0&&(n&&i.holdTime!==null&&(i.startTime=_e(i,i.holdTime)),i.holdTime=null)}G(i),i.previousCurrentTime=x(i,i.proxy.currentTime),i.proxy.playState=="finished"?(i.finishedPromise||(i.finishedPromise=new K),i.finishedPromise.state=="pending"&&(e?Me(i):Promise.resolve().then(function(){Me(i)}))):(i.finishedPromise&&i.finishedPromise.state=="resolved"&&(i.finishedPromise=new K),i.animation.playState!="paused"&&i.animation.pause())}}function A(i){var n=function(e){var t=e.proxy.effect.getTiming();return e.normalizedTiming||t}(i);return Math.max(0,n.delay+n.endDelay+n.iterations*n.duration)}function G(i){if(i.timeline)if(i.startTime!==null){var n=i.timeline.currentTime;if(n==null)return;pe(i,(x(i,n)-i.startTime)*i.animation.playbackRate)}else i.holdTime!==null&&pe(i,i.holdTime)}function pe(i,n){var e=i.timeline,t=i.animation.playbackRate;i.animation.currentTime=n+(e.currentTime&&e.currentTime.value==(t<0?0:100)?t<0?.001:-.001:0)}function ge(i,n){if(i.timeline){var e=i.proxy.playState=="paused"&&i.proxy.pending,t=!1,r=null,o=x(i,i.proxy.currentTime);i.resetCurrentTimeOnResume&&(o=null,i.resetCurrentTimeOnResume=!1);var a=Z(i),l=A(i);if(a>0&&n&&(o==null||o<0||o>=l))r=0;else if(a<0&&n&&(o==null||o<=0||o>l)){if(l==1/0)return void i.animation.play();r=l}else a==0&&o==null&&(r=0);r!=null&&(i.startTime=r,i.holdTime=null,L(i)),Se(i.timeline,i.animation,Ne.bind(i.proxy)),i.holdTime&&(i.startTime=null),i.pendingTask&&(i.pendingTask=null,t=!0),(i.holdTime!==null||r!==null||e||i.pendingPlaybackRate!==null)&&(i.readyPromise&&!t&&(i.readyPromise=null),G(i),i.readyPromise||oe(i),i.pendingTask="play",V(i,!1,!1))}}function Ne(i){var n=p.get(this);if(i!=null){n.pendingTask&&Oe(n);var e=this.playState;e!="running"&&e!="finished"||(pe(n,(x(n,i)-x(n,this.startTime))*this.playbackRate),e=="finished"&&Z(n)!=0&&(n.holdTime=null),V(n,!1,!1))}else n.animation.playState!="idle"&&n.animation.cancel()}function Oe(i){i.pendingTask=="pause"?function(n){var e=x(n,n.timeline.currentTime);n.startTime!=null&&n.holdTime==null&&(n.holdTime=(e-n.startTime)*n.animation.playbackRate),L(n),n.startTime=null,n.readyPromise.resolve(n.proxy),V(n,!1,!1),G(n),n.pendingTask=null}(i):i.pendingTask=="play"&&function(n){var e=x(n,n.timeline.currentTime);if(n.holdTime!=null)L(n),n.animation.playbackRate==0?n.startTime=e:(n.startTime=e-n.holdTime/n.animation.playbackRate,n.holdTime=null);else if(n.startTime!==null&&n.pendingPlaybackRate!==null){var t=(e-n.startTime)*n.animation.playbackRate;L(n);var r=n.animation.playbackRate;r==0?(n.holdTime=null,n.startTime=e):n.startTime=e-t/r}n.readyPromise&&n.readyPromise.state=="pending"&&n.readyPromise.resolve(n.proxy),V(n,!1,!1),G(n),n.pendingTask=null}(i)}var p=new WeakMap,ve=function(){function i(e,t,r){r===void 0&&(r={});var o=e instanceof Ie?e:new Ie(e,l),a=t instanceof H,l=a?void 0:t;p.set(this,{animation:o,timeline:a?t:void 0,playState:a?"idle":null,readyPromise:null,finishedPromise:null,startTime:null,holdTime:null,previousCurrentTime:null,resetCurrentTimeOnResume:!1,pendingPlaybackRate:null,pendingTask:null,specifiedTiming:null,normalizedTiming:null,effect:null,timeRange:t instanceof ViewTimeline?$e(r):null,proxy:this})}var n=i.prototype;return n.finish=function(){var e=p.get(this);if(e.timeline){var t=Z(e),r=A(e);if(t==0)throw new DOMException("Cannot finish Animation with a playbackRate of 0.","InvalidStateError");if(t>0&&r==1/0)throw new DOMException("Cannot finish Animation with an infinite target effect end.","InvalidStateError");L(e);var o=t<0?0:r;this.currentTime=Q(e,o);var a=x(e,e.timeline.currentTime);e.startTime===null&&a!==null&&(e.startTime=a-o/e.animation.playbackRate),e.pendingTask=="pause"&&e.startTime!==null&&(e.holdTime=null,e.pendingTask=null,e.readyPromise.resolve(this)),e.pendingTask=="play"&&e.startTime!==null&&(e.pendingTask=null,e.readyPromise.resolve(this)),V(e,!0,!0)}else e.animation.finish()},n.play=function(){var e=p.get(this);e.timeline?ge(e,!0):e.animation.play()},n.pause=function(){var e=p.get(this);if(e.timeline){if(this.playState!="paused"){var t=null,r=e.animation.playbackRate,o=A(e);if(e.animation.currentTime===null)if(r>=0)t=0;else{if(o==1/0)return void e.animation.pause();t=o}t!==null&&(e.startTime=t),e.pendingTask=="play"?e.pendingTask=null:e.readyPromise=null,e.readyPromise||oe(e),e.pendingTask="pause"}}else e.animation.pause()},n.reverse=function(){var e=p.get(this),t=Z(e),r=e.resetCurrentTimeOnResume?null:x(e,this.currentTime),o=A(e)==1/0,a=t!=0&&(t<0||r>0||!o);if(!e.timeline||!a)return a&&(e.pendingPlaybackRate=-Z(e)),void e.animation.reverse();if(e.timeline.phase=="inactive")throw new DOMException("Cannot reverse an animation with no active timeline","InvalidStateError");this.updatePlaybackRate(-t),ge(e,!0)},n.updatePlaybackRate=function(e){var t=p.get(this);if(t.pendingPlaybackRate=e,t.timeline){if(!t.readyPromise||t.readyPromise.state!="pending")switch(this.playState){case"idle":case"paused":L(t);break;case"finished":var r=x(t,t.timeline.currentTime),o=r!==null?(r-t.startTime)*t.animation.playbackRate:null;t.startTime=e==0?r:r!=null&&o!=null?(r-o)/e:null,L(t),V(t,!1,!1),G(t);break;default:ge(t,!1)}}else t.animation.updatePlaybackRate(e)},n.persist=function(){p.get(this).animation.persist()},n.cancel=function(){var e=p.get(this);e.timeline?(this.playState!="idle"&&(function(t){t.pendingTask&&(t.pendingTask=null,L(t),t.readyPromise.reject(Re()),oe(t),t.readyPromise.resolve(t.proxy))}(e),e.finishedPromise&&e.finishedPromise.state=="pending"&&e.finishedPromise.reject(Re()),e.finishedPromise=new K,e.animation.cancel()),e.startTime=null,e.holdTime=null,ue(e.timeline,e.animation)):e.animation.cancel()},n.addEventListener=function(e,t,r){p.get(this).animation.addEventListener(e,t,r)},n.removeEventListener=function(e,t,r){p.get(this).animation.removeEventListener(e,t,r)},n.dispatchEvent=function(e){p.get(this).animation.dispatchEvent(e)},d(i,[{key:"effect",get:function(){var e=p.get(this);return e.timeline?(e.effect||(e.effect=function(t){var r=t.animation.effect,o=r.updateTiming,a={apply:function(m){r.getTiming();var s=m.apply(r);if(t.timeline){s.localTime=Q(t,s.localTime),s.endTime=Q(t,s.endTime),s.activeDuration=Q(t,s.activeDuration);var c=A(t);s.duration=c?CSS.percent(100*(s.iterations?(c-s.delay-s.endDelay)/s.iterations:0)/c):CSS.percent(0),t.timeline.currentTime===void 0&&(s.localTime=null)}return s}},l={apply:function(m,s){var c=1e5;if(t.specifiedTiming)return t.specifiedTiming;t.specifiedTiming=m.apply(r);var g,_,T=Object.assign({},t.specifiedTiming),N=!1;return t.timeline instanceof ViewTimeline&&(g=function(b){if(!(b.timeline instanceof ViewTimeline))return 0;var j=b.timeRange.start;return we(b.timeline,j.name,j.offset)}(t),_=function(b){if(!(b.timeline instanceof ViewTimeline))return 0;var j=b.timeRange.end;return 1-we(b.timeline,j.name,j.offset)}(t),N=!0),(T.duration===null||T.duration==="auto"||N)&&t.timeline&&(N?(T.delay=g*c,T.endDelay=_*c):(T.delay=0,T.endDelay=0),T.duration=T.iterations?((T.iterations?c:0)-T.delay-T.endDelay)/T.iterations:0,o.apply(r,[T])),t.normalizedTiming=T,t.specifiedTiming}},u={apply:function(m,s,c){if(t.timeline){var g=c[0];if(g.duration===1/0)throw TypeError("Effect duration cannot be Infinity when used with Scroll Timelines");if(g.iterations===1/0)throw TypeError("Effect iterations cannot be Infinity when used with Scroll Timelines")}t.specifiedTiming&&m.apply(r,[t.specifiedTiming]),m.apply(r,c),t.specifiedTiming=null}},h=new Proxy(r,{get:function(m,s){var c=m[s];return typeof c=="function"?c.bind(r):c},set:function(m,s,c){return m[s]=c,!0}});return h.getComputedTiming=new Proxy(r.getComputedTiming,a),h.getTiming=new Proxy(r.getTiming,l),h.updateTiming=new Proxy(r.updateTiming,u),h}(e)),e.effect):e.animation.effect},set:function(e){p.get(this).animation.effect=e,details.effect=null}},{key:"timeline",get:function(){var e=p.get(this);return e.timeline||e.animation.timeline},set:function(e){var t=this.timeline;if(t!=e){var r=this.playState,o=this.currentTime,a=p.get(this),l=A(a),u=l>0?x(a,o)/l:0,h=t instanceof H,m=e instanceof H;a.resetCurrentTimeOnResume=!1;var s=this.pending;if(h&&ue(a.timeline,a.animation),m){a.timeline=e,L(a);var c=a.animation.playbackRate>=0?0:A(a);switch(r){case"running":case"finished":a.startTime=c,Se(a.timeline,a.animation,Ne.bind(this));break;case"paused":a.resetCurrentTimeOnResume=!0,a.startTime=null,a.holdTime=x(a,CSS.percent(100*u));break;default:a.holdTime=null,a.startTime=null}return s&&(a.readyPromise&&a.readyPromise.state!="resolved"||oe(a),a.pendingTask=r=="paused"?"pause":"play"),a.startTime!==null&&(a.holdTime=null),void V(a,!1,!1)}if(a.animation.timeline!=e)throw TypeError("Unsupported timeline: "+e);if(ue(a.timeline,a.animation),a.timeline=null,h)switch(o!==null&&(a.animation.currentTime=u*A(a)),r){case"paused":a.animation.pause();break;case"running":case"finished":a.animation.play()}}}},{key:"startTime",get:function(){var e=p.get(this);return e.timeline?Q(e,e.startTime):e.animation.startTime},set:function(e){var t=p.get(this);if(e=x(t,e),t.timeline){x(t,t.timeline.currentTime)==null&&t.startTime!=null&&(t.holdTime=null,G(t));var r=x(t,this.currentTime);L(t),t.startTime=e,t.resetCurrentTimeOnResume=!1,t.holdTime=t.startTime!==null&&t.animation.playbackRate!=0?null:r,t.pendingTask&&(t.pendingTask=null,t.readyPromise.resolve(this)),V(t,!0,!1),G(t)}else t.animation.startTime=e}},{key:"currentTime",get:function(){var e=p.get(this);return e.timeline?Q(e,e.holdTime!=null?e.holdTime:Ce(e)):e.animation.currentTime},set:function(e){var t=p.get(this);if(e=x(t,e),t.timeline&&e!=null){var r=t.timeline.phase;t.holdTime!==null||t.startTime===null||r=="inactive"||t.animation.playbackRate==0?t.holdTime=e:t.startTime=_e(t,e),t.resetCurrentTimeOnResume=!1,r=="inactive"&&(t.startTime=null),t.previousCurrentTime=null,t.pendingTask=="pause"&&(t.holdTime=e,L(t),t.startTime=null,t.pendingTask=null,t.readyPromise.resolve(this)),V(t,!0,!1)}else t.animation.currentTime=e}},{key:"playbackRate",get:function(){return p.get(this).animation.playbackRate},set:function(e){var t=p.get(this);if(t.timeline){t.pendingPlaybackRate=null;var r=this.currentTime;t.animation.playbackRate=e,r!==null&&(this.currentTime=r)}else t.animation.playbackRate=e}},{key:"playState",get:function(){var e=p.get(this);if(!e.timeline)return e.animation.playState;var t=x(e,this.currentTime);return t===null&&e.startTime===null&&e.pendingTask==null?"idle":e.pendingTask=="pause"||e.startTime===null&&e.pendingTask!="play"?"paused":t!=null&&(e.animation.playbackRate>0&&t>=A(e)||e.animation.playbackRate<0&&t<=0)?"finished":"running"}},{key:"replaceState",get:function(){return p.get(this).animation.pending}},{key:"pending",get:function(){var e=p.get(this);return e.timeline?!!e.readyPromise&&e.readyPromise.state=="pending":e.animation.pending}},{key:"id",get:function(){return p.get(this).animation.id}},{key:"onfinish",get:function(){return p.get(this).animation.onfinish},set:function(e){p.get(this).animation.onfinish=e}},{key:"oncancel",get:function(){return p.get(this).animation.oncancel},set:function(e){p.get(this).animation.oncancel=e}},{key:"onremove",get:function(){return p.get(this).animation.onremove},set:function(e){p.get(this).animation.onremove=e}},{key:"finished",get:function(){var e=p.get(this);return e.timeline?(e.finishedPromise||(e.finishedPromise=new K),e.finishedPromise.promise):e.animation.finished}},{key:"ready",get:function(){var e=p.get(this);return e.timeline?(e.readyPromise||(e.readyPromise=new K,e.readyPromise.resolve(this)),e.readyPromise.promise):e.animation.ready}}]),i}();function Pe(i,n){if(!i)return null;var e=i.split(" ");if(!xe.includes(e[0])||e.length==2&&!e[1].endsWith("%"))throw TypeError("Invalid animation delay");var t=n;if(e.length==2){var r=parseFloat(e[1]);if(Number.isNaN(r))throw TypeError('"'+e[1]+'" is not a valid percentage for animation delay');t=CSS.percent(r)}return{name:e[0],offset:t}}function Ae(){return{name:"cover",offset:CSS.percent(0)}}function Le(){return{name:"cover",offset:CSS.percent(100)}}function $e(i){var n=We(i["animation-time-range"]);return i["animation-delay"]&&(n.start=Pe(i["animation-delay"],Ae().offset)),i["animation-end-delay"]&&(n.end=Pe(i["animation-end-delay"],Le().offset)),n}function We(i){var n={start:Ae(),end:Le()};if(!i)return n;var e=i.split(" "),t=[],r=[];if(e.forEach(function(o){o.endsWith("%")?r.push(parseFloat(o)):t.push(o)}),t.length>2||r.length>2||r.length==1)throw TypeError("Invalid time range");return t.length&&(n.start.name=t[0],n.end.name=t.length>1?t[1]:t[0]),r.length>1&&(n.start.offset=CSS.percent(r[0]),n.end.offset=CSS.percent(r[1])),n}var C={IDENTIFIER:/[\w\\\@_-]+/g,WHITE_SPACE:/\s*/g,NUMBER:/^[0-9]+/,TIME:/^[0-9]+(s|ms)/,VIEW_TIMELINE:/view-timeline\s*:([^;}]+)/,VIEW_TIMELINE_NAME:/view-timeline-name\s*:([^;}]+)/,VIEW_TIMELINE_AXIS:/view-timeline-axis\s*:([^;}]+)/,ANIMATION_TIMELINE:/animation-timeline\s*:([^;}]+)/,ANIMATION_DELAY:/animation-delay\s*:([^;}]+)/,ANIMATION_END_DELAY:/animation-end-delay\s*:([^;}]+)/,ANIMATION_TIME_RANGE:/animation-time-range\s*:([^;}]+)/,ANIMATION_NAME:/animation-name\s*:([^;}]+)/,ANIMATION:/animation\s*:([^;}]+)/,SOURCE_ELEMENT:/selector\(#([^)]+)\)/},ye=["block","inline","vertical","horizontal"],Xe=["nearest","root"],Y=new(function(){function i(){this.cssRulesWithTimelineName=[],this.scrollTimelineOptions=new Map,this.nextAnonymousTimelineNameIndex=0,this.anonymousScrollTimelineOptions=new Map,this.subjectSelectorToViewTimeline=[],this.keyframeNamesSelectors=new Map}var n=i.prototype;return n.transpileStyleSheet=function(e,t,r){for(var o={sheetSrc:e,index:0,name:r};o.index<o.sheetSrc.length&&(this.eatWhitespace(o),!(o.index>=o.sheetSrc.length));)if(this.lookAhead("/*",o))for(;this.lookAhead("/*",o);)this.eatComment(o),this.eatWhitespace(o);else if(this.lookAhead("@scroll-timeline",o)){var a=this.parseScrollTimeline(o).scrollTimeline;t&&this.scrollTimelineOptions.set(a.name,a)}else{var l=this.parseQualifiedRule(o);if(!l)continue;t?this.parseKeyframesAndSaveNameMapping(l,o):this.handleScrollTimelineProps(l,o)}return o.sheetSrc},n.getAnimationTimelineOptions=function(e,t){for(var r=this.cssRulesWithTimelineName.length-1;r>=0;r--){var o=this.cssRulesWithTimelineName[r];if(t.matches(o.selector)&&(!o["animation-name"]||o["animation-name"]==e))return{"animation-timeline":o["animation-timeline"],"animation-delay":o["animation-delay"],"animation-end-delay":o["animation-end-delay"],"animation-time-range":o["animation-time-range"]}}return null},n.getSourceElement=function(e){var t=C.SOURCE_ELEMENT.exec(e);return t?document.getElementById(t[1]):e==="auto"?document.scrollingElement:null},n.getAnonymousScrollTimelineOptions=function(e,t){var r=this.anonymousScrollTimelineOptions.get(e);return r?{anonymousSource:r.source,anonymousTarget:t,source:Ee(r.source,t),orientation:r.orientation?r.orientation:"block"}:null},n.getScrollTimelineOptions=function(e,t){var r=this.getAnonymousScrollTimelineOptions(e,t);if(r)return r;var o=this.scrollTimelineOptions.get(e);if(o!=null&&o.source){var a=this.getSourceElement(o.source);return v({},a?{source:a}:{},o.orientation!="auto"?{orientation:o.orientation}:{})}return null},n.findPreviousSiblingOrAncestorMatchingSelector=function(e,t){for(var r=e;r;){if(r.matches(t))return r;r=r.previousElementSibling||r.parentElement}return null},n.getViewTimelineOptions=function(e,t){for(var r=this.subjectSelectorToViewTimeline.length-1;r>=0;r--){var o=this.subjectSelectorToViewTimeline[r];if(o.name==e){var a=this.findPreviousSiblingOrAncestorMatchingSelector(t,o.selector);if(a)return{subject:a,axis:o.axis,inset:o.inset}}}return null},n.parseScrollTimeline=function(e){var t=e.index;this.assertString(e,"@scroll-timeline"),this.eatWhitespace(e);var r=this.parseIdentifier(e);this.eatWhitespace(e),this.assertString(e,"{"),this.eatWhitespace(e);for(var o={name:r,source:"auto",orientation:void 0};this.peek(e)!=="}";){var a=this.parseIdentifier(e);this.eatWhitespace(e),this.assertString(e,":"),this.eatWhitespace(e),o[a]=this.removeEnclosingDoubleQuotes(this.eatUntil(";",e)),this.assertString(e,";"),this.eatWhitespace(e)}this.assertString(e,"}");var l=e.index;return this.eatWhitespace(e),{scrollTimeline:o,startIndex:t,endIndex:l}},n.handleScrollTimelineProps=function(e,t){var r=this;if(!e.selector.includes("@keyframes")){var o=e.block.contents.includes("animation-name:"),a=e.block.contents.includes("animation-timeline:"),l=e.block.contents.includes("animation:");this.saveSubjectSelectorToViewTimeline(e);var u=[],h=[];a&&(u=this.extractScrollTimelineNames(e.block.contents)),o&&(h=this.extractMatches(e.block.contents,C.ANIMATION_NAME)),a&&o||l&&this.extractMatches(e.block.contents,C.ANIMATION).forEach(function(m){var s=r.extractAnimationName(m),c=r.extractTimelineName(m);s&&h.push(s),c&&(u.push(c),e.block.contents=e.block.contents.replace(c," ".repeat(c.length)),r.replacePart(e.block.startIndex,e.block.endIndex,e.block.contents,t)),(c||a)&&(r.hasDuration(m)||(e.block.contents=e.block.contents.replace("animation:","animation: 1s "),r.replacePart(e.block.startIndex,e.block.endIndex,e.block.contents,t)))}),this.saveRelationInList(e,u,h)}},n.saveSubjectSelectorToViewTimeline=function(e){var t=e.block.contents.includes("view-timeline:"),r=e.block.contents.includes("view-timeline-name:"),o=e.block.contents.includes("view-timeline-axis:");if(t||r){var a={selector:e.selector,name:"",axis:"block"};if(t){var l=this.extractMatches(e.block.contents,C.VIEW_TIMELINE,separator=" ");l.length==1?a.name=l[0]:l.length==2&&(ye.includes(l[0])?(a.axis=l[0],a.name=l[1]):(a.axis=l[1],a.name=l[0]))}if(r){var u=this.extractMatches(e.block.contents,C.VIEW_TIMELINE_NAME);a.name=u[0]}if(o){var h=this.extractMatches(e.block.contents,C.VIEW_TIMELINE_AXIS);ye.includes(h[0])&&(a.axis=h[0])}this.subjectSelectorToViewTimeline.push(a)}},n.hasDuration=function(e){return e.split(" ").filter(function(t){return C.TIME.exec(t)}).length>=1},n.saveRelationInList=function(e,t,r){var o=e.block.contents.includes("animation-delay:"),a=e.block.contents.includes("animation-end-delay:"),l=e.block.contents.includes("animation-time-range:"),u=[],h=[],m=[];o&&(u=this.extractMatches(e.block.contents,C.ANIMATION_DELAY)),a&&(h=this.extractMatches(e.block.contents,C.ANIMATION_END_DELAY)),l&&(m=this.extractMatches(e.block.contents,C.ANIMATION_TIME_RANGE));for(var s=Math.max(t.length,r.length,u.length,h.length,m.length),c=0;c<s;c++)this.cssRulesWithTimelineName.push(v({selector:e.selector,"animation-timeline":t[c%t.length]},r.length?{"animation-name":r[c%r.length]}:{},u.length?{"animation-delay":u[c%u.length]}:{},h.length?{"animation-end-delay":h[c%h.length]}:{},m.length?{"animation-time-range":m[c%m.length]}:{}))},n.extractScrollTimelineNames=function(e){var t=this,r=C.ANIMATION_TIMELINE.exec(e)[1].trim(),o=[];return r.split(",").map(function(a){return a.trim()}).forEach(function(a){if(function(u){return u.startsWith("scroll")&&u.includes("(")}(a)){var l=t.saveAnonymousTimelineName(a);o.push(l)}else o.push(a)}),o},n.saveAnonymousTimelineName=function(e){var t=":t"+this.nextAnonymousTimelineNameIndex++;return this.anonymousScrollTimelineOptions.set(t,this.parseAnonymousTimeline(e)),t},n.parseAnonymousTimeline=function(e){var t=e.indexOf("("),r=e.indexOf(")");if(!e.startsWith("scroll")||t==-1||r==-1)return null;var o=e.substring(t+1,r),a={};return o.split(" ").forEach(function(l){ye.includes(l)?a.orientation=l:Xe.includes(l)&&(a.source=l)}),a},n.extractAnimationName=function(e){return this.findMatchingEntryInContainer(e,this.keyframeNamesSelectors)},n.extractTimelineName=function(e){return this.findMatchingEntryInContainer(e,this.scrollTimelineOptions)},n.findMatchingEntryInContainer=function(e,t){var r=e.split(" ").filter(function(o){return t.has(o)});return r?r[0]:null},n.parseIdentifier=function(e){C.IDENTIFIER.lastIndex=e.index;var t=C.IDENTIFIER.exec(e.sheetSrc);if(!t)throw this.parseError(e,"Expected an identifier");return e.index+=t[0].length,t[0]},n.parseKeyframesAndSaveNameMapping=function(e,t){var r=this;if(e.selector.startsWith("@keyframes")){var o=this.replaceKeyframesAndGetMapping(e,t);e.selector.split(" ").forEach(function(a,l){l>0&&r.keyframeNamesSelectors.set(a,o)})}},n.replaceKeyframesAndGetMapping=function(e,t){function r(g){return xe.some(function(_){return g.startsWith(_)})}var o=e.block.contents,a=function(g){for(var _=0,T=-1,N=[],b=0;b<g.length;b++)g[b]=="{"?_++:g[b]=="}"&&_--,_==1&&g[b]!="{"&&g[b]!="}"&&T==-1&&(T=b),_==2&&g[b]=="{"&&(N.push({start:T,end:b}),T=-1);return N}(o);if(a.length==0)return new Map;var l=new Map,u=!1,h=[];h.push(o.substring(0,a[0].start));for(var m=0;m<a.length;m++){var s=o.substring(a[m].start,a[m].end).split(" ").map(function(g){return g.trim()}).filter(function(g){return g!=""}).join(" "),c=l.size;l.set(c,s),h.push(c+"%"),r(s)&&(u=!0),h.push(m==a.length-1?o.substring(a[m].end):o.substring(a[m].end,a[m+1].start))}return u?(e.block.contents=h.join(""),this.replacePart(e.block.startIndex,e.block.endIndex,e.block.contents,t),l):new Map},n.parseQualifiedRule=function(e){var t=e.index,r=this.parseSelector(e).trim();if(r)return{selector:r,block:this.eatBlock(e),startIndex:t,endIndex:e.index}},n.removeEnclosingDoubleQuotes=function(e){return e.substring(e[0]=='"'?1:0,e[e.length-1]=='"'?e.length-1:e.length)},n.assertString=function(e,t){if(e.sheetSrc.substr(e.index,t.length)!=t)throw this.parseError(e,"Did not find expected sequence "+t);e.index+=t.length},n.replacePart=function(e,t,r,o){o.sheetSrc=o.sheetSrc.slice(0,e)+r+o.sheetSrc.slice(t),o.index>=t&&(o.index=e+r.length+(o.index-t))},n.eatComment=function(e){this.assertString(e,"/*"),this.eatUntil("*/",e,!0),this.assertString(e,"*/")},n.eatBlock=function(e){var t=e.index;this.assertString(e,"{");for(var r=1;r!=0;)this.lookAhead("/*",e)?this.eatComment(e):(e.sheetSrc[e.index]==="{"?r++:e.sheetSrc[e.index]==="}"&&r--,this.advance(e));var o=e.index;return{startIndex:t,endIndex:o,contents:e.sheetSrc.slice(t,o)}},n.advance=function(e){if(e.index++,e.index>e.sheetSrc.length)throw this.parseError(e,"Advanced beyond the end")},n.eatUntil=function(e,t,r){r===void 0&&(r=!1);for(var o=t.index;!this.lookAhead(e,t);)this.advance(t);return r&&(t.sheetSrc=t.sheetSrc.slice(0,o)+" ".repeat(t.index-o)+t.sheetSrc.slice(t.index)),t.sheetSrc.slice(o,t.index)},n.parseSelector=function(e){var t=e.index;if(this.eatUntil("{",e),t===e.index)throw Error("Empty selector");return e.sheetSrc.slice(t,e.index)},n.eatWhitespace=function(e){C.WHITE_SPACE.lastIndex=e.index;var t=C.WHITE_SPACE.exec(e.sheetSrc);t&&(e.index+=t[0].length)},n.lookAhead=function(e,t){return t.sheetSrc.substr(t.index,e.length)==e},n.peek=function(e){return e.sheetSrc[e.index]},n.extractMatches=function(e,t,r){return r===void 0&&(r=","),t.exec(e)[1].trim().split(r).map(function(o){return o.trim()})},i}());function Ke(i,n,e,t,r,o){return ke(he(i,n,e,t,r),o,he("cover",n,e,t,r))}if(function(){if(!CSS.supports("animation-timeline: works")){(function(){function n(e){if(e.innerHTML.trim().length!==0){var t=Y.transpileStyleSheet(e.innerHTML,!0);t=Y.transpileStyleSheet(t,!1),e.innerHTML=t}}new MutationObserver(function(e){for(var t,r=P(e);!(t=r()).done;)for(var o,a=P(t.value.addedNodes);!(o=a()).done;){var l=o.value;l instanceof HTMLStyleElement&&n(l)}}).observe(document.documentElement,{childList:!0,subtree:!0}),document.querySelectorAll("style").forEach(function(e){return n(e)}),document.querySelectorAll("link").forEach(function(e){})})();var i=new WeakMap;window.addEventListener("animationstart",function(n){n.target.getAnimations().filter(function(e){return e.animationName===n.animationName}).forEach(function(e){i.has(n.target)||i.set(n.target,new Map);var t=i.get(n.target);if(!t.has(e.animationName)){var r=function(a,l,u){var h=Y.getAnimationTimelineOptions(l,u),m=h["animation-timeline"];if(!m)return null;var s=Y.getScrollTimelineOptions(m,u)||Y.getViewTimelineOptions(m,u);return s?(s.subject&&function(c,g){var _=fe(g.subject),T=g.axis||g.orientation,N=Y.keyframeNamesSelectors.get(c.animationName);if(N&&N.size){var b=[];c.effect.getKeyframes().forEach(function(B){var q=function($,X){for(var ie,J=null,z=P($);!(ie=z()).done;){var le=ie.value,O=le[1];if(le[0]==100*X.offset){if(O=="from")J=0;else if(O=="to")J=100;else{var D=O.split(" ");J=D.length==1?parseFloat(D[0]):100*Ke(D[0],_,g.subject,T,g.inset,CSS.percent(parseFloat(D[1])))}break}}return J}(N,B);q!==null&&q>=0&&q<=100&&(B.offset=q/100,b.push(B))});var j=b.sort(function(B,q){return B.offset<q.offset?-1:B.affset>q.offset?1:0});c.effect.setKeyframes(j),Y.keyframeNamesSelectors.set(c.animationName,null)}}(a,s),{timeline:s.source?new H(s):new ae(s),animOptions:h}):null}(e,e.animationName,n.target);t.set(e.animationName,r&&r.timeline&&e.timeline!=r.timeline?new ve(e,r.timeline,r.animOptions):null)}var o=t.get(e.animationName);o!==null&&(e.pause(),o.play())})})}}(),[].concat(document.styleSheets).filter(function(i){return i.href!==null}).length&&console.warn("Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only supports inline styles within style tags"),!Reflect.defineProperty(window,"ScrollTimeline",{value:H}))throw Error("Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window");if(!Reflect.defineProperty(window,"ViewTimeline",{value:ae}))throw Error("Error installing ViewTimeline polyfill: could not attach ViewTimeline to window");if(!Reflect.defineProperty(Element.prototype,"animate",{value:function(i,n){var e=n.timeline;e instanceof H&&delete n.timeline;var t=function(m,s){if(s in m){var c=m[s];return typeof c!="number"?(delete m[s],c):null}},r=function(m,s){s&&(s.phase&&(m.name=s.phase),s.percent&&(m.offset=s.percent))},o=t(n,"delay"),a=t(n,"endDelay"),l=Ye.apply(this,[i,n]),u=new ve(l,e);if(e instanceof H){if(l.pause(),e instanceof ViewTimeline){var h=p.get(u);h.timeRange=We(n.timeRange),r(h.timeRange.start,o),r(h.timeRange.end,a)}u.play()}return u}}))throw Error("Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element");if(!Reflect.defineProperty(window,"Animation",{value:ve}))throw Error("Error installing Animation constructor.")})();const Ze="inline";let Ve,re;const se={delay:{phase:"enter",percent:CSS.percent(0)},endDelay:{phase:"enter",percent:CSS.percent(100)},fill:"both"},Je=(f,d)=>{window.CHROMETOBER_TIMELINES||(window.CHROMETOBER_TIMELINES=[]);const v=document.querySelector(`[data-scroll-target="${f.getAttribute("data-scroll-trigger")}"]`),y=new ViewTimeline({subject:f,axis:Ze});if(window.CHROMETOBER_TIMELINES.push(y),d===0){Ve.animate([{translate:"50% 0"}],{timeline:y,...se});const w=document.querySelectorAll(".book-instruction :is(span, svg)");w.forEach((S,E)=>{S.animate([{translate:`0 ${w.length-E}50%`}],{timeline:y,...se})})}v.animate([{transform:`translateZ(${(re.length-d)*6}px)`},{transform:`translateZ(${(re.length-(re.length-d))*2}px)`}],{timeline:y,...se}),v.querySelector(".page__paper").animate([{transform:"rotateY(0deg)"},{transform:"rotateY(-180deg)"}],{timeline:y,...se})},et=()=>{Ve=document.querySelector(".book"),re=document.querySelectorAll("[data-scroll-trigger]"),document.querySelector("[data-scroll-intro]"),document.querySelector("[data-scroll-outro]"),document.querySelector("[data-scroll-intro-two]"),re.forEach(Je),document.querySelectorAll("article").forEach(f=>{const d=f.querySelector("h2").innerText;f.addEventListener("click",()=>{f.querySelector("a")?.click(),window.ga&&ga("send","event",{event_action:"Read more",event_label:d,event_category:"Chrometober Book",non_interaction:!1})})})};et();const tt=()=>{const f=document.querySelector(".scarecrow__eye--left"),d=document.querySelector(".scarecrow__eye--right");f.animate([{transform:"translateX(-150%) scale(0.3)"},{transform:"none"}],{timeline:CHROMETOBER_TIMELINES[0],timeRange:"enter 25% 90%",fill:"both"}),d.animate([{transform:"translateX(-100%) scale(0.5)"},{transform:"none"}],{timeline:CHROMETOBER_TIMELINES[0],timeRange:"enter 25% 90%",fill:"both"})};tt();const nt=()=>{const f=document.querySelector(".coffin__lid"),d=document.querySelector(".coffin__zombie");f.animate([{transform:"rotate(-1deg)"},{transform:"rotate(3deg) scale(1.1) translateX(18%)"}],{timeline:CHROMETOBER_TIMELINES[2],timeRange:"enter 105% 180%",fill:"both"}),d.animate([{transform:"translateX(-20%)"},{transform:"translateX(0%)"}],{timeline:CHROMETOBER_TIMELINES[2],timeRange:"enter 20% 95%",fill:"backwards"}),d.animate([{transform:"translateX(0%)"},{transform:"translateX(-20%)"}],{timeline:CHROMETOBER_TIMELINES[2],timeRange:"enter 105% 180%",fill:"forwards"})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&nt();const je=(f,d,v,y,w)=>{const S=d-f,E=y-v;return it(v,y,v+((w-f)/S*E||0))},it=(f,d,v)=>Math.min(Math.max(v,f),d);let te;const W=document.querySelector(".wand-canvas");let F=W.getContext("2d");const Be=W.closest(".page__side"),ee=[],Ue=({x:f,y:d,movementX:v,movementY:y})=>{const w=W.height*.05,S=W.height*.25,E=je(0,100,w,S,Math.max(Math.abs(v),Math.abs(y))),P=je(w,S,1,5,E),{left:k,top:I,width:R,height:M}=W.getBoundingClientRect(),U={hue:Math.random()*359,x:f-k,y:d-I,size:E,rate:P};ee.push(U)},He=()=>{F.clearRect(0,0,W.width,W.height),Be.className.indexOf("in-view")===-1&&te&&(ee.length=0,cancelAnimationFrame(te),window.removeEventListener("pointermove",Ue),window.removeEventListener("resize",Te));for(let f=0;f<ee.length;f++){const d=ee[f];F.strokeStyle=F.fillStyle=`hsla(${d.hue}, 80%, 80%, 0.5)`,F.beginPath(),F.arc(d.x,d.y,d.size*.5,0,2*Math.PI),F.stroke(),F.fill(),d.size-=d.rate,d.y+=d.rate,d.size<=0&&ee.splice(f,1)}te=requestAnimationFrame(He)},Te=()=>{const{height:f,width:d}=W.getBoundingClientRect();W.height=f,W.width=d,F=W.getContext("2d"),ee.length=0,te&&cancelAnimationFrame(te),te=requestAnimationFrame(He)},rt=()=>{window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&setTimeout(()=>{Te(),window.addEventListener("pointermove",Ue),window.addEventListener("resize",Te)},500)};Be.triggers=[{el:null,action:rt,trigger:null}];const at=()=>{const f=document.querySelector(".gargoyle"),d=f.querySelector(".gargoyle__wing--left"),v=f.querySelector(".gargoyle__wing--right");f.animate([{transform:"translateY(0)"},{transform:"translateY(-200%)"}],{fill:"both",timeline:CHROMETOBER_TIMELINES[2],delay:{phase:"enter",percent:CSS.percent(110)},endDelay:{phase:"enter",percent:CSS.percent(150)}}),d.animate([{rotate:"0deg"},{rotate:"-35deg",offset:.5},{rotate:"0deg"}],{iterations:4,timeline:CHROMETOBER_TIMELINES[2],delay:{phase:"enter",percent:CSS.percent(90)},endDelay:{phase:"enter",percent:CSS.percent(150)},fill:"both"}),v.animate([{rotate:"0deg"},{rotate:"35deg",offset:.5},{rotate:"0deg"}],{iterations:4,timeline:CHROMETOBER_TIMELINES[2],delay:{phase:"enter",percent:CSS.percent(90)},endDelay:{phase:"enter",percent:CSS.percent(150)},fill:"both"})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&at();const ot=()=>{const f=document.querySelector(".bat");f.animate([{transform:"translateX(100%) translateY(-100%) scale(0.1)"},{transform:"none"}],{timeline:CHROMETOBER_TIMELINES[1],timeRange:"enter 25% 90%",fill:"backwards"}),f.animate([{transform:"none"},{transform:"translateX(-100%) translateY(-100%) scale(0.1)"}],{timeline:CHROMETOBER_TIMELINES[1],timeRange:"enter 110% 150%",fill:"forwards"})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&ot();const lt=()=>{document.querySelector(".bunny").animate([{rotate:"90deg"},{rotate:"0deg",translate:"0 0 "},{translate:"-50% 0",rotate:"0deg"}],{timeline:CHROMETOBER_TIMELINES[1],delay:{phase:"enter",percent:CSS.percent(25)},endDelay:{phase:"enter",percent:CSS.percent(90)},fill:"both"})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&lt();const st=()=>{document.querySelector(".owl__owl").animate([{translate:"0% 110%"},{translate:"0% 10%"}],{timeline:CHROMETOBER_TIMELINES[1],delay:{phase:"enter",percent:CSS.percent(80)},endDelay:{phase:"enter",percent:CSS.percent(90)},fill:"both"})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&st();const ct=(f,d,v,y,w)=>{const S=d-f,E=y-v;return v+((w-f)/S*E||0)},qe=15,De=80,ce=document.querySelector(".portrait"),ut=ce.closest(".page__side"),mt=ce.querySelector(".portrait__eyes"),ft=ce.querySelector(".portrait__eye--left:not(.portrait__eye--mover)"),dt=ce.querySelector(".portrait__eye--right:not(.portrait__eye--mover)"),ht=({x:f,y:d})=>{const v=ft.getBoundingClientRect(),y=dt.getBoundingClientRect(),w={lx:v.left+v.width*.5,rx:y.left+y.width*.5,ly:v.top+v.height*.5,ry:y.top+y.height*.5};Object.entries(w).forEach(([S,E])=>{const P=ct(E-De,E+De,-qe,qe,S.indexOf("x")!==-1?f:d);mt.style.setProperty(`--${S}`,P)})};window.matchMedia("(prefers-reduced-motion: no-preference)").matches&&(ut.triggers=[{el:window,trigger:"pointermove",action:ht}]);
diff --git a/src/site/content/en/third_party/chrometober-2022/index.html b/src/site/content/en/third_party/chrometober-2022/index.html
new file mode 100644
index 00000000000..11d1f64dbd2
--- /dev/null
+++ b/src/site/content/en/third_party/chrometober-2022/index.html
@@ -0,0 +1,1092 @@
+<!DOCTYPE html>
+<html lang="en" class="inline">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+		<meta name="generator" content="Astro v1.1.5">
+		<title>Chrometober 2022</title>
+		<link rel="icon" type="image/svg+xml" href="/third_party/chrometober-2022/favicon.svg">
+		<link rel="apple-touch-icon" sizes="180x180" href="/third_party/chrometober-2022/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/third_party/chrometober-2022/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/third_party/chrometober-2022/favicon-16x16.png">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Germania+One&family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
+		<!-- <script is:inline type="module" src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script> -->
+	<link rel="stylesheet" href="/third_party/chrometober-2022/assets/index.9ed1d485.css" /><script type="module" src="/third_party/chrometober-2022/hoisted.1780bd6d.js"></script></head>
+	<body>
+		<main class="book-placeholder" aria-label="A book with artful pages and interesting links to articles for October. Turn pages with the arrow keys.">
+    <h1 class="book-instruction" aria-hidden>
+      <span>S</span>
+      <span>c</span>
+      <span>r</span>
+      <span>o</span>
+      <span>l</span>
+      <span>l</span>
+      <svg viewBox="0 0 448 512" title="arrow-right">
+        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+      </svg>
+    </h1>
+    <ul class="book" style="--count: 7;">
+      <li class="book__page page page--cover-front" data-scroll-target="1" style="--index:0;" aria-label="Fun and frightening tips and tricks. Chrometober 2022. Lift your spirits with supernatural web dev ideas and content!">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 0">
+
+      <picture>
+        <source media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <picture>
+    <source srcset="/third_party/chrometober-2022/assets/chrometober_cover--dark.7266b69c.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+    <img src="/third_party/chrometober-2022/assets/chrometober_cover.ce0f1ead.svg" class="page__background" alt="Fun and frightening tips and tricks. Chrometober 2022. Lift your spirits with supernatural web dev ideas and content!" aria-hidden="true" height="214" width="150">
+</picture>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 1">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img class="page__feature fence" src="/third_party/chrometober-2022/assets/Fence.0bdb1d1b.svg" alt="A spooky fence." width="300" height="133">
+<svg class="page__feature eyes" viewBox="0 0 253 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Five pairs of disembodied eyes stare out from the shadowy space at the bottom of a picket fence.</title>
+  <path d="M252.14 107.25c.69-15.37-11.56-27.86-24.01-35.27 2.07-3.56 3.26-7.71 4.06-11.71.3-2.49.29-4.97 0-7.38a31.47 31.47 0 0 0-1.46-6.28c-4.2-14.09-18.13-23.54-32.79-23.57-1.83 0-3.68.14-5.51.42-1.92.21-3.7.81-5.48 1.1C183.39.26 154.64-3 136.42 7.11a42.45 42.45 0 0 0-3.83 2.03c-6.17 3.72-11.24 9.13-14.25 16.36-.76 1.64-1.41 3.31-1.93 4.99-1.19-1.19-2.37-2.45-3.63-3.64-1.26-1.2-2.58-2.33-4.04-3.27-16.63-12.06-39.45-17.1-58.55-7.36-1.46.65-2.9 1.37-4.31 2.16-1.49.55-2.67 1.44-4.15 2.33A35.128 35.128 0 0 0 38.22 16C28.98 5.9 15.05-1.22 1.12 1.45c.3 16-.3 31.71-.29 47.85v56.48l251.33 1.48-.02-.01Z" fill="#000"/>
+  <g class="dark-eyes dark-eyes--two" clip-path="url(#darkEyesTwo)">
+    <path d="M134.87 75.4c-2.55-6.99-10.32-10.58-17.36-8.01-4.01 1.46-6.91 4.6-8.2 8.32-.42-.91-.99-1.75-1.72-2.48-3.89-3.89-10.82-3.26-15.48 1.4s-5.29 11.59-1.4 15.48c3.89 3.89 10.82 3.26 15.48-1.4 1.35-1.35 2.36-2.89 3.02-4.49.05.16.1.32.16.49 2.55 6.99 10.32 10.58 17.36 8.01 7.04-2.57 10.68-10.32 8.13-17.31l.01-.01Z" fill="#fff"/>
+    <path d="M121.039 87.03c.956-1.85-.293-4.395-2.79-5.686-2.498-1.29-5.297-.837-6.253 1.013-.956 1.85.293 4.395 2.791 5.686 2.497 1.29 5.297.837 6.252-1.012Z" fill="#000"/>
+    <path d="M103.686 87.077c1.912-2.06 2.153-4.946.538-6.445-1.616-1.499-4.475-1.043-6.387 1.017-1.913 2.06-2.153 4.947-.538 6.445 1.615 1.5 4.475 1.044 6.387-1.017Z" fill="#000"/>
+  </g>
+  <path d="M74.34 65.98c-6.27-2.16-12.75.16-14.49 5.19-.03.07-.05.15-.07.22-4.05-3.16-10.59-1.87-14.83 3.01-4.34 5.01-4.61 11.89-.59 15.38 4.02 3.49 10.8 2.25 15.14-2.75 1.63-1.88 2.69-4.02 3.16-6.15 1.42 1.41 3.26 2.58 5.39 3.32 6.27 2.16 12.75-.16 14.49-5.19 1.74-5.03-1.94-10.86-8.21-13.02l.01-.01Z" fill="#fff"/>
+  <path d="M52.98 78.49c2.618 0 4.74-2.055 4.74-4.59 0-2.535-2.122-4.59-4.74-4.59-2.618 0-4.74 2.055-4.74 4.59 0 2.535 2.122 4.59 4.74 4.59Z" fill="#000"/>
+  <path d="M67.5 74.05c2.618 0 4.74-2.055 4.74-4.59 0-2.535-2.122-4.59-4.74-4.59-2.618 0-4.74 2.055-4.74 4.59 0 2.535 2.122 4.59 4.74 4.59Z" fill="#000"/>
+  <g class="dark-eyes dark-eyes--one" clip-path="url(#darkEyesOne)">
+    <path d="M53.44 44.42c-5.2-6.02-13.18-7.66-17.82-3.65-.13.11-.26.23-.38.35-.43-.77-.96-1.49-1.6-2.13-5.09-5.09-14.97-3.47-22.07 3.62-7.09 7.09-8.72 16.97-3.62 22.07 5.09 5.09 14.97 3.47 22.07-3.62 1.75-1.75 3.17-3.67 4.23-5.65.63 1.22 1.43 2.4 2.39 3.51 5.2 6.02 13.18 7.66 17.82 3.65 4.64-4.01 4.19-12.14-1.01-18.16l-.01.01Z" fill="#fff"/>
+    <path d="M29.078 58.467c2.689-3.085 3.104-7.124.927-9.022-2.178-1.898-6.123-.936-8.812 2.149-2.689 3.085-3.104 7.124-.927 9.022 2.178 1.898 6.123.936 8.812-2.149Z" fill="#000"/>
+    <path d="M48.699 58.955c1.597-2.164.349-5.796-2.789-8.111-3.137-2.316-6.975-2.438-8.572-.275-1.597 2.165-.349 5.796 2.788 8.111 3.138 2.316 6.976 2.439 8.573.275Z" fill="#000"/>
+  </g>
+  <path d="M150.74 38c-3.86-6.68-14.64-7.67-24.09-2.21-4.59 2.65-8.01 6.33-9.88 10.18-2.18-2.16-5.26-3.86-8.87-4.64-7.96-1.74-15.44 1.59-16.72 7.43-1.27 5.84 4.15 11.98 12.11 13.71 5.74 1.25 11.23-.13 14.33-3.19 4.53 5.27 14.33 5.7 23.01.69 9.45-5.46 13.98-15.29 10.13-21.97h-.02Z" fill="#fff"/>
+  <path d="m85.052 32.679 19.497 1.572c8.153.657 14.238 7.81 13.581 15.963l-34.27-2.763 1.192-14.772Z" fill="#000"/>
+  <path d="m152.725 29.4-34.73 21.066-.332-.547c-4.06-6.694-1.924-15.417 4.77-19.478l22.615-13.717 7.686 12.67-.009.006Z" fill="#000"/>
+  <path d="M107.198 59.106c1.772-.317 2.544-4.297 1.724-8.892-.82-4.594-2.921-8.062-4.694-7.745-1.772.316-2.544 4.297-1.724 8.891.82 4.594 2.921 8.062 4.694 7.746Z" fill="#000"/>
+  <path d="M131.261 56.168c1.273-1.273-.37-4.98-3.67-8.28-3.3-3.3-7.007-4.943-8.281-3.67-1.273 1.273.37 4.98 3.67 8.28 3.3 3.3 7.007 4.944 8.281 3.67Z" fill="#000"/>
+  <path d="M200.08 66.58c-5.95-4.43-13.1-5.23-17.34-2.31-3.74-3.85-11.27-4.05-17.97-.19-7.52 4.34-11.13 12.17-8.06 17.48 3.07 5.31 11.65 6.1 19.17 1.76 2.25-1.3 4.14-2.9 5.61-4.66 1.28 2.08 3.07 4.06 5.31 5.73 6.96 5.19 15.57 5.41 19.24.49 3.67-4.92 1-13.11-5.96-18.3Z" fill="#fff"/>
+  <path d="M172.393 77.166c3.52-1.476 5.357-5.096 4.103-8.086-1.254-2.99-5.123-4.217-8.643-2.741-3.519 1.476-5.356 5.096-4.102 8.085 1.254 2.99 5.123 4.217 8.642 2.742Z" fill="#000"/>
+  <path d="M199.222 78.185c2.015-2.686.995-6.854-2.279-9.31-3.273-2.456-7.56-2.27-9.576.416-2.015 2.686-.995 6.854 2.279 9.31 3.273 2.456 7.561 2.27 9.576-.416Z" fill="#000"/>
+  <path d="m147.666 66.862 17.865-7.966c7.471-3.33 16.239.03 19.57 7.501l-31.4 14-6.035-13.535Z" fill="#000"/>
+  <path d="m216.162 87.186-35.178-20.31.32-.555c3.915-6.78 12.59-9.105 19.371-5.19l22.906 13.225-7.41 12.835-.009-.005Z" fill="#000"/>
+  <defs>
+    <clipPath id="darkEyesOne" class="dark-eyes-clip">
+      <path d="M53.44 44.42c-5.2-6.02-13.18-7.66-17.82-3.65-.13.11-.26.23-.38.35-.43-.77-.96-1.49-1.6-2.13-5.09-5.09-14.97-3.47-22.07 3.62-7.09 7.09-8.72 16.97-3.62 22.07 5.09 5.09 14.97 3.47 22.07-3.62 1.75-1.75 3.17-3.67 4.23-5.65.63 1.22 1.43 2.4 2.39 3.51 5.2 6.02 13.18 7.66 17.82 3.65 4.64-4.01 4.19-12.14-1.01-18.16l-.01.01Z" fill="#fff"/>
+    </clipPath>
+    <clipPath id="darkEyesTwo" class="dark-eyes-clip">
+      <path d="M134.87 75.4c-2.55-6.99-10.32-10.58-17.36-8.01-4.01 1.46-6.91 4.6-8.2 8.32-.42-.91-.99-1.75-1.72-2.48-3.89-3.89-10.82-3.26-15.48 1.4s-5.29 11.59-1.4 15.48c3.89 3.89 10.82 3.26 15.48-1.4 1.35-1.35 2.36-2.89 3.02-4.49.05.16.1.32.16.49 2.55 6.99 10.32 10.58 17.36 8.01 7.04-2.57 10.68-10.32 8.13-17.31l.01-.01Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature scarecrow" viewBox="0 0 199 247" fill="none" xmlns="http://www.w3.org/2000/svg" alt="An illustrated cartoon scarecrow attached to its frame. It is smiling and wearing a brown hat, red shirt, and gray trousers.">
+  <title>An illustrated cartoon scarecrow attached to its frame. It is smiling and wearing a brown hat, red shirt, and gray trousers.</title>
+  <path d="M90.13 59.49a2.78 2.78 0 1 0-5.56 0v184.64a2.78 2.78 0 0 0 5.56 0V59.49Z" fill="#594B4B"/>
+  <path d="m195.817 101.086.001-.01a2.62 2.62 0 0 0-2.474-2.758L8.656 88.283a2.62 2.62 0 0 0-2.758 2.474v.01a2.62 2.62 0 0 0 2.473 2.758L193.06 103.56a2.619 2.619 0 0 0 2.758-2.474Z" fill="#594B4B"/>
+  <path d="M115.41 223.18c-4.04-8.01-3.79-13.79-3.79-13.79s8.06 1 13.16 8.13c5.09 7.13 4.42 10.21 2.18 12.24-2.24 2.03-7.51 1.43-11.55-6.58Z" fill="#E9BD66"/>
+  <path d="M109.16 226.44c-.73-8.94 1.93-16.32 1.93-16.32s4.64 6.56 6.37 15.15c1.73 8.58-.88 10.51-3.24 10.84-2.36.33-4.33-.74-5.06-9.67Z" fill="#E9BD66"/>
+  <path d="M103.62 218.01c4.78-7.59 8.04-8.64 8.04-8.64s3.63 5.04-.07 12.98c-3.69 7.94-7.55 10.05-10.09 8.52-2.55-1.53-2.66-5.28 2.12-12.86Z" fill="#E9BD66"/>
+  <path d="M115.41 223.18c-4.04-8.01-3.79-13.79-3.79-13.79s8.06 1 13.16 8.13c5.09 7.13 4.42 10.21 2.18 12.24-2.24 2.03-7.51 1.43-11.55-6.58Z" fill="#E8C280"/>
+  <path d="M109.16 226.44c-.73-8.94 1.93-16.32 1.93-16.32s4.64 6.56 6.37 15.15c1.73 8.58-.88 10.51-3.24 10.84-2.36.33-4.33-.74-5.06-9.67Z" fill="#E8C280"/>
+  <path d="M103.62 218.01c4.78-7.59 8.04-8.64 8.04-8.64s3.63 5.04-.07 12.98c-3.69 7.94-7.55 10.05-10.09 8.52-2.55-1.53-2.66-5.28 2.12-12.86Z" fill="#E8C280"/>
+  <path d="M64.75 220.19c-.99-8.92 1.26-14.25 1.26-14.25s7.21 3.75 9.49 12.21c2.28 8.46.58 11.11-2.23 12.23-2.81 1.12-7.53-1.28-8.52-10.2v.01Z" fill="#E8C280"/>
+  <path d="M57.75 221.06c2.43-8.63 7.51-14.62 7.51-14.62s2.05 7.77.68 16.42c-1.37 8.64-4.49 9.54-6.82 9.03-2.33-.51-3.8-2.2-1.36-10.83h-.01Z" fill="#E8C280"/>
+  <path d="M55.51 211.23c7.13-5.44 10.55-5.28 10.55-5.28s1.64 5.99-4.6 12.14c-6.23 6.15-10.58 6.78-12.43 4.46-1.85-2.32-.64-5.88 6.48-11.31v-.01Z" fill="#E8C280"/>
+  <path d="M111.42 219.71c-10.86 2.13-20.46-4.35-21.39-14.24-1.46-13.27-3.73-32.28-5.19-45.55-.85-7.73 4.37-14.82 12-16.31 7.63-1.49 15.13 3.11 17.26 10.59 3.65 12.84 8.12 31.43 11.77 44.26 2.87 9.51-3.58 19.12-14.45 21.25Z" fill="#7F7F94"/>
+  <path d="M63.83 218.45c-10.76-2.6-16.79-12.48-13.51-21.86l15.97-48.05c2.42-7.29 10.04-11.47 17.51-9.67l.27.06c7.47 1.8 12.34 8.99 11.17 16.59-2.04 13.26-7.37 36.37-9.42 49.63-1.36 9.84-11.23 15.89-21.99 13.29v.01Z" fill="#7F7F94"/>
+  <path d="m56.48 177.4 6.72-19.7 10.58 3.56c1.48.51 2.26 2.11 1.75 3.59l-5.01 14.55a2.815 2.815 0 0 1-3.55 1.76l-10.49-3.76Z" fill="#492F2F"/>
+  <path d="m115.59 155.26-49.84-3.96c-1.2-.1-2.09-1.14-2-2.34l.44-5.51c.1-1.2 1.14-2.09 2.34-2l49.84 3.96c1.2.1 2.09 1.14 2 2.34l-.44 5.51c-.1 1.2-1.14 2.09-2.34 2Z" fill="#492F2F"/>
+  <path d="M184.4 115c-8.92-.95-15.67-4.95-15.67-4.95s7.32-3.32 16.07-3.42c8.75-.09 14.13 2.49 14.02 4.87-.11 2.38-5.51 4.45-14.42 3.5Z" fill="#E8C280"/>
+  <path d="M181.4 120.87c-7.83-4.38-12.47-10.7-12.47-10.7s8.03-.19 16.12 3.16c8.08 3.35 12.02 7.84 10.98 9.98-1.04 2.14-6.82 1.93-14.64-2.44h.01Z" fill="#E8C280"/>
+  <path d="M173.34 120.84c-4.89-7.51-4.75-10.68-4.75-10.68s5.37-.59 10.89 6.2c5.52 6.78 6.09 10.94 4.01 12.31-2.08 1.37-5.27-.32-10.15-7.83Z" fill="#E8C280"/>
+  <path d="M14.24 104.12c8.96.38 16.23-2.56 16.23-2.56s-6.74-4.38-15.38-5.77C6.45 94.4.74 96.15.5 98.52c-.24 2.37 4.79 5.22 13.74 5.6Z" fill="#E8C280"/>
+  <path d="M16.33 110.37c8.39-3.16 13.92-8.73 13.92-8.73s-7.92-1.38-16.41.73-13.05 5.96-12.34 8.24c.71 2.27 6.45 2.92 14.84-.24h-.01Z" fill="#E8C280"/>
+  <path d="M24.31 111.54c5.95-6.7 6.29-9.85 6.29-9.85s-5.22-1.38-11.7 4.51c-6.47 5.89-7.65 9.92-5.8 11.58 1.85 1.66 5.26.46 11.21-6.24Z" fill="#E8C280"/>
+  <path d="m26.02 95.61 147.6 9.88c1.3.09 2.28 1.21 2.2 2.51l-.59 33.54a2.356 2.356 0 0 1-2.84 2.15l-51.38-11.49 1.43 14.65a2.357 2.357 0 0 1-2.53 2.45l-57.87-4.25a2.361 2.361 0 0 1-2.17-2.65l1.23-12.35-39.98 6.73c-1.5.19-2.8-1.07-2.64-2.58l5.03-36.47c.13-1.27 1.24-2.2 2.5-2.12h.01Z" fill="#BB6565"/>
+  <path d="m153.92 139.65-21.08-4.78.15-7.87c.03-1.56 1.32-2.8 2.88-2.77l15.38.31c1.55.03 2.78 1.3 2.77 2.84l-.1 12.27Z" fill="#968083"/>
+  <path d="m38.66 96.43 21.08 1.49-.15 11.16a2.826 2.826 0 0 1-2.88 2.77l-15.38-.31a2.823 2.823 0 0 1-2.77-2.84l.1-12.27Z" fill="#968083"/>
+  <path d="m88.59 147.02-20.77-1.44.11-11.14a2.81 2.81 0 0 1 3.02-2.61l15.04.49c1.54.11 2.71 1.44 2.61 2.98l-.02 11.72h.01Z" fill="#968083"/>
+  <path d="M93.22 148.71c-.68 0-1.23-.55-1.23-1.23v-44.61a1.23 1.23 0 1 1 2.46 0v44.61c0 .68-.55 1.23-1.23 1.23Z" fill="#000"/>
+  <path d="M101.71 127.68a3.88 3.88 0 0 1-3.87-3.87 3.88 3.88 0 0 1 3.87-3.87 3.88 3.88 0 0 1 3.87 3.87 3.88 3.88 0 0 1-3.87 3.87Zm0-5.27c-.77 0-1.4.63-1.4 1.4 0 .77.63 1.4 1.4 1.4.77 0 1.4-.63 1.4-1.4 0-.77-.63-1.4-1.4-1.4Z" fill="#000"/>
+  <path d="M101.71 143.87a3.88 3.88 0 0 1-3.87-3.87 3.88 3.88 0 0 1 3.87-3.87 3.88 3.88 0 0 1 3.87 3.87 3.88 3.88 0 0 1-3.87 3.87Zm0-5.27c-.77 0-1.4.63-1.4 1.4 0 .77.63 1.4 1.4 1.4.77 0 1.4-.63 1.4-1.4 0-.77-.63-1.4-1.4-1.4Z" fill="#000"/>
+  <path d="m63.14 58.49 59.72 1.56 5.82 23.11c.32 1.28.41 2.62.21 3.92-.1.69-.24 1.37-.42 2.05-.13.48-.27.96-.44 1.43-.17.46-.36.91-.57 1.36-.21.45-.43.89-.67 1.33-2.76 4.23-6.38 8.05-11.4 9.31 1.44 1.94 2.86 4.18 3.64 6.7.79 2.52-1.49 4.55-3.98 4.72-3.41.12-5.72-2.8-8.41-4.49-1.37 2.4-1.56 5.79-4.13 7.5-1.59.84-3.44.73-4.57-1.18-.82-1.9-1.03-3.77-.92-5.62-1.37 2.4-2.78 5.41-5.57 5.56-3.41.12-4.11-3.94-4.26-6.73-3.79 1.33-7.95 3.88-12.2 2.41-4.23-1.78-1.79-6.6 1.38-7.96-2.12-.74-4.26-1.17-6.03-2.2-.39-.19-.78-.39-1.16-.6-3.44-1.88-7.3-5.67-9.26-9.79-.7-1.47-.93-3.12-.71-4.73l3.91-27.65.02-.01Z" fill="#E8C280"/>
+  <path d="M64.55 55.2c7.06-24.96 22.42-34.66 22.42-34.66-.31-2.01-.48-4.02-.42-5.87C86.83 6.4 89.59-.34 94.81.39c5.23.73 6.89 8.01 5.22 15.91-.02.1-.05.19-.07.29 2.3-1.54 4.67-2.9 6.8-3.7 7.73-2.92 13.93-1.96 15.4 2.88 1.31 4.34-2.35 8.48-8.78 10.6 5.66 2.44 9.24 6.04 7.62 10.02-1.51 3.73-6.21 4.51-11.58 3.1l12.85 19.26-57.73-3.55h.01Z" fill="#5E3D3D"/>
+  <path d="m65.1 55.21 54.84 2.76c1.88.1 3.09-1.97 2.08-3.56l-5.3-8.33c-.4-.64-1.09-1.03-1.84-1.07l-46.85-2.12c-1.03-.05-1.96.58-2.3 1.55l-2.69 7.69c-.51 1.46.52 3 2.07 3.08h-.01Z" fill="#492F2F"/>
+  <path d="M157.07 65.18c2.61.1 3.57-3.16 1.27-4.32-10.7-5.4-35.86-6.08-35.86-6.08l-54.3-1.19s-29.77-.45-37.08 2.18c-2.49.89-1.89 4.34.77 4.44l125.21 4.98-.01-.01Z" fill="#5E3D3D"/>
+  <path d="M86.35 88.269c6.948-2.954 10.89-9.324 8.805-14.23-2.085-4.904-9.408-6.486-16.356-3.532-6.948 2.953-10.89 9.324-8.805 14.228 2.085 4.905 9.408 6.487 16.356 3.534Z" fill="#fff"/>
+  <path d="M115.664 86.57c2.693-4.367-.12-10.988-6.283-14.789-6.163-3.8-13.342-3.34-16.035 1.027-2.693 4.367.12 10.988 6.282 14.788 6.163 3.8 13.343 3.341 16.036-1.026Z" fill="#fff"/>
+  <path d="M90.587 81.039c1.4-3.132.898-6.4-1.118-7.302-2.017-.901-4.787.906-6.186 4.038-1.4 3.13-.899 6.4 1.118 7.301 2.017.902 4.786-.906 6.186-4.037Z" fill="#000" class="scarecrow__eye scarecrow__eye--left"/>
+  <path d="M110.566 85.214c2.097-1.03 2.556-4.392 1.025-7.51-1.531-3.119-4.472-4.812-6.569-3.782-2.097 1.03-2.556 4.392-1.025 7.51 1.531 3.118 4.472 4.812 6.569 3.782Z" fill="#000" class="scarecrow__eye scarecrow__eye--right"/>
+  <path d="M101.58 91.85H90.92c-1.2 0-1.94-1.48-1.33-2.66l5.18-9.36c.59-1.13 2.03-1.15 2.64-.04l5.48 9.36c.65 1.17-.09 2.69-1.31 2.69v.01Z" fill="#D17B54"/>
+  <path d="M117.2 91.28c-.45-.51-1.22-.57-1.74-.12-.51.45-1.04.87-1.57 1.26l-.62-.87a1.233 1.233 0 0 0-2 1.44l.58.8c-.7.42-1.42.79-2.15 1.13l-.48-.93c-.31-.6-1.06-.84-1.66-.53-.6.31-.84 1.06-.53 1.66l.37.72c-1.22.42-2.5.74-3.84.97l-.16-.79a1.24 1.24 0 0 0-1.46-.96c-.67.14-1.09.79-.96 1.46l.13.61c-.68.06-1.38.11-2.1.13-1.33.04-2.63.04-3.89 0v-.98a1.23 1.23 0 1 0-2.46 0v.87c-2.68-.18-5.19-.53-7.55-1.06l.31-1.15a1.23 1.23 0 0 0-.86-1.51c-.65-.18-1.33.21-1.51.86l-.33 1.19c-1.86-.54-3.6-1.2-5.25-1.98l.33-.69c.29-.61.03-1.35-.58-1.64-.62-.3-1.35-.03-1.64.58l-.3.62c-.8-.46-1.58-.95-2.33-1.47-.56-.39-1.33-.26-1.72.31-.39.56-.25 1.33.31 1.72.86.6 1.75 1.16 2.67 1.68l-.42.87c-.29.61-.03 1.35.58 1.64a1.23 1.23 0 0 0 1.64-.58l.38-.8c1.78.84 3.67 1.55 5.67 2.13l-.34 1.25c-.18.66.21 1.33.86 1.51.11.03.22.04.33.04.54 0 1.04-.36 1.19-.91l.35-1.28c2.56.58 5.29.96 8.2 1.15v.95a1.23 1.23 0 1 0 2.46 0v-.84c.6.02 1.2.02 1.81.02.71 0 1.43-.01 2.16-.03.86-.02 1.71-.08 2.53-.16l.26 1.26c.12.58.63.98 1.21.98.08 0 .17 0 .25-.03.67-.14 1.09-.79.96-1.46l-.23-1.09c1.56-.28 3.05-.67 4.48-1.18l.57 1.09c.22.42.65.67 1.1.67a1.239 1.239 0 0 0 1.1-1.8l-.46-.89c.84-.39 1.66-.83 2.46-1.31l.66.91c.24.34.62.51 1 .51.25 0 .5-.08.72-.23.55-.4.68-1.17.28-1.72l-.61-.85c.6-.44 1.18-.91 1.75-1.4.51-.45.57-1.23.12-1.74l-.03-.01Z" fill="#000"/>
+  <path d="M75.89 68.69c-.38 0-.76-.18-1-.51-.4-.55-.27-1.32.28-1.72.32-.23 7.84-5.53 17.59-.68.61.3.86 1.04.55 1.65-.3.61-1.05.86-1.65.55-8.38-4.17-14.78.28-15.05.47-.22.16-.47.23-.72.23v.01Z" fill="#000"/>
+  <path d="M114.45 72.12c-.34 0-.67-.14-.92-.41-5.35-5.93-12.73-4.28-13.04-4.21-.66.16-1.33-.25-1.48-.91-.16-.66.25-1.33.91-1.48.37-.09 9.09-2.09 15.44 4.95.46.51.42 1.29-.09 1.74-.24.21-.53.32-.83.32h.01Z" fill="#000"/>
+</svg>
+<article class="content-block content-block--one astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">New in Chrome</h2>
+  <p id="New-in-Chrome" class="astro-SCMHTS4H">Lift your spirits with a round up of all the tools and features in Chrome.</p>
+  <a href="https://www.youtube.com/watch?v=qwdN1fJA_d8&#38;list=PLNYkxOF6rcIDfz8XEA3loxY32tYh7CI3m" target="_blank" rel="noopener" aria-describedby="New-in-Chrome" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--two astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrometober <abbr title='Ask me anything'>AMA</abbr></h2>
+  <p id="Chrometober-<abbr-title='Ask-me-anything'>AMA</abbr>" class="astro-SCMHTS4H">Join us live on Thursday October 13 as we give you a peek into how we built this site using scroll-linked animations.</p>
+  <a href="https://web.dev/spaces" target="_blank" rel="noopener" aria-describedby="Chrometober-<abbr-title='Ask-me-anything'>AMA</abbr>" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="2" style="--index:1;" aria-label="page 1">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 1">
+      <a class="page__bookmark" href="#trigger-1">
+          <span class="sr-only">Navigate to page 2</span>
+        </a>
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread1--dark.01ab51a6.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread1.27da2518.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature pumpkin--one" viewBox="0 0 72 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A carved pumpkin that is in anguish.</title>
+  <path d="m46.9 16.5-11.29.81 2.87-14.83A2.274 2.274 0 0 1 40.72.64h3.22c1.21 0 2.21.95 2.27 2.16l.7 13.7h-.01Z" fill="#778D77"/>
+  <path d="m52.72 13.23-35.35 2.56C8.54 16.83 1.65 23.73 1 33.06c-.64 9.33 5.19 16.26 14.04 16.51l34.13.28c.34.02 21.11 2.87 22.53-17.72.7-10.13-7.8-18.59-18.99-18.91l.01.01Z" fill="#D66A3A"/>
+  <path d="m60.95 31.16-5.32 3.48c-.78.51-1.92.41-2.54-.24l-4.57-4.71c-.54-.56-1.49-.72-2.26-.39l-9.04 3.91c-.44.19-.95.22-1.42.09l-14.08-3.93c-.86-.24-1.8.08-2.2.75-.5.82-1.77 1.08-2.68.54l-3.01-1.79c-1.04-.62-2.51-.17-2.82.85L7.95 39.81c-.42 1.37 1.5 2.41 2.86 1.54l4.06-2.58c.81-.51 1.98-.38 2.58.31l4.98 5.68c.61.69 1.79.82 2.6.29l6.68-4.4c.82-.54 2.02-.4 2.62.31l3.53 4.17c.78.92 2.47.83 3.1-.17l2.61-4.18c.52-.83 1.82-1.07 2.71-.5l8.31 5.26c.94.59 2.3.3 2.77-.6l1.5-2.88c.46-.88 1.8-1.18 2.74-.61l.21.13c1.25.76 3.01-.05 2.88-1.32l-.79-8.07c-.12-1.19-1.8-1.79-2.93-1.05l-.02.02Z" fill="#000"/>
+  <path d="M45.442 29.008c4.272-1.484 6.828-5.301 5.708-8.525s-5.492-4.635-9.765-3.15c-4.273 1.485-6.828 5.302-5.708 8.526s5.492 4.634 9.765 3.15Z" fill="#000"/>
+  <path d="M32.38 25.866c1.497-2.681.244-6.232-2.799-7.93-3.043-1.7-6.723-.904-8.22 1.777-1.497 2.681-.244 6.232 2.799 7.93 3.042 1.7 6.722.904 8.22-1.777Z" fill="#000"/>
+  <g clip-path="url(#face-one)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-one">
+      <path d="m60.95 31.16-5.32 3.48c-.78.51-1.92.41-2.54-.24l-4.57-4.71c-.54-.56-1.49-.72-2.26-.39l-9.04 3.91c-.44.19-.95.22-1.42.09l-14.08-3.93c-.86-.24-1.8.08-2.2.75-.5.82-1.77 1.08-2.68.54l-3.01-1.79c-1.04-.62-2.51-.17-2.82.85L7.95 39.81c-.42 1.37 1.5 2.41 2.86 1.54l4.06-2.58c.81-.51 1.98-.38 2.58.31l4.98 5.68c.61.69 1.79.82 2.6.29l6.68-4.4c.82-.54 2.02-.4 2.62.31l3.53 4.17c.78.92 2.47.83 3.1-.17l2.61-4.18c.52-.83 1.82-1.07 2.71-.5l8.31 5.26c.94.59 2.3.3 2.77-.6l1.5-2.88c.46-.88 1.8-1.18 2.74-.61l.21.13c1.25.76 3.01-.05 2.88-1.32l-.79-8.07c-.12-1.19-1.8-1.79-2.93-1.05l-.02.02Z" fill="#000"/>
+  <path d="M45.442 29.008c4.272-1.484 6.828-5.301 5.708-8.525s-5.492-4.635-9.765-3.15c-4.273 1.485-6.828 5.302-5.708 8.526s5.492 4.634 9.765 3.15Z" fill="#000"/>
+  <path d="M32.38 25.866c1.497-2.681.244-6.232-2.799-7.93-3.043-1.7-6.723-.904-8.22 1.777-1.497 2.681-.244 6.232 2.799 7.93 3.042 1.7 6.722.904 8.22-1.777Z" fill="#000"/>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature pumpkin--two" viewBox="0 0 74 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A happy carved pumpkin.</title>
+  <path d="m47.77 18.29-13.7-1.66L38.54 2.4c.3-1.16 1.52-1.95 2.9-1.91l3.18.41c1.54.05 2.76 1.13 2.79 2.45l.35 14.94h.01Z" fill="#778D77"/>
+  <path d="M61.73 16.03s-38.7-4.5-39.06-4.51C10.8 11.1.84 20.26.42 31.99 0 43.72 9.28 53.57 21.15 54c.36.01 37.72-.8 38.18-.78 7.66.27 14.17-7.85 14.54-18.15.35-9.81-5.01-18.05-12.14-19.04Z" fill="#D66A3A"/>
+  <path d="M60.1 36.32c-.68.89-1.98 2.02-4.41 2.98 0 2.62-2.28 5.09-5.52 5.76-2.56.54-5.03-.2-6.46-1.72-.7 1.9-2.55 3.48-4.95 3.98-3.43.72-6.7-1.04-7.35-3.92-1.35 1.17-3.32 1.71-5.33 1.28-2.01-.43-3.59-1.73-4.34-3.35-1.17.96-2.7 1.4-4.24 1.07-2.77-.59-4.51-3.44-3.88-6.37.2-.93.61-1.75 1.17-2.42-3.83-4.82-10.24.7-7.36 4.85.22.31.45.62.69.93 5.2 6.53 15.35 10.11 30.18 10.63 14.62.52 24.36-2.36 28.94-8.58.27-.37.51-.73.74-1.1 2.85-4.69-3.98-8.88-7.87-4.03l-.01.01Z" fill="#000"/>
+  <path d="M27.819 32.55c5.157-1.587 8.365-6.032 7.166-9.928-1.199-3.895-6.352-5.766-11.509-4.179-5.157 1.588-8.365 6.033-7.166 9.928 1.2 3.896 6.352 5.767 11.509 4.18Z" fill="#000"/>
+  <path d="M56.806 32.22c2.144-3.538.195-8.64-4.353-11.398-4.549-2.756-9.974-2.123-12.118 1.414-2.144 3.538-.195 8.64 4.353 11.397 4.548 2.757 9.973 2.124 12.118-1.414Z" fill="#000"/>
+  <g clip-path="url(#face-two)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-two">
+      <path d="M60.1 36.32c-.68.89-1.98 2.02-4.41 2.98 0 2.62-2.28 5.09-5.52 5.76-2.56.54-5.03-.2-6.46-1.72-.7 1.9-2.55 3.48-4.95 3.98-3.43.72-6.7-1.04-7.35-3.92-1.35 1.17-3.32 1.71-5.33 1.28-2.01-.43-3.59-1.73-4.34-3.35-1.17.96-2.7 1.4-4.24 1.07-2.77-.59-4.51-3.44-3.88-6.37.2-.93.61-1.75 1.17-2.42-3.83-4.82-10.24.7-7.36 4.85.22.31.45.62.69.93 5.2 6.53 15.35 10.11 30.18 10.63 14.62.52 24.36-2.36 28.94-8.58.27-.37.51-.73.74-1.1 2.85-4.69-3.98-8.88-7.87-4.03l-.01.01Z" fill="#000"/>
+  <path d="M27.819 32.55c5.157-1.587 8.365-6.032 7.166-9.928-1.199-3.895-6.352-5.766-11.509-4.179-5.157 1.588-8.365 6.033-7.166 9.928 1.2 3.896 6.352 5.767 11.509 4.18Z" fill="#000"/>
+  <path d="M56.806 32.22c2.144-3.538.195-8.64-4.353-11.398-4.549-2.756-9.974-2.123-12.118 1.414-2.144 3.538-.195 8.64 4.353 11.397 4.548 2.757 9.973 2.124 12.118-1.414Z" fill="#000"/>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature pumpkin pumpkin--three" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A sad carved pumpkin.</title>
+  <path d="m41.75 18.47-12.36.48 3.65-16.09A2.497 2.497 0 0 1 35.55.92l3.51.11c1.32.04 2.38 1.12 2.41 2.44l.28 14.98v.02Z" fill="#778D77"/>
+  <path d="m50.93 9.95-35.55 4.21C6.51 15.82.89 26.26.43 40.36c-.45 14.1 4.39 24.58 13.31 24.86l34.38.1c.34.03 23.37 4.37 24.37-26.76.49-15.31-10.29-28.25-21.56-28.61Z" fill="#D66A3A"/>
+  <path d="M16.12 57.91c-3.3 1.59-7.3-.89-6.6-4.1 2.13-9.71 8.39-24.93 26.58-24.05 18.22.88 24.49 15.73 26.64 25.01.72 3.13-3.03 5.58-6.35 4.15L36.17 50.2c-1.33-.57-2.89-.54-4.17.07l-15.88 7.65v-.01Z" fill="#000"/>
+  <path d="M21.018 31.5c4.039-1.926 6.054-6.126 4.502-9.381-1.552-3.256-6.084-4.334-10.122-2.409-4.038 1.926-6.053 6.125-4.501 9.38 1.552 3.256 6.083 4.334 10.121 2.41Z" fill="#000"/>
+  <path d="M59.875 30.66c2.3-3.245.776-8.275-3.4-11.235-4.178-2.96-9.428-2.73-11.727.515-2.3 3.245-.776 8.274 3.4 11.234 4.178 2.96 9.428 2.73 11.727-.515Z" fill="#000"/>
+  <g clip-path="url(#face-three)">
+    <g class="pumpkin__flame">
+      <circle fill="orange" r="30" cx="36" cy="52"></circle>
+      <circle fill="yellow" r="15" cx="36" cy="52"></circle>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="face-three">
+      <path d="M16.12 57.91c-3.3 1.59-7.3-.89-6.6-4.1 2.13-9.71 8.39-24.93 26.58-24.05 18.22.88 24.49 15.73 26.64 25.01.72 3.13-3.03 5.58-6.35 4.15L36.17 50.2c-1.33-.57-2.89-.54-4.17.07l-15.88 7.65v-.01Z" fill="#000"/>
+      <path d="M21.018 31.5c4.039-1.926 6.054-6.126 4.502-9.381-1.552-3.256-6.084-4.334-10.122-2.409-4.038 1.926-6.053 6.125-4.501 9.38 1.552 3.256 6.083 4.334 10.121 2.41Z" fill="#000"/>
+      <path d="M59.875 30.66c2.3-3.245.776-8.275-3.4-11.235-4.178-2.96-9.428-2.73-11.727.515-2.3 3.245-.776 8.274 3.4 11.234 4.178 2.96 9.428 2.73 11.727-.515Z" fill="#000"/>
+    </clipPath>
+  </defs>
+</svg>
+
+
+<article class="content-block content-block--three astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Learn Accessibility</h2>
+  <p id="Learn-Accessibility" class="astro-SCMHTS4H">There&#39;s nothing scary about designing for accessibility. Learn how in this new web.dev course.</p>
+  <a href="https://web.dev/learn/accessibility" target="_blank" rel="noopener" aria-describedby="Learn-Accessibility" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 2">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature owl" viewBox="0 0 113 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A tree with red fruit or flowers in its branches. An owl is looking out from a round hollow in the tree’s trunk.</title>
+  <defs>
+    <clipPath id="tree-hole">
+      <path d="M56.97 145.71c27.951 0 50.61-31.242 50.61-69.78S84.921 6.15 56.97 6.15 6.36 37.392 6.36 75.93s22.659 69.78 50.61 69.78Z"/>
+      <path d="M56.97 6.15c27.95 0 50.61 31.24 50.61 69.78 0 38.54-22.66 69.78-50.61 69.78S6.36 114.47 6.36 75.93c0-38.54 22.66-69.78 50.61-69.78Zm0-5.37c-7.8 0-15.33 2.09-22.4 6.21-6.67 3.89-12.64 9.42-17.73 16.44C6.62 37.52.99 56.16.99 75.92c0 19.76 5.63 38.41 15.85 52.49 5.09 7.02 11.05 12.55 17.73 16.44 7.07 4.12 14.61 6.21 22.4 6.21 7.8 0 15.33-2.09 22.4-6.21 6.67-3.89 12.64-9.42 17.73-16.44 10.22-14.09 15.85-32.73 15.85-52.49 0-19.76-5.63-38.41-15.85-52.49-5.09-7.02-11.05-12.55-17.73-16.44C72.3 2.87 64.76.78 56.97.78Z"/>
+    </clipPath>
+  </defs>
+  <path d="M56.97 145.71c27.951 0 50.61-31.242 50.61-69.78S84.921 6.15 56.97 6.15 6.36 37.392 6.36 75.93s22.659 69.78 50.61 69.78Z" fill="#000"/>
+  <path d="M56.97 6.15c27.95 0 50.61 31.24 50.61 69.78 0 38.54-22.66 69.78-50.61 69.78S6.36 114.47 6.36 75.93c0-38.54 22.66-69.78 50.61-69.78Zm0-5.37c-7.8 0-15.33 2.09-22.4 6.21-6.67 3.89-12.64 9.42-17.73 16.44C6.62 37.52.99 56.16.99 75.92c0 19.76 5.63 38.41 15.85 52.49 5.09 7.02 11.05 12.55 17.73 16.44 7.07 4.12 14.61 6.21 22.4 6.21 7.8 0 15.33-2.09 22.4-6.21 6.67-3.89 12.64-9.42 17.73-16.44 10.22-14.09 15.85-32.73 15.85-52.49 0-19.76-5.63-38.41-15.85-52.49-5.09-7.02-11.05-12.55-17.73-16.44C72.3 2.87 64.76.78 56.97.78Z" fill="#000"/>
+  <g clip-path="url(#tree-hole)">
+    <g class="owl__owl">
+      <path d="M56.41 145.71h9.16c14.73 0 26.67-11.941 26.67-26.67V92.25c0-14.73-11.94-26.67-26.67-26.67h-9.16c-14.73 0-26.67 11.94-26.67 26.67v26.79c0 14.729 11.94 26.67 26.67 26.67Z" fill="#5E3743"/>
+      <path d="M27.82 107.96s32.91-4.38 30.71-27.28c2.17 22.52 32.08 21.24 32.08 21.24 10.27-.99 17.8-10.12 16.81-20.39-2.34-24.3-23.94-42.11-48.24-39.77L47.2 42.91C22.9 45.25 5.09 66.85 7.43 91.15c.99 10.27 10.12 17.8 20.39 16.81Z" fill="#B27282"/>
+      <path d="M75.75 41.42 55.43 57.14 27.82 46.4s23.77-17.64 47.93-4.98Z" fill="#D69BAE"/>
+      <path d="M54.32 67.72a7.267 7.267 0 0 1-.52-10.05l23.24-26.82s4.71-5.8 9.62-1.49c4.92 4.31-.45 9.74-.45 9.74l-.98 1.11c1.45-.25 3.16.04 4.53 1.95 2.97 4.18-2.1 7.35-2.1 7.35L63.75 68.15a7.254 7.254 0 0 1-9.43-.43Z" fill="#B27282"/>
+      <path d="M57.46 67.72c2.84-2.67 3.07-7.1.52-10.05L34.74 30.85s-4.71-5.8-9.62-1.49c-4.92 4.31.45 9.74.45 9.74l.98 1.11c-1.45-.25-3.16.04-4.53 1.95-2.97 4.18 2.1 7.35 2.1 7.35l23.91 18.64a7.254 7.254 0 0 0 9.43-.43Z" fill="#B27282"/>
+      <path d="M61.99 55.31c.28 0 .56-.1.78-.3 8.78-7.91 18.07-4.65 18.46-4.51.6.22 1.27-.09 1.49-.69.22-.6-.09-1.27-.69-1.49-.44-.16-10.97-3.92-20.82 4.96-.48.43-.51 1.16-.09 1.64.23.25.55.38.86.38l.01.01Z" fill="#000"/>
+      <path d="M29.21 56.96c.23 0 .46-.07.66-.21 8.35-5.78 17.18-1.44 17.27-1.39.57.29 1.27.06 1.56-.51.29-.57.06-1.27-.51-1.56-.41-.21-10.16-5.01-19.64 1.55-.53.36-.66 1.09-.29 1.61.23.33.59.5.96.5l-.01.01Z" fill="#000"/>
+      <path d="M27.43 62.73c9.48-7.74 22.5-7.55 29.48.29.49-1.08 1.12-2.1 1.89-3.04 6.19-7.58 19.07-7.31 28.77.61s12.54 20.49 6.35 28.07c-6.19 7.58-19.07 7.31-28.77-.61a28.315 28.315 0 0 1-5.23-5.59c-1.47 3.93-4.07 7.65-7.71 10.62-9.7 7.92-23.11 7.55-29.95-.83-6.84-8.38-4.53-21.59 5.17-29.51v-.01Z" fill="#fff"/>
+      <g class="owl__eyes">
+        <path d="M54.392 83.034c2.501-5.838.804-12.166-3.79-14.135-4.594-1.968-10.346 1.17-12.847 7.007-2.501 5.839-.804 12.167 3.79 14.135s10.346-1.169 12.847-7.007Z" fill="#000" class="owl__eye--left"/>
+        <path d="M82.02 86.041c3.868-2.804 3.981-9.245.254-14.387-3.728-5.143-9.886-7.038-13.754-4.234-3.867 2.804-3.98 9.245-.253 14.388 3.728 5.142 9.885 7.037 13.753 4.233Z" fill="#000" class="owl__eye--right"/>
+      </g>
+      <path d="M61.04 78.58c11.84 3.92 18.72 21.3 6.02 36.68-.74.89-2.16.64-2.55-.45-2.71-7.58-17.71-11.06-16.99-18.76.06-.61.49-1.12 1.08-1.28 2.47-.71 9.06-4.66 10.51-14.94.13-.93 1.05-1.54 1.93-1.24v-.01Z" fill="#000"/>
+      <path d="M107.19 86.28s-37.57 11.89-33.36 57.9c0 0 34.51-9.97 33.36-57.9Z" fill="#994E63"/>
+      <path d="M8.12 95.01s39.15 4.5 43.79 50.47c0 0-35.78-3.2-43.79-50.47Z" fill="#994E63"/>
+    </g>
+  </g>
+</svg>
+
+
+
+
+<article class="content-block content-block--four astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Password Manager Compat</h2>
+  <p id="Password-Manager-Compat" class="astro-SCMHTS4H">Know &#39;whoo&#39; has access to your accounts and how password managers can protect you.</p>
+  <a href="https://developer.chrome.com/password-manager-compatible/" target="_blank" rel="noopener" aria-describedby="Password-Manager-Compat" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="3" style="--index:2;" aria-label="page 2">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 2">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread2--dark.2fe47959.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread2.ac451541.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature bat" viewBox="0 0 201 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A pink vampire bat in a cartoon style. It has two prominent fangs.</title>
+  <path d="M64.22 108.41s18.58 9.68 14.13 31.52c-.55 2.7 3.61 4.07 6.07 2.83 20.11-16.09 31.84-10.03 31.84-10.03l-.58-9.56-19.09-11.76-32.38-2.99.01-.01Z" fill="#7C5399"/>
+  <g class="bat__wing bat__wing--left">
+    <path d="M90.25 92s-21.5-.1-25.76-24.41c-2.08-11.85.37-21.95.37-21.95-17.42-6.29-72.49 10.39-58.61 72.43 0 0 13.6-14.62 39.38-6.59 0 0 18.82-3.82 32.05 10.13L90.25 92Z" fill="#7C5399"/>
+    <path d="M64.96 45.51C53.25 57.74 40.88 71.1 41.33 100.49c0 0-20.31 1.54-36.76 20.2-14.19-28.31 12.4-85.21 60.39-75.18Z" fill="#AA72CC"/>
+  </g>
+  <g class="bat__wing bat__wing--right">
+    <path d="M115.49 107.07s39.08 17.35 58.47-16.34c0 0 31.87 15.05 22.45 74.63 0 0-19.34-6.26-38.34 5.97 0 0 .44-24.53-31.44-15.68 0 0 4.04-20.65-23.99-28.38l12.86-20.2h-.01Z" fill="#7C5399"/>
+    <path d="M174.05 90.73s7.75 34.46-19.33 82.88c0 0 12.54-7.81 42.97-5.99 0 0 13.39-54.18-23.65-76.88l.01-.01Z" fill="#AA72CC"/>
+  </g>
+  <path d="M109.11 138.95c-.92-1.06-2.69-2.57-3.76-3.45-.52-.43-1.26-.41-1.76.04-1.06.95-2.82 2.57-3.65 3.6-1.45 1.8-2.09 3.73-.85 4.53.88.57 1.99.1 2.95-.94.06 1.71.75 2.84 1.93 2.88 1.41.05 2.31-1.56 2.23-3.81 0-.13-.02-.27-.03-.41 1.18 1.86 2.7 3.01 3.83 2.15 1.18-.89.59-2.89-.89-4.59Z" fill="#000"/>
+  <path d="M98.08 128.09c-.07-1.76.12-3.7.45-5.61.74-4.36 6.64-5.18 8.56-1.19.87 1.81 1.6 3.68 1.97 5.41 1.39 6.43.06 12.37-4.19 12.98-4.26.62-6.53-4.87-6.79-11.6v.01Z" fill="#AA72CC"/>
+  <path d="M75.76 130.48c-.05-1.41-.46-3.68-.74-5.04-.13-.66-.72-1.11-1.39-1.08-1.42.07-3.81.21-5.1.49-2.26.48-3.97 1.58-3.52 2.98.33 1 1.48 1.33 2.88 1.13-1.03 1.36-1.21 2.67-.32 3.45 1.07.93 2.78.25 4.14-1.55.08-.1.16-.22.23-.34-.26 2.18.19 4.04 1.61 4.09 1.47.05 2.28-1.87 2.2-4.12l.01-.01Z" fill="#000"/>
+  <path d="M76.75 114.83c1.42-1.24 3.19-2.38 5-3.37 3.72-2.05 7.93 1.8 6.16 5.66-.91 1.97-1.97 3.89-3.18 5.39-4.13 5.12-9.58 7.82-12.73 4.9-3.15-2.92-.32-8.14 4.76-12.57l-.01-.01Z" fill="#AA72CC"/>
+  <path d="M118.451 113.463c6.024-13.906 2.107-28.991-8.749-33.693-10.855-4.702-24.538 2.76-30.562 16.665-6.023 13.906-2.106 28.991 8.75 33.693 10.855 4.702 24.538-2.759 30.561-16.665Z" fill="#AA72CC"/>
+  <path class="bat__beard" d="M108.84 89.02c-16.13-5.15-22.95 5.15-23.83 8.15-.49 2.34.34 5.11 3.05 5.29-3.33 4.2-4.9 12.58 1.44 14.35 1.98.81 4.44-.39 5.58-2.35.52 2.41 1.06 4.48 2.98 6.3 4.81 4.39 12.53.48 13.58-5.22 1.92 1.82 4.85 3.71 7.69 1.86 5.36-4.06 5.63-23.23-10.49-28.39v.01Z" fill="#fff"/>
+  <g class="bat__head">
+    <path d="m148.16 64.56-2.8-1.14c1.99-3.59 2.31-7.54.48-10.72-2.33-4.04-7.5-5.69-12.96-4.64 1.08-2.45 1.2-4.79.14-6.63-2.62-4.54-11.44-4.35-19.7.42-2.83 1.63-5.23 3.59-7.05 5.65l-5.87-2.39c-7.56-3.08-16.18.55-19.26 8.11l-7.69 17.41c-3.61 8.87.65 18.99 9.52 22.6l43.02 17.52c8.87 3.61 18.99-.65 22.6-9.52l7.69-17.41c3.08-7.56-.55-16.18-8.11-19.26h-.01Z" fill="#AA72CC"/>
+    <path d="M103.37 54.36c2.8-1.76 4.64-4.7 5.02-7.98l4.73-41.25c.34-4.06-4.45-6.46-7.5-3.76L76.96 32.55S62.3 46.64 68.13 59.64c3.14 7 11.86 9.45 18.35 5.37l16.89-10.65Z" fill="#AA72CC"/>
+    <path d="M103.62 29.15c-.77-.04-1.45.28-2 .84-1.46-4.29-3.8-7.16-6.52-6.24-2.49.85-3.11 4.1-2.3 7.94-3.02-1.9-5.99-1.87-7.98.46-2.44 2.87-1.26 6.92 2.62 9.96-2.53.37-4.31 1.58-4.37 3.82-.09 3.35 3.73 5.12 8.21 4.87l10.81-2.8a4.012 4.012 0 0 0 2.62-2.96c.44-2.12 1.47-7.89 1.47-7.89s.88-7.92-2.56-8.01v.01Z" fill="#fff"/>
+    <path d="M102.453 54.386c5.731-2.75 9.033-7.782 7.374-11.237-1.659-3.455-7.649-4.027-13.38-1.276-5.73 2.75-9.032 7.782-7.373 11.237 1.658 3.456 7.648 4.027 13.379 1.276Z" fill="#AA72CC"/>
+    <path d="M141.01 69.12c-1.1-3.27-.66-6.87 1.21-9.77l22.28-34.76c2.3-3.36 7.53-2.19 8.19 1.83l2.5 42.28s1.32 10.89-3.02 19.2c-5.67 10.86-21.64 9.53-25.55-2.09l-5.61-16.69Z" fill="#AA72CC"/>
+    <path d="M157.08 50.6c.65.42 1.01 1.07 1.13 1.86 3.69-2.62 7.27-3.6 8.93-1.26 1.53 2.14.13 5.14-2.77 7.79 3.56.22 5.96 1.99 6.2 5.03.31 3.76-3.02 6.35-7.94 6.56 1.84 1.77 2.57 3.8 1.32 5.65-1.88 2.78-6.02 1.98-9.51-.84l-7.14-8.59a3.985 3.985 0 0 1-.4-3.93c.88-1.98 3.41-7.26 3.41-7.26s3.91-6.94 6.75-5.01h.02Z" fill="#fff"/>
+    <path d="M146.84 73.74c-1.77.07-3.73-.21-5.67-.66-4.44-1.03-5.71-8.84-1.85-11.32 1.75-1.12 3.58-2.06 5.3-2.53 6.36-1.74 12.44.08 13.38 5.7.94 5.63-4.4 8.56-11.15 8.81h-.01Z" fill="#AA72CC"/>
+    <path d="M144.46 71.62c-3.73-8.26-12.21-12.49-18.93-9.45-.32.14-.62.3-.92.47-.11-1.53-.52-3.02-1.26-4.4-3.58-6.59-13.48-8.13-22.12-3.45-8.63 4.69-12.73 13.84-9.15 20.43s13.48 8.13 22.12 3.45c1.55-.84 2.96-1.83 4.2-2.92.13 2.26.69 4.6 1.72 6.88 3.73 8.26 12.21 12.49 18.93 9.45 6.72-3.04 9.15-12.2 5.42-20.46h-.01Z" fill="#fff"/>
+    <path d="M129.675 72.004c1.334-3.782 1.059-7.325-.613-7.914-1.672-.59-4.108 1.998-5.441 5.78-1.333 3.78-1.059 7.324.613 7.913 1.672.59 4.108-1.998 5.441-5.78Z" fill="#020100"/>
+    <path d="M117.448 67.37c2.005-3.472 2.358-7.02.789-7.926-1.569-.906-4.466 1.174-6.47 4.647-2.005 3.472-2.359 7.022-.79 7.927 1.569.906 4.466-1.175 6.471-4.647Z" fill="#020100"/>
+    <path clip-path="url(#eyes)" d="M114.575 66.518c9.865-.541 17.548-6.716 17.16-13.791-.388-7.075-8.7-12.372-18.566-11.83-9.866.54-17.548 6.715-17.16 13.79.388 7.075 8.7 12.372 18.566 11.83Z" fill="#533D60"/>
+    <path clip-path="url(#eyes)" d="M150.825 74.106c4.164-5.734 1.059-15.088-6.935-20.894-7.995-5.806-17.851-5.866-22.015-.132-4.164 5.733-1.059 15.088 6.936 20.894 7.994 5.806 17.85 5.865 22.014.132Z" fill="#533D60"/>
+    <path d="M100.73 87.17s-3.82 7.58 9.11 10.93c7.96 2.06 10-4.38 10-4.38s-6.22-4.56-5.71-10.01c-4.96 3.55-13.4 3.46-13.4 3.46Z" fill="#000"/>
+    <path d="m95.57 86.22 7.29 1.09-3.04 6.45c-.85 1.83-3.54 1.52-3.96-.45l-.29-7.09Z" fill="#fff"/>
+    <path d="m118.86 92.93 6.18 4.02-5.45 4.61c-1.54 1.31-3.86-.08-3.42-2.06l2.68-6.57h.01Z" fill="#fff"/>
+    <path d="m105.55 86.39 5.26-.89-2.84 5.09c-.62 1.14-2.34.84-2.53-.45l.11-3.75Z" fill="#fff"/>
+    <path d="m114.07 86.4 3.39 4.51-3.91 2.41c-1.1.69-2.45-.42-1.98-1.64l2.5-5.29v.01Z" fill="#fff"/>
+    <path d="M129.05 99.39c-.05 0-.11 0-.16-.01-8.89-1.36-14.79-9.01-16.32-13.92-12.73 5.92-19.61.49-22.03-2.19a1.076 1.076 0 1 1 1.6-1.44c2.16 2.4 8.49 7.3 20.67 1.11l1.34-.68.22 1.48c.6 4.01 6.22 12.19 14.84 13.5.59.09.99.64.9 1.23-.08.53-.54.92-1.07.92h.01Z" fill="#000"/>
+    <path d="M103.39 92.74c1.07-1.14 4.12-.68 5.29 1.77 1.35-.87 4.69.13 4.74 1.79-1.04 1.96-10.26-1.62-10.04-3.56h.01Z" fill="#AA72CC"/>
+    <path d="M124.83 57.84c-.34 0-.68-.16-.89-.46-5.96-8.53-14.58-7.58-14.95-7.53a1.08 1.08 0 0 1-1.2-.94c-.07-.59.34-1.13.93-1.21.41-.05 10.25-1.19 16.99 8.43a1.076 1.076 0 0 1-.89 1.69l.01.02Z" fill="#000"/>
+    <path d="M144.86 62.25c-.23 0-.45-.07-.65-.22-7.13-5.34-14.82-1.94-15.14-1.79-.54.25-1.18 0-1.43-.53-.25-.54-.01-1.18.53-1.43.37-.17 9.17-4.1 17.34 2.02.48.36.57 1.03.22 1.51-.21.28-.54.43-.86.43l-.01.01Z" fill="#000"/>
+    <path d="m120.216 75.938-7.001-2.456a5.74 5.74 0 1 0-3.8 10.833l7.001 2.456a5.74 5.74 0 0 0 3.8-10.833Z" fill="#533D60"/>
+  </g>
+  <defs>
+    <clipPath id="eyes">
+      <path d="M144.46 71.62c-3.73-8.26-12.21-12.49-18.93-9.45-.32.14-.62.3-.92.47-.11-1.53-.52-3.02-1.26-4.4-3.58-6.59-13.48-8.13-22.12-3.45-8.63 4.69-12.73 13.84-9.15 20.43s13.48 8.13 22.12 3.45c1.55-.84 2.96-1.83 4.2-2.92.13 2.26.69 4.6 1.72 6.88 3.73 8.26 12.21 12.49 18.93 9.45 6.72-3.04 9.15-12.2 5.42-20.46h-.01Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<svg class="page__feature bunny" viewBox="0 0 176 213" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A green rabbit, standing in a typical zombie pose with its arms outstretched in front of its body.</title>
+  <path d="M114.73 164.55c1.27-2.81 1.29-5.94-.39-8.58-.24-.35-.5-.67-.79-.97-5.19-4.82-12.71-3.73-18.91-.83-.48.22-.95.46-1.4.7-5.33 2.78-9.89 7.13-11.95 12.74-2.07 6.39.86 12.97 5.99 16.76 3.73 2.68 8.57 3.96 13.11 1.96 8.15-4.48 7.75-14.48 13.42-20.46.35-.4.66-.84.93-1.32h-.01Z" fill="#76978B"/>
+  <path d="M76.67 207.85c-4.8-.41-8.37-4.92-8.09-10.21l.5-29.6c.8-9.37 4.63-16.69 14.16-15.88 7.49.64 9.81 5.56 10.07 12.19.12 2.96-.22 5.92-.89 8.81l-6.23 27.15c-1.08 4.71-5.12 7.91-9.51 7.54h-.01Z" fill="#8CB8AC"/>
+  <path d="m68.415 192.326 8.703.328c4.637.175 8.262 4.084 8.087 8.721l-.224 5.956a5.202 5.202 0 0 1-5.393 5l-21.694-.818a4.891 4.891 0 0 1-4.702-5.071c.305-8.094 7.128-14.422 15.223-14.116Z" fill="#8CB8AC"/>
+  <path d="M30.84 203.86c-4.21-2.23-5.69-7.77-3.36-12.52l12.08-27.03c4.41-8.31 10.77-13.56 19.13-9.12 6.56 3.49 6.75 8.91 4.38 15.11-1.06 2.77-2.53 5.36-4.27 7.76l-16.34 22.56c-2.84 3.92-7.77 5.3-11.62 3.25v-.01Z" fill="#8CB8AC"/>
+  <path d="m31.593 182.131 7.847 3.78c4.18 2.014 5.94 7.046 3.927 11.227l-2.587 5.369a5.202 5.202 0 0 1-6.941 2.428l-19.56-9.421a4.891 4.891 0 0 1-2.283-6.528c3.515-7.297 12.3-10.37 19.597-6.855Z" fill="#8CB8AC"/>
+  <path d="M18.78 138.77c.02 5.31-4.11 9.62-9.23 9.64-5.12.02-9.27-4.27-9.29-9.58l-.15-3.74a5.76 5.76 0 0 1 5.63-5.99l6.06.03c3.84.02 6.96 3.13 6.97 6.98v2.66h.01Z" fill="#8CB8AC"/>
+  <path d="M7.5 136.07a6.868 6.868 0 0 1 6.59-6.88l24.8-.98c6.56-.02 11.89 2.4 11.91 9.74.02 5.76-3.26 7.87-7.84 8.52-2.05.29-4.13.23-6.18-.08l-23.46-3.57a6.866 6.866 0 0 1-5.83-6.76l.01.01Z" fill="#8CB8AC"/>
+  <path d="m50.72 127.91-27.17-1.07c-.89-.04-1.34 1.06-.68 1.66l4.11 3.78c.5.46.37 1.29-.25 1.57l-7.04 3.18c-.69.31-.76 1.27-.12 1.68l5.44 3.47c.59.37.59 1.23 0 1.61l-3.32 2.14c-.79.51-.45 1.73.49 1.76l27.85.88c5.78.17 10.58-4.44 10.64-10.23.05-5.58-4.34-10.2-9.92-10.42l-.03-.01Z" fill="#5B737C"/>
+  <path d="M97.88 147.37v-23.02c0-2.72-2.21-4.93-4.93-4.93H40.62c-2.72 0-4.93 2.21-4.93 4.93v26.13c0 .14-.02.29-.06.43l-6.04 21.27c-.36 1.27.91 2.39 2.12 1.88l9.19-3.87a1.56 1.56 0 0 1 1.82.45l3.27 3.97c.5.61 1.38.75 2.05.33l7.16-4.51c.64-.4 1.48-.29 1.99.27l5.98 6.5c.63.68 1.71.68 2.33-.02l6.3-7.06c.66-.74 1.83-.69 2.43.1l4.08 5.43c.57.75 1.66.84 2.34.19l5.79-5.54c.56-.53 1.42-.58 2.03-.12l7.83 5.93c1.05.8 2.56.02 2.52-1.31l-.94-27.45v.02Z" fill="#5B737C"/>
+  <path d="M60.02 146.27c.98 5.22-2.31 10.21-7.33 11.15-5.03.94-9.89-2.53-10.87-7.74l-.82-3.65a5.758 5.758 0 0 1 4.46-6.91l5.96-1.06c3.78-.68 7.41 1.83 8.11 5.61l.49 2.62v-.02Z" fill="#8CB8AC"/>
+  <path d="M48.44 145.66a6.867 6.867 0 0 1 5.24-7.96l24.22-5.44c6.45-1.21 12.13.22 13.48 7.43 1.06 5.67-1.78 8.33-6.18 9.8-1.96.66-4.02.97-6.09 1.04l-23.72.72c-3.38.1-6.33-2.27-6.95-5.6v.01Z" fill="#8CB8AC"/>
+  <path d="m93.72 128.85-31.37 4.42c-.88.12-1.13 1.28-.38 1.75l4.72 2.99c.58.37.6 1.21.03 1.59l-6.36 4.38c-.63.43-.52 1.38.18 1.67l5.97 2.44c.65.26.8 1.11.29 1.58l-2.89 2.7c-.69.64-.13 1.78.79 1.64l27.56-4.1c5.72-.86 9.62-6.26 8.64-11.96l-.76-4.42a5.712 5.712 0 0 0-6.42-4.69v.01Z" fill="#5B737C"/>
+  <path d="M120.9 81.91v-.11c0-16.08-13.04-29.12-29.12-29.12H59.87c-16.08 0-29.12 13.04-29.12 29.12v.11c-8.89 3.46-15.2 12.1-15.2 22.22v1.24c0 13.17 9.43 27.68 61.14 27.68s59.4-14.52 59.4-27.68v-1.24c0-10.12-6.31-18.76-15.2-22.22h.01Z" fill="#8CB8AC"/>
+  <path d="M76.433 59.238c4.852-3.666 3.128-14.124-3.85-23.36-6.977-9.237-16.567-13.753-21.419-10.088-4.852 3.665-3.128 14.124 3.85 23.36 6.977 9.237 16.567 13.753 21.419 10.088Z" fill="#8CB8AC"/>
+  <path d="M72.95 61.943c3.182-6.804-3.03-16.432-13.875-21.505-10.846-5.074-22.218-3.672-25.4 3.132-3.183 6.803 3.03 16.432 13.875 21.505 10.845 5.074 22.217 3.671 25.4-3.132Z" fill="#8CB8AC"/>
+  <path d="M38.31 77.84c7.428 0 13.45-6.022 13.45-13.45 0-7.428-6.022-13.45-13.45-13.45-7.428 0-13.45 6.022-13.45 13.45 0 7.428 6.022 13.45 13.45 13.45Z" fill="#8CB8AC"/>
+  <path d="M93.78 45.51c2.19-19.74 16.21-33.89 32.8-41.33 12.77-7.25 34.35-5.74 39.68 12.61 3.26 12.32-8.02 21.66-17.98 23.16-8.89 2.06-17.66-.95-26.77-.76-7.59.66-13.7 6.06-19.68 10.14-1.08 1.02-5.47-2.52-8.05-3.82Z" fill="#8CB8AC"/>
+  <path d="M95.12 46.35c4.13-13.24 14.79-32.92 39.98-39.23 11.6-2.09 23.78-.55 25.39 12.06.85 8.45-8.54 14.32-16.11 14.92-6.85 1.03-13.89-1.01-20.67-.66-12.57.65-23.83 15.78-23.83 15.78s-3.01-1.89-4.76-2.87Z" fill="#fff"/>
+  <path d="M98.09 48.06c7.83-18.26 25.36-27.72 43.4-30.01 14.33-3.22 34.54 4.49 34.3 23.6-.46 12.74-13.97 18.39-23.93 16.93-9.1-.61-16.62-6.05-25.4-8.5-7.46-1.57-14.87 1.81-21.77 3.98-1.33.66-4.5-4-6.6-5.99v-.01Z" fill="#8CB8AC"/>
+  <path d="M99.13 49.26c7.8-11.47 23.72-27.2 49.66-25.92 11.71 1.37 22.91 6.39 20.79 18.92-1.65 8.34-12.33 11.22-19.75 9.59-6.85-1.01-12.99-5.01-19.58-6.64-12.22-3.03-27.39 8.18-27.39 8.18s-2.33-2.68-3.72-4.13h-.01Z" fill="#fff"/>
+  <path d="m107.675 44.7-13.552-6.023c-5.778-2.568-12.545.035-15.113 5.814l-.633 1.425c-2.568 5.78.035 12.546 5.813 15.114l13.552 6.022c5.779 2.568 12.545-.035 15.114-5.813l.633-1.426c2.568-5.779-.035-12.545-5.814-15.113Z" fill="#68887D"/>
+  <path d="M73.08 127.46h-8.73l-1.56-10.19s2.26.41 6.8-8.33c.7 6.29 4.62 7.86 4.62 7.86l-1.13 10.65v.01Z" fill="#fff"/>
+  <path d="M87.94 112c-.7-.14-1.39.32-1.52 1.03-.52 2.67-2.33 4.17-5.55 4.57-8.56-.03-9.3-5.42-9.84-9.36-.04-.3-.08-.59-.12-.86-.12-.77-.74-1.32-1.51-1.35-.73-.03-1.44.49-1.62 1.23-.05.22-.1.45-.16.7-.95 4.35-2.38 8.59-8.39 8.59-2.52.1-4.4-.45-5.59-1.63-1.5-1.49-1.45-3.59-1.45-3.65a1.31 1.31 0 0 0-1.23-1.36c-.72-.03-1.33.52-1.36 1.23 0 .13-.13 3.25 2.18 5.58 1.72 1.74 4.27 2.56 7.51 2.42 4.39 0 6.94-1.9 8.48-4.21v5.36c0 .72.58 1.3 1.3 1.3.72 0 1.3-.58 1.3-1.3v-5.09c1.59 2.72 4.6 4.99 10.58 4.99h.15c5.57-.67 7.36-4 7.88-6.68.14-.71-.33-1.39-1.03-1.52l-.01.01Z" fill="#050505"/>
+  <path d="M103.388 108.16c6.858-5.396 7.012-16.639.346-25.11-6.667-8.473-17.63-10.966-24.488-5.57-6.858 5.396-7.012 16.639-.346 25.111 6.667 8.472 17.63 10.965 24.488 5.569Z" fill="#fff"/>
+  <path d="M85.567 97.025c2.812-.683 4.176-5.013 3.045-9.671-1.13-4.659-4.327-7.882-7.139-7.2-2.812.683-4.176 5.012-3.045 9.671 1.13 4.659 4.327 7.882 7.139 7.2Z" fill="#050505"/>
+  <path clip-path="url(#eyeRight)" d="M73.15 86.24c12.22 2.67 26.66-.92 34.57-3.46l-2.23-12.82-30.95.92-1.39 15.36Z" fill="#68887D"/>
+  <path d="M109.74 79.78c-.36-.62-1.16-.83-1.78-.47-.14.08-.29.16-.44.24.4-.66.59-1.12.62-1.19a1.298 1.298 0 0 0-2.41-.97c-.02.05-.16.38-.46.87.04-.6-.35-1.17-.96-1.33a1.29 1.29 0 0 0-1.59.91c-.05.19-1.24 4.31-5.48 5.76-11.57 3.08-23.06 2.25-23.21 2.24a1.3 1.3 0 0 0-1.4 1.19 1.3 1.3 0 0 0 1.19 1.4c.23.02 1.86.14 4.41.14 4.65 0 12.35-.41 20.12-2.56.09 0 .18-.01.26-.03.63-.16 1.22-.36 1.77-.57 3.04-.97 6.06-2.21 8.87-3.84.62-.36.83-1.16.47-1.78l.02-.01Z" fill="#050505"/>
+  <path d="M61.544 102.468c8.472-6.667 10.966-17.63 5.57-24.488-5.397-6.858-16.64-7.012-25.112-.345-8.471 6.666-10.965 17.63-5.569 24.488 5.397 6.857 16.64 7.012 25.111.345Z" fill="#fff"/>
+  <path d="M64.08 89.057c1.277-5.038-.157-9.747-3.204-10.52-3.046-.771-6.55 2.687-7.827 7.725-1.277 5.037.158 9.747 3.204 10.519 3.046.772 6.55-2.686 7.827-7.724Z" fill="#050505"/>
+  <path clip-path="url(#eyeLeft)" d="M71.27 86.55c-11.32 1.17-23.81-4.04-30.59-7.46l3.67-12.25 27.67 4.55-.76 15.16h.01Z" fill="#68887D"/>
+  <path d="M69.49 85.56c-.15 0-11.68-.17-22.94-4.24-4.09-1.8-4.92-6.01-4.96-6.21-.13-.71-.8-1.17-1.51-1.05-.62.11-1.06.64-1.07 1.25-.25-.51-.36-.85-.38-.9-.21-.68-.93-1.07-1.62-.86-.69.21-1.08.93-.87 1.62.02.07.17.54.51 1.24-.14-.09-.28-.18-.42-.28a1.299 1.299 0 1 0-1.49 2.13c2.68 1.87 5.59 3.39 8.56 4.62.52.25 1.06.49 1.66.7.06.02.13.02.2.03.51.19 1.02.37 1.53.55 11.21 3.85 22.14 4 22.77 4h.01c.71 0 1.29-.57 1.3-1.29 0-.72-.57-1.31-1.29-1.31h.01Z" fill="#050505"/>
+  <path d="M69.93 109.64c7.986 0 14.46-3.989 14.46-8.91 0-4.92-6.474-8.91-14.46-8.91-7.986 0-14.46 3.99-14.46 8.91 0 4.921 6.474 8.91 14.46 8.91Z" fill="#68887D"/>
+  <defs>
+    <clipPath id="eyeLeft">
+      <path d="M61.544 102.468c8.472-6.667 10.966-17.63 5.57-24.488-5.397-6.858-16.64-7.012-25.112-.345-8.471 6.666-10.965 17.63-5.569 24.488 5.397 6.857 16.64 7.012 25.111.345Z" fill="#fff"/>
+    </clipPath>
+    <clipPath id="eyeRight">
+      <path d="M103.388 108.16c6.858-5.396 7.012-16.639.346-25.11-6.667-8.473-17.63-10.966-24.488-5.57-6.858 5.396-7.012 16.639-.346 25.111 6.667 8.472 17.63 10.965 24.488 5.569Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<article class="content-block content-block--five astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Fugu Patterns</h2>
+  <p id="Fugu-Patterns" class="astro-SCMHTS4H">Check out these fang-tastic new reusable capabilities patterns.</p>
+  <a href="https://web.dev/new-patterns-for-amazing-apps/" target="_blank" rel="noopener" aria-describedby="Fugu-Patterns" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--six astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrome Concepts</h2>
+  <p id="Chrome-Concepts" class="astro-SCMHTS4H">Join Sam to learn about how the pieces of Chrome are stitched together.</p>
+  <a href="https://youtube.com/playlist?list=PLNYkxOF6rcIBzsbjZKyOdO-iwQTjidz1P" target="_blank" rel="noopener" aria-describedby="Chrome-Concepts" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 3">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img src="/third_party/chrometober-2022/assets/Branch.a36bf11c.svg" class="page__feature branch" alt="" aria-hidden="true" width="271" height="150">
+<svg class="page__feature coffin" viewBox="0 0 162 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Behind the snake, two arms and a leg are emerging from an open coffin marked on its lid with a moon symbol.</title>
+  <defs>
+    <clipPath id="lid">
+      <path d="M47.83 190.49 10.8 83.78a7.939 7.939 0 0 1-.02-5.14l14.8-43.53a7.927 7.927 0 0 1 6.96-5.35l59.79-4a7.908 7.908 0 0 1 7.61 4.37L120.4 71.3c.78 1.58 1.02 3.37.67 5.1L98.58 187.09a7.92 7.92 0 0 1-7.22 6.32l-35.54 2.38a7.902 7.902 0 0 1-8-5.3h.01Z" fill="#4C3E3B"/>
+    </clipPath>
+  </defs>
+  <g class="coffin__box">
+    <path d="M132.09 21.27H63.08c-3.16 0-6.02 1.9-7.24 4.83L35.53 74.9a7.84 7.84 0 0 0-.32 5.08l31.66 115.65a7.835 7.835 0 0 0 7.56 5.77h46.31c3.53 0 6.63-2.36 7.56-5.77l31.66-115.65a7.84 7.84 0 0 0-.32-5.08l-20.31-48.8a7.85 7.85 0 0 0-7.24-4.83Z" fill="#261F1D"/>
+    <path d="M74.43 193.76c-.09 0-24.97-90.66-30.71-111.55-.76-2.77-.58-5.7.53-8.35 3.39-8.14 11.04-26.5 15.48-37.07 2.01-4.79 6.7-7.9 11.89-7.9 13.29.01 38.78.04 52.09.08 5.19.01 9.86 3.14 11.86 7.93 4.38 10.54 11.99 28.84 15.36 36.96 1.1 2.65 1.28 5.58.52 8.34-5.73 20.87-30.62 111.56-30.71 111.56H74.43Z" fill="#000"/>
+  </g>
+  <g class="coffin__zombie">
+    <path d="M126.08 191.92c3.55-2.3 4.47-7.28 2.07-11.26l-12.6-22.77c-4.49-6.94-10.48-11.05-17.54-6.48-5.55 3.59-5.32 8.37-2.79 13.62 1.13 2.34 2.62 4.51 4.32 6.47l16.04 18.5c2.79 3.21 7.24 4.03 10.5 1.92Z" fill="#8CB8AC"/>
+    <path d="m141.458 186.886-16.497 9.586a4.576 4.576 0 0 1-6.248-1.655l-2.632-4.531a7.391 7.391 0 0 1 2.676-10.102l6.623-3.849c6.156-3.577 14.058-1.483 17.635 4.673a4.306 4.306 0 0 1-1.557 5.878Z" fill="#8CB8AC"/>
+    <path d="m108.75 147.06 15.03 18.75c.67.87-.11 2.11-1.19 1.88l-6.77-1.45c-.83-.18-1.57.55-1.41 1.38l1.83 9.4c.18.92-.74 1.68-1.61 1.32l-7.4-3.02c-.8-.33-1.67.29-1.63 1.15l.22 4.89c.05 1.16-1.43 1.7-2.13.77l-15.31-19.57c-4.32-5.73-3.08-13.89 2.73-18.09 5.61-4.05 13.43-2.91 17.65 2.58l-.01.01Z" fill="#5B737C"/>
+    <path d="M135.34 130.25c-.86 5.13 2.44 9.96 7.38 10.79 4.94.83 9.65-2.65 10.51-7.78l.74-3.59a5.649 5.649 0 0 0-4.49-6.69l-5.86-.94a6.867 6.867 0 0 0-7.85 5.64l-.43 2.57Z" fill="#8CB8AC"/>
+    <path d="M146.68 129.45c.6-3.57-1.73-6.97-5.27-7.7l-23.82-4.9c-6.34-1.07-11.88.43-13.07 7.52-.94 5.57 1.89 8.13 6.22 9.49 1.93.61 3.96.88 5.98.91l23.25.29c3.31.04 6.16-2.34 6.71-5.61Z" fill="#8CB8AC"/>
+    <path d="m106.2 114.67 26.44 3.29c.86.11 1.13 1.23.4 1.71l-4.58 3a.934.934 0 0 0 0 1.56l6.3 4.2c.62.41.53 1.35-.15 1.64l-5.81 2.48a.938.938 0 0 0-.26 1.56l2.87 2.6c.68.62.16 1.75-.75 1.62l-27.06-3.59c-5.62-.76-9.52-5.98-8.65-11.59.84-5.41 5.82-9.17 11.25-8.49v.01Z" fill="#5B737C"/>
+    <path d="M153.98 100.91c5.12-.92 8.55-5.66 7.67-10.59-.88-4.93-5.75-8.19-10.87-7.27l-3.63.52c-3.13.44-5.28 3.37-4.78 6.49l1.09 5.83c.69 3.7 4.25 6.15 7.95 5.49l2.57-.46v-.01Z" fill="#8CB8AC"/>
+    <path d="M151.35 92.72c-.33-3.6-3.46-6.3-7.07-6.09L120 87.99c-6.4.59-11.37 3.46-10.71 10.62.52 5.62 3.91 7.38 8.45 7.58 2.02.09 4.05-.16 6.02-.65l22.55-5.67a6.721 6.721 0 0 0 5.05-7.14l-.01-.01Z" fill="#8CB8AC"/>
+    <path d="m108.44 88.8 26.4-3.59c.86-.12 1.4.9.82 1.55l-3.65 4.07c-.45.5-.24 1.29.39 1.51l7.16 2.44c.7.24.86 1.17.27 1.62l-4.98 3.89a.934.934 0 0 0 .15 1.57l3.44 1.77c.82.42.6 1.65-.31 1.76l-27.08 3.46c-5.63.71-10.74-3.34-11.33-8.98-.57-5.44 3.28-10.35 8.7-11.09l.02.02Z" fill="#5B737C"/>
+  </g>
+  <g class="coffin__lid">
+    <path d="m96.71 18.17-69.5 4.65a7.898 7.898 0 0 0-6.96 5.35L3.08 78.68c-.57 1.67-.56 3.48.02 5.14l39.67 114.33a7.902 7.902 0 0 0 8 5.3l46.64-3.12a7.9 7.9 0 0 0 7.22-6.32l24.1-118.59c.35-1.73.12-3.52-.67-5.1l-23.74-47.77a7.892 7.892 0 0 0-7.61-4.37v-.01Z" fill="#332927"/>
+    <path d="M47.83 190.49 10.8 83.78a7.939 7.939 0 0 1-.02-5.14l14.8-43.53a7.927 7.927 0 0 1 6.96-5.35l59.79-4a7.908 7.908 0 0 1 7.61 4.37L120.4 71.3c.78 1.58 1.02 3.37.67 5.1L98.58 187.09a7.92 7.92 0 0 1-7.22 6.32l-35.54 2.38a7.902 7.902 0 0 1-8-5.3h.01Z" fill="#4C3E3B"/>
+    <g class="coffin__grooves" clip-path="url(#lid)">
+      <path d="M25.07 26.64c2.37 6.09.88 12.74-1.33 18.65-2.27 6.07-5.35 11.85-6.8 18.2-1.44 6.3-.61 12.38 1.63 18.38 2.13 5.67 5.23 11.16 6.21 17.2 1.05 6.45-.32 12.91-1.4 19.26-1.02 6.02-1.68 12.08-.64 18.14 1.81 10.67 7.29 20.16 12.51 29.48 5.71 10.19 11.66 20.97 11.4 33-.06 2.66 4.07 2.37 4.12-.28.47-22.29-17.9-38.67-23.23-59.31-1.43-5.53-1.47-11.11-.67-16.74.93-6.49 2.53-12.93 2.4-19.53-.13-6.6-2.61-12.46-5.12-18.4-2.37-5.59-4.53-11.33-3.71-17.51 1.88-14.1 14.26-27.12 8.51-41.91-.96-2.47-4.87-1.13-3.9 1.36l.02.01Z" fill="#66504C"/>
+      <path d="M33.19 23.7c5.71 9.77 3.58 21.76.89 32.11-1.51 5.81-3.27 11.56-4.28 17.48-1.02 5.95-1.24 12.05-.8 18.07 1.77 24.43 13.53 46.31 22.66 68.56 5.07 12.35 10.05 25.68 8.72 39.27-.11 1.11.44 2.2 1.61 2.44 1 .21 2.33-.49 2.44-1.61 1.21-12.37-2.24-24.43-6.64-35.87-4.43-11.53-9.78-22.68-14.41-34.13-4.59-11.34-8.5-23.08-9.91-35.29-.69-6.01-.79-12.11 0-18.12.8-6.04 2.5-11.89 4.07-17.76 3.28-12.22 5.82-25.9-.94-37.46-1.34-2.3-4.76.03-3.42 2.32l.01-.01Z" fill="#66504C"/>
+      <path d="M72.38 199.03c3.42-11.69.71-24.01-3.25-35.19-2.07-5.84-4.49-11.55-6.59-17.38-2.1-5.83-3.85-11.61-5.32-17.55-2.92-11.77-4.59-23.84-5.05-35.96-.23-6.04-.15-12.09.24-18.13.41-6.32 1.13-12.62 1.38-18.96.28-6.94-.14-13.84-1.79-20.61-1.56-6.44-4.18-12.59-7.64-18.23-1.39-2.27-4.81.05-3.42 2.32 6.21 10.15 8.93 21.65 8.81 33.49-.06 6.15-.71 12.27-1.19 18.4-.48 6.13-.72 12.21-.61 18.33.21 12.04 1.65 24.03 4.22 35.8 1.27 5.83 2.83 11.59 4.68 17.26 1.89 5.8 4.17 11.45 6.36 17.14 4.68 12.16 8.92 25.45 5.12 38.44-.31 1.07.58 2.23 1.61 2.44 1.17.24 2.13-.53 2.44-1.61Z" fill="#66504C"/>
+      <path d="M46.1 16.91c4.82 8.02 8.15 16.98 9.69 26.21.78 4.66 1.13 9.39 1.05 14.12a70.97 70.97 0 0 1-.45 6.83c-.24 2.05-.53 4.13.06 6.15.58 2 2.26 3.54 4.36 3.73 2.21.21 4.22-1.11 5.62-2.72 2.85-3.29 4.17-8.18 4.7-12.41 1.13-9.01-1.04-17.88-2.86-26.64-1.96-9.42-3.53-19.98 1.33-28.8 1.29-2.34-2.42-4.17-3.7-1.84-8.72 15.83.63 33.64 1.37 50.12.18 4.06-.12 8.24-1.5 12.1-.64 1.8-1.45 3.82-2.85 5.17-.9.87-2.19 1.45-2.59-.1-.42-1.64.07-3.55.24-5.19.23-2.29.36-4.59.39-6.89.07-4.51-.27-9.03-.99-13.49-1.64-10.14-5.16-19.87-10.46-28.67-1.37-2.28-4.79.04-3.42 2.32h.01Z" fill="#66504C"/>
+      <path d="M71.15 13.07c1.15 7.29 2.3 14.58 3.45 21.86l1.65 10.46c.55 3.49 1.25 7.02 1.4 10.57.13 3.08-.38 6.03-1.74 8.81-1.17 2.41-2.75 4.57-4.39 6.67-3.64 4.66-7.3 9.17-9.44 14.76-4.26 11.1-3.62 23.43-.59 34.75 3.5 13.09 10.16 25.02 15.63 37.33 6.02 13.56 10.94 28.64 7.73 43.58-.56 2.6 3.49 3.43 4.05.83 6-27.94-13.06-52.1-21.66-77.13-3.83-11.14-5.67-23.45-2.31-34.96 1.63-5.58 4.73-10.16 8.3-14.66 3.55-4.48 7.27-9.2 8.26-14.99.66-3.86.16-7.75-.44-11.58-.63-4.03-1.27-8.06-1.91-12.09-1.29-8.16-2.58-16.32-3.86-24.48-.17-1.1-1.01-2-2.2-1.92-1.04.07-2.1 1.09-1.92 2.2l-.01-.01Z" fill="#66504C"/>
+      <path d="M105.35 174.7c-4.99-11.65-8.32-23.97-9.75-36.56-1.27-11.2-1.43-23.5 4.92-33.33 2.99-4.63 7.37-8.36 12.67-10.02L110.8 94c4.1 6.45 5.41 14.32 3.72 21.76-.59 2.6 3.46 3.42 4.05.83 1.94-8.51.33-17.55-4.34-24.91-.5-.79-1.53-1.06-2.39-.79-10.96 3.43-17.78 13.99-19.99 24.8-1.28 6.27-1.26 12.77-.72 19.12.57 6.72 1.68 13.4 3.25 19.96 1.75 7.29 4.13 14.42 7.08 21.3 1.04 2.43 4.95 1.09 3.9-1.36l-.01-.01Z" fill="#66504C"/>
+      <path d="M120.79 87.93c-2.04-5.3-6.33-8.98-10.64-12.43-4.5-3.6-8.69-7.23-11.17-12.56-5.24-11.25-4.23-24.14-6.9-36.04-1.5-6.67-4.22-13.02-9.06-17.94-1.87-1.9-4.58 1.22-2.72 3.11 8.48 8.6 8.85 21.77 10.17 33.03.7 6.03 1.67 12.16 4 17.8 2.32 5.61 5.99 10.02 10.65 13.84 4.39 3.61 9.66 7.04 11.79 12.56.95 2.47 4.86 1.13 3.9-1.36l-.02-.01Z" fill="#66504C"/>
+      <path d="M97.46 17.46c1.22 10.25 2.43 20.51 3.65 30.76.55 4.67.54 10.06 3.01 14.21 2.18 3.65 6.56 5.68 10.62 3.89 4.95-2.18 6.59-7.32 7.75-12.17.62-2.59-3.43-3.41-4.05-.83-.78 3.28-1.68 7.47-5.04 9.1-3.18 1.54-5.68-1.24-6.61-4.06-.65-1.97-.81-4.07-1.05-6.12-.26-2.23-.53-4.45-.79-6.68-.53-4.45-1.06-8.9-1.58-13.35-.59-5.01-1.19-10.02-1.78-15.02-.31-2.63-4.44-2.37-4.12.28l-.01-.01Z" fill="#66504C"/>
+      <path d="M77.33 20.53c7.45 21.93 15.43 47.19 4.96 69.56-2.35 5.02-5.89 9.13-8.85 13.77-1.48 2.32-2.69 4.83-3.28 7.53-.64 2.95-.54 6.03 0 8.99 1.13 6.24 3.64 12.23 5.73 18.2 2.19 6.27 4.39 12.53 6.58 18.8 4.98 14.22 9.96 28.43 14.94 42.65.88 2.51 4.78 1.16 3.9-1.36-4.42-12.61-8.83-25.22-13.25-37.83-2.22-6.34-4.44-12.69-6.67-19.03-2.13-6.09-4.53-12.14-6.29-18.35-.79-2.77-1.37-5.65-1.25-8.56.11-2.82 1.07-5.42 2.47-7.85 2.72-4.74 6.47-8.77 8.97-13.67 5.08-9.96 6.64-21.45 5.97-32.51-.87-14.35-5.43-28.17-10.02-41.69-.85-2.51-4.76-1.16-3.9 1.36l-.01-.01Z" fill="#66504C"/>
+      <path d="M109.87 137.29c-.47-6.78-.95-13.56-1.42-20.34-.09-1.33-1.47-2.26-2.74-1.81-3.52 1.25-5.82 4.31-6.91 7.79-1.22 3.91-.71 8.19-.4 12.2.57 7.5 1.38 15.19 4.1 22.26 1.54 4 3.7 7.62 6.54 10.82.74.83 2.25.57 2.91-.19.81-.93.55-2.08-.19-2.91-4.26-4.8-6.49-11.1-7.68-17.32-.63-3.3-1.02-6.65-1.32-9.99-.31-3.49-.8-7.11-.55-10.62.23-3.25 1.52-6.95 4.85-8.14l-2.74-1.81c.47 6.78.95 13.56 1.42 20.34.18 2.65 4.31 2.38 4.12-.28h.01Z" fill="#66504C"/>
+      <path d="M.49 65.9a78.762 78.762 0 0 1 14.14 27.73c2.99 10.7 3.4 21.83 2.09 32.83-.78 6.55-2.08 13.03-3.54 19.46-.59 2.6 3.46 3.42 4.05.83 2.69-11.79 4.8-23.86 4.28-36a81.4 81.4 0 0 0-7.82-31.43c-2.67-5.6-5.92-10.88-9.77-15.74-1.64-2.07-5.08.23-3.42 2.32H.49Z" fill="#66504C"/>
+      <path d="M83.68 109.42c-17.34 1.16-32.34-11.96-33.5-29.3-1.16-17.33 11.89-32.29 29.22-33.49 2.1-.15 4.16-.08 6.16.17 1.12.14 1.56-1.41.52-1.86-5.3-2.29-11.22-3.38-17.38-2.98-20.4 1.35-36.1 18.91-35.14 39.34.99 21.14 19.13 37.24 40.14 35.84a37.45 37.45 0 0 0 18.25-6.15c1.51-1 .42-3.35-1.32-2.83-2.22.67-4.55 1.1-6.97 1.26h.02Z" fill="#C0B19E"/>
+    </g>
+  </g>
+</svg>
+<svg class="snake page__feature" viewBox="0 0 135 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A snake slithers away in profile. It is holding a shovel and a lamp with a candle inside, and wearing a top hat.</title>
+  <defs>
+    <clipPath id="eye">
+      <path d="M35.95 67.23a8.44 8.44 0 1 0 0-16.88 8.44 8.44 0 0 0 0 16.88Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <path d="M24.49 148.17a8.37 8.37 0 0 1-5.05-10.04l14.87-78.8c2.87-7.41 11.2-11.1 18.61-8.23 7.41 2.87 11.1 11.2 8.23 18.61l-26.19 74.46a8.363 8.363 0 0 1-10.47 4Z" fill="#B6BD73"/>
+  <path d="M10.31 81.5s3.6 13.51 26.25 4.42l15.39-7.97s.61-.41 1.45-1.18c5.58-5.16 2.68-15.06-5.02-15.46 0 0-.19 9.52-6.22 10.45-8.55 1.31-11.3-.05-15.76 6.86-5.42 8.39-16.09 2.88-16.09 2.88Z" fill="#B6BD73"/>
+  <path d="m97.58 97.97-25.55-7a8.34 8.34 0 0 1-6.46-9.85 8.34 8.34 0 0 1 9.85-6.46l25.55 7a8.34 8.34 0 0 1 6.46 9.85 8.34 8.34 0 0 1-9.85 6.46Z" fill="#B6BD73"/>
+  <path d="m104.65 98.57-23.66 11.92a8.328 8.328 0 0 1-8.4-14.38l23.66-11.92a8.328 8.328 0 0 1 8.4 14.38Z" fill="#B6BD73"/>
+  <path d="M62.06 122.8c-1.79-1.27-2.5-3.45-1.63-5.05l7.75-16.26c1.94-2.74 6.04-6.57 11.12-2.93 5.08 3.64 2.8 8.67.87 11.41l-12.81 12.7c-1.22 1.34-3.51 1.4-5.3.14v-.01Z" fill="#B6BD73"/>
+  <path d="m113.69 74.89-17.06-15.2c-1.77-1.58-1.85-4.37-.18-6.25l10.95-12.29c5.72-6.42 16.78-5.98 22.11-5.32 1.89.23 3.38 1.59 3.81 3.44 1.23 5.36 2.97 16.7-2.45 22.78l-10.95 12.29c-1.67 1.87-4.46 2.11-6.23.54v.01Z" fill="#5C4E6D"/>
+  <path d="M52.62 124.75a2.357 2.357 0 0 1-.18-3.33l58.46-64.13a2.357 2.357 0 1 1 3.51 3.15l-58.46 64.13c-.87.97-2.36 1.05-3.33.18Z" fill="#000"/>
+  <path d="M93.71 128.62H30.28c-5.998 0-10.86 4.862-10.86 10.86 0 5.998 4.862 10.86 10.86 10.86h63.43c5.998 0 10.86-4.862 10.86-10.86 0-5.998-4.862-10.86-10.86-10.86Z" fill="#B6BD73"/>
+  <path d="M70.74 76.31c3.31-1.1 6.91.48 8.34 3.67l24.96 53.83c2.04 6.11-1.27 12.71-7.38 14.75-6.11 2.04-12.71-1.27-14.75-7.38L66.27 84.22a6.793 6.793 0 0 1 4.48-7.91h-.01Z" fill="#B6BD73"/>
+  <path d="M51.81 110.06c.88-1.11 2.31-1.48 3.31-.86l11.49 6.09c1.69 1.35 4 4.12 1.48 7.25s-5.68 1.48-7.37.14l-9.01-9.21c-.82-.84-.77-2.31.11-3.41h-.01Z" fill="#B6BD73"/>
+  <g class="snake__lantern">
+    <path d="M15.59 97.15c-4.75 0-8.61-3.86-8.61-8.61s3.86-8.61 8.61-8.61 8.61 3.86 8.61 8.61-3.86 8.61-8.61 8.61Zm0-13.93c-2.94 0-5.33 2.39-5.33 5.33s2.39 5.33 5.33 5.33 5.33-2.39 5.33-5.33-2.39-5.33-5.33-5.33Z" fill="#4C3E3B"/>
+    <path d="M1.64 100.42h27.72c-1.49 9.51-2.98 19.02-4.47 28.52H6.12c-1.49-9.51-2.98-19.02-4.47-28.52h-.01Z" fill="#C0B19E"/>
+    <path d="M1.56 101.19h27.88a1.53 1.53 0 0 0 1.53-1.53v-2.72a1.53 1.53 0 0 0-1.53-1.53H1.56a1.53 1.53 0 0 0-1.53 1.53v2.72c0 .845.685 1.53 1.53 1.53Z" fill="#332927"/>
+    <path d="M13.69 102.4c.04-.34.45-.48.69-.24 2.74 2.81 5.67 6.8 5.1 10.96-.46 3.09-4.17 3.86-6.79 2.62-2.32-1.24-2.47-4.17-1.54-6.33.98-2.24 2.21-4.35 2.55-7.02l-.01.01Z" fill="#BF6B31" class="snake__lantern__flame"/>
+    <path d="M12.01 116.86h6.88a3.24 3.24 0 0 1 3.24 3.24v6H8.77v-6a3.24 3.24 0 0 1 3.24-3.24Z" fill="#fff"/>
+    <path d="M15.07 119.94c-.63 0-1.14-.51-1.14-1.14v-6.35a1.14 1.14 0 1 1 2.28 0v6.35c0 .63-.51 1.14-1.14 1.14Z" fill="#000"/>
+    <path d="M4.74 130.35h21.51a2.05 2.05 0 0 0 2.05-2.05v-1.37a2.05 2.05 0 0 0-2.05-2.05H4.74a2.05 2.05 0 0 0-2.05 2.05v1.37a2.05 2.05 0 0 0 2.05 2.05Z" fill="#332927"/>
+  </g>
+  <path d="M60.13 52.43c-2.88-4.88-8.15-8.46-13.82-9.95l-.84-.21c-3.64-.85-7.4-.91-10.73-.15-.27.06-.54.11-.81.18-5.59 1.33-13.39 4.99-16.13 17.95 0 0-7.51-5.12-13.18 1.19-4.46 4.94-2.8 14.79 5.36 19.61 13.6 8.03 15.65-3.44 22.2-7.95 6.55-4.51 24.36 4.28 28.79-5.04.1-.22.2-.45.3-.68 1.79-4.34 1.82-9.35-.76-14.25-.12-.23-.25-.46-.38-.69v-.01Z" fill="#B6BD73"/>
+  <g class="snake__eye" clip-path="url(#eye)">
+    <path d="M35.95 67.23a8.44 8.44 0 1 0 0-16.88 8.44 8.44 0 0 0 0 16.88Z" fill="#fff"/>
+    <path d="M48.65 61.253c1.184-3.26-.454-6.845-3.657-8.007-3.204-1.163-6.76.539-7.942 3.799-1.183 3.26.455 6.846 3.658 8.008 3.203 1.162 6.76-.54 7.942-3.8Z" fill="#000"/>
+    <path d="M27.35 58.19c2.14 1.49 4.78 2.4 7.65 2.45 3.6.06 6.88-1.24 9.28-3.39-.66-3.9-4.09-6.91-8.28-6.97-4.61-.07-8.42 3.44-8.65 7.91Z" fill="#765480"/>
+  </g>
+  <path d="M18.37 84.44c-2.67 0-5.73-.86-9.2-2.59-.57-.28-.8-.97-.52-1.53s.97-.8 1.53-.52c9.7 4.82 13.45 1.3 15.63-2.29 2.71-4.47 6.44-8.38 15.22-6.77 3.86.71 5.85-1.27 6.69-2.52 1.37-2.03 1.6-4.84.53-6.55-.34-.53-.18-1.24.36-1.58.53-.34 1.24-.18 1.58.36 1.55 2.46 1.31 6.27-.57 9.05-1.96 2.9-5.24 4.17-8.99 3.48-7.04-1.29-10.14 1.23-12.85 5.71-2.33 3.83-5.44 5.74-9.41 5.74v.01Z" fill="#000"/>
+  <path d="M12.43 67.16c.65 2.38-.1 6.13-.1 6.13s-3.3-2.25-4.4-4.4c-1.1-2.14-1.02-4.42.72-5.12 1.74-.7 3.13 1 3.78 3.38v.01Z" fill="#000"/>
+  <path d="M73.78 9.15c2.3 5.53 4.21 14.21 5.04 18.36.15.76-.76 1.28-1.34.75-3.23-2.95-9.96-9.42-12.94-14.51-3.99-6.81-4.49-10.76-.95-12.63 3.54-1.87 7.08.57 10.18 8.03h.01Z" fill="#765480"/>
+  <path d="M30.03 35.01c-.26.64.06 1.37.7 1.62L68.61 57.4c.64.26 1.37-.06 1.62-.7.26-.64-.06-1.37-.7-1.62L31.65 34.31c-.64-.26-1.37.06-1.62.7Z" fill="#8475A2"/>
+  <path d="M78.68 28.83 60.71 51.34 43.07 41.32l6.91-26.23c.37-1.4 1.92-2.12 3.22-1.5l24.66 11.72c1.34.64 1.74 2.36.81 3.52h.01Z" fill="#8475A2"/>
+</svg>
+<svg class="page__feature tree-eyes" viewBox="0 0 137 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A purplish tree, bare of leaves. It has an angry-looking face with an open mouth with jagged teeth.</title>
+  <path d="M68.319 81.582c2.107-5.739 1.29-11.319-1.827-12.463-3.116-1.144-7.35 2.582-9.457 8.32-2.107 5.74-1.289 11.32 1.827 12.464 3.116 1.144 7.35-2.581 9.457-8.32Z" fill="#000"/>
+  <path d="M87.325 89.379c3.085-1.225 3.756-6.825 1.5-12.507-2.257-5.682-6.587-9.295-9.672-8.07-3.085 1.225-3.756 6.825-1.5 12.507 2.257 5.682 6.587 9.295 9.672 8.07Z" fill="#000"/>
+  <path d="M125.671 57.677c5.734-12.414-4.47-29.338-22.791-37.8-18.321-8.46-37.821-5.256-43.555 7.158-5.733 12.415 4.47 29.338 22.791 37.8 18.321 8.461 37.821 5.257 43.555-7.158Z" fill="#fff"/>
+  <path d="M44.413 70.566c18.585-1.01 32.94-14.918 32.062-31.065-.877-16.147-16.654-28.418-35.239-27.408C22.652 13.103 8.297 27.01 9.175 43.158c.877 16.147 16.654 28.418 35.238 27.408Z" fill="#fff"/>
+  <path d="M99.515 53.076c5.144-2.186 6.817-9.834 3.737-17.082-3.079-7.249-9.746-11.353-14.89-9.167-5.144 2.185-6.818 9.833-3.738 17.082 3.08 7.248 9.747 11.352 14.89 9.167Z" fill="#000"/>
+  <path d="M61.655 43.438c3.18-7.578 1.297-15.594-4.208-17.904-5.505-2.311-12.546 1.959-15.727 9.536-3.18 7.578-1.296 15.594 4.209 17.904 5.504 2.311 12.545-1.959 15.726-9.536Z" fill="#000"/>
+  <g class="tree__eye__eyelid tree__eye__eyelid--topright">
+    <path d="M61.73 27.08c.71 4.21 2.63 8.37 7.03 10.61 11.11 5.66 27.27.48 27.27.48l26.64-6.5" stroke="#000" stroke-width="2.92" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="m83.15 40.38 50.66-11.07L128.12.48l-69.8 15.24 1.96 9.92c2.06 10.44 12.3 17.04 22.86 14.73l.01.01Z" fill="#47394F"/>
+  </g>
+  <g class="tree__eye__eyelid tree__eye__eyelid--topleft">
+    <path d="M52.31 29.88.3 30.57V1.28L71.95.33v10.08c0 10.61-8.79 19.33-19.64 19.47Z" fill="#47394F"/>
+    <path d="M9.84 29.73h35.02s25.29 4.86 24.32-22.37" stroke="#000" stroke-width="2.92" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
+<article class="content-block content-block--seven astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">TBD</h2>
+  <p id="TBD" class="astro-SCMHTS4H">Spooky Tree - N/A -- not shown</p>
+  <a href="#" target="_blank" rel="noopener" aria-describedby="TBD" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--eight astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">HTTP 203</h2>
+  <p id="HTTP-203" class="astro-SCMHTS4H">Unearth some scary good web platform tools &amp; ideas with Jake and his guests.</p>
+  <a href="https://www.youtube.com/watch?v=xl9R8aTOW_I&#38;list=PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9" target="_blank" rel="noopener" aria-describedby="HTTP-203" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="4" style="--index:3;" aria-label="page 3">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 3">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread3--dark.d5c0ce62.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread3.a8fc413f.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature gargoyle" viewBox="0 0 166 227" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A horned gargoyle squatting on a stone pedestal. It has fangs and a neutral expression. It is holding a trick-or-treating candy bag in the shape of a Jack O’ Lantern.</title>
+  <path d="M110.03 129.11H59.56c-4.03-20.09-8.06-40.18-12.09-60.28 24.53-7.05 50.11-7.05 74.64 0-4.03 20.09-8.06 40.18-12.09 60.28h.01Z" fill="#5A6578"/>
+  <path opacity=".82" d="M59.69 78.2h20.03c2.84 0 5.14 2.31 5.14 5.14v4.04c0 8.13-6.6 14.73-14.73 14.73H59.68c-2.84 0-5.14-2.31-5.14-5.14V83.35c0-2.84 2.31-5.14 5.14-5.14l.01-.01Z" fill="#4E5967"/>
+  <path opacity=".82" d="M109.34 102.1H98.89c-8.13 0-14.73-6.6-14.73-14.73v-4.04c0-2.84 2.31-5.14 5.14-5.14h20.03c2.84 0 5.14 2.31 5.14 5.14v13.62c0 2.84-2.31 5.14-5.14 5.14l.01.01Z" fill="#4E5967"/>
+  <path class="gargoyle__wing gargoyle__wing--left" d="M1.92 6.61c10.02-3.94 35.96-11.36 59.05 5.51 4.27 3.12 6.41 8.36 5.64 13.59-1.23 8.41-1.73 22.09 5.66 31.03 2.72 3.29 1.64 8.26-2.17 10.18l-11.91 5.99c-3.39 1.71-7.55.1-8.83-3.48-1.95-5.44-6.52-12.14-17.23-13.23-1.05-.11-1.88-.94-2.02-1.99-.65-4.97-3.68-18.24-17.38-18.95a2.27 2.27 0 0 1-2.13-2.47c.44-4.86.21-15.74-9.17-22.2-1.5-1.03-1.21-3.33.49-3.99v.01Z" fill="#4B5663"/>
+  <path class="gargoyle__wing gargoyle__wing--right" d="M164.07 5.87c-10.02-3.94-35.96-11.36-59.05 5.51-4.27 3.12-6.41 8.36-5.64 13.59 1.23 8.41 1.73 22.09-5.66 31.03-2.72 3.29-1.64 8.26 2.17 10.18l11.91 5.99c3.39 1.71 7.55.1 8.83-3.48 1.95-5.44 6.52-12.14 17.23-13.23 1.05-.11 1.88-.94 2.02-1.99.65-4.97 3.68-18.24 17.38-18.95a2.27 2.27 0 0 0 2.13-2.47c-.44-4.86-.21-15.74 9.17-22.2 1.5-1.03 1.21-3.33-.49-3.99v.01Z" fill="#4B5663"/>
+  <path d="M113.65 84.18c-.34-10.28 18.22-14.14 24.42-5.08l.12.18c4.38 6.55 4.53 11.6.38 18.3l-9.3 16.15c-1.21 2.11-3.96 3.51-7 3.58-4.18.1-7.61-2.33-7.72-5.46l-.9-27.69v.02Z" fill="#72798C"/>
+  <path d="m144.747 127.009-24.302-.938a3.704 3.704 0 0 1-3.555-3.84l.164-4.236a5.982 5.982 0 0 1 6.206-5.745l15.069.581c5.756.222 10.252 5.079 10.029 10.835a3.482 3.482 0 0 1-3.611 3.343Z" fill="#72798C"/>
+  <path d="M141.4 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="M133.05 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="M125.54 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="M58.1 84.18c.34-10.28-18.22-14.14-24.42-5.08l-.12.18c-4.38 6.55-4.53 11.6-.38 18.3l9.3 16.15c1.21 2.11 3.96 3.51 7 3.58 4.18.1 7.61-2.33 7.72-5.46l.9-27.69v.02Z" fill="#72798C"/>
+  <path d="m31.61 112.826 15.069-.581a5.982 5.982 0 0 1 6.206 5.744l.163 4.237a3.704 3.704 0 0 1-3.554 3.84l-24.302.938a3.483 3.483 0 0 1-3.612-3.343c-.222-5.756 4.274-10.613 10.03-10.835Z" fill="#72798C"/>
+  <path d="M41.21 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="M32.85 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="M24.49 120.88h4.14c1.55 0 2.82 1.26 2.82 2.82v3.35a4.89 4.89 0 0 1-9.78 0v-3.35c0-1.55 1.26-2.82 2.82-2.82Z" fill="#72798C"/>
+  <path d="m55.87 175.13 8.54-21.67c1.68-4.25 5.78-7.05 10.35-7.05h15.83c4.89 0 9.2 3.19 10.63 7.86l6.33 20.6" stroke="#000" stroke-width="2.55" stroke-miterlimit="10" fill="none"/>
+  <path d="M63.14 68.5c-3.02-14.21-23.28-14.38-26.49-.21l-.06.27c-1.51 6.93-.36 14.18 3.02 20.41l27.26 37.28a4.357 4.357 0 0 0 4.73 1.62 4.382 4.382 0 0 0 3.08-5.11L63.15 68.5h-.01Z" fill="#7A859A"/>
+  <path d="M71.7 109.84c-2.49-10.9-18.05-10.88-20.48.03-.02.07-.03.15-.05.22-1.67 7.87-.44 13.22 4.61 19.37l11.61 14.97a6.245 6.245 0 0 0 11.02-5.22l-6.71-29.37Z" fill="#7A859A"/>
+  <path d="M73.98 135.29c-3.62-2.2-9.28.36-11.75 4.42-2.47 4.06-2.64 10.72.98 12.92l2.49 1.66c2.14 1.43 6.27 1.15 7.87-1.38l4.72-7.47c1.84-3.07.13-7.45-2.49-9.04l-1.82-1.1v-.01Z" fill="#7A859A"/>
+  <path d="M104.97 70.49c3.02-14.21 23.28-14.38 26.49-.21l.06.27c1.51 6.93.36 14.18-3.02 20.41l-27.26 37.28a4.357 4.357 0 0 1-4.73 1.62 4.382 4.382 0 0 1-3.08-5.11l11.53-54.26h.01Z" fill="#7A859A"/>
+  <path d="M96.4 111.83c2.49-10.9 18.05-10.88 20.48.03.02.07.03.15.05.22 1.67 7.87.44 13.22-4.61 19.37l-11.61 14.97a6.245 6.245 0 0 1-11.02-5.22l6.71-29.37Z" fill="#7A859A"/>
+  <path d="M94.13 137.28c3.62-2.2 9.28.36 11.75 4.42 2.47 4.06 2.64 10.72-.98 12.92l-2.49 1.66c-2.14 1.43-6.27 1.15-7.87-1.38l-4.72-7.47c-1.84-3.07-.13-7.45 2.49-9.04l1.82-1.1v-.01Z" fill="#7A859A"/>
+  <path d="m109.3 50.71 3.95-22.68c.12-2.49-3.56-3.97-5.58-2.25L91.81 44.14s17.49 6.68 17.49 6.57Z" fill="#fff"/>
+  <path d="m63.38 51.26-5.42-22.38c-.26-2.48 3.57-4.28 5.81-2.72l17.84 17.06s-18.22 8.15-18.24 8.04h.01Z" fill="#fff"/>
+  <path d="M47.55 43.85c13.35 0 17.31 6.68 17.31 6.68l.25 15.83s-17.56-7.42-17.56-22.5v-.01Z" fill="#818EA0"/>
+  <path d="M124.7 43.85c-13.35 0-17.31 6.68-17.31 6.68l-.25 15.83s17.56-7.42 17.56-22.5v-.01Z" fill="#818EA0"/>
+  <path d="m62.38 53.47-1.83 14.61h51.13l-1.6-15.06s-4.68-16.09-24.31-16.09-23.4 16.55-23.4 16.55l.01-.01Z" fill="#818EA0"/>
+  <path d="m79.64 42.63 13.56.07c3.79.02 7.18-2.63 7.82-6.37 0-.03 0-.05.01-.08.76-4.24-2.1-8.47-6.82-10.13-1.67-.59-3.14-1.64-4.09-3.13-2.59-4.07-7.14-6.51-11.74-5.73-7.07 1.19-10.26 8.96-7.77 16.55.6 1.94 1.44 3.7 2.43 5.24 1.43 2.24 3.94 3.57 6.6 3.58Z" fill="#818EA0"/>
+  <path d="m111.85 70.32-2.68-7.28c-.86-2.33-4.16-2.32-5 .01l-2.64 7.29c-.04.1.04.21.15.21l10.02-.02c.11 0 .19-.11.15-.21Z" fill="#fff"/>
+  <path d="m70.06 70.32-2.68-7.28c-.86-2.33-4.16-2.32-5 .01l-2.64 7.29c-.04.1.04.21.15.21l10.02-.02c.11 0 .19-.11.15-.21Z" fill="#fff"/>
+  <path d="M60.82 67.59h50.61a2.88 2.88 0 0 1 2.88 2.88v4.38c0 3.36-2.73 6.09-6.09 6.09H64.03c-3.36 0-6.09-2.73-6.09-6.09v-4.38a2.88 2.88 0 0 1 2.88-2.88Z" fill="#576273"/>
+  <path d="M95.77 44.91c-4.21 0-7.88 1.98-9.77 4.89-1.89-2.92-5.55-4.89-9.77-4.89-6.15 0-11.13 4.21-11.13 9.4s4.98 9.4 11.13 9.4c4.21 0 7.88-1.98 9.77-4.89 1.89 2.92 5.55 4.89 9.77 4.89 6.15 0 11.13-4.21 11.13-9.4s-4.98-9.4-11.13-9.4Z" fill="#fff"/>
+  <path d="M76.11 59.37c3.004 0 5.44-1.939 5.44-4.33s-2.436-4.33-5.44-4.33c-3.004 0-5.44 1.939-5.44 4.33s2.436 4.33 5.44 4.33Z" fill="#23201F"/>
+  <path d="M95.39 59.37c3.004 0 5.44-1.939 5.44-4.33s-2.436-4.33-5.44-4.33c-3.004 0-5.44 1.939-5.44 4.33s2.436 4.33 5.44 4.33Z" fill="#23201F"/>
+  <path d="M95.62 44.38c-4.43 0-8.29 2.08-10.27 5.15-.91 1.41-1.43 3.02-1.43 4.74 0 .26.02.52.04.78h23.33c.02-.26.04-.52.04-.78 0-5.46-5.24-9.88-11.7-9.88l-.01-.01Z" fill="#576273"/>
+  <path d="M76.38 44.38c-4.43 0-8.29 2.08-10.27 5.15-.91 1.41-1.43 3.02-1.43 4.74 0 .26.02.52.04.78h23.33c.02-.26.04-.52.04-.78 0-5.46-5.24-9.88-11.7-9.88l-.01-.01Z" fill="#576273"/>
+  <path d="M93.01 70.98c-4.64.74-9.37.74-14.02 0-1.82-.29-2.92-2.18-2.3-3.91 1.55-4.34 3.49-9.76 4.5-12.6a2.957 2.957 0 0 1 2.79-1.96h4.03c1.25 0 2.37.79 2.79 1.96 1.02 2.85 2.95 8.26 4.5 12.6.62 1.73-.48 3.62-2.3 3.91h.01Z" fill="#72798C"/>
+  <path d="M122.22 208.04c0-.78-.05-1.54-.14-2.31-.02-.26-.05-.52-.09-.78-3.23-9.63-9.7-18.23-10.9-28.35-.26-2.17-2.12-3.79-4.3-3.79h-50.2c-2.12 0-3.9 1.54-4.27 3.62-.37 2.08-1.17 4.23-1.84 6.4-3.34 8.48-8.74 15.94-9.51 25.2 0 4.59 1.71 8.95 4.62 12.16 4.62 4.84 10.64 6.06 16.91 6.11 12.66.24 25.26.5 37.91.13 6.53-.12 12.76-1.51 17.59-6.7 2.67-3.19 4.21-7.21 4.22-11.71v.02Z" fill="#CB7748"/>
+  <path d="M94.64 179.51c-4.9-1.23-9.64-.34-12.49 1.98-.32.26-.79.26-1.11 0-2.85-2.33-7.59-3.21-12.49-1.98-7.04 1.76-11.74 7.21-10.5 12.17.77 3.07 3.64 5.24 7.38 6.02a.902.902 0 0 0 1.08-.91v-.05c0-2.56 2.13-4.63 4.76-4.63 2.15 0 3.97 1.39 4.55 3.3.16.54.79.78 1.28.51 1.5-.79 2.8-1.77 3.85-2.86.35-.36.94-.36 1.29 0 1.08 1.13 2.44 2.13 4.01 2.94.5.26 1.12 0 1.27-.53.56-1.94 2.39-3.37 4.57-3.37 2.63 0 4.76 2.07 4.76 4.63v.01c0 .58.52 1.03 1.09.91 3.65-.82 6.44-2.96 7.19-5.97 1.24-4.96-3.46-10.41-10.5-12.17h.01Z" fill="#000"/>
+  <path d="M108.18 198.39c-3.71.71-9.77 1.81-13.46 2.19-.89.09-1.56.84-1.56 1.74v3.98c0 .96-.78 1.74-1.74 1.74h-3.45c-.96 0-1.74-.78-1.74-1.74v-3.33c0-.98-.8-1.77-1.78-1.74-2.49.06-4.99.04-7.48-.05-.98-.04-1.8.76-1.8 1.74v3.38c0 .96-.78 1.74-1.74 1.74h-3.45c-.96 0-1.74-.78-1.74-1.74v-4.18c0-.88-.66-1.63-1.54-1.73-3.81-.44-7.6-1.06-11.37-1.84-1.83-.38-3.49 1.17-3.21 3.02.88 5.84 4.03 16.34 15.38 16.34 2.72.26 5.45.45 8.18.56.99.04 1.82-.75 1.82-1.74v-3.33c0-.96.78-1.74 1.74-1.74h3.97c.96 0 1.74.78 1.74 1.74v3.36c0 .99.82 1.78 1.81 1.74 2.99-.1 5.98-.3 8.96-.59 12.7 0 15.22-10.92 15.66-16.68.14-1.76-1.45-3.16-3.18-2.83l-.02-.01Z" fill="#000"/>
+</svg>
+
+
+
+
+<svg class="page__feature fox" viewBox="0 0 245 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A fox dressed in a purple wizard’s robes and hat, and holding a wand topped with a star. It conjures up blue smoke from a cauldron marked with a star symbol.</title>
+  <path d="m19.53 23.56 3.92.49-10.06 93.54s-.17 4.83-4.21 4.17c-4.04-.66-3.25-5.11-3.25-5.11l13.6-93.1v.01Z" fill="#DCB99B"/>
+  <path d="m26.02 32.85-3.72-2.68c-.86-.62-2.05-.75-3.02-.34l-4.23 1.79c-2.08.88-4.5-.77-3.96-2.71l1.76-6.36c.17-.62.03-1.29-.39-1.84L8.17 15.1c-1.15-1.51-.03-3.46 2.04-3.55l5.83-.25c.95-.04 1.78-.5 2.21-1.2l2.69-4.44c1.12-1.86 4.4-1.49 5.08.57l1.63 4.93c.26.79.97 1.41 1.89 1.66l5.63 1.53c2 .55 2.67 2.7 1.21 3.92l-5.42 4.52c-.53.44-.81 1.06-.78 1.7l.31 6.59c.09 2.01-2.63 3.09-4.47 1.77Z" fill="#D288A9"/>
+  <path d="M61.1 159.03c-5.51-1.14-16.48-2.72-25.55.3-1.61.54-2.64 2.45-2.16 4.03 1.52 4.55 4.88 14.08 13.87 21.44 8.03 6.39 17.94 10.67 25.69-2.15s-.71-21.39-11.85-23.63v.01Z" fill="#C07347"/>
+  <path d="M56.44 157.44c-8.79-2.71-20.55-4.06-27.29-2.38-1.69.42-2.66 2.25-2.03 3.86 1.62 3.86 9.2 15.03 15.36 21.37 2.74 3.01 6.66 2.66 8.26.54.96-1.27.94-3.1.13-4.88 2.17.43 4.3-.14 5.58-1.71 1.81-2.21 1.26-5.64-1.15-8.02 2.37.26 4.46-.43 5.29-1.95 1.18-2.18.55-5.68-4.16-6.83h.01Z" fill="#DCB99B"/>
+  <path d="M71.98 220.24c-7.53-1.42-5.9-8.57-5.9-8.57l2.96-49.39s1.12-15.39 14.68-12.84c13.56 2.55 9.25 16.45 9.25 16.45l-11.8 48.59s-1.66 7.18-9.19 5.76Z" fill="#C07347"/>
+  <path d="m58.911 208.477 16.068-.62a6.385 6.385 0 0 1 6.621 6.129l.175 4.517a3.942 3.942 0 0 1-3.786 4.089l-25.91 1a3.709 3.709 0 0 1-3.85-3.565c-.237-6.135 4.556-11.314 10.692-11.55h-.01Z" fill="#C07347"/>
+  <path d="M135.67 219.97c7.53-1.42 5.9-8.57 5.9-8.57l-2.96-49.39s-1.12-15.39-14.68-12.84c-13.56 2.55-9.25 16.45-9.25 16.45l11.8 48.59s1.66 7.18 9.19 5.76Z" fill="#C16B31"/>
+  <path d="m155.681 223.316-25.911-1a3.941 3.941 0 0 1-3.785-4.089l.174-4.517a6.385 6.385 0 0 1 6.622-6.129l16.068.62c6.135.237 10.929 5.415 10.692 11.551a3.709 3.709 0 0 1-3.85 3.564h-.01Z" fill="#C16B31"/>
+  <path d="M182.69 75.6a6.244 6.244 0 0 0-8.25-.69L148.63 94.1c-4.16 3.98-4.3 10.58-.32 14.74s10.58 4.3 14.74.32l20.02-25.35a6.254 6.254 0 0 0-.39-8.2l.01-.01Z" fill="#C07347"/>
+  <path d="M184.28 84.16c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27-6.777 0-12.27 5.494-12.27 12.27 0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347"/>
+  <path d="m167.48 121.81-14.44-33.83-31.09 19.89c-7.19 4.4-9.9 13.51-6.3 21.13a16.496 16.496 0 0 0 18.52 9.04l29.22-7.83c3.63-.97 5.56-4.93 4.08-8.39l.01-.01Z" fill="#7A6D8F"/>
+  <path d="m151.691 85.843-.009.004a5.71 5.71 0 0 0-2.673 7.62l15.915 33.114a5.71 5.71 0 0 0 7.62 2.673l.009-.005a5.71 5.71 0 0 0 2.673-7.62l-15.915-33.114a5.71 5.71 0 0 0-7.62-2.672Z" fill="#5A4D6D"/>
+  <path d="M14.42 99.76a6.26 6.26 0 0 1 8.04-1.98l28.49 14.91c4.73 3.28 5.91 9.78 2.63 14.51-3.28 4.73-9.78 5.91-14.51 2.63l-23.75-21.9c-2.29-2.12-2.68-5.6-.9-8.16v-.01Z" fill="#C07347"/>
+  <path d="M13.15 106.3c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27C6.373 81.76.88 87.253.88 94.03c0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347"/>
+  <path d="m38.73 143.24 1.85-37.83 36.06 7.86c8.27 1.63 13.98 9.23 13.24 17.63-.68 7.69-6.59 13.88-14.23 14.9l-31.21 2.9c-3.17.29-5.86-2.28-5.7-5.46h-.01Z" fill="#7A6D8F"/>
+  <path d="m44.198 102.671-.01-.001a5.71 5.71 0 0 0-6.048 5.351l-2.243 36.671a5.71 5.71 0 0 0 5.351 6.048l.01.001a5.71 5.71 0 0 0 6.048-5.351l2.243-36.671a5.71 5.71 0 0 0-5.35-6.048Z" fill="#5A4D6D"/>
+  <path d="m148.12 198.89-85.77 1.77c-2.69.06-4.76-2.37-4.27-5.02l10.08-88.79c2.34-15.1 14.95-26.5 30.21-27.3 15.42-.81 29.25 9.42 32.99 24.39l20.78 89.57c.73 2.67-1.25 5.32-4.02 5.38Z" fill="#7A6D8F"/>
+  <path d="M106.16 126.046c15.933-3.065 27.47-12.725 25.767-21.576-1.703-8.851-16-13.541-31.934-10.476-15.934 3.066-27.47 12.726-25.768 21.577 1.703 8.851 16 13.541 31.935 10.475Z" fill="#5A4D6D"/>
+  <path d="M158.34 196.41v-.01a5.71 5.71 0 0 0-5.71-5.71H56.31a5.71 5.71 0 0 0-5.71 5.71v.01a5.71 5.71 0 0 0 5.71 5.71h96.32a5.71 5.71 0 0 0 5.71-5.71Z" fill="#5A4D6D"/>
+  <path d="M128.72 149.19c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"/>
+  <path d="M120.93 166.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"/>
+  <path d="M145.69 145.21c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"/>
+  <path d="M158.31 131.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"/>
+  <path d="M145.85 159.49c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE"/>
+  <path d="M157.69 155.95c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE"/>
+  <path d="M178.95 122.82c9.278 0 16.8-7.799 16.8-17.42 0-9.62-7.522-17.42-16.8-17.42s-16.8 7.8-16.8 17.42c0 9.621 7.522 17.42 16.8 17.42Z" fill="#9DB1CE"/>
+  <path d="M194.58 144.32c10.979 0 19.88-9.232 19.88-20.62 0-11.388-8.901-20.62-19.88-20.62s-19.88 9.232-19.88 20.62c0 11.388 8.901 20.62 19.88 20.62Z" fill="#9DB1CE"/>
+  <path d="M198.44 107.27c6.556 0 11.87-5.511 11.87-12.31 0-6.798-5.314-12.31-11.87-12.31-6.556 0-11.87 5.511-11.87 12.31s5.314 12.31 11.87 12.31Z" fill="#9DB1CE"/>
+  <path d="M212.04 122c7.76 0 14.05-6.519 14.05-14.56s-6.29-14.56-14.05-14.56c-7.76 0-14.05 6.519-14.05 14.56S204.28 122 212.04 122Z" fill="#9DB1CE"/>
+  <path d="M232.05 114.9c6.633 0 12.01-5.574 12.01-12.45 0-6.876-5.377-12.45-12.01-12.45s-12.01 5.574-12.01 12.45c0 6.876 5.377 12.45 12.01 12.45Z" fill="#9DB1CE"/>
+  <path d="M219.19 105.93c7.158 0 12.96-6.017 12.96-13.44 0-7.423-5.802-13.44-12.96-13.44-7.158 0-12.96 6.017-12.96 13.44 0 7.423 5.802 13.44 12.96 13.44Z" fill="#9DB1CE"/>
+  <path d="M171.96 144.77c8.82 0 15.97-7.414 15.97-16.56 0-9.146-7.15-16.56-15.97-16.56s-15.97 7.414-15.97 16.56c0 9.146 7.15 16.56 15.97 16.56Z" fill="#9DB1CE"/>
+  <path d="M183.61 196.02c.2-12.2-5.49-25.62-14.82-35.6h3.97c1.51 0 2.73-1.22 2.73-2.73v-4.85c0-1.51-1.22-2.73-2.73-2.73H99.89c-1.51 0-2.73 1.22-2.73 2.73v4.85c0 1.51 1.22 2.73 2.73 2.73h3.97c-9.33 9.97-15.01 23.4-14.82 35.6.14 10.93 4.74 18.22 12.26 22.91l-1.56 6.4a4.58 4.58 0 0 0 8.42 3.37l3.12-5.42c7.25 2.14 15.83 3.02 25.05 3.07 8.53-.05 16.5-.8 23.39-2.61l3.5 5.23a4.584 4.584 0 0 0 8.17-3.95l-1.64-5.15c8.46-4.63 13.72-12.16 13.86-23.85Z" fill="#050505"/>
+  <path d="M140.24 204.1c-8.66 0-15.68-7.02-15.68-15.68s6.99-15.66 15.64-15.68c1.05 0 2.07.1 3.06.29.55.11.82-.65.32-.91a18.723 18.723 0 0 0-8.54-2.06c-10.19 0-18.58 8.21-18.78 18.39-.21 10.54 8.28 19.16 18.77 19.16 3.38 0 6.54-.89 9.28-2.45.79-.45.32-1.65-.56-1.45-1.13.26-2.3.39-3.51.39Z" fill="#63594E"/>
+  <path d="M36.63 42.37c7.3-.08 14.01 1.22 19.84 3.65.49.2.97.41 1.44.63 6.84 3.11 13.26 7.63 16.14 14.58 3.42 9.92-6.74 22.78-17.31 20.34-8.61-2.29-13.81-11-17.01-18.94-.18-.49-.36-.98-.52-1.48-1.84-5.49-2.79-11.81-2.58-18.78Z" fill="#050505"/>
+  <path d="M54.59 51.23c-.4.55-.48 1.18-.31 1.86-3.94-.97-7.22-.63-7.82 1.79-.54 2.22 1.62 4.21 4.91 5.45-2.87 1.3-4.26 3.49-3.45 6.04 1.01 3.14 4.63 4.2 8.78 2.82-.93 2.02-.85 3.89.81 5 2.49 1.66 5.65-.29 7.59-3.67l3.03-9.22c.29-1.19-.09-2.45-.99-3.31-1.39-1.33-5.27-4.81-5.27-4.81s-5.57-4.4-7.27-1.94l-.01-.01Z" fill="#fff"/>
+  <path d="M127.91 20.6c-6.5 3.33-11.83 7.6-15.86 12.47-.34.41-.66.82-.98 1.23-4.61 5.93-8.18 12.93-7.5 20.42 1.59 10.37 16.57 17.02 24.79 9.94 6.56-6.04 7.1-16.16 6.24-24.68-.06-.51-.14-1.03-.22-1.55-.93-5.72-3.04-11.75-6.46-17.82l-.01-.01Z" fill="#050505"/>
+  <path d="M117.4 35.93c.6.31.96.85 1.11 1.53 3.1-2.61 6.19-3.77 7.8-1.87 1.47 1.74.42 4.49-1.97 7.06 3.15-.11 5.37 1.23 5.77 3.88.49 3.27-2.28 5.82-6.61 6.43 1.73 1.4 2.49 3.1 1.5 4.84-1.49 2.59-5.19 2.25-8.43.08l-6.81-6.91c-.79-.94-1.01-2.23-.58-3.41.66-1.81 2.58-6.65 2.58-6.65s3.03-6.42 5.65-4.97l-.01-.01Z" fill="#fff"/>
+  <path d="M106.35 113.27c56.32-14.69 35.96-57.21 35.96-57.21L40.46 81.21s.59 45.93 65.89 32.06Z" fill="#DCB99B"/>
+  <path d="M93.67 67.89c-2.44 3.24-3.42 6.5-2.47 9.34 2.51 7.55 17.87 14.24 34.02 8.87 18.55-6.65 17.03-30.32 17.03-30.32s-23.89 5.98-48.58 12.12v-.01Z" fill="#C07347"/>
+  <path d="M40.46 81.22c-.18.04 9.32 16.22 30.17 15.3 20.85-.92 30.76-14.49 29.66-22.37-.35-2.52-1.78-5.66-4.51-7.37-24.97 6.21-51.62 13.7-55.31 14.44h-.01Z" fill="#C07347"/>
+  <path d="M51.96 81.95c-2.51-15.2 9.1-34.04 31.26-39.24 22.17-5.2 44.16 4.16 49.27 18.5L51.95 81.95h.01Z" fill="#C07347"/>
+  <path d="M112.12 43.97 55.91 63.54l6.63-59.05c.37-3.25 4.34-4.67 6.68-2.39l42.9 41.87Z" fill="#7A6D8F"/>
+  <path d="M26.89 74.07c.37 1 1.48 1.5 2.48 1.13l115.68-43.52c1-.37 1.5-1.48 1.13-2.48-.37-1-1.48-1.5-2.48-1.13L28.02 71.59c-1 .37-1.5 1.48-1.13 2.48Z" fill="#7A6D8F"/>
+  <path d="M84.51 94.55s2.15 10.04 15.46 7.29c13.31-2.75 10.28-13.59 10.28-13.59s-9.9.06-14.64-3.71c-2.75 7.18-11.09 10.01-11.09 10.01h-.01Z" fill="#050505"/>
+  <path d="M92.03 99.46c.35-2.16 4.26-4.02 7.55-2.1.89-2.07 5.56-3.53 6.92-1.65.33 3.1-13.2 6.17-14.47 3.75Z" fill="#D288A9"/>
+  <path d="m85.66 93.45 6.75-4.91 1.42 6.35c.12 1.1-1.61 2.19-2.94 1.37l-5.22-2.82-.01.01Z" fill="#fff"/>
+  <path d="m99.46 86.09 8.28 2.45-2.74 3.89c-.38 1.54-2.52 1.83-3.15.43l-2.38-6.78-.01.01Z" fill="#fff"/>
+  <path d="M79.53 96.21c-.67 0-1.22-.54-1.22-1.22 0-.68.54-1.23 1.22-1.23 6.94-.04 13.08-4.73 14.27-10.93l.43-2.21 1.62 1.55c2.99 2.87 12.14 7.22 19.73 4.3a1.223 1.223 0 0 1 .88 2.28c-7.65 2.94-16.4-.44-20.77-3.56-2.19 6.36-8.79 10.97-16.16 11.01v.01Z" fill="#050505"/>
+  <path d="M105 53.93c-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-5.97-2.15-13.1 2.89-16.16 11.33-.08.22-.15.44-.23.66-2.88 7.62-.95 20.62 9.44 19.84 7.31-.3 11.59-7.04 13.26-13.63.07-.3.14-.6.2-.9.06-.3.12-.6.17-.89 3.68 3.72 9.92 6.07 16.88 5.83 10.84-.37 19.33-6.85 18.95-14.47-.38-7.63-9.48-13.51-20.32-13.15Z" fill="#fff"/>
+  <path d="M119.31 57.48c-3.75-2.96-8.91-5.21-15.02-5-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-6.12-2.21-13.46 3.16-16.39 11.99-.79 2.38-1.17 4.77-1.2 7.03 3.76-1.84 5.36-10.18 12.69-12.78 8.79-4.32 9.62 4.97 11.73 4.13 2.28-.91.78-7.79 13.62-10.21 5.37-1.01 10.93 1.68 16.76-.53v-.01Z" fill="#D288A9"/>
+  <path d="M83.744 75.279c.835-3.77-.372-7.242-2.696-7.757-2.324-.515-4.885 2.123-5.72 5.892-.835 3.77.373 7.242 2.697 7.757 2.324.515 4.884-2.123 5.72-5.892Z" fill="#050505"/>
+  <path d="M110.619 70.832c1.292-2.044-.301-5.372-3.56-7.431-3.258-2.06-6.948-2.073-8.24-.028-1.293 2.045.3 5.372 3.559 7.432 3.259 2.06 6.948 2.072 8.241.027Z" fill="#050505"/>
+  <path d="M124.79 54.21c-.44-.55-1.21-.65-1.71-.21-1.11.97-2.34 1.7-3.6 2.22.95-.76 1.83-1.62 2.62-2.62 1-1.37-1.06-3-1.98-1.57a14.35 14.35 0 0 1-3.31 3.6c.84-.91 1.57-1.94 2.14-3.11.69-1.56-1.6-2.71-2.22-1.12-.54 1.48-1.55 2.86-2.74 3.99-.77.72-1.64 1.34-2.57 1.84-21.09-2.3-23.69 10.03-23.79 10.57-.13.68.29 1.37.94 1.54.1.03.2.04.29.04.54 0 1.02-.38 1.14-.96.09-.45 2.45-10.93 21.91-8.58 1.73.21 7.73.55 12.75-3.83.5-.44.55-1.24.11-1.8h.02Z" fill="#050505"/>
+  <path d="M89.81 67.36c-.11-.23-2.72-5.62-7.9-6.09-4.34-.39-8.94 2.82-13.7 9.54-1.28.69-2.7 1.13-4.15 1.33-1.67.22-3.4.14-4.89-.37-1.63-.52-2.3 1.99-.65 2.44 1.38.31 2.77.38 4.13.27-1.48.29-3 .38-4.47.21-1.71-.18-1.86 2.45-.14 2.53.92 0 1.81-.07 2.69-.2-1.24.3-2.57.37-3.98.19-.69-.09-1.29.41-1.37 1.1-.08.69.42 1.33 1.1 1.41.73.09 1.45.13 2.15.11 4.34-.1 8.06-2.3 10.83-6.43 4.44-6.6 8.67-9.92 12.24-9.62 3.73.33 5.82 4.56 5.86 4.64.3.63 1.05.91 1.66.61.62-.3.87-1.05.57-1.68l.02.01Z" fill="#050505"/>
+  <path d="M103.9 76.27c.87 3.45-8.67 8.86-8.67 8.86s-10.87-.28-11.74-3.73c-.87-3.45 3-7.39 8.64-8.81 5.64-1.42 10.91.23 11.77 3.68Z" fill="#050505"/>
+</svg>
+<canvas class="wand-canvas"></canvas><article class="content-block content-block--nine astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H"><abbr title='Graphic User Interface'>GUI</abbr> Challenges</h2>
+  <p id="<abbr-title='Graphic-User-Interface'>GUI</abbr>-Challenges" class="astro-SCMHTS4H">Join Adam and learn how to approach your most ghoulish UI challenges.</p>
+  <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ" target="_blank" rel="noopener" aria-describedby="<abbr-title='Graphic-User-Interface'>GUI</abbr>-Challenges" class="astro-SCMHTS4H">Read more</a>
+</article><article class="content-block content-block--ten astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">New in DevTools</h2>
+  <p id="New-in-DevTools" class="astro-SCMHTS4H">Debugging is magical in this helpful video series.</p>
+  <a href="https://www.youtube.com/watch?v=5gBqTXctxO8&#38;list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD&#38;index=1" target="_blank" rel="noopener" aria-describedby="New-in-DevTools" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 4">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <img src="/third_party/chrometober-2022/assets/Shelves.685778f6.svg" class="page__feature shelves" alt="A blue bookshelf holding a few books. Other items on its shelves include a detached bat wing, a fish skeleton, a large pair of scissors, and a dung beetle in a glass bell jar." width="118" height="150">
+<article class="content-block content-block--eleven astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Learn <abbr title='Hyper Text Markup Language'>HTML</abbr></h2>
+  <p id="Learn-<abbr-title='Hyper-Text-Markup-Language'>HTML</abbr>" class="astro-SCMHTS4H">Everything has its place in HTML. Learn how to choose the right semantic elements.</p>
+  <a href="https://web.dev/learn/html" target="_blank" rel="noopener" aria-describedby="Learn-<abbr-title='Hyper-Text-Markup-Language'>HTML</abbr>" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="5" style="--index:4;" aria-label="page 4">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 4">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread4--dark.691481f3.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread4.c413e30a.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature ghost" viewBox="0 0 140 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A white ghost emerging through the closed door of a refrigerator. It has a small black bowler hat floating just above its head. It is holding groceries stolen from the fridge.</title>
+  <path class="ghost__body" d="M139.53 74.68c-.32 49.02-23.54 85.46-65.46 95.78 0 0-49.14 11.31-71.61-12.94a5.729 5.729 0 0 1-1.52-3.89c-.03-4.34 4.55-7.19 8.41-5.21 5.23 2.68 12.63 4.92 21.51 3.33 18.06-3.22 24.19-33.54 8.06-51.28C22.8 82.73 16.35 41.78 68.27 27.91c20.96-5.16 71.59-2.26 71.27 46.76l-.01.01Z" fill="#fff"/>
+  <path class="ghost__body" d="M65.55 28.1C63.29 8.75 78.62.79 90.06.37c11.44-.42 16.53 9.96 18.66 15.35 1.28 3.26 2.94 6.6 5.9 8.46 3.41 2.13 7.91 1.78 11.59.15 1.78-.79 3.49-1.87 5.43-2 3.16-.22 6.1 2.38 6.82 5.47.72 3.09-.5 6.41-2.61 8.78-2.11 2.37-5.01 3.9-8 4.97-12.26 4.41-26.89 1.34-36.35-7.63l-25.96-5.81.01-.01Z" fill="#fff"/>
+  <path d="M112.81 53.36c-8.85-3.69-17.94-2.92-22.57 1.4-5-6.94-16.51-9.01-27.43-4.45-12.21 5.1-19.06 16.54-15.29 25.55 3.76 9.01 16.71 12.19 28.92 7.09 6.5-2.71 11.48-7.23 14.15-12.22 2.61 3.38 6.57 6.42 11.44 8.45 10.79 4.51 21.95 2.37 24.93-4.76 2.98-7.13-3.36-16.57-14.15-21.07v.01Z" stroke="#000" stroke-width="2.41" stroke-miterlimit="10" stroke-linecap="round" fill="#FFF"/>
+  <path d="M112.863 70.187c1.693-2.932-.936-7.619-5.872-10.468-4.936-2.85-10.31-2.784-12.003.148-1.692 2.932.937 7.62 5.873 10.469 4.936 2.85 10.309 2.783 12.002-.149Z" fill="#000"/>
+  <path d="M81.376 71.044c4.508-3.488 6.107-8.971 3.572-12.247-2.534-3.276-8.243-3.105-12.751.383-4.508 3.488-6.108 8.971-3.573 12.247 2.535 3.276 8.244 3.105 12.752-.383Z" fill="#000"/>
+  <path d="M84.29 43.9c-.3 0-.61-.11-.84-.34-9.02-8.76-18.85-1.43-19.26-1.11-.53.4-1.28.3-1.69-.23a1.2 1.2 0 0 1 .23-1.69c.12-.09 11.91-8.9 22.4 1.3.48.46.49 1.23.02 1.7-.24.24-.55.36-.86.36v.01Z" fill="#000"/>
+  <path d="M118.98 53.28c-.27 0-.55-.09-.78-.28-9.73-8.21-22.14-5.82-22.26-5.79-.65.13-1.29-.29-1.42-.94-.13-.65.29-1.29.94-1.42.55-.11 13.65-2.67 24.3 6.31.51.43.57 1.19.14 1.7-.24.28-.58.43-.92.43v-.01Z" fill="#000"/>
+  <path d="M60.4 94.47c-16.64 0-20.28-14.8-20.31-14.96-.15-.65.25-1.3.9-1.45a1.2 1.2 0 0 1 1.44.9c.14.58 3.56 14.25 20.01 13.01 9.2-.69 12.96-2.24 16.94-3.88 3.52-1.45 7.17-2.95 14.62-3.75 7.97-.86 12.82.18 17.1 1.1 4.08.87 7.31 1.57 12.16.32 9.1-2.34 7.87-10.89 7.81-11.26-.1-.66.35-1.27 1-1.38.66-.1 1.27.34 1.38 1 .62 3.82-.59 11.66-9.59 13.97-5.41 1.39-9.05.61-13.27-.29-4.1-.88-8.75-1.88-16.34-1.06-7.11.76-10.43 2.13-13.96 3.58-3.98 1.64-8.09 3.34-17.68 4.05-.77.06-1.51.08-2.23.08l.02.02Z" fill="#000"/>
+  <path d="m114.57 92.23-17.2 6.47c-.84.32-1.39 1.21-1.33 2.2l.02.41c.06 1 .73 1.84 1.62 2.03l18.01 3.92c1.3.28 2.47-.87 2.35-2.31l-.83-10.79c-.11-1.43-1.42-2.37-2.65-1.91l.01-.02Z" fill="#8F2828"/>
+  <path d="m77.07 110.27 17.8-6.88c.57-.22.94-.85.9-1.53l-.08-1.42c-.04-.7-.49-1.28-1.1-1.42L75.92 94.8c-.88-.2-1.67.6-1.59 1.61l.96 12.51c.08 1 .96 1.66 1.8 1.34l-.02.01Z" fill="#8F2828"/>
+  <path d="M101.943 101.061c.031-2.882-2.554-5.247-5.774-5.281-3.22-.035-5.854 2.275-5.885 5.157-.03 2.883 2.554 5.248 5.774 5.282 3.22.034 5.855-2.275 5.885-5.158Z" fill="#BF3D3D"/>
+  <path d="M54.2 20.48c-3.26-6.09-11.05-9.32-18.37-9.03-10.24.4-16.93 8.32-16.53 18.66.18 4.48 1.48 8.95 4.62 11.65 23.73-6.39 30.27-21.28 30.27-21.28h.01Z" fill="#000"/>
+  <path d="M20.33 37.75c.64 1.06 1.69 2.68 2.58 3.44 24.26-6.8 30.85-22.39 30.85-22.39-.4-.75-.86-1.45-1.38-2.11a.824.824 0 0 0-1.29 0c-2.63 3.23-13.48 15.48-30.24 19.77a.87.87 0 0 0-.53 1.29h.01Z" fill="#8F2828"/>
+  <path d="M14.21 44.32c-.44 0-.82-.33-.87-.78-.06-.48.29-.92.77-.98.33-.04 33.21-4.23 43.4-31.94.17-.46.67-.69 1.13-.52.46.17.69.67.52 1.13-10.57 28.73-44.5 33.04-44.85 33.08h-.1v.01Z" fill="#000"/>
+  <path d="m124.03 92.8-7.77-1.63c-.81-.17-1.55.48-1.51 1.31.35 7.37-7.42 8.6-10.24 8.8-.59.04-1.07.49-1.15 1.08l-4.05 29.4c-.09.65.34 1.26.98 1.4l21.47 4.51c.64.14 1.28-.25 1.46-.88l8.12-28.54c.16-.57-.1-1.18-.62-1.45-2.51-1.32-9.12-5.57-5.84-12.18.37-.74-.04-1.64-.85-1.81v-.01Z" fill="#99A4BD"/>
+  <path d="m121.37 95.09-3.59-.75c-.64-.13-1.1-.7-1.09-1.36l-.04-5.19c.01-.86.81-1.5 1.65-1.32l5.75 1.21c.84.18 1.32 1.08.98 1.88l-2.13 4.74c-.26.6-.9.94-1.54.81l.01-.02Z" fill="#AB7B39"/>
+  <path d="M126.02 119.03c-.39 1.88-1.45 4.83-2.2 6.82a2.626 2.626 0 0 1-3 1.64l-16.2-3.4a2.63 2.63 0 0 1-2.08-2.77c.11-1.45.4-3.69 1.09-6.99 1.51-7.17 7.74-11.92 13.92-10.62 6.19 1.3 9.98 8.16 8.47 15.33v-.01Z" fill="#AB7B39"/>
+  <path d="M67.54 114.67c-.24 1.55.18 3.08 1.02 4.19-.77.81-1.29 1.97-1.36 3.34-.1 2.25 1.16 4.37 3 5.06 1.3.48 2.72-.59 3.77-1.7 1.14-1.21 2.69-1.73 4.22-1.38l13.64 3.15.98-6.44-13.86-3.45c-1.78-.44-3.28-1.84-4.1-3.76-.56-1.3-1.37-2.59-2.44-2.85-2.28-.55-4.46 1.17-4.87 3.83v.01Z" fill="#FFA8A8"/>
+  <path d="M112.25 110.54c-.75-.11-1.52-.2-2.3-.27-12.07-.94-22.38 5.08-23.03 13.45-.65 8.37 8.6 15.91 20.67 16.86.41.03.81.05 1.22.07l3.45-30.11h-.01Z" fill="#C44D4D"/>
+  <path d="M121.397 127.217c1.376-8.191-2.188-15.618-7.961-16.589-5.773-.97-11.57 4.884-12.946 13.075-1.377 8.192 2.187 15.619 7.96 16.589 5.774.971 11.57-4.883 12.947-13.075Z" fill="#CF7272"/>
+  <path d="M115.174 126.082c.335-2.48-.867-4.688-2.684-4.934-1.817-.245-3.561 1.566-3.896 4.045-.335 2.48.867 4.689 2.684 4.934 1.817.245 3.562-1.566 3.896-4.045Z" fill="#FFA8A8"/>
+  <path d="M94.27 138.82c5.644 0 10.22-4.576 10.22-10.22 0-5.644-4.576-10.22-10.22-10.22-5.644 0-10.22 4.576-10.22 10.22 0 5.644 4.576 10.22 10.22 10.22Z" fill="#80655D"/>
+  <path d="M92.04 122.11h-2.72a.71.71 0 0 0-.71.71v2.72c0 .392.318.71.71.71h2.72a.71.71 0 0 0 .71-.71v-2.72a.71.71 0 0 0-.71-.71Z" fill="#000"/>
+  <path d="m99.946 126.197-1.445.319a1.33 1.33 0 0 0-1.012 1.586l.559 2.529a1.33 1.33 0 0 0 1.585 1.012l1.446-.32a1.329 1.329 0 0 0 1.011-1.585l-.559-2.529a1.329 1.329 0 0 0-1.585-1.012Z" fill="#000"/>
+  <path d="m98.652 124.442-.192-2.172a.571.571 0 0 0-.618-.518l-2.171.192a.57.57 0 0 0-.518.618l.192 2.171a.57.57 0 0 0 .618.518l2.171-.191a.57.57 0 0 0 .518-.618Z" fill="#000"/>
+  <path d="m94.03 130.345-.493-1.564a1.54 1.54 0 0 0-1.932-1.006l-2.976.939a1.539 1.539 0 0 0-1.005 1.931l.493 1.564a1.54 1.54 0 0 0 1.932 1.006l2.975-.938a1.54 1.54 0 0 0 1.006-1.932Z" fill="#000"/>
+  <path d="m98.662 134.933-.191-2.171a.57.57 0 0 0-.618-.518l-2.172.191a.57.57 0 0 0-.517.618l.191 2.172a.57.57 0 0 0 .618.518l2.171-.192a.57.57 0 0 0 .518-.618Z" fill="#000"/>
+  <path class="ghost__body" d="M108.39 133.37s-20.64-2.61-21.73 7.03c-1.08 9.64 17.39 10.21 17.39 10.21s23.37 4.29 29.3-12.55c4.21-11.47 1.39-19.35-3.52-20.66l-7.86 9.61a17.348 17.348 0 0 1-13.59 6.36h.01Z" fill="#fff"/>
+  <path d="M63.92 138.12H50.45c-.2 0-.37-.16-.38-.36-.62-13.21-1.25-26.42-1.87-39.63-.08-1.79 1.35-3.3 3.14-3.3h11.54c.21 0 .38.17.38.37.34 14.17.69 28.35 1.03 42.52 0 .21-.17.39-.38.39l.01.01Z" fill="#805F80"/>
+  <path d="M85.71 138.12H59.32l-.99-39.99a3.213 3.213 0 0 1 3.21-3.29h26.42c1.6 0 2.88 1.34 2.81 2.94-.58 12.4-1.17 24.79-1.75 37.19a3.311 3.311 0 0 1-3.31 3.16v-.01Z" fill="#A37589"/>
+  <path d="M81.93 129.18H66.3c-1.5 0-2.72-1.19-2.76-2.69l-.71-24.82a2.937 2.937 0 0 1 2.94-3.02h16.7c1.66 0 2.98 1.37 2.94 3.02l-.71 24.82a2.764 2.764 0 0 1-2.76 2.69h-.01Z" fill="#D49FC4"/>
+  <path d="M74.52 107.87c3.96 0 7.18 3.22 7.18 7.18v8.68c0 1.63-1.32 2.95-2.95 2.95H70.3c-1.63 0-2.95-1.32-2.95-2.95v-8.68c0-3.96 3.22-7.18 7.18-7.18h-.01Z" fill="#A37589"/>
+  <path d="M74.52 112.41a5.67 5.67 0 1 0 0-11.34 5.67 5.67 0 0 0 0 11.34Z" fill="#805F80"/>
+  <path d="M55.73 133.82h-2.6c-1.08 0-1.97-.87-2.01-1.95l-1.03-31.11c-.04-1.14.88-2.09 2.02-2.09h2.6c1.08 0 1.97.87 2.01 1.95l1.03 31.11c.04 1.14-.88 2.09-2.02 2.09Z" fill="#B07FA4"/>
+  <path class="ghost__body" d="M47.4 113.14s-8.75 5.59-8.75 13.76c0 14.83 26.77 19.35 26.77 19.35s14.51 3.87 16.45-3.22c1.93-9.03-15.8-15.8-15.8-15.8s-14.78-5.95-18.66-14.08l-.01-.01Z" fill="#fff"/>
+</svg>
+
+
+<svg class="page__feature spider" viewBox="0 0 159 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A friendly-looking spider in a janitor’s uniform, complete with a hat. It is standing up on two of its eight legs and sweeping the floor with two more.</title>
+  <path d="M83.96 132.05c22.92 0 41.5-18.397 41.5-41.09 0-22.693-18.58-41.09-41.5-41.09s-41.5 18.397-41.5 41.09c0 22.693 18.58 41.09 41.5 41.09Z" fill="#3C4151"/>
+  <path d="M127.05 89.82c-.55-6.42-2.71-12.34-6.07-17.45-3.94 5.97-10.68 13.6-21.76 19.83-21.65 12.17-56.49 4.72-56.72 4.67v.04l.56 4.08c3.83 19.8 23.19 33.86 45.11 31.98 23.35-2 40.75-21.32 38.88-43.15Z" fill="#567097"/>
+  <path d="M110.66 93.86c-4.88-11.83-13.72-19.5-20.27-23.84l4.54-6.85c7.51 4.98 17.65 13.8 23.32 27.56l-7.6 3.13h.01Z" fill="#567097"/>
+  <path d="M68.64 108.32c-.68-7.63-3.17-15.17-7.4-22.41l7.09-4.15c4.85 8.29 7.71 16.98 8.5 25.83l-8.19.73Z" fill="#567097"/>
+  <path d="M71.12 107.19a2.82 2.82 0 1 0 0-5.64 2.82 2.82 0 0 0 0 5.64Z" fill="#2E4F80"/>
+  <path d="M113.44 93.01a2.82 2.82 0 1 0 0-5.64 2.82 2.82 0 0 0 0 5.64Z" fill="#2E4F80"/>
+  <path d="M104.38 94.48c-4.01 2.18-11.5 5.49-22.24 7.18-1.58.25-2.64 1.72-2.35 3.25l2.32 12.18c.13.69.53 1.31 1.11 1.74 2.3 1.67 8.55 5.62 14.33 4.08 6.07-1.61 11.33-10.43 12.88-13.27.3-.55.41-1.19.29-1.81l-2.14-11.39c-.35-1.88-2.5-2.88-4.21-1.95l.01-.01Z" fill="#2E4F80"/>
+  <path d="M108.92 162.65a1.114 1.114 0 0 1-.76-1.93c4.22-3.97 6.75-9.24 8.99-14.3 2.44-5.52 3.08-11.38 1.8-16.5-.75-3.01-2.21-5.82-4.22-8.12-.41-.47-.36-1.17.1-1.58.47-.41 1.17-.36 1.58.1 2.24 2.56 3.87 5.69 4.71 9.05 1.4 5.6.71 11.97-1.92 17.94-2.32 5.26-4.97 10.76-9.5 15.02-.22.2-.49.3-.77.3l-.01.02Z" fill="#17181C"/>
+  <path d="M107.79 161.94v4.21l24.86.21s.82-7.19-5.96-8.42c-6.42-1.17-7.13 5.95-17.12 2.71-.88-.29-1.78.37-1.78 1.3v-.01Z" fill="#2E4F80"/>
+  <path d="M131.1 171.03a.974.974 0 0 0-1.05-.05l-1.58.89c-.27.15-.6.17-.89.04l-2.73-1.24a1.01 1.01 0 0 0-.85.01l-2.46 1.22c-.27.13-.58.14-.85.01l-1.86-.86a1 1 0 0 0-.76-.03l-2.58.96c-.22.08-.45.08-.67 0l-3.4-1.19a.996.996 0 0 0-.72.03l-1.55.68a.986.986 0 0 1-1.38-.9v-4.45h24.86v4.07c0 .8-.9 1.26-1.55.81h.02Z" fill="#fff"/>
+  <path d="M41.73 162.11a1.114 1.114 0 0 1-.93-1.74c7.33-10.87 13.5-22.56 18.34-34.75.23-.58.88-.86 1.45-.63.57.23.86.88.63 1.45a184.66 184.66 0 0 1-18.56 35.17c-.22.32-.57.49-.93.49v.01Z" fill="#17181C"/>
+  <path d="M43.08 161.12v4.21l-24.86.21s-.82-7.19 5.96-8.42c6.42-1.17 7.13 5.95 17.12 2.71.88-.29 1.78.37 1.78 1.3v-.01Z" fill="#2E4F80"/>
+  <path d="M19.77 170.21c.31-.22.72-.24 1.05-.05l1.58.89c.27.15.6.17.89.04l2.73-1.24c.27-.12.58-.12.85.01l2.46 1.22c.27.13.58.14.85.01l1.86-.86a1 1 0 0 1 .76-.03l2.58.96c.22.08.45.08.67 0l3.4-1.19c.23-.08.49-.07.72.03l1.55.68a.986.986 0 0 0 1.38-.9v-4.45H18.24v4.07c0 .8.9 1.26 1.55.81h-.02Z" fill="#fff"/>
+  <path d="M26.24 138.27h-.11a1.12 1.12 0 0 1-1.01-1.22c.17-1.82-1.4-3.53-3.05-4.28-1.73-.79-3.68-.93-5.76-1.08l-.71-.05c-2.51-.19-5.12-.57-7.21-2.06-2.16-1.53-3.61-4.21-3.88-7.18-.22-2.38.26-5 1.42-7.8 2.7-6.48 8.2-11.99 15.1-15.1 6.3-2.84 13.64-3.75 21.21-2.64a1.118 1.118 0 0 1-.33 2.21c-7.15-1.06-14.05-.2-19.96 2.46-6.39 2.88-11.47 7.95-13.96 13.92-1.02 2.46-1.44 4.72-1.26 6.73.22 2.33 1.32 4.41 2.95 5.56 1.73 1.22 4.05 1.49 6.09 1.65l.7.05c2.18.16 4.43.32 6.52 1.27 2.3 1.04 4.64 3.53 4.35 6.53-.06.58-.54 1.01-1.11 1.01l.01.02Z" fill="#17181C"/>
+  <path d="M21.79 141.22c-.31 0-.63-.13-.85-.39-.4-.47-.35-1.17.11-1.58 1.13-.98 1.67-2.61 1.35-4.07-.32-1.46-1.49-2.72-2.92-3.13-.59-.17-.93-.8-.76-1.39.17-.59.8-.93 1.39-.76 2.23.65 3.98 2.54 4.48 4.81.49 2.27-.32 4.71-2.07 6.23-.21.18-.47.27-.73.27v.01Z" fill="#17181C"/>
+  <path d="M18.16 139.79a1.113 1.113 0 0 1-.71-1.98c.94-.76 1.66-1.77 2.1-2.9.22-.57.31-1.04.27-1.44-.05-.48-.3-.94-.67-1.24-.37-.3-.88-.44-1.36-.38-.61.08-1.17-.35-1.25-.97-.08-.61.35-1.17.97-1.25a4.06 4.06 0 0 1 3.04.85c.85.68 1.4 1.69 1.51 2.77.07.75-.06 1.56-.41 2.46a9.19 9.19 0 0 1-2.77 3.83c-.21.17-.46.25-.71.25h-.01Z" fill="#17181C"/>
+  <path d="M39.48 99.31c-2.04 0-4.14-.6-6.16-1.3-3.44-1.2-7.36-2.73-10.35-5.65-3.25-3.19-4.9-7.58-6.2-11.45l-.39-1.18c-1.15-3.5-2.34-7.11-4.49-10.02-1.94-2.64-5.64-5.47-9.69-4.82-.61.1-1.18-.31-1.28-.92-.1-.61.31-1.18.92-1.28 4.15-.68 8.81 1.56 11.85 5.7 2.35 3.2 3.6 6.99 4.81 10.65l.39 1.17c1.21 3.62 2.74 7.72 5.64 10.56 2.66 2.61 6.31 4.02 9.52 5.14 2.51.87 5.38 1.73 7.8.75.57-.23 1.22.04 1.46.62s-.04 1.23-.62 1.46c-1.05.42-2.13.6-3.23.6l.02-.03Z" fill="#17181C"/>
+  <path d="M15.77 75.77c-.38 0-.75-.2-.96-.55-2.2-3.7-6.04-6.38-10.27-7.16a1.12 1.12 0 0 1-.9-1.3c.11-.61.7-1.01 1.3-.9 4.85.9 9.26 3.98 11.78 8.22.32.53.14 1.22-.39 1.53-.18.11-.38.16-.57.16h.01Z" fill="#17181C"/>
+  <path d="M15.62 75.92c-.31 0-.62-.13-.84-.38-2.05-2.31-5.11-3.7-8.19-3.73-.62 0-1.11-.51-1.11-1.13 0-.62.49-1.12 1.13-1.11 3.71.04 7.38 1.71 9.84 4.49.41.46.37 1.17-.09 1.58-.21.19-.48.28-.74.28Z" fill="#17181C"/>
+  <path d="M113.15 64.28a1.12 1.12 0 0 1-.76-1.94c7.33-6.81 11.57-16.85 11.33-26.86-.24-10.01-4.95-19.83-12.59-26.29-.47-.4-.53-1.11-.13-1.58s1.11-.53 1.58-.13c8.13 6.86 13.13 17.31 13.39 27.95.25 10.64-4.25 21.31-12.04 28.55-.22.2-.49.3-.76.3h-.02Z" fill="#17181C"/>
+  <path d="M116.45 14.26c-.17 0-.35-.04-.51-.12a22.48 22.48 0 0 0-9.67-2.48c-.62-.02-1.11-.53-1.09-1.15.02-.62.49-1.11 1.15-1.09 3.69.09 7.37 1.03 10.65 2.73a1.122 1.122 0 0 1-.52 2.12l-.01-.01Z" fill="#17181C"/>
+  <path d="M117.3 16.14c-.18 0-.37-.04-.54-.14-3.09-1.7-7.03-1.89-10.27-.5a1.12 1.12 0 0 1-.88-2.06c3.86-1.66 8.55-1.43 12.23.59a1.12 1.12 0 0 1-.54 2.1v.01Z" fill="#17181C"/>
+  <path d="M151.09 112.86c-.45 0-.87-.27-1.04-.72-.22-.58.06-1.22.64-1.45 2.28-.88 4.11-3.08 4.9-5.9.65-2.32.67-4.99.06-8.41-1.35-7.51-4.95-14.73-10.14-20.33-5.19-5.6-12.11-9.74-19.5-11.66-4.69-1.22-8.74-1.26-12.05-.13-.59.2-1.22-.11-1.42-.7-.2-.58.11-1.22.7-1.42 3.73-1.28 8.22-1.25 13.33.08 7.8 2.03 15.11 6.39 20.58 12.3 5.48 5.91 9.28 13.53 10.7 21.46.68 3.77.64 6.76-.11 9.42-.98 3.49-3.32 6.25-6.25 7.38-.13.05-.27.08-.4.08Z" fill="#17181C"/>
+  <path d="M151.63 109.06c-.51 0-1.03-.05-1.55-.17a5.61 5.61 0 0 1-3.34-2.37 5.632 5.632 0 0 1-.8-4.02c.11-.61.69-1.01 1.3-.9.61.11 1.01.69.9 1.3-.15.82.02 1.7.48 2.4.45.7 1.18 1.22 1.99 1.42.86.21 1.83.08 2.76-.06.78-.12 1.63-.31 1.94-.79.34-.52 1.03-.66 1.55-.32s.66 1.03.32 1.55c-.9 1.37-2.63 1.64-3.46 1.77-.65.1-1.36.2-2.09.2v-.01Z" fill="#17181C"/>
+  <path d="M153.27 108.39c-1.06 0-2.03-.3-2.78-.87-.87-.66-1.47-1.72-1.66-2.9-.14-.93-.04-1.96.3-3.04.19-.59.82-.91 1.4-.73.59.19.92.82.73 1.4-.24.75-.31 1.43-.22 2.02.1.62.39 1.15.8 1.46.43.32 1.07.47 1.78.4.71-.07 1.41-.32 2.26-.68a1.12 1.12 0 0 1 .88 2.06c-.89.38-1.86.74-2.91.85-.19.02-.39.03-.57.03h-.01Z" fill="#17181C"/>
+  <path d="M92.27 27.7c-1.49 6.58-5.6 12.1-10.51 15.93-4.97 3.82-10.74 5.95-16.97 5.6-6.22-.36-11.96-3.13-16.77-7.43-4.75-4.31-8.55-10.16-9.47-16.79-.93-6.61 1.47-12.8 6.65-17.25C50.32 3.31 58.21.61 66.84 1.03c8.63.39 16.09 3.82 20.63 8.75 4.6 4.94 6.29 11.37 4.8 17.93v-.01Z" fill="#567097"/>
+  <path d="M103.68 60.76c0 16.79-16.56 30.41-36.98 30.41-20.42 0-36.98-13.61-36.98-30.41S46.28 32.2 66.7 32.2c20.42 0 36.98 11.76 36.98 28.56Z" fill="#53586D"/>
+  <path d="M82.01 43.75c-5.04-2.22-10.48-.93-12.15 2.87-.55 1.25-.62 2.62-.29 3.97-.32-.07-.65-.13-.98-.18-4.37-.6-8.42 1.4-10.2 4.71-.38-.59-.85-1.12-1.42-1.56-2.22-1.72-5.35-1.72-8.25-.3-.13-1.51-.74-2.82-1.85-3.68-2.65-2.06-7.11-.74-9.97 2.94-2.86 3.68-3.04 8.33-.39 10.39 1.35 1.05 3.17 1.22 5.01.65-.24 2.69.6 5.16 2.52 6.65 3.48 2.7 9.19 1.17 12.77-3.43.85-1.1 1.5-2.27 1.96-3.45 1.51 2.37 4.18 4.14 7.41 4.59 5.45.75 10.41-2.56 11.08-7.39.12-.86.09-1.72-.06-2.54 4.66 1.52 9.37.15 10.91-3.34 1.67-3.8-1.05-8.68-6.09-10.9h-.01Z" fill="#fff"/>
+  <path d="M68.116 64.389c1.072-1.391.344-3.749-1.625-5.265-1.969-1.516-4.434-1.618-5.505-.226-1.072 1.391-.344 3.748 1.625 5.265 1.969 1.516 4.434 1.618 5.505.226Z" fill="#191A1E"/>
+  <path d="M56.212 64.642c1.245-2.151 1.022-4.608-.498-5.488-1.52-.88-3.762.151-5.007 2.302-1.245 2.151-1.022 4.608.499 5.488 1.52.88 3.761-.151 5.006-2.302Z" fill="#191A1E"/>
+  <path d="M81.528 56.403c.906-1.34.1-3.468-1.8-4.75-1.899-1.283-4.173-1.236-5.079.105-.905 1.342-.1 3.468 1.8 4.751 1.9 1.283 4.173 1.236 5.079-.106Z" fill="#191A1E"/>
+  <path d="M44.068 59.517c1.192-2.028 1.132-4.276-.134-5.02-1.267-.745-3.26.296-4.453 2.324-1.192 2.029-1.132 4.276.135 5.02 1.266.745 3.26-.295 4.452-2.324Z" fill="#191A1E"/>
+  <path d="M59.52 49.21c-.28 0-.56-.1-.77-.31a1.11 1.11 0 0 1-.03-1.58c3.68-3.84 7.89-2.14 9.6-.71.47.4.53 1.1.14 1.58-.4.47-1.1.53-1.57.14-.35-.28-3.46-2.68-6.55.54-.22.23-.51.34-.81.34h-.01Z" fill="#17181C"/>
+  <path d="M57.57 51.83c-.31 0-.62-.13-.84-.38-2.06-2.34-5.82-1.09-5.86-1.07-.58.2-1.22-.11-1.42-.69-.2-.58.1-1.22.69-1.42.21-.08 5.21-1.77 8.28 1.71a1.122 1.122 0 0 1-.84 1.86l-.01-.01Z" fill="#17181C"/>
+  <path d="M85.96 71.36c.24 2.63.31 6.83-1.04 10.53-.27.73-1.32.69-1.51-.06l-1.7-9.56 2.25-2.39 2 1.49v-.01Z" fill="#fff"/>
+  <path d="M90.41 74c-1.38 0-2.77-.31-4.07-.94-4.51-2.16-6.51-7.39-4.47-11.66.5-1.05 1.21-1.97 2.11-2.72.47-.4 1.18-.34 1.58.13.4.47.34 1.18-.13 1.58-.65.55-1.17 1.22-1.53 1.98-1.51 3.16.02 7.05 3.41 8.67 1.71.82 3.67.93 5.39.33.58-.21 1.22.1 1.43.68.21.58-.1 1.22-.68 1.43-.98.35-2 .52-3.03.52h-.01Z" fill="#17181C"/>
+  <path d="M62.31 80.18c-8.11 0-13.74-2.18-17.17-4.15-.54-.31-.72-.99-.41-1.53s.99-.72 1.53-.41c3.61 2.07 9.88 4.4 19.24 3.74 10.18-.72 13.98-4.75 16.76-7.69.33-.35.64-.68.95-.99a1.11 1.11 0 0 1 1.58 0c.44.43.44 1.14 0 1.58-.3.3-.6.62-.91.95-3.03 3.21-7.18 7.6-18.23 8.38-1.16.08-2.27.12-3.34.12Z" fill="#17181C"/>
+  <path d="m76.43 134.81 3.96 1.16 31.22-105.7c.32-1.1-.3-2.25-1.4-2.57-1.09-.32-2.24.31-2.56 1.4L76.43 134.81Z" fill="#563F3D"/>
+  <path d="M84.58 160.8 58.9 153l3-9.81c2.16-7.09 9.65-11.09 16.74-8.94 7.09 2.16 11.09 9.65 8.94 16.74l-3 9.81Z" fill="#563F3D"/>
+  <path d="m84.54 160.74-1.29 21.71c-.05.84-.95 1.35-1.7.97l-1.29-.66c-.27-.14-.58-.16-.87-.08l-4.08 1.24c-1.01.31-2.08.32-3.09.03l-2.51-.71a7.372 7.372 0 0 0-4.06.03l-2.87.85c-1.03.31-2.14.3-3.17 0l-2.29-.69c-1.33-.4-2.75-.44-4.1-.1l-5.23 1.31c-.52.13-1.07.12-1.59-.02l-2.49-.71c-.19-.05-.39-.06-.58-.01l-1.93.45c-1.02.24-1.81-.88-1.25-1.76l18.75-29.57 25.63 7.72h.01Z" fill="#C6B773"/>
+  <path d="m73.09 31.99-46.05-2.55c-1.83-.1-3.03 1.4-2.22 2.78 2.51 4.25 9.22 11.64 25.6 12.25 23.14.87 22.66-12.48 22.66-12.48h.01Z" fill="#567097"/>
+  <path d="M89.94 30.81c-.42-.45-1.14-.48-1.6-.07-2.01 1.77-4.75 2.74-7.5 2.74a8.285 8.285 0 0 0 3.18-4.97c.12-.59-.28-1.17-.9-1.28-.61-.12-1.21.27-1.33.87a6.058 6.058 0 0 1-1.9 3.3c-.86.77-1.95 1.28-3.1 1.49-1.08-.21-2.84-.53-5.04-.92-1.1-2.91-.7-6.38 1.08-8.95.35-.5.21-1.18-.31-1.52-.52-.33-1.22-.2-1.57.3a11.896 11.896 0 0 0-1.72 9.73c-2.52-.43-5.4-.89-8.4-1.32 0-3.71 1.75-7.42 4.61-9.78.48-.39.53-1.08.13-1.54-.41-.46-1.12-.51-1.6-.12a14.95 14.95 0 0 0-5.41 11.12c-2.71-.37-5.44-.69-8.04-.93-.01-.01-.02-.03-.03-.04-.76-.9-1.34-1.89-1.72-2.95-.86-2.38-.73-5.07.37-7.36.26-.55.01-1.2-.55-1.45-.57-.25-1.24-.01-1.5.53-1.34 2.8-1.51 6.08-.45 9 .26.71.59 1.39.98 2.04-2.65-.18-5.06-.23-6.97-.1-.62.04-1.09.57-1.05 1.17.05.6.6 1.06 1.21 1.01 8.79-.61 29.08 3.02 34.98 4.12.19.14.42.23.67.23h.13c.07 0 .14-.02.2-.03.4.08.62.12.64.12 1.1.29 2.24.43 3.38.43 3.3 0 6.62-1.18 9.06-3.32.46-.41.5-1.1.07-1.54v-.01Z" fill="#2E4F80"/>
+  <path d="M109.5 100.53c-3.23 0-6.67-.53-10.26-1.59a48.034 48.034 0 0 1-15.82-8.08c-.49-.38-.6-1.1-.23-1.61s1.07-.62 1.57-.23c4.55 3.51 9.63 6.1 15.09 7.71 5.02 1.48 9.67 1.87 13.83 1.16 4.84-.83 9.02-3.17 11.76-6.59 4.55-5.69 4.67-14.88.28-20.91-2.82-3.87-7.49-6.49-12.5-7.01-.61-.06-1.06-.63-1-1.26.06-.63.61-1.1 1.23-1.03 5.71.6 10.84 3.48 14.07 7.92 5.07 6.96 4.92 17.18-.34 23.76-3.08 3.86-7.74 6.49-13.12 7.4-1.46.25-2.98.37-4.55.37l-.01-.01Z" fill="#17181C"/>
+  <path d="M90.67 95.42c-.32 0-.63-.14-.85-.41-.99-1.21-2.12-2.58-2.84-4.2-.85-1.92-.97-3.96-.32-5.6 1.09-2.73 4.34-4.23 7.25-3.36 2.56.77 4.6 3.18 5.18 6.13.12.62-.27 1.23-.87 1.36-.61.13-1.2-.28-1.32-.9-.41-2.09-1.86-3.85-3.61-4.37-1.78-.54-3.91.41-4.56 2.02-.42 1.05-.31 2.42.28 3.76.59 1.33 1.57 2.52 2.51 3.67.4.49.34 1.21-.13 1.63-.21.18-.47.27-.72.27Z" fill="#17181C"/>
+  <path d="M90.32 95.29c-.19 0-.38-.05-.56-.16-1.71-1.02-2.61-3.28-2.08-5.25.59-2.19 2.9-3.7 5.04-3.28 2.22.43 3.82 2.79 3.43 5.06-.11.63-.69 1.04-1.3.93-.61-.11-1.01-.71-.9-1.34.18-1.01-.63-2.19-1.63-2.38-1.02-.2-2.2.58-2.48 1.63-.26.97.2 2.13 1.05 2.64.53.32.72 1.03.41 1.58-.21.37-.58.57-.97.57h-.01Z" fill="#17181C"/>
+  <path d="M57.76 122.59c-3.12 0-6.38-.31-9.49-1.34-5.28-1.75-9.4-5.54-11.03-10.13-1.91-5.4.12-11.85 4.52-14.38.53-.31 1.22-.12 1.53.41.31.54.12 1.22-.41 1.53-3.51 2.02-5.1 7.26-3.53 11.69 1.39 3.94 4.99 7.21 9.62 8.75 4.44 1.47 9.17 1.36 13.63 1.02 11.92-.92 19.84-4.04 24.92-9.82.41-.46 1.11-.51 1.58-.1.46.41.51 1.11.1 1.58-7.21 8.21-18.54 9.97-26.43 10.58-1.59.12-3.28.22-5.02.22l.01-.01Z" fill="#17181C"/>
+  <path d="M88.23 112.28c-.28 0-.55-.1-.77-.31-.45-.43-.47-1.13-.04-1.58.51-.54 1.05-1.1 1.34-1.72.25-.54.29-1.12.1-1.48-.21-.4-.72-.61-1-.71-.51-.17-2.37-.04-3.48.98-.84.77-1.08 1.88-.72 3.39.14.6-.23 1.2-.83 1.35-.61.14-1.2-.23-1.35-.83-.68-2.91.38-4.63 1.39-5.55 1.74-1.6 4.43-1.87 5.69-1.45 1.05.35 1.84.97 2.28 1.78.53 1 .51 2.3-.06 3.49-.45.94-1.13 1.66-1.74 2.3-.22.23-.52.35-.81.35v-.01Z" fill="#17181C"/>
+  <path d="M88.01 112.5a1.121 1.121 0 0 1-.83-1.87c.41-.45 1.5-1.66 1.91-2.58l.06-.12c.69-1.14.6-2.35-.24-3.17-1.02-1-3.34-1.46-6.54.54-.52.33-1.21.17-1.54-.36-.33-.52-.17-1.21.36-1.54 4.31-2.69 7.7-1.81 9.3-.24 1.55 1.52 1.79 3.87.62 5.87-.51 1.09-1.48 2.23-2.27 3.1-.22.24-.52.37-.83.37Z" fill="#17181C"/>
+</svg>
+<article class="content-block content-block--twelve astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">No Spooky Cookies</h2>
+  <p id="No-Spooky-Cookies" class="astro-SCMHTS4H">There&#39;s nothing spooky about cookies when you learn about how the recipe is getting improved with CHIPS and First-Party Sets.</p>
+  <a href="https://developer.chrome.com/blog/no-spooky-cookies" target="_blank" rel="noopener" aria-describedby="No-Spooky-Cookies" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--thirteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">PWA Summit</h2>
+  <p id="PWA-Summit" class="astro-SCMHTS4H">Clean up your web apps with these just-landed videos from PWA summit.</p>
+  <a href="https://www.youtube.com/watch?v=tEOzwbvmTpA&#38;list=PLdwe-qCygjtFuWAeFoPI6-_9FKt2BRLh3" target="_blank" rel="noopener" aria-describedby="PWA-Summit" class="astro-SCMHTS4H">Read more</a>
+</article>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 5">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature chair-owl" viewBox="0 0 159 210" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>An owl in pajamas, nightcap, and slippers sits in a yellow armchair with its feet propped up. It is reading a book.</title>
+  <path d="m49.43 186.31 50.02 1.34-.09-61.34H49.02l.41 60Z" fill="#751E1E"/>
+  <path d="M107.32 209.55c-2.97 0-5.39-2.41-5.39-5.39v-26.93h10.77v26.93c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"/>
+  <path d="M153.48 209.56c-2.97 0-5.39-2.41-5.39-5.39v-24.62h10.77v24.62c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"/>
+  <path d="m96.36 186.31 50.02 1.34-.09-61.34H95.95l.41 60Z" fill="#8D6C38"/>
+  <path d="M158.43 187.85v-12.69H51.94v12.69h106.49Z" fill="#B78A4E"/>
+  <path d="M158.86 187.47h-12.69v-57.55c0-1.99 1.62-3.61 3.61-3.61h5.48c1.99 0 3.61 1.62 3.61 3.61v57.55h-.01Z" fill="#B78A4E"/>
+  <path d="M57.73 209.56c-2.97 0-5.39-2.41-5.39-5.39v-24.62h10.77v24.62c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"/>
+  <path d="M6.54 209.55c-2.97 0-5.39-2.41-5.39-5.39v-26.93h10.77v26.93c0 2.97-2.41 5.39-5.39 5.39h.01Z" fill="#000"/>
+  <path d="M114.63 126.7H.77V33.86C.77 15.68 15.53.92 33.71.92h47.97c18.18 0 32.94 14.76 32.94 32.94v92.84h.01Z" fill="#8D6C38"/>
+  <path d="M125.01 126.7H11.15V33.86C11.15 15.68 25.91.92 44.09.92h47.97C110.24.92 125 15.68 125 33.86v92.84h.01Z" fill="#B78A4E"/>
+  <path d="m29.59 152.47 104.69-3.87v-30.76c0-9.98-7.95-18.06-17.75-18.06l-69.19 3.87c-9.8 0-17.75 8.09-17.75 18.06v30.76Z" fill="#47818F"/>
+  <path d="m65.18 106.74 44.31-1.77-15.98 19.72-28.33-17.95Z" fill="#7F5C3E"/>
+  <path d="m64.79 105.42 28.62 18.95-21.01-.72c-1.78-.06-2.6-2.52-1.29-3.88l1.52-1.58-11.67-4.14c-1.45-.51-1.87-2.59-.77-3.76l4.6-4.88v.01Z" fill="#569FB6"/>
+  <path d="m110.02 102.08-16.66 22.49 15.38-3.83c1.24-.36 1.37-2.78.21-3.82l-1.35-1.2 7.44-5.85c.92-.72.85-2.72-.14-3.62l-4.88-4.18v.01Z" fill="#569FB6"/>
+  <path d="M94.9 181.962c1.949-4.597-5.032-11.953-15.593-16.431-10.56-4.479-20.701-4.383-22.65.213-1.95 4.597 5.031 11.953 15.592 16.432 10.56 4.478 20.702 4.382 22.65-.214Z" fill="#7F5C3E"/>
+  <path d="M133.737 179.315c1.843-4.64-5.304-11.835-15.964-16.071-10.66-4.235-20.797-3.908-22.64.732-1.844 4.64 5.303 11.835 15.964 16.071 10.66 4.235 20.796 3.908 22.64-.732Z" fill="#7F5C3E"/>
+  <path d="m135.75 115.68.09 7.82-42.39 17.45.12-8.91c.06-4.13 2.53-6.25 6.44-7.94 2.62-1.14 10.02-3.41 16.56-4.14 6.54-.73 13.52-1.43 16.19-5.26 0 0 .01-.02.02-.03.91-1.25 2.94-.53 2.96 1.02l.01-.01Z" fill="#fff"/>
+  <path d="m49.01 121.96.39 6.07 47.49 8.88-.67-7.5c-1.4-3.96-5.16-6.25-9.62-6.35-2.99-.06-6.54 1.56-11.99 2.37-5.45.8-18.64-1.76-22.56-4.41-1.01-.68-2.5-.22-3.04.94Z" fill="#fff"/>
+  <path d="m93.06 175.15 7.03-.08c1.46-.02 2.64-1.33 2.64-2.93l.04-39.17c0-1.6-1.18-2.89-2.63-2.87l-7.03.08c-1.46.02-2.64 1.33-2.64 2.93l-.04 39.17c0 1.6 1.18 2.89 2.63 2.87Z" fill="#75A69A"/>
+  <path d="m49.5 125.18 41.72 6.6-.04 40.92-42.69-4.78c-1.28-.14-2.25-1.23-2.23-2.5l.4-37.87c.02-1.49 1.36-2.61 2.85-2.38l-.01.01Z" fill="#75A69A"/>
+  <path d="m99.8 133.92 35.49-16.34c1.66-.97 3.76.24 3.76 2.16l-.04 39.02c0 .97-.58 1.85-1.48 2.23l-38.18 11.83.45-38.89v-.01Z" fill="#75A69A"/>
+  <path d="M148.1 128.97c.15 3.83.5 10.34.8 15.66.28 5.01-4.19 9.23-9.3 8.69-18.39-1.93-26.65-13.95-26.65-13.95l26.85-15.11c3.79-1.83 8.14.64 8.3 4.7v.01Z" fill="#7F5C3E"/>
+  <path d="M85.17 144.36s-5.16 16.85-30.78 20.55l-25.57-9.25s-11.24-8.59-2.46-21.74l58.81 10.44Z" fill="#7F5C3E"/>
+  <path d="M97.11 183.24c.64.16 1.36-.2 1.36-.56.71-8.21 2.85-15.34 6.42-22.48.36-.71-1.07-1.07-1.78-1.07-4.99 2.14-7.85 7.14-9.63 12.13-1.07 3.92-2.85 10.7 2.59 12.09.35.01.7-.03 1.05-.12l-.01.01Z" fill="#CFBBA6"/>
+  <path d="M93.47 185.18c3.943 0 7.14-2.315 7.14-5.17s-3.197-5.17-7.14-5.17c-3.943 0-7.14 2.315-7.14 5.17s3.197 5.17 7.14 5.17Z" fill="#CFBBA6"/>
+  <path d="M92.56 184.88c2.47 2.12 8.25 1.76 11.43-2.59 3.17-4.29 2.69-9.35.66-9.9-2.06-.62-5.75 2.4-9.41 5.17-3.6 2.8-5.21 5.19-2.68 7.32Z" fill="#CFBBA6"/>
+  <path d="M108.23 151.4c-.05 0-5.97-.95-5.97-.95-6.54-.8-12.5 3.86-13.3 10.4l-1.45 11.83c-.25 2.01 1.19 3.84 3.2 4.09l3.11.38.54 11.47c-.33 2.74 2.01 5.05 5.24 5.16l5.32.35c3.23.12 6.12-2.01 6.45-4.74l3.32-27.46c.58-4.75-.41-9.21-6.47-10.53h.01Z" fill="#47818F"/>
+  <path d="M130.53 179.84c.59-.27 1.66-.98 1.31-1.34-2.5-8.21-1.43-15.7.71-23.9.36-.71-.71-1.07-1.43-1.07-3.57.71-4.99 3.92-5.71 6.78-2.14 6.06-4.28 17.84 4.09 19.89.35-.06.7-.18 1.02-.35l.01-.01Z" fill="#CFBBA6"/>
+  <path d="M132.62 180.12c.64.16 1.36-.2 1.36-.56.71-8.21 2.85-15.34 6.42-22.48.36-.71-1.07-1.07-1.78-1.07-4.99 2.14-7.85 7.14-9.63 12.13-1.07 3.92-2.85 10.7 2.59 12.09.35.01.7-.03 1.05-.12l-.01.01Z" fill="#CFBBA6"/>
+  <path d="M128.98 182.06c3.943 0 7.14-2.315 7.14-5.17s-3.197-5.17-7.14-5.17c-3.943 0-7.14 2.315-7.14 5.17s3.197 5.17 7.14 5.17Z" fill="#CFBBA6"/>
+  <path d="M126.29 182.11c2.47 2.12 8.25 1.76 11.43-2.59 3.17-4.29 2.69-9.35.66-9.9-2.06-.62-5.75 2.4-9.41 5.17-3.6 2.8-5.21 5.19-2.68 7.32Z" fill="#CFBBA6"/>
+  <path d="M141.88 149.15c-.05 0-5.97-.95-5.97-.95-6.54-.8-12.5 3.86-13.3 10.4l-1.45 11.83c-.25 2.01 1.19 3.84 3.2 4.09l3.11.38.54 11.47c-.33 2.74 2.01 5.05 5.24 5.16l5.32.35c3.23.12 6.12-2.01 6.45-4.74l3.32-27.46c.58-4.75-.41-9.21-6.47-10.53h.01Z" fill="#47818F"/>
+  <path d="M109.63 33.61s0-30.39-41.93-30.39-48.85 49.62-48.85 49.62l8.85 3.46c14.23-18.85 35-19.23 35-19.23l46.93-3.46Z" fill="#569FB6"/>
+  <path d="m57.82 19.65-.38 22.38 50.7.87.33-22.03c.04-2.6 3.3-3.75 4.96-1.75 6.68 8.05 18.01 28.61 18.89 58.05 0 0 4.12 35.08-33.22 34.44l-26.37 1.86s-38.66 7.8-39.03-39.52c-1.35-42.28 13.02-53.81 20.22-56.92 1.86-.81 3.93.6 3.9 2.63v-.01Z" fill="#7F5C3E"/>
+  <path d="M71.04 55.16c5.87 0 11.34 1.75 15.91 4.76a29.53 29.53 0 0 1 17.75-5.91c16.45 0 29.78 13.43 29.78 30s-13.33 30-29.78 30H71.04c-16.13 0-29.2-13.17-29.2-29.43 0-16.25 13.08-29.43 29.2-29.43v.01Z" fill="#CFBBA6"/>
+  <path d="M60.04 70.27c9.76-7.31 22.37-6.95 28.55.69.56-1.03 1.24-2 2.06-2.9 6.56-7.21 19.03-6.76 27.84.99 8.82 7.75 10.64 19.88 4.08 27.08-6.56 7.21-19.03 6.76-27.84-.99-1.88-1.65-3.43-3.5-4.66-5.45-1.71 3.76-4.51 7.3-8.26 10.11-9.99 7.48-22.96 6.93-28.97-1.22-6.01-8.15-2.79-20.83 7.2-28.31Z" fill="#fff"/>
+  <path d="M112.88 60.44s-9.57-5.24-20.19 1.82" stroke="#000" stroke-width="2.26" stroke-miterlimit="10" stroke-linecap="round"/>
+  <path d="M78.86 61.21s-10.12-3.17-18.02 4.5" stroke="#000" stroke-width="2.26" stroke-miterlimit="10" stroke-linecap="round"/>
+  <path d="M84.19 93.689c2.317-4.565 1.556-9.606-1.699-11.258-3.255-1.652-7.773.71-10.09 5.275s-1.556 9.605 1.7 11.257c3.254 1.653 7.772-.709 10.089-5.274Z" fill="#000"/>
+  <path d="M110.714 97.286c3.204-1.85 3.834-6.758 1.407-10.962s-6.993-6.113-10.197-4.263c-3.205 1.85-3.835 6.758-1.408 10.963 2.427 4.204 6.993 6.112 10.198 4.262Z" fill="#000"/>
+  <g clip-path="url(#owlEyes)">
+    <path d="M55.39 54h73.85v9.33c0 8.86-7.19 16.05-16.05 16.05H64.47c-5.01 0-9.08-4.07-9.08-9.08V53.99 54Z" fill="#7F5C3E"/>
+  </g>
+  <path d="M56.2 49.38h56.46a4.66 4.66 0 0 0 4.66-4.66v-7.99a4.66 4.66 0 0 0-4.66-4.66H56.2a4.66 4.66 0 0 0-4.66 4.66v7.99a4.66 4.66 0 0 0 4.66 4.66Z" fill="#fff"/>
+  <path d="M20.58 70.92c6.478 0 11.73-5.252 11.73-11.73 0-6.478-5.252-11.73-11.73-11.73-6.478 0-11.73 5.252-11.73 11.73 0 6.478 5.252 11.73 11.73 11.73Z" fill="#fff"/>
+  <path d="M91.92 83.99c14.25 3.49 23.46 21.65 9.39 38.82-.81.99-2.51.81-3.04-.34-3.68-7.94-21.64-10.77-21.26-19.04.03-.65.52-1.22 1.2-1.43 2.88-.9 10.43-5.51 11.51-16.57.1-1 1.15-1.7 2.21-1.44h-.01Z" fill="#B77E4B"/>
+  <path d="M64.63 187.47H51.94v-61.16h8.62c2.25 0 4.08 1.83 4.08 4.08v57.08h-.01Z" fill="#B78A4E"/>
+  <path d="m1.33 186.32 50.8 1.33-.08-61.34H.92l.41 60.01Z" fill="#8D6C38"/>
+  <defs>
+    <clipPath id="owlEyes">
+      <path d="M60.04 70.27c9.76-7.31 22.37-6.95 28.55.69.56-1.03 1.24-2 2.06-2.9 6.56-7.21 19.03-6.76 27.84.99 8.82 7.75 10.64 19.88 4.08 27.08-6.56 7.21-19.03 6.76-27.84-.99-1.88-1.65-3.43-3.5-4.66-5.45-1.71 3.76-4.51 7.3-8.26 10.11-9.99 7.48-22.96 6.93-28.97-1.22-6.01-8.15-2.79-20.83 7.2-28.31Z"/>
+    </clipPath>
+  </defs>
+</svg>
+<svg class="page__feature chandelier" viewBox="0 0 186 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A purple candle chandelier with two candles on each of its four arms. It has a pair of eyes at the bottom of its body. </title>
+  <path d="M109.99 203.79c-.19 0-.39-.05-.57-.15-15.98-9.29-16.58-28.5-16.6-29.85L82.62 61.03v-.12l7.8-59.44c.07-.62.63-1.08 1.26-1 .62.07 1.07.64 1 1.26l-7.77 59.33L95.1 173.72c0 .19.38 19.18 15.47 27.95.54.32.73 1.01.41 1.56-.21.36-.59.57-.99.57v-.01Z" fill="#000"/>
+  <path d="M98.704 192.38c3.224-1.032 5.16-3.988 4.323-6.602-.837-2.614-4.129-3.897-7.353-2.865-3.225 1.033-5.16 3.988-4.323 6.603.837 2.614 4.129 3.896 7.353 2.864Z" fill="#603E50"/>
+  <path d="M113.21 197.78c1.8 2.55 1.28 8.22.8 11.44-.19 1.28-1.5 2.2-2.77 1.95-3.19-.63-8.71-2.05-10.51-4.59-2.58-3.66-1.88-8.6 1.56-11.03 3.45-2.43 8.33-1.43 10.92 2.23Z" fill="#603E50"/>
+  <path d="M74.93 115.59c-16.64 0-27.74-10.27-35.64-17.59-1.99-1.84-3.87-3.59-5.56-4.89-1.27-.98-2.84-1.62-4.54-1.84l-6.56-.84c-4.27-.48-7.56.76-9.24 3.49-1.43 2.34-1.37 5.48.17 7.81 1.84 2.79 5.25 3.98 9.62 3.35 1.89-.27 3.64-1.42 4.56-2.99.47-.81.92-2.07.38-3.48-.01-.03-.02-.06-.03-.1-.84-2.6-3.71-3.78-5.99-3.4-1.25.2-3.34 1.03-3.33 4.33 0 1.05-.84 1.9-1.89 1.91-1.04 0-1.89-.84-1.9-1.89-.02-4.28 2.54-7.46 6.52-8.1 3.79-.62 8.64 1.26 10.19 5.93.83 2.19.59 4.57-.67 6.72-1.52 2.58-4.24 4.39-7.3 4.83-5.82.84-10.68-.99-13.33-5.02-2.37-3.6-2.46-8.26-.24-11.89 2.45-4 7.17-5.92 12.93-5.27l6.59.84c2.38.3 4.59 1.21 6.39 2.61 1.81 1.41 3.75 3.2 5.8 5.1 9.91 9.17 23.49 21.73 46.34 14.35.99-.32 2.07.22 2.39 1.22.32 1-.22 2.07-1.22 2.39-5.23 1.69-10.04 2.41-14.45 2.41l.01.01Z" fill="#603E50"/>
+  <path d="m32.21 87.81-7.98-1.06 4.64-28.39 7.99 1.07-4.65 28.38Z" fill="#FFE084"/>
+  <path d="M38.5 60.39c.64-1.74-.66-2.37-2-2.56-1.71-.25-4.38-.62-5.69-.77-1.55-.18-3.05.61-3.63 1.92-.67 1.53-.91 3.95.85 7.5 1.56 1.85-2.21 6.2.8 6.82 1.7.35 2.39-.54 2.66-1.38.12-.39.71-.44.93-.1l.43.67c.57.88 3.99 1.66 5.03-3.18.29-2.22-.51-4.18.62-8.91v-.01Z" fill="#BE8E42"/>
+  <path d="M31.24 41.06c-.02-.35.38-.57.67-.37 3.32 2.42 7.03 6.01 7.17 10.4.07 3.26-3.62 4.71-6.54 3.9-2.6-.87-3.28-3.86-2.7-6.25.62-2.48 1.51-4.87 1.39-7.68h.01Z" fill="#C8733E"/>
+  <path d="M33.41 59.93h-.14c-.62-.08-1.07-.64-.99-1.27l.8-6.59a1.138 1.138 0 1 1 2.26.28l-.8 6.59c-.07.58-.56 1-1.13 1v-.01Z" fill="#161414"/>
+  <path d="M75.13 125.95c-2.92 0-5.81-.64-8.1-1.5-.04-.02-.09-.03-.13-.05-3.39-1.57-5.62-4.19-6.46-7.56-1.48-5.93 1.57-13.53 5.26-18.42 1.23-1.63 1.71-3 1.36-3.85-.43-1.05-2.23-1.93-4.69-2.29l-12.8-1.81a1.897 1.897 0 0 1-1.61-2.15 1.897 1.897 0 0 1 2.15-1.61l12.81 1.81c2.3.34 6.34 1.38 7.66 4.6.91 2.21.29 4.76-1.84 7.59-3.04 4.04-5.79 10.52-4.61 15.21.57 2.26 1.98 3.9 4.32 5 4.03 1.51 9.56 1.94 12.88-.47 2.06-1.5 3.03-3.98 2.86-7.38a1.9 1.9 0 0 1 1.8-1.99c1.05-.06 1.94.76 1.99 1.8.29 5.92-2.24 9.05-4.42 10.63-2.43 1.76-5.44 2.43-8.43 2.43v.01Z" fill="#603E50"/>
+  <path d="m61.46 87.91-7.98-1.06 4.65-28.39 7.98 1.07-4.65 28.38Z" fill="#FFE084"/>
+  <path d="M66.65 65.75c-.28-1.24-.1-3.04.16-4.55.26-1.54-.95-2.96-2.67-3.13l-5.06-.5c-1.78-.17-3.35 1.07-3.4 2.69-.07 2.35-1.86 5.63-2.08 7.33-.22 1.7.64 2.43 2 3 .92.31 1.47-.29 1.76-.69.4-1.25-.27-3.48.44-3.41 4.06-.03.29 5.2 1.66 8.07.09.1.18.2.29.28.76.58 2.02.62 2.77.02.11-.09.2-.18.29-.3.64-1.91.42-3.88.9-5.77 1.86.4 3.02-1.21 2.99-2.63 0-.14-.01-.29-.04-.43l-.01.02Z" fill="#BE8E42"/>
+  <path d="M56.57 42.71c-.13-.33.19-.67.52-.56 3.9 1.26 8.56 3.52 10.06 7.64 1.08 3.08-1.97 5.6-5 5.74-2.74-.01-4.32-2.65-4.51-5.1-.19-2.54-.08-5.1-1.07-7.73v.01Z" fill="#C8733E"/>
+  <path d="M62.08 60.92h-.12c-.63-.07-1.08-.63-1.01-1.25l.71-6.6c.07-.63.63-1.08 1.25-1.01.63.07 1.08.63 1.01 1.25l-.71 6.6c-.06.58-.56 1.02-1.13 1.02v-.01Z" fill="#161414"/>
+  <path d="M102.02 125.84c-1.79 0-3.44-.43-4.84-1.28-2.22-1.36-4.89-4.48-4.94-11.61a1.9 1.9 0 0 1 1.89-1.91h.01c1.04 0 1.89.84 1.9 1.89.03 4.26 1.11 7.16 3.12 8.39 1.88 1.15 4.71.94 7.8-.59 1.81-1.12 2.86-2.46 3.21-4.12.83-3.97-2.37-9.13-4.86-12.67-2.03-2.89-2.61-5.5-1.73-7.75.87-2.22 3.11-3.82 6.3-4.51l10.72-2.25a1.9 1.9 0 0 1 2.25 1.47c.22 1.03-.44 2.03-1.47 2.25l-10.71 2.25c-1.84.4-3.17 1.21-3.55 2.18-.48 1.23.44 2.96 1.3 4.18 2.89 4.12 6.6 10.22 5.46 15.63-.57 2.72-2.26 4.95-5.02 6.63-.04.03-.09.05-.14.08-2.32 1.16-4.62 1.75-6.72 1.75l.02-.01Z" fill="#603E50"/>
+  <path d="m116.92 90.2-6.67 1.33-5.28-28.19 6.67-1.33 5.28 28.19Z" fill="#FFE084"/>
+  <path d="M104.54 70.32c-.1 1.46.84 2.82 2.02 2.92h.03c.8.07 1.38-.83 1.19-1.82l-.6-3.21c-.3-1.6 1.19-1.77 1.44-1.27l.53 1.05c.44.87 1.47.6 1.48-.39l.03-1.94c0-.56.45-.66.66-.15l1.74 9.93c.59 1.41 2.58.81 2.79-1.51.11-1.16-1.8-4.36-2.44-6.97-.64-2.61 0-4.63-.91-5.6-.33-.35-.76-.48-1.16-.39l-5.92 1.34c-1.63.23-1.06 3.06-.88 5.67.06.83.04 1.65 0 2.33v.01Z" fill="#BE8E42"/>
+  <path d="M97.5 51.12c-.28-.21-.2-.66.15-.75 3.98-1.02 9.11-1.59 12.58 1.1 2.56 2.03 1.32 5.79-1.16 7.52-2.33 1.45-5.06.06-6.54-1.9-1.52-2.05-2.79-4.27-5.03-5.97Z" fill="#C8733E"/>
+  <path d="M108.77 64.43c-.53 0-1-.37-1.11-.9l-1.38-6.49c-.13-.62.26-1.22.88-1.35.61-.13 1.22.26 1.35.88l1.38 6.49c.13.62-.26 1.22-.88 1.35-.08.02-.16.02-.24.02Z" fill="#161414"/>
+  <path d="M103.5 114.57c-3.46 0-7.22-.6-11.32-1.98a1.896 1.896 0 0 1-1.19-2.41c.33-.99 1.41-1.53 2.41-1.19 19.29 6.49 30.01-6.39 37.84-15.8 1.64-1.97 3.19-3.83 4.65-5.31 1.51-1.52 3.4-2.53 5.49-2.93l6.73-1.2c4.74-.83 9.07.74 11.88 4.29 2.97 3.75 3.73 9.16 1.88 13.47-1.83 4.28-5.78 6.92-11.12 7.41-3.31.28-5.91-.48-7.74-2.27-2.53-2.47-2.86-6.23-2.69-8.95.3-4.73 4.32-7.51 8.06-7.48 3.36.03 6.86 2.37 7.09 7.52.05 1.05-.77 1.94-1.81 1.98-1.07.05-1.93-.77-1.98-1.81-.15-3.48-2.38-3.88-3.32-3.88h-.04c-1.92 0-4.03 1.37-4.19 3.92-.1 1.58-.03 4.45 1.55 6 1 .98 2.6 1.39 4.74 1.2 4.96-.46 7.07-3.04 7.96-5.12 1.31-3.07.76-6.93-1.37-9.62-1.95-2.46-4.88-3.49-8.25-2.91l-6.69 1.19c-1.3.25-2.52.9-3.48 1.87-1.35 1.36-2.85 3.16-4.43 5.06-6.53 7.85-15.78 18.95-30.65 18.95h-.01Z" fill="#603E50"/>
+  <path d="m147.5 83.65-6.69 1.25-4.96-28.24 6.68-1.26 4.97 28.25Z" fill="#FFE084"/>
+  <path d="M145.57 60.65c-.28-.62-.59-1.37-.82-2.17-.74-2.5-1.21-5.35-2.81-4.96l-5.99.97c-.4.06-.76.35-.94.8-.52 1.24.79 2.89 1.11 5.56.32 2.67-.63 4.68-.13 5.72 1.01 2.08 3.07 1.9 3.13.36l-.66-3.48c-.05-.26.22-.43.42-.28.32.25.71.37 1.17.29.76-.14 1.55-1.09 1.28-1.98-.15-.49-.4-1.32-.57-1.88-.21-.68.47-1.29 1.05-.93.25.16.47.47.57 1l.56 3.21c.18 1 1.03 1.61 1.75 1.25 0 0 .02 0 .02-.01 1.06-.54 1.46-2.15.86-3.48v.01Z" fill="#BE8E42"/>
+  <path d="M127.49 42.79a.424.424 0 0 1 .19-.74c4.03-.78 9.19-1.05 12.5 1.84 2.43 2.18.98 5.85-1.6 7.44-2.41 1.31-5.06-.23-6.41-2.28-1.39-2.14-2.53-4.42-4.67-6.25l-.01-.01Z" fill="#C8733E"/>
+  <path d="M139.22 56.53c-.52 0-.99-.36-1.11-.89l-1.46-6.47c-.14-.61.25-1.22.86-1.36.62-.14 1.22.25 1.36.86l1.46 6.47a1.141 1.141 0 0 1-1.11 1.39Z" fill="#161414"/>
+  <path d="M115.83 165.04c-1.04 0-2.12-.12-3.24-.36a1.9 1.9 0 0 1-1.46-2.26 1.904 1.904 0 0 1 2.26-1.46c2.66.57 4.95.24 6.8-.99 2.6-1.72 3.81-4.82 4.11-6.37.81-4.21 4.4-7.38 8.72-7.7l11.93-.88c1.03-.09 1.96.71 2.03 1.75.08 1.05-.71 1.96-1.75 2.03l-11.93.88c-2.61.19-4.78 2.1-5.27 4.63-.51 2.66-2.33 6.56-5.74 8.82-1.91 1.26-4.07 1.89-6.45 1.89l-.01.02Z" fill="#603E50"/>
+  <path d="m141.086 116.808-7.277.22.866 28.677 7.277-.22-.866-28.677Z" fill="#FFE084"/>
+  <path d="M142.46 118.16c-.14-1.34-.72-2.21-1.84-2.24-2.05-.06-4.13.2-6.18.29-2.49.11-1.95 3.66-1.89 4.86.08 1.5.07 2.93-.02 4.42-.06.92.33 1.83 1.1 2.03.67.18 1.52-.39 1.58-1.32.07-1.13.13-2.26.13-3.39.62 1.39 2.64.99 2.55-.93a6.04 6.04 0 0 0-.09-.82c-.03-.3-.07-.61-.07-.89-.13-1.26 1.23-1.36 1.46 0 .07.4.23.98.34 1.36.17.59.42 1.16.69 1.69.79 1.51 2.53.58 2.47-1.05-.05-1.34-.09-2.69-.23-4.03v.02Z" fill="#BE8E42"/>
+  <path d="M131.12 99.88c-.09-.34.25-.65.57-.5 3.77 1.62 8.19 4.3 9.3 8.55.79 3.17-2.48 5.39-5.51 5.25-2.73-.27-4.05-3.04-4.02-5.5.05-2.55.4-5.08-.34-7.8Z" fill="#C8733E"/>
+  <path d="M136.94 118.86c-.62 0-1.13-.5-1.14-1.12l-.1-6.64c0-.63.49-1.15 1.12-1.16h.02c.62 0 1.13.5 1.14 1.12l.1 6.64c0 .63-.49 1.15-1.12 1.16h-.02Z" fill="#161414"/>
+  <path d="M169.93 190.48c-2.95 0-6.05-.85-9.1-2.54-3.18-1.76-5.52-5.03-6.24-8.74-.66-3.4.13-6.79 2.17-9.32 3.86-5.22 10.34-5.67 14.5-3.44 3.61 1.94 6.59 6.41 4.11 13.16-.36.98-1.45 1.49-2.44 1.13a1.905 1.905 0 0 1-1.13-2.44c1.41-3.84.56-6.94-2.34-8.5-2.76-1.48-7.08-1.15-9.67 2.38-.02.03-.04.05-.06.07-1.37 1.69-1.88 3.9-1.42 6.24.51 2.62 2.13 4.92 4.35 6.14 5.01 2.78 9.85 2.76 13.65-.03 3.8-2.8 5.79-7.94 4.84-12.5-.93-4.48-4.48-7.64-9.99-8.89l-8.48-1.78c-2.3-.48-4.64-.3-6.79.52-3.59 1.37-7.03 3.38-10.34 5.33-11.7 6.87-23.8 13.96-40.59-9.82-.6-.86-.4-2.04.46-2.65.86-.6 2.04-.4 2.65.46 14.77 20.93 23.95 15.55 35.56 8.74 3.45-2.03 7.02-4.12 10.91-5.6 2.83-1.08 5.91-1.31 8.92-.68l8.52 1.79c6.97 1.59 11.66 5.9 12.9 11.83 1.26 6.06-1.27 12.63-6.3 16.33a14.362 14.362 0 0 1-8.64 2.84l-.01-.03Z" fill="#603E50"/>
+  <path d="m176.775 131.096-7.133-1.453-5.725 28.113 7.134 1.453 5.724-28.113Z" fill="#FFE084"/>
+  <path d="m172.38 128.41 4 .89a2.5 2.5 0 0 1 1.89 1.89c.37 1.7.8 4.43.25 6.37-.86 3.43-1.28 8.99-4.07 9.21-1.93 0-.43-4.07 0-6.21-.64.86-2.14.86-2.57 0-.86-1.71 1.28-3 .43-4.71-.21-.21-.64-.43-.86-.21-1.93.64-.43 4.07-3 3.64-2.57-.43-.43-4.71-.43-4.71l1.45-4.48a2.494 2.494 0 0 1 2.91-1.67v-.01Z" fill="#BE8E42"/>
+  <path d="M167.11 114c-.18-.31.08-.69.43-.63 4.05.63 9 2.13 11.13 5.97 1.55 2.87-1.06 5.84-4.03 6.45-2.71.42-4.68-1.94-5.26-4.32-.58-2.48-.88-5.02-2.27-7.47Z" fill="#C8733E"/>
+  <path d="M173.87 130.97h-.14c-.62-.08-1.07-.65-.99-1.27l.82-6.59c.08-.62.65-1.07 1.27-.99.62.08 1.07.65.99 1.27l-.82 6.59c-.07.58-.56 1-1.13 1v-.01Z" fill="#161414"/>
+  <path d="M19.52 198.22c-2.46 0-4.86-.62-7.09-1.87-5.45-3.07-8.77-9.28-8.25-15.45.5-6.04 4.63-10.89 11.33-13.3l8.27-2.82c2.91-.99 6-1.14 8.94-.41 4.04 1 7.84 2.64 11.51 4.23 12.36 5.35 22.12 9.57 34.23-13.01.5-.93 1.65-1.27 2.57-.78.92.5 1.27 1.65.78 2.57-13.76 25.66-26.64 20.09-39.09 14.7-3.53-1.53-7.18-3.11-10.92-4.03-2.23-.55-4.58-.44-6.8.32l-8.24 2.81c-5.28 1.91-8.42 5.47-8.8 10.03-.39 4.64 2.22 9.5 6.33 11.82 4.11 2.31 8.92 1.73 13.55-1.63 2.05-1.48 3.38-3.96 3.57-6.62.17-2.38-.61-4.51-2.17-6.02l-.07-.07c-3-3.18-7.33-2.98-9.88-1.18-2.69 1.9-3.16 5.08-1.29 8.72.48.93.11 2.08-.82 2.56-.93.48-2.08.11-2.56-.82-3.28-6.39-.87-11.2 2.48-13.56 3.85-2.72 10.35-3.06 14.81 1.65 2.33 2.27 3.53 5.54 3.29 8.99-.26 3.77-2.18 7.3-5.12 9.44-3.42 2.48-7.05 3.74-10.55 3.74l-.01-.01Z" fill="#603E50"/>
+  <path d="m13.833 137.661-6.903 2.311 9.108 27.206 6.904-2.312-9.109-27.205Z" fill="#FFE084"/>
+  <path d="M6.12 141.43c-.39-1.28-.19-2.31.84-2.78 1.88-.85 3.9-1.42 5.84-2.13 2.35-.87 3.15 2.93 3.55 4.06.51 1.41 2.67 6.41 3.33 7.75.41.82.4 1.81-.24 2.3-.55.43-1.56.23-1.97-.6-.51-1.01-1.6-3.59-2.03-4.63-.03 1.52-2.33 1.98-2.99.18-.09-.25-.17-.51-.24-.79-.08-.29-.17-.59-.28-.85-.29-1.78-1.88-1.7-1.8-.53.08.61.68 3.06.62 3.65-.15 1.69-2.12 1.51-2.69-.01-.47-1.25-1.57-4.34-1.96-5.63l.02.01Z" fill="#BE8E42"/>
+  <path d="M.1 123.78c-.18-.3.06-.69.41-.64 4.07.53 9.06 1.89 11.29 5.67 1.62 2.83-.91 5.87-3.86 6.56-2.7.49-4.73-1.81-5.37-4.18-.65-2.47-1.01-5-2.47-7.4v-.01Z" fill="#C8733E"/>
+  <path d="M10.43 140.14c-.49 0-.94-.32-1.09-.81l-1.91-6.36c-.18-.6.16-1.24.76-1.42.6-.18 1.24.16 1.42.76l1.91 6.36a1.142 1.142 0 0 1-1.09 1.47Z" fill="#161414"/>
+  <path d="M68.11 167.13c-6.49 0-10.08-3.24-11.97-6.08-1.43-2.15-4.17-3.07-6.65-2.24l-11.35 3.8c-1 .33-2.07-.2-2.4-1.2-.33-1 .2-2.07 1.2-2.4l11.35-3.8c4.11-1.38 8.64.16 11.02 3.73 2.15 3.23 5.56 4.68 10.13 4.33 1.04-.08 1.96.7 2.04 1.75.08 1.05-.7 1.96-1.75 2.04-.56.04-1.09.06-1.61.06l-.01.01Z" fill="#603E50"/>
+  <path d="m36.837 128.823-6.904 2.311 9.108 27.206 6.904-2.311-9.108-27.206Z" fill="#FFE084"/>
+  <path d="M41.02 135.85c-.1-.15-.2-.3-.3-.47-.39-.63-1.9-3.59-2.88-5.53-.5-.99-1.65-1.47-2.7-1.13l-4.27 1.38c-1.06.34-1.71 1.4-1.53 2.5.69 4.22 2.55 13.87 5.06 12.86 1.65-.66 1.04-2.62.06-4.89 1.23.58 2.95-.65 2.39-2.1a1.573 1.573 0 0 0 1.27-.41c.11.36.28.69.57.98.11.11.23.2.36.28.39.23.87.31 1.36.15 1.71-.64 1.28-2.36.62-3.63l-.01.01Z" fill="#BE8E42"/>
+  <path d="M23.5 115.58c-.18-.31.07-.69.42-.64 4.06.58 9.03 2.01 11.21 5.82 1.59 2.85-.99 5.85-3.95 6.5-2.7.45-4.7-1.88-5.31-4.26-.62-2.48-.94-5.01-2.37-7.44v.02Z" fill="#C8733E"/>
+  <path d="M34.01 131.59c-.47 0-.91-.29-1.08-.76l-2.19-6.27c-.21-.59.11-1.24.7-1.45.59-.21 1.24.11 1.45.7l2.19 6.27c.21.59-.11 1.24-.7 1.45-.12.04-.25.06-.38.06h.01Z" fill="#161414"/>
+  <path d="m92.06 146.98-1.57.14c-6.58.6-11.88-5.32-10.56-11.8l4.14-20.29c.33-1.64.25-3.33-.25-4.92l-6.17-19.7c-1.88-6 2.26-12.21 8.53-12.78 6.38-.58 11.62 4.99 10.64 11.33l-3.27 21.26c-.24 1.58-.1 3.19.42 4.7l6.53 19.04c2.08 6.05-2.07 12.45-8.45 13.03l.01-.01Z" fill="#603E50"/>
+  <path d="M93.04 64.88c.39 4.31-7.37 17.96-7.37 17.96S75.58 70.8 75.19 66.49c-.39-4.31 3.29-8.16 8.22-8.6 4.93-.45 9.24 2.68 9.63 6.99Z" fill="#603E50"/>
+  <path d="M94.142 176.432c14.548-1.317 25.495-11.743 24.451-23.288-1.045-11.546-13.685-19.838-28.234-18.522-14.548 1.317-25.495 11.743-24.45 23.289 1.044 11.545 13.684 19.837 28.233 18.521Z" fill="#603E50"/>
+  <path d="M105.22 145.94c-5.38-3.07-11.74-2.06-14.2 2.26-.04.06-.07.13-.1.19-3.17-3.61-9.4-3.55-14.14.2-4.86 3.85-6.29 10.12-3.2 14.02 3.09 3.9 9.53 3.94 14.38.09 1.82-1.44 3.16-3.23 3.96-5.1 1.06 1.54 2.54 2.93 4.38 3.98 5.38 3.07 11.74 2.06 14.2-2.26 2.46-4.32.1-10.31-5.28-13.38Z" fill="#fff"/>
+  <path d="M90.266 154.432c.425-2.252-1.114-4.433-3.437-4.871-2.323-.437-4.55 1.034-4.974 3.286-.425 2.252 1.114 4.433 3.437 4.871 2.323.437 4.55-1.034 4.974-3.286Z" fill="#000"/>
+  <path d="M101.58 153.326c.424-2.253-1.115-4.433-3.438-4.871-2.323-.438-4.55 1.033-4.974 3.286-.425 2.252 1.114 4.433 3.437 4.87 2.323.438 4.55-1.033 4.975-3.285Z" fill="#000"/>
+  <path d="M73.28 147.65a1.14 1.14 0 0 1-.98-1.72c1.43-2.43 4.72-6.43 10.71-5.9.63.05 1.09.61 1.04 1.23-.05.63-.61 1.09-1.23 1.04-4.51-.39-7.14 2.38-8.55 4.78-.21.36-.59.56-.98.56l-.01.01Z" fill="#161414"/>
+  <path d="M106 143.41c-.26 0-.52-.09-.73-.26-2.1-1.75-5.5-3.45-9.76-1.56-.58.25-1.25 0-1.5-.58-.26-.58 0-1.25.58-1.5 5.61-2.49 10.02.12 12.14 1.89.48.4.55 1.12.15 1.61-.23.27-.55.41-.88.41v-.01Z" fill="#161414"/>
+</svg>
+<article class="content-block content-block--fourteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">DevTools Tips</h2>
+  <p id="DevTools-Tips" class="astro-SCMHTS4H">Illuminate bugs in your code with these quick and useful DevTools tips and tricks.</p>
+  <a href="https://www.youtube.com/watch?v=hdRDTj6ObiE&#38;list=PLNYkxOF6rcIAcezfL8q0rjt13ufKseL5X" target="_blank" rel="noopener" aria-describedby="DevTools-Tips" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--fifteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">Chrome Dev Insider</h2>
+  <p id="Chrome-Dev-Insider" class="astro-SCMHTS4H">Read up on the &#39;whoo&#39;s who in Chrome with this series.</p>
+  <a href="https://developer.chrome.com/tags/insider/" target="_blank" rel="noopener" aria-describedby="Chrome-Dev-Insider" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page " data-scroll-target="6" style="--index:5;" aria-label="page 5">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 5">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_spread5--dark.5ba992bb.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_spread5.bae809e0.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <svg class="page__feature log-fire" viewBox="0 0 135 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A brown fireplace with a lit fire. The fire is depicted as a single, large orange flame with a puzzled or nervous expression.</title>
+  <path d="M125.47 67.11 6.2 84.96c-3.37.5-5.86 2.91-5.63 5.42l.69 7.45c.23 2.53 3.15 4.24 6.55 3.84L127.38 87.7l-1.91-20.59Z" fill="#422925"/>
+  <path d="M134.382 77.602c.044-5.722-3.892-10.39-8.79-10.428-4.899-.038-8.906 4.57-8.949 10.292-.044 5.721 3.891 10.39 8.79 10.427 4.898.038 8.905-4.57 8.949-10.291Z" fill="#281515"/>
+  <path d="m11.45 95.36 109.37 3.55c3.09.1 5.51-1.83 5.48-4.34l-.12-7.48c-.04-2.54-2.56-4.74-5.67-4.95L11.13 74.7l.32 20.66Z" fill="#422925"/>
+  <path d="M13.341 95.433c4.403-.539 7.407-5.584 6.71-11.269-.695-5.685-4.828-9.856-9.23-9.317-4.402.539-7.406 5.584-6.71 11.269.696 5.684 4.829 9.856 9.23 9.317Z" fill="#281515"/>
+  <path d="M92.24 1.56c-3.48 6.65-1.93 15.07-1.38 22.63.13 1.73 1.92 2.8 3.5 2.09 9.67-4.31 6.02-16.75 1.49-24.64v-.02c-.71-1.49-2.84-1.53-3.6-.07l-.01.01Z" fill="#EF8229"/>
+  <path d="M99.25 34.86c-.69.88-2.19 1.97-3.55 2.92a2.015 2.015 0 0 0-.14 3.2c3.19 2.66 7.26 4.09 10.98 1.68 9.14-5.93 6.88-16.92 7.44-22.55.13-1.32-1.35-2.17-2.43-1.41-3.09 2.17-8.29 6.91-12.29 16.16h-.01Z" fill="#EF8229"/>
+  <path d="M53.45 13.55c.28-2.15 3.42-3.12 5.27-1.62 21.4 17.38 44.41 42.16 40.59 68.65-3.13 19.65-31.43 25.17-51.73 17.77-17.93-7.44-19.52-26.02-12.71-39.87 7.2-14.35 16.35-27.93 18.58-44.93Z" fill="#EF8229"/>
+  <path d="M41.8 53.04c-.29 0-.58-.11-.81-.33-.45-.45-.45-1.17 0-1.61.24-.24 5.96-5.88 15.03-3.09.6.19.94.83.76 1.43-.19.61-.83.94-1.43.76-7.72-2.37-12.54 2.31-12.74 2.51-.22.22-.52.33-.81.33Z" fill="#000"/>
+  <path d="M83.44 48.91c-.24 0-.49-.08-.7-.24-5.48-4.24-11.64-1.6-11.7-1.57-.58.26-1.25 0-1.51-.58s0-1.25.58-1.51c.3-.13 7.48-3.21 14.03 1.85a1.146 1.146 0 0 1-.71 2.05h.01Z" fill="#000"/>
+  <path d="M55.61 85.53c-.74 0-1.49-.22-2.13-.67-.97-.7-1.97-1.37-2.98-2.02-.33-.21-.78-.25-1.23-.11-.41.13-.72.4-.84.71a1.145 1.145 0 1 1-2.14-.82c.37-.97 1.2-1.72 2.27-2.07 1.09-.35 2.28-.22 3.18.36 1.04.67 2.08 1.37 3.07 2.08.58.41 1.48.29 1.92-.28.92-1.18 1.9-2.35 2.92-3.49.64-.72 1.6-1.16 2.64-1.2 1.02-.04 2 .31 2.68.96.89.84 1.76 1.71 2.6 2.59.49.51 1.42.53 1.96.04.93-.86 1.91-1.72 2.91-2.55.82-.68 1.98-.97 3.1-.75 1.08.21 1.98.84 2.46 1.73.24.44.48.88.71 1.32.17.32.51.55.92.64.44.09.89 0 1.21-.26.38-.3.76-.6 1.15-.9.83-.63 1.93-.86 3.02-.62 1.08.24 1.97.89 2.44 1.8a1.14 1.14 0 1 1-2.02 1.06c-.16-.3-.5-.53-.91-.62-.43-.09-.85-.02-1.14.2-.38.29-.75.58-1.12.88-.86.68-1.99.94-3.11.7-1.08-.23-1.98-.89-2.48-1.81-.23-.44-.46-.86-.7-1.29-.15-.29-.49-.5-.89-.58-.45-.09-.9.01-1.2.26-.97.8-1.91 1.63-2.81 2.47-1.45 1.34-3.82 1.27-5.17-.14-.81-.85-1.66-1.7-2.51-2.51-.24-.23-.6-.37-1.01-.33-.41.02-.79.18-1.02.44-.99 1.1-1.94 2.24-2.82 3.38-.72.92-1.82 1.4-2.93 1.4Z" fill="#161414"/>
+  <path d="M81.14 50.15c-7.38-3.7-15.48-1.84-18.21 4.13-3.39-1.95-8.05-2.48-12.79-1.12-8.16 2.34-13.47 9.42-11.87 15.81 1.61 6.39 9.52 9.67 17.68 7.32 4.71-1.35 8.46-4.28 10.5-7.74 1.41 1.46 3.13 2.74 5.09 3.72 7.45 3.73 15.63 1.8 18.29-4.31 2.65-6.11-1.24-14.09-8.68-17.82l-.01.01Z" fill="#fff"/>
+  <path d="M61.675 68.656c3.129-1.042 4.835-4.38 3.81-7.455-1.023-3.076-4.39-4.726-7.517-3.684-3.129 1.04-4.835 4.379-3.811 7.455 1.024 3.076 4.39 4.725 7.518 3.684Z" fill="#000"/>
+  <path d="M77.082 63.624c.937-3.005-1.034-6.293-4.403-7.344-3.37-1.05-6.86.534-7.797 3.54-.938 3.005 1.034 6.293 4.403 7.343 3.37 1.05 6.86-.534 7.797-3.539Z" fill="#000"/>
+  <path d="M122.72 87.94 11.4 91.87c-3.14.11-5.61 2.21-5.57 4.72l.12 7.48c.04 2.54 2.61 4.57 5.77 4.57l111.32-.04-.32-20.66Z" fill="#422925"/>
+  <path d="M122.208 108.625c4.539-.083 8.134-4.774 8.031-10.478-.104-5.704-3.867-10.261-8.406-10.179-4.539.082-8.135 4.773-8.031 10.477.103 5.705 3.867 10.262 8.406 10.18Z" fill="#281515"/>
+</svg>
+<svg class="page__feature portrait" viewBox="0 0 145 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>A portrait of an [Oscar the Grouch?], shown from the shoulders up. The portrait is in an oval frame and shows the [] in a lounge suit and with a stern expression.</title>
+  <path d="M71.8 159.62c-17.7 0-34.32-8.24-46.8-23.2C12.62 121.57 5.8 101.86 5.8 80.9S12.62 40.23 25 25.38c12.48-14.96 29.1-23.2 46.8-23.2 17.7 0 34.32 8.24 46.8 23.2 12.38 14.85 19.2 34.56 19.2 55.52s-6.82 40.67-19.2 55.52c-12.48 14.96-29.1 23.2-46.8 23.2Z" fill="#000"/>
+  <path d="M118.54 93.89h-97.3c-.52 0-.98-.26-1.17-.66-.19-.4-.05-.84.33-1.13.82-.61 1.68-1.18 2.57-1.71l-2.84-.28c-.52-.05-.95-.37-1.06-.79-.12-.42.1-.86.54-1.09 2.23-1.19 4.53-2.13 6.85-2.81-1.7-2.53-2.94-5.14-3.7-7.8L21 80.49c-.23.38-.73.6-1.25.56-.52-.05-.95-.35-1.07-.77-1.64-5.28-1.78-10.33-.45-15.07l-.21.13c-.42.25-.98.27-1.41.04-.44-.23-.66-.65-.55-1.07 1.46-5.98 4.23-11.25 8.25-15.69l-1.2.31c-.44.12-.93.02-1.26-.25-.33-.27-.45-.67-.31-1.03 1.64-4.26 4.27-7.75 7.83-10.39 2.24-1.65 4.84-2.97 7.76-3.93L35 32.34c-.39-.18-.64-.53-.64-.9s.25-.71.65-.89c5.98-2.69 11.28-2.91 15.25-2.36l-2.1-3.26c-.23-.35-.18-.78.11-1.1.29-.32.78-.47 1.26-.38.25.04 5.89 1.06 10.87 3.6 3.84-4.9 10.7-11.01 22.12-13.72.42-.1.87-.01 1.19.23.32.24.46.61.37.96l-1.7 6.72c5.71-3.15 12.03-4.4 18.83-3.72.41.04.77.25.96.55.19.3.18.66-.02.96l-5.25 7.88c3.67-.32 8.53.05 13.98 2.5.4.18.65.52.65.89s-.24.72-.64.9l-4.99 2.31c7.02 1.78 14.9 5.9 18.08 15.3.12.36 0 .75-.33 1.01s-.8.35-1.24.24l-2.59-.66c4.07 3.96 7.13 8.71 9.12 14.16.15.41-.02.84-.43 1.1-.41.26-.97.29-1.41.07l-2.45-1.21c1.29 3.55 1.8 7.38 1.51 11.44-.03.43-.38.79-.88.92s-1.04-.01-1.36-.35l-1.23-1.3c.65 3.47.51 7.13-.44 10.93-.1.42-.51.74-1.03.81-.51.07-1.02-.14-1.28-.51l-2.14-3.11c-.48 1.21-1.01 2.4-1.61 3.56 2.96.68 5.88 1.79 8.71 3.3.44.23.66.67.54 1.09-.12.42-.54.73-1.06.79l-5.63.57c.2.14.4.29.6.43.38.28.51.73.33 1.13-.18.4-.65.66-1.17.66l.03.01Z" fill="#B3C6A8"/>
+  <path d="M39.62 50.07a.92.92 0 0 1-.45-.12.897.897 0 0 1-.32-1.23c2.5-4.24 8.24-11.22 18.65-10.31.49.04.86.48.81.97-.04.49-.47.86-.97.81-9.44-.82-14.67 5.56-16.95 9.43a.91.91 0 0 1-.77.44v.01Z" fill="#161414"/>
+  <path d="M105.08 51.04c-.32 0-.64-.18-.8-.48-2-3.88-6.76-10.32-16.21-10.32H87.65c-.49 0-.89-.39-.9-.88 0-.49.38-.9.88-.91h.44c10.39 0 15.6 7.05 17.79 11.29a.895.895 0 0 1-.79 1.31l.01-.01Z" fill="#161414"/>
+  <path d="M46.15 84.9a.895.895 0 0 1-.41-1.69c2.25-1.18 4.11-1.11 5.9-1.03 1.34.05 2.6.1 4.01-.39 1.45-.43 1.88-.98 2.42-1.67.72-.93 1.54-1.98 4.33-2.5 2.83-.39 4.36.27 5.71.84 1.05.45 2.03.86 3.66.83 1.66.04 2.66-.38 3.71-.83 1.35-.57 2.88-1.23 5.66-.85 2.84.52 3.65 1.58 4.37 2.51.54.69.96 1.24 2.37 1.66 1.46.51 2.72.46 4.05.41 1.79-.07 3.64-.15 5.9 1.03.44.23.61.77.38 1.21-.23.44-.77.61-1.21.38-1.83-.96-3.37-.9-4.99-.83-1.45.06-2.94.12-4.68-.49-1.92-.57-2.62-1.47-3.24-2.26-.63-.81-1.12-1.44-3.24-1.83-2.25-.3-3.38.17-4.68.73-1.12.48-2.41 1-4.41.97-1.97.04-3.24-.49-4.37-.97-1.3-.55-2.43-1.03-4.72-.72-2.08.39-2.57 1.02-3.2 1.83-.62.79-1.32 1.7-3.28 2.28-1.69.6-3.19.54-4.63.48-1.63-.06-3.16-.13-4.99.83-.13.07-.28.1-.42.1v-.03Z" fill="#000"/>
+  <path d="M41.8 89.27c2.817 0 5.1-2.104 5.1-4.7s-2.283-4.7-5.1-4.7c-2.817 0-5.1 2.104-5.1 4.7s2.283 4.7 5.1 4.7Z" fill="#EF8229"/>
+  <path d="M102.04 88.67c2.745 0 4.97-2.104 4.97-4.7s-2.225-4.7-4.97-4.7c-2.745 0-4.97 2.104-4.97 4.7s2.225 4.7 4.97 4.7Z" fill="#EF8229"/>
+  <path d="M94.56 46.78c-8.4-5.68-18.53-5.84-23.16-.54-4.63-5.31-14.76-5.14-23.16.54-8.74 5.91-12.3 15.54-7.96 21.52 4.35 5.98 14.96 6.03 23.7.13 3.22-2.18 5.74-4.86 7.42-7.69 1.68 2.82 4.2 5.51 7.42 7.69 8.74 5.91 19.35 5.85 23.7-.13 4.35-5.98.79-15.61-7.96-21.52Z" fill="#fff"/>
+  <g class="portrait__eyes" clip-path="url(#grouchEyes)">
+    <path class="portrait__eye portrait__eye--right portrait__eye--mover" d="M91.762 58.364c1.484-2.908-.308-6.793-4.003-8.679-3.694-1.885-7.892-1.057-9.376 1.85-1.483 2.908.309 6.793 4.003 8.678 3.694 1.886 7.892 1.058 9.376-1.85Z" fill="#000"/>
+    <path class="portrait__eye portrait__eye--left portrait__eye--mover" d="M61.901 59.951c3.69-1.894 5.473-5.783 3.983-8.687-1.49-2.904-5.69-3.723-9.38-1.829-3.69 1.894-5.473 5.784-3.983 8.688 1.49 2.903 5.69 3.722 9.38 1.828Z" fill="#000"/>
+    <path class="portrait__eye portrait__eye--right" d="M91.762 58.364c1.484-2.908-.308-6.793-4.003-8.679-3.694-1.885-7.892-1.057-9.376 1.85-1.483 2.908.309 6.793 4.003 8.678 3.694 1.886 7.892 1.058 9.376-1.85Z" fill="none"/>
+    <path class="portrait__eye portrait__eye--left" d="M61.901 59.951c3.69-1.894 5.473-5.783 3.983-8.687-1.49-2.904-5.69-3.723-9.38-1.829-3.69 1.894-5.473 5.784-3.983 8.688 1.49 2.903 5.69 3.722 9.38 1.828Z" fill="none"/>
+  </g>
+  <path d="M67.57 54.64c2.32.37 4.47-1.34 4.61-3.69.35-5.59-1.35-15.02-15.7-18.3-14.82-3.38-19.63 6.42-21.17 12.41-.58 2.27.93 4.54 3.24 4.91l29.02 4.66v.01Z" fill="#EF8229"/>
+  <path d="M104.07 48.02c2.3-.51 3.67-2.88 2.94-5.12-1.73-5.33-6.77-13.48-21.32-11.26-15.03 2.29-15.9 13.18-15.14 19.32.29 2.32 2.53 3.88 4.81 3.38l28.71-6.32Z" fill="#EF8229"/>
+  <path d="M81.24 37.49s4.63 8.69-7.61 12.72c-.39.13-.81-.14-.75-.48l.75-4.27c.07-.39-.43-.68-.85-.49-1.94.83-6.4 2.4-11.27 1.71-.74-.1-.95-.89-.34-1.24l5.39-3.17" fill="#B3C6A8"/>
+  <path d="M73.42 51.14c-.36 0-.71-.12-.98-.36-.35-.31-.52-.76-.44-1.2l.63-3.57c-2.37.96-6.59 2.22-11.24 1.57-.74-.1-1.31-.61-1.44-1.28-.13-.64.18-1.27.77-1.62l5.39-3.17c.43-.25.98-.11 1.23.32s.11.98-.32 1.23l-4.8 2.82c4.53.46 8.62-1.03 10.21-1.72.53-.23 1.15-.15 1.59.2.4.31.58.79.5 1.27l-.63 3.56c3.61-1.29 5.91-3.12 6.85-5.45 1.19-2.98-.27-5.79-.29-5.82a.894.894 0 1 1 1.58-.84c.08.14 1.87 3.58.37 7.33-1.19 2.96-4.04 5.2-8.49 6.67-.16.05-.32.08-.49.08v-.02Z" fill="#101110"/>
+  <path d="M80.76 101.76h-2.5c-7.727 0-13.99 6.264-13.99 13.99v5.79c0 7.726 6.264 13.99 13.99 13.99h2.5c7.727 0 13.99-6.264 13.99-13.99v-5.79c0-7.726-6.263-13.99-13.99-13.99Z" fill="#EF8229"/>
+  <path d="m135.8 106.88-24.58-2.29-4.36-4.79-23.61 33.19-47.31-34.82-9.46 8.13L9.43 110s14.16 52.05 64.1 50.76c49.94-1.29 62.26-53.9 62.26-53.9l.01.02Z" fill="#603E50"/>
+  <path d="m100.3 92.43-57.8-.31-6.59 6.32 29.58 21.32 7.56-10.4c2.57-3.54 7.72-3.89 10.75-.74l10.06 9.86 13.01-18.68-6.56-7.37h-.01Z" fill="#F2ECD1"/>
+  <path d="m35.92 98.16-12.28 10.62c-1.24 1.14-.77 3.03.89 3.6l28.96 10.72c1.63.56 2.13 2.4.95 3.55l-6.72 6.83c-1.34 1.31-.49 3.42 1.48 3.67l42.58 1.92-55.86-40.91Z" fill="#472C3C"/>
+  <path d="M79.31 152.54c-2.57 0-4.66-2.03-4.66-4.52 0-2.49 2.09-4.52 4.66-4.52 2.57 0 4.66 2.03 4.66 4.52 0 2.49-2.09 4.52-4.66 4.52Zm0-7.25c-1.58 0-2.87 1.22-2.87 2.73s1.29 2.73 2.87 2.73 2.86-1.22 2.86-2.73-1.29-2.73-2.86-2.73Z" fill="#000"/>
+  <path d="M63.86 112.75c-2.03 0-3.69-1.71-3.69-3.81s1.65-3.81 3.69-3.81 3.69 1.71 3.69 3.81-1.65 3.81-3.69 3.81Zm0-5.82c-1.04 0-1.89.9-1.89 2.02s.85 2.01 1.89 2.01 1.89-.9 1.89-2.01c0-1.11-.85-2.02-1.89-2.02Z" fill="#000"/>
+  <path d="M93.44 112.75c-2.03 0-3.69-1.71-3.69-3.81s1.65-3.81 3.69-3.81 3.69 1.71 3.69 3.81-1.65 3.81-3.69 3.81Zm0-5.82c-1.04 0-1.9.9-1.9 2.02s.85 2.01 1.9 2.01c1.05 0 1.89-.9 1.89-2.01 0-1.11-.85-2.02-1.89-2.02Z" fill="#000"/>
+  <path d="m91.22 139.07 17.57-5.45c1.69-.83 2.28-2.73 1.31-4.21l-6.11-5.04c-.88-1.35-.48-3.08.94-4l9.26-7.14c1.53-1 1.86-2.91.74-4.27l-8.16-9.15-23.34 33.23 7.8 6.04-.01-.01Z" fill="#472C3C"/>
+  <path d="M90.43 157.14c-.5 0-.89-.41-.89-.9l.06-15.64c0-1.54-.73-2.99-1.98-3.89L35.53 99.03a.896.896 0 0 1 1.05-1.45l52.09 37.68a6.59 6.59 0 0 1 2.72 5.35l-.06 15.64c0 .49-.4.89-.9.89Z" fill="#000"/>
+  <path d="M65.44 120.61c-.18 0-.37-.06-.53-.17a.894.894 0 0 1-.19-1.25l7.65-10.41c1.6-1.89 3.84-2.93 6.31-2.93 2.54 0 4.96 1.13 6.63 3.09l8.48 8.21a.9.9 0 0 1-1.25 1.29l-8.57-8.3c-1.34-1.58-3.27-2.49-5.3-2.49-1.92 0-3.67.81-4.92 2.27l-7.6 10.33c-.18.24-.45.37-.72.37l.01-.01Z" fill="#000"/>
+  <path d="M83.56 132.97a.896.896 0 0 1-.72-1.42l23.34-32.4a.896.896 0 0 1 1.45 1.05l-23.34 32.4a.91.91 0 0 1-.73.37Z" fill="#000"/>
+  <path class="portrait__nose" d="M72.67 77.01c-6.1 0-9.3-4.34-8.28-8.61.47-1.98.94-3.95 1.42-5.93.75-3.16 3.01-5.35 6.92-5.35s6.06 2.19 6.81 5.35c.47 1.98.94 3.95 1.42 5.93 1.02 4.26-2.18 8.61-8.28 8.61h-.01Z" fill="#EF8229"/>
+  <path d="M72.56 163.29c-19.41 0-37.63-8.5-51.31-23.94C7.67 124.03.2 103.69.2 82.08c0-21.61 7.48-41.95 21.05-57.27C34.93 9.37 53.15.87 72.56.87c19.41 0 37.63 8.5 51.31 23.94 13.58 15.32 21.05 35.66 21.05 57.27 0 21.61-7.48 41.95-21.05 57.27-13.68 15.44-31.9 23.94-51.31 23.94Zm0-155.48c-36.07 0-65.42 33.31-65.42 74.26s29.35 74.26 65.42 74.26 65.42-33.31 65.42-74.26S108.63 7.81 72.56 7.81Z" fill="#BD8835"/>
+  <defs>
+    <clipPath id="grouchEyes">
+      <path d="M94.56 46.78c-8.4-5.68-18.53-5.84-23.16-.54-4.63-5.31-14.76-5.14-23.16.54-8.74 5.91-12.3 15.54-7.96 21.52 4.35 5.98 14.96 6.03 23.7.13 3.22-2.18 5.74-4.86 7.42-7.69 1.68 2.82 4.2 5.51 7.42 7.69 8.74 5.91 19.35 5.85 23.7-.13 4.35-5.98.79-15.61-7.96-21.52Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
+
+
+
+
+<article class="content-block content-block--sixteen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">The <abbr title='Cascading Style Sheets'>CSS</abbr> Podcast</h2>
+  <p id="The-<abbr-title='Cascading-Style-Sheets'>CSS</abbr>-Podcast" class="astro-SCMHTS4H">It&#39;s alive! Join Una and Adam in the revived CSS podcast, with new episodes landing weekly.</p>
+  <a href="https://thecsspodcast.libsyn.com/" target="_blank" rel="noopener" aria-describedby="The-<abbr-title='Cascading-Style-Sheets'>CSS</abbr>-Podcast" class="astro-SCMHTS4H">Read more</a>
+</article>
+<article class="content-block content-block--seventeen astro-SCMHTS4H">
+  <h2 class="astro-SCMHTS4H">How we built Chrometober</h2>
+  <p id="How-we-built-Chrometober" class="astro-SCMHTS4H">We&#39;ll illuminate how this website was built using scroll-linked animations and a few UI tricks.</p>
+  <a href="https://web.dev/building-chrometober" target="_blank" rel="noopener" aria-describedby="How-we-built-Chrometober" class="astro-SCMHTS4H">Read more</a>
+</article>
+
+
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 6">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg" class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <div class="credits astro-GAHQGNUU">
+  <h2 class="astro-GAHQGNUU">Brought to you by:</h2>
+  <dl class="astro-GAHQGNUU">
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=rudepetsclub" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Tyler Reed
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Illustration &amp; Design
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=jh3yy" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Jhey Tompkins
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Architectural and Creative Lead
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=una" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Una Kravets
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Project Lead
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=bramus" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Bramus Van Damme
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Site Contributor
+    </dd>
+    <dt class="astro-GAHQGNUU">
+      <a href="https://twitter.com/intent/follow?screen_name=argyleink" target="_blank" rel="noopener noreferrer" class="astro-GAHQGNUU">
+        Adam Argyle
+      </a>
+    </dt>
+    <dd class="astro-GAHQGNUU">
+      Accessibility Review
+    </dd>
+    <dt class="astro-GAHQGNUU">Aaron Forinton</dt>
+    <dd class="astro-GAHQGNUU">
+      Copywriting
+    </dd>
+  </dl>
+</div>
+
+
+      </div>
+    </div>
+  </div>
+</li><li class="book__page page page--cover-back" data-scroll-target="7" style="--index:6;" aria-label="book back">
+  <div class="page__paper">
+    <div class="page__side page__side--front" aria-label="Right page of 6">
+
+      <picture>
+        <source srcset="/third_party/chrometober-2022/assets/chrometober_index--dark.e6c64e4b.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img src="/third_party/chrometober-2022/assets/chrometober_index.0c52aa6c.svg" class="page__background page__background--right" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <div class="colophon astro-QJDWFVEU">
+  <p class="astro-QJDWFVEU">This storybook demo is a Chrome experiment built to highlight scroll-linked animations using the <a href="https://github.com/flackr/scroll-timeline" rel="noopener noreferrer" target="_blank" class="astro-QJDWFVEU">scroll-timeline polyfill</a> and some of our team's work. Happy spooky month!</p>
+  </div>
+      </div>
+    </div>
+    <div class="page__side page__side--back" aria-label="Left page of 7">
+
+      <picture>
+        <source media="(prefers-color-scheme: dark)" height="214" width="150">
+        <img class="page__background page__background--left" alt="" aria-hidden="true" height="214" width="150" fetchpriority="high">
+      </picture>
+      <div class="page__content">
+        <picture>
+    <source srcset="/third_party/chrometober-2022/assets/chrometober_back--dark.89ee8c43.svg" media="(prefers-color-scheme: dark)" height="214" width="150">
+    <img src="/third_party/chrometober-2022/assets/chrometober_back.1c723e9c.svg" class="page__cover page__background" alt="" aria-hidden="true" height="214" width="150">
+</picture>
+      </div>
+    </div>
+  </div>
+</li>
+    </ul>
+  </main><div data-timeline-trigger data-timeline-trigger--first aria-hidden="true" inert>
+  </div><div id="trigger-1" data-timeline-trigger data-scroll-trigger="1" aria-hidden="true" inert>
+    </div><div id="trigger-2" data-timeline-trigger data-scroll-trigger="2" aria-hidden="true" inert>
+    </div><div id="trigger-3" data-timeline-trigger data-scroll-trigger="3" aria-hidden="true" inert>
+    </div><div id="trigger-4" data-timeline-trigger data-scroll-trigger="4" aria-hidden="true" inert>
+    </div><div id="trigger-5" data-timeline-trigger data-scroll-trigger="5" aria-hidden="true" inert>
+    </div><div id="trigger-6" data-timeline-trigger data-scroll-trigger="6" aria-hidden="true" inert>
+    </div><div id="trigger-7" data-timeline-trigger data-scroll-trigger="7" aria-hidden="true" inert>
+    </div><div data-timeline-trigger data-timeline-trigger--last aria-hidden="true" inert>
+    <h2>Thanks for checking this out!</h2>
+  </div>
+	</body></html>
+
+<!-- Moved these up so can wrap them in the DOMContentLoaded as an attempt -->
+
diff --git a/src/site/content/en/third_party/demo/url-parts/css/main.css b/src/site/content/en/third_party/demo/url-parts/css/main.css
new file mode 100644
index 00000000000..46627a9a57b
--- /dev/null
+++ b/src/site/content/en/third_party/demo/url-parts/css/main.css
@@ -0,0 +1,418 @@
+/* Copyright 2023 Google LLC.
+SPDX-License-Identifier: Apache-2.0 */
+
+a {
+  color: #15c;
+  font-weight: 300;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a#viewSource {
+  border-top: 1px solid #999;
+  display: block;
+  margin: 1.3em 0 0 0;
+  padding: 1em 0 0 0;
+}
+
+h1 a {
+  font-weight: 300;
+  white-space: nowrap;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  margin: 0;
+  padding: 20px 20px 20px 20px;
+  word-break: break-word;
+}
+
+button {
+  background-color: #d84a38;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 0.8em;
+  margin: 0 0 1em 0;
+  padding: 0.6em;
+}
+
+button:active {
+  background-color: #cf402f;
+}
+
+button:hover {
+  background-color: #cf402f;
+}
+
+button[disabled] {
+  color: #ccc;
+}
+
+button[disabled]:hover {
+  background-color: #d84a38;
+}
+
+code {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 400;
+}
+
+div#container {
+  position: relative;
+}
+
+div#highlight {
+  background-color: #eee;
+  font-size: 1.2em;
+  margin: 0 0 50px 0;
+  padding: 0.5em 2em;
+}
+
+div#url-parts {
+  color: #444;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 16px;
+  font-weight: 100;
+  left: 56px;
+  overflow-x: scroll;
+  padding: 100px 0;
+  position: relative;
+  white-space: nowrap;
+}
+
+h1 {
+  border-bottom: 1px solid #ccc;
+  font-family: 'Google Sans', sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0 0 2em 0;
+  padding: 0 0 0.2em 0;
+}
+
+h2 {
+  color: #444;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.2em;
+  margin: 0 0 0.8em 0;
+}
+
+h3 {
+  border-top: 1px solid #eee;
+  color: #666;
+  font-size: 0.9em;
+  font-weight: 500;
+  margin: 20px 0 10px 0;
+  padding: 10px 0 0 0;
+  white-space: nowrap;
+}
+
+img {
+  border: none;
+  max-width: 100%;
+}
+
+input {
+  border: 1px solid #eee;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 16px;
+  padding: 10px;
+  width: calc(100% - 67px);
+}
+
+label {
+  display: inline-block;
+  font-family: 'Google Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  width: 40px;
+}
+
+ol {
+  padding: 0 0 0 20px;
+}
+
+p {
+  color: #444;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.6em;
+  margin: 0 0 50px 0;
+}
+
+p.borderBelow {
+  border-bottom: 1px solid #eee;
+  padding: 0 0 20px 0;
+}
+
+section p:last-of-type {
+  margin: 0;
+}
+
+section {
+  border-bottom: 1px solid #eee;
+  margin: 0 0 30px 0;
+  padding: 0 0 20px 0;
+}
+
+section:last-of-type {
+  border-bottom: none;
+  margin: 0;
+  padding: 0 0 1em 0;
+}
+
+div#url-parts span::before {
+  display: inline-block;
+  font-family: 'Google Sans', sans-serif;
+  font-size: 14px;
+  position: relative;
+  width: 0;
+}
+
+span#etld {
+  border-bottom: 1px solid #ea4335;
+  padding: 0 0 30px 0;
+}
+
+span#etld::before {
+  color: #ea4335;
+  content: 'eTLD';
+  top: 50px;
+}
+
+span#etld1 {
+  border-bottom: 1px solid #ea4335;
+  padding: 0 0 55px 0;
+}
+
+span#etld1::before {
+  color: #ea4335;
+  content: 'eTLD+1';
+  top: 75px;
+}
+
+span#filename {
+  border-bottom: 1px solid #fbbc04;
+  padding: 0 0 5px 0;
+}
+
+span#filename::before {
+  color: #fbbc04;
+  content: 'filename';
+  top: 25px;
+}
+
+span#hash {
+  border-bottom: 1px solid #fbbc04;
+  margin: 0 0 0 2px;
+  padding: 0 0 5px 0;
+}
+
+span#hash::before {
+  color: #fbbc04;
+  content: 'hash';
+  top: 25px;
+}
+
+span#search + span#hash {
+  border-bottom: 1px solid #fbbc04;
+  padding: 0 0 30px 0;
+}
+
+span#search + span#hash::before {
+  color: #fbbc04;
+  content: 'hash';
+  top: 50px;
+}
+
+span#hostname {
+  border-top: 1px solid #34a853;
+  padding: 2px 0 0 0;
+}
+
+span#hostname::before {
+  color: #34a853;
+  content: 'hostname';
+  top: -25px;
+}
+
+span#origin span#hostname {
+  border-top: 1px solid #34a853;
+  padding: 27px 0 0 0;
+}
+
+span#origin span#hostname::before {
+  color: #34a853;
+  content: 'hostname';
+  top: -50px;
+}
+
+span#origin {
+  border-top: 1px solid #34a853;
+  padding: 52px 0 0 0;
+}
+
+span#origin::before {
+  color: #34a853;
+  content: 'origin';
+  top: -75px;
+}
+
+span#origin-dotted {
+  border-top: 0.5px dotted #34a853;
+  padding: 52px 0 0 0;
+}
+
+span#origin-scheme {
+  border-top: 1px solid #34a853;
+  padding: 52px 0 0 0;
+}
+
+span#password {
+  border-bottom: 1px solid #795548;
+  padding: 0 0 5px 0;
+}
+
+span#password::before {
+  color: #795548;
+  content: 'password';
+  top: 25px;
+}
+
+span#pathname {
+  border-top: 1px solid #fbbc04;
+  margin: 0 0 0 2px;
+  padding: 2px 0 0 0;
+}
+
+span#pathname::before {
+  color: #fbbc04;
+  content: 'pathname';
+  top: -25px;
+}
+
+span#port {
+  border-bottom: 1px solid #4285f4;
+  padding: 0 0 5px 0;
+}
+
+span#port::before {
+  color: #4285f4;
+  content: 'port';
+  top: 25px;
+}
+
+span#scheme {
+  border-bottom: 1px solid #4285f4;
+  padding: 0 0 5px 0;
+}
+
+span#scheme::before {
+  color: #4285f4;
+  content: 'scheme';
+  top: 25px;
+}
+
+span#search {
+  border-bottom: 1px solid #fbbc04;
+  margin: 0 0 0 2px;
+  padding: 0 0 5px 0;
+}
+
+span#search::before {
+  color: #fbbc04;
+  content: 'search';
+  top: 25px;
+}
+
+span#site {
+  border-top: 1px solid #34a853;
+  padding: 2px 0 0 0;
+}
+
+span#site::before {
+  color: #34a853;
+  content: 'site';
+  top: -25px;
+}
+
+span#site-dotted {
+  border-top: 0.5px dotted #34a853;
+  padding: 2px 0 0 0;
+}
+
+span#site-scheme {
+  border-top: 1px solid #34a853;
+  padding: 2px 0 0 0;
+}
+
+span#tld {
+  border-bottom: 1px solid #ea4335;
+  padding: 0 0 5px 0;
+}
+
+span#tld::before {
+  color: #ea4335;
+  content: 'TLD';
+  top: 26px;
+}
+
+span#username {
+  border-top: 1px solid #795548;
+  padding: 2px 0 0 0;
+}
+
+span#username::before {
+  color: #795548;
+  content: 'username';
+  top: -25px;
+}
+
+h1 span {
+  white-space: nowrap;
+}
+
+strong {
+  font-weight: 500;
+}
+
+ul {
+  padding: 0 0 0 20px;
+}
+
+@media (min-width: 550px) {
+  body {
+    font-size: 16px;
+    padding: 1em;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+}
+
+@media (min-width: 750px) {
+  h1 {
+    font-size: 30px;
+  }
+}
+
+@media (min-width: 1000px) {
+  /* hack! to detect non-touch devices */
+  div#links a {
+    line-height: 0.8em;
+  }
+}
+
+@media (min-width: 500px) {
+  body {
+    margin: 40px 30px 30px 30px;
+  }
+}
\ No newline at end of file
diff --git a/src/site/content/en/third_party/demo/url-parts/js/main.js b/src/site/content/en/third_party/demo/url-parts/js/main.js
new file mode 100644
index 00000000000..3cd346cfd15
--- /dev/null
+++ b/src/site/content/en/third_party/demo/url-parts/js/main.js
@@ -0,0 +1,244 @@
+/* Copyright 2023 Google LLC.
+SPDX-License-Identifier: Apache-2.0 */
+
+// Public Suffix List: https://publicsuffix.org/list/
+import pslEntries from './psl.js';
+// https://data.iana.org/TLD/tlds-alpha-by-domain.txt
+import tldEntries from './tld.js';
+
+const urlInput = document.querySelector('input#url');
+const urlPartsDiv = document.querySelector('div#url-parts');
+
+if (!isSecureContext) location.protocol = 'https:';
+
+// const searchParams = new URLSearchParams(window.location.search);
+// const urlParam = searchParams.get('url');
+// Get the value 'manually' to allow for hash values.
+const urlParam = location.href.split('?url=')[1];
+if (urlParam) {
+  urlInput.value = urlParam;
+  handleUrl();
+}
+
+
+urlInput.oninput = handleUrl;
+// A value is provided in the HTML.
+let urlText = urlInput.value;
+handleUrl();
+
+function handleUrl() {
+  urlText = urlInput.value;
+  // console.log('urlText:', urlText);
+
+  // Begin by removing `?url= ...` search string.
+  // This is added later if urlText is valid and can be handled here.
+  // window.history.replaceState({}, '', `${window.location.origin}`);
+
+  // URL API allows URLs such as `https://foo` or `https://f`.
+  // Also want to avoid URLs like `//foo` or `foo.co.`, or `@` without a username.
+  // URLs like `tv.tv` are valid.
+  if (!urlText || !urlText.match(/\w{2,}\.\w{2,}/ ) || urlText.match(/$\./ ) ||
+      urlText.match(/\/\/@/)) {
+    urlPartsDiv.innerHTML = '';
+    return;
+  }
+
+  // TODO: support non-ASCII hostnames and pathnames.
+  if (!urlText.match(/^[\w:\/\?#\.\@= %]+$/i)) {
+    urlPartsDiv.innerHTML =
+      '😾 Sorry! Only ASCII for the moment.<br><br>' +
+      'We\'re working on providing <a href="https://github.com/mathiasbynens/punycode.js">' +
+      'Punycode</a> support and non-ASCII in pathnames.';
+    return;
+  }
+
+  if (urlText.match(/\s/)) {
+    urlPartsDiv.innerHTML = 'URL should not include spaces.';
+    return;
+  }
+
+  let url;
+
+  try {
+    // Hack to allow URLs without scheme.
+    url = urlText.match(/^https?:\/\//) ? new URL(urlText) :
+      new URL(`https://${urlText}`);
+  } catch {
+    console.log(`${urlText} is not a valid URL`);
+    urlPartsDiv.innerHTML = '';
+    return;
+  }
+
+  console.log('url', url);
+
+  const hash = url.hash;
+  const hostname = url.hostname;
+  const origin = url.origin;
+  const password = url.password;
+  let pathname = url.pathname;
+  const port = url.port;
+  const search = url.search;
+  const username = url.username;
+
+  if (!hostname) {
+    urlPartsDiv.innerHTML = '';
+    return;
+  }
+
+  // Adding support for username and password is more difficult than I thought :/.
+  if (username || password) {
+    console.log('username:', username, 'password:', password);
+    urlPartsDiv.innerHTML = 'Sorry! Can\'t handle URLs with username or password (yet).';
+    return;
+  }
+
+  // urlText is a valid URL that can be handled here,
+  // so update the `?url= ...` search string in the URL bar.
+  // window.history.replaceState({url: urlText}, '', `${window.location.origin}?url=${urlText}`);
+
+  // Get filename.
+  // Need to handle `example.com/foo` as opposed to `example.com/foo.html`
+  const endPart = urlText.split('#').shift().
+    split('?').shift().split('/').pop();
+  // Need to handle URLs like `web.dev`: URL must have a `/` to have a filename.
+  const filename = urlText.match(/\w\/\w/) && endPart.match(/\w+\.\w+/) ?
+    endPart : '';
+
+  // The URL API returns / for URLs without a pathname specified.
+  // Only highlight / if it's at the end of a URL.
+  if (pathname === '/' && !urlText.match(/\/$/)) {
+    pathname = '';
+  }
+
+  const scheme =
+    urlText.match(/^https:\/\//) ? 'https' :
+      urlText.match(/^http:\/\//) ? 'http' : '';
+  // Avoid a few common mistakes, such as a single `/` or missing `:`.
+  if (scheme === '' &&
+      (urlText.match(/^https?:\/\w/) || urlText.match(/^https?:\w/) ||
+      urlText.match(/^https?\/\w/) || urlText.match(/^https?\//) || urlText.match(/\:\//))) {
+    urlPartsDiv.innerHTML = 'Scheme format not valid.';
+    return;
+  }
+
+  let etldRegExp;
+  // Get the eTLD and eTLD+1.
+  const etld = pslEntries.find((el) => {
+    etldRegExp = new RegExp(`\\w+.${el}$`);
+    if (el === 'co.uk') {
+    }
+    return hostname.match(etldRegExp);
+  });
+  let etld1;
+  if (etld) {
+    const etld1RegExp = new RegExp(`[^\/\.]+\.${etld}`);
+    etld1 = urlText.match(etld1RegExp) && urlText.match(etld1RegExp)[0];
+  }
+
+  // The spans need to wrap the URL from the outside in:
+  // origin > originWithoutPort > hostname > site > eTLD+1 > eTLD > TLD.
+
+  urlPartsDiv.innerHTML = urlText.
+    replace(origin, `<span id="origin">${origin}</span>`);
+
+  // According to the URL standard, site must now include a scheme, so add a
+  // dotted border between the TLD+1 or eTLD+1 and the scheme.
+  if (scheme) {
+    const siteDottedRegExp = new RegExp(`${scheme}.+${hostname}`);
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.
+      replace(siteDottedRegExp, '<span id="site-dotted">$&</span>');
+  }
+
+  // If the URL has a scheme, add a span to add a dashed border for site
+  // between the scheme and the rest of the site.
+  urlPartsDiv.innerHTML =
+    urlPartsDiv.innerHTML.replace(hostname, `<span id="hostname">${hostname}</span>`);
+
+  // Although the URL standard now mandates that a site must include a scheme,
+  // span#site only wraps the eTLD+1 or TLD+1.
+  // The scheme border is connected with the span#site border by a dotted border,
+  // by wrapping the whole origin (except the port) in span#site-dotted.
+
+  // If the URL uses an eTLD, add spans for eTLD+1 and eTLD.
+  if (etld) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(etld1,
+      `<span id="etld1">${etld1}</span>`);
+    // Site now requires scheme (according to the URL standard).
+    if (scheme) {
+      urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(`<span id="etld1">${etld1}</span>`,
+        `<span id="etld1"><span id="site">${etld1}</span></span>`);
+    }
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(etld,
+      `<span id="etld">${etld}</span>`);
+  // Site now requires scheme.
+  } else if (scheme) {
+    // Not eTLD, so site is TLD+1.
+    const site = hostname.split('.').slice(-2).join('.');
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(site, `<span id="site">${site}</span>`);
+  }
+
+  // Wrap TLD in a span.
+  // If the hostname includes an eTLD, urlPartsDiv.innerHTML will be wrapped in a span.
+  // Otherwise, the whole hostname will be wrapped in a span.
+  const tld = hostname.split('.').pop();
+  // Check if tld is in the list at js/tld.js from the Root Zone Database.
+  if (tldEntries.includes(tld.toUpperCase())) {
+    const partBeforeTld = hostname.split('.').slice(-2, -1);
+    const tldRegExp = new RegExp(`${partBeforeTld}.(${tld})`);
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(tldRegExp,
+      partBeforeTld + '.<span id="tld">$1</span>');
+  } else {
+    urlPartsDiv.innerHTML = 'TLD not found in the ' +
+      '<a href="https://www.iana.org/domains/root/db">Root Zone Database</a>.';
+    return;
+  }
+
+  // Hack: if the pathname is / then highlight the / after the origin
+  // (not a / after the scheme).
+  if (pathname === '/') {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(/\/$/,
+      `<span id="pathname">/</span>`);
+  } else if (pathname) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(pathname,
+      `<span id="pathname">${pathname}</span>`);
+  }
+
+  if (filename) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(filename,
+      `<span id="filename">${filename}</span>`);
+  }
+  if (hash) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(hash,
+      `<span id="hash">${hash}</span>`);
+  }
+
+  // TODO: surprisingly complex to get this to work with other URL parts!
+  // if (password) {
+  //   urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(`:${password}@`,
+  //     `:<span id="password">${password}</span>@`);
+  // }
+
+  if (port) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(`:${port}`,
+      `:<span id="port">${port}</span>`);
+  }
+  if (scheme) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(scheme,
+      // `<span id="scheme">${scheme}</span>`);
+      `<span id="scheme"><span id="origin-scheme"><span id="site-scheme">` +
+          `${scheme}</span></span></span>`);
+  }
+  // If the URL has a hash value *and* a search string,
+  // the URL API (for hash) returns the hash and the search string.
+  if (search) {
+    urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(search,
+      `<span id="search">${search}</span>`);
+  }
+
+  // TODO: surprisingly complex to get this to work with other URL parts!
+  // if (username) {
+  //   const usernameRegExp = new RegExp(`${username}([@:])`);
+  //   urlPartsDiv.innerHTML = urlPartsDiv.innerHTML.replace(usernameRegExp,
+  //     `<span id="username">${username}</span>$1`);
+  // }
+};
diff --git a/src/site/content/en/third_party/demo/url-parts/js/psl.js b/src/site/content/en/third_party/demo/url-parts/js/psl.js
new file mode 100644
index 00000000000..ef3e4577960
--- /dev/null
+++ b/src/site/content/en/third_party/demo/url-parts/js/psl.js
@@ -0,0 +1 @@
+export default ['0.bg', '001www.com', '0e.vc', '0emm.com', '1.azurestaticapps.net', '1.bg', '123hjemmeside.dk', '123hjemmeside.no', '123homepage.it', '123kotisivu.fi', '123minsida.se', '123miweb.es', '123paginaweb.pt', '123sait.ru', '123siteweb.fr', '123webseite.at', '123webseite.de', '123website.be', '123website.ch', '123website.lu', '123website.nl', '12hp.at', '12hp.ch', '12hp.de', '1337.pictures', '16-b.it', '1kapp.com', '2.azurestaticapps.net', '2.bg', '2000.hu', '2038.io', '2ix.at', '2ix.ch', '2ix.de', '3.bg', '32-b.it', '3utilities.com', '4.bg', '4lima.at', '4lima.ch', '4lima.de', '4u.com', '5.bg', '5g.in', '6.bg', '611.to', '64-b.it', '6g.in', '7.bg', '8.bg', '9.bg', '9guacu.br', 'a.bg', 'a.prod.fastly.net', 'a.run.app', 'a.se', 'a.ssl.fastly.net', 'aa.no', 'aaa.pro', 'aarborte.no', 'ab.ca', 'abashiri.hokkaido.jp', 'abc.br', 'abeno.osaka.jp', 'abiko.chiba.jp', 'abira.hokkaido.jp', 'abkhazia.su', 'abo.pa', 'abr.it', 'abruzzo.it', 'abu.yamaguchi.jp', 'ac.ae', 'ac.at', 'ac.be', 'ac.ci', 'ac.cn', 'ac.cr', 'ac.cy', 'ac.fj', 'ac.gn', 'ac.gov.br', 'ac.id', 'ac.il', 'ac.im', 'ac.in', 'ac.ir', 'ac.jp', 'ac.ke', 'ac.kr', 'ac.leg.br', 'ac.lk', 'ac.ls', 'ac.ma', 'ac.me', 'ac.mu', 'ac.mw', 'ac.mz', 'ac.ni', 'ac.nz', 'ac.pa', 'ac.pr', 'ac.rs', 'ac.ru', 'ac.rw', 'ac.se', 'ac.sz', 'ac.th', 'ac.tj', 'ac.tz', 'ac.ug', 'ac.uk', 'ac.vn', 'ac.za', 'ac.zm', 'ac.zw', 'aca.pro', 'academia.bo', 'academy.museum', 'accesscam.org', 'accident-investigation.aero', 'accident-prevention.aero', 'acct.pro', 'achi.nagano.jp', 'act.au', 'act.edu.au', 'activetrail.biz', 'ad.jp', 'adachi.tokyo.jp', 'adimo.co.uk', 'adm.br', 'adobeaemcloud.com', 'adobeaemcloud.net', 'adult.ht', 'adv.br', 'adv.mz', 'advisor.ws', 'adygeya.ru', 'adygeya.su', 'ae.org', 'aejrie.no', 'aero.mv', 'aero.tt', 'aerobatic.aero', 'aeroclub.aero', 'aerodrome.aero', 'aeroport.fr', 'affinitylottery.org.uk', 'afjord.no', 'africa.bj', 'africa.com', 'ag.it', 'aga.niigata.jp', 'agano.niigata.jp', 'agdenes.no', 'agematsu.nagano.jp', 'agents.aero', 'agr.br', 'agrar.hu', 'agric.za', 'agriculture.museum', 'agrigento.it', 'agro.bj', 'agro.bo', 'agro.pl', 'aguni.okinawa.jp', 'ah.cn', 'ah.no', 'ai.in', 'aibetsu.hokkaido.jp', 'aichi.jp', 'aid.pl', 'aikawa.kanagawa.jp', 'ainan.ehime.jp', 'aioi.hyogo.jp', 'aip.ee', 'air-surveillance.aero', 'air-traffic-control.aero', 'air.museum', 'aircraft.aero', 'airguard.museum', 'airkitapps-au.com', 'airkitapps.com', 'airkitapps.eu', 'airline.aero', 'airport.aero', 'airtraffic.aero', 'aisai.aichi.jp', 'aisho.shiga.jp', 'aivencloud.com', 'aizubange.fukushima.jp', 'aizumi.tokushima.jp', 'aizumisato.fukushima.jp', 'aizuwakamatsu.fukushima.jp', 'aju.br', 'ak.us', 'akabira.hokkaido.jp', 'akagi.shimane.jp', 'akaiwa.okayama.jp', 'akashi.hyogo.jp', 'aki.kochi.jp', 'akiruno.tokyo.jp', 'akishima.tokyo.jp', 'akita.akita.jp', 'akita.jp', 'akkeshi.hokkaido.jp', 'aknoluokta.no', 'ako.hyogo.jp', 'akrehamn.no', 'aktyubinsk.su', 'akune.kagoshima.jp', 'al.eu.org', 'al.gov.br', 'al.it', 'al.leg.br', 'al.no', 'al.us', 'alabama.museum', 'alaheadju.no', 'aland.fi', 'alaska.museum', 'alces.network', 'alessandria.it', 'alesund.no', 'algard.no', 'alp1.ae.flow.ch', 'alpha-myqnapcloud.com', 'alpha.bounty-full.com', 'alstahaug.no', 'alt.za', 'alta.no', 'altervista.org', 'alto-adige.it', 'altoadige.it', 'alvdal.no', 'alwaysdata.net', 'am.br', 'am.gov.br', 'am.in', 'am.leg.br', 'ama.aichi.jp', 'ama.shimane.jp', 'amagasaki.hyogo.jp', 'amakusa.kumamoto.jp', 'amami.kagoshima.jp', 'amber.museum', 'ambulance.aero', 'ambulance.museum', 'american.museum', 'americana.museum', 'americanantiques.museum', 'americanart.museum', 'ami.ibaraki.jp', 'amli.no', 'amot.no', 'amscompute.com', 'amsterdam.museum', 'amusement.aero', 'an.it', 'anamizu.ishikawa.jp', 'anan.nagano.jp', 'anan.tokushima.jp', 'anani.br', 'ancona.it', 'and.museum', 'andasuolo.no', 'andebu.no', 'ando.nara.jp', 'andoy.no', 'andria-barletta-trani.it', 'andria-trani-barletta.it', 'andriabarlettatrani.it', 'andriatranibarletta.it', 'andøy.no', 'angry.jp', 'anjo.aichi.jp', 'ann-arbor.mi.us', 'annaka.gunma.jp', 'annefrank.museum', 'annexe-descriptifs', 'anpachi.gifu.jp', 'anthro.museum', 'anthropology.museum', 'antiques.museum', 'ao.it', 'aogaki.hyogo.jp', 'aogashima.tokyo.jp', 'aoki.nagano.jp', 'aomori.aomori.jp', 'aomori.jp', 'aosta-valley.it', 'aosta.it', 'aostavalley.it', 'aoste.it', 'ap-northeast-1.elasticbeanstalk.com', 'ap-northeast-2.elasticbeanstalk.com', 'ap-northeast-3.elasticbeanstalk.com', 'ap-south-1.elasticbeanstalk.com', 'ap-southeast-1.elasticbeanstalk.com', 'ap-southeast-2.elasticbeanstalk.com', 'ap.gov.br', 'ap.gov.pl', 'ap.it', 'ap.leg.br', 'aparecida.br', 'api.gov.uk', 'api.stdlib.com', 'apigee.io', 'app.banzaicloud.io', 'app.br', 'app.gp', 'app.lmpm.com', 'app.os.fedoraproject.org', 'app.os.stg.fedoraproject.org', 'app.render.com', 'appchizi.com', 'appengine.flow.ch', 'applinzi.com', 'apps.fbsbx.com', 'apps.lair.io', 'appspacehosted.com', 'appspaceusercontent.com', 'appspot.com', 'appudo.net', 'aq.it', 'aquarium.museum', 'aquila.it', 'ar.com', 'ar.it', 'ar.us', 'arai.shizuoka.jp', 'arakawa.saitama.jp', 'arakawa.tokyo.jp', 'arao.kumamoto.jp', 'arboretum.museum', 'archaeological.museum', 'archaeology.museum', 'architectes.bj', 'architecture.museum', 'ardal.no', 'aremark.no', 'arendal.no', 'arezzo.it', 'ariake.saga.jp', 'arida.wakayama.jp', 'aridagawa.wakayama.jp', 'arita.saga.jp', 'arkhangelsk.su', 'armenia.su', 'arna.no', 'arq.br', 'art.br', 'art.do', 'art.dz', 'art.ht', 'art.museum', 'art.pl', 'art.sn', 'artanddesign.museum', 'artcenter.museum', 'artdeco.museum', 'arte.bo', 'arteducation.museum', 'artgallery.museum', 'arts.co', 'arts.museum', 'arts.nf', 'arts.ro', 'arts.ve', 'artsandcrafts.museum', 'arvo.network', 'as.us', 'asago.hyogo.jp', 'asahi.chiba.jp', 'asahi.ibaraki.jp', 'asahi.mie.jp', 'asahi.nagano.jp', 'asahi.toyama.jp', 'asahi.yamagata.jp', 'asahikawa.hokkaido.jp', 'asaka.saitama.jp', 'asakawa.fukushima.jp', 'asakuchi.okayama.jp', 'asaminami.hiroshima.jp', 'ascoli-piceno.it', 'ascolipiceno.it', 'aseral.no', 'ashgabad.su', 'ashibetsu.hokkaido.jp', 'ashikaga.tochigi.jp', 'ashiya.fukuoka.jp', 'ashiya.hyogo.jp', 'ashoro.hokkaido.jp', 'asker.no', 'askim.no', 'askoy.no', 'askvoll.no', 'askøy.no', 'asmatart.museum', 'asn.au', 'asn.lv', 'asnes.no', 'aso.kumamoto.jp', 'ass.km', 'assabu.hokkaido.jp', 'assassination.museum', 'assisi.museum', 'assn.lk', 'asso.ci', 'asso.dz', 'asso.eu.org', 'asso.fr', 'asso.gp', 'asso.ht', 'asso.km', 'asso.mc', 'asso.nc', 'asso.re', 'association.aero', 'association.museum', 'assur.bj', 'asti.it', 'astronomy.museum', 'asuke.aichi.jp', 'at-band-camp.net', 'at.eu.org', 'at.it', 'at.md', 'at.vg', 'atami.shizuoka.jp', 'ath.cx', 'atl.jelastic.vps-host.net', 'atlanta.museum', 'atm.pl', 'ato.br', 'atsugi.kanagawa.jp', 'atsuma.hokkaido.jp', 'au.eu.org', 'audnedaln.no', 'augustow.pl', 'aukra.no', 'aure.no', 'aurland.no', 'aurskog-holand.no', 'aurskog-høland.no', 'aus.basketball', 'austevoll.no', 'austin.museum', 'australia.museum', 'austrheim.no', 'authgear-staging.com', 'authgearapps.com', 'author.aero', 'auto.pl', 'automotive.museum', 'av.it', 'av.tr', 'avellino.it', 'averoy.no', 'averøy.no', 'aviation.museum', 'avocat.fr', 'avocat.pro', 'avocats.bj', 'avoues.fr', 'awaji.hyogo.jp', 'awdev.ca', 'awsglobalaccelerator.com', 'awsmppl.com', 'axis.museum', 'aya.miyazaki.jp', 'ayabe.kyoto.jp', 'ayagawa.kagawa.jp', 'ayase.kanagawa.jp', 'az.us', 'azerbaijan.su', 'azimuth.network', 'azumino.nagano.jp', 'azure-mobile.net', 'azurecontainer.io', 'azurestaticapps.net', 'azurewebsites.net', 'aéroport.ci', 'b-data.io', 'b.bg', 'b.br', 'b.se', 'b.ssl.fastly.net', 'ba.gov.br', 'ba.it', 'ba.leg.br', 'babia-gora.pl', 'babyblue.jp', 'babymilk.jp', 'backdrop.jp', 'backplaneapp.io', 'backyards.banzaicloud.io', 'badaddja.no', 'badajoz.museum', 'baghdad.museum', 'bahcavuotna.no', 'bahccavuotna.no', 'bahn.museum', 'baidar.no', 'bajddar.no', 'balashov.su', 'balat.no', 'bale.museum', 'balena-devices.com', 'balestrand.no', 'ballangen.no', 'ballooning.aero', 'balsan-sudtirol.it', 'balsan-suedtirol.it', 'balsan-südtirol.it', 'balsan.it', 'balsfjord.no', 'baltimore.museum', 'bambina.jp', 'bamble.no', 'bandai.fukushima.jp', 'bando.ibaraki.jp', 'banzai.cloud', 'bar.pro', 'bar0.net', 'bar1.net', 'bar2.net', 'barcelona.museum', 'bardu.no', 'bari.it', 'barletta-trani-andria.it', 'barlettatraniandria.it', 'barrel-of-knowledge.info', 'barrell-of-knowledge.info', 'barsy.bg', 'barsy.ca', 'barsy.club', 'barsy.co.uk', 'barsy.de', 'barsy.eu', 'barsy.in', 'barsy.info', 'barsy.io', 'barsy.me', 'barsy.menu', 'barsy.mobi', 'barsy.net', 'barsy.online', 'barsy.org', 'barsy.pro', 'barsy.pub', 'barsy.ro', 'barsy.shop', 'barsy.site', 'barsy.support', 'barsy.uk', 'barsycenter.com', 'barsyonline.co.uk', 'barsyonline.com', 'barueri.br', 'barum.no', 'bas.it', 'base.ec', 'base.shop', 'baseball.museum', 'basel.museum', 'bashkiria.ru', 'bashkiria.su', 'basicserver.io', 'basilicata.it', 'baths.museum', 'bato.tochigi.jp', 'batsfjord.no', 'bauern.museum', 'bbs.tr', 'bc.ca', 'bc.platform.sh', 'bci.dnstrace.pro', 'bd.se', 'be.ax', 'be.eu.org', 'be.gy', 'beagleboard.io', 'bearalvahki.no', 'bearalváhki.no', 'beardu.no', 'beauxarts.museum', 'bedzin.pl', 'beeldengeluid.museum', 'beep.pl', 'beget.app', 'beiarn.no', 'bel.tr', 'belau.pw', 'belem.br', 'bellevue.museum', 'belluno.it', 'benevento.it', 'beppu.oita.jp', 'berg.no', 'bergamo.it', 'bergbau.museum', 'bergen.no', 'berkeley.museum', 'berlevag.no', 'berlevåg.no', 'berlin.museum', 'bern.museum', 'beskidy.pl', 'bet.ar', 'beta.bounty-full.com', 'beta.tailscale.net', 'betainabox.com', 'better-than.tv', 'bg.eu.org', 'bg.it', 'bhz.br', 'bi.it', 'bialowieza.pl', 'bialystok.pl', 'bib.br', 'bib.ve', 'bibai.hokkaido.jp', 'bible.museum', 'biei.hokkaido.jp', 'bielawa.pl', 'biella.it', 'bieszczady.pl', 'bievat.no', 'bievát.no', 'bifuka.hokkaido.jp', 'bihar.in', 'bihoro.hokkaido.jp', 'bilbao.museum', 'bill.museum', 'bindal.no', 'bio.br', 'bip.sh', 'bir.ru', 'biratori.hokkaido.jp', 'birdart.museum', 'birkenes.no', 'birthplace.museum', 'bitbridge.net', 'bitbucket.io', 'bitter.jp', 'biz.at', 'biz.az', 'biz.bb', 'biz.cy', 'biz.dk', 'biz.et', 'biz.fj', 'biz.gl', 'biz.id', 'biz.in', 'biz.ki', 'biz.ls', 'biz.mv', 'biz.mw', 'biz.my', 'biz.ni', 'biz.nr', 'biz.pk', 'biz.pl', 'biz.pr', 'biz.ss', 'biz.tj', 'biz.tr', 'biz.tt', 'biz.ua', 'biz.vn', 'biz.wf', 'biz.zm', 'bizen.okayama.jp', 'bj.cn', 'bjarkoy.no', 'bjarkøy.no', 'bjerkreim.no', 'bjugn.no', 'bl.it', 'blackbaudcdn.net', 'blog.bo', 'blog.br', 'blog.gt', 'blog.kg', 'blog.vu', 'blogdns.com', 'blogdns.net', 'blogdns.org', 'blogsite.org', 'blogsite.xyz', 'blogspot.ae', 'blogspot.al', 'blogspot.am', 'blogspot.ba', 'blogspot.be', 'blogspot.bg', 'blogspot.bj', 'blogspot.ca', 'blogspot.cf', 'blogspot.ch', 'blogspot.cl', 'blogspot.co.at', 'blogspot.co.id', 'blogspot.co.il', 'blogspot.co.ke', 'blogspot.co.nz', 'blogspot.co.uk', 'blogspot.co.za', 'blogspot.com', 'blogspot.com.ar', 'blogspot.com.au', 'blogspot.com.br', 'blogspot.com.by', 'blogspot.com.co', 'blogspot.com.cy', 'blogspot.com.ee', 'blogspot.com.eg', 'blogspot.com.es', 'blogspot.com.mt', 'blogspot.com.ng', 'blogspot.com.tr', 'blogspot.com.uy', 'blogspot.cv', 'blogspot.cz', 'blogspot.de', 'blogspot.dk', 'blogspot.fi', 'blogspot.fr', 'blogspot.gr', 'blogspot.hk', 'blogspot.hr', 'blogspot.hu', 'blogspot.ie', 'blogspot.in', 'blogspot.is', 'blogspot.it', 'blogspot.jp', 'blogspot.kr', 'blogspot.li', 'blogspot.lt', 'blogspot.lu', 'blogspot.md', 'blogspot.mk', 'blogspot.mr', 'blogspot.mx', 'blogspot.my', 'blogspot.nl', 'blogspot.no', 'blogspot.pe', 'blogspot.pt', 'blogspot.qa', 'blogspot.re', 'blogspot.ro', 'blogspot.rs', 'blogspot.ru', 'blogspot.se', 'blogspot.sg', 'blogspot.si', 'blogspot.sk', 'blogspot.sn', 'blogspot.td', 'blogspot.tw', 'blogspot.ug', 'blogspot.vn', 'blogsyte.com', 'bloxcms.com', 'bluebite.io', 'blush.jp', 'bmd.br', 'bmoattachments.org', 'bn.it', 'bnr.la', 'bo.it', 'bo.nordland.no', 'bo.telemark.no', 'boavista.br', 'bodo.no', 'bodø.no', 'bokn.no', 'boldlygoingnowhere.org', 'boleslawiec.pl', 'bolivia.bo', 'bologna.it', 'bolt.hu', 'bolzano-altoadige.it', 'bolzano.it', 'bomlo.no', 'bonn.museum', 'boo.jp', 'bookonline.app', 'boomla.net', 'boston.museum', 'botanical.museum', 'botanicalgarden.museum', 'botanicgarden.museum', 'botany.museum', 'bounceme.net', 'bounty-full.com', 'boutir.com', 'boxfuse.io', 'boy.jp', 'boyfriend.jp', 'bozen-sudtirol.it', 'bozen-suedtirol.it', 'bozen-südtirol.it', 'bozen.it', 'bplaced.com', 'bplaced.de', 'bplaced.net', 'br.com', 'br.it', 'brand.se', 'brandywinevalley.museum', 'brasil.museum', 'brasilia.me', 'bremanger.no', 'brescia.it', 'brindisi.it', 'bristol.museum', 'british.museum', 'britishcolumbia.museum', 'broadcast.museum', 'broke-it.net', 'broker.aero', 'bronnoy.no', 'bronnoysund.no', 'browsersafetymark.io', 'brumunddal.no', 'brunel.museum', 'brussel.museum', 'brussels.museum', 'bruxelles.museum', 'bryansk.su', 'bryne.no', 'brønnøy.no', 'brønnøysund.no', 'bs.it', 'bsb.br', 'bss.design', 'bt.it', 'bu.no', 'budejju.no', 'build.run', 'builder.code.com', 'building.museum', 'builtwithdark.com', 'bukhara.su', 'bulsan-sudtirol.it', 'bulsan-suedtirol.it', 'bulsan-südtirol.it', 'bulsan.it', 'bungoono.oita.jp', 'bungotakada.oita.jp', 'bunkyo.tokyo.jp', 'burghof.museum', 'bus.museum', 'busan.kr', 'bushey.museum', 'business.in', 'but.jp', 'buyshop.jp', 'buyshouses.net', 'buzen.fukuoka.jp', 'bydgoszcz.pl', 'byen.site', 'bygland.no', 'bykle.no', 'bytom.pl', 'bz.it', 'bzz.dapps.earth', 'báhcavuotna.no', 'báhccavuotna.no', 'báidár.no', 'bájddar.no', 'bálát.no', 'bådåddjå.no', 'båtsfjord.no', 'bærum.no', 'bø.nordland.no', 'bø.telemark.no', 'bømlo.no', 'c.bg', 'c.cdn77.org', 'c.la', 'c.se', 'c66.me', 'ca-central-1.elasticbeanstalk.com', 'ca.eu.org', 'ca.in', 'ca.it', 'ca.na', 'ca.reclaim.cloud', 'ca.us', 'caa.aero', 'caa.li', 'cable-modem.org', 'cadaques.museum', 'cafjs.com', 'cagliari.it', 'cahcesuolo.no', 'cal.it', 'calabria.it', 'california.museum', 'caltanissetta.it', 'cam.it', 'cambridge.museum', 'camdvr.org', 'campaign.gov.uk', 'campania.it', 'campidano-medio.it', 'campidanomedio.it', 'campinagrande.br', 'campinas.br', 'campobasso.it', 'can.museum', 'canada.museum', 'candypop.jp', 'capebreton.museum', 'capoo.jp', 'caracal.mythic-beasts.com', 'carbonia-iglesias.it', 'carboniaiglesias.it', 'cargo.aero', 'carrara-massa.it', 'carraramassa.it', 'carrd.co', 'carrier.museum', 'cartoonart.museum', 'casacam.net', 'casadelamoneda.museum', 'caserta.it', 'casino.hu', 'castle.museum', 'castres.museum', 'cat.ax', 'catania.it', 'catanzaro.it', 'catering.aero', 'catfood.jp', 'catholic.edu.au', 'caxias.br', 'cb.it', 'cbg.ru', 'cc.ak.us', 'cc.al.us', 'cc.ar.us', 'cc.as.us', 'cc.az.us', 'cc.ca.us', 'cc.co.us', 'cc.ct.us', 'cc.dc.us', 'cc.de.us', 'cc.fl.us', 'cc.ga.us', 'cc.gu.us', 'cc.hi.us', 'cc.hn', 'cc.ia.us', 'cc.id.us', 'cc.il.us', 'cc.in.us', 'cc.ks.us', 'cc.ky.us', 'cc.la.us', 'cc.ma.us', 'cc.md.us', 'cc.me.us', 'cc.mi.us', 'cc.mn.us', 'cc.mo.us', 'cc.ms.us', 'cc.mt.us', 'cc.na', 'cc.nc.us', 'cc.nd.us', 'cc.ne.us', 'cc.nh.us', 'cc.nj.us', 'cc.nm.us', 'cc.nv.us', 'cc.ny.us', 'cc.oh.us', 'cc.ok.us', 'cc.or.us', 'cc.pa.us', 'cc.pr.us', 'cc.ri.us', 'cc.sc.us', 'cc.sd.us', 'cc.tn.us', 'cc.tx.us', 'cc.ua', 'cc.ut.us', 'cc.va.us', 'cc.vi.us', 'cc.vt.us', 'cc.wa.us', 'cc.wi.us', 'cc.wv.us', 'cc.wy.us', 'cci.fr', 'cd.eu.org', 'cdn-edges.net', 'cdn.prod.atlassian-dev.net', 'cdn77-ssl.net', 'ce.gov.br', 'ce.it', 'ce.leg.br', 'cechire.com', 'celtic.museum', 'center.museum', 'centralus.azurestaticapps.net', 'certification.aero', 'certmgr.org', 'cesena-forli.it', 'cesena-forlì.it', 'cesenaforli.it', 'cesenaforlì.it', 'cf-ipfs.com', 'ch.eu.org', 'ch.it', 'ch.tc', 'ch.trendhosting.cloud', 'chambagri.fr', 'championship.aero', 'channelsdvr.net', 'charter.aero', 'chattanooga.museum', 'cheap.jp', 'cheltenham.museum', 'cherkassy.ua', 'cherkasy.ua', 'chernigov.ua', 'chernihiv.ua', 'chernivtsi.ua', 'chernovtsy.ua', 'chesapeakebay.museum', 'chiba.jp', 'chicago.museum', 'chicappa.jp', 'chichibu.saitama.jp', 'chieti.it', 'chigasaki.kanagawa.jp', 'chihayaakasaka.osaka.jp', 'chijiwa.nagasaki.jp', 'chikugo.fukuoka.jp', 'chikuho.fukuoka.jp', 'chikuhoku.nagano.jp', 'chikujo.fukuoka.jp', 'chikuma.nagano.jp', 'chikusei.ibaraki.jp', 'chikushino.fukuoka.jp', 'chikuzen.fukuoka.jp', 'children.museum', 'childrens.museum', 'childrensgarden.museum', 'chillout.jp', 'chimkent.su', 'chino.nagano.jp', 'chippubetsu.hokkaido.jp', 'chips.jp', 'chiropractic.museum', 'chirurgiens-dentistes-en-france.fr', 'chirurgiens-dentistes.fr', 'chiryu.aichi.jp', 'chita.aichi.jp', 'chitose.hokkaido.jp', 'chiyoda.gunma.jp', 'chiyoda.tokyo.jp', 'chizu.tottori.jp', 'chocolate.museum', 'chofu.tokyo.jp', 'chonan.chiba.jp', 'chosei.chiba.jp', 'choshi.chiba.jp', 'chowder.jp', 'choyo.kumamoto.jp', 'christiansburg.museum', 'chtr.k12.ma.us', 'chu.jp', 'chungbuk.kr', 'chungnam.kr', 'chuo.chiba.jp', 'chuo.fukuoka.jp', 'chuo.osaka.jp', 'chuo.tokyo.jp', 'chuo.yamanashi.jp', 'ci.it', 'ciao.jp', 'ciencia.bo', 'cieszyn.pl', 'cim.br', 'cincinnati.museum', 'cinema.museum', 'circus.museum', 'ciscofreak.com', 'cistron.nl', 'city.hu', 'civilaviation.aero', 'civilisation.museum', 'civilization.museum', 'civilwar.museum', 'ck.ua', 'cl.it', 'clan.rip', 'clerk.app', 'clerkstage.app', 'cleverapps.io', 'clicketcloud.com', 'clickrising.net', 'clinton.museum', 'clock.museum', 'cloud-fr1.unispace.io', 'cloud.fedoraproject.org', 'cloud.goog', 'cloud.interhostsolutions.be', 'cloud.jelastic.open.tim.it', 'cloud.metacentrum.cz', 'cloud.nospamproxy.com', 'cloud66.ws', 'cloud66.zone', 'cloudaccess.host', 'cloudaccess.net', 'cloudapp.net', 'cloudapps.digital', 'cloudcontrolapp.com', 'cloudcontrolled.com', 'cloudera.site', 'cloudflare-ipfs.com', 'cloudfront.net', 'cloudfunctions.net', 'cloudjiffy.net', 'cloudns.asia', 'cloudns.biz', 'cloudns.cc', 'cloudns.club', 'cloudns.eu', 'cloudns.in', 'cloudns.info', 'cloudns.org', 'cloudns.pro', 'cloudns.pw', 'cloudns.us', 'cloudsite.builders', 'cloudycluster.net', 'club.aero', 'club.tw', 'cn-north-1.eb.amazonaws.com.cn', 'cn-northwest-1.eb.amazonaws.com.cn', 'cn.com', 'cn.eu.org', 'cn.in', 'cn.it', 'cn.ua', 'cn.vu', 'cng.br', 'cnpy.gdn', 'cns.joyent.com', 'cnt.br', 'co.ae', 'co.ag', 'co.am', 'co.ao', 'co.at', 'co.bb', 'co.bi', 'co.bj', 'co.bn', 'co.business', 'co.bw', 'co.ca', 'co.ci', 'co.cl', 'co.cm', 'co.com', 'co.cr', 'co.cz', 'co.dk', 'co.education', 'co.events', 'co.financial', 'co.gg', 'co.gl', 'co.gy', 'co.hu', 'co.id', 'co.il', 'co.im', 'co.in', 'co.ir', 'co.it', 'co.je', 'co.jp', 'co.ke', 'co.kr', 'co.krd', 'co.lc', 'co.ls', 'co.ma', 'co.me', 'co.mg', 'co.mu', 'co.mw', 'co.mz', 'co.na', 'co.network', 'co.ni', 'co.nl', 'co.no', 'co.nz', 'co.om', 'co.pl', 'co.place', 'co.pn', 'co.pw', 'co.ro', 'co.rs', 'co.rw', 'co.st', 'co.sz', 'co.technology', 'co.th', 'co.tj', 'co.tm', 'co.tt', 'co.tz', 'co.ua', 'co.ug', 'co.uk', 'co.us', 'co.uz', 'co.ve', 'co.vi', 'co.za', 'co.zm', 'co.zw', 'coal.museum', 'coastaldefence.museum', 'cocotte.jp', 'code.run', 'codeberg.page', 'codespot.com', 'cody.museum', 'cog.mi.us', 'col.ng', 'coldwar.museum', 'collection.museum', 'collegefan.org', 'colonialwilliamsburg.museum', 'coloradoplateau.museum', 'columbia.museum', 'columbus.museum', 'com.ac', 'com.af', 'com.ag', 'com.ai', 'com.al', 'com.am', 'com.ar', 'com.au', 'com.aw', 'com.az', 'com.ba', 'com.bb', 'com.bh', 'com.bi', 'com.bj', 'com.bm', 'com.bn', 'com.bo', 'com.br', 'com.bs', 'com.bt', 'com.by', 'com.bz', 'com.ci', 'com.cm', 'com.cn', 'com.co', 'com.cu', 'com.cv', 'com.cw', 'com.cy', 'com.de', 'com.dm', 'com.do', 'com.dz', 'com.ec', 'com.ee', 'com.eg', 'com.es', 'com.et', 'com.fj', 'com.fm', 'com.fr', 'com.ge', 'com.gh', 'com.gi', 'com.gl', 'com.gn', 'com.gp', 'com.gr', 'com.gt', 'com.gu', 'com.gy', 'com.hk', 'com.hn', 'com.hr', 'com.ht', 'com.im', 'com.in', 'com.io', 'com.iq', 'com.is', 'com.jo', 'com.kg', 'com.ki', 'com.km', 'com.kp', 'com.kw', 'com.ky', 'com.kz', 'com.la', 'com.lb', 'com.lc', 'com.lk', 'com.lr', 'com.lv', 'com.ly', 'com.mg', 'com.mk', 'com.ml', 'com.mo', 'com.ms', 'com.mt', 'com.mu', 'com.mv', 'com.mw', 'com.mx', 'com.my', 'com.na', 'com.nf', 'com.ng', 'com.ni', 'com.nr', 'com.om', 'com.pa', 'com.pe', 'com.pf', 'com.ph', 'com.pk', 'com.pl', 'com.pr', 'com.ps', 'com.pt', 'com.py', 'com.qa', 'com.re', 'com.ro', 'com.ru', 'com.sa', 'com.sb', 'com.sc', 'com.sd', 'com.se', 'com.sg', 'com.sh', 'com.sl', 'com.sn', 'com.so', 'com.ss', 'com.st', 'com.sv', 'com.sy', 'com.tj', 'com.tm', 'com.tn', 'com.to', 'com.tr', 'com.tt', 'com.tw', 'com.ua', 'com.ug', 'com.uy', 'com.uz', 'com.vc', 'com.ve', 'com.vi', 'com.vn', 'com.vu', 'com.ws', 'com.ye', 'com.zm', 'commune.am', 'communication.museum', 'communications.museum', 'community-pro.de', 'community-pro.net', 'community.museum', 'como.it', 'compute-1.amazonaws.com', 'compute.amazonaws.com', 'compute.amazonaws.com.cn', 'compute.estate', 'computer.museum', 'computerhistory.museum', 'comunicações.museum', 'conf.au', 'conf.lv', 'conf.se', 'conference.aero', 'conn.uk', 'consulado.st', 'consultant.aero', 'consulting.aero', 'contagem.br', 'contemporary.museum', 'contemporaryart.museum', 'control.aero', 'convent.museum', 'coolblog.jp', 'coop.ar', 'coop.br', 'coop.ht', 'coop.in', 'coop.km', 'coop.mv', 'coop.mw', 'coop.py', 'coop.rw', 'coop.tt', 'cooperativa.bo', 'copenhagen.museum', 'copro.uk', 'corporation.museum', 'correios-e-telecomunicações.museum', 'corvette.museum', 'cosenza.it', 'costume.museum', 'couchpotatofries.org', 'council.aero', 'countryestate.museum', 'county.museum', 'coz.br', 'cpa.pro', 'cq.cn', 'cr.it', 'cr.ua', 'crafting.xyz', 'crafts.museum', 'cranbrook.museum', 'cranky.jp', 'crd.co', 'creation.museum', 'cremona.it', 'crew.aero', 'cri.br', 'cri.nz', 'crimea.ua', 'crotone.it', 'cryptonomic.net', 'cs.in', 'cs.it', 'cs.keliweb.cloud', 'csx.cc', 'ct.it', 'ct.us', 'cuiaba.br', 'cultural.museum', 'culturalcenter.museum', 'culture.museum', 'cuneo.it', 'cupcake.is', 'curitiba.br', 'curv.dev', 'cust.dev.thingdust.io', 'cust.disrec.thingdust.io', 'cust.prod.thingdust.io', 'cust.retrosnub.co.uk', 'cust.testing.thingdust.io', 'custom.metacentrum.cz', 'customer-oci.com', 'customer.mythic-beasts.com', 'customer.speedpartner.de', 'cutegirl.jp', 'cv.ua', 'cx.ua', 'cy.eu.org', 'cya.gg', 'cyber.museum', 'cymru.museum', 'cyon.link', 'cyon.site', 'cz.eu.org', 'cz.it', 'czeladz.pl', 'czest.pl', 'd.bg', 'd.gv.vc', 'd.se', 'daa.jp', 'daegu.kr', 'daejeon.kr', 'daemon.panel.gg', 'dagestan.ru', 'dagestan.su', 'daigo.ibaraki.jp', 'daisen.akita.jp', 'daito.osaka.jp', 'daiwa.hiroshima.jp', 'dali.museum', 'dallas.museum', 'damnserver.com', 'daplie.me', 'dapps.earth', 'database.museum', 'database.run', 'date.fukushima.jp', 'date.hokkaido.jp', 'dattolocal.com', 'dattolocal.net', 'dattorelay.com', 'dattoweb.com', 'davvenjarga.no', 'davvenjárga.no', 'davvesiida.no', 'dazaifu.fukuoka.jp', 'dc.us', 'dd-dns.de', 'ddns.me', 'ddns.net', 'ddns5.com', 'ddnsfree.com', 'ddnsgeek.com', 'ddnsking.com', 'ddnslive.com', 'ddnss.de', 'ddnss.org', 'ddr.museum', 'de.com', 'de.cool', 'de.eu.org', 'de.gt', 'de.ls', 'de.md', 'de.trendhosting.cloud', 'de.us', 'deatnu.no', 'debian.net', 'deca.jp', 'deci.jp', 'decorativearts.museum', 'dedibox.fr', 'dedyn.io', 'def.br', 'definima.io', 'definima.net', 'delaware.museum', 'delhi.in', 'dell-ogliastra.it', 'dellogliastra.it', 'delmenhorst.museum', 'demo.datacenter.fi', 'demo.datadetect.com', 'demo.jelastic.com', 'democracia.bo', 'demon.nl', 'denmark.museum', 'deno-staging.dev', 'deno.dev', 'dep.no', 'deporte.bo', 'depot.museum', 'des.br', 'desa.id', 'design.aero', 'design.museum', 'det.br', 'deta.app', 'deta.dev', 'detroit.museum', 'dev-builder.code.com', 'dev-myqnapcloud.com', 'dev.adobeaemcloud.com', 'dev.br', 'dev.static.land', 'dev.vu', 'devcdnaccesso.com', 'developer.app', 'development.run', 'devices.resinstaging.io', 'df.gov.br', 'df.leg.br', 'dgca.aero', 'dh.bytemark.co.uk', 'diadem.cloud', 'dielddanuorri.no', 'digick.jp', 'digitaloceanspaces.com', 'diher.solutions', 'dinosaur.museum', 'direct.quickconnect.cn', 'direct.quickconnect.to', 'discordsays.com', 'discordsez.com', 'discourse.group', 'discourse.team', 'discovery.museum', 'diskstation.eu', 'diskstation.me', 'diskstation.org', 'diskussionsbereich.de', 'ditchyourip.com', 'divtasvuodna.no', 'divttasvuotna.no', 'dk.eu.org', 'dlugoleka.pl', 'dn.ua', 'dnepropetrovsk.ua', 'dni.us', 'dnipropetrovsk.ua', 'dnsalias.com', 'dnsalias.net', 'dnsalias.org', 'dnsdojo.com', 'dnsdojo.net', 'dnsdojo.org', 'dnsfor.me', 'dnshome.de', 'dnsiskinky.com', 'dnsking.ch', 'dnsup.net', 'dnsupdate.info', 'dnsupdater.de', 'does-it.net', 'doesntexist.com', 'doesntexist.org', 'dolls.museum', 'domainregistration.jsp', 'donetsk.ua', 'donna.no', 'donostia.museum', 'dontexist.com', 'dontexist.net', 'dontexist.org', 'doomdns.com', 'doomdns.org', 'dopaas.com', 'doshi.yamanashi.jp', 'dovre.no', 'dp.ua', 'dr.in', 'dr.na', 'dr.tr', 'drammen.no', 'drangedal.no', 'dray-dns.de', 'drayddns.com', 'draydns.de', 'dreamhosters.com', 'drobak.no', 'drr.ac', 'drud.io', 'drud.us', 'drøbak.no', 'dscloud.biz', 'dscloud.me', 'dscloud.mobi', 'dsmynas.com', 'dsmynas.net', 'dsmynas.org', 'dst.mi.us', 'duckdns.org', 'durham.museum', 'dvrcam.info', 'dvrdns.org', 'dweb.link', 'dy.fi', 'dyn-berlin.de', 'dyn-ip24.de', 'dyn-o-saur.com', 'dyn-vpn.de', 'dyn.cosidns.de', 'dyn.ddnss.de', 'dyn.home-webserver.de', 'dyn53.io', 'dynalias.com', 'dynalias.net', 'dynalias.org', 'dynamic-dns.info', 'dynamisches-dns.de', 'dynathome.net', 'dyndns-at-home.com', 'dyndns-at-work.com', 'dyndns-blog.com', 'dyndns-free.com', 'dyndns-home.com', 'dyndns-ip.com', 'dyndns-mail.com', 'dyndns-office.com', 'dyndns-pics.com', 'dyndns-remote.com', 'dyndns-server.com', 'dyndns-web.com', 'dyndns-wiki.com', 'dyndns-work.com', 'dyndns.biz', 'dyndns.dappnode.io', 'dyndns.ddnss.de', 'dyndns.info', 'dyndns.org', 'dyndns.tv', 'dyndns.ws', 'dyndns1.de', 'dynns.com', 'dynserv.org', 'dynu.net', 'dynv6.net', 'dynvpn.de', 'dyroy.no', 'dyrøy.no', 'dønna.no', 'e.bg', 'e.se', 'e12.ve', 'e164.arpa', 'e4.cz', 'east-kazakhstan.su', 'eastafrica.museum', 'eastasia.azurestaticapps.net', 'eastcoast.museum', 'eastus2.azurestaticapps.net', 'easypanel.app', 'easypanel.host', 'eating-organic.net', 'eaton.mi.us', 'ebetsu.hokkaido.jp', 'ebina.kanagawa.jp', 'ebino.miyazaki.jp', 'ebiz.tw', 'echizen.fukui.jp', 'ecn.br', 'eco.bj', 'eco.br', 'ecologia.bo', 'ecommerce-shop.pl', 'econo.bj', 'economia.bo', 'ed.ao', 'ed.ci', 'ed.cr', 'ed.jp', 'ed.pw', 'edgeapp.net', 'edgecompute.app', 'edgestack.me', 'editorx.io', 'edogawa.tokyo.jp', 'edu.ac', 'edu.af', 'edu.al', 'edu.ar', 'edu.au', 'edu.az', 'edu.ba', 'edu.bb', 'edu.bh', 'edu.bi', 'edu.bj', 'edu.bm', 'edu.bn', 'edu.bo', 'edu.br', 'edu.bs', 'edu.bt', 'edu.bz', 'edu.ci', 'edu.cn', 'edu.co', 'edu.cu', 'edu.cv', 'edu.cw', 'edu.dm', 'edu.do', 'edu.dz', 'edu.ec', 'edu.ee', 'edu.eg', 'edu.es', 'edu.et', 'edu.eu.org', 'edu.fm', 'edu.gd', 'edu.ge', 'edu.gh', 'edu.gi', 'edu.gl', 'edu.gn', 'edu.gp', 'edu.gr', 'edu.gt', 'edu.gu', 'edu.gy', 'edu.hk', 'edu.hn', 'edu.ht', 'edu.in', 'edu.iq', 'edu.is', 'edu.it', 'edu.jo', 'edu.kg', 'edu.ki', 'edu.km', 'edu.kn', 'edu.kp', 'edu.krd', 'edu.kw', 'edu.ky', 'edu.kz', 'edu.la', 'edu.lb', 'edu.lc', 'edu.lk', 'edu.lr', 'edu.ls', 'edu.lv', 'edu.ly', 'edu.me', 'edu.mg', 'edu.mk', 'edu.ml', 'edu.mn', 'edu.mo', 'edu.ms', 'edu.mt', 'edu.mv', 'edu.mw', 'edu.mx', 'edu.my', 'edu.mz', 'edu.ng', 'edu.ni', 'edu.nr', 'edu.om', 'edu.pa', 'edu.pe', 'edu.pf', 'edu.ph', 'edu.pk', 'edu.pl', 'edu.pn', 'edu.pr', 'edu.ps', 'edu.pt', 'edu.py', 'edu.qa', 'edu.rs', 'edu.ru', 'edu.sa', 'edu.sb', 'edu.sc', 'edu.scot', 'edu.sd', 'edu.sg', 'edu.sl', 'edu.sn', 'edu.so', 'edu.ss', 'edu.st', 'edu.sv', 'edu.sy', 'edu.tj', 'edu.tm', 'edu.to', 'edu.tr', 'edu.tt', 'edu.tw', 'edu.ua', 'edu.uy', 'edu.vc', 'edu.ve', 'edu.vn', 'edu.vu', 'edu.ws', 'edu.ye', 'edu.za', 'edu.zm', 'education.museum', 'educational.museum', 'educator.aero', 'edugit.io', 'ee.eu.org', 'eero-stage.online', 'eero.online', 'egersund.no', 'egoism.jp', 'egyptian.museum', 'ehime.jp', 'eid.no', 'eidfjord.no', 'eidsberg.no', 'eidskog.no', 'eidsvoll.no', 'eigersund.no', 'eiheiji.fukui.jp', 'eisenbahn.museum', 'ekloges.cy', 'elasticbeanstalk.com', 'elb.amazonaws.com', 'elb.amazonaws.com.cn', 'elblag.pl', 'elburg.museum', 'elementor.cloud', 'elementor.cool', 'elk.pl', 'elvendrell.museum', 'elverum.no', 'emb.kw', 'embaixada.st', 'embetsu.hokkaido.jp', 'embroidery.museum', 'emergency.aero', 'emilia-romagna.it', 'emiliaromagna.it', 'emp.br', 'empresa.bo', 'emr.it', 'en-root.fr', 'en.it', 'ena.gifu.jp', 'encoreapi.com', 'encr.app', 'encyclopedic.museum', 'endofinternet.net', 'endofinternet.org', 'endoftheinternet.org', 'enebakk.no', 'enf.br', 'eng.br', 'eng.pro', 'engerdal.no', 'engine.aero', 'engineer.aero', 'england.museum', 'eniwa.hokkaido.jp', 'enna.it', 'ens.tn', 'enscaled.sg', 'ent.platform.sh', 'enterprisecloud.nu', 'entertainment.aero', 'entomology.museum', 'environment.museum', 'environmentalconservation.museum', 'epilepsy.museum', 'equipment.aero', 'er.in', 'erimo.hokkaido.jp', 'erotica.hu', 'erotika.hu', 'es-1.axarnet.cloud', 'es.ax', 'es.eu.org', 'es.gov.br', 'es.kr', 'es.leg.br', 'esan.hokkaido.jp', 'esashi.hokkaido.jp', 'esp.br', 'essex.museum', 'est-a-la-maison.com', 'est-a-la-masion.com', 'est-le-patron.com', 'est-mon-blogueur.com', 'est.pr', 'estate.museum', 'etajima.hiroshima.jp', 'etc.br', 'ethnology.museum', 'eti.br', 'etne.no', 'etnedal.no', 'eu-1.evennode.com', 'eu-2.evennode.com', 'eu-3.evennode.com', 'eu-4.evennode.com', 'eu-central-1.elasticbeanstalk.com', 'eu-west-1.elasticbeanstalk.com', 'eu-west-2.elasticbeanstalk.com', 'eu-west-3.elasticbeanstalk.com', 'eu.ax', 'eu.com', 'eu.encoway.cloud', 'eu.int', 'eu.meteorapp.com', 'eu.org', 'eu.platform.sh', 'eu.pythonanywhere.com', 'eun.eg', 'eurodir.ru', 'evenassi.no', 'evenes.no', 'evenášši.no', 'evje-og-hornnes.no', 'ex.futurecms.at', 'ex.ortsinfo.at', 'exchange.aero', 'exeter.museum', 'exhibition.museum', 'exists.', 'exnet.su', 'experts-comptables.fr', 'express.aero', 'ezproxy.kuleuven.be', 'f.bg', 'f.se', 'fakefur.jp', 'fam.pk', 'family.museum', 'familyds.com', 'familyds.net', 'familyds.org', 'fantasyleague.cc', 'far.br', 'farm.museum', 'farmequipment.museum', 'farmers.museum', 'farmstead.museum', 'farsund.no', 'fashionstore.jp', 'fastly-terrarium.com', 'fastlylb.net', 'faststacks.net', 'fastvps-server.com', 'fastvps.host', 'fastvps.site', 'fauske.no', 'fbx-os.fr', 'fbxos.fr', 'fc.it', 'fe.it', 'fed.us', 'federation.aero', 'fedje.no', 'fedorainfracloud.org', 'fedorapeople.org', 'feira.br', 'fem.jp', 'fentiger.mythic-beasts.com', 'fermo.it', 'ferrara.it', 'feste-ip.net', 'fet.no', 'fetsund.no', 'fg.it', 'fh-muenster.io', 'fh.se', 'fhs.no', 'fhsk.se', 'fhv.se', 'fi.cloudplatform.fi', 'fi.cr', 'fi.eu.org', 'fi.it', 'fie.ee', 'field.museum', 'figueres.museum', 'filatelia.museum', 'filegear-au.me', 'filegear-de.me', 'filegear-gb.me', 'filegear-ie.me', 'filegear-jp.me', 'filegear-sg.me', 'filegear.me', 'film.hu', 'film.museum', 'fin.ci', 'fin.ec', 'fin.tn', 'fineart.museum', 'finearts.museum', 'finland.museum', 'finnoy.no', 'finnøy.no', 'firebaseapp.com', 'firenet.ch', 'firenze.it', 'firewall-gateway.com', 'firewall-gateway.de', 'firewall-gateway.net', 'firewalledreplit.co', 'fireweb.app', 'firm.co', 'firm.dk', 'firm.ht', 'firm.in', 'firm.nf', 'firm.ng', 'firm.ro', 'firm.ve', 'fitjar.no', 'fj.cn', 'fjaler.no', 'fjell.no', 'fl.us', 'fla.no', 'flakstad.no', 'flanders.museum', 'flap.id', 'flatanger.no', 'fldrv.com', 'flekkefjord.no', 'flesberg.no', 'flier.jp', 'flight.aero', 'flog.br', 'floppy.jp', 'flora.no', 'florence.it', 'florida.museum', 'floripa.br', 'floro.no', 'florø.no', 'flt.cloud.muni.cz', 'fly.dev', 'flynnhosting.net', 'flå.no', 'fm.br', 'fm.it', 'fm.no', 'fnc.fr-par.scw.cloud', 'fnd.br', 'fnwk.site', 'foggia.it', 'folionetwork.site', 'folkebibl.no', 'folldal.no', 'fool.jp', 'for-better.biz', 'for-more.biz', 'for-our.info', 'for-some.biz', 'for-the.biz', 'force.museum', 'forde.no', 'forgeblocks.com', 'forgot.her.name', 'forgot.his.name', 'forli-cesena.it', 'forlicesena.it', 'forlì-cesena.it', 'forlìcesena.it', 'forsand.no', 'fortal.br', 'forte.id', 'fortmissoula.museum', 'fortworth.museum', 'forum.hu', 'forumz.info', 'fosnes.no', 'fot.br', 'foundation.museum', 'foz.br', 'fr-1.paas.massivegrid.net', 'fr-par-1.baremetal.scw.cloud', 'fr-par-2.baremetal.scw.cloud', 'fr.eu.org', 'fr.it', 'fra1-de.cloudjiffy.net', 'framer.app', 'framer.media', 'framer.photos', 'framer.website', 'framer.wiki', 'framercanvas.com', 'frana.no', 'francaise.museum', 'frankfurt.museum', 'franziskaner.museum', 'fredrikstad.no', 'free.hr', 'freebox-os.com', 'freebox-os.fr', 'freeboxos.com', 'freeboxos.fr', 'freeddns.org', 'freeddns.us', 'freedesktop.org', 'freemasonry.museum', 'freemyip.com', 'freesite.host', 'freetls.fastly.net', 'frei.no', 'freiburg.museum', 'frenchkiss.jp', 'fribourg.museum', 'friuli-v-giulia.it', 'friuli-ve-giulia.it', 'friuli-vegiulia.it', 'friuli-venezia-giulia.it', 'friuli-veneziagiulia.it', 'friuli-vgiulia.it', 'friuliv-giulia.it', 'friulive-giulia.it', 'friulivegiulia.it', 'friulivenezia-giulia.it', 'friuliveneziagiulia.it', 'friulivgiulia.it', 'frog.museum', 'frogn.no', 'froland.no', 'from-ak.com', 'from-al.com', 'from-ar.com', 'from-az.net', 'from-ca.com', 'from-co.net', 'from-ct.com', 'from-dc.com', 'from-de.com', 'from-fl.com', 'from-ga.com', 'from-hi.com', 'from-ia.com', 'from-id.com', 'from-il.com', 'from-in.com', 'from-ks.com', 'from-ky.com', 'from-la.net', 'from-ma.com', 'from-md.com', 'from-me.org', 'from-mi.com', 'from-mn.com', 'from-mo.com', 'from-ms.com', 'from-mt.com', 'from-nc.com', 'from-nd.com', 'from-ne.com', 'from-nh.com', 'from-nj.com', 'from-nm.com', 'from-nv.com', 'from-ny.net', 'from-oh.com', 'from-ok.com', 'from-or.com', 'from-pa.com', 'from-pr.com', 'from-ri.com', 'from-sc.com', 'from-sd.com', 'from-tn.com', 'from-tx.com', 'from-ut.com', 'from-va.com', 'from-vt.com', 'from-wa.com', 'from-wi.com', 'from-wv.com', 'from-wy.com', 'from.hr', 'frosinone.it', 'frosta.no', 'froya.no', 'frusky.de', 'fræna.no', 'frøya.no', 'fst.br', 'ftpaccess.cc', 'fuchu.hiroshima.jp', 'fuchu.tokyo.jp', 'fuchu.toyama.jp', 'fudai.iwate.jp', 'fuefuki.yamanashi.jp', 'fuel.aero', 'fuettertdasnetz.de', 'fuji.shizuoka.jp', 'fujieda.shizuoka.jp', 'fujiidera.osaka.jp', 'fujikawa.shizuoka.jp', 'fujikawa.yamanashi.jp', 'fujikawaguchiko.yamanashi.jp', 'fujimi.nagano.jp', 'fujimi.saitama.jp', 'fujimino.saitama.jp', 'fujinomiya.shizuoka.jp', 'fujioka.gunma.jp', 'fujisato.akita.jp', 'fujisawa.iwate.jp', 'fujisawa.kanagawa.jp', 'fujishiro.ibaraki.jp', 'fujiyoshida.yamanashi.jp', 'fukagawa.hokkaido.jp', 'fukaya.saitama.jp', 'fukuchi.fukuoka.jp', 'fukuchiyama.kyoto.jp', 'fukudomi.saga.jp', 'fukui.fukui.jp', 'fukui.jp', 'fukumitsu.toyama.jp', 'fukuoka.jp', 'fukuroi.shizuoka.jp', 'fukusaki.hyogo.jp', 'fukushima.fukushima.jp', 'fukushima.hokkaido.jp', 'fukushima.jp', 'fukuyama.hiroshima.jp', 'funabashi.chiba.jp', 'funagata.yamagata.jp', 'funahashi.toyama.jp', 'functions.fnc.fr-par.scw.cloud', 'fundacio.museum', 'fuoisku.no', 'fuossko.no', 'furano.hokkaido.jp', 'furniture.museum', 'furubira.hokkaido.jp', 'furudono.fukushima.jp', 'furukawa.miyagi.jp', 'fusa.no', 'fuso.aichi.jp', 'fussa.tokyo.jp', 'futaba.fukushima.jp', 'futsu.nagasaki.jp', 'futtsu.chiba.jp', 'futurecms.at', 'futurehosting.at', 'futuremailing.at', 'fvg.it', 'fylkesbibl.no', 'fyresdal.no', 'førde.no', 'g.bg', 'g.se', 'g.vbrplsbx.io', 'g12.br', 'ga.us', 'gaivuotna.no', 'gallery.museum', 'galsa.no', 'gamagori.aichi.jp', 'game-host.org', 'game-server.cc', 'game.tw', 'games.hu', 'gamo.shiga.jp', 'gamvik.no', 'gangaviika.no', 'gangwon.kr', 'garden.museum', 'gateway.dev', 'gateway.museum', 'gaular.no', 'gausdal.no', 'gb.net', 'gc.ca', 'gd.cn', 'gda.pl', 'gdansk.pl', 'gdynia.pl', 'ge.it', 'geek.nz', 'geekgalaxy.com', 'geelvinck.museum', 'gehirn.ne.jp', 'geisei.kochi.jp', 'gemological.museum', 'gen.in', 'gen.mi.us', 'gen.ng', 'gen.nz', 'gen.tr', 'genkai.saga.jp', 'genoa.it', 'genova.it', 'gentapps.com', 'gentlentapis.com', 'geo.br', 'geology.museum', 'geometre-expert.fr', 'georgia.museum', 'georgia.su', 'get-an-api-domain-on-govuk', 'getmyip.com', 'gets-it.net', 'gg.ax', 'ggf.br', 'ghost.io', 'giehtavuoatna.no', 'giessen.museum', 'gifu.gifu.jp', 'gifu.jp', 'giize.com', 'gildeskal.no', 'gildeskål.no', 'ginan.gifu.jp', 'ginowan.okinawa.jp', 'ginoza.okinawa.jp', 'girlfriend.jp', 'girly.jp', 'giske.no', 'git-pages.rit.edu', 'git-repos.de', 'gitapp.si', 'github.io', 'githubpreview.dev', 'githubusercontent.com', 'gitlab.io', 'gitpage.si', 'gjemnes.no', 'gjerdrum.no', 'gjerstad.no', 'gjesdal.no', 'gjovik.no', 'gjøvik.no', 'glas.museum', 'glass.museum', 'gleeze.com', 'gliding.aero', 'glitch.me', 'gliwice.pl', 'global.prod.fastly.net', 'global.ssl.fastly.net', 'glogow.pl', 'gloomy.jp', 'gloppen.no', 'glug.org.uk', 'gmina.pl', 'gniezno.pl', 'go.ci', 'go.cr', 'go.dyndns.org', 'go.gov.br', 'go.id', 'go.it', 'go.jp', 'go.ke', 'go.kr', 'go.leg.br', 'go.pw', 'go.th', 'go.tj', 'go.tz', 'go.ug', 'gob.ar', 'gob.bo', 'gob.cl', 'gob.do', 'gob.ec', 'gob.es', 'gob.gt', 'gob.hn', 'gob.mx', 'gob.ni', 'gob.pa', 'gob.pe', 'gob.pk', 'gob.sv', 'gob.ve', 'gobo.wakayama.jp', 'godo.gifu.jp', 'goiania.br', 'goip.de', 'gojome.akita.jp', 'gok.pk', 'gokase.miyazaki.jp', 'gol.no', 'golffan.us', 'gon.pk', 'gonna.jp', 'gonohe.aomori.jp', 'googleapis.com', 'googlecode.com', 'gop.pk', 'gorge.museum', 'gorizia.it', 'gorlice.pl', 'gos.pk', 'gose.nara.jp', 'gosen.niigata.jp', 'goshiki.hyogo.jp', 'gotdns.ch', 'gotdns.com', 'gotdns.org', 'gotemba.shizuoka.jp', 'goto.nagasaki.jp', 'gotpantheon.com', 'gotsu.shimane.jp', 'goupile.fr', 'gouv.ci', 'gouv.fr', 'gouv.ht', 'gouv.km', 'gouv.ml', 'gouv.sn', 'gov.ac', 'gov.ae', 'gov.af', 'gov.al', 'gov.ar', 'gov.as', 'gov.au', 'gov.az', 'gov.ba', 'gov.bb', 'gov.bf', 'gov.bh', 'gov.bm', 'gov.bn', 'gov.br', 'gov.bs', 'gov.bt', 'gov.by', 'gov.bz', 'gov.cd', 'gov.cl', 'gov.cm', 'gov.cn', 'gov.co', 'gov.cu', 'gov.cx', 'gov.cy', 'gov.dm', 'gov.do', 'gov.dz', 'gov.ec', 'gov.ee', 'gov.eg', 'gov.et', 'gov.fj', 'gov.gd', 'gov.ge', 'gov.gh', 'gov.gi', 'gov.gn', 'gov.gr', 'gov.gu', 'gov.gy', 'gov.hk', 'gov.ie', 'gov.il', 'gov.in', 'gov.iq', 'gov.ir', 'gov.is', 'gov.it', 'gov.jo', 'gov.kg', 'gov.ki', 'gov.km', 'gov.kn', 'gov.kp', 'gov.kw', 'gov.kz', 'gov.la', 'gov.lb', 'gov.lc', 'gov.lk', 'gov.lr', 'gov.ls', 'gov.lt', 'gov.lv', 'gov.ly', 'gov.ma', 'gov.me', 'gov.mg', 'gov.mk', 'gov.ml', 'gov.mn', 'gov.mo', 'gov.mr', 'gov.ms', 'gov.mu', 'gov.mv', 'gov.mw', 'gov.my', 'gov.mz', 'gov.nc.tr', 'gov.ng', 'gov.nl', 'gov.nr', 'gov.om', 'gov.ph', 'gov.pk', 'gov.pl', 'gov.pn', 'gov.pr', 'gov.ps', 'gov.pt', 'gov.py', 'gov.qa', 'gov.rs', 'gov.ru', 'gov.rw', 'gov.sa', 'gov.sb', 'gov.sc', 'gov.scot', 'gov.sd', 'gov.sg', 'gov.sh', 'gov.sl', 'gov.so', 'gov.ss', 'gov.sx', 'gov.sy', 'gov.tj', 'gov.tl', 'gov.tm', 'gov.tn', 'gov.to', 'gov.tr', 'gov.tt', 'gov.tw', 'gov.ua', 'gov.uk', 'gov.vc', 'gov.ve', 'gov.vn', 'gov.ws', 'gov.ye', 'gov.za', 'gov.zm', 'gov.zw', 'government.aero', 'govt.nz', 'gr.com', 'gr.eu.org', 'gr.it', 'gr.jp', 'grajewo.pl', 'gran.no', 'grandrapids.museum', 'grane.no', 'granvin.no', 'graphox.us', 'gratangen.no', 'graz.museum', 'greater.jp', 'greta.fr', 'grimstad.no', 'griw.gov.pl', 'groks-the.info', 'groks-this.info', 'grondar.za', 'grong.no', 'grosseto.it', 'groundhandling.aero', 'group.aero', 'grozny.ru', 'grozny.su', 'grp.lk', 'gru.br', 'grue.no', 'gs.aa.no', 'gs.ah.no', 'gs.bu.no', 'gs.cn', 'gs.fm.no', 'gs.hl.no', 'gs.hm.no', 'gs.jan-mayen.no', 'gs.mr.no', 'gs.nl.no', 'gs.nt.no', 'gs.of.no', 'gs.ol.no', 'gs.oslo.no', 'gs.rl.no', 'gs.sf.no', 'gs.st.no', 'gs.svalbard.no', 'gs.tm.no', 'gs.tr.no', 'gs.va.no', 'gs.vf.no', 'gsj.bz', 'gsm.pl', 'gu.us', 'guam.gu', 'gub.uy', 'guernsey.museum', 'gujarat.in', 'gujo.gifu.jp', 'gulen.no', 'gunma.jp', 'guovdageaidnu.no', 'gushikami.okinawa.jp', 'gv.ao', 'gv.at', 'gv.vc', 'gwangju.kr', 'gx.cn', 'gyeongbuk.kr', 'gyeonggi.kr', 'gyeongnam.kr', 'gyokuto.kumamoto.jp', 'gz.cn', 'gáivuotna.no', 'gálsá.no', 'gáŋgaviika.no', 'günstigbestellen.de', 'günstigliefern.de', 'h.bg', 'h.se', 'ha.cn', 'ha.no', 'habikino.osaka.jp', 'habmer.no', 'haboro.hokkaido.jp', 'hacca.jp', 'hachijo.tokyo.jp', 'hachinohe.aomori.jp', 'hachioji.tokyo.jp', 'hachirogata.akita.jp', 'hadano.kanagawa.jp', 'hadsel.no', 'haebaru.okinawa.jp', 'haga.tochigi.jp', 'hagebostad.no', 'hagi.yamaguchi.jp', 'haibara.shizuoka.jp', 'hakata.fukuoka.jp', 'hakodate.hokkaido.jp', 'hakone.kanagawa.jp', 'hakuba.nagano.jp', 'hakui.ishikawa.jp', 'hakusan.ishikawa.jp', 'halden.no', 'half.host', 'halloffame.museum', 'halsa.no', 'ham-radio-op.net', 'hamada.shimane.jp', 'hamamatsu.shizuoka.jp', 'hamar.no', 'hamaroy.no', 'hamatama.saga.jp', 'hamatonbetsu.hokkaido.jp', 'hamburg.museum', 'hammarfeasta.no', 'hammerfest.no', 'hamura.tokyo.jp', 'hanamaki.iwate.jp', 'hanamigawa.chiba.jp', 'hanawa.fukushima.jp', 'handa.aichi.jp', 'handcrafted.jp', 'handson.museum', 'hanggliding.aero', 'hannan.osaka.jp', 'hanno.saitama.jp', 'hanyu.saitama.jp', 'hapmir.no', 'happou.akita.jp', 'hara.nagano.jp', 'haram.no', 'hareid.no', 'harima.hyogo.jp', 'harstad.no', 'harvestcelebration.museum', 'hasama.oita.jp', 'hasami.nagasaki.jp', 'hashbang.sh', 'hashikami.aomori.jp', 'hashima.gifu.jp', 'hashimoto.wakayama.jp', 'hasuda.saitama.jp', 'hasura-app.io', 'hasura.app', 'hasvik.no', 'hatogaya.saitama.jp', 'hatoyama.saitama.jp', 'hatsukaichi.hiroshima.jp', 'hattfjelldal.no', 'haugesund.no', 'hawaii.museum', 'hayakawa.yamanashi.jp', 'hayashima.okayama.jp', 'hazu.aichi.jp', 'hb.cldmail.ru', 'hb.cn', 'he.cn', 'health-carereform.com', 'health.museum', 'health.nz', 'health.vn', 'heavy.jp', 'heguri.nara.jp', 'heimatunduhren.museum', 'hekinan.aichi.jp', 'hellas.museum', 'helsinki.museum', 'hembygdsforbund.museum', 'hemne.no', 'hemnes.no', 'hemsedal.no', 'hepforge.org', 'her.jp', 'herad.no', 'here-for-more.info', 'heritage.museum', 'herokuapp.com', 'herokussl.com', 'heroy.more-og-romsdal.no', 'heroy.nordland.no', 'herøy.møre-og-romsdal.no', 'herøy.nordland.no', 'heteml.net', 'hi.cn', 'hi.us', 'hicam.net', 'hichiso.gifu.jp', 'hida.gifu.jp', 'hidaka.hokkaido.jp', 'hidaka.kochi.jp', 'hidaka.saitama.jp', 'hidaka.wakayama.jp', 'hidora.com', 'higashi.fukuoka.jp', 'higashi.fukushima.jp', 'higashi.okinawa.jp', 'higashiagatsuma.gunma.jp', 'higashichichibu.saitama.jp', 'higashihiroshima.hiroshima.jp', 'higashiizu.shizuoka.jp', 'higashiizumo.shimane.jp', 'higashikagawa.kagawa.jp', 'higashikagura.hokkaido.jp', 'higashikawa.hokkaido.jp', 'higashikurume.tokyo.jp', 'higashimatsushima.miyagi.jp', 'higashimatsuyama.saitama.jp', 'higashimurayama.tokyo.jp', 'higashinaruse.akita.jp', 'higashine.yamagata.jp', 'higashiomi.shiga.jp', 'higashiosaka.osaka.jp', 'higashishirakawa.gifu.jp', 'higashisumiyoshi.osaka.jp', 'higashitsuno.kochi.jp', 'higashiura.aichi.jp', 'higashiyama.kyoto.jp', 'higashiyamato.tokyo.jp', 'higashiyodogawa.osaka.jp', 'higashiyoshino.nara.jp', 'hiho.jp', 'hiji.oita.jp', 'hikari.yamaguchi.jp', 'hikawa.shimane.jp', 'hikimi.shimane.jp', 'hikone.shiga.jp', 'himeji.hyogo.jp', 'himeshima.oita.jp', 'himi.toyama.jp', 'hino.tokyo.jp', 'hino.tottori.jp', 'hinode.tokyo.jp', 'hinohara.tokyo.jp', 'hioki.kagoshima.jp', 'hippy.jp', 'hirado.nagasaki.jp', 'hiraizumi.iwate.jp', 'hirakata.osaka.jp', 'hiranai.aomori.jp', 'hirara.okinawa.jp', 'hirata.fukushima.jp', 'hiratsuka.kanagawa.jp', 'hiraya.nagano.jp', 'hirogawa.wakayama.jp', 'hirokawa.fukuoka.jp', 'hirono.fukushima.jp', 'hirono.iwate.jp', 'hiroo.hokkaido.jp', 'hirosaki.aomori.jp', 'hiroshima.jp', 'hisayama.fukuoka.jp', 'histoire.museum', 'historical.museum', 'historicalsociety.museum', 'historichouses.museum', 'historisch.museum', 'historisches.museum', 'history.museum', 'historyofscience.museum', 'hita.oita.jp', 'hitachi.ibaraki.jp', 'hitachinaka.ibaraki.jp', 'hitachiomiya.ibaraki.jp', 'hitachiota.ibaraki.jp', 'hitra.no', 'hizen.saga.jp', 'hjartdal.no', 'hjelmeland.no', 'hk.cn', 'hk.com', 'hk.org', 'hl.cn', 'hl.no', 'hlx.live', 'hlx.page', 'hlx3.page', 'hm.no', 'hn.cn', 'hobby-site.com', 'hobby-site.org', 'hobol.no', 'hobøl.no', 'hof.no', 'hofu.yamaguchi.jp', 'hokkaido.jp', 'hokksund.no', 'hokuryu.hokkaido.jp', 'hokuto.hokkaido.jp', 'hokuto.yamanashi.jp', 'hol.no', 'hole.no', 'holmestrand.no', 'holtalen.no', 'holtålen.no', 'holy.jp', 'home-webserver.de', 'home.dyndns.org', 'homebuilt.aero', 'homedns.org', 'homeftp.net', 'homeftp.org', 'homeip.net', 'homelink.one', 'homelinux.com', 'homelinux.net', 'homelinux.org', 'homeoffice.gov.uk', 'homesecuritymac.com', 'homesecuritypc.com', 'homesklep.pl', 'homeunix.com', 'homeunix.net', 'homeunix.org', 'honai.ehime.jp', 'honbetsu.hokkaido.jp', 'honefoss.no', 'hongo.hiroshima.jp', 'honjo.akita.jp', 'honjo.saitama.jp', 'honjyo.akita.jp', 'hoplix.shop', 'hopto.me', 'hopto.org', 'hornindal.no', 'horokanai.hokkaido.jp', 'horology.museum', 'horonobe.hokkaido.jp', 'horten.no', 'hosp.uk', 'hostedpi.com', 'hosting-cluster.nl', 'hosting.myjino.ru', 'hosting.ovh.net', 'hostyhosting.io', 'hotel.hu', 'hotel.lk', 'hotel.tz', 'hotelwithflight.com', 'house.museum', 'hoyanger.no', 'hoylandet.no', 'hr.eu.org', 'hra.health', 'hs.kr', 'hs.run', 'hs.zone', 'httpbin.org', 'hu.com', 'hu.eu.org', 'hu.net', 'huissier-justice.fr', 'humanities.museum', 'hungry.jp', 'hurdal.no', 'hurum.no', 'hvaler.no', 'hyllestad.no', 'hyogo.jp', 'hyuga.miyazaki.jp', 'hzc.io', 'hábmer.no', 'hámmárfeasta.no', 'hápmir.no', 'häkkinen.fi', 'hå.no', 'hægebostad.no', 'hønefoss.no', 'høyanger.no', 'høylandet.no', 'i.bg', 'i.ng', 'i.ph', 'i.se', 'i234.me', 'ia.us', 'iamallama.com', 'ibara.okayama.jp', 'ibaraki.ibaraki.jp', 'ibaraki.jp', 'ibaraki.osaka.jp', 'ibestad.no', 'ibigawa.gifu.jp', 'ibxos.it', 'ic.gov.pl', 'ichiba.tokushima.jp', 'ichihara.chiba.jp', 'ichikai.tochigi.jp', 'ichikawa.chiba.jp', 'ichikawa.hyogo.jp', 'ichikawamisato.yamanashi.jp', 'ichinohe.iwate.jp', 'ichinomiya.aichi.jp', 'ichinomiya.chiba.jp', 'ichinoseki.iwate.jp', 'icurus.jp', 'id.au', 'id.firewalledreplit.co', 'id.forgerock.io', 'id.ir', 'id.lv', 'id.ly', 'id.repl.co', 'id.us', 'ide.kyoto.jp', 'idf.il', 'idrett.no', 'idv.hk', 'idv.tw', 'ie.eu.org', 'if.ua', 'iglesias-carbonia.it', 'iglesiascarbonia.it', 'iheya.okinawa.jp', 'iida.nagano.jp', 'iide.yamagata.jp', 'iijima.nagano.jp', 'iitate.fukushima.jp', 'iiyama.nagano.jp', 'iizuka.fukuoka.jp', 'iizuna.nagano.jp', 'ikaruga.nara.jp', 'ikata.ehime.jp', 'ikawa.akita.jp', 'ikeda.fukui.jp', 'ikeda.gifu.jp', 'ikeda.hokkaido.jp', 'ikeda.nagano.jp', 'ikeda.osaka.jp', 'iki.fi', 'iki.nagasaki.jp', 'ikoma.nara.jp', 'ikusaka.nagano.jp', 'il.eu.org', 'il.us', 'ilawa.pl', 'iliadboxos.it', 'illustration.museum', 'ilovecollege.info', 'im.it', 'imabari.ehime.jp', 'imageandsound.museum', 'imakane.hokkaido.jp', 'imari.saga.jp', 'imb.br', 'imizu.toyama.jp', 'Immobilien-Verwaltungs-GmbH', 'imperia.it', 'impertrix.com', 'impertrixcdn.com', 'in-addr.arpa', 'in-berlin.de', 'in-brb.de', 'in-butter.de', 'in-dsl.de', 'in-dsl.net', 'in-dsl.org', 'in-the-band.net', 'in-vpn.de', 'in-vpn.net', 'in-vpn.org', 'in.eu.org', 'in.futurecms.at', 'in.na', 'in.net', 'in.ni', 'in.rs', 'in.th', 'in.ua', 'in.us', 'ina.ibaraki.jp', 'ina.nagano.jp', 'ina.saitama.jp', 'inabe.mie.jp', 'inagawa.hyogo.jp', 'inagi.tokyo.jp', 'inami.toyama.jp', 'inami.wakayama.jp', 'inashiki.ibaraki.jp', 'inatsuki.fukuoka.jp', 'inawashiro.fukushima.jp', 'inazawa.aichi.jp', 'Inc.', 'Inc.', 'Inc.', 'Inc.', 'Inc.', 'Inc.', 'inc.hk', 'incheon.kr', 'ind.br', 'ind.gt', 'ind.in', 'ind.kw', 'ind.tn', 'independent-commission.uk', 'independent-inquest.uk', 'independent-inquiry.uk', 'independent-panel.uk', 'independent-review.uk', 'inderoy.no', 'inderøy.no', 'index.html', 'indian.museum', 'indiana.museum', 'indianapolis.museum', 'indianmarket.museum', 'indie.porn', 'indigena.bo', 'industria.bo', 'ine.kyoto.jp', 'inf.br', 'inf.cu', 'inf.mk', 'inf.ua', 'info.at', 'info.au', 'info.az', 'info.bb', 'info.bj', 'info.bo', 'info.co', 'info.cx', 'info.ec', 'info.et', 'info.fj', 'info.gu', 'info.ht', 'info.hu', 'info.in', 'info.ke', 'info.ki', 'info.la', 'info.ls', 'info.mv', 'info.na', 'info.nf', 'info.ni', 'info.nr', 'info.pk', 'info.pl', 'info.pr', 'info.ro', 'info.sd', 'info.tn', 'info.tr', 'info.tt', 'info.tz', 'info.ve', 'info.vn', 'info.zm', 'ing.pa', 'ingatlan.hu', 'ino.kochi.jp', 'instance.datadetect.com', 'instances.spawn.cc', 'instantcloud.cn', 'insurance.aero', 'int.ar', 'int.az', 'int.bo', 'int.ci', 'int.co', 'int.cv', 'int.eu.org', 'int.in', 'int.is', 'int.la', 'int.lk', 'int.mv', 'int.mw', 'int.ni', 'int.pt', 'int.ru', 'int.tj', 'int.tt', 'int.ve', 'int.vn', 'intelligence.museum', 'interactive.museum', 'internet-dns.de', 'internet.in', 'intl.tn', 'inuyama.aichi.jp', 'inzai.chiba.jp', 'io.in', 'io.kg', 'iobb.net', 'iopsys.se', 'ip.linodeusercontent.com', 'ip6.arpa', 'ipifony.net', 'iraq.museum', 'iris.arpa', 'iron.museum', 'iruma.saitama.jp', 'is-a-anarchist.com', 'is-a-blogger.com', 'is-a-bookkeeper.com', 'is-a-bruinsfan.org', 'is-a-bulls-fan.com', 'is-a-candidate.org', 'is-a-caterer.com', 'is-a-celticsfan.org', 'is-a-chef.com', 'is-a-chef.net', 'is-a-chef.org', 'is-a-conservative.com', 'is-a-cpa.com', 'is-a-cubicle-slave.com', 'is-a-democrat.com', 'is-a-designer.com', 'is-a-doctor.com', 'is-a-financialadvisor.com', 'is-a-geek.com', 'is-a-geek.net', 'is-a-geek.org', 'is-a-green.com', 'is-a-guru.com', 'is-a-hard-worker.com', 'is-a-hunter.com', 'is-a-knight.org', 'is-a-landscaper.com', 'is-a-lawyer.com', 'is-a-liberal.com', 'is-a-libertarian.com', 'is-a-linux-user.org', 'is-a-llama.com', 'is-a-musician.com', 'is-a-nascarfan.com', 'is-a-nurse.com', 'is-a-painter.com', 'is-a-patsfan.org', 'is-a-personaltrainer.com', 'is-a-photographer.com', 'is-a-player.com', 'is-a-republican.com', 'is-a-rockstar.com', 'is-a-socialist.com', 'is-a-soxfan.org', 'is-a-student.com', 'is-a-teacher.com', 'is-a-techie.com', 'is-a-therapist.com', 'is-an-accountant.com', 'is-an-actor.com', 'is-an-actress.com', 'is-an-anarchist.com', 'is-an-artist.com', 'is-an-engineer.com', 'is-an-entertainer.com', 'is-by.us', 'is-certified.com', 'is-found.org', 'is-gone.com', 'is-into-anime.com', 'is-into-cars.com', 'is-into-cartoons.com', 'is-into-games.com', 'is-leet.com', 'is-lost.org', 'is-not-certified.com', 'is-saved.org', 'is-slick.com', 'is-uberleet.com', 'is-very-bad.org', 'is-very-evil.org', 'is-very-good.org', 'is-very-nice.org', 'is-very-sweet.org', 'is-with-theband.com', 'is.eu.org', 'is.gov.pl', 'is.it', 'isa-geek.com', 'isa-geek.net', 'isa-geek.org', 'isa-hockeynut.com', 'isa.kagoshima.jp', 'isa.us', 'isahaya.nagasaki.jp', 'ise.mie.jp', 'isehara.kanagawa.jp', 'isen.kagoshima.jp', 'isernia.it', 'iserv.dev', 'iservschule.de', 'isesaki.gunma.jp', 'ishigaki.okinawa.jp', 'ishikari.hokkaido.jp', 'ishikawa.fukushima.jp', 'ishikawa.jp', 'ishikawa.okinawa.jp', 'ishinomaki.miyagi.jp', 'isla.pr', 'isleofman.museum', 'isshiki.aichi.jp', 'issmarterthanyou.com', 'isteingeek.de', 'istmein.de', 'isumi.chiba.jp', 'it.ao', 'it.eu.org', 'it1.eur.aruba.jenv-aruba.cloud', 'it1.jenv-aruba.cloud', 'itabashi.tokyo.jp', 'itako.ibaraki.jp', 'itakura.gunma.jp', 'itami.hyogo.jp', 'itano.tokushima.jp', 'itayanagi.aomori.jp', 'itcouldbewor.se', 'itigo.jp', 'ito.shizuoka.jp', 'itoigawa.niigata.jp', 'itoman.okinawa.jp', 'its.me', 'ivano-frankivsk.ua', 'ivanovo.su', 'iveland.no', 'ivgu.no', 'iwade.wakayama.jp', 'iwafune.tochigi.jp', 'iwaizumi.iwate.jp', 'iwaki.fukushima.jp', 'iwakuni.yamaguchi.jp', 'iwakura.aichi.jp', 'iwama.ibaraki.jp', 'iwamizawa.hokkaido.jp', 'iwanai.hokkaido.jp', 'iwanuma.miyagi.jp', 'iwata.shizuoka.jp', 'iwate.iwate.jp', 'iwate.jp', 'iwatsuki.saitama.jp', 'iwi.nz', 'iyo.ehime.jp', 'iz.hr', 'izena.okinawa.jp', 'izu.shizuoka.jp', 'izumi.kagoshima.jp', 'izumi.osaka.jp', 'izumiotsu.osaka.jp', 'izumisano.osaka.jp', 'izumizaki.fukushima.jp', 'izumo.shimane.jp', 'izumozaki.niigata.jp', 'izunokuni.shizuoka.jp', 'j.bg', 'j.layershift.co.uk', 'j.scaleforce.com.cy', 'j.scaleforce.net', 'jab.br', 'jambyl.su', 'jamison.museum', 'jampa.br', 'jan-mayen.no', 'jaworzno.pl', 'jc.neen.it', 'jcloud-ver-jpc.ik-server.com', 'jcloud.ik-server.com', 'jcloud.kz', 'jdevcloud.com', 'jdf.br', 'jed.wafaicloud.com', 'jefferson.museum', 'jeju.kr', 'jelastic.dogado.eu', 'jelastic.regruhosting.ru', 'jelastic.saveincloud.net', 'jelastic.team', 'jelastic.tsukaeru.net', 'jele.cloud', 'jele.club', 'jele.host', 'jele.io', 'jele.site', 'jelenia-gora.pl', 'jellybean.jp', 'jeonbuk.kr', 'jeonnam.kr', 'jerusalem.museum', 'jessheim.no', 'jevnaker.no', 'jewelry.museum', 'jewish.museum', 'jewishart.museum', 'jfk.museum', 'jgora.pl', 'jinsekikogen.hiroshima.jp', 'jl.cn', 'jls-sto1.elastx.net', 'jls-sto2.elastx.net', 'jls-sto3.elastx.net', 'joboji.iwate.jp', 'jobs.tt', 'joetsu.niigata.jp', 'jogasz.hu', 'johana.toyama.jp', 'joinville.br', 'jolster.no', 'jondal.no', 'jor.br', 'jorpeland.no', 'joso.ibaraki.jp', 'jotelulu.cloud', 'journal.aero', 'journalism.museum', 'journalist.aero', 'joyo.kyoto.jp', 'jozi.biz', 'jp.eu.org', 'jp.kg', 'jp.md', 'jp.net', 'jpn.com', 'js.cn', 'js.org', 'js.wpenginepowered.com', 'ju.mp', 'judaica.museum', 'judygarland.museum', 'juedisches.museum', 'juif.museum', 'jur.pro', 'jus.br', 'jx.cn', 'jølster.no', 'jørpeland.no', 'k.bg', 'K.K.', 'k.se', 'k12.ak.us', 'k12.al.us', 'k12.ar.us', 'k12.as.us', 'k12.az.us', 'k12.ca.us', 'k12.co.us', 'k12.ct.us', 'k12.dc.us', 'k12.de.us', 'k12.ec', 'k12.fl.us', 'k12.ga.us', 'k12.gu.us', 'k12.ia.us', 'k12.id.us', 'k12.il', 'k12.il.us', 'k12.in.us', 'k12.ks.us', 'k12.ky.us', 'k12.la.us', 'k12.ma.us', 'k12.md.us', 'k12.me.us', 'k12.mi.us', 'k12.mn.us', 'k12.mo.us', 'k12.ms.us', 'k12.mt.us', 'k12.nc.us', 'k12.ne.us', 'k12.nh.us', 'k12.nj.us', 'k12.nm.us', 'k12.nv.us', 'k12.ny.us', 'k12.oh.us', 'k12.ok.us', 'k12.or.us', 'k12.pa.us', 'k12.pr.us', 'k12.sc.us', 'k12.tn.us', 'k12.tr', 'k12.tx.us', 'k12.ut.us', 'k12.va.us', 'k12.vi', 'k12.vi.us', 'k12.vt.us', 'k12.wa.us', 'k12.wi.us', 'k12.wy.us', 'k8s.fr-par.scw.cloud', 'k8s.nl-ams.scw.cloud', 'k8s.pl-waw.scw.cloud', 'k8s.scw.cloud', 'kaas.gg', 'kadena.okinawa.jp', 'kadogawa.miyazaki.jp', 'kadoma.osaka.jp', 'kafjord.no', 'kaga.ishikawa.jp', 'kagami.kochi.jp', 'kagamiishi.fukushima.jp', 'kagamino.okayama.jp', 'kagawa.jp', 'kagoshima.jp', 'kagoshima.kagoshima.jp', 'kaho.fukuoka.jp', 'kahoku.ishikawa.jp', 'kahoku.yamagata.jp', 'kai.yamanashi.jp', 'kainan.tokushima.jp', 'kainan.wakayama.jp', 'kaisei.kanagawa.jp', 'kaita.hiroshima.jp', 'kaizuka.osaka.jp', 'kakamigahara.gifu.jp', 'kakegawa.shizuoka.jp', 'kakinoki.shimane.jp', 'kakogawa.hyogo.jp', 'kakuda.miyagi.jp', 'kalisz.pl', 'kalmykia.ru', 'kalmykia.su', 'kaluga.su', 'kamagaya.chiba.jp', 'kamaishi.iwate.jp', 'kamakura.kanagawa.jp', 'kameoka.kyoto.jp', 'kameyama.mie.jp', 'kami.kochi.jp', 'kami.miyagi.jp', 'kamiamakusa.kumamoto.jp', 'kamifurano.hokkaido.jp', 'kamigori.hyogo.jp', 'kamiichi.toyama.jp', 'kamiizumi.saitama.jp', 'kamijima.ehime.jp', 'kamikawa.hokkaido.jp', 'kamikawa.hyogo.jp', 'kamikawa.saitama.jp', 'kamikitayama.nara.jp', 'kamikoani.akita.jp', 'kamimine.saga.jp', 'kaminokawa.tochigi.jp', 'kaminoyama.yamagata.jp', 'kamioka.akita.jp', 'kamisato.saitama.jp', 'kamishihoro.hokkaido.jp', 'kamisu.ibaraki.jp', 'kamisunagawa.hokkaido.jp', 'kamitonda.wakayama.jp', 'kamitsue.oita.jp', 'kamo.kyoto.jp', 'kamo.niigata.jp', 'kamoenai.hokkaido.jp', 'kamogawa.chiba.jp', 'kanagawa.jp', 'kanan.osaka.jp', 'kanazawa.ishikawa.jp', 'kanegasaki.iwate.jp', 'kaneyama.fukushima.jp', 'kaneyama.yamagata.jp', 'kani.gifu.jp', 'kanie.aichi.jp', 'kanmaki.nara.jp', 'kanna.gunma.jp', 'kannami.shizuoka.jp', 'kanonji.kagawa.jp', 'kanoya.kagoshima.jp', 'kanra.gunma.jp', 'kanuma.tochigi.jp', 'kanzaki.saga.jp', 'kapsi.fi', 'karacol.su', 'karaganda.su', 'karasjohka.no', 'karasjok.no', 'karasuyama.tochigi.jp', 'karate.museum', 'karatsu.saga.jp', 'karelia.su', 'karikatur.museum', 'kariwa.niigata.jp', 'kariya.aichi.jp', 'karlsoy.no', 'karmoy.no', 'karmøy.no', 'karpacz.pl', 'kartuzy.pl', 'karuizawa.nagano.jp', 'karumai.iwate.jp', 'kasahara.gifu.jp', 'kasai.hyogo.jp', 'kasama.ibaraki.jp', 'kasamatsu.gifu.jp', 'kasaoka.okayama.jp', 'kashiba.nara.jp', 'kashihara.nara.jp', 'kashima.ibaraki.jp', 'kashima.saga.jp', 'kashiwa.chiba.jp', 'kashiwara.osaka.jp', 'kashiwazaki.niigata.jp', 'kasserver.com', 'kasuga.fukuoka.jp', 'kasuga.hyogo.jp', 'kasugai.aichi.jp', 'kasukabe.saitama.jp', 'kasumigaura.ibaraki.jp', 'kasuya.fukuoka.jp', 'kaszuby.pl', 'katagami.akita.jp', 'katano.osaka.jp', 'katashina.gunma.jp', 'katori.chiba.jp', 'katowice.pl', 'katsuragi.nara.jp', 'katsuragi.wakayama.jp', 'katsushika.tokyo.jp', 'katsuura.chiba.jp', 'katsuyama.fukui.jp', 'kautokeino.no', 'kawaba.gunma.jp', 'kawachinagano.osaka.jp', 'kawagoe.mie.jp', 'kawagoe.saitama.jp', 'kawaguchi.saitama.jp', 'kawahara.tottori.jp', 'kawai.iwate.jp', 'kawai.nara.jp', 'kawaiishop.jp', 'kawajima.saitama.jp', 'kawakami.nagano.jp', 'kawakami.nara.jp', 'kawakita.ishikawa.jp', 'kawamata.fukushima.jp', 'kawaminami.miyazaki.jp', 'kawanabe.kagoshima.jp', 'kawanehon.shizuoka.jp', 'kawanishi.hyogo.jp', 'kawanishi.nara.jp', 'kawanishi.yamagata.jp', 'kawara.fukuoka.jp', 'kawasaki.jp', 'kawasaki.jp', 'kawasaki.miyagi.jp', 'kawatana.nagasaki.jp', 'kawaue.gifu.jp', 'kawazu.shizuoka.jp', 'kayabe.hokkaido.jp', 'kazimierz-dolny.pl', 'kazo.saitama.jp', 'kazuno.akita.jp', 'ke-domains', 'keisen.fukuoka.jp', 'keliweb.cloud', 'kembuchi.hokkaido.jp', 'kep.tr', 'kepno.pl', 'ketrzyn.pl', 'keymachine.de', 'kg.kr', 'kh.ua', 'khakassia.su', 'kharkiv.ua', 'kharkov.ua', 'kherson.ua', 'khmelnitskiy.ua', 'khmelnytskyi.ua', 'khplay.nl', 'kibichuo.okayama.jp', 'kicks-ass.net', 'kicks-ass.org', 'kids.museum', 'kids.us', 'kiev.ua', 'kiho.mie.jp', 'kihoku.ehime.jp', 'kijo.miyazaki.jp', 'kikirara.jp', 'kikonai.hokkaido.jp', 'kikuchi.kumamoto.jp', 'kikugawa.shizuoka.jp', 'kilatiron.com', 'kill.jp', 'kilo.jp', 'kimino.wakayama.jp', 'kimitsu.chiba.jp', 'kimobetsu.hokkaido.jp', 'kin.okinawa.jp', 'kinghost.net', 'kinko.kagoshima.jp', 'kinokawa.wakayama.jp', 'kira.aichi.jp', 'kirkenes.no', 'kirovograd.ua', 'kiryu.gunma.jp', 'kisarazu.chiba.jp', 'kishiwada.osaka.jp', 'kiso.nagano.jp', 'kisofukushima.nagano.jp', 'kisosaki.mie.jp', 'kita.kyoto.jp', 'kita.osaka.jp', 'kita.tokyo.jp', 'kitaaiki.nagano.jp', 'kitaakita.akita.jp', 'kitadaito.okinawa.jp', 'kitagata.gifu.jp', 'kitagata.saga.jp', 'kitagawa.kochi.jp', 'kitagawa.miyazaki.jp', 'kitahata.saga.jp', 'kitahiroshima.hokkaido.jp', 'kitakami.iwate.jp', 'kitakata.fukushima.jp', 'kitakata.miyazaki.jp', 'kitakyushu.jp', 'kitakyushu.jp', 'kitami.hokkaido.jp', 'kitamoto.saitama.jp', 'kitanakagusuku.okinawa.jp', 'kitashiobara.fukushima.jp', 'kitaura.miyazaki.jp', 'kitayama.wakayama.jp', 'kiwa.mie.jp', 'kiwi.nz', 'kiyama.saga.jp', 'kiyokawa.kanagawa.jp', 'kiyosato.hokkaido.jp', 'kiyose.tokyo.jp', 'kiyosu.aichi.jp', 'kizu.kyoto.jp', 'klabu.no', 'klepp.no', 'klodzko.pl', 'klæbu.no', 'km.ua', 'kmpsp.gov.pl', 'knightpoint.systems', 'knowsitall.info', 'knx-server.net', 'kobayashi.miyazaki.jp', 'kobe.jp', 'kobe.jp', 'kobierzyce.pl', 'kochi.jp', 'kochi.kochi.jp', 'kodaira.tokyo.jp', 'koebenhavn.museum', 'koeln.museum', 'kofu.yamanashi.jp', 'koga.fukuoka.jp', 'koga.ibaraki.jp', 'koganei.tokyo.jp', 'koge.tottori.jp', 'koka.shiga.jp', 'kokonoe.oita.jp', 'kokubunji.tokyo.jp', 'kolobrzeg.pl', 'komae.tokyo.jp', 'komagane.nagano.jp', 'komaki.aichi.jp', 'komatsu.ishikawa.jp', 'komatsushima.tokushima.jp', 'komforb.se', 'kommunalforbund.se', 'kommune.no', 'komono.mie.jp', 'komoro.nagano.jp', 'komvux.se', 'konan.aichi.jp', 'konan.shiga.jp', 'kongsberg.no', 'kongsvinger.no', 'konin.pl', 'konskowola.pl', 'konsulat.gov.pl', 'konyvelo.hu', 'koobin.events', 'koori.fukushima.jp', 'kopervik.no', 'koriyama.fukushima.jp', 'koryo.nara.jp', 'kosai.shizuoka.jp', 'kosaka.akita.jp', 'kosei.shiga.jp', 'koshigaya.saitama.jp', 'koshimizu.hokkaido.jp', 'koshu.yamanashi.jp', 'kosuge.yamanashi.jp', 'kota.aichi.jp', 'koto.shiga.jp', 'koto.tokyo.jp', 'kotohira.kagawa.jp', 'kotoura.tottori.jp', 'kouhoku.saga.jp', 'kounosu.saitama.jp', 'kouyama.kagoshima.jp', 'kouzushima.tokyo.jp', 'koya.wakayama.jp', 'koza.wakayama.jp', 'kozagawa.wakayama.jp', 'kozaki.chiba.jp', 'kozow.com', 'kppsp.gov.pl', 'kr.com', 'kr.eu.org', 'kr.it', 'kr.ua', 'kraanghke.no', 'kragero.no', 'kragerø.no', 'krakow.pl', 'krasnik.pl', 'krasnodar.su', 'krellian.net', 'kristiansand.no', 'kristiansund.no', 'krodsherad.no', 'krokstadelva.no', 'krym.ua', 'kråanghke.no', 'krødsherad.no', 'ks.ua', 'ks.us', 'ktistory.com', 'kuchinotsu.nagasaki.jp', 'kudamatsu.yamaguchi.jp', 'kudoyama.wakayama.jp', 'kui.hiroshima.jp', 'kuji.iwate.jp', 'kuju.oita.jp', 'kujukuri.chiba.jp', 'kuki.saitama.jp', 'kuleuven.cloud', 'kumagaya.saitama.jp', 'kumakogen.ehime.jp', 'kumamoto.jp', 'kumamoto.kumamoto.jp', 'kumano.hiroshima.jp', 'kumano.mie.jp', 'kumatori.osaka.jp', 'kumejima.okinawa.jp', 'kumenan.okayama.jp', 'kumiyama.kyoto.jp', 'kunden.ortsinfo.at', 'kunigami.okinawa.jp', 'kunimi.fukushima.jp', 'kunisaki.oita.jp', 'kunitachi.tokyo.jp', 'kunitomi.miyazaki.jp', 'kunneppu.hokkaido.jp', 'kunohe.iwate.jp', 'kunst.museum', 'kunstsammlung.museum', 'kunstunddesign.museum', 'kurashiki.okayama.jp', 'kurate.fukuoka.jp', 'kure.hiroshima.jp', 'kurgan.su', 'kuriyama.hokkaido.jp', 'kurobe.toyama.jp', 'kurogi.fukuoka.jp', 'kuroishi.aomori.jp', 'kuroiso.tochigi.jp', 'kuromatsunai.hokkaido.jp', 'kuron.jp', 'kurotaki.nara.jp', 'kurume.fukuoka.jp', 'kusatsu.gunma.jp', 'kusatsu.shiga.jp', 'kushima.miyazaki.jp', 'kushimoto.wakayama.jp', 'kushiro.hokkaido.jp', 'kustanai.ru', 'kustanai.su', 'kusu.oita.jp', 'kutchan.hokkaido.jp', 'kutno.pl', 'kuwana.mie.jp', 'kuzumaki.iwate.jp', 'kv.ua', 'kvafjord.no', 'kvalsund.no', 'kvam.no', 'kvanangen.no', 'kvinesdal.no', 'kvinnherad.no', 'kviteseid.no', 'kvitsoy.no', 'kvitsøy.no', 'kvæfjord.no', 'kvænangen.no', 'kwp.gov.pl', 'kwpsp.gov.pl', 'ky.us', 'kyiv.ua', 'kyonan.chiba.jp', 'kyotamba.kyoto.jp', 'kyotanabe.kyoto.jp', 'kyotango.kyoto.jp', 'kyoto.jp', 'kyowa.akita.jp', 'kyowa.hokkaido.jp', 'kyuragi.saga.jp', 'kárášjohka.no', 'kåfjord.no', 'l-o-g-i-n.de', 'l.bg', 'l.se', 'la-spezia.it', 'la.us', 'laakesvuemie.no', 'lab.ms', 'labor.museum', 'labour.museum', 'lahppi.no', 'lajolla.museum', 'lakas.hu', 'lanbib.se', 'lancashire.museum', 'land-4-sale.us', 'landes.museum', 'landing.myjino.ru', 'langevag.no', 'langevåg.no', 'lans.museum', 'lapy.pl', 'laquila.it', 'lardal.no', 'larsson.museum', 'larvik.no', 'laspezia.it', 'latina.it', 'lavagis.no', 'lavangen.no', 'law.pro', 'law.za', 'laz.it', 'lazio.it', 'lc.it', 'lcl.dev', 'lclstage.dev', 'lcube-server.de', 'le.it', 'leadpages.co', 'leangaviika.no', 'leasing.aero', 'leaŋgaviika.no', 'lebesby.no', 'lebork.pl', 'lebtimnetz.de', 'lecce.it', 'lecco.it', 'leczna.pl', 'leg.br', 'legnica.pl', 'leikanger.no', 'leirfjord.no', 'leirvik.no', 'leitungsen.de', 'leka.no', 'leksvik.no', 'lel.br', 'lelux.site', 'lenug.su', 'lenvik.no', 'lerdal.no', 'lesja.no', 'levanger.no', 'lewismiller.museum', 'lezajsk.pl', 'lg.jp', 'lg.ua', 'li.it', 'lib.ak.us', 'lib.al.us', 'lib.ar.us', 'lib.as.us', 'lib.az.us', 'lib.ca.us', 'lib.co.us', 'lib.ct.us', 'lib.dc.us', 'lib.de.us', 'lib.ee', 'lib.fl.us', 'lib.ga.us', 'lib.gu.us', 'lib.hi.us', 'lib.ia.us', 'lib.id.us', 'lib.il.us', 'lib.in.us', 'lib.ks.us', 'lib.ky.us', 'lib.la.us', 'lib.ma.us', 'lib.md.us', 'lib.me.us', 'lib.mi.us', 'lib.mn.us', 'lib.mo.us', 'lib.ms.us', 'lib.mt.us', 'lib.nc.us', 'lib.nd.us', 'lib.ne.us', 'lib.nh.us', 'lib.nj.us', 'lib.nm.us', 'lib.nv.us', 'lib.ny.us', 'lib.oh.us', 'lib.ok.us', 'lib.or.us', 'lib.pa.us', 'lib.pr.us', 'lib.ri.us', 'lib.sc.us', 'lib.sd.us', 'lib.tn.us', 'lib.tx.us', 'lib.ut.us', 'lib.va.us', 'lib.vi.us', 'lib.vt.us', 'lib.wa.us', 'lib.wi.us', 'lib.wy.us', 'lier.no', 'lierne.no', 'lig.it', 'liguria.it', 'likes-pie.com', 'likescandy.com', 'lillehammer.no', 'lillesand.no', 'lima-city.at', 'lima-city.ch', 'lima-city.de', 'lima-city.rocks', 'lima.zone', 'limanowa.pl', 'lincoln.museum', 'lindas.no', 'lindesnes.no', 'lindås.no', 'linkyard-cloud.ch', 'linkyard.cloud', 'linodeobjects.com', 'linz.museum', 'littlestar.jp', 'living.museum', 'livinghistory.museum', 'livorno.it', 'lk-domain-naming-structure', 'lk3.ru', 'ln.cn', 'lo.it', 'loabat.no', 'loabát.no', 'localhistory.museum', 'localhost.daplie.me', 'localzone.xyz', 'lodi.it', 'lodingen.no', 'log.br', 'loginline.app', 'loginline.dev', 'loginline.io', 'loginline.services', 'loginline.site', 'loginto.me', 'logistics.aero', 'logoip.com', 'logoip.de', 'lohmus.me', 'loisirs.bj', 'lolipop.io', 'lolipopmc.jp', 'lolitapunk.jp', 'lom.it', 'lom.no', 'lombardia.it', 'lombardy.it', 'lomo.jp', 'lomza.pl', 'lon-1.paas.massivegrid.net', 'lon-2.paas.massivegrid.net', 'lon.wafaicloud.com', 'london.cloudapps.digital', 'london.museum', 'londrina.br', 'loppa.no', 'lorenskog.no', 'losangeles.museum', 'loseyourip.com', 'loten.no', 'louvre.museum', 'lovepop.jp', 'lovesick.jp', 'lowicz.pl', 'loyalist.museum', 'lpages.co', 'lpusercontent.com', 'lt.eu.org', 'lt.it', 'lt.ua', 'ltd.co.im', 'ltd.cy', 'ltd.gi', 'ltd.hk', 'ltd.lk', 'ltd.ng', 'ltd.ua', 'ltd.uk', 'lu.eu.org', 'lu.it', 'lubartow.pl', 'lubin.pl', 'lublin.pl', 'lucania.it', 'lucca.it', 'lucerne.museum', 'lug.org.uk', 'lugansk.ua', 'lugs.org.uk', 'lukow.pl', 'lund.no', 'lunner.no', 'luroy.no', 'lurøy.no', 'luster.no', 'lutsk.ua', 'luxembourg.museum', 'luzern.museum', 'lv.eu.org', 'lv.ua', 'lviv.ua', 'lyngdal.no', 'lyngen.no', 'lynx.mythic-beasts.com', 'láhppi.no', 'läns.museum', 'lærdal.no', 'lødingen.no', 'lørenskog.no', 'løten.no', 'm.bg', 'm.se', 'ma.gov.br', 'ma.leg.br', 'ma.us', 'macapa.br', 'maceio.br', 'macerata.it', 'machida.tokyo.jp', 'mad.museum', 'madrid.museum', 'maebashi.gunma.jp', 'magazine.aero', 'magentosite.cloud', 'magnet.page', 'maibara.shiga.jp', 'mail.pl', 'main.jp', 'maintenance.aero', 'maizuru.kyoto.jp', 'makinohara.shizuoka.jp', 'makurazaki.kagoshima.jp', 'malatvuopmi.no', 'malbork.pl', 'mallorca.museum', 'malopolska.pl', 'malselv.no', 'malvik.no', 'mamurogawa.yamagata.jp', 'managing-domain-names', 'manaus.br', 'manchester.museum', 'mandal.no', 'mangyshlak.su', 'maniwa.okayama.jp', 'manno.kagawa.jp', 'mansion.museum', 'mansions.museum', 'mantova.it', 'manx.museum', 'maori.nz', 'map.fastly.net', 'map.fastlylb.net', 'mar.it', 'marburg.museum', 'marche.it', 'marine.ru', 'maringa.br', 'maritime.museum', 'maritimo.museum', 'marker.no', 'marnardal.no', 'marugame.kagawa.jp', 'marumori.miyagi.jp', 'maryland.museum', 'marylhurst.museum', 'masaki.ehime.jp', 'masfjorden.no', 'mashike.hokkaido.jp', 'mashiki.kumamoto.jp', 'mashiko.tochigi.jp', 'masoy.no', 'massa-carrara.it', 'massacarrara.it', 'masuda.shimane.jp', 'mat.br', 'matera.it', 'matsubara.osaka.jp', 'matsubushi.saitama.jp', 'matsuda.kanagawa.jp', 'matsudo.chiba.jp', 'matsue.shimane.jp', 'matsukawa.nagano.jp', 'matsumae.hokkaido.jp', 'matsumoto.kagoshima.jp', 'matsumoto.nagano.jp', 'matsuno.ehime.jp', 'matsusaka.mie.jp', 'matsushige.tokushima.jp', 'matsushima.miyagi.jp', 'matsuura.nagasaki.jp', 'matsuyama.ehime.jp', 'matsuzaki.shizuoka.jp', 'matta-varjjat.no', 'mayfirst.info', 'mayfirst.org', 'mazeplay.com', 'mazowsze.pl', 'mazury.pl', 'mb.ca', 'mb.it', 'mc.ax', 'mc.eu.org', 'mc.it', 'mcdir.me', 'mcdir.ru', 'mcpe.me', 'mcpre.ru', 'md.ci', 'md.us', 'me.eu.org', 'me.in', 'me.it', 'me.ke', 'me.so', 'me.ss', 'me.tc', 'me.tz', 'me.uk', 'me.us', 'me.vu', 'med.br', 'med.ec', 'med.ee', 'med.ht', 'med.ly', 'med.om', 'med.pa', 'med.pl', 'med.pro', 'med.sa', 'med.sd', 'medecin.fr', 'medecin.km', 'media.aero', 'media.hu', 'media.museum', 'media.pl', 'mediatech.by', 'mediatech.dev', 'medical.museum', 'medicina.bo', 'medio-campidano.it', 'mediocampidano.it', 'medizinhistorisches.museum', 'meeres.museum', 'meguro.tokyo.jp', 'mein-iserv.de', 'mein-vigor.de', 'meinforum.net', 'meiwa.gunma.jp', 'meiwa.mie.jp', 'mel.cloudlets.com.au', 'meland.no', 'meldal.no', 'melhus.no', 'meloy.no', 'meløy.no', 'members.linode.com', 'memorial.museum', 'memset.net', 'meraker.no', 'merseine.nu', 'meråker.no', 'mesaverde.museum', 'messerli.app', 'messina.it', 'messwithdns.com', 'meteorapp.com', 'mex.com', 'mg.gov.br', 'mg.leg.br', 'mi.it', 'mi.th', 'mi.us', 'miasa.nagano.jp', 'miasta.pl', 'mibu.tochigi.jp', 'michigan.museum', 'microlight.aero', 'midatlantic.museum', 'midori.chiba.jp', 'midori.gunma.jp', 'midsund.no', 'midtre-gauldal.no', 'mie.jp', 'mielec.pl', 'mielno.pl', 'mifune.kumamoto.jp', 'migration.run', 'mihama.aichi.jp', 'mihama.chiba.jp', 'mihama.fukui.jp', 'mihama.mie.jp', 'mihama.wakayama.jp', 'mihara.hiroshima.jp', 'mihara.kochi.jp', 'miharu.fukushima.jp', 'miho.ibaraki.jp', 'mikasa.hokkaido.jp', 'mikawa.yamagata.jp', 'miki.hyogo.jp', 'mil.ac', 'mil.ae', 'mil.al', 'mil.ar', 'mil.az', 'mil.ba', 'mil.bo', 'mil.br', 'mil.by', 'mil.cl', 'mil.cn', 'mil.co', 'mil.cy', 'mil.do', 'mil.ec', 'mil.eg', 'mil.fj', 'mil.ge', 'mil.gh', 'mil.gt', 'mil.hn', 'mil.id', 'mil.in', 'mil.iq', 'mil.jo', 'mil.kg', 'mil.km', 'mil.kr', 'mil.kz', 'mil.lv', 'mil.mg', 'mil.mv', 'mil.my', 'mil.mz', 'mil.ng', 'mil.ni', 'mil.no', 'mil.nz', 'mil.pe', 'mil.ph', 'mil.pl', 'mil.py', 'mil.qa', 'mil.ru', 'mil.rw', 'mil.sh', 'mil.st', 'mil.sy', 'mil.tj', 'mil.tm', 'mil.to', 'mil.tr', 'mil.tw', 'mil.tz', 'mil.uy', 'mil.vc', 'mil.ve', 'mil.ye', 'mil.za', 'mil.zm', 'mil.zw', 'milan.it', 'milano.it', 'military.museum', 'mill.museum', 'mima.tokushima.jp', 'mimata.miyazaki.jp', 'minakami.gunma.jp', 'minamata.kumamoto.jp', 'minami-alps.yamanashi.jp', 'minami.fukuoka.jp', 'minami.kyoto.jp', 'minami.tokushima.jp', 'minamiaiki.nagano.jp', 'minamiashigara.kanagawa.jp', 'minamiawaji.hyogo.jp', 'minamiboso.chiba.jp', 'minamidaito.okinawa.jp', 'minamiechizen.fukui.jp', 'minamifurano.hokkaido.jp', 'minamiise.mie.jp', 'minamiizu.shizuoka.jp', 'minamimaki.nagano.jp', 'minamiminowa.nagano.jp', 'minamioguni.kumamoto.jp', 'minamisanriku.miyagi.jp', 'minamitane.kagoshima.jp', 'minamiuonuma.niigata.jp', 'minamiyamashiro.kyoto.jp', 'minano.saitama.jp', 'minato.osaka.jp', 'minato.tokyo.jp', 'mincom.tn', 'mine.nu', 'miners.museum', 'mining.museum', 'miniserver.com', 'minisite.ms', 'minnesota.museum', 'mino.gifu.jp', 'minobu.yamanashi.jp', 'minoh.osaka.jp', 'minokamo.gifu.jp', 'minowa.nagano.jp', 'mintere.site', 'mircloud.host', 'mircloud.ru', 'mircloud.us', 'misaki.okayama.jp', 'misaki.osaka.jp', 'misasa.tottori.jp', 'misato.akita.jp', 'misato.miyagi.jp', 'misato.saitama.jp', 'misato.shimane.jp', 'misato.wakayama.jp', 'misawa.aomori.jp', 'misconfused.org', 'mishima.fukushima.jp', 'mishima.shizuoka.jp', 'missile.museum', 'missoula.museum', 'misugi.mie.jp', 'mitaka.tokyo.jp', 'mitake.gifu.jp', 'mitane.akita.jp', 'mito.ibaraki.jp', 'mitou.yamaguchi.jp', 'mitoyo.kagawa.jp', 'mitsue.nara.jp', 'mitsuke.niigata.jp', 'miura.kanagawa.jp', 'miyada.nagano.jp', 'miyagi.jp', 'miyake.nara.jp', 'miyako.fukuoka.jp', 'miyako.iwate.jp', 'miyakonojo.miyazaki.jp', 'miyama.fukuoka.jp', 'miyama.mie.jp', 'miyashiro.saitama.jp', 'miyawaka.fukuoka.jp', 'miyazaki.jp', 'miyazaki.miyazaki.jp', 'miyazu.kyoto.jp', 'miyoshi.aichi.jp', 'miyoshi.hiroshima.jp', 'miyoshi.saitama.jp', 'miyoshi.tokushima.jp', 'miyota.nagano.jp', 'mizuho.tokyo.jp', 'mizumaki.fukuoka.jp', 'mizunami.gifu.jp', 'mizusawa.iwate.jp', 'mjondalen.no', 'mjøndalen.no', 'mk.eu.org', 'mk.ua', 'mlbfan.org', 'mmafan.biz', 'mn.it', 'mn.us', 'mo-i-rana.no', 'mo-siemens.io', 'mo.cn', 'mo.it', 'mo.us', 'moareke.no', 'mobara.chiba.jp', 'mobi.gp', 'mobi.ke', 'mobi.na', 'mobi.ng', 'mobi.tt', 'mobi.tz', 'mochizuki.nagano.jp', 'mock.pstmn.io', 'mod.gi', 'modalen.no', 'modelling.aero', 'modena.it', 'modern.museum', 'mods.jp', 'modum.no', 'moka.tochigi.jp', 'mol.it', 'molde.no', 'molise.it', 'moma.museum', 'mombetsu.hokkaido.jp', 'mond.jp', 'money.bj', 'money.museum', 'mongolian.jp', 'monmouth.museum', 'monticello.museum', 'montreal.museum', 'monza-brianza.it', 'monza-e-della-brianza.it', 'monza.it', 'monzabrianza.it', 'monzaebrianza.it', 'monzaedellabrianza.it', 'moo.jp', 'moonscale.io', 'moonscale.net', 'mordovia.ru', 'mordovia.su', 'morena.br', 'moriguchi.osaka.jp', 'morimachi.shizuoka.jp', 'morioka.iwate.jp', 'moriya.ibaraki.jp', 'moriyama.shiga.jp', 'moriyoshi.akita.jp', 'morotsuka.miyazaki.jp', 'moroyama.saitama.jp', 'moscow.museum', 'moseushi.hokkaido.jp', 'mosjoen.no', 'mosjøen.no', 'moskenes.no', 'moss.no', 'mosvik.no', 'motegi.tochigi.jp', 'motobu.okinawa.jp', 'motorcycle.museum', 'motosu.gifu.jp', 'motoyama.kochi.jp', 'movimiento.bo', 'mozilla-iot.org', 'moåreke.no', 'mp.br', 'mr.no', 'mragowo.pl', 'ms.gov.br', 'ms.it', 'ms.kr', 'ms.leg.br', 'ms.us', 'msk.ru', 'msk.su', 'mt.eu.org', 'mt.gov.br', 'mt.it', 'mt.leg.br', 'mt.us', 'muenchen.museum', 'muenster.museum', 'mugi.tokushima.jp', 'muika.niigata.jp', 'mukawa.hokkaido.jp', 'muko.kyoto.jp', 'mulhouse.museum', 'munakata.fukuoka.jp', 'muncie.museum', 'muni.il', 'muosat.no', 'muosát.no', 'mup.gov.pl', 'murakami.niigata.jp', 'murata.miyagi.jp', 'murayama.yamagata.jp', 'murmansk.su', 'muroran.hokkaido.jp', 'muroto.kochi.jp', 'mus.br', 'mus.mi.us', 'musashimurayama.tokyo.jp', 'musashino.tokyo.jp', 'museet.museum', 'museum.mv', 'museum.mw', 'museum.no', 'museum.om', 'museum.tt', 'museumcenter.museum', 'museumvereniging.museum', 'music.museum', 'musica.ar', 'musica.bo', 'musician.io', 'mutsu.aomori.jp', 'mutsuzawa.chiba.jp', 'mutual.ar', 'mw.gov.pl', 'mx.na', 'my-firewall.org', 'my-gateway.de', 'my-router.de', 'my-vigor.de', 'my-wan.de', 'my.eu.org', 'my.id', 'myactivedirectory.com', 'myamaze.net', 'myasustor.com', 'mycd.eu', 'mycloud.by', 'mydatto.com', 'mydatto.net', 'myddns.rocks', 'mydissent.net', 'mydobiss.com', 'mydrobo.com', 'myds.me', 'myeffect.net', 'myfast.host', 'myfast.space', 'myfirewall.org', 'myforum.community', 'myfritz.net', 'myftp.biz', 'myftp.org', 'myhome-server.de', 'myiphost.com', 'myjino.ru', 'mykolaiv.ua', 'mymailer.com.tw', 'mymediapc.net', 'myoko.niigata.jp', 'mypep.link', 'mypets.ws', 'myphotos.cc', 'mypi.co', 'mypsx.net', 'myqnapcloud.com', 'mysecuritycamera.com', 'mysecuritycamera.net', 'mysecuritycamera.org', 'myshopblocks.com', 'myshopify.com', 'myspreadshop.at', 'myspreadshop.be', 'myspreadshop.ca', 'myspreadshop.ch', 'myspreadshop.co.uk', 'myspreadshop.com', 'myspreadshop.com.au', 'myspreadshop.de', 'myspreadshop.dk', 'myspreadshop.es', 'myspreadshop.fi', 'myspreadshop.fr', 'myspreadshop.ie', 'myspreadshop.it', 'myspreadshop.net', 'myspreadshop.nl', 'myspreadshop.no', 'myspreadshop.pl', 'myspreadshop.se', 'mytabit.co.il', 'mytabit.com', 'mytis.ru', 'mytuleap.com', 'myvnc.com', 'mywire.org', 'málatvuopmi.no', 'mátta-várjjat.no', 'målselv.no', 'måsøy.no', 'māori.nz', 'n.bg', 'n.se', 'n4t.co', 'na.it', 'na4u.ru', 'naamesjevuemie.no', 'nabari.mie.jp', 'nachikatsuura.wakayama.jp', 'nagahama.shiga.jp', 'nagai.yamagata.jp', 'nagano.jp', 'nagano.nagano.jp', 'naganohara.gunma.jp', 'nagaoka.niigata.jp', 'nagaokakyo.kyoto.jp', 'nagara.chiba.jp', 'nagareyama.chiba.jp', 'nagasaki.jp', 'nagasaki.nagasaki.jp', 'nagasu.kumamoto.jp', 'nagato.yamaguchi.jp', 'nagatoro.saitama.jp', 'nagawa.nagano.jp', 'nagi.okayama.jp', 'nagiso.nagano.jp', 'nago.okinawa.jp', 'nagoya.jp', 'nagoya.jp', 'naha.okinawa.jp', 'nahari.kochi.jp', 'naie.hokkaido.jp', 'naka.hiroshima.jp', 'naka.ibaraki.jp', 'nakadomari.aomori.jp', 'nakagawa.fukuoka.jp', 'nakagawa.hokkaido.jp', 'nakagawa.nagano.jp', 'nakagawa.tokushima.jp', 'nakagusuku.okinawa.jp', 'nakagyo.kyoto.jp', 'nakai.kanagawa.jp', 'nakama.fukuoka.jp', 'nakamichi.yamanashi.jp', 'nakamura.kochi.jp', 'nakaniikawa.toyama.jp', 'nakano.nagano.jp', 'nakano.tokyo.jp', 'nakanojo.gunma.jp', 'nakanoto.ishikawa.jp', 'nakasatsunai.hokkaido.jp', 'nakatane.kagoshima.jp', 'nakatombetsu.hokkaido.jp', 'nakatsugawa.gifu.jp', 'nakayama.yamagata.jp', 'nakijin.okinawa.jp', 'naklo.pl', 'nalchik.ru', 'nalchik.su', 'namaste.jp', 'namdalseid.no', 'name.az', 'name.eg', 'name.et', 'name.fj', 'name.hr', 'name.jo', 'name.mk', 'name.mv', 'name.my', 'name.na', 'name.ng', 'name.pm', 'name.pr', 'name.qa', 'name.tj', 'name.tr', 'name.tt', 'name.vn', 'namegata.ibaraki.jp', 'namegawa.saitama.jp', 'namerikawa.toyama.jp', 'namie.fukushima.jp', 'namikata.ehime.jp', 'namsos.no', 'namsskogan.no', 'nanae.hokkaido.jp', 'nanao.ishikawa.jp', 'nanbu.tottori.jp', 'nanbu.yamanashi.jp', 'nango.fukushima.jp', 'nanjo.okinawa.jp', 'nankoku.kochi.jp', 'nanmoku.gunma.jp', 'nannestad.no', 'nanporo.hokkaido.jp', 'nantan.kyoto.jp', 'nanto.toyama.jp', 'nanyo.yamagata.jp', 'naoshima.kagawa.jp', 'naples.it', 'napoli.it', 'nara.jp', 'nara.nara.jp', 'narashino.chiba.jp', 'narita.chiba.jp', 'naroy.no', 'narusawa.yamanashi.jp', 'naruto.tokushima.jp', 'narviika.no', 'narvik.no', 'nasu.tochigi.jp', 'nasushiobara.tochigi.jp', 'nat.tn', 'natal.br', 'national.museum', 'nationalfirearms.museum', 'nationalheritage.museum', 'nativeamerican.museum', 'natori.miyagi.jp', 'natural.bo', 'naturalhistory.museum', 'naturalhistorymuseum.museum', 'naturalsciences.museum', 'naturbruksgymn.se', 'nature.museum', 'naturhistorisches.museum', 'natuurwetenschappen.museum', 'naumburg.museum', 'naustdal.no', 'naval.museum', 'navigation.aero', 'navoi.su', 'navuotna.no', 'nayoro.hokkaido.jp', 'nb.ca', 'nc.tr', 'nc.us', 'nd.us', 'ne.jp', 'ne.ke', 'ne.kr', 'ne.pw', 'ne.tz', 'ne.ug', 'ne.us', 'neat-url.com', 'nebraska.museum', 'nedre-eiker.no', 'neko.am', 'nemuro.hokkaido.jp', 'nerdpol.ovh', 'nerima.tokyo.jp', 'nes.akershus.no', 'nes.buskerud.no', 'nesna.no', 'nesodden.no', 'nesoddtangen.no', 'nesseby.no', 'nesset.no', 'net-freaks.com', 'net.ac', 'net.ae', 'net.af', 'net.ag', 'net.ai', 'net.al', 'net.am', 'net.ar', 'net.au', 'net.az', 'net.ba', 'net.bb', 'net.bh', 'net.bj', 'net.bm', 'net.bn', 'net.bo', 'net.br', 'net.bs', 'net.bt', 'net.bz', 'net.ci', 'net.cm', 'net.cn', 'net.co', 'net.cu', 'net.cw', 'net.cy', 'net.dm', 'net.do', 'net.dz', 'net.ec', 'net.eg', 'net.et', 'net.eu.org', 'net.fj', 'net.fm', 'net.ge', 'net.gg', 'net.gl', 'net.gn', 'net.gp', 'net.gr', 'net.gt', 'net.gu', 'net.gy', 'net.hk', 'net.hn', 'net.ht', 'net.id', 'net.il', 'net.im', 'net.in', 'net.iq', 'net.ir', 'net.is', 'net.je', 'net.jo', 'net.kg', 'net.ki', 'net.kn', 'net.kw', 'net.ky', 'net.kz', 'net.la', 'net.lb', 'net.lc', 'net.lk', 'net.lr', 'net.ls', 'net.lv', 'net.ly', 'net.ma', 'net.me', 'net.mk', 'net.ml', 'net.mo', 'net.ms', 'net.mt', 'net.mu', 'net.mv', 'net.mw', 'net.mx', 'net.my', 'net.mz', 'net.nf', 'net.ng', 'net.ni', 'net.nr', 'net.nz', 'net.om', 'net.pa', 'net.pe', 'net.ph', 'net.pk', 'net.pl', 'net.pn', 'net.pr', 'net.ps', 'net.pt', 'net.py', 'net.qa', 'net.ru', 'net.rw', 'net.sa', 'net.sb', 'net.sc', 'net.sd', 'net.sg', 'net.sh', 'net.sl', 'net.so', 'net.ss', 'net.st', 'net.sy', 'net.th', 'net.tj', 'net.tm', 'net.tn', 'net.to', 'net.tr', 'net.tt', 'net.tw', 'net.ua', 'net.uk', 'net.uy', 'net.uz', 'net.vc', 'net.ve', 'net.vi', 'net.vn', 'net.vu', 'net.ws', 'net.ye', 'net.za', 'net.zm', 'netlify.app', 'neues.museum', 'newhampshire.museum', 'newjersey.museum', 'newmexico.museum', 'newport.museum', 'news.hu', 'newspaper.museum', 'newyork.museum', 'neyagawa.osaka.jp', 'nf.ca', 'nflfan.org', 'nfshost.com', 'ng.eu.org', 'ngo.lk', 'ngo.ng', 'ngo.ph', 'ngo.za', 'ngrok.io', 'nh-serv.co.uk', 'nh.us', 'nhlfan.net', 'nhs.uk', 'nic.in', 'nic.tj', 'nic.za', 'nichinan.miyazaki.jp', 'nichinan.tottori.jp', 'nid.io', 'niepce.museum', 'nieruchomosci.pl', 'niigata.jp', 'niigata.niigata.jp', 'niihama.ehime.jp', 'niikappu.hokkaido.jp', 'niimi.okayama.jp', 'niiza.saitama.jp', 'nikaho.akita.jp', 'niki.hokkaido.jp', 'nikita.jp', 'nikko.tochigi.jp', 'nikolaev.ua', 'ninohe.iwate.jp', 'ninomiya.kanagawa.jp', 'nirasaki.yamanashi.jp', 'nis.za', 'nishi.fukuoka.jp', 'nishi.osaka.jp', 'nishiaizu.fukushima.jp', 'nishiarita.saga.jp', 'nishiawakura.okayama.jp', 'nishiazai.shiga.jp', 'nishigo.fukushima.jp', 'nishihara.kumamoto.jp', 'nishihara.okinawa.jp', 'nishiizu.shizuoka.jp', 'nishikata.tochigi.jp', 'nishikatsura.yamanashi.jp', 'nishikawa.yamagata.jp', 'nishimera.miyazaki.jp', 'nishinomiya.hyogo.jp', 'nishinoomote.kagoshima.jp', 'nishinoshima.shimane.jp', 'nishio.aichi.jp', 'nishiokoppe.hokkaido.jp', 'nishitosa.kochi.jp', 'nishiwaki.hyogo.jp', 'nissedal.no', 'nisshin.aichi.jp', 'niteroi.br', 'nittedal.no', 'niyodogawa.kochi.jp', 'nj.us', 'njs.jelastic.vps-host.net', 'nl-ams-1.baremetal.scw.cloud', 'nl.ca', 'nl.ci', 'nl.eu.org', 'nl.no', 'nm.cn', 'nm.us', 'no-ip.biz', 'no-ip.ca', 'no-ip.co.uk', 'no-ip.info', 'no-ip.net', 'no-ip.org', 'no.com', 'no.eu.org', 'no.it', 'nobeoka.miyazaki.jp', 'noboribetsu.hokkaido.jp', 'nobushi.jp', 'noda.chiba.jp', 'noda.iwate.jp', 'nodebalancer.linode.com', 'nodes.k8s.fr-par.scw.cloud', 'nodes.k8s.nl-ams.scw.cloud', 'nodes.k8s.pl-waw.scw.cloud', 'nog.community', 'nogata.fukuoka.jp', 'nogi.tochigi.jp', 'noheji.aomori.jp', 'noho.st', 'nohost.me', 'noip.me', 'noip.us', 'nom.ad', 'nom.ag', 'nom.br', 'nom.co', 'nom.es', 'nom.fr', 'nom.km', 'nom.mg', 'nom.nc', 'nom.ni', 'nom.pa', 'nom.pe', 'nom.pl', 'nom.re', 'nom.ro', 'nom.tm', 'nom.ve', 'nom.za', 'nombre.bo', 'nome.cv', 'nome.pt', 'nomi.ishikawa.jp', 'nonoichi.ishikawa.jp', 'noop.app', 'noor.jp', 'nord-aurdal.no', 'nord-fron.no', 'nord-odal.no', 'norddal.no', 'nordeste-idc.saveincloud.net', 'nordkapp.no', 'nordre-land.no', 'nordreisa.no', 'nore-og-uvdal.no', 'norfolk.museum', 'north-kazakhstan.su', 'north.museum', 'northflank.app', 'nose.osaka.jp', 'nosegawa.nara.jp', 'noshiro.akita.jp', 'not.br', 'notaires.fr', 'notaires.km', 'noticeable.news', 'noticias.bo', 'noto.ishikawa.jp', 'notodden.no', 'notogawa.shiga.jp', 'notteroy.no', 'nov.ru', 'nov.su', 'novara.it', 'novecore.site', 'now-dns.net', 'now-dns.org', 'now-dns.top', 'now.sh', 'nowaruda.pl', 'nozawaonsen.nagano.jp', 'nrw.museum', 'ns.ca', 'nsn.us', 'nsupdate.info', 'nsw.au', 'nsw.edu.au', 'nt.au', 'nt.ca', 'nt.edu.au', 'nt.no', 'nt.ro', 'ntdll.top', 'ntr.br', 'nu.ca', 'nu.it', 'numata.gunma.jp', 'numata.hokkaido.jp', 'numazu.shizuoka.jp', 'nuoro.it', 'nv.us', 'nx.cn', 'ny-1.paas.massivegrid.net', 'ny-2.paas.massivegrid.net', 'ny.us', 'nyaa.am', 'nyan.to', 'nyc.mn', 'nyc.museum', 'nyny.museum', 'nysa.pl', 'nyuzen.toyama.jp', 'nz.basketball', 'nz.eu.org', 'návuotna.no', 'nååmesjevuemie.no', 'nærøy.no', 'nøtterøy.no', 'o.bg', 'o.se', 'oamishirasato.chiba.jp', 'oarai.ibaraki.jp', 'obama.fukui.jp', 'obama.nagasaki.jp', 'obanazawa.yamagata.jp', 'obihiro.hokkaido.jp', 'obira.hokkaido.jp', 'obninsk.su', 'obu.aichi.jp', 'obuse.nagano.jp', 'oceanographic.museum', 'oceanographique.museum', 'ocelot.mythic-beasts.com', 'ochi.kochi.jp', 'oci.customer-oci.com', 'ocp.customer-oci.com', 'ocs.customer-oci.com', 'od.ua', 'odate.akita.jp', 'odawara.kanagawa.jp', 'odda.no', 'odesa.ua', 'odessa.ua', 'odo.br', 'oe.yamagata.jp', 'of.by', 'of.je', 'of.no', 'off.ai', 'office-on-the.net', 'official.academy', 'official.ec', 'ofunato.iwate.jp', 'og.ao', 'og.it', 'oga.akita.jp', 'ogaki.gifu.jp', 'ogano.saitama.jp', 'ogasawara.tokyo.jp', 'ogata.akita.jp', 'ogawa.ibaraki.jp', 'ogawa.nagano.jp', 'ogawa.saitama.jp', 'ogawara.miyagi.jp', 'ogi.saga.jp', 'ogimi.okinawa.jp', 'ogliastra.it', 'ogori.fukuoka.jp', 'ogose.saitama.jp', 'oguchi.aichi.jp', 'oguni.kumamoto.jp', 'oguni.yamagata.jp', 'oh.us', 'oharu.aichi.jp', 'ohda.shimane.jp', 'ohi.fukui.jp', 'ohira.miyagi.jp', 'ohira.tochigi.jp', 'ohkura.yamagata.jp', 'ohtawara.tochigi.jp', 'oi.kanagawa.jp', 'oirase.aomori.jp', 'oirm.gov.pl', 'oishida.yamagata.jp', 'oiso.kanagawa.jp', 'oita.jp', 'oita.oita.jp', 'oizumi.gunma.jp', 'oji.nara.jp', 'ojiya.niigata.jp', 'ok.us', 'okagaki.fukuoka.jp', 'okawa.fukuoka.jp', 'okawa.kochi.jp', 'okaya.nagano.jp', 'okayama.jp', 'okayama.okayama.jp', 'okazaki.aichi.jp', 'okegawa.saitama.jp', 'oketo.hokkaido.jp', 'oki.fukuoka.jp', 'okinawa.jp', 'okinawa.okinawa.jp', 'okinoshima.shimane.jp', 'okoppe.hokkaido.jp', 'oksnes.no', 'okuizumo.shimane.jp', 'okuma.fukushima.jp', 'okutama.tokyo.jp', 'ol.no', 'olawa.pl', 'olbia-tempio.it', 'olbiatempio.it', 'olecko.pl', 'olkusz.pl', 'olsztyn.pl', 'omachi.nagano.jp', 'omachi.saga.jp', 'omaezaki.shizuoka.jp', 'omaha.museum', 'omasvuotna.no', 'ome.tokyo.jp', 'omg.lol', 'omi.nagano.jp', 'omi.niigata.jp', 'omigawa.chiba.jp', 'omihachiman.shiga.jp', 'omitama.ibaraki.jp', 'omiya.saitama.jp', 'omniwe.site', 'omotego.fukushima.jp', 'omura.nagasaki.jp', 'omuta.fukuoka.jp', 'on-acorn.io', 'on-aptible.com', 'on-k3s.io', 'on-rancher.cloud', 'on-rio.io', 'on-the-web.tv', 'on-web.fr', 'on.ca', 'onagawa.miyagi.jp', 'onavstack.net', 'oncilla.mythic-beasts.com', 'ondigitalocean.app', 'onfabrica.com', 'onflashdrive.app', 'ong.br', 'onga.fukuoka.jp', 'onjuku.chiba.jp', 'online.museum', 'online.th', 'onna.okinawa.jp', 'ono.fukui.jp', 'ono.fukushima.jp', 'ono.hyogo.jp', 'onojo.fukuoka.jp', 'onomichi.hiroshima.jp', 'onporter.run', 'onred.one', 'onrender.com', 'ontario.museum', 'onthewifi.com', 'onza.mythic-beasts.com', 'ooguy.com', 'ookuwa.nagano.jp', 'oops.jp', 'ooshika.nagano.jp', 'openair.museum', 'opencraft.hosting', 'opensocial.site', 'operaunite.com', 'opoczno.pl', 'opole.pl', 'oppdal.no', 'oppegard.no', 'oppegård.no', 'or.at', 'or.bi', 'or.ci', 'or.cr', 'or.id', 'or.it', 'or.jp', 'or.ke', 'or.kr', 'or.mu', 'or.na', 'or.pw', 'or.th', 'or.tz', 'or.ug', 'or.us', 'ora.gunma.jp', 'orangecloud.tn', 'oregon.museum', 'oregontrail.museum', 'org.ac', 'org.ae', 'org.af', 'org.ag', 'org.ai', 'org.al', 'org.am', 'org.ar', 'org.au', 'org.az', 'org.ba', 'org.bb', 'org.bh', 'org.bi', 'org.bj', 'org.bm', 'org.bn', 'org.bo', 'org.br', 'org.bs', 'org.bt', 'org.bw', 'org.bz', 'org.ci', 'org.cn', 'org.co', 'org.cu', 'org.cv', 'org.cw', 'org.cy', 'org.dm', 'org.do', 'org.dz', 'org.ec', 'org.ee', 'org.eg', 'org.es', 'org.et', 'org.fj', 'org.fm', 'org.ge', 'org.gg', 'org.gh', 'org.gi', 'org.gl', 'org.gn', 'org.gp', 'org.gr', 'org.gt', 'org.gu', 'org.gy', 'org.hk', 'org.hn', 'org.ht', 'org.hu', 'org.il', 'org.im', 'org.in', 'org.iq', 'org.ir', 'org.is', 'org.je', 'org.jo', 'org.kg', 'org.ki', 'org.km', 'org.kn', 'org.kp', 'org.kw', 'org.ky', 'org.kz', 'org.la', 'org.lb', 'org.lc', 'org.lk', 'org.lr', 'org.ls', 'org.lv', 'org.ly', 'org.ma', 'org.me', 'org.mg', 'org.mk', 'org.ml', 'org.mn', 'org.mo', 'org.ms', 'org.mt', 'org.mu', 'org.mv', 'org.mw', 'org.mx', 'org.my', 'org.mz', 'org.na', 'org.ng', 'org.ni', 'org.nr', 'org.nz', 'org.om', 'org.pa', 'org.pe', 'org.pf', 'org.ph', 'org.pk', 'org.pl', 'org.pn', 'org.pr', 'org.ps', 'org.pt', 'org.py', 'org.qa', 'org.ro', 'org.rs', 'org.ru', 'org.rw', 'org.sa', 'org.sb', 'org.sc', 'org.sd', 'org.se', 'org.sg', 'org.sh', 'org.sl', 'org.sn', 'org.so', 'org.ss', 'org.st', 'org.sv', 'org.sy', 'org.sz', 'org.tj', 'org.tm', 'org.tn', 'org.to', 'org.tr', 'org.tt', 'org.tw', 'org.ua', 'org.ug', 'org.uk', 'org.uy', 'org.uz', 'org.vc', 'org.ve', 'org.vi', 'org.vn', 'org.vu', 'org.ws', 'org.ye', 'org.yt', 'org.za', 'org.zm', 'org.zw', 'oristano.it', 'orkanger.no', 'orkdal.no', 'orland.no', 'orsites.com', 'orskog.no', 'orsta.no', 'orx.biz', 'os.hedmark.no', 'os.hordaland.no', 'osaka.jp', 'osakasayama.osaka.jp', 'osaki.miyagi.jp', 'osakikamijima.hiroshima.jp', 'osasco.br', 'osen.no', 'oseto.nagasaki.jp', 'oshima.tokyo.jp', 'oshima.yamaguchi.jp', 'oshino.yamanashi.jp', 'oshu.iwate.jp', 'oslo.no', 'osoyro.no', 'osteroy.no', 'osterøy.no', 'ostre-toten.no', 'ostroda.pl', 'ostroleka.pl', 'ostrowiec.pl', 'ostrowwlkp.pl', 'osøyro.no', 'ot.it', 'ota.gunma.jp', 'ota.tokyo.jp', 'otago.museum', 'otake.hiroshima.jp', 'otaki.chiba.jp', 'otaki.nagano.jp', 'otaki.saitama.jp', 'otama.fukushima.jp', 'otap.co', 'otari.nagano.jp', 'otaru.hokkaido.jp', 'ote.bj', 'other.nf', 'oto.fukuoka.jp', 'otobe.hokkaido.jp', 'otofuke.hokkaido.jp', 'otoineppu.hokkaido.jp', 'otoyo.kochi.jp', 'otsu.shiga.jp', 'otsuchi.iwate.jp', 'otsuki.kochi.jp', 'otsuki.yamanashi.jp', 'ouchi.saga.jp', 'ouda.nara.jp', 'oum.gov.pl', 'oumu.hokkaido.jp', 'outsystemscloud.com', 'overhalla.no', 'ovre-eiker.no', 'owani.aomori.jp', 'owariasahi.aichi.jp', 'own.pm', 'ownip.net', 'ownprovider.com', 'owo.codes', 'ox.rs', 'oxa.cloud', 'oxford.museum', 'oy.lc', 'oya.to', 'oyabe.toyama.jp', 'oyama.tochigi.jp', 'oyamazaki.kyoto.jp', 'oyer.no', 'oygarden.no', 'oyodo.nara.jp', 'oystre-slidre.no', 'oz.au', 'ozora.hokkaido.jp', 'ozu.ehime.jp', 'ozu.kumamoto.jp', 'p.bg', 'p.se', 'pa.gov.br', 'pa.gov.pl', 'pa.it', 'pa.leg.br', 'pa.us', 'paas.beebyte.io', 'paas.datacenter.fi', 'paas.hosted-by-previder.com', 'paas.massivegrid.com', 'pacific.museum', 'paderborn.museum', 'padova.it', 'padua.it', 'pagefrontapp.com', 'pages.dev', 'pages.it.hs-heilbronn.de', 'pages.torproject.net', 'pages.wiardweb.com', 'pagespeedmobilizer.com', 'pagexl.com', 'palace.museum', 'paleo.museum', 'palermo.it', 'palmas.br', 'palmsprings.museum', 'panama.museum', 'panel.gg', 'pantheonsite.io', 'parachuting.aero', 'paragliding.aero', 'parallel.jp', 'parasite.jp', 'paris.eu.org', 'paris.museum', 'parliament.nz', 'parma.it', 'paroch.k12.ma.us', 'parti.se', 'pasadena.museum', 'passenger-association.aero', 'patria.bo', 'pavia.it', 'paywhirl.com', 'pb.ao', 'pb.gov.br', 'pb.leg.br', 'pc.it', 'pc.pl', 'pcloud.host', 'pd.it', 'pdns.page', 'pe.ca', 'pe.gov.br', 'pe.it', 'pe.kr', 'pe.leg.br', 'pecori.jp', 'peewee.jp', 'penne.jp', 'penza.su', 'pepper.jp', 'per.la', 'per.nf', 'per.sg', 'perma.jp', 'perso.ht', 'perso.sn', 'perso.tn', 'perspecta.cloud', 'perugia.it', 'pesaro-urbino.it', 'pesarourbino.it', 'pescara.it', 'pg.in', 'pg.it', 'pgafan.net', 'pgfog.com', 'pharmacien.fr', 'pharmaciens.km', 'pharmacy.museum', 'philadelphia.museum', 'philadelphiaarea.museum', 'philately.museum', 'phoenix.museum', 'photography.museum', 'phx.enscaled.us', 'pi.gov.br', 'pi.it', 'pi.leg.br', 'piacenza.it', 'piedmont.it', 'piemonte.it', 'pigboat.jp', 'pila.pl', 'pilot.aero', 'pilots.museum', 'pimienta.org', 'pinb.gov.pl', 'pinoko.jp', 'pippu.hokkaido.jp', 'pisa.it', 'pistoia.it', 'pisz.pl', 'pittsburgh.museum', 'piw.gov.pl', 'pixolino.com', 'pl.eu.org', 'pl.ua', 'planetarium.museum', 'plantation.museum', 'plants.museum', 'platform0.app', 'platformsh.site', 'platter-app.com', 'platter-app.dev', 'platterp.us', 'playstation-cloud.com', 'plaza.museum', 'plc.co.im', 'plc.ly', 'plc.uk', 'plesk.page', 'pleskns.com', 'plo.ps', 'plurinacional.bo', 'pmn.it', 'pn.it', 'po.gov.pl', 'po.it', 'poa.br', 'podhale.pl', 'podlasie.pl', 'podzone.net', 'podzone.org', 'point2this.com', 'pointto.us', 'poivron.org', 'pokrovsk.su', 'pol.dz', 'pol.ht', 'pol.tr', 'police.uk', 'politica.bo', 'polkowice.pl', 'poltava.ua', 'pomorskie.pl', 'pomorze.pl', 'poniatowa.pl', 'ponpes.id', 'pordenone.it', 'porsanger.no', 'porsangu.no', 'porsgrunn.no', 'porsáŋgu.no', 'port.fr', 'portal.museum', 'portland.museum', 'portlligat.museum', 'post.in', 'postman-echo.com', 'posts-and-telecommunications.museum', 'potager.org', 'potenza.it', 'powiat.pl', 'poznan.pl', 'pp.az', 'pp.ru', 'pp.se', 'pp.ua', 'ppg.br', 'pr.gov.br', 'pr.it', 'pr.leg.br', 'pr.us', 'prato.it', 'prd.fr', 'prd.km', 'prd.mg', 'prequalifyme.today', 'preservation.museum', 'presidio.museum', 'press.aero', 'press.cy', 'press.ma', 'press.museum', 'press.se', 'presse.ci', 'presse.km', 'presse.ml', 'pri.ee', 'primetel.cloud', 'principe.st', 'priv.at', 'priv.hu', 'priv.instances.scw.cloud', 'priv.me', 'priv.no', 'priv.pl', 'privatizehealthinsurance.net', 'pro.az', 'pro.br', 'pro.cy', 'pro.ec', 'pro.fj', 'pro.ht', 'pro.in', 'pro.mv', 'pro.na', 'pro.om', 'pro.pr', 'pro.tt', 'pro.typeform.com', 'pro.vn', 'prochowice.pl', 'production.aero', 'prof.pr', 'profesional.bo', 'project.museum', 'protonet.io', 'pruszkow.pl', 'prvcy.page', 'przeworsk.pl', 'psc.br', 'psi.br', 'psp.gov.pl', 'psse.gov.pl', 'pstmn.io', 'pt.eu.org', 'pt.it', 'pu.it', 'pub.instances.scw.cloud', 'pub.sa', 'publ.pt', 'public-inquiry.uk', 'public.museum', 'publishproxy.com', 'pubol.museum', 'pubtls.org', 'pueblo.bo', 'pug.it', 'puglia.it', 'pulawy.pl', 'punyu.jp', 'pup.gov.pl', 'pupu.jp', 'pussycat.jp', 'pv.it', 'pvh.br', 'pvt.ge', 'pvt.k12.ma.us', 'pya.jp', 'pyatigorsk.ru', 'pymnt.uk', 'pythonanywhere.com', 'pz.it', 'q-a.eu.org', 'q.bg', 'qa2.com', 'qbuser.com', 'qc.ca', 'qc.com', 'qcx.io', 'qh.cn', 'qld.au', 'qld.edu.au', 'qld.gov.au', 'qoto.io', 'qsl.br', 'qualifioapp.com', 'quebec.museum', 'quicksytes.com', 'quipelements.com', 'r.appspot.com', 'r.bg', 'r.cdn77.net', 'r.se', 'r2.dev', 'ra.it', 'rackmaze.com', 'rackmaze.net', 'rade.no', 'radio.am', 'radio.br', 'radio.fm', 'radom.pl', 'radoy.no', 'radøy.no', 'raffleentry.org.uk', 'rag-cloud-ch.hosteur.com', 'rag-cloud.hosteur.com', 'ragusa.it', 'rahkkeravju.no', 'raholt.no', 'railroad.museum', 'railway.museum', 'raindrop.jp', 'raisa.no', 'rakkestad.no', 'ralingen.no', 'rana.no', 'randaberg.no', 'rankoshi.hokkaido.jp', 'ranzan.saitama.jp', 'rar.ve', 'ras.ru', 'rauma.no', 'ravendb.cloud', 'ravendb.community', 'ravendb.me', 'ravendb.run', 'ravenna.it', 'ravpage.co.il', 'rawa-maz.pl', 'rc.it', 'rdv.to', 're.it', 're.kr', 'read-books.org', 'readmyblog.org', 'readthedocs.io', 'readymade.jp', 'realestate.pl', 'realm.cz', 'rebun.hokkaido.jp', 'rec.br', 'rec.co', 'rec.nf', 'rec.ro', 'rec.ve', 'recht.pro', 'recife.br', 'recreation.aero', 'red.sv', 'redirectme.net', 'reg.dk', 'reggio-calabria.it', 'reggio-emilia.it', 'reggiocalabria.it', 'reggioemilia.it', 'registration-policies-procedures-and-guidelines', 'registration-rules', 'Registry.Africa', 'reklam.hu', 'rel.ht', 'rel.pl', 'remotewd.com', 'rendalen.no', 'rennebu.no', 'rennesoy.no', 'rennesøy.no', 'rep.br', 'rep.kp', 'repbody.aero', 'repl.co', 'repl.run', 'res.aero', 'res.in', 'research.aero', 'research.museum', 'reservd.com', 'reservd.dev.thingdust.io', 'reservd.disrec.thingdust.io', 'reservd.testing.thingdust.io', 'reserve-online.com', 'reserve-online.net', 'resindevice.io', 'resistance.museum', 'restaurant.bj', 'resto.bj', 'revista.bo', 'rg.it', 'rhcloud.com', 'ri.it', 'ri.us', 'ribeirao.br', 'ric.jelastic.vps-host.net', 'rieti.it', 'rifu.miyagi.jp', 'riik.ee', 'rikubetsu.hokkaido.jp', 'rikuzentakata.iwate.jp', 'rimini.it', 'rindal.no', 'ringebu.no', 'ringerike.no', 'ringsaker.no', 'rio.br', 'riobranco.br', 'riodejaneiro.museum', 'riopreto.br', 'rishiri.hokkaido.jp', 'rishirifuji.hokkaido.jp', 'risor.no', 'rissa.no', 'risør.no', 'ritto.shiga.jp', 'rivne.ua', 'rj.gov.br', 'rj.leg.br', 'rl.no', 'rm.it', 'rn.gov.br', 'rn.it', 'rn.leg.br', 'ro.eu.org', 'ro.gov.br', 'ro.im', 'ro.it', 'ro.leg.br', 'roan.no', 'rochester.museum', 'rockart.museum', 'rocky.page', 'rodoy.no', 'rokunohe.aomori.jp', 'rollag.no', 'roma.it', 'roma.museum', 'rome.it', 'romsa.no', 'romskog.no', 'roros.no', 'rost.no', 'rotorcraft.aero', 'router.management', 'rovigo.it', 'rovno.ua', 'royal-commission.uk', 'royken.no', 'royrvik.no', 'rr.gov.br', 'rr.leg.br', 'rs.ba', 'rs.gov.br', 'rs.leg.br', 'rsc.cdn77.org', 'rss.my.id', 'rsuc.gweep.net', 'ru.com', 'ru.eu.org', 'ru.net', 'run.app', 'ruovat.no', 'russia.museum', 'rv.ua', 'rybnik.pl', 'ryd.wafaicloud.com', 'rygge.no', 'ryokami.saitama.jp', 'ryugasaki.ibaraki.jp', 'ryuoh.shiga.jp', 'rzeszow.pl', 'rzgw.gov.pl', 'ráhkkerávju.no', 'ráisa.no', 'råde.no', 'råholt.no', 'rælingen.no', 'rødøy.no', 'rømskog.no', 'røros.no', 'røst.no', 'røyken.no', 'røyrvik.no', 's.bg', 's.se', 's3-ap-northeast-1.amazonaws.com', 's3-ap-northeast-2.amazonaws.com', 's3-ap-south-1.amazonaws.com', 's3-ap-southeast-1.amazonaws.com', 's3-ap-southeast-2.amazonaws.com', 's3-ca-central-1.amazonaws.com', 's3-eu-central-1.amazonaws.com', 's3-eu-west-1.amazonaws.com', 's3-eu-west-2.amazonaws.com', 's3-eu-west-3.amazonaws.com', 's3-external-1.amazonaws.com', 's3-fips-us-gov-west-1.amazonaws.com', 's3-sa-east-1.amazonaws.com', 's3-us-east-2.amazonaws.com', 's3-us-gov-west-1.amazonaws.com', 's3-us-west-1.amazonaws.com', 's3-us-west-2.amazonaws.com', 's3-website-ap-northeast-1.amazonaws.com', 's3-website-ap-southeast-1.amazonaws.com', 's3-website-ap-southeast-2.amazonaws.com', 's3-website-eu-west-1.amazonaws.com', 's3-website-sa-east-1.amazonaws.com', 's3-website-us-east-1.amazonaws.com', 's3-website-us-west-1.amazonaws.com', 's3-website-us-west-2.amazonaws.com', 's3-website.ap-northeast-2.amazonaws.com', 's3-website.ap-south-1.amazonaws.com', 's3-website.ca-central-1.amazonaws.com', 's3-website.eu-central-1.amazonaws.com', 's3-website.eu-west-2.amazonaws.com', 's3-website.eu-west-3.amazonaws.com', 's3-website.fr-par.scw.cloud', 's3-website.nl-ams.scw.cloud', 's3-website.pl-waw.scw.cloud', 's3-website.us-east-2.amazonaws.com', 's3.amazonaws.com', 's3.ap-northeast-2.amazonaws.com', 's3.ap-south-1.amazonaws.com', 's3.ca-central-1.amazonaws.com', 's3.cn-north-1.amazonaws.com.cn', 's3.dualstack.ap-northeast-1.amazonaws.com', 's3.dualstack.ap-northeast-2.amazonaws.com', 's3.dualstack.ap-south-1.amazonaws.com', 's3.dualstack.ap-southeast-1.amazonaws.com', 's3.dualstack.ap-southeast-2.amazonaws.com', 's3.dualstack.ca-central-1.amazonaws.com', 's3.dualstack.eu-central-1.amazonaws.com', 's3.dualstack.eu-west-1.amazonaws.com', 's3.dualstack.eu-west-2.amazonaws.com', 's3.dualstack.eu-west-3.amazonaws.com', 's3.dualstack.sa-east-1.amazonaws.com', 's3.dualstack.us-east-1.amazonaws.com', 's3.dualstack.us-east-2.amazonaws.com', 's3.eu-central-1.amazonaws.com', 's3.eu-west-2.amazonaws.com', 's3.eu-west-3.amazonaws.com', 's3.fr-par.scw.cloud', 's3.nl-ams.scw.cloud', 's3.pl-waw.scw.cloud', 's3.teckids.org', 's3.us-east-2.amazonaws.com', 's5y.io', 'sa-east-1.elasticbeanstalk.com', 'sa.au', 'sa.com', 'sa.cr', 'sa.edu.au', 'sa.gov.au', 'sa.gov.pl', 'sa.it', 'sabae.fukui.jp', 'sadist.jp', 'sado.niigata.jp', 'safety.aero', 'saga.jp', 'saga.saga.jp', 'sagae.yamagata.jp', 'sagamihara.kanagawa.jp', 'saigawa.fukuoka.jp', 'saijo.ehime.jp', 'saikai.nagasaki.jp', 'saiki.oita.jp', 'saintlouis.museum', 'saitama.jp', 'saitama.saitama.jp', 'saito.miyazaki.jp', 'saka.hiroshima.jp', 'sakado.saitama.jp', 'sakae.chiba.jp', 'sakae.nagano.jp', 'sakahogi.gifu.jp', 'sakai.fukui.jp', 'sakai.ibaraki.jp', 'sakai.osaka.jp', 'sakaiminato.tottori.jp', 'sakaki.nagano.jp', 'sakata.yamagata.jp', 'sakawa.kochi.jp', 'sakegawa.yamagata.jp', 'saku.nagano.jp', 'sakuho.nagano.jp', 'sakura.chiba.jp', 'sakura.tochigi.jp', 'sakuragawa.ibaraki.jp', 'sakurai.nara.jp', 'sakyo.kyoto.jp', 'salangen.no', 'salat.no', 'salem.museum', 'salerno.it', 'saltdal.no', 'salud.bo', 'salvador.br', 'salvadordali.museum', 'salzburg.museum', 'samegawa.fukushima.jp', 'samnanger.no', 'sampa.br', 'samukawa.kanagawa.jp', 'sanagochi.tokushima.jp', 'sanda.hyogo.jp', 'sandcats.io', 'sande.more-og-romsdal.no', 'sande.møre-og-romsdal.no', 'sande.vestfold.no', 'sandefjord.no', 'sandiego.museum', 'sandnes.no', 'sandnessjoen.no', 'sandnessjøen.no', 'sandoy.no', 'sandøy.no', 'sanfrancisco.museum', 'sango.nara.jp', 'sanjo.niigata.jp', 'sannan.hyogo.jp', 'sannohe.aomori.jp', 'sano.tochigi.jp', 'sanok.pl', 'santabarbara.museum', 'santacruz.museum', 'santafe.museum', 'santamaria.br', 'santoandre.br', 'sanuki.kagawa.jp', 'saobernardo.br', 'saogonca.br', 'saotome.st', 'sapporo.jp', 'sapporo.jp', 'sar.it', 'sardegna.it', 'sardinia.it', 'saroma.hokkaido.jp', 'sarpsborg.no', 'sarufutsu.hokkaido.jp', 'sasaguri.fukuoka.jp', 'sasayama.hyogo.jp', 'sasebo.nagasaki.jp', 'saskatchewan.museum', 'sassari.it', 'satosho.okayama.jp', 'satsumasendai.kagoshima.jp', 'satte.saitama.jp', 'satx.museum', 'sauda.no', 'sauherad.no', 'savannahga.museum', 'saves-the-whales.com', 'savona.it', 'sayama.osaka.jp', 'sayama.saitama.jp', 'sayo.hyogo.jp', 'sb.ua', 'sc.cn', 'sc.gov.br', 'sc.ke', 'sc.kr', 'sc.leg.br', 'sc.ls', 'sc.tz', 'sc.ug', 'sc.us', 'scalebook.scw.cloud', 'sch.ae', 'sch.id', 'sch.ir', 'sch.jo', 'sch.lk', 'sch.ly', 'sch.ng', 'sch.qa', 'sch.sa', 'sch.so', 'sch.ss', 'sch.tf', 'sch.uk', 'sch.wf', 'sch.zm', 'schlesisches.museum', 'schoenbrunn.museum', 'schokokeks.net', 'schokoladen.museum', 'school.museum', 'school.na', 'school.nz', 'school.za', 'schoolbus.jp', 'schools.nsw.edu.au', 'schulplattform.de', 'schulserver.de', 'schweiz.museum', 'sci.eg', 'science-fiction.museum', 'science.museum', 'scienceandhistory.museum', 'scienceandindustry.museum', 'sciencecenter.museum', 'sciencecenters.museum', 'sciencehistory.museum', 'sciences.museum', 'sciencesnaturelles.museum', 'scientist.aero', 'scotland.museum', 'scrapper-site.net', 'scrapping.cc', 'scrysec.com', 'sd.cn', 'sd.us', 'sdn.gov.pl', 'sdscloud.pl', 'se.eu.org', 'se.gov.br', 'se.leg.br', 'se.net', 'seaport.museum', 'sebastopol.ua', 'sec.ps', 'secaas.hk', 'secret.jp', 'securitytactics.com', 'seg.br', 'seidat.net', 'seihi.nagasaki.jp', 'seika.kyoto.jp', 'seiro.niigata.jp', 'seirou.niigata.jp', 'seiyo.ehime.jp', 'sejny.pl', 'sekd1.beebyteapp.io', 'seki.gifu.jp', 'sekigahara.gifu.jp', 'sekikawa.niigata.jp', 'sel.no', 'selbu.no', 'selfip.biz', 'selfip.com', 'selfip.info', 'selfip.net', 'selfip.org', 'selje.no', 'seljord.no', 'sellfy.store', 'sells-for-less.com', 'sells-for-u.com', 'sells-it.net', 'sellsyourhome.org', 'semboku.akita.jp', 'semine.miyagi.jp', 'senasa.ar', 'sendai.jp', 'sendai.jp', 'sennan.osaka.jp', 'senseering.net', 'sensiosite.cloud', 'seoul.kr', 'sera.hiroshima.jp', 'seranishi.hiroshima.jp', 'servebbs.com', 'servebbs.net', 'servebbs.org', 'servebeer.com', 'serveblog.net', 'servecounterstrike.com', 'serveexchange.com', 'serveftp.com', 'serveftp.net', 'serveftp.org', 'servegame.com', 'servegame.org', 'servehalflife.com', 'servehttp.com', 'servehumour.com', 'serveirc.com', 'serveminecraft.net', 'servemp3.com', 'servep2p.com', 'servepics.com', 'servequake.com', 'servers.run', 'servesarcasm.com', 'service.gov.scot', 'service.gov.uk', 'service.one', 'services.aero', 'setagaya.tokyo.jp', 'seto.aichi.jp', 'setouchi.okayama.jp', 'settlement.museum', 'settlers.museum', 'settsu.osaka.jp', 'sevastopol.ua', 'sex.hu', 'sex.pl', 'sf.no', 'sg-1.paas.massivegrid.net', 'sh.cn', 'shacknet.nu', 'shakotan.hokkaido.jp', 'shari.hokkaido.jp', 'shell.museum', 'sherbrooke.museum', 'shibata.miyagi.jp', 'shibata.niigata.jp', 'shibecha.hokkaido.jp', 'shibetsu.hokkaido.jp', 'shibukawa.gunma.jp', 'shibuya.tokyo.jp', 'shichikashuku.miyagi.jp', 'shichinohe.aomori.jp', 'shiftcrypto.dev', 'shiftcrypto.io', 'shiftedit.io', 'shiga.jp', 'shiiba.miyazaki.jp', 'shijonawate.osaka.jp', 'shika.ishikawa.jp', 'shikabe.hokkaido.jp', 'shikama.miyagi.jp', 'shikaoi.hokkaido.jp', 'shikatsu.aichi.jp', 'shiki.saitama.jp', 'shikokuchuo.ehime.jp', 'shima.mie.jp', 'shimabara.nagasaki.jp', 'shimada.shizuoka.jp', 'shimamaki.hokkaido.jp', 'shimamoto.osaka.jp', 'shimane.jp', 'shimane.shimane.jp', 'shimizu.hokkaido.jp', 'shimizu.shizuoka.jp', 'shimoda.shizuoka.jp', 'shimodate.ibaraki.jp', 'shimofusa.chiba.jp', 'shimogo.fukushima.jp', 'shimoichi.nara.jp', 'shimoji.okinawa.jp', 'shimokawa.hokkaido.jp', 'shimokitayama.nara.jp', 'shimonita.gunma.jp', 'shimonoseki.yamaguchi.jp', 'shimosuwa.nagano.jp', 'shimotsuke.tochigi.jp', 'shimotsuma.ibaraki.jp', 'shinagawa.tokyo.jp', 'shinanomachi.nagano.jp', 'shingo.aomori.jp', 'shingu.fukuoka.jp', 'shingu.hyogo.jp', 'shingu.wakayama.jp', 'shinichi.hiroshima.jp', 'shinjo.nara.jp', 'shinjo.okayama.jp', 'shinjo.yamagata.jp', 'shinjuku.tokyo.jp', 'shinkamigoto.nagasaki.jp', 'shinonsen.hyogo.jp', 'shinshinotsu.hokkaido.jp', 'shinshiro.aichi.jp', 'shinto.gunma.jp', 'shintoku.hokkaido.jp', 'shintomi.miyazaki.jp', 'shinyoshitomi.fukuoka.jp', 'shiogama.miyagi.jp', 'shiojiri.nagano.jp', 'shioya.tochigi.jp', 'shirahama.wakayama.jp', 'shirakawa.fukushima.jp', 'shirakawa.gifu.jp', 'shirako.chiba.jp', 'shiranuka.hokkaido.jp', 'shiraoi.hokkaido.jp', 'shiraoka.saitama.jp', 'shirataka.yamagata.jp', 'shiriuchi.hokkaido.jp', 'shiroi.chiba.jp', 'shiroishi.miyagi.jp', 'shiroishi.saga.jp', 'shirosato.ibaraki.jp', 'shishikui.tokushima.jp', 'shiso.hyogo.jp', 'shisui.chiba.jp', 'shitara.aichi.jp', 'shiwa.iwate.jp', 'shizukuishi.iwate.jp', 'shizuoka.jp', 'shizuoka.shizuoka.jp', 'shobara.hiroshima.jp', 'shonai.fukuoka.jp', 'shonai.yamagata.jp', 'shoo.okayama.jp', 'shop.brendly.rs', 'shop.ht', 'shop.hu', 'shop.pl', 'shop.ro', 'shop.th', 'shoparena.pl', 'shopitsite.com', 'shopselect.net', 'shopware.store', 'show.aero', 'showa.fukushima.jp', 'showa.gunma.jp', 'showa.yamanashi.jp', 'showRegistroDominiosScreen.do', 'shunan.yamaguchi.jp', 'shw.io', 'si.eu.org', 'si.it', 'sibenik.museum', 'sic.it', 'sicilia.it', 'sicily.it', 'siellak.no', 'siena.it', 'sigdal.no', 'siiites.com', 'siljan.no', 'silk.museum', 'simple-url.com', 'simplesite.com', 'simplesite.com.br', 'simplesite.gr', 'simplesite.pl', 'sinaapp.com', 'siracusa.it', 'sirdal.no', 'site.tb-hosting.com', 'site.transip.me', 'siteleaf.net', 'sites.static.land', 'sjc.br', 'sk.ca', 'sk.eu.org', 'skanit.no', 'skanland.no', 'skaun.no', 'skedsmo.no', 'skedsmokorset.no', 'ski.museum', 'ski.no', 'skien.no', 'skierva.no', 'skiervá.no', 'skiptvet.no', 'skjak.no', 'skjervoy.no', 'skjervøy.no', 'skjåk.no', 'sklep.pl', 'sko.gov.pl', 'skoczow.pl', 'skodje.no', 'skole.museum', 'skydiving.aero', 'skygearapp.com', 'skánit.no', 'skånland.no', 'slask.pl', 'slattum.no', 'sld.do', 'sld.pa', 'slg.br', 'slupsk.pl', 'slz.br', 'sm.ua', 'small-web.org', 'smartlabeling.scw.cloud', 'smola.no', 'smushcdn.com', 'smøla.no', 'sn.cn', 'snaase.no', 'snasa.no', 'snillfjord.no', 'snoasa.no', 'snåase.no', 'snåsa.no', 'so.gov.pl', 'so.it', 'sobetsu.hokkaido.jp', 'soc.dz', 'soc.lk', 'soc.srcf.net', 'sochi.su', 'society.museum', 'sodegaura.chiba.jp', 'soeda.fukuoka.jp', 'software.aero', 'sogndal.no', 'sogne.no', 'soja.okayama.jp', 'soka.saitama.jp', 'sokndal.no', 'sola.no', 'sologne.museum', 'solund.no', 'soma.fukushima.jp', 'somna.no', 'sondre-land.no', 'sondrio.it', 'songdalen.no', 'soni.nara.jp', 'soo.kagoshima.jp', 'sopot.pl', 'sor-aurdal.no', 'sor-fron.no', 'sor-odal.no', 'sor-varanger.no', 'sorfold.no', 'sorocaba.br', 'sorreisa.no', 'sortland.no', 'sorum.no', 'sos.pl', 'sosa.chiba.jp', 'sosnowiec.pl', 'soundandvision.museum', 'soundcast.me', 'southcarolina.museum', 'southwest.museum', 'sowa.ibaraki.jp', 'sp.gov.br', 'sp.it', 'sp.leg.br', 'space-to-rent.com', 'space.museum', 'spacekit.io', 'spb.ru', 'spb.su', 'spdns.de', 'spdns.eu', 'spdns.org', 'spectrum.myjino.ru', 'sphinx.mythic-beasts.com', 'spjelkavik.no', 'sport.hu', 'spy.museum', 'spydeberg.no', 'square.museum', 'square7.ch', 'square7.de', 'square7.net', 'sr.gov.pl', 'sr.it', 'srht.site', 'srv.br', 'ss.it', 'ssl.origin.cdn77-secure.org', 'st.no', 'staba.jp', 'stackhero-network.com', 'stadt.museum', 'stage.nodeart.io', 'staging.onred.one', 'stalbans.museum', 'stalowa-wola.pl', 'stange.no', 'starachowice.pl', 'stargard.pl', 'starnberg.museum', 'starostwo.gov.pl', 'stat.no', 'state.museum', 'stateofdelaware.museum', 'stathelle.no', 'static-access.net', 'static.land', 'static.observableusercontent.com', 'statics.cloud', 'station.museum', 'stavanger.no', 'stavern.no', 'steam.museum', 'steiermark.museum', 'steigen.no', 'steinkjer.no', 'stg-builder.code.com', 'stg.dev', 'stgstage.dev', 'sth.ac.at', 'stjohn.museum', 'stjordal.no', 'stjordalshalsen.no', 'stjørdal.no', 'stjørdalshalsen.no', 'stockholm.museum', 'stokke.no', 'stolos.io', 'stor-elvdal.no', 'storage.yandexcloud.net', 'stord.no', 'stordal.no', 'store.bb', 'store.dk', 'store.nf', 'store.ro', 'store.st', 'store.ve', 'storebase.store', 'storfjord.no', 'storj.farm', 'stpetersburg.museum', 'strand.no', 'stranda.no', 'streamlitapp.com', 'stripper.jp', 'stryn.no', 'student.aero', 'stuff-4-sale.org', 'stuff-4-sale.us', 'stufftoread.com', 'stuttgart.museum', 'su.paba.se', 'sub.jp', 'sue.fukuoka.jp', 'suedtirol.it', 'suginami.tokyo.jp', 'sugito.saitama.jp', 'suifu.ibaraki.jp', 'suisse.museum', 'suita.osaka.jp', 'sukagawa.fukushima.jp', 'sukumo.kochi.jp', 'sula.no', 'suldal.no', 'suli.hu', 'sumida.tokyo.jp', 'sumita.iwate.jp', 'sumoto.hyogo.jp', 'sumoto.kumamoto.jp', 'sumy.ua', 'sunagawa.hokkaido.jp', 'sund.no', 'sunndal.no', 'sunnyday.jp', 'supabase.co', 'supabase.in', 'supabase.net', 'supersale.jp', 'surgeonshall.museum', 'surnadal.no', 'surrey.museum', 'susaki.kochi.jp', 'susono.shizuoka.jp', 'suwa.nagano.jp', 'suwalki.pl', 'suzaka.nagano.jp', 'suzu.ishikawa.jp', 'suzuka.mie.jp', 'sv.it', 'svalbard.no', 'svc.firenet.ch', 'sveio.no', 'svelvik.no', 'svizzera.museum', 'svn-repos.de', 'sweden.museum', 'sweetpepper.org', 'swidnica.pl', 'swidnik.pl', 'swiebodzin.pl', 'swinoujscie.pl', 'sx.cn', 'sydney.museum', 'sykkylven.no', 'syncloud.it', 'syno-ds.de', 'synology-diskstation.de', 'synology-ds.de', 'synology.me', 'sys.qcx.io', 'sytes.net', 'szczecin.pl', 'szczytno.pl', 'szex.hu', 'szkola.pl', 'sálat.no', 'sálát.no', 'søgne.no', 'sømna.no', 'søndre-land.no', 'sør-aurdal.no', 'sør-fron.no', 'sør-odal.no', 'sør-varanger.no', 'sørfold.no', 'sørreisa.no', 'sørum.no', 'südtirol.it', 't.bg', 't.se', 't3l3p0rt.net', 'ta.it', 'taa.it', 'tabayama.yamanashi.jp', 'tabitorder.co.il', 'tabuse.yamaguchi.jp', 'tachiarai.fukuoka.jp', 'tachikawa.tokyo.jp', 'tadaoka.osaka.jp', 'tado.mie.jp', 'tadotsu.kagawa.jp', 'tagajo.miyagi.jp', 'tagami.niigata.jp', 'tagawa.fukuoka.jp', 'tahara.aichi.jp', 'taifun-dns.de', 'taiji.wakayama.jp', 'taiki.hokkaido.jp', 'taiki.mie.jp', 'tainai.niigata.jp', 'taira.toyama.jp', 'taishi.hyogo.jp', 'taishi.osaka.jp', 'taishin.fukushima.jp', 'taito.tokyo.jp', 'taiwa.miyagi.jp', 'tajimi.gifu.jp', 'tajiri.osaka.jp', 'taka.hyogo.jp', 'takagi.nagano.jp', 'takahagi.ibaraki.jp', 'takahama.aichi.jp', 'takahama.fukui.jp', 'takaharu.miyazaki.jp', 'takahashi.okayama.jp', 'takahata.yamagata.jp', 'takaishi.osaka.jp', 'takamatsu.kagawa.jp', 'takamori.kumamoto.jp', 'takamori.nagano.jp', 'takanabe.miyazaki.jp', 'takanezawa.tochigi.jp', 'takaoka.toyama.jp', 'takarazuka.hyogo.jp', 'takasago.hyogo.jp', 'takasaki.gunma.jp', 'takashima.shiga.jp', 'takasu.hokkaido.jp', 'takata.fukuoka.jp', 'takatori.nara.jp', 'takatsuki.osaka.jp', 'takatsuki.shiga.jp', 'takayama.gifu.jp', 'takayama.gunma.jp', 'takayama.nagano.jp', 'takazaki.miyazaki.jp', 'takehara.hiroshima.jp', 'taketa.oita.jp', 'taketomi.okinawa.jp', 'taki.mie.jp', 'takikawa.hokkaido.jp', 'takino.hyogo.jp', 'takinoue.hokkaido.jp', 'takko.aomori.jp', 'tako.chiba.jp', 'taku.saga.jp', 'tama.tokyo.jp', 'tamakawa.fukushima.jp', 'tamaki.mie.jp', 'tamamura.gunma.jp', 'tamano.okayama.jp', 'tamatsukuri.ibaraki.jp', 'tamayu.shimane.jp', 'tamba.hyogo.jp', 'tana.no', 'tanabe.kyoto.jp', 'tanabe.wakayama.jp', 'tanagura.fukushima.jp', 'tananger.no', 'tank.museum', 'tanohata.iwate.jp', 'tara.saga.jp', 'tarama.okinawa.jp', 'taranto.it', 'targi.pl', 'tarnobrzeg.pl', 'tarui.gifu.jp', 'tarumizu.kagoshima.jp', 'tas.au', 'tas.edu.au', 'tas.gov.au', 'tashkent.su', 'tatebayashi.gunma.jp', 'tateshina.nagano.jp', 'tateyama.chiba.jp', 'tateyama.toyama.jp', 'tatsuno.hyogo.jp', 'tatsuno.nagano.jp', 'tawaramoto.nara.jp', 'taxi.br', 'tc.br', 'tcm.museum', 'tcp4.me', 'te.it', 'te.ua', 'teaches-yoga.com', 'tec.br', 'tec.mi.us', 'tec.ve', 'tech.orange', 'technology.museum', 'tecnologia.bo', 'tel.tr', 'tele.amune.org', 'telebit.app', 'telebit.io', 'telebit.xyz', 'telekommunikation.museum', 'television.museum', 'temp-dns.com', 'tempio-olbia.it', 'tempioolbia.it', 'tempurl.host', 'tendo.yamagata.jp', 'tenei.fukushima.jp', 'tenkawa.nara.jp', 'tenri.nara.jp', 'teo.br', 'teramo.it', 'termez.su', 'terni.it', 'ternopil.ua', 'teshikaga.hokkaido.jp', 'test-iserv.de', 'test.ru', 'test.tj', 'texas.museum', 'textile.museum', 'tgory.pl', 'the.br', 'theater.museum', 'theshop.jp', 'theworkpc.com', 'thick.jp', 'thingdustdata.com', 'thruhere.net', 'tickets.io', 'time.museum', 'time.no', 'timekeeping.museum', 'tingvoll.no', 'tinn.no', 'tj.cn', 'tjeldsund.no', 'tjome.no', 'tjøme.no', 'tksat.bo', 'tlon.network', 'tm.cy', 'tm.dz', 'tm.fr', 'tm.hu', 'tm.km', 'tm.mc', 'tm.mg', 'tm.no', 'tm.pl', 'tm.ro', 'tm.se', 'tm.za', 'tmp.br', 'tn.it', 'tn.oxa.cloud', 'tn.us', 'to.gov.br', 'to.gt', 'to.it', 'to.leg.br', 'to.md', 'toba.mie.jp', 'tobe.ehime.jp', 'tobetsu.hokkaido.jp', 'tobishima.aichi.jp', 'tochigi.jp', 'tochigi.tochigi.jp', 'tochio.niigata.jp', 'toda.saitama.jp', 'toei.aichi.jp', 'toga.toyama.jp', 'togakushi.nagano.jp', 'togane.chiba.jp', 'togitsu.nagasaki.jp', 'togliatti.su', 'togo.aichi.jp', 'togura.nagano.jp', 'tohma.hokkaido.jp', 'tohnosho.chiba.jp', 'toho.fukuoka.jp', 'tokai.aichi.jp', 'tokai.ibaraki.jp', 'tokamachi.niigata.jp', 'tokashiki.okinawa.jp', 'toki.gifu.jp', 'tokigawa.saitama.jp', 'tokke.no', 'tokoname.aichi.jp', 'tokorozawa.saitama.jp', 'tokushima.jp', 'tokushima.tokushima.jp', 'tokuyama.yamaguchi.jp', 'tokyo.jp', 'tolga.no', 'tomakomai.hokkaido.jp', 'tomari.hokkaido.jp', 'tome.miyagi.jp', 'tomi.nagano.jp', 'tomigusuku.okinawa.jp', 'tomika.gifu.jp', 'tomioka.gunma.jp', 'tomisato.chiba.jp', 'tomiya.miyagi.jp', 'tomobe.ibaraki.jp', 'tonaki.okinawa.jp', 'tonami.toyama.jp', 'tondabayashi.osaka.jp', 'tone.ibaraki.jp', 'tonkotsu.jp', 'tono.iwate.jp', 'tonosho.kagawa.jp', 'tonsberg.no', 'toolforge.org', 'toon.ehime.jp', 'topology.museum', 'torahime.shiga.jp', 'toride.ibaraki.jp', 'torino.it', 'torino.museum', 'torproject.net', 'torsken.no', 'tos.it', 'tosa.kochi.jp', 'tosashimizu.kochi.jp', 'toscana.it', 'toshima.tokyo.jp', 'tosu.saga.jp', 'tottori.jp', 'tottori.tottori.jp', 'touch.museum', 'tourism.bj', 'tourism.pl', 'tourism.tn', 'towada.aomori.jp', 'town.museum', 'townnews-staging.com', 'toya.hokkaido.jp', 'toyako.hokkaido.jp', 'toyama.jp', 'toyama.toyama.jp', 'toyo.kochi.jp', 'toyoake.aichi.jp', 'toyohashi.aichi.jp', 'toyokawa.aichi.jp', 'toyonaka.osaka.jp', 'toyone.aichi.jp', 'toyono.osaka.jp', 'toyooka.hyogo.jp', 'toyosato.shiga.jp', 'toyota.aichi.jp', 'toyota.yamaguchi.jp', 'toyotomi.hokkaido.jp', 'toyotsu.fukuoka.jp', 'toyoura.hokkaido.jp', 'tozawa.yamagata.jp', 'tozsde.hu', 'tp.it', 'tr.eu.org', 'tr.it', 'tr.no', 'tra.kp', 'trader.aero', 'trading.aero', 'traeumtgerade.de', 'trafficplex.cloud', 'trainer.aero', 'trana.no', 'tranby.no', 'trani-andria-barletta.it', 'trani-barletta-andria.it', 'traniandriabarletta.it', 'tranibarlettaandria.it', 'tranoy.no', 'translate.goog', 'translated.page', 'transport.museum', 'transporte.bo', 'transurl.be', 'transurl.eu', 'transurl.nl', 'tranøy.no', 'trapani.it', 'travel.in', 'travel.pl', 'travel.tt', 'trd.br', 'tree.museum', 'trentin-sud-tirol.it', 'trentin-sudtirol.it', 'trentin-sued-tirol.it', 'trentin-suedtirol.it', 'trentin-süd-tirol.it', 'trentin-südtirol.it', 'trentino-a-adige.it', 'trentino-aadige.it', 'trentino-alto-adige.it', 'trentino-altoadige.it', 'trentino-s-tirol.it', 'trentino-stirol.it', 'trentino-sud-tirol.it', 'trentino-sudtirol.it', 'trentino-sued-tirol.it', 'trentino-suedtirol.it', 'trentino-süd-tirol.it', 'trentino-südtirol.it', 'trentino.it', 'trentinoa-adige.it', 'trentinoaadige.it', 'trentinoalto-adige.it', 'trentinoaltoadige.it', 'trentinos-tirol.it', 'trentinostirol.it', 'trentinosud-tirol.it', 'trentinosudtirol.it', 'trentinosued-tirol.it', 'trentinosuedtirol.it', 'trentinosüd-tirol.it', 'trentinosüdtirol.it', 'trentinsud-tirol.it', 'trentinsudtirol.it', 'trentinsued-tirol.it', 'trentinsuedtirol.it', 'trentinsüd-tirol.it', 'trentinsüdtirol.it', 'trento.it', 'treviso.it', 'trieste.it', 'triton.zone', 'troandin.no', 'trogstad.no', 'troitsk.su', 'trolley.museum', 'tromsa.no', 'tromso.no', 'tromsø.no', 'trondheim.no', 'trust.museum', 'trustee.museum', 'try-snowplow.com', 'trycloudflare.com', 'trysil.no', 'træna.no', 'trøgstad.no', 'ts.it', 'ts.net', 'tselinograd.su', 'tsk.tr', 'tst.site', 'tsu.mie.jp', 'tsubame.niigata.jp', 'tsubata.ishikawa.jp', 'tsubetsu.hokkaido.jp', 'tsuchiura.ibaraki.jp', 'tsuga.tochigi.jp', 'tsugaru.aomori.jp', 'tsuiki.fukuoka.jp', 'tsukigata.hokkaido.jp', 'tsukiyono.gunma.jp', 'tsukuba.ibaraki.jp', 'tsukui.kanagawa.jp', 'tsukumi.oita.jp', 'tsumagoi.gunma.jp', 'tsunan.niigata.jp', 'tsuno.kochi.jp', 'tsuno.miyazaki.jp', 'tsuru.yamanashi.jp', 'tsuruga.fukui.jp', 'tsurugashima.saitama.jp', 'tsurugi.ishikawa.jp', 'tsuruoka.yamagata.jp', 'tsuruta.aomori.jp', 'tsushima.aichi.jp', 'tsushima.nagasaki.jp', 'tsuwano.shimane.jp', 'tsuyama.okayama.jp', 'tt.im', 'tula.su', 'tuleap-partners.com', 'tunk.org', 'tur.ar', 'tur.br', 'turek.pl', 'turin.it', 'turystyka.pl', 'tuscany.it', 'tuva.su', 'tuxfamily.org', 'tv.bb', 'tv.bo', 'tv.br', 'tv.im', 'tv.in', 'tv.it', 'tv.kg', 'tv.na', 'tv.sd', 'tv.tr', 'tv.tz', 'tvedestrand.no', 'tw.cn', 'twmail.cc', 'twmail.net', 'twmail.org', 'tx.us', 'tychy.pl', 'tydal.no', 'tynset.no', 'typedream.app', 'tysfjord.no', 'tysnes.no', 'tysvar.no', 'tysvær.no', 'tønsberg.no', 'u.bg', 'u.channelsdvr.net', 'u.se', 'u2-local.xnbay.com', 'u2.xnbay.com', 'ua.rs', 'ube.yamaguchi.jp', 'uber.space', 'uberspace.de', 'uchihara.ibaraki.jp', 'uchiko.ehime.jp', 'uchinada.ishikawa.jp', 'uchinomi.kagawa.jp', 'ud.it', 'uda.nara.jp', 'udi.br', 'udine.it', 'udono.mie.jp', 'ueda.nagano.jp', 'ueno.gunma.jp', 'uenohara.yamanashi.jp', 'ufcfan.org', 'ug.gov.pl', 'ugim.gov.pl', 'uhren.museum', 'ui.nabu.casa', 'uji.kyoto.jp', 'ujiie.tochigi.jp', 'ujitawara.kyoto.jp', 'uk.com', 'uk.eu.org', 'uk.in', 'uk.kg', 'uk.net', 'uk.oxa.cloud', 'uk.primetel.cloud', 'uk.reclaim.cloud', 'uk0.bigv.io', 'uki.kumamoto.jp', 'ukiha.fukuoka.jp', 'ullensaker.no', 'ullensvang.no', 'ulm.museum', 'ulsan.kr', 'ulvik.no', 'um.gov.pl', 'umaji.kochi.jp', 'umb.it', 'umbria.it', 'umi.fukuoka.jp', 'umig.gov.pl', 'unazuki.toyama.jp', 'under.jp', 'undersea.museum', 'uni5.net', 'unicloud.pl', 'union.aero', 'univ.bj', 'univ.sn', 'university.museum', 'unjarga.no', 'unjárga.no', 'unnan.shimane.jp', 'unusualperson.com', 'unzen.nagasaki.jp', 'uonuma.niigata.jp', 'uozu.toyama.jp', 'up.in', 'upaas.kazteleport.kz', 'upli.io', 'upow.gov.pl', 'upper.jp', 'uppo.gov.pl', 'urakawa.hokkaido.jp', 'urasoe.okinawa.jp', 'urausu.hokkaido.jp', 'urawa.saitama.jp', 'urayasu.chiba.jp', 'urbino-pesaro.it', 'urbinopesaro.it', 'ureshino.mie.jp', 'uri.arpa', 'url.tw', 'urn.arpa', 'urown.cloud', 'uruma.okinawa.jp', 'uryu.hokkaido.jp', 'us-1.evennode.com', 'us-2.evennode.com', 'us-3.evennode.com', 'us-4.evennode.com', 'us-east-1.amazonaws.com', 'us-east-1.elasticbeanstalk.com', 'us-east-2.elasticbeanstalk.com', 'us-gov-west-1.elasticbeanstalk.com', 'us-west-1.elasticbeanstalk.com', 'us-west-2.elasticbeanstalk.com', 'us.ax', 'us.com', 'us.eu.org', 'us.gov.pl', 'us.in', 'us.kg', 'us.na', 'us.org', 'us.platform.sh', 'us.reclaim.cloud', 'usa.museum', 'usa.oita.jp', 'usantiques.museum', 'usarts.museum', 'uscountryestate.museum', 'usculture.museum', 'usdecorativearts.museum', 'user.aseinet.ne.jp', 'user.fm', 'user.localcert.dev', 'user.party.eus', 'user.srcf.net', 'usercontent.goog', 'usercontent.jp', 'users.scale.virtualcloud.com.br', 'usgarden.museum', 'ushiku.ibaraki.jp', 'ushistory.museum', 'ushuaia.museum', 'uslivinghistory.museum', 'usr.cloud.muni.cz', 'ustka.pl', 'usui.fukuoka.jp', 'usuki.oita.jp', 'ut.us', 'utah.museum', 'utashinai.hokkaido.jp', 'utazas.hu', 'utazu.kagawa.jp', 'uto.kumamoto.jp', 'utsira.no', 'utsunomiya.tochigi.jp', 'utwente.io', 'uvic.museum', 'uw.gov.pl', 'uwajima.ehime.jp', 'uwu.ai', 'uy.com', 'uz.ua', 'uzhgorod.ua', 'uzs.gov.pl', 'v-info.info', 'v.bg', 'v.ua', 'va.it', 'va.no', 'va.us', 'vaapste.no', 'vadso.no', 'vadsø.no', 'vaga.no', 'vagan.no', 'vagsoy.no', 'vaksdal.no', 'val-d-aosta.it', 'val-daosta.it', 'vald-aosta.it', 'valdaosta.it', 'valer.hedmark.no', 'valer.ostfold.no', 'valle-aosta.it', 'valle-d-aosta.it', 'valle-daosta.it', 'valle.no', 'valleaosta.it', 'valled-aosta.it', 'valledaosta.it', 'vallee-aoste.it', 'vallee-d-aoste.it', 'valleeaoste.it', 'valleedaoste.it', 'valley.museum', 'vallée-aoste.it', 'vallée-d-aoste.it', 'valléeaoste.it', 'valléedaoste.it', 'vang.no', 'vantaa.museum', 'vanylven.no', 'vao.it', 'vapor.cloud', 'vaporcloud.io', 'vardo.no', 'vardø.no', 'varese.it', 'varggat.no', 'varoy.no', 'vb.it', 'vc.it', 'vda.it', 've.it', 'vefsn.no', 'vega.no', 'vegarshei.no', 'vegårshei.no', 'velvet.jp', 'ven.it', 'veneto.it', 'venezia.it', 'venice.it', 'vennesla.no', 'verbania.it', 'vercel.app', 'vercel.dev', 'vercelli.it', 'verdal.no', 'verona.it', 'verran.no', 'versailles.museum', 'verse.jp', 'versus.jp', 'vestby.no', 'vestnes.no', 'vestre-slidre.no', 'vestre-toten.no', 'vestvagoy.no', 'vestvågøy.no', 'vet.br', 'veterinaire.fr', 'veterinaire.km', 'vevelstad.no', 'vf.no', 'vfs.cloud9.af-south-1.amazonaws.com', 'vfs.cloud9.ap-east-1.amazonaws.com', 'vfs.cloud9.ap-northeast-1.amazonaws.com', 'vfs.cloud9.ap-northeast-2.amazonaws.com', 'vfs.cloud9.ap-northeast-3.amazonaws.com', 'vfs.cloud9.ap-south-1.amazonaws.com', 'vfs.cloud9.ap-southeast-1.amazonaws.com', 'vfs.cloud9.ap-southeast-2.amazonaws.com', 'vfs.cloud9.ca-central-1.amazonaws.com', 'vfs.cloud9.eu-central-1.amazonaws.com', 'vfs.cloud9.eu-north-1.amazonaws.com', 'vfs.cloud9.eu-south-1.amazonaws.com', 'vfs.cloud9.eu-west-1.amazonaws.com', 'vfs.cloud9.eu-west-2.amazonaws.com', 'vfs.cloud9.eu-west-3.amazonaws.com', 'vfs.cloud9.me-south-1.amazonaws.com', 'vfs.cloud9.sa-east-1.amazonaws.com', 'vfs.cloud9.us-east-1.amazonaws.com', 'vfs.cloud9.us-east-2.amazonaws.com', 'vfs.cloud9.us-west-1.amazonaws.com', 'vfs.cloud9.us-west-2.amazonaws.com', 'vgs.no', 'vi.it', 'vi.us', 'vibo-valentia.it', 'vibovalentia.it', 'vic.au', 'vic.edu.au', 'vic.gov.au', 'vicenza.it', 'video.hu', 'vik.no', 'viking.museum', 'vikna.no', 'village.museum', 'vindafjord.no', 'vinnica.ua', 'vinnytsia.ua', 'vip.jelastic.cloud', 'vipsinaapp.com', 'virginia.museum', 'virtual-user.de', 'virtual.museum', 'virtualserver.io', 'virtualuser.de', 'virtuel.museum', 'viterbo.it', 'vivian.jp', 'vix.br', 'vlaanderen.museum', 'vladikavkaz.ru', 'vladikavkaz.su', 'vladimir.ru', 'vladimir.su', 'vlog.br', 'vm.bytemark.co.uk', 'vn.ua', 'voagat.no', 'volda.no', 'volkenkunde.museum', 'vologda.su', 'volyn.ua', 'voorloper.cloud', 'voss.no', 'vossevangen.no', 'vp4.me', 'vpndns.net', 'vpnplus.to', 'vps-host.net', 'vps.mcdir.ru', 'vps.myjino.ru', 'vr.it', 'vs.it', 'vs.mythic-beasts.com', 'vt.it', 'vt.us', 'vultrobjects.com', 'vv.it', 'vxl.sh', 'várggát.no', 'vågan.no', 'vågsøy.no', 'vågå.no', 'våler.hedmark.no', 'våler.østfold.no', 'værøy.no', 'w.bg', 'w.se', 'wa.au', 'wa.edu.au', 'wa.gov.au', 'wa.us', 'wada.nagano.jp', 'wafflecell.com', 'wajiki.tokushima.jp', 'wajima.ishikawa.jp', 'wakasa.fukui.jp', 'wakasa.tottori.jp', 'wakayama.jp', 'wakayama.wakayama.jp', 'wake.okayama.jp', 'wakkanai.hokkaido.jp', 'wakuya.miyagi.jp', 'walbrzych.pl', 'wales.museum', 'wallonie.museum', 'wanouchi.gifu.jp', 'war.museum', 'warabi.saitama.jp', 'warmia.pl', 'warszawa.pl', 'washingtondc.museum', 'washtenaw.mi.us', 'wassamu.hokkaido.jp', 'watarai.mie.jp', 'watari.miyagi.jp', 'watch-and-clock.museum', 'watchandclock.museum', 'watson.jp', 'waw.pl', 'wazuka.kyoto.jp', 'we.bs', 'we.tc', 'web.app', 'web.bo', 'web.co', 'web.do', 'web.gu', 'web.id', 'web.in', 'web.lk', 'web.nf', 'web.ni', 'web.pk', 'web.tj', 'web.tr', 'web.ve', 'web.za', 'webhare.dev', 'webhop.biz', 'webhop.info', 'webhop.me', 'webhop.net', 'webhop.org', 'webhosting.be', 'weblike.jp', 'webpaas.ovh.net', 'webredirect.org', 'website.yandexcloud.net', 'webspace.rocks', 'webthings.io', 'webview-assets.cloud9.af-south-1.amazonaws.com', 'webview-assets.cloud9.ap-east-1.amazonaws.com', 'webview-assets.cloud9.ap-northeast-1.amazonaws.com', 'webview-assets.cloud9.ap-northeast-2.amazonaws.com', 'webview-assets.cloud9.ap-northeast-3.amazonaws.com', 'webview-assets.cloud9.ap-south-1.amazonaws.com', 'webview-assets.cloud9.ap-southeast-1.amazonaws.com', 'webview-assets.cloud9.ap-southeast-2.amazonaws.com', 'webview-assets.cloud9.ca-central-1.amazonaws.com', 'webview-assets.cloud9.eu-central-1.amazonaws.com', 'webview-assets.cloud9.eu-north-1.amazonaws.com', 'webview-assets.cloud9.eu-south-1.amazonaws.com', 'webview-assets.cloud9.eu-west-1.amazonaws.com', 'webview-assets.cloud9.eu-west-2.amazonaws.com', 'webview-assets.cloud9.eu-west-3.amazonaws.com', 'webview-assets.cloud9.me-south-1.amazonaws.com', 'webview-assets.cloud9.sa-east-1.amazonaws.com', 'webview-assets.cloud9.us-east-1.amazonaws.com', 'webview-assets.cloud9.us-east-2.amazonaws.com', 'webview-assets.cloud9.us-west-1.amazonaws.com', 'webview-assets.cloud9.us-west-2.amazonaws.com', 'wedeploy.io', 'wedeploy.me', 'wedeploy.sh', 'weeklylottery.org.uk', 'wegrow.pl', 'wellbeingzone.co.uk', 'wellbeingzone.eu', 'west1-us.cloudjiffy.net', 'western.museum', 'westeurope.azurestaticapps.net', 'westfalen.museum', 'westus2.azurestaticapps.net', 'whaling.museum', 'whitesnow.jp', 'whm.fr-par.scw.cloud', 'whm.nl-ams.scw.cloud', 'wi.us', 'wielun.pl', 'wien.funkfeuer.at', 'wif.gov.pl', 'wiih.gov.pl', 'wiki.bo', 'wiki.br', 'wildlife.museum', 'williamsburg.museum', 'winb.gov.pl', 'windmill.museum', 'wios.gov.pl', 'witd.gov.pl', 'withgoogle.com', 'withyoutube.com', 'wiw.gov.pl', 'wixsite.com', 'wlocl.pl', 'wloclawek.pl', 'wmcloud.org', 'wmflabs.org', 'wnext.app', 'wodzislaw.pl', 'wolomin.pl', 'woltlab-demo.com', 'workers.dev', 'workinggroup.aero', 'workisboring.com', 'works.aero', 'workshop.museum', 'worse-than.tv', 'wpdevcloud.com', 'wpenginepowered.com', 'wphostedmail.com', 'wpmucdn.com', 'wpmudev.host', 'writesthisblog.com', 'wroc.pl', 'wroclaw.pl', 'ws.na', 'wsa.gov.pl', 'wskr.gov.pl', 'wuoz.gov.pl', 'wv.us', 'www.ck', 'www.ro', 'wy.us', 'wzmiuw.gov.pl', 'x.bg', 'x.mythic-beasts.com', 'x.se', 'x443.pw', 'xen.prgmr.com', 'xj.cn', 'xnbay.com', 'xs4all.space', 'xx.gl', 'xy.ax', 'xz.cn', 'y.bg', 'y.se', 'yabu.hyogo.jp', 'yabuki.fukushima.jp', 'yachimata.chiba.jp', 'yachiyo.chiba.jp', 'yachiyo.ibaraki.jp', 'yaese.okinawa.jp', 'yahaba.iwate.jp', 'yahiko.niigata.jp', 'yaita.tochigi.jp', 'yaizu.shizuoka.jp', 'yakage.okayama.jp', 'yakumo.hokkaido.jp', 'yakumo.shimane.jp', 'yali.mythic-beasts.com', 'yalta.ua', 'yamada.fukuoka.jp', 'yamada.iwate.jp', 'yamada.toyama.jp', 'yamaga.kumamoto.jp', 'yamagata.gifu.jp', 'yamagata.ibaraki.jp', 'yamagata.jp', 'yamagata.nagano.jp', 'yamagata.yamagata.jp', 'yamaguchi.jp', 'yamakita.kanagawa.jp', 'yamamoto.miyagi.jp', 'yamanakako.yamanashi.jp', 'yamanashi.jp', 'yamanashi.yamanashi.jp', 'yamanobe.yamagata.jp', 'yamanouchi.nagano.jp', 'yamashina.kyoto.jp', 'yamato.fukushima.jp', 'yamato.kanagawa.jp', 'yamato.kumamoto.jp', 'yamatokoriyama.nara.jp', 'yamatotakada.nara.jp', 'yamatsuri.fukushima.jp', 'yamazoe.nara.jp', 'yame.fukuoka.jp', 'yanagawa.fukuoka.jp', 'yanaizu.fukushima.jp', 'yandexcloud.net', 'yao.osaka.jp', 'yaotsu.gifu.jp', 'yasaka.nagano.jp', 'yashio.saitama.jp', 'yashiro.hyogo.jp', 'yasu.shiga.jp', 'yasuda.kochi.jp', 'yasugi.shimane.jp', 'yasuoka.nagano.jp', 'yatomi.aichi.jp', 'yatsuka.shimane.jp', 'yatsushiro.kumamoto.jp', 'yawara.ibaraki.jp', 'yawata.kyoto.jp', 'yawatahama.ehime.jp', 'yazu.tottori.jp', 'ybo.faith', 'ybo.party', 'ybo.review', 'ybo.science', 'ybo.trade', 'yk.ca', 'yn.cn', 'ynh.fr', 'yoichi.hokkaido.jp', 'yoita.niigata.jp', 'yoka.hyogo.jp', 'yokaichiba.chiba.jp', 'yokawa.hyogo.jp', 'yokkaichi.mie.jp', 'yokohama.jp', 'yokohama.jp', 'yokoshibahikari.chiba.jp', 'yokosuka.kanagawa.jp', 'yokote.akita.jp', 'yokoze.saitama.jp', 'yolasite.com', 'yombo.me', 'yomitan.okinawa.jp', 'yonabaru.okinawa.jp', 'yonago.tottori.jp', 'yonaguni.okinawa.jp', 'yonezawa.yamagata.jp', 'yono.saitama.jp', 'yorii.saitama.jp', 'york.museum', 'yorkshire.museum', 'yoro.gifu.jp', 'yosemite.museum', 'yoshida.saitama.jp', 'yoshida.shizuoka.jp', 'yoshikawa.saitama.jp', 'yoshimi.saitama.jp', 'yoshino.nara.jp', 'yoshinogari.saga.jp', 'yoshioka.gunma.jp', 'yotsukaido.chiba.jp', 'youth.museum', 'yuasa.wakayama.jp', 'yufu.oita.jp', 'yugawa.fukushima.jp', 'yugawara.kanagawa.jp', 'yuki.ibaraki.jp', 'yukuhashi.fukuoka.jp', 'yura.wakayama.jp', 'yurihonjo.akita.jp', 'yusuhara.kochi.jp', 'yusui.kagoshima.jp', 'yuu.yamaguchi.jp', 'yuza.yamagata.jp', 'yuzawa.niigata.jp', 'z.bg', 'z.se', 'za.bz', 'za.com', 'za.net', 'za.org', 'zachpomor.pl', 'zagan.pl', 'zakopane.pl', 'zama.kanagawa.jp', 'zamami.okinawa.jp', 'zao.miyagi.jp', 'zaporizhzhe.ua', 'zaporizhzhia.ua', 'zapto.org', 'zapto.xyz', 'zarow.pl', 'zentsuji.kagawa.jp', 'zgora.pl', 'zgorzelec.pl', 'zhitomir.ua', 'zhytomyr.ua', 'zj.cn', 'zlg.br', 'zombie.jp', 'zoological.museum', 'zoology.museum', 'zp.gov.pl', 'zp.ua', 'zt.ua', 'zushi.kanagawa.jp', 'ákŋoluokta.no', 'álaheadju.no', 'áltá.no', 'åfjord.no', 'åkrehamn.no', 'ål.no', 'ålesund.no', 'ålgård.no', 'åmli.no', 'åmot.no', 'årdal.no', 'ås.no', 'åseral.no', 'åsnes.no', 'øksnes.no', 'ørland.no', 'ørskog.no', 'ørsta.no', 'østre-toten.no', 'øvre-eiker.no', 'øyer.no', 'øygarden.no', 'øystre-slidre.no', 'čáhcesuolo.no', 'ак.срб', 'биз.рус', 'иком.museum', 'ком.рус', 'крым.рус', 'мир.рус', 'мск.рус', 'обр.срб', 'од.срб', 'орг.рус', 'орг.срб', 'пр.срб', 'самара.рус', 'сочи.рус', 'спб.рус', 'упр.срб', 'я.рус', 'אקדמיה.ישראל', 'ירושלים.museum', 'ישוב.ישראל', 'ממשל.ישראל', 'צהל.ישראל', 'ايران.ir', 'ایران.ir', 'ทหาร.ไทย', 'ธุรกิจ.ไทย', 'รัฐบาล.ไทย', 'ศึกษา.ไทย', 'องค์กร.ไทย', 'เน็ต.ไทย', '三重.jp', '个人.hk', '京都.jp', '佐賀.jp', '個人.hk', '個人.香港', '公司.cn', '公司.hk', '公司.香港', '兵庫.jp', '北海道.jp', '千葉.jp', '和歌山.jp', '商業.tw', '埼玉.jp', '大分.jp', '大阪.jp', '奈良.jp', '宮城.jp', '宮崎.jp', '富山.jp', '山口.jp', '山形.jp', '山梨.jp', '岐阜.jp', '岡山.jp', '岩手.jp', '島根.jp', '広島.jp', '徳島.jp', '愛媛.jp', '愛知.jp', '政府.hk', '政府.香港', '敎育.hk', '教育.hk', '教育.香港', '新潟.jp', '東京.jp', '栃木.jp', '沖縄.jp', '滋賀.jp', '熊本.jp', '石川.jp', '神奈川.jp', '福井.jp', '福岡.jp', '福島.jp', '秋田.jp', '箇人.hk', '組織.hk', '組織.tw', '組織.香港', '組织.hk', '網絡.cn', '網絡.hk', '網絡.香港', '網络.hk', '網路.tw', '组織.hk', '组织.hk', '网絡.hk', '网络.cn', '网络.hk', '群馬.jp', '茨城.jp', '長崎.jp', '長野.jp', '青森.jp', '静岡.jp', '香川.jp', '高知.jp', '鳥取.jp', '鹿児島.jp'];
\ No newline at end of file
diff --git a/src/site/content/en/third_party/demo/url-parts/js/tld.js b/src/site/content/en/third_party/demo/url-parts/js/tld.js
new file mode 100644
index 00000000000..5a6cab85442
--- /dev/null
+++ b/src/site/content/en/third_party/demo/url-parts/js/tld.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line max-len
+export default ['AAA', 'AARP', 'ABARTH', 'ABB', 'ABBOTT', 'ABBVIE', 'ABC', 'ABLE', 'ABOGADO', 'ABUDHABI', 'AC', 'ACADEMY', 'ACCENTURE', 'ACCOUNTANT', 'ACCOUNTANTS', 'ACO', 'ACTOR', 'AD', 'ADS', 'ADULT', 'AE', 'AEG', 'AERO', 'AETNA', 'AF', 'AFL', 'AFRICA', 'AG', 'AGAKHAN', 'AGENCY', 'AI', 'AIG', 'AIRBUS', 'AIRFORCE', 'AIRTEL', 'AKDN', 'AL', 'ALFAROMEO', 'ALIBABA', 'ALIPAY', 'ALLFINANZ', 'ALLSTATE', 'ALLY', 'ALSACE', 'ALSTOM', 'AM', 'AMAZON', 'AMERICANEXPRESS', 'AMERICANFAMILY', 'AMEX', 'AMFAM', 'AMICA', 'AMSTERDAM', 'ANALYTICS', 'ANDROID', 'ANQUAN', 'ANZ', 'AO', 'AOL', 'APARTMENTS', 'APP', 'APPLE', 'AQ', 'AQUARELLE', 'AR', 'ARAB', 'ARAMCO', 'ARCHI', 'ARMY', 'ARPA', 'ART', 'ARTE', 'AS', 'ASDA', 'ASIA', 'ASSOCIATES', 'AT', 'ATHLETA', 'ATTORNEY', 'AU', 'AUCTION', 'AUDI', 'AUDIBLE', 'AUDIO', 'AUSPOST', 'AUTHOR', 'AUTO', 'AUTOS', 'AVIANCA', 'AW', 'AWS', 'AX', 'AXA', 'AZ', 'AZURE', 'BA', 'BABY', 'BAIDU', 'BANAMEX', 'BANANAREPUBLIC', 'BAND', 'BANK', 'BAR', 'BARCELONA', 'BARCLAYCARD', 'BARCLAYS', 'BAREFOOT', 'BARGAINS', 'BASEBALL', 'BASKETBALL', 'BAUHAUS', 'BAYERN', 'BB', 'BBC', 'BBT', 'BBVA', 'BCG', 'BCN', 'BD', 'BE', 'BEATS', 'BEAUTY', 'BEER', 'BENTLEY', 'BERLIN', 'BEST', 'BESTBUY', 'BET', 'BF', 'BG', 'BH', 'BHARTI', 'BI', 'BIBLE', 'BID', 'BIKE', 'BING', 'BINGO', 'BIO', 'BIZ', 'BJ', 'BLACK', 'BLACKFRIDAY', 'BLOCKBUSTER', 'BLOG', 'BLOOMBERG', 'BLUE', 'BM', 'BMS', 'BMW', 'BN', 'BNPPARIBAS', 'BO', 'BOATS', 'BOEHRINGER', 'BOFA', 'BOM', 'BOND', 'BOO', 'BOOK', 'BOOKING', 'BOSCH', 'BOSTIK', 'BOSTON', 'BOT', 'BOUTIQUE', 'BOX', 'BR', 'BRADESCO', 'BRIDGESTONE', 'BROADWAY', 'BROKER', 'BROTHER', 'BRUSSELS', 'BS', 'BT', 'BUILD', 'BUILDERS', 'BUSINESS', 'BUY', 'BUZZ', 'BV', 'BW', 'BY', 'BZ', 'BZH', 'CA', 'CAB', 'CAFE', 'CAL', 'CALL', 'CALVINKLEIN', 'CAM', 'CAMERA', 'CAMP', 'CANON', 'CAPETOWN', 'CAPITAL', 'CAPITALONE', 'CAR', 'CARAVAN', 'CARDS', 'CARE', 'CAREER', 'CAREERS', 'CARS', 'CASA', 'CASE', 'CASH', 'CASINO', 'CAT', 'CATERING', 'CATHOLIC', 'CBA', 'CBN', 'CBRE', 'CBS', 'CC', 'CD', 'CENTER', 'CEO', 'CERN', 'CF', 'CFA', 'CFD', 'CG', 'CH', 'CHANEL', 'CHANNEL', 'CHARITY', 'CHASE', 'CHAT', 'CHEAP', 'CHINTAI', 'CHRISTMAS', 'CHROME', 'CHURCH', 'CI', 'CIPRIANI', 'CIRCLE', 'CISCO', 'CITADEL', 'CITI', 'CITIC', 'CITY', 'CITYEATS', 'CK', 'CL', 'CLAIMS', 'CLEANING', 'CLICK', 'CLINIC', 'CLINIQUE', 'CLOTHING', 'CLOUD', 'CLUB', 'CLUBMED', 'CM', 'CN', 'CO', 'COACH', 'CODES', 'COFFEE', 'COLLEGE', 'COLOGNE', 'COM', 'COMCAST', 'COMMBANK', 'COMMUNITY', 'COMPANY', 'COMPARE', 'COMPUTER', 'COMSEC', 'CONDOS', 'CONSTRUCTION', 'CONSULTING', 'CONTACT', 'CONTRACTORS', 'COOKING', 'COOKINGCHANNEL', 'COOL', 'COOP', 'CORSICA', 'COUNTRY', 'COUPON', 'COUPONS', 'COURSES', 'CPA', 'CR', 'CREDIT', 'CREDITCARD', 'CREDITUNION', 'CRICKET', 'CROWN', 'CRS', 'CRUISE', 'CRUISES', 'CU', 'CUISINELLA', 'CV', 'CW', 'CX', 'CY', 'CYMRU', 'CYOU', 'CZ', 'DABUR', 'DAD', 'DANCE', 'DATA', 'DATE', 'DATING', 'DATSUN', 'DAY', 'DCLK', 'DDS', 'DE', 'DEAL', 'DEALER', 'DEALS', 'DEGREE', 'DELIVERY', 'DELL', 'DELOITTE', 'DELTA', 'DEMOCRAT', 'DENTAL', 'DENTIST', 'DESI', 'DESIGN', 'DEV', 'DHL', 'DIAMONDS', 'DIET', 'DIGITAL', 'DIRECT', 'DIRECTORY', 'DISCOUNT', 'DISCOVER', 'DISH', 'DIY', 'DJ', 'DK', 'DM', 'DNP', 'DO', 'DOCS', 'DOCTOR', 'DOG', 'DOMAINS', 'DOT', 'DOWNLOAD', 'DRIVE', 'DTV', 'DUBAI', 'DUNLOP', 'DUPONT', 'DURBAN', 'DVAG', 'DVR', 'DZ', 'EARTH', 'EAT', 'EC', 'ECO', 'EDEKA', 'EDU', 'EDUCATION', 'EE', 'EG', 'EMAIL', 'EMERCK', 'ENERGY', 'ENGINEER', 'ENGINEERING', 'ENTERPRISES', 'EPSON', 'EQUIPMENT', 'ER', 'ERICSSON', 'ERNI', 'ES', 'ESQ', 'ESTATE', 'ET', 'ETISALAT', 'EU', 'EUROVISION', 'EUS', 'EVENTS', 'EXCHANGE', 'EXPERT', 'EXPOSED', 'EXPRESS', 'EXTRASPACE', 'FAGE', 'FAIL', 'FAIRWINDS', 'FAITH', 'FAMILY', 'FAN', 'FANS', 'FARM', 'FARMERS', 'FASHION', 'FAST', 'FEDEX', 'FEEDBACK', 'FERRARI', 'FERRERO', 'FI', 'FIAT', 'FIDELITY', 'FIDO', 'FILM', 'FINAL', 'FINANCE', 'FINANCIAL', 'FIRE', 'FIRESTONE', 'FIRMDALE', 'FISH', 'FISHING', 'FIT', 'FITNESS', 'FJ', 'FK', 'FLICKR', 'FLIGHTS', 'FLIR', 'FLORIST', 'FLOWERS', 'FLY', 'FM', 'FO', 'FOO', 'FOOD', 'FOODNETWORK', 'FOOTBALL', 'FORD', 'FOREX', 'FORSALE', 'FORUM', 'FOUNDATION', 'FOX', 'FR', 'FREE', 'FRESENIUS', 'FRL', 'FROGANS', 'FRONTDOOR', 'FRONTIER', 'FTR', 'FUJITSU', 'FUN', 'FUND', 'FURNITURE', 'FUTBOL', 'FYI', 'GA', 'GAL', 'GALLERY', 'GALLO', 'GALLUP', 'GAME', 'GAMES', 'GAP', 'GARDEN', 'GAY', 'GB', 'GBIZ', 'GD', 'GDN', 'GE', 'GEA', 'GENT', 'GENTING', 'GEORGE', 'GF', 'GG', 'GGEE', 'GH', 'GI', 'GIFT', 'GIFTS', 'GIVES', 'GIVING', 'GL', 'GLASS', 'GLE', 'GLOBAL', 'GLOBO', 'GM', 'GMAIL', 'GMBH', 'GMO', 'GMX', 'GN', 'GODADDY', 'GOLD', 'GOLDPOINT', 'GOLF', 'GOO', 'GOODYEAR', 'GOOG', 'GOOGLE', 'GOP', 'GOT', 'GOV', 'GP', 'GQ', 'GR', 'GRAINGER', 'GRAPHICS', 'GRATIS', 'GREEN', 'GRIPE', 'GROCERY', 'GROUP', 'GS', 'GT', 'GU', 'GUARDIAN', 'GUCCI', 'GUGE', 'GUIDE', 'GUITARS', 'GURU', 'GW', 'GY', 'HAIR', 'HAMBURG', 'HANGOUT', 'HAUS', 'HBO', 'HDFC', 'HDFCBANK', 'HEALTH', 'HEALTHCARE', 'HELP', 'HELSINKI', 'HERE', 'HERMES', 'HGTV', 'HIPHOP', 'HISAMITSU', 'HITACHI', 'HIV', 'HK', 'HKT', 'HM', 'HN', 'HOCKEY', 'HOLDINGS', 'HOLIDAY', 'HOMEDEPOT', 'HOMEGOODS', 'HOMES', 'HOMESENSE', 'HONDA', 'HORSE', 'HOSPITAL', 'HOST', 'HOSTING', 'HOT', 'HOTELES', 'HOTELS', 'HOTMAIL', 'HOUSE', 'HOW', 'HR', 'HSBC', 'HT', 'HU', 'HUGHES', 'HYATT', 'HYUNDAI', 'IBM', 'ICBC', 'ICE', 'ICU', 'ID', 'IE', 'IEEE', 'IFM', 'IKANO', 'IL', 'IM', 'IMAMAT', 'IMDB', 'IMMO', 'IMMOBILIEN', 'IN', 'INC', 'INDUSTRIES', 'INFINITI', 'INFO', 'ING', 'INK', 'INSTITUTE', 'INSURANCE', 'INSURE', 'INT', 'INTERNATIONAL', 'INTUIT', 'INVESTMENTS', 'IO', 'IPIRANGA', 'IQ', 'IR', 'IRISH', 'IS', 'ISMAILI', 'IST', 'ISTANBUL', 'IT', 'ITAU', 'ITV', 'JAGUAR', 'JAVA', 'JCB', 'JE', 'JEEP', 'JETZT', 'JEWELRY', 'JIO', 'JLL', 'JM', 'JMP', 'JNJ', 'JO', 'JOBS', 'JOBURG', 'JOT', 'JOY', 'JP', 'JPMORGAN', 'JPRS', 'JUEGOS', 'JUNIPER', 'KAUFEN', 'KDDI', 'KE', 'KERRYHOTELS', 'KERRYLOGISTICS', 'KERRYPROPERTIES', 'KFH', 'KG', 'KH', 'KI', 'KIA', 'KIDS', 'KIM', 'KINDER', 'KINDLE', 'KITCHEN', 'KIWI', 'KM', 'KN', 'KOELN', 'KOMATSU', 'KOSHER', 'KP', 'KPMG', 'KPN', 'KR', 'KRD', 'KRED', 'KUOKGROUP', 'KW', 'KY', 'KYOTO', 'KZ', 'LA', 'LACAIXA', 'LAMBORGHINI', 'LAMER', 'LANCASTER', 'LANCIA', 'LAND', 'LANDROVER', 'LANXESS', 'LASALLE', 'LAT', 'LATINO', 'LATROBE', 'LAW', 'LAWYER', 'LB', 'LC', 'LDS', 'LEASE', 'LECLERC', 'LEFRAK', 'LEGAL', 'LEGO', 'LEXUS', 'LGBT', 'LI', 'LIDL', 'LIFE', 'LIFEINSURANCE', 'LIFESTYLE', 'LIGHTING', 'LIKE', 'LILLY', 'LIMITED', 'LIMO', 'LINCOLN', 'LINDE', 'LINK', 'LIPSY', 'LIVE', 'LIVING', 'LK', 'LLC', 'LLP', 'LOAN', 'LOANS', 'LOCKER', 'LOCUS', 'LOL', 'LONDON', 'LOTTE', 'LOTTO', 'LOVE', 'LPL', 'LPLFINANCIAL', 'LR', 'LS', 'LT', 'LTD', 'LTDA', 'LU', 'LUNDBECK', 'LUXE', 'LUXURY', 'LV', 'LY', 'MA', 'MACYS', 'MADRID', 'MAIF', 'MAISON', 'MAKEUP', 'MAN', 'MANAGEMENT', 'MANGO', 'MAP', 'MARKET', 'MARKETING', 'MARKETS', 'MARRIOTT', 'MARSHALLS', 'MASERATI', 'MATTEL', 'MBA', 'MC', 'MCKINSEY', 'MD', 'ME', 'MED', 'MEDIA', 'MEET', 'MELBOURNE', 'MEME', 'MEMORIAL', 'MEN', 'MENU', 'MERCKMSD', 'MG', 'MH', 'MIAMI', 'MICROSOFT', 'MIL', 'MINI', 'MINT', 'MIT', 'MITSUBISHI', 'MK', 'ML', 'MLB', 'MLS', 'MM', 'MMA', 'MN', 'MO', 'MOBI', 'MOBILE', 'MODA', 'MOE', 'MOI', 'MOM', 'MONASH', 'MONEY', 'MONSTER', 'MORMON', 'MORTGAGE', 'MOSCOW', 'MOTO', 'MOTORCYCLES', 'MOV', 'MOVIE', 'MP', 'MQ', 'MR', 'MS', 'MSD', 'MT', 'MTN', 'MTR', 'MU', 'MUSEUM', 'MUSIC', 'MUTUAL', 'MV', 'MW', 'MX', 'MY', 'MZ', 'NA', 'NAB', 'NAGOYA', 'NAME', 'NATURA', 'NAVY', 'NBA', 'NC', 'NE', 'NEC', 'NET', 'NETBANK', 'NETFLIX', 'NETWORK', 'NEUSTAR', 'NEW', 'NEWS', 'NEXT', 'NEXTDIRECT', 'NEXUS', 'NF', 'NFL', 'NG', 'NGO', 'NHK', 'NI', 'NICO', 'NIKE', 'NIKON', 'NINJA', 'NISSAN', 'NISSAY', 'NL', 'NO', 'NOKIA', 'NORTHWESTERNMUTUAL', 'NORTON', 'NOW', 'NOWRUZ', 'NOWTV', 'NP', 'NR', 'NRA', 'NRW', 'NTT', 'NU', 'NYC', 'NZ', 'OBI', 'OBSERVER', 'OFFICE', 'OKINAWA', 'OLAYAN', 'OLAYANGROUP', 'OLDNAVY', 'OLLO', 'OM', 'OMEGA', 'ONE', 'ONG', 'ONL', 'ONLINE', 'OOO', 'OPEN', 'ORACLE', 'ORANGE', 'ORG', 'ORGANIC', 'ORIGINS', 'OSAKA', 'OTSUKA', 'OTT', 'OVH', 'PA', 'PAGE', 'PANASONIC', 'PARIS', 'PARS', 'PARTNERS', 'PARTS', 'PARTY', 'PASSAGENS', 'PAY', 'PCCW', 'PE', 'PET', 'PF', 'PFIZER', 'PG', 'PH', 'PHARMACY', 'PHD', 'PHILIPS', 'PHONE', 'PHOTO', 'PHOTOGRAPHY', 'PHOTOS', 'PHYSIO', 'PICS', 'PICTET', 'PICTURES', 'PID', 'PIN', 'PING', 'PINK', 'PIONEER', 'PIZZA', 'PK', 'PL', 'PLACE', 'PLAY', 'PLAYSTATION', 'PLUMBING', 'PLUS', 'PM', 'PN', 'PNC', 'POHL', 'POKER', 'POLITIE', 'PORN', 'POST', 'PR', 'PRAMERICA', 'PRAXI', 'PRESS', 'PRIME', 'PRO', 'PROD', 'PRODUCTIONS', 'PROF', 'PROGRESSIVE', 'PROMO', 'PROPERTIES', 'PROPERTY', 'PROTECTION', 'PRU', 'PRUDENTIAL', 'PS', 'PT', 'PUB', 'PW', 'PWC', 'PY', 'QA', 'QPON', 'QUEBEC', 'QUEST', 'RACING', 'RADIO', 'RE', 'READ', 'REALESTATE', 'REALTOR', 'REALTY', 'RECIPES', 'RED', 'REDSTONE', 'REDUMBRELLA', 'REHAB', 'REISE', 'REISEN', 'REIT', 'RELIANCE', 'REN', 'RENT', 'RENTALS', 'REPAIR', 'REPORT', 'REPUBLICAN', 'REST', 'RESTAURANT', 'REVIEW', 'REVIEWS', 'REXROTH', 'RICH', 'RICHARDLI', 'RICOH', 'RIL', 'RIO', 'RIP', 'RO', 'ROCHER', 'ROCKS', 'RODEO', 'ROGERS', 'ROOM', 'RS', 'RSVP', 'RU', 'RUGBY', 'RUHR', 'RUN', 'RW', 'RWE', 'RYUKYU', 'SA', 'SAARLAND', 'SAFE', 'SAFETY', 'SAKURA', 'SALE', 'SALON', 'SAMSCLUB', 'SAMSUNG', 'SANDVIK', 'SANDVIKCOROMANT', 'SANOFI', 'SAP', 'SARL', 'SAS', 'SAVE', 'SAXO', 'SB', 'SBI', 'SBS', 'SC', 'SCA', 'SCB', 'SCHAEFFLER', 'SCHMIDT', 'SCHOLARSHIPS', 'SCHOOL', 'SCHULE', 'SCHWARZ', 'SCIENCE', 'SCOT', 'SD', 'SE', 'SEARCH', 'SEAT', 'SECURE', 'SECURITY', 'SEEK', 'SELECT', 'SENER', 'SERVICES', 'SEVEN', 'SEW', 'SEX', 'SEXY', 'SFR', 'SG', 'SH', 'SHANGRILA', 'SHARP', 'SHAW', 'SHELL', 'SHIA', 'SHIKSHA', 'SHOES', 'SHOP', 'SHOPPING', 'SHOUJI', 'SHOW', 'SHOWTIME', 'SI', 'SILK', 'SINA', 'SINGLES', 'SITE', 'SJ', 'SK', 'SKI', 'SKIN', 'SKY', 'SKYPE', 'SL', 'SLING', 'SM', 'SMART', 'SMILE', 'SN', 'SNCF', 'SO', 'SOCCER', 'SOCIAL', 'SOFTBANK', 'SOFTWARE', 'SOHU', 'SOLAR', 'SOLUTIONS', 'SONG', 'SONY', 'SOY', 'SPA', 'SPACE', 'SPORT', 'SPOT', 'SR', 'SRL', 'SS', 'ST', 'STADA', 'STAPLES', 'STAR', 'STATEBANK', 'STATEFARM', 'STC', 'STCGROUP', 'STOCKHOLM', 'STORAGE', 'STORE', 'STREAM', 'STUDIO', 'STUDY', 'STYLE', 'SU', 'SUCKS', 'SUPPLIES', 'SUPPLY', 'SUPPORT', 'SURF', 'SURGERY', 'SUZUKI', 'SV', 'SWATCH', 'SWISS', 'SX', 'SY', 'SYDNEY', 'SYSTEMS', 'SZ', 'TAB', 'TAIPEI', 'TALK', 'TAOBAO', 'TARGET', 'TATAMOTORS', 'TATAR', 'TATTOO', 'TAX', 'TAXI', 'TC', 'TCI', 'TD', 'TDK', 'TEAM', 'TECH', 'TECHNOLOGY', 'TEL', 'TEMASEK', 'TENNIS', 'TEVA', 'TF', 'TG', 'TH', 'THD', 'THEATER', 'THEATRE', 'TIAA', 'TICKETS', 'TIENDA', 'TIFFANY', 'TIPS', 'TIRES', 'TIROL', 'TJ', 'TJMAXX', 'TJX', 'TK', 'TKMAXX', 'TL', 'TM', 'TMALL', 'TN', 'TO', 'TODAY', 'TOKYO', 'TOOLS', 'TOP', 'TORAY', 'TOSHIBA', 'TOTAL', 'TOURS', 'TOWN', 'TOYOTA', 'TOYS', 'TR', 'TRADE', 'TRADING', 'TRAINING', 'TRAVEL', 'TRAVELCHANNEL', 'TRAVELERS', 'TRAVELERSINSURANCE', 'TRUST', 'TRV', 'TT', 'TUBE', 'TUI', 'TUNES', 'TUSHU', 'TV', 'TVS', 'TW', 'TZ', 'UA', 'UBANK', 'UBS', 'UG', 'UK', 'UNICOM', 'UNIVERSITY', 'UNO', 'UOL', 'UPS', 'US', 'UY', 'UZ', 'VA', 'VACATIONS', 'VANA', 'VANGUARD', 'VC', 'VE', 'VEGAS', 'VENTURES', 'VERISIGN', 'VERSICHERUNG', 'VET', 'VG', 'VI', 'VIAJES', 'VIDEO', 'VIG', 'VIKING', 'VILLAS', 'VIN', 'VIP', 'VIRGIN', 'VISA', 'VISION', 'VIVA', 'VIVO', 'VLAANDEREN', 'VN', 'VODKA', 'VOLKSWAGEN', 'VOLVO', 'VOTE', 'VOTING', 'VOTO', 'VOYAGE', 'VU', 'VUELOS', 'WALES', 'WALMART', 'WALTER', 'WANG', 'WANGGOU', 'WATCH', 'WATCHES', 'WEATHER', 'WEATHERCHANNEL', 'WEBCAM', 'WEBER', 'WEBSITE', 'WED', 'WEDDING', 'WEIBO', 'WEIR', 'WF', 'WHOSWHO', 'WIEN', 'WIKI', 'WILLIAMHILL', 'WIN', 'WINDOWS', 'WINE', 'WINNERS', 'WME', 'WOLTERSKLUWER', 'WOODSIDE', 'WORK', 'WORKS', 'WORLD', 'WOW', 'WS', 'WTC', 'WTF', 'XBOX', 'XEROX', 'XFINITY', 'XIHUAN', 'XIN', 'XN--11B4C3D', 'XN--1CK2E1B', 'XN--1QQW23A', 'XN--2SCRJ9C', 'XN--30RR7Y', 'XN--3BST00M', 'XN--3DS443G', 'XN--3E0B707E', 'XN--3HCRJ9C', 'XN--3PXU8K', 'XN--42C2D9A', 'XN--45BR5CYL', 'XN--45BRJ9C', 'XN--45Q11C', 'XN--4DBRK0CE', 'XN--4GBRIM', 'XN--54B7FTA0CC', 'XN--55QW42G', 'XN--55QX5D', 'XN--5SU34J936BGSG', 'XN--5TZM5G', 'XN--6FRZ82G', 'XN--6QQ986B3XL', 'XN--80ADXHKS', 'XN--80AO21A', 'XN--80AQECDR1A', 'XN--80ASEHDB', 'XN--80ASWG', 'XN--8Y0A063A', 'XN--90A3AC', 'XN--90AE', 'XN--90AIS', 'XN--9DBQ2A', 'XN--9ET52U', 'XN--9KRT00A', 'XN--B4W605FERD', 'XN--BCK1B9A5DRE4C', 'XN--C1AVG', 'XN--C2BR7G', 'XN--CCK2B3B', 'XN--CCKWCXETD', 'XN--CG4BKI', 'XN--CLCHC0EA0B2G2A9GCD', 'XN--CZR694B', 'XN--CZRS0T', 'XN--CZRU2D', 'XN--D1ACJ3B', 'XN--D1ALF', 'XN--E1A4C', 'XN--ECKVDTC9D', 'XN--EFVY88H', 'XN--FCT429K', 'XN--FHBEI', 'XN--FIQ228C5HS', 'XN--FIQ64B', 'XN--FIQS8S', 'XN--FIQZ9S', 'XN--FJQ720A', 'XN--FLW351E', 'XN--FPCRJ9C3D', 'XN--FZC2C9E2C', 'XN--FZYS8D69UVGM', 'XN--G2XX48C', 'XN--GCKR3F0F', 'XN--GECRJ9C', 'XN--GK3AT1E', 'XN--H2BREG3EVE', 'XN--H2BRJ9C', 'XN--H2BRJ9C8C', 'XN--HXT814E', 'XN--I1B6B1A6A2E', 'XN--IMR513N', 'XN--IO0A7I', 'XN--J1AEF', 'XN--J1AMH', 'XN--J6W193G', 'XN--JLQ480N2RG', 'XN--JVR189M', 'XN--KCRX77D1X4A', 'XN--KPRW13D', 'XN--KPRY57D', 'XN--KPUT3I', 'XN--L1ACC', 'XN--LGBBAT1AD8J', 'XN--MGB9AWBF', 'XN--MGBA3A3EJT', 'XN--MGBA3A4F16A', 'XN--MGBA7C0BBN0A', 'XN--MGBAAKC7DVF', 'XN--MGBAAM7A8H', 'XN--MGBAB2BD', 'XN--MGBAH1A3HJKRD', 'XN--MGBAI9AZGQP6J', 'XN--MGBAYH7GPA', 'XN--MGBBH1A', 'XN--MGBBH1A71E', 'XN--MGBC0A9AZCG', 'XN--MGBCA7DZDO', 'XN--MGBCPQ6GPA1A', 'XN--MGBERP4A5D4AR', 'XN--MGBGU82A', 'XN--MGBI4ECEXP', 'XN--MGBPL2FH', 'XN--MGBT3DHD', 'XN--MGBTX2B', 'XN--MGBX4CD0AB', 'XN--MIX891F', 'XN--MK1BU44C', 'XN--MXTQ1M', 'XN--NGBC5AZD', 'XN--NGBE9E0A', 'XN--NGBRX', 'XN--NODE', 'XN--NQV7F', 'XN--NQV7FS00EMA', 'XN--NYQY26A', 'XN--O3CW4H', 'XN--OGBPF8FL', 'XN--OTU796D', 'XN--P1ACF', 'XN--P1AI', 'XN--PGBS0DH', 'XN--PSSY2U', 'XN--Q7CE6A', 'XN--Q9JYB4C', 'XN--QCKA1PMC', 'XN--QXA6A', 'XN--QXAM', 'XN--RHQV96G', 'XN--ROVU88B', 'XN--RVC1E0AM3E', 'XN--S9BRJ9C', 'XN--SES554G', 'XN--T60B56A', 'XN--TCKWE', 'XN--TIQ49XQYJ', 'XN--UNUP4Y', 'XN--VERMGENSBERATER-CTB', 'XN--VERMGENSBERATUNG-PWB', 'XN--VHQUV', 'XN--VUQ861B', 'XN--W4R85EL8FHU5DNRA', 'XN--W4RS40L', 'XN--WGBH1C', 'XN--WGBL6A', 'XN--XHQ521B', 'XN--XKC2AL3HYE2A', 'XN--XKC2DL3A5EE0H', 'XN--Y9A3AQ', 'XN--YFRO4I67O', 'XN--YGBI2AMMX', 'XN--ZFR164B', 'XXX', 'XYZ', 'YACHTS', 'YAHOO', 'YAMAXUN', 'YANDEX', 'YE', 'YODOBASHI', 'YOGA', 'YOKOHAMA', 'YOU', 'YOUTUBE', 'YT', 'YUN', 'ZA', 'ZAPPOS', 'ZARA', 'ZERO', 'ZIP', 'ZM', 'ZONE', 'ZUERICH', 'ZW'];
\ No newline at end of file
diff --git a/src/site/content/en/vitals/cls_4x3.svg b/src/site/content/en/vitals/cls_4x3.svg
deleted file mode 100644
index 1af18312b4a..00000000000
--- a/src/site/content/en/vitals/cls_4x3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 24.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m145.88518 104.886246q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l11.875 0l0 51.75l26.671875 0l0 11.265625l-38.546875 0l0 -63.015625zm67.48804 64.421875q-8.265625 0 -14.609375 -4.65625q-6.328125 -4.671875 -8.875 -13.203125l11.171875 -4.40625q1.3125 5.015625 4.484375 8.015625q3.171875 2.984375 7.921875 2.984375q3.953125 0 6.765625 -1.96875q2.828125 -1.984375 2.828125 -5.515625q0 -3.515625 -2.6875 -5.75q-2.6875 -2.25 -9.546875 -4.796875l-3.875 -1.40625q-6.0625 -2.125 -10.375 -6.46875q-4.3125 -4.359375 -4.3125 -10.96875q0 -4.921875 2.546875 -8.96875q2.546875 -4.046875 7.203125 -6.375q4.671875 -2.34375 10.578125 -2.34375q8.53125 0 13.453125 4.015625q4.9375 4.0 6.78125 9.359375l-10.46875 4.40625q-0.96875 -2.90625 -3.390625 -4.875q-2.421875 -1.984375 -6.203125 -1.984375q-3.875 0 -6.390625 1.8125q-2.5 1.796875 -2.5 4.703125q0 2.8125 2.375 4.796875q2.375 1.96875 7.828125 3.8125l3.96875 1.328125q8.1875 2.8125 12.53125 7.4375q4.359375 4.625 4.359375 12.09375q0 6.15625 -3.171875 10.4375q-3.15625 4.265625 -8.140625 6.375q-4.96875 2.109375 -10.25 2.109375z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 177.60136l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 201.5057q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 177.60132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 185.72441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 199.72441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 177.6l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 192.7231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 240.0l95.999985 0l0 28.409454l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m233.76959 260.31473q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm7.388153 1.46875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm2.8638763 -1.71875q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm12.390396 1.875q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.375 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.546875 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875 -0.75l0.65625 -5.5l5.90625 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 240.39362l96.0 0l0 28.409454l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m134.15361 260.70834q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm7.388153 1.46875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm4.848877 -8.71875l-1.796875 1.28125l-0.875 -1.328125l3.171875 -2.265625l1.234375 0l0 10.9375l-1.734375 0l0 -8.625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 241.87541l0 -28.56694" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 241.87541l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 214.30849c1.8170166 0 3.2899933 1.4729767 3.2899933 3.2899933c0 1.8170166 -1.4729767 3.2899933 -3.2899933 3.2899933c-1.8170166 0 -3.2899933 -1.4729767 -3.2899933 -3.2899933c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 115.2l288.0 0l0 28.7874l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m93.98752 137.1062q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm11.160614 0q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -10.515625l1.609375 0l0 1.5l0.078125 0q0.453125 -0.78125 1.328125 -1.296875q0.875 -0.515625 1.859375 -0.515625q1.125 0 1.953125 0.546875q0.828125 0.53125 1.1875 1.421875q0.53125 -0.890625 1.421875 -1.421875q0.890625 -0.546875 2.078125 -0.546875q1.765625 0 2.640625 1.078125q0.890625 1.0625 0.890625 2.890625l0 6.546875l-1.671875 0l0 -6.28125q0 -1.421875 -0.578125 -2.0625q-0.578125 -0.640625 -1.71875 -0.640625q-0.765625 0 -1.390625 0.453125q-0.609375 0.4375 -0.96875 1.171875q-0.34375 0.734375 -0.34375 1.59375l0 5.765625l-1.703125 0l0 -6.265625q0 -1.4375 -0.578125 -2.078125q-0.578125 -0.640625 -1.703125 -0.640625q-0.75 0 -1.375 0.453125q-0.625 0.453125 -0.984375 1.203125q-0.34375 0.75 -0.34375 1.609375l0 5.71875l-1.6875 0l0 -10.203125zm21.207489 10.515625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm7.369995 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.919998 1.34375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm4.498123 -12.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm3.238739 0l1.8125 0l3.171875 8.203125l0.03125 0l3.203125 -8.203125l1.7812653 0l-4.1562653 10.203125l-1.71875 0l-4.125 -10.203125zm15.636246 10.515625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm2.5256042 6.1875l0 0zm6.2337646 -14.3125l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.107483 0.546875l-4.21875 -9.5625l1.84375 0l3.203125 7.578125l0.03125 0l3.078125 -7.578125l1.84375 0l-6.296875 14.515625l-1.765625 0l2.28125 -4.953125zm11.498138 0.953125q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm10.819977 1.53125q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm11.554352 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.1325073 -0.15625l0 0zm9.633713 0.3125q-1.078125 0 -2.09375 -0.4375q-1.0 -0.453125 -1.78125 -1.3125q-0.78125 -0.875 -1.125 -2.125l1.625 -0.65625q0.34375 1.28125 1.265625 2.109375q0.921875 0.8125 2.15625 0.8125q1.234375 0 2.09375 -0.671875q0.859375 -0.671875 0.859375 -1.828125q0 -1.0 -0.734375 -1.640625q-0.71875 -0.65625 -2.375 -1.21875l-0.90625 -0.328125q-1.515625 -0.53125 -2.484375 -1.40625q-0.953125 -0.890625 -0.953125 -2.453125q0 -1.015625 0.5625 -1.875q0.5625 -0.875 1.5625 -1.390625q1.0 -0.53125 2.234375 -0.53125q1.234375 0 2.15625 0.46875q0.921875 0.453125 1.46875 1.109375q0.5625 0.65625 0.78125 1.296875l-1.59375 0.6875q-0.21875 -0.734375 -0.921875 -1.328125q-0.703125 -0.609375 -1.875 -0.609375q-1.09375 0 -1.875 0.625q-0.78125 0.609375 -0.78125 1.546875q0 0.84375 0.65625 1.375q0.671875 0.53125 2.0 0.984375l0.9375 0.328125q1.828125 0.65625 2.84375 1.65625q1.015625 0.984375 1.015625 2.6875q0 1.375 -0.703125 2.3125q-0.703125 0.9375 -1.796875 1.375q-1.078125 0.4375 -2.21875 0.4375zm6.911865 -14.625l1.6875 0l0 4.21875l-0.078125 1.390625l0.078125 0q0.421875 -0.78125 1.328125 -1.296875q0.921875 -0.515625 2.0 -0.515625q1.859375 0 2.828125 1.09375q0.984375 1.078125 0.984375 2.875l0 6.546875l-1.6875 0l0 -6.28125q0 -1.375 -0.703125 -2.03125q-0.703125 -0.671875 -1.828125 -0.671875q-0.796875 0 -1.46875 0.484375q-0.671875 0.484375 -1.0625 1.25q-0.390625 0.75 -0.390625 1.5625l0 5.6875l-1.6875 0l0 -14.3125zm12.279999 2.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm14.723114 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-4.640625 0l0 8.65625l-1.703125 0l0 -8.65625l-1.875 0l0 -1.546875l1.875 0l0 -1.09375q0 -0.96875 0.4375 -1.6875q0.4375 -0.71875 1.171875 -1.109375q0.75 -0.390625 1.65625 -0.390625q0.859375 0 1.5 0.25l0 1.65625q-0.359375 -0.140625 -0.6875 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l4.640625 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.859375 0.3125 1.234375q0.390625 0.4375 1.109375 0.4375q0.609375 0 1.109375 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 241.37184l0 -28.283463" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 241.37184l0 -20.703476" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 214.08838c1.8170166 0 3.2900085 1.4729767 3.2900085 3.2899933c0 1.8170166 -1.472992 3.2900085 -3.2900085 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/cls_8x2.svg b/src/site/content/en/vitals/cls_8x2.svg
deleted file mode 100644
index 5a2c31c3f4a..00000000000
--- a/src/site/content/en/vitals/cls_8x2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 768.0 192.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l768.0 0l0 192.0l-768.0 0l0 -192.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l768.0 0l0 192.0l-768.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m28.8 19.2l259.21262 0l0 115.2126l-259.21262 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m108.108215 112.99754q-9.984375 0 -18.25 -4.75q-8.25 -4.75 -13.0 -12.953125q-4.75 -8.21875 -4.75 -18.203125q0 -9.984375 4.75 -18.187496q4.75 -8.203125 13.0 -12.953125q8.265625 -4.75 18.25 -4.75q15.546875 0 25.71875 11.21875l-9.109375 8.84375q-6.625 -7.78125 -16.515625 -7.78125q-6.4375 0 -11.71875 2.9375q-5.28125 2.921875 -8.3125 8.296871q-3.015625 5.375 -3.015625 12.375q0 7.015625 3.015625 12.390625q3.03125 5.375 8.3125 8.3125q5.28125 2.921875 11.71875 2.921875q10.84375 0 18.140625 -9.03125l9.21875 8.734375q-5.09375 6.15625 -12.0625 9.375q-6.953125 3.203125 -15.390625 3.203125zm39.453094 -70.265625l12.953125 0l0 56.45312l29.09375 0l0 12.28125l-42.046875 0l0 -68.734375zm73.630356 70.265625q-9.03125 0 -15.9375 -5.078125q-6.90625 -5.09375 -9.703125 -14.40625l12.203125 -4.796875q1.4375 5.46875 4.890625 8.734375q3.453125 3.265625 8.640625 3.265625q4.328125 0 7.390625 -2.15625q3.078125 -2.171875 3.078125 -6.0q0 -3.84375 -2.9375 -6.28125q-2.921875 -2.453125 -10.40625 -5.25l-4.234375 -1.53125q-6.625 -2.296875 -11.328125 -7.046875q-4.703125 -4.765625 -4.703125 -11.953121q0 -5.390625 2.78125 -9.796875q2.796875 -4.421875 7.875 -6.953125q5.09375 -2.546875 11.53125 -2.546875q9.3125 0 14.6875 4.375q5.375 4.359375 7.390625 10.203125l-11.421875 4.8125q-1.0625 -3.171875 -3.703125 -5.328125q-2.640625 -2.171875 -6.765625 -2.171875q-4.21875 0 -6.96875 1.96875q-2.734375 1.96875 -2.734375 5.140625q0 3.078125 2.59375 5.234371q2.59375 2.15625 8.546875 4.171875l4.328125 1.4375q8.921875 3.078125 13.671875 8.125q4.75 5.03125 4.75 13.1875q0 6.71875 -3.453125 11.375q-3.453125 4.65625 -8.875 6.96875q-5.421875 2.296875 -11.1875 2.296875z" fill-rule="nonzero"/><path fill="#0cce6b" d="m360.0 57.6l115.212585 0l0 43.2126l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m401.9218 84.22505q-1.359375 0 -2.5 -0.65625q-1.140625 -0.65625 -1.828125 -1.796875q-0.671875 -1.140625 -0.671875 -2.53125q0 -1.40625 0.671875 -2.546875q0.6875 -1.140625 1.828125 -1.78125q1.140625 -0.65625 2.5 -0.65625q1.09375 0 2.015625 0.390625q0.921875 0.375 1.5625 1.0625l-1.015625 1.015625q-0.96875 -1.09375 -2.5625 -1.09375q-0.921875 0 -1.75 0.453125q-0.8125 0.4375 -1.296875 1.265625q-0.46875 0.828125 -0.46875 1.890625q0 1.0625 0.484375 1.890625q0.484375 0.8125 1.296875 1.265625q0.8125 0.4375 1.75 0.4375q1.515625 0 2.453125 -0.953125q0.3125 -0.28125 0.515625 -0.734375q0.203125 -0.453125 0.28125 -1.0l-3.28125 0l0 -1.296875l4.640625 0q0.078125 0.453125 0.078125 0.765625q0 0.90625 -0.28125 1.734375q-0.28125 0.8125 -0.890625 1.4375q-0.640625 0.703125 -1.53125 1.078125q-0.890625 0.359375 -2.0 0.359375zm10.868805 0q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202087 -8.375l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m475.2 57.600365l124.787415 0l0 43.2126l-124.787415 0z" fill-rule="evenodd"/><path fill="#000000" d="m517.5868 66.459785l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm9.662842 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0zm9.361877 1.609375q-1.1875 0 -2.140625 -0.6875q-0.953125 -0.703125 -1.3125 -1.953125l1.375 -0.5625q0.21875 0.796875 0.765625 1.3125q0.546875 0.5 1.3125 0.5q0.71875 0 1.21875 -0.375q0.5 -0.375 0.5 -1.03125q0 -0.59375 -0.4375 -0.984375q-0.4375 -0.390625 -1.515625 -0.765625l-0.59375 -0.21875q-0.984375 -0.34375 -1.625 -0.953125q-0.640625 -0.625 -0.640625 -1.65625q0 -0.703125 0.375 -1.296875q0.375 -0.609375 1.0625 -0.953125q0.6875 -0.34375 1.5625 -0.34375q1.234375 0 1.96875 0.609375q0.75 0.59375 1.015625 1.359375l-1.3125 0.5625q-0.140625 -0.484375 -0.5625 -0.828125q-0.421875 -0.34375 -1.109375 -0.34375q-0.640625 0 -1.09375 0.34375q-0.453125 0.34375 -0.453125 0.875q0 0.5 0.40625 0.828125q0.40625 0.3125 1.25 0.609375l0.609375 0.21875q1.234375 0.421875 1.890625 1.109375q0.671875 0.671875 0.671875 1.8125q0 0.921875 -0.46875 1.5625q-0.46875 0.625 -1.21875 0.9375q-0.734375 0.3125 -1.5 0.3125z" fill-rule="nonzero"/><path fill="#000000" d="m491.15063 82.459785l1.46875 0l0 9.546875l-1.46875 0l0 -9.546875zm3.611908 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768707 0l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm4.5910645 -4.453125l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0zm9.286377 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm5.32959 -8.375l1.59375 0l2.15625 6.34375l0.34375 1.078125l0.078125 0l0.359375 -1.078125l2.25 -6.34375l1.59375 0l-3.46875 9.546875l-1.515625 0l-3.390625 -9.546875zm9.647156 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768677 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm11.615967 1.390625l-2.6875 0l0 -1.390625l6.8125 0l0 1.390625l-2.671875 0l0 8.15625l-1.453125 0l0 -8.15625z" fill-rule="nonzero"/><path fill="#ff4e42" d="m600.025 57.60126l115.212585 0l0 43.212597l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m639.73035 74.460686l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm8.939758 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202393 -8.375l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m552.0 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m588.0545 145.61494q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm7.9990234 1.59375q-0.546875 0 -0.9375 -0.375q-0.375 -0.390625 -0.375 -0.9375q0 -0.53125 0.375 -0.90625q0.390625 -0.390625 0.9375 -0.390625q0.5625 0 0.921875 0.375q0.375 0.375 0.375 0.921875q0 0.546875 -0.375 0.9375q-0.359375 0.375 -0.921875 0.375zm3.102417 -1.875q3.515625 -3.5 4.328125 -4.40625q0.765625 -0.796875 1.046875 -1.296875q0.28125 -0.5 0.28125 -1.171875q0 -0.703125 -0.53125 -1.203125q-0.53125 -0.515625 -1.4375 -0.515625q-0.828125 0 -1.34375 0.484375q-0.5 0.46875 -0.6875 1.109375l-1.6875 -0.703125q0.171875 -0.609375 0.640625 -1.21875q0.484375 -0.609375 1.28125 -1.015625q0.796875 -0.421875 1.84375 -0.421875q1.125 0 1.984375 0.46875q0.875 0.46875 1.34375 1.25q0.484375 0.765625 0.484375 1.703125q0 1.875 -1.890625 3.765625q-0.765625 0.765625 -1.71875 1.71875q-0.96875 0.953125 -1.46875 1.46875l0.015625 0.046875l5.203125 0l0 1.703125l-7.6875 0l0 -1.765625zm13.421387 2.046875q-0.890625 0 -1.734375 -0.359375q-0.84375 -0.359375 -1.46875 -1.078125q-0.625 -0.71875 -0.890625 -1.765625l1.671875 -0.671875q0.25 0.984375 0.859375 1.5625q0.625 0.5625 1.546875 0.5625q0.984375 0 1.625 -0.625q0.65625 -0.640625 0.65625 -1.625q0 -1.0 -0.640625 -1.640625q-0.625 -0.65625 -1.625 -0.65625q-0.578125 0 -1.078125 0.25q-0.484375 0.25 -0.796875 0.6875l-1.84375 -0.8125l0.71875 -5.96875l6.40625 0l0 1.703125l-4.875 0l-0.4375 3.1875l0.09375 0.015625q0.9375 -0.734375 2.171875 -0.734375q1.0 0 1.859375 0.5q0.875 0.5 1.390625 1.40625q0.53125 0.890625 0.53125 2.03125q0 1.15625 -0.546875 2.078125q-0.53125 0.90625 -1.484375 1.4375q-0.9375 0.515625 -2.109375 0.515625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m427.2 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m469.73532 145.61494q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm7.998993 1.59375q-0.546875 0 -0.9375 -0.375q-0.375 -0.390625 -0.375 -0.9375q0 -0.53125 0.375 -0.90625q0.390625 -0.390625 0.9375 -0.390625q0.5625 0 0.921875 0.375q0.375 0.375 0.375 0.921875q0 0.546875 -0.375 0.9375q-0.359375 0.375 -0.921875 0.375zm5.2528687 -9.453125l-1.9375 1.390625l-0.953125 -1.4375l3.421875 -2.46875l1.34375 0l0 11.859375l-1.875 0l0 -9.34375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m474.88504 125.7474l0 -28.7874" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m474.88504 125.747406l0 -21.207397" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m474.88504 97.96001c1.8170166 0 3.2900085 1.4729843 3.2900085 3.290001c0 1.8170166 -1.472992 3.2899933 -3.2900085 3.2899933c-1.8170166 0 -3.289978 -1.4729767 -3.289978 -3.2899933c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m28.8 129.6l268.7874 0l0 38.393692l-268.7874 0z" fill-rule="evenodd"/><path fill="#666666" d="m65.1763 156.30934q-2.0781288 0 -3.7812538 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.7812538 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.5468788 0 -2.8593788 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.8593788 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm11.160614 0q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -10.515625l1.609375 0l0 1.5l0.078125 0q0.453125 -0.78125 1.328125 -1.296875q0.875 -0.515625 1.859375 -0.515625q1.125 0 1.953125 0.546875q0.828125 0.53125 1.1875 1.421875q0.53125 -0.890625 1.421875 -1.421875q0.890625 -0.546875 2.078125 -0.546875q1.765625 0 2.640625 1.078125q0.890625 1.0625 0.890625 2.890625l0 6.546875l-1.671875 0l0 -6.28125q0 -1.421875 -0.578125 -2.0625q-0.578125 -0.640625 -1.71875 -0.640625q-0.765625 0 -1.390625 0.453125q-0.609375 0.4375 -0.96875 1.171875q-0.34375 0.734375 -0.34375 1.59375l0 5.765625l-1.703125 0l0 -6.265625q0 -1.4375 -0.578125 -2.078125q-0.578125 -0.640625 -1.703125 -0.640625q-0.75 0 -1.375 0.453125q-0.625 0.453125 -0.984375 1.203125q-0.34375 0.75 -0.34375 1.609375l0 5.71875l-1.6875 0l0 -10.203125zm21.207489 10.515625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm7.369995 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.919998 1.34375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm4.498123 -12.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm3.238739 0l1.8125 0l3.171875 8.203125l0.03125 0l3.203125 -8.203125l1.78125 0l-4.15625 10.203125l-1.71875 0l-4.125 -10.203125zm15.63623 10.515625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm2.5256195 6.1875l0 0zm6.2337494 -14.3125l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.107498 0.546875l-4.21875 -9.5625l1.84375 0l3.203125 7.578125l0.03125 0l3.078125 -7.578125l1.84375 0l-6.296875 14.515625l-1.765625 0l2.28125 -4.953125zm11.498123 0.953125q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm10.819977 1.53125q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm11.554367 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm9.633743 0.3125q-1.078125 0 -2.09375 -0.4375q-1.0 -0.453125 -1.78125 -1.3125q-0.78125 -0.875 -1.125 -2.125l1.625 -0.65625q0.34375 1.28125 1.265625 2.109375q0.921875 0.8125 2.15625 0.8125q1.234375 0 2.09375 -0.671875q0.859375 -0.671875 0.859375 -1.828125q0 -1.0 -0.734375 -1.640625q-0.71875 -0.65625 -2.375 -1.21875l-0.90625 -0.328125q-1.515625 -0.53125 -2.484375 -1.40625q-0.953125 -0.890625 -0.953125 -2.453125q0 -1.015625 0.5625 -1.875q0.5625 -0.875 1.5625 -1.390625q1.0 -0.53125 2.234375 -0.53125q1.234375 0 2.15625 0.46875q0.921875 0.453125 1.46875 1.109375q0.5625 0.65625 0.78125 1.296875l-1.59375 0.6875q-0.21875 -0.734375 -0.921875 -1.328125q-0.703125 -0.609375 -1.875 -0.609375q-1.09375 0 -1.875 0.625q-0.78125 0.609375 -0.78125 1.546875q0 0.84375 0.65625 1.375q0.671875 0.53125 2.0 0.984375l0.9375 0.328125q1.828125 0.65625 2.84375 1.65625q1.015625 0.984375 1.015625 2.6875q0 1.375 -0.703125 2.3125q-0.703125 0.9375 -1.796875 1.375q-1.078125 0.4375 -2.21875 0.4375zm6.911865 -14.625l1.6875 0l0 4.21875l-0.078125 1.390625l0.078125 0q0.421875 -0.78125 1.328125 -1.296875q0.921875 -0.515625 2.0 -0.515625q1.859375 0 2.828125 1.09375q0.984375 1.078125 0.984375 2.875l0 6.546875l-1.6875 0l0 -6.28125q0 -1.375 -0.703125 -2.03125q-0.703125 -0.671875 -1.828125 -0.671875q-0.796875 0 -1.46875 0.484375q-0.671875 0.484375 -1.0625 1.25q-0.390625 0.75 -0.390625 1.5625l0 5.6875l-1.6875 0l0 -14.3125zm12.2799835 2.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm14.723114 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-4.640625 0l0 8.65625l-1.703125 0l0 -8.65625l-1.875 0l0 -1.546875l1.875 0l0 -1.09375q0 -0.96875 0.4375 -1.6875q0.4375 -0.71875 1.171875 -1.109375q0.75 -0.390625 1.65625 -0.390625q0.859375 0 1.5 0.25l0 1.65625q-0.359375 -0.140625 -0.6875 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l4.640625 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.859375 0.3125 1.234375q0.390625 0.4375 1.109375 0.4375q0.609375 0 1.109375 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m600.0 125.62752l0 -28.566933" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m600.0 125.627525l0 -20.98693" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m600.0 98.06059c1.8170166 0 3.289978 1.4729843 3.289978 3.290001c0 1.8170166 -1.4729614 3.290001 -3.289978 3.290001c-1.8170166 0 -3.289978 -1.4729843 -3.289978 -3.290001c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/cls_ux.svg b/src/site/content/en/vitals/cls_ux.svg
deleted file mode 100644
index 86fa63a4de5..00000000000
--- a/src/site/content/en/vitals/cls_ux.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 336.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 336.0l-384.0 0l0 -336.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 336.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.006233 28.0l288.0 0l0 33.574802l-288.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m135.97713 52.81928q-0.796875 -1.125 -1.328125 -2.703125q-0.515625 -1.578125 -0.515625 -3.4375q0 -2.453125 1.125 -4.65625q1.140625 -2.21875 3.140625 -3.859375l1.046875 0.953125q-1.765625 1.6875 -2.6875 3.546875q-0.90625 1.859375 -0.90625 4.125q0 1.515625 0.359375 2.765625q0.375 1.25 1.03125 2.375l-1.265625 0.890625zm4.112259 -13.625l1.875 0l1.25 7.609375l0.171875 1.296875l0.09375 0l0.65625 -1.296875l4.046875 -7.609375l1.96875 0l-6.203125 11.453125l-1.84375 0l-2.015625 -11.453125zm11.817017 2.09375q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm5.6410065 8.40625q-1.34375 0 -2.234375 -0.609375q-0.890625 -0.625 -1.171875 -1.625l1.625 -0.640625q0.140625 0.640625 0.671875 1.0q0.546875 0.359375 1.25 0.359375q0.671875 0 1.109375 -0.296875q0.453125 -0.296875 0.453125 -0.78125q0 -0.421875 -0.3125 -0.703125q-0.3125 -0.28125 -0.953125 -0.4375l-0.796875 -0.21875q-0.953125 -0.234375 -1.5625 -0.796875q-0.609375 -0.5625 -0.609375 -1.421875q0 -0.71875 0.421875 -1.28125q0.4375 -0.578125 1.1875 -0.890625q0.765625 -0.328125 1.734375 -0.328125q1.15625 0 1.96875 0.5q0.828125 0.5 1.140625 1.375l-1.59375 0.59375q-0.1875 -0.46875 -0.625 -0.734375q-0.421875 -0.265625 -1.0 -0.265625q-0.6875 0 -1.09375 0.265625q-0.390625 0.25 -0.390625 0.671875q0 0.296875 0.28125 0.5625q0.296875 0.265625 0.78125 0.375l1.109375 0.296875q0.96875 0.234375 1.515625 0.84375q0.546875 0.609375 0.546875 1.421875q0 1.25 -0.921875 2.015625q-0.921875 0.75 -2.53125 0.75zm10.274887 -1.359375q-0.421875 0.640625 -1.125 1.0q-0.6875 0.359375 -1.59375 0.359375q-1.234375 0 -1.921875 -0.671875q-0.6875 -0.6875 -0.6875 -1.765625q0 -0.484375 0.09375 -1.078125l0.890625 -4.890625l1.703125 0l-0.84375 4.796875q-0.0625 0.328125 -0.0625 0.703125q0 0.609375 0.40625 0.96875q0.40625 0.359375 1.078125 0.359375q0.96875 0 1.640625 -0.671875q0.671875 -0.671875 0.875 -1.78125l0.78125 -4.375l1.703125 0l-1.4375 8.15625l-1.609375 0l0.203125 -1.109375l-0.09375 0zm6.121887 1.359375q-0.71875 0 -1.328125 -0.328125q-0.609375 -0.328125 -0.96875 -0.890625q-0.359375 -0.578125 -0.359375 -1.28125q0 -1.359375 0.96875 -2.15625q0.96875 -0.8125 2.71875 -0.8125q0.625 0 1.203125 0.140625q0.59375 0.125 1.046875 0.34375l0.109375 -0.421875l0.03125 -0.40625q0 -0.609375 -0.53125 -1.0q-0.515625 -0.390625 -1.28125 -0.390625q-1.3125 0 -2.09375 0.984375l-1.21875 -0.890625q0.609375 -0.75 1.515625 -1.15625q0.921875 -0.40625 1.984375 -0.40625q1.53125 0 2.40625 0.75q0.875 0.734375 0.875 1.953125q0 0.34375 -0.078125 0.828125l-0.875 4.890625l-1.671875 0l0.171875 -0.984375l-0.09375 0q-0.40625 0.5625 -1.046875 0.90625q-0.625 0.328125 -1.484375 0.328125zm0.5 -1.40625q1.0 0 1.703125 -0.640625q0.703125 -0.640625 0.859375 -1.640625q-0.484375 -0.25 -0.9375 -0.359375q-0.4375 -0.125 -1.078125 -0.125q-0.890625 0 -1.421875 0.40625q-0.53125 0.390625 -0.53125 1.125q0 0.5625 0.40625 0.90625q0.40625 0.328125 1.0 0.328125zm7.547394 -10.296875l1.734375 0l-2.015625 11.453125l-1.734375 0l2.015625 -11.453125zm1.463501 11.453125l0 0zm7.150131 0.25q-1.4375 0 -2.46875 -0.828125q-1.015625 -0.828125 -1.25 -2.328125l1.671875 -0.6875q0.09375 0.96875 0.6875 1.578125q0.59375 0.609375 1.5625 0.609375q0.9375 0 1.609375 -0.53125q0.6875 -0.53125 0.6875 -1.359375q0 -0.65625 -0.453125 -1.09375q-0.4375 -0.4375 -1.5 -0.84375l-0.625 -0.234375q-1.03125 -0.390625 -1.671875 -1.109375q-0.640625 -0.71875 -0.640625 -1.84375q0 -0.921875 0.515625 -1.671875q0.53125 -0.75 1.4375 -1.1875q0.90625 -0.4375 1.96875 -0.4375q1.0625 0 1.796875 0.390625q0.734375 0.375 1.109375 0.921875q0.390625 0.546875 0.5 1.09375l-1.640625 0.625q-0.125 -0.59375 -0.59375 -0.984375q-0.46875 -0.40625 -1.328125 -0.40625q-0.828125 0 -1.421875 0.421875q-0.578125 0.421875 -0.578125 1.140625q0 0.59375 0.40625 0.984375q0.421875 0.390625 1.296875 0.71875l0.671875 0.234375q2.546875 0.96875 2.546875 3.0625q0 1.09375 -0.5625 1.96875q-0.546875 0.859375 -1.53125 1.328125q-0.96875 0.46875 -2.203125 0.46875zm8.378906 -0.125q-0.953125 0 -1.53125 -0.515625q-0.5625 -0.53125 -0.5625 -1.484375q0 -0.265625 0.078125 -0.796875l0.703125 -3.984375l-1.421875 0l0.28125 -1.5l1.421875 0l0.421875 -2.3125l1.703125 0l-0.40625 2.3125l1.984375 0l-0.265625 1.5l-2.0 0l-0.671875 3.859375q-0.046875 0.21875 -0.046875 0.5q0 0.375 0.234375 0.59375q0.234375 0.21875 0.625 0.21875q0.53125 0 1.0625 -0.3125l-0.296875 1.6875q-0.5625 0.234375 -1.3125 0.234375zm5.44014 0.125q-0.71875 0 -1.328125 -0.328125q-0.609375 -0.328125 -0.96875 -0.890625q-0.359375 -0.578125 -0.359375 -1.28125q0 -1.359375 0.96875 -2.15625q0.96875 -0.8125 2.71875 -0.8125q0.625 0 1.203125 0.140625q0.59375 0.125 1.046875 0.34375l0.109375 -0.421875l0.03125 -0.40625q0 -0.609375 -0.53125 -1.0q-0.515625 -0.390625 -1.28125 -0.390625q-1.3125 0 -2.09375 0.984375l-1.21875 -0.890625q0.609375 -0.75 1.515625 -1.15625q0.921875 -0.40625 1.984375 -0.40625q1.53125 0 2.40625 0.75q0.875 0.734375 0.875 1.953125q0 0.34375 -0.078125 0.828125l-0.875 4.890625l-1.671875 0l0.171875 -0.984375l-0.09375 0q-0.40625 0.5625 -1.046875 0.90625q-0.625 0.328125 -1.484375 0.328125zm0.5 -1.40625q1.0 0 1.703125 -0.640625q0.703125 -0.640625 0.859375 -1.640625q-0.484375 -0.25 -0.9375 -0.359375q-0.4375 -0.125 -1.078125 -0.125q-0.890625 0 -1.421875 0.40625q-0.53125 0.390625 -0.53125 1.125q0 0.5625 0.40625 0.90625q0.40625 0.328125 1.0 0.328125zm10.078644 1.40625q-0.890625 0 -1.578125 -0.375q-0.6875 -0.390625 -1.0625 -0.984375l-0.09375 0l-0.1875 1.109375l-1.625 0l2.015625 -11.453125l1.734375 0l-0.578125 3.265625l-0.296875 1.125l0.09375 0q0.34375 -0.546875 1.046875 -0.953125q0.703125 -0.40625 1.609375 -0.40625q0.953125 0 1.734375 0.5q0.78125 0.484375 1.21875 1.34375q0.453125 0.859375 0.453125 1.96875q0 1.34375 -0.59375 2.453125q-0.578125 1.109375 -1.609375 1.765625q-1.015625 0.640625 -2.28125 0.640625zm-0.15625 -1.578125q0.796875 0 1.46875 -0.390625q0.671875 -0.40625 1.046875 -1.109375q0.390625 -0.71875 0.390625 -1.625q0 -0.671875 -0.28125 -1.203125q-0.28125 -0.546875 -0.796875 -0.859375q-0.515625 -0.3125 -1.140625 -0.3125q-0.796875 0 -1.4375 0.453125q-0.640625 0.4375 -1.0 1.171875q-0.359375 0.734375 -0.359375 1.59375q0 0.6875 0.28125 1.203125q0.296875 0.515625 0.765625 0.796875q0.484375 0.28125 1.0625 0.28125zm8.228775 -8.03125q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm4.4691315 -3.296875l1.734375 0l-2.015625 11.453125l-1.734375 0l2.015625 -11.453125zm4.619751 2.09375q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm5.7016296 8.28125q-0.953125 0 -1.53125 -0.515625q-0.5625 -0.53125 -0.5625 -1.484375q0 -0.265625 0.078125 -0.796875l0.703125 -3.984375l-1.421875 0l0.28125 -1.5l1.421875 0l0.421875 -2.3125l1.703125 0l-0.40625 2.3125l1.984375 0l-0.265625 1.5l-2.0 0l-0.671875 3.859375q-0.046875 0.21875 -0.046875 0.5q0 0.375 0.234375 0.59375q0.234375 0.21875 0.625 0.21875q0.53125 0 1.0625 -0.3125l-0.296875 1.6875q-0.5625 0.234375 -1.3125 0.234375zm5.5863953 -0.625l-2.03125 -7.65625l1.890625 0l1.375 5.5625l0.0625 0l3.265625 -5.5625l1.9375 0l-7.109375 11.609375l-1.859375 0l2.46875 -3.953125zm5.345764 1.734375q1.78125 -1.71875 2.6875 -3.5625q0.921875 -1.84375 0.921875 -4.125q0 -1.515625 -0.375 -2.765625q-0.375 -1.25 -1.046875 -2.359375l1.265625 -0.90625q0.8125 1.140625 1.328125 2.71875q0.53125 1.578125 0.53125 3.421875q0 2.453125 -1.140625 4.671875q-1.125 2.21875 -3.125 3.84375l-1.046875 -0.9375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 67.2l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m145.88518 148.08624q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l11.875 0l0 51.75l26.671875 0l0 11.265625l-38.546875 0l0 -63.015625zm67.48804 64.421875q-8.265625 0 -14.609375 -4.65625q-6.328125 -4.671875 -8.875 -13.203125l11.171875 -4.40625q1.3125 5.015625 4.484375 8.015625q3.171875 2.984375 7.921875 2.984375q3.953125 0 6.765625 -1.96875q2.828125 -1.984375 2.828125 -5.515625q0 -3.515625 -2.6875 -5.75q-2.6875 -2.25 -9.546875 -4.796875l-3.875 -1.40625q-6.0625 -2.125 -10.375 -6.46875q-4.3125 -4.359375 -4.3125 -10.96875q0 -4.921875 2.546875 -8.96875q2.546875 -4.046875 7.203125 -6.375q4.671875 -2.34375 10.578125 -2.34375q8.53125 0 13.453125 4.015625q4.9375 4.0 6.78125 9.359375l-10.46875 4.40625q-0.96875 -2.90625 -3.390625 -4.875q-2.421875 -1.984375 -6.203125 -1.984375q-3.875 0 -6.390625 1.8125q-2.5 1.796875 -2.5 4.703125q0 2.8125 2.375 4.796875q2.375 1.96875 7.828125 3.8125l3.96875 1.328125q8.1875 2.8125 12.53125 7.4375q4.359375 4.625 4.359375 12.09375q0 6.15625 -3.171875 10.4375q-3.15625 4.265625 -8.140625 6.375q-4.96875 2.109375 -10.25 2.109375z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 220.80136l96.0 0l0 38.393707l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 244.70572q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 220.80132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 228.92441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 242.92441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 220.8l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 235.9231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 283.2l95.999985 0l0 28.409424l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m233.76959 303.5147q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm7.388153 1.46875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm2.8638763 -1.71875q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm12.390396 1.875q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.375 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.546875 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875 -0.75l0.65625 -5.5l5.90625 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 283.59363l96.0 0l0 28.409424l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m134.15361 303.90836q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm7.388153 1.46875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm4.848877 -8.71875l-1.796875 1.28125l-0.875 -1.328125l3.171875 -2.265625l1.234375 0l0 10.9375l-1.734375 0l0 -8.625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 285.0754l0 -28.566925" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 285.0754l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 257.50848c1.8170166 0 3.2899933 1.4729614 3.2899933 3.289978c0 1.8170166 -1.4729767 3.2900085 -3.2899933 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.289978 3.2899933 -3.289978z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 158.4l288.0 0l0 28.787415l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m93.98752 180.3062q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm11.160614 0q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -10.515625l1.609375 0l0 1.5l0.078125 0q0.453125 -0.78125 1.328125 -1.296875q0.875 -0.515625 1.859375 -0.515625q1.125 0 1.953125 0.546875q0.828125 0.53125 1.1875 1.421875q0.53125 -0.890625 1.421875 -1.421875q0.890625 -0.546875 2.078125 -0.546875q1.765625 0 2.640625 1.078125q0.890625 1.0625 0.890625 2.890625l0 6.546875l-1.671875 0l0 -6.28125q0 -1.421875 -0.578125 -2.0625q-0.578125 -0.640625 -1.71875 -0.640625q-0.765625 0 -1.390625 0.453125q-0.609375 0.4375 -0.96875 1.171875q-0.34375 0.734375 -0.34375 1.59375l0 5.765625l-1.703125 0l0 -6.265625q0 -1.4375 -0.578125 -2.078125q-0.578125 -0.640625 -1.703125 -0.640625q-0.75 0 -1.375 0.453125q-0.625 0.453125 -0.984375 1.203125q-0.34375 0.75 -0.34375 1.609375l0 5.71875l-1.6875 0l0 -10.203125zm21.207489 10.515625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm7.369995 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.919998 1.34375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm4.498123 -12.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm3.238739 0l1.8125 0l3.171875 8.203125l0.03125 0l3.203125 -8.203125l1.7812653 0l-4.1562653 10.203125l-1.71875 0l-4.125 -10.203125zm15.636246 10.515625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm2.5256042 6.1875l0 0zm6.2337646 -14.3125l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.107483 0.546875l-4.21875 -9.5625l1.84375 0l3.203125 7.578125l0.03125 0l3.078125 -7.578125l1.84375 0l-6.296875 14.515625l-1.765625 0l2.28125 -4.953125zm11.498138 0.953125q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm10.819977 1.53125q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm11.554352 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.1325073 -0.15625l0 0zm9.633713 0.3125q-1.078125 0 -2.09375 -0.4375q-1.0 -0.453125 -1.78125 -1.3125q-0.78125 -0.875 -1.125 -2.125l1.625 -0.65625q0.34375 1.28125 1.265625 2.109375q0.921875 0.8125 2.15625 0.8125q1.234375 0 2.09375 -0.671875q0.859375 -0.671875 0.859375 -1.828125q0 -1.0 -0.734375 -1.640625q-0.71875 -0.65625 -2.375 -1.21875l-0.90625 -0.328125q-1.515625 -0.53125 -2.484375 -1.40625q-0.953125 -0.890625 -0.953125 -2.453125q0 -1.015625 0.5625 -1.875q0.5625 -0.875 1.5625 -1.390625q1.0 -0.53125 2.234375 -0.53125q1.234375 0 2.15625 0.46875q0.921875 0.453125 1.46875 1.109375q0.5625 0.65625 0.78125 1.296875l-1.59375 0.6875q-0.21875 -0.734375 -0.921875 -1.328125q-0.703125 -0.609375 -1.875 -0.609375q-1.09375 0 -1.875 0.625q-0.78125 0.609375 -0.78125 1.546875q0 0.84375 0.65625 1.375q0.671875 0.53125 2.0 0.984375l0.9375 0.328125q1.828125 0.65625 2.84375 1.65625q1.015625 0.984375 1.015625 2.6875q0 1.375 -0.703125 2.3125q-0.703125 0.9375 -1.796875 1.375q-1.078125 0.4375 -2.21875 0.4375zm6.911865 -14.625l1.6875 0l0 4.21875l-0.078125 1.390625l0.078125 0q0.421875 -0.78125 1.328125 -1.296875q0.921875 -0.515625 2.0 -0.515625q1.859375 0 2.828125 1.09375q0.984375 1.078125 0.984375 2.875l0 6.546875l-1.6875 0l0 -6.28125q0 -1.375 -0.703125 -2.03125q-0.703125 -0.671875 -1.828125 -0.671875q-0.796875 0 -1.46875 0.484375q-0.671875 0.484375 -1.0625 1.25q-0.390625 0.75 -0.390625 1.5625l0 5.6875l-1.6875 0l0 -14.3125zm12.279999 2.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm14.723114 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-4.640625 0l0 8.65625l-1.703125 0l0 -8.65625l-1.875 0l0 -1.546875l1.875 0l0 -1.09375q0 -0.96875 0.4375 -1.6875q0.4375 -0.71875 1.171875 -1.109375q0.75 -0.390625 1.65625 -0.390625q0.859375 0 1.5 0.25l0 1.65625q-0.359375 -0.140625 -0.6875 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l4.640625 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.859375 0.3125 1.234375q0.390625 0.4375 1.109375 0.4375q0.609375 0 1.109375 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 284.57184l0 -28.283447" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 284.57184l0 -20.70346" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 257.2884c1.8170166 0 3.2900085 1.472992 3.2900085 3.2900085c0 1.8170166 -1.472992 3.289978 -3.2900085 3.289978c-1.8170166 0 -3.2899933 -1.4729614 -3.2899933 -3.289978c0 -1.8170166 1.4729767 -3.2900085 3.2899933 -3.2900085z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/fid_4x3.svg b/src/site/content/en/vitals/fid_4x3.svg
deleted file mode 100644
index 71991c7c0a2..00000000000
--- a/src/site/content/en/vitals/fid_4x3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 24.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m128.42107 40.46437l39.953125 0l0 11.265625l-28.078125 0l0 15.3125l25.265625 0l0 11.265625l-25.265625 0l0 25.171875l-11.875 0l0 -63.015625zm50.424026 0l11.875 0l0 63.015625l-11.875 0l0 -63.015625zm26.223999 0l21.296875 0q9.859375 0 17.15625 3.96875q7.296875 3.953125 11.25 11.09375q3.96875 7.125 3.96875 16.453125q0 9.328125 -3.96875 16.453125q-3.953125 7.125 -11.25 11.09375q-7.296875 3.953125 -17.15625 3.953125l-21.296875 0l0 -63.015625zm20.765625 51.75q10.203125 0 15.5625 -5.40625q5.375 -5.421875 5.375 -14.828125q0 -9.421875 -5.375 -14.828125q-5.359375 -5.421875 -15.5625 -5.421875l-8.890625 0l0 40.484375l8.890625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 177.60136l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 201.5057q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 177.60132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 185.72441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 199.72441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 177.6l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 192.7231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 240.0l95.999985 0l0 28.409454l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m221.31894 260.31473q-1.25 0 -2.296875 -0.703125q-1.046875 -0.71875 -1.453125 -2.09375l1.609375 -0.65625q0.234375 0.859375 0.78125 1.328125q0.546875 0.46875 1.359375 0.46875q0.8125 0 1.40625 -0.5q0.59375 -0.5 0.59375 -1.265625q0 -0.765625 -0.625 -1.25q-0.609375 -0.5 -1.5625 -0.5l-0.9375 0l0 -1.59375l0.859375 0q0.796875 0 1.328125 -0.421875q0.546875 -0.421875 0.546875 -1.1875q0 -0.65625 -0.484375 -1.0625q-0.484375 -0.40625 -1.234375 -0.40625q-0.734375 0 -1.171875 0.390625q-0.4375 0.390625 -0.625 0.96875l-1.578125 -0.65625q0.328125 -0.921875 1.171875 -1.609375q0.859375 -0.703125 2.203125 -0.703125q1.0 0 1.78125 0.390625q0.796875 0.375 1.234375 1.0625q0.453125 0.671875 0.453125 1.515625q0 0.859375 -0.421875 1.46875q-0.421875 0.609375 -1.03125 0.921875l0 0.078125q0.8125 0.34375 1.3125 1.03125q0.515625 0.6875 0.515625 1.640625q0 0.96875 -0.484375 1.734375q-0.484375 0.75 -1.34375 1.1875q-0.84375 0.421875 -1.90625 0.421875zm9.722641 0q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm10.560028 1.625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm4.743637 -8.15625l1.625 0l0 1.109375l0.09375 0q0.375 -0.59375 1.046875 -0.984375q0.671875 -0.390625 1.46875 -0.390625q0.875 0 1.515625 0.421875q0.65625 0.421875 0.953125 1.109375q0.421875 -0.6875 1.109375 -1.109375q0.703125 -0.421875 1.65625 -0.421875q1.40625 0 2.125 0.859375q0.71875 0.859375 0.71875 2.328125l0 5.234375l-1.71875 0l0 -4.9375q0 -1.890625 -1.59375 -1.890625q-0.875 0 -1.4375 0.703125q-0.546875 0.703125 -0.546875 1.75l0 4.375l-1.71875 0l0 -4.9375q0 -1.890625 -1.640625 -1.890625q-0.84375 0 -1.390625 0.71875q-0.546875 0.703125 -0.546875 1.75l0 4.359375l-1.71875 0l0 -8.15625zm17.176758 8.40625q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 240.39362l96.0 0l0 28.409454l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m115.89456 251.83334l-1.796875 1.28125l-0.875 -1.328125l3.171875 -2.265625l1.234375 0l0 10.9375l-1.734375 0l0 -8.625zm8.387009 8.875q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm10.560028 1.625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm4.743637 -8.15625l1.625 0l0 1.109375l0.09375 0q0.375 -0.59375 1.046875 -0.984375q0.671875 -0.390625 1.46875 -0.390625q0.875 0 1.515625 0.421875q0.65625 0.421875 0.953125 1.109375q0.421875 -0.6875 1.109375 -1.109375q0.703125 -0.421875 1.65625 -0.421875q1.40625 0 2.125 0.859375q0.71875 0.859375 0.71875 2.328125l0 5.234375l-1.71875 0l0 -4.9375q0 -1.890625 -1.59375 -1.890625q-0.875 0 -1.4375 0.703125q-0.546875 0.703125 -0.546875 1.75l0 4.375l-1.71875 0l0 -4.9375q0 -1.890625 -1.640625 -1.890625q-0.84375 0 -1.390625 0.71875q-0.546875 0.703125 -0.546875 1.75l0 4.359375l-1.71875 0l0 -8.15625zm17.176773 8.40625q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 241.87541l0 -28.56694" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 241.87541l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 214.30849c1.8170166 0 3.2899933 1.4729767 3.2899933 3.2899933c0 1.8170166 -1.4729767 3.2899933 -3.2899933 3.2899933c-1.8170166 0 -3.2899933 -1.4729767 -3.2899933 -3.2899933c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 115.2l288.0 0l0 28.7874l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m121.34873 122.4812l8.281258 0l0 1.609375l-6.5781326 0l0 4.90625l5.9375076 0l0 1.59375l-5.9375076 0l0 6.203125l-1.703125 0l0 -14.3125zm11.091881 2.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm10.646881 10.515625q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm6.2337494 -14.3125l1.703125 0l0 14.3125l-1.703125 0l0 -14.3125zm4.571869 4.109375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm11.141861 0l1.609375 0l0 1.515625l0.078125 0q0.46875 -0.765625 1.390625 -1.296875q0.9375 -0.53125 2.09375 -0.53125q1.375 0 2.484375 0.703125q1.109375 0.6875 1.75 1.9375q0.640625 1.234375 0.640625 2.78125q0 1.546875 -0.640625 2.78125q-0.640625 1.234375 -1.75 1.9375q-1.109375 0.6875 -2.484375 0.6875q-1.15625 0 -2.09375 -0.515625q-0.921875 -0.53125 -1.390625 -1.296875l-0.078125 0l0.078125 1.40625l0 4.40625l-1.6875 0l0 -14.515625zm5.0 8.984375q0.875 0 1.65625 -0.484375q0.78125 -0.484375 1.234375 -1.359375q0.46875 -0.875 0.46875 -2.03125q0 -1.171875 -0.46875 -2.046875q-0.453125 -0.875 -1.234375 -1.359375q-0.78125 -0.484375 -1.65625 -0.484375q-0.90625 0 -1.6875 0.484375q-0.765625 0.484375 -1.234375 1.359375q-0.46875 0.875 -0.46875 2.046875q0 1.15625 0.46875 2.03125q0.46875 0.875 1.234375 1.359375q0.78125 0.484375 1.6875 0.484375zm10.62561 1.53125q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm11.554367 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm6.2337494 -14.3125l4.328125 0q2.203125 0 3.84375 0.90625q1.640625 0.90625 2.515625 2.53125q0.875 1.609375 0.875 3.71875q0 2.09375 -0.875 3.71875q-0.875 1.625 -2.515625 2.53125q-1.640625 0.90625 -3.84375 0.90625l-4.328125 0l0 -14.3125zm4.328125 12.6875q2.53125 0 4.015625 -1.453125q1.5 -1.46875 1.5 -4.078125q0 -2.625 -1.5 -4.078125q-1.484375 -1.46875 -4.015625 -1.46875l-2.625 0l0 11.078125l2.625 0zm13.634979 1.9375q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -8.125l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm7.369995 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.107498 0.546875l-4.21875 -9.5625l1.84375 0l3.203125 7.578125l0.03125 0l3.078125 -7.578125l1.84375 0l-6.296875 14.515625l-1.765625 0l2.28125 -4.953125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 241.37184l0 -28.283463" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 241.37184l0 -20.703476" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 214.08838c1.8170166 0 3.2900085 1.4729767 3.2900085 3.2899933c0 1.8170166 -1.472992 3.2900085 -3.2900085 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/fid_8x2.svg b/src/site/content/en/vitals/fid_8x2.svg
deleted file mode 100644
index e4f335cf9aa..00000000000
--- a/src/site/content/en/vitals/fid_8x2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 768.0 192.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l768.0 0l0 192.0l-768.0 0l0 -192.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l768.0 0l0 192.0l-768.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m28.8 19.2l259.21262 0l0 115.2126l-259.21262 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m89.04934 42.731922l43.578117 0l0 12.28125l-30.624992 0l0 16.703121l27.562492 0l0 12.296875l-27.562492 0l0 27.453125l-12.953125 0l0 -68.734375zm55.007973 0l12.95314 0l0 68.734375l-12.95314 0l0 -68.734375zm28.607986 0l23.234375 0q10.75 0 18.71875 4.328125q7.96875 4.3125 12.28125 12.09375q4.328125 7.765621 4.328125 17.937496q0 10.1875 -4.328125 17.96875q-4.3125 7.765625 -12.28125 12.09375q-7.96875 4.3125 -18.71875 4.3125l-23.234375 0l0 -68.734375zm22.65625 56.45312q11.125 0 16.984375 -5.90625q5.859375 -5.90625 5.859375 -16.1875q0 -10.265625 -5.859375 -16.171871q-5.859375 -5.90625 -16.984375 -5.90625l-9.703125 0l0 44.17187l9.703125 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m360.0 57.6l115.212585 0l0 43.2126l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m401.9218 84.22505q-1.359375 0 -2.5 -0.65625q-1.140625 -0.65625 -1.828125 -1.796875q-0.671875 -1.140625 -0.671875 -2.53125q0 -1.40625 0.671875 -2.546875q0.6875 -1.140625 1.828125 -1.78125q1.140625 -0.65625 2.5 -0.65625q1.09375 0 2.015625 0.390625q0.921875 0.375 1.5625 1.0625l-1.015625 1.015625q-0.96875 -1.09375 -2.5625 -1.09375q-0.921875 0 -1.75 0.453125q-0.8125 0.4375 -1.296875 1.265625q-0.46875 0.828125 -0.46875 1.890625q0 1.0625 0.484375 1.890625q0.484375 0.8125 1.296875 1.265625q0.8125 0.4375 1.75 0.4375q1.515625 0 2.453125 -0.953125q0.3125 -0.28125 0.515625 -0.734375q0.203125 -0.453125 0.28125 -1.0l-3.28125 0l0 -1.296875l4.640625 0q0.078125 0.453125 0.078125 0.765625q0 0.90625 -0.28125 1.734375q-0.28125 0.8125 -0.890625 1.4375q-0.640625 0.703125 -1.53125 1.078125q-0.890625 0.359375 -2.0 0.359375zm10.868805 0q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202087 -8.375l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m475.2 57.600365l124.787415 0l0 43.2126l-124.787415 0z" fill-rule="evenodd"/><path fill="#000000" d="m517.5868 66.459785l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm9.662842 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0zm9.361877 1.609375q-1.1875 0 -2.140625 -0.6875q-0.953125 -0.703125 -1.3125 -1.953125l1.375 -0.5625q0.21875 0.796875 0.765625 1.3125q0.546875 0.5 1.3125 0.5q0.71875 0 1.21875 -0.375q0.5 -0.375 0.5 -1.03125q0 -0.59375 -0.4375 -0.984375q-0.4375 -0.390625 -1.515625 -0.765625l-0.59375 -0.21875q-0.984375 -0.34375 -1.625 -0.953125q-0.640625 -0.625 -0.640625 -1.65625q0 -0.703125 0.375 -1.296875q0.375 -0.609375 1.0625 -0.953125q0.6875 -0.34375 1.5625 -0.34375q1.234375 0 1.96875 0.609375q0.75 0.59375 1.015625 1.359375l-1.3125 0.5625q-0.140625 -0.484375 -0.5625 -0.828125q-0.421875 -0.34375 -1.109375 -0.34375q-0.640625 0 -1.09375 0.34375q-0.453125 0.34375 -0.453125 0.875q0 0.5 0.40625 0.828125q0.40625 0.3125 1.25 0.609375l0.609375 0.21875q1.234375 0.421875 1.890625 1.109375q0.671875 0.671875 0.671875 1.8125q0 0.921875 -0.46875 1.5625q-0.46875 0.625 -1.21875 0.9375q-0.734375 0.3125 -1.5 0.3125z" fill-rule="nonzero"/><path fill="#000000" d="m491.15063 82.459785l1.46875 0l0 9.546875l-1.46875 0l0 -9.546875zm3.611908 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768707 0l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm4.5910645 -4.453125l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0zm9.286377 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm5.32959 -8.375l1.59375 0l2.15625 6.34375l0.34375 1.078125l0.078125 0l0.359375 -1.078125l2.25 -6.34375l1.59375 0l-3.46875 9.546875l-1.515625 0l-3.390625 -9.546875zm9.647156 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768677 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm11.615967 1.390625l-2.6875 0l0 -1.390625l6.8125 0l0 1.390625l-2.671875 0l0 8.15625l-1.453125 0l0 -8.15625z" fill-rule="nonzero"/><path fill="#ff4e42" d="m600.025 57.60126l115.212585 0l0 43.212597l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m639.73035 74.460686l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm8.939758 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202393 -8.375l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m552.0 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m574.5663 145.61494q-1.359375 0 -2.5 -0.765625q-1.125 -0.78125 -1.5625 -2.265625l1.75 -0.71875q0.25 0.9375 0.84375 1.4375q0.59375 0.5 1.46875 0.5q0.875 0 1.515625 -0.53125q0.640625 -0.53125 0.640625 -1.375q0 -0.828125 -0.671875 -1.359375q-0.65625 -0.546875 -1.671875 -0.546875l-1.03125 0l0 -1.703125l0.9375 0q0.859375 0 1.4375 -0.453125q0.59375 -0.46875 0.59375 -1.296875q0 -0.71875 -0.53125 -1.15625q-0.53125 -0.4375 -1.328125 -0.4375q-0.796875 0 -1.28125 0.421875q-0.46875 0.421875 -0.671875 1.046875l-1.703125 -0.71875q0.34375 -0.984375 1.265625 -1.734375q0.9375 -0.75 2.390625 -0.75q1.078125 0 1.9375 0.421875q0.859375 0.40625 1.328125 1.140625q0.484375 0.734375 0.484375 1.640625q0 0.9375 -0.453125 1.59375q-0.453125 0.65625 -1.109375 1.0l0 0.09375q0.859375 0.359375 1.40625 1.109375q0.5625 0.734375 0.5625 1.78125q0 1.046875 -0.53125 1.875q-0.515625 0.8125 -1.4375 1.28125q-0.921875 0.46875 -2.078125 0.46875zm10.533813 0q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm11.436523 1.765625q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm5.7333374 1.484375l0 0zm5.1312256 -8.84375l1.765625 0l0 1.21875l0.109375 0q0.390625 -0.65625 1.109375 -1.0625q0.734375 -0.421875 1.609375 -0.421875q0.953125 0 1.65625 0.453125q0.703125 0.4375 1.015625 1.1875q0.453125 -0.75 1.203125 -1.1875q0.765625 -0.453125 1.78125 -0.453125q1.53125 0 2.3125 0.921875q0.78125 0.921875 0.78125 2.515625l0 5.671875l-1.859375 0l0 -5.359375q0 -2.046875 -1.734375 -2.046875q-0.953125 0 -1.546875 0.765625q-0.59375 0.765625 -0.59375 1.90625l0 4.734375l-1.859375 0l0 -5.359375q0 -2.046875 -1.78125 -2.046875q-0.921875 0 -1.515625 0.78125q-0.578125 0.765625 -0.578125 1.90625l0 4.71875l-1.875 0l0 -8.84375zm18.605957 9.125q-1.5 0 -2.484375 -0.65625q-0.984375 -0.671875 -1.375 -1.71875l1.671875 -0.734375q0.3125 0.71875 0.890625 1.09375q0.578125 0.359375 1.296875 0.359375q0.75 0 1.25 -0.265625q0.5 -0.265625 0.5 -0.796875q0 -0.484375 -0.421875 -0.765625q-0.421875 -0.296875 -1.328125 -0.5l-1.0625 -0.25q-1.046875 -0.25 -1.75 -0.90625q-0.6875 -0.671875 -0.6875 -1.671875q0 -0.765625 0.453125 -1.34375q0.46875 -0.59375 1.234375 -0.90625q0.78125 -0.328125 1.6875 -0.328125q1.25 0 2.171875 0.484375q0.9375 0.484375 1.359375 1.421875l-1.625 0.71875q-0.53125 -1.046875 -1.890625 -1.046875q-0.65625 0 -1.09375 0.28125q-0.4375 0.265625 -0.4375 0.6875q0 0.78125 1.34375 1.125l1.28125 0.3125q1.3125 0.328125 1.96875 0.984375q0.671875 0.65625 0.671875 1.625q0 0.828125 -0.484375 1.46875q-0.46875 0.625 -1.3125 0.984375q-0.828125 0.34375 -1.828125 0.34375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m427.2 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m449.96008 135.98994l-1.9375 1.390625l-0.953125 -1.4375l3.421875 -2.46875l1.34375 0l0 11.859375l-1.875 0l0 -9.34375zm9.083771 9.625q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm11.436493 1.765625q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm5.733368 1.484375l0 0zm5.1311646 -8.84375l1.765625 0l0 1.21875l0.109375 0q0.390625 -0.65625 1.109375 -1.0625q0.734375 -0.421875 1.609375 -0.421875q0.953125 0 1.65625 0.453125q0.703125 0.4375 1.015625 1.1875q0.453125 -0.75 1.203125 -1.1875q0.765625 -0.453125 1.78125 -0.453125q1.53125 0 2.3125 0.921875q0.78125 0.921875 0.78125 2.515625l0 5.671875l-1.859375 0l0 -5.359375q0 -2.046875 -1.734375 -2.046875q-0.953125 0 -1.546875 0.765625q-0.59375 0.765625 -0.59375 1.90625l0 4.734375l-1.859375 0l0 -5.359375q0 -2.046875 -1.78125 -2.046875q-0.921875 0 -1.515625 0.78125q-0.578125 0.765625 -0.578125 1.90625l0 4.71875l-1.875 0l0 -8.84375zm18.606018 9.125q-1.5 0 -2.484375 -0.65625q-0.984375 -0.671875 -1.375 -1.71875l1.671875 -0.734375q0.3125 0.71875 0.890625 1.09375q0.578125 0.359375 1.296875 0.359375q0.75 0 1.25 -0.265625q0.5 -0.265625 0.5 -0.796875q0 -0.484375 -0.421875 -0.765625q-0.421875 -0.296875 -1.328125 -0.5l-1.0625 -0.25q-1.046875 -0.25 -1.75 -0.90625q-0.6875 -0.671875 -0.6875 -1.671875q0 -0.765625 0.453125 -1.34375q0.46875 -0.59375 1.234375 -0.90625q0.78125 -0.328125 1.6875 -0.328125q1.25 0 2.171875 0.484375q0.9375 0.484375 1.359375 1.421875l-1.625 0.71875q-0.53125 -1.046875 -1.890625 -1.046875q-0.65625 0 -1.09375 0.28125q-0.4375 0.265625 -0.4375 0.6875q0 0.78125 1.34375 1.125l1.28125 0.3125q1.3125 0.328125 1.96875 0.984375q0.671875 0.65625 0.671875 1.625q0 0.828125 -0.484375 1.46875q-0.46875 0.625 -1.3125 0.984375q-0.828125 0.34375 -1.828125 0.34375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m474.88504 125.7474l0 -28.7874" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m474.88504 125.747406l0 -21.207397" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m474.88504 97.96001c1.8170166 0 3.2900085 1.4729843 3.2900085 3.290001c0 1.8170166 -1.472992 3.2899933 -3.2900085 3.2899933c-1.8170166 0 -3.289978 -1.4729767 -3.289978 -3.2899933c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m28.8 129.6l268.7874 0l0 38.393692l-268.7874 0z" fill-rule="evenodd"/><path fill="#666666" d="m87.84882 141.01123l8.828125 0l0 1.71875l-7.015625 0l0 5.234375l6.34375 0l0 1.703125l-6.34375 0l0 6.609375l-1.8125 0l0 -15.265625zm11.815079 2.390625q-0.53125 0 -0.921875 -0.390625q-0.375 -0.390625 -0.375 -0.921875q0 -0.546875 0.375 -0.921875q0.390625 -0.375 0.921875 -0.375q0.5625 0 0.9375 0.375q0.375 0.375 0.375 0.921875q0 0.53125 -0.375 0.921875q-0.375 0.390625 -0.9375 0.390625zm-0.890625 2.0l1.8125 0l0 10.875l-1.8125 0l0 -10.875zm4.6483 0l1.734375 0l0 1.75l0.078125 0q0.3125 -0.90625 1.234375 -1.484375q0.921875 -0.59375 1.921875 -0.59375q0.75 0 1.28125 0.21875l0 1.96875q-0.6875 -0.34375 -1.53125 -0.34375q-0.796875 0 -1.453125 0.453125q-0.65625 0.4375 -1.0625 1.203125q-0.390625 0.75 -0.390625 1.625l0 6.078125l-1.8125 0l0 -10.875zm11.368286 11.21875q-1.75 0 -2.921875 -0.8125q-1.171875 -0.828125 -1.671875 -2.109375l1.625 -0.734375q0.40625 0.984375 1.203125 1.515625q0.8125 0.53125 1.765625 0.53125q1.015625 0 1.734375 -0.40625q0.734375 -0.421875 0.734375 -1.1875q0 -0.6875 -0.578125 -1.09375q-0.5625 -0.421875 -1.8125 -0.71875l-1.3125 -0.34375q-1.296875 -0.3125 -2.140625 -1.078125q-0.828125 -0.78125 -0.828125 -1.984375q0 -0.9375 0.5625 -1.65625q0.5625 -0.71875 1.5 -1.09375q0.953125 -0.390625 2.03125 -0.390625q1.4375 0 2.546875 0.625q1.125 0.609375 1.59375 1.71875l-1.578125 0.734375q-0.71875 -1.453125 -2.578125 -1.453125q-0.90625 0 -1.578125 0.421875q-0.671875 0.40625 -0.671875 1.046875q0 0.59375 0.46875 0.96875q0.484375 0.375 1.421875 0.609375l1.578125 0.40625q1.59375 0.40625 2.40625 1.203125q0.8125 0.796875 0.8125 1.953125q0 1.0 -0.578125 1.765625q-0.578125 0.75 -1.5625 1.15625q-0.984375 0.40625 -2.171875 0.40625zm10.372192 -0.171875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l2.65625 0l0 1.640625l-2.65625 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625zm2.2748718 -0.171875l0 0zm6.651268 -15.265625l1.8125 0l0 15.265625l-1.8125 0l0 -15.265625zm4.866043 4.390625l1.734375 0l0 1.59375l0.078125 0q0.453125 -0.8125 1.421875 -1.375q0.984375 -0.5625 2.09375 -0.5625q1.96875 0 3.0 1.140625q1.03125 1.140625 1.03125 3.109375l0 6.96875l-1.8125 0l0 -6.703125q0 -1.515625 -0.734375 -2.1875q-0.71875 -0.6875 -1.96875 -0.6875q-0.875 0 -1.578125 0.5q-0.6875 0.484375 -1.078125 1.28125q-0.375 0.796875 -0.375 1.671875l0 6.125l-1.8125 0l0 -10.875zm11.887009 0l1.71875 0l0 1.625l0.09375 0q0.484375 -0.84375 1.46875 -1.40625q1.0 -0.5625 2.234375 -0.5625q1.4687653 0 2.6562653 0.75q1.1875 0.75 1.859375 2.078125q0.6875 1.3125 0.6875 2.953125q0 1.65625 -0.6875 2.96875q-0.671875 1.3125 -1.859375 2.0625q-1.1875 0.75 -2.6562653 0.75q-1.234375 0 -2.234375 -0.5625q-0.984375 -0.578125 -1.46875 -1.375l-0.09375 0l0.09375 1.484375l0 4.71875l-1.8125 0l0 -15.484375zm5.328125 9.578125q0.93751526 0 1.7656403 -0.515625q0.828125 -0.515625 1.3125 -1.453125q0.5 -0.9375 0.5 -2.171875q0 -1.234375 -0.5 -2.171875q-0.484375 -0.9375 -1.3125 -1.453125q-0.828125 -0.515625 -1.7656403 -0.515625q-0.96875 0 -1.796875 0.515625q-0.8125 0.515625 -1.3125 1.453125q-0.5 0.9375 -0.5 2.171875q0 1.234375 0.5 2.171875q0.5 0.9375 1.3125 1.453125q0.828125 0.515625 1.796875 0.515625zm11.350723 1.640625q-1.96875 0 -3.0 -1.15625q-1.03125 -1.15625 -1.03125 -3.21875l0 -6.84375l1.8125 0l0 6.5625q0 1.5625 0.703125 2.296875q0.703125 0.71875 1.890625 0.71875q0.921875 0 1.625 -0.484375q0.71875 -0.5 1.109375 -1.28125q0.40625 -0.796875 0.40625 -1.671875l0 -6.140625l1.8125 0l0 10.875l-1.734375 0l0 -1.578125l-0.078125 0q-0.453125 0.8125 -1.4375 1.375q-0.96875 0.546875 -2.078125 0.546875zm12.306183 -0.171875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l2.65625 0l0 1.640625l-2.65625 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625zm2.2748718 -0.171875l0 0zm6.6512756 -15.265625l4.609375 0q2.34375 0 4.09375 0.96875q1.75 0.96875 2.6875 2.703125q0.9375 1.71875 0.9375 3.953125q0 2.25 -0.9375 3.984375q-0.9375 1.71875 -2.6875 2.6875q-1.75 0.96875 -4.09375 0.96875l-4.609375 0l0 -15.265625zm4.609375 13.53125q2.703125 0 4.296875 -1.546875q1.59375 -1.5625 1.59375 -4.359375q0 -2.78125 -1.59375 -4.34375q-1.59375 -1.5625 -4.296875 -1.5625l-2.796875 0l0 11.8125l2.796875 0zm14.548737 2.078125q-1.5625 0 -2.796875 -0.75q-1.234375 -0.75 -1.9375 -2.0625q-0.6875 -1.3125 -0.6875 -2.953125q0 -1.546875 0.640625 -2.875q0.65625 -1.34375 1.859375 -2.125q1.21875 -0.796875 2.765625 -0.796875q1.609375 0 2.78125 0.71875q1.171875 0.703125 1.796875 1.96875q0.625 1.265625 0.625 2.875q0 0.265625 -0.03125 0.5625l-8.625 0q0.0625 1.234375 0.59375 2.09375q0.546875 0.84375 1.359375 1.28125q0.828125 0.421875 1.71875 0.421875q2.125 0 3.21875 -1.96875l1.53125 0.75q-0.671875 1.296875 -1.890625 2.078125q-1.21875 0.78125 -2.921875 0.78125zm3.140625 -6.9375q-0.046875 -0.671875 -0.390625 -1.359375q-0.34375 -0.6875 -1.078125 -1.15625q-0.71875 -0.46875 -1.828125 -0.46875q-1.28125 0 -2.171875 0.828125q-0.890625 0.8125 -1.171875 2.15625l6.640625 0zm4.023407 -8.671875l1.8125 0l0 15.265625l-1.8125 0l0 -15.265625zm7.862335 15.609375q-1.1875 0 -2.125 -0.46875q-0.9375 -0.46875 -1.453125 -1.28125q-0.515625 -0.828125 -0.515625 -1.875q0 -1.734375 1.296875 -2.703125q1.3125 -0.96875 3.296875 -0.96875q0.984375 0 1.828125 0.21875q0.84375 0.203125 1.28125 0.484375l0 -0.65625q0 -1.21875 -0.859375 -1.953125q-0.84375 -0.734375 -2.140625 -0.734375q-0.90625 0 -1.6875 0.390625q-0.765625 0.390625 -1.21875 1.09375l-1.359375 -1.015625q0.640625 -0.984375 1.765625 -1.53125q1.125 -0.5625 2.5 -0.5625q2.21875 0 3.46875 1.171875q1.265625 1.15625 1.265625 3.15625l0 6.890625l-1.734375 0l0 -1.5625l-0.078125 0q-0.46875 0.796875 -1.40625 1.359375q-0.9375 0.546875 -2.125 0.546875zm0.171875 -1.609375q0.921875 0 1.703125 -0.46875q0.796875 -0.46875 1.265625 -1.25q0.46875 -0.796875 0.46875 -1.734375q-0.515625 -0.34375 -1.265625 -0.546875q-0.734375 -0.21875 -1.5625 -0.21875q-1.5 0 -2.265625 0.625q-0.75 0.609375 -0.75 1.59375q0 0.890625 0.6875 1.453125q0.6875 0.546875 1.71875 0.546875zm10.799438 0.578125l-4.5 -10.1875l1.96875 0l3.40625 8.078125l0.046875 0l3.28125 -8.078125l1.953125 0l-6.71875 15.484375l-1.875 0l2.4375 -5.296875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m600.0 125.62752l0 -28.566933" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m600.0 125.627525l0 -20.98693" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m600.0 98.06059c1.8170166 0 3.289978 1.4729843 3.289978 3.290001c0 1.8170166 -1.4729614 3.290001 -3.289978 3.290001c-1.8170166 0 -3.289978 -1.4729843 -3.289978 -3.290001c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/fid_ux.svg b/src/site/content/en/vitals/fid_ux.svg
deleted file mode 100644
index 66cede43be7..00000000000
--- a/src/site/content/en/vitals/fid_ux.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 336.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 336.0l-384.0 0l0 -336.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 336.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.006233 28.0l288.0 0l0 33.574802l-288.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m144.34512 52.81928q-0.796875 -1.125 -1.328125 -2.703125q-0.515625 -1.578125 -0.515625 -3.4375q0 -2.453125 1.125 -4.65625q1.140625 -2.21875 3.140625 -3.859375l1.046875 0.953125q-1.765625 1.6875 -2.6875 3.546875q-0.90625 1.859375 -0.90625 4.125q0 1.515625 0.359375 2.765625q0.375 1.25 1.03125 2.375l-1.265625 0.890625zm5.174759 -13.625l1.75 0l-2.046875 11.453125l-1.734375 0l2.03125 -11.453125zm5.007889 4.40625q0.4375 -0.640625 1.125 -1.0q0.6875 -0.375 1.578125 -0.375q1.234375 0 1.921875 0.6875q0.6875 0.671875 0.6875 1.765625q0 0.609375 -0.09375 1.078125l-0.875 4.890625l-1.71875 0l0.84375 -4.796875q0.078125 -0.40625 0.078125 -0.703125q0 -0.609375 -0.40625 -0.96875q-0.40625 -0.359375 -1.09375 -0.359375q-0.953125 0 -1.640625 0.6875q-0.6875 0.671875 -0.859375 1.75l-0.78125 4.390625l-1.734375 0l1.453125 -8.15625l1.609375 0l-0.1875 1.109375l0.09375 0zm9.239395 7.171875q-0.953125 0 -1.53125 -0.515625q-0.5625 -0.53125 -0.5625 -1.484375q0 -0.265625 0.078125 -0.796875l0.703125 -3.984375l-1.421875 0l0.28125 -1.5l1.421875 0l0.421875 -2.3125l1.703125 0l-0.40625 2.3125l1.984375 0l-0.265625 1.5l-2.0 0l-0.671875 3.859375q-0.046875 0.21875 -0.046875 0.5q0 0.375 0.234375 0.59375q0.234375 0.21875 0.625 0.21875q0.53125 0 1.0625 -0.3125l-0.296875 1.6875q-0.5625 0.234375 -1.3125 0.234375zm6.577011 0.125q-1.109375 0 -1.96875 -0.5q-0.84375 -0.515625 -1.296875 -1.390625q-0.453125 -0.875 -0.453125 -1.90625q0 -1.265625 0.59375 -2.390625q0.59375 -1.125 1.65625 -1.796875q1.078125 -0.6875 2.453125 -0.6875q1.0625 0 1.859375 0.484375q0.796875 0.46875 1.203125 1.25q0.421875 0.78125 0.421875 1.71875q0 0.703125 -0.171875 1.25l-6.296875 0q-0.03125 0.203125 -0.03125 0.359375q0.015625 0.953125 0.640625 1.515625q0.625 0.5625 1.515625 0.5625q0.90625 0 1.515625 -0.34375q0.609375 -0.34375 1.015625 -1.03125l1.296875 0.71875q-0.65625 1.09375 -1.625 1.640625q-0.96875 0.546875 -2.328125 0.546875zm2.84375 -5.265625l0 -0.140625q0 -0.734375 -0.5625 -1.25q-0.546875 -0.53125 -1.46875 -0.53125q-0.9375 0 -1.625 0.5625q-0.6875 0.546875 -0.9375 1.359375l4.59375 0zm3.8722687 -3.140625l1.609375 0l-0.1875 1.09375l0.09375 0q0.34375 -0.625 1.0625 -0.984375q0.71875 -0.359375 1.546875 -0.359375q0.59375 0 0.953125 0.171875l-0.3125 1.8125q-0.46875 -0.3125 -1.1875 -0.3125q-0.921875 0 -1.65625 0.703125q-0.71875 0.703125 -0.890625 1.71875l-0.75 4.3125l-1.734375 0l1.453125 -8.15625zm7.3311462 8.40625q-0.71875 0 -1.328125 -0.328125q-0.609375 -0.328125 -0.96875 -0.890625q-0.359375 -0.578125 -0.359375 -1.28125q0 -1.359375 0.96875 -2.15625q0.96875 -0.8125 2.71875 -0.8125q0.625 0 1.203125 0.140625q0.59375 0.125 1.046875 0.34375l0.109375 -0.421875l0.03125 -0.40625q0 -0.609375 -0.53125 -1.0q-0.515625 -0.390625 -1.28125 -0.390625q-1.3125 0 -2.09375 0.984375l-1.21875 -0.890625q0.609375 -0.75 1.515625 -1.15625q0.921875 -0.40625 1.984375 -0.40625q1.53125 0 2.40625 0.75q0.875 0.734375 0.875 1.953125q0 0.34375 -0.078125 0.828125l-0.875 4.890625l-1.671875 0l0.171875 -0.984375l-0.09375 0q-0.40625 0.5625 -1.046875 0.90625q-0.625 0.328125 -1.484375 0.328125zm0.5 -1.40625q1.0 0 1.703125 -0.640625q0.703125 -0.640625 0.859375 -1.640625q-0.484375 -0.25 -0.9375 -0.359375q-0.4375 -0.125 -1.078125 -0.125q-0.890625 0 -1.421875 0.40625q-0.53125 0.390625 -0.53125 1.125q0 0.5625 0.40625 0.90625q0.40625 0.328125 1.0 0.328125zm9.389282 1.40625q-1.078125 0 -1.9375 -0.5q-0.84375 -0.515625 -1.3125 -1.375q-0.453125 -0.875 -0.453125 -1.90625q0 -1.3125 0.59375 -2.4375q0.609375 -1.125 1.703125 -1.78125q1.109375 -0.671875 2.53125 -0.671875q1.3125 0 2.1875 0.65625q0.890625 0.640625 1.1875 1.625l-1.59375 0.640625q-0.234375 -0.625 -0.75 -0.96875q-0.515625 -0.359375 -1.234375 -0.359375q-0.796875 0 -1.453125 0.40625q-0.65625 0.40625 -1.046875 1.125q-0.390625 0.71875 -0.390625 1.59375q0 1.03125 0.59375 1.703125q0.609375 0.671875 1.5625 0.671875q0.78125 0 1.375 -0.359375q0.609375 -0.359375 0.9375 -1.0l1.421875 0.6875q-1.25 2.25 -3.921875 2.25zm8.286621 -0.125q-0.953125 0 -1.53125 -0.515625q-0.5625 -0.53125 -0.5625 -1.484375q0 -0.265625 0.078125 -0.796875l0.703125 -3.984375l-1.421875 0l0.28125 -1.5l1.421875 0l0.421875 -2.3125l1.703125 0l-0.40625 2.3125l1.984375 0l-0.265625 1.5l-2.0 0l-0.671875 3.859375q-0.046875 0.21875 -0.046875 0.5q0 0.375 0.234375 0.59375q0.234375 0.21875 0.625 0.21875q0.53125 0 1.0625 -0.3125l-0.296875 1.6875q-0.5625 0.234375 -1.3125 0.234375zm5.8832703 -9.484375q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm2.9847717 0l1.90625 0l1.21875 5.9375l0.078125 0l3.359375 -5.9375l1.9375 0l-4.84375 8.15625l-1.75 0l-1.90625 -8.15625zm11.064148 -1.203125q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm5.7016296 8.28125q-0.953125 0 -1.53125 -0.515625q-0.5625 -0.53125 -0.5625 -1.484375q0 -0.265625 0.078125 -0.796875l0.703125 -3.984375l-1.421875 0l0.28125 -1.5l1.421875 0l0.421875 -2.3125l1.703125 0l-0.40625 2.3125l1.984375 0l-0.265625 1.5l-2.0 0l-0.671875 3.859375q-0.046875 0.21875 -0.046875 0.5q0 0.375 0.234375 0.59375q0.234375 0.21875 0.625 0.21875q0.53125 0 1.0625 -0.3125l-0.296875 1.6875q-0.5625 0.234375 -1.3125 0.234375zm5.5863953 -0.625l-2.03125 -7.65625l1.890625 0l1.375 5.5625l0.0625 0l3.265625 -5.5625l1.9375 0l-7.109375 11.609375l-1.859375 0l2.46875 -3.953125zm5.345764 1.734375q1.78125 -1.71875 2.6875 -3.5625q0.921875 -1.84375 0.921875 -4.125q0 -1.515625 -0.375 -2.765625q-0.375 -1.25 -1.046875 -2.359375l1.265625 -0.90625q0.8125 1.140625 1.328125 2.71875q0.53125 1.578125 0.53125 3.421875q0 2.453125 -1.140625 4.671875q-1.125 2.21875 -3.125 3.84375l-1.046875 -0.9375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 67.2l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m128.42107 83.66437l39.953125 0l0 11.265625l-28.078125 0l0 15.3125l25.265625 0l0 11.265625l-25.265625 0l0 25.171875l-11.875 0l0 -63.015625zm50.424026 0l11.875 0l0 63.015625l-11.875 0l0 -63.015625zm26.223999 0l21.296875 0q9.859375 0 17.15625 3.96875q7.296875 3.953125 11.25 11.09375q3.96875 7.125 3.96875 16.453125q0 9.328125 -3.96875 16.453125q-3.953125 7.125 -11.25 11.09375q-7.296875 3.953125 -17.15625 3.953125l-21.296875 0l0 -63.015625zm20.765625 51.75q10.203125 0 15.5625 -5.40625q5.375 -5.421875 5.375 -14.828125q0 -9.421875 -5.375 -14.828125q-5.359375 -5.421875 -15.5625 -5.421875l-8.890625 0l0 40.484375l8.890625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 220.80136l96.0 0l0 38.393707l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 244.70572q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 220.80132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 228.92441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 242.92441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 220.8l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 235.9231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 283.2l95.999985 0l0 28.409424l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m221.31894 303.5147q-1.25 0 -2.296875 -0.703125q-1.046875 -0.71875 -1.453125 -2.09375l1.609375 -0.65625q0.234375 0.859375 0.78125 1.328125q0.546875 0.46875 1.359375 0.46875q0.8125 0 1.40625 -0.5q0.59375 -0.5 0.59375 -1.265625q0 -0.765625 -0.625 -1.25q-0.609375 -0.5 -1.5625 -0.5l-0.9375 0l0 -1.59375l0.859375 0q0.796875 0 1.328125 -0.421875q0.546875 -0.421875 0.546875 -1.1875q0 -0.65625 -0.484375 -1.0625q-0.484375 -0.40625 -1.234375 -0.40625q-0.734375 0 -1.171875 0.390625q-0.4375 0.390625 -0.625 0.96875l-1.578125 -0.65625q0.328125 -0.921875 1.171875 -1.609375q0.859375 -0.703125 2.203125 -0.703125q1.0 0 1.78125 0.390625q0.796875 0.375 1.234375 1.0625q0.453125 0.671875 0.453125 1.515625q0 0.859375 -0.421875 1.46875q-0.421875 0.609375 -1.03125 0.921875l0 0.078125q0.8125 0.34375 1.3125 1.03125q0.515625 0.6875 0.515625 1.640625q0 0.96875 -0.484375 1.734375q-0.484375 0.75 -1.34375 1.1875q-0.84375 0.421875 -1.90625 0.421875zm9.722641 0q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm10.560028 1.625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm4.743637 -8.15625l1.625 0l0 1.109375l0.09375 0q0.375 -0.59375 1.046875 -0.984375q0.671875 -0.390625 1.46875 -0.390625q0.875 0 1.515625 0.421875q0.65625 0.421875 0.953125 1.109375q0.421875 -0.6875 1.109375 -1.109375q0.703125 -0.421875 1.65625 -0.421875q1.40625 0 2.125 0.859375q0.71875 0.859375 0.71875 2.328125l0 5.234375l-1.71875 0l0 -4.9375q0 -1.890625 -1.59375 -1.890625q-0.875 0 -1.4375 0.703125q-0.546875 0.703125 -0.546875 1.75l0 4.375l-1.71875 0l0 -4.9375q0 -1.890625 -1.640625 -1.890625q-0.84375 0 -1.390625 0.71875q-0.546875 0.703125 -0.546875 1.75l0 4.359375l-1.71875 0l0 -8.15625zm17.176758 8.40625q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 283.59363l96.0 0l0 28.409424l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m115.89456 295.03336l-1.796875 1.28125l-0.875 -1.328125l3.171875 -2.265625l1.234375 0l0 10.9375l-1.734375 0l0 -8.625zm8.387009 8.875q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm10.560028 1.625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm4.743637 -8.15625l1.625 0l0 1.109375l0.09375 0q0.375 -0.59375 1.046875 -0.984375q0.671875 -0.390625 1.46875 -0.390625q0.875 0 1.515625 0.421875q0.65625 0.421875 0.953125 1.109375q0.421875 -0.6875 1.109375 -1.109375q0.703125 -0.421875 1.65625 -0.421875q1.40625 0 2.125 0.859375q0.71875 0.859375 0.71875 2.328125l0 5.234375l-1.71875 0l0 -4.9375q0 -1.890625 -1.59375 -1.890625q-0.875 0 -1.4375 0.703125q-0.546875 0.703125 -0.546875 1.75l0 4.375l-1.71875 0l0 -4.9375q0 -1.890625 -1.640625 -1.890625q-0.84375 0 -1.390625 0.71875q-0.546875 0.703125 -0.546875 1.75l0 4.359375l-1.71875 0l0 -8.15625zm17.176773 8.40625q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 285.0754l0 -28.566925" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 285.0754l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 257.50848c1.8170166 0 3.2899933 1.4729614 3.2899933 3.289978c0 1.8170166 -1.4729767 3.2900085 -3.2899933 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.289978 3.2899933 -3.289978z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 158.4l288.0 0l0 28.787415l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m121.34873 165.6812l8.281258 0l0 1.609375l-6.5781326 0l0 4.90625l5.9375076 0l0 1.59375l-5.9375076 0l0 6.203125l-1.703125 0l0 -14.3125zm11.091881 2.234375q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm10.646881 10.515625q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm6.2337494 -14.3125l1.703125 0l0 14.3125l-1.703125 0l0 -14.3125zm4.571869 4.109375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm11.141861 0l1.609375 0l0 1.515625l0.078125 0q0.46875 -0.765625 1.390625 -1.296875q0.9375 -0.53125 2.09375 -0.53125q1.375 0 2.484375 0.703125q1.109375 0.6875 1.75 1.9375q0.640625 1.234375 0.640625 2.78125q0 1.546875 -0.640625 2.78125q-0.640625 1.234375 -1.75 1.9375q-1.109375 0.6875 -2.484375 0.6875q-1.15625 0 -2.09375 -0.515625q-0.921875 -0.53125 -1.390625 -1.296875l-0.078125 0l0.078125 1.40625l0 4.40625l-1.6875 0l0 -14.515625zm5.0 8.984375q0.875 0 1.65625 -0.484375q0.78125 -0.484375 1.234375 -1.359375q0.46875 -0.875 0.46875 -2.03125q0 -1.171875 -0.46875 -2.046875q-0.453125 -0.875 -1.234375 -1.359375q-0.78125 -0.484375 -1.65625 -0.484375q-0.90625 0 -1.6875 0.484375q-0.765625 0.484375 -1.234375 1.359375q-0.46875 0.875 -0.46875 2.046875q0 1.15625 0.46875 2.03125q0.46875 0.875 1.234375 1.359375q0.78125 0.484375 1.6875 0.484375zm10.62561 1.53125q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm11.554367 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm6.2337494 -14.3125l4.328125 0q2.203125 0 3.84375 0.90625q1.640625 0.90625 2.515625 2.53125q0.875 1.609375 0.875 3.71875q0 2.09375 -0.875 3.71875q-0.875 1.625 -2.515625 2.53125q-1.640625 0.90625 -3.84375 0.90625l-4.328125 0l0 -14.3125zm4.328125 12.6875q2.53125 0 4.015625 -1.453125q1.5 -1.46875 1.5 -4.078125q0 -2.625 -1.5 -4.078125q-1.484375 -1.46875 -4.015625 -1.46875l-2.625 0l0 11.078125l2.625 0zm13.634979 1.9375q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -8.125l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm7.369995 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm10.107498 0.546875l-4.21875 -9.5625l1.84375 0l3.203125 7.578125l0.03125 0l3.078125 -7.578125l1.84375 0l-6.296875 14.515625l-1.765625 0l2.28125 -4.953125z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 284.57184l0 -28.283447" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 284.57184l0 -20.70346" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 257.2884c1.8170166 0 3.2900085 1.472992 3.2900085 3.2900085c0 1.8170166 -1.472992 3.289978 -3.2900085 3.289978c-1.8170166 0 -3.2899933 -1.4729614 -3.2899933 -3.289978c0 -1.8170166 1.4729767 -3.2900085 3.2899933 -3.2900085z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/index.md b/src/site/content/en/vitals/index.md
index dafa1a41298..9357dd79507 100644
--- a/src/site/content/en/vitals/index.md
+++ b/src/site/content/en/vitals/index.md
@@ -1,19 +1,22 @@
 ---
-layout: page
+layout: post
 title: Web Vitals
-subhead: Essential metrics for a healthy site
 description: Essential metrics for a healthy site
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
 authors:
   - philipwalton
 date: 2020-04-30
-updated: 2020-07-21
-masthead: web-vitals.svg
+updated: 2023-05-10
 tags:
   - metrics
   - performance
   - web-vitals
 ---
 
+{% Aside %}
+**New:** [Interaction to Next Paint (INP)](/inp/) is no longer experimental! [Learn more](/inp-cwv/) about our plans to replace FID with INP as a Core Web Vital in March 2024.
+{% endAside %}
+
 Optimizing for quality of user experience is key to the long-term success of any
 site on the web. Whether you're a business owner, marketer, or developer, Web
 Vitals can help you quantify the experience of your site and identify
@@ -28,7 +31,7 @@ Google has provided a number of tools over the years to measure and report on
 performance. Some developers are experts at using these tools, while others have
 found the abundance of both tools and metrics challenging to keep up with.
 
-Site owners should not have to be performance gurus in order to understand the
+Site owners should not have to be performance experts to understand the
 quality of experience they are delivering to their users. The Web Vitals
 initiative aims to simplify the landscape, and help sites focus on the metrics
 that matter most, the **Core Web Vitals**.
@@ -49,24 +52,20 @@ over time. The current set for 2020 focuses on three aspects of the user
 experience—_loading_, _interactivity_, and _visual stability_—and includes the
 following metrics (and their respective thresholds):
 
-<div class="w-stack w-stack--center w-stack--md">
-  <img src="lcp_ux.svg" width="400px" height="350px"
-       alt="Largest Contentful Paint threshold recommendations">
-  <img src="fid_ux.svg" width="400px" height="350px"
-       alt="First Input Delay threshold recommendations">
-  <img src="cls_ux.svg" width="400px" height="350px"
-       alt="Cumulative Layout Shift threshold recommendations">
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Largest Contentful Paint threshold recommendations", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="First Input Delay threshold recommendations", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Cumulative Layout Shift threshold recommendations", width="400", height="350" %}
 </div>
 
 - **[Largest Contentful Paint (LCP)](/lcp/)**: measures _loading_ performance.
   To provide a good user experience, LCP should occur within **2.5 seconds** of
   when the page first starts loading.
 - **[First Input Delay (FID)](/fid/)**: measures _interactivity_. To provide a
-  good user experience, pages should have a FID of less than **100
-  milliseconds**.
+  good user experience, pages should have a FID of **100 milliseconds** or less.
 - **[Cumulative Layout Shift (CLS)](/cls/)**: measures _visual stability_. To
-  provide a good user experience, pages should maintain a CLS of less than
-  **0.1.**
+  provide a good user experience, pages should maintain a CLS of **0.1.** or
+  less.
 
 For each of the above metrics, to ensure you're hitting the recommended target
 for most of your users, a good threshold to measure is the **75th percentile**
@@ -77,9 +76,76 @@ it meets the recommended targets at the 75th percentile for all of the above
 three metrics.
 
 {% Aside %}
-  To learn more about the research and methodology behind these recommendations,
-  see: [Defining the Core Web Vitals metrics
-  thresholds](/defining-core-web-vitals-thresholds/)
+To learn more about the research and methodology behind these recommendations,
+see: [Defining the Core Web Vitals metrics
+thresholds](/defining-core-web-vitals-thresholds/)
+{% endAside %}
+
+### Lifecycle
+
+Metrics on the Core Web Vitals track go through a lifecycle consisting of three phases: experimental, pending, and stable.
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gCO4TElL05PwDZJiu3r9.svg", alt="The three lifecycle phases of Core Web Vitals metrics, visualized as a series of three chevrons. From left to right, the phases are Experimental, Pending, and Stable.", style="background-color: transparent; min-width: 100%; height: auto;", width="300", height="31" %}
+</figure>
+
+The table below reflects where all Core Web Vitals currently are in their lifecycle:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <th>
+        Experimental
+      </th>
+      <th>
+        Pending
+      </th>
+      <th>
+        Stable
+      </th>
+    </thead>
+    <tbody>
+      <td>
+        &nbsp;
+      </td>
+      <td style="vertical-align: top;">
+        <a href="/inp/" rel="noopener">INP</a>
+      </td>
+      <td style="vertical-align: top;">
+        <a href="/lcp/" rel="noopener">LCP</a><br>
+        <a href="/cls/" rel="noopener">CLS</a><br>
+        <a href="/fid/" rel="noopener">FID</a>
+      </td>
+    </tbody>
+  </table>
+</div>
+
+Each phase is designed to signal to developers how they should think about each metric:
+
+- **Experimental metrics** are prospective Core Web Vitals that may still be undergoing significant changes depending on testing and community feedback.
+- **Pending metrics** are future Core Web Vitals that have passed the testing and feedback stage and have a well-defined timeline to becoming stable.
+- **Stable metrics** are the current set of Core Web Vitals that Chrome considers essential for great user experiences.
+
+#### Experimental
+
+When a metric is initially developed and enters the ecosystem, it is considered an _experimental metric_.
+
+The purpose of the experimental phase is to assess a metric's fitness, first by exploring the problem to be solved, and possibly iterate on what previous metrics may have failed to address. For example, [Interaction to Next Paint (INP)](/inp/) was initially developed as an experimental metric to address the runtime performance issues present on the web more comprehensively than [First Input Delay (FID)](/fid/).
+
+The experimental phase of Core Web Vitals lifecycle is also intended to give flexibility in a metric's development by identifying bugs and even exploring changes to its initial definition. It's also the phase in which community feedback is most important.
+
+#### Pending
+
+When the Chrome team determines that an experimental metric has received sufficient feedback and proven its efficacy, it becomes a _pending metric_. Pending metrics are held in this phase for a minimum of six months to give the ecosystem time to adapt. The only remaining hurdle for a metric to advance beyond the pending phase is to wait out the transition period. Community feedback remains an important aspect of this phase, as more developers begin to use the metric.
+
+#### Stable
+
+When a Core Web Vital candidate metric is finalized, it becomes a _stable metric_—for metrics that are on the Core Web Vitals track, this means the metric becomes a Core Web Vital.
+
+Stable metrics are actively supported, and may be subject to bug fixes and definition changes. Stable Core Web Vitals metrics won't change more than once per year. Any change to a Core Web Vital will be clearly communicated in the metric's official documentation, as well as in the metric's CHANGELOG. Core Web Vitals are also included in any assessments.
+
+{% Aside 'important' %}
+Metrics that are stable are not necessarily permanent. While stable metrics are long-lived, a stable metric can be retired and replaced by another metric if it addresses the problem area more effectively.
 {% endAside %}
 
 ### Tools to measure and report Core Web Vitals
@@ -92,15 +158,15 @@ Core Web Vitals.
 #### Field tools to measure Core Web Vitals
 
 The [Chrome User Experience
-Report](https://developers.google.com/web/tools/chrome-user-experience-report)
+Report](https://developer.chrome.com/docs/crux/)
 collects anonymized, real user measurement data for each Core Web Vital. This
 data enables site owners to quickly assess their performance without requiring
 them to manually instrument analytics on their pages, and powers tools like
-[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/),
+[PageSpeed Insights](https://pagespeed.web.dev/),
 and Search Console's [Core Web Vitals
 report](https://support.google.com/webmasters/answer/9205520).
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <tr>
       <td>&nbsp;</td>
@@ -109,7 +175,7 @@ report](https://support.google.com/webmasters/answer/9205520).
       <td>CLS</td>
     </tr>
     <tr>
-      <td><a href="https://developers.google.com/web/tools/chrome-user-experience-report">
+      <td><a href="https://developer.chrome.com/docs/crux/">
         Chrome User Experience Report</a></td>
       <td>✔</td>
       <td>✔</td>
@@ -133,9 +199,9 @@ report](https://support.google.com/webmasters/answer/9205520).
 </div>
 
 {% Aside %}
-  For guidance on how to use these tools, and which tool is right for your use
-  case, see: [Getting started with measuring Web
-  Vitals](/vitals-measurement-getting-started/)
+For guidance on how to use these tools, and which tool is right for your use
+case, see: [Getting started with measuring Web
+Vitals](/vitals-measurement-getting-started/)
 {% endAside %}
 
 The data provided by Chrome User Experience Report offers a quick way to assess
@@ -149,6 +215,10 @@ own real-user monitoring.
 Each of the Core Web Vitals can be measured in JavaScript using standard web
 APIs.
 
+{% Aside %}
+Note that the Core Web Vitals measured in JavaScript using public APIs may differ from the Core Web Vitals reported by CrUX. Read [this article](/crux-and-rum-differences/) for more info.
+{% endAside %}
+
 The easiest way to measure all the Core Web Vitals is to use the
 [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript library, a
 small, production-ready wrapper around the underlying web APIs that measures
@@ -162,20 +232,37 @@ documentation for complete
 [API](https://github.com/GoogleChrome/web-vitals#api) details):
 
 ```js
-import {getCLS, getFID, getLCP} from 'web-vitals';
+import {onCLS, onFID, onLCP} from 'web-vitals';
 
 function sendToAnalytics(metric) {
   const body = JSON.stringify(metric);
   // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
   (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
-      fetch('/analytics', {body, method: 'POST', keepalive: true});
+    fetch('/analytics', {body, method: 'POST', keepalive: true});
 }
 
-getCLS(sendToAnalytics);
-getFID(sendToAnalytics);
-getLCP(sendToAnalytics);
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
 ```
 
+Once you've configured your site to use the
+[web-vitals](https://github.com/GoogleChrome/web-vitals) library to measure and
+send your Core Web Vitals data to an analytics endpoint, the next step is to
+aggregate and report on that data to see if your pages are meeting the
+recommended thresholds for at least 75% of page visits.
+
+While some analytics providers have built-in support for Core Web Vitals
+metrics, even those that don't should include basic custom metric features that
+allow you to measure Core Web Vitals in their tool.
+
+One example of this is the [Web Vitals
+Report](https://github.com/GoogleChromeLabs/web-vitals-report), which allows
+site owners to measure their Core Web Vitals using Google Analytics. For
+guidance on measuring Core Web Vitals using other analytics tools, see [Best
+practices for measuring Web Vitals in the
+field](/vitals-field-measurement-best-practices/).
+
 You can also report on each of the Core Web Vitals without writing any code
 using the [Web Vitals Chrome
 Extension](https://github.com/GoogleChrome/web-vitals-extension). This extension
@@ -185,7 +272,7 @@ measure each of these metrics and display them to users as they browse the web.
 This extension can be helpful in understanding the performance of your own
 sites, your competitor's sites, and the web at large.
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -221,10 +308,10 @@ underlying web APIs can refer to these metric guides for implementation details:
 - [Measure CLS in JavaScript](/cls/#measure-cls-in-javascript)
 
 {% Aside %}
-  For additional guidance on how to measure these metrics using popular
-  analytics services (or your own in-house analytics tools), see: [Best
-  practices for measuring Web Vitals in the
-  field](/vitals-field-measurement-best-practices/)
+For additional guidance on how to measure these metrics using popular
+analytics services (or your own in-house analytics tools), see: [Best
+practices for measuring Web Vitals in the
+field](/vitals-field-measurement-best-practices/)
 {% endAside %}
 
 #### Lab tools to measure Core Web Vitals
@@ -239,7 +326,7 @@ catch performance regressions before they happen.
 The following tools can be used to measure the Core Web Vitals in a lab
 environment:
 
-<div class="w-table-wrapper">
+<div class="table-wrapper">
   <table>
     <thead>
       <tr>
@@ -251,14 +338,14 @@ environment:
     </thead>
     <tbody>
       <tr>
-        <td><a href="https://developers.google.com/web/tools/chrome-devtools">
+        <td><a href="https://developer.chrome.com/docs/devtools/">
           Chrome DevTools</a></td>
         <td>✔</td>
         <td>✘ (use <a href="/tbt/">TBT</a> instead)</td>
         <td>✔</td>
       </tr>
       <tr>
-        <td><a href="https://developers.google.com/web/tools/lighthouse">
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/">
           Lighthouse</a></td>
         <td>✔</td>
         <td>✘ (use <a href="/tbt/">TBT</a> instead)</td>
@@ -269,11 +356,11 @@ environment:
 </div>
 
 {% Aside %}
-  Tools like Lighthouse that load pages in a simulated environment without a
-  user cannot measure FID (there is no user input). However, the Total Blocking
-  Time (TBT) metric is lab-measurable and is an excellent proxy for FID.
-  Performance optimizations that improve TBT in the lab should improve FID in
-  the field (see performance recommendations below).
+Tools like Lighthouse that load pages in a simulated environment without a
+user cannot measure FID (there is no user input). However, the Total Blocking
+Time (TBT) metric is lab-measurable and is an excellent proxy for FID.
+Performance optimizations that improve TBT in the lab should improve FID in
+the field (see performance recommendations below).
 {% endAside %}
 
 While lab measurement is an essential part of delivering great experiences, it
@@ -304,11 +391,11 @@ These other Web Vitals often serve as proxy or supplemental metrics for the Core
 Web Vitals, to help capture a larger part of the experience or to aid in
 diagnosing a specific issue.
 
-For example, the metrics [Time to First Byte (TTFB)](/time-to-first-byte/) and
+For example, the metrics [Time to First Byte (TTFB)](/ttfb/) and
 [First Contentful Paint (FCP)](/fcp/) are both vital aspects of the _loading_
 experience, and are both useful in diagnosing issues with LCP (slow [server
 response times](/overloaded-server/) or [render-blocking
-resources](/render-blocking-resources/), respectively).
+resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/), respectively).
 
 Similarly, metrics like [Total Blocking Time (TBT)](/tbt/) and [Time to
 Interactive (TTI)](/tti/) are lab metrics that are vital in catching and
@@ -336,5 +423,3 @@ may change with greater frequency.
 
 For all Web Vitals, changes will be clearly documented in this public
 [CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog).
-
-<web-feedback></web-feedback>
diff --git a/src/site/content/en/vitals/lcp_4x3.svg b/src/site/content/en/vitals/lcp_4x3.svg
deleted file mode 100644
index 23c044d7523..00000000000
--- a/src/site/content/en/vitals/lcp_4x3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 48.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m122.72093 67.518745l10.796875 0l0 47.046875l24.234375 0l0 10.234375l-35.03125 0l0 -57.28125zm70.00496 58.5625q-8.328125 0 -15.21875 -3.953125q-6.875 -3.96875 -10.828125 -10.796875q-3.953125 -6.84375 -3.953125 -15.171875q0 -8.3125 3.953125 -15.15625q3.953125 -6.84375 10.828125 -10.796875q6.890625 -3.96875 15.21875 -3.96875q12.953125 0 21.4375 9.359375l-7.609375 7.359375q-5.515625 -6.46875 -13.75 -6.46875q-5.359375 0 -9.765625 2.4375q-4.40625 2.4375 -6.921875 6.921875q-2.515625 4.46875 -2.515625 10.3125q0 5.84375 2.515625 10.328125q2.515625 4.46875 6.921875 6.921875q4.40625 2.4375 9.765625 2.4375q9.03125 0 15.109375 -7.53125l7.6875 7.28125q-4.25 5.125 -10.046875 7.8125q-5.796875 2.671875 -12.828125 2.671875zm32.87494 -58.5625l20.15625 0q5.4375 0 9.921875 2.28125q4.484375 2.28125 7.03125 6.40625q2.5625 4.109375 2.5625 9.390625q0 5.28125 -2.5625 9.453125q-2.546875 4.15625 -7.03125 6.4375q-4.484375 2.265625 -9.921875 2.265625l-9.359375 0l0 21.046875l-10.796875 0l0 -57.28125zm20.484375 26.0q4.0 0 6.265625 -2.3125q2.28125 -2.328125 2.28125 -5.609375q0 -3.28125 -2.28125 -5.5625q-2.265625 -2.28125 -6.265625 -2.28125l-9.6875 0l0 15.765625l9.6875 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m47.99836 182.40137l95.99999 0l0 38.393692l-95.99999 0z" fill-rule="evenodd"/><path fill="#000000" d="m83.63084 205.51009q-1.078125 0 -1.984375 -0.515625q-0.90625 -0.53125 -1.4375 -1.4375q-0.53125 -0.921875 -0.53125 -2.03125q0 -1.109375 0.53125 -2.015625q0.53125 -0.921875 1.4375 -1.4375q0.90625 -0.53125 1.984375 -0.53125q0.84375 0 1.578125 0.296875q0.734375 0.296875 1.21875 0.84375l-0.640625 0.640625q-0.375 -0.4375 -0.9375 -0.671875q-0.5625 -0.25 -1.21875 -0.25q-0.796875 0 -1.5 0.390625q-0.703125 0.390625 -1.125 1.109375q-0.421875 0.703125 -0.421875 1.625q0 0.921875 0.421875 1.640625q0.421875 0.703125 1.125 1.09375q0.703125 0.390625 1.5 0.390625q0.78125 0 1.296875 -0.234375q0.515625 -0.25 0.890625 -0.640625q0.265625 -0.296875 0.4375 -0.71875q0.171875 -0.421875 0.21875 -0.9375l-2.828125 0l0 -0.84375l3.671875 0q0.046875 0.296875 0.046875 0.5625q0 0.703125 -0.234375 1.375q-0.21875 0.65625 -0.703125 1.15625q-1.046875 1.140625 -2.796875 1.140625zm8.616745 0q-1.09375 0 -2.0 -0.53125q-0.890625 -0.53125 -1.40625 -1.453125q-0.5 -0.921875 -0.5 -2.0q0 -1.09375 0.5 -2.0q0.515625 -0.921875 1.40625 -1.453125q0.90625 -0.53125 2.0 -0.53125q1.09375 0 1.984375 0.53125q0.90625 0.53125 1.40625 1.453125q0.515625 0.90625 0.515625 2.0q0 1.078125 -0.515625 2.0q-0.5 0.921875 -1.40625 1.453125q-0.890625 0.53125 -1.984375 0.53125zm0 -0.859375q0.828125 0 1.5 -0.390625q0.6875 -0.40625 1.09375 -1.109375q0.40625 -0.71875 0.40625 -1.625q0 -0.90625 -0.40625 -1.609375q-0.40625 -0.71875 -1.09375 -1.109375q-0.671875 -0.40625 -1.5 -0.40625q-0.828125 0 -1.515625 0.40625q-0.6875 0.390625 -1.09375 1.109375q-0.390625 0.703125 -0.390625 1.609375q0 0.90625 0.390625 1.625q0.40625 0.703125 1.09375 1.109375q0.6875 0.390625 1.515625 0.390625zm8.674164 0.859375q-1.09375 0 -2.0 -0.53125q-0.890625 -0.53125 -1.40625 -1.453125q-0.5 -0.921875 -0.5 -2.0q0 -1.09375 0.5 -2.0q0.515625 -0.921875 1.40625 -1.453125q0.90625 -0.53125 2.0 -0.53125q1.09375 0 1.984375 0.53125q0.90625 0.53125 1.40625 1.453125q0.515625 0.90625 0.515625 2.0q0 1.078125 -0.515625 2.0q-0.5 0.921875 -1.40625 1.453125q-0.890625 0.53125 -1.984375 0.53125zm0 -0.859375q0.828125 0 1.5 -0.390625q0.6875 -0.40625 1.09375 -1.109375q0.40625 -0.71875 0.40625 -1.625q0 -0.90625 -0.40625 -1.609375q-0.40625 -0.71875 -1.09375 -1.109375q-0.671875 -0.40625 -1.5 -0.40625q-0.828125 0 -1.515625 0.40625q-0.6875 0.390625 -1.09375 1.109375q-0.390625 0.703125 -0.390625 1.609375q0 0.90625 0.390625 1.625q0.40625 0.703125 1.09375 1.109375q0.6875 0.390625 1.515625 0.390625zm5.249588 -6.9375l2.296875 0q1.171875 0 2.046875 0.484375q0.875 0.484375 1.34375 1.34375q0.46875 0.859375 0.46875 1.984375q0 1.109375 -0.46875 1.984375q-0.46875 0.859375 -1.34375 1.34375q-0.875 0.484375 -2.046875 0.484375l-2.296875 0l0 -7.625zm2.296875 6.765625q1.34375 0 2.140625 -0.78125q0.796875 -0.78125 0.796875 -2.171875q0 -1.40625 -0.796875 -2.171875q-0.796875 -0.78125 -2.140625 -0.78125l-1.390625 0l0 5.90625l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m143.99518 182.4013l96.0 0l0 38.393707l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m176.47038 191.21317l1.09375 0l3.828125 6.0625l0.046875 0l-0.046875 -1.46875l0 -4.59375l0.90625 0l0 7.625l-0.9375 0l-3.984375 -6.359375l-0.046875 0l0.046875 1.46875l0 4.890625l-0.90625 0l0 -7.625zm7.5447083 0l4.40625 0l0 0.859375l-3.5 0l0 2.53125l3.15625 0l0 0.84375l-3.15625 0l0 2.53125l3.5 0l0 0.859375l-4.40625 0l0 -7.625zm5.8716583 0l4.40625 0l0 0.859375l-3.5 0l0 2.53125l3.15625 0l0 0.84375l-3.15625 0l0 2.53125l3.5 0l0 0.859375l-4.40625 0l0 -7.625zm5.8716583 0l2.296875 0q1.171875 0 2.046875 0.484375q0.875 0.484375 1.34375 1.34375q0.46875 0.859375 0.46875 1.984375q0 1.109375 -0.46875 1.984375q-0.46875 0.859375 -1.34375 1.34375q-0.875 0.484375 -2.046875 0.484375l-2.296875 0l0 -7.625zm2.296875 6.765625q1.34375 0 2.140625 -0.78125q0.796875 -0.78125 0.796875 -2.171875q0 -1.40625 -0.796875 -2.171875q-0.796875 -0.78125 -2.140625 -0.78125l-1.390625 0l0 5.90625l1.390625 0zm7.3195496 1.03125q-0.578125 0 -1.125 -0.234375q-0.53125 -0.25 -0.953125 -0.703125q-0.40625 -0.46875 -0.59375 -1.125l0.875 -0.359375q0.171875 0.6875 0.65625 1.125q0.5 0.4375 1.15625 0.4375q0.671875 0 1.125 -0.359375q0.453125 -0.359375 0.453125 -0.984375q0 -0.53125 -0.390625 -0.875q-0.390625 -0.34375 -1.265625 -0.640625l-0.484375 -0.171875q-0.8125 -0.28125 -1.328125 -0.75q-0.5 -0.46875 -0.5 -1.3125q0 -0.53125 0.296875 -1.0q0.296875 -0.46875 0.828125 -0.734375q0.53125 -0.28125 1.203125 -0.28125q0.65625 0 1.140625 0.25q0.5 0.234375 0.78125 0.59375q0.296875 0.34375 0.421875 0.6875l-0.84375 0.359375q-0.125 -0.390625 -0.5 -0.703125q-0.375 -0.328125 -1.0 -0.328125q-0.578125 0 -1.0 0.328125q-0.40625 0.328125 -0.40625 0.828125q0 0.453125 0.34375 0.734375q0.359375 0.28125 1.0625 0.53125l0.5 0.171875q0.96875 0.34375 1.515625 0.875q0.546875 0.53125 0.546875 1.4375q0 0.734375 -0.390625 1.234375q-0.375 0.5 -0.953125 0.734375q-0.5625 0.234375 -1.171875 0.234375zm3.0045013 -0.171875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m156.02632 204.21317l0.90625 0l0 7.625l-0.90625 0l0 -7.625zm2.6108093 0l1.296875 0l2.4375 6.25l0.046875 0l2.421875 -6.25l1.3125 0l0 7.625l-0.890625 0l0 -4.84375l0.03125 -1.453125l-0.03125 0l-2.5 6.296875l-0.75 0l-2.484375 -6.296875l-0.046875 0l0.046875 1.453125l0 4.84375l-0.890625 0l0 -7.625zm9.228409 0l2.5625 0q0.640625 0 1.171875 0.296875q0.546875 0.28125 0.875 0.796875q0.328125 0.515625 0.328125 1.15625q0 0.65625 -0.328125 1.171875q-0.328125 0.515625 -0.875 0.8125q-0.53125 0.28125 -1.171875 0.28125l-1.65625 0l0 3.109375l-0.90625 0l0 -7.625zm2.578125 3.65625q0.4375 0 0.75 -0.203125q0.328125 -0.203125 0.5 -0.515625q0.1875 -0.328125 0.1875 -0.6875q0 -0.34375 -0.1875 -0.65625q-0.171875 -0.328125 -0.5 -0.53125q-0.3125 -0.203125 -0.75 -0.203125l-1.671875 0l0 2.796875l1.671875 0zm3.5599365 -3.65625l2.578125 0q0.625 0 1.15625 0.296875q0.546875 0.28125 0.875 0.796875q0.328125 0.515625 0.328125 1.15625q0 0.53125 -0.25 1.0q-0.234375 0.453125 -0.65625 0.765625q-0.421875 0.3125 -0.921875 0.40625l-0.03125 0.03125l2.15625 3.125l0 0.046875l-1.0625 0l-2.078125 -3.109375l-1.1875 0l0 3.109375l-0.90625 0l0 -7.625zm2.515625 3.671875q0.390625 0 0.734375 -0.171875q0.359375 -0.1875 0.5625 -0.515625q0.203125 -0.328125 0.203125 -0.734375q0 -0.34375 -0.1875 -0.65625q-0.171875 -0.328125 -0.5 -0.53125q-0.3125 -0.203125 -0.75 -0.203125l-1.671875 0l0 2.8125l1.609375 0zm7.260254 4.125q-1.09375 0 -2.0 -0.53125q-0.890625 -0.53125 -1.40625 -1.453125q-0.5 -0.921875 -0.5 -2.0q0 -1.09375 0.5 -2.0q0.515625 -0.921875 1.40625 -1.453125q0.90625 -0.53125 2.0 -0.53125q1.09375 0 1.984375 0.53125q0.90625 0.53125 1.40625 1.453125q0.515625 0.90625 0.515625 2.0q0 1.078125 -0.515625 2.0q-0.5 0.921875 -1.40625 1.453125q-0.890625 0.53125 -1.984375 0.53125zm0 -0.859375q0.828125 0 1.5 -0.390625q0.6875 -0.40625 1.09375 -1.109375q0.40625 -0.71875 0.40625 -1.625q0 -0.90625 -0.40625 -1.609375q-0.40625 -0.71875 -1.09375 -1.109375q-0.671875 -0.40625 -1.5 -0.40625q-0.828125 0 -1.515625 0.40625q-0.6875 0.390625 -1.09375 1.109375q-0.390625 0.703125 -0.390625 1.609375q0 0.90625 0.390625 1.625q0.40625 0.703125 1.09375 1.109375q0.6875 0.390625 1.515625 0.390625zm4.2264557 -6.9375l1.0 0l1.875 5.53125l0.265625 0.75l0.03125 0l0.28125 -0.75l1.96875 -5.53125l1.0 0l-2.796875 7.625l-0.921875 0l-2.703125 -7.625zm7.427292 0l4.40625 0l0 0.859375l-3.5 0l0 2.53125l3.15625 0l0 0.84375l-3.15625 0l0 2.53125l3.5 0l0 0.859375l-4.40625 0l0 -7.625zm5.8716583 0l1.296875 0l2.4375 6.25l0.046875 0l2.421875 -6.25l1.3125 0l0 7.625l-0.890625 0l0 -4.84375l0.03125 -1.453125l-0.03125 0l-2.5 6.296875l-0.75 0l-2.484375 -6.296875l-0.046875 0l0.046875 1.453125l0 4.84375l-0.890625 0l0 -7.625zm9.228409 0l4.40625 0l0 0.859375l-3.5 0l0 2.53125l3.15625 0l0 0.84375l-3.15625 0l0 2.53125l3.5 0l0 0.859375l-4.40625 0l0 -7.625zm5.8716583 0l1.09375 0l3.828125 6.0625l0.046875 0l-0.046875 -1.46875l0 -4.59375l0.90625 0l0 7.625l-0.9375 0l-3.984375 -6.359375l-0.046875 0l0.046875 1.46875l0 4.890625l-0.90625 0l0 -7.625zm9.107208 0.859375l-2.140625 0l0 -0.859375l5.171875 0l0 0.859375l-2.125 0l0 6.765625l-0.90625 0l0 -6.765625z" fill-rule="nonzero"/><path fill="#ff4e42" d="m239.99196 182.4l96.000015 0l0 38.393707l-96.000015 0z" fill-rule="evenodd"/><path fill="#000000" d="m273.98584 197.71185l2.5625 0q0.640625 0 1.171875 0.296875q0.546875 0.28125 0.875 0.796875q0.328125 0.515625 0.328125 1.15625q0 0.65625 -0.328125 1.171875q-0.328125 0.515625 -0.875 0.8125q-0.53125 0.28125 -1.171875 0.28125l-1.65625 0l0 3.109375l-0.90625 0l0 -7.625zm2.578125 3.65625q0.4375 0 0.75 -0.203125q0.328125 -0.203125 0.5 -0.515625q0.1875 -0.328125 0.1875 -0.6875q0 -0.34375 -0.1875 -0.65625q-0.171875 -0.328125 -0.5 -0.53125q-0.3125 -0.203125 -0.75 -0.203125l-1.671875 0l0 2.796875l1.671875 0zm6.984497 4.140625q-1.09375 0 -2.0 -0.53125q-0.890625 -0.53125 -1.40625 -1.453125q-0.5 -0.921875 -0.5 -2.0q0 -1.09375 0.5 -2.0q0.515625 -0.921875 1.40625 -1.453125q0.90625 -0.53125 2.0 -0.53125q1.09375 0 1.984375 0.53125q0.90625 0.53125 1.40625 1.453125q0.515625 0.90625 0.515625 2.0q0 1.078125 -0.515625 2.0q-0.5 0.921875 -1.40625 1.453125q-0.890625 0.53125 -1.984375 0.53125zm0 -0.859375q0.828125 0 1.5 -0.390625q0.6875 -0.40625 1.09375 -1.109375q0.40625 -0.71875 0.40625 -1.625q0 -0.90625 -0.40625 -1.609375q-0.40625 -0.71875 -1.09375 -1.109375q-0.671875 -0.40625 -1.5 -0.40625q-0.828125 0 -1.515625 0.40625q-0.6875 0.390625 -1.09375 1.109375q-0.390625 0.703125 -0.390625 1.609375q0 0.90625 0.390625 1.625q0.40625 0.703125 1.09375 1.109375q0.6875 0.390625 1.515625 0.390625zm8.674164 0.859375q-1.09375 0 -2.0 -0.53125q-0.890625 -0.53125 -1.40625 -1.453125q-0.5 -0.921875 -0.5 -2.0q0 -1.09375 0.5 -2.0q0.515625 -0.921875 1.40625 -1.453125q0.90625 -0.53125 2.0 -0.53125q1.09375 0 1.984375 0.53125q0.90625 0.53125 1.40625 1.453125q0.515625 0.90625 0.515625 2.0q0 1.078125 -0.515625 2.0q-0.5 0.921875 -1.40625 1.453125q-0.890625 0.53125 -1.984375 0.53125zm0 -0.859375q0.828125 0 1.5 -0.390625q0.6875 -0.40625 1.09375 -1.109375q0.40625 -0.71875 0.40625 -1.625q0 -0.90625 -0.40625 -1.609375q-0.40625 -0.71875 -1.09375 -1.109375q-0.671875 -0.40625 -1.5 -0.40625q-0.828125 0 -1.515625 0.40625q-0.6875 0.390625 -1.09375 1.109375q-0.390625 0.703125 -0.390625 1.609375q0 0.90625 0.390625 1.625q0.40625 0.703125 1.09375 1.109375q0.6875 0.390625 1.515625 0.390625zm5.2496033 -6.9375l2.578125 0q0.625 0 1.15625 0.296875q0.546875 0.28125 0.875 0.796875q0.328125 0.515625 0.328125 1.15625q0 0.53125 -0.25 1.0q-0.234375 0.453125 -0.65625 0.765625q-0.421875 0.3125 -0.921875 0.40625l-0.03125 0.03125l2.15625 3.125l0 0.046875l-1.0625 0l-2.078125 -3.109375l-1.1875 0l0 3.109375l-0.90625 0l0 -7.625zm2.515625 3.671875q0.390625 0 0.734375 -0.171875q0.359375 -0.1875 0.5625 -0.515625q0.203125 -0.328125 0.203125 -0.734375q0 -0.34375 -0.1875 -0.65625q-0.171875 -0.328125 -0.5 -0.53125q-0.3125 -0.203125 -0.75 -0.203125l-1.671875 0l0 2.8125l1.609375 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m191.99367 240.0l95.999985 0l0 18.929138l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m222.97105 252.31145l-4.375 0l0 -0.859375l4.265625 -6.296875l1.234375 0l0 6.078125l1.171875 0l0 1.078125l-1.171875 0l0 1.953125l-1.125 0l0 -1.953125zm0 -1.078125l0 -4.4375l-0.046875 0l-3.03125 4.4375l3.078125 0zm4.528549 3.109375q-0.375 0 -0.625 -0.234375q-0.234375 -0.25 -0.234375 -0.609375q0 -0.359375 0.234375 -0.59375q0.25 -0.25 0.625 -0.25q0.359375 0 0.59375 0.25q0.25 0.234375 0.25 0.59375q0 0.359375 -0.25 0.609375q-0.234375 0.234375 -0.59375 0.234375zm5.8752136 0.140625q-1.078125 0 -1.921875 -0.625q-0.828125 -0.640625 -1.28125 -1.71875q-0.4375 -1.09375 -0.4375 -2.4375q0 -1.328125 0.4375 -2.40625q0.453125 -1.09375 1.28125 -1.71875q0.828125 -0.640625 1.921875 -0.640625q1.09375 0 1.90625 0.640625q0.828125 0.625 1.28125 1.71875q0.453125 1.078125 0.453125 2.40625q0 1.34375 -0.453125 2.4375q-0.453125 1.078125 -1.28125 1.71875q-0.828125 0.625 -1.90625 0.625zm0 -1.078125q0.75 0 1.3125 -0.484375q0.5625 -0.5 0.859375 -1.328125q0.3125 -0.84375 0.3125 -1.890625q0 -1.03125 -0.3125 -1.875q-0.296875 -0.84375 -0.859375 -1.328125q-0.5625 -0.484375 -1.3125 -0.484375q-0.765625 0 -1.328125 0.484375q-0.5625 0.484375 -0.859375 1.328125q-0.296875 0.84375 -0.296875 1.875q0 1.046875 0.296875 1.890625q0.296875 0.828125 0.859375 1.328125q0.5625 0.484375 1.328125 0.484375zm4.2997284 0.859375l0 0zm6.3108673 0.21875q-1.09375 0 -1.828125 -0.515625q-0.734375 -0.515625 -1.046875 -1.3125l1.015625 -0.453125q0.25 0.609375 0.75 0.953125q0.5 0.328125 1.109375 0.328125q0.640625 0 1.09375 -0.265625q0.453125 -0.265625 0.453125 -0.734375q0 -0.4375 -0.375 -0.6875q-0.359375 -0.265625 -1.125 -0.453125l-0.828125 -0.203125q-0.8125 -0.203125 -1.328125 -0.6875q-0.515625 -0.484375 -0.515625 -1.234375q0 -0.59375 0.34375 -1.03125q0.359375 -0.453125 0.9375 -0.6875q0.59375 -0.25 1.265625 -0.25q0.890625 0 1.59375 0.390625q0.703125 0.390625 1.0 1.078125l-0.984375 0.453125q-0.453125 -0.90625 -1.625 -0.90625q-0.546875 0 -0.96875 0.265625q-0.421875 0.25 -0.421875 0.65625q0 0.375 0.28125 0.609375q0.296875 0.234375 0.890625 0.375l0.984375 0.25q1.0 0.265625 1.5 0.765625q0.515625 0.5 0.515625 1.21875q0 0.625 -0.359375 1.09375q-0.359375 0.46875 -0.984375 0.734375q-0.609375 0.25 -1.34375 0.25zm7.0114746 0q-0.96875 0 -1.75 -0.46875q-0.765625 -0.46875 -1.203125 -1.28125q-0.421875 -0.828125 -0.421875 -1.859375q0 -0.96875 0.40625 -1.796875q0.40625 -0.84375 1.15625 -1.328125q0.75 -0.5 1.71875 -0.5q1.0 0 1.734375 0.453125q0.734375 0.4375 1.125 1.234375q0.40625 0.78125 0.40625 1.796875q0 0.15625 -0.03125 0.34375l-5.390625 0q0.046875 0.78125 0.375 1.3125q0.328125 0.53125 0.84375 0.796875q0.515625 0.265625 1.078125 0.265625q1.328125 0 2.015625 -1.234375l0.953125 0.46875q-0.421875 0.8125 -1.1875 1.3125q-0.75 0.484375 -1.828125 0.484375zm1.96875 -4.34375q-0.03125 -0.421875 -0.25 -0.84375q-0.203125 -0.421875 -0.65625 -0.71875q-0.453125 -0.296875 -1.15625 -0.296875q-0.796875 0 -1.359375 0.515625q-0.546875 0.515625 -0.734375 1.34375l4.15625 0zm5.6641235 4.34375q-0.984375 0 -1.78125 -0.46875q-0.78125 -0.484375 -1.21875 -1.296875q-0.4375 -0.828125 -0.4375 -1.859375q0 -1.015625 0.4375 -1.84375q0.4375 -0.828125 1.21875 -1.296875q0.796875 -0.46875 1.78125 -0.46875q1.109375 0 1.859375 0.515625q0.75 0.515625 1.0625 1.375l-1.015625 0.421875q-0.25 -0.625 -0.75 -0.953125q-0.5 -0.328125 -1.21875 -0.328125q-0.59375 0 -1.125 0.328125q-0.515625 0.328125 -0.828125 0.921875q-0.3125 0.578125 -0.3125 1.328125q0 0.765625 0.3125 1.359375q0.3125 0.578125 0.828125 0.90625q0.53125 0.328125 1.125 0.328125q0.71875 0 1.234375 -0.328125q0.53125 -0.34375 0.78125 -0.953125l1.015625 0.421875q-0.34375 0.84375 -1.109375 1.375q-0.765625 0.515625 -1.859375 0.515625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m95.99672 240.26237l96.0 0l0 18.929123l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m123.59205 253.3863q2.625 -2.625 3.34375 -3.421875q0.6875 -0.734375 0.921875 -1.140625q0.24999237 -0.421875 0.24999237 -1.0q0 -0.390625 -0.20311737 -0.75q-0.203125 -0.359375 -0.59375 -0.578125q-0.390625 -0.21875 -0.9375 -0.21875q-0.71875 0 -1.171875 0.421875q-0.4375 0.421875 -0.5625 0.90625l-1.03125 -0.40625q0.125 -0.421875 0.46875 -0.875q0.34375 -0.46875 0.921875 -0.796875q0.59375 -0.328125 1.40625 -0.328125q0.828125 0 1.46875 0.359375q0.6562424 0.359375 1.0156174 0.96875q0.359375 0.59375 0.359375 1.28125q0 1.40625 -1.4687424 2.890625l-2.734375 2.75l4.3124924 0l0 1.078125l-5.7656174 0l0 -1.140625zm8.010567 1.21875q-0.375 0 -0.625 -0.234375q-0.234375 -0.25 -0.234375 -0.609375q0 -0.359375 0.234375 -0.59375q0.25 -0.25 0.625 -0.25q0.359375 0 0.59375 0.25q0.25 0.234375 0.25 0.59375q0 0.359375 -0.25 0.609375q-0.234375 0.234375 -0.59375 0.234375zm5.2345886 0.140625q-0.640625 0 -1.265625 -0.265625q-0.625 -0.28125 -1.109375 -0.828125q-0.484375 -0.5625 -0.6875 -1.375l1.0 -0.40625q0.21875 0.8125 0.75 1.3125q0.53125 0.484375 1.28125 0.484375q0.890625 0 1.453125 -0.546875q0.578125 -0.546875 0.578125 -1.4375q0 -0.859375 -0.5625 -1.421875q-0.5625 -0.578125 -1.4375 -0.578125q-0.484375 0 -0.921875 0.234375q-0.421875 0.21875 -0.6875 0.59375l-1.140625 -0.5l0.59375 -4.59375l4.703125 0l0 1.078125l-3.78125 0l-0.359375 2.75l0.0625 0.015625q0.703125 -0.59375 1.734375 -0.59375q0.78125 0 1.453125 0.390625q0.671875 0.375 1.0625 1.078125q0.40625 0.6875 0.40625 1.53125q0 0.859375 -0.40625 1.5625q-0.40625 0.703125 -1.125 1.109375q-0.703125 0.40625 -1.59375 0.40625zm3.847458 -0.21875l0 0zm6.3108673 0.21875q-1.09375 0 -1.828125 -0.515625q-0.734375 -0.515625 -1.046875 -1.3125l1.015625 -0.453125q0.25 0.609375 0.75 0.953125q0.5 0.328125 1.109375 0.328125q0.640625 0 1.09375 -0.265625q0.453125 -0.265625 0.453125 -0.734375q0 -0.4375 -0.375 -0.6875q-0.359375 -0.265625 -1.125 -0.453125l-0.828125 -0.203125q-0.8125 -0.203125 -1.328125 -0.6875q-0.515625 -0.484375 -0.515625 -1.234375q0 -0.59375 0.34375 -1.03125q0.359375 -0.453125 0.9375 -0.6875q0.59375 -0.25 1.265625 -0.25q0.890625 0 1.59375 0.390625q0.703125 0.390625 1.0 1.078125l-0.984375 0.453125q-0.453125 -0.90625 -1.625 -0.90625q-0.546875 0 -0.96875 0.265625q-0.421875 0.25 -0.421875 0.65625q0 0.375 0.28125 0.609375q0.296875 0.234375 0.890625 0.375l0.984375 0.25q1.0 0.265625 1.5 0.765625q0.515625 0.5 0.515625 1.21875q0 0.625 -0.359375 1.09375q-0.359375 0.46875 -0.984375 0.734375q-0.609375 0.25 -1.34375 0.25zm7.0114746 0q-0.96875 0 -1.75 -0.46875q-0.765625 -0.46875 -1.203125 -1.28125q-0.421875 -0.828125 -0.421875 -1.859375q0 -0.96875 0.40625 -1.796875q0.40625 -0.84375 1.15625 -1.328125q0.75 -0.5 1.71875 -0.5q1.0 0 1.734375 0.453125q0.734375 0.4375 1.125 1.234375q0.40625 0.78125 0.40625 1.796875q0 0.15625 -0.03125 0.34375l-5.390625 0q0.046875 0.78125 0.375 1.3125q0.328125 0.53125 0.84375 0.796875q0.515625 0.265625 1.078125 0.265625q1.328125 0 2.015625 -1.234375l0.953125 0.46875q-0.421875 0.8125 -1.1875 1.3125q-0.75 0.484375 -1.828125 0.484375zm1.96875 -4.34375q-0.03125 -0.421875 -0.25 -0.84375q-0.203125 -0.421875 -0.65625 -0.71875q-0.453125 -0.296875 -1.15625 -0.296875q-0.796875 0 -1.359375 0.515625q-0.546875 0.515625 -0.734375 1.34375l4.15625 0zm5.6641235 4.34375q-0.984375 0 -1.78125 -0.46875q-0.78125 -0.484375 -1.21875 -1.296875q-0.4375 -0.828125 -0.4375 -1.859375q0 -1.015625 0.4375 -1.84375q0.4375 -0.828125 1.21875 -1.296875q0.796875 -0.46875 1.78125 -0.46875q1.109375 0 1.859375 0.515625q0.75 0.515625 1.0625 1.375l-1.015625 0.421875q-0.25 -0.625 -0.75 -0.953125q-0.5 -0.328125 -1.21875 -0.328125q-0.59375 0 -1.125 0.328125q-0.515625 0.328125 -0.828125 0.921875q-0.3125 0.578125 -0.3125 1.328125q0 0.765625 0.3125 1.359375q0.3125 0.578125 0.828125 0.90625q0.53125 0.328125 1.125 0.328125q0.71875 0 1.234375 -0.328125q0.53125 -0.34375 0.78125 -0.953125l1.015625 0.421875q-0.34375 0.84375 -1.109375 1.375q-0.765625 0.515625 -1.859375 0.515625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m143.99672 240.26237l0 -22.362213" fill-rule="evenodd"/><path stroke="#434343" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m143.99672 240.26236l0 -18.57219" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="1.0" stroke-linecap="butt" d="m143.99672 218.40016c0.9085083 0 1.6450043 0.736496 1.6450043 1.6450043c0 0.9085083 -0.736496 1.644989 -1.6450043 1.644989c-0.9085083 0 -1.6450043 -0.7364807 -1.6450043 -1.644989c0 -0.9085083 0.736496 -1.6450043 1.6450043 -1.6450043z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 134.4l288.0 0l0 28.787415l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m92.93016 142.35432l1.578125 0l0 11.84375l5.84375 0l0 1.515625l-7.421875 0l0 -13.359375zm12.214783 13.65625q-1.046875 0 -1.875 -0.40625q-0.8125 -0.40625 -1.265625 -1.125q-0.4375 -0.71875 -0.4375 -1.640625q0 -1.515625 1.125 -2.359375q1.140625 -0.84375 2.875 -0.84375q0.859375 0 1.59375 0.1875q0.75 0.1875 1.140625 0.421875l0 -0.578125q0 -1.0625 -0.75 -1.703125q-0.75 -0.640625 -1.890625 -0.640625q-0.78125 0 -1.46875 0.34375q-0.671875 0.34375 -1.0625 0.953125l-1.203125 -0.890625q0.5625 -0.859375 1.546875 -1.34375q1.0 -0.484375 2.1875 -0.484375q1.9375 0 3.03125 1.015625q1.109375 1.015625 1.109375 2.765625l0 6.03125l-1.5 0l0 -1.359375l-0.078125 0q-0.40625 0.6875 -1.234375 1.171875q-0.8125 0.484375 -1.84375 0.484375zm0.140625 -1.390625q0.8125 0 1.5 -0.40625q0.6875 -0.421875 1.09375 -1.109375q0.421875 -0.6875 0.421875 -1.515625q-0.453125 -0.296875 -1.109375 -0.484375q-0.65625 -0.1875 -1.375 -0.1875q-1.3125 0 -1.984375 0.546875q-0.65625 0.53125 -0.65625 1.390625q0 0.78125 0.59375 1.28125q0.609375 0.484375 1.515625 0.484375zm6.7189636 -8.421875l1.515625 0l0 1.53125l0.078125 0q0.28125 -0.78125 1.078125 -1.296875q0.796875 -0.515625 1.671875 -0.515625q0.65625 0 1.125 0.1875l0 1.71875q-0.59375 -0.296875 -1.34375 -0.296875q-0.6875 0 -1.265625 0.390625q-0.578125 0.390625 -0.921875 1.0625q-0.34375 0.65625 -0.34375 1.421875l0 5.3125l-1.59375 0l0 -9.515625zm10.716934 13.84375q-1.6875 0 -2.78125 -0.78125q-1.078125 -0.78125 -1.453125 -1.890625l1.453125 -0.609375q0.296875 0.8125 1.03125 1.328125q0.734375 0.515625 1.75 0.515625q1.46875 0 2.28125 -0.859375q0.8125 -0.859375 0.8125 -2.421875l0 -1.0625l-0.078125 0q-0.46875 0.71875 -1.3125 1.1875q-0.84375 0.453125 -1.9375 0.453125q-1.21875 0 -2.25 -0.625q-1.015625 -0.640625 -1.609375 -1.78125q-0.59375 -1.140625 -0.59375 -2.59375q0 -1.4375 0.59375 -2.578125q0.59375 -1.15625 1.609375 -1.78125q1.03125 -0.640625 2.25 -0.640625q1.09375 0 1.9375 0.453125q0.84375 0.453125 1.3125 1.203125l0.078125 0l0 -1.359375l1.515625 0l0 9.140625q0 2.296875 -1.28125 3.5q-1.265625 1.203125 -3.328125 1.203125zm0 -5.578125q0.859375 0 1.546875 -0.421875q0.703125 -0.4375 1.125 -1.234375q0.421875 -0.8125 0.421875 -1.90625q0 -1.125 -0.421875 -1.921875q-0.421875 -0.796875 -1.125 -1.21875q-0.6875 -0.421875 -1.546875 -0.421875q-0.859375 0 -1.578125 0.4375q-0.703125 0.421875 -1.125 1.234375q-0.421875 0.796875 -0.421875 1.890625q0 1.09375 0.421875 1.90625q0.421875 0.8125 1.125 1.234375q0.71875 0.421875 1.578125 0.421875zm11.091324 1.546875q-1.359375 0 -2.4375 -0.640625q-1.078125 -0.65625 -1.6875 -1.796875q-0.609375 -1.15625 -0.609375 -2.59375q0 -1.359375 0.5625 -2.53125q0.578125 -1.171875 1.625 -1.859375q1.0625 -0.6875 2.421875 -0.6875q1.390625 0 2.421875 0.625q1.03125 0.625 1.578125 1.734375q0.546875 1.09375 0.546875 2.515625q0 0.21875 -0.03125 0.484375l-7.546875 0q0.0625 1.078125 0.53125 1.828125q0.46875 0.734375 1.1875 1.109375q0.71875 0.375 1.5 0.375q1.859375 0 2.8125 -1.71875l1.34375 0.65625q-0.59375 1.140625 -1.65625 1.828125q-1.0625 0.671875 -2.5625 0.671875zm2.75 -6.0625q-0.046875 -0.59375 -0.34375 -1.1875q-0.296875 -0.609375 -0.9375 -1.015625q-0.625 -0.40625 -1.59375 -0.40625q-1.125 0 -1.90625 0.71875q-0.78125 0.71875 -1.03125 1.890625l5.8125 0zm6.9405518 6.0625q-1.53125 0 -2.5625 -0.71875q-1.015625 -0.71875 -1.453125 -1.828125l1.421875 -0.640625q0.34375 0.859375 1.046875 1.328125q0.703125 0.46875 1.546875 0.46875q0.890625 0 1.515625 -0.359375q0.640625 -0.375 0.640625 -1.046875q0 -0.59375 -0.5 -0.953125q-0.5 -0.375 -1.578125 -0.625l-1.15625 -0.3125q-1.140625 -0.28125 -1.875 -0.9375q-0.71875 -0.671875 -0.71875 -1.75q0 -0.8125 0.484375 -1.4375q0.5 -0.625 1.3125 -0.953125q0.828125 -0.34375 1.78125 -0.34375q1.25 0 2.21875 0.546875q0.984375 0.53125 1.390625 1.5l-1.375 0.640625q-0.640625 -1.265625 -2.25 -1.265625q-0.796875 0 -1.390625 0.359375q-0.578125 0.359375 -0.578125 0.921875q0 0.53125 0.40625 0.859375q0.421875 0.3125 1.234375 0.515625l1.390625 0.359375q1.390625 0.359375 2.09375 1.0625q0.71875 0.6875 0.71875 1.703125q0 0.875 -0.515625 1.546875q-0.5 0.65625 -1.359375 1.015625q-0.84375 0.34375 -1.890625 0.34375zm9.059189 -0.140625q-0.578125 0 -1.078125 -0.1875q-0.484375 -0.1875 -0.828125 -0.515625q-0.734375 -0.703125 -0.734375 -1.953125l0 -5.578125l-1.671875 0l0 -1.4375l1.671875 0l0 -2.6875l1.578125 0l0 2.6875l2.328125 0l0 1.4375l-2.328125 0l0 5.1875q0 0.78125 0.296875 1.15625q0.359375 0.40625 1.03125 0.40625q0.578125 0 1.046875 -0.3125l0 1.546875q-0.28125 0.125 -0.578125 0.1875q-0.28125 0.0625 -0.734375 0.0625zm2.000061 -0.15625l0 0zm11.720535 0.296875q-1.9375 0 -3.53125 -0.90625q-1.578125 -0.921875 -2.484375 -2.515625q-0.90625 -1.59375 -0.90625 -3.546875q0 -1.96875 0.90625 -3.5625q0.90625 -1.59375 2.484375 -2.5q1.59375 -0.921875 3.53125 -0.921875q1.484375 0 2.71875 0.5625q1.25 0.5625 2.171875 1.625l-1.140625 1.09375q-0.765625 -0.90625 -1.671875 -1.328125q-0.90625 -0.4375 -2.078125 -0.4375q-1.453125 0 -2.671875 0.6875q-1.21875 0.671875 -1.9375 1.921875q-0.71875 1.234375 -0.71875 2.859375q0 1.609375 0.71875 2.859375q0.71875 1.234375 1.9375 1.921875q1.21875 0.671875 2.671875 0.671875q2.421875 0 4.125 -1.984375l1.15625 1.109375q-0.921875 1.109375 -2.296875 1.75q-1.359375 0.640625 -2.984375 0.640625zm11.247833 0q-1.40625 0 -2.5312653 -0.671875q-1.109375 -0.671875 -1.734375 -1.828125q-0.625 -1.15625 -0.625 -2.546875q0 -1.40625 0.625 -2.5625q0.625 -1.15625 1.734375 -1.828125q1.1250153 -0.671875 2.5312653 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.671875 1.75 1.828125q0.625 1.15625 0.625 2.5625q0 1.390625 -0.625 2.546875q-0.625 1.15625 -1.75 1.828125q-1.125 0.671875 -2.515625 0.671875zm0 -1.4375q0.875 0 1.625 -0.4375q0.765625 -0.4375 1.21875 -1.25q0.453125 -0.828125 0.453125 -1.921875q0 -1.109375 -0.453125 -1.921875q-0.453125 -0.828125 -1.21875 -1.265625q-0.75 -0.4375 -1.625 -0.4375q-0.875 0 -1.6406403 0.4375q-0.765625 0.4375 -1.234375 1.265625q-0.453125 0.8125 -0.453125 1.921875q0 1.09375 0.453125 1.921875q0.46875 0.8125 1.234375 1.25q0.76564026 0.4375 1.6406403 0.4375zm6.5418396 -8.375l1.515625 0l0 1.40625l0.078125 0q0.390625 -0.71875 1.25 -1.203125q0.859375 -0.5 1.828125 -0.5q1.71875 0 2.609375 1.0q0.90625 1.0 0.90625 2.71875l0 6.09375l-1.578125 0l0 -5.859375q0 -1.328125 -0.640625 -1.921875q-0.625 -0.59375 -1.734375 -0.59375q-0.765625 0 -1.375 0.4375q-0.59375 0.421875 -0.9375 1.125q-0.328125 0.6875 -0.328125 1.453125l0 5.359375l-1.59375 0l0 -9.515625zm13.655731 9.671875q-0.578125 0 -1.078125 -0.1875q-0.484375 -0.1875 -0.828125 -0.515625q-0.734375 -0.703125 -0.734375 -1.953125l0 -5.578125l-1.671875 0l0 -1.4375l1.671875 0l0 -2.6875l1.578125 0l0 2.6875l2.328125 0l0 1.4375l-2.328125 0l0 5.1875q0 0.78125 0.296875 1.15625q0.359375 0.40625 1.03125 0.40625q0.578125 0 1.046875 -0.3125l0 1.546875q-0.28125 0.125 -0.578125 0.1875q-0.28125 0.0625 -0.734375 0.0625zm6.9956665 0.140625q-1.359375 0 -2.4375 -0.640625q-1.078125 -0.65625 -1.6875 -1.796875q-0.609375 -1.15625 -0.609375 -2.59375q0 -1.359375 0.5625 -2.53125q0.578125 -1.171875 1.625 -1.859375q1.0625 -0.6875 2.421875 -0.6875q1.390625 0 2.421875 0.625q1.03125 0.625 1.578125 1.734375q0.546875 1.09375 0.546875 2.515625q0 0.21875 -0.03125 0.484375l-7.546875 0q0.0625 1.078125 0.53125 1.828125q0.46875 0.734375 1.1875 1.109375q0.71875 0.375 1.5 0.375q1.859375 0 2.8125 -1.71875l1.34375 0.65625q-0.59375 1.140625 -1.65625 1.828125q-1.0625 0.671875 -2.5625 0.671875zm2.75 -6.0625q-0.046875 -0.59375 -0.34375 -1.1875q-0.296875 -0.609375 -0.9375 -1.015625q-0.625 -0.40625 -1.59375 -0.40625q-1.125 0 -1.90625 0.71875q-0.78125 0.71875 -1.03125 1.890625l5.8125 0zm3.5190735 -3.75l1.515625 0l0 1.40625l0.078125 0q0.390625 -0.71875 1.25 -1.203125q0.859375 -0.5 1.828125 -0.5q1.71875 0 2.609375 1.0q0.90625 1.0 0.90625 2.71875l0 6.09375l-1.578125 0l0 -5.859375q0 -1.328125 -0.640625 -1.921875q-0.625 -0.59375 -1.734375 -0.59375q-0.765625 0 -1.375 0.4375q-0.59375 0.421875 -0.9375 1.125q-0.328125 0.6875 -0.328125 1.453125l0 5.359375l-1.59375 0l0 -9.515625zm13.655762 9.671875q-0.578125 0 -1.078125 -0.1875q-0.484375 -0.1875 -0.828125 -0.515625q-0.734375 -0.703125 -0.734375 -1.953125l0 -5.578125l-1.671875 0l0 -1.4375l1.671875 0l0 -2.6875l1.578125 0l0 2.6875l4.328125 0l0 -1.03125q0 -0.890625 0.40625 -1.5625q0.40625 -0.671875 1.09375 -1.03125q0.703125 -0.359375 1.546875 -0.359375q0.765625 0 1.390625 0.21875l0 1.546875q-0.375 -0.15625 -0.671875 -0.21875q-0.28125 -0.078125 -0.6875 -0.078125q-0.609375 0 -1.0625 0.4375q-0.453125 0.4375 -0.453125 1.21875l0 0.859375l2.453125 0l0 1.4375l-2.453125 0l0 8.078125l-1.5625 0l0 -8.078125l-4.328125 0l0 5.1875q0 0.78125 0.296875 1.15625q0.359375 0.40625 1.03125 0.40625q0.578125 0 1.046875 -0.3125l0 1.546875q-0.28125 0.125 -0.578125 0.1875q-0.28125 0.0625 -0.734375 0.0625zm12.501678 0.140625q-1.71875 0 -2.625 -1.0q-0.90625 -1.015625 -0.90625 -2.828125l0 -5.984375l1.59375 0l0 5.75q0 1.359375 0.609375 2.0q0.625 0.625 1.671875 0.625q0.796875 0 1.421875 -0.421875q0.625 -0.4375 0.96875 -1.125q0.34375 -0.6875 0.34375 -1.453125l0 -5.375l1.59375 0l0 9.515625l-1.515625 0l0 -1.375l-0.078125 0q-0.390625 0.703125 -1.25 1.1875q-0.859375 0.484375 -1.828125 0.484375zm7.013031 -13.65625l1.59375 0l0 13.359375l-1.59375 0l0 -13.359375zm2.7645874 13.359375l0 0zm5.828247 -13.359375l4.4843597 0q1.125 0 2.078125 0.515625q0.953125 0.5 1.515625 1.40625q0.578125 0.890625 0.578125 2.03125q0 1.140625 -0.578125 2.046875q-0.5625 0.90625 -1.515625 1.40625q-0.953125 0.5 -2.078125 0.5l-2.9062347 0l0 5.453125l-1.578125 0l0 -13.359375zm4.5312347 6.40625q0.734375 0 1.296875 -0.359375q0.578125 -0.359375 0.890625 -0.90625q0.328125 -0.5625 0.328125 -1.1875q0 -0.609375 -0.328125 -1.171875q-0.3125 -0.5625 -0.890625 -0.90625q-0.5625 -0.359375 -1.296875 -0.359375l-2.9531097 0l0 4.890625l2.9531097 0zm8.56015 7.25q-1.046875 0 -1.875 -0.40625q-0.8125 -0.40625 -1.265625 -1.125q-0.4375 -0.71875 -0.4375 -1.640625q0 -1.515625 1.125 -2.359375q1.140625 -0.84375 2.875 -0.84375q0.859375 0 1.59375 0.1875q0.75 0.1875 1.140625 0.421875l0 -0.578125q0 -1.0625 -0.75 -1.703125q-0.75 -0.640625 -1.890625 -0.640625q-0.78125 0 -1.46875 0.34375q-0.671875 0.34375 -1.0625 0.953125l-1.203125 -0.890625q0.5625 -0.859375 1.546875 -1.34375q1.0 -0.484375 2.1875 -0.484375q1.9375 0 3.03125 1.015625q1.109375 1.015625 1.109375 2.765625l0 6.03125l-1.5 0l0 -1.359375l-0.078125 0q-0.40625 0.6875 -1.234375 1.171875q-0.8125 0.484375 -1.84375 0.484375zm0.140625 -1.390625q0.8125 0 1.5 -0.40625q0.6875 -0.421875 1.09375 -1.109375q0.421875 -0.6875 0.421875 -1.515625q-0.453125 -0.296875 -1.109375 -0.484375q-0.65625 -0.1875 -1.375 -0.1875q-1.3125 0 -1.984375 0.546875q-0.65625 0.53125 -0.65625 1.390625q0 0.78125 0.59375 1.28125q0.609375 0.484375 1.515625 0.484375zm7.6564636 -10.171875q-0.46875 0 -0.8125 -0.328125q-0.328125 -0.34375 -0.328125 -0.8125q0 -0.484375 0.328125 -0.8125q0.34375 -0.328125 0.8125 -0.328125q0.484375 0 0.8125 0.328125q0.328125 0.328125 0.328125 0.8125q0 0.46875 -0.328125 0.8125q-0.328125 0.328125 -0.8125 0.328125zm-0.78125 1.75l1.578125 0l0 9.515625l-1.578125 0l0 -9.515625zm4.0600586 0l1.515625 0l0 1.40625l0.078125 0q0.390625 -0.71875 1.25 -1.203125q0.859375 -0.5 1.828125 -0.5q1.71875 0 2.609375 1.0q0.90625 1.0 0.90625 2.71875l0 6.09375l-1.578125 0l0 -5.859375q0 -1.328125 -0.640625 -1.921875q-0.625 -0.59375 -1.734375 -0.59375q-0.765625 0 -1.375 0.4375q-0.59375 0.421875 -0.9375 1.125q-0.328125 0.6875 -0.328125 1.453125l0 5.359375l-1.59375 0l0 -9.515625zm13.655762 9.671875q-0.578125 0 -1.078125 -0.1875q-0.484375 -0.1875 -0.828125 -0.515625q-0.734375 -0.703125 -0.734375 -1.953125l0 -5.578125l-1.671875 0l0 -1.4375l1.671875 0l0 -2.6875l1.578125 0l0 2.6875l2.328125 0l0 1.4375l-2.328125 0l0 5.1875q0 0.78125 0.296875 1.15625q0.359375 0.40625 1.03125 0.40625q0.578125 0 1.046875 -0.3125l0 1.546875q-0.28125 0.125 -0.578125 0.1875q-0.28125 0.0625 -0.734375 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.006233 24.0l288.0 0l0 28.787403l-288.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m163.54532 45.4737q-0.734375 -1.046875 -1.234375 -2.5q-0.484375 -1.453125 -0.484375 -3.171875q0 -2.234375 1.0625 -4.296875q1.078125 -2.0625 2.875 -3.46875l0.703125 0.671875q-1.640625 1.515625 -2.515625 3.3125q-0.875 1.78125 -0.875 4.015625q0 2.59375 1.359375 4.78125l-0.890625 0.65625zm4.4683685 -12.5l1.234375 0l-1.640625 9.3125l4.59375 0l-0.21875 1.1875l-5.828125 0l1.859375 -10.5zm8.800659 10.734375q-0.984375 0 -1.765625 -0.46875q-0.765625 -0.46875 -1.1875 -1.28125q-0.421875 -0.8125 -0.421875 -1.8125q0 -1.21875 0.53125 -2.203125q0.53125 -1.0 1.515625 -1.578125q1.0 -0.59375 2.28125 -0.59375q0.984375 0 1.75 0.46875q0.78125 0.46875 1.1875 1.28125q0.421875 0.8125 0.421875 1.8125q0 1.203125 -0.53125 2.21875q-0.53125 1.0 -1.53125 1.578125q-0.984375 0.578125 -2.25 0.578125zm0.140625 -1.125q0.84375 0 1.515625 -0.4375q0.671875 -0.4375 1.03125 -1.15625q0.375 -0.71875 0.375 -1.59375q0 -1.078125 -0.625 -1.78125q-0.625 -0.71875 -1.640625 -0.71875q-0.84375 0 -1.515625 0.4375q-0.671875 0.421875 -1.046875 1.15625q-0.359375 0.71875 -0.359375 1.578125q0 1.109375 0.625 1.8125q0.625 0.703125 1.640625 0.703125zm7.4392548 1.125q-0.65625 0 -1.21875 -0.296875q-0.5625 -0.296875 -0.890625 -0.8125q-0.328125 -0.53125 -0.328125 -1.171875q0 -1.25 0.90625 -1.984375q0.921875 -0.75 2.515625 -0.75q0.59375 0 1.15625 0.140625q0.5625 0.140625 1.0 0.375l0.09375 -0.4375q0.046875 -0.25 0.046875 -0.421875q0 -0.671875 -0.53125 -1.0625q-0.515625 -0.40625 -1.3125 -0.40625q-1.21875 0 -2.0 1.0l-0.96875 -0.6875q0.53125 -0.6875 1.328125 -1.046875q0.8125 -0.375 1.78125 -0.375q1.34375 0 2.109375 0.65625q0.765625 0.640625 0.765625 1.734375q0 0.3125 -0.0625 0.75l-0.828125 4.5625l-1.1875 0l0.1875 -1.0625l-0.046875 0q-0.40625 0.59375 -1.046875 0.953125q-0.640625 0.34375 -1.46875 0.34375zm0.28125 -1.09375q1.015625 0 1.765625 -0.671875q0.75 -0.671875 0.921875 -1.703125q-0.453125 -0.265625 -0.90625 -0.390625q-0.453125 -0.140625 -1.140625 -0.140625q-0.9375 0 -1.515625 0.4375q-0.578125 0.421875 -0.578125 1.1875q0 0.59375 0.421875 0.9375q0.421875 0.34375 1.03125 0.34375zm8.1310425 1.09375q-0.859375 0 -1.5625 -0.40625q-0.6875 -0.421875 -1.09375 -1.1875q-0.390625 -0.78125 -0.390625 -1.796875q0 -1.234375 0.5625 -2.28125q0.5625 -1.046875 1.546875 -1.65625q0.984375 -0.609375 2.21875 -0.609375q0.828125 0 1.453125 0.390625q0.625 0.390625 0.921875 0.96875l0.0625 0l0.109375 -1.046875l0.5625 -3.109375l1.234375 0l-1.875 10.5l-1.171875 0l0.203125 -1.09375l-0.0625 0q-0.421875 0.609375 -1.109375 0.96875q-0.671875 0.359375 -1.609375 0.359375zm0.34375 -1.125q0.8125 0 1.5 -0.453125q0.6875 -0.453125 1.0625 -1.21875q0.390625 -0.78125 0.390625 -1.703125q0 -1.046875 -0.59375 -1.671875q-0.59375 -0.640625 -1.515625 -0.640625q-0.84375 0 -1.515625 0.4375q-0.671875 0.421875 -1.0625 1.1875q-0.375 0.765625 -0.375 1.6875q0 1.078125 0.59375 1.734375q0.59375 0.640625 1.515625 0.640625zm7.7156525 -7.96875q-0.359375 0 -0.625 -0.25q-0.265625 -0.265625 -0.265625 -0.640625q0 -0.375 0.265625 -0.625q0.265625 -0.265625 0.625 -0.265625q0.390625 0 0.640625 0.265625q0.265625 0.25 0.265625 0.625q0 0.375 -0.265625 0.640625q-0.25 0.25 -0.640625 0.25zm-1.03125 1.390625l1.25 0l-1.328125 7.46875l-1.234375 0l1.3125 -7.46875zm4.265457 1.09375q0.390625 -0.59375 1.046875 -0.953125q0.671875 -0.375 1.515625 -0.375q1.109375 0 1.75 0.609375q0.640625 0.59375 0.640625 1.59375q0 0.59375 -0.09375 1.046875l-0.78125 4.453125l-1.25 0l0.796875 -4.484375q0.078125 -0.5625 0.078125 -0.734375q0 -0.640625 -0.4375 -1.0q-0.421875 -0.359375 -1.140625 -0.359375q-0.90625 0 -1.609375 0.671875q-0.703125 0.671875 -0.890625 1.703125l-0.734375 4.203125l-1.25 0l1.3125 -7.46875l1.171875 0l-0.1875 1.09375l0.0625 0zm8.5394745 9.78125q-0.84375 0 -1.484375 -0.3125q-0.640625 -0.3125 -1.03125 -0.796875q-0.375 -0.46875 -0.46875 -1.0l1.203125 -0.46875q0.15625 0.640625 0.65625 1.03125q0.5 0.40625 1.296875 0.40625q1.171875 0 1.90625 -0.6875q0.75 -0.6875 0.953125 -1.890625l0.15625 -0.8125l-0.0625 0q-0.421875 0.609375 -1.078125 0.9375q-0.640625 0.328125 -1.578125 0.328125q-0.828125 0 -1.515625 -0.40625q-0.6875 -0.421875 -1.09375 -1.1875q-0.390625 -0.78125 -0.390625 -1.75q0 -1.1875 0.515625 -2.21875q0.53125 -1.046875 1.484375 -1.65625q0.96875 -0.625 2.21875 -0.625q0.84375 0 1.46875 0.375q0.640625 0.359375 0.90625 0.921875l0.0625 0l0.1875 -1.0625l1.1875 0l-1.28125 7.234375q-0.3125 1.84375 -1.4375 2.734375q-1.109375 0.90625 -2.78125 0.90625zm0.734375 -4.390625q0.84375 0 1.53125 -0.453125q0.6875 -0.453125 1.0625 -1.203125q0.375 -0.765625 0.375 -1.625q0 -1.046875 -0.578125 -1.671875q-0.5625 -0.640625 -1.453125 -0.640625q-0.875 0 -1.546875 0.4375q-0.671875 0.4375 -1.046875 1.203125q-0.359375 0.75 -0.359375 1.671875q0 1.0625 0.5625 1.671875q0.578125 0.609375 1.453125 0.609375zm4.437317 2.3125q1.640625 -1.515625 2.515625 -3.296875q0.875 -1.796875 0.875 -4.03125q0 -2.59375 -1.359375 -4.78125l0.890625 -0.65625q0.734375 1.046875 1.21875 2.5q0.5 1.453125 0.5 3.15625q0 2.25 -1.078125 4.3125q-1.0625 2.0625 -2.859375 3.46875l-0.703125 -0.671875z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m239.99367 240.0l0 -22.11023" fill-rule="evenodd"/><path stroke="#434343" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m239.99367 240.0l0 -18.320236" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="1.0" stroke-linecap="butt" d="m239.99367 218.38977c0.9085083 0 1.644989 0.7364807 1.644989 1.644989c0 0.9085083 -0.7364807 1.6450043 -1.644989 1.6450043c-0.9085083 0 -1.6450043 -0.736496 -1.6450043 -1.6450043c0 -0.9085083 0.736496 -1.644989 1.6450043 -1.644989z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/lcp_8x2.svg b/src/site/content/en/vitals/lcp_8x2.svg
deleted file mode 100644
index 39a12128d03..00000000000
--- a/src/site/content/en/vitals/lcp_8x2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 768.0 192.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l768.0 0l0 192.0l-768.0 0l0 -192.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l768.0 0l0 192.0l-768.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m28.8 19.2l259.21262 0l0 115.2126l-259.21262 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m75.273346 42.731922l12.953125 0l0 56.45312l29.09375 0l0 12.28125l-42.046875 0l0 -68.734375zm84.00285 70.265625q-9.984375 0 -18.25 -4.75q-8.25 -4.75 -13.0 -12.953125q-4.75 -8.21875 -4.75 -18.203125q0 -9.984375 4.75 -18.187496q4.75 -8.203125 13.0 -12.953125q8.265625 -4.75 18.25 -4.75q15.546875 0 25.71875 11.21875l-9.109375 8.84375q-6.625 -7.78125 -16.515625 -7.78125q-6.4375 0 -11.71875 2.9375q-5.28125 2.921875 -8.3125 8.296871q-3.015625 5.375 -3.015625 12.375q0 7.015625 3.015625 12.390625q3.03125 5.375 8.3125 8.3125q5.28125 2.921875 11.71875 2.921875q10.84375 0 18.140625 -9.03125l9.21875 8.734375q-5.09375 6.15625 -12.0625 9.375q-6.953125 3.203125 -15.390625 3.203125zm39.453094 -70.265625l24.1875 0q6.53125 0 11.90625 2.734375q5.375 2.734375 8.4375 7.6875q3.078125 4.9375 3.078125 11.265621q0 6.34375 -3.078125 11.34375q-3.0625 4.984375 -8.4375 7.71875q-5.375 2.734375 -11.90625 2.734375l-11.234375 0l0 25.25l-12.953125 0l0 -68.734375zm24.578125 31.203121q4.796875 0 7.53125 -2.78125q2.734375 -2.796875 2.734375 -6.734375q0 -3.9218712 -2.734375 -6.656246q-2.734375 -2.75 -7.53125 -2.75l-11.625 0l0 18.921871l11.625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m360.0 57.6l115.212585 0l0 43.2126l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m401.9218 84.22505q-1.359375 0 -2.5 -0.65625q-1.140625 -0.65625 -1.828125 -1.796875q-0.671875 -1.140625 -0.671875 -2.53125q0 -1.40625 0.671875 -2.546875q0.6875 -1.140625 1.828125 -1.78125q1.140625 -0.65625 2.5 -0.65625q1.09375 0 2.015625 0.390625q0.921875 0.375 1.5625 1.0625l-1.015625 1.015625q-0.96875 -1.09375 -2.5625 -1.09375q-0.921875 0 -1.75 0.453125q-0.8125 0.4375 -1.296875 1.265625q-0.46875 0.828125 -0.46875 1.890625q0 1.0625 0.484375 1.890625q0.484375 0.8125 1.296875 1.265625q0.8125 0.4375 1.75 0.4375q1.515625 0 2.453125 -0.953125q0.3125 -0.28125 0.515625 -0.734375q0.203125 -0.453125 0.28125 -1.0l-3.28125 0l0 -1.296875l4.640625 0q0.078125 0.453125 0.078125 0.765625q0 0.90625 -0.28125 1.734375q-0.28125 0.8125 -0.890625 1.4375q-0.640625 0.703125 -1.53125 1.078125q-0.890625 0.359375 -2.0 0.359375zm10.868805 0q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202087 -8.375l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m475.2 57.600365l124.787415 0l0 43.2126l-124.787415 0z" fill-rule="evenodd"/><path fill="#000000" d="m517.5868 66.459785l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm9.662842 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l3.046875 0q1.484375 0 2.578125 0.609375q1.109375 0.59375 1.703125 1.6875q0.59375 1.078125 0.59375 2.484375q0 1.390625 -0.59375 2.484375q-0.59375 1.078125 -1.703125 1.6875q-1.09375 0.59375 -2.578125 0.59375l-3.046875 0l0 -9.546875zm3.015625 8.15625q1.625 0 2.515625 -0.890625q0.90625 -0.90625 0.90625 -2.484375q0 -1.59375 -0.90625 -2.484375q-0.890625 -0.90625 -2.515625 -0.90625l-1.546875 0l0 6.765625l1.546875 0zm9.361877 1.609375q-1.1875 0 -2.140625 -0.6875q-0.953125 -0.703125 -1.3125 -1.953125l1.375 -0.5625q0.21875 0.796875 0.765625 1.3125q0.546875 0.5 1.3125 0.5q0.71875 0 1.21875 -0.375q0.5 -0.375 0.5 -1.03125q0 -0.59375 -0.4375 -0.984375q-0.4375 -0.390625 -1.515625 -0.765625l-0.59375 -0.21875q-0.984375 -0.34375 -1.625 -0.953125q-0.640625 -0.625 -0.640625 -1.65625q0 -0.703125 0.375 -1.296875q0.375 -0.609375 1.0625 -0.953125q0.6875 -0.34375 1.5625 -0.34375q1.234375 0 1.96875 0.609375q0.75 0.59375 1.015625 1.359375l-1.3125 0.5625q-0.140625 -0.484375 -0.5625 -0.828125q-0.421875 -0.34375 -1.109375 -0.34375q-0.640625 0 -1.09375 0.34375q-0.453125 0.34375 -0.453125 0.875q0 0.5 0.40625 0.828125q0.40625 0.3125 1.25 0.609375l0.609375 0.21875q1.234375 0.421875 1.890625 1.109375q0.671875 0.671875 0.671875 1.8125q0 0.921875 -0.46875 1.5625q-0.46875 0.625 -1.21875 0.9375q-0.734375 0.3125 -1.5 0.3125z" fill-rule="nonzero"/><path fill="#000000" d="m491.15063 82.459785l1.46875 0l0 9.546875l-1.46875 0l0 -9.546875zm3.611908 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768707 0l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm4.5910645 -4.453125l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0zm9.286377 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm5.32959 -8.375l1.59375 0l2.15625 6.34375l0.34375 1.078125l0.078125 0l0.359375 -1.078125l2.25 -6.34375l1.59375 0l-3.46875 9.546875l-1.515625 0l-3.390625 -9.546875zm9.647156 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.96875 0l2.796875 7.265625l0.078125 0l2.796875 -7.265625l1.96875 0l0 9.546875l-1.4375 0l0 -5.390625l0.078125 -1.703125l-0.078125 0l-2.78125 7.09375l-1.171875 0l-2.78125 -7.09375l-0.078125 0l0.078125 1.703125l0 5.390625l-1.4375 0l0 -9.546875zm11.768677 0l5.78125 0l0 1.390625l-4.3125 0l0 2.6875l3.890625 0l0 1.390625l-3.890625 0l0 2.6875l4.3125 0l0 1.390625l-5.78125 0l0 -9.546875zm7.623657 0l1.734375 0l4.3125 7.015625l0.078125 0l-0.078125 -1.84375l0 -5.171875l1.453125 0l0 9.546875l-1.515625 0l-4.53125 -7.375l-0.078125 0l0.078125 1.84375l0 5.53125l-1.453125 0l0 -9.546875zm11.615967 1.390625l-2.6875 0l0 -1.390625l6.8125 0l0 1.390625l-2.671875 0l0 8.15625l-1.453125 0l0 -8.15625z" fill-rule="nonzero"/><path fill="#ff4e42" d="m600.025 57.60126l115.212585 0l0 43.212597l-115.212585 0z" fill-rule="evenodd"/><path fill="#000000" d="m639.73035 74.460686l3.28125 0q0.859375 0 1.5625 0.375q0.71875 0.375 1.140625 1.046875q0.421875 0.65625 0.421875 1.5q0 0.84375 -0.421875 1.515625q-0.421875 0.65625 -1.140625 1.03125q-0.703125 0.375 -1.5625 0.375l-1.8125 0l0 3.703125l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.734375 0 1.1875 -0.453125q0.453125 -0.46875 0.453125 -1.078125q0 -0.609375 -0.453125 -1.0625q-0.453125 -0.46875 -1.1875 -0.46875l-1.84375 0l0 3.0625l1.84375 0zm8.939758 5.3125q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm10.955627 1.390625q-1.390625 0 -2.53125 -0.671875q-1.125 -0.671875 -1.78125 -1.8125q-0.640625 -1.140625 -0.640625 -2.5q0 -1.375 0.640625 -2.515625q0.65625 -1.140625 1.78125 -1.796875q1.140625 -0.671875 2.53125 -0.671875q1.390625 0 2.515625 0.671875q1.125 0.65625 1.765625 1.796875q0.640625 1.140625 0.640625 2.515625q0 1.359375 -0.640625 2.5q-0.640625 1.140625 -1.765625 1.8125q-1.125 0.671875 -2.515625 0.671875zm0 -1.390625q0.953125 0 1.75 -0.453125q0.796875 -0.46875 1.25 -1.28125q0.46875 -0.828125 0.46875 -1.859375q0 -1.046875 -0.46875 -1.859375q-0.453125 -0.828125 -1.25 -1.28125q-0.796875 -0.46875 -1.75 -0.46875q-0.96875 0 -1.765625 0.46875q-0.78125 0.453125 -1.25 1.28125q-0.453125 0.8125 -0.453125 1.859375q0 1.03125 0.453125 1.859375q0.46875 0.8125 1.25 1.28125q0.796875 0.453125 1.765625 0.453125zm6.6202393 -8.375l3.34375 0q0.875 0 1.5625 0.375q0.703125 0.375 1.109375 1.046875q0.40625 0.65625 0.40625 1.5q0 0.953125 -0.625 1.703125q-0.609375 0.734375 -1.546875 0.984375l-0.015625 0.078125l2.625 3.78125l0 0.078125l-1.6875 0l-2.546875 -3.75l-1.15625 0l0 3.75l-1.46875 0l0 -9.546875zm3.3125 4.453125q0.6875 0 1.15625 -0.4375q0.484375 -0.4375 0.484375 -1.109375q0 -0.609375 -0.4375 -1.0625q-0.4375 -0.46875 -1.15625 -0.46875l-1.890625 0l0 3.078125l1.84375 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m552.0 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m576.9277 142.9587l-5.578125 0l0 -1.453125l5.421875 -8.03125l2.015625 0l0 7.75l1.5 0l0 1.734375l-1.5 0l0 2.375l-1.859375 0l0 -2.375zm0 -1.734375l0 -4.984375l-0.109375 0l-3.375 4.984375l3.484375 0zm6.4590454 4.21875q-0.546875 0 -0.9375 -0.375q-0.375 -0.390625 -0.375 -0.9375q0 -0.53125 0.375 -0.90625q0.390625 -0.390625 0.9375 -0.390625q0.5625 0 0.921875 0.375q0.375 0.375 0.375 0.921875q0 0.546875 -0.375 0.9375q-0.359375 0.375 -0.921875 0.375zm7.977417 0.171875q-1.453125 0 -2.5625 -0.8125q-1.09375 -0.828125 -1.703125 -2.234375q-0.59375 -1.40625 -0.59375 -3.15625q0 -1.75 0.59375 -3.15625q0.609375 -1.421875 1.703125 -2.234375q1.109375 -0.8125 2.5625 -0.8125q1.453125 0 2.5625 0.8125q1.109375 0.8125 1.703125 2.234375q0.59375 1.40625 0.59375 3.15625q0 1.75 -0.59375 3.15625q-0.59375 1.40625 -1.703125 2.234375q-1.109375 0.8125 -2.5625 0.8125zm0 -1.765625q0.921875 0 1.59375 -0.578125q0.671875 -0.59375 1.03125 -1.59375q0.359375 -1.0 0.359375 -2.265625q0 -1.265625 -0.359375 -2.28125q-0.359375 -1.015625 -1.03125 -1.578125q-0.671875 -0.578125 -1.59375 -0.578125q-0.90625 0 -1.578125 0.578125q-0.65625 0.5625 -1.015625 1.578125q-0.359375 1.015625 -0.359375 2.28125q0 1.265625 0.359375 2.265625q0.359375 1.0 1.015625 1.59375q0.671875 0.578125 1.578125 0.578125zm5.7333984 1.484375l0 0zm8.349915 0.28125q-1.5 0 -2.484375 -0.65625q-0.984375 -0.671875 -1.375 -1.71875l1.671875 -0.734375q0.3125 0.71875 0.890625 1.09375q0.578125 0.359375 1.296875 0.359375q0.75 0 1.25 -0.265625q0.5 -0.265625 0.5 -0.796875q0 -0.484375 -0.421875 -0.765625q-0.421875 -0.296875 -1.328125 -0.5l-1.0625 -0.25q-1.046875 -0.25 -1.75 -0.90625q-0.6875 -0.671875 -0.6875 -1.671875q0 -0.765625 0.453125 -1.34375q0.46875 -0.59375 1.234375 -0.90625q0.78125 -0.328125 1.6875 -0.328125q1.25 0 2.171875 0.484375q0.9375 0.484375 1.359375 1.421875l-1.625 0.71875q-0.53125 -1.046875 -1.890625 -1.046875q-0.65625 0 -1.09375 0.28125q-0.4375 0.265625 -0.4375 0.6875q0 0.78125 1.34375 1.125l1.28125 0.3125q1.3125 0.328125 1.96875 0.984375q0.671875 0.65625 0.671875 1.625q0 0.828125 -0.484375 1.46875q-0.46875 0.625 -1.3125 0.984375q-0.828125 0.34375 -1.828125 0.34375zm9.372559 0q-1.28125 0 -2.3125 -0.609375q-1.03125 -0.609375 -1.609375 -1.671875q-0.578125 -1.0625 -0.578125 -2.40625q0 -1.265625 0.5625 -2.34375q0.5625 -1.078125 1.5625 -1.71875q1.015625 -0.640625 2.28125 -0.640625q1.328125 0 2.296875 0.578125q0.96875 0.578125 1.484375 1.609375q0.515625 1.015625 0.515625 2.3125q0 0.34375 -0.046875 0.59375l-6.828125 0q0.125 1.265625 0.90625 1.953125q0.78125 0.671875 1.828125 0.671875q0.84375 0 1.453125 -0.390625q0.609375 -0.390625 0.96875 -1.03125l1.546875 0.75q-0.609375 1.09375 -1.625 1.71875q-1.0 0.625 -2.40625 0.625zm2.34375 -5.703125q-0.03125 -0.484375 -0.3125 -0.96875q-0.28125 -0.484375 -0.8125 -0.796875q-0.515625 -0.328125 -1.296875 -0.328125q-0.9375 0 -1.59375 0.578125q-0.640625 0.5625 -0.890625 1.515625l4.90625 0zm7.769043 5.703125q-1.328125 0 -2.375 -0.609375q-1.03125 -0.609375 -1.609375 -1.671875q-0.578125 -1.0625 -0.578125 -2.421875q0 -1.34375 0.578125 -2.40625q0.578125 -1.078125 1.609375 -1.671875q1.046875 -0.609375 2.375 -0.609375q1.453125 0 2.453125 0.65625q1.015625 0.640625 1.46875 1.78125l-1.6875 0.6875q-0.625 -1.421875 -2.28125 -1.421875q-0.71875 0 -1.34375 0.375q-0.609375 0.375 -0.96875 1.0625q-0.34375 0.671875 -0.34375 1.546875q0 0.890625 0.34375 1.5625q0.359375 0.671875 0.96875 1.046875q0.625 0.375 1.34375 0.375q0.84375 0 1.4375 -0.375q0.59375 -0.375 0.921875 -1.078125l1.6875 0.71875q-0.53125 1.125 -1.546875 1.796875q-1.015625 0.65625 -2.453125 0.65625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m427.2 124.8l96.0 0l0 28.7874l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m447.9307 143.56807q3.515625 -3.5 4.328125 -4.40625q0.765625 -0.796875 1.046875 -1.296875q0.28125 -0.5 0.28125 -1.171875q0 -0.703125 -0.53125 -1.203125q-0.53125 -0.515625 -1.4375 -0.515625q-0.828125 0 -1.34375 0.484375q-0.5 0.46875 -0.6875 1.109375l-1.6875 -0.703125q0.171875 -0.609375 0.640625 -1.21875q0.484375 -0.609375 1.28125 -1.015625q0.796875 -0.421875 1.84375 -0.421875q1.125 0 1.984375 0.46875q0.875 0.46875 1.34375 1.25q0.484375 0.765625 0.484375 1.703125q0 1.875 -1.890625 3.765625q-0.765625 0.765625 -1.71875 1.71875q-0.96875 0.953125 -1.46875 1.46875l0.015625 0.046875l5.203125 0l0 1.703125l-7.6875 0l0 -1.765625zm10.811981 1.875q-0.546875 0 -0.9375 -0.375q-0.375 -0.390625 -0.375 -0.9375q0 -0.53125 0.375 -0.90625q0.390625 -0.390625 0.9375 -0.390625q0.5625 0 0.921875 0.375q0.375 0.375 0.375 0.921875q0 0.546875 -0.375 0.9375q-0.359375 0.375 -0.921875 0.375zm7.1493225 0.171875q-0.890625 0 -1.734375 -0.359375q-0.84375 -0.359375 -1.46875 -1.078125q-0.625 -0.71875 -0.890625 -1.765625l1.671875 -0.671875q0.25 0.984375 0.859375 1.5625q0.625 0.5625 1.546875 0.5625q0.984375 0 1.625 -0.625q0.65625 -0.640625 0.65625 -1.625q0 -1.0 -0.640625 -1.640625q-0.625 -0.65625 -1.625 -0.65625q-0.578125 0 -1.078125 0.25q-0.484375 0.25 -0.796875 0.6875l-1.84375 -0.8125l0.71875 -5.96875l6.40625 0l0 1.703125l-4.875 0l-0.4375 3.1875l0.09375 0.015625q0.9375 -0.734375 2.171875 -0.734375q1.0 0 1.859375 0.5q0.875 0.5 1.390625 1.40625q0.53125 0.890625 0.53125 2.03125q0 1.15625 -0.546875 2.078125q-0.53125 0.90625 -1.484375 1.4375q-0.9375 0.515625 -2.109375 0.515625zm5.071289 -0.28125l0 0zm8.349915 0.28125q-1.5 0 -2.484375 -0.65625q-0.984375 -0.671875 -1.375 -1.71875l1.671875 -0.734375q0.3125 0.71875 0.890625 1.09375q0.578125 0.359375 1.296875 0.359375q0.75 0 1.25 -0.265625q0.5 -0.265625 0.5 -0.796875q0 -0.484375 -0.421875 -0.765625q-0.421875 -0.296875 -1.328125 -0.5l-1.0625 -0.25q-1.046875 -0.25 -1.75 -0.90625q-0.6875 -0.671875 -0.6875 -1.671875q0 -0.765625 0.453125 -1.34375q0.46875 -0.59375 1.234375 -0.90625q0.78125 -0.328125 1.6875 -0.328125q1.25 0 2.171875 0.484375q0.9375 0.484375 1.359375 1.421875l-1.625 0.71875q-0.53125 -1.046875 -1.890625 -1.046875q-0.65625 0 -1.09375 0.28125q-0.4375 0.265625 -0.4375 0.6875q0 0.78125 1.34375 1.125l1.28125 0.3125q1.3125 0.328125 1.96875 0.984375q0.671875 0.65625 0.671875 1.625q0 0.828125 -0.484375 1.46875q-0.46875 0.625 -1.3125 0.984375q-0.828125 0.34375 -1.828125 0.34375zm9.372589 0q-1.28125 0 -2.3125 -0.609375q-1.03125 -0.609375 -1.609375 -1.671875q-0.578125 -1.0625 -0.578125 -2.40625q0 -1.265625 0.5625 -2.34375q0.5625 -1.078125 1.5625 -1.71875q1.015625 -0.640625 2.28125 -0.640625q1.328125 0 2.296875 0.578125q0.96875 0.578125 1.484375 1.609375q0.515625 1.015625 0.515625 2.3125q0 0.34375 -0.046875 0.59375l-6.828125 0q0.125 1.265625 0.90625 1.953125q0.78125 0.671875 1.828125 0.671875q0.84375 0 1.453125 -0.390625q0.609375 -0.390625 0.96875 -1.03125l1.546875 0.75q-0.609375 1.09375 -1.625 1.71875q-1.0 0.625 -2.40625 0.625zm2.34375 -5.703125q-0.03125 -0.484375 -0.3125 -0.96875q-0.28125 -0.484375 -0.8125 -0.796875q-0.515625 -0.328125 -1.296875 -0.328125q-0.9375 0 -1.59375 0.578125q-0.640625 0.5625 -0.890625 1.515625l4.90625 0zm7.7690125 5.703125q-1.328125 0 -2.375 -0.609375q-1.03125 -0.609375 -1.609375 -1.671875q-0.578125 -1.0625 -0.578125 -2.421875q0 -1.34375 0.578125 -2.40625q0.578125 -1.078125 1.609375 -1.671875q1.046875 -0.609375 2.375 -0.609375q1.453125 0 2.453125 0.65625q1.015625 0.640625 1.46875 1.78125l-1.6875 0.6875q-0.625 -1.421875 -2.28125 -1.421875q-0.71875 0 -1.34375 0.375q-0.609375 0.375 -0.96875 1.0625q-0.34375 0.671875 -0.34375 1.546875q0 0.890625 0.34375 1.5625q0.359375 0.671875 0.96875 1.046875q0.625 0.375 1.34375 0.375q0.84375 0 1.4375 -0.375q0.59375 -0.375 0.921875 -1.078125l1.6875 0.71875q-0.53125 1.125 -1.546875 1.796875q-1.015625 0.65625 -2.453125 0.65625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m474.88504 125.7474l0 -28.7874" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m474.88504 125.747406l0 -21.207397" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m474.88504 97.96001c1.8170166 0 3.2900085 1.4729843 3.2900085 3.290001c0 1.8170166 -1.472992 3.2899933 -3.2900085 3.2899933c-1.8170166 0 -3.289978 -1.4729767 -3.289978 -3.2899933c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m28.8 129.6l268.7874 0l0 38.393692l-268.7874 0z" fill-rule="evenodd"/><path fill="#666666" d="m49.916965 141.01123l1.8125 0l0 13.53125l6.671875 0l0 1.734375l-8.484375 0l0 -15.265625zm13.965439 15.609375q-1.1875 0 -2.125 -0.46875q-0.9375 -0.46875 -1.453125 -1.28125q-0.515625 -0.828125 -0.515625 -1.875q0 -1.734375 1.296875 -2.703125q1.3125 -0.96875 3.2968788 -0.96875q0.984375 0 1.828125 0.21875q0.84375 0.203125 1.28125 0.484375l0 -0.65625q0 -1.21875 -0.859375 -1.953125q-0.84375 -0.734375 -2.140625 -0.734375q-0.9062538 0 -1.6875038 0.390625q-0.765625 0.390625 -1.21875 1.09375l-1.359375 -1.015625q0.640625 -0.984375 1.765625 -1.53125q1.125 -0.5625 2.5000038 -0.5625q2.21875 0 3.46875 1.171875q1.265625 1.15625 1.265625 3.15625l0 6.890625l-1.734375 0l0 -1.5625l-0.078125 0q-0.46875 0.796875 -1.40625 1.359375q-0.9375 0.546875 -2.1250038 0.546875zm0.17187881 -1.609375q0.921875 0 1.703125 -0.46875q0.796875 -0.46875 1.265625 -1.25q0.46875 -0.796875 0.46875 -1.734375q-0.515625 -0.34375 -1.265625 -0.546875q-0.734375 -0.21875 -1.5625 -0.21875q-1.5000038 0 -2.2656288 0.625q-0.75 0.609375 -0.75 1.59375q0 0.890625 0.6875 1.453125q0.6875 0.546875 1.7187538 0.546875zm7.684662 -9.609375l1.734375 0l0 1.75l0.078125 0q0.3125 -0.90625 1.234375 -1.484375q0.921875 -0.59375 1.921875 -0.59375q0.75 0 1.28125 0.21875l0 1.96875q-0.6875 -0.34375 -1.53125 -0.34375q-0.796875 0 -1.453125 0.453125q-0.65625 0.4375 -1.0625 1.203125q-0.390625 0.75 -0.390625 1.625l0 6.078125l-1.8125 0l0 -10.875zm12.245987 15.828125q-1.921875 0 -3.171875 -0.90625q-1.25 -0.890625 -1.671875 -2.15625l1.65625 -0.703125q0.34375 0.953125 1.1875 1.53125q0.84375 0.59375 2.0 0.59375q1.6875 0 2.609375 -0.984375q0.921875 -0.984375 0.921875 -2.78125l0 -1.203125l-0.078125 0q-0.53125 0.828125 -1.5 1.359375q-0.96875 0.515625 -2.21875 0.515625q-1.40625 0 -2.5625 -0.71875q-1.15625 -0.734375 -1.84375 -2.03125q-0.6875 -1.3125 -0.6875 -2.96875q0 -1.640625 0.6875 -2.953125q0.6875 -1.3125 1.84375 -2.03125q1.15625 -0.734375 2.5625 -0.734375q1.25 0 2.21875 0.53125q0.96875 0.515625 1.5 1.359375l0.078125 0l0 -1.546875l1.734375 0l0 10.453125q0 2.625 -1.453125 4.0q-1.453125 1.375 -3.8125 1.375zm0 -6.375q0.984375 0 1.78125 -0.484375q0.796875 -0.5 1.265625 -1.421875q0.484375 -0.921875 0.484375 -2.171875q0 -1.28125 -0.484375 -2.1875q-0.46875 -0.921875 -1.265625 -1.40625q-0.796875 -0.484375 -1.78125 -0.484375q-0.984375 0 -1.796875 0.5q-0.8125 0.484375 -1.296875 1.40625q-0.46875 0.90625 -0.46875 2.171875q0 1.25 0.46875 2.1875q0.484375 0.921875 1.296875 1.40625q0.8125 0.484375 1.796875 0.484375zm12.6887665 1.765625q-1.5625 0 -2.796875 -0.75q-1.234375 -0.75 -1.9375 -2.0625q-0.6875 -1.3125 -0.6875 -2.953125q0 -1.546875 0.640625 -2.875q0.65625 -1.34375 1.859375 -2.125q1.21875 -0.796875 2.765625 -0.796875q1.609375 0 2.78125 0.71875q1.171875 0.703125 1.796875 1.96875q0.625 1.265625 0.625 2.875q0 0.265625 -0.03125 0.5625l-8.625 0q0.0625 1.234375 0.59375 2.09375q0.546875 0.84375 1.359375 1.28125q0.828125 0.421875 1.71875 0.421875q2.125 0 3.21875 -1.96875l1.53125 0.75q-0.671875 1.296875 -1.890625 2.078125q-1.21875 0.78125 -2.921875 0.78125zm3.140625 -6.9375q-0.046875 -0.671875 -0.390625 -1.359375q-0.34375 -0.6875 -1.078125 -1.15625q-0.71875 -0.46875 -1.828125 -0.46875q-1.28125 0 -2.171875 0.828125q-0.890625 0.8125 -1.171875 2.15625l6.640625 0zm7.926956 6.9375q-1.75 0 -2.921875 -0.8125q-1.171875 -0.828125 -1.671875 -2.109375l1.625 -0.734375q0.40625 0.984375 1.203125 1.515625q0.8125 0.53125 1.765625 0.53125q1.015625 0 1.734375 -0.40625q0.734375 -0.421875 0.734375 -1.1875q0 -0.6875 -0.578125 -1.09375q-0.5625 -0.421875 -1.8125 -0.71875l-1.3125 -0.34375q-1.296875 -0.3125 -2.140625 -1.078125q-0.828125 -0.78125 -0.828125 -1.984375q0 -0.9375 0.5625 -1.65625q0.5625 -0.71875 1.5 -1.09375q0.953125 -0.390625 2.03125 -0.390625q1.4375 0 2.546875 0.625q1.125 0.609375 1.59375 1.71875l-1.578125 0.734375q-0.71875 -1.453125 -2.578125 -1.453125q-0.90625 0 -1.578125 0.421875q-0.671875 0.40625 -0.671875 1.046875q0 0.59375 0.46875 0.96875q0.484375 0.375 1.421875 0.609375l1.578125 0.40625q1.59375 0.40625 2.40625 1.203125q0.8125 0.796875 0.8125 1.953125q0 1.0 -0.578125 1.765625q-0.578125 0.75 -1.5625 1.15625q-0.984375 0.40625 -2.171875 0.40625zm10.372192 -0.171875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l2.65625 0l0 1.640625l-2.65625 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625zm2.2748718 -0.171875l0 0zm13.396477 0.34375q-2.21875 0 -4.03125 -1.046875q-1.8124924 -1.046875 -2.8593674 -2.859375q-1.03125 -1.828125 -1.03125 -4.078125q0 -2.234375 1.03125 -4.046875q1.046875 -1.828125 2.8593674 -2.875q1.8125 -1.046875 4.03125 -1.046875q1.703125 0 3.125 0.640625q1.421875 0.640625 2.453125 1.859375l-1.296875 1.25q-0.875 -1.046875 -1.90625 -1.53125q-1.03125 -0.5 -2.375 -0.5q-1.671875 0 -3.0625 0.78125q-1.375 0.78125 -2.203125 2.203125q-0.8124924 1.421875 -0.8124924 3.265625q0 1.859375 0.8124924 3.28125q0.828125 1.421875 2.203125 2.203125q1.390625 0.765625 3.0625 0.765625q2.765625 0 4.71875 -2.28125l1.3125 1.28125q-1.046875 1.265625 -2.609375 2.0q-1.5625 0.734375 -3.421875 0.734375zm12.861908 0q-1.609375 0 -2.890625 -0.765625q-1.265625 -0.765625 -1.984375 -2.09375q-0.71875 -1.328125 -0.71875 -2.921875q0 -1.59375 0.71875 -2.921875q0.71875 -1.328125 1.984375 -2.09375q1.28125 -0.765625 2.890625 -0.765625q1.59375 0 2.875 0.765625q1.28125 0.765625 1.984375 2.09375q0.71875 1.328125 0.71875 2.921875q0 1.59375 -0.71875 2.921875q-0.703125 1.328125 -1.984375 2.09375q-1.28125 0.765625 -2.875 0.765625zm0 -1.640625q1.0 0 1.859375 -0.5q0.859375 -0.5 1.375 -1.4375q0.53125 -0.953125 0.53125 -2.203125q0 -1.265625 -0.53125 -2.203125q-0.515625 -0.9375 -1.375 -1.4375q-0.859375 -0.5 -1.859375 -0.5q-1.0 0 -1.875 0.5q-0.875 0.5 -1.40625 1.4375q-0.515625 0.9375 -0.515625 2.203125q0 1.25 0.515625 2.203125q0.53125 0.9375 1.40625 1.4375q0.875 0.5 1.875 0.5zm7.4826508 -9.578125l1.734375 0l0 1.59375l0.078125 0q0.453125 -0.8125 1.421875 -1.375q0.984375 -0.5625 2.09375 -0.5625q1.96875 0 3.0 1.140625q1.03125 1.140625 1.03125 3.109375l0 6.96875l-1.8125 0l0 -6.703125q0 -1.515625 -0.734375 -2.1875q-0.71875 -0.6875 -1.96875 -0.6875q-0.875 0 -1.578125 0.5q-0.6875 0.484375 -1.078125 1.28125q-0.375 0.796875 -0.375 1.671875l0 6.125l-1.8125 0l0 -10.875zm15.619293 11.046875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l2.65625 0l0 1.640625l-2.65625 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625zm7.993042 0.171875q-1.5625 0 -2.796875 -0.75q-1.234375 -0.75 -1.9375 -2.0625q-0.6875 -1.3125 -0.6875 -2.953125q0 -1.546875 0.640625 -2.875q0.65625 -1.34375 1.859375 -2.125q1.21875 -0.796875 2.765625 -0.796875q1.609375 0 2.78125 0.71875q1.171875 0.703125 1.796875 1.96875q0.625 1.265625 0.625 2.875q0 0.265625 -0.03125 0.5625l-8.625 0q0.0625 1.234375 0.59375 2.09375q0.546875 0.84375 1.359375 1.28125q0.828125 0.421875 1.71875 0.421875q2.125 0 3.21875 -1.96875l1.53125 0.75q-0.671875 1.296875 -1.890625 2.078125q-1.21875 0.78125 -2.921875 0.78125zm3.140625 -6.9375q-0.046875 -0.671875 -0.390625 -1.359375q-0.34375 -0.6875 -1.078125 -1.15625q-0.71875 -0.46875 -1.828125 -0.46875q-1.28125 0 -2.171875 0.828125q-0.890625 0.8125 -1.171875 2.15625l6.640625 0zm4.023407 -4.28125l1.734375 0l0 1.59375l0.078125 0q0.453125 -0.8125 1.421875 -1.375q0.984375 -0.5625 2.09375 -0.5625q1.96875 0 3.0 1.140625q1.03125 1.140625 1.03125 3.109375l0 6.96875l-1.8125 0l0 -6.703125q0 -1.515625 -0.734375 -2.1875q-0.71875 -0.6875 -1.96875 -0.6875q-0.875 0 -1.578125 0.5q-0.6875 0.484375 -1.078125 1.28125q-0.375 0.796875 -0.375 1.671875l0 6.125l-1.8125 0l0 -10.875zm15.619293 11.046875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l4.9375 0l0 -1.171875q0 -1.03125 0.453125 -1.796875q0.46875 -0.765625 1.265625 -1.171875q0.796875 -0.421875 1.765625 -0.421875q0.875 0 1.59375 0.25l0 1.765625q-0.421875 -0.171875 -0.75 -0.25q-0.328125 -0.078125 -0.796875 -0.078125q-0.703125 0 -1.21875 0.5q-0.515625 0.5 -0.515625 1.390625l0 0.984375l2.796875 0l0 1.640625l-2.796875 0l0 9.234375l-1.796875 0l0 -9.234375l-4.9375 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625zm14.2901 0.171875q-1.96875 0 -3.0 -1.15625q-1.03125 -1.15625 -1.03125 -3.21875l0 -6.84375l1.8125 0l0 6.5625q0 1.5625 0.703125 2.296875q0.703125 0.71875 1.890625 0.71875q0.921875 0 1.625 -0.484375q0.71875 -0.5 1.109375 -1.28125q0.40625 -0.796875 0.40625 -1.671875l0 -6.140625l1.8125 0l0 10.875l-1.734375 0l0 -1.578125l-0.078125 0q-0.453125 0.8125 -1.4375 1.375q-0.96875 0.546875 -2.078125 0.546875zm8.011993 -15.609375l1.8125 0l0 15.265625l-1.8125 0l0 -15.265625zm3.1565247 15.265625l0 0zm6.6512756 -15.265625l5.140625 0q1.28125 0 2.359375 0.578125q1.09375 0.5625 1.75 1.609375q0.65625 1.03125 0.65625 2.328125q0 1.296875 -0.65625 2.34375q-0.65625 1.03125 -1.75 1.609375q-1.078125 0.5625 -2.359375 0.5625l-3.328125 0l0 6.234375l-1.8125 0l0 -15.265625zm5.1875 7.3125q0.84375 0 1.5 -0.40625q0.65625 -0.40625 1.015625 -1.046875q0.359375 -0.640625 0.359375 -1.34375q0 -0.703125 -0.359375 -1.34375q-0.359375 -0.640625 -1.015625 -1.046875q-0.65625 -0.40625 -1.5 -0.40625l-3.375 0l0 5.59375l3.375 0zm9.780243 8.296875q-1.1875 0 -2.125 -0.46875q-0.9375 -0.46875 -1.453125 -1.28125q-0.515625 -0.828125 -0.515625 -1.875q0 -1.734375 1.296875 -2.703125q1.3125 -0.96875 3.296875 -0.96875q0.984375 0 1.828125 0.21875q0.84375 0.203125 1.28125 0.484375l0 -0.65625q0 -1.21875 -0.859375 -1.953125q-0.84375 -0.734375 -2.140625 -0.734375q-0.90625 0 -1.6875 0.390625q-0.765625 0.390625 -1.21875 1.09375l-1.359375 -1.015625q0.640625 -0.984375 1.765625 -1.53125q1.125 -0.5625 2.5 -0.5625q2.21875 0 3.46875 1.171875q1.265625 1.15625 1.265625 3.15625l0 6.890625l-1.734375 0l0 -1.5625l-0.078125 0q-0.46875 0.796875 -1.40625 1.359375q-0.9375 0.546875 -2.125 0.546875zm0.171875 -1.609375q0.921875 0 1.703125 -0.46875q0.796875 -0.46875 1.265625 -1.25q0.46875 -0.796875 0.46875 -1.734375q-0.515625 -0.34375 -1.265625 -0.546875q-0.734375 -0.21875 -1.5625 -0.21875q-1.5 0 -2.265625 0.625q-0.75 0.609375 -0.75 1.59375q0 0.890625 0.6875 1.453125q0.6875 0.546875 1.71875 0.546875zm8.747147 -11.609375q-0.53123474 0 -0.92185974 -0.390625q-0.375 -0.390625 -0.375 -0.921875q0 -0.546875 0.375 -0.921875q0.390625 -0.375 0.92185974 -0.375q0.5625 0 0.9375 0.375q0.375 0.375 0.375 0.921875q0 0.53125 -0.375 0.921875q-0.375 0.390625 -0.9375 0.390625zm-0.89060974 2.0l1.8124847 0l0 10.875l-1.8124847 0l0 -10.875zm4.6483 0l1.734375 0l0 1.59375l0.078125 0q0.453125 -0.8125 1.421875 -1.375q0.984375 -0.5625 2.09375 -0.5625q1.96875 0 3.0 1.140625q1.03125 1.140625 1.03125 3.109375l0 6.96875l-1.8125 0l0 -6.703125q0 -1.515625 -0.734375 -2.1875q-0.71875 -0.6875 -1.96875 -0.6875q-0.875 0 -1.578125 0.5q-0.6875 0.484375 -1.078125 1.28125q-0.375 0.796875 -0.375 1.671875l0 6.125l-1.8125 0l0 -10.875zm15.619293 11.046875q-0.671875 0 -1.234375 -0.203125q-0.5625 -0.21875 -0.953125 -0.59375q-0.84375 -0.796875 -0.84375 -2.234375l0 -6.375l-1.90625 0l0 -1.640625l1.90625 0l0 -3.078125l1.8125 0l0 3.078125l2.65625 0l0 1.640625l-2.65625 0l0 5.921875q0 0.90625 0.34375 1.328125q0.40625 0.46875 1.171875 0.46875q0.65625 0 1.1875 -0.359375l0 1.765625q-0.3125 0.15625 -0.65625 0.21875q-0.328125 0.0625 -0.828125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m600.0 125.62752l0 -28.566933" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m600.0 125.627525l0 -20.98693" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m600.0 98.06059c1.8170166 0 3.289978 1.4729843 3.289978 3.290001c0 1.8170166 -1.4729614 3.290001 -3.289978 3.290001c-1.8170166 0 -3.289978 -1.4729843 -3.289978 -3.290001c0 -1.8170166 1.4729614 -3.290001 3.289978 -3.290001z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/lcp_ux.svg b/src/site/content/en/vitals/lcp_ux.svg
deleted file mode 100644
index 2c1c84eacba..00000000000
--- a/src/site/content/en/vitals/lcp_ux.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 384.0 336.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l384.0 0l0 336.0l-384.0 0l0 -336.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 336.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m48.006233 28.0l288.0 0l0 33.574802l-288.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m159.75316 52.81928q-0.796875 -1.125 -1.328125 -2.703125q-0.515625 -1.578125 -0.515625 -3.4375q0 -2.453125 1.125 -4.65625q1.140625 -2.21875 3.140625 -3.859375l1.046875 0.953125q-1.765625 1.6875 -2.6875 3.546875q-0.90625 1.859375 -0.90625 4.125q0 1.515625 0.359375 2.765625q0.375 1.25 1.03125 2.375l-1.265625 0.890625zm5.174759 -13.625l1.75 0l-1.734375 9.796875l4.921875 0l-0.28125 1.65625l-6.6875 0l2.03125 -11.453125zm9.975525 11.703125q-1.09375 0 -1.953125 -0.5q-0.84375 -0.515625 -1.3125 -1.390625q-0.46875 -0.890625 -0.46875 -1.953125q0 -1.34375 0.59375 -2.4375q0.59375 -1.109375 1.671875 -1.75q1.09375 -0.640625 2.515625 -0.640625q1.1093903 0 1.9531403 0.515625q0.859375 0.515625 1.328125 1.40625q0.484375 0.875 0.484375 1.9375q0 1.34375 -0.609375 2.4375q-0.59375 1.09375 -1.6875 1.734375q-1.078125 0.640625 -2.5156403 0.640625zm0.21875 -1.578125q0.8125 0 1.4531403 -0.40625q0.65625 -0.40625 1.015625 -1.109375q0.375 -0.71875 0.375 -1.578125q0 -1.046875 -0.609375 -1.71875q-0.59375 -0.6875 -1.6093903 -0.6875q-0.8125 0 -1.453125 0.421875q-0.640625 0.40625 -1.03125 1.109375q-0.375 0.703125 -0.375 1.546875q0 1.0625 0.609375 1.75q0.609375 0.671875 1.625 0.671875zm8.085159 1.578125q-0.71875 0 -1.328125 -0.328125q-0.609375 -0.328125 -0.96875 -0.890625q-0.359375 -0.578125 -0.359375 -1.28125q0 -1.359375 0.96875 -2.15625q0.96875 -0.8125 2.71875 -0.8125q0.625 0 1.203125 0.140625q0.59375 0.125 1.046875 0.34375l0.109375 -0.421875l0.03125 -0.40625q0 -0.609375 -0.53125 -1.0q-0.515625 -0.390625 -1.28125 -0.390625q-1.3125 0 -2.09375 0.984375l-1.21875 -0.890625q0.609375 -0.75 1.515625 -1.15625q0.921875 -0.40625 1.984375 -0.40625q1.53125 0 2.40625 0.75q0.875 0.734375 0.875 1.953125q0 0.34375 -0.078125 0.828125l-0.875 4.890625l-1.671875 0l0.171875 -0.984375l-0.09375 0q-0.40625 0.5625 -1.046875 0.90625q-0.625 0.328125 -1.484375 0.328125zm0.5 -1.40625q1.0 0 1.703125 -0.640625q0.703125 -0.640625 0.859375 -1.640625q-0.484375 -0.25 -0.9375 -0.359375q-0.4375 -0.125 -1.078125 -0.125q-0.890625 0 -1.421875 0.40625q-0.53125 0.390625 -0.53125 1.125q0 0.5625 0.40625 0.90625q0.40625 0.328125 1.0 0.328125zm8.936127 1.40625q-0.9375 0 -1.703125 -0.46875q-0.75 -0.46875 -1.1875 -1.328125q-0.421875 -0.859375 -0.421875 -1.921875q0 -1.359375 0.59375 -2.5q0.59375 -1.140625 1.65625 -1.796875q1.078125 -0.65625 2.421875 -0.65625q0.875 0 1.546875 0.421875q0.6875 0.40625 0.953125 0.953125l0.109375 0l0.09375 -1.140625l0.578125 -3.265625l1.703125 0l-2.03125 11.453125l-1.609375 0l0.1875 -1.09375l-0.09375 0q-0.4375 0.625 -1.140625 0.984375q-0.6875 0.359375 -1.65625 0.359375zm0.578125 -1.578125q0.78125 0 1.453125 -0.40625q0.671875 -0.421875 1.0625 -1.15625q0.390625 -0.734375 0.390625 -1.6875q0 -1.0 -0.625 -1.625q-0.609375 -0.625 -1.53125 -0.625q-0.84375 0 -1.515625 0.421875q-0.65625 0.421875 -1.03125 1.15625q-0.359375 0.71875 -0.359375 1.625q0 1.03125 0.609375 1.671875q0.609375 0.625 1.546875 0.625zm8.636902 -8.03125q-0.5 0 -0.84375 -0.34375q-0.328125 -0.34375 -0.328125 -0.828125q0 -0.484375 0.328125 -0.8125q0.34375 -0.34375 0.84375 -0.34375q0.46875 0 0.796875 0.34375q0.34375 0.328125 0.34375 0.8125q0 0.484375 -0.34375 0.828125q-0.328125 0.34375 -0.796875 0.34375zm-1.296875 1.203125l1.71875 0l-1.4375 8.15625l-1.703125 0l1.421875 -8.15625zm5.4222717 1.109375q0.4375 -0.640625 1.125 -1.0q0.6875 -0.375 1.578125 -0.375q1.234375 0 1.921875 0.6875q0.6875 0.671875 0.6875 1.765625q0 0.609375 -0.09375 1.078125l-0.875 4.890625l-1.71875 0l0.84375 -4.796875q0.078125 -0.40625 0.078125 -0.703125q0 -0.609375 -0.40625 -0.96875q-0.40625 -0.359375 -1.09375 -0.359375q-0.953125 0 -1.640625 0.6875q-0.6875 0.671875 -0.859375 1.75l-0.78125 4.390625l-1.734375 0l1.453125 -8.15625l1.609375 0l-0.1875 1.109375l0.09375 0zm9.356262 10.765625q-0.953125 0 -1.6875 -0.328125q-0.71875 -0.328125 -1.15625 -0.859375q-0.4375 -0.53125 -0.5625 -1.140625l1.671875 -0.65625q0.171875 0.65625 0.65625 1.046875q0.5 0.390625 1.28125 0.390625q1.171875 0 1.90625 -0.65625q0.734375 -0.65625 0.953125 -1.875l0.140625 -0.828125l-0.09375 0q-0.4375 0.625 -1.09375 0.953125q-0.640625 0.3125 -1.59375 0.3125q-0.9375 0 -1.6875 -0.453125q-0.75 -0.46875 -1.1875 -1.296875q-0.421875 -0.828125 -0.421875 -1.859375q0 -1.296875 0.5625 -2.421875q0.578125 -1.125 1.609375 -1.796875q1.03125 -0.671875 2.390625 -0.671875q0.859375 0 1.515625 0.34375q0.671875 0.34375 0.953125 0.9375l0.109375 0l0.1875 -1.015625l1.625 0l-1.375 7.84375q-0.734375 4.03125 -4.703125 4.03125zm0.875 -5.203125q0.828125 0 1.484375 -0.421875q0.671875 -0.4375 1.046875 -1.140625q0.390625 -0.71875 0.390625 -1.5625q0 -1.015625 -0.59375 -1.625q-0.59375 -0.609375 -1.46875 -0.609375q-0.84375 0 -1.5 0.421875q-0.640625 0.40625 -1.015625 1.125q-0.375 0.71875 -0.375 1.609375q0 1.03125 0.578125 1.625q0.578125 0.578125 1.453125 0.578125zm4.91626 2.71875q1.78125 -1.71875 2.6875 -3.5625q0.921875 -1.84375 0.921875 -4.125q0 -1.515625 -0.375 -2.765625q-0.375 -1.25 -1.046875 -2.359375l1.265625 -0.90625q0.8125 1.140625 1.328125 2.71875q0.53125 1.578125 0.53125 3.421875q0 2.453125 -1.140625 4.671875q-1.125 2.21875 -3.125 3.84375l-1.046875 -0.9375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 67.2l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m115.79305 83.66437l11.875 0l0 51.75l26.671867 0l0 11.265625l-38.546867 0l0 -63.015625zm76.99615 64.421875q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l22.171875 0q5.984375 0 10.90625 2.515625q4.9375 2.515625 7.75 7.046875q2.8125 4.53125 2.8125 10.328125q0 5.8125 -2.8125 10.390625q-2.8125 4.578125 -7.75 7.09375q-4.921875 2.5 -10.90625 2.5l-10.296875 0l0 23.140625l-11.875 0l0 -63.015625zm22.53125 28.609375q4.390625 0 6.890625 -2.546875q2.515625 -2.5625 2.515625 -6.171875q0 -3.609375 -2.515625 -6.109375q-2.5 -2.515625 -6.890625 -2.515625l-10.65625 0l0 17.34375l10.65625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 220.80136l96.0 0l0 38.393707l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 244.70572q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 220.80132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 228.92441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 242.92441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 220.8l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 235.9231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 283.2l95.999985 0l0 28.409424l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m223.49895 301.0772l-5.15625 0l0 -1.34375l5.015625 -7.40625l1.84375 0l0 7.140625l1.390625 0l0 1.609375l-1.390625 0l0 2.1875l-1.703125 0l0 -2.1875zm0 -1.609375l0 -4.609375l-0.09375 0l-3.125 4.609375l3.21875 0zm5.9627686 3.890625q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm7.3638763 0.15625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654007 0q-1.1875 0 -2.140625 -0.546875q-0.95310974 -0.5625 -1.4843597 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4374847 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.1706543 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 283.59363l96.0 0l0 28.409424l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m114.02157 302.03336q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm9.984146 1.71875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm6.598259 0.15625q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.3750076 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.5468826 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875076 -0.75l0.65625 -5.5l5.9062576 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875zm4.684021 -0.25l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654022 0q-1.1875 0 -2.140625 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4375 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.170639 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 285.0754l0 -28.566925" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 285.0754l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 257.50848c1.8170166 0 3.2899933 1.4729614 3.2899933 3.289978c0 1.8170166 -1.4729767 3.2900085 -3.2899933 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.289978 3.2899933 -3.289978z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 158.4l288.0 0l0 28.787415l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m85.778755 165.6812l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm7.19812 -9.015625l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm11.46875 14.84375q-1.796875 0 -2.96875 -0.84375q-1.171875 -0.84375 -1.5625 -2.015625l1.5625 -0.65625q0.3125 0.875 1.09375 1.421875q0.796875 0.546875 1.875 0.546875q1.578125 0 2.453125 -0.921875q0.875 -0.90625 0.875 -2.59375l0 -1.140625l-0.078125 0q-0.5 0.78125 -1.421875 1.28125q-0.90625 0.484375 -2.0625 0.484375q-1.3125 0 -2.40625 -0.671875q-1.09375 -0.6875 -1.734375 -1.90625q-0.640625 -1.21875 -0.640625 -2.78125q0 -1.546875 0.640625 -2.765625q0.640625 -1.234375 1.734375 -1.90625q1.09375 -0.6875 2.40625 -0.6875q1.15625 0 2.0625 0.484375q0.921875 0.484375 1.421875 1.296875l0.078125 0l0 -1.46875l1.625 0l0 9.796875q0 2.46875 -1.375 3.75q-1.359375 1.296875 -3.578125 1.296875zm0 -5.984375q0.921875 0 1.671875 -0.453125q0.75 -0.46875 1.203125 -1.328125q0.453125 -0.859375 0.453125 -2.03125q0 -1.203125 -0.453125 -2.0625q-0.453125 -0.859375 -1.203125 -1.3125q-0.75 -0.453125 -1.671875 -0.453125q-0.921875 0 -1.6875 0.46875q-0.75 0.453125 -1.203125 1.3125q-0.4375 0.859375 -0.4375 2.046875q0 1.171875 0.4375 2.046875q0.453125 0.875 1.203125 1.328125q0.765625 0.4375 1.6875 0.4375zm11.902489 1.65625q-1.453125 0 -2.6250076 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.1406326 -0.734375 2.5937576 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078133 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.2656326 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.0468826 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.2187576 0zm7.4381256 6.5q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm12.5525055 0.3125q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm12.060623 0q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm7.032486 -8.984375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm7.4893646 0.15625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -4.015625l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l4.640625 0l0 -1.09375q0 -0.96875 0.421875 -1.6875q0.4375 -0.71875 1.1875 -1.109375q0.75 -0.390625 1.640625 -0.390625q0.828125 0 1.5 0.25l0 1.65625q-0.390625 -0.15625 -0.703125 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l2.625 0l0 1.546875l-2.625 0l0 8.65625l-1.671875 0l0 -8.65625l-4.640625 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm13.38562 0.15625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm2.9543762 14.3125l0 0zm6.233734 -14.3125l4.828125 0q1.203125 0 2.21875 0.546875q1.015625 0.53125 1.625 1.5q0.609375 0.96875 0.609375 2.1875q0 1.21875 -0.609375 2.1875q-0.609375 0.96875 -1.625 1.515625q-1.015625 0.53125 -2.21875 0.53125l-3.125 0l0 5.84375l-1.703125 0l0 -14.3125zm4.859375 6.859375q0.8125 0 1.421875 -0.375q0.609375 -0.390625 0.9375 -0.984375q0.34375 -0.609375 0.34375 -1.265625q0 -0.65625 -0.34375 -1.25q-0.328125 -0.609375 -0.9375 -0.984375q-0.609375 -0.390625 -1.421875 -0.390625l-3.15625 0l0 5.25l3.15625 0zm9.182495 7.765625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm8.19812 -10.890625q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641876 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 284.57184l0 -28.283447" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 284.57184l0 -20.70346" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 257.2884c1.8170166 0 3.2900085 1.472992 3.2900085 3.2900085c0 1.8170166 -1.472992 3.289978 -3.2900085 3.289978c-1.8170166 0 -3.2899933 -1.4729614 -3.2899933 -3.289978c0 -1.8170166 1.4729767 -3.2900085 3.2899933 -3.2900085z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/site/content/en/vitals/web-vitals-hero.png b/src/site/content/en/vitals/web-vitals-hero.png
deleted file mode 100644
index 17880415454..00000000000
Binary files a/src/site/content/en/vitals/web-vitals-hero.png and /dev/null differ
diff --git a/src/site/content/en/web-dev-basics-one/additional-html-elements/index.md b/src/site/content/en/web-dev-basics-one/additional-html-elements/index.md
new file mode 100644
index 00000000000..0a5618d5d03
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/additional-html-elements/index.md
@@ -0,0 +1,164 @@
+---
+layout: post
+title: Additional HTML elements
+description: Essential metrics for a healthy site
+date: 2022-02-02
+---
+
+In earlier activities, you learned:
+
+- The basics of  HTML tags and elements. 
+- How to structure a web page.
+- Semantic HTML and best practices. 
+
+With this article, you continue to build on your HTML knowledge and cover additional HTML elements. 
+
+## Text content elements
+
+```html
+<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
+```
+
+These elements support the creation of text content and add structure, style and meaning. There are multiple pieces of text content that can incorporate the following elements. 
+
+### The blockquote element
+
+```html
+<blockquote cite="https://www.goodreads.com/quotes">
+    <p>Be the change that you wish to see in the world.</p>
+</blockquote>
+```
+
+This example shows how to use the [`<blockquote>`](https://developer.mozilla.org/docs/Web/HTML/Element/blockquote) element, showcasing a famous quote by Mahatma Gandhi. There are so many great quotations out there that provide memorable content and meaning. Think about some of your favorite inspirational figures and their quotes. 
+
+Use the `<blockquote>` element when using quotations and referencing information from a  source. The `<blockquote>` element creates a unique indentation and alignment in presentation, and uses both an opening and closing tag. A `<blockquote>` is especially helpful when using longer quotations that cover multiple lines of text.
+
+You can use various elements within a `<blockquote>` element as well, such as a header, paragraph, or list. 
+
+{% Aside %}
+Think about a scenario where you would create and structure a block of code using the `<blockquote> `element. 
+{% endAside %}
+
+### The `<details>` element
+
+```html
+<details>
+   <summary>Details</summary>
+   Additional Information
+</details>
+```
+
+Often, a web page will have an FAQ section and additional information that is available to the user. There are FAQ sections that are common for product information, travel itinerary, or any kind of question and answer scenario. 
+
+The [`<details>`](https://developer.mozilla.org/docs/Web/HTML/Element/details) element is helpful by using a disclosed widget that holds additional information. The element includes a built-in toggle functionality and the user can open and close the toggle. When the toggle is open, the additional information content expands and can be read by the user. When the toggle is closed, the additional information content is hidden from the user. To name the `<details>` widget itself, use the [`<summary>`](https://developer.mozilla.org/docs/Web/HTML/Element/summary) element. 
+
+```html
+<figure>
+  <img
+    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
+     alt="Google logo">
+  <figcaption>Google logo</figcaption>
+</figure>
+```
+
+This is the [`<figure>`](https://developer.mozilla.org/docs/Web/HTML/Element/figure) element in action. Here you see that `<figure>`, used alongside with the [`<figcaption>`](https://developer.mozilla.org/docs/Web/HTML/Element/figcaption) element, can be used to enhance the visual experience. 
+
+You see images all over the web, and other helpful visual data all the time. Visual elements help attract the attention of the visitor and create a great user experience. The `<figure>` element is a way of labeling an image, table, chart etc. It works by creating self contained content in relation to the main content. 
+
+{% Aside %}
+This element also works well with the `<blockquote>` element. 
+{% endAside %} 
+
+### The `<time>` element
+
+```html
+<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
+```
+
+The [`<time>`](https://developer.mozilla.org/docs/Web/HTML/Element/time) element provides both meaning and semantic meaning, allowing for better functionality with activities such as scheduling an appointment online, publishing a date and time for a blog article, archives, etc. A few website examples that would use the `<time>` element include using Google calendar, publishing an article live on a platform, or reading online historical archives from a library website.
+
+The `<time>` element  references time, and can represent the time for a 24 hour clock or a specific date that can adjust for timezone and location.  This element requires both an opening and closing tag, `<time>` and `</time>`. You can add the `datetime` attribute so that dates can be read in a machine readable format. 
+
+## Document metadata
+
+```html
+<title>Sarah's Favorite Food Recipes</title>
+```
+
+Anytime you type in a website URL, there's a [`<title>`](https://developer.mozilla.org/docs/Web/HTML/Element/title) name that can be read in the browser bar or web page tab. It's the title name you see given for a web page. This element is important and is used by a search engine to display a list of related web pages in search results. The title length can vary from short and descriptive, to longer and more descriptive. 
+
+Scenario: you have a web page you're thinking about, but can't remember the specific website URL. Type in the keywords in a search engine. The search engine helps track down the web page that you're looking for, and you can view the `<title>` name appearing in search.
+
+## Embedded content elements
+
+In addition to text content, there are a variety of additional content elements to use. 
+
+The `<iframe>` element
+
+```html
+<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
+```
+
+When finishing shopping for items online and clicking on your payment option, such as Paypal or Apple Pay, these features are commonly added to a web page with an [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). Seeing a map online to search for a local business is another common experience. These types of user experiences on a web page can be added with an iframe.  In the example above, you see the Wikipedia URL within an iframe, titled as "Wikipedia." 
+
+The `<iframe>` element allows you to insert content from another source and embed a frame within a web page. It creates a rectangular shaped frame and displays content in the browser. A frame allows for the presentation of a window shaped layout within an `<iframe>` element. It's a powerful way to add content to your web page to enhance the experience. 
+
+{% Aside %}
+Think about which types of web page content you would want to embed onto another page, using the `<iframe>` and `<source>`. What would it look like?
+{% endAside %}
+
+## Form elements
+
+```html
+<progress max="100" value="30"> 30% </progress>
+```
+
+When watching a longer video, lecture, or filling out an extensive application, having a visual progress bar can be helpful to track your progress. The [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Element/progress) element is helpful for these types of scenarios. 
+
+This element is depicted as a visual bar with a background color. The visual bar can range in size and background color. With the progress bar, you can optionally use the `max` and `value` attributes. The `max` attribute sets the floating point number and the `value` attribute notes how much progress has been made on a task.  
+
+## Scripting
+
+```html
+<canvas id="canvas"></canvas>
+```
+
+To be able to draw graphics and animations in real time, use the [`<canvas>`](https://developer.mozilla.org/docs/Web/API/Canvas_API) element. Place the `<canvas>` element into your HTML web page to create a canvas. This element requires JavaScript code for the functionality to draw and create graphics. 
+
+## Table content elements
+
+```html
+<table>
+    <thead>
+        <tr>
+            <th colspan="2">Grocery List</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Broccoli</td>
+            <td>Quantity: 2</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+### The `<table>` element
+
+The [`<table>`](https://developer.mozilla.org/docs/Web/HTML/Element/table) element creates a table. This is the starting point for adding additional elements with rows and columns. Tables appear often on web pages, being a helpful way to organize and show information. One use case for using the `<table>` element is to present tabular information to the user, such as the sort of information you may find in a spreadsheet.
+
+### The `<th>` element
+
+The [`<th>`](https://developer.mozilla.org/docs/Web/HTML/Element/th) element is the header for a group of cells. 
+
+### The `<tr>` element
+
+The [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr) element defines a row of cells within a table. From here, you can add in specific cell data. 
+
+### The `<td>` element 
+
+The [`<td>`](https://developer.mozilla.org/docs/Web/HTML/Element/td) element creates the cell, adding the content needed. 
+
+## Conclusion
+
+In this article, you discovered additional HTML elements and built on your coding skills. You learned more about content, inline text, embedded content and table elements. You now have built on your understanding of additional HTML elements. Keep up the good work!
\ No newline at end of file
diff --git a/src/site/content/en/web-dev-basics-one/choose-js-library-or-framework/index.md b/src/site/content/en/web-dev-basics-one/choose-js-library-or-framework/index.md
new file mode 100644
index 00000000000..6269644ef38
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/choose-js-library-or-framework/index.md
@@ -0,0 +1,226 @@
+---
+layout: post
+title: Choose a JavaScript library or framework
+description: Understand the decisions around using a JavaScript library or framework.
+authors:
+  - umarhansa
+date: 2022-05-23
+---
+
+This article shares insights on how you might pick a library or framework to use within your web application. The discussions herein will help you to weigh the pros and cons in finding the JavaScript library or framework that is right for the business problem you're trying to solve. Understanding which pros and which cons apply in different situations is key to vetting the large number of JavaScript library choices that are available.
+
+## What are JavaScript libraries and frameworks
+
+What is a JavaScript library? In its simplest form, a JavaScript library is prewritten code that you can call in your project's code to achieve a specific task.
+
+This post mainly mentions "libraries". However, many of the discussions are also applicable to frameworks. Basically, the difference between the two can be summarized as follows:
+
+-  For a library, your application code calls the library code.
+-  For a framework, your application code is called by the framework.
+
+The following practical examples help to illustrate the differences.
+
+### Example call to a JavaScript library
+
+A JavaScript library performs a specific task and then returns control to your application. When you use a library, you control the application flow and choose when to call the library.
+
+In the following example, application code imports a method from the [lodash](https://lodash.com/) library. After the function completes, control is returned to your application.
+
+```js
+import capitalize from 'lodash.capitalize';
+capitalize('hello'); // Hello
+```
+
+When the [`lodash.capitalize`](https://www.npmjs.com/package/lodash.capitalize) method is executed, it calls pre-written JavaScript code that capitalizes the first character of a string.
+
+### Example use of a JavaScript Framework
+
+A JavaScript framework is a predefined code template within which you construct your application's behavior. That is, when you use a framework, the framework controls the application flow. To use a framework, you write your custom application code, and then the framework calls your application code.
+
+The following example shows a code snippet that uses the [Preact](https://preactjs.com/) JavaScript framework:
+
+```js
+import { createElement } from 'preact';
+
+export default function App() {
+  return (
+    <p class="big">Hello World!</p>
+  )
+}
+```
+
+In the example, notice that the framework has a lot more control over the code you write, and in some cases, the framework even takes control over when to execute your code.
+
+## Why use a library?
+
+Using a JavaScript library can help to avoid unnecessary [code repetition](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Libraries can abstract away complex logic, such as date manipulation or financial calculations. A library can also help get your [initial product](https://en.wikipedia.org/wiki/Minimum_viable_product) out, rather than having to write all the code from scratch, which can take time.
+
+Some client-side JavaScript libraries help abstract away quirks of the web platform. A library can also serve as a learning tool. For example, if you're unfamiliar with [animation easing functions](https://easings.net/), the source code of a library can teach you how such easings work.
+
+Some libraries are backed by large companies that invest time and money into keeping libraries up to date and secure. Many libraries are accompanied by extensive documentation, which offers you and your team a quick way to familiarize yourself with the library's usage.
+
+Ultimately, using a JavaScript library saves you time.
+
+## Why should you care about library usage?
+
+Technically, you can develop your web application from scratch, but why go to the trouble when you can use free (open source) software, or purchase a solution that, in the long run, can save time and money? There are a large number of JavaScript libraries and frameworks available, each offering a unique approach to solving problems, and each having different characteristics. For example:
+
+-  A library can be written and maintained internally rather than by a third party.
+-  A library can have specific legal licenses that make it suitable or unsuitable for your web application.
+-  A library can be outdated or unmaintained.
+-  A library can simplify a set of complex tasks and save you a lot of time and money.
+-  A library can be widely used in the community, and can be well known amongst developers.
+
+As you might suspect, different characteristics can affect your web application in different ways. Sometimes, the decision is just not that deep, and you can safely swap out a library if you don't like it. However, sometimes a library can have a significant effect on your work and your web application, which suggests a more informed approach could be necessary.
+
+{% Aside 'important' %}
+Many of the points raised in the following performance section—and also points raised throughout this article—are applicable to client-side environments. Client-side code is run on the end user's device, such as through their web browser.
+{% endAside %}
+
+There are some non client-side JavaScript environments, such as on the server (run in a cloud environment) or on a Raspberry Pi, where you may need to adjust the criteria you use to vet libraries and frameworks.
+
+## Performance
+
+The performance effect of a JavaScript library on a client-side web application should not be ignored. A large JavaScript library can disrupt the loading performance of your page;  remember, [milliseconds make millions](/milliseconds-make-millions/).
+
+{% Aside %}
+Many JavaScript libraries are open source, and the efforts of the library maintainers cannot be overstated—open source is not easy.
+{% endAside %}
+
+Consider a scenario where you use a JavaScript library for animation. Some libraries can easily add tens of kilobytes, and in some cases, even hundreds of kilobytes. JavaScript resources like this can add a significant delay to your page load as the browser needs to [download, parse, compile and execute](/optimizing-content-efficiency-javascript-startup-optimization/) the code.
+
+The bigger the JavaScript library, the bigger the performance effect on your users.
+
+When evaluating or using a JavaScript library or framework, consider the following suggestions to improve performance:
+
+-  Given a large JavaScript library, consider using a smaller alternative. For example, [date-fns](https://date-fns.org/) offers a lot of functionality at a more reasonable size than some other options.
+-  Following on from the previous date-fns example, import only the functions that you need, such as: `import { format } from 'date-fns'`. Be sure to combine this approach with [tree shaking](/reduce-javascript-payloads-with-tree-shaking/), so that a minimal JavaScript payload is built and sent to your users.
+-  Use performance testing tools such as [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to observe the performance effect of using a certain JavaScript library. If a library adds a one-second delay to your page load time (don't forget to [throttle](https://developer.mozilla.org/docs/Glossary/Network_throttling) your network and CPU during testing), then you may need to reevaluate your library of choice. In addition to checking page load, be sure to profile any web page behavior that invokes code from the library in question—page load performance does not tell the full story.
+-  If comments are welcomed by the library author, then submit your performance observations, suggestions, and even contributions to the project. This is where the open source community shines! If you decide to make a contribution, then you may need to check with your employer first.
+-  Use an automated bundle tracking tool, such as [bundlesize](https://github.com/siddharthkp/bundlesize), to watch for unexpectedly large updates to a library. It's common that a JavaScript library will grow over time. Feature additions, bug fixes, edge cases, and others, can all add to the file size of a library. Once you/your team have agreed to use a library, updating the library may be less of an issue and could raise little-to-no questions. This is where it's helpful to rely on automation.
+-  Look at your requirements for a library and evaluate whether or not the web platform offers the same functionality natively. For example, the web platform already offers a [color picker](https://codepen.io/una/pen/BLxjoo), which removes the need to use a third-party JavaScript library to implement the same functionality.
+
+## Security
+
+Using a third-party module carries some inherent security risks. A malicious package within your web application codebase can compromise the security of both your development team and your users.
+
+Consider a library published to the NPM ecosystem. Such a package may be legitimate. However, over time, the package can be compromised.
+
+Here are some security tips to consider when using or evaluating third-party code:
+
+-  If you use GitHub, then consider the code's security [offerings](https://github.com/features/security), such as [Dependabot](https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/about-dependabot-version-updates). Or, consider alternative services that scan for vulnerabilities in your code, such as [snyk.io](https://snyk.io/).
+-  Consider using code-auditing services, a team of engineers who can manually audit the third-party code you're using.
+-  Evaluate whether you should lock your dependencies to a specific version, or commit your third-party code within your version control. This can help lock your dependency to one particular version—that is presumably deemed safe. Ironically, this can have a counter-effect within security, as you may miss out on vital updates to the library.
+-  Scan the project home page, or GitHub page, if one exists. Research whether outstanding security issues exist, and whether previous security issues were resolved within a reasonable timeframe.
+-  Third-party code that uses other third-party code can carry more risk than a library that has [zero dependencies](https://github.com/topics/zero-dependency). Be mindful of this risk.
+
+## Accessibility
+
+You may be wondering how software libraries are related to web accessibility. While a software library can be used in different environments, in the context of a client-side JavaScript-based library, [web accessibility](/accessible/) is of high importance.
+
+A client-side JavaScript-based library (or framework, for that matter) can increase or decrease the accessibility of your website. Consider a third-party JavaScript library that adds an image slider to a page. If the image slider does not account for web accessibility, you as the web developer may overlook such an important feature, and release a product that misses critical features, such as the slider being keyboard navigable!
+
+{% Aside %}
+In the previous example, it is the responsibility of the web developer building the website to make sure they use libraries that are fit for purpose. It is not the responsibility of the library author. This image slider is one particular example, but do consider other JavaScript library examples:</th>
+{% endAside %}
+
+-  Does the responsive typography plugin support users who zoom in or out of the page?
+-  Does the file uploader plugin support file uploads from assistive devices?
+-  Does the animation library offer support for users who [prefer reduced motion](/prefers-reduced-motion/)?
+-  Does the interactive maps plugin support keyboard-only usage?
+-  Does the audio player library offer an appropriate experience on screen readers?
+
+It's reasonable to expect that some level of involvement is needed from you, the web developer, to meet such accessibility requirements. For example:
+
+-  For any missing features, you can implement such features within your codebase, even while continuing to use the library in question.
+-  With the support of your employer, you can contribute such a missing feature to the library, if the library author allows for such a contribution.
+-  You can open up a dialogue with the library author. For example, are these specific accessibility features on your roadmap? Do you agree they belong in the library?
+-  For popular use cases, you can explore alternative library options that are more accessible; they may exist but are harder to find.
+-  In the extreme case, you may need to ditch a library entirely and implement your features from scratch. This can happen when a library or framework has a degraded accessibility experience on initial use, and you need to undo a lot of what the library or framework is supposedly giving you for free.
+
+## Conventions
+
+A software library that uses established [coding conventions](https://en.wikipedia.org/wiki/Coding_conventions) is easier to work with. If a library uses a coding convention that is unheard of, then it may be difficult for you and your team to work with such a library.
+
+If a library does not follow common coding conventions (for example, a common style guide), there is not much you can do as an immediate fix. However, there are still a few options:
+
+-  Be sure to differentiate between the library source code and the API exposed to you, the library user. While the internal source code may use unfamiliar conventions, if the API (the part of the library you interact with) uses familiar conventions, then there may be nothing to worry about.
+-  If the library API does not follow common coding conventions, you can use a JavaScript design pattern, like the [proxy pattern](https://www.patterns.dev/posts/proxy-pattern/), to wrap and contain all interactions with the library to a single file in the codebase. Your proxy can then offer a more intuitive API to other parts of the code within your codebase.
+
+Conventions play a big role with ease of use. A library that includes an intuitive API can save many hours', or even days' worth of people hours, when compared with a counter-intuitive API that needs a lot of experimentation to figure out.
+
+## Updates
+
+As an example, for a fully working library that performs a few mathematical calculations, such a library may rarely need updates. In fact, a feature-complete library is a rare find in the ever-changing world of web development! However, there are times where you want the library author to be responsive and willing to make updates. New research and findings can reveal better ways of doing things, so the techniques used in libraries and frameworks are always subject to change.
+
+When you pick a library or framework, pay attention to how updates are handled, and be aware that such decisions can affect you:
+
+-  Does the library have a sensible release schedule? For example, updates to the source code repository may happen frequently, but if such updates are not "published" or "released" accordingly, you'll find it can be a struggle to download such updates.
+-  Does the library release updates with a sensible [software versioning](https://en.wikipedia.org/wiki/Software_versioning) scheme? A library should save you time. If you have to unexpectedly change your code every time you update the library version, this may defeat the purpose of using that library in the first place. Breaking changes are sometimes unavoidable, but in an ideal world, changes are infrequent and not forced upon library consumers.
+-  Does the library invest effort towards [backward compatibility](https://en.wikipedia.org/wiki/Backward_compatibility)? Sometimes, software updates can come with breaking changes, but also provide a layer of backward compatibility. This allows the library consumer to use the latest library version with minimal changes to their code.
+
+{% Aside %}
+Library authors and maintainers invest huge amounts of time supporting web developers. It's not always practical for a library author to provide updates in the ways previously discussed. For example, independent library authors who work on open source may not even receive the financial support they need to keep up with the demands of the project. </th>
+{% endAside %}
+
+## Licensing
+
+{% Aside 'warning' %}
+This is not legal advice.
+{% endAside %}
+
+[Software licensing](https://en.wikipedia.org/wiki/Software_license) is an important aspect of using third-party software libraries. A library author may assign a license to their library. If you are considering using the library, then their [choice of license](https://choosealicense.com/) may affect you.
+
+For example, a JavaScript library may have a software license that permits you to use it in a non-commercial environment. For a personal hobby project, this could be a great choice. If your project has a commercial element, then you may need to consider an enterprise license.
+
+When in doubt, consider seeking professional legal advice or defer to the legal team within your company.
+
+## Community
+
+A library or framework that has a large community of users/contributors can be beneficial, but this isn't a guarantee. In general, the more users a library or framework has, the more likely it is to benefit. Consider the following pros and cons to participation in a development community:
+
+Pros:
+
+-  A large user base could mean a greater chance of bugs being caught early and often.
+-  A large active community could mean more tutorials, guides, videos, and even courses, on the library or framework in question.
+-  A large active community could mean more support on forums and question and answer websites, increasing the likelihood that support questions are answered.
+-  An engaged community can mean more external contributors to the library or framework. They can help deliver features that are otherwise not on the author's roadmap.
+-  When a library or framework is popular within a community, there's an increased likelihood that your peers and colleagues will have heard of, or even be familiar with, such a library or framework.
+
+Cons:
+
+-  A project with a large and diverse user base can become bloated from constant feature additions. Bloated libraries can harm web performance.
+-  A project with an active and engaged community can be stressful for the authors and maintainers, and may require heavy community moderation.
+-  A project that grows rapidly, but does not have the appropriate support in place, can begin to exhibit signs of having a toxic community. As an example, beginner or junior web developers can be made to feel unwelcome in a certain community due to gatekeeping.
+
+{% Aside %}
+The web development community is, by far, wonderful! Every community has its struggles, but you should not feel dissuaded from engaging with a particular community based on what you read here. It can be especially challenging for a new web developer to feel part of a community, especially those communities with polarizing views. You should know that this is a common challenge within the web community, and is an area in which more open conversation is needed.
+{% endAside %}
+
+## Documentation
+
+No matter how simple or complex a JavaScript library or framework might be, [software documentation](https://en.wikipedia.org/wiki/Software_documentation) can always help. Even very experienced developers use documentation, rather than figuring out the code themselves. Documentation clarifies the API you should use, and how you should use it.
+
+Documentation can even provide sample code, making it easier for you to get started quickly. When you evaluate a library or framework, you can ask some of these questions:
+
+-  Does the library include documentation? If it does not, you'll need to be comfortable with figuring things out on your own.
+-  Is the documentation clear, easy to understand, and free of ambiguity? Many developers spend large amounts of time on documentation. It may seem small, but clarity within textual documentation can have a big effect on your productivity.
+-  Is the documentation completely automatically generated? Such documentation can be harder to digest and does not always provide clear guidance on how to use an API.
+-  Is the documentation up to date? Documentation maintenance is sometimes treated as an afterthought. If the library is updated but the documentation is not, this can lead to wasted development time.
+-  Is the documentation comprehensive and available in multiple formats? User guides, sample code, reference documentation, live demos, and tutorials are all valuable documentation formats that can help you be successful in using a library or framework.
+
+Documentation cannot always be complete, and that's ok. You'll need to assess the needs of your organization, your project requirements, and the complexity of your software, and use that to determine the level of documentation you need.
+
+## Conclusion
+
+It's normal to feel [overwhelmed](https://en.wikipedia.org/wiki/Analysis_paralysis) when picking a library or framework for the first time. Just like everything else, the more you learn and practice a task, the better you become. It might be helpful to refer to this post when you next choose a library or framework to use. You can use the headings within this post as a checklist. For example: Is this library performant? Does this library meet my business standards for web accessibility?
+
+There are other aspects of libraries and frameworks that you may wish to consider, and that have not been heavily discussed this post:
+
+-  **Extendibility:** how easy is it to extend the library with custom logic and/or behavior?
+-  **Tooling:** if applicable, does the library have tooling such as code editor plugins, debugging tools, and build system plugins?
+-  **Architecture:** clean code is important, but is the overall [architecture](https://en.wikipedia.org/wiki/Software_architecture) of the library sensible?
+-  **Tests:** does the project have a test suite? Does the project website use badges or indicators which the test suite is passing against the latest commit?
+-  **Compatibility:** does the library work well with other libraries and/or frameworks you are currently using?
+-  **Cost:** what is the cost of a framework? Is it open-source or available for purchase?
+-  **Vanity metrics:** this should be low down in your criteria list, or even ignored entirely, but you may wish to consider project "votes", social media accounts that represent the project, and/or how many open bugs/issues there are on the project page.
diff --git a/src/site/content/en/web-dev-basics-one/fetch-api-error-handling/index.md b/src/site/content/en/web-dev-basics-one/fetch-api-error-handling/index.md
new file mode 100644
index 00000000000..7521bafb9d4
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/fetch-api-error-handling/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Implement error handling when using the Fetch API
+description: Catching errors when working with the Fetch API.
+authors:
+  - umarhansa
+date: 2022-05-23
+---
+
+This article demonstrates some error handling approaches when working with the [Fetch API](/learn/pwa/serving/). The Fetch API lets you make a request to a remote network resource. When you make a remote network call, your web page becomes subject to a variety of potential network errors.
+
+The following sections describe potential errors and describe how to write code that provides a sensible level of functionality that is resilient to errors and unexpected network conditions. Resilient code keeps your users happy and maintains a standard level of service for your website.
+
+## Anticipate potential network errors
+
+This section describes a scenario in which the user creates a new video named
+`"My Travels.mp4"` and then attempts to upload the video to a video-sharing website.
+
+When working with Fetch, it's easy to consider the [happy path](https://en.wikipedia.org/wiki/Happy_path) where the user successfully uploads the video. However, there are other paths that are not as smooth, but for which web developers must plan. Such (unhappy) paths can happen due to user error, through unexpected environmental conditions, or because of a bug on the video-sharing website.
+
+### Examples of user errors
+
+-  The user uploads an image file (such as JPEG) instead of a video file.
+-  The user begins uploading the wrong video file. Then, part way through the upload, the user specifies the correct video file for upload.
+-  The user accidentally clicks "Cancel upload" while the video is uploading.
+
+### Examples of environmental changes
+
+-  The internet connection goes offline while the video is uploading.
+-  The browser restarts while the video is uploading.
+-  The servers for the video-sharing website restart while the video is uploading.
+
+### Examples of errors with the video-sharing website
+
+-  The video-sharing website cannot handle a filename with a space. Instead of `"My Travels.mp4"`, it expects a name such as `"My_Travels.mp4"` or `"MyTravels.mp4"`.
+-  The video-sharing website cannot upload a video that exceeds the maximum acceptable file size.
+-  The video-sharing website does not support the video codec in the uploaded video.
+
+These examples can and do happen in the real world. You may have encountered such examples in the past! Let's pick one example from each of the previous categories, and discuss the following points:
+
+-  What is the default behavior if the video-sharing service cannot handle the given example?
+-  What does the user expect to happen in the example?
+-  How can we improve the process?
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th scope="row">Action</th>
+      <td>The user begins uploading the wrong video file. Then, part way through the upload, the user specifies the correct video file for upload.</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">What happens by default</th>
+      <td>The original file continues to upload in the background while the new file uploads at the same time.</td>
+    </tr>
+    <tr>
+      <th scope="row">What the user expects</th>
+      <td>The user expects the original upload to stop so that no extra internet bandwidth is wasted.</td>
+    </tr>
+    <tr>
+      <th scope="row">What can be improved</th>
+      <td>JavaScript cancels the Fetch request for the original file before the new file begins to upload.</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th scope="row">Action</th>
+      <th>The user loses their internet connection part way through uploading the video.</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">What happens by default</th>
+      <td>The upload progress bar appears to be stuck on 50%. Eventually, the Fetch API experiences a timeout and the uploaded data is discarded. When internet connectivity returns, the user has to reupload their file.</td>
+    </tr>
+    <tr>
+      <th scope="row">What the user expects</th>
+      <td>The user expects to be notified when their file cannot be uploaded, and they expect their upload to automatically resume at 50% when they are back online.</td>
+    </tr>
+    <tr>
+      <th scope="row">What can be improved</th>
+      <td>The upload page informs the user of internet connectivity issues, and reassures the user that the upload will resume when internet connectivity has resumed.</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<div class="table-wrapper scrollbar">
+<table>
+  <thead>
+    <tr>
+      <th scope="row">Action</th>
+      <th>The video-sharing website cannot handle a filename with a space. Instead of "My Travels.mp4", it expects names such as "My_Travels.mp4" or "MyTravels.mp4".</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">What happens by default</th>
+      <td>The user must wait for the upload to completely finish. Once the file is uploaded, and the progress bar reads "100%", the progress bar displays the message: "Please try again."</td>
+    </tr>
+    <tr>
+      <th scope="row">What the user expects</th>
+      <td>The user expects to be told of filename limitations before upload begins, or at least within the first second of uploading.</td>
+    </tr>
+    <tr>
+      <th scope="row">What can be improved</th>
+      <td>Ideally, the video-sharing service supports filenames with spaces. Alternative options are to notify the user of filename limitations before uploading begins. Or, the video-sharing service should reject the upload with a detailed error message.</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+## Handle errors with the Fetch API
+
+Note that the following code examples use [top-level `await`](https://v8.dev/features/top-level-await) ([browser support](https://caniuse.com/mdn-javascript_operators_await_top_level)) because this feature can simplify your code.
+
+### When the Fetch API throws errors
+
+This example uses a [`try`/`catch` block](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/try...catch) statement to catch any errors thrown within the `try` block. For example, if the Fetch API cannot fetch the specified resource, then an error is thrown. Within a `catch` block like this, take care to provide a [meaningful](https://developer.mozilla.org/docs/Glossary/Graceful_degradation) user experience. If a spinner, a common user interface that represents some sort of progress, is shown to the user, then you could take the following actions within a `catch` block:
+
+1. Remove the spinner from the page.
+1. Provide helpful messaging that explains what went wrong, and what options the user can take.
+1. Based on the available options, present a "Try again" button to the user.
+1. Behind the scenes, send the details of the error to your error-tracking service, or to the back-end. This action logs the error so it can be diagnosed at a later stage.
+
+```js
+try {
+  const response = await fetch('https://website');
+} catch (error) {
+  // TypeError: Failed to fetch
+  console.log('There was an error', error);
+}
+```
+
+At a later stage, while you diagnose the error that you logged, you can write a [test case](https://en.wikipedia.org/wiki/Test_case) to catch such an error before your users are aware something is wrong. Depending on the error, the test could be a unit, integration, or acceptance test.
+
+### When the network status code represents an error
+
+This code example makes a request to an HTTP testing service that always responds with the HTTP status code [`429 Too Many Requests`](https://developer.mozilla.org/docs/Web/HTTP/Status/429). Interestingly, the response does not reach the `catch` block. A 404 status, amongst certain other status codes, does not return [a network error](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful) but instead resolves normally.
+
+To check that the HTTP status code was successful, you can use any of the following options:
+
+-  Use the [`Response.ok`](https://developer.mozilla.org/docs/Web/API/Response/ok) property to determine whether the status code was in the range from `200` to `299`.
+-  Use the [`Response.status`](https://developer.mozilla.org/docs/Web/API/Response/status) property to determine whether the response was successful.
+-  Use any other metadata, such as [`Response.headers`](https://developer.mozilla.org/docs/Web/API/Response/headers), to assess whether the response was successful.
+
+```js
+let response;
+
+try {
+  response = await fetch('https://httpbin.org/status/429');
+} catch (error) {
+  console.log('There was an error', error);
+}
+
+// Uses the 'optional chaining' operator
+if (response?.ok) {
+  console.log('Use the response here!');
+} else {
+  console.log(`HTTP Response Code: ${response?.status}`)
+}
+```
+
+The best practice is to work with people in your organization and team to understand potential HTTP response status codes. Backend developers, developer operations, and service engineers can sometimes provide unique insight into possible edge cases that you might not anticipate.
+
+{% Aside %}
+Note from the author: I was recently scrolling through an infinite scrolling list on a website, trying to quickly reach the bottom. Eventually, the page seemed to break with no helpful messaging. Upon inspecting the network request via DevTools, it became clear that the HTTP status code error `429 Too Many Requests` was returned. In an ideal scenario, such internal errors are surfaced to the web page interface.
+{% endAside %}
+
+### When there is an error parsing the network response
+
+This code example demonstrates another type of error that can arise with parsing a response body. The [`Response`](https://developer.mozilla.org/docs/Web/API/Response) interface offers convenient methods to parse different types of data, such as text or JSON. In the following code, a network request is made to an HTTP testing service that returns an HTML string as the response body. However, an attempt is made to parse the response body as [JSON](https://developer.mozilla.org/docs/Web/API/Response/json), throwing an error.
+
+```js
+let json;
+
+try {
+  const response = await fetch('https://httpbin.org/html');
+  json = await response.json();
+} catch (error) {
+  if (error instanceof SyntaxError) {
+    // Unexpected token < in JSON
+    console.log('There was a SyntaxError', error);
+  } else {
+    console.log('There was an error', error);
+  }
+}
+
+if (json) {
+  console.log('Use the JSON here!', json);
+}
+```
+
+You must prepare your code to take in a variety of response formats, and verify that an unexpected response doesn't break the web page for the user.
+
+Consider the following scenario: You have a remote resource that returns a valid JSON response, and it is parsed successfully with the `Response.json()` method. It may happen that the service goes down. Once down, a [`500 Internal Server Error`](https://developer.mozilla.org/docs/Web/HTTP/Status/500) is returned. If appropriate error-handling techniques are not used during the parsing of JSON, this could break the page for the user because an unhandled error is thrown.
+
+### When the network request must be canceled before it completes
+
+This code example uses an [`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController) to cancel an in-flight request. An in-flight request is a network request that has started but has not completed.
+
+The scenarios where you may need to cancel an in-flight request can vary, but it ultimately depends on your use case and environment. The following code demonstrates how to pass an [`AbortSignal`](https://developer.mozilla.org/docs/Web/API/AbortSignal) to the Fetch API. The `AbortSignal` is attached to an `AbortController`, and the `AbortController` includes an [`abort()`](https://developer.mozilla.org/docs/Web/API/AbortController/abort) method, which signifies to the browser that the network request should be canceled.
+
+```js
+const controller = new AbortController();
+const signal = controller.signal;
+
+// Cancel the fetch request in 500ms
+setTimeout(() => controller.abort(), 500);
+
+try {
+  const url = 'https://httpbin.org/delay/1';
+  const response = await fetch(url, { signal });
+  console.log(response);
+} catch (error) {
+  // DOMException: The user aborted a request.
+  console.log('Error: ', error)
+}
+```
+
+## Conclusion
+
+One important aspect of handling errors is to define the various parts that can go wrong. For each scenario, make sure you have an appropriate fallback in place for the user. With regards to a fetch request, ask yourself questions such as:
+
+-  What happens if the target server goes down?
+-  What happens if Fetch receives an unexpected response?
+-  What happens if the user's internet connection fails?
+
+Depending on the complexity of your web page, you can also sketch out a flowchart which describes the functionality and user interface for different scenarios.
diff --git a/src/site/content/en/web-dev-basics-one/global-and-local-scope/index.md b/src/site/content/en/web-dev-basics-one/global-and-local-scope/index.md
new file mode 100644
index 00000000000..379ee2d71ed
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/global-and-local-scope/index.md
@@ -0,0 +1,246 @@
+---
+layout: post
+title: Global and local variable scope
+description: Learn about scope and how it works in JavaScript. 
+date: 2022-04-14
+---
+
+In this article, you'll learn about scope and how it works in JavaScript. 
+
+Scope is a fundamental concept in JavaScript and other programming languages that defines the context in which variables are accessed and used. It becomes more useful and applicable to your code as you continue to learn JavaScript and work more with variables. 
+
+Scope can help you:
+
+-  **Use memory more efficiently:** Scope provides the ability to load variables only when needed. If a variable is out of scope, you don't need to make it available to the code that's currently executing.
+-  **Find and fix bugs more easily:** Isolating variables with local scope makes it easier to troubleshoot bugs in your code because, unlike global variables, you can trust that code from an outside scope can't manipulate locally scoped variables.
+-  **Create small blocks of reusable code:** For example, you can write a [pure function](https://en.wikipedia.org/wiki/Pure_function) that doesn't rely on outside scope. You can easily move such a function elsewhere with minimal changes.
+
+## What is scope?
+
+A variable's scope determines from where within the code you can use a variable.
+
+JavaScript defines variables of global or local scope: 
+
+-  Variables with [global scope](https://developer.mozilla.org/docs/Glossary/Global_scope) are available from all other scopes within the JavaScript code.
+-  Variables with [local scope](https://developer.mozilla.org/docs/Glossary/Local_scope) are available only within a specific local context and are created by keywords, such as `var`, `let`, and `const`. If you use the `var`, `let` or `const` keywords to create a variable within a function, that variable has local scope.
+
+Later sections in this article discuss block and lexical scope:
+
+-  [Block scope](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#block_statement) variables are available locally to a block as determined by the location of the curly brackets where the block statement is defined. Only variables declared with the `let` or `const` keywords have block scope.
+-  [Lexical scope](https://developer.mozilla.org/docs/Web/JavaScript/Closures#lexical_scoping) uses the location where a variable is declared in the source code to determine where that variable is available. You use closures to give an enclosed function access to variables referenced in the outer scope known as the lexical environment.
+
+When a variable is accessed within its scope, JavaScript returns its assigned value or otherwise produces an error. 
+
+To declare a variable:
+
+-  Use the `var`, `const`, or `let` keywords to declare local or global-scope variables.
+-  Use the `const` or `let` keywords to declare block-scope variables.
+
+When you declare a `var` variable in a function, the declaration makes the variable available to the nearest enclosing function. You can't use the `var` keyword to declare variables with block scope.
+
+## Scope examples
+
+This example demonstrates global scope because the `greeting` variable is declared outside of any function or block, which makes its value available to all code in the current document:
+
+```js
+const greeting = 'hello';
+console.log(greeting); // 'hello'
+```
+
+In the global-scope example, the `greeting` variable is assigned a `hello` value. 
+
+This example demonstrates local scope because it declares the `greeting` variable with the `let` keyword within a function. The `greeting` variable is a locally scoped variable and isn't available outside the function.
+
+```js
+function greet() {
+  let greeting = 'Hello World!';
+  console.log(greeting);
+}
+```
+
+This example demonstrates block scope because it declares the `greeting` variable within a block so that the variable is accessible only inside the curly brackets:
+
+```js
+if (true) {
+   const greeting = 'hello';
+}
+
+console.log(greeting); // ReferenceError: greeting is not defined
+```
+
+Notice that when the `console.log` function tries to output the value of the `greeting` variable, JavaScript returns a `ReferenceError` error message instead of the expected `hello` message. Why? 
+
+An error is returned because the `greeting` variable has block scope and the nearest block is part of the `if` conditional statement. You can't access the `let` and `const` variables that you declare inside a block from outside the block. Thus, you can only access the `greeting` variable within the curly brackets, which specifies the block scope. 
+
+This example fixes the error because it moves the `console.log(message)` method inside the curly brackets. The updated code relocates the `console.log(message)` method inside the block.
+
+```js
+if (true) {
+   const greeting = 'hello';
+   console.log(greeting);
+}
+```
+
+## Types of scope
+
+### Global scope
+
+You can access variables with global scope from anywhere in the program.
+
+Consider an HTML file that imports two JavaScript files: `file-1.js` and `file-2.js`: 
+
+```js
+<script src="file-1.js"></script>
+<script src="file-2.js"></script>
+```
+
+In this example, the `globalMessage` variable has a global scope and it's written outside of a function. During run and execution, you can access the value of the `globalMessage` variable from anywhere in the JavaScript program. 
+
+You can see the contents of the `file-1.js` and `file-2.js` files in this code snippet. Notice the availability of the `globalMessage` variable in both files.
+
+```js
+// file-1.js
+function hello() {
+	var localMessage = 'Hello!';
+}
+
+var globalMessage = 'Hey there!';
+
+// file-2.js
+console.log(localMessage); // localMessage is not defined
+console.log(globalMessage); // Hey there!
+```
+
+There's another type of scope that's not heavily discussed in this article. If you create a variable within a JavaScript [module](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) but outside of a function or block, it doesn't have global scope, but rather module scope. Variables with module scope are available anywhere within the current module, but aren't available from other files or modules. To make a module-scoped variable available to other files, you must [export](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) it from the module where it's created and then [import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) it from the module that needs to access the variable.
+
+### Local scope and function scope
+
+When you create variables in a JavaScript function with the `var`, `let` or `const` keywords, the variables are local to the function, so you can only access them from within the function. Local variables are created when a function starts and are effectively deleted when the function execution finishes.
+
+This example declares the `total` variable in the `addNumbers()` function. You can only access the `a`, `b,` and `total` variables within the `addNumbers()` function. 
+
+```js
+function addNumbers(a, b) {
+	const total = a + b;
+}
+
+addNumbers(3, 4);
+```
+
+You can use the `let` and `const` keywords to name variables. When you use the `let` keyword, JavaScript can update the variable. However, with the `const` keyword, the variable remains constant.
+
+```js
+var variable1 = 'Declared with var';
+var variable1 = 'Redeclared with var';
+variable1; // Redeclared with var
+
+let variable2 = 'Declared with let. Cannot be redeclared.';
+variable2 = 'let cannot be redeclared, but can be updated';
+variable2; // let cannot be redeclared, but can be updated
+
+const variable3 = 'Declared with const. Cannot be redeclared or updated';
+variable3; // Declared with const. Cannot be redeclared or updated
+```
+
+### Block scope
+
+[Blocks](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/block) are used to group a single statement or a set of statements together. You can use the `const` or `let` keywords to declare a block-scope local variable. Note that you can't use the `var` keyword to declare variables with block scope.
+
+For example, in this block, the scope for the `name` variable and its `"Elizabeth"` value is contained within the curly braces. Variables within a block scope aren't available outside of the block.
+
+```js
+{
+	const name = "Elizabeth";
+}
+```
+
+You can use block-scoped variables within `if`, `for`, or `while` statements.
+
+Take note of the two `for` loops within this code snippet. One `for` loop uses the `var` keyword to declare the initializer variable, which increments through the numbers `0`, `1`, and `2`. The other `for` loop uses the `let` keyword to declare the initializer variable. 
+
+```js
+for (var i = 0; i < 2; i++) {
+	// ...
+}
+
+console.log(i); // 2
+
+for (let j = 0; j < 2; j++) {
+	// ...
+}
+
+console.log(j); // The j variable isn't defined.
+```
+
+In the previous code example, you may notice that the `i` variable in the first `for` loop leaked outside the `for` loop and still retains a `2` value because the `var` keyword doesn't use block scope. The issue is fixed in the second `for` loop in which the `j` variable declared with the `let` keyword is scoped to the block of the `for` loop and doesn't exist after the `for` loop finishes.
+
+## Reuse of a variable name in a different scope
+
+Scope can isolate a variable within a function, even when you reuse the same variable name elsewhere in a different scope. 
+
+This example shows you how the use of scope lets you reuse the same variable name in different functions:
+
+```js
+function listOne() {
+    let listItems = 10;
+    console.log(listItems); // 10
+}
+
+function listTwo() {
+   let listItems = 20;
+   console.log(listItems); // 20
+}
+
+listOne();
+listTwo();
+```
+
+The `listItems` variables in the `listOne()` and `listTwo()` functions are assigned the expected values and so don't clash with each other.
+
+## Closures and lexical scope
+
+[Closures](https://developer.mozilla.org/docs/Web/JavaScript/Closures) refer to an enclosed function in which an inner function can access the outer function scope, which is also known as the lexical environment. Thus, in JavaScript, you use closures to let functions reference the outer lexical environment, which lets code inside a function reference variables declared outside the function. In fact, you can code a chain of references to outer lexical environments so that a function is called by a function, which in turn is called by another function. 
+
+In this example, the code forms a closure with the lexical environment that's created when the `outer()` function is invoked, which closes over the `hello` variable. Thus, the `hello` variable is used within the `setTimeout` callback function. 
+
+```js
+function outer() {
+    const hello = 'world';
+
+    setTimeout(function () {
+        console.log('Within the closure!', hello)
+    }, 100);
+}
+
+outer();
+```
+
+With lexical scope, the scope is determined during compilation of the source code, not at runtime. To learn more about the lexical environment, see [Lexical scoping and Closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures#lexical_scoping).  
+
+## Modules
+
+JavaScript [modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) help to organize JavaScript code. Used properly, they provide an effective structure to your codebase and help with code reuse. Rather than use global variables to share variables across different files, JavaScript modules provide a technique to [export](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) and [import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) variables.
+
+```js
+// hello.js file
+function hello() {
+  return 'Hello world!';
+}
+
+export { hello };
+
+// app.js file
+import { hello } from './hello.js';
+
+console.log(hello()); // Hello world!
+```
+
+## Scope visualizer demo
+
+Scope is a fundamental concept that every JavaScript developer should understand. To better understand the scope system, you can try to write your own code with the [JS Scope Visualizer](https://js-scope-visualizer.firebaseapp.com/#visualizer). The demo uses coloration in the code to help you visualize JavaScript scopes.
+
+## Conclusion
+
+This article introduces different types of scope. JavaScript scope is one of the more advanced concepts within web development, so it's great that you have read through this content and taken time to understand this topic.
+
+Scope is not a user-facing feature. It only affects the web developer who writes code, but knowledge of how scope works can help you to fix bugs when they arise.
\ No newline at end of file
diff --git a/src/site/content/en/web-dev-basics-one/index.md b/src/site/content/en/web-dev-basics-one/index.md
new file mode 100644
index 00000000000..ffd2ef82088
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+date: 2021-12-15
+pathName: web-dev-basics-one
+draft: true
+---
diff --git a/src/site/content/en/web-dev-basics-one/js-libraries-vs-frameworks/index.md b/src/site/content/en/web-dev-basics-one/js-libraries-vs-frameworks/index.md
new file mode 100644
index 00000000000..93a4f921995
--- /dev/null
+++ b/src/site/content/en/web-dev-basics-one/js-libraries-vs-frameworks/index.md
@@ -0,0 +1,271 @@
+---
+layout: post
+title: The difference between JavaScript libraries and frameworks
+description: Understand the differences between frameworks and libraries in the context of a client-side JavaScript environment. 
+authors:
+  - umarhansa
+date: 2022-05-23
+---
+
+This article teaches you about the differences between frameworks and libraries in the context of a client-side JavaScript environment, which is the code that runs in your web browser. However, some of the points raised in this article also apply to other environments because libraries and frameworks are part of many software engineering fields, such as native mobile app development.
+
+The discussions in this post focus on the qualitative differences rather than the quantitative differences between libraries and frameworks. For example:
+
+-  **Quantitative:** Frameworks typically adhere to the [inversion of control](https://en.wikipedia.org/wiki/Inversion_of_control) principle.
+-  **Qualitative:** The framework experience can appeal more to future employers when you hunt for jobs.
+
+## Why learn about libraries and frameworks?
+
+JavaScript library and framework usage is prolific across the web. Every other website seems to use some third-party code as part of its JavaScript resources. Web page [weight is getting worse](https://almanac.httparchive.org/en/2021/page-weight#fig-3) with time, which [affects users](https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/). [JavaScript](https://almanac.httparchive.org/en/2021/javascript) is a large contributing factor toward overall page weight, and it's this same JavaScript that often comprises third-party libraries and frameworks.
+
+It's not good enough to say, "Stop using JavaScript frameworks," because frameworks provide a big benefit to developers. Frameworks can help you to code efficiently and deliver features quickly, among other benefits. Instead, you should educate yourself so that you can make an informed decision when the time arises. 
+
+"Should I use a library or framework today?" is an uncommon question to ask yourself. Libraries and frameworks are two very different things. However, libraries and frameworks are often conflated and the more knowledge you have about the two, the more likely you are to make educated decisions about their use.
+
+## Examples of libraries and frameworks
+
+You might notice third-party code by other names, such as widgets, plugins, polyfills, or packages. However, they all typically fall into the category of a library or a framework. Basically, the difference between the two can be summarized as follows:
+
+-  For a library, your app code calls the library code.
+-  For a framework, [your app code is called by the framework](https://en.wikipedia.org/wiki/Inversion_of_control).
+
+### Library
+
+Libraries tend to be simpler than frameworks and offer a narrow scope of functionality. If you pass an input to a method and receive an output, you probably used a library.
+
+Look at this example of the [`lodash`](https://lodash.com/) library:
+
+```js
+import lodash from 'lodash'; // [1]
+const result = lodash.capitalize('hello'); // [2]
+console.log(result); // Hello
+```
+
+As is the case with many libraries, it's practical to read through this code and understand what it does. [There's very little magic involved](https://en.wikipedia.org/wiki/Magic_(programming)):
+
+1. An `import` statement imports the lodash library into the JavaScript program.
+1. The `capitalize()` method is invoked. 
+1. A single argument is passed to the method. 
+1. The return value is captured in a variable.
+
+### Framework
+
+Frameworks tend to be bigger than libraries and contribute more to overall page weight. In fact, a framework can include a library. 
+
+This example shows a plain framework without a library and uses [Vue](https://vuejs.org/), which is a [popular](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking) JavaScript framework:
+
+```html
+<!-- index.html -->
+<div id="main">
+  {{ '{{ message }}' }}
+</div>
+
+<script type="module">
+import Vue from './node_modules/vue/dist/vue.esm.browser.js';
+
+new Vue({
+  el: '#main',
+  data: {
+    message: 'Hello, world'
+  }
+});
+</script>
+```
+
+If you compare this framework example to the earlier library example, you might notice these differences:
+
+-  The framework code encompasses multiple techniques and abstracts them away into its own opinionated API.
+-  Developers don't have full control over how and when operations occur. For example, how and when Vue writes the `'Hello, world'` string to the page is abstracted away from you.
+-  The instantiation of the `Vue` class carries some [side effects](https://simple.wikipedia.org/wiki/Side_effect_(computer_science)), which are common when you use frameworks, whereas a library may offer [pure functions](https://en.wikipedia.org/wiki/Pure_function).
+-  The framework prescribes a particular HTML template system rather than using your own.
+-  If you read further into the Vue framework documentation or most other framework documentations, you can see how frameworks prescribe architectural patterns that you can use. JavaScript frameworks take some cognitive burden away from you because you don't have to figure this out yourself.
+
+## When to use a library versus a framework
+
+After you read the comparisons between libraries and frameworks, you may begin to understand when to use one or the other:
+
+-  A framework can reduce complexity for you, the developer. As discussed, a framework can abstract away logic, behavior, and even architectural patterns. It's especially useful when you begin a new project. A library _can_ help with complexity, but typically focuses on code reuse.
+-  Framework authors want you to be productive and often develop extra tools, debugging software, and comprehensive guides among other resources to help you use a framework effectively. Library authors also want you to be productive, but specialized tools are uncommon in libraries.
+-  Most frameworks provide a functional starting point, such as a skeleton or boilerplate, to help you build web apps quickly. A library becomes part of your already established codebase.
+-  In general, frameworks introduce some complexity to your codebase. The complexity isn't always obvious at the start, but can reveal itself over time.
+
+As a reminder, you don't typically compare a library with a framework because they're different things that achieve different tasks. However, the more knowledge you have about the two, the more empowered you are to decide which is best for you. The decision to use a framework or library ultimately depends on your requirements.
+
+## Swapability
+
+You won't change your library or framework every week. However, it's good practice to understand the downsides of a package that locks you into its ecosystem. It's also recommended that you understand that the developer who decides to use a third-party package is somewhat responsible for the creation of a loose coupling between the package and the app source code.
+
+A package that's tied to the source code is harder to remove and swap for another package. You may need to swap a package when:
+
+-  You must make updates to a package that's no longer maintained. 
+-  You discover that the package is too buggy to work with.
+-  You learn about a new package that meets your needs better.
+-  Your product requirements change and the package isn't needed anymore.
+
+Consider this example:
+
+```js
+// header.js file
+import color from '@package/set-color';
+color('header', 'dark');
+
+// article.js file
+import color from '@package/set-color';
+color('.article-post', 'dark');
+
+// footer.js file
+import color from '@package/set-color';
+color('.footer-container', 'dark');
+```
+
+The previous example uses the third-party `@package/set-color` package across three separate files. If you work on this code and need to replace the third-party package, you must update the code in three places.
+
+Alternatively, you can simplify maintenance and abstract the library usage to one place, which you can see in this example:
+
+```js
+// lib/set-color.js file
+import color from '@package/set-color';
+
+export default function color(element, theme = 'dark') {
+  color(element, theme);
+}
+
+// header.js file
+import color from './lib/set-color.js';
+color('header');
+
+// article.js file
+import color from './lib/set-color.js';
+color('.article-post');
+
+// footer.js file
+import color from './lib/set-color.js';
+color('.footer-container');
+```
+
+In the previous example, direct library usage is abstracted away. Thus, if you must swap out the third-party package, you only update one file. In addition, the code is now easier to work with because the internal `set-color.js` file sets a default color theme to use.
+
+{% Aside %}
+When you read the old code and new code, you may be unconvinced with the new code and ask questions such as:
+
+- Isn't the new code more complex because there's an additional layer of indirection? 
+- What if I never replace the package? How can I justify the time taken to abstract code away?
+
+These are valid questions and the answers ultimately depend on the use case. With some analysis or simple prototyping, you can weigh the pros and cons to answer such questions, but often there isn't a right or wrong answer!
+{% endAside %}
+
+## Ease of use
+
+A framework may have a complex API, but the framework could offer developer tools that make it easier to use overall. Ease of use is based on many factors and can be highly subjective. A framework can be hard to use because:
+
+-  The framework has an inherently complex API.
+-  The framework is poorly documented, and requires a lot of trial and error to solve problems.
+-  The framework uses techniques that are unfamiliar to you and your team.
+
+Frameworks can mitigate against these challenges through common best practices, such as these:
+
+-  The framework offers developer and diagnostic tools to make debugging easier.
+-  The framework has an active community of developers who collaborate on free documentation, guides, tutorials, and videos. After you consume this content, you're productive with the framework.
+-  The framework offers an API that follows common [coding conventions](https://en.wikipedia.org/wiki/Coding_conventions). You're productive with the framework because you learned such conventions previously and have an increased familiarity with coding styles.
+
+While these points are commonly attributed to frameworks, they can also be attributed to libraries. For example, the [D3.js](https://d3js.org/) JavaScript library is powerful and has a large ecosystem that offers workshops, guides, and documentation among other resources, all of which impact its ease of use.
+
+Additionally, a framework typically prescribes an architecture for your web app while a library is typically compatible with your existing architecture, whatever it might be.
+
+## Performance
+
+In general, frameworks can affect performance more than libraries, although there are exceptions to this case. Web performance is a huge area with many topics, so these sections touch on two topics of note: tree shaking and software updates.
+
+### Tree shaking
+
+Bundling is only one facet of web performance, but it has a big performance effect, especially with larger libraries. The use of tree shaking during import and export helps performance because it finds and prunes code that's unnecessary to the app.
+
+When you bundle JavaScript code, there's a useful step known as tree shaking that's a valuable performance [optimization](https://developer.mozilla.org//docs/Glossary/Tree_shaking) that you can make to your code, although it's easier to do with libraries than frameworks. 
+
+When you import third-party code into your source code, you typically bundle the code into one or a few output files. For example, the `header.js`, `footer.js`, and `sidebar.js` files are all combined into the `output.js` file, which is the output file that you load in your web app. 
+
+To better understand tree shaking, consider these code examples:
+
+```js
+// library.js file
+export function add(a, b) {
+  return a + b;
+}
+
+export function subtract(a, b) {
+  return a - b;
+}
+
+// main.js file
+import {add} from './library.js';
+
+console.log(add(7, 10));
+```
+
+For the purpose of demonstration, the `library.js` code sample is kept intentionally small compared to what you might find in the real world, where the library can be thousands of lines long.
+
+A naive bundle process may export the code with this output:
+
+```js
+// output.js file
+function add(a, b) {
+  return a + b;
+}
+
+function subtract(a, b) {
+  return a - b;
+}
+
+console.log(add(7, 10));
+```
+
+Even though the `subtract()` function isn't needed in this app, it's still included in the final bundle. Unnecessary code like this increases the download size, parse and compile time, and execution costs that your users must pay. A basic tree-shaking approach removes the dead code and produces this output:
+
+```js
+// output.js file
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add(7, 10));
+```
+
+Notice that the code is shorter and more succinct. In this example, the performance improvement is negligible, but in a real-world app where the library is thousands of lines long, the performance effect can be much more significant. Interestingly, modern bundle tools, such as Parcel, Webpack, and Rollup go a step further because they combine minification and tree shaking to create a highly optimized bundle. To demonstrate the effectiveness of bundle tools, we used [Parcel](https://parceljs.org/) to create a bundle file with the previous code examples. Parcel removed all unused code and exported this single module: 
+
+```js
+console.log(7+10);
+```
+
+Parcel is smart enough to remove import statements, function definitions, and behavior among other items to create highly optimized code.
+
+Bundling is only one facet of web performance, but it has a big performance effect, especially with larger libraries. Tree shaking is typically simpler to do with libraries than with frameworks. 
+
+### Software updates
+
+For many libraries and frameworks, software updates add functionality, fix bugs, and ultimately grow in size over time. It's not always necessary to download updates, but if the updates include bug fixes, desired feature enhancements, or security fixes, then you should probably update. However, the more data you send over the wire, the less performant your app and the greater the performance effect on your user experience.
+
+If a library grows in size, you can use tree shaking to mitigate the growth. Alternatively, you can use a smaller alternative to the JavaScript library. For more information, see [Swapability](#swapability).
+
+If a framework grows in size, not only is tree shaking more of a challenge, but it can be harder to swap out one framework for another. For more information, see [Swapability](#swapability). 
+
+{% Aside %}
+Framework authors and maintainers invest large efforts to optimize their code so you and your users can benefit. For many popular frameworks and libraries, performance fixes and improvements are often shipped with the software updates. Performance doesn't always get worse over time!</th>
+{% endAside%}
+
+## Employability
+
+It's a bit of an open secret that many companies have hard requirements for developers who know a particular framework. They may disregard your knowledge of web fundamentals and focus only on your specific knowledge of a certain JavaScript framework! Right or wrong, this is the reality for many jobs.
+
+Knowledge of a few JavaScript libraries won't harm your job application, but there's little guarantee that it'll make you stand out. If you know a few popular JavaScript frameworks very well, there's a good chance that employers see this knowledge as favorable in the current job market for web developers. Some large enterprise organizations are stuck with very old JavaScript frameworks and may even be desperate for candidates who are comfortable with such frameworks.
+
+You can use this open secret to your advantage. However, approach the job market with caution and with these considerations in mind:
+
+-  Remember that if you spend a large amount of time in your career with only one framework, you may miss out on learning experiences with other, more modern frameworks.
+-  Consider a developer who doesn't solidly understand software development or web development fundamentals, yet is hired as a framework developer. This developer doesn't write effective code, and you may find it daunting or overwhelming to work on such a codebase. In some cases, this scenario can lead to burnout. For example, you may have to refactor code or performance-tune the code because it's slow.
+-  When you learn web development, the best path is to begin with a heavy focus on the fundamentals of web development, software development, and software engineering. Such a strong foundation helps you to pick up any JavaScript framework quickly and effectively.
+
+## Conclusion
+
+Well done on your hard work in understanding how JavaScript frameworks and libraries compare. You won't pick frameworks or libraries often unless you work on [greenfield](https://en.wikipedia.org/wiki/Greenfield_project) projects or as a consultant. However, when such decisions do arise, the more knowledge you have on the subject, the better informed your decision.
+
+As you have learned, the choice of framework you make—and in some cases, the choice of library—can significantly affect your development experience and end users, such as with performance.
\ No newline at end of file
diff --git a/src/site/content/en/webassembly/compiling-mkbitmap-to-webassembly/index.md b/src/site/content/en/webassembly/compiling-mkbitmap-to-webassembly/index.md
new file mode 100644
index 00000000000..c0007b739af
--- /dev/null
+++ b/src/site/content/en/webassembly/compiling-mkbitmap-to-webassembly/index.md
@@ -0,0 +1,483 @@
+---
+layout: post
+title: Compiling mkbitmap to WebAssembly
+authors:
+  - thomassteiner
+date: 2023-06-29
+# updated: 2023-06-29
+description: >
+  The mkbitmap C program reads an image and applies one or more of the following operations to it, in this order: inversion, highpass filtering, scaling, and thresholding. Each operation can be individually controlled and turned on or off. This article shows how to compile mkbitmap to WebAssembly.
+tags:
+  - webassembly
+---
+
+In [What is WebAssembly and where did it come from?](/what-is-webassembly/), I explained how we ended up with the WebAssembly of today. In this article, I will show you my approach of compiling an existing C program, `mkbitmap`, to WebAssembly. It's more complex than the [hello world](/what-is-webassembly/#compiling-to-webassembly) example, as it includes working with files, communicating between the WebAssembly and JavaScript lands, and drawing to a canvas, but it's still manageable enough to not overwhelm you.
+
+The article is written for web developers who want to learn WebAssembly and shows step-by-step how you might proceed if you wanted to compile something like `mkbitmap` to WebAssembly. As a fair warning, not getting an app or library to compile on the first run is completely normal, which is why some of the steps described below ended up not working, so I needed to backtrack and try again differently. The article doesn't show the magic final compilation command as if it had dropped from the sky, but rather describes my actual progress, some frustrations included.
+
+## About `mkbitmap`
+
+The [`mkbitmap`](https://potrace.sourceforge.net/mkbitmap.1.html) C program reads an image and applies one or more of the following operations to it, in this order: inversion, highpass filtering, scaling, and thresholding. Each operation can be individually controlled and turned on or off. The principal use of `mkbitmap` is to convert color or grayscale images into a format suitable as input for other programs, particularly the tracing program [`potrace`](https://potrace.sourceforge.net/potrace.1.html) that forms the basis of [SVGcode](/svgcode/). As a preprocessing tool, `mkbitmap` is particularly useful for converting scanned line art, such as cartoons or handwritten text, to high-resolution bilevel images.
+
+You use `mkbitmap` by passing it a number of options and one or multiple file names. For all details, see the tool's [man page](https://potrace.sourceforge.net/mkbitmap.1.html):
+
+```bash
+$ mkbitmap [options] [filename...]
+```
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/IxTMIGl9KB2HQCI57VVk.png", alt="Cartoon image in color.", width="239", height="235" %}
+  <figcaption>The original image (<a href="https://potrace.sourceforge.net/mkbitmap.html">Source</a>).</figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/EGN9P3V1AK8BneYniU1T.png", alt="Cartoon image converted to grayscale after preprocessing.", width="478", height="470" %}
+  <figcaption>First scaled, then thresholded: <code>mkbitmap -f 2 -s 2 -t 0.48</code> (<a href="https://potrace.sourceforge.net/mkbitmap.html">Source</a>).</figcaption>
+</figure>
+
+## Get the code
+
+The first step is to obtain the source code of `mkbitmap`. You can find it on the [project's website](https://potrace.sourceforge.net/#downloading). At the time of this writing, [potrace-1.16.tar.gz](https://potrace.sourceforge.net/download/1.16/potrace-1.16.tar.gz) is the latest version.
+
+## Compile and install locally
+
+The next step is to compile and install the tool locally to get a feeling for how it behaves. The [`INSTALL`](https://potrace.sourceforge.net/INSTALL) file contains the following instructions:
+
+ 1. `cd` to the directory containing the package's source code and type
+    `./configure` to configure the package for your system.
+
+    Running `configure` might take a while.  While running, it prints
+    some messages telling which features it is checking for.
+  1. Type `make` to compile the package.
+  1. Optionally, type `make check` to run any self-tests that come with
+     the package, generally using the just-built uninstalled binaries.
+  1. Type `make install` to install the programs and any data files and
+     documentation.  When installing into a prefix owned by root, it is
+     recommended that the package be configured and built as a regular
+     user, and only the `make install` phase executed with root
+     privileges.
+
+ By following these steps, you should end up with two executables, `potrace` and `mkbitmap`—the latter is the focus of this article. You can verify it worked correctly by running `mkbitmap --version`. Here is the output of all four steps from my machine, heavily trimmed for brevity:
+
+Step 1, `./configure`:
+
+ ```bash
+ $ ./configure
+checking for a BSD-compatible install... /usr/bin/install -c
+checking whether build environment is sane... yes
+checking for a thread-safe mkdir -p... ./install-sh -c -d
+checking for gawk... no
+checking for mawk... no
+checking for nawk... no
+checking for awk... awk
+checking whether make sets $(MAKE)... yes
+[…]
+config.status: executing libtool commands
+```
+
+Step 2, `make`:
+
+```bash
+$ make
+/Applications/Xcode.app/Contents/Developer/usr/bin/make  all-recursive
+Making all in src
+clang -DHAVE_CONFIG_H -I. -I..     -g -O2 -MT main.o -MD -MP -MF .deps/main.Tpo -c -o main.o main.c
+mv -f .deps/main.Tpo .deps/main.Po
+[…]
+make[2]: Nothing to be done for `all-am'.
+```
+
+Step 3, `make check`:
+
+```bash
+$ make check
+Making check in src
+make[1]: Nothing to be done for `check'.
+Making check in doc
+make[1]: Nothing to be done for `check'.
+[…]
+============================================================================
+Testsuite summary for potrace 1.16
+============================================================================
+# TOTAL: 8
+# PASS:  8
+# SKIP:  0
+# XFAIL: 0
+# FAIL:  0
+# XPASS: 0
+# ERROR: 0
+============================================================================
+make[1]: Nothing to be done for `check-am'.
+```
+
+Step 4, `sudo make install`:
+
+```bash
+$ sudo make install
+Password:
+Making install in src
+ .././install-sh -c -d '/usr/local/bin'
+  /bin/sh ../libtool   --mode=install /usr/bin/install -c potrace mkbitmap '/usr/local/bin'
+[…]
+make[2]: Nothing to be done for `install-data-am'.
+```
+
+To check if it worked, run `mkbitmap --version`:
+
+```bash
+$ mkbitmap --version
+mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.
+ ```
+
+If you get the version details, you have successfully compiled and installed `mkbitmap`. Next, make the equivalent of these steps work with WebAssembly.
+
+{% Aside 'warning' %}
+If you followed the preceding platform compilation steps, run `make clean` before proceeding with the WebAssembly compilation steps to remove previous compile artifacts.
+{% endAside %}
+
+## Compile `mkbitmap` to WebAssembly
+
+[Emscripten](http://emscripten.org/) is a tool for compiling C/C++ programs to WebAssembly. Emscripten's [Building Projects](https://Emscripten.org/docs/compiling/Building-Projects.html) documentation states the following:
+
+> Building large projects with Emscripten is very easy. Emscripten provides two simple scripts that configure your makefiles to use `emcc` as a drop-in replacement for `gcc`—in most cases the rest of your project's current build system remains unchanged.
+
+The documentation then goes on (a little edited for brevity):
+
+> Consider the case where you normally build with the following commands: <br>
+> <br>
+> `./configure` <br>
+> `make` <br>
+> <br>
+> To build with Emscripten, you would instead use the following commands: <br>
+> <br>
+> `emconfigure ./configure`<br>
+> `emmake make`
+
+So essentially `./configure` becomes `emconfigure ./configure` and `make` becomes `emmake make`. The following demonstrates how to do this with `mkbitmap`.
+
+Step 0, `make clean`:
+
+```bash
+$ make clean
+Making clean in src
+ rm -f potrace mkbitmap
+test -z "" || rm -f
+rm -rf .libs _libs
+[…]
+rm -f *.lo
+```
+
+Step 1, `emconfigure ./configure`:
+
+```bash
+$ emconfigure ./configure
+configure: ./configure
+checking for a BSD-compatible install... /usr/bin/install -c
+checking whether build environment is sane... yes
+checking for a thread-safe mkdir -p... ./install-sh -c -d
+checking for gawk... no
+checking for mawk... no
+checking for nawk... no
+checking for awk... awk
+[…]
+config.status: executing libtool commands
+```
+
+Step 2, `emmake make`:
+
+```bash
+$ emmake make
+make: make
+/Applications/Xcode.app/Contents/Developer/usr/bin/make  all-recursive
+Making all in src
+/opt/homebrew/Cellar/emscripten/3.1.36/libexec/emcc -DHAVE_CONFIG_H -I. -I..     -g -O2 -MT main.o -MD -MP -MF .deps/main.Tpo -c -o main.o main.c
+mv -f .deps/main.Tpo .deps/main.Po
+[…]
+make[2]: Nothing to be done for `all'.
+```
+
+If everything went well, there should now be `.wasm` files somewhere in the directory. You can find them by running `find . -name "*.wasm"`:
+
+```bash
+$ find . -name "*.wasm"
+./a.wasm
+./src/mkbitmap.wasm
+./src/potrace.wasm
+```
+
+The two last ones look promising, so `cd` into the `src/` directory. There are now also two new corresponding files, `mkbitmap` and `potrace`. For this article, only `mkbitmap` is relevant. The fact that they don't have the `.js` extension is a little confusing, but they are in fact JavaScript files, verifiable with a quick `head` call:
+
+```bash
+$ cd src/
+$ head -n 20 mkbitmap
+// include: shell.js
+// The Module object: Our interface to the outside world. We import
+// and export values on it. There are various ways Module can be used:
+// 1. Not defined. We create it here
+// 2. A function parameter, function(Module) { ..generated code.. }
+// 3. pre-run appended it, var Module = {}; ..generated code..
+// 4. External script tag defines var Module.
+// We need to check if Module already exists (e.g. case 3 above).
+// Substitution will be replaced with actual code on later stage of the build,
+// this way Closure Compiler will not mangle it (e.g. case 4. above).
+// Note that if you want to run closure, and also to use Module
+// after the generated code, you will need to define   var Module = {};
+// before the code. Then that object will be used in the code, and you
+// can continue to use Module afterwards as well.
+var Module = typeof Module != 'undefined' ? Module : {};
+
+// --pre-jses are emitted after the Module integration code, so that they can
+// refer to Module (if they choose; they can also define Module)
+```
+
+Rename the JavaScript file to `mkbitmap.js` by calling `mv mkbitmap mkbitmap.js` (and `mv potrace potrace.js` respectively if you want).
+Now it's time for the first test to see if it worked by executing the file with Node.js on the command line by running `node mkbitmap.js --version`:
+
+```bash
+$ node mkbitmap.js --version
+mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.
+```
+
+You have successfully compiled `mkbitmap` to WebAssembly. Now the next step is to make it work in the browser.
+
+## `mkbitmap` with WebAssembly in the browser
+
+Copy the `mkbitmap.js` and the `mkbitmap.wasm` files to a new directory called `mkbitmap` and create an `index.html` HTML boilerplate file that loads the `mkbitmap.js` JavaScript file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>mkbitmap</title>
+  </head>
+  <body>
+    <script src="mkbitmap.js"></script>
+  </body>
+</html>
+```
+
+Start a local server that serves the `mkbitmap` directory and open it in your browser. You should see a prompt that asks you for input. This is as expected, since, [according to the tool's man page](https://potrace.sourceforge.net/mkbitmap.1.html#:~:text=A%20filename%20of%20%22%2D%22%20may%20be%20given%20to%20specify%20reading%20from%20standard%20input), _"[i]f no filename arguments are given, then mkbitmap acts as a filter, reading from standard input"_, which for Emscripten by default is a [`prompt()`](https://developer.mozilla.org/docs/Web/API/Window/prompt).
+
+{% Aside 'warning' %}
+Serving from the `file:` protocol doesn't work for `.wasm` files, you really need to start a local server.
+{% endAside %}
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/DbDQJnxA4GylWKZcmlJK.png", alt="The mkbitmap app showing a prompt that asks for input.", width="800", height="600" %}
+
+### Prevent automatic execution
+
+To stop `mkbitmap` from executing immediately and instead make it wait for user input, you need to understand Emscripten's [`Module`](https://emscripten.org/docs/api_reference/module.html) object. `Module` is a global JavaScript object with attributes that Emscripten-generated code calls at various points in its execution.
+You can provide an implementation of `Module` to control the execution of code.
+When an Emscripten application starts up, it looks at the values on the `Module` object and applies them.
+
+In the case of `mkbitmap`, set [`Module.noInitialRun`](https://emscripten.org/docs/api_reference/module.html#Module.noInitialRun) to `true` to prevent the initial run that caused the prompt to appear. Create a script called `script.js`, include it _before_ the `<script src="mkbitmap.js"></script>` in `index.html` and add the following code to `script.js`. When you now reload the app, the prompt should be gone.
+
+```js
+var Module = {
+  // Don't run main() at page load
+  noInitialRun: true,
+};
+```
+
+### Create a modular build with some more build flags
+
+To provide input to the app, you can use Emscripten's [file system](https://emscripten.org/docs/api_reference/Filesystem-API.html) support in `Module.FS`. The [Including File System Support](https://emscripten.org/docs/api_reference/Filesystem-API.html#including-file-system-support) section of the documentation states:
+
+> Emscripten decides whether to include file system support automatically. Many programs don't need files, and file system support is not negligible in size, so Emscripten avoids including it when it doesn't see a reason to. That means that if your C/C++ code does not access files, then the `FS` object and other file system APIs will not be included in the output. And, on the other hand, if your C/C++ code does use files, then file system support will be automatically included.
+
+Unfortunately `mkbitmap` is one of the cases where Emscripten does not automatically include file system support, so you need to explicitly tell it to do so. This means you need to follow the `emconfigure` and `emmake` steps described previously, with a couple more flags set via a `CFLAGS` argument. The following flags may come in useful for other projects, too.
+
+{% Aside %}
+When looking at the following commands, you might wonder about the missing space after `-s` that you may see in other online tutorials. Some `-s` options may require quoting, or the space between `-s` and the next argument may confuse `CMake`. To avoid those problems, I recommend you generally use the `-sX=Y` notation, that is, without a space.
+{% endAside %}
+
+- Set [`-sFILESYSTEM=1`](https://github.com/emscripten-core/emscripten/blob/fd9b4862cd3729b58ecc0f26ce03f9b9513615b0/src/settings.js#L918-L926) so file system support is included.
+- Set [`-sEXPORTED_RUNTIME_METHODS=FS,callMain`](https://github.com/emscripten-core/emscripten/blob/fd9b4862cd3729b58ecc0f26ce03f9b9513615b0/src/settings.js#L862-L869) so `Module.FS` and `Module.callMain` are exported.
+- Set [`-sMODULARIZE=1`](https://github.com/emscripten-core/emscripten/blob/fd9b4862cd3729b58ecc0f26ce03f9b9513615b0/src/settings.js#L1162-L1224) and [`-sEXPORT_ES6`](https://github.com/emscripten-core/emscripten/blob/fd9b4862cd3729b58ecc0f26ce03f9b9513615b0/src/settings.js#L1226-L1229) to generate a modern ES6 module.
+- Set [`-sINVOKE_RUN=0`](https://github.com/emscripten-core/emscripten/blob/fd9b4862cd3729b58ecc0f26ce03f9b9513615b0/src/settings.js#L70-L74) to prevent the initial run that caused the prompt to appear.
+
+Also, in this particular case, you need to set the [`--host`](https://www.gnu.org/software/autoconf/manual/autoconf-2.69/html_node/Hosts-and-Cross_002dCompilation.html) flag to `wasm32` to tell the `configure` script that you are compiling for WebAssembly.
+
+The final `emconfigure` command looks like this:
+
+```bash
+$ emconfigure ./configure --host=wasm32 CFLAGS='-sFILESYSTEM=1 -sEXPORTED_RUNTIME_METHODS=FS,callMain -sMODULARIZE=1 -sEXPORT_ES6 -sINVOKE_RUN=0'
+```
+
+Do not forget to run `emmake make` again and copy the freshly created files over to the `mkbitmap` folder.
+
+Modify `index.html` so that it only loads the ES module `script.js`, from which you then import the `mkbitmap.js` module.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>mkbitmap</title>
+  </head>
+  <body>
+    <!-- No longer load `mkbitmap.js` here -->
+    <script src="script.js" type="module"></script>
+  </body>
+</html>
+```
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  const Module = await loadWASM();
+  console.log(Module);
+};
+
+run();
+```
+
+When you open the app now in the browser, you should see the `Module` object logged to the DevTools console, and the prompt is gone, since the `main()` function of `mkbitmap` is no longer called at the start.
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/VDD7kemQvnMsC7vsGnEr.png", alt="The mkbitmap app with a white screen, showing the Module object logged to the DevTools console.", width="800", height="502" %}
+
+### Manually execute the main function
+
+The next step is to manually call `mkbitmap`'s `main()` function by running `Module.callMain()`. The `callMain()` function takes an array of arguments, which match one-by-one what you would pass on the command line. If on the command line you would run `mkbitmap -v`, you would call `Module.callMain(['-v'])` in the browser. This logs the `mkbitmap` version number to the DevTools console.
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  const Module = await loadWASM();
+  Module.callMain(['-v']);
+};
+
+run();
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/i4MTQgb47ColZt4pcAqr.png", alt="The mkbitmap app with a white screen, showing the mkbitmap version number logged to the DevTools console.", width="800", height="502" %}
+
+### Redirect the standard output
+
+ The standard output (`stdout`) by default is the console. However, you can redirect it to something else, for example, a function that stores the output to a variable. This means you can add the output to the HTML by setting the [`Module.print`](https://emscripten.org/docs/api_reference/module.html#Module.print) property.
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  let consoleOutput = 'Powered by ';
+  const Module = await loadWASM({
+    print: (text) => (consoleOutput += text),
+  });
+  Module.callMain(['-v']);
+  document.body.textContent = consoleOutput;
+};
+
+run();
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/61iaKchi6p0NmbfipNhO.png", alt="The mkbitmap app showing the mkbitmap version number.", width="800", height="502" %}
+
+### Get the input file into the memory file system
+
+To get the input file into the memory file system, you need the equivalent of `mkbitmap filename` on the command line. To understand how I approach this, first some background on how `mkbitmap` expects its input and creates its output.
+
+Supported input formats of `mkbitmap` are [PNM](https://en.wikipedia.org/wiki/Netpbm) ([PBM](https://en.wikipedia.org/wiki/Netpbm#PBM_example), [PGM](https://en.wikipedia.org/wiki/Netpbm#PGM_example), [PPM](https://en.wikipedia.org/wiki/Netpbm#PPM_example)) and [BMP](https://en.wikipedia.org/wiki/BMP_file_format). The output formats are PBM for bitmaps, and PGM for graymaps. If a [`filename`](https://potrace.sourceforge.net/mkbitmap.1.html#:~:text=Input/output%20options%3A-,filename,the%20input%20filename%20by%20changing%20its%20suffix%20to%20%22.pbm%22%20or%20%22.pgm%22.,-If%20the%20name) argument is given, `mkbitmap` will by default create an output file whose name is obtained from the input file name by changing its suffix to [`.pbm`](https://en.wikipedia.org/wiki/Netpbm#File_formats). For example, for the input file name `example.bmp`, the output file name would be `example.pbm`.
+
+Emscripten provides a virtual file system that simulates the local file system, so that native code using synchronous file APIs can be compiled and run with little or no change.
+For `mkbitmap` to read an input file as if it was passed as a `filename` command line argument, you need to use the [`FS`](https://emscripten.org/docs/api_reference/Filesystem-API.html#id2) object that Emscripten provides.
+
+The `FS` object is backed by an in-memory file system (commonly referred to as [MEMFS](https://emscripten.org/docs/api_reference/Filesystem-API.html#memfs)) and has a [`writeFile()`](https://emscripten.org/docs/api_reference/Filesystem-API.html#FS.writeFile) function that you use to write files to the virtual file system. You use `writeFile()` as shown in the following code sample.
+
+To verify the file write operation worked, run the `FS` object's [`readdir()`](https://emscripten.org/docs/api_reference/Filesystem-API.html#FS.readdir) function with the parameter `'/'`. You will see `example.bmp` and a number of default files that [are always created automatically](https://emscripten.org/docs/api_reference/Filesystem-API.html#file-system-api).
+
+Note that the previous call to `Module.callMain(['-v'])` for printing the version number was removed. This is due to the fact that `Module.callMain()` is a function that generally expects to only be run once.
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  const Module = await loadWASM();
+  const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
+  Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
+  console.log(Module.FS.readdir('/'));
+};
+
+run();
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/HkJ5LUs5qcpP7Fwtu5iU.png", alt="The mkbitmap app showing an array of files in the memory file system, including example.bmp.", width="800", height="386" %}
+
+### First actual execution
+
+With everything in place, execute `mkbitmap` by running `Module.callMain(['example.bmp'])`. Log the contents of the MEMFS' `'/'` folder, and you should see the newly created `example.pbm` output file next to the `example.bmp` input file.
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  const Module = await loadWASM();
+  const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
+  Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
+  Module.callMain(['example.bmp']);
+  console.log(Module.FS.readdir('/'));
+};
+
+run();
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/vGFJy0pHyNPxdUUPdIcZ.png", alt="The mkbitmap app showing an array of files in the memory file system, including example.bmp and example.pbm.", width="800", height="502" %}
+
+### Get the output file out of the memory file system
+
+The `FS` object's [`readFile()`](https://emscripten.org/docs/api_reference/Filesystem-API.html#FS.readFile) function enables getting the `example.pbm` created in the last step out of the memory file system. The function returns a `Uint8Array` that you convert to a `File` object and save to disk, as browsers don't generally support [PBM](https://en.wikipedia.org/wiki/Netpbm#File_formats) files for direct in-browser viewing.
+(There are more elegant ways to [save a file](/patterns/files/save-a-file/), but using a dynamically created `<a download>` is the most widely supported one.) Once the file is saved, you can open it in your favorite image viewer.
+
+```js
+// This is `script.js`.
+import loadWASM from './mkbitmap.js';
+
+const run = async () => {
+  const Module = await loadWASM();
+  const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
+  Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
+  Module.callMain(['example.bmp']);
+  const output = Module.FS.readFile('example.pbm', { encoding: 'binary' });
+  const file = new File([output], 'example.pbm', {
+    type: 'image/x-portable-bitmap',
+  });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(file);
+  a.download = file.name;
+  a.click();
+};
+
+run();
+```
+
+{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/RstHspfwZIn7FW9aetVW.png", alt="macOS Finder with a preview of the input .bmp file and the output .pbm file.", width="800", height="519" %}
+
+### Add an interactive UI
+
+To this point, the input file is hardcoded and `mkbitmap` runs with [default parameters](https://potrace.sourceforge.net/mkbitmap.1.html#:~:text=Normally%2C%20the%20following%20options%20are%20preselected%20by%20default%3A%20%2Df%204%20%2Ds%202%20%2D3%20%2Dt%200.45.). The final step is to let the user dynamically select an input file, tweak the `mkbitmap` parameters, and then run the tool with the selected options.
+
+```js
+// Corresponds to `mkbitmap -o output.pbm input.bmp -s 8 -3 -f 4 -t 0.45`.
+Module.callMain(['-o', 'output.pbm', 'input.bmp', '-s', '8', '-3', '-f', '4', '-t', '0.45']);
+```
+
+The PBM image format is not particularly hard to parse, so with [some JavaScript code](https://github.com/megawac/pbm-formatter), you could even show a preview of the output image. See the [source code](https://glitch.com/edit/#!/mkbitmap) of the embedded [demo](https://mkbitmap.glitch.me/) below for one way to do this.
+
+
+{% Glitch id='mkbitmap', height=950 %}
+
+## Conclusion
+
+Congratulations, you have successfully compiled `mkbitmap` to WebAssembly and made it work in the browser! There were some dead ends and you had to compile the tool more than once until it worked, but as I wrote above, that's part of the experience. Also remember the [StackOverflow's `webassembly` tag](https://stackoverflow.com/questions/tagged/webassembly) if you get stuck. Happy compiling!
+
+## Acknowledgements
+
+This article was reviewed by [Sam Clegg](https://www.linkedin.com/in/samclegg/) and [Rachel Andrew](https://rachelandrew.co.uk/).
diff --git a/src/site/content/en/webassembly/index.md b/src/site/content/en/webassembly/index.md
new file mode 100644
index 00000000000..1c7877db917
--- /dev/null
+++ b/src/site/content/en/webassembly/index.md
@@ -0,0 +1,6 @@
+---
+layout: collection
+override:tags: []
+date: 2023-06-29
+pathName: webassembly
+---
diff --git a/src/site/content/en/webassembly/what-is-webassembly/index.md b/src/site/content/en/webassembly/what-is-webassembly/index.md
new file mode 100644
index 00000000000..1e58d39fa8c
--- /dev/null
+++ b/src/site/content/en/webassembly/what-is-webassembly/index.md
@@ -0,0 +1,221 @@
+---
+layout: post
+title: What is WebAssembly and where did it come from?
+authors:
+  - thomassteiner
+date: 2023-06-29
+# updated: 2023-06-29
+description: >
+  An introduction to WebAssembly (sometimes abbreviated Wasm), the portable binary-code format and
+  corresponding text format for executable programs as well as software interfaces for facilitating
+  interactions between such programs and their host environment.
+tags:
+  - webassembly
+---
+
+Ever since the web became a platform not just for documents but also for apps, some of the most advanced apps have pushed web browsers to their limits. The approach of going "closer to the metal" by interfacing with lower-level languages in order to improve performance is encountered in many higher-level languages. As an example, Java has the [Java Native Interface](https://web.archive.org/web/20080330002620/http://today.java.net/pub/a/today/2006/10/19/invoking-assembly-language-from-java.html). For JavaScript, this lower-level language is WebAssembly. In this article, you will discover what assembly language is, and why it can be useful on the web, then learn how WebAssembly was created via the interim solution of asm.js.
+
+## Assembly language
+
+Have you ever programmed in assembly language? In computer programming, assembly language, often referred to simply as Assembly and commonly abbreviated as ASM or asm, is _any_ low-level programming language with a very strong correspondence between the instructions in the language and the architecture's machine code instructions.
+
+For example, looking at the [Intel® 64 and IA-32 Architectures](https://software.intel.com/en-us/download/intel-64-and-ia-32-architectures-sdm-combined-volumes-1-2a-2b-2c-2d-3a-3b-3c-3d-and-4) (PDF), the [`MUL`](https://www.felixcloutier.com/x86/mul) instruction (for **mul**tiplication) performs an unsigned multiplication of the first operand (destination operand) and the second operand (source operand), and stores the result in the destination operand. Very simplified, the destination operand is an implied operand located in register `AX`, and the source operand is located in a general-purpose register like `CX`. The result is stored again in register `AX`. Consider the following x86 code example:
+
+```bash
+mov ax, 5  ; Set the value of register AX to 5.
+mov cx, 10 ; Set the value of register CX to 10.
+mul cx     ; Multiply the value of register AX (5)
+           ; and the value of register CX (10), and
+           ; store the result in register AX.
+```
+
+For comparison, if tasked with the objective of multiplying 5 and 10, you would probably write code similar to the following in JavaScript:
+
+```js
+const factor1 = 5;
+const factor2 = 10;
+const result = factor1 * factor2;
+```
+
+The advantage of going the assembly route is that such low-level and machine-optimized code is much more efficient than high-level and human-optimized code. In the preceding case it doesn't matter, but you can imagine that for more complex operations, the difference can be significant.
+
+As the name suggests, x86 code is dependent on the x86 architecture. What if there were a way of writing assembly code that was not dependent on a specific architecture, but that would inherit the performance benefits of assembly?
+
+## asm.js
+
+The first step to writing assembly code with no architecture dependencies was [asm.js](http://asmjs.org/spec/latest/), a strict subset of JavaScript that could be used as a low-level, efficient target language for compilers. This sub-language effectively described a sandboxed virtual machine for memory-unsafe languages like C or C++. A combination of static and dynamic validation allowed JavaScript engines to employ an ahead-of-time (AOT) optimizing compilation strategy for valid asm.js code. Code written in statically-typed languages with manual memory management (such as C) was translated by a source-to-source compiler such as the [early Emscripten](https://web.archive.org/web/20130420191339/http://kripken.github.io/mloc_emscripten_talk/) (based on LLVM).
+
+Performance was improved by limiting language features to those amenable to AOT. Firefox&nbsp;22 was the first browser to [support asm.js](https://www.mozilla.org/firefox/22.0/releasenotes/), released under the name [OdinMonkey](https://blog.mozilla.org/luke/2013/03/21/asm-js-in-firefox-nightly/). Chrome added [asm.js support](https://v8.dev/blog/v8-release-61#asm.js-is-now-validated-and-compiled-to-webassembly) in version&nbsp;61. While asm.js still works in browsers, it has been superseded by WebAssembly. The reason to use asm.js at this point would be as an alternative for browsers that don't have WebAssembly support.
+
+## WebAssembly
+
+WebAssembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust, and many more with a compilation target so that they run on the web. Support for memory-managed languages such as Java, Kotlin, and Dart is in the works and should become available soon. WebAssembly is designed to run alongside JavaScript, allowing both to work together.
+
+Apart from the browser, WebAssembly programs also run in other runtimes thanks to [WASI](https://wasi.dev/), the WebAssembly System Interface, a modular system interface for WebAssembly. WASI is created to be portable across operating systems, with the objective of being secure and the ability to run in a sandboxed environment.
+
+WebAssembly code (binary code, that is, bytecode) is intended to be run on a portable virtual stack machine (VM). The bytecode is designed to be faster to parse and execute than JavaScript and to have a compact code representation.
+
+Conceptual execution of instructions proceeds by way of a traditional program counter that advances through the instructions. In practice, most Wasm engines compile the Wasm bytecode to machine code, and then execute that. Instructions fall into two categories:
+
+- **Control instructions** that form control constructs and pop their argument value(s) off the stack, may change the program counter, and push result value(s) onto the stack.
+- **Simple instructions** that pop their argument value(s) from the stack, apply an operator to the values, and then push the result value(s) onto the stack, followed by an implicit advancement of the program counter.
+
+Going back to the example before, the following WebAssembly code would be equivalent to the x86 code from the beginning of the article:
+
+```bash
+i32.const 5  ; Push the integer value 5 onto the stack.
+i32.const 10 ; Push the integer value 10 onto the stack.
+i32.mul      ; Pop the two most recent items on the stack,
+             ; multiply them, and push the result onto the stack.
+```
+
+While asm.js is implemented all in software, that is, its code can run in any JavaScript engine (even if unoptimized), WebAssembly required new functionality that all browser vendors agreed on. [Announced in 2015](https://github.com/WebAssembly/design/issues/150) and first released in March 2017, WebAssembly became a [W3C recommendation](https://www.w3.org/TR/wasm-core-1/) on December&nbsp;5, 2019. The W3C maintains the standard with contributions from all major browser vendors and other interested parties. Since 2017, browser support is universal.
+
+{% BrowserCompat 'javascript.builtins.WebAssembly' %}
+
+WebAssembly has two representations: [textual](https://developer.mozilla.org/docs/WebAssembly/Understanding_the_text_format) and [binary](https://developer.mozilla.org/docs/WebAssembly/Text_format_to_wasm). What you see above is the textual representation.
+
+### Textual representation
+
+The textual representation is based on [S-expressions](https://developer.mozilla.org/docs/WebAssembly/Understanding_the_text_format#s-expressions) and commonly uses the file extension `.wat` (for **W**eb**A**ssembly **t**ext format). If you really wanted to, you could write it by hand. Taking the multiplication example from above and making it more useful by no longer hardcoding the factors, you can probably make sense of the following code:
+
+```bash
+(module
+  (func $mul (param $factor1 i32) (param $factor2 i32) (result i32)
+    local.get $factor1
+    local.get $factor2
+    i32.mul)
+  (export "mul" (func $mul))
+)
+```
+
+### Binary representation
+
+The binary format that uses the file extension `.wasm` is not meant for human consumption, let alone human creation. Using a tool like [wat2wasm](https://webassembly.github.io/wabt/demo/wat2wasm/), you can convert the above code to the following binary representation. (The comments are not usually part of the binary representation, but added by the wat2wasm tool for better understandability.)
+
+```bash
+0000000: 0061 736d                             ; WASM_BINARY_MAGIC
+0000004: 0100 0000                             ; WASM_BINARY_VERSION
+; section "Type" (1)
+0000008: 01                                    ; section code
+0000009: 00                                    ; section size (guess)
+000000a: 01                                    ; num types
+; func type 0
+000000b: 60                                    ; func
+000000c: 02                                    ; num params
+000000d: 7f                                    ; i32
+000000e: 7f                                    ; i32
+000000f: 01                                    ; num results
+0000010: 7f                                    ; i32
+0000009: 07                                    ; FIXUP section size
+; section "Function" (3)
+0000011: 03                                    ; section code
+0000012: 00                                    ; section size (guess)
+0000013: 01                                    ; num functions
+0000014: 00                                    ; function 0 signature index
+0000012: 02                                    ; FIXUP section size
+; section "Export" (7)
+0000015: 07                                    ; section code
+0000016: 00                                    ; section size (guess)
+0000017: 01                                    ; num exports
+0000018: 03                                    ; string length
+0000019: 6d75 6c                          mul  ; export name
+000001c: 00                                    ; export kind
+000001d: 00                                    ; export func index
+0000016: 07                                    ; FIXUP section size
+; section "Code" (10)
+000001e: 0a                                    ; section code
+000001f: 00                                    ; section size (guess)
+0000020: 01                                    ; num functions
+; function body 0
+0000021: 00                                    ; func body size (guess)
+0000022: 00                                    ; local decl count
+0000023: 20                                    ; local.get
+0000024: 00                                    ; local index
+0000025: 20                                    ; local.get
+0000026: 01                                    ; local index
+0000027: 6c                                    ; i32.mul
+0000028: 0b                                    ; end
+0000021: 07                                    ; FIXUP func body size
+000001f: 09                                    ; FIXUP section size
+; section "name"
+0000029: 00                                    ; section code
+000002a: 00                                    ; section size (guess)
+000002b: 04                                    ; string length
+000002c: 6e61 6d65                       name  ; custom section name
+0000030: 01                                    ; name subsection type
+0000031: 00                                    ; subsection size (guess)
+0000032: 01                                    ; num names
+0000033: 00                                    ; elem index
+0000034: 03                                    ; string length
+0000035: 6d75 6c                          mul  ; elem name 0
+0000031: 06                                    ; FIXUP subsection size
+0000038: 02                                    ; local name type
+0000039: 00                                    ; subsection size (guess)
+000003a: 01                                    ; num functions
+000003b: 00                                    ; function index
+000003c: 02                                    ; num locals
+000003d: 00                                    ; local index
+000003e: 07                                    ; string length
+000003f: 6661 6374 6f72 31            factor1  ; local name 0
+0000046: 01                                    ; local index
+0000047: 07                                    ; string length
+0000048: 6661 6374 6f72 32            factor2  ; local name 1
+0000039: 15                                    ; FIXUP subsection size
+000002a: 24                                    ; FIXUP section size
+```
+
+### Compiling to WebAssembly
+
+As you see, neither `.wat` nor `.wasm` are particularly very human-friendly. This is where a compiler like [Emscripten](https://emscripten.org/) comes into play.
+It lets you compile from higher-level languages like C and C++. There are other compilers for other languages like Rust and many more. Consider the following C code:
+
+```c
+#include <stdio.h>
+
+int main() {
+  printf("Hello World\n");
+  return 0;
+}
+```
+
+Usually, you would compile this C program with the compiler `gcc`.
+
+```bash
+$ gcc hello.c -o hello
+```
+
+With [Emscripten installed](https://emscripten.org/docs/getting_started/downloads.html), you compile it to WebAssembly using the `emcc` command and almost the same arguments:
+
+```bash
+$ emcc hello.c -o hello.html
+```
+
+This will create a `hello.wasm` file and the HTML wrapper file `hello.html`. When you serve the file `hello.html` from a web server, you will see `"Hello World"` printed to the DevTools console.
+
+There's also a way to compile to WebAssembly without the HTML wrapper:
+
+```bash
+$ emcc hello.c -o hello.js
+```
+
+As before, this will create a `hello.wasm` file, but this time a `hello.js` file instead of the HTML wrapper. To test, you run the resulting JavaScript file `hello.js` with, for example, Node.js:
+
+```bash
+$ node hello.js
+Hello World
+```
+
+### Learn more
+
+This brief introduction to WebAssembly is just the tip of the iceberg.
+Learn more about WebAssembly in the [WebAssembly documentation](https://developer.mozilla.org/docs/WebAssembly) on MDN
+and consult the [Emscripten documentation](https://emscripten.org/docs/index.html). Truth be told, working with WebAssembly can feel a bit like the [How to draw an owl meme](https://knowyourmeme.com/memes/how-to-draw-an-owl), especially since web developers familiar with HTML, CSS, and JavaScript are not necessarily versed in the to-be-compiled-from languages like C. Luckily there are channels like [StackOverflow's `webassembly` tag](https://stackoverflow.com/questions/tagged/webassembly) where experts are often happy to help if you ask nicely.
+
+{% Aside %}
+Move on to the article [Compiling `mkbitmap` to WebAssembly](/compiling-mkbitmap-to-webassembly/) for a beginner-friendly introduction to compiling a not completely trivial but also not overly complex C program to WebAssembly. At the example of [`mkbitmap`](https://potrace.sourceforge.net/mkbitmap.1.html), this article shows how to use a Wasm program as a library in JavaScript that works with files as input and that outputs images.
+{% endAside %}
+
+## Acknowledgements
+
+This article was reviewed by [Jakob Kummerow](https://github.com/jakobkummerow), [Derek Schuff](https://www.linkedin.com/in/derek-schuff-117b11b1), and [Rachel Andrew](https://rachelandrew.co.uk/).
diff --git a/src/site/content/es/404.md b/src/site/content/es/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/es/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/es/accessible/accessible-tap-targets/index.md b/src/site/content/es/accessible/accessible-tap-targets/index.md
new file mode 100644
index 00000000000..c1e53843368
--- /dev/null
+++ b/src/site/content/es/accessible/accessible-tap-targets/index.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Objetivos táctiles accesibles
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: |2
+
+  Es importante que los elementos interactivos tengan suficiente espacio a su alrededor cuando se utilicen en un dispositivo móvil o con pantalla táctil. Esto ayudará a todos, pero especialmente a aquellos con discapacidades motoras.
+tags:
+  - accessibility
+---
+
+Cuando tu diseño se muestra en un dispositivo móvil, debes de asegurarte de que los elementos interactivos, como botones o enlaces, sean lo suficientemente grandes y tengan suficiente espacio a su alrededor, para que sean fáciles de presionar sin que se superpongan accidentalmente con otros elementos. Esto beneficia a todos los usuarios, pero es especialmente útil para cualquier persona con una discapacidad motora.
+
+Un tamaño de objetivo táctil mínimo recomendado es de alrededor de 48 píxeles, independiente del dispositivo, en un sitio con una ventana gráfica móvil configurada correctamente. Por ejemplo, aunque es posible que un icono solo tenga un ancho y un alto de 24px, puedes usar un relleno adicional para llevar el tamaño del objetivo táctil hasta 48px. El área de 48x48 píxeles corresponde a alrededor de 9mm, que es aproximadamente el tamaño del área de la yema del dedo de una persona.
+
+En la siguiente demostración, agregué relleno a todos los enlaces para asegurarme de que cumplan con el tamaño mínimo.
+
+{% Glitch { id: 'tap-targets', path: 'index.html' } %}
+
+Los objetivos táctiles también deben de tener una separación de unos 8 píxeles, tanto horizontal como verticalmente, de modo que el dedo del usuario que presiona un objetivo táctil no toque inadvertidamente otro objetivo táctil.
+
+## Probando tus objetivos táctiles
+
+Si tu objetivo es texto y has utilizado valores relativos como `em` o `rem` para ajustar el tamaño del texto y cualquier padding (relleno), puedes utilizar DevTools para comprobar que el valor calculado de esa área es lo suficientemente grande. En el siguiente ejemplo, estoy usando `em` para mi texto y padding.
+
+{% Glitch { id: 'tap-targets-2', path: 'style.css' } %}
+
+Inspecciona la `a` del enlace y, en Chrome DevTools, cambia al [panel de Calculados](https://developer.chrome.com/docs/devtools/css/overrides/#computed) en donde puedes inspeccionar las distintas partes del cuadro y ver a qué tamaño de píxeles se resuelven. En Firefox DevTools hay un panel de diseño. En ese panel obtienes el tamaño real del elemento inspeccionado.
+
+<figure style="max-width: 500px">{% Img src="image/admin/vmFzREveRttHVDfLqqCx.jpg", alt="El panel de diseño en Firefox DevTools muestra el tamaño del elemento a", width="800", height="565" %}</figure>
+
+## Usar consultas de medios para detectar el uso de la pantalla táctil
+
+Una de las características de los medios que ahora podemos probar con las consultas de medios es si la entrada principal del usuario es una pantalla táctil. La función de `pointer` nos regresará un `fine` o `coarse`. Un buen puntero será alguien que use un ratón o trackpad, incluso si ese ratón está conectado a través de Bluetooth a un teléfono. Un `coarse` indica una pantalla táctil, que podría ser un dispositivo móvil, pero también puede ser una pantalla de computadora portátil o una tableta grande.
+
+Si estás ajustando tu CSS dentro de una consulta de medios para aumentar el objetivo táctil, la prueba de un puntero grueso te permite aumentar los objetivos táctiles para todos los usuarios de pantalla táctil. Esto te da el área de toque más grande, ya sea que el dispositivo sea un teléfono o un dispositivo más grande, mientras que la prueba de ancho solo te brinda a los usuarios móviles.
+
+```css
+.container a {
+  padding: .2em;
+}
+
+@media (pointer: coarse) {
+  .container a {
+    padding: .8em;
+  }
+}
+```
+
+Puedes obtener más información sobre las funciones de medios de interacción, como el puntero, en el artículo de [Conceptos básicos del diseño web responsivo](/responsive-web-design-basics/).
diff --git a/src/site/content/es/accessible/color-and-contrast-accessibility/index.md b/src/site/content/es/accessible/color-and-contrast-accessibility/index.md
new file mode 100644
index 00000000000..633380e29e4
--- /dev/null
+++ b/src/site/content/es/accessible/color-and-contrast-accessibility/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: Accesibilidad de color y contraste
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: |2
+
+  Si tiene buena visión, es fácil suponer que todos perciben los colores o la legibilidad del texto de la misma manera que usted, pero, por supuesto, ese no es el caso.
+tags:
+  - accessibility
+---
+
+Si tiene una buena visión, es fácil suponer que todos perciben los colores o la legibilidad del texto de la misma manera que usted, pero, por supuesto, ese no es el caso.
+
+Como puede imaginar, algunas combinaciones de colores que son fáciles de leer para algunas personas son difíciles o imposibles para otras. Esto generalmente se reduce al contraste de color, la relación entre la luminancia de los colores de primer plano y de fondo. Cuando los colores son similares, la relación de contraste es baja; cuando son diferentes, la relación de contraste es alta.
+
+Las [pautas de WebAIM](https://webaim.org/standards/wcag/) recomiendan una relación de contraste AA (mínima) de 4.5: 1 para todo el texto. Se hace una excepción para el texto muy grande (120-150% más grande que el texto del cuerpo predeterminado), para el cual la proporción puede bajar a 3: 1. Observe la diferencia en las relaciones de contraste que se muestran a continuación.
+
+<figure>{% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="Una imagen que muestra las diferentes relaciones de contraste", width="800", height="328"%}</figure>
+
+Se eligió la relación de contraste de 4.5: 1 para el nivel AA porque compensa la pérdida de sensibilidad al contraste que suelen experimentar los usuarios con una pérdida de visión equivalente a aproximadamente una visión 20/40. Una agudeza visual de 20/40 se considera comúnmente como típica de personas de aproximadamente 80 años. Para usuarios con problemas de visión baja o deficiencias de color, podemos aumentar el contraste hasta 7: 1 para el texto del cuerpo.
+
+Puede utilizar la Auditoría de accesibilidad en Lighthouse para comprobar el contraste de color. Abra DevTools, haga clic en Auditorías y seleccione Accesibilidad para ejecutar el informe.
+
+<figure>{% Img src = "image/admin/vSFzNOurQO6z2xV6qWuW.png", alt = "Una captura de pantalla de la salida de una auditoría para el contraste de color.", width = "800", height = "218"%}</figure>
+
+Chrome también incluye una función experimental para ayudarlo a [detectar todos los textos de bajo contraste de su página](https://developers.google.com/web/updates/2020/10/devtools#css-overview) . También puede utilizar la [sugerencia de color accesible](https://developers.google.com/web/updates/2020/08/devtools#accessible-color) para corregir el texto de bajo contraste.
+
+<figure>{% Img src = "image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt="Una captura de pantalla del resultado de la función experimental de texto de bajo contraste de Chrome.", width="800", height="521" %}</figure>
+
+Para obtener un informe más completo, instale la [extensión Accessibility Insights](https://accessibilityinsights.io/). Una de las comprobaciones del informe Fastpass es el contraste de color. Obtendrá un informe detallado de cualquier elemento defectuoso.
+
+<figure>{% Img src = "image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt = "El informe en Accessibility Insights", width = "800", height = "473"%}</figure>
+
+## Algoritmo de contraste de percepción avanzado (APCA)
+
+El [algoritmo de contraste de percepción avanzado (APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) es una nueva forma de calcular el contraste basada en la investigación moderna sobre la percepción del color.
+
+En comparación con las pautas [AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced), el APCA depende más del contexto.
+
+El contraste se calcula en función de las siguientes características:
+
+- Propiedades espaciales (peso de la fuente y tamaño del texto)
+- Color del texto (diferencia de luminosidad percibida entre el texto y el fondo)
+- Contexto (luz ambiental, entorno y propósito previsto del texto)
+
+Chrome incluye una [función experimental para reemplazar las pautas de relación de contraste AA / AAA con APCA](https://developers.google.com/web/updates/2021/01/devtools#apca) .
+
+<figure>{% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="Una captura de pantalla de la salida de la función APCA en Chrome.", width="800", height="543"%}</figure>
+
+## No transmita información solo con colores
+
+Hay aproximadamente 320 millones de personas en todo el mundo con deficiencia de visión de los colores. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna forma de "daltonismo"; eso significa que alrededor de una vigésima parte, o el 5%, de sus usuarios no experimentarán su sitio de la manera deseada. Cuando confiamos en el color para transmitir información, llevamos ese número a niveles inaceptables.
+
+{% Aside %} Nota: El término "daltonismo" se utiliza a menudo para describir una condición visual en la que una persona tiene problemas para distinguir los colores, pero de hecho, muy pocas personas son realmente daltónicas. La mayoría de las personas con deficiencias de visión de color pueden ver algunos o la mayoría de los colores, pero tienen dificultades para diferenciar algunos, como rojos y verdes (los más comunes), marrones y naranjas, y azules y púrpuras. {% endAside %}
+
+Por ejemplo, en un formulario de entrada, un número de teléfono puede estar subrayado en rojo para indicar que no es válido. Pero a un usuario de lector de pantalla o de color deficiente, esa información no se transmite bien, si es que se transmite. Por lo tanto, siempre debe intentar proporcionar múltiples vías para que el usuario acceda a información crítica.
+
+<figure style="width: 200px">{% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="Una imagen de un formulario de entrada con un número de teléfono incorrecto resaltado solo con un color rojo.", width="293", height="323" %}</figure>
+
+La [lista de verificación de WebAIM establece en la sección 1.4.1](https://webaim.org/standards/wcag/checklist#sc1.4.1) que "el color no debe usarse como el único método para transmitir contenido o distinguir elementos visuales". También señala que "el color solo no debe usarse para distinguir los enlaces del texto circundante" a menos que cumplan ciertos requisitos de contraste. En cambio, la lista de verificación recomienda agregar un indicador adicional, como un guión bajo (usando la propiedad CSS `text-decoration`) para indicar cuándo el enlace está activo.
+
+Una forma fácil de corregir el ejemplo anterior es agregar un mensaje adicional al campo, anunciando que no es válido y por qué.
+
+<figure style="width: 200px">{% Img src = "image/admin/FLQPcG16akNRoElx3pnz.png", alt = "El mismo formulario de entrada que en el último ejemplo, esta vez con una etiqueta de texto que indica el problema con el campo.", width="292", height="343" %}</figure>
+
+Cuando cree una aplicación, tenga en cuenta este tipo de cosas y tenga cuidado con las áreas en las que puede depender demasiado del color para transmitir información importante.
+
+Si tiene curiosidad acerca de cómo se ve su sitio para diferentes personas, o si depende en gran medida del uso del color en su interfaz de usuario, puede usar DevTools para simular varias formas de discapacidad visual, incluidos diferentes tipos de daltonismo. Chrome incluye una función [Emular deficiencias visuales](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies). Para acceder a él, abra DevTools y luego abra la **pestaña Renderización** en el cuadro, y así podrá emular las siguientes deficiencias de color.
+
+- Protanopia: incapacidad para percibir la luz roja.
+- Deuteranopia: incapacidad para percibir la luz verde.
+- Tritanopia: incapacidad para percibir la luz azul.
+- Acromatopsia: incapacidad para percibir cualquier color excepto los tonos de gris (extremadamente raro).
+
+<figure>{% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="Emular la visión de una persona con acromatopsia muestra nuestra página en escala de grises.", width="800", height="393" %}</figure>
+
+## Modo de alto contraste
+
+El modo de alto contraste permite al usuario invertir los colores de primer plano y de fondo, lo que a menudo ayuda a que el texto se destaque mejor. Para alguien con una discapacidad de baja visión, el modo de alto contraste puede facilitar la navegación por el contenido de la página. Hay algunas formas de obtener una configuración de alto contraste en su máquina.
+
+Los sistemas operativos como Mac OSX y Windows ofrecen modos de alto contraste que se pueden habilitar para todo en el nivel del sistema.
+
+Un ejercicio útil es activar la configuración de alto contraste y verificar que toda la interfaz de usuario de su aplicación aún sea visible y utilizable.
+
+Por ejemplo, una barra de navegación puede usar un color de fondo sutil para indicar qué página está seleccionada actualmente. Si lo ve en una extensión de alto contraste, esa sutileza desaparece por completo, y con ella desaparece la comprensión del lector de qué página está activa.
+
+<figure style="width: 500px">{% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="Captura de pantalla de una barra de navegación en modo de alto contraste donde la pestaña activa es difícil de leer", width="640", height="57" %}</figure>
+
+De manera similar, si considera el ejemplo de la lección anterior, el subrayado rojo en el campo del número de teléfono no válido puede mostrarse en un color azul-verde difícil de distinguir.
+
+<figure>{% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="Captura de pantalla del formulario de dirección utilizado anteriormente, esta vez en modo de alto contraste. El cambio de color del elemento no válido es difícil de leer.",  width="700", height="328" %}</figure>
+
+Si cumple con los índices de contraste mencionados anteriormente, debería poder soportar el modo de alto contraste. Pero para mayor tranquilidad, considere la posibilidad de instalar la [extensión de Chrome de alto contraste](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph) y revise su página para comprobar que todo funciona y se ve como se espera.
diff --git a/src/site/content/es/accessible/control-focus-with-tabindex/index.md b/src/site/content/es/accessible/control-focus-with-tabindex/index.md
new file mode 100644
index 00000000000..d4aec4ba3b6
--- /dev/null
+++ b/src/site/content/es/accessible/control-focus-with-tabindex/index.md
@@ -0,0 +1,95 @@
+---
+layout: post
+title: Controlar el enfoque con tabindex
+authors:
+  - robdodson
+date: 2018-11-18
+description: |
+  Los elementos HTML estándar como <button> o <input> participan en la navegación secuencial del teclado de forma accesible. Si estás creando componentes interactivos personalizados, utiliza tabindex para asegurarte de que sean accesibles desde el teclado
+---
+
+Los elementos HTML estándar como `<button>` o `<input>` participan en la navegación secuencial del teclado de forma accesible. Sin embargo, si estás creando *componentes interactivos personalizados* utiliza`tabindex` para asegurarte de que sean accesibles desde el teclado.
+
+{% Aside %} Siempre que sea posible, utiliza un elemento HTML integrado en lugar de crear su propia versión personalizada. `<button>`, por ejemplo, es muy fácil de diseñar y ya tiene compatibilidad total con el teclado. Esto te evitará tener que administrar `tabindex` o agregar semántica con ARIA. {% endAside %}
+
+## Comprueba si tus controles son accesibles desde el teclado
+
+Una herramienta como Lighthouse es excelente para detectar ciertos problemas de accesibilidad, pero algunas cosas solo pueden ser probadas por humanos.
+
+Intenta presionar `Tab` para navegar por tu sitio. ¿Puedes acceder a todos los controles interactivos de la página? De lo contrario, es posible que tengas que utilizar [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex) para mejorar la capacidad de enfoque de esos controles.
+
+{% Aside 'warning' %} Si no ves ningún indicador de enfoque, es posible que tu CSS lo oculte. Comprueba si hay estilos que mencionen `:focus { outline: none; }`. Puedes aprender cómo solucionar este problema en nuestra guía sobre [enfoque de estilo](/style-focus). {% endAside %}
+
+## Inserta un elemento en el orden de pestañas
+
+Inserta un elemento en el orden natural de pestañas usando `tabindex="0"`. Por ejemplo:
+
+```html
+<div tabindex="0">Focus me with the TAB key</div>
+```
+
+Para enfocar un elemento, presiona  `Tab` o llama al método `focus()`.
+
+{% Glitch {id: 'tabindex-zero', ruta: 'index.html', altura: 346}%}
+
+## Elimina un elemento del orden de pestañas
+
+Elimina un elemento usando `tabindex="-1"`. Por ejemplo:
+
+```html
+<button tabindex="-1">Can't reach me with the TAB key!</button>
+```
+
+Esto elimina un elemento del orden natural de pestañas, pero el elemento aún se puede enfocar llamando a su método `focus()`.
+
+{% Glitch {id: 'tabindex-negative-one', ruta: 'index.html', altura: 346}%}
+
+Tené en cuenta que aplicar `tabindex="-1"` a un elemento no afecta a sus elementos secundarios; si están en el orden de pestañas de forma natural o debido a un `tabindex` de tabulación, permanecerán en el orden de pestañas. Para eliminar un elemento y todos sus elementos secundarios del orden de tabulación, considera usar el [polyfill WICG `inert`](https://github.com/WICG/inert). El polyfill emula el comportamiento del atributo propuesto `inert`, que evita que los elementos sean seleccionados o leídos por tecnologías de asistencia.
+
+{% Aside 'caution' %} El polyfill `inert` es experimental y es posible que no funcione como se esperaba en todos los casos. Prueba cuidadosamente antes de usarlo en producción. {% endAside %}
+
+## Evita `tabindex > 0`
+
+Cualquier `tabindex` mayor que 0 salta el elemento al frente del orden de tabulación natural. Si hay varios elementos con un `tabindex` mayor que 0, el orden de tabulación comienza desde el valor más bajo mayor que cero y avanza hacia arriba.
+
+El uso de un `tabindex` mayor que 0 se considera un **anti-patrón** porque los lectores de pantalla navegan por la página en orden DOM, no en orden de tabulación. Si necesitas que un elemento aparezca antes en el orden de tabulación, debe moverse a un lugar anterior en el DOM.
+
+Lighthouse facilita la identificación de elementos con un `tabindex` &gt; 0. Ejecuta la Auditoría de accesibilidad (Lighthouse&gt; Opciones&gt; Accesibilidad) y busque los resultados de la auditoría "Ningún elemento tiene un valor [tabindex] mayor que 0".
+
+## Crea componentes accesibles con "`roving tabindex`" o "tabindex itinerante"
+
+Si estás construyendo un componente complejo, es posible que necesites añadir soporte adicional para el teclado más allá del enfoque. Considera el elemento `select` incorporado. Es enfocable y puede usar las teclas de flecha para exponer funcionalidades adicionales (las opciones seleccionables).
+
+Para implementar una funcionalidad similar en sus propios componentes, utiliza una técnica conocida como " `tabindex` itinerante". El tabindex itinerante o roving tabindex funciona estableciendo `tabindex` en -1 para todos los elementos secundarios, excepto el que está actualmente activo. A continuación, el componente utiliza un detector de eventos de teclado para determinar qué tecla ha pulsado el usuario.
+
+Cuando esto sucede, el componente establece el `tabindex` de tabulación del elemento secundario previamente enfocado en -1, establece el `tabindex` de tabulación del elemento secundario que se va a enfocar en 0 y llama al método `focus()` en él.
+
+**Antes**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="0">Redo</div>
+  <button tabindex="-1">Cut</div>
+</div>
+```
+
+**Después**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="-1">Redo</div>
+  <button tabindex="0">Cut</div>
+</div>
+```
+
+{% Glitch {id: 'roving-tabindex', ruta: 'index.html', altura: 346}%}
+
+{% Aside %} ¿Tienes curiosidad por saber para qué sirven esos atributos `role=""`? Te permiten cambiar la semántica de un elemento para que un lector de pantalla lo anuncie correctamente. Puedes obtener más información sobre ellos en nuestra guía sobre [conceptos básicos de lectores de pantalla](/semantics-and-screen-readers). {% endAside %}
+
+{% Assessment 'self-assessment' %}
+
+## Fórmulas de acceso al teclado
+
+Si no estás seguro de qué nivel de soporte de teclado pueden necesitar tus componentes personalizados, puedes consultar las [Prácticas de creación de ARIA 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/). Esta sencilla guía enumera los patrones de IU comunes e identifica qué claves deben admitir sus componentes.
diff --git a/src/site/content/es/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/es/accessible/control-focus-with-tabindex/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/es/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/es/accessible/headings-and-landmarks/index.md b/src/site/content/es/accessible/headings-and-landmarks/index.md
new file mode 100644
index 00000000000..68a00c654c6
--- /dev/null
+++ b/src/site/content/es/accessible/headings-and-landmarks/index.md
@@ -0,0 +1,91 @@
+---
+layout: post
+title: Encabezados y landmarks
+authors:
+  - robdodson
+date: 2018-11-18
+description: Al utilizar los elementos correctos para los títulos y los landmark, puedes mejorar la experiencia de navegación para los usuarios de tecnología de asistencia
+---
+
+{% include 'content/why-headings.njk' %}
+
+## Utiliza encabezados para delinear la página
+
+Utiliza los elementos de `h1` - `h6` para crear un esquema *estructural* para tu página. El objetivo es crear un esqueleto o un andamiaje de la página de modo que cualquiera que navegue por los encabezados pueda formarse una imagen mental.
+
+Una práctica común es usar un solo `h1` para el título principal o el logotipo de una página, los `h2`  para designar las secciones principales y las `h3` en las subsecciones de apoyo:
+
+```html
+<h1>Company name</h1>
+<section>
+  <h2>Section Heading</h2>
+  …
+  <h3>Sub-section Heading</h3>
+</section>
+```
+
+## No te saltes los niveles de encabezado
+
+Los desarrolladores a menudo omiten los niveles de encabezado para usar los estilos predeterminados del navegador que se asemejan mucho a su diseño. Esto se considera un anti-patrón porque rompe el esquema del modelo.
+
+En lugar de depender del tamaño de fuente predeterminado del navegador para los títulos, usa tu propio CSS y no omitas niveles.
+
+Por ejemplo, este sitio tiene una sección llamada "IN THE NEWS (EN LAS NOTICIAS)", seguida de dos titulares:
+
+{% Img src="image/admin/CdBjBuUo2yVVHWVFnQzx.png", alt="Un sitio de noticias con un título, una imagen principal y subsecciones.", width="800", height="414" %}
+
+El título de la sección, "IN THE NEWS", podría ser un `h2` y ambos titulares de apoyo podrían ser `h3`.
+
+Debido a que el `font-size` de "IN THE NEWS" es *más pequeño* que el título, puede ser tentador convertir el título de la primera historia en un `h2` y convertir "IN THE NEWS" a un `h3`. Si bien eso puede coincidir con el estilo predeterminado del navegador, ¡rompería el esquema transmitido a un usuario de lector de pantalla!
+
+{% Aside %} Aunque pueda parecer contradictorio, no importa si *visualmente* `h3` y `h4` son más grandes que sus contrapartes `h2` o `h1`. Lo que importa es el esquema, sus elementos y su orden. {% endAside %}
+
+Puedes utilizar Lighthouse para comprobar si tu página omite algún nivel de encabezado. Ejecuta la auditoría de accesibilidad (**Lighthouse > Opciones > Accesibilidad**) y busca los resultados de la auditoría de **los encabezados no omiten niveles**.
+
+## Usa landmarks para ayudar a la navegación
+
+Los elementos HTML5 como `main` , `nav` y `aside` actúan como **landmarks (puntos de referencia)** o regiones especiales en la página a las que puede saltar un lector de pantalla.
+
+Utiliza etiquetas de landmark para definir las secciones principales de tu página en lugar de depender de los `div`. Ten cuidado de no exagerar porque tener *demasiados* puntos de referencia puede ser abrumador. Por ejemplo, limita el uso a un solo elemento de `main` en lugar de 3 o 4.
+
+Lighthouse recomienda auditar manualmente tu sitio para comprobar que "los landmark HTML5 se utilizan para mejorar la navegación". Puedes utilizar esta [lista de elementos landmarks](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html) para comprobar tu página.
+
+## Evita el contenido repetitivo con enlaces de omisión
+
+Muchos sitios contienen navegación repetitiva en sus encabezados, lo que puede resultar molesto para navegar con tecnología de asistencia. Utiliza un **enlace de omisión (skip link)** para permitir que los usuarios omitan este contenido.
+
+Un enlace de omisión es un ancla fuera de la pantalla que siempre es el primer elemento enfocable en el DOM. Normalmente, contiene un enlace en la página al contenido principal de la página. Debido a que es el primer elemento del DOM, solo se necesita una acción de la tecnología de asistencia para enfocarlo y evitar la navegación repetitiva.
+
+```html
+<!-- index.html -->
+<a class="skip-link" href="#main">Skip to main</a>
+…
+<main id="main">
+  [Main content]
+</main>
+```
+
+```css
+/* style.css */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000000;
+  color: white;
+  padding: 8px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+{% Aside 'codelab' %} [Ejemplo de enlace de omisión en vivo.](https://skip-link.glitch.me/) {% endAside %}
+
+Muchos sitios populares como [GitHub](https://github.com/), [The NY Times](https://www.nytimes.com/) y [Wikipedia](https://wikipedia.org/) contienen enlaces de omisión. Intenta visitarlos y presiona la tecla de `TAB` en tu teclado varias veces.
+
+Lighthouse puede ayudarte a verificar si tu página contiene un enlace de omisión. Vuelve a ejecutar la auditoría de accesibilidad y busca los resultados de la auditoría **La página contiene un encabezado, un enlace de omisión o una región landmark**.
+
+{% Aside %} Técnicamente, esta prueba también se aprobará si tu sitio contiene elementos `h1` - `h6` o cualquiera de los landmark HTML5. Pero aunque la prueba es algo inexacta en sus requisitos, ¡es bueno pasarla si es posible! {% endAside %}
diff --git a/src/site/content/es/accessible/index.md b/src/site/content/es/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/es/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/es/accessible/labels-and-text-alternatives/index.md b/src/site/content/es/accessible/labels-and-text-alternatives/index.md
new file mode 100644
index 00000000000..da424414c00
--- /dev/null
+++ b/src/site/content/es/accessible/labels-and-text-alternatives/index.md
@@ -0,0 +1,226 @@
+---
+layout: post
+title: Etiquetas y texto alternativo
+authors:
+  - robdodson
+date: 2018-11-18
+description: |-
+  Para que un lector de pantalla presente una interfaz de usuario hablada al usuario, los elementos significativos deben tener etiquetas adecuadas o texto alternativo. Una etiqueta o el texto alternativo le da a un elemento su nombre accesible, una de las propiedades clave
+  para expresar la semántica de los elementos en el árbol de accesibilidad.
+---
+
+Para que un lector de pantalla presente una interfaz de usuario hablada al usuario, los elementos significativos deben tener etiquetas adecuadas o texto alternativo. Una etiqueta o el texto alternativo le da a un elemento su **nombre** accesible, una de las propiedades clave para [expresar la semántica del elemento en el árbol de accesibilidad](/semantics-and-screen-readers/#semantic-properties-and-the-accessibility-tree).
+
+Cuando el nombre de un elemento se combina con la **función** del elemento, le da al usuario un contexto para que pueda entender con qué tipo de elemento está interactuando y cómo se representa en la página. Si no hay un nombre, un lector de pantalla solo anuncia la función del elemento. Imagínese intentar navegar por una página y escuchar "botón", "casilla de verificación", "imagen" sin ningún contexto adicional. Es por eso que las etiquetas y el texto alternativo son cruciales para una experiencia buena y accesible.
+
+## Inspeccionar el nombre de un elemento
+
+Es fácil verificar el nombre accesible de un elemento usando DevTools de Chrome:
+
+1. Haga clic derecho en un elemento y elija **Inspeccionar**. Esto abre el panel Elementos de DevTools.
+2. En el panel Elementos, busque el panel **Accesibilidad.** Puede estar oculto detrás de un símbolo `»`.
+3. En el menú desplegable**{nbsp}Propiedades computadas**, busque la propiedad **Nombre**.
+
+<figure>{% Img src="image/admin/38c68DmamTCqt2LFxTmu.png", alt="", width="800", height="471" %} <figcaption> Panel de accesibilidad de DevTools que muestra el nombre de un botón.</figcaption></figure>
+
+{% Aside %} Para obtener más información, consulte la [Referencia de accesibilidad de DevTools](https://developer.chrome.com/docs/devtools/accessibility/reference/). {% endAside %}
+
+Ya sea que esté viendo un `img` con texto `alt` o un `input` con `label`, todos estos escenarios dan el mismo resultado: brindarle a un elemento su nombre accesible.
+
+## Revisar si faltan nombres
+
+Hay diferentes formas de agregar un nombre accesible a un elemento, según su tipo. La siguiente tabla enumera los tipos de elementos más comunes que necesitan nombres accesibles y enlaces a explicaciones sobre cómo agregarlos.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Tipo de elemento</th>
+        <th>Cómo agregar un nombre</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Documento HTML</td>
+        <td><a href="#label-documents-and-frames">Etiquetar documentos y marcos</a></td>
+      </tr>
+      <tr>
+        <td>Elementos <code>&lt;frame&gt;</code> o <code>&lt;iframe&gt;</code>
+</td>
+        <td><a href="#label-documents-and-frames">Etiquetar documentos y marcos</a></td>
+      </tr>
+      <tr>
+        <td>Elementos de la imagen</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir texto alternativo para imágenes y objetos</a></td>
+      </tr>
+      <tr>
+        <td>Elementos <code>&lt;input type="image"&gt;</code>
+</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir texto alternativo para imágenes y objetos</a></td>
+      </tr>
+      <tr>
+        <td>Elementos <code>&lt;object&gt;</code>
+</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir texto alternativo para imágenes y objetos</a></td>
+      </tr>
+      <tr>
+        <td>Botones</td>
+        <td><a href="#label-buttons-and-links">Etiquetar botones y enlaces</a></td>
+      </tr>
+      <tr>
+        <td>Enlaces</td>
+        <td><a href="#label-buttons-and-links">Etiquetar botones y enlaces</a></td>
+      </tr>
+      <tr>
+        <td>Elementos de formulario</td>
+        <td><a href="#label-form-elements">Etiquetar elementos de formulario</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Etiquetar documentos y marcos
+
+Cada página debe tener un elemento [`title`](https://developer.mozilla.org/docs/Web/HTML/Element/title) que explique brevemente de qué trata la página. El elemento `title` le da a la página su nombre accesible. Cuando un lector de pantalla ingresa a la página, este es el primer texto que se anuncia.
+
+Por ejemplo, la página siguiente tiene el título "Mary's Maple Bar Fast-Baking Recipe":
+
+```html/3
+<!doctype html>
+  <html lang="en">
+    <head>
+      <title>Mary's Maple Bar Fast-Baking Recipe</title>
+    </head>
+  <body>
+    …
+  </body>
+</html>
+```
+
+{% Aside %} Para obtener sugerencias sobre cómo escribir títulos eficaces, consulte la [guía para escribir títulos descriptivos](/write-descriptive-text). {% endAside %}
+
+De manera similar, cualquier elemento `frame` o `iframe` debe tener atributos de `title`:
+
+```html
+<iframe title="An interactive map of San Francisco" src="…"></iframe>
+```
+
+Si bien el contenido de un `iframe` puede contener su propio `title` interno, un lector de pantalla generalmente se detiene en el límite del marco y anuncia la función del elemento ("marco") y su nombre accesible, proporcionado por el atributo de `title`. Esto le permite al usuario decidir si desea ingresar al marco o evitarlo.
+
+## Incluir texto alternativo para imágenes y objetos
+
+Un `img` siempre debe ir acompañado de un atributo [`alt`](https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes) para darle a la imagen su nombre accesible. Si la imagen no se carga, el texto `alt` se utiliza como marcador de posición para que los usuarios tengan una idea de lo que la imagen intentaba transmitir.
+
+Escribir un buen texto `alt` es un arte, pero hay un par de pautas que puedes seguir:
+
+1. Determine si la imagen proporciona contenido que de otro modo sería difícil de obtener leyendo el texto circundante.
+2. Si es así, transmita el contenido de la manera más sucinta posible.
+
+Si la imagen actúa como decoración y no proporciona ningún contenido útil, puede asignarle un atributo `alt=""` para eliminarla del árbol de accesibilidad.
+
+{% Aside %} Obtenga más información sobre cómo escribir texto `alt` eficaz consultando la [guía de WebAIM sobre texto alternativo](https://webaim.org/techniques/alttext/). {% endAside %}
+
+### Imágenes como enlaces y entradas
+
+Una imagen envuelta en un enlace debe usar el atributo `alt` de `img` para describir hacia dónde navegará el usuario si hace clic en el enlace:
+
+```html
+<a href="https://en.wikipedia.org/wiki/Google">
+  <img alt="Google's wikipedia page" src="google-logo.jpg">
+</a>
+```
+
+De manera similar, si se usa el elemento `<input type="image">` para crear un botón de imagen, debe contener texto `alt` que describa la acción que ocurre cuando el usuario hace clic en el botón:
+
+```html/5
+<form>
+  <label>
+    Username:
+    <input type="text">
+  </label>
+  <input type="image" alt="Sign in" src="./sign-in-button.png">
+</form>
+```
+
+### Objetos incrustados
+
+Los elementos `<object>`, que normalmente se utilizan para incrustaciones como Flash, PDF o ActiveX, también deben contener texto alternativo. Al igual que en las imágenes, este texto se muestra si el elemento no se procesa. El texto alternativo va dentro del elemento `object` como texto normal, como "Annual report" a continuación:
+
+```html
+<object type="application/pdf" data="/report.pdf">
+Annual report.
+</object>
+```
+
+## Etiquetar botones y enlaces
+
+Los botones y enlaces suelen ser cruciales para la experiencia de un sitio, y es importante que ambos tengan nombres accesibles buenos.
+
+### Botones
+
+Un elemento `button` siempre intenta calcular su nombre accesible utilizando su contenido de texto. Para los botones que no son parte de un `form`, escribir una acción clara como el contenido del texto puede ser todo lo que necesita para crear un buen nombre accesible.
+
+```html
+<button>Book Room</button>
+```
+
+{% Img src="image/admin/tcIDzNpCHS9AlfwflQjI.png", alt="Un formulario móvil con un botón 'Book Room'.", width="800", height="269" %}
+
+Una excepción común a esta regla son los botones de íconos. Un botón de ícono puede utilizar una imagen o una fuente de ícono para proporcionar el contenido de texto del botón. Por ejemplo, los botones que se utilizan en un editor de "Lo que ves es lo que obtienes (WYSIWYG)" para formatear el texto, suelen ser solo símbolos gráficos:
+
+{% Img src="image/admin/ZmQ77kLPbqd5iFOmn4SU.png", alt="Un botón de icono de alineación a la izquierda.", width="800", height="269" %}
+
+Cuando se trabaja con botones de icono, puede resultar útil darles un nombre accesible explícito mediante el atributo `aria-label`. `aria-label` anula cualquier contenido de texto dentro del botón, lo que le permite describir claramente la acción a cualquiera que use un lector de pantalla.
+
+```html
+<button aria-label="Left align"></button>
+```
+
+### Enlaces
+
+Al igual que los botones, los enlaces obtienen su nombre accesible principalmente de su contenido de texto. Un buen truco al crear un enlace es poner el texto más significativo en el enlace, en lugar de palabras de relleno como "Aquí" o "Leer más".
+
+{% Compare 'worse', 'Sin suficiente descripción' %}
+
+```html
+Check out our guide to web performance <a href="/guide">here</a>.
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'Contenido útil' %}
+
+```html
+Check out <a href="/guide">our guide to web performance</a>.
+```
+
+{% endCompare %}
+
+Esto es especialmente útil para los lectores de pantalla que ofrecen accesos directos para enumerar todos los enlaces de la página. Si los enlaces están llenos de texto de relleno repetitivo, estos atajos se vuelven mucho menos útiles:
+
+<figure>{% Img src="image/admin/IPxS2dwHMyGRvGxGi5n2.jpg", alt="El menú de enlaces de VoiceOver se llenó con la palabra 'aquí'.", width = "519", height="469" %} <figcaption>Ejemplo de VoiceOver, un lector de pantalla para macOS, que muestra el menú de navegación por enlaces.</figcaption></figure>
+
+## Etiquetar elementos de formulario
+
+Hay dos formas de asociar una etiqueta con un elemento de formulario, como una casilla de verificación. Cualquiera de los métodos hace que el texto de la etiqueta también se convierta en un objetivo de clic para la casilla de verificación, lo que también es útil para los usuarios de ratón o pantallas táctiles. Para asociar una etiqueta con un elemento, haga lo siguiente:
+
+- Coloque el elemento de entrada dentro de un elemento de etiqueta
+
+```html
+<label>
+  <input type="checkbox">Receive promotional offers?</input>
+</label>
+```
+
+- O use la etiqueta de atributo `for` para referirse al `id` del elemento
+
+```html
+<input id="promo" type="checkbox"></input>
+<label for="promo">Receive promotional offers?</label>
+```
+
+Cuando la casilla de verificación se ha etiquetado correctamente, el lector de pantalla puede informar que el elemento tiene la función de casilla de verificación, está en un estado marcado y se llama "Receive promotional offers?" como en el ejemplo de VoiceOver a continuación:
+
+<figure>{% Img src="image/admin/WklT2ymrCmceyrGUNizF.png", alt="Salida de texto de VoiceOver que muestra '¿Recibir ofertas promocionales?'", width="640", height="174" %}</figure>
+
+{% Assessment 'self-assessment' %}
diff --git a/src/site/content/es/accessible/labels-and-text-alternatives/self-assessment.assess.yml b/src/site/content/es/accessible/labels-and-text-alternatives/self-assessment.assess.yml
new file mode 100644
index 00000000000..7a074e4e939
--- /dev/null
+++ b/src/site/content/es/accessible/labels-and-text-alternatives/self-assessment.assess.yml
@@ -0,0 +1,89 @@
+setLeader: |
+  Check whether sample HTML elements have accessible names
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: "![temp](image/user/temp.svg)"
+    type: think-and-check
+    stem: Does this image have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Give an image an accessible name by adding an `alt` attribute.
+  - stimulus: |
+      ```html
+      <object type="application/pdf" data="/report.pdf" alt="Annual report"></object>
+      ```
+    type: think-and-check
+    stem: Does this object have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give an `<object>` element a name by providing text content.
+          (An `alt` attribute on an object will not be read by assistive technologies.)
+  - stimulus: |
+      This sample renders an icon button:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give a button an accessible name by providing text content,
+          an `aria-label` attribute, or an `aria-labelledby` attribute.
+  - stimulus: |
+      This sample renders an icon button with a tooltip that appears on hover and focus:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+        <span class="tooltip hidden">Open menu</span>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Even if the button's tooltip is visually hidden using CSS,
+          assistive technologies can still read its text content.
+
+          **Caution:** When visually hiding button text,
+          use CSS rather than the `hidden` attribute.
+          The `hidden` attribute removes the element
+          from the accessibility tree.
+  - stimulus: |
+      ```html
+      <label>
+        <input type="checkbox" value="subscribe"></input>
+        Subscribe to the newsletter?
+      </label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. The label is associated with the checkbox
+          because the label is the checkbox's parent.
+          So, assistive technologies treat the label's
+          text content as the input's name.
+  - stimulus: |
+      ```html
+      <input type="checkbox" value="subscribe"></input>
+      <label for="subscribe">Subscribe to the newsletter?</label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **No**. The checkbox's `value` attribute indicates
+          what text will be saved when the form is submitted,
+          but assistive technologies don't read it.
+          To provide an accessible name,
+          add an `id` attribute with the value `subscribe`
+          to associate the checkbox with the label.
diff --git a/src/site/content/es/angular/index.md b/src/site/content/es/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/es/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/es/angular/route-level-code-splitting-in-angular/index.md b/src/site/content/es/angular/route-level-code-splitting-in-angular/index.md
new file mode 100644
index 00000000000..56df651a27c
--- /dev/null
+++ b/src/site/content/es/angular/route-level-code-splitting-in-angular/index.md
@@ -0,0 +1,193 @@
+---
+layout: post
+title: División de código a nivel de ruta en Angular
+subhead: Mejora el rendimiento de tu aplicación mediante la división de código a nivel de ruta.
+hero: image/admin/WVwZbWEEXUfXzVTtAlha.jpg
+date: 2019-06-24
+description: Aprende a hacer que tu paquete de aplicaciones inicial sea más pequeño usando la división de código a nivel de ruta.
+authors:
+  - mgechev
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Esta publicación explica cómo configurar la [división de código](/reduce-javascript-payloads-with-code-splitting/) a nivel de ruta en una aplicación de Angular, lo que puede reducir el tamaño del paquete de JavaScript y mejorar drásticamente el [Time to Interactive (TTI): Tiempo de interacción](/tti/).
+
+*Puedes encontrar los ejemplos de código de este artículo en [GitHub](https://github.com/mgechev/code-splitting-web-dev). El ejemplo de eager routing está disponible en  [eager branch](https://github.com/mgechev/code-splitting-web-dev/tree/eager). El ejemplo de división de código a nivel de ruta está en [lazy branch](https://github.com/mgechev/code-splitting-web-dev/tree/lazy).*
+
+{% Aside %} Esta publicación asume la comprensión del enrutador de Angular. Para obtener una guía sobre cómo usarlo, visita la [documentación oficial](https://angular.io/guide/router) de Angular. {% endAside %}
+
+## Por qué es importante la división de código
+
+La creciente complejidad de las aplicaciones web ha llevado a un aumento significativo en la cantidad de JavaScript que se envía a los usuarios. Los archivos JavaScript grandes pueden retrasar notablemente la interactividad, por lo que puede ser un recurso costoso, especialmente en dispositivos móviles.
+
+La forma más eficaz de reducir los paquetes de JavaScript sin sacrificar funciones en tus aplicaciones es introducir una división de código agresiva.
+
+**[La división de código](/reduce-javascript-payloads-with-code-splitting/)** te permite dividir el JavaScript de tu aplicación en múltiples partes asociadas con diferentes rutas o características. Este enfoque solo envía a los usuarios el JavaScript que necesitan durante la carga inicial de la aplicación, lo que mantiene bajos los tiempos de carga.
+
+{% Aside 'note' %}
+
+Al usar la división de código, [Twitter y Tinder](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) observaron mejoras de hasta un 50% en su [Time to Interactive](/tti/).
+
+{% endAside %}
+
+## Técnicas de división de código
+
+La división de código se puede realizar en dos niveles: en el **nivel de componente** y en el **nivel de ruta**.
+
+- En la división de código a nivel de componente, mueve los componentes a sus propios fragmentos de JavaScript y los carga de forma diferida cuando se necesitan.
+- En la división de código a nivel de ruta, encapsula la funcionalidad de cada ruta en un fragmento separado. Cuando los usuarios navegan por tu aplicación, obtienen los fragmentos asociados con las rutas individuales y obtienen la funcionalidad asociada cuando la necesitan.
+
+Esta publicación se enfoca en configurar la división a nivel de ruta en Angular.
+
+### Aplicación de muestra
+
+Antes de profundizar en cómo usar la división de código de nivel de ruta en Angular, veamos una aplicación de muestra:
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">{% IFrame { src: 'https://stackblitz.com/github/mgechev/code-splitting-web-dev/tree/eager?embed=1&amp;file=src/app/app.component.ts&amp;view=preview' } %}</div>
+
+Consulta la implementación de los módulos de la aplicación. Dentro de `AppModule` se definen dos rutas: la ruta predeterminada asociada con `HomeComponent` y una `nyan` asociada con `NyanComponent`:
+
+```javascript
+@NgModule({
+  ...
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: '',
+        component: HomeComponent,
+        pathMatch: 'full'
+      },
+      {
+        path: 'nyan',
+        component: NyanComponent
+      }
+    ])
+  ],
+  ...
+})
+export class AppModule {}
+```
+
+### División de código a nivel de ruta
+
+Para configurar la división de código, es necesario refactorizar la ruta eager de `nyan`.
+
+La versión 8.1.0 de Angular CLI puede hacer todo por ti con el siguiente comando:
+
+```bash
+ng g module nyan --module app --route nyan
+```
+
+Esto generará:
+
+- Un nuevo módulo de enrutamiento llamado `NyanModule`
+- Una ruta en `AppModule` llamada `nyan` que cargará dinámicamente al `NyanModule`
+- Una ruta por default en `NyanModule`
+- Un componente llamado `NyanComponent` que se renderizará cuando el usuario llegue a la ruta por default
+
+¡Repasemos estos pasos manualmente para comprender mejor cómo implementar la división de código con Angular!
+
+Cuando el usuario navega a la ruta `nyan`, el enrutador renderizará el `NyanComponent` en la salida del enrutador.
+
+Para usar la división de código a nivel de ruta en Angular, define la propiedad `loadChildren` de la declaración de ruta y combínala con una importación dinámica:
+
+```javascript/2
+{
+  path: 'nyan',
+  loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
+}
+```
+
+Hay dos diferencias clave con la ruta eager:
+
+1. Estableces `loadChildren` en lugar de `component`. Al usar la división de código a nivel de ruta, debes de apuntar a los módulos cargados dinámicamente, en lugar de los componentes.
+2. En `loadChildren`, una vez que se resuelve la promesa, devuelves el `NyanModule` en lugar de apuntar al `NyanComponent`.
+
+El fragmento anterior especifica que cuando el usuario navega a `nyan`, Angular debe cargar dinámicamente el `nyan.module` desde el directorio de `nyan` y renderizar el componente asociado con la ruta predeterminada declarada en el módulo.
+
+Puedes asociar la ruta predeterminada con un componente usando esta declaración:
+
+```javascript
+import { NgModule } from '@angular/core';
+import { NyanComponent } from './nyan.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [NyanComponent],
+  imports: [
+    RouterModule.forChild([{
+      path: '',
+      pathMatch: 'full',
+      component: NyanComponent
+    }])
+  ]
+})
+export class NyanModule {}
+```
+
+Este código renderiza `NyanComponent` cuando el usuario navega a `https://example.com/nyan`.
+
+Para verificar que el enrutador de Angular descarga el `nyan.module` de manera diferida en tu entorno local, haz los siguientes pasos:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. Haz clic en **NYAN** en la aplicación de muestra.
+2. Ten en cuenta que el archivo de `nyan-nyan-module.js` aparece en la pestaña de red.
+
+{% Img src="image/admin/wT4xLV2OkrZ2b7QaQz8L.png", alt="Carga diferida de paquetes de JavaScript con división de código a nivel de ruta", width="800", height="524" %}
+
+*Encuentra este ejemplo [en GitHub](https://github.com/mgechev/code-splitting-web-dev/tree/lazy/src).*
+
+### Mostrar un spinner
+
+En este momento, cuando el usuario hace clic en el botón  **NYAN**, la aplicación no indica que está cargando JavaScript en segundo plano. Para brindar una retroalimentación al usuario mientras carga el script, probablemente desees agregar un spinner.
+
+Para hacer eso, comienza por agregar un marcado para el indicador dentro del elemento de `router-outlet` en `app.component.html`:
+
+```html
+<router-outlet>
+  <span class="loader" *ngIf="loading"></span>
+</router-outlet>
+```
+
+Luego agrega una clase de `AppComponent` para manejar eventos de enrutamiento. Esta clase definirá la bandera de `loading` en `true` cuando escuche el `RouteConfigLoadStart` y establecerá la bandera en `false` cuando escuche el evento de `RouteConfigLoadEnd`.
+
+```javascript
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  loading: boolean;
+  constructor(router: Router) {
+    this.loading = false;
+    router.events.subscribe(
+      (event: RouterEvent): void => {
+        if (event instanceof NavigationStart) {
+          this.loading = true;
+        } else if (event instanceof NavigationEnd) {
+          this.loading = false;
+        }
+      }
+    );
+  }
+}
+```
+
+En el siguiente ejemplo, hemos introducido una latencia artificial de 500 ms para que puedas ver el spinner en acción.
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">{% IFrame { src: 'https://stackblitz.com/github/mgechev/code-splitting-web-dev/tree/lazy?embed=1&amp;file=src/app/app.component.ts&amp;view=preview' } %}</div>
+
+{% Aside 'warning' %} La división de código puede mejorar significativamente el tiempo de carga inicial de una aplicación, pero tiene el costo de ralentizar la navegación posterior. En la [próxima publicación](/route-preloading-in-angular) sobre la precarga de rutas, verás cómo solucionar este problema. {% endAside %}
+
+## Conclusión
+
+Puedes reducir el tamaño del paquete de tus aplicaciones de Angular aplicando la división de código a nivel de ruta:
+
+1. Utiliza el generador de módulos de carga diferida de Angular CLI para hacer un andamiaje automático a una ruta cargada dinámicamente.
+2. Agrega un indicador de carga cuando el usuario navega por una ruta diferida para mostrar que hay una acción en curso.
diff --git a/src/site/content/es/angular/route-preloading-in-angular/index.md b/src/site/content/es/angular/route-preloading-in-angular/index.md
new file mode 100644
index 00000000000..86e6e55e7c8
--- /dev/null
+++ b/src/site/content/es/angular/route-preloading-in-angular/index.md
@@ -0,0 +1,149 @@
+---
+layout: post
+title: Estrategias de precarga de ruta en Angular
+subhead: Cargue las rutas con anticipación para acelerar la navegación de los usuarios.
+hero: image/admin/q4b86k6REnNHkpjQnsLK.jpg
+hero_position: bottom
+alt: Bola de cristal
+date: 2019-07-09
+description:
+  Aprenda a usar las estrategias de precarga de Angular para aplicaciones más rápidas.
+authors:
+  - mgechev
+tags:
+  - performance
+feedback:
+  - api
+---
+
+La [división de código a nivel de ruta](/route-level-code-splitting-in-angular) puede ayudarlo a reducir el tiempo de carga inicial de una aplicación al retrasar el JavaScript asociado con las rutas que inicialmente no son necesarias. De esta manera, el enrutador Angular espera hasta que un usuario navega a una ruta determinada antes de activar una solicitud de red para descargar el JavaScript asociado.
+
+Si bien esta técnica es excelente para la carga inicial de la página, puede ralentizar la navegación, dependiendo de la latencia de red y el ancho de banda de los usuarios. Una forma de abordar este problema es con la **precarga de ruta**. Con la precarga, cuando el usuario se encuentra en una ruta determinada, puede descargar y almacenar en caché el JavaScript asociado con las rutas que probablemente se necesitarán a continuación. El enrutador Angular brinda esta función desde el primer momento.
+
+En esta publicación, aprenderá cómo acelerar la navegación al usar la división de código a nivel de ruta aprovechando la precarga de JavaScript en Angular.
+
+## Estrategias de precarga de ruta en Angular
+
+El enrutador Angular proporciona una propiedad de configuración llamada `preloadingStrategy`, que define la lógica para precargar y procesar módulos de Angular de carga diferida. Cubriremos dos posibles estrategias:
+
+- `PreloadAllModules`, que carga previamente todas las rutas de carga diferida, como su nombre lo indica
+- `QuicklinkStrategy`, que cargapreviamente solo las rutas asociadas con los enlaces en la página actual.
+
+*El resto de esta publicación hace referencia a una aplicación Angular de muestra. Puede encontrar el código fuente [en GitHub](https://github.com/mgechev/route-preloading-web-dev).*
+
+### Usar la estrategia `PreloadAllModules`
+
+La aplicación de muestra tiene varias rutas de carga diferida. Para cargarlas todas previamente usando la estrategia `PreloadAllModules`, integrada en Angular, especifíquelo como el valor de la propiedad `preloadingStrategy` en la configuración del enrutador:
+
+```js
+import { RouterModule, PreloadAllModules } from '@angular/router';
+// …
+
+RouterModule.forRoot([
+  …
+], {
+  preloadingStrategy: PreloadAllModules
+})
+// …
+```
+
+Ahora entregue la aplicación y mire el panel de **Red** en Chrome DevTools:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+Debería ver que el enrutador descargó `nyan-nyan-module.js` y `about-about-module.js` en segundo plano cuando abrió la aplicación:
+
+<figure data-size="full">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/TVi6LCasiwZI1hxJrBOL.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/e9h6JBVl8TUGMWOSAWyC.mp4"], controls="true", loop="true", muted="true" %} <figcaption> La estrategia PreloadAllModules en acción. </figcaption></figure>
+
+El enrutador también registró las declaraciones de ruta de los módulos para que cuando navegue a una URL asociada con cualquiera de los módulos precargados, la transición sea instantánea.
+
+### Usar la estrategia de precarga de Quicklink
+
+`PreloadAllModules` es útil en muchos casos. Sin embargo, cuando tiene docenas de módulos, su precarga agresiva puede aumentar el uso de la red. Además, dado que el enrutador necesita registrar las rutas en todos los módulos precargados, puede causar cálculos intensivos en el hilo de la interfaz de usuario y llevar a una experiencia de usuario lenta.
+
+La [biblioteca de enlaces rápidos](https://github.com/GoogleChromeLabs/quicklink) proporciona una mejor estrategia para aplicaciones más grandes. Utilice la [API IntersectionObserver](/intersectionobserver-v2/) para cargar previamente solo los módulos asociados con los enlaces que están actualmente visibles en la página.
+
+Puede agregar un enlace rápido a una aplicación Angular utilizando el paquete [ngx-quicklink](https://www.npmjs.com/package/ngx-quicklink). Comience instalando el paquete desde npm:
+
+```bash
+npm install --save ngx-quicklink
+```
+
+Una vez que esté disponible en su proyecto, puede usar `QuicklinkStrategy` especificando la estrategia de `preloadingStrategy` del enrutador e importando el `QuicklinkModule`:
+
+```js
+import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
+…
+
+@NgModule({
+  …
+  imports: [
+    …
+    QuicklinkModule,
+    RouterModule.forRoot([…], {
+      preloadingStrategy: QuicklinkStrategy
+    })
+  ],
+  …
+})
+export class AppModule {}
+```
+
+Ahora, cuando vuelva a abrir la aplicación, notará que el enrutador solo carga previamente `nyan-nyan-module.js`, ya que el botón en el centro de la página tiene un enlace de enrutador. Cuando abra la navegación lateral, notará que el enrutador carga previamente la ruta "Acerca de":
+
+<figure data-size="full">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/dfZkoiQyNh4fUj4DJjrc.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/SkNp99W1Bv2tsaRgOwoe.mp4"], controls="true", loop="true", muted="true" %} <figcaption> Una demostración de la estrategia de precarga de enlaces rápidos. </figcaption></figure>
+
+### Usar la estrategia de precarga de Quicklink en varios módulos de carga diferida
+
+El ejemplo anterior funcionará para una aplicación básica, pero si su aplicación contiene varios módulos de carga diferida, deberá importar el `QuicklinkModule` a un módulo compartido, exportarlo y luego importar el módulo compartido a sus módulos de carga diferida.
+
+Primero importe el `QuicklinkModule` de `ngx-quicklink` a su módulo compartido y expórtelo:
+
+```js
+import { QuicklinkModule } from 'ngx-quicklink';
+…
+
+@NgModule({
+  …
+  imports: [
+    QuicklinkModule
+  ],
+  exports: [
+    QuicklinkModule
+  ],
+  …
+})
+export class SharedModule {}
+```
+
+Luego importe su `SharedModule` en todos sus módulos de carga diferida:
+
+```js
+import { SharedModule } from '@app/shared/shared.module';
+…
+
+@NgModule({
+  …
+  imports: [
+      SharedModule
+  ],
+  …
+});
+```
+
+Los `Quicklinks` ahora estarán disponibles en sus módulos de carga diferida.
+
+## Más allá de la precarga básica
+
+Si bien la precarga selectiva a través de un enlace rápido puede acelerar significativamente la navegación, puede hacer su estrategia de precarga aún más eficiente en la red mediante el uso de la precarga predictiva, que es implementada por [Guess.js](https://github.com/guess-js/guess). Al analizar un informe de Google Analytics u otro proveedor de analítica, Guess.js puede predecir el viaje de navegación de un usuario y cargar previamente solo los fragmentos de JavaScript que probablemente se necesitarán a continuación.
+
+Puede aprender a usar Guess.js con Angular en [esta página del sitio de Guess.js](https://guess-js.github.io/docs/angular).
+
+## Conclusión
+
+Para acelerar la navegación al utilizar la división de códigos a nivel de ruta:
+
+1. Elija la estrategia de precarga adecuada según el tamaño de su aplicación:
+    - Las aplicaciones con pocos módulos pueden utilizar la estrategia `PreloadAllModules`.
+    - Las aplicaciones con muchos módulos deben usar una estrategia de precarga personalizada, como el enlace rápido de Angular, o precarga predictiva, como se implementa en Guess.js.
+2. Configure la estrategia de precarga estableciendo la propiedad `preloadStrategy` del enrutador Angular.
diff --git a/src/site/content/es/animations/index.md b/src/site/content/es/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/es/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/es/authors/index.11tydata.js b/src/site/content/es/authors/index.11tydata.js
new file mode 100644
index 00000000000..9b43a39a0dd
--- /dev/null
+++ b/src/site/content/es/authors/index.11tydata.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {index} = require('../../../_collections/hooks/authors');
+
+module.exports = {
+  pagination: {
+    before: (authors) => index(authors),
+  },
+};
diff --git a/src/site/content/es/authors/index.md b/src/site/content/es/authors/index.md
new file mode 100644
index 00000000000..5c777019e37
--- /dev/null
+++ b/src/site/content/es/authors/index.md
@@ -0,0 +1,13 @@
+---
+layout: index-page
+imageType: 'round'
+title: Authors
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+pagination:
+  data: collections.authors
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/es/authors/individual.11tydata.js b/src/site/content/es/authors/individual.11tydata.js
new file mode 100644
index 00000000000..863738473c3
--- /dev/null
+++ b/src/site/content/es/authors/individual.11tydata.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {individual} = require('../../../_collections/hooks/authors');
+const {lang} = require('../lang');
+
+module.exports = {
+  pagination: {
+    before: (authors) => individual(authors, lang),
+  },
+};
diff --git a/src/site/content/es/authors/individual.md b/src/site/content/es/authors/individual.md
new file mode 100644
index 00000000000..12bf6cef375
--- /dev/null
+++ b/src/site/content/es/authors/individual.md
@@ -0,0 +1,19 @@
+---
+layout: item-page
+path: 'authors'
+showHero: true
+imageType: 'round'
+title: Authors
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+renderData:
+  title: "{{ paged.overrideTitle or paged.title | i18n(locale) or title }}"
+  description: "{{ paged.description | i18n(locale) or description }}"
+  rss: "{{ paged.href }}feed.xml"
+pagination:
+  data: collections.authors
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/es/blog/accent-color/index.md b/src/site/content/es/blog/accent-color/index.md
new file mode 100644
index 00000000000..4214717b2e5
--- /dev/null
+++ b/src/site/content/es/blog/accent-color/index.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: CSS `accent-color`
+subhead: Lleve el color de su marca a las entradas de formulario integradas en HTML con una línea de código.
+authors:
+  - adamargyle
+  - jarhar
+description: Lleve el color de su marca a las entradas de formulario integradas en HTML con una línea de código.
+date: 2021-08-11
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WOcuCLCwMr0M2lF17bmm.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/huEpiCoJQ6dAo8rHGsZT.png
+tags:
+  - blog
+  - css
+---
+
+Los elementos de formulario HTML actuales son [difíciles de personalizar](https://codepen.io/GeoffreyCrofte/pen/BiHzp). Se siente como si fuera una elección entre pocos o ningún estilo personalizado, o restablecer los estilos de entrada y construirlos desde cero, lo cual implica mucho más trabajo del previsto. También puede provocar el olvido de estilos para elementos de estado ([indeterminado](https://developer.mozilla.org/docs/Web/CSS/:indeterminate), te estoy viendo) y la pérdida de funciones de accesibilidad integradas. Recrear por completo lo que proporciona el navegador, puede ser más trabajo del que está buscando.
+
+```css
+accent-color: hotpink;
+```
+
+La propiedad CSS `accent-color` de la [especificación de la interfaz de usuario de CSS](https://www.w3.org/TR/css-ui-4/#widget-accent) está aquí para teñir elementos con una línea de CSS, lo que le ahorra esfuerzos de personalización al proporcionar una forma de llevar su marca a los elementos.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CfSS3F1XUsfCHIB86xeE.png", alt="Una captura de pantalla de una demostración de color de acento en tema claro, donde la casilla de verificación, los botones de radio, el control deslizante de rango y la barra de progreso están teñidos de color hot-pink (rosa vívido).", width="800", height="548" %} <figcaption> <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Damostración</a> </figcaption></figure>
+
+La propiedad `accent-color` también funciona con [`color-scheme`](/color-scheme/), lo que permite a los autores teñir tanto los elementos claros como los oscuros. En el siguiente ejemplo, el usuario tiene un tema oscuro activo, la página usa `color-scheme: light dark`, y usa el mismo `accent-color: hotpink` para controles teñidos de hotpink con temas oscuros.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3gxeeZoSLY34tsMxkyt9.png", alt="Una captura de pantalla de una demostración de color de acento con tema oscuro, donde la casilla de verificación, los botones de radio, el control deslizante de rango y la barra de progreso están teñidos de hot-pink (rosa vívido).", width="800", height="548" %} <figcaption><a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demostración</a></figcaption></figure>
+
+### Compatibilidad del navegador
+
+En el momento de escribir estas líneas, Chromium 93+ y Firefox 92+ admiten `accent-color`.
+
+## Elementos compatibles
+
+Actualmente, solo cuatro elementos se pueden teñir a través de la propiedad `accent-color`: [casilla de verificación](#checkbox), [radio](#radio), [rango](#range) y [progreso](#progress). Cada uno se puede previsualizar aquí [https://accent-color.glitch.me](https://accent-color.glitch.me) en esquemas de colores claros y oscuros.
+
+{% Aside "warning" %} Si los siguientes elementos de demostración son todos del mismo color, entonces su navegador aún no admite `accent-color`. {% endAside %}
+
+### Casilla de verificación
+
+{% Codepen {user: 'web-dot-dev', id: 'dyWjGqZ'}%}
+
+### Radio
+
+{% Codepen {user: 'web-dot-dev', id: 'WNjKrgB'}%}
+
+### Rango
+
+{% Codepen {user: 'web-dot-dev', id: 'yLbqeRy'}%}
+
+### Progreso
+
+{% Codepen {user: 'web-dot-dev', id: 'rNmrxqL'}%}
+
+## Garantizando el contraste
+
+Para evitar que existan elementos inaccesibles, los navegadores con `accent-color` deben determinar un [color de contraste elegible](https://webaim.org/articles/contrast/) para usar junto con el acento personalizado. A continuación se muestra una captura de pantalla que demuestra cómo Chrome 94 (izquierda) y Firefox 92 Nightly (derecha) difieren en sus algoritmos:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DJhB56n10Eh8O29RsRdE.png", alt="Una captura de pantalla de Firefox y Chromium uno al lado del otro, que muestra un espectro completo de casillas de verificación en varios tonos y sombras.", width="800", height="832" %}
+
+Lo más importante que hay que sacar de esto es **confiar en el navegador**. Proporcione un color de marca y confíe en que tomará decisiones inteligentes por usted.
+
+{% Aside %} El navegador no cambiará tu color en un tema oscuro. {% endAside %}
+
+## Extra: más tinte
+
+Quizás se esté preguntando cómo teñir más de estos cuatro elementos de forma. Aquí hay un entorno de pruebas mínimo que tiñe:
+
+- el anillo de enfoque
+- resaltado de la selección de texto
+- [marcadores](/css-marker-pseudo-element/) de lista
+- indicadores de flecha (solo Webkit)
+- pulgar de la barra de desplazamiento (solo Firefox)
+
+```css
+html {
+  --brand: hotpink;
+  scrollbar-color: hotpink Canvas;
+}
+
+:root { accent-color: var(--brand); }
+:focus-visible { outline-color: var(--brand); }
+::selection { background-color: var(--brand); }
+::marker { color: var(--brand); }
+
+:is(
+  ::-webkit-calendar-picker-indicator,
+  ::-webkit-clear-button,
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button
+) {
+  color: var(--brand);
+}
+```
+
+{% Codepen {user: 'web-dot-dev', id: 'RwVBreJ'}%}
+
+### Futuro potencial
+
+La especificación no limita la aplicación de `accent-color` a los cuatro elementos que se muestran en este artículo, más adelante se podrían agregar más elementos compatibles. Los elementos como `<option>` en `<select>` podrían resaltarse con el `accent-color`.
+
+¿Qué más le gusta teñir en la web? ¡Envíe un tweet a [@argyleink](https://twitter.com/argyleink) con su selector y es posible que se agregue a este artículo!
diff --git a/src/site/content/es/blog/app-shortcuts/index.md b/src/site/content/es/blog/app-shortcuts/index.md
new file mode 100644
index 00000000000..11d97b8885d
--- /dev/null
+++ b/src/site/content/es/blog/app-shortcuts/index.md
@@ -0,0 +1,158 @@
+---
+title: Haz las cosas rápidamente con los accesos directos de aplicaciones
+subhead: Los accesos directos de aplicaciones brindan acceso rápido a un puñado de acciones comunes que los usuarios necesitan con frecuencia.
+authors:
+  - beaufortfrancois
+  - jungkees
+date: 2020-05-20
+updated: 2020-10-12
+hero: image/admin/1ekafMZjtzcd0G3TLQJ4.jpg
+alt: Una foto de un teléfono Android que muestra un menú de accesos directos a las aplicaciones
+description: Los accesos directos de aplicaciones brindan acceso rápido a un puñado de acciones comunes que los usuarios necesitan con frecuencia.
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+Para mejorar la productividad de los usuarios y facilitar la participación en tareas clave, la plataforma web ahora admite accesos directos a las aplicaciones. Permiten a los desarrolladores web proporcionar un acceso rápido a un puñado de acciones comunes que los usuarios necesitan con frecuencia.
+
+Este artículo te enseñará a cómo definir esos accesos directos a las aplicaciones. Además, aprenderás algunas de las mejores prácticas asociadas.
+
+## Acerca de los accesos directos de aplicaciones
+
+Los accesos directos a las aplicaciones ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de tu aplicación web. El fácil acceso a esas tareas desde cualquier lugar donde se muestre el icono de la aplicación mejorará la productividad de los usuarios y aumentará su compromiso con la aplicación web.
+
+El menú de accesos directos de la aplicación se invoca haciendo clic con el botón derecho en el ícono de la aplicación en la barra de tareas (Windows) o en el dock (macOS) en el escritorio del usuario, o presionando prolongadamente el ícono del iniciador de la aplicación en Android.
+
+<figure>{% Img src="image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt="Captura de pantalla del menú de accesos directos abierto de una aplicación en Android", width="800", height="420" %} }<figcaption> Menú de accesos directos abierto de aplicaciones en Android</figcaption></figure>
+
+<figure>{% Img src="image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt="Captura de pantalla del menú de accesos directos abierto de una aplicación en Windows", width="800", height="420" %}<figcaption> Menú de accesos directos abierto de las aplicaciones en Windows</figcaption></figure>
+
+El menú de accesos directos de la aplicación se muestra solo para [las aplicaciones web progresivas (PWA)](/progressive-web-apps/) que están instaladas en el escritorio o dispositivo móvil del usuario. Consulta [¿Qué se necesita para ser instalable?](/install-criteria/) para conocer los requisitos de instalación.
+
+Cada acceso directo a la aplicación expresa intención del usuario, cada uno de los cuales está asociado con una URL dentro del [alcance](/add-manifest/#scope) de tu aplicación web. La URL se abre cuando los usuarios activan el acceso directo de la aplicación. Entre los ejemplos de accesos directos a aplicaciones se incluyen los siguientes:
+
+- Elementos de navegación de nivel superior (por ejemplo, inicio, navegación, pedidos recientes)
+- Búsqueda
+- Tareas de entrada de datos (por ejemplo, redactar un correo electrónico o un tweet, agregar un recibo)
+- Actividades (por ejemplo, iniciar un chat con los contactos más populares)
+
+{% Aside %} Muchas gracias a la gente de Microsoft Edge e Intel por diseñar y estandarizar los accesos directos a las aplicaciones. Chrome depende de una comunidad de personas comprometidas que trabajan juntos para hacer avanzar el proyecto de Chromium. No todos los usuarios de Chromium son de Google, ¡y estos colaboradores merecen un reconocimiento especial! {% endAside %}
+
+## Definir accesos directos a aplicaciones en el manifiesto de la aplicación web
+
+Los accesos directos a aplicaciones se definen opcionalmente en el [manifiesto de la aplicación web](/add-manifest), el cual es un archivo JSON que le informa al navegador sobre tu aplicación web progresiva y cómo debe comportarse cuando se instala en el escritorio o dispositivo móvil del usuario. Siendo más especifico, se declaran en el miembro de la matriz de `shortcuts`. A continuación se muestra un ejemplo de un posible manifiesto de aplicación web.
+
+```json
+{
+  "name": "Player FM",
+  "start_url": "https://player.fm?utm_source=homescreen",
+  …
+  "shortcuts": [
+    {
+      "name": "Open Play Later",
+      "short_name": "Play Later",
+      "description": "View the list of podcasts you saved for later",
+      "url": "/play-later?utm_source=homescreen",
+      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "View Subscriptions",
+      "short_name": "Subscriptions",
+      "description": "View the list of podcasts you listen to",
+      "url": "/subscriptions?utm_source=homescreen",
+      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
+    }
+  ]
+}
+```
+
+Cada miembro de la matriz de `shortcuts` es un diccionario que contiene al menos un `name` y una `url`. Los otros miembros son opcionales.
+
+### name
+
+La etiqueta legible por humanos para el acceso directo de la aplicación cuando se muestra al usuario.
+
+### short_name (opcional)
+
+La etiqueta legible por humanos utilizada donde el espacio es limitado. Se recomienda que lo proporciones, aunque sea opcional.
+
+### description (opcional)
+
+El propósito legible por humanos del acceso directo a la aplicación. No se usa al momento de escribir este artículo, pero puede estar expuesto a tecnología de asistencia en el futuro.
+
+### url
+
+La URL que se abre cuando un usuario activa el acceso directo de la aplicación. Esta URL debe existir dentro del alcance del manifiesto de la aplicación web. Si es una URL relativa, la URL base será la URL del manifiesto de la aplicación web.
+
+### icons (opcional)
+
+Una matriz de objetos de recursos de imágenes. Cada objeto debe incluir una propiedad de `src` y una propiedad de `sizes`. A diferencia de [los iconos de manifiesto de la aplicación web](/add-manifest/#icons), el `type` de imagen es opcional.
+
+Los archivos SVG no son compatibles en el momento de escribir este artículo, usa PNG en su lugar.
+
+Si deseas usar íconos con píxeles perfectos, proporciónalos en incrementos de 48dp (es decir, íconos de 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 píxeles). De lo contrario, se recomienda que utilices un solo icono de 192x192 píxeles.
+
+Como medida de calidad, los íconos deben tener al menos la mitad del tamaño ideal del dispositivo en Android, que es 48dp. Por ejemplo, para mostrarse en una [pantalla xxhdpi](https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp), el icono debe tener al menos 72 por 72 píxeles. (Esto se deriva de la [fórmula para convertir](https://developer.android.com/training/multiscreen/screendensities#dips-pels) unidades dp en unidades de píxeles).
+
+## Prueba los accesos directos de tu aplicación
+
+Para verificar que los accesos directos de su aplicación están configurados correctamente, usa el panel de **Manifiesto** en el panel de **Aplicación** de DevTools.
+
+<figure>{% Img src="image/admin/rEL0r8lEfYHlsj0ylLSL.png", alt="Captura de pantalla de los accesos directos a las aplicaciones en DevTools", width="800", height="534" %}<figcaption> Accesos directos de aplicaciones que se muestran en DevTools</figcaption></figure>
+
+Este panel proporciona una versión legible por humanos de muchas de las propiedades de tu manifiesto, incluidos los accesos directos a las aplicaciones. Facilita la verificación de que todos los iconos de acceso directo, si es que fueron proporcionados, se carguen correctamente.
+
+Es posible que los accesos directos a las aplicaciones no estén disponibles de inmediato para todos los usuarios porque las actualizaciones de la aplicación web progresiva están limitadas a una vez al día. Obtén más información sobre [cómo Chrome maneja las actualizaciones del manifiesto de la aplicación web](/manifest-updates).
+
+## Mejores prácticas
+
+### Ordenar los accesos directos de aplicaciones por prioridad
+
+Te recomendamos que ordenes los accesos directos a las aplicaciones por prioridad y los accesos directos a las aplicaciones más importantes aparecerán primero en la matriz de  `shortcuts` ya que el límite en la cantidad de accesos directos a las aplicaciones que se muestran varía según la plataforma. Chrome y Edge en Windows, por ejemplo, limitan la cantidad de accesos directos a aplicaciones a 10, mientras que Chrome para Android solo toma en cuenta los primeros 4 accesos directos a las aplicaciones.
+
+{% Aside %} Chrome 92 para Android 7 ahora permite solo 3 accesos directos a aplicaciones. Se agregó un acceso directo a la configuración del sitio, tomando uno de los espacios de acceso directo disponibles para la aplicación. {% endAside %}
+
+### Utiliza nombres distintos para los accesos directos de aplicaciones
+
+No debes de confiar en los íconos para diferenciar los accesos directos de aplicaciones, ya que es posible que no siempre estén visibles. Por ejemplo, macOS no admite iconos en el menú de accesos directos del dock. Utiliza nombres distintos para cada acceso directo de la aplicación.
+
+### Medir el uso de accesos directos a las aplicaciones
+
+Deberías de anotar los accesos directos a las aplicaciones de `url` como lo haces con `start_url` para fines analíticos (por ejemplo, `url: "/myshortcut?utm_source=homescreen"`).
+
+## Compatibilidad del navegador
+
+Los accesos directos a aplicaciones están disponibles en Android (Chrome 84), Windows (Chrome 85 y Edge 85), ChromeOS (Chrome 92), macOS y Linux (Chrome 96 y Edge 96).
+
+<figure>{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/6KgvySxUcryuD0gwXa0u.png",alt="Captura de pantalla de un menú de accesos directos abierto de aplicaciones en ChromeOS", width="800", height="450" %}<figcaption> Menú de accesos directos abierto de aplicaciones en ChromeOS</figcaption></figure>
+
+## Soporte de Trusted Web Activity
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap), la herramienta recomendada para crear aplicaciones de Android que utiliza [Trusted Web Activity (Actividades web confiables)](/using-a-pwa-in-your-android-app/), lee los accesos directos de la aplicación desde el manifiesto de la aplicación web y genera automáticamente la configuración correspondiente para la aplicación de Android. Ten en cuenta que los iconos para los accesos directos a aplicaciones son [obligatorios](https://github.com/GoogleChromeLabs/bubblewrap/issues/116) y deben tener al menos 96 por 96 píxeles en Bubblewrap.
+
+[PWABuilder](https://www.pwabuilder.com/), una gran herramienta para convertir fácilmente una aplicación web progresiva en una Trusted Web Activity, permite accesos directos a aplicaciones con algunas [advertencias](https://github.com/pwa-builder/CloudAPK/issues/25).
+
+Para los desarrolladores que integran Trusted Web Activity manualmente en su aplicación de Android, se pueden usar [accesos directos de aplicaciones de Android](https://developer.android.com/guide/topics/ui/shortcuts) para implementar los mismos comportamientos.
+
+## Muestra
+
+<figure>
+  <video controls autoplay loop muted src="https://storage.googleapis.com/web-dev-assets/app-shortcuts/app-shortcuts-recording.mp4">
+  </video></figure>
+
+Consulta la [muestra de accesos directos de la aplicación](https://app-shortcuts.glitch.me) y su [fuente](https://glitch.com/edit/#!/app-shortcuts).
+
+{% Glitch { id: 'app-shortcuts', path: 'public/manifest.json', height: 480 } %}
+
+## Enlaces Útiles
+
+- [Explicador](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Shortcuts/explainer.md)
+- [Especificaciones](https://w3c.github.io/manifest/#shortcuts-member)
+- [Muestra de accesos directos a aplicaciones](https://app-shortcuts.glitch.me) | [Fuente de muestra de accesos directos a aplicaciones](https://glitch.com/edit/#!/app-shortcuts)
+- [Error de seguimiento](https://bugs.chromium.org/p/chromium/issues/detail?id=955497)
+- [Entrada de ChromeStatus.com](https://chromestatus.com/feature/5706099464339456)
+- Componente Blink: [`UI>Browser>WebAppInstalls`](https://crbug.com/?q=component:UI%3EBrowser%3EWebAppInstalls)
diff --git a/src/site/content/es/blog/appcache-removal/index.md b/src/site/content/es/blog/appcache-removal/index.md
new file mode 100644
index 00000000000..a8b5ed20b3c
--- /dev/null
+++ b/src/site/content/es/blog/appcache-removal/index.md
@@ -0,0 +1,191 @@
+---
+layou: post
+title: Preparación para la eliminación de AppCache
+subhead: Chrome 85 elimina la compatibilidad con AppCache de forma predeterminada. La mayoría de los desarrolladores deberían migrar de AppCache ahora y no esperar más.
+authors:
+  - jeffposnick
+description: Detalles de los planes de Chrome y otros navegadores para eliminar AppCache.
+date: 2020-05-18
+updated: 2021-08-23
+tags:
+  - blog
+  - chrome-84
+  - origin-trials
+  - service-worker
+hero: image/admin/YDs2H4gLPhIwPMjPtc8o.jpg
+alt: Un contenedor de almacenamiento a la antigua.
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673"
+---
+
+Siguiendo [los anuncios anteriores](https://blog.chromium.org/2020/01/appcache-scope-restricted.html), la compatibilidad con [AppCache](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) se eliminará de Chrome y otros navegadores basados en Chromium. Alentamos a los desarrolladores a migrar fuera de AppCache ahora, en lugar de esperar más.
+
+Los [trabajadores de servicio](https://developer.chrome.com/docs/workbox/service-worker-overview/), que son ampliamente compatibles con los navegadores actuales, ofrecen una alternativa para proporcionar la experiencia sin conexión que ofrecía AppCache. Consulte [Estrategias de migración](#migration-strategies).
+
+## Línea de tiempo
+
+Los [cambios recientes](https://blog.chromium.org/2020/03/chrome-and-chrome-os-release-updates.html) en el cronograma de lanzamiento de Chrome significan que el momento de algunos de estos pasos puede variar. Intentaremos mantener actualizada esta línea de tiempo, pero en este punto, migre fuera de AppCache lo antes posible, en lugar de esperar hitos específicos.
+
+Una función "obsoleta"(deprecated) aún existe, pero muestra mensajes de advertencia que desalientan su uso. Una función "eliminada" ya no existe en el navegador.
+
+<div>
+  <table>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/UKF8cK0EwMI/m/NLhsIrs-AQAJ">Hecha obsoleta en contextos no seguros</a></td>
+    <td>Chrome 50 (abril de 2016)</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/ANnafFBhReY/m/1Xdr53KxBAAJ?pli=1">Eliminación de contextos no seguros</a></td>
+    <td>Chrome 70 (octubre de 2018)</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/0daqyD8kCQAJ">Hecha obsoleta en contextos seguros</a></td>
+    <td>Chrome 79 (diciembre de 2019)</td>
+    </tr>
+    <tr>
+    <td><a href="https://blog.chromium.org/2020/01/appcache-scope-restricted.html">Restricción del alcance de AppCache</a></td>
+    <td>Chrome 80 (febrero de 2020)</td>
+    </tr>
+    <tr>
+    <td>Comienza la prueba de origen "inversa"</td>
+    <td>Chrome 84 (julio de 2020)</td>
+    </tr>
+    <tr>
+    <td>
+<a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/AvxoE6JpBgAJ">Eliminación de contextos seguros</a>, excepto aquellos que participaron en la prueba de origen</td>
+    <td>Chrome 85 (agosto de 2020)</td>
+    </tr>
+    <tr>
+    <td>Eliminación completa de contextos seguros para todos, con la finalización de la prueba de origen</td>
+    <td>5 de octubre de 2021 (aproximadamente Chrome 95)</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} Esta línea de tiempo se aplica a Chrome en **todas las plataformas excepto iOS**. También hay una línea de tiempo ajustada para el uso de AppCache dentro de un [WebView](https://developer.android.com/reference/android/webkit/WebView) de Android. Para obtener más información, consulte [La historia en las plataformas](#the-cross-platform-story) más adelante en esta publicación. {% endAside %}
+
+## Prueba de origen
+
+La línea de tiempo enumera dos próximos hitos para la eliminación. A partir de Chrome 85, AppCache ya no estará disponible en Chrome de forma predeterminada. Los desarrolladores que necesiten tiempo adicional para migrar fuera de AppCache pueden [registrarse](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673) [para una prueba de origen](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) "inversa" para ampliar la disponibilidad de AppCache para sus aplicaciones web. La prueba de origen comenzará en Chrome 84 (antes de la eliminación predeterminada en Chrome 85) y estará activa hasta el 5 de octubre de 2021 (aproximadamente Chrome 95). En ese momento, AppCache se eliminará por completo para todos, incluso para quienes se registraron para la prueba de origen.
+
+{% Aside %} ¿Por qué llamamos a esto una prueba de origen "inversa"? Normalmente, una prueba de origen permite a los desarrolladores optar por el acceso temprano a la nueva funcionalidad antes de que se provea de forma predeterminada en Chrome. En este caso, permitimos a los desarrolladores optar por el uso de tecnología heredada incluso después de que se haya eliminado de Chrome, pero solo temporalmente. {% endAside %}
+
+Para participar en la prueba de origen "inversa":
+
+<ol>
+<li>
+<a href="https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673">Solicite un token</a> para su origen.</li>
+<li>Agregue el token a sus páginas HTML. Hay <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#how-do-i-enable-an-experimental-feature-on-my-origin">dos formas</a> de hacerlo:<ul>
+<li> Agregue una etiqueta <code>&lt;meta&gt;</code> <code>origin-trial</code> al encabezado de cada página. Por ejemplo: <code>&lt;meta http-equiv="origin-trial" content="AQUI_VA_EL_TOKEN"&gt;</code>
+</li>
+<li> Alternativamente, configure su servidor para devolver respuestas que contengan el encabezado HTTP <code>Origin-Trial</code>. El encabezado de respuesta resultante debería tener un aspecto similar a: <code>Origin-Trial: AQUI_VA_EL_TOKEN</code>
+</li>
+</ul>
+</li>
+<li>Agregue el mismo token a sus manifiestos de AppCache. Haga esto a través de un nuevo campo en su manifiesto, con el formato:</li>
+</ol>
+
+```text
+ORIGIN-TRIAL:
+AQUI_VA_EL_TOKEN
+```
+
+(Debe haber una nueva línea entre `ORIGIN-TRIAL` y su token).
+
+
+
+
+
+{% Aside %} El token de un manifiesto **debe** estar en un `ORIGIN-TRIAL` del propio manifiesto. A diferencia del token de una página HTML, no se puede proporcionar a través de un encabezado HTTP. {% endAside %}
+
+Puede ver un proyecto de muestra incrustado a continuación que demuestra cómo agregar los tokens de prueba de origen correctos en los archivos `index.html` y `manifest.appcache`.
+
+{% Glitch { id: 'appcache-reverse-ot', path: 'manfiest.appcache', height: 480 } %}
+
+### ¿Por qué se necesitan tokens en varios lugares?
+
+El **mismo token de prueba de origen** debe asociarse con:
+
+- **Todas sus páginas HTML** que usan AppCache.
+- **Todos sus manifiestos de AppCache a** través del campo de manifiesto `ORIGIN-TRIAL`.
+
+Si ha participado en pruebas de origen en el pasado, es posible que haya agregado el token solo a sus páginas HTML. La prueba de origen "inversa" de AppCache es especial porque también necesita asociar un token con cada uno de sus manifiestos de AppCache.
+
+Agregar el token de prueba de origen a sus páginas HTML habilita la interfaz `window.applicationCache` desde sus aplicaciones web. Las páginas que no están asociadas con un token no podrán usar los métodos y eventos de `window.applicationCache`. Las páginas sin un token tampoco podrán cargar recursos desde AppCache. A partir de Chrome 85, se comportarán como si AppCache no hubiera existido.
+
+Agregar el token de prueba de origen a sus manifiestos de AppCache indica que cada manifiesto sigue siendo válido. A partir de Chrome 85, cualquier manifiesto que no tenga un `ORIGIN-TRIAL` se tratará como mal formado y se ignorarán las reglas dentro del manifiesto.
+
+### Logística y tiempos de implementación de la prueba de origen
+
+Si bien la prueba de origen "inversa" comienza oficialmente con Chrome 84, puede [registrarse](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673) para la prueba de origen hoy y agregar los tokens a sus manifiestos HTML y AppCache. A medida que la audiencia de su aplicación web se actualice gradualmente a Chrome 84, todos los tokens que ya haya agregado entrarán en vigor.
+
+Una vez que haya agregado un token a su manifiesto de AppCache, visite `about://appcache-internals` para confirmar que su instancia local de Chrome (versión 84 o posterior) ha asociado correctamente el token de prueba de origen con las entradas en caché de su manifiesto. Si se reconoce su prueba de origen, debería ver un campo con `Token Expires: Tue Apr 06 2021...` en esa página, asociado con su manifiesto:
+
+<figure>{% Img src="image/admin/Xid94kdPT5yGbQzBL4at.jpg", alt="Interfaz about://appcache-internals mostrando un token reconocido.", width="550", height="203" %}</figure>
+
+## Prueba antes de la eliminación
+
+Le recomendamos encarecidamente que migre fuera de AppCache tan pronto como sea posible. Si desea probar la eliminación de AppCache en sus aplicaciones web, utilice la [bandera](https://www.chromium.org/developers/how-tos/run-chromium-with-flags) `about://flags/#app-cache` para simular su eliminación. Esta bandera está disponible a partir de Chrome 84.
+
+## Estrategias de migración {: #migration-strategies }
+
+Los trabajadores de servicio, que son [ampliamente compatibles con los navegadores actuales](https://developer.mozilla.org/docs/Web/API/ServiceWorker#Browser_compatibility), ofrecen una alternativa a la experiencia sin conexión proporcionada por AppCache.
+
+Hemos proporcionado un [polyfill](https://github.com/GoogleChromeLabs/sw-appcache-behavior) que utiliza un trabajador de servicio para replicar algunas de las funciones de AppCache, aunque no replica toda su interfaz. En particular, no reemplaza la interfaz `window.applicationCache` ni los eventos relacionados de AppCache.
+
+Para casos más complejos, bibliotecas como [Workbox](https://developer.chrome.com/docs/workbox/) ofrecen una manera fácil de crear un trabajador de servicio moderno para su aplicación web.
+
+### Los trabajadores de servicio y AppCache son mutuamente excluyentes
+
+Mientras trabaja en su estrategia de migración, tenga en cuenta que Chrome deshabilitará la funcionalidad AppCache en cualquier página que se cargue bajo el [control](/service-worker-lifecycle/#scope-and-control) de un trabajador del servicio. En otras palabras, tan pronto como implemente un trabajador de servicio que controle una página determinada, ya no podrá usar AppCache en ella.
+
+Debido a esto, le recomendamos que no intente migrar a trabajadores de servicio pieza por pieza. Sería un error implementar un trabajador de servicio que solo contiene parte de su lógica de caché. No puede recurrir a AppCache para "llenar los vacíos".
+
+De manera similar, si implementa un trabajador de servicio antes de la eliminación de AppCache y luego descubre que necesita revertir a su implementación anterior de AppCache, debe asegurarse de [anular el registro](https://stackoverflow.com/a/33705250/385997) de ese trabajador de servicio. Siempre que haya un trabajador de servicio registrado en el alcance de una página determinada, no se utilizará AppCache.
+
+## La historia  en las plataformas
+
+Le recomendamos que haga un seguimiento con un proveedor de navegadores específico si desea obtener más información sobre sus planes para la eliminación de AppCache.
+
+### Firefox en todas las plataformas
+
+Firefox declaró [obsoleta](https://www.fxsitecompat.dev/en-CA/docs/2015/application-cache-api-has-been-deprecated/) a AppCache en la versión 44 (septiembre de 2015) y ha [eliminado](https://www.fxsitecompat.dev/en-CA/docs/2019/application-cache-storage-has-been-removed-in-nightly-and-early-beta/) su soporte en sus versiones Beta y Nightly a partir de septiembre de 2019.
+
+### Safari en iOS y macOS
+
+Safari declaró [obsoleta](https://bugs.webkit.org/show_bug.cgi?id=181764) a AppCache a principios de 2018.
+
+### Chrome en iOS
+
+Chrome para iOS es un caso especial, ya que utiliza un motor de navegador diferente al de Chrome en otras plataformas: [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview). Actualmente, los trabajadores de servicio no son compatibles con las aplicaciones de iOS que usan WKWebView, y el anuncio de eliminación de AppCache de Chrome no cubre la [disponibilidad de AppCache en Chrome para iOS](https://webkit.org/status/#specification-application-cache). Tenga esto en cuenta si sabe que su aplicación web tiene una audiencia significativa en Chrome para iOS.
+
+### WebViews de Android
+
+Algunos desarrolladores de aplicaciones de Android usan Chrome [WebView](https://developer.android.com/reference/android/webkit/WebView) para mostrar contenido web y también pueden usar AppCache. Sin embargo, no es posible habilitar una prueba de origen para WebView. Por ello, Chrome WebView admitirá AppCache sin una prueba de origen hasta que se lleve a cabo la eliminación final, esperada en Chrome 90.
+
+## Aprenda más
+
+A continuación, se muestran algunos recursos para los desarrolladores que migran de AppCache a los trabajadores de servicio.
+
+### Artículos
+
+- [Trabajadores de servicio: una introducción](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+- [El ciclo de vida del trabajador de servicio](/service-worker-lifecycle/)
+- [Entrenamiento de aplicaciones web progresivas](https://developers.google.com/web/ilt/pwa)
+- [Fiabilidad de la red](/reliable/)
+
+### Herramientas
+
+- [Polyfill de AppCache](https://github.com/GoogleChromeLabs/sw-appcache-behavior)
+- [Workbox](https://developer.chrome.com/docs/workbox/)
+- [PWA Builder](https://www.pwabuilder.com/)
+
+## Obtenga ayuda
+
+Si tiene un problema con una herramienta específica, haga un reporte del problema en su repositorio de GitHub.
+
+Puede hacer una pregunta general sobre la migración fuera de AppCache en [Stack Overflow](https://stackoverflow.com/), usando la etiqueta <code>[html5-appcache](https://stackoverflow.com/questions/tagged/html5-appcache)</code>.
+
+Si encuentra un error relacionado con la eliminación de AppCache de Chrome, por favor [repórtelo](https://crbug.com/new) mediante el seguimiento de incidencias de Chromium.
+
+*Imagen héroe basada en [Archivos de la Institución Smithsonian, Acc. 11-007, Caja 020, Imagen No. MNH-4477](https://www.si.edu/object/usnm-storage-drawer:siris_arc_391797).*
diff --git a/src/site/content/es/blog/async-clipboard/index.md b/src/site/content/es/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..fce057eb423
--- /dev/null
+++ b/src/site/content/es/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: Desbloqueo del acceso al portapapeles
+subhead: Acceso al portapapeles más seguro y desbloqueado para texto e imágenes
+authors:
+  - developit
+  - thomassteiner
+description: La API Async Clipboard simplifica la función de copiar y pegar con permisos.
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: Portapapeles con lista de compras
+feedback:
+  - api
+---
+
+En los últimos años, los navegadores han utilizado [`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands) para las interacciones con el portapapeles. Aunque es ampliamente compatible, este método de cortar y pegar tenía un costo: el acceso al portapapeles era sincrónico y solo se podía leer y escribir al DOM.
+
+Eso funciona muy bien para pequeños fragmentos de texto, pero hay muchos casos en los que bloquear la página para transferir desde el portapapeles resulta en una mala experiencia. Es posible que se necesite una limpieza o decodificación de imágenes que requiera mucho tiempo antes de que el contenido se pueda pegar de manera segura. Es posible que el navegador necesite cargar o incorporar recursos vinculados desde un documento pegado. Eso bloquearía la página mientras espera en el disco o en la red. Imagine agregar permisos a esta combinación, lo que requiere que el navegador bloquee la página mientras solicita acceso al portapapeles. Al mismo tiempo, los permisos establecidos por `document.execCommand()` para la interacción del portapapeles son definidos en líneas generales y varían entre los navegadores.
+
+La [API del portapapeles asíncrono (API Async Clipboard)](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api) aborda estos problemas, proporcionando un modelo de permisos bien definido que no bloquea la página. Safari anunció recientemente el [soporte a la API en la versión 13.1](https://webkit.org/blog/10855/). Con eso, los principales navegadores tienen un nivel básico de soporte. En el momento de escribir estas líneas, Firefox solo admite texto; y el soporte de imágenes está limitado a PNG en algunos navegadores. Si está interesado en utilizar la API, [consulte una tabla de compatibilidad de navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility) antes de continuar.
+
+{% Aside %} La API del portapapeles asíncrono se limita a manejar texto e imágenes. Chrome 84 introduce una función experimental que permite que el portapapeles maneje cualquier tipo de datos arbitrario. {% endAside %}
+
+## Copiar: escribir datos en el portapapeles
+
+### writeText()
+
+Para copiar texto al portapapeles, ejecute `writeText()`. Dado que esta API es asincrónica, la función `writeText()` devuelve una Promesa (Promise) que se resuelve o rechaza dependiendo de si el texto correspondiente se copia correctamente:
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+### write()
+
+En realidad, `writeText()` es solo un método conveniente para el método `write()` genérico, que también le permite copiar imágenes al portapapeles. Al igual que `writeText()`, es asincrónico y devuelve una Promesa.
+
+Para copiar una imagen en el portapapeles, necesita la imagen como un [`blob`](https://developer.mozilla.org/docs/Web/API/blob). Una forma de hacer esto es solicitando la imagen de un servidor usando `fetch()`, luego ejecutar [`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob) en la respuesta.
+
+Solicitar una imagen del servidor puede no ser deseable o posible por una variedad de razones. Afortunadamente, también puede dibujar la imagen en un lienzo (canvas) y ejecutar el método [`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)
+
+A continuación, pase un conjunto de objetos `ClipboardItem` como parámetro del método `write()`. Actualmente, solo puede pasar una imagen a la vez, pero esperamos agregar soporte para varias imágenes en el futuro. `ClipboardItem` toma un objeto con el tipo MIME de la imagen como clave y el blob como valor. Para los objetos Blob obtenidos por `fetch()` o `canvas.toBlob()`, la propiedad `blob.type` contiene automáticamente el tipo MIME correcto para una imagen.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} Safari (WebKit) trata la activación del usuario de manera diferente a Chromium (Blink) (consulte el [error de WebKit #222262](https://bugs.webkit.org/show_bug.cgi?id=222262)). Para Safari, ejecute todas las operaciones asincrónicas en una promesa cuyo resultado se asigne al `ClipboardItem`:
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### El evento copy
+
+En el caso de que un usuario inicie una copia del portapapeles, se le proporcionarán datos no textuales como un blob. El [evento `copy`](https://developer.mozilla.org/docs/Web/API/Document/copy_event) incluye `clipboardData` con los elementos que ya están en el formato correcto, lo que elimina la necesidad de crear manualmente un Blob. Ejecute `preventDefault()` para evitar el comportamiento predeterminado en favor de su propia lógica, luego copie el contenido al portapapeles. Lo que no se cubre en este ejemplo es cómo recurrir a API anteriores cuando la API del portapapeles no es compatible. Cubriremos eso en [Detección de características](#feature-detection), más adelante en este artículo.
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Image copied.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## Pegar: leer datos del portapapeles
+
+### readText()
+
+Para leer texto del portapapeles, ejecute `navigator.clipboard.readText()` y espere a que se resuelva la Promesa devuelta:
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+### read()
+
+El método `navigator.clipboard.read()` también es asincrónico y devuelve una Promesa. Para leer una imagen del portapapeles, obtenga una lista de [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem) y luego repita la iteración sobre ellos.
+
+Cada `ClipboardItem` puede albergar contenido de diferentes tipos, por lo que deberá iterar la lista de tipos, nuevamente usando un bucle `for...of`. Para cada tipo, ejecute `getType()` con el tipo actual como argumento para obtener el Blob correspondiente. Como antes, este código no está vinculado a imágenes y funcionará con otros tipos de archivos futuros.
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### Trabajar con archivos pegados
+
+Es útil para los usuarios poder utilizar atajos de teclado del portapapeles como <kbd>ctrl</kbd> + <kbd>c</kbd> <kbd>ctrl</kbd> + <kbd>v</kbd>. Chromium expone *archivos de solo lectura* en el portapapeles como se describe a continuación. Esto se activa cuando el usuario accede al acceso directo de pegado predeterminado del sistema operativo o cuando el usuario hace clic en **Editar y** luego en **Pegar** en la barra de menú del navegador. No se necesita más código de plomería.
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Read the file's contents, assuming it's a text file.
+  // There is no way to write back to it.
+  console.log(await file.text());
+});
+```
+
+### El evento paste
+
+Como se señaló anteriormente, existen planes para introducir eventos para que funcionen con la API del portapapeles, pero por ahora puede usar el evento `paste`. Funciona muy bien con los nuevos métodos asincrónicos para leer el texto del portapapeles. Al igual que con el evento `copy`, no olvide se olvide de ejecutar `preventDefault()`.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+Al igual que con el `copy`, recurrir a API anteriores cuando la API del portapapeles no es compatible se abordará en [Detección de características](#feature-detection).
+
+## Manejo de varios tipos de archivos
+
+La mayoría de las implementaciones colocan varios formatos de datos en el portapapeles para una sola operación de cortar o copiar. Hay dos razones para esto: como desarrollador de aplicaciones, no tiene como conocer las funcionalidades de la aplicación de la cual un usuario desea copiar texto o imágenes, y muchas aplicaciones permiten pegar datos estructurados como texto sin formato. Esto se presenta a los usuarios como un elemento del menú **Editar** llamado **Combinar formato** o **Mantener solo texto** o algo por el estilo.
+
+El siguiente ejemplo muestra cómo hacer esto. Este ejemplo usa `fetch()` para obtener datos de imagen, pero también podría provenir de un [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas) o de la [API de acceso al sistema de archivos](/file-system-access/).
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png');
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## Seguridad y permisos
+
+El acceso al portapapeles siempre ha supuesto un problema de seguridad para los navegadores. Sin los permisos adecuados, una página podría copiar silenciosamente todo tipo de contenido malicioso en el portapapeles de un usuario que produciría resultados catastróficos al pegarlo. Imagine una página web que copia silenciosamente `rm -rf /` o una [bomba zip](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html) a su portapapeles.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="Cuadro de diálogo del navegador que solicita al usuario el permiso del portapapeles.", width="800", height="338" %}<figcaption> La solicitud de permiso para la API del portapapeles.</figcaption></figure>
+
+Dar a las páginas web acceso de lectura sin restricciones al portapapeles es aún más problemático. Los usuarios copian rutinariamente información confidencial como contraseñas y datos personales al portapapeles, que luego podría ser leído por cualquier página sin el conocimiento del usuario.
+
+Como ocurre con muchas API nuevas, la API del portapapeles solo es compatible con las páginas servidas a través de HTTPS. Para ayudar a prevenir el abuso, el acceso al portapapeles solo está permitido cuando una página está en la pestaña activa. Las páginas en pestañas activas pueden escribir en el portapapeles sin solicitar permiso, pero leer desde el portapapeles siempre requiere permiso.
+
+Se han agregado permisos para copiar y pegar a la [API de permisos](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web). El permiso `clipboard-write` se otorga automáticamente a las páginas en la pestaña activa. Se debe solicitar el permiso `clipboard-read`, lo que puede hacerse al intentar leer los datos del portapapeles. El siguiente código muestra este último caso:
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Will be 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Listen for changes to the permission state
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+También puede controlar si se requiere un gesto de usuario para invocar cortar o pegar usando la opción `allowWithoutGesture`. El valor predeterminado de este valor varía según el navegador, por lo que siempre debe incluirlo.
+
+Aquí es donde la naturaleza asincrónica de la API del portapapeles es realmente útil: intentar leer o escribir datos del portapapeles solicita automáticamente al usuario permiso si aún no se ha otorgado. Dado que la API se basa en promesas, esto es completamente transparente, y un usuario que niega el permiso del portapapeles hace que la promesa sea rechazada para que la página pueda responder adecuadamente.
+
+Debido a que Chrome solo permite el acceso al portapapeles cuando una página es la pestaña activa, encontrará que algunos de los ejemplos aquí no se ejecutan si se pegan directamente en DevTools, ya que DevTools en sí es la pestaña activa. Pero hay un truco: retrase el acceso al portapapeles usando `setTimeout()`, luego haga clic rápidamente dentro de la página para enfocarla antes de que se ejecuten las funciones:
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## Integración de la política de permisos
+
+Para usar la API en iframes, debe habilitarla con la [Política de permisos](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/), que define un mecanismo que permite habilitar y deshabilitar selectivamente varias API y funciones del navegador. Concretamente, debe pasar una o ambas de las opciones siguientes: `clipboard-read` o `clipboard-write`, según las necesidades de su aplicación.
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## Detección de características
+
+Para usar la API del portapapeles asíncrono de forma compatible con todos los navegadores, prueba `navigator.clipboard` y recurre a métodos anteriores. Por ejemplo, así es como puede implementar el pegado para incluir otros navegadores:
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+Eso no es todo. Antes de la API del portapapeles asíncrono, había una combinación de diferentes implementaciones de copiar y pegar en los navegadores web. En la mayoría de los navegadores, la función de copiar y pegar del navegador se puede activar mediante `document.execCommand('copy')` y `document.execCommand('paste')`. Si el texto que se va a copiar es una cadena que no está presente en el DOM, debe inyectarse en el DOM y seleccionarse:
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+});
+```
+
+En Internet Explorer, también puede acceder al portapapeles a través de `window.clipboardData`. Si se accede mediante un gesto de usuario, como un evento de clic, que forma parte de las solicitudes de permiso responsables, no se muestra ningún mensaje de permiso.
+
+## Demostraciones
+
+Puede probar la API del portapapeles asíncrono en las demostraciones a continuación o [directamente en Glitch](https://async-clipboard-api.glitch.me/).
+
+El primer ejemplo muestra cómo mover texto dentro y fuera del portapapeles.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Para probar la API con imágenes, use esta demostración. Recuerde que solo se admiten archivos PNG y solo en [algunos navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility).
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Próximos pasos
+
+Chrome está trabajando activamente para expandir la API del portapapeles asíncrono con eventos simplificados alineados con la [API de arrastrar y soltar (Drag and Drop API)](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Debido a los riesgos potenciales, Chrome está avanzando de forma cuidadosa. Para mantenerse actualizado sobre el progreso de Chrome, vea este artículo y nuestro [blog](/blog/) para obtener actualizaciones.
+
+Por ahora, la compatibilidad con la API del Portapapeles está disponible en [varios navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility).
+
+¡Feliz copiar y pegar!
+
+## Enlaces relacionados
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## Agradecimientos
+
+[Darwin Huang](https://www.linkedin.com/in/darwinhuang/) y [Gary Kačmarčík](https://www.linkedin.com/in/garykac/) implementaron la API del portapapeles asíncrono. Darwin también proporcionó la demostración. Gracias a [Kyarik](https://github.com/kyarik) y nuevamente a Gary Kačmarčík por revisar partes de este artículo.
+
+Hero image de [Markus Winkler](https://unsplash.com/@markuswinkler) en [Unsplash](https://unsplash.com/photos/7iSEHWsxPLw).
diff --git a/src/site/content/es/blog/asyncify/index.md b/src/site/content/es/blog/asyncify/index.md
new file mode 100644
index 00000000000..eaaceb8a6d6
--- /dev/null
+++ b/src/site/content/es/blog/asyncify/index.md
@@ -0,0 +1,348 @@
+---
+title: Uso de las API web asincrónicas de WebAssembly
+description: Aprenda a invocar las API web asincrónicas al compilar lenguajes tradicionalmente sincrónicos en WebAssembly.
+date: 2021-04-26
+hero: image/9oK23mr86lhFOwKaoYZ4EySNFp02/3XqfQyjjfxEw8T3azz0W.jpg
+alt: Una señal de paso de peatones que le pide a los peatones que esperen.
+authors:
+  - rreverser
+tags:
+  - blog
+  - webassembly
+  - file-system
+---
+
+Las API de E/S en la web son asincrónicas, pero son sincrónicas en la mayoría de los lenguajes del sistema. Al compilar código en WebAssembly, necesita unir un tipo de API a otro, y este puente lo constituye Asyncify. En esta publicación, aprenderá cuándo y cómo usar Asyncify y cómo funciona bajo el capó.
+
+## E/S en lenguajes del sistema
+
+Comenzaré con un ejemplo simple en C. Digamos que desea leer el nombre del usuario de un archivo y saludarlo con un mensaje "¡Hola, (nombre de usuario)!":
+
+```cpp
+#include <stdio.h>
+
+int main() {
+    FILE *stream = fopen("name.txt", "r");
+    char name[20+1];
+    size_t len = fread(&name, 1, 20, stream);
+    name[len] = '\0';
+    fclose(stream);
+    printf("Hello, %s!\n", name);
+    return 0;
+}
+```
+
+Si bien el ejemplo no hace mucho, ya demuestra algo que encontrará en una aplicación de cualquier tamaño: lee algunas entradas del mundo exterior, las procesa internamente y escribe las salidas en el mundo exterior. Toda esta interacción con el mundo exterior ocurre a través de algunas funciones comúnmente llamadas funciones de entrada-salida, también abreviadas como E/S.
+
+Para leer el nombre desde C, necesita al menos dos invocaciones de E/S cruciales: `fopen` para abrir el archivo y `fread` para leer los datos desde él. Una vez que recupere los datos, puede usar otra función de E/S `printf` para imprimir el resultado en la consola.
+
+Esas funciones parecen bastante simples a primera vista y no tiene que pensar dos veces en la maquinaria involucrada en la lectura o escritura de los datos. Sin embargo, en función del entorno, pueden ocurrir muchas cosas en el interior:
+
+- Si el archivo de entrada está ubicado en una unidad local, la aplicación necesita realizar una serie de accesos a la memoria y al disco para ubicar el archivo, verificar los permisos, abrirlo para leerlo y luego leer bloque por bloque hasta que se recupere la cantidad solicitada de bytes. Esto puede ser bastante lento, en función de la velocidad de su disco y del tamaño solicitado.
+- O bien, el archivo de entrada podría estar localizado en una ubicación de red montada, en cuyo caso, la pila de red ahora también estará involucrada, lo que aumenta la complejidad, la latencia y el número de reintentos potenciales para cada operación.
+- Finalmente, incluso no está garantizado que `printf` imprima cosas en la consola y se podría redirigir a un archivo o a una ubicación de red, en cuyo caso tendría que seguir los mismos pasos anteriores.
+
+En pocas palabras, la E/S puede ser lenta y no se puede predecir cuánto tiempo tomará una invocación en particular con un vistazo rápido al código. Mientras se ejecuta esa operación, toda la aplicación aparecerá congelada y no responderá al usuario.
+
+Esto tampoco se limita a C o C ++. La mayoría de los lenguajes de sistema presentan todas las E/S en forma de API sincrónicas. Por ejemplo, si traduce el ejemplo a Rust, la API puede parecer más simple, pero se aplican los mismos principios. Simplemente realiza una invocación y espera sincrónicamente a que devuelva el resultado, mientras realiza todas las operaciones costosas y, finalmente, devuelve el resultado en una única invocación:
+
+```rust
+fn main() {
+    let s = std::fs::read_to_string("name.txt");
+    println!("Hello, {}!", s);
+}
+```
+
+Pero, ¿qué sucede cuando intenta compilar cualquiera de esos ejemplos en WebAssembly y traducirlos a la web? O, para proporcionar un ejemplo específico, ¿a qué se podría traducir la operación de "lectura de archivo"? Necesitaría leer datos desde algún almacenamiento.
+
+## Modelo asincrónico de la web
+
+La web tiene una variedad de opciones de almacenamiento diferentes a las que puede hacer mapeo, como almacenamiento en memoria (objetos JS), [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage), [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API), almacenamiento del lado del servidor y una nueva [API de acceso al sistema de archivos](/file-system-access/).
+
+Sin embargo, solo dos de esas API, la de almacenamiento en memoria y `localStorage` se pueden usar sincrónicamente, además ambas son las opciones más limitantes en cuanto a lo que se puede almacenar y por cuánto tiempo. Todas las demás opciones proporcionan solo API asincrónicas.
+
+Esta es una de las propiedades principales de la ejecución de código en la web: cualquier operación que requiera mucho tiempo, que incluya cualquier E/S, debe ser asíncrónica.
+
+La razón es que la web ha sido históricamente de un solo subproceso, y cualquier código de usuario que toque la interfaz de usuario debe ejecutarse en el mismo subproceso que la interfaz de usuario. Tiene que competir por el tiempo de CPU con otras tareas importantes como el diseño, renderizado y manejo de eventos. No es deseable que una parte de JavaScript o WebAssembly pueda iniciar una operación de "lectura de archivo" y bloquear todo lo demás (la pestaña completa o, en el pasado, todo el navegador) durante un intervalo de unos milisegundos a unos pocos segundos, hasta que termine.
+
+En cambio, el código solo puede programar una operación de E/S junto con una devolución de invocación para que se ejecute una vez finalizada. Estas devoluciones de invocación se ejecutan como parte del ciclo de eventos del navegador. No entraré en detalles aquí, pero si está interesado en aprender cómo funciona el bucle de eventos bajo el capó, consulte el documento [Tareas, microtareas, colas y horarios](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) que explica este tema en profundidad.
+
+La versión corta es que el navegador ejecuta todos los fragmentos de código en una especie de bucle infinito, al tomarlos de la cola uno por uno. Cuando se activa algún evento, el navegador pone en cola el controlador correspondiente y, en la siguiente iteración del ciclo, se saca de la cola y se ejecuta. Este mecanismo permite simular la simultaneidad y ejecutar muchas operaciones paralelas mientras se usa un solo hilo.
+
+Lo importante que debe recordar acerca de este mecanismo es que, mientras se ejecuta su código JavaScript personalizado (o WebAssembly), el bucle de eventos se bloquea y, mientras está así, no hay forma de reaccionar a ningún controlador externo, evento, E/S, etc. La única forma de recuperar los resultados de E/S es registrar una devolución de invocación, terminar de ejecutar su código y devolver el control al navegador para que pueda seguir procesando las tareas pendientes. Una vez finalizada la E/S, su controlador se convertirá en una de esas tareas y se ejecutará.
+
+Por ejemplo, si usted quisiera reescribir los ejemplos anteriores en JavaScript moderno y decide leer un nombre dsde una URL remota, usaría la API Fetch y la sintaxis async-await:
+
+```js
+async function main() {
+  let response = await fetch("name.txt");
+  let name = await response.text();
+  console.log("Hello, %s!", name);
+}
+```
+
+Aunque parece sincrónico, bajo el capó cada `await` es esencialmente un caramelo de sintaxis para las devoluciones de invocación:
+
+```js
+function main() {
+  return fetch("name.txt")
+    .then(response => response.text())
+    .then(name => console.log("Hello, %s!", name));
+}
+```
+
+En este ejemplo descaramelizado, que es un poco más claro, se inicia una solicitud y las respuestas se suscriben con la primera devolución de invocación. Una vez que el navegador recibe la respuesta inicial, solo los encabezados HTTP, invoca de forma asincrónica esta devolución de invocación. La devolución de invocación comienza a leer el cuerpo como texto mediante `response.text()` y se suscribe al resultado con otra devolución de invocación. Finalmente, una vez que `fetch` ha recuperado todo el contenido, invoca la última devolución de invocación, que imprime "¡Hola, (nombre de usuario)!" en la consola.
+
+Gracias a la naturaleza asincrónica de esos pasos, la función original puede devolver el control al navegador tan pronto como se haya programado la E/S y dejar toda la interfaz de usuario receptiva y disponible para otras tareas, incluida la renderización, el desplazamiento, etc., mientras la E/S se está ejecutando en segundo plano.
+
+Como ejemplo final, incluso las API simples como "sleep", que hace que una aplicación espere un número específico de segundos, también son una forma de operación de E/S:
+
+```cpp
+#include <stdio.h>
+#include <unistd.h>
+// ...
+printf("A\n");
+sleep(1);
+printf("B\n");
+```
+
+Claro, podría traducirlo de una manera muy sencilla que bloquearía el hilo actual hasta que expire el tiempo:
+
+```js
+console.log("A");
+for (let start = Date.now(); Date.now() - start < 1000;);
+console.log("B");
+```
+
+De hecho, eso es exactamente lo que hace Emscripten en [su implementación predeterminada de "suspender",](https://github.com/emscripten-core/emscripten/blob/16d5755a3f71f27d0c67b8d7752f94844e56ef7c/src/library_pthread_stub.js#L47-L52) pero eso es muy ineficiente, bloqueará toda la interfaz de usuario y no permitirá que se manejen otros eventos mientras tanto. Generalmente, no haga eso en el código de producción.
+
+En cambio, una versión más idiomática de "suspender" en JavaScript implicaría invocar a `setTimeout()` y suscribirse con un controlador:
+
+```js
+console.log("A");
+setTimeout(() => {
+    console.log("B");
+}, 1000);
+```
+
+¿Qué tienen en común todos estos ejemplos y distintas API? En cada caso, el código idiomático en el lenguaje de sistema original usa una API de bloqueo para la E/S, mientras que un ejemplo equivalente para la web usa una API asincrónica en su lugar. Al compilar en la web, necesita transformarse de alguna manera entre esos dos modelos de ejecución, y WebAssembly no tiene todavía la capacidad incorporada para hacerlo.
+
+## Cerrar la brecha con Asyncify
+
+Aquí es donde entra en juego [Asyncify](https://emscripten.org/docs/porting/asyncify.html). Asyncify es una función de tiempo de compilación compatible con Emscripten que permite pausar todo el programa y reanudarlo de forma asincrónica más tarde.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/VSMrdTiQ7PubW6vfE6WZ.svg", alt="Un gráfico de invocación que describe una invocación JavaScript -&gt; WebAssembly -&gt; API web -&gt; de tarea asincrónica, donde Asyncify vuelve a conectar el resultado de la tarea asincrónica de regreso a WebAssembly", width="800", height="200" %}
+
+### Uso en C / C ++ con Emscripten
+
+Si quisiera usar Asyncify para implementar un "suspender" asincrónico para el último ejemplo, podría hacerlo así:
+
+```cpp
+#include <stdio.h>
+#include <emscripten.h>
+
+EM_JS(void, async_sleep, (int seconds), {
+    Asyncify.handleSleep(wakeUp => {
+        setTimeout(wakeUp, seconds * 1000);
+    });
+});
+…
+puts("A");
+async_sleep(1);
+puts("B");
+```
+
+[`EM_JS`](https://emscripten.org/docs/api_reference/emscripten.h.html?highlight=em_js#c.EM_JS) es una macro que permite definir fragmentos de JavaScript como si fueran funciones de C. En su interior, usa una función [`Asyncify.handleSleep()`](https://emscripten.org/docs/porting/asyncify.html#making-async-web-apis-behave-as-if-they-were-synchronous) que le inidca a Emscripten que suspenda el programa y proporciona un controlador `wakeUp()` que debe invocarse una vez que la operación asincrónica haya finalizado. En el ejemplo anterior, el controlador se pasa a `setTimeout()`, pero podría usarse en cualquier otro contexto que acepte devoluciones de invocación. Finalmente, puede invocar a `async_sleep()` desde cualquier lugar que desee, al igual que con `sleep()` regular o con cualquier otra API sincrónica.
+
+Al compilar dicho código, debe indicarle a Emscripten que active la función Asyncify. Para hacerlo pase `-s ASYNCIFY` así como también [`-s ASYNCIFY_IMPORTS=[func1, func2]`](https://emscripten.org/docs/porting/asyncify.html#more-on-asyncify-imports) con una lista de funciones en forma de matriz que pueden ser asincrónicas.
+
+```shell
+emcc -O2 \
+    -s ASYNCIFY \
+    -s ASYNCIFY_IMPORTS=[async_sleep] \
+    ...
+```
+
+Esto le permite a Emscripten saber que cualquier invocación a esas funciones puede requerir que se guarde y restaure el estado, por lo que el compilador inyectará código de soporte alrededor de dichas invocaciones.
+
+Ahora, cuando ejecute este código en el navegador, verá un registro de salida sin interrupciones como es de esperar, con B apareciendo con un breve retraso después de A.
+
+```text
+A
+B
+```
+
+También puede [devolver valores de las funciones Asyncify](https://emscripten.org/docs/porting/asyncify.html#returning-values). Lo que debe hacer es devolver el resultado de `handleSleep()` y pasar el resultado a la devolución de invocación `wakeUp()`. Por ejemplo, si, en lugar de leer de un archivo, desea obtener un número de un recurso remoto, puede usar un fragmento como el que se muestra a continuación para emitir una solicitud, suspender el código C y reanudar una vez que se recupere el cuerpo de la respuesta. Todo hecho a la perfección como si la invocación fuera sincrónica.
+
+```js
+EM_JS(int, get_answer, (), {
+     return Asyncify.handleSleep(wakeUp => {
+        fetch("answer.txt")
+            .then(response => response.text())
+            .then(text => wakeUp(Number(text)));
+    });
+});
+puts("Getting answer...");
+int answer = get_answer();
+printf("Answer is %d\n", answer);
+```
+
+De hecho, para las API basadas en promesas como `fetch()`, incluso puede combinar Asyncify con la función async-await de JavaScript en lugar de utilizar la API basada en devolución de invocaciones. Para eso, en lugar de `Asyncify.handleSleep()`, invoque a `Asyncify.handleAsync()`. Luego, en lugar de tener que programar una devolución de invocación `wakeUp()`, puede pasar una función JavaScript  `async` con el uso de `await` y `return` adentro, para hacer que el código se vea aún más natural y sincrónico, sin perder ninguno de los beneficios de la E/S asincrónica.
+
+```js
+EM_JS(int, get_answer, (), {
+     return Asyncify.handleAsync(async () => {
+        let response = await fetch("answer.txt");
+        let text = await response.text();
+        return Number(text);
+    });
+});
+
+int answer = get_answer();
+```
+
+#### Esperar valores complejos
+
+Pero este ejemplo todavía lo limita solo a números. ¿Qué sucede si desea implementar el ejemplo original, donde traté de obtener el nombre de un usuario de un archivo como una cadena? Bueno, ¡también puede hacer eso!
+
+Emscripten proporciona una función llamada [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) que le permite manejar conversiones entre valores de JavaScript y C ++. También admite Asyncify, por lo que puede invocar a `await()` en `Promise` externas y actuará como `await` en el código JavaScript async-await:
+
+```cpp
+val fetch = val::global("fetch");
+val response = fetch(std::string("answer.txt")).await();
+val text = response.call<val>("text").await();
+auto answer = text.as<std::string>();
+```
+
+Al usar este método, ni siquiera necesita pasar `ASYNCIFY_IMPORTS` como una marca de compilación, pues ya está incluido de forma predeterminada.
+
+Bien, entonces todo esto funciona muy bien en Emscripten. ¿Qué pasa con otras cadenas de herramientas y lenguajes?
+
+### Uso de otros lenguajes
+
+Supongamos que tiene una invocación sincrónica similar en algún lugar de su código de Rust que desea asignar a una API asincrónica en la web. ¡Resulta que también puede hacer eso!
+
+Primero, debe definir dicha función como una importación regular a través de un bloque `extern` (o la sintaxis de su lenguaje elegido para funciones externas).
+
+```rust
+extern {
+    fn get_answer() -> i32;
+}
+
+println!("Getting answer...");
+let answer = get_answer();
+println!("Answer is {}", answer);
+```
+
+Luego, compile su código en WebAssembly:
+
+```shell
+cargo build --target wasm32-unknown-unknown
+```
+
+Ahora necesita instrumentar el archivo WebAssembly con código para almacenar/restaurar la pila. Para C / C ++, Emscripten haría esto por nosotros, pero no se usa aquí, por lo que el proceso es un poco más manual.
+
+Afortunadamente, la transformación Asyncify en sí es completamente independiente de la cadena de herramientas. Puede transformar archivos WebAssembly arbitrarios, sin importar el compilador que los haya producido. La transformación se proporciona por separado como parte del optimizador `wasm-opt` de la [cadena de herramientas Binaryen](https://github.com/WebAssembly/binaryen) y se puede invocar así:
+
+```shell
+wasm-opt -O2 --asyncify \
+      --pass-arg=asyncify-imports@env.get_answer \
+      [...]
+```
+
+Pase `--asyncify` para habilitar la transformación y luego use `--pass-arg=…` para proporcionar una lista separada por comas de funciones asincrónicas, donde el estado del programa debe suspenderse y luego reanudarse.
+
+Todo lo que queda es proporcionar código de tiempo de ejecución de soporte que realmente lo haga: suspender y reanudar el código de WebAssembly. Nuevamente, en el caso de C / C ++, esto lo incluiría Emscripten, pero ahora necesita un código de pegamento JavaScript personalizado que maneje archivos WebAssembly arbitrarios. Hemos creado una biblioteca solo para eso.
+
+Puede encontrarlo en GitHub en [https://github.com/GoogleChromeLabs/asyncify](https://github.com/GoogleChromeLabs/asyncify) o en npm con el nombre [`asyncify-wasm`](https://www.npmjs.com/package/asyncify-wasm).
+
+Simula una [API de instanciación de WebAssembly](https://developer.mozilla.org/docs/WebAssembly) estándar, pero con su propio espacio de nombres. La única diferencia es que, en una API de WebAssembly normal, solo puede proporcionar funciones sincrónicas como importaciones, mientras que en el contenedor Asyncify, también puede proporcionar importaciones asincrónicas:
+
+```js
+const { instance } = await Asyncify.instantiateStreaming(fetch('app.wasm'), {
+    env: {
+        async get_answer() {
+            let response = await fetch("answer.txt");
+            let text = await response.text();
+            return Number(text);
+        }
+    }
+});
+…
+await instance.exports.main();
+```
+
+Una vez que intente invocar a una función asincrónica, como `get_answer()` en el ejemplo anterior, desde el lado de WebAssembly, la biblioteca detectará la `Promise` devuelta, suspenderá y guardará el estado de la aplicación WebAssembly, se suscribirá a la finalización de la promesa y más tarde, una vez resuelta, restaurará sin problemas la pila y el estado de invocaciones y seguirá con la ejecución como si nada hubiera sucedido.
+
+Dado que cualquier función en el módulo puede realizar una invocación asincrónica, todas las exportaciones también se vuelven potencialmente asincrónicas, por lo que también se envuelven. Es posible que haya notado en el ejemplo anterior que debe aplicarle un `await` al resultado de `instance.exports.main()` para saber cuándo finaliza realmente la ejecución.
+
+### ¿Cómo funciona todo esto bajo el capó?
+
+Cuando Asyncify detecta una invocación a una de las funciones `ASYNCIFY_IMPORTS`, inicia una operación asincrónica, guarda todo el estado de la aplicación, incluida la pila de invocaciones y los locales temporales, y luego, cuando la operación finaliza, restaura toda la memoria y la pila de invocaciones para reanudar desde el mismo lugar y con el mismo estado como si el programa nunca se hubiera detenido.
+
+Esto es bastante similar a la función async-await en JavaScript que mostré anteriormente, pero, a diferencia de JavaScript, no requiere ninguna sintaxis especial o soporte de tiempo de ejecución del lenguaje y, en cambio, funciona al transformar las funciones sincrónicas simples en tiempo de compilación.
+
+Al compilar el ejemplo de suspensión asincrónica mostrado anteriormente:
+
+```js
+puts("A");
+async_sleep(1);
+puts("B");
+```
+
+Asyncify toma este código y lo transforma aproximadamente como el siguiente (pseudocódigo, la transformación real es más complicada que esto):
+
+```js
+if (mode == NORMAL_EXECUTION) {
+    puts("A");
+    async_sleep(1);
+    saveLocals();
+    mode = UNWINDING;
+    return;
+}
+if (mode == REWINDING) {
+    restoreLocals();
+    mode = NORMAL_EXECUTION;
+}
+puts("B");
+```
+
+Inicialmente, el parámetro `mode` se establece en `NORMAL_EXECUTION`. En consecuencia, la primera vez que se ejecuta dicho código transformado, solo se evaluará `async_sleep()`. Tan pronto como se programa la operación asincrónica, Asyncify guarda todos los locales y desenrolla la pila regresando desde cada función hasta la parte superior, de esta manera le devuelve el control al bucle de eventos del navegador.
+
+Luego, una vez que `async_sleep()` resuelve, el código de soporte de Asyncify cambiará el parámetro `mode` a `REWINDING` e invocará a la función. Esta vez, se omite la rama de "ejecución normal", puesto que ya hizo el trabajo la última vez y quiero evitar imprimir "A" dos veces, y en su lugar se pasa directamente a la rama de "rebobinado". Una vez que se alcanza, restaura todos los locales almacenados, cambia el modo de nuevo a "normal" y continúa la ejecución como si el código nunca se hubiera detenido en primer lugar.
+
+### Costos de transformación
+
+Desafortunadamente, la transformación Asyncify no es completamente gratuita, ya que tiene que inyectar bastante código de soporte para almacenar y restaurar todos esos locales, navegar por la pila de invocaciones en diferentes modos, etc. Intenta modificar solo las funciones marcadas como asincrónicas en la línea de comando, así como también cualquiera de sus posibles invocadores, pero la sobrecarga del tamaño del código aún podría sumar aproximadamente un 50% antes de la compresión.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/Im4hmQOYRHFcsg8UTfTR.png", alt="Un gráfico que muestra la sobrecarga del tamaño del código para varios puntos de referencia, desde casi el 0% en condiciones de ajuste fino hasta más del 100% en el peor de los casos", width="800", height="494" %}
+
+Esto no es ideal, pero en muchos casos es aceptable cuando la alternativa es no tener la funcionalidad completa o tener que reescribir significativamente el código original.
+
+Asegúrese de habilitar siempre las optimizaciones para las compilaciones finales para evitar que aumenten aún más. También puede verificar las [opciones de optimización específicas de Asyncify](https://emscripten.org/docs/porting/asyncify.html#optimizing) para reducir la sobrecarga al limitar las transformaciones solo a funciones específicas o solo a invocaciones a funciones directas. También hay un costo menor para el rendimiento del tiempo de ejecución, pero se limita a las propias invocaciones asincrónicas. Sin embargo, en comparación con el costo del trabajo real, generalmente es insignificante.
+
+## Demostraciones del mundo real
+
+Ahora que ha visto los ejemplos simples, pasaré a escenarios más complejos.
+
+Como se mencionó al principio del artículo, una de las opciones de almacenamiento en la web es una [API de acceso al sistema de archivos](/file-system-access/) asincrónica. Proporciona acceso a un sistema de archivos de host real desde una aplicación web.
+
+Por otro lado, existe un estándar de facto llamado [WASI](https://github.com/WebAssembly/WASI) para E/S de WebAssembly en la consola y en el lado del servidor. Fue diseñado como un destino de compilación para los lenguajes del sistema y expone todo tipo de sistema de archivos y otras operaciones en una forma sincrónica tradicional.
+
+¿Y si pudiera mapear de uno a otro? Entonces, podría compilar cualquier aplicación en cualquier lenguaje de origen con cualquier cadena de herramientas compatible con el objetivo WASI y ejecutarla en una caja de arena en la web, ¡mientras le permite operar en archivos de usuario reales! Con Asyncify, puede hacer precisamente eso.
+
+En esta demostración, compilé la caja de Rust [coreutils](https://github.com/RReverser/coreutils) con algunos parches menores para WASI, pasé a través de la transformación Asyncify e implementé [enlaces](https://github.com/GoogleChromeLabs/wasi-fs-access/blob/main/src/bindings.ts) asincrónicos de WASI a la API de acceso al sistema de archivos en el lado de JavaScript. Una vez combinado con el componente de terminal [Xterm.js](https://xtermjs.org/) , esto proporciona un shell realista que se ejecuta en la pestaña del navegador y opera en archivos de usuario reales, como una terminal real.
+
+{% Video src="video/9oK23mr86lhFOwKaoYZ4EySNFp02/4244yB6c9RbMCjGjP8ZW.mp4" %}
+
+Compruébalo en vivo en [https://wasi.rreverser.com/](https://wasi.rreverser.com/).
+
+Los casos de uso de Asyncify tampoco se limitan solo a temporizadores y sistemas de archivos. Puede ir más allá y utilizar más API de nicho en la web.
+
+Por ejemplo, también con la ayuda de Asyncify, es posible mapear [libusb,](https://github.com/libusb/libusb) probablemente la biblioteca nativa más popular para trabajar con dispositivos USB, a una [API WebUSB](/usb/), que brinda acceso asincrónico a dichos dispositivos en la web. Una vez mapeada y compilada, obtuve pruebas estándar de libusb y ejemplos para ejecutar en los dispositivos elegidos directamente en la caja de arena de una página web.
+
+{% Img src="image/9oK23mr86lhFOwKaoYZ4EySNFp02/2rscL8dyhOVMacuq54Ad.jpg", alt="Captura de pantalla de la salida de depuración libusb en una página web, que muestra información sobre la cámara Canon conectada", width="375", height="548" %}
+
+Sin embargo, probablemente sea una historia para otra publicación de blog.
+
+Esos ejemplos demuestran cuán poderosa puede ser Asyncify para cerrar la brecha y portar todo tipo de aplicaciones a la web, lo que le permite obtener acceso multiplataforma, cajas de arena y mejor seguridad, todo sin perder funcionalidad.
diff --git a/src/site/content/es/blog/backdrop-filter/index.md b/src/site/content/es/blog/backdrop-filter/index.md
new file mode 100644
index 00000000000..82eb368785c
--- /dev/null
+++ b/src/site/content/es/blog/backdrop-filter/index.md
@@ -0,0 +1,177 @@
+---
+layout: post
+title: Cree fondos al estilo del sistema operativo con los filtros de fondo
+subhead: Difuminado y cambio de color detrás de un elemento
+date: 2019-07-26
+updated: 2019-08-29
+authors:
+  - adamargyle
+  - joemedley
+hero: image/admin/ltK4SNRultTnkbimOySm.jpg
+alt: Una vista a través de una ventana neblinosa cubierta por la lluvia.
+description: Aprenda a agregar efectos de fondo como desenfoque y transparencia a los elementos de la interfaz de usuario en la web mediante la propiedad de filtro de fondo de CSS.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+La translucidez, el desenfoque y otros efectos son formas útiles de crear profundidad mientras se mantiene el contexto del contenido de fondo. Admiten una gran cantidad de casos de uso, como vidrio esmerilado, superposiciones de video, encabezados de navegación translúcidos, censura de imágenes inapropiadas, carga de imágenes, etc. Puede reconocer estos efectos en dos sistemas operativos populares: [Windows 10](https://i.kinja-img.com/gawker-media/image/upload/s--9RLXARU4--/c_scale,dpr_2.0,f_auto,fl_progressive,q_80,w_800/trgz8yivyyqrpcnwscu5.png) e [iOS](https://static.businessinsider.com/image/51fd2822eab8eae16e00000b-750.jpg).
+
+<figure>{% Img src="image/admin/mEc6bdwB2ZX6VSXvyJEn.jpg", alt="Un ejemplo de efecto de vidrio esmerilado", width="400", height="300" %} <figcaption>Un ejemplo de efecto de vidrio esmerilado. <a href="https://dribbble.com/shots/733714-Weather-App?list=tags&amp;tag=android" target="_blank" rel="noopener noreferrer">Fuente</a>.</figcaption></figure>
+
+Históricamente, estas técnicas eran difíciles de implementar en la web, además requerían [trucos o soluciones](https://stackoverflow.com/questions/38145368/css-workaround-to-backdrop-filter) menos que perfectos. En los últimos años, tanto [Safari](https://webkit.org/blog/3632/introducing-backdrop-filters/) como Edge han proporcionado estas capacidades mediante la propiedad `background-filter` (y alternativamente, mediante la propiedad `-webkit-backdrop-filter`), que combina dinámicamente los colores de primer plano y de fondo según las funciones de filtro. Ahora Chrome admite `background-filter` a partir de la versión 76.
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-kitchen_sink2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-kitchen_sink2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Una demostración de las funciones de filtro para <code>backdrop-filter</code>. Pruebe el ejemplo en <a href="https://codepen.io/robinrendle/pen/LmzLEL" target="_blank" rel="noopener">CodePen</a>.</figcaption></figure>
+
+## Aspectos básicos
+
+- La propiedad `backdrop-filter` aplica uno o más filtros a un elemento, para cambiar la apariencia de cualquier cosa detrás del elemento.
+- El elemento de superposición debe ser al menos parcialmente transparente.
+- El elemento superpuesto obtendrá un nuevo contexto de apilamiento.
+
+{% Aside 'caution' %} La propiedad `backdrop-filter` puede afectar al rendimiento. Pruébela antes de implementarla. {% endAside %}
+
+La propiedad `backdrop-filter` de CSS aplica uno o más efectos a un elemento que es translúcido o transparente. Para entender eso, considere las imágenes a continuación.
+
+<div class="switcher">{% Compare 'worse', 'No foreground transparency' %} {% Img src="image/admin/LOqxvB3qqVkbZBmxMmKS.png", alt="Un triángulo superpuesto a un círculo. El círculo no se puede ver a través del triángulo.", width="480", height="283 " %}</div>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.frosty-glass-pane {
+  backdrop-filter: blur(2px);
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'Foreground transparency' %} {% Img src="image/admin/VbyjpS6Td39E4FudeiVg.png", alt="Un triángulo superpuesto a un círculo. El triángulo es traslúcido, lo que permite ver el círculo a través de él.", width="480", height="283" %}</p>
+<pre data-md-type="block_code" data-md-language="css/1"><code class="language-css/1">.frosty-glass-pane {
+  opacity: .9;
+  backdrop-filter: blur(2px);
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+La imagen de la izquierda muestra cómo se renderizarían los elementos superpuestos si no se utilizara o admitiera `backdrop-filter`. La imagen de la derecha aplica un efecto de desenfoque mediante `backdrop-filter`. Tenga en cuenta que utiliza `opacity` además de `backdrop-filter`. Sin `opacity`, no habría nada a lo que aplicar el desenfoque. Casi no hace falta decir que si `opacity` se establece en `1` (totalmente opaco) no habrá ningún efecto en el fondo.
+
+La propiedad `backdrop-filter` es similar a los [filtros](https://developer.mozilla.org/docs/Web/CSS/filter) de CSS en el sentido de que admite todas sus [funciones de filtro](https://developer.mozilla.org/docs/Web/CSS/filter#Filter_functions) favoritas: `blur()`, `brightness()`, `contrast()`, `opacity()`, `drop-shadow()`, etc. También es compatible con la función `url()` si desea utilizar una imagen externa como el filtro, así como también las palabras clave `none`, `inherit`, `initial` y `unset`. Se ofrecen explicaciones para todo esto en [MDN](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter), incluidas las descripciones de sintaxis, filtros y valores.
+
+Cuando `backdrop-filter` se establece en cualquier otro valor distinto a `none`, el navegador crea un nuevo [contexto de apilamiento](https://www.w3.org/TR/CSS21/zindex.html). También se puede crear un [bloque contenedor](https://developer.mozilla.org/docs/Web/CSS/Containing_block), pero solo si el elemento tiene descendientes de posición absoluta y fija.
+
+Puede combinar filtros para obtener efectos enriquecidos e inteligentes, o usar solo un filtro para obtener efectos más sutiles o precisos. Incluso puede combinarlos con [filtros SVG](https://developer.mozilla.org/docs/Web/SVG/Element/filter).
+
+## Detección de funciones y plan B
+
+Al igual que con muchas funciones de la web moderna, querrá saber si el navegador del usuario admite `backdrop-filter` antes de usarlo. Hágalo con `@supports()`. Por motivos de rendimiento, recurra a una imagen en lugar de un polyfill cuando `backdrop-filter` no sea compatible. El siguiente ejemplo lo ilustra.
+
+```css
+@supports (backdrop-filter: none) {
+	.background {
+		backdrop-filter: blur(10px);
+	}
+}
+
+@supports not (backdrop-filter: none) {
+  .background {
+    background-image: blurred-hero.png;
+  }
+}
+```
+
+## Ejemplos
+
+Las técnicas y estilos de diseño que antes estaban reservados para los sistemas operativos ahora son eficaces y alcanzables con una sola declaración CSS. Veamos algunos ejemplos.
+
+### Filtro único
+
+En el siguiente ejemplo, el efecto escarchado se logra al combinar color y desenfoque. `backdrop-filter` proporciona el desenfoque, mientras que el color proviene del color de fondo semitransparente del elemento.
+
+```css
+.blur-behind-me {
+  background-color: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(.5rem);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-rgb2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-rgb2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Pruebe este ejemplo usted mismo en <a href="https://codepen.io/netsi1964/pen/JqBLPK" target="_blank" rel="noopener">CodePen</a>.</figcaption></figure>
+
+### Varios filtros
+
+A veces, necesitará varios filtros para lograr el efecto deseado. Para hacer esto, proporcione una lista de filtros separados por un espacio. Por ejemplo:
+
+```css
+.brighten-saturate-and-blur-behind-me {
+  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
+}
+```
+
+En el siguiente ejemplo, cada uno de los cuatro paneles tiene una combinación diferente de filtros de fondo, mientras que detrás de ellos se anima el mismo conjunto de formas.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-ambient_blur2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-ambient_blur2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Pruebe este ejemplo usted mismo en <a href="https://codepen.io/pepf/pen/GqZkdj" target="_blank" rel="noopener">CodePen</a>.</figcaption></figure>
+
+### Superposiciones
+
+Este ejemplo muestra cómo desenfocar un fondo semitransparente para que el texto sea legible mientras se combina estilísticamente con el fondo de una página.
+
+```css
+.modal {
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.5);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-modal2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-modal2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Pruebe este <a href="https://mfreed7.github.io/backdrop-filter-feature/examples/scrollable.html" target="_blank" rel="noopener">ejemplo</a> usted mismo.</figcaption></figure>
+
+### Contraste de texto sobre fondos dinámicos
+
+Como se indicó anteriormente, `backdrop-filter` permite efectos de rendimiento que serían difíciles o imposibles en la web. Un ejemplo de esto es cambiar un fondo en respuesta a una animación. En este ejemplo, `backdrop-filter` mantiene el alto contraste entre el texto y su fondo a pesar de lo que sucede detrás del texto. Comienza con el color de fondo predeterminado `darkslategray` y usa `backdrop-filter` para invertir los colores después de la transformación.
+
+```css
+.container::before {
+  z-index: 1;
+  background-color: darkslategray;
+  filter: invert(1);
+}
+
+.container::after {
+	backdrop-filter: invert(1);
+  z-index: 3;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-invert_color2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/backdrop-filter/backdrop_filter-invert_color2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Pruebe este ejemplo de <a href="https://www.chenhuijing.com/#%F0%9F%91%9F">Chen Hui Jing</a> en <a href="https://tympanus.net/codrops-playground/huijing/Qqpwg5Iy/editor" target="_blank" rel="noopener">Codrops</a>.</figcaption></figure>
+
+## Conclusión
+
+Más de 560 de ustedes votaron a favor del [error de Chromium](https://crbug.com/497522) en los últimos años, lo que marca claramente esto como una característica CSS largamente esperada. El lanzamiento de `backdrop-filter` en la versión 76 de Chrome acerca a la web a una presentación de interfaz de usuario verdaderamente similar a la de un sistema operativo.
+
+### Recursos adicionales
+
+- [Especificación](https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty)
+- [Estado de la plataforma Chrome](https://www.chromestatus.com/feature/5679432723333120)
+- [MDN](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter)
+- [`background-filter` en CSS Tricks](https://css-tricks.com/the-backdrop-filter-css-property/)
+- [Muestras en Codepen](https://codepen.io/tag/backdrop-filter/#)
diff --git a/src/site/content/es/blog/better-layout-shift-metric/index.md b/src/site/content/es/blog/better-layout-shift-metric/index.md
new file mode 100644
index 00000000000..71d2b8341a2
--- /dev/null
+++ b/src/site/content/es/blog/better-layout-shift-metric/index.md
@@ -0,0 +1,198 @@
+---
+title: 'Se busca retroalimentación: el camino hacia una mejor métrica de cambio de diseño para páginas de larga duración'
+subhead: Conozca nuestros planes para mejorar la métrica Cumulative Layout Shift (cambio acumulativo de diseño) y envíenos sus comentarios.
+description: Conozca nuestros planes para mejorar la métrica Cumulative Layout Shift (cambio acumulativo de diseño) y envíenos sus comentarios.
+authors:
+  - anniesullie
+  - mmocny
+date: 2021-01-25
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: Un ejemplo de enfoque de ventanas para medir el cambio de diseño.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+La métrica [Cumulative Layout Shift](/cls) o CLS (cambio acumulativo de diseño) mide la estabilidad visual de una página web. La métrica se denomina cambio acumulativo de diseño porque la puntuación de cada cambio individual se suma a lo largo de la vida útil de la página.
+
+Si bien todos los cambios de diseño son malas experiencias para el usuario, suman más en las páginas que están abiertas por más tiempo. Es por eso que el equipo de métricas de velocidad de Chrome se propuso mejorar la métrica CLS para ser más neutral con respecto al tiempo que se pasa en una página.
+
+Es importante que la métrica se centre en la experiencia del usuario durante toda la vida útil de la página, ya que hemos descubierto que los usuarios a menudo tienen experiencias negativas después de la carga, mientras se desplazan o navegan por las páginas. Pero hemos escuchado preocupaciones sobre cómo afecta esto las páginas de larga duración, páginas que el usuario generalmente tiene abiertas durante mucho tiempo. Hay varios tipos diferentes de páginas que tienden a permanecer abiertas más tiempo; algunas de las más comunes son las aplicaciones de redes sociales con desplazamiento infinito y aplicaciones de una sola página.
+
+Gracias a un análisis interno de páginas de larga duración con puntuaciones CLS altas, se descubrió que la mayoría de los problemas se debían a los siguientes patrones:
+
+- [Desplazamientos infinitos que cambian el contenido](https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/) a medida que el usuario se desplaza.
+- Los controladores de entrada tardan más de 500 ms en actualizar la interfaz de usuario en respuesta a la interacción del usuario, sin ningún tipo de marcador de posición o patrón skeleton.
+
+Si bien alentamos a los desarrolladores a mejorar esas experiencias de usuario, también estamos trabajando para mejorar la métrica y buscamos retroalimentación sobre posibles enfoques.
+
+## ¿Cómo decidiríamos si una nueva métrica es mejor?
+
+Antes de sumergirnos en el diseño de métricas, queríamos asegurarnos de evaluar nuestras ideas en una amplia variedad de páginas web y casos de uso reales. Para empezar, diseñamos un pequeño estudio de usuarios.
+
+Primero, grabamos videos y [rastros de Chrome](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool) de 34 recorridos de usuarios a través de varios sitios web. Al seleccionar los recorridos de los usuarios, apuntamos a algunas cosas:
+
+- Una variedad de diferentes tipos de sitios, como sitios de noticias y compras.
+- Una variedad de recorridos del usuario, como la carga inicial de la página, el desplazamiento, la navegación de aplicaciones de una sola página y las interacciones del usuario.
+- Una variedad tanto del número como de la intensidad de los cambios de diseño individuales en los sitios.
+- Pocas experiencias negativas en los sitios además de los cambios de diseño.
+
+Le pedimos a 41 de nuestros colegas que vieran dos videos a la vez, calificando cuál de los dos era mejor en términos de cambio de diseño. A partir de estas calificaciones, creamos un orden de clasificación idealizado de los sitios. Los resultados de la clasificación de usuarios confirmaron nuestras sospechas de que nuestros colegas, como la mayoría de los usuarios, están realmente frustrados por los cambios de diseño después de la carga, especialmente durante el desplazamiento y la navegación de aplicaciones de una sola página. Vimos que algunos sitios tienen experiencias de usuario mucho mejores durante estas actividades que otros.
+
+Dado que registramos los rastros de Chrome junto con los videos, teníamos todos los detalles de los cambios de diseño individuales en cada recorrido del usuario. Los usamos para calcular valores métricos para cada idea para cada viaje de usuario. Esto nos permitió ver cómo cada variante de métrica clasificaba los viajes del usuario y qué tan diferente era cada una de la clasificación ideal.
+
+## ¿Qué ideas métricas probamos?
+
+### Estrategias de ventanas
+
+A menudo, las páginas tienen varios cambios de diseño agrupados muy juntos, ya que los elementos pueden cambiar varias veces a medida que el contenido nuevo llega pieza por pieza. Esto nos llevó a probar técnicas para agrupar turnos. Para lograrlo, analizamos tres enfoques de ventanas:
+
+- Ventanas de salto de tamaño constante
+- Ventanas deslizantes
+- Ventanas de sesión
+
+En cada uno de estos ejemplos, la página tiene cambios de diseño de diferente gravedad a lo largo del tiempo. Cada barra azul representa un cambio de diseño único y la longitud representa la [puntuación](/cls/#layout-shift-score) de ese cambio. Las imágenes ilustran las formas en que las diferentes estrategias de ventanas agrupan los cambios de diseño a lo largo del tiempo.
+
+#### Ventanas de salto de tamaño constante
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Ejemplo de una ventana de salto de tamaño constante</figcaption></figure>
+
+El enfoque más simple es dividir la página en ventanas de partes del mismo tamaño. Estos se llaman ventanas de salto de tamaño constante. Arriba notará que la cuarta barra realmente parece que debería estar agrupada en la segunda ventana de salto de tamaño constante, pero debido a que todas las ventanas tienen un tamaño fijo, está en la primera ventana. Si hay ligeras diferencias en el tiempo de las cargas o las interacciones del usuario en la página, los mismos cambios de diseño pueden caer en diferentes lados de los límites de la ventana de salto de tamaño constante.
+
+#### Ventanas deslizantes
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Ejemplo de ventana deslizante.</figcaption></figure>
+
+Un enfoque que nos permite ver más agrupaciones posibles de la misma longitud es actualizar continuamente la ventana potencial a lo largo del tiempo. La imagen de arriba muestra una ventana deslizante a la vez, pero podríamos mirar todas las ventanas deslizantes posibles o un subconjunto de ellas para crear una métrica.
+
+#### Ventanas de sesión
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Ejemplo de ventana de sesión.</figcaption></figure>
+
+Si quisiéramos centrarnos en identificar áreas de la página con ráfagas de cambios de diseño, podríamos iniciar cada ventana en un turno y seguir aumentando hasta que encontremos un intervalo de tamaño determinado entre los cambios de diseño. Este enfoque agrupa los cambios de diseño e ignora la mayor parte de la experiencia del usuario sin cambios. Un problema potencial es que si no hay intervalos en los cambios de diseño, una métrica basada en las ventanas de sesión podría crecer sin límites al igual que la métrica CLS actual. Así que también probamos esto con un tamaño máximo de ventana.
+
+### Tamaños de ventana
+
+La métrica puede dar resultados muy diferentes según el tamaño real de las ventanas, por lo que probamos varios tamaños de ventana diferentes:
+
+- Cada cambio como su propia ventana (sin ventanas)
+- 100 ms
+- 300 ms
+- 1 segundo
+- 5 segundos
+
+### Resumen
+
+Probamos muchas formas de resumir las diferentes ventanas.
+
+#### Percentiles
+
+Observamos el valor máximo de la ventana, así como el percentil 95, el percentil 75 y la mediana.
+
+#### Promedio
+
+Observamos el valor medio de la ventana.
+
+#### Presupuestos
+
+Nos preguntamos si tal vez había algún puntaje mínimo de cambio de diseño que los usuarios no notarían, y simplemente podríamos contar los cambios de diseño sobre ese "presupuesto" en el puntaje. Entonces, para varios valores potenciales de "presupuesto", observamos el porcentaje de cambios sobre el presupuesto y la puntuación total del cambio sobre este.
+
+### Otras estrategias
+
+También analizamos muchas estrategias que no involucraban ventanas, como el cambio de diseño total dividido entre el tiempo en la página y el promedio de los peores N turnos individuales.
+
+## Resultados iniciales
+
+En general, probamos **145 definiciones de métricas diferentes** basadas en permutaciones de las ideas anteriores. Para cada métrica, clasificamos todos los recorridos de los usuarios por su puntuación en la métrica y luego clasificamos las métricas según lo cerca que estaban de la clasificación ideal.
+
+Para obtener una línea de referencia, también clasificamos todos los sitios según su puntaje CLS actual. La CLS se ubicó en el puesto 32, empatando con otras 13 estrategias, por lo que fue mejor que la mayoría de las permutaciones de las estrategias anteriores. Para asegurarnos de que los resultados fueran significativos, también agregamos en tres órdenes aleatorios. Como era de esperar, los órdenes aleatorios resultaron peor que todas las estrategias probadas.
+
+Para comprender si podríamos estar sobreajustados para el conjunto de datos, después de nuestro análisis, registramos algunos videos y seguimientos de cambios de diseño nuevos, los clasificamos manualmente y vimos que las clasificaciones métricas eran muy similares para el conjunto de datos nuevo y el original.
+
+Algunas estrategias diferentes se destacaron en la clasificación.
+
+### Mejores estrategias
+
+Cuando clasificamos las estrategias, encontramos tres tipos que encabezaban la lista. Cada uno tuvo aproximadamente el mismo rendimiento, por lo que planeamos avanzar con un análisis más profundo de cada uno. También nos gustaría escuchar los comentarios de los desarrolladores para comprender si hay factores fuera de la experiencia del usuario que deberíamos considerar al decidir entre ellos. (Consulte a continuación cómo brindar retroalimentación).
+
+#### Percentiles altos de ventanas largas
+
+Algunas estrategias de ventanas funcionaron bien con tamaños de ventana largos:
+
+- Ventanas deslizantes de 1 segundo
+- Ventanas de sesión limitadas a 5 segundos con un intervalo de 1 segundo
+- Ventanas de sesión destapadas con un intervalo de 1 segundo
+
+Todas calificaron muy bien tanto en el percentil 95 como en el máximo.
+
+Sin embargo, para tamaños de ventanas tan grandes, estábamos preocupados por usar el percentil 95; a menudo veíamos solo de 4 a 6 ventanas, y tomar el percentil 95 de eso es mucha interpolación. No está claro qué está haciendo la interpolación en términos del valor métrico. El valor máximo es mucho más claro, por lo que decidimos seguir adelante con la verificación del máximo.
+
+#### Promedio de ventanas de sesión con intervalos largos
+
+El promedio de las puntuaciones de todas las ventanas de sesión destapadas con intervalos de 5 segundos entre ellas funcionó muy bien. Esta estrategia tiene algunas características interesantes:
+
+- Si la página no tiene intervalos entre los cambios de diseño, termina siendo una ventana de sesión larga con exactamente la misma puntuación que la CLS actual.
+- Esta métrica no tuvo en cuenta directamente el tiempo de inactividad; solo tomó en cuenta los cambios que ocurrieron en la página, y no en momentos en los que la página no estaba cambiando.
+
+#### Percentiles altos de ventanas cortas
+
+La ventana deslizante máxima de 300 ms clasificó muy alto, así como el percentil 95. Para el tamaño de ventana más corto, hay menos interpolación de percentiles que los tamaños de ventana más grandes, pero también nos preocupaba la "repetición" de las ventanas deslizantes: si se produce un conjunto de cambios de diseño en dos marcos, hay varias ventanas de 300 ms que las incluyen. Tomar el máximo es mucho más claro y sencillo que tomar el percentil 95. Así que de nuevo decidimos seguir adelante comprobando el máximo.
+
+### Estrategias que no funcionaron
+
+Las estrategias que intentaron considerar la experiencia "promedio" del tiempo dedicado tanto sin cambios de diseño como con cambios de diseño, obtuvieron muy malos resultados. Ninguno de los resúmenes de la mediana o del percentil 75 de ninguna estrategia de ventana clasificó bien los sitios, así como tampoco la suma de los cambios de diseño a lo largo del tiempo.
+
+Evaluamos varios "presupuestos" diferentes para cambios de diseño aceptables:
+
+- El porcentaje de diseño cambia por encima de cierto presupuesto. Para varios presupuestos, todos estos se clasificaron bastante mal.
+- El cambio de diseño promedio por encima de algún exceso. La mayoría de las variaciones de esta estrategia funcionaron mal, pero el exceso promedio durante una sesión larga con un gran intervalo lo hizo casi tan bien como el promedio de ventanas de sesión con intervalos largos. Decidimos seguir adelante solo con este último porque es más simple.
+
+## Próximos pasos
+
+### Análisis a mayor escala
+
+Hemos implementado en Chrome las principales estrategias mostradas anteriormente, de modo que podamos obtener datos sobre el uso real para un conjunto mucho más grande de sitios web. Planeamos utilizar un enfoque similar de clasificación de sitios en función de sus puntuaciones métricas para realizar el análisis a mayor escala:
+
+- Clasificar todos los sitios por CLS y por cada nuevo aspecto candidato a métrica.
+    - ¿Qué sitios están clasificados de manera más diferente por la CLS y cada candidato? ¿Encontramos algo inesperado cuando vemos estos sitios?
+    - ¿Cuáles son las mayores diferencias entre los nuevos candidatos a métricas? ¿Alguna de las diferencias se destaca como ventaja o desventaja de un candidato específico?
+- Repetir el análisis anterior, pero agrupando el tiempo dedicado a la carga de cada página. ¿Vemos una mejora esperada para las cargas de páginas de larga duración con un cambio de diseño aceptable? ¿Vemos resultados inesperados para las páginas de corta duración?
+
+### Retroalimentación sobre nuestro enfoque
+
+Nos encantaría recibir comentarios de los desarrolladores web sobre estos enfoques. Algunas cosas a tener en cuenta al considerar los nuevos enfoques:
+
+#### Lo que no cambia
+
+Queremos aclarar que muchas cosas no cambiarán con un nuevo enfoque:
+
+- Ninguna de nuestras ideas de métricas cambia la forma en que las puntuaciones de cambio de diseño para [marcos individuales se calculan](/cls/#layout-shift-score), solo la forma en que resumimos varios marcos. Esto significa que la [API de JavaScript](/cls/#measure-cls-in-javascript) para cambios de diseño seguirá siendo la misma, y los eventos subyacentes en los seguimientos de Chrome que utilizan las herramientas de desarrollador también permanecerán iguales, por lo que las reacciones de cambio de diseño en herramientas como WebPageTest y Chrome DevTools seguirán funcionando de la misma manera.
+- Continuaremos trabajando duro para hacer que las métricas sean fáciles de adoptar para los desarrolladores, incluyéndolas en la [biblioteca web-](https://github.com/GoogleChrome/web-vitals) [vitals](/metrics) , documentando en web.dev e informándolas en nuestras herramientas para desarrolladores como Lighthouse.
+
+#### Compensación entre métricas
+
+Una de las estrategias principales resume las ventanas de cambio de diseño como un promedio, y el resto informa la ventana máxima. Para las páginas que están abiertas durante mucho tiempo, es probable que el promedio informe un valor más representativo, pero en general será más fácil para los desarrolladores actuar en una sola ventana: pueden registrar cuándo ocurrió, los elementos que cambiaron y demás. Nos encantaría recibir comentarios sobre cuál es más importante para los desarrolladores.
+
+¿Le resultan más fáciles de entender las ventanas deslizantes o de sesión? ¿Las diferencias son importantes para usted?
+
+#### Cómo brindar retroalimentación
+
+Puede probar las nuevas métricas de cambio de diseño en cualquier sitio utilizando nuestras [implementaciones de JavaScript de ejemplo](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) o nuestra [bifurcación de la extensión Core Web Vitals](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Envíe sus comentarios por correo electrónico a nuestro **[grupo de Google web-vitals-feedback](https://groups.google.com/g/web-vitals-feedback)**, con el asunto "[Layout Shift Metrics]". ¡Estamos ansiosos por escuchar lo que piensa!
diff --git a/src/site/content/es/blog/blog.11tydata.js b/src/site/content/es/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/es/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/es/blog/bluetooth/index.md b/src/site/content/es/blog/bluetooth/index.md
new file mode 100644
index 00000000000..4ef9fe0e0c8
--- /dev/null
+++ b/src/site/content/es/blog/bluetooth/index.md
@@ -0,0 +1,415 @@
+---
+title: Comunicación con dispositivos Bluetooth a través de JavaScript
+subhead: |2
+
+  La API Web Bluetooth permite que los sitios web se comuniquen con dispositivos Bluetooth.
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: Un chip Bluetooth en una moneda
+description: |2
+
+  La API Web Bluetooth permite que los sitios web se comuniquen con dispositivos Bluetooth.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+¿Qué pasaría si le dijeran que los sitios web pueden comunicarse con dispositivos Bluetooth cercanos de una manera segura y que preserve la privacidad? De esta manera, los monitores de frecuencia cardíaca, las bombillas que cantan e incluso las [tortugas](https://www.youtube.com/watch?v=1LV1Fk5ZXwA) podrían interactuar directamente con un sitio web.
+
+Hasta ahora, la capacidad de interactuar con dispositivos Bluetooth solo ha sido posible para aplicaciones específicas de una plataforma. La API Web Bluetooth tiene como objetivo cambiar esto y lo lleva también a los navegadores web.
+
+## Antes de empezar
+
+Este artículo asume que tiene conocimientos básicos sobre cómo funcionan el Bluetooth de baja energía (BLE) y el [Perfil de atributo genérico](https://www.bluetooth.com/specifications/gatt/) (GATT).
+
+Aunque la [especificación de la API Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/) aún no está finalizada, los autores de las especificaciones están buscando activamente desarrolladores entusiastas para probar esta API y dar [comentario sobre las especificaciones](https://github.com/WebBluetoothCG/web-bluetooth/issues) y [retroalimentación sobre la implementación](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth).
+
+Un subconjunto de la API Web Bluetooth está disponible en ChromeOS, Chrome para Android 6.0, Mac (Chrome 56) y Windows 10 (Chrome 70). Esto significa que debería poder [solicitar](#request) y [conectarse](#connect) a dispositivos Bluetooth de baja energía cercanos, [leer](#read)/[escribir](#write) características de Bluetooth, [recibir notificaciones GATT](#notifications), saber cuándo [se desconecta](#disconnect) un dispositivo Bluetooth e incluso [leer y escribir descriptores de Bluetooth](#descriptors). Consulte la tabla de [compatibilidad de navegadores](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility) de MDN para obtener más información.
+
+Para Linux y versiones anteriores de Windows, habilite `#experimental-web-platform-features` en `about://flags`.
+
+### Disponible para pruebas de origen
+
+Para obtener la mayor retroalimentación posible de los desarrolladores que utilizan la API Web Bluetooth en el campo, Chrome ha agregado previamente esta función en Chrome 53 como una [prueba de origen](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) para ChromeOS, Android y Mac.
+
+La prueba terminó con éxito en enero de 2017.
+
+## Requerimientos de seguridad
+
+Para comprender las compensaciones de seguridad, recomiendo la [publicación Web Bluetooth Security Model](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2) de Jeffrey Yasskin, un ingeniero de software del equipo de Chrome, que trabaja en la especificación Web Bluetooth API.
+
+### Solo HTTPS
+
+Debido a que esta API experimental es una nueva característica poderosa agregada a la web, solo está disponible para [contextos seguros](https://w3c.github.io/webappsec-secure-contexts/#intro). Esto significa que deberá compilar teniendo en cuenta la [TLS.](https://en.wikipedia.org/wiki/Transport_Layer_Security)
+
+### Requerimiento de gestos de usuario
+
+Como característica de seguridad, el descubrimiento de dispositivos Bluetooth con `navigator.bluetooth.requestDevice` debe activarse mediante [un gesto del usuario](https://html.spec.whatwg.org/multipage/interaction.html#activation), como un toque o un clic del mouse. Estamos hablando de atender a un evento [`pointerup`](https://developer.chrome.com/blog/pointer-events/), `click` y `touchend`.
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // Call navigator.bluetooth.requestDevice
+});
+```
+
+## Entrar en el código
+
+La API Web Bluetooth se basa en gran medida en JavaScript [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). Si no está familiarizado con ello, consulte este excelente [tutorial de Promesas](/promises). Una cosa más, `() => {}` son simplemente [funciones de flecha de](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ECMAScript 2015.
+
+### Solicitar dispositivos Bluetooth {: #request}
+
+Esta versión de la especificación Web Bluetooth API permite que los sitios web, que se ejecutan en la función Central, se conecten a servidores GATT remotos a través de una conexión BLE. Admite la comunicación entre dispositivos que implementan un Bluetooth 4.0 o posterior.
+
+Cuando un sitio web solicita acceso a dispositivos cercanos mediante `navigator.bluetooth.requestDevice`, el navegador brinda al usuario un selector de dispositivo donde puede elegir un dispositivo o simplemente cancelar la solicitud.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">Solicitud de usuario del dispositivo Bluetooth.</a></p>
+  </figcaption></figure>
+
+La función `navigator.bluetooth.requestDevice()` toma un objeto obligatorio que define filtros. Estos filtros se utilizan para devolver solo los dispositivos que coinciden con algunos servicios de Bluetooth GATT anunciados y/o el nombre del dispositivo.
+
+#### Filtro de servicios
+
+Por ejemplo, para solicitar dispositivos Bluetooth que anuncien el [servicio de batería Bluetooth GATT](https://www.bluetooth.com/specifications/gatt/) :
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+Sin embargo, si su servicio Bluetooth GATT no está en la lista de [servicios Bluetooth GATT estandarizados](https://www.bluetooth.com/specifications/assigned-numbers/), puede proporcionar el UUID de Bluetooth completo o un formulario corto de 16 o 32 bits.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Filtro de nombre
+
+También puede solicitar dispositivos Bluetooth en función del nombre del dispositivo que se anuncia con la clave de filtros `name`, o incluso un prefijo de este nombre con la clave de filtros `namePrefix`. Tenga en cuenta que, en este caso, también deberá definir la clave `optionalServices` para poder acceder a cualquier servicio no incluido en un filtro de servicio. Si no lo hace, obtendrá un error más adelante cuando intente acceder a ellos.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Filtro de datos del fabricante
+
+También es posible solicitar dispositivos Bluetooth en función de los datos específicos del fabricante que se anuncian con la clave de filtros de `manufacturerData`. Esta clave es una matriz de objetos con una clave de [identificación de empresa Bluetooth](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/) `companyIdentifier`. También puede proporcionar un prefijo de datos que filtre los datos del fabricante de los dispositivos Bluetooth que comienzan con él. Tenga en cuenta que también deberá definir la clave `optionalServices` para poder acceder a cualquier servicio no incluido en un filtro de servicio. Si no lo hace, obtendrá un error más adelante cuando intente acceder a ellos.
+
+```js
+// Filter Bluetooth devices from Google company with manufacturer data bytes
+// that start with [0x01, 0x02].
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+También se puede usar una máscara con un prefijo de datos para hacer coincidir algunos patrones en los datos del fabricante. Consulte la [explicación de filtros de datos de Bluetooth](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md) para obtener más información.
+
+{% Aside %} En el momento de escribir este artículo, la `manufacturerData` está disponible en Chrome 92. Si se desea compatibilidad con versiones anteriores de los navegadores más antiguos, debe proporcionar una opción de respaldo, ya que el filtro de datos del fabricante se considera vacío. Vea un [ejemplo](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ). {% endAside %}
+
+#### Sin filtros
+
+Finalmente, en lugar de `filters`, puede usar la clave `acceptAllDevices` para mostrar todos los dispositivos Bluetooth cercanos. También deberá definir la clave `optionalServices` para poder acceder a algunos servicios. Si no lo hace, obtendrá un error más adelante cuando intente acceder a ellos.
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %} Esto puede resultar en que se muestren un montón de dispositivos no relacionados en el selector y se desperdicie energía porque no hay filtros. Úselo con precaución. {% endAside %}
+
+### Conectarse a un dispositivo Bluetooth {: #connect}
+
+Entonces, ¿qué hacer ahora que tiene un `BluetoothDevice`? Conectémoslo al servidor Bluetooth remoto GATT que contiene el servicio y las definiciones de características.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // Human-readable name of the device.
+  console.log(device.name);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### Leer una característica de Bluetooth {: #read}
+
+Aquí estamos conectados al servidor GATT del dispositivo Bluetooth remoto. Ahora queremos obtener un servicio GATT primario y leer una característica que pertenece a este servicio. Intentemos, por ejemplo, leer el nivel de carga actual de la batería del dispositivo.
+
+En el siguiente ejemplo, `battery_level` es la [característica de nivel de batería estandarizada](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Getting Battery Service…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Getting Battery Level Characteristic…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Battery percentage is ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Si utiliza una característica de Bluetooth GATT personalizado, puede proporcionar el UUID de Bluetooth completo o un formulario corto de 16 o 32 bits a `service.getCharacteristic`.
+
+Tenga en cuenta que también se puede añadir un detector de evento `characteristicvaluechanged` en una característica para manejar la lectura de su valor. Consulte la [Muestra de lectura de valor de característica modificada](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) para ver otras opciones de cómo manejar también las próximas notificaciones del GATT.
+
+```js
+…
+.then(characteristic => {
+  // Set up event listener for when characteristic value changes.
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Battery percentage is ' + batteryLevel);
+}
+```
+
+### Escribir en una característica de Bluetooth {: #write}
+
+Escribir en una característica de Bluetooth GATT es tan fácil como leerla. Esta vez, usemos el Punto de control de frecuencia cardíaca para restablecer el valor del campo Energía gastada a 0 en un dispositivo de monitoreo de frecuencia cardíaca.
+
+Prometo que no hay magia aquí. Todo se explica en la [página de características del punto de control de frecuencia cardíaca](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // Writing 1 is the signal to reset energy expended.
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Energy expended has been reset.');
+})
+.catch(error => { console.error(error); });
+```
+
+### Reciba notificaciones del GATT {: #notifications}
+
+Ahora, veamos cómo recibir notificaciones cuando cambie la característica de [medición de frecuencia cardíaca en el dispositivo:](https://www.bluetooth.com/specifications/gatt/)
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Notifications have been started.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Received ' + value);
+  // TODO: Parse Heart Rate Measurement value.
+  // See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
+}
+```
+
+Las [Notificaciones de ejemplo](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) muestran cómo detener las notificaciones con `stopNotifications()` y retirar adecuadamente el agregado detector de eventos agregado `characteristicvaluechanged`.
+
+### Desconectarse de un dispositivo Bluetooth {: #disconnect}
+
+Para proporcionar una mejor experiencia de usuario, es posible que desee escuchar los eventos de desconexión e invitar al usuario a volver a conectarse:
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // Set up event listener for when device gets disconnected.
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Device ${device.name} is disconnected.`);
+}
+```
+
+También puede llamar a una función `device.gatt.disconnect()` para desconectar su aplicación web del dispositivo Bluetooth. Esto activará los detectores de eventos `gattserverdisconnected` existentes. Tenga en cuenta que NO detendrá la comunicación del dispositivo Bluetooth si otra aplicación ya se está comunicando con el dispositivo Bluetooth. Consulte la [Muestra de desconexión](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) del dispositivo y la [Muestra de reconexión automática](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) para saber más.
+
+{% Aside 'caution' %} Los atributos, servicios, características, etc. de Bluetooth GATT se invalidan cuando un dispositivo se desconecta. Esto significa que su código siempre debe recuperar (a través de `getPrimaryService(s)`, `getCharacteristic(s)` , etc.) estos atributos después de volver a conectarse. {% endAside %}
+
+### Leer y escribir descriptores de Bluetooth {: #descriptors}
+
+Los descriptores de Bluetooth GATT son atributos que describen un valor característico. Puede leerlos y escribirlos de forma similar a las características de Bluetooth GATT.
+
+Veamos, por ejemplo, cómo leer la descripción del usuario del intervalo de medición del termómetro de salud del dispositivo.
+
+En el siguiente ejemplo, `health_thermometer` es el [servicio de Salud Termómetro](https://www.bluetooth.com/specifications/gatt/), `measurement_interval` la [característica Intervalo de medición](https://www.bluetooth.com/specifications/gatt/), y `gatt.characteristic_user_description` el [descriptor de característica de descripción de usuario](https://www.bluetooth.com/specifications/assigned-numbers/).
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`User Description: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Ahora que hemos leído la descripción del usuario del intervalo de medición del termómetro de salud del dispositivo, veamos cómo actualizarlo y escribir un valor personalizado.
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Defines the time between measurements.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## Muestras, demostraciones y codelabs
+
+Todas las [muestras de Web Bluetooth](https://googlechrome.github.io/samples/web-bluetooth/index.html) que se presentan a continuación se han probado con éxito. Para disfrutar de estas muestras al máximo, es recomendable que instale la [aplicación de Android BLE Peripheral Simulator](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral), que simula un periférico de BLE con un servicio de batería, un servicio de frecuencia cardíaca o un servicio de termómetro de salud.
+
+### Principiante
+
+- [Información del dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-info.html): recupere información básica del dispositivo desde un dispositivo BLE.
+- [Nivel de la batería](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html): recupere la información de la batería de un dispositivo BLE que anuncie información sobre la batería.
+- [Restablecer energía](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html): restablezca la energía gastada por un dispositivo BLE que anuncie la frecuencia cardíaca.
+- [Propiedades de característica](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html): muestra todas las propiedades de una característica específica de un dispositivo BLE.
+- [Notificaciones](https://googlechrome.github.io/samples/web-bluetooth/notifications.html): inicie y detenga las notificaciones características de un dispositivo BLE.
+- [Desconexión del dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html): desconecte y reciba una notificación de desconexión de un dispositivo BLE después de conectarse a él.
+- [Obtener características](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html): obtenga todas las características de un servicio anunciado desde un dispositivo BLE.
+- [Obtener descriptores](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html): obtenga los descriptores de todas las características de un servicio anunciado desde un dispositivo BLE.
+- [Filtro de datos del fabricante](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html): recupere información básica del dispositivo de un dispositivo BLE que coincida con los datos del fabricante.
+
+### Combinando múltiples operaciones
+
+- [Características de GAP](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html): obtenga todas las características de GAP de un dispositivo BLE.
+- [Características de información del dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html): obtenga todas las características de información del dispositivo de un dispositivo BLE.
+- [Pérdida de enlace](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html): establezca la característica de nivel de alerta de un dispositivo BLE (readValue y writeValue).
+- [Descubrir servicios y características](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html): descubra todos los servicios primarios accesibles y sus características desde un dispositivo BLE.
+- [Reconexión automática](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html): vuelva a conectarse a un dispositivo BLE desconectado mediante un algoritmo de retroceso exponencial.
+- [Leer valor de característica cambiado](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html): lea el nivel de la batería y reciba notificaciones de cambios desde un dispositivo BLE.
+- [Leer descriptores](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html): lea todos los descriptores de características de un servicio desde un dispositivo BLE.
+- [Escribir descriptor](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html): escriba en el descriptor "Característica de descripción de usuario" en un dispositivo BLE.
+
+Consulte nuestras [demostraciones seleccionadas de Web Bluetooth](https://github.com/WebBluetoothCG/demos) y también los [laboratorios de código Web Bluetooth oficiales](https://github.com/search?q=org%3Agooglecodelabs+bluetooth).
+
+## Bibliotecas
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils) es un módulo npm que agrega algunas funciones de conveniencia a la API.
+- Hay una biblioteca shim de API Web Bluetooth disponible en [noble](https://github.com/sandeepmistry/noble), el módulo central BLE de Node.js más popular. Esto le permite usar funciones de webpack/browserify en noble sin la necesidad de un servidor WebSocket u otros complementos.
+- [angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) es un módulo para [Angular](https://angularjs.org) que abstrae todo el texto estándar necesario para configurar la API Web Bluetooth.
+
+## Herramientas
+
+- [Introducción a Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator) es una aplicación web sencilla que generará todo el código estándar de JavaScript para comenzar a interactuar con un dispositivo Bluetooth. Ingrese un nombre de dispositivo, un servicio, una característica, defina sus propiedades y listo.
+- Si ya es un desarrollador de Bluetooth, el [complemento Web Bluetooth Developer Studio](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin) también generará el código JavaScript Web Bluetooth para su dispositivo Bluetooth.
+
+## Consejos
+
+Hay una página de **Bluetooth Internals** disponible en Chrome en `about://bluetooth-internals` para que pueda inspeccionar todo sobre los dispositivos Bluetooth cercanos: estado, servicios, características y descriptores.
+
+<figure>{% Img src ="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt = "Captura de pantalla de la página interna para depurar Bluetooth en Chrome", width="800", height="572" %}<figcaption> Página interna en Chrome para depurar dispositivos Bluetooth.</figcaption></figure>
+
+Es recomendable también que consulte la página oficial [Cómo presentar errores de Web Bluetooth](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs), ya que la depuración de Bluetooth puede ser difícil a veces.
+
+{% Aside 'caution' %} Leer y escribir en características de Bluetooth en paralelo puede generar errores según la plataforma. Es altamente sugerido que ponga en cola manualmente las solicitudes de operación del GATT cuando sea apropiado. Consulte ["Operación del GATT en curso: ¿cómo manejarla?"](https://github.com/WebBluetoothCG/web-bluetooth/issues/188). {% endAside %}
+
+## Qué sigue
+
+Primero, verifique el [estado de implementación del navegador y la plataforma](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md) para saber qué partes de la API Web Bluetooth se están implementando actualmente.
+
+Aunque todavía está incompleto, aquí hay un adelanto de qué esperar en el futuro cercano:
+
+- [La búsqueda de anuncios BLE cercanos](https://github.com/WebBluetoothCG/web-bluetooth/pull/239) se realizará con `navigator.bluetooth.requestLEScan()`.
+- Un nuevo evento `serviceadded` rastreará los servicios de Bluetooth GATT recién descubiertos, mientras que el evento `serviceremoved` rastreará los eliminados. Un nuevo evento `servicechanged` se activará cuando cualquier característica y/o descriptor sea agregado o removido de un servicio de Bluetooth GATT.
+
+### Apoye la API
+
+¿Está pensando en utilizar la API Web Bluetooth? Su soporte público ayuda al equipo de Chrome a priorizar las funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.
+
+Envíe un tweet a [@ChromiumDev](https://twitter.com/ChromiumDev) usando el hashtag [`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live) y háganos saber dónde y cómo lo está usando.
+
+## Recursos
+
+- Desbordamiento de pila: [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Estado de la función de Chrome: [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Errores de implementación de Chrome: [https://crbug.com/?q=component:Blink&gt;Bluetooth](https://crbug.com/?q=component:Blink%3EBluetooth)
+- Especificaciones de Bluetooth web: [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- Problemas con las especificaciones: [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- Aplicación BLE Peripheral Simulator: [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ'%}
+
+## Agradecimientos
+
+Gracias a [Kayce Basques](https://github.com/kaycebasques) por revisar este artículo. Imagen de héroe de [SparkFun Electronics de Boulder, EE. UU.](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg)
diff --git a/src/site/content/es/blog/building-a-pwa-at-google-part-1/index.md b/src/site/content/es/blog/building-a-pwa-at-google-part-1/index.md
new file mode 100644
index 00000000000..185d143a2e1
--- /dev/null
+++ b/src/site/content/es/blog/building-a-pwa-at-google-part-1/index.md
@@ -0,0 +1,131 @@
+---
+title: Construyendo una PWA en Google, parte 1
+subhead: Lo que el equipo de Bulletin aprendió sobre los service workers mientras desarrollaba una PWA.
+date: 2020-07-29
+authors:
+  - joelriley
+  - douglasparker
+  - msdikla
+hero: image/admin/mgB3j6NZa6F1CkoD9YI4.jpg
+alt: Un grupo de personas en una mesa trabajando con sus computadoras.
+description: Lo que el equipo de Bulletin aprendió sobre los service workers mientras desarrollaba una PWA.
+tags:
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - performance
+  - storage
+  - testing
+---
+
+Esta es la primera de una serie de publicaciones de blog sobre las lecciones que aprendió el equipo de Google Bulletin al crear una PWA externa. En estas publicaciones, compartiremos algunos de los desafíos que enfrentamos, los enfoques que elegimos para superarlos y consejos generales para evitar obstáculos o problemas. Esta no es una descripción completa de las PWA. El objetivo es compartir los aprendizajes de la experiencia de nuestro equipo.
+
+Para esta primera entrega, cubriremos primero un poco de información general y luego profundizaremos en todo lo que aprendimos sobre los service workers.
+
+{% Aside %} Bulletin se cerró en 2019 debido a la falta de ajuste de producto/mercado. ¡Aún así aprendimos mucho sobre las PWA a lo largo del camino! {% endAside %}
+
+## Antecedentes {: #background}
+
+Bulletin estuvo en desarrollo activo desde mediados de 2017 hasta mediados de 2019.
+
+### Por qué elegimos crear una PWA {: #why-pwa }
+
+Antes de profundizar en el proceso de desarrollo, examinemos por qué crear una PWA fue una opción atractiva para este proyecto:
+
+- **Capacidad para iterar rápidamente**. Especialmente valiosa ya que Bulletin se probaría en múltiples mercados.
+- **Base de código único**. Nuestros usuarios se dividieron aproximadamente en partes iguales entre Android e iOS. Una PWA significaba que podíamos crear una única aplicación web que funcionara en ambas plataformas. Esto aumentó la velocidad y el impacto del equipo.
+- **Actualización rápida e independiente del comportamiento del usuario**. Las PWA pueden actualizarse automáticamente, lo que reduce la cantidad de clientes desactualizados. Pudimos impulsar cambios importantes en el backend con un tiempo de migración muy corto para los clientes.
+- **Integración fácil con aplicaciones propias y de terceros**. Tales integraciones eran un requisito para la aplicación. Con una PWA, a menudo significaba simplemente abrir una URL.
+- **Eliminación de la fricción al instalar una aplicación.**
+
+### Nuestro marco {: #framework }
+
+Para Bulletin, usamos [Polymer](https://www.polymer-project.org/), pero cualquier marco moderno y bien soportado funcionará.
+
+## Lo que aprendimos sobre los service workers {: #lesson-learned }
+
+No puede tener una PWA sin un [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/). Los service workers le brindan mucho poder, como estrategias avanzadas de almacenamiento en caché, capacidades fuera de línea, sincronización en segundo plano, etc. Si bien los service workers agregan cierta complejidad, descubrimos que sus beneficios superan la complejidad agregada.
+
+### Genérelo si puede {: #generate }
+
+Evite escribir un guion de service worker a mano, ya que esto requiere administrar manualmente los recursos almacenados en caché y reescribir la lógica que es común a la mayoría de las bibliotecas de service workers, como [Workbox](https://developer.chrome.com/docs/workbox/).
+
+Dicho esto, debido a nuestra pila de tecnología interna, no pudimos usar una biblioteca para generar y administrar nuestro service worker. Nuestros aprendizajes a continuación reflejarán en ocasiones eso. Puede leer más en [Obstáculos para los service workers no generados](#pitfalls).
+
+### No todas las bibliotecas son compatibles con los service workers {: #libraries }
+
+Algunas bibliotecas JS hacen suposiciones que no funcionan como se esperaba cuando las ejecuta un service worker. Por ejemplo, suponiendo que `window` o `document` estén disponibles, o utilizando una API no disponible para los service workers (`XMLHttpRequest`, almacenamiento local, etc.). Asegúrese de que las bibliotecas críticas que necesite para su aplicación sean compatibles con los service workers. Para esta PWA en particular, queríamos usar [gapi.js](https://github.com/google/google-api-javascript-client) para la autenticación, pero no pudimos porque no era compatible con los service workers. Los autores de bibliotecas también deben reducir o eliminar las suposiciones innecesarias sobre el contexto de JavaScript, siempre que sea posible, para respaldar los casos de uso de service workers, como evitar las API incompatibles con los service workers y [evitar el estado global](#global-state).
+
+### Evite acceder a IndexedDB durante la inicialización {: #idb }
+
+No lea [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) al inicializar su script de service worker, o puede entrar en esta situación no deseada:
+
+1. El usuario tiene una aplicación web con IndexedDB (IDB) versión N
+2. Se incluye una nueva aplicación web con la versión N+1 de IDB
+3. El usuario visita la PWA, lo que desencadena la descarga de un nuevo service worker
+4. El nuevo service worker lee el IDB antes de registrar el controlador de evento `install`, lo que desencadena un ciclo de actualización del IDB para pasar de N a N+1
+5. Dado que el usuario tiene un cliente antiguo con la versión N, el proceso de actualización del service worker se bloquea ya que las conexiones activas todavía están abiertas a la versión anterior de la base de datos
+6. El service worker cuelga y nunca se instala
+
+En nuestro caso, la caché se invalidaba en la instalación del service worker, por lo que si el service worker nunca se instaló, los usuarios nunca recibieron la aplicación actualizada.
+
+### Hágalo resistente {: #resilient}
+
+Aunque los scripts del service worker se ejecutan en segundo plano, también se pueden finalizar en cualquier momento, incluso cuando se encuentran en medio de operaciones de I/O (red, IDB, etc.). Cualquier proceso de larga duración debería poder reanudarse en cualquier momento.
+
+En el caso de un proceso de sincronización que cargó archivos grandes al servidor y se guardó en IDB, nuestra solución para cargas parciales interrumpidas fue aprovechar el sistema reanudable de nuestra biblioteca de carga interna, guardando la URL de carga reanudable en IDB antes de cargar y usar esa URL para reanudar una carga si no se completó la primera vez. Además, antes de cualquier operación de I/O de larga ejecución, el estado se guardaba en IDB para indicar en qué parte del proceso estábamos para cada registro.
+
+### No dependa del estado global {: #global-state }
+
+Debido a que los service workers existen en un contexto diferente, muchos símbolos que podría esperar que existan no están presentes. Gran parte de nuestro código se ejecutó tanto en un contexto `window`, como de service worker (como registro, indicadores, sincronización, etc.). El código debe actuar a la defensiva con respecto a los servicios que utiliza, como el almacenamiento local o las cookies. Puede usar [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis) para referirse al objeto global de una manera que funcione en todos los contextos. También use los datos almacenados en variables globales con moderación, ya que no hay garantía de cuándo finalizará el script y se desalojará el estado.
+
+### Desarrollo local {: #local-development }
+
+Un componente importante de los service workers es el almacenamiento local en caché de los recursos. Sin embargo, durante el desarrollo, esto es exactamente lo *contrario* de lo que desea, especialmente cuando las actualizaciones se realizan de forma diferida. Todavía desea instalar el service worker para poder depurar problemas con él o trabajar con otras API, como sincronización en segundo plano o notificaciones. En Chrome, puede lograr esto a través de Chrome DevTools habilitando la casilla de verificación **Omitir para la red** (Panel de **aplicaciones** &gt; Panel de **service workers**) además de habilitar la casilla de verificación **Deshabilitar caché** en el panel **Red** para deshabilitar también la memoria caché. Para cubrir más navegadores, optamos por una solución diferente al incluir una bandera para deshabilitar el almacenamiento en caché en nuestro service worker, que está habilitado de forma predeterminada en las compilaciones de desarrolladores. Esto asegura que los desarrolladores siempre obtengan sus cambios más recientes sin problemas de almacenamiento en caché. Es importante incluir el encabezado `Cache-Control: no-cache` para [evitar que el navegador almacene en caché cualquier activo](/http-cache/#unversioned-urls).
+
+### Lighthouse {: #lighthouse}
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) proporciona una serie de herramientas de depuración útiles para las PWA. Para ello, escanea un sitio y genera informes que cubren las PWA, rendimiento, accesibilidad, SEO y otras mejores prácticas. Recomendamos [ejecutar Lighthouse en integración continua](https://github.com/GoogleChrome/lighthouse-ci) para alertarle si incumple uno de los criterios para ser una PWA. En realidad, esto nos sucedió una vez, donde el service worker no estaba instalando y no nos dimos cuenta antes de un impulso de producción. Tener Lighthouse como parte de nuestro CI lo habría evitado.
+
+### Adoptar la entrega continua {: #continuous-delivery }
+
+Debido a que los service workers pueden actualizar automáticamente, los usuarios carecen de la capacidad de limitar las actualizaciones. Esto reduce significativamente la cantidad de clientes desactualizados. Cuando el usuario abría nuestra aplicación, el service worker servía al cliente anterior mientras descargaba el nuevo cliente de manera diferida. Una vez que se descargó el nuevo cliente, le pedirá al usuario que actualice la página para acceder a nuevas funciones. Incluso si el usuario ignoraba esta solicitud, la próxima vez que actualizara la página, recibiría la nueva versión del cliente. Como resultado, es bastante difícil para un usuario rechazar las actualizaciones de la misma manera que lo haría para las aplicaciones de iOS/Android.
+
+Pudimos llevar a cabo cambios importantes en el backend con un tiempo de migración muy corto para los clientes. Por lo general, damos un mes para que los usuarios se actualicen a clientes más nuevos antes de realizar cambios importantes. Dado que la aplicación funcionaría mientras estaba obsoleta, en realidad era posible que los clientes más antiguos existieran si el usuario no había abierto la aplicación durante mucho tiempo. En iOS, los service workers son [desalojados después de un par de semanas](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/#post-10218:~:text=7%2DDay%20Cap%20on%20All%20Script%2DWriteable%20Storage), por lo que este caso no ocurre. Para Android, este problema podría mitigarse si no se publica mientras está obsoleto o si el contenido expira manualmente después de algunas semanas. En la práctica nunca encontramos problemas de clientes obsoletos. Lo estricto que un equipo determinado quiera ser aquí, depende de su caso de uso específico, pero las PWA brindan una flexibilidad significativamente mayor que las aplicaciones de iOS/Android.
+
+### Obtener valores de cookies en un service worker {: #cookies }
+
+A veces es necesario acceder a los valores de las cookies en el contexto de un service worker. En nuestro caso, necesitábamos acceder a los valores de las cookies para generar un token para autenticar las solicitudes de API de origen. En un service worker, las API sincrónicas como `document.cookies` no están disponibles. Siempre puede enviar un mensaje a los clientes activos (con ventana) desde el service worker para solicitar los valores de las cookies, aunque es posible que el service worker se ejecute en segundo plano sin ningún cliente con ventana disponible, como durante una sincronización en segundo plano. Para solucionar esto, creamos un punto final en nuestro servidor frontend que simplemente devolvía el valor de la cookie al cliente. El service worker realizó una solicitud de red a este punto final y leyó la respuesta para obtener los valores de las cookies.
+
+Con el lanzamiento de la [API de tienda de cookies](https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies), esta solución ya no debería ser necesaria para los navegadores que la admiten, ya que proporciona acceso asincrónico a las cookies del navegador y el service worker puede utilizarla directamente.
+
+## Obstáculos para los service workers no generados {: #pitfalls }
+
+### Asegure el cambio del script del service worker si cambia algún archivo estático en caché {: #regeneration }
+
+Un patrón común de PWA es que un service worker instale todos los archivos de aplicaciones estáticos durante su fase `install`, lo que permite a los clientes acceder directamente a la caché de la API de almacenamiento en caché para todas las visitas posteriores. Los service workers solo se instalan cuando el navegador detecta que el script del service worker ha cambiado de alguna manera, por lo que teníamos que asegurarnos de que el archivo del script del service worker cambiara de alguna manera cuando cambiaba un archivo en caché. Hicimos esto manualmente al incrustar un hash del conjunto de archivos de recursos estáticos dentro de nuestro script de service worker, por lo que cada versión produjo un archivo JavaScript de service worker distinto. Las bibliotecas de service workers como [Workbox](https://developer.chrome.com/docs/workbox/) automatizan este proceso por usted.
+
+### Prueba unitaria {: #unit-testing }
+
+Las API de service worker funcionan agregando detectores de eventos al objeto global. Por ejemplo:
+
+```js
+self.addEventListener('fetch', (evt) => evt.respondWith(fetch('/foo')));
+```
+
+Esto puede ser difícil de probar porque necesita simular el activador del evento, el objeto del evento, esperar la respuesta `respondWith()` y luego esperar la promesa, antes de finalmente afirmar el resultado. Una forma más fácil de estructurar esto es delegar toda la implementación a otro archivo, lo cual es más fácil de probar.
+
+```js
+import fetchHandler from './fetch_handler.js';
+self.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));
+```
+
+Debido a las dificultades de la prueba unitaria de un script de service worker, mantuvimos el script de service worker central lo más básico posible, dividiendo la mayor parte de la implementación en otros módulos. Dado que esos archivos eran solo módulos JS estándar, podrían probarse unitariamente de manera más sencilla con bibliotecas de prueba estándar.
+
+## Estén atentos a las partes 2 y 3 {: #stay-tuned}
+
+En las partes 2 y 3 de esta serie hablaremos sobre la gestión de contenido multimedia y problemas específicos de iOS. Si desea preguntarnos más sobre la creación de una PWA en Google, visite nuestros perfiles de autor para saber cómo contactarnos:
+
+- [Joel](/authors/joelriley)
+- [Douglas](/authors/douglasparker)
+- [Dikla](/authors/msdikla)
diff --git a/src/site/content/es/blog/building-a-settings-component/index.md b/src/site/content/es/blog/building-a-settings-component/index.md
new file mode 100644
index 00000000000..aa611c50056
--- /dev/null
+++ b/src/site/content/es/blog/building-a-settings-component/index.md
@@ -0,0 +1,688 @@
+---
+layout: post
+title: Construyendo un componente de configuración
+subhead: Una descripción fundamental de cómo crear un componente de configuración de controles deslizantes y casillas de verificación.
+authors:
+  - adamargyle
+description: Una descripción fundamental de cómo crear un componente de configuración de controles deslizantes y casillas de verificación.
+date: 2021-03-17
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SUaxDTgOYvv2JXxaErBP.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zkv1FlI6dn82rJ104yBV.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+En esta publicación, quiero compartir mi forma de pensar cuando creo un componente de configuración para que la web sea responsiva, admita múltiples entradas de dispositivo y funcione en todos los navegadores. Prueba esto en esta [demostración](https://gui-challenges.web.app/settings/dist/).
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/WuIwd9jPb30KmmnjJn75.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> <a href="https://gui-challenges.web.app/settings/dist/">Demostración</a> </figcaption></figure>
+
+Si prefieres ver un video o deseas una vista previa del UI/UX de lo que estamos creando, aquí hay un tutorial más corto en YouTube:
+
+{% YouTube 'dm7gnp6eh3Q' %}
+
+## Descripción general
+
+He dividido los aspectos de este componente en las siguientes secciones:
+
+1. [Diseños](#layouts)
+2. [Color](#color)
+3. [Entrada de rango personalizado](#custom-range)
+4. [Entrada de casilla de verificación personalizada](#custom-checkbox)
+5. [Consideraciones de accesibilidad](#accessibility)
+6. [JavaScript](#javascript)
+
+{% Aside 'gotchas' %} Los siguientes fragmentos de CSS asumen PostCSS con [PostCSS Preset Env](https://preset-env.cssdb.org/features). La intención es practicar de manera temprana y a menudo con la sintaxis en los primeros borradores o en todos los buscadores que se encuentre disponible de manera experimental. O como les gusta decir a los complementos, "Usa hoy el CSS del mañana". {% endAside %}
+
+## Diseños
+
+¡Esta es la primera demostración de GUI Challenge en ser **completamente un CSS Grid**! Aquí está cada cuadrícula resaltada con [Chrome DevTools for grid](https://goo.gle/devtools-grid):
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/h6LZhScslprBcFol4gGp.png", alt="Contornos coloridos y superposiciones de espacios que ayudan a mostrar todos los cuadros que componen el diseño de configuración", width="800", height="563" %}
+
+{% Aside %} Para resaltar tus diseños de cuadrícula:
+
+1. Abre Chrome DevTools usando `cmd+opt+i` o `ctrl+alt+i`.
+2. Selecciona la pestaña de Diseño junto a la pestaña de Estilos.
+3. En la sección de Cuadrícula, marca todos los diseños.
+4. Cambia los colores de todos los diseños. {% endAside %}
+
+### Solo por espacio
+
+El diseño más común:
+
+```css
+foo {
+  display: grid;
+  gap: var(--something);
+}
+```
+
+A este diseño le llamo "solo por espacio" porque solo usa la cuadrícula para agregar espacios entre bloques.
+
+Cinco diseños usan esta estrategia, aquí se muestran todos:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zYWSVLzdtrh1K8p8yUuA.png", alt="Diseños de cuadrícula verticales resaltados con contornos y rellenados con espacios", width="800", height="568" %}
+
+El elemento de `fieldset`, que contiene cada grupo de entrada (`.fieldset-item`), usa `gap: 1px` para crear los bordes finos entre los elementos. ¡No es una solución de borde complicada!
+
+<div class="switcher">
+{% Compare 'better', 'Filled gap' %}
+
+```css
+.grid {
+  display: grid;
+  gap: 1px;
+  background: var(--bg-surface-1);
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+  }
+}
+```
+
+{% endCompare %}
+
+{% Compare 'worse', 'Border trick' %}
+
+```css
+.grid {
+  display: grid;
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--bg-surface-1);
+    }
+  }
+}
+```
+{% endCompare %}
+</div>
+
+### Envoltura de cuadricula natural
+
+El diseño más complejo terminó siendo el diseño de macros, el sistema de diseño lógico entre `<main>` y `<form>`.
+
+#### Centrando del contenido de envoltura
+
+Tanto la flexbox como la cuadrícula brindan habilidades a `align-items` o `align-content`, y cuando se trata de elementos de envoltura, las alineaciones de diseño de `content` distribuirán el espacio entre los elementos secundarios como un grupo.
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+}
+```
+
+El elemento principal está usando `place-content: center` [método abreviado de alineación](https://developer.mozilla.org/docs/Web/CSS/place-content) para que los elementos secundarios estén centrados vertical y horizontalmente en diseños de una y dos columnas.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IQI2PofA6gpNFUkDrvKo.mp4", autoplay="true", loop="true", muted="true" %}
+
+Mira el video anterior para apreciar cómo el "contenido" permanece centrado, a pesar de que se ha producido el ajuste.
+
+#### Repeat auto-fit minmax
+
+El `<form>` utiliza un diseño de cuadrícula adaptable para cada sección. Este diseño cambia de una a dos columnas según el espacio disponible.
+
+```css
+form {
+  display: grid;
+  gap: var(--space-xl) var(--space-xxl);
+  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
+  align-items: flex-start;
+  max-width: 89vw;
+}
+```
+
+Esta cuadrícula tiene un valor diferente para `row-gap` (--space-xl) y `column-gap` (--space-xxl) para poner ese toque personalizado en el diseño responsivo. Cuando las columnas se apilan, queremos un espacio grande, pero no tan grande como si estuviéramos en una pantalla ancha.
+
+La `grid-template-columns` utiliza 3 funciones CSS: `repeat()`, `minmax()` y `min()`. [Una Kravets](#) tiene una [excelente publicación de blog de diseño](/one-line-layouts/) sobre esto, llamándolo [RAM](/one-line-layouts/#07-ram-repeat,-auto,-minmax-grid-template-columnsauto-fit,-minmaxlessbasegreater,-1fr).
+
+Hay 3 adiciones especiales en nuestro diseño, si lo comparas con el de Una:
+
+- Pasamos una función extra de `min()`.
+- Especificamos `align-items: flex-start`.
+- Hay un estilo de `max-width: 89vw`.
+
+La función extra de `min()` está bien descrita por Evan Minto en su blog en la publicación [Intrinsically Responsive CSS Grid with minmax() y min() (Cuadricula CSS intrínsecamente responsiva con minmax() y min())](https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/). Recomiendo leer esa entrada. La alineación de `flex-start` es para eliminar el efecto de estiramiento predeterminado, de modo que los elementos secundarios de este diseño no necesiten tener alturas iguales, pueden tener alturas naturales e intrínsecas. El video de YouTube tiene un desglose rápido de esta adición de alineación.
+
+Es importante darle un pequeño desglose a `max-width: 89vw` en esta publicación. Déjame mostrarte el diseño con y sin el estilo aplicado:
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/gdldf7hyaBrHWwxQbSaT.mp4", autoplay="true", loop="true", muted="true" %}
+
+¿Qué está sucediendo? Cuando `max-width` es especificado, proporciona contexto, tamaño explícito o [tamaño definido](https://drafts.csswg.org/css-sizing-3/#definite) para que el [algoritmo de diseño de `auto-fit`](https://drafts.csswg.org/css-grid/#auto-repeat) sepa cuántas repeticiones puede caber en el espacio. Si bien parece obvio que el espacio es de "ancho completo", según la especificación de la cuadrícula CSS, se debe proporcionar un tamaño definido o un tamaño máximo. He proporcionado un tamaño máximo.
+
+Entonces, ¿por qué `89vw`? Porque "funcionó" para mi diseño. Un par de personas de Chrome y yo estamos investigando por qué un valor más razonable, como `100vw`, no es suficiente y si esto se trata de un error.
+
+### Espaciado
+
+La mayor parte de la armonía de este diseño proviene de una paleta de espaciado limitada, 7 espacios para ser exactos.
+
+```css
+:root {
+  --space-xxs: .25rem;
+  --space-xs:  .5rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-xxl: 6rem;
+}
+```
+
+El uso de estos flujos es realmente agradable con grid, [CSS @nest](https://drafts.csswg.org/css-nesting-1/) y [level 5 syntax of @media (sintaxis de nivel 5 de @media)](https://drafts.csswg.org/mediaqueries-5/). Aquí hay un ejemplo, el conjunto de estilos de diseño del `<main>`.
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+  padding: var(--space-sm);
+
+  @media (width >= 540px) {
+    & {
+      padding: var(--space-lg);
+    }
+  }
+
+  @media (width >= 800px) {
+    & {
+      padding: var(--space-xl);
+    }
+  }
+}
+```
+
+Una cuadrícula con contenido centrado, moderadamente acolchado (padded) por defecto (como es en los dispositivos móviles). Pero a medida que se dispone de más espacio en la ventana gráfica, se extiende aumentando el relleno. ¡CSS en el 2021 luce bastante bien!
+
+¿Recuerda el diseño anterior, "solo por espacio"? Aquí hay una versión más completa de cómo se ven en este componente:
+
+```css
+header {
+  display: grid;
+  gap: var(--space-xxs);
+}
+
+section {
+  display: grid;
+  gap: var(--space-md);
+}
+```
+
+## Color
+
+Un uso controlado del color ayudó a que este diseño se destacara como expresivo pero minimalista. Lo hago de la siguiente manera:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --surface2: lch(15 0 0);
+  --surface3: lch(20 0 0);
+  --surface4: lch(25 0 0);
+
+  --text1: lch(95 0 0);
+  --text2: lch(75 0 0);
+}
+```
+
+{% Aside 'key-term' %} El [complemento PostCSS de `lab()` y `lch()`](https://github.com/csstools/postcss-lab-function) es parte de [PostCSS Preset Env](https://preset-env.cssdb.org/features#lch-function) y genera colores `rgb()`. {% endAside %}
+
+Nombro a mi superficie (surface) y colores del texto con números en lugar de nombres como `surface-dark` y `surface-darker` porque en una consulta de medios, los cambiaré y claro y oscuro no tendrán sentido.
+
+Los intercambio en una consulta de medios de preferencia como la siguiente:
+
+```css
+:root {
+  ...
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --surface2: lch(100 0 0);
+      --surface3: lch(98 0 0);
+      --surface4: lch(85 0 0);
+
+      --text1: lch(20 0 0);
+      --text2: lch(40 0 0);
+    }
+  }
+}
+```
+
+{% Aside 'key-term' %} El [complemento PostCSS `@nest`](https://github.com/csstools/postcss-nesting) es parte de [PostCSS Preset Env](https://preset-env.cssdb.org/features) y expandirá los selectores a una sintaxis compatible con los navegadores actuales. {% endAside %}
+
+Es importante echarle un vistazo rápido a la imagen y a las estrategias generales antes de sumergirnos en los detalles de la sintaxis del color. Pero, como me adelanté un poco, permíteme retroceder.
+
+### ¿LCH?
+
+Sin profundizar demasiado en la teoría del color, LCH es una sintaxis orientada a los humanos, que se adapta a cómo percibimos el color, no a cómo medimos el color con matemáticas (por ejemplo, usando el 255). Esto le da una clara ventaja, ya que los humanos pueden escribirlo más fácilmente y otros humanos estarán en sintonía con estos ajustes.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/160dWLSrMhFISwWMVd4w.png", alt="Una captura de pantalla de la página web pod.link/csspodcast, con el Color 2: Perception episode pulled up", width="800", height="329" %}<figcaption> Aprende sobre el color perceptual (¡y más!) En el <a href="https://pod.link/thecsspodcast">CSS Podcast</a></figcaption></figure>
+
+Por hoy, en esta demostración, centrémonos en la sintaxis y los valores que estoy cambiando para hacer claro y oscuro. Veamos 1 superficie y 1 color de texto:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --text1:    lch(95 0 0);
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --text1:    lch(40 0 0);
+    }
+  }
+}
+```
+
+`--surface1: lch(10 0 0)` se traduce en un `10%` de luminosidad, 0 croma y 0 matiz: un gris incoloro muy oscuro. Luego, en la consulta de medios para el modo claro, la luminosidad se cambia al `90%` con `--surface1: lch(90 0 0);`. Y esa es la esencia de la estrategia. Comienza cambiando la luminosidad entre los 2 temas, manteniendo las relaciones de contraste que requiere el diseño o lo que puede mantener la accesibilidad.
+
+La ventaja de `lch()` es que la claridad está orientada al ser humano y podemos sentirnos bien con un `%` de cambio, que será perceptual y consistentemente ese `%` será diferente. `hsl()` por ejemplo, [no es tan confiable](https://twitter.com/argyleink/status/1201908189257555968).
+
+Hay [más para aprender](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) sobre los espacios de color y `lch()` si estás interesado. ¡Se está aproximando!
+
+{% Blockquote 'Lea Verou' %} CSS en este momento **no puede acceder a estos colores en lo absoluto**. Permítanme repetirlo: **no tenemos acceso a un tercio de los colores en la mayoría de los monitores modernos.** Y estos no son solo algunos colores, sino los **colores más vivos que puede mostrar la pantalla**. Nuestros sitios web se han desvanecido porque el hardware del monitor evolucionó más rápido que las especificaciones CSS y las implementaciones del navegador. {% endBlockquote %}
+
+### Controles de formularios adaptables con color-scheme
+
+Muchos navegadores incluyen controles de temas oscuros, actualmente Safari y Chromium lo hacen, pero debes especificar en el CSS o HTML que tu diseño los usa.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/0VVtEAWM6jHeIxahqnFy.mp4", autoplay="true", loop="true", muted="true" %}
+
+Lo anterior demuestra el efecto de la propiedad del panel Estilos de DevTools. La demostración usa la etiqueta HTML, que en mi opinión es generalmente una mejor ubicación:
+
+```html
+<meta name="color-scheme" content="dark light">
+```
+
+Aprende todo al respecto en este [artículo sobre `color-scheme`](/color-scheme/) de [Thomas Steiner](/authors/thomassteiner/). ¡Hay mucho más que ganar que las entradas de las casillas oscuras  de verificación!
+
+### `accent-color` de CSS
+
+Ha habido [una actividad reciente](https://twitter.com/argyleink/status/1360022120810483715?s=20) en torno a `accent-color` en los elementos de formulario, siendo un estilo CSS único que puede cambiar el color de tinte utilizado en el elemento de entrada de los navegadores. Lee más sobre esto [aquí en GitHub](https://github.com/w3c/csswg-drafts/issues/5187). Lo he incluido en mis estilos para este componente. Como los navegadores lo permiten, mis casillas de verificación estarán más relacionadas con el tema mediante los colores rosa y morado.
+
+```css
+input[type="checkbox"] {
+  accent-color: var(--brand);
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J9pbhB0ImoDzbsXkBGtG.png", alt="Una captura de pantalla de Chromium en Linux con casillas de verificación rosas", width="800", height="406" %}
+
+### Estallidos de color con degradados fijos y focus-within
+
+El color resalta más cuando se usa con moderación y una de las formas en que me gusta lograrlo es a través de interacciones coloridas en la interfaz de usuario.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pm75QwVToKkiqedqPtmm.mp4", autoplay="true", loop="true", muted="true", width="480px" %}
+
+Hay muchas capas de retroalimentación e interacción de la interfaz de usuario en el video anterior, que ayudan a dar personalidad a la interacción mediante lo siguiente:
+
+- Destacando el contexto.
+- Proporcionar información de la interfaz de usuario de "qué tan completo" está el valor en el rango.
+- Proporcionar comentarios de la interfaz de usuario de que un campo está aceptando entradas.
+
+Para proporcionar comentarios cuando se interactúa con un elemento, CSS utiliza la pseudo-clase de [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within) para cambiar la apariencia de varios elementos, analicemos el `.fieldset-item`, es muy interesante:
+
+```css
+.fieldset-item {
+  ...
+
+  &:focus-within {
+    background: var(--surface2);
+
+    & svg {
+      fill: white;
+    }
+
+    & picture {
+      clip-path: circle(50%);
+      background: var(--brand-bg-gradient) fixed;
+    }
+  }
+}
+```
+
+Cuando uno de los elementos secundarios de este elemento tiene un focus-within:
+
+1. Al `.fieldset-item` background se le asigna un color de superficie de mayor contraste.
+2. El `svg` anidado se rellena de blanco para un mayor contraste.
+3. El anidado `clip-path` en el `<picture>` se expande a un círculo completo y el fondo se rellena con el degradado fijo brillante.
+
+## Rango personalizado
+
+Dado el siguiente elemento de entrada HTML, te mostraré cómo personalicé su apariencia:
+
+```html
+<input type="range">
+```
+
+Hay 3 partes de este elemento que debemos personalizar:
+
+1. [Elemento de rango / contenedor](#range-element-styles)
+2. [Pista (track)](#track-styles)
+3. [Pulgar (thumb)](#thumb-styles)
+
+### Estilos de elementos de rango
+
+```css
+input[type="range"] {
+  /* style setting variables */
+  --track-height: .5ex;
+  --track-fill: 0%;
+  --thumb-size: 3ex;
+  --thumb-offset: -1.25ex;
+  --thumb-highlight-size: 0px;
+
+  appearance: none;         /* limpia el estilo, me da espacio para el mio */
+  display: block;
+  inline-size: 100%;        /* llena el contenedor */
+  margin: 1ex 0;            /* se asegura que el pulgar no entra en colisión con algún contenido secundario */
+  background: transparent;  /* el fondo (background) esta en la pista */
+  outline-offset: 5px;      /* los estilos enfocados tienen espacio */
+}
+```
+
+Las primeras líneas de CSS son las partes personalizadas de los estilos y espero que al documentarlas claramente nos ayude. El resto de los estilos son en su mayoría estilos restablecidos, para proporcionar una base consistente para construir las partes complicadas del componente.
+
+### Estilos de pista
+
+```css
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none; /* limpia el estilo, me da espacio para el mio */
+  block-size: var(--track-height);
+  border-radius: 5ex;
+  background:
+    /* gradiente de parada dura:
+        - mitad transparente (donde lo colorido estará)
+        - llenar la pista con color medio oscuro
+        - la 1er imagen de fondo esta en arriba
+    */
+    linear-gradient(
+      to right,
+      transparent var(--track-fill),
+      var(--surface1) 0%
+    ),
+    /* efecto colorido de llenado, superficie detrás de la pista llenada */
+    var(--brand-bg-gradient) fixed;
+}
+```
+
+El truco para esto es "revelar" el color vibrante de relleno. Esto se hace con el gradiente de hard stop en la parte superior. El degradado es transparente hasta el porcentaje de relleno y, a continuación, utiliza el color de la superficie de la pista sin rellenar. Detrás de esa superficie sin relleno, hay un color de ancho completo, esperando que la transparencia lo revele.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/aiAL28AkDRZvaAZNEbW8.mp4", autoplay="true", loop="true", muted="true" %}
+
+#### Estilo de relleno de pista
+
+Mi diseño **requiere JavaScript** para mantener el estilo de relleno. Hay estrategias solo de CSS, pero requieren que el elemento del pulgar tenga la misma altura que la pista, y no pude encontrar una armonía dentro de esos límites.
+
+```js
+/* toma los desplazadores de la página */
+const sliders = document.querySelectorAll('input[type="range"]')
+
+/* toma un elemento de desplazador, regresa un porcentaje como cadena para usar en CSS */
+const rangeToPercent = slider => {
+  const max = slider.getAttribute('max') || 10;
+  const percent = slider.value / max * 100;
+
+  return `${parseInt(percent)}%`;
+};
+
+/* al cargar la página, define la cantidad de llenado */
+sliders.forEach(slider => {
+  slider.style.setProperty('--track-fill', rangeToPercent(slider));
+
+  /* cuando un desplazador cambia, actualiza el prop de llenado */
+  slider.addEventListener('input', e => {
+    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
+  })
+})
+```
+
+Creo que esto lo convierte en una buena mejora visual. El control deslizante funciona muy bien sin JavaScript, el prop de `--track-fill` no es necesario, simplemente no tendrá un estilo de relleno si no está presente. Si JavaScript está disponible, completa la propiedad personalizada mientras observas los cambios del usuario, sincronizando la propiedad personalizada con el valor.
+
+[Aquí hay una gran publicación](https://css-tricks.com/sliding-nightmare-understanding-range-input/) sobre [CSS-Tricks](https://css-tricks.com/) de [Ana Tudor](https://twitter.com/anatudor), que demuestra una solución única de CSS para el relleno de pistas. También encontré este [elemento de `range`](https://app.native-elements.dev/editor/elements/range) muy inspirador.
+
+### Estilos de pulgar
+
+```css
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none; /* limpia el estilo, me da espacio para el mio */
+  cursor: ew-resize; /* estilo del cursor para admitir la dirección de arrastre */
+  border: 3px solid var(--surface3);
+  block-size: var(--thumb-size);
+  inline-size: var(--thumb-size);
+  margin-top: var(--thumb-offset);
+  border-radius: 50%;
+  background: var(--brand-bg-gradient) fixed;
+}
+```
+
+La mayoría de estos estilos son para hacer un bonito círculo. De nuevo, verás el degradado de fondo fijo que unifica los colores dinámicos de los pulgares, las pistas y los elementos SVG asociados. Separé los estilos de la interacción para ayudar a aislar la técnica de `box-shadow` que se usa para el resaltado de desplazamiento:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+::-webkit-slider-thumb {
+  …
+
+  /* shadow spread es inicialmente un 0 */
+  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
+
+  /* si el movimiento es permitido, haz una transición del cambio de box-shadow*/
+  @media (--motionOK) {
+    & {
+      transition: box-shadow .1s ease;
+    }
+  }
+
+  /* en el estado de on hover/active del elemento primario, incrementa el tamaño del prop */
+  @nest input[type="range"]:is(:hover,:active) & {
+    --thumb-highlight-size: 10px;
+  }
+}
+```
+
+{% Aside 'key-term' %} [@custom-media](https://drafts.csswg.org/mediaqueries-5/#custom-mq) es una adición de especificación de nivel 5 de [PostCSS Custom Media](https://github.com/postcss/postcss-custom-media), que forma parte de [PostCSS Preset Env](https://preset-env.cssdb.org/features). {% endAside %}
+
+El objetivo era un destacado visual animado y fácil de manejar para los comentarios de los usuarios. Al usar una box shadow (sombra de la caja), puedo evitar [activar el diseño](/animations-guide/#triggers) con el efecto. Hago esto creando una sombra que no esté borrosa y coincida con la forma circular del elemento del pulgar. Luego cambio y hago la transición de su tamaño de propagación al pasar el mouse.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/s835RbH88L5bxjl5bMFl.mp4", autoplay="true", loop="true", muted="true" %}
+
+Si tan solo el efecto de resaltado fuera tan fácil en las casillas de verificación…
+
+### Selectores entre navegadores
+
+Descubrí que necesitaba estos `-webkit-` y `-moz-` para lograr consistencia entre navegadores:
+
+```css
+input[type="range"] {
+  &::-webkit-slider-runnable-track {}
+  &::-moz-range-track {}
+  &::-webkit-slider-thumb {}
+  &::-moz-range-thumb {}
+}
+```
+
+{% Aside 'gotchas' %} [Josh Comeau](https://twitter.com/JoshWComeau) describe por qué los ejemplos anteriores no usan simplemente una coma entre los selectores para el estilo de varios navegadores; consulta el [hilo de Twitter](https://twitter.com/JoshWComeau/status/1359213591602335752?s=20) para obtener más información. {% endAside %}
+
+## Casilla de verificación personalizada
+
+Dado el siguiente elemento de entrada HTML, te mostraré cómo personalizar su apariencia:
+
+```html
+<input type="checkbox">
+```
+
+Hay 3 partes de este elemento que debemos personalizar:
+
+1. [Elemento de casilla de verificación](#checkbox-element)
+2. [Etiquetas asociadas](#checkbox-labels)
+3. [Efecto de resaltado](#checkbox-highlight)
+
+### Elemento de casilla de verificación
+
+```css
+input[type="checkbox"] {
+  inline-size: var(--space-sm);   /* incrementa el ancho */
+  block-size: var(--space-sm);    /* incrementa el tamaño */
+  outline-offset: 5px;            /* mejora de focus style */
+  accent-color: var(--brand);     /* marca con un color la entrada */
+  position: relative;             /* preparación para un pseudo elemento */
+  transform-style: preserve-3d;   /* crea un contexto de apilamiento de espacio 3d con eje z */
+  margin: 0;
+  cursor: pointer;
+}
+```
+
+Los estilos de `transform-style` y de `position` se preparan para el pseudoelemento que presentaremos más adelante para diseñar el resaltado. De lo contrario, es algo menos significante en el estilo basandome en mi opinión. Me gusta que el cursor sea un puntero, me gustan las outline offsets, las casillas de verificación predeterminadas son demasiado pequeñas y, si se [permite](https://drafts.csswg.org/css-ui-4/#widget-accent) el `accent-color`, lleva estas casillas de verificación al esquema de color de la marca (brand color scheme).
+
+### Etiquetas de las casillas de verificación
+
+Es importante proporcionar etiquetas para las casillas de verificación por 2 razones. La primera es representar para qué se usa el valor de la casilla de verificación, para responder "¿encendido o apagado o para qué?" En segundo lugar es para el UX, los usuarios de la web se han acostumbrado a interactuar con las casillas de verificación a través de sus etiquetas asociadas.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/7GYIFNjNCBdj13juFO7S.mp4", autoplay="true", loop="true", muted="true" %}
+
+<div class="switcher">{% Compare 'better', 'input' %}</div>
+<pre data-md-type="block_code" data-md-language="html"><code class="language-html"><input
+  type="checkbox"
+  id="text-notifications"
+  name="text-notifications"
+>
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'label' %}</p>
+<pre data-md-type="block_code" data-md-language="html"><code class="language-html"><label for="text-notifications">
+  <h3>Mensajes de texto</h3>
+  <small>Recibe notificaciones sobre todos los mensajes de texto enviados a su dispositivo</small>
+</label>
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+En tu etiqueta, coloca un atributo de `for` que apunte a una casilla de verificación mediante su ID: `<label for="text-notifications">`. En tu casilla de verificación, duplica el nombre y la identificación para asegurarte de que se encuentran con diferentes herramientas y tecnología, como un ratón o un lector de pantalla: `<input type="checkbox" id="text-notifications" name="text-notifications">`. `:hover`, `:active` y más vienen gratis con la conexión, aumentando las formas en que se puede interactuar con tu formulario.
+
+### Resaltado de la casilla de verificación
+
+Quiero mantener mis interfaces consistentes y el elemento deslizante tiene un bonito resaltado en miniatura que me gustaría usar con la casilla de verificación. La miniatura puede usar `box-shadow` y su propiedad de  `spread` para escalar una sombra hacia arriba y hacia abajo. Sin embargo, ese efecto no funciona aquí porque nuestras casillas de verificación son [y deberían ser](https://twitter.com/argyleink/status/1329230409784291328?s=20) cuadradas.
+
+Pudes lograr el mismo efecto visual con un pseudo elemento y una cantidad desafortunada de CSS complicado:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+input[type="checkbox"]::before {
+  --thumb-scale: .01;                        /* escala inicial del color para resaltar */
+  --thumb-highlight-size: var(--space-xl);
+
+  content: "";
+  inline-size: var(--thumb-highlight-size);
+  block-size: var(--thumb-highlight-size);
+  clip-path: circle(50%);                     /* forma de círculo */
+  position: absolute;                         /* es por esto que usamos position relative en el elemento primario */
+  top: 50%;                                   /* tecnica de pop y plop (https://web.dev/centering-in-css/#5-pop-and-plop) */
+  left: 50%;
+  background: var(--thumb-highlight-color);
+  transform-origin: center center;            /* la meta es un circulo escalable colocado en el centro */
+  transform:                                  /* el orden aquí importa!! */
+    translateX(-50%)                          /* contra balancea a la izquierda: 50% */
+    translateY(-50%)                          /* contra balancea al tope: 50% */
+    translateZ(-1px)                          /* LO PONE DETRAS DE LA CASILLA */
+    scale(var(--thumb-scale))                 /* el valor que activamos para animación */
+  ;
+  will-change: transform;
+
+  @media (--motionOK) {                       /* transición permitida si el movimiento está habilitado */
+    & {
+      transition: transform .2s ease;
+    }
+  }
+}
+
+/* en on hover, define la propiedad personalizada de escala al estado de "in" */
+input[type="checkbox"]:hover::before {
+  --thumb-scale: 1;
+}
+```
+
+Crear un psuedo-elemento circular es un trabajo sencillo, pero **colocarlo detrás del elemento al que está unido** fue más difícil. Aquí está el antes y después de que lo arreglé:
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Spdpw5P1MD8ceazneRXo.mp4", autoplay="true", loop="true", muted="true" %}
+
+Definitivamente es una micro interacción, pero es importante para mí mantener la consistencia visual. La técnica de escala de animación es la misma que hemos estado usando en otros lugares. Establecemos una propiedad personalizada en un nuevo valor y dejamos que CSS la haga en función de las preferencias de movimiento. La característica clave aquí es `translateZ(-1px)`. El elemento primario creó un espacio 3D y este pseudo elemento secundario lo aprovechó colocándose ligeramente hacia atrás en el eje z.
+
+## Accesibilidad
+
+El video de YouTube hace una gran demostración de las interacciones del ratón, el teclado y el lector de pantalla para este componente de configuración. Anotaré algunos de los detalles aquí.
+
+### Opciones de elementos HTML
+
+```html
+<form>
+<header>
+<fieldset>
+<picture>
+<label>
+<input>
+```
+
+Cada uno de estos contiene sugerencias y consejos para la herramienta de navegación del usuario. Algunos elementos brindan sugerencias de interacción, algunos conectan la interactividad y algunos ayudan a dar forma al árbol de accesibilidad por el que navega un lector de pantalla.
+
+### Atributos HTML
+
+Podemos ocultar elementos que no son necesarios para los lectores de pantalla, en este caso el icono al lado del control deslizante:
+
+```html
+<picture aria-hidden="true">
+```
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fVjqHRZHQixAaxjeAvDP.mp4", autoplay="true", loop="true", muted="true", width="480px"%}
+
+El video anterior muestra el flujo del lector de pantalla en Mac OS. Observa cómo el foco de entrada se mueve directamente de un control deslizante al siguiente. Esto se debe a que hemos ocultado el icono que puede haber sido una parada en el camino hacia el siguiente control deslizante. Sin este atributo, un usuario tendría que detenerse, escuchar y pasar de la imagen que tal vez no pueda ver.
+
+{% Aside 'gotchas' %} Asegúrate de hacer una prueba de los lectores de pantalla en todos los buscadores. La demostración original incluía `<label>` en la lista de elementos con `aria-hidden="true"`, pero desde entonces se eliminó después de que una [conversación de Twitter](https://twitter.com/rob_dodson/status/1371859386210029568) reveló diferencias entre navegadores. {% endAside %}
+
+El SVG es un montón de matemáticas, agreguemos un elemento `<title>` para cuando el ratón pase por el elemento y despliegue un comentario legible por humanos sobre lo que están creando las matemáticas:
+
+```html
+<svg viewBox="0 0 24 24">
+  <title>A note icon</title>
+  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+</svg>
+```
+
+Aparte de eso, hemos utilizado suficiente HTML que fue claramente marcado que el formulario funciona realmente bien en el ratón, el teclado, los mandos de videojuegos y los lectores de pantalla.
+
+## JavaScript
+
+Ya he [explicado](#track-styles) cómo se administraba el color de relleno de la pista desde JavaScript, así que veamos ahora el JavaScript relacionado con el `<form>`:
+
+```js
+const form = document.querySelector('form');
+
+form.addEventListener('input', event => {
+  const formData = Object.fromEntries(new FormData(form));
+  console.table(formData);
+})
+```
+
+Cada vez que se interactúa con el formulario y ocurre un cambio, la consola registra el formulario como un objeto en una tabla para una fácil revisión antes de enviarlo a un servidor.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hFAyIOpOSdiczdf4AtIj.png", alt="Una captura de pantalla de los resultados de console.table(), donde los datos del formulario se muestran en una tabla", width="800", height="285" %}
+
+## Conclusión
+
+Ahora que sabes cómo lo hice, ¡¿cómo lo harías tú?! ¡Esta es una arquitectura de componentes bien divertida! ¿Quién va a hacer la primera versión con slots usando su framework favorito? 🙂
+
+Diversifiquemos nuestros enfoques y aprendamos todas las formas de construir en la web. Crea una demostración, [tuitéame](https://twitter.com/argyleink) tu versión y la agregaré a la sección de [Remixes de la comunidad](#community-remixes) a continuación.
+
+## Remixes de la comunidad
+
+- [¡@tomayac](https://twitter.com/tomayac) con su estilo respecto al área de desplazamiento para las etiquetas de las casillas de verificación! Esta versión no tiene ningún espacio flotante entre los elementos: [demostración](https://tomayac.github.io/gui-challenges/settings/dist/) y [fuente](https://github.com/tomayac/gui-challenges).
diff --git a/src/site/content/es/blog/building-a-sidenav-component/index.md b/src/site/content/es/blog/building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..9cb858300ea
--- /dev/null
+++ b/src/site/content/es/blog/building-a-sidenav-component/index.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: Construyendo un componente sidenav
+subhead: Una descripción general de los fundamentos de cómo construir un sidenav deslizante responsivo
+authors:
+  - adamargyle
+description: Una descripción general de los fundamentos de cómo construir un sidenav deslizante responsivo
+date: 2021-01-21
+hero: image/admin/Zo1KkESK9CfEIYpbWzap.jpg
+thumbnail: image/admin/pVZO6FsC9tF3H6QIWpY2.png
+codelabs: codelab-building-a-sidenav-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+En esta publicación, quiero compartir con ustedes cómo hice un prototipo de un componente de sidenav para la web que es responsivo, tiene estados, permite la navegación por teclado, funciona con y sin JavaScript y es compatible en todos los navegadores. Pruébalo en esta [demostración](https://gui-challenges.web.app/sidenav/dist/).
+
+Si prefieres ver un video, aquí tienes una versión de YouTube de esta publicación:
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## Resumen
+
+Es difícil construir un sistema de navegación responsivo. Algunos usuarios estarán en un teclado, algunos tendrán computadoras de escritorio potentes y algunos visitarán desde un pequeño dispositivo móvil. Todas las personas que visiten deben poder abrir y cerrar el menú.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/desktop-demo-1080p.mp4">
+  </source></video>
+  <figcaption>Demostración de diseño responsivo de escritorio a dispositivo móvil</figcaption></figure>
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/mobile-demo-1080p.mp4">
+  </source></video>
+  <figcaption>Modo claro y modo oscuro en iOS y Android</figcaption></figure>
+
+## Tácticas web
+
+En esta exploración de componentes tuve la alegría de combinar algunas características críticas de la plataforma web:
+
+1. CSS [`:target`](#target-psuedo-class)
+2. [Cuadrícula](#grid-stack) CSS
+3. [Transformaciones](#transforms) CSS
+4. Consultas de medios CSS para la ventana gráfica y las preferencias del usuario
+5. JS para el `focus` en las [mejoras UX](#ux-enhancements)
+
+Mi solución tiene una barra lateral y se alterna solo cuando se encuentra en una ventana de `540px` o menos. `540px` será nuestro breakpoint (punto de interrupción) para cambiar entre el diseño interactivo móvil y el diseño de escritorio estático.
+
+### Pseudoclase de CSS `:target` {: #target-psuedo-class }
+
+Un enlace de `<a>` establece el hash de la URL en `#sidenav-open` y el otro en vacío ( `''`). Por último, un elemento tiene la `id` para que coincida con el hash:
+
+```html
+<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
+
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<aside id="sidenav-open">
+  …
+</aside>
+```
+
+Al hacer clic en cada uno de estos enlaces cambia el estado hash de la URL de nuestra página, para que luego, con una pseudoclase, pueda mostrar y ocultar la sidenav (barra de navegación lateral):
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+  }
+
+  #sidenav-open:target {
+    visibility: visible;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/hash-change.mp4">
+  </source></video></figure>
+
+### Cuadrícula CSS {: #grid-stacks }
+
+En el pasado, solo usaba diseños y componentes de navegación lateral de posición absoluta o fija. Sin embargo, la cuadrícula, con su sintax de `grid-area`, nos permite asignar múltiples elementos a la misma fila o columna.
+
+#### Stacks
+
+El elemento de diseño principal `#sidenav-container` es una cuadrícula que crea 1 fila y 2 columnas, 1 de cada una se denomina `stack` (pila). Cuando el espacio está restringido, CSS asigna todos los `<main>` al mismo nombre de cuadrícula, colocando todos los elementos en el mismo espacio, creando una pila.
+
+```css
+#sidenav-container {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 540px) {
+  #sidenav-container > * {
+    grid-area: stack;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </source></video></figure>
+
+#### Fondo del menú
+
+`<aside>` es el elemento de animación que contiene la navegación lateral. Tiene 2 hijos: el contenedor de navegación `<nav>` llamado `[nav]` y un fondo `<a>` llamado `[escape]`, que se usa para cerrar el menú.
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+Ajusta `2fr` y `1fr` para encontrar la proporción que desees para la superposición del menú y su botón de cierre de espacio negativo.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </source></video>
+  <figcaption>Una demostración de lo que sucede cuando cambias la proporción.</figcaption></figure>
+
+### Transformaciones y transiciones 3D en CSS {: #transforms}
+
+Nuestro diseño ahora está apilado en un tamaño de ventana para dispositivos móviles. Hasta que se agreguen algunos estilos nuevos, se superpondrá a nuestro artículo de forma predeterminada. Aquí hay algo de UX (experiencia del usuario) que estoy buscando hacer con la siguiente sección:
+
+- Animar las acciones de abrir y cerrar
+- Solo animar con movimiento si el usuario está de acuerdo con eso
+- Animar la `visibility` para que el enfoque del teclado no entre en el elemento ubicado fuera de la pantalla
+
+A medida que empiezo a implementar animaciones con movimiento, quiero comenzar teniendo la accesibilidad como una alta prioridad.
+
+#### Movimiento accesible
+
+No todo el mundo querrá una experiencia de movimiento al momento de deslizarse. En nuestra solución, esta preferencia se aplica ajustando una variable CSS de `--duration` dentro de una consulta de medios. Este valor de consulta de medios representa la preferencia del sistema operativo del usuario por el movimiento (si está disponible).
+
+```css
+#sidenav-open {
+  --duration: .6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidenav-open {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </source></video>
+  <figcaption>Se aplicó una demostración de la interacción con y sin duración.</figcaption></figure>
+
+Ahora, cuando nuestra sidenav se abre y se cierra, si un usuario prefiere un movimiento reducido, instantáneamente moveré el elemento a la vista, manteniendo el estado sin movimiento.
+
+#### Transición, transformación, traslación
+
+##### Sidenav afuera (predeterminado)
+
+Para establecer el estado predeterminado de nuestro sidenav en el móvil a un estado fuera de la pantalla, yo posiciono el elemento con `transform: translateX(-110vw)`.
+
+Ten en cuenta que agregué otros `10vw` al típico código fuera de la pantalla de `-100vw`, para asegurarme de que la `box-shadow` de la sidenav no se asome a la ventana principal cuando esté oculta.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+  }
+}
+```
+
+##### Sidenav adentro
+
+Cuando el `#sidenav` coincida con `:target`, define la posición de `translateX()` a `0` y observa cómo el CSS desliza el elemento desde su posición de `-110vw` a su posición, "in" (adentro), de `0` durante `var(--duration)` cuando se cambia el hash de la URL.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open:target {
+    visibility: visible;
+    transform: translateX(0);
+    transition:
+      transform var(--duration) var(--easeOutExpo);
+  }
+}
+```
+
+#### Visibilidad de la transición
+
+El objetivo ahora es ocultar el menú a los lectores cuando está por fuera de la pantalla, para que los sistemas no pongan el enfoque en un menú fuera de la pantalla. Esto se logra estableciendo una transición de visibilidad cuando cambia `:target`.
+
+- Al entrar, que la visibilidad no haga una transición; debe de ser visible de inmediato para que pueda ver el elemento deslizarse y aceptar el enfoque.
+- Al salir, cambia la visibilidad, pero la retrasa, por lo que cambia a `hidden` al final de la transición.
+
+### Mejoras de accesibilidad UX {: #ux-improvement }
+
+#### Enlaces
+
+Esta solución se basa en cambiar la URL para que se maneje el estado. Naturalmente, el elemento de `<a>` debería usarse aquí y tiene algunas funciones de accesibilidad interesantes de forma gratuita. Adornemos nuestros elementos interactivos con etiquetas que expresen claramente la intención.
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+  <svg>...</svg>
+</a>
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/keyboard-voiceover.mp4">
+  </source></video>
+  <figcaption>Una demostración de la UX de interacción de voz y teclado.</figcaption></figure>
+
+Ahora, nuestros botones de interacción principales indican claramente su intención tanto para el ratón como para el teclado.
+
+#### `:is(:hover, :focus)`
+
+Este práctico pseudo-selector funcional de CSS nos permite incluir rápidamente nuestros estilos de desplazamiento al compartirlos con el enfoque también.
+
+```css
+.hamburger:is(:hover, :focus) svg > line {
+  stroke: hsl(var(--brandHSL));
+}
+```
+
+#### Sprinkle en JavaScript
+
+##### Presiona `escape` para cerrar
+
+La tecla `Escape` de tu teclado debería cerrar el menú, ¿verdad? Nos encargaremos que eso suceda.
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', event => {
+  if (event.code === 'Escape') document.location.hash = '';
+});
+```
+
+##### Historial del navegador
+
+Para evitar que la interacción de apertura y cierre apile varias entradas en el historial del navegador, agrega el siguiente JavaScript en línea al botón de cierre:
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+```
+
+Esto eliminará la entrada del historial de URL al cerrar, por lo que es como si el menú nunca se hubiera abierto.
+
+##### Enfoque UX
+
+El siguiente fragmento nos ayuda a centrarnos en los botones de apertura y cierre después de que se abren o se cierran. Quiero facilitar ese cambio.
+
+```js
+sidenav.addEventListener('transitionend', e => {
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+      ? document.querySelector('#sidenav-close').focus()
+      : document.querySelector('#sidenav-button').focus();
+})
+```
+
+Cuando se abra la navegación lateral, se enfoca el botón para cerrar. Cuando se cierra la navegación lateral, se enfoca el botón para abrir. Hago esto llamando a `focus()` en el elemento en JavaScript.
+
+### Conclusión
+
+Ahora que sabes cómo lo hice, ¡¿cómo lo harías tú?! ¡Esto es el primer paso de una arquitectura de componentes divertida! ¿Quién va a hacer la primera versión con slots? 🙂
+
+Diversifiquemos nuestros enfoques y aprendamos todas las formas de construir en la web. Crea un [Glitch](https://glitch.com), [twitteame](https://twitter.com/argyleink) tu versión y la agregaré a la sección de [remixes de la comunidad](#community-remixes) que se encuentra a continuación.
+
+## Remixes de la comunidad
+
+- [@_developit](https://twitter.com/_developit) con elementos personalizados: [demostración y código](https://glitch.com/edit/#!/app-drawer)
+- [@ mayeedwin1](https://twitter.com/mayeedwin1) con HTML / CSS / JS: [demostración y código](https://glitch.com/edit/#!/maye-gui-challenge)
+- [@a_nurella](https://twitter.com/a_nurella) con Glitch Remix: [demostración y código](https://glitch.com/edit/#!/sidenav-with-adam)
+- [@EvroMalarkey](https://twitter.com/EvroMalarkey) con HTML / CSS / JS: [demostración y código](https://evromalarkey.github.io/scrollsnap-drawer/index.html)
diff --git a/src/site/content/es/blog/color-scheme/index.md b/src/site/content/es/blog/color-scheme/index.md
new file mode 100644
index 00000000000..56cb5bcf812
--- /dev/null
+++ b/src/site/content/es/blog/color-scheme/index.md
@@ -0,0 +1,181 @@
+---
+title: Se mejoró el estilo predeterminado del modo oscuro con la propiedad CSS de `color-scheme` y la metaetiqueta correspondiente
+subhead: |2-
+
+  La propiedad CSS `color-scheme` y la metaetiqueta correspondiente permite a los desarrolladores optar por incluir sus páginas en los valores predeterminados específicos del tema de la hoja de estilo del agente de usuario.
+authors:
+  - thomassteiner
+date: 2020-04-08
+updated: 2021-10-19
+hero: image/admin/rOe3wxcy28m5DCKcHv7E.jpg
+alt: Palomas en una pared con un marcado contraste con un fondo blanco y negro.
+description: |2-
+
+  La propiedad CSS de color-scheme y la metaetiqueta correspondiente permite a los desarrolladores optar por sus páginas en los valores predeterminados específicos del tema de la hoja de estilo del agente de usuario, por ejemplo, controles de formulario, barras de desplazamiento y colores del sistema CSS.
+
+  Al mismo tiempo, esta función evita que los navegadores apliquen transformaciones por sí mismos.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## Fondo
+
+### La función `prefers-color-scheme` de medios de preferencia del usuario
+
+La función de [`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) de medios de preferencia del usuario ofrece a los desarrolladores un control total sobre la apariencia de sus páginas. Si no estás familiarizado con él, lee mi artículo de [`prefers-color-scheme`: Hola oscuridad, mi viejo amigo](/prefers-color-scheme/), donde documenté todo lo que sé sobre la creación de increíbles experiencias en modo oscuro.
+
+Una pieza del rompecabezas que solo se mencionó brevemente en el artículo es la propiedad CSS de `color-scheme` y la metaetiqueta correspondiente del mismo nombre. Ambos te facilitan la vida como desarrollador al permitirte incluir en tu página los valores predeterminados específicos del tema de la hoja de estilo del agente de usuario, como, por ejemplo, controles de formulario, barras de desplazamiento y colores del sistema CSS. Al mismo tiempo, esta función evita que los navegadores apliquen transformaciones por sí mismos.
+
+### La hoja de estilo del agente de usuario
+
+Antes de continuar, déjame describir brevemente qué es una hoja de estilo de agente de usuario. La mayoría de las veces, puedes pensar en la palabra *agente de usuario* (UA) como una forma elegante de decir *navegador*. La hoja de estilo del UA determina la apariencia predeterminada de una página. Como sugiere el nombre, una hoja de estilo del UA es algo que depende de la UA en cuestión. Puedes echar un vistazo a la hoja de estilo UA de [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) (y Chromium) y compararla con la de [Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) o con la de [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) (y WebKit). Normalmente, las hojas de estilo del UA coinciden en la mayoría de las cosas. Por ejemplo, todos hacen que los enlaces sean azules, el texto general negro y el color de fondo blanco, pero también hay diferencias importantes (y a veces molestas), por ejemplo, cómo diseñan los controles de los formularios.
+
+Da un vistazo más de cerca a [la hoja de estilo del UA de WebKit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) y lo que hace con respecto al modo oscuro. (Realiza una búsqueda de texto completo para "dark" en la hoja de estilo.) El valor predeterminado proporcionado por la hoja de estilo cambia según si el modo oscuro está activado o desactivado. Para ilustrar esto, aquí hay una regla CSS que usa la pseudoclase de [`:matches`](https://css-tricks.com/almanac/selectors/m/matches/) y las variables internas de WebKit como `-apple-system-control-background`, así como la directiva del preprocesador interno de WebKit `#if defined`:
+
+```css
+input,
+input:matches([type="password"], [type="search"]) {
+  -webkit-appearance: textfield;
+  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
+      HAVE_OS_DARK_MODE_SUPPORT
+    color: text;
+    background-color: -apple-system-control-background;
+  #else
+    background-color: white;
+  #endif
+  /* snip */
+}
+```
+
+Notarás algunos valores no estándar para las propiedades de  `color` y de `background-color`. Ni el `text` y ni el `-apple-system-control-background` son colores CSS válidos. Son colores *semánticos* internos de WebKit.
+
+Resulta que CSS ha estandarizado los colores del sistema semántico. Se especifican en [CSS Color Module Level 4 (nivel 4 del módulo de color CSS)](https://drafts.csswg.org/css-color/#css-system-colors). Por ejemplo, el [`Canvas`](https://drafts.csswg.org/css-color/#valdef-system-color-canvas) (que no debe confundirse con la etiqueta de `<canvas>`) es para el fondo del contenido o los documentos de la aplicación, mientras que el [`CanvasText`](https://drafts.csswg.org/css-color/#valdef-system-color-canvastext) es para el texto en el contenido o los documentos de la aplicación. Los dos van juntos y no deben usarse de forma aislada.
+
+Las hojas de estilo del UA pueden utilizar sus propios colores patentados o los del sistema semántico estandarizado, para determinar cómo se deben representar los elementos HTML de forma predeterminada. Si el sistema operativo está configurado en modo oscuro o usa un tema oscuro, `CanvasText` (o `text`) se establecerá condicionalmente en blanco y `Canvas` (o `-apple-system-control-background`) se establecerá en negro. La hoja de estilo del UA asigna el siguiente CSS solo una vez y cubre tanto el modo claro como el oscuro.
+
+```css
+/**
+  No es una actual hoja de estilo de UA.
+  Esto es usado para fines educativos.
+*/
+body {
+  color: CanvasText;
+  background-color: Canvas
+}
+```
+
+## La propiedad CSS del `color-scheme`
+
+La especificación de [CSS Color Adjustment Module Level 1 (nivel 1 del módulo de color CSS)](https://drafts.csswg.org/css-color-adjust/) introduce un modelo y controla el ajuste automático del color por parte del agente de usuario con el objetivo de manejar las preferencias del usuario, como el modo oscuro, el ajuste de contraste o esquemas de color específicos deseados.
+
+La propiedad de [`color-scheme`](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop) definida en el mismo permite que un elemento indique con qué esquemas de color se siente cómodo para ser renderizado. Estos valores se negocian con las preferencias del usuario, lo que da como resultado un esquema de color elegido que afecta aspectos de la interfaz de usuario (IU) como los colores predeterminados de los controles de formulario y las barras de desplazamiento, así como los valores usados de los colores del sistema CSS. Actualmente se admiten los siguientes valores:
+
+- *`normal`* Indica que el elemento no conoce los esquemas de color en lo absoluto, por lo que el elemento debe renderizarse con el esquema de color predeterminado del navegador.
+
+- *`[ light | dark ]+`* Indica que el elemento conoce y puede manejar los esquemas de color enumerados y expresa una preferencia ordenada entre ellos.
+
+{% Aside 'note' %} Proporcionar ambas palabras claves indica que el primer esquema es el preferido (por el autor), pero el segundo también es aceptable si el usuario lo prefiere. {% endAside %}
+
+En esta lista, la `light` representa un esquema de color claro, con colores de fondo claros y colores de primer plano oscuros, mientras que `dark` representa lo contrario, con colores de fondo oscuros y colores claros de primer plano.
+
+Para todos los elementos, la renderización con un esquema de color debe hacer que los colores utilizados en toda la interfaz de usuario proporcionada por el navegador para que el elemento coincida con la intención del esquema de color. Algunos ejemplos son las barras de desplazamiento, los subrayados del corrector ortográfico, los controles de formulario, etc.
+
+{% Aside 'note' %} La propiedad de `color-scheme` del CSS se puede utilizar tanto en el `:root` como en un nivel individual por elemento. {% endAside %}
+
+En un elemento `:root`, la representación con un esquema de color debe afectar adicionalmente el color de la superficie del canvas (es decir, el color de fondo global), el valor inicial de la propiedad de `color` y los valores usados de los colores del sistema, y también debe afectar las barras de desplazamiento de la ventana gráfica.
+
+```css
+/*
+ Esta página tiene compatibilidad con esquemas de colores light (claro) y dark (oscuro) y el autor prefiere dark.
+*/
+:root {
+  color-scheme: dark light;
+}
+```
+
+## La metaetiqueta de `color-scheme`
+
+Utilizar la propiedad `color-scheme` del CSS requiere que el CSS se descargue primero (si se hace referencia a él a través de `<link rel="stylesheet">`) y se analice. Para ayudar a los agentes de usuario a representar el fondo de la página con el esquema de color deseado *inmediatamente*, también se puede proporcionar un valor de `color-scheme` en un elemento [`<meta name="color-scheme">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme).
+
+```html
+<!--
+  Esta página tiene compatibilidad con esquemas de colores light (claro) y dark (oscuro) y el autor prefiere dark.
+-->
+<meta name="color-scheme" content="dark light">
+```
+
+## Combinando `color-scheme` y `prefers-color-scheme`
+
+Dado que tanto la metaetiqueta como la propiedad CSS (si se aplican al `:root`) eventualmente dan como resultado el mismo comportamiento, siempre recomiendo especificar el esquema de color a través de la metaetiqueta, para que el navegador pueda adoptar el esquema preferido más rápido.
+
+Si bien para las páginas de línea de base absolutas no se necesitan reglas CSS adicionales, en el caso general siempre debes de combinar `color-scheme` con `prefers-color-scheme`. Por ejemplo, el color patentado de WebKit CSS `-webkit-link`, utilizado por WebKit y Chrome para el clásico enlace azul `rgb(0,0,238)`, tiene una relación de contraste insuficiente de 2,23:1 sobre un fondo negro y [falla](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000) tanto en la WCAG AA como así como los [requisitos](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels) de la WCAG AAA.
+
+Abrí errores para [Chrome](https://crbug.com/1066811), [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209851) y [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1626560), así como un [problema meta en el estándar HTML](https://github.com/whatwg/html/issues/5426) para solucionarlo.
+
+## Interacción con el `prefers-color-scheme`
+
+La interacción de la propiedad `color-scheme` del CSS y la metaetiqueta correspondiente con la función de medios de preferencia del usuario de `prefers-color-scheme` puede lucir un poco confusa al principio. De hecho, ambos funcionan muy bien entre ellos. Lo más importante que hay que entender es que `color-scheme` determina exclusivamente la apariencia predeterminada, mientras que el `prefers-color-scheme` determina la apariencia que se le puede aplicar un estilo. Para aclarar esto, asume la siguiente página:
+
+```html
+<head>
+  <meta name="color-scheme" content="dark light">
+  <style>
+    fieldset {
+      background-color: gainsboro;
+    }
+    @media (prefers-color-scheme: dark) {
+      fieldset {
+        background-color: darkslategray;
+      }
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Lorem ipsum dolor sit amet, legere ancillae ne vis.
+  </p>
+  <form>
+    <fieldset>
+      <legend>Lorem ipsum</legend>
+      <button type="button">Lorem ipsum</button>
+    </fieldset>
+  </form>
+</body>
+```
+
+El código CSS en línea en la página establece el `background-color` del elemento `<fieldset>` en `gainsboro` en el caso general, y en `darkslategray` si el usuario prefiere un esquema de color `dark` de acuerdo con la función de medios de preferencia del usuario de `prefers-color-scheme`.
+
+A través del elemento `<meta name="color-scheme" content="dark light">`, la página le dice al navegador que admite un tema oscuro y uno claro, con preferencia por un tema oscuro.
+
+Dependiendo de si el sistema operativo está configurado en modo oscuro o claro, toda la página aparece clara sobre oscura, o viceversa, según la hoja de estilo del agente de usuario. No *hay* CSS adicional proporcionado por el desarrollador para cambiar el texto del párrafo o el color de fondo de la página.
+
+Observa cómo el `background-color` de fondo del elemento de `<fieldset>` cambia en función de si el modo oscuro está habilitado, siguiendo las reglas de la hoja de estilo en línea proporcionada por el desarrollador en la página. Puede ser `gainsboro` o `darkslategray`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSgOIiGRqjw2PvRlVCaV.png", alt="Una página en modo claro", width="800", height="322" %}<figcaption> <strong>Modo claro:</strong> Estilos especificados por el desarrollador y el agente de usuario. El texto es negro y el fondo es blanco según la hoja de estilo del agente de usuario. El <code>background-color</code> del elemento <code>&lt;fieldset&gt;</code> es <code>gainsboro</code> según la hoja de estilo en línea del desarrollador.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qqkHz83kerktbDIGCJeG.png", alt="Una página en modo oscuro.", width="800", height="322" %}<figcaption> <strong>Modo oscuro:</strong> Estilos especificados por el desarrollador y el agente de usuario. El texto es blanco y el fondo es negro según la hoja de estilo del agente de usuario. El <code>background-color</code> del elemento <code>&lt;fieldset&gt;</code> es <code>darkslategray</code> según la hoja de estilo en línea del desarrollador.</figcaption></figure>
+
+El elemento de `<button>` está controlado por la hoja de estilo del agente de usuario. Su `color` se establece en el color del sistema [`ButtonText`](https://drafts.csswg.org/css-color/#valdef-system-color-buttontext) y su `background-color` y los cuatro `border-color` se establecen en el color del sistema de [`ButtonFace`](https://drafts.csswg.org/css-color/#valdef-system-color-buttonface).
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lSNFROIe1P94DlhoVtoV.png", alt = "Una página en modo claro que usa la propiedad ButtonFace.", width = "800", height = "322"%}<figcaption> <strong>Modo claro:</strong> El <code>background-color</code> y los distintos <code>border-color</code> se establecen en el color del sistema de <a href="https://drafts.csswg.org/css-color/#valdef-system-color-buttonface">ButtonFace.</a></figcaption></figure>
+
+Ahora observa cómo cambia el `border-color` del elemento `<button>.` El valor *calculado* para `border-top-color` y `border-bottom-color` cambia de `rgba(0, 0, 0, 0.847)` (negro profundo) a `rgba(255, 255, 255, 0.847)` (blanco claro), ya que el agente del usuario actualiza `ButtonFace` dinámicamente según el esquema de color. Lo mismo se aplica para el `color` del elemento `<button>` que se establece en el color del sistema correspondiente de `ButtonText`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IogmyIzUhokJgnnxUkPi.png", alt="Mostrando los valores de color calculados coinciden con ButtonFace.", width="800", height="322" %}<figcaption> <strong>Modo claro:</strong> Los valores calculados de <code>border-top-color</code> y <code>border-bottom-color</code> que se establecen en base a <code>ButtonFace</code> en la hoja de estilo del agente de usuario ahora son <code>rgba(0, 0, 0, 0.847)</code>.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3sU1uZyt3zNhEgw3gpZJ.png", alt="Mostrando que los valores de color calculados aún coinciden con ButtonFace en modo oscuro.", width="800", height="322" %}<figcaption> <strong>Modo oscuro:</strong> Los valores calculados de <code>border-top-color</code> y <code>border-bottom-color</code> que están configurados en base a  <code>ButtonFace</code> en la hoja de estilo del agente de usuario ahora son <code>rgba(255, 255, 255, 0.847)</code>.</figcaption></figure>
+
+## Demostración
+
+Puedes ver los efectos de `color-scheme` aplicado a una gran cantidad de elementos HTML en una [demostración de Glitch](https://color-scheme-demo.glitch.me/). La demostración *muestra deliberadamente* [la violación de](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000) WCAG AA y WCAG AAA con los colores de enlace mencionados en la [advertencia anterior](#using-color-scheme-in-practice).
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqXapQKcNbyE3uwEOELO.png", alt="La demostración en modo claro.", width="800", height="982" %}<figcaption> La <a href="https://color-scheme-demo.glitch.me/">demostración</a> cambió al <code>color-scheme: light</code>.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9G4hFdtSSwPLOm57zedD.png", alt="La demostración en modo oscuro.", width="800", height="982" %}<figcaption> La <a href="https://color-scheme-demo.glitch.me/">demostración</a> cambió al <code>color-scheme: dark</code>. Ten en cuenta la <a href="https://webaim.org/resources/contrastchecker/?fcolor=0000EE&amp;bcolor=000000">violación</a> de WCAG AA y WCAG AAA con los colores de los enlaces.</figcaption></figure>
+
+## Agradecimientos
+
+La propiedad CSS de `color-scheme` y la metaetiqueta correspondiente fueron implementadas por [Rune Lillesveen](https://github.com/lilles). Rune también es coeditor de CSS Color Adjustment Module Level 1 specification (especificación de nivel 1 del módulo de ajuste de color CSS). Imagen de héroe de [Philippe Leone](https://unsplash.com/@philinit?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/photos/dbFfEBOCrkU).
diff --git a/src/site/content/es/blog/commonjs-larger-bundles/index.md b/src/site/content/es/blog/commonjs-larger-bundles/index.md
new file mode 100644
index 00000000000..d57edc347c2
--- /dev/null
+++ b/src/site/content/es/blog/commonjs-larger-bundles/index.md
@@ -0,0 +1,241 @@
+---
+title: Cómo CommonJS está tornando sus paquetes más grandes
+subhead: Descubra cómo los módulos de CommonJS están impactando el "tree-shaking" de su aplicación
+authors:
+  - mgechev
+date: 2020-05-08
+updated: 2020-05-26
+hero: image/admin/S5JWmwRRW3rEXKwJR0JA.jpg
+alt: Cómo CommonJS está tornando sus paquetes más grandes
+description: Los módulos CommonJS son bastante dinámicos, lo que evita que los optimizadores y los paquetes JavaScript realicen optimizaciones avanzadas en ellos.
+tags:
+  - blog
+  - javascript
+  - modules
+---
+
+En esta publicación, veremos qué es CommonJS y por qué hace que sus paquetes de JavaScript sean más grandes de lo necesario.
+
+Resumen: **para garantizar de que el bundler pueda optimizar con éxito su aplicación, evite depender de los módulos CommonJS y utilice la sintaxis de módulos ECMAScript en toda su aplicación.**
+
+## ¿Qué es CommonJS?
+
+CommonJS es un estándar de 2009 que estableció convenciones para módulos JavaScript. Inicialmente, estaba diseñado para usarse fuera del navegador web, principalmente para aplicaciones del lado del servidor.
+
+Con CommonJS puede definir módulos, exportar la funcionalidad de ellos e importarlos en otros módulos. Por ejemplo, el fragmento a continuación define un módulo que exporta cinco funciones: `add`, `subtract`, `multiply`, `divide` y `max`:
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+Posteriormente, otro módulo puede importar y utilizar algunas o todas estas funciones:
+
+```javascript
+// index.js
+const { add } = require('./utils');
+console.log(add(1, 2));
+```
+
+Invocar `index.js` con `node` generará el número `3` en la consola.
+
+Debido a la falta de un sistema de módulos estandarizado en el navegador a principios de la década de 2010, CommonJS también se convirtió en un formato de módulo popular para las bibliotecas del lado del cliente de JavaScript.
+
+## ¿Cómo afecta CommonJS al tamaño final de su paquete?
+
+El tamaño de su aplicación JavaScript del lado del servidor no es tan crítico como en el navegador, por eso CommonJS no fue diseñado para reducir el tamaño del paquete de producción en mente. Al mismo tiempo, el [análisis](https://v8.dev/blog/cost-of-javascript-2019) muestra que el tamaño del paquete de JavaScript sigue siendo la razón número uno para hacer que las aplicaciones del navegador sean más lentas.
+
+Bundlers de JavaScript, como `webpack` y `terser`, realizan diferentes optimizaciones para reducir el tamaño de su aplicación. Al analizar su aplicación en el momento de la compilación, intentan eliminar tanto como sea posible del código fuente que no está utilizando.
+
+Por ejemplo, en el fragmento anterior, su paquete final solo debe incluir la función `add`, ya que este es el único símbolo de `utils.js` que está importando para `index.js`.
+
+Construyamos la aplicación usando la siguiente configuración de `webpack`:
+
+```javascript
+const path = require('path');
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'production',
+};
+```
+
+Aquí especificamos que queremos usar optimizaciones del modo de producción y usar `index.js` como punto de entrada. Después de invocar el `webpack`, si exploramos el tamaño de salida ([output](https://github.com/mgechev/commonjs-example/blob/master/commonjs/dist/out.js)), veremos algo como esto:
+
+```shell
+$ cd dist && ls -lah
+625K Apr 13 13:04 out.js
+```
+
+Tenga en cuenta que **el paquete tiene 625 KB**. Si observamos la salida, encontraremos todas las funciones de `utils.js` más muchos módulos de [`lodash`](https://lodash.com/) **. Aunque no usamos `lodash` en `index.js`, es parte de la salida**, lo que agrega mucho peso adicional a nuestros activos de producción.
+
+Ahora cambiemos el formato del módulo a [módulos ECMAScript](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) e intentemos nuevamente. Esta vez, `utils.js` se vería así:
+
+```javascript
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+export const multiply = (a, b) => a * b;
+export const divide = (a, b) => a / b;
+
+import { maxBy } from 'lodash-es';
+
+export const max = arr => maxBy(arr);
+```
+
+E `index.js` se importaría desde `utils.js` usando la sintaxis del módulo ECMAScript:
+
+```javascript
+import { add } from './utils';
+
+console.log(add(1, 2));
+```
+
+Usando la misma `webpack`, podemos construir nuestra aplicación y abrir el archivo de salida. **Ahora tiene 40 bytes** con la siguiente [salida](https://github.com/mgechev/commonjs-example/blob/master/esm/dist/out.js):
+
+```javascript
+(()=>{"use strict";console.log(1+2)})();
+```
+
+Tenga en cuenta que el paquete final no contiene ninguna de las funciones de `utils.js` que no usamos, ¡y no hay rastro de `lodash`! Aún más, `terser`(el minificador de Javascript que `webpack` utiliza) incluyó la función `add` en `console.log`.
+
+Una pregunta justa que puede surgir es, **¿por qué usar CommonJS hace que el paquete de salida sea casi 16,000 veces más grande**? Por supuesto, este es un ejemplo, en realidad, la diferencia de tamaño puede no ser tan grande, pero lo más probable es que CommonJS agregue un peso significativo a su producto en desarrollo.
+
+**Los módulos CommonJS son más difíciles de optimizar de forma general porque son mucho más dinámicos que los módulos ES. Para garantizar que su bundler y su minificador puedan optimizar con éxito su aplicación, evite depender de los módulos CommonJS y utilice la sintaxis de módulos ECMAScript en toda su aplicación.**
+
+Tenga en cuenta que incluso si está utilizando módulos ECMAScript en `index.js`, si el módulo que está consumiendo es un módulo CommonJS, el tamaño del paquete de su aplicación se verá afectado.
+
+## ¿Por qué CommonJS aumenta el tamaño de su aplicación?
+
+Para responder a esta pregunta, veremos el comportamiento del `ModuleConcatenationPlugin` en `webpack` y, después de eso, analizaremos la capacidad de análisis estática. Este complemento concatena el alcance de todos sus módulos en un solo cierre y permite que su código tenga un tiempo de ejecución más rápido en el navegador. Veamos un ejemplo:
+
+```javascript
+// utils.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+
+```javascript
+// index.js
+import { add } from './utils';
+const subtract = (a, b) => a - b;
+
+console.log(add(1, 2));
+```
+
+Arriba, tenemos un módulo ECMAScript, que importamos a `index.js`. También definimos una función de `subtract`. Podemos construir el proyecto usando la misma configuración `webpack` anterior, pero esta vez, deshabilitaremos la minimización:
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: false
+  },
+  mode: 'production',
+};
+```
+
+Veamos la salida producida:
+
+```javascript
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+
+// CONCATENATED MODULE: ./utils.js**
+const add = (a, b) => a + b;
+const subtract = (a, b) => a - b;
+
+// CONCATENATED MODULE: ./index.js**
+const index_subtract = (a, b) => a - b;**
+console.log(add(1, 2));**
+
+/******/ })();
+```
+
+En el resultado anterior, todas las funciones están dentro del mismo espacio de nombres. Para evitar colisiones, el paquete web cambió el nombre de la función `subtract` en `index.js` a `index_subtract`.
+
+Si un minificador procesa el código fuente anterior, hará lo siguiente:
+
+- Eliminará las funciones no utilizadas `subtract` e `index_subtract`
+- Eliminará todos los comentarios y espacios en blanco redundantes
+- Incorporará el cuerpo de la función `add` en la llamada `console.log`
+
+A menudo, los desarrolladores se refieren a esta **remoción de importaciones no utilizadas como tree-shaking**. Este tree-shaking solo fue posible porque el webpack consiguió entender estáticamente (en el momento de la compilación) los símbolos que estamos importando de `utils.js`, y los símbolos que `utils.js` está exportando.
+
+Este comportamiento está habilitado de forma predeterminada para los **módulos ES** porque **son más fáciles de analizar estáticamente**, en comparación con CommonJS.
+
+Veamos exactamente el mismo ejemplo, pero esta vez cambie `utils.js` para usar CommonJS en lugar de módulos ES:
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+Esta pequeña actualización cambiará significativamente la salida. Dado que es demasiado grande para introducirse en esta página, he compartido solo una pequeña parte:
+
+```javascript
+...
+(() => {
+
+"use strict";
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
+const subtract = (a, b) => a - b;
+console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));
+
+})();
+```
+
+Tenga en cuenta que el paquete final contiene un "tiempo de ejecución" `webpack`: es un código inyectado que es responsable de importar/exportar la funcionalidad de los módulos incluidos. Esta vez, en lugar de colocar todos los símbolos de `utils.js` e `index.js` en el mismo espacio de nombres, solicitamos dinámicamente, durante el tiempo de ejecución, la función `add` `__webpack_require__`.
+
+Esto es necesario porque con CommonJS podemos obtener el nombre de exportación de una expresión arbitraria. Por ejemplo, el siguiente código es una construcción perfectamente válida:
+
+```javascript
+module.exports[localStorage.getItem(Math.random())] = () => { … };
+```
+
+No hay forma de que el bundler sepa en el momento de la compilación cuál es el nombre del símbolo exportado, ya que esto requiere información que solo está disponible durante el tiempo de ejecución, en el contexto del navegador del usuario.
+
+**De esta manera, el minificador es incapaz de comprender exactamente qué es lo que `index.js` utiliza de sus dependencias, por lo que no puede deshacerse de él.** También observaremos exactamente el mismo comportamiento para los módulos de terceros. **Si importamos un módulo CommonJS de `node_modules`, su cadena de herramientas de compilación no podrá optimizarlo correctamente.**
+
+## "Tree-shaking" con CommonJS
+
+Es mucho más difícil analizar los módulos CommonJS ya que son dinámicos por definición. Por ejemplo, la ubicación de importación en los módulos ES es siempre un literal de cadena, en comparación con CommonJS, donde es una expresión.
+
+En algunos casos, si la biblioteca que está utilizando sigue convenciones específicas sobre cómo utiliza CommonJS, es posible eliminar las exportaciones no utilizadas en el momento de la compilación utilizando un [plugin de](https://github.com/indutny/webpack-common-shake) `webpack` de terceros. Aunque este plugin agrega soporte para "tree-shaking", no cubre todas las diferentes formas en que sus dependencias podrían usar CommonJS. Esto significa que no obtiene las mismas garantías que con los módulos ES. Además, agrega un costo adicional como parte de su proceso de compilación además del comportamiento normal del `webpack`.
+
+## Conclusión
+
+**Para garantizar de que el bundler pueda optimizar con éxito su aplicación, evite depender de los módulos CommonJS y utilice la sintaxis de módulos ECMAScript en toda su aplicación.**
+
+A continuación, presentamos algunos consejos prácticos para verificar que se encuentra en el camino idóneo:
+
+- Use el plugin [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) de Rollup.js y configure la bandera `modulesOnly` para especificar que desea depender solo de los módulos ECMAScript.
+- Use el paquete [`is-esm`](https://github.com/mgechev/is-esm) para verificar que un paquete npm utiliza los módulos ECMAScript.
+- Si está utilizando Angular, de forma predeterminada recibirá una advertencia si depende de módulos en los que no puede llevar a cabo procedimientos de "tree-shaking".
diff --git a/src/site/content/es/blog/compat2021/index.md b/src/site/content/es/blog/compat2021/index.md
new file mode 100644
index 00000000000..88e5a8e3352
--- /dev/null
+++ b/src/site/content/es/blog/compat2021/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: 'Compat 2021: Eliminación de los cinco principales puntos débiles de compatibilidad en la web'
+subhead: 'Google está trabajando con otros proveedores de navegadores y socios de la industria para corregir los cinco principales puntos débiles de compatibilidad de los navegadores para los desarrolladores web: CSS flexbox, CSS Grid, `position: sticky`, `aspect-ratio` y las transformaciones CSS.'
+description: 'Obtenga más información sobre cómo Google está trabajando con otros proveedores de navegadores y socios de la industria para corregir los cinco principales puntos débiles de compatibilidad de los navegadores para desarrolladores web: CSS flexbox, CSS Grid, `position: sticky`, `aspect-ratio` y transformaciones CSS.'
+authors:
+  - robertnyman
+  - foolip
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/KQ5oNcLGKdBSuUM8pFPx.jpeg
+alt: Un rompecabezas al que le falta una pieza.
+date: 2021-03-22
+updated: 2021-11-16
+tags:
+  - blog
+  - css
+---
+
+Google está trabajando con otros proveedores de navegadores y socios de la industria para solucionar los cinco principales puntos débiles de compatibilidad de los navegadores para los desarrolladores web. Las áreas de enfoque son CSS flexbox, CSS Grid, `position: sticky`, `aspect-ratio` y transformaciones CSS. Consulte el documento [Cómo puede contribuir y seguir adelante](#contribute) para aprender cómo participar.
+
+## Antecedentes
+
+La compatibilidad en la web siempre ha sido un gran desafío para los desarrolladores. En los últimos años, Google y otros socios, incluidos Mozilla y Microsoft, se propusieron aprender más sobre los principales puntos débiles para los desarrolladores web, para impulsar nuestro trabajo y priorizar para mejorar la situación. Este proyecto está conectado con el trabajo de [Satisfacción del desarrollador de Google](/developer-satisfaction) (DevSAT) y comenzó a mayor escala con la creación de las [Encuestas MDN DNA (Evaluación de las necesidades del desarrollador)](https://insights.developer.mozilla.org/) en 2019 y 2020, además de un esfuerzo de investigación profundo presentado en el [Informe de compatibilidad de los navegadores con MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html). Se han realizado investigaciones adicionales en varios canales, como las encuestas [Estado de CSS](https://stateofcss.com/) y [Estado de JS](https://stateofjs.com/).
+
+El objetivo en 2021 es eliminar los problemas de compatibilidad del navegador en cinco áreas clave de enfoque para que los desarrolladores puedan construir con confianza sobre ellas como bases confiables. Este esfuerzo se llama [**#Compat 2021**](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live).
+
+## Elegir en qué enfocarse
+
+Si bien existen problemas de compatibilidad de los navegadores básicamente en toda la plataforma web, el enfoque de este proyecto se centra en una pequeña cantidad de las áreas más problemáticas que se pueden mejorar significativamente, para que dejen de ser problemas principales para los desarrolladores.
+
+El proyecto de compatibilidad utiliza varios criterios que influyen en cuáles áreas priorizar, algunos de ellos son:
+
+- Uso de funciones. Por ejemplo, flexbox se usa en el [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) de todas las vistas de página y la adopción está creciendo fuertemente en [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout).
+
+- Número de errores (en [Chromium](https://bugs.chromium.org/p/chromium/issues/list) , [Gecko](https://bugzilla.mozilla.org/describecomponents.cgi) , [WebKit](https://bugs.webkit.org/)) y, para Chromium, cuántas estrellas tienen esos errores.
+
+- Resultados de las encuestas:
+
+    - [Encuestas de ADN MDN](https://insights.developer.mozilla.org/)
+    - [Informe de compatibilidad de los navegadores con MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+    - Características más conocidas y utilizadas del [Estado de CSS](https://2020.stateofcss.com/features/)
+
+- Resultados de las [pruebas de plataforma web](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project). Por ejemplo, [flexbox en wpt.fyi](https://wpt.fyi/results/css/css-flexbox).
+
+- ¿[Puedo utilizar](https://caniuse.com/) las funciones más buscadas?
+
+## Las cinco áreas de enfoque principales en 2021
+
+En 2020, Chromium comenzó a trabajar para abordar las áreas principales descritas en [Mejora de la compatibilidad del navegador de Chromium en 2020](https://blog.chromium.org/2020/06/improving-chromiums-browser.html). En 2021, comenzamos un esfuerzo dedicado para ir aún más lejos. Google y [Microsoft están trabajando juntos para abordar los principales problemas en Chromium](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/) junto con [Igalia](https://www.igalia.com/). Igalia, un colaborador habitual de Chromium y WebKit, que además mantiene el puerto oficial de WebKit para dispositivos integrados, ha brindado un gran apoyo y se ha involucrado en estos esfuerzos de compatibilidad, además ayudará a abordar y rastrear los problemas identificados.
+
+Estas son las áreas programadas para su reparación en 2021.
+
+### CSS flexbox
+
+[CSS flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) se [usa ampliamente](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) en la web y todavía existen algunos desafíos importantes para los desarrolladores. Por ejemplo, tanto [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=721123) como [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209983) han tenido problemas con contenedores flex `auto-height` que generan imágenes de tamaño incorrecto.
+
+<div class="switcher">
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qmKoKHkZga5hgBeiHuBz.png", alt="Foto estirada de un tablero de ajedrez.", width="800", height="400" %} <figcaption style="margin-top: auto"> Imagen de tamaño incorrecto debido a errores. </figcaption></figure>
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/0ruhCiZKRP9jBhnN70Xh.png", alt="Tablero de ajedrez", width="800", height="800" %} <figcaption style="margin-top: auto"> Imagen de tamaño correcto.<br> Foto de <a href="https://unsplash.com/photos/ab5OK9mx8do">Alireza Mahmoudi.</a> </figcaption></figure>
+</div>
+
+La publicación de blog [Flexbox Cats de Igalia](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/) profundiza en estos problemas con muchos más ejemplos.
+
+#### Por qué se prioriza
+
+- Encuestas: es un problema principal en el [Informe de compatibilidad de los navegadores con MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html), más conocido y utilizado en el [Estado de CSS](https://2020.stateofcss.com/features/)
+- Pruebas: el [85% pasa](https://wpt.fyi/results/css/css-flexbox) en todos los navegadores
+- Uso: [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) de las visitas a la página, con un crecimiento fuerte en [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)
+
+### CSS Grid
+
+[CSS Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) es un componente básico para los diseños web modernos, que reemplaza muchas técnicas y soluciones anteriores. A medida que crece la adopción, debe ser sólido como una roca, de modo que las diferencias entre los navegadores nunca sean una razón para evitarlo. Un área que falta es la capacidad de animar diseños de cuadrícula, compatible con Gecko pero no con [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=759665) o [WebKit](https://bugs.webkit.org/show_bug.cgi?id=204580). Cuando se admiten, efectos como este son posibles:
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Ovs6wg9o5AJUG4IIoVvj.mp4", height="400", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Demostración animada de ajedrez de <a href="https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/">Chen Hui Jing</a>.</figcaption></figure>
+
+#### Por qué se prioriza
+
+- Encuestas: finalista en [Informe de compatibilidad de los navegadores con MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html), bien conocido pero utilizado con menos frecuencia en [Estado de CSS](https://2020.stateofcss.com/features/)
+- Pruebas: el [75% pasa](https://wpt.fyi/results/css/css-grid) en todos los navegadores
+- Uso: [8% y crecimiento constante](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693), leve crecimiento en [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)
+
+{% Aside %} Si bien una función más nueva como la [subcuadrícula](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid) es importante para los desarrolladores, no forma parte de este esfuerzo específico. Para hacerle seguimiento, consulte [Compatibilidad de la subcuadrícula en MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid#browser_compatibility). {% endAside %}
+
+### CSS position: sticky
+
+[El posicionamiento fijo](https://developer.mozilla.org/docs/Web/CSS/position#sticky_positioning) permite que el contenido se adhiera al borde de la ventana gráfica y se usa comúnmente para encabezados que siempre están visibles en la parte superior de la ventana gráfica. Si bien es compatible con todos los navegadores, existen casos de uso comunes en los que no funciona como se esperaba. Por ejemplo, [los encabezados fijos de tablas](https://bugs.chromium.org/p/chromium/issues/detail?id=702927) no son compatibles con Chromium y, aunque ahora se [admiten detrás de un indicador](https://bugs.chromium.org/p/chromium/issues/detail?id=958381), los resultados son inconsistentes en todos los navegadores:
+
+<div class="switcher">
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/DtNtuWCZUNwi7GGSBPvA.png", alt="", width="250", height="350" %}<figcaption> Chromium con "TablesNG" </figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/hJwLpLeJNfG6kVBUK9Yn.png", alt="", width="250", height="350" %}<figcaption> Geco </figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/od1YyD2BoBqfrnkzynUK.png", alt="", width="250", height="350" %} <figcaption> WebKit </figcaption></figure>
+</div>
+
+Vea a Rob Flack en su <a href="https://output.jsbin.com/xunosud">demostración de encabezados fijos de tablas</a>.
+
+#### Por qué se prioriza
+
+- Encuestas: es muy conocido/utilizado en [Estado de CSS](https://2020.stateofcss.com/features/) y se mencionó varias veces en el [Informe de compatibilidad de los navegadores con MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+- Pruebas: [66% pasa](https://wpt.fyi/results/css/css-position/sticky?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=%28status%3A%21missing%26status%3A%21pass%26status%3A%21ok%29) en todos los navegadores
+- Uso: [8%](https://www.chromestatus.com/metrics/feature/timeline/popularity/3354)
+
+### Propiedad  aspect-ratio de CSS
+
+La nueva propiedad [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) de CSS facilita el mantenimiento de una relación de ancho a alto constante para los elementos, lo que elimina la necesidad del conocido [truco `padding-top`](/aspect-ratio/#the-old-hack-maintaining-aspect-ratio-with-padding-top):
+
+<div class="switcher">{% Compare 'worse', 'Using padding-top' %} ```css .container { width: 100%; padding-top: 56.25%; } ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Using aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+Debido a que es un caso de uso tan común, se espera que se use ampliamente, y queremos asegurar que sea sólido en todos los escenarios comunes y en todos los navegadores.
+
+#### Por qué se prioriza
+
+- Encuestas: ya es bien conocido, pero aún no se utiliza mucho en el [Estado de CSS](https://2020.stateofcss.com/features/)
+- Pruebas: el [27% pasa](https://wpt.fyi/results/css/css-sizing/aspect-ratio) en todos los navegadores
+- Uso: [3%](https://www.chromestatus.com/metrics/css/timeline/popularity/657) y se espera que crezca
+
+### Transformaciones CSS
+
+Las [transformaciones CSS](https://developer.mozilla.org/docs/Web/CSS/transform) han sido compatibles con todos los navegadores durante muchos años y se utilizan ampliamente en la web. Sin embargo, todavía quedan muchas áreas en las que no funcionan igual en todos los navegadores, especialmente con animaciones y transformaciones 3D. Por ejemplo, un efecto de voltear una carta puede ser muy inconsistente en todos los navegadores:
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/RhyPpk7dUooEobKZ3VOC.mp4", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %}<figcaption> Efecto de voltear una carta en Chromium (izquierda), Gecko (centro) y WebKit (derecha). Demostración de David Baron a partir de un <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1008483#c42">comentario de error</a>.</figcaption></figure>
+
+#### Por qué se prioriza
+
+- Encuestas: se conoce bastante y se utiliza en [Estado de CSS](https://2020.stateofcss.com/features/)
+- Pruebas: el [55% pasa](https://wpt.fyi/results/css/css-transforms) en todos los navegadores
+- Uso: [80%](https://www.chromestatus.com/metrics/css/timeline/popularity/446)
+
+## Cómo puede contribuir y hacer seguimiento {: #contribute }
+
+Hágale seguimiento y comparta cualquier actualización que publiquemos en [@ChromiumDev](https://twitter.com/ChromiumDev) o en la [lista pública de correo, Compat 2021](https://groups.google.com/g/compat2021). Verifique que existan errores o [preséntenlos](/how-to-file-a-good-bug/) para problemas que haya experimentado y, si falta algo, comuníquese con los canales mencionados anteriormente.
+
+Habrá actualizaciones periódicas sobre el progreso aquí en web.dev y también puede seguir el progreso de cada área de enfoque en el [Panel de control Compat 2021](https://wpt.fyi/compat2021).
+
+<figure><p data-md-type="paragraph"><a href="https://wpt.fyi/compat2021"> {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/BgX0dnesIhLaFAKyILzk.png", alt="Panel de control Compat 2021", width="800", height="942" %} </a></p>
+<figcaption>El Panel de control Compat 2021 (captura de pantalla tomada el 16 de noviembre de 2021).</figcaption></figure>
+
+Esperamos que este esfuerzo concertado entre los proveedores de navegadores para mejorar la confiabilidad y la interoperabilidad lo ayude a crear cosas increíbles en la web.
diff --git a/src/site/content/es/blog/conversion-measurement/index.md b/src/site/content/es/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..784652ecacc
--- /dev/null
+++ b/src/site/content/es/blog/conversion-measurement/index.md
@@ -0,0 +1,498 @@
+---
+layout: post
+title: Una forma más privada de medir las conversiones de anuncios, la API para evaluar conversiones de eventos
+subhead: Una nueva API web disponible como prueba de origen mide cuando un clic en un anuncio genera una conversión, sin usar identificadores de sitios cruzados.
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %} La API para evaluar conversiones se llamará *API de informes de atribuciones* y ofrecerá más funciones.
+
+- Si está experimentando con la ([API para evaluar conversiones](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md)) en [Chrome 91](https://chromestatus.com/features/schedule) y versiones posteriores, lea esta publicación para encontrar más información, casos de uso e instrucciones sobre cómo utilizar la API.
+- Si está interesado en la próxima versión de esta API (Informes de atribuciones), que estará disponible para experimentar en Chrome (prueba de origen), [únase a la lista de correo](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev) para recibir actualizaciones sobre los experimentos disponibles.
+
+{% endAside %}
+
+Para medir la eficacia de las campañas publicitarias, los anunciantes y los editores deben saber cuándo un clic en un anuncio o una visualización genera una [conversión](/digging-into-the-privacy-sandbox/#conversion), como una compra o un registro. Históricamente, esto se ha hecho con **cookies de terceros**. Ahora, la API para evaluar conversiones de eventos permite la correlación de un evento en el sitio web de un editor con una conversión posterior en el sitio de un anunciante sin involucrar mecanismos que se puedan utilizar para reconocer a un usuario en distintos sitios.
+
+{% Aside %} **Esta propuesta necesita sus comentarios.** Si tiene comentarios, [cree un problema](https://github.com/WICG/conversion-measurement-api/issues/) en el repositorio de la propuesta de la API. {% endAside %}
+
+{% Aside %} Esta API es parte de Privacy Sandbox, una serie de propuestas para satisfacer los casos de uso de terceros sin cookies de terceros u otros mecanismos de seguimiento entre sitios. Consulte [Profundizar en la zona de pruebas de privacidad](/digging-into-the-privacy-sandbox) para obtener una descripción general de todas las propuestas. {% endAside %}
+
+## Glosario
+
+- **Plataformas de tecnología para hacer anuncios**: empresas que proporcionan software y herramientas para permitir que las marcas o agencias orienten, entreguen y analicen su publicidad digital.
+- **Anunciantes**: empresas que pagan por publicidad.
+- **Editores**: empresas que muestran anuncios en sus sitios web.
+- **Conversión a través de un clic**: conversión que se atribuye a un clic en un anuncio.
+- **Conversión a través de una visualización**: conversión que se atribuye a la impresión de un anuncio (si el usuario no interactúa con el anuncio, este después se convierte).
+
+## Quién debe conocer esta API: plataformas de tecnología para hacer anuncios, anunciantes y editores
+
+- **Las plataformas de tecnología para hacer anuncios** como las **[plataformas del lado de la demanda](https://en.wikipedia.org/wiki/Demand-side_platform)** probablemente estén interesadas en utilizar esta API para admitir la funcionalidad que actualmente se basa en cookies de terceros. Si está trabajando en sistemas de evaluación de conversiones: [pruebe la demostración](#demo), [experimente con la API](#experiment-with-the-api), y [comparta sus comentarios](#share-your-feedback).
+- **Los anunciantes y editores que dependen del código personalizado para evaluar la publicidad o las conversiones** también pueden estar interesados en utilizar esta API para sustituir las técnicas existentes.
+- **Los anunciantes y editores que dependen de plataformas de tecnología para hacer anuncios para evaluar la publicidad o las conversiones** no necesitan utilizar la API directamente, pero la [razón de ser de esta API](#why-is-this-needed) puede ser de interés, especialmente si se trabaja con plataformas de tecnología para hacer anuncios que pueden integrar la API.
+
+## Descripción general de la API
+
+### ¿Por qué es necesario esto?
+
+Hoy en día, la evaluación las conversiones de los anuncios con frecuencia se basa en [cookies de terceros](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies). **Pero los navegadores están restringiendo el acceso a las mismas.**
+
+Chrome planea [eliminar la compatibilidad con las cookies de terceros](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html) y [ofrece a los usuarios formas de bloquearlas si así lo desean](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en). Safari [bloquea las cookies de terceros](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/), Firefox [bloquea las cookies de seguimiento conocidas de terceros](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default), y Edge [ofrece prevención de seguimiento](https://support.microsoft.com/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention).
+
+Las cookies de terceros se están convirtiendo en una solución heredada. **Están surgiendo nuevas API con diseños específicos**, como esta, para abordar de manera que preserve la privacidad los casos de uso que resolvían las cookies de terceros.
+
+**¿Cómo se compara la API de evaluación de conversiones de eventos con las cookies de terceros?**
+
+- A diferencia de las cookies, está **diseñada específicamente** para medir conversiones. Esto, a su vez, puede permitir que los navegadores apliquen una mayor protección de la privacidad.
+- Es **más privada**: dificulta el reconocimiento de un usuario a través de dos sitios diferentes de nivel superior, por ejemplo para vincular los perfiles de usuario del lado del editor y del lado del anunciante. Consulte [Cómo esta API preserva la privacidad del usuario](#how-this-api-preserves-user-privacy).
+
+### Una primera iteración
+
+Esta API se encuentra en una **etapa experimental anticipada**. Lo que está disponible como prueba de origen es la **primera iteración** de la API. Las cosas pueden cambiar sustancialmente en [futuras iteraciones](#use-cases).
+
+### Solo clics
+
+Esta iteración de la API solo admite la **evaluación de conversiones a través de un clic**, pero la [evaluación de conversiones a través de una visualización](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md) está en fase de incubación pública.
+
+### Cómo funciona
+
+<figure>{% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="Diagrama: descripción general de los pasos de la API para evaluar conversiones", width="800", height="496" %}</figure>
+
+Esta API se puede utilizar con dos tipos de enlaces (`<a>` elementos) utilizados para publicidad:
+
+- Enlaces en un contexto de **origen**, como anuncios en una red social o una página de resultados de un motor de búsqueda
+- Enlaces en un **frame de terceros**, como en el sitio de un editor que utiliza un proveedor de tecnología para hacer anuncios de terceros.
+
+Con esta API, dichos enlaces salientes se pueden configurar con atributos que son específicos de las conversiones de anuncios:
+
+- Datos personalizados para adjuntar a un clic en un anuncio en el lado del editor, por ejemplo, un ID de clic o un ID de campaña.
+- El sitio web para el que se espera una conversión para este anuncio.
+- El endpoint de informes al que se deben notificar las conversiones exitosas.
+- La fecha y hora límite en la que las conversiones ya no se pueden contabilizar para este anuncio.
+
+Cuando el usuario hace clic en un anuncio, el navegador (en el dispositivo local del usuario) registra este evento, junto con la configuración de conversión y los datos de clic especificados por los atributos para evaluar conversiones en el elemento `<a>`.
+
+Más tarde, el usuario puede visitar el sitio web del anunciante y realizar una acción que el anunciante o su proveedor de tecnología para hacer anuncios clasifica como una **conversión**. Si esto sucede, el clic del anuncio y el evento de conversión coinciden en el navegador del usuario.
+
+Finalmente, el navegador programa un **informe de conversiones** que se enviará al endpoint especificado en los atributos del elemento `<a>`. Este informe incluye datos sobre el clic del anuncio que generó esta conversión, así como datos sobre la conversión.
+
+Si se registran varias conversiones para un clic en un anuncio determinado, se programará el envío de tantos informes correspondientes (hasta un máximo de tres por clic en el anuncio).
+
+Los informes se envían después de una demora: días o, a veces, semanas después de la conversión (consulte el motivo en el [calendario de informes](#report-timing) ).
+
+## Compatibilidad con navegadores y API similares
+
+### Soporte del navegador
+
+La API para evaluar conversiones de eventos puede ser compatible:
+
+- Como una [prueba de origen](/origin-trials/). Las pruebas de origen habilitan la API para **todos los visitantes** de un determinado [origen](/same-site-same-origin/#origin). **Debe registrar su origen en la prueba de origen para poder probar la API con los usuarios finales**. Consulte [Uso de la API para evaluar conversiones](/using-conversion-measurement) para obtener más información sobre la prueba de origen.
+- Activando marcas, en Chrome 86 y versiones posteriores. Las marcas habilitan la API en el navegador de **un solo usuario.** **Las marcas son <br>útiles cuando se desarrollan localmente**.
+
+Consulte los detalles sobre el estado actual en la [entrada de funciones de Chrome](https://chromestatus.com/features/6412002824028160).
+
+### Estandarización
+
+Esta API se está diseñando en código abierto, en el Grupo comunitario de incubadoras de plataformas web  ([Web Platform Incubator Community Group, WICG](https://www.w3.org/community/wicg/)). Está disponible para experimentar en Chrome.
+
+### API similares
+
+WebKit, el motor del navegador web utilizado por Safari, tiene una propuesta con objetivos similares, la [Evaluación de clics privados](https://github.com/privacycg/private-click-measurement). Se está trabajando en el Grupo de la Comunidad Privada ([PrivacyCG](https://www.w3.org/community/privacycg/)).
+
+## Cómo esta API preserva la privacidad del usuario
+
+Con esta API, se pueden evaluar las conversiones protegiendo la privacidad de los usuarios: no se puede reconocer a los usuarios en los distintos sitios. Esto es posible gracias a los **límites de datos**, el **ruido de los datos de conversión**, y los mecanismos de **sincronización de los informes**.
+
+Veamos con más detalle cómo funcionan estos mecanismos y qué significan en la práctica.
+
+### Límites de datos
+
+A continuación, los **datos de tiempo de clic o tiempo de visualización** son los datos de los que dispone `adtech.example` por ejemplo cuando el usuario recibe el anuncio y hace clic en él o lo visualiza. Los datos de cuando se produce una conversión son **datos de tiempo de conversión**.
+
+Veamos un **editor** `news.example` y un **anunciante** `shoes.example`. Los scripts de terceros de la **plataforma de tecnología para hacer anuncios** `adtech.example` están presentes en el sitio del editor `news.example` para incluir anuncios del anunciante `shoes.example`. `shoes.example` incluye también scripts de `adtech.example` para detectar conversiones.
+
+¿Cuánto puede conocer `adtech.example` sobre los usuarios de la web?
+
+#### Con cookies de terceros
+
+<figure>{% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="Diagrama: cómo las cookies de terceros permiten el reconocimiento de usuarios entre sitios", width="800", height="860" %}</figure>
+
+`adtech.example` basa en una **cookie de terceros que se utiliza como un identificador único entre sitios** para **reconocer a un usuario entre sitios**. Además, `adtech.example` puede acceder a **ambos** datos detallados de clics o visualizaciones y datos detallados de conversiones, y vincularlos.
+
+Como resultado, `adtech.example` puede rastrear el comportamiento de un solo usuario en todos los sitios, entre la visualización de un anuncio, los clics y las conversiones.
+
+Dado que `adtech.example` probablemente esté presente en una gran cantidad de sitios de editores y anunciantes, y no solo en `news.example` y `shoes.example`, se puede rastrear el comportamiento del usuario en la web.
+
+#### Con la API para evaluar conversiones de eventos
+
+<figure>{% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="Diagrama: cómo la API permite evaluar conversiones sin reconocimiento de usuarios entre sitios", width="800", height="643" %} <figcaption>"ID de anuncios" en el diagrama de cookies y "ID de clics" son identificadores que permiten la asignación de datos detallados. En este diagrama, se denomina "ID de clics" porque solo es compatible con la evaluación de conversiones a través de clics.</figcaption></figure>
+
+`adtech.example` no puede utilizar un identificador entre sitios y, por tanto, **no puede reconocer a un usuario entre sitios**.
+
+- Se puede adjuntar un identificador de 64 bits a un clic en un anuncio.
+- Solo se pueden adjuntar 3 bits de datos de conversión al evento de conversión. En 3 bits pueden ajustarse a un valor entero entre 0 y 7. No son muchos datos, pero son suficientes para que los anunciantes puedan aprender a tomar buenas decisiones sobre dónde gastar su presupuesto publicitario en el futuro (por ejemplo, modelos de datos de capacitación).
+
+{% Aside %} Los datos de clics y los datos de conversión nunca se exponen a un entorno de JavaScript en el mismo contexto. {% endAside %}
+
+#### Sin alternativa a las cookies de terceros
+
+Sin una alternativa para las cookies de terceros, como la API para evaluar conversiones de eventos, las conversiones no se pueden atribuir: si `adtech.example` está presente tanto en el sitio del editor como en el del anunciante, puede acceder a los datos de tiempo de clic o de tiempo de conversión, pero no puede vincularlos del todo.
+
+En este caso, se conserva la privacidad del usuario, pero los anunciantes no pueden optimizar su inversión publicitaria. Es por eso que se necesita una alternativa como la API para evaluar conversión por eventos.
+
+### Ruido en los datos de conversión
+
+Los 3 bits recopilados en el momento de la conversión se **emiten con ruido**.
+
+Por ejemplo, en la implementación de Chrome, el ruido de datos funciona de la siguiente manera: el 5% de las veces, la API informa un valor aleatorio de 3 bits en vez de los datos de conversión reales.
+
+Esto protege a los usuarios de los ataques a la privacidad. Un actor que intente hacer un mal uso de los datos de varias conversiones para crear un identificador no tendrá plena confianza en los datos que recibe, lo que complica este tipo de ataques.
+
+Tenga en cuenta que es posible [recuperar el verdadero recuento de conversiones](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count).
+
+Resumen de datos de clics y datos de conversión:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Datos</th>
+        <th>Tamaño</th>
+        <th>Ejemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Datos de clics (atributo de <code>impressiondata</code>
+</td>
+        <td>64 bits</td>
+        <td>Un ID de anuncios o un ID de clics</td>
+      </tr>
+      <tr>
+        <td>Datos de conversión</td>
+        <td>3 bits, ruido</td>
+        <td>Un número entero entre 0 y 7 que se puede asignar a un tipo de conversión: registro, proceso de revisión completo, etc.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Sincronizador de informes
+
+Si se registran varias conversiones para un clic en un anuncio determinado, **se envía un informe correspondiente para cada conversión, hasta un máximo de tres por clic**.
+
+Para evitar que el tiempo de conversión se utilice para obtener más información del lado de la conversión y, por tanto, obstaculizar la privacidad de los usuarios, esta API especifica que los informes de conversión no se envían inmediatamente después de que se produzca una conversión. Después del clic inicial en el anuncio, comienza un calendario de **ventanas de informes** asociadas a este clic. Cada ventana de informes tiene una fecha límite, y las conversiones registradas antes de esa fecha límite se enviarán al final de esa ventana.
+
+Es posible que los informes no se envíen exactamente en estas fechas y horas programadas: si el navegador no se está ejecutando cuando programó el envío de un informe, este se envía al iniciar el navegador, lo que podría suceder días o semanas después de la hora programada.
+
+Después del vencimiento (tiempo de clic + `impressionexpiry`), no se contabiliza ninguna conversión. `impressionexpiry` es la fecha y hora límite en la que ya no se pueden contabilizar las conversiones para este anuncio.
+
+En Chrome, la programación de informes funciona de la siguiente manera:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>Dependiendo del tiempo de conversión, se envía un informe de conversión (si el navegador está abierto)…</th>
+        <th>Número de ventanas de informes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30 días, el valor predeterminado y máximo</td>
+        <td>
+          <ul>
+            <li>2 días después de que se hizo clic en el anuncio</li>
+            <li>o 7 días después de hacer clic en el anuncio</li>
+            <li>o <code>impressionexpiry</code> = 30 días después de hacer clic en el anuncio.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> es de entre 7 y 30 días.</td>
+        <td>
+          <ul>
+            <li>2 días después de hacer clic en el anuncio</li>
+            <li>o 7 días después de hacer clic en el anuncio</li>
+            <li>o <code>impressionexpiry</code> después de hacer clic en el anuncio.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> es de entre 2 y 7 días.</td>
+        <td>
+          <ul>
+            <li>2 días después de hacer clic en el anuncio</li>
+            <li>o <code>impressionexpiry</code> después de hacer clic en el anuncio.</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> es inferior a 2 días.</td>
+        <td>
+          <li>2 días después de hacer clic en el anuncio</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>{% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="Cronología de los informes que se enviaron", width="800", height="462" %}</figure>
+
+Consulte [Envío de informes programados](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports) para obtener más detalles sobre la sincronización.
+
+## Ejemplo
+
+{% Aside %} Para ver esto en acción, pruebe la [demostración](https://goo.gle/demo-event-level-conversion-measurement-api) ⚡️ y vea el [código](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement) correspondiente. {% endAside %}
+
+Así es como la API registra e informa de una conversión. Tenga en cuenta que así es como funcionaría un flujo de conversión a través de un clic con la API actual. Las futuras iteraciones de esta API [pueden ser diferentes](#use-cases).
+
+### Clic en el anuncio (pasos 1 al 5)
+
+<figure>{% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="Diagrama: clics en anuncios y almacenamiento de clics", width="800", height="694" %}</figure>
+
+Un elemento publicitario `<a>` se carga en el sitio de un editor mediante `adtech.example` dentro de un iframe.
+
+Los desarrolladores de la plataforma de tecnología para hacer anuncios configuraron el elemento `<a>` con atributos de evaluación de la conversiones:
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+Este código especifica lo siguiente:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Atributo</th>
+        <th>Valor predeterminado, máximo, mínimo</th>
+        <th>Ejemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code> (obligatorio): un identificador de <b>64 bits</b> para adjuntar a un clic en un anuncio.</td>
+        <td>(ningún valor predeterminado)</td>
+        <td>Un ID de clic generado de forma dinámica, como un número entero de 64 bits: <code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code> (obligatorio): el <b><a href="/same-site-same-origin/#site" noopener="">eTLD + 1</a></b> donde se espera una conversión para este anuncio.</td>
+        <td>(ningún valor predeterminado)</td>
+        <td>
+<code>https://advertiser.example</code>.<br> Si el <code>conversiondestination</code> es <code>https://advertiser.example</code> , se atribuirán las conversiones tanto en <code>https://advertiser.example</code> como en <code>https://shop.advertiser.example</code>. <br> Lo mismo ocurre si el <code>conversiondestination</code> es <code>https://shop.advertiser.example</code> conversiones tanto en <code>https://advertiser.example</code> como en <code>https://shop.advertiser.example</code>.</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> (opcional): en milisegundos, la hora límite para que las conversiones se pueden atribuir a este anuncio.</td>
+        <td>
+<code>2592000000</code> = 30 días (en milisegundos).<br><br> Máximo: 30 días (en milisegundos).<br><br> Mínimo: 2 días (en milisegundos).</td>
+        <td>Diez días después del clic: <code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code> (opcional): el destino para informar conversiones confirmadas.</td>
+        <td>Origen de nivel superior de la página donde se agrega el elemento de enlace.</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code> : el destino previsto del clic del anuncio.</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Algunas notas sobre el ejemplo:
+
+- Encontrará el término "impresión" utilizado en los atributos de la API o en la propuesta de API, aunque por ahora solo se admiten clics. Los nombres pueden actualizarse en futuras iteraciones de la API.
+- El anuncio no tiene que estar en un iframe, pero es en lo que se basa este ejemplo.
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- Los flujos basados en la navegación a través de `window.open` o `window.location` no serán elegibles para la atribución.
+
+{% endAside %}
+
+Cuando el usuario pulsa o hace clic en el anuncio, navega al sitio del anunciante. Una vez que se realiza la navegación, el navegador almacena un objeto que incluye `impressiondata`, `conversiondestination`, `reportingorigin`, y `impressionexpiry`:
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### Conversión y programación de informes (pasos 6 al 9)
+
+<figure>{% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="Diagrama: conversión y programación de informes", width="800", height="639" %}</figure>
+
+Ya sea directamente después de hacer clic en el anuncio o más tarde (por ejemplo, al día siguiente), el usuario visita `advertiser.example` Por ejemplo, busca zapatos deportivos, encuentra un par que desea comprar y procede a pagar. `advertiser.example` incluyó un pixel en la página para realizar pagos:
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example` recibe esta solicitud y decide que califica como una conversión. Ahora deben solicitar al navegador que registre una conversión. `adtech.example` comprime todos los datos de conversión en 3 bits, un número entero entre 0 y 7, por ejemplo, podrían asignar una acción de **pago** a un valor de conversión de 2.
+
+`adtech.example` luego envía un redireccionamiento de conversión de registro específico al navegador:
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %} `.well-known` Las URL son direcciones especiales. Facilitan que las herramientas de software y los servidores descubran información o recursos comúnmente necesarios para un sitio, por ejemplo, en qué página un usuario puede [cambiar su contraseña](/change-password-url/). Aquí, `.well-known` solo se utiliza para que el navegador reconozca que se trata de una solicitud de conversión especial. En realidad, esta solicitud se cancela internamente por el navegador. {% endAside %}
+
+El navegador recibe esta solicitud. Al detectar `.well-known/register-conversion`, el navegador:
+
+- Busca todos los clics en anuncios almacenados que coinciden con este `conversiondestination` (porque recibe esta conversión en una URL que se registró como `conversiondestination` cuando el usuario hizo clic en el anuncio). Encuentre el clic en el anuncio que se produjo en el sitio del editor un día antes.
+- Registre una conversión para este clic en el anuncio.
+
+Varios clics en anuncios pueden coincidir con una conversión, es posible que el usuario haya hecho clic en un anuncio de `shoes.example` tanto en `news.example` como en `weather.example`. En este caso, se registran varias conversiones.
+
+Ahora, el navegador sabe que debe informar al servidor de tecnología para hacer anuncios de esta conversión, más específicamente, el navegador debe informar al `reportingorigin` que se especifica tanto en el elemento `<a>` como en la solicitud de pixeles (`adtech.example`).
+
+Para ello, el navegador programa el envío de un **informe de conversión**, un bloque de datos que contiene los datos de los clics (del sitio del editor) y los datos de las conversiones (del anunciante). En este ejemplo, el usuario realizó la conversión un día después de hacer clic. Por lo tanto, el informe está programado para ser enviado al día siguiente, en la marca de dos días después del clic si el navegador se está ejecutando.
+
+### Envío del informe (pasos 10 y 11)
+
+<figure>{% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="Diagrama: navegador enviando el informe", width="800", height="533" %}</figure>
+
+Una vez que se alcanza la hora programada para enviar el informe, el navegador envía el **informe de conversión** : envía un HTTP POST al origen del informe que se especificó en el elemento `<a>` `adtech.example` ). Por ejemplo:
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+Se incluyen como parámetros:
+
+- Los datos asociados con el clic del anuncio original (`impression-data`).
+- Los datos asociados con una conversión, [potencialmente ruidosos](#noising-of-conversion-data).
+- El crédito de conversión atribuido al clic. Esta API sigue un modelo de <strog>atribución al último clic: el clic en el anuncio que coincide de forma más reciente recibe un crédito de 100, a todos los demás clics en anuncios que coincidan recibirán un crédito de 0.</strog>
+
+A medida que el servidor de tecnología para hacer anuncios recibe esta solicitud, puede extraer los `impression-data` y `conversion-data`, es decir, el informe de conversión:
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### Conversiones posteriores y vencimiento
+
+Más adelante, el usuario puede volver a realizar la conversión, por ejemplo, comprando una raqueta de tenis en el `advertiser.example` para acompañar a su calzado. Se produce un flujo similar:
+
+- El servidor de tecnología para hacer anuncios envía una solicitud de conversión al navegador.
+- El navegador relaciona esta conversión con el clic del anuncio, programa un informe y posteriormente lo envía al servidor de tecnología para hacer anuncios.
+
+Después de `impressionexpiry`, las conversiones de este clic en el anuncio dejan de contarse y el clic en el anuncio se elimina del almacenamiento del navegador.
+
+## Casos de uso
+
+### Lo que se admite actualmente
+
+- Medir las conversiones de los clics: determinar qué clics del anuncio conducen a conversiones y acceder a información aproximada sobre la conversión.
+- Reunir datos para optimizar la selección de anuncios, por ejemplo, entrenando modelos de aprendizaje automático.
+
+### Qué no se admite en esta iteración
+
+Las siguientes funciones no son compatibles, pero pueden estar en futuras iteraciones de esta API o en informes [agrupados:](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md)
+
+- Evaluación de conversiones a través de una visualización
+- [Múltiples endpoints de informes](https://github.com/WICG/conversion-measurement-api/issues/29).
+- [Conversiones web que comenzaron en una aplicación iOS/Android](https://github.com/WICG/conversion-measurement-api/issues/54).
+- Evaluación/incremento de la conversión: evaluación de las diferencias causales en el comportamiento de conversión, al evaluar la diferencia entre un grupo de prueba que vio un anuncio y un grupo de control que no lo vio.
+- Modelos de atribución que no son de último clic.
+- Casos de uso que requieren una mayor cantidad de información sobre el evento de conversión. Por ejemplo, precios de compra detallados o categorías de productos.
+
+Antes de que estas características y otras se puedan admitir, **más protecciones de privacidad** (ruido, menos bits u otras limitaciones) deben añadirse a la API.
+
+La discusión de las posibles características adicionales se lleva a cabo en código abierto, en el [repositorio de **problemas** de propuestas de la API](https://github.com/WICG/conversion-measurement-api/issues).
+
+{% Aside %} ¿Falta su caso de uso? ¿Tiene comentarios sobre la API? [Compártalo](#share-your-feedback). {% endAside %}
+
+### ¿Qué más puede cambiar en futuras iteraciones?
+
+- Esta API se encuentra en una etapa experimental inicial. En futuras iteraciones, esta API podrá sufrir cambios sustanciales que incluyen, incluyendo los que se enumeran a continuación. Su objetivo es medir las conversiones mientras se preserva la privacidad del usuario, y se realizará cualquier cambio que ayude a abordar mejor este caso de uso.
+- La API y la denominación de los atributos pueden evolucionar.
+- Posiblemente los datos de los clics y de la conversión no requieran codificación.
+- El límite de 3 bits para los datos de conversión se puede aumentar o disminuir.
+- [Se pueden agregar más funciones](#what-is-not-supported-in-this-iteration) y **más protecciones de privacidad** (ruido/menos bits/otras limitaciones) si es necesario para admitir estas nuevas funciones.
+
+Para seguir y participar en las discusiones sobre las nuevas funciones, vea el [repositorio de GitHub](https://github.com/WICG/conversion-measurement-api/issues) de la propuesta y envíe ideas.
+
+## Pruébelo
+
+### Demostración
+
+Pruebe la [demostración](https://goo.gle/demo-event-level-conversion-measurement-api). Asegúrese de seguir las instrucciones "Antes de comenzar".
+
+Envíe un tweet a [@maudnals](https://twitter.com/maudnals?lang=en) o a [@ChromiumDev](https://twitter.com/ChromiumDev) para realizar cualquier pregunta sobre la demostración.
+
+### Experimente con la API
+
+Si planea experimentar con la API (localmente o con usuarios finales), consulte [Uso de la API para evaluar conversiones](/using-conversion-measurement).
+
+### Comparta sus comentarios
+
+**Sus comentarios son cruciales** para que las nuevas API para evaluar conversiones puedan ser compatibles con sus casos de uso y brindar una buena experiencia a los desarrolladores.
+
+- Para informar un error en la implementación de Chrome, [abra un error](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A).
+- Para compartir comentarios y discutir casos de uso en la API de Chrome, cree un nuevo problema o participe en los existentes en el [repositorio de propuestas de la API](https://github.com/WICG/conversion-measurement-api/issues). Del mismo modo, puede analizar la API de WebKit/Safari y sus casos de uso en el [repositorio de propuestas de la API](https://github.com/privacycg/private-click-measurement/issues).
+- Para discutir casos de uso de publicidad e intercambiar puntos de vista con expertos de la industria: únase al [Grupo empresarial para mejorar publicidad web](https://www.w3.org/community/web-adv/). Únase al [Grupo de la comunidad privada](https://www.w3.org/community/privacycg/) para discutir sobre la API de WebKit/Safari.
+
+### Manténgase atento
+
+- A medida que se recopilan los comentarios de los desarrolladores y los casos de uso, la API para evaluar conversiones de eventos evolucionará con el tiempo. Vea la propuesta del [repositorio de GitHub de](https://github.com/WICG/conversion-measurement-api/).
+- Siga la evolución de la [API para evaluar conversiones agrupadas](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md) que complementará esta API.
+
+*Muchas gracias por las contribuciones y comentarios a todos los revisores, especialmente a Charlie Harrison, John Delaney, Michael Kleber y Kayce Basques.*
+
+*Imagen hero de William Warby/@wawarby editada en [Unsplash](https://unsplash.com/photos/WahfNoqbYnM).*
diff --git a/src/site/content/es/blog/css-is-and-where/index.md b/src/site/content/es/blog/css-is-and-where/index.md
new file mode 100644
index 00000000000..8275ee21f6e
--- /dev/null
+++ b/src/site/content/es/blog/css-is-and-where/index.md
@@ -0,0 +1,129 @@
+---
+title: 'Nuevos selectores funcionales de pseudoclases CSS `: is ()` y `: where ()`'
+subhead: Estas aparentemente pequeñas adiciones a la sintaxis del selector de CSS tendrán un gran impacto.
+authors:
+  - adamargyle
+description: Estas aparentemente pequeñas adiciones a la sintaxis del selector de CSS tendrán un gran impacto.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/bFO3SPdt1bPIB8EylsB7.jpg
+alt: Una biblioteca blanca y brillante, filas y filas de libros, con una sola persona en el medio que busca un solo libro.
+tags:
+  - blog
+  - css
+date: 2021-05-27
+updated: 2021-05-27
+---
+
+Al escribir CSS, a veces puede terminar con largas listas de selección para apuntar a varios elementos con las mismas reglas de estilo. Por ejemplo, si desea ajustar el color de las etiquetas `<b>` encontradas dentro de un elemento de encabezado, puede escribir:
+
+```css
+h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
+  color: hotpink;
+}
+```
+
+En su lugar, puede usar `:is()` y mejorar la legibilidad para evitar un selector largo:
+
+```css
+:is(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+```
+
+La legibilidad y las conveniencias de selector más cortas son solo una parte del valor que `:is()` y `:where()` aportan a CSS. En esta publicación, descubrirá la sintaxis y el valor de estos dos pseudoselectores funcionales.
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/mkyjox1HJNL0AgtX25bi.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> Una visualización infinita del antes y el después de usar <code>:is()</code></figcaption></figure>
+
+### Compatibilidad del navegador
+
+Las pseudoclases `:is` y `:where` son compatibles con Chromium (&gt;=88), Firefox (&gt;=78) y Safari (&gt;=14). Consulte la [tabla de compatibilidad de los navegadores](https://developer.mozilla.org/docs/Web/CSS/:where#Browser_compatibility) con MDN para obtener más información. Algunas versiones anteriores del navegador admiten el selector `:is()` como `:matches()` o `-webkit-any()`. Para obtener más información, consulte la página <a href="https://developer.mozilla.org/docs/Web/CSS/:is" data-md-type="link">`:is()`</a> en MDN.
+
+## Reunir `:is()` y `:where()`
+
+Estos son selectores funcionales de pseudoclases, observe los caracteres `()` al final y la forma en que comienzan con `:`. Piense en ellos como invocaciones a funciones dinámicas en tiempo de ejecución que hacen coincidir elementos. Al escribir CSS, le brindan una forma de agrupar elementos en el medio, al principio o al final de un selector. También pueden cambiar la especificidad, dándole el poder de anular o aumentar la especificidad.
+
+### Agrupación de selectores
+
+Cualquier cosa que `:is()` pueda hacer con respecto a la agrupación, también puede hacerlo `:where()`. Esto incluye utilizarlos en cualquier parte del selector, anidarlos y apilarlos. Es la flexibilidad completa del CSS que conoce y ama. Estos son algunos ejemplos:
+
+```css
+/* al comienzo */
+:where(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+
+/* en la mitad */
+article :is(header,footer) > p {
+  color: gray;
+}
+
+/* al final */
+.dark-theme :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* múltiple */
+:is(.dark-theme, .dim-theme) :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* apilados */
+:is(h1,h2):where(.hero,.subtitle) {
+  text-transform: uppercase;
+}
+
+/* anidados */
+.hero:is(h1,h2,:is(.header,.boldest)) {
+  font-weight: 900;
+}
+```
+
+Cada uno de los ejemplos anteriores de selectores demuestra la flexibilidad de estas dos pseudoclases funcionales. Para encontrar áreas de su código que podrían beneficiarse de `:is()` o de `:where()`, busque selectores con múltiples comas y con repetición de selectores.
+
+### Uso de selectores simples y complejos con `:is()`
+
+Para un repaso de los selectores, consulte el [módulo de selectores en Learn CSS](/learn/css/selectors/#complex-selectors). Estos son algunos ejemplos de selectores simples y complejos como ayuda para ilustrar la capacidad:
+
+```css
+article > :is(p,blockquote) {
+  color: black;
+}
+
+:is(.dark-theme.hero > h1) {
+  font-weight: bold;
+}
+
+article:is(.dark-theme:not(main .hero)) {
+  font-size: 2rem;
+}
+```
+
+{% Aside 'gotchas' %} Normalmente, cuando se usa un caracter `,` para crear una lista de selectores, si alguno de los selectores no es válido, todos los selectores se invalidan y la lista no coincidirá con los elementos. Es decir, no perdonan los errores. Aunque, `:is()` y `:where()` [son indulgentes](https://developer.mozilla.org/docs/Web/CSS/:is#forgiving_selector_parsing) y pueden [sacarlo de un apuro](https://css-tricks.com/almanac/selectors/i/is/#forgiving-selector-lists). {% endAside %}
+
+Hasta ahora `:is()` y `:where()` son sintácticamente intercambiables. Es hora de ver en qué se diferencian.
+
+### La diferencia entre `:is()` y `:where()`
+
+Cuando se trata de especificidad `:is()` y `:where()` divergen fuertemente. Para un repaso sobre la especificidad, consulte el [módulo sobre la especificidad en Learn CSS](/learn/css/specificity/).
+
+En breve
+
+- `:where()` no tiene especificidad.<br> `:where()` aplasta toda la especificidad en la lista del selector pasada como parámetros funcionales. Esta es la primera función de selección de este tipo.
+- `:is()` toma la especificidad de su selector más específico.<br> `:is(a,div,#id)` tiene una puntuación de especificidad de una ID, 100 puntos.
+
+Tomar el selector de mayor especificidad de la lista solo fue un problema para mí cuando me estaba entusiasmando demasiado con la agrupación. Siempre pude mejorar la legibilidad si movía el selector de alta especificidad a su propio selector donde no tendría tanto impacto. He aquí un ejemplo de lo que quiero decir:
+
+```css
+article > :is(header, #nav) {
+  background: white;
+}
+
+/* mejor con */
+article > header,
+article > #nav {
+  background: white;
+}
+```
+
+Con `:where()`, estoy esperando a que las bibliotecas ofrezcan versiones sin especificidad. La competencia de especificidad entre los estilos de autor y los estilos de biblioteca podría llegar a su fin. No habría ninguna especificidad con la que competir al escribir CSS. CSS ha estado trabajando en una función de agrupación como esta durante bastante tiempo, ya está aquí y todavía es un territorio en gran parte inexplorado. Diviértase mientras hace hojas de estilo más pequeñas y quitando comas.
+
+*Foto de [Markus Winkler](https://unsplash.com/@markuswinkler) en [Unsplash](https://unsplash.com/photos/afW1hht0NSs)*
diff --git a/src/site/content/es/blog/css-masking/index.md b/src/site/content/es/blog/css-masking/index.md
new file mode 100644
index 00000000000..d35752966ec
--- /dev/null
+++ b/src/site/content/es/blog/css-masking/index.md
@@ -0,0 +1,127 @@
+---
+title: Cómo aplicar efectos a las imágenes con la propiedad mask-image de CSS
+subhead: El enmascaramiento de CSS le da la opción de utilizar una imagen como una capa de la máscara. Esto significa que puedes utilizar una imagen, un SVG o un gradiente como máscara, para crear efectos interesantes sin la necesidad de un editor de imágenes.
+description: El enmascaramiento de CSS le da la opción de utilizar una imagen como una capa de la máscara. Esto significa que puedes utilizar una imagen, un SVG o un gradiente como máscara, para crear efectos interesantes sin la necesidad de un editor de imágenes.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: Un oso de peluche que lleva una máscara.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+Cuando [recorta un elemento](/css-clipping) utilizando la propiedad `clip-path`, el área recortada se vuelve invisible. Si, en cambio, desea hacer opaca una parte de la imagen o aplicarle algún otro efecto, debe utilizar una máscara. En este artículo se explica cómo utilizar la propiedad [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) en CSS, que permite especificar una imagen para utilizarla como una capa de máscara. Esto le da tres opciones. Puede utilizar un archivo de imagen como su máscara, un SVG, o un gradiente.
+
+## Compatibilidad con navegadores
+
+La mayoría de los navegadores solo admiten parcialmente la propiedad estándar de enmascaramiento de CSS. Deberá utilizar el prefijo `-webkit-` además de la propiedad estándar para obtener la mejor compatibilidad con los navegadores. Consulte: [¿Puedo utilizar máscaras de CSS?](https://caniuse.com/#feat=css-masks) para obtener información acerca de toda la compatibilidad con los navegadores.
+
+Aunque la compatibilidad con los navegadores mediante la propiedad con el prefijo es buena, cuando se utiliza el enmascaramiento para hacer visible el texto sobre una imagen debe tener en cuenta lo que ocurrirá si el enmascaramiento no está disponible. Puede valer la pena utilizar consultas de características para detectar el soporte para `mask-image` o `-webkit-mask-image` y proporcionar una alternativa legible antes de incorporar su versión enmascarada.
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* code that requires mask-image here. */
+}
+```
+
+## Enmascaramiento con una imagen
+
+La propiedad `mask-image` funciona de forma similar a la propiedad `background-image`. Utilice un valor `url()` para transferir una imagen. La imagen de la máscara debe tener un área transparente o semitransparente.
+
+Un área totalmente transparente hará que la parte de la imagen que está debajo de esa área sea invisible. Sin embargo, si se utiliza un área semitransparente, se mostrará parte de la imagen original. Puede ver la diferencia en el Glitch que aparece a continuación. La primera imagen es la imagen original de los globos sin máscara. En la segunda imagen se aplicó una máscara con una estrella blanca sobre un fondo totalmente transparente. La tercera imagen tiene una estrella blanca sobre un fondo con un gradiente de transparencia.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+En este ejemplo también utilizo la propiedad `mask-size` con un valor de `cover`. Esta propiedad funciona de la misma manera que [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size). Puede utilizar las palabras clave `cover` y `contain` o puede asignar al fondo un tamaño por medio de cualquier unidad de longitud válida, o un porcentaje.
+
+También puede repetir su máscara de la misma manera que podría repetir una imagen de fondo, con el fin de utilizar una pequeña imagen como un patrón repetitivo.
+
+## Enmascaramiento con SVG
+
+En vez de utilizar un archivo de imagen como máscara, puede utilizar un SVG. Hay un par de maneras de conseguir esto. La primera es tener un elemento `<mask>` dentro del SVG y consultar el ID de ese elemento en la propiedad `mask-image`.
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balloons">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="Un ejemplo de uso de una máscara SVG", width="699", height="490" %}</figure>
+
+La ventaja de este enfoque es que la máscara puede aplicarse a cualquier elemento HTML, no solo a una imagen. Lamentablemente, Firefox es el único navegador compatible con este enfoque.
+
+Sin embargo, no todo está perdido, ya que para el escenario más común de enmascarar una imagen, podemos incluir la imagen en el SVG.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Enmascaramiento con un gradiente
+
+El uso de un gradiente en CSS como máscara es una forma elegante de conseguir un área enmascarada sin necesidad de crear una imagen o un SVG.
+
+Un gradiente lineal simple utilizado como máscara podría garantizar que la parte inferior de una imagen no sea demasiado oscura, por ejemplo, debajo de un pie de foto.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Puede utilizar cualquiera de los tipos de gradientes compatibles, y ser tan creativo como desee. En el siguiente ejemplo se utiliza un gradiente radial para crear una máscara circular que ilumine detrás del pie de foto.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Cómo utilizar varias máscaras
+
+Al igual que con las imágenes de fondo, puede especificar varias fuentes de máscaras, combinándolas para obtener el efecto que desee. Esto es particularmente útil si desea utilizar un patrón generado con gradientes CSS como su máscara. Estos normalmente utilizarán varias imágenes de fondo, por lo que pueden traducirse fácilmente en una máscara.
+
+Como ejemplo, encontré un bonito patrón en forma de tablero de ajedrez en [este artículo](https://cssgradient.io/blog/gradient-patterns/). El código, con imágenes de fondo, se ve de la siguiente manera:
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Para convertir este, o cualquier otro patrón diseñado para imágenes de fondo, en una máscara, deberá sustituir las propiedades `background-*` por las propiedades `mask` correspondientes, incluyendo las que tienen el prefijo `-webkit`.
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Hay algunos efectos verdaderamente bonitos que se pueden conseguir al aplicar patrones de gradiente a las imágenes. Intente volver a mezclar el Glitch y probar otras versiones.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Junto con el recorte, las máscaras de CSS son una forma de agregar interés a las imágenes y otros elementos HTML sin necesidad de utilizar una aplicación para gráficos.
+
+*<span>Foto de <a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a> en Unsplash</span> .*
diff --git a/src/site/content/es/blog/css-web-vitals/index.md b/src/site/content/es/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..3a824021f32
--- /dev/null
+++ b/src/site/content/es/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: CSS para Web Vitals
+subhead: Técnicas relacionadas con CSS para optimizar los Web Vitals
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: Gradiente multicolor
+description: Este artículo cubre técnicas relacionadas con CSS para optimizar Web Vitals.
+tags:
+  - blog
+  - performance
+  - css
+---
+
+La forma en que escribes tus estilos y creas diseños puede tener un gran impacto en [Core Web Vitals](/learn-core-web-vitals/). Esto es particularmente cierto para el [Cumulative Layout Shift (CLS): Cambio Acumulativo del diseño](/cls) y [Largest Contentful Paint (LCP): Despliegue del contenido más extenso](/lcp).
+
+Este artículo cubre técnicas relacionadas con CSS para optimizar Web Vitals. Estas optimizaciones se desglosan mediante diferentes aspectos de una página: diseño, imágenes, fuentes, animaciones y carga. A lo largo del camino, exploraremos la mejora de una [página de ejemplo](https://codepen.io/una/pen/vYyLKvY):
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="Captura de pantalla del sitio de ejemplo", width="800", height="646" %}
+
+## Diseño
+
+### Insertar contenido en el DOM
+
+Insertar contenido en una página después de que el contenido que rodea a todo ya haya sido cargado, todo lo demás será empujado hacia abajo. Esto provoca [cambios de diseño](/cls/#layout-shifts-in-detail).
+
+[Los avisos de cookies](/cookie-notice-best-practices/), en particular los que se encuentran en la parte superior de la página, son un ejemplo común de este problema. Otros elementos de la página que a menudo provocan este tipo de cambio de diseño cuando se cargan incluyen anuncios e incrustaciones.
+
+#### Identificar
+
+La auditoría Lighthouse de "Evita grandes cambios de diseño" identifica los elementos de la página que se han desplazado. Para esta demostración, los resultados se ven de la siguiente manera:
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Auditoría Lighthouse de 'Evita grandes cambios de diseño'", width="800", height="500" %}
+
+El aviso de cookies no se incluye en estos resultados porque el aviso de cookies en sí no se desplaza cuando se está cargando. Más bien, hace que los elementos debajo de él en la página (es decir, `div.hero` y `article`) cambien. Para obtener más información sobre cómo identificar y corregir cambios de diseño, consulta [Depurar cambios de diseño](/debugging-layout-shifts).
+
+{% Aside %}
+
+Lighthouse solo analiza el rendimiento de una página hasta el evento de "carga de la página". Los banners de cookies, los anuncios y otros widgets a veces no se cargan hasta después de la carga de la página. Estos cambios de diseño siguen afectando a los usuarios, incluso si Lighthouse no los marca.
+
+{% endAside %}
+
+#### Reparar
+
+Coloca el aviso de cookies en la parte inferior de la página con posicionamiento absoluto o fijo.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="Aviso de cookies en la parte inferior de la página", width="800", height="656" %}
+
+Antes:
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+Después:
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+Otra forma de corregir este cambio de diseño sería reservar espacio para el aviso de cookies en la parte superior de la pantalla. Este enfoque es igualmente eficaz. Para obtener más información, consulta las [mejores prácticas de notificación de cookies](/cookie-notice-best-practices/).
+
+{% Aside %}
+
+El aviso de cookies es uno de los múltiples elementos de la página que desencadenan cambios de diseño cuando se carga. Para ayudarnos a ver más de cerca estos elementos de la página, los pasos de demostración posteriores no incluirán el aviso de cookies.
+
+{% endAside %}
+
+## Imágenes
+
+### Imágenes y Largest Contentful Paint (LCP)
+
+Las imágenes suelen ser el elemento de Largest Contentful Paint (LCP) de una página. Otros [elementos de la página que pueden ser elementos LCP](/lcp/#what-elements-are-considered) incluyen bloques de texto e imágenes de poster de video. El momento en que se carga el elemento LCP, se determina el LCP.
+
+Es importante tener en cuenta que los elementos LCP de una página pueden variar de una carga a otra según el contenido que es visible para el usuario cuando la página se muestra por primera vez. Por ejemplo, en esta demostración, el fondo del aviso de cookies, la imagen principal y el texto del artículo son algunos de los posibles elementos de LCP.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="Diagrama que destaca los elementos LCP de la página en diferentes escenarios.", width="800", height="498" %}
+
+En el sitio de ejemplo, la imagen de fondo del aviso de cookies es en realidad una imagen grande. Para mejorar el LCP, se puede desplegar el degradado en CSS, en lugar de cargar una imagen para crear el efecto.
+
+#### Reparar
+
+Cambia el CSS de `.banner` para usar un degradado CSS en lugar de una imagen:
+
+Antes:
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+Después:
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### Imágenes y cambios de diseño
+
+Los navegadores solo pueden determinar el tamaño de una imagen una vez que se carga la imagen. Si la carga de la imagen se produce después de que se ha renderizado la página, pero no se ha reservado espacio para la imagen, se produce un cambio de diseño cuando aparece la imagen. En la demostración, la imagen principal está provocando un cambio de diseño cuando se carga.
+
+{% Aside %} El fenómeno de las imágenes que provocan cambios en el diseño es más obvio en situaciones en las que las imágenes tardan en cargarse, por ejemplo, en una conexión lenta o cuando se carga una imagen con un tamaño de archivo particularmente grande. {% endAside %}
+
+#### Identificar
+
+Para identificar imágenes sin `width` y `height` explícitos, utiliza la auditoría de "Los elementos de imagen tienen ancho y alto explícitos" de Lighthouse.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Auditoría de Los elementos de imagen tienen ancho y alto explícitos de Lighthouse.", width="800", height="274" %}
+
+En este ejemplo, tanto la imagen principal como la imagen del artículo carecen de los atributos de `width` y `height`
+
+#### Reparar
+
+Define los elementos de `width` y `height` en estas imágenes para evitar cambios de diseño.
+
+Antes:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="imagen a cargar">
+<img src="https://source.unsplash.com/random/800x600" alt="imagen a cargar">
+```
+
+Después:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="imagen a cargar">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="imagen a cargar">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4" %} <figcaption> La imagen ahora se carga sin provocar un cambio de diseño.</figcaption></figure>
+
+{% Aside %} Otro enfoque para la carga de imágenes es utilizar los atributos de [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) y [`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) en conjunción con la especificación de los atributos de `width` y `height`. Esto tiene la ventaja de rendimiento adicional de permitirte servir imágenes de diferentes tamaños a diferentes dispositivos. Para obtener más información, consulta [Servir imágenes responsivas](/serve-responsive-images/). {% endAside %}
+
+## Fuentes
+
+Las fuentes pueden retrasar la representación del texto y provocar cambios en el diseño. Como resultado, es importante servir fuentes rápidamente.
+
+### Renderización de texto con retraso
+
+De forma predeterminada, un navegador no procesará inmediatamente un elemento de texto si sus fuentes web asociadas aún no se han cargado. Esto se hace para evitar un ["destello de texto sin estilo" (FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). En muchas situaciones, esto retrasa el [First Contentful Paint (FCP): Primer despliegue de contenido](/fcp). En algunas situaciones, esto retrasa a Largest Contentful Paint (LCP).
+
+{% Aside %}
+
+De forma predeterminada, los navegadores basados en Chromium y Firefox [bloquearán la renderización de texto hasta 3 segundos](https://developers.google.com/web/updates/2016/02/font-display) si la fuente web asociada no se ha cargado; Safari bloqueará la renderización de texto de forma indefinida. El [período de bloqueo](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline) comienza cuando el navegador solicita una fuente web. Si la fuente aún no se ha cargado al final del período de bloqueo, el navegador procesará el texto usando una fuente alternativa y cambiará la fuente web una vez que esté disponible.
+
+{% endAside %}
+
+### Cambios de diseño
+
+El intercambio de fuentes, si bien es excelente para mostrar contenido al usuario rápidamente, tiene el potencial de causar cambios en el diseño. Estos cambios de diseño ocurren cuando una fuente web y su fuente alternativa ocupan diferentes cantidades de espacio en la página. El uso de fuentes de proporciones similares minimizará el tamaño de estos cambios de diseño.
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="Diagrama que muestra un cambio de diseño causado por un cambio de fuente", width="800", height="452" %} <figcaption> En este ejemplo, el intercambio de fuentes provocó que los elementos de la página se desplazaran cinco píxeles hacia arriba.</figcaption></figure>
+
+#### Identificar
+
+Para ver las fuentes que se están cargando en una página en particular, abre la pestaña de **Red** en DevTools y filtra la información por **Fuente**. Las fuentes pueden ser archivos de gran tamaño, por lo que generalmente, el rendimiento es mejor si se usan menos fuentes.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="Captura de pantalla de una fuente mostrada en DevTools", width="800", height="252" %}
+
+Para ver cuánto tiempo se tarda en solicitar la fuente, haz clic en la pestaña de **Tiempo.** Cuanto antes se solicite una fuente, antes se podrá cargar y utilizar.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="Captura de pantalla de la pestaña 'Tiempo' en DevTools", width="800", height="340" %}
+
+Para ver la cadena de solicitud de una fuente, haz clic en la pestaña de **Iniciador**. En términos generales, cuanto más corta sea la cadena de solicitudes, antes se podrá solicitar la fuente.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="Captura de pantalla de la pestaña 'Iniciador' en DevTools", width="800", height="189" %}
+
+#### Reparar
+
+Esta demostración utiliza la API de Google Fonts. Google Fonts ofrece la opción de cargar fuentes mediante las etiquetas de  `<link>` o una declaración de `@import`. El fragmento de código `<link>` incluye un recurso de sugerencia de `preconnect`. Esto debería resultar en una entrega de hojas de estilo más rápida que con la versión de `@import`.
+
+En un nivel muy alto, puedes pensar sobre [las sugerencias](https://www.w3.org/TR/resource-hints/#resource-hints) de recursos como una forma de indicarle al navegador que necesitará configurar una conexión en particular o descargar un recurso en particular. Como resultado, el navegador priorizará estas acciones. Cuando utilices sugerencias de recursos, ten en cuenta que priorizar una acción en particular quita recursos del navegador de otras acciones. Por lo tanto, las sugerencias de recursos deben usarse con cuidado y no para todo. Para obtener más información, consulta [Establecer conexiones de red con anticipación para mejorar la velocidad percibida de la página](/preconnect-and-dns-prefetch/).
+
+Elimina la siguiente `@import` de tu hoja de estilo:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+Agrega las siguientes etiquetas `<link>` en el `<head>` del documento:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+Estas etiquetas de enlace le indican al navegador que establezca una conexión temprana con los orígenes utilizados por Google Fonts y que cargue la hoja de estilo que contiene la declaración de fuente para Montserrat y Roboto. Estas etiquetas de `<link>` deben colocarse lo antes posible en `<head>`.
+
+{% Aside %}
+
+Para cargar solo un subconjunto de una fuente de Google Fonts, agrega el parametro de API de [`?text=`](https://developers.google.com/fonts/docs/getting_started). Por ejemplo `?text=ABC` carga solo los caracteres necesarios para representar "ABC". Ésta es una buena forma de reducir el tamaño de archivo de una fuente.
+
+{% endAside %}
+
+## Animaciones
+
+La forma principal en que las animaciones afectan a los Web Vitals es cuando provocan cambios en el diseño. Hay dos tipos de animaciones que debes evitar usar: [animaciones que activan el diseño](/animations-guide/#triggers) y efectos "similares a animaciones" que mueven elementos de la página. Por lo general, estas animaciones se pueden reemplazar con equivalentes de mayor rendimiento mediante el uso de propiedades CSS como [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform), [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) y [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter). Para obtener más información, consulta [Cómo crear animaciones CSS de alto rendimiento](/animations/).
+
+### Identificar
+
+La auditoría Lighthouse de "Evitar animaciones no compuestas" puede ser útil para identificar animaciones que no funcionan.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Auditoría Lighthouse de 'Evitar animaciones no compuestas'", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+La auditoría Lighthouse de "Evitar animaciones no compuestas" solo identifica *animaciones CSS* que no funcionan; Las animaciones controladas por JavaScript (por ejemplo, usando [`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) para "animar" un elemento) son malas para el rendimiento, pero esta auditoría no las marcará.
+
+{% endAside %}
+
+### Reparar
+
+Cambia la secuencia de animación `slideIn` para utilizar `transform: translateX()` en lugar de cambiar la propiedad de `margin-left`.
+
+Antes:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+Después:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## CSS crítico
+
+Las hojas de estilo bloquean el renderizado. Esto significa que el navegador encuentra una hoja de estilo, dejará de descargar otros recursos hasta que el navegador haya descargado y analizado la hoja de estilo. Esto puede retrasar el LCP. Para mejorar el rendimiento, considera la posibilidad de [eliminar el CSS no utilizado](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/), [poner en línea el CSS crítico](/extract-critical-css/) y [aplazar el CSS no crítico](/defer-non-critical-css/#optimize).
+
+## Conclusión
+
+Aunque todavía hay espacio para mejoras adicionales (por ejemplo, usar la [compresión de imágenes](/use-imagemin-to-compress-images/) para servir imágenes más rápido), estos cambios han mejorado significativamente las Web Vitals de este sitio. Si este fuera un sitio real, el siguiente paso sería [recopilar datos de rendimiento de usuarios reales](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data) para evaluar si está [cumpliendo con los umbrales de Web Vitals para la mayoría de los usuarios](/vitals-measurement-getting-started/#data-interpretation). Para obtener más información sobre Web Vitals, consulta [Aprende Core Web Vitals](/learn-core-web-vitals/).
diff --git a/src/site/content/es/blog/debug-web-vitals-in-the-field/index.md b/src/site/content/es/blog/debug-web-vitals-in-the-field/index.md
new file mode 100644
index 00000000000..46063d38e63
--- /dev/null
+++ b/src/site/content/es/blog/debug-web-vitals-in-the-field/index.md
@@ -0,0 +1,309 @@
+---
+layout: post
+title: Depurar Web Vitals en el campo
+subhead: Aprenda a atribuir sus datos de Web Vitals con información de depuración para ayudarlo a identificar y solucionar problemas de usuarios reales con análisis
+description: Aprenda a atribuir sus datos de Web Vitals con información de depuración para ayudarlo a identificar y solucionar problemas de usuarios reales con análisis
+authors:
+  - philipwalton
+date: 2021-04-01
+updated: 2022-07-18
+hero: image/eqprBhZUGfb8WYnumQ9ljAxRrA72/pOHexwZOflz5RGf6FT4P.jpg
+alt: Pantalla de portátil que muestra una interfaz de análisis
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Google ofrece actualmente dos categorías de herramientas para medir y depurar Web Vitals:
+
+- **Herramientas de laboratorio:** herramientas como Lighthouse, donde su página se carga en un entorno simulado que puede imitar varias condiciones (por ejemplo, una red lenta y un dispositivo móvil de gama baja).
+- **Herramientas de campo:** herramientas como el [Informe de experiencia del usuario de Chrome](https://developer.chrome.com/docs/crux/) (CrUX), que se basa en datos agregados de usuarios reales de Chrome. (Tenga en cuenta que los datos de campo informados por herramientas como [PageSpeed Insights](https://pagespeed.web.dev/) y [Search Console](https://support.google.com/webmasters/answer/9205520) se obtienen de los datos de CrUX).
+
+Si bien las herramientas de campo ofrecen datos más precisos, datos que en realidad representan lo que experimentan los usuarios reales, las herramientas de laboratorio suelen ser mejores para ayudarlo a identificar y solucionar problemas.
+
+Los datos de CrUX son más representativos del rendimiento real de su página, pero es poco probable que conocer sus puntuaciones de CrUX le ayude a descubrir *cómo* mejorar su rendimiento.
+
+Lighthouse, por otro lado, identificará problemas y hará sugerencias específicas sobre cómo mejorar. Sin embargo, Lighthouse solo hará sugerencias para problemas de rendimiento que descubra en el momento de la carga de la página. No detecta problemas que solo se manifiestan como resultado de la interacción del usuario, como desplazarse o hacer clic en los botones de la página.
+
+Esto plantea una pregunta importante: **¿cómo se puede capturar información de depuración para los datos de mediciones de Web Vitals que provienen de usuarios reales en el campo?**
+
+Esta publicación explicará en detalle qué API puede usar para recopilar información de depuración adicional para cada una de las estadísticas actuales de Core Web Vitals y le dará ideas sobre cómo capturar estos datos en su herramienta de análisis existente.
+
+## API para atribución y depuración
+
+### CLS
+
+De todas las estadísticas de Core Web Vitals, [CLS](/cls/) es quizá la más importante para la recopilación de información de depuración en el campo. CLS se mide durante toda la vida útil de la página, por lo que la forma en que un usuario interactúa con la página (qué tan lejos se desplaza, en qué hace clic, etc.) puede tener un impacto significativo en si hay cambios de diseño y qué elementos están cambiando.
+
+Considere el siguiente informe de PageSpeed Insights para la URL: [web.dev/measure](/measure/)
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/nZjd6rXrOgW5VUsm5fyx.png", alt="Un informe de PageSpeed Insights con diferentes valores CLS", width="800", height="587" %}
+
+El valor informado desde el laboratorio para CLS (Lighthouse) en comparación con el CLS de campo (datos CrUX) es bastante diferente, y esto tiene sentido si considera que la página [web.dev/measure](/measure/) tiene una gran cantidad de contenido interactivo que no se utiliza cuando se prueba en Lighthouse.
+
+Pero incluso si comprende que la interacción del usuario afecta a los datos de campo, aún necesita saber qué elementos de la página están cambiando para dar como resultado una puntuación de 0,45 en el percentil 75.
+
+La interfaz [LayoutShiftAttribution](/debug-layout-shifts/#layoutshiftattribution) lo hace posible.
+
+#### Obtener la atribución del cambio de diseño
+
+La interfaz [LayoutShiftAttribution](/debug-layout-shifts/#layoutshiftattribution) se expone en cada entrada de `layout-shift` que emite la [API de inestabilidad del diseño](https://wicg.github.io/layout-instability).
+
+Para obtener una explicación detallada de estas dos interfaces, consulte [Depuración de los cambios de diseño](/debug-layout-shifts/#layoutshiftattribution). Para los propósitos de esta publicación, lo principal que debe saber es que, como desarrollador, puede observar cada cambio de diseño que ocurre en la página, así como también qué elementos están cambiando.
+
+Éste es un código de ejemplo que registra cada cambio de diseño, así como también los elementos que cambiaron:
+
+```js
+new PerformanceObserver((list) => {
+  for (const {value, startTime, sources} of list.getEntries()) {
+    // Registra la cantidad de cambio y otra información de la entrada.
+    console.log('Layout shift:', {value, startTime});
+    if (sources) {
+      for (const {node, curRect, prevRect} of sources) {
+        // Registra los elementos que cambiaron.
+        console.log('  Shift source:', node, {curRect, prevRect});
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+Probablemente no sea práctico medir y enviar datos a su herramienta de análisis para cada cambio de diseño que se produzca. Sin embargo, al monitorear todos los cambios, puede realizar un seguimiento de los peores cambios y solo reportar la información sobre ellos.
+
+El objetivo no es identificar y corregir cada cambio de diseño que se produzca para cada usuario, el objetivo es identificar los cambios que afectan a la mayor cantidad de usuarios y, por lo tanto, contribuyen más al CLS de su página en el percentil 75.
+
+Además, no necesita calcular el elemento fuente más grande cada vez que haya un cambio, solo necesita hacerlo cuando esté listo para enviar el valor CLS a su herramienta de análisis.
+
+El siguiente código toma una lista de entradas `layout-shift` que han contribuido al CLS y devuelve el elemento fuente más grande del cambio mayor:
+
+```js
+function getCLSDebugTarget(entries) {
+  const largestEntry = entries.reduce((a, b) => {
+    return a && a.value > b.value ? a : b;
+  });
+  if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
+    const largestSource = largestEntry.sources.reduce((a, b) => {
+      return a.node && a.previousRect.width * a.previousRect.height >
+          b.previousRect.width * b.previousRect.height ? a : b;
+    });
+    if (largestSource) {
+      return largestSource.node;
+    }
+  }
+}
+```
+
+Una vez que haya identificado el elemento más grande que contribuye al cambio mayor, puede informarlo a su herramienta de análisis.
+
+El elemento que más contribuye al CLS para una página determinada probablemente variará de un usuario a otro, pero si agrega esos elementos entre todos los usuarios, podrá generar una lista de elementos cambiantes que afecten a la mayor cantidad de usuarios.
+
+Una vez que haya identificado y solucionado la causa raíz de los cambios para esos elementos, su código de análisis comenzará a informar cambios más pequeños como los "peores" cambios para sus páginas. Con el tiempo, todos los cambios informados serán lo suficientemente pequeños como para que sus páginas estén dentro [del umbral "bueno" de 0,1](/cls/#what-is-a-good-cls-score).
+
+Algunos otros metadatos que puede ser útil capturar junto con el elemento fuente del cambio mayor son:
+
+- El momento del cambio mayor
+- La ruta URL en el momento del cambio mayor (para sitios que actualizan dinámicamente la URL, como las aplicaciones de una sola página).
+
+### LCP
+
+Para depurar LCP en campo, la información principal que necesita es qué elemento en particular fue el elemento más grande (el elemento candidato de LCP) para esa carga de página en particular.
+
+Tenga en cuenta que es completamente posible, de hecho, es bastante común, que el elemento candidato de LCP sea diferente de un usuario a otro, incluso para la misma página exacta.
+
+Esto puede suceder por varias razones:
+
+- Los dispositivos de usuario tienen diferentes resoluciones de pantalla, lo que da como resultado diferentes diseños de página y, por lo tanto, diferentes elementos visibles dentro de la ventana gráfica.
+- Los usuarios no siempre cargan páginas desplazadas hasta la parte superior. A menudo, los enlaces contienen [identificadores de fragmentos](/text-fragments/#fragment-identifiers) o incluso [fragmentos de texto](/text-fragments/#text-fragments), lo que significa que es posible que sus páginas se carguen y se muestren en cualquier posición de desplazamiento de la página.
+- El contenido puede estar personalizado para el usuario actual, por lo que el elemento candidato de LCP podría variar enormemente de un usuario a otro.
+
+Esto significa que no puede hacer suposiciones sobre qué elemento o conjunto de elementos será el elemento candidato de LCP más común para una página en particular. Tiene que medirlo en función del comportamiento del usuario real.
+
+#### Identificar el elemento candidato de LCP
+
+Para determinar el elemento candidato de LCP en JavaScript, puede usar la [API Largest Contentful Paint](https://wicg.github.io/largest-contentful-paint/) (Despliegue del contenido más extenso), la misma API que usa para determinar el valor de tiempo de LCP.
+
+Dada una lista de las entradas `largest-contentful-paint`, puede determinar el elemento candidato de LCP actual si mira la última entrada:
+
+```js
+function onLCPDebugTarget(entries) {
+  const lastEntry = entries[entries.length - 1];
+  return lastEntry.element;
+}
+```
+
+{% Aside 'caution' %} Como se explica en la [documentación de las estadísticas de LCP](/lcp/), el elemento candidato de LCP puede cambiar a través de la carga de la página, por lo que se requiere más trabajo para identificar el elemento candidato de LCP "final". La forma más sencilla de identificar y medir el elemento candidato de LCP "final" es utilizar la biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals/) de JavaScript, como se muestra en el [ejemplo siguiente](#usage-with-the-web-vitals-javascript-library). {% endAside %}
+
+Una vez que conozca el elemento candidato de LCP, puede enviarlo a su herramienta de análisis junto con el valor de la estadística. Al igual que con CLS, esto le ayudará a identificar qué elementos son más importantes para optimizarlos primero.
+
+Algunos otros metadatos que pueden ser útil capturar junto con el elemento candidato de LCP:
+
+- La URL de origen de la imagen (si el elemento candidato de LCP es una imagen).
+- La familia de fuentes de texto (si el elemento candidato de LCP es texto y la página utiliza fuentes web).
+
+### FID
+
+Para depurar FID en campo, es importante recordar que FID mide [solo la porción de retardo](/fid/#fid-in-detail) de la latencia general del primer evento de entrada. Eso significa que aquello con lo que interactuó el usuario no es realmente tan importante como lo que estaba sucediendo además en el hilo principal en el momento en que interactuó.
+
+Por ejemplo, muchas aplicaciones de JavaScript que admiten el renderizado del lado del servidor (SSR) entregarán HTML estático que se puede renderizar en la pantalla antes de que sea interactivo para la interacción del usuario, es decir, antes de que haya terminado de cargarse el JavaScript necesario para hacer que el contenido sea interactivo.
+
+Para este tipo de aplicaciones, puede ser muy importante saber si la primera entrada ocurrió antes o después de la [hidratación](https://en.wikipedia.org/wiki/Hydration_(web_development)). Si resulta que muchas personas intentan interactuar con la página antes de que se complete la hidratación, considere la posibilidad de renderizar sus páginas en un estado de desactivación o carga en lugar de en un estado que parezca interactivo.
+
+Si el marco de trabajo de su aplicación expone la marca de tiempo de hidratación, puede compararla fácilmente con la marca de tiempo de la entrada `first-input` para determinar si la primera entrada ocurrió antes o después de la hidratación. Si su marco no expone esa marca de tiempo, o no usa la hidratación en absoluto, otra señal útil puede ser si la entrada ocurrió antes o después de que JavaScript terminara de cargarse.
+
+El evento `DOMContentLoaded` se activa después de que el HTML de la página se haya cargado y analizado por completo, lo que incluye esperar a que se cargue cualquier script síncrónico, diferido o de módulo (incluidos todos los módulos importados estáticamente). Por lo tanto, puede usar el momento de ese evento y compararlo con el momento en que ocurrió el FID.
+
+El siguiente código toma una entrada `first-input` y devuelve verdadero si la primera entrada ocurrió antes del final del evento `DOMContentLoaded`:
+
+```js
+function wasFIDBeforeDCL(fidEntry) {
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  return navEntry && fidEntry.startTime < navEntry.domContentLoadedEventStart;
+}
+```
+
+{% Aside %} Si su página usa scripts `async` o `import()` dinámico para cargar JavaScript, es posible que el evento `DOMContentLoaded` no sea una señal útil. En su lugar, puede considerar el uso de `load` o, si hay una secuencia de comandos en particular que sabe que tarda un poco en ejecutarse, puede usar la entrada [Tiempo de recursos](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) para esa secuencia de comandos. {% endAside %}
+
+#### Identificar el elemento objetivo del FID
+
+Otra señal de depuración potencialmente útil es el elemento con el que se interactuó. Si bien la interacción con el elemento en sí no contribuye al FID (recuerde que el FID es solo la porción de retraso de la latencia total del evento), saber con qué elementos interactúan sus usuarios puede ser útil para determinar la mejor manera de mejorar el FID.
+
+Por ejemplo, si la gran mayoría de las primeras interacciones de su usuario son con un elemento en particular, considere incluir el código JavaScript necesario para ese elemento en el HTML y cargar de forma diferida el resto.
+
+Para obtener el elemento asociado con el primer evento de entrada, puede hacer referencia a la propiedad `target` de la entrada `first-input`:
+
+```js
+function getFIDDebugTarget(entries) {
+  return entries[0].target;
+}
+```
+
+Algunos otros metadatos que puede ser útil capturar junto con el elemento de destino FID:
+
+- El tipo de evento (como `mousedown`, `keydown`, `pointerdown`).
+- Cualquier dato relevante de [atribución de tarea larga](https://w3c.github.io/longtasks/#taskattributiontiming) para la tarea larga que ocurrió al mismo tiempo que la primera entrada (útil si la página carga scripts de terceros).
+
+## Uso con la biblioteca web-vitals de JavaScript
+
+Las secciones anteriores ofrecen algunas sugerencias para incluir información de depuración adicional en los datos que envía a su herramienta de análisis. Cada uno de los ejemplos incluye un código que usa una o más entradas de rendimiento asociadas con una estadística de Web Vitals en particular y devuelve un elemento DOM que se puede usar para ayudar a depurar problemas que afectan esa estadística.
+
+Estos ejemplos están diseñados para funcionar bien con la [biblioteca web-vitals JavaScript](https://github.com/GoogleChrome/web-vitals), que expone la lista de entradas de rendimiento en el objeto [`Metric`](https://github.com/GoogleChrome/web-vitals#api) que se pasa a cada función de devolución de llamada.
+
+Si combina los ejemplos enumerados anteriormente con las funciones de estadísticas `web-vitals`, el resultado final se verá así:
+
+```js
+import {onLCP, onFID, onCLS} from 'web-vitals';
+
+function getSelector(node, maxLen = 100) {
+  let sel = '';
+  try {
+    while (node && node.nodeType !== 9) {
+      const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
+        (node.className && node.className.length) ?
+        '.' + Array.from(node.classList.values()).join('.') : '');
+      if (sel.length + part.length > maxLen - 1) return sel || part;
+      sel = sel ? part + '>' + sel : part;
+      if (node.id) break;
+      node = node.parentNode;
+    }
+  } catch (err) {
+    // No hace nada...
+  }
+  return sel;
+}
+
+function getLargestLayoutShiftEntry(entries) {
+  return entries.reduce((a, b) => a && a.value > b.value ? a : b);
+}
+
+function getLargestLayoutShiftSource(sources) {
+  return sources.reduce((a, b) => {
+    return a.node && a.previousRect.width * a.previousRect.height >
+        b.previousRect.width * b.previousRect.height ? a : b;
+  });
+}
+
+function wasFIDBeforeDCL(fidEntry) {
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  return navEntry && fidEntry.startTime < navEntry.domContentLoadedEventStart;
+}
+
+function getDebugInfo(name, entries = []) {
+  // En algunos casos no habrá entradas (por ejemplo, si CLS es 0,
+  // o para LCP después de restaurar la bfcache), así que es necesarios verificar primero.
+  if (entries.length) {
+    if (name === 'LCP') {
+      const lastEntry = entries[entries.length - 1];
+      return {
+        debug_target: getSelector(lastEntry.element),
+        event_time: lastEntry.startTime,
+      };
+    } else if (name === 'FID') {
+      const firstEntry = entries[0];
+      return {
+        debug_target: getSelector(firstEntry.target),
+        debug_event: firstEntry.name,
+        debug_timing: wasFIDBeforeDCL(firstEntry) ? 'pre_dcl' : 'post_dcl',
+        event_time: firstEntry.startTime,
+      };
+    } else if (name === 'CLS') {
+      const largestEntry = getLargestLayoutShiftEntry(entries);
+      if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
+        const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
+        if (largestSource) {
+          return {
+            debug_target: getSelector(largestSource.node),
+            event_time: largestEntry.startTime,
+          };
+        }
+      }
+    }
+  }
+  // Devuelve parámetros predeterminados/vacíos en caso de que no haya entradas.
+  return {
+    debug_target: '(not set)',
+  };
+}
+
+function sendToAnalytics({name, value, entries}) {
+  navigator.sendBeacon('/analytics', JSON.stringify({
+    name,
+    value,
+    ...getDebugInfo(name, entries)
+  });
+}
+
+onLCP(sendToAnalytics);
+onFID(sendToAnalytics);
+onCLS(sendToAnalytics);
+```
+
+El formato específico requerido para enviar los datos variará según la herramienta de análisis, pero el código anterior debería ser suficiente para obtener los datos necesarios, independientemente de los requisitos de formato.
+
+{% Aside %} El código anterior también incluye una función `getSelector()` (no se menciona en las secciones anteriores), que toma un nodo DOM y devuelve un selector CSS que representa ese nodo y su lugar en el DOM. También toma un parámetro de longitud máxima opcional (predeterminado en 100 caracteres) en caso de que su proveedor de análisis tenga restricciones de longitud en los datos que envía. {% endAside %}
+
+## Informar y visualizar los datos
+
+Una vez que haya comenzado a recopilar información de depuración junto con sus estadísticas de Web Vitals, el siguiente paso es agregar los datos de todos sus usuarios para comenzar a buscar patrones y tendencias.
+
+Como se mencionó anteriormente, no es necesario que aborde todos los problemas que enfrentan sus usuarios, sino que debe abordar, especialmente al principio, los problemas que afectan a la mayor cantidad de usuarios, que también deberían ser los problemas que tienen el mayor impacto negativo sobre sus puntuaciones de Core Web Vitals.
+
+### La herramienta Web Vitals Report
+
+Si está utilizando la herramienta [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report), se actualizó recientemente para admitir [informes sobre una única dimensión de depuración](https://github.com/GoogleChromeLabs/web-vitals-report#debug-dimension) para cada una de las estadísticas de Core Web Vitals.
+
+Esta es una captura de pantalla de la sección de información de depuración de Web Vitals Report, que muestra los datos del sitio web de la herramienta Web Vitals Report:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/Y49u3cmRD6RfAaZGCSmx.png", alt="Web Vitals Report que muestra información de depuración", width="800", height="535" %}
+
+Con los datos anteriores, puede ver que lo que sea que esté causando el cambio del elemento `section.Intro` es lo que más contribuye al CLS en esta página, por lo que identificar y corregir la causa de ese cambio producirá la mayor mejora en la puntuación.
+
+## Resumen
+
+Esperamos que esta publicación haya ayudado a delinear las formas específicas en que puede usar las API de rendimiento existentes para obtener información de depuración para cada una de las estadísticas de Core Web Vitals basadas en interacciones de usuarios reales en campo. Si bien se centra en Core Web Vitals, los conceptos también se aplican a la depuración de cualquier estadística de rendimiento que se pueda medir en JavaScript.
+
+Si recién está comenzando a medir el rendimiento y ya es un usuario de Google Analytics, la herramienta Web Vitals Report puede ser un buen lugar para comenzar porque ya admite la generación de informes de información de depuración para cada una de las estadísticas de Core Web Vitals.
+
+Si usted es un proveedor de análisis y quiere mejorar sus productos y proporcionarles más información de depuración a sus usuarios, tenga en cuenta algunas de las técnicas que se describen aquí, pero no se limite *sólo* a las ideas que presentamos. Esta publicación está destinada a ser de aplicación general a todas las herramientas de análisis. Sin embargo, es probable que las herramientas de análisis individuales puedan (y deberían) capturar e informar aún más información de depuración.
+
+Por último, si cree que existen lagunas en su capacidad para depurar estas estadísticas debido a que faltan funciones o información en las API, envíe sus comentarios a [web-vitals-feedback@googlegroups.com](mailto:web-vitals-feedback@googlegroups.com).
diff --git a/src/site/content/es/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/es/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..9011d342742
--- /dev/null
+++ b/src/site/content/es/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: Definición de los umbrales de las métricas de Core Web Vitals
+subhead: La investigación y la metodología detrás de los umbrales de Core Web Vitals
+authors:
+  - bmcquade
+description: La investigación y la metodología detrás de los umbrales de Core Web Vitals
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: La investigación y la metodología detrás de los umbrales de Core Web Vitals
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Core Web Vitals](/vitals/#core-web-vitals) es un conjunto de métricas de campo que miden aspectos importantes de la experiencia del usuario en el mundo real en la web. Core Web Vitals incluye métricas, así como umbrales objetivo para cada métrica, que ayudan a los desarrolladores a comprender cualitativamente si la experiencia de su sitio es "buena", "necesita mejorar" o es "mala". En esta publicación se explicará el enfoque utilizado para elegir los umbrales para las métricas de Core Web Vitals en general, así como también cómo se eligieron los umbrales para cada métrica específica de Core Web Vitals.
+
+## Actualización: Métricas y umbrales básicos de Web Vitals
+
+En el 2020 las Core Web Vitals son tres métricas: Largest Contentful Paint : Despliegue del contenido más extenso (LCP), First Input Delay: Demora de la primera entrada (FID) y Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS). Cada métrica mide un aspecto diferente de la experiencia del usuario: LCP mide la velocidad de carga percibida y marca el punto en la línea de tiempo de carga de la página en el que probablemente se haya cargado el contenido principal de la misma. FID mide la capacidad de respuesta y cuantifica la experiencia que sienten los usuarios cuando intentan interactuar por primera vez con la página, y CLS mide la estabilidad visual y cuantifica la cantidad de cambios de diseño inesperados del contenido visible de la página.
+
+Cada métrica de Core Web Vitals tiene umbrales asociados, que clasifican el rendimiento como "bueno", "necesita mejorar" o "deficiente":
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Recomendaciones del umbral de Largest Contentful Paint", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Recomendaciones del umbral de First Input Delay", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Recomendaciones del umbral de Cumulative Layout Shift", width="400", height="350" %}</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>Bueno</th>
+      <th>Deficiente</th>
+      <th>Percentil</th>
+    </tr>
+    <tr>
+      <td>Largest Contentful Paint</td>
+      <td>≤ 2,500ms</td>
+      <td>&gt; 4,000 ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>First Input Delay</td>
+      <td>≤ 100 ms</td>
+      <td>&gt; 300 ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>Cumulative Layout Shift</td>
+      <td>≤0.1</td>
+      <td>&gt; 0.25</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">Además, para clasificar el rendimiento general de una página o un sitio, utilizamos el valor del percentil 75 de todas las visualizaciones de página de esa página o sitio. En otras palabras, si al menos el 75% de las visualizaciones de página de un sitio cumplen el umbral "bueno", el sitio se clasifica como de "buen" rendimiento para esa métrica. Por el contrario, si al menos el 25 por ciento de las visualizaciones de página cumplen el umbral "deficiente", el sitio se clasifica como de rendimiento "deficiente". Así, por ejemplo, un percentil 75 de LCP de 2 segundos se clasifica como "bueno", mientras que un percentil 75 de LCP de 5 segundos se clasifica como "deficiente".</p>
+<h2 data-md-type="header" data-md-header-level="2">Criterios para los umbrales de las métricas de Core Web Vitals</h2>
+<p data-md-type="paragraph">Al establecer los umbrales de las métricas de Core Web Vitals, primero identificamos los criterios que debía cumplir cada umbral. A continuación, explico los criterios que utilizamos en Google para evaluar los umbrales de las métricas del 2020 para Core Web Vitals. En las secciones siguientes se explicará con más detalle cómo se aplicaron estos criterios para seleccionar los umbrales de cada métrica en el 2020. En los próximos años, prevemos realizar mejoras y adiciones a los criterios y umbrales para mejorar aún más nuestra capacidad de medir las experiencias de los usuarios en la web.</p>
+<h3 data-md-type="header" data-md-header-level="3">Alta calidad en la experiencia del usuario</h3>
+<p data-md-type="paragraph">Nuestro objetivo principal es la optimización para el usuario y su calidad de experiencia. Por ello, nuestro objetivo es garantizar que las páginas que cumplen los umbrales "buenos" de Core Web Vitals ofrezcan una experiencia de usuario de alta calidad.</p>
+<p data-md-type="paragraph">Para identificar un umbral asociado a una experiencia de usuario de alta calidad, nos fijamos en la percepción humana y en la investigación sobre HCI. Mientras que esta investigación se resume a veces utilizando un único umbral fijo, encontramos que la investigación subyacente se expresa normalmente como un rango de valores. Por ejemplo, la investigación sobre la cantidad de tiempo que los usuarios normalmente esperan antes de perder la concentración se describe a veces como 1 segundo, mientras que la investigación subyacente se expresa en realidad como un rango, desde cientos de milisegundos hasta varios segundos. El hecho de que los umbrales de percepción varíen según el usuario y el contexto se ve respaldado por los datos conjuntados y anónimos de las métricas de Chrome, que muestran que no hay una cantidad única de tiempo que los usuarios esperan para que una página web muestre el contenido antes de abortar la carga de la página. Más bien, estos datos muestran una distribución fluida y continua. Para profundizar en los umbrales de percepción humana y en la investigación sobre HCI, consulte <a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">La ciencia detrás de los Web Vitals</a>.</p>
+<p data-md-type="paragraph">En los casos en los que se dispone de investigaciones relevantes sobre la experiencia del usuario para una métrica determinada y existe un consenso razonable sobre el rango de valores en la literatura, utilizamos este rango como entrada para guiar nuestro proceso de selección de umbrales. En los casos en los que no se dispone de investigaciones relevantes sobre la experiencia del usuario, como en el caso de una nueva métrica como Cumulative Layout Shift, evaluamos páginas del mundo real que cumplen con diferentes umbrales candidatos para una métrica, con el fin de identificar un umbral que resulte en una buena experiencia de usuario.</p>
+<h3 data-md-type="header" data-md-header-level="3">Posible mediante el contenido web actual</h3>
+<p data-md-type="paragraph">Además, para garantizar que los propietarios de los sitios puedan optimizarlos para que cumplan los umbrales "buenos", exigimos que estos umbrales sean alcanzables para los contenidos actuales de la web. Por ejemplo, mientras que cero milisegundos es un umbral ideal de LCP "bueno", que da lugar a experiencias de carga instantáneas, un umbral de cero milisegundos no es alcanzable en la práctica de la mayoría de los casos, debido a las latencias de procesamiento de la red y de los dispositivos. Por lo tanto, cero milisegundos no es un umbral LCP "bueno" razonable para Core Web Vitals.</p>
+<p data-md-type="paragraph">Al evaluar los umbrales "buenos" de Core Web Vitals de los candidatos, verificamos que esos umbrales sean alcanzables, según los datos del <a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Chrome User Experience Report</a> (CrUX). Para confirmar que se puede alcanzar un umbral, requerimos que al menos el 10% de los <a href="/same-site-same-origin/#origin" data-md-type="link">orígenes</a> actualmente cumplen con el umbral "bueno". Además, para garantizar que los sitios bien optimizados no se clasifican erróneamente debido a la variabilidad de los datos de campo, también verificamos que el contenido bien optimizado cumple sistemáticamente el umbral "bueno".</p>
+<p data-md-type="paragraph">Por el contrario, establecemos el umbral "deficiente" identificando un nivel de rendimiento que solo una minoría de orígenes que actualmente no cumple. A menos que se disponga de investigaciones pertinentes para definir un umbral "deficiente", de forma predeterminada se clasifica como "deficiente" entre el 10 y el 30% de los orígenes con peores resultados.</p>
+<h3 data-md-type="header" data-md-header-level="3">Reflexiones finales sobre los criterios</h3>
+<p data-md-type="paragraph">Al evaluar los umbrales de los candidatos, encontramos que los criterios a veces entraban en conflicto entre sí. Por ejemplo, puede haber una tensión entre un umbral que se puede alcanzar de manera constante y que garantiza experiencias de usuario consistentemente buenas. Además, dado que la investigación de la percepción humana generalmente proporciona una variedad de valores, y las métricas de comportamiento del usuario muestran cambios graduales en el comportamiento, descubrimos que a menudo no existe un umbral "correcto" único para una métrica. Por lo tanto, nuestro enfoque para el Core Web Vitals 2020 fue elegir los umbrales que cumplan mejor con los criterios anteriores, reconociendo al mismo tiempo que no hay un umbral perfecto y que a veces podemos tener que elegir entre múltiples umbrales candidatos razonables. En vez de preguntar "¿cuál es el umbral perfecto?" en cambio, nos hemos centrado en preguntar "¿qué umbral candidato cumple mejor nuestros criterios?"</p>
+<h2 data-md-type="header" data-md-header-level="2">Elección del percentil</h2>
+<p data-md-type="paragraph">Como se señaló anteriormente, para clasificar el rendimiento general de una página o sitio, utilizamos el valor del percentil 75 de todas las visitas a esa página o sitio. El percentil 75 se eligió en función de dos criterios. En primer lugar, el percentil debe garantizar que la mayoría de las visitas a una página o sitio experimenten el nivel de rendimiento deseado. En segundo lugar, el valor del percentil elegido no debe verse afectado en exceso por los valores atípicos.</p>
+<p data-md-type="paragraph">Estos objetivos son en cierto modo contradictorios. Para satisfacer el primer objetivo, normalmente un percentil más alto sería la mejor opción. Sin embargo, con percentiles más altos, también aumenta la probabilidad de que el valor resultante se vea afectado por valores atípicos. Si algunas visitas a un sitio se realizan en conexiones de red defectuosas que dan como resultado muestras de LCP excesivamente grandes, no queremos que la clasificación de nuestro sitio se decida por estas muestras atípicas. Por ejemplo, si estuviéramos evaluando el rendimiento de un sitio con 100 visitas con la ayuda de un percentil alto como el 95, se necesitarían solo 5 muestras de valores atípicos para que el valor del percentil 95 se vea afectado por los valores atípicos.</p>
+<p data-md-type="paragraph">Dado que estos objetivos son un poco contradictorios, después el análisis, llegamos a la conclusión de que el percentil 75 logra un equilibrio razonable. Al utilizar el percentil 75, sabemos que la mayoría de las visitas al sitio (3 de 4) experimentaron el nivel de rendimiento objetivo o mejor. Además, es menos probable que el valor del percentil 75 se vea afectado por valores atípicos. Volviendo a nuestro ejemplo, para un sitio con 100 visitas, 25 de esas visitas necesitarían informar de grandes muestras de valores atípicos para que el valor del percentil 75 se vea afectado por los valores atípicos. Aunque es posible que 25 de 100 muestras sean atípicas, es mucho menos probable que en el caso del percentil 95.</p>
+<h2 data-md-type="header" data-md-header-level="2">Largest Contentful Paint</h2>
+<h3 data-md-type="header" data-md-header-level="3">Calidad de la experiencia</h3>
+<p data-md-type="paragraph">Con frecuencia se cita 1 segundo como la cantidad de tiempo que un usuario esperará antes de comenzar a perder el enfoque en una tarea. Al examinar más detenidamente las investigaciones relevantes, descubrimos que 1 segundo es una aproximación para describir un rango de valores, desde aproximadamente varios cientos de milisegundos hasta varios segundos.</p>
+<p data-md-type="paragraph">Dos fuentes comúnmente citadas para el umbral de 1 segundo son <a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">Card et al</a> y <a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">Miller</a>. Card define un umbral de "respuesta inmediata" de 1 segundo, citando las <a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">Teorías Unificadas de la Cognición</a> de Newell. Newell explica las respuestas inmediatas como "respuestas que deben hacerse a algún estímulo dentro de <em data-md-type="emphasis">aproximadamente un segundo</em> (es decir, aproximadamente de ~0.3seg a ~3seg)". Esto sigue a la discusión de Newell sobre "las limitaciones de la cognición en tiempo real", donde se observa que "las interacciones con el entorno que evocan consideraciones cognitivas tienen lugar en el orden de segundos", que van aproximadamente de 0.5 a 2 o 3 segundos. Miller, otra fuente comúnmente citada para el umbral de 1 segundo, señala que "las tareas que los humanos pueden realizar y realizarán con las comunicaciones de las máquinas cambiarán seriamente su carácter si los retrasos en la respuesta son mayores a dos segundos, con alguna posible extensión de otro segundo más o menos".</p>
+<p data-md-type="paragraph">La investigación de Miller y Card describe la cantidad de tiempo que un usuario esperará antes de perder el enfoque en un rango, desde aproximadamente 0.3 a 3 segundos, lo que sugiere que nuestro umbral "bueno" de LCP debería estar en este rango. Además, dado que el umbral "bueno" actual de First Contentful Paint es de 1 segundo, y que Largest Contentful Paint generalmente ocurre después de First Contentful Paint, restringimos aún más nuestro rango de umbrales de LCP candidatos, de 1 a 3 segundos. Para elegir el umbral en este rango que mejor cumpla con nuestros criterios, a continuación analizaremos la posibilidad de alcanzar estos umbrales candidatos.</p>
+<h3 data-md-type="header" data-md-header-level="3">Viabilidad</h3>
+<p data-md-type="paragraph">Utilizando los datos de CrUX, podemos determinar el porcentaje de orígenes en la web que cumplen nuestros umbrales candidatos a LCP "buenos".</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de orígenes CrUX clasificados como "buenos" (para los umbrales LCP candidatos)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1 segundo</th>
+      <th>1.5 segundos</th>
+      <th>2 segundos</th>
+      <th>2.5 segundos</th>
+      <th>3 segundos</th>
+    </tr>
+    <tr>
+      <td><strong>teléfono</strong></td>
+      <td>3.5%</td>
+      <td>13%</td>
+      <td>27%</td>
+      <td>42%</td>
+      <td>55%</td>
+    </tr>
+    <tr>
+      <td><strong>escritorio</strong></td>
+      <td>6.9%</td>
+      <td>19%</td>
+      <td>36%</td>
+      <td>51%</td>
+      <td>64%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Mientras que menos del 10% de los orígenes cumplen el umbral de 1 segundo, todos los demás umbrales de 1.5 a 3 segundos satisfacen nuestro requisito de que al menos el 10% de los orígenes cumplan el umbral "bueno", y por tanto siguen siendo candidatos válidos.</p>
+<p data-md-type="paragraph">Además, para garantizar que el umbral elegido se pueda alcanzar de forma constante para los sitios bien optimizados, analizamos el rendimiento de LCP para los sitios de mejor rendimiento en la web, para determinar qué umbrales se pueden alcanzar de forma coherente para estos sitios. Específicamente, nuestro objetivo es identificar un umbral que se pueda alcanzar de manera consistente en el percentil 75 para los sitios con mayor rendimiento. Descubrimos que los umbrales de 1.5 y 2 segundos no se pueden alcanzar de forma sistemática, mientras que los de 2.5 segundos sí se pueden alcanzar de forma sistemática.</p>
+<p data-md-type="paragraph">Para identificar un umbral "deficiente" para LCP, utilizamos los datos de CrUX para identificar un umbral que cumple la mayoría de los orígenes:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de orígenes CrUX clasificados como "deficientes" (para los umbrales LCP candidatos)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3 segundos</th>
+      <th>3.5 segundos</th>
+      <th>4 segundos</th>
+      <th>4.5 segundos</th>
+      <th>5 segundos</th>
+    </tr>
+    <tr>
+      <td><strong>teléfono</strong></td>
+      <td>45%</td>
+      <td>35%</td>
+      <td>26%</td>
+      <td>20%</td>
+      <td>15%</td>
+    </tr>
+    <tr>
+      <td><strong>escritorio</strong></td>
+      <td>36%</td>
+      <td>26%</td>
+      <td>19%</td>
+      <td>14%</td>
+      <td>10%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Para un umbral de 4 segundos, aproximadamente el 26% de los orígenes telefónicos y el 21% de los orígenes en equipos de escritorio se clasificarían como deficientes. Esto entra en nuestro rango objetivo de entre el 10 y 30%, por lo que concluimos que 4 segundos es un umbral "deficiente" aceptable.</p>
+<p data-md-type="paragraph">Por lo tanto, llegamos a la conclusión de que 2.5 segundos es un umbral razonable "bueno", y 4 segundos es un umbral razonable "deficiente" para Largest Contentful Paint.</p>
+<h2 data-md-type="header" data-md-header-level="2">First Input Delay</h2>
+<h3 data-md-type="header" data-md-header-level="3">Calidad de la experiencia</h3>
+<p data-md-type="paragraph">La investigación es razonablemente consistente al concluir que los retrasos en la retroalimentación visual de hasta unos 100 ms se perciben como causados por una fuente asociada, como una entrada del usuario. Esto sugiere que un umbral "bueno" para First Input Delay de 100 ms probablemente sea apropiado como nivel mínimo: si la demora para procesar la entrada excede los 100 ms, no hay posibilidad de que otros pasos de procesamiento y renderización se completen a tiempo.</p>
+<p data-md-type="paragraph">El citado <a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">Response Times: The 3 Important Limits</a> de Jakob define 0.1 segundos como el límite para que el usuario sienta que el sistema reacciona instantáneamente. Nielsen cita a Miller y Card, que cita el trabajo de Michotte de 1962 <a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">La percepción de la causalidad</a>. En la investigación de Michotte, a los participantes del experimento se les muestran "dos objetos en una pantalla. El objeto A se pone en marcha y se mueve hacia B. Se detiene en el momento en que entra en contacto con B, mientras que este último comienza y se aleja de A". Michotte varía el intervalo de tiempo entre el momento en que el objeto A se detiene y el momento en que el objeto B comienza a moverse. Michotte encuentra que, para retrasos de hasta aproximadamente 100 ms, los participantes tienen la impresión de que el Objeto A causa el movimiento del Objeto B. Para los retrasos de aproximadamente 100 ms a 200 ms, la percepción de la causalidad es mixta, y para los retrasos de más de 200 ms, el movimiento del objeto B ya no se considera causado por el objeto A.</p>
+<p data-md-type="paragraph">Del mismo modo, Miller define un umbral de respuesta para "Respuesta a la activación del control" como "la indicación de acción dada, normalmente, por el movimiento de una llave, interruptor u otro miembro del control que indica que fue físicamente activado. Esta respuesta debe ser … percibida como parte de la acción mecánica inducida por el operador. Demora de tiempo: No más de 0.1 segundos" y posteriormente "el retraso entre presionar una tecla y la retroalimentación visual no debe ser mayor de 0.1 a 0.2 segundos ".</p>
+<p data-md-type="paragraph">Más recientemente, en <a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">Towards the Temporally Perfect Virtual Button</a>, Kaaresoja et al investigaron la percepción de simultaneidad entre pulsar un botón virtual en una pantalla táctil y la retroalimentación visual posterior que indica que el botón se pulsó, con varios retrasos. Cuando el retraso entre pulsar el botón y la retroalimentación visual fue de 85 ms o menos, los participantes informaron que la retroalimentación visual apareció simultáneamente con la pulsación del botón el 75% de las veces. Además, para retrasos de 100 ms o menos, los participantes informaron una calidad percibida consistentemente alta al pulsar el botón, con una calidad percibida cayendo para demoras de 100 ms a 150 ms, y alcanzando niveles muy bajos para demoras de 300 ms.</p>
+<p data-md-type="paragraph">Teniendo en cuenta lo anterior, llegamos a la conclusión de que la investigación apunta a un rango de valores de alrededor de 100ms como un umbral de  First Input Delay apropiado para Web Vitals. Además, dado que los usuarios informaron de niveles de calidad bajos para retrasos de 300 ms o más, 300 ms se presenta como un umbral "deficiente" de forma razonable.</p>
+<h3 data-md-type="header" data-md-header-level="3">Viabilidad</h3>
+<p data-md-type="paragraph">Utilizando los datos de CrUX, determinamos que la mayoría de los orígenes en la web cumplen el umbral de 100 ms de FID "bueno" en el percentil 75:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de orígenes CrUX clasificados como "buenos" para el umbral FID de 100ms</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100 ms</th>
+    </tr>
+    <tr>
+      <td><strong>teléfono</strong></td>
+      <td>78%</td>
+    </tr>
+    <tr>
+      <td><strong>escritorio</strong></td>
+      <td>&gt; 99%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Además, observamos que los mejores sitios en la web pueden alcanzar este umbral sistemáticamente en el percentil 75 (y a menudo lo cumplen en el percentil 95).</p>
+<p data-md-type="paragraph">Teniendo en cuenta lo anterior, llegamos a la conclusión de que 100 ms es un "buen" umbral razonable para FID.</p>
+<h2 data-md-type="header" data-md-header-level="2">Cumulative Layout Shift</h2>
+<h3 data-md-type="header" data-md-header-level="3">Calidad de la experiencia</h3>
+<p data-md-type="paragraph">Cumulative Layout Shift (CLS) es una nueva métrica que mide cuánto cambia el contenido visible de una página. Dado que CLS es nuevo, no conocemos ninguna investigación que pueda informar directamente sobre los umbrales de esta métrica. Por lo tanto, para identificar un umbral que se ajuste a las expectativas de los usuarios, evaluamos páginas del mundo real con diferentes cantidades de cambios en el diseño, para determinar la cantidad máxima de cambio que se percibe como aceptable antes de causar interrupciones significativas al consumir el contenido de la página. En nuestras pruebas internas, encontramos que los niveles de cambio a partir de 0.15 se percibían sistemáticamente como disruptivos, mientras que los cambios de 0.1 e inferiores eran perceptibles pero no excesivamente disruptivos. Por lo tanto, aunque el cambio cero del diseño es el ideal, llegamos a la conclusión de que los valores de hasta 0.1 son umbrales CLS "buenos".</p>
+<h3 data-md-type="header" data-md-header-level="3">Viabilidad</h3>
+<p data-md-type="paragraph">Según los datos de CrUX, podemos ver que casi el 50% de los orígenes tienen CLS de 0.05 o menos.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de orígenes CrUX clasificados como "buenos" (para los umbrales CLS candidatos)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.05</th>
+      <th>0.1</th>
+      <th>0.15</th>
+    </tr>
+    <tr>
+      <td><strong>teléfono</strong></td>
+      <td>49%</td>
+      <td>60%</td>
+      <td>69%</td>
+    </tr>
+    <tr>
+      <td><strong>escritorio</strong></td>
+      <td>42%</td>
+      <td>59%</td>
+      <td>69%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Si bien los datos de CrUX sugieren que 0.05 podría ser un umbral razonablemente "bueno" de CLS, reconocemos que hay algunos casos de uso en los que actualmente es difícil evitar cambios de diseño disruptivos. Por ejemplo, en el caso de los contenidos incrustados de terceros, como las incrustaciones de redes sociales, a veces no se conoce la altura del contenido incrustado hasta que termina de cargarse, lo que puede provocar un cambio de diseño superior a 0.05. Por lo tanto, llegamos a la conclusión de que, si bien muchos orígenes alcanzan el umbral de 0.05, el umbral CLS es ligeramente menos estricto ya que con 0.1 logra un mejor equilibrio entre la calidad de la experiencia y la viabilidad. Esperamos que, en el futuro, el ecosistema web identifique soluciones para abordar los cambios de diseño causados por incrustaciones de terceros, lo que permitiría usar un umbral CLS "bueno" más estricto de 0.05 o 0 en una iteración futura de Core Web Vitals.</p>
+<p data-md-type="paragraph">Además, para determinar un umbral "deficiente" para CLS, utilizamos datos de CrUX para identificar un umbral que cumple con la mayoría de los orígenes:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de orígenes CrUX clasificados como "deficientes" (para los umbrales CLS candidatos)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.15</th>
+      <th>0.2</th>
+      <th>0.25</th>
+      <th>0.3</th>
+    </tr>
+    <tr>
+      <td><strong>teléfono</strong></td>
+      <td>31%</td>
+      <td>25%</td>
+      <td>20%</td>
+      <td>18%</td>
+    </tr>
+    <tr>
+      <td><strong>escritorio</strong></td>
+      <td>31%</td>
+      <td>23%</td>
+      <td>18%</td>
+      <td>16%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Para un umbral de 0.25, aproximadamente el 20% de los orígenes telefónicos y el 18% de los orígenes en equipos de escritorio se clasificarían como "deficientes". Esto entra en nuestro rango objetivo de entre 10 y 30%, por lo que concluimos que 0.25 es un umbral "deficiente" aceptable.</p>
diff --git a/src/site/content/es/blog/deprecating-excalidraw-electron/index.md b/src/site/content/es/blog/deprecating-excalidraw-electron/index.md
new file mode 100644
index 00000000000..ead0f8ffb79
--- /dev/null
+++ b/src/site/content/es/blog/deprecating-excalidraw-electron/index.md
@@ -0,0 +1,136 @@
+---
+title: Excalidraw Electron se ha declarado obsoleto para cambiar a la versión web
+subhead: Conozca por qué el proyecto Excalidraw decidió declarar obsoleta su wrapper Electron en favor de la versión web.
+description: Excalidraw es una pizarra virtual colaborativa que le permite dibujar fácilmente diagramas que parecen hechos a mano. En el proyecto Excalidraw, decidimos descartar Excalidraw Desktop, un wrapper de Electron para Excalidraw, en favor de la versión web que se puede encontrar desde siempre en excalidraw.com. Después de un cuidadoso análisis, decidimos que las Aplicaciones Web Progresivas (PWA) son el futuro sobre el que queremos construir.
+authors:
+  - thomassteiner
+date: 2021-01-07
+updated: 2021-11-30
+canonical: "https://blog.excalidraw.com/deprecating-excalidraw-electron/"
+hero: image/admin/qfK9zbKBQalqq5zdr1P1.jpg
+alt: |2
+
+  Dibujo de Excalidraw con un estilizado logo de Electron.
+tags:
+  - blog
+  - capabilities
+  - case-study
+---
+
+{% Aside %} [Excalidraw](https://excalidraw.com/) es una pizarra virtual colaborativa que le permite dibujar fácilmente diagramas que parecen hechos a mano. Este artículo se publicó y apareció por primera vez en el [blog de Excalidraw](https://blog.excalidraw.com/deprecating-excalidraw-electron/). {% endAside %}
+
+En el [proyecto Excalidraw](https://github.com/excalidraw), hemos decidido declarar obsoleto [Excalidraw Desktop](https://github.com/excalidraw/excalidraw-desktop), un wrapper de [Electron](https://www.electronjs.org/) para Excalidraw, a favor de la versión web que se ha podido encontrar desde siempre en [excalidraw.com](https://excalidraw.com/). Después de un análisis cuidadoso, hemos decidido que las [Aplicaciones Web Progresivas](/pwa/) (PWA) son el futuro sobre el que queremos construir. Siga leyendo para saber por qué.
+
+## Cómo nació Excalidraw Desktop
+
+Poco después de que [@vjeux](https://twitter.com/vjeux) creara la versión inicial de Excalidraw en enero de 2020 y escribiera en su [blog al respecto](https://blog.excalidraw.com/reflections-on-excalidraw/), propuso lo siguiente en el [número 561](https://github.com/excalidraw/excalidraw/issues/561#issue-555138343):
+
+> Sería genial incluir Excalidraw en Electron (o equivalente) y publicarlo como una aplicación [específica de la plataforma] en las distintas tiendas de aplicaciones.
+
+La reacción inmediata de [@voluntadpear](https://github.com/voluntadpear) fue sugerir:
+
+> ¿Qué hay de convertirlo en una PWA en vez de eso? Actualmente, Android admite agregarlos a Play Store como Trusted Web Activities y, con suerte, iOS hará lo mismo pronto. En las computadoras de escritorio, Chrome permite descargar un acceso directo del escritorio a una PWA.
+
+La decisión que [tomó @vjeux](https://github.com/vjeux) al final fue simple:
+
+> Deberíamos hacer ambas :)
+
+Si bien [@voluntadpear](https://github.com/voluntadpear) y más tarde otros comenzaron a trabajar para convertir la versión de Excalidraw en una PWA, [@lipis](https://github.com/lipis) [siguió adelante](https://github.com/excalidraw/excalidraw/issues/561#issuecomment-579573783) de forma independiente y creó un [repositorio separado](https://github.com/excalidraw/excalidraw-desktop) para Excalidraw Desktop.
+
+Hasta el día de hoy, el objetivo inicial establecido por [@vjeux](https://github.com/vjeux), es decir, enviar Excalidraw a las distintas tiendas de aplicaciones, aún no se ha alcanzado. Honestamente, nadie ha iniciado el proceso de envío a ninguna de las tiendas. Pero, ¿por qué? Antes de responder, veamos Electron, la plataforma.
+
+## ¿Qué es Electron?
+
+El aspecto más llamatico de [Electron](https://www.electronjs.org/) es que le permite *"crear aplicaciones de escritorio multiplataforma con JavaScript, HTML y CSS"*. Las aplicaciones creadas con Electron son *"compatibles con Mac, Windows y Linux"*, es decir, *"las aplicaciones de Electron se crean y se ejecutan en tres plataformas"*. Según la página de inicio, las dificultades que Electron facilita son las [actualizaciones automáticas](https://www.electronjs.org/docs/api/auto-updater), los [menús y notificaciones a nivel del sistema](https://www.electronjs.org/docs/api/menu), los [informes de fallas](https://www.electronjs.org/docs/api/crash-reporter), la [depuración y la creación de perfiles](https://www.electronjs.org/docs/api/content-tracing), y los [instaladores de Windows](https://www.electronjs.org/docs/api/auto-updater#windows). Resulta que algunas de las características prometidas necesitan un estudio más profundo de las letras pequeñas.
+
+- Por ejemplo, las actualizaciones automáticas *"[actualmente] solo [son compatibles] en macOS y Windows. No hay soporte integrado para el actualizador automático en Linux, por lo que se recomienda usar el administrador de paquetes de la distribución para actualizar su aplicación"*.
+
+- Los desarrolladores pueden crear menús a nivel del sistema llamando a `Menu.setApplicationMenu(menu)`. En Windows y Linux, el menú se configurará como el menú superior de cada ventana, mientras que en macOS hay muchos menús estándar definidos por el sistema, como el menú [Servicios](https://developer.apple.com/documentation/appkit/nsapplication/1428608-servicesmenu?language=objc). Para que su propio menú sea un menú estándar, los desarrolladores deben establecer el `rol` de su menú en consecuencia, y Electron los reconocerá y los convertirá en menús estándar. Esto significa que una gran cantidad de código relacionado con el menú utilizará la siguiente verificación de plataforma: `const isMac = process.platform === 'darwin'`.
+
+- Los instaladores de Windows se pueden crear con [windows-installer](https://github.com/electron/windows-installer). El archivo README del proyecto destaca que *"para una aplicación de producción, debe firmar su aplicación. El filtro SmartScreen de Internet Explorer bloqueará la descarga de su aplicación y muchos proveedores de antivirus considerarán su aplicación como malware a menos que obtenga un certificado válido"*[sic].
+
+Observando solo estos tres ejemplos, está claro que Electron está lejos del principio  "escribir una vez, ejecutar en todas partes". La distribución de una aplicación en las tiendas de aplicaciones requiere la [firma de código](https://www.electronjs.org/docs/tutorial/code-signing), una tecnología de seguridad para certificar la propiedad de la aplicación. Empaquetar una aplicación requiere el uso de herramientas como [electron-forge](https://github.com/electron-userland/electron-forge) y pensar dónde alojar los paquetes para las actualizaciones de la aplicación. Se vuelve complejo con relativa rapidez, especialmente cuando el objetivo es realmente el soporte multiplataforma. Quiero señalar que es *absolutamente* posible crear aplicaciones de Electron impresionantes con suficiente esfuerzo y dedicación. Para Excalidraw Desktop, no era lo que queríamos.
+
+## Donde quedó Excalidraw Desktop
+
+Excalidraw Desktop hasta ahora es básicamente la aplicación web Excalidraw empaquetada como un archivo [`.asar`](https://github.com/electron/asar) agrgándole una ventana **Acerca de Excalidraw**. La apariencia de la aplicación es casi idéntica a la versión web.
+
+<figure>{% Img  src="image/admin/oR9usELiRYTSu8V7i7vj.png", alt="La aplicación Excalidraw Desktop ejecutándose en un contenedor Electron.", width="800", height="601" %}<figcaption> Excalidraw Desktop es casi indistinguible de la versión web</figcaption></figure>
+
+<figure>{% Img src="image/admin/y9d4nWR3p0VjvHcnP0iq.png", alt="La ventana 'Acerca de' de Excalidraw Desktop que muestra la versión del contenedor de Electron y la aplicación web.", width="400", height="330" %}<figcaption> El menú <strong>Acerca de Excalibur</strong> que da información sobre las versiones.</figcaption></figure>
+
+En macOS, ahora hay un menú de nivel de sistema en la parte superior de la aplicación, pero como ninguna de las acciones del menú, aparte de **Cerrar ventana** y **Acerca de Excalidraw**, está conectada a nada, el menú es, en su estado actual, bastante inútil. Mientras tanto, todas las acciones se pueden realizar, por supuesto, a través de las barras de herramientas normales de Excalidraw y el menú contextual.
+
+<figure>{% Img src="image/admin/akQQgmMKo66quqeVDdAH.png", alt="La barra de menú de Excalidraw Desktop en macOS con el elemento de menú 'Archivo', 'Cerrar ventana' seleccionado.", width="736", height="138" %}<figcaption> La barra de menú de Excalidraw Desktop en macOS</figcaption></figure>
+
+Usamos [electron-builder](https://github.com/electron-userland/electron-builder), que admite [asociaciones de tipos de archivos](https://www.electron.build/configuration/configuration#PlatformSpecificBuildOptions-fileAssociations). Al hacer doble clic en un `.excalidraw`, lo ideal sería que se abriera la aplicación Excalidraw Desktop. El extracto relevante de nuestro archivo `electron-builder.json` ve así:
+
+```json
+{
+  "fileAssociations": [
+    {
+      "ext": "excalidraw",
+      "name": "Excalidraw",
+      "description": "Excalidraw file",
+      "role": "Editor",
+      "mimeType": "application/json"
+    }
+  ]
+}
+```
+
+Desafortunadamente, en la práctica, esto no siempre funciona como se esperaba, ya que, dependiendo del tipo de instalación (para el usuario actual, para todos los usuarios), las aplicaciones en Windows 10 no tienen los derechos para asociar un tipo de archivo a sí mismas.
+
+Estas deficiencias y el trabajo pendiente para hacer que la experiencia sea realmente similar a una aplicación en *todas* las plataformas (lo cual, nuevamente, con el esfuerzo suficiente *es* posible) fueron un fuerte argumento para que reconsideremos lo invertido en Excalidraw Desktop. Sin embargo, el argumento más importante para nosotros fue que prevemos que para *nuestro* caso de uso, no necesitamos todas las características que ofrece Electron. El creciente conjunto de capacidades de la web nos es igualmente útil, si no mejor.
+
+## Cómo nos sirve la web hoy y en el futuro
+
+Incluso en 2020, [jQuery](https://jquery.com/) sigue siendo [increíblemente popular](https://almanac.httparchive.org/en/2020/javascript#libraries). Para muchos desarrolladores se ha convertido en un hábito usarlo, a pesar de que hoy en día [puede que no necesiten jQuery](http://youmightnotneedjquery.com/). Existe un recurso similar para Electron, acertadamente llamado [You Might Not Need Electron](https://youmightnotneedelectron.com/). Permítanme esbozar por qué creemos que no necesitamos Electron.
+
+### Aplicación web progresiva instalable
+
+Excalidraw hoy es una aplicación web progresiva [instalable](/installable/) con un [trabajador de servicio](https://excalidraw.com/service-worker.js) y un [manifiesto de aplicación web](https://excalidraw.com/manifest.json). Almacena todos sus recursos en dos cachés, uno para fuentes y CSS relacionado con fuentes, y otro para todo lo demás.
+
+<figure>{% Img src="image/admin/tTo7miHIREZRySv8aoBd.png", alt="Pestaña de la aplicación Chrome DevTools que muestra los dos cachés de Excalidraw.", width="800", height="569" %}<figcaption> Contenido de la caché de Excalidraw</figcaption></figure>
+
+Esto significa que la aplicación está completamente habilitada sin conexión y puede ejecutarse sin una conexión de red. Los navegadores basados en Chromium, tanto en computadoras de escritorio como en dispositivos móviles, solicitan al usuario que instale la aplicación. Puede ver el mensaje de instalación en la siguiente captura de pantalla.
+
+<figure>{% Img src="image/admin/be3EQLezj3776w6SHLPi.png", alt="Excalidraw solicita al usuario que instale la aplicación en Chrome en macOS.", width="400", height="258" %}<figcaption> El cuadro de diálogo de instalación de Excalidraw en Chrome</figcaption></figure>
+
+Excalidraw está configurado para ejecutarse como una aplicación independiente, por lo que cuando lo instala, obtiene una aplicación que se ejecuta en su propia ventana. Está completamente integrado en la interfaz de usuario multitarea del sistema operativo y tiene su propio ícono de aplicación en la pantalla de inicio, el Dock o la barra de tareas; dependiendo de la plataforma donde lo instale.
+
+<figure>{% Img src="image/admin/MbMgQlGSBeNcX7Y362jV.png", alt="Excalidraw ejecutándose en su propia ventana", width="800", height="584" %}<figcaption> La PWA Excalidraw en una ventana independiente</figcaption></figure>
+
+<figure>{% Img src="image/admin/7ncf98ZQZcg4g3UP2s7F.png", alt="Icono de Excalidraw en macOS Dock.", width="400", height="167" %}<figcaption> El icono de Excalidraw en macOS Dock</figcaption></figure>
+
+### Acceso al sistema de archivos
+
+Excalidraw utiliza [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) para acceder al sistema de archivos del sistema operativo. En los navegadores compatibles, esto permite un verdadero flujo de trabajo abrir → editar → guardar y también guardar sobreescribiendo y "guardar como", con un respaldo transparente para otros navegadores. Puede obtener más información sobre esta función en la publicación de mi blog [Lectura y escritura de archivos y directorios con la biblioteca browser-fs-access](/browser-fs-access/).
+
+### Soporte de arrastrar y soltar
+
+Los archivos se pueden arrastrar y soltar en la ventana de Excalidraw al igual que en las aplicaciones específicas de la plataforma. En un navegador que admita la [API File System Access](/file-system-access/), un archivo arrastrado se puede editar inmediatamente y las modificaciones se pueden guardar en el archivo original. Esto es tan intuitivo que a veces nos olvidamos de que se trata de una aplicación web.
+
+### Acceso al portapapeles
+
+Excalidraw funciona bien con el portapapeles del sistema operativo. Se pueden copiar y pegar dibujos completos de Excalidraw o solo objetos individuales en formatos `image/png` e `image/svg+xml`, lo que permite una fácil integración con otras herramientas específicas de la plataforma como [Inkscape](https://inkscape.org/) o herramientas basadas en web como [SVGOMG](https://jakearchibald.github.io/svgomg/).
+
+<figure>{% Img src="image/admin/90gLbYTtkKtDfun4fiRM.png", alt="Menú contextual de Excalidraw que muestra los elementos de menú 'copiar al portapapeles como SVG' y 'copiar al portapapeles como PNG'.", width="800", height="746" %}<figcaption> El menú contextual de Excalidraw que ofrece acciones del portapapeles</figcaption></figure>
+
+### Manejo de archivos
+
+Excalidraw ya es compatible con la [API File Handling](/file-handling/) experimental, lo que significa que los archivos `.excalidraw` pueden recibir doble clic en el administrador de archivos del sistema operativo y sere abiertos directamente en la aplicación Excalidraw, ya que Excalidraw se registra como un manejador de archivos `.excalidraw` en el sistema operativo.
+
+### Captura de enlaces declarativos
+
+Los dibujos de Excalidraw se pueden compartir mediante un enlace. He aquí un [ejemplo](https://excalidraw.com/#json=4646308765761536,jwZJW8JsOM75vdhqG2nBgA). En el futuro, si las personas tienen Excalidraw instalado como PWA, dichos enlaces no se abrirán en una pestaña del navegador, sino que lanzarán una nueva ventana independiente. Esto funcionará, cuando se termine de implementar, gracias a la [captura de enlaces declarativos](https://github.com/WICG/sw-launch/blob/master/declarative_link_capturing.md), una propuesta de vanguardia en el momento de escribir este artículo para una nueva función de plataforma web.
+
+## Conclusión
+
+La web ha recorrido un largo camino, con más y más funciones que llegan a navegadores, funciones que hace solo un par de años o incluso meses eran impensables en la web y exclusivos para aplicaciones específicas de la plataforma. Excalidraw está a la vanguardia de lo que es posible en el navegador, a la vez que reconoce que no todos los navegadores en todas las plataformas son compatibles con cada función que usamos. Al apostar por una estrategia de mejora progresiva, disfrutamos de lo mejor y más reciente siempre que sea posible, pero sin dejar a nadie atrás. Se ve mejor en *cualquier* navegador.
+
+Electron nos ha servido bien, pero en 2020 y más allá, podemos vivir sin él. Ah, y sobre ese objetivo de [@vjeux](https://github.com/vjeux): dado que Android Play Store ahora acepta PWA en un formato de contenedor llamado [Trusted Web Activity](/using-a-pwa-in-your-android-app/) y dado que [Microsoft Store también admite PWA](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-edgehtml/microsoft-store), podrá ver a Excalidraw en estas tiendas en un futuro no muy lejano. Mientras tanto, siempre puede usar e instalar [Excalidraw en y desde el navegador](https://excalidraw.com/).
+
+## Agradecimientos
+
+Este artículo fue revisado por [@lipis](https://github.com/lipis), [@dwelle](https://github.com/dwelle) y [Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/es/blog/devices-introduction/index.md b/src/site/content/es/blog/devices-introduction/index.md
new file mode 100644
index 00000000000..e6ab80a9d35
--- /dev/null
+++ b/src/site/content/es/blog/devices-introduction/index.md
@@ -0,0 +1,97 @@
+---
+title: Acceder a dispositivos de hardware en la web
+subhead: |
+  Elige la API adecuada para comunicarte con un dispositivo de hardware de tu elección.
+description: |
+  Este artículo ayuda a los desarrolladores web a elegir la API de hardware adecuada en función de un dispositivo determinado.
+authors:
+  - beaufortfrancois
+date: 2021-02-12
+updated: 2021-11-16
+hero: image/admin/vAnNpGQruw5EUXxob47V.jpg
+alt: Una foto de una mujer sentada frente a un escritorio de madera.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - devices
+---
+
+El objetivo de esta guía es ayudarte a elegir la mejor API para comunicarte con un dispositivo de hardware (por ejemplo, una cámara web, un micrófono, etc.) en la web. Por "mejor" me refiero a que te ofrece todo lo que necesitas con la menor cantidad de trabajo. En otras palabras, te ayuda en el caso que no sepas qué API usar o te preguntas si hay otra forma de conseguirlo.
+
+Un problema en el que comúnmente veo caer a los desarrolladores web es saltar a las APIs de nivel inferior sin conocer las APIs de nivel superior que son más fáciles de implementar y proporcionan una mejor UX. Por lo tanto, esta guía comienza recomendando primero las APIs de nivel superior, pero también menciona las APIs de nivel inferior en caso de que hayas determinado que la API de nivel superior no cumpla con tus necesidades.
+
+## 🕹 Recibir eventos de entrada de este dispositivo {: #input }
+
+Intenta escuchar eventos de [teclado](https://developer.mozilla.org/docs/Web/API/KeyboardEvent) y [puntero.](https://developer.mozilla.org/docs/Web/API/Pointer_events) Si este dispositivo es un controlador de juego, usa [Gamepad API](/gamepad/) para saber qué botones se están presionando y qué ejes se mueven.
+
+Si ninguna de estas opciones te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 📸 Acceder a audio y video desde este dispositivo {: #audio-video }
+
+Utiliza [MediaDevices.getUserMedia()](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) para obtener transmisiones de audio y video en vivo desde este dispositivo y aprender a [capturar audio y video](https://www.html5rocks.com/en/tutorials/getusermedia/intro/). También puedes [controlar la panorámica, la inclinación y el zoom de la cámara](/camera-pan-tilt-zoom/) y otras configuraciones, como el [brillo y el contraste](https://developers.google.com/web/updates/2016/12/imagecapture), e incluso también puedes [tomar imágenes fijas](https://beaufortfrancois.github.io/sandbox/image-capture/playground). [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API) se puede utilizar para agregar efectos al audio, crear visualizaciones de audio o aplicar efectos espaciales (como la panorámica). Ver también [cómo perfilar el rendimiento de las aplicaciones Web Audio](/profiling-web-audio-apps-in-chrome/) en Chrome.
+
+Si ninguna de estas opciones te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🖨 Imprimir en este dispositivo {: #print }
+
+Utiliza [window.print ()](https://developer.mozilla.org/docs/Web/API/Window/print) para abrir un cuadro de diálogo en el navegador que le permita al usuario elegir este dispositivo como opción para imprimir el documento actual.
+
+Si esto no te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🔐 Autenticarse con este dispositivo {: #auth }
+
+Utiliza [WebAuthn](https://webauthn.io/) para crear una credencial de clave pública con alcance de origen fuerte y certificada con este dispositivo de seguridad de hardware para autenticar a los usuarios. Admite el uso de autenticadores U2F o FIDO2 por Bluetooth, NFC y USB -también conocidos como claves de seguridad-, así como un autenticador de plataforma, que permite a los usuarios autenticarse con sus huellas dactilares o bloqueos de pantalla. Consulta [Crea tu primera aplicación WebAuthn](https://developers.google.com/codelabs/webauthn-reauth).
+
+Si este dispositivo es otro tipo de dispositivo de seguridad de hardware (por ejemplo, una billetera de criptomonedas), una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🗄 Acceder a archivos en este dispositivo {: #files }
+
+Utiliza [File System Access API](/file-system-access/) para leer y guardar cambios directamente en archivos y carpetas en el dispositivo del usuario. Si no está disponible, usa [File API](https://developer.mozilla.org/docs/Web/API/File/Using_files_from_web_applications) para pedirle al usuario que seleccione archivos locales de un cuadro de diálogo del navegador y luego lea el contenido de esos archivos.
+
+Si ninguna de estas opciones te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🧲 Acceder a los sensores de este dispositivo {: #sensors }
+
+Utiliza [Generic Sensor API](/generic-sensor/) para leer los valores brutos de los sensores de movimiento (por ejemplo, el acelerómetro o el giroscopio) y sensores ambientales (por ejemplo, la luz ambiental, el magnetómetro). Si no está disponible, usa los [eventos DeviceMotion y DeviceOrientation](https://developers.google.com/web/fundamentals/native-hardware/device-orientation) para obtener acceso al acelerómetro, el giroscopio y la brújula integrados en dispositivos móviles.
+
+Si no te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🛰 Acceder a las coordenadas GPS en este dispositivo {: #gps }
+
+Utiliza [Geolocation API](/user-location/) para obtener la latitud y la longitud de la posición actual del usuario en este dispositivo.
+
+Si no te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 🔋 Verificar la batería de este dispositivo {: #battery }
+
+Utiliza [Battery API](https://developer.mozilla.org/docs/Web/API/Battery_Status_API) para obtener información del host sobre el nivel de carga de la batería y recibir una notificación cuando el nivel de la batería o el estado de carga se modifiquen.
+
+Si no te funciona, una API de nivel inferior puede ser la solución. Consulta [Descubre cómo comunicarte con tu dispositivo](#discover) para comenzar tu recorrido.
+
+## 📞 Comunicarse con este dispositivo a través de la red {: #network }
+
+En la red local, usa [Remote Playback API](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays) para transmitir audio y/o video en un dispositivo de reproducción remota (por ejemplo, un smart TV o un altavoz inalámbrico) o utiliza [Presentation API](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays) para transmitir una página web en una segunda pantalla (por ejemplo, una pantalla conectada con un cable HDMI o un smart TV conectado de forma inalámbrica).
+
+Si este dispositivo expone un servidor web, utiliza [API Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API) y/o [WebSockets](https://developer.mozilla.org/docs/Web/API/WebSockets_API) para obtener algunos datos de este dispositivo pulsando los puntos finales apropiados. Si bien los sockets TCP y UDP no están disponibles en la web, consulta [WebTransport](/webtransport/) para manejar conexiones de red interactivas, bidireccionales y multiplexadas. Ten en cuenta que [WebRTC](/webrtc-standard-announcement/) también se puede utilizar para comunicar datos en tiempo real con otros navegadores mediante un protocolo de igual a igual.
+
+## 🧱 Descubre cómo comunicarte con tu dispositivo {: #discover }
+
+La decisión de qué API de nivel inferior debes usar está determinada por la naturaleza de tu conexión física al dispositivo. Si es inalámbrica, consulta Web NFC para conexiones inalámbricas de muy corto alcance y Web Bluetooth para dispositivos inalámbricos cercanos.
+
+- Con [Web NFC](/nfc), se puede leer y escribir en este dispositivo cuando estés muy cerca del dispositivo del usuario (generalmente de 5 a 10 cm, de 2 a 4 pulgadas). Herramientas como [NFC TagInfo de NXP](https://play.google.com/store/apps/details?id=com.nxp.taginfolite) te permiten navegar por el contenido de este dispositivo con fines de ingeniería inversa.
+
+- Con [Web Bluetooth](/bluetooth/), puedes conectarte al dispositivo a través de una conexión Bluetooth de bajo consumo. Debería ser bastante fácil comunicarse con él cuando utilizas servicios Bluetooth GATT estandarizados (como el servicio de batería), ya que su comportamiento está [bien documentado](https://www.bluetooth.com/specifications/gatt/). Si no es así, en este punto, debes buscar documentación de hardware para este dispositivo o realizar ingeniería inversa. Puedes utilizar herramientas externas como [nRF Connect for Mobile](https://play.google.com/store/apps/details?id=no.nordicsemi.android.mcp) y herramientas integradas del navegador, como la página interna `about://bluetooth-internals` en navegadores basados en Chromium. Echa un vistazo a [la ingeniería inversa de una bombilla Bluetooth](https://urish.medium.com/reverse-engineering-a-bluetooth-lightbulb-56580fcb7546) de Uri Shaked. Ten en cuenta que los dispositivos Bluetooth también pueden hablar los protocolos HID o serie.
+
+Si está conectado, consulte estas APIs en este orden específico:
+
+1. Con [WebHID](/hid/), la comprensión de los informes HID y los descriptores de informes a través de [colecciones](https://webhid-collections.glitch.me/) es clave para comprender este dispositivo. Esto puede resultar complicado sin la documentación del proveedor de este dispositivo. Herramientas como [Wireshark](https://gitlab.com/wireshark/wireshark/-/wikis/CaptureSetup/USB) pueden ayudarte a realizar ingeniería inversa.
+
+2. Con [Web Serial](/serial/), sin la documentación del proveedor para este dispositivo y los comandos que soporta, es difícil, pero no imposible. La ingeniería inversa de este dispositivo se puede realizar capturando tráfico USB sin procesar con herramientas como [Wireshark](https://gitlab.com/wireshark/wireshark/-/wikis/CaptureSetup/USB). También puedes utilizar la [aplicación web Serial Terminal](https://googlechromelabs.github.io/serial-terminal/) para experimentar con este dispositivo si utilizas un protocolo legible por humanos.
+
+3. Con [WebUSB](/usb/) , sin una documentación clara para este dispositivo y los comandos USB que soporta, es difícil, pero no imposible. Puedes ver [Exploring WebUSB y su emocionante potencial](https://www.youtube.com/watch?v=IpfZ8Nj3uiE) de Suz Hinton. También puedes aplicar ingeniería inversa a este dispositivo capturando tráfico USB sin procesar e inspeccionando [descriptores USB](https://www.beyondlogic.org/usbnutshell/usb5.shtml) con herramientas externas como Wireshark y herramientas integradas en el navegador, como la página interna `about://usb-internals` en los navegadores basados en Chromium.
+
+## Agradecimientos {: #acknowledgements }
+
+Gracias a [Reilly Grant](https://github.com/reillyeon), [Thomas Steiner](/authors/thomassteiner/) y [Kayce Basques](/authors/kaycebasques/) por revisar este artículo.
+
+Foto de [Darya Tryfanava](https://unsplash.com/@darya_tryfanava) en [Unsplash](https://unsplash.com/photos/uZBGDkYkvhM).
diff --git a/src/site/content/es/blog/drag-and-drop/index.md b/src/site/content/es/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..5d453fd7c9b
--- /dev/null
+++ b/src/site/content/es/blog/drag-and-drop/index.md
@@ -0,0 +1,258 @@
+---
+title: Cómo se usa la API Drag and Drop de HTML5
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: |
+  La API Drag and Drop (DnD) de HTML5 nos permite la posibilidad de que casi cualquier elemento de nuestra página se pueda arrastrar. En esta publicación explicaremos los conceptos básicos de arrastrar y soltar (en inglés, "drag and drop").
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+La API Drag and Drop (DnD) de HTML5 nos permite la posibilidad de que casi cualquier elemento de nuestra página se pueda arrastrar. En esta publicación explicaremos los conceptos básicos de arrastrar y soltar (en inglés, "drag and drop").
+
+## Crear contenido que se pueda arrastrar
+
+Es importante señalar que en la mayoría de los navegadores, el texto seleccionado, las imágenes y los enlaces se pueden arrastrar de forma predeterminada. Por ejemplo, si arrastras el logotipo de Google en la [Búsqueda de Google](https://google.com), verás una imagen fantasma. La imagen se puede colocar en la barra de direcciones, en un elemento `<input type="file" />` o incluso en el escritorio. Para hacer que otros tipos de contenido se puedan arrastrar, debes utilizar las API DnD de HTML5.
+
+Para hacer que un objeto se pueda arrastrar, establece `draggable=true` en dicho elemento. Puedes habilitar la acción de arrastrar en casi cualquier cosa: imágenes, enlaces, archivos o cualquier marca de tu página.
+
+En nuestro ejemplo, creamos una interfaz para reorganizar algunas columnas que fueron diseñadas con CSS Grid. El marcado básico para mis columnas se ve así, y cada columna tiene el atributo `draggable` establecido en `true`.
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+Este es el CSS para mi contenedor y elementos de la caja. Ten en cuenta que el único CSS relacionado con la funcionalidad DnD es la propiedad [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor) El resto del código solo controla el diseño y el estilo del contenedor y los elementos de la caja.
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+En este punto, verás que puedes arrastrar los elementos, pero nada más que eso. Para agregar la funcionalidad DnD, necesitamos usar la API de JavaScript.
+
+## Supervisar eventos de arrastre
+
+Hay varios eventos diferentes a los que se puede adjuntar para supervisar todo el proceso de arrastrar y soltar.
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+Para controlar el flujo de DnD, necesitas un elemento de origen (donde se origina el arrastre), la carga útil de datos (lo que estás tratando de soltar) y un objetivo (un área colocación). El elemento de origen puede ser una imagen, lista, enlace, objeto de archivo, bloque de HTML, etc. El destino es la zona de colocación (o conjunto de zonas de colocación) que acepta los datos que el usuario está intentando eliminar. Ten en cuenta que no todos los elementos pueden ser objetivos, por ejemplo, una imagen no puede ser un objetivo.
+
+## Iniciar y finalizar una secuencia de arrastrar y soltar
+
+Una vez que hayas definido los atributos `draggable="true"` en tu contenido, adjunta un controlador de eventos `dragstart` para iniciar la secuencia DnD para cada columna.
+
+Este código establecerá la opacidad de la columna al 40 % cuando el usuario comience a arrastrarla, y la devolverá al 100 % cuando finalice el evento de arrastre.
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+El resultado se puede ver en la demostración de Glitch a continuación. Al arrastrar un elemento, éste se vuelve opaco. Como el objetivo del evento `dragstart` es el elemento de origen, si estableces `this.style.opacity` al 40 % le mostrarás al usuario una respuesta visual de que el elemento es la selección actual que se está moviendo. Una vez que suelte el elemento, aunque la funcionalidad de soltar no exista, el elemento de origen volverá a tener una opacidad del 100 %.
+
+{% Glitch {id: 'simple-drag-and-drop-1', path: 'style.css'}%}
+
+## Agregar señales visuales adicionales con `dragenter` , `dragover` y `dragleave`
+
+Para ayudar al usuario a comprender cómo interactuar con su interfaz, utiliza los controladores de eventos `dragenter` `dragover` `dragleave` . En este ejemplo, las columnas son objetivos para soltar, además de ser arrastrables. Ayuda al usuario a comprender esto haciendo que el borde sea discontinuo mientras sostenga un elemento arrastrado sobre una columna. Por ejemplo, en tu CSS puedes crear una clase `over` para representar elementos que son objetivos de arrastre:
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+Luego, en tu código JavaScript, configura los controladores de eventos, agrega la clase `over` cuando se arrastre la columna y elimínala cuando finalice. En el `dragend` también nos aseguramos de eliminar las clases al final del arrastre.
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch {id: 'simple-drag-drop2', path: 'dnd.js'}%}
+
+Hay un par de puntos que vale la pena aclarar de este código:
+
+- En el caso de arrastrar algo como un enlace, debes evitar el comportamiento predeterminado del navegador, que es navegar hasta ese enlace. Para hacer esto, llama a `e.preventDefault()` en el evento `dragover`. Hay otra práctica recomendada, que es devolver `false` en ese mismo controlador.
+- El controlador de eventos `dragenter` se usa para alternar la clase `over` en lugar de `dragover`. Si usas `dragover`, la clase CSS se cambiará muchas veces mientras el evento `dragover` continúe activándose al pasar por encima de una columna. En última instancia, eso haría que el renderizador del navegador realizara mucho trabajo innecesario. Mantener los redraws al mínimo es siempre una buena idea. Si necesitas usar el evento `dragover`, considera [limitar o eliminar los rebotes de su detector de eventos](https://css-tricks.com/debouncing-throttling-explained-examples/) .
+
+## Finalizar la función soltar
+
+Para procesar la función de soltar, agrega un monitor de eventos para el evento `drop` En el controlador de `drop`, deberás evitar el comportamiento predeterminado del navegador para la función de soltar, que suele ser algún tipo de redireccionamiento molesto. Puedes evitar que el evento suba por el DOM llamando a `e.stopPropagation()`.
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // stops the browser from redirecting.
+  return false;
+}
+```
+
+Asegúrate de registrar el nuevo controlador entre los demás controladores:
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+Si ahora ejecutas el código, el elemento no se soltará en la nueva ubicación. Para lograr esto, necesitas usar el objeto [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer).
+
+La propiedad `dataTransfer` es donde ocurre toda la magia de DnD. Contiene la pieza de datos enviada en una función de arrastre. `dataTransfer` se establece en el evento `dragstart` y se lee/maneja en el evento soltar. Si llamas a `e.dataTransfer.setData(mimeType, dataPayload)` establecerás el tipo MIME del objeto y la carga útil de datos.
+
+En este ejemplo, permitiremos a los usuarios reorganizar el orden de las columnas. Para hacer eso, primero debe almacenar el HTML del elemento de origen cuando se inicia la acción de arrastrar:
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+En el evento `drop`, se procesa la función "soltar" de la columna, debes establecer el código HTML de la columna de origen al HTML de la columna de destino sobre la que se ha soltado, y primero verifica que el usuario no esté volviendo a soltar en la misma columna desde la que la arrastró.
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+Puedes ver el resultado en la siguiente demostración. Arrastra y suelta la columna A en la parte superior de la columna B y observa cómo cambian de lugar:
+
+{% Glitch {id: 'simple-drag-drop', path: 'dnd.js'}%}
+
+## Más propiedades de arrastre
+
+El objeto `dataTransfer` muestra propiedades para proporcionar información visual al usuario durante el proceso de arrastre. Estas propiedades también se pueden usar para controlar cómo responde cada objetivo de arrastre a un tipo de datos en particular.
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed) restringe qué 'tipo de arrastre' puede realizar el usuario sobre el elemento. Se utiliza en el modelo de procesamiento de arrastrar y soltar para inicializar el `dropEffect` durante los eventos `dragenter` y `dragover`. La propiedad puede tener los siguientes valores: `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` y `uninitialized`.
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect) controla la respuesta que se da al usuario durante los eventos `dragenter` y `dragover`. Cuando el usuario se desplaza sobre un elemento destino, el cursor del navegador indicará qué tipo de operación se llevará a cabo (por ejemplo, una copia, el desplazamiento de un elemento, etc.). El efecto puede adoptar uno de los siguientes valores: `none`, `copy`, `link`, `move`.
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage) significa que en lugar de usar la respuesta predeterminada de 'imagen fantasma' del navegador, opcionalmente puedes establecer un icono de arrastre.
+
+## Carga de archivos con la función de arrastrar y soltar
+
+Este sencillo ejemplo utiliza una columna como origen y destino u objetivo de arrastre. Esto se puede ver en una interfaz de usuario donde se le pide al usuario que reordene los elementos. En algunas situaciones, el destino y el origen de arrastre pueden ser diferentes, como en una interfaz en la que el usuario necesita seleccionar una imagen para que sea la imagen principal de un producto arrastrando la imagen seleccionada a un destino.
+
+La función de arrastrar y soltar se utiliza con frecuencia para permitir a los usuarios arrastrar elementos desde su escritorio a una aplicación. La principal diferencia está en su controlador de `drop`. En lugar de usar `dataTransfer.getData()` para acceder a los archivos, sus datos estarán contenidos en la propiedad `dataTransfer.files`:
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Stops some browsers from redirecting.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Read the File objects in this FileList.
+  }
+}
+```
+
+Podrás encontrar más información al respecto en [Arrastrar y soltar personalizado](/read-files/#select-dnd) .
+
+## Más recursos
+
+- [Especificaciones de Drag and Drop](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [API Drag and Drop HTML MDN](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Cómo hacer un cargador de archivos Drag and Drop con JavaScript estándar](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [Crear un juego de estacionamiento con la API Drag and Drop HTML](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [Cómo utilizar la API Drag and Drop HTML en React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/es/blog/evolving-cls/index.md b/src/site/content/es/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..7e746040257
--- /dev/null
+++ b/src/site/content/es/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: La evolución de la métrica CLS
+subhead: Planes dirigidos a mejorar la métrica CLS para que sea más justa con las páginas de larga duración.
+description: Planes dirigidos a mejorar la métrica CLS para que sea más justa con las páginas de larga duración.
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: Un ejemplo sobre el enfoque en el desarrollo de ventanas para medir cambios en el diseño.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2 de junio de 2021:** La actualización de CLS descrita en esta publicación ya está disponible en todas las apariencias de las herramientas web de Chrome. Consulte [La evolución de Cumulative Layout Shift: Cambio Acumulativo del diseño en las herramientas web](/cls-web-tooling/) para obtener más información. {% endAside %}
+
+Nosotros (el equipo de métricas de velocidad de Chrome) recientemente presentamos nuestra investigación inicial sobre las [opciones para hacer que la métrica CLS sea más justa para las páginas que están abiertas durante mucho tiempo](/better-layout-shift-metric/). Recibimos muchos comentarios muy útiles y, después de completar el análisis a gran escala, finalizamos el cambio que planeamos realizar a la métrica: **Ventana de sesión máxima con un intervalo de 1 segundo, con un límite de 5 segundos**.
+
+¡Siga leyendo para conocer los detalles!
+
+## ¿Cómo evaluamos las opciones?
+
+Revisamos todos los comentarios que recibimos de la comunidad de desarrolladores y los tomamos en cuenta.
+
+También implementamos las [mejores opciones](/better-layout-shift-metric/#best-strategies) en Chrome e hicimos un análisis a gran escala de las métricas en millones de páginas web. Verificamos qué tipos de sitios mejoró cada opción, y cómo se compararon las opciones, especialmente examinando los sitios que fueron calificados de manera diferente por diferentes opciones. En general, encontramos que:
+
+- **Todas** las opciones redujeron la correlación entre el tiempo de permanencia en la página y la puntuación obtenida por el cambio de diseño.
+- **Ninguna** de las opciones produjo una peor puntuación para ninguna de las páginas. Así que no hay que preocuparse de que este cambio empeore las puntuaciones de su sitio.
+
+## Puntos a tomar en cuenta para tomar decisiones
+
+### ¿Por qué una ventana de sesión?
+
+En nuestra [publicación anterior](/better-layout-shift-metric/), cubrimos [algunas estrategias diferentes en el desarrollo de ventanas](/better-layout-shift-metric/#windowing-strategies) para agrupar los cambios de diseño y garantizar que la puntuación no crezca sin límites. Los comentarios que recibimos de los desarrolladores favorecieron abrumadoramente la estrategia de la ventana de sesión porque agrupa los cambios de diseño de forma más intuitiva.
+
+A continuación se muestra un ejemplo para revisar las ventanas de la sesión:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Ejemplo de ventana de sesión.</figcaption></figure>
+
+En el ejemplo anterior, se producen muchos cambios de diseño a lo largo del tiempo mientras el usuario ve la página. Cada uno está representado por una barra azul. Observará que las barras azules tienen diferentes alturas, que representan la [puntuación](/cls/#layout-shift-score) de cada cambio de diseño. Una ventana de sesión comienza con el primer cambio de diseño y continúa expandiéndose hasta que hay un espacio sin cambios de diseño. Cuando se produce el siguiente cambio de diseño, se inicia una nueva ventana de sesión. Dado que hay tres intervalos sin cambios de diseño, hay tres ventanas de sesión en el ejemplo. Al igual que en la definición actual de CLS, las puntuaciones de cada cambio se suman, de modo que la puntuación de cada ventana es la suma de sus cambios de diseño individuales.
+
+Basándonos en la [investigación inicial](/better-layout-shift-metric/#best-strategies), elegimos un intervalo de 1 segundo entre las ventanas de sesión, y ese intervalo funcionó bien en nuestro análisis a gran escala. Por lo tanto, el "intervalo entre sesiones" que se muestra en el ejemplo anterior es de 1 segundo.
+
+### ¿Por qué la ventana de sesión máxima?
+
+En nuestra investigación inicial redujimos las [estrategias de resumen](/better-layout-shift-metric/#summarization) a dos opciones:
+
+- La puntuación **promedio** de todas las ventanas de sesión, para ventanas de sesión muy grandes (ventanas sin límite con intervalos de 5 segundos entre ellas).
+- La puntuación **máxima** de todas las ventanas de sesión, para las ventanas de sesión más pequeñas (con un límite de 5 segundos, con intervalos de 1 segundo entre ellas).
+
+Después de la investigación inicial, agregamos cada métrica a Chrome para poder hacer un análisis a gran escala de millones de URL. En el análisis a gran escala, encontramos muchas URL con patrones de cambio de diseño como este:
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="Ejemplo de un pequeño cambio de diseño que reduce el promedio", width="800", height="550" %}
+
+En la parte inferior derecha, se puede ver que solo hay un único y diminuto cambio de diseño en la Ventana de Sesión 2, lo que le da una puntuación muy baja. Eso significa que la puntuación promedio es bastante baja. ¿Pero qué pasa si el desarrollador arregla ese pequeño cambio de diseño? Entonces la puntuación se calcula únicamente en la Ventana de Sesión 1, lo que significa que la puntuación de la página *casi se duplica*. Sería realmente confuso y desalentador para los desarrolladores mejorar sus cambios de diseño solo para descubrir que la puntuación ha empeorado. Y la eliminación de este pequeño cambio de diseño es, obviamente, ligeramente mejor para la experiencia del usuario, por lo que no debería empeorar la puntuación.
+
+Debido a este problema con los promedios, decidimos seguir adelante con las ventanas máximas más pequeñas y limitadas. Así, en el ejemplo anterior, se ignoraría la Ventana de Sesión 2 y solo se informaría de la suma de los cambios de diseño en la Ventana de Sesión 1.
+
+### ¿Por qué 5 segundos?
+
+Evaluamos varios tamaños de ventana y encontramos dos cosas:
+
+- En el caso de las ventanas cortas, una carga más lenta de la página y una respuesta más lenta a las interacciones del usuario podrían interrumpir los cambios de diseño en varias ventanas y mejorar la puntuación. ¡Queríamos mantener la ventana lo suficientemente grande como para no recompensar las ralentizaciones!
+- Hay algunas páginas con un flujo continuo de pequeños cambios de diseño. Por ejemplo, una página de resultados deportivos que cambia un poco con cada actualización de los resultados. Estos cambios son molestos, pero no se vuelven más molestos con el paso del tiempo. Así que queríamos asegurarnos de que la ventana se limitará a este tipo de cambios de diseño.
+
+Si consideramos estas dos cosas y comparamos una variedad de tamaños de ventana en muchas páginas web del mundo real, llegamos a la conclusión de que 5 segundos sería un buen límite para el tamaño de la ventana.
+
+## ¿Cómo afectará esto a la puntuación CLS de mi página?
+
+Dado que esta actualización limita el CLS de una página, **ninguna página tendrá una peor puntuación** como consecuencia de este cambio.
+
+De acuerdo con nuestro análisis, el **55% de los orígenes no verán ningún cambio en el CLS en el percentil 75**. Esto se debe a que sus páginas actualmente no tienen ningún cambio de diseño o los cambios que tienen se limitan a una sola ventana de sesión.
+
+**Con este cambio, el resto de los orígenes obtendrán mejores puntuaciones en el percentil 75.** La mayoría solo verá una leve mejora, pero alrededor del 3% verá mejorar sus puntuaciones, que pasarán de tener una calificación de "necesita mejorar" o "pobre" a tener una calificación "buena". Estas páginas tienden a utilizar desplazamientos infinitos o tienen muchas actualizaciones lentas en la interfaz del usuario, como se describe en nuestra [publicación anterior](/better-layout-shift-metric/).
+
+## ¿Cómo puedo probarlo?
+
+Pronto actualizaremos nuestras herramientas para que utilicen la nueva definición de la métrica. Hasta entonces, puede probar la versión actualizada de CLS en cualquier sitio que utilice las [implementaciones que se encuentran en el ejemplo de JavaScript](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) o la [bifurcación de la extensión Web Vitals](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+¡Gracias a todos los que se tomaron el tiempo de leer la publicación anterior y dar sus comentarios!
diff --git a/src/site/content/es/blog/fetch-metadata/index.md b/src/site/content/es/blog/fetch-metadata/index.md
new file mode 100644
index 00000000000..3485e5c8f26
--- /dev/null
+++ b/src/site/content/es/blog/fetch-metadata/index.md
@@ -0,0 +1,203 @@
+---
+title: Proteja sus recursos de los ataques web con Fetch Metadata
+subhead: Evite las fugas de información CSRF, XSSI y de origen cruzado.
+authors:
+  - lwe
+date: 2020-06-04
+updated: 2020-06-10
+hero: image/admin/El8ytnIgMDWVzdsglcfv.jpg
+alt: Una captura de pantalla del código Python relacionado con la Política de aislamiento de recursos.
+description: |2
+
+  Fetch Metadata es una nueva función de plataforma web diseñada para permitir que los servidores se protejan de ataques de origen cruzado.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## ¿Por qué debería preocuparse por aislar sus recursos web?
+
+Muchas aplicaciones web son vulnerables a ataques de [origen cruzado](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22), como [falsificación de solicitudes entre sitios](https://portswigger.net/web-security/csrf) (CSRF), [inclusión de scripts entre sitios](https://portswigger.net/research/json-hijacking-for-the-modern-web) (XSSI), ataques de tiempo, [fugas de información de origen cruzado](https://arxiv.org/pdf/1908.02204.pdf) o ataques de canal lateral de ejecución especulativa [(Spectre)](https://developer.chrome.com/blog/meltdown-spectre/).
+
+Los encabezados de solicitud de [Fetch Metadata (obtención de metadatos)](https://www.w3.org/TR/fetch-metadata/) permiten implementar un sólido mecanismo de defensa a profundidad (una política de aislamiento de recursos) para proteger su aplicación contra estos ataques comunes de origen cruzado.
+
+Es usual que los recursos expuestos por una determinada aplicación web solo sean cargados por la propia aplicación y no por otros sitios web. En tales casos, implementar una política de aislamiento de recursos basada en los encabezados de solicitud de obtención de metadatos requiere poco esfuerzo y, al mismo tiempo, protege la aplicación de ataques entre sitios.
+
+## Compatibilidad del navegador {: #compatibility}
+
+Los encabezados de solicitud de obtención de metadatos son compatibles con navegadores a partir de Chrome 76 y en otros navegadores basados en Chromium, y están en desarrollo en Firefox. Consulte [Compatibilidad del navegador](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site#Browser_compatibility) para obtener información actualizada.
+
+## Antecedentes
+
+Muchos ataques entre sitios son posibles porque la web está abierta de forma predeterminada y su servidor de aplicaciones no puede protegerse fácilmente de las comunicaciones que se originan en aplicaciones externas. Un ataque típico de origen cruzado es la falsificación de solicitudes entre sitios (CSRF), en la que un atacante atrae a un usuario a un sitio que controla y luego envía un formulario al servidor en el que el usuario ha iniciado sesión. Dado que el servidor no puede saber si la solicitud se originó en otro dominio (entre sitios) y el navegador adjunta cookies automáticamente a las solicitudes entre sitios, el servidor ejecutará la acción solicitada por el atacante en nombre del usuario.
+
+Otros ataques entre sitios, como la inclusión de scripts entre sitios (XSSI) o las fugas de información de origen cruzado, son de naturaleza similar a la CSRF, y se basan en la carga de recursos de la aplicación de una víctima en un documento controlado por el atacante y en la filtración de información sobre las aplicaciones de la víctima. Dado que las aplicaciones no pueden distinguir fácilmente las solicitudes confiables de las no confiables, no pueden descartar el tráfico malicioso entre sitios.
+
+{% Aside 'gotchas' %} Además de los ataques a los recursos descritos anteriormente, *las referencias a ventanas* también pueden provocar fugas de información de origen cruzado y ataques de Spectre. Puede evitarlos configurando el encabezado de respuesta `Cross-Origin-Opener-Policy` en `same-origin`. {% endAside %}
+
+## Presentamos Fetch Metadata {: #introduction}
+
+Los encabezados de solicitud de obtención de datos son una nueva característica de seguridad de la plataforma web, diseñada para ayudar a los servidores a defenderse de los ataques de origen cruzado. Al proporcionar información sobre el contexto de una solicitud HTTP en un conjunto de encabezados`Sec-Fetch-*`, permiten que el servidor que responde aplique políticas de seguridad antes de procesar la solicitud. Esto da la oportunidad a los desarrolladores de decidir si aceptan o rechazan una solicitud dependiendo de la forma en que se realizó y el contexto en el que se utilizará, lo que hace posible responder solo a solicitudes legítimas realizadas por su propia aplicación.
+
+{% Compare 'better', 'Same-Origin' %} {% CompareCaption %} Las solicitudes que se originen en sitios atendidos por su propio servidor (del mismo origen) seguirán funcionando. {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/aRsy2xULTR4TM2sMMsbQ.png", alt="Una solicitud de recuperación de https: //site.example para el recurso https: //site.example/foo.json en JavaScript hace que el navegador envíe el encabezado de solicitud HTTP 'Sec Fetch-Site: same-origin'. ", width="800 ", height=" 76" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cross-site' %} {% CompareCaption %} El servidor puede rechazar las solicitudes maliciosas entre sitios debido al contexto adicional en la solicitud HTTP proporcionada por los encabezados `Sec-Fetch-*`. {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/xY4yB36JqsVw62wNMIWt.png", alt="Una imagen en https: //evil.example que ha establecido el atributo src de un elemento img en 'https: //site.example/foo. json' hace que el navegador envíe el encabezado de solicitud HTTP' Sec-Fetch-Site: cross-site . ", width="800", height="171" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+### `Sec-Fetch-Site`
+
+`Sec-Fetch-Site` le dice al servidor qué [sitio](/same-site-same-origin) envió la solicitud. El navegador establece este valor en uno de los siguientes:
+
+- `same-origin`, si la solicitud fue realizada por su propia aplicación (p. ej., `site.example`)
+- `same-site`, si la solicitud fue realizada por un subdominio de su sitio (p. ej., `bar.site.example`)
+- `none`, si la solicitud fue causada explícitamente por la interacción de un usuario con el agente de usuario (p. ej., al hacer clic en un marcador)
+- `cross-site`, si la solicitud fue enviada por otro sitio web (p. ej., `evil.example`)
+
+### `Sec-Fetch-Mode`
+
+`Sec-Fetch-Mode` indica el [modo](https://developer.mozilla.org/docs/Web/API/Request/mode) de la solicitud. Esto corresponde aproximadamente al tipo de solicitud y le permite distinguir entre las cargas de recursos y las solicitudes de navegación. Por ejemplo, un destino de `navigate` indica una solicitud de navegación de nivel superior, mientras que `no-cors` indica solicitudes de recursos, como cargar una imagen.
+
+### `Sec-Fetch-Dest`
+
+`Sec-Fetch-Dest` expone el [destino de](https://developer.mozilla.org/docs/Web/API/Request/destination) una solicitud (p. ej., si una etiqueta de `script` o de `img` provocó que el navegador solicitara un recurso).
+
+## Cómo utilizar la obtención de datos para protegerse contra ataques de origen cruzado
+
+La información adicional que brindan estos encabezados de solicitud es bastante simple, pero el contexto adicional le permite construir una lógica de seguridad poderosa en el lado del servidor (también conocida como política de aislamiento de recursos), con solo unas pocas líneas de código.
+
+### Implementación de una política de aislamiento de recursos
+
+Una política de aislamiento de recursos evita que los sitios web externos soliciten sus recursos. El bloqueo de dicho tráfico mitiga las vulnerabilidades web más comunes entre sitios, como CSRF, XSSI, ataques de tiempo y fugas de información de origen cruzado. Esta política se puede habilitar para todos los puntos finales de su aplicación y permitirá todas las solicitudes de recursos provenientes de su propia aplicación, así como navegaciones directas (a través de una solicitud `GET` HTTP). Los puntos finales que se supone deben cargarse en un contexto entre sitios (por ejemplo, puntos finales cargados mediante CORS) pueden excluirse de esta lógica.
+
+#### Paso 1: Permitir solicitudes de navegadores que no envían obtención de metadatos
+
+Dado que no todos los navegadores son compatibles con la obtención de metadatos, debe permitir solicitudes que no establezcan los encabezados `Sec-Fetch-*` comprobando la presencia de `sec-fetch-site`.
+
+{% Aside %} Todos los siguientes ejemplos son código Python. {% endAside %}
+
+```python
+if not req['sec-fetch-site']:
+  return True  # Allow this request
+```
+
+{% Aside 'caution' %} Dado que la obtención de metadatos solo es compatible con navegadores basados en Chromium, debe usarse como una [protección de defensa a profundidad](https://static.googleusercontent.com/media/landing.google.com/en//sre/static/pdf/Building_Secure_and_Reliable_Systems.pdf#page=181) y no como su principal línea de defensa. {% endAside %}
+
+#### Paso 2: Permitir solicitudes same-site e iniciadas por el navegador
+
+Se permitirá cualquier solicitud que no se origine en un contexto de origen cruzado (como `evil.example`). En particular, se trata de solicitudes que:
+
+- Proceden de su propia aplicación (por ejemplo, una solicitud del mismo origen donde `site.example` solicita `site.example/foo.json` siempre se permitirá).
+- Proceden de sus subdominios.
+- Son causadas explícitamente por la interacción de un usuario con el agente de usuario (por ejemplo, navegación directa o al hacer clic en un marcador, etc.).
+
+```python
+if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+  return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} En caso de que sus subdominios no sean completamente confiables, puede hacer que la política sea más estricta bloqueando las solicitudes de los subdominios eliminando el valor `same-site`. {% endAside %}
+
+#### Paso 3: Permitir la navegación y el iframing de nivel superior simples
+
+Para asegurarse de que su sitio aún pueda estar vinculado desde otros sitios, debe permitir una navegación de nivel superior simple (`HTTP GET`).
+
+```python
+if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+  # <object> and <embed> send navigation requests, which we disallow.
+  and req['sec-fetch-dest'] not in ('object', 'embed'):
+    return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} La lógica anterior protege los puntos finales de su aplicación para que no sean utilizados como recursos por otros sitios web, pero permitirá la navegación e incrustación de nivel superior (por ejemplo, la carga en un `<iframe>`). Para mejorar aún más la seguridad, puede usar los encabezados de obtención de metadatos para restringir la navegación entre sitios a solo un conjunto permitido de páginas. {% endAside %}
+
+#### Paso 4: Inhabilitar los puntos finales que están destinados a brindar tráfico entre sitios (opcional)
+
+En algunos casos, su aplicación puede proporcionar recursos que deben cargarse entre sitios. Estos recursos deben estar exentos por ruta o por punto final. Ejemplos de estos puntos finales son:
+
+- Puntos finales destinados a ser accedidos desde el origen cruzado: Si su aplicación está sirviendo puntos finales que están habilitados con `CORS`, debe excluirlos explícitamente del aislamiento de recursos para asegurarse de que las solicitudes entre sitios a estos puntos finales aún sean posibles.
+- Recursos públicos (por ejemplo, imágenes, estilos, etc.): Cualquier recurso público y no autenticado cuya carga deba ser por origen cruzado desde otros sitios también puede quedar exento.
+
+```python
+if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+  return True
+```
+
+{% Aside 'caution' %} Antes de excluir partes de su aplicación de estas restricciones de seguridad, asegúrese de que sean estáticas y no contengan información confidencial del usuario. {% endAside %}
+
+#### Paso 5: Rechazar todas las demás solicitudes que sean entre sitios y no de navegación
+
+Esta Política de aislamiento de recursos rechazará cualquier otra **solicitud entre sitios** y, por lo tanto, protegerá su aplicación de los ataques comunes entre sitios.
+
+{% Aside 'gotchas' %} De forma predeterminada, las solicitudes que infrinjan su política deben rechazarse con una respuesta `HTTP 403`. Sin embargo, dependiendo de su caso de uso, también puede considerar otras acciones, como:
+
+- **Registrar solo violaciones**. Esto es especialmente útil cuando se prueba la compatibilidad de la política y se encuentran puntos finales que podrían necesitar ser excluidos.
+- **Modificar la solicitud**. En ciertos escenarios, considere realizar otras acciones como redirigir a su página de destino y eliminar las credenciales de autenticación (por ejemplo, cookies). Sin embargo, tenga en cuenta que esto podría debilitar las protecciones de una política basada en la obtención de metadatos. {% endAside %}
+
+**Ejemplo:** el siguiente código demuestra una implementación completa de una política de aislamiento de recursos sólida en el servidor o como un middleware, para denegar solicitudes de recursos entre sitios potencialmente maliciosos, al tiempo que permite solicitudes de navegación simples:
+
+```python
+# Reject cross-origin requests to protect from CSRF, XSSI, and other bugs
+def allow_request(req):
+  # Allow requests from browsers which don't send Fetch Metadata
+  if not req['sec-fetch-site']:
+    return True
+
+  # Allow same-site and browser-initiated requests
+  if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+    return True
+
+  # Allow simple top-level navigations except <object> and <embed>
+  if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+    and req['sec-fetch-dest'] not in ('object', 'embed'):
+      return True
+
+  # [OPTIONAL] Exempt paths/endpoints meant to be served cross-origin.
+  if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+    return True
+
+  # Reject all other requests that are cross-site and not navigational
+  return False
+```
+
+### Implementar una política de aislamiento de recursos
+
+1. Instale un módulo como el fragmento de código de arriba para registrar y monitorear cómo se comporta su sitio y asegurarse de que las restricciones no afecten al tráfico legítimo.
+2. Solucione las posibles violaciones eximiendo los puntos finales de origen cruzado legítimos.
+3. Haga cumplir la política descartando las solicitudes que no cumplen con esta.
+
+### Identificar y corregir violaciones de políticas
+
+Se recomienda que pruebe su política sin efectos secundarios habilitándola primero en modo de informes en su código del lado del servidor. Alternativamente, puede implementar esta lógica en middleware o en un proxy inverso que registra cualquier violación que su política pueda producir cuando se aplica al tráfico de producción.
+
+Según nuestra experiencia en la implementación de una Política de aislamiento de recursos de obtención de metadatos en Google, la mayoría de las aplicaciones son compatibles de forma predeterminada con dicha política y rara vez requieren la exención de puntos finales para permitir el tráfico entre sitios.
+
+### Hace cumplir una política de aislamiento de recursos
+
+Una vez que haya verificado que su política no afecta el tráfico de producción legítimo, estará listo para hacer cumplir las restricciones, garantizando que otros sitios no podrán solicitar sus recursos y protegiendo a sus usuarios de ataques entre sitios.
+
+{% Aside 'caution' %} Asegúrese de rechazar las solicitudes no válidas antes de ejecutar comprobaciones de autenticación o cualquier otro procesamiento de la solicitud para evitar revelar información confidencial de tiempos. {% endAside %}
+
+## Artículos relacionados
+
+- [Especificación de encabezados de solicitud de obtención de metadatos del W3C](https://www.w3.org/TR/fetch-metadata/)
+- [Playground de obtención de metadatos](https://secmetadata.appspot.com/)
+- [Charla de Google I/O: Protección de aplicaciones web con funciones de plataforma modernas](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf) (diapositivas)
+
+{% YouTube id='DDtM9caQ97I', startTime='1856'%}
diff --git a/src/site/content/es/blog/floc/index.md b/src/site/content/es/blog/floc/index.md
new file mode 100644
index 00000000000..0b40d031f9d
--- /dev/null
+++ b/src/site/content/es/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: "¿Qué es FLoC?"
+subhead: FLoC permite la selección de anuncios sin compartir el comportamiento de navegación de usuarios individuales.
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: Murmuración de estorninos sobre Brighton Pier
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} Esta publicación describe el diseño de API implementado en Chrome para la primera prueba de origen de FLoC.
+
+Actualmente se están desarrollando iteraciones futuras de una API para permitir la publicidad basada en intereses sin cookies de terceros u otros mecanismos de seguimiento entre sitios. {% endAside %}
+
+FLoC proporciona un mecanismo de preservación de la privacidad para la selección de anuncios basados en intereses.
+
+A medida que un usuario se mueve por la web, su navegador utiliza el algoritmo FLoC para calcular su "cohorte de interés", que será la misma para miles de navegadores con un historial similar reciente de navegación. El navegador recalcula su cohorte periódicamente, en el dispositivo del usuario, sin compartir datos de navegación individuales con el proveedor del navegador ni con nadie más.
+
+{% Aside %} Durante la prueba inicial de FLoC, una visita a la página solo se incluía en el cálculo de FLoC del navegador por una de dos siguientes razones:
+
+- El (`document.interestCohort()`) de la API de FLoC era usado en la página.
+- Chrome detecta que la página [cargaba anuncios o recursos relacionados con anuncios](https://github.com/WICG/floc/issues/82).
+
+Para otros algoritmos de agrupamiento, la prueba puede experimentar con diferentes criterios de inclusión: eso es parte del proceso de la prueba de ensayo de origen.
+
+La prueba de origen para la versión inicial de FLoC, se ejecuto desde Chrome 89 hasta Chrome 91, [actualmente se encuentra finalizada](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+Los anunciantes (sitios que pagan por anuncios) pueden incluir código en sus propios sitios web para recopilar y proporcionar datos de cohortes a sus plataformas de adtech (empresas que proporcionan software y herramientas para entregar publicidad). Por ejemplo, una plataforma de tecnología publicitaria podría aprender de una tienda de zapatos en línea que los navegadores de las cohortes 1101 y 1354 parecen interesados en el equipo de senderismo de la tienda. De otros anunciantes, la plataforma adtech aprende sobre otros intereses de esas cohortes.
+
+Posteriormente, la plataforma publicitaria puede usar estos datos para seleccionar anuncios relevantes (como un anuncio de calzado de montaña de la zapatería) cuando un navegador de una de esas cohortes solicita una página de un sitio que muestra anuncios, como un sitio web de noticias.
+
+Privacy Sandbox es una serie de propuestas para satisfacer casos de uso de terceros sin la necesidad de las cookies de terceros u otros mecanismos de seguimiento. Consulta [Profundizando sobre la Privacy Sandbox](/digging-into-the-privacy-sandbox) para obtener una descripción general de todas las propuestas.
+
+**Esta propuesta necesita de tu retroalimentación.** Si tienes comentarios, [crea un problema](https://github.com/WICG/floc/issues/new) en el repositorio de [FLoC Explainer.](https://github.com/WICG/floc) Si tienes comentarios sobre el experimento de Chrome con esta propuesta, publica una respuesta en [Intent to Experiment (Intención de experimentar)](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs).
+
+## ¿Por qué necesitamos FLoC?
+
+Muchas empresas confían en la publicidad para dirigir el tráfico a sus sitios y muchos sitios web de editores financian el contenido vendiendo inventario publicitario. En general, las personas prefieren ver anuncios que sean relevantes y útiles para ellos, mientras que los anuncios relevantes también brindan más negocios a los anunciantes y [más ingresos a los sitios web que los alojan](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf). En otras palabras, el espacio publicitario es más valioso cuando muestra anuncios relevantes. Por lo tanto, la selección de anuncios relevantes aumenta los ingresos de los sitios web con publicidad. Eso, a su vez, significa que los anuncios relevantes ayudan a financiar la creación de contenido que beneficia a los usuarios.
+
+Sin embargo, las personas están preocupadas por las implicaciones de privacidad de la publicidad personalizada ya que actualmente se basa en técnicas como las cookies de seguimiento y la toma de huellas digitales del dispositivo, que pueden revelar tu historial de navegación entre los sitios a los anunciantes o plataformas publicitarias. La propuesta de FLoC tiene como objetivo permitir la selección de anuncios de una manera que proteja mejor la privacidad.
+
+## ¿Para qué se puede utilizar FLoC?
+
+- Mostrar anuncios a personas cuyos navegadores pertenecen a una cohorte que se ha observado que visita con frecuencia el sitio de un anunciante o muestra interés en temas relevantes.
+- Utilizar modelos de aprendizaje automático (machine learning) para predecir la probabilidad de que un usuario se convierta en función de su cohorte, a fin de informar el comportamiento de las ofertas de subastas de anuncios.
+- Recomendar contenido a los usuarios. Por ejemplo, supongamos que un sitio de noticias observa que tu página de podcasts deportivos se ha vuelto especialmente popular entre los visitantes de las cohortes 1234 y 7. Estos pueden recomendar ese contenido a otros visitantes de esas cohortes.
+
+## ¿Cómo funciona FLoC?
+
+El siguiente ejemplo describe las diferentes funciones en la selección de un anuncio mediante FLoC.
+
+- El **anunciante** (una empresa que paga la publicidad) en este ejemplo es un minorista de calzado en línea:<br> **<u>shoestore.example</u>**
+
+- El **editor** (un sitio que vende espacio publicitario) en este ejemplo es un sitio de noticias:<br> **<u>dailynews.example</u>**
+
+- La **plataforma adtech** (que proporciona software y herramientas para entregar publicidad) es:<br> **<u>adnetwork.example</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="Diagrama que muestra, paso a paso, las diferentes funciones en la selección y publicación de un anuncio con FLoC: servicio FLoC, navegador, anunciantes, editor (para observar las cohortes), adtech, editor (para mostrar anuncios)", width="800", height="359" %}
+
+En este ejemplo, hemos llamado a los usuarios **Yoshi** y **Alex**. Inicialmente, sus navegadores pertenecen a la misma cohorte de 1354.
+
+{% Aside %} Hemos llamado a los usuarios aquí Yoshi y Alex, pero esto es solo para el propósito del ejemplo. Los nombres y las identidades individuales no se revelan al anunciante, editor o plataforma de adtech con FLoC.
+
+No pienses en una cohorte como una colección de personas. En su lugar, piensa que una cohorte es como una agrupación de actividad de navegación. {% endAside %}
+
+### 1. Servicio FLoC
+
+1. El servicio FLoC utilizado por el navegador crea un modelo matemático con miles de "cohortes", cada una de las cuales corresponderá a miles de navegadores web con historiales recientes de navegación similares. A [continuación](#floc-server) aprenderás más sobre cómo funciona esto.
+2. A cada cohorte se le asigna un número.
+
+### 2. Navegador
+
+1. Desde el servicio FLoC, el navegador de Yoshi obtiene datos que describen el modelo FLoC.
+2. El navegador de Yoshi calcula su cohorte [utilizando el algoritmo del modelo FLoC](#floc-algorithm) para calcular qué cohorte corresponde de manera más similar a su propio historial de navegación. En este ejemplo, esa será la cohorte de 1354. Ten en cuenta que el navegador de Yoshi no comparte ningún dato con el servicio FLoC.
+3. De la misma manera, el navegador de Alex calcula su ID de cohorte. El historial de navegación de Alex es diferente al de Yoshi, pero lo suficientemente similar como para que sus navegadores pertenezcan a la cohorte de 1354.
+
+### 3. Anunciante: <span style="font-weight:normal">shoestore.example</span>
+
+1. Yoshi visita la tienda de <u>shoestore.example</u>.
+2. El sitio le pregunta al navegador de Yoshi su cohorte: 1354.
+3. Yoshi mira el calzado de montaña.
+4. El sitio registra que un navegador de la cohorte 1354 mostró interés en las botas de montaña.
+5. Posteriormente, el sitio registra un interés adicional en sus productos de la cohorte 1354, así como de otras cohortes.
+6. El sitio periódicamente agrega y comparte información sobre cohortes e intereses de productos con su plataforma adtech <u>adnetwork.example</u>.
+
+Ahora es el turno de Alex.
+
+### 4. Editor: <span style="font-weight:normal">dailynews.example</span>
+
+1. Alex visita <u>dailynews.example</u>.
+2. El sitio le pregunta al navegador de Alex cuál es su cohorte.
+3. Luego, el sitio solicita un anuncio a su plataforma adtech, <u>adnetwork.example</u>, incluida la cohorte del navegador de Alex: 1354.
+
+### 5. Plataforma de <span style="font-weight:normal">Adtech: adnetwork.example</span>
+
+1. <u>adnetwork.example</u> puede seleccionar un anuncio adecuado para Alex combinando los datos que tiene del editor <u>dailynews.example</u> y la <u>shoestore.example</u> del anunciante.
+
+- La cohorte del navegador de Alex (1354) es proporcionada por <u>dailynews.example</u>.
+- Datos sobre cohortes e intereses de productos de la <u>shoestore.example</u>. Ejemplo: "Los navegadores de la cohorte 1354 podrían estar interesados en calzado de montaña".
+
+1. <u>adnetwork.example</u> selecciona un anuncio apropiado para Alex: un anuncio de botas de montaña en <u>shoestore.example</u>.
+2. <u>dailynews.example</u> muestra el anuncio 🥾.
+
+{% Aside %} Los enfoques actuales para la selección de anuncios se basan en técnicas como las cookies de seguimiento y la toma de huellas digitales del dispositivo, que son utilizadas por terceros, como los anunciantes, para rastrear el comportamiento de navegación individual.
+
+Con FLoC, el navegador **no comparte** tu historial de navegación con el servicio FLoC ni con nadie más. El navegador, en el dispositivo del usuario, determina a qué grupo pertenece. El historial de navegación del usuario nunca abandona el dispositivo. {% endAside %}
+
+## ¿Quién ejecuta el servicio de back-end que crea el modelo FLoC?
+
+Cada proveedor de navegadores deberá tomar su propia decisión sobre cómo agrupar los navegadores en cohortes. Chrome está ejecutando su propio servicio FLoC; otros navegadores podrían optar por implementar FLoC con un enfoque de agrupación en clúster diferente y ejecutarían su propio servicio para hacerlo.
+
+## ¿Cómo permite el servicio FLoC que el navegador calcule tu cohorte? {: #floc-server }
+
+1. El servicio FLoC utilizado por el navegador crea una representación matemática multidimensional de todos los posibles historiales de navegación web. A este modelo lo llamaremos "espacio de cohortes".
+2. El servicio divide este espacio en miles de segmentos. Cada segmento representa un grupo de miles de historias de navegación similares. Estas agrupaciones no se basan en conocer ningún historial de navegación real; se basan simplemente en elegir centros aleatorios en "espacio de cohorte" o en cortar el espacio con líneas aleatorias.
+3. A cada segmento se le asigna un número de cohorte.
+4. El navegador web obtiene estos datos que describen el "espacio de cohorte" de su servicio FLoC.
+5. A medida que un usuario se desplaza por la web, su navegador [utiliza un algoritmo](#floc-algorithm) para calcular periódicamente la región en el "espacio de cohorte" que corresponde más estrechamente con su propio historial de navegación.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="Diagrama del 'espacio del historial de navegación' creado por un servidor FLoC, que muestra varios segmentos, cada uno con un número de cohorte.", width="400", height="359" %} <figcaption> El servicio FLoC divide el "espacio de cohortes" en miles de segmentos (aquí solo se muestran algunos).</figcaption></figure>
+
+{% Aside %} En ningún momento de este proceso se comparte el historial de navegación del usuario con el servicio FLoC o con un tercero. La cohorte del navegador es calculada por el navegador, en el dispositivo del usuario. El servicio FLoC no adquiere ni almacena datos del usuario. {% endAside %}
+
+## ¿Puede cambiar la cohorte de un navegador?
+
+¡*Sí*! ¡La cohorte de un navegador definitivamente puede cambiar! Probablemente no visites los mismos sitios web todas las semanas, y la cohorte de tu navegador lo reflejará.
+
+Una cohorte representa un grupo de actividad de navegación, no una colección de personas. Las características de actividad de una cohorte son generalmente consistentes a lo largo del tiempo, y las cohortes son útiles para la selección de anuncios porque agrupan comportamientos similares de navegación recientes. Los navegadores de las personas individuales entrarán y saldrán de una cohorte a medida que cambie su comportamiento de navegación. Inicialmente, esperamos que el navegador vuelva a calcular su cohorte cada siete días.
+
+En el ejemplo anterior, la cohorte del navegador de Yoshi y Alex es 1354. En el futuro, el navegador de Yoshi y el navegador de Alex pueden pasar a una cohorte diferente si cambian sus intereses. En el siguiente ejemplo, el navegador de Yoshi se mueve a la cohorte 1101 y el navegador de Alex se mueve a la cohorte 1378. Los navegadores de otras personas entrarán y saldrán de las cohortes a medida que cambien sus intereses de navegación.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="Diagrama del 'espacio del historial de navegación' creado por un servidor FLoC, el cual muestra múltiples segmentos, cada uno con un número de cohorte. El diagrama muestra los navegadores que pertenecen a los usuarios pertenecientes a un número de cohorte. Esto muestra a los navegadores de Yoshi y de Alex pasando de una cohorte a otra a medida que sus intereses de navegación cambian con el tiempo.", width="800", height="533" %} <figcaption> Las cohortes de los navegadores de Yoshi y Alex pueden cambiar si cambian sus intereses.</figcaption></figure>
+
+{% Aside %} Una cohorte define un grupo de actividad de navegación, no un grupo de personas. Los navegadores entrarán y saldrán de una cohorte a medida que cambie su actividad. {% endAside %}
+
+## ¿Cómo calcula el navegador su cohorte? {: #floc-algorithm }
+
+Como se describió anteriormente, el navegador del usuario obtiene datos de su servicio FLoC que describe el modelo matemático para cohortes: un espacio multidimensional que representa la actividad de navegación de todos los usuarios. A continuación, el navegador utiliza un algoritmo para determinar qué región de este "espacio de cohorte" (es decir, cuál cohorte) coincide más con su propio comportamiento de navegación reciente.
+
+## ¿Cómo calcula FLoC el tamaño correcto de cohorte?
+
+Habrá miles de navegadores en cada cohorte.
+
+Un tamaño de cohorte más pequeño puede ser más útil para personalizar anuncios, pero es menos probable que detenga el seguimiento de los usuarios, y viceversa. Un mecanismo para asignar navegadores a cohortes debe hacer un intercambio entre la privacidad y utilidad. Privacy Sandbox utiliza el [k-anonymity](https://en.wikipedia.org/wiki/K-anonymity) para permitir que un usuario "se esconda entre la multitud". Una cohorte es k-anónima si es compartida por al menos k usuarios. Cuanto mayor sea el número k, mayor será la privacidad de la cohorte.
+
+## ¿Se puede utilizar FLoC para agrupar personas en función de categorías delicadas?
+
+El algoritmo de agrupación utilizado para construir el modelo de cohorte FLoC está diseñado para evaluar si una cohorte puede estar correlacionada con categorías sensibles, sin saber por qué una categoría es sensible. Se bloquearán las cohortes que puedan revelar categorías sensibles como raza, sexualidad o historial médico. En otras palabras, al calcular su cohorte, el navegador solo elegirá entre cohortes que no revelarán categorías sensibles.
+
+## ¿FLoC es solo otra forma de categorizar a las personas en línea?
+
+Con FLoC, el navegador de un usuario pertenecerá a una de las miles de cohortes, junto con miles de navegadores de otros usuarios. A diferencia de las cookies de terceros y otros mecanismos de focalización, FLoC solo revela la cohorte en la que se encuentra el navegador de un usuario, y no una identificación de usuario individual. No permite a otros distinguir a un individuo dentro de una cohorte. Además, la información sobre la actividad de navegación que se utiliza para determinar la cohorte de un navegador se mantiene local en el navegador o dispositivo y no se carga en ningún otro lugar. El navegador puede aprovechar aún más otros métodos de anonimización, como la [privacidad diferencial](https://en.wikipedia.org/wiki/Differential_privacy).
+
+## ¿Los sitios web tienen que participar y compartir información?
+
+Los sitios web tendrán la capacidad de optar por entrar o salir de FLoC, por lo que los sitios sobre temas delicados podrán evitar que las visitas a su sitio se incluyan en el cálculo de FLoC. Como protección adicional, el análisis del servicio FLoC evaluará si una cohorte puede revelar información sensible sobre los usuarios sin saber por qué esa cohorte es sensible. Si una cohorte puede representar un número mayor de lo habitual de personas que visitan sitios en una categoría sensible, esa cohorte completa se elimina. Los estados financieros negativos y la salud mental se encuentran entre las categorías sensibles cubiertas por este análisis.
+
+Los sitios web [pueden excluir una página del cálculo de FLoC](https://github.com/WICG/floc#opting-out-of-computation) configurando una cabecera de [Política de permisos](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) de `interest-cohort=()` para esa página. Para las páginas que no se han excluido, se incluirá una visita de página en el cálculo de FLoC del navegador si `document.interestCohort()` está presente en la página. Durante la actual [prueba de origen de FLoC](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561), también se incluirá la página en el cálculo si Chrome detecta que la página [carga anuncios o recursos relacionados con anuncios](https://github.com/WICG/floc/issues/82). (El [etiquetado de anuncios en Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md) explica cómo funciona el mecanismo de detección de anuncios de Chrome).
+
+Las páginas servidas desde direcciones IP privadas, como páginas de intranet, no serán parte del cálculo de FLoC.
+
+## ¿Cómo funciona la API de JavaScript de FLoC?
+
+{% Aside %} La prueba de origen para la versión inicial de FLoC, se ejecuto desde Chrome 89 hasta Chrome 91, [actualmente se encuentra finalizada](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+La API de FLoC es muy simple: solo un método único que devuelve una promesa que se resuelve en un objeto que proporciona el `id` de la cohorte y la `version`:
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+Los datos disponibles de la cohorte se ven así:
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+El valor de `version` permite a los sitios que utilizan FLoC saber a qué navegador y a qué modelo de FLoC se refiere la ID de cohorte. Como se describe a continuación, la promesa devuelta por `document.interestCohort()` se rechazará para cualquier marco al que no se le permita el permiso de `interest-cohort`.
+
+## ¿Pueden los sitios web optar por no ser incluidos en el cálculo de FLoC?
+
+La política de permiso de `interest-cohort` permite a un sitio declarar que no desea ser incluido en la lista de sitios del usuario para el cálculo de cohortes. La política estará en `allow` de forma predeterminada. La promesa devuelta por `document.interestCohort()` se rechazará para cualquier marco que no tenga el permiso de `interest-cohort`. Si el marco principal no tiene el permiso de `interest-cohort`, la visita a la página no se incluirá en el cálculo de la cohorte de intereses.
+
+Por ejemplo, un sitio puede optar por no participar en todos los cálculos de cohortes de FLoC enviando la siguiente cabecera de respuesta HTTP:
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## ¿Puede un usuario evitar que los sitios obtengan la cohorte FLoC de su navegador?
+
+Si un usuario deshabilita el Privacy Sandbox en `chrome://settings/privacySandbox`, el navegador no proporcionará la cohorte del usuario cuando se le pregunté mediante JavaScript. Por lo tanto, la promesa de `document.interestCohort()` se rechazará.
+
+## ¿Cómo puedo hacer sugerencias o proporcionar retroalimentación?
+
+Si tienes comentarios sobre la API, [crea un problema](https://github.com/WICG/floc/issues/new) en el repositorio de [FLoC Explainer](https://github.com/WICG/floc).
+
+## Para saber más
+
+- [Profundizando la Privacy Sandbox](/digging-into-the-privacy-sandbox/)
+- [Explicador de FLoC](https://github.com/WICG/floc)
+- [Agrupación y prueba del origen de FLoC](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+- [Evaluación de algoritmos de cohorte para la API de FLoC](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+Foto de [Rhys Kentish](https://unsplash.com/@rhyskentish) en [Unsplash](https://unsplash.com/photos/I5AYxsxSuVA).
diff --git a/src/site/content/es/blog/goibibo/index.md b/src/site/content/es/blog/goibibo/index.md
new file mode 100644
index 00000000000..4f2319065db
--- /dev/null
+++ b/src/site/content/es/blog/goibibo/index.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Cómo la PWA de Goibibo mejoró las conversiones en un 60%
+subhead: Cerrando la brecha entre la web y las experiencias de iOS y Android para deleitar a los usuarios.
+date: 2020-09-29
+hero: image/admin/373gEGS1WasAvqbvVoH9.png
+thumbnail: image/admin/i2nyfqyVr4XWqilOxPrY.png
+alt: Una ilustración de un teléfono inteligente junto al texto "Escala en la web"
+description: Descubre cómo Goibibo, la principal empresa de viajes en línea de la India, logró un aumento del 60% en conversiones mediante la creación de experiencias de usuario fiables entre sus aplicaciones PWA y las de iOS y Android.
+tags:
+  - blog
+  - case-study
+  - capabilities
+  - progressive-web-apps
+  - scale-on-web
+---
+
+[Goibibo](https://goibibo.com) es el principal portal de reservas de viajes en línea de la India. Al crear una [aplicación web progresiva (PWA)](/pwa) confiable y con todas las funciones que coincidía con las capacidades de sus aplicaciones iOS y Android, Goibibo logró un aumento del 60% en las conversiones (en comparación con su flujo web anterior).
+
+<div class="stats">
+  <div class="stats__item">
+    <p class="stats__figure">60 <sub>%</sub></p>
+    <p>Incremento de conversiones</p>
+  </div>
+  <div class="stats__item">
+    <p class="stats__figure">20 <sub>%</sub></p>
+    <p>Aumento de usuarios registrados</p>
+  </div>
+</div>
+
+## Destacando la oportunidad {: #opportunity }
+
+En su viaje para mejorar la experiencia del usuario, Goibibo notó algunas tendencias:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0dmwrJViuhgA3I4IDCkj.png", alt="PWA de Goibibo.", width="800", height="1624" %}</figure>
+
+- Dado que los usuarios ya cambiaron o están cambiando rápidamente a dispositivos móviles, su estrategia inicial hacia la web móvil fue construir una aplicación liviana y funcional. Esto funcionó, con conversiones de páginas de búsqueda a detalles que se igualaron en la web y en iOS y Android, pero las aplicaciones de iOS y Android ganaron en todos los pasos posteriores del embudo de conversión.
+
+- Hubo caídas significativas en la etapa de pago de la PWA en comparación con sus aplicaciones de iOS y Android. Fue entonces cuando decidieron invertir en su PWA con el objetivo de permitir que los usuarios experimentaran la misma UX en su PWA que en sus aplicaciones de iOS y Android.
+
+- También notaron que casi el 20% de sus usuarios estaban iniciando una sesión en la web y convirtiendo en la aplicación. Esto reiteró su creencia de que una gran parte de los usuarios quedará sin explotar sin una estrategia de aplicación PWA de iOS y Android alineada.
+
+## Las herramientas que usaron {: #tools }
+
+### API de Contact Picker {: #contact-picker }
+
+<div class="switcher">
+  <p>Casi el 15% de los usuarios registrados en Goibibo hacen reservas para familiares o amigos en la web móvil. Goibibo usó la <a href="/contact-picker/">API de Contact Picker (Selector de contactos)</a> para permitir a los usuarios de la PWA completar formularios en nombre de otros sin problemas.</p>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Pdqx8qyXbwzzS8ivNS3l.png", alt="Impacto: el 20% de los usuarios eligieron la experiencia perfecta de Goibibo.", width="800", height="360" %}</figure>
+</div>
+
+### WebOTP {: #web-otp }
+
+<div class="switcher">
+  <p>Debido a que la autenticación segura es un gran desafío en la India, Goibibo utilizó la <a href="/web-otp/">API de WebOTP (contraseña de un solo uso)</a> para reducir la fricción de inicio de sesión en su PWA.</p>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Nf0NeE3sSFOrYleAsxVd.png", alt="Impacto: aumento del 20% en los usuarios que han iniciado sesión en la web móvil; disminución del 25% en las llamadas a la API de reintentos de OTP durante el registro.", width="800", height="526" %}</figure>
+</div>
+
+### API de Web Share {: #web-share }
+
+<div class="switcher">
+  <p>Para cerrar la brecha entre su experiencia web y de iOS y Android, Goibibo adoptó la <a href="/web-share/">API de Web Share</a> para facilitar el intercambio de enlaces, texto o archivos sobre los detalles del hotel, la disponibilidad de trenes, etc.</p>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u5pl2i6MHBkDZESQRHXR.png", alt="Impacto: el 5% de las nuevas sesiones provienen de la API de Web Share.", width="800", height="356" %}</figure>
+</div>
+
+### Notificaciones push {: #notifications}
+
+<div class="switcher">
+  <p>Goibibo usó <a href="https://developers.google.com/web/fundamentals/push-notifications">notificaciones push web</a> para reorientar a los usuarios rebotados con actualizaciones relevantes como alertas de tarifas de vuelos y otro contenido personalizado.</p>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/baFHO5RXsOVdE6qiT0AR.png", alt="Impacto: Los usuarios reorientados se convirtieron 4 veces más en comparación con la base de usuarios normal.", width="800", height="414" %}</figure>
+</div>
+
+## Cómo las nuevas capacidades web mejoraron el embudo de Goibibo {: #funnel}
+
+&lt;style&gt; @media (min-width: 865px) { #funnel { max-width: 75%; } } &lt;/style&gt;
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rsENPcTITCviudxIhPU1.png", alt="1. Web Share mejoró el porcentaje de usuarios recurrentes 2. Contact Picker mejoró la experiencia del usuario, lo que facilita la reserva de los clientes 3. WebOTP redujo la fricción durante las transacciones, lo que resulta en menos tiempo dedicado a la pantalla OTP y menos reintentos de llamadas a la API 4. Las notificaciones push mejoraron las conversiones de los usuarios reorientados", width="711", height="627" %}</figure>
+
+## Resultados comerciales generales {: #results }
+
+- Las iteraciones en las interfaces de PWA dieron como resultado un aumento del 60% en la tasa de conversión (en comparación con el flujo web móvil anterior) y deleitaron a los usuarios.
+- [Las nuevas capacidades web](https://developer.chrome.com/blog/fugu-status/) mejoraron la UX y provocaron un aumento del 20% en los usuarios registrados (que se convierten 6 veces más).
+
+<blockquote>
+  <p style="font-style: italic; font-size: 1.5rem;">Siempre nos esforzamos por lograr una experiencia de usuario perfecta y, a su vez, mejores tasas de conversión. Vimos una mayor participación del usuario y mejores tasas de conversión en el PWA que en el flujo web móvil original. Por lo tanto, invertir en una PWA es fundamental para nuestro éxito y, si no lo hubiéramos hecho, nos habría costado una fortuna.</p>
+  <cite>Rithish Saralaya, vicepresidente de ingeniería, Goibibo</cite>
+</blockquote>
+
+Consulta la [página de estudios de casos de Scale on web](/tags/scale-on-web) para obtener más historias de éxito de la India y el sudeste asiático.
diff --git a/src/site/content/es/blog/hands-on-portals/index.md b/src/site/content/es/blog/hands-on-portals/index.md
new file mode 100644
index 00000000000..0d96f78040f
--- /dev/null
+++ b/src/site/content/es/blog/hands-on-portals/index.md
@@ -0,0 +1,255 @@
+---
+title: 'Aprendiendo Portals: navegación perfecta en la web'
+subhead: |2-
+
+  Descubre cómo la propuesta de la API de Portals puede mejorar tu experiencia de usuario en la navegación.
+date: 2019-05-06
+updated: 2021-02-15
+authors:
+  - uskay
+hero: image/admin/7hJbSWnhhE1lRVHJOWI9.png
+alt: Un logo de Portals
+description: |2-
+
+  La recientemente propuesta API de Portals ayuda a mantener tu interfaz simple, al mismo tiempo que permite una navegación fluida con transiciones personalizadas. En este artículo, obtendrás experiencia práctica con Portals para mejorar la experiencia del usuario en tu sitio.
+tags:
+  - blog
+  - ux
+feedback:
+  - api
+---
+
+Asegurarse de que tus páginas se carguen rápidamente es clave para ofrecer una buena experiencia de usuario. Pero un área que a menudo pasamos por alto son las transiciones de página: lo que ven nuestros usuarios cuando se mueven de una página a otra.
+
+Una nueva propuesta de API de la plataforma web llamada [Portals](https://github.com/WICG/portals) tiene como objetivo ayudar con esto simplificando la experiencia a medida que los usuarios navegan *por* tu sitio.
+
+Mira a Portals en acción:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_vp9.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_h264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Incrustaciones y navegación sin problemas con Portals. Creado por <a href="https://twitter.com/argyleink">Adam Argyle</a>.</figcaption></figure>
+
+## Qué habilita Portals
+
+Las aplicaciones de página única (SPA) ofrecen buenas transiciones, pero tienen el costo de una mayor complejidad de construcción. Las aplicaciones de varias páginas (MPA) son mucho más fáciles de crear, pero terminas con pantallas en blanco entre las páginas.
+
+Portals ofrece lo mejor de ambos mundos: la baja complejidad de un MPA con las transiciones fluidas de un SPA. Piensa en ellos como un `<iframe>` en el sentido de que permiten la incrustación, pero a diferencia de un `<iframe>`, también vienen con funciones para navegar a tu contenido.
+
+Ver para creer: primero comprueba lo que mostramos en Chrome Dev Summit 2018:
+
+{% YouTube id='Ai4aZ9Jbsys', startTime='1081' %}
+
+Con las navegaciones clásicas, los usuarios tienen que esperar en una pantalla en blanco hasta que el navegador termine de renderizar el destino. Con Portals, los usuarios pueden experimentar una animación, mientras que el `<portal>` pre-renderiza el contenido y crea una experiencia de navegación perfecta.
+
+Antes de Portals, podríamos haber renderizado otra página usando un `<iframe>`. También podríamos haber agregado animaciones para mover el marco por la página. Pero un `<iframe>` no te permitirá navegar por tu contenido. Los Portals cierran esta brecha, permitiendo casos de uso interesantes.
+
+## Prueba Portals
+
+### Habilitación a través de about://flags {: #enable-flags }
+
+Prueba Portals en Chrome 85 y versiones posteriores habilitando una bandera experimental:
+
+- Habilita la bandera de `about://flags/#enable-portals` para navegaciones del mismo origen.
+- Para probar navegaciones de origen cruzado, también habilita la bandera de `about://flags/#enable-portals-cross-origin`.
+
+Durante esta fase inicial del experimento de Portals, también recomendamos usar un directorio de datos de usuario completamente separado para tus pruebas configurando la bandera de línea de comando [`--user-data-dir`](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#command-line). Una vez que Portals esté habilitado, confirma en DevTools que tienes el nuevo `HTMLPortalElement`.
+
+{% Img src="image/admin/aUrrqhzMxaEX865Fk5zX.png", alt="Una captura de pantalla de la consola de DevTools que muestra HTMLPortalElement", width="800", height="252" %}
+
+## Implementar Portals
+
+Veamos un ejemplo básico de implementación.
+
+```javascript
+// Crea un portal con la página de Wikipedia, e incrustala
+// (en un iframe).También puedes usar la etiqueta de <portal>.
+portal = document.createElement('portal');
+portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
+portal.style = '...';
+document.body.appendChild(portal);
+
+// Cuando el usuario toca la vista preview (el portal incrusta // do):
+// haz una animación llamativa, por ejemplo: expandir...
+// y termina haciendo la actual transición.
+// Por motivos de simplicidad, este código navegará
+// en el evento de 'onload' del elemento de Portals
+portal.addEventListener('load', (evt) => {
+   portal.activate();
+});
+```
+
+Es así de simple. Prueba este código en la consola de DevTools, la página de Wikipedia debería abrirse.
+
+{% Img src="image/admin/rp6i8ngGJkvooXJ9WmLK.gif", alt="Un gif de demostración de estilo de un portal de vista previa", width="800", height="557" %}
+
+Si deseas crear algo como lo mostramos en Chrome Dev Summit y que funcione igual que la demostración anterior, el siguiente fragmento será de tu interés.
+
+```javascript
+// Agregando algunos estilos con transiciones
+const style = document.createElement('style');
+style.innerHTML = `
+  portal {
+    position:fixed;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    box-shadow: 0 0 20px 10px #999;
+    transform: scale(0.4);
+    transform-origin: bottom left;
+    bottom: 20px;
+    left: 20px;
+    animation-name: fade-in;
+    animation-duration: 1s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+  }
+  .portal-transition {
+    transition: transform 0.4s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .portal-transition {
+      transition: transform 0.001s;
+    }
+  }
+  .portal-reveal {
+    transform: scale(1.0) translateX(-20px) translateY(20px);
+  }
+  @keyframes fade-in {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+  }
+`;
+const portal = document.createElement('portal');
+// Vamos a navegar a la página de especificaciones de WICG
+//Portals
+portal.src = 'https://wicg.github.io/portals/';
+// Agrega una clase que defina la transición. Considera usar
+// `prefers-reduced-motion` como consulta de medios para contr// olar la animación.
+// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
+portal.classList.add('portal-transition');
+portal.addEventListener('click', (evt) => {
+  // Lanzar la animación cuando el usuario interactué con
+  // los Portals
+  portal.classList.add('portal-reveal');
+});
+portal.addEventListener('transitionend', (evt) => {
+  if (evt.propertyName == 'transform') {
+    // Activar el Portal cuando la transición sea completada
+    portal.activate();
+  }
+});
+document.body.append(style, portal);
+```
+
+También es fácil realizar la detección de funciones para mejorar progresivamente un sitio web utilizando Portals.
+
+```javascript
+if ('HTMLPortalElement' in window) {
+  // Si esta es una plataforma que tiene Portals...
+  const portal = document.createElement('portal');
+  ...
+}
+```
+
+Si deseas experimentar rápidamente cómo se siente Portals, intenta usar [uskay-portals-demo.glitch.me](https://uskay-portals-demo.glitch.me). ¡Asegúrate de acceder a él con Chrome 85 o versiones posteriores y activa la [bandera experimental](#enable-flags)!
+
+1. Ingresa una URL de la que desees obtener una vista previa.
+2. Luego, la página se incrustará como un elemento `<portal>`.
+3. Haz clic en la vista previa.
+4. La vista previa se activará después de una animación.
+
+{% Img src="image/admin/Y4Vv6v3DAAC32IsiWS7g.gif", alt="Un gif de la demostración en Glitch usando Portals", width="800", height="547" %}
+
+## Echa un vistazo a la especificación
+
+Estamos discutiendo activamente [la especificación de Portals](https://wicg.github.io/portals/) en el Grupo de la Comunidad de Incubación Web (WICG). Para ponerte al día rápidamente, échale un vistazo a algunos de los [escenarios clave](https://github.com/WICG/portals/blob/master/key-scenarios.md). Estas son las tres características importantes con las que debes de familiarizarte:
+
+- [El elemento `<portal>`](https://wicg.github.io/portals/#the-portal-element): El propio elemento HTML. La API es muy sencilla. Consiste en el atributo de`src`, la función de `activate` y una interfaz para mensajería (`postMessage`). `activate` toma un argumento opcional para pasar datos al `<portal>` al momento de la activación.
+- [La interfaz `portalHost`](https://wicg.github.io/portals/#the-portalhost-interface): Agrega un objeto `portalHost` al objeto `window`. Esto te permite verificar si la página está incrustada como un elemento `<portal>`. También proporciona una interfaz para enviar mensajes (`postMessage`) de regreso al host.
+- [La interfaz PortalActivateEvent](https://wicg.github.io/portals/#the-portalactivateevent-interface): Un evento que se dispara cuando se activa `<portal>`. Hay una función llamada `adoptPredecessor` en la que puedes usar para recuperar la página anterior como un elemento `<portal>`. Esto te permite crear navegaciones fluidas y experiencias compuestas entre dos páginas.
+
+Veamos más allá del patrón de uso básico. Aquí hay una lista no exhaustiva de lo que puedes lograr con Portals junto con el código de muestra.
+
+### Personaliza el estilo cuando se incrusta como un elemento `<portal>`
+
+```javascript
+// Detecta si la página está en un host con Portals
+if (window.portalHost) {
+  // Personalizar la IU cuando se incrusta como un portal
+}
+```
+
+### Mensajería entre el elemento `<portal>` y `portalHost`
+
+```javascript
+// Envía un mensaje al elemento de portal
+const portal = document.querySelector('portal');
+portal.postMessage({someKey: someValue}, ORIGIN);
+
+// Recibe un mensaje mediante window.portalHost
+window.portalHost.addEventListener('message', (evt) => {
+  const data = evt.data.someKey;
+  // Maneja el evento
+});
+```
+
+### Activando el elemento `<portal>` y recibiendo el evento `portalactivate`
+
+```javascript
+// Opcionalmente puedes agregar datos al argumentos para activ// ar la función
+portal.activate({data: {somekey: 'somevalue'}});
+
+// El contenido del portal recibirá el evento de portalactivat//e cuando el evento suceda
+window.addEventListener('portalactivate', (evt) => {
+  // Los datos estarán disponibles como evt.data
+  const data = evt.data;
+});
+```
+
+### Recuperando el predecesor
+
+```javascript
+// Escucha al evento de portalactivate
+window.addEventListener('portalactivate', (evt) => {
+  // ...y de manera creativa utiliza el predecesor
+  const portal = evt.adoptPredecessor();
+  document.querySelector('someElm').appendChild(portal);
+});
+```
+
+### Saber que tu página fue adoptada como predecesora
+
+```javascript
+// La función de activación regresa una promesa.
+// Cuando esta se resuelve, significa que el portal ha sido ac  // tivado.
+// Si este documento fue adoptado por eso, window.portalHost // existirá
+portal.activate().then(() => {
+  // Verifica si el documento fue adoptado en un elemento de p    // ortal.
+  if (window.portalHost) {
+    // Puedes iniciar la comunicación con el elemento portal
+    // en otras palabras, oír los mensajes
+    window.portalHost.addEventListener('message', (evt) => {
+      // manejar el evento
+    });
+  }
+});
+```
+
+Al combinar todas las funciones compatibles con Portals, puedes crear experiencias de usuario muy elegantes. Por ejemplo, la siguiente demostración explica cómo los Portals pueden permitir una experiencia de usuario perfecta entre un sitio web y el contenido incrustado de terceros.
+
+{% YouTube '4JkipxFVE9k' %}
+
+{% Aside %} ¿Estás interesado en esta demostración? [¡Bifurcalo en GitHub](https://github.com/WICG/portals/tree/master/demos/portal-embed-demo) y crea tu propia versión! {% endAside %}
+
+## Planes y casos de uso
+
+¡Esperamos que te haya gustado este breve recorrido por Portals! No podemos esperar a ver qué se te ocurre. Por ejemplo, es posible que desees comenzar a usar Portals para navegaciones no triviales, como: renderizar previamente la página para tu producto más vendido desde una página de lista de categorías de productos.
+
+Otra cosa importante que debe saber es que los Portals se pueden usar en navegaciones de origen cruzado, al igual que un `<iframe>`. Por lo tanto, si tienes varios sitios web que hacen referencia cruzada entre sí, también puedes usar Portals para crear una navegación fluida entre dos sitios web diferentes. Este caso de uso de origen cruzado es muy exclusivo de Portals e incluso puede mejorar la experiencia del usuario de los SPA.
+
+## Bienvenida la retroalimentación
+
+Portals está listo para experimentar en Chrome 85 y versiones posteriores. Los comentarios de la comunidad son cruciales para el diseño de nuevas API, así que úsalo y coméntanos lo que piensas. Si tienes alguna solicitud de función o comentarios, ve al [repositorio en GitHub de WICG](https://github.com/WICG/portals/issues).
diff --git a/src/site/content/es/blog/how-to-file-a-good-bug/index.md b/src/site/content/es/blog/how-to-file-a-good-bug/index.md
new file mode 100644
index 00000000000..1e87bc8885a
--- /dev/null
+++ b/src/site/content/es/blog/how-to-file-a-good-bug/index.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: Cómo reportar un error importante del navegador
+subhead: Informar a los proveedores de los navegadores sobre problemas que encuentre en su navegador es una parte integral para mejorar la plataforma web.
+authors:
+  - robertnyman
+  - petelepage
+date: 2020-06-15
+updated: 2020-06-15
+description: Informar a los proveedores de los navegadores sobre problemas que encuentre en su navegador, en un dispositivo o plataforma específicos es una parte integral para mejorar la plataforma web.
+tags:
+  - blog
+---
+
+Reportar un error importante no es difícil, pero requiere algo de trabajo. El objetivo es facilitar la búsqueda de lo que está roto, llegar a la causa raíz y, lo más importante, encontrar una manera de solucionarlo. Los errores que progresan rápidamente tienden a ser fáciles de reproducir con un comportamiento claro esperado.
+
+## Verifique que sea un error
+
+El primer paso es averiguar cuál debería ser el comportamiento "correcto".
+
+### ¿Cuál es el comportamiento correcto?
+
+Consulte los documentos API relevantes en [MDN](https://developer.mozilla.org/) o intente encontrar especificaciones relacionadas. Esta información puede ayudarlo a decidir qué API está realmente dañada, dónde está dañada y cuál es el comportamiento esperado.
+
+### ¿Funciona en un navegador diferente?
+
+El comportamiento que difiere entre los navegadores generalmente se prioriza más como un problema de interoperabilidad, especialmente cuando el navegador que contiene el error es el extraño. Intente probarlo en las últimas versiones de Chrome, Firefox, Safari y Edge, posiblemente mediante una herramienta como [BrowserStack](https://www.browserstack.com/).
+
+Si es posible, verifique que la página no se comporte intencionalmente de manera diferente debido al rastreo del agente de usuario. En Chrome DevTools, intente [configurar la cadena `User-Agent` para otro navegador](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/).
+
+### ¿Dejó de funcionar en un lanzamiento reciente?
+
+¿Funcionó como se esperaba en el pasado, pero dejó de funcionar en una versión reciente del navegador? Se puede actuar sobre tales "regresiones" mucho más rápido, especialmente si proporciona un número de versión en la que funcionaba y una versión en la que falló. Herramientas como [BrowserStack](https://www.browserstack.com/) pueden facilitar la verificación de versiones antiguas del navegador y la [herramienta bisect-builds](https://www.chromium.org/developers/bisect-builds-py) (para Chromium) permite buscar el cambio de manera muy eficiente.
+
+Si un problema es una regresión y se puede reproducir, la causa raíz generalmente se puede encontrar y solucionar rápidamente.
+
+### ¿Otros están viendo el mismo problema?
+
+Si tiene problemas, es muy probable que otros desarrolladores también los estén teniendo. Primero, intente buscar el error en [Stack Overflow](http://stackoverflow.com/). Esto podría ayudarlo a traducir un problema abstracto en una API dañada específica y podría ayudarlo a encontrar una solución a corto plazo hasta que se solucione el error.
+
+## ¿Se ha informado antes?
+
+Una vez que tenga una idea de cuál es el error, es hora de verificar si el error ya se ha informado al buscar en la base de datos de errores del navegador.
+
+- Navegadores basados en Chromium: [https://crbug.com](https://crbug.com/)
+- Firefox: [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Navegadores basados en Safari y WebKit: [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+Si encuentra un error existente que describe el problema, muestre su apoyo al destacar, marcar como favorito o comentar el error. Además, en muchos sitios, puede inscribirse en la lista CC y obtener actualizaciones cuando cambie el error.
+
+Si decide comentar sobre el error, incluya información sobre cómo afecta el error a su sitio web. Evite agregar comentarios de estilo "+1", ya que los rastreadores de errores suelen enviar correos electrónicos por cada comentario.
+
+## Informar el error
+
+Si el error no se ha informado antes, es hora de informarle al proveedor del navegador.
+
+### Cree un caso de prueba minimizado {: #minified-test-case }
+
+Mozilla tiene un excelente artículo sobre [cómo crear un caso de prueba minimizado](https://developer.mozilla.org/docs/Mozilla/QA/Reducing_testcases). Para abreviar la historia, si bien una descripción del problema es un gran comienzo, nada mejor que proporcionar una demostración enlazada sobre el error que muestre el problema. Para maximizar la posibilidad de un progreso rápido, el ejemplo debe contener el código mínimo posible necesario para demostrar el problema. Una muestra de código mínimo es lo primero que puede hacer para aumentar las probabilidades de que su error se solucione.
+
+A continuación, se ofrecen algunos consejos para minimizar un caso de prueba:
+
+- Descargue la página web, agregue [`<base href="https://original.url">`](https://developer.mozilla.org/docs/Web/HTML/Element/base) y verifique que el error exista localmente. Esto puede requerir un servidor HTTPS en vivo si la URL usa HTTPS.
+- Pruebe los archivos locales en las últimas versiones de tantos navegadores como pueda.
+- Intente condensar todo en un archivo.
+- Elimine el código (comenzando con las cosas que sabe que son innecesarias) hasta que desaparezca el error.
+- Utilice el control de versiones para que pueda guardar su trabajo y deshacer las cosas que salieron mal.
+
+#### Alojar un caso de prueba minimizado
+
+Si está buscando un buen lugar para alojar su caso de prueba minimizado, existen varios lugares buenos disponibles:
+
+- [Glitch](https://glitch.com)
+- [JSBin](https://jsbin.com)
+- [JSFiddle](https://jsfiddle.net)
+- [CodePen](https://codepen.io)
+
+Tenga en cuenta que varios de esos sitios muestran contenido en un iframe, lo que puede provocar que las funciones o los errores se comporten de manera diferente.
+
+## Presentar su problema
+
+Una vez que tenga su caso de prueba minimizado, estará listo para presentar ese error. Diríjase al sitio de seguimiento de errores correcto y cree un problema nuevo.
+
+- Navegadores basados en Chromium: [https://crbug.com/new](https://crbug.com/new)
+- Firefox: [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Navegadores basados en Safari y WebKit: [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+### Proporcione una descripción clara y los pasos necesarios para reproducir el problema
+
+Primero, proporcione una descripción clara para ayudar a que los ingenieros comprendan rápidamente cuál es el problema y ayudar a clasificar el problema.
+
+```text
+Cuando se instala una PWA mediante `beforeinstallprompt.prompt()`,
+el evento `appinstalled` se activa antes de que se resuelva la invocación a `prompt()`.
+```
+
+A continuación, proporcione los pasos detallados necesarios para reproducir el problema. Aquí es donde entra en juego [su caso de prueba minimizado](#minified-test-case).
+
+```text
+¿Qué pasos reproducirán el problema?
+1. Vaya a https://basic-pwa.glitch.me/, abra DevTools y analice
+   la pestaña de consola.
+2. Haga clic en el botón Instalar en la página, quizá necesite interactuar con
+   la página un poco antes de que se habilite.
+3. Haga clic en Instalar en la confirmación modal de instalación en el navegador.
+```
+
+Finalmente, describa el resultado *real* y *esperado*.
+
+```text
+¿Cuál es el resultado real? En la consola:
+0. INSTALL: Disponible (se registra cuando se activa el evento `beforeinstallprompt`)
+1. INSTALL: Exitosa (se registra cuando se activa el evento `appinstalled`)
+2. INSTALL_PROMPT_RESPONSE: {resultado: "aceptada", platforma: "web"}
+   (se registra cuando se resuelve beforeinstallprompt.prompt()`)
+
+¿Cuál es el resultado esperado? En la consola:
+0. INSTALL: Disponible (se registra cuando se activa el evento `beforeinstallprompt`)
+1. INSTALL_PROMPT_RESPONSE: {resultado: "aceptada", platforma: "web"}
+   (se registra cuando se resuelve beforeinstallprompt.prompt()`)
+2. INSTALL: Exitosa (se registra cuando se activa el evento `appinstalled`)
+```
+
+Para obtener más información, consulte las [pautas de redacción de informes de errores](https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines) en MDN.
+
+#### Bonificación: agregue una captura de pantalla o una captura de video del problema
+
+Aunque no es obligatorio, en algunos casos puede ser útil agregar una captura de pantalla o una captura de video del problema. Esto es especialmente útil en los casos en que los errores pueden requerir algunos pasos extraños para reproducirse. Con frecuencia, puede ser útil que se pueda ver lo que sucede en una captura de video o en una captura de pantalla.
+
+### Incluya detalles del entorno
+
+Algunos errores solo se pueden reproducir en ciertos sistemas operativos, o solo en tipos específicos de pantallas (por ejemplo, dpi bajos o dpi altos). Asegúrese de incluir los detalles de los entornos de prueba que utilizó.
+
+### Envíe el error
+
+Finalmente, envíe el error. Luego, recuerde estar atento a su correo electrónico para ver las respuestas al error. Por lo general, durante la investigación y al corregir el error, los ingenieros pueden tener preguntas adicionales o, si tienen dificultades para reproducir el problema, pueden comunicarse.
diff --git a/src/site/content/es/blog/how-to-use-local-https/index.md b/src/site/content/es/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..5cef65af72e
--- /dev/null
+++ b/src/site/content/es/blog/how-to-use-local-https/index.md
@@ -0,0 +1,270 @@
+---
+title: Cómo utilizar el HTTPS en el desarrollo local
+subhead: A veces, necesitas ejecutar tu sitio de desarrollo local con HTTPS. Consejos y herramientas para hacer esto de forma rápida y segura.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %} La mayoría de las veces, `http://localhost` hace lo que necesitas: en los navegadores, se comporta principalmente como HTTPS 🔒. Es por eso que algunas API que no funcionarán en un sitio que utiliza  HTTP, funcionarán en `http://localhost`.
+
+Lo que esto significa es que debes de usar HTTPS localmente **solo en casos especiales** (consulta [Cuándo usar HTTPS en el desarrollo local](/when-to-use-local-https)), como por ejemplo, nombres de host personalizados o asegurar cookies en todos los navegadores. ¡Sigue leyendo si esto se te hace conocido! {% endAside %}
+
+*En esta publicación, las declaraciones sobre el `localhost` son válidas para `127.0.0.1` y `[::1]`, ya que ambas describen la dirección de la computadora local, a esta tambien se le conoce como "dirección del loopback". Además, para simplificar las cosas, no se especifica el número de puerto.**Entonces, cuando veas `http://localhost`, léelo como `http://localhost:{PORT}` o como `http://127.0.0.1:{PORT}`.*
+
+Si tu sitio web de producción usa HTTPS, deseas que tu sitio de desarrollo local se comporte **como un sitio HTTPS** (si es que tu sitio web de producción no usa HTTPS, [haz que tu prioridad sea cambiar a HTTPS](/why-https-matters/)). La mayoría de las veces, puedes confiar en que `http://localhost` se comporte **como un sitio HTTPS**. Pero [en algunos casos](/when-to-use-local-https), debes de ejecutar tu sitio localmente con HTTPS. Echemos un vistazo a cómo hacer esto.
+
+**⏩ ¿Estás buscando instrucciones rápidas o ya estuviste aquí antes? Saltate al [sumario](#using-mkcert-cheatsheet).**
+
+## Ejecutar tu sitio localmente con HTTPS usando mkcert (recomendación)
+
+Para usar HTTPS en tu sitio de desarrollo local y acceder a `https://localhost` o `https://mysite.example` (nombre de host personalizado), necesitas de un [certificado TLS](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate). Pero los navegadores no considerarán válido cualquier certificado: tu certificado debe estar **firmado** por una entidad en la que tu navegador confía, a esto se le conoce como **[autoridad certificadora (CA)](https://en.wikipedia.org/wiki/Certificate_authority)** de confianza.
+
+Lo que debes de hacer es crear un certificado y firmarlo con una CA en la que tu dispositivo y navegador **confíen localmente**. [mkcert](https://github.com/FiloSottile/mkcert) es una herramienta que te ayudará a hacer esto con unos pocos comandos. Así es como funciona:
+
+- Si abres tu sitio que se ejecuta localmente en tu navegador usando HTTPS, tu navegador verifica el certificado de tu servidor de desarrollo local.
+- Al ver que el certificado ha sido firmado por la autoridad de certificación generada por mkcert, el navegador verifica si está registrado como una autoridad de certificación confiable.
+- mkcert está considerado como una autoridad de confianza, por lo que tu navegador confía en el certificado y crea una conexión HTTPS.
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="Un diagrama de cómo funciona mkcert.", width="800", height="787" %} <figcaption><figcaption> Un diagrama de cómo funciona mkcert.</figcaption></figcaption></figure>
+
+mkcert (y herramientas similares) proporcionan varios beneficios:
+
+- mkcert está especializado en la creación de certificados que **cumplen con lo que los navegadores consideran certificados válidos**. Este se mantiene actualizado para cumplir con los requisitos y las mejores prácticas. ¡Es por eso que no tendrás que ejecutar comandos mkcert con configuraciones o argumentos complejos para generar los certificados correctos!
+- mkcert es una herramienta multiplataforma. Cualquiera de tu equipo puede usarla.
+
+mkcert es la herramienta que recomendamos para crear un certificado TLS para desarrollo local. También puedes consultar [otras opciones](#running-your-site-locally-with-https-other-options).
+
+Muchos sistemas operativos pueden incluir bibliotecas para producir certificados, como [openssl](https://www.openssl.org/). A diferencia de mkcert y herramientas similares, es posible que estas bibliotecas no produzcan certificados correctos de manera consistente, pueden requerir la ejecución de comandos complejos y no son necesariamente multiplataforma.
+
+{% Aside 'gotchas' %} El mkcert que nos interesa en esta publicación es [este](https://github.com/FiloSottile/mkcert), no [este](https://www.npmjs.com/package/mkcert). {% endAside %}
+
+### Precaución
+
+{% Aside 'caution' %}
+
+- Nunca exportes ni compartas el archivo `rootCA-key.pem` que mkcert crea automáticamente cuando ejecutas `mkcert-install`. **Un atacante que se apodere de este archivo puede crear ataques en ruta para cualquier sitio que el esté visitando**. Ellos podrían interceptar solicitudes seguras desde tu máquina a cualquier sitio: tu banco, proveedor de atención médica o redes sociales. Si necesitas saber dónde se encuentra el `rootCA-key.pem` para asegurarte de que sea seguro, ejecuta `mkcert-CAROOT`.
+- Utiliza solo mkcert para **fines de desarrollo** y, por extensión, nunca le pidas a los usuarios finales que ejecuten comandos de mkcert.
+- Equipos de desarrollo: todos los miembros de tu equipo deben instalar y ejecutar mkcert por **separado** (no almacenar y compartir la CA y el certificado).
+
+{% endAside %}
+
+### Configuración
+
+1. Instala mkcert (solo una vez).
+
+    Sigue las [instrucciones](https://github.com/FiloSottile/mkcert#installation) para instalar mkcert en tu sistema operativo. Por ejemplo, en macOS:
+
+    ```bash
+    brew install mkcert
+    brew install nss # if you use Firefox
+    ```
+
+2. Agrega mkcert a sus raíces locales de CA.
+
+    En tu terminal, ejecuta el siguiente comando:
+
+    ```bash
+    mkcert -install
+    ```
+
+    Esto genera una autoridad de certificación (CA) local. Tu CA local generada por mkcert solo es de confianza **localmente**, en tu dispositivo.
+
+3. Genera un certificado para tu sitio, firmado por mkcert.
+
+    En tu terminal, navega hasta el directorio raíz de tu sitio o cualquier directorio en el que deseas que se ubiquen los certificados.
+
+    Luego ejecutas lo siguiente:
+
+    ```bash
+    mkcert localhost
+    ```
+
+    Si estás utilizando un nombre de host personalizado como `mysite.example`, ejecuta:
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    El comando anterior hace dos cosas:
+
+    - Genera un certificado para el nombre de host que has especificado
+    - Permite que el mkcert (que agregaste como CA local en el paso 2) firme este certificado.
+
+    Ahora, tu certificado está listo y firmado por una autoridad de certificación en la que su navegador confía localmente. Ya casi has terminado, ¡pero tu servidor aún no reconoce tu certificado!
+
+4. Configura tu servidor.
+
+    Ahora debes de decirle a tu servidor que use HTTPS (ya que los servidores de desarrollo tienden a usar HTTP de forma predeterminada) y que use el certificado TLS que acabas de crear.
+
+    Hacer esto depende exactamente de tu servidor. Algunos ejemplos:
+
+    **👩🏻‍💻 Con Node:**
+
+    `server.js` (reemplaza `{PATH/TO/CERTIFICATE...}` and `{PORT}`):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻 Con [http-server](https://www.npmjs.com/package/http-server):**
+
+    Inicie su servidor de la siguiente manera (reemplaza `{PATH/TO/CERTIFICATE...}`):
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S` ejecuta tu servidor con HTTPS, mientras que `-C` establece el certificado y `-K` establece la llave (key).
+
+    **👩🏻‍💻 Con un servidor de desarrollo React:**
+
+    Edita tu `package.json` de la siguiente manera y reemplaza `{PATH/TO/CERTIFICATE...}`:
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    Por ejemplo, si creaste un certificado para `localhost` que se encuentra en el directorio raíz de su sitio de la siguiente manera:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    Entonces tu script de `start` debe de verse así:
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 Otros ejemplos:**
+
+    - [Servidor de desarrollo de Angular](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨ ¡Ya terminaste! Abre `https://localhost` o `https://mysite.example` en tu navegador: ya estas ejecutando tu sitio localmente con HTTPS. No verás ninguna advertencia del navegador, porque tu navegador confía en mkcert como una autoridad de certificación local.
+
+{% Aside %} Tu servidor puede usar un puerto diferente para HTTPS. {% endAside %}
+
+### Usando mkcert: sumario
+
+{% Details %} {% DetailsSummary %} mkcert en resumen {% endDetailsSummary %}
+
+Para ejecutar tu sitio de desarrollo local con HTTPS:
+
+1. Configura mkcert.
+
+    Si aún no lo has hecho, instala mkcert, ejemplo de instalación en macOS:
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    Comprueba las [instrucciones de instalación de mkcert](https://github.com/FiloSottile/mkcert#installation) para Windows y Linux.
+
+    Luego, crea una autoridad de certificación local:
+
+    ```bash
+    mkcert -install
+    ```
+
+2. Crea un certificado de confianza.
+
+    ```bash
+    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
+    ```
+
+    Esto crea un certificado válido (que será firmado por `mkcert`).
+
+3. Configura tu servidor de desarrollo para usar HTTPS y el certificado que creaste en el paso 2.
+
+4. ✨ ¡Ya terminaste! Ahora puedes acceder a `https://{YOUR HOSTNAME}` en tu navegador, sin advertencias
+
+{% Aside 'caution' %}
+
+Solo deberías de hacer esto con **fines de desarrollo** y **nunca exportes o compartas** el archivo de `rootCA-key.pem` (si necesitas saber dónde se encuentra este archivo para asegurarse de que sea seguro, ejecuta `mkcert -CAROOT`).
+
+{% endAside %}
+
+{% endDetails %}
+
+## Ejecutar tu sitio de manera local con HTTPS: otras opciones
+
+### Certificado autofirmado
+
+También puedes decidir no utilizar una autoridad de certificación local como mkcert y, en su lugar, **firmar tu certificado tú mismo**.
+
+Ten cuidado con algunas trampas con esta aproximación:
+
+- Los navegadores no confían en ti como autoridad de certificación y mostrarán advertencias que deberás omitir manualmente. En Chrome, puedes usar la bandera de `#allow-insecure-localhost` para omitir esta advertencia automáticamente en `localhost`. Si hacer esto se siente un poco extraño, es porque lo es.
+- Esto no es seguro si trabajas en una red insegura.
+- Los certificados autofirmados no se comportarán exactamente de la misma manera que los certificados de confianza.
+- No es necesariamente más fácil o más rápido que usar una CA local como mkcert.
+- Si no estás utilizando esta técnica en el contexto de un navegador, es posible que debas de deshabilitar la verificación del certificado para tu servidor. Omitir volver a habilitarlo en producción sería peligroso.
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="Capturas de pantalla de las advertencias que muestran los navegadores cuando se usa un certificado autofirmado.", width="800", height="598" %} <figcaption> Las advertencias de los navegadores se muestran cuando se utiliza un certificado autofirmado.</figcaption></figure>
+
+{% Aside %} Si no especificaste ningún certificado, las opciones HTTPS del servidor de desarrollo de [React](https://create-react-app.dev/docs/using-https-in-development/) y de [Vue](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve) crean un certificado autofirmado por ellos mismos. Esto es rápido, pero recibirá advertencias del navegador y encontrará otros errores relacionados con los certificados autofirmados que se enumeran anteriormente. Afortunadamente, puedes usar la opción HTTPS incorporada de los frameworks frontend **y** especificar un certificado de confianza local creado a través de mkcert o de manera similar. Mira cómo hacer esto en el [ejemplo de mkcert con React](/#setup:~:text=a%20React%20development%20server). {% endAside %}
+
+{% Details %} {% DetailsSummary %} ¿Por qué los navegadores no confían en los certificados autofirmados? {% endDetailsSummary %}
+
+Si abres tu sitio que se ejecuta localmente en tu navegador usando HTTPS, tu navegador verificará el certificado de tu servidor de desarrollo local. Cuando veas que el certificado ha sido firmado por ti mismo, este comprueba si estás registrado como una autoridad certificadora de confianza. Como no lo eres, tu navegador no puede confiar en el certificado; muestra una advertencia que te indica que tu conexión no es segura. Puedes proceder bajo su propio riesgo; si lo haces, se creará una conexión HTTPS.
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="Por qué los navegadores no confían en los certificados autofirmados: un diagrama.", width="800", height="833" %} <figcaption> Por qué los navegadores no confían en los certificados autofirmados.</figcaption></figure>
+
+{% endDetails %}
+
+### Certificado firmado por una autoridad certificadora regular
+
+También puedes encontrar técnicas basadas en que una autoridad certificadora real, no una local, firme tu certificado.
+
+Algunas cosas a tener en cuenta si estás considerando usar estas técnicas:
+
+- Tendrás más cosas que hacer en la configuración por hacer que cuando se usa una técnica de CA local como mkcert.
+- Debes de utilizar un nombre de dominio que controles y que sea válido. Esto significa que no **puedes** utilizar autoridades de certificación reales para:
+    - `localhost` y otros nombres de dominio que están [reservados](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml), como `example` o `test`.
+    - Cualquier nombre de dominio que no controles.
+    - Dominios de nivel superior que no son válidos. Consulta la [lista de dominios de nivel superior válidos](https://www.iana.org/domains/root/db).
+
+### Proxy inverso
+
+Otra opción para acceder a un sitio que se ejecuta localmente con HTTPS es utilizar un [proxy inverso](https://en.wikipedia.org/wiki/Reverse_proxy) como [ngrok](https://ngrok.com/).
+
+Algunos puntos a considerar:
+
+- Cualquiera puede acceder a tu sitio de desarrollo local una vez que compartas con ellos una URL creada con un proxy inverso. ¡Esto puede ser muy útil cuando demuestres tu proyecto a los clientes! O esto puede ser un inconveniente, si tu proyecto es delicado.
+- Es posible que debas de considerar los precios.
+- Las nuevas [medidas de seguridad](/cors-rfc1918-feedback/) en los navegadores pueden afectar la forma en que funcionan estas herramientas.
+
+### Bandera (no recomendado)
+
+Si estás usando un nombre de host personalizado como `mysite.example`, en Chrome puedes usar una bandera (flag) para considerar forzosamente a mysite.example como un sitio seguro. **Evita hacer esto** porque:
+
+- Debes de estar 100% seguro de que `mysite.example` siempre se resuelve en una dirección local; de lo contrario, podrías filtrar las credenciales de producción.
+- No podrás depurar varios navegadores con este truco 🙀.
+
+*Muchas gracias por las contribuciones y comentarios a todos los editores y colaboradores, especialmente a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija y Rowan Merewood. 🙌*
+
+*Fondo de imagen de héroe por [@anandu](https://unsplash.com/@anandu) en [Unsplash](https://unsplash.com/photos/pbxwxwfI0B4), editado.*
diff --git a/src/site/content/es/blog/iframe-lazy-loading/index.md b/src/site/content/es/blog/iframe-lazy-loading/index.md
new file mode 100644
index 00000000000..2b9f2a253e4
--- /dev/null
+++ b/src/site/content/es/blog/iframe-lazy-loading/index.md
@@ -0,0 +1,227 @@
+---
+layout: post
+title: "¡Es hora de cargar de forma diferida iframes fuera de la pantalla!"
+subhead: "¡Llegó la carga diferida incorporada al navegador para iframes!"
+authors:
+  - addyosmani
+date: 2020-07-24
+updated: 2022-08-15
+hero: image/admin/dMCW2Qqi5Qp2DB3w4DyE.png
+alt: Esquema del teléfono con carga de imagen y recursos
+description: Esta publicación cubre el atributo loading y cómo se puede utilizar para controlar la carga de los iframes.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+  - memory
+feedback:
+  - api
+---
+
+[La carga diferida estandarizada para imágenes](/browser-level-image-lazy-loading/) llegó a Chrome 76 a través del atributo `loading` y más tarde a Firefox. Nos complace compartir que la **carga diferida en el navegador para iframes** ahora es [estándar](https://github.com/whatwg/html/pull/5579) y también es compatible con los navegadores Chrome y Chromium.
+
+```html/1
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+```
+
+La carga diferida estandarizada de iframes difiere la carga de iframes fuera de la pantalla hasta que el usuario se desplaza cerca de ellos. Esto ahorra datos, acelera la carga de otras partes de la página y reduce el uso de memoria.
+
+Esta [demo](https://lazy-load.netlify.app/iframes/) de `<iframe loading=lazy>` muestra código incrustado de video de carga diferida:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+### ¿Por qué deberíamos cargar iframes de forma diferida?
+
+El código incrustado de terceros cubre una amplia gama de casos de uso, desde reproductores de video hasta publicaciones en redes sociales y anuncios. A menudo, este contenido no es visible inmediatamente en la ventana gráfica del usuario. Por el contrario, solo se ve una vez que se desplazan hacia abajo en la página. A pesar de esto, los usuarios pagan el costo de descargar datos y JavaScript por cada cuadro, incluso si no se desplazan hasta él.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqZMRuULxbz6DVXNP8ea.png", alt="Ahorro de datos por usar iframe lazy-loading para un iframe. En este ejemplo, una carga completa usa 3 MB, mientras que lazy-loading no descarga nada hasta que el usuario se desplaza cerca del iframe.", width="800", height="460" %}</figure>
+
+Según la investigación de Chrome sobre [iframes fuera de pantalla de carga diferida automática para usuarios de Data Saver](https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html), los iframes de carga diferida podrían generar un ahorro medio de datos  del 2-3%, 1-2% de reducción de la [primera pintura con contenido](/fcp/) en la mediana y mejoras del 2% en el [retraso de la primera entrada](/fid/) (FID) en el percentil 95.
+
+### ¿Cómo funciona la carga diferida incorporada para iframes?
+
+El atributo `loading` permite que un navegador difiera la carga de iframes e imágenes fuera de la pantalla hasta que los usuarios se desplacen cerca de ellos. `loading` admite dos valores:
+
+- `lazy`: es un buen candidato para la carga diferida.
+- `eager`: no es un buen candidato para la carga diferida. Cargue de inmediato.
+
+El uso del `loading` en iframes funciona de la siguiente manera:
+
+```html
+<!-- Lazy-load the iframe -->
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+
+<!-- Eagerly load the iframe -->
+<iframe src="https://example.com"
+        width="600"
+        height="400"></iframe>
+
+<!-- or use loading="eager" to opt out of automatic
+lazy-loading in Lite Mode -->
+<iframe src="https://example.com"
+        loading="eager"
+        width="600"
+        height="400"></iframe>
+```
+
+No especificar el atributo en absoluto tendrá el mismo impacto que cargar explícitamente el recurso con entusiasmo, excepto para los usuarios del [Modo Básico](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html), donde Chrome usará el `auto` para decidir si debe cargarse de forma diferida.
+
+Si necesitas crear *dinámicamente* iframes a través de JavaScript, establecer `iframe.loading = 'lazy'` en el elemento también está [apoyado](https://bugs.chromium.org/p/chromium/issues/detail?id=993273) :
+
+```js/2
+var iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.loading = 'lazy';
+document.body.appendChild(iframe);
+```
+
+#### Comportamiento de carga diferida específico de iframe
+
+El atributo de carga afecta a los iframes de manera diferente a las imágenes, dependiendo de si el iframe está oculto. (Los iframes ocultos se utilizan a menudo con fines analíticos o de comunicación). Chrome utiliza los siguientes criterios para determinar si un iframe está oculto:
+
+- El ancho y el alto del iframe son de `4px` o menos.
+- Se aplica `display: none` o `visibility: hidden`.
+- El iframe se coloca fuera de la pantalla mediante un posicionamiento X o Y negativo.
+- Este criterio se aplica tanto a `loading=lazy` como a `loading=auto`.
+
+Si un iframe cumple alguna de estas condiciones, Chrome lo considera oculto y no lo cargará de forma diferida en la mayoría de los casos. Los iframes que no están ocultos solo se cargarán cuando estén dentro del [umbral de distancia de carga](/browser-level-image-lazy-loading/#load-in-distance-threshold). Chrome muestra un marcador de posición para los iframes cargados de forma diferida que aún se están recuperando.
+
+### ¿Qué impacto podríamos ver en el código de incrustación de iframe populares de carga diferida?
+
+¿Qué pasaría si pudiéramos cambiar la web en general para que los iframes fuera de pantalla de carga diferida fueran los predeterminados? Se vería un poco así:
+
+Incrustaciones de video de YouTube de carga diferida (ahorra ~ 500 KB en la carga de la página inicial):
+
+```html/1
+<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
+        loading="lazy"
+        width="560"
+        height="315"
+        frameborder="0"
+        allow="accelerometer; autoplay;
+        encrypted-media; gyroscope;
+        picture-in-picture"
+        allowfullscreen></iframe>
+```
+
+**Anécdota:** cuando cambiamos a incrustaciones de YouTube de carga diferida para Chrome.com, ahorramos 10 segundos de la rapidez con la que nuestras páginas podrían ser interactivas en dispositivos móviles. Abrí un error interno con YouTube para discutir la adición de `loading=lazy` a su código de inserción.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt = "Chrome.com logró una reducción de 10 segundos en el tiempo de interacción mediante la carga diferida de iframes fuera de la pantalla para su video incrustado de YouTube", width = "800", height = "460"%}</figure>
+
+{% Aside %} Si está buscando formas más eficientes de cargar inserciones de YouTube, es posible que le interese el [componente YouTube Lite](https://github.com/paulirish/lite-youtube-embed) . {% endAside %}
+
+**Inserciones de Instagram de carga diferida (ahorra&gt; 100 KB en gzip en la carga inicial):**
+
+Las incrustaciones de Instagram proporcionan un bloque de marcado y un script, que inyecta un iframe en su página. La carga diferida de este iframe evita tener que cargar todo el script necesario para la inserción. Dado que tales incrustaciones a menudo se muestran debajo de la ventana gráfica en la mayoría de los artículos, esto parece un candidato razonable para la carga diferida de su iframe.
+
+**Incrustaciones de Spotify de carga diferida (ahorra 514 KB en la carga inicial):**
+
+```html
+<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
+        loading="lazy"
+        width="300"
+        height="380"
+        frameborder="0"
+        allowtransparency="true"
+        allow="encrypted-media"></iframe>
+```
+
+Aunque las incrustaciones anteriores ilustran los beneficios potenciales de los iframes de carga diferida para el contenido de medios, existe la posibilidad de ver también estos beneficios en los anuncios.
+
+### Estudio de caso: carga diferida de los complementos sociales de Facebook
+
+*Los complementos sociales* de Facebook permiten a los desarrolladores incrustar contenido de Facebook en sus páginas web. Se ofrecen varios de estos complementos, como publicaciones incrustadas, fotos, videos, comentarios… El más popular es el [complemento Me gusta](https://developers.facebook.com/docs/plugins/like-button/) , un botón que muestra un recuento de a quién le ha "gustado" la página. De forma predeterminada, incrustar el complemento Me gusta en una página web (utilizando FB JSSDK) extrae ~ 215 KB de recursos, de los cuales 197 KB son JavaScript. En muchos casos, el complemento puede aparecer al final de un artículo o cerca del final de una página, por lo que cargarlo con entusiasmo cuando está fuera de la pantalla puede ser subóptimo.
+
+<figure>{% Img src = "image/admin/fdy8o61jxPN560IkF2Ne.png", alt = "Botón Me gusta de Facebook", width = "800", height = "71"%}</figure>
+
+Gracias al ingeniero Stoyan Stefanov, [todos los complementos sociales de Facebook ahora admiten la carga diferida de iframe estandarizada](https://developers.facebook.com/docs/plugins/like-button#settings) . Los desarrolladores que opten por la carga diferida a través de la `data-lazy` diferidos de los complementos ahora podrán evitar que se cargue hasta que el usuario se desplace cerca. Esto permite que la inserción siga funcionando completamente para los usuarios que la necesitan, al tiempo que ofrece ahorros de datos para aquellos que no se desplazan hacia abajo en una página. Tenemos la esperanza de que esta sea la primera de muchas incorporaciones para explorar la carga diferida de iframe estandarizada en producción.
+
+### ¿Puedo cargar iframes de forma diferida en varios navegadores? sí
+
+La carga diferida de iframe se puede aplicar como una mejora progresiva. Los navegadores que admiten `loading=lazy` en iframes cargarán el iframe de forma perezosa, mientras que el `loading` se ignorará de forma segura en los navegadores que aún no lo admiten.
+
+También es posible cargar de forma diferida iframes fuera de la pantalla utilizando la biblioteca de JavaScript [lazysizes.](/use-lazysizes-to-lazyload-images/) Esto puede ser deseable si:
+
+- requieren más umbrales de carga diferida personalizados que los que ofrece actualmente la carga diferida estandarizada
+- desea ofrecer a los usuarios una experiencia coherente de carga diferida de iframe en todos los navegadores
+
+```html/3
+<script src="lazysizes.min.js" async></script>
+
+<iframe frameborder="0"
+	  class="lazyload"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+```
+
+Utilice el siguiente patrón para detectar la función de carga diferida y obtener tamaños diferidos cuando no esté disponible:
+
+```html/2
+<iframe frameborder="0"
+	  class="lazyload"
+    loading="lazy"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+
+<script>
+  if ('loading' in HTMLIFrameElement.prototype) {
+    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
+
+    iframes.forEach(iframe => {
+      iframe.src = iframe.dataset.src;
+    });
+
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+
+</script>
+```
+
+### Una opción para los usuarios de WordPress {: #wordpress}
+
+Es posible que tenga muchos iframes distribuidos a lo largo de años de contenido de publicación en un sitio de WordPress. Opcionalmente, puede agregar el siguiente código al `functions.php` su tema de WordPress para insertar automáticamente `loading="lazy"` en sus iframes existentes sin tener que actualizarlos manualmente de forma individual.
+
+Tenga en cuenta que [en el núcleo de WordPress también se está trabajando en la compatibilidad a nivel del navegador para iframes de carga diferida](https://core.trac.wordpress.org/ticket/50756) . El siguiente fragmento verificará las banderas relevantes para que, una vez que WordPress tenga la funcionalidad incorporada, ya no agregará manualmente el `loading="lazy"` , lo que garantiza que sea interoperable con esos cambios y no resulte en un atributo duplicado. .
+
+```php
+// TODO: Remove once https://core.trac.wordpress.org/ticket/50756 lands.
+function wp_lazy_load_iframes_polyfill( $content ) {
+	// If WP core lazy-loads iframes, skip this manual implementation.
+	if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
+		return $content;
+	}
+
+	return str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+}
+add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );
+```
+
+Si su sitio de WordPress utiliza almacenamiento en caché (pista: debería), no olvide reconstruir el caché de su sitio después.
+
+### Conclusión
+
+Hornear en soporte estandarizado para iframes de carga diferida hace que sea mucho más fácil para usted mejorar el rendimiento de sus páginas web. Si tiene algún comentario, no dude en enviar un problema a [Chromium Bug Tracker](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad) .
+
+Y, en caso de que se lo haya perdido, consulte la [colección de carga diferida de imágenes y videos de](/fast/#lazy-load-images-and-video) web.dev para obtener más ideas de carga diferida.
+
+*Agradecemos a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley y Stoyan Stefanov por sus reseñas.*
diff --git a/src/site/content/es/blog/javascript-this/index.md b/src/site/content/es/blog/javascript-this/index.md
new file mode 100644
index 00000000000..42eaa1fd1e4
--- /dev/null
+++ b/src/site/content/es/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: 'JavaScript: ¿Qué significa esto (this)?'
+subhead: Averiguar el valor de "this" puede ser complicado en JavaScript, aquí explicamos cómo hacerlo…
+description: Averiguar el valor de "this" puede ser complicado en JavaScript, aquí explicamos cómo hacerlo…
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+La palabra clave `this` es el blanco de muchas bromas, y eso es porque, bueno, es bastante complicado. Sin embargo, he visto a los desarrolladores hacer cosas mucho más complicadas y específicas del dominio para evitar lidiar con `this`. Si no se siente seguro usando `this`, esperamos que esto le ayude. Esta es mi guía para `this`.
+
+Comenzaré con la situación más específica y terminaré con la menos específica. Este artículo es como un gran `if (…) … else if () … else if (…) …` , así que puedes ir directamente a la primera sección que coincide con el código que estás viendo.
+
+1. [Si la función se define como una función de flecha](#arrow-functions)
+2. [De otro modo, si se llama a la función/clase con `new`](#new)
+3. [De otro modo, si la función tiene un 'límite' use `this` con este valor](#bound)
+4. [De otro modo, si `this` se establece en el momento de la llamada](#call-apply)
+5. [De otro modo, si la función se llama a través de un objeto principal ( `parent.func()` )](#object-member)
+6. [De otro modo, si la función o el ámbito principal está en modo estricto](#strict)
+7. [De otro modo](#otherwise)
+
+## Si la función se define como una función de flecha: {: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+En este caso, el valor de `this` es *siempre* el mismo que `this` en el ámbito primario:
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+Las funciones de flecha son geniales porque el valor interno de `this` no se puede cambiar, *siempre es* el mismo que el valor externo de `this`.
+
+### Otros ejemplos
+
+Con las funciones de flecha, el valor de `this` *no se* puede cambiar con [`bind`](#bound) :
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+Con las funciones de flecha, el valor de `this` *no se* puede cambiar con [`call` o `apply`](#call-apply) :
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+Con las funciones de flecha, el valor de `this` *no se* puede cambiar llamando a la función como miembro de otro objeto:
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+Con las funciones de flecha, el valor de `this` *no se* puede cambiar llamando a la función como un constructor:
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### Métodos de instancia con 'bound'
+
+Con los métodos de instancia, si desea asegurarse de que `this` siempre se refiera a la instancia de la clase, la mejor manera es usar funciones de flecha y [campos de clase](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields):
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+Este patrón es realmente útil cuando se utilizan métodos de instancia como detectores de eventos en componentes (como componentes React o componentes web).
+
+Lo anterior puede parecer que está quebrando la regla "`this` será igual que `this` en el ámbito principal", pero comienza a tener sentido si piensa en los campos de clase como azúcar sintáctico para configurar cosas en el constructor:
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+Los patrones alternativos implican vincular una función existente o asignar la función en el constructor. Si no puede usar campos de clase por alguna razón, asignar funciones en el constructor es una alternativa razonable:
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## De otro modo, si se llama la función/clase con `new`: {: #new }
+
+```js
+new Whatever();
+```
+
+Lo anterior llamará a `Whatever` (o su función constructora si es una clase) con `this` configurado con el resultado de `Object.create(Whatever.prototype)`.
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+Lo mismo ocurre con los constructores de estilo antiguo:
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### Otros ejemplos
+
+Cuando se llama con `new`, el valor de `this` *no se* puede cambiar con [`bind`](#bound):
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+Cuando se llama con `new`, el valor de `this` *no se* puede cambiar llamando a la función como miembro de otro objeto:
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## De otro modo, si la función tiene un 'bound', el valor de `this`: {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+Siempre que se llama `boundFunction`, el valor de `this` será el objeto pasado a `bind` (`boundObject`).
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %} Evite usar `bind` para vincular una función a su `this` exterior. En vez de eso, use [funciones de flecha](#arrow-functions), ya que hacen que `this` quede más claro a partir de la declaración de la función, en lugar de algo que suceda más adelante en el código.
+
+No use `bind` para establecer a `this` algún valor no relacionado con el objeto principal; suele ser inesperado y es por eso que `this` tiene tan mala reputación. En vez de eso, considere pasar el valor como un argumento; es más explícito y funciona con funciones de flecha. {% endAside %}
+
+### Otros ejemplos
+
+Al llamar a una función vinculada, el valor de `this` *no se* puede cambiar con [`call` o `apply`](#call-apply):
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+Cuando se llama a una función vinculada, el valor de `this` *no se* puede cambiar llamando a la función como miembro de otro objeto:
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## De otro modo, si `this` se ha establecido en call-time: {: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+El valor de `this` es el objeto que se pasa a `call`/`apply`.
+
+{% Aside 'warning' %} No use `call`/`apply` para establecer a `this` algún valor no relacionado con el objeto principal; suele ser inesperado y es por eso que `this` tiene tan mala reputación. En vez de eso, considere pasar el valor como un argumento; es más explícito y funciona con funciones de flecha. {% endAside %}
+
+Desafortunadamente, se establece algún otro valor para `this` por elementos como los detectores de eventos DOM, cuyo uso puede dar como resultado un código difícil de entender:
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+Yo evito usar `this` en casos como el anterior, y en vez de eso utilizo:
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## De otro modo, si la función se llama a través de un objeto principal (`parent.func()`): {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+En este caso, la función se llama como miembro de `obj`, por lo que `this` será un `obj`. Esto sucede en el momento de la llamada, por lo que el enlace se corta si se llama a la función sin su objeto principal o con un objeto principal diferente:
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod() === obj` es falso porque `someMethod` *no se* llama como miembro de `obj`. Es posible que se haya encontrado con este problema al intentar algo como esto:
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+Esto da un error como resultado porque la implementación de `querySelector` ve su proprio valor de `this` y espera que sea una especie de nodo DOM, y lo anterior corta esa conexión. Para conseguir el resultado deseado con el código anterior correctamente use:
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+Dato curioso: no todas las API utilizan `this` internamente. Los métodos de consola como `console.log` se cambiaron para evitar las referencias a `this`, por lo que no es necesario que el `log` esté vinculado a `console`.
+
+{% Aside 'warning' %} No trasplante una función a un objeto solo para establecer a `this` algún valor no relacionado con el objeto principal; suele ser inesperado y es por eso que `this` tiene tan mala reputación. En vez de eso, considere pasar el valor como un argumento; es más explícito y funciona con funciones de flecha. {% endAside %}
+
+## De otro modo, si la función o el ámbito principal está en modo estricto: {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+En este caso, el valor de `this` no está definido. `'use strict'` no es necesario en la función si el ámbito principal está en [modo estricto](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) (y todos los módulos están en modo estricto).
+
+{% Aside 'warning' %} No confíe en esto. Quiero decir, hay formas más fáciles de obtener un valor `undefined` 😀. {% endAside %}
+
+## De otro modo: {: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+En este caso, el valor de `this` es el mismo que `globalThis`.
+
+{% Aside %} La mayoría de la gente (incluyéndome) llama a `globalThis` el objeto global, pero esto no es 100 % correcto, técnicamente hablando. Aquí tenemos a [Mathias Bynens con todos los detalles](https://mathiasbynens.be/notes/globalthis#terminology), incluyendo por qué se llama `globalThis` en vez de simplemente `global`. {% endAside %}
+
+{% Aside 'warning' %} Evite usar `this` para hacer referencia al objeto global (sí, todavía lo estoy llamando así). En vez de eso, utilice [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis), que es mucho más explícito. {% endAside %}
+
+## ¡Uf!
+
+¡Y eso es! Eso es todo lo que sé sobre `this`. ¿Alguna pregunta? ¿Se me ha escapado algo? Envíame un [tuit](https://twitter.com/jaffathecake).
+
+Gracias a [Mathias Bynens](https://twitter.com/mathias), [Ingvar Stepanyan](https://twitter.com/RReverser) y [Thomas Steiner](https://twitter.com/tomayac) por la revisión.
diff --git a/src/site/content/es/blog/lighthouse-ci/index.md b/src/site/content/es/blog/lighthouse-ci/index.md
new file mode 100644
index 00000000000..9c17418da0c
--- /dev/null
+++ b/src/site/content/es/blog/lighthouse-ci/index.md
@@ -0,0 +1,352 @@
+---
+title: Supervisión del rendimiento con Lighthouse CI
+subhead: Cómo agregar Lighthouse a un sistema de integración continua, como GitHub Actions.
+authors:
+  - katiehempenius
+date: 2020-07-27
+description: |2
+
+  Aprenda a configurar Lighthouse CI e integrarlo en los flujos de trabajo de los desarrolladores.
+hero: image/admin/8q10N5o2xDA7YJKcefm5.png
+alt: Lighthouse CI se muestra en una captura de pantalla del servidor Lighthouse CI
+tags:
+  - blog
+  - performance
+  - lighthouse
+feedback:
+  - api
+---
+
+[Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) es un conjunto de herramientas para el uso de Lighthouse durante la integración continua. Lighthouse CI se puede incorporar a los flujos de trabajo de los desarrolladores de muchas formas diferentes. Esta guía cubre los siguientes temas:
+
+- Uso de la CLI de Lighthouse CI.
+- Configuración de su proveedor de CI para ejecutar Lighthouse CI.
+- Configuración de una [GitHub Action](https://github.com/features/actions) y la [verificación de estado](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) para Lighthouse CI. Esto mostrará automáticamente los resultados de Lighthouse en las solicitudes de extracción de GitHub.
+- Creación de un panel de rendimiento y un almacén de datos para informes Lighthouse.
+
+## Descripción general
+
+Lighthouse CI es un conjunto de herramientas gratuitas que facilitan el uso de Lighthouse para supervisar el rendimiento. Un solo informe Lighthouse proporciona una instantánea del rendimiento de una página web en el momento en que se ejecuta. Lighthouse CI muestra cómo estos hallazgos han cambiado con el tiempo. Esto se puede utilizar para identificar el impacto de cambios particulares del código o garantizar que se cumplan los umbrales de rendimiento durante los procesos de integración continua. Aunque la supervisión del rendimiento es el caso de uso más común de Lighthouse CI, se puede utilizar para supervisar otros aspectos del informe Lighthouse, por ejemplo, SEO o accesibilidad.
+
+La funcionalidad principal de Lighthouse CI la proporciona la interfaz de línea de comandos de Lighthouse CI. (Nota: esta es una herramienta separada de la [CLI de Lighthouse](https://github.com/GoogleChrome/lighthouse#using-the-node-cli)). La CLI de Lighthouse CI proporciona un conjunto de [comandos](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#commands) para el uso de Lighthouse CI. Por ejemplo, el comando `autorun` ejecuta varias instancias de Lighthouse, identifica el informe medio de Lighthouse y carga el informe para su almacenamiento. Este comportamiento se puede personalizar en gran medida al pasar indicadores adicionales o al personalizar el archivo de configuración de Lighthouse CI, `lighthouserc.js`.
+
+Aunque la funcionalidad principal de Lighthouse CI se encapsula principalmente en la CLI de Lighthouse CI, Lighthouse CI se utiliza normalmente mediante uno de los siguientes enfoques:
+
+- Ejecución de Lighthouse CI como parte de la integración continua
+- Uso de una GitHub Action de Lighthouse CI que se ejecuta y comenta en cada solicitud de extracción
+- Seguimiento del rendimiento a lo largo del tiempo a través del panel proporcionado por Lighthouse Server.
+
+Todos estos enfoques se basan en la CLI de Lighthouse CI.
+
+Las alternativas a Lighthouse CI incluyen servicios de monitoreo de rendimiento de terceros o escribir su propio script para recopilar datos de rendimiento durante el proceso de CI. Debería considerar el uso de un servicio de terceros si prefiere dejar que otra persona se encargue de la administración de su servidor de monitoreo de rendimiento y sus dispositivos de prueba, o si desea capacidades de notificación (como correo electrónico o integración de Slack) sin tener que crear tales características usted mismo.
+
+## Utilice Lighthouse CI localmente {: #cli }
+
+Esta sección explica cómo ejecutar e instalar la CLI de Lighthouse CI localmente y cómo configurar `lighthouserc.js`. Ejecutar la CLI de Lighthouse CI localmente es la forma más fácil de asegurar que su `lighthouserc.js` esté configurado correctamente.
+
+1. Instale la CLI de Lighthouse CI.
+
+    ```shell
+    npm install -g @lhci/cli
+    ```
+
+    Lighthouse CI se configura al colocar un archivo `lighthouserc.js` en la raíz del repositorio de su proyecto. Este archivo es obligatorio y contendrá información de configuración relacionada con Lighthouse CI. Aunque Lighthouse CI se puede [configurar para usarse sin un repositorio de git](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#build-context), las instrucciones de este artículo asumen que el repositorio de su proyecto está configurado para usar git.
+
+2. En la raíz de su repositorio, cree un [archivo de configuración](https://github.com/GoogleChrome/lighthouse-ci/blob/v0.4.1/docs/configuration.md#configuration-file) `lighthouserc.js`.
+
+    ```shell
+    touch lighthouserc.js
+    ```
+
+3. Agregue el siguiente código al archivo `lighthouserc.js`. Este código es una configuración de Lighthouse CI vacía. Agregará cosas a esta configuración en pasos posteriores.
+
+    ```js
+    module.exports = {
+      ci: {
+        collect: {
+          /* Agregue la configuración aquí */
+        },
+        upload: {
+          /* Agregue la configuración aquí */
+        },
+      },
+    };
+    ```
+
+4. Cada vez que se ejecuta Lighthouse CI, inicia un servidor para suministrar su sitio. Este servidor es lo que le permite a Lighthouse cargar su sitio incluso cuando no hay otros servidores en ejecución. Cuando Lighthouse CI termine de ejecutarse, apagará automáticamente el servidor. Para asegurar que la publicación funcione correctamente, debe configurar las propiedades [`staticDistDir`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#detecting-collectstaticdistdir) o [`startServerCommand`](https://github.com/GoogleChrome/lighthouse-ci/blob/v0.4.1/docs/configuration.md#startservercommand).
+
+    Si su sitio es estático, agregue la propiedad `staticDistDir` al objeto `ci.collect` para indicar dónde se encuentran los archivos estáticos. Lighthouse CI utilizará su propio servidor para suministrar estos archivos mientras prueba su sitio. Si su sitio no es estático, agregue la propiedad `startServerCommand` al objeto `ci.collect` para indicar el comando que inicia su servidor. Lighthouse CI iniciará un nuevo proceso de servidor durante la prueba y lo apagará después.
+
+    ```js
+    // Ejemplo de sitio estático
+    collect: {
+      staticDistDir: './public',
+    }
+    ```
+
+    ```js
+    // Ejemplo de sitio dinámico
+    collect: {
+      startServerCommand: 'npm run start',
+    }
+    ```
+
+5. Agregue la propiedad [`url`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#url) `ci.collect` para indicar las URL en las que Lighthouse CI debe ejecutar Lighthouse. El valor de la `url` debe proporcionarse como una matriz de URL. Esta matriz puede contener una o más URL. De forma predeterminada, Lighthouse CI ejecutará Lighthouse tres veces en cada URL.
+
+    ```js
+    collect: {
+      // ...
+      url: ['http://localhost:8080']
+    }
+    ```
+
+    Nota: El servidor que configuró en el paso anterior debería estar en capacidad de publicar estas URL. Por lo tanto, si está ejecutando Lighthouse CI localmente, estas URL probablemente deberían incluir `localhost` en lugar de su host de producción.
+
+6. Agregue la propiedad de [`target`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#target) `ci.upload` y establezca el valor en `'temporary-public-storage'`. Los informes de Lighthouse recopilados por Lighthouse CI se cargarán en un almacenamiento público temporal. El informe permanecerá allí durante siete días y luego se eliminará automáticamente. Esta guía de configuración utiliza la opción de carga de "almacenamiento público temporal" porque es rápida de configurar. Para obtener información sobre otras formas de almacenar informes Lighthouse, consulte la [documentación](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#target).
+
+    ```js
+    upload: {
+      target: 'temporary-public-storage',
+    }
+    ```
+
+    La ubicación de almacenamiento del informe será similar a esta:
+
+    ```text
+    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
+    ```
+
+    (Esta URL no funcionará porque el informe ya se eliminó).
+
+7. Ejecute la CLI de Lighthouse CI desde la terminal mediante el comando `autorun`. Esto ejecutará Lighthouse tres veces y cargará el informe mediano de Lighthouse.
+
+    ```shell
+    lhci autorun
+    ```
+
+    Si ha configurado correctamente Lighthouse CI, la ejecución de este comando debería producir un resultado similar a este:
+
+    ```shell
+    ✅  .lighthouseci/ directory writable
+    ✅  Configuration file found
+    ✅  Chrome installation found
+    ⚠️   GitHub token not set
+    Healthcheck passed!
+
+    Started a web server on port 65324...
+    Running Lighthouse 3 time(s) on http://localhost:65324/index.html
+    Run #1...done.
+    Run #2...done.
+    Run #3...done.
+    Done running Lighthouse!
+
+    Uploading median LHR of http://localhost:65324/index.html...success!
+    Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
+    No GitHub token set, skipping GitHub status check.
+
+    Done running autorun.
+    ```
+
+    Puede ignorar el mensaje `GitHub token not set` en el resultado de la consola. Un token de GitHub solo es necesario si desea utilizar Lighthouse CI con una GitHub Action. Más adelante en este artículo se explica cómo configurar una GitHub Action.
+
+    Al hacer clic en el enlace contenido en el resultado que comienza con `https://storage.googleapis.com...` lo llevará al informe de Lighthouse correspondiente a la ejecución mediana de Lighthouse.
+
+    Los valores predeterminados utilizados por `autorun` se pueden anular mediante la línea de comandos o mediante `lighthouserc.js`. Por ejemplo, la configuración `lighthouserc.js` a continuación indica que se deben recopilar cinco ejecuciones de Lighthouse cada vez que se ejecuta `autorun`.
+
+8. Actualice `lighthouserc.js` para usar la propiedad `numberOfRuns`:
+
+    ```js
+    module.exports = {
+        // ...
+        collect: {
+          numberOfRuns: 5
+        },
+      // ...
+      },
+    };
+    ```
+
+9. Vuelva a ejecutar el comando de `autorun`:
+
+    ```shell
+    lhci autorun
+    ```
+
+    El resultado de la terminal debe mostrar que Lighthouse se ha ejecutado cinco veces en lugar de las tres predeterminadas:
+
+    ```shell
+    ✅  .lighthouseci/ directory writable
+    ✅  Configuration file found
+    ✅  Chrome installation found
+    ⚠️   GitHub token not set
+    Healthcheck passed!
+
+    Automatically determined ./dist as `staticDistDir`.
+    Set it explicitly in lighthouserc.json if incorrect.
+
+    Started a web server on port 64444...
+    Running Lighthouse 5 time(s) on http://localhost:64444/index.html
+    Run #1...done.
+    Run #2...done.
+    Run #3...done.
+    Run #4...done.
+    Run #5...done.
+    Done running Lighthouse!
+
+    Uploading median LHR of http://localhost:64444/index.html...success!
+    Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
+    No GitHub token set, skipping GitHub status check.
+
+    Done running autorun.
+    ```
+
+    Para conocer otras opciones de configuración, consulte la [documentación de configuración](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md) de Lighthouse CI.
+
+## Configure su proceso de CI para ejecutar Lighthouse CI {: #ci-setup }
+
+Lighthouse CI se puede utilizar con su herramienta de CI favorita. La [sección Configure su proveedor de CI](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#configure-your-ci-provider) de la documentación de Lighthouse CI contiene ejemplos de código que muestran cómo incorporar Lighthouse CI en los archivos de configuración de herramientas de CI comunes. Específicamente, estos ejemplos de código muestran cómo ejecutar Lighthouse CI para recopilar medidas de rendimiento durante el proceso de CI.
+
+El uso de Lighthouse CI para recopilar medidas de rendimiento es un buen lugar para comenzar con la supervisión del rendimiento. Sin embargo, los usuarios avanzados quizá quieran ir un paso más allá y usar Lighthouse CI para las compilaciones fallidas si no cumplen con los criterios predefinidos, como aprobar auditorías específicas de Lighthouse o cumplir con todos los presupuestos de desempeño. Este comportamiento se configura a través de la propiedad [`assert`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#assert) del archivo `lighthouserc.js`.
+
+Lighthouse CI admite tres niveles de afirmaciones:
+
+- `off`: ignorar las afirmaciones
+- `warn`: imprime los fallos en stderr
+- `error` : imprime los fallos en stderr y sale de Lighthouse CI con un [código de salida distinto de cero](https://www.gnu.org/software/bash/manual/html_node/Exit-Status.html#:~:text=A%20non%2Dzero%20exit%20status,N%20as%20the%20exit%20status.)
+
+A continuación se muestra un ejemplo de una configuración `lighthouserc.js` que incluye aserciones. Establece afirmaciones para las puntuaciones de las categorías de accesibilidad y rendimiento de Lighthouse. Para probar esto, agregue las afirmaciones que se muestran a continuación a su archivo `lighthouserc.js`, luego vuelva a ejecutar Lighthouse CI.
+
+```js
+module.exports = {
+  ci: {
+    collect: {
+      // ...
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['warn', {minScore: 1}],
+        'categories:accessibility': ['error', {minScore: 1}]
+      }
+    },
+    upload: {
+      // ...
+    },
+  },
+};
+```
+
+El resultado de consola que genera luce así:
+
+<figure>{% Img src="image/admin/ti9NuzxPKZCYVIzjjddc.png", alt="Captura de pantalla de un mensaje de advertencia generado por Lighthouse CI", width="800", height="431" %}</figure>
+
+Para obtener más información sobre las afirmaciones de Lighthouse CI, consulte la [documentación](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#assert).
+
+## Configure una GitHub Action para ejecutar Lighthouse CI {: #github-actions }
+
+{% Aside %} Esta sección asume que estás familiarizado con git, GitHub y las solicitudes de extracción de GitHub. {% endAside %}
+
+Se [puede usar una GitHub Action](https://github.com/features/actions) para ejecutar Lighthouse CI. Esto generará un nuevo informe Lighthouse cada vez que se envíe un cambio de código a cualquier rama de un repositorio de GitHub. Úselo junto con una [verificación de estado](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) para mostrar estos resultados en cada solicitud de extracción.
+
+<figure>{% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Captura de pantalla de una verificación de estado de GitHub", width="800", height="297" %}</figure>
+
+1. En la raíz de su repositorio, cree un directorio llamado `.github/workflows`. Los [flujos de trabajo](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow#about-workflows) de su proyecto irán a este directorio. Un flujo de trabajo es un proceso que se ejecuta en un momento predeterminado (por ejemplo, cuando se envía un código) y se compone de una o más acciones.
+
+    ```shell
+    mkdir .github
+    mkdir .github/workflows
+    ```
+
+2. En `.github/workflows` cree un archivo llamado `lighthouse-ci.yaml`. Este archivo contendrá la configuración para un nuevo flujo de trabajo.
+
+    ```shell
+    touch lighthouse-ci.yaml
+    ```
+
+3. Agregue el siguiente texto a `lighthouse-ci.yaml`.
+
+    ```yaml
+    name: Build project and run Lighthouse CI
+    on: [push]
+    jobs:
+      lhci:
+        name: Lighthouse CI
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@v1
+          - name: Use Node.js 10.x
+            uses: actions/setup-node@v1
+            with:
+              node-version: 10.x
+          - name: npm install
+            run: |
+              npm install
+          - name: run Lighthouse CI
+            run: |
+              npm install -g @lhci/cli@0.3.x
+              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+    ```
+
+    Esta configuración establece un flujo de trabajo que consta de un único trabajo que se ejecutará cada vez que se envíe un nuevo código al repositorio. Este trabajo tiene cuatro pasos:
+
+    - Consultar el repositorio en el que se ejecutará Lighthouse CI
+    - Instalar y configurar un nodo
+    - Instalar los paquetes npm necesarios
+    - Ejecutar Lighthouse CI y cargar los resultados en un almacenamiento público temporal.
+
+4. Confirme estos cambios y envíelos a GitHub. Si ha seguido correctamente los pasos anteriores, al enviar código a GitHub se activará la ejecución del flujo de trabajo que acaba de agregar.
+
+5. Para confirmar que Lighthouse CI se ha activado y ver el informe que generó, vaya a la pestaña **Acciones** de su proyecto. Debería ver el flujo de trabajo **Compilar el proyecto y el flujo de trabajo de ejecución de Lighthouse CI** en la lista de su confirmación más reciente.
+
+    <figure>{% Img src="image/admin/ougavsYk6faiNidNxIGQ.png", alt="Captura de pantalla de la pestaña 'Configuración' de GitHub", width="800", height="216" %}</figure>
+
+    Puede navegar hasta el informe Lighthouse correspondiente a una confirmación en particular desde la pestaña **Acciones.** Haga clic en la confirmación, haga clic en el paso del flujo de trabajo de **Lighthouse CI** y, a continuación, expanda los resultados del paso de **ejecución de Lighthouse CI**.
+
+    <figure>{% Img src="image/admin/aJF6FVHGOPpGNxKB3LjY.png", alt="Captura de pantalla de la pestaña 'Configuración' de GitHub", width="800", height="366" %}</figure>
+
+    Acaba de configurar una GitHub Action para ejecutar Lighthouse CI. Esto será más útil cuando se use junto con una [verificación de estado](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) de GitHub.
+
+### Configure una verificación de estado de GitHub {: #github-status-checks }
+
+Una verificación de estado, si está configurada, es un mensaje que aparece en cada RP y generalmente incluye información como los resultados de una prueba o el éxito de una compilación.
+
+<figure>{% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Captura de pantalla de la pestaña 'Configuración' de GitHub", width="800", height="297" %}</figure>
+
+Los pasos a continuación explican cómo configurar una verificación de estado para Lighthouse CI.
+
+1. Vaya a la [página GitHub de la aplicación Lighthouse CI](https://github.com/apps/lighthouse-ci) y haga clic en **Configurar**.
+
+2. (Opcional) Si forma parte de varias organizaciones en GitHub, elija la organización propietaria del repositorio para el que desea usar Lighthouse CI.
+
+3. Seleccione **Todos los repositorios** si desea habilitar Lighthouse CI en todos los repositorios o seleccione **Solo repositorios seleccionados** si solo desea usarlo en repositorios específicos y luego seleccione los repositorios. Luego haga clic en **Instalar y autorizar**.
+
+4. Copie el token que se muestra. Lo usará en el siguiente paso.
+
+5. Para agregar el token, navegue a la página de **Configuración** de su repositorio de GitHub, haga clic en **Secretos**, luego haga clic en **Agregar un nuevo secreto**.
+
+    <figure>{% Img src="image/admin/ZYH9cOHehImZLI6vov1r.png", alt="Captura de pantalla de la pestaña 'Configuración' de GitHub", width="800", height="375" %}</figure>
+
+6. Establezca el campo **Nombre** en `LHCI_GITHUB_APP_TOKEN` y establezca el campo **Valor** como el token que copió en el último paso y luego haga clic en el botón **Agregar secreto**.
+
+7. La verificación de estado está lista para su uso. Para probarla, [cree una nueva solicitud de extracción](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) o envíe una confirmación a una solicitud de extracción existente.
+
+## Configure el servidor Lighthouse CI {: #server-setup }
+
+El servidor Lighthouse CI proporciona un panel para explorar los informes históricos de Lighthouse. También puede actuar como un almacén de datos privado a largo plazo para los informes Lighthouse.
+
+<figure>{% Img src="image/admin/4xv6LLe6G48weVNl1CO1.png", alt="Captura de pantalla del panel de Lighthouse CI Server", width="800", height="581" %}</figure>
+
+<figure>{% Img src="image/admin/vp9hVBQGZk01fUMpIQ1Z.png", alt="Captura de pantalla de la comparación de dos informes de Lighthouse en Lighthouse CI Server", width="800", height="556" %}</figure>
+
+1. Elija qué compromisos comparar.
+2. La cantidad en que ha cambiado la puntuación de Lighthouse entre las dos confirmaciones.
+3. Esta sección solo muestra las estadísticas que han cambiado entre las dos confirmaciones.
+4. Las regresiones se resaltan en rosa.
+5. Las mejoras se resaltan en azul.
+
+Lighthouse CI Server se adapta mejor a los usuarios que se sienten cómodos al implementar y administrar su propia infraestructura.
+
+Para obtener información sobre cómo configurar el servidor Lighthouse CI, incluidas las recetas para usar Heroku y Docker para la implementación, consulte estas [instrucciones](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/server.md).
+
+## Conozca más
+
+- [Repositorio GitHub de Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)
diff --git a/src/site/content/es/blog/lighthouse-whats-new-6.0/index.md b/src/site/content/es/blog/lighthouse-whats-new-6.0/index.md
new file mode 100644
index 00000000000..c00ee395433
--- /dev/null
+++ b/src/site/content/es/blog/lighthouse-whats-new-6.0/index.md
@@ -0,0 +1,321 @@
+---
+layout: post
+title: Novedades de Lighthouse 6.0
+subhead: Nuevas métricas, actualización de la puntuación de rendimiento, nuevas auditorías y más.
+authors:
+  - cjamcl
+date: 2020-05-19
+hero: image/admin/93kZL2w49CLIc514qojJ.svg
+alt: Logotipo del faro.
+tags:
+  - blog
+  - performance
+  - lighthouse
+---
+
+¡Hoy estamos lanzamos Lighthouse 6.0!
+
+[Lighthouse](https://github.com/GoogleChrome/lighthouse/) es una herramienta automatizada de auditoría de sitios web que ayuda a los desarrolladores con oportunidades y diagnósticos para mejorar la experiencia del usuario de sus sitios. Está disponible en Chrome DevTools, npm (como módulo de nodo y como CLI) o como extensión del navegador (en [Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) y [Firefox](https://addons.mozilla.org/firefox/addon/google-lighthouse/)). Es la [base](/measure/) de muchos servicios de Google, incluyendo web.dev/measure y [PageSpeed Insights](https://pagespeed.web.dev/).
+
+Lighthouse 6.0 está disponible inmediatamente en npm y en [Chrome Canary](https://www.google.com/chrome/canary/). Otros servicios de Google que aprovechan Lighthouse recibirán la actualización a fin de mes. Llegará a Chrome Stable en Chrome 84 (mediados de julio).
+
+Para probar la CLI de Lighthouse Node, use los siguientes comandos:
+
+```bash
+npm install -g lighthouse
+lighthouse https://www.example.com --view
+```
+
+Esta versión de Lighthouse viene con una gran cantidad de cambios que se [enumeran en el registro de cambios 6.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0). Cubriremos los aspectos más destacados en este artículo.
+
+- [Nuevas métricas](#new-metrics)
+- [Actualización de la puntuación de rendimiento](#score)
+- [Nuevas auditorías](#new-audits)
+- [Lighthouse CI](#ci)
+- [Panel de DevTools de Chrome renombrado](#devtools)
+- [Emulación móvil](#emulation)
+- [Extensión del navegador](#extension)
+- [Presupuestos](#budgets)
+- [Enlaces de ubicación de origen](#source-location)
+- [En el horizonte](#horizon)
+- [¡Gracias!](#thanks)
+
+## Nuevas métricas {: #new-metrics }
+
+<figure>{% Img src="image/admin/Yo1oNtdfEF4PhD7zHDHQ.png", alt="Métricas de Lighthouse 6.0.", width="600", height="251" %}</figure>
+
+Lighthouse 6.0 introduce tres nuevas métricas para informar. Dos de estas nuevas métricas, Despliegue del contenido más extenso (LCP) y el cambio acumulativo del diseño (CLS), son implementaciones de laboratorio de [Core Web Vitals](/vitals/).
+
+### Despliegue del contenido más extenso (LCP) {: #lcp }
+
+[El Despliegue del contenido más extenso (Largest Contentful Paint - LCP)](https://www.web.dev/lcp/) es una medida de la experiencia de carga percibida. Marca el punto durante la carga de la página cuando el contenido principal o "más extenso" se ha cargado y es visible para el usuario. LCP es un complemento importante de Primer despliegue de contenido (First Contentful Paint - FCP) que solo captura el comienzo de la experiencia de carga. LCP proporciona una señal a los desarrolladores sobre la rapidez con la que un usuario puede ver el contenido de una página. Una puntuación de LCP por debajo de 2.5 segundos se considera "Buena".
+
+Para obtener más información, [vea este análisis profundo de LCP](https://youtu.be/diAc65p15ag) de Paul Irish.
+
+### Cambio acumulativo de diseño (CLS) {: #cls }
+
+[El cambio acumulativo de diseño (Cumulative Layout Shift - CLS)](https://www.web.dev/cls/) es una medida de estabilidad visual. Mide cuánto cambia visualmente el contenido de una página. Una puntuación CLS baja es una señal para los desarrolladores de que sus usuarios no están experimentando cambios de contenido indebidos; una puntuación CLS por debajo de 0.10 se considera "Buena".
+
+CLS en un entorno de laboratorio se mide hasta el final de la carga de la página. Mientras que en el campo, puede medir CLS hasta la primera interacción del usuario o incluyendo todas las entradas del usuario.
+
+Para obtener más información, [vea este análisis profundo de CLS](https://youtu.be/zIJuY-JCjqw) de Annie Sullivan.
+
+### Tiempo total de bloqueo (TBT) {: #tbt}
+
+[El tiempo de bloqueo total (Total Blocking Time - TBT)](https://www.web.dev/tbt/) cuantifica la capacidad de respuesta de la carga, midiendo la cantidad total de tiempo en que el hilo principal estuvo bloqueado el tiempo suficiente para evitar la respuesta de entrada. TBT mide la cantidad total de tiempo entre Primer despliegue de contenido (FCP) y Tiempo para interactuar (Time to Interactive - TTI). Es una métrica complementaria de TTI y aporta más matices a la cuantificación de la actividad del hilo principal que bloquea la capacidad de un usuario para interactuar con su página.
+
+Además, TBT se correlaciona bien con la métrica de campo [Demora de la primera entrada](/fid/) (First Input Delay - FID), que es un Core Web Vital.
+
+## Actualización de la puntuación de rendimiento {: #score }
+
+La [puntuación de rendimiento en Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) se calcula a partir de una combinación ponderada de varias métricas para resumir la velocidad de una página. A continuación, se muestra la fórmula de puntuación de rendimiento de la versión 6.0.
+
+&lt;style&gt; .lh-table { min-width: unset; } .lh-table td { min-width: unset; } &lt;/style&gt;
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>Fase</strong></th>
+<th><strong>Nombre de métrica</strong></th>
+<th><strong>Peso métrico</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Temprana (15 %)</td>
+<td>Primer despliegue de contenido (FCP)</td>
+<td>15 %</td>
+</tr>
+<tr>
+<td>Media (40 %)</td>
+<td>Índice de velocidad (Speed Index - SI)</td>
+<td>15 %</td>
+</tr>
+<tr>
+<td></td>
+<td>Despliegue del contenido más extenso (LCP)</td>
+<td>25 %</td>
+</tr>
+<tr>
+<td>Tarde (15 %)</td>
+<td>Tiempo para interactuar (TTI)</td>
+<td>15 %</td>
+</tr>
+<tr>
+<td>Hilo principal (25 %)</td>
+<td>Tiempo total de bloqueo (Total Blocking Time - TBT)</td>
+<td>25 %</td>
+</tr>
+<tr>
+<td>Previsibilidad (5 %)</td>
+<td>Cambio cumulativo de diseño acumulativo (CLS)</td>
+<td>5 %</td>
+</tr>
+</tbody>
+</table>
+
+Si bien se han agregado tres nuevas métricas, se han eliminado tres antiguas: Primer despliegue significativo (First Meaningful Paint), Primera CPU inactiva (First CPU Idle) y FID de máximo potencial. Los pesos de las métricas restantes se han modificado para enfatizar la interactividad del hilo principal y la previsibilidad del diseño.
+
+A modo de comparación, aquí está la puntuación de la versión 5:
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>Fase</strong></th>
+<th><strong>Nombre de métrica</strong></th>
+<th><strong>Peso</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Temprana (23 %)</td>
+<td>Primera despliegue de contenido (FCP)</td>
+<td>23 %</td>
+</tr>
+<tr>
+<td>Media (34 %)</td>
+<td>Índice de velocidad (SI)</td>
+<td>27 %</td>
+</tr>
+<tr>
+<td></td>
+<td>Primer despliegue significativo (FMP)</td>
+<td>7 %</td>
+</tr>
+<tr>
+<td>Finalizado (46 %)</td>
+<td>Tiempo para interactuar (TTI)</td>
+<td>33 %</td>
+</tr>
+<tr>
+<td></td>
+<td>Primera CPU inactiva (FCI)</td>
+<td>13 %</td>
+</tr>
+<tr>
+<td>Hilo principal</td>
+<td>FID de potencial máximo</td>
+<td>0 %</td>
+</tr>
+</tbody>
+</table>
+
+{% Img src="image/admin/gJnkac5fOfjOvmeLXdPO.png", alt="Cambios en la puntuación de Lighthouse entre las versiones 5 y 6", width="800", height="165" %}
+
+Algunos aspectos destacados de los cambios de puntuación entre las versiones 5 y 6 de Lighthouse:
+
+- **El peso de TTI se ha reducido del 33 % al 15 %.** Esto fue en respuesta directa a los comentarios de los usuarios sobre la variabilidad de TTI, así como a las inconsistencias en las optimizaciones de métricas que conducen a mejoras en la experiencia del usuario. TTI sigue siendo una señal útil para cuando una página es completamente interactiva, sin embargo, con TBT como complemento, la [variabilidad se reduce](https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit#heading=h.vkfjuiyx1s5l). Con este cambio de puntuación, esperamos que los desarrolladores se sientan motivados de manera más eficaz a optimizar la interactividad del usuario.
+- **El peso de FCP se ha reducido del 23 % al 15 %.** Medir solo cuando se despliega el primer píxel (FCP) no nos ofrecía un panorama completo. Combinarlo con medir cuándo los usuarios pueden ver qué es lo que más probablemente les importa (LCP) refleja mejor la experiencia de carga.
+- **Max Potential FID** **ha quedado obsoleto**. Ya no se muestra en el informe, pero todavía está disponible en JSON. Ahora se recomienda observar TBT para cuantificar su interactividad en lugar de FID de potencial máximo.
+- **La primera pintura significativa ha quedado obsoleta.** Esta métrica era demasiado variada y no tenía un camino viable hacia la estandarización, ya que la implementación es específica de los componentes internos de renderizado de Chrome. Si bien algunos equipos consideran que la sincronización de FMP vale la pena en su sitio, la métrica no recibirá mejoras adicionales.
+- **Primera CPU inactiva queda obsoleta** porque no es lo suficientemente distinta de TTI. Ahora, TBT y TTI son las métricas de referencia para la interactividad.
+- El peso de CLS es relativamente bajo, aunque esperamos aumentarlo en una versión principal futura.
+
+### Cambios en las puntuaciones {: #score-shifts }
+
+¿Cómo afectan estos cambios a las puntuaciones de los sitios reales? Hemos publicado un [análisis](https://docs.google.com/spreadsheets/d/1BZFh7AyyaLHCj5LGAbrn3m72ysu4yv8okyHG-f3MoXI/edit?usp=sharing) de los cambios de puntuación utilizando dos conjuntos de datos: un [conjunto general de sitios](https://gist.github.com/connorjclark/8afe673d4e7c6e17204834a256e7caf1) y un [conjunto de sitios estáticos](https://gist.github.com/connorjclark/0be52464887ae3a6f29ad5a798122e0c#file-readme-md) creados con [Eleventy](https://www.11ty.dev/). En resumen, ~ 20 % de los sitios obtienen puntuaciones notablemente más altas, ~ 30 % apenas tienen cambios y ~ 50 % ven una disminución de al menos cinco puntos.
+
+Los cambios de puntuación se pueden dividir en tres componentes principales:
+
+- cambios en el peso de la puntuación
+- corrección de errores en implementaciones de métricas subyacentes
+- cambios en la curva de puntuación individual
+
+Los cambios en el peso de la puntuación y la introducción de tres nuevas métricas motivaron la mayoría de los cambios en la puntuación general. Las nuevas métricas que los desarrolladores aún tienen que optimizar tienen un peso significativo en la puntuación de rendimiento de la versión 6. Si bien el puntaje de desempeño promedio del corpus de prueba en la versión 5 fue de alrededor de 50, los puntajes promedio en las nuevas métricas de Tiempo de bloqueo total y Pintura con despliegue más extenso fueron de alrededor de 30. Juntas, esas dos métricas representan el 50 % del peso de la puntuación de rendimiento en la versión 6 de Lighthouse, por lo que, naturalmente, un gran porcentaje de sitios obtuvo puntuaciones menores.
+
+Las correcciones de errores en el cálculo de métricas subyacentes pueden dar como resultado puntuaciones diferentes. Esto afecta a relativamente pocos sitios, pero puede tener un impacto considerable en determinadas situaciones. En general, alrededor del 8 % de los sitios experimentaron una mejora en la puntuación y alrededor del 4 % de los sitios vieron una disminución en la puntuación debido a cambios en la implementación de métricas. Aproximadamente el 88 % de los sitios no se vieron afectados por estas correcciones.
+
+Los cambios de la curva de puntuación individual también afectaron los cambios de puntuación general, aunque de forma bastante leve. Periódicamente nos aseguramos de que la curva de puntuación se ajusta con las métricas observadas en el [conjunto de datos HTTPArchive](http://httparchive.org/). Excluyendo los sitios afectados por cambios importantes en la implementación, los ajustes menores en la curva de puntuación para métricas individuales mejoraron las puntuaciones de aproximadamente el 3 % de los sitios y disminuyeron las puntuaciones de aproximadamente el 4 % de los sitios. Aproximadamente el 93 % de los sitios no se vieron afectados por este cambio.
+
+### Calculadora de puntuación {: #calculator }
+
+Hemos publicado una [calculadora de puntuación](https://googlechrome.github.io/lighthouse/scorecalc/) para ayudarle a explorar la puntuación de rendimiento. La calculadora también le ofrece una comparación entre las puntuaciones de la versión 5 y 6 de Lighthouse. Cuando ejecuta una auditoría con Lighthouse 6.0, el informe viene con un enlace a la calculadora con sus resultados completos.
+
+<figure>{% Img src="image/admin/N8cRFUnM526m3fB4GQVf.png", alt="Calculadora de puntuación de Lighthouse.", width="600", height="319" %}<figcaption> ¡Muchas gracias a <a href="https://twitter.com/anatudor">Ana Tudor</a> por la mejora del indicador!</figcaption></figure>
+
+## Nuevas auditorías {: #new-audits }
+
+### JavaScript no utilizado {: #unused-javascript }
+
+[Aprovechamos la cobertura del código de DevTools](https://developer.chrome.com/docs/devtools/coverage/) en una nueva auditoría: [**JavaScript no utilizado**](/remove-unused-code/).
+
+Esta auditoría no es *completamente* nueva: se [agregó a mediados de 2017](https://github.com/GoogleChrome/lighthouse/issues/1852#issuecomment-306900595), pero debido a la sobrecarga de rendimiento, se deshabilitó de forma predeterminada para mantener Lighthouse lo más rápido posible. La recopilación de estos datos de cobertura es mucho más eficiente ahora, por lo que nos sentimos cómodos habilitándolos de forma predeterminada.
+
+### Auditorías de accesibilidad {: #a11y }
+
+Lighthouse utiliza la maravillosa biblioteca [axe-core](https://github.com/dequelabs/axe-core) para impulsar la categoría de accesibilidad. En Lighthouse 6.0, hemos agregado las siguientes auditorías:
+
+- [aria-hidden-body](/aria-hidden-body/)
+- [aria-hidden-focus](/aria-hidden-focus/)
+- [aria-input-field-name](/aria-input-field-name/)
+- [aria-toggle-field-name](/aria-toggle-field-name/)
+- [form-field-multiple-labels](/form-field-multiple-labels/)
+- [heading-order](/heading-order/)
+- [duplicate-id-active](/duplicate-id-active/)
+- [duplicate-id-aria](/duplicate-id-aria/)
+
+### Icono enmascarable {: #maskable-icon }
+
+[Iconos enmascarables](/maskable-icon/) es un nuevo formato de icono que hace que los iconos de su PWA se vean geniales en todo tipo de dispositivos. Para ayudar a que su PWA se vea lo mejor posible, hemos introducido una nueva auditoría para verificar si su manifest.json es compatible con este nuevo formato.
+
+### Declaración de juego de caracteres {: #charset }
+
+El [elemento meta juego de caracteres](https://developer.chrome.com/docs/lighthouse/best-practices/charset/) declara qué codificación de caracteres debe usarse para interpretar un documento HTML. Si falta este elemento, o si se declara de forma tardía en el documento, los navegadores emplean una serie de heurísticas para adivinar qué codificación se debe utilizar. Si un navegador adivina incorrectamente y se encuentra un elemento de metacaracteres de forma tardía, el analizador generalmente descarta todo el trabajo realizado hasta el momento y comienza de nuevo, lo que genera malas experiencias para el usuario. Esta nueva auditoría verifica que la página tenga una codificación de caracteres válida y que esté definida al principio y al principio.
+
+## Lighthouse CI {: #ci }
+
+En [CDS, en noviembre pasado](/lighthouse-evolution-cds-2019/#lighthouse-ci-alpha-release), anunciamos [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci), el servidor y Node CLI de código abierto que rastrea los resultados de Lighthouse en cada confirmación en su proceso de integración continua, y hemos recorrido un largo camino desde el lanzamiento alfa. Lighthouse CI ahora tiene soporte para numerosos proveedores de CI, incluidos Travis, Circle, GitLab y GitHub Actions. [Las imágenes docker](https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs/recipes) listas para implementar facilitan la configuración, y un rediseño integral del panel ahora revela tendencias en todas las categorías y métricas en Lighthouse para un análisis detallado.
+
+Empiece a utilizar Lighthouse CI en su proyecto hoy mismo siguiendo nuestra [guía de introducción](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md).
+
+<figure data-float="left">{% Img src="image/admin/sXnTzewqGuc84MOCzFJe.png", alt="Lighthouse CI.", width="600", height="413", linkTo=true %}</figure>
+
+<figure data-float="left">{% Img src="image/admin/uGT7AUJEQeqK1vlKySLb.png", alt="Lighthouse CI.", width="600", height="412", linkTo=true %}</figure>
+
+<figure>{% Img src="image/admin/ZR48KZebW43eyAvB1RkT.png", alt="Lighthouse CI.", width="600", height="354", linkTo=true %}</figure>
+
+## Panel de DevTools de Chrome renombrado {: #devtools }
+
+Hemos cambiado el nombre del panel **Auditorías** a panel de **Lighthouse**. ¡Eso mismo!
+
+Dependiendo del tamaño de la ventana de DevTools, el panel probablemente esté detrás del botón `»` Puede arrastrar la pestaña para cambiar el orden.
+
+Para exhibir rápidamente el panel con el [menú de Comando](https://developer.chrome.com/docs/devtools/command-menu/):
+
+1. {% Instruction 'devtools', 'none' %}
+2. {% Instruction 'devtools-command', 'none' %}
+3. Empiece escribiendo "Lighthouse".
+4. Presione `Enter`.
+
+## Emulación móvil {: #emulation }
+
+Lighthouse sigue una mentalidad centrada en los dispositivos móviles. Los problemas de rendimiento son más evidentes en condiciones móviles típicas, pero los desarrolladores a menudo no realizan pruebas en estas condiciones. Es por eso que la configuración predeterminada en Lighthouse aplica la emulación móvil. La emulación consta de:
+
+- Condiciones de CPU y red lentas simuladas (a través de un motor de simulación llamado [Lantern](https://github.com/GoogleChrome/lighthouse/blob/master/docs/lantern.md)).
+- Emulación de pantalla de dispositivo (la misma que se encuentra en Chrome DevTools).
+
+Desde el principio, Lighthouse ha utilizado Nexus 5X como dispositivo de referencia. En los últimos años, la mayoría de los ingenieros de rendimiento han estado utilizando Moto G4 para realizar pruebas. Ahora Lighthouse está haciendo lo mismo y ha cambiado su dispositivo de referencia a Moto G4. En la práctica, este cambio no es muy notorio, pero aquí están todos los cambios detectables por una página web:
+
+- El tamaño de la pantalla cambia de 412x660 px a 360x640 px.
+- La cadena del agente de usuario se cambia ligeramente, la parte del dispositivo que antes era `Nexus 5 Build/MRA58N` ahora será `Moto G (4)`.
+
+A partir de Chrome 81, Moto G4 también está disponible en la lista de emulación de dispositivos Chrome DevTools.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wMyHDbxs49CTJ831UBp7.png", alt="Lista de emulación de dispositivos de Chrome DevTools con Moto G4 incluido.", width="800", height="653" %}</figure>
+
+## Extensión del navegador {: #extension }
+
+La [extensión de Chrome para Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) ha sido una forma conveniente de ejecutar Lighthouse localmente. Desafortunadamente, implementar el soporte fue complicado. Sentimos que debido a que el panel  de **Lighthouse** de Chrome DevTools es una experiencia mejor (el informe se integra con otros paneles), podríamos reducir nuestra sobrecarga de ingeniería simplificando la extensión de Chrome.
+
+En lugar de ejecutar Lighthouse localmente, la extensión ahora usa la [API de PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started). Reconocemos que esto no será un reemplazo adecuado para algunos de nuestros usuarios. Estas son las diferencias clave:
+
+- PageSpeed Insights no puede auditar sitios web no públicos, ya que se ejecuta a través de un servidor remoto y no a través de su instancia local de Chrome. Si necesita auditar un sitio web no público, use el panel DevTools **Lighthouse** o Node CLI.
+- No se garantiza que PageSpeed Insights utilice la última versión de Lighthouse. Si desea utilizar la última versión, use Node CLI. La extensión del navegador se actualizará entre 1 y 2 semanas después del lanzamiento.
+- PageSpeed Insights es una API de Google, su uso constituye la aceptación de los Términos de servicio de la API de Google. Si no desea o no puede aceptar los términos del servicio, utilice el panel DevTools **Lighthouse** o Node CLI.
+
+La buena noticia es que simplificar la historia del producto nos permitió centrarnos en otros problemas de ingeniería. Como resultado, lanzamos la [extensión Lighthouse para Firefox](https://addons.mozilla.org/firefox/addon/google-lighthouse/).
+
+## Presupuestos {: #budgets }
+
+Lighthouse 5.0 introdujo [presupuestos de rendimiento](/performance-budgets-101/) que admitían la adición de umbrales para [la cantidad de cada tipo de recurso](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#resource-budgets) (como scripts, imágenes o css) que una página puede servir.
+
+Lighthouse 6.0 agrega [soporte para métricas presupuestarias](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#timing-budgets), por lo que ahora puede establecer umbrales para métricas específicas como FCP. Por ahora, los presupuestos solo están disponibles para Node CLI y Lighthouse CI.
+
+## Enlaces de ubicación de origen {: #source-location }
+
+Algunos de los problemas que Lighthouse encuentra sobre una página se pueden rastrear hasta una línea específica de código fuente y el informe indicará el archivo y la línea exactos que son relevantes. Para facilitar la exploración en DevTools, al hacer clic en las ubicaciones especificadas en el informe se abrirán los archivos relevantes en el panel **Fuentes.**
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>DevTools revela la línea exacta de código que causa el problema.</figcaption></figure>
+
+## En el horizonte {: #horizon }
+
+Lighthouse ha comenzado a experimentar con la recopilación de mapas de origen para impulsar nuevas funciones, como:
+
+- Detección de módulos duplicados en paquetes de JavaScript.
+- Detección de polyfills excesivos o transformaciones en el código enviado a los navegadores modernos.
+- Mejora de la auditoría de JavaScript no utilizado para proporcionar granularidad a nivel modular.
+- Visualizaciones de mapas de árbol que destacan los módulos que requieren acción.
+- Visualización del código fuente original de los elementos del informe con una "ubicación de origen".
+
+<figure>{% Img src="image/admin/iZPhM3KNQebgwCsgXTuf.png", alt="JavaScript no utilizado que muestra módulos de mapas de origen", width="600", height="566" %}<figcaption>. La auditoría de JavaScript no utilizado emplea mapas de origen para mostrar el código no utilizado en módulos empaquetados específicos.</figcaption></figure>
+
+Estas funciones estarán habilitadas de forma predeterminada en una versión futura de Lighthouse. Por ahora, puede ver las auditorías experimentales de Lighthouse con la siguiente bandera CLI:
+
+```bash
+lighthouse https://web.dev --view --preset experimental
+```
+
+## ¡Gracias! {: #thanks }
+
+Le agradecemos por usar Lighthouse y brindarnos sus comentarios. Sus comentarios nos ayudan a mejorar Lighthouse y esperamos que Lighthouse 6.0 aumente el rendimiento de sus sitios web.
+
+¿Qué puedes hacer a continuación?
+
+- Abrir Chrome Canary y probar el panel de **Lighthouse**.
+- Utilizar Node CLI: `npm install -g lighthouse && lighthouse https://yoursite.com --view`.
+- Hacer que [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci#lighthouse-ci) funcione con su proyecto.
+- Revisar la [documentación de auditoría de Lighthouse](/learn/#lighthouse).
+- ¡Divertirte mejorando la Internet!
+
+Nos apasiona la Internet y nos encanta trabajar con la comunidad de desarrolladores para crear herramientas que ayuden a mejorarla. Lighthouse es un proyecto de código abierto y extendemos un gran agradecimiento a todos los colaboradores que ayudaron con todo, desde correcciones de errores tipográficos hasta la refactorización de la documentación y nuevas auditorías. [Deseas contribuir?](https://github.com/GoogleChrome/lighthouse/blob/master/CONTRIBUTING.md) Pase por el [repositorio de Lighthouse en GitHub](https://github.com/GoogleChrome/lighthouse).
diff --git a/src/site/content/es/blog/link-prefetch/index.md b/src/site/content/es/blog/link-prefetch/index.md
new file mode 100644
index 00000000000..2c7a6e0052a
--- /dev/null
+++ b/src/site/content/es/blog/link-prefetch/index.md
@@ -0,0 +1,142 @@
+---
+title: Recuperar recursos para acelerar las futuras navegaciones
+subhead: |2-
+
+  Obtenga más información sobre el indicador de recursos rel = prefetch y cómo usarlo.
+date: 2019-09-12
+authors:
+  - demianrenzulli
+description: |2-
+
+  Obtenga más información sobre el indicador de recursos rel = prefetch y cómo usarlo.
+tags:
+  - blog
+  - performance
+codelabs: codelab-two-ways-to-prefetch
+feedback:
+  - api
+---
+
+Las investigaciones muestran que los [tiempos de carga más rápidos dan como resultado tasas de conversión más altas](https://wpostats.com/) y mejores experiencias de usuario. Si tiene una idea de cómo se mueven los usuarios a través de su sitio web y qué páginas probablemente visitarán a continuación, puede mejorar los tiempos de carga de las navegaciones futuras si descarga con anticipación los recursos para esas páginas.
+
+Esta guía explica cómo lograrlo con `<link rel=prefetch>`, un [indicador de recursos](https://www.w3.org/TR/resource-hints/) que le permite implementar la precarga de una manera fácil y eficiente.
+
+## Mejore la navegación con `rel=prefetch`
+
+Agregar `<link rel=prefetch>` a una página web le indica al navegador que descargue páginas enteras, o algunos de los recursos (como scripts o archivos CSS), que el usuario pueda necesitar en el futuro. Esto puede mejorar las estadísticas como [First Contentful Paint](/fcp/) (Primer despliegue del contenido) y [Time to Interactive](/tti/) (Tiempo para interacción) y, a menudo, puede hacer que las navegaciones posteriores parezcan cargarse instantáneamente.
+
+```html
+<link rel="prefetch" href="/articles/" as="document">
+```
+
+{% Img src="image/admin/djLGrbmj5eovwa6qhlm1.png", alt="Un diagrama que muestra cómo funciona la precarga de enlaces", width="800", height="413" %}
+
+El indicador `prefetch` consume bytes adicionales para los recursos que no se necesitan de inmediato, por lo que esta técnica debe aplicarse con cuidado. Únicamente precargue los recursos cuando esté seguro de que los usuarios los necesitarán. Considere no realizar una precarga cuando los usuarios tengan conexiones lentas. Puede detectar eso con la [API de información de red](/adaptive-serving-based-on-network-quality/).
+
+Hay diferentes formas de determinar qué enlaces precargar. La más simple es precargar el primer enlace o los primeros enlaces de la página actual. También hay bibliotecas que utilizan enfoques más sofisticados, que se explican más adelante en esta publicación.
+
+## Casos de uso
+
+### Precargar las páginas siguientes
+
+Precargue los documentos HTML cuando las páginas siguientes sean predecibles, de modo que cuando se haga clic en un enlace, la página se cargue instantáneamente.
+
+Por ejemplo, en una página de listado de productos, puede precargar la página del producto más popular de la lista. En algunos casos, la siguiente navegación es incluso más fácil de anticipar: en una página de carrito de compras, la probabilidad de que un usuario visite la página de pago suele ser alta, lo que la convierte en un buen candidato para la precarga.
+
+{% Aside %} eBay implementó la precarga de los primeros cinco resultados en una página de búsqueda para acelerar la carga de páginas futuras y observó un impacto positivo en las tasas de conversión. {% endAside %}
+
+### Precargar activos estáticos
+
+Precargue los recursos estáticos, como scripts u hojas de estilo, cuando se puedan predecir las secciones posteriores que el usuario podría visitar. Esto es especialmente útil cuando esos activos se comparten en muchas páginas.
+
+Por ejemplo, Netflix aprovecha el tiempo que los usuarios pasan en las páginas desconectadas para precargar Reaccione, que se utilizará una vez que los usuarios inicien sesión. Gracias a esto, [redujeron el tiempo de interacción en un 30% para futuras navegaciones](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9).
+
+{% Aside 'gotchas' %} En el momento de escribir este artículo, es posible compartir recursos precargados entre páginas alojadas desde diferentes orígenes. Cuando se [envía la caché HTTP de doble clave](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/6KKXv1PqPZ0/oguPntMGDgAJ), esto solo funcionará para navegaciones de nivel superior y subrecursos del mismo origen, pero no será posible reutilizar subrecursos precargados entre diferentes orígenes. Esto significa que, si `a.com` precarga el recurso `b.com/library.js`, dicho recurso no estará disponible en la caché de `c.com`. Algunos navegadores, como los basados en WebKit, ya [crean particiones en cachés y almacenamiento HTML5](https://webkit.org/blog/7675/intelligent-tracking-prevention/) para todos los dominios de terceros. {% endAside %}
+
+### Precarga de fragmentos de JavaScript bajo demanda
+
+[La división de código](/reduce-javascript-payloads-with-code-splitting) de sus paquetes de JavaScript le permite cargar inicialmente solo partes de una aplicación y cargar de forma diferida el resto. Si está utilizando esta técnica, puede aplicar la precarga a rutas o componentes que no se necesitan inmediatamente pero que probablemente se solicitarán pronto.
+
+Por ejemplo, si tiene una página que contiene un botón que abre un cuadro de diálogo que contiene un selector de emoji, puede dividirlo en tres partes de JavaScript: inicio, diálogo y selector. El inicio y el diálogo se pueden cargar inicialmente, mientras que el selector se puede cargar a petición. Herramientas como Webpack le permiten indicarle al navegador que busque previamente estos fragmentos a pedido.
+
+## Cómo implementar `rel=prefetch`
+
+La forma más sencilla de implementar `prefetch` es agregar una etiqueta `<link>` `<head>` del documento:
+
+```html
+<head>
+	...
+	<link rel="prefetch" href="/articles/" as="document">
+	...
+</head>
+
+```
+
+El atributo `as` no es obligatorio, pero se recomienda. Ayuda a que el navegador establezca los encabezados correctos y determine si el recurso ya está en la caché. Los valores de ejemplo para este atributo incluyen: `document`, `script`, `style`, `font`, `image` y [otros](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
+
+También puede iniciar la precarga a través mediante el encabezado HTTP [`Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link):
+
+`Link: </css/style.css>; rel=prefetch`
+
+Una ventaja de especificar un indicador de precarga en el encabezado HTTP es que el navegador no necesita analizar el documento para encontrar el indicador de recursos, lo que puede ofrecer pequeñas mejoras en algunos casos.
+
+{% Aside %}  `prefetch` es compatible con [todos los navegadores modernos excepto Safari](https://caniuse.com/#search=prefetch). Puede implementar una técnica alternativa para Safari con las solicitudes [XHR](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) o con la [API Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API). {% endAside %}
+
+### Precarga de módulos JavaScript con comentarios mágicos de webpack
+
+Webpack le permite precargar scripts para rutas o funcionalidades que razonablemente ciertos usuarios visitarán o usarán pronto.
+
+El siguiente fragmento de código carga de forma diferida una función de clasificación de la biblioteca [lodash](https://lodash.com/) para ordenar un grupo de números que se enviarán mediante un formulario:
+
+```js
+form.addEventListener("submit", e => {
+	e.preventDefault()
+	import('lodash.sortby')
+		.then(module => module.default)
+		.then(sortInput())
+		.catch(err => { alert(err) });
+});
+```
+
+En lugar de esperar a que se produzca el evento "enviar" para cargar esta funcionalidad, puede precargar este recurso para aumentar las posibilidades de tenerlo disponible en la caché para cuando el usuario envíe el formulario. Webpack permite eso mediante los [comentarios mágicos](https://webpack.js.org/api/module-methods/#magic-comments) dentro de `import()`:
+
+```js/2
+form.addEventListener("submit", e => {
+   e.preventDefault()
+   import(/* webpackPrefetch: true */ 'lodash.sortby')
+         .then(module => module.default)
+         .then(sortInput())
+         .catch(err => { alert(err) });
+});
+```
+
+Esto le indica a Webpack que inyecte la etiqueta `<link rel="prefetch">` en el documento HTML:
+
+```html
+<link rel="prefetch" as="script" href="1.bundle.js">
+```
+
+### Precarga inteligente con Quicklink y Guess.js
+
+También puede implementar una precarga más inteligente con bibliotecas que utilizan la `prefetch` bajo el capó:
+
+- [Quicklink](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) utiliza la [API de observador de intersecciones](https://github.com/GoogleChromeLabs/quicklink) para detectar cuándo los enlaces entran en la ventana gráfica y precarga los recursos enlazados durante el [tiempo de inactividad](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback). Bono: ¡Quicklink pesa menos de 1 KB!
+- [Guess.js](https://github.com/guess-js) utiliza informes analíticos para crear un modelo predictivo que se utiliza para [precargar de forma inteligente](/predictive-prefetching/) solo lo que el usuario probablemente necesite.
+
+Tanto Quicklink como Guess.js utilizan la [API de información de red](https://developer.mozilla.org/docs/Web/API/Network_Information_API) para evitar la precarga si un usuario está en una red lenta o tiene la función [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data) activada.
+
+{% Aside %} Una empresa de vinos, Jabong, implementó la precarga con Quicklink y logró un tiempo de interacción 2,7 s más rápido en las páginas futuras. {% endAside %}
+
+## Precarga debajo del capó
+
+Los indicadores de recursos no son instrucciones obligatorias y depende del navegador decidir si se ejecutan y cuándo.
+
+Puede utilizar la precarga varias veces en la misma página. El navegador pone en cola todas las sugerencias y solicita cada recurso cuando está [inactivo](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ#How_is_browser_idle_time_determined.3F). En Chrome, si una precarga no ha terminado de cargarse y el usuario navega hasta el recurso destinado de precarga, el navegador recoge la carga en curso como navegación (otros proveedores de navegadores pueden implementar esto de manera diferente).
+
+La precarga tiene lugar en la [prioridad "más baja"](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit), por lo que los recursos precargados no compiten por el ancho de banda con los recursos necesarios en la página actual.
+
+Los archivos precargados se almacenan en la [caché HTTP](https://developer.mozilla.org/docs/Web/HTTP/Caching) o en la [memoria caché](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) (en función de si el recurso se puede almacenar en caché o no), durante un período de tiempo que varía según los navegadores. Por ejemplo, en Chrome, los recursos se mantienen durante cinco minutos, después de los cuales se aplican las reglas normales de control de caché para el recurso.
+
+## Conclusión
+
+El uso de `prefetch` puede mejorar en gran medida los tiempos de carga de futuras navegaciones e incluso hacer que las páginas parezcan cargarse instantáneamente. La técnica `prefetch` es ampliamente compatible con los navegadores modernos, lo que la convierte en una técnica atractiva para mejorar la experiencia de navegación de muchos usuarios. Esta técnica requiere cargar bytes adicionales que podrían no usarse, así que tenga cuidado cuando la use. Hágalo solo cuando sea necesario, e idealmente, solo en redes rápidas.
diff --git a/src/site/content/es/blog/long-tasks-devtools/index.md b/src/site/content/es/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..cca3116b922
--- /dev/null
+++ b/src/site/content/es/blog/long-tasks-devtools/index.md
@@ -0,0 +1,55 @@
+---
+title: "¿Las tareas largas de JavaScript están retrasando su Time to Interactive?"
+subhead: Aprenda a diagnosticar trabajos costosos que impiden la interacción del usuario.
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: Un reloj en el que se vierte arena en su interior
+description: Las tareas largas pueden mantener el hilo principal ocupado, retrasando la interacción del usuario. Chrome DevTools ahora puede visualizar las tareas largas, lo que facilita la visualización de las tareas que deben optimizarse.
+tags:
+  - blog
+  - performance
+---
+
+**tl; dr: Las tareas largas pueden mantener el hilo principal ocupado, retrasando la interacción del usuario. Chrome DevTools ahora puede visualizar las tareas largas, lo que facilita la visualización de las tareas que deben optimizarse.**
+
+Si utiliza Lighthouse para auditar sus páginas, es posible que esté familiarizado con el [Time to Interactive](/tti/), una métrica que representa el momento en que los usuarios pueden interactuar con su página y obtener una respuesta. Pero, ¿sabía que las tareas largas (JavaScript) pueden contribuir en gran medida a un TTI deficiente?
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Time to Interactive mostrado en el informe de Lighthouse", width="800", height="169" %}
+
+## ¿Qué son las tareas largas?
+
+Una [Tarea larga](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API) es un código de JavaScript que monopoliza el hilo principal durante largos periodos de tiempo, lo que causa que la interfaz de usuario se "congele".
+
+Mientras se carga una página web, las tareas largas pueden ocupar el hilo principal y hacer que la página no responda a la entrada del usuario, incluso si parece estar lista. Los clics y los toques con frecuencia no funcionan porque los asistentes de eventos, los controladores de clics, etc., aún no se han adjuntado.
+
+Las tareas largas que consumen muchos recursos del CPU ocurren debido a un trabajo complejo que toma más de 50ms. ¿Por qué 50ms? [El modelo RAIL](/rail/) sugiere que procese los eventos de entrada del usuario en [50ms](/rail/#response-process-events-in-under-50ms) para asegurar una respuesta visible en 100ms. Si no lo hace, la conexión entre la acción y la reacción se interrumpe.
+
+## ¿Hay tareas largas en mi página que podrían retrasar la interactividad?
+
+Hasta ahora, era necesario buscar manualmente los "bloques amarillos largos" del script de más de 50ms de duración en [Chrome DevTools](https://developer.chrome.com/docs/devtools/) o utilizar la [API de tareas largas](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) para averiguar qué tareas estaban retrasando la interactividad. Esto podría ser un poco engorroso.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="Una captura de pantalla del panel de rendimiento de  DevTools muestra las diferencias entre las tareas cortas y las largas", width="800", height="450" %}
+
+Para facilitar el flujo de trabajo en la auditoría de rendimiento, [DevTools ahora visualiza las tareas largas](https://developers.google.com/web/updates/2019/03/devtools#longtasks). Las tareas (que se muestran en gris) tienen banderas rojas si son tareas largas.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="DevTools visualiza las tareas largas como barras grises en el panel de rendimiento con una bandera roja para las tareas largas", width="800", height="450" %}
+
+- Registre un seguimiento en el [panel de rendimiento](https://developer.chrome.com/docs/devtools/evaluate-performance/) al cargar una página web.
+- Busque una bandera roja en la visualización del hilo principal. Debería ver que las tareas ahora son grises ("Tarea").
+- Si desliza el cursor sobre una barra, sabrá la duración de la tarea y si se considera como "larga".
+
+## ¿Cuál es la causa de que mis tareas sean largas?
+
+Para descubrir qué está provocando una tarea larga, seleccione la barra de **tareas gris.** En el cajón de abajo, seleccione De **abajo hacia arriba** y **Agrupar por actividad** . Esto le permite ver qué actividades contribuyeron más (en total) a la tarea que tardó tanto en completarse. A continuación, parece ser un conjunto costoso de consultas DOM.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="Seleccionar una tarea larga (etiquetada como 'Tarea') en DevTools nos permitirá analizar detalladamente las actividades relacionadas con ella.", width="800", height="450" %}
+
+## ¿Cuáles son las formas más comunes de optimizar las tareas largas?
+
+Los scripts grandes normalmente son la causa principal de las tareas largas, así que considere [dividirlos](/reduce-javascript-payloads-with-code-splitting). Asimismo, eche un vistazo a los scripts de terceros, ya que sus tareas largas pueden retrasar el contenido principal para que sea interactivo.
+
+Divida todo su trabajo en pequeños fragmentos (que se ejecuten en &lt; 50ms) y ejecute estos fragmentos en el lugar y momento adecuados, el lugar adecuado puede estar incluso fuera del hilo principal, en un worker. [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/) de Phil Walton es una buena lectura sobre este tema.
+
+Mantenga sus páginas adaptables. Si minimiza las tareas largas, se asegurará de que sus usuarios tengan una experiencia agradable cuando visiten su sitio. Para obtener más información sobre las tareas largas, consulte [Métricas de rendimiento centradas en el usuario](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks).
diff --git a/src/site/content/es/blog/maskable-icon/index.md b/src/site/content/es/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..2cfcc94582d
--- /dev/null
+++ b/src/site/content/es/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: Soporte de íconos adaptables en PWAs con íconos enmascarables
+subhead: Un nuevo formato de ícono para utilizar íconos adaptables en plataformas de soporte.
+description: Los íconos enmascarables son un nuevo formato de ícono que te dan más control y permiten que tu Aplicación Web Progresiva (PWA por sus siglas en inglés ) utilice íconos adaptables. Al suministrar un ícono enmascarable, tu ícono puede verse fantástico en todos los dispositivos Android.
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: Íconos contenidos dentro de círculos blancos en comparación con íconos que cubren todo su círculo
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## ¿Qué son los iconos enmascarables? {: #qué }
+
+Si has instalado una Aplicación Web Progresiva en un teléfono Android reciente, es posible que observes que el ícono aparece con un fondo blanco. Android Oreo introdujo íconos adaptables, que muestran una variedad de formas de íconos de aplicaciones en diferentes modelos de dispositivos. Los íconos que no siguen este nuevo formato tienen un fondo blanco.
+
+<figure>{% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="PWA icons in white circles on Android", width="400", height="100" %} <figcaption> Los íconos transparentes de PWA aparecen dentro de círculos blancos en Android</figcaption></figure>
+
+Los íconos enmascarables son un nuevo formato de íconos que te brindan más control y permiten que tu Aplicación Web Progresiva utilice íconos adaptables. Si proporcionas un ícono enmascarable, tu ícono puede llenar toda la forma y verse bien en todos los dispositivos Android. Firefox y Chrome han agregado recientemente soporte para este nuevo formato, y puede adoptarlo en sus aplicaciones.
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="PWA icons covering the entire circle on Android", width="400", height="100" %} <figcaption> En su lugar, los iconos enmascarables cubren todo el círculo</figcaption></figure>
+
+## ¿Están listos mis íconos actuales?
+
+Dado que los íconos enmascarables necesitan admitir una variedad de formas, se suministra una imagen opaca con algo de relleno que el navegador puede recortar posteriormente en la forma y tamaño deseados. Es mejor no depender de ninguna forma en particular, ya que la forma finalmente elegida puede variar según el navegador y la plataforma.
+
+<figure data-float="right">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"], autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Diferentes formas específicas de la plataforma </figcaption></figure>
+
+Afortunadamente, existe una ["zona mínima segura" bien definida y estandarizada](https://w3c.github.io/manifest/#icon-masks) que todas las plataformas respetan. Las partes importantes de su ícono, como el logotipo, deben estar dentro de un área circular en el centro del ícono con un radio igual al 40% del ancho del ícono. El 10% del borde exterior puede recortarse.
+
+Puedes verificar qué partes de tus íconos aterrizan dentro de la zona segura con Chrome DevTools. Con tu Aplicación Web Progresiva abierta, inicia DevTools y navega hasta el panel de **aplicaciones.** En la **sección Iconos**, puedes elegir **Mostrar solo el área segura mínima para íconos enmascarables**. Tus íconos se recortarán para que solo el área segura sea visible. Si tu logotipo es visible dentro de esta área segura, estás listo para comenzar.
+
+<figure>{% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="Applications panel in DevTools displaying PWA icons with edges cropped", width="762", height="423" %} <figcaption>Panel de aplicaciones</figcaption></figure>
+
+Para probar tu ícono enmascarable con la variedad de formas de Android, usa la [herramienta Maskable.app](https://maskable.app/) que he creado. Abre un ícono, luego Maskable.app te permitirá probar varias formas y tamaños, y podrás compartir la vista previa con otros miembros de tu equipo.
+
+## ¿Cómo adopto íconos enmascarables?
+
+Si deseas crear un ícono enmascarable basado en un ícono existente, puedes usar el [Editor de Maskable.app](https://maskable.app/editor). Sube tu ícono, ajusta el color y el tamaño, luego exporta la imagen.
+
+<figure>{% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.app Editor screenshot", width="670", height="569" %}<br>Creación de íconos en Maskable.app Editor</figure>
+
+Una vez que hayas creado una imagen de ícono enmascarable y la hayas probado en DevTools, deberás actualizar el [manifiesto de tu aplicación web](/add-manifest/) para que apunte a los nuevos recursos. El manifiesto de la aplicación web proporciona información sobre tu aplicación web en un archivo JSON e incluye una[matriz de `icons`](/add-manifest/#icons).
+
+Con la inclusión de íconos enmascarables, se ha agregado un nuevo valor de propiedad para los recursos de imagen enumerados en un manifiesto de aplicación web. El campo `purpose` le dice al navegador cómo debe usarse tu ícono. De forma predeterminada, los íconos tendrán el propósito de `"any"`. Estos íconos cambiarán de tamaño sobre un fondo blanco en Android.
+
+Los íconos enmascarables deben tener un propósito diferente: `"maskable"`. Esto indica que una imagen está destinada a ser utilizada con máscaras de íconos, dándole más control sobre el resultado. De esta forma, tus íconos no tendrán un fondo blanco. También puedes especificar varios propósitos separados por espacios (por ejemplo, `"any maskable"`), si deseas que tu ícono enmascarable se use sin máscara en otros dispositivos.
+
+{% Aside %} Si bien *puedes* especificar varios propósitos separados por espacios como `"any maskable"`, en la práctica no *deberías hacerlo*. Utilizar los íconos `"maskable"` como íconos `"any"` no es óptimo, ya que el ícono se va a utilizar tal cual, lo que provoca un exceso de relleno y hace que el contenido del ícono principal sea más pequeño. Idealmente, los íconos para el propósito `"any"` deberían tener regiones transparentes y sin relleno adicional, como los favicons de su sitio, ya que el navegador no los agregará. {% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- New property value `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+Con esto, puedes continuar y crear tus propios íconos enmascarables, asegurándote de que tu aplicación se vea bien de borde a borde (y por si acaso, de círculo a círculo, de óvalo a óvalo 😄).
+
+## Agradecimientos
+
+Este artículo fue revisado por [Joe Medley](https://github.com/jpmedley) .
diff --git a/src/site/content/es/blog/migrate-to-ua-ch/index.md b/src/site/content/es/blog/migrate-to-ua-ch/index.md
new file mode 100644
index 00000000000..be06cdcefdc
--- /dev/null
+++ b/src/site/content/es/blog/migrate-to-ua-ch/index.md
@@ -0,0 +1,270 @@
+---
+layout: post
+title: Migración a los indicadores de cliente de agente de usuario
+subhead: Estrategias para migrar su sitio de depender de la cadena de agente de usuario a los nuevos indicadores de cliente de agente de usuario.
+authors:
+  - rowan_m
+date: 2021-05-19
+description: Estrategias para migrar su sitio de depender de la cadena de agente de usuario a los nuevos indicadores de cliente de agente de usuario.
+hero: image/VWw0b3pM7jdugTkwI6Y81n6f5Yc2/uHTVU6MzCWYVPzLposSy.jpg
+alt: Una ruta brillantemente iluminada a través de un paisaje frío y oscuro.
+tags:
+  - blog
+  - privacy
+---
+
+La [cadena de agente de usuario](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) es una importante [superficie de huellas digitales pasivas](https://w3c.github.io/fingerprinting-guidance/#passive) en los navegadores, además de ser difícil de procesar. Sin embargo, existen todo tipo de razones válidas para recopilar y procesar datos de agente de usuario, así que lo que se necesita es una ruta hacia una mejor solución. Los indicadores de cliente de agente de usuario proporcionan una forma explícita de declarar su necesidad de datos de agente de usuario y los métodos para devolver los datos en un formato fácil de usar.
+
+{% Aside %} Para obtener más información sobre los indicadores de cliente y ampliarlos con datos de agente de usuario, lea el [artículo introductorio sobre los indicadores de cliente de agente de usuario](/user-agent-client-hints). {% endAside %}
+
+Este artículo lo guiará a través de la auditoría de su acceso a los datos de agente de usuario y la migración del uso de cadenas de agente de usuario a los indicadores de cliente de agente de usuario.
+
+## Auditar la recopilación y el uso de datos de agentes de usuario
+
+Al igual que con cualquier forma de recopilación de datos, siempre debe comprender **por qué** los recopila. El primer paso, independientemente de si tomará alguna medida o no, es comprender dónde y por qué está utilizando datos de agente de usuario.
+
+Si no sabe si o dónde se están utilizando los datos del agente de usuario, considere buscar en su código de front-end el uso de `navigator.userAgent` y en su código de back-end el uso del encabezado HTTP `User-Agent`. También debe verificar el uso de funciones ya obsoletas en su código de front-end, como `navigator.platform` y `navigator.appVersion`.
+
+Desde un punto de vista funcional, piense en cualquier lugar de su código donde esté registrando o procesando:
+
+- Nombre o versión del navegador
+- Nombre o versión del sistema operativo
+- Marca o modelo del dispositivo
+- Tipo de CPU, arquitectura o bits (por ejemplo, 64 bits)
+
+También es probable que esté utilizando una biblioteca o servicio de terceros para procesar el agente de usuario. En este caso, compruebe si se están actualizando para admitir los indicadores de cliente de agente de usuario.
+
+### ¿Está utilizando solo datos básicos de agente de usuario?
+
+El conjunto predeterminado de indicadores de cliente de agente de usuario incluye:
+
+- `Sec-CH-UA`: nombre del navegador y versión principal/significativa
+- `Sec-CH-UA-Mobile`: valor booleano que indica un dispositivo móvil
+- `Sec-CH-UA-Platform`: nombre del sistema operativo
+    - *Tenga en cuenta que esto se ha actualizado en la especificación y  en breve se [reflejará en Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/dafizBGwWMw/m/72l-1zm6AAAJ) y otros navegadores basados en Chromium.*
+
+La versión reducida de la cadena de agente de usuario que se propone también retendrá esta información básica de una manera compatible con versiones anteriores. Por ejemplo, en lugar de `Chrome/90.0.4430.85` la cadena incluiría `Chrome/90.0.0.0`.
+
+Si solo está verificando la cadena de agente de usuario para el nombre del navegador, la versión principal o el sistema operativo, entonces su código seguirá funcionando, aunque es probable que vea advertencias de obsolescencia.
+
+Si bien puede y debe migrar a los indicadores de cliente de agente de usuario, es posible que tenga restricciones de código o recursos heredados que lo impidan. La reducción de información en la cadena de agente de usuario de esta manera compatible con versiones anteriores tiene como objetivo garantizar que, si bien el código existente recibirá información menos detallada, aún debería conservar la funcionalidad básica.
+
+## Estrategia: API JavaScript del lado del cliente bajo demanda
+
+Si actualmente está utilizando `navigator.userAgent`, debe hacer la transición a la preferencia de `navigator.userAgentData` antes de volver a analizar la cadena de agente de usuario.
+
+```javascript
+if (navigator.userAgentData) {
+  // use los indicadores nuevos
+} else {
+  // regresar al análisis de la cadena de agenta de usuario
+}
+```
+
+Si está buscando un dispositivo móvil o de escritorio, use el valor `mobile`
+
+```javascript
+const isMobile = navigator.userAgentData.mobile;
+```
+
+`userAgentData.brands` es un conjunto de objetos con propiedades `brand` y `version` donde el navegador puede enumerar su compatibilidad con esas marcas. Puede acceder a él directamente como una matriz o puede usar una invocación `some()` para verificar si una entrada específica está presente:
+
+```javascript
+function isCompatible(item) {
+  // En la vida real es muy probable que tenga aquí reglas más complejas
+  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
+}
+if (navigator.userAgentData.brands.some(isCompatible)) {
+  // El navegador reporta que es compatible
+}
+```
+
+{% Aside 'gotchas' %} `userAgentData.brands` contendrá valores variables en un orden variable, así que no confíe en algo que aparezca en un índice determinado. {% endAside %}
+
+Si necesita uno de los valores de agente de usuario de alta entropía más detallados, deberá especificarlo y verificar el resultado en la `Promise` devuelta:
+
+```javascript
+navigator.userAgentData.getHighEntropyValues(['model'])
+  .then(ua => {
+    // se solicitaron los indicadores disponibles como atributos
+    const model = ua.model
+  });
+
+```
+
+También puede utilizar esta estrategia si desea pasar del procesamiento del lado del servidor al procesamiento del lado del cliente. La API de JavaScript no requiere acceso a los encabezados de solicitud HTTP, por lo que los valores de agente de usuario se pueden solicitar en cualquier momento.
+
+{% Aside %} Pruebe la [demostración de la API de JavaScript indicadores de cliente de agente de usuario](https://user-agent-client-hints.glitch.me/javascript.html). {% endAside %}
+
+## Estrategia: encabezado estático del lado del servidor
+
+Si está utilizando el encabezado de solicitud de `agente de usuario` en el servidor y sus necesidades de esos datos son relativamente consistentes en todo su sitio, entonces puede especificar los indicadores de cliente deseados como un conjunto estático en sus respuestas. Este es un enfoque relativamente simple, ya que generalmente solo necesita configurarlo en una ubicación. Por ejemplo, puede estar en la configuración de su servidor web si ya agrega encabezados allí, la configuración de su alojamiento o la configuración de nivel superior del marco o plataforma que usa para su sitio.
+
+Considere esta estrategia si está transformando o personalizando las respuestas entregadas en función de los datos del agente de usuario.
+
+{% Aside %} También puede considerar migrar a la estrategia de [API de JavaScript del lado del cliente bajo demanda](#strategy-on-demand-client-side-javascript-api) en lugar de enviar encabezados adicionales. {% endAside %}
+
+Los navegadores u otros clientes pueden optar por proporcionar diferentes indicadores predeterminados, por lo que es una buena práctica especificar todo lo que necesita, incluso si generalmente se proporciona de forma predeterminada.
+
+Por ejemplo, los valores predeterminados actuales para Chrome se representarían como:
+
+⬇️ Encabezados de respuesta
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+Si también desea recibir el modelo del dispositivo en las respuestas, debe enviar:
+
+⬇️ Encabezados de respuesta
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+{% Aside 'gotchas' %} El orden no es importante, el ejemplo se enumera alfabéticamente. {% endAside %}
+
+Al procesar esto en el lado del servidor, primero debe verificar si se ha enviado el encabezado `Sec-CH-UA` deseado y luego regresar al encabezado `User-Agent` si no está disponible.
+
+{% Aside %} Pruebe la [demostración del encabezado HTTP indicadores de clientes de agente de usuario](https://user-agent-client-hints.glitch.me/). {% endAside %}
+
+## Estrategia: delegación de indicadores a solicitudes de origen cruzado
+
+Si solicita subrecursos de origen cruzado o entre sitios que requieren que se envíen indicadores de cliente de agente de usuario en sus solicitudes, deberá especificar explícitamente los indicadores deseados mediante una política de permisos.
+
+{% Aside %} La [política de permisos](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) es la nueva forma de política de funciones {%  endAside %}
+
+Por ejemplo, digamos que `https://blog.site` aloja recursos en `https://cdn.site` que puede devolver recursos optimizados para un dispositivo específico. `https://blog.site` puede solicitar el indicador `Sec-CH-UA-Model`, pero debe delegarlo explícitamente en `https://cdn.site` mediante el encabezado `Permissions-Policy`. La lista de indicadores controlados por políticas está disponible en el [borrador de infraestructura de indicadores para clientes](https://wicg.github.io/client-hints-infrastructure/#policy-controlled-client-hints-features).
+
+⬇️ Respuesta de `blog.site` para delegar el indicador
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Permissions-Policy: ch-ua-model=(self "https://cdn.site")
+```
+
+⬆️ La solicitud de los subrecursos en `cdn.site` incluye el indicador delegado
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+Puede especificar múltiples indicadores para múltiples orígenes y no solo del rango `ch-ua`:
+
+⬇️ Respuesta de `blog.site` para delegar múltiples indicadores a múltiples orígenes
+
+```text
+Accept-CH: Sec-CH-UA-Model, DPR
+Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
+                    ch-dpr=(self "https://cdn.site" "https://img.site")
+```
+
+{% Aside 'gotchas' %} No **es** necesario que incluya cada indicador delegado en `Accept-CH`, pero **sí** necesita incluir `self` para cada indicador, incluso si no lo está utilizando directamente en el nivel superior. {% endAside %}
+
+## Estrategia: Delegar indicadores a iframes
+
+Los iframes de origen cruzado funcionan de manera similar a los recursos de origen cruzado, pero usted especifica los indicadores que le gustaría delegar en el atributo `allow`.
+
+⬇️ Respuesta de `blog.site`
+
+```text
+Accept-CH: Sec-CH-UA-Model
+```
+
+↪️ HTML para `blog.site`
+
+```html
+<iframe src="https://widget.site" allow="ch-ua-model"></iframe>
+```
+
+⬆️ Solicitud a `widget.site`
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+El atributo `allow` en el iframe anulará cualquier encabezado `Accept-CH` que `widget.site` pueda enviarse a sí mismo, así que asegúrese de haber especificado todo lo que necesitará el sitio con iframe.
+
+## Estrategia: indicadores dinámicos del lado del servidor
+
+Si tiene partes específicas del recorrido del usuario en las que necesita una selección más amplia de indicadores que en el resto del sitio, puede optar por solicitar esos indicadores a pedido en lugar de estáticamente en todo el sitio. Esto es más complejo de administrar, pero si ya configuró diferentes encabezados por ruta, puede ser factible.
+
+Lo importante a recordar aquí es que cada instancia del encabezado `Accept-CH` sobrescribirá efectivamente el conjunto existente. Por lo tanto, si está configurando dinámicamente el encabezado, cada página debe solicitar el conjunto completo de indicadores requeridos.
+
+Por ejemplo, puede tener una sección en su sitio donde desee proporcionar iconos y controles que coincidan con el sistema operativo del usuario. Para esto, es posible que desee incorporar adicionalmente `Sec-CH-UA-Platform-Version` para suministrar los subrecursos apropiados.
+
+⬇️ Encabezados de respuesta para `/blog`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+⬇️ Encabezados de respuesta para `/app`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA
+```
+
+## Estrategia: se requieren indicadores del lado del servidor en la primera solicitud
+
+Puede haber casos en los que requiera más indicadores que el conjunto predeterminado de indicadores en la primera solicitud. Sin embargo, es probable que esto sea raro, así que asegúrese de revisar el razonamiento.
+
+La primera solicitud realmente significa la primera solicitud de nivel superior para ese origen enviada en esa sesión de navegación. El conjunto predeterminado de indicadores incluye el nombre del navegador con la versión principal, la plataforma y el indicador móvil. Entonces, la pregunta que debe hacerse aquí es, ¿necesita datos extendidos en la carga de la página inicial?
+
+{% Aside %} Considere también hacer uso de la [estrategia de API de JavaScript del lado del cliente bajo demanda](#strategy-on-demand-client-side-javascript-api) para modificar el contenido dentro de la página en lugar del lado del servidor. {% endAside %}
+
+Para obtener indicadores adicionales durante la primera solicitud, hay dos opciones. Primero, puede hacer uso del encabezado `Critical-CH`. Esto toma el mismo formato que `Accept-CH` pero le dice al navegador que debe reintentar inmediatamente la solicitud si la primera se envió sin el indicador crítico.
+
+⬆️ Solicitud inicial
+
+```text
+[With default headers]
+```
+
+⬇️ Encabezados de respuesta
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Critical-CH: Sec-CH-UA-Model
+```
+
+🔃 El navegador vuelve a intentar la solicitud inicial con el encabezado adicional
+
+```text
+[With default headers + …]
+Sec-CH-UA-Model: Pixel 5
+```
+
+Esto incurrirá en la sobrecarga del reintento durante la primera solicitud, pero el costo de implementación es relativamente bajo. Envíe el encabezado adicional y el navegador hará el resto.
+
+{% Aside 'gotchas' %} Cualquier valor de `Critical-CH` debe ser un subconjunto de los valores en `Accept-CH` . `Accept-CH` incluye todos los valores que le gustaría para la página, `Critical-CH` es el subconjunto de esos valores que **debe** tener o no podrá cargar la página correctamente. {% endAside %}
+
+Para situaciones en las que realmente requiera indicadores adicionales en la carga de la primera página, la [propuesta de confiabilidad de indicadores de cliente](https://github.com/WICG/client-hints-infrastructure/blob/main/reliability.md#connection-level-settings) establece una ruta para especificar indicadores en la configuración del nivel de conexión. Esto hace uso de la extensión de [Configuraciones del protocolo de la capa de aplicaciones(ALPS)](https://tools.ietf.org/html/draft-vvv-tls-alps) a TLS 1.3 para habilitar esta transmisión temprana de indicadores en las conexiones HTTP/2 y HTTP/3. Esto aún se encuentra en una etapa muy temprana, pero si administra activamente su propio TLS y la configuración de conexión, este es un momento ideal para contribuir.
+
+## Estrategia: soporte heredado
+
+Es posible que tenga un código heredado o de terceros en su sitio que dependa de `navigator.userAgent`, incluidas partes de la cadena de agente de usuario que se reducirán. A largo plazo, debe planificar pasarse a las invocaciones `navigator.userAgentData` equivalentes, pero hay una solución provisional.
+
+{% Aside 'warning' %} Esto no se recomienda y no se admite de ninguna manera. Esta solución se incluye por razones de integridad, pero si dedica algún tiempo a intentar la corrección errores en ella, sería mejor invertir ese tiempo en la migración real. {% endAside %}
+
+[UA-CH retrofill](https://github.com/GoogleChromeLabs/uach-retrofill) es una pequeña biblioteca que le permite sobrescribir `navigator.userAgent` con una nueva cadena construida a partir de los valores de `navigator.userAgentData`.
+
+Por ejemplo, este código generará una cadena de agente de usuario que además incluye el indicador de "modelo":
+
+```javascript
+import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
+overrideUserAgentUsingClientHints(['model'])
+  .then(() => { console.log(navigator.userAgent); });
+```
+
+La cadena resultante mostraría el modelo `Pixel 5`, pero aún muestra el `92.0.0.0` reducido ya que no se solicitó el indicador `uaFullVersion`:
+
+```text
+Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36
+```
+
+## Soporte adicional
+
+Si estas estrategias no cubren su caso de uso, inicie una [Discusión en el repositorio privacy-sandbox-dev-support](https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/discussions) para poder explorar su problema juntos.
+
+*Foto de [Ricardo Rocha](https://unsplash.com/@rcrazy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/photos/nj1bqRzClq8)*
diff --git a/src/site/content/es/blog/min-max-clamp/index.md b/src/site/content/es/blog/min-max-clamp/index.md
new file mode 100644
index 00000000000..3bdb812a370
--- /dev/null
+++ b/src/site/content/es/blog/min-max-clamp/index.md
@@ -0,0 +1,158 @@
+---
+title: 'min(), max() y clamp(): tres funciones lógicas de CSS que se utilizan actualmente'
+subhead: Aprenda a controlar el tamaño de los elementos, a mantener un espaciado adecuado y a implementar una tipografía fluida por medio de estas funciones de CSS totalmente compatibles.
+authors:
+  - una
+date: 2020-10-14
+hero: image/admin/aVL3BEXD3AF9fFzPGKMf.jpg
+alt: Conjunto de herramientas que están en un escritorio.
+description: Min, max, y clamp ofrecen algunas funciones de CSS poderosas que permiten un estilo más adaptativo con menos líneas de código. En este artículo se explica cómo controlar el tamaño de los elementos, mantener un espaciado adecuado e implementar una tipografía fluida utilizando estas funciones matemáticas de CSS.
+tags:
+  - blog
+  - css
+  - layout
+feedback:
+  - api
+---
+
+Con la evolución del diseño adaptativo y su creciente complejidad, el propio CSS evoluciona constantemente y proporciona a los autores un mayor control. Las funciones
+[`min()`](https://developer.mozilla.org/docs/Web/CSS/min),
+[`max()`](https://developer.mozilla.org/docs/Web/CSS/max), y
+[`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp),
+que ahora son compatibles con todos los navegadores modernos, son algunas de las herramientas más recientes para crear sitios web y aplicaciones más dinámicas y adaptativas.
+
+Cuando se trata de una tipografía flexible y fluida, un cambio de tamaño controlado de los elementos y el mantenimiento de un espaciado adecuado, las funciones `min()`, `max()` y `clamp()` pueden ayudar.
+
+## Antecedentes
+
+<blockquote>
+  <p>Las funciones matemáticas <code>calc()</code>, <code>min()</code>, <code>max()</code> y <code>clamp()</code> permiten utilizar expresiones matemáticas con la suma (+), resta (-), multiplicación (*) y división (/) como componentes de los valores.</p>
+  <cite><p data-md-type="paragraph"><a href="https://www.w3.org/TR/css-values-4/#calc-notation">Valores y unidades de CSS de Nivel 4</a></p></cite>
+</blockquote>
+
+Safari fue el primero en incorporar el conjunto completo de funciones en abril del 2019, y Chromium lo hizo más tarde ese mismo año en su versión 79. Este año, con el lanzamiento de Firefox [75](https://bugzilla.mozilla.org/show_bug.cgi?id=1519519), ahora tenemos similitud de navegadores para `min()`, `max()` y `clamp()` en todos los navegadores evergreen.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIgePP41Quh7ubYh54vo.png", alt="", width="800", height="246" %} <figcaption> Mesa de apoyo <a href="https://caniuse.com/css-math-functions">Caniuse</a>.</figcaption></figure>
+
+## Cómo se utilizan
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-demo.mp4">
+  </source></video>
+  <figcaption>Para mostrar cómo la función min() selecciona un valor basado en una lista de opciones y su padre. <a href="https://codepen.io/una/pen/rNeGNVL">Consulte la demostración en Codepen.</a></figcaption></figure>
+
+Se puede utilizar `min()`, `max()`, y `clamp()` en el lado derecho de cualquier expresión de CSS donde tenga sentido. En el caso de `min()` y `max()`, se proporciona una lista de valores como argumento, y el navegador determina cuál es el más pequeño o el más grande, respectivamente. Por ejemplo, en el caso de `min(1rem, 50%, 10vw)`, el navegador calcula cuál de estas unidades relativas es la más pequeña, y utiliza ese valor como valor real.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-demo.mp4">
+  </source></video>
+  <figcaption>Para mostrar cómo la función max() selecciona un valor basado en una lista de opciones y su padre. <a href="https://codepen.io/una/pen/RwaZXqR">Consulte la demostración en Codepen.</a></figcaption></figure>
+
+En la función `max()` se selecciona el mayor valor de una lista de expresiones separadas por comas.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-demo.mp4">
+  </source></video>
+  <figcaption>Para mostrar cómo la función clamp() selecciona un valor basado en una lista de opciones y su padre. <a href="https://codepen.io/una/pen/bGpoGdJ">Consulte la demostración en Codepen.</a></figcaption></figure>
+
+Para usar `clamp()` ingrese tres valores: un valor mínimo, un valor ideal (a partir del cual calcular) y un valor máximo.
+
+Cualquiera de estas funciones puede utilizarse en cualquier lugar donde se permita un `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, o `<integer>`. Puede utilizarlos de forma independiente (por ejemplo, `font-size: max(0.5vw, 50%, 2rem)`), junto con `calc()` (por ejemplo, `font-size: max(calc(0.5vw - 1em), 2rem)`), o compuesto (por ejemplo `font-size: max(min(0.5vw, 1em), 2rem)`).
+
+{% Aside %} Cuando se utiliza un cálculo dentro de una función `min()` , `max()` o `clamp()` , puede eliminar la llamada a `calc()` . Por ejemplo, escribir `font-size: max(calc(0.5vw - 1em), 2rem)` sería lo mismo que `font-size: max(0.5vw - 1em, 2rem)` . {% endAside %}
+
+En resumen:
+
+- `min(<value-list>)`: selecciona el valor más pequeño (más negativo) de una lista de expresiones separadas por comas.
+- `max(<value-list>)`: selecciona el mayor valor (más positivo) de una lista de expresiones separadas por comas.
+- `clamp(<min>, <ideal>, <max>)`: establece un valor entre un límite superior y uno inferior, basado en un valor ideal establecido.
+
+Echemos un vistazo a algunos ejemplos.
+
+## El ancho perfecto
+
+De acuerdo con [El estilo tipográfico de los elementos (The Elements of Typographic Style)](http://webtypography.net/2.1.2#:~:text=%E2%80%9CAnything%20from%2045%20to%2075,is%2040%20to%2050%20characters.%E2%80%9D), escrito por Robert Bringhurst, "se considera que entre 45 y 75 caracteres es una longitud de línea satisfactoria para una página de una sola columna en una carátula de texto en formato serif con un tamaño de texto determinado".
+
+Para garantizar que sus bloques de texto no sean más estrechos que 45 caracteres ni más anchos que 75, utilice `clamp()` y la unidad `ch` ([avance de caracteres](https://developer.mozilla.org/docs/Web/CSS/length) de ancho 0):
+
+```css
+p {
+  width: clamp(45ch, 50%, 75ch);
+}
+```
+
+Esto permite que el navegador defina el ancho del párrafo. Establecerá el ancho al 50%, a menos que el 50% sea más pequeño que `45ch`, en cuyo caso se seleccionará `45ch`, y a la inversa si el 50% es más ancho que `75ch`. En esta demostración, la tarjeta por sí misma quedará sujeta:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-width.mp4">
+  </source></video>
+  <figcaption>Al utilizar la función clamp() para limitar un ancho mínimo y máximo. <a href="https://codepen.io/una/pen/QWyLxaL">Consulte la demostración en Codepen.</a></figcaption></figure>
+
+Podrá dividir esto con la función `min()` o `max()`. Si desea que el elemento siempre esté a `50%` de ancho, y no exceda `75ch` de ancho (es decir, en pantallas más grandes), escriba: `width: min(75ch, 50%);`. Esto establece esencialmente un tamaño "máximo" utilizando la función `min()`.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-width.mp4">
+  </source></video>
+  <figcaption>Al utilizar la función clamp() para limitar un ancho mínimo y máximo.</figcaption></figure>
+
+Del mismo modo, puede garantizar un tamaño mínimo para que el texto sea legible mediante la función `max()`. Esto se vería así: `width: max(45ch, 50%);`. Aquí, el navegador seleccionará lo que sea más grande, `45ch` o `50%`, lo que significa que el elemento debe tener *al menos* `45ch` o que sea más grande.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-width.mp4">
+  </source></video>
+  <figcaption>Al utilizar la función clamp() para limitar un ancho mínimo y máximo.</figcaption></figure>
+
+## Administración del relleno
+
+Aplicando el mismo concepto anterior, en el que la función `min()` puede establecer un valor "máximo" y `max()` establece un valor "mínimo", puede utilizar `max()` para establecer un tamaño mínimo de relleno. Este ejemplo viene de [Trucos de CSS](https://css-tricks.com/using-max-for-an-inner-element-max-width/), donde el lector Caluã de Lacerda Pataca compartió esta idea: La idea es permitir que un elemento tenga un relleno adicional en tamaños de pantalla más grandes, pero mantener un relleno mínimo en tamaños de pantalla más pequeños, particularmente en el relleno en línea. Para conseguirlo, utiliza `calc()` y resta el relleno mínimo de cada lado: `calc((100vw - var(--contentwidth)) / 2)`, *o* utilice max: `max(2rem, 50vw - var(--contentwidth) / 2)`. Todo junto se verá así:
+
+```css
+footer {
+  padding: var(--blockPadding) max(2rem, 50vw - var(--contentwidth) / 2);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-padding.mp4">
+  </source></video>
+  <figcaption>Establezca un relleno mínimo para un componente mediante la función max(). <a href="https://codepen.io/chriscoyier/pen/qBZqNKa">Consulte la demostración en Codepen.</a></figcaption></figure>
+
+## Tipografía fluida
+
+Para permitir una tipografía fluida, [Mike Riethmeuller](https://twitter.com/mikeriethmuller) popularizó una técnica que utiliza la función `calc()` para establecer un tamaño de fuente mínimo, un tamaño de fuente máximo y permitir escalar del mínimo al máximo.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/fliud-type.mp4">
+  </source></video>
+  <figcaption>Para crear una tipografía fluida con clamp(), <a href="https://codepen.io/una/pen/ExyYXaN">consulte la demostración en Codepen.</a><a href="https://codepen.io/una/pen/ExyYXaN"></a></figcaption></figure>
+
+Con `clamp()`, puede escribir esto más claramente. En vez de requerir una cadena compleja, el navegador puede hacer el trabajo por usted. Establezca el tamaño de fuente mínimo aceptable (por ejemplo, `1,5rem` para un título, el tamaño máximo (es decir, `3rem`) y el tamaño ideal de `5vw`.
+
+Ahora, obtendremos una tipografía que se escalará con el ancho de la ventana de visualización de la página hasta que alcance los valores mínimos y máximos que la limitan, en una línea de código mucho más breve:
+
+```css
+p {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+{% Aside 'warning' %} Limitar el tamaño del texto con `max()` o `clamp()` puede causar un fallo WCAG bajo [1.4.4 para redimensionar el texto (AA)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text) porque un usuario puede ser incapaz de escalar el texto al 200% de su tamaño original. Asegúrese de [probar los resultados con el zoom](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html). {% endAside %}
+
+## Conclusión
+
+Las funciones matemáticas de CSS, `min()`, `max()`, y `clamp()` son muy poderosas, con buena compatibilidad, y podrían ser justo lo que está buscando para ayudarle a construir interfaces de usuario adaptativas. Para obtener más recursos, consulte:
+
+- [Valores y unidades de CSS en MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Valores y unidades de CSS en la especificación del Nivel 4](https://www.w3.org/TR/css-values-4/)
+- [Trucos de CSS en el artículo sobre el ancho del elemento interno](https://css-tricks.com/using-max-for-an-inner-element-max-width/)
+- [min(), max(), clamp() Resumen de Ahmad Shadeed](https://ishadeed.com/article/css-min-max-clamp/)
+
+Imagen de [portada](https://unsplash.com/@yer_a_wizard) de @yer_a_wizard en Unsplash.
diff --git a/src/site/content/es/blog/multi-origin-pwas/index.md b/src/site/content/es/blog/multi-origin-pwas/index.md
new file mode 100644
index 00000000000..e295c1deef5
--- /dev/null
+++ b/src/site/content/es/blog/multi-origin-pwas/index.md
@@ -0,0 +1,116 @@
+---
+layout: post
+title: Aplicaciones web progresivas en sitios multiorigen
+subhead: Desafíos y soluciones para la creación de aplicaciones web progresivas en sitios multiorigen.
+authors:
+  - demianrenzulli
+date: 2019-08-19
+hero: image/admin/4bvbhJ3F0uGKvw5DLTMy.jpg
+alt: Múltiples marchas de cambio.
+description: Las arquitecturas multiorigen presentan muchos desafíos al crear PWA. Explore lo bueno y lo malo del uso de múltiples orígenes y algunas soluciones para crear PWA en sitios de multiorigen.
+tags:
+  - blog
+  - progressive-web-apps
+  - service-worker
+---
+
+## Antecedentes
+
+En el pasado, el uso de arquitecturas de origen múltiple presentaba algunas ventajas, pero para las aplicaciones web progresivas, ese enfoque presenta muchos desafíos. En particular, la [política del mismo origen](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) (same-origin) impone restricciones para compartir cosas como service workers y cachés, permisos y para obtener una experiencia independiente en múltiples orígenes. Este artículo describirá buenos y malos usos de múltiples orígenes y explicará los desafíos y soluciones para crear aplicaciones web progresivas en sitios multiorigen.
+
+## Usos buenos y malos de múltiples orígenes
+
+Hay algunas razones legítimas para que los sitios empleen una arquitectura de origen múltiple, principalmente relacionadas con el suministro de un conjunto independiente de aplicaciones web o con la creación de experiencias completamente aisladas entre sí. También hay usos que deben evitarse.
+
+### Lo bueno
+
+Veamos primero las razones útiles:
+
+- **Localización/Idioma:** usar un [dominio de nivel superior con código de país](https://developer.mozilla.org/docs/Glossary/TLD) para separar los sitios que se servirán en diferentes países (por ejemplo, `https://www.google.com.ar`), o usar subdominios para dividir los sitios orientados a diferentes ubicaciones (por ejemplo: `https://newyork.craigslist.org`) o para ofrecer contenido para un idioma específico (por ejemplo, `https://en.wikipedia.org`).
+
+- **Webapps independientes:** Uso de diferentes subdominios para brindar experiencias cuyo propósito difiere considerablemente del sitio en el origen principal. Por ejemplo, en un sitio de noticias, la aplicación web de crucigramas podría servirse intencionalmente desde `https://crosswords.example.com`, e instalarse y usarse como una PWA independiente, sin tener que compartir ningún recurso o funcionalidad con el sitio web principal.
+
+### El malo
+
+Si no está haciendo ninguna de estas cosas, es probable que el uso de una arquitectura de origen múltiple sea una desventaja al crear aplicaciones web progresivas.
+
+A pesar de esto, muchos sitios continúan siendo estructurados de esta manera sin ninguna razón en particular, o por razones 'heredadas'. Un ejemplo es el uso de subdominios para separar arbitrariamente partes de un sitio que deberían ser parte de una experiencia unificada.
+
+Los siguientes patrones, por ejemplo, no se recomiendan en absoluto:
+
+- **Secciones de un sitio:** separar diferentes secciones de un sitio en subdominios. En los sitios de noticias, no es raro ver la página de inicio en: `https://www.example.com`, mientras que la sección de deportes se encuentra en `https://sports.example.com`, la política en `https://politics.example.com`, etc. En el caso de un sitio de comercio electrónico, se usa algo como `https://category.example.com` para categorías de productos, `https://product.example.com` para páginas de productos, etc.
+
+- **Flujo de usuarios:** otro enfoque que no se recomienda es separar diferentes partes más pequeñas del sitio, como páginas para el inicio de sesión o flujos de compra en subdominios. Por ejemplo, usando `https://login.example.com` y `https://checkout.example.com`.
+
+{% Aside %} Al crear un sitio desde cero, se recomienda encarecidamente evitar dividirlo en subdominios. Para los sitios existentes, migrar a un solo origen es el mejor enfoque. {% endAside %}
+
+Para aquellos casos en los que no es posible migrar a un solo origen, lo que sigue es una lista de desafíos y (cuando sea posible), soluciones que se pueden considerar al crear aplicaciones web progresivas.
+
+## Desafíos y soluciones para las PWA de diferentes orígenes
+
+Cuando se crea un sitio web multiorigen, proporcionar una experiencia de PWA unificada es un desafío, principalmente debido a la [política del mismo origen](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy), que impone una serie de restricciones. Veámoslas una a la vez.
+
+### Service workers
+
+El origen de la URL del script del service worker debe ser el mismo que el origen de la página que llama a [register ()](https://w3c.github.io/ServiceWorker/#navigator-service-worker-register). Esto significa que, por ejemplo, una página en `https://www.example.com` no puede llamar a `register()` con una URL de service worker en `https://section.example.com`.
+
+Otra consideración es que un service worker solo puede controlar las páginas alojadas en el origen y la ruta a la que pertenece. Esto significa que, si el service worker está alojado en `https://www.example.com`, solamente puede controlar las URL de ese origen (de acuerdo con la ruta definida en el [parámetro de alcance](https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register#Parameters) -scope parameter), pero no controlará ninguna página en otros subdominios, como por ejemplo, las de `https://section.example.com`.
+
+En este caso, la única solución es utilizar varios service workers (uno por origen).
+
+{% Aside 'caution' %} Registrarse y tener varios service workers activos consume recursos adicionales (memoria, CPU, etc.), así que use su mejor criterio en cuanto a la cantidad de service workers activos que necesitará un usuario para navegar por el sitio. {% endAside %}
+
+### Almacenamiento en caché
+
+El objeto Cache, así como indexedDB y localStorage también están restringidos a un solo origen. Esto significa que no es posible acceder a los cachés que pertenecen a `https://www.example.com`, desde, por ejemplo: `https://www.section.example.com`.
+
+Aquí hay algunas cosas que puede hacer para administrar los cachés correctamente en escenarios como este:
+
+- **Aproveche el almacenamiento en caché del navegador:** siempre se recomienda el uso de [las mejores prácticas tradicionales de almacenamiento en caché del navegador.](https://webkit.org/blog/8090/workers-at-your-service/) Esta técnica proporciona el beneficio adicional de reutilizar los recursos almacenados en caché en todos los orígenes, lo que no se puede hacer con la caché del service worker. Para obtener más información relacionada a las prácticas recomendadas para usar HTTP Cache con service workers, puede echar un vistazo a [esta publicación](https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-fight).
+
+- **Mantenga la instalación del service worker ligera:** si está usando varios service workers, evite que los usuarios paguen caro por la instalación cada vez que navegan hacia un nuevo origen. En otras palabras: solo coloque en cache de forma anticipada los recursos que son absolutamente necesarios.
+
+{% Aside 'gotchas' %} Una vez que el service worker está activo y en ejecución, la política del mismo origen también restringe las solicitudes de origen cruzado realizadas ***dentro de*** los service workers. Afortunadamente, esto tiene una solución alternativa recomendada, que es usar [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) (como se explica [aquí](https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests)). No se recomienda usar el modo [no-cors](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters) cuando se obtienen recursos dentro del service worker. {% endAside %}
+
+### Permisos
+
+Los permisos también se limitan a los orígenes. Esto significa que si un usuario otorgó un permiso dado al origen `https://section.example.com`, no se transferirá a otros orígenes, como `https://www.example.com`.
+
+Dado que no hay forma de compartir permisos entre orígenes, la única solución aquí es pedir permiso en cada subdominio donde se requiere una característica determinada (por ejemplo, ubicación). Para cosas como web push, puede mantener una cookie para rastrear si el usuario ha aceptado el permiso en otro subdominio, para evitar volver a solicitarlo.
+
+### Instalación
+
+Para instalar una PWA, cada origen debe tener su propio manifiesto con un `start_url` [relativo a sí mismo](https://w3c.github.io/manifest/#start_url-member). Esto significa que un usuario que recibe la solicitud de instalación en un origen determinado (es decir: `https://section.example.com`) no será capaz de instalar el PWA con una `start_url` en uno diferente (es decir: `https://www.example.com`). En otras palabras, los usuarios que reciban el mensaje de instalación en un subdominio solo podrán instalar PWA para las subpáginas, no para la URL principal de la aplicación.
+
+También existe el problema de que el mismo usuario podría recibir varias solicitudes de instalación al navegar por el sitio, si cada subdominio cumple con los [criterios de instalación](https://developers.google.com/web/fundamentals/app-install-banners/#criteria), y solicita al usuario que instale la PWA.
+
+Para mitigar este problema, puede asegurarse de que el mensaje se muestre solo en el origen principal. Cuando un usuario visita un subdominio que pasa los criterios de instalación:
+
+1. [Escuche el evento `beforeinstallprompt`](https://developers.google.com/web/fundamentals/app-install-banners/#listen_for_beforeinstallprompt).
+2. [Evite que aparezca el mensaje](https://developers.google.com/web/fundamentals/app-install-banners/#preventing_the_mini-infobar_from_appearing) , llamando a `event.preventDefault()`.
+
+De esa manera, se asegura de que el mensaje no se muestre en partes no deseadas del sitio, mientras que puede continuar mostrándolo, por ejemplo, en el origen principal (por ejemplo, en la página de inicio).
+
+### Modo independiente
+
+Mientras navega en una ventana independiente, el navegador se comportará de manera diferente cuando el usuario se mueva fuera del alcance establecido por el manifiesto de la PWA. El comportamiento depende de la versión y el proveedor de cada navegador. Por ejemplo, las últimas versiones de Chrome abren una [pestaña personalizada de Chrome](https://developer.chrome.com/multidevice/android/customtabs) cuando un usuario sale del alcance en modo independiente.
+
+En la mayoría de los casos, no hay una solución para esto, pero se puede aplicar una solución para pequeñas partes de la experiencia que están alojadas en subdominios (por ejemplo: flujos de trabajo de inicio de sesión):
+
+1. La nueva URL, `https://login.example.com`, podría abrirse dentro de un iframe de pantalla completa.
+2. Una vez que la tarea se completa dentro del iframe (por ejemplo, el proceso de inicio de sesión), [se puede usar postMessage ()](https://developer.mozilla.org/docs/Web/API/Window/postMessage) para pasar cualquier información resultante del iframe a la página principal.
+3. Como paso final, una vez que la página principal recibe el mensaje, se puede anular el registro de los oyentes y, finalmente, eliminar el iframe del DOM.
+
+{% Aside 'caution' %} La técnica anterior puede ayudar a mitigar el posible cambio en la IU en una pequeña parte del sitio, donde el usuario puede realizar una acción en un subdominio y regresar al origen principal (como en un flujo de inicio de sesión), pero no será una técnica eficaz para implementar en rutas completas, incluidas muchas páginas alojadas en subdominios (como secciones completas del sitio). {% endAside %}
+
+{% Aside %} En el contexto de [Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/), existe una forma recomendada de evitar este problema, [validando todos los orígenes mediante enlaces de activos digitales](https://developers.google.com/web/updates/2020/01/twa-multi-origin). {% endAside %}
+
+### Conclusión
+
+La política del mismo origen impone muchas restricciones para los sitios creados sobre múltiples orígenes que desean brindar una experiencia de PWA coherente. Por esa razón, para ofrecer la mejor experiencia a los usuarios, recomendamos encarecidamente no dividir los sitios en diferentes orígenes.
+
+Para los sitios existentes que ya están construidos de esta manera, puede ser un desafío hacer que las PWA de múltiples orígenes funcionen correctamente, pero hemos explorado algunas posibles soluciones. Cada una puede tener ventajas y desventajas, así que use su criterio al decidir qué enfoque adoptar en su sitio web.
+
+Al evaluar una estrategia a largo plazo o el rediseño de un sitio, considere migrar a un solo origen, a menos que haya una razón importante para mantener la arquitectura de múltiples orígenes.
+
+*Muchas gracias a: Penny Mclachlan, Paul Covell, Dominick Ng, Alberto Medina, Pete LePage, Joe Medley, Cheney Tsai, Martin Schierle y Andre Bandarra por sus revisiones técnicas y sugerencias.*
diff --git a/src/site/content/es/blog/off-main-thread/index.md b/src/site/content/es/blog/off-main-thread/index.md
new file mode 100644
index 00000000000..6e6bdc984a9
--- /dev/null
+++ b/src/site/content/es/blog/off-main-thread/index.md
@@ -0,0 +1,184 @@
+---
+title: Utilice trabajadores web para ejecutar JavaScript fuera del hilo principal del navegador
+subhead: Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicación.
+description: El hilo principal del navegador está increíblemente sobrecargado de trabajo. Utilizando trabajadores web para cambiar el código del hilo principal, puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicación.
+authors:
+  - surma
+date: 2019-12-05
+tags:
+  - blog
+  - performance
+  - test-post
+---
+
+En los últimos 20 años, la web ha evolucionado drásticamente de documentos estáticos con algunos estilos e imágenes, a aplicaciones complejas y dinámicas. Sin embargo, una cosa se ha mantenido prácticamente sin cambios: solo tenemos un hilo por pestaña del navegador (con algunas excepciones) para hacer el trabajo de procesar nuestros sitios y ejecutar nuestro JavaScript.
+
+Como resultado, el hilo principal se ha visto increíblemente sobrecargado de trabajo y a medida que aumenta la complejidad de las aplicaciones web, esto se convierte en un obstáculo importante para el rendimiento. Para empeorar las cosas, la cantidad de tiempo que lleva ejecutar el código en el hilo principal para un usuario dado, es **casi completamente impredecible**, porque las capacidades del dispositivo tienen un efecto masivo en el rendimiento. Esa imprevisibilidad solo aumentará a medida que los usuarios accedan a la web desde un conjunto cada vez más diverso de dispositivos, desde teléfonos con funciones hiperrestringidas hasta máquinas representativas de alta potencia y frecuencia de actualización.
+
+Si queremos que las aplicaciones web sofisticadas cumplan con las pautas de rendimiento como el [modelo RAIL,](/rail/) que se basa en datos empíricos sobre la percepción humana y la psicología, necesitamos formas de ejecutar nuestro código **desde el thread principal (OMT)**.
+
+{% Aside %} Si quiere saber más sobre el caso de una arquitectura OMT, a continuación, puede ver mi charla en el CDS 2019. {% endAside %}
+
+{% YouTube '7Rrv9qFMWNM' %}
+
+## Subprocesos con trabajadores web
+
+Otras plataformas suelen admitir el trabajo en paralelo al permitirle asignar una función a un hilo, que se ejecuta en paralelo con el resto de su programa. Puede acceder a las mismas variables desde ambos hilos, y el acceso a estos recursos compartidos se puede sincronizar con algunos mutex y semáforos para evitar condiciones de carrera.
+
+En JavaScript, podemos obtener una funcionalidad similar de los trabjadores web, que existen desde 2007 y son compatibles con todos los navegadores principales desde 2012. Los trabajadores web se ejecutan en paralelo con el hilo principal, pero a diferencia del hilo del sistema operativo, no pueden compartir variables.
+
+{% Aside %} No confunda a los trabajadores web (web workers) con los [service workers](/service-workers-cache-storage) o [worklets](https://developer.mozilla.org/docs/Web/API/Worklet). Si bien los nombres son similares, la funcionalidad y los usos son diferentes. {% endAside %}
+
+Para crear un trabajador web, pase un archivo al constructor del trabajador, que comienza a ejecutar ese archivo en un hilo separado:
+
+```js
+const worker = new Worker("./worker.js");
+```
+
+Comuníquese con el trabajador web enviando mensajes a través de la [API `postMessage`](https://developer.mozilla.org/docs/Web/API/Window/postMessage). Pase el valor del mensaje como parámetro en la llamada `postMessage` y luego agregue un detector de eventos de mensaje al trabajador:
+
+<!--lint disable no-duplicate-headings-in-section-->
+
+### `main.js`
+
+```js/1
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+```
+
+### `worker.js`
+
+```js
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+});
+```
+
+Para enviar un mensaje al hilo principal, use la misma API `postMessage` en el trabajador web y configure un detector de eventos en el hilo principal:
+
+### `main.js`
+
+```js/2-4
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+worker.addEventListener("message", event => {
+  console.log(event.data);
+});
+```
+
+### `worker.js`
+
+```js/3
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+  postMessage(a+b);
+});
+```
+
+Es cierto que este enfoque es algo limitado. Históricamente, los trabajadores web se han utilizado primordialmente para mover una sola pieza de trabajo pesado fuera del hilo principal. Tratar de manejar múltiples operaciones con un solo trabajador web se vuelve complejo rápidamente: debe codificar no solo los parámetros sino también la operación en el mensaje, y debe llevar la contabilidad para hacer coincidir las respuestas con las solicitudes. Esa complejidad es probablemente la razón por la que los trabajadores web no han sido adoptados más ampliamente.
+
+No obstante, si pudiéramos eliminar algunas de las dificultades de comunicación entre el hilo principal y los trabajadores web, este modelo podría ser ideal para muchos casos de uso. Y, afortunadamente, ¡hay una biblioteca que hace precisamente eso!
+
+## Comlink: hacer que los trabajadores web trabajen menos
+
+[Comlink](http://npm.im/comlink) es una biblioteca cuyo objetivo es permitirle utilizar trabajadores web sin tener que pensar en los detalles de `postMessage`. Comlink le permite compartir variables entre los trabajadores web y el hilo principal casi como otros lenguaje de programación que admita los hilos.
+
+Usted configura Comlink importándolo en un trabajador web y definiendo un conjunto de funciones para exponer al hilo principal. Luego, importa Comlink en el hilo principal, envuelve el trabajador y obtiene acceso a las funciones expuestas:
+
+### `worker.js`
+
+```js
+import {expose} from "comlink";
+
+const api = {
+  someMethod() { /* … */ }
+}
+expose(api);
+```
+
+### `main.js`
+
+```js
+import {wrap} from "comlink";
+
+const worker = new Worker("./worker.js");
+const api = wrap(worker);
+```
+
+La variable de la `api` en el hilo principal se comporta de la misma manera que la del trabajador web, excepto que cada función devuelve una promesa de un valor en lugar del valor en sí.
+
+## ¿Qué código debería transferir a un trabajador web?
+
+Los trabajadores web no tienen acceso al DOM y a muchas API como [WebUSB](https://developer.mozilla.org/docs/Web/API/USB), [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) o [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API), por lo que no puede colocar partes de su aplicación que dependan de dicho acceso en un trabajador. Aún así, cada pequeño fragmento de código que se traslada a un trabajador genera más espacio en el hilo principal para las cosas que *tienen* que estar allí, como actualizar la interfaz de usuario.
+
+{% Aside %} Restringir el acceso de la IU al hilo principal, en realidad, es típico en otros idiomas. De hecho, tanto iOS como Android llaman al hilo principal el hilo de la *interfaz de usuario*. {% endAside %}
+
+Un problema para los desarrolladores web es que la mayoría de las aplicaciones web se basan en un marco de interfaz de usuario, como Vue o React, para organizar todo en la aplicación; todo es un componente del marco y, por lo tanto, está inherentemente vinculado al DOM. Eso parecería dificultar la migración a una arquitectura OMT.
+
+Sin embargo, si cambiamos a un modelo en el que las preocupaciones sobre la interfaz de usuario están separadas de otras, como la administración del estado, los trabajadores web pueden ser bastante útiles incluso con aplicaciones basadas en marcos. Ese es exactamente el enfoque adoptado con PROXX.
+
+## PROXX: un caso de estudio OMT
+
+El equipo de Google Chrome desarrolló [PROXX](/load-faster-like-proxx/) como un clon de Buscaminas que cumple con los [requisitos de la aplicación web progresiva](https://developers.google.com/web/progressive-web-apps), incluyendo el trabajo sin conexión y una experiencia de usuario atractiva. Desafortunadamente, las primeras versiones del juego funcionaron mal en dispositivos restringidos, como teléfonos básicos, lo que llevó al equipo a darse cuenta de que el hilo principal era un obstáculo.
+
+El equipo decidió utilizar trabajadores web para separar el estado visual del juego de su lógica:
+
+- El hilo principal maneja el renderizado de animaciones y transiciones.
+- Un trabajador web maneja la lógica del juego, que es puramente computacional.
+
+{% Aside %} Este enfoque es similar al [patrón de Flux](https://facebook.github.io/flux/) Redux, por lo que muchas aplicaciones Flux pueden migrar con bastante facilidad a una arquitectura OMT. Eche un vistazo a [esta publicación del blog](http://dassur.ma/things/react-redux-comlink/) para leer más sobre cómo aplicar la OMT a una aplicación Redux. {% endAside %}
+
+El uso de la OMT tuvo efectos interesantes en el rendimiento de PROXX en los teléfonos básicos. En la versión que no es OMT, la interfaz de usuario se congela durante seis segundos después de que el usuario interactúa con ella. No hay reatroalimentación y el usuario tiene que esperar seis segundos completos antes de poder hacer otra cosa.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Tiempo de respuesta de la interfaz de usuario en la versión <strong>no OMT</strong> de PROXX.</figcaption></figure>
+
+Sin embargo, en la versión OMT el juego tarda *doce* segundos en completar una actualización de la interfaz de usuario. Si bien eso parece una pérdida de rendimiento, en realidad conduce a una mayor retroalimentación para el usuario. La desaceleración se produce porque la aplicación envía más marcos que la versión que no es OMT, que no envía ningún marco. Por lo tanto, el usuario sabe que algo está sucediendo y puede continuar jugando a medida que se actualiza la interfaz de usuario, lo que hace que el juego se sienta considerablemente mejor.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Tiempo de respuesta de la interfaz de usuario en la versión <strong>OMT</strong> de PROXX.</figcaption></figure>
+
+Esta es una compensación consciente: brindamos a los usuarios de dispositivos restringidos una experiencia que se *siente* mejor, sin penalizar a los usuarios de dispositivos de gama alta.
+
+## Implicaciones de una arquitectura OMT
+
+Como muestra el ejemplo de PROXX, la metodología OMT hace que su aplicación se ejecute de manera confiable en una gama más amplia de dispositivos, pero no hace que su aplicación sea más rápida:
+
+- Simplemente está moviendo el trabajo del hilo principal, no reduciéndolo.
+- La sobrecarga de comunicación adicional entre el trabajador web y el hilo principal a veces puede hacer que las cosas sean un poco más lentas.
+
+### Considerando las compensaciones
+
+Dado que el hilo principal es libre de procesar las interacciones del usuario, como desplazarse mientras se ejecuta JavaScript, hay menos fotogramas descartados, aunque el tiempo de espera total puede ser ligeramente más largo. Hacer que el usuario espere un poco es preferible a descartar un fotograma porque el margen de error es menor para los fotogramas descartados: el descarte de un fotograma ocurre en milisegundos, mientras que hay *cientos* de milisegundos antes de que el usuario perciba el tiempo de espera.
+
+Debido a la imprevisibilidad del rendimiento en todos los dispositivos, el objetivo de la arquitectura OMT es realmente acerca de **reducir el riesgo** (hacer que su aplicación sea más robusta frente a condiciones de tiempo de ejecución altamente variables), no sobre los beneficios de rendimiento de la paralelización. El aumento de la resiliencia y las mejoras en UX valen la pena más que cualquier pequeña compensación en velocidad.
+
+{% Aside %} A los desarrolladores a veces les preocupa el costo de copiar objetos complejos en el hilo principal y los trabajadores web. Hay más detalles en la charla, pero, en general, no debe romper su presupuesto de rendimiento si la representación JSON en cadena de su objeto es inferior a 10 KB. Si necesita copiar objetos más grandes, considere usar [ArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) o [WebAssembly](https://webassembly.org/). Puede leer más al respecto en [esta publicación sobre el rendimiento de `postMessage`](https://dassur.ma/things/is-postmessage-slow). {% endAside %}
+
+### Una nota sobre las herramientas
+
+Los trabajadores web aún no son la opción más popular, por lo que la mayoría de las herramientas de módulos, como [WebPack](https://webpack.js.org/) y [Rollup,](https://github.com/rollup/rollup) no los admiten desde el primer momento. (¡Sin embargo, [Parcel](https://parceljs.org/) lo hace!) Afortunadamente, hay complementos para hacer que los trabajadores web *funcionen* con WebPack y Rollup:
+
+- [complemento de trabajador](https://github.com/GoogleChromeLabs/worker-plugin) para WebPack
+- [rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread) para Rollup
+
+## En resumen
+
+Para asegurarnos de que nuestras aplicaciones sean lo más confiables y accesibles que se pueda, especialmente en un mercado cada vez más globalizado, deben ser compatibles con dispositivos restringidos; es la forma en que la mayoría de los usuarios acceden a la web a nivel mundial. La OMT ofrece una forma prometedora de aumentar el rendimiento en dichos dispositivos sin afectar negativamente a los usuarios de dispositivos de gama alta.
+
+Además, la OMT tiene beneficios secundarios:
+
+- Mueve los costos de ejecución de JavaScript a un hilo separado.
+- Mueve los costos de *análisis*, lo que significa que la interfaz de usuario podría iniciarse más rápido. Eso podría reducir [First Contentful Paint](/fcp/) (primera pintura de contenido) o incluso [Time to Interactive](/tti/) (tiempo de interacción), lo que a su vez puede aumentar su puntaje [Lighthouse.](https://developer.chrome.com/docs/lighthouse/overview/)
+
+Los trabajadores web no tienen por qué dar miedo. Herramientas como Comlink eliminan el trabajo de los trabajadores y los convierten en una opción viable para una amplia gama de aplicaciones web.
diff --git a/src/site/content/es/blog/one-line-layouts/index.md b/src/site/content/es/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..51e33ccc0be
--- /dev/null
+++ b/src/site/content/es/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: Diez diseños modernos en una línea de CSS
+subhead: Este artículo destaca algunas poderosas líneas de CSS que se ocupan del trabajo pesado y le ayudan a construir diseños modernos y robustos.
+authors:
+  - una
+description: Este artículo destaca algunas poderosas líneas de CSS que se ocupan del trabajo pesado y le ayudan a construir diseños modernos y robustos.
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: Diseño del Santo Grial.
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+Los diseños de CSS modernos permiten a los desarrolladores escribir reglas de estilo realmente significativas y sólidas digitando unas pocas teclas. La conversación anterior y esta publicación posterior examinan 10 poderosas líneas de CSS que hacen un trabajo bien pesado.
+
+{% Glitch {id: '1linelayouts', path: 'README.md', height: 480} %}
+
+Para seguir o probar estas demostraciones por su cuenta, consulte el Glitch insertado arriba o visite [1linelayouts.glitch.me](https://1linelayouts.glitch.me).
+
+## 01. Supercentrado: `place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+Para el primer diseño 'de una sola línea', vamos a resolver el más grande misterio del CSS: cómo centrar las cosas. Verás que es más fácil de lo que piensas con [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items).
+
+Primero especifique `grid` como `display` y luego escriba `place-items: center` en el mismo elemento. `place-items` es una forma abreviada de establecer `align-items` y `justify-items` al mismo tiempo. Al darle el valor de `center`, tanto `align-items` como `justify-items` quedan con el valor `center`.
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+Esto permite que el contenido esté perfectamente centrado dentro del elemento primario, independientemente del tamaño intrínseco.
+
+## 02. El panqueque deconstruido: `flex: <grow> <shrink> <basewidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+¡A continuación tenemos el panqueque deconstruido! Este es un diseño común para los sitios de marketing, por ejemplo, que pueden tener una fila de 3 elementos, generalmente con una imagen, un título y luego algo de texto, que describe algunas características de un producto. En dispositivos móviles, queremos que estos elementos se apilen bien y se expandan a medida que aumentamos el tamaño de la pantalla.
+
+Al usar Flexbox para este efecto, no necesitará consultas de medios (media queries) para ajustar la ubicación de estos elementos cuando la pantalla cambie de tamaño.
+
+La abreviatura [`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) equivale a: `flex: <flex-grow> <flex-shrink> <flex-basis>`.
+
+Debido a esto, si desea que sus cajas llenen todo su `<flex-basis>`, se encoja en tamaños más pequeños, pero no se *estire* para llenar el espacio adicional, digite: `flex: 0 1 <flex-basis>`. En este caso, su `<flex-basis>` tiene `150px` por lo que se ve así:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+Si, en cambio *desea* que las cajas se estiren y llenen todo el espacio a medida que se desplazan a la siguiente línea, use `<flex-grow>` con el valor `1`, como se muestra a continuación:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+Ahora, a medida que aumenta o disminuye el tamaño de la pantalla, estos elementos flexibles crecen o se encogen respectivamente.
+
+## 03. La barra lateral dice: `grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+Esta demostración aprovecha la [función minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) para diseños de cuadrícula. Lo que haremos aquí es establecer el tamaño mínimo de la barra lateral a `150px`, pero en pantallas más grandes, dejaremos que se extienda `25%` más. La barra lateral siempre ocupará el `25%` del espacio horizontal del elemento padre hasta que ese `25%` se vuelva menor que `150px`.
+
+Agregue esto como un valor de grid-template-columns con el siguiente valor: `minmax(150px, 25%) 1fr`. El elemento de la primera columna (la barra lateral en este caso) tiene un `minmax` de `150px` con `25%`, y el segundo elemento (la sección `principal` en este caso) ocupa el resto del espacio como una sola sección`1fr`.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. Pila de panqueques: `grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+A diferencia del panqueque deconstruido, este ejemplo no ajusta a los elementos secundarios cuando el tamaño de la pantalla cambia. Comúnmente conocido como [sticky footer](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers), este diseño se usa a menudo tanto para sitios web como para aplicaciones, en aplicaciones móviles (el pie de página es comúnmente una barra de herramientas) y sitios web (las aplicaciones de una sola página a menudo usan este diseño global).
+
+Agregar `display: grid` al componente le dará una cuadrícula de una sola columna, sin embargo, el área principal solo será tan alta como el contenido con el pie de página debajo.
+
+Para hacer que el pie de página se pegue al final, agregue:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+Esto configura el contenido del encabezado y pie de página para que tome automáticamente el tamaño de sus hijos, y aplica el espacio restante (`1fr`) al área principal, mientras que la fila con tamaño `auto` tomará el tamaño del contenido mínimo de sus elementos secundarios, de modo que si ese contenido aumenta de tamaño, la fila crecerá para ajustarse.
+
+## 05. Diseño del Santo Grial clásico: `grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+Para este diseño clásico del Santo Grial, tenemos encabezado, pie de página, barra lateral izquierda, barra lateral derecha y contenido principal. Es similar al diseño anterior, ¡pero ahora con barras laterales!
+
+Para escribir la cuadrícula completa usando una sola línea de código, use la propiedad `grid-template`. Esto le permite configurar filas y columnas al mismo tiempo.
+
+El par de propiedad y valor es: `grid-template: auto 1fr auto / auto 1fr auto`. La barra inclinada entre la primera y la segunda lista separadas por espacios es el salto entre filas y columnas.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+Como en el último ejemplo, donde el encabezado y el pie de página tenían contenido de tamaño automático, aquí la barra lateral izquierda y derecha se dimensionan automáticamente en función del tamaño intrínseco de sus elementos secundarios. Sin embargo, esta vez es el tamaño horizontal (ancho) en lugar del vertical (alto).
+
+## 06. Cuadrícula flexible de 12-columnas: `grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+A continuación tenemos otro clásico: la cuadrícula de 12 columnas. Puede escribir cuadrículas rápidamente en CSS con la función `repeat()`. Utilizando: `repeat(12, 1fr);` para las columnas de la plantilla de cuadrícula obtiene 12 columnas de `1fr` cada una.
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+Ahora, con una cuadrícula de 12 columnas, podemos colocar a nuestros elementos secundarios en la cuadrícula. Una forma de hacer esto sería colocarlos usando líneas de cuadrícula. Por ejemplo, `grid-column: 1 / 13` 1/13 abarcaría todo el espacio desde la primera línea hasta la última (13ª) y abarcaría 12 columnas. `grid-column: 1 / 5;` abarcaría las primeras cuatro.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+Otra forma de escribir esto es usando la palabra clave `span`. Con `span`, se establece la línea de inicio y luego la cantidad de columnas que se abarcarán desde ese punto de inicio. En este caso, `grid-column: 1 / span 12` sería equivalente a `grid-column: 1 / 13`, y `grid-column: 2 / span 6` sería equivalente a `grid-column: 2 / 8`.
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+Para este séptimo ejemplo, combinamos algunos de los conceptos ya aprendidos para crear un diseño receptivo con elementos secundarios flexibles y posicionados automáticamente. Genial. Los términos clave para recordar aquí son `repeat`, `auto-(fit|fill)` y `minmax()'`, que puede recordar por la sigla RAM.
+
+Todo junto, se ve así:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+Está utilizando repeat de nuevo, pero esta vez, utilizando `auto-fit` en vez de un valor numérico explícito. Esto permite el posicionamiento automático de estos elementos secundarios. Estos elementos también tienen un valor mínimo de `150px` con un valor máximo de `1fr`, lo que significa que en pantallas más pequeñas, tendrán el ancho completo de `1fr` y, a medida que alcancen `150px` de ancho cada una, comenzarán a fluir hacia la misma línea.
+
+Con `auto-fit`, las cajas aumentarán a medida que su tamaño horizontal supere los 150px para llenar todo el espacio restante. Sin embargo, si cambia a `auto-fill`, no aumentarán cuando se exceda su tamaño base con la función minmax:
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. Alinear: `justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+Para el siguiente diseño, el punto principal a demostrar aquí es `justify-content: space-between`, que coloca el primer y el último elemento secundario en los bordes de su caja delimitadora, con el espacio restante distribuido uniformemente entre los elementos. Para estas tarjetas, se colocan en un modo de visualización Flexbox, con la dirección configurada en columna usando `flex-direction: column`.
+
+Esto coloca el título, la descripción y el bloque de imagen en una columna vertical dentro de la tarjeta principal. Luego, la aplicación de `justify-content: space-between` ancla el primer (título) y el último (bloque de imagen) elemento a los bordes del flexbox, y el texto descriptivo entre ellos se coloca con el mismo espaciado en cada extremo.
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. Cohibiendo el estilo: `clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+Aquí es donde entramos en algunas técnicas con [menos compatibilidad](https://caniuse.com/#feat=css-math-functions) con el navegador, pero con algunas implicaciones realmente interesantes para la disposición y el diseño de interfaz de usuario receptiva. En esta demostración, está configurando el ancho usando clamp de la siguiente manera: `width: clamp(<min, <actual>, <max>)`.
+
+Esto establece un tamaño mínimo y máximo absoluto, y un tamaño real. Con valores, puede verse así:
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+El tamaño mínimo aquí es de `23ch` o 23 unidades de caracteres, y el tamaño máximo es de `46ch`, 46 caracteres. [Las unidades de ancho de carácter](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) se basan en el tamaño de fuente del elemento (específicamente el ancho del caracter `0` ). El tamaño 'real' es 50%, que representa el 50% del ancho principal de este elemento.
+
+Lo que `clamp()` hace aquí es permitir que este elemento retenga un 50% de ancho *hasta* que el 50% sea mayor que `46ch` (en ventanillas más amplias) o menor que `23ch` (en ventanillas más pequeñas). Puede ver que a medida que se estira y se encoge el tamaño principal, el ancho de esta tarjeta aumenta hasta su punto límite máximo y disminuye hasta su límite mínimo. Luego permanece centrado en el elemento primario, ya que hemos aplicado propiedades adicionales para centrarlo. Esto permite diseños más legibles, ya que el texto no será demasiado ancho (por encima de `46ch` ) ni demasiado aplastado y estrecho (menos de `23ch`).
+
+Esta también es una excelente manera de implementar tipografía receptiva. Por ejemplo, podría escribir: `font-size: clamp(1.5rem, 20vw, 3rem)`. En este caso, el tamaño de fuente de un título siempre se mantendrá entre `1.5rem` y `3rem` pero crecerá y se reducirá en función del valor actual de `20vw` para ajustarse al ancho de la ventanilla.
+
+Esta es una excelente técnica para garantizar la legibilidad con un valor de tamaño mínimo y máximo, pero recuerde que no es compatible con todos los navegadores modernos, así que asegúrese de tener alternativas y realice las pruebas.
+
+## 10. Respeto por el aspecto: `aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+Y finalmente, esta última herramienta de diseño es la más experimental de todas. Recientemente se introdujo a Chrome Canary en Chromium 84, y Firefox realiza un esfuerzo activo para implementarla, pero actualmente no se encuentra en ninguna de las ediciones estables de navegadores.
+
+Aún así, queremos mencionarlo porque es un problema que se encuentra con mucha frecuencia: mantener la relación de aspecto de una imagen.
+
+Con la propiedad `aspect-ratio`, a medida que cambiamos el tamaño de la tarjeta, el bloque visual verde mantiene esta relación de aspecto de 16 x 9. Estamos respetando la relación de aspecto usando `aspect-ratio: 16 / 9`.
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+Para mantener una relación de aspecto de 16 x 9 sin esta propiedad, es preciso usar un [hack de `padding-top`](https://css-tricks.com/aspect-ratio-boxes/) con un relleno del `56.25%` para establecer una relación entre la parte superior y el ancho. En breve tendremos una propiedad para que esto y no tendremos que recurrir al hack y a la necesidad de calcular el porcentaje. Puede hacer un cuadrado con proporción `1 / 1`, una proporción de 2 a 1 con `2 / 1` y realmente cualquier cosa que necesite para que esta imagen sea dimensionada con una proporción de tamaño específica.
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+Si bien esta función aún está en desenvolvimiento, es bueno conocerla, ya que resuelve una de las problemáticas de desarrolladores a las que nos enfrentamos con frecuencia, especialmente cuando se trata de videos e iframes.
+
+## Conclusión
+
+Gracias por hacer este recorrido a través de 10 poderosas líneas de CSS. Para obtener más información, vea [el video completo](https://youtu.be/qm0IfG1GyZU) y pruebe [las demostraciones](https://1linelayouts.glitch.me) por sí mismo.
diff --git a/src/site/content/es/blog/open-web-docs/index.md b/src/site/content/es/blog/open-web-docs/index.md
new file mode 100644
index 00000000000..88a9a27a205
--- /dev/null
+++ b/src/site/content/es/blog/open-web-docs/index.md
@@ -0,0 +1,22 @@
+---
+title: Presentación de Open Web Docs
+subhead: |2-
+
+  Un proyecto colectivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung,
+  e Igalia para apoyar la creación y mantenimiento de la documentación estratégica de la plataforma web.
+description: |2-
+
+  Un proyecto colectivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung,
+  e Igalia para apoyar la creación y mantenimiento de la documentación estratégica de la plataforma web.
+authors:
+  - robertnyman
+date: 2021-01-25
+tags:
+  - blog
+---
+
+La documentación de alta calidad para las tecnologías de plataformas web es un componente de vital importancia de nuestra infraestructura digital abierta y compartida. Hoy, estoy emocionado de presentar públicamente [Open Web Docs](https://opencollective.com/open-web-docs), un proyecto colectivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung e Igalia. Está diseñado para apoyar a una comunidad de redactores técnicos en torno a la creación estratégica y el mantenimiento a largo plazo de la documentación tecnológica de la plataforma web que sea abierta e inclusiva para todos.
+
+Esta no es una nueva plataforma de documentos: Open Web Docs está trabajando en estrecha colaboración con las plataformas existentes y su prioridad actual son las contribuciones a [MDN Web Docs](https://developer.mozilla.org/). Se creó para garantizar la salud a largo plazo de la documentación de la plataforma web en recursos estándar de facto, independientemente de cualquier proveedor u organización. A través del personal de tiempo completo, la administración de la comunidad y la red de organizaciones asociadas de Open Web Docs, permite que estos recursos mantengan y respalden mejor la documentación de las tecnologías centrales de la plataforma web. En lugar de crear nuevos sitios de documentación, Open Web Docs se compromete a mejorar las plataformas existentes a través de nuestras contribuciones.
+
+¡Visite [Open Web Docs](https://opencollective.com/open-web-docs), la [publicación de lanzamiento y las preguntas frecuentes](https://opencollective.com/open-web-docs/updates/introducing-open-web-docs) para obtener más información!
diff --git a/src/site/content/es/blog/optimize-cls/index.md b/src/site/content/es/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..d373446dbd9
--- /dev/null
+++ b/src/site/content/es/blog/optimize-cls/index.md
@@ -0,0 +1,279 @@
+---
+title: Cómo optimizar Cumulative Layout Shift
+subhead: Aprenda a evitar los cambios repentinos de diseño para mejorar la experiencia del usuario
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: Cumulative Layout Shift (CLS) es una métrica que cuantifica la frecuencia con la que los usuarios experimentan cambios repentinos en el contenido de la página. En esta guía, cubriremos la optimización de las causas comunes de CLS, como las imágenes y los iframes sin dimensiones o el contenido dinámico.
+alt: Los cambios de diseño pueden empujar repentinamente el contenido que está leyendo o en el que se va a hacer clic más abajo en la página, lo que provoca una experiencia de usuario deficiente. Reservar espacio para los contenidos dinámicos que provocan cambios en el diseño permite realizar una experiencia de usuario más agradable.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='88' %}
+
+"¡Estaba a punto de hacer clic en eso! ¿Por qué se movió? 😭"
+
+Los cambios de diseño pueden distraer a los usuarios. Imagine que comenzó a leer un artículo y, de repente, los elementos cambian alrededor de la página, lo que le hace perder y le pide que encuentre su sitio de nuevo. Esto es muy común en la web, incluso cuando se leen las noticias o se intenta hacer clic en los botones "Buscar" o "Agregar al carrito". Tales experiencias son visualmente discordantes y frustrantes. A menudo se producen cuando los elementos visibles se ven obligados a moverse porque otro elemento se agregó repentinamente a la página o cambió su tamaño.
+
+[Cumulative Layout Shift: Cambio Acumulativo del diseño](/cls) (CLS): una métrica de [Core Web Vitals](/vitals), mide la inestabilidad del contenido sumando las puntuaciones en los cambios de diseño que no se producen dentro de los 500 ms de la entrada de los usuarios. Se observa la cantidad de contenido visible que cambió en la ventana de visualización, así como la distancia a la que cambiaron los elementos impactados.
+
+En esta guía, cubriremos la optimización de las causas comunes de los cambios de diseño.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Los valores de CLS buenos son inferiores a 0,1, los valores deficientes son superiores a 0,25 y cualquier valor intermedio debe mejorarse", width="384", height="96" %}
+  </picture>
+
+Las causas más comunes de una CLS deficiente son:
+
+- Imágenes sin dimensiones
+- Anuncios, inserciones e iframes sin dimensiones
+- Contenido inyectado dinámicamente
+- Fuentes web que causan FOIT/FOUT
+- Acciones que esperan una respuesta de la red antes de actualizar el DOM
+
+## Imágenes sin dimensiones 🌆
+
+**Resumen:** siempre incluya los atributos de tamaño `width` y `height` en sus imágenes y elementos de video. Alternativamente, reserve el espacio necesario con [casillas de relación de aspecto en CSS](https://css-tricks.com/aspect-ratio-boxes/). Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.
+
+  <figure>   {% Video     src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"],     poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg",     controls=true,     loop=true,     muted=true %}  <figcaption>     Imágenes sin ancho ni alto específico.   </figcaption> </figure>
+
+  <figure>   {% Video     src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"],     poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg",     controls=true,     loop=true,     muted=true %}  <figcaption>     Imágenes sin ancho ni alto especificado.   </figcaption> </figure>
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="Informe de Lighthouse que muestra el impacto antes/después del Cumulative Layout Shift después de establecer las dimensiones en las imágenes", width="800", height="148" %} <figcaption>   Impacto de Lighthouse 6.0 en el establecimiento de las dimensiones de la imagen en CLS. </figcaption> </figure>
+
+### Historia
+
+En los primeros días de la web, los desarrolladores agregaban los atributos `width` y `height` en sus etiquetas `<img>` para garantizar de que se asigne suficiente espacio en la página antes de que el navegador comience a obtener las imágenes. Esto minimizaría el reflujo y el rediseño.
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+Puede notar que `width` y `height` situados anteriormente en el texto no incluyen unidades. Estas dimensiones en "pixeles" garantizarían que se reserve un área de 640x360. La imagen se estiraría para adaptarse a este espacio, independientemente de si las dimensiones reales coinciden o no.
+
+Cuando se introdujo el [Diseño web responsivo](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/), los desarrolladores comenzaron a omitir `width` y `height`, y empezaron a utilizar CSS para cambiar el tamaño de las imágenes:
+
+```css
+img {
+  width: 100%; /* or max-width: 100%; */
+  height: auto;
+}
+```
+
+Una desventaja de este enfoque es que solo se puede asignar espacio a una imagen una vez que se comienza a descargar y el navegador puede determinar sus dimensiones. Conforme se cargaban las imágenes, la página se redimensionaba conforme que aparecía cada imagen en la pantalla. Se volvió común que el texto apareciera repentinamente en la pantalla. Esta no era en absoluto una gran experiencia para el usuario.
+
+Aquí es donde entra en juego la relación de aspecto. La relación de aspecto de una imagen es la relación entre su ancho y su altura. Es común ver esto expresado como dos números separados por dos puntos (por ejemplo, 16: 9 o 4: 3). Para una relación de aspecto x: y, la imagen tiene "x" unidades de ancho y "y" unidades de alto.
+
+Esto significa que si conocemos una de las dimensiones, se puede determinar la otra. Para una relación de aspecto 16:9 podríamos obtener lo siguiente:
+
+- Si puppy.jpg tiene una altura de 360 px, el ancho es 360 x (16/9) = 640 px
+- Si puppy.jpg tiene un ancho de 640 px, la altura es de 640 x (9/16) = 360 px
+
+Conocer la relación de aspecto permite al navegador calcular y reservar suficiente espacio para la altura y el área asociada.
+
+### Prácticas recomendadas modernas
+
+Los navegadores modernos ahora establecen la relación de aspecto predeterminada de las imágenes basándose en los atributos del ancho y alto de una imagen, por lo que es valioso establecerlos para evitar cambios de diseño. Gracias al Grupo de Trabajo de CSS, los desarrolladores solo necesitan establecer el `width` y el `height` de forma habitual:
+
+```html
+<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+… y las [hojas de estilo UA](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets) de todos los navegadores agregan una [relación de aspecto predeterminada](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images) basada en los atributos de `width` y `height`
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+Esto calcula una relación de aspecto basada en los atributos `width` y `height` antes de que se cargue la imagen. Proporciona esta información al comienzo del cálculo del diseño. En cuanto se indica que una imagen tiene un ancho determinado (por ejemplo, `width: 100%` ), la relación de aspecto se utiliza para calcular la altura.
+
+Sugerencia: si tiene dificultades para comprender la relación de aspecto, hay una [calculadora](https://aspectratiocalculator.com/16-9.html) útil disponible para ayudarlo.
+
+Los cambios de relación de aspecto de la imagen anteriores se enviaron a [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) y [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891), y están llegando a [WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari).
+
+Para una fantástica inmersión en profundidad en la relación de aspecto con un análisis más detallado de las imágenes responsivas, consulte [Cómo cargar páginas libres de bloqueos con relaciones de aspecto en los medios](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/).
+
+Si su imagen está en un contenedor, puede utilizar CSS para cambiar el tamaño de la imagen al ancho de este contenedor. Establecemos `height: auto;` para evitar que la altura de la imagen sea un valor fijo (por ejemplo, `360px`).
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**¿Qué sucede con las imágenes responsive?**
+
+Cuando se trabaja con [imágenes responsive](/serve-responsive-images), `srcset` define las imágenes entre las que se permite que el navegador seleccione y el tamaño de cada imagen. Para garantizar que los atributos width y height de `<img>` se puedan establecer, cada imagen debe utilizar la misma relación de aspecto.
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="Puppy with balloons"
+/>
+```
+
+¿Qué sucede con la [dirección de arte](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)?
+
+Es posible que las páginas deseen incluir una foto recortada de una imagen en ventanas de visualización estrechas con la imagen completa tal como se muestra en el escritorio.
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
+</picture>
+```
+
+Es muy probable que estas imágenes tengan diferentes relaciones de aspecto y los navegadores aún estén evaluando cuál debería ser la solución más eficiente en este caso, incluso si las dimensiones deben especificarse en todas las fuentes. Hasta que se decida una solución, la retransmisión sigue siendo posible en este caso.
+
+## Anuncios, incrustaciones e iframes sin dimensiones 📢😱
+
+### Anuncios
+
+Los anuncios son uno de los factores que más contribuyen a los cambios de diseño en la web. Las redes publicitarias y los editores normalmente admiten tamaños de anuncios dinámicos. Los tamaños de los anuncios aumentan el rendimiento y los ingresos debido a las mayores tasas de clics y al mayor número de anuncios que compiten en la subasta. Desafortunadamente, esto puede conducir a una experiencia de usuario subóptima debido a que los anuncios empujan el contenido visible que está viendo hacia abajo en la página.
+
+Durante el ciclo de vida del anuncio, muchos puntos pueden introducir el cambio de diseño:
+
+- Cuando un sitio inserta el contenedor de anuncios en el DOM
+- Cuando un sitio cambia el tamaño del contenedor de anuncios con código de origen
+- Cuando se carga la biblioteca de etiquetas de anuncios (y cambia el tamaño del contenedor de anuncios)
+- Cuando el anuncio llena un contenedor (y cambia de tamaño si el anuncio final tiene un tamaño diferente)
+
+La buena noticia es que es posible que los sitios sigan las prácticas recomendadas para reducir el cambio de los anuncios. Los sitios pueden mitigar estos cambios de diseño de la siguiente manera:
+
+- Reserve de forma estática el espacio publicitario.
+    - En otras palabras, aplique estilo al elemento antes de que se cargue la biblioteca de etiquetas de anuncios.
+    - Si coloca anuncios en el flujo de contenido, asegúrese de eliminar los cambios reservando el tamaño del espacio. Estos anuncios *no deberían* causar cambios de diseño si se cargan fuera de la pantalla.
+- Tenga cuidado al colocar anuncios no adhesivos cerca de la parte superior de la ventana de visualización.
+    - En el siguiente ejemplo, se recomienda mover el anuncio a la parte inferior del logotipo de "visión del mundo" y asegúrese de reservar suficiente espacio para el lugar.
+- Evite contraer el espacio reservado si no se devuelve ningún anuncio cuando el espacio publicitario se encuentra visible para mostrar un marcador de posición.
+- Elimine los cambios reservando el mayor tamaño posible para el espacio publicitario.
+    - Esto funciona, pero corre el riesgo de tener un espacio en blanco si un mensaje publicitario más pequeño llena el lugar.
+- Elija el tamaño más probable para el espacio publicitario basándose en los datos históricos.
+
+Algunos sitios pueden encontrar que contraer el lugar inicialmente puede reducir los cambios de diseño si es poco probable que se llene el espacio publicitario. No hay una manera fácil de elegir el tamaño exacto cada vez, a menos que usted mismo controle los servicios publicitarios.
+
+  <figure>   {% Video     src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"],     poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg",     controls=true,     loop=true,     muted=true %}  <figcaption>     Anuncios sin suficiente espacio reservado.   </figcaption> </figure>
+
+  <figure>     {% Video       src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"],       poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg",       controls=true,       loop=true,       muted=true %}  <figcaption>     Anuncios con suficiente espacio reservado.   </figcaption> </figure>
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="Informe del Lighthouse que muestra el impacto antes/después del Cumulative Layout Shift para reservar el espacio para banners como anuncios", width="800", height="148" %} <figcaption>   Impacto de Lighthouse 6.0 para reservar el espacio de este banner en CLS </figcaption> </figure>
+
+#### Reserve de forma estática el espacio publicitario
+
+Diseñe de forma estática los elementos del espacio del DOM con los mismos tamaños transferidos a su biblioteca de etiquetas. Esto puede ayudar a garantizar que la biblioteca no introduzca cambios de diseño cuando se cargue. Si no hace esto, la biblioteca puede cambiar el tamaño del lugar para el elemento después de diseñar la página.
+
+También considere los tamaños de los anuncios más pequeños. Si se publica un anuncio más pequeño, un editor puede diseñar el contenedor (más grande) para evitar cambios de diseño. La desventaja de este enfoque es que aumentará la cantidad de espacio en blanco, así que tenga en cuenta la disyuntiva.
+
+#### Evite colocar anuncios cerca de la parte superior de la ventana de visualización
+
+Los anuncios situados cerca de la parte superior de la ventana de visualización pueden provocar un mayor cambio del diseño que los situados en el centro. Esto se debe a que los anuncios de la parte superior generalmente tienen más contenido que en la parte inferior, lo que significa que se mueven más elementos cuando el anuncio provoca un cambio. Por el contrario, los anuncios situados en el centro de la ventana de visualización puede que no cambien tantos elementos, ya que es menos probable que el contenido situado por encima se mueva.
+
+### Incrustaciones e iframes
+
+Los widgets integrables le permiten incrustar contenido web portátil en su página (por ejemplo, videos de YouTube, mapas de Google Maps, publicaciones en redes sociales, y así sucesivamente). Estas incrustaciones pueden adoptar varias formas:
+
+- Respaldo HTML y una etiqueta JavaScript que transforma el respaldo en una incrustación elegante
+- Fragmento de HTML en estilos integrados en el código
+- iframe incrustado
+
+Estas incrustaciones con frecuencia no son conscientes del tamaño de una incrustación (por ejemplo, en el caso de una publicación en las redes sociales: ¿tiene una imagen incrustada, un video, varias filas de texto?). Como resultado, las plataformas que ofrecen incrustaciones no siempre reservan suficiente espacio para sus incrustaciones y pueden provocar cambios de diseño cuando finalmente se cargan.
+
+  <figure>   {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %}  <figcaption>     Incrustar sin espacio reservado.   </figcaption> </figure>
+
+  <figure>   {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %}  <figcaption>     Incrustar con espacio reservado.   </figcaption> </figure>
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="Informe del Lighthouse que muestra el impacto antes/después del Cumulative Layout Shift para reservar el espacio para esta incrustación en CLS", width="800", height="148" %} <figcaption>   Informe del Lighthouse 6.0 que muestra el impacto para reservar el espacio para esta incrustación en CLS </figcaption> </figure>
+
+Para solucionar esto, puede minimizar el CLS pre-calculando el espacio suficiente para las incrustaciones con un marcador de posición o una reserva. Un flujo de trabajo que puede utilizar para las incrustaciones:
+
+- Obtenga la altura de su incrustación final inspeccionándola con las herramientas de desarrollo de su navegador
+- Una vez que la incrustación se cargue, el contenido del iframe cambiará de tamaño para ajustarse a su contenido.
+
+Tome nota de las dimensiones y aplique el estilo de un marcador de posición para la incrustación correspondiente. Es posible que deba tener en cuenta las diferencias sutiles en el tamaño de los anuncios/marcadores de posición entre diferentes factores de forma que utilice consultas de medios.
+
+### Contenido dinámico 📐
+
+**Resumen:** evite insertar contenido nuevo por encima del contenido existente, a menos que sea en respuesta a la interacción del usuario. Esto asegura que se esperen los cambios de diseño que se produzcan.
+
+Probablemente haya experimentado cambios de diseño debido a la interfaz de usuario que aparece en la parte superior o inferior de la ventana de visualización cuando intenta cargar un sitio. Al igual que con los anuncios, esto normalmente sucede con los banners y formularios que cambian el resto del contenido de la página:
+
+- "¡Suscríbase a nuestro boletín!" (¡Vaya, más despacio! ¡Nos acabamos de conocer!)
+
+- "Contenido relacionado"
+
+- "Instale nuestra aplicación [iOS/Android]"
+
+- "Aún estamos recibiendo solicitudes"
+
+- "Notificación del  GDPR"
+
+    <figure>   {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %}   <figcaption>     Contenido dinámico sin espacio reservado.   </figcaption> </figure>
+
+Si necesita mostrar este tipo de posibilidades de la interfaz del usuario, reserve suficiente espacio en la ventana de visualización para ello con anticipación (por ejemplo, utilice un marcador de posición o una interfaz de usuario de esqueleto) para que cuando se cargue, no haga que el contenido de la página cambie de forma sorprendentemente.
+
+En algunos casos, agregar contenido de forma dinámica es una parte importante de la experiencia del usuario. Por ejemplo, al cargar más productos en una lista de artículos o al actualizar el contenido de la transmisión en vivo. Hay varias formas de evitar cambios de diseño inesperados en esos casos:
+
+- Sustituya el contenido antiguo por el nuevo dentro de un contenedor de tamaño fijo o utilice un carrusel y elimine el contenido antiguo después de la transición. Recuerde deshabilitar los enlaces y controles hasta que se complete la  transición para evitar clics o toques accidentales mientras llega el nuevo contenido.
+- Haga que el usuario inicie la carga de contenido nuevo, para que no se sorprenda con el cambio (por ejemplo, con un botón "Cargar más" o "Actualizar"). Se recomienda buscar previamente el contenido antes de la interacción con el usuario para que aparezca de inmediato. Como recordatorio, los cambios de diseño que ocurren dentro de los 500 ms de la entrada del usuario no cuentan para CLS.
+- Cargue sin problemas el contenido fuera de la pantalla y superponga una notificación para que el usuario sepa que está disponible (por ejemplo, con un botón "Desplazarse hacia arriba").
+
+<figure>   {% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="Ejemplos de carga de contenido dinámico sin provocar cambios de diseño inesperados en Twitter y el sitio web de Chloe", width="800", height="458" %}   <figcaption>     Ejemplos de carga de contenidos dinámicos sin provocar cambios inesperados en el diseño. Izquierda: carga de contenido en vivo en Twitter. Derecha: el ejemplo "obtener más información" en el sitio web de Chloé. Verifique cómo el equipo de YNAP se <a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">optimizó para que CLS cargue más contenido</a>.   </figcaption> </figure>
+
+### Fuentes web que causan FOUT/FOIT 📝
+
+La descarga y la renderización de fuentes web pueden provocar cambios en el diseño de dos formas:
+
+- La fuente alternativa se cambia por una nueva (FOUT: destello de texto sin estilo)
+- El texto "invisible" se muestra hasta que se procesa una nueva fuente (FOIT: destello de texto invisible)
+
+Las siguientes herramientas pueden ayudarle a minimizar esto:
+
+- <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code>  permite modificar el comportamiento de la renderización de fuentes personalizadas con valores como <code>auto</code> , <code>swap</code> , <code>block</code> , <code>fallback</code> y <code>optional</code>. Desafortunadamente, todos estos valores (excepto los [opcionales](http://crrev.com/749080)) pueden causar un rediseño de una de las formas anteriores.
+- La [API para cargar fuentes](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) puede reducir el tiempo necesario para obtener las fuentes necesarias.
+
+A partir de Chrome 83, también puedo recomendar lo siguiente:
+
+- Al utilizar `<link rel=preload>` en las fuentes web clave: una fuente precargada tendrá una mayor probabilidad de encontrarse con el primer despliegue, en cuyo caso no habrá cambios de diseño.
+- Combinando `<link rel=preload>` y `font-display: optional`
+
+Lea [Cómo prevenir cambios de diseño y destellos del texto invisible (FOIT) cargando previamente fuentes opcionales](/preload-optional-fonts/) para obtener más detalles.
+
+### Animaciones 🏃‍♀️
+
+**Resumen:** elija las animaciones de `transform` a las animaciones de las propiedades que desencadenan cambios de diseño.
+
+Los cambios en los valores de las propiedades CSS pueden hacer que el navegador reaccione a estos cambios. Un número de valores desencadenan el rediseño, el despliegue y la composición, como `box-shadow` y `box-sizing`. Varias propiedades de CSS se pueden cambiar de una manera menos costosa.
+
+Para obtener más información sobre las propiedades de CSS que activan el diseño, consulte [animaciones de alto rendimiento](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/).
+
+### Herramientas para desarrolladores 🔧
+
+Me complace compartir que hay una serie de herramientas disponibles para medir y depurar el Cumulative Layout Shift (CLS).
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [6.0](https://github.com/GoogleChrome/lighthouse/releases) y posteriores incluyen soporte para medir CLS en un entorno de laboratorio. Esta versión también destacará los nodos que causan más cambios de diseño.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="Lighthouse 6.0 incluye soporte para medir CLS en la sección de métricas", width="800", height="309" %}
+
+El [panel de Rendimiento](https://developer.chrome.com/docs/devtools/evaluate-performance/) en DevTools resalta los cambios de diseño en la sección **Experiencia a** a partir de Chrome 84. La vista del **Resumen** para un realizar un `Cambio en el diseño` incluye la puntuación de cumulative layout shift, así como una superposición rectangular que muestra las regiones afectadas.
+
+<figure>   {% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Los registros de cambio de diseño se muestran en el panel de rendimiento de Chrome DevTools cuando se expande la sección Experiencia", width="800", height="438" %}   <figcaption>Después de registrar un nuevo seguimiento en el panel de Rendimiento, la sección <b>Experiencia</b> de los resultados se completa con una barra de color rojo que muestra un registro <code>Layout Shift</code>. Al hacer clic en el registro, se puede profundizar en los elementos impactados (por ejemplo, observar desde/hasta las entradas que se movieron).</figcaption> </figure>
+
+También es posible medir CLS del mundo real agregado un nivel de origen que utilice el [Chrome User Experience Report](https://developer.chrome.com/blog/chrome-ux-report-bigquery/). Los datos de CrUX CLS están disponibles por medio de BigQuery y una [consulta de muestra](https://github.com/GoogleChrome/CrUX/blob/main/sql/cls-summary.sql) para ver que el rendimiento de CLS está disponible para su uso.
+
+Espero que esto le ayude a mantener sus páginas con menos cambios :)
+
+*Agradecemos a Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes y Gilberto Cocchi por sus valiosos comentarios.*
diff --git a/src/site/content/es/blog/optimize-fid/index.md b/src/site/content/es/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..346154fa0b0
--- /dev/null
+++ b/src/site/content/es/blog/optimize-fid/index.md
@@ -0,0 +1,170 @@
+---
+title: Cómo optimizar First Input Delay
+subhead: Cómo responder más rápido a las interacciones de los usuarios.
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: Una mano tocando la pantalla de un teléfono inteligente
+description: First Input Delay (FID) mide el tiempo que transcurre desde que un usuario interactúa por primera vez con su sitio hasta el momento en que el navegador es capaz de responder a esa interacción. Descubra cómo optimizar la FID al minimizar los procesos de JavaScript que no se utilicen dividiendo las tareas largas y mejorando la preparación para la interacción.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>¡Hice clic en ella pero no pasó nada! ¿Por qué no puedo interactuar con esta página? 😢</p>
+</blockquote>
+
+[First Contentful Paint: Primer despliegue del contenido](/fcp/) (FCP) y [Largest Contentful Paint: Despliegue del contenido más extenso](/lcp/) (LCP) son métricas que miden el tiempo que tarda el contenido en renderizarse (desplegarse) visualmente en una página. Aunque es importante, el tiempo que toma el despliegue no captura la *capacidad de respuesta de la carga* ni la rapidez en que una página responde a la interacción con el usuario.
+
+[First Input Delay: Demora de la primera entrada](/fid/) (FID) es una [métrica de Core Web Vitals](/vitals/) que captura la primera impresión del usuario sobre la interactividad y la capacidad de respuesta de un sitio. Mide el tiempo que transcurre desde que el usuario interactúa por primera vez con una página hasta el momento en que el navegador es capaz de responder a esa interacción. El FID es una [métrica de campo](/user-centric-performance-metrics/#in-the-field) y no se puede simular en un entorno de laboratorio. Es necesario tener **una interacción real con el usuario** para medir la demora en la respuesta.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Los valores de fid correctos son 2,5 segundos, los valores deficientes son superiores a 4,0 segundos y cualquier valor intermedio debe mejorarse", width="384", height="96" %}
+</picture>
+
+Para predecir la FID en el [laboratorio](/how-to-measure-speed/#lab-data-vs-field-data), recomendamos que se utilice el [Total Blocking Time: Tiempo de bloqueo total (TBT)](/tbt/). Ambas métricas miden cosas diferentes, pero las mejoras en el TBT generalmente coinciden con mejoras en la FID.
+
+La principal causa de una FID deficiente es que **JavaScript se ejecute intensamente**. Optimizar la forma en que JavaScript efectúa análisis, compilaciones y se ejecuta en su página web reducirá directamente la FID.
+
+## Ejecución intensa de JavaScript
+
+El navegador no puede responder a la mayoría de las entradas de los usuarios mientras ejecuta JavaScript en el subproceso principal. En otras palabras, el navegador no puede responder a las interacciones del usuario mientras el subproceso principal esté ocupado. Para mejorar esta situación, haga lo siguiente:
+
+- [Divida las tareas largas](#long-tasks)
+- [Optimice su página de modo que esté lista para la interacción](#optimize-interaction-readiness)
+- [Utilice un trabajador web](#use-a-web-worker)
+- [Reduzca el tiempo de ejecución de JavaScript](#reduce-javascript-execution)
+
+## Divida las tareas largas {: #long-tasks}
+
+Si ya intentó reducir la cantidad de procesos en JavaScript que se cargan en una sola página, quizás resulte útil dividir el código de ejecución prolongada en **tareas asincrónicas más pequeñas**.
+
+Las [**tareas largas**](/custom-metrics/#long-tasks-api) son periodos de ejecución en JavaScript donde los usuarios pueden descubrir que su interfaz de usuario no responde. Cualquier fragmento de código que bloquee el subproceso principal durante 50 ms o más se puede caracterizar como una tarea larga. Las tareas largas son una señal de que posiblemente JavaScript se esté utilizando en exceso (cargar y ejecutar más de lo que un usuario necesite en ese momento). Dividir las tareas largas podría reducir el retraso al entrar en su sitio.
+
+<figure>{% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Tareas largas en Chrome DevTools", width="800", height="132" %} <figcaption>Chrome DevTools <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">permite visualizar las tareas largas</a> en el panel de rendimiento</figcaption></figure>
+
+La FID debería mejorar notablemente a medida que implemente las mejores prácticas, como separar el código y dividir sus tareas largas. Si bien el TBT no es una métrica de campo, es útil para verificar el progreso hacia las mejoras finales tanto del Time To Interactive: Tiempo para interactuar (TTI) como de la FID.
+
+{% Aside %} Para obtener más información, consulte [¿Las largas tareas de JavaScript retrasan su tiempo para interactuar?](/long-tasks-devtools/) . {% endAside %}
+
+## Optimice su página de modo que esté lista para la interacción
+
+Hay una gran cantidad de causas frecuentes para que la FID y el TBT tengan puntajes bajos en las aplicaciones web que dependen en gran medida de JavaScript:
+
+### La ejecución de scripts en el origen puede retrasar la preparación para la interacción
+
+- El exceso de tamaño en JavaScript, los tiempos de ejecución intensos y la fragmentación poco eficiente pueden reducir la velocidad con que una página responde a la entrada del usuario y afectar a las métricas FID, TBT y TTI. Cargar de forma progresiva el código y las funciones ayudaría a distribuir todo el trabajo y mejorar la preparación para la interacción.
+- Podría parecer como si las aplicaciones renderizadas en el lado del servidor estuvieran dibujando píxeles en la pantalla rápidamente, pero tenga cuidado con las interacciones del usuario que fueron bloqueadas por la ejecución de scripts grandes (por ejemplo, rehidratación para conectar a los oyentes de eventos). Esto puede tardar varios cientos de milisegundos, a veces incluso segundos, si se utiliza la división del código según las rutas. Considere cambiar un porcentaje mayor de la lógica en el lado del servidor o generar más contenido estático durante el tiempo de compilación.
+
+A continuación, se muestran las puntuaciones del TBT antes y después de optimizar la carga de scripts en el origen para una aplicación. Al mover la costosa carga de scripts (y su ejecución) para un componente no esencial fuera de la ruta crítica, los usuarios pudieron interactuar con la página mucho tiempo antes.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="Mejoras en la puntuación del TBT en Lighthouse después de optimizar el script en el origen", width="800", height="148" %}
+
+### La búsqueda de datos puede afectar muchos aspectos de la preparación para la interacción
+
+- Esperar a que se realice una serie de búsquedas en cascada (por ejemplo, JavaScript junto con búsquedas de datos para los componentes) puede afectar la latencia de la interacción. Trate de reducir al mínimo la dependencia a las búsquedas de datos en cascada.
+- Los grandes almacenes de datos en línea pueden aumentar el tiempo de análisis en HTML y afectar tanto en el despliegue como en las métricas de la interacción. Trate de reducir al mínimo la cantidad de datos que deben procesarse posteriormente en el lado del cliente.
+
+### La ejecución de un script de terceros también puede retrasar la latencia de la interacción
+
+- Muchos sitios incluyen etiquetas y análisis de terceros que pueden mantener la red ocupada y hacer que el subproceso principal deje de responder periódicamente, afectando la latencia de la interacción. Analice la carga bajo demanda del código de terceros (por ejemplo, tal vez no deba cargar la parte inferior de esos anuncios hasta que se hayan desplazado un poco más cerca de la ventana de visualización).
+- En algunos casos, los scripts de terceros pueden adelantarse a los de origen en términos de la prioridad y el ancho de banda en el subproceso principal, lo cual también retrasa la velocidad con que una página está lista para la interacción. Intente priorizar la carga de aquello que crea proporciona primero el valor más grande a los usuarios.
+
+## Utilice un trabajador web
+
+Un subproceso principal bloqueado es una de las principales causas de que haya retrasos en la entrada. Los [trabajadores web](https://developer.mozilla.org/docs/Web/API/Worker) hacen posible ejecutar JavaScript en subprocesos en segundo plano. Mover las operaciones que no se efectúan en la interfaz del usuario hacia un subproceso del trabajo independiente, puede reducir el tiempo de bloqueo del subproceso principal y, en consecuencia, mejorar la FID.
+
+Considere usar las siguientes bibliotecas para facilitar el uso de los trabajadores web en su sitio:
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink) : una biblioteca de apoyo que abstrae `postMessage` y hace más sencillo su uso
+- [Workway](https://github.com/WebReflection/workway) : un exportador de trabajadores web de uso general
+- [Workerize](https://github.com/developit/workerize) : mueve un módulo hacia un trabajador web
+
+{% Aside %} Para obtener más información sobre cómo los trabajadores web pueden ejecutar el código desde el subproceso principal, consulte [Cómo utilizar trabajadores web para ejecutar JavaScript desde el subproceso principal del navegador](/off-main-thread/). {% endAside %}
+
+### Reduzca el tiempo de ejecución de JavaScript {: #reduce-javascript-execution}
+
+Limitar la cantidad de JavaScript que hay en su página reduce la cantidad de tiempo que el navegador necesita para ejecutar el código en JavaScript. Esto aumenta la velocidad con que el navegador comienza a responder a las interacciones del usuario.
+
+Para reducir la cantidad de JavaScript que se ejecuta en su página:
+
+- Suspenda el porcentaje de JavaScript que no esté en uso
+- Reduzca al mínimo los polyfills que no se utilicen
+
+#### Suspenda el porcentaje de JavaScript que no esté en uso
+
+De forma predeterminada, todo JavaScript bloquea el renderizado. Cuando el navegador encuentra una etiqueta del script que está vinculada con un archivo JavaScript externo, debe pausar lo que está haciendo mientras descarga, analiza, compila y ejecuta ese JavaScript. Por lo tanto, solo debe cargar el código que sea necesario para la página o responder a la entrada del usuario.
+
+La pestaña [Coverage](https://developer.chrome.com/docs/devtools/coverage/) en Chrome DevTools puede indicarle el porcentaje de JavaScript que no está en uso en su página web.
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="La pestaña Coverage", width="800", height="559" %}
+
+Para reducir el porcentaje de JavaScript que no está en uso:
+
+- Divida el código de su paquete en varios fragmentos
+- Suspenda cualquier proceso en JavaScript que no sea crítico, incluidos los scripts de terceros, mediante `async` o `defer`
+
+La **división del código** es el concepto de dividir un solo paquete grande de JavaScript en fragmentos más pequeños que se pueden cargar condicionalmente (también conocidos como carga diferida). [La mayoría de los navegadores más recientes admiten la sintaxis de importación dinámica](https://caniuse.com/#feat=es6-module-dynamic-import), en la cual se permite la búsqueda de módulos previa solicitud:
+
+```js
+import('module.js').then((module) => {
+  // Do something with the module.
+});
+```
+
+Cuando existen ciertas interacciones con el usuario (como cambiar una ruta o mostrar una modalidad), la importación dinámica de JavaScript garantizará que el código que no se utiliza para la carga inicial de la página inicial solo efectúe búsquedas si es necesario.
+
+Aparte de la compatibilidad general con el navegador, la sintaxis de la importación dinámica se puede utilizar en muchos sistemas de compilación diferentes.
+
+- Si usa [webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82) o [Parcel](https://parceljs.org/code_splitting.html)  como un paquete de módulos, aproveche su compatibilidad para la importación dinámica.
+- Las estructuras del lado del cliente, como [React](https://reactjs.org/docs/code-splitting.html#reactlazy), [Angular](https://angular.io/guide/lazy-loading-ngmodules) y [Vue,](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) proporcionan abstracciones para facilitar la carga diferida a nivel del componente.
+
+{% Aside %} Consulte el documento [Cómo reducir las cargas útiles de JavaScript con la división del código](/reduce-javascript-payloads-with-code-splitting/) para obtener más información sobre la división del código. {% endAside %}
+
+Además de la división del código, siempre use [async o defer](https://javascript.info/script-async-defer) en los scripts que no sean necesarios para la ruta crítica o el contenido en la mitad superior de la página.
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+A menos que haya una razón específica para no hacerlo, todos los scripts de terceros deben cargarse con `defer` o `async` de forma predeterminada.
+
+#### Reduzca al mínimo los polyfills que no se utilicen
+
+Si crea su código utilizando la sintaxis de JavaScript más reciente y usa como referencia a las API de los navegadores modernos, deberá transpilarlo e incluir polyfills para que funcione en los navegadores más antiguos.
+
+Una de las principales preocupaciones sobre el rendimiento al incluir polyfills y código transpilado en su sitio es que los navegadores más recientes no deberían tener que descargarlos si no es necesario hacerlo. Para reducir el tamaño de JavaScript en su aplicación, minimice tanto como sea posible los polyfills que no se utilicen y restrinja su uso a los entornos donde realmente se necesiten.
+
+Para optimizar el uso de polyfill en su sitio:
+
+- Si usa [Babel](https://babeljs.io/docs/en/index.html) como transpilador, utilice [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) para incluir únicamente los polyfills que se necesiten para los navegadores a los que se dirige. En el caso de Babel 7.9, habilite la opción [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) a fin de reducir aún más los polyfills que no sean necesarios.
+
+- Utilice el patrón module/nomodule para entregar dos paquetes separados (`@babel/preset-env` también es compatible con el patrón a través de [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules))
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    Muchas de las funciones más recientes de ECMAScript que se compilaron con Babel ya son compatibles en entornos que admiten los módulos de JavaScript. Entonces, al hacer esto, simplifica el proceso de garantizar que únicamente se utilice el código transpilado para los navegadores que realmente lo necesiten.
+
+{% Aside %} En la guía [Publicar código actualizado en navegadores modernos para que las páginas carguen más rápidamente](/serve-modern-code-to-modern-browsers/) se proporciona más información sobre este tema. {% endAside %}
+
+## Herramientas para desarrolladores
+
+Hay una gran variedad de herramientas disponibles para medir y depurar FID:
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) no incluye soporte para FID ya que es una métrica de campo. Sin embargo, el [Total Blocking Time](/tbt/) (TBT) se puede utilizar como un proxy. Las optimizaciones que mejoran el TBT también deberían mejorar la FID en el campo.
+
+{% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0.", width="800", height="309" %}
+
+- El [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) proporciona los valores FID del mundo real agrupados a nivel del origen.
+
+*Agradecemos a Philip Walton, Kayce Basques, Ilya Grigorik y Annie Sullivan por sus valiosos comentarios.*
diff --git a/src/site/content/es/blog/optimize-lcp/index.md b/src/site/content/es/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..4164a5c3226
--- /dev/null
+++ b/src/site/content/es/blog/optimize-lcp/index.md
@@ -0,0 +1,367 @@
+---
+title: Optimice Largest Contentful Paint
+subhead: Cómo renderizar su contenido principal más rápido.
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: Optimizar el banner LCP
+description: Largest Contentful Paint (LCP) se puede utilizar para determinar cuándo el contenido principal de la página se terminó de renderizar en la pantalla. Aprenda a optimizar LCP mejorando los tiempos de respuesta lentos del servidor, los tiempos de carga de recursos y renderización del lado del cliente.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='1073' %}
+
+<blockquote>
+  <p>No puedo ver ningún contenido útil. ¿Por qué tarda tanto en cargar? 😖</p>
+</blockquote>
+
+Uno de los factores que contribuyen a una mala experiencia de usuario es el tiempo que tarda el usuario en ver cualquier contenido renderizado en la pantalla. [First Contentful Paint: Primer despliegue del contenido](/fcp) (FCP) mide el tiempo que tarda en renderizarse el contenido del DOM inicial, pero no captura el tiempo que tarda en renderizarse el contenido más grande (generalmente más significativo) de la página.
+
+[Largest Contentful Paint : Despliegue del contenido más extenso](/lcp) (LCP) es una métrica de [Core Web Vitals](/vitals/) y mide cuándo se hace visible el elemento de contenido más grande en la ventana de visualización. Puede utilizarse para determinar cuándo el contenido principal de la página terminó la renderización en la pantalla.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="Los valores buenos de LCP son 2,5 segundos, los valores malos son superiores a 4,0 segundos y cualquier cosa intermedia necesita mejora", width="384", height="96" %}
+</picture>
+
+Las causas más comunes de una LCP deficiente son:
+
+- [Tiempos de respuesta lentos del servidor](#slow-servers)
+- [JavaScript y CSS bloquean la renderización](#render-blocking-resources)
+- [Tiempos de carga de recursos lentos](#slow-resource-load-times)
+- [Renderización del lado del cliente](#client-side-rendering)
+
+## Tiempos de respuesta lentos del servidor {: #slow-servers}
+
+Cuanto más tarda un navegador en recibir el contenido del servidor, más tiempo tarda en renderizar cualquier cosa en la pantalla. Un tiempo de respuesta del servidor más rápido mejora directamente cada métrica de carga de la página, incluido el LCP.
+
+Antes que nada, mejore cómo y dónde su servidor maneja su contenido. Utilice [**Time to First Byte: Tiempo hasta el primer byte**](/ttfb/) (TTFB) para medir los tiempos de respuesta de su servidor. Puede mejorar su TTFB de varias formas:
+
+- <a>Optimizar su servidor</a>
+- Enrutar a los usuarios a una CDN cercana
+- Activos del caché
+- Publicar las páginas HTML en cache-first
+- Establecer conexiones con terceros con anticipación
+- Utilizar intercambios firmados
+
+### Optimizar su servidor
+
+¿Ejecuta consultas costosas que le toman a su servidor una cantidad significativa de tiempo en completar? ¿O hay otras operaciones complejas en el lado del servidor que retrasan el proceso para devolver el contenido de la página? Analizar y mejorar la eficiencia de su código del lado del servidor mejorará directamente el tiempo que tarda el navegador en recibir los datos.
+
+En vez de publicar inmediatamente una página estática cuando el navegador la solicita, muchos frameworks web del lado del servidor necesitan crear la página web de forma dinámica. En otras palabras, en vez de enviar un archivo HTML completo que ya está listo cuando el navegador lo solicita, los frameworks necesitan ejecutar la lógica para crear la página. Esto podría deberse a los resultados pendientes de una consulta a la base de datos o incluso porque los componentes se deben generar en el marcado por un framework de interfaz de usuario (como [React](https://reactjs.org/docs/react-dom-server.html)). Muchos frameworks web que se ejecutan en el servidor tienen una guía de rendimiento que se puede utilizar para acelerar este proceso.
+
+{% Aside %} Consulte [Cómo reparar un servidor sobrecargado](/overloaded-server/), para obtener más sugerencias. {% endAside %}
+
+### Enrutar a los usuarios a una CDN cercana
+
+Una Red de distribución de contenidos (CDN) es una red de servidores que se distribuyen en diferentes ubicaciones. Si el contenido de su página web se aloja en un solo servidor, su sitio web se cargará más lentamente para los usuarios que se encuentren geográficamente más lejos, porque las solicitudes de su navegador literalmente tienen que viajar por todo el mundo. Considere la posibilidad de utilizar una CDN para garantizar que sus usuarios nunca tengan que esperar las solicitudes de red a servidores lejanos.
+
+### Activos del caché
+
+Si su HTML es estática y no necesita cambiar en cada solicitud, el almacenamiento en caché puede evitar que se vuelva a crear innecesariamente. Al almacenar una copia del HTML generado en el disco, el almacenamiento en el caché del lado del servidor puede reducir la TTFB y minimizar el uso de los recursos.
+
+Dependiendo de su cadena de herramientas, hay muchas maneras diferentes de aplicar el almacenamiento en el caché del servidor:
+
+- Configure proxies inversos ([Varnish](https://varnish-cache.org/), [nginx](https://www.nginx.com/)) para publicar contenido en el caché o actuar como un servidor del caché cuando se instala frente a un servidor de aplicaciones
+- Configure y administre el comportamiento del caché de su proveedor en la nube ([Firebase](https://firebase.google.com/docs/hosting/manage-cache), [AWS](https://aws.amazon.com/caching/), [Azure)](https://docs.microsoft.com/azure/architecture/best-practices/caching))
+- Utilice una CDN que proporcione servidores perimetrales para que su contenido se almacene en el caché y esté más cerca de sus usuarios
+
+### Publicar las páginas HTML en cache-first
+
+Cuando se instala, un [service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) se ejecuta en segundo plano del navegador y puede interceptar las solicitudes del servidor. Este nivel de control programático del caché permite almacenar en el caché parte o todo el contenido de la página HTML y solo actualizar el caché cuando el contenido cambió.
+
+En la siguiente gráfica se muestra cómo se han reducido las distribuciones de LCP en un sitio utilizando este patrón:
+
+<figure>
+  {% Img
+    src="image/admin/uB0Sm56R88MRF16voQ1k.png",
+    alt="Las distribuciones de Largest Contentful Paint antes y después de utilizar el almacenamiento en el caché de HTML",
+    width="800",
+    height="495"
+  %}
+  <figcaption>
+    La distribución Contentful Paint más grande, para cargas de páginas mediante, y sin utilizar, un service worker -
+    <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a>
+  </figcaption>
+</figure>
+
+En la gráfica se muestra la distribución de la LCP de un solo sitio durante los últimos 28 días, segmentado por el estado del service worker. Observe cómo muchas más cargas de páginas tienen un valor de LCP más rápido después de que se introdujo el servicio de páginas HTML cache-first en el service worker (parte azul de la gráfica).
+
+{% Aside %} Para obtener más información sobre las técnicas para publicar páginas HTML completas o parciales en cache-first, eche un vistazo a [Cargas útiles HTML más pequeñas con Service Workers](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/) {% endAside %}
+
+### Establecer conexiones con terceros con anticipación
+
+Las solicitudes del servidor a orígenes de terceros también pueden afectar a LCP, especialmente si son necesarias para mostrar contenido crítico en la página. Utilice `rel="preconnect"` para informar al navegador que su página tiene la intención de establecer una conexión lo antes posible.
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+También puede utilizar `dns-prefetch` para resolver las búsquedas de DNS de forma más rápida.
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+Aunque ambas sugerencias funcionan de manera diferente, considere utilizar `dns-prefetch` como alternativa para los navegadores que no admiten `preconnect`.
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %} Obtenga más información leyendo [Establecer conexiones de red con anticipación para mejorar la velocidad que se percibe en la página](/preconnect-and-dns-prefetch/) {% endAside %}
+
+### Utilizar intercambios firmados (SXG)
+
+[Los intercambios firmados (SXG)](/signed-exchanges) son un mecanismo de entrega que permite experiencias de usuario más rápidas al proporcionar contenido en un formato que se puede almacenar en el caché fácilmente. Específicamente, la [Google Search](https://developers.google.com/search/docs/advanced/experience/signed-exchange) almacenará en el caché y, a veces, buscará previamente los SXG. Para los sitios que reciben una gran parte de su tráfico de Google Search, los SXG pueden ser una herramienta importante para mejorar LCP. Para obtener más información, consulte [Intercambios firmados](/signed-exchanges).
+
+## Renderización que bloquea JavaScript y CSS {: #render-blocking-resources }
+
+Antes de que un navegador pueda renderizar cualquier contenido, necesita analizar el marcado HTML en un árbol DOM. El analizador HTML se detendrá si encuentra hojas de estilo externas (`<link rel="stylesheet">`) o etiquetas de JavaScript sincrónicas (`<script src="main.js">`).
+
+Los scripts y las hojas de estilo son recursos que bloquean la renderización y retrasan la FCP y, como consecuencia, la LCP. Retrasa cualquier JavaScript y CSS no crítico para acelerar la carga del contenido principal de su página web.
+
+### Reducir el tiempo de bloqueo de CSS
+
+Asegúrese de que solo la cantidad mínima de CSS necesaria esté bloqueando la renderización en su sitio con lo siguiente:
+
+- Minificar CSS
+- Retrasar CSS no crítico
+- CSS crítico con estilos integrados en el código
+
+### Minificar CSS
+
+Para facilitar la legibilidad, los archivos CSS pueden contener caracteres como espaciado, sangría o comentarios. Todos estos caracteres son innecesarios para el navegador, y la minificación de estos archivos garantizará que se eliminen. En última instancia, reducir la cantidad de CSS de bloqueo siempre mejorará el tiempo que se tarda en renderizar completamente el contenido principal de la página (LCP).
+
+Si utiliza un agrupador de módulos o una herramienta de compilación, incluya un complemento adecuado para minificar los archivos CSS en cada compilación:
+
+- Para webpack: [optimice-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
+- Para Gulp: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
+- Para Rollup: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+
+<figure>{% Img src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png", alt="Ejemplo de mejora de LCP: antes y después de minificar CSS", width="800", height="139" %}<figcaption> Ejemplo de mejora de LCP: antes y después de minificar CSS</figcaption></figure>
+
+{% Aside %} Para obtener más información, consulte la guía [Minify CSS](/minify-css/). {% endAside %}
+
+### Retrasar CSS no crítico
+
+Utilice la pestaña [Coverage](https://developer.chrome.com/docs/devtools/coverage/) de Chrome DevTools para encontrar cualquier CSS que no utilice en su página web.
+
+{% Img src="image/admin/wjS4NrU5EsJeCuvK0zhn.png", alt="Pestaña Coverage de Chrome DevTools", width="800", height="559" %}
+
+Para optimizar:
+
+- Elimine por completo cualquier CSS que no utilice o muévalo a otra hoja de estilo si se utiliza en una página separada de su sitio.
+
+- Para cualquier CSS que no sea necesaria para la renderización inicial, utilice [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) para cargar los archivos de forma asincrónica, lo que aprovecha `rel="preload"` y `onload`.
+
+```html
+<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
+```
+
+<figure>{% Img src="image/admin/2fcwrkXQRQrM8w1qyy3P.png", alt="Ejemplo de como mejorar LCP: antes y después de aplazar CSS no crítico", width="800", height="139" %} <figcaption> Ejemplo de como mejorar LCP: antes y después de aplazar CSS no crítico </figcaption></figure>
+
+{% Aside %} Para obtener más información, consulte la guía [Retrasar CSS no crítico](/defer-non-critical-css/). {% endAside %}
+
+### CSS crítico con estilos integrados en el código
+
+Estilos integrados en el código de cualquier CSS de ruta crítica que se utilice para el contenido de la mitad superior de la página que lo incluya directamente en el `<head>.`
+
+<figure>{% Img src="image/admin/m0n0JsLpH9JsNnXywSwz.png", alt="CSS crítico con estilos integrados en el código", width="800", height="325" %} <figcaption>CSS crítico con estilos integrados en el código</figcaption></figure>
+
+La inserción de estilos importantes elimina la necesidad de realizar una solicitud de ida y vuelta para obtener CSS crítico. Retrasar el resto minimiza el tiempo de bloqueo de CSS.
+
+Si no puede agregar manualmente estilos integrados en el código a su sitio, utilice una biblioteca para automatizar el proceso. Algunos ejemplos son:
+
+- [Critical](https://github.com/addyosmani/critical) , [CriticalCSS](https://github.com/filamentgroup/criticalCSS) y [Penthouse](https://github.com/pocketjoso/penthouse) son paquetes que extraen e incorporan estilos integrados en el código de CSS, en la parte superior de la página.
+- [Critters](https://github.com/GoogleChromeLabs/critters) es un complemento de webpack que integra estilos integrados en el código de CSS crítico y carga diferida de REST
+
+<figure>{% Img src="image/admin/L8sc51bd3ckxwnUfczC4.png", alt="Ejemplo de como mejorar LCP antes y después de incorporar estilos integrados en el código de CSS crítico", width="800", height="175" %} <figcaption> Ejemplo de como mejorar LCP antes y después de incorporar estilos integrados en el código de CSS crítico </figcaption></figure>
+
+{% Aside %} Eche un vistazo a la guía sobre [Cómo extraer CSS crítico](/extract-critical-css/) para obtener más información. {% endAside %}
+
+### Reducir el tiempo de bloqueo de JavaScript
+
+Descargue y publique la cantidad mínima de JavaScript necesaria a los usuarios. La reducción de la cantidad que JavaScript bloquea el sitio se traduce en una renderización más rápida y, en consecuencia, en una mejor LCP.
+
+Esto se puede lograr optimizando sus scripts de diferentes formas:
+
+- [Minificar y comprimir archivos JavaScript](/reduce-network-payloads-using-text-compression/)
+- [Retrasar JavaScript no utilizado](/reduce-javascript-payloads-with-code-splitting/)
+- [Minimice los polyfills no utilizados](/serve-modern-code-to-modern-browsers/)
+
+{% Aside %} La guía [Optimizar First Input Delay](/optimize-fid/) cubre todas las técnicas necesarias para reducir el tiempo de bloqueo de JavaScript con un poco más de detalle. {% endAside %}
+
+## Tiempos de carga de recursos lentos {: #slow-resource-load-times}
+
+Aunque un aumento en el tiempo de bloqueo de CSS o JavaScript se traduce directamente en un peor rendimiento, el tiempo que se tarda en cargar muchos otros tipos de recursos también puede afectar los tiempos de despliegue. Los tipos de elementos que afectan a LCP son:
+
+- `<img>` elementos
+- `<image>` elementos dentro de un elemento `<svg>`
+- `<video>` elementos (la imagen del [cartel](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster) se utilizan para medir LCP)
+- Un elemento con una imagen de segundo plano que se carga a través de la función [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (a diferencia de un <a>gradiente CSS</a>)
+- Elementos a [nivel de bloque](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements) que contienen nodos de texto u otros elementos de texto con estilos integrados en el código.
+
+El tiempo que se tarda en cargar estos elementos si se renderizan en la mitad superior de la página tendrá un efecto directo en LCP. Hay algunas formas de garantizar que estos archivos se carguen lo más rápido posible:
+
+- Optimizar y comprimir imágenes
+- Precargar recursos importantes
+- Comprimir archivos de texto
+- Entregar diferentes activos basados en la conexión de la red (servicio adaptable)
+- Almacenar activos en el caché con un service worker
+
+### Optimizar y comprimir imágenes
+
+En muchos sitios, las imágenes son el elemento más grande a la vista cuando la página terminó de cargarse. En las imágenes hero los grandes carruseles o los banners son ejemplos comunes de esto.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png", alt="", width="459", height="925" %} <figcaption>Imagen como elemento más grande de la página: <a href="https://design.google/">design.google</a></figcaption></figure>
+
+Mejorar el tiempo que se tarda en cargar y renderizar este tipo de imágenes acelerará directamente la LCP. Para hacer esto:
+
+- En primer lugar, considere la posibilidad de no utilizar una imagen. Si no es relevante para el contenido, elimínela.
+- Comprima imágenes (por ejemplo con [Imagemin](/use-imagemin-to-compress-images))
+- Convierta imágenes a formatos más nuevos (JPEG 2000, JPEG XR o WebP)
+- Utilice imágenes responsive
+- Considere utilizar una imagen CDN
+
+{% Aside %} Eche un vistazo a [Optimice sus imágenes](/fast/#optimize-your-images) para obtener guías y recursos que expliquen todas estas técnicas en detalle. {% endAside %}
+
+### Precargar recursos importantes
+
+A veces, los recursos importantes que se declaran o utilizan en un determinado archivo CSS o JavaScript pueden recuperarse más tarde de lo que le gustaría, como una fuente escondida en uno de los muchos archivos CSS de una aplicación.
+
+Si sabe que un recurso en particular debe ser prioritario, utilice `<link rel="preload">` para recuperarlo antes. [Se pueden precargar muchos tipos de recursos](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded), pero debería centrarse primero en [precargar activos críticos](/preload-critical-assets/), como fuentes, imágenes o videos en la mitad superior de la página, y CSS o JavaScript de ruta crítica.
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+Desde Chrome 73, la precarga se puede utilizar junto con [imágenes responsivas](/preload-responsive-images/) para combinar ambos patrones y conseguir una carga de imágenes mucho más rápida.
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### Comprimir archivos de texto
+
+Los algoritmos de compresión, como [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) y [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html), pueden reducir significativamente el tamaño de los archivos de texto (HTML, CSS, JavaScript) conforme se transfieren entre el servidor y el navegador. Gzip efectivamente es compatible con todos los navegadores y Brotli, que proporciona resultados de compresión aún mejores, [se puede utilizar en casi todos los navegadores más recientes](https://caniuse.com/#feat=brotli).
+
+La compresión de sus recursos minimizará su tamaño de entrega, mejorando los tiempos de carga y, en consecuencia, la LCP.
+
+1. En primer lugar, verifique si su servidor ya comprime archivos automáticamente. La mayoría de las plataformas de alojamiento, CDN y servidores proxy inversos codifican activos con compresión de forma predeterminada o le permiten configurarlos fácilmente.
+2. Si necesita modificar su servidor para comprimir los archivos, considere la posibilidad de utilizar Brotli en vez de gzip, ya que puede proporcionar mejores índices de compresión.
+3. Una vez que elija un algoritmo de compresión, comprima los activos con anticipación durante el proceso de creación en vez de hacerlo sobre la marcha, según lo solicite el navegador. Esto minimiza la sobrecarga del servidor y se evitan retrasos en las solicitudes, especialmente cuando se utilizan índices de compresión elevados.
+
+<figure>{% Img src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png", alt="Ejemplo de como mejorar LCP: antes y después de utilizar la compresión Brotli", width="800", height="139" %} <figcaption> Ejemplo de como mejorar LCP: antes y después de utilizar la compresión Brotli </figcaption></figure>
+
+{% Aside %} Para obtener más información, consulte la guía [Minificar y comprimir cargas útiles de la red](/reduce-network-payloads-using-text-compression/). {% endAside %}
+
+### Servicio adaptativo
+
+Cuando se cargan los recursos que conforman el contenido principal de una página, puede ser efectivo obtener de forma condicional diferentes activos dependiendo del dispositivo del usuario o de las condiciones de la red. Esto se puede hacer utilizando las API [Información de la red](https://wicg.github.io/netinfo/), [Memoria del dispositivo](https://www.w3.org/TR/device-memory/) y [Concurrencia del hardware](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency).
+
+Si tienes activos grandes que son críticos para la renderización inicial, puedes utilizar diferentes variaciones del mismo recurso dependiendo de la conexión o el dispositivo del usuario. Por ejemplo, puedes mostrar una imagen en vez de un video para cualquier velocidad de conexión inferior a 4G:
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // Load video
+  } else {
+    // Load image
+  }
+}
+```
+
+Una lista de propiedades útiles que puede utilizar son:
+
+- `navigator.connection.effectiveType`: tipo de conexión efectiva
+- `navigator.connection.saveData`: ahorro de datos habilitado/deshabilitado
+- `navigator.hardwareConcurrency`: recuento de núcleos del CPU
+- `navigator.deviceMemory`: memoria del dispositivo
+
+{% Aside %} Para obtener más información, consulte [Servicio adaptativo basado en la calidad de la red](/adaptive-serving-based-on-network-quality/). {% endAside %}
+
+### Almacenar activos en el caché con un service worker
+
+Los service workers se pueden utilizar para muchas tareas útiles, incluyendo publicar respuestas en HTML más pequeñas como se mencionó anteriormente en este artículo. También se pueden utilizar para almacenar en el caché cualquier recurso estático que se pueda publicar en el navegador en vez de desde la red en solicitudes repetidas.
+
+El almacenamiento previo en el caché de recursos críticos mediante un service worker puede reducir sus tiempos de carga de manera significativa, especialmente para los usuarios que recargan la página web con una conexión más débil (o incluso acceden a ella sin conexión). Las librerías como [Workbox](https://developer.chrome.com/docs/workbox/) pueden hacer que el proceso de actualización de activos almacenados previamente en el caché sea más fácil que escribir en un service worker personalizado para que lo maneje usted mismo.
+
+{% Aside %} Eche un vistazo a la [confiabilidad de la red](/reliable/) para obtener más información sobre los service workers y Workbox. {% endAside %}
+
+## Representación del lado del cliente {: #client-side-rendering}
+
+Muchos sitios utilizan la lógica de JavaScript del lado del cliente para renderizar las páginas directamente en el navegador. Los frameworks y las librerías, como [React](https://reactjs.org/), [Angular](https://angular.io/) y [Vue](https://vuejs.org/), han facilitado la creación de aplicaciones de una sola página que manejan diferentes facetas de una página web completamente en el cliente y no en el servidor.
+
+Si está creando un sitio que se renderiza principalmente en el lado del cliente, debe tener cuidado con el efecto que puede tener en LCP si se utiliza un gran paquete de JavaScript. Si no se implementan optimizaciones para evitarlo, es posible que los usuarios no vean ni interactúen con ningún contenido de la página hasta que todo el JavaScript crítico haya terminado de descargarse y ejecutarse.
+
+Al crear un sitio renderizado del lado del cliente, considere las siguientes optimizaciones:
+
+- Minimizar JavaScript crítico
+- Utilizar la renderización del lado del servidor
+- Utilizar la renderización previa
+
+### Minimizar JavaScript crítico
+
+Si el contenido de su sitio solo se vuelve visible, o se puede interactuar con él, después de que se descargue una cierta cantidad de JavaScript: es aún más importante reducir el tamaño de su paquete tanto como sea posible. Esto se puede hacer al:
+
+- Minificar JavaScript
+- Retrasar JavaScript no utilizado
+- Minimizar los polyfills no utilizados
+
+Vuelva a la sección [Reducir el tiempo de bloqueo de JavaScript](#reduce-javascript-blocking-time) para obtener más información sobre estas optimizaciones.
+
+### Utilizar la renderización del lado del servidor
+
+Minimizar la cantidad de JavaScript siempre debe ser lo primero en lo que se debe centrar para los sitios que en su mayoría se renderizan por el cliente. Sin embargo, también debería considerar la posibilidad de combinar una experiencia de renderizado en el servidor para mejorar la LCP tanto como sea posible.
+
+Este concepto funciona utilizando el servidor para renderizar la aplicación en HTML, donde el cliente luego "[hidrata](https://www.gatsbyjs.org/docs/react-hydration/)" todo el JavaScript y los datos requeridos en el mismo contenido DOM. Esto puede mejorar la LCP al garantizar que el contenido principal de la página se renderice primero en el servidor en vez de solo en el lado del cliente, pero hay algunos inconvenientes:
+
+- Mantener la misma aplicación renderizada en JavaScript en el servidor y el cliente puede aumentar la complejidad.
+- Ejecutar JavaScript para renderizar un archivo HTML en el servidor siempre aumentará los tiempos de respuesta del servidor (TTFB) en comparación con solo publicar páginas estáticas desde el servidor.
+- Puede parecer que se puede interactuar con una página renderizada por el servidor, pero no puede responder a ninguna entrada del usuario hasta que se haya ejecutado todo el JavaScript del lado del cliente. En resumen, puede hacer que el [**Time to Interactive: Tiempo de Interacción**](/tti/) (TTI) empeore.
+
+### Utilizar la renderización previa
+
+La renderización previa es una técnica independiente que es menos compleja que la renderización del lado del servidor y también proporciona una forma de mejorar LCP en su aplicación. Se utiliza un navegador sin encabezado, el cual es un navegador sin interfaz de usuario, para generar archivos HTML estáticos de cada ruta durante el tiempo de la creación. Estos archivos se pueden enviar junto con los paquetes de JavaScript necesarios para la aplicación.
+
+Con la renderización previa, la TTI sigue teniendo un impacto negativo, pero los tiempos de respuesta del servidor no se ven tan afectados como lo harían con una solución de la renderización del lado del servidor que renderiza dinámicamente cada página solo después de que se solicita.
+
+<figure>{% Img src="image/admin/sm9s16UHfh8a5MDEWjxa.png", alt="Ejemplo de como mejorar LCP: antes y después de hacer una renderización previa", width="800", height="139" %} <figcaption> Ejemplo de como mejorar LCP: antes y después de hacer una renderización previa </figcaption></figure>
+
+{% Aside %} Para profundizar en las diferentes arquitecturas de renderización de servidores, eche un vistazo a la [Renderización en la web](/rendering-on-the-web/). {% endAside %}
+
+## Herramientas para desarrolladores
+
+Hay varias herramientas disponibles para medir y depurar LCP:
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) incluye soporte para medir LCP en un entorno de laboratorio.
+
+    {% Img src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg", alt="Lighthouse 6.0", width="800", height="309" %}
+
+- La sección de **sincronizaciones** del [rendimiento](https://developer.chrome.com/docs/devtools/evaluate-performance/) en el panel en Chrome DevTools incluye un marcador de LCP y muestra qué elemento se asocia con LCP cuando se pasa sobre el campo **Nodo relacionado**.
+
+    {% Img src="image/admin/sxczQPKH0cvMBsNCx5uH.png", alt="LCP en Chrome DevTools", width="800", height="509" %}
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) proporciona valores de LCP del mundo real agregados a nivel de origen.
+
+*Agradecemos a Philip Walton, Katie Hempenius, Kayce Basques e Ilya Grigorik por sus comentarios.*
diff --git a/src/site/content/es/blog/optimize-vitals-lighthouse/index.md b/src/site/content/es/blog/optimize-vitals-lighthouse/index.md
new file mode 100644
index 00000000000..db8ebcdced9
--- /dev/null
+++ b/src/site/content/es/blog/optimize-vitals-lighthouse/index.md
@@ -0,0 +1,199 @@
+---
+layout: post
+title: Optimización de Web Vitals con Lighthouse
+subhead: Encontrar oportunidades para mejorar la experiencia del usuario con las herramientas web de Chrome.
+authors:
+  - addyosmani
+description: |2-
+
+  Hoy, cubriremos nuevas funciones de herramientas en Lighthouse, PageSpeed y DevTools para ayudar a identificar cómo tu sitio puede mejorar en Web Vitals.
+date: 2021-05-11
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/6GPqQDYxZnVq8qF6DJ02.jpeg
+alt: Un faro iluminando el mar
+tags:
+  - blog
+  # - fast
+  - performance
+  - web-vitals
+---
+
+Hoy, cubriremos nuevas funciones de herramientas en Lighthouse, PageSpeed y DevTools para ayudar a identificar cómo tu sitio puede mejorar en [Web Vitals](/vitals).
+
+Como recordatorio de las herramientas, [Lighthouse](https://github.com/GoogleChrome/lighthouse) es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Puedes encontrarla en el conjunto de herramientas de depuración de [Chrome DevTools](https://developer.chrome.com/docs/devtools/) y ejecutarla en cualquier página web, pública o que requiera autenticación. También puedes encontrar Lighthouse en [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstore.google.com), [CI](https://github.com/GoogleChrome/lighthouse-ci) y [WebPageTest](https://www.webpagetest.org/easy).
+
+Lighthouse 7.x incluye nuevas funciones, como capturas de pantalla de elementos, para facilitar la inspección visual de las partes de la interfaz de usuario que afectan las métricas de la experiencia del usuario (por ejemplo, qué nodos contribuyen al cambio de diseño).
+
+<figure><video muted autoplay loop><source type="video/mp4" src="https://storage.googleapis.com/web-dev-uploads/video/1L2RBhCLSnXjCnSlevaDjy3vba73/3G0x4Z1dmOcsusG7j1LE.mp4" width="1920" height="1080"></source></video></figure>
+
+También hemos enviado soporte para capturas de pantalla de elementos en PageSpeed Insights, lo que permite detectar más fácilmente los problemas de rendimiento de las páginas en una sola ocasión.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/mfkWFzyfO9XlJLYS80DE.png", alt="Element Screenshots highlighting the DOM node contributing to layout shift in the page", width="800", height="483" %}</figure>
+
+## Medir Core Web Vitals
+
+Lighthouse puede medir [sintéticamente](/vitals-measurement-getting-started/#measuring-web-vitals-using-lab-data) [las métricas de Core Web Vitals,](/vitals/) incluidas la [pintura con contenido más grande](/lcp/), el [cambio de diseño acumulativo](/cls/) y el [tiempo de bloqueo total](/tbt/) (un proxy de laboratorio para el [retraso de la primera entrada](/fid/)). Estas métricas reflejan la carga, la estabilidad del diseño y la preparación para la interacción. También existen otras métricas, como la [primera pintura con contenido,](/fcp/) destacada en el [futuro de Core Web Vitals (CWV).](https://developer.chrome.com/devsummit/sessions/future-of-core-web-vitals/)
+
+La sección "Métricas" del informe Lighthouse incluye versiones de laboratorio de estas métricas. Puedes usar esto como una vista resumida de los aspectos de la experiencia del usuario que requieren tu atención.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/VkLhdNb3fxtfttFZ1S6E.png", alt="Lighthouse peformance metrics", width="800", height="485" %}</figure>
+
+{% Aside %} Lighthouse se centra en medir la experiencia del usuario durante la carga inicial de la página en un entorno de laboratorio, emulando un teléfono lento o una máquina de escritorio. Si hay un comportamiento en tu página que pueda causar cambios en el diseño o largas tareas de JavaScript después de la carga de la página, las métricas del laboratorio no lo reflejarán. Prueba el panel DevTools Performance, [Search Console](https://search.google.com/search-console/about), la [extensión de Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en) o [RUM](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data) para ver las métricas después de las cargas. {% endAside %}
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/PLMoiQpi12jT7BJUvlOJ.png", alt="Web Vitals lane in the devtools performance panel", width="800", height="476" %} <figcaption> La nueva opción Web Vitals en el panel DevTools Performance muestra una pista que resalta los momentos métricos, como Layout Shift (LS) o cambio de diseño que se muestra arriba.</figcaption></figure>
+
+[Las métricas de campo](/vitals-field-measurement-best-practices/), como las que se encuentran en [Chrome UX Report](https://developer.chrome.com/docs/crux/) o [RUM](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic), no tienen esta limitación y son un complemento valioso para los datos de laboratorio, ya que reflejan la experiencia que tienen los usuarios reales. Los datos de campo no pueden ofrecer el tipo de información de diagnóstico que se obtiene en el laboratorio, por lo que ambos van de la mano.
+
+## Identificar dónde se puede mejorar en Web Vitals
+
+### Identificar el elemento de pintura con contenido más grande
+
+LCP (pintura con contenido más grande) es una medida de la experiencia de carga percibida. Marca el punto durante la carga de la página cuando el contenido principal o "más grande" se ha cargado y es visible para el usuario.
+
+Lighthouse tiene una auditoría de "Elemento de pintura con contenido más grande" que identifica qué elemento fue la pintura con contenido más grande. Al pasar el cursor sobre el elemento, se resaltará en la ventana principal del navegador.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/qeNJwYAVxysRV0okWmf4.png", alt="Largest Contentful Paint element", width="800", height="505" %}</figure>
+
+Si este elemento es una imagen, esta información es una sugerencia útil de que es posible que desees optimizar la carga de esta imagen. Lighthouse incluye una serie de auditorías de optimización de imágenes para ayudarte a comprender si tus imágenes podrían comprimirse, cambiarse de tamaño o entregarse mejor en un formato de imagen moderno más óptimo.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/8RVIyj6NiMfx7VDVbQmI.png", alt="Properly size images audit", width="800", height="468" %}</figure>
+
+También puedes encontrar útil el [LCP Bookmarklet](https://gist.github.com/anniesullie/cf2982342337fd1b2be95c2d5fe5ea06) de Annie Sullivan para identificar rápidamente el elemento LCP con un rectángulo rojo con solo un clic.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/eZJdYsdfsNniDW1KRJkE.png", alt="Highlighting the LCP element with a bookmarklet", width="800", height="509" %}</figure>
+
+### Precarga de imágenes descubiertas tardíamente para mejorar LCP
+
+Para mejorar la pintura con contenido más grande, carga [previamente](/preload-responsive-images/) tus imágenes heroicas críticas si el navegador las descubre tarde. Un descubrimiento tardío puede ocurrir si un paquete de JavaScript necesita ser cargado antes de que la imagen sea descubrible.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/K9EPBZdSFoyXVDHoDjTx.png", alt="Preload the largest contentful paint image", width="800", height="489" %}</figure>
+
+{% Aside %} La **precarga debe usarse con moderación**. El ancho de banda de la red es un recurso escaso y el uso de la precarga puede producirse a costa de otro recurso. Para utilizar la precarga de forma eficaz, asegúrate de que los recursos se ordenan correctamente para evitar el retroceso de otras métricas cuando otros recursos de la página también se consideran importantes (por ejemplo, CSS, JS, fuentes críticas). El [costo de la precarga](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/edit) cubre esto con más detalle. {% endAside %}
+
+Lighthouse 6.5 y superior sugiere ahora oportunidades para aplicar esta optimización.
+
+Hay algunas preguntas comunes que nos hacen sobre la precarga de imágenes LCP que también puede valer la pena ver brevemente.
+
+¿Se pueden precargar imágenes responsivas? [Sí](/preload-responsive-images/#imagesrcset-and-imagesizes). Digamos que tenemos una imagen heroica responsiva como se especifica usando `srcset` y `sizes` <br> como a continuación:
+
+```html
+<img src="lighthouse.jpg"
+          srcset="lighthouse_400px.jpg 400w,
+                  lighthouse_800px.jpg 800w,
+                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
+Lighthouse">
+```
+
+Gracias a los `imagesrcset` e `imagesizes` agregados al `link`, podemos precargar una imagen responsiva usando la misma lógica de selección de imágenes utilizada por `srcset` y `sizes`:
+
+```html
+<link rel="preload" as="image" href="lighthouse.jpg"
+           imagesrcset="lighthouse_400px.jpg 400w,
+                        lighthouse_800px.jpg 800w,
+                        lighthouse_1600px.jpg 1600w"
+imagesizes="50vw">
+```
+
+¿La auditoría también destacará las oportunidades de precarga si la imagen LCP se define mediante un fondo CSS? Si.
+
+Cualquier imagen marcada como imagen LCP, ya sea a través de fondo CSS o `<img>` es candidata si se descubre a una profundidad de cascada de tres o más.
+
+### Identificar las contribuciones de CLS (cambio de diseño acumulativo)
+
+El cambio de diseño acumulativo es una medida de la estabilidad visual. Cuantifica cuánto cambia visualmente el contenido de una página. Lighthouse tiene una auditoría para depurar CLS llamada "Evitar grandes cambios de diseño".
+
+Esta auditoría destaca los elementos DOM que más contribuyen a los cambios de página. En la columna Elemento de la izquierda verás la lista de estos elementos DOM y, a la derecha, su contribución global al CLS.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/X31lkLFtfjDZdO2O7ytV.png", alt="The avoid large layout shifts audit in Lighthouse highlighting relevant DOM nodes contributing to CLS", width="800", height="525" %}</figure>
+
+Gracias a la nueva función de capturas de pantalla de elementos de Lighthouse, podemos ver una vista previa de los elementos clave anotados en la auditoría, así como hacer clic para ampliar la vista:
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/L9geZVvkATRlAVcZA6dx.png", alt="Clicking on an Element screenshot will expand it", width="800", height="525" %}</figure>
+
+Para el CLS posterior a la carga, puede ser útil *visualizar de forma persistente* con rectángulos qué elementos contribuyeron más al CLS. Esta es una característica que encontrarás en herramientas de terceros como el [panel de control Core Web Vitals](https://speedcurve.com/blog/web-vitals-user-experience/) de SpeedCurve y para la que me encanta usar [Layout Shift GIF Generator de Defaced](https://defaced.dev/tools/layout-shift-gif-generator/):
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/ju6XjKBYzF6G537myjUW.gif", alt="the layout shift generator highlighting shifts", width="800", height="450" %}</figure>
+
+Para obtener una vista de todo el sitio de los problemas de cambio de diseño, aprovecho mucho [el informe Core Web Vitals de Search Console](https://support.google.com/webmasters/answer/9205520?hl=en). Esto me permite ver los tipos de páginas de mi sitio con un CLS alto (en este caso, me ayuda a identificar en qué parciales de plantilla necesito dedicar mi tiempo):
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/2Ihb2GYkbpGzYLYoZEDP.png", alt="Search Console displaying CLS issues", width="800", height="506" %}</figure>
+
+{% Aside %} Para reducir los cambios de diseño causados por las fuentes web, no pierdas de vista el nuevo descriptor [ajuste de tamaño](https://groups.google.com/a/chromium.org/g/blink-dev/c/1PVr94hZHjU/m/J0xT8-rlAQAJ) `@font-face`. Esto permite ajustar el tamaño de las fuentes alternativas para reducir CLS. {% endAside %}
+
+### Identificación de CLS a partir de imágenes sin dimensiones
+
+Para [limitar](/optimize-cls/#images-without-dimensions) el cambio de diseño acumulativo causado por imágenes sin dimensiones, incluye atributos de tamaño de ancho y alto en sus imágenes y elementos de video. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/fZRkmM18rvfy6y7LB1Qx.png", alt="Audit for image elements without explicit width and height", width="800", height="489" %}</figure>
+
+Consulta [Establecer la altura y el ancho en las imágenes es importante nuevamente](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) para obtener un buen informe sobre la importancia de pensar en las dimensiones de la imagen y la relación de aspecto.
+
+### Identificación de CLS a partir de anuncios
+
+[Publisher Ads for Lighthouse](https://developers.google.com/publisher-ads-audits) te permite encontrar oportunidades para mejorar la experiencia de carga de los anuncios en tu página, incluidas las contribuciones al cambio de diseño y las tareas largas que pueden indicar qué tan pronto los usuarios pueden utilizar tu página. En Lighthouse, puedes habilitar esto a través de Community Plugins.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/kR3jgctso6Hg0OxD8xwi.png", alt="Ads related audits highlighting opportunities to reduce time to request and layout shift", width="800", height="527" %}</figure>
+
+Recuerda que los anuncios son una de las [mayores](/optimize-cls/#ads-embeds-and-iframes-without-dimensions) contribuciones a los cambios de diseño en la web. Es importante:
+
+- Tener cuidado al colocar anuncios no adhesivos cerca de la parte superior de la ventana gráfica
+- Eliminar los cambios reservando el mayor tamaño posible para el espacio publicitario.
+
+### Evitar las animaciones no compuestas
+
+Las animaciones que no están compuestas pueden presentarse como basura en dispositivos de gama baja si las tareas pesadas de JavaScript mantienen ocupado el hilo principal. Estas animaciones pueden introducir cambios de diseño.
+
+Si Chrome descubre que una animación no se pudo componer, la informa a una traza de DevTools que Lighthouse lee, lo que le permite enumerar qué elementos con animaciones no se compusieron y por qué motivo. Puedes encontrarlos en la auditoría [Evitar animaciones no compuestas.](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/heGuYXKeMrUftMvfrDU7.png", alt="Audit for avoiding non-composited animations", width="800", height="528" %}</figure>
+
+### Depurar el retardo de la primera entrada / Tiempo total de bloqueo / Tareas largas
+
+La primera entrada mide el tiempo desde que un usuario interactúa por primera vez con una página (por ejemplo, cuando hace clic en un enlace, toca un botón o usa un control personalizado impulsado por JavaScript) hasta el momento en que el navegador puede empezar a procesar los controladores de eventos en respuesta a esa interacción. Las tareas largas de JavaScript pueden afectar a esta métrica y al proxy de esta métrica, el tiempo total de bloqueo.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/LqBCtAXdByd4fBzoNc1K.png", alt="Audit for avoiding long main thread tasks", width="800", height="485" %}</figure>
+
+Lighthouse incluye una auditoría [Evitar las tareas largas del hilo principal](/long-tasks-devtools/) que enumera las tareas más largas en el hilo principal. Esto puede ser útil para identificar los peores contribuyentes al retraso de entrada. En la columna de la izquierda podemos ver la URL de los scripts responsables de las tareas largas del hilo principal.
+
+A la derecha podemos ver la duración de estas tareas. Como recordatorio, las tareas largas son tareas que se ejecutan durante más de 50 milisegundos. Se considera que esto bloquea el hilo principal el tiempo suficiente para afectar la velocidad de fotogramas o la latencia de entrada.
+
+Si considero los servicios de terceros para el monitoreo, también me gusta bastante la [línea de tiempo de ejecución del hilo principal](https://calibreapp.com/docs/features/main-thread-execution-timeline) visual que tiene Caliber para visualizar estos costos, que destaca tanto las tareas principales como las secundarias que contribuyen a tareas largas que impactan en la interactividad.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/IGENqHBjC97pHslOQYc6.png", alt="The main-thread execution timeline visual Calibre has", width="800", height="155" %}</figure>
+
+### Bloquear solicitudes de red para ver el impacto antes / después en Lighthouse
+
+Chrome DevTools admite el [bloqueo de solicitudes de red](https://developer.chrome.com/docs/devtools/network/#block) para ver el impacto de los recursos individuales que se eliminan o no están disponibles. Esto puede ser útil para comprender el costo que tienen los scripts individuales (por ejemplo, los rastreadores o incrustaciones de terceros) en métricas como el Tiempo de bloqueo total (TBT) y el Tiempo para interactuar.
+
+El bloqueo de solicitudes de red también funciona con Lighthouse. Echemos un vistazo rápido al informe Lighthouse de un sitio. La puntuación de rendimiento es 63/100 con un TBT de 400 ms. Profundizando en el código, encontramos que este sitio carga un polyfill de Intersection Observer en Chrome que no es necesario. ¡Vamos a bloquearlo!
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/DPXEXhOZL0Czjm10lBox.png", alt="Network request blocking", width="800", height="508" %}</figure>
+
+Podemos hacer clic derecho en un script en el panel de DevTools Network y hacer clic en `Block Request URL` para bloquearlo. Aquí haremos esto para el polyfill Intersection Observer.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/iWB0jAtL0PKpwkmecOPf.png", alt="Block request URLs in DevTools", width="800", height="354" %}</figure>
+
+A continuación, podemos volver a ejecutar Lighthouse. Esta vez podemos ver que nuestra puntuación de rendimiento ha mejorado (70/100) al igual que el Tiempo de bloqueo total (400ms =&gt; 300ms).
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/LiaMMxvy4prpFBIuSgfo.png", alt="The after view of blocking costly network requests", width="800", height="508" %}</figure>
+
+### Reemplazar las costosas incrustaciones de terceros con una fachada
+
+Es común usar recursos de terceros para incrustar videos, publicaciones en redes sociales o widgets en páginas. De forma predeterminada, la mayoría de las incrustaciones se cargan con entusiasmo de inmediato y pueden tener costosas cargas útiles que impactan negativamente en la experiencia del usuario. Esto es un desperdicio si el tercero no es crítico (por ejemplo, si el usuario necesita desplazarse antes de verlo).
+
+Un patrón para mejorar el rendimiento de dichos widgets es [cargarlos de forma diferida cuando el usuario interactúa con ellos](https://addyosmani.com/blog/import-on-interaction/). Esto se puede hacer renderizando una vista previa ligera del widget (una fachada) y solo se carga la versión completa si un usuario interactúa con él. Lighthouse tiene una auditoría que recomienda recursos de terceros que pueden [cargarse de forma diferida con una fachada](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/), como incrustaciones de videos de YouTube.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/iciXy3oVlPH7VuwN7toy.png", alt="Audit highlighting that some costly third party resources can be replaced", width="800", height="483" %}</figure>
+
+Como recordatorio, Lighthouse [resaltará el código de terceros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/) que bloquea el hilo principal durante más de 250 ms. Esto puede mostrar todo tipo de scripts de terceros (incluidos los creados por Google) que puede valer la pena diferir o cargar con retraso si lo que renderizan requiere desplazarse para verlo.
+
+<figure>{% Img src="image/1L2RBhCLSnXjCnSlevaDjy3vba73/K0Oxmu1XEN2P3NQIknyH.png", alt="Reduce the cost of third-party JavaScript audit", width="800", height="556" %}</figure>
+
+### Más allá de Core Web Vitals
+
+Más allá de destacar Core Web Vitals, las versiones recientes de Lighthouse y PageSpeed Insights también intentan brindar una guía concreta que puedes seguir para mejorar la rapidez con la que se cargan las aplicaciones web con mucho JavaScript si tiene los mapas de origen activados.
+
+Estos incluyen una creciente colección de auditorías para reducir el costo de JavaScript en tu página, como la reducción de la dependencia de polyfills y duplicados que pueden no ser necesarios para la experiencia del usuario.
+
+Para obtener más información sobre las herramientas de Core Web Vitals, estate atento a la cuenta de Twitter del [equipo de Lighthouse](https://twitter.com/____lighthouse) y a las [novedades de DevTools](https://developers.google.com/web/updates/2020/05/devtools).
+
+[Imagen](https://unsplash.com/photos/7I9aCavB8RI) [heroica de Mercedes Mehling](https://unsplash.com/@mrs80z) en [Unsplash](https://unsplash.com) .
diff --git a/src/site/content/es/blog/overloaded-server/index.md b/src/site/content/es/blog/overloaded-server/index.md
new file mode 100644
index 00000000000..e07d1a65e0d
--- /dev/null
+++ b/src/site/content/es/blog/overloaded-server/index.md
@@ -0,0 +1,234 @@
+---
+title: Arreglar un servidor sobrecargado
+subhead: |2-
+
+  Cómo determinar el cuello de botella de un servidor, solucionarlo rápidamente, mejorar su rendimiento y prevenir regresiones.
+authors:
+  - katiehempenius
+date: 2020-03-31
+hero: image/admin/5fmiwGShxNngW0sOeKvf.jpg
+description: |2-
+
+  Cómo determinar el cuello de botella de un servidor, solucionarlo rápidamente, mejorar su rendimiento y prevenir regresiones.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - performance
+---
+
+## Descripción general
+
+Esta guía te muestra cómo reparar un servidor sobrecargado en 4 pasos:
+
+1. [Evaluar](#assess): Determinar el cuello de botella del servidor.
+2. [Estabilizar](#stabilize): Implementar soluciones rápidas para mitigar el impacto.
+3. [Mejorar](#improve): Aumentar y optimizar las capacidades del servidor.
+4. [Supervisar](#monitor): Utilizar herramientas automatizadas para ayudar a prevenir problemas futuros.
+
+{% Aside %}
+
+Si tienes preguntas o comentarios sobre esta guía, o si deseas compartir tus propios consejos y trucos, deja un comentario en [PR # 2479](https://github.com/GoogleChrome/web.dev/pull/2479).
+
+{% endAside %}
+
+## Evaluar
+
+Cuando el tráfico sobrecarga un servidor, uno o más de los siguientes elementos pueden convertirse en un cuello de botella: CPU, red, memoria o E/S del disco. Identificar cuál de ellos es el cuello de botella permite centrar los esfuerzos en las mitigaciones más impactantes.
+
+- CPU: El uso del CPU que es constantemente superior al 80% debe ser investigado y solucionado. El rendimiento del servidor a menudo se deteriora una vez que el uso del CPU alcanza el ~80-90%, y se vuelve más pronunciado a medida que el uso se acerca al 100%. La utilización del CPU para atender una sola solicitud es insignificante, pero hacerlo a la escala que se encuentra durante los picos de tráfico a veces puede abrumar a un servidor. La descarga de servicios a otra infraestructura, la reducción de operaciones costosas y la limitación de la cantidad de solicitudes reducirán la utilización del CPU.
+- Red: Durante los períodos de alto tráfico, el rendimiento de la red requerido para satisfacer las solicitudes de los usuarios puede exceder la capacidad. Algunos sitios, según el proveedor de hosting, también pueden alcanzar los límites de transferencia de datos acumulados. Reducir el tamaño y la cantidad de datos transferidos hacia y desde el servidor eliminará este cuello de botella.
+- Memoria: Cuando un sistema no tiene suficiente memoria, los datos tienen que ser descargados al disco para su almacenamiento. El acceso al disco es considerablemente más lento que el de la memoria, y esto puede ralentizar toda la aplicación. Si la memoria se agota por completo, pueden producirse errores de [memoria insuficiente](https://en.wikipedia.org/wiki/Out_of_memory) (en inglés "out of memory", OOM). El ajuste de la asignación de memoria, la reparación de pérdidas de memoria y la actualización de la memoria pueden eliminar este cuello de botella.
+- E/S del disco: La velocidad a la que se pueden leer o escribir datos desde el disco está limitada por el propio disco. Si la E/S del disco es un cuello de botella, aumentar la cantidad de datos almacenados en la memoria caché puede aliviar este problema (a costa de una mayor utilización de la memoria). Si esto no funciona, puede que sea necesario actualizar tus discos.
+
+Las técnicas de esta guía se centran en abordar los cuellos de botella del CPU y la red. Para la mayoría de los sitios, el CPU y la red serán los cuellos de botella más relevantes durante un pico de tráfico.
+
+Ejecutar el [`top`](https://linux.die.net/man/1/top) del servidor afectado es un buen punto de partida para investigar los cuellos de botella. Si está disponible, complementa esto con los datos históricos de su proveedor de hosting o herramientas de monitoreo.
+
+## Estabilizar
+
+Un servidor sobrecargado puede provocar rápidamente [fallas en cascada](https://en.wikipedia.org/wiki/Cascading_failure) en otras partes del sistema. Por lo tanto, es importante estabilizar el servidor antes de intentar realizar cambios más significativos.
+
+### Limitación de velocidad
+
+La limitación de la velocidad protege la infraestructura al limitar la cantidad de solicitudes entrantes. Esto es cada vez más importante a medida que se deteriora el rendimiento del servidor: a medida que aumentan los tiempos de respuesta, los usuarios tienden a actualizar activamente la página, lo que aumenta aún más la carga del servidor.
+
+#### Reparar
+
+Aunque rechazar una solicitud es relativamente económico, la mejor manera de proteger tu servidor es gestionar la limitación de la velocidad en algún punto anterior al mismo, por ejemplo, a través de un equilibrador de carga, un proxy inverso o una CDN.
+
+Instrucciones:
+
+- [NGINX](https://www.nginx.com/blog/rate-limiting-nginx/)
+- [HAProxy](https://www.haproxy.com/blog/four-examples-of-haproxy-rate-limiting/)
+- [Microsoft IIS](https://docs.microsoft.com/iis/configuration/system.applicationhost/sites/site/limits)
+
+Otras lecturas:
+
+- [Estrategias y técnicas de limitación de velocidad](https://cloud.google.com/solutions/rate-limiting-strategies-techniques)
+
+### Almacenamiento en caché HTTP
+
+Busca formas de almacenar contenidos en caché de forma más activa. Si un recurso puede servirse desde un caché HTTP (ya sea el caché del navegador o una CDN), no es necesario solicitarlo al servidor de origen, lo que reduce la carga del servidor.
+
+Los encabezados HTTP como [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires) y [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) indican cómo un recurso debe almacenarse en caché mediante un caché HTTP. Auditar y corregir estos encabezados mejorará el almacenamiento en caché.
+
+Aunque [los trabajadores de servicio](https://developer.chrome.com/docs/workbox/service-worker-overview/) también se pueden utilizar para el almacenamiento en caché, utilizan un [caché](https://developer.mozilla.org/docs/Web/API/Cache) separado y son un complemento, en lugar de un reemplazo, para un adecuado almacenamiento en caché HTTP. Por esta razón, cuando se maneja un servidor sobrecargado, los esfuerzos deben centrarse en optimizar el almacenamiento en caché HTTP.
+
+#### Diagnosticar
+
+Ejecuta [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) y observa los [activos estáticos de servicio con una auditoría de política de caché eficiente](https://developers.google.com/web/tools/lighthouse/audits/cache-policy) para ver una lista de recursos con un [tiempo de vida](https://en.wikipedia.org/wiki/Time_to_live) corto o medio (TTL). Para cada recurso enumerado, considera si se debe aumentar el TTL. A título orientativo:
+
+- Los recursos estáticos deben almacenarse en caché con un TTL largo (1 año).
+- Los recursos dinámicos deben almacenarse en caché con un TTL breve (3 horas).
+
+#### Reparar
+
+Establece la directiva `max-age` del encabezado [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) en el número apropiado de segundos.
+
+Instrucciones:
+
+- [NGINX](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [apache](http://httpd.apache.org/docs/current/mod/mod_expires.html)
+- [Microsoft](https://docs.microsoft.com/iis/configuration/system.webserver/staticcontent/clientcache)
+
+Nota: `max-age` es solo una de las muchas directivas de almacenamiento en caché. Hay muchas otras directivas y encabezados que afectarán el comportamiento de almacenamiento en caché de tu aplicación. Para obtener una explicación más detallada de la estrategia de almacenamiento en caché, se recomienda encarecidamente que leas [Almacenamiento en caché HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching).
+
+### Deterioro gradual
+
+El deterioro gradual es la estrategia de reducir temporalmente la funcionalidad para eliminar el exceso de carga de un sistema. Este concepto se puede aplicar de muchas formas diferentes: por ejemplo, ofreciendo una página de texto estático en lugar de una aplicación con todas las funciones, deshabilitando la búsqueda o devolviendo menos resultados de búsqueda, también deshabilitando ciertas funciones costosas o no esenciales. Se debe hacer hincapié en suprimir las funcionalidades que pueden eliminarse de forma segura y sencilla con un impacto comercial mínimo.
+
+## Mejorar
+
+### Utilizar una red de distribución de contenidos (CDN)
+
+El servicio de activos estáticos se puede descargar desde tu servidor a una red de distribución de contenidos (CDN), reduciendo así la carga.
+
+La función principal de una CDN es entregar los contenidos a los usuarios con rapidez, proporcionando una amplia red de servidores que se encuentran cerca de los usuarios. Sin embargo, la mayoría de las CDN también ofrecen funciones adicionales relacionadas con el rendimiento, la compresión, el equilibrio de carga y la optimización de medios.
+
+#### Configurar una CDN
+
+Las CDN se benefician de la escala, por lo que operar tu propia CDN rara vez tiene sentido. Una configuración básica de CDN es bastante rápida de configurar (~ 30 minutos) y consiste en actualizar los registros DNS para apuntar a la CDN.
+
+#### Optimizar el uso de la CDN
+
+#### Diagnosticar
+
+Identifica los recursos que no se sirven desde una CDN (pero que deberían servirse) ejecutando [WebPageTest](https://webpagetest.org/). En la página de resultados, haz clic en el recuadro situado encima de "Uso efectivo de la CDN" para ver la lista de recursos que deberían servirse desde una CDN.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/awCu4XpFI9IQ1bfhIaWJ.jpg", alt="Arrow pointing to the 'Effective use of CDN' button", width="300", height="109" %} <figcaption> Resultados de WebPageTest</figcaption></figure>
+
+#### Reparar
+
+Si un recurso no está siendo almacenado en caché por la CDN, comprueba que se cumplan las siguientes condiciones:
+
+- Tiene un encabezado [`Cache-Control: public`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Cacheability)
+- Tiene un encabezado [`Cache-Control: s-maxage`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration), [`Cache-Control: max-age`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration) o [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires).
+- Tiene un [`Content-Length`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Length), [`Content-Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Range) o[`Transfer-Encoding header`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Transfer-Encoding).
+
+### Ampliar los recursos informáticos
+
+La decisión de ampliar los recursos informáticos debe tomarse con cuidado. Aunque a menudo es necesario, hacerlo prematuramente puede generar una complejidad importante y costos financieros innecesarios.
+
+#### Diagnosticar
+
+Un [tiempo elevado hasta el primer byte](/ttfb/) (TTFB, sus siglas en inglés) puede ser una señal de que un servidor se está acercando a su capacidad. Puede encontrar esta información en la auditoría [Reducir los tiempos de respuesta del servidor (TTFB)](https://developers.google.com/web/tools/lighthouse/audits/ttfb) de Lighthouse.
+
+Para investigar más a fondo, utiliza una herramienta de monitorización para evaluar el uso de la CPU. Si el uso actual o previsto de la CPU supera el 80%, deberías considerar la posibilidad de aumentar tus servidores.
+
+#### Reparar
+
+Agregar un equilibrador de carga permite distribuir el tráfico entre varios servidores. Un equilibrador de carga se encuentra frente a un grupo de servidores y enruta el tráfico al servidor adecuado. Los proveedores de la nube ofrecen sus propios equilibradores de carga ([GCP](https://cloud.google.com/load-balancing), [AWS](https://aws.amazon.com/elasticloadbalancing/), [Azure](https://docs.microsoft.com/azure/load-balancer/load-balancer-overview)) o puedes configurar los tuyos propios utilizando [HAProxy](https://www.digitalocean.com/community/tutorials/an-introduction-to-haproxy-and-load-balancing-concepts) o [NGINX](http://nginx.org/en/docs/http/load_balancing.html). Una vez que se haya implementado un equilibrador de carga, se pueden agregar servidores adicionales.
+
+Además del equilibrio de carga, la mayoría de los proveedores de la nube ofrecen un ajuste de escala automático ([GCP](https://cloud.google.com/compute/docs/load-balancing-and-autoscaling), [AWS](https://docs.aws.amazon.com/ec2/index.html), [Azure](https://docs.microsoft.com/azure/azure-monitor/platform/autoscale-overview)). El ajuste de escala automático funciona junto con el equilibrio de carga: el ajuste de escala automático aumenta y disminuye automáticamente los recursos informáticos en función de la demanda en un momento dado. Este proceso no es mágico: requiere una configuración significativa y se necesita tiempo para que las nuevas instancias se conecten. Debido a la complejidad adicional que conlleva el ajuste de escala automático, primero se debe considerar una configuración más simple basada en el balanceador de carga.
+
+### Habilitar la compresión
+
+Los recursos basados en texto deben comprimirse mediante gzip o brotli. Gzip puede reducir el tamaño de transferencia de estos recursos en aproximadamente un 70%.
+
+#### Diagnosticar
+
+Utiliza la auditoría  [habilitar compresión de texto](https://developers.google.com/web/tools/lighthouse/audits/text-compression) de Lighthouse para identificar los recursos que deben comprimirse.
+
+#### Reparar
+
+Habilita la compresión actualizando la configuración de tu servidor. Instrucciones:
+
+- [NGINX](http://nginx.org/en/docs/http/ngx_http_gzip_module.html)
+- [apache](https://httpd.apache.org/docs/trunk/mod/mod_deflate.html)
+- [Microsoft](https://docs.microsoft.com/iis/extensions/iis-compression/iis-compression-overview)
+
+### Optimizar imágenes y medios
+
+[Las imágenes constituyen la mayor parte del tamaño de los archivos de la mayoría de los sitios web](https://images.guide/#introduction); la optimización de imágenes puede reducir rápida y significativamente el tamaño de un sitio.
+
+#### Diagnosticar
+
+Lighthouse tiene una variedad de auditorías que marcan las posibles optimizaciones de las imágenes. Otra estrategia consiste en utilizar DevTools para identificar los archivos de imágenes más grandes: estas imágenes serán probablemente buenas candidatas para la optimización.
+
+Auditorías relevantes de Lighthouse:
+
+- [Dimensionar correctamente las imágenes](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)
+- [Aplazar las imágenes fuera de la pantalla](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images)
+- [Codificación eficiente de imágenes](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+- [Servir imágenes en formatos de última generación](https://developers.google.com/web/tools/lighthouse/audits/webp)
+- [Utilizar formatos de video para contenidos animados](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/)
+
+Flujo de trabajo de Chrome DevTools:
+
+- [Registrar la actividad de la red](https://developer.chrome.com/docs/devtools/network/#load)
+- Haz clic en **Img** para [filtrar los recursos que no son imágenes](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-type)
+- Haz clic en la columna **Tamaño** para ordenar los archivos de imágenes por tamaño
+
+#### Reparar
+
+*Si tienes tiempo limitado…*
+
+Concentra tu tiempo en identificar imágenes grandes y cargadas con frecuencia y optimizarlas manualmente con una herramienta como [Squoosh](https://squoosh.app/). Las imágenes heroicas suelen ser buenas candidatas para la optimización.
+
+Aspectos a tener en cuenta:
+
+- Tamaño: Las imágenes no deben ser más grandes de lo necesario.
+- Compresión: En términos generales, un nivel de calidad de 80-85 tendrá un efecto mínimo en la calidad de la imagen al tiempo que producirá una reducción del 30-40% en el tamaño del archivo.
+- Formato: Utiliza archivos JPEG para fotos en lugar de PNG; usa MP4 para [contenido animado](/replace-gifs-with-videos/) en lugar de GIF.
+
+*Si tienes más tiempo…*
+
+Considera la posibilidad de configurar una CDN de imágenes si las imágenes constituyen una parte sustancial de tu sitio. Las CDN de imágenes están diseñadas para servir y optimizar imágenes y descargarán el servicio de imágenes desde el servidor de origen. La configuración de una CDN de imagen es sencilla, pero requiere actualizar las URL de imágenes existentes para que apunten a la CDN de la imagen.
+
+Otras lecturas:
+
+- [Utiliza CDN de imágenes para optimizarlas](/image-cdns/#optimize-your-images)
+- [images.guide](https://images.guide/)
+
+### Minificar JS y CSS
+
+La minificación elimina los caracteres innecesarios de JavaScript y CSS.
+
+#### Diagnosticar
+
+Utiliza las auditorías [Minificar CSS](https://developers.google.com/web/tools/lighthouse/audits/minify-css) y [Minificar JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/) de Lighthouse para identificar los recursos que necesitan minificación.
+
+#### Reparar
+
+Si tienes poco tiempo, concéntrate en minificar tu JavaScript. La mayoría de los sitios tienen más JavaScript que CSS, por lo que esto tendrá más impacto.
+
+- [Minificar JavaScript](/reduce-network-payloads-using-text-compression/)
+- [Minificar CSS](/minify-css/)
+
+## Monitorizar
+
+Las herramientas de monitorización del servidor proporcionan recopilación de datos, cuadros de mando y alertas sobre su rendimiento. Su uso puede ayudar a prevenir y mitigar problemas futuros de rendimiento del servidor.
+
+La configuración del monitoreo debe ser lo más sencilla posible. La recopilación excesiva de datos y alertas tiene sus costos: cuanto mayor sea el alcance o la frecuencia de la recopilación de datos, más costosa será su recogida y almacenamiento; el exceso de alertas conduce inevitablemente a páginas ignoradas.
+
+Las alertas deben usar métricas que detecten problemas de manera consistente y precisa. El tiempo de respuesta del servidor (latencia) es una métrica que funciona particularmente bien para esto: detecta una amplia variedad de problemas y se correlaciona directamente con la experiencia del usuario. Las alertas basadas en métricas de nivel inferior, como el uso de la CPU, pueden ser un complemento útil, pero detectarán un subconjunto más pequeño de problemas. Además, las alertas deben basarse en el rendimiento observado en la cola (en otras palabras, los percentiles 95 o 99), en lugar de promedios. De lo contrario, los promedios pueden ocultar fácilmente problemas que no afectan a todos los usuarios.
+
+### Reparar
+
+Todos los principales proveedores de nube ofrecen sus propias herramientas de monitoreo ([GCP](https://codelabs.developers.google.com/codelabs/cloud-monitoring-alerting/index.html?index=..%2F..index), [AWS](https://docs.aws.amazon.com/AWSEC2/latest/WindowsGuide/monitoring-system-instance-status-check.html), [Azure](https://docs.microsoft.com/azure/azure-monitor/)). Además, [Netdata](https://github.com/topics/monitoring) es una excelente alternativa gratuita y de código abierto. Independientemente de la herramienta que elijas, deberás instalar el agente de monitoreo de la herramienta en cada servidor que desees supervisar. Una vez completado, asegúrate de configurar las alertas.
+
+Instrucciones:
+
+- [GCP](https://cloud.google.com/monitoring/alerts)
+- [AWS](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/monitoring-system-instance-status-check.html)
+- [Azur](https://docs.microsoft.com/azure/azure-monitor/app/alerts)
+- [Netdata](https://docs.netdata.cloud/health/)
diff --git a/src/site/content/es/blog/payment-and-address-form-best-practices/index.md b/src/site/content/es/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..775ffebcee2
--- /dev/null
+++ b/src/site/content/es/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,503 @@
+---
+title: Mejores prácticas de formulario de pago y dirección
+subhead: Maximice las conversiones ayudando a sus usuarios a llenar los formularios de dirección y pago de la manera más rápida y sencilla posible.
+authors:
+  - samdutton
+scheduled: verdadero
+date: 2020-12-09
+updated: 2021-11-30
+description: Maximice las conversiones ayudando a sus usuarios a llenar los formularios de dirección y pago de la manera más rápida y sencilla posible.
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: Hombre de negocios usando una tarjeta de pago para hacer un pago en una computadora portátil.
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - laboratorio-de-código-mejores-prácticas-formulario-pago
+  - laboratorio-de-código-mejores-prácticas-formulario-dirección
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+Los formularios bien diseñados ayudan a los usuarios y aumentan las tasas de conversión. ¡Una pequeña mejora puede marcar una gran diferencia!
+
+{% Aside 'codelab' %} Si prefiere aprender estas prácticas recomendadas con un tutorial práctico, consulte los dos laboratorios de código para esta publicación:
+
+- [Laboratorio de código de mejores prácticas de formulario de pago](/codelab-payment-form-best-practices)
+- [Laboratorio de código de prácticas recomendadas del formulario de direcciones](/codelab-address-form-best-practices) {% endAside %}
+
+A continuación, se muestra un ejemplo de un formulario de pago simple que muestra todas las mejores prácticas:
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+A continuación, se muestra un ejemplo de un formulario de dirección simple que demuestra todas las mejores prácticas:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## Lista de verificación
+
+- [Utilice elementos HTML significativos](#meaningful-html) : `<form>` , `<input>` , `<label>` y `<button>` .
+- [Etiquete cada campo de formulario con una `<label>`](#html-label) .
+- Utilice los atributos de los elementos HTML para [acceder a las funciones integradas del navegador](#html-attributes) , en particular, [`type`](#type-attribute) y [`autocomplete`](#autocomplete-attribute) con los valores adecuados.
+- Evite usar `type="number"` para números que no necesiten incrementarse, como los números de tarjetas de pago. Utilice `type="text"` y [`inputmode="numeric"`](#inputmode-attribute) en su lugar.
+- Si un [valor de autocompletar apropiado](#autocomplete-attribute) está disponible para una `input` , `select` o `textarea`, debe usarlo.
+- Para ayudar a los navegadores a completar automáticamente los formularios, asigne [valores estables](#stable-name-id) a los atributos   de entrada `name` e `id` que no cambien entre cargas de página o implementaciones de sitios web.
+- [Deshabilite los botones de envío](#disable-submit) una vez que los haya tocado o hecho clic.
+- [Valide los](#validate) datos durante el ingreso, no solo al enviar el formulario.
+- Haga que la opción [pagar como invitado](#guest-checkout) sea la predeterminada y simplifique la creación de la cuenta una vez que se complete el pago.
+- Muestre el [progreso a través del proceso de pago](#checkout-progress) en pasos claros con claras llamadas a la acción.
+- [Limite los posibles puntos de salida del proceso de pago](#reduce-checkout-exits) eliminando el desorden y las distracciones.
+- [Muestre los detalles completos del pedido](#checkout-details) al finalizar la compra y haga fácil hacer ajustes al pedido.
+- [No pida datos que no necesite](#unneeded-data) .
+- [Pida nombres con un solo campo de entrada](#single-name-input) a menos que tenga una buena razón para no hacerlo.
+- [No exija caracteres exclusivamente latinos](#unicode-matching) para los nombres y los nombres de usuario.
+- [Permita una variedad de formatos de dirección](#address-variety) .
+- Considere usar un [solo campo `textarea` para la dirección](#address-textarea) .
+- Utilice la función de [autocompletar para la dirección de facturación](#billing-address) .
+- [Internacionalice y localice](#internationalization-localization) cuando sea necesario.
+- Considere evitar [la búsqueda de direcciones de códigos postales](#postal-code-address-lookup) .
+- Utilice [los valores de autocompletado de tarjetas de pago adecuados](#payment-form-autocomplete) .
+- Utilice un [único campo de entrada para los números de tarjetas de pago](#single-number-input) .
+- [Evite el uso de elementos personalizados](#avoid-custom-elements) si rompen la experiencia de autocompletar.
+- [Haga pruebas tanto en vivo como en el laboratorio](#analytics-rum): análisis de páginas, análisis de interacciones y medición del rendimiento del usuario real.
+- [Pruebe en una variedad de navegadores, dispositivos y plataformas](#test-platforms) .
+
+{% Aside %} Este artículo trata sobre las mejores prácticas de frontend para formularios de dirección y pago. No explica cómo implementar transacciones en su sitio. Para obtener más información sobre cómo agregar funciones de pago a su sitio web, consulte [Pagos web](/payments). {% endAside %}
+
+## Utilice HTML significativo {: #meaningful-html}
+
+Utilice los elementos y atributos creados específicamente para cada caso:
+
+- `<form>`, `<input>`, `<label>` y `<button>`
+- `type`, `autocomplete` e `inputmode`
+
+Estos habilitan las funcionalidades incorporadas del navegador, mejoran la accesibilidad y agregan significado a su código.
+
+### Utilice los elementos HTML adecuadamente {: #html-elements}
+
+#### Ponga su formulario en un &lt;form&gt; {: #html-form}
+
+Es posible que tenga la tentación de no molestarse en envolver sus `<input>` en un `<form>` y de manejar el envío de datos únicamente con JavaScript.
+
+¡No lo hagas!
+
+Un `<form>` HTML le brinda acceso a un poderoso conjunto de funciones integradas en todos los navegadores modernos y puede ayudar a que su sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia. Un `<form>` también simplifica la creación de funciones básicas para navegadores más antiguos con soporte de JavaScript limitado y para habilitar el envío de formularios incluso si hay un problema con su código, y para la pequeña cantidad de usuarios que sí deshabilitan JavaScript.
+
+Si tiene más de un componente de página para la entrada del usuario, asegúrese de poner cada uno en su propio elemento `<form>` Por ejemplo, si tiene la búsqueda y el registro en la misma página, coloque cada uno en su propio `<form>` .
+
+#### Use `<label>` para etiquetar elementos {: #html-label}
+
+Para etiquetar una `<input>`, `<select>` o `<textarea>`, use una [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+
+Asocie una etiqueta con una entrada dando al atributo `for` de la etiqueta el mismo valor que el `id` de la entrada.
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+Use una sola etiqueta para una sola entrada: no intente etiquetar varias entradas con una sola etiqueta. Los navegadores y lectores de pantalla trabajan mejor así. Un toque o clic en una etiqueta mueve el enfoque a la entrada con la que está asociada, y los lectores de pantalla anuncian el texto de la *etiqueta* cuando reciben el foco la etiqueta o la *entrada* de la etiqueta.
+
+{% Aside 'caution' %} No utilice [marcadores](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) de posición por sí solos en lugar de etiquetas. Una vez que comienza a ingresar texto en una entrada, el marcador de posición se oculta, por lo que puede ser fácil olvidar para qué sirve la entrada. Lo mismo ocurre si usa el marcador de posición para mostrar el formato correcto para valores como fechas. Esto puede ser especialmente problemático para los usuarios de teléfonos, especialmente si están distraídos o estresados. {% endAside %}
+
+#### Haga que los botones sean útiles {: #html-button}
+
+Utilice [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) para los botones. También puede usar `<input type="submit">`, pero no use un `div` o algún otro elemento aleatorio para actuar como botón. Los elementos de botón brindan un comportamiento accesible, funcionalidad de envío de formularios incorporada y se pueden diseñar fácilmente.
+
+Asigne a cada botón de envío de formulario un valor que indique lo que hace. Para cada paso hacia el pago, use una llamada a la acción descriptiva que muestre el progreso y haga que el siguiente paso sea obvio. Por ejemplo, etiquete el botón Enviar en el formulario de dirección de entrega **Continuar con el pago en** lugar de **Continuar** o **Guardar** .
+
+{: #disable-submit}
+
+Considere deshabilitar un botón de envío una vez que el usuario lo haya tocado o hecho clic, especialmente cuando el usuario está realizando un pago o un pedido. Muchos usuarios hacen clic en los botones repetidamente, incluso si funcionan bien. Eso puede estropear el pago y aumentar la carga del servidor.
+
+Por otro lado, no desactive un botón de envío esperando una entrada completa y válida del usuario. Por ejemplo, no deje un botón **Guardar dirección** deshabilitado porque falta algun dato o no es válida. Eso no ayuda al usuario; quizá siga tocando o haciendo clic en el botón y asuma que no funciona. En cambio, si los usuarios intentan enviar un formulario con datos no válidos, explíqueles qué salió mal y qué hacer para solucionarlo. Esto es particularmente importante en dispositivos móviles, donde la entrada de datos es más difícil y es posible que los datos del formulario faltantes o no válidos no sean visibles en la pantalla del usuario en el momento en que intenta enviarlo.
+
+{% Aside 'caution' %} El tipo predeterminado para un botón en un formulario es `submit`. Si desea agregar otro botón en un formulario (para **Mostrar contraseña**, por ejemplo) agregue `type="button"`. De lo contrario, al hacer clic o tocar el botón, se enviará el formulario.
+
+Al presionar `Enter` mientras cualquier campo del formulario tiene el foco, se simula un clic en el primer `submit` del formulario. Si incluye un botón en su formulario antes del botón **Enviar** y no especifica el tipo, ese botón tendrá el tipo predeterminado para los botones en un formulario (`submit`) y recibirá el evento de clic antes de enviar el formulario. Para ver un ejemplo de esto, vea nuestra [demostración](https://enter-button.glitch.me/): complete el formulario, luego presione `Enter`. {% endAside %}
+
+### Aproveche al máximo los atributos HTML {: #html-attribute}
+
+#### Facilite a los usuarios el ingreso de datos
+
+{: #type-attribute}
+
+Utilice el [atributo](https://developer.mozilla.org/docs/Web/HTML/Element/input/email) `type` apropiado de la entrada para proporcionar el teclado correcto en el dispositivo móvil y habilitar la validación básica incorporada por parte del navegador.
+
+Por ejemplo, use `type="email"` para direcciones de correo electrónico y `type="tel"` para números de teléfono.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="Dos capturas de pantalla de teléfonos Android, que muestran un teclado apropiado para ingresar una dirección de correo electrónico (usando type = email) y para ingresar un número de teléfono (con type = tel ). ", width="800", height="683" %}<figcaption> Teclados apropiados para correo electrónico y teléfono.</figcaption></figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %} El uso de type="number" agrega una flecha hacia arriba/hacia abajo para incrementar los números, lo que no tiene sentido para datos como el teléfono, la tarjeta de pago o los números de cuenta.
+
+Para números como estos, establezca `type="text"` (u omita el atributo, ya que el predeterminado es `text`). Para números de teléfono, use `type="tel"` para obtener el teclado apropiado en el móvil. Para otros números, use `inputmode="numeric"` para obtener un teclado numérico en el móvil.
+
+Algunos sitios todavía usan `type="tel"` para los números de tarjetas de pago para garantizar que los usuarios de dispositivos móviles obtengan el teclado correcto. Sin embargo, `inputmode` es [ampliamente compatible ahora](https://caniuse.com/input-inputmode), por lo que no debería tener que hacerlo, pero verifique  las especificaciones de los navegadores de sus usuarios. {% endAside %}
+
+{: #avoid-custom-elements}
+
+Para las fechas, intente evitar el uso de elementos `select` personalizados. Interfieren con la experiencia de autocompletar si no se implementan correctamente y no funcionan en navegadores más antiguos. Para números como el año de nacimiento, considere usar un elemento `input` en lugar de un `select`, ya que ingresar dígitos manualmente puede ser más fácil y menos propenso a errores que seleccionar de una lista desplegable larga, especialmente en dispositivos móviles. Utilice `inputmode="numeric"` para asegurarse de que el teclado del dispositivo móvil sea el correcto y agregue sugerencias de validación y formato con texto o un marcador de posición para asegurarse de que el usuario ingrese los datos en el formato adecuado.
+
+{% Aside %} El elemento [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) permite al usuario seleccionar entre una lista de opciones disponibles y proporciona sugerencias de coincidencias según el usuario introduce texto. Pruebe `datalist` para entradas de `text`, `range` y `color` en [simpl.info/datalist](https://simpl.info/datalist). Para el ingreso del año de nacimiento, puede comparar un `select` con un `input` y un `datalist` en [datalist-select.glitch.me](https://datalist-select.glitch.me). {% endAside %}
+
+#### Utilice la función de autocompletar para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos {: #autocomplete-attribute}
+
+El uso apropiado de `autocomplete` permite a los navegadores ayudar a los usuarios almacenando datos de forma segura y autocompletando valores de `input` , `select` y `textarea` Esto es particularmente importante en dispositivos móviles y crucial para evitar [altas tasas de abandono de formularios](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data) . Autocompletar también ofrece [múltiples beneficios de accesibilidad](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) .
+
+Si un valor de autocompletar apropiado está disponible para un campo de formulario, debe usarlo. [Los documentos web de MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) tienen una lista completa de valores y explicaciones sobre cómo usarlos correctamente.
+
+{: #stable-name-id
+
+{% Aside %} Además de usar los valores de autocompletar apropiados, ayude a los navegadores a autocompletar formularios dando [valores estables](#stable-name-id) que no cambien entre cargas de página o implementaciones de sitios web a los atributos `name` e `id` de los campos de formulario. {% endAside %}
+
+{: #billing-address}
+
+De forma predeterminada, configure la dirección de facturación para que sea la misma que la dirección de entrega. Reduzca el desorden visual proporcionando un enlace para editar la dirección de facturación (o utilice [elementos de `summary` y `details`](https://simpl.info/details/) ) en lugar de mostrar la dirección de facturación en un formulario.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="Ejemplo de página de pago que muestra el enlace para cambiar la dirección de facturación.", width="800", height="250" %}<figcaption> Agregue un enlace para revisar la facturación.</figcaption></figure>
+
+Use los valores de autocompletar apropiados para la dirección de facturación, tal como lo hace para la dirección de envío, para que el usuario no tenga que ingresar datos más de una vez. Agregue una palabra de prefijo para autocompletar atributos si tiene diferentes valores para entradas con el mismo nombre en diferentes secciones.
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### Ayude a los usuarios a ingresar los datos correctos {: #validation}
+
+Trate de evitar "regañar" a los clientes porque "hicieron algo mal". En su lugar, ayude a los usuarios a completar formularios de manera más rápida y sencilla ayudándolos a solucionar los problemas a medida que ocurren. A través del proceso de pago, los clientes intentan darle dinero a su empresa por un producto o servicio; ¡su trabajo es ayudarlos, no castigarlos!
+
+Puede agregar [atributos de restricción](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints) a los elementos de formulario para especificar valores aceptables, incluidos `min`, `max` y `pattern`. El [estado](https://developer.mozilla.org/docs/Web/API/ValidityState) de validez del elemento se establece automáticamente dependiendo de si el valor del elemento es válido, al igual que las pseudo clases CSS `:valid` y `:invalid` que se pueden usar para dar estilo a elementos con valores válidos o no válidos.
+
+Por ejemplo, el siguiente código HTML especifica el ingreso de un año de nacimiento entre 1900 y 2020. El uso de `type="number"` restringe los valores de entrada solo a números, dentro del rango especificado por `min` y `max`. Si intenta ingresar un número fuera del rango, la entrada se configurará como un estado no válido.
+
+{% Glitch { id: 'constraints', path: 'index.html', height: 170 } %}
+
+El siguiente ejemplo usa `pattern="[\d ]{10,30}"` para garantizar un número de tarjeta de pago válido, al la vez que permite espacios:
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+Los navegadores modernos también realizan una validación básica para las entradas con el tipo `email` o `url` .
+
+{% Glitch { id: 'type-validation', path: 'index.html', height: 250 } %}
+
+{% Aside %} Agregue el atributo `multiple` a una entrada con `type="email"` para habilitar la validación incorporada para múltiples direcciones de correo electrónico separadas por comas en una sola entrada. {% endAside %}
+
+Al enviar el formulario, los navegadores establecen automáticamente el foco en los campos con valores obligatorios problemáticos o faltantes. ¡No se requiere JavaScript!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="Captura de pantalla de un formulario de inicio de sesión en Chrome en computadora de escritorio que muestra el indicador del navegador y el foco para un valor de correo electrónico no válido.", width="500", height="483" %}<figcaption> Validación básica incorporada por el navegador.</figcaption></figure>
+
+Valide en línea y dele retroalimentación al usuario a medida que ingresa los datos, en lugar de mandar una lista de errores cuando haga clic en el botón Enviar. Si necesita validar los datos en su servidor después del envío del formulario, enumere todos los problemas que se encuentren y resalte claramente todos los campos del formulario con valores no válidos, además de mostrar un mensaje en línea junto a cada campo problemático que explique lo que debe solucionarse. Verifique los registros del servidor y los datos analíticos para detectar errores comunes; es posible que deba rediseñar su formulario.
+
+También debe usar JavaScript para realizar una validación más sólida mientras los usuarios ingresan datos y envían formularios. Utilice la [API de validación de restricciones](https://html.spec.whatwg.org/multipage/forms.html#constraints) (que es [ampliamente compatible](https://caniuse.com/#feat=constraint-validation)) para agregar una validación personalizada mediante la interfaz de usuario del navegador incorporada para establecer el enfoque y mostrar mensajes.
+
+Obtenga más información en [Use JavaScript para una validación en tiempo real más compleja](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+{% Aside 'warning' %} Incluso con la validación del lado del cliente y las restricciones de entrada de datos, debe asegurarse de que su back-end maneje de forma segura la entrada y salida de datos de los usuarios. Nunca confíe en la entrada del usuario: podría ser maliciosa. Más información en la [hoja de trucos de validación de entrada de OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html). {% endAside %}
+
+#### Ayude a los usuarios a no pasar por alto datos obligatorios {: #required}
+
+Utilice el [atributo `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) en las entradas de valores obligatorios.
+
+Cuando se envía un formulario, [los navegadores modernos](https://caniuse.com/mdn-api_htmlinputelement_required) automáticamente solicitan y enfocan los campos `required` con datos faltantes, y puede usar la [pseudo-clase `:required`](https://caniuse.com/?search=required) para resaltar los campos obligatorios. ¡No se requiere JavaScript!
+
+Agregue un asterisco a la etiqueta en cada campo obligatorio y una nota al comienzo del formulario para explicar qué significa el asterisco.
+
+## Simplifique el pago {: #checkout-forms}
+
+### ¡Cuidado con la brecha del comercio móvil! {: #m-commerce-gap}
+
+Imagine que sus usuarios tienen una *cantidad máxima de fatiga*. Si se lo termina, sus usuarios se irán.
+
+Necesita reducir la fricción y mantener el enfoque, especialmente en dispositivos móviles. Muchos sitios obtienen más *tráfico* en dispositivos móviles, pero más *conversiones* en computadoras de escritorio, un fenómeno conocido como [brecha de comercio móvil](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). Es posible que los clientes simplemente prefieran completar una compra en las computadoras de escritorio, pero las tasas de conversión móviles más bajas también son el resultado de una mala experiencia del usuario. Su trabajo consiste en *minimizar* las conversiones perdidas en dispositivos móviles y *maximizar* las conversiones ganadas en computadoras de escritorio. [Las investigaciones han demostrado](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs) que existe una gran oportunidad para brindar una mejor experiencia de formulario móvil.
+
+Sobre todo, es más probable que los usuarios abandonen formularios que parecen largos, complejos y sin direcciónclara. Esto es especialmente cierto cuando los usuarios están en pantallas más pequeñas, distraídos o con prisa. Solicite la menor cantidad de datos posible.
+
+### Haga que el pago como invitado sea la opción predeterminada {: #guest-checkout}
+
+Para una tienda en línea, la forma más sencilla de reducir la fricción en formularios es hacer que el pago como invitado sea la opción predeterminada. No obligue a los usuarios a crear una cuenta antes de realizar una compra. No permitir el pago por parte de los invitados se cita como una de las principales razones para el abandono del carrito de compras.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="Razones para el abandono del carrito de la compra durante el proceso de pago.", width="800", height="503" %}<figcaption> De <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a></figcaption></figure>
+
+Puede ofrecer el registro de la cuenta después del pago. En ese momento, ya tiene la mayoría de los datos que necesita para configurar una cuenta, por lo que la creación de la cuenta debe ser rápida y fácil para el usuario.
+
+{% Aside 'gotchas' %} Si ofrece el registro después de finalizar la compra, asegúrese de que la compra que acaba de realizar el usuario esté vinculada a su cuenta recién creada. {% endAside %}
+
+### Muestre el progreso de la compra {: #checkout-progress}
+
+Puede hacer que su proceso de pago se sienta menos complejo mostrando el progreso y dejando en claro lo que debe hacerse a continuación. El siguiente video muestra cómo el minorista británico [johnlewis.com](https://www.johnlewis.com) lo logra.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %}<figcaption> Muestre el progreso de la compra.</figcaption></figure>
+
+¡Necesita mantener el impulso! Para cada paso hacia el pago, use títulos de página y valores de botones descriptivos que aclaren lo que se debe hacer ahora y el siguiente paso en la compra.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Asigne nombres significativos a los botones de formulario que muestren lo que sigue.</figcaption></figure>
+
+Utilice el atributo `enterkeyhint` en las entradas del formulario para configurar la etiqueta de la tecla de entrada del teclado móvil. Por ejemplo, use `enterkeyhint="anterior"` y `enterkeyhint="siguiente"` dentro de un formulario de varias páginas, `enterkeyhint="listo"` para la entrada final en el formulario y `enterkeyhint="buscar"` para una entrada de búsqueda.
+
+<figure>{% Img  src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Dos capturas de pantalla de un formulario de dirección en Android que muestran cómo el atributo de entrada enterkeyhint cambia el ícono de la tecla Enter.", width="800", height="684" %}<figcaption> Botones Enter clave en Android: 'siguiente' y 'listo'.</figcaption></figure>
+
+El atributo `enterkeyhint` [es compatible con Android e iOS](https://caniuse.com/mdn-html_global_attributes_enterkeyhint) . Puede obtener más información en el [explicador de enterkeyhint](https://github.com/dtapuska/enterkeyhint) .
+
+{: #checkout-details}
+
+Facilite a los usuarios ir y venir dentro del proceso de pago, para hacer ajustes fácilmente a su pedido, incluso cuando se encuentran en el último paso de pago. Muestre todos los detalles del pedido, no solo un resumen limitado. Permita a los usuarios ajustar fácilmente las cantidades de artículos desde la página de pago. Su prioridad en este proceso es evitar interrumpir el progreso hacia la conversión.
+
+### Elimine las distracciones {: #reduce-checkout-exits}
+
+Limite los posibles puntos de salida eliminando el desorden visual y las distracciones, como las promociones de productos. Muchos minoristas exitosos incluso eliminan las opciones de navegación y búsqueda en el proceso de pago.
+
+<figure>{% Img  src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="Dos capturas de pantalla en dispositivos móviles que muestran el progreso a través de la compra en johnlewis.com. Se eliminan las distracciones de búsqueda, navegación y otras.", width="800", height="683" %}<figcaption> Búsqueda, navegación y otras distracciones eliminadas en el proceso de pago.</figcaption></figure>
+
+Mantenga el proceso enfocado. ¡Este no es el momento de tentar a los usuarios a hacer otra cosa!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="Captura de pantalla de página de pago en móvil que muestra una promoción de ETIQUETAS GRATUITAS que distrae al usuario.", width="350", height="735" %}<figcaption> No distraiga a los clientes de completar su compra.</figcaption></figure>
+
+Para los usuarios recurrentes, puede simplificar aún más el proceso de pago al ocultar los datos que no necesitan ver. Por ejemplo: muestre la dirección de entrega en texto sin formato (no en un formulario) y permita que los usuarios la cambien a través de un enlace.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="Captura de pantalla de la sección 'Revisar pedido' de la página de pago, que muestra el texto sin formato, con enlaces para cambiar la dirección de entrega, la forma de pago y la dirección de facturación, que no se muestran.", width="450", height="219" %}<figcaption> Ocultar datos que los clientes no necesitan ver.</figcaption></figure>
+
+## Facilite la introducción del nombre y la dirección {: #address-forms}
+
+### Solicite solo los datos que necesita {: #unneeded-data}
+
+Antes de comenzar a codificar los formularios de nombre y dirección, asegúrese de comprender qué datos se requieren. ¡No pida datos que no necesita! La forma más sencilla de reducir la complejidad del formulario es eliminar los campos innecesarios. Eso también es bueno para la privacidad del cliente y puede reducir el costo de back-end y la responsabilidad de datos.
+
+### Use una sola entrada para ingresar el nombre {: #single-name-input}
+
+Permita que sus usuarios ingresen su nombre en un solo campo, a menos que tenga una buena razón para almacenar por separado los nombres de pila, apellidos, honoríficos u otras partes del nombre. El uso de la entrada única para el nombre hace que los formularios sean menos complejos, permite cortar y pegar y simplifica el autocompletado.
+
+En particular, a menos que tenga una buena razón para no hacerlo, no se moleste en agregar una entrada separada para un prefijo o título (como Sra., Dr. o Lord). Los usuarios pueden escribir eso con su nombre si así lo desean. Además, el `honorific-prefix` actualmente no funciona en la mayoría de los navegadores, por lo que agregar un campo para el prefijo del nombre o el título interferirá en la experiencia de autocompletar del formulario de dirección para la mayoría de los usuarios.
+
+### Habilite el autocompletado de nombres
+
+Use `name` para un nombre completo:
+
+```html
+<input autocomplete="name" ...>
+```
+
+Si realmente tiene una buena razón para dividir las partes del nombre, asegúrese de usar los valores de autocompletar apropiados:
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### Permita nombres internacionales {: #unicode-matching}
+
+Es posible que desee validar sus entradas de nombre o restringir los caracteres permitidos para los datos del nombre. Sin embargo, debe ser lo menos restrictivo posible con los alfabetos. ¡Es de mala educación decirle a alguien que su nombre es "inválido"!
+
+Para la validación, evite el uso de expresiones regulares que solo coincidan con caracteres latinos. El uso de solo alfabeto latino excluye a los usuarios con nombres o direcciones que incluyen caracteres que no están en dicho alfabeto. En su lugar, permita la coincidencia de letras Unicode y asegúrese de que su back-end admita Unicode de forma segura como entrada y salida. Los navegadores modernos son compatibles con el uso de Unicode en expresiones regulares.
+
+{% Compare 'worse' %}
+
+```html
+<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- Accepts Unicode letters. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Coincidencia de letras Unicode en comparación con la coincidencia de letras solo latinas.</figcaption></figure>
+
+{% Aside %} Puede obtener más información sobre [internacionalización y localización a](#internationalization-localization) continuación, pero asegúrese de que sus formularios funcionen para nombres en todas las regiones donde tiene usuarios. Por ejemplo, para los nombres japoneses, debería considerar tener un campo para los nombres fonéticos. Esto ayuda al personal de atención al cliente a decir el nombre del cliente en las llamadas telefónicas. {% endAside %}
+
+### Permita una variedad de formatos de dirección {: #address-variety}
+
+Cuando diseñe un formulario de dirección, tenga en cuenta la asombrosa variedad de formatos de dirección, incluso dentro de un solo país. Tenga cuidado de no hacer suposiciones sobre direcciones "normales". (¡Eche un vistazo a las [rarezas de las direcciones del Reino Unido! ¡](http://www.paulplowman.com/stuff/uk-address-oddities/) Si no está convencido!)
+
+#### Flexibilice los formularios de direcciones {:#flexible-address}
+
+No obligue a los usuarios a intentar incluir su dirección en campos de formulario que no encajen.
+
+Por ejemplo, no insista en un número de casa y el nombre de la calle en entradas separadas, ya que muchas direcciones no usan ese formato y los datos incompletos pueden interrumpir el autocompletado del navegador.
+
+Tenga especial cuidado con campos de dirección `required`. Por ejemplo, las direcciones en las grandes ciudades del Reino Unido no tienen un condado, pero muchos sitios todavía obligan a los usuarios a ingresar uno.
+
+El uso de dos líneas flexibles para la dirección puede funcionar lo suficientemente bien para una variedad de formatos de direcciones.
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Agregue etiquetas para que coincidan:
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Puede probar esto remezclando y editando la demostración incrustada a continuación.
+
+{% Aside 'caution' %} Las investigaciones muestran que la [**línea de dirección 2** puede ser problemática para los usuarios](https://baymard.com/blog/address-line-2). Tenga esto en cuenta al diseñar formularios de direcciones: debe considerar alternativas, como usar un solo `textarea` (ver más abajo) u otras opciones. {% endAside %}
+
+#### Considere usar un solo textarea para la dirección {: #address-textarea}
+
+La opción más flexible para las direcciones es proporcionar un solo `textarea`.
+
+El `textarea` se adapta a cualquier formato de dirección y es excelente para cortar y pegar, pero tenga en cuenta que es posible que no se ajuste a sus requisitos de datos y que los usuarios extrañen el autocompletado si anteriormente solo usaban formularios con `address-line1` y `address-line2`.
+
+Para un textarea, use `street-address` como el valor de autocompletado.
+
+Aquí hay un ejemplo de un formulario que demuestra el uso de un solo `textarea` para la dirección:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### Internacionalice y localice sus formularios de direcciones {: #internationalization-localization}
+
+Es especialmente importante que los formularios de direcciones consideren la [internacionalización y la localización](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/), según la ubicación de los usuarios.
+
+Tenga en cuenta que el nombre de las partes de la dirección varía, así como los formatos de dirección, incluso dentro del mismo idioma.
+
+```text
+    ZIP code: US
+ Postal code: Canada
+    Postcode: UK
+     Eircode: Ireland
+         PIN: India
+```
+
+Puede ser irritante o desconcertante que se le presente un formulario que no se ajuste a su dirección o que no use las palabras que espera.
+
+Es posible que su sitio necesite personalizar formularios de direcciones [para múltiples configuraciones regionales](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region), pero el uso de técnicas para maximizar la flexibilidad de los formularios (como se describe anteriormente) puede ser adecuado. Si no localiza sus formularios de dirección, asegúrese de comprender las prioridades clave para hacer frente a una variedad de formatos de dirección:
+
+- Evite ser demasiado específico sobre las partes de la dirección, como insistir en el nombre de la calle o el número de la casa.
+- Siempre que sea posible, evite hacer que los campos sean `required`. Por ejemplo, las direcciones en muchos países no tienen un código postal y las direcciones rurales pueden no tener un nombre de calle o camino.
+- Utilice nombres inclusivos: 'País/región' no 'País'; 'ZIP/código postal' no 'ZIP'.
+
+¡Sea flexible! El [ejemplo de formulario de dirección simple anterior](#address-textarea) se puede adaptar para que funcione "lo suficientemente bien" para muchas configuraciones regionales.
+
+#### Considere evitar la búsqueda de direcciones de código postal {: #postal-code-address-lookup}
+
+Algunos sitios web utilizan un servicio para buscar direcciones según el código postal o ZIP. Esto puede ser sensato para algunos casos de uso, pero debe tener en cuenta las posibles desventajas.
+
+La sugerencia de dirección de código postal no funciona para todos los países y, en algunas regiones, los códigos postales pueden incluir una gran cantidad de direcciones potenciales.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>¡Los códigos postales pueden incluir muchas direcciones!</figcaption></figure>
+
+Es difícil para los usuarios seleccionar de una larga lista de direcciones, especialmente en dispositivos móviles si están apurados o estresados. Puede ser más fácil y menos propenso a errores permitir que los usuarios aprovechen la función de autocompletar e ingresen su dirección completa con un solo toque o clic.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Usar una sola entrada para el nombre permite el ingreso de direcciones con un solo toque (un clic).</figcaption></figure>
+
+## Simplifique los formularios de pago {: #general-guidelines}
+
+Los formularios de pago son la parte más crítica del proceso de pago. El diseño deficiente del formulario de pago es una [causa común de abandono del carrito de compras](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). El [diablo está en los detalles](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1): los pequeños fallos pueden hacer que los usuarios abandonen una compra, especialmente en dispositivos móviles. Su trabajo consiste en diseñar formularios para que sea lo más fácil posible para los usuarios ingresar datos.
+
+### Ayude a los usuarios a evitar volver a ingresar datos de pago {: #payment-form-autocomplete}
+
+Asegúrese de agregar los valores de `autocomplete` apropiados en los formularios de tarjetas de pago, incluido el número de la tarjeta de pago, el nombre en la tarjeta y el mes y año de vencimiento:
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+Esto permite que los navegadores ayuden a los usuarios almacenando de forma segura los detalles de la tarjeta de pago e ingresando correctamente los datos del formulario. Sin el autocompletado, es más probable que los usuarios mantengan un registro físico de los detalles de la tarjeta de pago o los almacenen de manera insegura en su dispositivo.
+
+{% Aside 'caution' %} No agregue un selector para el tipo de tarjeta de pago, ya que esto siempre se puede inferir del número de la tarjeta de pago. {% endAside %}
+
+### Evite el uso de elementos personalizados para las fechas de las tarjetas de pago
+
+Si no se diseñan correctamente, [los elementos personalizados](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) pueden romper el flujo de pago al interrumpir el autocompletado y no funcionarán en navegadores más antiguos. Si todos los demás detalles de la tarjeta de pago están disponibles en la función de autocompletar, pero un usuario se ve obligado a buscar su tarjeta de pago física para buscar una fecha de vencimiento porque la función de autocompletar no funcionó para un elemento personalizado, es probable que pierda una venta. En su lugar, considere utilizar elementos HTML estándar y modifíquelos posteriormente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="Captura de pantalla de un formulario de pago que muestra elementos personalizados para la fecha de vencimiento de la tarjeta que interrumpen el llenado automático.", width="800", height="916" %}<figcaption> Autocompletar llenó todos los campos, ¡excepto la fecha de vencimiento!</figcaption></figure>
+
+### Utilice una única entrada para la tarjeta de pago y los números de teléfono {: #single-number-input}
+
+Para tarjetas de pago y números de teléfono, use una sola entrada: no divida el número en partes. Eso hace que sea más fácil para los usuarios ingresar datos, simplifica la validación y permite que los navegadores aporten el llenado automático. Considere hacer lo mismo con otros datos numéricos como PIN y códigos bancarios.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="Captura de pantalla de un formulario de pago que muestra un campo de tarjeta de crédito dividido en cuatro elementos de entrada.", width="800", height="833" %}<figcaption> No utilice varias entradas para un número de tarjeta de crédito.</figcaption></figure>
+
+### Valide con cuidado {: #validate}
+
+Debe validar la entrada de datos tanto en tiempo real como antes de enviar el formulario. Una forma de hacerlo es agregando un atributo `pattern` a la entrada de una tarjeta de pago. Si el usuario intenta enviar el formulario de pago con un valor no válido, el navegador muestra un mensaje de advertencia y se centra en la entrada. ¡No se requiere JavaScript!
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+Sin embargo, la expresión regular de su `pattern` debe ser lo suficientemente flexible para manejar [el rango de longitudes de números de tarjetas de pago](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35): de 14 dígitos (o posiblemente menos) a 20 (o más). Puede obtener más información sobre la estructuración de números de tarjetas de pago en [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number) .
+
+Permita que los usuarios incluyan espacios cuando ingresen un nuevo número de tarjeta de pago, ya que así es como se muestran los números en las tarjetas físicas. Eso es más amigable para el usuario (no tendrá que decirles que "hicieron algo mal"), es menos probable que interrumpa el flujo de conversión y es sencillo eliminar los espacios en los números antes de procesar.
+
+{% Aside %} Es posible que desee utilizar un código de acceso de un solo uso para verificar la identidad o el pago. Sin embargo, pedir a los usuarios que ingresen manualmente un código o que lo copien desde un correo electrónico o un mensaje de texto SMS es propenso a errores y una fuente de fricción. Conozca mejores formas de habilitar códigos de acceso de un solo uso en  [mejores prácticas para formulario de OTP SMS](/sms-otp-form). {% endAside %}
+
+## Haga pruebas en una variedad de dispositivos, plataformas, navegadores y versiones {: #test-platform}
+
+Es particularmente importante probar la dirección y los formularios de pago en las plataformas más comunes para sus usuarios, ya que la funcionalidad y la apariencia de los elementos del formulario pueden variar, y las diferencias en el tamaño de la ventana gráfica pueden generar un posicionamiento problemático. BrowserStack permite [realizar pruebas gratuitas para proyectos de código abierto](https://www.browserstack.com/open-source) en una variedad de dispositivos y navegadores.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="Capturas de pantalla de un formulario de pago, payment-form.glitch.me, en iPhone 7 y 11. El botón de pago completo se muestra en el iPhone 11 pero no se muestra en el iPhone 7", width="800", height="707" %}<figcaption> La misma página en iPhone 7 y iPhone 11.<br> Reduzca el relleno de las ventanas gráficas móviles más pequeñas para asegurarse de que el botón <strong>Completar pago</strong> no esté oculto.</figcaption></figure>
+
+## Implemente analíticas y RUM {: #analytics-rum}
+
+Probar la usabilidad y el rendimiento localmente puede ser útil, pero necesita datos del mundo real para comprender correctamente cómo los usuarios experimentan sus formularios de pago y dirección.
+
+Para eso, necesita analíticas y monitoreo de usuarios reales (Real User Monitoring, RUM): datos sobre la experiencia de los usuarios reales, como cuánto tardan en cargarse las páginas de pago o cuánto tarda en completarse el pago:
+
+- **Analítica de página**: vistas de página, tasas de rebote y salidas para cada página con un formulario.
+- **Analítica de interacción**: los [embudos de metas](https://support.google.com/analytics/answer/6180923?hl=en) y los [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) indican dónde los usuarios abandonan su flujo de pago y qué acciones toman al interactuar con sus formularios.
+- **Rendimiento del sitio web**: las [métricas centradas en el usuario](/user-centric-performance-metrics) pueden indicarle si sus páginas de pago tardan en cargarse y, de ser así, cuál es la causa.
+
+Las analíticas de la página y de la interacción y la medición del rendimiento del usuario real se vuelven especialmente valiosos cuando se combinan con los registros del servidor, los datos de conversión y las pruebas A/B, lo que le permite responder preguntas como si los códigos de descuento aumentan los ingresos o si un cambio en el diseño del formulario aumenta las conversiones.
+
+Eso, a su vez, le brinda una base sólida para priorizar el esfuerzo, realizar cambios y recompensar el éxito.
+
+## Siga aprendiendo {: #resources}
+
+- [Mejores prácticas para el formulario de inicio de sesión](/sign-in-form-best-practices)
+- [Mejores prácticas del formulario de registro](/sign-up-form-best-practices)
+- [Verifique los números de teléfono en la web con la API de WebOTP](/web-otp)
+- [Cree formularios asombrosos](/learn/forms/)
+- [Mejores prácticas para el diseño de formularios móviles](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulario más capaces](/more-capable-form-controls)
+- [Crear formularios accesibles](https://webaim.org/techniques/forms/)
+- [Optimización del flujo de registro mediante la API de gestión de credenciales](https://developer.chrome.com/blog/credential-management-api/)
+- [La Guía compulsiva de direcciones postales de Frank](http://www.columbia.edu/~fdc/postal/) proporciona enlaces útiles y una guía extensa para formatos de direcciones en más de 200 países.
+- [Listas de países](http://www.countries-list.info/Download-List) tiene una herramienta para descargar códigos y nombres de países en varios idiomas, en varios formatos.
+
+Foto de [@rupixen](https://unsplash.com/@rupixen) en [Unsplash](https://unsplash.com/photos/Q59HmzK38eQ) .
diff --git a/src/site/content/es/blog/periodic-background-sync/index.md b/src/site/content/es/blog/periodic-background-sync/index.md
new file mode 100644
index 00000000000..bd0f13765cb
--- /dev/null
+++ b/src/site/content/es/blog/periodic-background-sync/index.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: Experiencias más enriquecedoras sin conexión con la API de sincronización periódica en segundo plano
+subhead: Sincronice los datos de su aplicación web en segundo plano para lograr una experiencia similar
+authors:
+  - jeffposnick
+  - joemedley
+date: 2019-11-10
+updated: 2020-08-18
+hero: image/admin/Bz7MndcsUGPLAnQwIMfJ.jpg
+alt: Aviones de colores volando sincronizadamente
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/4048736065006075905"
+description: La sincronización periódica en segundo plano permite a las aplicaciones web sincronizar periódicamente los datos en segundo plano, lo que acerca a las aplicaciones web al comportamiento de una aplicación iOS/Android/de escritorio.
+tags:
+  - capabilities
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Las aplicaciones web deberían poder hacer todo lo que pueden hacer las aplicaciones de escritorio, iOS o Android. El [proyecto Capabilities](https://developer.chrome.com/blog/capabilities/) , del cual Periodic Background Sync es solo una parte, tiene como objetivo hacer precisamente eso. Para conocer otras capacidades y mantenerse al día con su progreso, siga [Desbloqueo de nuevas capacidades para la web](https://developer.chrome.com/blog/capabilities/) . {% endAside %}
+
+¿Alguna vez ha estado en alguna de las siguientes situaciones?
+
+- Viajar en tren o metro con una conectividad poco confiable o nula
+- Su operador le redujo la velocidad después de ver demasiados videos
+- Vivir en un país en el que el ancho de banda tiene dificultades para satisfacer la demanda
+
+Si es así, seguro que sintió la frustración de hacer ciertas cosas en la web, y se preguntó por qué las aplicaciones específicas de la plataforma a menudo son mejores en estos escenarios. Las aplicaciones específicas de la plataforma pueden buscar contenido fresco, como artículos de noticias o información meteorológica, con antelación. Incluso si no hay red en el metro, puede leer las noticias.
+
+La sincronización periódica en segundo plano permite que las aplicaciones web sincronicen periódicamente los datos en segundo plano, lo que acerca a las aplicaciones web al comportamiento de una aplicación específica de la plataforma.
+
+## Estado actual
+
+En la siguiente tabla se explica el estado actual de la API de sincronización periódica en segundo plano.
+
+<table>
+<tr>
+<th markdown="block">Paso</th>
+<th markdown="block">Estado</th>
+</tr>
+<tr>
+<td markdown="block">1. Crear explicador</td>
+<td markdown="block"><a href="https://github.com/WICG/BackgroundSync/tree/master/explainers">Completo</a></td>
+</tr>
+<tr>
+<td markdown="block">2. Crear borrador inicial de especificación</td>
+<td markdown="block"><a href="https://wicg.github.io/periodic-background-sync/" rel="noopener">Completo</a></td>
+</tr>
+<tr>
+<td markdown="block">3. Recopilar comentarios e iterar el diseño</td>
+<td markdown="block">En curso</td>
+</tr>
+<tr>
+<td markdown="block">4. Prueba de origen</td>
+<td markdown="block">Completo</td>
+</tr>
+<tr>
+<td markdown="block"><strong>5. Lanzamiento</strong></td>
+<td markdown="block"><strong>Chrome 80</strong></td>
+</tr>
+</table>
+
+## Pruébelo
+
+Puede probar la sincronización periódica en segundo plano con la [aplicación de demostración en vivo](https://webplatformapis.com/periodic_sync/periodicSync_improved.html). Antes de utilizarla, asegúrese de que:
+
+- Está utilizando Chrome 80 o posterior.
+- Debe [instalar](https://developers.google.com/web/fundamentals/app-install-banners/) la aplicación web antes de activar la sincronización periódica en segundo plano.
+
+## Conceptos y uso
+
+La sincronización periódica en segundo plano permite mostrar contenido fresco cuando se lanza una aplicación web progresiva o una página respaldada por un service worker. Para ello, se descargan los datos en segundo plano cuando no se utiliza la aplicación o la página. Esto evita que el contenido de la aplicación se actualice después del lanzamiento mientras se visualiza. Mejor aún, evita que la aplicación muestre un marcador de contenido antes de actualizarse.
+
+Sin una sincronización periódica en segundo plano, las aplicaciones web deben utilizar métodos alternativos para descargar datos. Un ejemplo común es el uso de una notificación push para activar un service worker. El usuario se interrumpe con un mensaje como "nuevos datos disponibles". La actualización de los datos es esencialmente un efecto secundario. Todavía tiene la opción de utilizar las notificaciones push para las actualizaciones verdaderamente importantes, como las noticias de última hora.
+
+La sincronización periódica en segundo plano se confunde fácilmente con la sincronización en segundo plano. Aunque tienen nombres similares, sus casos de uso son diferentes. Entre otras cosas, la sincronización en segundo plano se utiliza más comúnmente para reenviar datos a un servidor cuando una solicitud previa falló.
+
+### Conseguir el compromiso de los usuarios
+
+Si se hace de forma incorrecta, la sincronización periódica en segundo plano puede suponer un derroche de recursos para los usuarios. Antes de lanzarla, Chrome la sometió a un periodo de prueba para asegurarse de que era correcta. En esta sección se explican algunas de las decisiones de diseño que tomó Chrome para que esta función fuera lo más útil posible.
+
+La primera decisión de diseño que tomó Chrome es que una aplicación web solo puede utilizar la sincronización periódica en segundo plano después de que una persona la instale en su dispositivo y la inicie como una aplicación distinta. La sincronización periódica en segundo plano no está disponible en el contexto de una pestaña normal en Chrome.
+
+Además, como Chrome no quiere que las aplicaciones web que no se utilizan o se utilizan poco consuman gratuitamente batería o datos, diseñó la sincronización periódica en segundo plano de forma que los desarrolladores tengan que ganársela aportando valor a sus usuarios. Concretamente, Chrome utiliza una [puntuación de compromiso del sitio](https://www.chromium.org/developers/design-documents/site-engagement) (`about://site-engagement/`) para determinar si la sincronización periódica en segundo plano puede producirse para una aplicación web determinada y con qué frecuencia. En otras palabras, un evento `periodicsync` no se activará a menos que la puntuación de compromiso sea mayor que cero, y su valor afecta a la frecuencia con la que se activa el evento `periodicsync`. Esto asegura que las únicas aplicaciones que se sincronizan en segundo plano son las que se utilizan activamente.
+
+La sincronización periódica en segundo plano comparte algunas similitudes con las API y las prácticas existentes en plataformas populares. Por ejemplo, la sincronización en segundo plano puntual, así como las notificaciones push, permiten que la lógica de una aplicación web perdure un poco más (mediante su service worker) después de que una persona haya cerrado la página. En la mayoría de las plataformas, es habitual que la gente tenga instaladas aplicaciones que acceden periódicamente a la red en segundo plano para ofrecer una mejor experiencia de usuario en cuanto a actualizaciones críticas, precarga de contenidos, sincronización de datos, etc. Del mismo modo, la sincronización periódica en segundo plano también amplía la vida útil de la lógica de una aplicación web para que se ejecute en periodos regulares cada vez durante lo que podrían ser unos minutos.
+
+Si el navegador permite que esto ocurra con frecuencia y sin restricciones, podría dar lugar a algunos problemas de privacidad. Así es como Chrome aborda este riesgo para la sincronización periódica en segundo plano:
+
+- La actividad de sincronización en segundo plano solo ocurre en una red a la que el dispositivo se ha conectado previamente. Chrome recomienda conectarse solo a redes operadas por partes confiables.
+- Como ocurre con todas las comunicaciones por Internet, la sincronización periódica en segundo plano revela las direcciones IP del cliente, el servidor con el que habla y el nombre del servidor. Para reducir esta exposición a aproximadamente lo que sería si la aplicación solo se sincronizara cuando estuviera en primer plano, el navegador limita la frecuencia de las sincronizaciones en segundo plano de una aplicación para alinearla con la frecuencia con la que la persona utiliza esa aplicación. Si la persona deja de interactuar frecuentemente con la aplicación, la sincronización periódica en segundo plano dejará de activarse. Esto supone una mejora neta con respecto al estado actual de las aplicaciones específicas de la plataforma.
+
+### ¿Cuándo se puede utilizar?
+
+Las reglas de uso varían según el navegador. En resumen, Chrome impone los siguientes requisitos a la sincronización periódica en segundo plano:
+
+- Una puntuación particular de compromiso del usuario.
+- Presencia de una red que se utilizó anteriormente.
+
+Los desarrolladores no controlan la frecuencia de las sincronizaciones. La frecuencia de sincronización se alineará con la frecuencia de uso de la aplicación. (Tenga en cuenta que las aplicaciones específicas de la plataforma actualmente no hacen esto). Además, toma en cuenta el estado de energía y conectividad del dispositivo.
+
+### ¿Cuándo debe utilizarse?
+
+Cuando su service worker se activa para administrar un evento `periodicsync`, tiene la *oportunidad* de solicitar datos, pero no la *obligación* de hacerlo. Cuando administre el evento debe tener en cuenta las condiciones de la red y el almacenamiento disponible y descargar diferentes cantidades de datos como respuesta. Puede utilizar los siguientes recursos como ayuda:
+
+- [API de información de red](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+- [Detección en el modo de ahorro de datos](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#detecting_the_save-data_setting)
+- [Estimación del almacenamiento disponible](https://developers.google.com/web/updates/2017/08/estimating-available-storage-space)
+
+### Permisos
+
+Después de instalar el service worker, utilice la API de permisos para consultar `periodic-background-sync`. Puede hacer esto desde una ventana o desde un contexto de service worker.
+
+```js
+const status = await navigator.permissions.query({
+  name: 'periodic-background-sync',
+});
+if (status.state === 'granted') {
+  // Periodic background sync can be used.
+} else {
+  // Periodic background sync cannot be used.
+}
+```
+
+### Cómo registrar una sincronización periódica
+
+Como ya se mencionó, la sincronización periódica en segundo plano requiere un service worker. Recupere un `PeriodicSyncManager` utilizando `ServiceWorkerRegistration.periodicSync` y llame a `register()` sobre él. El registro necesita una etiqueta y un intervalo de sincronización mínimo (`minInterval`). La etiqueta identifica la sincronización que se registra, de modo que se pueden registrar varias sincronizaciones. En el siguiente ejemplo, el nombre de la etiqueta es `'content-sync'` y el `minInterval` es un día.
+
+```js/3-5
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  try {
+    await registration.periodicSync.register('content-sync', {
+      // An interval of one day.
+      minInterval: 24 * 60 * 60 * 1000,
+    });
+  } catch (error) {
+    // Periodic background sync cannot be used.
+  }
+}
+```
+
+### Verificación de un registro
+
+Llame a `periodicSync.getTags()` para recuperar una matriz de etiquetas de registro. En el siguiente ejemplo se utilizan los nombres de las etiquetas para confirmar que la actualización del caché está activa para evitar que se actualice de nuevo.
+
+```js/2,4
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  const tags = await registration.periodicSync.getTags();
+  // Only update content if sync isn't set up.
+  if (!tags.includes('content-sync')) {
+    updateContentOnPageLoad();
+  }
+} else {
+  // If periodic background sync isn't supported, always update.
+  updateContentOnPageLoad();
+}
+```
+
+También puede utilizar `getTags()` para mostrar una lista de registros activos en la página de configuración de su aplicación web para que los usuarios puedan activar o desactivar tipos específicos de actualizaciones.
+
+### Respuesta a un evento de sincronización periódica en segundo plano
+
+Para responder a un evento de sincronización periódica en segundo plano, agregue un controlador de eventos `periodicsync` a su service worker. El objeto `event` que se le pase contendrá un parámetro `tag` que coincida con el valor que se utilizó durante el registro. Por ejemplo, si se registró una sincronización periódica en segundo plano con el nombre `'content-sync'`, entonces `event.tag` será `'content-sync'`.
+
+```js
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    // See the "Think before you sync" section for
+    // checks you could perform before syncing.
+    event.waitUntil(syncContent());
+  }
+  // Other logic for different tags as needed.
+});
+```
+
+### Anular el registro de una sincronización
+
+Para finalizar una sincronización ya registrada, llame a `periodicSync.unregister()` con el nombre de la sincronización que desea anular.
+
+```js
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  await registration.periodicSync.unregister('content-sync');
+}
+```
+
+## Interfaces
+
+A continuación, presentamos un breve resumen de las interfaces que ofrece la API de sincronización periódica en segundo plano.
+
+- `PeriodicSyncEvent`. Se transmite al controlador del evento `ServiceWorkerGlobalScope.onperiodicsync` en el momento que decida el navegador.
+- `PeriodicSyncManager`. Registra y anula las sincronizaciones periódicas y proporciona etiquetas para las sincronizaciones registradas. Recupera una instancia de esta clase desde la propiedad ServiceWorkerRegistration.periodicSync`.
+- `ServiceWorkerGlobalScope.onperiodicsync`. Registra un controlador para recibir el `PeriodicSyncEvent`.
+- `ServiceWorkerRegistration.periodicSync` . Devuelve una referencia al `PeriodicSyncManager` .
+
+## Ejemplo
+
+### Actualización del contenido
+
+El siguiente ejemplo utiliza la sincronización periódica en segundo plano para descargar y almacenar en el caché los artículos actualizados de un sitio de noticias o un blog. Tenga en cuenta el nombre de la etiqueta, que indica el tipo de sincronización que es (`'update-articles'`). La llamada a `updateArticles()` está envuelta en `event.waitUntil()` para que el service worker no termine antes de que los artículos se descarguen y se almacenen.
+
+```js/7
+async function updateArticles() {
+  const articlesCache = await caches.open('articles');
+  await articlesCache.add('/api/articles');
+}
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'update-articles') {
+    event.waitUntil(updateArticles());
+  }
+});
+```
+
+### Agregar una sincronización periódica en segundo plano a una aplicación web existente
+
+[Este conjunto de cambios](https://github.com/GoogleChromeLabs/so-pwa/pull/11) fueron necesarios para añadir la sincronización periódica en segundo plano a una [PWA existente](https://so-pwa.firebaseapp.com/). Este ejemplo incluye una serie de declaraciones de registro útiles que describen el estado de la sincronización periódica en segundo plano en la aplicación web.
+
+## Depuración
+
+Puede ser un reto obtener una vista de extremo a extremo de la sincronización periódica en segundo plano mientras se realizan pruebas locales. La información sobre los registros activos, los intervalos de sincronización aproximados y los registros de eventos de sincronización pasados proporcionan un contexto valioso mientras se depura el comportamiento de la aplicación web. Afortunadamente, puede encontrar toda esa información mediante una función experimental en Chrome DevTools.
+
+{% Aside %} La depuración periódica de la sincronización en segundo plano se habilita en Chrome 81 y en versiones posteriores. {% endAside %}
+
+### Registro de la actividad local
+
+La sección **Sincronización periódica en segundo plano** de DevTools está organizada en torno a los eventos clave del ciclo de vida de la sincronización periódica en segundo plano: registro para la sincronización, realización de una sincronización en segundo plano y anulación del registro. Para obtener información sobre estos eventos, haga clic en **Iniciar registro**.
+
+<figure>{% Img src="image/admin/wcl5Bm6Pe9xn5Dps6IN6.png", alt="El botón de registro en DevTools", width="708", height="90" %} <figcaption> The record button in DevTools </figcaption></figure>
+
+Mientras se graba, aparecerán entradas en DevTools correspondientes a los eventos, con el contexto y los metadatos registrados para cada uno.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/m92Art0OwiM0VyI7czFB.png", alt="Un ejemplo de datos de sincronización periódica de fondo registrados", width="800", height="357", style="max-width: 75%" %} <figcaption> Un ejemplo de datos de sincronización periódica de fondo registrados </figcaption></figure>
+
+Después de activar el registro por primera vez, permanecerá activado hasta tres días, lo que permite a DevTools capturar información de depuración local sobre las sincronizaciones en segundo plano que puedan tener lugar, incluso horas en el futuro.
+
+### Simulación de eventos
+
+Aunque el registro de la actividad en segundo plano puede ser útil, hay ocasiones en las que querrá probar su controlador `periodicsync` inmediatamente, sin esperar a que se dispare un evento en su cadencia normal.
+
+Puede hacerlo mediante la sección **Service Workers** del panel de aplicaciones en Chrome DevTools. El campo **Sincronización periódica** le permite proporcionar una etiqueta para el evento que va a utilizar, y activarlo tantas veces como desee.
+
+{% Aside %} La activación manual de un evento `periodicsync` requiere Chrome 81 o una versión posterior. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BQ5QdjwaRDP42cHqW98W.png", alt="La sección 'Service Workers' del panel de la aplicación muestra un campo de texto y un botón de 'Sincronización periódica'", width="800", height="321", style="max-width: 90%" %}</figure>
+
+## Uso de la interfaz de DevTools
+
+A partir de Chrome 81, podrás consultar una sección **Sincronización periódica en segundo plano** en el panel *Aplicación* de DevTools.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eYJtJfZ9Qo145lUQe4Ur.png", alt="El panel de la aplicación muestra la sección de Sincronización periódica en segundo plano", width="382", height="253", style="max-width: 75%" %}</figure>
diff --git a/src/site/content/es/blog/persistent-storage/index.md b/src/site/content/es/blog/persistent-storage/index.md
new file mode 100644
index 00000000000..02c3b85e88e
--- /dev/null
+++ b/src/site/content/es/blog/persistent-storage/index.md
@@ -0,0 +1,104 @@
+---
+title: Almacenamiento persistente
+subhead: El almacenamiento persistente puede ayudar a proteger los datos críticos del desalojo y reducir la posibilidad de pérdida de datos.
+authors:
+  - petelepage
+description: El almacenamiento persistente puede ayudar a proteger los datos críticos del desalojo y reducir la posibilidad de pérdida de datos.
+date: 2020-05-12
+updated: 2020-05-12
+tags:
+  - blog
+  - storage
+  - progressive-web-apps
+hero: image/admin/0TWeS0GZhDTpPzQVhDVS.jpg
+alt: Placa de circuito impreso
+feedback:
+  - api
+---
+
+Cuando nos enfrentamos a presiones por almacenamiento como lo es el poco espacio en disco, los navegadores normalmente [desalojan los datos](/storage-for-the-web/#eviction), incluso los de la API de Cache y los de IndexedDB, del origen menos utilizado recientemente. Esto puede causar la pérdida de datos si la aplicación no ha sincronizado los datos con el servidor y reducir la confiabilidad de la aplicación al eliminar los recursos necesarios para que funcione, lo cual genera experiencias negativas para el usuario.
+
+Afortunadamente, la investigación realizada por el equipo de Chrome muestra que Chrome en raras ocasiones borra los datos automáticamente. Es mucho más común que los usuarios borren manualmente el almacenamiento. Por lo tanto, si un usuario visita tu sitio con regularidad, las posibilidades de que tus datos sean desalojados son escasas. Para evitar que el navegador elimine tus datos, puedes solicitar que todo el almacenamiento de tu sitio sea marcado como persistente.
+
+{% Aside %} Al solicitar que todos los datos de tu sitio se marquen como persistentes solo se debe de hacerse para datos críticos (por ejemplo, claves de cifrado de extremo a extremo) que, si no se respaldan en la nube, podrían resultar en una pérdida significativa de datos si no son guardados. El navegador no elimina el almacenamiento persistente, incluso si el almacenamiento se está agotando. Solo se eliminará si el usuario elige eliminarlo a través de la configuración de su sitio. {% endAside %}
+
+El almacenamiento persistente es [compatible con muchos](https://caniuse.com/#feat=mdn-api_permissions_persistent-storage_permission) navegadores modernos. Para obtener más información sobre el desalojo, cuánto puedes almacenar y cómo manejar las limitaciones de las cuotas, consulta [Almacenamiento para la web](/storage-for-the-web/).
+
+## Comprueba si el almacenamiento de tu sitio se ha marcado como persistente
+
+Puedes utilizar JavaScript para determinar si el almacenamiento de tu sitio se ha marcado como persistente. Al llamar a `navigator.storage.persisted()` devuelve una Promesa que se resuelve con un booleano, lo que indica si el almacenamiento se ha marcado como persistente o no.
+
+```js
+// Verifica si el alojamiento del sitio fue marcado como persistente
+if (navigator.storage && navigator.storage.persist) {
+  const isPersisted = await navigator.storage.persisted();
+  console.log(`Persisted storage granted: ${isPersisted}`);
+}
+```
+
+## ¿Cuándo debo pedir el almacenamiento persistente?
+
+El mejor momento para solicitar que tu almacenamiento se marque como persistente es cuando guardas los datos críticos del usuario y esa solicitud idealmente debería estar envuelta en un gesto de usuario. No solicites almacenamiento persistente en la carga de la página o en otro código de arranque dado que el navegador puede solicitar permiso al usuario. Si el usuario no está haciendo nada que crea que debe guardarse, el mensaje puede ser confuso y probablemente rechazará la solicitud. Además, no avises con demasiada frecuencia. Si el usuario decidió no otorgar el permiso, no vuelvas a preguntar inmediatamente en el próximo guardado.
+
+## Solicitar almacenamiento persistente
+
+Para solicitar el almacenamiento persistente de los datos de tu sitio, llama a `navigator.storage.persist()`. Devuelve una Promesa que se resuelve con un booleano, lo que indica si se otorgó el permiso de almacenamiento persistente.
+
+```js
+// Hace una solicitud de almacenamiento persistente al sitio
+if (navigator.storage && navigator.storage.persist) {
+  const isPersisted = await navigator.storage.persist();
+  console.log(`Persisted storage granted: ${isPersisted}`);
+}
+```
+
+{% Aside %} Los nombres de API para *verificar* si el almacenamiento de su sitio ya se marcó como persistente y para *solicitar* almacenamiento persistente son muy similares. La forma en que recuerdo la diferencia es que `persisted()` está en tiempo pasado, y se utiliza para comprobar si ya está persisten**te**. Mientras que `persist()` está en tiempo presente y lo solicita en el presente. {% endAside %}
+
+### ¿Cómo se concede el permiso?
+
+El almacenamiento persistente se trata como un [permiso](https://storage.spec.whatwg.org/#persistence). Los navegadores utilizan diferentes factores para decidir si otorgan permisos de almacenamiento persistentes.
+
+#### Chrome y otros navegadores basados en Chromium
+
+Chrome y la mayoría de los navegadores basados en Chromium manejan automáticamente la solicitud de permiso y no muestran ningún mensaje al usuario. En cambio, si un sitio se considera importante, el permiso de almacenamiento persistente se otorga automáticamente; de lo contrario, se niega silenciosamente.
+
+Las heurísticas para determinar si un sitio es importante incluyen:
+
+- ¿Qué tan alto es el nivel de participación del sitio?
+- ¿El sitio ha sido instalado o marcado como favorito?
+- ¿Se le ha otorgado permiso al sitio para mostrar notificaciones?
+
+Si la solicitud fue negada, se puede solicitar nuevamente más tarde y se evaluará utilizando la misma heurística.
+
+#### Firefox
+
+Firefox delega la solicitud de permiso al usuario. Cuando se solicita el almacenamiento persistente, se le solicita al usuario mediante una ventana emergente de IU que le pregunta si permitirá que el sitio almacene datos en un almacenamiento persistente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o8W7pNTZ5dFKeDg2cmvA.jpg", alt="Una ventana emergente que muestra Firefox cuando un sitio solicita el almacenamiento persistente.", width="428", height="177" %} <figcaption> Una ventana emergente que muestra Firefox cuando un sitio solicita el almacenamiento persistente.</figcaption></figure>
+
+## ¿Qué almacenamiento está protegido por almacenamiento persistente?
+
+Si se otorga el permiso de almacenamiento persistente, el navegador no desalojará los datos almacenados en:
+
+- API de Cache
+- Cookies
+- Almacenamiento DOM (almacenamiento local)
+- API de File Systems (sistema de archivos del navegador y en un espacio aislado)
+- IndexedDB
+- Service workers
+- Caché de aplicaciones (obsoleto, no debe usarse)
+- WebSQL (obsoleto, no debe usarse)
+
+## Cómo desactivar el almacenamiento persistente
+
+En este momento, no existe una forma programática de decirle al navegador que ya no necesita almacenamiento persistente.
+
+## Conclusión
+
+La investigación del equipo de Chrome muestra que, aunque es posible, Chrome rara vez borra automáticamente los datos almacenados. Para proteger los datos críticos que pueden no almacenarse en la nube, o que resultarán en una pérdida significativa de datos, el almacenamiento persistente puede ser una herramienta útil para garantizar que el navegador no elimine tus datos cuando el dispositivo local se enfrenta a una presión causada por el almacenamiento. Y recuerda, solicita el almacenamiento persistente solo cuando sea más probable que el usuario lo desee.
+
+### Gracias
+
+Un agradecimiento especial a Victor Costan y Joe Medley por revisar este artículo. Gracias a Chris Wilson, quien escribió la versión original de este artículo que apareció por primera vez en WebFundamentals.
+
+Imagen de héroe de Umberto en [Unsplash](https://unsplash.com/photos/jXd2FSvcRr8)
diff --git a/src/site/content/es/blog/preconnect-and-dns-prefetch/index.md b/src/site/content/es/blog/preconnect-and-dns-prefetch/index.md
new file mode 100644
index 00000000000..72d8ab8e529
--- /dev/null
+++ b/src/site/content/es/blog/preconnect-and-dns-prefetch/index.md
@@ -0,0 +1,134 @@
+---
+title: Establecer conexiones de red tempranas para mejorar la velocidad percibida de la página
+subhead: Obtenga más información sobre las sugerencias de recursos rel=preconnect y rel=dns-prefetch y cómo usarlas.
+date: 2019-07-30
+hero: image/admin/Dyccd1RLN0fzhjPXswmL.jpg
+alt: La creación de Adán pintada por Miguel Ángel en el techo de la Capilla Sixtina
+authors:
+  - mihajlija
+description: Obtenga más información sobre las sugerencias de recursos rel=preconnect y rel=dns-prefetch y cómo usarlas.
+tags:
+  - blog
+  - performance
+---
+
+Antes de que el navegador pueda solicitar un recurso de un servidor, debe establecer una conexión. Establecer una conexión segura implica tres pasos:
+
+- Buscar el nombre de dominio y resolverlo en una dirección IP.
+
+- Configurar una conexión al servidor.
+
+- Cifrar la conexión por seguridad.
+
+En cada uno de estos pasos, el navegador envía un dato a un servidor y el servidor envía una respuesta. Ese viaje, desde el origen hasta el destino y de regreso, se denomina [viaje de ida y vuelta](https://developer.mozilla.org/docs/Glossary/Round_Trip_Time_(RTT)).
+
+Dependiendo de las condiciones de la red, un solo viaje de ida y vuelta puede llevar mucho tiempo. El proceso de configuración de la conexión puede implicar hasta tres viajes de ida y vuelta (y más en casos no optimizados).
+
+Hacernos cargo de todo eso con anticipación hace que las aplicaciones se sientan mucho más rápidas. Esta publicación explica cómo lograr eso con dos sugerencias de recursos: `<link rel=preconnect>` y `<link rel=dns-prefetch>`.
+
+## Establecer conexiones tempranas con `rel=preconnect`
+
+Los navegadores modernos hacen [todo lo posible para anticipar](https://www.igvita.com/posa/high-performance-networking-in-google-chrome/#tcp-pre-connect) qué conexiones necesitará una página, pero no pueden predecirlas todas de manera confiable. La buena noticia es que puede darles una sugerencia (un recurso 😉).
+
+Agregar `rel=preconnect` a un `<link>` informa al navegador que su página tiene la intención de establecer una conexión con otro dominio y que desea que el proceso comience lo antes posible. Los recursos se cargarán más rápido porque el proceso de configuración ya se ha completado cuando el navegador los solicita.
+
+Las sugerencias de recursos obtienen su nombre porque no son instrucciones obligatorias. Proporcionan la información sobre lo que le gustaría que suceda, pero, en última instancia, depende del navegador decidir si ejecutarlos. Configurar y mantener una conexión abierta es mucho trabajo, por lo que el navegador puede optar por ignorar las sugerencias de recursos o ejecutarlas parcialmente según la situación.
+
+Informar al navegador de su intención es tan simple como agregar una etiqueta `<link>` a su página:
+
+```html
+<link rel="preconnect" href="https://example.com">
+```
+
+{% Img src="image/admin/988BgvmiVEAp2YVKt2jq.png", alt="Un diagrama que muestra cómo la descarga no se inicia durante un tiempo después de que se establece la conexión.", width="800", height="539" %}
+
+Puede acelerar el tiempo de carga entre 100 y 500 ms al establecer conexiones tempranas con importantes orígenes de terceros. Estas cifras pueden parecer pequeñas, pero marcan la diferencia en la forma en que los [usuarios perciben el rendimiento de la página web](/rail/#focus-on-the-user).
+
+{% Aside %} chrome.com [mejoró el tiempo de interacción](https://twitter.com/addyosmani/status/1090874825286000640) en casi 1 s al preconectarse a orígenes importantes. {% endAside %}
+
+## Casos de uso para `rel=preconnect`
+
+### Saber en *dónde*, pero no *lo que* buscas
+
+Debido a las dependencias versionadas, a veces se termina en una situación en la que se sabe que se va a solicitar un recurso de una CDN en particular, pero no la ruta exacta.
+
+<figure>{% Img src="image/admin/PsP4qymb1gIp8Ip2sD9W.png", alt="La URL de un script con el nombre de la versión", width="450", height="50" %} <figcaption>Ejemplo de una URL versionada.</figcaption></figure>
+
+El otro caso común es la carga de imágenes desde una [CDN de imágenes](/image-cdns), donde la ruta exacta de una imagen depende de consultas multimedia o verificaciones de funciones en tiempo de ejecución en el navegador del usuario.
+
+<figure>{% Img src="image/admin/Xx4ai7tzSq12DJsQXaL1.png", alt="Una URL de CDN de imagen con los parámetros size=300x400 y quality=auto.", width="800", height="52" %} <figcaption>Ejemplo de una URL de CDN de imagen.</figcaption></figure>
+
+En estas situaciones, si el recurso que va a buscar es importante, querrá ahorrar tanto tiempo como sea posible conectándose previamente al servidor. El navegador no descargará el archivo hasta que su página lo solicite, pero al menos puede manejar los aspectos de conexión con anticipación, evitando que el usuario tenga que esperar varios viajes de ida y vuelta.
+
+### Streaming de contenido multimedia
+
+Otro ejemplo en el que es posible que desee ahorrar algo de tiempo en la fase de conexión, pero no necesariamente comenzar a recuperar contenido de inmediato, es cuando se transmite contenido multimedia desde un origen diferente.
+
+Dependiendo de cómo maneje su página el contenido transmitido, es posible que desee esperar hasta que sus scripts se hayan cargado y estén listos para procesar la transmisión. La conexión previa lo ayuda a reducir el tiempo de espera a un solo viaje de ida y vuelta una vez que esté listo para comenzar a buscar.
+
+## Cómo implementar `rel=preconnect`
+
+Una forma de iniciar una `preconnect` es agregar una etiqueta `<link>` a la `<head>` del documento.
+
+```html
+<head>
+    <link rel="preconnect" href="https://example.com">
+</head>
+```
+
+La conexión previa solo es efectiva para dominios que no sean el dominio de origen, por lo que no debe usarla para su sitio.
+
+{% Aside 'caution' %} Preconéctese solo a los dominios críticos que usará pronto, ya que el navegador cierra cualquier conexión que no se use en 10 segundos. La conexión previa innecesaria puede retrasar otros recursos importantes, así que limite la cantidad de dominios preconectados y [pruebe el impacto que tiene la conexión previa](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/). {% endAside %}
+
+También puede iniciar una conexión previa a través del [encabezado `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link) HTTP:
+
+`Link: <https://example.com/>; rel=preconnect`
+
+{% Aside %} Una ventaja de especificar una sugerencia de conexión previa en el encabezado HTTP es que no depende del análisis del marcado y puede activarse mediante solicitudes de hojas de estilo, scripts y más. Por ejemplo, Google Fonts envía un encabezado `Link` en la respuesta de la hoja de estilo para preconectarse al dominio que aloja los archivos de fuentes. {% endAside %}
+
+Algunos tipos de recursos, como las fuentes, se cargan de [modo anónimo](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements). Para ellos, debe establecer el atributo `crossorigin` con la sugerencia de `preconnect`:
+
+```html
+<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
+```
+
+Si omite el atributo `crossorigin`, el navegador solo realiza la búsqueda de DNS.
+
+## Resolver el nombre de dominio temprano con `rel=dns-prefetch`
+
+Una persona recuerda los sitios por sus nombres, pero los servidores los recuerdan por direcciones IP. Por eso existe el sistema de nombres de dominio (DNS). El navegador utiliza DNS para convertir el nombre del sitio en una dirección IP. Este proceso ([resolución de nombres de dominio](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/)) es el primer paso para establecer una conexión.
+
+Si una página necesita establecer conexiones con muchos dominios de terceros, conectarlos previamente a todos resulta contraproducente. La sugerencia `preconnect` se usa mejor solo para las conexiones más críticas. Para el resto, use `<link rel=dns-prefetch>` para ahorrar tiempo en el primer paso, la búsqueda de DNS, que suele tardar entre [20 y 120 ms](https://www.keycdn.com/support/reduce-dns-lookups).
+
+La resolución de DNS se inicia de manera similar a la `preconnect`: agregando una etiqueta `<link>` a la `<head>` del documento.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[La compatibilidad del navegador con `dns-prefetch`](https://caniuse.com/#search=dns-prefetch) es ligeramente diferente a la [compatibilidad con](https://caniuse.com/#search=preconnect) [`preconnect`](https://caniuse.com/#search=preconnect), por lo que `dns-prefetch` puede servir como una alternativa para los navegadores que no admiten `preconnect`.
+
+{% Compare 'better' %}
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+{% CompareCaption %} Para implementar de forma segura la alternativa, utilice etiquetas de enlace independientes. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```html
+<link rel="preconnect dns-prefetch" href="http://example.com">
+```
+
+{% CompareCaption %} La implementación de la alternativa  `dns-prefetch` en la misma etiqueta `<link>` provoca un error en Safari donde la sugerencia `preconnect` se cancela. {% endCompareCaption %}
+
+{% endCompare %}
+
+## Conclusión
+
+Estas dos sugerencias de recursos son útiles para mejorar la velocidad de la página cuando sabe que pronto descargará algo de un dominio de terceros, pero no conoce la URL exacta del recurso. Los ejemplos incluyen CDN que distribuyen bibliotecas, imágenes o fuentes de JavaScript. Tenga en cuenta las limitaciones, use `preconnect` solo para los recursos más importantes, confíe en `dns-prefetch` para el resto y mida siempre el impacto en el mundo real.
diff --git a/src/site/content/es/blog/prefers-color-scheme/index.md b/src/site/content/es/blog/prefers-color-scheme/index.md
new file mode 100644
index 00000000000..f8deebac4ee
--- /dev/null
+++ b/src/site/content/es/blog/prefers-color-scheme/index.md
@@ -0,0 +1,455 @@
+---
+layout: post
+title: 'prefers-color-scheme: hola oscuridad, mi vieja amiga'
+subhead: "¿Sobrevalorado o necesario? Aprenda todo sobre el modo oscuro y cómo utilizarlo en beneficio de sus usuarios."
+authors:
+  - thomassteiner
+date: 2019-06-27
+updated: 2020-08-02
+hero: image/admin/dgDcIJUyuWB5xNn9CODd.jpg
+hero_position: bottom
+alt: Foto del contorno de una montaña durante la noche, foto de Nathan Anderson en Unsplash.
+description: Foto del contorno de una montaña durante la noche, foto de Nathan Anderson en Unsplash.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## Introducción
+
+{% Aside 'note' %} Investigué mucho sobre la historia y la teoría del modo oscuro, si solo le interesa trabajar con el modo oscuro, siéntase libre de [omitir la introducción](#activating-dark-mode-in-the-operating-system). {% endAside %}
+
+### El modo oscuro previo al *Modo oscuro*
+
+<figure data-float="right">{% Img src="image/admin/fmdRPm6K5SXiIRLgyz4y.jpg", alt="Pantalla verde de la computadora", width="233", height="175" %} <figcaption>Pantalla verde (<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">Fuente</a>)</figcaption></figure>
+
+Completamos el círculo con el modo oscuro. En los inicios de la informática doméstica, el modo oscuro no era una cuestión de elección, sino un hecho: los monitores monocromáticos <abbr title="Cathode-Ray Tube">CRT</abbr> para computadoras funcionaban emitiendo haces de electrones sobre una pantalla fosforescente y el fósforo utilizado en los primeros CRT era verde. Debido a que el texto se mostraba en verde y el resto de la pantalla en negro, estos modelos frecuentemente se denominaban [pantallas verdes](https://commons.wikimedia.org/wiki/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg).
+
+<figure data-float="left">{% Img src="image/admin/l9oDlIO59oyJiXVegxIV.jpg", alt="Procesamiento de texto oscuro sobre blanco", width="222", height="175" %} <figcaption>Oscuridad sobre blanco (<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">Fuente</a>)</figcaption></figure>
+
+Los monitores CRT de color que se introdujeron posteriormente mostraron diferentes colores mediante el uso de fósforos rojos, verdes y azules. Para crear el blanco se activaban los tres fósforos simultáneamente. Con la llegada de la [edición por computadora](https://en.wikipedia.org/wiki/Desktop_publishing) más sofisticada de <abbr title="What You See Is What You Get">WYSIWYG</abbr>, se popularizó la idea de hacer que el documento virtual se pareciera a una hoja de papel física.
+
+<figure data-float="right">{% Img src="image/admin/lnuLLcQzIF7r08lt479k.png", alt="Página web oscura en blanco en el navegador WorldWideWeb", width="233", height="175" %}<figcaption> El navegador WorldWideWeb (<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">Fuente</a>)</figcaption></figure>
+
+En esta época comenzó la tendencia de diseño *oscuro sobre blanco*, que se trasladó a la [primera web basada en documentos](http://info.cern.ch/hypertext/WWW/TheProject.html). El primer navegador de la historia, [WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb) (recordemos que [el CSS aún no se había inventado](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History)), [mostraba las páginas web](https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png) de esta manera. Dato curioso: el segundo navegador de la historia, [Navegador de modo de línea](https://en.wikipedia.org/wiki/Line_Mode_Browser) -un navegador basado en una terminal- era verde sobre oscuro. Hoy en día, las páginas y aplicaciones web se diseñan normalmente con texto oscuro sobre fondo claro, una suposición básica que también está codificada en las hojas de estilo de los agentes de usuario, incluyendo la de [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css).
+
+<figure data-float="left">{% Img src="image/admin/zCdyRdnAnbrB7aAB0TQi.jpg", alt="El smartphone se utiliza mientras está acostado en la cama", width="262", height="175" %} <figcaption>Smartphone utilizado en la cama (Fuente: Unsplash)</figcaption></figure>
+
+Los días de las pantallas CRT quedaron atrás. El consumo y la creación de contenidos se trasladaron a los dispositivos móviles que utilizan pantallas <abbr title="Pantalla de cristal líquido">LCD</abbr> o <abbr title="Diodo emisor de luz orgánico de matriz activa">AMOLED</abbr> de bajo consumo. Las computadoras, las tabletas y los smartphones, más pequeños y transportables, dieron lugar a nuevos patrones de uso. Las tareas de ocio, como la navegación por Internet, la codificación por diversión y los juegos de alta gama, con frecuencia se llevan a cabo después de las horas de trabajo en entornos poco iluminados. La gente incluso disfruta de sus dispositivos en sus camas durante la noche. Cuanto más utilicen las personas sus dispositivos en la oscuridad, más se popularizará la idea de volver a los orígenes de la *luz en la oscuridad*.
+
+### Por qué el modo oscuro
+
+#### El modo oscuro obedece a razones estéticas
+
+Cuando a la gente se le pregunta [por qué le gusta o quiere el modo oscuro](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d), la respuesta más popular es que *"es más cómodo para los ojos"*, seguido de *"es elegante y hermoso"*. Apple, en su [documentación para desarrolladores sobre el Modo oscuro](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface), escribe explícitamente: *"La elección de activar una apariencia clara u oscura es una cuestión estética para la mayoría de los usuarios, y puede no estar relacionada con las condiciones de iluminación ambiental".*
+
+{% Aside 'note' %} Obtenga más información sobre [la investigación de usuarios sobre por qué las personas quieren el modo oscuro y cómo lo usan](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d) . {% endAside %}
+
+<figure data-float="right">{% Img src="image/admin/WZ9I5g1YGG6S1TjygEIq.png", alt="CloseView en Mac OS System 7 con modo 'Blanco sobre Negro'", width="193", height="225" %} <figcaption>Sistema 7 CloseView (<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">Fuente</a>)</figcaption></figure>
+
+#### El modo oscuro como herramienta de accesibilidad
+
+También hay personas que realmente *necesitan* el modo oscuro y lo utilizan como otra herramienta de accesibilidad, por ejemplo, los usuarios con problemas de visión. La primera vez que encontré una herramienta de accesibilidad de este tipo fue la función *CloseView* de [System 7](https://en.wikipedia.org/wiki/System_7), que tenía una opción para *Negro sobre blanco* y *Blanco sobre negro*. Aunque System 7 era compatible con el color, la interfaz de usuario predeterminada aún era en blanco y negro.
+
+Estas implementaciones basadas en la inversión demostraron sus deficiencias una vez que se introdujo el color. La investigación realizada por Szpiro *et al.* sobre [cómo acceden las personas con problemas de visión a los dispositivos de cómputo](https://dl.acm.org/citation.cfm?id=2982168) mostró que a todos los usuarios entrevistados no les gustaban las imágenes invertidas, pero que muchos preferían el texto claro sobre un fondo oscuro. Apple tiene en cuenta esta preferencia de los usuarios con una función llamada [Inversión inteligente](https://www.apple.com//accessibility/iphone/vision/), que invierte los colores de la pantalla, excepto en el caso de las imágenes, las redes sociales y algunas aplicaciones que utilizan estilos de color oscuro.
+
+Una forma especial de visión deficiente es el Síndrome visual por computadora, también conocido como Tensión ocular digital, que se [define](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1475-1313.2011.00834.x) como *"la combinación de problemas oculares y visuales asociados al uso de computadoras (incluyendo computadoras de escritorio, portátiles y tabletas) y otras pantallas electrónicas (por ejemplo, smartphones y dispositivos electrónicos de lectura)"*. Se ha [propuesto](https://bmjopen.bmj.com/content/5/1/e006748) que el uso de dispositivos electrónicos por parte de los adolescentes, especialmente por la noche, incrementa el riesgo de que la duración del sueño sea menor, la latencia de inicio del sueño sea mayor y la deficiencia de sueño sea mayor. Además, se tiene conocimiento de que la exposición a la luz azul está implicada en la regulación del ritmo circadiano y del ciclo del sueño, y que los entornos con luz irregular pueden conducir a la privación del sueño, lo que puede afectar al estado de ánimo y al rendimiento en las tareas, según una investigación de Rosenfield. Para limitar estos efectos negativos, reducir la luz azul ajustando la temperatura de color de la pantalla mediante funciones como [Night Shift](https://support.apple.com/HT207570) de iOS o [Luz nocturna](https://support.google.com/pixelphone/answer/7169926?) de Android puede ayudar, así como evitar las luces brillantes o irregulares en general mediante temas o modos oscuros.
+
+#### Ahorro de energía en el modo oscuro de las pantallas AMOLED
+
+Finalmente, se sabe que el modo oscuro ahorra *mucha* energía en las pantallas <abbr title="Diodo emisor de luz orgánico de matriz activa">AMOLED.</abbr> Los estudios de casos de Android que se centraron en aplicaciones populares de Google como YouTube han demostrado que el ahorro de energía puede ser de hasta un 60%. El video a continuación tiene más detalles sobre estos estudios de caso y el ahorro de energía por aplicación.
+
+<figure data-size="full">{% YouTube id='N_6sPd0Jd3g', startTime='305' %}</figure>
+
+## Activación del modo oscuro en el sistema operativo
+
+Ahora que se han explicado los antecedentes de por qué el modo oscuro es tan importante para muchos usuarios, vamos a repasar cómo se puede hacer uso de él.
+
+<figure data-float="left">{% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Configuración del modo oscuro de Android Q", width="218", height="250" %}<figcaption> Configuración del tema oscuro de Android Q</figcaption></figure>
+
+Los sistemas operativos que son compatibles con el modo oscuro o el tema oscuro suelen tener una opción para activarlo en algún lugar de la configuración. En macOS X, está en la sección *General* de las preferencias del sistema y se llama *Apariencia* (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lUAnDhiGiZxigDbCqfn1.png' | imgix }}">captura de pantalla</a>), y en Windows 10, está en la sección *Colores* y se llama *Elige tu color* (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ahr8nkFttRPCe4RH8IEk.png' | imgix }}">captura de pantalla</a>). En el caso de Android Q, se encuentra en *Pantalla* como interruptor de palanca *Tema oscuro* (<a href="{{ 'image/admin/Yh6SEoWDK1SbqcGjlL6d.png' | imgix }}">captura de pantalla</a>), y en iOS 13, se puede cambiar la *Apariencia* en la sección *Pantalla y brillo* de la configuración (<a href="{{ 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K0QTu4Elw1ETabtoJjZ1.jpg' | imgix }}">captura de pantalla</a>).
+
+## La consulta de medios de `prefers-color-scheme`
+
+Un último fragmento de la teoría antes de continuar. [Las consultas multimedia](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries) permiten a los autores probar y consultar valores o características como el agente de usuario o el dispositivo de visualización, independientemente del documento que se muestra. Se utilizan en la regla CSS `@media` para aplicar de forma condicional estilos a un documento, y en otros contextos y lenguajes, como HTML y JavaScript. [Consultas de medios Nivel 5](https://drafts.csswg.org/mediaqueries-5/) introduce las denominadas características multimedia de preferencia del usuario, es decir, una forma en que los sitios detectan la forma preferida por el usuario para mostrar el contenido.
+
+{% Aside 'note' %} ☝️ Una característica de los medios de preferencia de los usuarios es `prefers-reduced-motion`, lo que le permite detectar el deseo de menos movimiento en una página. <a href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" data-md-type="link">Escribí sobre `prefers-reduced-motion`</a> anteriormente. {% endAside %}
+
+La función multimedia [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) se utiliza para detectar si el usuario solicitó que la página utilice un tema de color claro u oscuro. Funciona con los siguientes valores:
+
+- `light`: Indica que el usuario notificó al sistema que prefiere una página con un tema claro (texto oscuro sobre fondo claro).
+- `dark`: Indica que el usuario notificó al sistema que prefiere una página con un tema oscuro (texto claro sobre fondo oscuro).
+
+{% Aside 'note' %} Una versión previa de la especificación incluía un tercer valor, `no-preference`. Su objetivo era indicar que el usuario no había manifestado ninguna preferencia en el sistema. Dado que ningún navegador lo implementó, el valor fue [eliminado](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976) de la especificación. {% endAside%}
+
+## Compatibilidad con el modo oscuro
+
+### Cómo saber si el navegador es compatible con el modo oscuro
+
+Dado que el modo oscuro se reporta por medio de una consulta de medios, se puede verificar fácilmente si el navegador actual es compatible con el modo oscuro al verificar si la consulta de medios `prefers-color-scheme` coincide en absoluto. Observe que no incluyo ningún valor, sino que simplemente verifico si la consulta de medios coincide.
+
+```js
+if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+  console.log('🎉 Dark mode is supported');
+}
+```
+
+Cuando se redactó este documento, `prefers-color-scheme` era compatible, tanto en el escritorio como en el dispositivo móvil (cuando estaba disponible), con Chrome y Edge a partir de la versión 76, con Firefox a partir de la versión 67 y con Safari a partir de la versión 12.1 en macOS y de la versión 13 en iOS. Para el resto de navegadores, puede consultar las [tablas de compatibilidad Puedo usar](https://caniuse.com/#feat=prefers-color-scheme).
+
+{% Aside 'note' %} Hay un elemento personalizado [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) disponible que agrega compatibilidad con el modo oscuro a los navegadores más antiguos. Escribí sobre ello [más abajo en este artículo](#the-lessdark-mode-togglegreater-custom-element). {% endAside%}
+
+### Conocer las preferencias del usuario durante la solicitud
+
+El encabezado del cliente hint [`Sec-CH-Prefers-Color-Scheme`](/user-preference-media-features-headers/) permite que los sitios obtengan las preferencias de combinación de colores del usuario de forma opcional en el momento de la solicitud, lo que permite a los servidores estar en los estilos integrados en el código correctos de CSS y, por lo tanto, evitar un efecto flash sobre un tema de color incorrecto.
+
+### Modo oscuro en la práctica
+
+Finalmente veamos cómo se ve en la práctica la compatibilidad con el modo oscuro. Al igual que con el [Highlander](https://en.wikipedia.org/wiki/Highlander_(film)), en el modo oscuro *solo puede haber uno*: oscuro o claro, ¡pero nunca ambos! ¿Por qué menciono esto? Porque este hecho debe tener un impacto en la estrategia de carga. **No obligue a los usuarios a descargar el CSS en la ruta de renderización crítica que es para un modo que no utilizan actualmente.** Para optimizar la velocidad de carga, dividí mi CSS para la aplicación de ejemplo que muestra las siguientes recomendaciones prácticas en tres partes para [deferir el CSS no crítico](/defer-non-critical-css/):
+
+- `style.css` que contiene reglas genéricas que se utilizan de forma universal en el sitio.
+- `dark.css` que contiene solo las reglas necesarias para utilizar el modo oscuro.
+- `light.css` que contiene solo las reglas necesarias para utilizar el modo ligero.
+
+### Estrategia de carga
+
+Los dos últimos, `light.css` y `dark.css`, se cargan condicionalmente con una consulta `<link media>`. Inicialmente, [no todos los navegadores son compatibles con `prefers-color-scheme`](https://caniuse.com/#feat=prefers-color-scheme) (que se puede detectar usando el patrón [anterior](#finding-out-if-dark-mode-is-supported-by-the-browser)), lo que resuelvo de forma dinámica al cargar el archivo `light.css` de forma predeterminada mediante un elemento `<link rel="stylesheet">` insertado de forma condicional en un script de estilos integrados en el código minúsculo (light es una elección arbitraria, también podría haber configurado dark como experiencia predeterminada). Para evitar un [flash de contenido sin estilo](https://en.wikipedia.org/wiki/Flash_of_unstyled_content), oculté el contenido de la página hasta que `light.css` se cargó.
+
+```html
+<script>
+  // If `prefers-color-scheme` is not supported, fall back to light mode.
+  // In this case, light.css will be downloaded with `highest` priority.
+  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+    document.documentElement.style.display = 'none';
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
+    );
+  }
+</script>
+<!--
+  Conditionally either load the light or the dark stylesheet. The matching file
+  will be downloaded with `highest`, the non-matching file with `lowest`
+  priority. If the browser doesn't support `prefers-color-scheme`, the media
+  query is unknown and the files are downloaded with `lowest` priority (but
+  above I already force `highest` priority for my default light experience).
+-->
+<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
+<link
+  rel="stylesheet"
+  href="/light.css"
+  media="(prefers-color-scheme: light)"
+/>
+<!-- The main stylesheet -->
+<link rel="stylesheet" href="/style.css" />
+```
+
+### Arquitectura de la hoja de estilo
+
+Utilizo al máximo las [variables de CSS](https://developer.mozilla.org/docs/Web/CSS/var), esto permite que mi `style.css` genérico  sea, bueno, genérico, y que toda la personalización del modo claro u oscuro ocurra en los otros dos archivos `dark.css` y `light.css`. A continuación puede ver un fragmento de los estilos reales, pero debería ser suficiente para transmitir la idea general. Declaro dos variables, `--color` y {`-⁠-⁠background-color` que esencialmente crean un tema de línea de base *oscuro sobre claro* y *claro sobre oscuro*.
+
+```css
+/* light.css: 👉 dark-on-light */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+}
+```
+
+```css
+/* dark.css: 👉 light-on-dark */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+}
+```
+
+En mi `style.css`, utilizo estas variables en la regla `body { ... }`. Como están definidas en la pseudoclase [`:root` de CSS](https://developer.mozilla.org/docs/Web/CSS/:root), un selector que en HTML representa el elemento `<html>`, que es idéntico al selector `html`, excepto que su especificidad sea mayor, se convierten en una cascada, lo que me permite declarar variables CSS globales.
+
+```css
+/* style.css */
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  color: var(--color);
+  background-color: var(--background-color);
+}
+```
+
+En el ejemplo del código anterior, probablemente notó una propiedad [`color-scheme`](https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme) con el valor separado por espacios `light dark`.
+
+Esto le indica al navegador cuáles son los temas de color que admite mi aplicación y le permite activar variantes especiales de la hoja de estilos del agente de usuario, lo cual es útil para, por ejemplo, permitir que el navegador represente los campos del formulario con un fondo oscuro y un texto claro, para ajustar las barras de desplazamiento o habilitar un color de resaltado que tenga en cuenta el tema. Los detalles exactos de `color-scheme` se especifican en [Módulo de ajuste cromático de CSS en el nivel 1](https://drafts.csswg.org/css-color-adjust-1/).
+
+{% Aside 'note' %} 🌒 Obtenga más información sobre [lo que realmente hace el `color-scheme`](/color-scheme/) . {% endAside %}
+
+Todo lo demás es solo una cuestión de definir variables CSS para las cosas que importan en mi sitio. La organización semántica de estilos ayuda mucho cuando se trabaja con el modo oscuro. Por ejemplo, en lugar de `-⁠-⁠highlight-yellow` , considere llamar a la variable `-⁠-⁠accent-color` , ya que "amarillo" puede no ser amarillo en el modo oscuro o viceversa. A continuación se muestra un ejemplo de algunas variables más que utilizo en mi ejemplo.
+
+```css
+/* dark.css */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+  --link-color: rgb(0, 188, 212);
+  --main-headline-color: rgb(233, 30, 99);
+  --accent-background-color: rgb(0, 188, 212);
+  --accent-color: rgb(5, 5, 5);
+}
+```
+
+```css
+/* light.css */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+  --link-color: rgb(0, 0, 238);
+  --main-headline-color: rgb(0, 0, 192);
+  --accent-background-color: rgb(0, 0, 238);
+  --accent-color: rgb(250, 250, 250);
+}
+```
+
+### Ejemplo completo
+
+En el siguiente [Glitch](https://dark-mode-baseline.glitch.me/) incrustado, podrá ver el ejemplo completo con el que se ponen en práctica los conceptos anteriores. Pruebe a activar el modo oscuro en la [configuración de su sistema operativo](#activating-dark-mode-in-the-operating-system) y vea cómo reacciona la página.
+
+<div style="height: 900px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://glitch.com/embed/#!/embed/dark-mode-baseline?path=style.css&amp;previewSize=100&amp;attributionHidden=true' } %}</div>
+
+### Impacto de la carga
+
+Cuando juegue con este ejemplo, podrá ver por qué cargo mi `dark.css` y `light.css` por medio de consultas de medios. Intente activar el modo oscuro y vuelva a cargar la página: las hojas de estilo concretas que no coincidan en ese momento se seguirán cargando, pero con la prioridad más baja, para que nunca compitan con los recursos que necesita el sitio en ese momento.
+
+{% Aside 'note' %} 😲 Obtenga más información sobre [por qué los navegadores descargan hojas de estilo con consultas de medios que no coinciden](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513) . {% endAside %}
+
+<figure>{% Img src="image/admin/flTdLliru6GmqqlOKjNx.png", alt="Diagrama de carga de red que muestra cómo en el modo claro el CSS del modo oscuro se carga con la prioridad más baja", width="800", height="417" %}<figcaption> El sitio en modo claro carga el CSS en modo oscuro con la prioridad más baja.</figcaption></figure>
+
+<figure>{% Img src="image/admin/IDs6Le0VBhHu9QEDdxL6.png", alt="Diagrama de carga de red que muestra cómo en el modo oscuro el CSS del modo claro se carga con la prioridad más baja", width="800", height="417" %}<figcaption> El sitio en modo oscuro carga el CSS en modo claro con la prioridad más baja.</figcaption></figure>
+
+<figure>{% Img src="image/admin/zJqu5k3TIgcZf1OHWWIq.png", alt="Diagrama de carga de red que muestra cómo en el modo claro predeterminado el CSS del modo oscuro se carga con la prioridad más baja", width="800", height="417" %}<figcaption> El sitio con el modo claro predeterminado en un navegador que no admite <code>prefers-color-scheme</code> carga el CSS en modo oscuro con la prioridad más baja.</figcaption></figure>
+
+### Cómo reaccionar ante los cambios en el modo oscuro
+
+Como cualquier otro cambio de consulta de medios, los cambios de modo oscuro se pueden suscribir a través de JavaScript. Puede usar esto para, por ejemplo, cambiar dinámicamente el [favicon](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#provide_great_icons_tiles) de una página o cambiar el [`<meta name="theme-color">`](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#meta_theme_color_for_chrome_and_opera) que determina el color de la barra de URL en Chrome. El [ejemplo completo de](#full-example) arriba muestra esto en acción, para ver el color del tema y los cambios de favicon, abra la [demostración en una pestaña separada](https://dark-mode-baseline.glitch.me/) .
+
+```js
+  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  darkModeMediaQuery.addListener((e) => {
+    const darkModeOn = e.matches;
+    console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
+  });
+```
+
+A partir de Chromium 93 y Safari 15, puede ajustar este color basándose en una consulta de medios con el atributo `media` del elemento con el color del tema `meta`. Se elegirá el primero que coincida. Por ejemplo, puede tener un color para el modo claro y otro para el modo oscuro. Al momento de escribir esto, no se pueden definir en el manifiesto. Consulte [w3c/manifest#975 GitHub issue](https://github.com/w3c/manifest/issues/975).
+
+```html
+<meta
+  name="theme-color"
+  media="(prefers-color-scheme: light)"
+  content="white"
+/>
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+## Cómo depurar y probar el modo oscuro
+
+### La emulación de `prefers-color-scheme` en DevTools
+
+Cambiar el esquema de colores de todo el sistema operativo puede ser molesto muy rápidamente, por lo que Chrome DevTools ahora le permite emular el esquema de colores preferido por el usuario de una manera que solo afecta a la pestaña que se encuentra visible en ese momento. Abra el [Menú Comandos](https://developer.chrome.com/docs/devtools/command-menu/), comience a escribir `Rendering`, ejecute el comando `Show Rendering` y, a continuación, cambie la opción prefers-color-scheme correspondiente a la función de medios CSS.
+
+<figure>{% Img src="image/admin/RIq2z6Ja1zSzfNTHic5z.png", alt="Una captura de pantalla de la opción 'La función de emulación de medios CSS favorece el esquema de color' que se encuentra en la pestaña Renderización de Chrome DevTools", width="800", height="552" %}</figure>
+
+### Cómo hacer capturas de pantalla mediante `prefers-color-scheme` con Puppeteer
+
+[Puppeteer](https://github.com/GoogleChrome/puppeteer/) es una librería de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través del [Protocolo de DevTools](https://chromedevtools.github.io/devtools-protocol/). Con [`dark-mode-screenshot`](https://www.npmjs.com/package/dark-mode-screenshot), ofrecemos un script de Puppeteer que le permite crear capturas de pantalla de sus páginas tanto en modo oscuro como claro. Puede ejecutar este script de forma aislada, o hacer que forme parte de su suite para pruebas de integración continua (CI).
+
+```bash
+npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
+```
+
+## Prácticas recomendadas del modo oscuro
+
+### Evite el blanco puro
+
+Un pequeño detalle que tal vez haya notado es que yo no utilizo un blanco puro. En vez de eso, para evitar el brillo y la depuración contra el contenido oscuro adyacente, elijo un blanco ligeramente más oscuro. Algo como `rgb(250, 250, 250)` funcionará bien.
+
+### Cómo volver a colorear y oscurecer imágenes fotográficas
+
+Si compara las dos capturas de pantalla que aparecen a continuación, se darán cuenta de que no solo el tema principal cambió del modo *oscuro sobre claro* a *claro sobre oscura*, sino que también la imagen hero tiene un aspecto un poco diferente. Mi <em>investigación de usuarios</em> mostró que la mayoría de los encuestados prefieren imágenes ligeramente menos vibrantes y brillantes cuando el modo oscuro está activo. Me refiero a esto como *recolorización*.
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/qzzYCKNSwoJr9BBEQlR7.png", alt="Imagen hero ligeramente oscura en modo oscuro.", width="800", height="618" %} <figcaption> Imagen hero ligeramente oscura en modo oscuro. </figcaption></figure>
+  <figure>{% Img src="image/admin/41RbLRZ5wzkoVnIRJkNl.png", alt="Imagen hero normal en modo claro.", width="800", height="618" %} <figcaption> Imagen hero normal en modo claro. </figcaption></figure>
+</div>
+
+La recolorización puede lograrse mediante un filtro de CSS en mis imágenes. Utilizo un selector de CSS que coincide con todas las imágenes que no tienen `.svg` en su URL, la idea es que puedo dar a los gráficos vectoriales (iconos) un tratamiento de recolorización diferente al de mis imágenes (fotos), puede obtener más información sobre esto en el [siguiente párrafo](#vector-graphics-and-icons). Observe cómo vuelvo a utilizar una [variable de CSS](https://developer.mozilla.org/docs/Web/CSS/var), para poder cambiar posteriormente mi filtro de forma flexible.
+
+{% Aside 'note' %} 🎨 Obtenga más información sobre [la investigación de los usuarios sobre las preferencias de recolorización con el modo oscuro](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b). {% endAside %}
+
+Dado que la recolorización solo se necesita en modo oscuro, es decir, cuando `dark.css` está activo, no hay reglas equivalentes en `light.css`.
+
+```css
+/* dark.css */
+--image-filter: grayscale(50%);
+
+img:not([src*=".svg"]) {
+  filter: var(--image-filter);
+}
+```
+
+#### Personalización de las intensidades de recolorización en modo oscuro con JavaScript
+
+No todos somos iguales y la gente tiene diferentes necesidades en el modo oscuro. Al seguir el método de recolorización descrito anteriormente, puedo convertir fácilmente la intensidad de la escala de grises a una preferencia del usuario que puedo [cambiar mediante JavaScript](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript), y al establecer un valor de `0%`, también puedo desactivar la recolorización por completo. Tenga en cuenta que [`document.documentElement`](https://developer.mozilla.org/docs/Web/API/Document/documentElement) proporciona una referencia al elemento raíz del documento, es decir, el mismo elemento que puedo hacer referencia con la [pseudoclase de CSS `:root`](https://developer.mozilla.org/docs/Web/CSS/:root).
+
+```js
+const filter = 'grayscale(70%)';
+document.documentElement.style.setProperty('--image-filter', value);
+```
+
+### Invertir iconos y gráficos vectoriales
+
+Para los gráficos vectoriales, que en mi caso se utilizan como iconos a los que hago referencia por medio de elementos `<img>`, utilizo un método de recolorización diferente. Aunque la [investigación](https://dl.acm.org/citation.cfm?id=2982168) demostró que a la gente no le gusta la inversión de las fotos, funciona muy bien para la mayoría de los iconos. De nuevo, utilizo variables de CSS para determinar la cantidad de inversión en el estado normal y en el [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover).
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/JGYFpAPi4233HrEKTQZp.png", alt="Los iconos se invierten en el modo oscuro.", width="744", height="48" %} <figcaption> Los iconos se invierten en el modo oscuro. </figcaption></figure>
+  <figure>{% Img src="image/admin/W8AWbuqWthI6CfFsYunk.png", alt="Iconos normales en modo claro.", width="744", height="48" %} <figcaption> Iconos normales en modo claro. </figcaption></figure>
+</div>
+
+Observe cómo, de nuevo, solo invierto los iconos en `dark.css` pero no en `light.css`, y cómo `:hover` adopta una intensidad de inversión diferente en los dos casos para que el icono aparezca ligeramente más oscuro o ligeramente más brillante, dependiendo del modo que el usuario haya seleccionado.
+
+```css
+/* dark.css */
+--icon-filter: invert(100%);
+--icon-filter_hover: invert(40%);
+
+img[src*=".svg"] {
+  filter: var(--icon-filter);
+}
+```
+
+```css
+/* light.css */
+--icon-filter_hover: invert(60%);
+```
+
+```css
+/* style.css */
+img[src*=".svg"]:hover {
+  filter: var(--icon-filter_hover);
+}
+```
+
+### Utilice `currentColor` para los estilos integrados en el código de SVG
+
+Para los *estilos integrados en el código* de las imágenes SVG, en vez de [utilizar filtros de inversión](#invert-vector-graphics-and-icons), puede aprovechar la palabra clave de CSS [`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentColor_keyword) que representa el valor de la propiedad `color` de un elemento. Esto permite utilizar el valor `color` en propiedades que no lo incluyen de forma predeterminada. De forma práctica, si `currentColor` se utiliza como valor de los atributos SVG [`fill` o `stroke`](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes), toma su valor del valor heredado de la propiedad color. Aún mejor: esto también funciona para [`<svg><use href="..."></svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/use), por lo que puede tener recursos separados y `currentColor` seguirá aplicándose en el contexto. Tenga en cuenta que esto solo funciona para los *estilos integrados en el código* o `<use href="...">` de los SVG, pero no es que los SVG a los que se hace referencia como el `src` de una imagen o de alguna manera por medio de CSS. Usted puede ver que esto se aplica en la demostración de abajo.
+
+```html/2
+<!-- Some inline SVG -->
+<svg xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+>
+  […]
+</svg>
+```
+
+<div style="height: 950px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://glitch.com/embed/#!/embed/dark-mode-currentcolor?path=light.css&amp;previewSize=100', title: 'dark-mode-currentcolor on Glitch' } %}</div>
+
+### Transiciones sencillas entre modos
+
+El cambio de modo oscuro a modo claro o viceversa puede facilitarse gracias a que tanto `color` como `background-color` son [propiedades de CSS que se pueden animar](https://www.quackit.com/css/css3/animations/animatable_properties/). Para crear la animación es tan fácil como declarar dos `transition` para las dos propiedades. En el siguiente ejemplo se ilustra la idea general, puede experimentarla en vivo en la [demostración](https://dark-mode-baseline.glitch.me/).
+
+```css
+body {
+  --duration: 0.5s;
+   --timing: ease;
+
+  color: var(--color);
+  background-color: var(--background-color);
+
+  transition:
+    color var(--duration) var(--timing),
+    background-color var(--duration) var(--timing);
+}
+```
+
+### Dirección de las obras de arte con el modo oscuro
+
+Aunque por razones del rendimiento de la carga en general le recomiendo trabajar exclusivamente con `prefers-color-scheme` en el atributo `media` de los elementos `<link>` (en vez de en los estilos integrados en el código de las hojas de estilo), hay situaciones en las que puede querer trabajar con `prefers-color-scheme` directamente en los estilos integrados en el código HTML. La dirección de arte es una de esas situaciones. En la web, la dirección artística se ocupa de la apariencia visual general de una página y de cómo se comunica visualmente, estimula los estados de ánimo, contrasta las características y atrae psicológicamente a un público objetivo.
+
+Con el modo oscuro, depende del criterio del diseñador decidir cuál es la mejor imagen en un modo concreto y si la [recolorización de las imágenes](#photographic-images) tal vez *no* sea lo suficientemente buena. Si se utiliza con el elemento `<picture>`, el `<source>` de la imagen que se mostrará puede depender del atributo `media`. En el siguiente ejemplo, muestro el hemisferio occidental para el modo oscuro, y el hemisferio oriental para el modo claro o cuando no se indica ninguna preferencia, seleccionando de forma predeterminada el hemisferio oriental en todos los demás casos. Esto es, por supuesto, puramente ilustrativo. Active el modo oscuro en su dispositivo para ver la diferencia.
+
+```html
+<picture>
+  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
+  <source srcset="eastern.webp" media="(prefers-color-scheme: light)">
+  <img src="eastern.webp">
+</picture>
+```
+
+<div style="height: 600px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://glitch.com/embed/#!/embed/dark-mode-picture?path=index.html&amp;previewSize=100', title: 'dark-mode-picture on Glitch' } %}</div>
+
+### Modo oscuro, pero agregue una opción de exclusión
+
+Como se mencionó en la sección [por qué el modo oscuro](#why-dark-mode), el modo oscuro es una opción estética para la mayoría de los usuarios. Por lo tanto, a algunos usuarios les puede gustar tener la interfaz de usuario de su sistema operativo en modo oscuro, pero aún así prefieren ver sus páginas web como están acostumbrados a verlas. Un buen patrón es adherirse inicialmente a la señal que el navegador envía mediante `prefers-color-scheme`, pero después permitir de forma opcional que los usuarios anulen su configuración a nivel de sistema.
+
+#### El elemento personalizado `<dark-mode-toggle>`
+
+Por supuesto, puede crear el código para hacer esto usted mismo, pero también puede utilizar un elemento personalizado previamente hecho (componente web) que creé justo para este propósito. Se llama [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) y agrega un conmutador (modo oscuro: encendido/apagado) o un conmutador de tema (tema: claro/oscuro) a la página que puede personalizar completamente. La demostración que aparece a continuación muestra el elemento en acción (oh, y también le 🤫 eché un vistazo silenciosamente en todos los [otros](https://dark-mode-baseline.glitch.me/) [ejemplos](https://dark-mode-currentcolor.glitch.me/) [anteriores](https://dark-mode-picture.glitch.me/)).
+
+```html
+<dark-mode-toggle
+    legend="Theme Switcher"
+    appearance="switch"
+    dark="Dark"
+    light="Light"
+    remember="Remember this"
+></dark-mode-toggle>
+```
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/Xy3uus69HnrkRPO4EuRu.png", alt="{dark-mode-toggle0} en modo claro.", width="140", height="76" %} <figcaption> <code>&lt;dark-mode-toggle&gt;</code> en modo claro. </figcaption> {/dark-mode-toggle0}</figure>
+  <figure>{% Img src="image/admin/glRVRJpQ9hMip6MbqY9N.png", alt="{dark-mode-toggle0} en modo claro.", width="140", height="76" %} <figcaption> <code>&lt;dark-mode-toggle&gt;</code> en modo oscuro. </figcaption> {/dark-mode-toggle0}</figure>
+</div>
+
+Intente hacer clic o pulsar los controles del modo oscuro en la esquina superior derecha que aparece en la demostración que está más abajo. Si selecciona la casilla del tercer y cuarto control, verá cómo su selección de modo quedará registrada incluso cuando recargue la página. Esto permite que sus visitantes mantengan su sistema operativo en modo oscuro, pero disfruten de su sitio en modo claro o viceversa.
+
+<div style="height: 800px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html' } %}</div>
+
+## Conclusiones
+
+Trabajar con el modo oscuro y darle soporte es divertido y abre nuevas posibilidades de diseño. Para algunos de sus visitantes puede ser la diferencia entre no poder manejar su sitio y ser un usuario feliz. Hay algunos obstáculos y es necesario hacer pruebas cuidadosas, pero el modo oscuro definitivamente es una gran oportunidad para demostrar que se preocupa por todos sus usuarios. Las prácticas recomendadas que se mencionan en esta publicación y los helpers como el elemento personalizado [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) deberían hacer que confíe en su capacidad para crear una experiencia increíble en modo oscuro. [Cuéntelo en Twitter](https://twitter.com/tomayac) lo que crea y si esta publicación le ha sido útil o si también tiene sugerencias para mejorarla. ¡Gracias por leer! 🌒
+
+## Enlaces relacionados
+
+Recursos para la consulta de medios de `prefers-color-scheme`
+
+- [Página del estado de la plataforma Chrome](https://chromestatus.com/feature/5109758977638400)
+- [Error en Chromium](https://crbug.com/889087)
+- [Especificaciones del nivel 5 en las Consultas de medios](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
+
+Recursos para la `color-scheme` y la propiedad CSS:
+
+- [La propiedad de CSS `color-scheme` y la etiqueta meta](/color-scheme/)
+- [Página del estado de la plataforma Chrome](https://chromestatus.com/feature/5330651267989504)
+- [Error en Chromium](http://crbug.com/925935)
+- [Especificación en el módulo de ajuste sobre el color de CSS de Nivel 1](https://drafts.csswg.org/css-color-adjust-1/)
+- [El problema de GitHub de CSS WG para la etiqueta meta y la propiedad de CSS](https://github.com/w3c/csswg-drafts/issues/3299)
+- [El problema de GitHub del WHATWG HTML para la etiqueta meta](https://github.com/whatwg/html/issues/4504)
+
+Enlaces generales del modo oscuro:
+
+- [Diseño de materiales: tema oscuro](https://material.io/design/color/dark-theme.html)
+- [Modo oscuro en el Inspector web](https://webkit.org/blog/8892/dark-mode-in-web-inspector/)
+- [Compatibilidad con el modo oscuro en WebKit](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
+- [Normas de la Interfaz Humana para Apple: Modo oscuro](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
+
+Artículos de investigación de antecedentes para esta publicación:
+
+- [¿Qué hace en realidad el "esquema de colores compatible" con el modo oscuro? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)
+- [¡Deja que haya oscuridad! 🌚 Tal vez…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)
+- [Recolorización para el modo oscuro](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)
+
+## Agradecimientos
+
+La función multimedia `prefers-color-scheme`, la propiedad de CSS `color-scheme` y la etiqueta meta relacionada son el trabajo de implementación de 👏 [Rune Lillesveen](https://twitter.com/runeli). Rune también es coeditor de la especificación [Módulo de ajuste en el color de CSS de Nivel 1](https://drafts.csswg.org/css-color-adjust-1/). Me gustaría dar las gracias a [Lukasz Zbylut](https://www.linkedin.com/in/lukasz-zbylut/), [Rowan Merewood](https://twitter.com/rowan_m), [Chirag Desai](https://www.linkedin.com/in/chiragd/), y [Rob Dodson](https://twitter.com/rob_dodson) por sus exhaustivas revisiones de este artículo. La [estrategia de carga](#loading-strategy) es obra de [Jake Archibald](https://twitter.com/jaffathecake). [Emilio Cobos Álvarez](https://twitter.com/ecbos_) me orientó hacia el método correcto de detección `prefers-color-scheme`. El consejo con los SVG de referencia y `currentColor` provino de [Timothy Hatcher](https://twitter.com/xeenon). Por último, agradezco a los numerosos participantes anónimos de los diversos estudios de usuarios que han ayudado a dar forma a las recomendaciones de este artículo. Imagen hero hecha por [Nathan Anderson](https://unsplash.com/photos/kujXUuh1X0o).
diff --git a/src/site/content/es/blog/prefers-reduced-motion/index.md b/src/site/content/es/blog/prefers-reduced-motion/index.md
new file mode 100644
index 00000000000..849d2c1a143
--- /dev/null
+++ b/src/site/content/es/blog/prefers-reduced-motion/index.md
@@ -0,0 +1,164 @@
+---
+layout: post
+title: 'prefers-reduced-motion: A veces, menos (movimiento) es más'
+subhead: La consulta de medios prefers-reduced-motion (preferencia de movimiento reducido) detecta si el usuario ha solicitado al sistema operativo para minimizar la cantidad de animaciones o movimientos que utiliza.
+authors:
+  - thomassteiner
+description: "La consulta de medios prefers-reduced-motion (preferencia de movimiento reducido) detecta si el usuario ha solicitado que el sistema minimice la cantidad de animaciones o movimientos que utiliza. Esto es para usuarios que requieren o prefieren animaciones minimizadas; por ejemplo, las personas con trastornos vestibulares a menudo desean que las animaciones sean reducidas al mínimo."
+date: 2019-03-11
+updated: 2019-12-10
+tags:
+  - blog
+  - media-queries
+  - css
+hero: image/admin/LI2vYKZwQ98w3MLtUF8V.jpg
+alt: Tiempo transcurrido de una mujer en un tren
+feedback:
+  - api
+---
+
+No todo el mundo disfruta las animaciones decorativas o las transiciones, y algunos usuarios incluso experimentan mareos cuando se encuentran con el desplazamiento de paralaje, los efectos de zoom, etc. Chrome 74 admite la consulta de medios `prefers-reduced-motion` que le permite diseñar una variante de su sitio con movimiento reducido para los usuarios que han optado por esta preferencia.
+
+## Demasiado movimiento en la vida real y en la web
+
+El otro día, estaba patinando sobre hielo con mis hijos. Era un día hermoso, el sol brillaba y la pista de hielo estaba abarrotada de gente ⛸. El único problema con eso: no me doy muy bien con las multitudes. Con tantos objetos en movimiento, no logro concentrarme en nada, y termino perdido y con una sensación de sobrecarga visual total, casi como mirar fijamente un hormiguero 🐜.
+
+<figure>{% Img src= "image/admin/JA5v1s8gSBk70eJBB8xW.jpg", alt="Un mar de pies de gente patinando sobre hielo", width="580", height="320" %}<figcaption> Sobrecarga visual en la vida real.</figcaption></figure>
+
+Ocasionalmente, puede suceder lo mismo en la web: con anuncios parpadeantes, efectos de paralaje sofisticados, animaciones reveladoras sorprendentes, videos de reproducción automática, etc., *la web a veces puede ser bastante abrumadora*… Afortunadamente, a diferencia de la vida real, hay una solución para eso. La consulta de medios CSS, `prefers-reduced-motion` permite a los desarrolladores crear una variante de una página para los usuarios que, básicamente, prefieren que el movimiento sea reducido. Esto puede abarcar cualquier cosa, desde abstenerse de reproducir videos automáticamente hasta deshabilitar ciertos efectos puramente decorativos, hasta rediseñar completamente una página para ciertos usuarios.
+
+Antes de detallar la función a fondo, demos un paso atrás y pensemos para qué se utilizan las animaciones en la web. Si lo desea, también puede omitir la información general y [pasar directamente a los detalles técnicos](#working-with-the-media-query) a continuación.
+
+## Animación en la web
+
+La animación se utiliza a menudo para proporcionar *retroalimentación* al usuario, por ejemplo, para hacerle saber que se recibió una acción y se está procesando. Por ejemplo, en un sitio web de compras, se podría animar un producto para que "vuele" en un carrito de compras virtual, representado como un icono en la esquina superior derecha del sitio.
+
+Otro caso de uso implica el uso del movimiento para [hackear la percepción del usuario](https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3) mediante el uso de una combinación de skeleton screens, metadatos contextuales y vistas previas de imágenes de baja calidad para ocupar una gran parte del tiempo del usuario y hacer que toda la experiencia se *sienta más rápida*. La idea es dar al usuario una noción de lo que se avecina y, mientras tanto, cargar las cosas lo más rápido posible.
+
+Finalmente, existen *efectos decorativos* como degradados animados, desplazamiento de paralaje, videos de fondo y varios otros. Si bien muchos usuarios disfrutan de estas animaciones, a algunos no les gustan porque se sienten distraídos o retrasados por ellas. En el peor de los casos, los usuarios pueden incluso sufrir mareos como si fuera una experiencia de la vida real, por lo que para estos usuarios reducir las animaciones es una *necesidad de salud*.
+
+## Trastorno del espectro vestibular provocado por el movimiento
+
+Algunos usuarios experimentan [distracciones o náuseas debido al contenido animado](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). Por ejemplo, las animaciones de desplazamiento pueden causar trastornos vestibulares cuando elementos distintos del elemento principal asociado con el desplazamiento se mueven mucho. Por ejemplo, las animaciones de desplazamiento de paralaje pueden causar trastornos vestibulares porque los elementos de fondo se mueven a una velocidad diferente que los elementos de primer plano. Las reacciones del trastorno vestibular (oído interno) incluyen mareos, náuseas y migrañas, y algunas veces requieren reposo en cama para recuperarse.
+
+## Eliminar movimiento en sistemas operativos
+
+Muchos sistemas operativos han tenido configuraciones de accesibilidad para especificar una preferencia por el movimiento reducido durante mucho tiempo. Las capturas de pantalla a continuación muestran la preferencia **Reducir movimiento** de macOS Mojave y la preferencia **Eliminar animaciones** de Android Pie. Cuando están marcadas, estas preferencias hacen que el sistema operativo no use efectos decorativos como las animaciones de inicio de aplicaciones. Las propias aplicaciones pueden y deben respetar esta configuración también y eliminar todas las animaciones innecesarias.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KwuLNPefeDzUfR17EUtr.png", alt="Una captura de pantalla de la pantalla de configuración de macOS con la casilla de verificación 'Reducir movimiento' marcada.", width="398", height="300" %}</figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qed7yE6FKVQ5YXHn0TbJ.png", alt="Una captura de pantalla de la configuración de Android con la casilla de verificación 'Eliminar animaciones' marcada.", width="287", height="300" %}</figure>
+</div>
+
+## Eliminar movimiento en la web
+
+[Media Queries Level 5 también](https://drafts.csswg.org/mediaqueries-5/) lleva la preferencia del usuario de movimiento reducido a la web. Las consultas de medios permiten a los autores probar y consultar valores o características del agente de usuario o dispositivo de visualización independientemente del documento que se está procesando. La consulta de medios [`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion) se utiliza para detectar si el usuario ha establecido una preferencia de sistema operativo para minimizar la cantidad de animación o movimiento que utiliza. Puede tomar dos valores posibles:
+
+- `no-preference` : indica que el usuario no ha escogido ninguna preferencia en el sistema operativo subyacente. El valor de esta palabra clave se evalúa como `false` en el contexto booleano.
+- `reduce`: indica que el usuario ha establecido una preferencia de sistema operativo que indica que las interfaces deben minimizar el movimiento o la animación, preferiblemente hasta el punto en que se eliminan todos los movimientos no esenciales.
+
+## Trabajando con la consulta de medios
+
+{% Aside %} Consulte [¿Puedo utilizar la consulta de medios de preferencia de movimiento reducido?](https://caniuse.com/#feat=prefers-reduced-motion) para averiguar cuáles navegadores admiten `prefers-reduced-motion`. {% endAside %}
+
+Al igual que con todas las consultas de medios, `prefers-reduced-motion` puede revisarse desde un contexto CSS y desde un contexto JavaScript.
+
+Para ilustrar ambos, digamos que tengo un botón de registro importante en el que quiero que el usuario haga clic. Podría definir una animación de "vibración" que llame la atención, pero como buen ciudadano de internet, solo la reproduciré para aquellos usuarios que estén explícitamente de acuerdo con las animaciones, pero no para los demás, que pueden ser usuarios que hayan optado por no recibir animaciones o usuarios en navegadores que no comprenden la consulta de medios.
+
+```css
+/*
+  If the user has expressed their preference for
+  reduced motion, then don't use animations on buttons.
+*/
+@media (prefers-reduced-motion: reduce) {
+  button {
+    animation: none;
+  }
+}
+
+/*
+  If the browser understands the media query and the user
+  explicitly hasn't set a preference, then use animations on buttons.
+*/
+@media (prefers-reduced-motion: no-preference) {
+  button {
+    /* `vibrate` keyframes are defined elsewhere */
+    animation: vibrate 0.3s linear infinite both;
+  }
+}
+```
+
+{% Aside %}
+Si tiene una gran cantidad de CSS relacionado con la animación, puede evitar que los usuarios que optaron por no recibir animaciones lo descarguen mediante la transferencia de todo el CSS relacionado con la animación a una hoja de estilo separada que solo carga condicionalmente a través del atributo `media` en el elemento del `link` 😎: `<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">`
+{% endAside %}
+
+Para ilustrar cómo trabajar con `prefers-reduced-motion` con JavaScript, imaginemos que he definido una animación compleja con la [API de animaciones web](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) (Web Animations API). Si bien el navegador activará dinámicamente las reglas de CSS cuando cambie la preferencia del usuario, para las animaciones de JavaScript tengo que captar los cambios por mi cuenta y luego detener manualmente las animaciones potencialmente en ejecución (o reiniciarlas si el usuario me lo permite):
+
+```js
+const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+mediaQuery.addEventListener('change', () => {
+  console.log(mediaQuery.media, mediaQuery.matches);
+  // Stop JavaScript-based animations.
+});
+```
+
+Tenga en cuenta que los paréntesis alrededor de la consulta de medios real son obligatorios:
+
+{% Compare 'worse' %}
+
+```js
+window.matchMedia('prefers-reduced-motion: reduce')
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.matchMedia('(prefers-reduced-motion: reduce)')
+```
+
+{% endCompare %}
+
+## Demo
+
+He creado una pequeña demostración basada en los increíbles [🐈 gatos de estado HTTP](https://http.cat/) de Rogério Vicente. Primero, tómate un momento para apreciar la broma, es entretenida y esperaré. Ahora que ha vuelto, permítame presentarle la [demostración](https://prefers-reduced-motion.glitch.me). Cuando se desplaza hacia abajo, cada gato de estado HTTP aparece alternativamente desde el lado derecho o desde el izquierdo. Es una animación de 60 FPS suavecita, pero como se describió anteriormente, a algunos usuarios puede no gustarle o incluso marearse, por lo que la demostración está programada para respetar las `prefers-reduced-motion`. Esto incluso funciona de forma dinámica, por lo que los usuarios pueden cambiar sus preferencias sobre la marcha, sin necesidad de recargar. Si un usuario prefiere un movimiento reducido, las animaciones de revelación no necesarias desaparecen y solo queda el movimiento de desplazamiento normal. El siguiente screencast muestra la demostración en acción:
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/zWs45QPPI9C8CjF813Zx.mp4", muted=true, playsinline=true, controls=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CQAw3Ee43Dcv0JOsm9fl.png" %} <figcaption> Video de la aplicación de <a href="https://prefers-reduced-motion.glitch.me">demostración de <code>prefers-reduced-motion</code></a></figcaption></figure>
+
+## Conclusiones
+
+Respetar las preferencias del usuario es clave para los sitios web modernos, y los navegadores exponen cada vez más funciones para permitir que los desarrolladores web lo puedan hacer. Otro ejemplo lanzado es [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) (preferencia por esquema de colores), que detecta si el usuario prefiere un esquema de color claro u oscuro. Puedes leer todo sobre `prefers-color-scheme` en mi artículo [Hello Darkness, My Old Friend](/prefers-color-scheme) 🌒.
+
+El Grupo de trabajo de CSS está estandarizando actualmente más [consultas de medios de preferencias de usuario](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) como[`prefers-reduced-transparency`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency) (detecta si el usuario prefiere transparencia reducida), [`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast) (detecta si el usuario ha solicitado al sistema que aumente o disminuya la cantidad de contraste entre colores) e [`inverted-colors`](https://drafts.csswg.org/mediaqueries-5/#inverted) (detecta si el usuario prefiere que los colores sean invertidos). 👀 ¡Manténgase atento a este espacio y le informaremos de una vez cuando sean lanzadas en Chrome!
+
+## (Bonificación) Forzar movimiento reducido en todos los sitios web
+
+No todos los sitios recurrirán a `prefers-reduced-motion`, o tal vez no la cantidad suficiente para su gusto. Si, por cualquier motivo, desea detener el movimiento en todos los sitios web, puede hacerlo. Una forma de hacer que esto suceda es inyectar una hoja de estilo con el siguiente CSS en cada página web que visite. Existen varias [extensiones de navegador](https://chrome.google.com/webstore/search/user%20stylesheets?_category=extensions) (¡úselas bajo su propio riesgo!) que permiten hacer esto.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+```
+
+La forma en que esto funciona es que el CSS anterior anula la duración de todas las animaciones y transiciones a un tiempo tan corto que ni se notan. Como algunos sitios web dependen de que se ejecute una animación para que funcione correctamente (tal vez porque un cierto paso depende de la activación del [evento `animationend`](https://developer.mozilla.org/docs/Web/API/HTMLElement/animationend_event)), el enfoque más radical usando `animation: none !important;` no funcionaría. Incluso no se garantiza que el truco anterior tenga éxito en todos los sitios web (por ejemplo, no puede detener el movimiento que se inició a través de la [API de animaciones web](https://developer.mozilla.org/docs/Web/API/Web_Animations_API)), así que asegúrese de desactivarlo cuando note una interrupción.
+
+## Enlaces relacionados
+
+- Último borrador del editor de la especificación de [Consultas de medios de nivel 5.](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)
+- `prefers-reduced-motion` el [estado de la plataforma Chrome](https://www.chromestatus.com/feature/5597964353404928) .
+- `prefers-reduced-motion` [error de Chromium](http://crbug.com/722548).
+- Blink [Intención de implementar la publicación](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NZ3c9d4ivA8/BIHFbOj6DAAJ).
+
+## Agradecimientos
+
+Un agradecimiento gigantesco a [Stephen McGruer,](https://github.com/stephenmcgruer) que implementó `prefers-reduced-motion` en Chrome y, junto a [Rob Dodson,](https://twitter.com/rob_dodson) también revisó este artículo. [Imagen principal](https://unsplash.com/photos/im7Tiw1OY7c) de Hannah Cauhepe en Unsplash.
diff --git a/src/site/content/es/blog/preload-optional-fonts/index.md b/src/site/content/es/blog/preload-optional-fonts/index.md
new file mode 100644
index 00000000000..443b12de1e7
--- /dev/null
+++ b/src/site/content/es/blog/preload-optional-fonts/index.md
@@ -0,0 +1,72 @@
+---
+title: Evite cambios de diseño y parpadeos de texto invisible (FOIT) mediante la precarga de fuentes opcionales
+subhead: 'A partir de Chrome 83, link rel="preload" y font-display: opcional se pueden combinar para eliminar completamente los reacomodos desagradables en el diseño.'
+authors:
+  - houssein
+date: 2020-03-18
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
+alt: Una gran letra A de un conjunto de tipos colocada sobre una mesa blanca.
+description: |2-
+
+  Al optimizar los ciclos de renderizado, Chrome 83 elimina el cambio de diseño cuando precarga fuentes opcionales. Combinar <link rel="preload"> con font-display: optional es la forma más eficaz de garantizar un renderizado de fuentes personalizadas sin reacomodos desagradables.
+tags:
+  - blog
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+{% Aside %} En Chrome 83, se han realizado nuevas mejoras en la carga de fuentes para eliminar por completo las variaciones del diseño y el parpadeo de texto invisible (FOIT) cuando las fuentes opcionales están precargadas. {% endAside %}
+
+Al optimizar los ciclos de renderizado, Chrome 83 elimina el cambio de diseño al precargar fuentes opcionales. La combinación de `<link rel="preload">` con `font-display: optional` es la forma más eficaz de garantizar que no haya reacomodos desagradables en el diseño al renderizar fuentes personalizadas.
+
+## Compatibilidad del navegador {: #compatibility }
+
+Consulte los datos de MDN para obtener información actualizada sobre compatibilidad con varios navegadores:
+
+- [`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)
+- [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
+
+## Renderizado de fuentes
+
+El reacomodo de diseño, o rediseño, ocurre cuando un recurso en una página web cambia dinámicamente, lo que resulta en un "reacomodo" del contenido. Obtener y renderizar fuentes web puede provocar reacomodos de diseño directamente de una de estas dos formas:
+
+- Una fuente alternativa se cambia por una nueva ("parpadeo de texto sin estilo")
+- Se muestra texto "invisible" hasta que se renderiza una nueva fuente en la página ("parpadeo de texto invisible")
+
+La propiedad CSS [`font-display`](https://font-display.glitch.me/) ofrece una forma de modificar el comportamiento de renderizado de las fuentes personalizadas a través de un rango de diferentes valores admitidos (`auto`, `block`, `swap`, `fallback` y `optional`). La elección del valor que se utilizará depende del comportamiento preferido de las fuentes cargadas de forma asincrónica. Sin embargo, cada uno de estos valores admitidos podía desencadenar un rediseño de una de las dos formas enumeradas anteriormente, ¡hasta ahora!
+
+{% Aside %} La métrica [Cumulative Layout Shift: Cambio de diseño acumulativo](/cls/) permite medir la inestabilidad del diseño en una página web. {% endAside %}
+
+## Fuentes opcionales
+
+La propiedad `font-display` usa una línea de tiempo de tres períodos para manejar las fuentes que deben descargarse antes de que se puedan renderizar:
+
+- **Bloqueo:** renderiza texto "invisible", pero cambia a la fuente web tan pronto como termine de cargarse.
+- **Intercambio:** renderiza el texto con una fuente alternativa del sistema, pero cambia a la fuente web tan pronto como termina de cargarse.
+- **Fallo:** renderiza el texto con una fuente alternativa del sistema.
+
+Anteriormente, las fuentes designadas con `font-display: optional` tenían un período de bloqueo de 100 ms y ningún período de Intercambio. Esto significa que el texto "invisible" se muestra muy brevemente antes de cambiar a una fuente alternativa. Si la fuente no se descarga en 100 ms, se utiliza la fuente alternativa y no se produce ningún cambio.
+
+<figure>{% Img src="image/admin/WHLORYEu864QRRveFQUz.png", alt="Diagrama que muestra el comportamiento anterior de la fuente opcional cuando la fuente no se carga", width="800", height="340" %}<figcaption> Comportamiento anterior de <code>font-display: optional</code> en Chrome cuando la fuente se descarga <b>después</b> del período de bloqueo de 100 ms</figcaption></figure>
+
+Sin embargo, en caso de que la fuente se descargue antes de que finalice el período de bloqueo de 100 ms, la fuente personalizada se renderiza y usa en la página.
+
+<figure>{% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="Diagrama que muestra el comportamiento anterior de la fuente opcional cuando la fuente se carga a tiempo", width="800", height="318" %}<figcaption> Comportamiento anterior de <code>font-display: optional</code> en Chrome cuando la fuente se descarga <b>antes</b> del período de bloqueo de 100 ms</figcaption></figure>
+
+Chrome vuelve a renderizar la página **dos veces** en ambos casos, independientemente de si se usa la fuente alternativa o si la fuente personalizada termina de cargarse a tiempo. Esto provoca un ligero parpadeo de texto invisible y, en los casos en que se renderiza una nueva fuente, un reacomodo desagradable del diseño que mueve parte del contenido de la página. Esto ocurre incluso si la fuente está almacenada en la memoria caché del disco del navegador y puede cargarse mucho antes de que finalice el período de bloqueo.
+
+Las [optimizaciones](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632) llegaron a Chrome 83 para eliminar por completo el primer ciclo de renderizado de fuentes opcionales precargadas con [`<link rel="preload'>`](/codelab-preload-web-fonts/). En su lugar, el renderizado se bloquea hasta que la fuente personalizada haya terminado de cargarse o haya transcurrido un cierto período de tiempo. Este período de tiempo de espera está establecido actualmente en 100 ms, pero es posible que cambie en un futuro próximo para optimizar el rendimiento.
+
+<figure>{% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="Diagrama que muestra el comportamiento de la nueva fuente opcional precargada cuando la fuente falla en cargarse", width="800", height="353" %}<figcaption> Comportamiento nuevo de <code>font-display: optional</code> en Chrome cuando las fuentes están precargadas y la fuente se descarga <b>después</b> del período de bloqueo de 100 ms (sin parpadeo de texto invisible)</figcaption></figure>
+
+<figure>{% Img src="image/admin/OEHClGFMFspaWjb3xXLY.png", alt="Diagrama que muestra el comportamiento de la nueva fuente opcional precargada cuando la fuente se carga a tiempo", width="800", height="346" %}<figcaption> Comportamiento nuevo de <code>font-display: optional</code> en Chrome cuando las fuentes están precargadas y la fuente se descarga <b>antes</b> del período de bloqueo de 100 ms (sin parpadeo de texto invisible)</figcaption></figure>
+
+La precarga de fuentes opcionales en Chrome elimina la posibilidad de alteraciones desagradables en el diseño y parpadeos de texto sin estilo. Esto coincide con el comportamiento requerido como se especifica en el [nivel 4 del módulo de fuentes CSS,](https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional) donde las fuentes opcionales nunca deben causar un rediseño y los agentes de usuario pueden, en cambio, retrasar la renderización durante un período de tiempo adecuado.
+
+Aunque no es necesario precargar una fuente opcional, mejora en gran medida la posibilidad de que se cargue antes del primer ciclo de renderizado, especialmente si aún no está almacenada en la caché del navegador.
+
+## Conclusión
+
+El equipo de Chrome está interesado en escuchar sus experiencias al precargar fuentes opcionales con estas nuevas optimizaciones implementadas. Mándelos un [reporte](https://bugs.chromium.org/p/chromium/issues/entry) si experimenta algún problema o le gustaría dejarnos alguna sugerencia de funciones.
diff --git a/src/site/content/es/blog/progressively-enhance-your-pwa/index.md b/src/site/content/es/blog/progressively-enhance-your-pwa/index.md
new file mode 100644
index 00000000000..657e776fcc4
--- /dev/null
+++ b/src/site/content/es/blog/progressively-enhance-your-pwa/index.md
@@ -0,0 +1,721 @@
+---
+layout: post
+title: Mejore progresivamente su aplicación web progresiva
+subhead: Diseñando para navegadores modernos y mejorando progresivamente como en 2003
+authors:
+  - thomassteiner
+description: Aprenda a mejorar progresivamente su aplicación web progresiva para que siga siendo útil en todos los navegadores modernos, pero ofreciendo una experiencia avanzada en navegadores que admiten nuevas capacidades web como acceso al sistema de archivos, acceso al portapapeles del sistema, recuperación de contactos, sincronización periódica en segundo plano, bloqueo de activación de pantalla, funciones para compartir web, y muchos más.
+scheduled: true
+date: 2020-06-29
+updated: 2020-07-10
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+hero: image/admin/0uSwSmGHmPXimU3dz8Xa.jpg
+alt: Una imagen de un pez.
+thumbnail: image/admin/X84uooDup0B9OYWY4ZKh.jpg
+---
+
+{% YouTube 'NXCT3htg9nk' %}
+
+En marzo de 2003, [Nick Finck](https://twitter.com/nickf) y [Steve Champeon](https://twitter.com/schampeo) sorprendieron al mundo del diseño web con el concepto de [mejora progresiva](http://www.hesketh.com/publications/inclusive_web_design_for_the_future/), una estrategia para el diseño web que enfatiza la carga del contenido principal de la página web en primer lugar, y que luego agrega progresivamente capas de presentación y características más matizadas y técnicamente rigurosas sobre el contenido. Mientras que en 2003, la mejora progresiva consistía en usar, en ese momento, características modernas de CSS, JavaScript discreto e incluso gráficos vectoriales escalables. La mejora progresiva en 2020 y después se trata de utilizar [las capacidades de los navegadores modernos](https://developer.chrome.com/blog/fugu-status/).
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IEOd4MT9BqnbeXQ7z0vC.png", alt="Diseño web inclusivo para el futuro con mejoras progresivas. Diapositiva de título de la presentación original de Finck y Champeon.", width="800", height="597" %}
+<figcaption>
+ Diapositiva: Diseño web inclusivo para el futuro con mejoras progresivas.
+ (<a href="http://www.hesketh.com/publications/inclusive_web_design_for_the_future/">Fuente</a>)
+ </figcaption>
+ </figure>
+
+## JavaScript moderno
+
+Hablando de JavaScript, la situación de compatibilidad del navegador para las últimas funciones básicas de JavaScript de ES 2015 es excelente. El nuevo estándar incluye promesas, módulos, clases, literales de plantilla, funciones de flecha, `let` y `const`, parámetros predeterminados, generadores, asignación de desestructuración, descanso y extensión, `Map`/`Set`, `WeakMap`/`WeakSet`, y muchos más. [Todos son compatibles](https://caniuse.com/#feat=es6).
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sYcABrEPMr01C2ilp4B0.png", alt="La tabla de compatibilidad de CanIUse para las funciones de ES6 que muestra la compatibilidad con todos los navegadores principales.", width="800", height="296" %}
+<figcaption>
+ La tabla de compatibilidad del navegador ECMAScript 2015 (ES6). (<a href="https://caniuse.com/#feat=es6">Fuente</a>)
+ </figcaption>
+</figure>
+
+Las funciones asincrónicas, una característica de ES 2017 y una de mis favoritas, [se pueden utilizar](https://caniuse.com/#feat=async-functions) en todos los navegadores principales. Las palabras clave `async` y `await` permiten que el comportamiento asincrónico basado en promesas se escriba en un estilo más limpio, evitando la necesidad de configurar explícitamente cadenas de promesas.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0WFlQTFFTlqXKvpROMu9.png", alt="La tabla de compatibilidad de CanIUse para funciones asíncronas que muestra compatibilidad en todos los navegadores principales.", width="800", height="247" %}
+ <figcaption>
+  La tabla de soporte del navegador de funciones asíncronas. (<a href="https://caniuse.com/#feat=async-functions">Fuente</a>)
+  </figcaption>
+</figure>
+
+Incluso adiciones de lenguaje ES 2020 súper recientes, como el [encadenamiento opcional](https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining) y la[fusión nula](https://caniuse.com/#feat=mdn-javascript_operators_nullish_coalescing), se tornaron compatibles muy rápidamente. Puede ver un ejemplo de código a continuación. Cuando se trata de funciones básicas de JavaScript, la situación no podría estar mejor al día de hoy.
+
+```js
+const adventurer = {
+  name: 'Alice',
+  cat: {
+    name: 'Dinah',
+  },
+};
+console.log(adventurer.dog?.name);
+// Expected output: undefined
+console.log(0 ?? 42);
+// Expected output: 0
+```
+
+<figure data-size="full">
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/v1nhcTV9aaqPKd9oRvYz.png", alt="La imagen de fondo de hierba verde icónica de Windows XP.", width="800", height="500" %}
+ <figcaption>
+  Está mejor que nunca cuando se trata de funciones básicas de JavaScript (captura de pantalla de producto de Microsoft, utilizada con <a href="https://www.microsoft.com/en-us/legal/intellectualproperty/permissions/default">permiso</a>.)</figcaption></figure>
+
+## La aplicación de muestra: Fugu Greetings
+
+Para este artículo, trabajo con una PWA simple, llamada [Fugu Greetings](https://tomayac.github.io/fugu-greetings/public/) ([GitHub](https://github.com/tomayac/fugu-greetings)). El nombre de esta aplicación es un homenaje al Project Fugu 🐡, un esfuerzo por darle a la web todos los poderes de las aplicaciones de escritorio/Android/iOS. Puede leer más sobre el proyecto en su [página de inicio](https://developer.chrome.com/blog/fugu-status).
+
+Fugu Greetings es una aplicación de dibujo que te permite crear tarjetas de felicitación virtuales y enviárselas a tus seres queridos. Ejemplifica [los conceptos centrales de PWA](/progressive-web-apps/). Es [confiable](/reliable/) y está completamente habilitada sin conexión, por lo que puede usarla incluso si no está conectado a una red. También se puede [instalar](/install-criteria/) en la pantalla de inicio de un dispositivo y se integra perfectamente con el sistema operativo como una aplicación independiente.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0id013BKBF2z7m70TrX.png", alt="PWA Fugu Greetings con un dibujo que se asemeja al logo de la comunidad de PWA.", width="800", height="543" %}
+<figcaption>
+ La aplicación de muestra <a href="https://tomayac.github.io/fugu-greetings/public/">Fugu Greetings.</a>
+ </figcaption>
+ </figure>
+
+## Mejora progresiva
+
+Con esto fuera del camino, es hora de hablar sobre la *mejora progresiva*. El glosario de MDN Web Docs [define](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement) el concepto de la siguiente manera:
+
+{% Blockquote 'MDN contributors' %}
+La mejora progresiva es una filosofía de diseño que proporciona una línea de base de contenido y funcionalidad esenciales para tantos usuarios como sea posible, al tiempo que brinda la mejor experiencia posible solo a los usuarios de los navegadores más modernos que pueden ejecutar todo el código requerido.
+
+[La detección de características](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) se usa generalmente para determinar si los navegadores pueden manejar una funcionalidad más moderna, mientras que los [polyfills](https://developer.mozilla.org/docs/Glossary/Polyfill) se usan a menudo para agregar características faltantes con JavaScript.
+
+[…]
+
+La mejora progresiva es una técnica útil que permite a los desarrolladores web concentrarse en desarrollar los mejores sitios web posibles mientras hacen que esos sitios web funcionen en múltiples agentes de usuario desconocidos. [La degradación elegante](https://developer.mozilla.org/docs/Glossary/Graceful_degradation) está relacionada, pero no es lo mismo y, a menudo, se considera que va en la dirección opuesta a la mejora progresiva. En realidad, ambos enfoques son válidos y, a menudo, pueden complementarse entre sí. {% endBlockquote %}
+
+{% Aside 'note' %}
+ Este no es un artículo introductorio sobre la mejora progresiva, pero se supone que está familiarizado con el concepto. Para una base sólida, recomiendo el artículo de Steve Champeon [Mejora progresiva y el futuro del diseño web](http://www.hesketh.com/progressive_enhancement_and_the_future_of_web_design.html).
+{% endAside %}
+
+Comenzar cada tarjeta de felicitación desde cero puede ser realmente engorroso. Entonces, ¿por qué no tener una función que permita a los usuarios importar una imagen y comenzar desde allí? Con un enfoque tradicional, habría utilizado un elemento [`<input type=file>`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file) para que esto suceda. Primero, crearía el elemento, establecería su `type` en `'file'` y agregaría tipos MIME a la propiedad `accept`, y luego haría "clic" en él mediante programación y sondaría los cambios. Cuando seleccione una imagen, se importa directamente al lienzo.
+
+```js
+const importImage = async () => {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.addEventListener('change', () => {
+      resolve(input.files[0]);
+    });
+    input.click();
+  });
+};
+```
+
+Cuando hay una *función de importación*, probablemente debería haber una *función de exportación* para que los usuarios puedan guardar sus tarjetas de felicitación localmente. La forma tradicional de guardar archivos es crear un enlace de anclaje con un atributo [`download`](https://developer.mozilla.org/docs/Web/HTML/Element/a#download) y con una URL de blob como su `href`. También debería "hacer clic" en él mediante programación para activar la descarga y, con suerte, para evitar pérdidas de memoria, no olvide revocar la URL del objeto blob.
+
+```js
+const exportImage = async (blob) => {
+  const a = document.createElement('a');
+  a.download = 'fugu-greeting.png';
+  a.href = URL.createObjectURL(blob);
+  a.addEventListener('click', (e) => {
+    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
+  });
+  a.click();
+};
+```
+
+Pero espere un minuto. Mentalmente, no ha "descargado" una tarjeta de felicitación, la ha "guardado". En lugar de mostrarle un cuadro de diálogo "guardar" que le permite elegir dónde colocar el archivo, el navegador descargó directamente la tarjeta de felicitación sin interacción del usuario y la colocó directamente en su carpeta Downloads. Esto no es lo ideal.
+
+¿Y si hubiera una forma mejor? ¿Qué pasaría si pudiera abrir un archivo local, editarlo y luego guardar las modificaciones, ya sea en un archivo nuevo o en el archivo original que había abierto inicialmente? Resulta que la hay. La [API de acceso al sistema de archivos](/file-system-access/) (File System Access API) le permite abrir y crear archivos y directorios, así como modificarlos y guardarlos.
+
+Entonces, ¿cómo detecto una API? La API de acceso al sistema de archivos expone un nuevo método `window.chooseFileSystemEntries()`. En consecuencia, necesito cargar condicionalmente diferentes módulos de importación y exportación dependiendo de si este método está disponible. Demuestro cómo hacer esto a continuación.
+
+```js
+const loadImportAndExport = () => {
+  if ('chooseFileSystemEntries' in window) {
+    Promise.all([
+      import('./import_image.mjs'),
+      import('./export_image.mjs'),
+    ]);
+  } else {
+    Promise.all([
+      import('./import_image_legacy.mjs'),
+      import('./export_image_legacy.mjs'),
+    ]);
+  }
+};
+```
+
+Pero antes de entrar de lleno en los detalles de la API de acceso al sistema de archivos, permítanme destacar rápidamente el patrón de mejora progresiva aquí. En los navegadores que actualmente no son compatibles con la API de acceso al sistema de archivos, cargo los scripts heredados. Puede ver las pestañas de red de Firefox y Safari a continuación.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rnPL8xIMt6HJEUbDfrez.png", alt="Safari Web Inspector muestra los archivos heredados que se cargan.", width="800", height="114" %}
+<figcaption>
+ Pestaña de red Safari Web Inspector.
+ </figcaption>
+ </figure>
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bui4rcv0jvlVLHI3jBoo.png", alt="Herramientas de desarrollo de Firefox que muestran los archivos heredados que se cargan.", width="800", height="166" %}
+<figcaption>
+ Pestaña de red Firefox Developer Tools.
+ </figcaption>
+ </figure>
+
+Sin embargo, en Chrome, un navegador que admite la API, solo se cargan los nuevos scripts. Esto se hace posible de forma elegante gracias a [dynamic `import()`](https://v8.dev/features/dynamic-import), que todos los navegadores modernos [soportan](https://caniuse.com/#feat=es6-module-dynamic-import). Como dije anteriortmente, las cosas van viento en popa hoy en día.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/plf6kGtFE8g9Fjogv8ia.png", alt="Chrome DevTools que muestra los archivos modernos que se cargan.", width="800", height="241" %}
+<figcaption>
+ Pestaña de red Chrome DevTools.
+ </figcaption>
+ </figure>
+
+## La API de acceso al sistema de archivos
+
+Entonces, ahora que he abordado esto, es hora de ver la implementación real basada en la API de acceso al sistema de archivos. Para importar una imagen, llamo `window.chooseFileSystemEntries()` y le paso una propiedad `accepts` donde establezco que quiero archivos de imagen. Se admiten tanto extensiones de archivo como los tipos MIME. Esto da como resultado un identificador de archivo, del cual puedo obtener el archivo real llamando a `getFile()`.
+
+```js
+const importImage = async () => {
+  try {
+    const handle = await window.chooseFileSystemEntries({
+      accepts: [
+        {
+          description: 'Image files',
+          mimeTypes: ['image/*'],
+          extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg'],
+        },
+      ],
+    });
+    return handle.getFile();
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Exportar una imagen es casi lo mismo, pero esta vez necesito pasar un parámetro de tipo de `'save-file'` al método `chooseFileSystemEntries()`. A partir de esto, obtengo un cuadro de diálogo para guardar archivos. Con el archivo abierto, esto no era necesario porque `'open-file'` es el valor predeterminado. He establecido el parámetro `accepts` de forma similar al anterior, pero esta vez limitado solamente a imágenes PNG. Nuevamente, recupero un identificador de archivo, pero en lugar de obtener el archivo, esta vez creo una secuencia de escritura llamando a `createWritable()`. A continuación, escribo el blob, que es la imagen de mi tarjeta de felicitación, en el archivo. Finalmente, cierro la secuencia de escritura.
+
+Todo puede fallar: el disco podría quedarse sin espacio, podría haber un error de escritura o lectura, o tal vez simplemente el usuario cancele el cuadro de diálogo del archivo. Es por eso que siempre envuelvo las llamadas en una declaración `try...catch`.
+
+```js
+const exportImage = async (blob) => {
+  try {
+    const handle = await window.chooseFileSystemEntries({
+      type: 'save-file',
+      accepts: [
+        {
+          description: 'Image file',
+          extensions: ['png'],
+          mimeTypes: ['image/png'],
+        },
+      ],
+    });
+    const writable = await handle.createWritable();
+    await writable.write(blob);
+    await writable.close();
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Utilizando la mejora progresiva con la API de acceso al sistema de archivos, puedo abrir un archivo como antes. El archivo importado se dibuja directamente en el lienzo. Puedo hacer mis ediciones y finalmente guardarlas con un cuadro de diálogo de guardado real donde puedo elegir el nombre y la ubicación de almacenamiento del archivo. Ahora el archivo está listo para conservarse por la eternidad.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEKHbetFMURVWh4QPRJw.png", alt="Aplicación Fugu Greetings con un cuadro de diálogo para abrir archivo.", width="800", height="480" %}
+<figcaption>
+ El diálogo abrir de archivo.
+ </figcaption>
+ </figure>
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tls52mkxDB513SzzcfNj.png", alt="La aplicación Fugu Greetings ahora con una imagen importada.", width="800", height="480" %}
+<figcaption>
+ La imagen importada.
+ </figcaption>
+ </figure>
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3LwHvtROaN1bHJN1El5D.png", alt="Aplicación Fugu Greetings con la imagen modificada", width="800", height="480" %}
+<figcaption>
+ Guardando la imagen modificada en un nuevo archivo.
+</figcaption>
+</figure>
+
+## Las API Web Share y Web Share Target
+
+Además de almacenarla por toda la eternidad, tal vez realmente quiera compartir mi tarjeta de felicitación. Esto es algo que la [API Web Share](/web-share/) y la [API Web Share Target](/web-share-target/) me permiten hacer. Los sistemas operativos móviles y, más recientemente, los de escritorio, han adquirido mecanismos de intercambio integrados. Por ejemplo, a continuación se muestra la hoja para compartir de Safari de escritorio en macOS activada desde un artículo de mi [blog](https://blog.tomayac.com/). Cuando hace clic en el botón **Compartir artículo**, puedes compartir un enlace al artículo con un amigo, por ejemplo, a través de la aplicación Mensajes de macOS.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sinRHRHFgSgwAC7x8dIZ.png", alt="Hoja para compartir de Desktop Safari en macOS activada desde el botón Compartir de un artículo", width="800", height="423" %}
+<figcaption>
+ API Web Share en Safari de escritorio para macOS.
+ </figcaption>
+ </figure>
+
+El código para que esto suceda es bastante sencillo. Llamo `navigator.share()` y le paso un `title`, un `text` y un `url` opcionales en un objeto. Pero, ¿y si quiero adjuntar una imagen? El nivel 1 de la API Web Share aún no admite esto. La buena noticia es que Web Share Level 2 ha agregado capacidades para compartir archivos.
+
+```js
+try {
+  await navigator.share({
+    title: 'Check out this article:',
+    text: `"${document.title}" by @tomayac:`,
+    url: document.querySelector('link[rel=canonical]').href,
+  });
+} catch (err) {
+  console.warn(err.name, err.message);
+}
+```
+
+Déjame mostrarte cómo hacer que esto funcione con la aplicación Fugu Greetings. Primero, necesito preparar un objeto de `data` con un array de `archivos` que consiste de un blob, y luego un `title` y un `text`. A continuación, como práctica recomendada, utilizo el nuevo `navigator.canShare()` que hace lo que sugiere su nombre: me dice si el objeto de `data` que estoy tratando de compartir puede técnicamente ser compartido por el navegador. Si `navigator.canShare()` me dice que los datos se pueden compartir, estoy listo para llamar a `navigator.share()` como antes. Como todo puede fallar, de nuevo estoy usando un bloque `try...catch`.
+
+```js
+const share = async (title, text, blob) => {
+  const data = {
+    files: [
+      new File([blob], 'fugu-greeting.png', {
+        type: blob.type,
+      }),
+    ],
+    title: title,
+    text: text,
+  };
+  try {
+    if (!(navigator.canShare(data))) {
+      throw new Error("Can't share data.", data);
+    }
+    await navigator.share(data);
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Como antes, utilizo la mejora progresiva. Si tanto `'share'` como `'canShare'` existen en el objeto `navigator`, solo entonces cargo `share.mjs` a través de la `import()` dinámica. En navegadores como Safari móvil que solo cumplen una de las dos condiciones, no cargo la funcionalidad.
+
+```js
+const loadShare = () => {
+  if ('share' in navigator && 'canShare' in navigator) {
+    import('./share.mjs');
+  }
+};
+```
+
+En Fugu Greetings, si toco el botón **Compartir** en un navegador compatible como Chrome en Android, se abre la hoja para compartir incorporada. Puedo, por ejemplo, escoger Gmail, y el widget del redactor de correo electrónico aparece con la imagen adjunta.
+
+<div class="switcher">
+  <figure>
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/szInJQl908kv9GEU8EJf.png", alt="Hoja para compartir a nivel de SO que muestra varias aplicaciones para compartir la imagen.", width="800", height="1645" %}
+   <figcaption>
+    Elección de una aplicación para compartir el archivo.
+   </figcaption>
+  </figure>
+
+  <figure>
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mKmdg1OMGpWDukmfSSOl.png", alt="Widget de redacción de correo electrónico de Gmail con la imagen adjunta.", width = "800", height = "1645" %}
+   <figcaption>
+     El archivo se adjunta a un nuevo correo electrónico en el redactor de Gmail.
+   </figcaption>
+  </figure>
+</div>
+
+## La API de selección de contactos
+
+A continuación, quiero hablar sobre contactos, es decir, la libreta de direcciones de un dispositivo o la aplicación de administrador de contactos. Cuando escribe una tarjeta de felicitación, puede que no siempre sea fácil escribir correctamente el nombre de alguien. Por ejemplo, tengo un amigo Sergey que prefiere que su nombre se escriba en cirílico. Estoy usando un teclado QWERTZ alemán y no tengo idea de cómo escribir su nombre. Este es un problema que la [API de selecciónr de contactos](/contact-picker/) puede resolver. Como tengo a mi amigo almacenado en la aplicación de contactos de mi teléfono, puedo acceder a mis contactos desde la web a través de esta API.
+
+Primero, necesito especificar la lista de propiedades a las que quiero acceder. En este caso, solo quiero los nombres, pero para otros casos de uso, podría estar interesado en números de teléfono, correos electrónicos, íconos de avatar o direcciones físicas. A continuación, configuro un objeto `options` con el valor de `multiple` ajustado en `true`, de modo que puedo seleccionar más de una entrada. Finalmente, puedo llamar a `navigator.contacts.select()`, que devuelve las propiedades deseadas para los contactos seleccionados por el usuario.
+
+```js
+const getContacts = async () => {
+  const properties = ['name'];
+  const options = { multiple: true };
+  try {
+    return await navigator.contacts.select(properties, options);
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Y probablemente ya ha aprendido el patrón: solo cargo el archivo cuando la API es realmente compatible.
+
+```js
+if ('contacts' in navigator) {
+  import('./contacts.mjs');
+}
+```
+
+En Fugu Greeting, cuando toco el **botón Contactos** y selecciono a mis dos mejores amigos,
+[Сергей Михайлович Брин](https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B8%D0%BD,_%D0%A1%D0%B5%D1%80%D0%B3%D0%B5%D0%B9_%D0%9C%D0%B8%D1%85%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2%D0%B8%D1%87) y [劳伦斯·爱德华·"拉里"·佩奇](https://zh.wikipedia.org/wiki/%E6%8B%89%E9%87%8C%C2%B7%E4%BD%A9%E5%A5%87), puedes ver cómo el selector de contactos se limita a mostrar solo sus nombres, pero no sus direcciones de correo electrónico u otra información como sus números de teléfono. Luego, sus nombres se incorporan a mi tarjeta de felicitación.
+
+<div class="switcher">
+  <figure>
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/T5gmSr1XGiVIV9Pw1HbC.png", alt="Selector de contactos que muestra los nombres de dos contactos en la libreta de direcciones.", width="800", height="1645" %}
+   <figcaption>
+    Selección de dos nombres con el selector de contactos de la libreta de direcciones.
+   </figcaption>
+   </figure>
+
+  <figure>
+   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ioMOCEHwvwdyzS7DX5L8.png", alt="Los nombres de los dos contactos seleccionados previamente incorporados a la tarjeta de felicitación.", width="800", height="1644" %}
+   <figcaption>
+    Luego, los dos nombres se incorporan a la tarjeta de felicitación.
+   </figcaption>
+  </figure>
+</div>
+
+
+## La API del portapapeles asíncrono
+
+Lo siguiente es copiar y pegar. Una de nuestras operaciones favoritas como desarrolladores de software es copiar y pegar. Como autor de tarjetas de felicitación, a veces, es posible que desee hacer lo mismo. Es posible que quiera pegar una imagen en una tarjeta de felicitación en la que estoy trabajando o copiar mi tarjeta de felicitación para poder seguir editándola desde otro lugar. La [API del portapapeles asíncrono](/image-support-for-async-clipboard/) (API Async Clipboard) admite texto e imágenes. Déjame explicarte cómo agregué el soporte para copiar y pegar a la aplicación Fugu Greetings.
+
+Para copiar algo en el portapapeles del sistema, necesito escribir en él. El `navigator.clipboard.write()` toma una matriz de elementos del portapapeles como parámetro. Cada elemento del portapapeles es esencialmente un objeto con un blob como valor y el tipo del blob como clave.
+
+```js
+const copy = async (blob) => {
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        [blob.type]: blob,
+      }),
+    ]);
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Para pegar, necesito recorrer los elementos obtenidos del portapapeles llamando a `navigator.clipboard.read()`. La razón de esto es que varios elementos del portapapeles pueden estar en el portapapeles en diferentes representaciones. Cada elemento del portapapeles tiene un campo `types` que me dice los tipos MIME de los recursos disponibles. Llamo al `getType()` del elemento del portapapeles, pasando el tipo MIME que obtuve antes.
+
+```js
+const paste = async () => {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      try {
+        for (const type of clipboardItem.types) {
+          const blob = await clipboardItem.getType(type);
+          return blob;
+        }
+      } catch (err) {
+        console.error(err.name, err.message);
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+Y prácticamente no hace falta decirlo a estas alturas. Solo hago esto en navegadores compatibles.
+
+```js
+if ('clipboard' in navigator && 'write' in navigator.clipboard) {
+  import('./clipboard.mjs');
+}
+```
+
+Entonces, ¿cómo funciona esto en la práctica? Tengo una imagen abierta en la aplicación macOS Preview y la copio al portapapeles. Cuando hago clic en **Pegar**, la aplicación Fugu Greetings me pregunta si quiero permitir que la aplicación vea texto e imágenes en el portapapeles.
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EO9BemEDnDtO3SvLl8u5.png", alt="La aplicación Fugu Greetings muestra la solicitud de permiso del portapapeles.", width="800", height="543" %}
+ <figcaption>
+  La solicitud de permiso del portapapeles.
+  </figcaption>
+</figure>
+
+Finalmente, después de aceptar el permiso, la imagen se pega en la aplicación. También funciona al revés. Déjame copiar una tarjeta de felicitación en el portapapeles. Cuando abro Preview y hago clic en **File** y luego en **New desde el portapapeles**, la tarjeta de felicitación se pega en una nueva imagen sin título.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/VAkvEYWsQsJ0VJ8IjEs1.png", alt="La aplicación de vista previa de macOS con una imagen sin título, recién pegada.", width="800", height="464" %}
+<figcaption>
+ Una imagen pegada en la aplicación macOS Preview.
+ </figcaption>
+ </figure>
+
+## La API de credenciales
+
+Otra API útil es la [API de credenciales](/badging-api/) (Badging API). Como PWA instalable, Fugu Greetings, por supuesto, tiene un ícono de aplicación que los usuarios pueden colocar en la barra de tareas o en la pantalla de inicio. Una forma fácil y divertida de demostrar la API es (ab) usarla en Fugu Greetings como un contador de trazos de lápiz. He agregado un detector de eventos que incrementa el contador de trazos de lápiz a cada evento `pointerdown` y luego establece la credencial del icono actualizada. Siempre que se borra el lienzo, el contador se reinicia y se quita la credencial.
+
+```js
+let strokes = 0;
+
+canvas.addEventListener('pointerdown', () => {
+  navigator.setAppBadge(++strokes);
+});
+
+clearButton.addEventListener('click', () => {
+  strokes = 0;
+  navigator.setAppBadge(strokes);
+});
+```
+
+Esta característica es una mejora progresiva, por lo que la lógica de carga es la habitual.
+
+```js
+if ('setAppBadge' in navigator) {
+  import('./badge.mjs');
+}
+```
+
+En este ejemplo, dibujé los números del uno al siete, usando un trazo de lápiz por número. El contador de insignias en el icono ahora está en siete.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uKurKxYeRlLCLXJYhX9I.png", alt="Los números del uno al siete dibujados en la tarjeta de felicitación, cada uno con un solo trazo de lápiz.", width="800", height="480" %}
+ <figcaption>
+  Dibujo de los números del 1 al 7 con siete trazos de lápiz.
+ </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5uOcN2MdjKVnWXRyTmCG.png", alt="Icono de insignia en la aplicación Fugu Greetings que muestra el número 7.", width="742", height="448" %}
+<figcaption>
+El contador de trazos de lápiz tiene la forma de la credencial del icono de la aplicación.
+</figcaption>
+</figure>
+
+## La API de sincronización periódica en segundo plano
+
+¿Quiere empezar cada día con algo nuevo? Una característica interesante de la aplicación Fugu Greetings es que puede inspirarte cada mañana con una nueva imagen de fondo para comenzar tu tarjeta de felicitación. La aplicación utiliza la [API de sincronización periódica en segundo plano](/periodic-background-sync/) para lograr esto.
+
+El primer paso es *registrar* un evento de sincronización periódica en el registro del service worker. Escucha una etiqueta de sincronización llamada `'image-of-the-day'` y tiene un intervalo mínimo de un día, por lo que el usuario puede obtener una nueva imagen de fondo cada 24 horas.
+
+```js
+const registerPeriodicBackgroundSync = async () => {
+  const registration = await navigator.serviceWorker.ready;
+  try {
+    registration.periodicSync.register('image-of-the-day-sync', {
+      // An interval of one day.
+      minInterval: 24 * 60 * 60 * 1000,
+    });
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+};
+```
+
+El segundo paso es *escuchar* el evento `periodicsync` en el service worker. Si la etiqueta del evento es `'image-of-the-day'`, es decir, la que se registró antes, la imagen del día se recupera mediante la función `getImageOfTheDay()` y el resultado se propaga a todos los clientes, para que puedan actualizar sus lienzos y cachés.
+
+```js
+self.addEventListener('periodicsync', (syncEvent) => {
+  if (syncEvent.tag === 'image-of-the-day-sync') {
+    syncEvent.waitUntil(
+      (async () => {
+        const blob = await getImageOfTheDay();
+        const clients = await self.clients.matchAll();
+        clients.forEach((client) => {
+          client.postMessage({
+            image: blob,
+          });
+        });
+      })()
+    );
+  }
+});
+```
+
+Nuevamente, esto es realmente una mejora progresiva, por lo que el código solo se carga cuando la API es compatible con el navegador. Esto se aplica tanto al código del cliente como al código del service worker. En los navegadores que no son compatibles, ninguno de ellos se carga. Nota cómo en el service worker, en lugar de un `import()` dinámico (que no es compatible en el contexto del service worker [yet](https://github.com/w3c/ServiceWorker/issues/1356#issuecomment-433411852)), utilizo los clásicos [`importScripts()`](https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts).
+
+```js
+// In the client:
+const registration = await navigator.serviceWorker.ready;
+if (registration && 'periodicSync' in registration) {
+  import('./periodic_background_sync.mjs');
+}
+```
+
+```js
+// In the service worker:
+if ('periodicSync' in self.registration) {
+  importScripts('./image_of_the_day.mjs');
+}
+```
+
+En Fugu Greetings, al presionar el botón **Fondo de pantalla** se muestra la imagen de la tarjeta de felicitación del día que se actualiza todos los días a través de la API de sincronización periódica en segundo plano.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YdSHSI4pZcTPyVv8CVx8.png", alt="Aplicación Fugu Greetings con una nueva imagen de tarjeta de felicitación del día.", width="800", height="481" %}
+ <figcaption>
+  Al presionar el botón <strong>Fondo de pantalla</strong> se muestra la imagen del día.
+ </figcaption>
+</figure>
+
+## API de activación de notificaciones
+
+A veces, incluso con mucha inspiración, necesita un pequeño empujón para terminar una tarjeta de felicitación iniciada. Esta es una función que está habilitada por la [API de activación de notificaciones](/notification-triggers/). Como usuario, puedo ingresar una hora en la que quiero que me notifiquen para terminar mi tarjeta de felicitación. Cuando llegue ese momento, recibiré una notificación de que mi tarjeta de felicitación está esperando.
+
+Después de solicitar el tiempo objetivo, la aplicación programa la notificación con un `showTrigger`. Puede ser un `TimestampTrigger` con la fecha objetivo previamente seleccionada. La notificación de recordatorio se activará localmente, no se necesita red ni servidor.
+
+```js
+const targetDate = promptTargetDate();
+if (targetDate) {
+  const registration = await navigator.serviceWorker.ready;
+  registration.showNotification('Reminder', {
+    tag: 'reminder',
+    body: "It's time to finish your greeting card!",
+    showTrigger: new TimestampTrigger(targetDate),
+  });
+}
+```
+
+Como con todo lo demás que he mostrado hasta ahora, esta es una mejora progresiva, por lo que el código solo se carga condicionalmente.
+
+```js
+if ('Notification' in window && 'showTrigger' in Notification.prototype) {
+  import('./notification_triggers.mjs');
+}
+```
+
+Cuando marco la casilla de verificación **Recordatorio** en Fugu Greetings, un mensaje me pregunta cuándo quiero que se me recuerde que debo terminar mi tarjeta de felicitación.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xtD7PtIIBO0Yn1ISFSyz.png", alt="Aplicación Fugu Greetings con un mensaje que pregunta al usuario cuándo quiere que se le recuerde que termine su tarjeta de felicitación.", width="800", height="480" %}
+  <figcaption>
+   Programación de una notificación local para recordarle que debe terminar una tarjeta de felicitación.
+  </figcaption>
+</figure>
+
+Cuando se activa una notificación programada en Fugu Greetings, se muestra como cualquier otra notificación, pero como escribí antes, no fue necesaria una conexión de red.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e1FJA11UE3lrL1d4mCCo.png", alt="Centro de notificaciones de macOS que muestra una notificación activada de Fugu Greetings.", width="300", height="172" %}
+  <figcaption>
+   La notificación activada aparece en el Centro de notificaciones de macOS.
+  </figcaption>
+</figure>
+
+## La API de Wake Lock
+
+También quiero incluir la [API de Wake Lock](/wakelock/) . A veces solo necesitas mirar fijamente la pantalla el tiempo suficiente hasta que la inspiración te llegue. Lo peor que puede pasar es que la pantalla se apague. La API de Wake Lock puede evitar que esto suceda.
+
+El primer paso es obtener un wake lock con el `navigator.wakelock.request method()`. Le paso la cadena `'screen'` para obtener un wake lock. Luego agrego un detector de eventos para ser informado cuando se libera el wake lock. Esto puede suceder, por ejemplo, cuando cambia la visibilidad de la pestaña. Si esto sucede, puedo, cuando la pestaña vuelva a ser visible, volver a obtener el wake lock.
+
+```js
+let wakeLock = null;
+const requestWakeLock = async () => {
+  wakeLock = await navigator.wakeLock.request('screen');
+  wakeLock.addEventListener('release', () => {
+    console.log('Wake Lock was released');
+  });
+  console.log('Wake Lock is active');
+};
+
+const handleVisibilityChange = () => {
+  if (wakeLock !== null && document.visibilityState === 'visible') {
+    requestWakeLock();
+  }
+};
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+document.addEventListener('fullscreenchange', handleVisibilityChange);
+```
+
+Sí, esta es una mejora progresiva, por lo que solo necesito cargarla cuando el navegador admita la API.
+
+```js
+if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
+  import('./wake_lock.mjs');
+}
+```
+
+En Fugu Greetings, hay una **casilla de verificación Insomnia** que, cuando está marcada, mantiene la pantalla activa.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kB5LkdV3cVKaJ0Xze76v.png", alt="La casilla de insomnia, si está marcada, mantiene la pantalla activa.", width="800", height="480" %}
+ <figcaption>
+  La casilla de verificación <strong>Insomnia</strong> mantiene la aplicación activa.
+ </figcaption>
+</figure>
+
+## La API de detección de inactividad
+
+A veces, incluso si miras la pantalla durante horas, es inútil y no se te ocurre la menor idea de qué hacer con tu tarjeta de felicitación. La [API de detección de inactividad](/idle-detection/) permite que la aplicación detecte el tiempo de inactividad del usuario. Si el usuario está inactivo durante demasiado tiempo, la aplicación se restablece al estado inicial y borra el lienzo. Esta API actualmente está bloqueada detrás del [permiso de notificaciones](https://developer.mozilla.org/docs/Web/API/Notification/requestPermission) , ya que muchos casos de uso de producción de detección inactiva están relacionados con notificaciones, por ejemplo, para enviar solo una notificación a un dispositivo que el usuario está usando actualmente de forma activa.
+
+Después de asegurarme de que se otorgue el permiso de notificaciones, entonces creo una instancia del detector inactivo. Registro un detector de eventos que escucha los cambios inactivos, que incluye el usuario y el estado de la pantalla. El usuario puede estar activo o inactivo y la pantalla se puede desbloquear o bloquear. Si el usuario está inactivo, el lienzo se borra. Le doy al detector inactivo un umbral de 60 segundos.
+
+```js
+const idleDetector = new IdleDetector();
+idleDetector.addEventListener('change', () => {
+  const userState = idleDetector.userState;
+  const screenState = idleDetector.screenState;
+  console.log(`Idle change: ${userState}, ${screenState}.`);
+  if (userState === 'idle') {
+    clearCanvas();
+  }
+});
+
+await idleDetector.start({
+  threshold: 60000,
+  signal,
+});
+```
+
+Y como siempre, solo cargo este código cuando el navegador lo admite.
+
+```js
+if ('IdleDetector' in window) {
+  import('./idle_detection.mjs');
+}
+```
+
+En la aplicación Fugu Greetings, el lienzo se borra cuando la casilla de verificación **Ephemeral** está marcada y el usuario está inactivo durante demasiado tiempo.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yq3IsOqp01AZTw7nvfnB.png", alt="La aplicación Fugu Greetings con un lienzo despejado después de que el usuario ha estado inactivo durante demasiado tiempo.", width="800", height="480" %}
+  <figcaption>
+   Cuando la casilla de verificación <strong>Ephemeral</strong> está marcada y el usuario ha estado inactivo durante demasiado tiempo, el lienzo se borra.
+  </figcaption>
+</figure>
+
+## Conclusión
+
+Uf, qué paseo. Tantas API en una sola aplicación de muestra. Y recuerde, nunca hacemos que el usuario pague el costo de descarga de una función que su navegador no admite. Al usar la mejora progresiva, me aseguro de que solo se cargue el código relevante. Y dado que con HTTP/2, las solicitudes son baratas, este patrón debería funcionar bien para muchas aplicaciones, aunque es posible que desee considerar un paquete para aplicaciones realmente grandes.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DOnuk7CHPsnbTdlqOHXM.png", alt="El panel Chrome DevTools Network muestra solo solicitudes de archivos con código compatible con el navegador actual.", width="800", height="566" %}
+ <figcaption>
+  La pestaña de DevTools de Chrome muestra solo las solicitudes de archivos con código compatible con el navegador actual.
+ </figcaption>
+</figure>
+
+La aplicación puede aparecer un poco diferente en cada navegador, ya que no todas las plataformas admiten todas las funciones, pero la funcionalidad principal siempre está disponible, mejorada progresivamente de acuerdo con las capacidades del navegador específico. Tenga en cuenta que estas capacidades pueden cambiar incluso en el mismo navegador, dependiendo de si la aplicación se ejecuta como una aplicación instalada o en una pestaña del navegador.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LmUW0CZpH5eXIoHTZ6kH.png", alt="Fugu Greetings en Android Chrome, mostrando muchas funciones disponibles.", width="500", height="243" %}
+  <figcaption>
+   <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> en ejecución en Android Chrome.
+  </figcaption>
+</figure>
+
+<figure>
+ {% Img src ="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BOcbAW4FCi10d9cGdeNW.png", alt="Fugu Greetings ejecutándose en Safari de escritorio, mostrando menos funciones disponibles.", width="500", height="403" %}
+ <figcaption> <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> en ejecución en Safari de escritorio.
+ </figcaption>
+</figure>
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7zT4BEUzxTkjg8e08OJU.png", alt="Fugu Greetings en ejecución en Chrome para escritorio, mostrando varias funciones disponibles.", width="500", height="348" %}
+  <figcaption> <a href="https://github.com/tomayac/fugu-greetings">Fugu Greetings</a> en ejecución en Chrome para escritorios.
+  </figcaption>
+</figure>
+
+Si está interesado en la [aplicación Fugu Greetings](https://tomayac.github.io/fugu-greetings/public/) búsquelo y [bifúrquelo en GitHub](https://github.com/tomayac/fugu-greetings).
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l260mtBzRi8OxdV8gXSg.png", alt="Repo de Fugu Greetings en GitHub.", width="800", height="490" %}
+  <figcaption>
+   <a href="https://github.com/tomayac/fugu-greetings">Aplicación Fugu Greetings</a> en GitHub.
+  </figcaption>
+</figure>
+
+El equipo de Chromium está trabajando duro para hacer que mejorar las API avanzadas de Fugu. Al aplicar mejoras progresivas en el desarrollo de mi aplicación, me aseguro de que todos obtengan una experiencia de referencia sólida e inclusiva, y que las personas que utilizan navegadores que admiten aún más API de plataformas web obtengan una experiencia aún mejor. Espero ver lo que hace con la mejora progresiva en sus aplicaciones.
+
+## Agradecimientos
+
+Mil gracias a [Christian Liebel](https://christianliebel.com/) y [Hemanth HM](https://h3manth.com/) quienes han contribuido a Fugu Greetings. Este artículo fue revisado por [Joe Medley](https://github.com/jpmedley) y [Kayce Basques](https://github.com/kaycebasques). [Jake Archibald](https://github.com/jakearchibald/) me ayudó a descubrir la situación con el `import()` dinámico en el contexto de los service workers.
diff --git a/src/site/content/es/blog/promises/index.md b/src/site/content/es/blog/promises/index.md
new file mode 100644
index 00000000000..051f964e2a3
--- /dev/null
+++ b/src/site/content/es/blog/promises/index.md
@@ -0,0 +1,765 @@
+---
+title: 'Promesas de JavaScript: una introducción'
+subhead: |2-
+
+  Las promesas simplifican los cálculos diferidos y asíncronos. Una promesa representa
+  una operación que aún no se ha completado.
+description: |2-
+
+  Las promesas simplifican los cálculos diferidos y asíncronos. Una promesa representa
+  una operación que aún no se ha completado.
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+Desarrolladores, prepárense para un momento crucial en la historia del desarrollo web.
+
+<em>[Comienza el redoble]</em>
+
+¡Las promesas han llegado a JavaScript!
+
+<em>[Explotan fuegos artificiales, llueve papel brillante desde arriba, la multitud se enloquece]</em>
+
+En este punto, de seguro caes en una de estas categorías:
+
+- La gente a tu alrededor están muy emocionadas, pero no estás seguro de qué se trata tanto alboroto. Tal vez ni siquiera estás seguro de qué es una "promesa". Te tomas de los hombros, pero el peso del papel brillante recae sobre los mismos. Si es así, no te preocupes por eso, me tomó años averiguar por qué debería preocuparme por estas cosas. Probablemente quieras empezar por el [principio](#whats-all-the-fuss-about).
+- ¡Mandas tus puños al aire! Ya era hora, ¿verdad? Has usado estas cosas de Promise (promesas) antes, pero te molesta que todas las implementaciones tengan una API ligeramente diferente. ¿Cuál es la API de la versión oficial de JavaScript? Probablemente desees comenzar con la [terminología](#promise-terminology).
+- Ya lo sabías y te burlas de los que están saltando como si fuera una novedad para ellos. Tomate un momento para disfrutar de tu propia superioridad para luego ir directamente a la [referencia del API](#promise-api-reference).
+
+## ¿Qué es todo este alboroto? {: #whats-all-the-fuss-about }
+
+JavaScript es de un solo subproceso (single thread), lo que significa que dos bits de secuencia de comandos no se pueden ser ejecutados al mismo tiempo; tienen que correr uno tras otro. En los navegadores, JavaScript comparte un hilo con un montón de otras cosas que difieren de un navegador a otro. Pero, por lo general, JavaScript está en la misma cola que pintar, actualizar estilos y manejar las acciones del usuario (como resaltar texto e interactuar con los controles del formulario). La actividad en una de estas cosas retrasa las demás.
+
+Como seres humanos, somos multiproceso (multithreaded). Puedes teclear con varios dedos, puedes conducir y mantener una conversación al mismo tiempo. La única función de bloqueo con la que tenemos que lidiar es el estornudo, donde toda la actividad actual debe suspenderse mientras dure el estornudo. Eso es bastante molesto, especialmente cuando conduces e intentas mantener una conversación. No querrás escribir código que provoque un estornudo.
+
+Probablemente ya hayas utilizado eventos y retrollamadas (callbacks) para evitar esto. Aquí están los eventos:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // woo yey image loaded
+});
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+Esto no es un estornudo en lo absoluto. Obtenemos la imagen, agregamos un par de oyentes y luego JavaScript puede dejar de ejecutarse hasta que se llame a uno de esos oyentes.
+
+Desafortunadamente, en el ejemplo anterior, es posible que los eventos ocurrieran antes de que comenzáramos a escucharlos, por lo que debemos solucionar esto mediante el uso de la propiedad "complete" de las imágenes:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // woo yey image loaded
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+Esto no capta imágenes con errores antes de que tuviéramos la oportunidad de escucharlas; desafortunadamente, el DOM no nos da una forma de hacerlo. Además, esto está cargando una imagen. Las cosas se vuelven aún más complejas si queremos saber cuándo se ha cargado un conjunto de imágenes.
+
+## Los eventos no siempre son la mejor opción
+
+Los eventos son excelentes para cosas que pueden suceder varias veces en el mismo objeto: `keyup`, `touchstart`, etc. Con esos eventos, realmente no te importa lo que sucedió antes de incluir al oyente. Pero cuando se trata de éxito o fracaso asíncrono, lo ideal es que utilices algo como esto:
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // loaded
+}).orIfFailedCallThis(function() {
+  // failed
+});
+
+// and…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // all loaded
+}).orIfSomeFailedCallThis(function() {
+  // one or more failed
+});
+```
+
+Esto es lo que hacen las promesas, pero con un mejor nombre. Si los elementos de la imagen HTML tuvieran un método "listo" que devolviera una promesa, podemos hacer esto:
+
+```js
+img1.ready()
+.then(function() {
+  // loaded
+}, function() {
+  // failed
+});
+
+// and…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // all loaded
+}, function() {
+  // one or more failed
+});
+```
+
+En su forma más básica, las promesas son un poco como los oyentes de eventos, excepto:
+
+- Una promesa solo puede tener éxito o fracasar una vez. No puede tener éxito o fallar dos veces, tampoco puede pasar del éxito al fracaso o viceversa.
+- Si una promesa ha tenido éxito o ha fracasado y luego se agrega una retrollamada de éxito o de fracaso, se retrollamará a la correcta, aunque el evento haya sucedido antes.
+
+Esto es extremadamente útil para el éxito o fracaso asíncrono, porque estás menos interesado en el momento exacto en que algo estuvo disponible y más interesado en reaccionar ante el resultado.
+
+## Terminología de promesas {: #promise-terminology }
+
+[Domenic Denicola](https://twitter.com/domenic) leyó el primer borrador de este artículo y me calificó con una "F" por terminología. Me dio un castigo, me obligó a copiar [States and Fates (Estados y destinos)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) 100 veces y escribió una carta de preocupación a mis padres. A pesar de eso, sigo confundiendo gran parte de la terminología, pero aquí están los conceptos básicos:
+
+Una promesa puede estar:
+
+- **cumplida (fulfilled)** - La acción relacionada con la promesa se realizó correctamente.
+- **rechazada (rejected)** - La acción relacionada con la promesa fracasó
+- **pendiente (pending)** - Aún no se ha cumplido o rechazado
+- **finalizada (settled)** - Se ha cumplido o rechazado
+
+[La ECMA](https://www.ecma-international.org/ecma-262/#sec-promise-objects) también usa el término **thenable** para describir un objeto que es similar a una promesa, ya que tiene un método `then`. Este término me recuerda al ex entrenador de fútbol de Inglaterra, [Terry Venables,](https://en.wikipedia.org/wiki/Terry_Venables) así que lo usaré lo menos posible.
+
+## ¡Las promesas llegaron a JavaScript!
+
+Las promesas han existido durante un tiempo en forma de bibliotecas, como:
+
+- [Q](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+Las promesas anteriores y de JavaScript comparten un comportamiento común y estandarizado llamado [Promises/A+](https://github.com/promises-aplus/promises-spec). Si eres un usuario de jQuery, tienen algo similar llamado [Deferreds](https://api.jquery.com/category/deferred-object/). Sin embargo, los Deferreds no cumplen con las normas de Promise/A+, lo que los hace [sutilmente diferentes y menos útiles](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/), así que ten cuidado. jQuery también tiene [un tipo de promesa](https://api.jquery.com/Types/#Promise), pero este es solo un subconjunto de Deferred y tiene los mismos problemas.
+
+Aunque las implementaciones de promesas siguen un comportamiento estandarizado, de manera general, sus APIs, difieren. Las promesas de JavaScript son similares en API a RSVP.js. Así es como se crea una promesa:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // do a thing, possibly async, then…
+
+  if (/* everything turned out fine */) {
+    resolve("Stuff worked!");
+  }
+  else {
+    reject(Error("It broke"));
+  }
+});
+```
+
+El constructor de promesas toma un argumento y una retrollamada con dos parámetros, resolve (resolver) y reject (rechazar). Haces algo dentro de la retrollamada, tal vez algo asíncrono, luego llamas a resolve si todo funcionó, de lo contrario, llamas a reject.
+
+Al igual que `throw` en JavaScript antiguo, se usa por costumbre, pero no obligatorio, rechazar con un objeto Error. La ventaja de los objetos Error es que capturan un seguimiento de la pila, lo que hace que las herramientas de depuración sean más útiles.
+
+Así es como se usa esa promesa:
+
+```js
+promise.then(function(result) {
+  console.log(result); // "Stuff worked!"
+}, function(err) {
+  console.log(err); // Error: "It broke"
+});
+```
+
+`then()` toma dos argumentos, una retrollamada para un caso de éxito y otra para el caso de fracaso. Ambos son opcionales, por lo que puedes agregar una retrollamada solo para el caso de éxito o fracaso.
+
+Las promesas de JavaScript comenzaron en DOM como "Futures (Futuros)", se renombró a "Promises (Promesas)" y finalmente se trasladaron a JavaScript. Tenerlos en JavaScript en lugar del DOM es genial porque estarán disponibles en contextos de JS que no son del navegador, como lo es Node.js (si los utilizan en sus API principales es otra cuestión).
+
+Aunque son una función de JavaScript, el DOM no tiene miedo de usarlos. De hecho, todas las API DOM nuevas con métodos asíncronos de éxito o fracaso utilizarán promesas. Esto ya está sucediendo con [Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota), [Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready), [ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17), [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options), [Streams](https://github.com/whatwg/streams#basereadablestream) y más.
+
+## Soporte de navegador y polyfill
+
+Ya existen implementaciones de promesas en los navegadores de hoy en día.
+
+A partir de Chrome 32, Opera 19, Firefox 29, Safari 8 y Microsoft Edge, las promesas están habilitadas de forma predeterminada.
+
+Para que los navegadores que carecen de una implementación completa de promesas cumplan con las especificaciones, o agregar promesas y Node.js a otros navegadores, consulta [el polyfill](https://github.com/jakearchibald/ES6-Promises#readme) (2k gzipped).
+
+## Compatibilidad con otras bibliotecas
+
+La API de promesas de JavaScript tratará cualquier cosa con un `then()` como una promesa (o `thenable` *en un suspiro* en idioma de promesas), por lo que si usas una biblioteca que devuelve una promesa Q, no hay problema, funcionará de la manera correcta con las nuevas promesas de JavaScript.
+
+Aunque, como mencioné anteriormente, los Deferreds de jQuery son un poco…inútiles. Afortunadamente, puedes convertirlos en promesas estándar, lo que vale la pena hacer lo antes posible:
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+Aquí, `$.ajax` jQuery devuelve un Deferred. Puesto que tiene un método `then()`, `Promise.resolve()` puedes convertirlo en una promesa JavaScript. Sin embargo, a veces los Deferreds pasan varios argumentos a sus retrollamadas, por ejemplo:
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+Mientras que JS promete ignorar todo menos el primero:
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+Afortunadamente, esto suele ser lo que deseas, o al menos te da acceso a lo que deseas. Además, ten en cuenta que jQuery no sigue la convención de pasar objetos Error a rechazos.
+
+## El código asíncrono complejo es más fácil
+
+Bien, codifiquemos algunas cosas. Digamos que queremos:
+
+1. Iniciar un spinner para indicar que algo se está cargando
+2. Obtener el JSON para una historia, lo que nos da el título y las URL de cada capítulo
+3. Agregar el título a la página
+4. Obtener cada capítulo
+5. Agregar la historia a la página
+6. Detener el spinner
+
+…pero también decirle al usuario si algo salió mal en el camino. También querremos detener el spinner en ese punto; de lo contrario, seguirá girando, se mareará y chocará contra otra parte de la interfaz de usuario.
+
+Por supuesto, no usaría JavaScript para desplegar una historia, ya que [servir como HTML es más rápido](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), pero este patrón es bastante común cuando se trata de API: múltiples recuperaciones de datos, luego haces algo cuando estén listos.
+
+Para empezar, tratemos de obtener datos de la red:
+
+## Haciendo promesas de XMLHttpRequest
+
+Las API antiguas se actualizarán para usar promesas, si es posible, de una manera compatible con versiones anteriores. `XMLHttpRequest` es un candidato principal, pero mientras tanto, vamos a escribir una función simple para realizar una consulta GET:
+
+```js
+function get(url) {
+  // Return a new promise.
+  return new Promise(function(resolve, reject) {
+    // Do the usual XHR stuff
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // This is called even on 404 etc
+      // so check the status
+      if (req.status == 200) {
+        // Resolve the promise with the response text
+        resolve(req.response);
+      }
+      else {
+        // Otherwise reject with the status text
+        // which will hopefully be a meaningful error
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Handle network errors
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Make the request
+    req.send();
+  });
+}
+```
+
+Ahora usémoslo:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.error("Failed!", error);
+})
+```
+
+Ahora podemos realizar consultas HTTP sin escribir `XMLHttpRequest` manualmente, lo cual es genial, porque cuanto menos tenga que ver la exasperante camel case de `XMLHttpRequest`, más feliz será mi vida.
+
+## Encadenamiento
+
+`then()` no es el final de la historia, puedes encadenar varios `then` para transformar valores o ejecutar acciones asíncronas adicionales una tras otra.
+
+### Transformando valores
+
+Puedes transformar valores de manera sencilla devolviendo el nuevo valor:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+Como ejemplo práctico, volvamos a:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+})
+```
+
+La respuesta es JSON, pero actualmente la estamos recibiendo como texto sin formato. Podríamos alterar nuestra función get para usar JSON [`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType), pero también podríamos resolverlo utilizando una promesa:
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+Dado que `JSON.parse()` toma un solo argumento y devuelve un valor transformado, podemos utilizar un atajo:
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+De hecho, podríamos hacer una función `getJSON()` de una manera muy sencilla:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+`getJSON()` todavía devuelve una promesa, una que obtiene un URL y luego analiza la respuesta como JSON.
+
+### Poner en cola acciones asincrónicas
+
+También puedes encadenar varios `then` para ejecutar acciones asíncronas en secuencia.
+
+Cuando devuelves algo de una retrollamada de `then()`, sucede un poco de magia. Si devuelves un valor, el próximo `then()` es llamado con ese valor. Sin embargo, si devuelves una promesa, el siguiente `then()` espera y solo se llama cuando esa promesa se establece (si fue un éxito o si fracasó). Por ejemplo:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Got chapter 1!", chapter1);
+})
+```
+
+Aquí hacemos una consulta asíncrona a `story.json`, que nos da un conjunto de URL para consultar, luego consultamos la primera de ellas. Aquí es cuando las promesas realmente comienzan a destacarse de los patrones simples de retrollamadas.
+
+Incluso puedes crear un método de acceso directo para obtener capítulos:
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// and using it is simple:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+No descargamos `story.json` hasta que `getChapter` es llamado, pero la próxima vez que `getChapter` es llamado vamos a reutilizar la promesa de la historia, por lo que `story.json` solo se recupera una vez. ¡Genial, promesas!
+
+## Manejo de errores
+
+Como vimos anteriormente, `then()` toma dos argumentos, uno para el éxito, otro para el fracaso (o cumplida y rechazada, en idioma de promesas):
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+También puedes usar `catch()`:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).catch(function(error) {
+  console.log("Failed!", error);
+})
+```
+
+No hay nada especial en `catch()`, es una manera linda de escribir `then(undefined, func)`, pero es más legible. Ten en cuenta que los dos ejemplos de código anteriores no se comportan de la misma manera, el último es equivalente a:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).then(undefined, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+La diferencia es sutil, pero extremadamente útil. Las promesas rechazadas pasan al siguiente `then()` con una retrollamada de rechazo (o `catch()`, ya que es equivalente). Luego `then(func1, func2)`, `func1` o `func2` serán llamados, pero nunca ambos. Pero con `then(func1).catch(func2)`, ambos serán llamados si `func1` rechaza, ya que son pasos separados en la cadena. Observa lo siguiente:
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Don't worry about it");
+}).then(function() {
+  console.log("All done!");
+})
+```
+
+El flujo anterior es muy similar al try y catch normal de JavaScript, los errores que ocurren dentro de un "try" van inmediatamente al bloque de `catch()`. Aquí está lo anterior como un diagrama de flujo (porque me encantan los diagramas de flujo):
+
+<div style="position: relative; padding-top: 93%;">
+  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
+</div>
+
+Sigue las líneas azules para las promesas que se cumplen o las rojas para las que se rechazan.
+
+### Promesas y excepciones de JavaScript
+
+Los rechazos ocurren cuando una promesa se rechaza explícitamente, pero también implícitamente si se arroja un error en la retrollamada del constructor:
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse throws an error if you feed it some
+  // invalid JSON, so this implicitly rejects:
+  resolve(JSON.parse("This ain't JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // This never happens:
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+Esto significa que es útil hacer todo el trabajo relacionado con las promesas dentro de la retrollamada del constructor de promesas, por lo que los errores se detectan automáticamente y se convierten en rechazos.
+
+Lo mismo ocurre con los errores lanzados en las retrollamadas de `then()`.
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // This never happens, '/' is an HTML page, not JSON
+  // so JSON.parse throws
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+### Manejo de errores en la práctica
+
+Con nuestra historia y capítulos, podemos usar catch para mostrar un error al usuario:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Failed to show chapter");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Si la `story.chapterUrls[0]` falla (por ejemplo, http 500 o el usuario está desconectado del internet), omitirá todas las siguientes retrollamadas exitosas que incluyen la de `getJSON()` que intenta analizar la respuesta como JSON y también omite la retrollamada que agrega chapter1.html a la página. En su lugar, pasa a la retrollamada de captura. Como resultado, "No se pudo mostrar el capítulo" se agregará a la página si falla alguna de las acciones anteriores.
+
+Al igual que el try y catch de JavaScript, el error se detecta y el código subsiguiente continúa, por lo que el spinner siempre está oculto, que es lo que queremos. Lo anterior se convierte en una versión asíncrona sin bloqueo de:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Failed to show chapter");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+Es posible que desees utilizar `catch()` con fines de registro, sin recuperar del error. Para hacer esto, simplemente vuelves a hacer un throw al error. Podríamos hacer esto en nuestro método de `getJSON()`:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("getJSON failed for", url, err);
+    throw err;
+  });
+}
+```
+
+Así que logramos obtener un capítulo, pero los queremos todos. Hagamos que eso suceda.
+
+## Paralelismo y secuenciación: obteniendo lo mejor de ambos
+
+Pensar de forma asíncrona no es fácil. Si estás luchando por salirte de la caja, intenta escribir el código como si fuera sincrónico. En este caso:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("All done");
+}
+catch (err) {
+  addTextToPage("Argh, broken: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch {id: 'promises-sync-example', height: 480}%}
+
+¡Eso funciona! Pero se sincroniza y bloquea el navegador mientras se descargan las cosas. Para que esto funcione de forma asincrónica, usamos `then()`, esto es para hacer que las cosas sucedan una tras otra.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // TODO: for each url in story.chapterUrls, fetch & display
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Pero, ¿cómo podemos recorrer las URL de los capítulos y buscarlas en orden? Esto **no funciona**:
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Fetch chapter
+  getJSON(chapterUrl).then(function(chapter) {
+    // and add it to the page
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`forEach` no se percata de lo asíncrono, por lo que nuestros capítulos aparecerían en el orden en que se descarguen, que es básicamente cómo se escribió Pulp Fiction. Esto no es Pulp Fiction, así que vamos a arreglarlo.
+
+### Creando una secuencia
+
+Queremos convertir nuestro `chapterUrls` en una secuencia de promesas. Podemos hacer eso usando `then()`:
+
+```js
+// Start off with a promise that always resolves
+var sequence = Promise.resolve();
+
+// Loop through our chapter urls
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Add these actions to the end of the sequence
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+Esta es la primera vez que vemos `Promise.resolve()`, el cual crea una promesa que se resuelve con cualquier valor que le des. Si le pasas una instancia de `Promise`, simplemente la devolverá (**nota:** este es un cambio en la especificación que algunas implementaciones aún no siguen). Si le pasas algo parecido a una promesa (si tiene un método `then()`), crea una `Promise` genuina que cumple o rechaza de la misma manera. Si pasas cualquier otro valor, por ejemplo, `Promise.resolve('Hello')`, crea una promesa que cumple con ese valor. Si lo llama sin valor, como arriba, cumple como "indefinido".
+
+También está `Promise.reject(val)`, que crea una promesa que se rechaza con el valor que le das (o con indefinido).
+
+Podemos ordenar el código anterior usando [`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) :
+
+```js
+// Loop through our chapter urls
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Add these actions to the end of the sequence
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+Esto hace lo mismo que en el ejemplo anterior, pero no necesita la variable de "secuencia" separada. Se llama a nuestra retrollamada reducida para cada elemento de la matriz. "secuencia" es `Promise.resolve()` la primera vez, pero para el resto de las llamadas, "secuencia" es lo que devolvimos de la llamada anterior. `array.reduce` es realmente útil para reducir una matriz a un solo valor, que en este caso es una promesa.
+
+Vamos a juntarlo todo:
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Once the last chapter's promise is done…
+    return sequence.then(function() {
+      // …fetch the next chapter
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // and add it to the page
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-example', height: 480}%}
+
+Y ahí lo tenemos, una versión totalmente asíncrona de la versión sincronizada. Pero lo podemos hacer mejor. Por el momento, nuestra página se está descargando así:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Los navegadores son bastante buenos para descargar varias cosas a la vez, por lo que estamos perdiendo rendimiento al descargar capítulos uno tras otro. Lo que queremos hacer es descargarlos todos al mismo tiempo y luego procesarlos cuando hayan llegado. Afortunadamente, hay una API para esto:
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+`Promise.all` toma una serie de promesas y crea una promesa que se cumple cuando todas se completan con éxito. Obtienes una variedad de resultados (cualquiera que sea el cumplimiento de las promesas) en el mismo orden en que las promesas que pasaste.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Take an array of promises and wait on them all
+  return Promise.all(
+    // Map our array of chapter urls to
+    // an array of chapter json promises
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Now we have the chapters jsons in order! Loop through…
+  chapters.forEach(function(chapter) {
+    // …and add to the page
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened so far
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-all-example', height: 480}%}
+
+Dependiendo de la conexión, esto puede ser segundos más rápido que cargar uno por uno, y es menos código que nuestro primer intento. Los capítulos se pueden descargar en cualquier orden, pero aparecen en la pantalla en el orden correcto.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Sin embargo, aún podemos mejorar el rendimiento percibido. Cuando llegue el capítulo uno debemos agregarlo a la página. Esto le permite al usuario comenzar a leer antes de que llegue el resto de los capítulos. Cuando llegue el capítulo tres, no lo agregaríamos a la página porque es posible que el usuario no se dé cuenta de que falta el capítulo dos. Cuando llegue el capítulo dos, podemos agregar los capítulos dos y tres, etc, etc.
+
+Para hacer esto, buscamos el JSON para todos nuestros capítulos al mismo tiempo, luego creamos una secuencia para agregarlos al documento:
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Map our array of chapter urls to
+  // an array of chapter json promises.
+  // This makes sure they all download in parallel.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Use reduce to chain the promises together,
+      // adding content to the page for each chapter
+      return sequence
+      .then(function() {
+        // Wait for everything in the sequence so far,
+        // then wait for this chapter to arrive.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-best-example', height: 480}%}
+
+¡Y ahí está, lo mejor de ambos! Se necesita la misma cantidad de tiempo para entregar todo el contenido, pero el usuario obtiene el primer pedazo del contenido antes.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+En este ejemplo trivial, todos los capítulos llegan aproximadamente al mismo tiempo, pero el beneficio de mostrar uno a la vez se exagerará con capítulos más grandes.
+
+Hacer lo anterior con [eventos o retrollamadas al estilo de Node.js](https://gist.github.com/jakearchibald/0e652d95c07442f205ce) es aproximadamente el doble del código, pero lo más importante, no es tan fácil de seguir. Sin embargo, este no es el final de la historia de las promesas, cuando se combinan con otras características de ES6 se vuelven aún más fáciles.
+
+## Ronda extra: capacidades ampliadas
+
+Desde que escribí este artículo originalmente, la capacidad de usar promesas se ha expandido enormemente. Desde Chrome 55, las funciones asíncronas han permitido escribir código basado en promesas como si estuviera en sincronía, pero sin bloquear el hilo principal. Puedes leer más sobre eso en [my async functions article (mi artículo de funciones asíncronas)](/async-functions). Existe un soporte generalizado tanto para promesas como para funciones asíncronas en los principales navegadores. Puedes encontrar los detalles en la [Promise (promesas)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) de MDN y la referencia de [async function (función asíncrona).](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)
+
+Muchas gracias a Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp, Addy Osmani, Arthur Evans y Yutaka Hirano quienes revisaron esto e hicieron correcciones y recomendaciones.
+
+Además, gracias a [Mathias Bynens](https://mathiasbynens.be/) por [actualizar varias partes](https://github.com/html5rocks/www.html5rocks.com/pull/921/files) del artículo.
diff --git a/src/site/content/es/blog/read-files/index.md b/src/site/content/es/blog/read-files/index.md
new file mode 100644
index 00000000000..81b576cc5af
--- /dev/null
+++ b/src/site/content/es/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: Leer archivos en JavaScript
+subhead: Cómo seleccionar archivos, leer metadatos y contenido de archivos y monitorear el progreso de la lectura.
+description: |2
+
+  Cómo seleccionar archivos, leer metadatos y contenido de archivos y monitorear el progreso de la lectura.
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+Poder seleccionar e interactuar con archivos en el dispositivo local del usuario es una de las características más utilizadas de la web. Esto permite a los usuarios seleccionar archivos y cargarlos en un servidor, por ejemplo, cargando fotos o enviando documentos fiscales, etc. Pero también permite que los sitios los lean y manipulen sin tener que transferir los datos a través de la red.
+
+## La API moderna de acceso al sistema de archivos
+
+La API de acceso al sistema de archivos proporciona una manera fácil de leer y escribir archivos y directorios en el sistema local del usuario. Actualmente está disponible en la mayoría de los navegadores derivados de Chromium como Chrome o Edge. Para obtener más información al respecto, consulte el artículo de la [API de acceso al sistema de archivos.](/file-system-access/)
+
+Dado que la API de acceso al sistema de archivos aún no es compatible con todos los navegadores, consulte [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access), la cual es una biblioteca auxiliar que usa la nueva API siempre que esté disponible, pero si no está disponible utiliza métodos antiguos.
+
+## Trabajar con archivos, de la forma clásica
+
+Esta guía le muestra a como:
+
+- Seleccionar archivos
+    - [Usando el elemento de entrada HTML](#select-input)
+    - [Usando una zona de arrastrar y soltar](#select-dnd)
+- [Leer metadatos de archivos](#read-metadata)
+- [Leer el contenido de un archivo](#read-content)
+
+## Seleccionar archivos {: #select }
+
+### Elemento de entrada HTML {: #select-input }
+
+La forma más sencilla de permitir que los usuarios seleccionen archivos es utilizando el elemento [`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file) , que es compatible con todos los navegadores principales. Cuando se hace clic, permite al usuario seleccionar un archivo, o varios archivos si el atributo de[`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) es incluido, utilizando la IU de selección de archivos incorporada de su sistema operativo. Cuando el usuario termina de seleccionar un archivo o archivos, se dispara el evento de `change`. Puede acceder a la lista de archivos desde `event.target.files`, que es un objeto [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Cada elemento de `FileList` es un objeto [`File`](https://developer.mozilla.org/docs/Web/API/File)
+
+```html
+<!-- The `multiple` attribute lets users select multiple files. -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %} Verifique si el método [`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read) es una alternativa viable para su caso, ya que también le brinda un identificador de archivo para que pueda volver a escribir en el archivo, además de leer. Este método se puede utilizar con [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files). {% endAside %}
+
+Este ejemplo permite a un usuario seleccionar varios archivos usando la IU de selección de archivos incorporada de su sistema operativo y luego registra cada archivo seleccionado en la consola.
+
+{% Glitch {id: 'input-type-file', altura: 480}%}
+
+#### Limite los tipos de archivos que el usuario puede seleccionar {: #accept }
+
+En algunos casos, es posible que desee limitar los tipos de archivos que los usuarios pueden seleccionar. Por ejemplo, una aplicación de edición de imágenes solo debe aceptar imágenes, no archivos de texto. Para hacer eso, puede agregar un [`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) al elemento de entrada para especificar qué archivos se aceptan.
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### Arrastrar y soltar personalizado {: #select-dnd }
+
+En algunos navegadores, el elemento `<input type="file">` también es un lugar para arrastrar y soltar archivos, lo que permite a los usuarios mandar archivos en su aplicación. Sin embargo, el objetivo es pequeño y puede resultar difícil de usar. En su lugar, una vez que haya proporcionado la funcionalidad principal mediante un elemento `<input type="file">`, puede crear una gran zona personalizada para arrastrar y soltar archivos.
+
+{% Aside %} Verifique si el método [`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration) es una alternativa viable para su caso, ya que también le brinda un identificador de archivo para que pueda volver a escribir en el archivo, además de leer. {% endAside %}
+
+#### Elija su zona para soltar {: #choose-drop-zone }
+
+Su zona para soltar dependerá del diseño de su aplicación. Es posible que solo desee que una parte de la ventana sea una zona para soltar o, potencialmente, toda la ventana.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="Una captura de pantalla de Squoosh, una aplicación web para compresión de imagen.", width="800", height="589" %} <figcaption> Squoosh convierte toda la ventana en una zona para soltar. </figcaption></figure>
+
+Squoosh permite al usuario arrastrar y soltar una imagen en cualquier lugar de la ventana, y al hacer clic en **seleccionar una imagen se** invoca el elemento `<input type="file">`. Independientemente de lo que elija como zona para soltar, asegúrese de que el usuario tenga claro que puede arrastrar y soltar archivos en esa zona.
+
+#### Defina la zona para soltar {: #define-drop-zone }
+
+Para permitir que un elemento sea una zona de arrastrar y soltar, deberá escuchar dos eventos, [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event) y [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event) . El `dragover` actualiza la interfaz de usuario del navegador para indicar visualmente que la acción de arrastrar y soltar está creando una copia del archivo. El `drop` se activa después de que el usuario haya dejado caer los archivos en la zona. De manera similar al elemento de entrada, puede acceder a la lista de archivos desde `event.dataTransfer.files`, que es un objeto [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Cada elemento de `FileList` es un objeto [`File`](https://developer.mozilla.org/docs/Web/API/File)
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // Style the drag-and-drop as a "copy file" operation.
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+[`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) y [`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) evitan que suceda el comportamiento predeterminado del navegador y permiten que su código se ejecute en su lugar. Sin ellos, su navegador le enviaría a un lugar fuera de su página y abriría los archivos que el usuario colocó en la ventana del navegador.
+
+{# Este ejemplo no funciona si se utiliza sin ser modificado. #}
+
+Consulte [Arrastrar y soltar personalizado](https://custom-drag-and-drop.glitch.me/) para ver una demostración en vivo.
+
+### ¿Qué pasa con los directorios? {: #directories }
+
+Desafortunadamente, hoy en día no existe una buena forma de acceder a un directorio.
+
+El [`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory) en el atributo `<input type="file">` permite al usuario elegir un directorio o directorios. Es compatible con algunos navegadores basados en Chromium y posiblemente en la versión escritorio de Safari, pero hay reportes de [conflictos](https://caniuse.com/#search=webkitdirectory) sobre la compatibilidad del navegador.
+
+{% Aside %} Verifique si el método  [`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents) es una alternativa viable para su caso, ya que también le brinda un identificador de directorio para que pueda volver a escribir en el directorio, además de leer. Este método se puede utilizar con [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories). {% endAside %}
+
+Si la función de arrastrar y soltar está habilitada, un usuario puede intentar arrastrar un directorio a la zona para soltar. Cuando se activa el evento, incluirá un objeto `File` en el directorio, pero no podrá acceder a ninguno de los archivos dentro del directorio.
+
+## Leer metadatos de archivos {: #read-metadata }
+
+El objeto [`File`](https://developer.mozilla.org/docs/Web/API/File) contiene varias propiedades de metadatos sobre el archivo. La mayoría de los navegadores proporcionan el nombre del archivo, el tamaño del archivo y el tipo de MIME, dependiendo según la plataforma, los diferentes navegadores pueden proporcionar información diferente o adicional.
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // Not supported in Safari for iOS.
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // Not supported in Firefox for Android or Opera for Android.
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // Unknown cross-browser support.
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+Puede ver esto en acción en la demostración de Glitch del [`input-type-file`](https://input-type-file.glitch.me/).
+
+## Leer el contenido de un archivo {: #read-content }
+
+Para leer un archivo, use [`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader), que le permite leer el contenido de un `File` en la memoria. Puede darle instrucciones a `FileReader` a para que lea un archivo como un [búfer de matriz](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer), una [URL de datos](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) o [texto](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText).
+
+```js
+function readImage(file) {
+  // Check if the file is an image.
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+El ejemplo anterior lee un `File` proporcionado por el usuario, luego lo convierte en una URL de datos y utiliza esa URL de datos para mostrar la imagen en un elemento `img`. Echa un vistazo al Glitch de [`read-image-file`](https://read-image-file.glitch.me/) para ver cómo verificar que el usuario haya seleccionado un archivo de imagen.
+
+{% Glitch {id: 'read-image-file', height: 480}%}
+
+### Supervisar el progreso de la lectura de un archivo {: #monitor-progress }
+
+Al leer archivos grandes, puede ser útil proporcionar algo de UX para indicar cuánto ha progresado la lectura. Para eso, use el evento de [`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event), proporcionado por `FileReader` . El `progress` proporciona dos propiedades, `loaded`, la cantidad leída y `total`, la cantidad total a leer.
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // Do something with result
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+Imagen de héroe por Vincent Botta de [Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)
diff --git a/src/site/content/es/blog/referrer-best-practices/index.md b/src/site/content/es/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..5c4812b43f8
--- /dev/null
+++ b/src/site/content/es/blog/referrer-best-practices/index.md
@@ -0,0 +1,346 @@
+---
+layout: post
+title: Prácticas recomendadas de Referrer-Policy y Referer
+subhead: Prácticas recomendadas para establecer Referrer-Policy y utilizar Referrer en las solicitudes recibidas.
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: |
+  Considere la posibilidad de establecer una Referrer Policy de `strict-origin-when-cross-origin`. Esto conserva gran parte de las funciones del Referrer, a la vez que mitiga el riesgo de filtrar datos de orígenes cruzados.
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## Resumen
+
+- La filtración inesperada de información de origen cruzado dificulta la privacidad de los usuarios de la web. En este caso puede ayudar una directiva protectora Referrer-Policy.
+- Considere la posibilidad de establecer una Referrer-Policy de `strict-origin-when-cross-origin`. Esto conserva gran parte de las funciones del Referrer, a la vez que mitiga el riesgo de filtrar datos de orígenes cruzados.
+- No utilice Referrer para protegerse contra la Falsificación de solicitudes en sitios cruzados (CSRF). En vez de eso utilice [tokens CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) y otros encabezados como una capa adicional de seguridad.
+
+{% Aside %} Antes de comenzar:
+
+- Si no está seguro de la diferencia entre "sitio" y "origen", consulte [Cómo comprender "same-site" y "same-origin"](/same-site-same-origin/)[](/same-site-same-origin/).
+- Al encabezado `Referer` le falta una R, debido a un error ortográfico de origen en la especificación. El encabezado `Referrer-Policy` y `referrer` que son de JavaScript y de DOM se escriben correctamente. {% endAside %}
+
+## Referer y Referrer-Policy 101
+
+Las solicitudes HTTP pueden incluir el [encabezado `Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) de forma opcional, que indica el origen o la URL de la página web desde la que se realizó la solicitud. El [encabezado `Referrer-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) define qué datos están disponibles en el encabezado `Referer`.
+
+En el siguiente ejemplo, el encabezado `Referer` incluye la URL completa de la página en `site-one` desde la que se realizó la solicitud.
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="Solicitud HTTP que incluye un encabezado Referer", width="800", height="573" %}</figure>
+
+El encabezado `Referer` puede estar presente en diferentes tipos de solicitudes:
+
+- Solicitudes de navegación, cuando un usuario hace clic en un enlace
+- Solicitudes de subrecursos, cuando un navegador solicita imágenes, iframes, scripts y otros recursos que necesita una página.
+
+También se puede acceder a los datos de las navegaciones y los iframes a través de JavaScript utilizando `document.referrer`.
+
+El valor de `Referer` puede ser revelador. Por ejemplo, un servicio de análisis podría utilizar el valor para determinar que el 50% de los visitantes de `site-two.example` provienen de `social-network.example`.
+
+Pero cuando la dirección URL completa, incluyendo la ruta y la cadena de consulta, se envía en el `Referer` **entre orígenes**, esto puede ser **un obstáculo para la privacidad** y también plantear **riesgos de seguridad**. Eche un vistazo a estas URL:
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URL con rutas, asignadas a diferentes riesgos de privacidad y seguridad", width="800", height="370" %}</figure>
+
+Las URL del #1 al #5 contienen información privada, a veces incluso identificativa o confidencial. Filtrar estos datos de forma silenciosa a través de los orígenes puede comprometer la privacidad de los usuarios en la web.
+
+La URL #6 es una [capability URL](https://www.w3.org/TR/capability-urls/). Usted no desea que caiga en manos de nadie que no sea el usuario previsto. Si esto sucede, un ciberdelincuente podría secuestrar la cuenta de este usuario.
+
+**Para restringir los datos del Referrer que están disponibles para las solicitudes de su sitio, puede establecer una Referrer-Policy.**
+
+## ¿Qué políticas están disponibles y en qué se diferencian?
+
+Puede seleccionar una de las ocho políticas. Dependiendo de la política, los datos disponibles del encabezado `Referer` (y de `document.referrer`) pueden ser:
+
+- No hay datos (el encabezado `Referer` no está presente)
+- Solo el [origen](/same-site-same-origin/#origin)
+- La dirección URL completa: origen, ruta y cadena de consulta
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Datos que pueden estar contenidos en el encabezado Referer y document.referrer", width="800", height="255" %}</figure>
+
+Algunas políticas están diseñadas para comportarse de forma diferente dependiendo del **contexto**: solicitud de origen cruzado o del mismo origen, seguridad (si el destino de la solicitud es tan seguro como el origen), o ambos. Esto es útil para limitar la cantidad de información compartida entre orígenes o para orígenes menos seguros, mientras se mantiene la riqueza del Referrer dentro de su propio sitio.
+
+Aquí se muestra una descripción general de cómo las Referrer Policies restringen los datos de la URL disponibles en el encabezado Referer y `document.referrer`:
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Diferentes Referrer Policies and their behaviour, según la seguridad y el contexto de origen cruzado", width="800", height="537" %}</figure>
+
+MDN proporciona una [lista completa de políticas y ejemplos de comportamiento](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives).
+
+Cosas a tener en cuenta:
+
+- Todas las políticas que tienen en cuenta el esquema (HTTPS vs. HTTP) (`strict-origin`, `no-referrer-when-downgrade` y `strict-origin-when-cross-origin`) tratan las solicitudes desde un origen HTTP a otro origen HTTP de la misma manera que las solicitudes de un origen HTTPS a otro origen HTTPS, incluso si HTTP es menos seguro. Esto se debe a que, para estas políticas, lo que importa es si se produce un **downgrade** de seguridad, es decir, si la solicitud puede exponer los datos de un origen cifrado a uno sin cifrar. Una solicitud HTTP → HTTP no está cifrada todo el tiempo, por lo que no hay downgrade. Las solicitudes HTTPS → HTTP, por el contrario, presentan un downgrade.
+- Si una solicitud es **same-origin**, significa que el esquema (HTTPS o HTTP) es el mismo, por lo tanto, no hay ningún downgrade o degradación de seguridad.
+
+## Referrer Policies predeterminadas en los navegadores
+
+*A partir de julio del 2020*
+
+**Si no se establece ninguna Referrer Policy, se utilizará la política predeterminada del navegador.**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Navegador</th>
+        <th>Comportamiento/<code>Referrer-Policy</code> predeterminado</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>Se planeó el cambio a <code>strict-origin-when-cross-origin</code> en la <a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">versión 85</a> (conocida anteriormente como <code>no-referrer-when-downgrade</code>)</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">consulte el error cerrado</a>)</li>
+            <li>
+<code>strict-origin-when-cross-origin</code> en navegación privada y para rastreadores</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>Se hacen <a href="https://github.com/privacycg/proposals/issues/13">pruebas</a> con <code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Es similar a <code>strict-origin-when-cross-origin</code>. Consulte <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">Prevención del seguimiento</a> para obtener más información.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Configuración de su Referrer Policy: prácticas recomendadas
+
+{% Aside 'objective' %} Establezca explícitamente una privacy-enhancing policy, como `strict-origin-when-cross-origin` (o más estricto). {% endAside %}
+
+Hay diferentes maneras de establecer Referrer Policies en su sitio:
+
+- Como un encabezado HTTP
+- Dentro de su [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)
+- Desde JavaScript a las [bases de las solicitudes](https://javascript.info/fetch-api#referrer-referrerpolicy)
+
+Puede establecer diferentes políticas para diferentes páginas, solicitudes o elementos.
+
+Tanto el encabezado HTTP como el elemento meta están a nivel de página. El orden de precedencia al determinar la política efectiva de un elemento es:
+
+1. Política a nivel de elemento
+2. Política de nivel de página
+3. Navegador predeterminado
+
+**Ejemplo:**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+La imagen se solicitará con una política `no-referrer-when-downgrade`, mientras que todas las demás solicitudes de recursos secundarios de esta página seguirán la política `strict-origin-when-cross-origin`.
+
+## ¿Cómo ver la Referrer Policy?
+
+[securityheaders.com](https://securityheaders.com/) es útil para determinar la política que utiliza un sitio o una página específica.
+
+También puede utilizar las herramientas para desarrolladores de Chrome, Edge o Firefox para ver la Referrer Policy que se utilizó en una solicitud específica. En el momento de escribir este artículo, Safari no muestra la `Referrer-Policy` pero sí muestra la `Referer` que se envió.
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Una captura de pantalla del panel la red de Chrome DevTools, que muestra Referer y Referrer-Policy", width="800", height="416" %} <figcaption>Chrome DevTools, panel de la <b>red</b> con una solicitud seleccionada.</figcaption></figure>
+
+## ¿Qué política debe establecer en su sitio web?
+
+Resumen: establezca explícitamente una política de mejora de la privacidad como `strict-origin-when-cross-origin` (o más estricta).
+
+### ¿Por qué "explícitamente"?
+
+Si no se establece una Referrer Policy, se utilizará la política por predeterminada del navegador, de hecho, los sitios web normalmente aceptan la política predeterminada del navegador. Pero esto no es lo ideal, porque:
+
+- Las políticas predeterminadas de los navegadores son `no-referrer-when-downgrade`, `strict-origin-when-cross-origin` o más estrictas, según el navegador y el modo (privado/incógnito). Por lo tanto, su sitio web no se comportará de manera predecible en todos los navegadores.
+- Los navegadores están adoptando valores predeterminados más estrictos, como `strict-origin-when-cross-origin` y los mecanismos como cuando [referrer hace trimming](https://github.com/privacycg/proposals/issues/13) en las solicitudes de origen cruzado. Opte explícitamente por una política de mejora de la privacidad antes de que cambien los valores predeterminados del navegador le da el control y le ayuda a ejecutar las pruebas como mejor le parezca.
+
+### ¿Por qué `strict-origin-when-cross-origin` (o más estricto)?
+
+Necesita una política que sea segura, que mejore la privacidad y que sea útil, lo que significa "útil" depende de lo que desee del referrer:
+
+- **Seguro**: si su sitio web utiliza HTTPS ([si no es así, hágalo prioritario](/why-https-matters/)), no desea que las URL de su sitio web se filtren en solicitudes que no sean HTTPS. Dado que cualquiera en la red puede verlos, esto expondría a sus usuarios a ataques de persona en el medio. Las políticas `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, `no-referrer` y `strict-origin` resuelven este problema.
+- **Mejora de la privacidad**: para una solicitud de origen cruzado, `no-referrer-when-downgrade` comparte la URL completa, esto no mejora la privacidad. `strict-origin-when-cross-origin` y `strict-origin` solo comparten el origen, y `no-referrer` no comparte nada. Esto le deja con `strict-origin-when-cross-origin` `strict-origin` y `no-referrer` como opciones para mejorar la privacidad.
+- **Útil**: `no-referrer` y `strict-origin` nunca comparten la URL completa, ni siquiera para las solicitudes del mismo origen, así que si necesita esto, `strict-origin-when-cross-origin` es una mejor opción.
+
+Todo esto significa que **`strict-origin-when-cross-origin`** es generalmente una opción sensata.
+
+**Ejemplo: establecer una política de `strict-origin-when-cross-origin`**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+O del lado del servidor, por ejemplo en Express:
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### ¿Qué sucedería si `strict-origin-when-cross-origin` (o más estricto) no se adapta a todos sus casos de uso?
+
+En este caso, adopte un **enfoque progresivo** : establezca una política de protección como `strict-origin-when-cross-origin` para su sitio web y, si es necesario, una política más permisiva para solicitudes específicas o elementos HTML.
+
+### Ejemplo: política a nivel de elemento
+
+`index.html` :
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Tenga en cuenta que Safari/WebKit puede limitar `document.referrer` o el encabezado `Referer` para solicitudes [cross-site](/same-site-same-origin/#same-site-cross-site). Consulte [detalles](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/).
+
+### Ejemplo: política de nivel de solicitud
+
+`script.js` :
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### ¿Qué más debería considerar?
+
+Su política debe depender de su sitio web y de los casos de uso, esto depende de usted, su equipo y su empresa. Si algunas URL contienen datos de identificación o confidenciales, establezca una política de protección.
+
+{% Aside 'warning' %} Los datos que pueden no parecer sensibles para usted, pueden serlo para sus usuarios, o simplemente no son datos que ellos quieran o esperen que se filtren silenciosamente de origen cruzado. {% endAside %}
+
+## Uso de Referrer en las solicitudes recibidas: prácticas recomendadas
+
+### ¿Qué hacer si la funcionalidad de su sitio utiliza la URL de Referrer en las solicitudes recibidas?
+
+#### Proteja los datos de los usuarios
+
+`Referer` puede contener datos privados, personales o de identificación, así que asegúrese de tratarlos como tales.
+
+#### Tenga en cuenta que el `Referer` que recibe puede cambiar
+
+El uso de Referrer de las solicitudes entrantes de origen cruzado tiene algunas limitaciones:
+
+- Si no tiene control sobre la implementación del emisor de solicitudes, no puede hacer suposiciones sobre el encabezado `Referer` (y `document.referrer`) que recibe. El emisor de la solicitud puede decidir en cualquier momento cambiar a una política `non-referrer`, o de manera más general a una política más estricta que la que usaba antes, lo que significa que obtendrá menos datos mediante `Referer` que antes.
+- Los navegadores utilizan cada vez más la Referrer-Policy de `strict-origin-when-cross-origin` de forma predeterminada. Esto significa que ahora puede recibir solo el origen (en vez de la URL de Referrer completa) en las solicitudes recibidas de origen cruzado, si el sitio que las envía no tiene ninguna política establecida.
+- Los navegadores pueden cambiar la forma en que administran `Referer`. Por ejemplo, en el futuro, es posible que decidan los referrers siempre hagan trim a los orígenes en las solicitudes de subrecursos de origen cruzado, con el fin de proteger la privacidad del usuario.
+- El encabezado `Referer` (y `document.referrer`) puede contener más datos de los que necesita, por ejemplo una URL completa cuando solo desea saber si la solicitud es de origen cruzado.
+
+#### Alternativas a `Referer`
+
+Es posible que deba considerar alternativas si:
+
+- Una función esencial de su sitio utiliza la URL de referrer de las solicitudes entrantes de origen cruzado
+- Y/o si su sitio ya no recibe la parte de la URL de Referrer que necesita en una solicitud de origen cruzado. Esto sucede cuando el emisor de la solicitud cambió su política o cuando no tiene una política establecida y la política predeterminada del navegador cambió (como en [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+Para definir las alternativas, analice primero qué parte de referrer está utilizando.
+
+**Si solo necesita el origen ( `https://site-one.example` ):**
+
+- Si está utilizando el referrer en un script que tiene acceso de nivel superior a la página, `window.location.origin` es una alternativa.
+- Si están disponibles, los encabezados como [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) y [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) le dan el `Origin` o describen si la solicitud es de origen cruzado, que puede ser exactamente lo que necesita.
+
+**Si necesita otros elementos de la URL (ruta, parámetros de consulta…):**
+
+- Los parámetros de solicitud pueden abordar su caso de uso y esto le ahorra el trabajo de analizar el referrer.
+- Si está utilizando el referrer en un script que tiene acceso de nivel superior a la página, `window.location.pathname` puede ser una alternativa. Extraiga solo la sección de la ruta de acceso de la URL y emítala como argumento, de modo que no se transmita ninguna información potencialmente sensible de los parámetros de la URL.
+
+**Si no puede utilizar estas alternativas:**
+
+- Verifique si sus sistemas pueden cambiarse para esperar que el emisor de solicitudes ( `site-one.example` ) establezca explícitamente la información que necesita en una configuración de algún tipo. Ventaja: más explícito, más preservación de la privacidad para los usuarios de `site-one.example` Contra: potencialmente más trabajo de su lado o para los usuarios de su sistema.
+- Verifique si el sitio que emite las solicitudes puede aceptar establecer una Referrer-Policy of `no-referrer-when-downgrade` por elemento o por solicitud. Contra: potencialmente menos preservación de la privacidad para `site-one.example`, potencialmente no es compatible con todos los navegadores.
+
+### Protección contra la falsificación de solicitudes en sitios cruzados (CSRF)
+
+Tenga en cuenta que un emisor de solicitudes siempre puede decidir no enviar el referrer estableciendo una política `no-referrer` (y un actor malintencionado podría incluso falsificar el referrer).
+
+Utilice [Tokens CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) como protección principal. Para una protección adicional, utilice [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites) y en lugar de `Referer`, utilice encabezados como [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (disponible en solicitudes POST y CORS) y [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (si está disponible).
+
+### Registro de datos
+
+Asegúrese de proteger los datos personales o confidenciales de los usuarios que puedan estar en el `Referer`.
+
+Si solo está utilizando el origen, verifique si el [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) podría ser una alternativa. Esto puede brindarle la información que necesita para fines de depuración de una manera más simple y sin necesidad de analizar al Referrer.
+
+### Pagos
+
+Los proveedores de pago pueden confiar en el `Referer` de las solicitudes recibidas para controles de seguridad.
+
+Por ejemplo:
+
+- El usuario hace clic en un botón **Comprar** `online-shop.example/cart/checkout`.
+- `online-shop.example` redirecciona a `payment-provider.example` para administrar la transacción.
+- `payment-provider.example` verifica el `Referer` de esta solicitud con una lista de `Referer` permitidos establecidos por los comerciantes. Si no coincide con ninguna entrada de la lista, `payment-provider.example` rechaza la solicitud. Si coincide, el usuario puede continuar con la transacción.
+
+#### Prácticas recomendadas para los controles de seguridad del flujo de pagos
+
+**Resumen: como proveedor de pagos, puede utilizar el `Referer` como un control básico contra ataques naive, pero definitivamente debería tener otro método de verificación más confiable.**
+
+El encabezado `Referer` por sí solo no es una base confiable para una verificación: el sitio solicitante, ya sea o no un comerciante legítimo, puede establecer una política `no-referrer` que hará que la información de `Referer` no esté disponible para el proveedor de pagos. Sin embargo, como proveedor de pagos, observar el `Referer` puede ayudarle a atrapar a los atacantes ingenuos que no establecieron una política `no-referrer`. De modo que puede decidir utilizar `Referer` como primera verificación básica. Si lo hace:
+
+- **No espere que el `Referer` siempre esté presente, y si está presente solo compruebe con el dato que incluirá como mínimo: el origen**. Al establecer la lista de valores `Referer` permitidos, asegúrese de que no se incluya ninguna ruta, sino solo el origen. Ejemplo: los valores `Referer` permitidos de `online-shop.example` deben estar `online-shop.example` , no `online-shop.example/cart/checkout`. ¿Por qué? Debido a que al no esperar ningún `Referer` o un valor de `Referer` que sea el origen del sitio web solicitante, se evitan errores inesperados ya que **no está haciendo suposiciones sobre la `Referrer-Policy`** que el comerciante ha establecido o sobre el comportamiento del navegador si el comerciante no tiene una política establecida. Tanto el sitio como el navegador podrían eliminar el `Referer` enviado en la solicitud entrante solo al origen o no enviar al `Referer` en absoluto.
+- Si el `Referer` está ausente o si está presente y su verificación básica de origen de `Referer` fue exitosa: puede pasar a su otro método de verificación más confiable (ver más abajo).
+
+**¿Cuál es un método de verificación más confiable?**
+
+Un método de verificación confiable es permitir que el solicitante **codifique los parámetros de la solicitud** junto con una clave única. Como proveedor de pagos, puede **calcular el mismo hash de su lado** y solo aceptar la solicitud si coincide con su cálculo.
+
+**¿Qué sucede con el `Referer` cuando un sitio de comerciante HTTP sin una Referrer Policy redirecciona a un proveedor de pago HTTPS?**
+
+Ningún `Referer` será visible en la solicitud para el proveedor de pago HTTPS, porque la [mayoría de los navegadores](#default-referrer-policies-in-browsers) usan `strict-origin-when-cross-origin` o `no-referrer-when-downgrade` de categoría de forma predeterminada cuando un sitio web no tiene una política establecida. También tenga en cuenta que el [cambio de Chrome a una nueva política predeterminada](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) no cambiará este comportamiento.
+
+{% Aside %}
+
+Si su sitio web utiliza HTTP, [migre a HTTPS](/why-https-matters/).
+
+{% endAside %}
+
+## Conclusión
+
+Una Referrer Policy protectora es una excelente manera de brindar a sus usuarios más privacidad.
+
+Para obtener más información sobre las diferentes técnicas para proteger a sus usuarios, consulte la colección [Safe and secure](/secure/) de web.dev.
+
+*Muchas gracias por las contribuciones y comentarios a todos los revisores, especialmente a Kaustubha Govind, David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck y Kayce Basques.*
+
+## Recursos
+
+- [Entender "mismo sitio" y "mismo origen"](/same-site-same-origin/)
+- [Un nuevo encabezado de seguridad: Referrer Policy (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [Referrer Policy en MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [Encabezado del referer: preocupaciones de privacidad y seguridad en MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Cambio de Chrome: intento de implementación de Blink](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Cambio de Chrome: intención de envío de Blink](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Cambio de Chrome: entrada de estado](https://www.chromestatus.com/feature/6251880185331712)
+- [Cambio de Chrome: publicación de blog de la versión 85](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [Referrer hace trimming en el procesador de GitHub: lo que hacen los diferentes navegadores](https://github.com/privacycg/proposals/issues/13)
+- [Especificación de Referrer-Policy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/es/blog/resize-observer/index.md b/src/site/content/es/blog/resize-observer/index.md
new file mode 100644
index 00000000000..23b3cb84241
--- /dev/null
+++ b/src/site/content/es/blog/resize-observer/index.md
@@ -0,0 +1,127 @@
+---
+title: 'ResizeObserver: es similar a document.onresize para elementos'
+subhead: "`ResizeObserver` le permite saber cuando cambia el tamaño de un elemento."
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: Cultivo de plantas en cajas.
+description: "`ResizeObserver` le notifica cuando el rectángulo de contenido de un elemento cambia de tamaño para que pueda reaccionar en consecuencia."
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+Antes de `ResizeObserver`, tenía que adjuntar un oyente al evento `resize` del documento para recibir una notificación sobre cualquier cambio en las dimensiones de la ventana gráfica. En el controlador de eventos, tendría que averiguar qué elementos se vieron afectados por ese cambio e invocar una rutina específica para reaccionar de manera adecuada. Si usted necesitase las nuevas dimensiones de un elemento después de un cambio de tamaño, tendría que invocar a  `getBoundingClientRect()` o `getComputedStyle()`, lo que puede causar un desperdicio del diseño si no toma la precaución de procesar por lotes *todas* sus lecturas y *todas* sus escrituras.
+
+Esto ni siquiera cubría los casos en los que los elementos cambian de tamaño sin que se haya cambiado el tamaño de la ventana principal. Por ejemplo, agregar nuevos elementos secundarios, establecer el estilo de `display` en `none` o acciones similares pueden cambiar el tamaño de un elemento, sus hermanos o sus predecesores.
+
+Por eso `ResizeObserver` es una primitiva útil. Reacciona a los cambios de tamaño de cualquiera de los elementos observados, independientemente de la causa del cambio. También proporciona acceso al nuevo tamaño de los elementos observados.
+
+## API
+
+Todas las API con el sufijo `Observer` que mencionamos anteriormente comparten un diseño de API simple. `ResizeObserver` no es una excepción. Usted crea un objeto `ResizeObserver` y le pasa un retorno de llamada al constructor. Al retorno de llamada se le pasa una matriz de objetos `ResizeObserverEntry` (una entrada por elemento observado), que contiene las nuevas dimensiones del elemento.
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// Observa uno o varios elementos
+ro.observe(someElement);
+```
+
+## Algunos detalles
+
+### ¿Qué se informa?
+
+Generalmente, un [`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry) informa el cuadro de contenido de un elemento mediante una propiedad llamada `contentRect`, que devuelve un objeto [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly). El cuadro de contenido es el cuadro en el que se puede colocar el contenido. Es el cuadro del borde menos el relleno.
+
+<figure>{% Img src ="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="Un diagrama del modelo de caja CSS.", width="727", height="562" %}</figure>
+
+Es importante tener en cuenta que, si bien `ResizeObserver` *informa* tanto las dimensiones del `contentRect` como del relleno, solo *observa* el `contentRect`. *No* confunda `contentRect` con el cuadro delimitador del elemento. El cuadro delimitador, según lo informado por `getBoundingClientRect()`, es el cuadro que contiene el elemento completo y sus descendientes. Los SVG son una excepción a la regla, donde `ResizeObserver` informará las dimensiones del cuadro delimitador.
+
+A partir de Chrome 84, `ResizeObserverEntry` tiene tres propiedades nuevas para proporcionar información más detallada. Cada una de estas propiedades devuelve un objeto `ResizeObserverSize` que contiene una propiedad `blockSize` y una propiedad `inlineSize`. Esta información se refiere al elemento observado en el momento en que se invoca la devolución de llamada.
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+Todos estos elementos devuelven matrices de solo lectura porque en el futuro se espera que puedan admitir elementos que tengan varios fragmentos, lo que ocurre en escenarios de varias columnas. Por ahora, estas matrices solo contendrán un elemento.
+
+El soporte de la plataforma para estas propiedades es limitado, pero [Firefox ya admite](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility) las dos primeras.
+
+### ¿Cuándo se informa?
+
+La especificación proscribe que `ResizeObserver` debería procesar todos los eventos de cambio de tamaño antes del despliegue y después del diseño. Esto hace que la devolución de llamada de un `ResizeObserver` sea el lugar ideal para realizar cambios en el diseño de su página. Debido a que `ResizeObserver` ocurre entre el diseño y el despliegue, hacerlo solo invalidará el diseño, no el despliegue.
+
+### ¡Lo pillé!
+
+Quizá se esté preguntando: ¿qué sucede si cambio el tamaño de un elemento observado dentro de la devolución de llamada a `ResizeObserver`? La respuesta es: activará otra invocación a la devolución de llamada de inmediato. Afortunadamente, `ResizeObserver` tiene un mecanismo para evitar bucles de devolución de llamada infinitos y dependencias cíclicas. Los cambios solo se procesarán en el mismo marco si el elemento redimensionado está más profundo en el árbol DOM que el elemento *menos profundo* procesado en la devolución de llamada anterior. De lo contrario, se aplazarán hasta el siguiente marco.
+
+## Aplicación
+
+Una cosa que `ResizeObserver` permite hacer es implementar consultas de medios por elemento. Al observar los elementos, puede definir imperativamente los puntos de interrupción de su diseño y cambiar los estilos de un elemento. En el siguiente [ejemplo](https://googlechrome.github.io/samples/resizeobserver/), el segundo cuadro cambiará su radio de borde de acuerdo con su ancho.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// Solo observamos el segundo cuadro
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+Otro ejemplo interesante para analizar es una ventana de chat. El problema que surge en un diseño típico de conversación de arriba a abajo es el posicionamiento por desplazamiento. Para evitar que el usuario se confunda, es útil que la ventana permanezca al final de la conversación, donde aparecen los mensajes más nuevos. Además, cualquier tipo de cambio de diseño (piense en un teléfono que pasa de horizontal a vertical o viceversa) debería lograr lo mismo.
+
+`ResizeObserver` permite escribir una *sola* pieza de código que se encarga de *ambos* escenarios. Cambiar el tamaño de la ventana es un evento que un `ResizeObserver` puede capturar por definición, pero invocar a `appendChild()` también cambia el tamaño de ese elemento (a menos que se establezca un elemento `overflow: hidden` ), porque necesita hacer espacio para los nuevos elementos. Si tenemos esto en cuenta, se necesitan muy pocas líneas para lograr el efecto deseado:
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// Se observa el scrollingElement cuando la ventana se redimensione
+ro.observe(document.scrollingElement);
+// Se observa la línea de tiempo para procesar nuevos mensajes.
+ro.observe(timeline);
+```
+
+Bastante ordenado, ¿eh?
+
+Desde aquí, podría agregar más código para manejar el caso en el que el usuario se ha desplazado hacia arriba manualmente y quiere que el desplazamiento se mantenga en *ese* mensaje cuando llega un mensaje nuevo.
+
+Otro caso de uso es para cualquier tipo de elemento personalizado que esté generando su propio diseño. Antes de `ResizeObserver`, no había una forma confiable de recibir notificaciones cuando cambiaban las dimensiones para que sus elementos secundarios se pudieran distribuir nuevamente.
+
+## Conclusión
+
+`ResizeObserver` está disponible en la [mayoría de los principales navegadores](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility). En algunos casos, esa disponibilidad es bastante reciente. Hay [algunos polyfills disponibles](https://github.com/WICG/ResizeObserver/issues/3), pero no es posible duplicar completamente la funcionalidad de `ResizeObserver`. Las implementaciones actuales se basan en encuestas o en agregar elementos centinela al DOM. La primera agotará la batería del móvil al mantener la CPU ocupada, mientras que la segunda modifica su DOM y podría estropear el estilo y otros códigos que dependen del DOM.
+
+Foto de [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) .
diff --git a/src/site/content/es/blog/responsive-web-design-basics/index.md b/src/site/content/es/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..163ae70b4d8
--- /dev/null
+++ b/src/site/content/es/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,334 @@
+---
+title: Conceptos básicos del diseño web responsivo
+subhead: Cómo crear sitios que respondan a las necesidades y capacidades del dispositivo en el que se ven.
+description: |
+  Cómo crear sitios que respondan a las necesidades y capacidades del dispositivo en el que se ven.
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+{# TODO(kayce): Elimina esta Tabla de Contenidos codificado de forma rígida una vez que #1983 aterrice. #}
+
+- [Establecer la ventana gráfica](#viewport)
+- [Ajustar el tamaño del contenido a la ventana gráfica](#size-content)
+- [Utilice consultas de medios CSS para mejorar la capacidad de respuesta](#media-queries)
+- [Cómo elegir los breakpoints](#breakpoints)
+- [Ver consultas de medios con breakpoints en Chrome DevTools](#devtools)
+
+El uso de dispositivos móviles para navegar por la web continúa creciendo a un ritmo astronómico, y estos dispositivos a menudo están limitados por el tamaño de la pantalla y requieren un enfoque diferente sobre cómo se presenta el contenido en la pantalla.
+
+El diseño web responsivo, originalmente definido por [Ethan Marcotte en A List Apart](http://alistapart.com/article/responsive-web-design/), responde a las necesidades de los usuarios y a la de los dispositivos que utilizan. El diseño cambia según el tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono, los usuarios verían el contenido que se muestra en una vista de una sola columna mientras que una tableta puede mostrar el mismo contenido en dos columnas.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+Existe una multitud de tamaños de pantalla diferentes en teléfonos, "phablets", tabletas, computadoras de escritorio, consolas de juegos, televisores e incluso dispositivos portátiles. Los tamaños de pantalla cambian constantemente, por lo que es importante que su sitio pueda adaptarse a cualquier tamaño de pantalla, hoy o en el futuro. Además, los dispositivos tienen distintas características con las que interactuamos con ellos. Por ejemplo, algunos de sus visitantes utilizarán una pantalla táctil. El diseño responsivo moderno considera todas estas cosas para optimizar la experiencia para todos.
+
+## Configurar la ventana gráfica {: #viewport }
+
+Las páginas optimizadas para una variedad de dispositivos deben incluir una meta etiqueta de ventana gráfica en el encabezado del documento. Una meta etiqueta de ventana gráfica le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
+
+Para intentar brindar la mejor experiencia, los navegadores móviles representan la página con un ancho de pantalla de escritorio (generalmente alrededor de `980px`, aunque esto varía según los dispositivos) y luego intentan hacer que el contenido se vea mejor aumentando el tamaño de la fuente y escalando el contenido para que se ajuste al tamaño de la  pantalla. Esto significa que los tamaños de fuente pueden parecer inconsistentes para los usuarios que deben de tocar dos veces o pellizcar para hacer zoom para ver e interactuar con el contenido.
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+El uso del valor de la meta etiqueta de ventana gráfica  `width=device-width` indica a la página que coincida con el ancho de la pantalla en píxeles independientes del dispositivo. Un dispositivo (o densidad) de píxeles independientes es una representación de un solo píxel, el cual en una pantalla de alta densidad puede constar de muchos píxeles físicos. Esto permite que la página redistribuya el contenido para que coincida con diferentes tamaños de pantalla, ya sea renderizado en un teléfono móvil pequeño o en un monitor de escritorio grande.
+
+<figure>{% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="Una captura de pantalla de una página con un texto difícil de leer gracias a que el texto se encuentra muy alejado", width="500", height="640" %}<figcaption> Un ejemplo de cómo se carga la página en un dispositivo sin la meta etiqueta de la ventana gráfica. <a href="https://without-vp-meta.glitch.me/">Vea este ejemplo en Glitch</a> .</figcaption></figure>
+
+<figure>{% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="Una captura de pantalla de la misma página con el texto de un tamaño que se puede leer", width="500", height="888" %}<figcaption> Un ejemplo de cómo se carga la página en un dispositivo con la meta etiqueta de la ventana gráfica. <a href="https://with-vp-meta.glitch.me/">Vea este ejemplo en Glitch</a> .</figcaption></figure>
+
+[Algunos navegadores](https://css-tricks.com/probably-use-initial-scale1/) mantienen constante el ancho de la página cuando se gira al modo horizontal y hacen zoom en lugar de volver a acomodar para llenar la pantalla. Agregar el valor `initial-scale=1` indica a los navegadores que establezcan una relación 1:1 entre los píxeles del CSS y los píxeles independientes del dispositivo, independientemente de la orientación del dispositivo, y permite que la página aproveche todo el ancho.
+
+{% Aside 'caution' %} Para asegurarse de que los navegadores más antiguos puedan analizar correctamente los atributos, use una coma para separarlos. {% endAside %}
+
+La auditoría Lighthouse de [No tiene una etiqueta `<meta name="viewport">` con `width` o `initial-scale`](https://developer.chrome.com/docs/lighthouse/pwa/viewport/) puede ayudarle a automatizar el proceso de asegurarse de que sus documentos HTML estén usando la meta etiqueta de ventana gráfica correctamente.
+
+### Asegurar una ventana gráfica accesible {: #access-viewport }
+
+Además de establecer el `initial-scale`, también puede establecer los siguientes atributos en la ventana gráfica:
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+Cuando se configuran, estos pueden deshabilitar la capacidad del usuario para hacer zoom en la ventana gráfica, lo que podría causar problemas de accesibilidad. Por lo tanto, no recomendamos utilizar estos atributos.
+
+## Adapte el contenido a la ventana gráfica {: #size-content }
+
+Tanto en el escritorio como en los dispositivos móviles, los usuarios están acostumbrados a desplazarse por los sitios web verticalmente pero no horizontalmente, obligar al usuario a desplazarse horizontalmente o alejarse para ver toda la página resulta en una mala experiencia de usuario.
+
+Al desarrollar un sitio móvil con una meta etiqueta de ventana gráfica, es fácil crear accidentalmente contenido de página que no encaja del todo dentro de la ventana gráfica especificada. Por ejemplo, una imagen que se muestra con un ancho más grande que la ventana gráfica puede hacer que esta se desplace horizontalmente. Debe ajustar este contenido para que se ajuste al ancho de la ventana gráfica, de modo que el usuario no necesite desplazarse horizontalmente.
+
+La auditoría de Lighthouse del [Contenido no tiene el tamaño adecuado para la ventana gráfica](https://developer.chrome.com/docs/lighthouse/pwa/content-width/) puede ayudarle a automatizar el proceso de detección del contenido desbordado.
+
+### Imágenes {: #images }
+
+Una imagen tiene dimensiones fijas y si es más grande que la ventana gráfica, se creará una barra de desplazamiento. Una forma habitual de solucionar este problema es dar a todas las imágenes un `max-width` del `100%`. Esto hará que la imagen se encoja para ajustarse al espacio disponible, en caso de que el tamaño de la ventana gráfica sea más pequeño que el de la imagen. Sin embargo, debido a que el `max-width`, en lugar del `width` es del `100%`, la imagen no se estirará más que su tamaño natural. Por lo general, es seguro agregar lo siguiente a su hoja de estilo para que nunca tenga problemas con las imágenes que pueden causar una barra de desplazamiento.
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### Agregue las dimensiones de la imagen al elemento img {: #image-dimensions }
+
+Cuando usa `max-width: 100%`, está anulando las dimensiones naturales de la imagen, sin embargo, aún debe usar los atributos de `width` y `height` en su etiqueta `<img>`. Esto se debe a que los navegadores modernos usarán esta información para reservar espacio para la imagen antes de que se cargue, esto ayudará a evitar [cambios de diseño](/optimize-cls/) a medida que se carga el contenido.
+
+### Diseño {: #layout }
+
+Dado que las dimensiones y el ancho de la pantalla en píxeles del CSS varían ampliamente entre dispositivos (por ejemplo, entre teléfonos y tabletas, e incluso entre diferentes teléfonos), el contenido no debe depender de un ancho de ventana en particular para renderizarse bien.
+
+En el pasado, esto requería elementos de configuración que se usaban para crear un diseño basado en porcentajes. En el siguiente ejemplo, puede ver un diseño de dos columnas con elementos flotantes, con un tamaño con base en píxeles. Una vez que la ventana gráfica se vuelva más pequeña que el ancho total de las columnas, tenemos que desplazarnos horizontalmente para ver el contenido.
+
+<figure>{% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="Captura de pantalla de un diseño con dos columnas donde la segunda columna está por fuera de la ventana gráfica", width="800", height="504" %} <figcaption> Un diseño flotante que utiliza píxeles. <a href="https://layout-floats-px.glitch.me/">Vea este ejemplo en Glitch</a> .</figcaption></figure>
+
+Al usar porcentajes para los anchos, las columnas siempre quedan como un cierto porcentaje del contenedor. Esto significa que las columnas se vuelven más estrechas, en lugar de crear una barra de desplazamiento.
+
+{% Glitch {id: 'layout-floats-percent', ruta: 'README.md'}%}
+
+Las técnicas modernas de diseño de CSS como Flexbox, Diseño de cuadrículas y Multicol facilitan mucho la creación de estas cuadrículas flexibles.
+
+#### Flexbox {: #flexbox }
+
+Este método de diseño es ideal cuando tiene un conjunto de elementos de diferentes tamaños y le gustaría que encajen cómodamente en una fila o más, donde los elementos más pequeños ocupan menos espacio y los más grandes tienen más espacio.
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+En un diseño responsivo, puede usar Flexbox para mostrar elementos como una sola fila o envueltos en varias filas a medida que disminuye el espacio disponible.
+
+{% Glitch {id: 'responsive-flexbox', altura: 220}%}
+
+[Leer más sobre Flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox).
+
+#### Diseño de cuadrículas CSS  {: #grid }
+
+El diseño de cuadrícula CSS permite la creación sencilla de cuadrículas flexibles. Si consideramos el ejemplo anterior, en lugar de crear nuestras columnas con porcentajes, podríamos usar el diseño de cuadrícula y la `fr`, que representa una parte del espacio disponible en el contenedor.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+La cuadrícula también se puede utilizar para crear diseños de cuadrícula regulares, con tantos elementos como quepan. El número de pistas disponibles se reducirá a medida que se reduzca el tamaño de la pantalla. En la siguiente demostración, tenemos tantas tarjetas como quepan en cada fila, con un tamaño mínimo de `200px`.
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[Leer más sobre el diseño de cuadrículas CSS](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
+
+#### Diseño de varias columnas {: #multicol }
+
+Para ciertos tipos de diseño, puede usar un diseño de columnas múltiples (Multicol), que puede crear varias columnas responsivas con la propiedad de `column-width`. En la siguiente demostración, puede ver que se agregan columnas si hay espacio para otra columna de `200px`.
+
+{% Glitch {id: 'responsive-multicol', ruta: 'style.css'}%}
+
+[Leer más sobre Multicol](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+
+## Utilice consultas de medios CSS para mejorar la capacidad de respuesta {: #media-queries }
+
+En ocasiones, necesitará realizar cambios más extensos en su diseño para permitir a un cierto tamaño de pantalla fuera de lo que permiten las técnicas que se muestran arriba. Aquí es donde las consultas de medios se vuelven útiles.
+
+Las consultas de medios son filtros simples que se pueden aplicar a los estilos CSS. Facilitan el cambio de estilos según los tipos de dispositivos que despliegan el contenido o por las características de ese dispositivo, por ejemplo, ancho, alto, orientación, capacidad para desplazarse y si el dispositivo se está utilizando como pantalla táctil.
+
+Para proporcionar diferentes estilos de impresión, debe apuntar a un *tipo* de salida para poder incluir una hoja de estilo con los estilos de impresión de la siguiente manera:
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+Alternativamente, puede incluir estilos de impresión dentro de su hoja de estilo principal mediante una consulta de medios:
+
+```css
+@media print {
+  /* print styles go here */
+}
+```
+
+{% Aside 'note' %} También es posible incluir hojas de estilo separadas en el archivo principal de CSS mediante el sintaxis de `@import`, `@import url(print.css) print;`, sin embargo, este uso no se recomendable por razones de rendimiento. Consulte [Evitar importaciones de CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports) para obtener más detalles. {% endAside %}
+
+Para el diseño web responsivo, generalmente consultamos las *características* del dispositivo para proporcionar un diseño diferente para pantallas más pequeñas, o cuando detectamos que nuestro visitante está usando una pantalla táctil.
+
+### Consultas de medios basadas en el tamaño de la ventana gráfica {: #viewport-media-queries }
+
+Las consultas de medios nos permiten crear una experiencia responsiva donde se aplican estilos específicos a pantallas pequeñas, pantallas grandes y cualquier tamaño intermedio. La característica que estamos detectando aquí es el tamaño de la pantalla, con la cual podemos probar las siguientes cosas.
+
+- `width` ( `min-width` `max-width` )
+- `height` ( `min-height` `max-height` )
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch {id: 'media-queries-size', ruta: 'index.html'}%}
+
+Todas estas características tienen una excelente compatibilidad con los navegadores; para obtener más detalles, incluyendo la información de soporte del navegador, consulte el [ancho](https://developer.mozilla.org/docs/Web/CSS/@media/width) , la [altura](https://developer.mozilla.org/docs/Web/CSS/@media/height) , la [orientación](https://developer.mozilla.org/docs/Web/CSS/@media/orientation) y [la relación de aspecto](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio) en MDN.
+
+{% Aside 'note' %} La especificación incluyó pruebas para `device-width` y `device-height`. Estos han quedado obsoletos y deben evitarse. `device-width` y `device-height` fueron utilizados para obtener el tamaño actual de la ventana del dispositivo, lo que no fue útil en práctica porque puede ser diferente de la ventana gráfica que está mirando el usuario, por ejemplo, al cambiar el tamaño de la ventana del navegador. {% endAside %}
+
+### Consultas de medios basadas en la capacidad del dispositivo {: #capacity-media-queries }
+
+Dada la gama de dispositivos disponibles, no podemos suponer que todos los dispositivos grandes son una computadora de escritorio o una computadora laptop, o que las personas solo usan una pantalla táctil en un dispositivo pequeño. Con algunas adiciones más recientes a la especificación de consultas de medios, podemos probar características como el tipo de puntero utilizado para interactuar con el dispositivo y si el usuario puede desplazarse sobre los elementos.
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+Intente ver esta demostración en diferentes dispositivos, como una computadora de escritorio normal y en un teléfono o tableta.
+
+{% Glitch 'media-query-pointer' %}
+
+Estas funciones más recientes tienen un buen soporte en todos los navegadores modernos. Obtenga más información en las páginas de MDN para [hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover), [any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover), [pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer), [any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer).
+
+#### Usando `any-hover` y `any-pointer`
+
+Las funciones de `any-hover` y `any-pointer` comprueban si el usuario tiene la capacidad de pasar el ratón sobre un elemento (hover) o usar ese tipo de puntero, incluso si no es la forma principal en la que interactúa con su dispositivo. Tenga mucho cuidado al usarlos. ¡Obligar a un usuario a cambiar a un ratón cuando está usando su pantalla táctil no es algo fácil! Sin embargo, `any-hover` y `any-pointer` pueden ser útiles si es importante averiguar qué tipo de dispositivo tiene un usuario. Por ejemplo, una laptop con pantalla táctil y trackpad debe coincidir con punteros gruesos y finos, además de la capacidad de situar el puntero sobre un elemento.
+
+## Cómo elegir los breakpoints {: #breakpoints }
+
+No defina los breakpoints basados en clases de dispositivos. La definición de breakpoints basados en dispositivos, productos, marcas o sistemas operativos específicos que se utilizan hoy en día puede resultar en una pesadilla de mantenimiento. En cambio, el contenido en sí debería determinar cómo se ajusta el diseño a su contenedor.
+
+### Elija los breakpoints principales comenzando con algo pequeño y partir de ahí {: #major-breakpoints }
+
+Primero diseñe el contenido para que se ajuste a un tamaño de pantalla pequeño, luego expanda la pantalla hasta que sea necesario un breakpoint. Esto le permite optimizar los breakpoints según el contenido y mantener la menor cantidad de breakpoints posible.
+
+Trabajemos en el ejemplo que vimos al principio: el pronostico del clima. El primer paso es hacer que el pronóstico se vea bien en una pantalla pequeña.
+
+<figure>{% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="Captura de pantalla de una aplicación del pronostico del clima con un ancho de dispositivo móvil", width="400", height="667" %}<figcaption> La aplicación en una anchura muy estrecha.</figcaption></figure>
+
+A continuación, cambie el tamaño del navegador hasta que haya demasiado espacio en blanco entre los elementos y el pronóstico del clima no se vea tan bien. La decisión es algo subjetiva, pero por encima de `600px` es ciertamente demasiado amplia.
+
+<figure>{% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="Captura de pantalla de una aplicación meteorológica con grandes espacios entre los elementos", width="400", height="240" %} <figcaption> La aplicación en un punto en el que creemos que deberíamos modificar el diseño.</figcaption></figure>
+
+Para insertar un breakpoint en `600px`, cree dos consultas de medios al final de su CSS para el componente, una que se utilice cuando el navegador tenga `600px` o menos, y otra para cuando sea más ancho que `600px`.
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+Finalmente, refactorice el CSS. Dentro de la consulta de medios para un `max-width` de `600px`, agregue el CSS que es solo para pantallas pequeñas. Dentro de la consulta de medios para un `min-width` mínimo de `601px` agregue CSS para pantallas más grandes.
+
+#### Elija breakpoints menores cuando sea necesario
+
+Además de elegir breakpoints importantes cuando el diseño cambia significativamente, también es útil ajustarlos para cambios menores. Por ejemplo, entre los breakpoints principales puede resultar útil ajustar los márgenes o el relleno de un elemento, o aumentar el tamaño de la fuente para que se sienta más natural en el diseño.
+
+Comencemos optimizando el diseño de la pantalla pequeña. En este caso, aumentemos la fuente cuando el ancho de la ventana sea `360px`. De manera seguida, cuando hay suficiente espacio, podemos separar las temperaturas altas y bajas para que estén en la misma línea en lugar de una encima de la otra. Y también hagamos un poco más grandes los íconos del clima.
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+Del mismo modo, para las pantallas grandes, es mejor limitar el ancho máximo del panel de pronóstico para que no consuma todo el ancho de la pantalla.
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch {id: 'responsive-forecast', ruta: 'style.css'}%}
+
+### Optimiza el texto para leer
+
+La teoría clásica de la legibilidad sugiere que una columna ideal debe contener de 70 a 80 caracteres por línea (aproximadamente de 8 a 10 palabras en inglés). Por lo tanto, cada vez que el ancho de un bloque de texto supere las 10 palabras, considere agregar un breakpoint.
+
+<figure>{% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="Captura de pantalla de una página de texto en un dispositivo móvil", width="400", height="488" %} <figcaption> El texto como se lee en un dispositivo móvil.</figcaption></figure>
+
+<figure>{% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="Captura de pantalla de una página de texto en un navegador de escritorio", width="800", height="377" %} <figcaption> El texto como se lee en un navegador de escritorio con un breakpoint agregado para restringir la longitud de la línea.</figcaption></figure>
+
+Echemos un vistazo más profundo al ejemplo de la publicación anterior del blog. En pantallas más pequeñas, la fuente Roboto en `1em` funciona perfectamente acumulando 10 palabras por línea, pero las pantallas más grandes requieren un breakpoint. En este caso, si el ancho del navegador es superior a `575px`, el ancho ideal del contenido es `550px`.
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch {id: 'rwd-reading', ruta: 'index.html'}%}
+
+### Evite ocultar contenido
+
+Tenga cuidado al elegir qué contenido ocultar o mostrar según el tamaño de la pantalla. No oculte el contenido simplemente porque no puede caber en la pantalla. El tamaño de la pantalla no es una indicación definitiva de lo que puede querer un usuario. Por ejemplo, eliminar el recuento de polen del pronóstico del clima podría ser un problema grave para las personas alérgicas en primavera que necesitan la información para determinar si pueden salir o no.
+
+## Ver consultas de medios de breakpoints en Chrome DevTools {: #devtools }
+
+Una vez que haya configurado sus consultas de medios de breakpoints, querrá ver cómo se ve su sitio con ellos. Puede cambiar el tamaño de la ventana de su navegador para activar los puntos de interrupción, pero Chrome DevTools tiene una función incorporada que facilita ver cómo se ve una página en diferentes puntos de interrupción.
+
+<figure>{% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="Captura de pantalla de DevTools con nuestra aplicación del pronostico del clima abierta y un ancho de 822 píxeles seleccionados.", width="800", height="522" %} <figcaption> DevTools muestra la aplicación del pronóstico del clima a medida que se ve en un tamaño de ventana más amplio.</figcaption></figure>
+
+<figure>{% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="Captura de pantalla de DevTools con nuestra aplicación del pronostico del clima abierta y un ancho de 436 píxeles seleccionados.", width="800", height="521" %}<figcaption> DevTools muestra la aplicación del pronóstico del clima a medida que se ve en un tamaño de ventana gráfica más estrecho.</figcaption></figure>
+
+Para ver su página en diferentes breakpoints:
+
+[Abra DevTools](https://developer.chrome.com/docs/devtools/open/) y luego active el [modo de dispositivo](https://developer.chrome.com/docs/devtools/device-mode/#toggle). Esto se abre en [modo responsivo](https://developer.chrome.com/docs/devtools/device-mode/#responsive) de forma predeterminada.
+
+Para ver sus consultas de medios, abra el menú de modo de dispositivo y seleccione [Mostrar consultas de medios](https://developer.chrome.com/docs/devtools/device-mode/#queries) para mostrar sus breakpoints como barras de colores sobre su página.
+
+Haga clic en una de las barras para ver su página mientras esa consulta de medios está activa. Haga clic con el botón derecho en una barra para saltar a la definición de la consulta de medios.
diff --git a/src/site/content/es/blog/samesite-cookie-recipes/index.md b/src/site/content/es/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..e5edcdc5821
--- /dev/null
+++ b/src/site/content/es/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,156 @@
+---
+title: Recetas para usar las cookies en SameSite
+subhead: Actualice las cookies de su sitio para prepararse para los próximos cambios en el comportamiento de atributo de SameSite.
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: Con la introducción del nuevo valor de atributo SameSite=None, los sitios ahora pueden marcar explícitamente sus cookies para uso entre sitios. Los navegadores están empezando a hacer que las cookies sin un atributo SameSite actúen como propias de forma predeterminada, una opción más segura y que preserva la privacidad que el comportamiento abierto actual. Aprenda a marcar sus cookies para asegurarse de que las cookies propias y de terceros continúan funcionando una vez que este cambio entre en vigencia.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %} Este artículo es parte de una serie de artículos que hablan sobre los cambios en los atributos para cookies de `SameSite`
+
+- [Explicación sobre las cookies de SameSite](/samesite-cookies-explained/)
+- [Recetas para usar las cookies en SameSite](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+[Chrome](https://www.chromium.org/updates/same-site), [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ), [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) y otros cambiarán su comportamiento predeterminado de acuerdo con la propuesta de IETF, [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) para que:
+
+- Las cookies sin un atributo `SameSite` se traten como `SameSite=Lax`, lo que significa que el comportamiento predeterminado será restringir las cookies **solo a** contextos propios.
+- Las cookies para uso entre sitios **deben** especificar `SameSite=None; Secure` para permitir la inclusión en el contexto de terceros.
+
+Esta función es el [comportamiento predeterminado desde Chrome 84 en adelante](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html). Si aún no lo ha hecho, debe actualizar los atributos de sus cookies de terceros para que no se bloqueen en el futuro.
+
+## Compatibilidad entre navegadores
+
+Consulte la sección de [compatibilidad del navegador](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie#Browser_compatibility) de la página de [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) de MDN.
+
+## Casos de uso para cookies entre sitios o de terceros
+
+Hay una serie de casos de uso y patrones comunes en los que las cookies deben enviarse en un contexto de terceros. Si proporciona o depende de uno de estos casos de uso, asegúrese de que usted o el proveedor estén actualizando sus cookies para garantizar que el servicio continúe funcionando correctamente.
+
+### Contenido dentro de un `<iframe>`
+
+El contenido de un sitio diferente que se muestra en un `<iframe>` está en un contexto de terceros. Los casos de uso estándar aquí son:
+
+- Contenido incrustado que se comparte desde otros sitios, como videos, mapas, muestras de código y publicaciones en redes sociales.
+- Widgets de servicios externos como pagos, calendarios, reservaciones y funcionalidad de reservaciones.
+- Widgets como botones de redes sociales o servicios antifraude que crean `<iframes>` menos obvios.
+
+Las cookies se pueden utilizar aquí para, entre otras cosas, mantener el estado de la sesión, almacenar preferencias generales, habilitar estadísticas o personalizar contenido para usuarios con cuentas existentes.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="Diagrama de una ventana del navegador donde la URL del contenido incrustado no coincide con la URL de la página.", width="468", height="383 ", style="max-width: 35vw;" %}<figcaption> Si el contenido incrustado no proviene del mismo sitio que el contexto de navegación de nivel superior, es contenido de terceros.</figcaption></figure>
+
+Además, como la web es intrínsecamente componible, los `<iframes>` se utilizan para incrustar contenido que también se ve en un contexto propio o de nivel superior. Todas las cookies utilizadas por ese sitio se considerarán como cookies de terceros cuando el sitio se muestre dentro del marco. Si está creando sitios que desea que otros incrusten fácilmente y, al mismo tiempo, confía en que las cookies funcionen, también deberá asegurarse de que estén marcadas para el uso entre sitios, o que pueda retroceder con elegancia sin ellos.
+
+### Solicitudes "inseguras" entre sitios
+
+Si bien "inseguro" puede parecer un poco preocupante aquí, esto se refiere a cualquier solicitud que pueda tener la intención de cambiar de estado. En la web, se trata principalmente de solicitudes POST. Las cookies marcadas como `SameSite=Lax` se enviarán en navegaciones seguras de nivel superior, por ejemplo, al hacer clic en un enlace para ir a un sitio diferente. Sin embargo, algo como un `<form>` a través de POST a un sitio diferente no incluiría cookies.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="Diagrama de una solicitud que se mueve de una página a otra.", width="719", height="382", style="max-width: 35vw; " %}<figcaption> Si la solicitud entrante utiliza un método "seguro", se enviarán las cookies.</figcaption></figure>
+
+Este patrón se utiliza para sitios que pueden redirigir al usuario a un servicio remoto para realizar alguna operación antes de regresar, por ejemplo, redirigir a un proveedor de identidad de terceros. Antes de que el usuario abandone el sitio, se establece una cookie que contiene un token de un solo uso, con la expectativa de que este token se pueda verificar en la solicitud de retorno para mitigar los ataques de [falsificación de solicitudes entre sitios (CSRF).](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) Si esa solicitud de devolución llega a través de POST, será necesario marcar las cookies como `SameSite=None; Secure`.
+
+### Recursos remotos
+
+Cualquier recurso remoto en una página puede depender de las cookies que se enviarán con una solicitud, desde las etiquetas `<img>`, `<script>`, etc. Los casos de uso comunes incluyen el seguimiento de pixeles y la personalización de contenido.
+
+Esto también se aplica a las solicitudes iniciadas desde su JavaScript mediante `fetch` o `XMLHttpRequest`. Si se llama a `fetch()` con la [opción `credentials: 'include'`](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included), esta es un buen indicio de que se pueden esperar cookies en esas solicitudes. Para `XMLHttpRequest`, debe buscar instancias de la [propiedad `withCredentials`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials) establecida en `true`. Esta es una buen indicio de que se pueden esperar cookies en esas solicitudes. Esas cookies deberán estar debidamente marcadas para que se incluyan en las solicitudes entre sitios.
+
+### Contenido dentro de un WebView
+
+Un WebView en una aplicación específica de la plataforma funciona con un navegador, y deberá probar si se aplican las mismas restricciones o problemas. En Android, si WebView funciona con Chrome, los nuevos valores predeterminados **no** se aplicarán inmediatamente con Chrome 84. Sin embargo, la intención es aplicarlos en el futuro, por lo que aún debe probar y prepararse para esto. Además, Android permite que sus aplicaciones específicas de la plataforma establezcan cookies directamente a través de la [API de CookieManager](https://developer.android.com/reference/android/webkit/CookieManager). Al igual que con las cookies configuradas a través de encabezados o JavaScript, considere incluir `SameSite=None; Secure` si están destinadas al uso entre sitios.
+
+## Cómo implementar `SameSite` hoy
+
+Para las cookies en las que solo se necesitan en un contexto propio, lo ideal es marcarlas como `SameSite=Lax` o `SameSite=Strict` según sus necesidades. También puede optar por no hacer nada y permitir que el navegador aplique su valor predeterminado, pero esto conlleva el riesgo de un comportamiento incoherente entre los navegadores y posibles advertencias de la consola para cada cookie.
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+Para las cookies necesarias en un contexto de terceros, deberá asegurarse de que estén marcadas como `SameSite=None; Secure`. Tenga en cuenta que necesita ambos atributos juntos. Si solo especifica `None` sin `Secure` la cookie será rechazada. Sin embargo, existen algunas diferencias mutuamente incompatibles en las implementaciones del navegador, por lo que es posible que deba utilizar algunas de las estrategias de mitigación que se describen en [Manejo de clientes incompatibles](#handling-incompatible-clients) a continuación.
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### Manejo de clientes incompatibles
+
+Como estos cambios para incluir `None` y actualizar el comportamiento predeterminado aún son relativamente nuevos, existen inconsistencias entre los navegadores en cuanto a cómo se manejan estos cambios. Puede consultar la [página de actualizaciones en chromium.org](https://www.chromium.org/updates/same-site/incompatible-clients) para informarse sobre los problemas actualmente conocidos, sin embargo, no es posible decir si es exhaustivo. Si bien esto no es ideal, existen soluciones alternativas que puede emplear durante esta fase de transición. Sin embargo, la regla general es tratar a los clientes incompatibles como un caso especial. No cree una excepción para los navegadores que implementan las reglas más nuevas.
+
+La primera opción es configurar las cookies de estilo nuevo y antiguo:
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+Los navegadores que implementan el comportamiento más nuevo establecerán la cookie con el valor `SameSite`, mientras que otros navegadores pueden ignorarlo o configurarlo incorrectamente. No obstante, esos mismos navegadores establecerán la cookie `3pcookie-legacy`. Al procesar las cookies incluidas, el sitio debe verificar primero la presencia de la nueva cookie de estilo y, si no se encuentra, deberá recurrir a la cookie heredada.
+
+El siguiente ejemplo muestra cómo hacer esto en Node.js, usando el [marco Express](https://expressjs.com) y su middleware [analizador de cookies](https://www.npmjs.com/package/cookie-parser).
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // Set the new style cookie
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // And set the same value in the legacy cookie
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // check the new style cookie first
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // otherwise fall back to the legacy cookie
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+La desventaja es que esto implica configurar cookies redundantes para cubrir todos los navegadores, y requiere realizar cambios tanto en el punto de configuración como en la lectura de la cookie. Sin embargo, este enfoque debe cubrir todos los navegadores independientemente de su comportamiento y garantizar que las cookies de terceros sigan funcionando como antes.
+
+Alternativamente, en el momento de enviar la cabecera `Set-Cookie`, puede elegir detectar el cliente a través de la cadena de agente de usuario. Consulte la [lista de clientes incompatibles](https://www.chromium.org/updates/same-site/incompatible-clients) y utilice una biblioteca adecuada para su plataforma, por ejemplo, la biblioteca [ua-parser-js](https://www.npmjs.com/package/ua-parser-js) en Node.js. Es aconsejable encontrar una biblioteca para manejar la detección de agentes de usuario, ya que probablemente no desee escribir esas expresiones regulares usted mismo.
+
+El beneficio de este enfoque es que solo requiere realizar un cambio en el momento de configurar la cookie. Sin embargo, la advertencia necesaria aquí, es que el rastreo de agentes de usuario es inherentemente frágil y puede que no atrape a todos los usuarios afectados.
+
+{% Aside %}
+
+Independientemente de la opción que elija, es recomendable asegurarse de tener una forma de registrar los niveles de tráfico que atraviesan la ruta heredada. Asegúrese de tener un recordatorio o alerta para eliminar esta solución una vez que esos niveles caigan por debajo de un umbral aceptable para su sitio.
+
+{% endAside %}
+
+## Compatibilidad con `SameSite=None` en idiomas, bibliotecas y marcos
+
+La mayoría de los lenguajes y bibliotecas admiten el atributo `SameSite` para las cookies, sin embargo, la adición de `SameSite=None` todavía es relativamente nueva, lo que significa que es posible que deba solucionar algunos de los comportamientos estándar por ahora. Estos están documentados en el <a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">reporte de ejemplos de `SameSite`en GitHub</a> .
+
+## Obtener ayuda
+
+Las cookies están por todas partes y es raro que un sitio haya auditado por completo dónde se configuran y usan, especialmente una vez que se incluyen casos de uso entre sitios. Cuando encuentre un problema, puede que sea la primera vez que alguien lo encuentre, así que no dude en comunicarse:
+
+- Plantear un problema en el [repote de ejemplos de `SameSite` en GitHub.](https://github.com/GoogleChromeLabs/samesite-examples)
+- Escribir en el blog una pregunta sobre la [etiqueta "samesite" en StackOverflow](https://stackoverflow.com/questions/tagged/samesite).
+- Para problemas con el comportamiento de Chromium, genere un error a través de la [plantilla de problema [Cookies de SameSite]](https://bit.ly/2lJMd5c).
+- Siga el progreso de Chrome en la [página de actualizaciones de `SameSite`](https://www.chromium.org/updates/same-site).
diff --git a/src/site/content/es/blog/samesite-cookies-explained/index.md b/src/site/content/es/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..93b274fed81
--- /dev/null
+++ b/src/site/content/es/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,251 @@
+---
+title: Explicación de las cookies de SameSite
+subhead: Mantenga protegido su sitio aprendiendo a establecer explícitamente sus cookies entre sitios.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: Aprenda a marcar sus cookies para uso propio y de terceros con el atributo SameSite. Tambén puede mejorar la seguridad de su sitio utilizando los valores Lax y Strict de SameSite para mejorar la protección contra ataques de tipo CSRF. Especificar el nuevo atributo None le permite marcar explícitamente sus cookies para usarlas entre varios sitios.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Este artículo es parte de una serie de artículos que hablan sobre los cambios en los atributos para cookies de `SameSite`
+
+- [Explicación sobre las cookies de SameSite](/samesite-cookies-explained/)
+- [Recetas para usar las cookies en SameSite](/samesite-cookie-recipes/)
+- [Esquema en el mismo sitio](/schemeful-samesite) {% endAside %}
+
+Las cookies son uno de los métodos disponibles para agregar un estado persistente a los sitios web. A lo largo de los años, sus capacidades han crecido y evolucionado significativamente, pero también dejaron algunos problemas heredados importantes en la plataforma. Para solucionar esta situación, los navegadores (incluidos Chrome, Firefox y Edge) están modificando su comportamiento a fin de hacer cumplir más valores predeterminados que ayuden a preservar la privacidad.
+
+Cada cookie consiste en un par de variables `key=value` que incluyen una serie de atributos, los cuales controlan cuándo y dónde se utiliza esa cookie en particular. Probablemente ya haya usado estos atributos para establecer cosas como fechas de vencimiento o indicar que la cookie solo debe enviarse a través de HTTPS. Los servidores establecen las cookies cuando envían el encabezado `Set-Cookie` apropiado en su respuesta. Para obtener más información sobre este tema, puede consultar la extensión [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1), pero aquí encontrará un resumen rápido.
+
+Supongamos que tiene un blog en el que desea mostrar un promocional de "Novedades" a sus usuarios. Los usuarios pueden ignorar el promocional y entonces no lo volverán a ver por un tiempo. Sin embargo, usted puede almacenar esa preferencia en una cookie, configurarla para que caduque en un mes (2,600,000 segundos) y solo enviarla a través de HTTPS. Ese encabezado se vería de la siguiente manera:
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Se envían tres cookies a un navegador desde la respuesta contenida en un servidor", width="800", height="276", style="max-width: 35vw" %} <figcaption> Los servidores deben establecer las cookies mediante el encabezado <code>Set-Cookie</code>. </figcaption></figure>
+
+Cuando su lector vea una página que cumpla con esos requisitos, es decir, se encuentra en una conexión segura y la cookie tiene menos de un mes de antigüedad, entonces su navegador enviará el siguiente encabezado en su solicitud:
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Se envían tres cookies desde un navegador a un servidor mediante una solicitud", width="800", height="165", style="max-width: 35vw" %} <figcaption> Su navegador devuelve las cookies con el encabezado <code>Cookie</code>.</figcaption></figure>
+
+También puede agregar y leer las cookies disponibles para ese sitio en JavaScript usando `document.cookie` . Hacer una asignación hacia `document.cookie` creará o anulará una cookie con esa clave. Por ejemplo, intente hacer lo siguiente en la consola JavaScript de su navegador:
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+La lectura de `document.cookie` generará todas las cookies a las que se tiene acceso en el contexto actual, donde cada cookie estará separada por un punto y coma:
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript tiene acceso a las cookies dentro del navegador", width="600", height="382", style="max-width: 35vw" %} <figcaption> JavaScript puede acceder a las cookies mediante <code>document.cookie</code>. </figcaption></figure>
+
+Si prueba esto en una selección de sitios populares, notará que la mayoría de ellos establecen significativamente más de tres cookies. En la mayoría de los casos, esas cookies se envían a ese dominio a partir de cada solicitud, lo cual tiene varias implicaciones. El ancho de banda que se emplea para la carga suele estar más restringido para sus usuarios que la descarga, de modo que la sobrecarga en todas las solicitudes que salen agrega un retraso en el tiempo que transcurre hasta llegar al primer byte. Por este motivo, sugerimos que sea conservador en la cantidad y el tamaño de las cookies que establezca. Utilice el atributo `Max-Age` para garantizar que las cookies no permanezcan más tiempo del necesario.
+
+## ¿Qué son las cookies propias y de terceros?
+
+Si regresa a la misma selección de sitios que veía antes, probablemente notó que había cookies para una gran variedad de dominios, no solo el que visitaba en ese momento. A las cookies que coinciden con el dominio del sitio actual, es decir, el que se muestra en la barra de direcciones del navegador, se les conoce como **cookies propias**. De manera similar, las cookies cuyos dominios son distintos al del sitio que se visita en ese momento se denominan cookies de **terceros**. Esta no es una una forma para denominarlas que pueda usarse en todos los casos, pero es relativa al contexto del usuario. Es decir, la misma cookie puede ser propia o de terceros, según el sitio donde se encuentre el usuario en ese momento.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Se envían tres cookies a un navegador desde diferentes solicitudes en la misma página", width="800", height="346", style="max-width: 35vw" %}
+  <figcaption>
+    Las cookies pueden provenir de una gran variedad de dominios diferentes en una misma página.
+  </figcaption>
+</figure>
+
+Para continuar con el ejemplo anterior, digamos que una de las publicaciones de su blog tiene la imagen de un gato particularmente asombroso y está alojada en `/blog/img/amazing-cat.png` . Debido a que es una imagen bastante sorprendente, otra persona la usa directamente en su sitio. Si un visitante estuvo en su blog y tiene la cookie `promo_shown` , cuando vea la imagen `amazing-cat.png` en el sitio de la otra persona, esa cookie **se enviará** en la solicitud de esa imagen. Esto no es particularmente útil para nadie, ya que `promo_shown` no se usa de ninguna forma en el sitio de esta otra persona, solo agrega una forma de sobrecargar la solicitud.
+
+Si ese es un efecto no deseado, ¿por qué querría hacer eso? Este es el mecanismo que permite a los sitios mantener su estado cuando se utilizan en un contexto de terceros. Por ejemplo, si inserta un video de YouTube en su sitio, los visitantes verán la opción "Ver más tarde" en el reproductor. Si su visitante ya inició sesión en YouTube, esa sesión estará disponible en el reproductor integrado mediante una cookie de terceros, lo cual significa que el botón "Ver más tarde" simplemente guardará el video, en lugar de pedirle que inicie sesión o sea necesario que navegue fuera de su página y regrese de nuevo a YouTube.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="La misma cookie se envía en tres contextos diferentes", width="800", height="433", style="max-width: 35vw" %} <figcaption> Cuando visita diferentes páginas se envía una cookie en el contexto de terceros. </figcaption></figure>
+
+Una de las propiedades culturales de la web es que tiende a estar abierta de forma predeterminada. Esto es parte de lo que ha hecho posible que muchas personas creen allí su propio contenido y aplicaciones. Sin embargo, esto también ha generado una serie de problemas relacionados con la seguridad y la privacidad. Los ataques de falsificación de solicitudes entre sitios (CSRF) se basan en el hecho de que las cookies se adjuntan a cualquier solicitud con un origen determinado, sin importar quién inicie la solicitud. Por ejemplo, si visita `evil.example`, esto puede desencadenar solicitudes en `your-blog.example`, y su navegador adjuntará con gusto las cookies asociadas. Si su blog no tiene cuidado con la forma en que valida esas solicitudes, entonces la visita a `evil.example` podría desencadenar acciones como la eliminación de publicaciones o la adición de su propio contenido.
+
+Además, los usuarios cada vez son más conscientes sobre cómo se pueden utilizar las cookies para realizar un seguimiento de la actividad en varios sitios. Sin embargo, hasta ahora no ha habido una forma de indicar explícitamente cuál es su intención con la cookie. La cookie `promo_shown` solo debe enviarse en un contexto propio, mientras que una cookie de sesión para un widget que esté destinada a incrustarse en otros sitios, se coloca allí de manera intecional para proporcionar el estado de inicio de sesión en un contexto de terceros.
+
+## Indique explícitamente el uso de las cookies con el atributo `SameSite`
+
+La introducción del atributo `SameSite` (como se definió en la extensión [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00) ), le permite declarar si su cookie debe restringirse a un contexto propio o del mismo sitio. Es útil comprender exactamente lo que significa "sitio" en este contexto. El sitio es una combinación entre el sufijo del dominio y la parte del dominio que se encuentra justo antes de él. Por ejemplo, el dominio `www.web.dev` es parte del sitio `web.dev`.
+
+{% Aside 'key-term' %}
+
+Si el usuario está en `www.web.dev` y solicita una imagen de `static.web.dev`, entonces esa es una solicitud **same-site**.
+
+{% endAside %}
+
+La [lista de sufijos públicos](https://publicsuffix.org/) define esto, por lo que no se trata solo de dominios de nivel superior como `.com` sino que también incluye servicios como `github.io` . Eso permite que `your-project.github.io` y `my-project.github.io` se consideren como sitios separados.
+
+{% Aside 'key-term' %}
+
+Si el usuario está en `your-project.github.io` y solicita una imagen de `my-project.github.io` esa es una solicitud **cross-site**.
+
+{% endAside %}
+
+La introducción del atributo `SameSite` en una cookie proporciona tres formas diferentes de controlar este comportamiento. Puede optar por no especificar el atributo, o puede utilizar `Strict` o `Lax` para limitar dicha cookie a las solicitudes same-site.
+
+Si configura `SameSite` en `Strict` , su cookie solo se enviará en un contexto propio. En términos del usuario, la cookie solo se enviará si el sitio de la cookie coincide con el sitio que se muestra actualmente en la barra URL del navegador. Entonces, si la cookie `promo_shown` se establece de la siguiente manera:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+Cuando el usuario esté en su sitio, la cookie se enviará con la solicitud tal y como se esperaba. Sin embargo, al seguir un enlace a su sitio, digamos desde otro sitio o mediante el correo electrónico de un amigo, en esa solicitud inicial no se enviará la cookie. Esto es bueno cuando tiene cookies relacionadas con la funcionalidad, las cuales siempre estarán detrás de una navegación inicial, como cambiar una contraseña o realizar una compra, pero es demasiado restrictiva para la cookie `promo_shown` . Si su lector sigue el enlace que aparece en el sitio, entonces quiere que se le envíe la cookie para que puedan aplicarse sus preferencias.
+
+Ahí es donde `SameSite=Lax` entra en juego al permitir que la cookie se envíe con esta navegación de nivel superior. Revisemos el ejemplo del artículo sobre los gatos que mencionamos anteriormente, donde otro sitio hace referencia a su contenido. Ellos utilizan directamente su foto del gato y proporcionan un enlace hacia su artículo original.
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+Y la cookie se configuró de esta manera:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+Cuando el lector esté en el blog de la otra persona, la cookie **no se enviará** en el momento en que el navegador solicite la imagen `amazing-cat.png`. Sin embargo, cuando el lector siga el enlace hacia `cat.html` en su blog, esa solicitud **incluirá** la cookie. Esto hace que `Lax` sea una buena opción para las cookies que afectan la visualización del sitio con `Strict`, debido a que es útil para las cookies relacionadas con las acciones que efectúa su usuario.
+
+{% Aside 'caution' %}
+
+Ni `Strict` ni `Lax` son una solución integral para mantener la seguridad de su sitio. Las cookies se envían como parte de las solicitudes del usuario y debe tratarlas de la misma forma en que lo haría con cualquier otra entrada de él. Eso significa que debe desinfectar y validar la entrada. Nunca utilice una cookie para almacenar datos que considere un secreto del lado del servidor.
+
+{% endAside %}
+
+Finalmente existe la opción de no especificar el valor, que hasta el momento era la forma de indicar implícitamente que la cookie debe enviarse en todos los contextos. En el último borrador de la extensión [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) esto se hace explícito al introducir un nuevo valor para `SameSite=None`. De modo que puede usar `None` para comunicar claramente que la cookie debe enviarse intencionalmente en un contexto de terceros.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Las tres cookies se etiquetaron como None, Lax, o Strict dependiendo de su contexto", width="800", height="456", style="max-width: 35vw" %} <figcaption> El contexto de una cookie se indica explícitamente como <code>None</code>, <code>Lax</code>, o <code>Strict</code>. </figcaption></figure>
+
+{% Aside %}
+
+Si proporciona un servicio que otros sitios consumen, como widgets, contenido incrustado, programas para afiliados, publicidad o inicios de sesión en varios sitios, debe usar `None` para asegurarse de que su intención sea clara.
+
+{% endAside %}
+
+## Cambios en el comportamiento predeterminado cuando no se usa SameSite
+
+Si bien el atributo `SameSite` cuenta con bastante apoyo, desafortunadamente no tuvo demasiada aceptación por parte de los desarrolladores. La configuración abierta en la que se envían cookies a todas partes de forma predeterminada implica que todos los casos de uso funcionan, pero se deja vulnerable al usuario ante los CSRF y a las fugas de información de manera involuntaria. Para alentar a los desarrolladores a manifestar su intención y brindarles a los usuarios una experiencia más segura, la propuesta de IETF, [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00), establece dos cambios fundamentales:
+
+- Las cookies que no tienen un atributo `SameSite` se tratarán como `SameSite=Lax` .
+- Las cookies con `SameSite=None` también deben especificar a `Secure`, esto significa que requieren de un contexto seguro.
+
+Chrome implementa estos comportamientos predeterminados a partir de la versión 84. En [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) están disponibles para probarlos a partir de la versión Firefox 69 y, en el futuro, los convertirá en comportamientos predeterminados. Para probar estos comportamientos en Firefox, abra [`about:config`](http://kb.mozillazine.org/About:config) y configure `network.cookie.sameSite.laxByDefault`. [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) también planea cambiar sus comportamientos predeterminados.
+
+{% Aside %}
+
+Este artículo se actualizará a medida que los navegadores adicionales anuncien su compatibilidad.
+
+{% endAside %}
+
+### Cuando `SameSite=Lax` se encuentra de forma predeterminada
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+Si envía una cookie sin especificar ningún atributo `SameSite`
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+El navegador tratará esa cookie como si se hubiera especificado `SameSite=Lax`.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Si bien la intención es implementar un valor predeterminado más seguro, lo ideal sería establecer un atributo `SameSite` de manera explícita en vez de confiar en que el navegador lo aplicará por usted. Esto hace que su intención para la cookie sea explícita y aumenta la probabilidad de tener una experiencia uniforme en todos los navegadores.
+
+{% Aside 'caution' %}
+
+El comportamiento predeterminado que implementó Chrome es un poco más permisivo que un `SameSite=Lax` explícito, pues permitirá que ciertas cookies se envíen en las solicitudes POST de nivel superior. Puede ver los detalles exactos en [el anuncio de blink-dev](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ). La intención de estas medidas es convertirse en una mitigación temporal, sin embargo, aún debe corregir sus cookies entre sitios para usar `SameSite=None; Secure`.
+
+{% endAside %}
+
+### El atributo `SameSite=None` debe ser seguro
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+Cuando la cookie se establezca sin el atributo `Secure` **&nbsp;será rechazada.**
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+Debe asegurarse de conjuntar a `SameSite=None` con el atributo `Secure`.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Puede probar este comportamiento a partir de la versión Chrome 76 si habilita `about://flags/#cookies-without-same-site-must-be-secure`, y desde Firefox 69 en [`about:config`](http://kb.mozillazine.org/About:config) al configurar `network.cookie.sameSite.noneRequiresSecure`.
+
+Es necesario que lo aplique cuando configure nuevas cookies y en caso de que quiera actualizar de manera activa las cookies ya existentes, incluso si estas no están cerca de su fecha de vencimiento.
+
+{% Aside 'note' %}
+
+Si confía en algún servicio que proporcione contenido de terceros en su sitio, también debe verificar con dicho proveedor que sus servicios se actualizan continuamente. Es posible que usted también deba actualizar sus dependencias o fragmentos para garantizar que su sitio acepta el nuevo comportamiento.
+
+{% endAside %}
+
+Ambos cambios son compatibles con las versiones previas de los navegadores que implementaron correctamente la versión anterior del atributo `SameSite`, o que simplemente no lo implementaron en absoluto. Al aplicar estos cambios a sus cookies, hace explícito el uso que se tenía previsto de las mismas, en lugar de confiar en el comportamiento predeterminado del navegador. Del mismo modo, cualquier cliente que no reconozca a `SameSite=None` hasta este momento debería ignorarlo y continuar como si el atributo no se hubiera establecido.
+
+{% Aside 'warning' %}
+
+Varias versiones antiguas de los navegadores, entre los que se incluyen Chrome, Safari y UC, no son compatibles con el nuevo atributo `None` y pueden ignorar o restringir la cookie. Este comportamiento se corrige en las versiones actuales, pero es necesario que compruebe su tráfico para determinar qué proporción de sus usuarios se ven afectados. Puede ver la [lista de clientes conocidos que no son compatibles en el sitio de Chromium](https://www.chromium.org/updates/same-site/incompatible-clients).
+
+{% endAside %}
+
+## Recetas para usar las cookies en `SameSite`
+
+Si desea obtener más información sobre la manera exacta para actualizar sus cookies e implementar con éxito estos cambios en `SameSite=None`, así como la diferencia en el comportamiento del navegador, vaya al artículo de seguimiento, [Recetas para usar las cookies en SameSite](/samesite-cookie-recipes).
+
+_Me gustaría agradecer a Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner y Vivek Sekhar por todas sus contribuciones y valiosos comentarios._
+
+_Imagen Cookie hero realizada por [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/es/blog/stale-while-revalidate/index.md b/src/site/content/es/blog/stale-while-revalidate/index.md
new file mode 100644
index 00000000000..cbd92aacf61
--- /dev/null
+++ b/src/site/content/es/blog/stale-while-revalidate/index.md
@@ -0,0 +1,95 @@
+---
+title: Mantener las cosas frescas con stale-while-revalidate
+subhead: Una herramienta adicional para ayudarlo a equilibrar la inmediatez y la frescura al poner en servicio su aplicación web.
+authors:
+  - jeffposnick
+date: 2019-07-18
+description: La herramienta stale-while-revalidate ayuda a que los desarrolladores equilibren la inmediatez (cargar el contenido en caché de inmediato) y la frescura, lo que garantiza que las actualizaciones del contenido en caché se utilicen en el futuro.
+hero: image/admin/skgQgcT3q8fdBGGNL3o1.jpg
+alt: Una fotografía de una pared a medio pintar.
+tags:
+  - blog
+feedback:
+  - api
+---
+
+## ¿Qué se envió?
+
+La herramienta [`stale-while-revalidate`](https://tools.ietf.org/html/rfc5861#section-3) ayuda a que los desarrolladores equilibren la inmediatez (*cargar el contenido en caché de inmediato)* y la frescura, lo que *garantiza que las actualizaciones del contenido en caché se utilicen en el futuro*. Si mantiene un servicio web o una biblioteca de terceros que se actualiza con regularidad, o si sus activos propios tienden a tener una vida útil corta, entonces la herramienta `stale-while-revalidate` puede ser una adición útil a sus políticas existentes de almacenamiento en caché.
+
+La compatibilidad para configurar `stale-while-revalidate` junto con `max-age` en su encabezado de respuesta `Cache-Control` está disponible en  [Chrome 75](https://chromestatus.com/feature/5050913014153216) y en [Firefox 68](https://bugzilla.mozilla.org/show_bug.cgi?id=1536511).
+
+Los navegadores que no admiten `stale-while-revalidate` ignorarán silenciosamente ese valor de configuración y usarán [`max-age`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#max-age), como explicaré en breve…
+
+## ¿Qué significa?
+
+Desglosemos `stale-while-revalidate` en dos partes: la idea de que una respuesta almacenada en caché puede quedar obsoleta y el proceso de revalidación.
+
+Primero, ¿cómo sabe el navegador si una respuesta almacenada en caché quedó "obsoleta"? Un encabezado de respuesta [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) que contiene `stale-while-revalidate` también debe contener `max-age` y el número de segundos especificado mediante `max-age` es lo que determina la obsolescencia. Cualquier respuesta almacenada en caché más reciente que `max-age` se considera nueva y las respuestas almacenadas en caché más antiguas se consideran obsoletas.
+
+Si la respuesta almacenada en caché local aún es reciente, entonces se puede usar tal cual para cumplir con la solicitud de un navegador. Desde la perspectiva de `stale-while-revalidate`, no hay nada que hacer en este escenario.
+
+Pero si la respuesta almacenada en caché está obsoleta, entonces se realiza otra verificación basada en la antigüedad: ¿la antigüedad de la respuesta almacenada en caché dentro de la ventana de tiempo está cubierta por la configuración `stale-while-revalidate`?
+
+Si la antigüedad de una respuesta obsoleta cae en esta ventana, se utilizará para cumplir con la solicitud del navegador. Al mismo tiempo, se realizará una solicitud de "revalidación" contra la red de una manera que no retrase el uso de la respuesta almacenada en caché. La respuesta devuelta puede contener la misma información que la respuesta almacenada en caché anteriormente o puede ser diferente. De cualquier manera, la respuesta de la red se almacena localmente, para reemplazar lo que estaba previamente en caché y restablecer el temporizador de "frescura" utilizado durante cualquier comparación `max-age`.
+
+Sin embargo, si la respuesta obsoleta almacenada en caché es lo suficientemente antigua como para quedar fuera de la ventana de tiempo `stale-while-revalidate`, entonces no cumplirá con la solicitud del navegador. En cambio, el navegador recuperará una respuesta de la red y la usará tanto para cumplir con la solicitud inicial como para completar la memoria caché local con una nueva respuesta.
+
+## Ejemplo en vivo
+
+A continuación se muestra un ejemplo simple de una API HTTP para devolver la hora actual, más específicamente, la cantidad actual de minutos después de la hora.
+
+{% Glitch { id: 's-w-r-demo', path: 'server.js:20:15', height: 346 } %}
+
+En este escenario, el servidor web usa este encabezado `Cache-Control` en su respuesta HTTP:
+
+```text
+Cache-Control: max-age=1, stale-while-revalidate=59
+```
+
+Esta configuración significa que, si se repite una solicitud de tiempo en el siguiente segundo, el valor almacenado en caché anterior seguirá estando actualizado y se utilizará tal cual, sin ninguna revalidación.
+
+Si una solicitud se repite entre 1 y 60 segundos después, el valor almacenado en caché quedará obsoleto, pero se utilizará para cumplir con la solicitud de la API. Al mismo tiempo, "en segundo plano", se realizará una solicitud de revalidación para llenar la caché con un valor nuevo para uso futuro.
+
+Si una solicitud se repite después de más de 60 segundos, la respuesta obsoleta no se usa en absoluto, y tanto el cumplimiento de la solicitud del navegador como la revalidación de la caché dependerán de la obtención de una respuesta de la red.
+
+Este es un desglose de esos tres estados distintos, junto con la ventana de tiempo en la que cada uno de ellos se aplica a nuestro ejemplo:
+
+{% Img src="image/admin/C8lg2FSEqhTKR6WmYky3.svg", alt="Un diagrama que ilustra la información de la sección anterior.", width="719", height="370" %}
+
+## ¿Cuáles son los casos de uso comunes?
+
+Si bien el ejemplo anterior para un servicio de API "minutos después de la hora" es artificioso, ilustra el caso de uso y los servicios esperados que brindan información que debe actualizarse, pero donde cierto grado de obsolescencia es aceptable.
+
+Ejemplos menos elaborados pueden ser una API para las condiciones climáticas actuales o los titulares de noticias principales que se escribieron en la última hora.
+
+En general, cualquier respuesta que se actualice en un intervalo conocido, que sea probable que se solicite varias veces y que sea estática dentro de ese intervalo será una buena candidata para el almacenamiento en caché a corto plazo mediante `max-age`. El uso de `stale-while-revalidate` además de `max-age` aumenta la probabilidad de que las solicitudes futuras se puedan cumplir desde la caché con contenido más actualizado, sin bloquear una respuesta de la red.
+
+## ¿Cómo interactúa con los service workers?
+
+Si ha oído hablar de `stale-while-revalidate` es probable que haya sido en el contexto de [recetas](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate) utilizadas por un [service worker](/service-workers-cache-storage/).
+
+El uso de stale-while-revalidate a través de un encabezado `Cache-Control` comparte algunas similitudes con su uso en un service worker y se aplican muchas de las mismas consideraciones sobre las compensaciones de frescura y la vida útil máxima. Sin embargo, hay algunas consideraciones que debe tener en cuenta al decidir si implementar un enfoque basado en service workers o simplemente confiar en la configuración del encabezado `Cache-Control`.
+
+### Utilice un enfoque de service worker si…
+
+- Ya está utilizando un service worker en su aplicación web.
+- Necesita un control detallado sobre el contenido de sus cachés y desea implementar algo como una política de vencimiento utilizada menos recientemente. El módulo de [Vencimiento de caché](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/) de Workbox puede ayudar con esto.
+- Desea recibir una notificación cuando una respuesta obsoleta cambie en segundo plano durante el paso de revalidación. El módulo [Transmisión de actualización de caché](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/) de Workbox puede ayudar con esto.
+- Necesita este comportamiento `stale-while-revalidate` en todos los navegadores modernos.
+
+### Utilice un enfoque de control de caché si…
+
+- Preferiría no lidiar con la sobrecarga de implementar y mantener un service worker para su aplicación web.
+- Está de acuerdo con permitir que la administración automática de caché del navegador evite que sus cachés locales crezcan demasiado.
+- Está de acuerdo con un enfoque que actualmente no es compatible con todos los navegadores modernos (a partir de julio de 2019; el soporte puede crecer en el futuro).
+
+Si está utilizando un service worker y también tiene habilitado `stale-while-revalidate` para algunas respuestas a través de un encabezado `Cache-Control`, entonces el service worker, en general, tendrá la "primera grieta" al responder a una solicitud. Si el service worker decide no responder o si en el proceso de generar una respuesta realiza una solicitud de red mediante [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API), entonces el comportamiento configurado a través del encabezado `Cache-Control` terminará por entrar en vigencia.
+
+## Aprenda más
+
+- [Respuesta `stale-while-revalidate`](https://fetch.spec.whatwg.org/#concept-stale-while-revalidate-response) en la especificación de la API de recuperación.
+- [RFC 5861](https://tools.ietf.org/html/rfc5861) , que cubre la especificación inicial `stale-while-revalidate`.
+- [La caché HTTP: su primera línea de defensa](/http-cache/), de la guía "Confiabilidad de la red" en este sitio.
+
+*Imagen hero de Samuel Zeller.*
diff --git a/src/site/content/es/blog/storage-for-the-web/index.md b/src/site/content/es/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..37f79b25edf
--- /dev/null
+++ b/src/site/content/es/blog/storage-for-the-web/index.md
@@ -0,0 +1,162 @@
+---
+title: Almacenamiento para la web
+subhead: Hay muchas opciones diferentes para almacenar datos en el navegador. ¿Cuál es mejor para sus necesidades?
+authors:
+  - petelepage
+description: Hay muchas opciones diferentes para almacenar datos en el navegador. ¿Cuál es mejor para sus necesidades?
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: Pila de contenedores de envío
+feedback:
+  - api
+---
+
+Las conexiones a Internet pueden ser defectuosas o inexistentes sobre la marcha, por lo que el soporte sin conexión y el rendimiento confiable son características comunes en las [aplicaciones web progresivas](/progressive-web-apps/). Incluso en entornos inalámbricos perfectos, el uso prudente del almacenamiento en caché y otras técnicas de almacenamiento puede mejorar sustancialmente la experiencia del usuario. Hay varias formas de almacenar en caché los recursos de su aplicación estática (HTML, JavaScript, CSS, imágenes, etc.) y los datos (datos de usuario, artículos de noticias, etc.). ¿Pero cuál es la mejor solución? ¿Cuánto puede almacenar? ¿Cómo evita que se vacíe?
+
+## ¿Qué debo usar? {: #recomendación}
+
+Esta es una recomendación general para almacenar recursos:
+
+- Para obtener los recursos de red necesarios para cargar su aplicación y su contenido basado en archivos, use la [**API de almacenamiento en caché**](/cache-api-quick-guide/) (parte de [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/)).
+- Para otros datos, use [**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) (con un [promises wrapper](https://www.npmjs.com/package/idb)).
+
+IndexedDB y la API de almacenamiento en caché son compatibles con todos los navegadores modernos. Ambas son asincrónicas y no bloquearán el hilo principal. Se puede acceder a ellas desde el objetivo `window`, los web workers y los service workers, lo que facilita su uso en cualquier parte de su código.
+
+## ¿Qué pasa con otros mecanismos de almacenamiento? {: #otro }
+
+Hay varios otros mecanismos de almacenamiento disponibles en el navegador, pero tienen un uso limitado y pueden causar problemas importantes de rendimiento.
+
+[SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) es específico de una pestaña y se ajusta a la vida útil de la pestaña. Puede ser útil para almacenar pequeñas cantidades de información específica de la sesión, por ejemplo, una clave de IndexedDB. Debe usarse con precaución porque es sincrónico y bloqueará el hilo principal. Está limitado a unos 5 MB y solo puede contener cadenas. Debido a que es específico de una pestaña, los web workers o los service workers no pueden acceder a él.
+
+[LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) debe evitarse porque es sincrónico y bloqueará el hilo principal. Está limitado a unos 5 MB y solo puede contener cadenas. LocalStorage no es accesible para web workers o service workers.
+
+Las [cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) tienen ciertos usos, pero no deben usarse para almacenamiento. Las cookies se envían con cada solicitud HTTP, por lo que almacenar algo más que una pequeña cantidad de datos aumentará significativamente el tamaño de cada solicitud web. Son sincrónicas y los web workers no pueden acceder a ellas. Al igual que LocalStorage y SessionStorage, las cookies se limitan solo a cadenas.
+
+La [API del sistema de archivos](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction) y la API FileWriter proporcionan métodos para leer y escribir archivos en un sistema de archivos de espacio aislado. Si bien es asincrónica, no se recomienda porque solo está [disponible en navegadores basados en Chromium](https://caniuse.com/#feat=filesystem).
+
+La [API de acceso al sistema de archivos](/file-system-access/) se diseñó para facilitarles a los usuarios la lectura y edición de archivos en su sistema de archivos local. El usuario debe otorgar permiso antes de que una página pueda leer o escribir en cualquier archivo local, y los permisos no se conservan entre sesiones.
+
+WebSQL **no** debe utilizarse y el uso existente se debe migrar a IndexedDB. Se ha [eliminado](https://caniuse.com/#feat=sql-storage) la compatibilidad con casi todos los principales navegadores. El W3C [dejó de mantener la especificación Web SQL](https://www.w3.org/TR/webdatabase/) en 2010, sin planes de realizar más actualizaciones.
+
+**No** se debe utilizar la caché de aplicaciones y el uso existente se debe migrar a los service workers y la API de caché. Ha quedado [obsoleta](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) y la compatibilidad se eliminará de los navegadores en el futuro.
+
+## ¿Cuánto puedo almacenar? {: #cuánto }
+
+En resumen, **mucho**, al menos un par de cientos de megabytes y potencialmente cientos de gigabytes o más. Las implementaciones del navegador varían, pero la cantidad de almacenamiento disponible generalmente se basa en la cantidad de almacenamiento disponible en el dispositivo.
+
+- Chrome permite que el navegador utilice hasta el 80% del espacio total en disco. Un origen puede utilizar hasta el 60% del espacio total en disco. Puede utilizar la [API StorageManager](#check) para determinar la cuota máxima disponible. Otros navegadores basados en Chromium pueden permitir que el navegador utilice más almacenamiento. Consulte el [PR # 3896](https://github.com/GoogleChrome/web.dev/pull/3896) para obtener detalles sobre la implementación de Chrome.
+- Internet Explorer 10 y versiones posteriores pueden almacenar hasta 250 MB y le avisará al usuario cuando se hayan utilizado más de 10 MB.
+- Firefox permite que el navegador utilice hasta el 50% del espacio libre en disco. Un grupo de [eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix) (por ejemplo, `example.com`, `www.example.com` y `foo.bar.example.com`), [puede utilizar hasta 2 GB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits). Puede utilizar la [API StorageManager](#check-available) para determinar cuánto espacio queda disponible.
+- Safari (tanto de escritorio como móvil) parece permitir aproximadamente 1 GB. Cuando se alcanza el límite, Safari le pedirá al usuario que aumente el límite en incrementos de 200 MB. No pude encontrar ninguna documentación oficial sobre esto.
+    - Si se agrega una PWA a la pantalla de inicio en Safari móvil, parece crear un nuevo contenedor de almacenamiento y no se comparte nada entre la PWA y Safari móvil. Una vez que se alcanza la cuota para una PWA instalada, no parece haber ninguna forma de solicitar almacenamiento adicional.
+
+En el pasado, si un sitio excedía un cierto umbral de datos almacenados, el navegador le solicitaba al usuario que concediera permiso para utilizar más datos. Por ejemplo, si el origen usó más de 50 MB, el navegador le pedirá al usuario que le permita almacenar hasta 100 MB y luego volverá a preguntar en incrementos de 50 MB.
+
+Hoy en día, la mayoría de los navegadores modernos no le avisarán al usuario y permitirán que un sitio utilice hasta su cuota asignada. La excepción parece ser Safari, que solicita 750 MB y solicita permiso para almacenar hasta 1,1 GB. Si un origen intenta utilizar más de su cuota asignada, los intentos posteriores de escribir datos fallarán.
+
+## ¿Cómo puedo comprobar la cantidad de almacenamiento disponible? {: #comprobar }
+
+En [muchos navegadores](https://caniuse.com/#feat=mdn-api_storagemanager) , puede usar la [API StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) para determinar la cantidad de almacenamiento disponible para el origen y cuánto almacenamiento está usando. Informa el número total de bytes utilizados por IndexedDB y la API de caché, además permite calcular el espacio de almacenamiento restante aproximado disponible.
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Number of bytes used.
+  // quota.quota -> Maximum number of bytes available.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`You've used ${percentageUsed}% of the available storage.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`You can write up to ${remaining} more bytes.`);
+}
+```
+
+StorageManager aún no está [implementado](https://caniuse.com/#feat=mdn-api_storagemanager) en todos los navegadores, por lo que debe detectarlo antes de usarlo. Incluso cuando está disponible, debe detectar errores por exceso de cuota (ver más abajo). En algunos casos, es posible que la cuota disponible exceda la cantidad real de almacenamiento disponible.
+
+{% Aside %} Otros navegadores basados en Chromium pueden tener en cuenta la cantidad de espacio libre al informar la cuota disponible. Chrome no lo hace y siempre informará el 60% del tamaño real del disco. Esto ayuda a reducir la capacidad de determinar el tamaño de los recursos de origen cruzado almacenados. {% endAside %}
+
+### Inspección
+
+Durante el desarrollo, puede utilizar las DevTools de su navegador para inspeccionar los diferentes tipos de almacenamiento y borrar fácilmente todos los datos almacenados.
+
+Se agregó una nueva función en Chrome 88 que le permite anular la cuota de almacenamiento del sitio en el Panel de almacenamiento. Esta función le brinda la capacidad de simular diferentes dispositivos y probar el comportamiento de sus aplicaciones en escenarios de baja disponibilidad de disco. Vaya a **Aplicación y** luego **Almacenamiento**, habilite la **casilla de verificación Simular cuota de almacenamiento personalizada** e ingrese cualquier número válido para simular la cuota de almacenamiento.
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="Panel de almacenamiento DevTools Storage.", width="800", height="567" %}
+
+Mientras trabajaba en este artículo, escribí una [herramienta sencilla](https://storage-quota.glitch.me/) para intentar utilizar rápidamente la mayor cantidad de almacenamiento posible. Es una forma rápida y fácil de experimentar con diferentes mecanismos de almacenamiento y ver qué sucede cuando se usa toda la cuota.
+
+## ¿Cómo manejar la superación de la cuota? {: #superar-la-cuota}
+
+¿Qué debe hacer cuando se supera la cuota? Lo más importante es que siempre debe detectar y manejar los errores de escritura, ya sea un `QuotaExceededError` u otra cosa. Luego, en función del diseño de su aplicación, decida cómo manejarlo. Por ejemplo, elimine el contenido al que no se ha accedido durante mucho tiempo, elimine los datos según el tamaño o proporcione una forma para que los usuarios elijan lo que desean eliminar.
+
+Tanto IndexedDB como la API de cache arrojan un `DOMError` llamado `QuotaExceededError` cuando se ha superado la cuota disponible.
+
+### IndexedDB
+
+Si el origen ha superado su cuota, los intentos de escribir en IndexedDB fallarán. El controlador `onabort()` de la transacción, pasará un evento. El evento incluirá una `DOMException` en la propiedad del error. Si se verifica el `name` del error devolverá `QuotaExceededError`.
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+};
+```
+
+### API de caché
+
+Si el origen ha superado su cuota, los intentos de escribir en la API de caché se rechazarán con una `QuotaExceededError` `DOMException` .
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+}
+```
+
+## ¿Cómo funciona el vaciado? {: #vaciado}
+
+El almacenamiento web se clasifica en dos categorías, "Mejor esfuerzo" y "Persistente". Mejor esfuerzo significa que el navegador puede borrar el almacenamiento sin interrumpir al usuario, pero es menos duradero para datos críticos o de largo plazo. El almacenamiento persistente no se borra automáticamente cuando el almacenamiento es bajo. El usuario debe borrar manualmente este almacenamiento (a través de la configuración del navegador).
+
+De forma predeterminada, los datos de un sitio (incluidos IndexedDB, API de cache, etc.) se incluyen en la categoría de mejor esfuerzo, lo que significa que, a menos que un sitio haya [solicitado almacenamiento persistente](/persistent-storage/), el navegador puede vaciar los datos del sitio a su discreción, por ejemplo, cuando el almacenamiento del dispositivo es bajo.
+
+La política de vaciado por mejor esfuerzo es:
+
+- Los navegadores basados en Chromium comenzarán a vaciar los datos cuando el navegador se quede sin espacio, para borrar primero todos los datos del sitio origen utilizado menos recientemente, luego el siguiente, hasta que el navegador ya no supere el límite.
+- Internet Explorer 10+ no vaciará los datos, pero evitará que el origen siga escribiendo.
+- Firefox comenzará a vaciar los datos cuando se llene el espacio disponible en el disco, para borrar todos los datos del sitio origen menos utilizado recientemente, luego el siguiente, hasta que el navegador ya no supere el límite.
+- Safari anteriormente no vaciaba los datos, pero recientemente implementó un nuevo límite de siete días en todo el almacenamiento de escritura (ver más abajo).
+
+A partir de iOS, iPadOS 13.4 y Safari 13.1 en macOS, hay un límite de siete días en todo el almacenamiento de escritura de scripts, incluidos IndexedDB, el registro del service worker y la API de caché. Esto significa que Safari vaciará todo el contenido de la caché después de siete días de uso de Safari si el usuario no interactúa con el sitio. Esta política de vaciado **no se aplica a las PWA instaladas** que se han agregado a la pantalla de inicio. Consulte [Bloqueo completo de cookies de terceros y más](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) en el blog de WebKit para obtener los detalles completos.
+
+{% Aside %} Puede solicitar [almacenamiento persistente](/persistent-storage/) para su sitio a fin de proteger los datos críticos de las aplicaciones o los usuarios. {% endAside %}
+
+## Bono: ¿Por qué usar un contenedor para IndexedDB?
+
+IndexedDB es una API de bajo nivel que requiere una configuración significativa antes de su uso, lo que puede ser particularmente difícil para almacenar datos simples. A diferencia de la mayoría de las API modernas basadas en promesas, se basa en eventos. Los promise wrappers como [idb](https://www.npmjs.com/package/idb) para IndexedDB ocultan algunas de las características poderosas pero, lo que es más importante, ocultan la maquinaria compleja (por ejemplo, transacciones, control de versiones de esquemas) que viene con la biblioteca IndexedDB.
+
+## Conclusión
+
+Atrás quedaron los días del almacenamiento limitado y de incitar al usuario a almacenar más y más datos. Los sitios pueden almacenar de forma eficaz todos los recursos y datos que necesitan para funcionar. Con la [API StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate), puede determinar cuánto está disponible para usted y cuánto ha usado. Y con el [almacenamiento persistente](/persistent-storage/), a menos que el usuario lo elimine, usted puede protegerlo contra el vaciado.
+
+### Recursos adicionales
+
+- [Prácticas recomendadas de IndexedDB](/indexeddb-best-practices/)
+- [Conceptos de cuotas y almacenamiento web de Chrome](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### Gracias
+
+Un agradecimiento especial a Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink y Victor Costan por revisar este artículo. Gracias a Eiji Kitamura, Addy Osmani y Marc Cohen, quienes escribieron los artículos originales en los que se basa. Eiji escribió una herramienta útil llamada [Browser Storage Abuser](http://demo.agektmr.com/storage/) que fue útil para validar el comportamiento actual. Le permite almacenar tantos datos como sea posible y ver los límites de almacenamiento en su navegador. Gracias a Francois Beaufort, quien investigó Safari para averiguar sus límites de almacenamiento.
+
+La imagen hero es de Guillaume Bolduc en [Unsplash](https://unsplash.com/photos/uBe2mknURG4) .
diff --git a/src/site/content/es/blog/streams/index.md b/src/site/content/es/blog/streams/index.md
new file mode 100644
index 00000000000..b1f1b323fe4
--- /dev/null
+++ b/src/site/content/es/blog/streams/index.md
@@ -0,0 +1,811 @@
+---
+title: 'Flujos: la guía definitiva'
+subhead: Aprenda a usar flujos de lectura, de escritura y de transformación con la API de flujos.
+description: |2-
+
+  La API de flujos permite que JavaScript acceda mediante programación a los flujos de datos recibidos a través de la red y procesarlos según lo deseado.
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2021-02-25
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: Un arroyo de bosque con hojas caídas de colores.
+tags:
+  - blog
+  - capabilities
+---
+
+La API de flujos le permite acceder mediante programación a los flujos de datos recibidos a través de la red o creados por cualquier medio localmente y procesarlos con JavaScript. La transmisión de flujos implica dividir un recurso que desea recibir, enviar o transformar en pequeños fragmentos y luego procesar estos fragmentos poco a poco. Si bien la transmisión de flujos es algo que los navegadores hacen de todos modos cuando reciben activos como HTML o videos para mostrarlos en páginas web, esta capacidad nunca estuvo disponible para JavaScript antes de que `fetch` con flujos se introdujera en 2015.
+
+{% Aside %} La transmisión de flujos era técnicamente posible con `XMLHttpRequest`, pero [realmente no era nada agradable](https://gist.github.com/igrigorik/5736866). {% endAside %}
+
+Anteriormente, si deseaba procesar un recurso de algún tipo (ya sea un video o un archivo de texto, etc.), tendría que descargar el archivo completo, esperar a que se deserializara en un formato adecuado y luego procesar eso. Con los flujos disponibles para JavaScript, todo esto cambia. Ahora puede tratar datos sin procesar con JavaScript de forma progresiva tan pronto como estén disponibles en el cliente, sin necesidad de generar un búfer, una cadena o un blob. Esto desbloquea una serie de casos de uso, algunos de los cuales enumero a continuación:
+
+- **Efectos de video:** canalizar un flujo de video de lectura a través de una flujo de transformación que aplica efectos en tiempo real.
+- **(Des)compresión de datos:** canalizar un flujo de archivos a través de un flujo de transformación que lo (des)comprime selectivamente.
+- **Decodificación de imágenes:** canalizar un flujo de respuesta HTTP a través de un flujo de transformación que decodifica bytes en datos de mapa de bits y luego a través de otro flujo de transformación que traduce mapas de bits a PNG. Si se instala dentro del `fetch` de un service worker, esto le permite rellenar de forma transparente nuevos formatos de imagen como AVIF.
+
+## Conceptos básicos
+
+Antes de entrar en detalles sobre los distintos tipos de flujos, permítanme presentar algunos conceptos básicos.
+
+### Fragmentos
+
+Un fragmento es una **sola pieza de datos** que se escribe o se lee desde un flujo. Puede ser de cualquier tipo; los flujos pueden incluso contener fragmentos de diferentes tipos. La mayoría de las veces, un fragmento no será la unidad de datos más atómica para un flujo determinado. Por ejemplo, un flujo de bytes puede contener fragmentos que constan de unidades  `Uint8Array` de 16 KiB, en lugar de bytes individuales.
+
+### Flujos de lectura
+
+Un flujo de lectura representa una fuente de datos desde la que usted puede leer. En otras palabras, los datos **provienen** de un flujo de lectura. Concretamente, un flujo de lectura es una instancia de la clase `ReadableStream`.
+
+### Flujos de escritura
+
+Un flujo de escritura representa un destino para los datos en el que se puede escribir. En otras palabras, los datos **ingresan** a un flujo de escritura. Concretamente, un flujo de escritura es una instancia de la clase `WritableStream`.
+
+### Flujos de transformación
+
+Un flujo de transformación consta de un **par de flujos**: un flujo de escritura, conocido como su lado de escritura, y un flujo de lectura, conocido como su lado de lectura. Una metáfora del mundo real para esto sería un [intérprete simultáneo](https://en.wikipedia.org/wiki/Simultaneous_interpretation) que traduce de un idioma a otro sobre la marcha. De una manera específica para el flujo de transformación, escribir en el lado de escritura da como resultado que nuevos datos estén disponibles para leer desde el lado de lectura. Concretamente, cualquier objeto con una propiedad `writable` y una propiedad `readable` puede servir como un flujo de transformación. Sin embargo, la clase `TransformStream` estándar facilita la creación de un par de este tipo que esté correctamente entrelazado.
+
+### Cadenas de tuberías
+
+Los flujos se utilizan principalmente al **canalizarlos** entre sí. Un flujo de lectura se puede canalizar directamente a un flujo de escritura, mediante el método `pipeTo()` del flujo de lectura, o se puede canalizar primero a través de un o más flujos de transformación, mediante el método `pipeThrough()`. Un **{nbsp}conjunto de flujos canalizados en conjunto** de esta manera se denomina cadena de tuberías.
+
+### Contrapresión
+
+Una vez que se construye una cadena de tuberías, propagará señales con respecto a la rapidez con que los fragmentos deben fluir a través de ella. Si algún paso de la cadena aún no puede aceptar fragmentos, se propaga una señal hacia atrás a través de la cadena de tuberías, hasta que finalmente se le indica a la fuente original que deje de producir fragmentos tan rápido. Este proceso de **normalización del flujo** se llama contrapresión.
+
+### Procesamiento en T
+
+Un flujo de lectura puede procesarse en T (nombrado por la forma de una 'T' mayúscula) mediante su método `tee()`. Esto **bloqueará** el flujo, es decir, dejará de ser utilizable directamente. Sin embargo, creará **dos nuevos flujos**, llamados ramas, que se pueden consumir de forma independiente. El procesamiento en T también es importante porque los flujos no se pueden rebobinar ni reiniciar, explicaré más sobre esto posteriormente.
+
+<figure><comment data-md-type="comment"></comment>{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="Diagrama de una cadena de tuberías que consta de un flujo de lectura procedente de una invocación a la API Fetch que luego se canaliza a través de un flujo de transformación cuya salida se conecta y luego envía al navegador para el primer flujo de lectura resultante y a la caché del service worker para el segundo flujo de lectura resultante.", width="800", height ="430"%} <figcaption>Una cadena de tuberías.</figcaption></figure>
+
+## La mecánica de un flujo de lectura
+
+Un flujo de lectura es una fuente de datos representada en JavaScript por un objeto [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) que fluye desde una fuente subyacente. El constructor [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) crea y devuelve un objeto de flujo de lectura de los controladores dados. Hay dos tipos de fuentes subyacentes:
+
+- **Las fuentes de inserción** le envían datos constantemente cuando ha accedido a ellas, y depende de usted iniciar, pausar o cancelar el acceso al flujo. Los ejemplos incluyen flujos de video en vivo, eventos enviados por el servidor o WebSockets.
+- **Las fuentes de extracción** requieren que solicite los datos explícitamente una vez que se haya conectado. Los ejemplos incluyen operaciones HTTP a través de invocaciones `fetch()` o `XMLHttpRequest`.
+
+Los datos del flujo se leen secuencialmente en pequeños pedazos llamados **fragmentos**. Se dice que los fragmentos colocados en un flujo están en **cola**. Esto significa que están esperando en una cola listos para ser leídos. Una **cola interna** realiza un seguimiento de los fragmentos que aún no se han leído.
+
+Una **estrategia de cola** es un objeto que determina la manera en que un flujo debe señalar la contrapresión en función del estado de su cola interna. La estrategia de cola asigna un tamaño a cada fragmento y compara el tamaño total de todos los fragmentos de la cola con un número específico, conocido como **marca de agua máxima**.
+
+**Un lector** lee los fragmentos dentro del flujo. Este lector recupera los datos un fragmento a la vez, lo que le permite realizar cualquier tipo de operación que desee realizar en él. El lector más el otro código de procesamiento que lo acompaña se denominan como un **consumidor**.
+
+La siguiente construcción en este contexto se llama **controlador**. Cada flujo de lectura tiene un controlador asociado que, como su nombre lo indica, le permite controlar el flujo.
+
+Solo un lector puede leer un flujo a la vez; cuando se crea un lector y comienza a leer un flujo (es decir, se convierte en un **lector activo**), se **bloquea** para ese flujo. Si desea que otro lector se haga cargo de la lectura de su flujo, normalmente debe **liberar** el primer lector antes de hacer cualquier otra cosa (aunque puede **procesar en T** los flujos).
+
+### Crear un flujo de lectura
+
+Puede crear una flujo de lectura si invoca a su constructor [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream). El constructor tiene un argumento opcional `underlyingSource`, que representa un objeto con métodos y propiedades que definen cómo se comportará la instancia de flujo construido.
+
+#### El argumento `underlyingSource`
+
+Esto puede utilizar los siguientes métodos opcionales definidos por el desarrollador:
+
+- `start(controller)`: se invoca inmediatamente cuando se construye el objeto. El método puede acceder a la fuente del flujo y hacer cualquier otra cosa necesaria para configurar la funcionalidad del flujo. Si este proceso se realizará de forma asincrónica, el método puede devolver una promesa para señalar el éxito o el fracaso. El parámetro `controller` pasado a este método es un [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController).
+- `pull(controller)`: se puede usar para controlar el flujo a medida que se obtienen más fragmentos. Se invoca repetidamente siempre que la cola interna de fragmentos del flujo no esté llena, hasta que la cola alcance su nivel máximo. Si el resultado de invocar a `pull()` es una promesa, `pull()` no se invocará de nuevo hasta que dicha promesa se realice. Si la promesa se rechaza, el flujo tendrá errores.
+- `cancel(reason)`: se invoca cuando el consumidor del flujo cancela el flujo.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+`ReadableStreamDefaultController` admite los siguientes métodos:
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close) cierra el flujo asociado.
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue) pone en cola un fragmento determinado en el flujo asociado.
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error) provoca errores en cualquier interacción futura con el flujo asociado.
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('El primer fragmento');
+},
+/* … */
+```
+
+#### El argumento `queuingStrategy`
+
+El segundo argumento igualmente opcional del constructor `ReadableStream()` es `queuingStrategy`. Es un objeto que opcionalmente define una estrategia de cola para el flujo, que toma dos parámetros:
+
+- `highWaterMark`: un número no negativo que indica la marca de agua máxima del flujo que utiliza esta estrategia de cola.
+- `size(chunk)`: una función que calcula y devuelve el tamaño finito no negativo del valor del fragmento dado. El resultado se utiliza para determinar la contrapresión, que se manifiesta a través de la propiedad `ReadableStreamDefaultController.desiredSize`. También gobierna el momento en que se invoca al método `pull()`.
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} Puede definir su propia `queuingStrategy` personalizada o utilizar una instancia de [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) o [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) para el valor de este objeto. Si no se suministra una `queuingStrategy`, el valor predeterminado utilizado será el mismo que `CountQueuingStrategy` con una `highWaterMark` de `1`. {% endAside %}
+
+#### Los métodos `getReader()` y `read()`
+
+Para leer desde un flujo de lectura, necesita un lector, que será un [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader). El método `getReader()` de la interfaz `ReadableStream` crea un lector y bloquea el flujo en él. Mientras que el flujo esté bloqueado, no se puede adquirir ningún otro lector hasta que se libere este.
+
+El método [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read) de la interfaz `ReadableStreamDefaultReader` devuelve una promesa que proporciona acceso al siguiente fragmento de la cola interna del flujo. Se cumple o se rechaza con un resultado en función del estado del flujo. Las diferentes posibilidades son las siguientes:
+
+- Si hay un fragmento disponible, la promesa se cumplirá con un objeto de la forma<br> `{ value: chunk, done: false }`.
+- Si el flujo se cierra, la promesa se cumplirá con un objeto de la forma<br> `{ value: undefined, done: true }`.
+- Si el flujo tiene errores, la promesa se rechazará con el error correspondiente.
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('The stream is done.');
+    break;
+  }
+  console.log('Just read a chunk:', value);
+}
+```
+
+#### La propiedad `locked`
+
+Puede comprobar si un flujo de lectura está bloqueado si accede a su propiedad [`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked).
+
+```js
+const locked = readableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Muestras de código de flujo de lectura
+
+El siguiente ejemplo de código muestra todos los pasos en acción. Primero cree un `ReadableStream` que en su argumento `underlyingSource` (es decir, la clase `TimestampSource`) defina un método `start()`. Este método le indica al `controller` del flujo que `enqueue()` (ponga en cola) una marca de tiempo cada segundo durante diez segundos. Finalmente, le dice al controlador que `close()` (cierre) el flujo. Usted consume este flujo al crear un lector mediante el método `getReader()` y al invocar a `read()` hasta que el flujo se indique como `done` (finalizado).
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // Add the string to the stream.
+      controller.enqueue(string);
+      console.log(`Enqueued ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // Close the stream after 10s.
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // This is called if the reader cancels.
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // The `read()` method returns a promise that
+    // resolves when a value has been received.
+    const { done, value } = await reader.read();
+    // Result objects contain two properties:
+    // `done`  - `true` if the stream has already given you all its data.
+    // `value` - Some data. Always `undefined` when `done` is `true`.
+    if (done) return result;
+    result += value;
+    console.log(`Read ${result.length} characters so far`);
+    console.log(`Most recently read chunk: ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('Stream complete', result));
+```
+
+### Iteración asincrónica
+
+Comprobar sobre cada iteración del bucle `read()` si el flujo está `done` (finalizado) quizá no sea la API más conveniente. Afortunadamente, pronto habrá una mejor manera de hacer esto, la iteración asincrónica.
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %} La iteración asincrónica aún no está implementada en ningún navegador. {% endAside %}
+
+Una solución alternativa a utilizar la iteración asincrónica hoy en día es implementar el comportamiento con una función auxiliar. Esto le permite usar la función en su código como se muestra en el fragmento a continuación.
+
+```js
+function streamAsyncIterator(stream) {
+  // Get a lock on the stream:
+  const reader = stream.getReader();
+
+  return {
+    next() {
+      // Stream reads already resolve with {done, value}, so
+      // we can just call read:
+      return reader.read();
+    },
+    return() {
+      // Release the lock if the iterator terminates.
+      reader.releaseLock();
+      return {};
+    },
+    // for-await calls this on whatever it's passed, so
+    // iterators tend to return themselves.
+    [Symbol.asyncIterator]() {
+      return this;
+    },
+  };
+}
+
+async function example() {
+  const response = await fetch(url);
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    console.log(chunk);
+  }
+}
+```
+
+### Procesar en T un flujo de lectura
+
+El método [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) de la interfaz `ReadableStream` procesa en T el flujo de lectura actual, para devolver una matriz de dos elementos que contiene las dos ramas resultantes como nuevas instancias de `ReadableStream`. Esto permite que dos lectores lean un flujo simultáneamente. Usted puede hacer esto, por ejemplo, en un service worker si desea obtener una respuesta del servidor y transmitirla al navegador, pero también transmitirla a la caché del service worker. Dado que un cuerpo de respuesta no se puede consumir más de una vez, necesita dos copias para hacer esto. Para cancelar el flujo, debe cancelar ambas ramas resultantes. El inicio de un flujo generalmente la bloqueará durante el tiempo que dure, lo que evitará que otros lectores lo bloqueen.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called `read()` when the controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+// Create two `ReadableStream`s.
+const [streamA, streamB] = readableStream.tee();
+
+// Read streamA iteratively one by one. Typically, you
+// would not do it this way, but you certainly can.
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// Read streamB in a loop. This is the more common way
+// to read data from the stream.
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## Flujos de bytes de lectura
+
+Para los flujos que representan bytes, se proporciona una versión extendida del flujo de lectura para manejar bytes de manera eficiente, en particular al minimizar las copias. Los flujos de bytes permiten que se adquieran los lectores "traiga su propio búfer" (bring-your-own-buffer, BYOB). La implementación predeterminada puede proporcionar un rango de salidas diferentes, como cadenas o búferes de matriz en el caso de WebSockets, mientras que los flujos de bytes garantizan la salida de bytes. Además, los lectores BYOB tienen beneficios de estabilidad. Esto se debe a que si un búfer se desconecta, puede garantizar que no se escriba en el mismo búfer dos veces, para evitar así las condiciones de carrera. Los lectores BYOB pueden reducir la cantidad de veces que el navegador necesita ejecutar la recolección de basura, ya que puede reutilizar los búferes.
+
+### Crear un flujo de bytes de lectura
+
+Puede crear un flujo de bytes de lectura si pasa un parámetro adicional `type` al constructor `ReadableStream()`.
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### El argumento `underlyingSource`
+
+La fuente subyacente de un flujo de bytes de lectura recibe un `ReadableByteStreamController` para su manipulación. Su método `ReadableByteStreamController.enqueue()` toma un `chunk` cuyo valor es una `ArrayBufferView`. La propiedad `ReadableByteStreamController.byobRequest` devuelve la solicitud de extracción BYOB actual, o un valor nulo si no hay ninguna. Finalmente, la propiedad `ReadableByteStreamController.desiredSize` devuelve el tamaño deseado para llenar la cola interna del flujo controlado.
+
+### El argumento `queuingStrategy`
+
+El segundo argumento, igualmente opcional del constructor `ReadableStream()` es `queuingStrategy`. Es un objeto que define opcionalmente una estrategia de cola para el flujo, que toma un parámetro:
+
+- `highWaterMark`: un número no negativo de bytes que indica la marca de agua máxima del flujo que utiliza esta estrategia de cola. Esto se utiliza para determinar la contrapresión, que se manifiesta mediante de la propiedad `ReadableByteStreamController.desiredSize`. También controla el momento en que se invoca el método `pull()`.
+
+{% Aside %} A diferencia de las estrategias de cola para otros tipos de flujo, una estrategia de cola para un flujo de bytes de lectura no tiene una función de `size(chunk)`. El tamaño de cada fragmento siempre está determinado por su propiedad `byteLength`. {% endAside %}
+
+{% Aside %} Si no se suministra una `queuingStrategy`, el valor predeterminado utilizado es uno con una `highWaterMark` igual a `0`. {% endAside %}
+
+#### Los métodos `getReader()` y `read()`
+
+Posteriormente, puede obtener acceso a un `ReadableStreamBYOBReader` si configura el parámetro `mode` en consecuencia: `ReadableStream.getReader({ mode: "byob" })`. Esto permite un control más preciso sobre la asignación del búfer para evitar copias. Para leer del flujo de bytes, debe invocar a `ReadableStreamBYOBReader.read(view)`, donde `view` es una [`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView).
+
+#### Ejemplo de código de flujo de bytes de lectura
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("The first 1024 bytes, or less:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+La siguiente función devuelve flujos de bytes de lectura que permiten una lectura eficiente de copia cero de una matriz generada aleatoriamente. En lugar de utilizar un tamaño de fragmento predeterminado de 1024, intenta llenar el búfer proporcionado por el desarrollador, lo que permite un control total.
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // Even when the consumer is using the default reader,
+      // the auto-allocation feature allocates a buffer and
+      // passes it to us via `byobRequest`.
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## La mecánica de un flujo de escritura
+
+Un flujo de escritura es un destino en el que puede escribir datos, representados en JavaScript por un objeto [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream). Esto sirve como una abstracción sobre la parte superior de un **receptor de datos subyacente,** un receptor de datos de E/S de nivel inferior en el que se escriben los datos sin procesar.
+
+Los datos se escriben en el flujo a través de un **escritor**, un fragmento a la vez. Un fragmento puede adoptar una multitud de formas, al igual que los fragmentos de un lector. Puede utilizar cualquier código que desee para producir los fragmentos listos para escritura; al escritor más el código asociado se le conoce como **productor**.
+
+Cuando se crea un escritor y comienza a escribir en un flujo (un **escritor activo**), se dice que está **bloqueado**. Solo un escritor puede escribir en un flujo de escritura a la vez. Si desea que otro escritor comience a escribir en su flujo, normalmente debe liberarlo antes de adjuntar otro escritor.
+
+Una **cola interna** realiza un seguimiento de los fragmentos que se han escrito en el flujo pero que el receptor subyacente aún no ha procesado.
+
+Una **estrategia de cola** es un objeto que determina cómo un flujo debe señalar la contrapresión en función del estado de su cola interna. La estrategia de cola asigna un tamaño a cada fragmento y compara el tamaño total de todos los fragmentos de la cola con un número específico, conocido como **marca de agua máxima**.
+
+La construcción final se llama **controlador**. Cada flujo de escritura tiene un controlador asociado que le permite controlar el flujo (por ejemplo, cancelarlo).
+
+### Crear un flujo de escritura
+
+La interfaz [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) de la API de flujos proporciona una abstracción estándar para escribir los datos de transmisión de flujos hacia un destino, conocido como receptor. Este objeto viene con contrapresión y cola incorporadas. Puede crear un flujo de escritura si invoca a su constructor [`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream). Tiene un parámetro `underlyingSink` opcional, que representa un objeto con métodos y propiedades que definen cómo se comportará la instancia de flujo construida.
+
+#### El parámetro `underlyingSink`
+
+El parámetro `underlyingSink` puede incluir los siguientes métodos opcionales definidos por el desarrollador. El parámetro `controller` que se pasa a algunos de los métodos es un [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController).
+
+- `start(controller)`: este método se invoca inmediatamente cuando se construye el objeto. El contenido de este método debe tener como objetivo obtener acceso al receptor de datos subyacente. Si este proceso se realizará de forma asincrónica, puede devolver una promesa para señalar el éxito o el fracaso.
+- `write(chunk, controller)`: este método se invocará cuando un nuevo fragmento de datos (especificado en el `chunk`) esté listo para escribirse en el receptor de datos subyacente. Puede devolver una promesa para señalar el éxito o el fracaso de la operación de escritura. Este método se invocará solo después de que las escrituras anteriores hayan tenido éxito y nunca después de que el flujo se cierre o se anule.
+- `close(controller)`: este método se invocará si la aplicación indica que ha terminado de escribir fragmentos en el flujo. El contenido debe hacer todo lo necesario para finalizar las escrituras en el receptor de datos subyacente y liberar el acceso a él. Si este proceso es asincrónico, puede devolver una promesa para señalar el éxito o el fracaso. Este método se invocará solo después de que todas las escrituras en cola hayan tenido éxito.
+- `abort(reason)`: este método se invocará si la aplicación indica que desea cerrar abruptamente el flujo y ponerla en un estado con errores. Puede limpiar cualquier recurso retenido, al igual que `close()`, pero se invocará a `abort()` incluso si las escrituras están en cola. Esos fragmentos se desecharán. Si este proceso es asincrónico, puede devolver una promesa para señalar el éxito o el fracaso. El parámetro `reason` contiene una `DOMString` que describe por qué se canceló el flujo.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+La interfaz [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController) de la API de flujos representa un controlador que permite el control del estado de un `WritableStream` durante la configuración, a medida que se envían más fragmentos para escritura o al final de la escritura. Al construir un `WritableStream`, el receptor de datos subyacente recibe una instancia `WritableStreamDefaultController` correspondiente para manipular. El `WritableStreamDefaultController` solo tiene un método: [`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error), que provoca que cualquier interacción futura con el flujo asociado produzca errores.
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // Try to do something dangerous with `chunk`.
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### El argumento `queuingStrategy`
+
+El segundo argumento, igualmente opcional, del constructor `WritableStream()` es `queuingStrategy`. Es un objeto que opcionalmente define una estrategia de cola para el flujo, que toma dos parámetros:
+
+- `highWaterMark`: un número no negativo que indica la marca de agua máxima del flujo que utiliza esta estrategia de cola.
+- `size(chunk)`: una función que calcula y devuelve el tamaño finito no negativo del valor de fragmento dado. El resultado se utiliza para determinar la contrapresión, que se manifiesta a través de la propiedad `WritableStreamDefaultWriter.desiredSize`.
+
+{% Aside %} Puede definir su propia `queuingStrategy` personalizada o utilizar una instancia de [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) o [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) para este valor de objeto. Si no se suministra una `queuingStrategy`, el valor predeterminado utilizado es el mismo que `CountQueuingStrategy` con una `highWaterMark` de `1`. {% endAside %}
+
+#### Los métodos `getWriter()` y `write()`
+
+Para escribir en un flujo de escritura, necesita un escritor, que será `WritableStreamDefaultWriter`. El método `getWriter()` de la interfaz `WritableStream` devuelve una nueva instancia de `WritableStreamDefaultWriter` y bloquea el flujo en esa instancia. Mientras el flujo esté bloqueado, no se puede adquirir ningún otro escritor hasta que se libere el actual.
+
+El método [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write) de la interfaz [`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) escribe un fragmento de datos pasado en un `WritableStream` y su receptor de datos subyacente, luego devuelve una promesa que se resuelve para indicar el éxito o el fracaso de la operación de escritura. Tenga en cuenta que lo que significa "éxito" depende del receptor de datos subyacente; podría indicar que el fragmento ha sido aceptado y no necesariamente que se haya guardado de forma segura en su destino final.
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('The first chunk!');
+```
+
+#### La propiedad `locked`
+
+Puede comprobar si un flujo de escritura está bloqueado si accede a su propiedad [`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked).
+
+```js
+const locked = writableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Ejemplo de código de flujo de escritura
+
+El siguiente ejemplo de código muestra todos los pasos en acción.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[start]');
+  },
+  async write(chunk, controller) {
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // Wait to add to the write queue.
+  await writer.ready;
+  console.log('[ready]', Date.now() - start, 'ms');
+  // The Promise is resolved after the write finishes.
+  writer.write(char);
+}
+await writer.close();
+```
+
+### Canalización de un flujo de lectura a un flujo de escritura
+
+Un flujo de lectura se puede canalizar a un flujo de escritura mediante el método [`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo). `ReadableStream.pipeTo()` canaliza el `ReadableStream` actual a un `WritableStream` dado y devuelve una promesa que se cumple cuando el proceso de canalización se completa con éxito, o se rechaza si se encuentra algún error.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start readable]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called when controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // Called by constructor
+    console.log('[start writable]');
+  },
+  async write(chunk, controller) {
+    // Called upon writer.write()
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[finished]');
+```
+
+## Crear un flujo de transformación
+
+La interfaz `TransformStream` de la API de flujos representa un conjunto de datos transformables. Puede crear un flujo de transformación si invoca a su constructor `TransformStream()`, que crea y devuelve un objeto de flujo de transformación a partir de los controladores dados. El constructor `TransformStream()` acepta como primer argumento un objeto JavaScript opcional que representa el `transformer`. Dichos objetos pueden contener cualquiera de los siguientes métodos:
+
+### El método `transformer`
+
+- `start(controller)`: este método se invoca inmediatamente cuando se construye el objeto. Por lo general, esto se usa para poner en cola fragmentos de prefijo, mediante `controller.enqueue()`. Esos fragmentos se leerán desde el lado de lectura, pero no dependen de ninguna escritura en el lado de escritura. Si este proceso inicial es asincrónico, por ejemplo, porque se necesita algo de esfuerzo para adquirir los fragmentos de prefijo, la función puede devolver una promesa para señalar el éxito o el fracaso; una promesa rechazada producirá un error en el flujo. Cualquier excepción lanzada será relanzada por el constructor `TransformStream()`.
+- `transform(chunk, controller)`: este método se invoca cuando un nuevo fragmento originalmente escrito en el lado de escritura está listo para ser transformado. La implementación del flujo garantiza que esta función se invoque solo después de que las transformaciones anteriores hayan tenido éxito, y nunca antes de que `start()` se haya completado o después de que `flush()` se haya invocado. Esta función realiza el trabajo de transformación real del flujo de transformación. Puede poner los resultados en cola mediante `controller.enqueue()`. Esto permite que un solo fragmento escrito en el lado de escritura resulte en cero o en varios fragmentos en el lado de lectura, en función de cuántas veces se se invoque a `controller.enqueue()`. Si el proceso de transformación es asincrónico, esta función puede devolver una promesa para señalar el éxito o el fracaso de la transformación. Una promesa rechazada generará errores en los lados de lectura y de escritura del flujo de transformación. Si no se usa un método `transform()`, se usa la transformación de identidad, que pone en cola fragmentos sin cambios desde el lado de escritura al lado de lectura.
+- `flush(controller)`: este método se invoca después de que todos los fragmentos escritos en el lado de escritura se hayan transformado al pasar con éxito a través de `transform()`, y el lado de escritura esté a punto de cerrarse. Por lo general, esto se usa para poner en cola fragmentos de sufijos en el lado de lectura, antes de que también se cierre. Si el proceso de vaciado es asincrónico, la función puede devolver una promesa para señalar el éxito o el fracaso; el resultado se comunicará a la instancia que invoque `stream.writable.write()`. Además, una promesa rechazada generará errores en los lados del flujo de lectura y escritura. El lanzamiento de una excepción se trata de la misma forma que la devolución de una promesa rechazada.
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### Las estrategias de cola `writableStrategy` y `readableStrategy`
+
+El segundo y tercer parámetros opcionales del constructor `TransformStream()` son las estrategias opcionales de cola `writableStrategy` y `readableStrategy`. Se definen como se describe en las secciones de flujo de [lectura](#the-queuingstrategy) y de [escritura](#the-queuingstrategy-3) respectivamente.
+
+### Ejemplo de código de flujo de transformación
+
+El siguiente ejemplo de código muestra un flujo de transformación simple en acción.
+
+```js
+// Note that `TextEncoderStream` and `TextDecoderStream` exist now.
+// This example shows how you would have done it before.
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+### Canalización de un flujo de lectura a través de un flujo de transformación
+
+El método [`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough) de la interfaz `ReadableStream` proporciona una forma encadenable de canalizar el flujo actual a través de un flujo de transformación o cualquier otro par de escritura/lectura. La canalización de un flujo generalmente lo bloqueará durante la duración de la tubería, evitando que otros lectores lo bloqueen.
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // called by constructor
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // called read when controller's queue is empty
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close(); // or controller.error();
+  },
+  cancel(reason) {
+    // called when rs.cancel(reason)
+    console.log('[cancel]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+El siguiente ejemplo de código (un poco artificial) muestra cómo se podría implementar una versión "vociferante" de `fetch()` que pone en mayúsculas todo el texto al consumir la promesa de respuesta devuelta [como un flujo](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream) y al poner en mayúsculas fragmento por fragmento. La ventaja de este enfoque es que no es necesario esperar a que se descargue todo el documento, lo que puede marcar una gran diferencia cuando se trata de archivos grandes.
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## Soporte de navegador y polyfill
+
+La compatibilidad de los navegadores con la API de flujos varía. Asegúrese de verificar la sección [¿Puedo usarla?](https://caniuse.com/streams) para obtener datos de compatibilidad detallados. Tenga en cuenta que algunos navegadores solo tienen implementaciones parciales de ciertas características, así que asegúrese de verificar los datos a fondo.
+
+La buena noticia es que hay una [implementación de referencia](https://github.com/whatwg/streams/tree/master/reference-implementation) disponible y un [polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) destinado al uso en producción.
+
+{% Aside 'gotchas' %} Si es posible, cargue el polyfill condicionalmente y solo si la función incorporada no está disponible. {% endAside %}
+
+## Demostración
+
+La siguiente demostración muestra flujos de lectura, de escritura y de transformación en acción. También incluye ejemplos de las cadenas de tubería `pipeThrough()` y `pipeTo()` y además demuestra el uso de `tee()`. Opcionalmente, puede ejecutar la [demostración](https://streams-demo.glitch.me/) en su propia ventana o ver el [código fuente](https://glitch.com/edit/#!/streams-demo?path=script.js).
+
+{% Glitch 'streams-demo' %}
+
+## Flujos útiles disponibles en el navegador
+
+Hay una serie de flujos útiles integradas en el navegador. Puede crear fácilmente un `ReadableStream` a partir de un blob. El método [stream()](https://developer.mozilla.org/docs/Web/API/Blob/stream) de la interfaz [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob/stream) devuelve un `ReadableStream` que, al leerlo, devuelve los datos contenidos en el blob. Recuerde también que un objeto [`File`](https://developer.mozilla.org/docs/Web/API/File) es un tipo específico de `Blob` y se puede usar en cualquier contexto en el que pueda hacerlo un blob.
+
+```js
+const readableStream = new Blob(['hola mundo'], { type: 'text/plain' }).stream();
+```
+
+Las variantes de transmisión de flujos de `TextDecoder.decode()` y `TextEncoder.encode()` se denominan [`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) y [`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream) respectivamente.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+Comprimir o descomprimir un archivo es fácil con los flujos de transformación [`CompressionStream`](https://wicg.github.io/compression/#compression-stream) y [`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream). El siguiente ejemplo de código muestra cómo puede descargar la especificación de flujos, comprimirla (con gzip) directamente en el navegador y escribir el archivo comprimido directamente en el disco.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+El [`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream) de la [API de acceso al sistema de archivos](/file-system-access/) y los flujos de solicitud [`fetch()`](/fetch-upload-streaming/#writable-streams) experimentales son ejemplos de flujos de escritura en condiciones reales.
+
+La [API serial](/serial/) hace un uso intensivo de flujos tanto de lectura como de escritura.
+
+```js
+// Prompt user to select any serial port.
+const port = await navigator.serial.requestPort();
+// Wait for the serial port to open.
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// Listen to data coming from the serial device.
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // Allow the serial port to be closed later.
+    reader.releaseLock();
+    break;
+  }
+  // value is a Uint8Array.
+  console.log(value);
+}
+
+// Write to the serial port.
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
+await writer.write(data);
+// Allow the serial port to be closed later.
+writer.releaseLock();
+```
+
+Finalmente, la API [`WebSocketStream`](/websocketstream/) integra los flujos con la API de WebSocket.
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## Recursos útiles
+
+- [Especificación de los flujos](https://streams.spec.whatwg.org/)
+- [Demostraciones adjuntas](https://streams.spec.whatwg.org/demos/)
+- [Flujos de polyfill](https://github.com/MattiasBuelens/web-streams-polyfill)
+- [2016: el año de los flujos para la web](https://jakearchibald.com/2016/streams-ftw/)
+- [Iteradores y generadores asincrónicos](https://jakearchibald.com/2017/async-iterators-and-generators/)
+- [Visualizador de flujos](https://surma.dev/lab/whatwg-stream-visualizer/lab.html)
+
+## Agradecimientos
+
+Este artículo fue revisado por [Jake Archibald](https://jakearchibald.com/), [François Beaufort](https://github.com/beaufortfrancois), [Sam Dutton](https://samdutton.com/), [Mattias Buelens](https://github.com/MattiasBuelens), [Surma](https://surma.dev/), [Joe Medley](https://github.com/jpmedley) y [Adam Rice](https://github.com/ricea). Las publicaciones del blog de [Jake Archibald](https://jakearchibald.com/) me han ayudado mucho a comprender los flujos. Algunas de los ejemplos de código están inspiradas en las exploraciones del usuario de GitHub  [@bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac) y partes de la redacción se basan en gran medida en los [Documentos web MDN sobre flujos](https://developer.mozilla.org/docs/Web/API/Streams_API). Los [autores](https://github.com/whatwg/streams/graphs/contributors) del [Estándar de flujos](https://streams.spec.whatwg.org/) han hecho un gran trabajo al escribir esta especificación. La imagen hero es de [Ryan Lara](https://unsplash.com/@ryanlara) en [Unsplash](https://unsplash.com/).
diff --git a/src/site/content/es/blog/strict-csp/index.md b/src/site/content/es/blog/strict-csp/index.md
new file mode 100644
index 00000000000..183c5068813
--- /dev/null
+++ b/src/site/content/es/blog/strict-csp/index.md
@@ -0,0 +1,409 @@
+---
+layout: post
+title: Mitiga las secuencias de comandos entre sitios (XSS) con una política de seguridad de contenido (CSP) estricta
+subhead: Cómo implementar un CSP basado en nonces de scripts o hashes como defensa en profundidad contra el scripting entre sitios.
+description: |2
+
+  Aprenda a implementar un CSP basado en nonces de scripts o hashes como defensa en profundidad
+
+  contra las secuencias de comandos entre sitios.
+authors:
+  - lwe
+date: 2021-03-15
+hero: image/3lmWcR1VGYVMicNlBh4aZWBTcSg1/mhE0NYvP3JFyvNyiQ1dj.jpg
+alt: Una captura de pantalla del código JavaScript que establece una política estricta de seguridad de contenido.
+tags:
+  - blog
+  - security
+---
+
+## ¿Por qué deberías implementar una política de seguridad de contenido (CSP) estricta?
+
+[Cross-site scripting (XSS)](https://www.google.com/about/appsecurity/learning/xss/) o secuencias de comandos en sitios cruzados, definida como la capacidad de inyectar scripts maliciosos en una aplicación web, ha sido una de las mayores vulnerabilidades de seguridad web durante más de una década.
+
+[La Política de seguridad de contenido (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) es una capa adicional de seguridad que ayuda a mitigar XSS. La configuración de un CSP implica agregar el encabezado HTTP Content-Security-Policy a una página web y establecer valores para controlar qué recursos puede cargar el agente de usuario para esa página. Este artículo explica cómo usar un CSP basado en nonces o hashes para mitigar XSS en lugar de los CSP basados en listas de permisos de host de uso común que a menudo dejan la página expuesta a XSS, ya que se pueden [omitir en la mayoría de las configuraciones](https://research.google.com/pubs/pub45542.html).
+
+{% Aside 'key-term' %} Un *nonce* es un número aleatorio que se usa solo una vez y que se puede usar para marcar un `<script>` como confiable. {% endAside %}
+
+{% Aside 'key-term' %} Una función hash es una función matemática que convierte un valor de entrada en un valor numérico comprimido: un hash. Se *puede usar un hash* (como [SHA-256](https://en.wikipedia.org/wiki/SHA-2) ) para marcar una etiqueta inline `<script>` como confiable. {% endAside %}
+
+Una política de seguridad de contenido basada en nonces o hashes a menudo se denomina *CSP estricto* . Cuando una aplicación usa un CSP estricto, los atacantes que encuentran fallas en la inyección de HTML generalmente no podrán usarlos para forzar al navegador a ejecutar scripts maliciosos en el contexto del documento vulnerable. Esto se debe a que el CSP estricto solo permite scripts hash o scripts con el valor de nonce correcto generado en el servidor, por lo que los atacantes no pueden ejecutar el script sin conocer el nonce correcto para una respuesta determinada.
+
+{% Aside %} Para proteger tu sitio de XSS, asegúrate de desinfectar la entrada del usuario *y* usa CSP como una capa de seguridad adicional. CSP es una [técnica de defensa en profundidad](https://en.wikipedia.org/wiki/Defense_in_depth_(computing)) que puede prevenir la ejecución de scripts maliciosos, pero no es un sustituto para evitar (y corregir rápidamente) errores XSS. {% endAside %}
+
+### Por qué se recomienda un CSP estricto en lugar de los CSP de lista de permitidos
+
+Si tu sitio ya tiene un CSP con este aspecto: `script-src www.googleapis.com`, ¡es posible que no sea eficaz contra las secuencias de comandos entre sitios (cross-site scripting)! Este tipo de CSP se denomina CSP de lista de permitidos y tiene un par de desventajas:
+
+- Requiere mucha personalización.
+- Se puede [omitir en la mayoría de las configuraciones](https://research.google.com/pubs/pub45542.html) .
+
+Esto hace que los CSP de listas de permisos sean generalmente ineficaces para evitar que los atacantes exploten XSS. Es por eso que se recomienda utilizar un CSP estricto basado en nonces o hashes criptográficos, lo que evita las trampas descritas anteriormente.
+
+<div class="switcher">{% Compare 'worse', 'Allowlist CSP' %}: no protege eficazmente su sitio. ❌ - Debe ser altamente personalizado. 😓 {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Strict CSP' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">Protege eficazmente su sitio. ✅</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Siempre tiene la misma estructura. 😌 {% endCompare %}</li>
+</ul>
+<div data-md-type="block_html"></div>
+
+## ¿Qué es una política de seguridad de contenido estricta?
+
+Una política de seguridad de contenido estricta tiene la siguiente estructura y se habilita configurando uno de los siguientes encabezados de respuesta HTTP:
+
+- **CSP estricto basado en nonce**
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Img src = "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/er4BaGCJzBwDaESFKfZd.jpg", alt = "", width = "800", height = "279"%}
+
+- **CSP estricto basado en hash**
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Aside warning %} Esta es la versión más simplificada de un CSP estricto. Deberás modificarlo para que sea efectivo en todos los navegadores. Consulta [agregar una alternativa para admitir Safari y navegadores más antiguos](#step-4:-add-fallbacks-to-support-safari-and-older-browsers) para obtener más detalles. {% endAside %}
+
+Las siguientes propiedades hacen que un CSP como el anterior sea "estricto" y, por lo tanto, seguro:
+
+- Utiliza nonces `'nonce-{RANDOM}'` o hashes `'sha256-{HASHED_INLINE_SCRIPT}'` para indicar qué `<script>` son confiables para el desarrollador del sitio y deben poder ejecutarse en el navegador del usuario.
+
+- Establece [`'strict-dynamic'`](https://www.w3.org/TR/CSP3/#strict-dynamic-usage) para reducir el esfuerzo de implementar un CSP basado en hash o nonce al permitir automáticamente la ejecución de scripts creados por un script que ya es de confianza. Esto también desbloquea el uso de la mayoría de las bibliotecas y widgets de JavaScript de terceros.
+
+- No se basa en listas de URL permitidas y, por lo tanto, no sufre omisiones de [CSP comunes](https://speakerdeck.com/lweichselbaum/csp-is-dead-long-live-strict-csp-deepsec-2016?slide=15).
+
+- Bloquea scripts en línea que no son de confianza, como controladores de eventos en línea o `javascript:` URIs.
+
+- Restringe `object-src` para deshabilitar complementos peligrosos como Flash.
+
+- Restringe la `base-uri` para bloquear la inyección de etiquetas `<base>` Esto evita que los atacantes cambien la ubicación de los scripts cargados desde URL relativas.
+
+{% Aside %} Otra ventaja de un CSP estricto es que el CSP siempre tiene la misma estructura y no es necesario personalizarlo para su aplicación. {% endAside %}
+
+## Adopción de un CSP estricto
+
+Para adoptar un CSP estricto, debes:
+
+1. Decidir si tu aplicación debe establecer un CSP basado en hash o nonce.
+2. Copia el CSP de la [sección ¿Qué es una política de seguridad de contenido estricta? Y configúralo](#what-is-a-strict-content-security-policy) como un encabezado de respuesta en tu aplicación.
+3. Refactorizar las plantillas HTML y el código del lado del cliente para eliminar patrones que sean incompatibles con CSP.
+4. Agregar alternativas para admitir Safari y navegadores más antiguos.
+5. Implementar tu CSP.
+
+Puedes utilizar la **auditoría de prácticas** [recomendadas Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (v7.3.0 y superior con flag `--preset=experimental` ) a lo largo de este proceso para comprobar si tu sitio tiene un CSP y si es lo suficientemente estricto como para ser eficaz contra XSS.
+
+{% Img src="image/9B7J9oWjgsWbuE84mmxDaY37Wpw2/42a4iEEKsD4T3yU47vNQ.png", alt="Lighthouse report warning that no CSP is found in enforcement mode.", width="730", height="78" %}
+
+### Paso 1: Decide si necesitas un CSP basado en hash o en nonce
+
+Hay dos tipos de CSP estrictos, basados en hash y basados en nonce. Así es como funcionan:
+
+- **CSP basado en Nonce**: generas un número aleatorio *en tiempo de ejecución*, lo incluyes en tu CSP y lo asocias con cada etiqueta de secuencia de comandos en tu página. Un atacante no puede incluir y ejecutar un script malicioso en su página, porque necesitaría adivinar el número aleatorio correcto para ese script. Esto solo funciona si el número no se puede adivinar y se genera nuevamente en tiempo de ejecución para cada respuesta.
+- **CSP basado en hash**: el hash de cada etiqueta de secuencia de comandos en línea se agrega al CSP. Ten en cuenta que cada secuencia de comandos tiene un hash diferente. Un atacante no puede incluir y ejecutar un script malicioso en tu página, porque el hash de ese script debería estar presente en tu CSP.
+
+Criterios para elegir un enfoque de CSP estricto:
+
+<div>
+  <table>
+      <caption>Criterios para elegir un enfoque de CSP estricto</caption>
+      <thead>
+      <tr>
+        <th>CSP basado en Nonce</th>
+        <td>Para páginas HTML renderizadas en el servidor donde puedes crear un nuevo token aleatorio (nonce) para cada respuesta.</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>CSP basado en hash</th>
+        <td>Para páginas HTML servidas estáticamente o aquellas que necesitan ser almacenadas en caché. Por ejemplo, aplicaciones web de una sola página creadas con marcos como Angular, React u otros, que se sirven estáticamente sin renderizado del lado del servidor.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Paso 2: Establece un CSP estricto y prepara tus scripts
+
+Al configurar un CSP, tienes algunas opciones:
+
+- Modo de solo informe ( `Content-Security-Policy-Report-Only` ) o modo de aplicación (`Content-Security-Policy`). En el modo de solo informe, el CSP no bloqueará los recursos todavía, nada se romperá, pero podrá ver errores y recibir informes de lo que se habría bloqueado. Localmente, cuando estás en el proceso de configurar un CSP, esto realmente no importa, porque ambos modos te mostrarán los errores en la consola del navegador. En todo caso, el modo de aplicación te facilitará aún más ver los recursos bloqueados y modificar tu CSP, ya que tu página se verá rota. El modo de solo informe se vuelve más útil más adelante en el proceso (consulte el [Paso 5](#step-5:-deploy-your-csp) ).
+- Encabezado o etiqueta HTML `<meta>`. Para el desarrollo local, una `<meta>` puede ser más conveniente para ajustar tu CSP y ver rápidamente cómo afecta tu sitio. Sin embargo:
+    - Más adelante, al implementar tu CSP en producción, se recomienda configurarlo como un encabezado HTTP.
+    - Si deseas configurar tu CSP en modo de solo informe, deberás configurarlo como un encabezado; las metaetiquetas de CSP no admiten el modo de solo informe.
+
+<span id="nonce-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} Opción A: CSP basado en Nonce {% endDetailsSummary %}
+
+Establece el siguiente encabezado de respuesta HTTP `Content-Security-Policy`
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside 'caution' %}
+
+Reemplaza el marcador de posición `{RANDOM}` *con un nonce aleatorio* que se regenera **en cada respuesta del servidor**. {% endAside %}
+
+#### Generar un nonce para CSP
+
+Un nonce es un número aleatorio que se usa solo una vez por carga de página. Un CSP basado en nonce solo puede mitigar XSS si un atacante **no puede adivinar el valor de nonce.** Un nonce para CSP debe ser:
+
+- Un **valor aleatorio** criptográficamente fuerte (idealmente 128+ bits de longitud)
+- Recién **generado para cada respuesta**
+- Codificado en Base64
+
+A continuación, se muestran algunos ejemplos sobre cómo agregar un nonce CSP en marcos del lado del servidor:
+
+- [Django (pitón)](https://django-csp.readthedocs.io/en/latest/nonce.html)
+- Express (JavaScript):
+
+```javascript
+const app = express();
+app.get('/', function(request, response) {
+    // Generate a new random nonce value for every response.
+    const nonce = crypto.randomBytes(16).toString("base64");
+    // Set the strict nonce-based CSP response header
+    const csp = `script-src 'nonce-${nonce}' 'strict-dynamic' https:; object-src 'none'; base-uri 'none';`;
+    response.set("Content-Security-Policy", csp);
+    // Every <script> tag in your application should set the `nonce` attribute to this value.
+    response.render(template, { nonce: nonce });
+  });
+}
+```
+
+#### Agregar un `nonce` a los elementos `<script>`
+
+Con un CSP basado en nonce, cada `<script>` debe tener un `nonce` que coincida con el valor nonce aleatorio especificado en el encabezado del CSP (todos los scripts pueden tener el mismo nonce). El primer paso es agregar estos atributos a todos los scripts:
+
+{% Compare 'worse', 'Blocked by CSP'%}
+
+```html
+<script src="/path/to/script.js"></script>
+<script>foo()</script>
+```
+
+{% CompareCaption %} CSP bloqueará estos scripts porque no tienen atributos `nonce` {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script nonce="${NONCE}" src="/path/to/script.js"></script>
+<script nonce="${NONCE}">foo()</script>
+```
+
+{% CompareCaption %} CSP permitirá la ejecución de estos scripts si `${NONCE}` se reemplaza con un valor que coincida con el nonce en el encabezado de respuesta de CSP. Ten en cuenta que algunos navegadores ocultarán el `nonce` al inspeccionar la fuente de la página. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} Con `'strict-dynamic'` en su CSP, solo tendrá que agregar nonces a las `<script>` que están presentes en la respuesta HTML inicial. `'strict-dynamic'` permite la ejecución de scripts añadidos dinámicamente a la página, siempre que hayan sido cargados por un script seguro y de confianza (consulte la [especificación](https://www.w3.org/TR/CSP3/#strict-dynamic-usage) ). {% endAside %}
+
+{% endDetails %}
+
+<span id="hash-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} Opción B: Encabezado de respuesta de CSP basado en hash {% endDetailsSummary %}
+
+Establece el siguiente encabezado de respuesta HTTP `Content-Security-Policy`
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+Para varios scripts en línea, la sintaxis es la siguiente: `'sha256-{HASHED_INLINE_SCRIPT_1}' 'sha256-{HASHED_INLINE_SCRIPT_2}'` .
+
+{% Aside 'caution' %} El `{HASHED_INLINE_SCRIPT}` debe reemplazarse con un hash SHA-256 codificado en base64 de una secuencia de comandos en línea que se puede usar para cargar otras secuencias de comandos (consulta la siguiente sección). Puedes calcular hashes SHA de `<script>` estáticos en línea con esta [herramienta](https://strict-csp-codelab.glitch.me/csp_sha256_util.html). Una alternativa es inspeccionar las advertencias de violación de CSP en la consola de desarrollador de Chrome, que contiene hashes de scripts bloqueados, y agregar estos hashes a la política como 'sha256-…'.
+
+Una secuencia de comandos inyectada por un atacante será bloqueada por el navegador, ya que solo la secuencia de comandos en línea con hash y cualquier secuencia de comandos que agregue dinámicamente podrán ejecutarse por el navegador. {% endAside %}
+
+#### Cargar scripts de origen dinámicamente
+
+Todas las secuencias de comandos de origen externo deben cargarse dinámicamente a través de una secuencia de comandos en línea, ya que los hashes CSP sólo son compatibles con los navegadores para las secuencias de comandos en línea (los hashes para las secuencias de comandos de origen [no son compatibles con los navegadores](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned)).
+
+{% Img src = "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/B2YsfJDYw8PRI6kJI7Bs.jpg", alt = "", width = "800", height = "333"%}
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<script src="https://example.org/foo.js"></script>
+<script src="https://example.org/bar.js"></script>
+```
+
+{% CompareCaption %} CSP bloqueará estas secuencias de comandos, ya que solo se pueden aplicar hash a las secuencias de comandos en línea. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script>
+var scripts = [ 'https://example.org/foo.js', 'https://example.org/bar.js'];
+scripts.forEach(function(scriptUrl) {
+  var s = document.createElement('script');
+  s.src = scriptUrl;
+  s.async = false; // to preserve execution order
+  document.head.appendChild(s);
+});
+</script>
+```
+
+{% CompareCaption %} Para permitir la ejecución de esta secuencia de comandos, el hash de la secuencia de comandos en línea debe calcularse y agregarse al encabezado de respuesta de CSP, reemplazando el marcador de posición `{HASHED_INLINE_SCRIPT}`. Para reducir la cantidad de hashes, opcionalmente puedes combinar todos los scripts en línea en un solo script. Para ver esto en la práctica, consulta el [ejemplo](https://strict-csp-codelab.glitch.me/solution_hash_csp#) y examine el [código](https://glitch.com/edit/#!/strict-csp-codelab?path=demo%2Fsolution_hash_csp.html%3A1%3A). {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} Al calcular un hash CSP para scripts en línea, los caracteres de espacio en blanco entre las etiquetas de apertura y cierre `<script>` son importantes. Puedes calcular hashes CSP para scripts en línea usando esta [herramienta](https://strict-csp-codelab.glitch.me/csp_sha256_util.html). {% endAside %}
+
+{% Details %}
+
+{% DetailsSummary %} Acerca de `async = false` y la carga de scripts `async = false` no bloquea en este caso, pero utilízalo con cuidado. {% endDetailsSummary %}
+
+En el fragmento de código anterior, se añade `s.async = false` para garantizar que foo se ejecute antes que bar (incluso si bar se carga primero). <strong data-md-type="double_emphasis">En este fragmento, `s.async = false` no bloquea el analizador mientras se cargan los scripts</strong>; eso es porque los scripts se agregan dinámicamente. El analizador solo se detendrá mientras se ejecutan los scripts, tal como se comportaría con los scripts `async`. Sin embargo, con este fragmento, ten en cuenta:
+
+- Uno o ambos scripts pueden ejecutarse antes de que el documento haya terminado de descargarse. Si deseas que el documento esté listo para cuando se ejecuten los scripts, debes esperar al [evento `DOMContentLoaded`](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) antes de agregar los scripts. Si esto causa un problema de rendimiento (porque los scripts no comienzan a descargarse lo suficientemente temprano), puedes usar [etiquetas de precarga](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) anteriormente en la página.
+- `defer = true` no hará nada. Si necesitas ese comportamiento, tendrás que ejecutar manualmente el script en el momento en que desees ejecutarlo. {% endDetails %}
+
+{% endDetails %}
+
+### Paso 3: Refactoriza las plantillas HTML y el código del lado del cliente para eliminar patrones incompatibles con CSP
+
+Los controladores de eventos en línea (como `onclick="…"`, `onerror="…"` ) y los URI de JavaScript ( `<a href="javascript:…">` ) se pueden utilizar para ejecutar scripts. Esto significa que un atacante que encuentre un error XSS podría inyectar este tipo de HTML y ejecutar JavaScript malicioso. Un CSP basado en hash o nonce no permite el uso de dicho marcado. Si tu sitio utiliza alguno de los patrones descritos anteriormente, deberás refactorizarlos en alternativas más seguras.
+
+Si habilitaste CSP en el paso anterior, podrás ver las infracciones de CSP en la consola cada vez que CSP bloquee un patrón incompatible.
+
+{% Img src = "image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/mRWfNxAhQXzInOLCgtv8.jpg", alt = "Informes de infracción de CSP en la consola de desarrollador de Chrome.", width = "800", height = "235"%}
+
+En la mayoría de los casos, la solución es sencilla:
+
+#### Para refactorizar los controladores de eventos en línea, vuelve a escribirlos para agregarlos desde un bloque de JavaScript
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<span onclick="doThings();">A thing.</span>
+```
+
+{% CompareCaption %} CSP bloqueará los controladores de eventos en línea. {% endCompareCaption%}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<span id="things">A thing.</span>
+<script nonce="${nonce}">
+  document.getElementById('things')
+          .addEventListener('click', doThings);
+</script>
+```
+
+{% CompareCaption %} CSP permitirá controladores de eventos que se registren a través de JavaScript. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### Para `javascript:` URIs, puedes usar un patrón similar
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<a href="javascript:linkClicked()">foo</a>
+```
+
+{% CompareCaption %} CSP bloqueará javascript: URIs. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<a id="foo">foo</a>
+<script nonce="${nonce}">
+  document.getElementById('foo')
+          .addEventListener('click', linkClicked);
+</script>
+```
+
+{% CompareCaption %} CSP permitirá controladores de eventos que se registren a través de JavaScript. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### Uso de `eval()` en JavaScript
+
+Si tu aplicación usa `eval()` para convertir las serializaciones de cadenas JSON en objetos JS, debes refactorizar dichas instancias a `JSON.parse()`, que también es [más rápido](https://v8.dev/blog/cost-of-javascript-2019#json).
+
+Si no puede eliminar todos los usos de `eval()`, aún puedes establecer un CSP estricto basado en nonce, pero tendrás que usar `'unsafe-eval'` que hará que tu política sea un poco menos segura.
+
+Puedes encontrar estos y más ejemplos de refactorización de este tipo en este estricto CSP Codelab: {% Glitch {id: 'strict-csp-codelab', path: 'demo/solution_nonce_csp.html', highlights: '14,20,28,39,40,41,42,43,44,45,54,55,56,57,58,59,60', previewSize: 35, allow: [] } %}
+
+### Paso 4: Agrega alternativas para admitir Safari y navegadores más antiguos
+
+CSP es compatible con todos los navegadores principales, pero necesitará dos alternativas:
+
+- El uso de `'strict-dynamic'` requiere agregar `https:` como respaldo para Safari, el único navegador importante sin soporte para `'strict-dynamic'`. Al hacerlo:
+
+    - Todos los navegadores que admiten `'strict-dynamic'` ignorarán `https:` fallback, por lo que esto no reducirá la solidez de la política.
+    - En Safari, los scripts de fuentes externas solo podrán cargarse si provienen de un origen HTTPS. Esto es menos seguro que un CSP estricto, es una alternativa, pero aún evitaría ciertas causas comunes de XSS como inyecciones de `javascript:` URIs porque `'unsafe-inline'` no está presente o se ignora en presencia de un hash o un nonce.
+
+- Para garantizar la compatibilidad con versiones de navegador muy antiguas (más de 4 años), puedes agregar `'unsafe-inline'` como respaldo. Todos los navegadores recientes ignorarán `'unsafe-inline'` si hay un código de acceso o un hash de CSP.
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{random}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside %} `https:` y `unsafe-inline` no hacen que tu política sea menos segura porque serán ignorados por los navegadores que admiten `strict-dynamic`. {% endAside %}
+
+### Paso 5: Implementa tu CSP
+
+Después de confirmar que CSP no está bloqueando scripts legítimos en tu entorno de desarrollo local, puedes continuar con la implementación de tu CSP en su (puesta en escena, luego) entorno de producción:
+
+1. (Opcional) Implementa tu CSP en modo de solo informe mediante el `Content-Security-Policy-Report-Only`. Puedes obtener más información sobre la [API de informes](/reporting-api/). El modo de solo informe es útil para probar un cambio potencialmente importante como un nuevo CSP en producción, antes de aplicar las restricciones de CSP. En el modo de solo informe, tu CSP no afecta el comportamiento de tu aplicación (nada realmente se romperá). Pero el navegador seguirá generando errores de consola e informes de infracción cuando se encuentren patrones incompatibles con CSP (para que pueda ver lo que habría fallado para sus usuarios finales).
+2. Una vez que estés seguro de que tu CSP no provocará daños para tus usuarios finales, implementa tu CSP utilizando el encabezado de respuesta `Content-Security-Policy` **Solo una vez que hayas completado este paso, CSP comenzará a proteger tu aplicación de XSS**. Configurar tu CSP a través de un encabezado HTTP del lado del servidor es más seguro que configurarlo como una etiqueta `<meta>`; usa un encabezado si puedes.
+
+{% Aside 'gotchas' %} Asegúrate de que el CSP que estás utilizando sea "estricto" verificándolo con el [evaluador de CSP](https://csp-evaluator.withgoogle.com) o Lighthouse. Esto es muy importante, ya que incluso pequeños cambios en una política pueden reducir significativamente tu seguridad. {% endAside %}
+
+{% Aside 'caution' %} Al habilitar CSP para el tráfico de producción, es posible que veas algo de ruido en los informes de infracción de CSP debido a extensiones de navegador y malware. {% endAside %}
+
+## Limitaciones
+
+En términos generales, un CSP estricto proporciona una fuerte capa adicional de seguridad que ayuda a mitigar XSS. En la mayoría de los casos, CSP reduce significativamente la superficie de ataque (patrones peligrosos como `javascript:` URIs están completamente desactivados). Sin embargo, según el tipo de CSP que estés utilizando (nonces, hashes, con o sin `'strict-dynamic'`), hay casos en los que CSP no protege:
+
+- Si ingresas un script, pero hay una inyección directamente en el cuerpo o en el `src` de ese elemento `<script>`.
+- Si hay inyecciones en las ubicaciones de scripts creados dinámicamente (`document.createElement('script')` ), incluso en cualquier función de biblioteca que cree `script` basados en el valor de sus argumentos. Esto incluye algunas API comunes como `.html()` jQuery, así como `.get()` y `.post()` en jQuery &lt;3.0.
+- Si hay inyecciones de plantilla en aplicaciones antiguas de AngularJS. Un atacante que pueda inyectar una plantilla AngularJS puede usarla para [ejecutar JavaScript arbitrario](https://sites.google.com/site/bughunteruniversity/nonvuln/angularjs-expression-sandbox-bypass).
+- Si la política contiene `'unsafe-eval'`, inyecciones en `eval()`, `setTimeout()` y algunas otras API de uso poco frecuente.
+
+Los desarrolladores y los ingenieros de seguridad deben prestar especial atención a estos patrones durante las revisiones de código y las auditorías de seguridad. Puedes encontrar más detalles sobre los casos descritos anteriormente en [esta presentación de CSP](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf#page=27).
+
+{% Aside %} Trusted Types complementa muy bien el CSP estricto y puedes proteger de manera eficiente contra algunas de las limitaciones enumeradas anteriormente. Puedes obtener más información sobre [cómo utilizar Trusted Types en web.dev](/trusted-types). {% endAside %}
+
+## Otras lecturas
+
+- [La CSP ha muerto, ¡viva la CSP! Sobre la inseguridad de las listas blancas y el futuro de la política de seguridad del contenido](https://research.google/pubs/pub45542/)
+- [Evaluador de CSP](https://csp-evaluator.withgoogle.com/)
+- [Conferencia LocoMoco: Política de seguridad de contenido: un lío exitoso entre el endurecimiento y la mitigación](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf)
+- [Charla de I/O de Google: protección de aplicaciones web con funciones de plataforma modernas](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)
diff --git a/src/site/content/es/blog/text-fragments/index.md b/src/site/content/es/blog/text-fragments/index.md
new file mode 100644
index 00000000000..25deac49b34
--- /dev/null
+++ b/src/site/content/es/blog/text-fragments/index.md
@@ -0,0 +1,314 @@
+---
+title: |2-
+
+  Enlace audaz donde nadie ha enlazado antes: Fragmentos de texto
+subhead: Los fragmentos de texto le permiten especificar un fragmento de texto en el fragmento de URL. Al navegar a una URL con un fragmento de texto de este tipo, el navegador puede enfatizarlo o comunicárselo al usuario.
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: Los fragmentos de texto le permiten especificar un fragmento de texto en el fragmento de URL. Al navegar a una URL con un fragmento de texto de este tipo, el navegador puede enfatizar o resaltárselo al usuario.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## Identificadores de fragmentos
+
+Chrome 80 fue un gran lanzamiento. Contenía una serie de características muy esperadas, como [módulos ECMAScript en Web Workers](/module-workers/), [coalescencia nula](https://v8.dev/features/nullish-coalescing), [encadenamiento opcional](https://v8.dev/features/optional-chaining) y más. El lanzamiento se anunció, como de costumbre, a través de una [publicación de blog](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) en el blog de Chromium. Puede ver un extracto de la publicación del blog en la captura de pantalla a continuación.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %} <figcaption>Publicación del blog de Chromium con cuadros rojos alrededor de los elementos con un atributo <code>id</code>.</figcaption></figure>
+
+Probablemente se esté preguntando qué significan todos los recuadros rojos. Son el resultado de ejecutar el siguiente fragmento en DevTools. Destaca todos los elementos que tienen un atributo `id`.
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+Puedo colocar un enlace profundo a cualquier elemento resaltado con un cuadro rojo gracias al [identificador de fragmento](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment) que luego uso en el [hash](https://developer.mozilla.org/docs/Web/API/URL/hash) de la URL de la página. Suponiendo que quisiera hacer un enlace profundo al cuadro *Denos su opinión en nuestros [foros de productos](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)* al lado, podría hacerlo si creo a mano la URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1&lt;/mark&gt;</code></a>. Como puede ver en el panel Elementos de las Herramientas de desarrollo, el elemento en cuestión tiene una `id` con el valor `HTML1`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width= "600", height= "97 "%} <figcaption>Herramienta de desarrollo que muestra la <code>id</code> de un elemento.</figcaption></figure>
+
+Si analizo esta URL con el constructor `URL()` de JavaScript, se revelan los diferentes componentes. Observe la propiedad `hash` con el valor `#HTML1`.
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Crea un nuevo objeto `URL`
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+Sin embargo, el hecho de tener que abrir las Herramientas de desarrollo para encontrar la `id` de un elemento dice mucho sobre la probabilidad de que esta sección en particular de la página estuviera destinada a estar enlazada por el autor de la publicación del blog.
+
+¿Qué pasa si quiero hacer un enlace a algo sin una `id`? Digamos que quiero enlazar al encabezado *Módulos ECMAScript en Web Workers*. Como puede ver en la captura de pantalla a continuación, el `<h1>` en cuestión no tiene una `id`, lo que significa que no hay forma de que pueda enlazarlo a este encabezado. Este es el problema que resuelven los fragmentos de texto.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption> Herramientas de desarrollo que muestran un encabezado sin <code>id</code>.</figcaption></figure>
+
+## Fragmentos de texto
+
+La propuesta de [Fragmentos de texto](https://wicg.github.io/ScrollToTextFragment/) agrega soporte para especificar un fragmento de texto en el hash de la URL. Al navegar a una URL con un fragmento de texto de este tipo, el agente de usuario puede enfatizarlo o llamar la atención del usuario.
+
+### Compatibilidad del navegador
+
+La función Fragmentos de texto es compatible con la versión 80 y posteriores de los navegadores basados en Chromium. En el momento de escribir este artículo, Safari y Firefox no han manifestado públicamente la intención de implementar la función. Consulte los [Enlaces relacionados](#related-links) para obtener sugerencias sobre las discusiones de Safari y Firefox.
+
+{% Aside 'success' %} Estos enlaces solían no funcionar cuando se mostraban a través de [redireccionamientos del lado del cliente](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections) que utilizan algunos servicios comunes como Twitter. Este problema se rastreó como [crbug.com/1055455](https://crbug.com/1055455) y ahora se solucionó. Los [redireccionamientos HTTP](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle) regulares siempre funcionaron bien. {% endAside %}
+
+Por [razones de seguridad](#security), la función requiere que los enlaces se abran en un contexto [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener). Por lo tanto, asegúrese de incluir [`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel) en su marcado de anclaje `<a>` o agregue [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener) a su lista `Window.open()` de características de funcionalidad de ventana.
+
+### `textStart`
+
+En su forma más simple, la sintaxis de los Fragmentos de texto es la siguiente: El símbolo de hash `#` seguido de `:~:text=` y finalmente `textStart`, que representa el [texto codificado en porcentaje](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) al que se quiere enlazar.
+
+```bash
+#:~:text=textStart
+```
+
+Por ejemplo, digamos que quiero enlazar al encabezado *Módulos ECMAScript en Web Workers* en la [publicación del blog que anuncia las características en Chrome 80](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html), la URL en este caso sería:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers&lt;/mark&gt;</code></a>
+
+Se enfatiza el fragmento de texto <mark class="highlight-line highlight-line-active">de esta manera</mark>. Si hace clic en el enlace en un navegador compatible como Chrome, el fragmento de texto se resalta y se desplaza a la vista:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption> El fragmento de texto se desplazó a la vista y se resaltó.</figcaption></figure>
+
+### `textStart` y `textEnd`
+
+Ahora, ¿qué pasa si quiero enlazar a toda la *sección* titulada *Módulos ECMAScript en Web Workers*, no solo a su título? La codificación porcentual de todo el texto de la sección haría que la URL resultante fuera impracticablemente larga.
+
+Afortunadamente, existe una forma mejor. En lugar de todo el texto, puedo enmarcar el texto deseado mediante la sintaxis `textStart,textEnd`. Por lo tanto, especifico un par de palabras de codificación porcentual en el comienzo del texto deseado y un par de palabras de codificación porcentual al final del texto deseado, separadas por una coma `,`.
+
+Eso se ve de la siguiente manera:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.&lt;/mark&gt;</code></a>.
+
+Para `textStart`, tengo `ECMAScript%20Modules%20in%20Web%20Workers`, luego una coma `,` seguida de `ES%20Modules%20in%20Web%20Workers.` como `textEnd`. Cuando se hace clic en un navegador compatible como Chrome, toda la sección se resalta y se desplaza a la vista:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %} <figcaption>El fragmento de texto se desplazó a la vista y se resaltó.</figcaption></figure>
+
+Ahora puede que se pregunte acerca de mi elección de `textStart` y `textEnd`. En realidad, la URL un poco más corta <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules,Web%20Workers.&lt;/mark&gt;</code></a> con solo dos palabras en cada lado también habría funcionado. Compare `textStart` y `textEnd` con los valores anteriores.
+
+Si doy un paso más y ahora uso solo una palabra tanto para `textStart` como para `textEnd`, verá que estoy en problemas. La URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript,Workers.&lt;/mark&gt;</code></a> es aún más corta ahora, pero el fragmento de texto resaltado ya no es el deseado originalmente. El resaltado se detiene en la primera aparición de la palabra `Workers.`, lo cual es correcto, pero no lo que pretendía resaltar. El problema es que la sección deseada no está identificada de forma única por los valores `textStart` y `textEnd`:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption>El fragmento de texto no deseado se desplazó a la vista y se resaltó.</figcaption></figure>
+
+### `prefix-` y `-suffix`
+
+Usar valores suficientemente largos para `textStart` y `textEnd` es una solución para obtener un enlace único. En algunas situaciones, sin embargo, esto no es posible. Como una nota al margen, ¿por qué elegí la publicación del blog de lanzamiento de Chrome 80 como mi ejemplo? La respuesta es que en esta versión se introdujeron los Fragmentos de texto:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="Texto de la publicación del blog: Fragmentos de texto en URL. Los usuarios o autores ahora pueden enlazar a una parte específica de una página mediante un fragmento de texto proporcionado en una URL. Cuando la página está cargada, el navegador resalta el texto y desplaza el fragmento a la vista. Por ejemplo, la siguiente URL carga una página wiki para 'Gato' y se desplaza hasta el contenido listado en el parámetro `text`.", width="800", height="200" %} <figcaption>Extracto de la publicación del blog del anuncio de Fragmentos de texto.</figcaption></figure>
+
+Observe cómo en la captura de pantalla de arriba la palabra "text" aparece cuatro veces. La cuarta aparición está escrita en una fuente de código verde. Si quisiera enlazar a esta palabra en particular, establecería `textStart` en `text`. Dado que la palabra "text" es, bueno, sólo una palabra, no puede haber un `textEnd`. ¿Ahora qué? La URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=text&lt;/mark&gt;</code></a> coincide con la primera aparición de la palabra "Text" que ya está en el encabezado:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption>Fragmento de texto que coincide con la primera aparición de "Text".</figcaption></figure>
+
+{% Aside 'caution' %} Tenga en cuenta que la coincidencia de fragmentos de texto no distingue entre mayúsculas y minúsculas. {% endAside %}
+
+Por suerte, hay una solución. En casos como este, puedo especificar un `prefix​-` y un `-suffix`. La palabra antes de la fuente de código verde "text" es "the", y la palabra después es "parameter". Ninguna de las otras tres apariciones de la palabra "text" tiene las mismas palabras circundantes. Armado con este conocimiento, puedo modificar la URL anterior y agregar el `prefix-` y el `-suffix`. Al igual que los otros parámetros, también deben estar codificados en porcentaje y pueden contener más de una palabra. <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=the-,text,-parameter&lt;/mark&gt;</code></a>. Para permitir que el analizador identifique claramente el `prefix-` y el `-suffix`, deben separarse del `textStart` y del `textEnd` opcional con un guión `-`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %} <figcaption>Fragmento de texto que coincide con la aparición deseada de "text".</figcaption></figure>
+
+### La sintaxis completa
+
+La sintaxis completa de los fragmentos de texto se muestra a continuación. (Los corchetes indican un parámetro opcional). Los valores de todos los parámetros deben estar codificados en porcentaje. Esto es especialmente importante para los caracteres de guión `-`, ampersand `&` y coma `,`, para que no se interpreten como parte de la sintaxis de la directiva de texto.
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+Cada uno de los argumentos `prefix-`, `textStart`, `textEnd` y `-suffix` sólo concordará con el texto dentro de un solo [elemento en bloque](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements), pero los rangos `textStart,textEnd` completos *pueden* abarcar varios bloques. Por ejemplo `:~:text=The quick,lazy dog` no concordará en el siguiente ejemplo, porque la cadena de inicio "La rápida" no aparece dentro de un elemento único e ininterrumpido a nivel de bloque:
+
+```html
+<div>
+  La
+  <div></div>
+  rápida zorra marrón
+</div>
+<div>saltó sobre el perro perezoso</div>
+```
+
+Sin embargo, concuerda en este ejemplo:
+
+```html
+<div>La rápida zorra marrón</div>
+<div>saltó sobre el perro perezoso</div>
+```
+
+### Creación de URL de fragmentos de texto con una extensión de navegador
+
+Crear URL de fragmentos de texto a mano es tedioso, especialmente cuando se trata de asegurar que sean únicas. Si realmente lo desea, la especificación tiene algunos consejos y enumera los [pasos exactos para generar URL de fragmentos de texto](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives). Proporcionamos una extensión de navegador de código abierto llamada [Enlace a fragmento de texto](https://github.com/GoogleChromeLabs/link-to-text-fragment) que le permite enlazar a cualquier texto seleccionándolo y luego hacer clic en "Copiar el enlace al texto seleccionado" en el menú contextual. Esta extensión está disponible para los siguientes navegadores:
+
+- [Enlace a fragmento de texto para Google Chrome](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Enlace a fragmento de texto para Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Enlace a fragmento de texto para Mozilla Firefox](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Enlace a fragmento de texto para Apple Safari](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %} <figcaption>Enlace a la extensión del navegador <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">Fragmento de texto</a>.</figcaption></figure>
+
+### Varios fragmentos de texto en una URL
+
+Tenga en cuenta que pueden aparecer varios fragmentos de texto en una URL. Los fragmentos de texto particulares deben estar separados por un carácter `&`. Éste es un enlace de ejemplo con tres fragmentos de texto: <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet&lt;mark class="highlight-line highlight-line-active"&gt;</code></a>.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %} <figcaption>Tres fragmentos de texto en una URL.</figcaption></figure>
+
+### Mezcla de elementos y fragmentos de texto
+
+Los fragmentos de elementos tradicionales se pueden combinar con fragmentos de texto. Está perfectamente bien tener ambos en la misma URL, por ejemplo, para proporcionar un respaldo significativo en caso de que cambie el texto original de la página, de modo que el fragmento de texto ya no coincida. La URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.&lt;/mark&gt;</code></a> que enlaza a la sección *Denos su opinión en nuestros [foros de productos](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)* contiene tanto un fragmento de elemento (`HTML1`) como un fragmento `text=Give%20us%20feedback%20in%20our%20Product%20Forums.`):
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %} <figcaption>Enlace con fragmento de elemento y fragmento de texto.</figcaption></figure>
+
+### La directiva de fragmentos
+
+Hay un elemento de la sintaxis que aún no he explicado: la directiva de fragmentos `:~:`. Para evitar problemas de compatibilidad con los fragmentos de elementos de URL existentes, como se muestra arriba, la [especificación de Fragmentos de texto](https://wicg.github.io/ScrollToTextFragment/) introduce la directiva de fragmentos. La directiva de fragmentos es una parte del fragmento de URL delimitado por la secuencia de código `:~:`. Está reservada para las instrucciones del agente de usuario, como `text=` y se elimina de la URL durante la carga para que los scripts de autor no puedan interactuar directamente con ella. Las instrucciones del agente de usuario también se denominan *directivas*. En el caso concreto, `text=` se llama por lo tanto una *directiva de texto*.
+
+### Detección de características
+
+Para detectar la compatibilidad, pruebe la propiedad de solo lectura `fragmentDirective` en `document`. La directiva de fragmentos es un mecanismo para que las URL especifiquen instrucciones dirigidas al navegador en lugar de al documento. Está destinada a evitar la interacción directa con el script del autor, de modo que se puedan agregar futuras instrucciones del agente de usuario sin temor a introducir cambios importantes en el contenido existente. Un ejemplo potencial de tales adiciones futuras podrían ser las sugerencias de traducción.
+
+```js
+if ('fragmentDirective' in document) {
+  // Se admiten los fragmentos de texto.
+}
+```
+
+{% Aside %} Desde Chrome 80 hasta Chrome 85, la propiedad `fragmentDirective` se definió en `Location.prototype`. Para obtener detalles sobre este cambio, consulte [WICG/scroll-to-text-fragment # 130](https://github.com/WICG/scroll-to-text-fragment/issues/130). {% endAside %}
+
+La detección de características está destinada principalmente a los casos en los que los enlaces se generan dinámicamente (por ejemplo, mediante motores de búsqueda) para evitar enviar enlaces de fragmentos de texto a navegadores que no los admitan.
+
+### Aplicar estilo a fragmentos de texto
+
+De forma predeterminada, los navegadores aplican el estilo a los fragmentos de texto de la misma manera que le aplican estilo a [`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) (normalmente negro sobre amarillo, los [colores del sistema](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors) CSS para `mark`). La hoja de estilo del agente de usuario contiene CSS que luce así:
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+Como puede ver, el navegador expone un pseudo selector [`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text) que puede usar para personalizar el resaltado aplicado. Por ejemplo, puede diseñar sus fragmentos de texto para que sean texto negro sobre un fondo rojo. Como siempre, asegúrese de [verificar el contraste de color](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast) para que su estilo sobrepuesto no cause problemas de accesibilidad y compruebe que el resaltado realmente se destaque visualmente del resto del contenido.
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### Capacidad de aplicar polyfill
+
+A la función Fragmentos de texto se le pueden aplicar polyfills hasta cierto punto. Proporcionamos un [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill), que la [extensión](https://github.com/GoogleChromeLabs/link-to-text-fragment) usa internamente, para los navegadores que no brindan soporte integrado para fragmentos de texto donde la funcionalidad se implementa en JavaScript.
+
+### Generación de enlaces de fragmentos de texto programáticos
+
+El [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill) contiene un archivo `fragment-generation-utils.js` que puede importar y usar para generar enlaces de fragmentos de texto. Esto se describe en el ejemplo de código a continuación:
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### Obtención de fragmentos de texto con fines analíticos
+
+Muchos sitios utilizan el fragmento para enrutar, por lo que los navegadores eliminan los fragmentos de texto para no romper esas páginas. Existe una [necesidad reconocida](https://github.com/WICG/scroll-to-text-fragment/issues/128) de exponer los enlaces de fragmentos de texto a las páginas, por ejemplo, con fines analíticos, pero la solución propuesta aún no se ha implementado. Como solución alternativa por ahora, puede utilizar el código siguiente para extraer la información deseada.
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### Seguridad
+
+Las directivas de fragmentos de texto se invocan solo en navegaciones completas (que no son de la misma página) que son el resultado de [la activación de un usuario](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation). Además, las navegaciones que se originan en un origen diferente al del destino requerirán que la navegación se lleve a cabo en un contexto [`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener), de modo que se sepa que la página de destino está suficientemente aislada. Las directivas de fragmentos de texto solo se aplican al marco principal. Esto significa que no se buscará texto dentro de los iframes y la navegación iframe no invocará un fragmento de texto.
+
+### Privacidad
+
+Es importante que las implementaciones de la especificación de Fragmentos de texto no filtren si un fragmento de texto se encontró en una página o no. Si bien los fragmentos de elementos están completamente bajo el control del autor de la página original, cualquiera puede crear fragmentos de texto. Recuerde cómo en mi ejemplo anterior no había forma de enlazar el encabezado *Módulos ECMAScript en Web Workers*, ya que el `<h1>` no tenía una `id`, pero, ¿cómo podría cualquiera, incluyéndome a mí, simplemente enlazar a cualquier lugar al crear cuidadosamente el fragmento de texto?
+
+Imagine que ejecuté una red publicitaria malvada `evil-ads.example.com`. Además, imagine que en uno de mis iframes publicitarios creé dinámicamente un iframe de origen cruzado oculto para `dating.example.com` con una URL de fragmento de texto <code>dating.example.com&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Log%20Out&lt;/mark&gt;</code> una vez que el usuario interactúa con el anuncio. Si se encuentra el texto "Cerrar sesión", sé que la víctima está actualmente conectada a `dating.example.com`, lo que podría usar para crear perfiles de usuario. Dado que una implementación ingenua de Fragmentos de texto podría decidir que una coincidencia exitosa debería causar un cambio de enfoque, en `evil-ads.example.com` yo podría escuchar el evento `blur` y así saber cuándo ocurrió una coincidencia. En Chrome, hemos implementado Fragmentos de texto de tal manera que el escenario anterior no puede suceder.
+
+Otro ataque podría ser explotar el tráfico de la red en función de la posición de desplazamiento. Supongamos que tengo acceso a los registros de tráfico de la red de mi víctima, como administrador de la intranet de una empresa. Ahora imagine que existiera un documento extenso de recursos humanos *Qué hacer si sufre de…* y luego una lista de condiciones como *agotamiento*, *ansiedad*, etc. Podría colocar un píxel de seguimiento al lado de cada elemento de la lista. Si luego determino que cargar el documento temporalmente ocurre simultáneamente con la carga del píxel de seguimiento junto a, digamos, el elemento *agotamiento*, entonces puedo, como administrador de la intranet, determinar que un empleado ha hecho clic en un enlace de fragmento de texto con `:~:text=burn%20out` que el empleado pudo haber asumido que era confidencial y no visible para nadie. Dado que este ejemplo es algo artificial para empezar y dado que su explotación requiere que se cumplan condiciones previas *muy* específicas, el equipo de seguridad de Chrome evaluó el riesgo de implementar el desplazamiento en la navegación para que sea manejable. Otros agentes de usuario pueden decidir mostrar un elemento de interfaz de usuario de desplazamiento manual en su lugar.
+
+Para los sitios que desean darse de baja, Chromium admite un valor de encabezado de [Política de documento](https://wicg.github.io/document-policy/) que ellos pueden enviar para que los agentes de usuario no procesen las URL de fragmentos de texto.
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## Deshabilitar los fragmentos de texto
+
+La forma más fácil de deshabilitar la función es mediante el uso de una extensión que pueda inyectar encabezados de respuesta HTTP, por ejemplo, [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj) (no un producto de Google), para insertar un encabezado de respuesta (*no* de solicitud) de la siguiente manera:
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+Otra forma más complicada de optar por no participar es mediante la configuración empresarial [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled). Para hacer esto en macOS, pegue el siguiente comando en la terminal.
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+En Windows, siga la documentación del sitio de asistencia de la [Ayuda empresarial de Google Chrome.](https://support.google.com/chrome/a/answer/9131254?hl=en)
+
+{% Aside 'warning' %} Intente esto solo cuando sepa lo que está haciendo. {% endAside %}
+
+## Fragmentos de texto en la búsqueda web
+
+Para algunas búsquedas, el motor de búsqueda de Google proporciona una respuesta rápida o un resumen con un fragmento de contenido de un sitio web relevante. Es más probable que estos *fragmentos destacados* aparezcan cuando una búsqueda tenga la forma de una pregunta. Al hacer clic en un fragmento destacado, el usuario se dirige directamente al texto del fragmento destacado en la página web de origen. Esto funciona gracias a las URL de fragmentos de texto creadas automáticamente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %} <figcaption>Página de resultados del motor de búsqueda de Google que muestra un fragmento destacado. La barra de estado muestra la URL de los fragmentos de texto.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %} <figcaption>Después de hacer clic, se muestra la sección correspondiente de la página.</figcaption></figure>
+
+## Conclusión
+
+Las URL de fragmentos de texto son una característica poderosa para enlazar a texto arbitrario en páginas web. La comunidad académica puede utilizarlas para proporcionar enlaces de referencias o citas de gran precisión. Los motores de búsqueda pueden usarlas para hacer enlaces profundos a resultados de texto en las páginas. Los sitios de redes sociales pueden usarlas para permitir que los usuarios compartan pasajes específicos de una página web en lugar de capturas de pantalla inaccesibles. Espero que empiece a [utilizar las URL de fragmentos de texto](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet) y las encuentre tan útiles como yo. Asegúrese de instalar la extensión del navegador [Enlace a fragmentos de teto](https://github.com/GoogleChromeLabs/link-to-text-fragment).
+
+## Enlaces relacionados
+
+- [Borrador de especificaciones](https://wicg.github.io/scroll-to-text-fragment/)
+- [Revisión TAG](https://github.com/w3ctag/design-reviews/issues/392)
+- [Entrada de estado de la plataforma de Chrome](https://chromestatus.com/feature/4733392803332096)
+- [Error de seguimiento de Chrome](https://crbug.com/919204)
+- [Hilo de Intención de envío](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [Hilo de WebKit-Dev](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Hilo de posición de estándares de Mozilla](https://github.com/mozilla/standards-positions/issues/194)
+
+## Agradecimientos
+
+Los fragmentos de texto fueron implementados y especificados por [Nick Burris](https://github.com/nickburris) y [David Bokan](https://github.com/bokand), con contribuciones de [Grant Wang](https://github.com/grantjwang). Gracias a [Joe Medley](https://github.com/jpmedley) por la revisión exhaustiva de este artículo. Imagen hero de [Greg Rakozy](https://unsplash.com/@grakozy) en [Unsplash](https://unsplash.com/photos/oMpAz-DN-9I).
diff --git a/src/site/content/es/blog/trusted-types/index.md b/src/site/content/es/blog/trusted-types/index.md
new file mode 100644
index 00000000000..fa7e9c6917d
--- /dev/null
+++ b/src/site/content/es/blog/trusted-types/index.md
@@ -0,0 +1,217 @@
+---
+title: Evita las vulnerabilidades de secuencias de comandos en sitios cruzados basadas en DOM con Trusted Types
+subhead: Reduce la superficie de ataque DOM XSS de tu aplicación.
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: Fragmentos de código que demuestran las vulnerabilidades de secuencias de comandos en sitios cruzados.
+description: |2-
+
+  Presentamos Trusted Types (Tipos de confianza): una API del navegador para evitar ataques de cross-site scripting (secuencias de comandos en sitios cruzados) basados en DOM en las aplicaciones modernas de la web.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## ¿Por qué debería preocuparte?
+
+El cross-site scripting (secuencias de comandos en sitios cruzados) basado en DOM (DOM XSS) es una de las vulnerabilidades de la seguridad web más comunes y fáciles de introducir en tu aplicación. [Trusted Types](https://github.com/w3c/webappsec-trusted-types) te brinda las herramientas para escribir, revisar la seguridad y mantener las aplicaciones libres de vulnerabilidades DOM XSS haciendo que las peligrosas funciones de la API web sean seguras de manera predeterminada. Trusted Types es compatible con Chrome 83 y cuenta con un [polyfill](https://github.com/w3c/webappsec-trusted-types#polyfill) disponible para otros navegadores. Consulta [Compatibilidad con navegadores](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility) para obtener información actualizada sobre compatibilidad con varios navegadores.
+
+{% Aside 'key-term' %} La secuencia de comandos en sitios cruzados basados en DOM ocurre cuando los datos de una *fuente* controlada por el usuario (como el nombre de usuario o la URL de redireccionamiento tomada del fragmento de URL) llegan a un *receptor*, una función como `eval()` o un creador de propiedades como `.innerHTML`, que puede escribir código JavaScript arbitrario y ejecutarlo mediante una de estas funciones. {% endAside %}
+
+## Antecedentes
+
+Durante muchos años, [DOM XSS](https://owasp.org/www-community/attacks/xss/) ha sido una de las vulnerabilidades de seguridad web más frecuentes y peligrosas.
+
+Hay dos grupos distintos de secuencias de comandos entre sitios. Algunas vulnerabilidades XSS son causadas por el código del lado del servidor que crea de manera insegura el código HTML que forma el sitio web. Otras tienen su origen en el cliente, donde el código JavaScript llama a funciones peligrosas con contenido controlado por el usuario.
+
+Para [evitar XSS del lado del servidor](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html), no generes HTML concatenando cadenas y utiliza bibliotecas de plantillas seguras con escape automático contextual. Usa una [Política de seguridad de contenido basada en nonce](https://csp.withgoogle.com/docs/strict-csp.html) para una mitigación adicional contra los errores, ya que inevitablemente se producen.
+
+Ahora, un navegador también puede ayudar a prevenir los XSS del lado del cliente (también conocidos como basados en DOM) con [Trusted Types](https://bit.ly/trusted-types).
+
+## Introducción a la API
+
+Trusted Types funciona bloqueando las siguientes funciones de sumidero de riesgo. Es posible que ya reconozcas algunas de ellas, ya que los proveedores de navegadores y [los marcos web](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) ya te alejan del uso de estas funciones por razones de seguridad.
+
+- **Manipulación de guiones** :<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) y configurar el contenido del texto de los elementos [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script).
+
+- **Generación de HTML a partir de una cadena**:<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML), [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML),[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML), [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc), [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write), [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) y [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **Ejecutar contenido del complemento (plugin)**:<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src), [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) y [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **Compilar código JavaScript en tiempo de ejecución**:<br> `eval`, `setTimeout`, `setInterval`, `new Function()`
+
+Trusted Types requiere que se procesen los datos antes de pasarlos a las funciones de sumidero mencionadas. El simple hecho de usar una cadena fallará, ya que el navegador no sabe si los datos son confiables:
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML  = location.href;
+```
+
+{% CompareCaption %} Con Trusted Types habilitado, el navegador genera un *TypeError* y evita el uso de un receptor DOM XSS con una cadena. {% endCompareCaption %}
+
+{% endCompare %}
+
+Para indicar que los datos se procesaron de forma segura, crea un objeto especial - un Trusted Types.
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %} Con Trusted Types habilitado, el navegador acepta un `TrustedHTML` para receptores que esperan fragmentos de HTML. También hay `TrustedScript` y `TrustedScriptURL` para otros receptores sensibles. {% endCompareCaption %}
+
+{% endCompare %}
+
+Trusted Types reduce considerablemente la [superficie](https://en.wikipedia.org/wiki/Attack_surface) de ataque DOM XSS de tu aplicación. Simplifica las revisiones de seguridad y te permite hacer cumplir las verificaciones de seguridad basadas en tipos que se realizan al compilar, enlazar o empaquetar tu código en tiempo de ejecución, en el navegador.
+
+## Cómo utilizar Trusted Types
+
+### Prepárate para los informes de infracción de la política de seguridad de contenido
+
+Puedes implementar un recopilador de informes (como el de código abierto [go-csp-collector](https://github.com/jacobbednarz/go-csp-collector)) o utilizar uno de los equivalentes comerciales. También puedes depurar las infracciones en el navegador:
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### Agregar un encabezado de CSP solo para informes
+
+Agrega el siguiente encabezado de respuesta HTTP a los documentos que deseas migrar a Trusted Types.
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+Ahora todas las infracciones se informan a `//my-csp-endpoint.example`, pero el sitio web sigue funcionando. La siguiente sección explica cómo funciona  `//my-csp-endpoint.example`
+
+{% Aside 'caution' %} Trusted Types solo está disponible en un [contexto seguro](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) como HTTPS y `localhost`. {% endAside %}
+
+### Identificar infracciones de Trusted Types
+
+A partir de ahora, cada vez que Trusted Types detecte una infracción, se enviará un informe a un `report-uri` configurado. Por ejemplo, cuando tu aplicación pasa una cadena a `innerHTML`, el navegador envía el siguiente informe:
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+Esto dice que en `https://my.url.example/script.js` la línea 39 `innerHTML` fue llamado con la cadena que comienza con `<img src=x`. Esta información debería ayudarte a delimitar qué partes del código pueden estar introduciendo DOM XSS y deben cambiar.
+
+{% Aside %} La mayoría de las infracciones como esta también se pueden detectar ejecutando un linter de código o [verificadores de código estático](https://github.com/mozilla/eslint-plugin-no-unsanitized) en su base de código. Esto ayuda a identificar rápidamente una gran cantidad de infracciones.
+
+Dicho esto, también debe analizar las infracciones de CSP, ya que se activan cuando se ejecuta el código no conforme. {% endAside %}
+
+### Resolver las infracciones
+
+Hay un par de opciones para corregir una infracción de Trusted Type. Puedes [eliminar el código infractor](#remove-the-offending-code), [utilizar una biblioteca](#use-a-library), [crear una política de Trusted Type](#create-a-trusted-type-policy) o, como último recurso, [crear una política predeterminada](#create-a-default-policy).
+
+#### Vuelve a escribir el código infractor
+
+¿Quizás la funcionalidad no conforme ya no sea necesaria o se pueda reescribir de una manera moderna sin usar las funciones propensas a errores?
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### Usa una biblioteca
+
+Algunas bibliotecas ya generan tipos de confianza que puede pasar a las funciones de receptor. Por ejemplo, puedes usar [DOMPurify](https://github.com/cure53/DOMPurify) para desinfectar un fragmento de HTML, eliminando cargas útiles XSS.
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+DOMPurify [admite Trusted Types](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types) y devolverá HTML desinfectado envuelto en un `TrustedHTML` de manera que el navegador no genere una infracción. {% Aside 'caution' %} Si la lógica de desinfección en DOMPurify tiene errores, es posible que tu aplicación aún tenga una vulnerabilidad DOM XSS. Los tipos de confianza lo obligan a procesar un valor de *alguna manera*, pero aún no define cuáles son las reglas de procesamiento exactas y si son seguras. {% endAside %}
+
+#### Crea una política de Trusted Type
+
+A veces no es posible eliminar la funcionalidad y no existe una biblioteca para desinfectar el valor y crear un tipo de confianza para ti. En esos casos, crea para ti mismo un objeto Trusted Type.
+
+Para eso, primero crea una [política](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr). Las políticas son fábricas de tipos de confianza que imponen ciertas reglas de seguridad en sus entradas:
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '<')
+  });
+}
+```
+
+Este código crea una política llamada `myEscapePolicy` que puede producir `TrustedHTML` través de su función `createHTML()`. Las reglas definidas con HTML-escape `<` caracteres evitarán la creación de nuevos elementos HTML.
+
+Utiliza la política de esta manera:
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // true
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Aside %} Mientras que la función de JavaScript pasada a `trustedTypes.createPolicy()` como `createHTML()` devuelve una cadena, `createPolicy()` devuelve un objeto de política que envuelve el valor de retorno en un tipo correcto, en este caso `TrustedHTML`. {% endAside %}
+
+#### Utiliza una política predeterminada
+
+A veces no se puede cambiar el código infractor. Por ejemplo, este es el caso si está cargando una biblioteca de terceros desde una CDN. En ese caso, utilice una [política predeterminada](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr):
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+La política con un nombre `default` se usa siempre que se usa una cadena en un receptor que solo acepta Trusted Type. {% Aside 'gotchas' %} Usa la política predeterminada con moderación prefiriendo refactorizar la aplicación para usar políticas regulares en su lugar. Hacerlo, fomenta los diseños en los que las reglas de seguridad están cerca de los datos que procesan, donde tiene el mayor contexto para desinfectar correctamente el valor. {% endAside %}
+
+### Pasa a aplicar la política de seguridad de contenidos
+
+Cuando su aplicación ya no produzca infracciones, puede comenzar a hacer cumplir los tipos de confianza:
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+¡Ya está! Ahora, no importa cuán compleja sea tu aplicación web, lo único que puede introducir una vulnerabilidad DOM XSS es el código en una de tus políticas, y puedes bloquearlo aún más [limitando la creación de políticas](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive).
+
+## Otras lecturas
+
+- [Tipos de confianza GitHub](https://github.com/w3c/webappsec-trusted-types)
+- [Borrador de la especificación W3C](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [Preguntas más frecuentes](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [Integraciones](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/es/blog/usb/index.md b/src/site/content/es/blog/usb/index.md
new file mode 100644
index 00000000000..2139f9aa9a4
--- /dev/null
+++ b/src/site/content/es/blog/usb/index.md
@@ -0,0 +1,241 @@
+---
+title: Acceder a dispositivos USB en la web
+subhead: |2-
+
+  La API WebUSB hace que el uso de dispositivos USB sea más seguro y más fácil de usar al llevarlos a la Web.
+authors:
+  - beaufortfrancois
+date: 2016-03-30
+updated: 2021-02-23
+hero: image/admin/hhnhxiNuRWMfGqy4NSaH.jpg
+thumbnail: image/admin/RyaGPB8fHCuuXUc9Wj9Z.jpg
+alt: Una foto de una placa Arduino Micro
+description: |2-
+
+  La API WebUSB hace que el uso de dispositivos USB sea más seguro y más fácil de usar al llevarlos a la Web.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webusb
+---
+
+Al decir simple y llanamente "USB", es muy probable que piense inmediatamente en teclados, mouses, audio, video y dispositivos de almacenamiento. Tiene razón, pero encontrará otros tipos de dispositivos de bus serie universal (USB) por ahí.
+
+Estos dispositivos USB no estandarizados requieren que los proveedores de hardware escriban controladores y SDK específicos de la plataforma para que usted (el desarrollador) pueda aprovecharlos. Lamentablemente, este código específico de la plataforma históricamente ha impedido que estos dispositivos sean utilizados por la Web. Y esa es una de las razones por las que se ha creado la API WebUSB: para proporcionar una forma de exponer los servicios de dispositivos USB a la Web. Con esta API, los fabricantes de hardware podrán crear SDK de JavaScript multiplataforma para sus dispositivos. Pero lo más importante es que esto hará **que el USB sea más seguro y más fácil de usar al llevarlo a la Web**.
+
+Veamos el comportamiento que podría esperar con la API WebUSB:
+
+1. Compre un dispositivo USB.
+2. Conéctelo a su computadora. Aparece una notificación de inmediato, con el sitio web correcto al que debe ir para este dispositivo.
+3. Haga clic en la notificación. ¡El sitio web está ahí y listo para usar!
+4. Haga clic para conectarse y aparecerá un selector de dispositivo USB en Chrome, donde puede escoger su dispositivo.
+
+¡Tará!
+
+¿Cómo sería este procedimiento sin la API WebUSB?
+
+1. Instale una aplicación específica para la plataforma.
+2. Incluso si es compatible con mi sistema operativo, verificar que haya descargado la aplicación correcta.
+3. Instalae el asunto. Si tiene suerte, no recibirá mensajes de sistema operativo ni ventanas emergentes que le adviertan sobre la instalación de controladores/aplicaciones de Internet. Si no tiene suerte, los controladores instalados o las aplicaciones no funcionan correctamente y dañan su computadora. (Recuerde, la web está diseñada para [albergar sitios web que funcionan mal](https://www.youtube.com/watch?v=29e0CtgXZSI)).
+4. Si solo usa la función una vez, el código permanece en su computadora hasta que se le ocurra eliminarlo (en la Web, finalmente se recupera el espacio no utilizado).
+
+## Antes de empezar
+
+Este artículo asume que tiene algunos conocimientos básicos sobre cómo funciona el USB. Si no es así, recomiendo leer [USB en pocas palabras (USB in a Nutshell)](http://www.beyondlogic.org/usbnutshell). Para obtener información general sobre USB, consulte las [especificaciones oficiales de USB](https://www.usb.org/).
+
+La [API WebUSB](https://wicg.github.io/webusb/) está disponible en Chrome 61.
+
+### Disponible para pruebas de origen
+
+Para obtener la mayor cantidad de comentarios posibles de los desarrolladores que utilizan la API WebUSB en el campo, anteriormente agregamos esta función en Chrome 54 y Chrome 57 como una [prueba de origen](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md).
+
+La última prueba finalizó con éxito en septiembre de 2017.
+
+## Privacidad y seguridad
+
+### Solo HTTPS
+
+Debido al poder de esta característica, solo funciona en [contextos seguros](https://w3c.github.io/webappsec/specs/powerfulfeatures/#intro). Esto significa que deberá compilar teniendo en cuenta el protocolo [TLS.](https://en.wikipedia.org/wiki/Transport_Layer_Security)
+
+### Requiere gestos del usuario
+
+Como medida de seguridad, `navigator.usb.requestDevice()` solo puede ejecutarsemediante un gesto del usuario, como un toque o un clic del mouse.
+
+### Política de funciones
+
+Una [política de funciones](https://developer.mozilla.org/docs/Web/HTTP/Feature_Policy) es un mecanismo que permite a los desarrolladores habilitar y deshabilitar de forma selectiva varias funciones y API del navegador. Se puede definir mediante un encabezado HTTP o un atributo "allow" de iframe.
+
+Puede definir una política de funciones que controle si el atributo usb está expuesto en el objeto Navigator o, en otras palabras, si permite WebUSB.
+
+A continuación se muestra un ejemplo de una política de encabezado donde no se permite WebUSB:
+
+```http
+Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com
+```
+
+A continuación, se muestra otro ejemplo de una política de contenedores en la que se permite USB:
+
+```html
+<iframe allowpaymentrequest allow="usb; fullscreen"></iframe>
+```
+
+## Empecemos a codificar
+
+La API WebUSB se basa en gran medida en [Promesas (Promises)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) de JavaScript. Si no está familiarizado con estas, consulte este excelente [tutorial de Promesas](/promises). Una cosa más, `() => {}` son simplemente [funciones de flecha de](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ECMAScript 2015.
+
+### Obtenga acceso a dispositivos USB
+
+Puede solicitar al usuario que seleccione un único dispositivo USB conectado mediante `navigator.usb.requestDevice()` o ejecutar `navigator.usb.getDevices()` para obtener una lista de todos los dispositivos USB conectados a los que el origen tiene acceso.
+
+La función `navigator.usb.requestDevice()` toma un objeto JavaScript obligatorio que define `filters`. Estos filtros se utilizan para emparejar cualquier dispositivo USB con los identificadores `vendorId` del proveedor y, opcionalmente, los (`productId`) del producto. Las claves `classCode`, `protocolCode`, `serialNumber` y `subclassCode` también se pueden definir allí.
+
+<figure>{% Img src="image/admin/KIbPwUfEqgZZLxugxBOY.png", alt="Captura de pantalla del mensaje de usuario del dispositivo USB en Chrome", width="800", height="533" %}<figcaption>Mensaje de usuario del dispositivo USB.</figcaption></figure>
+
+Por ejemplo, aquí se explica cómo obtener acceso a un dispositivo Arduino conectado configurado para permitir el origen.
+
+```js
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(device => {
+  console.log(device.productName);      // "Arduino Micro"
+  console.log(device.manufacturerName); // "Arduino LLC"
+})
+.catch(error => { console.error(error); });
+```
+
+Antes de que preguntes, no se me ocurrió mágicamente este número hexadecimal `0x2341`. Simplemente busqué la palabra "Arduino" en esta [lista de ID de USB](http://www.linux-usb.org/usb.ids).
+
+El `device` USB devuelto en la promesa cumplida anterior tiene información básica pero importante sobre el dispositivo, como la versión USB compatible, el tamaño máximo de paquete, el proveedor y los ID de producto, la cantidad de configuraciones posibles que puede tener el dispositivo. Básicamente, contiene todos los campos del [descriptor USB](http://www.beyondlogic.org/usbnutshell/usb5.shtml#DeviceDescriptors) del dispositivo.
+
+Por cierto, si un dispositivo USB anuncia su [compatibilidad con WebUSB](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor), además de definir una URL de página de destino, Chrome mostrará una notificación persistente cuando el dispositivo USB esté conectado. Al hacer clic en esta notificación, se abrirá la página de destino.
+
+<figure>{% Img src="image/admin/1gRIz2wY4LYofeFq5cc3.png", alt="Captura de pantalla de la notificación WebUSB en Chrome", width="800", height="450" %}<figcaption> Notificación WebUSB.</figcaption></figure>
+
+A partir de allí, puede ejecutar fácilmente `navigator.usb.getDevices()` y acceder a su dispositivo Arduino como se muestra a continuación.
+
+```js
+navigator.usb.getDevices().then(devices => {
+  devices.forEach(device => {
+    console.log(device.productName);      // "Arduino Micro"
+    console.log(device.manufacturerName); // "Arduino LLC"
+  });
+})
+```
+
+### Comuníquese con una placa USB Arduino
+
+Bien, ahora veamos qué tan fácil es comunicarse desde una placa Arduino compatible con WebUSB a través del puerto USB. Consulte las instrucciones en [https://github.com/webusb/arduino](https://github.com/webusb/arduino) para habilitar sus [bocetos](http://www.arduino.cc/en/Tutorial/Sketch) mediante WebUSB.
+
+No se preocupe, cubriré todos los métodos de dispositivo WebUSB que se mencionan a continuación más adelante en este artículo.
+
+```js
+let device;
+
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(selectedDevice => {
+    device = selectedDevice;
+    return device.open(); // Begin a session.
+  })
+.then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
+.then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
+.then(() => device.controlTransferOut({
+    requestType: 'class',
+    recipient: 'interface',
+    request: 0x22,
+    value: 0x01,
+    index: 0x02})) // Ready to receive data
+.then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
+.then(result => {
+  const decoder = new TextDecoder();
+  console.log('Received: ' + decoder.decode(result.data));
+})
+.catch(error => { console.error(error); });
+```
+
+Tenga en cuenta que la biblioteca WebUSB que estoy usando aquí solo implementa un protocolo de ejemplo (basado en el protocolo serie USB estándar) y que los fabricantes pueden crear cualquier conjunto y tipos de endpoints que deseen. Las transferencias de control son especialmente agradables para comandos de configuración pequeños, ya que tienen prioridad de bus y tienen una estructura bien definida.
+
+Y aquí está el boceto que se ha subido a la placa Arduino.
+
+```arduino
+// Third-party WebUSB Arduino library
+#include <WebUSB.h>
+
+WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");
+
+#define Serial WebUSBSerial
+
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {
+    ; // Wait for serial port to connect.
+  }
+  Serial.write("WebUSB FTW!");
+  Serial.flush();
+}
+
+void loop() {
+  // Nothing here for now.
+}
+```
+
+La [biblioteca WebUSB Arduino](https://github.com/webusb/arduino/tree/gh-pages/library/WebUSB) de terceros utilizada en el código de muestra anterior hace básicamente dos cosas:
+
+- El dispositivo actúa como un dispositivo WebUSB que permite a Chrome leer la [URL de la página de destino](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor).
+- Expone una API serial WebUSB que puede usar para anular la predeterminada.
+
+Veamos el código JavaScript nuevamente. Una vez obtenido el `device` escogido por el usuario, `device.open()` ejecuta todos los pasos específicos de la plataforma para iniciar una sesión con el dispositivo USB. Luego, es necesario seleccionar una configuración USB disponible con `device.selectConfiguration()`. Recuerde que una configuración especifica cómo se alimenta el dispositivo, su consumo máximo de energía y su número de interfaces. Hablando de interfaces, también es necesario solicitar acceso exclusivo con `device.claimInterface()`, ya que los datos solo se pueden transferir a una interfaz o endpoints asociados cuando se reclama la interfaz. Finalmente, es necesario ejecutar `device.controlTransferOut()` para configurar el dispositivo Arduino con los comandos apropiados para comunicarse a través de la API WebUSB Serial.
+
+A partir de aquí, `device.transferIn()` realiza una transferencia masiva al dispositivo para informarle que el host está listo para recibir datos masivos. Luego, la promesa se cumple con un objeto de `result` que contiene `datos` de [DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) que deben analizarse adecuadamente.
+
+Si está familiarizado con el USB, todo esto le resultará bastante habitual.
+
+### Quiero más
+
+La API WebUSB le permite interactuar con todos los tipos de transferencias y endpoints USB:
+
+- Las transferencias de CONTROL, que se utilizan para enviar o recibir configuraciones o parámetros de comando a un dispositivo USB, se manejan con `controlTransferIn(setup, length)` y `controlTransferOut(setup, data)`.
+- Las transferencias INTERRUPT, utilizadas para una pequeña cantidad de datos urgentes, se manejan con los mismos métodos que las transferencias BULK con `transferIn(endpointNumber, length)` y `transferOut(endpointNumber, data)`.
+- Las transferencias ISOCHRONOUS, utilizadas para flujos de datos como video y sonido, se manejan con `isochronousTransferIn(endpointNumber, packetLengths)` y `isochronousTransferOut(endpointNumber, data, packetLengths)` .
+- Las transferencias BULK, que se utilizan para transferir una gran cantidad de datos no urgentes de manera confiable, se manejan con `transferIn(endpointNumber, length)` y `transferOut(endpointNumber, data)`.
+
+Es posible que también desee echar un vistazo al [proyecto WebLight de](https://github.com/sowbug/weblight) Mike Tsao, que proporciona un ejemplo básico de la construcción de un dispositivo LED controlado por USB diseñado para la API WebUSB (sin usar un Arduino en este caso). Encontrarás hardware, software y firmware.
+
+## Consejos
+
+La depuración de USB en Chrome es más fácil con la página interna `about://device-log` donde puede ver todos los eventos relacionados con el dispositivo USB en un solo lugar.
+
+<figure>{% Img src="image/admin/ssq2mMZmxpWtALortfZx.png", alt="Captura de pantalla de la página de registro del dispositivo para depurar WebUSB en Chrome", width="800", height="442", clase="w-captura de pantalla" %}<figcaption>Página de registro del dispositivo en Chrome para depurar la API WebUSB.</figcaption></figure>
+
+La página interna `about://usb-internals` también es útil y le permite simular la conexión y desconexión de dispositivos WebUSB virtuales. Esto es útil para realizar pruebas de IU sin hardware real.
+
+<figure>{% Img src="image/admin/KB5z4p7fZRsvkfhVTNkb.png", alt="Captura de pantalla de la página interna para depurar WebUSB en Chrome", width="800", height="294" %}<figcaption> Página interna en Chrome para depurar la API WebUSB.</figcaption></figure>
+
+En la mayoría de los sistemas Linux, los dispositivos USB se asignan con permisos de solo lectura de forma predeterminada. Para permitir que Chrome abra un dispositivo USB, deberá agregar una nueva [regla de udev](https://www.freedesktop.org/software/systemd/man/udev.html). Cree un archivo en `/etc/udev/rules.d/50-yourdevicename.rules` con el siguiente contenido:
+
+```vim
+SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
+```
+
+donde `[yourdevicevendor]` es `2341` si su dispositivo es un Arduino, por ejemplo. También puede utilizarse `ATTR{idProduct}` para una regla más específica. Asegúrese de que su `user` sea [miembro](https://wiki.debian.org/SystemGroups) del grupo `plugdev` Luego, simplemente vuelva a conectar su dispositivo.
+
+{% Aside  %} Los descriptores de Microsoft OS 2.0 utilizados por los ejemplos de Arduino solo funcionan en Windows 8.1 y versiones posteriores. Sin eso, el soporte de Windows aún requiere la instalación manual de un archivo INF. {% endAside %}
+
+## Recursos
+
+- Stack Overflow: [https://stackoverflow.com/questions/tagged/webusb](https://stackoverflow.com/questions/tagged/webusb)
+- Especificaciones de API WebUSB: [http://wicg.github.io/webusb/](https://wicg.github.io/webusb/)
+- Estado de la función en Chrome: [https://www.chromestatus.com/feature/5651917954875392](https://www.chromestatus.com/feature/5651917954875392)
+- Problemas de especificaciones: [https://github.com/WICG/webusb/issues](https://github.com/WICG/webusb/issues)
+- Errores de implementación: [http://crbug.com?q=component:Blink&gt;USB](http://crbug.com?q=component:Blink%3EUSB)
+- WebUSB ❤ ️Arduino: [https://github.com/webusb/arduino](https://github.com/webusb/arduino)
+- IRC: [#webusb](irc://irc.w3.org:6665/#webusb) en el IRC del W3C
+- Lista de correo de WICG: [https://lists.w3.org/Archives/Public/public-wicg/](https://lists.w3.org/Archives/Public/public-wicg/)
+- Proyecto WebLight: [https://github.com/sowbug/weblight](https://github.com/sowbug/weblight)
+
+Envíe un tweet a [@ChromiumDev] [cr-dev-twitter] usando el hashtag [`#WebUSB`](https://twitter.com/search?q=%23WebUSB&src=typed_query&f=live) y déjanos saber dónde y cómo lo está usando.
+
+## Agradecimientos
+
+Gracias a [Joe Medley](https://github.com/jpmedley) por la revisión este artículo.
diff --git a/src/site/content/es/blog/variable-fonts/index.md b/src/site/content/es/blog/variable-fonts/index.md
new file mode 100644
index 00000000000..ef4d54039bc
--- /dev/null
+++ b/src/site/content/es/blog/variable-fonts/index.md
@@ -0,0 +1,474 @@
+---
+layout: post
+title: Introducción a las fuentes variables en la web
+subhead: Una nueva especificación de fuente que puede reducir significativamente el tamaño de los archivos de fuente
+description: |
+  Cómo funcionan las fuentes variables, cómo implementan los tipógrafos las fuentes variables y
+  cómo trabajar con fuentes variables en CSS.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+  - dcrossland
+  - roeln
+date: 2018-02-19
+updated: 2020-08-17
+hero: image/admin/SHy7jOlEVPU1lsyfgvlG.jpg
+tags:
+  - blog
+  - fonts
+  - performance
+  - ux
+feedback:
+  - api
+---
+
+En este artículo, veremos qué son las fuentes variables, los beneficios que ofrecen y cómo podemos usarlas en nuestro trabajo. Primero, repasemos cómo funciona la tipografía en la web y qué innovaciones aportan las fuentes variables.
+
+## Compatibilidad con los navegadores
+
+A partir de mayo de 2020, la mayoría de los navegadores son compatibles con las fuentes variables. Consulta [¿Puedo usar fuentes variables?](https://caniuse.com/#feat=variable-fonts) y [Fallbacks](#fallbacks).
+
+## Introducción
+
+Los desarrolladores suelen utilizar indistintamente los términos de fuente y tipo de letra. Sin embargo, hay una diferencia: un tipo de letra es el diseño visual subyacente que puede existir en muchas tecnologías de composición tipográfica diferentes, y una fuente es una de estas implementaciones, en un formato de archivo digital. En otras palabras, un tipo de letra es lo que *miras* y la fuente es lo que *usas*.
+
+Otro concepto que usualmente es ignorado es la distinción entre un estilo y una familia. Un estilo es un tipo de letra único y específico, como negrita cursiva, y una familia es el conjunto completo de estilos.
+
+Antes de las fuentes variables, cada estilo se implementaba como un archivo de fuente independiente. Con fuentes variables, todos los estilos pueden estar contenidos en un solo archivo.
+
+<figure>{% Img src="image/admin/RbhgXwS81Y9PVRJnTjPX.png", alt="Una composición de muestras y una lista de diferentes estilos de la familia Roboto", width="800", height="600" %} <figcaption> Izquierda: un ejemplar de la familia tipográfica Roboto. Derecha: estilos con nombre dentro de la familia.</figcaption></figure>
+
+## Desafíos para el diseñador y el desarrollador
+
+Cuando un diseñador crea un proyecto de impresión, se enfrenta a algunas limitaciones, como el tamaño físico del diseño de la página, la cantidad de colores que se pueden utilizar (el cual está determinada por el tipo de imprenta que se utilizará), entre otros. Pero ellos pueden usar tantos estilos de tipografía como deseen. Esto significa que la tipografía de los medios impresos es a menudo rica y sofisticada, por lo que la experiencia de lectura es realmente agradable. Piensa en la última vez que disfrutaste hojear una increíble revista.
+
+Los diseñadores y los desarrolladores web tienen restricciones diferentes a las de los diseñadores de impresión, y una de las más importantes son los costos de ancho de banda asociados a nuestros diseños. Esto ha sido un tema debatido para obtener experiencias tipográficas más ricas, ya que tienen un costo. Con las fuentes web tradicionales, cada estilo que se utiliza en nuestros diseños requiere que los usuarios descarguen un archivo de fuente separado, lo que aumenta la latencia y el tiempo de renderizaje de la página. Solo incluir los estilos regular y negrita, más sus contrapartes en cursiva, puede ascender a 500 KB o más los datos de las fuentes. Esto es incluso antes de que nos hayamos ocupado de cómo se renderizan las fuentes, los patrones de respaldo que debemos usar o los efectos secundarios indeseables como [FOIT y FOUT](https://www.zachleat.com/web/fout-vs-foit/).
+
+Muchas familias de fuentes ofrecen una gama mucho más amplia de estilos, desde grosores delgados a negros, anchos y estrechos, una variedad de detalles con mucho estilo e incluso diseños de tamaños específicos (optimizados para tamaños de texto grandes o pequeños). Ya que tienes que cargar un nuevo archivo de fuente para cada estilo (o combinaciones de estilos), muchos desarrolladores web optan por no utilizar estas capacidades, dado que reduce la experiencia de lectura de sus usuarios.
+
+## Anatomía de una fuente variable
+
+Las fuentes variables abordan estos desafíos al empaquetar estilos en un solo archivo.
+
+Esto funciona comenzando con un estilo central o 'predeterminado', generalmente el 'Regular', un diseño romano vertical con el peso y ancho más típico que es más adecuado para texto sin formato. Esto luego se conecta a otros estilos en un rango continuo, llamado "eje". El eje más común es el del **Peso**, que puede conectar el estilo predeterminado a un estilo Negrita. Cualquier estilo individual se puede ubicar a lo largo de un eje y se denomina "instancia" de la fuente variable. Algunas instancias son nombradas por el desarrollador de la fuente, por ejemplo, la ubicación del eje del Peso 600 se llama SemiBold.
+
+La fuente variable [Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) tiene tres estilos para su eje de **Peso.** El estilo regular está en el centro y hay dos estilos en los extremos opuestos del eje, uno más ligero y otro más pesado. Entre estos, puedes elegir entre 900 instancias:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ecr5godvTKunVXP7W8aU.png", alt="La letra 'A' se muestra en diferentes pesos", width="800", height="218" %}<figcaption> Arriba: Anatomía ilustrada del eje Peso para el tipo de letra Roboto.</figcaption></figure>
+
+El desarrollador de fuentes puede ofrecer un conjunto de diferentes ejes. Puedes combinarlos porque todos comparten los mismos estilos predeterminados. Roboto tiene tres estilos en el eje Ancho: el regular está en el centro del eje y los estilos de estrechos y anchos, ambos están en cada extremo. Estos proporcionan todos los anchos del estilo regular y se combinan con el eje de Peso para proporcionar todos los anchos para cada peso.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Roboto Flex en combinaciones aleatorias de ancho y peso</figcaption></figure>
+
+¡Esto significa que hay miles de estilos! Esto puede parecer una exageración masiva, pero la calidad de la experiencia de lectura puede mejorarse notablemente con esta diversidad de estilos tipográficos. Y, si no se reduce el rendimiento, los desarrolladores web pueden utilizar desde unos cuantos hasta todos los que deseen en su diseño.
+
+### Cursiva
+
+La forma en que se manejan las cursivas en fuentes variables es interesante, ya que hay dos enfoques diferentes. Los tipos de letra como Helvetica o Roboto tienen contornos compatibles con la interpolación, por lo que sus estilos, romano (roman) y cursiva (italic), se pueden interpolar y el **eje Slant** se puede usar para pasar de romano a cursiva.
+
+Otros tipos de letra (como Garamond, Baskerville o Bodoni) en sus estilos romanos y cursivos tienen contorno de glifos que no son compatibles con la interpolación. Por ejemplo, los contornos que normalmente definen una "n" minúscula de estilo romano no coinciden con los contornos utilizados para definir una "n" minúscula en cursiva. En lugar de interpolar un contorno a otro, el eje de **cursiva** cambia de los contornos romanos a los de cursiva.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EySl1LIfX1QIrGq654PO.png", alt="{Ejemplo de ejes de peso para el tipo de letra Amstelvar", width="800", height="520" %} <figcaption> Contornos "n" de Amstelvar en cursiva (12 puntos, peso regular, ancho normal) y en romano. Imagen proporcionada por David Berlow, diseñador de tipografías y tipógrafo de Font Bureau.</figcaption></figure>
+
+Después del cambio a cursiva, los ejes disponibles para el usuario deben ser los mismos que los estilos romanos, al igual que el conjunto de caracteres debe ser el mismo.
+
+También se puede ver una capacidad de sustitución de glifos para glifos individuales y se puede usar en cualquier lugar del espacio de diseño de una fuente variable. Por ejemplo, un diseño de signo de dólar con dos barras verticales funciona mejor con tamaños de puntos más grandes, pero con tamaños de puntos más pequeños es mejor un diseño con solo una barra. Cuando tenemos menos píxeles para representar el glifo, un diseño de dos barras puede volverse ilegible. Para solucionar esto, al igual que el eje de Cursiva, puedes hacer una sustitución de glifo de un glifo por otro a lo largo del eje de **Tamaño óptico** en un punto decidido por el diseñador de tipos.
+
+En resumen, donde los contornos lo permiten, los diseñadores de tipos pueden crear fuentes que se interpolan entre varios estilos en un espacio de diseño multidimensional. Esto brinda un control granular sobre su tipografía y una gran cantidad de poder.
+
+## Definición de los ejes
+
+Hay cinco [ejes registrados](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags) que controlan características conocidas y predecibles de la fuente: peso, ancho, tamaño óptico, inclinación y cursiva. Además de esos, una fuente puede contener ejes personalizados. Estos pueden controlar cualquier aspecto de diseño de la fuente que el diseñador de tipografía desee: el tamaño de las serifas (o las gracias), la longitud de los caracteres decorativos, la altura de los ascendentes o el tamaño del punto en la i.
+
+Aunque los ejes pueden controlar la misma función, es posible que utilicen valores diferentes. Por ejemplo, en las fuentes variables Oswald y Hepta Slab solo hay un eje disponible, el de Peso, pero los rangos son diferentes: Oswald tiene el mismo rango que antes de que se actualizara para ser variable, desde 200 a 700, pero Hepta Slab tiene un peso extremo de hairline (súper delgado) iniciando en 1 y que va hasta 900.
+
+Los cinco ejes registrados tienen etiquetas en minúsculas de 4 caracteres que se utilizan para definir sus valores en CSS:
+
+<table>
+	<tbody>
+		<tr>
+			<th colspan="2">Nombres de ejes y valores CSS</th>
+		</tr>
+		<tr>
+			<td>Peso</td>
+			<td>
+				<code>wght</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Ancho</td>
+			<td>
+				<code>wdth</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Inclinación</td>
+			<td>
+				<code>slnt</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Tamaño óptico</td>
+			<td>
+				<code>opsz</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Cursiva</td>
+			<td>
+				<code>ital</code>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+Dado que el desarrollador de fuentes define qué ejes están disponibles en una fuente variable y qué valores pueden tener, es esencial saber qué ofrece cada fuente. La documentación de la fuente debe proporcionar esto, o puedes inspeccionar la fuente usando una herramienta como [Wakamai Fondue](https://wakamaifondue.com).
+
+## Casos de uso y beneficios
+
+Definir los valores de los ejes se define mediante el gusto personal y de la aplicación de las mejores prácticas tipográficas. El peligro de cualquier nueva tecnología es el posible uso indebido, y los escenarios que son demasiado artísticos o exploratorios también podrían disminuir la legibilidad del texto real. Para los títulos, explorar diferentes ejes para crear grandes diseños artísticos es emocionante, pero para el cuerpo del texto, esto significa un riesgo de hacer que el texto sea ilegible.
+
+### Expresión emocionante
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rh7wLaBLauEF02D2dqMC.png", alt="Ejemplo de césped de Mandy Michael", width="495", height="174" %}</figure>
+
+Un gran ejemplo de expresión artística se muestra arriba, una exploración del tipo de letra [Decovar](https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow) de Mandy Michael.
+
+Puedes ver el ejemplo en vivo y su código fuente [aquí](https://codepen.io/mandymichael/pen/YYaWop).
+
+### Animación
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2Du2L0Ii5nUqz8n6S3Vz.mp4", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Typeface Zycon, diseñado para animación por David Berlow, diseñador de tipografías y tipógrafo de Font Bureau.</figcaption></figure>
+
+También existe la posibilidad de explorar personajes animados con fuentes variables. Arriba hay un ejemplo de diferentes ejes que se utilizan con el tipo de letra Zycon. Mira el [ejemplo de animación en vivo en Axis Praxis](https://www.axis-praxis.org/specimens/zycon).
+
+[Anicons](https://typogram.github.io/Anicons) es la primera fuente de iconos de colores animados del mundo, basada en Material Design Icons. Anicons es un experimento que combina dos tecnologías de fuentes de vanguardia: fuentes variables y fuentes de color.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/anicons-animation.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Algunos ejemplos de animaciones al pasar el ratón sobre un elemento utilizando la fuente de iconos de color de Anicon</figcaption></figure>
+
+### Finura
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/larger-widths.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Amstelvar usa pequeños trozos de XTRA en direcciones opuestas para que los anchos de las palabras se nivelen</figcaption></figure>
+
+[Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) y [Amstelvar](https://github.com/TypeNetwork/Amstelvar) ofrecen un conjunto de "ejes paramétricos". En estos ejes, las letras se deconstruyen en 4 aspectos fundamentales de las formas: formas negras o positivas, formas blancas o negativas y las dimensiones x e y. De la misma forma que los colores primarios se pueden mezclar con cualquier otro color para refinar, estos 4 aspectos se pueden utilizar para refinar cualquier otro eje.
+
+El eje XTRA en Amstelvar te permite ajustar el valor "blanco" por mil, como se mostró en el ejemplo anterior. Usando pequeños trozos de XTRA en direcciones opuestas, los anchos de las palabras son igualados.
+
+## Fuentes variables en CSS
+
+### Cargando archivos de fuentes variables
+
+Las fuentes variables se cargan a través del mismo `@font-face` que las fuentes web estáticas tradicionales, pero con dos nuevas mejoras:
+
+```css
+@font-face {
+	font-family: 'Roboto Flex';
+	src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+       url('RobotoFlex-VF.woff2') format('woff2-variations');
+	font-weight: 100 1000;
+	font-stretch: 25% 151%;
+}
+```
+
+**1. Formatos de origen:** no queremos que el navegador descargue la fuente si no admite fuentes variables, por lo que agregamos una descripción `format`: una vez en el [future format](https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types) (`woff2 supports variations`), y una vez en el formato actual, el cual pronto pasara a ser un formato obsoleto(`woff2-variations`). Si el navegador admite fuentes variables y admite la próxima sintaxis, utilizará la primera declaración. Si admite fuentes variables y la sintaxis actual, utilizará la segunda declaración. Ambos apuntan al mismo archivo de fuente.
+
+<!-- TODO 2021 Q1 revisit this, based on progress in
+     https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types
+     to allow removing the 2nd src -->
+
+**2. Rangos de estilo:** notarás que estamos proporcionando dos valores para `font-weight` y `font-stretch`. En lugar de decirle al navegador qué peso específico proporciona esta fuente (por ejemplo, `font-weight: 500;` ), ahora le damos el **rango** de pesos admitidos por la fuente. Para Roboto Flex, el eje de Peso varía de 100 a 1000, y el CSS asigna directamente el rango del eje a la propiedad de estilo de `font-weight`. Al especificar el rango en `@font-face`, cualquier valor fuera de este rango será "limitado" al valor válido más cercano. El rango del eje Ancho se asigna de la misma manera a la propiedad `font-stretch`.
+
+Si estas utilizando la API de Google Fonts, todo esto será solucionado por la API. El CSS no solo contendrá los formatos y rangos de fuentes adecuados, sino que Google Fonts también enviará fuentes estáticas como fallback en caso de que las fuentes variables no sean compatibles.
+
+### Usando los pesos y anchuras
+
+Actualmente, los ejes que puedes definir de manera confiable desde el CSS son el eje de `wght` mediante `font-weight` y el eje de `wdth` mediante `font-stretch`.
+
+Tradicionalmente, definirás `font-weight` como una palabra clave (`light`, `bold`) o como un valor numérico entre 100 y 900, en incrementos de 100. Con las fuentes variables, puedes definir cualquier valor dentro del rango de Ancho de la fuente:
+
+```css
+.kinda-light {
+  font-weight: 125;
+}
+
+.super-heavy {
+  font-weight: 1000;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-weight.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>El eje de peso de Roboto Flex se cambia de su mínimo a su máximo.</figcaption></figure>
+
+Asimismo, podemos definir `font-stretch` con palabras clave (`condensed`, `ultra-expanded`) o con valores porcentuales:
+
+```css
+.kinda-narrow {
+  font-stretch: 33.3%;
+}
+
+.super-wide {
+  font-stretch: 151%;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-width.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>El eje de ancho de Roboto Flex se cambia de su mínimo a su máximo.</figcaption></figure>
+
+### Usando cursivas y oblicuos
+
+La eje `ital` está destinado a fuentes que contienen tanto un estilo regular, y un estilo de cursiva. El eje está destinado a ser un interruptor de encendido y apagado: el valor `0` está apagado y mostrará el estilo normal, mientras que el valor `1` mostrará la cursiva. A diferencia de otros ejes, no hay transición. Un valor de `0.5` no te dará una "media cursiva".
+
+El eje `slnt` es diferente de la cursiva en que no es un *estilo* nuevo, sino que solo inclina al estilo normal. De forma predeterminada, su valor es `0`, lo que significa que es la forma de letras verticales predeterminadas. Roboto Flex tiene una inclinación máxima de -10 grados, lo que significa que las letras se inclinarán hacia la derecha al pasar de 0 a -10.
+
+Sería intuitivo definir estos ejes mediante el `font-style`, pero a partir de abril de 2020, [todavía se está intentando resolver](https://github.com/w3c/csswg-drafts/issues/3125) cómo hacer esto exactamente. Entonces, por ahora, debes tratarlos como ejes personalizados y configurarlos a mediante el `font-variation-settings`:
+
+```css
+i, em, .italic {
+	/* Should be font-style: italic; */
+	font-variation-settings: 'ital' 1;
+}
+
+.slanted {
+	/* Should be font-style: oblique 10deg; */
+	font-variation-settings: 'slnt' 10;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-slant.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>El eje inclinado de Roboto Flex se cambia de su mínimo a su máximo.</figcaption></figure>
+
+### Usando tamaños ópticos
+
+Un tipo de letra puede ser muy pequeño (una nota al pie de 12 píxeles) o muy grande (un título de 80 píxeles). Las fuentes pueden responder a estos cambios de tamaño cambiando las formas de las letras y así adaptarse mejor a su tamaño. Un tamaño pequeño podría estar mejor sin detalles finos, mientras que un tamaño grande podría beneficiarse con trazos y detalles más finos.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wrVCGSQNaGWhNp97BoRS.png", alt="La letra 'a' se muestra en diferentes tamaños ópticos", width="800", height="147" %}<figcaption> La letra 'a' en Roboto Flex en diferentes tamaños de píxeles, luego escalada para tener el mismo tamaño, se muestra las diferencias en el diseño. <a href="https://codepen.io/RoelN/pen/PoPvdeV">Pruébalo en Codepen</a></figcaption></figure>
+
+Se ha introducido una nueva propiedad CSS para este eje: `font-optical-sizing`. De forma predeterminada, este tiene un valor de `auto`, lo que hace que el navegador establezca el valor del eje en función del `font-size`. Esto significa que el navegador elegirá el mejor tamaño óptico automáticamente, pero si deseas desactivarlo, puedes definir `font-optical-sizing` como `none`.
+
+También puedes definir un valor personalizado para el `opsz`, si es que deseas deliberadamente un tamaño óptico que no coincida con el tamaño de fuente. El siguiente CSS haría que el texto se mostrara en un tamaño grande, pero como es un tamaño óptico, este se imprimirá como si fuera uno de `8pt`:
+
+```css
+.small-yet-large {
+  font-size: 100px;
+  font-variation-settings: 'opsz' 8;
+}
+```
+
+### Usando ejes personalizados
+
+A diferencia de los ejes registrados, los ejes personalizados no se asignarán a una propiedad CSS existente, por lo que siempre tendrás que configurarlos mediante `font-variation-settings`. Las etiquetas de los ejes personalizados siempre están en mayúsculas, para distinguirlas de los ejes registrados.
+
+Roboto Flex ofrece algunos ejes personalizados, y el más importante es Grade (`GRAD`). El eje Grade es interesante ya que cambia el peso de la fuente sin cambiar los anchos, por lo que los saltos de línea no cambian. Al jugar con un eje Grade, puedes evitar estar obligado a juguetear con los cambios en el eje de Peso que afectan al ancho general, y luego los cambios en el eje de Ancho que afectan al peso total.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-grade.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>El eje de Grade de Roboto Flex se cambia de su mínimo a su máximo.</figcaption></figure>
+
+Como `GRAD` es un eje personalizado, con un rango de -200 a 150, debemos utilizarlo con `font-variation-settings`:
+
+```css
+.grade-light {
+	font-variation-settings: `GRAD` -200;
+}
+
+.grade-normal {
+	font-variation-settings: `GRAD` 0;
+}
+
+.grade-heavy {
+	font-variation-settings: `GRAD` 150;
+}
+```
+
+### Fuentes variables en Google Fonts
+
+Google Fonts ha ampliado su catálogo con [fuentes variables](https://fonts.google.com/?vfonly=true) y se encuentra añadido nuevas con regularidad. Actualmente, la interfaz está destinada a seleccionar instancias individuales de la fuente: selecciona la variación que deseas, haz clic en "Seleccionar este estilo" y se agregará al `<link>` que obtiene el CSS y las fuentes de Google Fonts.
+
+Para usar todos los ejes disponibles, o rangos de valores, deberás [componer manualmente](https://developers.google.com/fonts/docs/css2) la URL a la API de Google Fonts. La [descripción general de las fuentes variables](https://fonts.google.com/variablefonts) enumera todos los ejes y valores.
+
+La herramienta de [Vínculos de fuentes variables de Google](https://github.com/RoelN/google-variable-fonts-links) también puede proporcionarte las URL más recientes para las fuentes variables completas.
+
+## Herencia de font-variation-settings
+
+Si bien todos los ejes registrados pronto serán compatibles a través de las propiedades CSS existentes, por el momento, es posible que debas de confiar a `font-variation-settings` como una alternativa. Y si tu fuente tiene ejes personalizados, también necesitarás de `font-variation-settings`.
+
+Sin embargo, tenemos un pequeño problema con `font-variation-settings`. Cada propiedad que *no se establezca explícitamente* se restablecerá automáticamente a su valor predeterminado. ¡Los valores establecidos previamente no se heredarán! Esto significa que lo siguiente no funcionará como se espera:
+
+```html
+<span class="slanted grade-light">
+	Debería de ser slanted y tener un grade ligero
+</span>
+```
+
+Primero, el navegador aplicará `font-variation-settings: 'slnt' 10` de la clase `.slanted`. Luego aplicará `font-variation-settings: 'GRAD' -200` de la clase `.grade-light` ¡Pero esto restablecerá el `slnt` a su valor predeterminado de 0! El resultado será un texto en un grade ligero, pero no inclinado.
+
+Afortunadamente, podemos solucionar esto mediante el uso de variables CSS:
+
+```css
+/* Definir los valores predeterminados */
+:root {
+	--slnt: 0;
+	--GRAD: 0;
+}
+
+/* Cambiar esos valores y los de los hijos */
+.slanted {
+	--slnt: 10;
+}
+
+.grade-light {
+	--grad: -200;
+}
+
+.grade-normal {
+	--grad: 0;
+}
+
+.grade-heavy {
+	--grad: 150;
+}
+
+/* Aplicar cual sea el valor que se mantiene en las variables CSS */
+.slanted,
+.grade-light,
+.grade-normal,
+.grade-heavy {
+	font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
+}
+```
+
+Las variables CSS se conectarán en cascada, por lo que si un elemento (o uno de sus padres) ha definido el `slnt` a `10`, mantendrá ese valor, incluso si define `GRAD` con otro valor. Consulta [Arreglar la herencia de fuentes variables](https://pixelambacht.nl/2019/fixing-variable-font-inheritance/) para obtener una explicación detallada de esta técnica.
+
+Ten en cuenta que animar las variables CSS no funciona (por diseño), por lo que algo como esto no funciona:
+
+```css
+@keyframes width-animation {
+   from { --wdth: 25; }
+   to   { --wdth: 151; }
+}
+```
+
+Estas animaciones tendrán que suceder directamente en `font-variation-settings`.
+
+## Aumento de rendimiento
+
+Las fuentes variables OpenType nos permiten almacenar múltiples variaciones de una familia tipográfica en un solo archivo de fuente. [Monotype](https://medium.com/@monotype/part-2-from-truetype-gx-to-variable-fonts-4c28b16997c3) realizó un experimento combinando 12 fuentes de entrada para generar ocho pesos, en tres anchos, en los estilos romanos y de cursiva. El almacenamiento de 48 fuentes individuales en un solo archivo de fuente variable significó una *reducción del 88% en el tamaño del archivo*.
+
+Sin embargo, si estas utilizando una sola fuente como Roboto Regular y nada más, es posible que no veas una mejora neta en el tamaño de fuente si cambiara a una fuente variable con muchos ejes. Como siempre, depende de su caso de uso.
+
+Por otro lado, animar la fuente entre configuraciones puede causar problemas de rendimiento. Aunque esto mejorará una vez que el soporte de fuentes variables en los navegadores sea más maduro, el problema se puede reducir un poco animando solo las fuentes que están actualmente en la pantalla. Este práctico fragmento de [Dinamo](https://abcdinamo.com/news/using-variable-fonts-on-the-web) detiene las animaciones en elementos con la clase `vf-animation` cuando no están en la pantalla:
+
+```javascript
+var observer = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(function(entry) {
+    // Pausar/Iniciar la animación
+    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
+    else entry.target.style.animationPlayState = "paused"
+  });
+});
+
+var variableTexts = document.querySelectorAll(".vf-animation");
+variableTexts.forEach(function(el) { observer.observe(el); });
+```
+
+Si tu fuente responde a la interacción del usuario, es una buena idea [acelerar o rebotar (debounce)](https://css-tricks.com/debouncing-throttling-explained-examples/) los eventos de entrada. Esto evitará que el navegador represente instancias de la fuente variable que cambió tan poco con respecto a la instancia anterior que el ojo humano no vería la diferencia.
+
+Si estas utilizando Google Fonts, es una buena idea [preconectarse](/preconnect-and-dns-prefetch/) a `https://fonts.gstatic.com`, el dominio donde se alojan las fuentes de Google. Esto asegurará que el navegador sepa desde el principio dónde obtener las fuentes cuando las encuentre en el CSS:
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+```
+
+Este consejo también funciona para otros CDN: cuanto antes permitas que el navegador configure una conexión de red, antes podrás descargar tus fuentes.
+
+Podrás encontrar más sugerencias de rendimiento para cargar Google Fonts en [The Fastest Google Fonts (Las fuentes más rápidas de Google)](https://csswizardry.com/2020/05/the-fastest-google-fonts/).
+
+## Respaldos y compatibilidad con navegadores {: #fallbacks }
+
+Todos los navegadores modernos [tienen compatibilidad con fuentes variables](https://caniuse.com/#feat=variable-fonts). En caso de que necesites compatibilidad con navegadores más antiguos, puedes optar por crear tu sitio con fuentes estáticas y utilizar fuentes variables como mejora progresiva:
+
+```css
+/* Variables necesarias de Roboto para navegadores antiguos, solo regular + negritas */
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Regular.woff2');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Bold.woff2');
+  font-weight: bold;
+}
+
+body {
+  font-family: Roboto;
+}
+
+.super-bold {
+  font-weight: bold;
+}
+
+/* Variables necesarias de Roboto para todos los navegadores modernos, todos los pesos */
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Roboto';
+    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+         url('RobotoFlex-VF.woff2') format('woff2-variations');
+    font-weight: 100 1000;
+    font-stretch: 25% 151%;
+  }
+
+  .super-bold {
+    font-weight: 1000;
+  }
+}
+```
+
+El texto con la clase `.super-bold` se renderizará en negrita normal en los navegadores más antiguos, ya que es la única letra o fuente en negrita disponible. Si hay compatibilidad con letras variables, puede usar `1000`, el mayor grosor de letra posible.
+
+La regla `@supports` es incompatible con Internet Explorer; por ello, no verá nada en este navegador. Si eso fuera un problema, puede usar una de las [soluciones temporales tradicionales](https://stackoverflow.com/a/20541859/6255000) para conocer los navegadores viejos que sí puede usar.
+
+Si usa la API de Google Fonts, puede cargar las letras o fuentes adecuadas para los navegadores de los visitantes. Supongamos que consulta la letra Oswald en una gama de grosores de 200–700 de la siguiente manera:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
+```
+
+Los navegadores modernos que pueden manejar fuentes variables obtendrán la fuente variable y tendrán cada peso disponible entre 200 y 700. Los navegadores más antiguos recibirán fuentes estáticas individuales para cada peso. En este caso, esto significa que se descargarán 6 archivos de fuentes: uno para el peso 200, otro para el peso 300 y así sucesivamente.
+
+## Agradecimientos
+
+Este artículo solo habría sido posible con la ayuda de las siguientes personas:
+
+- [Mustafa Kurtuldu](https://twitter.com/mustafa_x), diseñador de UX y promotor del diseño en Google
+- [Roel Nieskens](https://twitter.com/PixelAmbacht), diseñador y desarrollador de UX y experto en tipografía en [Kabisa](https://kabisa.nl)
+- [Dave Crossland](https://twitter.com/davelab6), director de programas, Google Fonts
+- [David Berlow](https://twitter.com/dberlow), diseñador de tipografías y tipógrafo de [Font Bureau](https://fontbureau.typenetwork.com/)
+- [Laurence Penney](https://twitter.com/lorp), desarrollador de [axis-praxis.org](https://axis-praxis.org)
+- [Mandy Michael](https://twitter.com/Mandy_Kerr), desarrolladora de [variablefonts.dev](https://variablefonts.dev)
+
+Imagen de héroe de [Bruno Martins](https://unsplash.com/@brunus) en [Unsplash](https://unsplash.com/photos/OhJmwB4XWLE).
diff --git a/src/site/content/es/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/es/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..26b08e13acc
--- /dev/null
+++ b/src/site/content/es/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,136 @@
+---
+title: Prácticas recomendadas para medir Web Vitals en el campo
+subhead: Cómo medir Web Vitals con su herramienta de análisis actual.
+authors:
+  - philipwalton
+description: Cómo medir Web Vitals con su herramienta de análisis actual
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Cómo medir Web Vitals con su herramienta de análisis actual
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Tener la capacidad de medir e informar sobre el rendimiento real de sus páginas es fundamental para diagnosticar y mejorar el rendimiento a lo largo del tiempo. Sin [datos de campo](/user-centric-performance-metrics/#in-the-field) , es imposible saber con certeza si los cambios que está realizando en su sitio realmente están logrando los resultados deseados.
+
+Muchos proveedores populares de análisis [Real User Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) ya admiten las métricas de [Core Web Vitals](/vitals/#core-web-vitals) en sus herramientas (así como muchas [otras Web Vitals](/vitals/#other-web-vitals)). Si actualmente utiliza una de estas herramientas de análisis RUM, está en condiciones de evaluar si las páginas de su sitio cumplen los [umbrales recomendados por Core Web Vitals](/vitals/#core-web-vitals) y evitar regresiones en el futuro.
+
+Aunque recomendamos utilizar una herramienta de análisis que admita las métricas de Core Web Vitals, si la herramienta de análisis que utiliza actualmente no las admite, no es necesario que cambie. Casi todas las herramientas de análisis ofrecen una forma de definir y medir [métricas personalizadas](https://support.google.com/analytics/answer/2709828) o [eventos](https://support.google.com/analytics/answer/1033068), lo que significa que probablemente pueda utilizar su proveedor de análisis actual para medir las métricas de Core Web Vitals y agregarlas a sus paneles y reportes de análisis actuales.
+
+En esta guía se analizan las prácticas recomendadas para medir las métricas de Core Web Vitals (o cualquier métrica personalizada) con una herramienta de análisis de terceros o interna. También puede servir de guía para los proveedores de análisis que deseen agregar el soporte de Core Web Vitals a su servicio.
+
+## Utilice eventos o métricas personalizadas
+
+Como se mencionó anteriormente, la mayoría de las herramientas de análisis le permiten medir datos personalizados. Si su herramienta de análisis lo permite, debería poder medir cada una de las métricas de Core Web Vitals mediante este mecanismo.
+
+Medir eventos o métricas personalizadas en una herramienta de análisis generalmente es un proceso de tres pasos:
+
+1. [Defina o registre](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827) la métrica personalizada en el administrador de su herramienta (si es necesario). *(Nota: no todos los proveedores de análisis requieren que las métricas personalizadas se definan con anticipación).*
+2. Calcule el valor de la métrica en su código JavaScript del frontend.
+3. Envíe el valor de la métrica al análisis del backend, asegúrese de que el nombre o el ID coincide con lo que definió en el paso 1 *(de nuevo, si es necesario)*.
+
+Para los pasos 1 y 3, puede consultar la documentación de su herramienta de análisis para obtener instrucciones. Para el paso 2, puede utilizar la Biblioteca de Javascript [web-vitals](https://github.com/GoogleChrome/web-vitals) para calcular el valor de cada una de las métricas de Core Web Vitals.
+
+El siguiente ejemplo de código muestra lo fácil que puede ser realizar un seguimiento de estas métricas en el código y enviarlas a un servicio de análisis.
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## Asegúrese de que puede reportar una distribución
+
+Una vez que haya calculado los valores de cada una de las métricas de Core Web Vitals y los haya enviado a su servicio de análisis mediante una métrica o un evento personalizado, el siguiente paso es crear un informe o un panel que muestre los valores recopilados.
+
+Para asegurarse de que cumple los [umbrales recomendados por Core Web Vitals](/vitals/#core-web-vitals), necesitará que su reporte muestre el valor de cada métrica en el percentil 75.
+
+Si su herramienta de análisis no ofrece informes de percentiles como una función incorporada, probablemente aún pueda obtener estos datos manualmente generando un informe que enumere todos los valores de las métricas clasificados en orden ascendente. Una vez que se genere este informe, el resultado que se encuentre en el 75% de la lista completa y ordenada de todos los valores de ese informe será el percentil 75 para esa métrica, y esto será así independientemente de cómo se segmenten los datos (por tipo de dispositivo, tipo de conexión, país, etc.).
+
+Si su herramienta de análisis no le ofrece un nivel de detalle para realizar reportes a nivel de métricas de forma predeterminada, probablemente pueda conseguir el mismo resultado si su herramienta de análisis admite [dimensiones personalizadas](https://support.google.com/analytics/answer/2709828). Al establecer un valor de dimensión único y personalizado para cada instancia de métrica individual a la que le realiza un seguimiento, debería poder generar un reporte, desglosado por instancias de métrica individuales, si incluye la dimensión personalizada en la configuración del reporte. Dado que cada instancia tendrá un valor de dimensión único, no se producirá ninguna agrupación.
+
+[Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) es un ejemplo de esta técnica que utiliza Google Analytics. El código del reporte es de [código abierto](https://github.com/GoogleChromeLabs/web-vitals-report), por lo que los desarrolladores pueden consultarlo como un ejemplo de las técnicas descritas en esta sección.
+
+![Capturas de pantalla de Web Vitals](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)
+
+{% Aside %} Sugerencia: la Biblioteca de Javascript [`web-vitals`](https://github.com/GoogleChrome/web-vitals) proporciona un ID para cada instancia de métrica reportada, lo que permite crear distribuciones en la mayoría de las herramientas de análisis. Consulte la documentación de la interfaz [`Metric`](https://github.com/GoogleChrome/web-vitals#metric) para obtener más información. {% endAside %}
+
+## Envíe sus datos en el momento adecuado
+
+Algunas métricas de rendimiento se pueden calcular una vez que la página haya terminado de cargarse, mientras que otras (como CLS) tienen en cuenta toda la vida útil de la página y solo son definitivas una vez que la página haya comenzado a descargarse.
+
+Sin embargo, esto puede ser problemático ya que los eventos `beforeunload` y `unload` no son confiables (especialmente en móviles) y su uso [no es recomendado](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid) (ya que pueden evitar que una página sea elegible para la función [Back-Forward Cache](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache)).
+
+Para las métricas que rastrean toda la vida útil de una página, es mejor enviar el valor actual de la métrica durante el evento `visibilitychange`, siempre que el estado de visibilidad de la página cambie a `hidden`. Esto se debe a que, una vez que el estado de visibilidad de la página cambia a `hidden`, no hay garantía de que cualquier script de esa página pueda volver a ejecutarse. Esto es especialmente cierto en los sistemas operativos móviles, donde la aplicación del navegador en sí se puede cerrar sin que se active ninguna devolución de llamada de páginas.
+
+Tenga en cuenta que los sistemas operativos móviles generalmente activan el evento `visibilitychange` al cambiar de pestaña, se cambia de aplicación o se cierra la propia aplicación del navegador. También activan el evento `visibilitychange` cuando se cierra una pestaña o se navega a una nueva página. Esto hace que el evento `visibilitychange` sea mucho más confiable que los eventos `unload` o `beforeunload`.
+
+{% Aside 'gotchas' %} Debido a [algunos errores del navegador](https://github.com/w3c/page-visibility/issues/59#issue-554880545), hay algunos casos en los que el evento `visibilitychange` no se activa. Si está construyendo su propia biblioteca de análisis, es importante que tenga en cuenta estos errores. Tenga en cuenta que la Biblioteca de Javascript [web-vitals](https://github.com/GoogleChrome/web-vitals) tiene en cuenta todos estos errores. {% endAside %}
+
+## Supervisar el rendimiento a lo largo del tiempo
+
+Una vez que haya actualizado su implementación de análisis para realizar un seguimiento e informar sobre las métricas de Core Web Vitals, el siguiente paso es realizar un seguimiento de cómo los cambios en su sitio afectan al rendimiento a lo largo del tiempo.
+
+### La versión de sus cambios
+
+Un enfoque ingenuo (y en última instancia poco confiable) para el seguimiento de los cambios es implementar los cambios en la producción y luego asumir que todas las métricas recibidas después de la fecha de implementación corresponden al nuevo sitio y todas las métricas recibidas antes de la fecha de implementación corresponden al sitio anterior. Sin embargo, cualquier número de factores (incluyendo el almacenamiento en caché en el HTTP, el trabajador de servicios o la capa CDN) puede evitar que esto funcione.
+
+Un enfoque mucho mejor es crear una versión única para cada cambio implementado y luego rastrear esa versión en su herramienta de análisis. La mayoría de las herramientas de análisis admiten la configuración de una versión. Si el suyo no lo hace, puede crear una dimensión personalizada y establecer esa dimensión en su versión implementada.
+
+### Ejecutar experimentos
+
+Puede llevar el control de versiones un paso más allá mediante el seguimiento de varias versiones (o experimentos) al mismo tiempo.
+
+Si su herramienta de análisis le permite definir grupos de experimentos, utilice esa función. De lo contrario, puede utilizar dimensiones personalizadas para asegurarse de que cada uno de los valores de sus métricas se pueda asociar con un grupo de experimentos en particular en sus reportes.
+
+Con la experimentación en el lugar donde lleva a cabo análisis, puede implementar un cambio experimental en un subconjunto de sus usuarios y comparar el rendimiento de ese cambio con el rendimiento de los usuarios en el grupo de control. Una vez que tenga la seguridad de que un cambio realmente mejora el rendimiento, puede implementarlo en todos los usuarios.
+
+{% Aside %} Los grupos de experimentación siempre deben configurarse en el servidor. Evite utilizar cualquier herramienta de experimentación o prueba A/B que se ejecute del lado del cliente. Por lo general, estas herramientas bloquearán la renderización hasta que se determine el grupo de experimentación de un usuario, lo que puede ser perjudicial para sus tiempos de LCP. {% endAside %}
+
+## Garantizar que el cálculo no afecte al rendimiento
+
+Cuando se mide el rendimiento en usuarios reales, es absolutamente fundamental que cualquier código para medir el rendimiento que esté ejecutando no tenga un impacto negativo en el rendimiento de su página. Si es así, cualquier conclusión que intente sacar sobre cómo afecta su rendimiento a su negocio no será confiable, ya que nunca sabrá si la presencia del propio código de análisis está teniendo el mayor impacto negativo.
+
+Siga siempre estos principios cuando implemente el código de análisis del RUM en su sitio de producción:
+
+### Difiera sus análisis
+
+El código de análisis siempre debe cargarse de forma asincrónica y sin bloqueo y, por lo general, debe cargarse en último lugar. Si carga su código de análisis de forma bloqueada, puede afectar negativamente a LCP.
+
+Todas las API utilizadas para medir las métricas de Core Web Vitals fueron diseñadas específicamente para soportar la carga asíncrona y diferida de scripts (a través de la marca [`buffered`](https://www.chromestatus.com/feature/5118272741572608)), por lo que no es necesario apresurarse para que sus scripts se carguen antes de tiempo.
+
+En el caso de que esté midiendo una métrica que no se puede calcular más adelante en la línea de tiempo de carga de la página, debe incluir *solo* el código que debe ejecutarse antes en el `<head>` de su documento (para que no sea una [solicitud de bloqueo de renderización](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)) y diferir el resto. No cargue todos sus análisis de forma anticipada solo porque una sola métrica lo requiera.
+
+### No cree tareas largas
+
+El código de análisis con frecuencia se ejecuta en respuesta a la entrada del usuario, pero si su código de análisis realiza muchos cálculos del DOM o utiliza otras API que requieren uso intensivo del procesador, el propio código de análisis puede causar una respuesta de entrada deficiente. Además, si el archivo JavaScript que contiene su código de análisis es grande, la ejecución de ese archivo puede bloquear el proceso principal y afectar negativamente a la FID.
+
+### Utilice las API sin bloqueo
+
+API como <code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code> y <code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code> están diseñadas específicamente para ejecutar tareas no fundamentales de manera que no bloqueen las tareas fundamentales para el usuario.
+
+Estas API son excelentes herramientas para usar en una biblioteca de análisis de RUM.
+
+En general, todas las señales de los análisis deben enviarse utilizando la API `sendBeacon()` (si está disponible), y todo el código de cálculo de análisis pasivos debe ejecutarse durante los periodos de inactividad.
+
+{% Aside %} Para obtener orientación sobre cómo maximizar el uso del tiempo de inactividad y, al mismo tiempo, garantizar que el código se pueda ejecutar con urgencia cuando sea necesario (como cuando un usuario está descargando la página), consulte el patrón [idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/). {% endAside %}
+
+### No rastree más de lo que necesita
+
+El navegador expone una gran cantidad de datos de rendimiento, pero el hecho de que los datos estén disponibles no significa necesariamente que deba registrarlos y enviarlos a sus servidores para realizar análisis.
+
+Por ejemplo, la [API de tiempo de recursos](https://w3c.github.io/resource-timing/) proporciona datos de tiempo detallados para cada recurso cargado en su página. Sin embargo, es poco probable que todos esos datos sean necesarios o útiles para mejorar el rendimiento de la carga de recursos.
+
+En resumen, no se limite a rastrear los datos porque están ahí, asegúrese de que los datos se utilizarán antes de consumir recursos para realizar su seguimiento.
diff --git a/src/site/content/es/blog/vitals-measurement-getting-started/index.md b/src/site/content/es/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..2fcf8ce3335
--- /dev/null
+++ b/src/site/content/es/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: Cómo empezar a medir Web Vitals
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: Gráfico mensual superpuesto con cronómetros etiquetados como LCP, FID y CLS.
+description: Aprenda a medir los Web Vitals de su sitio tanto en el mundo real como en entornos de laboratorio.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+La recopilación de datos sobre los Web Vitals de su sitio es el primer paso para mejorarlos. Un análisis completo recopilará datos de rendimiento tanto en el mundo real como en entornos de laboratorio. Medir Web Vitals requiere cambios mínimos de código y se puede lograr usando herramientas gratuitas.
+
+## Cómo medir los Web Vitals utilizando los datos del RUM
+
+El [Real User Monitoring: Monitoreo de Usuarios Reales](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM), también conocido como los datos de campo, capturan el rendimiento experimentado por los usuarios reales de un sitio. Los datos RUM son los que utiliza Google para determinar si un sitio cumple con los [umbrales recomendados por Core Web Vitals.](/vitals/)
+
+### Cómo comenzar
+
+Si no tiene una configuración del RUM, las siguientes herramientas le proporcionarán rápidamente datos sobre el rendimiento de su sitio en el mundo real. Todas estas herramientas se basan en el mismo conjunto de datos subyacente ([Chrome User Experience Report](https://developer.chrome.com/docs/crux/)), pero tienen casos de uso ligeramente diferentes:
+
+- **PageSpeed Insights (PSI)**: [PageSpeed Insights](https://pagespeed.web.dev/) informa sobre el rendimiento agregado a nivel de página y a nivel de origen durante los últimos 28 días. Además, proporciona sugerencias sobre cómo mejorar el rendimiento. Si busca una única acción para comenzar a medir y mejorar los Web Vitals de su sitio web, le recomendamos que utilice PSI para auditar su sitio. PSI está disponible en la [web](https://pagespeed.web.dev/) y como [API](https://developers.google.com/speed/docs/insights/v5/get-started).
+- **Search Console**: [Search Console](https://search.google.com/search-console/welcome) informa los datos de rendimiento por página. Esto lo hace adecuado para identificar páginas específicas que necesitan mejoras. A diferencia de PageSpeed Insights, los informes de Search Console incluyen datos históricos de rendimiento. Search Console solo se puede utilizar con sitios de los que seas propietario y cuya propiedad ha sido verificada.
+- **Panel de control de CrUX**: el [panel de control de CrUX](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard) es un panel de control preconstruido que muestra los datos de CrUX para un origen de su elección. Está construido sobre Data Studio y el proceso de configuración toma aproximadamente un minuto. En comparación con PageSpeed Insights y Search Console, los informes del panel de CrUX incluyen más dimensiones, por ejemplo, los datos se pueden desglosar por dispositivo y tipo de conexión.
+
+Vale la pena señalar que, aunque las herramientas enumeradas anteriormente son adecuadas para "comenzar" a medir Web Vitals, también pueden ser útiles en otros contextos. En particular, tanto CrUX como PSI están disponibles como API y se pueden utilizar para [crear paneles de control](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o)  y otros informes.
+
+### Recopilación de datos del RUM
+
+Aunque las herramientas basadas en CrUX son un buen punto de partida para investigar el rendimiento de los Web Vitals, le recomendamos encarecidamente que lo complemente con su propio RUM. Los datos del RUM que recopila usted mismo pueden proporcionar información más detallada e inmediata sobre el rendimiento de su sitio. Esto facilita la identificación de problemas y probar posibles soluciones.
+
+{% Aside %} Las fuentes de datos basadas en CrUX informan de los datos utilizando una granularidad de aproximadamente un mes, sin embargo, los detalles de esto varían ligeramente según la herramienta. Por ejemplo, PSI y Search Console informan del rendimiento observado en los últimos 28 días, mientras que el conjunto de datos y el panel de control de CrUX se desglosan por mes natural. {% endAside %}
+
+Puede recopilar sus propios datos del RUM utilizando un proveedor del RUM especializado, o bien, configurando sus propias herramientas.
+
+Los proveedores del RUM especializado se especializan en la recopilación y presentación de datos del RUM. Para utilizar Core Web Vitals con estos servicios, pregunte a su proveedor del RUM sobre la habilitación de la supervisión de Core Web Vitals para su sitio.
+
+Si no tiene un proveedor del RUM, puede aumentar su configuración de análisis existente para recopilar e informar sobre estas métricas utilizando la [Biblioteca de JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals). Este método se explica con más detalle a continuación.
+
+### Biblioteca de JavaScript web-vitals
+
+Si está implementando su propia configuración del RUM para Web Vitals, la forma más sencilla de recoger las medidas de los Web Vitals es utilizar la Biblioteca de JavaScript [`web-vitals`](https://github.com/GoogleChrome/web-vitals). `web-vitals` es una biblioteca pequeña y modular (~1KB) que proporciona una API conveniente para recopilar y reportar cada una de las [medidas de campo](/user-centric-performance-metrics/#in-the-field) en Web Vitals.
+
+Las métricas que componen Web Vitals no están expuestas directamente por las API de rendimiento integradas en el navegador, sino que se crearon sobre ellas. Por ejemplo, [Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS)](/cls/) se implementa utilizando la [API Layout Instability](https://wicg.github.io/layout-instability/). Al utilizar `web-vitals`, no necesita preocuparse de implementar estas métricas usted mismo. Además, garantiza que los datos que recopila coinciden con la metodología y las prácticas recomendadas para cada métrica.
+
+Para obtener más información sobre la implementación de `web-vitals`, consulte la [documentación](https://github.com/GoogleChrome/web-vitals) y las [Prácticas recomendadas para medir Web Vitals en la guía de campo](/vitals-field-measurement-best-practices/).
+
+### Cómo agregar datos
+
+Es esencial que reporte las medidas recopiladas por `web-vitals`. Si estos datos se miden pero no se reportan, nunca los verá. La documentación de los `web-vitals` incluye ejemplos que muestran cómo enviar los datos a [un endpoint genérico de la API](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint), [Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics) o [Google Tag Manager](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager).
+
+Si ya tiene una herramienta de reportes favorita, considere usarla. De lo contrario, Google Analytics es gratuita y se puede utilizar para este propósito.
+
+Al considerar qué herramienta utilizar, es útil pensar en quién necesitará tener acceso a los datos. Por lo general, las empresas obtienen las mayores ganancias de rendimiento cuando toda la empresa, en lugar de un solo departamento, está interesada en mejorar el rendimiento. Consulte [Cómo corregir la velocidad del sitio web de forma cruzada](/fixing-website-speed-cross-functionally/) para obtener información sobre cómo conseguir la participación de diferentes departamentos.
+
+### Interpretación de los datos
+
+Al analizar los datos de rendimiento, es importante prestar atención a las colas de la distribución. Los datos de RUM con frecuencia revelan que el rendimiento varía ampliamente: algunos usuarios tienen experiencias rápidas, otros tienen experiencias lentas. Sin embargo, el uso de la mediana para resumir los datos puede enmascarar fácilmente este comportamiento.
+
+Con respecto a los Web Vitals, Google utiliza el porcentaje de experiencias "buenas", en vez de estadísticas como medianas o promedios, para determinar si un sitio o página cumple con los umbrales recomendados. Específicamente, para que se considere que un sitio o una página cumple con los umbrales de Core Web Vitals, el 75% de las visitas a la página deben alcanzar el umbral "bueno" para cada métrica.
+
+## Cómo medir los Web Vitals utilizando los datos del laboratorio
+
+Los [datos de laboratorio](/user-centric-performance-metrics/#in-the-lab), también conocidos como datos sintéticos, se recopilan de un entorno controlado, en vez de usuarios reales. A diferencia de los datos del RUM, los datos de laboratorio se pueden recopilar de entornos de preproducción y, por lo tanto, se pueden incorporar a los flujos de trabajo de los desarrolladores y a los procesos de integración continua. Ejemplos de herramientas que recopilan datos sintéticos son Lighthouse y WebPageTest.
+
+### Consideraciones
+
+Siempre habrá discrepancias entre los datos del RUM y los datos de laboratorio, especialmente si las condiciones de la red, el tipo de dispositivo o la ubicación del entorno del laboratorio difieren significativamente de las de los usuarios. Sin embargo, cuando se trata de recopilar datos de laboratorio sobre métricas de Web Vitals en particular, hay un par de consideraciones específicas que es importante tener en cuenta:
+
+- **Cumulative Layout Shift (CLS):** El [Cumulative Layout Shift](/cls/) medido en entornos de laboratorio puede ser artificialmente más bajo que el CLS observado en los datos del RUM. El CLS se define como la "suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce *durante toda la vida útil de la página* ". Sin embargo, la vida útil de una página suele ser muy diferente dependiendo de si la carga un usuario real o una herramienta sintética para medir el rendimiento. Muchas herramientas de laboratorio solo cargan la página, no interactúan con ella. Como resultado, solo capturan los cambios de diseño que se producen durante la carga de la página inicial. Por el contrario, el CLS medido por las herramientas del RUM captura [cambios de diseño inesperados](/cls/#expected-vs-unexpected-layout-shifts) que ocurren a lo largo de toda la vida útil de la página.
+- **First Input Delay: Demora de la primera entrada (FID)** [First Input Delay](/fid/) no se puede medir en entornos de laboratorio porque requiere interacciones del usuario con la página. Como resultado, [Total Blocking Time: Tiempo de bloqueo total](/tbt/) (TBT) es el proxy de laboratorio recomendado para la FID. TBT mide la "cantidad total de tiempo entre First Contentful Paint y Time to Interactive durante el cual la página está bloqueada para responder a la entrada del usuario". Aunque FID y TBT se calculan de manera diferente, ambos son reflejos de un hilo principal bloqueado durante el proceso de arranque. Cuando el proceso principal está bloqueado, el navegador se demora en responder a las interacciones del usuario. FID mide la demora, si lo hay, que se produce la primera vez que un usuario intenta interactuar con una página.
+
+### Herramientas
+
+Estas herramientas se pueden utilizar para recopilar medidas obtenidas en el laboratorio de Web Vitals:
+
+- **Web Vitals Chrome Extension:** la [extensión](https://github.com/GoogleChrome/web-vitals-extension) de los Web Vitals de Chrome mide y reporta los Core Web Vitals (LCP, FID, y CLS) para una página determinada. Esta herramienta está destinada a proporcionar a los desarrolladores comentarios sobre el rendimiento en tiempo real conforme se realizan cambios en el código.
+- **Lighthouse:** Lighthouse reporta sobre LCP, CLS y TBT, y también destaca las posibles mejoras en el rendimiento. Lighthouse está disponible en Chrome DevTools, como una extensión de Chrome y como un paquete npm. Lighthouse también se puede incorporar a los flujos de trabajo de integración continua a través de [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci).
+- **WebPageTest:** [WebPageTest](https://webpagetest.org/) incluye Web Vitals como parte de sus informes estándar. WebPageTest es útil para recopilar información sobre los Web Vitals en condiciones particulares de los dispositivos y las redes.
diff --git a/src/site/content/es/blog/vitals-tools/index.md b/src/site/content/es/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..4a2f39c36e1
--- /dev/null
+++ b/src/site/content/es/blog/vitals-tools/index.md
@@ -0,0 +1,157 @@
+---
+title: Herramientas para medir Core Web Vitals
+subhead: Sus herramientas de desarrollo favoritas ahora pueden medir los Core Web Vitals.
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: Lea sobre la recién anunciada compatibilidad de las medidas de Core Web Vitals con herramientas populares para desarrolladores web como Lighthouse, PageSpeed Insights, Chrome UX Report y muchas otras.
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Logotipo de Chrome User Experience, logotipo de PageSpeed Insights, logotipo de Lighthouse, logotipo de Search Console, logotipo de Chrome DevTools, logotipo de la extensión Web Vitals.
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+La iniciativa [Web Vitals](/vitals/) recientemente anunciada proporciona una orientación unificada sobre las señales de calidad que son esenciales para que todos los sitios brinden una excelente experiencia de usuario en la web. Nos complace anunciar que **todas las herramientas populares de Google para desarrolladores web ahora son compatibles con las medidas de Core Web Vitals**, lo que le ayudará a diagnosticar y solucionar más fácilmente los problemas de la experiencia del usuario. Esto incluye [Lighthouse](https://github.com/GoogleChrome/lighthouse), [PageSpeed Insights](https://pagespeed.web.dev/), [Chrome DevTools](https://developer.chrome.com/docs/devtools/), [Search Console](https://search.google.com/search-console/about), [la herramienta de medición de web.dev](/measure/), la [extensión de Chrome Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)  y una nueva (!)[API de Chrome UX Report](https://developer.chrome.com/docs/crux/).
+
+Ahora que la Búsqueda de Google incluye Core Web Vitals como base para evaluar la [experiencia de la página](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html), es importante que estas métricas estén disponibles y sean tan procesables como sea posible.
+
+<figure>{% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Resumen de Chrome y herramientas de búsqueda compatibles con las métricas de Core Web Vitals", width="800", height="509" %}</figure>
+
+{% Aside 'key-term' %} Las **herramientas de laboratorio** brindan una visión sobre cómo un *usuario potencial* probablemente experimentará su sitio web y ofrecen resultados reproducibles para la depuración. Las herramientas de **campo** brindan una visión sobre cómo sus *usuarios reales* experimentan su sitio web. Este tipo de medición a menudo se denomina Monitoreo de Usuarios Reales (RUM). Cada [herramienta de laboratorio o de campo](/how-to-measure-speed/#lab-data-vs-field-data) ofrece un valor distinto para optimizar su experiencia de usuario. {% endAside %}
+
+Para empezar a optimizar la experiencia del usuario con Core Web Vitals, pruebe el siguiente flujo de trabajo:
+
+- Utilice el nuevo Core Web Vitals Report de Search Console para identificar los grupos de páginas que requieren atención (según los datos de campo).
+- Una vez que haya identificado las páginas que necesitan trabajo, utiliza PageSpeed Insights •	Una vez que haya identificado las páginas que necesitan atención, utilice PageSpeed Insights (impulsado por Lighthouse y Chrome UX Report) para diagnosticar problemas de laboratorio y de campo en una página. PageSpeed Insights (PSI) está disponible por medio de Search Console o puede introducir una URL directamente en PSI.
+- ¿Está listo para optimizar su sitio localmente en el laboratorio? Utilice Lighthouse y Chrome DevTools para medir Core Web Vitals y obtenga una orientación práctica sobre qué corregir exactamente. La extensión de Chrome Web Vitals puede brindarle una visión en tiempo real de las métricas en el escritorio.
+- ¿Necesita un panel de control personalizado de Core Web Vitals? Utilice el panel de control actualizado de CrUX o la nueva API de Chrome UX Report para los datos de campo o la API de PageSpeed Insights para los datos de laboratorio.
+- ¿Busca orientación? web.dev/measure puede medir su página y mostrarle un conjunto priorizado de normas y laboratorios de código para la optimización, utilizando datos de PSI.
+- Por último, utilice Lighthouse CI en las solicitudes de extracción para asegurarse de que no haya regresiones en Core Web Vitals antes de implementar un cambio en la producción.
+
+Con esa introducción, ¡profundicemos en las actualizaciones específicas para cada herramienta!
+
+### Lighthouse
+
+Lighthouse es una herramienta automatizada de auditoría de sitios web que ayuda a que los desarrolladores diagnostiquen problemas e identifiquen oportunidades para mejorar la experiencia del usuario de sus sitios. Mide varias dimensiones de la calidad de la experiencia del usuario en un entorno de laboratorio, incluyendo el rendimiento y la accesibilidad. La última versión de Lighthouse ([6.0](/lighthouse-whats-new-6.0/), lanzada a mediados de mayo del 2020) incluye auditorías adicionales, nuevas métricas y una puntuación de rendimiento integrada recientemente.
+
+<figure>{% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="Lighthouse 6.0 muestra las métricas más recientes de Core Web Vitals", width="800", height="527" %}</figure>
+
+Lighthouse 6.0 introduce tres nuevas métricas en el informe. Dos de estas nuevas métricas, [Largest Contentful Paint : Despliegue del contenido más extenso](/lcp/) (LCP) y el [Cumulative Layout Shift: Cambio Acumulativo del diseño](/cls/) (CLS), son implementaciones del laboratorio Core Web Vitals y brindan información de diagnóstico importante para optimizar la experiencia del usuario. Dada su importancia para evaluar la experiencia del usuario, las nuevas métricas no solo se miden e incluyen en el reporte, sino que también se tienen en cuenta para calcular la puntuación de rendimiento.
+
+La tercera nueva métrica incluida en Lighthouse, el [Total Blocking Time: Tiempo total de bloqueo](/tbt/) (TBT), se correlaciona bien con la métrica de campo [First Input Delay: Demora de la primera entrada](/fid/) (FID), otra métrica de Core Web Vitals. Si sigue las recomendaciones proporcionadas en el informe Lighthouse y optimiza sus resultados, podrá ofrecer la mejor experiencia posible a sus usuarios.
+
+Todos los productos que potencian Lighthouse se actualizan para reflejar la última versión, incluyendo [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci), que le permitirán medir fácilmente sus Core Web Vitals en solicitudes de extracción antes de que se fusionen e implementen.
+
+<figure>{% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="Lighthouse CI muestra una visualización de diferencias con Largest Contentful Paint", width="800", height="498" %}</figure>
+
+Para obtener más información sobre las últimas actualizaciones de Lighthouse, consulte nuestra publicación del blog [Novedades de Lighthouse 6.0.](/lighthouse-whats-new-6.0/)
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/) (PSI) reporta sobre el rendimiento de laboratorio y de campo de una página en dispositivos móviles y equipos de escritorio. La herramienta proporciona una visión general de cómo los usuarios del mundo real experimentan la página (impulsada por Chrome UX Report) y un conjunto de recomendaciones prácticas sobre cómo el propietario de un sitio puede mejorar la experiencia de la página (proporcionada por Lighthouse).
+
+PageSpeed Insights y la [API de PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) también se actualizaron para usar Lighthouse 6.0 y ahora son compatibles con las medidas de Core Web Vitals en las secciones del reporte de laboratorio y de campo. Las Core Web Vitals se anotan con una cinta azul como se muestra a continuación.
+
+<figure>{% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="PageSpeed Insights con los datos de Core Web Vitals mostrados en el campo y en el laboratorio", width="800", height="873" %}</figure>
+
+Si bien [Search Console](https://search.google.com/search-console/) ofrece a los propietarios de sitios una gran visión general de los grupos de páginas que necesitan atención, PSI ayuda a identificar oportunidades por página para mejorar la experiencia de la página. En PSI, podrá ver claramente si su página cumple o no con los umbrales para una buena experiencia en todos los Core Web Vitals en la parte superior del reporte, se indica si **acredita la evaluación Core Web Vitals** o **no acredita la evaluación Core Web Vitals**.
+
+### CrUX
+
+[Chrome UX Report](https://developer.chrome.com/docs/crux/) (CrUX) es un conjunto de datos públicos sobre la experiencia real del usuario en millones de sitios web. Mide las versiones de campo de todas las Core Web Vitals. A diferencia de los datos de laboratorio, los datos de CrUX provienen de [usuarios que han optado por participar](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) en el campo. Con estos datos, los desarrolladores pueden comprender la distribución de las experiencias de los usuarios del mundo real en sus propios sitios web o incluso en los de la competencia. Incluso si no tiene RUM en su sitio, CrUX puede proporcionar una manera rápida y fácil de evaluar sus Core Web Vitals. El [conjunto de datos de CrUX en BigQuery](https://developer.chrome.com/docs/crux/bigquery/) incluye datos de rendimiento detallados para todos los Core Web Vitals y está disponible en instantáneas mensuales a nivel de origen.
+
+La única manera de saber realmente cómo funciona su sitio para los usuarios es medir su rendimiento en el campo mientras esos usuarios lo cargan e interactúan con él. Este tipo de medición se conoce comúnmente como Monitoreo de usuarios reales, o RUM por sus siglas en inglés. Incluso si no tiene RUM en su sitio, CrUX puede proporcionar una manera rápida y fácil de evaluar sus Core Web Vitals.
+
+**Introducción a la API de CrUX**
+
+Hoy nos complace anunciar la [API de CrUX](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/), una forma rápida y gratuita de integrar fácilmente sus flujos de trabajo de desarrollo con la medida de calidad a nivel de origen y de URL para las siguientes métricas de campo:
+
+- Largest Contentful Paint
+- Cumulative Layout Shift
+- First Input Delay
+- First Contentful Paint
+
+Los desarrolladores pueden consultar un origen o una URL y segmentar los resultados por diferentes factores de forma. La API se actualiza diariamente y resume los datos de los 28 días anteriores (a diferencia del conjunto de datos de BigQuery, que se agrega mensualmente). La API también tiene las mismas cuotas públicas reducidas que ponemos en nuestra otra API, la API de PageSpeed Insights (25,000 solicitudes al día).
+
+A continuación se muestra una [demostración](https://developer.chrome.com/blog/chrome-ux-report-api/) que utiliza la API de CrUX para visualizar las métricas de Core Web Vitals con distribuciones **buenas**, **que necesitan mejoras** y **deficientes**:
+
+<figure>{% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Demostración de la API Informe de experiencia del usuario de Chrome que muestra las métricas de Core Web Vitals", width="800", height="523" %}</figure>
+
+En versiones futuras, planeamos expandir la API para permitir el acceso a dimensiones y métricas adicionales del conjunto de datos de CrUX.
+
+**Panel de control de CrUX renovado**
+
+El [panel de control de CrUX](http://g.co/chromeuxdash) recientemente rediseñado le permite rastrear fácilmente el rendimiento de un origen a lo largo del tiempo, y ahora puede utilizarlo para monitorear las distribuciones de todas las métricas de Core Web Vitals. Para comenzar con el panel, consulte nuestro [tutorial](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) en web.dev.
+
+<figure>{% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="Panel de Informes de experiencia del usuario de Chrome que muestra las métricas de Core Web Vitals en una nueva página de destino", width="800", height="497" %}</figure>
+
+Introducimos una nueva página de inicio de Core Web Vitals para que sea aún más fácil ver el rendimiento de su sitio de un vistazo. Agradecemos sus comentarios sobre todas las herramientas de CrUX, para compartir sus opiniones y preguntas, póngase en contacto con nosotros en la cuenta de Twitter [@ChromeUXReport](https://groups.google.com/a/chromium.org/g/chrome-ux-report) o en el [Grupo de Google](https://groups.google.com/a/chromium.org/g/chrome-ux-report).
+
+### Panel de rendimiento de Chrome DevTools
+
+**Depurar eventos de cambio de diseño en la sección Experiencia**
+
+El **rendimiento** del panel Chrome DevTools tiene una nueva **[sección de Experiencia](https://developers.google.com/web/updates/2020/05/devtools#cls)** que puede ayudarle a detectar cambios de diseño inesperados. Esto es útil para encontrar y solucionar problemas de inestabilidad visual en su página que contribuyen al Cumulative Layout Shift.
+
+<figure>{% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="Cumulative Layout Shift mostrado con registros rojos en el panel Rendimiento", width="800", height="517" %}</figure>
+
+Seleccione un cambio de diseño para ver sus detalles en la pestaña **Resumen**. Para visualizar dónde se produjo el cambio per se, coloque el cursor sobre los campos  **Moved from** y **Moved to**.
+
+**Depuración para la disponibilidad de la interacción con Total Blocking Time en el pie de página**
+
+La métrica Total Blocking Time (TBT) se puede medir en herramientas de laboratorio y es un excelente proxy para  First Input Delay. TBT mide la cantidad total de tiempo entre [First Contentful Paint (FCP)](/fcp/) y [Time to Interactive (TTI)](/tti/) donde el subproceso principal estuvo bloqueado durante el tiempo suficiente para evitar la respuesta de entrada. Las optimizaciones de rendimiento que mejoran el TBT en el laboratorio deberían mejorar el FID en el campo.
+
+<figure>{% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="Total Blocking Time displayed se muestra en el pie de página del panel de rendimiento de DevTools", width="800", height="517" %}</figure>
+
+TBT se muestra ahora en el pie de página del panel de **rendimiento** de Chrome DevTools cuando se mide el rendimiento de la página:
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. Haga clic en **Grabar** .
+2. Vuelva a cargar la página manualmente.
+3. Espere a que se cargue la página y luego detenga la grabación.
+
+Para obtener más información, consulte [Novedades de DevTools (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls) .
+
+### Search Console
+
+El nuevo [Core Web Vitals Report](https://support.google.com/webmasters/answer/9205520) en Search Console le ayuda a identificar grupos de páginas de su sitio que requieren atención, según los datos del mundo real (de campo) de CrUX. El rendimiento de las URL se agrupa por estado, tipo de métrica y grupo de URL (grupos de páginas web similares).
+
+<figure>{% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Nuevo Core Web Vitals Report de Search Console", width="800", height="1000" %}</figure>
+
+El reporte se basa en las tres métricas de Core Web Vitals: LCP, FID y CLS.  Si una URL no tiene una cantidad mínima de datos para reportar estas métricas, se omite del reporte. Pruebe el nuevo reporte para obtener una visión global del rendimiento de su origen.
+
+Una vez que identifique un tipo de página que tenga problemas relacionados con Core Web Vitals, puede utilizar PageSpeed Insights para conocer sugerencias de optimización específicas para páginas representativas.
+
+#### web.dev
+
+[web.dev/measure](/measure/) le permite medir el rendimiento de su página a lo largo del tiempo, al brindar una lista priorizada de normas y codelabs sobre cómo mejorar. Su medición es impulsada por PageSpeed Insights. La herramienta de medición ahora también es compatible con las métricas de Core Web Vitals, como se muestra a continuación:
+
+<figure>{% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="Mida las métricas de Core Web Vitals a lo largo del tiempo y obtenga orientación priorizada con la herramienta de medición de web.dev", width="800", height="459" %}</figure>
+
+### Extensión Web Vitals
+
+La extensión Web Vitals mide las tres métricas de Core Web Vitals en tiempo real para Google Chrome (de escritorio). Esto es útil para detectar problemas en una fase temprana del flujo de trabajo de desarrollo y como herramienta de diagnóstico para evaluar el rendimiento de Core Web Vitals mientras se navega por la web.
+
+¡La extensión ya está disponible para su instalación desde [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)! Esperamos que le sea de utilidad. Agradecemos cualquier contribución para mejorarlo, así como los comentarios sobre el repositorio de [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) del proyecto.
+
+<figure>{% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Core Web Vitals se muestra en tiempo real con la extensión de Chrome Web Vitals", width="800", height="459" %}</figure>
+
+#### Aspectos más destacados
+
+¡Eso es un envoltorio! ¿Qué puede hacer a continuación?:
+
+- Utilice **Lighthouse** en DevTools para optimizar su experiencia de usuario y asegurarse de que se está preparando para el éxito con Core Web Vitals en el campo.
+- Utilice **PageSpeed Insights** para comparar el rendimiento de Core Web Vitals en el laboratorio y en el campo.
+- Pruebe la nueva **API de Chrome User Experience Report** para acceder fácilmente a los resultados de su origen y su URL con respecto a Core Web Vitals durante los últimos 28 días.
+- Utilice la sección y el pie de página de **Experiencia** en el panel de **Rendimiento** de DevTools para profundizar y depurar contra Core Web Vitals específicos.
+- Utilice **el Core Web Vitals Report de Search Console** para obtener un resumen del rendimiento de sus orígenes en el campo.
+- Utilice la **extensión Web Vitals** para realizar un seguimiento del rendimiento de una página con respecto a Core Web Vitals en tiempo real.
+
+Hablaremos más sobre nuestras herramientas Core Web Vitals en [web.dev Live](/live/) en junio. ¡Regístrese para recibir información sobre el evento!
+
+~ por Elizabeth y Addy, Conserjería de WebPerf
diff --git a/src/site/content/es/blog/webcodecs/index.md b/src/site/content/es/blog/webcodecs/index.md
new file mode 100644
index 00000000000..9d59033ca2e
--- /dev/null
+++ b/src/site/content/es/blog/webcodecs/index.md
@@ -0,0 +1,384 @@
+---
+title: Procesamiento de video con WebCodecs
+subhead: Manipulación de componentes de transmisión de video.
+description: Trabaja con componentes de una transmisión de video, como fotogramas y chunks de audio o video codificados sin mezclar.
+date: 2020-10-13
+updated: 2021-08-26
+hero: image/admin/I09h0la9qLPSRLZs1ruB.jpg
+alt: Un rollo de película.
+authors:
+  - djuffin
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/-7811493553674125311"
+tags:
+  - blog
+  - media
+feedback:
+  - api
+---
+
+Las tecnologías web modernas brindan amplias formas de trabajar con video. [API de Media Stream](https://developer.mozilla.org/docs/Web/API/MediaStream_Recording_API), [API de Media Recording](https://developer.mozilla.org/docs/Web/API/MediaStream_Recording_API), [API de Media Source](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API) y [API de WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) se suman a un rico conjunto de herramientas para grabar, transferir y reproducir secuencias de video. Mientras resuelven ciertas tareas de alto nivel, estas API no permiten que los programadores web trabajen con componentes individuales de una transmisión de video, como cuadros y chunks (fragmentos) de audio o video codificados sin ser multiplexados. Para obtener acceso de bajo nivel a estos componentes básicos, los desarrolladores han estado utilizando WebAssembly para incorporar [códecs de audio y video](https://en.wikipedia.org/wiki/Video_codec) al navegador. Pero dado que los navegadores modernos ya vienen con una variedad de códecs (que a menudo son acelerados por hardware), volver a empaquetarlos como WebAssembly parece una pérdida de recursos humanos e informáticos.
+
+La [API de WebCodecs](https://wicg.github.io/web-codecs/) elimina esta ineficiencia al brindarles a los programadores una forma de usar componentes multimedia que ya están presentes en el navegador. Específicamente:
+
+- Decodificadores de video y audio
+- Codificadores de video y audio
+- Fotogramas de video sin procesar
+- Decodificadores de imágenes
+
+La API de WebCodecs es útil para aplicaciones web que requieren un control total sobre la forma en que se procesa el contenido multimedia, como editores de video, videoconferencia, transmisión de video, etc.
+
+## Estado actual {: #status }
+
+<div></div>
+<table data-md-type="table">
+<thead data-md-table-header><tr data-md-type="table_row">
+<th data-md-type="table_cell">Paso</th>
+<th data-md-type="table_cell">Estado</th>
+</tr></thead>
+<tbody data-md-table-body>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">1. Crear un explicador</td>
+<td data-md-type="table_cell"><a href="https://github.com/WICG/web-codecs/blob/master/explainer.md" data-md-type="link">Completado</a></td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">2. Crear borrador inicial de especificación</td>
+<td data-md-type="table_cell"><a href="https://wicg.github.io/web-codecs/" data-md-type="link">Completado</a></td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">3. Recopilar comentarios e iterar el diseño</td>
+<td data-md-type="table_cell">Completado</td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">4. Prueba de origen</td>
+<td data-md-type="table_cell">Completo</td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">5. Lanzamiento</td>
+<td data-md-type="table_cell">Chrome 94</td>
+</tr>
+</tbody>
+</table>
+<div data-md-type="block_html"></div>
+
+## Flujo de trabajo de procesamiento de video
+
+Los fotogramas son la pieza central en el procesamiento de video. Por lo tanto, en WebCodecs, la mayoría de las clases consumen o producen fotogramas. Los codificadores de video convierten los fotogramas en chunks codificados. Los decodificadores de video hacen lo contrario.
+
+Además, `VideoFrame` es compatible con otras API web al ser [`CanvasImageSource`](https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource) y por tener un [constructor](https://www.w3.org/TR/webcodecs/#dom-videoframe-videoframe) que acepta a `CanvasImageSource`. Por lo tanto, se puede usar en funciones como [`drawImage()`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) y [`texImage2D()`](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/texImage2D). También se puede construir a partir de canvas, mapas de bits, elementos de video y otros fotogramas de video.
+
+La API de WebCodecs funciona bien en conjunto con las clases de la [API de Insertable Streams](https://w3c.github.io/mediacapture-transform/) que conectan WebCodecs con [pistas de transmisión multimedia](https://developer.mozilla.org/docs/Web/API/MediaStreamTrack).
+
+- `MediaStreamTrackProcessor` divide las pistas multimedia en fotogramas individuales.
+- `MediaStreamTrackGenerator` crea una pista de medios a partir de una secuencia de fotogramas.
+
+## WebCodecs y web workers
+
+Por diseño, la API de WebCodecs hace todo el trabajo pesado de forma asincrónica y fuera del hilo principal. Pero dado que las retrollamadas de fotogramas y chunks a menudo se pueden llamar varias veces por segundo, pueden saturar el hilo principal y, por lo tanto, hacer que el sitio web sea menos responsivo. Por lo tanto, es preferible trasladar el manejo de fotogramas individuales y chunks codificados a un web worker.
+
+Para ayudar a eso, [ReadableStream](https://developer.mozilla.org/docs/Web/API/ReadableStream) proporciona una forma conveniente de transferir automáticamente todos los fotogramas provenientes de una pista de medios al web worker. Por ejemplo, `MediaStreamTrackProcessor` se puede utilizar para obtener un `ReadableStream` para una pista de transmisión multimedia procedente de la cámara web. Después de eso, la transmisión se transfiere a un web worker donde los fotogramas se leen uno por uno y se meten a la cola de `VideoEncoder`.
+
+Con [`HTMLCanvasElement.transferControlToOffscreen`](https://developers.google.com/web/updates/2018/08/offscreen-canvas#unblock_main_thread) se pueden renderizar fuera del hilo principal. Pero si todas las herramientas de alto nivel resultan inconvenientes, `VideoFrame` es [transferible](https://developer.mozilla.org/docs/Web/API/Transferable) y se puede mover entre web workers.
+
+## WebCodecs en acción
+
+### Codificación
+
+<figure>{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/lEovMYp8oh1JSClCLCiD.png", alt="La ruta desde un Canvas o un ImageBitmap a la red o al almacenamiento", width="800", height="393" %}<figcaption> La ruta desde un <code>Canvas</code> o un <code>ImageBitmap</code> a la red o al almacenamiento</figcaption></figure>
+
+Todo comienza con un `VideoFrame`. Hay tres formas de construir fotogramas de video.
+
+- Desde una fuente de imagen como un canvas, un mapa de bits de imagen o un elemento de video.
+
+```js
+const cnv = document.createElement('canvas');
+// dibuja algo en el canvas
+…
+let frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });
+```
+
+- Utiliza `MediaStreamTrackProcessor` para extraer fotogramas de un [`MediaStreamTrack`](https://developer.mozilla.org/docs/Web/API/MediaStreamTrack)
+
+```js
+  const stream = await navigator.mediaDevices.getUserMedia({ … });
+  const track = stream.getTracks()[0];
+
+  const media_processor = new MediaStreamTrackProcessor(track);
+
+  const reader = media_processor.readable.getReader();
+  while (true) {
+      const result = await reader.read();
+      if (result.done)
+        break;
+      let frame_from_camera = result.value;
+  }
+```
+
+- Crea un fotograma a partir de su renderización de píxeles binarios en un [`BufferSource`](https://developer.mozilla.org/docs/Web/API/BufferSource)
+
+```js
+  const pixelSize = 4;
+  const init = {timestamp: 0, codedwidth: 320, codedHeight: 200, format: 'RGBA'};
+  let data = new Uint8Array(init.codedwidth * init.codedHeight * pixelSize);
+  for (let x = 0; x < init.codedwidth; x++) {
+    for (let y = 0; y < init.codedHeight; y++) {
+      let offset = (y * init.codedwidth + x) * pixelSize;
+      data[offset] = 0x7F;      // Red
+      data[offset + 1] = 0xFF;  // Green
+      data[offset + 2] = 0xD4;  // Blue
+      data[offset + 3] = 0x0FF; // Alpha
+    }
+  }
+  let frame = new VideoFrame(data, init);
+```
+
+No importa de dónde vengan, los fotogramas se pueden codificar en objetos de `EncodedVideoChunk` con un `VideoEncoder`.
+
+Antes de codificar, `VideoEncoder` necesita dos objetos JavaScript:
+
+- Diccionario de inicio con dos funciones para manejar chunks codificados y errores. Estas funciones están definidas por el desarrollador y no se pueden cambiar después de ser pasadas al constructor `VideoEncoder`.
+- Objeto de configuración del codificador, que contiene parámetros para la transmisión de video de salida. Puedes cambiar estos parámetros más tarde llamando a `configure()`.
+
+```js
+const init = {
+  output: handleChunk,
+  error: (e) => {
+    console.log(e.message);
+  }
+};
+
+let config = {
+  codec: 'vp8',
+  width: 640,
+  height: 480,
+  bitrate: 2_000_000, // 2 Mbps
+  framerate: 30,
+};
+
+let encoder = new VideoEncoder(init);
+encoder.configure(config);
+```
+
+Una vez que se hayas configurado el codificador, está listo para aceptar fotogramas mediante el método `encode()`. Tanto `configure()` como `encode()` regresan inmediatamente sin esperar a que se complete el trabajo. Esto permite que varios fotogramas entren a la cola para ser codificados al mismo tiempo, mientras que  `encodeQueueSize` muestra cuántas solicitudes están esperando en la cola para que finalicen las codificaciones anteriores. Los errores se informan lanzando inmediatamente una excepción, en caso de que los argumentos o el orden de las llamadas al método infrinjan el contrato de la API, o haciendo una  retrollamada de `error()` para los problemas encontrados en la implementación del códec. Si la codificación es completada correctamente, la retrollamada de `output() se llama con un nuevo pedazo codificado como argumento.` Otro detalle importante es que los fotogramas deben ser informados cuando ya no se necesitan llamando a `close()`.
+
+```js
+let frame_counter = 0;
+
+const track = stream.getVideoTracks()[0];
+const media_processor = new MediaStreamTrackProcessor(track);
+
+const reader = media_processor.readable.getReader();
+while (true) {
+    const result = await reader.read();
+    if (result.done)
+      break;
+
+    let frame = result.value;
+    if (encoder.encodeQueueSize > 2) {
+      // Too many frames in flight, encoder is overwhelmed
+      // let's drop this frame.
+      frame.close();
+    } else {
+      frame_counter++;
+      const insert_keyframe = (frame_counter % 150) == 0;
+      encoder.encode(frame, { keyFrame: insert_keyframe });
+      frame.close();
+    }
+}
+```
+
+Finalmente, es el momento de terminar de codificar el código escribiendo una función que maneje chunks de video codificado a medida que salen del codificador. Por lo general, esta función enviaría chunks de datos a través de la red o [multiplexarlos](https://en.wikipedia.org/wiki/Multiplexing#Video_processing) en un contenedor de medios para su almacenamiento.
+
+```js
+function handleChunk(chunk, metadata) {
+
+  if (metadata.decoderConfig) {
+    // El decodificador necesita ser configurado (o volver a ser configurado) con los nuevos parámetros
+    // cuando la metadata tiene un nuevo decoderConfig.
+    // Esto usualmente sucede en el principio o cuando el codificador tiene una nueva
+    // especificación binaria de configuración de codec. (VideoDecoderConfig.description).
+    fetch('/upload_extra_data',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/octet-stream' },
+      body: metadata.decoderConfig.description
+    });
+  }
+
+  // los bytes actuales de los datos codificados
+  let chunkData = new Uint8Array(chunk.byteLength);
+  chunk.copyTo(chunkData);
+
+  let timestamp = chunk.timestamp;        // tiempo de los medios en microsegundos
+  let is_key = chunk.type == 'key';       // también puede ser un "delta"
+  fetch(`/upload_chunk?timestamp=${timestamp}&type=${chunk.type}`,
+  {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/octet-stream' },
+    body: chunkData
+  });
+}
+```
+
+Si en algún momento necesitas asegurarte de que se hayan completado todas las solicitudes de codificación pendientes, puedes llamar a `flush()` y esperar su promesa.
+
+```js
+await encoder.flush();
+```
+
+### Decodificación
+
+<figure>{% Img src="image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/fzi3E4v2jJJj5QAlhoRG.png", alt="La ruta desde la red o el almacenamiento a un Canvas o ImageBitmap.", width="800", height="419" %}<figcaption> La ruta desde la red o el almacenamiento a un <code>Canvas</code> o un <code>ImageBitmap</code>.</figcaption></figure>
+
+La configuración de un `VideoDecoder` es similar a lo que se ha hecho para el `VideoEncoder`: se pasan dos funciones cuando se crea el decodificador y se pasan los parámetros del códec a `configure()`.
+
+El conjunto de parámetros del códec varía de un códec a otro. Por ejemplo, el códec H.264 puede necesitar un [binary blob (blob binario)](https://wicg.github.io/web-codecs/#dom-audiodecoderconfig-description) de avcC, a menos que esté codificado en el formato AnnexB (`encoderConfig.avc = { format: "annexb" }`).
+
+```js
+const init = {
+  output: handleFrame,
+  error: (e) => {
+    console.log(e.message);
+  }
+};
+
+const config = {
+  codec: 'vp8',
+  codedwidth: 640,
+  codedHeight: 480
+};
+
+let decoder = new VideoDecoder(init);
+decoder.configure(config);
+```
+
+Una vez que se inicializa el decodificador, puedes comenzar a alimentarlo con objetos `EncodedVideoChunk`. Para crear un chunk, necesitarás:
+
+- Un [`BufferSource`](https://developer.mozilla.org/docs/Web/API/BufferSource) de video codificados
+- La marca de tiempo de inicio del chunk en microsegundos (tiempo de medios del primer fotograma codificado en el chunk)
+- El tipo del chunk, cualquiera de los siguientes:
+    - `key` si el chunk se puede decodificar independientemente de los chunks anteriores
+    - `delta` si el chunk solo se puede decodificar después de que se hayan decodificado uno o más chunks anteriores
+
+Además, cualquier chunk emitido por el codificador está listo para el decodificador. Todas las cosas mencionadas anteriormente sobre la notificación de errores y la naturaleza asincrónica de los métodos del codificador son igualmente válidas para los decodificadores.
+
+```js
+let responses = await downloadVideoChunksFromServer(timestamp);
+for (let i = 0; i < responses.length; i++) {
+  let chunk = new EncodedVideoChunk({
+    timestamp: responses[i].timestamp,
+    type: (responses[i].key ? 'key' : 'delta'),
+    data: new Uint8Array ( responses[i].body )
+  });
+  decoder.decode(chunk);
+}
+await decoder.flush();
+```
+
+Ahora es el momento de mostrar cómo se puede mostrar un fotograma recién decodificado en la página. Es mejor asegurarse de que la retrollamada de salida del decodificador (`handleFrame()`) regrese rápidamente. En el siguiente ejemplo, solo agregas un fotograma a la cola de fotogramas listos para renderizar. El renderizado ocurre por separado y consta de dos pasos:
+
+1. Esperando el momento adecuado para mostrar el fotograma.
+2. Dibujando el fotograma en el canvas.
+
+Una vez que ya no se necesita un fotograma, llamas a `close()` para liberar la memoria subyacente antes de que el recolector de basura llegue a él, esto reducirá la cantidad promedio de memoria utilizada por la aplicación web.
+
+```js
+let cnv = document.getElementById('canvas_to_render');
+let ctx = cnv.getContext('2d');
+let ready_frames = [];
+let underflow = true;
+let time_base = 0;
+
+function handleFrame(frame) {
+  ready_frames.push(frame);
+  if (underflow)
+    setTimeout(render_frame, 0);
+}
+
+function delay(time_ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time_ms);
+  });
+}
+
+function calculateTimeTillNextFrame(timestamp) {
+  if (time_base == 0)
+    time_base = performance.now();
+  let media_time = performance.now() - time_base;
+  return Math.max(0, (timestamp / 1000) - media_time);
+}
+
+async function render_frame() {
+  if (ready_frames.length == 0) {
+    underflow = true;
+    return;
+  }
+  let frame = ready_frames.shift();
+  underflow = false;
+
+  // En base al tiempo del fotograma calculado en cuanto tiemp   // o real espera
+  // que se necesite para mostrar el siguiente fotograma.
+  let time_till_next_frame = calculateTimeTillNextFrame(frame.timestamp);
+  await delay(time_till_next_frame);
+  ctx.drawImage(frame, 0, 0);
+  frame.close();
+
+  // Inmediatamente agenda el renderizaje del próximo fotogram//a
+  setTimeout(render_frame, 0);
+}
+```
+
+## Demostración
+
+La siguiente demostración muestra cómo son los fotogramas de animación de un canvas:
+
+- Capturado a 25 fps en un `ReadableStream` por `MediaStreamTrackProcessor`
+- Transferido a un web worker
+- Codificado en formato de video H.264
+- Decodificado de nuevo en una secuencia de fotogramas de video
+- Y renderizado en el segundo canvas usando `transferControlToOffscreen()`
+
+{% Glitch 'new-webcodecs-blogpost-demo' %}
+
+### Otras demostraciones
+
+Consulta también nuestras otras demostraciones:
+
+- [Decodificando gifs con ImageDecoder](https://imagedecoder.glitch.me/)
+- [Capturar la entrada de la cámara en un archivo](https://w3c.github.io/webcodecs/samples/capture-to-file/capture-to-file.html)
+- [Reproducción de MP4](https://w3c.github.io/webcodecs/samples/mp4-decode/)
+- [Otros ejemplos](https://w3c.github.io/webcodecs/samples/)
+
+## Usando la API de WebCodecs {: #use }
+
+## Detección de características
+
+Para comprobar la compatibilidad con WebCodecs:
+
+```js
+if ('VideoEncoder' in window) {
+  // La API de WebCodecs es compatible.
+}
+```
+
+Ten en cuenta que la API de WebCodecs solo está disponible en [contextos seguros](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts), por lo que la detección fallará si [`self.isSecureContext`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext) es falso.
+
+## Retroalimentación {: #feedback }
+
+El equipo de Chrome desea saber sobre tu experiencia con la API de WebCodecs.
+
+### Cuéntanos sobre el diseño de la API
+
+¿Hay algo en la API que no funciona como lo esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Presenta un problema de especificación en el [repositorio de GitHub](https://github.com/WICG/web-codecs/issues) correspondiente o agrega tus sugerencias a un problema existente.
+
+### Reportar un problema con la implementación
+
+¿Encontraste un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación? Presenta un error en [new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EMedia%3EWebCodecs). Asegúrate de incluir todos los detalles que puedas y de agregar instrucciones simples para reproducir e ingresar `Blink>Media>WebCodecs` en el cuadro de **Componentes**. [Glitch](https://glitch.com/) funciona muy bien para compartir reproducciones rápidas y fáciles.
+
+### Muestra tu apoyo a la API
+
+¿Estás pensando en utilizar la API de WebCodecs? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.
+
+Envía un correo electrónico a [media-dev@chromium.org](mailto:media-dev@chromium.org) o envía un tweet a [@ChromiumDev] [cr-dev-twitter] usando el hashtag de [`#WebCodecs`](https://twitter.com/search?q=%23WebCodecs&src=typed_query&f=live) y déjanos saber dónde y cómo lo estás usando.
+
+[Imagen de héroe](https://unsplash.com/photos/8eQOBtgn9Qo) de [Denise Jans](https://unsplash.com/@dmjdenise) en [Unsplash](https://unsplash.com).
diff --git a/src/site/content/es/blog/webrtc-standard-announcement/index.md b/src/site/content/es/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..574fb247acd
--- /dev/null
+++ b/src/site/content/es/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,38 @@
+---
+title: WebRTC ahora es un estándar W3C e IETF
+subhead: |
+  Una breve descripción general de la historia, la arquitectura, los casos de uso y el futuro de WebRTC.
+description: |
+  Una breve descripción general de la historia, la arquitectura, los casos de uso y el futuro de WebRTC.
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+El proceso de definición de un estándar web es un proceso largo que garantiza la utilidad, la coherencia y la compatibilidad entre los navegadores. Hoy, [el W3C y el IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en) marcan la finalización de quizás uno de los estándares más importantes durante la pandemia: WebRTC.
+
+{% Aside %} Consulte el  codelab [comunicación en tiempo real con WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web) para obtener un tutorial práctico sobre la implementación de WebRTC. {% endAside %}
+
+## Historia {: #history }
+
+WebRTC es una plataforma que brinda a navegadores, aplicaciones móviles y aplicaciones de escritorio capacidad de comunicación en tiempo real, que normalmente se utiliza para videollamadas. La plataforma consta de un conjunto completo de tecnologías y estándares. Google inició la idea de crear WebRTC en 2009, como una alternativa a Adobe Flash y a las aplicaciones de escritorio que no se podían ejecutar en el navegador. La generación anterior de productos basados en navegador se construyó sobre tecnología patentada con licencia. Se crearon varios productos con esta tecnología, incluyendo Hangouts. Luego, Google adquirió las empresas de las que había estado licenciando la tecnología y la puso a disposición como el proyecto WebRTC de código abierto. Este código base está integrado en Chrome y es utilizado por la mayoría de las aplicaciones que utilizan WebRTC. Junto con otros proveedores de navegadores y líderes de la industria como Mozilla, Microsoft, Cisco y Ericsson, se inició la estandarización de WebRTC tanto en el W3C como en el IETF. En 2013, Mozilla y Google hicieron una [demostración](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html) de videollamadas entre sus navegadores. A través de la evolución del estándar, muchas discusiones sobre la arquitectura llevaron a diferencias de implementación entre los navegadores que desafiaron la compatibilidad y la interoperabilidad. La mayoría de estos desacuerdos finalmente se resolvieron cuando se finalizó el estándar en los últimos años. La especificación WebRTC ahora viene acompañada de un [conjunto completo de pruebas de plataforma](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned) y herramientas para abordar la compatibilidad, y los navegadores han adaptado en gran medida sus implementaciones en consecuencia. Esto pone fin a un período desafiante en el que los desarrolladores web tenían que adoptar continuamente sus servicios para diferentes implementaciones de navegadores y cambios de especificaciones.
+
+## Arquitectura y funcionalidad {: #architecture }
+
+La [API `RTCPeerConnection`](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection) es la parte central de la especificación WebRTC. `RTCPeerConnection` se ocupa de conectar dos aplicaciones en diferentes endpoints para comunicarse mediante un protocolo de igual a igual. La `PeerConnection` interactúa estrechamente con [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) para acceder a la cámara y al micrófono, y con [`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) para capturar el contenido de la pantalla. WebRTC le permite enviar y recibir transmisiones que incluyen contenido de audio o video, así como datos binarios arbitrarios a través del `DataChannel`. La funcionalidad de medios para procesar, codificar y decodificar audio y video proporciona el núcleo de cualquier implementación de WebRTC. WebRTC admite varios códecs de audio, siendo Opus el más utilizado y versátil. Se requieren implementaciones de WebRTC para admitir el códec de video VP8 de uso gratuito de Google y H.264 para procesar video. Las conexiones WebRTC siempre están encriptadas, lo que se logra a través de dos protocolos existentes: DTLS y SRTP. WebRTC se basa en gran medida en los estándares y tecnologías existentes, desde códecs de video (VP8, H264), recorrido de red (ICE), transporte (RTP, SCTP), hasta protocolos de descripción de medios (SDP). Esto está vinculado en más de 50 RFC.
+
+## Casos de uso: cuando es cuestión de milisegundos {: #use-cases }
+
+WebRTC se usa ampliamente en aplicaciones de prioridad temporal crítica, como cirugía remota, monitoreo de sistemas y control remoto de carros autónomos, y llamadas de voz o video creadas en UDP donde el almacenamiento en búfer no es posible. Casi todos los servicios de videollamadas basados en navegador de empresas como Google, Facebook, Cisco, RingCentral y Jitsi utilizan WebRTC. Google Stadia y NVIDIA GeForce NOW usan WebRTC para transmitir el juego desde la nube al navegador web sin demoras perceptibles.
+
+## La pandemia acentúa el rendimiento de las videollamadas {: #performance }
+
+Durante el año pasado, WebRTC ha visto un aumento de 100 veces en el uso de Chrome debido al aumento de las videollamadas desde el navegador. Reconociendo que las videollamadas se han convertido en una parte fundamental de la vida de muchas personas durante la pandemia, los proveedores de navegadores han comenzado a optimizar las tecnologías de las que dependen las videollamadas. Esto fue particularmente importante, ya que las reuniones grandes que demandaban recursos y los efectos de video en las reuniones de video se volvieron más comunes cuando los empleados y estudiantes comenzaron a trabajar y estudiar desde casa. En el último año, Chrome se ha vuelto hasta un 30% más eficiente en términos de batería para las videollamadas, con más optimizaciones por venir para escenarios de uso intensivo. Mozilla, Apple y Microsoft [han realizado mejoras significativas](https://www.youtube.com/watch?v=YZROn-WsyO4) en su implementación de WebRTC durante la pandemia, en particular para asegurarse de que se adhieran al estándar ahora formalizado.
+
+## El futuro de WebRTC {: #future }
+
+Si bien WebRTC ahora forma parte del estándar W3C, las mejoras continúan. El nuevo códec de video AV1, que [ahorra hasta un 50% del ancho de banda,](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/) está tornándose disponible para WebRTC y navegadores web. Se espera que las continuas mejoras en la base del código fuente abierto reduzcan aún más la demora y mejoren la calidad del video que se puede transmitir. [WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/) reúne la iniciativa de crear API complementarias para permitir nuevos casos de uso. Estas consisten en extensiones de las API existentes para brindar más control sobre la funcionalidad existente, como la [Codificación de video escalable](https://www.w3.org/TR/webrtc-svc/), así como las API que brindan acceso a [componentes de nivel inferior](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md). Este último ofrece más flexibilidad a los desarrolladores web para innovar mediante la integración de componentes WebAssembly personalizados de alto rendimiento. Con las redes 5G emergentes y la demanda de servicios más interactivos, esperamos ver un aumento continuo de la construcción de servicios baseados en WebRTC en el próximo año.
diff --git a/src/site/content/es/blog/when-to-use-local-https/index.md b/src/site/content/es/blog/when-to-use-local-https/index.md
new file mode 100644
index 00000000000..1773ca6dcc9
--- /dev/null
+++ b/src/site/content/es/blog/when-to-use-local-https/index.md
@@ -0,0 +1,94 @@
+---
+title: Cuándo usar HTTPS para el desarrollo local
+subhead: "Usar http://localhost para el desarrollo local funciona bien casi todo el tiempo, excepto en algunos casos especiales. Esta publicación explica cuándo necesita ejecutar su sitio de desarrollo local con HTTPS."
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/rIRKS6XfdH4ZU6N1y4zE.jpg
+tags:
+  - blog
+  - security
+---
+
+Consulte también: [Cómo utilizar HTTPS para el desarrollo local](/how-to-use-local-https).
+
+*En esta publicación, los enunciados sobre `localhost` son válidas para `127.0.0.1` y `[::1]`, ya que ambas describen la dirección de la computadora local, también llamada "dirección de bucle invertido". Además, para simplificar las cosas, no se especifica el número de puerto.** Entonces, cuando vea `http://localhost`, `http://localhost:{PORT}` o `http://127.0.0.1:{PORT}`.*
+
+## Resumen
+
+Cuando lleve a cabo desarrollo local, use `http://localhost` por defecto. Así, los Service Workers, la API de autenticación web y otros funcionarán. Sin embargo, en los siguientes casos, necesitará HTTPS para el desarrollo local:
+
+- Para configurar cookies seguras de forma coherente en todos los navegadores
+
+- Para depurar problemas de contenido mixto
+
+- Para usar HTTP/2 y posterior
+
+- Para usar bibliotecas o API de terceros que requieren HTTPS
+
+- Para usar un nombre de host personalizado
+
+    <figure>{% Img src="image/admin/ifswaep3VUkY7cjArbIc.png", alt="Una lista de casos en los que necesita usar HTTPS para el desarrollo local.", width="800", height="450" %}<figcaption> Cuándo usar HTTPS para el desarrollo local.</figcaption></figure>
+
+{% Aside %} Si necesita HTTPS para uno de los casos de uso anteriores, consulte [Cómo usar HTTPS para el desarrollo local](/how-to-use-local-https). {% endAside %}
+
+✨ Esto es todo lo que necesitas saber. Si estás interesado en obtener más detalles, ¡sigue leyendo!
+
+## Por qué su sitio de desarrollo debe comportarse de forma segura
+
+Para evitar problemas inesperados, es conveniente que su sitio de desarrollo local se comporte en la medida de lo posible como su sitio web de producción. Así, si su sitio web de producción utiliza HTTPS, debe optar porque su sitio de desarrollo local se comporte **como un sitio HTTPS**.
+
+{% Aside 'warning' %} Si su sitio web de producción no utiliza HTTPS, considérelo [una prioridad](/why-https-matters/). {% endAside %}
+
+## Utilice `http://localhost` de forma predeterminada
+
+Los navegadores tratan `http://localhost` de una manera especial: **aunque usa HTTP, en su mayor parte se comporta como un sitio HTTPS**.
+
+En `http://localhost`, los Service Workers, el Sensor API, el Authentication API, los Pagos y [otras características que requieren ciertas garantías de seguridad](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts) son compatibles y se comportan exactamente como en un sitio HTTPS.
+
+## Cuándo usar HTTPS para el desarrollo local
+
+Puede encontrar casos especiales en los que `http://localhost` *no se* comporte como un sitio HTTPS, o puede que simplemente desee utilizar un nombre de sitio personalizado que no sea `http://localhost`.
+
+Debe utilizar HTTPS para el desarrollo local en los siguientes casos:
+
+- Debe configurar [una cookie](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) localmente que sea `Segura`, o `SameSite:none`, o que tenga el prefijo `__Host`. Las cookies `seguras` se establecen solo en HTTPS, pero no en `http://localhost` para todos los navegadores. Y debido a que `SameSite:none` y `__Host` también requieren que la cookie sea `segura`, la configuración de dichas cookies en su sitio de desarrollo local también requiere HTTPS.
+
+    {% Aside 'gotchas' %} Cuando se trata de configurar cookies `seguras` localmente, no todos los navegadores se comportan de la misma manera. Por ejemplo, Chrome y Safari no configuran cookies `seguras` en localhost, pero Firefox sí. En Chrome, esto se considera un [error](https://bugs.chromium.org/p/chromium/issues/detail?id=1056543&q=localhost%20secure%20cookie&can=2). {% endAside %}
+
+- Debe depurar localmente un problema que ocurre solamente en un sitio web HTTPS pero no en un sitio HTTP, ni siquiera en `http://localhost`, como un problema de [contenido mixto.](https://developer.mozilla.org/docs/Web/Security/Mixed_content)
+
+- Debe probar o reproducir localmente un comportamiento específico de HTTP/2 o posterior. Por ejemplo, si necesita probar el rendimiento de carga en HTTP/2 o posterior. No se admite HTTP/2 inseguro o posterior, ni siquiera en `localhost`.
+
+- Debe probar localmente bibliotecas o API de terceros que requieren HTTPS (por ejemplo, OAuth).
+
+- No está utilizando `localhost`, sino un nombre de host personalizado para el desarrollo local, por ejemplo, `mysite.example`. Normalmente, esto significa que ha anulado su archivo de hosts local:
+
+    <figure>{% Img src="image/admin/i7dPGFARXLbg9oIAUol2.jpg", alt="Captura de pantalla de una terminal editando un archivo de hosts", width="740", height="318" %}<figcaption> Editar un archivo de hosts para agregar un nombre de host personalizado.</figcaption></figure>
+
+    En este caso, Chrome, Edge, Safari y Firefox *no* consideran que `mysite.example` sea seguro de forma predeterminada, aunque sea un sitio local. Por lo tanto, no se comportará como un sitio HTTPS.
+
+- ¡Otros casos! Esta no es una lista exhaustiva, pero si encuentra un caso que no está en esta lista, se dará cuenta: las cosas no funcionarán en `http://localhost` o este no se comportará como su sitio de producción. 🙃
+
+**En todos estos casos, debe utilizar HTTPS para el desarrollo local.**
+
+## Cómo utilizar HTTPS para el desarrollo local
+
+Si necesita usar HTTPS para el desarrollo local, diríjase a [Cómo usar HTTPS para el desarrollo local](/how-to-use-local-https).
+
+## Consejos si está utilizando un nombre de host personalizado
+
+**Si está utilizando un nombre de host personalizado, por ejemplo, editando su archivo de hosts:**
+
+- No use un nombre de host como `mysite` porque si hay un [dominio de nivel superior (TLD)](https://en.wikipedia.org/wiki/Top-level_domain) que tiene el mismo nombre (`mysite`), encontrará problemas. Y no es tan improbable: en 2020, hay más de 1.500 TLD y la lista está creciendo. `Cafés`, `museos`, `agencias de viaje` y muchos nombres de grandes empresas (¡tal vez hasta la empresa en la que trabaja!) son TLD. [Vea la lista completa aquí](https://data.iana.org/TLD/tlds-alpha-by-domain.txt).
+- Utilice únicamente dominios que sean suyos o que estén reservados para este fin. Si no tiene un dominio propio, puede usar `test` o `localhost` (`mysite.localhost`). `test` no tiene un tratamiento especial en los navegadores, pero `localhost` sí: Chrome y Edge admiten `http://<name>.localhost` de fábrica, y se comportará de forma segura cuando localhost lo haga. Pruébelo: ejecute cualquier sitio en localhost y acceda a `http://<cualquier nombre que desees>.localhost:<your port>` en Chrome o Edge. Esto también puede ser posible en breve en Firefox y [Safari](https://bugs.webkit.org/show_bug.cgi?id=160504). La razón por la que puede hacer esto (tener subdominios como `mysite.localhost` ) es porque `localhost` no es solo un nombre de host: también es un TLD completo, como `com`.
+
+## Más información
+
+- [Contextos seguros](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)
+- [localhost como contexto seguro](https://www.w3.org/TR/secure-contexts/#localhost)
+- [localhost como contexto seguro en Chrome](https://www.chromestatus.com/feature/6269417340010496)
+
+*Muchas gracias por las contribuciones y comentarios a todos los revisores, especialmente a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood y Jake Archibald. 🙌*
+
+*Imagen principal de [@moses_lee](https://unsplash.com/@moses_lee) en [Unsplash](https://unsplash.com/photos/Q2Xy_hYzrgg), editada.*
diff --git a/src/site/content/es/blog/why-coop-coep/index.md b/src/site/content/es/blog/why-coop-coep/index.md
new file mode 100644
index 00000000000..7f2ccff4aec
--- /dev/null
+++ b/src/site/content/es/blog/why-coop-coep/index.md
@@ -0,0 +1,159 @@
+---
+title: Por qué necesita un "origen cruzado aislado" para funciones potentes
+subhead: |
+  Descubra por qué es necesario el aislamiento de origen cruzado para utilizar funciones potentes como
+  `SharedArrayBuffer`,` performance.measureUserAgentSpecificMemory () `y temporizador de alta resolución con mejor precisión.
+description: |
+  Algunas API web aumentan el riesgo de ataques de canal lateral como Spectre. Parta mitigar ese riesgo, los navegadores ofrecen un entorno aislado basado opcional llamado aislamiento de origen cruzado. Descubra por qué es necesario utilizar el aislamiento de origen cruzado para funciones potentes como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory() `
+  y temporizador de alta resolución con mayor precisión.
+authors:
+  - agektmr
+  - domenic
+hero: image/admin/h8g1TQjkfkJSpWJrPakB.jpg
+date: 2020-05-04
+updated: 2021-08-05
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## Introducción
+
+En [Cómo hacer que su sitio web tenga "aislamiento de origen cruzado" usando COOP y COEP](/coop-coep/), explicamos cómo adoptar el estado "aislamiento de origen cruzado" usando COOP y COEP. Este es un artículo complementario que explica por qué se requiere el aislamiento de origen cruzado para habilitar funciones potentes en el navegador.
+
+{% Aside 'key-term' %} Este artículo utiliza muchas terminologías que suenan similares. Para aclarar las cosas, definámoslas:
+
+- [COEP: Política de incrustación de origen cruzado](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP: Política de apertura de origen cruzado](https://github.com/whatwg/html/pull/5334/files)
+- [CORP: Política de recursos de origen cruzado](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS: Uso compartido de recursos de origen cruzado](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB: Bloqueo de lectura de origen cruzado](https://www.chromium.org/Home/chromium-security/corb-for-developers) {% endAside %}
+
+## Antecedentes
+
+La web se basa en la [política del mismo origen](/same-origin-policy/): una característica de seguridad que restringe la forma en que los documentos y los scripts pueden interactuar con recursos de otro origen. Este principio restringe las formas en que los sitios web pueden acceder a recursos de origen cruzado. Por ejemplo, un documento de `https://a.example` no puede acceder a los datos alojados en `https://b.example`.
+
+Sin embargo, la política del mismo origen ha tenido algunas excepciones históricas. Cualquier sitio web puede:
+
+- Incrustar iframes de origen cruzado
+- Incluir recursos de origen cruzado, como imágenes o scripts
+- Abrir ventanas emergentes de origen cruzado con una referencia DOM
+
+Si la web pudiera diseñarse desde cero, estas excepciones no existirían. Desafortunadamente, cuando la comunidad web se dio cuenta de los beneficios clave de una política estricta del mismo origen, la web ya estaba basada en estas excepciones.
+
+Los efectos secundarios de seguridad de una política tan laxa del mismo origen se corrigieron de dos maneras. Una fue mediante la introducción de un nuevo protocolo llamado [Cross Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) cuyo propósito es asegurarse de que el servidor permitía compartir un recurso con un origen determinado. La otra es eliminando implícitamente el acceso directo del script a los recursos de origen cruzado mientras se conserva la compatibilidad con versiones anteriores. Estos recursos de origen cruzado se denominan recursos "opacos". Por ejemplo, esta es la razón por la que la manipulación de píxeles de una imagen de origen cruzado a través de `CanvasRenderingContext2D` falla a menos que se aplique CORS a la imagen.
+
+Todas estas decisiones sobre políticas están sucediendo dentro de un grupo de contexto de navegación.
+
+{% Img src="image/admin/z1Gr4mmJMo383dR9FQUk.png", alt="Grupo de contexto de exploración", width="800", height="469" %}
+
+Durante mucho tiempo, la combinación de CORS y recursos opacos fue suficiente para hacer que los navegadores fueran seguros. A veces, se descubrieron casos extremos (como las [vulnerabilidades JSON](https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/)) y se necesitaron parches, pero en general, el principio de no permitir el acceso de lectura directo a los bytes sin procesar de los recursos de origen cruzado fue exitoso.
+
+Todo esto cambió con [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)), que hace que cualquier dato que se cargue en el mismo grupo de contexto de navegación que su código sea potencialmente legible. Al medir el tiempo que toman ciertas operaciones, los atacantes pueden adivinar el contenido de los cachés de la CPU y, a través de eso, el contenido de la memoria del proceso. Dichos ataques de tiempo son posibles con temporizadores de baja granularidad que existen en la plataforma, pero pueden acelerarse con temporizadores de alta granularidad, tanto explícitos (como `performance.now()` ) como implícitos (como `SharedArrayBuffer`s). Si `evil.com` incrusta una imagen de origen cruzado, pueden usar un ataque Spectre para leer sus datos de píxeles, lo que hace que las protecciones que se basan en la "opacidad" sean ineficaces.
+
+{% Img src="image/admin/wN636enwMtBrrOfhzEoq.png", alt="Spectr", width="800", height="500" %}
+
+Idealmente, todas las solicitudes de origen cruzado deben ser examinadas explícitamente por el servidor propietario del recurso. Si el servidor propietario de los recursos no da la verificación, los datos nunca llegarán al grupo de contexto de navegación de un actor maligno y, por lo tanto, permanecerán fuera del alcance de cualquier ataque Spectre que pueda llevar a cabo una página web. Lo llamamos estado de aislamiento de origen cruzado. De eso se trata exactamente COOP + COEP.
+
+En un estado aislado de origen cruzado, el sitio solicitante se considera menos peligroso y esto desbloquea características poderosas como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` y [temporizadores de alta resolución](https://www.w3.org/TR/hr-time/) con mayor precisión que de otro modo podrían usarse para ataques tipo Spectre. También evita la modificación de `document.domain`.
+
+### Política de incrustación de origen cruzado {: #coep }
+
+La [política de incrustación de origen cruzado(COEP)](https://wicg.github.io/cross-origin-embedder-policy/) evita que un documento cargue recursos de origen cruzado que no otorguen explícitamente el permiso del documento (mediante CORP o CORS). Con esta función, puede declarar que un documento no puede cargar dichos recursos.
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="How COEP works", width="800", height="410" %}
+
+Para activar esta política, agregue el siguiente encabezado HTTP al documento:
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+La palabra clave `require-corp` es el único valor aceptado para COEP. Esto aplica la política de que el documento solo puede cargar recursos del mismo origen o recursos marcados explícitamente como cargables desde otro origen.
+
+Para que los recursos se puedan cargar desde otro origen, deben admitir el uso compartido de recursos de origen cruzado (CORS) o la Política de recursos de origen cruzado (CORP).
+
+### Uso compartido de recursos de origen cruzado {: #cors}
+
+Si un recurso de origen cruzado admite el [Uso compartido de recursos de origen cruzado (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), puede usar el [atributo `crossorigin`](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin) para cargarlo en su página web sin que el COEP lo bloquee.
+
+```html
+<img src="https://third-party.example.com/image.jpg" crossorigin>
+```
+
+Por ejemplo, si este recurso de imagen se entrega con encabezados CORS, use el atributo `crossorigin` para que la solicitud para obtener el recurso use el [modo CORS](https://developer.mozilla.org/docs/Web/API/Request/mode). Esto también evita que se cargue la imagen a menos que establezca encabezados CORS.
+
+De manera similar, puede obtener datos de origen cruzado a través del método `fetch()`, que no requiere un manejo especial siempre que el servidor responda con [los encabezados HTTP correctos](https://developer.mozilla.org/docs/Web/HTTP/CORS#The_HTTP_response_headers).
+
+### Política de recursos de origen cruzado {: #corp }
+
+La [Política de recursos de origen cruzado(CORP)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)) se introdujo originalmente como una opción para proteger sus recursos de ser cargados por otro origen. En el contexto de COEP, CORP puede especificar la política del propietario del recurso sobre quién puede cargar un recurso.
+
+El encabezado `Cross-Origin-Resource-Policy` toma tres valores posibles:
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+Los recursos que están marcados como `same-site` solo se pueden cargar desde el mismo sitio.
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+Los recursos que están marcados con el `same-origin` solo se pueden cargar desde el mismo origen.
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+Cualquier sitio web puede cargar los recursos marcados como `cross-origin`. ([Este valor](https://mikewest.github.io/corpp/#integration-fetch) se agregó a la especificación CORP junto con COEP).
+
+{% Aside %} Una vez que agregue el encabezado COEP, no podrá omitir la restricción mediante el uso de trabajadores de servicio. Si el documento está protegido por un encabezado COEP, la política se respeta antes de que la respuesta ingrese al proceso del documento, o antes de que ingrese al trabajador de servicio que está controlando el documento. {% endAside %}
+
+### Política de apertura de origen cruzado {: #coop }
+
+La [Política de apertura de origen cruzado (COOP)](https://github.com/whatwg/html/pull/5334/files) le permite asegurarse de que una ventana de nivel superior esté aislada de otros documentos colocándolos en un grupo de contexto de exploración diferente, de modo que no puedan interactuar directamente con la ventana de nivel superior. Por ejemplo, si un documento con COOP abre una ventana emergente, su propiedad `window.opener` sería `null`. Además, la propiedad `.closed` de la referencia del aperturador a él devolverá `true`.
+
+{% Img src="image/admin/eUu74n3GIlK1fj9ACxF8.png", alt="COOP", width="800", height="452" %}
+
+El encabezadoi `Cross-Origin-Opener-Policy` toma tres valores posibles:
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+Los documentos que están marcados como del `same-origin` pueden compartir el mismo grupo de contexto de exploración con documentos del mismo origen que también están explícitamente marcados como del `same-origin`.
+
+{% Img src="image/admin/he8FaRE2ef67lamrFG60.png", alt="COOP", width="800", height="507" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+Un documento de nivel superior con `same-origin-allow-popups` conserva referencias a cualquiera de sus ventanas emergentes que no establecen COOP o que optan por salir del aislamiento al establecer un COOP de `unsafe-none`.
+
+{% Img src="image/admin/AJdm6vFq4fQXUWOTFeFa.png", alt="COOP", width="800", height="537" %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+`unsafe-none` es el valor predeterminado y permite que el documento se agregue al grupo de contexto de exploración de su aperturador, a menos que éste tenga un COOP del `same-origin`.
+
+{% Aside %} El atributo [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#Window_features) tiene un efecto similar al que se esperaría de COOP excepto que funciona solo desde el lado del aperturador. (No puede disociar su ventana cuando la abre un tercero.) Cuando adjunta `noopener` haciendo algo como `window.open(url, '_blank', 'noopener')` o `<a target="_blank" rel="noopener">`, puede desvincular deliberadamente su ventana de la ventana abierta.
+
+Si bien `noopener` puede ser reemplazado por COOP, sigue siendo útil cuando desea proteger su sitio web en navegadores que no son compatibles con COOP. {% endAside %}
+
+## Resumen {: #summary }
+
+Si desea acceso garantizado a funciones potentes como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` o [temporizadores de alta resolución](https://www.w3.org/TR/hr-time/) con mayor precisión, recuerde que su documento debe usar tanto COEP con el valor de `require-corp` como COOP con el valor de `same-origin`. En ausencia de cualquiera de ellos, el navegador no garantizará el aislamiento suficiente para habilitar de forma segura esas potentes funciones. Puede determinar la situación de su página comprobando si [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated) devuelve `true`.
+
+Conozca los pasos para implementar esto en [Cómo hacer que su sitio web sea "aislado de origen cruzado" usando COOP y COEP](/coop-coep/).
+
+## Recursos
+
+- [COOP y COEP explicados](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)
+- [Cambios planificados a la memoria compartida - JavaScript | MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes)
diff --git a/src/site/content/es/blog/wix/index.md b/src/site/content/es/blog/wix/index.md
new file mode 100644
index 00000000000..66396eb2a3b
--- /dev/null
+++ b/src/site/content/es/blog/wix/index.md
@@ -0,0 +1,200 @@
+---
+layout: post
+title: Cómo Wix mejoró el rendimiento de su sitio web mediante la evolución de su infraestructura
+subhead: |2-
+
+  Un caso de estudio de algunos cambios importantes introducidos en Wix para mejorar el rendimiento de la carga del sitio web para millones de sitios, despejando el camino para que reciban buenos PageSpeed Insights y puntuaciones de Core Web Vitals.
+authors:
+  - alonko
+description: Un caso de estudio de algunos cambios importantes introducidos en Wix para mejorar el rendimiento de la carga del sitio web para millones de sitios, despejando el camino para que reciban buenos PageSpeed Insights y puntuaciones de Core Web Vitals.
+date: 2021-03-10
+updated: 2022-07-18
+hero: image/BrQidfK9jaQyIHwdw91aVpkPiib2/HNGPDotyTYOuPE0YxLQ9.jpg
+alt: 'Un tren rápido (fuente: https://unsplash.com/photos/60VrGk-bfeA)'
+tags:
+  - blog
+  - performance
+  - web-vitals
+  - case-study
+---
+
+{% Aside %} Alon lidera el equipo central de backend en [Wix](https://www.wix.com). {% endAside %}
+
+Gracias al aprovechamiento de los estándares de la industria, los proveedores de nube y las capacidades de CDN, combinado con una reescritura importante del tiempo de ejecución de nuestro sitio web, el porcentaje de sitios Wix que alcanzaron buenas puntuaciones del percentil 75 en todas las métricas de Core Web Vitals (CWV) se **triplicó** año tras año, según a los datos de [CrUX](https://developer.chrome.com/docs/crux/) y [HTTPArchive](https://httparchive.org/faq#how-do-i-use-bigquery-to-write-custom-queries-over-the-data).
+
+Wix adoptó una cultura orientada al rendimiento y se seguirán implementando nuevas mejoras para los usuarios. A medida que nos centramos en los KPI de rendimiento, esperamos ver crecer el número de sitios que superan los umbrales de CWV.
+
+## Descripción general
+
+El mundo del desempeño es [maravillosamente complejo](https://youtu.be/ctavZT87syI), con muchas variables y cosas muy rebuscadas. Las investigaciones muestran que la [velocidad del sitio tiene un impacto directo en las tasas de conversión y los ingresos](/milliseconds-make-millions) de las empresas. En los últimos años, la industria ha puesto más énfasis en la visibilidad del rendimiento y en [hacer que la web sea más rápida](/fast). A partir de mayo de 2021, las [señales de experiencia de la página](https://developers.google.com/search/blog/2020/11/timing-for-page-experience) se incluirán en el ranking de búsqueda de Google.
+
+El desafío único en Wix es dar su apoyo a **millones** de sitios, algunos de los cuales se crearon hace *muchos años* y no se han actualizado desde entonces. Contamos con varias [herramientas y artículos](https://support.wix.com/en/performance-and-technical-issues/site-performance) para ayudar a nuestros usuarios sobre lo que pueden hacer para analizar y mejorar el rendimiento de sus sitios.
+
+Wix es un entorno gestionado y no todo está en manos del usuario. Compartir infraestructuras comunes presenta muchos desafíos para todos estos sitios, pero también abre oportunidades para mejoras importantes en todos los ámbitos, es decir, aprovechar las economías de escala.
+
+{% Aside%} *En esta publicación, me centraré en las mejoras realizadas en torno al servicio del HTML inicial, que inicia el proceso de carga de la página.* {% endAside %}
+
+### Hablar en un idioma común
+
+Una de las principales dificultades del desempeño es encontrar una terminología común para discutir diferentes aspectos de la experiencia del usuario, considerando tanto el desempeño técnico como el percibido. El uso de un lenguaje común bien definido dentro de la organización nos permitió discutir y categorizar fácilmente las diferentes partes técnicas y sus intercambios, clarificó nuestros informes de desempeño y ayudó enormemente a comprender en qué aspectos deberíamos enfocarnos en mejorar primero.
+
+Ajustamos todo nuestro monitoreo y discusiones internas para incluir métricas estándar de la industria como [Web Vitals](/vitals/), que incluyen:
+
+<figure>{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/PLF62sx8lHkpKbnvYKKR.jpg", alt="Un diagrama de 2020 Core Web Vitals: LCP, FID y CLS.", width="800", height="215" %} <figcaption>Core Web Vitals</figcaption></figure>
+
+### Puntajes de rendimiento y complejidad del sitio
+
+Es bastante fácil crear un sitio que se cargue instantáneamente siempre que lo [hagas muy simple](https://justinjackson.ca/words.html) usando solo HTML y lo sirvas a través de un CDN.
+
+<figure data-float="left">{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/xMUN9CUVvgnHofImPcV5.jpg", alt="Ejemplo de PageSpeed Insights", width="800", height="647" %}</figure>
+
+Sin embargo, la realidad es que los sitios son cada vez más complejos y sofisticados, funcionan más como aplicaciones que como documentos y soportan funcionalidades como blogs, soluciones de comercio electrónico, código personalizado, etc.
+
+Wix ofrece una gran [variedad de plantillas](https://www.wix.com/website/templates), lo que permite a sus usuarios crear fácilmente un sitio con muchas capacidades comerciales. Esas características adicionales a menudo incluyen *algunos* costos de rendimiento.
+
+## El viaje
+
+### Al principio, existía HTML
+
+Cada vez que se carga una página web, siempre comienza con una solicitud inicial a una URL para recuperar el documento HTML. Esta respuesta HTML activa todas las solicitudes de clientes adicionales y la lógica del navegador para ejecutar y renderizar tu sitio. Esta es la parte más importante de la carga de la página, porque no sucede nada hasta que llega el comienzo de la respuesta (conocido como Time to First Byte (TTFB): Tiempo para el primer byte).
+
+<figure>{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/b1KKSlUQQTuNCDj4ndyJ.jpg", alt="Primera vista de WebPageTest", width="800", height="411" %}<figcaption> Primera vista de WebPageTest</figcaption></figure>
+
+#### El pasado: renderización del lado del cliente (CSR)
+
+Cuando se opera sistemas a gran escala, siempre hay compensaciones que debes considerar, como el rendimiento, la confiabilidad y los costos. Hasta hace unos años, Wix utilizaba la renderización del lado del cliente (CSR), en la que el contenido HTML real se generaba a través de JavaScript en el lado del cliente (es decir, en el navegador), lo que nos permite admitir una gran escala de sitios sin tener costos operativos de un backend enorme.
+
+CSR nos permitió usar un documento HTML común, que estaba esencialmente vacío. Todo lo que hizo fue activar la descarga del código y los datos requeridos que luego se utilizaron para generar el HTML completo en el dispositivo cliente.
+
+#### Hoy: renderizado del lado del servidor (SSR)
+
+Hace unos años hicimos la transición a la renderización del lado del servidor (SSR), ya que fue beneficioso tanto para el SEO como para el rendimiento, mejorando los tiempos de visibilidad inicial de la página y asegurando una mejor indexación para los motores de búsqueda que no tienen soporte completo para ejecutar JavaScript.
+
+Este enfoque mejoró la experiencia de visibilidad, especialmente en dispositivos y conexiones más lentos, y abrió la puerta a más optimizaciones de rendimiento. Sin embargo, también significó que para cada solicitud de página web, se generó una respuesta HTML única sobre la marcha, lo que está **lejos** de ser óptima, especialmente para sitios con una gran cantidad de visitas.
+
+### Introducción al almacenamiento en caché en varias ubicaciones
+
+El HTML de cada sitio era en su mayoría estático, pero tenía algunas advertencias:
+
+1. Con frecuencia cambia. Por ejemplo, cada vez que un usuario edita su sitio o realiza cambios en los datos del sitio, como en el inventario de la tienda del sitio web.
+2. Tenía ciertos datos y cookies que eran **específicos del visitante**, lo que significa que dos personas que visitan el mismo sitio verían el HTML algo diferente. Por ejemplo, para respaldar las características de los productos, como recordar qué elementos colocó un visitante en el carrito, o el chat que el visitante inició con el negocio antes, y más.
+3. No todas las páginas se pueden almacenar en caché. Por ejemplo, una página con un código de usuario personalizado, que muestra la hora actual como parte del documento, no es elegible para el almacenamiento en caché.
+
+Inicialmente, tomamos el enfoque relativamente seguro de almacenar en caché el HTML <span style="text-decoration:underline;">sin</span> datos de visitantes y luego solo modificamos partes específicas de la respuesta HTML sobre la marcha para cada visitante, para cada visita de caché.
+
+#### Solución CDN interna
+
+Hicimos esto mediante la implementación de una solución interna: utilizando [Varnish HTTP Cache](https://varnish-cache.org/) para proxy y almacenamiento en caché, Kafka para mensajes de invalidación y un servicio basado en Scala/Netty que procesa estas respuestas HTML, pero muta el HTML y agrega datos específicos del visitante y cookies a la respuesta en caché.
+
+Esta solución nos permitió implementar estos **componentes delgados** en muchas más ubicaciones geográficas y múltiples regiones de proveedores de nube, que se encuentran repartidas por todo el mundo. En 2019, presentamos **más de 15 regiones nuevas** y, gradualmente, habilitamos el almacenamiento en caché para más del 90% de nuestras páginas vistas que eran elegibles para el almacenamiento en caché. El servicio de sitios desde ubicaciones adicionales redujo la [latencia de la red](https://www.cloudping.co/grid) entre los clientes y los servidores que sirven la respuesta HTML, al acercar el contenido a los visitantes del sitio web.
+
+También comenzamos a almacenar en caché ciertas respuestas de API de solo lectura utilizando la misma solución e invalidando la caché en cualquier cambio en el contenido del sitio. Por ejemplo, la lista de publicaciones de blog en el sitio se almacena en caché y se invalida cuando se publica y/o modifica una publicación.
+
+#### Reducir las complejidades
+
+La implementación del almacenamiento en caché mejoró sustancialmente el rendimiento, principalmente en las [fases TTFB](/ttfb/) y [First Contentful Paint (FCP): Despliegue del primer contenido](/fcp/) y mejoró nuestra confiabilidad al ofrecer el contenido desde una ubicación más cercana al usuario final.
+
+Sin embargo, la necesidad de modificar el HTML para cada respuesta introdujo una complejidad innecesaria que, si se eliminaba, presentaba una oportunidad para mejorar el rendimiento.
+
+### Almacenamiento en caché del navegador (y preparativos para CDN)
+
+<div>
+  <div class="stats">
+    <div class="stats__item">
+     <p class="stats__figure">~ 13 <sub>%</sub></p>
+     <p>Las solicitudes HTML se sirven directamente desde la memoria caché del navegador, lo que ahorra mucho ancho de banda y reduce los tiempos de carga para las vistas repetidas.</p>
+    </div>
+  </div>
+</div>
+
+El siguiente paso fue eliminar por <span style="text-decoration:underline;">completo estos</span> datos específicos del visitante del HTML y recuperarlos de un punto final separado, llamado por el cliente para este propósito, después de que haya llegado el HTML.
+
+Migramos cuidadosamente estos datos y cookies a un nuevo punto final, que se llama en cada carga de página, pero devuelve un JSON delgado, que se requiere solo para el [proceso de hidratación](https://reactjs.org/docs/react-dom.html#hydrate), para alcanzar la interactividad completa de la página.
+
+Esto nos permitió habilitar el almacenamiento en caché del HTML del navegador, lo que significa que los navegadores ahora guardan la respuesta HTML para visitas repetidas y solo llaman al servidor para validar que el contenido no haya cambiado. Esto se hace usando [HTTP ETag](https://en.wikipedia.org/wiki/HTTP_ETag), que es básicamente un identificador asignado a una versión específica de un recurso HTML. Si el contenido sigue siendo el mismo, nuestros servidores envían una respuesta [304 Not Modified](https://developer.mozilla.org/docs/Web/HTTP/Status/304) al cliente, sin un cuerpo.
+
+<figure>{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/hr1xnQccJEkHTBGxS5wF.jpg", alt="ALT_TEXT_HERE", width="800", height="410" %} <figcaption> Vista de repetición de WebPageTest</figcaption></figure>
+
+Además, este cambio significa que nuestro HTML ya no es específico del visitante y no contiene cookies. En otras palabras, básicamente se puede almacenar en caché en cualquier lugar, lo que abre la puerta al uso de proveedores de CDN que tienen una presencia geográfica mucho mejor en cientos de ubicaciones en todo el mundo.
+
+### DNS, SSL y HTTP/2
+
+Con el almacenamiento en caché habilitado, los tiempos de espera se redujeron y otras partes importantes de la conexión inicial se volvieron más sustanciales. Mejorar nuestra infraestructura de red y monitoreo nos permitió mejorar nuestros tiempos de DNS, conexión y SSL.
+
+<figure data-float="right">{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/Uuvh9xTItQ8wMA9s13RP.jpg", alt="Un gráfico de tiempo de respuesta", width="800", height="441" %}</figure>
+
+[HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) se habilitó para todos los dominios de usuario, lo que redujo tanto la cantidad de conexiones necesarias como la sobrecarga que conlleva cada nueva conexión. Este fue un cambio relativamente fácil de implementar, mientras se aprovechaban los beneficios de [rendimiento y resistencia](https://developers.google.com/web/fundamentals/performance/http2) que vienen con HTTP/2.
+
+### Compresión Brotli (contra gzip)
+
+<div>
+  <div class="stats">
+    <div class="stats__item">
+     <p class="stats__figure">21 - 25 <sub>%</sub></p>
+     <p>Reducción del tamaño de la mediana de transferencia de archivos</p>
+    </div>
+  </div>
+</div>
+
+Tradicionalmente, todos nuestros archivos se comprimían mediante la compresión [gzip](https://en.wikipedia.org/wiki/Gzip), que es la opción de compresión HTML más común en la web. ¡Este protocolo de compresión se implementó inicialmente hace casi 30 años!
+
+<figure data-float="right">{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/h7KzeAfg2THMdDGMYvlR.jpg", alt="Compresión Brotli", width="800", height="805" %}<figcaption> <a href="https://tools.paulcalvano.com/compression.php">Estimador de nivel de compresión Brotli</a></figcaption></figure>
+
+La más reciente [compresión Brotli](https://en.wikipedia.org/wiki/Brotli) introduce mejoras de compresión casi sin concesiones y poco a poco se está volviendo más popular, como se describe en el anual [Compression chapter](https://almanac.httparchive.org/en/2020/compression#what-type-of-content-should-we-compress) de Web Almanac. Ha sido compatible con [todos los principales navegadores](https://caniuse.com/brotli) durante un tiempo.
+
+Habilitamos el soporte de Brotli en nuestros proxies nginx en los bordes, para todos los clientes que sean compatibles.
+
+Al pasar a utilizar la compresión Brotli, redujo nuestro tamaño mediano de transferencia de archivos entre un **21% y un 25%**, lo que resultó en un uso reducido del ancho de banda y tiempos de carga mejorados.
+
+<figure>{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/392RWYamrwkdFozk91LC.jpg", alt="Tamaños de respuesta de la mediana para dispositivos móviles y computadoras de escritorio", width="800", height="173" %}<figcaption> Tamaños de respuesta de la mediana</figcaption></figure>
+
+## Redes de entrega de contenido (CDN)
+
+### Selección de CDN dinámica
+
+En Wix, siempre hemos utilizado [CDN](/content-delivery-networks/) para servir todo el código JavaScript y las imágenes en los sitios web de los usuarios.
+
+Recientemente, nos integramos con una solución de nuestro proveedor de DNS, para seleccionar automáticamente la CDN con mejor desempeño según la red y el origen del cliente. Esto nos permite servir los archivos estáticos desde la mejor ubicación para cada visitante y evitar problemas de disponibilidad en una determinada CDN.
+
+### Próximamente… dominios de usuario servidos por CDN
+
+La última pieza del rompecabezas servira la última y parte más crítica a través de un CDN: el HTML del dominio del usuario.
+
+Como se describió anteriormente, creamos nuestra propia solución interna para almacenar en caché y entregar los resultados de API y HTML específicos del sitio. Mantener esta solución en tantas regiones nuevas también tiene sus costos operativos y agregar nuevas ubicaciones se convierte en un proceso que debemos administrar y optimizar continuamente.
+
+Actualmente nos estamos integrando con varios proveedores de CDN para respaldar el servicio de todo el sitio de Wix directamente desde las ubicaciones de CDN para mejorar la distribución de nuestros servidores en todo el mundo y así mejorar aún más los tiempos de respuesta. Este es un desafío debido a la gran cantidad de dominios que atendemos, que requieren terminación SSL en el borde.
+
+La integración con CDN acerca los sitios web de Wix al cliente más que nunca y viene con más mejoras en la experiencia de carga, incluidas tecnologías más nuevas como HTTP/3 sin un esfuerzo adicional de nuestra parte.
+
+<hr>
+
+### Algunas palabras sobre el monitoreo del desempeño
+
+Si ejecutas un sitio Wix, probablemente te estés preguntando cómo esto se traduce en los resultados de rendimiento de tu sitio Wix y cómo lo comparamos con otras plataformas de sitios web.
+
+La mayor parte del trabajo realizado anteriormente se implementó el año pasado y cierta parte aún se está implementando.
+
+El Web Almanac de HTTPArchive publicó recientemente la [edición 2020](https://almanac.httparchive.org/en/2020) que incluye un excelente capítulo sobre la [experiencia del usuario de CMS](https://almanac.httparchive.org/en/2020/cms). Ten en cuenta que muchos de los números descritos en este artículo son a mediados del 2020.
+
+Esperamos ver el informe actualizado en 2021 y estamos monitoreando activamente los informes de [CrUX](https://developer.chrome.com/docs/crux/) para nuestros sitios, así como nuestras métricas de rendimiento internas.
+
+Estamos comprometidos a mejorar continuamente los tiempos de carga y proporcionar a nuestros usuarios una plataforma en la que puedan crear sitios como ellos lo imaginen, sin comprometer el rendimiento.
+
+<figure>{% Img src="image/BrQidfK9jaQyIHwdw91aVpkPiib2/AADz7d1yVOWZlq0iSb6P.jpg", alt="La LCP, Speed Index y FCP para un sitio móvil a lo largo del tiempo", width="800", height="259" %} <figcaption>La LCP, Speed Index y FCP para un sitio móvil a lo largo del tiempo</figcaption></figure>
+
+DebugBear lanzó recientemente una [revisión de rendimiento del Website Builder (creador de sitios web)](https://www.debugbear.com/blog/website-builder-performance-review) muy interesante, que toca algunas de las áreas que mencioné anteriormente y examina el rendimiento de sitios muy simples construidos en cada plataforma. Este [sitio](https://matt05041.wixsite.com/bizsolutions) se construyó hace casi dos años y no se modificó desde entonces, pero la plataforma está mejorando continuamente y el rendimiento del sitio junto con él, lo que se puede observar al [ver sus datos](https://www.debugbear.com/project/175/pageLoad/873/overview?dateRange=2019-03-31T21%3A00Z-to-2021-03-31T21%3A59Z) durante el último año y medio.
+
+## Conclusión
+
+Esperamos que nuestra experiencia te inspire a adoptar una cultura orientada al desempeño en tu organización y que los detalles anteriores sean útiles y aplicables a tu plataforma o sitio.
+
+Para resumir:
+
+- Elije un conjunto de métricas de las que puedas realizar un seguimiento de forma constante mediante el uso de herramientas respaldadas por la industria. Recomendamos Core Web Vitals.
+- Aprovecha el almacenamiento en caché del navegador y las CDN.
+- Migra a HTTP/2 (o HTTP/3 si es posible).
+- Utiliza la compresión Brotli.
+
+Gracias por conocer nuestra historia y te invitamos a hacer preguntas, compartir ideas en [Twitter](https://twitter.com/alonkochba) y [GitHub](https://github.com/alonkochba) y unirte a la conversación sobre rendimiento web en tus canales favoritos.
+
+## Entonces, ¿cómo se ve **el** rendimiento de tu sitio Wix reciente?
diff --git a/src/site/content/es/devices/index.md b/src/site/content/es/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/es/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/es/discoverable/index.md b/src/site/content/es/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/es/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/es/es.11tydata.js b/src/site/content/es/es.11tydata.js
new file mode 100644
index 00000000000..46f40a871ba
--- /dev/null
+++ b/src/site/content/es/es.11tydata.js
@@ -0,0 +1,32 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    translated: 'none',
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/es/explore/explore.11tydata.js b/src/site/content/es/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/es/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/es/explore/index.md b/src/site/content/es/explore/index.md
new file mode 100644
index 00000000000..f866c7dfeef
--- /dev/null
+++ b/src/site/content/es/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: Explorar
+date: 2022-12-10
+---
diff --git a/src/site/content/es/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/es/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..1671c55e6c0
--- /dev/null
+++ b/src/site/content/es/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: Aplicar la carga instantánea con el patrón PRPL
+authors:
+  - houssein
+description: PRPL es un acrónimo que describe un patrón utilizado para hacer que las páginas web se carguen y se vuelvan interactivas más rápido. En esta guía, aprenderá la manera en que cada una de estas técnicas encajan pero aún se pueden usar de forma independiente para lograr resultados de rendimiento alto.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+PRPL es un acrónimo que describe un patrón utilizado para hacer que las páginas web se carguen y se vuelvan interactivas, más rápido:
+
+- **Envío automático** (o **precarga**) de los recursos más importantes.
+- **Renderizar** la ruta inicial lo antes posible.
+- **Guardar en caché** los activos restantes.
+- **Carga diferida** de otras rutas y activos no críticos.
+
+En esta guía, aprenderá cómo encajan cada una de estas técnicas, pero aún se pueden usar de forma independiente para lograr resultados de rendimiento.
+
+## Audite su página con Lighthouse
+
+Ejecute Lighthouse para identificar oportunidades de mejora alineadas con las técnicas de PRPL:
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. Seleccione las casillas de verificación **Rendimiento** y **Aplicación web progresiva.**
+2. Haga clic en **Ejecutar auditorías** para generar un informe.
+
+Para obtener más información, consulte [Descubra oportunidades de rendimiento con Lighthouse](/discover-performance-opportunities-with-lighthouse).
+
+## Precargar los recursos críticos
+
+Lighthouse muestra la siguiente auditoría fallida si un determinado recurso se analiza y se recupera tarde:
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse: Auditoría de de precarga de solicitudes clave", width="745", height="97" %}
+
+La [**precarga**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) es una solicitud de recuperación declarativa que le indica al navegador que solicite un recurso lo antes posible. Puede precargar los recursos críticos si agrega una etiqueta `<link>` con `rel="preload"` al encabezado de su documento HTML:
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+El navegador establece un nivel de prioridad más apropiado para el recurso con el fin de intentar descargarlo antes sin retrasar el evento `window.onload`.
+
+Para obtener más información sobre la precarga de recursos críticos, consulte la guía [Precarga de activos críticos.](/preload-critical-assets)
+
+## Renderizar la ruta inicial lo antes posible
+
+Lighthouse proporciona una advertencia si hay recursos que retrasan el [**First Paint (Primer despliegue)**](/user-centric-performance-metrics/#important-metrics-to-measure), el momento en que su sitio muestra los píxeles en la pantalla:
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Lighthouse: Auditoría para eliminar los recursos que bloquean el renderizado", width="800", height="111" %}
+
+Para mejorar el Primer despliegue, Lighthouse recomienda insertar JavaScript crítico y diferir el resto mediante el uso de [`async`](/critical-rendering-path-adding-interactivity-with-javascript/), así como también incluir CSS crítico usado en la mitad superior de la página. Esto mejora el rendimiento al eliminar los viajes de ida y vuelta al servidor para buscar activos que bloquean el renderizado. Sin embargo, el código en línea es más difícil de mantener desde una perspectiva de desarrollo y el navegador no puede almacenarlo en caché por separado.
+
+Otro enfoque para mejorar el Primer despliegue es **renderizar en el lado del servidor** el HTML inicial de su página. Esto le muestra el contenido inmediatamente al usuario mientras los scripts aún se están recuperando, analizando y ejecutando. Sin embargo, esto puede aumentar la carga útil del archivo HTML de manera significativa, lo que puede dañar [**Time to Interactive (Tiempo para volverse interactiva)**](/tti/) o el tiempo que le toma a su aplicación volverse interactiva y responder a la entrada del usuario.
+
+No existe una única solución correcta para reducir el Primer despliegue en su aplicación, y solo debe considerar los estilos de alineación y el renderizado del lado del servidor si los beneficios superan los compromisos para su aplicación. Puede obtener más información sobre estos dos conceptos en los siguientes recursos.
+
+- [Optimizar la entrega de CSS](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [¿Qué es el renderizado del lado del servidor?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">{% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="Solicitudes/respuestas con service worker", width="800", height="1224" %}</figure>
+
+## Activos de caché previa
+
+Al actuar como un proxy, los **service workers** pueden obtener activos directamente del caché en lugar de hacerlo desde el servidor en visitas repetidas. Esto no solo les permite a los usuarios usar su aplicación cuando están desconectados, sino que también resulta en tiempos de carga de página más rápidos en visitas repetidas.
+
+Utilice una biblioteca de terceros para simplificar el proceso de generación de un service worker, a menos que tenga requisitos de almacenamiento en caché más complejos que los que puede proporcionar una biblioteca. Por ejemplo, [Workbox](/workbox) proporciona una colección de herramientas que le permiten crear y mantener un service worker para almacenar en caché los activos. Para obtener más información sobre los service workers y la confiabilidad fuera de línea, consulte la [guía de service workers](/service-workers-cache-storage) en la ruta de aprendizaje de confiabilidad.
+
+## Carga diferida
+
+Lighthouse muestra una auditoría fallida si envía demasiados datos a través de la red.
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse: Tiene una auditoría de cargas útiles de red enormes", width="800", height="99" %}
+
+Esto incluye todos los tipos de activos, pero las cargas útiles grandes de JavaScript son especialmente costosas debido al tiempo que le toma al navegador analizarlas y compilarlas. Lighthouse también proporciona una advertencia para esto cuando sea apropiado.
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse: Auditoría de tiempo de arranque de JavaScript", width="797", height="100" %}
+
+Para enviar una carga útil de JavaScript más pequeña que contenga solo el código necesario cuando un usuario carga inicialmente su aplicación, divida todo el paquete y [cargue diferidamente](/reduce-javascript-payloads-with-code-splitting) los fragmentos a pedido.
+
+Una vez que haya logrado dividir su paquete, cargue previamente los fragmentos que son más importantes (consulte la guía [Precarga de activos críticos](/preload-critical-assets)). La precarga garantiza que el navegador obtenga y descargue antes los recursos más importantes.
+
+Además de dividir y cargar diferentes fragmentos de JavaScript a pedido, Lighthouse también proporciona una auditoría para la carga diferida de imágenes no críticas.
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse: Auditoría de imágenes diferidas fuera de pantalla", width="800", height="90" %}
+
+Si carga muchas imágenes en su página web, posponga todas las que están en la mitad inferior de la página, o fuera de la ventana gráfica del dispositivo, cuando se carga una página (consulte [Uso de lazysizes para cargar imágenes de forma diferida](/use-lazysizes-to-lazyload-images)).
+
+## Próximos pasos
+
+Ahora que comprende algunos de los conceptos básicos detrás del patrón PRPL, continúe con la siguiente guía de esta sección para obtener más información. Es importante recordar que no todas las técnicas deben aplicarse en conjunto. Cualquier esfuerzo realizado con cualquiera de las siguientes proporcionará mejoras notables en el rendimiento.
+
+- **Envío automático** (o **precarga**) de los recursos críticos.
+- **Renderizar** la ruta inicial lo antes posible.
+- **Guardar en caché** los activos restantes.
+- **Carga diferida** de otras rutas y activos no críticos.
diff --git a/src/site/content/es/fast/avoid-invisible-text/index.md b/src/site/content/es/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..fe4da595d25
--- /dev/null
+++ b/src/site/content/es/fast/avoid-invisible-text/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Evite el texto invisible durante la carga de fuentes
+authors:
+  - katiehempenius
+description: Las fuentes suelen ser archivos de gran tamaño que tardan un poco en cargarse. Para lidiar con esto, algunos navegadores ocultan el texto hasta que se carga la fuente (el "destello de texto invisible"). Si está optimizando el rendimiento, querrá evitar el "destello de texto invisible "y mostrar el contenido a los usuarios de forma inmediata utilizando una fuente del sistema.
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## ¿Por qué debería preocuparte?
+
+Las fuentes suelen ser archivos de gran tamaño que tardan un poco en cargarse. Para hacer frente a esto, algunos navegadores ocultan el texto hasta que se carga la fuente (el "destello de texto invisible"). Si está optimizando el rendimiento, querrá evitar el "destello de texto invisible" y mostrar el contenido a los usuarios inmediatamente usando una fuente del sistema (el "destello de texto sin estilo").
+
+## Mostrar el texto inmediatamente
+
+Esta guía describe dos formas de conseguir esto: el primer enfoque es muy simple pero no tiene [support](https://caniuse.com/#search=font-display) (soporte) universal de navegadores; el segundo enfoque es más trabajoso, pero tiene compatibilidad total con los navegadores. La mejor opción para usted es la que realmente implementará y mantendrá.
+
+## Opción n. 1: Usar font-display
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Antes</th>
+        <th>Después</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+}
+</code>
+        </td>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+  &lt;strong&gt;font-display: swap;&lt;/strong&gt;
+}
+</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) es una API para especificar la estrategia de visualización de fuentes. `swap` le dice al navegador que el texto que usa esta fuente debe mostrarse inmediatamente usando una fuente del sistema. Una vez que la fuente personalizada está lista, la fuente del sistema se cambia.
+
+Si un navegador no admite `font-display`, el navegador continúa con su comportamiento predeterminado para cargar fuentes. Compruebe qué navegadores admiten `font-display` [aquí](https://caniuse.com/#search=font-display).
+
+Estos son los comportamientos predeterminados de carga de fuentes para navegadores comunes:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Navegador</strong></th>
+        <th><strong>Comportamiento predeterminado si la fuente no está lista...</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>Utiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>Oculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>Oculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Oculta el texto hasta que la fuente esté lista.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Opción n. 2: Espere para usar fuentes personalizadas hasta que se carguen
+
+Con un poco más de trabajo, se puede implementar el mismo comportamiento para que funcione en todos los navegadores.
+
+Este enfoque consta de tres partes:
+
+- No utilice una fuente personalizada en la carga de la página inicial. Esto asegura que el navegador muestre el texto inmediatamente usando una fuente del sistema.
+- Detecta cuando se carga su fuente personalizada. Esto se puede lograr con un par de líneas de código JavaScript, gracias a la biblioteca [FontFaceObserver](https://github.com/bramstein/fontfaceobserver).
+- Actualice el estilo de la página para usar la fuente personalizada.
+
+Estos son los cambios que puede esperar realizar para implementar esto:
+
+- Refactorice su CSS para no usar una fuente personalizada durante la carga inicial de la página.
+- Agrega una secuencia de comandos a tu página. Este script detecta cuándo se carga la fuente personalizada y luego actualizará el estilo de la página.
+
+{% Aside 'codelab' %} [Utilice Font Face Observer para mostrar el texto inmediatamente](/codelab-avoid-invisible-text). {% endAside %}
+
+## Verificar
+
+Ejecute Lighthouse para verificar que el sitio esté usando `font-display: swap` para mostrar texto:
+
+{% Instruction 'audit-performance', 'ol' %}
+
+Confirme que la auditoría **Ensure text remains visible during webfont load (Asegúrate de que el texto permanece visible mientras se carga la fuente web)** está pasando.
diff --git a/src/site/content/es/fast/browser-level-image-lazy-loading/index.md b/src/site/content/es/fast/browser-level-image-lazy-loading/index.md
new file mode 100644
index 00000000000..7f63298d21d
--- /dev/null
+++ b/src/site/content/es/fast/browser-level-image-lazy-loading/index.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Carga diferida de imágenes a nivel del navegador para la web
+subhead: "¡La carga diferida incorporada finalmente está aquí!"
+authors:
+  - houssein
+  - addyosmani
+  - mathiasbynens
+date: 2019-08-06
+updated: 2020-07-16
+hero: image/admin/F6VE4QkpCsomiJilTFNG.png
+alt: Esquema del teléfono con imagen de carga y activos
+description: |2-
+
+  Esta publicación cubre el atributo para cargar (loading) y cómo se puede usar para controlar la carga de imágenes.
+tags:
+  - blog
+  - performance
+feedback:
+  - api
+---
+
+¡La compatibilidad con el nivel del navegador para imágenes de carga diferida ahora es compatible en la web! Este video muestra una [demostración](https://mathiasbynens.be/demo/img-loading-lazy) de la función:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+Desde Chrome 76 en adelante, puede usar el atributo de `loading` para cargar imágenes de forma diferida sin la necesidad de escribir un código de carga diferida personalizado o usar una biblioteca de JavaScript separada. Es hora de dar un clavado en los detalles.
+
+## Compatibilidad del navegador
+
+`<img loading=lazy>` es compatible con los navegadores más populares con tecnología Chromium (Chrome, Edge, Opera) y [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/75#HTML). La implementación de WebKit (Safari) [está en progreso](https://bugs.webkit.org/show_bug.cgi?id=200764). [caniuse.com](https://caniuse.com/#feat=loading-lazy-attr) tiene información detallada sobre la compatibilidad con varios navegadores. Los navegadores que no admiten el atributo de `loading` simplemente lo ignoran sin efectos secundarios.
+
+## ¿Por qué la carga diferida a nivel del navegador?
+
+Según [HTTPArchive](https://httparchive.org/reports/page-weight), las imágenes son el tipo de archivo más consultado para la mayoría de los sitios web y, por lo general, ocupan más ancho de banda que cualquier otro recurso. En el percentil 90, los sitios envían aproximadamente 4,7 MB de imágenes en computadoras de escritorio y dispositivos móviles. Eso equivale a muchas [fotos de gatos](https://en.wikipedia.org/wiki/Cats_and_the_Internet).
+
+Actualmente, hay dos formas de aplazar la carga de imágenes fuera de la pantalla:
+
+- Usando la [API de Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/)
+- Usando los [controladores de eventos de](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way) `scroll`, `resize` o `orientationchange`
+
+Cualquiera de las opciones puede permitir a los desarrolladores incluir la funcionalidad de carga diferida, y muchos desarrolladores han creado bibliotecas de terceros para proporcionar abstracciones que son aún más fáciles de usar. Sin embargo, con la carga diferida compatible directamente con el navegador, no es necesario una biblioteca externa. La carga diferida a nivel del navegador también garantiza que la carga diferida de imágenes siga funcionando incluso si JavaScript está deshabilitado en el cliente.
+
+## El atributo de `loading`
+
+Hoy en día, Chrome carga imágenes con diferentes prioridades dependiendo de dónde se encuentren con respecto a la ventana gráfica del dispositivo. Las imágenes debajo de la ventana gráfica se cargan con una prioridad más baja, pero aún así se obtienen lo antes posible.
+
+En Chrome 76+, puede utilizar el `loading` para aplazar por completo la carga de imágenes fuera de la pantalla a las que se puede acceder desplazándose:
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Estos son los valores admitidos para el atributo de `loading`
+
+- `auto`: comportamiento predeterminado de carga diferida del navegador, que es lo mismo que no incluir el atributo.
+- `lazy`: pospone la carga del recurso hasta que alcance una [distancia calculada](#distance-from-viewport-thresholds) desde la ventana gráfica.
+- `eager`: carga el recurso inmediatamente, independientemente de dónde se encuentre en la página.
+
+{% Aside 'caution' %} Aunque está disponible en Chromium, el `auto` no se menciona en la [especificación](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes). Dado que puede estar sujeto a cambios, recomendamos no usarlo hasta que sea incluido. {% endAside %}
+
+### Limite de distancia desde la ventana gráfica
+
+Todas las imágenes que están en la mitad superior de la página, es decir, que se pueden ver inmediatamente sin desplazarse, se cargan normalmente. Las que están muy por debajo de la ventana gráfica del dispositivo solo se cargan cuando el usuario se desplaza cerca de ellas.
+
+La implementación de Chromium de la carga diferida intenta garantizar que las imágenes fuera de la pantalla se carguen lo suficientemente temprano para que estén listas una vez que el usuario se desplaza cerca de ellas. Al buscar imágenes cercanas antes de que se vuelvan visibles en la ventana gráfica, maximizamos la posibilidad de que ya estén cargadas cuando se vuelven visibles.
+
+En comparación con las bibliotecas de carga diferida de JavaScript, los limites para obtener imágenes que se desplazan a la vista pueden considerarse como conservadores. Chromium busca alinear mejor estos limites con las expectativas de los desarrolladores.
+
+{% Aside %} Los experimentos realizados con Chrome en Android sugieren que en 4G, el 97,5% de las imágenes de la mitad inferior de la página que se cargan de forma diferida se cargaron por completo en un plazo de 10ms desde que se hicieron visibles. Incluso en redes 2G lentas, el 92,6% de las imágenes de la mitad inferior de la página se cargaron por completo en 10ms. Esto significa que la carga diferida a nivel del navegador ofrece una experiencia estable con respecto a la visibilidad de los elementos que se desplazan hacia la vista. {% endAside %}
+
+El limite de distancia no es fijo y varía en función de varios factores:
+
+- El tipo de recurso de imagen que se está recuperando.
+- Si el [modo lite](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) está habilitado en Chrome para Android
+- El [tipo de conexión efectiva](https://googlechrome.github.io/samples/network-information/)
+
+Puede encontrar los valores predeterminados para los diferentes tipos de conexiones efectivas en la [fuente de Chromium](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad). Estos números, e incluso el enfoque de buscar solo cuando se alcanza una cierta distancia desde la ventana gráfica, pueden cambiar en un futuro cercano a medida que el equipo de Chrome mejora la heurística para determinar cuándo comenzar a cargar.
+
+{% Aside %} En Chrome 77+, puede experimentar con estos diferentes limites al [limitar la red](https://developer.chrome.com/docs/devtools/network/#throttle) en las DevTools. Mientras tanto, deberá anular el tipo de conexión efectiva del navegador mediante el uso de la bandera de `about://flags/#force-effective-connection-type`. {% endAside %}
+
+## Ahorro de datos mejorado y limites de distancia desde la ventana gráfica
+
+A partir de julio de 2020, Chrome ha realizado mejoras significativas para alinear los limites de la distancia de carga diferida desde la ventana gráfica de la imagen para cumplir mejor con las expectativas de los desarrolladores.
+
+En conexiones rápidas (por ejemplo, 4G), redujimos los limites de distancia desde la ventana de Chrome de `3000px` a `1250px` y en conexiones más lentas (por ejemplo, 3G), cambiamos el limite de `4000px` a `2500px`. Este cambio logra dos cosas:
+
+- `<img loading=lazy>` se comporta más cerca de la experiencia que ofrecen las bibliotecas de carga diferida de JavaScript.
+- Los nuevos limites de distancia desde la ventana gráfica aún nos permiten garantizar que las imágenes probablemente se hayan cargado cuando un usuario se haya desplazado hacia ellas.
+
+Puede encontrar una comparación entre los limites de distancia desde la ventana gráfica antiguos y los nuevos para una de nuestras demostraciones en una conexión rápida (4G) a continuación:
+
+Limites antiguos contra limites nuevos:
+
+<figure>{% Img src="image/admin/xSZMqpbioBRwRTnenK8f.png", alt="Los nuevos y mejorados limites para la carga diferida de imágenes, reduciendo los limites de distancia desde la ventana gráfica para conexiones rápidas de 3000px a 1250px", width="800", height="460" %}</figure>
+
+y los nuevos limites frente a LazySizes (una popular biblioteca de carga diferida de JS):
+
+<figure>{% Img src="image/admin/oHMFvflk9aesT7r0iJbx.png", alt="Los nuevos limites de distancia desde la ventana gráfica en Chrome carga 90KB de imágenes en comparación con LazySizes que carga en 70KB en las mismas condiciones de red", width="800", height="355" %}</figure>
+
+{% Aside %} Para garantizar que los usuarios de Chrome en versiones recientes también se beneficien de los nuevos limites, hemos respaldado estos cambios para que Chrome 79 - 85 también los use. Tenga esto en cuenta si intenta comparar los ahorros de datos de versiones anteriores de Chrome con las más recientes. {% endAside %}
+
+Estamos comprometidos a trabajar con la comunidad de estándares web para explorar una mejor alineación en cómo se abordan los limites de distancia desde la ventana gráfica en diferentes navegadores.
+
+### Las imágenes deben incluir atributos de dimensión
+
+Mientras el navegador carga una imagen, no conoce inmediatamente las dimensiones de la misma, a menos que se especifiquen explícitamente. Para permitir que el navegador reserve suficiente espacio en una página para imágenes, se recomienda que todas las etiquetas `<img>` incluyan atributos de `width` y de `height`. Sin las dimensiones especificadas, pueden producirse [cambios en el diseño](/cls), que son más evidentes en las páginas que tardan más tiempo en cargarse.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Alternativamente, especifique sus valores directamente en un estilo en línea:
+
+```html
+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+```
+
+La mejor práctica para establecer dimensiones se aplica a las `<img>` independientemente de si se cargan de forma diferida o no. Con la carga diferida, esto puede volverse más relevante. Establecer el `width` y la `height` de las imágenes en los navegadores modernos también permite a los navegadores inferir su tamaño intrínseco.
+
+En la mayoría de los escenarios, las imágenes aún se cargan de forma diferida si no se incluyen las dimensiones, pero hay algunos casos extremos que se debe de conocer. Sin `width` y el `height`, las dimensiones de la imagen son 0 × 0 píxeles al principio. Si tiene una galería de tales imágenes, el navegador puede concluir que todas encajan dentro de la ventana gráfica al principio, ya que cada una de ellas prácticamente no ocupa espacio y ninguna imagen se desplaza fuera de la pantalla. En este caso el navegador determina que todos son visibles para el usuario y decide cargarlos todos.
+
+Además, [especificar las dimensiones de la imagen reduce las posibilidades de que se produzcan cambios en el diseño](https://www.youtube.com/watch?v=4-d_SoCHeWE). Si no puede incluir dimensiones para sus imágenes, cargarlas de forma diferida puede ser una compensación entre ahorrar recursos de red y tener un riesgo mayor de cambio de diseño.
+
+Si bien la carga diferida en Chromium se implementa de tal manera de que sea probable que las imágenes se carguen una vez que estén visibles, todavía existe una pequeña posibilidad de que aún no se hayan cargado. En este caso, los atributos de `width` y `height` faltan en tales imágenes y con ello aumentan su impacto en el Cambio de diseño acumulativo.
+
+{% Aside %} Eche un vistazo a esta [demostración](https://mathiasbynens.be/demo/img-loading-lazy) para ver cómo funciona el `loading` con 100 imágenes. {% endAside %}
+
+Las imágenes que se definen mediante el `<picture>` también se pueden cargar de forma diferida:
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
+  <img src="photo.jpg" loading="lazy">
+</picture>
+```
+
+Aunque un navegador decidirá qué imagen cargar de cualquiera de los `<source>`, el `loading` solo debe incluirse en el elemento de respaldo `<img>` .
+
+## Evite las imágenes de carga diferida que se encuentran en la primera ventana gráfica visible
+
+Debe evitar configurar `loading=lazy` para las imágenes que se encuentran en la primera ventana gráfica visible.
+
+Si es posible, se recomienda agregar sólo `loading=lazy` a las imágenes que se colocan debajo de la primera pantalla. Las imágenes que se cargan rápidamente se pueden recuperar de inmediato, mientras para las imágenes que se cargan de manera diferida, el navegador actualmente necesita esperar hasta que reconozca dónde está posicionada la imagen en la página, lo que depende de que IntersectionObserver esté disponible.
+
+{% Aside %} En Chromium, el impacto de las imágenes en la ventana gráfica inicial marcadas con `loading=lazy` en Largest Contentful Paint: Despliegue del contenido más extenso (LCP) es bastante pequeño, con una regresión de &lt;1% en los percentiles 75 y 99 en comparación con las imágenes cargadas rápidamente. {% endAside %}
+
+En general, cualquier imagen dentro de la ventana gráfica debe cargarse rápidamente utilizando los valores predeterminados del navegador. No es necesario especificar `loading=eager` para que este sea el caso de las imágenes en la ventana gráfica.
+
+```html
+<!-- visible in the viewport -->
+<img src="product-1.jpg" alt="..." width="200" height="200">
+<img src="product-2.jpg" alt="..." width="200" height="200">
+<img src="product-3.jpg" alt="..." width="200" height="200">
+
+<!-- offscreen images -->
+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
+```
+
+## Degradación elegante
+
+Los navegadores que aún no tienen compatibilidad con el atributo de `loading` ignorarán su presencia. Si bien estos navegadores, no obtendrán los beneficios de la carga diferida, incluir el atributo no tiene un impacto negativo en ellos.
+
+## Preguntas frecuentes
+
+### ¿Hay planes para cargar imágenes de forma diferida automáticamente en Chrome?
+
+Chromium ya carga automáticamente de forma diferida cualquier imagen que sea adecuada para diferir si el [modo lite](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) está habilitado en Chrome para Android. Esto está dirigido principalmente a usuarios conscientes del ahorro de datos.
+
+### ¿Puedo cambiar qué tan cerca debe estar una imagen antes de que se active una carga?
+
+Estos valores están codificados y no se pueden cambiar a través de la API. Sin embargo, pueden cambiar en el futuro a medida que los navegadores experimenten con diferentes distancias de limite y variables.
+
+### ¿Pueden las imágenes de fondo del CSS aprovechar el atributo de `loading`?
+
+No, actualmente solo se puede usar con las etiquetas `<img>`
+
+### ¿Existe algún inconveniente en las imágenes de carga diferida que se encuentran dentro de la ventana gráfica del dispositivo?
+
+Es más seguro evitar colocar `loading=lazy` en las imágenes de la mitad superior de la página, ya que Chrome no precargará `loading=lazy` en el escáner de precarga.
+
+### ¿Cómo funciona el `loading` con imágenes que están en la ventana gráfica pero que no son visibles inmediatamente (por ejemplo: detrás de un carousel u ocultas por el CSS para ciertos tamaños de pantalla)?
+
+Solo las imágenes que están por debajo de la ventana gráfica del dispositivo por la [distancia calculada](#distance-from-viewport-thresholds) se cargan de manera diferida. Todas las imágenes sobre la ventana gráfica, independientemente de si son inmediatamente visibles, se cargan normalmente.
+
+### ¿Qué sucede si ya estoy usando una biblioteca de terceros o un script para cargar imágenes de forma diferida?
+
+El `loading` no debería afectar el código que actualmente carga de forma diferida sus archivos de ninguna manera, pero hay algunas cosas importantes a considerar:
+
+1. Si su cargador diferido personalizado intenta cargar imágenes o marcos antes que cuando Chrome los carga normalmente, es decir, a una distancia mayor que los [limites de distancia desde la ventana gráfica](#distance-from-viewport-thresholds), se aplazarán y se cargarán según el comportamiento normal del navegador.
+2. Si su cargador diferido personalizado utiliza una distancia más corta para determinar cuándo cargar una imagen en particular que el navegador, entonces el comportamiento se ajustará a su configuración personalizada.
+
+Una de las razones importantes para seguir usando una biblioteca de terceros junto con `loading="lazy"` es proporcionar un polyfill para los navegadores que aún no tienen compatibilidad con el atributo.
+
+### ¿Cómo manejo los navegadores que aún no tienen compatibilidad con la carga diferida?
+
+Cree un polyfill o utilice una biblioteca de terceros para cargar imágenes en forma diferida en su sitio. La propiedad de `loading` se puede utilizar para detectar si la función es compatible con el navegador:
+
+```js
+if ('loading' in HTMLImageElement.prototype) {
+  // supported in browser
+} else {
+  // fetch polyfill/third-party library
+}
+```
+
+Por ejemplo, [lazysizes](https://github.com/aFarkas/lazysizes) es una popular biblioteca de carga diferida de JavaScript. Puede detectar el soporte al atributo de `loading` para cargar lazysizes como una biblioteca de reserva sólo cuando `loading` no sea compatible. Esto funciona de la siguiente manera:
+
+- Reemplace `<img src>` con `<img data-src>` para evitar una carga rápida en navegadores no compatibles. Si el atributo de `loading` es compatible, intercambie `data-src` por `src`.
+- Si `loading` no es compatible, cargue una opción de respaldo (lazysizes) e inícielo. Según los documentos de lazysizes, se usa la `lazyload` como una forma de indicar a lazysizes qué imágenes se cargarán de forma diferida.
+
+```html
+<!-- Let's load this in-viewport image normally -->
+<img src="hero.jpg" alt="…">
+
+<!-- Let's lazy-load the rest of these images -->
+<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
+
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+</script>
+```
+
+Aquí hay una [demostración](https://lazy-loading.firebaseapp.com/lazy_loading_lib.html) de este patrón. Pruébelo en un navegador como Firefox o Safari para ver el respaldo en acción.
+
+{% Aside %} La biblioteca lazysizes también proporciona un [complemento de carga](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading) que usa la carga diferida a nivel del navegador cuando está disponible, pero recurre a la funcionalidad personalizada de la biblioteca cuando es necesario. {% endAside %}
+
+### ¿La carga diferida para iframes también es compatible con Chrome?
+
+`<iframe loading=lazy>` se estandarizó recientemente y ya está implementado en Chromium. Esto le permite cargar iframes de forma diferida utilizando el atributo `loading`. En breve se publicará un artículo dedicado sobre la carga diferida de iframe en web.dev.
+
+El `loading` afecta a los iframes de manera diferente que a las imágenes, dependiendo de si el iframe está oculto. (Los iframes ocultos se utilizan a menudo con fines analíticos o de comunicación). Chrome utiliza los siguientes criterios para determinar si un iframe está oculto:
+
+- El ancho y el alto del iframe son 4 px o menos.
+- `display: none` o `visibility: hidden` es utilizado.
+- El iframe se coloca fuera de la pantalla con un posicionamiento X o Y negativo.
+
+Si un iframe cumple con alguna de estas condiciones, Chrome lo considera oculto y no lo cargará de forma diferida en la mayoría de los casos. Los iframes que *no estén* ocultos solo se cargarán cuando estén dentro de los [limites de distancia desde la ventana gráfica](#distance-from-viewport-thresholds). Se muestra un marcador de posición para los iframes cargados de forma diferida que aún están siendo recuperados.
+
+### ¿Cómo afecta la carga diferida a nivel del navegador a los anuncios en una página web?
+
+Todos los anuncios que se muestran al usuario en forma de imagen o iframe se cargan de forma diferida como cualquier otra imagen o iframe.
+
+### ¿Cómo se manejan las imágenes cuando se imprime una página web?
+
+Aunque la funcionalidad no está en Chrome actualmente, existe un [problema abierto](https://bugs.chromium.org/p/chromium/issues/detail?id=875403) para garantizar que todas las imágenes e iframes se carguen inmediatamente si se imprime una página.
+
+### ¿Lighthouse reconoce la carga diferida a nivel del navegador?
+
+Las versiones anteriores de Lighthouse aún destacarían que las páginas que usan `loading=lazy` en imágenes requerían una estrategia para cargar imágenes fuera de la pantalla. [Lighthouse 6.0](/lighthouse-whats-new-6.0/) y superior tienen un mejor factor en los enfoques para la carga diferida de imágenes fuera de la pantalla que pueden usar diferentes limites, lo que les permite pasar la auditoría de [diferir imágenes fuera de la pantalla](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/).
+
+## Conclusión
+
+Implementar una compatibilidad de imágenes de carga diferida puede facilitarle significativamente la mejora del rendimiento de sus páginas web.
+
+¿Está notando algún comportamiento inusual con esta función habilitada en Chrome? [¡Reporta el problema!](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C)
diff --git a/src/site/content/es/fast/choose-the-right-image-format/index.md b/src/site/content/es/fast/choose-the-right-image-format/index.md
new file mode 100644
index 00000000000..811ec70b1cc
--- /dev/null
+++ b/src/site/content/es/fast/choose-the-right-image-format/index.md
@@ -0,0 +1,135 @@
+---
+layout: post
+title: Escoja el formato de imagen correcto
+authors:
+  - ilyagrigorik
+description: |2-
+
+  Seleccionar el formato de imagen correcto es el primer paso para ofrecer imágenes optimizadas en su sitio web. Esta publicación te ayuda a escoger de forma correcta.
+date: 2018-08-30
+updated: 2020-06-18
+tags:
+  - performance
+  - images
+---
+
+La primera pregunta que debe hacerse es si, de hecho, se requiere una imagen para lograr el efecto que busca. Un buen diseño es simple y también producirá siempre el mejor rendimiento. Si puede eliminar un recurso de imagen, que a menudo requiere una gran cantidad de bytes en relación con HTML, CSS, JavaScript y otros activos en la página, entonces esa es siempre la mejor estrategia de optimización. Dicho esto, una imagen bien colocada también puede comunicar más información que mil palabras, por lo que depende de usted encontrar ese equilibrio.
+
+A continuación, debe considerar si existe una tecnología alternativa que podría brindar los resultados deseados, pero de una manera más eficiente:
+
+- **Los efectos CSS** (como sombras o degradados) y las animaciones CSS se pueden utilizar para producir activos independientes de la resolución que siempre se ven nítidos en cada resolución y nivel de zoom, a menudo en una fracción de los bytes requeridos por un archivo de imagen.
+- **Las fuentes web** permiten el uso de tipos de letra elegantes que al mismo tiempo conservan la capacidad de seleccionar, buscar y cambiar el tamaño del texto, una mejora significativa en la usabilidad.
+
+Si alguna vez se encuentra codificando texto en un recurso de imagen, deténgase y reconsidere. Una tipografía excelente es fundamental para un buen diseño, marca y legibilidad, pero el texto en imágenes ofrece una mala experiencia de usuario: el texto no se puede seleccionar, no se puede buscar, no se puede ampliar, no se puede acceder a él y no es compatible con dispositivos de alta resolución. El uso de fuentes web requiere su [propio conjunto de optimizaciones](https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/), pero aborda todas estas cuestiones y es siempre la mejor opción para mostrar texto.
+
+## Escoja el formato de imagen correcto
+
+Si está seguro de que una imagen es la opción correcta, debe seleccionar cuidadosamente el tipo de imagen adecuado para el trabajo.
+
+<figure>{% Img src="image/admin/dJuB2DQcbhtwD5VdPVlR.png", alt="Imágenes de trama e imágenes vectoriales ampliadas", width="585", height="313" %}<figcaption> Imagen vectorial (L) e Imagen de trama (R) ampliadas</figcaption></figure>
+
+- [Los gráficos vectoriales](https://en.wikipedia.org/wiki/Vector_graphics) utilizan líneas, puntos y polígonos para representar una imagen.
+- [Los gráficos de trama](https://en.wikipedia.org/wiki/Raster_graphics) (raster images) representan una imagen codificando los valores individuales de cada píxel dentro de una cuadrícula rectangular.
+
+Cada formato tiene su propio conjunto de pros y contras. Los formatos vectoriales son ideales para imágenes que constan de formas geométricas simples como logotipos, texto o iconos. Ofrecen resultados nítidos en cada resolución y configuración de zoom, lo que los convierte en un formato ideal para pantallas y activos de alta resolución que deben mostrarse en diferentes tamaños.
+
+Sin embargo, los formatos vectoriales se quedan cortos cuando la escena es complicada (por ejemplo, una foto): la cantidad de marcado SVG para describir todas las formas puede ser prohibitivamente alta y la salida aún puede carecer del aspecto "fotorrealista". Cuando ese es el caso, debería usar un formato de imagen de trama como PNG, JPEG o WebP.
+
+Las imágenes de trama no tienen las mismas propiedades agradables de ser independientes a la resolución o el zoom; cuando amplía una imagen de trama, verá gráficos irregulares y borrosos. Como resultado, es posible que deba guardar varias versiones de una imagen de trama en varias resoluciones para ofrecer la mejor experiencia a sus usuarios.
+
+## Implicaciones de las pantallas de alta resolución
+
+Hay dos tipos diferentes de píxeles: píxeles CSS y píxeles del dispositivo. Un solo píxel de CSS puede corresponder directamente a un solo píxel de dispositivo, o puede estar respaldado por múltiples píxeles de dispositivo. ¿Cuál es la finalidad? En resumen, cuantos más píxeles del dispositivo, más refinados serán los detalles del contenido que se muestra en la pantalla.
+
+<figure>{% Img src="image/admin/oQV7qJ9fUMkYsKlUMrL4.png", alt="Tres imágenes que muestran la diferencia entre los píxeles CSS y los píxeles del dispositivo", width="470", height="205" %}<figcaption> La diferencia entre píxeles CSS y píxeles del dispositivo.</figcaption></figure>
+
+Las pantallas de alto DPI (HiDPI) producen hermosos resultados, pero hay una compensación obvia: las imágenes requieren más detalles para aprovechar el mayor número de píxeles del dispositivo. La buena noticia es que las imágenes vectoriales son ideales para esta tarea, ya que se pueden renderizar en cualquier resolución con resultados nítidos; es posible que incurra en un mayor costo de procesamiento para renderizar los detalles más finos, pero el activo subyacente es el mismo y es independiente de la resolución.
+
+Por otro lado, las imágenes de trama plantean un desafío mucho mayor porque codifican datos de imagen por píxel. Por lo tanto, cuanto mayor sea el número de píxeles, mayor será la imagen de trama. Como ejemplo, consideremos la diferencia entre un recurso fotográfico que se muestra a 100x100 píxeles (CSS):
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>Resolución de la pantalla</th>
+    <th>Píxeles totales</th>
+    <th>Sin comprimir (4 bytes por píxel)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="resolution">1x</td>
+  <td data-th="total pixels">100 x 100 = 10,000</td>
+  <td data-th="filesize">40,000 bytes</td>
+</tr>
+<tr>
+  <td data-th="resolution">2x</td>
+  <td data-th="total pixels">100 x 100 x 4 = 40 000</td>
+  <td data-th="filesize">160,000 bytes</td>
+</tr>
+<tr>
+  <td data-th="resolution">3 veces</td>
+  <td data-th="total pixels">100 x 100 x 9 = 90 000</td>
+  <td data-th="filesize">360,000 bytes</td>
+</tr>
+</tbody>
+</table></div>
+
+Cuando duplicamos la resolución de la pantalla física, el número total de píxeles aumenta en un factor de cuatro: el doble del número de píxeles horizontales, multiplicado por el doble del número de píxeles verticales. Por lo tanto, una pantalla "2x" no solo duplica, sino que cuadriplica la cantidad de píxeles requeridos.
+
+Entonces, ¿qué significa esto en la práctica? Las pantallas de alta resolución le permiten ofrecer imágenes hermosas, lo que puede ser una gran característica del producto. Sin embargo, las pantallas de alta resolución también requieren imágenes de alta resolución, por lo tanto:
+
+- Prefiera imágenes vectoriales siempre que sea posible, ya que son independientes de la resolución y siempre brindan resultados nítidos.
+- Si se requiere una imagen de trama, proporcione [imágenes responsivas](/serve-responsive-images/).
+
+## Características de diferentes formatos de imágenes de trama
+
+Además de los diferentes algoritmos de compresión con y sin pérdida de datos, los diferentes formatos de imagen admiten diferentes características, como canales de animación y transparencia (alfa). Como resultado, la elección del "formato correcto" para una imagen específica es una combinación de los resultados visuales deseados y los requisitos funcionales.
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>Formato</th>
+    <th>Transparencia</th>
+    <th>Animación</th>
+    <th>Navegador</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></td>
+  <td data-th="transparency">Sí</td>
+  <td data-th="animation">No</td>
+  <td data-th="browser">Todos</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></td>
+  <td data-th="transparency">No</td>
+  <td data-th="animation">No</td>
+  <td data-th="browser">Todos</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/WebP">WebP</a></td>
+  <td data-th="transparency">Sí</td>
+  <td data-th="animation">Sí</td>
+  <td data-th="browser">Todos los navegadores modernos. Consulte <a href="https://caniuse.com/#feat=webp">¿Puedo usarlo?</a>
+</td>
+</tr>
+</tbody>
+</table></div>
+
+Existen dos formatos de imagen de trama admitidos universalmente: PNG y JPEG. Además de estos formatos, los navegadores modernos admiten el nuevo formato WebP, que ofrece una mejor compresión general y más funciones. Entonces, ¿qué formato deberías usar?
+
+El formato WebP generalmente proporcionará una mejor compresión que los formatos más antiguos y debe usarse siempre que sea posible. Puede usar WebP junto con otro formato de imagen como respaldo. Consulte [Usar imágenes WebP](/serve-images-webp/) para obtener más detalles.
+
+En términos de formatos de imagen más antiguos, considere lo siguiente:
+
+1. **¿Necesitas animaciones? Utilice elementos `<video>`**
+    - ¿Y el formato GIF? GIF limita la paleta de colores a un máximo de 256 colores y crea tamaños de archivo significativamente más grandes que los elementos `<video>`. Consulte [Reemplazar los GIF animados por video](/replace-gifs-with-videos/).
+2. **¿Necesita conservar los detalles finos con la resolución más alta? Utilice PNG.**
+    - PNG no aplica ningún algoritmo de compresión con pérdida de datos más allá de la elección del tamaño de la paleta de colores. Como resultado, producirá una imagen de la más alta calidad, pero a un costo significativamente mayor que otros formatos. Úselo con prudencia.
+    - Si el recurso de imagen contiene imágenes compuestas por formas geométricas, ¡considere convertirlo a un formato vectorial (SVG)!
+    - Si el recurso de imagen contiene texto, deténgase y reconsidere. El texto de las imágenes no se puede seleccionar, buscar ni ampliar. Si necesita transmitir un aspecto personalizado (por motivos de marca u otras razones), considere utilizar una fuente web.
+3. **¿Está optimizando una foto, una captura de pantalla o un recurso de imagen similar? Utilice JPEG.**
+    - JPEG utiliza una combinación de optimización con y sin pérdida de datos para reducir el contenido de la imagen. Pruebe varios niveles de calidad JPEG para encontrar la mejor calidad frente en relación con el tamaño para su contenido.
+
+Finalmente, tenga en cuenta que si está utilizando WebView para representar contenido en la aplicación específica de su plataforma, entonces tiene el control total del cliente y puede usar WebP exclusivamente. Facebook y muchos otros usan WebP para todas las imágenes dentro de sus aplicaciones; el ahorro definitivamente vale la pena.
diff --git a/src/site/content/es/fast/chrome-ux-report/index.md b/src/site/content/es/fast/chrome-ux-report/index.md
new file mode 100644
index 00000000000..b7816feb952
--- /dev/null
+++ b/src/site/content/es/fast/chrome-ux-report/index.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: Uso del informe Chrome UX para observar el rendimiento en el campo
+authors:
+  - rviscomi
+description: |2-
+
+  El informe Chrome UX (conocido informalmente como CrUX) es un conjunto de datos públicos de datos de la experiencia del usuario en millones de sitios web. A diferencia de los datos de laboratorio, los datos de CrUX realmente provienen de usuarios  en la vida real que han optado por participar en el estudio.
+date: 2020-07-13
+updated: 2022-07-18
+tags:
+  - performance
+  - chrome-ux-report
+---
+
+El [informe Chrome UX](https://developer.chrome.com/docs/crux/) (conocido informalmente como CrUX) es un conjunto de datos públicos de datos reales de la experiencia del usuario en millones de sitios web. A diferencia de los datos de laboratorio, los datos de CrUX en realidad provienen de [usuarios que han optado por participar](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) en el estudio. Mide las [métricas de Core Web Vitals](/vitals/), incluidas la Largest Contentful Paint:  Despliegue del contenido más extenso (LCP), First Input Delay: Demora de la primera entrada (FID) y Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS), así como métricas de diagnóstico como el Time to First Byte: Tiempo hasta el primer byte (TTFB) y First Contentful Paint: Primer Despliegue de contenido (FCP).
+
+El conjunto de datos también contiene dimensiones cualitativas sobre la experiencia del usuario, por ejemplo, el dispositivo y los tipos de conexión, lo que permite profundizar en las experiencias del usuario agrupadas por tecnologías similares. Consulte la [documentación de CrUX](https://developer.chrome.com/docs/crux/methodology/#metrics) para obtener la lista completa de métricas.
+
+Con estos datos, los desarrolladores pueden comprender la amplia distribución de las experiencias de los usuarios del mundo real entre sitios web, segmentos de la web o la web en su conjunto. ¡Este es muy importante! El conjunto de datos del Informe de Chrome UX es el primero de su tipo que permite a los desarrolladores web comparar el rendimiento de sus usuarios reales con el de la competencia y la industria.
+
+## Cómo usarlo
+
+Hay cuatro formas principales de extraer información del Informe Chrome UX, que varían en complejidad. Para un análisis rápido y sencillo del rendimiento del sitio web, las herramientas recomendadas son [Panel de control de CrUX](http://g.co/chromeuxdash) y [PageSpeed Insights](https://pagespeed.web.dev/). [BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report) disminuye la simplicidad del análisis a cambio del poder de la personalización y estadísticas más detalladas. Y la [API](https://developer.chrome.com/docs/crux/api/) permite la integración de datos de alto nivel con otras aplicaciones.
+
+### Panel de control de CrUX
+
+El [Panel de control de CrUX](http://g.co/chromeuxdash) es una herramienta de visualización de datos personalizable del rendimiento histórico de los sitios web integrada en [Looker Studio](https://marketingplatform.google.com/about/data-studio/). Los datos provienen del conjunto de datos de BigQuery y todas las consultas SQL se manejan internamente. El panel muestra la distribución de las experiencias del usuario, según lo capturan las métricas clave de rendimiento, y cómo cambia con el tiempo. También muestra cómo las distribuciones de métricas cualitativas, como el tipo de dispositivo y el tipo de conexión efectiva, cambian con el tiempo. Pruebe la [guía del panel de control de Looker Studio](https://cloud.google.com/looker-studio).
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/) muestra las distribuciones de rendimiento más recientes desglosadas por usuarios de escritorio y móviles. Los datos de rendimiento están disponibles para páginas web individuales (además de orígenes enteros) y están agregados por los 28 días de datos más recientes (a diferencia del mes natural anterior en BigQuery). Utilizar esta herramienta es tan fácil como introducir una URL o un origen en el cuadro de búsqueda de la interfaz web, y los datos de rendimiento del campo se muestran junto con sugerencias prescriptivas para optimizar la página. Pruebe la guía [PageSpeed Insights](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights).
+
+### CrUX en BigQuery
+
+La base de datos CrUX en [BigQuery](https://console.cloud.google.com/bigquery?p=chrome-ux-report), parte de Google Cloud Platform (GCP), con una interfaz web y de línea de comandos, aloja los datos sin procesar que agregan métricas clave de rendimiento de UX para los principales orígenes en la web. Periódicamente se agregan nuevas tablas a la base de datos que cubren el mes calendario anterior. Los desarrolladores pueden crear consultas para extraer el conjunto de datos en busca de información específica. BigQuery requiere conocimientos de SQL y un proyecto de GCP con facturación habilitada para ejecutar las consultas. Esta es una herramienta especialmente útil para usuarios avanzados que requieren acceso de bajo nivel a los datos para crear informes personalizados, evaluaciones comparativas e informes sobre el estado de la web. Pruebe la [guía de BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery).
+
+### API CrUX
+
+La API de CrUX es una interfaz RESTful gratuita para buscar datos de experiencia de usuario a nivel de URL o de origen. Los datos se actualizan diariamente y agregan los datos de los 28 días anteriores, similar a PageSpeed Insights. Puede utilizar esta API para crear sus propias aplicaciones sobre los datos de la experiencia del usuario real en CrUX. Prueba la guía de la [API de CrUX.](https://developer.chrome.com/blog/chrome-ux-report-api)
+
+## Cómo conseguir ayuda
+
+Si necesita algún tipo de apoyo, existen algunos canales para comunicarse con alguien que pueda ayudarlo. [CrUX Google Group](https://groups.google.com/a/chromium.org/forum/#!forum/chrome-ux-report) es un foro público para que los usuarios del conjunto de datos hagan preguntas y compartan análisis. También hay una [etiqueta CrUX para Stack Overflow](https://stackoverflow.com/questions/tagged/chrome-ux-report) si necesita ayuda de programación con el acceso a SQL o API. Y finalmente, puede seguir la cuenta de Twitter [@ChromeUXReport](https://twitter.com/ChromeUXReport) para hacer preguntas y escuchar los anuncios de productos.
+
+## Véalo en acción
+
+Para familiarizarse más con los datos disponibles, siga las guías paso a paso para usar BigQuery, Looker Studio Dashboard y PageSpeed Insights:
+
+- [CrUX: panel de controlde  Looker Studio](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard)
+- [CrUX: PageSpeed Insights](https://developer.chrome.com/blog/chrome-ux-report-pagespeed-insights)
+- [CrUX: BigQuery](https://developer.chrome.com/blog/chrome-ux-report-bigquery)
+- [CrUX: API](https://developer.chrome.com/blog/chrome-ux-report-api)
diff --git a/src/site/content/es/fast/codelab-preload-web-fonts/index.md b/src/site/content/es/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..0275ec70198
--- /dev/null
+++ b/src/site/content/es/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,61 @@
+---
+layout: codelab
+title: Precargue fuentes web para mejorar la velocidad de carga
+authors:
+  - gmimani
+description: |2-
+
+  En este codelab, aprenda cómo mejorar el rendimiento de una página mediante la precarga de fuentes web.
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+Este laboratorio de código le muestra cómo precargar fuentes web usando `rel="preload"` para eliminar cualquier destello de texto sin estilo (FOUT).
+
+## Medición
+
+Primero, mida el rendimiento del sitio web antes de agregar optimizaciones.
+{% Instruction 'preview', 'ol' %}
+{% Instruction 'audit-performance', 'ol' %}
+
+El informe Lighthouse que se genera le mostrará la secuencia de búsqueda de recursos en **Latencia máxima de la ruta crítica**.
+
+{% Img src ="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="Las fuentes web están presentes en la cadena de solicitudes críticas.", width="704", height="198" %}
+
+En la auditoría anterior, las fuentes web forman parte de la cadena de solicitudes críticas y se recuperan en último lugar. La [**cadena de solicitudes críticas**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/) representa el orden de los recursos priorizados y encontrados por el navegador. En esta aplicación, las fuentes web (Pacifico y Pacifico-Bold) se definen utilizando la regla [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) y son el último recurso obtenido por el navegador en la cadena de solicitudes críticas. Normalmente, las fuentes web se cargan de forma diferida, lo que significa que no se cargan hasta que se descargan los recursos críticos (CSS, JS).
+
+Aquí está la secuencia de los recursos obtenidos en la aplicación:
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt ="Las fuentes web se cargan de forma diferida.", width="583", height="256" %}
+
+## Precarga de fuentes web
+
+Para evitar el FOUT, puede precargar las fuentes web que se requieren de inmediato. Agregue el elemento `Link` para esta aplicación al inicio del documento:
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+Los `as="font" type="font/woff2"` dicen al navegador que descargue este recurso como una fuente y ayudan a priorizar la cola de recursos.
+
+El atributo `crossorigin` indica si el recurso debe buscarse con una solicitud CORS, ya que la fuente puede provenir de un dominio diferente. Sin este atributo, el navegador ignora la fuente precargada.
+
+Dado que se usa Pacifico-Bold en el encabezado de la página, agregamos una etiqueta de precarga para recuperarla mucho antes. Precargar la fuente Pacifico.woff2 no tiene importancia porque le da estilo al texto que está después del encabezado.
+
+Vuelva a cargar la aplicación y vuelva a ejecutar lighthouse. Verifique la sección **Latencia máxima de la ruta crítica.**
+
+{% Img src = "image/admin/lC85s7XSc8zEXgtwLsFu.png", alt = "La fuente web Pacifico-Bold está precargada y eliminada de la cadena de solicitudes cricical", width = "645", height = "166", class = "w- captura de pantalla" %}
+
+Observe cómo `Pacifico-Bold.woff2` de la cadena de solicitudes críticas. Se obtiene anteriormente en la aplicación.
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="La fuente web Pacifico-Bold está precargada", width="553", height="254" %}
+
+Con la precarga, el navegador sabe que necesita descargar este archivo antes. Es importante tener en cuenta que si no se utiliza correctamente, la precarga puede perjudicar el rendimiento al realizar solicitudes innecesarias de recursos que no se utilizan.
diff --git a/src/site/content/es/fast/codelab-serve-images-webp/index.md b/src/site/content/es/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..ea75cfa98dc
--- /dev/null
+++ b/src/site/content/es/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,130 @@
+---
+layout: codelab
+title: Creación de imágenes WebP con la línea de comandos
+authors:
+  - katiehempenius
+description: |2
+
+  En este laboratorio de código, aprenda a servir imágenes optimizadas mediante WebP.
+date: 2018-11-05
+glitch: webp-cli
+related_post: serve-images-webp
+tags:
+  - performance
+---
+
+La <a href="https://developers.google.com/speed/webp/docs/precompiled">herramienta de línea de comandos</a> webp ya se ha instalado, por lo que está listo para comenzar. Esta herramienta convierte imágenes JPG, PNG y TIFF a WebP.
+
+## Convertir imágenes a WebP
+
+{% Instruction 'remix', 'ol' %}
+{% Instruction 'console', 'ol' %}
+
+1. Escriba el siguiente comando:
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+Este comando convierte, con una calidad de `50` (`0` es la peor; `100` es la mejor), el archivo `images/flower1.jpg` y lo guarda como `images/flower1.webp`.
+
+{% Aside %} ¿Se pregunta por qué escribe `cwebp` lugar de `webp` ? WebP tiene dos comandos separados para codificar y decodificar imágenes WebP. `cwebp` codifica imágenes en WebP, mientras que `dwebp` decodifica imágenes de WebP. {% endAside %}
+
+Después de hacer esto, debería ver algo como esto en la consola:
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+Acaba de convertir correctamente la imagen a WebP.
+
+Sin embargo, ejecutar el comando `cwebp` una imagen a la vez de esta forma, para convertir muchas imágenes, tomaría mucho tiempo. Si necesita hacer esto, puede usar un script en su lugar.
+
+- Ejecute este script en la consola (no olvide las comillas invertidas):
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+Este script convierte, con una calidad de `50`, todos los archivos del directorio `images/` y los guarda como un archivo nuevo (mismo nombre de archivo, pero con una extensión de archivo `.webp`) en el mismo directorio.
+
+### ✔︎ Revisión
+
+Ahora debería tener 6 archivos en su directorio `images/`
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+A continuación, actualice este Glitch para ofrecer imágenes WebP a los navegadores que lo admitan.
+
+## Añadir imágenes WebP usando la etiqueta `<picture>`
+
+La etiqueta `<picture>` permite servir WebP a los navegadores más nuevos, mientras mantiene la compatibilidad con los navegadores más antiguos.
+
+- En `index.html` reemplace `<img src="images/flower1.jpg"/>` con el siguiente HTML:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- A continuación, reemplace las etiquetas `<img>` por `flower2.jpg` y `flower3.png` con etiqueta `<picture>`.
+
+### ✔︎ Revisión
+
+Una vez completado, las etiquetas `<picture>` en `index.html` deberían verse así:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+A continuación, use Lighthouse para verificar que haya implementado correctamente las imágenes WebP en el sitio.
+
+## Verificar el uso de WebP con Lighthouse
+
+La auditoría de rendimiento de Lighthouse **Servir imágenes en formatos de próxima generación**, puede permitirle saber si todas las imágenes de su sitio utilizan formatos de próxima generación como WebP.
+
+{% Instruction 'preview', 'ol' %}
+{% Instruction 'audit-performance', 'ol' %}
+
+1. Verifique que se apruebe la auditoría de **Servir imágenes en formatos de próxima generación.**
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Auditoría 'Servir imágenes en formatos de próxima generación' de Lighthouse aprobada", width="701", height="651" %}
+
+¡Éxito! Ahora está sirviendo imágenes WebP en su sitio.
diff --git a/src/site/content/es/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/es/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..504802be34c
--- /dev/null
+++ b/src/site/content/es/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,75 @@
+---
+layout: codelab
+title: Carga diferida de imágenes fuera de pantalla con lazysizes
+authors:
+  - katiehempenius
+description: En este codelab, aprenda a usar lazysizes para cargar solo imágenes que están en la ventana gráfica actual.
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+Se llama carga diferida al enfoque de esperar para cargar los recursos hasta que se necesiten, en lugar de cargarlos por adelantado. Esto puede mejorar el rendimiento al reducir la cantidad de recursos que deben cargarse y analizarse en la carga inicial de la página.
+
+Las imágenes que están fuera de pantalla durante la carga inicial de la página son candidatas ideales para esta técnica. Lo mejor de todo es que [lazysizes](https://github.com/aFarkas/lazysizes) hace que sea una estrategia muy simple de implementar.
+
+## Agregue el script lazysizes a la página
+
+{% Instruction 'remix' %}
+
+`lazysizes.min.js` ya ha sido descargado y agregado a este Glitch. Para incluirlo en la página:
+
+- Agregue la siguiente etiqueta `<script>` a  `index.html` :
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Images End -->
+</body>
+```
+
+{% Aside %} El archivo [lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js) ya se agregó a este proyecto, por lo que no es necesario agregarlo por separado. El script que acaba de agregar puede utilizar este script. {% endAside %}
+
+lazysizes cargará imágenes de forma inteligente a medida que el usuario se desplaza por la página y priorizará las imágenes que el usuario encontrará pronto.
+
+## Indique qué imágenes cargar de forma diferida
+
+- Agregue la clase `lazyload` a las imágenes que deberían cargarse de forma diferida. Además, cambie el atributo `src` por `data-src` .
+
+Por ejemplo, los cambios para `flower3.png` se verían así:
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+Para este ejemplo, pruebe cargar de forma diferida `flower3.png`, `flower4.jpg` y `flower5.jpg`.
+
+{% Aside %} Quizás se pregunte por qué es necesario cambiar el atributo `src` por `data-src` . Si no se cambia este atributo, todas las imágenes se cargarán inmediatamente en lugar de cargarse de forma diferida. `data-src` no es un atributo que el navegador reconoce, así que, cuando encuentra una etiqueta de imagen con este atributo, no carga la imagen. En este caso, eso es algo bueno, porque permite que el script lazysizes decida cuándo se debe cargar la imagen, en lugar del navegador. {% endAside %}
+
+## Véalo en acción
+
+¡Eso es todo! Para ver estos cambios en acción, siga estos pasos:
+
+{% Instruction 'preview' %}
+
+- Abra la consola y busque las imágenes que se acaban de agregar. Sus clases deberían cambiar de `lazyload` a `lazyloaded` a medida que se desplaza hacia abajo en la página.
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="Imágenes que se cargan de forma diferida", width="428", height="252" %}
+
+- Observe el panel de red para ver que los archivos de imagen se cargan individualmente a medida que se desplaza hacia abajo en la página.
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="Imágenes que se cargan de forma diferida", width="418", height="233" %}
+
+## Verifique usando Lighthouse
+
+Por último, es una buena idea utilizar Lighthouse para verificar estos cambios. La auditoría de rendimiento "Aplazar imágenes fuera de pantalla" de Lighthouse indicará si ha olvidado agregar la carga diferida a las imágenes fuera de la pantalla.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. Verifique que se haya aprobado la auditoría de **aplazar imágenes fuera de pantalla.**
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Pasar la auditoría 'Codificar imágenes de manera eficiente' en Lighthouse", width="800", height="774" %}
+
+¡Perfecto! Ha utilizado lazysizes para cargar de forma diferida las imágenes en su página.
diff --git a/src/site/content/es/fast/content-delivery-networks/index.md b/src/site/content/es/fast/content-delivery-networks/index.md
new file mode 100644
index 00000000000..7e377caab9c
--- /dev/null
+++ b/src/site/content/es/fast/content-delivery-networks/index.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Redes de entrega de contenido (CDN)
+authors:
+  - katiehempenius
+description: Este artículo proporciona una descripción general completa de las redes de entrega de contenido (CDN). Además, explica cómo elegir, configurar y optimizar la instalación de una CDN.
+subhead: Mejore el rendimiento mediante el uso de una red de entrega de contenido.
+date: 2020-09-22
+hero: image/admin/22YYRBuQy8gvQhgllLKq.jpg
+tags:
+  - blog
+  - performance
+  - network
+---
+
+Las redes de entrega de contenido (CDN) mejoran el rendimiento de los sitios mediante el uso de una red distribuida de servidores para entregar recursos a los usuarios. Debido a que las CDN reducen la carga del servidor, reducen los costos del servidor y son adecuadas para manejar los picos de tráfico. Este artículo analiza cómo funcionan las CDN y proporciona una guía independiente de la plataforma para elegir, configurar y optimizar la instalación de una CDN.
+
+## Descripción general
+
+Una red de entrega de contenido consta de una red de servidores optimizados para entregar contenido rápidamente a los usuarios. Aunque podría decirse que las CDN son más conocidas por ofrecer contenido almacenado en caché, también pueden mejorar la entrega de contenido que no se puede almacenar en caché. En términos generales, cuanto más de su sitio entregue su CDN, mejor.
+
+A un alto nivel, los beneficios de rendimiento de las CDN se derivan de un puñado de principios: los servidores CDN están ubicados más cerca de los usuarios que los [servidores de origen](https://en.wikipedia.org/wiki/Upstream_server) y, por lo tanto, tienen una latencia  más pequeña de [tiempo de ida y vuelta (RTT);](https://en.wikipedia.org/wiki/Round-trip_delay) las optimizaciones de red permiten que las CDN entreguen contenido más rápidamente que si el contenido se cargara "directamente" desde el servidor de origen; por último, las cachés de CDN eliminan la necesidad de una solicitud para viajar al servidor de origen.
+
+{% Aside 'key-term' %} **Servidor de origen** se refiere al servidor del que una CDN recupera contenido. {% endAside %}
+
+### Entrega de recursos
+
+Aunque quizá parezca poco intuitivo, usar una CDN para suministrar recursos (incluso los que no se pueden almacenar en caché) generalmente será más rápido que hacer que el usuario cargue el recurso "directamente" desde sus servidores.
+
+Cuando se utiliza una CDN para entregar recursos desde el origen, se establece una nueva conexión entre el cliente y un servidor CDN cercano. El resto del recorrido (en otras palabras, la transferencia de datos entre el servidor CDN y el origen) ocurre a través de la red CDN, lo que a menudo incluye conexiones persistentes existentes con el origen. Los beneficios de esto son dobles: terminar la nueva conexión lo más cerca posible del usuario elimina los costos innecesarios de configuración de la conexión (establecer una nueva conexión es costoso y requiere múltiples recorridos de ida y vuelta). El uso de una conexión precalentada permite que los datos se transfieran inmediatamente al máximo rendimiento posible.
+
+<figure>{% Img src="image/admin/M9kzM7J7FenUyO7E9MF0.png", alt="Comparación de la configuración de la conexión con y sin CDN", width="800", height="512" %}</figure>
+
+Algunas CDN mejoran esto aún más al enrutar el tráfico hacia el origen a través de múltiples servidores CDN distribuidos por Internet. Las conexiones entre los servidores CDN ocurren a través de rutas confiables y altamente optimizadas, en lugar de rutas determinadas por el [Protocolo de puerta de enlace fronteriza (BGP)](https://en.wikipedia.org/wiki/Border_Gateway_Protocol). Aunque BGP es el protocolo de enrutamiento de facto de Internet, sus decisiones de enrutamiento no siempre están orientadas al rendimiento. Por lo tanto, es probable que las rutas determinadas por BGP tengan un rendimiento menor que las rutas finamente ajustadas entre servidores CDN.
+
+<figure>{% Img src="image/admin/ZLMPFySQgBkpWvgujuJP.png", alt="Comparación de la configuración de la conexión con y sin CDN", width="800", height="449" %}</figure>
+
+### Almacenamiento en caché
+
+El almacenamiento en caché de los recursos en los servidores de una CDN elimina la necesidad de que una solicitud recorra todo el camino hasta el origen para ser atendida. Como resultado, el recurso se entrega más rápidamente; esto también reduce la carga en el servidor de origen.
+
+#### Agregar recursos a la caché
+
+El método más comúnmente utilizado para poblar las cachés de CDN es hacer que la CDN "extraiga" los recursos necesarios, esto se conoce como "extracción de origen". La primera vez que se solicita un recurso en particular desde la caché, la CDN se lo solicitará al servidor de origen y almacenará la respuesta en la caché. De esta manera, el contenido de la caché se acumula con el tiempo a medida que se solicitan recursos adicionales no almacenados en caché.
+
+#### Eliminar recursos de la caché
+
+Los CDN utilizan el vaciado de la caché para eliminar periódicamente de la caché los recursos no tan útiles. Además, los propietarios de sitios pueden utilizar la depuración para eliminar recursos de forma explícita.
+
+- **Desalojo de la caché**
+
+    Las cachés tienen una capacidad de almacenamiento finita. Cuando una caché se acerca a su capacidad, hace espacio para nuevos recursos al eliminar los recursos a los que no se ha accedido recientemente o que ocupan mucho espacio. Este proceso se conoce como desalojo de la caché. El desalojo de un recurso de una caché no significa necesariamente que se haya eliminado de todas las cachés en una red CDN.
+
+- **Depuración**
+
+    La depuración (también conocida como "invalidación de caché") es un mecanismo para eliminar un recurso de las cachés de una CDN sin tener que esperar a que expire o que se desaloje. Normalmente se ejecuta a través de una API. La depuración es fundamental en situaciones en las que es necesario retirar el contenido (por ejemplo, corregir errores tipográficos, errores de precios o artículos de noticias incorrectos). Además de eso, también puede jugar un papel crucial en la estrategia de almacenamiento en caché de un sitio.
+
+    Si una CDN admite una depuración casi instantánea, la depuración se puede utilizar como un mecanismo para administrar el almacenamiento en caché de contenido dinámico: el contenido dinámico se almacena en caché mediante un TTL largo y luego se depura el recurso cada vez que se actualiza. De esta forma, es posible maximizar la duración del almacenamiento en caché de un recurso dinámico, a pesar de no saber de antemano cuándo cambiará el recurso. Esta técnica a veces se denomina "almacenamiento en caché hasta que se le indique".
+
+    Cuando la depuración se usa a escala, generalmente se usa junto con un concepto conocido como "etiquetas de caché" o "claves de caché sustitutas". Este mecanismo permite que los propietarios de sitios asocien uno o más identificadores adicionales (a veces denominados "etiquetas") con un recurso almacenado en caché. Estas etiquetas se pueden utilizar para realizar depuraciones muy granulares. Por ejemplo, puede agregar una etiqueta de "pie de página" a todos los recursos (por ejemplo, `/about`, `/blog`) que contienen el pie de página de su sitio. Cuando se actualice el pie de página, indíquele a su CDN que depure todos los recursos asociados con la etiqueta "pie de página".
+
+#### Recursos almacenables en caché
+
+Si un recurso debe almacenarse en caché, y cómo debe hacerse, depende de si es público o privado; estático o dinámico.
+
+##### Recursos públicos y privados
+
+- **Recursos privados**
+
+    Los recursos privados contienen datos destinados a un solo usuario y, por lo tanto, una CDN no debe almacenarlos en caché. Los recursos privados se indican mediante el encabezado `Cache-Control: private`.
+
+- **Recursos públicos**
+
+    Los recursos públicos no contienen información específica del usuario y, por lo tanto, una CDN los puede almacenar en caché. Un recurso puede ser considerado como almacenable en caché por una CDN si no tiene un encabezado `Cache-Control: no-store` o `Cache-Control: private`. El tiempo que se puede almacenar en caché un recurso público depende de la frecuencia con la que cambia el activo.
+
+##### Contenido dinámico y estático
+
+- **Contenido dinámico**
+
+    El contenido dinámico es el contenido que cambia con frecuencia. Una respuesta de API y una página de inicio de una tienda son ejemplos de este tipo de contenido. Sin embargo, el hecho de que este contenido cambie con frecuencia no impide necesariamente que se almacene en caché. Durante períodos de mucho tráfico, almacenar en caché estas respuestas durante períodos de tiempo muy cortos (por ejemplo, 5 segundos) puede reducir significativamente la carga en el servidor de origen, al tiempo que tiene un impacto mínimo sobre la actualización de los datos.
+
+- **Contenido estático**
+
+    El contenido estático cambia con poca frecuencia, si es que lo hace alguna vez. Las imágenes, los videos y las bibliotecas versionadas suelen ser ejemplos de este tipo de contenido. Debido a que el contenido estático no cambia, debe almacenarse en caché con un período de vida prolongado (TTL), por ejemplo, 6 meses o 1 año.
+
+## Elección de una CDN
+
+El rendimiento suele ser una de las principales consideraciones al elegir una CDN. Sin embargo, las otras características que ofrece una CDN (por ejemplo, características de seguridad y análisis), así como también es importante tener en cuenta los precios, el soporte y la incorporación de una CDN al elegir una CDN.
+
+### Rendimiento
+
+En un nivel alto, la estrategia de rendimiento de una CDN se puede pensar en términos de la compensación entre minimizar la latencia y maximizar la tasa de aciertos de caché. Las CDN con muchos puntos de presencia (PoP) pueden ofrecer una latencia más baja, pero pueden experimentar índices de aciertos de caché más bajos como resultado de la división del tráfico en más cachés. Por el contrario, las CDN con menos PoP pueden estar ubicadas geográficamente más lejos de los usuarios, pero pueden lograr índices de aciertos de caché más altos.
+
+Como resultado de esta compensación, algunas CDN utilizan un enfoque escalonado para el almacenamiento en caché: los PoP ubicados cerca de los usuarios (también conocidos como "cachés perimetrales") se complementan con PoP centrales que tienen índices de aciertos de caché más altos. Cuando una caché perimetral no puede encontrar un recurso, buscará el recurso en un PoP central. Este enfoque intercambia una latencia ligeramente mayor por una mayor probabilidad de que el recurso se pueda servir desde una caché CDN, aunque no necesariamente una caché perimetral.
+
+La compensación entre minimizar la latencia y minimizar la tasa de aciertos de caché es un espectro. Ningún enfoque en particular es universalmente mejor; sin embargo, en función de la naturaleza de su sitio y su base de usuarios, puede encontrar que uno de estos enfoques ofrece un rendimiento significativamente mejor que el otro.
+
+También vale la pena señalar que el rendimiento de una CDN puede variar significativamente según la geografía, la hora del día e incluso los eventos actuales. Aunque siempre es una buena idea hacer su propia investigación sobre el rendimiento de una CDN, puede ser difícil predecir el rendimiento exacto que obtendrá de una CDN.
+
+### Características adicionales
+
+Las CDN suelen ofrecer una amplia variedad de funciones además de su oferta principal de CDN. Las características que se ofrecen comúnmente incluyen: balanceo de carga, optimización de imágenes, transmisión de video, computación en el perímetro y productos de seguridad.
+
+## Cómo instalar y configurar una CDN
+
+Idealmente, debería utilizar una CDN para suministrar los contenidos de todo su sitio. En un nivel alto, el proceso de configuración para esto consiste en registrarse con un proveedor de CDN y luego actualizar su registro DNS CNAME para apuntar al proveedor de CDN. Por ejemplo, el registro CNAME de `www.example.com` podría apuntar a `example.my-cdn.com`. Como resultado de este cambio de DNS, el tráfico a su sitio se enrutará a través de la CDN.
+
+Si usar una CDN para suministrar todos los recursos no es una opción, puede configurar una CDN para que suministre un subconjunto de recursos, por ejemplo, solo recursos estáticos. Puede hacer esto si crea un registro CNAME separado que solo se usará para los recursos que la CDN debería suministrar. Por ejemplo, puede crear un registro CNAME `static.example.com` que apunte a `example.my-cdn.com`. También sería necesario que volviera a escribir las URL de los recursos que la CDN está suministrando para que apunten al subdominio `static.example.com`  que creó.
+
+Aunque su CDN se configurará en este punto, es probable que haya ineficiencias en su configuración. Las siguientes dos secciones de este artículo explicarán cómo aprovechar al máximo su CDN al aumentar la tasa de aciertos de caché y habilitar funciones de rendimiento.
+
+## Mejora de la tasa de aciertos de caché
+
+Una configuración de CDN eficaz suministrará tantos recursos como sea posible desde la caché. Esto se mide comúnmente por la tasa de aciertos de caché (CHR). La tasa de aciertos de caché se define como el número de aciertos de caché dividido por el número de solicitudes totales durante un intervalo de tiempo determinado.
+
+Una caché recién inicializada tendrá una CHR de 0, pero esto aumenta a medida que la caché se llena de recursos. Una CHR del 90% es un buen objetivo para la mayoría de los sitios. Su proveedor de CDN debe proporcionarle análisis e informes sobre su CHR.
+
+Al optimizar la CHR, lo primero que debe verificar es que todos los recursos que se pueden almacenar en caché se almacenan en la caché y se almacenan en ella durante el período de tiempo correcto. Esta es una evaluación simple que se debe realizar en todos los sitios.
+
+El siguiente nivel de optimización de CHR, en términos generales, es ajustar la configuración de su CDN para asegurar que las respuestas del servidor lógicamente equivalentes no se almacenen en caché por separado. Esta es una ineficiencia común que se produce debido al impacto de factores como los parámetros de consulta, las cookies y los encabezados de solicitud en el almacenamiento en caché.
+
+### Auditoria inicial
+
+La mayoría de las CDN proporcionarán análisis de caché. Además, herramientas como [WebPageTest](https://webpagetest.org/) y [Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/) también se pueden utilizar para verificar rápidamente que todos los recursos estáticos de una página se almacenen en caché durante el período de tiempo correcto. Esto se logra al verificar los encabezados de caché HTTP de cada recurso. El almacenamiento en caché de un recurso mediante el uso del tiempo de vida (TTL) máximo apropiado evitará búsquedas de origen innecesarias en el futuro y, por lo tanto, aumentará la CHR.
+
+Como mínimo, uno de estos encabezados generalmente debe configurarse para que una CDE almacene un recurso en caché:
+
+- `Cache-Control: max-age=`
+- `Cache-Control: s-maxage=`
+- `Expires`
+
+Además, aunque no afecta si un recurso es almacenado en caché por una CDN o cómo se almacena, es una buena práctica establecer también la directiva [`Cache-Control: immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading). `Cache-Control: immutable` indica que un recurso "no se actualizará durante su vida útil". Como resultado, el navegador no revalidará el recurso cuando se suministre desde la caché del navegador, lo que elimina así una solicitud innecesaria del servidor. Desafortunadamente, esta directiva solo es [compatible](https://caniuse.com/#feat=mdn-http_headers_cache-control_immutable) con Firefox y Safari; no es compatible con los navegadores basados en Chromium. Este [problema](https://bugs.chromium.org/p/chromium/issues/detail?id=611416) rastrea la compatibilidad de Chromium con `Cache-Control: immutable`. Destacar este problema puede ayudar a fomentar el soporte para esta función.
+
+Para obtener una explicación más detallada del almacenamiento en caché HTTP, consulte [Evitar solicitudes de red innecesarias con la caché HTTP](/http-cache/) .
+
+### Ajustes de precisión
+
+Una explicación ligeramente simplificada de cómo funcionan los cachés de CDN es que la URL de un recurso se utiliza como clave para almacenar y recuperar el recurso desde la caché. En la práctica, esto sigue siendo abrumadoramente cierto, pero se complica un poco por el impacto de cosas como los encabezados de solicitud y los parámetros de consulta. Como resultado, reescribir las URL de solicitud es una técnica importante tanto para maximizar la CHR como para garantizar que se les brinde el contenido correcto a los usuarios. Una instancia de CDN configurada correctamente logra el equilibrio correcto entre el almacenamiento en caché demasiado granular (lo que perjudica a la CHR) y el almacenamiento en caché insuficientemente granular (lo que da como resultado que se les brinden respuestas incorrectas a los usuarios).
+
+#### Parámetros de consulta
+
+De forma predeterminada, las CDN tienen en cuenta los parámetros de consulta al almacenar un recurso en caché. Sin embargo, pequeños ajustes en el manejo de los parámetros de consulta pueden tener un impacto significativo sobre la CHR. Por ejemplo:
+
+- **Parámetros de consulta innecesarios**
+
+    De forma predeterminada, una CDN almacenaría en caché `example.com/blog` y `example.com/blog?referral_id=2zjk` por separado, aunque probablemente sean el mismo recurso subyacente. Esto se soluciona si se ajusta la configuración de una CDN para ignorar el parámetro de consulta de `referral\_id`.
+
+- **Orden de los parámetros de consulta**
+
+    Una CDN almacenará en caché `example.com/blog?id=123&query=dogs` separado de `example.com/blog?query=dogs&id=123`. Para la mayoría de los sitios, el orden de los parámetros de consulta no importa, por lo que configurar la CDN para ordenar los parámetros de consulta (para normalizar así la URL utilizada para almacenar en caché la respuesta del servidor) aumentará la CHR.
+
+#### Vary
+
+El [encabezado de respuesta Vary](https://developer.mozilla.org/docs/Web/HTTP/Headers/Vary) les informa a las cachés que la respuesta del servidor correspondiente a una URL en particular puede variar según los encabezados establecidos en la solicitud (por ejemplo, los encabezados de solicitud [Accept-Language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) o [Accept-Encoding](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Encoding)). Como resultado, le indica a una CDN que almacene en caché estas respuestas por separado. El encabezado Vary no es ampliamente compatible con las CDN y puede provocar que un recurso que de otro modo se pueda almacenar en caché no se suministre desde una caché.
+
+Aunque el encabezado Vary puede ser una herramienta útil, el uso inadecuado perjudica a la CHR. Además, si usa `Vary`, normalizar los encabezados de solicitud ayudará a mejorar la CHR. Por ejemplo, sin la normalización, los encabezados de solicitud `Accept-Language: en-US` y `Accept-Language: en-US,en;q=0.9` darían como resultado dos entradas de caché separadas, aunque su contenido probablemente sería idéntico.
+
+#### Cookies
+
+Las cookies se establecen en las solicitudes mediante el encabezado [`Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cookie), se establecen en las respuestas mediante el encabezado `Set-Cookie`. Debe evitarse el uso innecesario del encabezado <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie" data-md-type="link">`Set-Cookie`</a> dado que las cachés normalmente no almacenarán en caché las respuestas del servidor que contengan este encabezado.
+
+## Características de rendimiento
+
+En esta sección, se analizan las características de rendimiento que suelen ofrecer las CDN como parte de su oferta principal de productos. Muchos sitios se olvidan de habilitar estas funciones, por lo que pierden ventajas fáciles de rendimiento.
+
+### Compresión
+
+Todas las respuestas basadas en texto deben [comprimirse](/reduce-network-payloads-using-text-compression/#data-compression) con gzip o Brotli. Si tiene la opción, elija Brotli en lugar de gzip. Brotli es un algoritmo de compresión más nuevo y, en comparación con gzip, puede lograr relaciones de compresión más altas.
+
+Hay dos tipos de compatibilidad con CDN para la compresión Brotli: "Brotli desde el origen" y "compresión Brotli automática".
+
+#### Brotli desde el origen
+
+Brotli desde el origen es cuando una CDN suministra recursos que el origen comprimió mediante Brotli. Aunque esto puede parecer una característica que todos las CDN deberían admitir de forma inmediata, requiere que una CDN pueda almacenar en caché múltiples versiones (en otras palabras, versiones comprimidas con gzip y comprimidas con Brotli) del recurso correspondiente a una URL determinada.
+
+#### Compresión Brotli automática
+
+La compresión Brotli automática se produce cuando la CDN comprime los recursos con Brotli. Las CDN pueden comprimir tanto los recursos que se pueden almacenar en caché como los que no se pueden almacenar en caché.
+
+La primera vez que se solicita un recurso, se suministra con una compresión "suficientemente buena", por ejemplo, Brotli-5. Este tipo de compresión se aplica tanto a los recursos que se pueden almacenar en caché como a los que no se pueden almacenar en caché.
+
+Mientras tanto, si un recurso se puede almacenar en caché, la CDN utilizará el procesamiento fuera de línea para comprimir el recurso a un nivel de compresión más potente pero mucho más lento, por ejemplo, Brotli-11. Una vez que se completa esta compresión, la versión más comprimida se almacenará en caché y se utilizará para solicitudes posteriores.
+
+#### Prácticas recomendadas de compresión
+
+Los sitios que quieran maximizar el rendimiento deben aplicar la compresión Brotli tanto en su servidor de origen como en su CDN. La compresión Brotli en el origen minimiza el tamaño de transferencia de los recursos que no se pueden suministrar desde la caché. Para evitar retrasos en el procesamiento de las solicitudes, el origen debe comprimir los recursos dinámicos mediante un nivel de compresión bastante conservador, por ejemplo, Brotli-4. Los recursos estáticos se pueden comprimir mediante Brotli-11. Si un origen no es compatible con Brotli, se puede utilizar gzip-6 para comprimir recursos dinámicos; gzip-9 se puede utilizar para comprimir recursos estáticos.
+
+### TLS 1.3
+
+TLS 1.3 es la versión más reciente de [Transport Layer Security (seguridad de capa de transporte) (TLS)](https://en.wikipedia.org/wiki/Transport_Layer_Security), el protocolo criptográfico utilizado por [HTTPS](https://en.wikipedia.org/wiki/HTTPS). TLS 1.3 proporciona una mejor privacidad y rendimiento en comparación con TLS 1.2.
+
+TLS 1.3 acorta el protocolo de enlace TLS de dos recorridos de ida y vuelta a uno. Para las conexiones que utilizan HTTP/1 o HTTP/2, acortar el protocolo de enlace TLS a un recorrido de ida y vuelta reduce efectivamente el tiempo de configuración de la conexión en un 33%.
+
+<figure>{% Img src="image/admin/FnCSj1W23jXaiOWCp0Bw.png", alt="Comparación de los protocolos de acuerdo TLS 1.2 y TLS 1.3", width="800", height="448" %}</figure>
+
+### HTTP/2 y HTTP/3
+
+HTTP/2 y HTTP/3 proporcionan ventajas de rendimiento sobre HTTP/1. De los dos, HTTP/3 ofrece mayores beneficios *potenciales* de rendimiento. HTTP/3 aún no está completamente estandarizado, pero será ampliamente [compatible](https://caniuse.com/#feat=http3) una vez que esto suceda.
+
+#### HTTP/2
+
+Si su CDN aún no ha habilitado [HTTP/2](https://almanac.httparchive.org/en/2019/http2) de forma predeterminada, debería considerar activarlo. HTTP/2 proporciona múltiples [beneficios de rendimiento](https://hpbn.co/http2) sobre HTTP/1 y es [compatible](https://caniuse.com/#feat=http2) con los principales navegadores. Las características de rendimiento de HTTP/2 incluyen: [multiplexación](https://hpbn.co/http2/#request-and-response-multiplexing), [priorización de transmisión](https://hpbn.co/http2/#stream-prioritization), [inserción de servidor](https://almanac.httparchive.org/en/2019/http2#http2-push) y [compresión de encabezado](https://tools.ietf.org/html/rfc7541/).
+
+- **Multiplexación**
+
+    La multiplexación es posiblemente la característica más importante de HTTP/2. La multiplexación permite que una sola conexión TCP atienda a varios pares de solicitud-respuesta al mismo tiempo. Esto elimina la sobrecarga de configuraciones de conexión innecesarias. Dado que la cantidad de conexiones que un navegador puede tener abiertas en un momento determinado es limitada, esto también implica que el navegador ahora puede solicitar más recursos de una página en paralelo. En teoría, la multiplexación elimina la necesidad de optimizaciones HTTP/1 como la concatenación y las hojas de sprites. Sin embargo, en la práctica, estas técnicas seguirán siendo relevantes dado que los archivos más grandes se comprimen mejor.
+
+- **Priorización de los flujos**
+
+    La multiplexación permite múltiples flujos concurrentes; [La priorización de los flujos](https://httpwg.org/specs/rfc7540.html#StreamPriority) proporciona una interfaz para comunicar la prioridad relativa de cada uno de estos flujos. Esto ayuda al servidor a enviar primero los recursos más importantes, incluso si no se solicitaron primero.
+
+el navegador expresa la priorización de los flujos a través de un árbol de dependencias y es simplemente una declaración de *preferencia*: en otras palabras, el servidor no está obligado a cumplir (ni siquiera a considerar) las prioridades proporcionadas por el navegador. La priorización de flujos se vuelve más efectiva cuando se suministra más de un sitio a través de una CDN.
+
+Las implementaciones CDN de la priorización de recursos HTTP/2 varían enormemente. Para identificar si su CDN es compatible completa y correctamente con la priorización de recursos HTTP/2, consulte [¿Ya es rápido HTTP/2?](https://ishttp2fastyet.com/).
+
+Aunque cambiar su instancia de CDN a HTTP/2 es en gran parte una cuestión de activar un interruptor, es importante probar minuciosamente este cambio antes de habilitarlo en producción. HTTP/1 y HTTP/2 usan las mismas convenciones para los encabezados de solicitud y respuesta, pero HTTP/2 es mucho menos indulgente cuando estas convenciones no se cumplen. Como resultado, las prácticas que se alejan de la especificación, como la inclusión de caracteres no ASCII o mayúsculas en los encabezados, pueden comenzar a causar errores una vez que se habilita HTTP/2. Si esto ocurre, los intentos de un navegador de descargar el recurso fallarán. El intento fallido de descarga será visible en la pestaña "Red" de DevTools. Además, se mostrará el mensaje de error "ERR_HTTP2_PROTOCOL_ERROR" en la consola.
+
+#### HTTP/3
+
+[HTTP/3](https://en.wikipedia.org/wiki/HTTP/3) es el sucesor de [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2). A partir de septiembre de 2020, todos los navegadores principales tienen [soporte](https://caniuse.com/#feat=http3) experimental para HTTP/3 y algunas CDN lo admiten. El rendimiento es el principal beneficio de HTTP/3 sobre HTTP/2. Específicamente, HTTP/3 elimina el bloqueo de cabecera en el nivel de la conexión y reduce el tiempo de configuración de la conexión.
+
+- **Eliminación del bloqueo de cabecera**
+
+    HTTP/2 introdujo la multiplexación, una función que permite utilizar una sola conexión para transmitir múltiples flujos de datos simultáneamente. Sin embargo, con HTTP/2, un solo paquete descartado bloquea todos los flujos en una conexión (un fenómeno conocido como bloqueo de cabecera de línea). Con HTTP/3, un paquete descartado solo bloquea un único flujo. Esta mejora es en gran parte el resultado del uso de [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol) por parte de HTTP/3 (HTTP/3 usa UDP a través de [QUIC](https://en.wikipedia.org/wiki/QUIC)) en lugar de [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol). Esto hace que HTTP/3 sea particularmente útil para la transferencia de datos a través de redes congestionadas o con pérdidas.
+
+<figure>{% Img src="image/admin/B7YKfqGG4eS2toSoTDdS.png", alt="Diagrama que muestra las diferencias en la transmisión de datos entre HTTP/1, HTTP/2 y HTTP/3", width="800", height="449" %}</figure>
+
+- **Reducción del tiempo de configuración de la conexión**
+
+    HTTP/3 usa TLS 1.3 y, por lo tanto, comparte sus beneficios de rendimiento: establecer una nueva conexión solo requiere un único recorrido de ida y vuelta y reanudar una conexión existente no requiere recorridos de ida y vuelta.
+
+<figure>{% Img src="image/admin/7ffDEjblsisTNsfkynt6.png", alt="Comparación de la reanudación de la conexión entre TLS 1.2, TLS 1.3, TLS 1.3 0-RTT y HTTP/3", width="800", height=" 400 " %}</figure>
+
+HTTP/3 tendrá el mayor impacto en los usuarios con conexiones de red deficientes: no solo porque HTTP/3 maneja la pérdida de paquetes mejor que sus predecesores, sino también porque el ahorro de tiempo absoluto resultante de una configuración de conexión 0-RTT o 1-RTT será mayor en redes con alta latencia.
+
+### Optimización de imagen
+
+Los servicios de optimización de imágenes de CDN generalmente se enfocan en optimizaciones de imágenes que se pueden aplicar automáticamente para reducir el tamaño de las transferencia de imágenes. Por ejemplo: eliminar datos [EXIF](https://en.wikipedia.org/wiki/Exif), aplicar compresión sin pérdida y convertir imágenes a formatos de archivo más nuevos (por ejemplo, WebP). Las imágenes constituyen aproximadamente 50% de los bytes de transferencia en una página web mediana, por lo que la optimización de imágenes puede reducir significativamente el tamaño de la página.
+
+### Minificación
+
+La [minificación](/reduce-network-payloads-using-text-compression/#minification) elimina los caracteres innecesarios de JavaScript, CSS y HTML. Es preferible realizar la minificación en el servidor de origen, en lugar de en la CDN. Los propietarios de sitios tienen más contexto sobre el código que se minificará y, por lo tanto, a menudo pueden utilizar técnicas de minificación más agresivas que las empleadas por las CDN. Sin embargo, si la minificación del código en el origen no es una opción, la minificación por CDN es una buena alternativa.
+
+## Conclusión
+
+- **Use una CDN:** las CDN proveen recursos rápidamente, reducen la carga en el servidor de origen y son útiles para lidiar con picos de tráfico.
+- **Almacene el contenido en caché de la manera más agresiva posible:** tanto el contenido estático como el dinámico pueden y deben almacenarse en caché, aunque con diferentes duraciones. Audite periódicamente su sitio para asegurar que está almacenando el contenido en caché de manera óptima.
+- **Habilite las funciones de rendimiento de CDN:** las funciones como Brotli, TLS 1.3, HTTP/2 y HTTP/3 mejoran aún más el rendimiento.
diff --git a/src/site/content/es/fast/cookie-notice-best-practices/index.md b/src/site/content/es/fast/cookie-notice-best-practices/index.md
new file mode 100644
index 00000000000..327fc8a3d3b
--- /dev/null
+++ b/src/site/content/es/fast/cookie-notice-best-practices/index.md
@@ -0,0 +1,235 @@
+---
+layout: post
+title: Prácticas recomendadas para los avisos de cookies
+subhead: Optimizar los avisos de cookies para mejorar el rendimiento y la facilidad de uso.
+authors:
+  - katiehempenius
+date: 2021-03-30
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/V8rNgYUkkAWET3EkBL6H.png
+alt: Imagen de los avisos de cookies.
+description: Aprenda cómo los avisos de cookies afectan al rendimiento, a la medición del rendimiento y a la UX.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+En este artículo se analiza cómo los avisos de cookies pueden afectar al rendimiento, a la medición del rendimiento y a la experiencia del usuario.
+
+## Rendimiento
+
+Los avisos de cookies pueden tener un impacto significativo en el rendimiento de la página debido a que normalmente se cargan al principio del proceso de carga de la página, se muestran a todos los usuarios y potencialmente pueden influir para cargar anuncios y otros contenidos de la página.
+
+Así es como los avisos de cookies pueden afectar a las métricas de Web Vitals:
+
+- **Largest Contentful Paint: Despliegue del contenido más extenso (LCP):** La mayor parte de la información sobre el consentimiento de los avisos de las cookies es bastante pequeña y, por lo tanto, no suele contener el elemento LCP de una página. Sin embargo, esto puede ocurrir, especialmente en los dispositivos móviles. En los dispositivos móviles, un aviso de cookies normalmente ocupa una mayor parte de la pantalla. Esto generalmente ocurre cuando un aviso de cookies contiene un gran bloque de texto (los bloques de texto también pueden ser elementos LCP).
+
+- **First Input Delay: Demora de la primera entrada (FID):** En general, el consentimiento de las cookies en sí mismo debería tener un impacto mínimo en el FID, ya que el consentimiento de las cookies requiere poca ejecución de JavaScript. Sin embargo, las tecnologías que habilitan estas cookies (por ejemplo, la publicidad y los scripts de seguimiento) pueden tener un impacto significativo en la interactividad de la página. Retrasar estos scripts hasta que se acepten las cookies puede servir como técnica para disminuir la Demora de la Primera Entrada (FID).
+
+- **Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS):** Los avisos de consentimiento de cookies es una fuente muy común de cambios de diseño.
+
+En general, se puede esperar que un aviso de cookies de terceros proveedores tenga un mayor impacto en el rendimiento que un aviso de cookies que usted mismo desarrolle. Este no es un problema exclusivo de los avisos de cookies, sino de la naturaleza de los scripts de terceros en general.
+
+### Prácticas recomendadas
+
+Las prácticas recomendadas en esta sección se centran en los avisos de cookies de terceros. Algunas de estas prácticas recomendadas, aunque no todas, también se aplican a los avisos de cookies propios.
+
+#### Cargar scripts de avisos de cookies de forma asíncrona
+
+Los scripts de aviso de cookies deben cargarse de forma asíncrona. Para ello, agregue el atributo [`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) a la etiqueta script.
+
+```html
+<script src="https://cookie-notice.com/script.js" async>
+```
+
+Los scripts que no son asíncronos bloquean el analizador del navegador. Esto retrasa la carga de la página y el LCP. Para obtener más información, consulte [Carga eficiente de JavaScript de terceros](/efficiently-load-third-party-javascript/) .
+
+{% Aside %} Si tiene que utilizar scripts síncronos (por ejemplo, algunos avisos de cookies dependen de scripts síncronos para implementar el bloqueo de cookies) debe asegurarse de que esta solicitud se cargue lo más rápidamente posible. Una forma de hacerlo es [utilizar sugerencias de recursos](/preconnect-and-dns-prefetch/). {% endAside %}
+
+#### Cargar directamente los scripts de aviso de cookies
+
+Los scripts de aviso de cookies deben cargarse "directamente" al colocar la etiqueta del script en el HTML del documento principal, en vez de cargarse mediante un administrador de etiquetas u otro script. El uso de un administrador de etiquetas o de un script secundario para inyectar el script de aviso de cookies retrasa la carga del script de aviso de cookies: oculta el script del analizador de búsqueda del navegador y evita que el script se cargue antes de que se ejecute JavaScript.
+
+#### Cómo establecer una conexión anticipada con el origen del aviso de cookies
+
+Todos los sitios que cargan sus scripts de aviso de cookies desde una ubicación de terceros deben utilizar las sugerencias de recursos `dns-prefetch` o `preconnect` para ayudar a establecer una conexión anticipada con el origen que aloja los recursos de aviso de cookies. Para obtener más información, consulte [Cómo establecer conexiones de red anticipadas para mejorar la velocidad que se percibe en una página](/preconnect-and-dns-prefetch/).
+
+```html
+<link rel="preconnect" href="https://cdn.cookie-notice.com/">
+```
+
+{% Aside %} Es común que los avisos de cookies carguen recursos de varios orígenes, por ejemplo, cargar recursos tanto de `www.cookie-notice.com` como de `cdn.cookie-notice.com`. Los orígenes separados requieren conexiones separadas y, por tanto, sugerencias de recursos independientes. {% endAside %}
+
+#### Cómo precargar los avisos de las cookies según corresponda
+
+Algunos sitios se beneficiarían de utilizar la sugerencia de recurso [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) para cargar su script de aviso de cookies. La sugerencia de recurso `preload` informa al navegador para que inicie una solicitud anticipada del recurso especificado.
+
+```html
+<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
+```
+
+`preload` es más potente cuando su uso se limita a obtener un par de recursos clave por página. Por lo tanto, la utilidad de precargar el script de aviso de cookies variará dependiendo de la situación.
+
+#### Tenga en cuenta las disyuntivas de rendimiento al diseñar los avisos de cookies
+
+Personalizar el aspecto de un aviso de cookies de terceros puede suponer un costo adicional en el rendimiento. Por ejemplo, los avisos de cookies de terceros no siempre pueden reutilizar los mismos recursos (por ejemplo, las fuentes web) que se utilizan en otras partes de la página. Además, los avisos de cookies de terceros tienden a cargar el estilo al final de largas cadenas de solicitudes. Para evitar sorpresas, sea consciente de cómo su aviso de cookies carga y aplica el estilo y los recursos relacionados.
+
+#### Evite los cambios de diseño
+
+Estos son algunos de los problemas más comunes en los cambios de diseño asociados a los avisos de cookies:
+
+- **Avisos de cookies en la parte superior de la pantalla:** Los avisos de cookies en la parte superior de la pantalla son una fuente muy común de cambio de diseño. Si un aviso de cookies se inserta en el DOM después de que la página que lo rodea ya se haya renderizado, empujará los elementos de la página que están debajo de él hacia abajo. Este tipo de desplazamiento de diseño puede eliminarse si se reserva un espacio en el DOM para el aviso de consentimiento. Si esto no es una solución factible (por ejemplo, si las dimensiones de su aviso de cookies varían según la geografía), considere la posibilidad de utilizar un pie de página adhesivo o un modal para mostrar el aviso de cookies. Dado que ambos enfoques alternativos muestran el aviso de cookies como una "superposición" sobre el resto de la página, el aviso de cookies no debería causar cambios de contenido cuando se carga.
+- **Animaciones**: Muchos avisos de cookies utilizan animaciones (por ejemplo, el "deslizamiento" de un aviso de cookies es un patrón de diseño común). Dependiendo de cómo se implementen estos efectos, pueden causar cambios en el diseño. Para obtener más información, consulte [Depuración de los cambios de diseño](/debugging-layout-shifts/).
+- **Fuentes**: Las fuentes que tardan en cargarse pueden bloquear el renderizado o causar cambios en el diseño. Este fenómeno es más evidente en conexiones lentas.
+
+#### Optimizaciones de carga avanzadas
+
+Estas técnicas necesitan más trabajo para implementarse, pero pueden optimizar aún más la carga de los scripts de aviso de cookies:
+
+- El almacenamiento en caché y el servicio de scripts de aviso de cookies de terceros desde sus propios servidores puede mejorar la velocidad de entrega de estos recursos.
+- El uso de [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers) puede permitirle un mayor control sobre la [obtención y almacenamiento del caché de scripts de terceros](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations) como los scripts de aviso de cookies.
+
+## Evaluación del desempeño
+
+Los avisos de cookies pueden afectar a las evaluaciones de desempeño. En esta sección se analizan algunas de estas implicaciones y las técnicas para mitigarlas.
+
+### Monitoreo de usuarios reales (RUM)
+
+Algunas herramientas de análisis y RUM utilizan cookies para recopilar datos de desempeño. En caso de que un usuario rechace el uso de cookies, estas herramientas no podrán capturar datos de desempeño.
+
+Los sitios deben ser conscientes de este fenómeno, también vale la pena entender los mecanismos que su herramienta RUM utiliza para recopilar sus datos. Sin embargo, para el sitio común esta discrepancia probablemente no sea motivo de alarma, dada la dirección y la magnitud de la desviación de los datos. El uso de cookies no es un requisito técnico para la evaluación del desempeño. La biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals) de JavaScript es un ejemplo de biblioteca que no utiliza cookies.
+
+Según cómo su sitio utilice las cookies para recopilar datos de desempeño (es decir, si las cookies contienen información personal), así como la legislación en cuestión, el uso de cookies para la evaluación del desempeño podría no estar sujeta a los mismos requisitos legislativos que algunas de las cookies que se utilizan en su sitio para otros fines, por ejemplo, las cookies de publicidad. Algunos sitios optan por separar las cookies de desempeño como una categoría separada de cookies al solicitar el consentimiento del usuario.
+
+### Monitoreo sintético
+
+Sin una configuración personalizada, la mayoría de las herramientas sintéticas (como Lighthouse y WebPageTest) solo medirán la experiencia de un usuario que acude por primera vez y que no ha respondido a un aviso de consentimiento de cookies. Sin embargo, no solo hay que tener en cuenta las variaciones en el estado de la caché (por ejemplo, una primera visita frente a una visita repetida) al recopilar los datos de rendimiento, sino también las variaciones en el estado de aceptación de las cookies: aceptadas, rechazadas o sin respuesta.
+
+En las siguientes secciones se analizará la configuración de WebPageTest y Lighthouse que puede ser útil para incorporar los avisos de cookies en los flujos de trabajo de evaluación del desempeño. Sin embargo, las cookies y los avisos de cookies son tan solo uno de los muchos factores que pueden ser difíciles de simular perfectamente en entornos de laboratorio. Por esta razón, es importante hacer que los datos [RUM](/user-centric-performance-metrics/#how-metrics-are-measured) sean la piedra angular de su evaluación comparativa del desempeño, en vez de las herramientas sintéticas.
+
+### Prueba de avisos de cookies con WebPageTest
+
+#### Programación
+
+Puede utilizar la programación para que un [WebPageTest](https://webpagetest.org/) "haga clic" en el banner de consentimiento de cookies mientras se recopila un rastro.
+
+Agregue un script en la pestaña **Script**. El siguiente script navega a la URL que se va a probar y luego hace clic en el elemento DOM con el ID `cookieButton`.
+
+{% Aside 'caution' %} Los scripts de WebPageTest están [delimitados por pestañas](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#scripting). {% endAside %}
+
+```shell
+combineSteps
+navigate    %URL%
+clickAndWait    id=cookieButton
+```
+
+Cuando utilice este script, tenga en cuenta que:
+
+- `combineSteps` indica a WebPageTest que "combine" los resultados de los pasos de la programación que siguen en un único conjunto de rastros y evaluaciones. Ejecutar este script sin `combineSteps` también puede ser útil: los rastros separados permiten ver fácilmente si los recursos se cargaron antes o después de aceptar las cookies.
+- `%URL%` es una convención de WebPageTest que hace referencia a la URL que se está probando.
+- `clickAndWait` indica a WebPageTest que haga clic en el elemento indicado por `attribute=value` y espere a que se complete la actividad posterior del navegador. Esto sigue el formato `clickAndWait attribute=Value`.
+
+Si configuró este script correctamente, la captura de pantalla realizada por WebPageTest no debería mostrar un aviso de cookies (el aviso de cookies fue aceptado).
+
+Para obtener más información sobre la programación de WebPageTest, consulte la documentación de [WebPageTest](https://docs.webpagetest.org/scripting/).
+
+#### Configurar cookies
+
+Para ejecutar WebPageTest con una cookie determinada, vaya a la pestaña **Avanzado** y agregue el encabezado de la cookie al campo **Cabezados personalizados**:
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/qSccrAxF0H4yoSzYRYdh.png", alt="Captura de pantalla que muestra el campo denominado 'Encabezados personalizados' en WebPageTest", width="800", height="181" %}
+
+#### Cambiar la ubicación de la prueba
+
+Para cambiar la ubicación de la prueba que utiliza WebPageTest, haga clic en el elemento desplegable **Ubicación de la prueba** situado en la pestaña **Pruebas avanzadas**.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/J27NcDQ5LTtXYloaA1DN.png", alt="Captura de pantalla del elemento desplegable 'Ubicación de la prueba' en WebPageTest", width="800", height="267" %}
+
+### Cómo probar los avisos de cookies con Lighthouse
+
+La configuración de cookies en una ejecución de Lighthouse puede servir como mecanismo para poner una página en un estado determinado para que Lighthouse la pruebe. El comportamiento de las cookies de Lighthouse varía ligeramente según el contexto (DevTools, CLI o PageSpeed Insights).
+
+#### DevTools
+
+Las cookies no se borrarán cuando Lighthouse se ejecute desde DevTools. Sin embargo, otros tipos de almacenamiento se borran automáticamente. Este comportamiento puede modificarse mediante la opción **Borrar almacenamiento** en el panel de control de **Lighthouse**.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/nmNDeSoGEQUVKeTP7q7R.png", alt="Captura de pantalla en la que se destaca la opción 'Borrar almacenamiento' de Lighthouse", width="800", height="304" %}
+
+#### CLI
+
+La ejecución de Lighthouse desde la CLI utiliza una instancia fresca de Chrome, por lo que no se establecen cookies de forma predeterminada. Para ejecutar Lighthouse desde la CLI con una cookie configurada de forma específica, utilice el siguiente [comando](https://github.com/GoogleChrome/lighthouse#cli-options):
+
+```shell
+lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
+```
+
+Para obtener más información sobre la configuración de encabezados de solicitud personalizados en la CLI de Lighthouse, consulte [Ejecución de Lighthouse en páginas autenticadas](https://github.com/GoogleChrome/lighthouse/blob/master/docs/authenticated-pages.md).
+
+#### PageSpeed Insights
+
+La ejecución de Lighthouse desde PageSpeed Insights utiliza una instancia de Chrome nueva y no establece ninguna cookie. PageSeed Insights no se puede configurar para establecer cookies particulares.
+
+## Experiencia de usuario
+
+La experiencia del usuario (UX) de los diferentes avisos de consentimiento de cookies es principalmente el resultado de dos decisiones: la ubicación del aviso de cookies dentro de la página y el grado en el que el usuario puede personalizar el uso de cookies de un sitio. En esta sección se analizan los posibles enfoques de estas dos decisiones.
+
+{% Aside 'caution' %} La experiencia de usuario del aviso de cookies a menudo se ve muy influenciada por la legislación que puede variar ampliamente según la geografía. Por lo tanto, algunos de los patrones de diseño que se analizan en esta sección pueden no ser relevantes para su situación particular. Este artículo no debe considerarse un sustituto del asesoramiento legal. {% endAside %}
+
+Al considerar los diseños potenciales para su aviso de cookies, aquí hay algunas cosas en las que debe pensar:
+
+- UX: ¿Es esta una buena experiencia de usuario? ¿Cómo afectará este diseño en particular a los elementos de la página y los flujos de usuarios existentes?
+- Empresa: ¿Cuál es la estrategia de cookies de su sitio? ¿Cuáles son sus objetivos para el aviso de cookies?
+- Legal: ¿Esto cumple con los requisitos legales?
+- Ingeniería: ¿Cuánto trabajo implicaría implementar y mantener? ¿Qué tan difícil sería cambiar?
+
+### Colocación
+
+Los avisos de cookies se pueden mostrar como un encabezado, un elemento de estilos integrados en el código o un pie de página. También se pueden mostrar en la parte superior del contenido de la página mediante un modal o se pueden publicar como un [intersticial](https://en.wikipedia.org/wiki/Interstitial_webpage).
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/LLqHAhp7W6x4E3rZh0Oc.png", alt="Diagrama que muestra ejemplos de diferentes opciones de ubicación para los avisos de cookies", width="800", height="345" %}
+
+#### Avisos de cookies de encabezado, pie de página y de estilos integrados en el código
+
+Los avisos de cookies se colocan comúnmente en el encabezado o pie de página. De estas dos opciones, la ubicación del pie de página es generalmente preferible porque es discreta, no compite por la atención con anuncios publicitarios o notificaciones y, por lo general, no causa CLS. Además, es un lugar común para colocar políticas de privacidad y términos de uso.
+
+Si bien los avisos de cookies de estilos integrados en el código son una opción, pueden ser difíciles de integrar en las interfaces de usuario existentes y, por lo tanto, son poco comunes.
+
+#### Modales
+
+Los modales son avisos de consentimiento de cookies que se muestran en la parte superior del contenido de la página. Los modales pueden verse y funcionar de manera muy diferente dependiendo de su tamaño.
+
+Los modales de pantalla parcial más pequeños pueden ser una buena alternativa para los sitios que tienen dificultades para implementar avisos de cookies de una manera que no provoque [cambios de diseño](/cls/).
+
+Por otro lado, los modales grandes que ocultan la mayor parte del contenido de la página deben usarse con cuidado. En particular, los sitios más pequeños pueden encontrar que los usuarios rechazan en vez de aceptar el aviso de cookies de un sitio desconocido con contenido oculto. Aunque no son necesariamente conceptos sinónimos, si está pensando en utilizar un modal de consentimiento de cookies de pantalla completa, debe conocer la legislación sobre [cookie walls](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/).
+
+{% Aside %} Los grandes modales pueden considerarse un tipo de intersticial. La Búsqueda de Google [no penaliza](https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on) el uso de anuncios intersticiales cuando se utilizan para cumplir con normas legales, como en el caso de los banners de cookies. Sin embargo, el uso de intersticiales en otros contextos, en particular si son intrusivos o crean una mala experiencia para el usuario, puede verse penalizado. {% endAside %}
+
+### Configurabilidad
+
+Las interfaces de aviso de cookies brindan a los usuarios distintos niveles de control sobre qué cookies aceptan.
+
+#### Sin configurabilidad
+
+Estos banners de cookies con estilo de aviso no presentan a los usuarios controles directos de UX para rechazar las cookies. En su lugar, generalmente incluyen un enlace a la política de cookies del sitio que puede proporcionar a los usuarios información sobre cómo administrar las cookies mediante su navegador web. Por lo general, estos avisos incluyen un botón para "descartar" y/o "Aceptar".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/RlAg8DCjBC0bX7Ki5MuE.png", alt="Diagrama que muestra ejemplos de avisos de cookies sin configurabilidad de cookies", width="800", height="518" %}
+
+#### Algo de configurabilidad
+
+Estos avisos de cookies dan al usuario la opción de rechazar las cookies, pero no admiten controles más detallados. Este enfoque de los avisos de cookies es menos común.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/MOl8u9NcnyjCWogxzjdz.png", alt="Diagrama que muestra ejemplos de avisos de cookies con cierta capacidad de configuración de cookies", width="800", height="508" %}
+
+#### Configurabilidad total
+
+Estos avisos de cookies proporcionan a los usuarios controles más detallados para configurar el uso de cookies que aceptan.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QfFoqkkmdKHAYlftIH0n.png", alt="Diagrama que muestra ejemplos de avisos de cookies con capacidad de configuración completa de cookies", width="800", height="467" %}
+
+- **UX:** Los controles para configurar el uso de cookies se muestran con mayor frecuencia mediante un modal independiente que se inicia cuando el usuario responde al aviso inicial de consentimiento de cookies. Sin embargo, si el espacio lo permite, algunos sitios mostrarán estos controles de estilos integrados en el código dentro del aviso de consentimiento de cookies inicial.
+
+- **Granularidad:** el enfoque más común para la capacidad de configuración de las cookies es permitir que los usuarios opten por las cookies por "categoría" de cookies. Algunos ejemplos de categorías de cookies comunes incluyen cookies funcionales, de orientación y de redes sociales.
+
+    Sin embargo, algunos sitios irán un paso más allá y permitirán a los usuarios optar por participar en cada cookie. Alternativamente, otra forma de proporcionar a los usuarios controles más específicos es dividir las categorías de cookies como "publicidad" en casos de uso específicos; por ejemplo, permitir que los usuarios opten por separado para "anuncios básicos" y "anuncios personalizados".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/z7zFPtCkFi8GEpkfubek.png", alt="Diagrama que muestra ejemplos de avisos de cookies con capacidad de configuración completa de cookies", width="800", height="372" %}
diff --git a/src/site/content/es/fast/debug-layout-shifts/index.md b/src/site/content/es/fast/debug-layout-shifts/index.md
new file mode 100644
index 00000000000..b2f523500c9
--- /dev/null
+++ b/src/site/content/es/fast/debug-layout-shifts/index.md
@@ -0,0 +1,257 @@
+---
+layout: post
+title: Depuración de cambios de diseño
+subhead: |2-
+
+  Aprenda a identificar y corregir los cambios de diseño.
+authors:
+  - katiehempenius
+date: 2021-03-11
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/N65l8ccOUEDESpnnEkje.png
+alt: Imagen de un cambio de diseño.
+description: |2-
+
+  Aprenda a identificar y corregir los cambios de diseño.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+La primera parte de este artículo analiza las herramientas para depurar los cambios de diseño, mientras que la segunda parte analiza el proceso de pensamiento que se debe utilizar para identificar la causa de un cambio de diseño.
+
+## Herramientas
+
+### API de inestabilidad de diseño
+
+La [API de Inestabilidad de diseño](https://wicg.github.io/layout-instability/) es el mecanismo del navegador para medir y reportar los cambios de diseño. Todas las herramientas para depurar los cambios de diseño, incluida DevTools, se basan en última instancia en la API de inestabilidad de diseño. Sin embargo, usar la API de inestabilidad de diseño directamente es una poderosa herramienta de depuración debido a su flexibilidad.
+
+{% Aside %} La API de inestabilidad de diseño solo es [compatible](https://caniuse.com/mdn-api_layoutshift) con los navegadores Chromium. En este momento, no hay forma de medir o depurar los cambios de diseño en navegadores distintos a Chromium. {% endAside %}
+
+#### Uso
+
+El mismo [fragmento](/cls/#measure-cls-in-javascript) de código que mide el [cambio de diseño acumulativo (CLS)](/cls/) también puede servir para depurar cambios de diseño. El fragmento a continuación registra información sobre los cambios de diseño en la consola. La inspección de este registro le proporcionará información sobre cuándo, dónde y cómo ocurrió un cambio de diseño.
+
+```javascript
+let cls = 0;
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    if (!entry.hadRecentInput) {
+      cls += entry.value;
+      console.log('Current CLS value:', cls, entry);
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+Al ejecutar este script, tenga en cuenta que:
+
+- La opción `buffered: true` indica que [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) debe comprobar el [búfer de entrada de rendimiento](https://www.w3.org/TR/performance-timeline-2/#dfn-performance-entry-buffer) del navegador para las entradas de rendimiento que se crearon antes de la inicialización del observador. Como resultado, `PerformanceObserver` informará los cambios de diseño que ocurrieron antes y después de que se inicializara. Tenga esto en cuenta al inspeccionar los registros de la consola. Un exceso inicial de cambios de diseño puede reflejar una acumulación de informes, en lugar de la aparición repentina de numerosos cambios de diseño.
+- Para evitar afectar el rendimiento, `PerformanceObserver` espera hasta que el hilo principal esté inactivo para informar sobre los cambios de diseño. Como resultado, en función de qué tan ocupado esté el hilo principal, puede haber una pequeña demora entre el momento en que se produce un cambio de diseño y el momento en que se registra en la consola.
+- Este script ignora los cambios de diseño que ocurrieron dentro de los 500 ms posteriores a la entrada del usuario y, por lo tanto, no cuentan para CLS.
+
+La información sobre los cambios de diseño se informa mediante una combinación de dos API: las interfaces [`LayoutShift`](https://wicg.github.io/layout-instability/#layoutshift) y [`LayoutShiftAttribution`](https://wicg.github.io/layout-instability/#sec-layout-shift-attribution). Cada una de estas interfaces se explica con más detalle en las siguientes secciones.
+
+#### LayoutShift
+
+Cada cambio de diseño se informa mediante la interfaz `LayoutShift`. El contenido de una entrada tiene este aspecto:
+
+```javascript
+duration: 0
+entryType: "layout-shift"
+hadRecentInput: false
+lastInputTime: 0
+name: ""
+sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
+startTime: 11317.934999999125
+value: 0.17508567530168798
+```
+
+La entrada anterior indica un cambio de diseño durante el cual tres elementos DOM cambiaron de posición. La puntuación de cambio de diseño de este cambio de diseño en particular fue `0.175`.
+
+Estas son las propiedades de una instancia `LayoutShift` que son más relevantes para depurar los cambios de diseño:
+
+Propiedad | Descripción
+--- | ---
+`sources` | La propiedad `sources` enumera los elementos DOM que se movieron durante el cambio de diseño. Esta matriz puede contener hasta cinco fuentes. En el caso de que haya más de cinco elementos afectados por el cambio de diseño, se informan las cinco fuentes más grandes de cambios de diseño (medidas según el impacto sobre la estabilidad del diseño). Esta información se informa mediante la interfaz LayoutShiftAttribution (que se explica con más detalle a continuación).
+`value` | La propiedad `value` informa la [puntuación de cambio de diseño](/cls/#layout-shift-score) para un cambio de diseño en particular.
+`hadRecentInput` | La propiedad `hadRecentInput` indica si se produjo un cambio de diseño dentro de los 500 milisegundos posteriores a la entrada del usuario.
+`startTime` | La propiedad `startTime` indica cuándo se produjo un cambio de diseño. `startTime` se indica en milisegundos y se mide en relación con el [momento en que se inició la carga de la página](https://www.w3.org/TR/hr-time-2/#sec-time-origin).
+`duration` | La propiedad `duration` siempre se establecerá en `0`. Esta propiedad se hereda de la interfaz [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) (la interfaz `LayoutShift` amplía la interfaz `PerformanceEntry`). Sin embargo, el concepto de duración no se aplica a los eventos de cambio de diseño, por lo que se establece en `0`. Para obtener información sobre la interfaz `PerformanceEntry`, consulte las [especificaciones](https://w3c.github.io/performance-timeline/#the-performanceentry-interface).
+
+{% Aside %} La [extensión Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) puede registrar información de cambios de diseño en la consola. Para habilitar esta función, vaya a **Opciones > Registro de consola**. {% endAside %}
+
+#### LayoutShiftAttribution
+
+La interfaz `LayoutShiftAttribution` describe un solo cambio de un solo elemento DOM. Si varios elementos cambian durante un cambio de diseño, la propiedad `sources` contendrá varias entradas.
+
+Por ejemplo, el JSON a continuación corresponde a un cambio de diseño con una fuente: el cambio descendente del elemento DOM `<div id='banner'>` de `y: 76` a `y:246`.
+
+```json
+// ...
+  "sources": [
+    {
+      "node": "div#banner",
+      "previousRect": {
+        "x": 311,
+        "y": 76,
+        "width": 4,
+        "height": 18,
+        "top": 76,
+        "right": 315,
+        "bottom": 94,
+        "left": 311
+      },
+      "currentRect": {
+        "x": 311,
+        "y": 246,
+        "width": 4,
+        "height": 18,
+        "top": 246,
+        "right": 315,
+        "bottom": 264,
+        "left": 311
+      }
+    }
+  ]
+```
+
+La propiedad `node` identifica el elemento HTML que cambió. Al colocar el cursor sobre esta propiedad en DevTools, se resalta el elemento de página correspondiente.
+
+Las porpiedades `previousRect` y `currentRect` informan el tamaño y la posición del nodo.
+
+- Las coordenadas `x` e `y` informan respectivamente la coordenada X y la coordenada Y de la esquina superior izquierda del elemento
+- Las propiedades `width` y `height` informan respectivamente el ancho y alto del elemento.
+- Las propiedades `top`, `right`, `bottom` y `left` informan los valores de las coordenadas X o Y correspondientes al borde dado del elemento. En otras palabras, el valor de `top` es igual a `y`; el valor de `bottom` es igual a `y+height`.
+
+Si todas las propiedades de `previousRect` se establecen en 0, esto significa que el elemento se ha desplazado a la vista. Si todas las propiedades de `currentRect` se establecen en 0, esto significa que el elemento se ha desplazado fuera de la vista.
+
+{% Aside 'caution' %} La API de inestabilidad de diseño actualmente no ignora los elementos que se desplazaron pero no eran visibles debido a que otro elemento se colocó frente a ellos. Utilice `display: none`, `visibility: hidden` u `opacity: 0` para evitar cambios de diseño en los casos en los que necesite ejecutar el diseño en algunos elementos antes de hacerlos visibles para el usuario. {% endAside %}
+
+Una de las cosas más importantes que debe comprender al interpretar estos resultados es que los elementos enumerados como *fuentes* son los elementos que cambiaron durante el cambio de diseño. Sin embargo, es posible que estos elementos solo se relacionen indirectamente con la "causa principal" de la inestabilidad del diseño. Estos son algunos ejemplos.
+
+**Ejemplo 1**
+
+Este cambio de diseño se informaría con una fuente: el elemento B. Sin embargo, la causa principal de este cambio de diseño es el cambio en el tamaño del elemento A.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/oaM41OYL7mFtGcpIN8KF.png", alt="Ejemplo que muestra un cambio de diseño causado por un cambio en las dimensiones del elemento", width="800", height="452" %}
+
+**Ejemplo 2**
+
+El cambio de diseño en este ejemplo se informaría con dos fuentes: el elemento A y el elemento B. La causa principal de este cambio de diseño es el cambio en la posición del elemento A.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/AhaslIEWb5fFMMgiZcI2.png", alt="Ejemplo que muestra un cambio de diseño causado por un cambio en la posición del elemento", width="800", height="451" %}
+
+**Ejemplo 3**
+
+El cambio de diseño en este ejemplo se informaría con una fuente: el elemento B. El cambio de posición del elemento B resultó en este cambio de diseño.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/6zKjd4Ua6YJ94LMlqiMR.png", alt="Ejemplo que muestra un cambio de diseño causado por un cambio en la posición del elemento", width="800", height="451" %}
+
+**Ejemplo 4**
+
+Aunque el elemento B cambia de tamaño, no hay cambio de diseño en este ejemplo.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/ZujHWxsXI3C7tupe42oD.png", alt="Ejemplo que muestra un elemento que cambia de tamaño pero no provoca un cambio de diseño", width="800", height="446" %}
+
+Vea una [demostración de cómo la API de inestabilidad de diseño informa los cambios de DOM](https://desert-righteous-router.glitch.me/).
+
+### DevTools
+
+#### Panel de rendimiento
+
+El panel **Experiencia** del panel **Rendimiento** de DevTools muestra todos los cambios de diseño que se producen durante un seguimiento de rendimiento determinado, incluso si se producen dentro de los 500 ms posteriores a la interacción del usuario y, por lo tanto, no cuentan para CLS. Al pasar el cursor sobre un cambio de diseño particular en el panel **Experiencia**, se resalta el elemento DOM afectado.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Uug2fnJT8mOc2YQmxo2l.png", alt="Captura de pantalla de un cambio de diseño que se muestra en el panel Red de DevTools", width="724", height="629" %}
+
+Para ver más información sobre el cambio de diseño, haga clic en el cambio de diseño y luego abra el cajón de **Resumen**. Los cambios en las dimensiones del elemento se enumeran mediante el formato `[width, height]`. Los cambios en la posición del elemento se enumeran mediante el formato `[x,y]`. La propiedad **Tuvo una entrada reciente** indica si se produjo un cambio de diseño dentro de los 500 ms posteriores a la interacción del usuario.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/AfVjsH9Nl9w0lJwQZEjR.png", alt="Captura de pantalla de la pestaña 'Resumen' de DevTools para un cambio de diseño", width="612", height="354" %}
+
+Para obtener información sobre la duración de un cambio de diseño, abra la pestaña **Registro de eventos.** La duración de un cambio de diseño también se puede aproximar si mira en el panel **Experiencia** la longitud del rectángulo rojo de cambio de diseño.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/124Dm7vV3EGM7M9fiugs.png", alt="Captura de pantalla de la pestaña 'Registro de eventos' de DevTools para un cambio de diseño", width="612", height="354" %}
+
+{% Aside %} La duración de un cambio de diseño no tiene ningún impacto en su puntuación de cambio de diseño. {% endAside %}
+
+Para obtener más información sobre el uso del panel **Rendimiento**, consulte el documento [Referencia de análisis de rendimiento](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/).
+
+#### Resaltar las regiones de cambio de diseño
+
+Resaltar las regiones de cambio de diseño puede ser una técnica útil para obtener una idea rápida y de un vistazo de la ubicación, además del momento en que se producen los cambios de diseño  en una página.
+
+Para habilitar las Regiones de cambio de diseño en DevTools, vaya a **Configuración&gt; Más herramientas&gt; Renderizado&gt; Regiones de cambio de diseño** y luego actualice la página que desea depurar. Las áreas de cambio de diseño se resaltarán brevemente en violeta.
+
+## Proceso de pensamiento para identificar la causa de los cambios de diseño
+
+Puede utilizar los pasos a continuación para identificar la causa de los cambios de diseño independientemente de cuándo o cómo se produzcan. Estos pasos se pueden complementar con la ejecución de Lighthouse. Sin embargo, tenga en cuenta que Lighthouse solo puede identificar los cambios de diseño que se produjeron durante la carga de la página inicial. Además, Lighthouse solo puede proporcionar sugerencias para algunas causas de cambios de diseño, por ejemplo, elementos de imagen que no tienen ancho y alto explícitos.
+
+### Identificar la causa de un cambio de diseño
+
+Los cambios de diseño pueden deberse a los siguientes eventos:
+
+- Cambios en la posición de un elemento DOM
+- Cambios en las dimensiones de un elemento DOM
+- Inserción o eliminación de un elemento DOM
+- Animaciones que activan el diseño
+
+En particular, el elemento DOM que precede inmediatamente al elemento desplazado es el elemento con más probabilidades de estar involucrado en "provocar" el cambio de diseño. Por lo tanto, cuando investigue por qué ocurrió un cambio de diseño, considere:
+
+- ¿Cambiaron la posición o las dimensiones del elemento anterior?
+- ¿Se insertó o eliminó un elemento DOM antes del elemento desplazado?
+- ¿Se cambió explícitamente la posición del elemento desplazado?
+
+Si el elemento anterior no provocó el cambio de diseño, continúe su búsqueda para considerar otros elementos anteriores y cercanos.
+
+Además, la dirección y la distancia de un cambio de diseño pueden proporcionar pistas sobre la causa raíz. Por ejemplo, un gran cambio hacia abajo a menudo indica la inserción de un elemento DOM, mientras que un cambio de diseño de 1 px o 2 px a menudo indica la aplicación de estilos CSS conflictivos o la carga y aplicación de una fuente web.
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="Diagrama que muestra un cambio de diseño causado por un cambio de fuente", width="800", height="452" %} <figcaption> En este ejemplo, el intercambio de fuentes provocó que los elementos de la página se desplazaran cinco píxeles hacia arriba.</figcaption></figure>
+
+Estos son algunos de los comportamientos específicos que con mayor frecuencia provocan eventos de cambio de diseño:
+
+#### Cambios en la posición de un elemento (que no se deben al movimiento de otro elemento)
+
+Este tipo de cambios suele ser el resultado de:
+
+- Hojas de estilo que se cargan tarde o que sobrescriben estilos declarados previamente.
+- Efectos de animación y transición.
+
+#### Cambios en las dimensiones de un elemento
+
+Este tipo de cambio suele ser el resultado de:
+
+- Hojas de estilo que se cargan tarde o que sobrescriben estilos declarados previamente.
+- Imágenes e iframes sin atributos `width` y `height` que se cargan después de que se ha renderizado su "ranura".
+- Bloques de texto sin atributos `width` o `height` que intercambian fuentes una vez que se ha renderizado el texto.
+
+#### La inserción o eliminación de elementos DOM
+
+Esto suele ser el resultado de:
+
+- Inserción de anuncios y otras incrustaciones de terceros.
+- Inserción de banners, alertas y modales.
+- Desplazamiento infinito y otros patrones de UX que cargan contenido adicional por encima del contenido existente.
+
+#### Animaciones que activan el diseño
+
+Algunos efectos de animación pueden [activar el diseño](https://gist.github.com/paulirish/5d52fb081b3570c81e3a). Un ejemplo común de esto es cuando los elementos DOM se "animan" para incrementar propiedades como `top` o `left` en lugar de usar la propiedad [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform). Lea [Cómo crear animaciones CSS de alto rendimiento](/animations-guide/) para obtener más información.
+
+### Reproducir cambios de diseño
+
+No puede corregir cambios de diseño que no puede reproducir. Una de las cosas más simples pero más efectivas que puede hacer para tener una mejor idea de la estabilidad del diseño de su sitio es tomar de 5 a 10 minutos para interactuar con su sitio con el objetivo de desencadenar los cambios de diseño. Mantenga la consola abierta mientras hace esto y use la API de inestabilidad de diseño para informar sobre los cambios de diseño.
+
+Para cambios de diseño difíciles de localizar, considere la posibilidad de repetir este ejercicio con diferentes dispositivos y velocidades de conexión. En particular, el uso de una velocidad de conexión más lenta puede facilitar la identificación de cambios en el diseño. Además, puede utilizar una declaración `debugger` para facilitar la revisión de los cambios de diseño.
+
+```javascript/4
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    if (!entry.hadRecentInput) {
+      cls += entry.value;
+      debugger;
+      console.log('Current CLS value:', cls, entry);
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+Por último, para los problemas de diseño que no se pueden reproducir durante el desarrollo, considere usar la API de inestabilidad de diseño junto con la herramienta de registro de front-end de su elección para recopilar más información sobre estos problemas. Consulte el [código de ejemplo sobre cómo realizar un seguimiento del elemento desplazado más grande en una página](https://github.com/GoogleChromeLabs/web-vitals-report/blob/71b0879334798c732f460945ded5267cab5a36bf/src/js/analytics.js#L104-L118).
diff --git a/src/site/content/es/fast/defer-non-critical-css/index.md b/src/site/content/es/fast/defer-non-critical-css/index.md
new file mode 100644
index 00000000000..5467b33efcd
--- /dev/null
+++ b/src/site/content/es/fast/defer-non-critical-css/index.md
@@ -0,0 +1,116 @@
+---
+layout: post
+title: Aplazar CSS no crítico
+authors:
+  - demianrenzulli
+description: Aprenda a aplazar CSS no crítico con el objetivo de optimizar la ruta de renderización crítica y mejorar el FCP (primera pintura de contenido).
+date: 2019-02-17
+updated: 2020-06-12
+tags:
+  - performance
+---
+
+Los archivos CSS son [recursos que bloquean el renderizado](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources): deben cargarse y procesarse antes de que el navegador muestre la página. Las páginas web que contienen estilos de CSS innecesariamente grandes tardan más en procesarse.
+
+En esta guía aprenderá cómo aplazar el CSS no crítico, con el objetivo de optimizar la [ruta de renderización crítica](/critical-rendering-path/) y mejorar la [First Contentful Paint o FCP (primer despliegue de contenido)](/fcp/).
+
+## Cargar CSS de una manera deficiente
+
+El siguiente ejemplo contiene un acordeón con tres párrafos de texto ocultos, cada uno con un estilo de diferente clase:
+
+{% Glitch { id: 'defer-css-unoptimized', path: 'index.html'} %}
+
+Esta página solicita un archivo CSS con ocho clases, pero no todas son necesarias para renderizar el contenido "visible".
+
+El objetivo de esta guía es optimizar esta página, para que solo los **estilos críticos** se carguen simultáneamente, mientras que el resto (como los aplicados a los párrafos), se carguen sin bloquear el renderizado.
+
+## Métrica
+
+Ejecute [Lighthouse](/discover-performance-opportunities-with-lighthouse/#run-lighthouse-from-chrome-devtools) en [la página](https://defer-css-unoptimized.glitch.me/) y vaya a la sección **Rendimiento.**
+
+El informe muestra la métrica **First Contentful Paint** con un valor de "1s" y la oportunidad **Eliminar recursos que bloquean el renderizado**, apuntando al archivo **style.css**:
+
+<figure>{% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="Informe Lighthouse para página no optimizada, que muestra FCP de '1s' y la opción 'Eliminar recursos de bloqueo' en la sección 'Oportunidades'", width="800", height="640" %}</figure>
+
+{% Aside %} El CSS que usamos para este sitio de demostración es bastante pequeño. Si usted solicitaba archivos CSS más grandes (algo frecuente en escenarios de producción), y si Lighthouse detecta que una página tiene al menos 2048 bytes de reglas CSS que no se usaron al renderizar el contenido **superior**, también recibirá una sugerencia llamada **Eliminar CSS no utilizado**. {% endAside %}
+
+Para visualizar cómo este CSS bloquea el renderizado:
+
+1. Abra [la página](https://defer-css-unoptimized.glitch.me/) en Chrome.
+{% Instruction 'devtools-performance', 'ol' %}
+1. En el panel Rendimiento, haga clic en **Actualizar**.
+
+En el seguimiento resultante, verá que el marcador **FCP** se coloca inmediatamente después de que el CSS termina de cargarse:
+
+<figure>{% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="Seguimiento de rendimiento de DevTools para página no optimizada, mostrando FCP comenzando después de cargar el CSS", width="800", height="352" %}</figure>
+
+Esto significa que el navegador debe esperar a que todo el CSS se cargue y procese antes de pintar un solo píxel en la pantalla.
+
+## Optimizar
+
+Para optimizar esta página, necesita saber qué clases se consideran "críticas". Utilizará la [herramienta de cobertura](https://developer.chrome.com/docs/devtools/css/reference/#coverage) para eso:
+
+1. En DevTools, abra el [menú de comandos](https://developer.chrome.com/docs/devtools/command-menu/) presionando `Control+Shift+P` o `Command+Shift+P` (Mac).
+2. Escriba "Cobertura" y seleccione **Mostrar cobertura**.
+3. Haga clic en el botón **Actualizar** para volver a cargar la página y comenzar a capturar la cobertura.
+
+<figure>{% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="Cobertura del archivo CSS, que muestra 55,9% de bytes no utilizados", width="800", height="82" %}</figure>
+
+Haga doble clic en el informe para ver las clases marcadas en dos colores:
+
+- Verde (**crítico**): estas son las clases que el navegador necesita para renderizar el contenido visible (como los botones de título, subtítulo y acordeón).
+- Rojo (**no crítico**): estos estilos se aplican al contenido que no es visible inmediatamente (como los párrafos dentro de los acordeones).
+
+Optimice su CSS con esta información para que el navegador comience a procesar los estilos críticos inmediatamente después de que se cargue la página, mientras pospone el CSS no crítico para más adelante:
+
+- Extraiga las definiciones de clase marcadas con verde en el informe obtenido de la herramienta de cobertura y colóquelas dentro de un `<style>` en el encabezado de la página:
+
+```html
+<style type="text/css">
+.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
+</style>
+```
+
+- A continuación, cargue el resto de las clases de forma asincrónica, aplicando el siguiente patrón:
+
+```html
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="styles.css"></noscript>
+```
+
+Esta no es la forma estándar de cargar CSS. Así es como funciona:
+
+- `link rel="preload" as="style"` solicita la hoja de estilo de forma asincrónica. Puede obtener más información sobre el atributo `preload` en la [Guía de activos críticos de precarga](/preload-critical-assets).
+- El atributo `onload` en `link` permite que el CSS se procese cuando termine de cargarse.
+- "null" en el controlador `onload`, una vez que se haya utilizado, ayuda a algunos navegadores a evitar volver a llamar al controlador al cambiar el atributo rel.
+- La referencia a la hoja de estilo dentro de un elemento `noscript` funciona como una alternativa para los navegadores que no ejecutan JavaScript.
+
+{% Aside %} En esta guía, utilizó código básico para implementar esta optimización. En un escenario de producción real, es una buena práctica utilizar funciones como [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md), que pueden encapsular este comportamiento y funcionar bien en todos los navegadores. {% endAside %}
+
+La [página resultante](https://defer-css-optimized.glitch.me/) se ve exactamente como la versión anterior, incluso cuando la mayoría de los estilos se cargan de forma asincrónica. Así es como se ven los estilos en línea y la solicitud asincrónica al archivo CSS en el archivo HTML:
+
+<!-- Copy and Paste Me -->
+
+{% Glitch { id: 'defer-css-optimized', path: 'index.html', previewSize: 0 } %}
+
+## Monitor
+
+Utilice DevTools para ejecutar otro seguimiento de **rendimiento** [en la página optimizada](https://defer-css-optimized.glitch.me/).
+
+El marcador **FCP** aparece antes de que la página solicite el CSS, lo que significa que el navegador no necesita esperar a que se cargue el CSS antes de renderizar la página:
+
+<figure>{% Img src ="image/admin/0mVq3q760y37JSn2MmCP.png", alt="Seguimiento de rendimiento de DevTools para una página no optimizada, que muestra el inicio de FCP antes de que se cargue el CSS", width="800", height="389", class="w -captura de pantalla" %}</figure>
+
+Como paso final, ejecute Lighthouse en la página optimizada.
+
+En el informe, verá que la página FCP se ha reducido en **0,2 s** (¡una mejora del 20%!):
+
+<figure>{% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="Informe Lighthouse, que muestra un valor de FCP de '0.8s'.", width="800", height="324" %}</figure>
+
+La sugerencia **Eliminar recursos que bloquean el renderizado** ya no se encuentra en **Oportunidades** y ahora pertenece a la sección **Auditorías aprobadas**:
+
+<figure>{% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="Informe Lighthouse que muestra la sugerencia 'Eliminar recursos de bloqueo' en la sección 'Auditorías aprobadas'.", width="800", height="237" %}</figure>
+
+## Próximos pasos y referencias
+
+En esta guía, aprendió cómo aplazar el CSS no crítico extrayendo manualmente el código no utilizado en la página. Además, la [guía de extracción de CSS crítico](/extract-critical-css/) cubre algunas de las herramientas más populares para extraer CSS crítico, e incluye [un codelab](/codelab-extract-and-inline-critical-css/) para ver cómo funciona en la práctica.
diff --git a/src/site/content/es/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/es/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..f8bbe6b916d
--- /dev/null
+++ b/src/site/content/es/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Carga el JavaScript de terceros de manera eficiente
+subhead: Evita los errores comunes de usar scripts de terceros para mejorar los tiempos de carga y la experiencia del usuario.
+authors:
+  - mihajlija
+date: 2019-08-14
+description: |2-
+
+  Aprende a evitar los errores comunes de usar scripts de terceros para mejorar los tiempos de carga y la experiencia del usuario.
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: Vista aérea de contenedores de envío.
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+Si un script de terceros está [ralentizando](/third-party-javascript/) la carga de tu página, tienes dos opciones para mejorar el rendimiento:
+
+- Eliminarlo si no agrega algún valor claro a tu sitio.
+
+- Optimiza el proceso de carga.
+
+Esta publicación explica cómo optimizar el proceso de carga de scripts de terceros con las siguientes técnicas:
+
+1. Usar el atributo de `async` o de `defer` en etiquetas `<script>`
+
+2. Establecer conexiones tempranas con los orígenes requeridos
+
+3. Carga diferida
+
+4. Optimización de la forma en que se sirven los scripts de terceros
+
+## Usar `async` o `defer`
+
+Debido a que los [scripts síncronos](/third-party-javascript/) retrasan la construcción y la representación del DOM, siempre debes de cargar scripts de terceros de forma asincrónica a menos que el script tenga que ejecutarse antes de que se pueda procesar la página.
+
+Los atributos de `async` y `defer` le dicen al navegador que puede seguir analizando el HTML mientras carga el script en segundo plano y que luego ejecute el script después de que se cargue. De esta forma, las descargas de scripts no bloquean la construcción del DOM ni la representación de la página. El resultado es que el usuario puede ver la página antes de que todos los scripts hayan terminado de cargarse.
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+La diferencia entre `async` y `defer` recae en cuando se comienzan a ejecutar los scripts.
+
+### `async`
+
+Los scripts con el atributo de `async` se ejecutan en la primera oportunidad después de que terminan de descargarse y antes del evento de [carga](https://developer.mozilla.org/docs/Web/Events/load) de la ventana. Esto significa que es posible (y probable) que los scripts de `async` no se ejecuten en el orden en que aparecen en el HTML. También significa que pueden interrumpir la construcción del DOM si terminan de descargar mientras el analizador todavía está en funcionamiento.
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="Diagrama de secuencia de comandos de bloqueo del analizador con atributo async", width="800", height="252" %}
+
+### `defer`
+
+Los scripts con el atributo de `defer` se ejecutan después de que el análisis de HTML esté completamente terminado, pero antes del evento de [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded). `defer` garantiza que los scripts se ejecutarán en el orden en que aparecen en el HTML y no bloquearán el analizador.
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="Diagrama del flujo del analizador con un script con atributo defer", width="800", height="253" %}
+
+- Utiliza `async` si es importante que la secuencia de comandos se ejecute antes en el proceso de carga.
+
+- Utiliza `defer` para recursos menos críticos. Un reproductor de video que se encuentra en la mitad inferior de la página, por ejemplo.
+
+El uso de estos atributos puede acelerar significativamente la carga de la página. Por ejemplo, [Telegraph recientemente aplazó todos sus scripts](https://medium.com/p/a0a1000be5#4123), incluyendo los anuncios y análisis, y mejoró el tiempo de carga de anuncios en un promedio de cuatro segundos.
+
+{% Aside %} Las secuencias de comandos de análisis generalmente se cargan temprano para que no se pierda ningún dato analítico valioso. Afortunadamente, existen [patrones para inicializar el análisis de forma diferida](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/) mientras se retienen los datos de carga de la página inicial. {% endAside %}
+
+## Establecer conexiones tempranas con los orígenes requeridos
+
+Puedes ahorrar entre 100 y 500 ms si [estableces conexiones tempranas](/preconnect-and-dns-prefetch/) con importantes orígenes de terceros.
+
+Dos tipos de [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) pueden ayudar aquí:
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+`<link rel="preconnect">` le informa al navegador que tu página tiene la intención de establecer una conexión con otro origen y que desea que el proceso comience lo antes posible. Cuando se realiza la consulta de un recurso desde el origen preconectado, la descarga comienza inmediatamente.
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %} Conéctate previamente solo a los dominios críticos que usarás pronto porque el navegador cierra cualquier conexión que no se use en 10 segundos. La preconexión innecesaria puede retrasar otros recursos importantes, así que limita la cantidad de dominios preconectados y [prueba el impacto que tiene la preconexión](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/). {% endAside %}
+
+### `dns-prefetch`
+
+El `<link rel="dns-prefetch>` maneja un pequeño subconjunto de lo que maneja `<link rel="preconnect">`. El establecimiento de una conexión implica la búsqueda de DNS y el protocolo de enlace de TCP, y para orígenes seguros, negociaciones de TLS. `dns-prefetch` instruye al navegador solo resolver el DNS de un dominio específico antes de que se haya llamado explícitamente.
+
+La sugerencia de `preconnect` se utiliza mejor solo para las conexiones más críticas; para dominios de terceros menos críticos, utiliza `<link rel=dns-prefetch>`.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[La compatibilidad del navegador con `dns-prefetch`](https://caniuse.com/#search=dns-prefetch) es ligeramente diferente a la [compatibilidad con `preconnect`](https://caniuse.com/#search=preconnect), por lo que `dns-prefetch` puede servir como respaldo para los navegadores que no sean compatibles con `preconnect`. Utiliza etiquetas de enlace independientes para implementar esto de forma segura:
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## Recursos de terceros de carga diferida
+
+Los recursos de terceros integrados pueden contribuir en gran medida a reducir la velocidad de la página cuando se construyen de una forma deficiente. Si no son críticos o están en la mitad inferior de la página (es decir, si los usuarios tienen que desplazarse para verlos), la carga diferida es una buena manera de mejorar la velocidad de la página y las métricas de contenido. De esta manera, los usuarios obtendrán el contenido de la página principal más rápido y tendrán una mejor experiencia.
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="Un diagrama de una página web que se muestra en un dispositivo móvil con contenido desplazable que se extiende más allá de la pantalla. El contenido que está debajo de la página no está saturado porque no está cargado todavía.", width="366", height="438" %}</figure>
+
+Un enfoque eficaz es cargar contenido de terceros de forma diferida después de que se cargue el contenido de la página principal. Los anuncios son un buen candidato para este enfoque.
+
+Los anuncios son una fuente importante de ingresos para muchos sitios, pero los usuarios vienen por el contenido. Al cargar anuncios de forma diferida y entregar el contenido principal más rápido, puedes aumentar el porcentaje de visibilidad general de un anuncio. Por ejemplo, MediaVine cambió a [anuncios de carga diferida](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/) y vio una mejora del 200% en la velocidad de carga de la página. DoubleClick tiene orientación sobre cómo cargar anuncios en forma diferida en su [documentación oficial](https://support.google.com/dfp_premium/answer/4578089#lazyloading).
+
+Un enfoque alternativo es cargar contenido de terceros solo cuando los usuarios se desplazan hacia abajo en dirección hacia sección de la página.
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/) es una API de navegador que detecta de manera eficiente cuando un elemento entra o sale de la ventana gráfica del navegador y se puede utilizar para implementar esta técnica. [lazysizes](/use-lazysizes-to-lazyload-images/) es una biblioteca popular de JavaScript cargar imágenes y [`iframes`](http://afarkas.github.io/lazysizes/#examples) de manera diferida. Es compatible con incrustaciones y [widgets de](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks) YouTube. También tiene [compatibilidad opcional](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js) para IntersectionObserver.
+
+{% Aside 'caution' %} Ten cuidado al cargar recursos de forma diferida con JavaScript. Si JavaScript no se carga, quizás debido a condiciones de red inestables, tus recursos no se cargarán. {% endAside %}
+
+El uso del atributo de [`loading` para imágenes de carga diferida e iframes](/browser-level-image-lazy-loading/) es una excelente alternativa a las técnicas de JavaScript, ¡y recientemente ya se encuentra disponible en Chrome 76!
+
+## Optimiza la forma en que sirves scripts de terceros
+
+### Alojamiento en CDN de terceros
+
+Es común que terceros proporcionen URL de archivos de JavaScript que ellos alojan, los cuales generalmente se encuentran en una [red de entrega de contenido (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network). Los beneficios de este enfoque son que puedes comenzar rápidamente, simplemente es copiar y pegar la URL, y no hay gastos de mantenimiento. El proveedor externo maneja la configuración del servidor y las actualizaciones de secuencias de comandos.
+
+Pero debido a que no están en el mismo origen que el resto de tus recursos, cargar archivos desde una CDN pública tiene un costo de red. El navegador debe realizar una búsqueda de DNS, establecer una nueva conexión HTTP y, en orígenes seguros, realizar un protocolo de enlace SSL con el servidor del proveedor.
+
+Cuando utilizas archivos desde servidores de terceros, rara vez tienes control sobre el almacenamiento en caché. Depender de la estrategia de almacenamiento en caché de otra persona podría provocar que los scripts se recuperen innecesariamente de la red con demasiada frecuencia.
+
+### Auto-hospedaje de scripts de terceros
+
+Los scripts de terceros auto-hospedados es una opción que te da más control sobre el proceso de carga de un script. Al auto-hospedarse, puede:
+
+- Reducir los tiempos de búsqueda de DNS y de ida y vuelta.
+- Mejora las cabeceras de [almacenamiento en caché HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching).
+- Aprovechar [HTTP/2 server push](/performance-http2/).
+
+Por ejemplo, Casper se las arregló para [reducir en 1,7 segundos](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) el tiempo de carga al autohospedar un script de Prueba A/B.
+
+Sin embargo, el auto-hospedaje tiene una gran desventaja: los scripts pueden quedar desactualizados y no recibirán actualizaciones automáticas cuando haya un cambio de API o una solución y cambio de seguridad.
+
+{% Aside 'caution' %}
+
+La actualización manual de los scripts puede agregar una gran cantidad de gastos generales a su proceso de desarrollo y es posible que se pierda actualizaciones importantes. Si no estás <br> utilizando el alojamiento CDN para servir todos los recursos, también te estás perdiendo del [almacenamiento en caché perimetral](https://www.cloudflare.com/learning/cdn/glossary/edge-server/) y debes de optimizar la compresión de tu servidor. {% endAside%}
+
+### Utiliza los service workers para almacenar en caché los scripts de los servidores de terceros
+
+Una alternativa al auto-hospedaje que te permite un mayor control sobre el almacenamiento en caché al mismo tiempo que obtienes los beneficios de CDN de terceros es [utilizar los service workers para almacenar en caché los scripts de servidores de terceros](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations). Esto te da control sobre la frecuencia con la que se recuperan los scripts de la red y hace posible crear una estrategia de carga que limita las solicitudes de recursos de terceros no esenciales hasta que la página llega a un momento clave para el usuario. El uso de `preconnect` para establecer conexiones tempranas en este caso también puede mitigar los costos de la red hasta cierto punto.
diff --git a/src/site/content/es/fast/extract-critical-css/index.md b/src/site/content/es/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..ca49d391e2a
--- /dev/null
+++ b/src/site/content/es/fast/extract-critical-css/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Extraer CSS crítico
+subhead: Aprenda a mejorar los tiempos de renderizado con la técnica de CSS crítico.
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: Una foto cenital de llaves y destornilladores.
+description: |2-
+
+  Aprenda cómo mejorar los tiempos de renderizado con la técnica de CSS crítico y cómo elegir la mejor herramienta para su proyecto.
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+El navegador debe descargar y analizar los archivos CSS antes de poder mostrar la página, lo que convierte al CSS en un recurso de bloqueo de renderizado. Si los archivos CSS son grandes o las condiciones de la red son malas, las solicitudes de archivos CSS pueden aumentar significativamente el tiempo que tarda una página web en procesarse.
+
+{% Aside 'key-term' %} El CSS crítico es una técnica que extrae el CSS del contenido de la mitad superior de la página para mostrar el contenido al usuario lo más rápido posible. {% endAside %}
+
+<figure>{% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="Una ilustración de una computadora portátil y un dispositivo móvil con páginas web que desbordan los bordes de las pantallas", width="800", height="469", class="" %}</figure>
+
+{% Aside 'note' %} En la mitad superior de la página está todo el contenido que un espectador ve al cargar la página, antes de desplazarse. No hay una altura de pixel definida universalmente de lo que se considera contenido en la mitad superior de la página, ya que hay una gran cantidad de dispositivos y tamaños de pantalla. {% endAside %}
+
+Insertar estilos extraídos en el `<head>` del documento HTML elimina la necesidad de realizar una solicitud adicional para obtener estos estilos. El resto del CSS se puede cargar de forma asincrónica.
+
+<figure>{% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="Archivo HTML con CSS crítico insertado en el encabezado", width="800", height="325" %}<figcaption> CSS crítico en línea</figcaption></figure>
+
+La mejora de los tiempos de renderizado puede marcar una gran diferencia en el [rendimiento percibido](/rail/#focus-on-the-user), especialmente en condiciones de red deficientes. En las redes móviles, la latencia alta es un problema independientemente del ancho de banda.
+
+<figure>{% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="Comparación de vista de tira de película sobre la carga de una página con CSS que bloquea el renderizado (arriba) y la misma página con CSS crítico en línea (abajo) en una conexión 3G. La tira de película superior muestra seis fotogramas en blanco antes de mostrar finalmente el contenido. La tira de película inferior muestra contenido significativo en el primer fotograma.", width="800", height="363" %}<figcaption> Comparación de la carga de una página con CSS que bloquea el renderizado (arriba) y la misma página con CSS crítico en línea (abajo) en una conexión 3G</figcaption></figure>
+
+Si tiene un [First Contentful Paint o FCP (primer despliegue de contenido)](/fcp/) deficiente y ve la oportunidad de "Eliminar el recurso de bloqueo de renderizado" en las auditorías de Lighthouse, es una buena idea probar el CSS crítico.
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="Auditoría Lighthouse con oportunidades de 'Eliminar recurso de bloqueo de renderizado' o 'Aplazar CSS no utilizado'", width="743", height="449" %}
+
+{% Aside 'gotchas' %} Tenga en cuenta que si inserta una gran cantidad de CSS, la transmisión del resto del documento HTML se retrasa. Si todo está priorizado, entonces no hay nada lo está. La inserción también tiene algunas desventajas, ya que evita que el navegador almacene en caché el CSS para reutilizarlo en cargas de página posteriores, por lo que es mejor usarlo con moderación. {% endAside %}
+
+<p id="14KB">Para minimizar el número de viajes de ida y vuelta para renderizar por primera vez, intente mantener el contenido de la mitad superior de la página por debajo de <strong>14 KB</strong> (comprimido).</p>
+
+{% Aside 'note' %} Las nuevas [conexiones TCP](https://hpbn.co/building-blocks-of-tcp/) no pueden utilizar inmediatamente todo el ancho de banda disponible entre el cliente y el servidor, todas pasan por un [inicio lento](https://hpbn.co/building-blocks-of-tcp/#slow-start) para evitar sobrecargar la conexión con más datos de los que puede transportar. En este proceso, el servidor inicia la transferencia con una pequeña cantidad de datos, y si llega al cliente en perfecto estado, duplica la cantidad en el siguiente viaje de ida y vuelta. Para la mayoría de los servidores, 10 paquetes o aproximadamente 14 KB es el máximo que se puede transferir en el primer viaje de ida y vuelta. {% endAside %}
+
+El impacto en el rendimiento que puede lograr con esta técnica depende del tipo de su sitio web. En términos generales, cuanto más CSS tenga un sitio, mayor será el posible impacto del CSS en línea.
+
+## Descripción general de herramientas
+
+Hay una serie de excelentes herramientas que pueden determinar automáticamente el CSS crítico de una página. Esta es una buena noticia, porque hacerlo manualmente sería un proceso tedioso. Requiere un análisis de todo el DOM para determinar los estilos que se aplican a cada elemento en la ventana gráfica.
+
+### Critical
+
+[Critical](https://github.com/addyosmani/critical) extrae, minimiza e inserta CSS en la parte superior de la página y está disponible como [módulo npm](https://www.npmjs.com/package/critical). Se puede usar con Gulp (directamente) o con Grunt (como [complemento](https://github.com/bezoerb/grunt-critical)) y también hay un [complemento de webpack](https://github.com/anthonygore/html-critical-webpack-plugin).
+
+Es una herramienta sencilla que simplifica el proceso. Ni siquiera tiene que especificar las hojas de estilo, Critical las detecta automáticamente. También admite la extracción de CSS crítico para múltiples resoluciones de pantalla.
+
+### CriticalCSS
+
+[CriticalCSS](https://github.com/filamentgroup/criticalCSS) es otro [módulo npm](https://www.npmjs.com/package/criticalcss) que extrae CSS de la mitad superior de la página. También está disponible como CLI.
+
+No tiene opciones para incorporar y minimizar CSS crítico, pero permite forzar la inclusión de reglas que en realidad no pertenecen al CSS crítico y le brinda un control más granular sobre la inclusión de declaraciones `@font-face`.
+
+### Penthouse
+
+[Penthouse](https://github.com/pocketjoso/penthouse) es una buena opción si su sitio o aplicación tiene una gran cantidad de estilos o estilos que se inyectan dinámicamente en el DOM (común en las aplicaciones de Angular). Utiliza [Puppeteer](https://github.com/GoogleChrome/puppeteer) de manera discreta e incluso cuenta con una [versión alojada en línea](https://jonassebastianohlsson.com/criticalpathcssgenerator/).
+
+Penthouse no detecta las hojas de estilo automáticamente, debe especificar los archivos HTML y CSS para los que desea generar CSS crítico. La ventaja es que es bueno para ejecutar muchos trabajos en paralelo.
diff --git a/src/site/content/es/fast/how-to-measure-speed/index.md b/src/site/content/es/fast/how-to-measure-speed/index.md
new file mode 100644
index 00000000000..c74d72c750d
--- /dev/null
+++ b/src/site/content/es/fast/how-to-measure-speed/index.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: "¿Cómo medir la velocidad?"
+authors:
+  - bojanpavic
+  - ansteychris
+description: |2
+
+  El rendimiento en el mundo real es muy variable debido a las diferencias en los
+
+  dispositivos, conexiones de red y otros factores. En esta publicación exploramos
+
+  herramientas que pueden ayudarlo a recopilar datos de laboratorio o de campo para evaluar el rendimiento de la página.
+web_lighthouse: N / A
+date: 2019-05-01
+updated: 2022-07-18
+tags:
+  - performance
+---
+
+El rendimiento en el mundo real es muy variable debido a las diferencias en los dispositivos de los usuarios, las conexiones de red y otros factores. Por ejemplo, si carga su sitio web usando una conexión de red de cable en su oficina y lo compara con la carga usando WiFi en una cafetería, es probable que las experiencias sean muy diferentes. Hay muchas herramientas en el mercado que pueden ayudarlo a recopilar datos de laboratorio o de campo para evaluar el rendimiento de la página.
+
+## Datos de laboratorio frente a datos de campo
+
+{% Img src="image/admin/6OMEfvIKRuDWWSiVDto4.png", alt="Gráficos de herramientas de velocidad", width="800", height="232" %}
+
+**Los datos de laboratorio** son datos de rendimiento recopilados dentro de un entorno controlado con dispositivos predefinidos y configuraciones de red, mientras que los **datos de campo** son datos de rendimiento recopilados de cargas reales de páginas experimentadas por sus usuarios en la vida real. Cada tipo tiene sus propias fortalezas y limitaciones.
+
+**Los datos de laboratorio** ofrecen resultados reproducibles y un entorno de depuración, pero es posible que no capturen los cuellos de botella del mundo real y no puedan correlacionarse con los KPI de la página en el mundo real. Con los datos de laboratorio, debe comprender los dispositivos y redes típicos de sus usuarios y reflejar adecuadamente esas condiciones cuando pruebe el rendimiento. Tenga en cuenta que incluso en áreas con 4G, los usuarios pueden experimentar conexiones más lentas o intermitentes cuando están en ascensores, mientras viajan o en entornos comparables.
+
+**Los datos de campo** (también denominados Real User Monitoring o RUM) capturan la verdadera experiencia del usuario en el mundo real y permiten la correlación con los KPI comerciales, pero tienen un conjunto restringido de métricas y capacidades de depuración limitadas.
+
+## Instrumentos
+
+### Datos de laboratorio
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) toma una URL y ejecuta una serie de auditorías en la página, generando un informe sobre qué tan bien le fue a la página. Hay varias formas de ejecutar Lighthouse, incluida una opción para auditar fácilmente una página desde Chrome DevTools.
+
+### Datos de campo
+
+[El Informe de experiencia del usuario de Chrome (CrUX)](https://developer.chrome.com/docs/crux/) proporciona métricas que muestran cómo los usuarios de Chrome en el mundo real experimentan los destinos populares en la web.
+
+### Otras herramientas
+
+[PageSpeed Insights](https://pagespeed.web.dev/) proporciona datos de laboratorio y de campo sobre una página. Utiliza Lighthouse para recopilar y analizar datos de laboratorio sobre la página, mientras que los datos de campo del mundo real se basan en el conjunto de datos del Informe de experiencia del usuario de Chrome.
+
+[Chrome Developer Tools](https://developer.chrome.com/docs/devtools/) son un conjunto de herramientas para desarrolladores web integradas directamente en el navegador Google Chrome. Le permite perfilar el tiempo de ejecución de una página, así como identificar y depurar cuellos de botella de rendimiento.
diff --git a/src/site/content/es/fast/identify-slow-third-party-javascript/index.md b/src/site/content/es/fast/identify-slow-third-party-javascript/index.md
new file mode 100644
index 00000000000..b60e06c74c4
--- /dev/null
+++ b/src/site/content/es/fast/identify-slow-third-party-javascript/index.md
@@ -0,0 +1,76 @@
+---
+layout: post
+title: Identifique JavaScript lento de terceros
+subhead: Potencie sus habilidades de detective de desempeño con Lighthouse y Chrome DevTools.
+authors:
+  - mihajlija
+date: 2019-08-14
+hero: image/admin/8ZJRM6xxTNs8wBPph7ZO.jpg
+alt: Inspección de una computadora portátil con una lupa.
+description: |2
+
+  Aprenda a utilizar Lighthouse y Chrome DevTools para identificar recursos lentos de terceros.
+tags:
+  - performance
+---
+
+Como desarrollador, a menudo no tiene control sobre [qué scripts de terceros](/third-party-javascript/#network) carga su sitio. Antes de que pueda optimizar el contenido de terceros, debe hacer un trabajo de detective para averiguar qué hace que su sitio sea lento. 🕵️
+
+En este post, aprenderá a usar [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) y [Chrome DevTools](https://developer.chrome.com/docs/devtools/) para identificar recursos lentos de terceros. El post le irá mostrando técnicas cada vez más sólidas que se utilizan mejor combinadas.
+
+## Si solo tiene 5 minutos
+
+La [auditoría de rendimiento](https://developer.chrome.com/docs/lighthouse/performance/) de Lighthouse le ayuda a descubrir oportunidades para acelerar la carga de páginas. Es probable que aparezcan scripts lentos de terceros en la sección **Diagnósticos** en las auditorías **Reducir el tiempo de ejecución de JavaScript** y **Evitar enormes cargas útiles de red**.
+
+Para ejecutar una auditoría:
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. Haga clic en **Móvil**.
+2. Seleccione la casilla de verificación **Rendimiento**. (Puede deseleccionar el resto de las casillas de verificación en la sección Auditorías).
+3. Haga clic en **3G rápida simulada, Alentamiento del CPU 4x**.
+4. Seleccione la casilla de verificación **Borrar almacenamiento**.
+5. Haga clic en **Ejecutar auditorías**.
+
+{% Img src="image/admin/XLNFxdEOc7739bcIwERq.png", alt="Captura de pantalla del panel Auditorías de DevTools de Chrome", width="800", height="1068" %}
+
+### Uso de terceros
+
+La auditoría de **uso de de terceros** de Lighthouse muestra una lista de los proveedores de terceros que utiliza una página. Esta descripción general puede ayudarle a comprender mejor el panorama general e identificar el código de terceros redundante. La auditoría está disponible en la [extensión Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) y pronto se agregará a DevTools en Chrome 77.
+
+<figure>{% Img src="image/admin/4JXHK0FkgJIfKED16BnF.png", alt="Captura de pantalla que muestra que se encontraron 51 usos de terceros y una lista de startups imaginarias.", width="728", height="646" %}<figcaption> Nombres de proveedores de terceros generados con el <a href="http://tiffzhang.com/startup/?s=641553836036">generador de startups</a>. Cualquier similitud con startups reales, vivas o muertas, es pura coincidencia.</figcaption></figure>
+
+### Reducir el tiempo de ejecución de JavaScript
+
+La auditoría [Reducir el tiempo de ejecución de JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/) de Lighthouse destaca los scripts que tardan mucho en analizarse, compilarse o evaluarse. Seleccione la casilla de verificación **Mostrar recursos de terceros** para descubrir scripts de terceros que usen intensivamente la CPU.
+
+{% Img src="image/admin/O7vN1En6dtbL3Q8TbufC.png", alt="Captura de pantalla que muestra que la casilla de verificación 'Mostrar recursos de terceros' está marcada.", width="800", height="981" %}
+
+### Evite cargas útiles de red enormes
+
+La auditoría [Evitar enormes cargas útiles de red](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/) de Lighthouse identifica las solicitudes de red, incluidas las de terceros, que pueden ralentizar el tiempo de carga de la página. La auditoría falla cuando su carga útil de red supera los 4,000 KB.
+
+{% Img src="image/admin/9Pnoz73MLeNzooUQLuam.png", alt="Captura de pantalla de la auditoría de Chrome DevTools 'Evitar enormes cargas útiles de red'", width="799", height="631" %}
+
+## Bloquear solicitudes de red en Chrome DevTools
+
+El [bloqueo de solicitudes de red](https://developer.chrome.com/docs/devtools/network/#block) de Chrome DevTools le permite ver cómo se comporta su página cuando un script, hoja de estilo u otro recurso en particular no está disponible. Después de identificar los scripts de terceros que sospecha que afectan el rendimiento, mida cómo cambia el tiempo de carga bloqueando las solicitudes a esos scripts.
+
+Para habilitar el bloqueo de solicitudes: {% Instruction 'devtools-network', 'ol' %}
+
+1. Haga clic con el botón derecho en cualquier solicitud en el panel **Red**.
+2. Seleccione **Bloquear URL de solicitud**.
+
+{% Img src="image/admin/UbedvjrtP9si1l0X2QVA.png", alt="Una captura de pantalla del menú contextual en el panel de rendimiento de Chrome DevTools. La opción 'Bloquear URL de solicitud' está resaltada.", width="800", height="529" %}
+
+Aparecerá una **pestaña de bloqueo de solicitudes** en el cajón de DevTools. Puede administrar qué solicitudes se han bloqueado allí.
+
+Para medir el impacto de los scripts de terceros:
+
+1. Mida cuánto tiempo tarda su página en cargarse utilizando el panel **Red**. Para emular las condiciones del mundo real, active la [limitación de red](https://developer.chrome.com/docs/devtools/network/#throttle) y la [limitación de CPU](https://developers.google.com/web/updates/2017/07/devtools-release-notes#throttling). (En conexiones más rápidas y hardware de escritorio, el impacto de scripts tardados puede no ser tan representativo como lo sería en un teléfono móvil).
+2. Bloquee las URL o los dominios responsables de los scripts de terceros que crea que son un problema.
+3. Vuelva a cargar la página y mida de nuevo el tiempo que tarda en cargarse sin los scripts de terceros bloqueados.
+
+Con suerte, debería ver una mejora en la velocidad, pero el bloqueo ocasional de scripts de terceros podría no tener el efecto esperado. Si ese es el caso, reduzca la lista de URL bloqueadas hasta que aísle la que está causando la lentitud.
+
+Tenga en cuenta que realizar tres o más corridas de medición y observar los valores promedio probablemente producirá resultados más estables. Dado que el contenido de terceros ocasionalmente puede atraer diferentes recursos por carga de página, este enfoque puede brindarle una estimación más realista. [DevTools ahora admite múltiples registros](https://twitter.com/ChromeDevTools/status/963820146388221952) en el panel  **Rendimiento**, lo que facilita las cosas.
diff --git a/src/site/content/es/fast/image-cdns/index.md b/src/site/content/es/fast/image-cdns/index.md
new file mode 100644
index 00000000000..a824d8202a2
--- /dev/null
+++ b/src/site/content/es/fast/image-cdns/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: Utilice CDN de imágenes para optimizar imágenes
+authors:
+  - katiehempenius
+description: Las CDN de imágenes son excelentes para optimizar imágenes. El cambio a una CDN de imágenes puede generar un ahorro del 40 al 80% en bytes de imagen.
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## ¿Por qué utilizar una CDN de imágenes?
+
+Las redes de distribución de contenido de imágenes (CDN) son excelentes para optimizar imágenes. El cambio a una CDN de imágenes puede generar un [ahorro del 40 al 80%](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s) en el tamaño del archivo de imagen. En teoría, es posible lograr los mismos resultados utilizando solo scripts de compilación, pero es poco común en la práctica.
+
+## ¿Qué es una CDN de imágenes?
+
+Las CDN de imágenes se especializan en la transformación, optimización y entrega de imágenes. También puede pensar en ellas como API para acceder y manipular las imágenes utilizadas en su sitio. Para las imágenes cargadas desde una CDN de imágenes, la URL de una imagen indica no solo qué imagen cargar, sino también los parámetros como el tamaño, el formato y la calidad. Esto facilita la creación de variaciones de una imagen para diferentes casos de uso.
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="Muestra el flujo de solicitud/respuesta entre la CDN de imágenes y el cliente. Los parámetros como el tamaño y el formato se utilizan para solicitar variaciones de la misma imagen.", width="800", height="408" %} <figcaption> Ejemplos de transformaciones que las CDN de imágenes pueden realizar en función de los parámetros de las URL de imágenes.</figcaption></figure>
+
+Las CDN de imágenes se diferencian de los scripts de optimización de imágenes en tiempo de compilación, en que crean nuevas versiones de imágenes a medida que se necesitan. Como resultado, las CDN generalmente se adaptan mejor que los scripts de compilación a la creación de imágenes muy personalizadas para cada cliente en individual.
+
+## Cómo las CDN de imágenes utilizan las URL para indicar opciones de optimización
+
+Las URL de imagen utilizadas por las CDN de imágenes transmiten información importante sobre una imagen, y las transformaciones y optimizaciones que se le deben aplicar. Los formatos de URL variarán según la CDN de imágenes, pero en un nivel alto, todos tienen características similares. Repasemos algunas de las características más comunes.
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="Las URL de imagen suelen constar de los siguientes componentes: origen, imagen, clave de seguridad y transformaciones.", width="800", height="127" %}</figure>
+
+### Origen
+
+Una CDN de imágenes puede vivir en su propio dominio o en el dominio de su CDN de imágenes. Las CDN de imágenes de terceros suelen ofrecer la opción de utilizar un dominio personalizado por una tarifa. El uso de su propio dominio facilita cambiar CDN de imágenes en una fecha posterior, porque no será necesario realizar cambios en la URL.
+
+El ejemplo anterior usa el dominio de la CDN de imágenes ("example-cdn.com") con un subdominio personalizado, en lugar de un dominio personalizado.
+
+### Imagen
+
+Las CDN de imágenes generalmente se pueden configurar para recuperar automáticamente imágenes de sus ubicaciones existentes cuando sean necesarias. Esta capacidad a menudo se logra al incluir la URL completa de la *imagen existente* dentro de la URL de la imagen generada por la CDN de imágenes. Por ejemplo, es posible que vea una URL similar a esta: `https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`. Esta URL recuperaría y optimizaría la imagen que existe en `https://flowers.com/daisy.jpg`.
+
+Otra forma ampliamente admitida de subir imágenes a una CDN de imágenes, es enviarlas a través de una solicitud HTTP POST a la API de la CDN de imágenes.
+
+### Clave de seguridad
+
+Una clave de seguridad evita que otras personas creen nuevas versiones de sus imágenes. Si esta función está habilitada, cada nueva versión de una imagen requiere una clave de seguridad única. Si alguien intenta cambiar los parámetros de la URL de la imagen, pero no proporciona una clave de seguridad válida, no podrá crear una nueva versión. El CDN de imágenes se encargará de los detalles de generación y seguimiento de claves de seguridad por usted.
+
+### Transformaciones
+
+Las CDN de imágenes ofrecen decenas, y en algunos casos cientos, de diferentes transformaciones de imágenes. Estas transformaciones se especifican a través de la cadena de URL, y no existen restricciones sobre el uso de múltiples transformaciones al mismo tiempo. En el contexto del rendimiento web, las transformaciones de imagen más importantes son el tamaño, la densidad de píxeles, el formato y la compresión. Estas transformaciones son la razón por la que el cambio a una CDN de imágenes, generalmente da como resultado una reducción significativa en el tamaño de la imagen.
+
+Suele haber una configuración objetivamente mejor para las transformaciones de rendimiento, por lo que algunas CDN de imágenes admiten un modo "automático" para estas transformaciones. Por ejemplo, en lugar de especificar que las imágenes se transformen al formato WebP, puede permitir que la CDN seleccione y proporcione automáticamente el formato óptimo. Las señales que una CDN de imágenes puede usar para determinar la mejor manera de transformar una imagen incluyen:
+
+- [Sugerencias para el cliente](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/) (por ejemplo, ancho de la ventana gráfica, DPR y ancho de la imagen)
+- El encabezado [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data)
+- El encabezado de la solicitud de [agente de usuario](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent)
+- [API de información de red](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+
+Por ejemplo, la CDN de imágenes puede servir JPEG XR a un navegador Edge, WebP a un navegador Chrome y JPEG a un navegador muy antiguo. Las configuraciones automáticas son populares porque permiten aprovechar la gran experiencia de las CDN de imágenes en la optimización de imágenes, sin la necesidad de cambios de código para adoptar nuevas tecnologías una vez que son compatibles con la CDN de imágenes.
+
+## Tipos de CDN de imágenes
+
+Las CDN de imágenes se pueden dividir en dos categorías: autogestionadas y administradas por terceros.
+
+### CDN de imágenes autogestionadas
+
+Las CDN autogestionadas pueden ser una buena opción para sitios con personal de ingeniería que se siente cómodo manteniendo su propia infraestructura.
+
+[Thumbor](https://github.com/thumbor/thumbor) es la única CDN de imágenes autogestionada disponible en la actualidad. Si bien es de código abierto y de uso gratuito, generalmente tiene menos funciones que la mayoría de las CDN comerciales y su documentación es algo limitada. [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor), [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87) y [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/) son tres sitios que utilizan Thumbor. Consulte [Cómo instalar la CDN de imágenes de Thumbor](/install-thumbor) para obtener instrucciones sobre cómo configurarla.
+
+### CDN de imágenes de terceros
+
+Las CDN de imágenes de terceros proporcionan CDN de imágenes como un servicio. Así como los proveedores de la nube proporcionan servidores y otra infraestructura por una tarifa, las CDN de imágenes proporcionan optimización y entrega de imágenes por una tarifa. Debido a que las CDN de imágenes de terceros mantienen la tecnología subyacente, comenzar es bastante sencillo y, por lo general, se puede lograr en 10-15 minutos, aunque una migración completa para un sitio grande puede llevar mucho más tiempo. Las CDN de imágenes de terceros generalmente tienen un precio basado en niveles de uso, y la mayoría de las CDN de imágenes proporcionan un nivel o prueba gratuita para brindarle la oportunidad de probar su producto.
+
+## Elegir una CDN de imágenes
+
+Existen muchas buenas opciones para CDN de imágenes. Algunas tendrán más funciones que otras, pero todas probablemente le ayudarán a ahorrar bytes en sus imágenes y, por lo tanto, cargarán sus páginas más rápido. Además de los conjuntos de funciones, otros factores a considerar al elegir una CDN de imágenes son el costo, el soporte, la documentación y la facilidad de configuración o migración.
+
+También puede ser útil probarlas usted mismo antes de tomar una decisión. A continuación, puede encontrar codelabs con instrucciones sobre cómo comenzar rápidamente con varias CDN de imágenes.
diff --git a/src/site/content/es/fast/index.md b/src/site/content/es/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/es/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/es/fast/lazy-loading-images/index.md b/src/site/content/es/fast/lazy-loading-images/index.md
new file mode 100644
index 00000000000..0e9ac5b0b7d
--- /dev/null
+++ b/src/site/content/es/fast/lazy-loading-images/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Carga diferida de imágenes
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2022-08-11
+description: |2-
+
+  Esta publicación explica la carga diferida y las opciones disponibles para cargar las imágenes de forma diferida.
+tags:
+  - performance
+  - images
+feedback:
+  - api
+---
+
+Las imágenes pueden aparecer en una página web debido a que están en línea (in-line) en el HTML como `<img>` o como imágenes de fondo CSS. En esta publicación, descubrirás cómo cargar de forma diferida ambos tipos de imagen.
+
+## Imágenes en línea {: #images-inline }
+
+Los candidatos de carga diferida más comunes son las imágenes que se usan en los elementos `<img>`. Con las imágenes en línea, tenemos tres opciones para una carga diferida  que se pueden usar en combinación para obtener la mejor compatibilidad entre los navegadores:
+
+- [Usar la carga diferida a nivel del navegador](#images-inline-browser-level)
+- [Usar Intersection Observer](#images-inline-intersection-observer)
+
+### Usar la carga diferida a nivel del navegador {: #images-inline-browser-level }
+
+Tanto Chrome como Firefox permiten la carga diferida con el atributo de `loading`. Este atributo se puede agregar a los `<img>` y también a los elementos `<iframe>`. Un valor de `lazy` le dice al navegador que cargue la imagen inmediatamente si está en la ventana gráfica y que busque otras imágenes cuando el usuario se desplace cerca de ellas.
+
+{% Aside %} Nota `<iframe loading="lazy">` actualmente no es estándar. Si bien está implementado en Chromium, aún no tiene una especificación y está sujeto a cambios futuros cuando esto suceda. Sugerimos no realizar una carga diferida de iframes utilizando el atributo de `loading` hasta que se convierta en parte de la especificación. {% endAside %}
+
+Consulta el campo de `loading` de [la tabla de compatibilidad de navegadores](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility) de MDN para obtener detalles sobre la compatibilidad de navegadores. Si el navegador no permite la carga diferida, el atributo se ignorará y las imágenes se cargarán inmediatamente, de manera habitual.
+
+Para la mayoría de los sitios web, agregar este atributo a las imágenes en línea aumentará el rendimiento y evitará que los usuarios carguen imágenes a las que es posible que nunca se desplacen. Si tienes una gran cantidad de imágenes y deseas asegurarte de que los usuarios de navegadores sin compatibilidad para la carga diferida se beneficien, deberás combinar esto con uno de los métodos que se explican a continuación.
+
+Para obtener más información, consulta [Carga diferida a nivel del navegador para la web](/browser-level-image-lazy-loading/).
+
+### Usar Intersection Observer {: #images-inline-intersection-observer }
+
+Para hacer un polyfill de carga diferida de los elementos de `<img>`, usamos JavaScript para verificar si están en la ventana gráfica. Si es así, los atributos de `src` (y algunas veces los atributos de `srcset`) se completan con los URL para el contenido de imagen deseado.
+
+Si has escrito código de carga diferida antes, es posible que hayas logrado tu tarea mediante el uso de controladores de eventos como `scroll` o `resize`. Si bien este enfoque es el más compatible en todos los navegadores, los navegadores modernos ofrecen una forma más eficaz y eficiente de realizar el trabajo de verificar la visibilidad de los elementos a través de [la API de Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/).
+
+Intersection Observer es más fácil de usar y leer que el código que se basa en varios controladores de eventos, porque solo necesita registrar un observador para mirar los elementos en lugar de escribir un tedioso código de detección de visibilidad de elementos. Todo lo que queda por hacer es decidir qué hacer cuando un elemento esté visible. Supongamos el siguiente patrón de marcado básico para tus elementos `<img>`:
+
+```html
+<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="¡Soy una imagen!">
+```
+
+Hay tres partes relevantes de este marcado en las que deberías de  enfocarte:
+
+1. El `class`, que es con lo que seleccionará el elemento en JavaScript.
+2. El `src`, que hace referencia a una imagen de reserva (placeholder) de posición que aparecerá cuando se cargue la página por primera vez.
+3. Los atributos de `data-src` y `data-srcset`, los cuales son atributos que definen una reserva que contienen la URL de la imagen que cargará una vez que el elemento esté en la ventana gráfica.
+
+Ahora veamos cómo usar Intersection Observer en JavaScript para cargar imágenes de forma diferida usando este patrón de marcado:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.srcset = lazyImage.dataset.srcset;
+          lazyImage.classList.remove("lazy");
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+});
+```
+
+En el evento de `DOMContentLoaded` del documento, este script consulta al DOM todos los `<img>` con una clase de `lazy`. Si Intersection Observer está disponible, crea un nuevo observador que ejecuta una retrollamada cuando los `img.lazy` ingresen a la ventana gráfica.
+
+{% Glitch { id: 'lazy-intersection-observer', path: 'index.html', previewSize: 0 } %}
+
+Intersection Observer está disponible en todos los navegadores modernos. Por lo tanto, usarlo como polyfill para `loading="lazy"` garantizará que la carga diferida esté disponible para la mayoría de los visitantes.
+
+## Imágenes en CSS {: #images-css }
+
+Si bien las etiquetas de `<img>` son la forma más común de usar imágenes en páginas web, las imágenes también se pueden invocar a través de la propiedad CSS de [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) (y mediante otras propiedades). La carga diferida a nivel del navegador no se aplica a las imágenes de fondo del CSS, por lo que debes de considerar otros métodos si tienes imágenes de fondo para la carga diferida.
+
+A diferencia de los elementos `<img>` que se cargan independientemente de su visibilidad, el comportamiento de carga de imágenes en CSS se realiza con más especulación. Cuando se crea el [documento y los modelos de objetos CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model) y el [render tree (árbol de renderización)](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction), el navegador examina cómo se aplica el CSS a un documento antes de solicitar recursos externos. Si el navegador ha determinado que una regla CSS que involucra un recurso externo no se aplica al documento como está construido actualmente, el navegador no lo solicita.
+
+Este comportamiento especulativo se puede utilizar para diferir la carga de imágenes en CSS mediante el uso de JavaScript para determinar cuándo un elemento está dentro de la ventana gráfica y, posteriormente, aplicar una clase a ese elemento que aplica un estilo invocando una imagen de fondo. Esto hace que la imagen se descargue en el momento en que se necesite en lugar de en la carga inicial. Por ejemplo, tomemos un elemento que contiene una imagen de fondo de héroe grande:
+
+```html
+<div class="lazy-background">
+  <h1>Here's a hero heading to get your attention!</h1>
+  <p>Here's hero copy to convince you to buy a thing!</p>
+  <a href="/buy-a-thing">Buy a thing!</a>
+</div>
+```
+
+El elemento de `div.lazy-background` normalmente contendría la imagen de fondo del héroe invocada por algún CSS. En este ejemplo de carga diferida, sin embargo, puedes aislar el `div.lazy-background` de la propiedad del elemento de `background-image` mediante una clase `visible` añadida al elemento cuando está en la ventana gráfica:
+
+```css
+.lazy-background {
+  background-image: url("hero-placeholder.jpg"); /* Imagen de reserva */
+}
+
+.lazy-background.visible {
+  background-image: url("hero.jpg"); /* Imagen final */
+}
+```
+
+Desde aquí, usa JavaScript para verificar si el elemento está en la ventana gráfica (¡utilizando Intersection Observer!) y agrega la clase de `visible` al `div.lazy-background` en el momento que carga la imagen:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          lazyBackgroundObserver.unobserve(entry.target);
+        }
+      });
+    });
+
+    lazyBackgrounds.forEach(function(lazyBackground) {
+      lazyBackgroundObserver.observe(lazyBackground);
+    });
+  }
+});
+```
+
+{% Glitch { id: 'lazy-background', path: 'index.html', previewSize: 0 } %}
+
+## Bibliotecas de carga diferida {: #libraries }
+
+Las siguientes bibliotecas se pueden utilizar para cargar imágenes de forma diferida.
+
+- [lazysizes](https://github.com/aFarkas/lazysizes) es una biblioteca de carga diferida que contiene todas las funciones usadas para cargar imágenes e iframes de forma diferida. El patrón que usa es bastante similar a los ejemplos de código que se muestran aquí, ya que se vincula automáticamente a una clase de `lazyload` a `<img>` y requiere que especifiques las URL de la imagen en `data-src` y/o `data-srcset`, el contenido de que se intercambian en los `src` y/o `srcset` respectivamente. Utiliza Intersection Observer (que puede usarse mediante un polyfill) y se puede ampliar con [varios complementos](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo) para hacer cosas como cargas diferidas de videos. [Obtén más información sobre el uso de lazysizes](/use-lazysizes-to-lazyload-images/).
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) es una opción ligera para imágenes de carga diferida, imágenes de fondo, videos, iframes y scripts. Este utiliza Intersection Observer, admite imágenes receptivas y permite la carga diferida a nivel del navegador.
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) es otra opción ligera que solo usa Intersection Observer. Como tal, tiene un alto rendimiento, pero se tiene que hacer un polyfill antes de poder usarlo en navegadores más antiguos.
+- Si necesitas una biblioteca de carga diferida específica para React, considera [react-lazyload](https://github.com/jasonslyvia/react-lazyload). A pesar de que no utiliza Intersección Observer, *este* proporciona un método conocido de imágenes carga diferida para aquellos que están acostumbrados a desarrollar aplicaciones con React.
diff --git a/src/site/content/es/fast/lazy-loading-video/index.md b/src/site/content/es/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..b2d60dec9fc
--- /dev/null
+++ b/src/site/content/es/fast/lazy-loading-video/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Carga diferida de video
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: |2-
+
+  Esta publicación explica la carga diferida y las opciones de las que dispone cuando carga un vídeo de forma diferida.
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Al igual que con los [elementos de imagen](/lazy-loading-images), también puede cargar videos de forma diferida. Los videos se cargan comúnmente con el elemento `<video>` (aunque [ha surgido un método alternativo que usa `<img>`](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/) con una implementación limitada). Sin embargo, la *forma* de cargar `<video>` de manera diferida depende del caso de uso. Analicemos un par de escenarios, cada uno de los cuales requiere una solución diferente.
+
+## Para video que no se reproduce automáticamente {: #video-no-autoplay }
+
+Para los videos en los que el usuario inicia la reproducción (es decir, los videos que *no* se reproducen automáticamente), quizá sea deseable especificar el [atributo `preload`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload) en el elemento `<video>`:
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+El ejemplo anterior utiliza un atributo `preload` con un valor `none` para evitar que los navegadores precarguen *cualquier* dato de vídeo. El atributo `poster` le da al elemento `<video>` un marcador de posición que ocupará el espacio mientras se carga el video. La razón de esto es que los comportamientos predeterminados para cargar videos pueden variar de un navegador a otro:
+
+- En Chrome, el valor predeterminado para `preload` solía ser `auto`, pero a partir de Chrome 64, ahora tiene como valor predeterminado `metadata`. Aun así, en la versión de escritorio de Chrome, una parte del video puede precargarse mediante el encabezado `Content-Range`. Firefox, Edge e Internet Explorer 11 se comportan de manera similar.
+- Al igual que con Chrome en el escritorio, las versiones 11.0 de Safari para escritorio precargarán un rango del video. A partir de la versión 11.2, solo se precargan los metadatos del video. [En Safari para iOS, los videos nunca se cargan previamente](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9).
+- Cuando el [modo de ahorro de datos](https://support.google.com/chrome/answer/2392284) está habilitado, `preload` toma el valor predeterminado de `none`.
+
+Debido a que los comportamientos predeterminados del navegador con respecto a `preload` no están escritos en piedra, ser explícito es probablemente su mejor opción. En estos casos en los que el usuario inicia la reproducción, usar `preload="none"` es la forma más fácil de aplazar la carga de video en todas las plataformas. El atributo `preload` no es la única forma de aplazar la carga de contenido de video. El documento [*Reproducción rápida con precarga de video*](/fast-playback-with-preload/) puede brindarle algunas ideas y conocimientos sobre cómo trabajar con la reproducción de video en JavaScript.
+
+Desafortunadamente, no resulta útil cuando desea usar videos en lugar de GIF animados, que se tratan a continuación.
+
+## Para video que actúa como reemplazo de GIF animado {: #video-gif-replacement}
+
+Si bien los GIF animados disfrutan de un uso amplio, son inferiores de varias maneras a los equivalentes de video, particularmente en el tamaño del archivo. Los GIF animados pueden extenderse en el rango de varios megabytes de datos. Los videos de calidad visual similar tienden a ser mucho más pequeños.
+
+Usar el elemento `<video>` como reemplazo del GIF animado no es tan sencillo como usar el elemento `<img>`. Los GIF animados tienen tres características:
+
+1. Se reproducen automáticamente cuando se cargan.
+2. Se repiten continuamente ([aunque ese no es siempre el caso](https://davidwalsh.name/prevent-gif-loop)).
+3. No tienen pista de audio.
+
+Lograr esto con el elemento `<video>` se parece a lo siguiente:
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Los atributos `autoplay`, `muted` y `loop` se explican por sí mismos. El atributo {a3`playsinline` es necesario para que se produzca la reproducción automática en iOS. Ahora tiene un reemplazo útil del video como GIF que funciona en todas las plataformas. Pero, ¿cómo proceder con la carga diferida? Para comenzar, modifique su marcado de `<video>` en consecuencia:
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Puede notar la adición del [atributo `poster`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster), que le permite especificar un marcador de posición para ocupar el espacio de elemento `<video>` hasta que el video se cargue de forma diferida. Al igual que con los [ejemplos de carga diferida de `<img>`](/lazy-loading-images/), oculta la URL del video en el atributo `data-src` en cada elemento `<source>`. A partir de ahí, use código JavaScript similar a los ejemplos de carga diferida de imágenes basada en Intersection Observer:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+Cuando carga de manera diferida un elemento `<video>`, debe iterar a través de todos los elementos `<source>` secundarios y cambiar sus atributos `data-src` a atributos `src`. Una vez que haya hecho eso, debe activar la carga del video al invocar el método `load` del elemento, después de lo cual los medios comenzarán a reproducirse automáticamente según el atributo `autoplay`.
+
+Con este método, tiene una solución de video que emula el comportamiento de los GIF animados, pero no implica el mismo uso intensivo de datos que los GIF animados y puede cargar ese contenido de forma diferida.
+
+## Bibliotecas de carga diferida {: #libraries }
+
+Las siguientes bibliotecas pueden ayudarlo a cargar videos de manera diferida:
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) y [lozad.js](https://github.com/ApoorvSaxena/lozad.js) son opciones superligeras que solo usan Intersection Observer. Como tal, tienen un alto rendimiento, pero deberán envolverse en polietileno antes de poder usarlas en navegadores más antiguos.
+- [yall.js](https://github.com/malchata/yall.js) es una biblioteca que usa Intersection Observer y recurre a los controladores de eventos. Es compatible con IE11 y los principales navegadores.
+- Si necesita una biblioteca de carga diferida específica de React, podría considerar [react-lazyload](https://github.com/jasonslyvia/react-lazyload). A pesar de que no utiliza Intersection Observer, *proporciona* un método conocido de imágenes carga diferida para aquellos que están acostumbrados a desarrollar aplicaciones con React.
+
+Cada una de estas bibliotecas de carga diferida está bien documentada, con muchos patrones de marcado para sus diversos esfuerzos de carga diferida.
diff --git a/src/site/content/es/fast/lazy-loading/index.md b/src/site/content/es/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..2cb9db13912
--- /dev/null
+++ b/src/site/content/es/fast/lazy-loading/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: Utilice la carga diferida para mejorar la velocidad de carga
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: |2-
+
+  Esta publicación explica la carga diferida y por qué es posible que desee cargar elementos en su sitio de forma diferida.
+tags:
+  - performance
+  - images
+---
+
+La porción de [imágenes](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest) y [video](http://beta.httparchive.org/reports/page-weight#bytesVideo) en la carga útil típica de un sitio web puede ser significativa. Desafortunadamente, las partes interesadas del proyecto pueden no estar dispuestas a eliminar los recursos de medios de sus aplicaciones existentes. Tales impasses son frustrantes, especialmente cuando todas las partes involucradas quieren mejorar el rendimiento del sitio, pero no pueden ponerse de acuerdo sobre cómo hacerlo. Afortunadamente, la carga diferida es una solución que reduce la carga útil inicial de la página *y* el tiempo de carga, pero no escatima en contenido.
+
+## ¿Qué es la carga diferida? {: #what }
+
+La carga diferida es una técnica que pospone la carga de recursos no críticos en el momento de la carga de la página. En vez de cargar de inmediato, estos recursos no críticos se cargan en el momento en que se necesitan. En lo que a imágenes se refiere, "no crítico" es a menudo sinónimo de "fuera de pantalla". Si ha utilizado Lighthouse y visualizó algunas oportunidades de mejora, es posible que haya visto alguna guía en este ámbito en la forma de la [Defer offscreen images audit (auditoría Diferir imágenes fuera de pantalla)](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/):
+
+<figure>{% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Una captura de pantalla de la auditoría de diferir imágenes fuera de pantalla en Lighthouse.", width="800", height="102" %}<figcaption> Una de las auditorías de rendimiento de Lighthouse es identificar imágenes fuera de pantalla, que son candidatas para la carga diferida.</figcaption></figure>
+
+Probablemente ya haya visto la carga diferida en acción, y es algo así:
+
+- Llega a una página y comienza a desplazarse a medida que lee el contenido.
+- En algún momento, desplaza una imagen de marcador de posición a la ventana gráfica.
+- La imagen del marcador de posición es reemplazada repentinamente por la imagen final.
+
+Se puede encontrar un ejemplo de carga diferida de imágenes en la popular plataforma de publicación [Medium](https://medium.com/), que carga imágenes de marcador de posición ligeras al cargar la página y las reemplaza con imágenes cargadas de forma diferida a medida que se desplazan hacia la ventana gráfica.
+
+<figure>{% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="Una captura de pantalla del sitio web Medium durante la navegación, que muestra la carga diferida en acción. El marcador de posición borroso está a la izquierda y el recurso cargado está en la derecha.", width="800", height="493" %}<figcaption> Un ejemplo de carga diferida de imágenes en acción. Una imagen de marcador de posición se usa al cargar la página (izquierda) y, cuando se desplaza hacia la ventana gráfica, la imagen final se carga en el momento en que se necesita.</figcaption></figure>
+
+Si no está familiarizado con la carga diferida, es posible que se pregunte qué tan útil es la técnica y cuáles son sus beneficios. ¡Sigue leyendo para descubrirlo!
+
+## ¿Por qué cargar imágenes o videos de forma diferida en lugar de simplemente *cargarlos*? {: #why }
+
+Porque es posible que esté cargando cosas que el usuario nunca verá. Esto es problemático por un par de razones:
+
+- Desperdicia datos. En conexiones ilimitadas, esto no es lo peor que podría suceder (aunque podría estar usando ese precioso ancho de banda para descargar otros recursos que, de hecho, el usuario verá). Sin embargo, en planes de datos limitados, cargar cosas que el usuario nunca ve podría ser efectivamente una pérdida de dinero.
+- Desperdicia tiempo de procesamiento, batería y otros recursos del sistema. Una vez descargado un recurso multimedia, el navegador debe decodificarlo y representar su contenido en la ventana gráfica.
+
+La carga diferida de imágenes y videos reduce el tiempo de carga inicial de la página, el peso inicial de la página y el uso de recursos del sistema, todo lo cual tiene un impacto positivo en el rendimiento.
+
+## Implementación de carga diferida {: #implementing }
+
+Hay varias formas de implementar la carga diferida. Su elección de solución debe tener en cuenta los navegadores que admite, y también lo que está tratando de cargar de forma diferida.
+
+Los navegadores modernos implementan la [carga diferida a nivel del navegador](/browser-level-image-lazy-loading/), que se puede habilitar mediante el atributo `loading` en imágenes e iframes. Para proporcionar compatibilidad con navegadores más antiguos o para realizar una carga diferida en elementos sin una carga diferida incorporada, puede implementar una solución con su propio código JavaScript. También hay una serie de bibliotecas que le ayudarán a hacer esto. Consulte las publicaciones en este sitio para obtener detalles completos de todos estos enfoques:
+
+- [Carga diferida de imágenes](/lazy-loading-images/)
+- [Carga diferida de video](/lazy-loading-video/)
+
+Además, hemos compilado una lista de [posibles problemas con la carga diferida](/lazy-loading-best-practices) y cosas a tener en cuenta en su implementación.
+
+## Conclusión
+
+Si se usan con cuidado, las imágenes y los videos de carga diferida pueden reducir considerablemente el tiempo de carga inicial y la carga útil de las páginas en su sitio. Los usuarios no incurrirán en actividades de red innecesarias ni en costos de procesamiento de recursos multimedia que tal vez nunca vean, pero aún pueden ver esos recursos si lo desean.
+
+En lo que respecta a las técnicas de mejora del rendimiento, la carga diferida es razonablemente indiscutible. Si tiene muchas imágenes en línea en su sitio, es una manera perfecta de reducir las descargas innecesarias. ¡Los usuarios de su sitio y las partes interesadas del proyecto lo agradecerán!
diff --git a/src/site/content/es/fast/minify-css/index.md b/src/site/content/es/fast/minify-css/index.md
new file mode 100644
index 00000000000..e5b5b8aac20
--- /dev/null
+++ b/src/site/content/es/fast/minify-css/index.md
@@ -0,0 +1,169 @@
+---
+layout: post
+title: Minificar CSS
+authors:
+  - demianrenzulli
+description: |2-
+
+  Aprenda a minificar los archivos CSS para mejorar el rendimiento sin afectar la forma en que el navegador procesa los estilos.
+date: 2019-05-02
+tags:
+  - performance
+---
+
+Los archivos CSS pueden contener caracteres innecesarios, como comentarios, espacios en blanco e indentación. En producción, estos caracteres se pueden eliminar de forma segura para reducir el tamaño del archivo sin afectar la forma en que el navegador procesa los estilos. Esta técnica se llama **minificación**.
+
+## Cargar CSS no minificado
+
+Eche un vistazo al siguiente bloque CSS:
+
+```css
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+/* all titles need to have the same font, color and background */
+h1 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+
+h2 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+```
+
+Este contenido es fácil de leer, a costa de producir un archivo más grande de lo necesario:
+
+- Utiliza espacios con para la indentación y contiene comentarios, que el navegador ignora, por lo que se pueden eliminar.
+- Los elementos `<h1>` y `<h2>` tienen los mismos estilos: en lugar de declararlos por separado: "`h1 {...} h2 {...}`" podrían expresarse como "`h1, h2{...}`".
+- El **color de fondo**, `#000000` podría expresarse simplemente como `#000`.
+
+Después de realizar estos cambios, obtendría una versión más compacta de los mismos estilos:
+
+```css
+body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
+```
+
+Probablemente no desee escribir CSS así. En su lugar, puede escribir CSS como de costumbre y agregar un paso de minificación a su proceso de compilación. En esta guía, aprenderá cómo hacerlo mediante el uso de una herramienta de compilación popular: [webpack](https://webpack.js.org/).
+
+## Medición
+
+Va a aplicar la minificación CSS a un sitio que se ha utilizado en otras guías: [Fav Kitties](https://fav-kitties-animated.glitch.me/). Esta versión del sitio utiliza una biblioteca CSS genial: [animate.css](https://github.com/daneden/animate.css), para animar diferentes elementos de la página cuando un usuario vota por un gato 😺.
+
+Como primer paso, debe comprender cuál sería la oportunidad después de minificar este archivo:
+
+1. Abra [la página de medición](/measure).
+2. Ingrese la URL: `https://fav-kitties-animated.glitch.me` y haga clic en **Ejecutar auditoría**.
+3. Haga clic en **Ver informe**.
+4. Haga clic en **Rendimiento** y vaya a la sección **Oportunidades.**
+
+El informe resultante muestra que se pueden ahorrar **hasta 16 KB** del archivo **animate.css:**
+
+{% Img src="image/admin/RFMk5OMAIvOlkUZJTsh4.png", alt="Lighthouse: Minify CSSportunity.", width="800", height="172", class = "screenshot" %}
+
+Ahora inspeccione el contenido del CSS:
+
+1. Abre el [sitio Fav Kitties](https://fav-kitties-animated.glitch.me/) en Chrome. (Es posible que los servidores de Glitch tarden un poco en responder la primera vez). {% Instruction 'devtools-network', 'ol' %}
+2. Haga clic en el filtro **CSS.**
+3. Seleccione la casilla de verificación **Desactivar caché.** {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/WgneNAyftk8jneyXxMih.png", alt="Rastro no optimizada de DevTools CSS", width="800", height="138" %}
+
+La página solicita dos archivos CSS, de **1.9 KB** y **76.2 KB** respectivamente.
+
+1. Haga clic en **animate.css**.
+2. Haga clic en la pestaña **Respuesta** para ver el contenido del archivo.
+
+Tenga en cuenta que la hoja de estilo contiene caracteres para espacios en blanco e indentación:
+
+{% Img src="image/admin/UEB5Xxe5IHhGtMx3XfKD.png", alt="Respuesta no optimizada de DevTools CSS", width="800", height="286" %}
+
+A continuación, agregará algunos complementos de webpack a su proceso de compilación para minificar estos archivos.
+
+{% Aside 'note' %} **Nota:** el informe de Lighthouse anterior solo enumera `animate.css` como una oportunidad para minificar. La minificación de `style.css` también ahorrará algunos bytes, pero no lo suficiente para que Lighthouse lo considere un ahorro significativo. Sin embargo, minificar CSS es una buena práctica general; por lo que tiene sentido hacerlo con todos sus archivos CSS. {% endAside %}
+
+## Minificación CSS con webpack
+
+Antes de entrar en las optimizaciones, tómese un tiempo para comprender cómo funciona el proceso de creación del [sitio Fav Kitties](https://glitch.com/edit/#!/fav-kitties-animated?path=webpack.config.js:1:0%5D):
+
+{% Glitch { id: 'fav-kitties-animated', path: 'webpack.config.js', previewSize: 0 } %}
+
+De forma predeterminada, el paquete JS resultante que produce webpack contendría el contenido de los archivos CSS en línea. Como queremos mantener archivos CSS separados, usamos dos complementos complementarios:
+
+- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) extraerá cada hoja de estilo en su propio archivo, como uno de los pasos del proceso de compilación.
+- [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) se usa para corregir un problema en wepback 4, para evitar generar un archivo JS adicional para cada archivo CSS listado en **webpack-config.js**.
+
+Ahora realizará algunos cambios en el proyecto:
+
+1. Abra [el proyecto Fav Kitties en Glitch](https://glitch.com/~fav-kitties-animated). {% Instruction 'source', 'ol' %} {% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+Para minificar el CSS resultante, utilizará el complemento [Optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):
+
+1. En la consola Glitch, ejecute `npm install --save-dev optimize-css-assets-webpack-plugin`.
+2. Ejecute `refresh`, para que los cambios se sincronicen con el editor de Glitch.
+
+A continuación, vuelva al editor de Glitch, abra el archivo **webpack.config.js** y haga las siguientes modificaciones:
+
+Cargue el módulo al principio del archivo:
+
+```js
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+```
+
+Luego, pase una instancia del complemento a la matriz de **complementos:**
+
+```js
+  plugins: [
+    new HtmlWebpackPlugin({template: "./src/index.html"}),
+    new MiniCssExtractPlugin({filename: "[name].css"}),
+    new FixStyleOnlyEntriesPlugin(),
+    new OptimizeCSSAssetsPlugin({})
+  ]
+```
+
+Después de realizar los cambios, se activará una reconstrucción del proyecto. Así es como se verá el **webpack.config.js** resultante:
+
+{% Glitch { id: 'fav-kitties-animated-min', path: 'webpack.config.js', previewSize: 0 } %}
+
+A continuación, comprobará el resultado de esta optimización con herramientas de rendimiento.
+
+## Verificar
+
+{% Instruction 'preview' %}
+
+Si se perdió en algún paso anterior, puede hacer clic [aquí](https://fav-kitties-animated-min.glitch.me/) para abrir una versión optimizada del sitio.
+
+Para inspeccionar el tamaño y el contenido de los archivos:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. Haga clic en el filtro **CSS**.
+2. Seleccione la casilla de verificación **Deshabilitar caché** si aún no está seleccionada. {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/id5kWwB3NilmVPWPTM59.png", alt="Respuesta no optimizada de DevTools CSS", width="800", height="130" %}
+
+Puede inspeccionar estos archivos y ver que las nuevas versiones no contienen espacios en blanco. Ambos archivos son mucho más pequeños, en particular, [animate.css](http://fav-kitties-animated-min.glitch.me/animate.css) se ha reducido en **~26%**, ¡ahorrando **~20 KB**!
+
+Como paso final:
+
+1. Abra [la página de mediciones](/measure).
+2. Ingrese la URL del sitio optimizado.
+3. Haga clic en **Ver informe**.
+4. Haga clic en **Rendimiento** y busque la sección **Oportunidades.**
+
+El informe ya no muestra "Minificar CSS" como "Oportunidad" y ahora se ha trasladado a la sección "Auditorías aprobadas":
+
+{% Img src="image/admin/zegn2qIHYYK58w1GhgYd.png", alt="Auditorías aprobadas por Lighthouse para una página optimizada", width="800", height="163" %}
+
+Dado que los archivos CSS son [recursos bloqueadores de la renderización](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources), si aplica minificación en sitios que usan archivos CSS grandes, puede ver mejoras en métricas como [First Contentful Paint: Primer despliegue de contenido](/fcp/).
+
+## Próximos pasos y recursos
+
+En esta guía, hemos cubierto la minificación CSS con webpack, pero el mismo enfoque se puede seguir con otras herramientas de compilación, como [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css) para [Gulp](https://gulpjs.com/) o [grunt-contrib-cssmin](https://www.npmjs.com/package/grunt-contrib-cssmin) para [Grunt](https://gruntjs.com/).
+
+La minificación también se puede aplicar a otros tipos de archivos. Consulte la [guía Minificar y comprimir cargas útiles de red](/fast/reduce-network-payloads-using-text-compression) para obtener más información sobre las herramientas para minificar JS y algunas técnicas complementarias, como la compresión.
diff --git a/src/site/content/es/fast/optimize-css-background-images-with-media-queries/index.md b/src/site/content/es/fast/optimize-css-background-images-with-media-queries/index.md
new file mode 100644
index 00000000000..15099f4feec
--- /dev/null
+++ b/src/site/content/es/fast/optimize-css-background-images-with-media-queries/index.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: Optimice las imágenes de fondo CSS con consultas de medios
+authors:
+  - demianrenzulli
+description: Utilice consultas de medios para enviar imágenes que sean únicamente tan grandes como se necesite, una técnica comúnmente conocida como imágenes responsivas.
+date: 2020-03-05
+updated: 2020-03-05
+tags:
+  - performance
+---
+
+Muchos sitios solicitan recursos pesados, como imágenes, que no están optimizados para ciertas pantallas y envían archivos CSS de gran tamaño con estilos que algunos dispositivos nunca usarán. El uso de consultas de medios es una técnica popular para entregar activos y hojas de estilo personalizados en diferentes pantallas para reducir la cantidad de datos transferidos a los usuarios y mejorar el rendimiento de carga de la página. Esta guía le muestra cómo usar las consultas de medios para enviar imágenes que son tan grandes como se necesiten, una técnica comúnmente conocida como **imágenes responsivas**.
+
+## Prerrequisitos
+
+Esta guía asume que está familiarizado con [Chrome DevTools](https://developer.chrome.com/docs/devtools/). En su lugar, puede utilizar las DevTools de otro navegador si lo prefiere. Sólo tendrá que correlacionar las capturas de pantalla de Chrome DevTools de esta guía con las características pertinentes de su navegador.
+
+## Comprenda las imágenes de fondo responsivas
+
+Primero, analice el tráfico de red de la demostración no optimizada:
+
+1. Abra la [demostración no optimizada](https://use-media-queries-unoptimized.glitch.me/) en una nueva pestaña de Chrome.
+{% Instruction 'devtools-network', 'ol' %}
+{% Instruction 'reload-page', 'ol' %}
+
+{% Aside %} Consulte [Inspeccionar la actividad de la red con Chrome DevTools](https://developer.chrome.com/docs/devtools/network/) si necesita más ayuda con DevTools. {% endAside %}
+
+Verá que la única imagen que se solicita es `background-desktop.jpg`, que tiene un tamaño de **1006 KB**:
+
+<figure>{% Img src="image/admin/K8P4MHp2FSnZYTw3ZVkG.png", alt="Seguimiento de red de DevTools para la imagen de fondo no optimizada", width="800", height="126" %}</figure>
+
+Cambie el tamaño de la ventana del navegador y observe que el registro de red no muestra ninguna solicitud nueva realizada por la página. Esto significa que se utiliza el mismo fondo de imagen para todos los tamaños de pantalla.
+
+Puede ver los estilos que controlan la imagen de fondo en [style.css](https://use-media-queries-unoptimized.glitch.me/style.css):
+
+```css
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+Aquí está el significado de cada una de las propiedades utilizadas:
+
+- `background-position: center center` : centra la imagen vertical y horizontalmente.
+- `background-repeat: no-repeat` : muestra la imagen solo una vez.
+- `background-attachment: fixed` : evita que la imagen de fondo se desplace con la vista del usuario.
+- `background-size: cover` : cambia el tamaño de la imagen para cubrir todo el contenedor.
+- `background-image: url(images/background-desktop.jpg)` : la URL de la imagen.
+
+Cuando se combinan, estos estilos le dicen al navegador que adapte la imagen de fondo a diferentes alturas y anchos de pantalla. Este es el primer paso para lograr un entorno responsivo.
+
+El uso de una única imagen de fondo para todos los tamaños de pantalla tiene algunas limitaciones:
+
+- Se envía la misma cantidad de bytes, independientemente del tamaño de la pantalla, incluso cuando, para algunos dispositivos, como los teléfonos, una imagen de fondo más pequeña y liviana se vería igual de bien. En general, se desea enviar la imagen más pequeña posible que aún se vea bien en la pantalla del usuario para mejorar el rendimiento y ahorrarle datos al usuario.
+- En dispositivos más pequeños, la imagen se estirará o se recortará para cubrir toda la pantalla, ocultando potencialmente partes relevantes del fondo para los usuarios.
+
+En la siguiente sección, aprenderá cómo aplicar una optimización para cargar diferentes imágenes de fondo, según el dispositivo del usuario.
+
+## Utilizar consultas de medios
+
+El uso de consultas de medios es una técnica común para declarar hojas de estilo que solo se aplicarán a determinados tipos de medios o dispositivos. Se implementan mediante el uso de [reglas de @media](https://developer.mozilla.org/docs/Web/CSS/@media), (medios), que le permiten definir un conjunto de puntos de interrupción, donde se definen estilos específicos. Cuando se cumplen las condiciones definidas por la regla de `@media` (por ejemplo, un cierto ancho de pantalla), se aplicará el grupo de estilos definido dentro del punto de interrupción.
+
+Los siguientes pasos se pueden utilizar para aplicar consultas de medios al [sitio](https://use-media-queries-unoptimized.glitch.me/) para que se usen diferentes imágenes, dependiendo del ancho máximo del dispositivo que solicita la página.
+
+- En `style.css`, elimine la línea que contiene la URL de la imagen de fondo:
+
+```css//4
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+- A continuación, cree un punto de interrupción para cada ancho de pantalla, en función de las dimensiones comunes en píxeles que suelen tener las pantallas de dispositivos móviles, tabletas y computadoras de escritorio:
+
+Para móvil:
+
+```css
+@media (max-width: 480px) {
+    body {
+        background-image: url(images/background-mobile.jpg);
+    }
+}
+```
+
+Para tabletas:
+
+```css
+@media (min-width: 481px) and (max-width: 1024px) {
+    body {
+        background-image: url(images/background-tablet.jpg);
+    }
+}
+```
+
+Para dispositivos de escritorio:
+
+```css
+@media (min-width: 1025px) {
+    body {
+	    background-image: url(images/background-desktop.jpg);
+   }
+}
+```
+
+Abra la versión optimizada de [style.css](https://use-media-queries-optimized.glitch.me/style.css) en su navegador para ver los cambios realizados.
+
+{% Aside %} Las imágenes utilizadas en la demostración optimizada ya han cambiado de tamaño para adaptarse a diferentes tamaños de pantalla. En esta guía no mostraremos cómo cambiar el tamaño de las imágenes, pero si desea saber más, la [guía para entregar imágenes responsivas](/serve-responsive-images/) cubre algunas herramientas útiles, como el [paquete sharp npm](https://www.npmjs.com/package/sharp) y la [CLI de ImageMagick](https://www.imagemagick.org/script/index.php). {% endAside %}
+
+## Mida la pantalla de diferentes dispositivos
+
+A continuación, visualice el sitio resultante en diferentes tamaños de pantalla y en dispositivos móviles simulados:
+
+1. Abra el [sitio optimizado](https://use-media-queries-optimized.glitch.me/) en una nueva pestaña de Chrome.
+2. Haga que su ventana gráfica sea más estrecha (menos de `480px`).
+{% Instruction 'devtools-network', 'ol' %}
+{% Instruction 'reload-page', 'ol' %} Observe cómo se solicitó la imagen `background-mobile.jpg`.
+3. Amplíe su ventana. Una vez que sea más ancha que `480px`, vea cómo se solicita `background-tablet.jpg`. Una vez que sea más ancha que `1025px`, vea cómo se solicita `background-desktop.jpg`.
+
+Cuando se cambia el ancho de la pantalla del navegador, se solicitan nuevas imágenes.
+
+En particular, cuando el ancho está por debajo del valor definido en el punto de interrupción para móvil (480px), verá el siguiente registro de red:
+
+<figure>{% Img src="image/admin/jd2kHIefYf91udpFEmvx.png", alt="Seguimiento de red de DevTools para la imagen de fondo optimizada", width="800", height="125" %}</figure>
+
+El tamaño del nuevo fondo móvil es un **67% más pequeño** que el del escritorio.
+
+## Resumen
+
+En esta guía, ha aprendido a aplicar consultas de medios para solicitar imágenes de fondo adaptadas a tamaños de pantalla específicos y ahorrar bytes al acceder al sitio en dispositivos más pequeños, como teléfonos móviles. Usó la regla de `@media` para implementar un fondo responsivo. Esta técnica es ampliamente compatible con todos los navegadores. Una nueva característica de CSS: [image-set()](https://www.w3.org/TR/css-images-4/#image-set-notation) se puede usar para el mismo propósito con menos líneas de código. En el momento de escribir este artículo, esta función no era compatible con todos los navegadores, pero es posible que quiera estar atento a cómo evoluciona la adopción, ya que puede representar una alternativa interesante a esta técnica.
diff --git a/src/site/content/es/fast/optimize-webfont-loading/index.md b/src/site/content/es/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..62dc2e42851
--- /dev/null
+++ b/src/site/content/es/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: Optimice la carga y el renderizado de fuentes web
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2-
+
+  Esta publicación explica cómo cargar fuentes web para evitar cambios de diseño y páginas en blanco cuando las fuentes web no están disponibles durante la carga de la página.
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+Una fuente web "completa" que incluye todas las variantes estilísticas, que quizá usted no necesite, además de todos los glifos que pueden no utilizarse, quizá resulte fácilmente en una descarga de varios megabytes. En esta publicación, descubrirá cómo optimizar la carga de fuentes web para que los visitantes solo descarguen lo que usarán.
+
+Para abordar el problema de los archivos grandes que contienen todas las variantes, la regla de CSS `@font-face` está diseñada específicamente para permitirle dividir la familia de fuentes en una colección de recursos. Por ejemplo, subconjuntos Unicode y variantes de estilo distintas.
+
+Dadas estas declaraciones, el navegador determina los subconjuntos y variantes requeridos, además descarga el conjunto mínimo requerido para renderizar el texto, lo cual es muy conveniente. Sin embargo, si no tiene cuidado, también puede crear un cuello de botella en el rendimiento en la ruta crítica de renderización y retrasar la renderización del texto.
+
+### El comportamiento predeterminado
+
+La carga diferida de las fuentes conlleva una implicación oculta importante que puede retrasar la representación del texto: el navegador debe [construir el árbol de renderizado](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction), lo que depende de los árboles DOM y CSSOM, antes de saber qué recursos de fuentes necesita para representar el texto. Como resultado, las solicitudes de fuentes se retrasan mucho después de otros recursos críticos y es posible que el navegador no pueda representar texto hasta que se obtenga el recurso.
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="Ruta crítica de renderizado de fuentes", width="800", height="303" %}
+
+1. El navegador solicita el documento HTML.
+2. El navegador comienza a analizar la respuesta HTML y construir el DOM.
+3. El navegador descubre CSS, JS y otros recursos, y envía las solicitudes.
+4. El navegador construye el CSSOM después de que se recibe todo el contenido de CSS y lo combina con el árbol DOM para construir el árbol de renderizado.
+    - Las solicitudes de fuentes se envían después de que el árbol de representación indique qué variantes de fuente se necesitan para renderizar el texto especificado en la página.
+5. El navegador realiza el diseño y despliega el contenido en la pantalla.
+    - Si la fuente aún no está disponible, es posible que el navegador no renderice los píxeles de texto.
+    - Una vez que la fuente está disponible, el navegador despliega los píxeles del texto.
+
+La "carrera" entre el primer despliegue del contenido de la página, que se puede hacer poco después de que se construye el árbol de procesamiento, y la solicitud del recurso de fuente es lo que crea el "problema de texto en blanco" donde el navegador puede representar el diseño de la página pero omite cualquier texto.
+
+Al precargar las fuentes web y usar `font-display` para controlar cómo se comportan los navegadores con las fuentes no disponibles, puede evitar las páginas en blanco y los cambios de diseño debido a la carga de fuentes.
+
+### Cargue previamente sus recursos de fuentes web
+
+Si existe una alta probabilidad de que su página necesite una fuente web específica alojada en una URL que conoce de antemano, puede aprovechar [la priorización de recursos](https://developers.google.com/web/fundamentals/performance/resource-prioritization). El uso de `<link rel="preload">` activará una solicitud de una fuente web al principio de la ruta crítica de renderización, sin tener que esperar a que se cree el CSSOM.
+
+### Personalice el retraso de la renderización del texto
+
+Si bien la precarga hace que sea más probable que una fuente web esté disponible cuando se procesa el contenido de una página, no ofrece garantías. Aún debe considerar cómo se comportan los navegadores al renderizar el texto que usa una `font-family` que aún no está disponible.
+
+En la publicación [Evite el texto invisible durante la carga de fuentes](/avoid-invisible-text/), puede ver que el comportamiento predeterminado del navegador no es consistente. Sin embargo, puede indicarles a los navegadores modernos cómo quiere que se comporten mediante [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display).
+
+De manera similar a los comportamientos de tiempo de espera de fuentes existentes que implementan algunos navegadores, `font-display` segmenta la vida útil de una descarga de fuentes en tres períodos principales:
+
+1. El primer período es el **período del bloqueo de la fuente**. Durante este período, si el tipo de fuente no está cargado, cualquier elemento que intente usarlo debe renderizar con una fuente alternativa invisible. Si el tipo de fuente se carga correctamente durante el período de bloqueo, el tipo de letra se utiliza normalmente.
+2. El **período de intercambio de la fuente** ocurre inmediatamente después del período de bloqueo de la fuente. Durante este período, si el tipo de fuente no está cargado, cualquier elemento que intente utilizarla debe renderizar con un tipo de fuente alternativo. Si el tipo de fuente se carga correctamente durante el período de intercambio, la fuente se utiliza normalmente.
+3. El **período de falla de la fuente** ocurre inmediatamente después del período de intercambio de fuente. Si el tipo de fuente aún no se ha cargado cuando comienza este período, se marca como una carga fallida, lo que provoca una alternancia normal de la fuente. De lo contrario, la fuente se utiliza normalmente.
+
+Comprender estos períodos significa que puede usar `font-display` para decidir cómo se debe representar su fuente en función de si se descargó o cuándo.
+
+Para trabajar con la propiedad `font-display`, agréguela a sus reglas `@font-face`:
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* o block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* se precargará */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Glifos latinos */
+}
+```
+
+`font-display` actualmente admite el siguiente rango de valores:
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+Para obtener más información sobre la precarga de fuentes y la propiedad `font-display`, consulte las siguientes publicaciones:
+
+- [Evite el texto invisible durante la carga de fuentes](/avoid-invisible-text/)
+- [Controle el rendimiento de las fuentes mediante la visualización de fuentes](https://developers.google.com/web/updates/2016/02/font-display)
+- [Evite cambios de diseño y destellos de texto invisible (FOIT) mediante la precarga de fuentes opcionales](/preload-optional-fonts/)
+
+### La API de carga de fuentes
+
+Si los usa en conjunto, `<link rel="preload">` y el CSS `font-display` le brindan un gran control sobre la carga y el renderizado de las fuentes, sin agregar demasiada sobrecarga. Pero si necesita personalizaciones adicionales y está dispuesto a incurrir en la sobrecarga introducida por ejecutar JavaScript, existe otra opción.
+
+La [API de carga de fuentes](https://www.w3.org/TR/css-font-loading/) proporciona una interfaz de secuencias de comandos para definir y manipular fuentes CSS, realizar un seguimiento de su progreso de descarga y anular su comportamiento predeterminado de carga diferida. Por ejemplo, si está seguro de que se requiere una variante de fuente en particular, puede definirla y decirle al navegador que inicie una búsqueda inmediata del recurso de fuente:
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// no espere el árbol de renderizado, ¡inicie una búsqueda inmediata!
+font.load().then(function() {
+  // aplica la fuente (lo que puede volver a renderizar el texto y provocar un reajuste de página)
+  // después de que la fuente haya terminado de descargarse
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // O... por defecto el contenido está oculto
+  // y se renderiza después de que la fuente esté disponible
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // O... aplique su propia estrategia de renderizado aquí...
+});
+```
+
+Además, debido a que puede verificar el estado de la fuente (mediante [`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check)) y rastrear su progreso de descarga, también puede definir una estrategia personalizada para renderizar el texto en sus páginas:
+
+- Puede mantener toda la renderización del texto hasta que la fuente esté disponible.
+- Puede implementar un tiempo de espera personalizado para cada fuente.
+- Puede usar la fuente alternativa para desbloquear el renderizado e inyectar un nuevo estilo que use la fuente deseada después de que la fuente esté disponible.
+
+Lo mejor de todo es que también puede mezclar y combinar las estrategias anteriores para diferentes contenidos de la página. Por ejemplo, puede retrasar el renderizado del texto en algunas secciones hasta que la fuente esté disponible, puede usar una fuente alternativa y luego volver a renderizar una vez finalizada la descarga de la fuente.
+
+{% Aside %} La API de carga de fuentes [no está disponible en navegadores más antiguos](http://caniuse.com/#feat=font-loading). Considere usar el [polyfill FontLoader](https://github.com/bramstein/fontloader) o la [biblioteca WebFontloader](https://github.com/typekit/webfontloader) para brindar una funcionalidad similar, aunque con una sobrecarga aún mayor debido a una dependencia adicional de JavaScript. {% endAside %}
+
+### El almacenamiento adecuado en caché es imprescindible
+
+Por lo general, los recursos de fuentes son recursos estáticos que no se actualizan con frecuencia. Como resultado, son ideales para una caducidad máxima prolongada: asegúrese de especificar tanto un [encabezado ETag condicional](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags) como una [política óptima de control de caché](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control) para todos los recursos de fuentes.
+
+Si su aplicación web utiliza un [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/), es apropiado brindar recursos de fuentes con una [estrategia de caché primero](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network) para la mayoría de los casos de uso.
+
+No debe almacenar fuentes mediante [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) o [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Cada una de ellas tiene su propio conjunto de problemas de rendimiento. La caché HTTP del navegador proporciona el mejor y más sólido mecanismo para brindarle recursos de fuentes al navegador.
+
+## Lista de verificación de carga de fuentes web
+
+- **Personalice la carga y el procesamiento de fuentes mediante `<link rel="preload">`, `font-display` o la API de carga de fuentes:** el comportamiento predeterminado de carga diferida puede provocar un retraso en la renderización del texto. Estas características de la plataforma web le permiten anular este comportamiento para fuentes particulares y especificar estrategias personalizadas de renderizado y tiempo de espera para diferentes contenidos de la página.
+- **Especifique las políticas óptimas de revalidación y almacenamiento en caché:** las fuentes son recursos estáticos que se actualizan con poca frecuencia. Compruebe que sus servidores proporcionen una marca de tiempo de antigüedad máxima y de larga duración, además de un token de revalidación para permitir la reutilización eficiente de fuentes entre diferentes páginas. Si usa un service worker, una estrategia de caché primero es apropiada.
+
+## Pruebas automatizadas para el comportamiento de carga de fuentes web con Lighthouse
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) puede ayudar a automatizar el proceso de asegurar que está siguiendo las prácticas recomendables de optimización de fuentes web.
+
+Las siguientes auditorías pueden ayudarlo a asegurar que sus páginas sigan continuamente las mejores prácticas de optimización de fuentes web a lo largo del tiempo:
+
+- [Precargar las solicitudes de claves](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Utilizar una política de caché ineficiente en activos estáticos](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Todo el texto permanece visible durante las cargas de fuentes web](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/es/fast/performance-budgets-101/index.md b/src/site/content/es/fast/performance-budgets-101/index.md
new file mode 100644
index 00000000000..3b6768f89d4
--- /dev/null
+++ b/src/site/content/es/fast/performance-budgets-101/index.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: Presupuestos para rendimiento 101
+authors:
+  - mihajlija
+description: El buen rendimiento rara vez es un efecto secundario. Obtenga información sobre los presupuestos de rendimiento y cómo pueden encaminarlo hacia el éxito.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+El rendimiento es una parte importante de la experiencia del usuario y [afecta las métricas comerciales](https://wpostats.com/). Es tentador pensar que si eres un buen desarrollador terminarás con un sitio de alto rendimiento, pero la verdad es que un buen rendimiento rara vez es un efecto secundario. Como ocurre con la mayoría de las cosas, para alcanzar una meta hay que definirla con claridad. Empiece estableciendo un **presupuesto de rendimiento**.
+
+## Definición
+
+Un presupuesto de rendimiento es un conjunto de límites impuestos a las métricas que afectan el rendimiento del sitio. Este podría ser el tamaño total de una página, el tiempo que tarda en cargarse en una red móvil o incluso el número de solicitudes HTTP que se envían. Definir un presupuesto ayuda a iniciar la conversación sobre el rendimiento web. Sirve como punto de referencia para tomar decisiones sobre diseño, tecnología y agregar funciones.
+
+Tener un presupuesto permite a los diseñadores pensar en los efectos de las imágenes de alta resolución y la cantidad de fuentes web que eligen. También ayuda a los desarrolladores a comparar diferentes enfoques ante un problema y evaluar marcos y bibliotecas en función de su tamaño y [costo de análisis](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4).
+
+## Elegir las métricas
+
+### Métricas basadas en la cantidad ⚖️
+
+Estas métricas son útiles en las primeras etapas de desarrollo porque resaltan el impacto de incluir imágenes y scripts pesados. También son fáciles de comunicar tanto a diseñadores como a desarrolladores.
+
+Ya hemos mencionado algunas cosas que se pueden incluir en un presupuesto de rendimiento, como el peso de la página y la cantidad de solicitudes HTTP, pero puede dividirlas en límites más granulares como:
+
+- Tamaño máximo de imágenes
+- Número máximo de fuentes web
+- Tamaño máximo de scripts, incluyendo marcos
+- Número total de recursos externos, como scripts de terceros
+
+Sin embargo, estos números no le dicen mucho sobre la experiencia del usuario. Dos páginas con la misma cantidad de solicitudes o el mismo peso se pueden procesar de manera diferente según el orden en que se soliciten los recursos. Si un [recurso crítico](/critical-rendering-path/) como una imagen principal o una hoja de estilo en una de las páginas se carga tarde en el proceso, los usuarios esperarán más para ver algo útil y percibirán la página como más lenta. Si en la otra página las partes más importantes se cargan rápidamente, es posible que ni siquiera se den cuenta si el resto de la página no lo hace.
+
+<figure>{% Img src ="image/admin/U0QhA82KFyED4r1y3tAq.png", alt="Imagen del procesamiento progresivo de la página basada en la ruta crítica", width="611", height="300" %}</figure>
+
+Por eso es importante realizar un seguimiento de otro tipo de métrica.
+
+### Tiempos de hito ⏱️
+
+Los tiempos de hito marcan eventos que suceden durante la carga de la página, como [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) o un evento de [carga.](https://developer.mozilla.org/docs/Web/Events/load) Los tiempos más útiles sonlas  [métricas de rendimiento centradas en el usuario](/user-centric-performance-metrics/) que le dicen algo sobre la experiencia al cargar una página. Estas métricas están disponibles a través de las [API del navegador](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#measuring_these_metrics_on_real_users_devices) y como parte de los informes [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).
+
+La métrica [First Contentful Paint o primer despliegue de contenido (FCP)](/fcp/) mide el momento en que el navegador muestra el primer fragmento de contenido del DOM, como texto o imágenes.
+
+[Time to Interactive o tiempo de interacción (TTI)](/tti/) mide el tiempo que tarda una página en volverse completamente interactiva y responder de manera confiable a la entrada del usuario. El seguimiento de esta métrica es muy importante si espera algún tipo de interacción del usuario en la página, como hacer clic en enlaces, botones, escribir o usar elementos de formulario.
+
+### Métricas basadas en reglas 💯
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) y [WebPageTest](https://www.webpagetest.org/) calculan [las puntuaciones de rendimiento](https://developers.google.com/web/tools/lighthouse/scoring#perf-scoring) en función de las reglas generales de mejores prácticas, que puede utilizar como directrices. Como beneficio adicional, Lighthouse también le ofrece sugerencias para optimizaciones simples.
+
+Obtendrá los mejores resultados si realiza un seguimiento de una combinación de métricas de rendimiento basadas en la cantidad y centradas en el usuario. Concéntrese en el tamaño de los activos en las primeras fases de un proyecto y comience a rastrear FCP y TTI en cuanto sea posible.
+
+## Establecer una base de referencia
+
+La única forma de saber realmente qué funciona mejor para su sitio es probarlo: investigar y luego probar sus hallazgos. Analice la competencia para realizar una comparación. 🕵️
+
+Si no tiene tiempo para eso, aquí hay buenos números predeterminados para comenzar:
+
+- Menos de **5 s** Tiempo para interactuar
+- Menos de **170 KB** de recursos de [ruta crítica](/critical-rendering-path/) (comprimidos/minificados)
+
+Estos [números](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) se calculan en función de los dispositivos de referencia del mundo real y **la velocidad de la red 3G**. [Más de la mitad del tráfico de Internet](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/) actual ocurre en redes móviles, por lo que debe usar la velocidad de la red 3G como punto de partida.
+
+### Ejemplos de presupuestos
+
+Debe tener un presupuesto establecido para los diferentes tipos de páginas de su sitio, ya que el contenido variará. Por ejemplo:
+
+- Nuestra página de producto debe enviar menos de 170 KB de JavaScript en dispositivos móviles
+- Nuestra página de búsqueda debe incluir menos de 2 MB de imágenes en el escritorio
+- Nuestra página de inicio debe cargarse y volverse interactiva en &lt; 5 s con 3G lento en un teléfono Moto G4
+- Nuestro blog debe obtener una puntuación &gt; 80 en las auditorías de rendimiento de Lighthouse
+
+## Agregue presupuestos de desempeño a su proceso de construcción
+
+{% Img src="image/admin/YKJcgI9Yd8qEZM0nzPuv.png", alt="Logotipos de Webpack, tamaño de paquete y Lighthouse", width="800", height="267" %}
+
+La elección de una herramienta dependerá mucho de la escala de su proyecto y de los recursos que pueda dedicar a la tarea. Hay algunas herramientas de código abierto que pueden ayudarlo a agregar presupuestos a su proceso de construcción:
+
+- [Funciones de rendimiento de Webpack](https://webpack.js.org/configuration/performance/)
+- [bundlesize](https://github.com/siddharthkp/bundlesize)
+- [CI Lighthouse](https://github.com/GoogleChrome/lighthouse-ci)
+
+Si algo supera un umbral definido, puede:
+
+- Optimizar una característica o activo existente 🛠️
+- Eliminar una característica o activo existente 🗑️
+- No agregar la nueva característica o activo ✋⛔
+
+## Seguimiento del rendimiento
+
+Asegurarse de que su sitio sea lo suficientemente rápido significa que debe seguir midiendo después del lanzamiento inicial. El seguimiento de estas métricas a lo largo del tiempo y la [obtención de datos de usuarios reales](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/) le mostrará la manera en que los cambios en el rendimiento afectan las métricas comerciales clave.
+
+## En conclusión
+
+El propósito de un presupuesto de rendimiento es asegurarse de que se concentre en el rendimiento a lo largo de un proyecto; establecerlo temprano ayudará a evitar retroceder más adelante. Debe ser el punto de referencia para ayudarle a descubrir qué incluir en su sitio web. La idea principal es establecer objetivos para que pueda equilibrar mejor el rendimiento sin dañar la funcionalidad o la experiencia del usuario.
+
+La siguiente guía lo llevará a través de la definición de su primer presupuesto de desempeño en unos pocos pasos.
diff --git a/src/site/content/es/fast/preload-critical-assets/index.md b/src/site/content/es/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..a3a4e263b31
--- /dev/null
+++ b/src/site/content/es/fast/preload-critical-assets/index.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: Precarga de activos críticos para mejorar la velocidad de carga
+authors:
+  - houssein
+  - mihajlija
+description: |2
+
+  Tan pronto como abre cualquier página web, el navegador solicita un documento HTML de un
+
+  servidor, analiza el contenido del archivo HTML y envía solicitudes por separado
+
+  para cualquier otra referencia externa. La cadena de solicitudes críticas representa la
+
+  orden de los recursos priorizados y recuperados por el navegador.
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Cuando abre una página web, el navegador solicita el documento HTML de un servidor, analiza su contenido y envía solicitudes separadas para cualquier recurso referenciado. Como desarrollador, ya conoce todos los recursos que su página necesita y cuáles son los más importantes. Puede utilizar ese conocimiento para solicitar los recursos críticos anticipadamente y acelerar el proceso de carga. Esta publicación explica cómo hacer eso con `<link rel="preload">`.
+
+## Cómo funciona la precarga
+
+La precarga es más adecuada para los recursos que el navegador suele descubrir más tarde.
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Captura de pantalla del panel de red de Chrome DevTools", width="701", height="509"%}<figcaption> En este ejemplo, la fuente Pacifico se define en la hoja de estilo con una regla <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a>. El navegador carga el archivo de fuente solo después de que haya terminado de descargar y analizar la hoja de estilo.</figcaption></figure>
+
+Al precargar un determinado recurso, está informando al navegador que le gustaría recuperar dicho recurso antes de que el navegador lo descubra, porque está seguro de que es importante para la página actual.
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="Captura de pantalla del panel Chrome DevTools Network después de habilitar la precarga", width="701", height="509" %}. En este ejemplo, se realiza la precarga de la fuente Pacifico, por lo que la descarga ocurre en paralelo con la hoja de estilo.</figure>
+
+La cadena de solicitudes críticas representa el orden de los recursos priorizados y buscados por el navegador. Lighthouse identifica los activos que se encuentran en el tercer nivel de esta cadena como descubiertos tardíamente. Puede utilizar la [**auditoría de solicitudes de claves de precarga**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) para identificar cuáles recursos precargar.
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="La clave de precarga de Lighthouse solicita auditoría", width="745", height="97" %}
+
+Puede precargar recursos agregando una etiqueta `<link>` con el atributo `rel="preload"` al encabezado de su documento HTML:
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+El navegador almacena en caché los recursos precargados para que estén disponibles de inmediato cuando sean necesarios (no ejecuta los scripts ni aplica las hojas de estilo).
+
+{% Aside %} Después de implementar la precarga, muchos sitios, incluidos [Shopify, Financial Times y Treebo, presentaron mejoras de 1 segundo](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) en métricas centradas en el usuario, como [Time to Interactive: Tiempo de interacción](/tti/) y [First Contentful Paint: Despliegue de la primera entrada](/fcp/). {% endAside %}
+
+Sugerencias de recursos, por ejemplo, [`preconnect`](/preconnect-and-dns-prefetch) y [`prefetch`](/link-prefetch), se ejecutan como el navegador crea conveniente. La `preload`, por otro lado, es obligatoria para el navegador. Los navegadores modernos ya son muy buenos a la hora de priorizar recursos, por eso es importante usar la `preload` con moderación y solo precargar los recursos más críticos.
+
+Las precargas no utilizadas activan una advertencia de consola en Chrome, aproximadamente 3 segundos después del evento de `load`.
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="Advertencia de la consola Chrome DevTools sobre recursos precargados no utilizados", width="800", height="228" %}
+
+{% Aside %} [`preload` es compatible](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility) con todos los navegadores modernos. {% endAside %}
+
+## Casos de uso
+
+{% Aside 'caution' %} Al momento de escribir este artículo, Chrome tiene un [error](https://bugs.chromium.org/p/chromium/issues/detail?id=788757) abierto para las solicitudes precargadas que se recuperan antes de otros recursos de mayor prioridad. Hasta que esto se resuelva, tenga cuidado de cómo los recursos precargados pueden "saltar la cola" y ser solicitados antes de lo debido. {% endAside %}
+
+### Precarga de recursos definidos en CSS
+
+Las fuentes definidas con las reglas de [`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face) o las imágenes de fondo definidas en archivos CSS no se descubren hasta que el navegador descarga y analiza los archivos CSS correspondientes. La precarga de estos recursos garantiza que se obtengan antes de que se descarguen los archivos CSS.
+
+### Precarga de archivos CSS
+
+Si está utilizando el [enfoque CSS crítico](/extract-critical-css), dividirás el CSS en dos partes. El CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en la `<head>` del documento y el CSS no crítico generalmente se carga de forma diferida con JavaScript. Esperar a que JavaScript se ejecute antes de cargar CSS no crítico puede causar retrasos en la representación cuando los usuarios se desplazan, por lo que es una buena idea usar `<link rel="preload">` para iniciar la descarga de modo anticipado.
+
+### Precarga de archivos JavaScript
+
+Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la obtención de la [ejecución](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/), lo que puede mejorar métricas como Time to Interactive. La precarga funciona mejor si [divide](/reduce-javascript-payloads-with-code-splitting) sus paquetes de JavaScript y solo precarga fragmentos críticos.
+
+## Cómo implementar rel=preload
+
+La forma más sencilla de implementar la `preload` es agregar una etiqueta `<link>` a la `<head>` del documento:
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+Suministrar el atributo `as` ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con el tipo, establecer los encabezados correctos y determinar si el recurso ya existe en la caché. Los valores aceptados para este atributo incluyen: `script`, `style`, `font`, `image` y [otros](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
+
+{% Aside %} Eche un vistazo al documento  de [Programación y prioridades de recursos de Chrome](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) para obtener más información sobre cómo el navegador prioriza los diferentes tipos de recursos. {% endAside %}
+
+{% Aside 'caution' %} Omitir el atributo `as` o introducir un valor no válido equivale a una [solicitud XHR,](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) donde el navegador no sabe lo que está buscando, por lo que no puede determinar la prioridad correcta. También puede hacer que algunos recursos, como los scripts, se recuperen dos veces. {% endAside %}
+
+Algunos tipos de recursos, como las fuentes, se cargan en [modo anónimo](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements). Para estos recursos, debe establecer el atributo `crossorigin` con la `preload`:
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} Las fuentes precargadas sin el atributo `crossorigin` se recuperarán dos veces. {% endAside %}
+
+Los elementos `<link>` también admiten un [atributo de `type`](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-type), que contiene el [tipo MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) del recurso vinculado. Los navegadores usan el valor del `type` para asegurarse de que los recursos se carguen previamente solo si el tipo de archivo es compatible. Si un navegador no admite el tipo de recurso especificado, ignorará el `<link rel="preload">`.
+
+{% Aside 'codelab' %} [Mejore el rendimiento de una página mediante la precarga de fuentes web](/codelab-preload-web-fonts). {% endAside %}
+
+También puede precargar cualquier tipo de recurso a través del [encabezado `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link) HTTP:
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+Una ventaja de especificar la `preload` en el encabezado HTTP es que el navegador no necesita analizar el documento para descubrirlo, lo que puede ofrecer pequeñas mejoras en algunos casos.
+
+### Precarga de módulos JavaScript con webpack
+
+Si está utilizando un paquete de módulos que crea archivos de compilación de su aplicación, debe verificar si admite la inyección de etiquetas de precarga. Con la versión 4.6.0 o posterior del [webpack](https://webpack.js.org/), la precarga es compatible mediante el uso de [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) dentro de `import()`:
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+Si está utilizando una versión anterior de webpack, utilice un complemento de terceros como [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin).
+
+## Conclusión
+
+Para mejorar la velocidad de la página, utilice la precarga en los recursos importantes que el navegador descubre tardíamente. Precargar todos los recursos sería contraproducente, así que use la `preload` con moderación y [mida el impacto en el mundo real](/fast#measure-performance-in-the-field).
diff --git a/src/site/content/es/fast/publish-modern-javascript/index.md b/src/site/content/es/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..10ff426c020
--- /dev/null
+++ b/src/site/content/es/fast/publish-modern-javascript/index.md
@@ -0,0 +1,304 @@
+---
+layout: post
+title: Publique, envíe e instale JavaScript moderno para obtener aplicaciones más rápidas
+subhead: Mejore el rendimiento activando las dependencias y la salida de JavaScript modernas.
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: El JavaScript moderno ofrece mejoras de tamaño y rendimiento con respecto al ES5 transpilado, y es compatible con el 95% de los navegadores web. Activar la salida de JavaScript moderno aporta estas ventajas a su aplicación, pero el impacto está limitado por las dependencias que ya están transpiladas a ES5. Esta guía muestra cómo publicar paquetes modernos en npm, y cómo instalar y agrupar de forma óptima paquetes de JavaScript moderno.
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - laboratorio-de-código-brindar-código-moderno
+tags:
+  - performance
+  - blog
+---
+
+Más del 90% de los navegadores son capaces de ejecutar JavaScript moderno, pero la prevalencia de JavaScript heredado sigue siendo uno de los mayores contribuyentes a los problemas de rendimiento en la web en la actualidad. [EStimator.dev](http://estimator.dev/) es una sencilla herramienta basada en web que calcula el tamaño y la mejora del rendimiento que podría lograr un sitio al ofrecer una sintaxis JavaScript moderna.
+
+<figure data-size="full">{% Img src="image/admin/FHHnXqdjdsC6PNSSnnC4.png", alt="El análisis de EStimator.dev que muestra que un sitio web podría ser un 9% más rápido con JavaScript moderno.", width="800", height="785" %}<figcaption> EStimator.dev</figcaption></figure>
+
+Hoy en día, la web está limitada por el JavaScript heredado, y ninguna optimización única mejorará el rendimiento tanto como escribir, publicar y enviar su página web o paquete utilizando la sintaxis **ES2017.**
+
+## JavaScript moderno
+
+El JavaScript moderno no se caracteriza como código escrito en una versión específica de la especificación ECMAScript, sino en una sintaxis compatible con todos los navegadores modernos. Los navegadores web modernos como Chrome, Edge, Firefox y Safari representan más del [90% del mercado de navegadores](https://www.caniuse.com/usage-table), y los diferentes navegadores que dependen de los mismos motores de renderización subyacentes constituyen un 5% adicional. Esto significa que el 95% del tráfico web global proviene de navegadores que admiten las funciones del lenguaje JavaScript más utilizadas en los últimos 10 años, que incluyen:
+
+- Clases (ES2015)
+- Funciones de flecha (ES2015)
+- Generadores (ES2015)
+- Ámbito de bloque (ES2015)
+- Desestructuración (ES2015)
+- Parámetros de descanso y propagación (ES2015)
+- Sintaxis abreviada de objetos (ES2015)
+- Asíncrono / espera (ES2017)
+
+Las funciones de las versiones más recientes de la especificación del lenguaje generalmente tienen un soporte menos consistente en los navegadores modernos. Por ejemplo, muchas funciones de ES2020 y ES2021 solo son compatibles con el 70% del mercado de navegadores; sigue siendo la mayoría de los navegadores, pero no lo suficiente como para confiar directamente en esas funciones. Esto significa que, aunque el JavaScript "moderno" es un objetivo en movimiento, ES2017 tiene la más amplia gama de compatibilidad de navegadores e [incluye la mayoría de las características de sintaxis modernas de uso común](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c). En otras palabras, **ES2017 es lo más cercano a la sintaxis moderna en la actualidad** .
+
+## JavaScript heredado
+
+El JavaScript heredado es un código que evita específicamente el uso de todas las funciones del lenguaje citadas arriba. La mayoría de los desarrolladores escriben su código fuente utilizando una sintaxis moderna, pero compilan todo con la sintaxis heredada para una mayor compatibilidad con el navegador. La compilación con la sintaxis heredada aumenta la compatibilidad con el navegador, sin embargo, el efecto suele ser menor de lo que creemos. En muchos casos, el apoyo aumenta de alrededor del 95% al 98%, mientras que conlleva un costo significativo:
+
+- El JavaScript heredado suele ser alrededor de un 20% más grande y más lento que el código moderno equivalente. Las deficiencias y la mala configuración de las herramientas a menudo amplían aún más esta brecha.
+
+- Las bibliotecas instaladas representan hasta el 90% del código JavaScript de producción típico. El código de biblioteca incurre en una sobrecarga de JavaScript heredado aún mayor debido al polyfill y la duplicación de helpers que podría evitarse mediante la publicación de código moderno.
+
+## JavaScript moderno en npm
+
+Recientemente, Node.js ha estandarizado un campo `"exports"` para definir [puntos de entrada para un paquete](https://nodejs.org/api/packages.html#packages_package_entry_points):
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+Los módulos a los que hace referencia el `"exports"` implican una versión de nodo 12.8 o superior, la cuál admite ES2019. Esto significa que cualquier módulo al que se haga referencia mediante el `"exports"` se puede *escribir en JavaScript moderno*. Los consumidores de paquetes deben asumir que los módulos con un `"exports"` contienen código moderno y transpilar si es necesario.
+
+### Solo moderno
+
+Si desea publicar un paquete con código moderno y dejar que el consumidor se encargue de transpilarlo cuando lo use como dependencia, use solo el campo `"exports"`.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %} No se *recomienda* este enfoque. En un mundo perfecto, cada desarrollador ya habría configurado su sistema de compilación para transpilar todas las dependencias (`node_modules`) a su sintaxis requerida. Sin embargo, este no es el caso actualmente, y la publicación de su paquete utilizando solo una sintaxis moderna evitaría su uso en aplicaciones a las que se accedería a través de navegadores heredados. {% endAside %}
+
+### Moderno con respaldo heredado
+
+Utilice el `"exports"` junto con `"main"` para publicar su paquete utilizando código moderno, pero también incluya un respaldo ES5 + CommonJS para navegadores heredados.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### Moderno con optimizaciones de paquetes de ESM y respaldo heredado
+
+Además de definir un punto de entrada CommonJS de respaldo, el  campo `"module"` se puede usar para señalar un paquete de respaldo heredado similar, pero que usa la sintaxis de módulo de JavaScript (`import` y `export`).
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+Muchos paquetes, como webpack y Rollup, confían en este campo para aprovechar las funciones del módulo y permitir la [agitación de árboles](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size). Este sigue siendo un paquete heredado que no contiene ningún código moderno aparte de la sintaxis `import`/`export`, así que use este enfoque para enviar código moderno con un respaldo heredado que aún está optimizado para empaquetar.
+
+## JavaScript moderno en aplicaciones
+
+Las dependencias de terceros constituyen la gran mayoría del código típico JavaScript de producción en aplicaciones web. Si bien las dependencias de npm se han publicado históricamente como sintaxis de ES5 heredada, esto ya no es una suposición segura y corre el riesgo de que las actualizaciones de dependencia hagan fallar el soporte del navegador en su aplicación.
+
+Con un número cada vez mayor de paquetes npm que se están moviendo a JavaScript moderno, es importante asegurarse de que las herramientas de compilación estén configuradas para manejarlos. Es muy probable que algunos de los paquetes npm de los que depende ya estén usando funciones de lenguaje moderno. Hay varias opciones disponibles para usar código moderno de npm sin romper su aplicación en navegadores más antiguos, pero la idea general es hacer que el sistema de compilación transpile las dependencias al mismo destino de sintaxis que su código fuente.
+
+## webpack
+
+A partir de webpack 5, ahora es posible configurar qué sintaxis utilizará webpack al generar código para paquetes y módulos. Esto no transpila su código o dependencias, solo afecta el código "pegamento" generado por webpack. Para especificar el objetivo de soporte del navegador, agregue una [configuración browserslist](https://github.com/browserslist/browserslist#readme) a su proyecto, o hágalo directamente en su configuración de webpack:
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+También es posible configurar webpack para generar paquetes optimizados que omitan funciones de contenedor innecesarias cuando se enfocan a un entorno de módulos ES moderno. Esto también configura webpack para cargar paquetes de código dividido usando `<script type="module">`.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+Hay varios complementos de webpack disponibles que permiten compilar y enviar JavaScript moderno sin dejar de admitir navegadores heredados, como Optimize Plugin y BabelEsmPlugin.
+
+### Complemento Optimize
+
+El complemento [Optimize](https://github.com/developit/optimize-plugin) es un complemento de webpack que transforma el código final empaquetado de JavaScript moderno a heredado en lugar de cada archivo fuente individual. Es una configuración autónoma que permite que su configuración de webpack asuma que todo es JavaScript moderno sin ramificaciones especiales para múltiples salidas o sintaxis.
+
+Dado que el complemento Optimize opera en paquetes en lugar de módulos individuales, procesa el código de su aplicación y sus dependencias por igual. Esto hace que sea seguro usar dependencias de JavaScript modernas de npm, porque su código se empaquetará y transpilará a la sintaxis correcta. También puede ser más rápido que las soluciones tradicionales que implican dos pasos de compilación, al mismo tiempo que genera paquetes separados para navegadores modernos y heredados. Los dos conjuntos de paquetes están diseñados para cargarse utilizando el  patrón [module/nomodule](/serve-modern-code-to-modern-browsers/).
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+`Optimize Plugin` puede ser más rápido y más eficiente que las configuraciones de webpack personalizadas, que normalmente agrupan código moderno y heredado por separado. También maneja la ejecución de [Babel](https://babeljs.io/) por usted y minimiza los paquetes usando [Terser](https://terser.org/) con configuraciones óptimas separadas para las salidas modernas y heredadas. Por último, los polyfills necesarios para los paquetes heredados generados se extraen en un script dedicado para que nunca se dupliquen ni se carguen innecesariamente en los navegadores más nuevos.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Comparación: transpilar módulos fuente dos veces versus transpilar paquetes generados.</figcaption></figure>
+
+### BabelEsmPlugin
+
+[BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin) es un complemento de webpack que funciona junto con [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) para generar versiones modernas de paquetes existentes para enviar código menos transpilado a los navegadores modernos. Es la solución estándar más popular para module/nomodule, utilizada por [Next.js](https://nextjs.org/) y [Preact CLI](https://preactjs.com/cli/).
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // your existing babel-loader configuration:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+`BabelEsmPlugin` admite una amplia gama de configuraciones de webpack, ya que ejecuta dos compilaciones de su aplicación en gran medida independientes. Compilar dos veces puede llevar un poco de tiempo extra para aplicaciones grandes; sin embargo, esta técnica permite que `BabelEsmPlugin` se integre sin problemas en las configuraciones de webpack existentes y lo convierte en una de las opciones más convenientes disponibles.
+
+### Configurar babel-loader para transpilar node_modules
+
+Si está utilizando `babel-loader` sin uno de los dos complementos anteriores, se requiere un paso importante para consumir módulos npm de JavaScript modernos. La definición de dos `babel-loader` separados hace posible compilar automáticamente las características del lenguaje moderno que se encuentran en `node_modules` a ES2017, mientras sigue transpilando su propio código de origen con los complementos y ajustes preestablecidos de Babel definidos en la configuración de su proyecto. Esto no genera paquetes modernos y heredados para una configuración de module/nomodule, pero hace posible instalar y usar paquetes npm que contienen JavaScript moderno sin hacer fallar los navegadores más antiguos.
+
+[webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm) usa esta técnica para compilar las dependencias npm que tienen un campo `"exports"` en su `package.json`, ya que pueden contener sintaxis moderna:
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // auto-transpile modern stuff found in node_modules
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+Alternativamente, puede implementar la técnica manualmente en la configuración de su webpack al verificar un campo de `"exports"` en el `package.json` de los módulos a medida que se resuelven. Omitiendo el almacenamiento en caché por brevedad, una implementación personalizada podría verse así:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Transpile for your own first-party code:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // Transpile modern dependencies:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+Al utilizar este enfoque, deberá asegurarse de que su minificador admita la sintaxis moderna. Tanto [Terser](https://github.com/terser/terser#minify-options) como [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options) tienen una opción para especificar `{ecma: 2017}` para preservar y, en algunos casos, generar la sintaxis de ES2017 durante la compresión y el formateo.
+
+## Rollup
+
+Rollup tiene soporte incorporado para generar múltiples conjuntos de paquetes como parte de una sola compilación y genera código moderno de forma predeterminada. Como resultado, Rollup se puede configurar para generar paquetes modernos y heredados con los complementos oficiales que probablemente ya esté usando.
+
+### @rollup/plugin-babel
+
+Si usa Rollup, el [método `getBabelOutputPlugin()`](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code) (provisto por el [complemento Babel oficial](https://github.com/rollup/plugins/tree/master/packages/babel) de Rollup) transforma el código en paquetes generados en lugar de módulos fuente individuales. Rollup tiene soporte incorporado para generar múltiples conjuntos de paquetes como parte de una sola compilación, cada uno con sus propios complementos. Puede aprovecharlo para producir diferentes paquetes para modernos y heredados pasando cada uno a través de una configuración de complemento de salida de Babel diferente:
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // modern bundles:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // legacy (ES5) bundles:
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## Herramientas de compilación adicionales
+
+Rollup y webpack son altamente configurables, lo que generalmente significa que cada proyecto debe actualizar su configuración para habilitar la sintaxis de JavaScript moderno en las dependencias. También hay herramientas de compilación de alto nivel que favorecen las convenciones y los valores predeterminados sobre la configuración, como [Parcel](https://parceljs.org/), [Snowpack](https://www.snowpack.dev/), [Vite](https://github.com/vitejs/vite) y [WMR](https://github.com/preactjs/wmr). La mayoría de estas herramientas asumen que las dependencias de npm pueden contener sintaxis moderna y las transpilarán al nivel de sintaxis apropiado cuando se compile para producción.
+
+Además de los complementos dedicados para webpack y Rollup, se pueden agregar paquetes de JavaScript moderno con alternativas heredadas a cualquier proyecto mediante [devolution](https://github.com/theKashey/devolution). Devolution es una herramienta independiente que transforma la salida de un sistema de compilación para producir variantes de JavaScript heredadas, permitiendo el empaquetado y las transformaciones para asumir un objetivo de salida moderno.
+
+## Conclusión
+
+[EStimator.dev](http://estimator.dev/) se creó para proporcionar una manera fácil de evaluar el impacto que puede tener el cambio a un código JavaScript capaz de usar la vesión moderna para la mayoría de sus usuarios. Hoy, ES2017 es lo más cercano a la sintaxis moderna y las herramientas como npm, Babel, webpack y Rollup han hecho posible configurar su sistema de compilación y escribir sus paquetes usando esta sintaxis. Este post cubre varios enfoques, y debe usar la opción más fácil que funcione para su caso de uso.
+
+{% YouTube 'cLxNdLK--yI' %}
+
+<br>
diff --git a/src/site/content/es/fast/rail/index.md b/src/site/content/es/fast/rail/index.md
new file mode 100644
index 00000000000..5100051a0d3
--- /dev/null
+++ b/src/site/content/es/fast/rail/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Medir el rendimiento con el modelo RAIL
+description: |2-
+
+  El modelo RAIL permite a los diseñadores y desarrolladores definir de manera confiable el trabajo de optimización del rendimiento que tiene el mayor impacto en la experiencia del usuario. Conoce qué objetivos y pautas establece el modelo RAIL y qué herramientas puedes utilizar para lograrlos.
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL** es un modelo de rendimiento **centrado en el usuario** que proporciona una estructura para pensar en el rendimiento. El modelo divide la experiencia del usuario en acciones clave (por ejemplo, tocar, desplazar, cargar) y te ayudará a definir los objetivos de rendimiento para cada una de ellas.
+
+RAIL representa cuatro aspectos distintos del ciclo de vida de las aplicaciones web: respuesta, animación, inactivo y carga. Los usuarios tienen diferentes expectativas de rendimiento para cada uno de estos contextos, por lo que los objetivos de rendimiento se definen en función del contexto y en la [investigación de UX sobre cómo los usuarios perciben los retrasos](https://www.nngroup.com/articles/response-times-3-important-limits/).
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="Las 4 partes del modelo de rendimiento de RAIL: respuesta, animación, inactivo y carga", width="800", height="290" %} <figcaption> Las 4 partes del modelo de rendimiento RAIL</figcaption></figure>
+
+## Centrarse en el usuario
+
+Haz que los usuarios sean el punto de enfoque del desempeño de tu esfuerzo. La siguiente tabla describe las métricas clave de cómo los usuarios perciben los retrasos en el rendimiento:
+
+<table class="table-wrapper scrollbar">
+  <thead>Percepción del usuario de los retrasos en el rendimiento</thead>
+  <tr>
+    <td>0 a 16 ms</td>
+    <td>Los usuarios son excepcionalmente buenos para rastrear el movimiento y no les gusta cuando las animaciones no son fluidas. Perciben que las animaciones son fluidas siempre que se rendericen 60 nuevos fotogramas por segundo. Eso es 16 ms por cada cuadro, incluido el tiempo que tarda el navegador en pintar el nuevo cuadro en la pantalla, dejando una aplicación de unos 10 ms para producir un cuadro.</td>
+  </tr>
+  <tr>
+    <td>0 a 100 ms</td>
+    <td>Responde a las acciones del usuario dentro de esta ventana de tiempo y los usuarios sentirán que el resultado es inmediato. Un poco más y la conexión entre acción y reacción se rompe.</td>
+  </tr>
+  <tr>
+    <td>100 hasta 1000 ms</td>
+    <td>Dentro de esta ventana, las cosas se sienten parte de una progresión natural y continua de tareas. Para la mayoría de los usuarios de la web, cargar páginas o cambiar de vista representa una tarea.</td>
+  </tr>
+  <tr>
+    <td>1000 ms o más</td>
+    <td>Más allá de 1000 milisegundos (1 segundo), los usuarios pierden el enfoque en la tarea que están realizando.</td>
+  </tr>
+  <tr>
+    <td>10000 ms o más</td>
+    <td>Más allá de los 10000 milisegundos (10 segundos), los usuarios se sienten frustrados y es probable que abandonen las tareas. Puede que vuelvan o no más tarde.</td>
+  </tr>
+</table>
+
+{% Aside %} Los usuarios perciben los retrasos en el rendimiento de manera diferente, según las condiciones de la red y el hardware. Por ejemplo, la carga de sitios en una máquina de escritorio potente a través de una conexión Wi-Fi rápida ocurre comúnmente en menos de 1 segundo y los usuarios se han acostumbrado a eso. La carga de sitios en dispositivos móviles con conexiones 3G lentas lleva más tiempo, por lo que los usuarios de dispositivos móviles son generalmente más pacientes y la carga en 5 segundos en el dispositivo móvil es un objetivo más realista. {% endAside %}
+
+## Objetivos y directrices
+
+En el contexto de RAIL, los términos **objetivos** y **directrices** tienen significados específicos:
+
+- **Objetivos**: Métricas clave de rendimiento relacionadas con la experiencia del usuario. Por ejemplo, un toque para pintar en menos de 100 milisegundos. Dado que la percepción humana es relativamente constante, es poco probable que estos objetivos cambien pronto.
+
+- **Directrices**: Recomendaciones que te ayudan a alcanzar tus metas. Estos pueden ser específicos del hardware actual y las condiciones de conexión de red y, por lo tanto, pueden cambiar con el tiempo.
+
+## Respuesta: procesar eventos en menos de 50 ms
+
+**Objetivo**: Completar una transición iniciada por la entrada del usuario en 100 ms, para que los usuarios sientan que las interacciones son instantáneas.
+
+**Directrices**:
+
+- Para garantizar una respuesta visible en 100 ms, se deben de procesar los eventos de entrada del usuario en 50 ms. Esto se aplica a la mayoría de las entradas, como hacer clic en botones, alternar controles de formulario o iniciar animaciones. Esto no se aplica a los arrastres táctiles o los desplazamientos.
+
+- Aunque puede parecer contradictorio, no siempre es la decisión correcta responder a la entrada del usuario de forma inmediata. Puedes utilizar esta ventana de 100 ms para realizar otros trabajos costosos, pero ten cuidado de no bloquear al usuario. Si es posible, trabaja en segundo plano.
+
+- Para todas las acciones que tarden más de 50 ms en completarse, siempre proporciona comentarios.
+
+### ¿50 ms o 100 ms?
+
+Si el objetivo es responder a la entrada en menos de 100 ms, entonces, ¿por qué nuestro presupuesto es de solo 50 ms? Esto se debe a que generalmente se está realizando otro trabajo además del manejo de entrada y ese trabajo ocupa parte del tiempo disponible para una respuesta de entrada aceptable. Si una aplicación está realizando trabajo en los tiempos recomendados de 50 ms durante el tiempo de inactividad, eso significa que la entrada se puede poner en cola hasta 50 ms si ocurre durante uno de esos tiempos de trabajo. Teniendo en cuenta esto, es seguro asumir que solo los 50 ms restantes están disponibles para el manejo de entrada real. Este efecto se visualiza en el diagrama a continuación que muestra cómo se coloca en cola la entrada recibida durante una tarea inactiva, reduciendo el tiempo de procesamiento disponible:
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="Diagrama que muestra cómo se pone en cola la entrada recibida durante una tarea inactiva, lo que reduce el tiempo de procesamiento de entrada disponible a 50 ms", width="800", height="400" %} <figcaption> Cómo las tareas inactivas afectan el presupuesto de respuesta de entrada.</figcaption></figure>
+
+## Animación: produce un fotograma en 10 ms
+
+**Objetivos**:
+
+- Produce cada fotograma de una animación en 10 ms o menos. Técnicamente, el presupuesto máximo para cada fotograma es de 16 ms (1000 ms / 60 fotogramas por segundo ≈ 16 ms), pero los navegadores necesitan unos 6 ms para renderizar cada fotograma, de ahí surge la pauta de 10 ms por fotograma.
+
+- Tu meta debe de ser la suavidad visual. Los usuarios notan cuando las velocidades de fotogramas varían.
+
+**Directrices**:
+
+- En puntos de alta presión como las animaciones, la clave es no hacer nada donde se pueda y el mínimo absoluto donde no puedas. Siempre que sea posible, utiliza la respuesta de 100 ms para calcular previamente el trabajo costoso para maximizar sus posibilidades de alcanzar los 60 fps.
+
+- Consulta [Rendimiento del renderizado](/rendering-performance/) para conocer varias estrategias de optimización de animaciones.
+
+{% Aside %} Reconoce todos los tipos de animaciones. Las animaciones no son solo efectos de interfaz de usuario sofisticados. Cada una de estas interacciones se consideran animaciones:
+
+- Animaciones visuales, como entradas y salidas, [interpolaciones](https://www.webopedia.com/TERM/T/tweening.html) e indicadores de carga.
+- Desplazamientos. Esto incluye el lanzamiento, que es cuando el usuario comienza a desplazarse, luego lo suelta y la página continúa desplazándose.
+- Arrastrar. Las animaciones suelen seguir las interacciones del usuario, como desplazarse por un mapa o pellizcar para hacer zoom. {% endAside %}
+
+## Inactivo: maximiza el tiempo inactivo
+
+**Objetivo**: Maximiza el tiempo de inactividad para aumentar las probabilidades de que la página responda a la entrada del usuario en 50 ms.
+
+**Directrices**:
+
+- Utiliza el tiempo de inactividad para completar el trabajo diferido. Por ejemplo, para la carga inicial de la página, carga la menor cantidad de datos posible y luego usa [el tiempo de inactividad](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback) para cargar lo restante.
+
+- Realiza el trabajo durante el tiempo de inactividad en 50 ms o menos. Si transcurre más tiempo, corres el riesgo de interferir con la capacidad de la aplicación para responder a la entrada del usuario en 50 ms.
+
+- Si un usuario interactúa con una página durante el trabajo de tiempo inactivo, la interacción del usuario siempre debe tener la máxima prioridad e interrumpir el trabajo del tiempo inactivo.
+
+## Carga: entrega contenido y conviértete en interactivo en menos de 5 segundos
+
+Cuando las páginas se cargan lentamente, la atención del usuario se reduce y los usuarios perciben que la tarea no funciona. Los sitios que se cargan rápidamente tienen [sesiones promedio más largas, tasas de rebote más bajas y una mayor visibilidad de los anuncios](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/).
+
+**Objetivos**:
+
+- Optimiza para obtener un rendimiento de carga rápido en relación con las capacidades del dispositivo y la red de tus usuarios. Actualmente, un buen objetivo para las primeras cargas es cargar la página y convertirse en [interactivo](/tti/) en [5 segundos o menos en dispositivos móviles de rango medio con conexiones 3G lentas](/performance-budgets-101/#establish-a-baseline).
+
+- Para cargas posteriores, un buen objetivo es cargar la página en menos de 2 segundos.
+
+{% Aside %}
+
+Ten en cuenta que estos objetivos pueden cambiar con el tiempo.
+
+{% endAside %}
+
+**Directrices**:
+
+- Prueba el rendimiento de tu carga en los dispositivos móviles y las conexiones de red que son comunes entre tus usuarios. Puedes utilizar el [Informe de experiencia del usuario de Chrome](/chrome-ux-report/) para conocer la [distribución de conexiones](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard) de tus usuarios. Si los datos no están disponibles para tu sitio, [The Mobile Economy 2019](https://www.gsma.com/mobileeconomy/) sugiere que una metrica promedio a nivel global es un teléfono Android de rango medio, como un Moto G4, y una red 3G lenta (definida como RTT de 400 ms y velocidad de transferencia de 400 kbps). Esta combinación está disponible en [WebPageTest](https://www.webpagetest.org/easy).
+
+- Ten en cuenta que, aunque el dispositivo de un usuario móvil típico puede afirmar que está en una conexión 2G, 3G o 4G, en realidad la [velocidad de conexión efectiva](/adaptive-serving-based-on-network-quality/#how-it-works) suele ser significativamente más lenta debido a la pérdida de paquetes y la variación de la red.
+
+- [Elimina los recursos que bloquean el procesamiento](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
+
+- No tienes que cargar todo en menos de 5 segundos para producir la percepción de una carga completa. Considera las  [imágenes de carga diferida](/browser-level-image-lazy-loading/), [dividir el código de Javascript en paquetes](/reduce-javascript-payloads-with-code-splitting/) y otras [optimizaciones sugeridas en web.dev](/fast/).
+
+{% Aside %} Reconoce los factores que afectan el rendimiento de carga de la página:
+
+- Velocidad y latencia de la red
+- Hardware (CPU más lentas, por ejemplo)
+- Desalojo de caché
+- Diferencias en el almacenamiento en caché L2 o L3
+- Analizando JavaScript {% endAside %}
+
+## Herramientas para medir RAIL
+
+Hay algunas herramientas que te ayudarán a automatizar tus mediciones RAIL. La herramienta a utilizar dependerá del tipo de información que necesites y del tipo de flujo de trabajo que prefieras.
+
+### Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/) proporciona un análisis en profundidad de todo lo que sucede mientras tu página se carga o se ejecuta. Consulta [Introducción al análisis del rendimiento en tiempo de ejecución](https://developer.chrome.com/docs/devtools/evaluate-performance/) para familiarizarse con la interfaz de usuario del panel de **Rendimiento**.
+
+Las siguientes funciones de DevTools son especialmente relevantes:
+
+- [Throttle (estrangula) tu CPU](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle) para simular un dispositivo menos potente.
+
+- [Throttle tu red](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle) para simular conexiones más lentas.
+
+- [Ver la actividad del hilo principal](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main) para ver todos los eventos que ocurrieron en el hilo principal mientras estaba grabando.
+
+- [Ver las actividades del hilo principal en una tabla](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities) para ordenar las actividades en función de las que consumieron más tiempo.
+
+- [Analizar fotogramas por segundo (FPS)](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps) para medir si tus animaciones realmente se ejecutan sin problemas.
+
+- [Supervisa el uso de la CPU, el tamaño del JS, los nodos DOM, los diseños por segundo y más](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor) en tiempo real con el **Monitor de rendimiento**.
+
+- [Visualizar las solicitudes de red](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network) en la sección de **Red** que se produjeron mientras grababas.
+
+- [Obtén captura pantallas mientras grabas](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots) para reproducir exactamente cómo se veía la página mientras se cargaba, o se activaba una animación, etc.
+
+- [Ver las interacciones](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions) para identificar rápidamente lo que sucedió en una página después de que un usuario interactuó con ella.
+
+- [Encuentra problemas de rendimiento de desplazamiento en tiempo real](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues) resaltando la página cada vez que se dispara un oyente potencialmente problemático.
+
+- [Ver eventos de pintura en tiempo real](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing) para identificar eventos de pintura costosos que pueden perjudicar el rendimiento de tus animaciones.
+
+### Lighthouse
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) está disponible en Chrome DevTools, en [web.dev/measure](/measure/) como una extensión de Chrome, como un módulo Node.js y dentro de WebPageTest. Ingresas una URL, esta simula un dispositivo de rango medio con una conexión 3G lenta, ejecuta una serie de auditorías en la página y luego te brinda un informe sobre el rendimiento de la carga, así como sugerencias sobre cómo mejorar.
+
+Las siguientes auditorías son especialmente relevantes:
+
+**Respuesta**
+
+- [Max Potential First Input Delay (FID): Potencial máximo de la Demora de la primera entrada](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/). Calcula cuánto tardará su aplicación en responder a la entrada del usuario, según el tiempo de inactividad del hilo principal.
+
+- [No utilizas oyentes pasivos para mejorar el rendimiento del desplazamiento](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/).
+
+- [Total Blocking Time (TBT): Tiempo total de bloqueo](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/). Mide la cantidad total de tiempo que una página está bloqueada para que no responda a la entrada del usuario, como los clics del mouse, los toques de la pantalla o las pulsaciones del teclado.
+
+- [Time To Interact (TTI): Tiempo para interactuar](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive). Mide cuándo un usuario puede interactuar constantemente con todos los elementos de la página.
+
+**Carga**
+
+- [No registras un service worker que controla la página y start_url](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/). Un service worker puede almacenar en caché recursos comunes en el dispositivo de un usuario, lo que reduce el tiempo dedicado a buscar recursos en la red.
+
+- [La carga de la página no es lo suficientemente rápida en las redes móviles](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/).
+
+- [Elimina los recursos que bloquean la renderización](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
+
+- [Aplazar las imágenes fuera de la pantalla](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/). Aplaza la carga de imágenes fuera de la pantalla hasta que sean necesarias.
+
+- [Imágenes de tamaño adecuado](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/). No publiques imágenes que sean significativamente más grandes que el tamaño que se muestra en la ventana gráfica del dispositivo móvil.
+
+- [Evita encadenar solicitudes críticas](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).
+
+- [No usas HTTP/2 para todos tus recursos](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).
+
+- [Codifica imágenes de manera eficiente](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
+
+- [Habilita la compresión de texto](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
+
+- [Evita enormes cargas útiles de red](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).
+
+- [Evita un tamaño de DOM excesivo](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). Reduce los bytes de red enviando solo los nodos DOM que se necesitan para renderizar la página.
+
+### WebPageTest
+
+WebPageTest es una herramienta web de rendimiento que utiliza navegadores reales para acceder a páginas web y recopilar métricas de tiempo. Ingresas una URL en [webpagetest.org/easy](https://webpagetest.org/easy) para obtener un informe detallado sobre el rendimiento de carga de la página en un dispositivo Moto G4 real con una conexión 3G lenta. También puedes configurarlo para incluir una auditoría de Lighthouse.
+
+## Resumen
+
+RAIL es una oportunidad para ver la experiencia del usuario de un sitio web como un viaje compuesto por distintas interacciones. Comprendes la forma de cómo los usuarios perciben tu sitio y así establecer objetivos de rendimiento formando un mayor impacto en la experiencia del usuario.
+
+- Centrarse en el usuario.
+
+- Procesar la entrada del usuario en menos de 100 ms.
+
+- Producir un fotograma en menos de 10 ms al animar o desplazarse.
+
+- Maximizar el tiempo de inactividad del hilo principal.
+
+- Cargar contenido interactivo en menos de 5000 ms.
diff --git a/src/site/content/es/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/es/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..37bfa46a5f0
--- /dev/null
+++ b/src/site/content/es/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: Reducir las cargas útiles de JavaScript con la división de código
+authors:
+  - houssein
+description: |2
+
+  El envío de grandes cargas útiles de JavaScript afecta la velocidad de su sitio
+
+  significativamente. En lugar de enviar todo el JavaScript a su usuario tan pronto como
+
+  se carga la primera página de su aplicación, divida su paquete en
+
+  varias piezas y solo envíe lo necesario al principio.
+date: 2018-11-05
+codelabs:
+  - división-del-código-de-codelab
+tags:
+  - performance
+---
+
+A nadie le gusta esperar. **[Más del 50% de los usuarios abandonan un sitio web si tarda más de 3 segundos en cargarse](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)** .
+
+El envío de grandes cargas útiles de JavaScript impacta significativamente en la velocidad de su sitio. En lugar de enviar todo el código JavaScript a su usuario tan pronto como se cargue la primera página de su aplicación, divida su paquete en varias partes y envíe al principio solo lo necesario.
+
+## Medición
+
+Lighthouse muestra una auditoría como fallida cuando se tarda una cantidad significativa de tiempo en ejecutar todo el JavaScript en una página.
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="Una auditoría de Lighthouse fallida que muestra que los scripts tardan demasiado en ejecutarse.", width="797", height="100" %}
+
+Divida el paquete de JavaScript para enviar solo el código necesario para la ruta inicial cuando el usuario carga una aplicación. Esto minimiza la cantidad de script que necesita ser analizado y compilado, resultando en tiempos de carga de página más rápidos.
+
+Los paquetes de módulos populares como[webpack](https://webpack.js.org/guides/code-splitting/), [Parcel](https://parceljs.org/code_splitting.html) y [Rollup](https://rollupjs.org/guide/en#dynamic-import) le permiten dividir sus paquetes mediante [importaciones dinámicas](https://v8.dev/features/dynamic-import). Por ejemplo, considere el siguiente fragmento de código que muestra un ejemplo de una función `someFunction` que se activa al enviar un formulario.
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // uses moduleA
+}
+```
+
+Aquí, `someFunction` usa un módulo importado de una biblioteca en particular. Si este módulo no se usa en otro lugar, el bloque de código se puede modificar para usar una importación dinámica para recuperarlo solo cuando el usuario envía el formulario.
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // using the default export
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // uses moduleA
+}
+```
+
+El código dentro del módulo no se incluye en el paquete inicial y ahora se **carga de forma diferida** o se da al usuario solo cuando es necesario tras el envío del formulario. Para un rendimiento de la página aún mejor, [precargue fragmentos críticos para priorizarlos y recuperarlos antes](/preload-critical-assets) .
+
+Aunque el fragmento de código anterior es un ejemplo simple, la carga diferida de dependencias de terceros no es un patrón común en aplicaciones más grandes. Por lo general, las dependencias de terceros se dividen en un paquete del proveedor aparte, que se puede almacenar en caché ya que no se actualizan con tanta frecuencia. Puede leer más sobre cómo [**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/) puede ayudarlo con esto.
+
+Dividir código a nivel de ruta o componente cuando se usa un framework del lado del cliente es un enfoque más simple para la carga diferida de diferentes partes de su aplicación. Muchos frameworks populares que utilizan webpack ofrecen abstracciones para que la carga diferida sea más fácil que meterse en las configuraciones usted mismo.
diff --git a/src/site/content/es/fast/reduce-network-payloads-using-text-compression/index.md b/src/site/content/es/fast/reduce-network-payloads-using-text-compression/index.md
new file mode 100644
index 00000000000..c4bdc4ab504
--- /dev/null
+++ b/src/site/content/es/fast/reduce-network-payloads-using-text-compression/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: Minimice y comprima las cargas útiles de la red
+authors:
+  - houssein
+date: 2018-11-05
+description: Existen dos técnicas útiles que se pueden utilizar para mejorar el rendimiento de su página web, la minificación y la compresión de datos. Incorporar ambas técnicas reduce el tamaño de la carga útil y también mejora los tiempos de carga de las páginas.
+codelabs:
+  - codelab-text-compression
+  - codelab-text-compression-brotli
+tags:
+  - performance
+---
+
+Hay dos técnicas útiles que se pueden utilizar para mejorar el rendimiento de su página web:
+
+- Minificación
+- Compresión de datos
+
+La incorporación de estas dos técnicas reduce el tamaño de la carga útil y, a su vez, mejora los tiempos de carga de la página.
+
+## Medir
+
+Lighthouse muestra una auditoría fallida si detecta algún recurso CSS o JS en su página que se pueda minificar.
+
+{% Img src="image/admin/ZT9ESeCStegt0SklYbni.png", alt="Auditoría de CSS de Lighthouse Minify", width="800", height="90" %}
+
+{% Img src="image/admin/vDaAnUSvQxmGcoasQj1k.png", alt="Auditoría Lighthouse Minify JS", width="800", height="112" %}
+
+También audita los activos sin comprimir.
+
+{% Img src="image/admin/xfqzdLuu3w3lanxo5Ggc.png", alt="Lighthouse: Habilitar compresión de texto", width="800", height="123" %}
+
+## Minificación
+
+**La minificación** es el proceso de eliminar los espacios en blanco y cualquier código que no sea necesario para crear un archivo de código más pequeño pero perfectamente válido. [Terser](https://github.com/terser-js/terser) es una herramienta popular de compresión de JavaScript y el [webpack](https://webpack.js.org/) v4 incluye un complemento para esta biblioteca de forma predeterminada para crear archivos de compilación minificados.
+
+- Si está utilizando webpack v4 o superior, debería estar listo para comenzar sin hacer ningún trabajo adicional. 👍
+- Si está utilizando una versión anterior de webpack, instale e incluya el `TerserWebpackPlugin` en los ajustes de configuración de su webpack. Siga la [documentación](https://webpack.js.org/plugins/terser-webpack-plugin/) para aprender cómo.
+- Si no está utilizando un paquete de módulos, use `Terser` como herramienta CLI o inclúyalo directamente como una dependencia de su aplicación. La [documentación del](https://github.com/terser-js/terser) proyecto proporciona instrucciones.
+
+## Compresión de datos
+
+La **compresión** es el proceso de modificar datos mediante un algoritmo de compresión.[Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) es el formato de compresión más utilizado para las interacciones entre el servidor y el cliente. [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) es un algoritmo de compresión más nuevo que puede proporcionar resultados de compresión incluso mejores que Gzip.
+
+{% Aside %} La compresión de archivos puede mejorar significativamente el rendimiento de una página web, pero rara vez es necesario que la haga usted mismo. Muchas plataformas de alojamiento, CDN y servidores proxy inversos codifican activos con compresión de forma predeterminada o le permiten configurarlos fácilmente. Lea la documentación de la herramienta que está utilizando para ver si la compresión ya es soportada antes de intentar implementar su propia solución. {% endAside %}
+
+Hay dos formas diferentes de comprimir archivos enviados a un navegador:
+
+- Dinamicamente
+- Estáticamente
+
+Ambos enfoques tienen sus propias ventajas y desventajas, que se tratan en la siguiente sección. Utilice el que funcione mejor para su aplicación.
+
+## Compresión dinámica
+
+Este proceso implica comprimir los activos sobre la marcha a medida que los solicita el navegador. Esto puede ser más simple que comprimir archivos manualmente o con un proceso de compilación, pero puede causar retrasos si se utilizan niveles de compresión altos.
+
+[Express](https://expressjs.com/) es un marco web popular para Node y proporciona una biblioteca middleware de [compresión](https://github.com/expressjs/compression). Úselo para comprimir cualquier activo a medida que se solicite. Aquí hay un ejemplo de un archivo de servidor completo que lo usa correctamente:
+
+```js/5
+const express = require('express');
+const compression = require('compression');
+
+const app = express();
+
+app.use(compression());
+
+app.use(express.static('public'));
+
+const listener = app.listen(process.env.PORT, function() {
+	console.log('Your app is listening on port ' + listener.address().port);
+});
+```
+
+Esto comprime sus activos usando `gzip`. Si su servidor web lo admite, considere usar un módulo separado como [shrink-ray](https://github.com/aickin/shrink-ray#readme) para comprimir a través de Brotli para obtener mejores relaciones de compresión.
+
+{% Aside 'codelab' %} Use express.js para comprimir activos con [gzip](/codelab-text-compression) y [Brotli](/codelab-text-compression-brotli). {% endAside %}
+
+## Compresión estática
+
+La compresión estática implica comprimir y guardar activos de forma anticipada. Esto puede hacer que el proceso de compilación demore más, especialmente si se utilizan niveles de compresión altos, pero garantiza que no se produzcan retrasos cuando el navegador recupera el recurso comprimido.
+
+Si su servidor web es compatible con Brotli, use un complemento como [BrotliWebpackPlugin](https://github.com/mynameiswhm/brotli-webpack-plugin) con webpack para comprimir sus activos como parte de su paso de compilación. De lo contrario, use [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin) para comprimir sus activos con gzip. Se puede incluir como cualquier otro complemento en el archivo de configuración del webpack:
+
+```js/4
+module.exports = {
+	//...
+	plugins: [
+		//...
+		new CompressionPlugin()
+	]
+}
+```
+
+Una vez que los archivos comprimidos sean parte de la carpeta de compilación, cree una ruta en su servidor para manejar todos los endpoints JS para servir los archivos comprimidos. A continuación, se muestra un ejemplo de cómo se puede hacer esto con Node y Express para contenido comprimido con gzip.
+
+<pre>const express = require('express');
+const app = express();
+
+&lt;strong&gt;app.get('*.js', (req, res, next) =&gt; {
+	req.url = req.url + '.gz';
+	res.set('Content-Encoding', 'gzip');
+	next();
+});&lt;/strong&gt;
+
+app.use(express.static('public'));
+</pre>
diff --git a/src/site/content/es/fast/reduce-webfont-size/index.md b/src/site/content/es/fast/reduce-webfont-size/index.md
new file mode 100644
index 00000000000..0ca6eef728a
--- /dev/null
+++ b/src/site/content/es/fast/reduce-webfont-size/index.md
@@ -0,0 +1,228 @@
+---
+layout: post
+title: Reducir el tamaño de WebFont
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2-
+
+  Esta publicación explica cómo reducir el tamaño de la WebFont que usas en tu sitio, para que una buena tipografía no signifique un sitio lento.
+tags:
+  - performance
+  - fonts
+---
+
+La tipografía es fundamental para un buen diseño, marca, legibilidad y accesibilidad. WebFonts habilita todo lo anterior y más: el texto es seleccionable, se puede buscar, se puede hacer zoom y es compatible con altos DPI, lo que proporciona una representación de texto consistente y nítida independientemente del tamaño y la resolución de la pantalla. Las WebFonts (fuentes web) son fundamentales para un buen diseño, experiencia de usuario y rendimiento.
+
+La optimización de WebFont es una pieza fundamental de la estrategia general de rendimiento. Cada fuente es un recurso adicional y algunas fuentes pueden bloquear la renderización del texto, pero el hecho de que la página utilice WebFonts no significa que deba presentarse más lento. Por lo contrario, las fuentes optimizadas, combinadas con una estrategia juiciosa sobre cómo se cargan y aplican en la página, pueden ayudar a reducir el tamaño total de la página y mejorar los tiempos de renderización de la página.
+
+## Anatomía de una WebFont
+
+Un *WebFont* es una colección de glifos y cada glifo es una forma vectorial que describe una letra o símbolo. Como resultado, dos variables simples determinan el tamaño de un archivo de fuente en particular: la complejidad de las rutas vectoriales de cada glifo y el número de glifos en una fuente en particular. Por ejemplo, Open Sans, que es una de las WebFonts más populares, contiene 897 glifos, que incluyen caracteres latinos, griegos y cirílicos.
+
+{% Img src="image/admin/B92rhiBJD9sx88a5CvVy.png", alt="Tabla de glifos de fuentes", width="800", height="309" %}
+
+Al elegir una fuente, es importante tener en cuenta qué conjuntos de caracteres son compatibles. Si necesitas localizar el contenido de tu página a varios idiomas, debes de utilizar una fuente que pueda ofrecer una apariencia y una experiencia coherentes a tus usuarios. Por ejemplo, [la familia de fuentes Noto de Google](https://www.google.com/get/noto/) tiene como objetivo admitir todos los idiomas del mundo. Sin embargo, ten en cuenta que el tamaño total de Noto, con todos los idiomas incluidos, da como resultado una descarga ZIP de más de 1.1 GB.
+
+En esta publicación, descubrirás cómo reducir el tamaño de los archivos de tus WebFonts.
+
+### Formatos de WebFonts
+
+En la actualidad, hay cuatro formatos de contenedor de fuentes en uso en la web:
+
+- [EOT](https://en.wikipedia.org/wiki/Embedded_OpenType)
+- [TTF](https://en.wikipedia.org/wiki/TrueType)
+- [WOFF](https://en.wikipedia.org/wiki/Web_Open_Font_Format)
+- [WOFF2.0](https://www.w3.org/TR/WOFF2/)
+
+[WOFF](http://caniuse.com/#feat=woff) y [WOFF 2.0](http://caniuse.com/#feat=woff2) disfrutan del soporte más amplio, sin embargo, para compatibilidad con navegadores más antiguos, es posible que debas incluir otros formatos:
+
+- Sirve la variante WOFF 2.0 a los navegadores que tengan compatibilidad.
+- Sirve la variante WOFF para la mayoría de navegadores.
+- Sirve la variante TTF a los navegadores antiguos de Android (por debajo de 4.4).
+- Sirve la variante EOT a los navegadores de Internet Explorer (IE) antiguos (por debajo de IE9).
+
+{% Aside %} Técnicamente, existe otro formato de contenedor, el [contenedor de fuentes SVG](http://caniuse.com/svg-fonts), pero Internet Explorer y Firefox nunca tuvieron compatibilidad y ahora está obsoleto en Chrome. Como tal, es de uso limitado y se omite intencionalmente en esta guía. {% endAside %}
+
+### Reducir el tamaño de la fuente con compresión
+
+Una fuente es una colección de glifos, cada uno de los cuales es un conjunto de rutas que describen la forma de la letra. Los glifos individuales son diferentes, pero contienen mucha información similar que se puede comprimir con GZIP o un compresor compatible:
+
+- Los formatos EOT y TTF no están comprimidos de forma predeterminada. Asegúrate de que tus servidores estén configurados para aplicar una [compresión GZIP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip) al entregar estos formatos.
+- WOFF tiene compresión incorporada. Asegúrate de que tu compresor WOFF está utilizando una configuración de compresión óptima.
+- WOFF2 utiliza algoritmos personalizados de preprocesamiento y compresión para ofrecer una reducción del tamaño de archivo de aproximadamente un 30% en comparación con otros formatos. Para obtener más información, consulta el [informe de evaluación de WOFF 2.0](http://www.w3.org/TR/WOFF20ER/).
+
+Finalmente, vale la pena señalar que algunos formatos de fuente contienen metadatos adicionales, como [sugerencias de fuentes](https://en.wikipedia.org/wiki/Font_hinting) e [información de kerning](https://en.wikipedia.org/wiki/Kerning) que pueden no ser necesarios en algunas plataformas, los cuales permiten una mayor optimización del tamaño de archivo. Consulta tu compresor de fuentes para conocer las opciones de optimización disponibles y, si tomas esta ruta, asegúrate de tener la infraestructura adecuada para probar y entregar estas fuentes optimizadas a cada navegador. Por ejemplo, [Google Fonts](https://fonts.google.com/) mantiene más de 30 variantes optimizadas para cada fuente y detecta y entrega automáticamente la variante óptima para cada plataforma y navegador.
+
+{% Aside %} Considera usar la [compresión Zopfli](http://en.wikipedia.org/wiki/Zopfli) para los formatos de EOT, TTF y WOFF. Zopfli es un compresor compatible con zlib que ofrece una reducción del tamaño de archivo de un 5% en comparación con gzip. {% endAside %}
+
+## Define una familia de fuentes con @font-face
+
+La regla `@font-face` de CSS te permite definir la ubicación de un recurso de fuente en particular, sus características de estilo y los puntos de código Unicode para los que debe usarse. Se puede usar una combinación de `@font-face` para construir una "font family (familia de fuentes)", que el navegador usará para evaluar qué recursos de fuentes deben descargarse y aplicarse a la página actual.
+
+### Considera una fuente variable
+
+Las fuentes variables pueden reducir significativamente el tamaño de tus fuentes en los casos en que necesites múltiples variantes de una fuente. En lugar de tener que cargar los estilos regular y negrita más sus versiones en cursiva, puedes cargar un solo archivo que contenga toda la información.
+
+Las fuentes variables ahora son compatibles con todos los navegadores modernos. Obtén más información en [Introducción a las fuentes variables en la web](/variable-fonts/).
+
+### Selecciona el formato correcto
+
+Cada `@font-face` proporciona el nombre de la familia de fuentes, que actúa como un grupo lógico de declaraciones múltiples, [propiedades de fuente](http://www.w3.org/TR/css3-fonts/#font-prop-desc) como estilo (style), peso (weight) y estiramiento (stretch), y el [src descriptor](http://www.w3.org/TR/css3-fonts/#src-desc), que especifica una lista priorizada de ubicaciones para la fuente utilizada como recurso.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome.woff2') format('woff2'),
+        url('/fonts/awesome.woff') format('woff'),
+        url('/fonts/awesome.ttf') format('truetype'),
+        url('/fonts/awesome.eot') format('embedded-opentype');
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Awesome Font Italic'),
+        url('/fonts/awesome-i.woff2') format('woff2'),
+        url('/fonts/awesome-i.woff') format('woff'),
+        url('/fonts/awesome-i.ttf') format('truetype'),
+        url('/fonts/awesome-i.eot') format('embedded-opentype');
+}
+```
+
+Primero, ten en cuenta que los ejemplos anteriores definen una sola familia *Awesome Font* con dos estilos (normal y *cursiva*), cada uno de los cuales apunta a un conjunto diferente de recursos de fuentes. A su vez, cada descriptor `src` contiene una lista priorizada y separada por comas de variantes de recursos:
+
+- La directiva de `local()` permite hacer referencia, cargar y usar fuentes instaladas localmente.
+- La directiva de `url()` permite cargar fuentes externas y puede contener una sugerencia de `format()` opcional que indica el formato de la fuente a la que hace referencia la URL proporcionada.
+
+{% Aside %} A menos que estés haciendo referencia a una de las fuentes predeterminadas del sistema, es raro que el usuario la tenga instalada localmente, especialmente en dispositivos móviles, donde es efectivamente imposible "instalar" fuentes adicionales. Siempre debes de comenzar con una entrada `local()` "por si acaso" y luego proporcionar una lista de entradas `url().` {% endAside %}
+
+Cuando el navegador determina que se necesita la fuente, se recorre la lista de recursos proporcionada en el orden especificado e intenta cargar el recurso apropiado. Por ejemplo, siguiendo el ejemplo anterior:
+
+1. El navegador realiza el diseño de la página y determina qué variantes de fuente son necesarias para renderizar el texto especificado en la página.
+2. Para cada fuente requerida, el navegador verifica si la fuente está disponible localmente.
+3. Si la fuente no está disponible localmente, el navegador itera sobre definiciones externas:
+    - Si hay una sugerencia de formato, el navegador comprueba si admite la sugerencia antes de iniciar la descarga. Si el navegador no admite la sugerencia, el navegador avanza a la siguiente.
+    - Si no hay ninguna sugerencia de formato, el navegador descarga el recurso.
+
+La combinación de directivas locales y externas con sugerencias de formato adecuadas te permite especificar todos los formatos de fuente disponibles y dejar que el navegador se encargue del resto. El navegador determina qué recursos son necesarios y selecciona el formato óptimo.
+
+{% Aside %} El orden en el que se especifican las variantes de fuente es importante. El navegador elige el primer formato que admite. Por lo tanto, si deseas que los navegadores más nuevos usen WOFF 2.0, entonces debes de colocar la declaración WOFF 2.0 por encima de WOFF. {% endAside %}
+
+### Subconjunto de rango Unicode
+
+Además de las propiedades de la fuente, como el estilo, el peso y el estiramiento, la `@font-face` permite definir un conjunto de puntos de código Unicode admitidos por cada recurso. Esto te permite dividir una fuente Unicode grande en subconjuntos más pequeños (por ejemplo, subconjuntos latinos, cirílicos y griegos) y solo descargar los glifos necesarios para representar el texto en una página en particular.
+
+El [descriptor de rango Unicode](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range) te permite especificar una lista delimitada por comas de valores de rango, cada uno de los cuales puede estar en una de tres formas diferentes:
+
+- Punto de código único (por ejemplo, `U+416`)
+- Rango de intervalo (por ejemplo, `U+400-4ff`): indica los puntos de código de inicio y finalización de un rango
+- Rango de comodines (por ejemplo, `U+4??`) `?` los caracteres indican cualquier dígito hexadecimal
+
+Por ejemplo, puedes dividir tu familia *Awesome Font* en subconjuntos latinos y japoneses, cada uno de los cuales el navegador descarga según sea necesario:
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-jp.woff2') format('woff2'),
+        url('/fonts/awesome-jp.woff') format('woff'),
+        url('/fonts/awesome-jp.ttf') format('truetype'),
+        url('/fonts/awesome-jp.eot') format('embedded-opentype');
+  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
+}
+```
+
+{% Aside %} El subconjunto de rango Unicode es particularmente importante para los idiomas asiáticos, donde el número de glifos es mucho mayor que en los idiomas occidentales y una fuente "completa" típica a menudo se mide en megabytes en lugar de decenas de kilobytes. {% endAside %}
+
+El uso de subconjuntos de rango Unicode y archivos separados para cada variante estilística de la fuente te permite definir una familia de fuentes compuestas que es más rápida y eficiente de descargar. Los visitantes solo descargan las variantes y subconjuntos que necesitan y no están obligados a descargar subconjuntos que tal vez nunca vean o usen en la página.
+
+La mayoría de los navegadores [ahora admiten el rango Unicode](http://caniuse.com/#feat=font-unicode-range). Para lograr compatibilidad con navegadores más antiguos, es posible que debas de recurrir a "subconjuntos manuales". En este caso, debes de recurrir a proporcionar un único recurso de fuente que contenga todos los subconjuntos necesarios y ocultar el resto del navegador. Por ejemplo, si la página solo usa caracteres latinos, entonces puedes quitar otros glifos y servir ese subconjunto en particular como un recurso independiente.
+
+1. **Determina qué subconjuntos se necesitan:**
+    - Si el navegador permite subconjuntos de rango Unicode, automáticamente se seleccionará el subconjunto correcto. La página solo necesita proporcionar los archivos del subconjunto y especificar los rangos Unicode apropiados en las reglas del `@font-face`.
+    - Si el navegador no permite subconjuntos de rango Unicode, entonces la página debe ocultar todos los subconjuntos innecesarios; es decir, el desarrollador debe especificar los subconjuntos necesarios.
+2. **Genera subconjuntos de fuentes:**
+    - Utiliza la [herramienta pyftsubset](https://github.com/behdad/fonttools/) de código abierto para crear subconjuntos y optimizar tus fuentes.
+    - Algunos servicios de fuentes permiten el subconjunto manual a través de parámetros de consulta personalizados, que puedes utilizar para especificar manualmente el subconjunto requerido para tu página. Consulta la documentación de tu proveedor de fuentes.
+
+### Selección y síntesis de fuentes
+
+Cada familia de fuentes se compone de múltiples variantes estilísticas (regular, negrita, cursiva) y varios pesos para cada estilo, cada uno de los cuales, a su vez, puede contener formas de glifos muy diferentes, por ejemplo, diferentes espaciado, tamaño o una forma completamente diferente.
+
+{% Img src="image/admin/FNtAc2xRmx2MuUt2MADj.png", alt="Peso de fuente", width="697", height="127" %}
+
+Por ejemplo, el diagrama anterior ilustra una familia de fuentes que ofrece tres pesos de negrita diferentes: 400 (normal), 700 (negrita) y 900 (extra negrita). Todas las demás variantes intermedias (indicadas en gris) se asignan automáticamente a la variante más cercana por el navegador.
+
+<blockquote>
+  <p>Cuando se especifica un peso para el que no existe una font face, se utiliza una font face con un peso cercano. En general, los pesos en negrita se asignan a rostros con pesos más pesados y los pesos ligeros se asignan a font face con pesos más livianos.</p>
+<cite><p data-md-type="paragraph"><a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm">Algoritmo de coincidencia de fuentes CSS</a></p></cite>
+</blockquote>
+
+Se aplica una lógica similar a las variantes en *cursiva.* El diseñador de fuentes controla qué variantes producirán y tú controlas qué variantes usarás en la página. Debido a que cada variante es una descarga separada, es una buena idea mantener pequeña la cantidad de variantes. Por ejemplo, puedes definir dos variantes en negrita para la familia de *Awesome Font:*
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l-700.woff2') format('woff2'),
+        url('/fonts/awesome-l-700.woff') format('woff'),
+        url('/fonts/awesome-l-700.ttf') format('truetype'),
+        url('/fonts/awesome-l-700.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+El ejemplo anterior declara la familia *Awesome Font* que se compone de dos recursos que cubren el mismo conjunto de glifos latinos (`U+000-5FF`) pero ofrecen dos "pesos" diferentes: normal (400) y negrita (700). Sin embargo, ¿qué sucede si una de tus reglas CSS especifica un peso de fuente diferente o establece la propiedad de font-style en cursiva?
+
+- Si no está disponible una coincidencia de fuente exacta, el navegador sustituye con la coincidencia más cercana.
+- Si no se encuentra ninguna coincidencia estilística (por ejemplo, no se declararon variantes en cursiva en el ejemplo anterior), el navegador sintetiza su propia variante de fuente.
+
+{% Img src="image/admin/a8Jo2cIO1tPsj71AzftS.png", alt="Síntesis de fuentes", width="800", height="356" %}
+
+{% Aside 'warning' %} Ten en cuenta que los enfoques sintetizados pueden no ser adecuados para scripts como el cirílico, donde las formas en cursiva tienen formas muy diferentes. Para una fidelidad adecuada en esos guiones, usa una fuente real en cursiva. {% endAside %}
+
+El ejemplo anterior ilustra la diferencia entre los resultados de fuentes reales y sintetizadas para Open Sans. Todas las variantes sintetizadas se generan a partir de una única fuente con un peso de 400. Como puedes ver, hay una diferencia notable en los resultados. No se especifican los detalles de cómo generar las variantes en negrita y oblicua. Por lo tanto, los resultados varían de un navegador a otro y dependen en gran medida de la fuente.
+
+{% Aside %} Para obtener la mejor consistencia y resultados visuales, no confíes en la síntesis de fuentes. En su lugar, minimiza la cantidad de variantes de fuentes utilizadas y especifica tus ubicaciones, de modo que el navegador pueda descargarlas cuando se utilicen en la página. O elije utilizar una fuente variable. Dicho esto, en algunos casos una variante sintetizada [puede ser una opción viable](https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/), pero de igual manera, ten cuidado al usar variantes sintetizadas. {% endAside %}
+
+## Lista de verificación de optimización del tamaño de WebFont
+
+- **Audita y controla el uso de fuentes:** No utilices demasiadas fuentes en tus páginas y, para cada fuente, minimiza la cantidad de variantes utilizadas. Esto ayuda a producir una experiencia más consistente y más rápida para tus usuarios.
+- **Realiza subconjuntos de tus recursos de fuentes:** Muchas fuentes pueden ser agregados como subconjuntos o dividirse en múltiples rangos Unicode para entregar solo los glifos que requiere una página en particular. Esto reduce el tamaño del archivo y mejora la velocidad de descarga del recurso. Sin embargo, al definir los subconjuntos, ten cuidado de optimizar para la reutilización de fuentes. Por ejemplo, no descargues un conjunto de caracteres diferente pero que se superpone en cada página. Una buena práctica es crear subconjuntos basados en la escritura: por ejemplo, latín y cirílico.
+- **Entrega formatos de fuente optimizados para cada navegador:** Proporciona cada fuente en formatos WOFF 2.0, WOFF, EOT y TTF. Asegúrate de aplicar compresión GZIP a los formatos EOT y TTF, ya que no están comprimidos de forma predeterminada.
+- **Dé prioridad a `local()` en su lista `src`** : enumerar `local('Font Name')` primero en su `src` asegura que las solicitudes HTTP no se realicen para fuentes que ya están instaladas.
+- **Utiliza [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)** para probar la [compresión de texto](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
diff --git a/src/site/content/es/fast/remove-unused-code/index.md b/src/site/content/es/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..24184b137ac
--- /dev/null
+++ b/src/site/content/es/fast/remove-unused-code/index.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Eliminar el código no utilizado
+subhead: El npm hace que agregar código a su proyecto sea muy sencillo. ¿Pero realmente estás usando todo esos bytes extra?
+authors:
+  - houssein
+date: 2018-11-05
+description: Los registros como el npm han transformado el mundo de JavaScript para mejor al permitir que cualquier persona descargue y use fácilmente más de medio millón de paquetes públicos, pero a menudo incluimos bibliotecas que no estamos utilizando por completo. Para solucionar este problema, analice su paquete para detectar el código no utilizado.
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+Los registros como el [npm](https://docs.npmjs.com/getting-started/what-is-npm) han transformado el mundo de JavaScript para mejor, al permitir que cualquiera pueda descargar y usar fácilmente más de *medio millón de* paquetes públicos, pero a menudo incluimos bibliotecas que no estamos utilizando por completo. Para solucionar este problema, **analice su paquete** para detectar el código no utilizado. Posteriomente, elimine las bibliotecas **no utilizadas** e **innecesarias.**
+
+## Analizar tu paquete
+
+DevTools facilita ver el tamaño de todas las solicitudes de red:
+{% Instruction 'devtools-network', 'ol' %}
+{% Instruction 'disable-cache', 'ol' %}
+{% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="Panel de red con solicitud de paquete", width="800", height="169" %}
+
+La pestaña [Cobertura](https://developer.chrome.com/docs/devtools/coverage/) en DevTools también le dirá cuánto código CSS y JS en su aplicación no es utilizado.
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="Cobertura de código en DevTools", width="800", height="562" %}
+
+Al especificar una configuración completa de Lighthouse a través de su Node CLI, también se puede utilizar una auditoría de "JavaScript no utilizado" para rastrear la cantidad de código no utilizado que viene con su aplicación.
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Auditoría Lighthouse de JS no utilizado", width="800", height="347" %}
+
+Si está utilizando [webpack](https://webpack.js.org/) para generar sus paquetes, [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) lo ayudará a investigar el contenido del el paquete. Incluya el complemento en el archivo de configuración webpack como cualquier otro complemento:
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+Aunque webpack se usa comúnmente para crear aplicaciones de una sola página, otros generadores de paquetes, como [Parcel](https://parceljs.org/) y [Rollup](https://rollupjs.org/guide/en), también tienen herramientas de visualización que puede utilizar para analizar su paquete.
+
+Cargar de nuevo la aplicación con este complemento incluido, muestra un mapa de árbol ampliable de todo su paquete.
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468"%}
+
+El uso de esta visualización le permite inspeccionar qué partes de su paquete son más grandes que otras, así como tener una mejor idea de todas las bibliotecas que está importando. Esto puede ayudar a identificar si está utilizando bibliotecas innecesarias o no utilizadas.
+
+## Eliminar bibliotecas no utilizadas
+
+En la imagen de mapa de árbol anterior, hay bastantes paquetes dentro de un solo dominio `@firebase`. Si su sitio web solo necesita el componente de base de datos firebase, actualice las importaciones para obtener esa biblioteca:
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+Es importante enfatizar que este proceso es significativamente más complejo para aplicaciones más grandes.
+
+Para el paquete de aspecto misterioso que está bastante seguro de que no se está utilizando en ningún lugar, retroceda un paso y vea cuál de sus dependencias de nivel superior lo está usando. Intente encontrar una manera de importar solo los componentes que necesita. Si no está utilizando una biblioteca, elimínela. Si la biblioteca no es necesaria para la carga de la página inicial, considere si puede [cargarse de forma diferida](/reduce-javascript-payloads-with-code-splitting).
+
+Y en caso de que esté utilizando webpack, consulte [la lista de complementos que eliminan automáticamente el código no utilizado de las bibliotecas populares](https://github.com/GoogleChromeLabs/webpack-libs-optimizations).
+
+{% Aside 'codelab' %} [Elimina el código no utilizado.](/codelab-remove-unused-code) {% endAside %}
+
+## Eliminar bibliotecas innecesarias
+
+No todas las bibliotecas se pueden dividir fácilmente en partes e importar de forma selectiva. En estos casos, considere si la biblioteca podría eliminarse por completo. La creación de una solución personalizada o el aprovechamiento de una alternativa más ligera siempre deben ser opciones que valgan la pena considerar. Sin embargo, es importante sopesar la complejidad y el trabajo necesario para cualquiera de estos esfuerzos antes de eliminar una biblioteca por completo de una aplicación.
diff --git a/src/site/content/es/fast/replace-gifs-with-videos/index.md b/src/site/content/es/fast/replace-gifs-with-videos/index.md
new file mode 100644
index 00000000000..a233ad56bd4
--- /dev/null
+++ b/src/site/content/es/fast/replace-gifs-with-videos/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: Reemplace los GIF animados con video para cargas de página más rápidas
+authors:
+  - houssein
+description: "¿Alguna vez ha visto un GIF animado en un servicio como Imgur o Gfycat, lo ha inspeccionado en sus herramientas de desarrollo, sólo para descubrir que ese GIF era realmente un vídeo? Hay una buena razón para ello. Los GIFs animados pueden ser realmente enormes. Si se convierten los GIFs grandes en vídeos, se puede ahorrar mucho ancho de banda a los usuarios."
+date: 2018-11-05
+updated: 2019-08-29
+codelabs:
+  - laboratorio-de-código-reemplazar-gifs-con-video
+tags:
+  - performance
+feedback:
+  - api
+---
+
+¿Alguna vez ha visto un GIF animado en un servicio como Imgur o Gfycat, lo inspeccionó en sus herramientas de desarrollo y descubrió que el GIF era realmente un video? Hay una buena razón para ello. Los GIF animados pueden ser francamente *enormes*.
+
+{% Img src="image/admin/3UZ0b9dDotVIXWQT5Auk.png", alt="El panel de red de DevTools muestra un gif de 13.7 MB", width="800", height="155" %}
+
+Afortunadamente, esta es una de esas áreas del rendimiento de carga en las que hacer un trabajo relativamente pequeño brinda grandes ganancias. **Al convertir GIF grandes en videos, puede ahorrarle mucho ancho de banda a los usuarios**.
+
+## Mida primero
+
+Use Lighthouse para verificar su sitio en busca de GIFs que se puedan convertir en videos. En DevTools, haga clic en la pestaña Auditorías y marque la casilla de verificación Rendimiento. Luego, ejecute Lighthouse y verifique el informe. Si tiene algún GIF que se pueda convertir, debería ver una sugerencia para "Usar formatos de video para contenido animado":
+
+{% Img src="image/admin/KOSr9IivnkyaFk6RJ5u1.png", alt="Una auditoría de Lighthouse fallida, use formatos de video para contenido animado.", width="800", height="173" %}
+
+## Cree videos MPEG
+
+Hay varias formas de convertir GIF a video; **[FFmpeg](https://www.ffmpeg.org/)** es la herramienta utilizada en esta guía. Para usar FFmpeg para convertir el GIF, `my-animation.gif` en un video MP4, ejecute el siguiente comando en su consola:
+
+```bash
+ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+Esto le dice a FFmpeg que tome `my-animation.gif` como **entrada**, indicada por la bandera `-i` y que la convierta en un video llamado `my-animation.mp4`.
+
+El codificador libx264 solo funciona con archivos que tienen dimensiones pares, como 320 px por 240 px. Si el GIF de entrada tiene dimensiones impares, puede incluir un filtro de recorte para evitar que FFmpeg arroje un error de 'altura/ancho no divisible por 2':
+
+```bash
+ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+## Cree videos WebM
+
+Mientras el formato MP4 existe desde 1999, WebM es un formato de archivo relativamente nuevo lanzado inicialmente en 2010. Los videos WebM son mucho más pequeños que los videos MP4, pero no todos los navegadores son compatibles con ellos, por lo que tiene sentido generar ambos.
+
+Para usar FFmpeg para convertir `my-animation.gif` en un video WebM, ejecute el siguiente comando en su consola:
+
+```bash
+ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
+```
+
+## Compare la diferencia
+
+El ahorro de costos entre un GIF y un video puede ser bastante significativo.
+
+{% Img src="image/admin/LWzvOWaOdMnNLTPWjayt.png", alt="La comparación del tamaño del archivo muestra 3.7 MB para el gif, 551 KB para el mp4 y 341 KB para el webm.", width="800", height="188" %}
+
+En este ejemplo, el GIF inicial es de 3.7 MB, en comparación con la versión MP4, que tiene 551 KB, y la versión WebM, ¡que solo tiene 341 KB!
+
+## Reemplace la imagen GIF con un video
+
+Los GIF animados tienen tres características clave que un video debe recrear:
+
+- Se reproducen automáticamente.
+- Se repiten continuamente (normalmente, pero es posible evitarlo).
+- No tienen sonido.
+
+Afortunadamente, puede recrear estos comportamientos usando el elemento `<video>`
+
+```bash
+<video autoplay loop muted playsinline></video>
+```
+
+Un elemento `<video>` con estos atributos se reproduce automáticamente, se repite sin cesar, no reproduce audio y se reproduce en línea (es decir, no en pantalla completa), ¡todos los comportamientos característicos que se esperan de los GIF animados! 🎉
+
+Finalmente, el elemento `<video>` requiere uno o más elementos hijo `<source>` apuntando a diferentes archivos de video entre los que el navegador puede elegir, dependiendo del formato de soporte del navegador. Ofrezca WebM y MP4, de modo que si un navegador no es compatible con WebM, puede recurrir a MP4.
+
+```html
+<video autoplay loop muted playsinline>
+  <source src="my-animation.webm" type="video/webm">
+  <source src="my-animation.mp4" type="video/mp4">
+</video>
+```
+
+{% Aside 'codelab' %} [Reemplace un GIF animado por un video](/codelab-replace-gifs-with-video). {% endAside %}
+
+{% Aside %} Los navegadores no especulan sobre cuál `<source>` es óptimo, por lo que el orden de los `<source>` es importante. Por ejemplo, si primero especifica un video MP4 y el navegador es compatible con WebM, los navegadores omitirán WebM `<source>` y utilizarán MPEG-4 en su lugar. Si prefiere que se use un `<source>` WebM, ¡especifíquelo primero! {% endAside %}
diff --git a/src/site/content/es/fast/serve-images-webp/index.md b/src/site/content/es/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..448f084c5b4
--- /dev/null
+++ b/src/site/content/es/fast/serve-images-webp/index.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: Usar imágenes WebP
+authors:
+  - katiehempenius
+description: |-
+  Las imágenes WebP son más pequeñas que sus contrapartes JPEG y PNG, por lo general en la
+  magnitud de una reducción del 25-35% en el tamaño del archivo. Esto reduce el tamaño de la página y mejora el rendimiento.
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - codelab-serve-images-webp
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## ¿Por qué es importante?
+
+Las imágenes WebP son más pequeñas que sus contrapartes JPEG y PNG, por lo general en la magnitud de una reducción del 25 al 35% en el tamaño del archivo. Esto reduce el tamaño de las páginas y mejora el rendimiento.
+
+- YouTube descubrió que cambiar a miniaturas de WebP resultó en [cargas de página un 10% más rápidas](https://www.youtube.com/watch?v=rqXMwLbYEE4).
+- Facebook [experimentó](https://code.fb.com/android/improving-facebook-on-android/) un ahorro del 25% al 35% para los archivos JPEG y un ahorro del 80% para los archivos PNG cuando pasaron al uso de WebP.
+
+WebP es un excelente reemplazo para imágenes JPEG, PNG y GIF. Además, WebP ofrece compresión sin pérdida y con pérdida de ambas maneras. En la compresión sin pérdidas no se pierden datos. La compresión con pérdida reduce el tamaño del archivo, pero a costa de posiblemente reducir la calidad de la imagen.
+
+## Convertir imágenes a WebP
+
+Las personas generalmente usan uno de los siguientes enfoques para convertir sus imágenes a WebP: la [herramienta de línea de comandos cwebp (CLI)](https://developers.google.com/speed/webp/docs/using) o el [complemento Imagemin WebP](https://github.com/imagemin/imagemin-webp) (paquete npm). El complemento Imagemin WebP es generalmente la mejor opción si su proyecto utiliza scripts o herramientas de compilación (por ejemplo, Webpack o Gulp), mientras que la CLI es una buena opción para proyectos simples o si solo necesita convertir imágenes una vez.
+
+Cuando convierte imágenes a WebP, tiene la opción de establecer una amplia variedad de configuraciones de compresión, pero para la mayoría de las personas, lo único que debe preocuparle es la configuración de calidad. Puede especificar un nivel de calidad de 0 (el peor) a 100 (el mejor). Vale la pena jugar con este nivel para encontrar el equilibrio adecuado entre calidad de imagen y sus necesidades.
+
+### Utilice cwebp
+
+Convierta un solo archivo, usando la configuración de compresión predeterminada de cwebp:
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+Convierta un solo archivo, con un nivel de calidad de `50`:
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+Convierta todos los archivos de un directorio:
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### Utilice Imagemin
+
+El complemento Imagemin WebP se puede usar solo o con su herramienta de compilación favorita (Webpack/Gulp/Grunt/etc.). Por lo general, esto implica agregar ~10 líneas de código a un script de compilación o al archivo de configuración de su herramienta de compilación. Aquí hay ejemplos de cómo hacer eso para [Webpack](https://glitch.com/~webp-webpack), [Gulp](https://glitch.com/~webp-gulp) y [Grunt](https://glitch.com/~webp-grunt).
+
+Si no está utilizando una de esas herramientas de compilación, puede utilizar Imagemin por sí solo como un script de Node. Este script convertirá los archivos en el directorio `images` y los guardará en el directorio `compressed_images`.
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## Servir imágenes WebP
+
+Si su sitio solo admite [navegadores](https://caniuse.com/#search=webp) compatibles con WebP, puede dejar de leer. De lo contrario, sirva WebP a los navegadores más nuevos y una imagen de respaldo a los navegadores más antiguos:
+
+**Antes:**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**Después:**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+Las etiquetas [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture), [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) y `<img>`, incluida la forma en que están ordenadas entre sí, interactúan para lograr este resultado final.
+
+### picture
+
+La etiqueta `<picture>` proporciona un contenedor para cero o más etiquetas `<source>` y una etiqueta `<img>`.
+
+### source
+
+La etiqueta `<source>` especifica un recurso multimedia.
+
+El navegador utiliza la primera fuente de la lista con formato compatible. Si el navegador no admite ninguno de los formatos enumerados en las etiquetas `<source>`, vuelve a cargar la imagen especificada por la etiqueta `<img>`.
+
+{% Aside 'gotchas' %}
+
+- La etiqueta `<source>` para el formato de imagen "preferido" (en este caso es WebP) debe aparecer primero, antes que otras etiquetas `<source>`.
+
+- El valor del atributo `type` debe ser el tipo MIME correspondiente al formato de imagen. El [tipo MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) de una imagen y su extensión de archivo suelen ser similares, pero no son necesariamente lo mismo (p. Ej., `.jpg` frente a `image/jpeg`).
+
+{% endAside %}
+
+### img
+
+La etiqueta `<img>` es lo que hace que este código funcione en navegadores que no admiten la etiqueta `<picture>` Si un navegador no admite la etiqueta `<picture>`, las ignorará. Por lo tanto, solo "ve" la etiqueta `<img src="flower.jpg" alt="">` y carga esa imagen.
+
+{% Aside 'gotchas' %}
+
+- La etiqueta `<img>` siempre debe incluirse, y siempre debe aparecer en último lugar, después de todas las etiquetas `<source>`.
+- El recurso especificado por la etiqueta `<img>` debe estar en un formato compatible universalmente (p. Ej., JPEG), por lo que se puede utilizar como respaldo. {% endAside %}
+
+## Verificar el uso de WebP
+
+Lighthouse se puede utilizar para verificar que todas las imágenes de su sitio se sirvan mediante WebP. Ejecute la auditoría de rendimiento de Lighthouse (**Lighthouse&gt; Opciones&gt; Rendimiento**) y busque los resultados de la auditoría **Servir imágenes en formatos de próxima generación**. Lighthouse enumerará todas las imágenes que no se estén publicando en formato WebP.
diff --git a/src/site/content/es/fast/serve-images-with-correct-dimensions/index.md b/src/site/content/es/fast/serve-images-with-correct-dimensions/index.md
new file mode 100644
index 00000000000..f86f3c53807
--- /dev/null
+++ b/src/site/content/es/fast/serve-images-with-correct-dimensions/index.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Sirve imágenes con las dimensiones correctas
+authors:
+  - katiehempenius
+description: 'Nos ha pasado a todos: se le olvidó reducir la escala de una imagen antes de agregarla a la página. La imagen se ve bien, pero está desperdiciando los datos de los usuarios y perjudicando el rendimiento de la página.'
+date: 2018-11-05
+wf_blink_components: N / A
+codelabs:
+  - codelab-serve-images-correct-dimensions
+tags:
+  - performance
+---
+
+Nos ha pasado a todos: se ha olvidado de reducir la escala de una imagen antes de agregarla a la página. La imagen se ve bien, pero está desperdiciando los datos de los usuarios y perjudicando el rendimiento de la página.
+
+## Identificar imágenes de tamaño incorrecto
+
+Lighthouse facilita la identificación de imágenes de tamaño incorrecto. Ejecute la Auditoría de rendimiento en Lighthouse > Opciones > Rendimiento (**Lighthouse > Options > Performance**) y busque los resultados de la auditoría de Imágenes de tamaño adecuado (**Properly size images**). La auditoría enumera todas las imágenes cuyo tamaño debe cambiarse.
+
+## Determinar el tamaño de imagen correcto
+
+El dimensionamiento imágenes puede resultar ilusoriamente complicado. Por esta razón, hemos proporcionado dos enfoques: el "bueno" y el "mejor". Ambos mejorarán el rendimiento, pero puede tardar un poco más en comprender e implementar el enfoque "mejor". Sin embargo, también será recompensado con una mayor mejora del rendimiento. La mejor opción para usted es aquella con que pueda implementar de forma más cómoda.
+
+### Una nota rápida sobre las unidades CSS
+
+Hay dos tipos de unidades CSS para especificar el tamaño de los elementos HTML, incluyendo las imágenes:
+
+- Unidades absolutas: los elementos diseñados con unidades absolutas siempre se mostrarán con el mismo tamaño, independientemente del dispositivo. Ejemplos de unidades CSS absolutas válidas: px, cm, mm, in.
+- Unidades relativas: los elementos diseñados con unidades relativas se mostrarán en diferentes tamaños, según la longitud relativa especificada. Ejemplos de unidades CSS relativas válidas:%, vw (1vw = 1% del ancho de la ventana gráfica), em (1.5 em = 1.5 veces el tamaño de fuente).
+
+### El enfoque "bueno"
+
+Para imágenes con tamaño basado en…
+
+- **Unidades relativas** : cambie el tamaño de la imagen a un tamaño que funcione en todos los dispositivos.
+
+Puede que le resulte útil comprobar sus datos analíticos (por ejemplo, Google Analytics) para ver qué tamaños de pantalla utilizan habitualmente sus usuarios. Alternativamente, [screeniz.es](http://screensiz.es/) proporciona información sobre las pantallas de muchos dispositivos comunes.
+
+- **Unidades absolutas** : cambie el tamaño de la imagen para que coincida con el tamaño en el que se muestra.
+
+El panel DevTools Elements se puede utilizar para determinar en qué tamaño se muestra una imagen.
+
+{% Img src="image/admin/pKQa0Huu0KGInOekdz6M.png", alt="Panel del elemento DevTools", width="800", height="364" %}
+
+### El enfoque "mejor"
+
+Para imágenes con tamaño basado en…
+
+- **Unidades absolutas:** Use los atributos [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset) y [sizes](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes) para servir diferentes imágenes a diferentes densidades de pantalla (Lea la guía sobre imágenes responsivas [aquí](/serve-responsive-images)).
+
+"Densidad de pantalla" se refiere al hecho de que diferentes pantallas tienen diferentes densidades de píxeles. En igualdad de condiciones, una pantalla de alta densidad de píxeles se verá más nítida que una pantalla de baja densidad de píxeles.
+
+Como resultado, se necesitan múltiples versiones de imágenes si desea que los usuarios experimenten las imágenes más nítidas posibles, independientemente de la densidad de píxeles de su dispositivo.
+
+{% Aside %} Para algunos sitios esta diferencia en la calidad de la imagen es importante, para otros no es así. {% endAside %}
+
+Las técnicas de Imágenes receptivas hacen que esto sea posible al dejarle enumerar varias versiones de imágenes y permitir que el dispositivo escoja la imagen que mejor se adapte a sus necesidades.
+
+- **Unidades relativas:** Use imágenes responsivas para mostrar diferentes imágenes para diferentes tamaños de pantalla (Lea la guía [aquí](/serve-responsive-images)).
+
+Una imagen que funciona en todos los dispositivos será demasiado grande para dispositivos más pequeños. Las técnicas de Imágenes responsivas, específicamente [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset%22) y [sizes](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes), le permiten especificar varias versiones de una imagen y que el dispositivo elija el tamaño que mejor funcione.
+
+## Cambiar el tamaño de las imágenes
+
+Independientemente del enfoque que elija, puede resultarle útil utilizar ImageMagick para cambiar el tamaño de sus imágenes. [ImageMagick](https://www.imagemagick.org/script/index.php) es la herramienta de línea de comandos más popular para crear y editar imágenes. La mayoría de las personas pueden cambiar el tamaño de las imágenes mucho más rápidamente cuando usan la CLI que un editor de imágenes basado en GUI.
+
+Para cambiar el tamaño de la imagen al 25 % del tamaño del original:
+
+```bash
+convert flower.jpg -resize 25% flower_small.jpg
+```
+
+Para ajustar la imagen a un tamaño de "200 px de ancho por 100 px de alto":
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 200x100 flower_small.jpg
+
+# Windows
+magick convert flower.jpg -resize 200x100 flower_small.jpg
+```
+
+Si va a cambiar el tamaño de muchas imágenes, puede que le resulte más conveniente utilizar una secuencia de comandos o un servicio para automatizar el proceso. Puede obtener más información sobre esto en la guía de imágenes responsivas.
+
+## Verificar
+
+Una vez que haya cambiado el tamaño de todas sus imágenes, vuelva a ejecutar Lighthouse para verificar que no faltó nada.
diff --git a/src/site/content/es/fast/serve-responsive-images/index.md b/src/site/content/es/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..c4dab2d681f
--- /dev/null
+++ b/src/site/content/es/fast/serve-responsive-images/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Servir imágenes receptivas
+authors:
+  - katiehempenius
+description: Servir imágenes con tamaño para computadora de escritorio en dispositivos móviles puede usar de 2 a 4 veces más datos de lo necesario. En lugar de un enfoque de "talla única", utilice diferentes tamaños de imagen para diferentes dispositivos.
+date: 2018-11-05
+updated: 2021-06-04
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+Servir imágenes con tamaño para computadora de escritorio en dispositivos móviles puede usar de 2 a 4 veces más datos de lo necesario. En lugar de un enfoque de "talla única", utilice diferentes tamaños de imagen para diferentes dispositivos.
+
+## Cambiar el tamaño de las imágenes
+
+Dos de las herramientas para redimensionar imágenes más populares son el [paquete sharp npm](https://www.npmjs.com/package/sharp) y la [herramienta ImageMagick CLI](https://www.imagemagick.org/script/index.php).
+
+El paquete sharp es una buena opción para automatizar el cambio de tamaño de la imagen (por ejemplo, generar múltiples tamaños de miniaturas para todos los videos de su sitio web). Se integra rápida y fácilmente con scripts y herramientas de compilación. Por otro lado, ImageMagick resulta conveniente para un único cambio de tamaño de imagen porque se usa completamente desde la línea de comandos.
+
+### sharp
+
+Para usar sharp como un script de Node, guarde este código como una secuencia de comandos separada en su proyecto y luego ejecútelo para convertir sus imágenes:
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+Para cambiar el tamaño de una imagen al 33% de su tamaño original, ejecute el siguiente comando en su terminal:
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+Para redimensionar una imagen de manera que se ajuste a 300px de ancho por 200px de alto, ejecute el siguiente comando:
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### ¿Cuántas versiones de imagen debería crear?
+
+No existe una respuesta "correcta" a esta pregunta. Sin embargo, es común servir entre 3 y 5 tamaños diferentes. Ofrecer más tamaños de imagen es mejor para el rendimiento, pero ocupará más espacio en sus servidores y requerirá escribir un poco más de HTML.
+
+### Otras opciones
+
+También vale la pena echarle un vistazo a servicios de imágenes como [Thumbor](https://github.com/thumbor/thumbor) (código abierto) y [Cloudinary.](https://cloudinary.com/) Los servicios de imágenes proporcionan imágenes receptivas (y manipulación de imágenes) bajo pedido. Thumbor se configura instalándolo en un servidor; Cloudinary se encarga de estos detalles por usted y no requiere configuración de servidor. Ambos son formas sencillas de crear imágenes receptivas.
+
+## Servir múltiples versiones de imágenes
+
+Especifique varias versiones de imagen y el navegador elegirá la mejor opción para usar:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Antes</strong></th>
+        <th><strong>Después</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Los atributos [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src), [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) y [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) de la etiqueta `<img>` interactúan para lograr este resultado.
+
+### El atributo "src"
+
+El atributo src hace que este código funcione para navegadores que no [admiten](https://caniuse.com/#search=srcset) los atributos `srcset` y `sizes`. Si un navegador no admite estos atributos, volverá a cargar el recurso especificado por el atributo `src`.
+
+{% Aside 'gotchas' %} El recurso especificado por el atributo `src` debe ser lo suficientemente grande para funcionar bien en todos los tamaños de dispositivos. {% endAside %}
+
+### El atributo "srcset"
+
+El `srcset` es una lista separada por comas de nombres de archivos de imágenes y sus descriptores de ancho o densidad.
+
+Este ejemplo usa [descriptores de ancho](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor). `480w` es un descriptor de ancho que le dice al navegador que `flower-small.jpg` tiene 480px de ancho; `1080w` es un descriptor de ancho que le dice al navegador que `flower-large.jpg` tiene 1080px de ancho.
+
+El "descriptor de ancho" suena sofisticado, pero es solo una forma de indicarle al navegador el ancho de una imagen. Esto evita que el navegador tenga que descargar la imagen para determinar su tamaño.
+
+{% Aside 'gotchas' %} Usa la unidad `w` (en lugar de `px`) para escribir descriptores de ancho. Por ejemplo, una imagen de 1024px de ancho se escribiría como `1024w`. {% endAside %}
+
+**Crédito extra:** no necesita saber acerca de los descriptores de densidad para servir diferentes tamaños de imagen. Sin embargo, si tiene curiosidad sobre cómo funcionan los descriptores de densidad, consulte el [laboratorio de código de Cambio de resolución](/codelab-density-descriptors). Los descriptores de densidad se utilizan para mostrar diferentes imágenes según la [densidad de píxeles](https://en.wikipedia.org/wiki/Pixel_density) del dispositivo.
+
+### El atributo "sizes"
+
+El atributo sizes le dice al navegador qué tan ancha será la imagen cuando se muestre. Sin embargo, este atributo no tiene ningún efecto sobre el tamaño de la pantalla; todavía necesitas CSS para eso.
+
+El navegador utiliza esta información, junto con lo que sabe sobre el dispositivo del usuario (es decir, sus dimensiones y densidad de píxeles), para determinar qué imagen cargar.
+
+Si un navegador no reconoce el atributo "`sizes`", recurrirá a la carga de la imagen especificada por el atributo "`src`". (Los navegadores admitieron los atributos "code2}srcset" y "`sizes`" al mismo tiempo, por lo que un navegador admitirá ambos atributos o ninguno).
+
+{% Aside 'gotchas' %} El ancho de un slot se puede especificar usando una variedad de unidades. Los siguientes son todos tamaños válidos:
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+El siguiente es un tamaño inválido:
+
+- `25%` (no se pueden utilizar porcentajes con el atributo sizes) {% endAside %}
+
+**Crédito extra:** si desea algo sofisticado, también puede usar el atributo de tamaños para especificar varios tamaños de slot. Esto se adapta a los sitios web que usan diferentes diseños para diferentes tamaños de ventanas gráficas. Consulte este [ejemplo de código de múltiples slot](/codelab-specifying-multiple-slot-widths) para aprender cómo hacer esto.
+
+### (Aún más) Crédito extra
+
+Además de todo el crédito extra ya mencionado (¡las imágenes son complejas!), también puede usar estos mismos conceptos para [la dirección de arte](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). La dirección de arte es la práctica de servir imágenes de aspecto completamente diferente (en lugar de versiones diferentes de la misma imagen) a diferentes ventanas gráficas. Puede obtener más información en el [laboratorio de código de Dirección de arte](/codelab-art-direction).
+
+## Verificar
+
+Una vez que haya implementado imágenes receptivas, puede usar Lighthouse para asegurarse de que no le faltó ninguna imagen. Ejecute la auditoría de Rendimiento de Lighthouse (**Lighthouse&gt; Opciones&gt; Rendimiento**) y busque los resultados de la auditoría de **imágenes de tamaño adecuado.** Estos resultados enlistarán las imágenes que deben cambiarse de tamaño.
diff --git a/src/site/content/es/fast/signed-exchanges/index.md b/src/site/content/es/fast/signed-exchanges/index.md
new file mode 100644
index 00000000000..51923faf88e
--- /dev/null
+++ b/src/site/content/es/fast/signed-exchanges/index.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: Intercambios firmados (SXG)
+subhead: Un SXG es un mecanismo de entrega que permite autenticar el origen de un recurso independientemente de cómo haya sido entregado.
+authors:
+  - katiehempenius
+date: 2020-10-14
+updated: 2021-04-21
+hero: image/admin/6ll3P8MYWxvtb1ZjXIzb.jpg
+alt: Un montón de sobres.
+description: Un SXG es un mecanismo de entrega que permite autenticar el origen de un recurso independientemente de cómo haya sido entregado.
+tags:
+  - blog
+  - performance
+---
+
+Un signed exchange (intercambio firmado) SXG es un mecanismo de entrega que permite autenticar el origen de un recurso independientemente de cómo haya sido entregado. Este desacoplamiento avanza en una variedad de casos de uso, como la captura o búsqueda previa para preservar la privacidad, las experiencias de Internet sin conexión y el servicio desde caché de terceros. Además, la implementación de SXG puede mejorar el Largest Contentful Paint o despliegue del contenido más extenso (LCP) para algunos sitios.
+
+Este artículo proporciona una descripción general de los SXG: cómo funcionan, casos de uso y herramientas.
+
+## Compatibilidad del navegador {: #browser-compatibility}
+
+Los SXG son [compatibles](https://caniuse.com/#feat=sxg) con los navegadores basados en Chromium (a partir de las versiones: Chrome 73, Edge 79 y Opera 64).
+
+## Descripción general
+
+Los intercambios firmados (SXG) permiten a un sitio firmar criptográficamente un par de solicitud/respuesta (un "intercambio HTTP") de tal manera que el navegador pueda verificar el origen y la integridad del contenido independientemente de cómo se distribuyó. Como resultado, el navegador puede mostrar la URL del sitio de origen en la barra de direcciones, en lugar de la URL del servidor que entregó el contenido.
+
+La implicación más amplia de los SXG es que hacen que el contenido sea portátil: el contenido entregado a través de un SXG puede ser distribuido fácilmente por terceros, mientras se mantiene la plena seguridad y atribución de su origen. Históricamente, la única forma de que un sitio utilice a un tercero para distribuir su contenido mientras mantiene la atribución, ha sido que el sitio comparta sus certificados SSL con el distribuidor. Esto tiene inconvenientes de seguridad y además, está muy lejos de hacer que el contenido sea realmente portátil.
+
+A largo plazo, el contenido verdaderamente portátil se puede utilizar para lograr casos de uso como experiencias completamente fuera de línea. En el plazo inmediato, el caso de uso principal de los SXG es la entrega de experiencias de usuario más rápidas al proporcionar contenido en un formato de fácil almacenamiento en caché. Específicamente, la [Búsqueda de Google](#google-search) almacenará en caché y, a veces, buscará previamente los SXG. Para los sitios que reciben una gran parte de su tráfico de la Búsqueda de Google, los SXG pueden ser una herramienta importante para entregar cargas de página más rápidas a los usuarios.
+
+### El formato SXG
+
+Un SXG está encapsulado en un archivo con [codificación binaria](https://cbor.io/) que tiene dos componentes principales: un intercambio HTTP y una [firma](https://developer.mozilla.org/docs/Glossary/Signature/Security). El intercambio HTTP consta de una URL de solicitud, información de negociación de contenido y una respuesta HTTP.
+
+A continuación, se muestra un ejemplo de un archivo SXG decodificado:
+
+```html
+format version: 1b3
+request:
+  method: GET
+  uri: https://example.org/
+  headers:
+response:
+  status: 200
+  headers:
+    Cache-Control: max-age=604800
+    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
+    Expires: Mon, 24 Aug 2020 16:08:24 GMT
+    Content-Type: text/html; charset=UTF-8
+    Content-Encoding: mi-sha256-03
+    Date: Mon, 17 Aug 2020 16:08:24 GMT
+    Vary: Accept-Encoding
+signature:
+    label;cert-sha256=*ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=*;
+    cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
+    date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=*MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=*;
+    validity-url="https://example.org/webpkg/validity"
+header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=
+
+The exchange has a valid signature.
+payload [1256 bytes]:
+<!doctype html>
+<html>
+<head>
+    <title>SXG example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+<div>
+    <h1>Hello</h1>
+</div>
+</body>
+</html>
+```
+
+El parámetro `expires` en la firma indica la fecha de expiración de un SXG. Un SXG puede tener una validez máxima de 7 días. Si la fecha de vencimiento de un SXG es de más de 7 días en el futuro, el navegador lo rechazará. Encuentre más información sobre el encabezado de la firma en la [especificación de intercambios HTTP firmados](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-3.1).
+
+### Empaquetado web
+
+Los SXG son parte de la familia más amplia de propuestas de especificaciones de [empaquetado web.](https://github.com/WICG/webpackage) Además de los SXG, el otro componente principal de la especificación de empaquetado web son los [paquetes web](/web-bundles/) ("intercambios HTTP empaquetados"). Los paquetes web son una colección de recursos HTTP y metadatos necesarios para interpretar el paquete.
+
+La relación entre SXG y los paquetes web es un punto común de confusión. Se trata de dos tecnologías distintas que no dependen entre sí: los paquetes web se pueden utilizar con intercambios firmados y sin firmar. El objetivo común propuesto tanto por SXG como por los paquetes es la creación de un formato de "empaquetado web" que permita que los sitios se compartan en su totalidad para el consumo fuera de línea.
+
+Los SXG son la primera parte de la especificación de empaquetado web que implementarán los navegadores basados en Chromium.
+
+## Cargar SXG
+
+En un inicio, el caso de uso principal de SXG probablemente sea como mecanismo de entrega para el documento principal de una página. Para este caso de uso, se puede hacer referencia a un SXG mediante las etiquetas `<link>` o `<a>`, así como la cabecera [`Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link). Al igual que otros recursos, un SXG se puede cargar ingresando su URL en la barra de direcciones del navegador.
+
+```html
+<a href="https://example.com/article.html.sxg">
+```
+
+```html
+<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
+```
+
+Los SXG también se pueden utilizar para entregar subrecursos. Para obtener más información, consulte [Sustitución de subrecursos de intercambio firmado](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md).
+
+## Servir SXG
+
+### Negociación de contenido
+
+La [negociación de contenido](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) es un mecanismo para servir diferentes representaciones del mismo recurso en la misma URL dependiendo de las capacidades y preferencias de un cliente, por ejemplo, entregar la versión gzip de un recurso a algunos clientes, pero la versión Brotli a otros. La negociación de contenido permite ofrecer representaciones SXG y no SXG del mismo contenido, según las capacidades de un navegador.
+
+Los navegadores web utilizan el encabezado de solicitud [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept)para comunicar los [tipos MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) que admiten. Si un navegador admite SXG, el tipo MIME `application/signed-exchange` se incluirá automáticamente en esta lista de valores.
+
+Por ejemplo, este es el encabezado `Accept` enviado por Chrome 84:
+
+```json
+accept:
+text/html,
+application/xhtml+xml,
+application/xml;q=0.9,
+image/webp,image/apng,
+\*/\*;q=0.8,
+application/signed-exchange;v=b3;q=0.9
+```
+
+La parte `application/signed-exchange;v=b3;q=0.9` de esta cadena informa al servidor web que Chrome admite SXG, específicamente, la versión `b3`. La última parte `q=0.9` indica el [q-value](https://developer.mozilla.org/docs/Glossary/Quality_values).
+
+El `q-value` expresa la preferencia relativa de un navegador por un formato particular usando una escala decimal de `0` a `1`, donde `1` representa la prioridad más alta. Cuando no se proporciona un `q-value` para un formato, `1` es el valor implícito.
+
+### Mejores prácticas
+
+Los servidores deben servir SXG cuando el encabezado `Accept` indica que el `q-value` para `application/signed-exchange` es mayor o igual que el `q-value` para `text/html`. En la práctica, esto significa que un servidor de origen entregará SXG a los rastreadores, pero no a los navegadores.
+
+Los SXG pueden ofrecer un rendimiento superior cuando se utilizan con el almacenamiento en caché o la captura previa. Sin embargo, para el contenido que se carga directamente desde el servidor de origen sin el beneficio de estas optimizaciones, el formato `text/html` ofrece un mejor rendimiento que los SXG. Ofrecer contenido como SXG permite a los rastreadores y otros intermediarios almacenar en caché los SXG para una entrega más rápida a los usuarios.
+
+La siguiente expresión regular se puede utilizar para hacer coincidir el encabezado `Accept` de las solicitudes que deben servirse como SXG:
+
+```regex
+Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
+```
+
+Tenga en cuenta que la subexpresión `(,|$)` coincide con los encabezados donde el `q-value` se ha omitido para SXG; esta omisión implica un `q-value` de `1` para SXG. Aunque teóricamente un encabezado`Accept` podría contener la subcadena `q=1`, [en la práctica](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) los navegadores no enumeran explícitamente el `q-value` de un formato cuando tiene el valor predeterminado de `1`.
+
+## Depuración de SXG con Chrome DevTools {: #debugging}
+
+Los intercambios firmados se pueden identificar buscando `signed-exchange` en la columna **Tipo** del panel **Red** en Chrome DevTools.
+
+<figure>{% Img src="image/admin/cNdohSaeXqGHFBwD7L3B.png", alt="Captura de pantalla que muestra una solicitud SXG dentro del panel 'Red' en DevTools", width="696", height="201"%} <figcaption>El panel de <b>red</b> en DevTools</figcaption></figure>
+
+La pestaña **Vista previa** proporciona más información sobre el contenido de un SXG.
+
+<figure>{% Img src="image/admin/E0rBwuxk4BxFmLJ3gXhP.png", alt="Captura de pantalla de la pestaña 'Vista previa' para un SXG", width="800", height="561"%} <figcaption>La pestaña <b>Vista previa</b> en DevTools</figcaption></figure>
+
+Para ver un SXG de primera mano, visite esta [demostración](https://signed-exchange-testing.dev/) en [uno de los navegadores compatibles con SXG](#browser-compatibility)
+
+## Casos de uso
+
+Los SXG se pueden usar para entregar contenido directamente desde un servidor de origen a un usuario, pero esto frustraría en gran medida el propósito de los SXG. Más bien, el uso previsto y los beneficios de los SXG se logran principalmente cuando los SXG generados por un servidor de origen se almacenan en caché y un intermediario los envía a los usuarios.
+
+Aunque esta sección analiza principalmente el almacenamiento en caché y el servicio de SXG por parte de la Búsqueda de Google, es una técnica que se aplica a cualquier sitio que desee proporcionar a sus enlaces externos una experiencia de usuario más rápida o una mayor resistencia al acceso limitado a la red. Esto no solo incluye motores de búsqueda y plataformas de redes sociales, sino también portales de información que ofrecen contenido para consumo fuera de línea.
+
+### Búsqueda de Google
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/oMtUUAVj5hAGwBZMDwct.png", alt="Diagrama que muestra un SXG precargado que se entrega desde una caché.", width="800", height="396" %}
+
+La Búsqueda de Google utiliza SXG para proporcionar a los usuarios una experiencia de carga de página más rápida para las páginas cargadas desde los resultados de búsqueda. Los sitios que reciben un tráfico importantes de la Búsqueda de Google pueden ver mejoras de rendimiento significativas al ofrecer contenido como SXG.
+
+La Búsqueda de Google ahora rastreará, almacenará en caché y buscará previamente los SXG cuando corresponda. Google y otros motores de búsqueda a veces [buscan previamente](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ) el contenido que es probable que el usuario visite, por ejemplo, la página correspondiente al primer resultado de búsqueda. Los SXG son especialmente adecuados para la búsqueda previa, debido a sus beneficios de privacidad sobre los formatos que no son SXG.
+
+{% Aside %} Existe una cierta cantidad de información de usuario inherente a todas las solicitudes de red, independientemente de cómo o por qué se hicieron: esto incluye información como la dirección IP, la presencia o ausencia de cookies y el valor de encabezados como `Accept-Language`. Esta información se "da a conocer" al servidor de destino cuando se realiza una solicitud. Debido a que los SXG se obtienen previamente de una caché, en vez del servidor de origen, el interés de un usuario en un sitio solo se revelará al servidor de origen una vez que el usuario navegue al sitio, en lugar de en el momento de la búsqueda previa. Además, el contenido obtenido previamente a través de SXG no establece cookies ni accede a `localStorage` a menos que el usuario cargue el contenido. Así mismo, esto no revela información de usuario nueva al referente de SXG. El uso de SXG para la búsqueda previa es un ejemplo del concepto de captura previa para preservar la privacidad. {% endAside %}
+
+#### Rastreadores
+
+El encabezado [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) enviado por el rastreador de búsqueda de Google expresa una preferencia igual por `text/html` y `application/signed-exchange`. Como se describe en la [sección anterior](#best-practices), los sitios que deseen utilizar SXG deben servirlos cuando el encabezado `Accept` de una solicitud exprese una preferencia igual o mayor por SXG sobre `text/html`. En la práctica, solo los rastreadores expresarán una preferencia por los SXG sobre el `text/html`.
+
+#### Indexación
+
+Las representaciones SXG y no SXG de una página no están clasificadas ni indexadas por separado por la Búsqueda de Google. SXG es, en última instancia, un mecanismo de entrega, no cambia el contenido subyacente. Dado esto, no tendría sentido que la Búsqueda de Google indexara por separado o clasificara de diferentes maneras el mismo contenido entregado.
+
+#### Web Vitals
+
+Para los sitios que reciben una parte significativa de su tráfico de la Búsqueda de Google, los SXG se pueden utilizar para mejorar [Web Vitals](/vitals/), a saber, [LCP](/lcp/). Los SXG almacenados en caché y capturados previamente se pueden entregar a los usuarios de manera increíblemente rápida y esto produce un LCP más rápido. Aunque los SXG pueden ser una herramienta poderosa, funcionan mejor cuando se combinan con otras optimizaciones de rendimiento, como el uso de CDN y la reducción de subrecursos que bloquean el renderizado.
+
+### AMP
+
+El contenido AMP se puede entregar mediante SXG. SXG permite que el contenido AMP sea capturado previamente y mostrado usando su URL canónica, en lugar de su URL de AMP.
+
+Todos los conceptos descritos en este documento aún se aplican al caso de uso de AMP; sin embargo, AMP tiene sus propias [herramientas](https://github.com/ampproject/amppackager) independientes para generar SXG.
+
+{% Aside%} Obtenga información sobre cómo servir AMP mediante intercambios firmados en [amp.dev](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/). {% endAside %}
+
+## Herramientas
+
+La implementación de SXG consiste en generar el SXG correspondiente a una URL determinada y luego entregar ese SXG a los solicitantes (generalmente rastreadores). Para generar un SXG, necesitará un certificado que pueda firmar SXG.
+
+### Certificados
+
+El uso de producción de SXG requiere un certificado que admita la extensión `CanSignHttpExchanges`. Según las [especificaciones](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-4.2), los certificados con esta extensión deben tener un período de validez no mayor a 90 días y requieren que el dominio solicitante tenga configurado un [registro CAA de DNS.](https://en.wikipedia.org/wiki/DNS_Certification_Authority_Authorization)
+
+[Esta página](https://github.com/google/webpackager/wiki/Certificate-Authorities) enumera las autoridades de certificación que pueden emitir este tipo de certificado. Los certificados para SXG solo están disponibles a través de una autoridad certificadora comercial.
+
+### Herramientas SXG específicas de la plataforma
+
+Estas herramientas admiten pilas de tecnología específicas. Si ya está utilizando una plataforma compatible con una de estas herramientas, le resultará más fácil de configurar que una herramienta de uso general.
+
+- [`sxg-rs/cloudflare_worker`](https://github.com/google/sxg-rs/tree/main/cloudflare_worker) se ejecuta en [Cloudflare Workers](https://workers.cloudflare.com/).
+
+- [`sxg-rs/fastly_compute`](https://github.com/google/sxg-rs/tree/main/fastly_compute) se ejecuta en [Fastly Compute@Edge](https://www.fastly.com/products/edge-compute/serverless).
+
+- Los [intercambios firmados automáticos](https://blog.cloudflare.com/automatic-signed-exchanges/) son una función de Cloudflare que adquiere certificados y genera intercambios firmados automáticamente.
+
+- El [módulo NGINX SXG](https://github.com/google/nginx-sxg-module) genera y sirve SXG para sitios que usan [nginx](https://nginx.org/). Las instrucciones de configuración se pueden encontrar [aquí](/how-to-set-up-signed-http-exchanges/).
+
+- [Envoy SXG Filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/sxg_filter) genera y sirve SXG para sitios que usan [Envoy](https://www.envoyproxy.io/).
+
+### Herramientas SXG de uso general
+
+#### CLI de Web Packager
+
+La [CLI de Web Packager](https://github.com/google/webpackager) genera un SXG correspondiente a una URL determinada.
+
+```shell
+webpackager \
+    --private\_key=private.key \
+    --cert\_url=https://example.com/certificate.cbor \
+    --url=https://example.com
+```
+
+Una vez que se haya generado el archivo SXG, cárguelo en su servidor y sírvalo con el tipo MIME `application/signed-exchange;v=b3`. Además, deberá entregar el certificado SXG como `application/cert-chain+cbor`.
+
+#### Servidor de Web Packager
+
+El [servidor de Web Packager](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md), `webpkgserver`, actúa como un [proxy inverso](https://en.wikipedia.org/wiki/Reverse_proxy) para servir SXG. Dada una URL, `webpkgserver` buscará el contenido de la URL, lo empaquetará como un SXG y entregará el SXG en respuesta. Para obtener instrucciones sobre cómo configurar el servidor del empaquetador web, consulte [Cómo configurar intercambios firmados con Web Packager](/signed-exchanges-webpackager).
+
+### Bibliotecas SXG
+
+Estas bibliotecas podrían usarse para construir su propio generador SXG:
+
+- [`sxg_rs`](https://github.com/google/sxg-rs/tree/main/sxg_rs) es una biblioteca de Rust para generar SXG. Es la biblioteca SXG con más funciones y se utiliza como base para las herramientas `cloudflare_worker` y `fastly_compute`.
+
+- [`libsxg`](https://github.com/google/libsxg) es una biblioteca C mínima para generar SXG. Se utiliza como base para el módulo NGINX SXG y el filtro Envoy SXG.
+
+- [`go/signed-exchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange)  es una biblioteca Go mínima proporcionada por la especificación del paquete web como [implementación de referencia](https://en.wikipedia.org/wiki/Reference_implementation) para generar SXG. Se utiliza como base para su herramienta CLI de referencia, [`gen-signedexchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) y las herramientas de Web Packager que cuentan con más funciones.
+
+## Conclusión
+
+Los intercambios firmados son un mecanismo de entrega que permite verificar el origen y la validez de un recurso independientemente de cómo haya sido entregado el recurso. Como resultado, los SXG pueden ser distribuidos por terceros mientras se mantiene la atribución total del editor.
+
+## Lecturas relacionadas
+
+- [Borrador de especificaciones para intercambios HTTP firmados](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html)
+- [Explicaciones de empaquetado web](https://github.com/WICG/webpackage/tree/main/explainers)
+- [Empiece a utilizar intercambios firmados en la Búsqueda de Google](https://developers.google.com/search/docs/advanced/experience/signed-exchange)
+- [Cómo configurar intercambios firmados usando Web Packager](/signed-exchanges-webpackager)
+- [Demostración de intercambios firmados](https://signed-exchange-testing.dev/)
diff --git a/src/site/content/es/fast/third-party-javascript/index.md b/src/site/content/es/fast/third-party-javascript/index.md
new file mode 100644
index 00000000000..2940561cf0d
--- /dev/null
+++ b/src/site/content/es/fast/third-party-javascript/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: Rendimiento de JavaScript de terceros
+subhead: Descubra cómo JavaScript de terceros puede afectar el rendimiento y lo que puede hacer para evitar que se ralenticen sus sitios.
+authors:
+  - mihajlija
+date: 2019-08-13
+description: |2
+
+  Esta publicación describe los tipos comunes de JavaScript de terceros y los problemas de rendimiento que pueden causar. También proporciona una guía general sobre cómo optimizar los scripts de terceros.
+alt: Un diagrama de una página web con texto, un video, un mapa, un widget de chat y botones para compartir en las redes sociales.
+tags:
+  - blog
+  - performance
+---
+
+JavaScript de terceros generalmente se refiere a scripts incrustados en su sitio web que:
+
+- No los escribió usted
+- Operan desde servidores de terceros
+
+Los sitios usan estos scripts para varios propósitos, que incluyen:
+
+- Botones para compartir en redes sociales
+- Reproductor de video incrustado
+- Servicios de chat
+- Iframes publicitarios
+- Scripts de análisis y estadísticas
+- Scripts de prueba A/B para experimentos
+- Bibliotecas auxiliares (como formato de fecha, animación y bibliotecas funcionales)
+
+<figure data-size="full">{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/uLXJ72jZAlzK56ctPwXd.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}</figure>
+
+Los scripts de terceros pueden proporcionar una funcionalidad poderosa, pero esa no es toda la historia. También afectan la privacidad, la seguridad y el comportamiento de la página⁠, además pueden ser particularmente problemáticos para el rendimiento.
+
+## Rendimiento
+
+Cualquier cantidad significativa de [JavaScript puede ralentizar el rendimiento](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/). Pero debido a que JavaScript de terceros generalmente está fuera de su control, puede implicar problemas adicionales.
+
+### La red
+
+La configuración de conexiones lleva tiempo y el envío de demasiadas solicitudes a varios servidores provoca ralentizaciones. Ese tiempo es incluso más largo para las conexiones seguras, que pueden implicar búsquedas de DNS, redireccionamientos y varios recorridos de ida y vuelta al servidor final que maneja la solicitud del usuario.
+
+Los scripts de terceros a menudo se suman a la sobrecarga de la red con cosas como:
+
+- Disparar solicitudes adicionales de red
+- Extraer imágenes y videos no optimizados
+- Almacenamiento en [caché HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) insuficiente, lo que obliga a la obtención frecuente de recursos de red
+- [Compresión](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer) insuficiente de los recursos del servidor
+- Varias instancias de marcos y bibliotecas extraídas por diferentes incrustaciones de terceros
+
+### Representación
+
+La forma en que se carga JavaScript de terceros es muy importante. Si se realiza de forma sincrónica en la ruta crítica de renderizado, retrasa el análisis del resto del documento.
+
+{% Aside 'key-term' %} La **ruta crítica de renderizado** incluye todos los recursos que el navegador necesita para mostrar el contenido de la primera pantalla. {% endAside %}
+
+Si un tercero tiene problemas con el servidor y no puede entregar un recurso, la renderización se bloquea hasta que se agota el tiempo de espera de la solicitud, que puede ser de 10 a 80 segundos. Puede probar y simular este problema con las [pruebas de punto único de falla de WebPageTest](https://css-tricks.com/use-webpagetest-api/#single-point-of-failure).
+
+{% Aside %} [Las secuencias de comandos de prueba A/B](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/#ab_test_smaller_samples_of_users) también pueden retrasar el procesamiento. La mayoría de ellos bloquean la visualización del contenido hasta que completan el procesamiento, lo que puede ser cierto incluso para los scripts de prueba A/B asíncronos. {% endAside %}
+
+## Qué hacer al respecto
+
+El uso de JavaScript de terceros a menudo es inevitable, pero hay cosas que puede hacer para minimizar los efectos adversos:
+
+- Al elegir recursos de terceros, favorezca aquellos que envíen la menor cantidad de código y, al mismo tiempo, le brinden la funcionalidad que necesita.
+- Utilice [presupuestos de rendimiento](/use-lighthouse-for-performance-budgets/) para el contenido de terceros para mantener su costo bajo control.
+- No use la misma funcionalidad de dos proveedores diferentes. Probablemente no necesite dos administradores de etiquetas o dos plataformas de análisis.
+- Audite y limpie rutinariamente los scripts de terceros redundantes.
+
+Para aprender a auditar el contenido de terceros y cargarlo de manera eficiente para un mejor rendimiento y experiencia del usuario, consulte las otras publicaciones en la sección [Optimice sus recursos de terceros.](/fast/#optimize-your-third-party-resources)
diff --git a/src/site/content/es/fast/use-imagemin-to-compress-images/index.md b/src/site/content/es/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..9f8642a1f73
--- /dev/null
+++ b/src/site/content/es/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: Utilice Imagemin para comprimir imágenes
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: Las imágenes sin comprimir inflan sus páginas con bytes innecesarios. Ejecute Lighthouse para buscar oportunidades para mejorar la carga de las páginas al comprimir las imágenes.
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## ¿Por qué debería preocuparse?
+
+Las imágenes sin comprimir inflan sus páginas con bytes innecesarios. La foto de la derecha es un 40% más pequeña que la de la izquierda, pero probablemente lucirá idéntica para el usuario medio.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 KB</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 KB</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## Medición
+
+Ejecute Lighthouse en búsqueda de oportunidades para mejorar la carga de la página al comprimir las imágenes. Estas oportunidades se enumeran en "Codificar imágenes de manera eficiente":
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="imagen", width="800", height="552" %}
+
+{% Aside %} Lighthouse actualmente informa sobre las oportunidades para comprimir imágenes solo en formato JPEG. {% endAside %}
+
+## Imagemin
+
+Imagemin es una excelente opción para la compresión de imágenes porque admite una amplia variedad de formatos de imagen y se integra fácilmente con scripts de compilación y herramientas de compilación. Imagemin está disponible como una  [CLI](https://github.com/imagemin/imagemin-cli) y como [módulo npm](https://www.npmjs.com/package/imagemin). Generalmente, el módulo npm es la mejor opción porque ofrece más opciones de configuración, pero la CLI puede ser una alternativa decente si quiere probar Imagemin sin tocar ningún código.
+
+### Complementos
+
+Imagemin se basa en "complementos". Un complemento es un paquete npm que comprime un formato de imagen particular (por ejemplo, "mozjpeg" comprime archivos JPEG). Los formatos de imagen populares pueden tener varios complementos para elegir.
+
+Lo más importante a considerar al elegir un complemento es si presenta "pérdidas" o es "sin pérdidas". En la compresión sin pérdidas, no se pierden datos. La compresión con pérdidas reduce el tamaño del archivo, pero a costa de posiblemente reducir la calidad de la imagen. Si un complemento no menciona si presenta "pérdidas" o es "sin pérdidas", puede saberlo por su API: si puede especificar la calidad de imagen del resultado, entonces presenta "pérdidas".
+
+Para la mayoría de las personas, los complementos con pérdidas son la mejor opción. Ofrecen ahorros significativamente mayores y se pueden personalizar los niveles de compresión para satisfacer sus necesidades. La siguiente tabla enumera los complementos populares de Imagemin. Estos no son los únicos complementos disponibles, pero todos serían buenas opciones para su proyecto.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Formato de imagen</th>
+        <th>Complementos con pérdidas</th>
+        <th>Complementos sin pérdidas</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### CLI de Imagemin
+
+La CLI de Imagemin funciona con 5 complementos diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin utiliza el complemento apropiado según el formato de imagen de la entrada.
+
+Para comprimir las imágenes en el directorio "images/" y guardarlas en el mismo directorio, ejecute el siguiente comando (sobrescribe los archivos originales):
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Módulo npm de Imagemin
+
+Si usa una de estas herramientas de compilación, consulte los laboratorios de código para Imaginemin con [webpack](/codelab-imagemin-webpack), [gulp](/codelab-imagemin-gulp) o [grump](/codelab-imagemin-grunt).
+
+También puede utilizar Imagemin por sí mismo como un script de nodo. Este código utiliza el complemento "imagemin-mozjpeg" para comprimir archivos JPEG a una calidad de 50 ("0" es lo peor; "100" es lo mejor):
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/es/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/es/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..ba75b4a5668
--- /dev/null
+++ b/src/site/content/es/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Usa Lighthouse para los presupuestos de rendimiento
+authors:
+  - katiehempenius
+description: |2-
+
+  Lighthouse ahora admite presupuestos de rendimiento. Esta función, LightWallet, se puede instalar en menos de cinco minutos y proporciona información sobre el tamaño y la cantidad de recursos de la página.
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+[Lighthouse](https://github.com/GoogleChrome/lighthouse) ahora admite presupuestos de rendimiento. Esta función, [LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets), se puede instalar en menos de cinco minutos y proporciona información sobre el tamaño y la cantidad de recursos de la página.
+
+## Instalar Lighthouse
+
+LightWallet está disponible en la versión de línea de comandos de Lighthouse v5+.
+
+Para comenzar, instala Lighthouse:
+
+```bash
+npm install -g lighthouse
+```
+
+## Crea un presupuesto
+
+Crea un archivo llamado `budget.json`. En este archivo, agrega el JSON a continuación:
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+Este archivo de ejemplo `budget.json` establece cinco presupuestos separados:
+
+- Un presupuesto de 3000ms para Time to Interactive (TTI): Tiempo para interactuar.
+- Un presupuesto de 1000 ms para First Meaningful Paint (FMP): Primera pintura significativa.
+- Un presupuesto de 125 KB para la cantidad total de JavaScript en la página.
+- Un presupuesto de 300 KB para el tamaño total de la página.
+- Un presupuesto de 10 solicitudes por el número de consultas realizadas a orígenes de terceros.
+
+Para obtener una lista completa de las métricas de rendimiento y los tipos de recursos admitidos, consulta la sección [Presupuestos de rendimiento](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md) de la documentación de Lighthouse.
+
+## Ejecutar Lighthouse
+
+Ejecuta Lighthouse con la bandera de `--budget-path`. Esta bandera le dice a Lighthouse la ubicación de tu archivo de presupuesto.
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %} **Nota**: No es necesario que un archivo de presupuesto se llame `budget.json`. {% endAside %}
+
+## Ver los resultados
+
+Si LightWallet se ha configurado correctamente, el informe Lighthouse contendrá una sección de **Presupuestos** dentro de la categoría de **Rendimiento**.
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="Sección de 'Presupuestos' del informe Lighthouse", width="800", height="289" %}
+
+En la versión JSON del informe Lighthouse, los resultados de Lightwallet se pueden encontrar dentro de los hallazgos de la auditoría para la auditoría de `performance-budget`.
diff --git a/src/site/content/es/fast/why-speed-matters/index.md b/src/site/content/es/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..733e07f32f5
--- /dev/null
+++ b/src/site/content/es/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: "¿Por qué es importante la velocidad?"
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: Cuando se trata de la experiencia del usuario, la velocidad importa, y los retrasos provocados por la velocidad móvil no solo son frustrantes, también puede tener un impacto negativo en los resultados comerciales.
+web_lighthouse: N/A
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+Los consumidores confían cada vez más en los dispositivos móviles para acceder a contenido y servicios digitales, y si observa la analítica de su sitio, probablemente verá esta historia en sus propios datos. Los consumidores también son más exigentes que nunca, y cuando evalúan la experiencia en su sitio, no solo lo comparan con sus competidores, sino que lo evalúan en comparación con los mejores servicios de su clase que utilizan todos los días.
+
+Este artículo resume algunas de las investigaciones que se han realizado sobre la relación entre el rendimiento y el éxito empresarial.
+
+## El rendimiento se trata de retener a los usuarios
+
+<figure data-float="right">
+  <blockquote>
+    <p>El rendimiento ha tenido un impacto directo en los resultados de la empresa.</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">Pinterest</a></p>
+    </cite>
+  </blockquote></figure>
+
+El rendimiento juega un papel importante en el éxito de cualquier empresa en línea. Los sitios de alto rendimiento atraen y retienen a los usuarios mejor que los de bajo rendimiento.
+
+Pinterest redujo los tiempos de espera percibidos en un 40% y esto [aumentó el tráfico de motores de búsqueda y los registros en un 15%](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7).
+
+COOK redujo el tiempo promedio de carga de la página en 850 milisegundos, lo que [aumentó las conversiones en un 7%, disminuyó las tasas de rebote en un 7% y aumentó las páginas por sesión en un 10%](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf).
+
+Los estudios también han demostrado el impacto negativo que puede tener un desempeño deficiente en los objetivos comerciales. Por ejemplo, [la BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale) descubrió que perdían un 10% adicional de usuarios por cada segundo adicional que tardaba en cargar su sitio.
+
+## El rendimiento se trata de mejorar las conversiones
+
+Retener a los usuarios es fundamental para mejorar las conversiones. Los sitios lentos tienen un impacto negativo en los ingresos y se muestra que los sitios rápidos aumentan sus tasas de conversión.
+
+Para [Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html) , cada disminución de 100ms en la velocidad de carga de la página de inicio resultó en un aumento del 1,11% en la conversión basada en sesiones, lo que arrojó un aumento de ingresos anual promedio de casi $380 000. Además, una disminución de 100ms en la velocidad de carga de la página de pago ascendió a un aumento del 1,55% en la conversión basada en sesiones, lo que a su vez produjo un aumento de ingresos anual promedio de casi $530 000.
+
+Cuando [AutoAnything redujo el tiempo de carga de la página a la mitad](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/), vieron un aumento del 12% al 13% en las ventas.
+
+La distribuidora minorista [Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/) auditó la velocidad de su sitio y desarrolló un plan para abordar los problemas que encontraron, lo que resultó en una reducción del 20% en el tiempo de carga de la página y un aumento del 10% en la tasa de conversión.
+
+## El rendimiento se trata de la experiencia del usuario
+
+Cuando se trata de la experiencia del usuario, la velocidad importa. Un [estudio de consumidores](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report) muestra que la respuesta de estrés a los retrasos en la velocidad de los dispositivos móviles, es similar a la de ver una película de terror o resolver un problema matemático, y mayor que esperar en una fila para pagar en una tienda minorista.
+
+A medida que un sitio comienza a cargarse, hay un período de tiempo en el que los usuarios esperan a que aparezca el contenido. Hasta que esto suceda, no hay experiencia de usuario de la que hablar. Esta falta de experiencia es fugaz en conexiones rápidas. Sin embargo, en conexiones más lentas, los usuarios se ven obligados a esperar. Los usuarios pueden experimentar más problemas a medida que los recursos de la página ingresan lentamente.
+
+<figure>{% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="Una comparación de dos carretes de tira de película de una página que se carga. La primera muestra una página que se carga en una conexión lenta, mientras que la segunda muestra la misma página que se carga en una conexión rápida.", width="800", height="264" %}<figcaption> Una comparación de la carga de la página en una conexión muy lenta (arriba) versus una conexión más rápida (abajo).</figcaption></figure>
+
+El rendimiento es un aspecto fundamental de las buenas experiencias de usuario. Cuando los sitios envían mucho código, los navegadores deben usar megabytes del plan de datos del usuario para descargar el código. Los dispositivos móviles tienen memoria y potencia de CPU limitadas, a menudo se sienten abrumados con lo que podríamos considerar una pequeña cantidad de código no optimizado. Esto crea un rendimiento deficiente que conduce a la falta de respuesta. Sabiendo lo que sabemos sobre el comportamiento humano, los usuarios solo tolerarán aplicaciones de bajo rendimiento durante un tiempo antes de abandonarlas.
+
+## El rendimiento se trata de personas
+
+Los sitios y aplicaciones con un rendimiento deficiente también pueden representar costos reales para las personas que los utilizan.
+
+[Dado que los usuarios móviles continúan constituyendo una parte mayor de los usuarios de Internet en todo el mundo](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet), es importante tener en cuenta que muchos de estos usuarios acceden a la web a través de redes móviles LTE, 4G, 3G e incluso 2G. Como señala Ben Schwarz de Caliber en [este estudio sobre el rendimiento en el mundo real](https://calibreapp.com/blog/beyond-the-bubble), el costo de los planes de datos prepago está disminuyendo, lo que a su vez hace que el acceso a Internet sea más asequible en lugares donde antes no lo era. Los dispositivos móviles y el acceso a Internet ya no son lujos, son herramientas comunes necesarias para navegar y funcionar en un mundo cada vez más interconectado.
+
+[El tamaño total de la página ha aumentado constantemente desde al menos 2011](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal), y la tendencia parece continuar. A medida que la página típica envía más datos, los usuarios deben reabastecer sus planes de datos medidos con más frecuencia, lo que les cuesta dinero.
+
+Además de ahorrar dinero a sus usuarios, las experiencias de usuario rápidas y ligeras también pueden resultar cruciales para los usuarios en crisis. Los recursos públicos como hospitales, clínicas y centros de crisis tienen recursos en línea que brindan a los usuarios información importante y específica que necesitan durante una crisis. [Si bien el diseño es fundamental para presentar información importante de manera eficiente en momentos estresantes](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis), la importancia de entregar esta información rápidamente no puede subestimarse. Es parte de nuestro trabajo.
+
+## Empiece a mejorar la velocidad de su sitio web {: #get-started }
+
+Lea sobre [Core Web Vitals](/vitals/#core-web-vitals) para conocer las métricas en las que Google cree que todos los sitios web deberían centrarse.
+
+<blockquote>
+  <p>Hoy, nos basamos en este trabajo y proporcionamos una mirada anticipada a un próximo cambio de clasificación de búsqueda que incorpora estas métricas de experiencia de la página. Presentaremos una nueva señal que combina Core Web Vitals con nuestras señales existentes para la experiencia de la página para proporcionar una imagen holística de la calidad de la experiencia de un usuario en una página web.</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">Evaluación de la experiencia de la página para mejorar la web</a>, Blog oficial del Centro para webmasters de Google</cite>
+</blockquote>
+
+Luego, consulte [Tiempos de carga rápidos](/fast/) para obtener muchos consejos y trucos relacionados con cómo ser y mantenerse rápido.
diff --git a/src/site/content/es/feed.njk b/src/site/content/es/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/es/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/es/identity/change-password-url/index.md b/src/site/content/es/identity/change-password-url/index.md
new file mode 100644
index 00000000000..5deb2fa98fa
--- /dev/null
+++ b/src/site/content/es/identity/change-password-url/index.md
@@ -0,0 +1,133 @@
+---
+layout: post
+title: Ayude a los usuarios a cambiar las contraseñas fácilmente agregando una URL conocida para cambiar las contraseñas
+subhead: Redirigir una solicitud a "/.well-known/change-password" a la URL de cambio de contraseñas
+authors:
+  - agektmr
+date: 2020-09-01
+updated: 2020-09-24
+hero: image/admin/IOO23TBT2cCBNmsm9HKf.jpg
+alt: Luces de neón con forma de varios símbolos que se utilizan comúnmente en las contraseñas.
+description: |2
+
+  Al redirigir las solicitudes a /.well-known/change-password a la URL de cambio de contraseña, puede permitir que los usuarios actualicen sus contraseñas más fácilmente que antes.
+tags:
+  - identity
+  - security
+feedback:
+  - api
+---
+
+Establezca una redirección desde `/.well-known/change-password` a la página de cambio de contraseña de su sitio web. Esto permitirá a los administradores de contraseñas conducir a sus usuarios directamente a esa página.
+
+## Introducción
+
+Como sabrá, las [contraseñas no son la mejor manera de administrar cuentas](https://security.googleblog.com/2017/11/new-research-understanding-root-cause.html). Por suerte, existen tecnologías emergentes como [WebAuthn](https://webauthn.io/) y técnicas como las contraseñas de un solo uso que nos están ayudando a acercarnos a un mundo sin contraseñas. Sin embargo, estas tecnologías aún se están desarrollando y las cosas no cambiarán rápidamente. Muchos desarrolladores todavía necesitarán lidiar con contraseñas durante unos cuantos años. Mientras esperamos que las tecnologías y técnicas emergentes se transformen en algo común, al menos podemos hacer que las contraseñas sean más fáciles de usar.
+
+Una buena forma de hacerlo es brindar un mejor soporte a los administradores de contraseñas.
+
+### Cómo los administradores de contraseñas nos ayudan
+
+Los administradores de contraseñas pueden integrarse en los navegadores o proporcionarse como aplicaciones de terceros. Pueden ayudar a los usuarios de varias formas, ya que consiguen:
+
+**Autocompletar la contraseña para el campo de entrada correcto**: algunos navegadores pueden encontrar la entrada correcta de forma heurística incluso si el sitio web no está optimizado para este propósito. Los desarrolladores web pueden ayudar a los administradores de contraseñas [anotando correctamente las etiquetas de entrada HTML](/sign-in-form-best-practices/#new-password).
+
+**Evitar el phishing**: debido a que los administradores de contraseñas recuerdan dónde se registró la contraseña, la contraseña se puede completar automáticamente solo en las URL adecuadas y no en los sitios web de phishing.
+
+**Generar contraseñas sólidas y únicas**: debido a que el administrador de contraseñas genera y almacena directamente contraseñas sólidas y únicas, los usuarios no tienen que recordar ni un solo carácter de la contraseña.
+
+La generación y el autocompletado de contraseñas con un administrador de contraseñas ya se han tornado un gran aliado de la web, pero considerando su ciclo de vida, actualizar las contraseñas siempre que sea necesario es tan importante como generar y autocompletar. Para aprovechar eso de la mejor forma, los administradores de contraseñas están agregando una nueva función:
+
+**Detectar contraseñas vulnerables y sugerir su actualización**: los administradores de contraseñas pueden detectar contraseñas que se reutilizan, analizar la entropía y la debilidad de las mismas e incluso detectar contraseñas potencialmente filtradas o que se sabe que no son seguras de fuentes como [Have I Been Pwned](https://haveibeenpwned.com/).
+
+Un administrador de contraseñas puede advertir a los usuarios sobre contraseñas problemáticas, pero hay mucha fricción al pedir a los usuarios que naveguen desde la página de inicio a una página de cambio de contraseña, además de pasar por el proceso real de cambio de contraseña (que varía de un sitio a otro). Sería mucho más fácil si los administradores de contraseñas pudieran llevar al usuario directamente a la URL de cambio de contraseña. Aquí es donde [una URL reconocida para cambiar contraseñas se](https://w3c.github.io/webappsec-change-password-url/) torna útil.
+
+Al reservar una ruta URL conocida que redirige al usuario a la página de cambio de contraseña, el sitio web puede redirigir fácilmente a los usuarios al lugar correcto para cambiar sus contraseñas.
+
+## Configurar "una URL conocida para cambiar contraseñas"
+
+`.well-known/change-password` se propone como [una URL conocida para cambiar contraseñas](https://wicg.github.io/change-password-url/). Todo lo que tiene que hacer es configurar su servidor para redirigir las solicitudes de `.well-known/change-password` a la URL de cambio de contraseña de su sitio web.
+
+Por ejemplo, supongamos que su sitio web es `https://example.com` y la URL de cambio de contraseña es `https://example.com/settings/password`. Solo necesitará configurar su servidor para redirigir una solicitud de `https://example.com/.well-known/change-password` a `https://example.com/settings/password`. Nada más. Para la redirección, [use el código de estado HTTP](https://wicg.github.io/change-password-url/#semantics) [`302 Found`](https://developer.mozilla.org/docs/Web/HTTP/Status/302), [`303 See Other`](https://developer.mozilla.org/docs/Web/HTTP/Status/303) o [`307 Temporary Redirect`](https://developer.mozilla.org/docs/Web/HTTP/Status/307).
+
+Alternativamente, puede servir HTML en su `.well-known/change-password` con una etiqueta `<meta>` [`http-equiv="refresh"`](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-http-equiv).
+
+```html
+<meta http-equiv="refresh" content="0;url=https://example.com/settings/password">
+```
+
+### Vuelva a visitar el HTML de la página de cambio de contraseña
+
+El objetivo de esta función es ayudar a que el ciclo de vida de la contraseña del usuario sea más fluido. Puede hacer dos cosas para que el usuario pueda actualizar su contraseña sin problemas:
+
+- Si su formulario de cambio de contraseña necesita la contraseña actual, agregue `autocomplete="current-password"` a la `<input>` para ayudar al administrador de contraseñas a completarla automáticamente.
+- Para el campo de la nueva contraseña (en muchos casos son dos campos para asegurar que el usuario haya ingresado la nueva contraseña correctamente), agregue `autocomplete="new-password"` a la `<input>` para ayudar al administrador de contraseñas a sugerir una contraseña generada.
+
+Obtenga más información en [Prácticas recomendadas para el formulario de inicio de sesión](/sign-in-form-best-practices/#new-password).
+
+## Cómo se usa en el mundo real
+
+### Ejemplos
+
+Gracias a la [implementación de](https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes) Apple Safari, `/.well-known/change-password`, ya está disponible en algunos sitios web importantes hace algún tiempo:
+
+- [Google](https://accounts.google.com/.well-known/change-password)
+- [GitHub](https://github.com/.well-known/change-password)
+- [Facebook](https://www.facebook.com/.well-known/change-password)
+- [Gorjeo](http://twitter.com/.well-known/change-password)
+- [WordPress](https://wordpress.com/.well-known/change-password)
+
+¡Pruébelos usted mismo y haga lo mismo con su sitio!
+
+### Compatibilidad del navegador
+
+[Safari admite una URL reconocida para cambiar contraseñas desde 2019](https://webkit.org/blog/9170/safari-technology-preview-84-with-safari-13-features-is-now-available/). El administrador de contraseñas de Chrome comenzó a admitir esta función a partir de la versión 86 (lanzada en octubre de 2020) y pueden seguir otros navegadores basados en Chromium. [Firefox considera que vale la pena implementarlo](https://mozilla.github.io/standards-positions/#change-password-url), pero no ha indicado que planee hacerlo hasta agosto de 2020.
+
+### Comportamiento del administrador de contraseñas de Chrome
+
+Echemos un vistazo a cómo el administrador de contraseñas de Chrome trata las contraseñas vulnerables.
+
+El administrador de contraseñas de Chrome puede buscar contraseñas filtradas. Al navegar a `about://settings/passwords` usuarios pueden ejecutar **Comprobar contraseñas** para las contraseñas almacenadas y ver una lista de contraseñas que se recomienda actualizar.
+
+<figure></figure>
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2qTEnaWJhxDcvX6hfgrY.png", alt="", width="1478", height="845" %}
+
+  <figcaption>Función de <b>comprobación de contraseñas</b> de Chrome</figcaption>
+
+
+
+Al hacer clic en el botón <b>Cambiar contraseña</b> junto a una contraseña que se recomienda actualizar, el navegador:
+
+- Abrirá la página de cambio de contraseña del sitio web si `/.well-known/change-password` está configurado correctamente.
+- Abrirá la página de inicio del sitio web si `/.well-known/change-password` no está configurado y Google desconoce la alternativa.
+
+{% Details %}
+
+{% DetailsSummary %} ¿Qué pasa si el servidor devuelve `200 OK` incluso si `/.well-known/change-password` no existe? {% endDetailsSummary %}
+
+Los administradores de contraseñas intentan determinar si un sitio web admite una URL reconocida para cambiar contraseñas enviando una solicitud a `/.well-known/change-password` antes de redirigir a un usuario a esta URL. Si la solicitud devuelve `404 Not Found`, es obvio que la URL no está disponible, pero una `200 OK` no significa necesariamente que la URL esté disponible, porque hay algunos casos extremos:
+
+- Un sitio web de representación del lado del servidor muestra "Not found" cuando no hay contenido pero con `200 OK`.
+- Un sitio web de procesamiento del lado del servidor responde con `200 OK` cuando no hay contenido después de redirigir a la página "Not found".
+- Una aplicación de una sola página responde con el shell con `200 OK` y muestra la página "Not found" en el lado del cliente cuando no hay contenido.
+
+Para estos casos extremos, los usuarios serán reenviados a una página "Not found" y eso resultará en una fuente de confusión.
+
+Es por eso que hay [un mecanismo estándar propuesto](https://wicg.github.io/change-password-url/response-code-reliability.html) para determinar si el servidor está configurado para responder con `404 Not Found` cuando realmente no hay contenido, solicitando una página aleatoria. En realidad, la URL también está reservada: `/.well-known/resource-that-should-not-exist-whose-status-code-should-not-be-200` . Chrome, por ejemplo, utiliza esta ruta de URL para determinar si puede esperar una URL de cambio de contraseña adecuada de `/.well-known/change-password` por adelantado.
+
+Cuando esté implementando `/.well-known/change-password`, asegúrese de que su servidor devuelva `404 Not Found` para cualquier contenido no existente.
+
+{% endDetails %}
+
+## Feedback
+
+Si tiene algún comentario sobre la especificación, envíe un problema al [repositorio de especificaciones](https://github.com/wicg/change-password-url/issues).
+
+## Recursos
+
+- [Una URL reconocida para cambiar contraseñas](https://wicg.github.io/change-password-url/)
+- [Detectando la confiabilidad de los códigos de estado HTTP](https://wicg.github.io/change-password-url/response-code-reliability.html)
+- [Prácticas recomendadas para el formulario de inicio de sesión](/sign-in-form-best-practices/)
+
+Foto de [Matthew Brodeur](https://unsplash.com/photos/zEFyM4sulJ8) en [Unsplash](https://unsplash.com)
diff --git a/src/site/content/es/identity/index.md b/src/site/content/es/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/es/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/es/identity/sign-in-form-best-practices/index.md b/src/site/content/es/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..2efc5dec2bb
--- /dev/null
+++ b/src/site/content/es/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: Mejores prácticas para el formulario de inicio de sesión
+subhead: Utilice funciones de navegador multiplataforma para crear formularios de inicio de sesión que sean seguros, accesibles y fáciles de usar.
+authors:
+  - samdutton
+scheduled: cierto
+date: 2020-06-29
+updated: 2021-09-27
+description: Utilice funciones de navegador multiplataforma para crear formularios de inicio de sesión que sean seguros, accesibles y fáciles de usar.
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: Una persona sosteniendo un teléfono.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+Si los usuarios alguna vez necesitan iniciar sesión en su sitio, entonces un buen diseño del formulario de inicio de sesión es fundamental. Esto es especialmente cierto para las personas con conexiones deficientes, en el móvil, con prisa o bajo estrés. Los formularios de inicio de sesión mal diseñados obtienen altas tasas de rebote. Cada rebote podría significar un usuario perdido y descontento, no solo una oportunidad de inicio de sesión perdida.
+
+{% Aside 'codelab' %} Si prefiere aprender estas prácticas recomendadas con un tutorial práctico, consulte el [Laboratorio de códigos de prácticas recomendadas del formulario de inicio de sesión](/codelab-sign-in-form-best-practices/). {% endAside %}
+
+El siguiente es un ejemplo de un formulario de inicio de sesión simple que muestra todas las prácticas recomendadas:
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+## Lista de verificación
+
+- [Utilice elementos HTML significativos](#meaningful-html): `<form>`, `<input>`, `<label>` y `<button>`.
+- [Etiquete cada entrada con una `<label>`](#label).
+- Utilice los atributos de los elementos para [acceder a las funciones integradas del navegador](#element-attributes): `type`, `name`, `autocomplete`, `required`.
+- Otórgueles a los atributos de entrada `name` e `id` valores que no cambien entre cargas de página o implementaciones de sitios web.
+- Coloque el inicio de sesión [en su propio elemento &lt;form&gt;](#form).
+- [Asegure el envío exitoso del formulario](#submission).
+- Utilice [`autocomplete="new-password"`](#new-password) e [`id="new-password"`](#new-password) para ingresar la contraseña en un formulario de registro y para la nueva contraseña en un formulario de restablecimiento de contraseña.
+- Utilice [`autocomplete="current-password"`](#current-password) e [`id="current-password"`](#current-password) para ingresar la contraseña de inicio de sesión.
+- Proporcione la función [Mostrar contraseña.](#show-password)
+- [Utilice `aria-label` y `aria-describedby`](#accessible-password-inputs) para las entradas de contraseñas.
+- [No duplique las entradas](#no-double-inputs).
+- Diseñe los formularios de manera que el [teclado móvil no oculte las entradas o botones](#keyboard-obstruction).
+- Compruebe que los formularios se puedan usar en dispositivos móviles: use [texto legible](#size-text-correctly) y verifique que las entradas y los botones sean lo [suficientemente grandes para funcionar como objetivos táctiles](#tap-targets).
+- [Mantenga la marca y el estilo](#general-guidelines) en sus páginas de registro e inicio de sesión.
+- [Haga pruebas tanto en el campo como en el laboratorio](#analytics): en su flujo de registro y de inicio de sesión cree análisis de página, análisis de interacción y mediciones de rendimiento centradas en el usuario.
+- [Haga pruebas en navegadores y dispositivos](#devices): el comportamiento del formulario varía significativamente entre plataformas.
+
+{% Aside %} Este artículo trata sobre las prácticas recomendadas de frontend. No explica cómo crear servicios de backend para autenticar a los usuarios, almacenar sus credenciales o administrar sus cuentas. Las [12 mejores prácticas para la administración de cuentas de usuario, autorizaciones y contraseñas](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) describen los principios básicos para ejecutar su propio backend. Si tiene usuarios en diferentes partes del mundo, debe considerar la posibilidad de localizar el uso que hace su sitio de los servicios de identidad de terceros, así como también su contenido.
+
+También hay dos API relativamente nuevas que no se tratan en este artículo, que pueden ayudarlo a crear una mejor experiencia de inicio de sesión:
+
+- [**WebOTP:**](/web-otp/) para enviar códigos de acceso de un solo uso o números PIN a través de SMS a teléfonos móviles. Esto puede permitirles a los usuarios seleccionar un número de teléfono como identificador (¡no es necesario ingresar una dirección de correo electrónico!). Además, también habilita la verificación en dos pasos para el inicio de sesión y los códigos de un solo uso para la confirmación del pago.
+- [**Gestión de credenciales**](https://developer.chrome.com/blog/credential-management-api/): para permitir que los desarrolladores almacenen y recuperen las credenciales de contraseña y credenciales federadas mediante programación. {% endAside %}
+
+## Utilice HTML significativo {: #meaningful-html }
+
+Utilice elementos creados para el trabajo: `<form>`, `<label>` y `<button>`. Estos habilitan la funcionalidad incorporada del navegador, mejoran la accesibilidad y agregan significado a su marcado.
+
+### Utilice `<form>` {: #form }
+
+Es posible que tenga la tentación de agrupar las entradas en un `<div>` y manejar el envío de datos de entrada únicamente con JavaScript. Por lo general, es mejor usar un elemento plano [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) a la antigua. Esto hace que su sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia, habilita una variedad de funciones integradas del navegador, simplifica la creación de un inicio de sesión funcional básico para navegadores más antiguos y aún puede funcionar incluso si JavaScript falla.
+
+{% Aside 'gotchas' %} Un error común es agrupar una página web completa en un solo formulario, pero esto puede causar problemas a los administradores de contraseñas del navegador y a la función autocompletar. Utilice un elemento &lt;form&gt; diferente para cada componente de la interfaz de usuario que necesite un formulario. Por ejemplo, si tiene un inicio de sesión y un espacio de búsqueda en la misma página, debe usar dos elementos de formulario. {% endAside %}
+
+### Utilice `<label>` {: #label }
+
+Para etiquetar una entrada, use un elemento [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+
+```html
+<label for="email">Correo electrónico</label>
+<input id="email" …>
+```
+
+Dos razones:
+
+- Un toque o clic en una etiqueta mueve el foco hacia su entrada. Asocie una etiqueta con una entrada mediante el atributo `for` de la etiqueta con el atributo `name` o `id` de la entrada.
+- Los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o la entrada de la etiqueta se enfocan.
+
+No utilice los marcadores de posición como etiquetas de entrada. Es probable que las personas olviden cuál fue la entrada una vez que hayan comenzado a ingresar texto, especialmente si se distraen ("¿Estaba ingresando una dirección de correo electrónico, un número de teléfono o una identificación de cuenta?"). Hay muchos otros problemas potenciales con los marcadores de posición: consulte [No utilice el atributo de  marcador de posición](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) y [Los marcadores de posición en los campos de formulario son perjudiciales](https://www.nngroup.com/articles/form-design-placeholders/) si no está convencido.
+
+Probablemente sea mejor poner sus etiquetas encima de sus entradas. Esto permite un diseño coherente en dispositivos móviles y de escritorio, además, de acuerdo con la [Investigación de Google sobre la IA](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html), permite que los usuarios hagan un escaneo más rápido. Usted obtiene etiquetas y entradas de ancho completo, y no necesita ajustar la etiqueta y el ancho de la entrada para que se ajusten al texto de la etiqueta.
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="Captura de pantalla que muestra la posición de la etiqueta de entrada del formulario en el dispositivo móvil: junto a la entrada y arriba de la entrada", width="500", height="253" %} <figcaption>La etiqueta y el ancho de entrada están limitados cuando ambos están en la misma línea.</figcaption></figure>
+
+Abra el Glitch [posición-de-etiqueta](https://label-position.glitch.me) en un dispositivo móvil para verlo usted mismo.
+
+### Utilice `<button>` {: #button }
+
+Utilice el atributo [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) para los botones. Los elementos de botón proporcionan un comportamiento accesible y una funcionalidad de envío de formularios incorporada, además se pueden diseñar fácilmente. No tiene sentido usar un `<div>` o algún otro elemento que pretenda ser un botón.
+
+Compruebe que el botón de envío indique lo que hace. Los ejemplos incluyen **Crear una cuenta** o **Iniciar sesión**, pero no **Enviar** o **Iniciar**.
+
+### Asegure el envío correcto del formulario {: #submission }
+
+Ayude a que los administradores de contraseñas a comprendan que se ha enviado un formulario. Hay dos maneras de hacerlo:
+
+- Navegar a una página diferente.
+- Emular la navegación con `History.pushState()` o `History.replaceState()` y eliminar el formulario de contraseña.
+
+Con una solicitud `XMLHttpRequest` o `fetch`, verifique que el inicio de sesión se informe correctamente en la respuesta, que se maneje al sacar el formulario del DOM y que se le señale el éxito al usuario.
+
+Considere deshabilitar el botón **Iniciar sesión** una vez que el usuario lo haya tocado o haya hecho clic en él. [Muchos usuarios hacen clic en los botones varias veces](https://baymard.com/blog/users-double-click-online) incluso en sitios que son rápidos y receptivos. Eso ralentiza las interacciones y aumenta la carga del servidor.
+
+Por lo contrario, no desactive el envío de formularios a la espera de la entrada del usuario. Por ejemplo, no deshabilite el botón **Iniciar sesión** si los usuarios no han ingresado su PIN de cliente. Los usuarios pueden pasar por alto algo en el formulario, luego intentarán tocar repetidamente el botón **Iniciar sesión** (deshabilitado) y podrían pensar que no está funcionando. Como mínimo, si debe deshabilitar el envío de formularios, explíquele al usuario lo que falta cuando haga clic en el botón deshabilitado.
+
+{% Aside 'caution' %} El tipo predeterminado para un botón en un formulario es `submit`. Si desea agregar otro botón en un formulario (para **Mostrar la contraseña**, por ejemplo) agregue `type="button"`. De lo contrario, al hacer clic o tocar el botón, se enviará el formulario.
+
+Al presionar la tecla `Enter` mientras cualquier campo del formulario tiene el foco, se simula un clic en el primer botón `submit` del formulario. Si incluye un botón en su formulario antes del botón **Enviar** y no especifica el tipo, ese botón tendrá el tipo predeterminado para los botones en un formulario (`submit`) y recibirá el evento de clic antes de enviar el formulario. Para ver un ejemplo de esto, consulte nuestra [demostración](https://enter-button.glitch.me/): complete el formulario, luego presione `Enter`. {% endAside %}
+
+### No duplique las entradas {: #no-double-inputs }
+
+Algunos sitios obligan a que los usuarios ingresen dos veces los correos electrónicos o contraseñas. Eso podría reducir los errores para algunos usuarios, pero genera un trabajo adicional para *todos* los usuarios y [aumenta las tasas de abandono](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/). Preguntar dos veces tampoco tiene sentido cuando los navegadores completan automáticamente las direcciones de correo electrónico o sugieren contraseñas seguras. Es mejor permitir que los usuarios confirmen su dirección de correo electrónico (deberán hacerlo de todos modos) y facilitarles el restablecimiento de su contraseña si es necesario.
+
+## Aproveche al máximo los atributos de los elementos {: #element-attributes }
+
+¡Aquí es donde realmente ocurre la magia! Los navegadores tienen varias funciones útiles integradas que usan los atributos de los elementos de entrada.
+
+## Mantenga las contraseñas privadas, pero permita que los usuarios las vean si quieren {: #show-password }
+
+Las entradas de contraseñas deben tener el atributo `type="password"` para ocultar el texto de la contraseña y ayudar a que el navegador comprenda que la entrada es para contraseñas. (Tenga en cuenta que los navegadores utilizan [una variedad de técnicas](#autofill) para comprender los roles de entrada y decidir si ofrecer o no la posibilidad de guardar las contraseñas).
+
+Debe agregar un ícono o botón **Mostrar la contraseña** para permitir que los usuarios verifiquen el texto que han ingresado, además no olvide agregar un enlace **¿Olvidó la contraseña?** Consulte [Habilitar la visualización de contraseñas](#password-display).
+
+<figure>{% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="Formulario de inicio de sesión de Google que muestra el ícono Mostrar la contraseña", width="300", height="107" %} <figcaption>Entrada de contraseña desde el formulario de inicio de sesión de Google: con el ícono <strong>Mostrar contraseña</strong> y el enlace <strong>Olvidé la contraseña</strong>.</figcaption></figure>
+
+## Ofrezca el teclado adecuado a los usuarios de dispositivos móviles {: #mobile-keyboards }
+
+Utilice `<input type="email">` para brindarles a los usuarios de dispositivos móviles un teclado adecuado y habilitar la validación básica de direcciones de correo electrónico incorporada mediante el navegador… ¡No se requiere JavaScript!
+
+Si necesita utilizar un número de teléfono en lugar de una dirección de correo electrónico, `<input type="tel">` habilita un teclado telefónico en el móvil. También puede utilizar el atributo `inputmode` cuando sea necesario: `inputmode="numeric"` es ideal para números PIN. Puede encontrar más detalles en [Todo lo que siempre quiso saber sobre el modo de entrada](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/).
+
+{% Aside 'caution' %} EL atributo `type="number"` agrega una flecha hacia arriba/hacia abajo para incrementar los números. Por lo tanto, no lo use para números que no deben incrementarse, como números de ID y de cuenta. {% endAside %}
+
+### Evite que el teclado móvil obstruya el botón **Iniciar sesión** {: #keyboard-obstruction }
+
+Desafortunadamente, si no tiene cuidado, los teclados móviles pueden cubrir su formulario o, peor aún, obstruir parcialmente el botón **Iniciar sesión**. Los usuarios pueden darse por vencidos antes de darse cuenta de lo que ha sucedido.
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Dos capturas de pantalla de un formulario de inicio de sesión en un teléfono Android: una que muestra cómo el botón Enviar queda oculto por el teclado del teléfono.", width="400", height="360", class="w-captura de pantalla" %} <figcaption>El botón <b>Iniciar sesión</b>: ahora lo ve, ahora no.</figcaption></figure>
+
+Siempre que sea posible, evite esto al mostrar solo las entradas de correo electrónico, teléfono y contraseña, además del botón **Iniciar sesión** en la parte superior de la página de inicio de sesión. Ponga otro contenido debajo.
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Captura de pantalla de un formulario de inicio de sesión en un teléfono Android: el botón Iniciar sesión no está oculto por el teclado del teléfono.", width="200", height="342" %} <figcaption>El teclado no obstruye el botón <b>Iniciar sesión</b>.</figcaption></figure>
+
+#### Pruebas en una variedad de dispositivos {: #devices }
+
+Deberá realizar pruebas en una variedad de dispositivos para su público objetivo y realizar los ajustes necesarios. BrowserStack permite [realizar pruebas gratuitas para proyectos de código abierto](https://www.browserstack.com/open-source) en una variedad de navegadores y dispositivos reales.
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="Capturas de pantalla de un formulario de inicio de sesión en iPhone 7, 8 y 11. En iPhone 7 y 8, el botón Iniciar sesión queda oculto por el teclado del teléfono, pero no en iPhone 11", width="800 ", height=" 522" %} <figcaption> El botón <b>Iniciar sesión</b>: oculto en el iPhone 7 y 8, pero no en el iPhone 11.</figcaption></figure>
+
+#### Considere usar dos páginas {: #two-pages }
+
+Algunos sitios (incluidos Amazon y eBay) evitan el problema al solicitar el correo electrónico, el teléfono y la contraseña en dos páginas. Este enfoque también simplifica la experiencia: el usuario solo tiene la tarea de una cosa a la vez.
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Captura de pantalla de un formulario de inicio de sesión en el sitio web de Amazon: correo electrónico, teléfono y contraseña en dos 'páginas' separadas.", width="400", height="385" %} <figcaption>Inicio de sesión en dos etapas: correo electrónico o teléfono, luego contraseña.</figcaption></figure>
+
+Idealmente, esto debería implementarse con un solo elemento &lt;form&gt;. Use JavaScript para mostrar inicialmente solo la entrada de correo electrónico, luego ocúltela y muestre la entrada de contraseña. Si debe obligar a que el usuario navegue a una nueva página entre el ingreso de su correo electrónico y la contraseña, el formulario en la segunda página debe tener un elemento de entrada oculto con el valor del correo electrónico, para ayudar a que los administradores de contraseñas almacenen el valor correcto. Un ejemplo de código se proporciona en [Estilos de formulario de contraseña que Chromium entiende](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands).
+
+### Ayude a que los usuarios eviten ingresar de nuevo los datos {: #autofill }
+
+Puede ayudar a que los navegadores almacenen los datos correctamente y que completen automáticamente las entradas, para que los usuarios no tengan que acordarse de ingresar los valores de correo electrónico y contraseña. Esto es particularmente importante en dispositivos móviles y es crucial para las entradas de correo electrónico, que obtienen [tasas altas de abandono](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/).
+
+Hay dos partes en esto:
+
+1. Los atributos `autocomplete`, `name`, `id` y `type` ayudan a que los navegadores comprendan el papel de las entradas, para almacenar datos que luego se pueden usar para llenar automáticamente los campos. Para permitir que los datos se almacenen para llenarlos automáticamente, los navegadores modernos también requieren que las entradas tengan un valor `name` o `id` estable (no generado aleatoriamente en cada carga de página o implementación del sitio) y que estén en un &lt;formulario&gt; con un botón `submit`.
+
+2. El atributo `autocomplete` ayuda a que los navegadores completen automáticamente y de manera correcta las entradas mediante los datos almacenados.
+
+Para las entradas de correo electrónico, use `autocomplete="username"`, ya que los gestores de contraseñas en los navegadores modernos reconocen `username`, aunque debe usar `type="email"`, además quizá desee usar `id="email"` y `name="email"`.
+
+Para las entradas de contraseña, use los valores `autocomplete` e `id` apropiados para ayudar a que los navegadores diferencien entre contraseñas nuevas y actuales.
+
+### Use `autocomplete="new-password"` e `id="new-password"` para una nueva contraseña {: #new-password }
+
+- Use `autocomplete="new-password"` e `id="new-password"` para ingresar la contraseña en un formulario de registro o la nueva contraseña en un formulario de cambio de contraseña.
+
+### Use `autocomplete="current-password"` e `id="current-password"` para una contraseña existente {: #current-password }
+
+- Use `autocomplete="current-password"` e `id="current-password"` para ingresar la contraseña en un formulario de inicio de sesión o para ingresar la contraseña anterior del usuario en un formulario de cambio de contraseña. Esto le indica al navegador que usted desea que use la contraseña actual que tiene almacenada para el sitio.
+
+Para un formulario de registro:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+Para inicio de sesión:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %} Los navegadores como Chrome pueden usar el administrador de contraseñas del navegador para completar automáticamente los campos en el proceso de inicio de sesión para los usuarios recurrentes. Para que estas características funcionen, el navegador debe tener la capacidad de distinguir cuando un usuario cambia su contraseña.
+
+Específicamente, el formulario para cambiar la contraseña del usuario debe borrarse u ocultarse de la página después de configurar la nueva contraseña. Si el formulario para cambiar la contraseña del usuario permanece completo en la página después de que se haya producido el cambio de contraseña, es posible que el navegador no pueda registrar la actualización. {% endAside %}
+
+### Admita los administradores de contraseñas {: #password-managers }
+
+Los diferentes navegadores manejan el llenado automático del correo electrónico y la sugerencia de contraseñas de manera algo diferente, pero los efectos son muy parecidos. En Safari 11 y versiones superiores en equipos de escritorio, por ejemplo, se muestra el administrador de contraseñas y luego se usa la autenticación biométrica (reconocimiento de huellas dactilares o facial) si está disponible.
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="Capturas de pantalla de tres etapas del proceso de inicio de sesión en Safari en equipos de escritorio: administrador de contraseñas, autenticación biométrica, llenado automático.", width="800", height= "234" %}<figcaption> Inicio de sesión con llenado automático, ¡no es necesario ingresar texto!</figcaption></figure>
+
+En equipos de escritorio, Chrome muestra sugerencias de correo electrónico, muestra el gestor de contraseñas y llena automáticamente la contraseña.
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="Capturas de pantalla de cuatro etapas del proceso de inicio de sesión en Chrome en equipos de escritorio: completar el correo electrónico, sugerencia de correo electrónico, administrador de contraseñas, llenado automático durante la selección.", width="800", height="232" %} <figcaption>Flujo de inicio de sesión con llenado automático en Chrome 84.</figcaption></figure>
+
+Los sistemas de llenado automático y de contraseñas del navegador no son sencillos. Los algoritmos para adivinar, almacenar y mostrar los valores no están estandarizados y varían de una plataforma a otra. Por ejemplo, como lo señaló [Hidde de Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form): "El gestor de contraseñas de Firefox complementa su heurística con un [sistema de recetas](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)".
+
+El documento [Llenado automático: lo que los desarrolladores web deben saber, pero no saben](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont) tiene mucha más información sobre el uso de `name` y `autocomplete`. La [especificación HTML](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control) enumera los 59 valores posibles.
+
+{% Aside %} Usted puede ayudar a los gestores de contraseñas mediante el uso de diferentes valores `name` e `id` en los formularios de registro y de inicio de sesión, para el elemento `form` en sí, así como también para cualquier elemento `input`, `select` y `textarea`. {% endAside %}
+
+### Habilite la opción para que el navegador sugiera una contraseña segura {: #password-suggestions }
+
+Los navegadores modernos utilizan la heurística para decidir cuándo mostrar la interfaz de usuario del gestor de contraseñas y sugerir una contraseña segura.
+
+Así es como Safari lo hace en equipos de escritorio.
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="Captura de pantalla del administrador de contraseñas de Firefox en el escritorio", width="800", height="229" %} <figcaption> Flujo de sugerencia de contraseñas en Safari.</figcaption></figure>
+
+(La sugerencia de contraseñas únicas y fuertes ha estado disponible en Safari desde la versión 12.0).
+
+La presencia de generadores de contraseñas incorporados en el navegador significa que los usuarios y desarrolladores no necesitan averiguar qué es una "contraseña segura". Dado que los navegadores pueden almacenar contraseñas de forma segura y llenarlas automáticamente según se necesite, no es necesario que los usuarios recuerden o ingresen contraseñas. Alentar a los usuarios a aprovechar los generadores de contraseñas integrados en el navegador también significa que es más probable que utilicen una contraseña única y segura en su sitio, y es menos probable que reutilicen una contraseña que podría verse comprometida en otro lugar.
+
+{% Aside %} La desventaja de este enfoque es que no hay forma de compartir las contraseñas entre plataformas. Por ejemplo, un usuario puede usar Safari en su iPhone y Chrome en su computadora portátil con Windows. {% endAside %}
+
+### Ayude a que los usuarios eviten pasar por alto entradas accidentalmente {: #required-fields }
+
+Agregue el atributo `required` a los campos de correo electrónico y contraseña. Los navegadores modernos solicitan y establecen automáticamente el enfoque en los datos faltantes. ¡No se requiere JavaScript!
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="Captura de pantalla de Firefox y Chrome para Android de equipos de escritorio que muestra el mensaje 'Complete este campo' para los datos que faltan.", width="600", height="392" %}<figcaption> Solicitud y enfoque sobre los datos faltantes en Firefox para equipos de escritorio (versión 76) y Chrome para Android (versión 83).</figcaption></figure>
+
+## Diseñe para dedos y pulgares {: #mobile-design }
+
+El tamaño predeterminado del navegador para casi todo lo relacionado con los elementos de entrada y los botones es demasiado pequeño, especialmente en dispositivos móviles. Esto puede parecer obvio, pero es un problema común con los formularios de inicio de sesión en muchos sitios.
+
+### Compruebe que las entradas y los botones sean lo suficientemente grandes {: #tap-targets }
+
+El tamaño y el relleno predeterminados para las entradas y los botones es demasiado pequeño en equipos de escritorio e incluso peor en los móviles.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="Captura de pantalla de un formulario sin estilo en Chrome para equipos de escritorio y Chrome para Android.", width="800", height="434" %}</figure>
+
+Según la [Guía de accesibilidad de Android](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB), el tamaño objetivo recomendado para los objetos de la pantalla táctil es de 7 a 10 mm. Las pautas de la interfaz de Apple sugieren 48x48 px, y el W3C sugiere [al menos 44x44 píxeles CSS](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html). Sobre esa base, agregue (al menos) alrededor de 15 px de relleno a los elementos de entrada y botones para dispositivos móviles, y alrededor de 10 px en dispositivos de escritorio. Pruebe esto con un dispositivo móvil real y un dedo o pulgar real. Debería estar en capacidad de tocar cómodamente cada una de sus entradas y botones.
+
+La auditoría de Lighthouse [Los objetivos táctiles no tienen el tamaño adecuado](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/) puede ayudarlo a automatizar el proceso de detección de elementos de entrada que son demasiado pequeños.
+
+#### Diseñe para pulgares {: #design-for-thumbs }
+
+Haga una búsqueda por [objetivo táctil](https://www.google.com/search?q=touch+target) y verá muchas imágenes de dedos índices. Sin embargo, en el mundo real, muchas personas usan sus pulgares para interactuar con los teléfonos. Los pulgares son más grandes que los índices y el control es menos preciso. Razón de más para objetivos táctiles de tamaño adecuado.
+
+### Haga que el texto sea lo suficientemente grande {: #size-text-correctly }
+
+Al igual que con el tamaño y el relleno, el tamaño de fuente predeterminado del navegador para los elementos de entrada y los botones es demasiado pequeño, especialmente en dispositivos móviles.
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="Captura de pantalla de un formulario sin estilo en Chrome en equipos de escritorio y en Android.", width="800", height="494"%} <figcaption>Estilo predeterminado en equipos de escritorio y dispositivos móviles: el texto de entrada es demasiado pequeño como para que muchos usuarios lo puedan leer.</figcaption></figure>
+
+Los navegadores de diferentes plataformas dimensionan las fuentes de manera diferente, por lo que es difícil especificar un tamaño de fuente en particular que funcione bien en todas partes. Una encuesta rápida de sitios web populares muestra tamaños de 13 a 16 píxeles en equipos escritorio: hacer coincidir ese tamaño físico es un buen punto mínimo para el texto en dispositivos móviles.
+
+Esto significa que debe usar un tamaño de píxeles más grande en el dispositivo móvil: un tamaño de `16px` en Chrome para equipos de escritorio es bastante legible, pero incluso con una buena visión es difícil leer `16px` en Chrome para Android. Puede establecer diferentes tamaños de píxeles de fuente para diferentes tamaños de ventana gráfica mediante las [consultas de medios](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size). Un tamaño de `20px` es adecuado en dispositivos móviles, pero debe probarlo con amigos o colegas que tengan problemas de visión.
+
+La auditoría de Lighthouse [El documento no usa tamaños de fuente legibles](https://developer.chrome.com/docs/lighthouse/seo/font-size/) puede ayudarlo a automatizar el proceso de detección de texto que es demasiado pequeño.
+
+### Proporcione suficiente espacio entre las entradas {: #size-margins-correctly }
+
+Agregue suficiente margen para que las entradas funcionen bien como objetivos táctiles. En otras palabras, apunte a aproximadamente un dedo de ancho de margen.
+
+### Verifique que sus entradas se puedan ver claramente {: #visible-inputs }
+
+El estilo de borde predeterminado para las entradas hace que sean difíciles de ver. Son casi invisibles en algunas plataformas como Chrome para Android.
+
+Además del relleno, agregue un borde: sobre un fondo blanco, una buena regla general es usar `#ccc` o uno más oscuro.
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Captura de pantalla de un formulario con estilo en Chrome para Android", width="250", height="525" %} <figcaption>Texto legible, bordes de entrada visibles, relleno y márgenes adecuados.</figcaption></figure>
+
+### Utilice las funciones integradas del navegador para advertir sobre valores de entrada inválidos {: #built-in-validation }
+
+Los navegadores tienen funciones integradas para realizar una validación de formulario básica para las entradas con un atributo `type`. Los navegadores advierten cuando se envía un formulario con un valor inválido y enfocan la entrada problemática.
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="Captura de pantalla de un formulario de inicio de sesión en Chrome para equipos de escritorio que muestra el mensaje del navegador y el foco en un valor de correo electrónico inválido.", width="300", height="290"%} <figcaption>Validación básica incorporada en el navegador.</figcaption></figure>
+
+Puede utilizar el selector CSS `:invalid` para resaltar los datos inválidos. Utilice `:not(:placeholder-shown)` para evitar la selección de entradas sin contenido.
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+Pruebe diferentes formas de resaltar las entradas con valores inválidos.
+
+## Utilice JavaScript cuando sea necesario {: #javascript }
+
+### Alterne la visualización de contraseñas {: #password-display }
+
+Debe agregar un ícono o botón **Mostrar contraseña** para permitir que los usuarios verifiquen el texto que ingresaron. [La usabilidad se ve afectada](https://www.nngroup.com/articles/stop-password-masking/) cuando los usuarios no pueden ver el texto que ingresaron. Actualmente no hay una forma incorporada de hacer esto, aunque [hay planes de implementación](https://twitter.com/sw12/status/1251191795377156099). Deberá utilizar JavaScript en su lugar.
+
+<figure><img src="./show-password-google.png" width="350" alt="Formulario de inicio de sesión de Google que muestra el icono Mostrar contraseña."> <figcaption>Formulario de inicio de sesión de Google: con el icono <strong>Mostrar contraseña</strong> y el enlace <strong>Olvidé mi contraseña</strong>.</figcaption></figure>
+
+El siguiente código usa un botón de texto para agregar la funcionalidad **Mostrar contraseña**.
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Contraseña</label>
+  <button id="toggle-password" type="button" aria-label="Muestra la contraseña como texto plano. Advertencia: esto hará que se muestre su contraseña en la pantalla.">Mostrar contraseña</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+Éste es el CSS para hacer que el botón luzca como texto sin formato:
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* La consulta de medios no se muestra aquí. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Mostrar en la parte superior derecha del contenedor */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+Y el JavaScript para mostrar la contraseña:
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Ocultar contraseña';
+    togglePasswordButton.setAttribute('aria-label',
+      'Oculta la contraseña.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Mostrar contraseña';
+    togglePasswordButton.setAttribute('aria-label',
+      'Muestra la contraseña como texto plano. ' +
+      'Advertencia: esto hará que se muestre su contraseña en la pantalla.');
+  }
+}
+```
+
+Éste es el resultado final:
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Capturas de pantalla del formulario de inicio de sesión con el 'botón' de texto Mostrar la contraseña, en Safari para Mac y para iPhone 7.", width= "800", height="468" %} <figcaption>Formulario de inicio de sesión con el 'botón' de texto <strong>Mostrar la contraseña</strong> en Safari para Mac y iPhone 7.</figcaption></figure>
+
+### Haga que las entradas de contraseña sean accesibles {: #accessible-password-inputs }
+
+Utilice `aria-describedby` para delinear las reglas de contraseñas al indicarle la ID del elemento que describe las restricciones. Los lectores de pantalla proporcionan el texto de la etiqueta, el tipo de entrada (contraseña) y luego la descripción.
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Ocho o más caracteres con una combinación de letras, números y símbolos.</div>
+```
+
+Cuando agregue la funcionalidad **Mostrar contraseña**, asegúrese de incluir un atributo `aria-label` para advertir que se mostrará la contraseña. De lo contrario, los usuarios pueden revelar las contraseñas inadvertidamente.
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Muestra la contraseña como texto plano.
+                    Advertencia: esto hará que se muestre su contraseña en la pantalla.">
+  Mostrar contraseña
+</button>
+```
+
+Puede ver ambas funciones ARIA en acción en el siguiente error:
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+El documento [Crear formularios accesibles](https://webaim.org/techniques/forms/) tiene más consejos para ayudar a que los formularios sean accesibles.
+
+### Validar en tiempo real y antes del envío {: #validation }
+
+Los elementos y atributos del formulario HTML tienen funciones integradas para la validación básica, pero también debe usar JavaScript para realizar una validación más sólida durante el ingreso de datos por parte de los usuarios y cuando intentan enviar el formulario.
+
+{% Aside 'warning' %} La validación del lado del cliente ayuda a los usuarios durante el ingreso de datos y puede evitar una carga innecesaria del servidor, pero siempre debe validar y desinfectar los datos en su backend. {% endAside %}
+
+El [paso 5](https://glitch.com/edit/#!/sign-in-form-codelab-5) del laboratorio de códigos del formulario de inicio de sesión usa la [API de validación de restricciones](https://html.spec.whatwg.org/multipage/forms.html#constraints) (que es [ampliamente compatible](https://caniuse.com/#feat=constraint-validation)) para agregar validación personalizada mediante la interfaz de usuario incorporada en el navegador para establecer el enfoque y mostrar los mensajes.
+
+Obtenga más información en: [Use JavaScript para una validación más compleja en tiempo real](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+### Análisis y RUM {: #analytics }
+
+"Lo que no se puede medir, no se puede mejorar" es particularmente cierto para los formularios de registro y de inicio de sesión. Necesita establecer metas, medir el éxito, mejorar su sitio y repetir.
+
+Las [pruebas de usabilidad de saldo](https://www.nngroup.com/articles/discount-usability-20-years/) pueden ser útiles para probar cambios, pero necesitará datos del mundo real para comprender realmente la manera en que los usuarios experimentan sus formularios de registro y de inicio de sesión:
+
+- **Análisis de páginas**: vistas de páginas de registro e inicio de sesión, tasas de rebote y salidas.
+- **Análisis de interacción**: [embudos de objetivos](https://support.google.com/analytics/answer/6180923?hl=en) (¿dónde abandonan los usuarios su inicio de sesión o flujo de inicio de sesión?) y [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) (¿qué acciones realizan los usuarios al interactuar con sus formularios?).
+- **Rendimiento del sitio web**: [mediciones centradas en el usuario](/user-centric-performance-metrics) (¿son sus formularios de registro e inicio de sesión lentos por algún motivo y, de ser así, cuál es la causa?).
+
+Es posible que también desee considerar la implementación de pruebas A/B para probar diferentes enfoques para el registro y el inicio de sesión, además de los lanzamientos escalonados para validar los cambios en un subconjunto de usuarios antes de publicar los cambios para todos los usuarios.
+
+## Directrices generales {: #general-guidelines }
+
+Una interfaz de usuario y una experiencia de usuario bien diseñadas pueden reducir el abandono del formulario de inicio de sesión:
+
+- ¡Evite que los usuarios tengan que buscar el inicio de sesión! Coloque un enlace al formulario de inicio de sesión en la parte superior de la página, utilice un texto fácil de entender como **Iniciar sesión**, **Crear cuenta** o **Registrarse**.
+- ¡Manténgalo enfocado! Los formularios de registro no son el lugar para distraer a las personas con ofertas y otras características del sitio.
+- Minimice la complejidad del registro. Recopile otros datos del usuario (como direcciones o detalles de tarjetas de crédito) solo cuando los usuarios vean un beneficio claro para proporcionar esos datos.
+- Antes de que los usuarios comiencen con su formulario de registro, deje en claro cuál es la propuesta de valor. ¿Cómo se benefician al registrarse? Ofrézcales a los usuarios incentivos concretos para completar el registro.
+- Si es posible, permita que los usuarios se identifiquen con un número de teléfono móvil en lugar de una dirección de correo electrónico, ya que es posible que algunos usuarios no utilicen el correo electrónico.
+- Facilite a los usuarios el restablecimiento de su contraseña y haga que el enlace "**¿Olvidó su contraseña?**" sea obvio.
+- Enlace a los documentos de sus condiciones de servicio y política de privacidad: déjele claro a los usuarios desde el principio cómo protege sus datos.
+- Incluya el logotipo y el nombre de su empresa u organización en sus páginas de registro e inicio de sesión, además verifique que el idioma, las fuentes y los estilos coincidan con el resto de su sitio. Algunos formularios no parecen pertenecer al mismo sitio que otro contenido, especialmente si tienen una URL significativamente diferente.
+
+## Siga aprendiendo {: #resources }
+
+- [Cree formas asombrosas](/learn/forms/)
+- [Prácticas recomendadas para el diseño de formularios para dispositivos móviles](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulario más capaces](/more-capable-form-controls)
+- [Crear formularios accesibles](https://webaim.org/techniques/forms/)
+- [Optimización del flujo de inicio de sesión mediante la API de gestión de credenciales](https://developer.chrome.com/blog/credential-management-api/)
+- [Verifique los números de teléfono en la web con la API de WebOTP](/web-otp/)
+
+Foto de [Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU) en [Unsplash](https://unsplash.com).
diff --git a/src/site/content/es/identity/sign-up-form-best-practices/index.md b/src/site/content/es/identity/sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..5182810e0e1
--- /dev/null
+++ b/src/site/content/es/identity/sign-up-form-best-practices/index.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: Prácticas recomendadas para el formulario de registro
+subhead: Ayude a que sus usuarios se registren, inicien sesión y administren los detalles de su cuenta con un mínimo de esfuerzo.
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2020-12-11
+description: Ayude a que sus usuarios se registren, inicien sesión y administren los detalles de su cuenta con un mínimo de esfuerzo.
+hero: image/admin/YfAltWqxvie1SP19BxBj.jpg
+thumbnail: image/admin/7bDPvFWBMFIMynoqDpMc.jpg
+alt: Portapapeles con página manuscrita que muestra una lista de verduras sembradas.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-up-form-best-practices
+---
+
+{% YouTube 'Ev2mCzJZLtY' %}
+
+Si los usuarios alguna vez necesitan iniciar sesión en su sitio, entonces un buen diseño del formulario de registro es fundamental. Esto es especialmente cierto para las personas con malas conexiones, en el móvil, con prisa o bajo estrés. Los formularios de registro mal diseñados obtienen altas tasas de rebote. Cada rebote podría significar un usuario perdido y descontento, no solo una oportunidad de registro perdida.
+
+{% Aside 'codelab' %} Si prefiere aprender estas prácticas recomendadas con un tutorial práctico, consulte el [Laboratorio de códigos sobre prácticas recomendadas del formulario de registro](/codelab-sign-up-form-best-practices). {% endAside %}
+
+Este es un ejemplo de un formulario de registro muy simple que demuestra todas las prácticas recomendadas:
+
+{% Glitch { id: 'signup-form', path: 'index.html', height: 700 } %}
+
+{% Aside 'caution' %} Esta publicación trata sobre las prácticas recomendadas para formularios.
+
+No explica cómo implementar el registro a través de un proveedor de identidad de terceros (inicio de sesión federado), ni muestra cómo crear servicios de backend para autenticar usuarios, almacenar credenciales y administrar cuentas.
+
+El documento [Integración del inicio de sesión Google en su aplicación web](https://developers.google.com/identity/sign-in/web/sign-in) explica cómo agregar un inicio de sesión federado a sus opciones de registro.
+
+El documento [Las 12 mejores prácticas para la gestión de cuentas de usuario, autorizaciones y contraseñas](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) describe los principios básicos de backend para la gestión de cuentas de usuario. {% endAside %}
+
+## Lista de Verificación
+
+- [Evite el inicio de sesión si puede](#no-forced-sign-in).
+- [Haga que sea obvio cómo crear una cuenta](#obvious-account-creation).
+- [Haga que la manera de acceder a los detalles de la cuenta sea obvia](#obvious-account-details).
+- [Elimine el desorden](#cut-clutter).
+- [Considere la duración de la sesión](#session-length).
+- [Ayude a los administradores de contraseñas para que sugieran y almacenen contraseñas de forma segura](#help-password-managers).
+- [No permita contraseñas comprometidas](#no-compromised-passwords).
+- [Permita pegar contraseñas](#allow-password-pasting).
+- [Nunca almacene ni transmita contraseñas en texto sin formato](#salt-and-hash).
+- [No fuerce las actualizaciones de contraseña](#no-forced-password-updates).
+- [Facilite el cambio o restablecimiento de contraseñas](#password-change).
+- [Habilite el inicio de sesión federado](#federated-login).
+- [Simplifique el cambio de cuenta](#account-switching).
+- [Considere ofrecer autenticación multifactor](#multi-factor-authentication).
+- [Tenga cuidado con los nombres de usuario](#username).
+- [Haga pruebas tanto en el campo como en el laboratorio](#analytics-rum).
+- [Pruebe en una variedad de navegadores, dispositivos y plataformas](#test-platforms).
+
+## Evite el inicio de sesión si puede {: #no-force-sign-in }
+
+Antes de implementar un formulario de registro y pedirles a los usuarios que creen una cuenta en su sitio, considere si realmente lo necesita. Siempre que sea posible, debe evitar las funciones de activación detrás del inicio de sesión.
+
+¡El mejor formulario de registro es no tener ninguno!
+
+Al pedirle a un usuario que cree una cuenta, usted se interpone entre el usuario y lo que él intenta lograr. Usted está pidiendo un favor y le está pidiendo al usuario que le confíe sus datos personales. Cada contraseña y elemento de datos que almacena conlleva una "deuda de datos" de privacidad y seguridad, lo que se convierte en un costo y una responsabilidad para su sitio.
+
+Si la razón principal por la que solicita a los usuarios que creen una cuenta es para guardar información entre navegaciones o sesiones de navegación, [considere usar el almacenamiento del lado del cliente](/storage-for-the-web). Para los sitios de compras, obligar a los usuarios a crear una cuenta para realizar una compra se cita como una de las principales razones para el abandono del carrito de compras. Debería [hacer que el pago como invitado sea el predeterminado](/payment-and-address-form-best-practices#guest-checkout).
+
+## Haga que el inicio de sesión sea obvio {: #obvious-account-creation}
+
+Haga que sea obvio cómo crear una cuenta en su sitio, por ejemplo, con un botón **Iniciar sesión** o **Regístrese** en la parte superior derecha de la página. Evite el uso de un icono ambiguo o palabras vagas ("¡Suba a bordo!", "Únase a nosotros") y no oculte el inicio de sesión en un menú de navegación. El experto en usabilidad Steve Krug resumió este enfoque de usabilidad del sitio web: [¡No me haga pensar!](https://uxplanet.org/dont-make-me-think-20-wise-thoughts-about-usability-from-steve-krug-876b563f1d63) Si necesita convencer a otros miembros de su equipo web, utilice los [análisis](#analytics-rum) para mostrar el impacto de las diferentes opciones.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KeztoU8KgAqrQ5CKBSWw.jpg", alt="Dos capturas de pantalla de una maqueta de un sitio web de comercio electrónico visto en un teléfono Android. La de la izquierda usa un icono para el enlace de inicio de sesión que es algo ambiguo uno a la derecha simplemente dice 'Iniciar sesión' ", width= "800", height="737" %}<figcaption>Haga que el inicio de sesión sea obvio. Un icono puede ser ambiguo, pero un botón o enlace <b>Iniciar sesión</b>  es obvio.</figcaption></figure>
+
+{% Aside %} Es posible que se esté preguntando si debe agregar un botón (o enlace) para crear una cuenta y otro para que los usuarios existentes inicien sesión. Muchos sitios populares ahora simplemente muestran un solo botón **Iniciar sesión**. Cuando el usuario toca o hace clic en eso, también obtiene un enlace para crear una cuenta si es necesario. Ese es un patrón común ahora y es probable que sus usuarios lo entiendan, pero puede usar [el análisis de interacción](#analytics-rum) para monitorear si un solo botón funciona mejor o no. {% endAside %}
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WUgCNqhEgvoWEVwGjfrA.jpg", alt="Capturas de pantalla del inicio de sesión para Gmail: una página, que muestra el botón Iniciar sesión, cuando se hace clic en el formulario que también tiene un enlace Crear una cuenta.", width="800", height="545" %}   <figcaption> La página de inicio de sesión de Gmail tiene un enlace para crear una cuenta. <br> En tamaños de ventana más grandes que los que se muestran aquí, Gmail muestra un enlace <b>Iniciar sesión</b> y un botón <b>Crear una cuenta</b>. </figcaption></figure>
+
+Asegúrese de vincular las cuentas de los usuarios que se registran a través de un proveedor de identidad como Google y que también se registran mediante correo electrónico y contraseña. Eso es fácil de hacer si puede acceder a la dirección de correo electrónico de un usuario desde los datos del perfil del proveedor de identidad y hacer coincidir las dos cuentas. El siguiente código muestra cómo acceder a los datos de correo electrónico de un usuario con inicio de sesión de Google.
+
+```js
+// auth2 se inicializa con gapi.auth2.init()
+if (auth2.isSignedIn.get()) {
+  var profile = auth2.currentUser.get().getBasicProfile();
+  console.log(`Email: ${profile.getEmail()}`);
+}
+```
+
+{: #obvious-account-details}
+
+Una vez que un usuario haya iniciado sesión, aclare cómo acceder a los detalles de la cuenta. En particular, haga que sea obvio cómo [cambiar o restablecer las contraseñas](#password-change).
+
+## Elimina el desorden {: #cut-clutter}
+
+En el flujo de registro, su trabajo es minimizar la complejidad y mantener al usuario enfocado. Elimine el desorden. ¡Este no es el momento de distracciones y tentaciones!
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/avoid-distractions.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>No distraiga a los usuarios mientras completan el registro.</figcaption></figure>
+
+Durante el registro, solicite lo menos posible. Recopile datos de usuario adicionales (como nombre y dirección) solo cuando sea necesario y cuando el usuario vea un beneficio claro al proporcionar esos datos. Tenga en cuenta que cada elemento de datos que comunique y almacene implica un costo y una responsabilidad.
+
+No duplique sus entradas solo para asegurar de que los usuarios ingresen sus datos de contacto correctamente. Eso ralentiza la finalización del formulario y no tiene sentido si los campos del formulario se llenan automáticamente. En su lugar, envíele al usuario un código de confirmación una vez que haya ingresado sus datos de contacto, luego siga con la creación de la cuenta una vez que el usuario responda. Este es un patrón de registro común: los usuarios están acostumbrados.
+
+Es posible que desee considerar el inicio de sesión sin contraseña al enviarle a los usuarios un código cada vez que inician sesión en un nuevo dispositivo o navegador. Sitios como Slack y Medium usan una versión de esto.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/medium-sign-in.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Inicio de sesión sin contraseña en medium.com.</figcaption></figure>
+
+Al igual que con el inicio de sesión federado, esto tiene la ventaja adicional de no tener que administrar las contraseñas de los usuarios.
+
+## Considere la duración de la sesión {: #session-length}
+
+Cualquiera que sea el enfoque que adopte para la identidad del usuario, deberá tomar una decisión cuidadosa sobre la duración de la sesión: cuánto tiempo permanece el usuario conectado y qué puede hacer que usted le cierre la sesión.
+
+Considere si sus usuarios están en dispositivos móviles o de escritorio, y si están en equipos de escritorio o dispositivos compartidos.
+
+{% Aside %} Puede solucionar algunos de los problemas de los dispositivos compartidos si aplica una nueva autenticación para funciones sensibles, por ejemplo, cuando se realiza una compra o se actualiza una cuenta. Puede obtener más información sobre las formas de implementar la reautenticación en la el laboratorio de códigos [Su primera aplicación WebAuthn](https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0). {% endAside %}
+
+## Ayude a que los administradores de contraseñas sugieran y almacenen contraseñas de forma segura {: #help-password-managers}
+
+Puede ayudar a que los administradores de contraseñas de navegadores integrados y de terceros sugieran y almacenen contraseñas, de modo que los usuarios no tengan que elegir, recordar o escribir contraseñas ellos mismos. Los administradores de contraseñas funcionan bien en los navegadores modernos, al sincronizar las cuentas en todos los dispositivos, en aplicaciones web, las específicas de la plataforma y en dispositivos nuevos.
+
+Esto hace que sea extremadamente importante codificar los formularios de registro correctamente, en particular para usar los valores correctos de autocompletar. Para los formularios de registro utilice `autocomplete="new-password"` para las nuevas contraseñas y agregue los valores correctos de autocompletar a otros campos de formulario siempre que sea posible, como `autocomplete="email"` y `autocomplete="tel"`. También puede ayudar a los administradores de contraseñas mediante el uso de diferentes valores `name` e `id` en los formularios de registro y de inicio de sesión, para el elemento `form` en sí, así como también cualquier elemento `input`, `select` y `textarea`.
+
+También debe usar el [atributo `type`](https://developer.mozilla.org/docs/Web/HTML/Element/input/email) apropiado para proporcionar el teclado correcto en el dispositivo móvil y habilitar la validación básica incorporada por parte del navegador. Puede obtener más información en el documento [Prácticas recomendadas para formulario de pago y dirección](/payment-and-address-form-best-practices#type).
+
+{% Aside %} EL documento [Prácticas recomendadas para formularios de inicio de sesión](/sign-in-form-best-practices) tiene muchos más consejos sobre cómo mejorar el diseño, el diseño y la accesibilidad de los formularios, y cómo codificar los formularios correctamente para aprovechar las funciones integradas del navegador. {% endAside %}
+
+## Verifique que los usuarios ingresen contraseñas seguras {: #secure-passwords}
+
+Permitir que los administradores de contraseñas sugieran contraseñas es la mejor opción, además debe alentar a los usuarios para que acepten las contraseñas seguras sugeridas por los navegadores y administradores de navegadores de terceros.
+
+Sin embargo, muchos usuarios desean ingresar sus propias contraseñas, por lo que debe implementar reglas para la seguridad de las contraseñas. El Instituto Nacional de Estándares y Tecnología de los Estados Unidos explica [cómo evitar las contraseñas inseguras](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements).
+
+{% Aside 'warning' %} Los formularios de registro en algunos sitios tienen reglas de validación de contraseñas que no permiten las contraseñas seguras generadas por el navegador y los administradores de contraseñas de terceros. Verifique que su sitio no haga tal cosa, ya que interrumpe el llenado de formularios, molesta a los usuarios y requiere que los usuarios creen sus propias contraseñas, que pueden ser menos seguras que las generadas por los administradores de contraseñas. {% endAside %}
+
+## No permita contraseñas comprometidas {: #no-compromised-passwords}
+
+Independientemente de las reglas que elija para las contraseñas, nunca debe permitir contraseñas que se hayan [expuesto en violaciones de seguridad](https://haveibeenpwned.com/PwnedWebsites).
+
+Una vez que un usuario ha ingresado una contraseña, debe verificar que no sea una contraseña que ya se haya comprometido. El sitio [Have I Been Pwned](https://haveibeenpwned.com/Passwords) proporciona una API para la verificación de contraseñas o puede ejecutarlo usted mismo como un servicio.
+
+El Administrador de contraseñas de Google también le permite [verificar si alguna de sus contraseñas existentes se ha visto comprometida](https://passwords.google.com/checkup).
+
+Si rechaza la contraseña que propone un usuario, dígale específicamente por qué se rechazó. [Muestre los problemas en línea y explique cómo solucionarlos](https://baymard.com/blog/inline-form-validation), tan pronto como el usuario haya ingresado un valor, no después de que haya enviado el formulario de registro y haya tenido que esperar una respuesta de su servidor.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/password-validation.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Sea claro respecto a por qué se rechaza una contraseña.</figcaption></figure>
+
+## No prohíba el pegado de contraseñas {: #allow-password-pasting}
+
+Algunos sitios no permiten que se pegue texto en las entradas de contraseña.
+
+No permitir el pegado de contraseñas molesta a los usuarios, fomenta contraseñas que se pueden recordar (y, por lo tanto, pueden ser más fáciles de comprometer) y, según organizaciones como el Centro Nacional de Seguridad Cibernética del Reino Unido, en realidad pueden [reducir la seguridad](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords). Los usuarios solo se dan cuenta de que no se permite pegar *después* de que intentan pegar su contraseña, por lo que [no permitir el pegado de contraseñas no evita las vulnerabilidades del portapapeles](https://github.com/OWASP/owasp-masvs/issues/106).
+
+## Nunca almacene ni transmita contraseñas en texto sin formato {: #salt-and-hash}
+
+Asegúrese de utilizar el [hash con sal](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt) para las contraseñas, además ¡[no intente inventar su propio algoritmo de hash](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html)!
+
+## No fuerce las actualizaciones de contraseña {: #no-force-password-updates}
+
+[No obligue a que los usuarios actualicen sus contraseñas de forma arbitraria.](https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers:~:text=Verifiers%20SHOULD%20NOT%20require%20memorized%20secrets%20to%20be%20changed%20arbitrarily%20(e.g.%2C%20periodically).)
+
+Forzar la actualización de contraseñas puede resultar costoso para los departamentos de TI, molesta a los usuarios y [no tiene mucho impacto sobre la seguridad](https://pages.nist.gov/800-63-FAQ/#q-b05). También es probable que fomente que las personas utilicen contraseñas fáciles de recordar inseguras o que mantengan un registro físico de las contraseñas.
+
+En lugar de forzar las actualizaciones de contraseñas, debe controlar la actividad inusual de la cuenta y advertirles a los usuarios. Si es posible, también debe controlar las contraseñas que se vean comprometidas debido a violaciones de datos.
+
+También debe proporcionarles a sus usuarios acceso al historial de inicio de sesión de su cuenta, para mostrarles dónde y cuándo ocurrió un inicio de sesión.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zZXmhWc9bZ1GtvrE5Ooq.jpg", alt="Página de actividad de la cuenta de Gmail", width="800", height="469" %} <figcaption><a href="https://support.google.com/mail/answer/45938?hl=en-GB" title="Descubra cómo ver la actividad de la cuenta de Gmail.">Página de actividad de la cuenta de Gmail</a>.</figcaption></figure>
+
+## Simplifique el cambio o restablecimiento de contraseñas {: #password-change}
+
+Indíqueles a los usuarios dónde y cómo **actualizar** la contraseña de su cuenta. En algunos sitios, es sorprendentemente difícil.
+
+Por supuesto, también debe facilitarles a los usuarios el **restablecimiento** de su contraseña si la olvidan. El Proyecto de seguridad de aplicaciones web de fuente abierta proporciona una guía detallada sobre [cómo manejar las contraseñas perdidas](https://cheatsheetseries.owasp.org/cheatsheets/Forgot_Password_Cheat_Sheet.html).
+
+Para mantener su negocio y sus usuarios seguros, es especialmente importante ayudar a que los usuarios a cambien su contraseña si descubren que se ha comprometido. Para facilitar esto, debe agregar una URL [`/.well-known/change-password`](https://w3c.github.io/webappsec-change-password-url/) en su sitio que redirija hacia su página de administración de contraseñas. Esto permite que los administradores de contraseñas dirijan a sus usuarios directamente a la página donde pueden cambiar la contraseña de su sitio. Esta función ahora está implementada en Safari, Chrome y llegará a otros navegadores. El documento [Ayude a que los usuarios cambien las contraseñas fácilmente al agregar una URL conocida para cambiar las contraseñas](/change-password-url) explica cómo implementar esto.
+
+También debe facilitarles a los usuarios la eliminación de su cuenta si eso es lo que quieren.
+
+## Ofrezca acceso a través de proveedores de identidad de terceros {: #federated-login}
+
+Muchos usuarios prefieren iniciar sesión en sitios web mediante una dirección de correo electrónico y un formulario de registro de contraseña. Sin embargo, también debe permitir que los usuarios inicien sesión a través de un proveedor de identidad externo, también conocido como inicio de sesión federado.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jubgwX1shLB7qAIiioTU.jpg", alt="Página de inicio de sesión de WordPress", width="800", height="513" %} <figcaption>Página de inicio de sesión de WordPress, con opciones de inicio de sesión de Google y Apple.</figcaption></figure>
+
+Este enfoque tiene varias ventajas. Para los usuarios que crean una cuenta mediante el inicio de sesión federado, no es necesario que soliciten, comuniquen o almacenen las contraseñas.
+
+También puede acceder a la información de perfil verificada y adicional desde el inicio de sesión federado, como una dirección de correo electrónico, lo que significa que el usuario no tiene que ingresar esos datos y usted no necesita hacer la verificación usted mismo. El inicio de sesión federado también puede facilitarles mucho las cosas a los usuarios cuando obtienen un nuevo dispositivo.
+
+el documento [Integración del inicio de sesión de Google en su aplicación web](https://developers.google.com/identity/sign-in/web/sign-in) explica cómo agregar un inicio de sesión federado a sus opciones de registro. Hay [muchas otras](https://en.wikipedia.org/wiki/Federated_identity#Examples) plataformas de identidad disponibles.
+
+{% Aside %} La "experiencia del primer día" cuando se obtiene un dispositivo nuevo es cada vez más importante. Los usuarios esperan iniciar sesión desde varios dispositivos, incluidos su teléfono, computadora portátil, computadora de escritorio, tableta, TV o desde un automóvil. Si sus formularios de registro e inicio de sesión no son perfectos, este es un momento en el que corre el riesgo de perder usuarios o al menos perder el contacto con ellos hasta que configuren de nuevo. Debe hacer que sea lo más rápido y fácil posible para que los usuarios de nuevos dispositivos comiencen a usar su sitio. Esta es otra área en la que el inicio de sesión federado puede ayudar. {% endAside %}
+
+## Simplifique el cambio de cuenta {: #account-switching}
+
+Muchos usuarios comparten dispositivos e intercambian cuentas mediante el mismo navegador. Ya sea que los usuarios accedan al inicio de sesión federado o no, debe simplificar el cambio de cuenta.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sPDZJIY5Vo2ijqyuofCy.jpg", alt="Se muestra un cambio de cuenta en Gmail", width="800", height="494" %} <figcaption>Cambio de cuenta en Gmail.</figcaption></figure>
+
+## Considere ofrecer autenticación multifactor {: #multi-factor-authentication}
+
+La autenticación multifactor significa garantizar que los usuarios proporcionen autenticación en más de una forma. Por ejemplo, además de pedirle al usuario que establezca una contraseña, también puede hacer cumplir la verificación mediante un código de acceso único enviado por correo electrónico o un mensaje de texto SMS, o mediante un código único basado en la aplicación, una clave de seguridad o un sensor de huellas dactilares. Los documentos [Prácticas recomendadas de SMS OTP](/sms-otp-form) y [Habilitación de la autenticación robusta con WebAuthn](https://developer.chrome.com/blog/webauthn/) explican cómo implementar la autenticación multifactor.
+
+Sin duda, debe ofrecer (o hacer cumplir) la autenticación multifactor si su sitio maneja información personal o confidencial.
+
+## Tenga cuidado con los nombres de usuario {: #username}
+
+No insista en un nombre de usuario a menos (o hasta) que lo necesite. Permita que los usuarios se registren e inicien sesión solo con una dirección de correo electrónico (o número de teléfono) y una contraseña, o un [inicio de sesión federado](#federated-login) si lo prefieren. No los obligue a elegir y recordar un nombre de usuario.
+
+Si su sitio requiere nombres de usuario, no les imponga reglas irrazonables y no impida que los usuarios actualicen su nombre de usuario. En su backend, debe generar una identificación única para cada cuenta de usuario, no un identificador basado en datos personales como el nombre de usuario.
+
+También asegúrese de utilizar `autocomplete="username"` para los nombres de usuario.
+
+{% Aside 'caution' %} Al igual que con los nombres personales, verifique que los nombres de usuario no estén restringidos a caracteres del [alfabeto latino](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes#Types:~:text=Latin%20alphabet). El documento [Prácticas recomendables de formularios de pago y dirección](/payment-and-address-form-best-practices#unicode-matching) explica cómo y por qué validar mediante la concordancia de letras Unicode. {% endAside %}
+
+## Haga pruebas en una variedad de dispositivos, plataformas, navegadores y versiones {: #test-platform}
+
+Haga pruebas de los formularios de registro en las plataformas más comunes para sus usuarios. La funcionalidad del elemento de formulario puede variar y las diferencias en el tamaño de la ventana gráfica pueden causar problemas de diseño. BrowserStack permite [realizar pruebas gratuitas para proyectos de código abierto](https://www.browserstack.com/open-source) en una variedad de dispositivos y navegadores.
+
+## Implemente el análisis y monitoreo de usuarios reales {: #analytics-rum}
+
+Necesita [datos de campo, así como también datos de laboratorio](/how-to-measure-speed/#lab-data-vs-field-data) para comprender cómo los usuarios experimentan sus formularios de registro. Los análisis y el [monitoreo real de usuarios](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic#Real_User_Monitoring) (RUM) proporcionan datos para la experiencia real de sus usuarios, como cuánto tiempo tardan en cargarse las páginas de registro, con qué componentes de la interfaz de usuario interactúan (o no) los usuarios y cuánto tardan los usuarios en completar el registro.
+
+- **Análisis de página{/strong0: [vistas de página, tasas de rebote y salidas](https://analytics.google.com/analytics/academy/course/6) para cada página en su flujo de registro.**
+- **Análisis de interacción**: los [embudos de objetivos](https://support.google.com/analytics/answer/6180923?hl=en) y los [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) indican dónde los usuarios abandonan el flujo de registro y qué proporción de usuarios hacen clic en los botones, enlaces y otros componentes de sus páginas de registro.
+- **Rendimiento del sitio web**: las [estadísticas centradas en el usuario](/user-centric-performance-metrics) pueden indicarle si su flujo de registro tarda en cargarse o es [visualmente inestable](/cls).
+
+Los pequeños cambios pueden marcar una gran diferencia en las tasas de finalización de los formularios de registro. Los análisis y el RUM le permiten optimizar y priorizar cambios, además de monitorear su sitio en busca de problemas que no queden expuestos por las pruebas locales.
+
+## Siga aprendiendo {: #resources }
+
+- [Prácticas recomendables para el formulario de inicio de sesión](/sign-in-form-best-practices)
+- [Prácticas recomendadas para los formularios de pago y de dirección](/payment-and-address-form-best-practices)
+- [Cree formas asombrosas](/learn/forms/)
+- [Prácticas recomendadas para el diseño de formularios móviles](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulario más capaces](/more-capable-form-controls)
+- [Crear formularios accesibles](https://webaim.org/techniques/forms/)
+- [Optimización del flujo de registro mediante la API de gestión de credenciales](https://developer.chrome.com/blog/credential-management-api/)
+- [Verifique los números de teléfono en la web con la API WebOTP](/web-otp)
+
+Foto de [@ecowarriorprincess](https://unsplash.com/@ecowarriorprincess) en [Unsplash](https://unsplash.com/photos/lUShu7PHIGA).
diff --git a/src/site/content/es/identity/sms-otp-form/index.md b/src/site/content/es/identity/sms-otp-form/index.md
new file mode 100644
index 00000000000..a0226f049d4
--- /dev/null
+++ b/src/site/content/es/identity/sms-otp-form/index.md
@@ -0,0 +1,186 @@
+---
+layout: post
+title: Mejores prácticas para formularios SMS OTP
+subhead: Aprenda a optimizar su formulario SMS OTP y mejorar la experiencia del usuario.
+authors:
+  - agektmr
+date: 2020-12-09
+updated: 2020-12-09
+hero: image/admin/J3XT84NDBPLlsRN0PhLl.jpg
+alt: Un letrero de burbuja de chat de neón.
+description: Pedirle a un usuario que proporcione una OTP (contraseña de un solo uso) enviada a través de un SMS es una forma común de confirmar el número de teléfono de un usuario. Esta publicación le proporciona las mejores prácticas para crear un formulario OTP de SMS con una excelente experiencia de usuario.
+tags:
+  - identity
+  - security
+  - forms
+---
+
+{% YouTube 'sU4MpWYrGSI' %}
+
+Pedirle a un usuario que proporcione la OTP (contraseña de un solo uso) entregada a través de SMS, es una forma común de confirmar el número de teléfono de un usuario. Hay algunos casos de uso para SMS OTP:
+
+- **Autenticación en dos pasos.** Además del nombre de usuario y la contraseña, el SMS OTP se puede utilizar como una fuerte señal de que la cuenta es propiedad de la persona que recibió el SMS OTP.
+- **Verificación del número de teléfono.** Algunos servicios utilizan un número de teléfono como identificador principal del usuario. En tales servicios, los usuarios pueden ingresar su número de teléfono y la OTP recibida a través de un SMS para probar su identidad. A veces se combina con un PIN para constituir una autenticación en dos pasos.
+- **Recuperación de Cuenta.** Cuando un usuario pierde el acceso a su cuenta, debe haber una forma de recuperarla. Enviar un correo electrónico a su dirección de correo electrónico registrada o un SMS OTP a su número de teléfono son métodos comunes de recuperación de cuentas.
+- **Confirmación de pago.** En los sistemas de pago, algunos bancos o emisores de tarjetas de crédito solicitan autenticación adicional al pagador por razones de seguridad. El SMS OTP se usa comúnmente para ese propósito.
+
+Esta publicación explica las mejores prácticas para crear un formulario SMS OTP para los casos de uso anteriores.
+
+{% Aside 'caution' %} Si bien esta publicación analiza las mejores prácticas de un formulario SMS OTP, tenga en cuenta que el SMS OTP no es el método más seguro de autenticación en sí mismo porque los números de teléfono se pueden reciclar y, a veces, secuestrar. Y [el concepto de OTP en sí mismo no es resistente al phishing](https://youtu.be/kGGMgEfSzMw?t=1133).
+
+Si busca una seguridad mejor, considere usar [WebAuthn](https://www.w3.org/TR/webauthn-2/). Obtenga más información al respecto en la charla "[Novedades en el registro y el inicio de sesión](https://goo.gle/webauthn-video)" del Chrome Dev Summit 2019 y cree una experiencia de reautenticación utilizando un sensor biométrico con el laboratorio de código ["Cree su primera aplicación WebAuthn"](https://goo.gle/WebAuthnReauthCodelab). {% endAside %}
+
+## Lista de Verificación
+
+Para proporcionar la mejor experiencia de usuario con SMS OTP, siga estos pasos:
+
+- Utilice el elemento `<input>` con:
+    - `type="text"`
+    - `inputmode="numeric"`
+    - `autocomplete="one-time-code"`
+- Utilice `@BOUND_DOMAIN #OTP_CODE` como la última línea del mensaje SMS OTP.
+- Utilice la [API de WebOTP](/web-otp/).
+
+## Use el elemento `<input>`
+
+El uso de un formulario con un elemento `<input>` es la mejor y la más importante práctica que puede seguir, ya que funciona en todos los navegadores. Incluso si otras sugerencias de esta publicación no funcionan en algún navegador, el usuario aún podrá ingresar y enviar la OTP manualmente.
+
+```html
+<form action="/verify-otp" method="POST">
+  <input type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         pattern="\d{6}"
+         required>
+</form>
+```
+
+Las siguientes son algunas ideas para garantizar que un campo de entrada saque el máximo partido a la funcionalidad del navegador.
+
+### `type="text"`
+
+Dado que las OTP suelen ser números de cinco o seis dígitos, el uso de `type="number"` para un campo de entrada puede parecer intuitivo porque cambia el teclado móvil a números únicamente. Esto no se recomienda porque el navegador espera que un campo de entrada sea un número contable en lugar de una secuencia de varios números, lo que puede provocar un comportamiento inesperado. El uso de `type="number"` hace que los botones de "hacia arriba" y "hacia abajo" se muestren al lado del campo de entrada; presionar estos botones aumenta o disminuye el número y puede eliminar los ceros precedentes.
+
+En su lugar, utilice `type="text"`. Esto no convertirá el teclado móvil solo en números, pero está bien porque el siguiente consejo para usar `inputmode="numeric"` hace ese trabajo.
+
+### `inputmode="numeric"`
+
+Utilice [`inputmode="numeric"`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) para cambiar el teclado del móvil a números únicamente.
+
+Algunos sitios web usan `type="tel"` para los campos de entrada de OTP, ya que también convierte el teclado del teléfono solo en números (incluyendo `*` y `#`) cuando está enfocado. Este truco se usó en el pasado cuando `inputmode="numeric"` no era ampliamente compatible. Desde que <a href="https://github.com/mdn/browser-compat-data/pull/6782" data-md-type="link">Firefox comenzó a admitir `inputmode="numeric"`</a>, no es necesario utilizar el truco `type="tel"`.
+
+### `autocomplete="one-time-code"`
+
+El atributo [`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) permite a los desarrolladores especificar qué permiso tiene el navegador para proporcionar asistencia de autocompletar, así como informar al navegador sobre el tipo de información que se espera en el campo.
+
+Con `autocomplete="one-time-code"` cada vez que un usuario recibe un mensaje SMS mientras un formulario está abierto, el sistema operativo analizará la OTP en el SMS de forma heurística y el teclado sugerirá la OTP para que el usuario ingrese. Solo funciona en Safari 12 y versiones posteriores en iOS, iPadOS y macOS, pero recomendamos encarecidamente su uso, porque es una forma fácil de mejorar la experiencia de SMS OTP en esas plataformas.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>`autocomplete =" one-time-code "` en acción.</figcaption></figure>
+
+`autocomplete="one-time-code"` mejora la experiencia del usuario, pero puede hacer más si se [asegura de que el mensaje SMS cumpla con el formato de mensaje vinculado al origen](#format).
+
+{% Aside %} Atributos opcionales:
+
+- [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern) especifica el formato que debe coincidir con la OTP ingresada. Utilice expresiones regulares para especificar el patrón coincidente, por ejemplo, `\d{6}` restringe la OTP a una cadena de seis dígitos. Obtenga más información sobre el atributo `pattern` en [Use JavaScript para una validación en tiempo real más compleja] (https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)
+
+- [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) indica que un campo es obligatorio.
+
+Para conocer las mejores prácticas de formularios más generales, el artículo [Las mejores prácticas de formularios de inicio de sesión](/authors/samdutton/) de [Sam Dutton](/authors/samdutton/) es un excelente punto de partida. {% endAside %}
+
+## Formatee el texto del SMS {: #format}
+
+Mejore la experiencia del usuario de ingresar a una OTP al alinearse con la especificación de [los códigos únicos vinculados al origen entregados a través de SMS](https://wicg.github.io/sms-one-time-codes/).
+
+La regla de formato es simple: Termine el mensaje SMS con el dominio del receptor precedido por `@` y la OTP precedida por `#`.
+
+Por ejemplo:
+
+```text
+Your OTP is 123456
+
+@web-otp.glitch.me #123456
+```
+
+El uso de un formato estándar para los mensajes OTP hace que la extracción de códigos de ellos sea más fácil y confiable. Asociar los códigos OTP con sitios web dificulta que los los usuarios sean engañados para que proporcionen un código a sitios maliciosos.
+
+{% Aside %} Las reglas precisas son:
+
+- El mensaje comienza con texto legible por humanos (opcional) que contiene una cadena alfanumérica de cuatro a diez caracteres con al menos un número, dejando la última línea para la URL y la OTP.
+- La parte del dominio de la URL del sitio web que invocó la API debe estar precedida por `@`.
+- La URL debe contener un signo de almohadilla ("`#`") seguido de la OTP.
+
+Asegúrese de que la cantidad de caracteres no exceda los 140 en total.
+
+Para obtener más información sobre las reglas específicas de Chrome, lea la sección [Formatear el mensaje SMS de la publicación API de WebOTP](/web-otp/#format). {% endAside %}
+
+El uso de este formato ofrece algunos beneficios:
+
+- La OTP estará vinculada al dominio. Si el usuario está en dominios distintos al especificado en el mensaje SMS, la sugerencia de OTP no aparecerá. Esto también reduce el riesgo de ataques de phishing y posibles secuestros de cuentas.
+- El navegador ahora podrá extraer la OTP de manera confiable sin depender de heurísticas misteriosas y escabrosas.
+
+Cuando un sitio web usa `autocomplete="one-time-code"`, Safari con iOS 14 o posterior, sugerirá la OTP siguiendo las reglas anteriores.
+
+{% Aside %} Si el usuario está en una computadora con macOS Big Sur con la misma cuenta de iCloud configurada que en iOS, la OTP recibida en el dispositivo iOS también estará disponible en el Safari de escritorio.
+
+Para obtener más información sobre otros beneficios y matices de la disponibilidad en las plataformas de Apple, lea [Mejorar la seguridad del código entregado por SMS con códigos vinculados al dominio](https://developer.apple.com/news/?id=z0i801mg). {% endAside %}
+
+Este formato de mensaje SMS también beneficia a otros navegadores además de Safari. Chrome, Opera y Vivaldi en Android también admiten la regla de códigos de un solo uso vinculados al origen con la API de WebOTP, aunque no a través de `autocomplete="one-time-code"`.
+
+## Utilizar la API de WebOTP
+
+[La API de WebOTP](https://wicg.github.io/web-otp/) proporciona acceso a la OTP recibida en un mensaje SMS. Al llamar a [`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get) con el tipo `otp` (`OTPCredential`) donde `transport` incluye `sms`, el sitio web esperará a que se entregue un SMS que cumpla con los códigos de un solo uso vinculados al origen y se le otorgue acceso por parte del usuario. Una vez que la OTP se pasa a JavaScript, el sitio web puede usarla en un formulario o enviarla directamente al servidor.
+
+{% Aside 'caution' %} La API de WebOTP requiere un origen seguro (HTTPS). {% endAside %}
+
+```js
+navigator.credentials.get({
+  otp: {transport:['sms']}
+})
+.then(otp => input.value = otp.code);
+```
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>API de WebOTP en acción.</figcaption></figure>
+
+Aprenda a usar con detalle la API de WebOTP en [Verificar números de teléfono en la web con la API de WebOTP](/web-otp/) o copie y pegue el siguiente fragmento. (Asegúrese de que el elemento `<form>` tenga los atributos `method` y `action` establecidos correctamente).
+
+```js
+// Feature detection
+if ('OTPCredential' in window) {
+  window.addEventListener('DOMContentLoaded', e => {
+    const input = document.querySelector('input[autocomplete="one-time-code"]');
+    if (!input) return;
+    // Cancel the WebOTP API if the form is submitted manually.
+    const ac = new AbortController();
+    const form = input.closest('form');
+    if (form) {
+      form.addEventListener('submit', e => {
+        // Cancel the WebOTP API.
+        ac.abort();
+      });
+    }
+    // Invoke the WebOTP API
+    navigator.credentials.get({
+      otp: { transport:['sms'] },
+      signal: ac.signal
+    }).then(otp => {
+      input.value = otp.code;
+      // Automatically submit the form when an OTP is obtained.
+      if (form) form.submit();
+    }).catch(err => {
+      console.log(err);
+    });
+  });
+}
+```
+
+Foto de [Jason Leung](https://unsplash.com/photos/mZNRsYE9Qi4) en [Unsplash](https://unsplash.com).
diff --git a/src/site/content/es/index.11tydata.js b/src/site/content/es/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/es/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/es/index.md b/src/site/content/es/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/es/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/es/lang.js b/src/site/content/es/lang.js
new file mode 100644
index 00000000000..219d68e2419
--- /dev/null
+++ b/src/site/content/es/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'es', // The intended language variation in this dir is es-419
+  locale: 'es_ALL',
+};
diff --git a/src/site/content/es/learn-core-web-vitals/index.md b/src/site/content/es/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/es/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/es/learn/css/box-model/box-model.assess.yml b/src/site/content/es/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/es/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/es/learn/css/box-model/index.md b/src/site/content/es/learn/css/box-model/index.md
new file mode 100644
index 00000000000..21451fc85bd
--- /dev/null
+++ b/src/site/content/es/learn/css/box-model/index.md
@@ -0,0 +1,163 @@
+---
+title: Modelo de caja
+description: |2-
+
+  Todo lo que muestra CSS es una caja.
+  Por lo tanto, comprender cómo funciona el modelo de caja CSS es una base fundamental de CSS.
+audio:
+  title: 'The CSS Podcast   - 001: The Box Model'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Digamos que tienes este fragmento de HTML:
+
+```html
+<p>Soy un párrafo de texto y tengo algunas palabras.</p>
+```
+
+Luego escribes este CSS para el párrafo anterior:
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+El contenido saldría de su elemento y tendría 142px de ancho, en lugar de 100px. ¿Porqué sucede eso? El modelo de caja es una base fundamental de CSS y comprender cómo funciona, cómo se ve afectado por otros aspectos de CSS y, lo que es más importante, cómo puedes controlarlo te ayudará a escribir un CSS más predecible.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRemxN', height: 300 } %}</figure>
+
+Una cosa realmente importante para recordar al escribir CSS, o al trabajar en la web en general, es que todo lo que muestra CSS es una caja. Ya sea que uses `border-radius` en una caja para que se parezca a un círculo, o incluso solo un texto: la clave a recordar es que todo es una caja.
+
+## Contenido y tamaño
+
+Las cajas tienen un comportamiento diferente según su `display`, sus dimensiones establecidas y el contenido que vive dentro de ellas. Este contenido podría ser incluso más cajas, generadas por elementos secundarios, o por contenido de texto sin formato. De cualquier manera, este contenido afectará la forma predeterminada del tamaño de la caja.
+
+Puedes controlar esto mediante el **tamaño extrínseco**, o puedes seguir permitiendo que el navegador tome decisiones por ti en función del tamaño del contenido, utilizando el **tamaño intrínseco**.
+
+Veamos rápidamente la diferencia, usando una demostración como apoyo.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' } %} <figcaption> Ten en cuenta que cuando la caja usa un tamaño extrínseco, hay un límite de la cantidad de contenido que puede agregar antes de que se desborde de los límites de la caja. Esto hace que la palabra "awesome" se desborde.</figcaption></figure>
+
+La demostración tiene las palabras, "CSS is awesome" en una caja con dimensiones fijas y un borde grueso. La caja tiene un ancho, por lo que tiene un tamaño extrínseco, el cual controla el tamaño de su contenido hijo. Sin embargo, el problema con esto es que la palabra "awesome" es demasiado grande para la caja, por lo que se desborda fuera del **borde de la caja** del elemento padre (más sobre esto más adelante en la lección). Una forma de evitar este desbordamiento es permitir que la caja tenga un tamaño intrínseco ya sea removiendo el tamaño del ancho o, en este caso, estableciendo el `width` en `min-content`. El `min-content` le dice a la caja que sea tan ancha como el ancho mínimo intrínseco de su contenido (la palabra "awesome"). Esto permite que la caja se ajuste perfectamente a "CSS is awesome".
+
+Veamos algo más complejo para ver el impacto de diferentes tamaños en el contenido real:
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+Activa y desactiva el tamaño intrínseco para ver cómo puedes obtener más control con el tamaño extrínseco y dejar que el contenido tenga más control con el tamaño intrínseco. Para ver el efecto que tiene el tamaño intrínseco y extrínseco, agrega algunas oraciones de contenido a la tarjeta. Cuando este elemento usa un tamaño extrínseco, hay un límite de la cantidad de contenido que puedes agregar antes de que se desborde de los límites del elemento, pero este no es el caso cuando el tamaño intrínseco está activado.
+
+De forma predeterminada, este elemento tiene un `width` y un `height` ambos de `400px`. Estas dimensiones dan límites estrictos a todo lo que se encuentre adentro del elemento, que se respetará a menos que el contenido sea demasiado grande para la caja, en cuyo caso se producirá un desbordamiento visible. Puedes ver esto en acción cambiando el contenido de la leyenda, debajo de la imagen de la flor, a algo que exceda la altura de la caja, que son unas pocas líneas de contenido.
+
+{% Aside "key-term" %} Cuando el contenido es demasiado grande para la caja en la que se encuentra, lo llamamos desbordamiento. Puedes definir cómo un elemento maneja el contenido de desbordamiento, utilizando la propiedad de `overflow`. {% endAside %}
+
+Cuando cambia al tamaño intrínseco, deja que el navegador tome decisiones por ti, según el tamaño del contenido de la caja. Es mucho más difícil que exista un desbordamiento con el tamaño intrínseco porque nuestra caja cambiará el tamaño con su contenido, en lugar de intentar ajustar el tamaño del contenido. Es importante recordar que este es el comportamiento flexible y predeterminado de un navegador. Aunque el tamaño extrínseco brinda más control sobre la superficie, el tamaño intrínseco, la mayoría del tiempo, proporciona la mayor flexibilidad.
+
+## Las áreas del modelo de caja
+
+Las cajas se componen de áreas de modelo de caja distintas que realizan un trabajo específico.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="Un diagrama que muestra las cuatro áreas principales del modelo de caja: caja de contenido, caja de padding, caja de borde y caja de margen", width="800", height="547" %} <figcaption> Las cuatro áreas principales del modelo de caja: caja de contenido, caja de padding, caja de borde y caja de margen.</figcaption></figure>
+
+Inicias con la **caja de contenido**, que es la área en la que reside el contenido. Como aprendiste antes: este contenido puede controlar el tamaño de su elemento principal, por lo que suele ser el área de tamaño más variable.
+
+La **caja de padding (relleno)** rodea la caja de contenido y es el espacio creado por la propiedad de [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding). Debido a que el padding está dentro de la caja, el fondo de la caja será visible en el espacio que crea. Si nuestra caja tiene reglas de desbordamiento establecidas, como `overflow: auto` o `overflow: scroll`, las barras de desplazamiento ocuparán este espacio también.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+La **caja de borde** rodea la caja de padding y su espacio está ocupado por el valor del `border`. La caja de borde son los límites de su caja y el **filo del borde** es el límite de lo que puedes ver visualmente. La propiedad de <a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a> se usa para enmarcar visualmente un elemento.
+
+El área final, la **caja de margen**, es el espacio alrededor de tu caja, definida por la regla de `margin`. Propiedades como el [`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) y [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) ocupan este espacio porque están pintadas por encima de los elementos, por lo que no afectan el tamaño de nuestra caja. Puedes tener un `outline-width` de `200px` en nuestra caja y todo lo que está dentro e incluido la caja de borde sería exactamente del mismo tamaño.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea' } %}</figure>
+
+## Una analogía útil
+
+El modelo de caja es complejo de entender, así que recapitulemos lo que has aprendido con una analogía.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="Tres fotos con marcos", width="800", height="562" %}</figure>
+
+En este diagrama, tienes tres fotos con marcos, montados en una pared, uno al lado del otro. El diagrama tiene etiquetas que asocian elementos del marco con el modelo de caja.
+
+Para descomponer esta analogía:
+
+- La caja de contenido es la obra de arte.
+- La caja de padding es el blanco mate, entre el marco y la obra de arte.
+- La caja de borde es el marco, que proporciona un borde literal para la obra de arte.
+- La caja de margen es el espacio entre cada cuadro.
+- La sombra ocupa el mismo espacio que la caja de margen.
+
+## Depurando el modelo de caja
+
+Browser DevTools proporciona una visualización de los cálculos del modelo de caja de una caja seleccionada, lo que puede ayudarte a comprender cómo funciona el modelo de caja y, lo que es más importante, cómo está afectando el sitio web en el que estas trabajando.
+
+Prueba lo siguiente en tu propio navegador:
+
+1. [Abre DevTools](https://developer.chrome.com/docs/devtools/open/)
+2. [Selecciona un elemento](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. Muestra el depurador del modelo de caja
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## Controlando el modelo de caja
+
+Para comprender cómo controlar el modelo de caja, primero debes comprender lo que sucede en tu navegador.
+
+Cada navegador aplica una hoja de estilo de agente de usuario a los documentos HTML. El CSS utilizado varía entre cada navegador, pero proporciona valores predeterminados sensibles para facilitar la lectura del contenido. Estos definen cómo deben verse y comportarse los elementos si no hay un CSS definido. En los estilos de agente de usuario es donde también se establece el `display` por defecto para la caja. Por ejemplo, si estamos en un flujo normal, el valor `display` por defecto de un elemento `<div>` es `block`, el valor `display` por defecto de `<li>` de `list-item` y el valor `display` por defecto de `<span>` es `inline`.
+
+Un `inline` tiene un margen de bloque, pero otros elementos no lo respetarán. Utiliza `inline-block` y esos elementos respetarán el margen del bloque, mientras que el elemento mantiene la mayoría de los mismos comportamientos que tenía como elemento en `inline`. Un `block`, por defecto, llenará el **espacio inline** disponible, mientras que los elementos de `inline` e `inline-block` solo serán tan grandes como su contenido.
+
+Además de comprender cómo los estilos de agente de usuario afectan a cada caja, también debes comprender el `box-sizing`, que le indica a nuestra caja cómo calcular su tamaño de la caja. Por defecto, todos los elementos tienen el siguiente estilo de agente de usuario: `box-sizing: content-box;`.
+
+Utilizar `content-box` como valor de `box-sizing` significa que cuando estableces dimensiones, como el `width` y el `height`, se aplicarán al **cuadro de contenido**. Si luego configuras el `padding` y el `border`, estos valores se agregarán al tamaño de la caja de contenido.
+
+{% Assessment 'box-model' %}
+
+El ancho real de esta caja será de 260px. Como el CSS usa el predeterminado `box-sizing: content-box`, el ancho aplicado es el ancho del contenido, el `padding` y el `border` en ambos lados se agregan a eso. Entonces, 200px para el contenido + 40px de padding + 20px de borde hace un ancho visible total de 260px.
+
+Sin embargo, *puedes* controlar esto haciendo la siguiente modificación para usar el modelo de caja alternativo, `border-box`:
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+Este modelo de caja alternativo le dice a CSS que aplique el `width`  la caja de borde en lugar de la caja de contenido. Esto significa que nuestro `border` y `padding` se *empujan hacia adentro* y, como resultado, cuando configuras `.my-box` para que tenga `200px` ancho: en realidad se renderiza a `200px` ancho.
+
+Mira cómo funciona esto en la siguiente demostración interactiva. Observa que cuando cambia el `box-sizing` se muestra, a través de un fondo azul, qué CSS se está aplicando *dentro de* nuestro cuadro.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+Esta regla CSS selecciona todos los elementos del documento y todos los `::before` y `::after` y aplica `box-sizing: border-box`. Esto significa que ahora todos los elementos tendrán este modelo de caja alternativo.
+
+Debido a que el modelo de caja alternativo puede ser más predecible, los desarrolladores a menudo agregan esta regla a resets y normalizers, [como lo es este](https://piccalil.li/blog/a-modern-css-reset).
+
+## Recursos
+
+- [Introducción al modelo de caja](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [¿Qué son las herramientas para desarrolladores de los navegadores?](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### Hojas de estilo del agente de usuario
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/es/learn/css/css.11tydata.js b/src/site/content/es/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/es/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/es/learn/css/flexbox/conclusion.assess.yml b/src/site/content/es/learn/css/flexbox/conclusion.assess.yml
new file mode 100644
index 00000000000..77e1b54b62a
--- /dev/null
+++ b/src/site/content/es/learn/css/flexbox/conclusion.assess.yml
@@ -0,0 +1,61 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To vertically align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Nice"
+      - content: "justify keywords"
+        rationale: "Sorry"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: To horizonally align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Sorry"
+      - content: "justify keywords"
+        rationale: "Nice"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: |
+      By default, flex items are aligned to `stretch`. If you want content
+      size used for child items, which of the following styles would you use?
+    options:
+      - content: "`justify-content: flex-start`"
+        rationale: "The justify property is for horizontal alignment, not
+        vertical."
+      - content: "`align-content: start`"
+        rationale: "`content` aligns flex lines, not child item alignment."
+      - content: "`height: auto`"
+        rationale: "This will have no effect."
+      - content: "`align-items: flex-start`"
+        rationale: "Yes, we want to vertically align them to the 'top' or start,
+        which removes the default stretch value and instead uses the content
+        height."
diff --git a/src/site/content/es/learn/css/flexbox/flex.assess.yml b/src/site/content/es/learn/css/flexbox/flex.assess.yml
new file mode 100644
index 00000000000..a264d9e9016
--- /dev/null
+++ b/src/site/content/es/learn/css/flexbox/flex.assess.yml
@@ -0,0 +1,40 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The default `flex-direction` is
+    options:
+      - content: "`row`"
+        rationale: "By default, flexbox will fit items into a row, lining them
+        up at the start. With wrapping turned on, it will continue creating rows
+        for children to flow within."
+      - content: "`column`"
+        rationale: "Setting flex-direction to column is a great way to stack
+        elements, but it is not the default value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default, a flex container wraps children.
+    options:
+      - content: "true"
+        rationale: "Wrapping must be enabled."
+      - content: "false"
+        rationale: "Use `flex-wrap: wrap` with `display: flex` to wrap children"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: A flex child item appears squished, which flex property helps mitigate this?
+    options:
+      - content: "`flex-grow`"
+        rationale: "This property describes if elements can grow beyond a basis
+        size, not how it should behave under a basis."
+      - content: "`flex-shrink`"
+        rationale: "Yes, this property describes how to handle sizing if the
+        width is going below the basis."
+      - content: "`flex-basis`"
+        rationale: "This provides the starting point of sizing, but not how to
+        handle sizing scenarios where width goes below basis, like in a squished
+        scenario."
diff --git a/src/site/content/es/learn/css/flexbox/index.md b/src/site/content/es/learn/css/flexbox/index.md
new file mode 100644
index 00000000000..55c49c29d46
--- /dev/null
+++ b/src/site/content/es/learn/css/flexbox/index.md
@@ -0,0 +1,376 @@
+---
+title: Flexbox
+description: |-
+  Flexbox es un mecanismo de distribución diseñado para distribuir grupos de elementos en una dimensión.
+  Aprenda a usarlo en este módulo.
+audio:
+  title: 'El Podcast de CSS   - 010: Flexbox'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-21
+---
+
+Un patrón de diseño que puede ser complicado en el diseño responsivo es una barra lateral que se alinea con algunos contenidos. Donde hay espacio en la ventana gráfica, este patrón funciona muy bien, pero donde el espacio se condensa, esta distribución rígida puede volverse problemática.
+
+{% Codepen { user: 'web-dot-dev', id: 'poRENWv', height: 420 } %}
+
+El modelo de distribución de caja flexible (flexbox) es un modelo de distribución pensado para contenido unidimensional. Se destaca por tomar varios elementos que tienen diferentes tamaños y devolver la mejor distribución para estos.
+
+Este es el modelo de distribución ideal para este patrón de barra lateral. Flexbox no solo ayuda a colocar la barra lateral y el contenido en línea, sino que, donde no queda suficiente espacio, la barra lateral se dividirá en una nueva línea. En lugar de establecer dimensiones rígidas para que las siga el navegador, con flexbox, puede ofrecer límites flexibles para indicar cómo podría mostrarse el contenido.
+
+{% Codepen { user: 'web-dot-dev', id: 'xxgERMp', height: 400 } %}
+
+## ¿Qué se puede hacer con una distribución flex?
+
+Las distribuciones flex tienen las siguientes características, que podrá explorar en esta guía.
+
+- Pueden mostrarse como una fila o una columna.
+- Respetan el modo de escritura del documento.
+- Son de una sola línea por default, pero se les puede pedir que se ajusten a varias líneas.
+- Los elementos en el diseño se pueden reordenar visualmente, sin considerar su orden en el DOM.
+- El espacio se puede distribuir dentro de los elementos, por lo que se vuelven más grandes y más pequeños según el espacio disponible en su padre.
+- El espacio se puede distribuir alrededor de los elementos y las líneas flex en una distribución envolvente, utilizando las propiedades Box Alignment.
+- Los elementos en sí se pueden alinear en el eje transversal.
+
+## El eje principal y el eje transversal
+
+La clave para comprender flexbox es comprender el concepto de eje principal y eje transversal. El eje principal es el que establece su propiedad `flex-direction`. Si esa es `row`, su eje principal está a lo largo de la fila, si es `column` su eje principal está a lo largo de la columna.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/xKtf0cHRw0xQyiyYuuyz.svg", alt="Tres cuadros uno al lado del otro con una flecha, apuntando de izquierda a derecha. La flecha está etiquetada como Eje principal",width="800", height="320" %}</figure>
+
+Los elementos flex se mueven como un grupo en el eje principal. Recuerde: tenemos un montón de cosas y estamos tratando de obtener el mejor diseño para ellas como grupo.
+
+El eje transversal corre en la otra dirección al eje principal, por lo que si `flex-direction` es `row` el eje transversal corre a lo largo de la columna.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/5wCsZcBmK5L33LS7nOmP.svg", alt="Tres cuadros de diferentes alturas, uno al lado del otro con una flecha, apuntando de izquierda a derecha. La flecha está etiquetada como eje principal. Hay otra flecha apuntando de arriba a abajo. Esta tiene la etiqueta Eje transversal", width="800", height="320" %}</figure>
+
+Puede hacer dos cosas en el eje transversal. Puede mover los elementos individualmente o en grupo para que se alineen entre sí y con el contenedor flex. Además, si ha envuelto líneas flex, puede tratar esas líneas como un grupo para controlar cómo se asigna el espacio a ellas. Verá cómo funciona todo esto en la práctica a lo largo de esta guía, por ahora solo tenga en cuenta que el eje principal sigue su `flex-direction`.
+
+## Creando un contenedor flex
+
+Veamos cómo se comporta flexbox tomando un grupo de elementos de diferentes tamaños y usando flexbox para distribuirlos.
+
+```html
+<div class="container" id="container">
+  <div>One</div>
+  <div>Item two</div>
+  <div>The item we will refer to as three</div>
+</div>
+```
+
+Para usar flexbox, debe declarar que desea usar un contexto de formato flex y no una distribución de bloque y en línea regular. Haga esto cambiando el valor de la propiedad `display` a `flex`.
+
+```css
+.container {
+  display: flex;
+}
+```
+
+Como aprendió en la [guía de diseño,](/learn/css/layout) esto le dará una caja a nivel de bloque, con elementos secundarios flex. Los elementos flex comienzan inmediatamente a mostrar algún comportamiento de flexbox, utilizando sus **valores iniciales**.
+
+{% Aside %} Todas las propiedades CSS tienen valores iniciales que controlan cómo se comportan inicialment cuando no ha aplicado ningún CSS para cambiar ese comportamiento inicial. Los hijos de nuestro contenedor flex se convierten en elementos flex tan pronto como su padre recibe `display: flex`, por lo que estos valores iniciales quieren decir que comenzamos a ver algún comportamiento tipo flexbox. {% endAside %}
+
+Los valores iniciales significan que:
+
+- Los elementos se muestran como una fila.
+- No envuelven.
+- No crecen para llenar el contenedor.
+- Se alinean al comienzo del contenedor.
+
+## Controlar la dirección de los elementos
+
+Aunque todavía no ha agregado una propiedad `flex-direction`, los elementos se muestran como una fila porque el valor inicial de `flex-direction` es `row`. Si desea una fila, no es necesario que agregue la propiedad. Para cambiar la dirección, agregue la propiedad y uno de los cuatro valores:
+
+- `row` : los elementos se distribuyen como una fila.
+- `row-reverse:` los elementos se colocan como una fila desde el final del contenedor flex.
+- `column` : los elementos se distribuyen como una columna.
+- `column-reverse` : los elementos se distribuyen como una columna desde el final del contenedor flex.
+
+Puede probar todos los valores utilizando nuestro grupo de elementos en la demostración a continuación.
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgKNXq' } %}
+
+### Invertir el flujo de elementos y la accesibilidad
+
+Debe tener cuidado al usar cualquier propiedad que reordene la presentación visual de forma diferente a cómo se ordenan las cosas en el documento HTML, ya que puede afectar negativamente la accesibilidad. Los valores `row-reverse` y `column-reverse` son un buen ejemplo. El reordenamiento solo ocurre para el orden visual, no para el orden lógico. Es importante entender esto, ya que el orden lógico es en el que un lector de pantalla leerá el contenido y cualquiera que navegue usando el teclado lo seguirá.
+
+Puede ver en el siguiente video cómo, en una distribución de columna invertida, la navegación por tab entre enlaces se vuelve desconectada ya que la navegación del teclado sigue al DOM, no a la representación visual.
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4", autoplay=true, controls=true %}
+
+Cualquier cosa que pueda cambiar el orden de los elementos en flexbox o cuadrícula puede causar este problema. Por lo tanto, cualquier reordenamiento debe incluir pruebas exhaustivas para comprobar que no hará que su sitio sea difícil de usar para algunas personas.
+
+Para más información, ver:
+
+- [Reordenamiento de contenido](/content-reordering/)
+- [Flexbox y la navegación desconectada por teclado](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+
+### Modos de escritura y dirección
+
+Los elementos flex se presentan como una fila de forma predeterminada. Una fila fluye en la dirección de las oraciones en su modo de escritura y en la dirección del script. Esto significa que si está trabajando en árabe, que tiene una dirección de escritura de derecha a izquierda (rtl), los elementos se alinearán a la derecha. El orden de tabulación también comenzaría a la derecha, ya que esta es la forma en que se leen las oraciones en árabe.
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZgwWN' } %}
+
+Si está trabajando con un modo de escritura vertical, como algunos tipos de letra japoneses, entonces la fila fluirá verticalmente, de arriba a abajo. Intente cambiar la `flex-direction` en esta demostración que utiliza un modo de escritura vertical.
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRaPXX', height: 600 } %}
+
+Por lo tanto, la forma en que se comportan los elementos flex de forma predeterminada está vinculada al modo de escritura del documento. La mayoría de los tutoriales están escritos en inglés u otro modo de escritura horizontal de izquierda a derecha. Esto podría malinterpretarse en que los elementos flex se alinean a la **izquierda** y fluyen **horizontalmente**.
+
+Teniendo que considerar los ejes principal y transversal más el modo de escritura, podría ser más fácil de entender si hablamos de **inicio** y **final** en lugar de arriba, abajo, izquierda y derecha en flexbox. Cada eje tiene un inicio y un final. El inicio del eje principal se conoce como **inicio principal**. Entonces, nuestros elementos flex se alinean inicialmente desde el inicio principal. El final de ese eje es el **final principal**. El inicio del eje transversal es **inicio transversal** y el final es **final transversal**.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg", alt="Un diagrama etiquetado de los términos anteriores", width="800", height="382" %}
+
+## Elementos flex envolventes
+
+El valor inicial de la propiedad `flex-wrap` es `nowrap`. Esto significa que si no hay suficiente espacio en el contenedor, los elementos se desbordarán.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/VTUdLS9PeBziBvbOSc4q.jpg", alt="Un contenedor flex con nueve elementos dentro, los elementos se han reducido, por lo que una palabra está en una línea, pero no hay suficiente espacio para mostrarlos uno al lado del otro, por lo que los elementos flex se han extendido fuera de la caja del contenedor. ", width="800", height="282" %}<figcaption> Una vez que alcancen el tamaño mínimo del contenido, los elementos flex comenzarán a desbordar su contenedor</figcaption></figure>
+
+Los elementos que se muestran usando los valores iniciales se encogerán lo más pequeño posible, hasta el tamaño `min-content`, antes de que ocurra el desbordamiento.
+
+Para hacer que los artículos sean envolventes, agregue `flex-wrap: wrap` al contenedor flex.
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'WNRGdNZ', height: 601 } %}
+
+Cuando un contenedor flex envuelve, crea múltiples **líneas flex**. En términos de distribución del espacio, cada línea actúa como un nuevo contenedor flex. Por lo tanto, si está ajustando filas, no es posible hacer que algo en la fila 2 se alinee con algo arriba en la fila 1. Esto es lo que significa que flexbox es unidimensional. Puede controlar la alineación en un eje, una fila o una columna, no ambos juntos como podemos hacer en la cuadrícula.
+
+### La notación abreviada flex-flow
+
+Puede establecer las `flex-direction` y `flex-wrap` utilizando la notación abreviada `flex-flow`. Por ejemplo, para establecer `flex-direction` en la `column` y permitir que los elementos envuelvan:
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+## Controlar el espacio dentro de los elementos flex
+
+Suponiendo que nuestro contenedor tiene más espacio del necesario para mostrar los elementos, los elementos se alinean al principio y no crecen para llenar el espacio. Dejan de crecer a su tamaño max-content. Esto se debe a que el valor inicial de las propiedades `flex-` es:
+
+- `flex-grow: 0` : los elementos no crecen.
+- `flex-shrink: 1` : los elementos pueden encogerse más pequeños que su `flex-basis`.
+- `flex-basis: auto` : los elementos tienen un tamaño base de `auto`.
+
+Esto se puede representar mediante un valor de palabra clave de `flex: initial`. La notación abreviada `flex`, o las notaciones extendidas de `flex-grow`, `flex-shrink` y `flex-basis` se aplican a los elementos secundarios del contenedor flex.
+
+{% Codepen { user: 'web-dot-dev', id: 'LYxRebE' } %}
+
+Para hacer que los elementos crezcan, mientras permite que los elementos grandes tengan más espacio que los pequeños, use `flex:auto`. Puede probarlo usando la demostración anterior. Esta establece las propiedades como:
+
+- `flex-grow: 1` : los elementos pueden crecer más que su `flex-basis`.
+- `flex-shrink: 1` : los elementos pueden encogerse más pequeños que su `flex-basis`.
+- `flex-basis: auto` : los elementos tienen un tamaño base de `auto`.
+
+El uso de `flex: auto` hará que los elementos terminen en tamaños diferentes, ya que el espacio que se comparte entre los elementos se comparte *después* de que cada elemento se presenta como tamaño max-content. Entonces, un elemento grande ganará más espacio. Para forzar que todos los elementos tengan un tamaño constante e ignorar el tamaño del contenido, cambie `flex:auto` a `flex: 1` en la demostración.
+
+Esto a su vez quiere decir que:
+
+- `flex-grow: 1` : los elementos pueden crecer más que su `flex-basis`.
+- `flex-shrink: 1` : los elementos pueden encogerse más pequeños que su `flex-basis`.
+- `flex-basis: 0` : los elementos tienen un tamaño base de `0`.
+
+El uso de `flex: 1` dice que todos los elementos tienen un tamaño cero, por lo tanto, todo el espacio en el contenedor flex está disponible para distribuirse. Como todos los elementos tienen un factor `flex-grow` de `1`, todos crecen por igual y el espacio se comparte por igual.
+
+{% Aside %} También hay un valor de `flex: none`, que le proporcionará elementos flex inflexibles que no crecen ni se encogen. Esto puede resultar útil si está utilizando únicamente flexbox para acceder a las propiedades de alineación, pero no desea ningún comportamiento flexible. {% endAside %}
+
+### Permitir que los artículos crezcan a diferentes ritmos
+
+No es necesario asignar a todos los artículos un factor `flex-grow` de `1`. Puede asignar a sus elementos flex diferentes factores `flex-grow`. En la siguiente demostración, el primer elemento tiene `flex: 1`, el segundo `flex: 2` y el tercero `flex: 3`. A medida que estos elementos crecen desde `0` el espacio disponible en el contenedor flex se comparte en seis. Se asigna una parte al primer artículo, dos partes al segundo, tres partes al tercero.
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWRzEz' } %}
+
+Puede hacer lo mismo desde una `flex-basis` de `auto`, aunque deberá especificar los tres valores. El primer valor es `flex-grow`, el segundo `flex-shrink` y el tercero `flex-basis`.
+
+```css
+.item1 {
+  flex: 1 1 auto;
+}
+
+.item2 {
+  flex: 2 1 auto;
+}
+```
+
+Este es un caso de uso menos común ya que la razón para usar una `flex-basis` de `auto` es permitir que el navegador descubra la distribución del espacio. Sin embargo, podría ser útil si desea hacer que un elemento crezca un poco más de lo que decide el algoritmo.
+
+## Reordenar artículos flex
+
+Los elementos en su contenedor flex se pueden reordenar usando la propiedad `order`. Esta propiedad permite ordenar los elementos en **grupos ordinales**. Los elementos se distribuyen en la dirección dictada por la dirección de `flex-direction`, los valores más bajos primero. Si más de un elemento tiene el mismo valor, se mostrará con los otros elementos con ese valor.
+
+El siguiente ejemplo demuestra este orden.
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdRXoL' } %}
+
+{% Aside 'warning' %} Usar `order` tiene los mismos problemas que los valores de `column-reverse` `row-reverse` y de `flex-direction`. Sería muy fácil crear una experiencia desconectada para algunos usuarios. No use `order` para está arreglar cosas que están fuera de orden en el documento. Si los elementos lógicamente deberían estar en un orden diferente, ¡cambie su HTML! {% endAside %}
+
+{% Assessment 'flex' %}
+
+## Descripción general de la alineación de Flexbox
+
+Flexbox trajo consigo un conjunto de propiedades para alinear elementos y distribuir el espacio entre ellos. Estas propiedades fueron tan útiles que desde entonces se han movido a su propia especificación, también las encontrará en Grid Layout. Aquí puede averiguar cómo funcionan al usae flexbox.
+
+El conjunto de propiedades se puede dividir en dos grupos. Propiedades de distribución del espacio y propiedades de alineación. Las propiedades que distribuyen el espacio son:
+
+- `justify-content` : distribución del espacio en el eje principal.
+- `align-content` : distribución del espacio en el eje transversal.
+- `place-content` : una forma abreviada de configurar las dos propiedades anteriores.
+
+Las propiedades utilizadas para la alineación en flexbox son:
+
+- `align-self` : alinea un solo elemento en el eje transversal
+- `align-items` : alinea todos los elementos como un grupo en el eje transversal
+
+Si está trabajando en el eje principal, las propiedades comienzan con `justify-`. En el eje transversal comienzan con `align-`.
+
+## Distribuir espacio en el eje principal
+
+Con el HTML utilizado anteriormente, los elementos flex dispuestos como una fila, hay espacio en el eje principal. Los artículos no son lo suficientemente grandes para llenar completamente el contenedor flex. Los elementos se alinean al comienzo del contenedor flex porque el valor inicial de `justify-content` es `flex-start`. Los elementos se alinean al principio y cualquier espacio adicional al final.
+
+Agregue la `justify-content` al contenedor flex, asígnele un valor de `flex-end`, y los elementos se alinean al final del contenedor y el espacio libre se coloca al principio.
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+
+También puede distribuir el espacio entre los elementos con `justify-content: space-between`.
+
+Pruebe algunos de los valores de la demostración y [consulte MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content) para conocer el conjunto completo de valores posibles.
+
+{% Codepen { user: 'web-dot-dev', id: 'JjERpGb' } %}
+
+{% Aside %} Para que la propiedad `justify-content` haga cualquier cosa, debe tener espacio libre en su contenedor en el eje principal. Si sus artículos llenan el eje, entonces no hay espacio para compartir, por lo que la propiedad no hará nada. {% endAside %}
+
+### Con `flex-direction: column`
+
+Si ha cambiado su `flex-direction` a `column` entonces `justify-content` funcionará en la columna. Para tener espacio libre en su contenedor cuando trabaje como una columna, debe darle a su contenedor una `height` o `block-size`. De lo contrario, no tendrá espacio libre que distribuir.
+
+Pruebe los diferentes valores, esta vez con una distribución de columna de flexbox.
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgwLgz', height: 600 } %}
+
+## Distribuir espacio entre líneas flex
+
+Con un contenedor flex envuelto, es posible que tenga espacio para distribuir en el eje transversal. En este caso, puede utilizar la `align-content` con los mismos valores que `justify-content`. A diferencia de `justify-content` que alinea los elementos a `flex-start` por defecto, el valor inicial de `align-content` es `stretch`. Agregue la propiedad `align-content` al contenedor flex para cambiar ese comportamiento predeterminado.
+
+```css
+.container {
+  align-content: center;
+}
+```
+
+Pruebe esto en la demostración. El ejemplo tiene líneas envueltas de elementos flex y el contenedor tiene un `block-size` para que tengamos algo de espacio libre.
+
+{% Codepen { user: 'web-dot-dev', id: 'poREawo' } %}
+
+### La notación abreviada de `place-content`
+
+Para configurar tanto `justify-content` como `align-content`, puede usar `place-content` con uno o dos valores. Se utilizará un único valor para ambos ejes, si especifica que el primero se utiliza para `align-content` y el segundo para `justify-content`.
+
+```css
+.container {
+  place-content: space-between;
+  /* sets both to space-between */
+}
+
+.container {
+  place-content: center flex-end;
+  /* wrapped lines on the cross axis are centered,
+  on the main axis items are aligned to the end of the flex container */
+}
+```
+
+## Alinear elementos en el eje transversal
+
+En el eje transversal también puede alinear sus elementos dentro de la línea flex usando `align-items` y `align-self`. El espacio disponible para esta alineación dependerá de la altura del contenedor flex o de la línea flex en el caso de un conjunto envuelto de elementos.
+
+El valor inicial de `align-self` es `stretch`, por lo que los elementos flex en una fila se extienden hasta la altura del elemento más alto de forma predeterminada. Para cambiar esto, agregue la propiedad `align-self` a cualquiera de sus elementos flex.
+
+```css
+.container {
+  display: flex;
+}
+
+.item1 {
+  align-self: flex-start;
+}
+```
+
+Utilice cualquiera de los siguientes valores para alinear el elemento:
+
+- `flex-start`
+- `flex-end`
+- `center`
+- `stretch`
+- `baseline`
+
+Consulte [la lista completa de valores en MDN](https://developer.mozilla.org/docs/Web/CSS/align-self).
+
+La siguiente demostración tiene una sola línea de elementos `flex-direction: row`. El último elemento define la altura del contenedor flex. El primer elemento tiene la `align-self` con un valor de `flex-start`. Intente cambiar el valor de esa propiedad para ver cómo se mueve dentro de su espacio en el eje transversal.
+
+{% Codepen { user: 'web-dot-dev', id: 'RwKGQee', height: 600 } %}
+
+La propiedad `align-self` se aplica a elementos individuales. La propiedad `align-items` se puede aplicar al contenedor flex para establecer todas las propiedades `align-self` individuales como un grupo.
+
+```css
+.container {
+  display: flex;
+  align-items: flex-start;
+}
+```
+
+En esta próxima demostración, intente cambiar el valor de `align-items` para alinear todos los elementos en el eje transversal como un grupo.
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdKmby', height: 600 } %}
+
+## ¿Por qué no hay justify-self en flexbox?
+
+Los elementos flex actúan como un grupo en el eje principal. Por tanto, no existe el concepto de separar un elemento individual de ese grupo.
+
+En el diseño de cuadrícula, las propiedades `justify-self` y `justify-items` funcionan en el eje en línea para alinear los elementos en ese eje dentro de su área de cuadrícula. Debido a la forma en que los diseños flex tratan los elementos como un grupo, estas propiedades no se implementan en un contexto flex.
+
+Vale la pena saber que flexbox funciona muy bien con márgenes automáticos. Si necesita separar un elemento de un grupo, o separar el grupo en dos grupos, puede aplicar un margen para ello. En el ejemplo siguiente, el último elemento tiene un margen izquierdo de `auto`. El margen automático absorbe todo el espacio en la dirección en que se aplica. Esto significa que empuja el elemento hacia la derecha, dividiendo así los grupos.
+
+{% Codepen { user: 'web-dot-dev', id: 'poRELbR' } %}
+
+## Cómo centrar un elemento vertical y horizontalmente
+
+Las propiedades de alineación se pueden utilizar para centrar un elemento dentro de otro cuadro. La propiedad `justify-content` alinea el elemento en el eje principal, que es la fila. La propiedad `align-items` en el eje transversal.
+
+```css
+.container {
+  width: 400px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+{% Aside %} En el futuro, es posible que podamos hacer esta alineación sin necesidad de convertir al padre en un contenedor flex. Las propiedades de alineación se especifican para la distribución de bloques y en línea. En la actualidad, ningún navegador los ha implementado. Sin embargo, cambiar a un contexto de formato flex le da acceso a las propiedades. Si necesita alinear algo, es una excelente manera de hacerlo. {% endAside %}
+
+{% Assessment 'conclusion' %}
+
+## Recursos
+
+- [El diseño de Flexible Box CSS de MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) incluye una serie de guías detalladas con ejemplos.
+- [CSS Tricks: Guía de Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Qué sucede cuando crea un contenedor Flexbox Flex](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [Todo lo que necesita saber sobre la alineación en Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [¿Qué tan grande es esa Flexible Box?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [Casos de uso para Flexbox](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
diff --git a/src/site/content/es/learn/css/grid/grid.assess.yml b/src/site/content/es/learn/css/grid/grid.assess.yml
new file mode 100644
index 00000000000..95fff379b88
--- /dev/null
+++ b/src/site/content/es/learn/css/grid/grid.assess.yml
@@ -0,0 +1,95 @@
+setLeader: Test your knowledge of grid
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,5,6"
+    stem: Which of the following are CSS grid terms?
+    options:
+      - content: "lines"
+        rationale: "The grid is divided by these horizontal and vertically
+        running separators."
+      - content: "circles"
+        rationale: "Sorry, no concepts of circles in CSS grid."
+      - content: "cells"
+        rationale: "A single intersection of a row and a column creates a grid cell."
+      - content: "areas"
+        rationale: "Multiple cells together."
+      - content: "trains"
+        rationale: "Sorry, no concepts of trains in CSS grid."
+      - content: "gaps"
+        rationale: "The space between cells."
+      - content: "tracks"
+        rationale: "A single row or a column is a track in the grid."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      main {
+        display: grid;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the default layout direction of a grid?
+    options:
+      - content: Rows
+        rationale: "Without any columns defined, grid children lay out in the
+        block direction as they normally would."
+      - content: Columns
+        rationale: "If `grid-auto-flow: column` was present, than a grid would
+        layout as columns."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the difference between `auto-fit` and `auto-fill`?
+    options:
+      - content: "`auto-fit` will stretch cells to fit the container, where
+      `auto-fill` won't."
+        rationale: "`auto-fill` places as many items into the template as
+        possible, without stretching. Fit **makes** them fit."
+      - content: "`auto-fit` will stretch a container to fit the children, where
+      `auto-fill` makes the children fit to the container."
+        rationale: "This is not how these properties behave."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is `min-content`?
+    options:
+      - content: "Same as 0%"
+        rationale: "0% is a relative value of the parent box, while
+        `min-content` is relative to the words and images in the box."
+      - content: "The smallest letter"
+        rationale: "While there is a smallest letter, letters are not what
+        `min-content` is refering to."
+      - content: "The longest word or image."
+        rationale: "In the phrase 'CSS is awesome', the word awesome would be
+        the `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is `max-content`?
+    options:
+      - content: "The longest sentence or biggest image."
+        rationale: "This is the maximum size the content of the box is asking
+        for or has specified. It's a sentence as it's widest or an image at it's
+        widest."
+      - content: "The longest letter."
+        rationale: "While there is a longest letter, letters are not what
+        `max-content` is refering to."
+      - content: "The longest word."
+        rationale: "The longest word is `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is auto-placement?
+    options:
+      - content: "When grid takes the child items and places them in the best
+      order based on browser heuristics."
+        rationale: "No browser will change your content order, only your own
+        styles will do that."
+      - content: "When grid child items have been given a `grid-area` and are
+      placed on that cell."
+        rationale: "That's explicit placement not auto placement."
+      - content: "When unassigned grid items are placed next in a layout
+      template."
+        rationale: "Grid items without an explicit area will be placed in the next available grid cell"
diff --git a/src/site/content/es/learn/css/grid/index.md b/src/site/content/es/learn/css/grid/index.md
new file mode 100644
index 00000000000..60b4f4feb50
--- /dev/null
+++ b/src/site/content/es/learn/css/grid/index.md
@@ -0,0 +1,516 @@
+---
+title: Grid (cuadrícula)
+description: |2-
+
+  La disposición en cuadrícula CSS proporciona un sistema de distribución bidimensional,
+  controlando la distribución en filas y columnas.
+  En este módulo, descubra todo lo que la cuadrícula tiene para ofrecer.
+audio:
+  title: 'El Podcast de CSS   - 011: Grid'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_011_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-29
+---
+
+Una disposición muy común en el diseño web es la de cabecera, barra lateral, cuerpo y pie de página.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/tj7KmP72RKkffGQRswpA.svg", alt="Un encabezado con logotipo y navegación con una barra lateral y un área de contenido que incluye un artículo", width="800", height="531" %}
+
+A lo largo de los años, ha habido muchos métodos para resolver esta distribución, pero con la cuadrícula CSS, no solo es relativamente sencillo, sino que tiene muchas opciones. La cuadrícula (Grid) es excepcionalmente útil para combinar el control que proporciona el tamaño extrínseco con la flexibilidad del tamaño intrínseco, lo que lo hace ideal para este tipo de disposición. Esto se debe a que la cuadrícula es un método de distribución diseñado para contenido bidimensional. Es decir, colocar las cosas en filas y columnas al mismo tiempo.
+
+Al crear una distribución de cuadrícula, usted define una cuadrícula con filas y columnas. Luego, coloca elementos en esa cuadrícula o permite que el navegador los coloque automáticamente en las celdas que ha creado. El tema de la cuadrícula es muy extenso, pero con una descripción general de lo que tiene disponible, pronto estará haciendo diseños de cuadrícula.
+
+## Descripción general
+
+Entonces, ¿qué puede hacer con la cuadrícula? Las distribuciones de cuadrícula tienen las siguientes características. Aprenderá sobre todos ellos en esta guía.
+
+1. Una cuadrícula se puede definir con filas y columnas. Puede elegir cómo dimensionar estas bandas de filas y columnas o pueden reaccionar al tamaño del contenido.
+2. Los hijos directos (elementos secundarios) del contenedor de la cuadrícula se colocarán automáticamente en esta cuadrícula.
+3. O puede colocar los elementos en la ubicación precisa que desee.
+4. Las líneas y áreas de la cuadrícula se pueden nombrar para facilitar la colocación.
+5. El espacio libre en el contenedor de cuadrícula se puede distribuir entre las bandas.
+6. Los elementos de la cuadrícula se pueden alinear dentro de su área.
+
+## Terminología de cuadrícula
+
+El elemento Grid viene con un montón de terminología nueva, ya que es la primera vez que CSS tiene un sistema de distribución real.
+
+### Líneas de cuadrícula
+
+Una cuadrícula está formada por líneas, que corren horizontal y verticalmente. Si su cuadrícula tiene cuatro columnas, tendrá cinco líneas de columna, incluida la que está después de la última columna.
+
+Las líneas se numeran empezando por 1, y la numeración sigue el modo de escritura y la dirección del script del componente. Esto significa que la línea de la columna 1 estará a la izquierda en un idioma de izquierda a derecha como el inglés y a la derecha en un idioma de derecha a izquierda como el árabe.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg", alt="Representación de diagrama de líneas de cuadrícula", width="800", height="434" %}
+
+### Bandas de cuadrícula
+
+Una banda es el espacio entre dos líneas de cuadrícula. Una banda de fila está entre dos líneas de fila y una banda de columna entre dos líneas de columna. Cuando creamos nuestra cuadrícula, creamos estas bandas asignándoles un tamaño.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg", alt="Representación de diagrama de una banda de cuadrícula", width="800", height="434" %}
+
+### Celda de cuadrícula
+
+Una celda de cuadrícula es el espacio más pequeño en una cuadrícula definida por la intersección de bandas de fila y columna. Es como una celda de una tabla o una celda en una hoja de cálculo. Si define una cuadrícula y no coloca ninguno de los elementos, se colocarán automáticamente un elemento en cada celda de cuadrícula definida.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg", alt="Representación de diagrama de una celda de cuadrícula", width="800", height="434" %}
+
+### Área de cuadrícula
+
+Varias celdas de la cuadrícula juntas. Las áreas de cuadrícula se crean haciendo que un elemento se extienda por varias bandas.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg", alt="Representación de diagrama de un área de cuadrícula", width="800", height="434" %}
+
+### Brechas (Gaps)
+
+Una cuneta o callejón entre vías. A efectos de dimensionamiento, estos actúan como una banda normal. No puede colocar contenido en uuna brecha, pero puede distribuir elementos de cuadrícula a través de él.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg", alt="Representación de diagrama de una cuadrícula con brechas", width="800", height="434" %}
+
+### Contenedor de cuadrícula
+
+El elemento HTML al que se le aplicó el `display: grid` y, por lo tanto, crea un nuevo contexto de formato de cuadrícula para los hijos directos.
+
+```css
+.container {
+  display: grid;
+}
+```
+
+### Elemento de cuadrícula
+
+Un elemento de la cuadrícula es un elemento que es un hijo directo del contenedor de la cuadrícula.
+
+```html/1-3
+<div class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+```
+
+## Filas y columnas
+
+Para crear una cuadrícula básica, puede definir una con tres bandas de columna, dos bandas de fila y una brecha de 10 píxeles entre bandas de la siguiente manera.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 5em 100px 30%;
+    grid-template-rows: 200px auto;
+    gap: 10px;
+}
+```
+
+Esta cuadrícula demuestra muchas de las cosas descritas en la sección de terminología. Tiene tres bandas de columna. Cada banda usa una unidad de longitud diferente. Tiene dos bandas de fila, una que usa una unidad de longitud y la otra automática. Cuando se utiliza como un tamaño automático de banda, se puede pensar que es tan grande como el contenido. Las bandas tienen un tamaño automático de forma predeterminada.
+
+Si el elemento con una clase de `.container` tiene elementos hijos, se colocarán inmediatamente en esta cuadrícula. Puede ver esto en acción en la siguiente demostración.
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdbrzr' } %}
+
+Las herramientas de desarrollo de Chrome Grid pueden ayudarlo a comprender las distintas partes de la cuadrícula.
+
+Abra la [demostración](https://codepen.io/web-dot-dev/full/NWdbrzr) en Chrome. Inspeccione el elemento con el fondo gris, que tiene un ID de `container`. Resalte la cuadrícula seleccionando la insignia de la cuadrícula en el DOM, junto al elemento `.container`. Dentro de la pestaña Diseño, seleccione **Mostrar números de línea** en el menú desplegable para ver los números de línea en su cuadrícula.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/YxpjWBUDsqQB2fr6rzU3.jpg", alt="Como se describe en el título y las instrucciones", width="800", height="449" %}<figcaption> Una cuadrícula resaltada en Chrome DevTools que muestra números de línea, celdas y bandas.</figcaption></figure>
+
+### Palabras clave de tamaño intrínsecas
+
+Además de las dimensiones de longitud y porcentaje, como se describe en la sección sobre [unidades de tamaño](/learn/css/sizing), las bandas de cuadrícula pueden usar palabras clave de tamaño intrínsecas. Estas palabras clave se definen en la especificación Box Sizing y agregan métodos adicionales de dimensionamiento de cajas en CSS, no solo bandas de cuadrícula.
+
+- `min-content`
+- `max-content`
+- `fit-content()`
+
+La palabra clave [`min-content`](https://developer.mozilla.org/docs/Web/CSS/min-content) hará que una banda sea lo más pequeña posible sin que su contenido se desborde. Cambiar el diseño de la cuadrícula de ejemplo para tener tres bandas de columna, todas con `min-content`, significará que se volverán tan estrechas como la palabra más larga de la banda.
+
+La palabra clave [`max-content`](https://developer.mozilla.org/docs/Web/CSS/max-content) tiene el efecto contrario. La banda se volverá lo suficientemente ancha para que todo el contenido se muestre en una cadena larga e ininterrumpida. Esto puede causar desbordamientos ya que la cadena no será envolvente.
+
+La función [`fit-content()`](https://developer.mozilla.org/docs/Web/CSS/fit-content()) actúa como `max-content` al principio. Sin embargo, una vez que la banda alcanza el tamaño que usted pasa a la función, el contenido comienza a ajustarse. Por lo tanto, `fit-content(10em)` creará una banda de menos de 10em, si el tamaño `max-content` es inferior a 10em, pero nunca mayor de 10em.
+
+En la siguiente demostración, pruebe las diferentes palabras clave intrínsecas de tamaño cambiando el tamaño de las bandas de la cuadrícula.
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRqNgL', height: 600 } %}
+
+{% Aside %} Puede ver en esta demostración que cuando se usa auto, las columnas de la cuadrícula se estiran para llenar el contenedor. Las bandas de tamaño auto se estirarán de forma predeterminada si hay espacio adicional en el contenedor de la cuadrícula. {% endAside %}
+
+### La unidad `fr`
+
+Tenemos dimensiones de longitud existentes, porcentajes y también estas nuevas palabras clave. También hay un método de dimensionamiento especial que solo funciona en el diseño de cuadrícula. Esta es la unidad `fr`, una longitud flexible que describe una parte del espacio disponible en el contenedor de cuadrícula.
+
+La unidad `fr` funciona de manera similar a usar `flex: auto` en flexbox. Distribuye el espacio una vez dispuestos los elementos. Por lo tanto, para tener tres columnas que tengan la misma proporción de espacio disponible:
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+```
+
+Como la unidad fr comparte el espacio disponible, se puede combinar con una brecha de tamaño fijo o bandas de tamaño fijo. Para tener un componente con un elemento de tamaño fijo y la segunda banda ocupando el espacio que queda, puede usar una lista de bandas como `grid-template-columns: 200px 1fr`.
+
+El uso de diferentes valores para la unidad fr compartirá el espacio en proporción. Los valores más grandes obtienen más espacio libre. En la siguiente demostración, cambie el valor de la tercera banda.
+
+{% Codepen { user: 'web-dot-dev', id: 'vYgyXNE', height: 600 } %}
+
+### La función `minmax()`
+
+Esta función significa que puede establecer un tamaño mínimo y máximo para una banda. Esto puede resultar muy útil. Si tomamos el ejemplo de la unidad `fr` antedicha que distribuye el espacio restante, podría escribirse usando [`minmax()`](https://developer.mozilla.org/docs/Web/CSS/minmax()) como `minmax(auto, 1fr)`. Grid analiza el tamaño intrínseco del contenido y luego distribuye el espacio disponible después de darle suficiente espacio al contenido. Esto significa que es posible que no obtenga bandas con una parte igual de todo el espacio disponible en el contenedor de la cuadrícula.
+
+Para forzar que una banda ocupe una parte igual del espacio en el contenedor de la cuadrícula menos las brechas, use minmax. Reemplace `1fr` como tamaño de banda con `minmax(0, 1fr)`. Esto hace que el tamaño mínimo de la banda sea 0 y no el tamaño mínimo del contenido. Grid tomará todo el tamaño disponible en el contenedor, deducirá el tamaño necesario para cualquier brecha y compartirá el resto de acuerdo con sus unidades fr.
+
+### Notación `repeat()`
+
+Si desea crear una cuadrícula de bandas con 12 columnas iguales, puede usar el siguiente CSS.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr);
+}
+```
+
+O puede escribirlo usando [`repeat()`](https://developer.mozilla.org/docs/Web/CSS/repeat()):
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0,1fr));
+}
+```
+
+La función `repeat()` se puede utilizar para repetir cualquier sección de su lista de bandas. Por ejemplo, puede repetir un patrón de bandas. También puede tener algunas bandas regulares y una sección repetida.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
+}
+```
+
+### `auto-fill` y `auto-fit`
+
+Puede combinar todo lo que ha aprendido sobre el tamaño de bandas, `minmax()` y repeat, para crear un patrón útil con distribución de cuadrícula. Quizás no desee especificar el número de bandas de columna, sino que desee crear tantas como quepan en su contenedor.
+
+Esto se puede conseguir con `repeat()` y las palabras clave `auto-fill` o `auto-fit`. En la siguiente demostración, la cuadrícula creará tantas bandas de 200 píxeles como quepan en el contenedor. Abra la demostración en una nueva ventana y vea cómo cambia la cuadrícula a medida que cambia el tamaño de la ventana gráfica.
+
+{% Codepen { user: 'web-dot-dev', id: 'XWpNjgO' } %}
+
+En la demostración obtenemos tantas bandas como quepan. Sin embargo, las bandas no son flexibles. Obtendrá un espacio al final hasta que haya suficiente espacio para otra banda de 200 píxeles. Si agrega la función `minmax()`, puede solicitar tantas bandas como quepan con un tamaño mínimo de 200 píxeles y un máximo de 1fr. Grid luego presenta las bandas de 200 píxeles y el espacio sobrante se distribuye por igual entre ellos.
+
+Esto crea un diseño de respuesta bidimensional sin necesidad de consultas de medios.
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWbRax' } %}
+
+Existe una sutil diferencia entre `auto-fill` y `auto-fit`. En la siguiente demostración, juegue con un diseño de cuadrícula utilizando la sintaxis explicada anteriormente, pero con solo dos elementos de cuadrícula en el contenedor de la cuadrícula. Con la palabra clave `auto-fill` puede ver que se han creado bandas vacías. Cambie la palabra clave a `auto-fit` y las bandas se colapsarán hasta el tamaño 0. Esto significa que las bandas flexibles ahora crecen para consumir espacio.
+
+{% Codepen { user: 'web-dot-dev', id: 'MWJbbNe' } %}
+
+En cualquier otro caso, las palabras clave `auto-fill` y `auto-fit` actúan exactamente iguales. No hay diferencia entre ellas una vez que se llena la primera banda.
+
+## Colocación automática
+
+Ya ha visto la colocación automática en cuadrículas funcionando en las demostraciones hasta ahora. Los elementos se colocan en la cuadrícula uno por celda en el orden en que aparecen en la fuente. Para muchos diseños, esto puede ser todo lo que necesita. Si necesita más control, hay un par de cosas que necesita hacer. El primero es modificar la distribución de colocación automática.
+
+### Colocar elementos en columnas
+
+El comportamiento predeterminado de la distribución de cuadrícula es colocar elementos a lo largo de las filas. En su lugar, puede hacer que los elementos se coloquen en columnas usando `grid-auto-flow: column`. Debe definir bandas de fila, de lo contrario, los elementos crearán bandas de columna intrínsecas y se distribuirán en una fila larga.
+
+Estos valores se relacionan con el modo de escritura del documento. Una fila siempre se ejecuta en la dirección en la que se ejecuta una oración en el modo de escritura del documento o componente. En la siguiente demostración, puede cambiar el modo el valor de `grid-auto-flow` y la propiedad `writing-mode`.
+
+{% Codepen { user: 'web-dot-dev', id: 'PoWbWbr', height: 600 } %}
+
+### Abarcar bandas
+
+Puede hacer que algunos o todos los elementos de un diseño colocado automáticamente abarquen más de una banda. Utilice la palabra clave `span` más el número de líneas a abarcar como valor para `grid-column-end` o `grid-row-end`.
+
+```css
+.item {
+    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
+}
+```
+
+Como no ha especificado un `grid-column-start`, este usa el valor inicial de `auto` y se coloca de acuerdo con las reglas de colocación automática. También puede especificar lo mismo usando la notación abreviada `grid-column`:
+
+```css
+.item {
+    grid-column: auto / span 2;
+}
+```
+
+### Llenar brechas
+
+Una distribución colocada automáticamente con algunos elementos que abarcan varias bandas puede dar como resultado una cuadrícula con algunas celdas sin rellenar. El comportamiento predeterminado del diseño de cuadrícula con una distribución colocada completamente automáticamente es progresar siempre hacia adelante. Los artículos se colocarán según el orden en que se encuentren en la fuente, o cualquier modificación con la propiedad `order`. Si no hay suficiente espacio para colocar un elemento, la cuadrícula dejará un espacio y se moverá a la siguiente banda.
+
+La siguiente demostración muestra este comportamiento. La casilla de verificación aplicará el modo de empaquetado denso. Esto se habilita dando a `grid-auto-flow` un valor `dense`. Con este valor, la cuadrícula tomará elementos más adelante en la distribución y los usará para llenar los espacios. Esto puede significar que la visualización se desconecte del orden lógico.
+
+{% Codepen { user: 'web-dot-dev', id: 'ZELBLrJ', height: 600 } %}
+
+## Colocación de elementos
+
+Ya posee muchas funciones de CSS Grid. Veamos ahora cómo colocamos los elementos en la cuadrícula que hemos creado.
+
+Lo primero que debe recordar es que el diseño de cuadrícula CSS Grid se basa en una cuadrícula de líneas numeradas. La forma más sencilla de colocar cosas en la cuadrícula es colocarlas de una línea a la otra. Descubrirá otras formas de colocar elementos en esta guía, pero siempre tendrá acceso a esas líneas numeradas.
+
+Las propiedades que puede utilizar para colocar elementos por número de línea son:
+
+- [`grid-column-start`](https://developer.mozilla.org/docs/Web/CSS/grid-column-start)
+- [`grid-column-end`](https://developer.mozilla.org/docs/Web/CSS/grid-column-end)
+- [`grid-row-start`](https://developer.mozilla.org/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](https://developer.mozilla.org/docs/Web/CSS/grid-row-end)
+
+Tienen notaciones abreviadas que le permiten establecer líneas de inicio y final a la vez:
+
+- [`grid-column`](https://developer.mozilla.org/docs/Web/CSS/grid-column)
+- [`grid-row`](https://developer.mozilla.org/docs/Web/CSS/grid-row)
+
+Para colocar su elemento, establezca las líneas de inicio y final del área de la cuadrícula en la que debe colocarse.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 200px 100px);
+}
+
+.item {
+    grid-column-start: 1; /* start at column line 1 */
+    grid-column-end: 4; /* end at column line 4 */
+    grid-row-start: 2; /*start at row line 2 */
+    grid-row-end: 4; /* end at row line 4 */
+}
+```
+
+Chrome DevTools puede darle una guía visual de las líneas para verificar dónde está colocado su elemento.
+
+La numeración de líneas sigue el modo de escritura y la dirección del componente. En la siguiente demostración, cambie el modo o la dirección de escritura para ver cómo la ubicación de los elementos se mantiene coherente con la forma en que fluye el texto.
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdGdzd', height: 600 } %}
+
+### Apilar elementos
+
+Con el posicionamiento basado en líneas, puede colocar elementos en la misma celda de la cuadrícula. Esto significa que puede apilar elementos o hacer que un elemento se superponga parcialmente con otro. Los elementos que vienen más adelante en la fuente se mostrarán encima de los elementos que vienen antes. Puede cambiar este orden de apilamiento utilizando `z-index` igual que con los elementos posicionados.
+
+{% Codepen { user: 'web-dot-dev', id: 'BapQWQW', height: 600 } %}
+
+### Números de línea negativos
+
+Cuando crea una cuadrícula utilizando `grid-template-rows` y `grid-template-columns`, está creando lo que se conoce como la **cuadrícula explícita**. Esta es una cuadrícula que usted definió y que otorgó un tamaño dado a las bandas.
+
+A veces, tendrá elementos que se muestran fuera de esta cuadrícula explícita. Por ejemplo, puede definir bandas de columna y luego agregar varias filas de elementos de cuadrícula sin definir bandas de fila. Las bandas tendrían un tamaño automático de forma predeterminada. También puede colocar un elemento utilizando `grid-column-end` que esté fuera de la cuadrícula explícita definida. En ambos casos, Grid creará bandas para que la distribución funcione, y a éstas nos referimos como la **cuadrícula implícita**.
+
+La mayoría de las veces, no habrá diferencia si está trabajando con una cuadrícula implícita o explícita. Sin embargo, con la ubicación basada en líneas, es posible que se encuentre con la principal diferencia entre los dos.
+
+Usando números de línea negativos, puede colocar elementos desde la línea final de la cuadrícula explícita. Esto puede resultar útil si desea que un elemento abarque desde la primera hasta la última línea de la columna. En ese caso, puede usar `grid-column: 1 / -1`. El elemento se extenderá a lo largo de la cuadrícula explícita.
+
+Sin embargo, esto solo funciona para la cuadrícula explícita. Tome un diseño de tres filas de elementos colocados automáticamente donde le gustaría que el primer elemento se extendiera hasta la línea final de la cuadrícula.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Dt8yG376MqSyWJJ8KqPr.svg", alt="Una barra lateral con 8 elementos de cuadrícula hermanos", width="800", height="359" %}
+
+Podría pensar que puede darle `grid-row: 1 / -1` a ese elemento. En la demostración a continuación, puede ver que esto no funciona. Las bandas se crean en la cuadrícula implícita, no hay forma de llegar al final de la cuadrícula usando `-1`.
+
+{% Codepen { user: 'web-dot-dev', id: 'YzNpZeq' } %}
+
+#### Dimensionamiento de bandas implícitas
+
+Las bandas creadas en la cuadrícula implícita se ajustarán automáticamente de forma predeterminada. Sin embargo, si desea controlar el tamaño de las filas, use la propiedad [`grid-auto-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows) y, para las columnas, [`grid-auto-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns).
+
+Para crear todas las filas implícitas con un tamaño mínimo de `10em` y un tamaño máximo de `auto`:
+
+```css
+.container {
+    display: grid;
+    grid-auto-rows: minmax(10em, auto);
+}
+```
+
+Crear columnas implícitas con un patrón de bandas de 100 px y 200 px de ancho. En este caso, la primera columna implícita será de 100 px, la segunda de 200 px, la tercera de 100 px, y así sucesivamente.
+
+```css
+.container {
+    display: grid;
+    grid-auto-columns: 100px 200px;
+}
+```
+
+## Líneas de cuadrícula con nombre
+
+Puede facilitar la colocación de elementos en un diseño si las líneas tienen un nombre en lugar de un número. Puede nombrar cualquier línea en su cuadrícula agregando un nombre de su elección entre corchetes. Se pueden agregar varios nombres, separados por un espacio dentro de los mismos corchetes. Una vez que haya nombrado las líneas, se pueden usar en lugar de los números.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      [main-start aside-start] 1fr
+      [aside-end content-start] 2fr
+      [content-end main-end]; /* a two column layout */
+}
+
+.sidebar {
+    grid-column: aside-start / aside-end;
+    /* placed between line 1 and 2*/
+}
+
+footer {
+    grid-column: main-start / main-end;
+    /* right across the layout from line 1 to line 3*/
+}
+```
+
+## Áreas de plantilla de cuadrícula
+
+También puede nombrar áreas de la cuadrícula y colocar elementos en esas áreas nombradas. Esta es una técnica encantadora, ya que le permite ver cómo se ve su componente allí mismo en el CSS.
+
+Para empezar, asigne un nombre a los hijos directos de su contenedor de cuadrícula utilizando la propiedad [`grid-area`](https://developer.mozilla.org/docs/Web/CSS/grid-area):
+
+```css
+header {
+    grid-area: header;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.content {
+    grid-area: content;
+}
+
+footer {
+    grid-area: footer;
+}
+```
+
+El nombre puede ser cualquier cosa que desee, excluyendo las palabras clave `auto` y `span`. Una vez que todos sus elementos tengan nombre, use la propiedad [`grid-template-areas`](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas) para definir qué celdas de la cuadrícula abarcará cada elemento. Cada fila se define entre comillas.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "header header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+Hay algunas reglas al usar `grid-template-areas`.
+
+- El valor debe ser una cuadrícula completa sin celdas vacías.
+- Para abarcar más de una banda, repita el nombre.
+- Las áreas creadas al repetir el nombre deben ser rectangulares y no pueden estar desconectadas.
+
+Si infringe alguna de las reglas anteriores, el valor se considera no válido y se desecha.
+
+Para dejar espacios en blanco en la cuadrícula, use uno o varios `.` sin espacios en blanco entre ellos. Por ejemplo, para dejar vacía la primera celda de la cuadrícula, podría agregar una serie de caracteres `.`:
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "....... header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+Como su distribución completa está definida en un solo lugar, es sencillo redefinirla mediante consultas de medios. En el siguiente ejemplo, he creado una distribución de dos columnas que se mueve a tres columnas redefiniendo el valor de `grid-template-columns` y `grid-template-areas`. Abra el ejemplo en una nueva ventana para jugar con el tamaño de la ventana y ver el cambio de distribución.
+
+También puede ver cómo la propiedad `grid-template-areas` se relaciona con `writing-mode` y la dirección, al igual que con otros métodos de la cuadrícula.
+
+{% Codepen { user: 'web-dot-dev', id: 'oNBYepg', height: 600 } %}
+
+## Propiedades de notación abreviada
+
+Hay dos propiedades en notación abreviada que le permiten establecer muchas de las propiedades de la cuadrícula en un solo paso. Estas pueden parecer un poco confusas hasta que analice exactamente cómo van juntas. Si desea usarlas o prefiere usar notaciones extendidas, depende de usted.
+
+### `grid-template`
+
+La propiedad [`grid-template`](https://developer.mozilla.org/docs/Web/CSS/grid-template) es una notación abreviada de `grid-template-rows`, `grid-template-columns` y `grid-template-areas`. Las filas se definen primero, junto con el valor de `grid-template-areas`. El tamaño de columnas se agrega después de una `/`.
+
+```css
+.container {
+    display: grid;
+    grid-template:
+      "head head head" minmax(150px, auto)
+      "sidebar content content" auto
+      "sidebar footer footer" auto / 1fr 1fr 1fr;
+}
+```
+
+### propiedad `grid`
+
+La notación abreviada [`grid`](https://developer.mozilla.org/docs/Web/CSS/grid) se puede utilizar exactamente de la misma forma que la de `grid-template`. Cuando se usa así, restablecerá las otras propiedades de la cuadrícula que acepta a sus valores iniciales. La lista completa es:
+
+- `grid-template-rows`
+- `grid-template-columns`
+- `grid-template-areas`
+- `grid-auto-rows`
+- `grid-auto-columns`
+- `grid-auto-flow`
+
+Alternativamente, puede usar esta notación abreviada para definir cómo se comporta la cuadrícula implícita, por ejemplo:
+
+```css
+.container {
+    display: grid;
+    grid: repeat(2, 80px) / auto-flow  120px;
+}
+```
+
+## Alineación
+
+La distribución de cuadrícula utiliza las mismas propiedades de alineación que aprendió en la guía de [flexbox](/learn/css/flexbox). En la cuadrícula, las propiedades que comienzan con `justify-` siempre se usan en el eje en línea, la dirección en la que fluyen las oraciones en su modo de escritura.
+
+Las propiedades que comienzan con `align-` se utilizan en el eje de bloque, la dirección en la que se colocan los bloques en su modo de escritura.
+
+- [`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content) y [`align-content`](https://developer.mozilla.org/docs/Web/CSS/align-content): distribuyen el espacio adicional en el contenedor de cuadrícula alrededor o entre bandas.
+- [`justify-self`](https://developer.mozilla.org/docs/Web/CSS/justify-self) y [`align-self`](https://developer.mozilla.org/docs/Web/CSS/align-self): se aplican a un elemento de la cuadrícula para moverlo dentro del área de la cuadrícula en la que está colocado.
+- [`justify-items`](https://developer.mozilla.org/docs/Web/CSS/justify-items) y [`align-items`](https://developer.mozilla.org/docs/Web/CSS/align-items): se aplican al contenedor de la cuadrícula para configurar todas las propiedades `justify-self` en los elementos.
+
+### Distribuir espacio extra
+
+En esta demostración, la cuadrícula es más grande que el espacio necesario para colocar las bandas de ancho fijo. Esto significa que tenemos espacio en las dimensiones en línea y en bloque de la cuadrícula. Pruebe diferentes valores de `align-content` y `justify-content` para ver cómo se comportan las bandas.
+
+{% Codepen { user: 'web-dot-dev', id: 'rNjjMVd', height: 650 } %}
+
+Observe cómo los espacios se vuelven más grandes cuando se utilizan valores como el `space-between`, y cualquier elemento de la cuadrícula que abarque dos bandas también crece para absorber el espacio adicional agregado a la brecha.
+
+{% Aside %} Al igual que con flexbox, estas propiedades solo funcionarán si hay espacio adicional que distribuir. Si su cuadrícula llena perfectamente el contenedor, no habrá espacio que compartir. {% endAside %}
+
+### Mover contenido
+
+Los elementos con un color de fondo parecen llenar completamente el área de la cuadrícula en la que están colocados, porque el valor inicial para `justify-self` y `align-self` es `stretch`.
+
+{% Aside %} Si su elemento es una imagen o algo más con una relación de aspecto intrínseca, el valor inicial será de `start` en lugar de `stretch` para evitar deformarlo. {% endAside %}
+
+En la demostración, cambie los valores de `justify-items` y `align-items` para ver cómo esto cambia la distribución. El área de la cuadrícula no cambia de tamaño, sino que los elementos se mueven dentro del área definida.
+
+{% Codepen { user: 'web-dot-dev', id: 'YzZOOXB', height: 650 } %}
+
+{% Assessment 'grid' %}
+
+## Recursos
+
+Esta guía le ha dado una descripción general de las diferentes partes de la especificación de la distribución de cuadrícula. Para saber más, consulte los siguientes recursos.
+
+- [Diseño de cuadrícula CSS de MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+- [Una guía completa de Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [Crear un contenedor de cuadrícula](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)
+- [Una colección completa de material didáctico de cuadrícula](https://gridbyexample.com/)
diff --git a/src/site/content/es/learn/css/index.md b/src/site/content/es/learn/css/index.md
new file mode 100644
index 00000000000..4e762aa7c9c
--- /dev/null
+++ b/src/site/content/es/learn/css/index.md
@@ -0,0 +1,28 @@
+---
+title: Aprender CSS
+authors:
+  - andybell
+description: Un curso permanente de CSS y un modelo para mejorar sus conocimientos sobre el diseño de páginas web.
+date: 2021-05-04
+tags:
+  - css
+  - layout
+---
+
+## ¡Bienvenido a Aprender CSS!
+
+En este curso se detallarán los fundamentos de CSS en fragmentos sencillos y fáciles de comprender. A lo largo de los próximos módulos, aprenderá cómo funcionan los aspectos fundamentales de CSS y cómo utilizarlos eficazmente en sus proyectos. Utilice el panel del menú junto al logotipo " Aprender CSS " para navegar por los módulos.
+
+Aprenderá los fundamentos de CSS, como el modelo de caja, cascada y especificidad, caja flexible, cuadrícula e índice z. Y, junto con estos fundamentos, aprenderá sobre funciones, tipos de color, gradientes, propiedades lógicas y herencia para convertirse en un desarrollador front-end integral, listo para enfrentarse a cualquier interfaz de usuario.
+
+Cada módulo está lleno de demostraciones interactivas y autoevaluaciones para que ponga a prueba sus conocimientos. Además de aprender a través de la lectura y las demostraciones, hay un episodio de podcast complementario para cada tema que funciona como otra forma de aprender y seguir ampliando sus conocimientos.
+
+Este curso se creó para desarrolladores de CSS, tanto principiantes como avanzados. Puede recorrer la serie de principio a fin para alcanzar una comprensión general de CSS que abarque todos los aspectos, o puede utilizarlo como referencia para temas específicos de estilo. Para aquellos que son nuevos en el desarrollo web en general, consulte el curso [Introducción a HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) de MDN para aprender todo sobre cómo escribir etiquetas y enlazar sus hojas de estilo.
+
+Esto es lo que aprenderá:
+
+{% include 'partials/course-index.njk' %}
+
+Entonces, ¿está preparado para aprender CSS? [Comencemos](/learn/css/box-model/).
+
+{% Aside %} Este curso está escrito y editado por expertos de la comunidad CSS: <a href="https://twitter.com/piccalilli_">Andy Bell</a>, <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>, <a href="https://twitter.com/Una">Una Kravets</a>, <a href="https://twitter.com/argyleink">Adam Argyle</a>, [Emma Twersky](https://twitter.com/twerske), [Camden Bickel](https://twitter.com/camdenbickel), y [Kevin Lozandier](https://twitter.com/KevinLozandier). <a href="https://twitter.com/rob_dodson">Rob Dodson</a> y <a href="https://twitter.com/jiwoong">Jiwoong Lee</a> llevaron a cabo la creación de la interfaz de usuario (UX) y la producción, con la ayuda de <a href="https://twitter.com/devnook">Ewa Gasperowicz</a> y <a href="https://twitter.com/kaycebasques">Kayce Basques</a>. {% endAside %}
diff --git a/src/site/content/es/learn/css/inheritance/conclusion.assess.yml b/src/site/content/es/learn/css/inheritance/conclusion.assess.yml
new file mode 100644
index 00000000000..7ffb949eca9
--- /dev/null
+++ b/src/site/content/es/learn/css/inheritance/conclusion.assess.yml
@@ -0,0 +1,32 @@
+setLeader: Test your knowledge of inheritance
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,2,3,4"
+    stem: Which of the following properties are inheritable?
+    options:
+      - content: "`animation`"
+        rationale: "Animations do not pass down to children."
+      - content: "`font-size`"
+        rationale: "🎉"
+      - content: "`color`"
+        rationale: "🎉"
+      - content: "`text-align`"
+        rationale: "🎉"
+      - content: "`line-height`"
+        rationale: "🎉"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      Which value behaves like `inherit` unless there is nothing to inherit and
+      then behaves like `initial`?
+    options:
+      - content: "`reset`"
+        rationale: "not a valid value, try again!"
+      - content: "`unset`"
+        rationale: "🎉"
+      - content: "`superset`"
+        rationale: "not a valid value, try again!"
\ No newline at end of file
diff --git a/src/site/content/es/learn/css/inheritance/index.md b/src/site/content/es/learn/css/inheritance/index.md
new file mode 100644
index 00000000000..f69375d12b0
--- /dev/null
+++ b/src/site/content/es/learn/css/inheritance/index.md
@@ -0,0 +1,249 @@
+---
+title: Herencia
+description: 
+  Algunas propiedades CSS se heredan si no especifica un valor para ellas.
+  Descubra cómo funciona esto y cómo utilizarlo en su beneficio en este módulo.
+audio:
+  title: 'El Podcast de CSS - 005: Herencia'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_005_v1.2.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Digamos que acaba de escribir algo de CSS para que los elementos parezcan un botón.
+
+```html
+<a href="http://example.com" class="my-button">I am a button link</a>
+```
+
+```css
+.my-button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  text-decoration: none;
+  background: pink;
+  font: inherit;
+  text-align: center;
+}
+```
+
+Luego agrega un elemento de enlace a un artículo de contenido, con un valor `.my-button` para `class`. Sin embargo, hay un problema, el texto no tiene el color que esperaba. ¿Cómo pasó esto?
+
+Algunas propiedades CSS se heredan si no especifica un valor para ellas. En el caso de este botón, **heredó** el `color` de este CSS:
+
+```css
+article a {
+  color: maroon;
+}
+```
+
+En esta lección, aprenderá por qué sucede eso y cómo la herencia es una característica poderosa para ayudarlo a escribir menos CSS.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'zYNGEbg', height: 400 } %}</figure>
+
+## Flujo de la herencia
+
+Echemos un vistazo a cómo funciona la herencia, mediante este fragmento de HTML:
+
+```html
+<html>
+  <body>
+    <article>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </article>
+  </body>
+</html>
+```
+
+El elemento raíz (`<html>`) no heredará nada porque es el primer elemento del documento. Agregue algo de CSS en el elemento HTML y comenzará a heredarse en cascada por el documento.
+
+```css
+html {
+  color: lightslategray;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'JjEKgBX', height: 200 } %}</figure>
+
+La propiedad `color` es heredada por otros elementos. El elemento `html` tiene un valor `color: lightslategray`, por lo tanto, todos los elementos que pueden heredar el color ahora tendrán un color `lightslategray`.
+
+```css
+body {
+  font-size: 1.2em;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'VwPLrLP', height: 200 } %}</figure>
+
+{% Aside %} Debido a que esta demostración establece el tamaño de fuente en el elemento `body`, el elemento `html` aún tendrá el tamaño de fuente inicial establecido por el navegador (hoja de estilo del agente de usuario), pero los elementos `article` y `p` heredarán el tamaño de fuente declarado por el elemento `body`. Esto se debe a que la herencia solo desciende en cascada. {% endAside %}
+
+```css
+p {
+  font-style: italic;
+}
+```
+
+Solo el elemento `<p>` tendrá texto en cursiva porque es el elemento anidado más profundo. La herencia solo fluye hacia abajo, no hacia los elementos principales.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'JjEKgmK', tab: 'css,result', height: 400 } %}</figure>
+
+## ¿Qué propiedades son heredables?
+
+No todas las propiedades CSS son heredables, pero hay muchas que sí lo son. Como referencia, esta es la lista completa de propiedades heredables, tomada de la referencia W3 de todas las propiedades CSS:
+
+- [azimut](https://developer.mozilla.org/docs/Web/SVG/Attribute/azimuth)
+- [border-collapse](https://developer.mozilla.org/docs/Web/CSS/border-collapse)
+- [border-spacing](https://developer.mozilla.org/docs/Web/CSS/border-spacing)
+- [caption-side](https://developer.mozilla.org/docs/Web/CSS/caption-side)
+- [color](https://developer.mozilla.org/docs/Web/CSS/color)
+- [cursor](https://developer.mozilla.org/docs/Web/CSS/cursor)
+- [direction](https://developer.mozilla.org/docs/Web/CSS/direction)
+- [empty-cells](https://developer.mozilla.org/docs/Web/CSS/empty-cells)
+- [font-family](https://developer.mozilla.org/docs/Web/CSS/font-family)
+- [font-size](https://developer.mozilla.org/docs/Web/CSS/font-size)
+- [font-style](https://developer.mozilla.org/docs/Web/CSS/font-style)
+- [font-variant](https://developer.mozilla.org/docs/Web/CSS/font-variant)
+- [font-weight](https://developer.mozilla.org/docs/Web/CSS/font-weight)
+- [font](https://developer.mozilla.org/docs/Web/CSS/font)
+- [letter-spacing](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)
+- [line-height](https://developer.mozilla.org/docs/Web/CSS/line-height)
+- [list-style-image](https://developer.mozilla.org/docs/Web/CSS/list-style-image)
+- [list-style-position](https://developer.mozilla.org/docs/Web/CSS/list-style-position)
+- [list-style-type](https://developer.mozilla.org/docs/Web/CSS/list-style-type)
+- [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style)
+- [orphans](https://developer.mozilla.org/docs/Web/CSS/orphans)
+- [quotes](https://developer.mozilla.org/docs/Web/CSS/quotes)
+- [text-align](https://developer.mozilla.org/docs/Web/CSS/text-align)
+- [text-indent](https://developer.mozilla.org/docs/Web/CSS/text-indent)
+- [text-transform](https://developer.mozilla.org/docs/Web/CSS/text-transform)
+- [visibility](https://developer.mozilla.org/docs/Web/CSS/visibility)
+- [white-space](https://developer.mozilla.org/docs/Web/CSS/white-space)
+- [widows](https://developer.mozilla.org/docs/Web/CSS/widows)
+- [word-spacing](https://developer.mozilla.org/docs/Web/CSS/word-spacing)
+
+## Cómo funciona la herencia
+
+Cada elemento HTML tiene todas las propiedades CSS definidas por defecto con un valor inicial. Un valor inicial es una propiedad que no se hereda y aparece como predeterminada si la cascada no calcula un valor para ese elemento.
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/OvoYqOMcdFZL7wJQIL2C.mp4" %}</figure>
+
+Las propiedades que se pueden heredar descienden en cascada y los elementos secundarios obtendrán un valor calculado que representa el valor de sus primarios. Esto significa que si un primario tiene el elemento `font-weight` establecido en `bold`, todos los elementos secundarios estarán en negrita, a menos que su elemento `font-weight` se establezca en un valor diferente, o la hoja de estilo del agente de usuario tenga un valor `font-weight` para ese elemento.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgGPOZ' } %}</figure>
+
+## Cómo heredar y controlar explícitamente la herencia
+
+La herencia puede afectar los elementos de formas inesperadas, por lo que CSS tiene herramientas para ayudar con eso.
+
+### La palabra clave `inherit`
+
+Puede hacer que cualquier propiedad herede el valor calculado de su elemento primario con la palabra clave `inherit`. Una forma útil de usar esta palabra clave es crear excepciones.
+
+```css
+strong {
+  font-weight: 900;
+}
+```
+
+Este fragmento de CSS establece que todos los elementos `<strong>` tengan un `font-weight` de `900`, en lugar del valor `bold` predeterminado, que sería el equivalente a `font-weight: 700`.
+
+```css
+.my-component {
+  font-weight: 500;
+}
+```
+
+En su lugar, la clase `.my-component` establece el valor `font-weight` en `500`. Para hacer que los elementos `<strong>` dentro de `.my-component` también tengan `font-weight: 500` agregue:
+
+```css
+.my-component strong {
+  font-weight: inherit;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'eYgNedO', height: 400 } %}</figure>
+
+Ahora, los elementos `<strong>` dentro de `.my-component` tendrán un `font-weight` igual a `500`.
+
+Puede establecer explícitamente este valor, pero si usa `inherit` y el CSS de `.my-component` cambia en el futuro, puede garantizar que su `<strong>` se mantendrá actualizado automáticamente con eso.
+
+### La palabra clave `initial`
+
+La herencia puede causar problemas con sus elementos y la palabra clave `initial` proporciona una poderosa opción de reinicio.
+
+Aprendió anteriormente que cada propiedad tiene un valor predeterminado en CSS. La palabra clave `initial` establece una propiedad de nuevo a ese valor predeterminado inicial.
+
+```css
+aside strong {
+  font-weight: initial;
+}
+```
+
+Este fragmento eliminará el peso en negrita de todos los elementos `<strong>` dentro de un elemento `<aside>` y, en su lugar, los convertirá en un peso normal, que es el valor inicial.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'OJWVORZ', tab: 'css,result', height: 300 } %}</figure>
+
+### La palabra clave `unset`
+
+La propiedad `unset` se comporta de manera diferente si una propiedad es heredable o no. Si una propiedad es heredable, la palabra clave `unset` se comportará lo mismo que `inherit`. Si la propiedad no es heredable, la palabra clave `unset` se comporta igual que `initial`.
+
+Recordar qué propiedades CSS son heredables puede ser difícil, pero `unset` puede ser útil en ese contexto. Por ejemplo, `color` es heredable, pero `margin` no lo es, por lo que puede escribir esto:
+
+```css
+/* Estilos de color globales para párrafos en CSS creado */
+p {
+  margin-top: 2em;
+  color: goldenrod;
+}
+
+/* La p debe restablecerse en asides, para que pueda usar unset */
+aside p {
+  margin: unset;
+  color: unset;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'JjEdpjw', tab: 'css,result', height: 400 } %}</figure>
+
+Ahora, el `margin` se elimina y el `color` vuelve a ser el valor calculado heredado.
+
+También puede utilizar el valor `unset` con la propiedad `all`. De regreso al ejemplo anterior, ¿qué sucede si los estilos `p` globales obtienen algunas propiedades adicionales? Solo se aplicará la regla que se estableció para los parámetros `margin` y `color`.
+
+```css/5-6
+/* Estilos de color globales para párrafos en CSS creado */
+p {
+	margin-top: 2em;
+	color: goldenrod;
+	padding: 2em;
+	border: 1px solid;
+}
+
+/* No todas las propiedades se tienen más en cuenta */
+aside p {
+	margin: unset;
+	color: unset;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'bGgdLNB', tab: 'css,result' } %}</figure>
+
+Si en vez de ello, cambia la regla `aside p` a `all: unset`, no importa qué estilos globales se apliquen a `p` en el futuro, siempre estarán desactivados.
+
+```css/2-3
+aside p {
+	margin: unset;
+	color: unset;
+	all: unset;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWpbZbB', tab: 'css,result' } %}</figure>
+
+{% Assessment 'conclusion' %}
+
+## Recursos
+
+- [Referencia de MDN en valores calculados](https://developer.mozilla.org/docs/Web/CSS/computed_value)
+- [Un artículo sobre cómo la herencia puede ser útil en front-end modulares](https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/)
diff --git a/src/site/content/es/learn/css/layout/index.md b/src/site/content/es/learn/css/layout/index.md
new file mode 100644
index 00000000000..eb2e8fdc0a5
--- /dev/null
+++ b/src/site/content/es/learn/css/layout/index.md
@@ -0,0 +1,225 @@
+---
+title: Diseño
+description: Una descripción general de los distintos métodos de diseño entre los que puede elegir al crear un componente o diseño de página.
+audio:
+  title: 'El Podcast de CSS   - 009: Diseño'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_009_v1.1.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-20
+tags:
+  - css
+---
+
+Imagine que está trabajando como desarrollador y un colega diseñador le entrega el diseño para un nuevo sitio web. El diseño tiene todo tipo de distribución de elementos y composiciones interesantes: diseños bidimensionales que tienen en cuenta el ancho y la altura de la ventana gráfica, así como diseños que deben ser fluidos y flexibles. ¿Cómo decides la mejor manera de llevarlos a cabo con CSS?
+
+El CSS nos proporciona varias formas de resolver problemas de diseño en un eje vertical, horizontal o incluso ambos. Elegir el método de diseño adecuado para un contexto puede ser difícil y, a menudo, es posible que necesite más de un método de diseño para resolver su problema. Para ayudar con esto, en los siguientes módulos, aprenderá sobre las características únicas de cada mecanismo de diseño CSS para informar esas decisiones.
+
+## Diseño: una breve historia
+
+En los primeros días de la web, los diseños más complejos que un simple documento se presentaban con elementos `<table>`. La separación de HTML de los estilos visuales se hizo más fácil cuando los navegadores adoptaron CSS ampliamente a finales de los noventa. El CSS abrió la puerta a que los desarrolladores pudieran cambiar completamente la apariencia de un sitio web sin tener que tocar el HTML. Esta nueva capacidad inspiró proyectos como [The CSS Zen Garden](http://www.csszengarden.com), creado para demostrar el poder del CSS y alentar a más desarrolladores a aprenderlo. El CSS ha evolucionado a medida que evolucionan nuestras necesidades de diseño web y tecnología de navegador. Puede leer cómo el diseño CSS y nuestro enfoque de diseño han evolucionado con el tiempo en [este artículo de Rachel Andrew](https://24ways.org/2019/a-history-of-css-through-15-years-of-24-ways/). {% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/vDDoFFoPVgJEuEaqcP4H.svg", alt="Cronología que muestra cómo ha evolucionado el CSS desde 1996 hasta 2021", width="760", height="270" %}
+
+## Diseño: el presente y el futuro
+
+El CSS moderno tiene herramientas de diseño excepcionalmente poderosas. Tenemos sistemas dedicados para el diseño y vamos a tener una visión de alto nivel sobre lo que tenemos a nuestra disposición, antes de profundizar en más detalles de Flexbox y Grid en los próximos módulos.
+
+## Comprender la propiedad `display`
+
+La propiedad `display` hace dos cosas. Lo primero es determinar si la caja a la que se aplica actúa como en línea o en bloque.
+
+```css
+.my-element {
+  display: inline;
+}
+```
+
+Los elementos en línea se comportan como palabras en una oración. Se sientan uno al lado del otro en la dirección en línea. Los elementos como `<span>` y `<strong>`, que se utilizan normalmente para dar estilo a fragmentos de texto dentro de elementos que contienen elementos como un `<p>` (párrafo), van en línea de forma predeterminada. También conservan los espacios en blanco circundantes. {% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/GezxDZXkJgkMevkKg39M.png", alt="Un diagrama que muestra todos los diferentes tamaños de una caja, así como el inicio y el fin de cada sección de tamaño", width="800", height="559" %}  No puede establecer un ancho y un alto explícito en elementos en línea. Los elementos circundantes ignorarán cualquier margen y espacio de relleno a nivel de bloque.
+
+```css
+.my-element {
+	display: block;
+}
+```
+
+Los elementos de bloque no se sientan uno al lado del otro. Crean una nueva línea para ellos mismos. Un elemento de bloque se expandirá al tamaño de la dimensión en línea (a menos que sea cambiado por otro código CSS), por lo tanto, abarcará todo el ancho en un modo de escritura horizontal. Se respetará el margen en todos los lados de un elemento de bloque.
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+La propiedad `display` también determina el comportamiento de los hijos de un elemento. Por ejemplo, establecer la propiedad `display` a `display: flex` hace de la caja una caja a nivel de bloque, y también convierte a sus hijos en elementos flexibles. Esto habilita las propiedades flexibles que controlan la alineación, el orden y el flujo.
+
+## Flexbox y Grid
+
+Hay dos mecanismos de diseño principales que crean reglas de diseño para múltiples elementos, *[flexbox](/learn/css/flexbox)* y *[grid](/learn/css/grid)*. Comparten similitudes, pero están dirigidos a resolver diferentes problemas de diseño. {% Aside %} Entraremos en más detalles de ambos en módulos futuros, pero aquí hay una descripción general de alto nivel de qué son y para qué son útiles. {% endAside %}
+
+### Flexbox
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+Flexbox es un mecanismo de diseño para diseños unidimensionales, es decir, disposición en un solo eje, ya sea horizontal o vertical. De forma predeterminada, flexbox alineará los elementos hijos del elemento uno al lado del otro, en la dirección en línea, y los estirará en la dirección del bloque para que todos tengan la misma altura. {% Codepen { user: 'web-dot-dev', id: 'rNjxmor', tab: 'css,result', height: 300 } %} Los elementos permanecerán en el mismo eje y no se ajustarán cuando se queden sin espacio. En lugar de ello, intentarán encajarse en la misma línea que el otro. Este comportamiento se puede cambiar usando las propiedades `align-items`, `justify-content` y `flex-wrap`. {% Codepen { user: 'web-dot-dev', id: 'jOyWLmg' } %} Flexbox también convierte los elementos hijos en **elementos flexibles**, lo que significa que puede escribir reglas sobre cómo se comportan dentro de un contenedor flexible. Puede cambiar la alineación, el orden y la justificación de un objeto individual. También puede cambiar la forma en que se encoge o crece utilizando la propiedad `flex`.
+
+```css
+.my-element div {
+ 	flex: 1 0 auto;
+}
+```
+
+La propiedad `flex` es una abreviatura de `flex-grow`, `flex-shrink` y `flex-basis`. El ejemplo anterior se puede desglosar de la siguiente manera:
+
+```css
+.my-element div {
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+```
+
+Los desarrolladores proporcionan estas reglas de bajo nivel para indicarle al navegador cómo debe comportarse el diseño cuando se ve desafiado por el contenido y las dimensiones de la ventana gráfica. Esto lo convierte en un mecanismo muy útil para el diseño web receptivo.
+
+### Grid
+
+```css
+.my-element {
+	display: grid;
+}
+```
+
+Grid es similar en muchos aspectos a **flexbox**, pero está diseñado para controlar diseños de varios ejes en lugar de diseños de un solo eje (espacio vertical u horizontal). Grid le permite escribir reglas de diseño en un elemento que tiene `display: grid` e introduce algunas primitivas nuevas para el estilo de diseño, como las funciones `repeat()` y `minmax()`. La unidad `fr` (una fracción del espacio restante) es una unidad de cuadrícula útil. Puede construir cuadrículas tradicionales de 12 columnas, con un espacio entre cada objeto, con 3 propiedades CSS:
+
+```css
+.my-element {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'rNjxGVz' } %} El ejemplo anterior muestra un diseño de un solo eje. Mientras que flexbox trata principalmente a los elementos como un grupo, grid le brinda un control preciso sobre su ubicación en dos dimensiones. Podríamos definir que el primer elemento de esta cuadrícula ocupa 2 filas y 3 columnas:
+
+```css
+.my-element :first-child {
+  grid-row: 1/3;
+  grid-column: 1/4;
+}
+```
+
+Las propiedades `grid-row` y `grid-column` indican al primer elemento de la cuadrícula que se extienda desde la primera columna hasta el inicio de la cuarta columna, luego se extienda desde la primera fila hasta la tercera fila. {% Codepen { user: 'web-dot-dev', id: 'YzNwrwB', height: 650 } %}
+
+## Disposición de flujo
+
+Si no usa grid o flexbox, sus elementos se muestran en flujo normal. Hay varios métodos de diseño que puede utilizar para ajustar el comportamiento y la posición de los elementos cuando están en flujo normal.
+
+### Bloque en línea
+
+¿Recuerda cómo los elementos circundantes no respetan el margen de bloque y el relleno en un elemento en línea? Con `inline-block` *puede* hacer que esto suceda.
+
+```css
+p span {
+	display: inline-block;
+}
+```
+
+El uso de `inline-block` le brinda un cuadro que tiene algunas de las características de un elemento a nivel de bloque, pero que aún fluye en línea con el texto.
+
+```css
+p span {
+	margin-top: 0.5rem;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'PoWZJKw', height: 300, tab: 'css,result' } %}
+
+### Flotadores
+
+Si tiene una imagen que se encuentra dentro de un párrafo de texto, ¿no sería útil que ese texto se situara alrededor de esa imagen como podría ver en un periódico? Puede hacer esto con los flotadores.
+
+```css
+img {
+	float: left;
+	margin-right: 1em;
+}
+```
+
+La propiedad `float` indica a un elemento que "flote" en el lugar especificado. A la imagen de este ejemplo se le indica que flote a la izquierda, lo que permite que los elementos hermanos se "envuelvan" a su alrededor. Puede indicarle a un elemento que flote a la `left`, `right` o `inherit`. {% Codepen { user: 'web-dot-dev', id: 'VwPaLMg', height: 300 } %} {% Aside 'warning' %} Cuando utilice `float`, tenga en cuenta que cualquier elemento que siga al elemento flotante puede tener su diseño ajustado. Para evitar esto, puede borrar el flotador, ya sea usando `clear: both` en un elemento que sigue a su elemento flotante *o* con `display: flow-root` en el padre de sus elementos flotantes. Obtenga más información en el artículo [El final del truco de clearfix](https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/). {% endAside %}
+
+### Disposición multicolumna
+
+Si tiene una lista muy larga de elementos, como una lista de todos los países del mundo, puede ser resultar en un desplazamiento y pérdida de tiempo *muy grandes* para un usuario. También puede crear un exceso de espacios en blanco en la página. Con el CSS multicolumna, puede dividir su lista en varias columnas para ayudar con ambos problemas.
+
+```html
+<h1>All countries</h1>
+<ul class="countries">
+  <li>Argentina</li>
+  <li>Aland Islands</li>
+  <li>Albania</li>
+  <li>Algeria</li>
+  <li>American Samoa</li>
+  <li>Andorra</li>
+  …
+</ul>
+```
+
+```css
+.countries {
+	column-count: 2;
+	column-gap: 1em;
+}
+```
+
+Esto divide automáticamente esa lista larga en dos columnas y agrega un espacio entre las columnas. {% Codepen { user: 'web-dot-dev', id: 'gOgrpzO' } %}
+
+```css
+.countries {
+	width: 100%;
+	column-width: 260px;
+	column-gap: 1em;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'jOyqPvB' } %} En lugar de establecer el número de columnas en las que se divide el contenido, puede utilizar `column-width` para definir un ancho mínimo deseado. A medida que haya más espacio disponible en la ventana gráfica, se crearán automáticamente más columnas y, a medida que se reduzca el espacio, las columnas también se reducirán. Esto es muy útil en contextos de diseño web receptivo.
+
+### Posicionamiento
+
+Lo último en esta descripción general de los mecanismos de diseño es el posicionamiento. La propiedad `position` cambia el comportamiento de un elemento dentro del flujo normal del documento y  la manera en que se relaciona con otros elementos. Las opciones disponibles son `relative`, `absolute`, `fixed` y `sticky` con el valor predeterminado de `static`.
+
+```css
+.my-element {
+  position: relative;
+  top: 10px;
+}
+```
+
+Este elemento se desplaza 10 píxeles hacia abajo en función de su posición actual en el documento, ya que está posicionado con respecto a sí mismo. Agregar `position: relative` a un elemento también lo convierte en el bloque contenedor de cualquier elemento hijo con `position: absolute`. Esto significa que el hijo ahora se reposicionará de acuerdo a este elemento en particular, en lugar de al padre relativo superior, cuando se le aplique una posición absoluta.
+
+```css
+.my-element {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.another-element {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 50px;
+	height: 50px;
+}
+```
+
+Cuando establece `position` en `absolute`, el elemento del flujo de documentos actual se separa. Esto significa dos cosas:
+
+1. Puede usar `top`, `right`, `bottom` y `left` en el padre relativo más cercano de un elemento para colocarlo donde quiera.
+2. Todo el contenido que rodea a un elemento absoluto se reajusta para llenar el espacio restante. Un elemento con un valor de `position` `fixed` se comporta de manera similar a `absolute`, siendo su padre el elemento raíz `<html>`. Los elementos de posición fija permanecen anclados desde la parte superior izquierda según los valores `top`, `right`, `bottom` y `left` que establezca. Puede lograr los aspectos anclados y fijos de `fixed` y los aspectos más predecibles que respetan el flujo de documentos de `relative` mediante el uso de `sticky`. Con este valor, a medida que la ventana gráfica se desplaza más allá del elemento, permanece anclada a los valores `top`, `right`, `bottom` y `left` establecidos.  {% Codepen { user: 'web-dot-dev', id: 'NWdNGZB', height: 600 } %}
+
+## En conclusión
+
+Hay muchas opciones y una gran flexibilidad con el diseño CSS. Para sumergirse más en el poder del CSS de [Flexbox](/learn/css/flexbox) y [Grid](/learn/css/grid), continúe con los siguientes módulos. {% Assessment 'layout' %}
diff --git a/src/site/content/es/learn/css/layout/layout.assess.yml b/src/site/content/es/learn/css/layout/layout.assess.yml
new file mode 100644
index 00000000000..dcf44657d0b
--- /dev/null
+++ b/src/site/content/es/learn/css/layout/layout.assess.yml
@@ -0,0 +1,63 @@
+setLeader: Test your knowledge of layout
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2"
+    stem: "What 2 things does the `display` property do?"
+    options:
+      - content: "Determines `inline` or `block` or `none`."
+        rationale: "The layout engine needs to know if this box be full width or
+        not and does it need a new line."
+      - content: "Determines the grid layout frame."
+        rationale: "The display property can set display to grid but it doesn't
+        have anything to do with a layout frame."
+      - content: "Determines how the children should behave."
+        rationale: "Flexbox and grid have opinions and new features for their
+        children."
+      - content: "Determines if the box should scroll."
+        rationale: "That's the `overflow` property."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      To flow multiple paragraphs into columns, which CSS property is best for
+      this task?
+    options:
+      - content: "`display: grid`"
+        rationale: "While grid could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next."
+      - content: "`column-count`"
+        rationale: "Paragraphs will flow from the end of one column into the
+        start of the next, like a magazine or newspaper will do."
+      - content: "`display: flex`"
+        rationale: "While flex could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next like is needed."
+      - content: "`float`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What does it mean if a block is out of flow?"
+    options:
+      - content: "It's stuck on the side of the river."
+        rationale: "Context is CSS here, not geography."
+      - content: "It's been given a `top` or `left` position value."
+        rationale: "Having these properties alone do not pull a box out of flow."
+      - content: "It's no longer positioned based on its siblings positions."
+        rationale: "A box with `position: absolute` for example, is now
+        positioned with x and y coordinates based on the containing block, and
+        not its order with other sibling elements."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Flexbox and Grid wrap their children by default?"
+    options:
+      - content: "True"
+        rationale: "It must be opted into with `flex-wrap: wrap` or
+        `repeat(auto-fit, 30ch)`."
+      - content: "False"
+        rationale: "Flexbox and Grid have special wrapping features that
+        need additional styles to apply."
diff --git a/src/site/content/es/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/es/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/es/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/es/learn/css/selectors/index.md b/src/site/content/es/learn/css/selectors/index.md
new file mode 100644
index 00000000000..078dd06a15a
--- /dev/null
+++ b/src/site/content/es/learn/css/selectors/index.md
@@ -0,0 +1,355 @@
+---
+title: Selectores
+description: |-
+  Para aplicar CSS a un elemento, debe seleccionarlo. CSS le proporciona varias formas diferentes de hacer esto, que
+  puede explorar en este módulo.
+audio:
+  title: 'El Podcast de CSS   - 002: Selectores'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Si tiene un texto que quiere que se agrande y aparezca en rojo cuando se muestre en el primer párrafo de un artículo, ¿cómo lo hace?
+
+```html
+<article>
+  <p>Quiero ser rojo y más grande que el otro texto.</p>
+  <p>Quiero tener el tamaño normal y el color predeterminado.</p>
+</article>
+```
+
+Debe utilizar un selector de CSS para encontrar ese elemento específico y aplicar una regla de CSS, como esta.
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+CSS le brinda muchas opciones para seleccionar elementos y aplicarles reglas, desde muy simples hasta muy complejas, para ayudarlo a resolver situaciones como esta.
+
+{% Codepen { user: 'web-dot-dev', id: 'XWprGYz', height: 250 } %}
+
+## Las partes de una regla CSS
+
+Para comprender cómo funcionan los selectores y su función en CSS, es importante conocer las partes de una regla CSS. Una regla CSS es un bloque de código que contiene uno o más selectores y una o más declaraciones.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="Una imagen de una regla CSS con el selector .my-css-rule", width="800", height="427" %}</figure>
+
+En esta regla CSS, el **selector** es `.my-css-rule` que encuentra todos los elementos de la clase `my-css-rule` en la página. Hay tres declaraciones entre corchetes. Una declaración es un par de propiedad y valor que aplica estilos a los elementos que coinciden con los selectores. Una regla CSS puede tener tantas declaraciones y selectores como desee.
+
+## Selectores simples
+
+El grupo más sencillo de selectores apunta a elementos HTML más las clases, los ID y otros atributos que se pueden agregar a una etiqueta HTML.
+
+### Selector universal
+
+Un [selector universal,](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) también conocido como comodín, coincide con cualquier elemento.
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+Esta regla hace que todos los elementos HTML de la página tengan texto rosado.
+
+### Selector de tipo
+
+Un [selector de tipo](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) coincide directamente con un elemento HTML.
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+Esta regla hace que cada elemento `<section>` tenga `2em` de `padding` en todos los lados.
+
+### Selector de clase
+
+Un elemento HTML puede tener uno o más elementos definidos en su atributo `class`. El [selector de clase](https://developer.mozilla.org/docs/Web/CSS/Class_selectors) coincide con cualquier elemento que tenga esa clase aplicada.
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+Cualquier elemento al que se le haya aplicado la clase se coloreará en rojo:
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+Observe cómo el `.` solo está presente en CSS y **no** en HTML. Esto se debe a que el carácter `.` le indica al lenguaje CSS que haga coincidir los miembros del atributo de clase. Este es un patrón común en CSS, donde se usa un carácter especial, o un conjunto de caracteres, para definir tipos de selectores.
+
+Un elemento HTML que tenga una clase `.my-class` seguirá coincidiendo con la regla CSS anterior, incluso si tienen varias otras clases, como esta:
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+Esto se debe a que CSS busca un atributo `class` que *contenga* la clase definida, en lugar de coincidir exactamente con esa clase.
+
+{% Aside %} El valor de un atributo de clase puede ser casi cualquier cosa que desee. Una cosa que podría hacerlo tropezar es que no puede comenzar una clase (o una identificación) con un número, como `.1element`. Puede leer más [en la especificación](https://www.w3.org/TR/CSS21/syndata.html#characters). {% endAside %}
+
+### Selector de ID
+
+Un elemento HTML con un atributo `id` debe ser el único elemento en una página con ese valor de identificación. Debe seleccionar elementos con un [selector de ID](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) como este:
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+Este CSS aplicaría un borde azul al elemento HTML que tiene un atributo `id` igual a `rad`, así:
+
+```html
+<div id="rad"></div>
+```
+
+Similar al selector de clases `.`, use un carácter `#` para indicarle a CSS que busque un elemento que coincida con la `id` que le sigue.
+
+{% Aside %} Si el navegador encuentra más de una instancia de una `id`, aplicará todavía las reglas CSS que coincidan con su selector. Sin embargo, se supone que cualquier elemento que tenga un atributo `id` tiene un valor único para él, por lo que, a menos que esté escribiendo CSS muy específico para un solo elemento, evite aplicar estilos con el selector `id`, ya que significa que no puede reutilizar esos estilos en otros lugares. {% endAside %}
+
+### Selector de atributos
+
+Puede buscar elementos que tengan un determinado atributo HTML, o que tengan un determinado valor para un atributo HTML, si utiliza el [selector de atributos](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors). Puede indicarle a CSS que busque atributos si encierra el selector entre corchetes cuadrados (`[ ]`).
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+Este CSS busca todos los elementos que tienen un atributo `data-type` con un valor de `primary`, de la siguiente manera:
+
+```html
+<div data-type="primary"></div>
+```
+
+En lugar de buscar un valor específico de `data-type`, también puede buscar elementos que presenten el atributo, independientemente de su valor.
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+Ambos `<div>` tendrán texto rojo.
+
+Puede utilizar selectores de atributos que distingan entre mayúsculas y minúsculas si añade un operador `s` a su selector de atributos.
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+Esto significa que si un elemento HTML tuviera un `data-type` igual a  `Primary`, en lugar de `primary`, no se mostraría en texto rojo. Puede hacer lo opuesto (insensibilidad a mayúsculas y minúsculas) mediante el uso de un operador `i`.
+
+Junto con los operadores de casos, tiene acceso a los operadores que buscan porciones coincidentes de cadenas dentro de los valores de los atributos.
+
+```css
+/* Un href que contiene "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* Un href que comienza con https */
+[href^='https'] {
+  color: green;
+}
+
+/* Un href que termina con .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbOy' } %}<figcaption>En esta demostración, el operador `$` en nuestro selector de atributos obtiene el tipo de archivo del atributo `href`. Esto hace posible ponerle un prefijo a la etiqueta, con base en ese tipo de archivo mediante un pseudoelemento.</figcaption></figure>
+
+### Agrupar selectores
+
+Un selector no tiene que coincidir con un solo elemento. Puede agrupar varios selectores si los separa con comas:
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+Este ejemplo extiende el cambio de color a ambos elementos `<strong>` y también a los elementos `<em>`. También se extiende a una clase llamada `.my-class` y a un elemento que tiene un atributo `lang`.
+
+{% Assessment 'simple-selectors' %}
+
+## Pseudoclases y pseudoelementos
+
+CSS proporciona tipos de selectores útiles que se centran en el estado específico de la plataforma, como cuando se desplaza un elemento, estructuras *dentro* de un elemento o partes de un elemento.
+
+### Pseudoclases
+
+Los elementos HTML se encuentran en varios estados, ya sea porque interactúan con ellos o porque uno de sus elementos secundarios está en un estado determinado.
+
+Por ejemplo, un usuario podría colocar el cursor sobre un elemento HTML con el puntero del ratón *o* el usuario también podría colocar el cursor sobre un elemento secundario. Para esas situaciones, use la pseudoclase `:hover`.
+
+```css
+/* El cursor está sobre nuestro enlace */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Hace que todos los párrafos pares tengan un fondo diferente */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+Obtenga más información en el [módulo de pseudoclases](/learn/css/pseudo-classes).
+
+### Pseudoelementos
+
+Los pseudoelementos se diferencian de las pseudoclases porque en lugar de responder al estado de la plataforma, actúan como si estuvieran insertando un nuevo elemento con CSS. Los pseudoelementos también son sintácticamente diferentes de las pseudoclases, ya que en vez de usar un solo signo de dos puntos (`:`), utilizamos un signo de dos puntos dobles (`::`).
+
+{% Aside %} Un signo de dos puntos dobles ( `::`) es lo que distingue a un pseudoelemento de una pseudoclase, pero debido a que esta distinción no estaba presente en las versiones anteriores de las especificaciones de CSS, los navegadores admiten dos puntos simples para los pseudoelementos originales, como `:before` y `:after` para ayudar con la compatibilidad con versiones anteriores de los navegadores más antiguos, como IE8. {% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+Al igual que en la demostración anterior, en la que puso el prefijo de la etiqueta de un enlace según el tipo de archivo que correspondía, puede usar el pseudoelemento `::before` para insertar contenido al **comienzo de un elemento**, o el pseudoelemento `::after` para insertar contenido al **final de un elemento**.
+
+Sin embargo, los pseudoelementos no se limitan a insertar contenido. También puede usarlos para apuntar a partes específicas de un elemento. Por ejemplo, suponga que tiene una lista. Utilice `::marker` para diseñar cada viñeta (o número) en la lista.
+
+```css
+/* Su lista ahora tendrá puntos rojos o números rojos */
+li::marker {
+  color: red;
+}
+```
+
+También puede usar `::selection` para agregarle un estilo al contenido que un usuario ha resaltado.
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+Obtenga más información en el [módulo sobre pseudoelementos](/learn/css/pseudo-elements).
+
+{% Assessment 'pseudo-selectors' %}
+
+## Selectores complejos
+
+Ya ha visto una amplia gama de selectores, pero a veces, necesitará un *control* más detallado con su CSS. Aquí es donde los selectores complejos intervienen para ayudar.
+
+Vale la pena recordar en este punto que, aunque los siguientes selectores nos dan más poder, solo podemos **descender en cascada** para seleccionar los elementos secundarios. No podemos apuntar ascendentemente y seleccionar un elemento principal. Cubriremos qué es una cascada y cómo funciona [en una lección posterior](/learn/css/the-cascade).
+
+### Combinadores
+
+Un combinador es lo que se encuentra entre dos selectores. Por ejemplo, si el selector era `p > strong`, el combinador es el carácter `>`. Los selectores que utilizan estos combinadores le ayudan a seleccionar elementos según su posición en el documento.
+
+#### Combinador descendiente
+
+Para entender los combinadores descendientes, primero debe entender los elementos principales y secundarios.
+
+```html
+<p>Un párrafo de texto con algo de <strong>texto en negrita para enfatizar</strong>.</p>
+```
+
+El elemento principal es `<p>` que contiene texto. Dentro de ese elemento `<p>` hay un elemento `<strong>`, lo que hace que su contenido esté en negrita. Debido a que está dentro de `<p>`, es un elemento secundario.
+
+Un combinador descendiente nos permite apuntar a un elemento secundario. Esto usa un espacio (` `) para indicarle al navegador que busque elementos secundarios:
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+Este fragmento selecciona todos los elementos `<strong>` que son elementos secundarios de los elementos `<p>` únicamente, para volverlos de color azul de forma recursiva.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbGN' } %} <figcaption>Debido a que el combinador descendiente es recursivo, se aplica el relleno agregado a cada elemento secundario, lo que da como resultado un efecto escalonado.</figcaption></figure>
+
+Este efecto se visualiza mejor en el ejemplo anterior, mediante el uso del selector de combinador, `.top div`. Esa regla CSS agrega relleno a la izquierda de esos elementos `<div>`. Debido a que el combinador es recursivo, a todos los elementos `<div>` que están en `.top` se les aplicará el mismo relleno.
+
+Échele un vistazo al panel HTML en esta demostración para ver cómo el elemento `.top` tiene varios elementos secundarios `<div>` que, a su vez, tienen elementos secundarios `<div>`.
+
+#### Combinador de hermano siguiente
+
+Puede buscar un elemento que siga inmediatamente a otro elemento si usa un cáracter `+` en su selector.
+
+{% Codepen {user: 'web-dot-dev', id: 'JjEPzwB'} %}
+
+Para agregar espacio entre elementos apilados, use el combinador hermano siguiente para agregar espacio *solo* si un elemento es el **hermano siguiente** de un elemento secundario de `.top`.
+
+Puede agregar margen a todos los elementos secundarios de `.top`, mediante el siguiente selector:
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+El problema con esto es que debido a que está seleccionando todos los elementos secundarios de `.top`, esta regla crea potencialmente un espacio adicional innecesario. El **combinador de hermano siguiente**, combinado con un **selector universal**, le permite no solo controlar qué elementos obtienen un espacio, sino también aplicar un espacio a **cualquier elemento**. Esto le proporciona cierta flexibilidad a largo plazo, independientemente de los elementos HTML que aparezcan en `.top`.
+
+#### Combinador de hermanos subsiguientes
+
+Un combinador subsiguiente es muy similar a un selector de hermano siguiente. Sin embargo, en lugar de un carácter `+`, utilice un carácter `~`. La diferencia es que un elemento solo tiene que seguir a otro elemento con el mismo elemento primario, en lugar de ser el siguiente elemento con el mismo elemento primario.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELzPPX', height: 400 } %} <figcaption>Utilice un selector subsiguiente junto con una pseudoclase `:checked` para crear un elemento de interruptor CSS puro.</figcaption></figure>
+
+Este combinador subsiguiente proporciona un poco menos de rigidez, lo que es útil en contextos como el ejemplo anterior, donde cambiamos el color de un interruptor personalizado cuando su casilla de verificación asociada tiene el estado `:checked`.
+
+#### Combinador secundario
+
+Un combinador secundario (también conocido como descendiente directo) le permite más control sobre la recursividad que viene con los selectores de combinador. Al usar el carácter `>`, limita el selector de combinador para que se aplique **solo** a los secundarios directos.
+
+Considere el ejemplo anterior de selector de hermanos siguientes. El espacio se agrega a cada **hermano siguiente**, pero si uno de esos elementos también tiene **elementos del hermano siguiente** como secundarios, puede resultar en un espaciado adicional no deseado.
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZYMJL' } %}
+
+Para aliviar este problema, cambie el **selector de hermanos siguientes** para incorporar un combinador de secundarios: `> * + *`. La regla ahora **solo** se aplicará a los secundarios directos de `.top`.
+
+{% Codepen { user: 'web-dot-dev', id: 'dyNbrEr' } %}
+
+### Selectores compuestos
+
+Puede combinar selectores para aumentar la especificidad y la legibilidad. Por ejemplo, para apuntar a los elementos `<a>`, que también tienen una clase de `.my-class`, escriba lo siguiente:
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+Esto no aplicaría un color rojo a todos los enlaces y también aplicaría el color rojo a `.my-class` **si** estuviera en un elemento `<a>`. Para obtener más información sobre esto, consulte el [módulo de especificidad](/learn/css/specificity).
+
+{% Assessment 'complex-selectors' %}
+
+## Recursos
+
+- [Referencia de selectores CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [Juego interactivo de selectores](https://flukeout.github.io/)
+- [Referencia de pseudoclases y pseudoelementos](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [Una herramienta que traduce los selectores de CSS en explicaciones sencillas en inglés](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/es/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/es/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/es/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/es/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/es/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/es/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/es/learn/css/sizing/index.md b/src/site/content/es/learn/css/sizing/index.md
new file mode 100644
index 00000000000..7b29bcf3af7
--- /dev/null
+++ b/src/site/content/es/learn/css/sizing/index.md
@@ -0,0 +1,336 @@
+---
+title: Unidades de dimensionamiento
+description: En este módulo aprenderá a dimensionar elementos mediante CSS, trabajando con el medio flexible de la web.
+audio:
+  title: 'The CSS Podcast   - 008: Dimensionamiento de unidades'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_008_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-13
+tags:
+  - css
+---
+
+La web es un medio responsivo, pero a veces deseamos controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo de esto es limitar la longitud de las líneas para mejorar la legibilidad. ¿Cómo haría eso en un medio flexible como la web?
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'bGgEGxj', tab: 'css,result' } %}</figure>
+
+Para este caso, puede usar una unidad `ch`, que es igual al ancho de un carácter "0" en la fuente renderizada a su tamaño calculado. Esta unidad le permite limitar el ancho del texto con una unidad diseñada para ajustar su tamaño, lo que a su vez, permite un control predecible independientemente del tamaño de ese texto. La unidad `ch` es una de las pocas unidades que son útiles para contextos específicos como este ejemplo.
+
+## Números
+
+Los números se utilizan para definir la `opacity`, `line-height` e incluso los valores del canal de color en `rgb`. Los números son enteros sin unidades (1, 2, 3, 100) y decimales (.1, .2, .3).
+
+Los números tienen significado según su contexto. Por ejemplo, al definir `line-height`, un número es representativo de una ratio si la define sin una unidad de apoyo:
+
+```css
+p {
+  font-size: 24px;
+  line-height: 1.5;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'yLgYZRK', tab: 'css,result' } %}</figure>
+
+En este ejemplo, `1.5` es igual al **150%** del **tamaño de fuente en píxeles calculado** del elemento `p`. Esto significa que si la `p` tiene un `font-size` de `24px`, la altura de la línea se calculará como `36px`.
+
+{% Aside %} Es una buena idea usar un valor sin unidades para `line-height`, en lugar de especificar una unidad. Como aprendió en el [módulo de herencia](/learn/css/inheritance), `font-size` se puede heredar. Definir una `line-height` sin unidades mantiene la altura de la línea en relación con el tamaño de la fuente. Esto da una mejor experiencia que, digamos, `line-height: 15px`, que no cambiará y puede parecer extraño con ciertos tamaños de fuente. {% endAside %}
+
+Los números también se pueden utilizar en los siguientes lugares:
+
+- Al configurar valores para filtros: `filter: sepia(0.5)` aplica un filtro sepia del `50%`.
+- Al configurar la opacidad: `opacity: 0.5` aplica una opacidad del `50%`.
+- En canales de color: `rgb(50, 50, 50)`, donde los valores 0-255 son aceptables para establecer un valor de color. [Ver lección de color](/learn/css/color).
+- Para transformar un elemento: `transform: scale(1.2)` escala el elemento en un 120% de su tamaño inicial.
+
+## Porcentajes
+
+Al usar un porcentaje en CSS, necesita saber cómo se calcula éste. Por ejemplo, `width` se calcula como un porcentaje del ancho del elemento principal.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  width: 50%; /* calculated: 150px */
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELbwwj', tab: 'css,result' } %}</figure>
+
+En el ejemplo anterior, el ancho de `div p` es `150px`.
+
+Si establece `margin` o `padding` como un porcentaje, serán una porción del **ancho del elemento principal**, independientemente de la dirección.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  margin-top: 50%; /* calculated: 150px */
+  padding-left: 50%; /* calculated: 150px */
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRQPqX', tab: 'css,result' } %}</figure>
+
+En el fragmento anterior, tanto `margin-top` como `padding-left` se calcularán en `150px`.
+
+```css
+div {
+  width: 300px;
+  height: 100px;
+}
+
+div p {
+  width: 50%; /* calculated: 150px */
+  transform: translateX(10%); /* calculated: 15px */
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgwBxv', tab: 'css,result' } %}</figure>
+
+Si establece un valor `transform` como porcentaje, se basa en el elemento con el conjunto de transformación. En este ejemplo, `p` tiene un valor `translateX` de `10%` y un `width` del `50%`. Primero, calcule cuál será el ancho: `150px` porque es el **50% del ancho de su padre**. Luego, toma el `10%` de `150px`, que son `15px`.
+
+{% Aside 'key-term' %} La propiedad transformación le permite alterar la apariencia y la posición de un elemento al rotarlo, sesgarlo, escalarlo y traducirlo. Esto se puede hacer en un espacio 2D y 3D. {% endAside %}
+
+## Dimensiones y longitudes
+
+Si adjunta una unidad a un número, se convierte en una dimensión. Por ejemplo, `1rem` es una dimensión. En este contexto, la unidad que se adjunta a un número se denomina en las especificaciones como un símbolo de dimensión. Las longitudes son **dimensiones que se refieren a la distancia** y pueden ser absolutas o relativas.
+
+### Longitudes absolutas
+
+Todas las longitudes absolutas se resuelven contra la misma base, lo que las hace predecibles dondequiera que se utilicen en su CSS. Por ejemplo, si usa `cm` para dimensionar su elemento y luego imprime, debería ser exacto si lo compara con una regla.
+
+```css
+div {
+  width: 10cm;
+  height: 5cm;
+  background: black;
+}
+```
+
+Si imprimiera esta página, el `div` se imprimiría como un rectángulo negro de 10x5cm. Tenga en cuenta que CSS se utiliza no solo para contenido digital, sino también para diseñar contenido impreso. Las longitudes absolutas pueden resultar muy útiles a la hora de diseñar para imprimir.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Unidad</th>
+        <th>Nombre</th>
+        <th>Equivalente a</th>
+      </tr>
+    </thead>
+  <tbody>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#cm">cm</a></td>
+      <td>Centímetros</td>
+      <td>1 cm = 96 px/2.54</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#mm">mm</a></td>
+      <td>Milimetros</td>
+      <td>1 mm = 1/10 de 1 cm</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#q">Q</a></td>
+      <td>Cuarto de milímetro</td>
+      <td>1Q = 1/40 de 1 cm</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#in">in</a></td>
+      <td>Pulgadas</td>
+      <td>1 in = 2.54 cm = 96 px</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#pc">pc</a></td>
+      <td>Picas</td>
+      <td>1pc = 1/6 de 1 in</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#pt">pt</a></td>
+      <td>Puntos</td>
+      <td>1 pt = 1/72 de 1 in</td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/css-values-4/#px">px</a></td>
+      <td>Pixeles</td>
+      <td>1 px = 1/96 de 1 in</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+### Longitudes relativas
+
+La longitud relativa se calcula contra un valor base, muy parecido a un porcentaje. La diferencia entre estos y los porcentajes es que puede dimensionar los elementos contextualmente. Esto significa que CSS tiene unidades como `ch` que usan el tamaño del texto como base y `vw` que se basa en el ancho de la ventana gráfica (la ventana de su navegador). Las longitudes relativas son particularmente útiles en la web debido a su naturaleza responsiva.
+
+#### Unidades relativas al tamaño de fuente
+
+CSS tiene unidades útiles que son relativas al tamaño de los elementos de la tipografía renderizada, como el tamaño del texto en sí (unidades `em`) o el ancho de los caracteres tipográficos (unidades `ch`).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>unidad</th>
+        <th>relativo a:</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#em">em</a></td>
+        <td>En relación con el tamaño de fuente, es decir, 1.5em será un 50% más grande que el tamaño de fuente calculado base de su padre. (Históricamente, la altura de la letra mayúscula "M").</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ex">ex</a></td>
+        <td>Heurística para determinar si se debe usar la x-height,, una letra "x" o `.5em` en el tamaño de fuente calculado actual del elemento.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#cap">cap</a></td>
+        <td>Altura de las letras mayúsculas en el tamaño de fuente calculado actual del elemento.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ch">ch</a></td>
+        <td>
+<a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">Avance de carácter</a> promedio de un glifo estrecho en la fuente del elemento (representado por el glifo "0").</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#ic">ic</a></td>
+        <td>
+<a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">Avance de carácter</a> promedio de un glifo de ancho completo en la fuente del elemento, representado por el glifo "水" (ideograma de agua CJK, U + 6C34).</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#rem">rem</a></td>
+        <td>Tamaño de fuente del elemento raíz (el valor predeterminado es 16px).</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#lh">lh</a></td>
+        <td>Altura de línea del elemento.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#rlh">rlh</a></td>
+        <td>Altura de línea del elemento raíz.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ttaikDgwEC572lrGgWlG.svg", alt="El texto CSS es 10x grande con etiquetas para altura ascendente, altura descendente y x-height. x-height representa 1ex y 0 representa 1ch" , width="800", height="203" %}</figure>
+
+#### Unidades relativas a la ventana gráfica
+
+Puede utilizar las dimensiones de la ventana gráfica (ventana del navegador) como una base relativa. Estas unidades reparten el espacio disponible de la ventana gráfica.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>unidad</th>
+        <th>relativa a</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vw">vw</a></td>
+        <td>1% del ancho de la ventana gráfica. Se usa esta unidad para hacer trucos de fuentes geniales, como cambiar el tamaño de una fuente de encabezado en función del ancho de la página, de modo que a medida que el usuario cambia el tamaño de la ventana, la fuente también cambia de tamaño.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vh">vh</a></td>
+        <td>1% de la altura de la ventana gráfica. Puede usarla para organizar elementos en una interfaz de usuario, si tiene una barra de herramientas de pie de página, por ejemplo.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vi">vi</a></td>
+        <td>1% del tamaño de la ventana gráfica en el <a href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis">eje en línea</a> del elemento raíz. El eje se refiere a los modos de escritura. En los modos de escritura horizontal como el inglés, el eje en línea es horizontal. En los modos de escritura vertical como algunos tipos de letra japoneses, el eje en línea va de arriba a abajo.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vb">vb</a></td>
+        <td>1% del tamaño de la ventana gráfica en el <a href="https://www.w3.org/TR/css-writing-modes-4/#block-axis">eje del bloque</a> del elemento raíz. Para el eje del bloque, esta sería la direccionalidad del lenguaje. Los idiomas LTR como el inglés tendrían un eje de bloque vertical, ya que los lectores en inglés analizan la página de arriba a abajo. Un modo de escritura vertical tiene un eje de bloque horizontal.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vmin">vmin</a></td>
+        <td>1% de la dimensión más pequeña de la ventana gráfica.</td>
+      </tr>
+      <tr>
+        <td><a href="https://www.w3.org/TR/css-values-4/#vmax">vmax</a></td>
+        <td>1% de la dimensión más grande de la ventana gráfica.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+```css
+div {
+  width: 10vw;
+}
+
+p {
+  max-width: 60ch;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'JjEYqXa' } %}</figure>
+
+En este ejemplo, el `div` será el 10% del ancho de la ventana gráfica, porque `1vw` es el **1% del ancho de la ventana gráfica**. El elemento `p` tiene un `max-width` de `60ch` que significa que no puede exceder el ancho de 60 caracteres "0" en la fuente y el tamaño calculados.
+
+{% Aside 'objective' %}
+
+Al dimensionar el texto con unidades relativas como `em` o `rem`, en lugar de una unidad absoluta, como `px`, el tamaño de su texto puede responder a las preferencias del usuario. Esto puede incluir el tamaño de fuente del sistema o el tamaño de fuente del elemento principal, como `<body>`. El tamaño base del `em` es el padre del elemento y el tamaño base del `rem` es el tamaño de fuente base del documento.
+
+Si no define un `font-size` en su elemento `html`, este tamaño de fuente del sistema preferido por el usuario será respetado si usa longitudes relativas, como `em` y `rem`. Si usa unidades `px` para cambiar el tamaño del texto, esta preferencia se ignorará.
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/cUEl77VN4ZtAdElV4fd6.mp4", autoplay=true, controls=true, muted=true %}
+
+{% endAside %}
+
+## Unidades misceláneas
+
+Hay algunas otras unidades que se han especificado para tratar tipos particulares de valores.
+
+### Unidades angulares
+
+En el [módulo de color](/learn/css/color/), analizamos las **unidades de ángulo**, que son útiles para definir valores de grados, como el tono en `hsl`. También son útiles para rotar elementos dentro de funciones de transformación.
+
+```css
+div {
+  width: 150px;
+  height: 150px;
+  transform: rotate(60deg);
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'VwPvRbK', tab: 'css,result' } %}</figure>
+
+Usando launidad de ángulo `deg`, puede rotar un `div` 90 ° en su eje central.
+
+```css
+div {
+  background-image: url('a-low-resolution-image.jpg');
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  div {
+    background-image: url('a-high-resolution-image.jpg');
+  }
+}
+```
+
+{% Aside %} Otros unidades de ángulo incluyen `rad` (radianes), `grad` (grados centesimales), y unidades `turn`, que representan una parte de un ángulo, donde `1turn` = `360deg`, y `0.5turn` = `180deg`. {% endAside %}
+
+#### Unidades de resolución
+
+En el ejemplo anterior, el valor de `min-resolution` es `192dpi`. La unidad `dpi` significa **puntos por pulgada**. Un contexto útil para esto es detectar pantallas de muy alta resolución, como pantallas Retina, en una consulta de medios y mostrar una imagen de mayor resolución.
+
+{% Assessment 'sizing' %}
+
+## Recursos
+
+- [Unidades y valores de especificación CSS Nivel 4](https://www.w3.org/TR/css-values-4)
+- [Dimensionamiento y unidades en MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Todo sobre Ems](https://learn.scannerlicker.net/2014/07/31/so-how-much-is-an-em/)
+- [Un explicador de porcentajes](https://wattenberger.com/blog/css-percents)
diff --git a/src/site/content/es/learn/css/sizing/sizing.assess.yml b/src/site/content/es/learn/css/sizing/sizing.assess.yml
new file mode 100644
index 00000000000..090fd8e128a
--- /dev/null
+++ b/src/site/content/es/learn/css/sizing/sizing.assess.yml
@@ -0,0 +1,51 @@
+setLeader: Test your knowledge of sizing
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,4,5,7,8"
+    stem: Which of the following are valid dimensions?
+    options:
+      - content: cm
+        rationale: "Centimeters, a valid absolute dimension."
+      - content: ui
+        rationale: "User interface is not a dimension in CSS."
+      - content: in
+        rationale: "Inches, a valid absolute dimension."
+      - content: 8th
+        rationale: "Not a CSS dimension"
+      - content: px
+        rationale: "Pixels, a valid absolute dimension."
+      - content: ch
+        rationale: "Character units, a valid relative dimension."
+      - content: ux
+        rationale: "User experience is not a dimension in CSS."
+      - content: em
+        rationale: "Letter 'M' units, a valid relative dimension."
+      - content: ex
+        rationale: "Letter 'x' units, a valid relative dimension."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How are absolute and relative units different?
+    options:
+      - content: "Absolute values can't change but relative units can"
+        rationale: "Absolute values can change, but the base they
+        calculate against can't."
+      - content: "An absolute length is calculated against a single shared base
+      value, where a relative unit is compared against a base value that can change."
+        rationale: "Relative units are more adaptive and fluid because of their
+        contextual awareness, but there's a power and predictability to absolute
+        units that can be foundational for certain designs."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Viewport units are absolute.
+    options:
+      - content: "True"
+        rationale: "They may feel absolute, but they're relative to a viewport,
+        which could be an iframe or webview, and isn't always representative of
+        a device screen size."
+      - content: "False"
+        rationale: "They are relative to the document window they were created
+        in, which may or may not be the same as a device screen."
diff --git a/src/site/content/es/learn/css/specificity/index.md b/src/site/content/es/learn/css/specificity/index.md
new file mode 100644
index 00000000000..ad420a2f071
--- /dev/null
+++ b/src/site/content/es/learn/css/specificity/index.md
@@ -0,0 +1,304 @@
+---
+title: Especificidad
+description: Este módulo analiza en profundidad la especificidad, una parte clave de la cascada.
+audio:
+  title: 'El Podcast de CSS - 003: Especificidad'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Suponga que está trabajando con los siguientes HTML y CSS:
+
+```html
+<button class="branding">Hello, Specificity!</button>
+```
+
+```css
+button {
+  color: red;
+}
+
+.branding {
+  color: blue;
+}
+```
+
+Aquí hay dos reglas que compiten. Una coloreará el botón de rojo y el otro de azul. ¿Qué regla se aplica al elemento? Comprender el algoritmo de la especificación CSS sobre la especificidad es la clave para comprender cómo el CSS decide entre reglas en competencia.
+
+La especificidad es una de las cuatro etapas distintas de la cascada, que se cubrió en el último módulo de [la cascada](/learn/css/the-cascade/).
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'YzNKMXm',
+  height: 200
+} %}
+</figure>
+
+## Puntuación de especificidad
+
+Cada regla de selección obtiene una puntuación. Puede pensar en la especificidad como una puntuación total y cada tipo de selector gana puntos para esa puntuación. El selector con la puntuación más alta gana.
+
+En un proyecto real con especificidad, debe haber un balance entre el asegurarse de que las reglas de CSS que espera aplicar, realmente se *apliquen,* y que, en general, se mantengan las puntuaciones bajas para evitar la complejidad. El puntaje solo debe ser tan alto como sea necesario, en lugar de ser lo más alto posible. En el futuro, puede que sea necesario aplicar algunos CSS más importantes. Si busca el puntaje más alto, hará que ese trabajo sea difícil.
+
+## Puntuación de cada tipo de selector
+
+Cada tipo de selector gana puntos. Agregue todos estos puntos para calcular la especificidad general de un selector.
+
+### Selector universal
+
+Un [selector universal](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) (`*`) **no** tiene especificidad y obtiene **0 puntos**. Esto significa que cualquier regla con 1 o más puntos lo anulará.
+
+```css
+* {
+  color: red;
+}
+```
+
+### Selector de elementos o pseudoelementos
+
+Un selector de [elemento](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) (tipo) o [pseudoelemento](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) obtiene **1 punto de especificidad**.
+
+#### Selector de tipo
+
+```css
+div {
+  color: red;
+}
+```
+
+#### Selector de pseudoelementos
+
+```css
+::selection {
+  color: red;
+}
+```
+
+### Selector de clase, pseudoclase o atributo
+
+Un selector de [clase](https://developer.mozilla.org/docs/Web/CSS/Class_selectors), [pseudoclase](https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes) o [atributo](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) obtiene **10 puntos de especificidad**.
+
+#### Selector de clases
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+#### Selector de pseudoclase
+
+```css
+:hover {
+  color: red;
+}
+```
+
+#### Selector de atributos
+
+```css
+[href='#'] {
+  color: red;
+}
+```
+
+La pseudoclase [`:not()`](https://developer.mozilla.org/docs/Web/CSS/:not) en sí misma no agrega nada al cálculo de especificidad. Sin embargo, los selectores que pasan como argumentos se agregan al cálculo de especificidad.
+
+```css
+div:not(.my-class) {
+  color: red;
+}
+```
+
+Esta muestra tendría **11 puntos** de especificidad porque tiene un selector de tipo (`div`) y una clase *dentro de* `:not()`.
+
+### Selector de ID
+
+Un selector de [ID](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) obtiene **100 puntos de especificidad**, siempre que use un selector de ID (`#myID`) y no un selector de atributo (`[id="myID"]`).
+
+```css
+#myID {
+  color: red;
+}
+```
+
+### Atributo de estilo en línea
+
+El CSS aplicado directamente al atributo `style` del elemento HTML, obtiene una **puntuación de especificidad de 1.000 puntos**. Esto significa que para anularlo en CSS, debe escribir un selector extremadamente específico.
+
+```html
+<div style="color: red"></div>
+```
+
+### Regla `!important`
+
+Por último, escribir `!important` al final de un valor de CSS obtiene una puntuación de especificidad de **10.000 puntos**. Esta es la mayor especificidad que puede obtener un objeto individual.
+
+Una regla `!important` se aplica a una propiedad CSS, por lo que todo en la regla general (selector y propiedades) no obtiene la misma puntuación de especificidad.
+
+```css
+.my-class {
+  color: red !important; /* 10,000 points */
+  background: white; /* 10 points */
+}
+```
+
+{% Assessment 'scoring-beginner' %}
+
+## Especificidad en contexto
+
+La especificidad de cada selector que coincide con un elemento se suma. Considere este ejemplo de HTML:
+
+```html
+<a class="my-class another-class" href="#">A link</a>
+```
+
+Este enlace tiene dos clases. Agregue el siguiente CSS y obtendrá **1 punto de especificidad**:
+
+```css
+a {
+  color: red;
+}
+```
+
+Haga referencia a una de las clases en esta regla, ahora tiene **11 puntos de especificidad**:
+
+```css
+a.my-class {
+  color: green;
+}
+```
+
+Agregue la otra clase al selector, ahora tiene **21 puntos de especificidad**:
+
+```css
+a.my-class.another-class {
+  color: rebeccapurple;
+}
+```
+
+Agregue el atributo `href` al selector, ahora tiene **31 puntos de especificidad**:
+
+```css
+a.my-class.another-class[href] {
+  color: goldenrod;
+}
+```
+
+Finalmente, agregue una pseudiclase `:hover`, y el selector termina con **41 puntos de especificidad**:
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'scoring-advanced' %}
+
+## Visualizando la especificidad
+
+En diagramas y calculadoras de especificidad, la especificidad a menudo se visualiza así:
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/McrFhjqHXMznUzXbRuJ6.svg", alt="Un diagrama que muestra los selectores más específicos a los menos específicos", width="800", height="474" %}
+
+El grupo de la izquierda son los selectores de `id`. El segundo grupo son los selectores de clase, atributo y pseudoclase. El grupo final son los selectores de elementos y pseudoelementos.
+
+Como referencia, el siguiente selector es `0-4-1`:
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'visualizing' %}
+
+## Especificidad pragmáticamente creciente
+
+Digamos que tenemos algo de CSS que se parece a esto:
+
+```css
+.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+Con un HTML que se ve así:
+
+```html
+<button class="my-button" onclick="alert('hello')">Click me</button>
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoxdR', tab: 'css,result' } %}</figure>
+
+El botón tiene un fondo gris, porque el segundo selector gana **11 puntos de especificidad** (`0-1-1`). Esto se debe a que tiene un selector de tipo (`button`), que es de **1 punto** y un selector de atributo (`[onclick]`), que es de **10 puntos**.
+
+La regla anterior, `.my-button` obtiene **10 puntos** (`0-1-0`), porque tiene un selector de clase.
+
+Si desea mejorar esta regla, repita el selector de clases de la siguiente manera:
+
+```css
+.my-button.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'zYNOXBJ', tab: 'css,result' } %}</figure>
+
+Ahora, el botón tendrá un fondo azul, porque el nuevo selector obtiene una puntuación de especificidad de **20 puntos** (`0-2-0`).
+
+{% Aside 'caution' %} Si encuentra que necesita aumentar la especificidad de esta manera con frecuencia, puede indicar que está escribiendo selectores demasiado específicos. Considere si puede refactorizar su CSS para reducir la especificidad de otros selectores para evitar este problema. {% endAside %}
+
+## Una puntuación de especificidad coincidente hace que la instancia más nueva gane
+
+Sigamos con el ejemplo del botón por ahora y cambiemos el CSS a esto:
+
+```css
+.my-button {
+  background: blue;
+}
+
+[onclick] {
+  background: grey;
+}
+```
+
+El botón tiene un fondo gris, porque **ambos selectores tienen una puntuación de especificidad idéntica** ( `0-1-0` ).
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'zYNOXKJ', tab: 'css,result' } %}</figure>
+
+Si cambia las reglas en el orden de origen, el botón será azul.
+
+```css
+[onclick] {
+  background: grey;
+}
+
+.my-button {
+  background: blue;
+}
+```
+
+<figure>{% Codepen {user: 'web-dot-dev', id: 'WNReWRO', tab: 'css,result' } %}</figure>
+
+Esta es la única instancia en la que gana el CSS más nuevo. Para hacerlo, debe coincidir con la especificidad de otro selector que apunte al mismo elemento.
+
+## Recursos
+
+- [CSS SpeciFISHity](http://specifishity.com)
+- [Calculadora de especificidad](https://specificity.keegan.st)
+- [Especificidad MDN](https://developer.mozilla.org/docs/Web/CSS/Specificity)
+- [Detalles sobre la especificidad de CSS](https://css-tricks.com/specifics-on-css-specificity/)
+- [Otra calculadora de especificidad](https://polypane.app/css-specificity-calculator)
diff --git a/src/site/content/es/learn/css/specificity/scoring-advanced.assess.yml b/src/site/content/es/learn/css/specificity/scoring-advanced.assess.yml
new file mode 100644
index 00000000000..5134be26d83
--- /dev/null
+++ b/src/site/content/es/learn/css/specificity/scoring-advanced.assess.yml
@@ -0,0 +1,21 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is worth **21 points**?
+    options:
+      - content: "`article > section`"
+        rationale: "Elements are worth 1 point, there are 2 elements in the
+        selector, making this worth **2 points**."
+      - content: "`article.card.dark`"
+        rationale: "Elements are worth 1 point, classes are worth 10 points, and
+        with 2 classes and 1 element, that makes this selector worth **21
+        points**."
+      - content: "`article:hover a[href]`"
+        rationale: "Elements are worth 1 point, pseudo-classes and attributes
+        are worth 10 points, there are 2 points for the elements, and 20 points
+        for the attributes and classes, makes this selector worth **22
+        points**."
\ No newline at end of file
diff --git a/src/site/content/es/learn/css/specificity/scoring-beginner.assess.yml b/src/site/content/es/learn/css/specificity/scoring-beginner.assess.yml
new file mode 100644
index 00000000000..035104bf71e
--- /dev/null
+++ b/src/site/content/es/learn/css/specificity/scoring-beginner.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is the specificity score of `a[href="#"]`?
+    options:
+      - content: "1"
+        rationale: 'The `a` is worth 1 point, but the `[href="#"]` is worth 10
+        points.'
+      - content: "5"
+        rationale: "Try again!"
+      - content: "11"
+        rationale: 'The `a` is worth 1 point and the `[href="#"]` is worth 10
+        points, making a total score of **11 points**.'
diff --git a/src/site/content/es/learn/css/specificity/visualizing.assess.yml b/src/site/content/es/learn/css/specificity/visualizing.assess.yml
new file mode 100644
index 00000000000..dd5cd715169
--- /dev/null
+++ b/src/site/content/es/learn/css/specificity/visualizing.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity visualizing
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is `1-2-1`?
+    options:
+      - content: "`section#specialty.dark`"
+        rationale: 'This selector is visualized as `1-1-1`.'
+      - content: "`#specialty:hover li.dark`"
+        rationale: "🎉"
+      - content: "`[data-state-rad].dark#specialty:hover`"
+        rationale: 'This selector is visualized as `1-3-0`.'
+      - content: "`li#specialty section.dark`"
+        rationale: 'This selector is visualized as `1-1-2`.'
diff --git a/src/site/content/es/learn/css/the-cascade/conclusion.assess.yml b/src/site/content/es/learn/css/the-cascade/conclusion.assess.yml
new file mode 100644
index 00000000000..8ed8ba41df4
--- /dev/null
+++ b/src/site/content/es/learn/css/the-cascade/conclusion.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: The Cascade can be used for...
+    options:
+      - content: "Resolving conflicts when multiple styles apply to an element."
+        rationale: "This is one of its primary goals, conflict resolution."
+      - content: "Ensuring there's only one style value for each property at draw time."
+        rationale: "The text can only be one color, and The Cascade is a way of
+        determining which it should be."
+      - content: "Scoring and weighting style rules."
+        rationale: "Scoring and weighting are part of the sorting phase of The
+        Cascade."
+      - content: "Sorting and filtering style attributes."
+        rationale: "Sorting and filtering are phases of The Cascade to help
+        understand aspects of conflict resolution."
diff --git a/src/site/content/es/learn/css/the-cascade/index.md b/src/site/content/es/learn/css/the-cascade/index.md
new file mode 100644
index 00000000000..7fc53d8478e
--- /dev/null
+++ b/src/site/content/es/learn/css/the-cascade/index.md
@@ -0,0 +1,151 @@
+---
+title: La cascada
+description: |-
+  A veces, dos o más reglas CSS pueden aplicarse a un elemento.
+  En este módulo, descubre cómo el navegador elige cuál usar y cómo controlar esta selección.
+audio:
+  title: 'The CSS Podcast   - 004: The Cascade'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+tags:
+  - css
+---
+
+CSS son las siglas para Cascading Stylesheets (hojas de estilo en cascada). La cascada es el algoritmo para resolver conflictos donde se aplican múltiples reglas CSS a un elemento HTML. Es la razón por la que el texto del botón con el siguiente CSS será azul.
+
+```css
+button {
+  color: red;
+}
+
+button {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'GRrgMOm', height: 200 } %}</figure>
+
+Comprender el algoritmo en cascada te ayuda a comprender en cómo el navegador resuelve conflictos como este. El algoritmo en cascada se divide en 4 etapas distintas.
+
+1. **Posición y orden de aparición**: El orden en el que aparecen tus reglas CSS
+2. **Especificidad**: Un algoritmo que determina qué selector de CSS tiene la coincidencia más fuerte
+3. **Origen**: El orden en el que aparece CSS y de dónde proviene, ya sea un estilo de navegador, CSS de una extensión de navegador o tu propio CSS creado
+4. **Importancia**: Algunas reglas CSS tienen más peso que otras, especialmente con el tipo de regla `!important`
+
+## Posición y orden de aparición
+
+La cascada tiene en cuenta el orden en que aparecen las reglas CSS y cómo aparecen mientras calcula la resolución de conflictos.
+
+La demostración que se encuentra al comienzo de esta lección es el ejemplo más sencillo de posición. Hay dos reglas que tienen selectores de especificidad idéntica, por lo que la última en ser declarada fue la que ganó.
+
+Los estilos pueden provenir de varias fuentes en una página HTML, como una etiqueta de `<link>`, una etiqueta `<style>` incrustada y CSS en línea como se define en el atributo de `style`.
+
+Si tienes un `<link>` que incluye CSS en la parte superior de tu página HTML y tienes otro `<link>` que incluye un CSS en la parte inferior de tu página, el `<link>` inferior tendrá la mayor especificidad. Lo mismo ocurre con los elementos de `<style>`. Se vuelven más específicos cuanto más abajo están en la página.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'NWdPaWv' } %} <figcaption> El botón tiene un fondo azul, como lo define el CSS, que está incluido en un elemento <code>&lt;link /&gt;</code>. Una regla CSS que establece que sea oscura se encuentra en una segunda hoja de estilo vinculada y se aplica debido a donde se encuentra en su posición (especificada más tarde).</figcaption></figure>
+
+Este orden también se aplica a los elementos de `<style>`. Si se declaran antes de un `<link>`, el CSS de la hoja de estilo vinculada tendrá la mayor especificidad.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbLoB' } %} <figcaption> El elemento de <code>&lt;style&gt;</code> se declara en <code>&lt;head&gt;</code>, mientras que el elemento de <code>&lt;link /&gt;</code> se declara en <code>&lt;body&gt;</code>. Esto significa que obtiene más especificidad que el elemento de <code>&lt;style&gt;</code></figcaption></figure>
+
+Un atributo `style` en línea con CSS declarado anulará todos los demás CSS, independientemente de su posición, a menos que una declaración tenga definido el atributo de `!important`.
+
+La posición también se aplica en el orden de tus reglas CSS. En este ejemplo, el elemento tendrá un fondo violeta porque `background: purple` se declaró en último lugar. Debido a que el fondo verde se declaró antes que el fondo violeta, el primero será ignorado por el navegador.
+
+```css
+.my-element {
+  background: green;
+  background: purple;
+}
+```
+
+Poder especificar dos valores para la misma propiedad puede ser una forma sencilla de crear alternativas para los navegadores que no admiten un valor en particular. En el siguiente ejemplo, `font-size` se declara dos veces. Si el navegador es compatible con `clamp()`, se descartará la declaración de `font-size`. Si `clamp()` no es compatible, se respetará la declaración inicial y el tamaño de fuente será 1.5rem
+
+```css
+.my-element {
+  font-size: 1.5rem;
+  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbPMP' } %}</figure>
+
+{% Aside %} Este enfoque de declarar la misma propiedad dos veces funciona porque los navegadores ignoran los valores que no comprenden. A diferencia de otros lenguajes de programación, CSS no arrojará un error ni interrumpirá tu programa cuando detecte una línea que no puede analizar; el valor que no puede analizar no es válido y, por lo tanto, se ignora. Luego, el navegador continúa procesando el resto del CSS sin romper las cosas que ya comprende. {% endAside %}
+
+{% Assessment 'position' %}
+
+## Especificidad
+
+La especificidad es un algoritmo que determina qué selector de CSS es el más específico, utilizando un sistema de ponderación o puntuación para realizar esos cálculos. Al hacer una regla más específica, puede hacer que se aplique incluso si algún otro CSS que coincida con el selector aparece más adelante en el CSS.
+
+En [la siguiente lección](/learn/css/specificity), puedes aprender los detalles de cómo se calcula la especificidad; sin embargo, tener en cuenta algunas cosas te ayudará a evitar demasiados problemas de especificidad.
+
+El CSS dirigido a una clase en un elemento hará que la regla sea más específica y, por lo tanto, se considerará más importante de aplicar que el CSS dirigido solamente al elemento. Esto significa que con el siguiente CSS, el `h1` será de color rojo aunque ambas reglas coincidan y la regla para el `h1` venga más adelante en la hoja de estilo.
+
+```html
+<h1 class="my-element">Heading</h1>
+```
+
+```css
+.my-element {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}
+```
+
+Una `id` hace que el CSS sea aún más específico, por lo que los estilos aplicados a una id anularán los aplicados de muchas otras formas. Esta es una de las razones por las que generalmente no es una buena idea adjuntar estilos a una `id`. Puede dificultar la sobrescritura de ese estilo con otra cosa.
+
+### La especificidad es acumulativa
+
+Como aprenderás en la siguiente lección, a cada tipo de selector se le otorgan puntos que indican qué tan específico es, los puntos para todos los selectores que has utilizado para apuntar a un elemento se suman. Esto significa que si apuntas a un elemento con una lista de selección como `a.my-class.another-class[href]:hover`, obtendrás algo bastante difícil de sobrescribir con otro CSS. Por esta razón, y para ayudar a que tu CSS sea más reutilizable, es una buena idea mantener tus selectores lo más simples posible. Usa la especificidad como una herramienta para llegar a los elementos cuando lo necesites, pero siempre considera refactorizar listas de selectores largas y específicas, si es posible.
+
+## Origen
+
+El CSS que escribes no es el único CSS que se aplica a una página. La cascada tiene en cuenta el origen del CSS. Este origen incluye la hoja de estilo interna del navegador, los estilos agregados por las extensiones del navegador o el sistema operativo y tu CSS creado. El **orden de especificidad de estos orígenes**, desde el menos específico al más específico, son los siguientes:
+
+1. **Estilos base de agente de usuario**. Estos son los estilos que tu navegador aplica a los elementos HTML de forma predeterminada.
+2. **Estilos de usuarios locales**. Estos pueden provenir del nivel del sistema operativo, como un tamaño de fuente base o una preferencia de movimiento reducido. También pueden provenir de extensiones de navegador, como una extensión de navegador que permite al usuario escribir su propio CSS personalizado para una página web.
+3. **CSS creado**. El CSS que tú creas.
+4. **Los `!important` creados**. Cualquier `!important` que agregues a tus declaraciones creadas.
+5. **Estilos de usuarios locales `!important`**. Cualquier `!important` que provenga del nivel del sistema operativo o del nivel de extensión del navegador CSS.
+6. **Agente de usuario `!important`**. Cualquier `!important` que se define en el CSS predeterminado, proporcionado por el navegador.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/zPdaZ6G11oYrgJ78EfF7.svg", alt="Una demostración visual del orden de los orígenes como también se explica en la lista.", width="800", height="347" %}</figure>
+
+Si tienes un `!important` en el CSS que hayas creado y el usuario tiene una regla de `!important` en su CSS personalizado, ¿cuál CSS será el ganador?
+
+{% Assessment 'origin' %}
+
+## Importancia
+
+No todas las reglas de CSS se calculan de la misma manera entre sí, ni se les da la misma especificidad entre sí.
+
+El **orden de importancia**, de menor a mayor importancia, es el siguiente:
+
+1. tipo de regla normal, como `font-size` , `background` o `color`
+2. tipo de regla de `animation`
+3.  tipo de regla de `!important` (siguiendo el mismo orden que el origen)
+4. tipo de regla de `transition`
+
+Los tipos de reglas de transition (transición) y animation (animación) tienen más importancia que las reglas normales. En el caso de las transiciones, es más importante que los tipos de reglas `!important`. Esto se debe a que cuando una animación o transición se activa, su comportamiento esperado es cambiar el estado visual.
+
+## Usando DevTools para averiguar por qué no se aplican algunos CSS
+
+Browser DevTools normalmente mostrará todos los CSS que podrían coincidir con un elemento, mientras los que no se utilizarán se terminan tachando.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Z6aLsqcqjGAUsWzq7DZs.png", alt="Una imagen de DevTools del navegador con un CSS sobrescrito que fue tachado", width="800", height="446" %}</figure>
+
+Si el CSS que esperabas aplicar no aparece en lo absoluto, entonces no coincide con el elemento. En ese caso, debes de buscar en otra parte, tal vez por un error tipográfico en el nombre de una clase o elemento o algún CSS no válido.
+
+{% Assessment 'conclusion' %}
+
+## Recursos
+
+- [Un explicador de la cascada muy interactivo](https://wattenberger.com/blog/css-cascade)
+- [Referencia de cascada de MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
diff --git a/src/site/content/es/learn/css/the-cascade/origin.assess.yml b/src/site/content/es/learn/css/the-cascade/origin.assess.yml
new file mode 100644
index 00000000000..98fd0ca2f80
--- /dev/null
+++ b/src/site/content/es/learn/css/the-cascade/origin.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of cascade origins
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      **Test your knowledge of cascade origins**, consider the following style
+      rules from various origins:
+
+      #### User-agent style
+      ```css
+      h1 { margin-block-start: 0.83em; }
+      ```
+
+      #### Bootstrap
+      ```css
+      h1 { margin-block-start: 20px; }
+      ```
+
+      #### Page Author styles
+      ```css
+      h1 { margin-block-start: 2ch; }
+
+      @media (max-width: 480px) {
+        h1 { margin-block-start: 1ch; }
+      }
+      ```
+
+      #### User custom style
+      ```css
+      h1 { margin-block-start: 2rem !important; }
+      ```
+
+      Then, given the following HTML:
+      ```html
+      <h1>Lorem ipsum</h1>
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What is the final `margin-block-start` of the `h1`?"
+    options:
+      - content: 20px
+        rationale: "Bootstrap is part of the authored origin, which loses to the
+        important local user style."
+      - content: 0.83em
+        rationale: "The user agent style origin loses to the important local
+        user style."
+      - content: 2rem
+        rationale: "This `!important` user custom style has the most specific
+        origin."
+      - content: 2ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
+      - content: 1ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
diff --git a/src/site/content/es/learn/css/the-cascade/position.assess.yml b/src/site/content/es/learn/css/the-cascade/position.assess.yml
new file mode 100644
index 00000000000..cd4560468b1
--- /dev/null
+++ b/src/site/content/es/learn/css/the-cascade/position.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      If you have the following HTML on your page:
+
+      ```html
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <link rel="stylesheet" href="styles.css" />
+        </head>
+        <body>
+          <button>I am a button</button>
+          <style>
+            button {
+              background: pink;
+            }
+          </style>
+        </body>
+      </html>
+      ```
+
+      Inside `styles.css`, is the following CSS rule:
+
+      ```css
+      button {
+        background: yellow;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What color is the button's background?
+    options:
+      - content: pink
+        rationale: | 
+          The embedded `<style>` origin is further down the page than the
+          `<link>` tag, so while the specificity of `button` is the same, the
+          **position** of the style rule makes it win.
+      - content: yellow
+        rationale: | 
+          To the HTML document, the yellow button background may have been read
+          first, but a newer rule of the same specificity was discovered later,
+          making this rule not apply to the button.
\ No newline at end of file
diff --git a/src/site/content/es/learn/index.md b/src/site/content/es/learn/index.md
new file mode 100644
index 00000000000..e18d8e0745a
--- /dev/null
+++ b/src/site/content/es/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: Aprender
+---
diff --git a/src/site/content/es/learn/learn.11tydata.js b/src/site/content/es/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/es/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/es/media/index.md b/src/site/content/es/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/es/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/es/media/video-and-source-tags/index.md b/src/site/content/es/media/video-and-source-tags/index.md
new file mode 100644
index 00000000000..8408dd6d7e1
--- /dev/null
+++ b/src/site/content/es/media/video-and-source-tags/index.md
@@ -0,0 +1,227 @@
+---
+layout: post
+title: Las etiquetas <video> y <source>
+authors:
+  - samdutton
+  - joemedley
+  - derekherman
+description: Usted preparó correctamente un archivo de video para la web. Le dio las dimensiones y la resolución correctas. Incluso creó archivos WebM y MP4 separados para diferentes navegadores. Para que cualquiera lo vea, aún deberá agregarlo a una página web.
+date: 2014-02-15
+updated: 2021-07-05
+tags:
+  - media
+---
+
+Usted [preparó correctamente un archivo de video](/prepare-media/) para la web. Le dio las dimensiones y la resolución correctas. Incluso creó archivos WebM y MP4 separados para diferentes navegadores
+
+Para que cualquiera pueda ver su video, aún debe agregarlo a una página web. Para hacerlo correctamente, es necesario agregar dos elementos HTML: el elemento [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video) y el elemento [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source). Además de los conceptos básicos sobre estas etiquetas, este artículo explica los atributos que debe agregar a esas etiquetas para crear una buena experiencia de usuario.
+
+{% Aside %} Siempre tiene la opción de subir su archivo a [YouTube](https://www.youtube.com/) o [Vimeo](https://vimeo.com). En muchos casos, esto es preferible que el procedimiento descrito aquí. Estos servicios se encargan de convertir el formato y el tipo de archivo por usted, además de proporcionar los medios para incrustar un video en su página web. Si necesita administrar esto usted mismo, siga leyendo. {% endAside %}
+
+## Cómo especificar un solo archivo
+
+Aunque no se recomienda, puede utilizar el elemento video por sí mismo. Utilice siempre el atributo `type` como se muestra a continuación. El navegador lo utiliza para determinar si puede reproducir el archivo de video proporcionado. Si no puede, se muestra el texto adjunto.
+
+```html
+<video src="chrome.webm" type="video/webm">
+    <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+### Cómo especificar varios formatos de archivos
+
+De acuerdo con los [fundamentos de los archivos multimedia](/media-file-basics/), no todos los navegadores son compatibles con los mismos formatos de video. El elemento `<source>` permite especificar varios formatos como alternativa en caso de que el navegador del usuario no admita uno de ellos.
+
+El siguiente ejemplo produce el video incrustado que se utiliza como ejemplo más adelante en este artículo.
+
+```html
+<video controls>
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
+  <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+[Pruébelo en Glitch](https://track-demonstration.glitch.me) ( [fuente](https://glitch.com/edit/#!/track-demonstration) )
+
+{% Aside %} Observe que en el ejemplo anterior se introdujo el atributo `controls`. Esto indica que los navegadores deben permitir al usuario controlar la reproducción de video, incluyendo el volumen, búsqueda, selección de subtítulos y pausa/reanudación de la reproducción entre otras funciones. {% endAside %}
+
+Siempre debe agregar un atributo `type` a las etiquetas `<source>` aunque es opcional. Esto asegura que el navegador solo puede descargar el archivo que es capaz de reproducir.
+
+Este enfoque tiene varias ventajas si se compara con publicar diferentes HTML o scripts del lado del servidor, especialmente en los dispositivos móviles:
+
+- Puede hacer una lista de los formatos por orden de preferencia.
+- El cambio del lado del cliente reduce la latencia, ya que solo se realiza una solicitud para obtener el contenido.
+- Permitir que el navegador elija un formato es más sencillo, rápido y potencialmente más confiable que utilizar una base de datos de respaldo del lado del servidor con detección como agente de usuario.
+- Especificar el tipo de fuente de cada archivo mejora el rendimiento de la red, ya que el navegador puede seleccionar una fuente de video sin tener que descargar parte del video para "olfatear" el formato.
+
+Estos problemas son especialmente importantes en contextos móviles, donde el ancho de banda y la latencia son muy importantes, y la paciencia del usuario es probablemente limitada. Omitir el atributo `type` puede afectar al rendimiento cuando hay varias fuentes con tipos no admitidos.
+
+Hay algunas formas de profundizar en los detalles. Consulte [Un manual de medios digitales para geeks](https://www.xiph.org/video/vid1.shtml) para conocer más sobre cómo funcionan el video y el audio en la web. También puede utilizar [la depuración remota](https://developer.chrome.com/docs/devtools/remote-debugging/) en DevTools para comparar la actividad de la red [con atributos de tipo](https://googlesamples.github.io/web-fundamentals/fundamentals/media/video-main.html) y [sin atributos de tipo](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/notype.html).
+
+{% Aside 'caution' %} Asegúrese de verificar los encabezados de respuesta en las herramientas de desarrollo de su navegador para [asegurarse de que su servidor informa del tipo MIME correcto](https://developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types), de lo contrario las verificaciones de tipo de fuente de video no funcionarán. {% endAside %}
+
+### Especifique las horas de inicio y finalización
+
+Ahorre ancho de banda y haga que su sitio tenga una mayor capacidad de respuesta: utilice fragmentos de medios para agregar tiempos de inicio y finalización al elemento de video.
+
+<figure>
+  <video controls width="100%">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm#t=5,10" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4#t=5,10" type="video/mp4">
+    <p>Este navegador no es compatible con el elemento de video.</p>
+  </source></source></video></figure>
+
+Para utilizar un fragmento multimedia, agregue `#t=[start_time][,end_time]` a la URL multimedia. Por ejemplo, para reproducir el video de los segundos 5 a 10, especifique:
+
+```html
+<source src="video/chrome.webm#t=5,10" type="video/webm">
+```
+
+También puede especificar los tiempos en `<hours>:<minutes>:<seconds>`. Por ejemplo, `#t=00:01:05` inicia el video en un minuto y cinco segundos. Para reproducir solamente el primer minuto de video, especifique `#t=,00:01:00`.
+
+Puede utilizar esta función para ofrecer varias vistas en el mismo video, como puntos de referencia en un DVD, sin tener que codificar y distribuir varios archivos.
+
+Para que esta función funcione, su servidor debe admitir solicitudes de rango y esa capacidad se debe habilitar. La mayoría de los servidores habilitan las solicitudes de rango de forma predeterminada. Dado que algunos servicios de alojamiento las desactivan, debe confirmar que las solicitudes de rango están disponibles para utilizar fragmentos en su sitio.
+
+Afortunadamente, puede hacer esto desde las herramientas de desarrollo de su navegador. En Chrome, por ejemplo, se encuentra en el [panel de la red](https://developer.chrome.com/docs/devtools/#network). Busque el encabezado `Accept-Ranges` y verifique que dice `bytes`. En la imagen, dibujé un cuadro rojo alrededor de este encabezado. Si no observa `bytes` como valor, tendrá que ponerse en contacto con su proveedor de alojamiento.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/20DlLyicG5PAo6TXBKh3.png", alt="Captura de pantalla de Chrome DevTools: Accept-Ranges: bytes.", width="800", height="480" %} <figcaption>Captura de pantalla de Chrome DevTools: Accept-Ranges: bytes.</figcaption></figure>
+
+### Incluya una imagen de cartel
+
+Agregue un atributo de cartel al elemento `video` para que los espectadores se hagan una idea del contenido en cuanto se cargue el elemento, sin necesidad de descargar el video o iniciar la reproducción.
+
+```html
+<video poster="poster.jpg" ...>
+  …
+</video>
+```
+
+Un cartel también puede ser una alternativa si el video `src` está dañado o si ninguno de los formatos de video proporcionados es compatible. La única desventaja de las imágenes de un cartel es el hecho de solicitar un archivo adicional, que consuma algo de ancho de banda y que requiera renderización. Para obtener más información, consulte [Codificación eficiente de las imágenes](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
+
+<div class="switcher">{% Compare 'worse' %} <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/R8VNeplKwajJhOuVkPDT.png", alt="Sin un cartel de reserva, el video parece estropeado.", width="360", height="600" %} </figure>
+</div>
+<p data-md-type="paragraph">{% CompareCaption %} Sin un cartel de reserva, el video parece estropeado. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html"><figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rNhydHVGeL2P0sQ0je5k.png", alt="Un cartel alternativo hace que parezca que se capturó el primer fotograma.", width="360", height="600" %}</figure></div>
+<p data-md-type="paragraph">{% CompareCaption %} Un cartel alternativo hace que parezca que se capturó el primer fotograma. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+### Asegúrese de que los videos no desborden los contenedores
+
+Cuando los elementos de video son demasiado grandes para la ventana de visualización, pueden desbordar su contenedor, lo que hace imposible que el usuario vea el contenido o utilice los controles.
+
+<div class="switcher">
+  <figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cDl2OfCE3hQivhaNvMUh.png", alt = "Captura de pantalla de Android Chrome, en vertical: el elemento de video sin estilo desborda la ventana de visualización.", width = "338", height = "600"%}<figcaption>Captura de pantalla de Android Chrome, en vertical: el elemento de video sin estilo desborda la ventana de visualización.</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCiZsNkZNsAhWbOBsLCs.png", alt="Captura de pantalla de Android Chrome, paisaje: el elemento de video sin estilo desborda la ventana de visualización.", width="800", height="450" %} <figcaption>Captura de pantalla de Android Chrome, paisaje: el elemento de video sin estilo desborda la ventana de visualización.</figcaption></figure>
+</div>
+
+Puede controlar las dimensiones del video usando CSS. Si el CSS no satisface todas sus necesidades, las bibliotecas de JavaScript y los complementos como [FitVids](http://fitvidsjs.com/) (que están fuera del alcance de este artículo) pueden ayudar, incluso para los videos de YouTube y otras fuentes. Lamentablemente, estos recursos pueden aumentar el [tamaño de la carga útil de su red](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/), con consecuencias negativas para sus ingresos y la cartera de sus usuarios.
+
+Para usos sencillos como los que describo aquí, utilice las [consultas de medios de CSS](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#css-media-queries) para especificar el tamaño de los elementos según las dimensiones de la ventana de visualización; `max-width: 100%` será su aliado.
+
+Para el contenido multimedia en iframes (como los videos de YouTube), pruebe un enfoque adaptativo (como el que [propuso John Surdakowski](http://avexdesigns.com/responsive-youtube-embed/)).
+
+{% Aside 'caution' %} No fuerce el tamaño de los elementos para que la relación de aspecto sea diferente a la del video original. Los videos comprimidos o estirados se ven horribles. {% endAside %}
+
+#### CSS
+
+```css
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+```
+
+#### HTML
+
+```html
+<div class="video-container">
+  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
+          frameborder="0" width="560" height="315">
+  </iframe>
+</div>
+```
+
+Pruébelo
+
+Compare la [muestra adaptativa](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html) con la [versión no adaptativa](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/unyt.html). Como podrá ver, la versión sin respuesta no es una gran experiencia para el usuario.
+
+### Orientación del dispositivo
+
+La orientación del dispositivo no es un problema para los monitores de las computadoras de escritorio o laptops, pero es muy importante cuando se considera el diseño de la página web para dispositivos móviles y tablets.
+
+Safari en iPhone hace un buen trabajo al cambiar entre la orientación vertical y la horizontal:
+
+<div class="switcher">
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AmHneDShMOioWZwYG2kF.png", alt="Captura de pantalla de un video que se reproduce en un iPhone con Safari, en posición vertical.", width="338", height="600" %} <figcaption>Captura de pantalla de un video que se reproduce en un iPhone con Safari, en posición vertical.</figcaption></figure><figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MZwkLJaXVk4g8lruhiKZ.png", alt="Captura de pantalla de un video que se reproduce en un iPhone con Safari, en formato horizontal.", width="600", height="338" %} <figcaption>Captura de pantalla de un video que se reproduce en un iPhone con Safari, en formato horizontal.</figcaption></figure>
+</div>
+
+La orientación del dispositivo en un iPad y Chrome en Android podría ser problemática. Por ejemplo, sin ninguna personalización, un video que se reproduzca en un iPad con orientación horizontal tendrá el siguiente aspecto:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9FsExgY6cJFfMkxOPNkl.png", alt="Captura de pantalla de un video que se reproduce en un iPad con Safari, en formato horizontal.", width="600", height="450" %} <figcaption>Captura de pantalla de un video que se reproduce en un iPad con Safari, en formato horizontal.</figcaption></figure>
+
+La configuración del video `width: 100%` o `max-width: 100%` con CSS puede resolver muchos problemas de diseño en la orientación del dispositivo.
+
+### Reproducción automática
+
+El atributo `autoplay` controla si el navegador descarga y reproduce un video inmediatamente. El funcionamiento exacto depende de la plataforma y del navegador.
+
+- Chrome: Depende de varios factores, incluyendo entre otros, si la visualización se realiza en una computadora de escritorio y si el usuario de un dispositivo móvil agregó su sitio o aplicación a su pantalla de inicio. Para obtener más información, consulte [Prácticas recomendadas de la reproducción automática](/autoplay-best-practices/).
+
+- Firefox: Bloquea todo el video y el sonido, pero ofrece a los usuarios la posibilidad de relajar estas restricciones para todos los sitios o para sitios específicos. Para obtener más información, consulte [Permitir o bloquear la reproducción automática de medios en Firefox](https://support.mozilla.org/kb/block-autoplay).
+
+- Safari: Históricamente requiere un gesto del usuario, pero en las versiones recientes se ha relajado ese requisito. Para más información, consulte [Nuevas políticas de &lt;video&gt; para iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/).
+
+Incluso en las plataformas en las que es posible la reproducción automática, debe considerar si es una buena idea activarla:
+
+- El uso de datos puede ser caro.
+- Reproducir medios antes de que el usuario lo desee puede acaparar el ancho de banda y el CPU y, por tanto, retrasar la renderización de la página.
+- Los usuarios pueden estar en un contexto en el que la reproducción de video o de audio es intrusiva.
+
+### Precarga
+
+El atributo `preload` proporciona una pista al navegador sobre cuánta información o contenido debe precargar.
+
+<table class="responsive">
+  <thead>
+    <tr>
+      <th>Valor</th>
+      <th>Descripción</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Value"><code>none</code></td>
+      <td data-th="Description">El usuario podría elegir no ver el video, así que no precargará nada.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>metadata</code></td>
+      <td data-th="Description">Los metadatos (duración, dimensiones, pistas de texto) deberían estar precargados, pero con un video con un contenido mínimo.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>auto</code></td>
+      <td data-th="Description">Se considera deseable descargar el video completo de inmediato. Una cadena vacía produce el mismo resultado.</td>
+    </tr>
+  </tbody>
+</table>
+
+El atributo `preload` tiene efectos diferentes en las distintas plataformas. Por ejemplo, Chrome almacena 25 segundos de video en el escritorio, pero ninguno en iOS o Android. Esto significa que en los dispositivos móviles puede haber retrasos en el inicio de la reproducción que no se producen en el escritorio. Consulte [Reproducción rápida con precarga de audio y video](/fast-playback-with-preload/) o [el blog de Steve Souders](https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/) para obtener más información.
+
+Ahora que ya sabe cómo agregar medios de comunicación a su página web es el momento de aprender acerca de la [Accesibilidad de los medios de comunicación](/media-accessibility/) donde agregará subtítulos a su video para las personas con discapacidad auditiva, o cuando la reproducción del audio no es una opción viable.
diff --git a/src/site/content/es/metrics/cls/index.md b/src/site/content/es/metrics/cls/index.md
new file mode 100644
index 00000000000..3c73dafc6be
--- /dev/null
+++ b/src/site/content/es/metrics/cls/index.md
@@ -0,0 +1,281 @@
+---
+layout: post
+title: Cumulative Layout Shift (CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-19
+description: |
+  Esta publicación presenta la métrica Cumulative Layout Shift (CLS) y explica cómo medirlo.
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %} **1 de junio de 2021:** la implementación de CLS cambió. Para obtener más información sobre las razones detrás del cambio, consulte [Evolución de la métrica CLS](/evolving-cls) . {% endAside %}
+
+{% Aside %}
+  **New:** Check out [Web Vitals Patterns](/patterns/web-vitals-patterns) for
+  implementations of common UX patterns optimized for Core Web Vitals.
+{% endAside %}
+
+{% Aside 'key-term' %} Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS)  es una métrica importante centrada en el usuario para medir [la estabilidad visual](/user-centric-performance-metrics/#types-of-metrics) porque ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados; un CLS bajo ayuda a garantizar que la página sea [agradable](/user-centric-performance-metrics/#questions) . {% endAside %}
+
+¿Alguna vez ha leído un artículo en línea cuando algo cambia repentinamente en la página? Sin previo aviso, el texto se mueve y perdiste tu lugar. O incluso peor: estás a punto de pulsar un enlace o un botón, pero en el instante antes de que aterrice su dedo, BOOM, ¡el enlace se mueve y termina haciendo clic en algo más!
+
+La mayoría de las veces, este tipo de experiencias son simplemente molestas, pero en algunos casos, pueden causar un daño real.
+
+<figure>
+  <video autoplay controls loop muted poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png" width="658" height="510">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Un screencast que ilustra cómo la inestabilidad del diseño puede afectar negativamente a los usuarios.</figcaption></figure>
+
+El desplazamiento inesperado del contenido de una página generalmente ocurre porque los recursos se cargan de forma asincrónica o los elementos DOM se agregan dinámicamente a la página por encima del contenido actual. El culpable puede ser una imagen o un video con dimensiones desconocidas, una fuente que se muestra más grande o más pequeña que su alternativa, o un anuncio o widget de terceros que cambia de tamaño de forma dinámica.
+
+Lo que provoca que este asunto sea aún más problemático es que el funcionamiento de un sitio en desarrollo suele ser bastante diferente de cómo lo experimentan los usuarios. El contenido personalizado o de terceros con frecuencia no se comporta de la misma manera en el desarrollo que en la producción, las imágenes de prueba a menudo ya están en la caché del navegador del desarrollador y las llamadas a la API que se ejecutan localmente frecuentemente son tan rápidas que el retraso no se nota.
+
+La métrica Cumulative Layout Shift (CLS) lo ayuda a abordar este problema al medir la frecuencia con la que ocurre para los usuarios reales.
+
+## ¿Qué es CLS?
+
+CLS es una medida de la ráfaga más grande de las *puntuaciones de cambio* de diseño para cada cambio de diseño [inesperado](/cls/#expected-vs-unexpected-layout-shifts) que se produce durante toda la vida útil de una página.
+
+Se produce un *cambio de diseño* cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente. (Consulte más abajo para obtener más información sobre cómo se calculan las [puntuaciones de cambio de diseño](#layout-shift-score) individuales).
+
+Una ráfaga de cambios de diseño, conocida como [*ventana de sesión*](evolving-cls/#why-a-session-window), es cuando uno o más cambios de diseño individuales ocurren en rápida sucesión con menos de 1 segundo entre cada turno y un máximo de 5 segundos para la duración total de la ventana.
+
+La ráfaga más grande es la ventana de sesión con la puntuación acumulada máxima de todos los cambios de diseño dentro de esa ventana.
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Ejemplo de ventanas de sesión. Las barras azules representan las puntuaciones de cada cambio de diseño individual.</figcaption></figure>
+
+{% Aside 'caution' %} Anteriormente, CLS medía la suma total de *todas las puntuaciones de cambio de diseño individuales* que se producían durante toda la vida útil de la página. Para ver qué herramientas aún brindan la capacidad de comparar con la implementación original, consulte [Evolución del cambio de diseño acumulativo en las herramientas web](/cls-web-tooling) . {% endAside %}
+
+### ¿Qué es una buena puntuación CLS?
+
+Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una puntuación CLS de **0.1** o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el **percentil 75** de cargas de página, segmentado en dispositivos móviles y de escritorio.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Los valores de CLS buenos son inferiores a 0,1, los valores deficientes son superiores a 0,25 y cualquier valor intermedio debe mejorarse", width="400", height="300" %}
+</picture>
+
+{% Aside %} Para obtener más información sobre la investigación y la metodología detrás de esta recomendación, consulte: [Definición de los umbrales de las métricas de Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## Cambios de diseño en detalle
+
+Los cambios de diseño se definen mediante la [API de inestabilidad de diseño](https://github.com/WICG/layout-instability), que informa las entradas de `layout-shift` cada vez que un elemento visible dentro de la ventana gráfica cambia su posición de inicio (por ejemplo, la parte superior y la posición izquierda en el [modo de escritura](https://developer.mozilla.org/docs/Web/CSS/writing-mode) predeterminado) entre dos fotogramas. Estos elementos se consideran *elementos inestables*.
+
+Tenga en cuenta que los cambios de diseño solo ocurren cuando los elementos actuales cambian su posición inicial. Si se agrega un nuevo elemento al DOM o un elemento existente cambia de tamaño, no cuenta como un cambio de diseño, siempre que el cambio no haga que otros elementos visibles cambien su posición inicial.
+
+### Puntuación de cambio de diseño
+
+Para calcular la *puntuación de cambio de diseño*, el navegador observa el tamaño de la ventana de visualización y el desplazamiento de los *elementos inestables* en la ventana de visualización entre dos fotogramas renderizados. La puntuación de cambio de diseño es un producto de dos medidas de ese desplazamiento: la *fracción de impacto* y la *fracción de distancia* (ambas se definen a continuación).
+
+```text
+layout shift score = impact fraction * distance fraction
+```
+
+### Fracción de impacto
+
+La [fracción de impacto](https://github.com/WICG/layout-instability#Impact-Fraction) mide cómo *los elementos inestables* impactan el área de la ventana de visualización entre dos marcos.
+
+La unión de las áreas visibles de todos *los elementos inestables* para el fotograma anterior *y* el fotograma actual, como una fracción del área total de la ventana de visualización, es la *fracción de impacto* para el fotograma actual.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="Ejemplo de fracción de impacto con un *elemento inestable* ", width="800", height="600", linkTo = true %}
+
+En la imagen de arriba, hay un elemento que ocupa la mitad de la ventana de visualización en un marco. Luego, en el siguiente marco, el elemento se desplaza hacia abajo en un 25% de la altura de la ventana de visualización. El rectángulo punteado rojo indica la unión del área visible del elemento en ambos marcos, que en este caso, es el 75% de la ventana de visualización total, por lo que su *fracción de impacto* es de `0.75`.
+
+### Fracción de distancia
+
+La otra parte de la ecuación para la puntuación de cambio de diseño mide la distancia de desplazamiento en los elementos inestables, relacionadas con la ventana de visualización. La *fracción de distancia* es la distancia más grande que cualquier *elemento inestable* se ha desplazado en el marco (ya sea de forma horizontal o vertical) dividida por la mayor dimensión de la ventana de visualización (ancho o alto, el que sea mayor).
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="Ejemplo de fracción de distancia con un *elemento inestable* ", width="800", height="600", linkTo=true %}
+
+En el ejemplo anterior, la dimensión más grande de la ventana de visualización es la altura, y el elemento inestable que se desplazó un 25% de la altura de la ventana, lo que hace que la *fracción de distancia sea* 0.25.
+
+Entonces, en este ejemplo, la *fracción de impacto* es `0.75` y la *fracción de distancia* es `0.25` , por lo que la *puntuación de cambio de diseño* es `0.75 * 0.25 = 0.1875` .
+
+{% Aside %} Inicialmente, la puntuación de cambio de diseño se calculó solo basado en la *fracción de impacto*. La *fracción de distancia* se introdujo para evitar penalizar excesivamente los casos en los que los elementos grandes se desplazan en una pequeña cantidad. {% endAside %}
+
+El siguiente ejemplo ilustra cómo la adición de contenido a un elemento existente afecta la puntuación de cambio de diseño:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="Ejemplo de cambio de diseño con *elementos inestables* y estables y un recorte en la ventana de visualización", width="800", height="600", linkTo=true %}
+
+El botón "¡Haz clic en mí!" se adjunta a la parte inferior de la casilla gris con texto negro, lo que empuja el cuadro verde con texto blanco hacia abajo (y parcialmente fuera de la ventana de visualización).
+
+En este ejemplo, el cuadro gris cambia de tamaño, pero su posición inicial no cambia, por lo que no es un *elemento inestable* .
+
+El botón "¡Haz clic en mí!" no estaba previamente en el DOM, por lo que su posición de inicio tampoco cambia.
+
+Sin embargo, la posición inicial de la casilla verde cambia, pero como se desplazó parcialmente fuera de la ventana de visualización, el área invisible no se considera al calcular la *fracción de impacto*. La unión de las áreas visibles para la casilla verde en ambos marcos (ilustrada por el rectángulo punteado rojo) es la misma que el área de la casilla verde en el primer marco: 50% de la ventana de visualización. La *fracción de impacto* es `0.5`.
+
+La *fracción de distancia* se ilustra con la flecha violeta. La casilla verde se desplazó hacia abajo en aproximadamente un 14% de la ventana de visualización, por lo que la *fracción de distancia* es `0.14`.
+
+La puntuación de cambio de diseño es `0.5 x 0.14 = 0.07` .
+
+Este último ejemplo ilustra varios *elementos inestables* :
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="Ejemplo de cambio de diseño con varios *elementos inestables* y estables", width="800", height="600", linkTo=true %}
+
+En el primer marco de arriba, hay cuatro resultados de una solicitud de una API para animales, ordenados en orden alfabético. En el segundo marco, se agregan más resultados a la lista ordenada.
+
+El primer elemento de la lista ("Cat") no cambia su posición inicial entre marcos, por lo que es estable. De manera similar, los nuevos elementos agregados a la lista no estaban previamente en el DOM, por lo que sus posiciones iniciales tampoco cambian. Pero los elementos etiquetados como "Perro", "Caballo" y "Cebra" cambian sus posiciones iniciales, lo que los convierte en *elementos inestables* .
+
+Nuevamente, los rectángulos de puntos rojos representan la unión de las áreas que estaban antes y después de estos tres *elementos inestables*, que en este caso es alrededor del 38 % del área de la ventana de visualización (*fracción* de `0.38`).
+
+Las flechas representan las distancias que *los elementos inestables se* desplazaron desde sus posiciones iniciales. El elemento "Cebra", representado por la flecha azul, es el que más se desplazó, aproximadamente un 30% en la altura de la ventana de visualización. Eso hace que la *fracción de distancia* en este ejemplo sea `0.3`.
+
+La puntuación de cambio de diseño es `0.38 x 0.3 = 0.1172` .
+
+### Cambios de diseño esperados frente a inesperados
+
+No todos los cambios de diseño son malos. De hecho, muchas aplicaciones web dinámicas cambian con frecuencia la posición inicial de los elementos en sus páginas.
+
+#### Cambios de diseño iniciados por el usuario
+
+Un cambio de diseño solo es malo si el usuario no lo espera. Por otro lado, los cambios de diseño que ocurren en respuesta a las interacciones del usuario (hacer clic en un enlace, pulsar un botón, escribir en una casilla de búsqueda y otros casos similares) generalmente son correctos, siempre que el cambio se produzca lo suficientemente cerca de la interacción como para que la relación sea correcta. claro para el usuario.
+
+Por ejemplo, si la interacción de un usuario desencadena una solicitud de red que puede tardar un tiempo en completarse, es mejor crear algo de espacio de inmediato y mostrar un indicador de carga para evitar un cambio de diseño desagradable cuando se complete la solicitud. Si el usuario no se da cuenta de que algo se está cargando, o no tiene una idea de cuándo estará listo el recurso, puede intentar hacer clic en otra cosa mientras espera, algo que podría moverse de debajo de él.
+
+Los cambios de diseño que ocurren después de 500 milisegundos desde que inició la entrada del usuario tendrán la marca [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput) configurada, por lo que se pueden excluir de los cálculos.
+
+{% Aside 'caution' %} La marca `hadRecentInput` solo será verdadera para eventos de entrada discretos como pulsar, hacer clic o presionar una tecla. Las interacciones continuas, como desplazamientos, arrastres o dar toques y acercar, no se consideran "entradas recientes". Consulte la [Especificación de inestabilidad de diseños](https://github.com/WICG/layout-instability#recent-input-exclusion) para obtener más información. {% endAside %}
+
+#### Animaciones y transiciones
+
+Las animaciones y las transiciones, cuando se hacen bien, son una excelente manera de actualizar el contenido de la página sin sorprender al usuario. El contenido que cambia abrupta e inesperadamente en la página casi siempre crea una mala experiencia de usuario. Pero el contenido que se mueve de forma gradual y natural de una posición a la siguiente con frecuencia puede ayudar al usuario a comprender mejor lo que está sucediendo y guiarlo entre los cambios de estado.
+
+CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) le permite animar elementos sin activar cambios de diseño:
+
+- En vez de cambiar las propiedades de `height` y `width` utilice `transform: scale()`.
+- Para desplazar elementos, evite cambiar las `top`, `right`, `bottom` o `left` y en vez de eso utilice `transform: translate()`.
+
+## Cómo medir CLS
+
+CLS se puede medir [en el laboratorio](/user-centric-performance-metrics/#in-the-lab) o [en el campo](/user-centric-performance-metrics/#in-the-field) , y está disponible en las siguientes herramientas:
+
+{% Aside 'caution' %} Las herramientas de laboratorio generalmente cargan páginas en un entorno sintético y, por lo tanto, solo pueden medir los cambios de diseño que ocurren durante la carga de la página. Como resultado, los valores de CLS informados por las herramientas de laboratorio para una página determinada pueden ser inferiores a los que experimentan los usuarios reales en el campo. {% endAside %}
+
+### Herramientas de campo
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals report)](https://support.google.com/webmasters/answer/9205520)
+- [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Herramientas de laboratorio
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Medir CLS en JavaScript
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+Para medir CLS en JavaScript, puede utilizar la [API de inestabilidad de diseño](https://github.com/WICG/layout-instability) . El siguiente ejemplo muestra cómo crear un [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que atiende las entradas inesperadas de `layout-shift`, las agrupa en sesiones y registra el valor máximo de la sesión cada vez que cambia.
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // Only count layout shifts without recent user input.
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // Log the updated value (and its entries) to the console.
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Este código muestra la forma básica de calcular y registrar CLS. Sin embargo, medir CLS con precisión de una manera que coincida con lo que se mide en el [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) (CrUX) es más complicado. Consulte a continuación para obtener más información
+
+{% endAside %}
+
+En la mayoría de los casos, el valor CLS actual en el momento en que se descarga la página es el valor CLS final para esa página, pero hay algunas excepciones importantes:
+
+La siguiente sección enumera las diferencias entre lo que informa la API y cómo se calcula la métrica.
+
+#### Diferencias entre la métrica y la API
+
+- Si una página se carga en segundo plano, o si está en segundo plano antes de que el navegador describa cualquier contenido, entonces no debería informar ningún valor CLS.
+- Si se restaura una página desde la [caché de retroceso/avance](/bfcache/#impact-on-core-web-vitals), su valor CLS debe restablecerse a cero, ya que los usuarios experimentan esto como una visita de una página distinta.
+- La API no informa a las entradas `layout-shift` de los cambios que ocurren dentro de los iframes, pero para medir CLS correctamente, debe considerarlos. Los sub-frames pueden utilizar la API para informar a sus `layout-shift` hacia el marco principal para su [incorporación](https://github.com/WICG/layout-instability#cumulative-scores).
+
+Además de estas excepciones, CLS tiene cierta complejidad adicional debido al hecho de que mide la vida útil completa de una página:
+
+- Los usuarios pueden mantener una pestaña abierta durante *mucho* tiempo, días, semanas, meses. De hecho, es posible que un usuario nunca cierre una pestaña.
+- En los sistemas operativos móviles, los navegadores normalmente no ejecutan devoluciones de llamadas de descarga en la página para las pestañas en segundo plano, lo que dificulta informar el valor "final".
+
+Para manejar estos casos, se debe informar CLS cada vez que una página está en segundo plano, además de cada vez que se descarga (el [evento `visibilitychange`](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange) cubre ambos escenarios). Y los sistemas de análisis que reciban estos datos deberán calcular el valor CLS final en el backend.
+
+En vez de memorizar y lidiar con todos estos casos usted mismo, los desarrolladores pueden usar la [biblioteca JavaScript de `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir CLS, que da cuenta de todo lo mencionado anteriormente:
+
+```js
+import {onCLS} from 'web-vitals';
+
+// Measure and log CLS in all situations
+// where it needs to be reported.
+onCLS(console.log);
+```
+
+Puede consultar [el código fuente de `onCLS)`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts) para obtener un ejemplo completo de cómo medir CLS en JavaScript.
+
+{% Aside %} En algunos casos (como los iframes de origen cruzado) no es posible medir CLS en JavaScript. Consulte la sección de [limitaciones](https://github.com/GoogleChrome/web-vitals#limitations) de la biblioteca de `web-vitals` para obtener más información. {% endAside %}
+
+## Cómo mejorar CLS
+
+Para la mayoría de los sitios web, puede evitar todos los cambios de diseño inesperados si sigue algunos principios básicos:
+
+- **Siempre incluya atributos de tamaño en sus imágenes y elementos de video, o reserve el espacio requerido con algo como [casillas de relación de aspecto en CSS](https://css-tricks.com/aspect-ratio-boxes/) .** Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen. Tenga en cuenta que también puede utilizar la [política de funciones para los medios no desarrollados](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md) para forzar este comportamiento en los navegadores que son compatibles con políticas de funciones.
+- **Nunca inserte contenido por encima del contenido actual, excepto si es una respuesta a la interacción del usuario.** Esto asegura que se esperen los cambios de diseño que se produzcan.
+- **Prefiere transformar animaciones a animaciones de propiedades que desencadenan cambios de diseño.** Anime las transiciones de una manera que proporcione contexto y continuidad de un estado a otro.
+
+Para obtener información detallada sobre cómo mejorar CLS, consulte [Optimización de CLS](/optimize-cls/) y [Cambios de diseño de depuración](/debug-layout-shifts) .
+
+## Recursos adicionales
+
+- Guía de Google Publisher Tag para [minimizar el cambio de diseño](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)
+- [Comprender el cambio de diseño acumulativo](https://youtu.be/zIJuY-JCjqw) por [Annie Sullivan](https://anniesullie.com/) y [Steve Kobes](https://kobes.ca/) en [#PerfMatters](https://perfmattersconf.com/) (2020)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/es/metrics/custom-metrics/index.md b/src/site/content/es/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..36e3ef8fe5d
--- /dev/null
+++ b/src/site/content/es/metrics/custom-metrics/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: Métricas personalizadas
+authors:
+  - philipwalton
+date: 2019-11-08
+description: |2-
+
+  Las métricas personalizadas te permiten medir y optimizar aspectos de las experiencias que son exclusivas de tu sitio.
+tags:
+  - performance
+  - metrics
+---
+
+Es muy valioso tener [métricas centradas en el usuario](/user-centric-performance-metrics/) que puedas medir, universalmente, en cualquier sitio web. Estas métricas te permiten:
+
+- Comprender cómo los usuarios reales experimentan la web en su totalidad
+- Comparar fácilmente tu sitio con la competencia
+- Realizar un seguimiento de datos útiles y procesables en tus herramientas de análisis sin necesidad de escribir código personalizado
+
+Las métricas universales ofrecen una buena línea de base, pero en muchos casos es necesario medir *más* que estas métricas para capturar la experiencia completa de su sitio en particular.
+
+Las métricas personalizadas te permiten medir aspectos de la experiencia de tu sitio que solo pueden aplicarse a tu sitio, como lo pueden ser:
+
+- Cuánto tiempo tarda una aplicación de una sola página (SPA) en pasar de una "página" a otra
+- Cuánto tiempo tarda una página en mostrar los datos obtenidos de una base de datos para los usuarios que han iniciado sesión
+- Cuánto tiempo tarda una aplicación renderizada en el lado del servidor (SSR) en [hydrate](https://addyosmani.com/blog/rehydration/)
+- La tasa de aciertos de caché para los recursos cargados por visitantes recurrentes
+- La latencia de eventos de un clic o de un teclado en un juego
+
+## API para medir métricas personalizadas
+
+Históricamente, los desarrolladores web no han tenido muchas API de bajo nivel para medir el rendimiento y como resultado han tenido que recurrir a hacks para medir si un sitio estaba funcionando bien.
+
+Por ejemplo, es posible determinar si el hilo principal está bloqueado debido a tareas de JavaScript de larga duración mediante el uso de `requestAnimationFrame` y calculando el delta entre cada fotograma. Si el delta es significativamente más largo que la velocidad de fotogramas de la pantalla, puedes determinarlo como una tarea larga. Sin embargo, estos trucos no se recomiendan porque en realidad ellos mismos afectan el rendimiento (por ejemplo, drenando la batería del dispositivo).
+
+La primera regla de la medición del desempeño efectiva es asegurarse de que tus técnicas de medición del desempeño no causen problemas de desempeño. Por lo tanto, para cualquier métrica personalizada que midas en tu sitio, es mejor usar una de las siguientes API si es posible.
+
+### Performance Observer (Observador de desempeño)
+
+Comprender la API de PerformanceObserver es fundamental para crear métricas de rendimiento personalizadas porque es el mecanismo mediante el cual obtiene datos de todas las demás API de rendimiento que se analizan en este artículo.
+
+Con `PerformanceObserver`, podrás suscribirse pasivamente a eventos relacionados con el rendimiento, lo que significa que estas API generalmente no interferirán con el rendimiento de la página, ya que sus retrollamadas (callbacks) generalmente se activan durante los [períodos de inactividad](https://w3c.github.io/requestidlecallback/#idle-periods).
+
+Puedes crear un `PerformanceObserver` pasándole una retrollamada para que se ejecute siempre que se envíen nuevas entradas de rendimiento. Luego le dice al observador qué tipos de entradas debe escuchar a través del método [`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe):
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+Las siguientes secciones enumeran todos los tipos de entradas disponibles para la observación, pero en los navegadores más recientes puedes inspeccionar qué tipos de entrada están disponibles a través de la propiedad [`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute).
+
+{% Aside %} El objeto pasado al `observe()` también puede especificar un arreglo de `entryTypes` (para observar más de un tipo de entrada a través del mismo observador). Si bien especificar `entryTypes` es una opción más antigua con un soporte de navegador más amplio, hoy en día se recomienda usar `type` ya que permite especificar una configuración de observación adicional específica de la entrada (como la bandera de `buffered`, que se analizará a continuación). {% endAside %}
+
+#### Observando entradas que ya sucedieron
+
+De forma predeterminada, los objetos de `PerformanceObserver` solo pueden observar las entradas a medida que ocurren. Esto puede ser problemático si deseas cargar tu código de análisis de rendimiento de forma diferida (para no bloquear los recursos de mayor prioridad).
+
+Para obtener entradas históricas (después de que hayan ocurrido), define la bandera de `buffered` a  `true` cuando llames a `observe()`. El navegador incluirá entradas históricas de su [búfer de entrada de rendimiento](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer) la primera vez que se llame a la retrollamada  de `PerformanceObserver`.
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %} Para evitar problemas de memoria, el búfer de entrada de rendimiento no es ilimitado. Para la mayoría de las cargas de páginas típicas, es poco probable que el búfer se llene y se pierdan las entradas. {% endAside %}
+
+#### API de rendimiento obsoletas que se deben de evitar
+
+Antes de la API de Performance Observer, los desarrolladores podían acceder a las entradas de rendimiento mediante los siguientes tres métodos definidos en el objeto de [`performance`](https://w3c.github.io/performance-timeline/):
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+Si bien estas API aún son compatibles, no se recomienda su uso porque no te permiten escuchar cuándo se emiten nuevas entradas. Además, muchas API nuevas (como Long Tasks) no se exponen a través del `performance`, solo se exponen a través del `PerformanceObserver`.
+
+A menos que necesites específicamente compatibilidad con Internet Explorer, es mejor evitar estos métodos en su código y usar `PerformanceObserver` en el futuro.
+
+### API de User Timing
+
+La [API de User Timing (Tiempo de usuario)](https://w3c.github.io/user-timing/) es un API de medición de propósito general para métricas basadas en el tiempo. Te permite marcar arbitrariamente puntos en el tiempo y luego medir la duración entre esas marcas.
+
+```js
+// Record the time immediately before running a task.
+performance.mark('myTask:start');
+await doMyTask();
+// Record the time immediately after running a task.
+performance.mark('myTask:end');
+
+// Measure the delta between the start and end of the task
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+Si bien las API como `Date.now()` o `performance.now()` brindan capacidades similares, el beneficio de usar la API de User Timing es que se integra bien con las herramientas de rendimiento. Por ejemplo, Chrome DevTools visualiza las [mediciones de User Timing en el panel de Rendimiento](https://developers.google.com/web/updates/2018/04/devtools#tabs), y muchos proveedores de análisis también realizarán un seguimiento automático de cualquier medición que se realice y enviarán los datos de duración a su back-end de análisis.
+
+Para informar las mediciones del User Timing puede utilizar [PerformanceObserver](#performance-observer) y registrarlas para observar las entradas de tipo `measure`:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `measure` entries to be dispatched.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API de Long Tasks
+
+La [API de Long Tasks (Tareas largas)](https://w3c.github.io/longtasks/) es útil para saber cuándo el hilo principal del navegador está bloqueado durante el tiempo suficiente para afectar la velocidad de fotogramas o la latencia de entrada. Actualmente, la API informará sobre cualquier tarea que se ejecute durante más de 50 milisegundos (ms).
+
+Siempre que necesites ejecutar un código costoso (o cargar y ejecutar scripts de gran tamaño), es útil realizar un seguimiento de si ese código bloqueó o no el hilo principal. De hecho, muchas métricas de nivel superior se construyen sobre la API de Long Tasks (como [Time to Interactive (TTI): Tiempo para interactividad](/tti/) y [Total Blocking Time (TBT): Tiempo total de bloqueo](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)).
+
+Para determinar cuándo ocurren las tareas largas, puedes usar [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) y registrarlas para observar entradas de tipo `longtask`:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `longtask` entries to be dispatched.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API de Element Timing
+
+La [métrica de Largest Contentful Paint (LCP): Despliegue del contenido más extenso](/lcp/) es útil para saber cuándo se pintó la imagen o el bloque de texto más grande en la pantalla, pero en algunos casos se desea medir el tiempo de renderizado de un elemento diferente.
+
+Para estos casos, puedes utilizar la [API Element Timing (Tiempo de elementos)](https://wicg.github.io/element-timing/). De hecho, la API de Largest Contentful Paint en realidad se basa en la API de Element Timing y agrega informes automáticos del elemento con contenido más grande, pero puede informar sobre elementos adicionales agregando explícitamente el `elementtiming` y registrando un PerformanceObserver para su observación del tipo de entrada del elemento.
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">This is text I care about.</p>
+...
+<script>
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `element` entries to be dispatched.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} Los tipos de elementos considerados para la Pintura de contenido más grande son los mismos que los observables a través de la API de Element Timing. Si agregas el atributo de `elementtiming` a un elemento que no es de esos tipos, el atributo se ignorará. {% endAside %}
+
+### API de Event Timing
+
+La [métrica First Input Delay (FID): Demora de la primera entrada](/fid/) mide el tiempo desde que un usuario interactúa por primera vez con una página hasta el momento en que el navegador puede comenzar a procesar los controladores de eventos en respuesta a esa interacción. Sin embargo, en algunos casos también puede ser útil medir el tiempo de procesamiento del evento en sí, así como el tiempo hasta que se pueda procesar el siguiente fotograma.
+
+Esto es posible con la [API de Event Timing (Tiempo del evento)](https://wicg.github.io/event-timing/) (que se utiliza para medir el FID), ya que expone una serie de marcas de tiempo en el ciclo de vida del evento, que incluyen:
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime): el tiempo cuando el navegador recibe el evento.
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): el tiempo en que el navegador puede comenzar a procesar los controladores de eventos para el evento.
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend): el tiempo en que el navegador termina de ejecutar todo el código síncrono iniciado desde los controladores de eventos para este evento.
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): el tiempo (redondeado a 8 ms por razones de seguridad) entre el momento en que el navegador recibe el evento hasta que puede pintar el siguiente cuadro después de terminar de ejecutar todo el código síncrono iniciado desde los controladores de eventos.
+
+El siguiente ejemplo muestra cómo utilizar estos valores para crear medidas personalizadas:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Measure First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Measure the time it takes to run all event handlers
+    // Note: this does not include work scheduled asynchronously using
+    // methods like `requestAnimationFrame()` or `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Measure the entire duration of the event, from when input is received by
+    // the browser until the next frame can be painted after processing all
+    // event handlers.
+    // Note: similar to above, this value does not include work scheduled
+    // asynchronously using `requestAnimationFrame()` or `setTimeout()`.
+    // And for security reasons, this value is rounded to the nearest 8ms.
+    const firstInputDuration = firstInput.duration;
+
+    // Log these values the console.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API de tiempo de recursos
+
+La [API Resource Timing (Tiempo de recursos)](https://w3c.github.io/resource-timing/) ofrece a los desarrolladores información detallada sobre cómo se cargaron los recursos para una página en particular. A pesar del nombre de la API, la información que proporciona no se limita solo a los datos de tiempo (aunque hay [mucho de eso](https://w3c.github.io/resource-timing/#processing-model)). Otros datos a los que se pueden acceder incluyen:
+
+- [InitiatorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype): cómo se obtuvo el recurso, por ejemplo, de una etiqueta de `<script>` o `<link>`, o de `fetch()`
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol): el protocolo utilizado para obtener el recurso, como `h2` o `quic`
+- [encodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize)/[decodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize)]: el tamaño del recurso en su forma codificada o decodificada (respectivamente)
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize): el tamaño del recurso que realmente se transfirió a través de la red. Cuando los recursos se completan a través de la caché, este valor puede ser mucho menor que `encodedBodySize` y en algunos casos, puede ser cero (si no se requiere una revalidación de la caché).
+
+Ten en cuenta que puedes utilizar la propiedad de `transferSize` de las entradas de tiempo de recursos para medir una *métrica de tasa de aciertos de caché* o incluso una *métrica de tamaño total de recursos almacenados en caché*, que puede ser útil para comprender cómo tu estrategia de almacenamiento en caché de recursos afecta el rendimiento de los visitantes habituales.
+
+El siguiente ejemplo registra todos los recursos consultados por la página e indica si cada recurso se completó o no a través de la caché.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Start listening for `resource` entries to be dispatched.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API de Navigation Timing
+
+La [API de Navigation Timing (Tiempo de navegación)](https://w3c.github.io/navigation-timing/) es similar a la API de Resource Timing, pero solo informa sobre [las consultas de navegación](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests). El tipo de entrada de `navigation` también es similar al tipo de entrada de `resource`, pero contiene [información adicional](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming) específica solo para las consultas de navegación (como cuando se disparan los eventos de `DOMContentLoaded` y `load`).
+
+Una métrica que muchos desarrolladores siguen para comprender el tiempo de respuesta del servidor ([Time to First Byte (TTFB): Tiempo hasta el primer byte](https://en.wikipedia.org/wiki/Time_to_first_byte)) está disponible a través de la API de Navigation Timing, específicamente, la marca de tiempo de `responseStart`.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+Otra métrica que les puede interesar a los desarrolladores de métricas que utilizan el service worker es el tiempo de inicio del service worker para las consultas de navegación. Esta es la cantidad de tiempo que le toma al navegador iniciar el subproceso del service worker antes de que pueda comenzar a interceptar eventos de fetch (recuperación).
+
+El tiempo de inicio del service worker para una solicitud de navegación en particular se puede determinar a partir del delta entre `entry.responseStart` y `entry.workerStart`.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API de Server Timing
+
+La [API de Server Timing (Tiempo del servidor)](https://w3c.github.io/server-timing/) te permite pasar datos de tiempos específicos de la solicitud desde tu servidor al navegador a través de cabeceras de respuesta. Por ejemplo, se puede indicar cuánto tiempo se tardó en buscar datos en una base de datos para una solicitud en particular, lo que puede ser útil para depurar problemas de rendimiento causados por la lentitud en el servidor.
+
+Para los desarrolladores que utilizan proveedores de análisis de terceros, la API de Server Timing es la única forma de correlacionar los datos de rendimiento del servidor con otras métricas comerciales que estas herramientas de análisis pueden estar midiendo.
+
+Para especificar los datos de tiempo del servidor en sus respuestas, puedes usar la cabecera de respuesta de `Server-Timing`. Aquí un ejemplo.
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+Luego, desde tus páginas, puedes leer estos datos en `resource` o en `navigation` de las API de Resource Timing y Navigation Timing respectivamente.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Logs all server timing data for this response
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
diff --git a/src/site/content/es/metrics/fcp/index.md b/src/site/content/es/metrics/fcp/index.md
new file mode 100644
index 00000000000..4325832f190
--- /dev/null
+++ b/src/site/content/es/metrics/fcp/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: First Contentful Paint (FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-19
+description: En esta publicación se presenta la métrica First Contentful Paint (FCP) y se explica como medirla
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} First Contentful Paint: Primer despliegue de contenido (FCP) es una métrica importante, centrada en el usuario, para medir la [velocidad de carga percibida](/user-centric-performance-metrics/#types-of-metrics) porque marca el primer punto en la línea de tiempo de carga de la página en el que el usuario puede ver algo en la pantalla: una FCP rápida ayuda a tranquilizar al usuario de que algo está [ocurriendo](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## ¿Qué es FCP?
+
+La métrica "First Contentful Paint" (FCP) mide el tiempo que transcurre desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se representa en la pantalla. Para esta métrica, el "contenido" se refiere al texto, las imágenes (incluidas las imágenes que están en segundo plano), los elementos `<svg>` o los elementos `<canvas>` que no están en blanco.
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="Línea de tiempo de FCP de google.com", width="800", height="311", linkTo=true %}
+
+En la carga anterior de la línea de tiempo, FCP ocurre en el segundo marco, ya que es cuando los primeros elementos de texto e imagen se renderizan en la pantalla.
+
+Notará que, aunque se ha renderizado parte del contenido, no se ha renderizado todo. Esta es una distinción importante que se debe hacer entre *First* Contentful Paint (FCP) y *[Largest Contentful Paint (LCP)](/lcp/)*, cuyo objetivo es medir cuándo se terminó de cargar el contenido principal de la página.
+
+<picture>
+  <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400" height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="Los buenos valores de FCP son 1,8 segundos o menos, los valores malos son superiores a 3,0 segundos y cualquier cosa intermedia necesita mejora", width="400", height="300" %}
+</picture>
+
+### ¿Qué es una buena puntuación FCP?
+
+Para brindar una buena experiencia de usuario, los sitios deberían esforzarse por tener una First Contentful Paint de **1.8 segundos** o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el **percentil 75** de cargas de páginas, segmentado en dispositivos móviles y equipos de escritorio.
+
+## Cómo medir FCP
+
+FCP se puede medir [en el laboratorio](/user-centric-performance-metrics/#in-the-lab) o [en el campo](/user-centric-performance-metrics/#in-the-field) y está disponible en las siguientes herramientas:
+
+### Herramientas de campo
+
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [Search Console (informe de velocidad)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [Biblioteca de JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Herramientas de laboratorio
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+
+### Medir FCP en JavaScript
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+Para medir FCP en JavaScript, puede utilizar la [API de Paint Timing](https://w3c.github.io/paint-timing/). En el siguiente ejemplo se muestra cómo crear un [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que capta una entrada de `paint` con el nombre `first-contentful-paint` y la registra en la consola.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+En este código se muestra cómo registrar la entrada `first-contentful-paint` en la consola, pero medir FCP en JavaScript es más complicado. Vea a continuación los detalles:
+
+{% endAside %}
+
+En el ejemplo anterior, la entrada registrada `first-contentful-paint` le indicará cuándo se desplegó el primer elemento de contenido. Sin embargo, en algunos casos esta entrada no es válida para medir FCP.
+
+En la siguiente sección se enumeran las diferencias entre lo que reporta la API y cómo se calcula la métrica.
+
+#### Diferencias entre la métrica y la API
+
+- La API enviará una entrada `first-contentful-paint` para las páginas cargadas en una pestaña de segundo plano, pero esas páginas deben ser ignoradas cuando se calcule el FCP (los tiempos del primer despliegue solo deben considerarse si la página estuvo en primer plano todo el tiempo).
+- La API no reporta `first-contentful-paint` cuando la página se restaura desde la [caché de retroceso/avance](/bfcache/#impact-on-core-web-vitals), pero LCP debe medirse en estos casos, ya que los usuarios las experimentan como visitas de página distintas.
+- Es [posible que la API no reporte los tiempos de despliegue de los iframes de origen cruzado](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes), pero para medir correctamente el FCP, debe considerar todos los marcos. Los sub-marcos pueden usar la API para reportar sus tiempos de despliegue al marco principal para su incorporación.
+
+En vez de memorizar todas estas diferencias sutiles, los desarrolladores pueden utilizar la [Biblioteca de JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir FCP, que maneja estas diferencias por usted (cuando sea posible):
+
+```js
+import {onFCP} from 'web-vitals';
+
+// Measure and log FCP as soon as it's available.
+onFCP(console.log);
+```
+
+Puede consultar [el código fuente de `onFCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts) para obtener un ejemplo completo de cómo medir FCP en JavaScript.
+
+{% Aside %} En algunos casos (como los iframes de origen cruzado) no es posible medir LCP en JavaScript. Consulte la sección de [limitaciones](https://github.com/GoogleChrome/web-vitals#limitations) `web-vitals` para obtener más información. {% endAside %}
+
+## Cómo mejorar FCP
+
+Para aprender a mejorar FCP para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier [oportunidad](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específica que sugiera la auditoría.
+
+Para saber cómo mejorar la FCP en general (para cualquier sitio), consulte las siguientes normas de rendimiento:
+
+- [Eliminar los recursos que bloquean el renderizado](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [Minificar CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [Eliminar CSS no utilizado](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [Preconectar a los orígenes requeridos](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Reducir los tiempos de respuesta del servidor (TTFB)](/ttfb/)
+- [Evitar los redireccionamientos de varias páginas](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [Precargar solicitudes clave](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Evitar cargas útiles de red enormes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [Publicar activos estáticos con una política de caché eficiente](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Evitar un tamaño de DOM excesivo](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [Minimizar la profundidad de la solicitud crítica](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Asegurarse de que el texto permanezca visible durante la carga de la fuente web](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/es/metrics/fid/index.md b/src/site/content/es/metrics/fid/index.md
new file mode 100644
index 00000000000..93037e016b7
--- /dev/null
+++ b/src/site/content/es/metrics/fid/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: First Input Delay (FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: Esta publicación presenta la métrica First Input Delay (FID) y explica como medirla
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} First Input Delay: Demora de la primera entrada (FID) es una métrica importante centrada en el usuario ya que mide la [capacidad de respuesta de la carga](/user-centric-performance-metrics/#types-of-metrics) porque cuantifica la experiencia que sienten los usuarios cuando intentan interactuar con páginas que no responden, una FID baja ayuda a garantizar que la página sea [utilizable](/user-centric-performance-metrics/#questions) . {% endAside %}
+
+Todos sabemos lo importante que es causar una buena primera impresión. Es importante cuando se conoce a gente nueva, y también es importante cuando se desarrollan experiencias en la web.
+
+En la web, una buena primera impresión puede marcar la diferencia entre que alguien se convierta en un usuario leal o que se vaya y nunca regrese. La pregunta es, ¿qué es lo que da una buena impresión y cómo se puede medir qué tipo de impresión está causando en los usuarios?
+
+En la Web, las primeras impresiones pueden tomar muchas formas diferentes: tenemos las primeras impresiones del diseño y el atractivo visual de un sitio, así como las primeras impresiones de su velocidad y capacidad de respuesta.
+
+Si bien es difícil medir el gusto de los usuarios por el diseño de un sitio con API web, ¡no lo es medir su velocidad y capacidad de respuesta!
+
+La primera impresión que tienen los usuarios de la rapidez con la que se carga su sitio se puede medir con [First Contentful Paint (FCP)](/fcp/). Pero la rapidez con la que su sitio puede pintar pixeles en la pantalla es solo una parte de la historia. ¡La capacidad de respuesta de su sitio es igualmente importante cuando los usuarios intentan interactuar con esos pixeles!
+
+La métrica First Input Delay (FID) ayuda a medir la primera impresión de su usuario sobre la interactividad y capacidad de respuesta de su sitio.
+
+## ¿Qué es FID?
+
+FID mide el tiempo desde que un usuario interactúa por primera vez con una página (es decir, cuando hace clic en un enlace, pulsa un botón o utiliza un control personalizado impulsado por JavaScript) hasta el momento en que el navegador puede comenzar a procesar controladores de eventos como respuesta a esa interacción.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Los valores de fid correctos son 2,5 segundos, los valores deficientes son superiores a 4,0 segundos y cualquier valor intermedio debe mejorarse", width="400", height="300" %}
+</picture>
+
+### ¿Qué es una buena puntuación FID?
+
+Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una First Input Delay de **100 milisegundos** o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el **percentil 75** de cargas de página, segmentado en dispositivos móviles y de escritorio.
+
+{% Aside %} Para obtener más información sobre la investigación y la metodología que está detrás de esta recomendación, consulte: [Definición de los umbrales para las métricas de Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## FID en detalle
+
+Como desarrolladores que escriben código el cual responde a eventos, con frecuencia asumimos que nuestro código se ejecutará inmediatamente, tan pronto como suceda el evento. Pero como usuarios, a menudo todos hemos experimentado lo contrario: cargamos una página web en nuestro teléfono, intentamos interactuar con ella y luego nos sentimos frustrados cuando no sucedía nada.
+
+En general, la demora de la entrada (también conocida como latencia de la entrada) ocurre porque el subproceso principal del navegador está ocupado haciendo otra cosa, por lo que no puede (todavía) responder al usuario. Una razón común por la que esto puede suceder es que el navegador está ocupado analizando y ejecutando un archivo JavaScript grande, que carga su aplicación. Mientras hace eso, no puede ejecutar ningún detector de eventos porque el JavaScript que está cargando podría indicarle que haga otra cosa.
+
+{% Aside 'gotchas' %} FID solo mide la "demora" en el procesamiento de eventos. No mide el tiempo de procesamiento de eventos per se, ni el tiempo que tarda el navegador en actualizar la interfaz de usuario después de que se ejecuten los controladores de eventos. Si bien este tiempo afecta la experiencia del usuario, cuando se incluye como parte de FID incentivaría a los desarrolladores a que respondan a los eventos de forma asincrónica, lo que mejoraría la métrica pero probablemente empeoraría la experiencia. Consulte [Por qué solo se considera la demora de la entrada](#why-only-consider-the-input-delay) más abajo para obtener más información. {% endAside %}
+
+Considere la siguiente línea de tiempo para cargar una página web normal:
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="Ejemplo de seguimiento de carga de páginas", width="800", height="260", linkTo=true %}
+
+En la visualización anterior se muestra una página que realiza un par de solicitudes de red para recursos (probablemente archivos CSS y JS) y, una vez que se terminan de descargar esos recursos, se procesan en el subproceso principal.
+
+Esto da como resultado periodos en los que el subproceso principal momentáneamente está ocupado, lo que se indica mediante los bloques de [tareas](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task) de color beige.
+
+Los retrasos prolongados en la primera entrada normalmente suceden entre el [First Contentful Paint: Primer despliegue de contenido (FCP)](/fcp/) y el [Time to Interactive: Momento para interactuar (TTI)](/tti/) porque la página procesó parte de su contenido, pero aún no es interactiva de forma confiable. Para ilustrar cómo puede suceder esto, se agregaron FCP y TTI a la línea de tiempo:
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="Ejemplo de seguimiento de carga de páginas con FCP y TTI", width="800", height="340", linkTo=true %}
+
+Es posible que haya notado que hay una buena cantidad de tiempo (que incluye tres [tareas largas](/custom-metrics/#long-tasks-api) ) entre FCP y TTI, si un usuario intenta interactuar con la página durante ese tiempo (por ejemplo, haga clic en un enlace), habrá una demora entre el momento en que el se recibe un clic y cuando el subproceso principal puede responder.
+
+Considere lo que sucedería si un usuario intenta interactuar con la página cuando está cerca de que inicie de la tarea más larga:
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="Ejemplo de seguimiento de carga de páginas con FCP, TTI y FID", width="800", height="380", linkTo=true %}
+
+Debido a que la entrada se produce mientras el navegador ejecuta una tarea, debe esperar hasta que la tarea se complete antes de que pueda responder a la entrada. El tiempo que debe esperar es el valor de FID para este usuario en esta página.
+
+{% Aside %} En este ejemplo, el usuario simplemente interactuó con la página al inicio del periodo de mayor actividad del subproceso principal. Si el usuario hubiera interactuado con la página un momento antes (durante el periodo de inactividad), el navegador podría haber respondido de inmediato. Esta variación en el retraso de la entrada subraya la importancia de observar la distribución de los valores de FID cuando se hacen informes sobre la métrica. Puede obtener más información esto en la siguiente sección sobre análisis e informes de datos FID. {% endAside %}
+
+### ¿Qué sucede si una interacción no tiene un detector de eventos?
+
+FID mide la delta entre el momento en que se recibe un evento de entrada y el siguiente momento en que el subproceso principal está inactivo. Esto significa que FID se mide **incluso en los casos en que no se registró un detector de eventos.** La razón se debe a que muchas interacciones de los usuarios no requieren de un detector de eventos, pero *se* requiere que el subproceso principal esté inactivo para que se pueda ejecutar.
+
+Por ejemplo, todos los siguientes elementos HTML deben esperar a que se completen las tareas en curso en el subproceso principal antes de responder a las interacciones del usuario:
+
+- Campos de texto, casillas de verificación y botones de opción (`<input>`, `<textarea>`)
+- Seleccionar menús desplegables ( `<select>` )
+- Enlaces (`<a>`)
+
+### ¿Por qué se debe considerar solo la primera entrada?
+
+Si bien un retraso de cualquier entrada puede provocar una mala experiencia del usuario, principalmente recomendamos que mida la demora de la primera entrada por algunas razones:
+
+- La primera demora en la entrada será la primera impresión del usuario sobre la capacidad de respuesta de su sitio, y las primeras impresiones son críticas para dar forma a nuestra impresión general de la calidad y confiabilidad de un sitio.
+- Los mayores problemas de interactividad que vemos en la web hoy en día ocurren cuando carga una página. Por lo tanto, creemos que centrarse inicialmente en mejorar la primera interacción del usuario del sitio tendrá el mayor impacto en la mejora de la interactividad general de la web.
+- Las soluciones recomendadas sobre cómo los sitios deben corregir las grandes demoras en la primera entrada (división de código, carga de menos JavaScript por adelantado, etc.) no son necesariamente las mismas soluciones para corregir retrasos lentos en la entrada después que se cargue la página. Al separar estas métricas, podremos proporcionar normas de rendimiento más específicas para los desarrolladores web.
+
+### ¿Qué cuenta como primera entrada?
+
+FID es una métrica que mide la capacidad de respuesta de una página durante la carga. Como tal, solo se enfoca en eventos de entrada para acciones discretas como dar clics, pulsar y presionar teclas.
+
+Otras interacciones, como el desplazamiento y el acercamiento, son acciones continuas y tienen restricciones de rendimiento completamente diferentes (además, los navegadores con frecuencia pueden ocultar su latencia cuando se ejecutan en un subproceso separado).
+
+Para decirlo de otra manera, FID se centra en la R (capacidad de respuesta) en el [modelo de rendimiento de RAIL](/rail/), mientras que el desplazamiento y el acercamiento se relacionan más con A (animación), y sus cualidades de rendimiento deben evaluarse por separado.
+
+### ¿Qué sucede si un usuario nunca interactúa con su sitio?
+
+No todos los usuarios interactuarán con su sitio cada vez que lo visitan. Y no todas las interacciones son relevantes para FID (como se mencionó en la sección anterior). Además, las primeras interacciones de algunos usuarios serán en los malos momentos (cuando el subproceso principal está ocupado durante un periodo prolongado de tiempo), y las primeras interacciones de algunos usuarios serán en los buenos momentos (cuando el subproceso principal está completamente inactivo).
+
+Esto significa que algunos usuarios no tendrán valores FID, algunos usuarios tendrán valores FID bajos y algunos usuarios probablemente tendrán valores FID altos.
+
+La forma en que sigue, reporta y analiza FID probablemente será bastante diferente de otras métricas a las que puede estar acostumbrado. En la siguiente sección se explica cuál es la mejor manera de hacer esto.
+
+### ¿Por qué solo considerar la demora en la entrada?
+
+Como se mencionó anteriormente, FID solo mide la "demora" en el procesamiento de eventos. No mide el tiempo en que se procesan los eventos perse, ni el tiempo que tarda el navegador en actualizar la interfaz del usuario después de que se ejecuten los controladores de eventos.
+
+A pesar de que este tiempo es importante para el usuario y *afecta* a la experiencia, que no se incluye en este indicador, ya que si se hace podría incentivar a los desarrolladores a que agreguen soluciones que realmente hagan que la experiencia empeore, es decir, que puede envolver su lógica para controlar eventos en una devolución de llamada asíncrona (a través de `setTimeout()` o `requestAnimationFrame()`) para que se separe de la tarea asociada con el evento. El resultado sería una mejora en la puntuación de la métrica, pero una respuesta más lenta según lo que percibe el usuario.
+
+Sin embargo, aunque FID solo mide la parte de la "demora" de la latencia del evento, los desarrolladores que quieran realizar un seguimiento mayor del ciclo de vida del evento pueden hacerlo mediante la [API para cronometrar eventos](https://wicg.github.io/event-timing/). Consulte la guía sobre [métricas personalizadas](/custom-metrics/#event-timing-api) para obtener más información.
+
+## Cómo medir FID
+
+FID es una métrica que solo se puede medir [en el campo](/user-centric-performance-metrics/#in-the-field) , ya que requiere que un usuario real interactúe con su página. Puede medir FID con las siguientes herramientas.
+
+{% Aside %} FID requiere de un usuario real y, por lo tanto, no se puede medir en el laboratorio. Sin embargo, la métrica [Total Blocking Time: Tiempo total de bloqueo (TBT)](/tbt/) se puede medir en laboratorio, se correlaciona bien con la FID en el campo y también captura los problemas que afectan la interactividad. Las optimizaciones que mejoran el TBT en el laboratorio también deberían mejorar la FID para sus usuarios. {% endAside %}
+
+### Herramientas de campo
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [Biblioteca de JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Cómo medir FID en JavaScript
+
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
+Para medir FID en JavaScript, puede utilizar la [API para cronometrar eventos](https://wicg.github.io/event-timing). En el siguiente ejemplo se muestra cómo crear un [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que capte las entradas [`first-input`](https://wicg.github.io/event-timing/#sec-performance-event-timing) y las registre en la consola:
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %} En este código se muestra cómo registrar las entradas `first-input` en la consola y cómo calcular su demora. Sin embargo, medir FID en JavaScript es más complicado. Consulte la información más adelante: {% endAside %}
+
+En el ejemplo anterior, el valor de demora para la entrada `first-input` se mide al tomar la delta entre las marcas de tiempo `startTime` y `processingStart`. En la mayoría de los casos, este será el valor FID, sin embargo, no todas las `first-input` son válidas para medir FID.
+
+La siguiente sección enumera las diferencias entre lo que informa la API y cómo se calcula la métrica.
+
+#### Diferencias entre la métrica y la API
+
+- La API enviará `first-input` para las páginas que se carguen en una pestaña de segundo plano, pero esas páginas deben ignorarse al calcular FID.
+- La API también enviará `first-input` si la página estaba en segundo plano antes de que ocurriera la primera entrada, pero esas páginas también deben ignorarse cuando se calcula FID (las entradas solo se consideran si la página estuvo en primer plano todo el tiempo).
+- La API no reporta las entradas `first-input` cuando la página se restaura desde la [caché de retroceso/avance](/bfcache/#impact-on-core-web-vitals), pero FID debe medirse en estos casos, ya que los usuarios las perciben como distintas visitas de la página.
+- La API no reporta las entradas que suceden dentro de los iframes, pero para medir correctamente FID, se deben considerar. Los sub-marcos pueden usar la API para reportar sus entradas `first-input` al marco principal para su incorporación.
+
+En vez de memorizar todas estas diferencias sutiles, los desarrolladores pueden usar la [biblioteca de JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir FID, que maneja estas diferencias por usted (cuando sea posible):
+
+```js
+import {onFID} from 'web-vitals';
+
+// Measure and log FID as soon as it's available.
+onFID(console.log);
+```
+
+Puede consultar [el código fuente de `onFID)`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts) para obtener un ejemplo completo de cómo medir FID en JavaScript.
+
+{% Aside %} En algunos casos (como los iframes de origen cruzado) no es posible medir FID en JavaScript. Consulte la sección de [limitaciones](https://github.com/GoogleChrome/web-vitals#limitations) de los `web-vitals` para obtener más información. {% endAside %}
+
+### Analizar y reportar los datos de FID
+
+Debido a la variación esperada en los valores de FID, es fundamental que al informar sobre FID observe la distribución de valores y se concentre en los percentiles más altos.
+
+Si bien la [elección del percentil](/defining-core-web-vitals-thresholds/#choice-of-percentile) para todos los umbrales de Core Web Vitals es el 75, para FID en particular recomendamos encarecidamente que consulte los percentiles 95 al 99, ya que corresponderán a las primeras experiencias particularmente malas que los usuarios tienen con su sitio. Y le mostrarán las áreas que necesitan más mejoras.
+
+Esto es así incluso si segmenta sus reportes por categoría o tipo de dispositivo. Por ejemplo, si ejecuta informes separados para computadoras de escritorio y dispositivos móviles, el valor de FID que más le interesa en las computadoras de escritorio deben ser los percentiles 95 al 99 de los usuarios de computadoras de escritorio, y el valor de FID que más le interesa en los dispositivos móviles deben ser los percentiles 95 al 99 de los usuarios de dispositivos móviles.
+
+## Cómo mejorar FID
+
+Para aprender a mejorar FID para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier [oportunidad](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específica que sugiera la auditoría.
+
+Si bien FID es una métrica de campo (y Lighthouse es una herramienta de métrica de laboratorio), la guía para mejorar FID es la misma que para mejorar la métrica de laboratorio [Total Blocking Time (TBT)](/tbt/) .
+
+Para profundizar en cómo mejorar FID, consulte [Optimizar FID](/optimize-fid/). Para obtener orientación adicional sobre las técnicas de desempeño individual que también pueden mejorar FID, consulte:
+
+- [Cómo reducir el impacto del código de terceros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Cómo reducir el tiempo de ejecución de JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Cómo minimizar el trabajo del subproceso principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Cómo mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/es/metrics/index.md b/src/site/content/es/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/es/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/es/metrics/lcp/index.md b/src/site/content/es/metrics/lcp/index.md
new file mode 100644
index 00000000000..51cdc8bb76f
--- /dev/null
+++ b/src/site/content/es/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Largest Contentful Paint (LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-19
+description: Esta publicación presenta la métrica de Largest Contentful Paint (LCP) y explica como medirla
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} La métrica Largest Contentful Paint: Despliegue del contenido más extenso (LCP) es una métrica importante centrada en el usuario para medir [la velocidad de carga percibida](/user-centric-performance-metrics/#types-of-metrics) porque marca el punto en la línea de tiempo de carga de la página cuando es probable que el contenido principal de la página se haya cargado. Un LCP rápido ayuda a asegurar al usuario que el la página sea [útil](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Históricamente, ha sido un desafío para los desarrolladores web medir qué tan rápido se carga el contenido principal de una página web y es visible para los usuarios.
+
+Las métricas más antiguas como [load: carga](https://developer.mozilla.org/docs/Web/Events/load) o [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) no son buenas porque no corresponden necesariamente con lo que el usuario ve en su pantalla. Y las métricas de rendimiento más nuevas y centradas en el usuario, como [First Contentful Paint (FCP),](/fcp/) solo capturan el comienzo de la experiencia de carga. Si una página muestra una pantalla de bienvenida o muestra un indicador de carga, este momento no es muy relevante para el usuario.
+
+En el pasado, recomendamos métricas de rendimiento como [First Meaningful Paint: Primer despliegue significativo (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) y [Speed Index: Índice de velocidad (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) (ambas disponibles en Lighthouse) para ayudar a capturar más de la experiencia de carga después del despliegue inicial, pero estas métricas son complejas y difíciles de explicar, y a menudo incorrectas, lo que significa que todavía no identifican cuándo se carga el contenido principal de la página.
+
+A veces, lo más simple es mejor. Según las discusiones del [Grupo de trabajo sobre el rendimiento de la web W3C](https://www.w3.org/webperf/) y la investigación realizada en Google, descubrimos que una forma más precisa de medir cuándo se carga el contenido principal de una página es observar cuándo se renderizó el elemento más grande.
+
+## ¿Qué es LCP?
+
+La métrica Largest Contentful Paint: Despliegue del contenido más extenso (LCP) reporta el tiempo para renderizar una [imagen o el bloque de texto](#what-elements-are-considered) más grande visible dentro de la ventana de visualización, en relación con el momento en que la página [comenzó a cargarse](https://w3c.github.io/hr-time/#timeorigin-attribute).
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+    {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="Los buenos valores de LCP son 2,5 segundos, los valores malos son superiores a 4,0 segundos y cualquier cosa intermedia necesita mejora", width="400", height="300" %}
+  </picture>
+
+### ¿Qué es una buena puntuación LCP?
+
+Para brindar una buena experiencia de usuario, los sitios deben esforzarse por tener Largest Contentful Paint de **2.5 segundos** o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el **percentil 75** para cargar páginas, que se segmenta entre dispositivos móviles y equipos de escritorio.
+
+{% Aside %} Para obtener más información sobre la investigación y la metodología que está detrás de esta recomendación, consulte: [Definición de los umbrales de las métricas de Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### ¿Qué elementos se consideran?
+
+Como se especifica actualmente en la [API de Largest Contentful Paint](https://wicg.github.io/largest-contentful-paint/), los tipos de elementos considerados para Largest Contentful Paint son:
+
+- `<img>` elementos
+- `<image>` elementos dentro de un elemento `<svg>`
+- `<video>` elementos (se utiliza la imagen del cartel)
+- Un elemento con una imagen de segundo plano que se carga a través de la función [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (a diferencia de un [gradiente CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients))
+- Elementos a [nivel de bloque](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements) que contienen nodos de texto u otros elementos secundarios de texto con estilos integrados en el código.
+
+Tenga en cuenta que restringir los elementos a este conjunto limitado fue intencional para mantener las cosas sencillas al principio. Es posible que se agreguen elementos adicionales (por ejemplo, `<svg>` , `<video>` ) en el futuro, conforme se realicen más investigaciones.
+
+### ¿Cómo se determina el tamaño de un elemento?
+
+El tamaño del elemento reportado por Largest Contentful Paint normalmente es el tamaño que es visible para el usuario dentro de la ventana de visualización. Si el elemento se extiende fuera de la ventana de visualización, o si alguno de los elementos está recortado o tiene un [desbordamiento](https://developer.mozilla.org/docs/Web/CSS/overflow) no visible, esas porciones no se toman en cuenta en el tamaño del elemento.
+
+Para los elementos de imagen que cambiaron de tamaño de su [tamaño intrínseco](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size), el tamaño que se informa es el tamaño visible o el tamaño intrínseco, el que sea menor. Por ejemplo, las imágenes que se reducen a un tamaño mucho más pequeño que su tamaño intrínseco solo informarán el tamaño en el que se muestran, mientras que las imágenes que se estiran o expanden a un tamaño mayor solo informarán sus tamaños intrínsecos.
+
+Para los elementos de texto, solo se considera el tamaño de sus nodos de texto (el rectángulo más pequeño que abarca todos los nodos de texto).
+
+Para todos los elementos, no se considera ningún margen, relleno o borde aplicado por medio de CSS.
+
+{% Aside %} Determinar qué nodos de texto pertenecen a qué elementos a veces puede ser complicado, especialmente para elementos cuyos elementos secundarios incluyen elementos de estilos integrados en el código y nodos de texto sin formato, pero también elementos a nivel de bloque. El punto clave es que cada nodo de texto pertenece (y solo a) su elemento ancestro de nivel de bloque más cercano. En [términos de especificaciones](https://wicg.github.io/element-timing/#set-of-owned-text-nodes) : cada nodo de texto pertenece al elemento que genera su [bloque contenedor](https://developer.mozilla.org/docs/Web/CSS/Containing_block). {% endAside %}
+
+### ¿Cuándo se reporta largest contentful paint?
+
+Las páginas web a menudo se cargan en etapas y, como resultado, es posible que el elemento más grande de la página cambie.
+
+Para manejar este potencial de cambio, el navegador envía un [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) del tipo `largest-contentful-paint` que identifica el elemento de contenido más extenso tan pronto como el navegador haya desplegado el primer marco. Pero entonces, después de renderizar los marcos subsiguientes, enviará otra [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) cada vez que haya cambios en el elemento de contenido más extenso.
+
+Por ejemplo, en una página con texto y una imagen hero, el navegador inicialmente puede renderizar solo el texto, en este momento enviará una entrada `largest-contentful-paint` cuya propiedad `element` probablemente llamará a un `<p>` o `<h1>`. Más adelante, una vez que la imagen hero termine de cargarse, se enviaría una segunda entrada `largest-contentful-paint` y su propiedad `element` podría llamar a `<img>`.
+
+Es importante tener en cuenta que un elemento solo puede considerarse el elemento de contenido más grande una vez que se haya renderizado y sea visible para el usuario. Las imágenes que aún no se han cargado no se consideran "renderizadas". Tampoco los nodos de texto utilizan fuentes web durante el [periodo de bloqueo de fuentes](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline). En tales casos, un elemento más pequeño se puede reportar como el elemento de contenido más extenso, pero tan pronto como el elemento más extenso termine de renderizarse, se reportará por medio de otro objeto `PerformanceEntry`.
+
+Además de las imágenes y fuentes de carga tardía, una página puede agregar nuevos elementos al DOM conforme el nuevo contenido esté disponible. Si alguno de estos nuevos elementos es más grande que el elemento de contenido más extenso anterior, también se reportará un nuevo `PerformanceEntry`.
+
+Si un elemento actualmente tiene el contenido más extenso se elimina de la ventana de visualización (o incluso se elimina del DOM), seguirá siendo el elemento de contenido más extenso a menos que un elemento más extenso se haya renderizado.
+
+{% Aside %} Antes de que llegara Chrome 88, los elementos eliminados no se consideraban como elementos de contenido más extensos, y la eliminación del candidato actual provocaba el envío de una nueva entrada `largest-contentful-paint`. Sin embargo, debido a los populares patrones de interfaz de usuario, como los carruseles de imágenes, que con frecuencia eliminan elementos del DOM, la métrica se actualizó para reflejar con mayor precisión lo que experimentan los usuarios. Consulte el [CHANGELOG](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md) para obtener más información. {% endAside %}
+
+El navegador dejará de informar de las nuevas entradas en cuanto el usuario interactúe con la página (al pulsar, desplazar o presionar una tecla), ya que en la interacción el usuario normalmente cambia lo que es visible para él (lo cual es especialmente cierto con el desplazamiento).
+
+Con fines de análisis, solo debe reportar el último `PerformanceEntry` enviado a su servicio de análisis.
+
+{% Aside 'caution' %} Dado que los usuarios pueden abrir páginas en una pestaña en segundo plano, es posible que el despliegue de contenido más extenso no ocurra hasta que el usuario enfoque la pestaña, lo que puede ser mucho más tarde que cuando la cargó por primera vez. {% endAside %}
+
+#### Tiempo de carga vs.tiempo de renderizado
+
+Por motivos de seguridad, la marca de tiempo para renderizar imágenes no se expone para las imágenes de origen cruzado que carecen del encabezado [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) En cambio, solo se expone su tiempo de carga (ya que esto ya se expone por medio de muchas otras API web).
+
+El siguiente [ejemplo de uso](#measure-lcp-in-javascript) muestra cómo manejar elementos cuyo tiempo de renderizado no está disponible. Pero, cuando sea posible, siempre se recomienda configurar el [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin), para que sus métricas sean más precisas.
+
+### ¿Cómo se manejan los cambios de tamaño y diseño de los elementos?
+
+Para mantener baja la sobrecarga de rendimiento que calcula y envía nuevas entradas de rendimiento, los cambios en el tamaño o la posición de un elemento no generan nuevos candidatos LCP. Solo se consideran el tamaño y la posición iniciales del elemento en la ventana de visualización.
+
+Esto significa que las imágenes que inicialmente se renderizan fuera y después pasan a la pantalla posiblemente no se reporten. Además, significa que los elementos renderizados inicialmente en la ventana visualización que luego se desplazan hacia abajo, fuera de la vista, seguirán reportando su tamaño inicial en la ventana de visualización.
+
+### Ejemplos
+
+A continuación, se muestran algunos ejemplos de situaciones en las que se presenta Largest Contentful Paint en algunos sitios web populares:
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="Línea del tiempo de Largest Contentful Paint : Despliegue del contenido más extenso de cnn.com", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="Línea del tiempo de Largest Contentful Paint : Despliegue del contenido más extenso de techcrunch.com", width="800", height="311" %}
+
+En las dos líneas de tiempo anteriores, el elemento más extenso cambia conforme se carga el contenido. En el primer ejemplo, se agrega nuevo contenido al DOM y eso cambia el elemento más extenso. En el segundo ejemplo, el diseño cambia y el contenido que antes era el más grande se elimina de la ventana de visualización.
+
+Si bien a menudo ocurre que el contenido de carga tardía es más grande que el contenido que ya está en la página, ese no es necesariamente el caso. En los dos ejemplos siguientes se muestra que Largest Contentful Paint se presenta antes de que la página se cargue por completo.
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="Línea del tiempo de Largest Contentful Paint : Despliegue del contenido más extenso de instagram.com", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="Línea del tiempo de Largest Contentful Paint : Despliegue del contenido más extenso de google.com", width="800", height="311" %}
+
+En el primer ejemplo, el logotipo de Instagram se carga relativamente pronto y sigue siendo el elemento más extenso, incluso cuando se muestran progresivamente otros contenidos. En el ejemplo de la página de resultados de búsqueda de Google, el elemento más grande es un párrafo de texto que se muestra antes de que terminen de cargarse las imágenes o el logotipo. Como todas las imágenes individuales son más pequeñas que este párrafo, sigue siendo el elemento más extenso durante todo el proceso de carga.
+
+{% Aside %} En el primer marco de la línea de tiempo de Instagram, puede notar que el logotipo de la cámara no tiene un recuadro verde a su alrededor. Esto se debe a que es un elemento `<svg>`, y los elementos `<svg>` actualmente no se consideran como candidatos LCP. El primer candidato LCP es el texto del segundo marco. {% endAside %}
+
+## Cómo medir LCP
+
+LCP se puede medir [en el laboratorio](/user-centric-performance-metrics/#in-the-lab) o [en el campo](/user-centric-performance-metrics/#in-the-field) y está disponible en las siguientes herramientas:
+
+### Herramientas de campo
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [Biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Herramientas de laboratorio
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Cómo medir LCP en JavaScript
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+Para medir LCP en JavaScript, puede utilizar la [API de Largest Contentful Paint](https://wicg.github.io/largest-contentful-paint/). En el siguiente ejemplo se muestra cómo crear un [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que capte las entradas de `largest-contentful-paint` y las registre en la consola.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+En este código se muestra cómo registrar las entradas de `largest-contentful-paint` en la consola, pero medir LCP en JavaScript es más complicado. Vea a continuación los detalles:
+
+{% endAside %}
+
+En el ejemplo anterior, cada entrada de `largest-contentful-paint` registrada representa el candidato LCP actual. En general, el `startTime` de la última entrada emitida es el valor LCP, sin embargo, no siempre es así. No todas las entradas de `largest-contentful-paint` son válidas para medir LCP.
+
+En la siguiente sección se enumeran las diferencias entre lo que reporta la API y cómo se calcula la métrica.
+
+#### Diferencias entre la métrica y la API
+
+- La API enviará `largest-contentful-paint` a las páginas cargadas en una pestaña de segundo plano, pero esas páginas deben ignorarse al calcular LCP.
+- La API continuará enviando `largest-contentful-paint` después de que una página haya sido puesta en segundo plano, pero esas entradas deben ignorarse al calcular LCP (los elementos solo se pueden considerar si la página estuvo en el primer plano todo el tiempo).
+- La API no reporta `largest-contentful-paint` cuando la página se restaura desde la [caché de retroceso/avance](/bfcache/#impact-on-core-web-vitals), pero LCP debe medirse en estos casos, ya que los usuarios las experimentan como visitas de página distintas.
+- La API no considera elementos dentro de iframes, pero para medir correctamente LCP debe considerarlos. Los sub-marcos pueden usar la API para reportar sus `largest-contentful-paint` con mayor contenido al marco principal para su incorporación.
+
+En vez de memorizar todas estas diferencias sutiles, los desarrolladores pueden usar la [Biblioteca JavaScript de `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir LCP, que maneja estas diferencias por usted (cuando sea posible):
+
+```js
+import {onLCP} from 'web-vitals';
+
+// Measure and log LCP as soon as it's available.
+onLCP(console.log);
+```
+
+Puede consultar [el código fuente de `onLCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts) para obtener un ejemplo completo de cómo medir LCP en JavaScript.
+
+{% Aside %} En algunos casos (como los iframes de origen cruzado) no es posible medir LCP en JavaScript. Consulte la sección de [limitaciones](https://github.com/GoogleChrome/web-vitals#limitations) `web-vitals` para obtener más información. {% endAside %}
+
+### ¿Qué sucede si el elemento más extenso no es el más importante?
+
+En algunos casos, el elemento (o elementos) más importantes de la página no es el mismo que el elemento más extenso, y los desarrolladores pueden estar más interesados en medir los tiempos de renderizado de estos otros elementos. Esto es posible utilizando la [API Element Timing](https://wicg.github.io/element-timing/), como se describe en el artículo sobre las [métricas personalizadas](/custom-metrics/#element-timing-api).
+
+## Cómo mejorar LCP
+
+LCP se ve afectado principalmente por cuatro factores:
+
+- Tiempos de respuesta lentos del servidor
+- JavaScript y CSS bloquean la renderización
+- Tiempos de carga de recursos
+- Renderización del lado del cliente
+
+Para profundizar en cómo mejorar LCP, consulte [Optimizar LCP](/optimize-lcp/). Para obtener orientación adicional sobre las técnicas de rendimiento individual que también pueden mejorar LCP, consulte:
+
+- [Aplicar carga instantánea con el patrón PRPL](/apply-instant-loading-with-prpl)
+- [Optimización de la ruta de renderización crítica](/critical-rendering-path/)
+- [Optimizar su CSS](/fast#optimize-your-css)
+- [Optimizar sus imágenes](/fast#optimize-your-images)
+- [Optimizar las fuentes web](/fast#optimize-web-fonts)
+- [Optimice su JavaScript](/fast#optimize-your-javascript) (para sitios renderizados por el cliente)
+
+## Recursos adicionales
+
+- [Lecciones aprendidas de la supervisión del rendimiento en Chrome](https://youtu.be/ctavZT87syI) por [Annie Sullivan](https://anniesullie.com/) en [performance.now ()](https://perfnow.nl/) (2019)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/es/metrics/tbt/index.md b/src/site/content/es/metrics/tbt/index.md
new file mode 100644
index 00000000000..64e68d0f0c0
--- /dev/null
+++ b/src/site/content/es/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Total Blocking Time (TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: En esta publicación se presenta la métrica Total Blocking Time (TBT) y se explica como medirla
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+Total Blocking Time: Tiempo de bloqueo total (TBT) es una [métrica de laboratorio](/user-centric-performance-metrics/#in-the-lab) importante para medir la [capacidad de respuesta de la carga](/user-centric-performance-metrics/#types-of-metrics) porque ayuda a cuantificar la gravedad de la falta de interacción de una página antes de que se vuelva interactiva de manera confiable: una TBT baja ayuda a garantizar que la página sea [útil](/user-centric-performance-metrics/#questions).
+
+{% endAside %}
+
+## ¿Qué es TBT?
+
+La métrica Total Blocking Time (TBT) mide la cantidad total de tiempo entre [First Contentful Paint: Primer despliegue del contenido (FCP)](/fcp/) y [Time to Interactive: Tiempo para interactuar (TTI)](/tti/) donde el subproceso principal estuvo bloqueado durante el tiempo suficiente para evitar la respuesta de entrada.
+
+El subproceso principal se considera "bloqueado" cada vez que hay una [Tarea larga](/custom-metrics/#long-tasks-api), una tarea que se ejecuta en el subproceso principal durante más de 50 milisegundos (ms). Decimos que el subproceso principal está "bloqueado" porque el navegador no puede interrumpir una tarea que está en curso. Así que en el caso de que un usuario *interactúe* con la página en medio de una tarea larga, el navegador debe esperar a que la tarea termine antes de que pueda responder.
+
+Si la tarea es lo suficientemente larga (por ejemplo, cualquier cosa que supere los 50 ms), es probable que el usuario se dé cuenta de la demora y perciba que la página es lenta o poco funcional.
+
+El *tiempo de bloqueo* de una tarea larga determinada es su duración superior a 50 ms. Y el *tiempo de bloqueo total* de una página es la suma del *tiempo de bloqueo* para cada tarea larga que se produce entre FCP y TTI.
+
+Por ejemplo, considere consultar el siguiente diagrama del subproceso principal del navegador durante la carga de la página:
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="Una línea de tiempo de tareas en el subproceso principal", width="800", height="156", linkTo=true %}
+
+La línea de tiempo anterior tiene cinco tareas, tres de las cuales son tareas largas porque su duración supera los 50 ms. En el siguiente diagrama se muestra el tiempo de bloqueo para cada una de las tareas largas:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="Una línea de tiempo de tareas en el subproceso principal que muestra el tiempo de bloqueo", width="800", height="156", linkTo=true %}
+
+Entonces, mientras que el tiempo total dedicado a ejecutar tareas en el subproceso principal es de 560 ms, solo 345 ms de ese tiempo se considera como tiempo de bloqueo.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Duración de la tarea</th>
+    <th>Tiempo de bloqueo de la tarea</th>
+  </tr>
+  <tr>
+    <td>Tarea uno</td>
+    <td>250 ms</td>
+    <td>200 ms</td>
+  </tr>
+  <tr>
+    <td>Tarea dos</td>
+    <td>90 ms</td>
+    <td>40 ms</td>
+  </tr>
+  <tr>
+    <td>Tarea tres</td>
+    <td>35 ms</td>
+    <td>0 ms</td>
+  </tr>
+  <tr>
+    <td>Tarea cuatro</td>
+    <td>30 ms</td>
+    <td>0 ms</td>
+  </tr>
+  <tr>
+    <td>Tarea cinco</td>
+    <td>155 ms</td>
+    <td>105 ms</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>Tiempo total de bloqueo</strong></td>
+    <td><strong>345 ms</strong></td>
+  </tr>
+</table>
+
+### ¿Cómo se relaciona TBT con TTI?
+
+TBT es una gran métrica complementaria para TTI porque ayuda a cuantificar la gravedad de la falta de interactividad de una página antes de que se convierta en interactiva confiable.
+
+TTI considera que una página es "confiablemente interactiva" si el subproceso principal ha estado libre de tareas largas durante al menos cinco segundos. Esto significa que tres tareas de 51 ms repartidas a lo largo de 10 segundos pueden demorar el TTI tanto como una sola tarea de 10 segundos de duración, pero estos dos escenarios serían muy diferentes para un usuario que intenta interactuar con la página.
+
+En el primer caso, tres tareas de 51 ms tendrían un TBT de **3 ms**. Mientras que una sola tarea de 10 segundos de duración tendría un TBT de **9, 950 ms**. El valor mayor de TBT en el segundo caso cuantifica la peor experiencia.
+
+## Cómo medir TBT
+
+TBT es una métrica que debe medirse [en el laboratorio](/user-centric-performance-metrics/#in-the-lab) . La mejor manera de medir TBT es ejecutar una auditoría de desempeño Lighthouse en su sitio. Consulte la [documentación de Lighthouse sobre TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/) para obtener información sobre su uso.
+
+### Herramientas de laboratorio
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Si bien es posible medir TBT en el campo, no se recomienda ya que la interacción del usuario puede afectar la TBT de su página de manera que genere muchas variaciones en sus reportes. Para comprender la interactividad de una página en el campo, debe medir [First Input Delay (FID)](/fid/). {% endAside %}
+
+## ¿Qué es una buena puntuación TBT?
+
+Para ofrecer una buena experiencia de usuario, los sitios deben esforzarse por tener un Total Blocking Time inferior a **300 milisegundos** cuando se prueban en el hardware de un **dispositivo móvil promedio**.
+
+Para obtener más información sobre cómo la TBT de su página afecta a su puntuación de rendimiento de Lighthouse, consulte [Cómo determina Lighthouse su puntuación TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)
+
+## Cómo mejorar TBT
+
+Para aprender a mejorar TBT para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier [oportunidad](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específica que sugiera la auditoría.
+
+Para saber cómo mejorar la TBT en general (para cualquier sitio), consulte las siguientes normas de rendimiento:
+
+- [Reducir el impacto en el código de terceros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Reducir el tiempo de ejecución de JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimizar el trabajo del subproceso principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/es/metrics/tti/index.md b/src/site/content/es/metrics/tti/index.md
new file mode 100644
index 00000000000..a43347b0c95
--- /dev/null
+++ b/src/site/content/es/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Time to Interactive (TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: En esta publicación se presenta la métrica Time to Interactive (TTI) y se explica como medirla
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Time to Interactive: Tiempo de interacción (TTI) es una [métrica de laboratorio](/user-centric-performance-metrics/#in-the-lab) importante para medir la [capacidad de respuesta de la carga](/user-centric-performance-metrics/#types-of-metrics). Ayuda a identificar casos en los que una página *parece* interactiva pero en realidad no lo es. Una TTI rápida ayuda a garantizar que la página sea [útil](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## ¿Qué es TTI?
+
+La métrica TTI mide el tiempo que transcurre desde que se inicia la carga de la página hasta que se cargan sus principales recursos secundarios y es capaz de responder de manera confiable a la entrada del usuario rápidamente.
+
+Para calcular la TTI a partir de un [seguimiento](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) de rendimiento de una página web, siga estos pasos:
+
+1. Comience en [First Contentful Paint: Despliegue de la primera entrada (FCP)](/fcp/).
+2. Busque en el tiempo una ventana tranquila de al menos cinco segundos, donde la *ventana tranquila* se define como: ninguna [tarea larga](/custom-metrics/#long-tasks-api) y no más de dos solicitudes GET en la red de abordaje.
+3. Busque hacia atrás la última tarea larga antes de la ventana tranquila, que se detiene en FCP si no se encuentran tareas largas.
+4. TTI es la hora de finalización de la última tarea larga antes de la ventana tranquila (o el mismo valor que FCP si no se encuentran tareas largas).
+
+El siguiente diagrama debería ayudar a visualizar los pasos anteriores:
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="Una línea de tiempo para cargar la página que muestra cómo calcular TTI", width="800", height="473", linkTo=true %}
+
+Históricamente, los desarrolladores han optimizado las páginas para obtener tiempos de renderizado rápidos, a veces a expensas de TTI.
+
+Técnicas como el renderizado del lado del servidor (SSR) pueden llevar a escenarios en los que una página *parece* interactiva (es decir, los enlaces y botones son visibles en la pantalla), pero en *realidad* no es interactiva porque el subproceso principal está bloqueado o porque el código JavaScript que controla esos elementos no se ha cargado.
+
+Cuando los usuarios intentan interactuar con una página que parece interactiva pero que en realidad no lo es, es probable que respondan de una de estas dos formas:
+
+- En el mejor de los casos, les molestará que la página tarde en responder.
+- En el peor de los casos, asumirán que el enlace de la página está roto y probablemente se irán. Incluso pueden perder la confianza o la confianza en el valor de su marca.
+
+Para evitar este problema, haga todo lo posible para minimizar la diferencia entre FCP y TTI. Y en los casos en que exista una diferencia notable, déjelo claro, mediante indicadores visuales, que los componentes de su página aún no son interactivos.
+
+## Cómo medir TTI
+
+TTI es una métrica que se mide mejor [en el laboratorio](/user-centric-performance-metrics/#in-the-lab) . La mejor manera de medir TTI es ejecutar una auditoría de desempeño Lighthouse en su sitio. Consulte la [documentación de Lighthouse sobre TTI](/tti/) para obtener información sobre su uso.
+
+### Herramientas de laboratorio
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Si bien es posible medir TTI en el campo, no se recomienda ya que la interacción del usuario puede afectar la TTI de su página de manera que genere muchas variaciones en sus reportes. Para comprender la interactividad de una página en el campo, debe medir [First Input Delay (FID)](/fid/). {% endAside %}
+
+## ¿Qué es una buena puntuación TTI?
+
+Para ofrecer una buena experiencia de usuario, los sitios deben esforzarse por tener un Time to Interactive inferior a **5 segundos** cuando se prueban en el **hardware de un dispositivo móvil promedio**.
+
+Para obtener más información sobre cómo la TTI de su página afecta a su puntuación de rendimiento de Lighthouse, consulte [Cómo determina Lighthouse su puntuación TTI](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score).
+
+## Cómo mejorar TTI
+
+Para aprender a mejorar TTI para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier [oportunidad](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específica que sugiera la auditoría.
+
+Para saber cómo mejorar la TTI en general (para cualquier sitio), consulte las siguientes normas de rendimiento:
+
+- [Minificar JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [Preconectar a los orígenes requeridos](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Precargar solicitudes clave](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Reducir el impacto en el código de terceros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Minimizar la profundidad de la solicitud crítica](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Reducir el tiempo de ejecución de JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimizar el trabajo del subproceso principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/es/metrics/user-centric-performance-metrics/index.md b/src/site/content/es/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..e57240c204e
--- /dev/null
+++ b/src/site/content/es/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: Métricas de rendimiento centradas en el usuario
+authors:
+  - philipwalton
+date: 2019-11-08
+description: Las métricas de rendimiento centradas en el usuario son una herramienta fundamental para comprender y mejorar la experiencia de su sitio web de forma que beneficie a los usuarios reales.
+tags:
+  - performance
+  - metrics
+---
+
+Todos hemos oído hablar de la importancia del rendimiento. Pero cuando hablamos de rendimiento, y de hacer que los sitios web sean "rápidos", ¿a qué nos referimos específicamente?
+
+La verdad es que el rendimiento es relativo:
+
+- Un sitio puede ser rápido para un usuario (en una red rápida con un dispositivo potente) pero lento para otro (en una red lenta con un dispositivo de gama baja).
+- Dos sitios pueden terminar de cargarse al mismo tiempo, pero uno puede *parecer* más rápido (si carga el contenido de forma progresiva en vez de esperar hasta el final para mostrar algo).
+- Puede *parecer* que un sitio se carga rápidamente, pero luego responde lentamente (o no responde en absoluto) a la interacción del usuario.
+
+Por eso, cuando se habla de rendimiento, es importante ser preciso y referirse al rendimiento en términos de criterios objetivos que pueden medirse cuantitativamente. Estos criterios se conocen como *métricas*.
+
+Pero el hecho de que una métrica se base en criterios objetivos y pueda medirse cuantitativamente no significa necesariamente que esas medidas sean útiles.
+
+## Definición de las métricas
+
+Históricamente, el rendimiento web se ha medido con el evento <code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code>. Sin embargo, aunque <code>load</code> es un momento bien definido en el ciclo de vida de una página, ese momento no corresponde necesariamente con algo que le interese al usuario.
+
+Por ejemplo, un servidor podría responder con una página mínima que se "cargue" inmediatamente, pero que luego retrase la búsqueda de contenido y la visualización de cualquier cosa en la página hasta varios segundos después de que se active el evento `load`. Si bien esta página podría tener técnicamente un tiempo de carga rápido, ese tiempo no correspondería con la forma en que el usuario experimenta realmente la carga de la página.
+
+En los últimos años, los miembros del equipo de Chrome, en colaboración con el [Grupo de trabajo de rendimiento web del W3C](https://www.w3.org/webperf/), han estado trabajando para estandarizar un conjunto de nuevas API y métricas que miden con mayor precisión cómo los usuarios experimentan el rendimiento de una página web.
+
+Para ayudar a garantizar que las métricas sean relevantes para los usuarios, las enmarcamos en torno a algunas preguntas clave:
+
+<table id="questions">
+  <tr>
+    <td><strong>¿Está sucediendo?</strong></td>
+    <td>¿La navegación se inició correctamente? ¿Ha respondido el servidor?</td>
+  </tr>
+  <tr>
+    <td><strong>¿Es útil?</strong></td>
+    <td>¿Se ha renderizado suficiente contenido para que los usuarios puedan interactuar con él?</td>
+  </tr>
+  <tr>
+    <td><strong>¿Es utilizable?</strong></td>
+    <td>¿Los usuarios pueden interactuar con la página o está ocupada?</td>
+  </tr>
+  <tr>
+    <td><strong>¿Es delicioso?</strong></td>
+    <td>¿Son las interacciones fluidas y naturales, libres de retrasos y bloqueos?</td>
+  </tr>
+</table>
+
+## Cómo se miden las métricas
+
+Las métricas de rendimiento generalmente se miden de dos maneras:
+
+- **En el laboratorio:** uso de herramientas para simular la carga de una página en un entorno controlado y uniforme
+- **En el campo**: en usuarios reales que realmente cargan e interactúan con la página
+
+Ninguna de estas opciones es necesariamente mejor o peor que la otra; de hecho, por lo general, conviene utilizar ambas para garantizar un buen rendimiento.
+
+### En el laboratorio
+
+Probar el rendimiento en el laboratorio es esencial cuando se desarrollan nuevas funciones. Antes de que las funciones se emitan en el proceso de producción, es imposible medir sus características de rendimiento en usuarios reales, por lo que probarlas en el laboratorio antes de que se lancen es la mejor manera de evitar regresiones en el rendimiento.
+
+### En el campo
+
+Por otro lado, si bien las pruebas en el laboratorio son una aproximación razonable del rendimiento, no necesariamente reflejan lo que experimentan todos los usuarios de su sitio en la realidad.
+
+El rendimiento de un sitio puede variar drásticamente según las capacidades del dispositivo del usuario y las condiciones de su red. También puede variar en función de si el usuario interactúa con la página (o cómo lo hace).
+
+Además, la carga de las páginas puede que no sea determinista. Por ejemplo, los sitios que cargan contenido o anuncios personalizados pueden experimentar características de rendimiento muy diferentes de un usuario a otro. Una prueba de laboratorio no captará esas diferencias.
+
+La única forma de saber realmente cómo es el rendimiento de su sitio para sus usuarios es medir realmente su rendimiento conforme esos usuarios lo cargan e interactúan con él. Este tipo de medidas se conoce comúnmente como [Monitoreo de usuarios reales](https://en.wikipedia.org/wiki/Real_user_monitoring), o RUM para abreviar.
+
+## Tipos de métricas
+
+Hay otros tipos de métricas que son relevantes para cómo los usuarios perciben el rendimiento.
+
+- **Perceived load speed: Velocidad de carga percibida.** Mide la rapidez con la que una página puede cargar y renderizar todos sus elementos visuales en la pantalla.
+- **Load responsiveness: Capacidad de respuesta de la carga.** Mide la rapidez con la que una página puede cargar y ejecutar cualquier código de JavaScript necesario para que los componentes respondan rápidamente a las interacciones con el usuario.
+- **Runtime responsiveness: Capacidad de respuesta para el tiempo de ejecución.** Después de que carga la página, ¿qué tan rápido puede responder la página a la interacción del usuario?
+- **Visual stability: Estabilidad visual.** ¿Los elementos de la página cambian de una forma inesperada para los usuarios y pueden interferir en sus interacciones?
+- **Smoothness: Fluidez.** ¿Las transiciones y animaciones se renderizan con una frecuencia de cuadros por segundo constante y tienen fluidez de un estado a otro?
+
+Al tener en cuenta todos los tipos de métricas de rendimiento anteriores, se espera que quede claro que ninguna métrica por sí sola es suficiente para captar todas las características de rendimiento de una página.
+
+## Métricas importantes que se deben medir
+
+- **[First Contentful Paint: Despliegue del primer contenido (FCP)](/fcp/):** Mide el tiempo que transcurre desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se renderiza en la pantalla. *([laboratorio](#in-the-lab), [campo](#in-the-field))*
+- **[Largest Contentful Paint: Despliegue del contenido más extenso (LCP)](/lcp/):** Mide el tiempo que transcurre desde que la página comienza a cargarse hasta que el bloque de texto o elemento de imagen más extenso se representa en la pantalla. *([laboratorio](#in-the-lab), [campo](#in-the-field))*
+- **[First Input Delay: Demora de la primera entrada](/fid/):** Mide el tiempo que transcurre desde que un usuario interactúa por primera vez con su sitio web (es decir, cuando hace clic en un enlace, pulsa un botón o utiliza un control personalizado basado en JavaScript) hasta el momento en que el navegador es capaz de responder a esa interacción. *([campo](#in-the-field))*
+- **[Time to Interactive: Tiempo para interactuar  (TTI)](/tti/):** Mide el tiempo que transcurre desde que la página comienza a cargarse hasta que se renderiza visualmente, sus scripts iniciales (si los hay) se cargan y son capaces de responder de forma confiable y rápida a las entradas del usuario. *([laboratorio](#in-the-lab))*
+- **[Total Blocking Time: Tiempo de bloqueo total (TBT)](/tbt/):** Mide la cantidad total de tiempo entre FCP y TTI donde el subproceso principal estuvo bloqueado el tiempo suficiente para impedir la respuesta de la entrada. *([laboratorio](#in-the-lab))*
+- **[Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS)](/cls/):** Mide la puntuación acumulada de todos los cambios de diseño inesperados que se producen entre el momento en que la página comienza a cargarse y cuando su [estado de ciclo de vida](https://developer.chrome.com/blog/page-lifecycle-api/) cambia a oculto. *([laboratorio](#in-the-lab), [campo](#in-the-field))*
+
+Aunque esta lista incluye métricas que miden muchos de los diversos aspectos del rendimiento relevantes para los usuarios, no incluye todo (por ejemplo, la capacidad de respuesta y la fluidez en el tiempo de ejecución no están cubiertas actualmente).
+
+En algunos casos, se introducirán nuevas métricas para cubrir las áreas que faltan, pero en otros casos, las mejores métricas son las que se adaptan específicamente a su sitio.
+
+## Métricas personalizadas
+
+Las métricas de rendimiento enumeradas anteriormente son buenas para obtener una comprensión general de las características de rendimiento de la mayoría de los sitios en la web. También son buenas para tener un conjunto común de métricas para que los sitios puedan comparar su rendimiento con el de sus competidores.
+
+Sin embargo, puede haber ocasiones en las que un sitio específico sea único de alguna manera que requiera métricas adicionales para capturar la imagen completa del rendimiento. Por ejemplo, la métrica LCP está pensada para medir cuándo termine de cargarse el contenido principal de una página, pero podría haber casos en los que el elemento más grande no forme parte del contenido principal de la página y, por tanto, LCP puede que no sea relevante.
+
+Para abordar estos casos, el Grupo de trabajo de rendimiento web también estandarizó la API de nivel inferior que pueden ser útiles para implementar sus propias métricas personalizadas:
+
+- [API para sincronizar usuarios](https://w3c.github.io/user-timing/)
+- [API de tareas largas](https://w3c.github.io/longtasks/)
+- [API para sincronizar elementos](https://wicg.github.io/element-timing/)
+- [API para sincronizar la navegación](https://w3c.github.io/navigation-timing/)
+- [API para sincronizar los recursos](https://w3c.github.io/resource-timing/)
+- [Sincronizador de servidores](https://w3c.github.io/server-timing/)
+
+Consulte la guía sobre [métricas personalizadas](/custom-metrics/) para saber cómo utilizar estas API para medir las características de rendimiento específicas de su sitio.
diff --git a/src/site/content/es/mini-apps/index.md b/src/site/content/es/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/es/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/es/offline.md b/src/site/content/es/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/es/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/es/payments/android-payment-apps-developers-guide/index.md b/src/site/content/es/payments/android-payment-apps-developers-guide/index.md
new file mode 100644
index 00000000000..1cd127ada23
--- /dev/null
+++ b/src/site/content/es/payments/android-payment-apps-developers-guide/index.md
@@ -0,0 +1,409 @@
+---
+layout: post
+title: Guía para desarrolladores de aplicaciones de pago en Android
+subhead: Aprenda a adaptar su aplicación de pago en Android para que funcione con pagos web y le brinde una mejor experiencia de usuario a los clientes.
+authors:
+  - yaraki
+  - agektmr
+date: 2020-05-25
+description: Aprenda a adaptar su aplicación de pago en Android para que funcione con pagos web y le brinde una mejor experiencia de usuario a los clientes.
+tags:
+  - blog
+  - payments
+feedback:
+  - api
+---
+
+La [API de solicitud de pago](https://www.w3.org/TR/payment-request/) le aporta a la web una interfaz integrada basada en el navegador que permite que los usuarios ingresen la información de pago requerida de manera más fácil que nunca. La API también puede invocar aplicaciones de pago específicas de la plataforma.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Flujo de pago con la aplicación Google Pay específica de la plataforma que utiliza pagos web.</figcaption></figure>
+
+En comparación con el uso solo de los intentos Android, los pagos web permiten una mejor integración con el navegador, la seguridad y la experiencia del usuario:
+
+- La aplicación de pago se lanza como modal, en el contexto del sitio web del comerciante.
+- La implementación es complementaria a su aplicación de pago existente, lo que le permite aprovechar su base de usuarios.
+- Se verifica la firma de la aplicación de pago para evitar [transferencias](https://en.wikipedia.org/wiki/Sideloading).
+- Las aplicaciones de pago pueden admitir varios métodos de pago.
+- Se puede integrar cualquier método de pago, como criptomonedas, transferencias bancarias y más. Las aplicaciones de pago en dispositivos Android pueden incluso integrar métodos que requieren acceso al chip de hardware en el dispositivo.
+
+{% Aside %} Para comprender cómo los comerciantes se integran con las aplicaciones de pago, consulte el documento [Duración de una transacción de pago](/life-of-a-payment-transaction/). {% endAside%}
+
+Se necesitan cuatro pasos para implementar los pagos web en una aplicación de pago Android:
+
+1. Dejar que los comerciantes descubran su aplicación de pago.
+2. Informarle a un comerciante si un cliente tiene un instrumento registrado (como una tarjeta de crédito) que está listo para el pago.
+3. Dejar que el cliente realice el pago.
+4. Verificar el certificado de firma de la persona que llama.
+
+Para ver los pagos web en acción, consulte la demostración de [pagos web de Android](https://github.com/GoogleChromeLabs/android-web-payment/).
+
+## Paso 1: permitir que los comerciantes descubran su aplicación de pago
+
+Para que un comerciante utilice su aplicación de pago, debe utilizar la [API de solicitud de pago](https://developer.mozilla.org/docs/Web/API/Payment_Request_API) y especificar el método de pago que admite mediante el [identificador del método de pago](https://www.w3.org/TR/payment-method-id/).
+
+Si tiene un identificador de método de pago exclusivo para su aplicación de pago, puede configurar su propio [manifiesto de método de pago](https://w3c.github.io/payment-method-manifest/) para que los navegadores puedan descubrir su aplicación.
+
+{% Aside %} Para saber cómo funciona el proceso de descubrimiento en detalle y cómo configurar un nuevo método de pago, consulte [Configuración de un método de pago](/setting-up-a-payment-method). {% endAside %}
+
+## Paso 2: informarle a un comerciante si un cliente tiene un instrumento registrado que está listo para el pago
+
+El comerciante puede invocar a `hasEnrolledInstrument()` para [consultar si el cliente puede realizar un pago](/life-of-a-payment-transaction#ready-to-pay). Usted puede implementar `IS_READY_TO_PAY` como un servicio de Android para responder a dicha consulta.
+
+### `AndroidManifest.xml`
+
+Declare su servicio con un filtro de intención con la acción `org.chromium.intent.action.IS_READY_TO_PAY`.
+
+```xml
+<service
+  android:name=".SampleIsReadyToPayService"
+  android:exported="true">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" />
+  </intent-filter>
+</service>
+```
+
+El servicio `IS_READY_TO_PAY` es opcional. Si no existe tal controlador de intención en la aplicación de pago, entonces el navegador web asume que la aplicación siempre puede realizar pagos.
+
+### AIDL
+
+La API para el servicio `IS_READY_TO_PAY` se define en AIDL. Cree dos archivos AIDL con el siguiente contenido:
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayServiceCallback.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+interface IsReadyToPayServiceCallback {
+    oneway void handleIsReadyToPay(boolean isReadyToPay);
+}
+```
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayService.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+import org.chromium.IsReadyToPayServiceCallback;
+
+interface IsReadyToPayService {
+    oneway void isReadyToPay(IsReadyToPayServiceCallback callback);
+}
+```
+
+### Implementación de `IsReadyToPayService`
+
+La implementación más simple de `IsReadyToPayService` se muestra en el siguiente ejemplo:
+
+```kotlin
+class SampleIsReadyToPayService : Service() {
+  private val binder = object : IsReadyToPayService.Stub() {
+    override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+      callback?.handleIsReadyToPay(true)
+    }
+  }
+
+  override fun onBind(intent: Intent?): IBinder? {
+    return binder
+  }
+}
+```
+
+### Parámetros
+
+Pásele los siguientes parámetros a `onBind` como adicionales de intención:
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+
+```kotlin
+override fun onBind(intent: Intent?): IBinder? {
+  val extras: Bundle? = intent?.extras
+  // …
+}
+```
+
+#### `methodNames`
+
+Estos son los nombres de los métodos que se consultan. Los elementos son las claves en el diccionario `methodData` e indican los métodos que admite la aplicación de pago.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+Es un mapeo de cada entrada del parámetro `methodNames` en el parámetro [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying).
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### `topLevelOrigin`
+
+Es el origen del comerciante sin el esquema (el origen sin esquema del contexto de navegación de nivel superior). Por ejemplo, `https://mystore.com/checkout` se pasará como `mystore.com`.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+Es la cadena de certificados del comerciante (la cadena de certificados del contexto de navegación de nivel superior). Tiene valor nulo para localhost y archivo en disco, que son contextos seguros sin certificados SSL. La cadena de certificados es necesaria porque una aplicación de pago puede tener diferentes requisitos de confianza para los sitios web.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+```
+
+Cada `Parcelable` es un `Bundle` con una clave `"certificate"` y un valor de matriz de bytes.
+
+```kotlin
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+Es el origen sin esquema del contexto de navegación del iframe que invocó al constructor `new PaymentRequest(methodData, details, options)` en JavaScript. Si el constructor fue invocado desde el contexto de nivel superior, entonces el valor de este parámetro es igual al valor del parámetro `topLevelOrigin`.
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+### Respuesta
+
+El servicio puede enviar su respuesta a través del método `handleIsReadyToPay(Boolean)`.
+
+```kotlin
+callback?.handleIsReadyToPay(true)
+```
+
+### Permisos
+
+Puede utilizar `Binder.getCallingUid()` para comprobar quién hizo la invocación. Tenga en cuenta que debe hacer esto en el método `isReadyToPay`, no en el método `onBind`.
+
+```kotlin
+override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+  try {
+    val callingPackage = packageManager.getNameForUid(Binder.getCallingUid())
+    // …
+```
+
+Consulte [Verificar el certificado de firma de quien hizo la invocación](#heading=h.czr8ye23zg2e) para saber cómo verificar que el paquete que hace la invocación tenga la firma correcta.
+
+## Paso 3: dejar que un cliente realice el pago
+
+El comerciante invoca a `show()` para [iniciar la aplicación de pago](/life-of-a-payment-transaction#launch) para que el cliente pueda realizar un pago. La aplicación de pago se invoca a través de un intento `PAY` de Android con información de la transacción en los parámetros de intención.
+
+La aplicación de pago responde con el nombre del `methodName` y la cadena `details`, que son específicos de la aplicación de pago y son opacos para el navegador. El navegador convierte la cadena `details` en un objeto JavaScript para el comerciante a través de la deserialización JSON, pero no aplica ninguna validez más allá de eso. El navegador no modifica los `details`; el valor de ese parámetro se le pasa directamente al comerciante.
+
+### `AndroidManifest.xml`
+
+La actividad con el filtro de intención `PAY` debe tener una etiqueta `<meta-data>`[que identifique el identificador de método de pago predeterminado para la aplicación](/setting-up-a-payment-method).
+
+Para admitir varios métodos de pago, agregue una etiqueta `<meta-data>` con un recurso `<string-array>`.
+
+```xml
+<activity
+  android:name=".PaymentActivity"
+  android:theme="@style/Theme.SamplePay.Dialog">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.PAY" />
+  </intent-filter>
+
+  <meta-data
+    android:name="org.chromium.default_payment_method_name"
+    android:value="https://bobpay.xyz/pay" />
+  <meta-data
+    android:name="org.chromium.payment_method_names"
+    android:resource="@array/method_names" />
+</activity>
+```
+
+El parámetro `resource` debe ser una lista de cadenas, cada una de las cuales debe ser una URL absoluta válida con un esquema HTTPS como se muestra a continuación.
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string-array name="method_names">
+        <item>https://alicepay.com/put/optional/path/here</item>
+        <item>https://charliepay.com/put/optional/path/here</item>
+    </string-array>
+</resources>
+```
+
+### Parámetros
+
+Los siguientes parámetros se pasan a la actividad como extras de intención:
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+- `total`
+- `modifiers`
+- `paymentRequestId`
+
+```kotlin
+val extras: Bundle? = intent?.extras
+```
+
+#### methodNames
+
+Contiene los nombres de los métodos que se utilizan. Los elementos son las claves en el diccionario `methodData`. Estos son los métodos que admite la aplicación de pago.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+Es un mapeo de cada uno de los `methodNames` hacia el [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying).
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### merchantName
+
+El contenido de la etiqueta HTML `<title>` de la página de pago del comerciante (el contexto de navegación de nivel superior del navegador).
+
+```kotlin
+val merchantName: String? = extras.getString("merchantName")
+```
+
+#### `topLevelOrigin`
+
+Es el origen del comerciante sin el esquema (El origen sin esquema del contexto de navegación de nivel superior). Por ejemplo, `https://mystore.com/checkout` se pasa como `mystore.com`.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+Es la cadena de certificados del comerciante (la cadena de certificados del contexto de navegación de nivel superior). Tiene un valor nulo para localhost y archivo en disco, que son contextos seguros sin certificados SSL. Cada `Parcelable` es un paquete con una clave `certificate` y un valor de matriz de bytes.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+Es el origen sin esquema del contexto de navegación del iframe que invocó al constructor `new PaymentRequest(methodData, details, options)` en JavaScript. Si el constructor fue invocado desde el contexto de nivel superior, entonces el valor de este parámetro es igual al valor del parámetro `topLevelOrigin`.
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+#### `total`
+
+Es la cadena JSON que representa el monto total de la transacción.
+
+```kotlin
+val total: String? = extras.getString("total")
+```
+
+Éste es un ejemplo de contenido de la cadena:
+
+```kotlin
+{"currency":"USD","value":"25.00"}
+```
+
+#### `modifiers`
+
+Es la salida de `JSON.stringify(details.modifiers)`, donde `details.modifiers` contiene solamente `supportedMethods` y `total`.
+
+#### `paymentRequestId`
+
+Es el campo `PaymentRequest.id` que las aplicaciones de "pago automático" deben asociar con el estado de la transacción. Los sitios web de los comerciantes utilizarán este campo para consultar las aplicaciones de "pago automático" para conocer el estado de la transacción fuera de banda.
+
+```kotlin
+val paymentRequestId: String? = extras.getString("paymentRequestId")
+```
+
+### Respuesta
+
+La actividad puede enviar su respuesta a través de `setResult` con `RESULT_OK`.
+
+```kotlin
+setResult(Activity.RESULT_OK, Intent().apply {
+  putExtra("methodName", "https://bobpay.xyz/pay")
+  putExtra("details", "{\"token\": \"put-some-data-here\"}")
+})
+finish()
+```
+
+Debe especificar dos parámetros como extras de intención:
+
+- `methodName`: es el nombre del método que se está utilizando.
+- `details`: es la cadena JSON que contiene la información necesaria para que el comerciante complete la transacción. Si el éxito es `true`, entonces el parámetro `details` debe construirse de tal manera que `JSON.parse(details)` tenga éxito.
+
+Puede pasar el parámetro `RESULT_CANCELED` si la transacción no se completó en la aplicación de pago, por ejemplo, si el usuario no ingresó el código PIN correcto para su cuenta en la aplicación de pago. El navegador puede permitir al usuario elegir una aplicación de pago diferente.
+
+```kotlin
+setResult(RESULT_CANCELED)
+finish()
+```
+
+Si el resultado de la actividad de una respuesta de pago recibida de la aplicación de pago invocada se establece en `RESULT_OK`, Chrome comprobará que los parámetros `methodName` y `details` no estén vacíos en sus extras. Si la validación falla, Chrome devolverá una promesa rechazada desde `request.show()` con uno de los siguientes mensajes de error que se le muestran al desarrollador:
+
+```js
+'Payment app returned invalid response. Missing field "details".'
+'Payment app returned invalid response. Missing field "methodName".'
+```
+
+### Permisos
+
+La actividad puede verificar a quien invoca con su método `getCallingPackage()`.
+
+```kotlin
+val caller: String? = callingPackage
+```
+
+El último paso es verificar el certificado de firma de quien invoca para confirmar que el paquete que invoca tiene la firma correcta.
+
+## Paso 4: verificar el certificado de firma de quien invoca
+
+Puede verificar el nombre del paquete de quien invoca con `Binder.getCallingUid()` en `IS_READY_TO_PAY` y con `Activity.getCallingPackage()` en `PAY`. Para verificar realmente que quien invoca sea el navegador que tiene en mente, debe verificar su certificado de firma y comprobar que coincida con el valor correcto.
+
+Si tiene como objetivo el nivel de API 28 y superiores, y se está integrando con un navegador que tiene un solo certificado de firma, puede usar `PackageManager.hasSigningCertificate()`.
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificate: ByteArray = … // The correct signing certificate.
+val verified = packageManager.hasSigningCertificate(
+  callingPackage,
+  certificate,
+  PackageManager.CERT_INPUT_SHA256
+)
+```
+
+`PackageManager.hasSigningCertificate()` se prefiere para navegadores de certificados únicos, ya que maneja correctamente la rotación de certificados. (Chrome tiene un solo certificado de firma). Las aplicaciones que tienen varios certificados de firma no pueden rotarlos.
+
+Si necesita admitir niveles de API anteriores 27 e inferiores, o si necesita manejar navegadores con varios certificados de firma, puede usar `PackageManager.GET_SIGNATURES`.
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificates: Set<ByteArray> = … // The correct set of signing certificates
+
+val packageInfo = getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
+val sha256 = MessageDigest.getInstance("SHA-256")
+val signatures = packageInfo.signatures.map { sha256.digest(it.toByteArray()) }
+val verified = signatures.size == certificates.size &&
+    signatures.all { s -> certificates.any { it.contentEquals(s) } }
+```
diff --git a/src/site/content/es/payments/index.md b/src/site/content/es/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/es/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/es/payments/setting-up-a-payment-method/index.md b/src/site/content/es/payments/setting-up-a-payment-method/index.md
new file mode 100644
index 00000000000..5a4be16509d
--- /dev/null
+++ b/src/site/content/es/payments/setting-up-a-payment-method/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: Configurar un método de pago
+subhead: |2-
+
+  Una transacción de pago mediante Web Payments comienza con el descubrimiento de tu
+  aplicación de pago. Aprende a configurar un método de pago y obtén tu aplicación de pago
+  lista para que comerciantes y clientes realicen pagos.
+authors:
+  - agektmr
+description: |2-
+
+  Una transacción de pago mediante Web Payments comienza con el descubrimiento de tu
+  aplicación de pago. Aprende a configurar un método de pago y obtén tu aplicación de pago
+  lista para que comerciantes y clientes realicen pagos.
+date: 2020-05-25
+updated: 2021-09-14
+tags:
+  - payments
+feedback:
+  - api
+---
+
+Para utilizarla con la API de Payment Request, una aplicación de pago debe estar asociada con un identificador de método de pago. Los comerciantes que quieran integrarse con una aplicación de pago utilizarán el identificador del método de pago para indicarlo en el navegador. Este artículo analiza cómo funciona el descubrimiento de aplicaciones de pago y cómo configurar tu aplicación de pago para que un navegador la detecte y la invoque correctamente.
+
+Si eres nuevo al concepto de Web Payments (Pagos en la web) o al concepto de cómo funciona una transacción de pago a través de aplicaciones de pago, primero lee los siguientes artículos:
+
+- [Potenciar las aplicaciones de pago con Web Payments](/empowering-payment-apps-with-web-payments)
+- [La vida de una transacción de pago](/life-of-a-payment-transaction)
+
+{% include 'content/payments/browser-compatibility.njk' %}
+
+## Cómo un navegador descubre una aplicación de pago
+
+Cada aplicación de pago debe proporcionar lo siguiente:
+
+- Identificador de método de pago basado en URL
+- Manifiesto del método de pago (excepto cuando un tercero proporciona el identificador del método de pago)
+- Manifiesto de la aplicación web
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kvLIMUysDNEG3IfPxKz6.png", alt="Diagrama: cómo un navegador descubre la aplicación de pago a partir de un identificador de método de pago basado en URL", width="800", height="587" %}</figure>
+
+El proceso de descubrimiento comienza cuando un comerciante inicia una transacción:
+
+1. El navegador envía una solicitud a la [URL del identificador del método de pago](https://w3c.github.io/payment-method-manifest/) y obtiene el [manifiesto del método de pago](https://w3c.github.io/payment-method-manifest/).
+2. El navegador determina la [URL del manifiesto de la aplicación web](https://developer.mozilla.org/docs/Web/Manifest) a partir del manifiesto del método de pago y obtiene el manifiesto de la aplicación web.
+3. El navegador determina si se debe iniciar la aplicación de pago del sistema operativo o la aplicación de pago basada en la web desde el manifiesto de la aplicación web.
+
+Las siguientes secciones explican en detalle cómo configurar tu propio método de pago para que los navegadores puedan descubrirlo.
+
+## Paso 1: Proporciona el identificador del método de pago
+
+Un [identificador de método de pago](https://w3c.github.io/payment-method-id/#dfn-payment-method-identifiers) es una cadena basada en URL. Por ejemplo, el identificador de Google Pay es `https://google.com/pay`. Los desarrolladores de aplicaciones de pago pueden elegir cualquier URL como identificador de método de pago siempre que tengan control sobre ella y puedan ofrecer contenido arbitrario. En este artículo, usaremos [`https://bobbucks.dev/pay`](https://bobbucks.dev/pay) como identificador del método de pago.
+
+{% Aside %} Las aplicaciones de pago también pueden admitir métodos de pago de terceros. {% endAside %}
+
+### Cómo utilizan los comerciantes el identificador de método de pago
+
+Un objeto `PaymentRequest` se construye con una lista de [identificadores de métodos de pago](https://www.w3.org/TR/payment-method-id/) que identifica las aplicaciones de pago que un comerciante decide aceptar. Los identificadores de método de pago se establecen como un valor para la propiedad `supportedMethods`. Por ejemplo:
+
+{% Label %}[merchant] solicita el pago: {% endLabel %}
+
+```js
+const request = new PaymentRequest([{
+  supportedMethods: 'https://bobbucks.dev/pay'
+}], {
+  total: {
+    label: 'total',
+    amount: { value: '10', currency: 'USD' }
+  }
+});
+```
+
+{% Aside %} Se permiten redirecciones hasta tres veces dentro del mismo sitio para un identificador de método de pago en Chrome. {% endAside %}
+
+## Paso 2: Sirve el manifiesto del método de pago
+
+Un [manifiesto de método de pago](https://w3c.github.io/payment-method-manifest/) es un archivo JSON que define qué aplicación de pago puede utilizar este método de pago.
+
+### Proporciona el manifiesto del método de pago
+
+Cuando un comerciante inicia una transacción de pago, [el navegador envía una consulta HTTP `GET` a la URL del identificador del método de pago](https://w3c.github.io/payment-method-manifest/#accessing). El servidor responde con el cuerpo del manifiesto del método de pago.
+
+Un manifiesto de método de pago tiene dos campos, `default_applications` y `supported_origins`.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Nombre de la propiedad</th>
+        <th>Descripción</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>default_applications</code> (obligatorio)</td>
+        <td>Una matriz de URL que apunta a los manifiestos de aplicaciones web donde se alojan las aplicaciones de pago (La URL puede ser relativa). Se espera que esta matriz haga referencia al manifiesto de desarrollo, manifiesto de producción, etc.</td>
+      </tr>
+      <tr>
+        <td><code>supported_origins</code></td>
+        <td>Una matriz de URL que apunta a los orígenes que pueden albergar aplicaciones de pago de terceros que implementan el mismo método de pago. Ten en cuenta un método de pago puede ser implementado por múltiples aplicaciones.</td>
+      </tr>
+    </tbody>
+    <caption>Campos del manifiesto del método de pago</caption>
+  </table>
+</div>
+
+Un archivo de manifiesto de método de pago debería parecerse similar al siguiente:
+
+{% Label %}[payment handler] /payment-manifest.json:{% endLabel %}
+
+```json
+{
+  "default_applications": ["https://bobbucks.dev/manifest.json"],
+  "supported_origins": [
+    "https://alicepay.friendsofalice.example"
+  ]
+}
+```
+
+Cuando el navegador lee el campo de `default_applications`, encuentra una lista de enlaces a [los manifiestos de aplicaciones web de las aplicaciones](https://w3c.github.io/manifest/) de pago compatibles.
+
+{% Aside %} Chrome permite a una única aplicación de pago predeterminada por método de pago único a partir de Chrome 83. {% endAside %}
+
+### De manera opcional, dirige el navegador para encontrar el manifiesto del método de pago en otra ubicación
+
+La URL del identificador del método de pago puede responder opcionalmente con una cabecera `Link` que apunta a otra URL la cual el navegador puede obtener el manifiesto del método de pago. Esto es útil cuando un manifiesto de método de pago está alojado en un servidor diferente o cuando la aplicación de pago es servida por un tercero.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5YDqz1ppLkjHd9HYgXYH.png", alt="Cómo un navegador descubre la aplicación de pago a partir de un identificador de método de pago basado en URL con redireccionamientos", width="800", height="698" %}
+
+Configura el servidor del método de pago para que responda con una cabecera `Link` con el atributo `rel="payment-method-manifest"` y la URL del [manifiesto del método de pago](https://w3c.github.io/payment-method-manifest/).
+
+Por ejemplo, si el manifiesto está en `https://bobbucks.dev/payment-manifest.json`, la cabecera de respuesta incluiría:
+
+```http
+Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
+```
+
+La URL puede ser un nombre de dominio completo o una ruta relativa. Para ver un ejemplo del tráfico de red, inspecciona `https://bobbucks.dev/pay/`. También puedes usar un comando `curl`, por ejemplo:
+
+```shell
+curl --include https://bobbucks.dev/pay
+```
+
+{% Aside %} Obtén más información sobre [las prácticas de métodos de pago en la documentación de W3C](https://github.com/w3c/payment-request-info/wiki/PaymentMethodPractice). {% endAside %}
+
+## Paso 3: entregar un manifiesto de aplicación web
+
+Un [manifiesto de aplicación web](https://developer.mozilla.org/docs/Web/Manifest) se utiliza para definir una aplicación web, como el nombre sugiere. Es un archivo de manifiesto muy utilizado para [definir una aplicación web progresiva (PWA)](/add-manifest/).
+
+El manifiesto típico de una aplicación web se vería así:
+
+{% Label %}[payment handler] /manifest.json:{% endLabel %}
+
+```json
+{
+  "name": "Pago con Bobpay",
+  "short_name": "Bobpay",
+  "description": "Ejemplo de la API de Payment Handler.",
+  "icons": [
+    {
+      "src": "images/manifest/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/manifest/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "serviceworker": {
+    "src": "service-worker.js",
+    "scope": "/",
+    "use_cache": false
+  },
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#3f51b5",
+  "background_color": "#3f51b5",
+  "related_applications": [
+    {
+      "platform": "play",
+      "id": "com.example.android.samplepay",
+      "min_version": "1",
+      "fingerprints": [
+        {
+          "type": "sha256_cert",
+          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
+        }
+      ]
+    }
+  ]
+}
+```
+
+La información descrita en un manifiesto de aplicación web también se utiliza para definir cómo aparece una aplicación de pago en la IU de Payment Request.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Nombre de la propiedad</th>
+        <th>Descripción</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code><a href="https://developer.mozilla.org/docs/Web/Manifest/name">name</a></code> (obligatorio)</td>
+        <td>Se utiliza como nombre de la aplicación de pago.</td>
+      </tr>
+      <tr>
+        <td>
+<code><a href="https://developer.mozilla.org/docs/Web/Manifest/icons">icons</a></code> (obligatorio)</td>
+        <td>Se utiliza como icono de la aplicación de pago. Solo Chrome usa estos íconos; otros navegadores pueden usarlos como íconos de respaldo si no los especifica como parte del instrumento de pago.</td>
+      </tr>
+      <tr>
+        <td>
+          <code><a href="https://developer.mozilla.org/docs/Web/API/Service_Worker_API">serviceworker</a></code>
+        </td>
+        <td>Se usa para detectar el service worker que se ejecuta como la aplicación de pago basada en web.</td>
+      </tr>
+      <tr>
+        <td><code>serviceworker.src</code></td>
+        <td>La URL para descargar el script del service worker.</td>
+      </tr>
+      <tr>
+        <td><code>serviceworker.scope</code></td>
+        <td>Una cadena que representa una URL que define el alcance de registro de un service worker.</td>
+      </tr>
+      <tr>
+        <td><code>serviceworker.use_cache</code></td>
+        <td>La URL para descargar el script del service worker.</td>
+      </tr>
+      <tr>
+        <td>
+          <code><a href="https://developer.mozilla.org/docs/Web/Manifest/related_applications">related_applications</a></code>
+        </td>
+        <td>Se utiliza para detectar la aplicación que actúa como la aplicación de pago proporcionada por el sistema operativo. Encuentra más detalles en la <a href="/android-payment-apps-developers-guide/">guía para desarrolladores de aplicaciones de pago de Android</a>.</td>
+      </tr>
+      <tr>
+        <td>
+          <code><a href="https://developer.mozilla.org/docs/Web/Manifest/prefer_related_applications">prefer_related_applications</a></code>
+        </td>
+        <td>Se utiliza para determinar qué aplicación de pago iniciar cuando están disponibles la aplicación de pago proporcionada por el sistema operativo y la aplicación de pago basada en la web.</td>
+      </tr>
+    </tbody>
+    <caption>Campos importantes del manifiesto de la aplicación web</caption>
+  </table>
+</div>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lyP2t7T5R5bVzqh0LUTx.png", alt="Aplicación de pago con un ícono", width="800", height="237" %}<figcaption> Etiqueta e ícono de la aplicación de pago.</figcaption></figure>
+
+La propiedad `name` del manifiesto de la aplicación web se usa como el nombre de la aplicación de pago, la propiedad `icons` se usa como el icono de la aplicación de pago.
+
+## Cómo determina Chrome qué aplicación de pago lanzar
+
+### Lanzamiento de la aplicación de pago específica de la plataforma
+
+Para iniciar la aplicación de pago específica de la plataforma, se deben cumplir las siguientes condiciones:
+
+- El campo `related_applications` se especifica en el manifiesto de la aplicación web y:
+    - El ID del paquete de la aplicación instalada y la firma coinciden, mientras que la versión mínima (`min_version`) en el manifiesto de la aplicación web es menor o igual que la versión de la aplicación instalada.
+- El campo `prefer_related_applications` es `true`.
+- La aplicación de pago específica de la plataforma está instalada y tiene:
+    - Un filtro de intención de `org.chromium.action.PAY`.
+    - Un identificador de método de pago especificado como el valor de la propiedad `org.chromium.default_payment_method_name`.
+
+Consulta las [Aplicaciones de pago de Android: guía para desarrolladores](/android-payment-apps-developers-guide/) para obtener más detalles sobre cómo configurarlas.
+
+{% Label %}[payment handler] /manifest.json{% endLabel %}
+
+```json
+"prefer_related_applications": true,
+"related_applications": [{
+  "platform": "play",
+  "id": "xyz.bobpay.app",
+  "min_version": "1",
+  "fingerprints": [{
+    "type": "sha256_cert",
+    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
+  }]
+}]
+```
+
+Si el navegador ha determinado que la aplicación de pago específica de la plataforma está disponible, el flujo de descubrimiento finaliza aquí. De lo contrario, continúa con el siguiente paso: lanzamiento de la aplicación de pago basada en la web.
+
+### Lanzamiento de la aplicación de pago basada en web
+
+La aplicación de pago basada en web debe especificarse en el campo `serviceworker` del manifiesto web.
+
+{% Label %}[payment handler] /manifest.json:{% endLabel %}
+
+```json
+"serviceworker": {
+  "src": "payment-handler.js"
+}
+```
+
+El navegador inicia la aplicación de pago basada en la web enviando un evento `paymentrequest` al service worker. El service worker no tiene que estar registrado con anticipación. [Puede registrarse justo a tiempo](#jit-register).
+
+## Comprender las optimizaciones especiales
+
+### Cómo los navegadores pueden omitir la IU de Payment Request e iniciar una aplicación de pago directamente
+
+En Chrome, cuando se llama al método `show()` de  `PaymentRequest`, la API de Payment Request muestra una IU proporcionada por el navegador llamada "IU de Payment Request". Esta interfaz de usuario permite a los usuarios elegir una aplicación de pago. Después de presionar el botón de **Continue (Continuar)** en la IU de Payment Request, se inicia la aplicación de pago seleccionada.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/without-skip-the-sheet.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/without-skip-the-sheet.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>La IU de Payment Request interviene antes de iniciar la aplicación de pago.</figcaption></figure>
+
+Mostrar la IU de Payment Request antes de iniciar una aplicación de pago aumenta la cantidad de pasos necesarios para que un usuario complete un pago. Para optimizar el proceso, el navegador puede delegar el cumplimiento de esa información a las aplicaciones de pago e iniciar una aplicación de pago directamente sin mostrar la IU de Payment Request cuando se llama a `show()`.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/skip-the-sheet.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Omite la IU de Payment Request e inicia la aplicación de pago directamente.</figcaption></figure>
+
+Para iniciar una aplicación de pago directamente, se deben cumplir las siguientes condiciones:
+
+- `show()` se dispara con un gesto del usuario (por ejemplo, un clic del ratón).
+- Existe una única aplicación de pago que:
+    - Admite el identificador de método de pago solicitado.
+
+{% Aside %} Safari actualmente solo es compatible con Apple Pay, por lo que siempre inicia la aplicación directamente, omitiendo la IU de Payment Request. {% endAside %}
+
+### ¿Cuándo se registra una aplicación de pago de justo a tiempo (JIT) basada en la web? {: # jit-register}
+
+Las aplicaciones de pago basadas en la web se pueden iniciar sin que el usuario visite previamente el sitio web de la aplicación de pago y no registre al service worker. El service worker puede registrarse justo a tiempo cuando el usuario elige pagar con la aplicación de pago basada en la web. Hay dos variaciones para el tiempo de registro:
+
+- Si se muestra al usuario la IU de Payment Request, la aplicación se registra justo a tiempo y se inicia cuando el usuario hace clic en **Continuar**.
+- Si se omite la IU de Payment Request, la aplicación de pago se registra justo a tiempo y se inicia directamente. Omitir la IU de Payment Request para iniciar una aplicación registrada justo a tiempo requiere un gesto del usuario, lo que evita el registro inesperado de los service workers de origen cruzado.
+
+{% Aside %} Si bien un único identificador de método de pago puede admitir varias aplicaciones de pago, el registro JIT solo ocurre cuando el manifiesto del método de pago apunta a una única aplicación de pago. {% endAside %}
+
+## Próximos pasos
+
+Ahora que tienes tu aplicación de pago visible, aprende a desarrollar una aplicación de pago específica para una plataforma y una aplicación de pago basada en la web.
+
+- [Aplicaciones de pago de Android: guía para desarrolladores](/android-payment-apps-developers-guide)
+- [Guía para desarrolladores de aplicaciones de pago basadas en la web](/web-based-payment-apps-overview)
diff --git a/src/site/content/es/progressive-web-apps/add-manifest/index.md b/src/site/content/es/progressive-web-apps/add-manifest/index.md
new file mode 100644
index 00000000000..d6d0455810c
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/add-manifest/index.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: Cómo agregar un manifiesto en la aplicación web
+authors:
+  - petelepage
+  - beaufortfrancois
+  - thomassteiner
+date: 2018-11-05
+updated: 2021-10-21
+description: El manifiesto de una aplicación web es un archivo sencillo en formato JSON que informa al navegador sobre su aplicación web y cómo debe proceder cuando se instala en el dispositivo móvil o en el escritorio del usuario.
+tags:
+  - progressive-web-apps
+  - web-app-manifest
+feedback:
+  - api
+---
+
+El manifiesto de una aplicación web es un archivo en formato JSON que informa al navegador sobre la Aplicación Web Progresiva y cómo debe proceder cuando se instala en el escritorio o en el dispositivo móvil del usuario. Un archivo anexo habitual incluye el nombre de la aplicación, los iconos que debe utilizar y la URL que debe abrir cuando se inicie la aplicación.
+
+Los archivos del manifiesto son [compatibles](https://developer.mozilla.org/docs/Web/Manifest#Browser_compatibility) con Chrome, Edge, Firefox, UC Browser, Opera y el navegador de Samsung. Safari tiene compatibilidad parcial.
+
+## Cómo crear el archivo del manifiesto {: #create}
+
+El archivo del manifiesto podría llevar cualquier nombre, pero normalmente se llama `manifest.json` y se ejecuta desde la raíz (el directorio de nivel superior de su sitio web). En las especificaciones se sugiere que la extensión sea `.webmanifest`, pero los navegadores también son compatibles con las extensiones `.json`, las cuales pueden ser más fáciles de entender para los desarrolladores.
+
+```json
+{
+  "short_name": "Weather",
+  "name": "Weather: Do I need an umbrella?",
+  "icons": [
+    {
+      "src": "/images/icons-vector.svg",
+      "type": "image/svg+xml",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/images/icons-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/images/icons-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/?source=pwa",
+  "background_color": "#3367D6",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#3367D6",
+  "shortcuts": [
+    {
+      "name": "How's weather today?",
+      "short_name": "Today",
+      "description": "View weather information for today",
+      "url": "/today?source=pwa",
+      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "How's weather tomorrow?",
+      "short_name": "Tomorrow",
+      "description": "View weather information for tomorrow",
+      "url": "/tomorrow?source=pwa",
+      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
+    }
+  ],
+  "description": "Weather forecast information",
+  "screenshots": [
+    {
+      "src": "/images/screenshot1.png",
+      "type": "image/png",
+      "sizes": "540x720"
+    },
+    {
+      "src": "/images/screenshot2.jpg",
+      "type": "image/jpg",
+      "sizes": "540x720"
+    }
+  ]
+}
+```
+
+### Propiedades clave del manifiesto {: #manifest-properties }
+
+#### `short_name` y/o `name` {: #name }
+
+Deberá proporcionar al menos la propiedad `short_name` o `name`. Si se proporcionan ambas, `short_name` se utilizará en la pantalla de inicio del usuario, en el iniciador o en otros lugares donde el espacio podría ser limitado. `name` se utiliza cuando se instala la aplicación.
+
+{% Aside %} Los sistemas operativos normalmente necesitan tener un título para cada ventana de la aplicación. Este título se visualizará en varias superficies que cambian entre ventanas, como <kbd>alt</kbd>+<kbd>tab</kbd>, el modo de vista general y la lista de ventanas de la plataforma.
+
+Para las PWA que se ejecutan en modo autónomo, Chromium antepondrá el `short_name` (o, si `short_name` no está configurado, alternativamente el `name`) el cual se especificará en el `<title>` del documento HTML para evitar ataques simulados en los que las aplicaciones autónomas podrían intentar confundirse, por ejemplo, con diálogos del sistema operativo.
+
+Por lo tanto, los desarrolladores *no* deberían repetir el nombre de la aplicación en el `<title>` cuando la aplicación se ejecuta en modo autónomo. {% endAside %}
+
+#### `icons` {: #icons}
+
+Desde que un usuario instala su PWA, puede definir un conjunto de iconos para que el navegador los utilice en la pantalla de inicio, el iniciador de aplicaciones, el conmutador de tareas, la pantalla de inicio, etc.
+
+La propiedad `icons` es una matriz de objetos con imágenes. Cada objeto debe incluir `src`, una propiedad `sizes` y el `type` de la imagen. Para utilizar [iconos enmascarados](/maskable-icon/), a veces denominados iconos adaptativos en Android, también tendrá que agregar `"purpose": "any maskable"` a la propiedad `icon`.
+
+Para Chromium, se debe proporcionar al menos un icono de 192x192 pixeles, y un icono de 512x512 pixeles. En caso de que únicamente se proporcionen esos dos tamaños de icono, Chrome escalará automáticamente los iconos para que se ajusten al dispositivo. En caso de que prefiera escalar sus propios iconos y ajustarlos a la precisión de los pixeles, proporcione los iconos en incrementos de 48dp.
+
+{% Aside %} Los navegadores basados en Chromium también son compatibles con los iconos SVG que pueden escalarse arbitrariamente sin que su aspecto se vea pixelado y que son compatibles con características avanzadas como [ser responsivos a `prefers-color-scheme`](https://blog.tomayac.com/2021/07/21/dark-mode-web-app-manifest-app-icons/), con la importante advertencia de que los iconos no se actualizan en tiempo real, sino que permanecen en el estado en que se encontraban al momento de instalarse.
+
+Por seguridad, siempre se debe especificar un icono rasterizado como alternativa para los navegadores que no son compatibles con los iconos SVG. {% endAside %}
+
+#### `start_url` {: #start-url}
+
+Se requiere `start_url` y le indica al navegador dónde debe iniciarse su aplicación cuando se ejecute, y evita que la aplicación se inicie en la página que se encontraba el usuario cuando agregó su aplicación a su pantalla de inicio.
+
+Su `start_url` debe llevar al usuario directamente a su aplicación, en vez de a una página de destino del producto. Considere lo que el usuario desee hacer cuando abra su aplicación y colóquelo allí.
+
+#### `background_color` {: #background-color}
+
+La propiedad `background_color` se utiliza en la pantalla de inicio cuando la aplicación se ejecuta por primera vez en el dispositivo móvil.
+
+#### `display` {: #display}
+
+Puede personalizar la interfaz de usuario del navegador para que se muestre cuando se inicie su aplicación. Por ejemplo, puede ocultar la barra de direcciones y el navegador de Chrome. Incluso, puede hacer que los juegos se inicien en pantalla completa.
+
+<div class="table-wrapper scrollbar">
+  <table id="display-params">
+    <thead>
+      <tr>
+        <th><strong>Propiedad</strong></th>
+        <th><strong>Cómo utilizarla</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>fullscreen</code></td>
+        <td>Abre la aplicación web sin ninguna interfaz de usuario en el navegador y ocupa la totalidad del área de visualización disponible.</td>
+      </tr>
+      <tr>
+        <td><code>standalone</code></td>
+        <td>Abre la aplicación web para que parezca una aplicación independiente. La aplicación se ejecuta en su propia ventana, separada del navegador, y oculta los elementos estándar de la interfaz de usuario del navegador, como la barra de las URL. <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/XdBsDeRZozIyXyiXA59n.png", alt="Un ejemplo de una ventana PWA con visualización independiente.", width="800", height="196" %} </figure>
+</td>
+      </tr>
+      <tr>
+        <td><code>minimal-ui</code></td>
+        <td>Este modo es similar al <code>standalone</code>, pero le ofrece al usuario un conjunto mínimo de elementos de la interfaz de usuario para controlar la navegación (como atrás y recargar). <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/trPwjcMio7tBKGBNoT9u.png", alt="Un ejemplo de una ventana PWA con visualización mínima de la interfaz de usuario (UI).", width="800", height="196" %} </figure>
+</td>
+      </tr>
+      <tr>
+        <td><code>browser</code></td>
+        <td>Una experiencia de navegador estándar.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+#### `display_override` {: #display-override}
+
+Las aplicaciones web pueden elegir cómo se muestran al configurar un `display` en su manifiesto como se [explicó anteriormente](#display) . Los navegadores *no* son necesarios para admitir todos los modos de visualización, pero *se* requieren para admitir la [cadena de respaldo para especificaciones definidas](https://w3c.github.io/manifest/#dfn-fallback-display-mode) ( `"fullscreen"` → `"standalone"` → `"minimal-ui"` → `"browser"` ). Si no admiten un modo determinado, retroceden al siguiente modo de visualización en esa cadena. Este comportamiento poco flexible puede ser problemático en casos raros, por ejemplo, un desarrollador no puede solicitar `"minimal-ui"` sin verse obligado a volver al modo de visualización `"browser"` cuando `"minimal-ui"` no es compatible. Otro problema es que el comportamiento actual hace imposible introducir nuevos modos de visualización de una manera compatible con versiones anteriores, ya que las exploraciones como el modo de las aplicaciones con pestañas no tienen un lugar natural en la cadena de respaldo.
+
+Estos problemas se resuelven con la propiedad `display_override`, que el navegador toma en consideración *antes* que la propiedad `display`. Su valor es una secuencia de cadenas que se contemplan en el orden indicado, y se aplica el primer modo de visualización compatible. Si no se admite ninguno, el navegador volverá a evaluar el campo `display`.
+
+En el siguiente ejemplo, la cadena de respaldo en el modo de visualización sería la siguiente. (Los detalles de `"window-control-overlay"` están fuera del objetivo de este artículo).
+
+1. `"window-control-overlay"` (Primero, observar `display_override` ).
+2. `"minimal-ui"`
+3. `"standalone"` (Cuando `display_override` está saturado , evaluar `display`).
+4. `"minimal-ui"` (Finalmente, utilizar la cadena de respaldo de `display`).
+5. `"browser"`
+
+```json
+{
+  "display_override": ["window-control-overlay", "minimal-ui"],
+  "display": "standalone",
+}
+```
+
+{% Aside %} El navegador no considerará la opción `display_override` a no ser que `display` también esté presente. {% endAside %}
+
+#### `scope` {: #scope}
+
+El `scope` define el conjunto de URL que el navegador considera que se encuentran dentro de su aplicación, y se utiliza para decidir si el usuario ya salió de la aplicación. El `scope` controla la estructura de la URL que engloba todos los puntos de entrada y salida de su aplicación web. Su `start_url` debe residir dentro del `scope`.
+
+{% Aside 'caution' %} Si el usuario hace clic en un enlace en su aplicación que navega fuera del `scope`, el enlace se abrirá y renderizará dentro de la ventana disponible de la PWA. Si quiere que el enlace se abra en una pestaña del navegador, debe agregar `target="_blank"` a la etiqueta `<a>`. En Android, los enlaces con `target="_blank"` se abrirán en una [Pestaña personalizada de Chrome](https://developer.chrome.com/multidevice/android/customtabs). {% endAside %}
+
+Algunas otras notas sobre el `scope` :
+
+- Si no incluye un `scope` en su manifiesto, el `scope` que está implicado de forma predeterminada será el directorio desde el que se publica el manifiesto de su aplicación web.
+- El atributo `scope` puede ser una ruta relativa (`../`), o cualquier ruta de nivel superior (`/`) que permita aumentar la cobertura de la navegación en su aplicación web.
+- `start_url` debe estar en el alcance.
+- `start_url` se relaciona con la ruta definida en el atributo `scope`
+- Una `start_url` que comience con `/` siempre será la raíz del origen.
+
+#### `theme_color` {: #theme-color}
+
+El `theme_color` establecerá el color de la barra de herramientas, y puede reflejarse en la vista previa de la aplicación en los alternadores de tareas. El `theme_color` debe coincidir con el color del tema `meta` que se especifica en el encabezado del documento.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8mkBdT3O0FZLo0PUppvv.png", alt="Este es un ejemplo de una ventana PWA con un color de tema personalizado.", width="800", height="196" %}</figure>
+
+A partir de Chromium 93 y Safari 15, puede ajustar este color basándose en una consulta de medios con el atributo `media` del elemento con el color del tema `meta`. Se elegirá el primero que coincida. Por ejemplo, puede tener un color para el modo claro y otro para el modo oscuro. Al momento de escribir esto, no se pueden definir en el manifiesto. Consulte [w3c/manifest#975 GitHub issue](https://github.com/w3c/manifest/issues/975).
+
+```html
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">
+```
+
+#### `shortcuts` {: #shortcuts}
+
+La propiedad `shortcuts` es una matriz de objetos en una [aplicación de accesos directos](/app-shortcuts) cuyo objetivo es proporcionar un acceso rápido a las tareas clave dentro de su aplicación. Cada miembro es un diccionario que contiene al menos un `nombre` y una `url`.
+
+#### `description` {: #description}
+
+En la propiedad `description` se describe el propósito de su aplicación.
+
+#### `screenshots` {: #screenshots}
+
+La propiedad `screenshots` es una matriz de objetos con imágenes, que representan su aplicación en escenarios de uso común. Cada objeto debe incluir las propiedades `src`, `sizes` y `type` de la imagen.
+
+En Chrome, la imagen debe adaptarse a los siguientes criterios:
+
+- El ancho y el alto deben ser como mínimo de 320px y como máximo de 3,840px.
+- Las dimensiones máximas no pueden ser 2. 3 veces mayores que las dimensiones mínimas.
+- Las capturas de pantalla deben tener la misma relación de aspecto.
+- Solo se admiten los formatos de imágenes JPEG y PNG.
+
+{% Aside 'gotchas' %} Las propiedades `description` y `screenshots` actualmente solo se utilizan en Chrome para Android cuando un usuario desea instalar su aplicación. {% endAside %}
+
+## Agregue el manifiesto de la aplicación web a sus páginas {: #link-manifest }
+
+Después de crear el manifiesto, agregue una etiqueta `<link>` a todas las páginas de su Aplicación Web Progresiva. Por ejemplo:
+
+```html
+<link rel="manifest" href="/manifest.json">
+```
+
+{% Aside 'gotchas' %} La solicitud del manifiesto se realiza **sin** credenciales (aunque se encuentre en el mismo dominio), por lo que si el manifiesto requiere credenciales, debe incluir `crossorigin="use-credentials"` en la etiqueta del manifiesto. {% endAside %}
+
+## Pruebe su manifiesto {: #test-manifest }
+
+Para verificar que su manifiesto se configuró correctamente, utilice el panel **Manifiesto** que aparece en el panel **Aplicación** de Chrome DevTools.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FpIOY0Ak6FAA5xMuB9IT.png", alt="El panel de aplicaciones en Chrome Devtools con la pestaña Manifiesto seleccionada.", width="800", height="601" %}</figure>
+
+En este panel se ofrece una versión legible para las personas sobre muchas de las propiedades que componen el manifiesto, y hace que sea fácil verificar que todas las imágenes se carguen correctamente.
+
+## Pantallas de inicio en el dispositivo móvil {: #splash-screen }
+
+Cuando su aplicación se ejecuta por primera vez en el dispositivo móvil, el navegador puede tardar unos momentos en arrancar y el contenido inicial puede comenzar a renderizarse. En vez de mostrar una pantalla blanca que permita al usuario pensar que la aplicación está congelada, el navegador mostrará una pantalla de inicio hasta la primera imagen.
+
+Chrome automáticamente creará la pantalla de inicio a partir de las propiedades del manifiesto, específicamente a través de lo siguiente:
+
+- `name`
+- `background_color`
+- `icons`
+
+El `background_color` debe ser del mismo color que la página que se carga, para proporcionar una transición suave de la pantalla de inicio a su aplicación.
+
+Chrome elegirá el icono que más se aproxime a la resolución que tenga el dispositivo. En la mayoría de los casos es suficiente con proporcionar iconos de 192px y 512px, pero puede proporcionar iconos adicionales para perfeccionar la resolución de los pixeles.
+
+## Lecturas complementarias
+
+Hay varias propiedades adicionales que pueden agregarse al manifiesto de la aplicación web. Consulte la [documentación del manifiesto de aplicaciones web MDN](https://developer.mozilla.org/docs/Web/Manifest) sobre este tema. Puede obtener más información sobre `display_override` en el [explicador](https://github.com/WICG/display-override/blob/master/explainer.md).
diff --git a/src/site/content/es/progressive-web-apps/app-like-pwas/index.md b/src/site/content/es/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..c943396b886
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,499 @@
+---
+layout: post
+title: Haga que su PWA se sienta más como una aplicación
+subhead: Haga que su aplicación web progresiva no se sienta como un sitio web, sino como una aplicación "real"
+authors:
+  - thomassteiner
+description: |
+  Aprenda a hacer que su aplicación web progresiva se sienta como una aplicación "real" entendiendo
+  cómo implementar patrones de aplicaciones específicos de la plataforma con tecnologías web.
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+Cuando juegas al bingo de aplicaciones web progresivas (PWA), es una apuesta segura establecer que "las PWA son solo sitios web". La documentación de la PWA de Microsoft está de [acuerdo](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), lo [decimos](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites) en este mismo sitio, e incluso los nominadores de la PWA, Frances Berriman y Alex Russell, también [lo escriben.](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites) Sí, las PWA son solo sitios web, pero también son mucho más que eso. Si se hace bien, una PWA no se sentirá como un sitio web, sino como una aplicación "real". Ahora bien, ¿qué significa sentirse como una aplicación real?
+
+Para responder a esta pregunta, usaré la [aplicación Apple Podcasts](https://support.apple.com/HT201859) como ejemplo. Está disponible en macOS para computadoras y en iOS (y iPadOS respectivamente) para dispositivos móviles. Si bien Podcasts es una aplicación multimedia, las ideas centrales que ilustro con su ayuda, también se aplican a otras categorías de aplicaciones.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="Un iPhone y una MacBook uno al lado del otro, ambos ejecutando la aplicación Podcasts.", width ="800", height="617" %}<figcaption> Podcasts de Apple en iPhone y macOS (<a href="https://support.apple.com/HT201859">Fuente</a>).</figcaption></figure>
+
+{% Aside 'caution' %} Cada función de la aplicación en Android,  iOS o computadora que se enumera a continuación, tiene un componente de **Cómo hacer esto en la web** que puede abrir para obtener más detalles. Tenga en cuenta que no todos los navegadores de los distintos sistemas operativos son compatibles con todas las API o funcionalidades enumeradas. Asegúrese de revisar cuidadosamente las notas de compatibilidad en los artículos vinculados. {% endAside %}
+
+## Capaz de funcionar sin conexión
+
+Si da un paso atrás y piensa en algunas de las aplicaciones específicas de la plataforma que puede tener en su teléfono móvil o computadora de escritorio, una cosa se destaca claramente: nunca obtiene nada. En la aplicación Podcasts, incluso si estoy desconectado, siempre hay algo. Cuando no hay conexión de red, la aplicación, naturalmente, todavía se abre. La **sección Gráficos principales** no muestra ningún contenido, sino que recurre a un mensaje de **No se puede conectar en este momento** emparejado con un botón de **Reintentar**. Puede que no sea la experiencia más acogedora, pero obtengo algo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="La aplicación Podcasts muestra un mensaje de información 'No se puede conectar en este momento.' cuando no hay conexión de red disponible.", width="800", height="440" %} <figcaption>Aplicación Podcasts sin conexión a la red.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} La aplicación Podcasts sigue el llamado modelo de shell de la aplicación. Todo el contenido estático que se necesita para mostrar la aplicación principal se almacena en caché localmente, incluidas imágenes decorativas como los íconos del menú de la izquierda y los íconos de la interfaz de usuario del reproductor principal. El contenido dinámico como los datos de <b>Top Charts</b> solo se carga a pedido, con contenido de respaldo almacenado en caché local disponible en caso de que falle la carga. Lea el artículo <a href="https://developers.google.com/web/fundamentals/architecture/app-shell">Modelo shell de aplicaciones</a> para aprender cómo aplicar este modelo arquitectónico a su aplicación web. {% endDetails %}
+
+## Reproducción multimedia y contenido disponible sin conexión
+
+Mientras estoy sin conexión, a través del panel de la izquierda, todavía puedo navegar a la sección de **Descargas** y disfrutar de los episodios de podcast descargados que están listos para reproducirse, y se muestran con todos los metadatos, como ilustraciones y descripciones.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="Aplicación Podcasts reproduciendo un episodio descargado de un podcast.", width="800", height="440" %}
+ <figcaption>Los episodios de podcasts descargados se pueden reproducir incluso sin conexión a una red.</figcaption>
+</figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} El contenido multimedia descargado previamente se puede servir desde la caché, por ejemplo, utilizando la receta de <a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Servir audio y video almacenado en caché</a> de la biblioteca de <a href="https://developer.chrome.com/docs/workbox/">Workbox</a>. Otro contenido siempre se puede almacenar en la caché o en IndexedDB. Lea el artículo <a href="/storage-for-the-web/">Almacenamiento para la web</a> para obtener todos los detalles y saber cuándo y cuál tecnología de almacenamiento usar. Si tiene datos que deben almacenarse de forma persistente sin el riesgo de que se eliminen cuando la cantidad de memoria disponible sea baja, puede utilizar la <a href="/persistent-storage/">API de almacenamiento persistente</a>. {% endDetails %}
+
+## Descarga proactiva en segundo plano
+
+Cuando vuelva a estar en línea, por supuesto, puedo buscar contenido con una consulta como `http 203`, y cuando decido suscribirme al resultado de la búsqueda, el [podcast HTTP 203](/podcasts/), el último episodio de la serie se descarga inmediatamente sin hacer preguntas.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="La aplicación Podcasts descarga el último episodio de un podcast inmediatamente después de la suscripción.", width="800", height="658" %} <figcaption>Después de suscribirse a un podcast, el último episodio se descarga inmediatamente.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  Descargar un episodio de podcast es una operación que potencialmente puede llevar más tiempo. La <a href="https://developers.google.com/web/updates/2018/12/background-fetch">API Background Fetch</a> permite delegar descargas al navegador, que se encarga de ellas en segundo plano. En Android, el navegador, a su vez, puede incluso delegar estas descargas en el sistema operativo, por lo que no es necesario que el navegador se esté ejecutando continuamente. Una vez que se ha completado la descarga, el trabajador de servicio de su aplicación se despierta y usted puede decidir qué hacer con la respuesta.
+{% endDetails %}
+
+## Compartir e interactuar con otras aplicaciones
+
+La aplicación Podcasts se integra naturalmente con otras aplicaciones. Por ejemplo, cuando doy clic derecho en un episodio que me gusta, puedo compartirlo con otras aplicaciones de mi dispositivo, como la aplicación Mensajes. También se integra naturalmente con el portapapeles del sistema. Puedo hacer clic derecho en cualquier episodio y copiar un enlace.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="El menú contextual de la aplicación Podcasts se invoca en un episodio de podcast con la opción seleccionada 'Compartir episodio&gt; Mensajes'.", width="800", height="392" %} <figcaption>Compartir un episodio de podcast en la aplicación Mensajes.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="/web-share/">API Web Share</a> y la <a href="/web-share-target/">API de destino compartido web</a> permiten que su aplicación comparta y reciba textos, archivos y enlaces hacia y desde otras aplicaciones en el dispositivo. Aunque todavía no es posible que una aplicación web agregue elementos de menú al menú contextual integrado del sistema operativo, hay muchas otras formas de vincular hacia y desde otras aplicaciones en el dispositivo. Con la <a href="/image-support-for-async-clipboard/">API de portapales asincrónico</a>  puede leer y escribir datos de texto e imágenes (imágenes PNG) en el portapapeles del sistema mediante programación. En Android, puede usar la <a href="/contact-picker/">API de selector de contactos</a> para seleccionar entradas desde el administrador de contactos del dispositivo. Si ofrece una aplicación específica de la plataforma y una PWA, puede utilizar la <a href="/get-installed-related-apps/">API de instalr aplicaciones relacionadas</a> para comprobar si la aplicación específica de la plataforma está instalada, en cuyo caso no es necesario que anime al usuario a instalar la PWA o aceptar notificaciones web emergentes.
+{% endDetails %}
+
+## Actualización de la aplicación en segundo plano
+
+En la configuración de la aplicación Podcasts, puedo configurar la aplicación para descargar nuevos episodios automáticamente. Así, ni siquiera tengo que pensar en ello, el contenido actualizado siempre estará ahí. Magia.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="El menú de configuración de la aplicación Podcasts en la sección 'General' donde la opción 'Actualizar podcasts' está configurada en 'Cada hora",width="800", height="465" %} <figcaption>Podcasts configurada para buscar nuevos episodios del podcast cada hora.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="/periodic-background-sync/">API de sincronización periódica en segundo plano</a> permite que su aplicación actualice su contenido regularmente en segundo plano, sin la necesidad de que esté ejecutándose. Esto significa que el nuevo contenido está disponible de manera proactiva, por lo que sus usuarios pueden comenzar a profundizar en él de inmediato cuando lo deseen.
+{% endDetails %}
+
+## Estado sincronizado en la nube
+
+Al mismo tiempo, mis suscripciones se sincronizan en todos los dispositivos que poseo. En un mundo perfecto, no tengo que preocuparme por mantener sincronizadas manualmente mis suscripciones a podcasts. De la misma manera, no tengo por qué temer que la memoria de mi dispositivo móvil sea consumida por episodios que ya he escuchado en mi escritorio y viceversa. El estado de reproducción se mantiene sincronizado y los episodios escuchados se eliminan automáticamente.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="El menú de configuración de la aplicación Podcasts en la sección 'Avanzado' donde está activada la opción 'Sincronizar suscripciones entre dispositivos'.", width="800", height="525" %} <figcaption>El estado se sincroniza a través de la nube.</figcaption></figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La sincronización de los datos de estado de la aplicación es una tarea que puede delegar a la <a href="https://developers.google.com/web/updates/2015/12/background-sync">API de sincronización en segundo plano</a>. La operación de sincronización en sí no tiene que ocurrir de inmediato, solo <em>eventualmente</em>, y tal vez incluso cuando el usuario ya haya cerrado la aplicación nuevamente.
+{% endDetails %}
+
+## Controles de teclas multimedia del hardware
+
+Cuando estoy ocupado con otra aplicación, digamos, leyendo una página de noticias en el navegador Chrome, todavía puedo controlar la aplicación Podcasts con las teclas multimedia de mi computadora portátil. No es necesario cambiar a la aplicación solo para avanzar o retroceder.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="Teclado mágico de Apple MacBook Pro con teclas multimedia anotadas.", width="800", height="406" %}
+ <figcaption> Las teclas multimedia permiten controlar la aplicación Podcasts (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">Fuente</a>).</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  Las teclas multimedia son compatibles con la <a href="/media-session/">API de sesión multimedia</a>. Así, los usuarios pueden hacer uso de las teclas multimedias del hardware en sus teclados físicos, auriculares o incluso controlar la aplicación web desde las teclas multimedia de software en sus relojes inteligentes. Una idea adicional para suavizar las operaciones de búsqueda es enviar un <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">patrón de vibración</a> cuando el usuario busca una parte significativa del contenido, por ejemplo, pasando los créditos de apertura o el límite de un capítulo.
+{% endDetails %}
+
+## Acceso directo a aplicaciones y multitareas
+
+Por supuesto, siempre puedo volver a realizar múltiples tareas a la aplicación Podcasts desde cualquier lugar. La aplicación tiene un icono claramente distinguible que también puedo colocar en mi escritorio o en la barra de aplicaciones para que los podcasts se puedan iniciar inmediatamente cuando me apetezca.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="El conmutador de tareas de macOS con varios iconos de aplicaciones para elegir, uno de ellos es la aplicación Podcasts.", width="800", height="630" %} <figcaption>Volviendo a la aplicación Podcasts mientras se realizan tareas múltiples.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Las aplicaciones web progresivas tanto en computadoras como en dispositivos móviles, se pueden instalar en la pantalla de inicio, el menú de inicio o en la base de aplicaciones. La instalación puede realizarse en base a un aviso proactivo o totalmente controlada por el desarrollador de la aplicación. El artículo <a href="/install-criteria/">¿Qué se necesita para ser instalable?</a> cubre todo lo que necesita saber. Al realizar múltiples tareas, las PWA aparecen independientes del navegador. {% endDetails %}
+
+## Acciones rápidas en el menú contextual
+
+Las acciones de aplicaciones más comunes, **Buscar** contenido nuevo y **Buscar episodios nuevos**, están disponibles directamente desde el menú contextual de la aplicación en la barra de accesos directos. A través del menú de **Opciones**, también puedo decidir abrir la aplicación en el momento de iniciar sesión.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="Menú contextual del icono de la aplicación Podcasts que muestra las opciones 'Buscar' y 'Buscar nuevos episodios'.", width="534", height="736" %} <figcaption>Las acciones rápidas están disponibles inmediatamente desde el icono de la aplicación.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Al especificar los <a href="/app-shortcuts/">accesos directos del ícono de la aplicación</a> en el manifiesto de la aplicación web de la PWA, puede registrar rutas rápidas a tareas comunes a las que los usuarios pueden acceder directamente desde el icono de la aplicación. En sistemas operativos como macOS, los usuarios también pueden hacer clic derecho en el icono de la aplicación y configurar la aplicación para que se inicie en el momento del inicio de sesión. Se está trabajando en una propuesta para <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">ejecutar al iniciar sesión</a>. {% endDetails %}
+
+## Actuar como aplicación predeterminada
+
+Otras aplicaciones de iOS e incluso sitios web o correos electrónicos, pueden integrarse con la aplicación Podcasts aprovechando el esquema de URL `podcasts://` Si sigo un enlace como [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903) mientras estoy en el navegador, me lleva directamente a la aplicación Podcasts y puedo decidir suscribirme o escuchar el podcast.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="El navegador Chrome muestra un cuadro de diálogo de confirmación que pregunta al usuario si desea abrir la aplicación Podcasts.", width="800", height="492" %} <figcaption>La aplicación Podcasts se puede abrir directamente desde el navegador.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Aún no es posible manejar esquemas de URL totalmente personalizados, pero se está trabajando en una propuesta para el <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">manejo de protocolos de URL</a> para PWA. Actualmente, <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> con un prefijo de esquema <code>web+</code> es la mejor alternativa. {% endDetails %}
+
+## Integración del sistema de archivos local
+
+Es posible que no lo piense de inmediato, pero la aplicación Podcasts se integra naturalmente con el sistema de archivos local. Cuando descargo un episodio de podcast, en mi computadora portátil se almacena en `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`. A diferencia de, digamos `~/Documents`, este directorio, por supuesto, no está destinado a ser accedido directamente por usuarios normales, pero está ahí. En la sección de [contenido sin conexión](#offline-content-available-and-media-playable) se hace referencia a otros mecanismos de almacenamiento distintos a los archivos.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="El Finder de macOS navegó al directorio del sistema de la aplicación Podcasts.", width="800", height="337" %} <figcaption>Los episodios de podcasts se almacenan en una carpeta especial de aplicaciones del sistema.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} La <a href="/file-system-access/">API de acceso al sistema de archivos</a> permite a los desarrolladores obtener acceso al sistema de archivos local del dispositivo. Puede usarlo directamente o a través de la biblioteca de soporte <a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access</a> que proporciona de manera transparente un respaldo para los navegadores que no son compatibles con la API. Por razones de seguridad, los directorios del sistema no son accesibles desde la web. {% endDetails %}
+
+## Aspecto y sensación de plataforma
+
+Hay algo más sutil que es evidente por sí mismo para una aplicación de iOS como Podcasts: ninguna de las etiquetas de texto es seleccionable y todo el texto se mezcla con la fuente del sistema de la máquina. También se respeta mi elección del tema de color del sistema (modo oscuro).
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="La aplicación Podcasts en modo oscuro", width="800", height="463" %} <figcaption>La aplicación Podcasts admite el modo claro y oscuro.</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt = "La aplicación Podcasts en modo claro", width="800", height="463" %} <figcaption>La aplicación usa la fuente predeterminada del sistema.</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Al aprovechar la propiedad CSS <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a> con el valor <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a>, puede proteger los elementos de la interfaz de usuario para que no se seleccionen accidentalmente. Sin embargo, asegúrese de no abusar de esta propiedad para hacer que el <em>contenido de la aplicación</em> no se pueda seleccionar. Sólo se debe utilizar para elementos de la interfaz como texto de los botones, etc. El valor <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#&lt;generic-name&gt;:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a> para la propiedad CSS <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> le permite especificar la fuente de interfaz de usuario por defecto del sistema que se utilizará para su aplicación. Finalmente, su aplicación puede obedecer la preferencia de esquema de color del usuario respetando su preferencia <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>, con una opción <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">alternancia de modo oscuro</a> para anularlo. Otra cosa sobre la que decidir, podría ser qué debería hacer el navegador al llegar al límite de un área de desplazamiento, por ejemplo, para implementar la opción personalizada <em>desliza hacia abajo para actualizar</em>. Esto es posible con la propiedad CSS de <a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> {% endDetails %}
+
+## Barra de título personalizada
+
+Cuando se ve la ventana de la aplicación Podcasts, se nota que no tiene una barra de título y una barra de herramientas clásicas integradas, como, por ejemplo, la ventana del navegador Safari, sino una experiencia personalizada que parece una barra lateral acoplada a la ventana principal del reproductor.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="Barra de título y barra de herramientas integradas en el navegador Safari.", width="800", height="40" %} <figcaption> </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="Barra de título personalizada dividida de la aplicación Podcasts.", width="800", height="43" %} <figcaption>Barras de título personalizadas de Safari y Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Si bien no es posible actualmente, se está trabajando en la <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">personalización de la barra de título</a> en este momento. Sin embargo, puede (y debe) especificar las propiedades <a href="/add-manifest/#display"><code>display</code></a> y <a href="/add-manifest/#theme-color"><code>theme-color</code></a> del manifiesto de la aplicación web para determinar la apariencia de la ventana de su aplicación y decidir qué controles de navegador predeterminados (potencialmente ninguno de ellos) deben mostrarse. {% endDetails %}
+
+## Animaciones enérgicas
+
+Las animaciones en la aplicación son rápidas y fluidas en los podcasts. Por ejemplo, cuando abro el panel de **Notas del episodio** a la derecha, se desliza elegantemente. Cuando elimino un episodio de mis descargas, los episodios restantes flotan y consumen el espacio de la pantalla que fue liberado por el episodio eliminado.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="La aplicación Podcasts con el panel 'Notas del episodio' ampliado.", width="800", height="463" %} <figcaption>Las animaciones en la aplicación, como cuando se abre un panel, son rápidas.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Cómo hacer esto en la web {% endDetailsSummary %} Las animaciones de alto rendimiento en la web son ciertamente posibles si tiene en cuenta una serie de prácticas recomendadas descritas en el artículo <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Animaciones y rendimiento</a>. Las animaciones de desplazamiento como se ven comúnmente en contenido paginado o carruseles multimedia, se pueden mejorar enormemente utilizando la función <a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a>. Para un control total, puede utilizar la <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">API de animaciones web</a>. {% endDetails %}
+
+## Contenido mostrado fuera de la aplicación
+
+La aplicación Podcasts en iOS puede mostrar contenido en otras ubicaciones además de la aplicación real, por ejemplo, en la vista de Widgets del sistema o en forma de sugerencia de Siri. Tener llamadas a la acción proactivas y basadas en el uso, que solo requieran un toque para interactuar, puede aumentar en gran medida la tasa de reintegración de una aplicación como Podcasts.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="Vista del widget de iOS que muestra la aplicación Podcasts sugiriendo un nuevo episodio de un podcast.", width="751", height="1511" %} <figcaption>El contenido de la aplicación aparece fuera de la aplicación principal de Podcasts.</figcaption></figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="/content-indexing-api/">API de índice de contenido</a> permite que su aplicación le diga al navegador qué contenido de la PWA está disponible sin conexión. Esto permite que el navegador muestre dicho contenido fuera de la aplicación principal. Al marcar contenido interesante en su aplicación como adecuado para la reproducción de audio <a href="https://developers.google.com/search/docs/data-types/speakable">hablado</a> y al usar un <a href="https://developers.google.com/search/docs/guides/search-gallery">marcado estructurado</a> en general, puede ayudar a los motores de búsqueda y asistentes virtuales como el Asistente de Google a presentar sus ofertas de manera ideal.
+{% endDetails %}
+
+## Widget de control multimedia en la pantalla de bloqueo
+
+Cuando se reproduce un episodio de podcast, la aplicación Podcasts muestra un hermoso widget de control en la pantalla de bloqueo que presenta metadatos como la ilustración del episodio, el título del episodio y el nombre del podcast.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="Widget de reproducción multimedia de iOS en la pantalla de bloqueo que muestra un episodio de podcast con metadatos enriquecedores", width="751", height="1511" %}
+ <figcaption>La reproducción multimedia en la aplicación se puede controlar desde la pantalla de bloqueo.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="/media-session/">API de sesión multimedia</a> te permite especificar metadatos como ilustraciones, títulos de pistas, etc. que luego se muestran en la pantalla de bloqueo, relojes inteligentes u otros widgets multimedia en el navegador.
+{% endDetails %}
+
+## Notificaciones emergentes
+
+Las notificaciones emergentes se han vuelto un poco molestas en la web (aunque los [mensajes de notificación son mucho más silenciosos](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html) ahora). Sin embargo, si se usan correctamente, pueden agregar mucho valor. Por ejemplo, la aplicación Podcasts para iOS puede, opcionalmente, notificarme sobre nuevos episodios de podcasts a los que estoy suscrito o recomendarme nuevos, así como alertarme sobre nuevas funciones de la aplicación.
+
+<figure>{
+  % Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="Aplicación Podcasts para iOS en la pantalla de configuración de 'Notificaciones' que muestra la opción 'Nuevos episodios' activada.", width="751", height=1511" %}
+  <figcaption>Las aplicaciones pueden enviar notificaciones emergentes para informar al usuario sobre el contenido nuevo.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="https://developers.google.com/web/fundamentals/push-notifications">API push</a> permite que su aplicación reciba notificaciones emergentes para que pueda notificar a sus usuarios sobre eventos importantes relacionados con su PWA. Para las notificaciones que deberían activarse en un futuro determinado y que no requieren una conexión de red, puede utilizar la <a href="/notification-triggers/">API de activadores de notificaciones</a>.
+{% endDetails %}
+
+## Insignia de icono de la aplicación
+
+Cada vez que hay nuevos episodios disponibles para uno de los podcasts a los que estoy suscrito, aparece una insignia con el ícono de la aplicación en el ícono de la pantalla de inicio de Podcasts, lo que nuevamente me anima a volver a interactuar con la aplicación de una manera que no sea intrusiva.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="Pantalla de configuración de iOS que muestra la opción 'Insignias' activada.", width="751", height="1511" %} <figcaption>Las insignias son una forma sutil para que las aplicaciones informen a los usuarios sobre contenido nuevo.</figcaption>
+ </figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la Web
+  {% endDetailsSummary %}
+  Puede configurar insignias de íconos de aplicaciones con la <a href="/badging-api/">API de insignias</a>. Esto es especialmente útil cuando su PWA tiene alguna noción de elementos "no leídos", o cuando necesita un medio para llamar la atención del usuario de forma discreta hacia la aplicación.
+{% endDetails %}
+
+## La reproducción multimedia tiene prioridad sobre la configuración de ahorro de energía
+
+Cuando se reproduce un podcast, es posible que la pantalla se apague, pero el sistema no entrará en el modo de espera. Las aplicaciones también pueden mantener la pantalla activa, por ejemplo, para mostrar letras o subtítulos.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="Preferencias de macOS en la sección 'Ahorro de energía'.", width="800", height="573" %}
+ <figcaption>Las aplicaciones pueden mantener la pantalla activa.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  La <a href="/wakelock/">API de Screen Wake Lock</a> permite evitar que la pantalla se apague. La reproducción multimedia en la web evita automáticamente que el sistema entre en modo de espera.
+{% endDetails %}
+
+## Descubrimiento de la aplicación a través de una tienda de aplicaciones
+
+Si bien la aplicación Podcasts es parte de la experiencia de macOS de escritorio, en iOS debe instalarse desde la App Store. Una búsqueda rápida de `podcast`, `podcasts` o `apple podcasts` muestra inmediatamente la aplicación en la App Store.
+
+<figure>
+ {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="La búsqueda de 'podcasts' en la App Store de iOS muestra la aplicación Podcasts.", width="751", height="1511" %}
+ <figcaption>Los usuarios han aprendido a descubrir aplicaciones en las tiendas de aplicaciones.</figcaption>
+</figure>
+
+{% Details %}
+ {% DetailsSummary %}
+  Cómo hacer esto en la web
+ {% endDetailsSummary %}
+  Si bien Apple no permite las PWA en la App Store, en Android, puede enviar su PWA
+  <a href="/using-a-pwa-in-your-android-app/">envuelta en una actividad web confiable</a>.
+  El script <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> hace que esta operación sea más sencilla. Este script también impulsa internamente la función de exportación de aplicaciones de Android de <a href="https://www.pwabuilder.com/">PWABuilder</a>, que puede usar sin tocar la línea de comandos.
+{% endDetails %}
+
+## Resumen de funciones
+
+La siguiente tabla muestra una descripción general compacta de todas las funciones, y proporciona una lista de recursos útiles para realizarlas en la web.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Característica</th>
+        <th>Recursos útiles para hacer esto en la web</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">Capaz de funcionar sin conexión</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developers.google.com/web/fundamentals/architecture/app-shell">Modelo shell de aplicaciones</a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Reproducción multimedia y contenido disponible sin conexión</td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Servir audio y video almacenado en caché</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">Biblioteca de Workbox</a></li>
+            <li><a href="/storage-for-the-web/">API de almacenamiento</a></li>
+            <li><a href="/persistent-storage/">API de almacenamiento persistente</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">Descarga proactiva en segundo plano</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">API Background Fetch</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">Compartir e interactuar con otras aplicaciones</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">API Web Share</a></li>
+            <li><a href="/web-share-target/">API de destino de recurso compartido web</a></li>
+            <li><a href="/image-support-for-async-clipboard/">API de portapapeles asíncrono</a></li>
+            <li><a href="/contact-picker/">API de selector de contactos</a></li>
+            <li><a href="/get-installed-related-apps/">API de instalar aplicaciones relacionadas</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">Actualización de la aplicación en segundo plano</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">API de sincronización periódica en segundo plano</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">Estado sincronizado en la nube</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">API de sincronización en segundo plano</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">Controles de teclas de medios de hardware</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">API de sesión multimedia</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">Acceso directo a aplicaciones y multitarea</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">Criterios de instalabilidad</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">Acciones rápidas en el menú contextual</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">Accesos directos al icono de la aplicación</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">Ejecutar al iniciar sesión</a> (etapa inicial)</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">Actuar como aplicación predeterminada</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">Manejo del protocolo URL</a> (etapa inicial)</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">Integración del sistema de archivos local</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">API de acceso al sistema de archivos</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">Biblioteca browser-fs-access</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">Aspecto y sensación de plataforma</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">Alternar modo oscuro</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">Barra de título personalizada</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">Personalización de la barra de título</a> (etapa inicial)</li>
+            <li><a href="/add-manifest/#display">Modo de visualización</a></li>
+            <li><a href="/add-manifest/#theme-color">Color del tema</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">Animaciones enérgicas</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Animaciones y sugerencias de rendimiento</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">API de animaciones web</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">Contenido mostrado fuera de la aplicación</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">API de índice de contenido</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">Contenido hablado</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">Marcado estructurado</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">Widget de control multimedia en la pantalla de bloqueo</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">API de sesión multimedia</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">Notificaciones emergentes</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">API push</a></li>
+            <li><a href="/notification-triggers/">API de activadores de notificaciones</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">Insignia de icono de la aplicación</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">API de insignias</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">La reproducción multimedia triunfa sobre la configuración de ahorro de energía</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">API de Screen Wake Lock</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">Descubrimiento de la aplicación a través de una tienda de aplicaciones</a></td>
+        <td>
+          <ul>
+            <li><a href="/using-a-pwa-in-your-android-app/">Actividad web confiable</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap">biblioteca de <code>bubblewrap</code></a></li>
+            <li><a href="https://www.pwabuilder.com/">Herramienta PWABuilder</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Conclusión
+
+Las PWA han recorrido un largo camino desde su introducción en 2015. En el contexto del [Proyecto Fugu 🐡](https://developer.chrome.com/blog/fugu-status), el equipo de Chromium entre empresas está trabajando para cerrar las brechas restantes. Si sigue solo algunos de los consejos de este artículo, puede acercarse poco a poco a esa sensación similar a la de una aplicación y hacer que sus usuarios olviden que están tratando con "solo un sitio web", porque, sinceramente, a la mayoría de ellos no le importa cómo se construye su aplicación (y por qué debería hacerlo), siempre que se sienta como una aplicación *real*.
+
+## Agradecimientos
+
+Este artículo fue revisado por
+[Kayce Basques](/authors/kaycebasques/),
+[Joe Medley](/authors/joemedley/),
+[Joshua Bell](https://github.com/inexorabletash),
+[Dion Almaer](https://blog.almaer.com/),
+[Ade Oshineye](https://blog.oshineye.com/),
+[Pete LePage](/authors/petelepage/),
+[Sam Thorogood](/authors/samthor/),
+[Reilly Grant](https://github.com/reillyeon) y [Jeffrey Yasskin](https://github.com/jyasskin).
diff --git a/src/site/content/es/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/es/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..abf3a50ebea
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,100 @@
+---
+layout: codelab
+title: Hágalo instalable
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description: |-
+  En este laboratorio de código, aprenda cómo hacer que un sitio sea instalable usando el
+  evento beforeinstallprompt.
+glitch: make-it-installable?path=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+Este glitch ya contiene los componentes críticos necesarios para hacer que una aplicación web progresiva se pueda instalar, incluido un [service worker muy simple](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js) y un [manifiesto de la aplicación web](https://glitch.com/edit/#!/make-it-installable?path=manifest.json). También tiene un botón de instalación que está oculto por defecto.
+
+## Escuche el evento beforeinstallprompt
+
+Cuando el navegador efectúa el evento `beforeinstallprompt`, esa es la indicación de que se puede instalar la aplicación web progresiva, y se puede mostrar un botón de instalación al usuario. El evento `beforeinstallprompt` se activa cuando la PWA cumple con [los criterios de instalación](/install-criteria/).
+
+{% Instruction 'remix', 'ol' %}
+
+1. Agregue un manejador de eventos `beforeinstallprompt` al objeto `window`.
+2. Guarde `event` como una variable global; lo necesitaremos más tarde para mostrar el mensaje.
+3. Muestre el botón de instalación.
+
+Código:
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // Prevent the mini-infobar from appearing on mobile.
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // Stash the event so it can be triggered later.
+  window.deferredPrompt = event;
+  // Remove the 'hidden' class from the install button container.
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## Manejar el botón de instalación
+
+Para mostrar el mensaje de instalación, llame a `prompt()` guardado en el evento `beforeinstallprompt`. La llamada a `prompt()` se realiza en el controlador de clic del botón de instalación, porque `prompt()` debe llamarse desde un gesto de usuario.
+
+1. Agregue un manejador de evento clic para el botón de instalación.
+2. Llame a `prompt()` en el evento `beforeinstallprompt`.
+3. Registre los resultados del prompt.
+4. Establezca el `beforeinstallprompt` en "null".
+5. Oculte el botón de instalación.
+
+Código:
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // The deferred prompt isn't available.
+    return;
+  }
+  // Show the install prompt.
+  promptEvent.prompt();
+  // Log the result
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // Reset the deferred prompt variable, since
+  // prompt() can only be called once.
+  window.deferredPrompt = null;
+  // Hide the install button.
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## Seguimiento del evento de instalación
+
+La instalación de una aplicación web progresiva a través de un botón de instalación es solo una de las formas en que los usuarios pueden instalar una PWA. También pueden usar el menú de Chrome, la mini-barra de información, y a través[de un ícono en la omnibox (barra de direcciones)](/promote-install/#browser-promotion). Puede realizar un seguimiento de todas estas formas de instalación escuchando el evento `appinstalled`.
+
+1. Agregue un manejador de evento `appinstalled` al objeto `window`.
+2. Registre el evento de instalación en análisis u otro mecanismo.
+
+Código:
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // Clear the deferredPrompt so it can be garbage collected
+  window.deferredPrompt = null;
+});
+```
+
+## Otras lecturas
+
+¡Felicitaciones, su aplicación ahora se puede instalar!
+
+Aquí hay algunas cosas adicionales que puede hacer:
+
+- [Detecte si su aplicación se inicia desde la pantalla de inicio](/customize-install/#detect-mode)
+- [En su lugar, muestre el mensaje de instalación de la aplicación del sistema operativo](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/es/progressive-web-apps/customize-install/index.md b/src/site/content/es/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..db4ea2b089f
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Cómo proporcionar tu propia experiencia de instalación en la aplicación
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: Utiliza el evento beforeinstallprompt para proporcionar una personalizada y fluida experiencia de instalación en la aplicación
+tags:
+  - progressive-web-apps
+---
+
+Muchos navegadores te permiten habilitar y promover la instalación de su Aplicación web progresiva (PWA) directamente dentro de la interfaz de usuario de su PWA. La instalación (la cual anteriormente se le conocía como Agregar a la pantalla de inicio) facilita a los usuarios la instalación de tu PWA en su dispositivo móvil o de escritorio. La instalación de una PWA se agrega al lanzador de un usuario, lo que permite que se ejecute como cualquier otra aplicación instalada.
+
+Además de la [experiencia de instalación proporcionada](/promote-install/#browser-promotion) por el navegador, es posible proporcionar su propio flujo de instalación personalizado, directamente dentro de su aplicación.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Botón Instalar aplicación provisto en Spotify PWA", width="491", height="550" %}<figcaption> Botón de "Instalar aplicación" proporcionado en el PWA de Spotify</figcaption></figure>
+
+Al considerar si promover la instalación, es mejor pensar en cómo los usuarios suelen usar su PWA. Por ejemplo, si hay un conjunto de usuarios que usan su PWA varias veces en una semana, estos usuarios podrían beneficiarse de la conveniencia adicional de iniciar su aplicación desde la pantalla de inicio de un teléfono inteligente o desde el menú de inicio en un sistema operativo de escritorio. Algunas aplicaciones de productividad y entretenimiento también se benefician del espacio adicional de pantalla creado al eliminar las barras de herramientas del navegador de la ventana en los modos de `standalone` o `minimal-ui`.
+
+## Promoviendo la instalación {: #promote-installation }
+
+Para indicar que tu Aplicación web progresiva (PWA) se puede instalar y para proporcionar un flujo de instalación personalizado en la aplicación tienes que:
+
+1. Escuchar el evento de `beforeinstallprompt`
+2. Guardar el `beforeinstallprompt`, de modo que pueda usarse para activar el flujo de instalación más adelante.
+3. Avisarle al usuario de que tu PWA se puede instalar y proporcionar un botón u otro elemento para iniciar el flujo de instalación en la aplicación.
+
+{% Aside %} El `beforeinstallprompt` y el `appinstalled` se movieron de la especificación del manifiesto de la aplicación web a su propia [incubadora](https://github.com/WICG/beforeinstallprompt). El equipo de Chrome mantiene su compromiso de brindarles asistencia y no tiene planes de eliminar o desaprobar la compatibilidad. El equipo de Web DevRel de Google continúa recomendando su uso para proporcionar una experiencia de instalación personalizada. {% endAside %}
+
+### Escuchar al evento de `beforeinstallprompt` {: #beforeinstallprompt }
+
+Si tu aplicación web progresiva cumple con los [criterios de instalación](/install-criteria/) requeridos, el navegador disparará un evento de `beforeinstallprompt`. Guarda una referencia al evento y actualiza tu interfaz de usuario para indicar que el usuario puede instalar su PWA. Esto se explica a continuación.
+
+```js
+// Inicializa deferredPrompt para su uso más tarde.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Previene a la mini barra de información que aparezca en smartphones
+  e.preventDefault();
+  // Guarda el evento para que se dispare más tarde
+  deferredPrompt = e;
+  // Actualizar la IU para notificarle al usuario que se puede instalar tu PWA
+  showInstallPromotion();
+  // De manera opcional, envía el evento de analíticos para saber si se mostró la promoción a a instalación del PWA
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %} Hay muchos [patrones](/promote-install/) diferentes que puedes utilizar para notificar al usuario que se puede instalar tu aplicación y proporcionar un flujo de instalación en la aplicación, por ejemplo, un botón en la cabecera, un elemento en el menú de navegación o un elemento en su fuente de contenido. {% endAside %}
+
+### Flujo de instalación en la aplicación {: #in-app-flow }
+
+Para proporcionar la instalación en la aplicación, debes de crear un botón u otro elemento de interfaz en el que un usuario pueda hacer clic para instalar su aplicación. Cuando se hace clic en el elemento, se llama a `prompt()` en el evento de `beforeinstallprompt` (el cual fue almacenado en la variable de `deferredPrompt`). Muéstrale al usuario un cuadro modal de diálogo para la instalación, pidiéndole que confirme que si desea instalar su PWA.
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Esconde la información promotora de la instalación
+  hideInstallPromotion();
+  // Muestre el mensaje de instalación
+  deferredPrompt.prompt();
+  // Espera a que el usuario responda al mensaje
+  const { outcome } = await deferredPrompt.userChoice;
+  // De manera opcional, envía analíticos del resultado que eligió el usuario
+  console.log(`User response to the install prompt: ${outcome}`);
+  // Como ya usamos el mensaje, no lo podemos usar de nuevo, este es descartado
+  deferredPrompt = null;
+});
+```
+
+La `userChoice` es una promesa que se resuelve con la elección del usuario. Solo puede llamar a `prompt()` en el evento diferido una vez. Si el usuario lo descarta, deberás esperar hasta que el evento de `beforeinstallprompt` sea lanzado de nuevo, generalmente inmediatamente después de que se haya resuelto la propiedad de `userChoice`.
+
+{% Aside 'codelab' %} [Haz que un sitio se pueda instalar mediante el evento beforeinstallprompt](/codelab-make-installable). {% endAside %}
+
+## Detecta cuándo se instaló correctamente la PWA {: #detect-install }
+
+Puedes usar la `userChoice` para determinar si el usuario instaló su aplicación desde tu interfaz de usuario. Pero, si el usuario instaló tu PWA desde la barra de direcciones u otro componente del navegador, `userChoice` no será de ayuda. En su lugar, debes escuchar el evento de `appinstalled`. Este se activa cada vez que se instala tu PWA, sin importar qué mecanismo se haya utilizado para instalar tu PWA.
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Esconder la promoción de instalación de la PWA
+  hideInstallPromotion();
+  // Limpiar el defferedPrompt para que pueda ser eliminado por el recolector de basura
+  deferredPrompt = null;
+  // De manera opcional, enviar el evento de analíticos para indicar una instalación exitosa
+  console.log('PWA was installed');
+});
+```
+
+## Detecta cómo se lanzó la PWA {: #detect-launch-type }
+
+El `display-mode` de CSS indica cómo se inició la PWA, ya sea mediante una pestaña del navegador o como una PWA instalada. Esto permite aplicar diferentes estilos dependiendo de cómo se inició la aplicación. Por ejemplo, siempre oculta el botón de instalación y proporciona un botón de retroceso cuando se inicie como una PWA instalada.
+
+### Seguimiento de cómo se lanzó la PWA
+
+Para rastrear cómo los usuarios lanzan tu PWA utiliza `matchMedia()` para probar la consulta de medios en `display-mode`. Safari en iOS no admite esto todavía, por lo que debes de verificar con `navigator.standalone`, el cual devuelve un booleano que indica si el navegador se está ejecutando en modo independiente.
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### Seguimiento cuando cambia el modo de visualización
+
+Para rastrear si el usuario cambia entre `standalone` y `browser tab`, escucha los cambios en la consulta de medios en `display-mode`.
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### Actualizar la interfaz de usuario según el modo de visualización actual
+
+Para aplicar un color de fondo diferente para una PWA cuando se inicia como una PWA instalada, use CSS condicional:
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## Actualizar el icono y el nombre de su aplicación
+
+¿Qué tal si necesitas actualizar el nombre de tu aplicación o actualizar a nuevos íconos? Consulta [Cómo maneja Chrome las actualizaciones del manifiesto de la aplicación web](/manifest-updates/) para ver cuándo y cómo se reflejan esos cambios en Chrome.
diff --git a/src/site/content/es/progressive-web-apps/define-install-strategy/index.md b/src/site/content/es/progressive-web-apps/define-install-strategy/index.md
new file mode 100644
index 00000000000..202de98b768
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/define-install-strategy/index.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: Cómo definir tu estrategia de instalación
+authors:
+  - demianrenzulli
+  - petelepage
+date: 2020-05-12
+updated: 2020-08-20
+description: |2-
+
+  Mejores prácticas para combinar diferentes ofertas de instalación para aumentar la tasa de instalación y evitar la competencia de plataformas y la canibalización.
+tags:
+  - progressive-web-apps
+---
+
+{% YouTube '6R9pupbDXYw' %}
+
+En el pasado, la instalación de aplicaciones solo era posible en el contexto de aplicaciones específicas de plataforma. Hoy en día, las aplicaciones web modernas ofrecen experiencias instalables que brindan el mismo nivel de integración y confiabilidad que las aplicaciones específicas de plataforma.
+
+Puedes conseguirlo de diferentes formas:
+
+- Instalación de la PWA [desde el navegador](/customize-install/).
+- Instalación de la PWA [desde la app store](https://developer.chrome.com/docs/android/trusted-web-activity/).
+
+Tener diferentes canales de distribución es una poderosa forma de llegar a un grande número de usuarios, pero elegir la estrategia adecuada para promoverlos puede ser un desafío.
+
+Esta guía explorará las mejores prácticas para combinar diferentes ofertas de instalación con la finalidad de aumentar la tasa de instalación y evitar la competencia de plataformas y la canibalización. Las ofertas de instalación que se cubrirán incluyen las aplicaciones web progresivas (PWA) instaladas tanto desde el navegador como desde la App Store (Tienda de aplicaciones), así como aplicaciones específicas de plataforma.
+
+## ¿Por qué hacer que tu aplicación web sea instalable?
+
+Las aplicaciones web progresivas instaladas se ejecutan en una ventana independiente en lugar de una pestaña del navegador. Se pueden iniciar desde la pantalla de inicio, el dock, la barra de tareas o la estantería del usuario. Es posible buscarlos en un dispositivo y saltar entre ellos con el conmutador de aplicaciones, haciéndolos sentir como parte del dispositivo en el que están instalados.
+
+Pero tener una aplicación web instalable y una aplicación específica de plataforma puede resultar confuso para los usuarios. Para algunos usuarios, las aplicaciones específicas de plataforma pueden ser la mejor opción, pero para otros pueden presentar algunos inconvenientes:
+
+- **Restricciones de almacenamiento:** Instalar una nueva aplicación puede significar eliminar otras o limpiar espacio al eliminar contenido valioso. Esto es especialmente desventajoso para los usuarios de dispositivos de gama baja.
+- **Ancho de banda disponible:** Descargar una aplicación puede ser un proceso lento y costoso, incluso más para los usuarios con conexiones lentas y planes de datos costosos.
+- **Fricción:** Abandonar un sitio web y trasladarse a una tienda para descargar una aplicación crea fricciones adicionales y retrasa una acción del usuario que podría realizarse directamente en la web.
+- **Ciclo de actualización:**  Para realizar cambios en aplicaciones específicas de plataforma, es posible que sea necesario pasar por un proceso de revisión de la aplicación, lo que puede ralentizar los cambios y los experimentos (por ejemplo, las pruebas A/B).
+
+En algunos casos, el porcentaje de usuarios que no descargarán la aplicación específica de tu plataforma puede ser grande, por ejemplo: aquellos que piensan que no usarán la aplicación con mucha frecuencia o que no pueden justificar gastar varios megabytes de almacenamiento o de datos. Puedes determinar el tamaño de este segmento de varias formas, por ejemplo, mediante el uso de una configuración de análisis para realizar un seguimiento del porcentaje de usuarios de "solo web móvil".
+
+Si el tamaño de este segmento es considerable, es una buena indicación de que necesitas proporcionar formas alternativas para instalar tus experiencias.
+
+## Promoviendo la instalación de tu PWA a través del navegador
+
+Si tienes una PWA de alta calidad, puede ser mejor promover su instalación sobre la aplicación específica de tu plataforma. Por ejemplo, si la aplicación específica de la plataforma le falta la funcionalidad que ofrece tu PWA o si es que no se ha actualizado por un tiempo. También puede ser útil promover la instalación de tu PWA si la aplicación específica de la plataforma no está optimizada para pantallas más grandes, como lo puede ser en ChromeOS.
+
+Para algunas aplicaciones, impulsar la instalación de aplicaciones específicas de la plataforma es una parte clave del modelo comercial; en ese caso, tiene sentido comercial mostrar una promoción de instalación de aplicaciones específica de plataforma. Sin embargo, es posible que algunos usuarios se sientan más cómodos permaneciendo en la web. Si ese segmento se puede identificar, el indicador de la PWA se puede mostrar solo a ellos (lo que llamamos "PWA como respaldo").
+
+En esta sección, exploraremos diferentes formas de maximizar la velocidad de instalación de las PWA instaladas a través del navegador.
+
+### PWA como principal experiencia instalable
+
+Una vez que una PWA cumpla con los [criterios de instalación](/install-criteria/), la mayoría de los navegadores mostrarán una indicación de que la PWA es instalable. Por ejemplo, Chrome en Desktop mostrará un icono instalable en la barra de direcciones, y en el móvil, mostrará una mini barra de información:
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1VOvbQjeenZOBAmzjVN5.png", alt="Mensaje de instalación estándar de Chrome llamado mini-barra de información", width="800", height="417" %}<figcaption> La mini-barra de información</figcaption></figure>
+
+Si bien eso puede ser suficiente para algunas experiencias, si tu objetivo es impulsar las instalaciones de tu PWA, fuertemente te recomendamos que escuches a [`BeforeInstallPromptEvent`](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent) y sigas los [patrones para promover la instalación](/promote-install/) de tu PWA.
+
+## Evite que tu PWA canibalice la tasa de instalación de la aplicación específica de plataforma
+
+En algunos casos, puedes optar por promover la instalación de la aplicación específica de plataforma sobre tu PWA, pero en este caso te recomendamos que proporciones un mecanismo para permitir que los usuarios instalen tu PWA. Esta opción alternativa hace posible que los usuarios que no puedan o no quieran instalar la aplicación específica de tu plataforma obtengan una experiencia de instalación similar.
+
+El primer paso para implementar esta estrategia es definir una heurística para cuando se le muestre al usuario una promoción de instalación tu PWA, por ejemplo:
+
+**"Un usuario de PWA es un usuario que ha visto el mensaje de instalación de la aplicación específica de la plataforma y no ha instalado la aplicación específica de la plataforma. Ha regresado al sitio al menos cinco veces, o ha hecho clic en el banner de la aplicación, pero ha continuado usando el sitio web en su lugar."**
+
+Entonces, la heurística se puede implementar de la siguiente manera:
+
+1. Muestra el banner de instalación de la aplicación específica de la plataforma.
+2. Si un usuario descarta el banner, configura una cookie con esa información (por ejemplo, `document.cookie = "app-install-banner=dismissed"`).
+3. Utiliza otra cookie para rastrear el número de visitas de los usuarios al sitio (por ejemplo, `document.cookie = "user-visits=1"`).
+4. Escribe una función, como la de `isPWAUser()`, para que utilice la información almacenada previamente en las cookies junto con la de la API de [`getInstalledRelatedApps()`](/get-installed-related-apps/) para determinar si un usuario se considera un "usuario de PWA".
+5. En el momento en que el usuario realiza una acción significativa, llama a `isPWAUser()`. Si la función devuelve un valor de true (verdadero) y el indicador de instalación de PWA se guardó anteriormente, puedes mostrar el botón de instalación de PWA.
+
+## Promoción de la instalación de tu PWA a través de una app store
+
+Las aplicaciones que están disponibles en las app store se pueden crear con diferentes tecnologías, incluyendo las técnicas de PWA. En el siguiente artículo de [Combinación de PWA en entornos nativos](https://youtu.be/V7YX4cZ_Cto), puedes encontrar un resumen de las tecnologías que se pueden utilizar para ese fin.
+
+En esta sección clasificaremos las aplicaciones de la tienda en dos grupos:
+
+- **Aplicaciones específicas de plataforma:** Estas aplicaciones se crean principalmente con código específico de la plataforma. Su tamaño depende de la plataforma, pero suelen superar los 10 MB en Android y los 30 MB en iOS. Es posible que desees promocionar la aplicación específica de tu plataforma si no tienes una PWA o si la aplicación específica de la plataforma presenta un conjunto de funciones más completo.
+- **Aplicaciones livianas (Lightweight apps):** Estas aplicaciones también se pueden crear con código específico de la plataforma, pero normalmente se crean con tecnología web, empaquetadas en un contenedor específico de la plataforma. También se pueden cargar PWA completos en las tiendas. Algunas empresas optan por ofrecer estas experiencias como "livianas" y otras también han utilizado este enfoque para sus aplicaciones emblemáticas (centrales).
+
+### Promoción de aplicaciones livianas
+
+Según un [estudio de Google Play](https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2), por cada aumento de 6 MB al tamaño de un APK, la tasa de conversión de instalación disminuye en un 1%. ¡Esto significa que la tasa de finalización de descarga de una aplicación de 10 MB podría ser aproximadamente un **30% más alta que una aplicación de 100 MB!**
+
+Para solucionar este problema, algunas empresas están aprovechando de su PWA para ofrecer una versión liviana de su aplicación en la Play Store utilizando Trusted Web Activities (Actividades web de confianza). Las [Trusted Web Activities](https://developer.chrome.com/docs/android/trusted-web-activity/) permiten entregar tu PWA en la Play Store y, debido a que se creó a través de la web, el tamaño de la aplicación suele ser de solo unos pocos megabytes.
+
+Oyo, una de las empresas hoteleras más grandes de la India, creó una [versión Lite de su aplicación](/oyo-lite-twa/) y la publicó en la Play Store mediante TWA. Pesa 850 KB, eso es el 7% del tamaño de su aplicación de Android. Y una vez instalado, es indistinguible de su aplicación de Android:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>OYO Lite en acción.</figcaption></figure>
+
+Oyo mantuvo tanto la versión insignia como la versión "lite" de la aplicación en la tienda, dejando la decisión final a los usuarios.
+
+#### Proporcionar una experiencia web liviana
+
+Intuitivamente, los usuarios de dispositivos de gama baja pueden estar más inclinados a descargar versiones ligeras de aplicaciones que los usuarios de teléfonos de gama alta. Por lo tanto, si es posible identificar el dispositivo de un usuario, se podría priorizar el banner de instalación de la aplicación liviana sobre la versión de la aplicación específica de la plataforma que suele ser más pesada.
+
+En la web, es posible obtener señales de dispositivos y asignarlas aproximadamente a categorías de dispositivos (por ejemplo, "alta", "media" o "baja"). Puedes obtener esta información de diferentes formas, utilizando API de JavaScript o por sugerencias del cliente.
+
+#### Usando la API de JavaScript
+
+Usando API de JavaScript mediante [navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), [navigator.deviceMemory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) y [navigator.connection](https://developer.mozilla.org/docs/Web/API/Navigator/connection), puedes obtener información sobre la CPU del dispositivo, la memoria y el estado de la red, respectivamente. Por ejemplo:
+
+```javascript
+const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
+```
+
+#### Usar sugerencias del cliente
+
+Las señales del dispositivo también se pueden inferir en los encabezados de solicitud HTTP, a través de [sugerencias del cliente](https://developer.mozilla.org/docs/Glossary/Client_hints). A continuación, te mostramos cómo puedes implementar el código anterior para la memoria del dispositivo con sugerencias del cliente:
+
+Primero, dile al navegador que estás interesado en recibir sugerencias de memoria del dispositivo mediante la cabecera de respuesta HTTP para cualquier solicitud de origen:
+
+```html
+HTTP/1.1 200 OK
+Content-Type: text/html
+Accept-CH: Device-Memory
+```
+
+Luego, comenzarás a recibir información de la memoria del dispositivo en la cabecera de solicitud de las consultas HTTP:
+
+```html
+GET /main.js HTTP/1.1
+Device-Memory: 0.5
+```
+
+Puedes utilizar esta información en tus backends para almacenar una cookie con la categoría del dispositivo del usuario:
+
+```javascript
+app.get('/route', (req, res) => {
+  // Determinar la categoría del dispositivo
+
+ const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
+
+  // Definir cookie
+  res.setCookie('Device-Category', deviceCategory);
+  …
+});
+```
+
+Finalmente, crea tu propia lógica para asignar esta información a las categorías de dispositivos y mostrar el aviso de instalación de la aplicación correspondiente en cada caso:
+
+```javascript
+if (isDeviceMidOrLowEnd()) {
+   // Mostrar el banner de instalación para "Lite app" o el mensaje PWA A2HS
+} else {
+  // Mostrar el banner de instalación la "app de insignia"
+}
+```
+
+{% Aside %} Al cubrir en profundidad las técnicas sobre cómo asignar señales de dispositivos a categorías de dispositivos está fuera del alcance de esta guía, pero puedes consultar la [adaptive loading guide (guía de carga adaptable)](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69) de Addy Osmani, [The Device Memory API (La API de la Memoria del dispisitivo)](https://developer.chrome.com/blog/device-memory/) de Philip Walton y [Adapting to Users with Client Hints (Adaptando a los usuarios mediante las sugerencias del cliente)](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/) de Jeremy Wagner para obtener más información sobre las mejores prácticas en torno a lo anterior. {% endAside %}
+
+## Conclusión
+
+La capacidad de tener un icono en la pantalla de inicio del usuario es una de las características más atractivas de las aplicaciones. Dado que históricamente esto solo era posible para las aplicaciones instaladas desde las app store, las empresas podrían pensar que al mostrar un banner de instalación de la tienda de aplicaciones sería suficiente para convencer a los usuarios de que instalen sus experiencias. Actualmente, hay más opciones para que el usuario instale una aplicación, incluida la oferta de experiencias de aplicaciones livianas en las tiendas y permitir que los usuarios agreguen tu PWA a sus pantallas de inicio, solicitándoles que lo hagan directamente desde el sitio web.
diff --git a/src/site/content/es/progressive-web-apps/drive-business-success/index.md b/src/site/content/es/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..8b80ff12a3e
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: Cómo las aplicaciones web progresivas pueden impulsar el éxito empresarial
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: Crea un caso de negocio sólido para tu PWA. Aprende cuándo debes de invertir y cómo puedes medir tu éxito.
+tags:
+  - progressive-web-apps
+---
+
+Las aplicaciones web progresivas se encuentran en los planes de muchas empresas para modernizar su sitio web y adaptarse a las nuevas expectativas de los usuarios. Como todos los nuevos conceptos y capacidades técnicas, estos se plantean las siguientes preguntas: ¿es lo que quieren mis clientes? ¿cuánto crecerá mi negocio? ¿qué es lo técnicamente factible?
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="Identifica a tus stakeholders", width="800", height="254" %}
+
+Para dar forma a tu estrategia digital, a menudo se involucran varias partes interesadas: el gerente de producto y el CMO son los co-propietarios del impacto comercial de cada característica, el CTO evalúa la viabilidad y confiabilidad de una tecnología, los investigadores de UX validan que una característica responde a un problema real del cliente.
+
+Este artículo tiene como objetivo ayudarte a responder las tres preguntas anteriores y dar forma a tu proyecto de PWA. Comenzarás con las necesidades de tus clientes, traducirás esto en características de la PWA y te concentrarás en medir el impacto comercial que cada característica trae a la mesa.
+
+## Los PWA resuelven las necesidades de los clientes {: #solve-customer-needs }
+
+Una regla que nos encanta seguir en Google al crear productos es "[centrarse en el usuario y todo lo demás seguirá](https://www.google.com/about/philosophy.html)". Piensa *primero en el usuario*: ¿Cuáles son las necesidades de mis clientes y cómo las soluciona una PWA?
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="Identificar las necesidades del cliente", width="800", height="262" %}
+
+Al hacer una investigación de usuarios, encontramos algunos patrones interesantes:
+
+- Los usuarios odian los retrasos y la falta de fiabilidad en los dispositivos móviles: el nivel de estrés causado por los retrasos móviles es [comparable al de ver una película de terror](https://blog.hubspot.com/marketing/mobile-website-load-faster).
+- El cincuenta por ciento de los usuarios de teléfonos inteligentes tienen más probabilidades de utilizar el sitio móvil de una empresa cuando navegan o compran porque [no quieren descargar una aplicación](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/).
+- Una de las principales razones para desinstalar una aplicación es el [almacenamiento limitado](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/) (mientras que una PWA instalada suele ocupar menos de 1 MB).
+- Es más probable que los usuarios de teléfonos inteligentes compren en sitios móviles que [ofrecen recomendaciones relevantes](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/) sobre productos y el 85% de los usuarios de teléfonos inteligentes dice que [las notificaciones móviles son útiles](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/).
+
+De acuerdo con esas observaciones, ¡descubrimos que los clientes prefieren experiencias que sean rápidas, instalables, confiables y atractivas (FIRE)!
+
+## Las PWA aprovechan las capacidades web modernas {: #modern-capacity }
+
+Las PWA brindan un conjunto de mejores prácticas y API web modernas que tienen como objetivo satisfacer las necesidades de sus clientes al hacer que tu sitio sea rápido, instalable, confiable y atractivo.
+
+Por ejemplo, usar un service worker para [almacenar en caché tus recursos](/service-workers-cache-storage/) y realizar una [búsqueda previa predictiva](/precache-with-workbox/) hace que tu sitio sea más rápido y más confiable. Hacer que tu sitio sea instalable proporciona una manera fácil para que tus clientes accedan a él directamente desde su pantalla de inicio o desde el lanzador de aplicaciones. Y las nuevas API, como lo es [Web Push Notifications](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices), facilitan la participación de los usuarios con contenido personalizado para generar lealtad.
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="Mejorando la experiencia del usuario con nuevas capacidades", width="800", height="393" %}
+
+## Comprende el impacto empresarial {: #business-impact }
+
+La definición de éxito empresarial pueden ser muchas cosas dependiendo de tu actividad:
+
+- Los usuarios pasan más tiempo en tu servicio
+- Tasas de rebote reducidas para tus clientes potenciales
+- Tasas de conversión mejoradas
+- Más visitantes que regresan
+
+La mayoría de los proyectos de PWA dan como resultado una tasa de conversión móvil más alta y puedes obtener más información de los numerosos [estudios de casos de PWA](https://www.pwastats.com/). Dependiendo de tus objetivos, es posible que desees priorizar algunos aspectos de PWA que tengan más sentido para tu negocio y esto está completamente bien. Las funciones de PWA se pueden seleccionar y lanzar por separado.
+
+Midamos el impacto empresarial de cada una de estas fantásticas funciones de FIRE.
+
+### El impacto empresarial de un sitio web rápido {: #impact-fast }
+
+Un reciente [estudio de Deloitte Digital](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html) muestra que la velocidad de la página tiene un impacto significativo en las métricas comerciales.
+
+Hay muchas cosas que puedes hacer para optimizar la velocidad de tu sitio a fin de optimizar los recorridos críticos del usuario para todos tus usuarios. Si no sabes por dónde empezar, da un vistazo a nuestra sección de [Fast](/fast/) y usa [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) para priorizar las cosas más importantes a solucionar.
+
+Cuando trabajes en las optimizaciones de velocidad, comienza a medir la velocidad de tu sitio con frecuencia con las herramientas y métricas adecuadas para monitorear tu progreso. Por ejemplo, mide tus métricas con [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), fija objetivos claros como tener [puntuaciones "Buenas" en Core Web Vitals](/vitals/#core-web-vitals) e incorpora un [presupuesto de rendimiento en tu proceso de creación](/incorporate-performance-budgets-into-your-build-tools/). Gracias a las mediciones diarias y [la metodología del "valor de la velocidad"](/value-of-speed/), puedes aislar el impacto de tus cambios de velocidad incrementales y calcular cuántos ingresos adicionales que ha generado tu trabajo.
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="Mide el valor de la velocidad y haz una correlación con las conversiones", width="800", height="306" %}
+
+Ebay convirtió la [velocidad en un objetivo de la empresa](/shopping-for-speed-on-ebay/) en el 2019. Utilizaron técnicas como el presupuesto de rendimiento, la optimización de la ruta crítica y la captación previa predictiva. Llegaron a la conclusión de que por cada 100 milisegundos de mejora en el tiempo de carga de la página de búsqueda, el recuento de adiciones al carrito aumentaba en un 0,5%.
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="Una mejora de 100 ms en el tiempo de carga resultó en un aumento del 0.5% en el uso de la función de agregar al carrito para eBay", width="800", height="184" %}
+
+### El impacto comercial de un sitio web instalable {: #impact-installable }
+
+¿Por qué querrías que un usuario instale tu PWA? Para que sea más fácil volver a tu sitio. Cuando la instalación de una aplicación de Android agregaría al menos tres pasos (redirección a Play Store, descarga, reinicio de la aplicación de Android), la instalación de tu PWA se realiza sin problemas con un solo clic y no aleja al usuario del tramo de conversión actual.
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="La experiencia de instalación debe ser perfecta", width="800", height="239" %}
+
+Una vez instalado, los usuarios pueden iniciarlo con un clic desde el ícono en su pantalla de inicio, verlo en su bandeja de aplicaciones cuando están cambiando entre aplicaciones o encontrarlo a través de un resultado de búsqueda de aplicaciones. Nosotros le llamamos a esta aplicación dinámica "Discover-Launch-Switch" y hacer que tu PWA sea instalable es la clave para desbloquear el acceso.
+
+Además de ser accesible desde superficies conocidas de descubrimiento y lanzamiento en tu dispositivo, una PWA se inicia exactamente como una aplicación específica de la plataforma: en una experiencia independiente, separada del navegador. Además, se beneficia de los servicios de dispositivos a nivel del sistema operativo, como el conmutador de aplicaciones y la configuración.
+
+Los usuarios que instalen tu PWA son probablemente tus usuarios más comprometidos, con mejores métricas de participación que los visitantes ocasionales, incluidas más visitas repetidas, más tiempo en el sitio y tasas de conversión más altas, a menudo a la par con los usuarios de aplicaciones específicas de la plataforma en dispositivos móviles.
+
+Para que tu PWA sea instalable, debes de cumplir con los [criterios básicos](/install-criteria/). Una vez que cumplas con esos criterios, puedes [promover la instalación](/promote-install/) dentro de tu experiencia de usuario en computadoras de escritorio y dispositivos móviles, incluido iOS.
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="Las PWA se pueden instalar en todas partes", width="800", height="227" %}
+
+Una vez que hayas comenzado a promover la instalación de tu PWA, debes de medir cuántos usuarios están instalando tu PWA y cómo usan tu PWA.
+
+Para maximizar la cantidad de usuarios que instalan tu sitio, es posible que desees [probar diferentes](https://pwa-book.awwwards.com/chapter-4) mensajes de promoción (por ejemplo: "instalación en un segundo" o "agregar nuestro acceso directo para seguir su pedido"), diferentes ubicaciones (banner de encabezado, en el feed) e intentar proponerlo en diferentes pasos de la visita (en la segunda página visitada o después de una reserva).
+
+Para comprender dónde se van los usuarios y cómo mejorar la retención, el proceso de instalación se puede [medir](https://pwa-book.awwwards.com/chapter-8) de cuatro maneras:
+
+- Número de usuarios aptos para instalar
+- Número de usuarios que hicieron clic en el mensaje de instalación de la interfaz de usuario
+- Número de usuarios que aceptaron y rechazaron la instalación
+- Número de usuarios que se han instalado de manera correcta
+
+Puedes comenzar a promocionar tu instalación de PWA a todos tus usuarios o utilizar un enfoque más cauteloso experimentando solo con un pequeño grupo de usuarios.
+
+Después de unos días o semanas, ya deberías de tener algunos datos para medir el impacto en tu negocio. ¿Cuál es el comportamiento de las personas que vienen del acceso directo instalado? ¿Se involucran más?  ¿Se convierten más?
+
+Para segmentar a los usuarios que instalaron tu PWA, rastrea al evento de [`appinstalled`](/customize-install/#detect-install) y usa JavaScript para [verificar si los usuarios están en modo independiente](/customize-install/#detect-launch-type) (lo que indica el uso de la PWA instalada). Luego, utilízalos como variables o dimensiones para tu seguimiento analítico.
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="Medir el valor de la instalación", width="800", height="253" %}
+
+El [caso de estudio de Weekendesk](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf) es interesante: propusieron que la instalación esté en la segunda página visitada para maximizar la tasa de instalación y observaron que los clientes que regresaban a través del ícono en la pantalla de inicio tenían más del doble de probabilidades de reservar una estadía con ellos.
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="Los usuarios instalados tuvieron una tasa de conversión 2.5 veces mayor", width="800", height="201" %}
+
+La instalación es una excelente manera de hacer que las personas regresen a tu sitio y para mejorar la lealtad de tus clientes. También puedes pensar en personalizar la experiencia para esos usuarios premium.
+
+Incluso si ya tienes una aplicación específica de la plataforma, puedes probar para proponer tu aplicación primero y luego enviar la PWA más tarde para aquellos que rechazaron o no interactuaron con el banner de instalación de la aplicación. Es posible que algunos de tus usuarios que estén "semi-comprometidos" no alcancen el umbral para una instalación basada en la tienda de aplicaciones. Esta cohorte se puede abordar con la instalabilidad del PWA, que a menudo se percibe como más liviana y con menos fricción.
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="Las PWA pueden llegar a usuarios semi-comprometidos", width="800", height="229" %}
+
+### El impacto comercial de un sitio web confiable {: #impact-confiable }
+
+El juego Chrome Dino, que se ofrece cuando un usuario está desconectado, se juega más de [270 millones de veces](https://www.blog.google/products/chrome/chrome-dino/) al mes. Este impresionante número muestra que la confiabilidad de la red es una oportunidad considerable, especialmente en mercados con datos móviles caros o poco confiables como India, Brasil, México o Indonesia.
+
+Cuando se inicia una aplicación instalada desde una tienda de aplicaciones, los usuarios esperan que se abra, independientemente de si están conectados a internet o no. Las aplicaciones web progresivas no deberían ser diferentes.
+
+Como mínimo, se debe proporcionar una página sin conexión simple que le indique al usuario que la aplicación no está disponible sin una conexión de red. Luego, considera llevar la experiencia un paso más allá al proporcionar algunas [funciones que tengan sentido sin conexión](https://pwa-book.awwwards.com/chapter-6). Por ejemplo, puedes proporcionar acceso a boletos o pases de abordaje, listas de deseos fuera de línea, información de contacto del centro de llamadas, artículos o recetas que el usuario haya visto recientemente, etc.
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="Debe de ser útil, incluso sin conexión", width="800", height="243" %}
+
+Una vez que hayas implementado una [experiencia de usuario confiable](https://pwa-book.awwwards.com/chapter-6), es posible que desees medirla; ¿cuántos usuarios se desconectan? ¿en qué zona geográfica? y ¿permanecen en el sitio web cuando la red está de vuelta?
+
+El uso sin conexión se puede medir registrando pings analíticos cuando el usuario se [desconecta o se conecta](https://pwa-book.awwwards.com/chapter-8). Te indica cuántos usuarios continúan navegando en tu sitio web después de que la red haya regresado.
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivago vio que un 67% de los usuarios que volvieron a conectarse continuaron navegando", width="800", height="272" %}
+
+El [estudio de caso de Trivago](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/) ilustra cómo esto puede afectar tus objetivos comerciales: para los usuarios cuyas sesiones fueron interrumpidas por un período fuera de línea (alrededor del tres por ciento de los usuarios), el 67% de los que vuelven a conectarse continuaron navegando por el sitio.
+
+### El impacto comercial de un sitio web atractivo {: #impact-engaging }
+
+Las notificaciones de web push permiten a los usuarios optar por recibir actualizaciones oportunas de los sitios que aman y les permiten volver a involucrarlos de manera efectiva con contenido personalizado y relevante.
+
+Pero ten cuidado. Pedirle a los usuarios que se registren para recibir notificaciones web cuando llegan por primera vez y sin exponer los beneficios puede percibirse como spam y afectar negativamente su experiencia. Asegúrate de seguir las [mejores prácticas](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) cuando envíes notificaciones e inspira la aceptación a través de utilidades e información relevante como puede ser retrasos en los trenes, seguimiento de precios, productos agotados, etc.
+
+Técnicamente, [las notificaciones push](https://developers.google.com/web/fundamentals/push-notifications/) en la web se ejecutan en segundo plano gracias a un service worker y, a menudo, las envía un sistema creado para administrar campañas (por ejemplo, Firebase). Esta función brinda un gran valor comercial para los usuarios de dispositivos móviles (Android) y computadoras de escritorio: aumenta las visitas repetidas y, en consecuencia, las ventas y las conversiones.
+
+Para medir la efectividad de tus campañas push, necesitas medir todo el proceso:
+
+- Número de usuarios elegibles para notificaciones push
+- Número de usuarios que hacen clic en un mensaje de la IU de notificación personalizada
+- Número de usuarios que otorgan permiso de notificación push
+- Número de usuarios que reciben notificaciones push
+- Número de usuarios que interactúan con las notificaciones
+- Conversión e interacción de los usuarios a partir de una notificación.
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="Medir el valor de las notificaciones de web push", width="800", height="255" %}
+
+Hay muchos estudios de casos excelentes sobre notificaciones de web push, como [Carrefour, que multiplicó su tasa de conversión por 4.5](https://useinsider.com/case-studies/carrefour/) volviendo a involucrar a los usuarios con carritos abandonados.
+
+## La P en PWA: un lanzamiento progresivo, función por función {: #feature-by-feature }
+
+Las PWA son sitios web modernos que se benefician del alcance masivo de la web, combinados con todas las funciones fáciles de usar que los usuarios adoran en las aplicaciones de Android, iOS y de escritorio. Aprovechan un conjunto de las mejores prácticas y de API web modernas, las cuales se pueden implementar de forma independiente según las especificaciones y prioridades de tu negocio.
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="Lanzamiento progresivo de tu PWA", width="800", height="253" %}
+
+Para acelerar la modernización de tu sitio web y convertirlo en una PWA real, te recomendamos que sea ágil: lanzar función por función. Primero, investiga con tus usuarios qué características les aportarían el mayor valor, luego envía los resultados a tus diseñadores y desarrolladores y, finalmente, no olvides medir con precisión cuánto dinero extra generó tu PWA.
diff --git a/src/site/content/es/progressive-web-apps/index.md b/src/site/content/es/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/es/progressive-web-apps/install-criteria/index.md b/src/site/content/es/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..812cbd0e238
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: "¿Qué se requiere para su instalación?"
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: Criterios de instalación de las Aplicaciones Web Progresivas.
+tags:
+  - progressive-web-apps
+---
+
+Las Aplicaciones Web Progresivas (PWA) son aplicaciones modernas y de alta calidad construidas con tecnología de Internet. Las PWA ofrecen funciones similares a las de las aplicaciones para iOS/Android/escritorio, son confiables incluso en condiciones inestables de la red y pueden instalarse, lo que facilita que los usuarios las encuentren y las utilicen.
+
+La mayoría de los usuarios están familiarizados con la instalación de aplicaciones y con las ventajas de contar con una experiencia instalada. Las aplicaciones instaladas se encuentran en las superficies de arranque del sistema operativo, como la carpeta de Aplicaciones en Mac OS X, el menú de Inicio en Windows y la pantalla de inicio en Android e iOS. Las aplicaciones instaladas también aparecen en el selector de actividades, en los motores de búsqueda de los dispositivos, como Spotlight, y en las hojas para compartir contenidos.
+
+La mayoría de los navegadores indican al usuario que su Aplicación Web Progresiva (PWA) se puede instalar cuando cumple determinados criterios. Algunos ejemplos de estos indicadores son un botón de instalación en la barra de direcciones o un elemento del menú de instalación en el menú desplegable.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="Captura de pantalla de omnibox con el indicador de instalación visible", width="800", height="307" %} <figcaption> Promoción de la instalación proporcionada por el navegador (de escritorio) </figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="Captura de pantalla para la promoción de instalación proporcionada por el navegador.", width="800", height="307" %} <figcaption> Promoción de instalación proporcionada por el navegador (para dispositivos móviles) </figcaption></figure>
+</div>
+
+Además, cuando se cumplen los criterios, muchos navegadores lanzarán un evento `beforeinstallprompt`, lo que le permitirá proporcionar una UX personalizada en la aplicación que activará el flujo de instalación dentro de su aplicación.
+
+## Criterios de instalación {: #criteria}
+
+En Chrome, su Aplicación Web Progresiva debe cumplir los siguientes criterios antes de que se active el evento `beforeinstallprompt` y se muestre la promoción de instalación en el navegador:
+
+- La aplicación web aún no está instalada
+- Cumple con una heurística de participación del usuario
+- Se publica por medio de HTTPS
+- Contiene un [manifiesto de la aplicación web](/add-manifest/) que incluye:
+    - `short_name` o `name`
+    - `icons` : debe incluir un icono de 192 px y uno de 512 px
+    - `start_url`
+    - `display`: debe ser de `fullscreen`, `standalone` o `minimal-ui`
+    - `prefer_related_applications` no debe estar presente o ser `false`
+- Registre a un service worker con un controlador de `fetch`
+
+Otros navegadores tienen criterios similares de instalación, aunque puede haber pequeñas diferencias. Consulte los sitios correspondientes para conocer todos los detalles:
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/progressive-web-apps#requirements)
+- [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
+- [Opera](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} En Android, si el manifiesto de la aplicación web incluye `related_applications` y `"prefer_related_applications": true`, el usuario se dirigirá a la tienda de Google Play y [se le pedirá que instale la aplicación de Android especificada](https://developer.chrome.com/blog/app-install-banners-native/). {% endAside %}
diff --git a/src/site/content/es/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/es/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..3f8b012f1fa
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Crear una página de fallback sin conexión
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: Aprende a crear una experiencia sin conexión simple para tu aplicación.
+tags:
+  - progressive-web-apps
+---
+
+¿Qué tienen en común la aplicación Asistente de Google, la aplicación de Slack, la aplicación de Zoom y casi cualquier otra aplicación específica de plataforma en su teléfono o computadora? Exacto, siempre al menos te dan *algo*. Incluso cuando no tengas una conexión de red, aún puedes abrir la aplicación Asistente, ingresar a Slack o iniciar en Zoom. Es posible que no obtengas nada particularmente significativo o incluso no puedas lograr lo que querías lograr, pero al menos obtienes *algo* y la aplicación tiene el control.
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="Aplicación móvil Asistente de Google sin conexión", width="621", height="1344" %} <figcaption id="fig-assistant"> Asistente de Google.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="Aplicación de Slack móvil sin conexión", width="621", height="1344" %} <figcaption id="fig-slack"> Slack. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="Aplicación móvil de Zoom sin conexión", width = "621", height = "1344"%}<figcaption id="fig-zoom"> Zoom.</figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">Con aplicaciones específicas de plataforma, incluso cuando no tienes una conexión de red, nunca obtendrás nada.</figcaption>
+
+
+
+Por el contrario, en la Web, tradicionalmente no obtienes nada cuando estás desconectado. Chrome te ofrece el [juego de dinosaurios sin conexión](https://www.blog.google/products/chrome/chrome-dino/), pero eso es todo.
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="Aplicación móvil de Google Chrome que muestra el juego de dinosaurios sin conexión.", width="800", height="1731" %} <figcaption id="fig-chrome-ios"> Google Chrome para iOS.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="Aplicación de escritorio de Google Chrome que muestra el juego de dinosaurios sin conexión", width="800", height="607" %} <figcaption id="fig-chrome"> Google Chrome para macOS.</figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">En la Web, cuando no tienes una conexión de red, de forma predeterminada, no obtienes nada.</figcaption>
+
+
+
+## Una página fallback sin conexión con un service worker personalizado
+
+Sin embargo, no tiene por qué ser así. Gracias a [los service workers y la API de Cache Storage (almacenamiento en caché)](/service-workers-cache-storage/), puedes proporcionar una experiencia fuera de línea personalizada para tus usuarios. Esta puede ser una simple página con tu marca con la información de que el usuario está actualmente sin conexión, pero también puede ser una solución más creativa, como por ejemplo, el famoso [juego de laberintos sin conexión de trivago](https://www.trivago.com/offline) con un botón de **reconexión** manual y un intento de reconexión automática usando una cuenta regresiva.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="La página sin conexión de Trivago con el laberinto sin conexión de Trivago.", width="800", height="616" %} <figcaption> El laberinto sin conexión de Trivago.</figcaption></figure>
+
+### Registrar al service worker
+
+Para poder hacer que esto suceda es a través de un service worker. Puedes registrar un service worker desde tu página principal como en el ejemplo de código a continuación. Por lo general, haces esto una vez que se haya cargado la aplicación.
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### El código del service worker
+
+El contenido del archivo del service worker real puede parecer un poco complicado a primera vista, pero los comentarios en el ejemplo siguiente deberían aclarar las cosas. La idea central es hacer un pre-caché de un archivo llamado `offline.html` que se sirve sólo se presentan en las solicitudes de navegación *en su defecto*, y para permitir que el navegador maneja todos los demás casos:
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Al incrementar el  OFFLINE_VERSION obligará a lanzar el evento de instalación y
+// los caché anteriores serán actualizados desde la red.
+// Esta variable está declarada intencionalmente y no se usa.
+// Agrega un comentario para tu linter si lo deseas:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Modifica esto con una diferente URL si es necesario.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Al definir {cache: 'reload'} en la nueva consulta asegurara que la
+      // respuesta no sea desde el caché de HTTP; i.e., esta será
+      // de la red.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Obliga al service worker que espera a que se convierta en uno activo.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Permite la navegación precargada si tiene compatibilidad
+      // Mira https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Le dice al service worker activo que tome el control inmediato de la página.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // Solo queremos llamar al event.respondWith() si es una solicitud de navegación
+  // para una página HTML.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // Primero, utiliza una respuesta de precarga de navegación.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Siempre usa la red primero.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // El catch solo se dispara cuando se obtiene una excepción
+          // gracias a un error en la red.
+          // Si fetch() regresa una respuesta HTTP valida con un codigo de respuesta en el
+          // rango de 4xx o 5xx, el catch() no se llamará
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // si nuestra condición de if() es falso, el controlador de fetch no atrapará la
+  // solicitud. Si hay más controladores de fetch registrados, ellos tendrán la
+  // oportunidad de llamar a event.respondWith(). De lo contrario, si no hay, no se llamará a
+  // event.respondWith(), la solicitud será controlada por el buscador como si no
+  // los service worker no se hubieran involucrado.
+});
+```
+
+### La página de respaldo sin conexión
+
+El archivo de `offline.html` es donde puedes ser creativo y adaptarlo a tus necesidades y agregar tu marca. El siguiente ejemplo muestra lo mínimo de lo que es posible. Demuestra tanto la recarga manual basada en la pulsación de un botón como la recarga automática basada en el [evento en `online`](https://developer.mozilla.org/docs/Web/API/Window/online_event) y el sondeo regular del servidor.
+
+{% Aside 'gotchas' %} Debes de almacenar en caché todos los recursos que requiere tu página sin conexión. Una forma de lidiar con esto es alinear todo, de modo que la página fuera de línea sea autónoma. Esto es lo que hago en el siguiente ejemplo. {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Estás desconectado</h1>
+
+    <p>Haz clic en el botón para intentar una recarga.</p>
+    <button type="button">⤾ Recargar</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // Metodo de recarga manual.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Escucha los cambios en la red, se recargará cuando se esté conectado.
+      // Esto maneja el caso cuando el dispositivo este completamente fuera de linea.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Checa si el servidor está respondiendo y recarga la página si lo esté.
+      // Esto maneja el caso de cuando el dispositivo esté en linea, pero el servidor
+      // esté fuera de linea o con problemas.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Verifica si tenemos una respuesta valida del servidor
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // No se puede conectar al servidor, ignorar.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## Demostración
+
+Puedes ver la página fallback sin conexión en acción en la siguiente [demostración](https://offline-fallback-demo.glitch.me/index.html) incrustada a continuación. Si estás interesado, puedes explorar el [código fuente](https://glitch.com/edit/#!/offline-fallback-demo) en Glitch.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### Hincapié en hacer tu app instalable
+
+Ahora que tu sitio tiene una página fallback sin conexión, es posible que te preguntes acerca de los próximos pasos. Para que tu aplicación se pueda instalar, debes de agregar un [manifiesto de la aplicación web](/add-manifest/) y, opcionalmente, idear una [estrategia de instalación](/define-install-strategy/).
+
+### Hincapié en servir una página fallback sin conexión con Workbox.js
+
+Es posible que hayas oído hablar de [Workbox.js](https://developer.chrome.com/docs/workbox/). Workbox.js es un conjunto de bibliotecas de JavaScript para agregar soporte sin conexión a aplicaciones web. Si prefieres escribir menos código de service worker por ti mismo, puedes usar la receta de Workbox.js solo para una [página sin conexión](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only).
+
+A continuación, aprenderás a [definir una estrategia de instalación](/define-install-strategy/) para tu aplicación.
diff --git a/src/site/content/es/progressive-web-apps/promote-install/index.md b/src/site/content/es/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..d172fc78634
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Patrones para promover la instalación de las PWA
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: |2-
+
+  Cómo promover la instalación de aplicaciones web progresivas y sus mejores prácticas.
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+La instalación de tu aplicación web progresiva (PWA) puede facilitar a los usuarios su búsqueda y uso. Incluso con la promoción del navegador, algunos usuarios no se dan cuenta de que pueden instalar una PWA, por lo que puede ser útil brindar una experiencia en la aplicación que puedas usar para promover y habilitar la instalación de tu PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="Captura de pantalla de un botón de instalación simple de una PWA", width="800", height="368" %} <figcaption> Un botón de instalación simple  provisto dentro de tu PWA.</figcaption></figure>
+
+Esta lista no es de ninguna manera exhaustiva, pero ofrece un punto de partida para diferentes formas de promover la instalación de tu PWA. Independientemente del patrón *o patrones* que utilices, todos conducen al mismo código que activa el flujo de instalación, documentado en [Cómo proporcionar tu propia experiencia de instalación en la aplicación](/customize-install/).
+
+## Prácticas recomendadas para la promoción de instalaciones de PWA {: #best-practices }
+
+Existen algunas prácticas recomendadas que se aplican independientemente de los patrones promocionales que utilices en tu sitio.
+
+- Mantén las promociones fuera del flujo de los viajes de tus usuarios. Por ejemplo, en una página de inicio de sesión de PWA, pon la llamada a la acción debajo del formulario de inicio de sesión y el botón de envió. El uso disruptivo de patrones promocionales reduce la usabilidad de tu PWA e impacta negativamente en tus métricas de participación.
+- Incluye la posibilidad de ignorar o rechazar la promoción. Recuerda la preferencia del usuario si hace esto y solo vuelve a preguntar si hay un cambio en la relación del usuario con su contenido, como si inició sesión o completó una compra.
+- Combina más de una de estas técnicas en diferentes partes de tu PWA, pero ten cuidado de no abrumar o molestar a tu usuario con la promoción de instalación.
+- Muestra la promoción solo **después** de que el [evento](/customize-install/#beforeinstallprompt) `beforeinstallprompt` se haya disparado.
+
+## Promoción automática del navegador {: #browser-promotion }
+
+Cuando se cumplen [ciertos criterios](/install-criteria/), la mayoría de los navegadores le indicarán automáticamente al usuario que tu aplicación web progresiva se puede instalar. Por ejemplo, el escritorio de Chrome muestra un botón de instalación en el cuadro multifunción.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="Captura de pantalla del cuadro multifunción con indicador de instalación visible", width="800", height="307" %} <figcaption> Promoción de instalación proporcionada por el navegador (escritorio)</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="Captura de pantalla de la promoción de instalación proporcionada por el navegador", width="800", height="307" %}<figcaption> Promoción de instalación proporcionada por el navegador (móvil)</figcaption></figure>
+</div>
+
+Chrome para Android mostrará una mini barra de información al usuario, aunque esto se puede evitar llamando a `preventDefault()` en el evento de `beforeinstallprompt`. Si no llamas a `preventDefault()`, el banner se mostrará la primera vez que un usuario visite tu sitio y cumpla con los criterios de instalación en Android y luego nuevamente después de 90 días aproximadamente.
+
+## Patrones promocionales de la interfaz de usuario de la aplicación {: #app-ui-patterns }
+
+Los patrones promocionales de la interfaz de usuario de la aplicación se pueden utilizar para casi cualquier tipo de PWA y aparecen en la interfaz de usuario de la aplicación, como la navegación del sitio y en los banners. Al igual que con cualquier otro tipo de patrón promocional, es importante conocer el contexto del usuario para minimizar la interrupción del viaje del usuario.
+
+Los sitios que tienen en cuenta cuándo activan la interfaz de usuario de promoción logran una mayor cantidad de instalaciones y evitan interferir con los viajes de los usuarios que no están interesados en la instalación.
+
+### Botón de instalación simple {: #simple-button }
+
+La experiencia de usuario más simple posible es incluir un botón de 'Instalar' o de 'Obtener aplicación' en una ubicación adecuada en tu contenido web. Asegúrate de que el botón no bloquee otras funciones importantes y no obstaculice el recorrido del usuario a través de tu aplicación.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="Botón personalizado de instalación", width="800", height="448" %}<figcaption> Botón de instalación simple</figcaption></figure>
+
+### Encabezado fijo {: #header }
+
+Este es un botón de instalación que forma parte del encabezado de tu sitio. Otro contenido de encabezado a menudo incluye la marca del sitio, como un logotipo y el menú de hamburguesas. Los encabezados pueden tener la propiedad de `position:fixed` o no, según la funcionalidad de tu sitio y las necesidades del usuario.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="Botón personalizado de instalación en el encabezado", width="800", height="448" %}<figcaption> Botón personalizado de instalación en el encabezado</figcaption></figure>
+
+Cuando se usa adecuadamente, promover la instalación de PWA desde el encabezado de tu sitio es una excelente manera de facilitar que tus clientes más leales regresen a tu experiencia. Los píxeles en el encabezado de tu PWA son valiosos, así que asegúrate de que tu llamado a la acción de instalación tenga el tamaño adecuado, sea más importante que otro posible contenido de encabezado y no sea intrusivo.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="Botón personalizado de instalación en el encabezado", width="800", height="430" %} <figcaption> Botón personalizado de instalación en el encabezado</figcaption></figure>
+
+Asegúrate de que tú:
+
+- No muestres el botón de instalación a menos que se haya disparado `beforeinstallprompt`.
+- Evalúes el valor de tu caso de uso instalado para tus usuarios. Considera el enfoque selectivo para presentar tu promoción solo a los usuarios que probablemente se beneficiarán de ella.
+- Utilices el valioso espacio del encabezado de manera eficiente. Considera qué más sería útil ofrecer a tu usuario en el encabezado y evalúar la prioridad de la promoción de instalación en relación con otras opciones.
+
+### Menú de navegación {: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="Botón personalizado de instalación en el menú de navegación", width="800", height="1117" %}<figcaption> Agrega un botón y/o promoción de instalación en un menú de navegación deslizable.</figcaption></figure>
+
+El menú de navegación es un gran lugar para promover la instalación de tu aplicación, ya que los usuarios que abren el menú están indicando que están involucrados con tu experiencia.
+
+Asegúrate de que tú:
+
+- Evites interrumpir el contenido de navegación importante. Coloca la promoción de instalación de PWA debajo de otros elementos del menú.
+- Ofrezcas una presentación breve y relevante de por qué el usuario se beneficiaría de la instalación de tu PWA.
+
+### Página de aterrizaje {: #landing }
+
+El propósito de una página de aterrizaje es promocionar tus productos y servicios, por lo que este es un lugar en el que es apropiado para promocionar a lo grande los beneficios de instalar tu PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="Solicitud personalizada de instalación en la página de aterrizaje", width="800", height="1117" %}<figcaption> Solicitud personalizada de instalación en la página de aterrizaje</figcaption></figure>
+
+Primero, explica la propuesta de valor de tu sitio y luego informa a los visitantes qué obtendrán al instalar la aplicación.
+
+Asegúrate de que tú:
+
+- Apeles a las funciones que más le interesan a tus visitantes y enfatices las palabras clave que podrían haberlos llevado a tu página de aterrizaje.
+- Haz que la promoción de la instalación y el llamado a la acción sean llamativos, pero solo después de haber dejado clara tu propuesta de valor. Después de todo, esta es tu página de aterrizaje.
+- Considera agregar una promoción de instalación en la parte donde los usuarios pasan más tiempo en tu aplicación.
+
+### Instalar un banner {: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="Banner personalizado de instalación en la parte superior de la página", width="800", height="1000" %}<figcaption> Un banner descartable en la parte superior de la página.</figcaption></figure>
+
+La mayoría de los usuarios han encontrado banners de instalación en experiencias móviles y están familiarizados con las interacciones que ofrece un banner. Los banners deben usarse con cuidado porque pueden molestar al usuario.
+
+Asegúrate de que tú:
+
+- Esperes hasta que el usuario haya demostrado interés en tu sitio antes de mostrar un banner. Si el usuario decide ignorar tu banner, no lo vuelvas a mostrar a menos que el usuario active un evento de conversión que indique un mayor nivel de participación con tu contenido, como una compra en un sitio de comercio electrónico o el registro de una cuenta.
+- Proporciona una breve explicación del valor de instalar tu PWA en el banner. Por ejemplo, puedes diferenciar la instalación de una PWA de una aplicación de iOS o Android mencionando que casi no usa almacenamiento en el dispositivo del usuario o que se instalará instantáneamente sin un redireccionamiento a la tienda.
+
+### IU temporal {: #temporary-ui }
+
+La interfaz de usuario temporal, como el patrón de diseño de [Snackbar](https://material.io/components/snackbars/), notifica al usuario y te permite completar una acción fácilmente. En este caso, instalar la aplicación. Cuando se usan correctamente, este tipo de patrones de IU no interrumpen el flujo del usuario y, por lo general, se descartan automáticamente si el usuario los ignora.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="Banner personalizado de instalación como snackbar.", width="800", height="448" %}<figcaption> Un snackbar descartable que indica que la PWA es instalable.</figcaption></figure>
+
+Muestra la snackbar después de algunos compromisos e interacciones con tu aplicación. Si aparece al cargar la página, o fuera de contexto, se puede pasar por alto fácilmente o provocar una sobrecarga cognitiva. Cuando esto sucede, los usuarios simplemente descartarán todo lo que ven. Recuerda, es posible que los nuevos usuarios de tu sitio no estén listos para instalar tu PWA, por lo tanto, es mejor esperar hasta que tengas fuertes señales de interés del usuario antes de usar este patrón, por ejemplo, visitas repetidas, un inicio de sesión de usuario o un evento similar de conversión.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="Banner personalizado de instalación como snackbar.", width="800", height="424" %}<figcaption> Un snackbar descartable que indica que la PWA es instalable.</figcaption></figure>
+
+Asegúrate de que tú:
+
+- Muestres la snackbar entre 4 y 7 segundos para que los usuarios tengan tiempo suficiente para verla y reaccionar a ella y sin estorbar.
+- Evites mostrar la snackbar sobre otra interfaz de usuario temporal, como banners, etc.
+- Esperes hasta que tengas fuertes señales de interés del usuario antes de usar este patrón, por ejemplo, visitas repetidas, un inicio de sesión de usuario o un evento similar de conversión.
+
+## Después de la conversión
+
+Inmediatamente después de un evento de conversión de usuario, por ejemplo, después de una compra en un sitio de comercio electrónico, es una excelente oportunidad para promover la instalación de tu PWA. El usuario está claramente comprometido con tu contenido, y una conversión a menudo indica que el usuario volverá a interactuar con tus servicios.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="Captura de pantalla de la promoción de instalación después de la conversión.", width="800", height="448" %} <figcaption> Instala la promoción después de que el usuario haya completado la compra.</figcaption></figure>
+
+### Viaje de pago o reserva {: #journey }
+
+<figure data-float="right">{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt = "Instalar la promoción después de un viaje del usuario", width = "800", height = "1419"%}<figcaption> Instalar la promoción después de un viaje del usuario.</figcaption></figure>
+
+Muestra una promoción de instalación durante o después de un viaje secuencial, como los típicos flujos de pago o reserva. Si muestras la promoción después de que el usuario haya completado el viaje, a menudo puedes hacerla más prominente una vez que el viaje sea completado.
+
+Asegúrate de que tú:
+
+- Incluyas una llamada a la acción relevante. ¿Qué usuarios se beneficiarán de la instalación de tu aplicación y por qué? ¿Qué importancia tiene para el viaje que están emprendiendo actualmente?
+- Si tu marca tiene ofertas únicas para los usuarios de aplicaciones instaladas, asegúrate de mencionarlas aquí.
+- Mantén la promoción fuera de los próximos pasos en su viaje o este podrá afectar negativamente las tasas de finalización del mismo. En el ejemplo de comercio electrónico anterior, observa cómo la clave de la llamada a la acción para realizar el pago está por encima de la promoción de instalación de la aplicación.
+
+### Flujo de registro, inicio de sesión o cierre de sesión {: #sign-up }
+
+Esta promoción es un caso especial del patrón promocional del [viaje](#journey) donde la tarjeta de promoción puede ser más prominente.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="Botón personalizado de instalación en la página de registro.", width="800", height="1117" %} <figcaption> Botón personalizado de instalación en la página de registro.</figcaption></figure>
+
+Por lo general, estas páginas solo las ven los usuarios comprometidos, cuando ya se ha establecido la propuesta de valor de tu PWA. Es normal que no haya mucho otro contenido útil para colocar en estas páginas. Como resultado, es menos perturbador hacer un llamado a la acción más grande siempre que no estorbe.
+
+Asegúrate de que tú:
+
+- Evites interrumpir el viaje del usuario dentro del formulario de registro. Si se trata de un proceso de varios pasos, es posible que desees esperar hasta que el usuario haya completado el viaje.
+- Promociones las funciones más relevantes para un usuario registrado.
+- Consideres agregar una promoción de instalación adicional dentro de las áreas en las que inició sesión de su aplicación.
+
+## Patrones promocionales en línea
+
+Las técnicas de promoción en línea entrelazan las promociones con el contenido del sitio. Esto suele ser más sutil que la promoción en la interfaz de usuario de la aplicación, pero como todo, tiene sus ventajas y desventajas. Tu deseo es que tu promoción se destaque lo suficiente como para que los usuarios interesados la noten y que no afecte mucho a la calidad de tu experiencia de usuario.
+
+### En el feed {: #in-feed }
+
+Aparece una promoción de instalación en el feed entre artículos de noticias u otras listas de tarjetas de información en tu PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="Instala la promoción en el feed de contenido.", width="800", height="1000" %}  <figcaption> Instala la promoción en el feed de contenido.</figcaption></figure>
+
+Tu objetivo es mostrar a los usuarios cómo acceder al contenido que disfrutan de una manera más conveniente. Concéntrate en promover características y funcionalidades que serán útiles para tus usuarios.
+
+Asegúrate de que tú:
+
+- Limites la frecuencia de las promociones para evitar molestar a los usuarios.
+- Ofrezcas a tus usuarios la posibilidad de ignorar las promociones.
+- Recuerdes la elección de tu usuario.
diff --git a/src/site/content/es/progressive-web-apps/pwa-checklist/index.md b/src/site/content/es/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..ecfd246fdc9
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: "¿Qué se necesita para que una Aplicación Web Progresiva sea buena?"
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: "¿Qué se necesita para que una Aplicación Web Progresiva sea buena o excelente?"
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+Las Aplicaciones Web Progresivas (PWA) se crean y mejoran con API modernas para ofrecer funciones mejoradas, seguridad y capacidad para su instalación, mientras llegan a *cualquier persona, en cualquier lugar y en cualquier dispositivo* con una sola base de código. Para ayudarle a crear la mejor experiencia posible, utilice las listas de verificación y las recomendaciones [principal](#core) y [óptima](#optimal) para que le orienten.
+
+## Lista de verificación principal de la Aplicación Web Progresiva {: #core}
+
+En la lista de verificación de las Aplicaciones Web Progresivas se describe de qué manera una aplicación puede instalarse y ser utilizada por todos los usuarios, independientemente de su tamaño o tipo de entrada.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Iniciar rápido, mantenerse rápido
+
+El rendimiento representa un papel importante en el éxito de cualquier experiencia en línea, ya que los sitios de alto rendimiento atraen y retienen mejor a los usuarios a diferencia de los de bajo rendimiento. Los sitios deben centrarse en optimizar las métricas de rendimiento centradas en el usuario.
+
+{% endDetailsSummary %}
+
+El rendimiento representa un papel importante en el éxito de cualquier experiencia en línea, ya que los sitios de alto rendimiento atraen y retienen mejor a los usuarios a diferencia de los de bajo rendimiento. Los sitios deben centrarse en optimizar las métricas de rendimiento centradas en el usuario.
+
+#### Por qué
+
+La velocidad es fundamental para lograr que los usuarios *utilicen* su aplicación. De hecho, conforme el tiempo de carga de la página aumenta de un segundo a diez segundos, la probabilidad de que un usuario se retire aumenta en un 123%. El rendimiento no termina con el evento `load`. Los usuarios nunca deben preguntarse si su interacción (por ejemplo, hacer clic en un botón) se registró o no. Tanto la navegación como las animaciones deben ser muy fluidas. El rendimiento afecta a toda la experiencia, desde la forma en que los usuarios perciben la aplicación hasta cómo funciona realmente.
+
+Si bien todas las aplicaciones tienen diferentes requisitos, las auditorías de rendimiento en Lighthouse se basan en el [modelo de rendimiento centrado en el usuario de RAIL](/rail/), y si consigue una puntuación alta en esas auditorías, será más probable que sus usuarios tengan una experiencia agradable. También puede utilizar [PageSpeed Insights](https://pagespeed.web.dev/) o el [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) para obtener datos de rendimiento del mundo real para su aplicación web.
+
+#### Cómo
+
+Consulte nuestra [guía sobre tiempos de carga rápidos](/fast/) para aprender a hacer que su PWA inicie rápido y se mantenga rápido.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Funciona en cualquier navegador
+
+Los usuarios pueden utilizar cualquier navegador que elijan para acceder a su aplicación web antes de que se instale.
+
+{% endDetailsSummary%}
+
+Los usuarios pueden utilizar cualquier navegador que elijan para acceder a su aplicación web antes de que se instale.
+
+#### Por qué
+
+Las Aplicaciones Web Progresivas son, en primer lugar, aplicaciones web, y eso significa que tienen que funcionar en todos los navegadores, no solo en uno de ellos.
+
+Una forma eficaz de hacerlo es, en palabras de Jeremy Keith en su libro [Resilient Web Design](https://resilientwebdesign.com/), identificar la funcionalidad principal, hacer que esa funcionalidad esté disponible utilizando la tecnología más sencilla posible, y después mejorar la experiencia cuando sea posible. En muchos casos, esto significa comenzar solo con HTML para crear la funcionalidad principal, y mejorar la experiencia del usuario con CSS y JavaScript para crear una experiencia más atractiva.
+
+Por ejemplo, el envío de formularios. La forma más sencilla de implementarlo es un formulario HTML que envíe una solicitud `POST`. Después de crear eso, puede mejorar la experiencia con JavaScript para hacer la validación del formulario y enviarlo mediante AJAX, lo que mejora la experiencia para los usuarios que pueden admitirlo.
+
+Tenga en cuenta que sus usuarios experimentarán su sitio a través de un amplio conjunto de dispositivos y navegadores. No se puede limitar a dirigirse al extremo superior del espectro. Si utiliza la detección de características, conseguirá ofrecer una experiencia utilizable para el mayor número posible de usuarios potenciales, incluyendo los que utilizan navegadores y dispositivos que posiblemente no existan en la actualidad.
+
+#### Cómo
+
+En el libro [Resilient Web Design](https://resilientwebdesign.com/) de Jeremy Keith hay un excelente recurso que describe cómo pensar en el diseño web con esta metodología progresiva y compatible con todos los navegadores.
+
+#### Lectura adicional
+
+- [Cómo comprender la mejora progresiva](https://alistapart.com/article/understandingprogressiveenhancement/), de A List Apart, es una buena introducción al tema.
+- En el artículo de Smashing Magazine [Mejora progresiva (Progressive Enhancement): ¿Qué es y cómo se utiliza?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) Se ofrece una introducción práctica y enlaces sobre temas más avanzados.
+- MDN tiene un artículo titulado [Implementación de la detección de características (Implementing feature detection)](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) en el que se explica cómo detectar una característica con una consulta directa.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Se adapta a cualquier tamaño de pantalla
+
+Los usuarios pueden utilizar su PWA con cualquier tamaño de pantalla y todo el contenido está disponible en cualquier tamaño de ventana de visualización.
+
+{% endDetailsSummary %}
+
+Los usuarios pueden utilizar su PWA con cualquier tamaño de pantalla y todo el contenido está disponible en cualquier tamaño de ventana de visualización.
+
+#### Por qué
+
+Los dispositivos presentan una gran variedad de tamaños, y los usuarios pueden utilizar su aplicación en una gran variedad de tamaños, incluso en el mismo dispositivo. Por lo tanto, es fundamental asegurarse de que el contenido no solo se ajusta a la ventana de visualización, sino que todas las funciones y el contenido del sitio se pueden utilizar en todos los tamaños de ventanas de visualización.
+
+Las tareas que los usuarios desean completar y el contenido al que quieren acceder no cambian con el tamaño de la ventana de visualización. El contenido se puede reorganizar en diferentes tamaños de ventanas de visualización, y todo debería permanecer allí, de una forma u otra. De hecho, tal y como afirma Luke Wroblewski en su libro Mobile First, el hecho de comenzar con un tamaño pequeño y ampliarlo en vez de hacerlo a la inversa puede mejorar el diseño de un sitio:
+
+> Los dispositivos móviles requieren que los equipos de desarrollo de software se centren únicamente en los datos y las acciones más importantes de una aplicación. En una pantalla de 320 por 480 pixeles no hay espacio para elementos innecesarios y remanentes. Es necesario jerarquizar.
+
+#### Cómo
+
+Hay muchos recursos sobre el diseño responsivo, incluyendo el [artículo original de Ethan Marcotte](https://alistapart.com/article/responsive-web-design/), una [colección de conceptos importantes](https://snugug.com/musings/principles-responsive-web-design/) sobre el tema, así como libros y conversaciones variadas. Para restringir esta discusión a los aspectos de contenido del diseño responsivo, puede profundizar en el [diseño del primer contenido](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c) y los [diseños responsivos del contenido](https://alistapart.com/article/content-out-layout/). Por último, aunque se centra en los dispositivos móviles, las lecciones de [Siete mitos mortales sobre los dispositivos móviles (Seven Deadly Mobile Myths)](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca), de Josh Clark, son igual de relevantes para las visualizaciones de tamaño reducido de los sitios adaptativos que para los dispositivos móviles.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Ofrece una página personalizada sin conexión a Internet
+
+Cuando los usuarios están desconectados, permanecer en su PWA proporciona una experiencia más continua que volver a la página desconectada del navegador predeterminado.
+
+{% endDetailsSummary %}
+
+Cuando los usuarios están desconectados, permanecer en su PWA proporciona una experiencia más continua que volver a la página desconectada del navegador predeterminado.
+
+#### Por qué
+
+Los usuarios esperan que las aplicaciones instaladas funcionen independientemente de su estado de conexión. Una aplicación específica de la plataforma nunca muestra una página en blanco cuando no tiene conexión, y una Aplicación Web Progresiva nunca debería mostrar la página sin conexión predeterminada del navegador. Al proporcionar una experiencia sin conexión personalizada, ya sea cuando un usuario navega hacia una URL que no se almacenó en la caché o cuando un usuario intenta utilizar una función que requiere una conexión, ayuda a que su experiencia web se sienta como si formara parte del dispositivo en el que se está ejecutando.
+
+#### Cómo
+
+Durante el evento `install` de un service worker, puede almacenar previamente en el caché una página personalizada sin conexión para su uso posterior. Si un usuario se desconecta, puede responder con la página personalizada y desconectada que almacenó previamente. Puede seguir nuestro ejemplo de [página sin conexión personalizada de muestra](https://googlechrome.github.io/samples/service-worker/custom-offline-page/) para ver un ejemplo de esto en acción y para que aprenda a implementarlo usted mismo.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Es instalable
+
+Los usuarios que instalan o agregan aplicaciones a su dispositivo tienden a participar más en ellas.
+
+{% endDetailsSummary %}
+
+Los usuarios que instalan o agregan aplicaciones a su dispositivo tienden a participar más en ellas.
+
+#### Por qué
+
+Al instalar una Aplicación Web Progresiva, esta se ve, se siente y se comporta como todas las demás aplicaciones instaladas. Se ejecuta desde el mismo sitio en el que los usuarios inician sus otras aplicaciones. Se ejecuta en su propia ventana de aplicaciones, separada del navegador, y aparece en la lista de tareas, al igual que otras aplicaciones.
+
+¿Por qué desea que un usuario instale su PWA? Por la misma razón por la que desearía que un usuario instalara su aplicación desde una tienda de aplicaciones. Los usuarios que instalan sus aplicaciones son su audiencia más comprometida, y tienen mejores métricas de participación que los visitantes convencionales, con frecuencia a la par de los usuarios de aplicaciones de los dispositivos móviles. Estas métricas incluyen más repeticiones de visitas, más tiempo en su sitio y mayores tasas de conversión.
+
+#### Cómo
+
+Puede seguir nuestra [guía de instalación](/customize-install/) para aprender cómo hacer que su PWA sea instalable, cómo realizar pruebas para ver que es instalable, e intentar hacerlo usted mismo.
+
+{% endDetails %}
+
+## Lista de verificación óptima de la Aplicación Web Progresiva {: #optimal}
+
+Para crear una Aplicación Web Progresiva realmente buena, que parezca la mejor aplicación de su clase, se necesita algo más que la lista de verificación básica. La lista de verificación de la Aplicación Web Progresiva óptima consiste en hacer que su PWA se sienta como parte del dispositivo en el que se ejecuta, a la vez que aprovecha los aspectos relacionados con la potencia de la web.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Proporciona una experiencia sin conexión a Internet
+
+Donde la conectividad no sea estrictamente necesaria, su aplicación funciona igual sin conexión que en línea.
+
+{% endDetailsSummary %}
+
+Donde la conectividad no sea estrictamente necesaria, su aplicación funciona igual sin conexión que en línea.
+
+#### Por qué
+
+Además de ofrecer una página personalizada sin conexión, los usuarios esperan que las Aplicaciones Web Progresivas se puedan utilizar sin conexión. Por ejemplo, las aplicaciones relacionadas con los viajes y las aerolíneas deberían tener los detalles de los viajes y los pases de abordaje disponibles fácilmente cuando están desconectadas. Las aplicaciones de música, video y podcasting deben permitir la reproducción sin conexión. Las aplicaciones sociales y de noticias deberían almacenarse en el caché de los contenidos recientes para que los usuarios puedan leerlos cuando no estén conectados. Los usuarios también esperan permanecer autentificados cuando no están conectados, así que diseñe la autentificación sin conexión. Una PWA sin conexión le ofrece a los usuarios una experiencia similar a la de una aplicación.
+
+#### Cómo
+
+Después de determinar las características con las que sus usuarios esperan trabajar sin conexión, tendrá que hacer que su contenido esté disponible y se adapte a los contextos sin conexión. Además, puedes utilizar [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb), un sistema de almacenamiento NoSQL dentro del navegador, para almacenar y recuperar datos, y [sincronización en segundo plano](https://developer.chrome.com/blog/background-sync/) para permitir a los usuarios realizar acciones mientras están desconectados y aplazar las comunicaciones con el servidor hasta que el usuario vuelva a tener una conexión estable. También puede utilizar service workers para almacenar otros tipos de contenido, como imágenes, archivos de video y de audio para su uso sin conexión, así como utilizarlos para implementar [sesiones seguras y de larga duración](https://developer.chrome.com/blog/2-cookie-handoff/) para mantener a los usuarios autenticados. Desde el punto de vista de la experiencia del usuario, se pueden utilizar [pantallas esqueleto](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) que ofrezcan a los usuarios una percepción de velocidad y contenido mientras se cargan y que luego puedan recurrir al contenido almacenado en el caché o a un indicador sin conexión, cuando sea necesario.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Es totalmente accesible
+
+Todas las interacciones con los usuarios cumplen los requisitos de accesibilidad del [WCAG 2.0](https://www.w3.org/TR/WCAG20/).
+
+{% endDetailsSummary %}
+
+Todas las interacciones con los usuarios cumplen los requisitos de accesibilidad del [WCAG 2.0](https://www.w3.org/TR/WCAG20/).
+
+#### Por qué
+
+La mayoría de las personas, en algún momento de su vida, querrán aprovechar su PWA de una forma que esté cubierta por los requisitos de accesibilidad [WCAG 2.0](https://www.w3.org/TR/WCAG20/). La capacidad de los humanos para interactuar y comprender su PWA se encuentra en un espectro y las necesidades podrían ser temporales o permanentes. Al hacer que su PWA sea accesible, se asegura de que sea utilizable para todos.
+
+#### Cómo
+
+El documento del W3C titulado [Introducción a la accesibilidad web](https://www.w3.org/WAI/fundamentals/accessibility-intro/) es un buen punto de partida. La mayoría de las pruebas de accesibilidad deben realizarse manualmente. Herramientas como las auditorías de [Accesibilidad](https://developer.chrome.com/docs/lighthouse/accessibility/) en Lighthouse, [axe](https://github.com/dequelabs/axe-core) y las [Perspectivas de accesibilidad](https://accessibilityinsights.io/) pueden ayudarte a automatizar algunas pruebas de accesibilidad. También es importante utilizar elementos semánticamente correctos en vez de recrear esos elementos por su cuenta, por ejemplo, los elementos `a` y `button`. Esto garantiza que, cuando necesite crear una funcionalidad más avanzada, se cumplan las expectativas de accesibilidad (como, por ejemplo, cuando se deben utilizar flechas o pestañas). [A11Y Nutrition Cards](https://accessibilityinsights.io/) tiene excelentes consejos sobre esto para algunos componentes comunes.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Se puede descubrir mediante la búsqueda
+
+Su PWA se puede [descubrir fácilmente mediante la búsqueda](/discoverable/) .
+
+{% endDetailsSummary %}
+
+Su PWA se puede [descubrir fácilmente mediante la búsqueda](/discoverable/) .
+
+#### Por qué
+
+Una de las mayores ventajas de la web es la posibilidad de encontrar sitios y aplicaciones mediante la búsqueda. De hecho, [más de la mitad](https://www.brightedge.com/resources/research-reports/channel_share) del tráfico de un sitio web procede de la búsqueda orgánica. Es fundamental asegurarse de que existen URL canónicas para el contenido y que los motores de búsqueda pueden indexar su sitio para que los usuarios puedan encontrar su PWA. Esto es especialmente cierto cuando se adopta el renderizado del lado del cliente.
+
+#### Cómo
+
+Comience por asegurarse de que cada URL tiene un título y una meta descripción únicos y descriptivos. A continuación, puede utilizar [Google Search Console](https://search.google.com/search-console/about) y las [auditorías de optimización de motores de búsqueda](https://developer.chrome.com/docs/lighthouse/seo/) en Lighthouse para ayudarle a depurar y solucionar los problemas de visibilidad de su PWA. También puede utilizar las herramientas de los webmasters de [Bing](https://www.bing.com/toolbox/webmaster) o [Yandex](https://webmaster.yandex.com/welcome/), y considerar la inclusión de [datos estructurados](https://goo.gle/search-gallery) mediante esquemas de [Schema.org](https://schema.org/) en su PWA.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Funciona con cualquier tipo de entrada
+
+Su PWA se puede utilizar igualmente con un mouse, un teclado, un lápiz óptico o táctil.
+
+{% endDetailsSummary %}
+
+Su PWA se puede utilizar tanto con un mouse como con un teclado, un lápiz óptico o de forma táctil.
+
+#### Por qué
+
+Los dispositivos ofrecen una gran variedad de métodos de entrada, y los usuarios deberían poder cambiar entre ellos sin problemas mientras utilizan su aplicación. También es importante que los métodos de entrada no dependan del tamaño de la pantalla, es decir, que las pantallas grandes deben ser táctiles y las pequeñas deben ser compatibles con teclados y mouse. En la medida de lo posible, asegúrese de que su aplicación y todas sus funciones admitan el uso de cualquier método de entrada que el usuario decida utilizar. Cuando sea apropiado, también deberá mejorar las experiencias para permitir controles específicos de entrada (como pull-to-refresh).
+
+#### Cómo
+
+La [API de eventos de punteros](https://developer.chrome.com/blog/pointer-events/) ofrece una interfaz unificada para trabajar con varias opciones de entrada, y es especialmente buena para agregar soporte para el lápiz óptico. Para soportar tanto el tacto como el teclado, asegúrese de que utiliza los elementos semánticos correctos (anclas, botones, controles para formularios, etc.) y no los reconstruye con HTML no semántico (lo que es bueno para la accesibilidad). Si incorpora interacciones que se activan al pasar el cursor, asegúrese de que también pueden activarse al hacer clic o pulsar.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Ofrece un contexto para las solicitudes de autorización
+
+Cuando solicite permiso para utilizar API potentes, ofrezca un contexto y solicite la autorización solo cuando la API sea necesaria.
+
+{% endDetailsSummary %}
+
+Cuando solicite permiso para utilizar API potentes, ofrezca un contexto y solicite la autorización solo cuando la API sea necesaria.
+
+#### Por qué
+
+Las API que activan una solicitud de autorización, como las notificaciones, la geolocalización y las credenciales, se diseñan intencionalmente para que sean molestas para el usuario, ya que suelen estar relacionadas con una funcionalidad potente que requiere la aceptación. La activación de estos avisos sin un contexto adicional, como durante la carga de la página, hace que los usuarios sean menos propensos a aceptar esos permisos y más propensos a desconfiar de ellos en el futuro. En cambio, solo active estos avisos después de proporcionar una justificación dentro del contexto al usuario de por qué necesita esa autorización.
+
+#### Cómo
+
+Los artículos [Permission UX](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) y [The Right Ways to Ask Users for Permissions](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27) de UX Planet son buenos recursos para comprender cómo diseñar solicitudes de autorización que, aunque se centran en los dispositivos móviles, se aplican a todas las PWA.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Siga las prácticas recomendadas para obtener un código limpio
+
+Mantener una base de código funcional facilita la obtención de los objetivos y la entrega de nuevas funciones.
+
+{% endDetailsSummary %}
+
+Mantener una base de código funcional facilita la obtención de los objetivos y la entrega de nuevas funciones.
+
+#### Por qué
+
+Hay mucho que hacer para crear una aplicación web moderna. Al mantener su aplicación actualizada y su código base funcionando bien, le resultará más fácil ofrecer nuevas funciones que cumplan los objetivos mencionados en esta lista de verificación.
+
+#### Cómo
+
+Hay una serie de verificaciones de alta prioridad para garantizar un código base que funcione bien: evitar el uso de bibliotecas con vulnerabilidades conocidas, asegurarse de que no se utilizan API obsoletas, eliminar los anti-patrones web de su código base (como el uso de `document.write()` o contar con asistentes de eventos de desplazamiento no pasivos), e incluso codificar de forma defensiva para garantizar que su PWA no se estropee si las bibliotecas de análisis o de otros terceros no se cargan. Considere la posibilidad de exigir un análisis de código estático, como el linting, así como pruebas automatizadas, en varios navegadores y canales de lanzamiento. Estas técnicas pueden ayudar a detectar errores antes de que se produzcan.
+
+{% endDetails %}
diff --git a/src/site/content/es/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/es/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
new file mode 100644
index 00000000000..00d3aadbcca
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -0,0 +1,111 @@
+---
+layout: post
+title: Usando una PWA en su aplicación de Android
+authors:
+  - andreban
+date: 2020-03-19
+updated: 2021-12-06
+description: |2
+
+  Cómo abrir una aplicación web progresiva en una aplicación de Android.
+tags:
+  - progressive-web-apps
+---
+
+## Iniciar una PWA en una aplicación de Android
+
+Las [aplicaciones web progresivas](/progressive-web-apps/) (PWA) son aplicaciones web que utilizan características similares a las de una aplicación para crear experiencias de alta calidad que son rápidas, confiables y atractivas.
+
+La web tiene un alcance increíble y ofrece formas poderosas para que los usuarios descubran nuevas experiencias. Pero los usuarios también están acostumbrados a buscar aplicaciones en la tienda de su sistema operativo. En muchos casos, esos usuarios ya están familiarizados con la marca o el servicio que buscan y tienen un alto nivel de intencionalidad que se traduce en métricas de participación superiores a la media.
+
+Play Store es una tienda para aplicaciones de Android y los desarrolladores a menudo quieren abrir sus aplicaciones web progresivas desde sus aplicaciones de Android.
+
+Trusted Web Activity es un estándar abierto que permite a los navegadores ofrecer un contenedor totalmente compatible con la plataforma web que procesa PWA dentro de una aplicación de Android. La función está disponible en [Chrome](https://play.google.com/store/apps/details?id=com.android.chrome) y en desarrollo en [Firefox Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix).
+
+### Las soluciones existentes eran limitadas
+
+Siempre ha sido posible incluir experiencias web en una aplicación de Android, utilizando tecnologías como [Android WebView](https://developer.android.com/reference/android/webkit/WebView) o frameworks como [Cordova](https://cordova.apache.org/).
+
+La limitación de Android WebView es que no está diseñado para reemplazar al navegador. Android WebView es una herramienta de desarrollo para usar la interfaz de usuario web en una aplicación de Android y no da acceso completo a las funciones de la plataforma web moderna, como el [selector de contactos](/contact-picker/) o el [sistema de archivos](/file-system-access/), [entre otras](https://developer.chrome.com/blog/fugu-status/).
+
+Cordova fue diseñado para superar las deficiencias de WebView, pero las API se limitan al entorno de Cordova. Eso significa que necesita mantener una base de código adicional para usar las API de Cordova para su aplicación de Android, separada de su PWA en la web abierta.
+
+Además, la capacidad de detección de funciones a menudo no siempre funciona como se esperaba y los problemas de compatibilidad entre las versiones de Android y los OEM también pueden ser un problema. Cuando se utiliza una de esas soluciones, los desarrolladores necesitan procesos de garantía de calidad agregados e incurren en un costo de desarrollo adicional para detectar y crear soluciones.
+
+### Trusted Web Activity es un nuevo contenedor para aplicaciones web en Android
+
+Los desarrolladores ahora pueden usar un [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/) como un contenedor para incluir una PWA como una actividad de lanzamiento para una aplicación de Android. La tecnología aprovecha el navegador para mostrar la PWA en pantalla completa, lo que garantiza que el Trusted Web Activity tenga la misma compatibilidad con las funciones de la plataforma web y las API que el navegador subyacente. También hay utilerías de código abierto para facilitar aún más la implementación de una aplicación de Android mediante un Trusted Web Activity.
+
+Otra ventaja que no está disponible en otras soluciones es que el contenedor comparte almacenamiento con el navegador. Los estados de inicio de sesión y las preferencias de los usuarios se comparten sin problemas entre las experiencias.
+
+#### Compatibilidad del navegador
+
+La función ha estado disponible en Chrome desde la versión 75, y Firefox la implementó en su versión nocturna.
+
+### Criterios de calidad
+
+Los desarrolladores web deben utilizar un Trusted Web Activity cuando quieran incluir contenido web en una aplicación de Android.
+
+El contenido web en un Trusted Web Activity debe cumplir con los criterios de instalabilidad de PWA.
+
+Además, para que coincida con el comportamiento que los usuarios esperan de las aplicaciones de Android, [Chrome 86 introdujo un cambio](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html) en el que no manejar los siguientes escenarios se considera un fallo fatal:
+
+- No verificar los enlaces de activos digitales al iniciar la aplicación.
+- No devolver HTTP 200 para una solicitud de recursos de red sin conexión.
+- Una solicitud de navegación que devuelva un error HTTP 404 o 5xx.
+
+Cuando ocurre uno de esos escenarios en el Trusted Web Activity, se provoca un fallo fatal visible para el usuario de la aplicación de Android. Consulte la [guía](https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria) sobre cómo manejar esos escenarios en su trabajador de servicio.
+
+La aplicación también debe cumplir con criterios adicionales específicos de Android, como el [cumplimiento de políticas](https://play.google.com/about/developer-content-policy/).
+
+{% Aside 'caution' %} Cuando su aplicación esté diseñada principalmente para niños menores de 13 años, se aplican [políticas adicionales de Play Family](https://play.google.com/about/families/), que pueden ser incompatibles con el uso de Trusted Web Activity. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="Una captura de pantalla que muestra la puntuación de Lighthouse para AirHorn, con la insignia PWA y una puntuación de rendimiento de 100.", width="800", height="141" %}<figcaption> La insignia de PWA en Lighthouse muestra si su PWA pasa los criterios de instalabilidad.</figcaption></figure>
+
+## Herramientas
+
+Los desarrolladores web que quieran aprovechar los Trusted Web Activity no necesitan aprender nuevas tecnologías o APIs para transformar su PWA en una aplicación de Android. Juntos, Bubblewrap y PWABuilder aportan herramientas para los desarrolladores en forma de una biblioteca, interfaz de línea de comandos (CLI) e interfaz gráfica de usuario (GUI).
+
+### Bubblewrap
+
+El [proyecto Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) genera aplicaciones de Android en forma de una biblioteca NodeJS y una interfaz de línea de comandos (CLI).
+
+El arranque de un nuevo proyecto se logra ejecutando la herramienta y pasando la URL del Web Manifest:
+
+```shell
+npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
+```
+
+La herramienta también puede compilar el proyecto y, al ejecutar el siguiente comando, se generará una aplicación de Android lista para cargarse en Play Store:
+
+```shell
+npx @bubblewrap/cli build
+```
+
+Después de ejecutar este comando, un archivo llamado `app-release-signed.apk` estará disponible en el directorio raíz del proyecto. Este es el archivo que se [cargará en Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB).
+
+### PWABuilder
+
+[PWABuilder](https://pwabuilder.com/) ayuda a los desarrolladores a transformar sitios web existentes en aplicaciones web progresivas. También se integra con Bubblewrap para proporcionar una interfaz gráfica de usuario para envolver esas PWA en una aplicación de Android. El equipo de PWABuilder ha elaborado una [excelente publicación en su blog](https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/) sobre cómo generar una aplicación de Android utilizando la herramienta.
+
+## Verificación de la propiedad de la PWA en la aplicación de Android
+
+Un desarrollador que crea una gran aplicación web progresiva no querría que otro desarrollador creara una aplicación de Android con ella sin su permiso. Para asegurarse de que esto no suceda, la aplicación de Android debe emparejarse con la aplicación web progresiva mediante una herramienta llamada [Digital Asset Links](https://developers.google.com/digital-asset-links/v1/getting-started).
+
+Bubblewrap y PWABuilder se encargan de la configuración necesaria en la aplicación de Android, pero queda un último paso, que es agregar el `assetlinks.json` a la PWA.
+
+Para generar este archivo, los desarrolladores necesitan la firma SHA-256 de la clave utilizada para firmar el APK que están descargando los usuarios.
+
+La clave se puede generar de varias maneras, y la forma más fácil de encontrar qué clave firmó el APK que se está entregando a los usuarios finales es descargarla de la propia Play Store.
+
+Para evitar mostrar una aplicación inservible a los usuarios, implemente la aplicación en un [canal de prueba cerrado](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB), instálela en un dispositivo de prueba y luego use la herramienta [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool) para generar el archivo `assetlinks.json` correcto para la aplicación. Haga que el `assetlinks.json` generado esté disponible en `/.well-known/assetlinks.json`, en el dominio que se está validando.
+
+## A donde ir después
+
+Una aplicación web progresiva es una experiencia web de alta calidad. Trusted Web Activity es una nueva forma de abrir esas experiencias de alta calidad desde una aplicación de Android cuando cumplen con los criterios mínimos de calidad.
+
+Si está comenzando con Progressive Web Apps, lea [nuestra guía sobre cómo crear una excelente PWA](/progressive-web-apps/). Para los desarrolladores que ya tienen una PWA, use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) para verificar si cumple con los criterios de calidad.
+
+Luego, use [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) o [PWABuilder](https://pwabuilder.com/) para generar la aplicación de Android, [cargue la aplicación en un canal de prueba cerrado en Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) y combínela con la PWA usando la herramienta [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool).
+
+Finalmente, mueva su aplicación del canal de prueba cerrado a producción.
diff --git a/src/site/content/es/progressive-web-apps/what-are-pwas/index.md b/src/site/content/es/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..7f24a09df2b
--- /dev/null
+++ b/src/site/content/es/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: "¿Qué son las aplicaciones web progresivas?"
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: |2-
+
+  Una introducción a las aplicaciones web progresivas (PWA) y los tres pilares que
+  los separa de otras aplicaciones web.
+tags:
+  - progressive-web-apps
+---
+
+La web es una plataforma increíble. Su combinación de ubicuidad entre dispositivos y sistemas operativos, su modelo de seguridad centrado en el usuario y el hecho de que ni su especificación ni su implementación están controladas por una sola empresa hacen de la web una plataforma única para desarrollar software. Combinado con su capacidad de vinculación inherente, es posible buscar y compartir lo que ha encontrado con cualquier persona, en cualquier lugar. Siempre que visita un sitio web, está actualizado y su experiencia con ese sitio puede ser tan efímera o permanente como desees. Las aplicaciones web pueden llegar a *cualquier persona, en cualquier lugar y con cualquier dispositivo* con una única base de código.
+
+Las aplicaciones específicas de la plataforma son conocidas por ser increíblemente ricas y confiables. Están siempre presentes en las pantallas de inicio, los dock y en las barras de tareas. Funcionan independientemente de la conexión de red. Se lanzan en su propia experiencia independiente. Pueden leer y escribir archivos desde el sistema de archivos local, acceder al hardware conectado a través de un puerto USB o bluetooth, e incluso interactuar con los datos almacenados en su dispositivo, como contactos y eventos del calendario. En estas aplicaciones, puedes hacer cosas como tomar fotografías, ver la reproducción de canciones en la pantalla de inicio o controlar la reproducción de canciones mientras está en otra aplicación. Las aplicaciones específicas de la plataforma se sienten como *parte* del dispositivo en el que se ejecutan.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="Un gráfico que ilustra las capacidades relativas y el alcance de aplicaciones específicas de plataforma con altas capacidades, aplicaciones web con alto alcance, y aplicaciones web progresivas que tienen una gran capacidad y gran alcance.", width="370", height="367" %}<figcaption> Capacidades contra el alcance de aplicaciones específicas de plataforma, aplicaciones web y aplicaciones web progresivas.</figcaption></figure>
+
+Si piensa en aplicaciones web y aplicaciones específicas de plataforma en términos de capacidad y alcance, las aplicaciones específicas de la plataforma representan de mejor manera las capacidades, mientras que las aplicaciones web representan el mejor alcance. Entonces, ¿en dónde encajan las aplicaciones web progresivas?
+
+Las aplicaciones web progresivas (PWA) se crean y se mejoran con API modernas para ofrecer capacidad, confiabilidad e instalación mejoradas mientras llegan a *cualquier persona, en cualquier lugar y con cualquier dispositivo* con una única base de código.
+
+## Los tres pilares de la aplicación
+
+Las aplicaciones web progresivas son aplicaciones web que se han diseñado para que sean capaces, confiables e instalables. Estos tres pilares los transforman en una experiencia que se siente como una aplicación específica de la plataforma.
+
+### Capaces
+
+En la actualidad, la web es bastante capaz. Por ejemplo, se puede crear una aplicación de chat de video enfocado en una localidad utilizando WebRTC, geolocalización y notificaciones push. Puedes hacer que esa aplicación se pueda instalar y convertir esas conversaciones en virtuales con WebGL y WebVR. Con la introducción de Web Assembly, los desarrolladores pueden aprovechar otros ecosistemas, como C, C++ y Rust, y traer también décadas de experiencia y de capacidades a la web. [Squoosh.app](https://squoosh.app/), por ejemplo, aprovecha esto para su compresión de imagen avanzada.
+
+Hasta hace poco, solo las aplicaciones específicas de plataforma podían realmente reclamar estas capacidades. Si bien algunas capacidades aún están fuera del alcance de la web, las API nuevas y futuras buscan cambiar eso, expandiendo lo que la web puede hacer con funciones como acceso al sistema de archivos, controles de medios, credenciales de aplicaciones y soporte completo para el portapapeles. Todas estas capacidades se construyen con el modelo de permisos seguro y centrado en el usuario de la web, lo que garantiza que ir a un sitio web nunca sea una propuesta aterradora para los usuarios.
+
+Entre las API modernas, el Web Assembly y las API nuevas y futuras, las aplicaciones web son más capaces que nunca, y esas capacidades solo están creciendo.
+
+### Confiables
+
+Una aplicación web progresiva confiable se siente rápida y fiable independientemente de la red.
+
+La velocidad es fundamental para que los usuarios *utilicen* tu experiencia. De hecho, a medida que los tiempos de carga de la página van de 1 segundo a 10 segundos, la probabilidad de que un usuario rebote [aumenta en un 123%](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/). El rendimiento no se detiene después del evento de `onload`. Los usuarios nunca deben preguntarse si su interacción (por ejemplo, hacer clic en un botón) se registró o no. El desplazamiento y la animación deben ser fluidos. El rendimiento afecta a toda su experiencia, desde cómo los usuarios perciben su aplicación hasta cómo funciona realmente.
+
+Por último, las aplicaciones fiables deben poder utilizarse independientemente de la conexión de red. Los usuarios esperan a que las aplicaciones se inicien con conexiones de red lentas o inestables o incluso cuando estén desconectadas. Esperan que el contenido más reciente con el que han interactuado, como pistas multimedia o boletos e itinerarios, estén disponibles y se puedan usar incluso si es difícil obtener una consulta en su servidor. Cuando una consulta no es posible, esperan que se les diga que hay problemas en lugar de fallar o bloquearse silenciosamente.
+
+A los usuarios les encantan las aplicaciones que responden a la interacción en un abrir y cerrar de ojos y en una experiencia en la que pueden confiar.
+
+### Instalables
+
+Las aplicaciones web progresivas instaladas se ejecutan en una ventana independiente en lugar de en una pestaña del navegador. Se pueden iniciar desde la pantalla de inicio del usuario, el dock, la barra de tareas o la estantería. Es posible buscarlos en un dispositivo y saltar entre ellos con el conmutador de aplicaciones, haciéndolos sentir como parte del dispositivo en el que están instalados.
+
+Se abren nuevas capacidades después de instalar una aplicación web. Los atajos de teclado que generalmente se reservan cuando se ejecutan en el navegador, se encuentran disponibles. Las aplicaciones web progresivas pueden registrarse para aceptar contenido de otras aplicaciones o para ser la aplicación predeterminada para manejar diferentes tipos de archivos.
+
+Cuando una aplicación web progresiva sale de una pestaña y entra en una ventana de aplicación independiente, transforma la forma en que los usuarios piensan e interactúan con ella.
+
+## Lo mejor de ambos mundos
+
+En el fondo, las aplicaciones web progresivas son solo aplicaciones web. Mediante la mejora progresiva, se habilitan nuevas capacidades en los navegadores modernos. Con los service workers y un manifiesto de la aplicación web, su aplicación web se vuelve confiable e instalable. Si las nuevas capacidades no están disponibles, los usuarios aún obtienen la experiencia principal.
+
+¡Los números no mienten! Las empresas que han lanzado aplicaciones web progresivas han obtenido resultados impresionantes. Por ejemplo, Twitter experimentó un aumento del 65% en las páginas por sesión, un 75% más de tweets y una disminución del 20% en la tasa de rebote, todo mientras reducía el tamaño de su aplicación en más del 97%. Después de cambiar a una PWA, Nikkei vio 2.3 veces más tráfico orgánico, un 58% más de suscripciones y un 49% más de usuarios activos diarios. Hulu reemplazó su experiencia de escritorio específica de la plataforma con una aplicación web progresiva y vio un aumento del 27% en las visitas de retorno.
+
+Las aplicaciones web progresivas nos regalan una oportunidad única de brindar una experiencia web la cual a sus usuarios les encantará. Utilizando las últimas funciones web para brindar capacidades mejoradas y confiabilidad, las aplicaciones web progresivas permiten que *cualquier persona, en cualquier lugar, con cualquier dispositivo* instale lo que haya creado con una única base de código.
diff --git a/src/site/content/es/react/add-manifest-react/index.md b/src/site/content/es/react/add-manifest-react/index.md
new file mode 100644
index 00000000000..c07669d08e5
--- /dev/null
+++ b/src/site/content/es/react/add-manifest-react/index.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: Agrega un manifiesto de aplicación web con Create React App
+subhead: Un manifiesto de aplicación web se incluye de forma predeterminada en Create React App y permite que cualquiera pueda instalar su aplicación React en su dispositivo.
+hero: image/admin/pOjpReVK54kUJP6nZMwn.jpg
+date: 2019-04-29
+updated: 2021-05-19
+description: |2-
+
+  Create React App incluye un manifiesto de aplicación web de forma predeterminada. La modificación de este archivo te permitirá cambiar la forma en que se muestra tu aplicación cuando se instala en el dispositivo del usuario.
+authors:
+  - houssein
+---
+
+{% Aside %} Si no sabes cómo funcionan los archivos de manifiesto de aplicación web, consulta primero la guía [Agregar un manifiesto de aplicación web.](/add-manifest) {% endAside %}
+
+Create React App (CRA) incluye un manifiesto de aplicación web de forma predeterminada. La modificación de este archivo te permitirá cambiar la forma que se muestra tu aplicación cuando se instala en el dispositivo del usuario.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yra3Y2jPf2tS5ELxJdAK.png", alt="A progressive web app icon on a mobile phone's home screen", width="317", height="640" %}</figure>
+
+## ¿Por qué resulta útil?
+
+Los archivos de manifiesto de aplicación web ofrecen la posibilidad de cambiar el aspecto de una aplicación instalada en el escritorio o en el dispositivo móvil del usuario. Al modificar las propiedades en el archivo JSON, puedes modificar una serie de detalles de tu aplicación, incluyendo su:
+
+- Nombre
+- Descripción
+- Icono de la aplicación
+- Color del tema
+
+La [documentación MDN](https://developer.mozilla.org/docs/Web/Manifest) cubre todas las propiedades que se pueden cambiar en detalle.
+
+## Modificar el manifiesto predeterminado
+
+En CRA, un archivo de manifiesto predeterminado, `/public/manifest.json` se incluye automáticamente cuando se crea una nueva aplicación:
+
+```json
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
+```
+
+Esto permite a cualquiera instalar la aplicación en su dispositivo y ver algunos detalles por defecto de la aplicación. El archivo HTML `public/index.html`, también incluye un `<link>` para cargar el manifiesto.
+
+```html
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+```
+
+A continuación, se muestra un ejemplo de una aplicación creada con CRA que tiene un archivo de manifiesto modificado:
+
+{% Glitch {id: 'cra-web-app-manifest-defaut', ruta: 'public / manifest.json', previewSize: 0, height: 480}%}
+
+Para saber si todas las propiedades funcionan correctamente en este ejemplo:
+
+{% Instruction 'preview' %} {% Instruction 'devtools-application' %}
+
+- En el panel de **Aplicación**, haga clic en la pestaña **Manifiesto.**
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IpK9fr3O0zEX1GJXq9mw.png", alt="DevTool's Manifest tab shows the properties from the app manifest file.", width="800", height="695" %}
+
+## Conclusión
+
+1. Si estás creando un sitio que crees que no necesita ser instalado en un dispositivo, elimina el manifiesto y el elemento `<link>` en el archivo HTML que apunta a él.
+2. Si deseas que los usuarios instalen la aplicación en su dispositivo, modifica el archivo de manifiesto (o crea uno si no estás usando CRA) con las propiedades que desees. La [documentación MDN](https://developer.mozilla.org/docs/Web/Manifest) explica todos los atributos obligatorios y opcionales.
diff --git a/src/site/content/es/react/code-splitting-suspense/index.md b/src/site/content/es/react/code-splitting-suspense/index.md
new file mode 100644
index 00000000000..76ccc0c77eb
--- /dev/null
+++ b/src/site/content/es/react/code-splitting-suspense/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: División de código con React.lazy y Suspense
+subhead: |2
+
+  Nunca necesita enviar más código del necesario a sus usuarios, ¡así que divida sus paquetes para asegurarse de que esto nunca suceda!
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
+date: 2019-04-29
+description: |2
+
+  El método React.lazy facilita la división de código de una aplicación React en un
+
+  nivel de componente utilizando importaciones dinámicas. Úselo junto con Suspense para mostrar
+
+  estados de carga apropiados para sus usuarios.
+authors:
+  - houssein
+  - jeffposnick
+feedback:
+  - api
+---
+
+{% Aside %} Si aún no comprende la idea básica detrás de la división de código, consulte primero la guía [Reducir las cargas útiles de JavaScript con la división de código.](/reduce-javascript-payloads-with-code-splitting) {% endAside %}
+
+El **`React.lazy`** facilita la división de código de una aplicación React a nivel de componente mediante importaciones dinámicas.
+
+```jsx
+import React, { lazy } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const DetailsComponent = () => (
+  <div>
+    <AvatarComponent />
+  </div>
+)
+```
+
+## ¿Por qué es útil esto?
+
+Una aplicación React grande generalmente constará de muchos componentes, métodos de utilidad y bibliotecas de terceros. Si no se hace un esfuerzo para intentar cargar diferentes partes de una aplicación solo cuando son necesarias, se enviará un paquete grande de JavaScript a sus usuarios tan pronto como carguen la primera página. Esto puede afectar significativamente el rendimiento de la página.
+
+La `React.lazy` proporciona una forma integrada de separar los componentes de una aplicación en fragmentos separados de JavaScript con muy poco trabajo preliminar. Luego puede encargarse de los estados de carga cuando lo acopla con el componente `Suspense`
+
+## Suspenso
+
+El problema de enviar una gran carga útil de JavaScript a los usuarios es el tiempo que tardaría la página en terminar de cargarse, especialmente en dispositivos y conexiones de red más débiles. Es por eso que la división de código y la carga diferida son extremadamente útiles.
+
+Sin embargo, siempre habrá un ligero retraso que los usuarios tendrán que experimentar cuando se recupere un componente de código dividido a través de la red, por lo que es importante mostrar un estado de carga útil. El uso de `React.lazy` con el **`Suspense`** ayuda a resolver este problema.
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+  </Suspense>
+)
+```
+
+`Suspense` acepta un `fallback` que le permite mostrar cualquier componente de React como un estado de carga. El siguiente ejemplo muestra cómo funciona esto. El avatar solo se procesa cuando se hace clic en el botón, donde se realiza una solicitud para recuperar el código necesario para el `AvatarComponent` suspendido. Mientras tanto, se muestra el componente de carga de reserva.
+
+{% Glitch {
+  id: 'react-lazy-suspense',
+  path: 'src/index.css',
+  height: 480
+} %}
+
+ Aquí, el código que compone `AvatarComponent` es pequeño, por lo que la ruleta de carga solo se muestra durante un corto período de tiempo. Los componentes más grandes pueden tardar mucho más en cargarse, especialmente en conexiones de red débiles.
+
+Para demostrar mejor cómo funciona esto:
+
+{% Instruction 'preview' %}
+{% Instruction 'devtools-network' %}
+- Haga clic en el **menú desplegable Throttling** , que está configurado en **Sin estrangulamiento** de forma predeterminada. Seleccione **3G rápido** .
+- Haga **clic en el botón Haga clic en mí** en la aplicación.
+
+El indicador de carga se mostrará durante más tiempo. Observe cómo todo el código que forma `AvatarComponent` se obtiene como un fragmento separado.
+
+<figure>
+ {% Img src ="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt = "Panel de red de DevTools que muestra un archivo chunk.js que se está descargando", width = "800", height = "478" %}
+</figure>
+
+{% Aside %}
+ Actualmente, React no admite Suspense cuando los componentes se procesan en el lado del servidor. Si está renderizando en el servidor, considere usar otra biblioteca, como [`loadable-components`](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/) que se recomienda en los documentos de React.
+{% endAside %}
+
+## Suspender varios componentes
+
+Otra característica de `Suspense` es que le permite suspender la carga de varios componentes, **incluso si todos tienen carga diferida** .
+
+Por ejemplo:
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+    <InfoComponent />
+    <MoreInfoComponent />
+  </Suspense>
+)
+```
+
+Esta es una forma extremadamente útil de retrasar la representación de varios componentes mientras solo muestra un único estado de carga. Una vez que todos los componentes han terminado de recuperarse, el usuario puede verlos todos mostrados al mismo tiempo.
+
+Puede ver esto con la siguiente inserción:
+
+{% Glitch {id: 'react-lazy-suspense-multiple', ruta: 'src / index.css', altura: 480}%}
+
+{% Aside %} ¿El indicador de carga se muestra demasiado rápido? Intente simular una conexión acelerada en DevTools nuevamente. {% endAside %}
+
+Sin esto, es fácil encontrarse con el problema de la *carga escalonada* , o diferentes partes de una interfaz de usuario que se cargan una tras otra y cada una tiene su propio indicador de carga. Esto puede hacer que la experiencia del usuario se sienta más discordante.
+
+{% Aside %} Aunque el uso de Suspense para dividir componentes ya es posible y facilita la reducción del tamaño de los paquetes, el equipo de React continúa trabajando en más funciones que extenderían esto aún más. La [hoja de ruta de React 16.x](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html) explica esto con más detalle. {% endAside %}
+
+## Manejar fallas de carga
+
+`Suspense` permite mostrar un estado de carga temporal mientras las solicitudes de red se realizan bajo el capó. Pero, ¿qué pasa si esas solicitudes de red fallan por alguna razón? Es posible que esté desconectado o que su aplicación web esté intentando cargar de forma diferida una [URL versionada](/http-cache/#long-lived-caching-for-versioned-urls) que está desactualizada y ya no está disponible después de una redistribución del servidor.
+
+React tiene un patrón estándar para manejar con elegancia estos tipos de fallas de carga: usar un límite de error. Como se describe [en la documentación](https://reactjs.org/docs/error-boundaries.html) , cualquier componente de React puede servir como un límite de error si implementa uno (o ambos) de los métodos del ciclo de vida `static getDerivedStateFromError()` o `componentDidCatch()` .
+
+Para detectar y manejar fallas de carga diferida, puede envolver su `Suspense` con un componente principal que sirva como límite de error. `render()` del límite de error, puede representar los elementos secundarios como están si no hay ningún error, o generar un mensaje de error personalizado si algo sale mal:
+
+```js
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Loading failed! Please reload.</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DetailsComponent = () => (
+  <ErrorBoundary>
+    <Suspense fallback={renderLoader()}>
+      <AvatarComponent />
+      <InfoComponent />
+      <MoreInfoComponent />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+## Conclusión
+
+Si no está seguro de dónde comenzar a aplicar la división de código a su aplicación React, siga estos pasos:
+
+1. Comience en el nivel de la ruta. Las rutas son la forma más sencilla de identificar puntos de su aplicación que se pueden dividir. Los [documentos de React](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting) muestran cómo se puede usar `Suspense` [`react-router`](https://github.com/ReactTraining/react-router) .
+2. Identifique cualquier componente grande en una página de su sitio que solo se muestre en determinadas interacciones del usuario (como hacer clic en un botón). Dividir estos componentes minimizará sus cargas útiles de JavaScript.
+3. Considere dividir cualquier otra cosa que esté fuera de la pantalla y no sea crítica para el usuario.
diff --git a/src/site/content/es/react/code-splitting-with-dynamic-imports-in-nextjs/index.md b/src/site/content/es/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
new file mode 100644
index 00000000000..72cbb551869
--- /dev/null
+++ b/src/site/content/es/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
@@ -0,0 +1,127 @@
+---
+layout: post
+title: División de código con importaciones dinámicas en Next.js
+authors:
+  - mihajlija
+subhead: |2
+
+  Cómo acelerar su aplicación Next.js con división de código y estrategias de carga inteligente.
+date: 2019-11-08
+feedback:
+  - api
+---
+
+## ¿Que aprenderá?
+
+Esta publicación explica diferentes tipos de [división de código](/reduce-javascript-payloads-with-code-splitting/) y cómo usar importaciones dinámicas para acelerar sus aplicaciones Next.js.
+
+## División de código basada en ruta y basada en componente
+
+De forma predeterminada, Next.js divide su JavaScript en partes separadas para cada ruta. Cuando los usuarios cargan su aplicación, Next.js solo envía el código necesario para la ruta inicial. Cuando los usuarios navegan por la aplicación, obtienen los fragmentos asociados con las otras rutas. La división de código basada en rutas minimiza la cantidad de scripts que deben analizarse y compilarse a la vez, lo que da como resultado tiempos de carga de página más rápidos.
+
+Si bien la división de código basada en rutas es un buen valor predeterminado, puede optimizar aún más el proceso de carga con la división de código a nivel de componente. Si tiene componentes grandes en su aplicación, es una buena idea dividirlos en partes separadas. De esa manera, cualquier componente grande que no sea crítico o que solo se procese en determinadas interacciones del usuario (como hacer clic en un botón) puede cargarse de forma diferida.
+
+Next.js admite [dynamic `import()`](https://v8.dev/features/dynamic-import), que le permite importar módulos de JavaScript (incluidos los componentes de React) de forma dinámica y cargar cada importación como un fragmento separado. Esto le brinda división de código a nivel de componente y le permite controlar la carga de recursos para que los usuarios solo descarguen el código que necesitan para la parte del sitio que están viendo. En Next.js, estos componentes se [procesan en el lado del servidor (SSR)](/rendering-on-the-web/) de forma predeterminada.
+
+## Importaciones dinámicas en acción
+
+Esta publicación incluye varias versiones de una aplicación de muestra que consta de una página simple con un botón. Cuando hace clic en el botón, puede ver un lindo cachorro. A medida que avanza por cada versión de la aplicación, verá en qué se diferencian las importaciones dinámicas de las [importaciones estáticas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) y cómo trabajar con ellas.
+
+En la primera versión de la aplicación, el cachorro vive en `components/Puppy.js`. Para mostrar el cachorro en la página, la aplicación importa el componente `Puppy` en `index.js` con una declaración de importación estática:
+
+```js
+import Puppy from "../components/Puppy";
+```
+
+{% Glitch { id: 'static-import', path: 'index.js', previewSize: 0, height: 480 } %}
+
+Para ver cómo Next.js agrupa la aplicación, inspeccione el seguimiento de red en DevTools:
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+{% Instruction 'reload-page', 'ol' %}
+
+Cuando carga la página, todo el código necesario, incluyendo el `Puppy.js`, se agrupa en `index.js`:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6KWlTYFhoIEIGqnuMwlh.png", alt="La pestaña DevTools Network muestra seis archivos JavaScript: index.js, app.js, webpack.js, main.js, 0.js y el archivo dll (biblioteca de vínculos dinámicos).", width="800", height="665" %}</figure>
+
+Cuando presiona el botón **Click me**, solo se agrega la solicitud del JPEG del cachorro a la pestaña **Red**:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7MkXVqnqfIbW74VV48kB.png", alt="Pestaña DevTools Network después de hacer clic en el botón, que muestra los mismos seis archivos JavaScript y una imagen.", width="800", height="665" %}</figure>
+
+La desventaja de este enfoque es que incluso si los usuarios no hacen clic en el botón para ver el cachorro, tienen que cargar el `Puppy` porque está incluido en `index.js`. En este pequeño ejemplo, eso no es gran cosa, pero en aplicaciones del mundo real a menudo es una gran mejora cargar componentes grandes solo cuando es necesario.
+
+Ahora, eche un vistazo a una segunda versión de la aplicación, en la que la importación estática se reemplaza con una importación dinámica. Next.js incluye `next/dynamic`, lo que hace posible usar importaciones dinámicas para cualquier componente en Next:
+
+```js/1,5/0
+import Puppy from "../components/Puppy";
+import dynamic from "next/dynamic";
+
+// ...
+
+const Puppy = dynamic(import("../components/Puppy"));
+```
+
+{% Glitch {id: 'dynamic-import-nextjs', path: 'pages/index.js:29:10', altura: 480 } %}
+
+Siga los pasos del primer ejemplo para inspeccionar el rastreo de la red.
+
+Cuando carga la aplicación por primera vez, solo se descarga `index.js`. Esta vez es 0,5 KB más pequeño (pasó de 37,9 KB a 37,4 KB) porque no incluye el código del componente `Puppy`:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K7Ii3bxUkb37LrZjjWT1.png", alt="DevTools Network muestra los mismos seis archivos JavaScript, excepto que index.js ahora es 0,5 KB más pequeño.", width="800", height="665" %}</figure>
+
+El componente `Puppy` ahora está en un fragmento separado, `1.js`, que se carga solo cuando presiona el botón:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DfVDv5poQmwXwOKmnvd.png", alt="Pestaña DevTools Network después de hacer clic en el botón, que muestra el archivo adicional 1.js y la imagen agregada al final de la lista de archivos.", width="800", height="665" %}</figure>
+
+{% Aside %} De forma predeterminada, Next.js nombra estos fragmentos dinámicos *número*.js, donde el *número* comienza desde 1. {% endAside %}
+
+En las aplicaciones del mundo real, los componentes suelen ser [mucho más grandes](https://bundlephobia.com/result?p=moment@2.24.0) y la carga diferida puede reducir la carga útil de JavaScript inicial en cientos de kilobytes.
+
+## Importaciones dinámicas con indicador de carga personalizado
+
+Cuando carga recursos de forma diferida, es una buena práctica proporcionar un indicador de carga en caso de que haya retrasos. En Next.js, puede hacerlo proporcionando un argumento adicional a la función `dynamic()`:
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  loading: () => <p>Loading...</p>
+});
+```
+
+{% Glitch {id: 'dynamic-import-loading', path: 'pages/index.js:7:27', height: 480 } %}
+
+Para ver el indicador de carga en acción, simule una conexión de red lenta en DevTools:
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+1. En la lista desplegable **Throttling**, seleccione **Fast 3G**.
+
+2. Presione el botón **Click me**.
+
+Ahora, cuando hace clic en el botón, se tarda un poco en cargar el componente y, mientras tanto, la aplicación muestra el mensaje "Cargando…".
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tjlpmwolBVp1jh948Fln.png", alt="Una pantalla oscura con el texto \"Cargando…\".", width="800", height="663" %}</figure>
+
+## Importaciones dinámicas sin SSR
+
+Si necesita procesar un componente solo del lado del cliente (por ejemplo, un widget de chat), puede hacerlo configurando la opción `ssr` en `false`:
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  ssr: false,
+});
+```
+
+{% Glitch {id: 'dynamic-import-no-ssr', path:'pages/index.js: 5: 0', height: 480}%}
+
+## Conclusión
+
+Next.js le brinda división de código a nivel de componente con soporte para importaciones dinámicas, lo que puede minimizar sus cargas útiles de JavaScript y mejorar el tiempo de carga de la aplicación. Todos los componentes se procesan en el lado del servidor de forma predeterminada y puede deshabilitar esta opción siempre que sea necesario.
diff --git a/src/site/content/es/react/index.md b/src/site/content/es/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/es/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/es/react/prerender-with-react-snap/index.md b/src/site/content/es/react/prerender-with-react-snap/index.md
new file mode 100644
index 00000000000..4894274e6d9
--- /dev/null
+++ b/src/site/content/es/react/prerender-with-react-snap/index.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Pre-renderizar rutas con react-snap
+subhead: "¿No desea renderizar en el lado del servidor pero sí acelerar el rendimiento de su sitio React? ¡Pruebe el pre-renderizado!"
+hero: image/admin/LTvlmRgA6MLec9QT4Tsv.jpg
+date: 2019-04-29
+description: 'react-snap es una biblioteca de terceros que pre-renderiza las páginas de su sitio en archivos HTML estáticos. Esto puede mejorar los tiempos de First Paint: Primer Trazado en su aplicación.'
+authors:
+  - houssein
+feedback:
+  - api
+---
+
+[`react-snap`](https://github.com/stereobooster/react-snap) es una biblioteca de terceros que pre-renderiza las páginas de su sitio en archivos HTML estáticos. Esto puede mejorar los tiempos de [First Paint](/user-centric-performance-metrics/#important-metrics-to-measure) en su aplicación.
+
+A continuación, se muestra una comparación de la misma aplicación con y sin pre-renderizado cargada en una conexión 3G simulada y un dispositivo móvil:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t5OiDw1VGxrbqbcxMh3J.gif", alt="Una comparación de carga de lado a lado. La versión que usa el renderizado previo se carga 4.2 segundos más rápido.", width="600", height="435" %}</figure>
+
+{% Aside %} `react-snap` no es la única biblioteca que puede pre-renderizar contenido HTML estático para su aplicación React. [`react-snapshot`](https://github.com/geelen/react-snapshot) es otra alternativa. {% endAside %}
+
+## ¿Por qué es útil esto?
+
+El principal problema de rendimiento con las aplicaciones grandes de una sola página es que el usuario debe esperar a que los paquetes de JavaScript que componen el sitio terminen de descargarse antes de poder ver contenido real. Cuanto más grandes sean los paquetes, más tiempo tendrá que esperar el usuario.
+
+Para resolverlo, muchos desarrolladores adoptan el enfoque de renderizar la aplicación en el servidor en lugar de solo iniciarla en el navegador. Con cada transición de página/ruta, el HTML completo se genera en el servidor y se envía al navegador, lo que reduce los tiempos de First Paint pero tiene el costo de un Time to First Byte: Tiempo hasta el primer byte más lento.
+
+**La pre renderización** es una técnica independiente que es menos compleja que la renderización en servidor, pero también da una forma de mejorar los tiempos de First Paint en su aplicación. Se utiliza un navegador sin encabezado o sin interfaz de usuario para generar archivos HTML estáticos de cada ruta durante el *tiempo de compilación*. Estos archivos se pueden enviar junto con los paquetes de JavaScript necesarios para la aplicación.
+
+## react-snap
+
+`react-snap` usa [Puppeteer](https://github.com/GoogleChrome/puppeteer) para crear archivos HTML pre-renderizados de diferentes rutas en su aplicación. Para comenzar, instálelo como una dependencia de desarrollo:
+
+```bash
+npm install --save-dev react-snap
+```
+
+Luego agregue un script `postbuild` en su  `package.json`:
+
+```json
+"scripts": {
+  //...
+  "postbuild": "react-snap"
+}
+```
+
+Esto ejecutará automáticamente el comando `react-snap` cada vez que se realice una nueva compilación de la aplicación (`npm build`).
+
+{% Aside %} `npm` admite comandos *pre* y *post* para scripts principales y arbitrarios que siempre se ejecutarán directamente antes o después del script original, respectivamente. Puede obtener más información en la [documentación de npm](https://docs.npmjs.com/misc/scripts). {% endAside %}
+
+Lo último que se necesita es cambiar la forma en que se inicia la aplicación. Cambie el archivo `src/index.js` a lo siguiente:
+
+```js/6,8-12/5
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+const rootElement = document.getElementById("root");
+
+if (rootElement.hasChildNodes()) {
+  ReactDOM.hydrate(<App />, rootElement);
+} else {
+  ReactDOM.render(<App />, rootElement);
+}
+```
+
+En lugar de solo usar `ReactDOM.render` para renderizar el elemento React raíz directamente en el DOM, esto verifica si ya hay nodos secundarios presentes para determinar si el contenido HTML fue pre-renderizado (o renderizado en el servidor). Si ese es el caso, se usa en su lugar `ReactDOM.hydrate` para adjuntar escuchas de eventos al HTML ya creado en lugar de crearlo de nuevo.
+
+La creación de la aplicación generará ahora archivos HTML estáticos como cargas útiles para cada ruta rastreada. Puede ver cómo se ve la carga útil HTML haciendo clic en la URL de la solicitud HTML y luego en la pestaña **Vistas previas** dentro de Chrome DevTools.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5U36PBU7H7Boswn5Gfq.png", alt="Una comparación antes y después. La toma de después muestra que el contenido se ha renderizado.", width="800", height="450" %}
+
+{% Aside %} ¡`react-snap` se puede usar para otros frameworks además de React! Esto incluye Vue y Preact. Se pueden encontrar más instrucciones sobre esto en el <a href="https://github.com/stereobooster/react-snap" data-md-type="link">README de `react-snap`</a>. {% endAside %}
+
+## Destello de contenido sin estilo
+
+Aunque el HTML estático ahora se renderiza casi de inmediato, todavía permanece sin estilo de forma predeterminada, lo que puede causar el problema de mostrar un "destello de contenido sin estilo" (FOUC). Esto puede ser especialmente notable si está utilizando una biblioteca CSS-in-JS para generar selectores, ya que el paquete de JavaScript tendrá que terminar de ejecutarse antes de que se pueda aplicar cualquier estilo.
+
+Para ayudar a prevenir esto, el CSS **crítico**, o la cantidad mínima de CSS que se necesita para que se procese la página inicial, se puede incluir directamente en el `<head>` del documento HTML. `react-snap` usa otra biblioteca de terceros internamente, [`minimalcss`](https://github.com/peterbe/minimalcss), para extraer cualquier CSS crítico para diferentes rutas. Puede habilitarlo especificando lo siguiente en su archivo `package.json`:
+
+```json
+"reactSnap": {
+  "inlineCss": true
+}
+```
+
+Al observar la vista previa de respuesta en Chrome DevTools, ahora se mostrará la página con estilo con CSS crítico en línea.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sgxwVZfvpYchXnn1mQrY.png", alt="Una comparación de antes y después. La foto de después muestra que el contenido se ha renderizado y tiene un estilo debido al CSS crítico en línea.", width="800", height="450" %}
+
+{% Aside 'caution' %} La opción `inlineCSS` aún es experimental. Vale la pena revisar bien para asegurarse de que los estilos se estén aplicando correctamente a sus rutas. {% endAside %}
+
+### Conclusión
+
+Si está renderizado rutas del lado del servidor en su aplicación, use `react-snap` para pre-renderizar HTML estático para sus usuarios.
+
+1. Instálelo como una dependencia de desarrollo y comience solo con la configuración predeterminada.
+2. Utilice la opción experimental `inlineCss` para insertar CSS crítico si es lo que su sitio necesita.
+3. Si está utilizando la división de código a nivel de componente dentro de cualquier ruta, tenga cuidado de no pre-renderizarles un estado de carga a sus usuarios. El [README de `react-snap`](https://github.com/stereobooster/react-snap#async-components) cubre esto con más detalle.
diff --git a/src/site/content/es/react/route-prefetching-in-nextjs/index.md b/src/site/content/es/react/route-prefetching-in-nextjs/index.md
new file mode 100644
index 00000000000..d8ecf950dd1
--- /dev/null
+++ b/src/site/content/es/react/route-prefetching-in-nextjs/index.md
@@ -0,0 +1,125 @@
+---
+layout: post
+title: Precarga de rutas en Next.js
+authors:
+  - mihajlija
+subhead: Cómo acelera Next.js la navegación con la precarga de rutas y cómo personalizarla.
+date: 2019-11-08
+updated: 2022-08-12
+feedback:
+  - api
+---
+
+## ¿Que aprenderá?
+
+En esta publicación, aprenderá cómo funciona el enrutamiento en Next.js, cómo está optimizado para la velocidad y cómo personalizarlo para que se adapte mejor a sus necesidades.
+
+## El componente `<Link>`
+
+En [Next.js](https://nextjs.org/), no es necesario configurar el enrutamiento manualmente. Next.js usa un enrutamiento basado en el sistema de archivos, lo que le permite crear archivos y carpetas dentro del directorio `./pages/`:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cwpyvEgBCIbkqrbsbL0.png", alt="Captura de pantalla de un directorio de páginas que contiene tres archivos: index.js, margherita.js y pineapple-pizza.",  width="376", height="348" %}</figure>
+
+Para enlazar a diferentes páginas, use el componente [`<Link>`](https://nextjs.org/docs/api-reference/next/link), de manera similar a como usaría el viejo elemento `<a>`:
+
+```js
+<Link href="/margherita">
+  <a>Margherita</a>
+</Link>
+```
+
+Cuando usa el elemento `<Link>` para la navegación, Next.js hace un poco más por usted. Normalmente, una página se descarga cuando usted sigue un enlace a ella, pero Next.js busca automáticamente el JavaScript necesario para renderizar la página.
+
+Cuando carga una página con algunos enlaces, lo más probable es que cuando siga un enlace, el componente detrás de él ya se haya cargado. Esto mejora la capacidad de respuesta de la aplicación al agilizar la navegación a nuevas páginas.
+
+En la aplicación de ejemplo a continuación, la página `index.js` se enlaza a `margherita.js` con un `<Link>`:
+
+{% Glitch { id: 'nextjs-prefetching', path: 'pages/index.js', height: 480 } %}
+
+Utilice Chrome DevTools para verificar que `margherita.js` se haya precargado: {% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+{% Instruction 'reload-page', 'ol' %}
+
+Cuando usted carga `index.js`, la pestaña **Red** muestra que `margherita.js` se descarga también:
+
+{% Img src="image/admin/ajJKWGvPidRa1nvqzXKL.png", alt="Pestaña DevTools Network con margherita.js resaltado.", width="800", height="639" %}
+
+## Cómo funciona la precarga automática
+
+Next.js precarga solo los enlaces que aparecen en la ventana gráfica y usa la [API observador de intersecciones](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) para detectarlos. También deshabilita la precarga cuando la conexión de red es lenta o cuando los usuarios tienen activada la función [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data). Según estas comprobaciones, Next.js inyecta dinámicamente las etiquetas [`<link rel="preload">`](/preload-critical-assets/) para descargar componentes para navegaciones posteriores.
+
+Next.js solo *lee* JavaScript; no lo ejecuta. De esa manera, no descargará ningún contenido adicional que la página precargada pueda solicitar hasta que visite el enlace.
+
+{% Aside 'caution' %} Los ejemplos de fallas se ejecutan en modo de producción porque la precarga depende de las condiciones de navegación y está habilitada solo en compilaciones de producción optimizadas. Para cambiar al modo de desarrollo, verifique el archivo `README.md` en los ejemplos de Glitch. {% endAside %}
+
+{% Aside %} Debido a que `<link rel="preload">` solicita recursos con prioridad alta, el navegador espera que se utilicen de inmediato, lo que activa las advertencias de la consola. Las [sugerencias de prioridad](/fetch-priority/) pronto estarán disponibles en Chrome, lo que permitirá que Next.js indique una prioridad más baja para los recursos que no se necesitan de inmediato con `<link rel="preload" fetchpriority="low">`. {% endAside %}
+
+## Evite la precarga innecesaria
+
+Para evitar la descarga de contenido innecesario, puede deshabilitar la precarga para las páginas poco visitadas si establece la propiedad `prefetch` en `<Link>` como `false`:
+
+```js
+<Link href="/pineapple-pizza" prefetch={false}>
+  <a>Pineapple pizza</a>
+</Link>
+```
+
+En esta segunda aplicación de ejemplo, la página `index.js` tiene un `<Link>` a `pineapple-pizza.js` con el parámetro `prefetch` establecido en `false`:
+
+{% Glitch { id: 'nextjs-noprefetch', path: 'pages/index.js:12:50', height: 480 } %}
+
+Para inspeccionar la actividad de la red, siga los pasos del primer ejemplo. Cuando carga `index.js` , la pestaña **Red** de DevTools muestra que se descargó  `margherita.js`, pero no `pineapple-pizza.js`:
+
+{% Img src="image/admin/8YTg0ym7vJbQm9oCVQYz.png", alt="Pestaña Red de DevTools con margherita.js resaltado.", width="800", height="639" %}
+
+## Precarga con enrutamiento personalizado
+
+El componente `<Link>` es adecuado para la mayoría de los casos de uso, pero también puede crear su propio componente para realizar el enrutamiento. Next.js se lo facilita con la API de enrutador disponible en [`next/router`](https://nextjs.org/docs/api-reference/next/router#userouter). Si desea hacer algo (por ejemplo, enviar un formulario) antes de navegar hacia una nueva ruta, puede definirlo en su código de ruta personalizado.
+
+Cuando utiliza componentes personalizados para el enrutamiento, también puede agregarles la precarga. Para llevar a cabo la precarga en el código de enrutamiento, utilice el método `prefetch` de `useRouter`.
+
+Échele un vistazo a `components/MyLink.js` en esta aplicación de ejemplo:
+
+{% Glitch { id: 'custom-routing-nextjs', path: 'components/MyLink.js', height: 480 } %}
+
+La precarga se realiza dentro del gancho [`useEffect`](https://reactjs.org/docs/hooks-effect.html). Si la propiedad `prefetch` en un `<MyLink>` se establece en `true`, la ruta especificada en la `href` se precarga cuando se representa ese `<MyLink>`:
+
+```js
+useEffect(() => {
+    if (prefetch) router.prefetch(href)
+});
+```
+
+Cuando hace clic en el enlace, el enrutamiento se realiza en `handleClick`. Se registra un mensaje en la consola y el método `push` navega a la nueva ruta especificada en `href`:
+
+```js
+const handleClick = e => {
+    e.preventDefault();
+    console.log("Having fun with Next.js.");
+    router.push(href);
+};
+
+```
+
+En esta aplicación de ejemplo, la página `index.js` tiene un `<MyLink>` para `margherita.js` y para `pineapple-pizza.js`. La propiedad `prefetch` se establece en `true` para `/margherita` y en `false` para `/pineapple-pizza`.
+
+```js
+<MyLink href="/margherita" title="Margherita" prefetch={true} />
+<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />
+```
+
+Cuando usted carga `index.js`, la pestaña **Red** muestra que `margherita.js` se descarga y `pineapple-pizza.js` no:
+
+{% Img src="image/admin/MWPy8nvBJCnzy4zGVRln.png", alt="Pestaña Red de DevTools con margherita.js resaltado.", width="800", height="639" %}
+
+Al hacer clic en cualquiera de los enlaces, la **Consola** registra "Divertirse con Next.js." y navega a la nueva ruta:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/goiEqi3SIWJBUqsk7j6H.png", alt="La consola DevTools muestra el mensaje 'Divertirse con Next.js.'", width="800", height="690" %}
+
+## Conclusión
+
+Cuando se usa `<Link>`, Next.js busca automáticamente el JavaScript necesario para representar la página enlazada, lo que agiliza la navegación a nuevas páginas. Si está utilizando el enrutamiento personalizado, puede usar la API del enrutador Next.js para implementar la precarga usted mismo. Evite descargar contenido innecesariamente al desactivar la precarga las páginas poco visitadas.
diff --git a/src/site/content/es/react/virtualize-long-lists-react-window/index.md b/src/site/content/es/react/virtualize-long-lists-react-window/index.md
new file mode 100644
index 00000000000..0bda45d8eaf
--- /dev/null
+++ b/src/site/content/es/react/virtualize-long-lists-react-window/index.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: Virtualice listas grandes con react-window
+subhead: |2
+
+  Las tablas y listas supergrandes pueden ralentizar significativamente el rendimiento de su sitio. ¡La virtualización puede ayudar!
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
+date: 2019-04-29
+description: |2
+
+  react-window es una biblioteca que permite renderizar listas grandes de manera eficiente.
+authors:
+  - houssein
+  - developit
+feedback:
+  - api
+---
+
+[`react-window`](https://react-window.now.sh/#/examples/list/fixed-size) es una biblioteca que permite renderizar listas grandes de manera eficiente.
+
+Aquí hay un ejemplo de una lista que contiene 1000 filas que se renderizan con `react-window`. Intente desplazarse sobre ella lo más rápido que pueda.
+
+{% Glitch { id: 'react-window-fixed', path: 'src/App.js', height: 750 } %}
+
+## ¿Por qué es útil esto?
+
+Puede haber ocasiones en las que necesite mostrar una tabla grande o una lista que contenga muchas filas. La carga de cada elemento de una lista de este tipo puede afectar el rendimiento de manera significativa.
+
+**La virtualización de listas**, o "partición de la pantalla en ventanas", es el concepto de renderizar solo lo que es visible para el usuario. El número de elementos que se renderizan al principio es un subconjunto muy pequeño de la lista completa y la "ventana" de contenido visible se *mueve* cuando el usuario continúa desplazándose. Esto mejora tanto el rendimiento de renderizado como el de desplazamiento de la lista.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="Ventana de contenido en una lista virtualizada", width="578", height="525" %} <figcaption> "Ventana" móvil de contenido en una lista virtualizada</figcaption></figure>
+
+Los nodos DOM que salen de la "ventana" se reciclan o se reemplazan inmediatamente con elementos más nuevos a medida que el usuario se desplaza hacia abajo en la lista. Esto mantiene el número de todos los elementos renderizados acorde al tamaño de la ventana.
+
+## react-window
+
+`react-window` es una pequeña biblioteca de terceros que facilita la creación de listas virtualizadas en su aplicación. Ofrece una serie de API base que se pueden utilizar para diferentes tipos de listas y tablas.
+
+### Cuándo usar listas de tamaño fijo
+
+Utilice el `FixedSizeList` si tiene una lista larga y unidimensional de elementos del mismo tamaño.
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const ListComponent = () => (
+  <FixedSizeList
+    height={500}
+    width={500}
+    itemSize={120}
+    itemCount={items.length}
+  >
+    {Row}
+  </FixedSizeList>
+);
+
+export default ListComponent;
+```
+
+- El componente `FixedSizeList` acepta un prop `height`, `width` e `itemSize` para controlar el tamaño de los elementos dentro de la lista.
+- Una función que renderiza las filas se pasa como un hijo a `FixedSizeList`. Se puede acceder a los detalles sobre el elemento en particular con el argumento `index` en (`items[index]`).
+- También se pasa un parámetro `style` al método de renderización de filas que **debe** adjuntarse al elemento de fila. Los elementos de la lista se posicionan absolutamente con sus valores de altura y ancho asignados en línea, y el parámetro `style` es responsable de esto.
+
+{% Aside 'caution' %} No asigne propiedades `height` y `width` a la lista o al elemento de la lista con un archivo CSS externo. Se ignorarían debido al hecho de que estos atributos de estilo se aplican en línea. {% endAside %}
+
+El ejemplo de Glitch mostrado anteriormente en este artículo muestra un ejemplo de un componente `FixedSizeList`.
+
+### Cuándo usar listas de tamaño variable
+
+Utilice el `VariableSizeList` para representar una lista de elementos que tienen diferentes tamaños. Este componente funciona de la misma manera que una lista de tamaño fijo, pero en su lugar espera una función para el prop `itemSize` en vez de un valor específico.
+
+```jsx
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const getItemSize = index => {
+  // return a size for items[index]
+}
+
+const ListComponent = () => (
+  <VariableSizeList
+    height={500}
+    width={500}
+    itemCount={items.length}
+    itemSize={getItemSize}
+  >
+    {Row}
+  </VariableSizeList>
+);
+
+export default ListComponent;
+```
+
+El siguiente ejemplo muestra un uso de este componente.
+
+{% Glitch { id: 'react-window-variable', path: 'src/ListComponent.js', height: 750 } %}
+
+La función de tamaño de elemento pasada al prop `itemSize` aleatoriza las alturas de fila en este ejemplo. Sin embargo, en una aplicación real, debería haber una lógica real que defina los tamaños de cada elemento. Idealmente, estos tamaños deben calcularse en función de los datos o obtenerse de una API.
+
+{% Aside %} Tanto los componentes `FixedSizeList` como los `VariableSizeList` admiten listas horizontales mediante el uso de un prop `layout="horizontal"` prop. Eche un vistazo a la [documentación](https://react-window.now.sh/#/examples/list/fixed-size) para ver un ejemplo. {% endAside %}
+
+### Cuadrículas
+
+`react-window` también ofrece soporte para virtualizar listas multidimensionales o cuadrículas. En este contexto, la "ventana" de contenido visible cambia a medida que el usuario se desplaza horizontal **y** verticalmente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="La ventana móvil de contenido en una cuadrícula virtualizada es bidimensional", width="739", height="516" %}<figcaption> La "ventana" móvil de contenido en una cuadrícula virtualizada es bidimensional</figcaption></figure>
+
+De manera similar, los componentes `FixedSizeGrid` y `VariableSizeGrid` se pueden usar dependiendo de si el tamaño de elementos de lista específicos puede variar.
+
+- Para `FixedSizeGrid`, la API es aproximadamente la misma, pero con el hecho de que las alturas, anchos y conteos de elementos deben representarse tanto para columnas como para filas.
+- Para `VariableSizeGrid`, tanto los anchos de columna como las alturas de fila se pueden cambiar pasando funciones en lugar de valores a sus respectivos props.
+
+Eche un vistazo a la [documentación](https://react-window.now.sh/#/examples/grid/fixed-size) para ver ejemplos de cuadrículas virtualizadas.
+
+{% Aside %} Además de ofrecer los componentes básicos para crear listas y cuadrículas eficientes, `react-window` también proporciona otras capacidades, como desplazarse a un elemento específico o dar un indicador cuando el usuario se desplaza. La [documentación](https://react-window.now.sh/#/examples/list/scrolling-indicators) muestra ejemplos de esto. {% endAside %}
+
+## Carga diferida en el desplazamiento
+
+Muchos sitios web mejoran el rendimiento al esperar a cargar y representar elementos en una lista larga hasta que el usuario se haya desplazado hacia abajo. Esta técnica, comúnmente conocida como "carga infinita", agrega nuevos nodos DOM a la lista a medida que el usuario se desplaza más allá de un cierto umbral cerca del límite. Aunque esto es mejor que cargar todos los elementos de una lista a la vez, todavía termina llenando el DOM con miles de entradas de fila si el usuario se ha desplazado más allá de esa cantidad. Esto puede conducir a un tamaño de DOM excesivamente grande, que comienza a afectar el rendimiento al hacer que los cálculos de estilo y las mutaciones de DOM sean más lentos.
+
+El siguiente diagrama puede ayudar a resumir esto:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="Diferencia en el desplazamiento entre una lista normal y una virtualizada", width="800", height="531" %} <figcaption> Diferencia en el desplazamiento entre una lista regular y una virtualizada</figcaption></figure>
+
+El mejor enfoque para resolver este problema es continuar usando una biblioteca como `react-window` para mantener una pequeña "ventana" de elementos en una página, pero también cargar de forma diferida las entradas más nuevas a medida que el usuario se desplaza hacia abajo. Un paquete separado, `react-window-infinite-loader`, lo hace posible con `react-window`.
+
+Considere el siguiente fragmento de código que muestra un ejemplo de estado que se administra en un componente `App` padre
+
+```jsx
+import React, { Component } from 'react';
+
+import ListComponent from './ListComponent';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [], // instantiate initial list here
+      moreItemsLoading: false,
+      hasNextPage: true
+    };
+
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  loadMore() {
+   // method to fetch newer entries for the list
+  }
+
+  render() {
+    const { items, moreItemsLoading, hasNextPage } = this.state;
+
+    return (
+      <ListComponent
+        items={items}
+        moreItemsLoading={moreItemsLoading}
+        loadMore={this.loadMore}
+        hasNextPage={hasNextPage}
+      />
+    );
+  }
+}
+
+export default App;
+```
+
+Un método `loadMore` se pasa a un `ListComponent` hijo que contiene la lista del cargador infinito. Esto es importante porque el cargador infinito necesita disparar un callback (llamada de vuelta) para cargar más elementos una vez que el usuario ha pasado de cierto punto.
+
+Esta es una forma en puede verse el `ListComponent` que renderiza la lista:
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import InfiniteLoader from "react-window-infinite-loader";
+
+const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
+  const Row = ({ index, style }) => (
+     {/* define the row component using items[index] */}
+  );
+
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={index => index < items.length}
+      itemCount={itemCount}
+      loadMoreItems={loadMore}
+    >
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList
+          height={500}
+          width={500}
+          itemCount={itemCount}
+          itemSize={120}
+          onItemsRendered={onItemsRendered}
+          ref={ref}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+  </InfiniteLoader>
+  )
+};
+
+export default ListComponent;
+```
+
+Aquí, el componente `FixedSizeList` está envuelto dentro del `InfiniteLoader`. Los props asignados al cargador son:
+
+- `isItemLoaded`: método que comprueba si se ha cargado un determinado elemento
+- `itemCount`: número de elementos en la lista (o esperados)
+- `loadMoreItems`: callback que devuelve una promesa que se resuelve en datos adicionales para la lista
+
+Se usa un [prop de renderizado](https://reactjs.org/docs/render-props.html#using-props-other-than-render) para devolver una función que el componente de lista usa para renderizar. Deben pasarse los  atributos `onItemsRendered` y `ref`.
+
+El siguiente es un ejemplo de cómo la carga infinita puede funcionar con una lista virtualizada.
+
+{% Glitch { id: 'react-window-infinite', path: 'src/ListComponent.js', height: 750 } %}
+
+Desplazarse hacia abajo en la lista puede parecer lo mismo, pero ahora se realiza una solicitud para recuperar 10 usuarios de una [API de usuario aleatorio](https://randomuser.me/) cada vez que se desplaza cerca del final de la lista. Todo esto se hace mientras solo se renderiza una única "ventana" de resultados a la vez.
+
+Al verificar el `index` de un elemento determinado, se puede mostrar un estado de carga diferente para un elemento dependiendo de si se ha realizado una solicitud de entradas más nuevas y si el artículo todavía se está cargando.
+
+Por ejemplo:
+
+```js
+const Row = ({ index, style }) => {
+  const itemLoading = index === items.length;
+
+  if (itemLoading) {
+      // return loading state
+  } else {
+      // return item
+  }
+};
+```
+
+## Sobreexploración
+
+Dado que los elementos de una lista virtualizada solo cambian cuando el usuario se desplaza, el espacio en blanco puede parpadear brevemente cuando las entradas más nuevas están a punto de mostrarse. Puede intentar desplazarse rápidamente por cualquiera de los ejemplos anteriores de esta guía para notarlo.
+
+Para mejorar la experiencia del usuario de listas virtualizadas, `react-window` permite sobreexplorar elementos con la propiedad `overscanCount`. Esto le permite definir cuántos elementos fuera de la "ventana" visible se renderizarán en todo momento.
+
+```jsx
+<FixedSizeList
+  //...
+  overscanCount={4}
+>
+  {...}
+</FixedSizeList>
+```
+
+`overscanCount` funciona para los componentes `FixedSizeList` y `VariableSizeList` y tiene un valor predeterminado de 1. Dependiendo del tamaño de la lista y del tamaño de cada elemento, sobreexplorar más de una entrada puede ayudar a prevenir un parpadeo notable de espacio vacío cuando el usuario se desplaza. Sin embargo, sobreexplorar demasiadas entradas puede afectar negativamente al rendimiento. El objetivo de usar una lista virtualizada es minimizar el número de entradas a lo que el usuario puede ver en un momento dado, así que trate de mantener el número de elementos a sobreeexplorar lo más bajo posible.
+
+Para `FixedSizeGrid` y `VariableSizeGrid`, use las propiedades `overscanColumnsCount` y `overscanRowsCount` para controlar el número de columnas y filas a sobreexplorar, respectivamente.
+
+## Conclusión
+
+Si no está seguro de dónde comenzar a virtualizar listas y tablas en su aplicación, siga estos pasos:
+
+1. Mida el rendimiento de renderizado y desplazamiento. Este [artículo](https://addyosmani.com/blog/react-window/) muestra cómo [se puede utilizar el medidor FPS](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second) en Chrome DevTools para explorar la eficiencia con la que se renderizan los elementos en una lista.
+2. Incluya `react-window` para las listas o cuadrículas largas que estén afectando el rendimiento.
+3. Si hay ciertas características que no son compatibles con `react-window`, considere usar [`react-virtualized`](https://github.com/bvaughn/react-virtualized) si no puede agregar esta funcionalidad usted mismo.
+4. Envuelva su lista virtualizada con `react-window-infinite-loader` si necesita cargar elementos de forma diferida mientras el usuario se desplaza.
+5. Utilice la propiedad `overscanCount` para sus listas y las propiedades `overscanColumnsCount` y `overscanRowsCount` en sus cuadrículas para evitar un parpadeo de contenido vacío. No sobreexplore demasiadas entradas, ya que esto afectará negativamente al rendimiento.
diff --git a/src/site/content/es/reliable/http-cache/index.md b/src/site/content/es/reliable/http-cache/index.md
new file mode 100644
index 00000000000..94af8d57bc8
--- /dev/null
+++ b/src/site/content/es/reliable/http-cache/index.md
@@ -0,0 +1,185 @@
+---
+layout: post
+title: Evitar consultas de red innecesarias con HTTP Cache
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-14
+description: |2-
+
+  ¿Cómo se puede evitar consultas de red innecesarias? El HTTP Cache del navegador es tu
+  primera línea de defensa. No es necesariamente el más poderoso o flexible
+  enfoque, y tiene un control limitado sobre la vida útil de las respuestas en caché,
+  pero es efectivo, es compatible con todos los navegadores y no requiere mucho de
+  trabajo.
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+Obtener recursos a través de la red es lento y costoso:
+
+- Las respuestas grandes requieren muchos viajes de ida y vuelta entre el navegador y el servidor.
+- Tu página no se cargará hasta que todos tus [recursos críticos](https://developers.google.com/web/fundamentals/performance/critical-rendering-path) se hayan descargado por completo.
+- Si una persona accede a tu sitio con un plan de datos móviles limitado, cada solicitud de red innecesaria es una pérdida de su dinero.
+
+¿Cómo puedes evitar solicitudes de red innecesarias? El HTTP Cache del navegador es tu primera línea de defensa. No es necesariamente el enfoque más poderoso o flexible, y tiene un control limitado sobre la vida útil de las respuestas almacenadas en caché, pero es efectivo, es compatible con todos los navegadores y no requiere de mucho trabajo.
+
+Esta guía te mostrará los conceptos básicos de una implementación eficaz de almacenamiento del HTTP Cache.
+
+## Compatibilidad con los navegadores {: #browser-compatible }
+
+En realidad, no existe una única API con el nombre de HTTP Cache. Este el nombre general de una colección de API de plataforma web. Esas API son compatibles con todos los navegadores:
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## Cómo funciona HTTP Cache {: #overview }
+
+Todas las solicitudes HTTP que realiza el navegador se enrutan primero al caché del navegador para comprobar si hay una respuesta almacenada en caché que sea valida que se pueda utilizar para cumplir con la solicitud. Si hay una, la respuesta se lee de la caché, lo que elimina tanto la latencia de la red como los costos de datos en los que incurre la transferencia.
+
+El comportamiento del HTTP Cache se controla mediante una combinación de [cabeceras de consulta](https://developer.mozilla.org/docs/Glossary/Request_header) y [cabeceras de respuesta](https://developer.mozilla.org/docs/Glossary/Response_header). En un escenario ideal, tendrás control sobre el código de tu aplicación web (que determinará las cabeceras de consulta) y la configuración de tu servidor web (que determinará las cabeceras de respuesta).
+
+Consulta el artículo de [almacenamiento en HTTP Cache](https://developer.mozilla.org/docs/Web/HTTP/Caching) de MDN para obtener una descripción conceptual más detallada.
+
+## Consulta de cabeceras: utiliza los valores (generalmente) predeterminados {: #request-headers }
+
+Si bien hay una serie de cabeceras importantes que deben incluirse en las solicitudes salientes de tu aplicación web, el navegador casi siempre se encarga de configurarlas en tu nombre cuando realizas solicitudes. Las cabeceras de solicitud que afectan la verificación de la actualización, como [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) y[`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since) solo aparecen según la comprensión del navegador de los valores actuales del HTTP Cache.
+
+Esta es una buena noticia: esto significa que puedes continuar incluyendo etiquetas como `<img src="my-image.png">` en tu HTML, y el navegador se encarga automáticamente del almacenamiento HTTP Cache por ti, sin ningún esfuerzo adicional.
+
+{% Aside %} Los desarrolladores que necesitan más control sobre el HTTP Cache en su aplicación web tienen una alternativa: pueden "bajarse" un nivel y usar manualmente la [API de Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API), pasándole objetos de [`Request`](https://developer.mozilla.org/docs/Web/API/Request) con un conjunto override especifico de [`cache`](https://developer.mozilla.org/docs/Web/API/Request/cache). Sin embargo, eso está más allá del alcance de esta guía. {% endAside %}
+
+## Cabeceras de respuesta: configura tu servidor web {: #response-headers }
+
+La parte de la configuración del almacenamiento del HTTP Cache que más importa son las cabeceras que tu servidor web agrega a cada respuesta que sale. Las siguientes cabeceras influyen en el comportamiento efectivo del almacenamiento en caché:
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control). El servidor puede devolver un `Cache-Control` para especificar cómo, y durante cuánto tiempo, el navegador y otros cachés intermedios, deben almacenar en caché la respuesta individual.
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag). Cuando el navegador encuentra una respuesta en caché caducada, puede enviar un pequeño token (generalmente un hash del contenido del archivo) al servidor para verificar si el archivo ha cambiado. Si el servidor devuelve el mismo token, entonces el archivo es el mismo y no es necesario volver a descargarlo.
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Este encabezado tiene el mismo propósito que `ETag`, pero utiliza una estrategia basada en el tiempo para determinar si un recurso ha cambiado, a diferencia de la estrategia basada en contenido de `ETag`.
+
+Algunos servidores web tienen soporte integrado para configurar esas cabeceras de forma predeterminada, mientras que otros omiten las cabeceras por completo a menos que los configuren explícitamente. Los detalles específicos sobre *cómo* configurar las cabeceras varían mucho según el servidor web que uses y debes consultar la documentación de tu servidor para obtener los detalles más precisos.
+
+Para ahorrarte algunas búsquedas, aquí hay instrucciones sobre cómo configurar algunos servidores web populares:
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Alojamiento de Firebase](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+Al no usar la cabecera de respuesta de `Cache-Control` no se deshabilita el HTTP Cache. En cambio, los navegadores [adivinan con eficacia](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness) qué tipo de comportamiento de almacenamiento en caché tiene más sentido para un tipo de contenido determinado. Lo más probable es que desees más control del que ofrece, así que tómate el tiempo para configurar tus cabeceras de respuesta.
+
+## ¿Qué valores de cabecera de respuesta deberías utilizar? {: #response-header-strategies }
+
+Hay dos escenarios importantes que se deben de cubrir al configurar las cabeceras de respuesta de tu servidor web.
+
+### Almacenamiento en caché de larga duración para URL versionadas {: #versioned-urls }
+
+{% Details %}
+  {% DetailsSummary 'h4' %}
+    Cómo las URL versionadas pueden ayudar a tu estrategia de almacenamiento en caché
+    Las URL versionadas son una buena práctica porque facilitan la invalidación de respuestas almacenadas en caché.
+  {% endDetailsSummary %}
+    Supongamos que tu servidor indica a los navegadores que guarden en caché un archivo CSS durante 1 año (<code>Cache-Control: max-age=31536000</code>) pero tu diseñador acaba de realizar una actualización de emergencia que debe implementarse de inmediato. ¿Cómo notificas a los navegadores que actualicen la copia en caché "obsoleta" del archivo? No puedes, al menos no sin cambiar la URL del recurso. Después de que el navegador almacena en caché la respuesta, la versión en caché se usa hasta que ya no esté actualizada, según lo determinado por <code>max-age</code> o <code>expires</code>, o hasta que se expulse de la caché por alguna otra razón, por ejemplo, el usuario borra la caché de su navegador. Como resultado, diferentes usuarios pueden terminar usando diferentes versiones del archivo cuando se construye la página: los usuarios que acaban de buscar el recurso usan la nueva versión, mientras que los usuarios que almacenaron en caché una copia anterior (pero aún válida) usan una versión anterior de tu respuesta. ¿Cómo se obtiene lo mejor de ambos mundos: almacenamiento en caché del lado del cliente y actualizaciones rápidas? Cambia la URL del recurso y obliga al usuario a descargar la nueva respuesta cada vez que cambia tu contenido. Normalmente, esto se hace incrustando una huella digital del archivo, o un número de versión, en su nombre de archivo, por ejemplo, <code>style.x234dff.css</code>.
+{% endDetails %}
+
+Cuando respondes a solicitudes de URL que contengan "[huellas digitales](https://en.wikipedia.org/wiki/Fingerprint_(computing))" o información de versiones, y cuyo contenido nunca debe cambiar, agrega `Cache-Control: max-age=31536000` a tus respuestas.
+
+Establecer este valor le dice al navegador que cuando necesita cargar la misma URL en cualquier momento durante el próximo año (31,536,000 segundos; el valor máximo admitido), puede usar inmediatamente el valor de la HTTP Cache sin tener que hacer otra solicitud de red para tu servidor web en lo absoluto. Eso es genial: ¡inmediatamente ganaste la confiabilidad y la velocidad que se obtienen al evitar la red!
+
+Las herramientas de compilación como el webpack pueden [automatizar el proceso](https://webpack.js.org/guides/caching/#output-filenames) de asignación de huellas digitales hash a las URL de tus archivos.
+
+{% Aside %} También puedes agregar la [propiedad de `immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading) a tu `Cache-Control` como una optimización adicional, aunque se [ignorará](https://www.keycdn.com/blog/cache-control-immutable#browser-support) en algunos navegadores. {% endAside %}
+
+### Revalidación del servidor para URL sin versión {: #unversioned-urls }
+
+Desafortunadamente, no todas las URL que cargas están versionadas. Tal vez no puedas incluir un paso de compilación antes de implementar tu aplicación web, por lo que no puedes agregar hash a las URL de tus archivos. Y cada aplicación web necesita archivos HTML; esos archivos (¡casi!) nunca incluirán información de versiones, ya que nadie se molestará en usar tu aplicación web si necesita recordar que la URL para visitar es `https://example.com/index.34def12.html`. Entonces, ¿qué puedes hacer por esas URL?
+
+Este es un escenario en el que debes admitir la derrota. El almacenamiento de HTTP Cache por sí solo no es lo suficientemente potente como para evitar la red por completo. (No te preocupes, ya que pronto aprenderás acerca de los [service workers](/service-workers-cache-storage/), que brindarán la ayuda que necesitamos para que la batalla se vuelva a tu favor). Pero hay algunos pasos que puedes seguir para asegurarte de que las solicitudes de red sean tan rápidas y eficiente como sean posibles.
+
+Los siguientes valores de `Cache-Control` pueden ayudarte a ajustar dónde y cómo se almacenan en caché las URL sin versión:
+
+- `no-cache`. Esto le indica al navegador que debe volver a validar con el servidor cada vez antes de usar una versión en caché de la URL.
+- `no-store`. Esto indica al navegador y otras cachés intermedias (como los CDN) que nunca almacenen ninguna versión del archivo.
+- `private`. Los navegadores pueden almacenar en caché el archivo, pero las cachés intermedias no.
+- `public`. La respuesta se puede almacenar en cualquier caché.
+
+Consulta el [Apéndice: Diagrama de flujo del `Cache-Control`](#flowchart) para visualizar el proceso de decisión de qué valor o valores de `Cache-Control` se deben de usar. Ten en cuenta también que `Cache-Control` puede aceptar una lista de directivas separadas por comas. Consulta el <a href="#examples" data-md-type="link">Apéndice: ejemplos de `Cache-Control`</a>.
+
+Junto con eso, configurar una de los dos cabeceras de respuestas adicionales también puede ayudar: tanto como [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) o como [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Como se menciona en las [cabeceras de respuesta](#response-headers), `ETag` y `Last-Modified` ambos tienen el mismo propósito: determinar si el navegador necesita volver a descargar un archivo en caché que ha expirado. `ETag` es el más recomendado porque es más preciso.
+
+{% Details %} {% DetailsSummary 'h4' %} Ejemplo de ETag {% endDetailsSummary %} Supongamos que han pasado 120 segundos desde la búsqueda inicial y el navegador ha iniciado una nueva consulta para el mismo recurso. Primero, el navegador verifica el HTTP Cache y encuentra la respuesta anterior. Desafortunadamente, el navegador no puede usar la respuesta anterior porque la respuesta ya ha expiró. En este punto, el navegador podría enviar una nueva consulta y obtener la nueva respuesta completa. Sin embargo, eso es ineficiente porque si el recurso no ha cambiado, ¡no hay razón para descargar la misma información que ya está en la caché! Ese es el problema que los tokens de validación, como se especifica en el <code>ETag</code>, están diseñados para resolver. El servidor genera y devuelve un token arbitrario, que suele ser un hash o alguna otra huella digital del contenido del archivo. El navegador no necesita saber cómo se genera la huella digital; solo necesita enviarlo al servidor en la próxima solicitud. Si la huella digital sigue siendo la misma, el recurso no ha cambiado y el navegador puede omitir la descarga. {% endDetails %}
+
+Al configurar `ETag` o `Last-Modified`, terminarás haciendo que la solicitud de revalidación sea mucho más eficiente. Estos terminan activando los[`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since) o [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) que se mencionaron en las [cabeceras de solicitud](#request-headers).
+
+Cuando un servidor web configurado correctamente ve esas cabeceras de solicitud entrantes, puedes confirmar si la versión del recurso que el navegador ya tiene en tu HTTP Cache coincide con la última versión en el servidor web. Si hay una coincidencia, el servidor puede responder con una [`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304), que es el equivalente a "¡Oye, sigue usando lo que ya tienes!". Hay muy pocos datos para transferir al enviar este tipo de respuesta, por lo que generalmente es mucho más rápido que tener que enviar una copia del recurso real que se solicita.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="Un diagrama de un cliente que solicita un recurso y el servidor responde con una cabecera 304.", width="474", height="215" %} <figcaption> El navegador solicita <code>/file</code> del servidor e incluye el <code>If-None-Match</code> para indicarle al servidor que solo devuelva el archivo completo si la <code>ETag</code> del archivo en el servidor no coincide con el valor de <code>If-None-Match</code> del navegador. En este caso, los 2 valores coincidieron, por lo que el servidor devuelve una <code>304 Not Modified</code> con instrucciones sobre cuánto tiempo más se debe almacenar en <code>Cache-Control: max-age=120</code> ).</figcaption></figure>
+
+## Resumen {: #summary }
+
+El HTTP Cache es una forma eficaz de mejorar el rendimiento de la carga porque reduce las solicitudes de red innecesarias. Es compatible con todos los navegadores y su configuración no requiere de mucho esfuerzo.
+
+Las siguientes configuraciones de `Cache-Control` son un buen comienzo:
+
+- `Cache-Control: no-cache` para recursos que deben ser revalidados con el servidor antes de cada uso.
+- `Cache-Control: no-store` para recursos que nunca deberían almacenarse en caché.
+- `Cache-Control: max-age=31536000` para recursos versionados.
+
+El `ETag` o `Last-Modified` pueden ayudarte a revalidar los recursos de caché caducados de una manera más eficiente.
+
+{% Aside 'codelab' %} Utiliza el [codelab de HTTP Cache](/codelab-http-cache) para obtener experiencia práctica con `Cache-Control` y `ETag` en Express. {% endAside %}
+
+## Más información {: #learn-more }
+
+Si estás buscando ir más allá de los conceptos básicos del uso del `Cache-Control`, consulta la guía de [prácticas recomendadas de almacenamiento en caché y errores de max-age](https://jakearchibald.com/2016/caching-best-practices/) de Jake Archibald.
+
+Consulta [Amo tu caché](/love-your-cache) para obtener orientación sobre cómo optimizar el uso de tu caché para los visitantes que regresan.
+
+## Apéndice: más sugerencias {: #tips }
+
+Si tienes más tiempo, aquí hay otras formas de optimizar el uso de HTTP Cache:
+
+- Utiliza URL coherentes. Si ofreces el mismo contenido en diferentes URL, ese contenido se buscará y almacenará varias veces.
+- Minimiza la deserción. Si las partes de un recurso (como un archivo CSS) se actualizan con frecuencia, mientras que el resto del archivo no (como el código de la biblioteca), considera dividir el código que se actualiza con frecuencia en un archivo separado y utilizar una estrategia de almacenamiento en caché de corta duración para las actualizaciones de código y una estrategia de larga duración de almacenamiento en caché para el código que no cambia con frecuencia.
+- Consulta la nueva directiva de [`stale-while-revalidate`](/stale-while-revalidate/) si es que se acepta algún grado de obsolescencia en tu política de `Cache-Control`.
+
+## Apéndice: Diagrama de flujo de `Cache-Control`
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="Flowchart", width="595", height="600" %}
+
+## Apéndice: `Cache-Control` {: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Valor de <code>Cache-Control</code>
+</th>
+        <th>Explicación</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>Los navegadores y las cachés intermedias pueden almacenar la respuesta en caché hasta por 1 día (60 segundos x 60 minutos x 24 horas).</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>El navegador puede almacenar en caché la respuesta (pero no en cachés intermediarios) durante un máximo de 10 minutos (60 segundos x 10 minutos).</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>La respuesta se puede almacenar en cualquier caché durante 1 año.</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>La respuesta no puede almacenarse en caché y debe obtenerse en su totalidad en cada solicitud.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/es/reliable/index.md b/src/site/content/es/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/es/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/es/reliable/offline-cookbook/index.md b/src/site/content/es/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..1222875c451
--- /dev/null
+++ b/src/site/content/es/reliable/offline-cookbook/index.md
@@ -0,0 +1,616 @@
+---
+layout: post
+title: Manual de instrucciones paso a paso para trabajar sin conexión
+description: Algunos trucos comunes para hacer que su aplicación funcione sin conexión.
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+Con [Service Worker](/service-workers-cache-storage/) dejamos de intentar resolver la funcionalidad sin conexión y les dimos a los desarrolladores las herramientas para que la resolvieran ellos mismos. Esto permite obtener control sobre el almacenamiento en caché y sobre cómo se manejan las solicitudes. Eso significa que puede crear sus propios patrones. Echemos un vistazo a algunos patrones posibles de forma aislada, pero en la práctica es probable que tenga que usar varios de ellos en conjunto según la URL y el contexto.
+
+Para ver una demostración funcional de algunos de estos patrones, consulte [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) y [este video que](https://www.youtube.com/watch?v=px-J9Ghvcx4) muestra el impacto en el rendimiento.
+
+## La caché: o cuándo almacenar recursos
+
+[Service Worker le](/service-workers-cache-storage/) permite manejar solicitudes independientemente del almacenamiento en caché, por lo que realizaré una demostración por separado. Primero, ¿cuándo se debe llevar a cabo el almacenamiento en caché?
+
+### Al instalar: como dependencia {: #on-install-as-dependency}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="Al instalar, como dependencia", width="800", height="498" %}<figcaption> Al instalar: como dependencia.</figcaption></figure>
+
+Service Worker ofrece un evento `install`. Puede utilizarlo para preparar cosas, como aquellas que deben estar listas antes de manejar otros eventos. Mientras esto ocurre, cualquier versión anterior de su Service Worker continúa ejecutando y sirviendo páginas, por lo que las cosas que haga aquí no interrumpirán nada de eso.
+
+**Ideal para:** CSS, imágenes, fuentes, JS, plantillas … básicamente cualquier cosa que consideres estática para esa "versión" de tu sitio.
+
+Se trata de cosas que harían que su sitio no funcionara en absoluto si no se pueden recuperar, cosas que una aplicación específica de la plataforma equivalente incluiría en la descarga inicial.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil` toma una promesa para definir la duración y el éxito de la instalación. Si la promesa es rechazada, la instalación se considera un error y este Service Worker será abandonado (si se está ejecutando una versión anterior, continuará intacta). `caches.open()` y `cache.addAll()` devuelven promesas. Si alguno de los recursos no se puede recuperar, la ejecución de `cache.addAll()` rechaza la promesa.
+
+En [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/), uso este evento para [almacenar  activos estáticos en caché](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3).
+
+### Al instalar, no como dependencia {: #on-install-not}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="Al instalar, no como dependencia", width="800", height="500" %}<figcaption> Al instalar, no como dependencia.</figcaption></figure>
+
+Esto es similar a lo anterior, pero no retrasará la finalización de la instalación y no hará que la instalación falle si el almacenamiento en caché falla.
+
+**Ideal para:** recursos más grandes que no se necesitan de inmediato, como recursos para niveles posteriores de un juego.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+El ejemplo anterior no pasa `cache.addAll` para los niveles 11–20 a `event.waitUntil`, por lo que incluso si falla, el juego seguirá estando disponible sin conexión. Por supuesto, tendrá que cuidar de la posible ausencia de esos niveles y volver a intentar almacenarlos en caché si no están disponibles.
+
+El Service Worker puede finalizar mientras se descargan los niveles 11 a 20, ya que ha terminado de manejar los eventos, lo que significa que no se almacenarán en caché. En el futuro, la [API de sincronización en segundo plano](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API) se encargará de casos como este y de descargas más grandes, como películas. Actualmente, esa API solo es compatible con las bifurcaciones de Chromium.
+
+### Al activar {: #on-activate}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="Al activar", width="800", height="500" %}<figcaption> Al activar.</figcaption></figure>
+
+**Ideal para:** limpieza y migración.
+
+Una vez que se ha instalado un nuevo Service Worker y no se está utilizando una versión anterior, se activa la nueva y se obtiene un evento `activate`. Debido a que la versión anterior no está disponible, es un buen momento para manejar las [migraciones de esquemas en IndexedDB](/indexeddb-best-practices/) y también eliminar las cachés no utilizadas.
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+Durante la activación, otros eventos, como `fetch` se colocan en una cola, por lo que una activación prolongada podría bloquear la carga de la página. Mantenga su activación lo más escueta posible y úsela solo para cosas que *no podría* hacer mientras la versión anterior estaba activa.
+
+En [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/), lo uso para [eliminar cachés antiguos](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17).
+
+### Cuando el usuario interactúa {: #on-user-interaction}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="Durante la interacción del usuario", width="800", height="222" %}<figcaption> Durante la interacción del usuario.</figcaption></figure>
+
+**Ideal para:** cuando no se puede desconectar todo el sitio y usted decide permitir que el usuario seleccione el contenido que quiere que esté disponible sin conexión. Por ejemplo, un video en algo como YouTube, un artículo en Wikipedia, una galería particular en Flickr.
+
+Proporcione al usuario un botón "Leer más tarde" o "Guardar sin conexión". Cuando haga clic, busque lo que necesita de la red y colóquelo en la caché.
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+La [API de cachés](https://developer.mozilla.org/docs/Web/API/Cache) está disponible tanto en las páginas como en los service workers, lo que significa que no es necesario involucrar a este último para agregar cosas al caché.
+
+### Cuando la red responde {: #on-network-response}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="Cuando la red responde", width="800", height="390" %}<figcaption> Cuando la red responde.</figcaption></figure>
+
+**Ideal para:** recursos que actualizan con frecuencia como la bandeja de entrada de un usuario o el contenido de un artículo. También es útil para contenido no esencial como avatares, pero es necesario usarlo cuidado.
+
+Si una solicitud no coincide con nada en la caché, obténgala de la red, envíela a la página y agréguela al caché al mismo tiempo.
+
+Si hace esto para varios URL, como avatares, deberá tener cuidado de no inflar el almacenamiento de su origen.  Si el usuario necesita recuperar espacio en el disco, no querrá ser el principal candidato. Asegúrese de deshacerse de los elementos de la caché que ya no necesita.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+Para permitir el uso eficiente de la memoria, solo puede leer el cuerpo de una respuesta/solicitud una vez. El código anterior usa [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) para crear copias adicionales que se pueden leer por separado.
+
+En [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/), lo uso para [almacenar imágenes de Flickr en caché](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109).
+
+### Obsoleto-mientras-revalida {: #stale-while-revalidate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="Obsoleto mientras revalida", width ="800", height="388" %}<figcaption> Obsoleto mientras revalida.</figcaption></figure>
+
+**Ideal para:** recursos que actualizan con frecuencia donde tener la última versión no es esencial. Los avatares pueden caer en esta categoría.
+
+Si hay una versión en caché disponible, úsela, pero obtenga una actualización para la próxima vez.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+Esto es muy similar al [stale-while-revalidate](https://www.mnot.net/blog/2007/12/12/stale) del HTTP.
+
+### Al recibir un mensaje push {: #on-push-message }
+
+<figure>{% Img src= "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="Al recibir un mensaje push.", width="800", height="498" %}<figcaption> Al recibir un mensaje push.</figcaption></figure>
+
+[Push API](/push-notifications/) es otra característica construida sobre Service Worker. Esto permite activar al Service Worker en respuesta a un mensaje del servicio de mensajería del sistema operativo. Esto sucede incluso cuando el usuario no tiene una pestaña abierta en su sitio. Solo activa al Service Worker. Solicite permiso para hacer esto desde una página y se enviará una solicitud al usuario.
+
+**Ideal para:** contenido relacionado con una notificación, como un mensaje de chat, una noticia de última hora o un correo electrónico. También para contenido que cambia con poca frecuencia que se beneficia de la sincronización inmediata, como una actualización de la lista de tareas pendientes o una modificación del calendario.
+
+{% YouTube '0i7YdSEQI1w' %}
+
+El resultado final común es una notificación que, cuando se toca, abre / enfoca una página relevante, pero para la cual actualizar las cachés antes de que esto suceda es *extremadamente* importante. Obviamente, el usuario está en línea en el momento de recibir el mensaje push, pero es posible que no lo esté cuando finalmente interactúe con la notificación, por lo que es importante que este contenido esté disponible sin conexión.
+
+Este código actualiza las cachés antes de mostrar una notificación:
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### Al sincronizar en segundo plano {: #on-background-sync }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="Al sincronizar en segundo plano.", width="800", height="219" %}<figcaption> Al sincronizar en segundo plano.</figcaption></figure>
+
+[La sincronización en segundo plano](https://developer.chrome.com/blog/background-sync/) es otra característica construida sobre Service Worker. Le permite solicitar la sincronización de datos en una única instancia o en un intervalo (extremadamente heurístico). Esto sucede incluso cuando el usuario no tiene una pestaña abierta en su sitio. Solo activa al Service Worker. Solicite permiso para hacer esto desde una página y se le enviará una solicitud al usuario.
+
+**Ideal para:** actualizaciones no urgentes, especialmente aquellas que ocurren con tanta regularidad que un mensaje push por actualización sería demasiado para los usuarios, como líneas de tiempo de redes sociales o artículos de noticias.
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## Persistencia en caché {: #cache-persistence }
+
+Su origen tiene una cierta cantidad de espacio libre para hacer lo que quiera. Ese espacio libre se comparte entre todo el almacenamiento de origen: [almacenamiento (local)](https://developer.mozilla.org/docs/Web/API/Storage), [IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB), [acceso al sistema de archivos](/file-system-access/) y, por supuesto, las [cachés](https://developer.mozilla.org/docs/Web/API/Cache).
+
+La cantidad de almacenamiento que recibe no está especificada. Varía según el dispositivo y las condiciones de almacenamiento. Puede averiguar cuánto tiene a través de:
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+Sin embargo, al igual que todo el almacenamiento del navegador, el navegador tiene la libertad de despejar sus datos si el dispositivo está con almacenamiento limitado. Desafortunadamente, el navegador no puede distinguir entre las películas que desea conservar a cualquier costo y el juego que no le importa en lo más mínimo.
+
+[Para solucionar](https://developer.mozilla.org/docs/Web/API/StorageManager) este problema, utilice la interfaz StorageManager:
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+Por supuesto, el usuario debe otorgar permiso. Para ello, utilice la API de permisos.
+
+Hacer que el usuario forme parte de este flujo es importante, ya que ahora podemos esperar que tenga el control de la eliminación. Si su dispositivo se encuentra con almacenamiento limitado y borrar datos no esenciales no lo resuelve, el usuario puede escoger cuáles elementos conservar y cuáles eliminar.
+
+Para que esto funcione, se requiere que los sistemas operativos traten los orígenes "duraderos" como equivalentes a las aplicaciones específicas de la plataforma en sus desgloses del uso de almacenamiento, en lugar de informar el navegador como un solo elemento.
+
+## Sugerencias de servicio: responder a las solicitudes {: #serving-suggestions }
+
+No importa cuantas cosas almacene en caché, el Service Worker no la usará a menos que le indique cuándo y cómo. A continuación, se muestran algunos patrones para manejar solicitudes:
+
+### Solo desde caché {: #cache-only }
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="Solo caché", width="800", height="272" %}<figcaption> Solo caché.</figcaption></figure>
+
+**Ideal para:** cualquier cosa que considere estática para una "versión" particular de su sitio. Debe haberlos almacenado en caché en el evento de instalación, por lo que puede confiar en que estarán allí.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+… aunque no necesita lidar con este caso específico de forma frecuente, [Caché primero y luego de vuelta a la red (Cache, falling back to network)](#cache-falling-back-to-network) lo cubre.
+
+### Solo de la red {: #network-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="Solo red", width="800", height="272" %}<figcaption> Solo red.</figcaption></figure>
+
+**Ideal para:** cosas que no tienen equivalente sin conexión, como pings analíticos, solicitudes que no utilizan GET.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+… aunque no necesita lidar con este caso específico de forma frecuente, [Caché primero y luego de vuelta a la red](#cache-falling-back-to-network) lo cubre.
+
+### Caché primero y luego de vuelta a la red {: #cache-falling-back-to-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="Caché primero y luego de vuelta a la red.", width="800", height="395" %}<figcaption> Caché primero y luego de vuelta a la red.</figcaption></figure>
+
+**Ideal para:** construir primero sin conexión. En tales casos, así es como manejará la mayoría de las solicitudes. Otros patrones serán excepciones basadas en la solicitud entrante.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+Esto le brinda el comportamiento de "solo desde caché" para las cosas en la caché y el comportamiento de "solo de la red" para cualquier cosa que no esté en la caché (que incluye todas las solicitudes que no utilizan GET, ya que no se pueden almacenar en caché).
+
+### Carrera de red de caché {: #cache-and-network-race }
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt = "Carrera de red y caché", width="800", height="427" %}<figcaption> Carrera de red y caché.</figcaption></figure>
+
+**Ideal para:** activos pequeños en los que busca rendimiento en dispositivos con acceso lento al disco.
+
+Con algunas combinaciones de discos duros más antiguos, escáneres de virus y conexiones a Internet más rápidas, obtener recursos de la red puede ser más rápido que ir al disco. Sin embargo, ir a la red cuando el usuario tiene el contenido en su dispositivo puede ser un desperdicio de datos, así que téngalo en cuenta.
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### Red primero, luego vuelta a la caché {: #network-fallling-back-to-cache }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="Red primero, luego vuelta a la caché", width="800", height="388" %}<figcaption> Red primero, luego vuelta a la caché.</figcaption></figure>
+
+**Ideal para:** una solución rápida para recursos que se actualizan con frecuencia, fuera de la "versión" del sitio. Por ejemplo, artículos, avatares, líneas de tiempo de redes sociales y tablas de clasificación de juegos.
+
+Esto significa que les brinda a los usuarios en línea el contenido más actualizado, pero los usuarios sin conexión obtienen una versión más antigua en caché. Si la solicitud de red tiene éxito, lo más probable es que desee [actualizar la entrada de la caché](#on-network-response).
+
+Sin embargo, este método tiene inconvenientes. Si el usuario tiene una conexión lenta o intermitente, tendrá que esperar a que la red falle antes de obtener el contenido perfectamente aceptable en su dispositivo. Esto puede llevar tiempo y proporciona una experiencia de usuario frustrante. Consulte el siguiente patrón, [Caché y luego red (Cache then network)](#cache-then-network), para una mejor solución.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### Caché luego red {: #cache-then-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="Caché luego red", width="800", height="478" %}<figcaption> Caché luego red.</figcaption></figure>
+
+**Ideal para:** contenido que se actualiza con frecuencia. Por ejemplo, artículos, líneas de tiempo de redes sociales y tablas de clasificación de juegos.
+
+Esto requiere que la página realice dos solicitudes, una a la caché y otra a la red. La idea es mostrar primero los datos almacenados en caché y luego actualizar la página cuando lleguen los datos de la red.
+
+A veces, puede simplemente reemplazar los datos actuales cuando llegan nuevos datos (por ejemplo, en tablas de clasificación de juegos), pero eso puede ser problemático con piezas de contenido más grandes. Básicamente, no "desaparezca" algo que el usuario pueda estar leyendo o con lo que esté interactuando.
+
+Twitter agrega el contenido nuevo por encima del contenido anterior y ajusta la posición de desplazamiento para que el usuario no sea interrumpido. Esto es posible porque Twitter principalmente conserva un orden mayoritariamente lineal del contenido. Yo copié este patrón en [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) para que el contenido aparezca en la pantalla lo más rápido posible, mientras muestra el contenido actualizado tan pronto como llega.
+
+**Código en la página:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**Código en el Service Worker:**
+
+Siempre debe ir a la red y actualizar la caché sobre la marcha.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+En [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) pude resolver esto usando [XHR en lugar de fetch](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3), y abusando del encabezado Accept para comunicarle al Service Worker de dónde obtener el resultado ([código de la página](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70), [código del Service Worker](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)).
+
+### Método de respaldo genérico {: #generic-fallback }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="Método de respaldo genérico.", width="800", height="389" %}<figcaption> Método de respaldo genérico.</figcaption></figure>
+
+Si no puede proporcionar algún contenido de la caché o la red, es posible que deba proporcionar un respaldo genérico.
+
+**Ideal para:** imágenes secundarias como avatares, solicitudes POST fallidas y una página de "No disponible sin conexión".
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+Es probable que el elemento al que recurra sea una [dependencia de instalación (install dependency)](#on-install-as-dependency).
+
+Si su página está publicando un correo electrónico, el Service Worker puede recurrir a almacenar el correo electrónico en una 'bandeja de salida' IndexedDB y responder informando a la página que el envío falló, pero que los datos se guardaron correctamente.
+
+### Plantillas del lado del Service Worker {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="Plantillas del lado del Service Worker.", width="800", height="463" %}<figcaption> Plantillas del lado del Service Worker.</figcaption></figure>
+
+**Ideal para:** páginas que no pueden almacenar la respuesta del servidor en caché.
+
+[La representación de páginas en el servidor agiliza](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), pero puede incluir datos de estado que pueden no tener sentido en la caché, por ejemplo, "Conectado como…". Si su página es controlada por un Service Worker, puede optar por solicitar datos JSON junto con una plantilla y representarlos en vez de ello.
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## Poner todo en orden
+
+No está limitado a solo uno de estos métodos. De hecho, es probable que utilice varios de ellos según la URL de la solicitud. Por ejemplo, [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) utiliza:
+
+- [cache on install](#on-install-as-dependency), para la interfaz de usuario estática y el comportamiento
+- [cache on network response](#on-network-response), para las imágenes de Flickr y los datos
+- [fetch from cache, falling back to network](#cache-falling-back-to-network), para la mayoría de las solicitudes
+- [fetch from cache, then network](#cache-then-network), para los resultados de búsqueda de Flickr
+
+Solo verifique la solicitud y decida qué hacer:
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+¿Comprendes, Mendes?
+
+### Creditos
+
+… por los encantadores íconos:
+
+- [Code](http://thenounproject.com/term/code/17547/) de buzzyrobot
+- [Calendar](http://thenounproject.com/term/calendar/4672/) de Scott Lewis
+- [Network](http://thenounproject.com/term/network/12676/) de Ben Rizzo
+- [SD](http://thenounproject.com/term/sd-card/6185/) de Thomas Le Bas
+- [CPU](http://thenounproject.com/term/cpu/72043/) de iconsmind.com
+- [Trash](http://thenounproject.com/term/trash/20538/) de trasnik
+- [Notification](http://thenounproject.com/term/notification/32514/) de @daosme
+- [Layout](http://thenounproject.com/term/layout/36872/) de Mister Pixel
+- [Cloud](http://thenounproject.com/term/cloud/2788/) de P.J. Onori
+
+Y gracias a [Jeff Posnick](https://twitter.com/jeffposnick) por detectar un monte de errores grotescos antes de que hice clic en "publicar".
+
+### Más información
+
+- [Introducción a los Service Workers](/service-workers-cache-storage/)
+- [¿Service Worker está listo?](https://jakearchibald.github.io/isserviceworkerready/): Sigue el estado de implementación en los principales navegadores
+- [Promesas de JavaScript: una introducción](/promises) : guía sobre Promesas
diff --git a/src/site/content/es/reliable/offline-ux-design-guidelines/index.md b/src/site/content/es/reliable/offline-ux-design-guidelines/index.md
new file mode 100644
index 00000000000..9f994a4bfab
--- /dev/null
+++ b/src/site/content/es/reliable/offline-ux-design-guidelines/index.md
@@ -0,0 +1,202 @@
+---
+layout: post
+title: Pautas de diseño UX sin conexión
+subhead: Una guía para diseñar experiencias web para redes lentas y sin conexión.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+date: 2016-11-10
+updated: 2021-05-25
+tags:
+  - progressive-web-apps
+  - ux
+  - network
+  - offline
+---
+
+Este artículo proporciona pautas de diseño sobre cómo crear una gran experiencia tanto en redes lentas y sin conexión.
+
+La calidad de una conexión de red puede verse afectada por varios factores, como:
+
+- Pésima cobertura de un proveedor.
+- Condiciones climáticas extremas.
+- Cortes de energía.
+- Entrar en "zonas muertas" permanentes, como edificios con paredes que bloquean las conexiones de red.
+- Entrar en "zonas muertas" temporales, como cuando viajas en un tren y se atraviesa un túnel.
+- Conexiones a internet dependientes del tiempo, como las de los aeropuertos u hoteles.
+- Prácticas culturales que requieren acceso limitado o nulo a internet en momentos o días específicos.
+
+Tu objetivo es brindar una buena experiencia que reduzca el impacto de los cambios en la conectividad.
+
+## Decide qué mostrar a tus usuarios cuando tengan una mala conexión de red
+
+La primera pregunta que debes hacerte es: ¿cómo se ve el éxito y el fracaso de una conexión de red? Una conexión exitosa es la experiencia en línea normal de tu aplicación. Sin embargo, la falla de una conexión puede ser tanto el estado sin conexión de línea de tu aplicación como el comportamiento de la aplicación cuando hay una red con retraso (lag).
+
+Cuando piensas en el éxito o el fracaso de una conexión de red, debes hacerte estas importantes preguntas de UX:
+
+- ¿Cuánto tiempo esperas para determinar el éxito o el fracaso de una conexión?
+- ¿Qué puedes hacer mientras se determina el éxito o el fracaso?
+- ¿Qué debes hacer en caso de una falla?
+- ¿Cómo le informas al usuario de lo anterior?
+
+### Infórmale a los usuarios de su estado actual y el cambio de estado
+
+Informa al usuario tanto de las acciones que aún puede hacer cuando tiene una falla en la red y del estado actual de la aplicación. Por ejemplo, una notificación podría decir:
+
+> Parece que tienes una mala conexión a la red. ¡No es para preocuparse! Los mensajes se enviarán cuando la red se restaure.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/roxoXuJ9x7qUHFVWMgXZ.png", alt="La aplicación de mensajería emoji de Emojoy que informa al usuario cuando se produce un cambio de estado.", width="335", height="601" %}<figcaption> Informarle al usuario lo antes posible y de la manera más clara cuando se produzca un cambio de estado.</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GvE07BeSsnTyxnRbkZhz.png", alt="La aplicación I/O del 2016 le informa al usuario cuando se produce un cambio de estado.", width="335", height="601" %}<figcaption> La aplicación I/O de Google utilizó un "toast" de material design para que el usuario supiera cuándo estaba desconectado.</figcaption></figure>
+
+### Infórmale a los usuarios cuando la conexión de red mejore o se restablezca
+
+La forma en que le informas al usuario que su conexión de red ha mejorado depende de tu aplicación. Las aplicaciones como una del mercado de valores que priorizan la información actual, deben actualizarse automáticamente y notificar al usuario lo antes posible.
+
+Se recomienda que le informes al usuario que tu aplicación web se ha actualizado "en segundo plano" mediante el uso de una señal visual como, por ejemplo, un elemento de toast de material design. Esto implica detectar tanto la presencia de un service worker como una actualización de tu contenido administrado. Puedes ver un ejemplo de código de esta <a href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">función en acción aquí</a>.
+
+Un ejemplo de esto sería el [Chrome Platform Status](https://chromestatus.com), que publica una nota para el usuario cuando se actualiza la aplicación.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ikam7evJEVSicAnVxvWA.png", alt="Una aplicación meteorológica de ejemplo", width="324", height="598" %}<figcaption> Algunas aplicaciones, como la aplicación del tiempo, deben actualizarse automáticamente, ya que los datos antiguos no son útiles.</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5TtIkRCPsuxAOajX8LPF.png", alt="El Chrome Status usa un toast", width="336", height="598" %}<figcaption> Las aplicaciones como Chrome Status le permiten al usuario saber cuándo se ha actualizado el contenido a través de una notificación del tipo toast.</figcaption></figure>
+
+También puedes mostrar, en todo momento, la última vez que se actualizó la aplicación en un espacio prominente. Por ejemplo, esto sería útil para una aplicación de conversión de moneda.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nK4V7aUvmLvaNJgF1S2I.png", alt="La aplicación Material Money está desactualizada", width="324", height="598" %}<figcaption> Tasas de caché de Material Money ...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wqaFuHzeAC2wR0D3pt7R.png", alt="Material Money se ha actualizado", width="324", height="598" %} <figcaption> …y notifica al usuario cuando la aplicación se ha actualizado.</figcaption></figure>
+
+Las aplicaciones, como las de noticias, pueden mostrar una simple notificación de "toque aquí para actualizar" que informa al usuario sobre el nuevo contenido. La actualización automática haría que los usuarios perdieran su posición.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="Una aplicación de noticias como ejemplo, Tailpiece en su estado normal", width="360", height="665" %}}<figcaption> Tailpiece, un periódico en línea, descargará automáticamente las últimas noticias...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WNIMNF14cSF29fntl1Lc.png", alt="Ejemplo de aplicación de noticias, Tailpiece cuando esté listo para actualizarse", width="360", height="665" %} {figcaption0 …pero permite a los usuarios actualizar manualmente para que no pierdan su posición en un artículo.</figure>
+
+### Actualizar la interfaz de usuario para reflejar el estado contextual actual
+
+Cada bit de la interfaz de usuario puede tener su propio contexto y funcionalidad que cambiarán dependiendo de si requiere una conexión exitosa. Un ejemplo sería un sitio de comercio electrónico que se puede navegar sin conexión. El botón de comprar y el precio estarán desactivados hasta que se restablezca la conexión.
+
+Otras formas de estados contextuales podrían incluir datos. Por ejemplo, la aplicación financiera Robinhood permite a los usuarios comprar acciones y utiliza colores y gráficos para notificar al usuario cuando el mercado está abierto. Toda la interfaz se vuelve blanca para luego volverse gris cuando el mercado cierra. Cuando el valor de las acciones aumenta o disminuye, cada widget de acciones individual se vuelve verde o rojo según su estado.
+
+### Educa al usuario para que comprenda qué es el modelo sin conexión
+
+Offline es un nuevo modelo mental para todos. Debes de educar a tus usuarios sobre los cambios que ocurrirán cuando no tengan una conexión. Informa a tus usuarios en dónde se guardan los datos grandes y bríndales la configuración para cambiar el comportamiento predeterminado. Asegúrate de utilizar varios componentes de diseño de la interfaz de usuario, como lenguaje informativo, iconos, notificaciones, color e imágenes para transmitir estas ideas de forma colectiva, en lugar de depender de una única opción de diseño, como un icono por sí solo para que se encargue de todo.
+
+## Proporciona una experiencia sin conexión de forma predeterminada
+
+Si tu aplicación no requiere de muchos datos, entonces almacena esos datos en caché de forma predeterminada. Los usuarios pueden sentirse cada vez más frustrados si solo pueden acceder a sus datos con una conexión de red. Intenta que la experiencia sea lo más estable posible. Una conexión inestable hará que tu aplicación se sienta poco confiable, mientras que una aplicación que reduce el impacto de una falla en la red se sentirá mágica para el usuario.
+
+Los sitios de noticias podrían beneficiarse de la descarga automática y el guardado automático de las últimas noticias para que un usuario pueda leer las noticias de hoy sin una conexión, tal vez descargando el texto sin las imágenes del artículo. Además, adáptate al comportamiento del usuario. Por ejemplo, si la sección de deportes es lo que ven normalmente, conviértelo en la descarga prioritaria.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M39yiHQYpXacVII6d7zX.png", alt="Tailpiece le informa al usuario que está desconectado mediante varios widgets de diseño", width="360", height="665" %} <figcaption> Si el dispositivo se encuentra sin conexión, Tailpiece notificará al usuario con un mensaje de estado...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KpkzjYNoCWquWKXTvM28.png", alt="Tailpiece tiene un indicador visual que muestra qué secciones están listas para ser usadas sin conexión.", width="360", height="665" %} <figcaption> …haciéndoles saber que, al menos parcialmente, todavía pueden usar la aplicación.</figcaption></figure>
+
+{% Aside %} Cuando se trata de comunicar el estado de una aplicación, decir que "La red está inactiva" envía el mensaje de que la red de la aplicación está experimentando problemas, mientras que "Estás desconectado" le aclara al usuario que el problema se encuentra de su lado. {% endAside %}
+
+## Infórmale al usuario cuando la aplicación esté lista para su uso sin conexión
+
+Cuando una aplicación web se carga por primera vez, debe de indicarle al usuario si está lista para su uso sin conexión. Haz esto con un [widget que proporcione información breve](https://material.io/components/snackbars) sobre una operación a través de un mensaje en la parte inferior de la pantalla, como, por ejemplo, cuando se sincronizó una sección o se descargó un archivo de datos.
+
+De nuevo, piensa en el lenguaje que estás utilizando para asegurarte de que sea adecuado para tu audiencia. Asegúrate de que el mensaje sea el mismo en todos los casos en los que se utilice. El término sin conexión generalmente es mal entendido por una audiencia no técnica, por lo tanto, usa un lenguaje basado en acciones con el que tu audiencia pueda relacionarse.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fNOute6xBzFcDUNMeXDe.png", alt="Aplicación I/O sin conexión", width="360", height="664" %}<figcaption> La aplicación  I/O 2016 de Google notifica al usuario cuando la aplicación está lista para su uso sin conexión...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Od6jUnazP8n7CMe18G2C.png", alt="El sitio de Chrome Status está sin conexión", width="360", height="664" %} …y también lo hace el sitio de Chrome Platform Status, que incluye información sobre el almacenamiento ocupado.</figure>
+
+### Haz que 'guardar para usar sin conexión' una parte obvia de la interfaz para aplicaciones con gran cantidad de datos
+
+Si una aplicación usa grandes cantidades de datos, asegúrate de que haya un interruptor o pin para agregar un elemento para uso sin conexión en lugar de descargarlo automáticamente, a menos que un usuario haya solicitado específicamente este comportamiento a través de un menú de configuración. Asegúrate de que el pin o la interfaz de usuario de descarga no esté oculta por otros elementos de la interfaz de usuario y que la función sea obvia para el usuario.
+
+Un ejemplo sería un reproductor de música que requiere grandes archivos de datos. El usuario conoce el costo de los datos asociados, pero también puede querer usar el reproductor sin conexión. La descarga de música para su uso posterior requiere que el usuario planifique con anticipación, por lo que es posible que se requiera educación al respecto durante la incorporación.
+
+### Se claro con lo que está disponible sin conexión
+
+Debes de ser claro en cuanto a la opción que ofreces. Es posible que debas de mostrar una pestaña o configuración que muestre una "biblioteca sin conexión" o un [índice de contenido](/content-indexing-api/), para que el usuario pueda ver fácilmente lo que ha almacenado en su teléfono y lo que debe guardarse. Asegúrate de que la configuración sea concisa y ten claro dónde se almacenarán los datos y quién tiene acceso a ellos.
+
+### Muestra el costo real de una acción
+
+Muchos usuarios hacen una equivalencia de la capacidad sin conexión con la "descarga". Los usuarios de países donde las conexiones de red fallan o no están disponibles a menudo comparten contenido con otros usuarios o guardan contenido para usarlo sin conexión cuando tienen conectividad.
+
+Los usuarios de planes de datos pueden evitar descargar archivos grandes por temor al costo, por lo que es posible que también desees mostrar un costo asociado para que los usuarios puedan realizar una comparación activa para un archivo o tarea específica. Por ejemplo, si la aplicación de música anterior pudiera detectar si el usuario está en un plan de datos y mostrar el tamaño del archivo para que los usuarios puedan ver el costo de un archivo.
+
+### Ayuda a prevenir experiencias hackeadas
+
+A menudo, los usuarios hackean una experiencia sin darse cuenta de que lo están haciendo. Por ejemplo, antes de las aplicaciones web que compartían archivos basados en la nube, era común que los usuarios guardaran archivos grandes y los adjuntaran a los correos electrónicos para poder continuar con la edición desde un dispositivo diferente. Es importante no dejarse llevar por su experiencia hackeada, sino más bien mirar lo que están tratando de lograr. En otras palabras, en lugar de pensar en cómo hacer que sea más fácil adjuntar un archivo grande, resuelve el problema de compartir grandes archivos entre diferentes dispositivos.
+
+## Haz que las experiencias sean transferibles de un dispositivo a otro
+
+Cuando creas para redes inestables, intenta sincronizar tan pronto como mejore la conexión para que la experiencia sea transferible. Por ejemplo, imagina que una aplicación de viajes que pierde una conexión de red a mitad de una reserva. Cuando se restablece la conexión, la aplicación se sincroniza con la cuenta del usuario, lo que le permite continuar con la reserva en su dispositivo de escritorio. No poder transferir experiencias puede resultar increíblemente irritante para los usuarios.
+
+Infórmale al usuario del estado actual de sus datos. Por ejemplo, puedes mostrar si la aplicación se ha sincronizado. Edúcalos siempre que sea posible, pero trata de no sobrecargarlos con mensajes.
+
+## Crea experiencias de diseño inclusivas
+
+Al diseñar, busca ser inclusivo al proporcionar dispositivos de diseño significativos, lenguaje simple, iconografía estándar e imágenes significativas que guiarán al usuario para completar la acción o tarea en lugar de obstaculizar su progreso.
+
+### Utiliza un lenguaje simple y conciso
+
+Una buena experiencia de usuario no se trata solo de una interfaz bien diseñada. Incluye la ruta que toma un usuario, así como las palabras utilizadas en la aplicación. Evita la jerga tecnológica al explicar el estado de la aplicación o los componentes individuales de la interfaz de usuario. Ten en cuenta que es posible que la frase "aplicación sin conexión" no transmita al usuario el estado actual de la aplicación.
+
+<div class="switcher">{% Compare 'worse' %}<figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MaYiuInHsZ2mbPQcbD4l.png", alt="Un icono de service worker es un mal ejemplo", width="350", height="149" %}<figcaption> Evita usar términos que no sean entendibles para usuarios no técnicos.</figcaption></figure> {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html">
+<figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIjYKLFK5DbrDJDJeDqu.png", alt="Un icono de descarga es un buen ejemplo", width="350", height="149" %} <figcaption> Utiliza lenguaje e imágenes que describan la acción.</figcaption></figure> {% endCompare %}</div>
+
+### Utiliza varios dispositivos de diseño para crear experiencias de usuario accesibles
+
+Utiliza lenguaje, color y componentes visuales para demostrar un cambio de estado o estado actual. El uso exclusivo del color para demostrar el estado puede no ser notado por el usuario y puede ser inaccesible para los usuarios que padecen discapacidades visuales. Además, el instinto de los diseñadores es usar la interfaz de usuario en gris para representar el estado sin conexión, pero esto puede tener distintos significados en la web. La interfaz de usuario en gris, como los elementos de entrada en un formulario, también significa que un elemento está deshabilitado. Esto puede causar confusión si *solo* usa color para representar el estado.
+
+Para evitar malentendidos, expresa diferentes estados al usuario de varias formas, por ejemplo, con colores, etiquetas y componentes de la interfaz de usuario.
+
+<div class="switcher">{% Compare 'worse' %}<figure style="display: inline-block; max-width: 45%;">  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uj28SN1ZepiIvya4YTe1.png", alt="Un mal ejemplo usando color.", width="720", height="368" %} <figcaption> Utiliza el color como único medio para describir lo que está sucediendo.</figcaption></figure> {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html">
+<figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/s78eC2GBEkDQouqhBYMO.png", alt="Un buen ejemplo que usa color y texto para mostrar un error.", width="720", height="368" %} <figcaption> Utiliza una combinación de elementos de diseño para transmitir tu significado.</figcaption></figure> {% endCompare %}</div>
+
+### Usa íconos que transmitan significado
+
+Asegúrate de que la información se transmita correctamente con etiquetas de texto significativas y con iconos. Los iconos por sí solos pueden ser problemáticos dado que el concepto de sin conexión en la web es relativamente nuevo. Los usuarios pueden malinterpretar los iconos utilizados si solo están ellos. Por ejemplo, usar un disquete para guardar tiene sentido para una generación mayor, pero los usuarios jóvenes que nunca han visto un disquete pueden confundirse con la metáfora. Del mismo modo, se sabe que el icono del menú "hamburguesa" confunde a los usuarios cuando se presenta sin una etiqueta.
+
+Al introducir un icono sin conexión, intenta mantener la coherencia con los elementos visuales estándar de la industria (cuando estos existan), además de proporcionar una etiqueta de texto y una descripción. Por ejemplo, guardar sin conexión puede ser un ícono de descarga típico o tal vez, si la acción implica sincronizar, podría ser un ícono de sincronización. Algunas acciones pueden interpretarse como guardar sin conexión en lugar de demostrar el estado de una red. Piensa en la acción que está tratando de transmitir en lugar de presentar al usuario un concepto abstracto. Por ejemplo, guardar o descargar datos se basaría en acciones.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/h2FFD3nLIOdSzWg5H5kO.png", alt="Varios ejemplos de íconos que transmiten el significado de sin conexión", width="700", height="299" %}
+
+Sin conexión puede significar varias cosas según el contexto, como descargar, exportar, anclar, etc. Para más inspiración, consulta el [conjunto de iconos de Material Design](https://material.io/resources/icons/).
+
+### Utiliza diseños de esqueleto con otros mecanismos de retroalimentación
+
+Un diseño de esqueleto (skeleton layout) es esencialmente una versión de un wireframe de tu aplicación que se muestra mientras se carga el contenido. Esto ayuda a demostrarle al usuario que el contenido está a punto de cargarse. Considera también usar una interfaz de usuario de preloader, con una etiqueta de texto que informe al usuario que la aplicación se está cargando. Un ejemplo sería pulsar el contenido del wireframe, dando a la aplicación la sensación de que está viva y cargándose. Esto le asegura al usuario que algo está sucediendo y ayuda a prevenir reenvíos o actualizaciones de tu aplicación.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUIrcbblhHe5YPSrrwRy.png", alt="Un ejemplo de diseño de esqueleto", width="360", height="665" %} <figcaption> El diseño del marcador de posición de esqueleto se muestra durante la descarga del artículo...</figcaption></figure><figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="Un ejemplo de artículo cargado", width="360", height="665" %} <figcaption> …que se reemplaza con el contenido real una vez que finaliza la descarga.</figcaption></figure>
+
+### No bloquees el contenido
+
+En algunas aplicaciones, un usuario puede desencadenar una acción como la creación de un nuevo documento. Algunas aplicaciones intentarán conectarse a un servidor para sincronizar el nuevo documento y, para demostrarlo, mostrarán un diálogo modal de carga intrusivo que cubre toda la pantalla. Esto puede funcionar bien si el usuario tiene una conexión de red estable, pero si la red es inestable, no podrá escapar de esta acción y la interfaz de usuario le impide hacer cualquier otra cosa. Deben evitarse las solicitudes de red que bloqueen el contenido. Permite que el usuario continúe navegando por tu aplicación y coloca en cola las tareas que se realizarán y sincronizarán una vez que la conexión haya mejorado.
+
+Demuestra el estado de una acción proporcionando comentarios a tus usuarios. Por ejemplo, si un usuario está editando un documento, considera cambiar el diseño de comentarios para que sea visiblemente diferente de cuando esté en línea, pero aún muestra que su archivo fue "guardado" y se sincronizará cuando tenga una conexión de red. Esto educará al usuario sobre los diferentes estados disponibles y le asegurará que su tarea o acción ha sido almacenada. Esto tiene el beneficio adicional de que el usuario se vuelve más seguro al usar su aplicación.
+
+## Diseño para los próximos mil millones
+
+En muchas regiones, los dispositivos de gama baja son comunes, la conectividad no es confiable y, para muchos usuarios, los datos son muy costosos. Deberás ganarte la confianza de los usuarios siendo transparente y honesto con los datos. Piensa en formas de ayudar a los usuarios con pésimas conexiones y simplifica la interfaz para ayudar a acelerar las tareas. Intenta siempre preguntar a los usuarios antes de descargar contenido grande que consuma muchos datos.
+
+Ofrece opciones de bajo ancho de banda para usuarios con conexiones con retraso. Entonces, si la conexión de red es lenta, proporciona pequeños assets. Ofrece una opción para elegir assets de alta o baja calidad.
+
+## Conclusión
+
+La educación es clave para la UX sin conexión ya que los usuarios no están familiarizados con estos conceptos. Intenta crear asociaciones con cosas que te sean familiares, por ejemplo, descargar para un uso posterior es lo mismo que desconectar datos.
+
+Al diseñar para conexiones de redes inestables, recuerda estas directrices:
+
+- Piensa en cómo diseñas para el éxito, el fracaso y la inestabilidad de una conexión de red.
+- Los datos pueden ser costosos, así que debes de ser considerado con el usuario.
+- Para la mayoría de los usuarios de todo el mundo, el entorno tecnológico es casi exclusivamente móvil.
+- Los dispositivos de gama baja son comunes, con almacenamiento, memoria y potencia de procesamiento limitados, pantallas pequeñas y una calidad de pantalla táctil inferior. Asegúrate de que el rendimiento sea parte de tu proceso de diseño.
+- Permite que los usuarios naveguen por tu aplicación cuando estén desconectados.
+- Informar a los usuarios de su estado actual y de los cambios de estado.
+- Intenta proporcionar sin conexión de forma predeterminada si tu aplicación no requiere de muchos datos.
+- Si la aplicación tiene muchos datos, instruye a los usuarios sobre cómo pueden descargarla para usarla sin conexión.
+- Haz que las experiencias sean transferibles entre dispositivos.
+- Utiliza el lenguaje, los iconos, las imágenes, la tipografía y el color para expresarle ideas al usuario de forma colectiva.
+- Brinda tranquilidad y retroalimentación para ayudar al usuario.
diff --git a/src/site/content/es/reliable/service-worker-caching-and-http-caching/index.md b/src/site/content/es/reliable/service-worker-caching-and-http-caching/index.md
new file mode 100644
index 00000000000..a5c3da79391
--- /dev/null
+++ b/src/site/content/es/reliable/service-worker-caching-and-http-caching/index.md
@@ -0,0 +1,272 @@
+---
+layout: post
+title: Almacenamiento en caché del service worker y almacenamiento en caché HTTP
+subhead: Las ventajas y las desventajas de utilizar una lógica de caducidad diferente o coherente en todo el caché del service worker y en las capas de caché HTTP.
+authors:
+  - jonchen
+date: 2020-07-17
+description: Las ventajas y las desventajas de utilizar una lógica de caducidad diferente o coherente en todo el caché del service worker y en las capas de caché HTTP.
+tags:
+  - blog
+  - network
+  - service-worker
+  - offline
+---
+
+Si bien los service workers y las aplicaciones web progresivas (PWA) se están convirtiendo en estándares de las aplicaciones web modernas, el almacenamiento en caché de recursos se ha vuelto más complejo que nunca. Este artículo cubre el panorama general del almacenamiento en caché del navegador, el cual incluye:
+
+- Los casos de uso y las diferencias entre el almacenamiento en caché del service worker y el almacenamiento en caché HTTP.
+- Las ventajas y desventajas de las diferentes estrategias de caducidad del almacenamiento en caché de los service workers en comparación con las estrategias habituales de almacenamiento en caché de HTTP.
+
+## Descripción general del flujo de almacenamiento en caché
+
+En un nivel alto, un navegador sigue el orden de almacenamiento en caché a continuación cuando solicita un recurso:
+
+1. **Caché del service worker**: El service worker comprueba si el recurso está en su caché y decide si devolver el recurso en sí en función de sus estrategias de almacenamiento en caché programadas. Ten en cuenta que esto no sucede automáticamente. Debes de crear un controlador de eventos de recuperación en tu service worker e interceptar las solicitudes de red para que las solicitudes se atiendan desde la caché del service worker en lugar de la red.
+2. **Caché HTTP (también conocido como caché del navegador)**: Si el recurso se encuentra en el [caché HTTP](/http-cache) y aún no ha caducado, el navegador utiliza automáticamente el recurso del caché HTTP.
+3. **Lado del servidor:** Si no se encuentra nada en la caché del service worker o en la caché HTTP, el navegador va a la red para solicitar el recurso. Si el recurso no está almacenado en caché en una Red de entrega de contenidos (CDN), la solicitud debe volver al servidor de origen.
+
+{% Img src="image/admin/vtKWC9Bg9dAMzoFKTeAM.png", alt="Flujo de almacenamiento en caché", width="800", height="585" %}
+
+{% Aside %} Ten en cuenta que algunos navegadores como Chrome tienen una capa de **caché de memoria** por frente al caché del service worker. Los detalles de la memoria caché dependen de la implementación de cada navegador. Desafortunadamente, todavía no hay una especificación clara para esta parte. {% endAside %}
+
+## Capas de almacenamiento del caché
+
+### Almacenamiento en caché del service worker
+
+Un service worker intercepta consultas HTTP de tipo red y utiliza una [estrategia de almacenamiento](/offline-cookbook/#serving-suggestions) en caché para determinar qué recursos deben devolverse al navegador. La caché del service worker y la caché HTTP tienen el mismo propósito general, pero la caché del service worker ofrece más capacidades de almacenamiento en caché, como un control detallado sobre exactamente lo que se almacena en caché y cómo se realiza el almacenamiento en caché.
+
+#### Controlar la caché del service worker
+
+Un service worker intercepta solicitudes HTTP con [oyentes de eventos](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) (generalmente utilizando el evento de `fetch`). Este [fragmento de código](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) demuestra la lógica de una estrategia de almacenamiento en caché con el nombre de [Cache-First](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network).
+
+{% Img src="image/admin/INLfnhEpmL4KpMmFXnTL.png", alt="Un diagrama que muestra cómo los service worker interceptan las consultas HTTP", width="800", height="516" %}
+
+Es muy recomendable utilizar [Workbox](https://developer.chrome.com/docs/workbox/) para evitar reinventar la rueda. Por ejemplo, puedes [registrar rutas de URL de recursos con una sola línea de código regex](https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-regular-expression-route).
+
+```js
+import {registerRoute} from 'workbox-routing';
+
+registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);
+```
+
+#### Casos de uso y estrategias de almacenamiento en caché de los service worker
+
+La siguiente tabla describe las estrategias comunes de almacenamiento en caché de los service worker y cuándo es útil cada estrategia.
+
+<table>
+<thead><tr>
+<th><strong>Estrategias</strong></th>
+<th><strong>Justificación</strong></th>
+<th><strong>Casos de uso</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-only">Solo red</a></p></strong></td>
+<td>El contenido debe estar actualizado en todo momento.</td>
+<td><ul>
+<li>Pagos</li>
+<li>Declaraciones de saldo</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-falling-back-to-cache">Red usando al caché como respaldo</a></p></strong></td>
+<td>Es preferible servir el contenido más reciente. Sin embargo, si la red falla o es inestable, es aceptable ofrecer contenido con poca antigüedad.</td>
+<td><ul>
+<li>Datos oportunos</li>
+<li>Precios y tarifas (requiere descargos de responsabilidad)</li>
+<li>Estados de los pedidos</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="/stale-while-revalidate/">stale-while-revalidate</a></p></strong></td>
+<td>Está bien entregar contenido en caché de inmediato, pero el contenido en caché actualizado debe usarse en el futuro.</td>
+<td><ul>
+<li>Noticias</li>
+<li>Páginas de listado de productos</li>
+<li>Mensajes</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-then-network">Caché primero, respaldo en la red</a></p></strong></td>
+<td>El contenido no es crítico y se puede servir desde la caché para mejorar el rendimiento, pero el service worker debe buscar actualizaciones de vez en cuando.</td>
+<td><ul>
+<li>Shell de las aplicaciones</li>
+<li>Recursos comunes</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-only">Solo caché</a></p></strong></td>
+<td>El contenido rara vez cambia.</td>
+<td><ul><li>Contenido estático</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+#### Beneficios adicionales del almacenamiento en caché del service worker
+
+Además del control detallado de la lógica del almacenamiento en caché, el almacenamiento en caché del service worker también proporciona:
+
+- **Más memoria y espacio de almacenamiento para tu origen:** El navegador asigna recursos de caché HTTP por [origen](/same-site-same-origin/#origin). En otras palabras, si tienes varios subdominios, todos comparten la misma caché HTTP. No hay garantía de que el contenido de tu origen y/o dominio permanezca en la caché HTTP durante mucho tiempo. Por ejemplo, un usuario puede purgar manualmente la caché limpiando desde la interfaz de usuario de configuración de un navegador o activando una recarga completa en una página. Con una caché de service worker, tienes una probabilidad mucho mayor de que tu contenido almacenado en caché permanezca en la caché. Consulta [Almacenamiento persistente](/persistent-storage/) para obtener más información.
+- **Mayor flexibilidad con redes inestables o experiencias fuera de línea:** Con la caché HTTP solo tienes una opción binaria: el recurso se almacena en la caché o no. Con el almacenamiento en caché del service worker puedes mitigar los pequeños "contratiempos" de una manera más sencilla (con la estrategia de "stale-while-revalidate"), ofrecer una experiencia completa fuera de línea (con la estrategia de "Solo caché") o incluso algo intermedio, como IU personalizadas con partes de la página que provienen de la caché del service worker y algunas partes excluidas (con la estrategia "Establecer controlador de captura") cuando corresponda.
+
+### Almacenamiento en caché HTTP
+
+La primera vez que un navegador carga una página web y recursos relacionados, almacena estos recursos en su caché HTTP. La caché HTTP generalmente se habilita automáticamente por los navegadores, a menos que el usuario final la haya deshabilitado explícitamente.
+
+El uso del almacenamiento en caché HTTP significa confiar en el servidor para determinar cuándo almacenar en caché un recurso y durante cuánto tiempo.
+
+#### Controla la caducidad de la caché HTTP con cabeceras de respuesta HTTP
+
+Cuando un servidor responde a una consulta del navegador de un recurso, el servidor usa las cabeceras de respuesta HTTP para decirle al navegador cuánto tiempo debe almacenar en caché el recurso. Consulta [Cabeceras de respuesta: configura tu servidor web](/http-cache/#response-headers) para obtener más información.
+
+#### Estrategias de almacenamiento en caché HTTP y casos de uso
+
+El almacenamiento en caché HTTP es mucho más simple que el almacenamiento en caché del service worker, porque el almacenamiento en caché HTTP solo se ocupa de la lógica de caducidad de recursos basada en el tiempo (TTL). Consulta [¿Qué valores de cabecera de respuesta debería usar?](/http-cache/#response-header-strategies) y [Resumen](/http-cache/#summary) para obtener más información sobre las estrategias de almacenamiento en caché HTTP.
+
+## Diseñando la lógica de caducidad de tu caché
+
+En esta sección se explican las ventajas y desventajas de utilizar una lógica de caducidad coherente en la caché del service worker y las capas del caché HTTP, así como las ventajas y desventajas de la lógica de caducidad separada en estas capas.
+
+El siguiente error demuestra cómo el almacenamiento en caché del service worker y el almacenamiento en caché HTTP funcionan en acción en diferentes escenarios:
+
+{% Glitch { id: 'compare-sw-and-http-caching', height: 480 } %}
+
+### Lógica de caducidad coherente para todas las capas de caché
+
+Para demostrar las ventajas y desventajas, analizaremos 3 escenarios: a largo, mediano y corto plazo.
+
+<table>
+<thead><tr>
+<th>Escenarios</th>
+<th>Almacenamiento en caché a largo plazo</th>
+<th>Almacenamiento en caché a mediano plazo</th>
+<th>Almacenamiento en caché a corto plazo</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Estrategia de almacenamiento en caché del service worker</td>
+<td>Caché, respaldo en la red</td>
+<td>Stale-while-revalidate</td>
+<td>Red usando al caché como respaldo</td>
+</tr>
+<tr>
+<td>Tiempo de vida (TTL) de caché de service worker</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 día</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+<tr>
+<td>Máxima edad del caché HTTP</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 día</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### Escenario: Almacenamiento en caché a largo plazo (caché, respaldo en la red)
+
+- Cuando un recurso almacenado en caché es válido (&lt;= 30 días): El service worker devuelve el recurso almacenado en caché inmediatamente sin ir a la red.
+- Cuando un recurso almacenado en caché caduca (&gt; 30 días): El service worker va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor para el recurso.
+
+Desventaja: En este escenario, el almacenamiento en caché HTTP proporciona menos valor porque el navegador siempre pasará la solicitud al lado del servidor cuando la caché del service worker expire.
+
+#### Escenario: Almacenamiento en caché a mediano plazo (Stale-while-revalidate)
+
+- Cuando un recurso almacenado en caché es válido (&lt;= 1 día): El service worker devuelve el recurso almacenado en caché inmediatamente y va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que devuelve esa copia al service worker.
+- Cuando un recurso almacenado en caché caduca (&gt; 1 día): El service worker devuelve el recurso almacenado en caché inmediatamente y va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que va del lado del servidor para buscar el recurso.
+
+Desventaja: El service worker requiere una eliminación de caché adicional para anular la caché HTTP con el fin de aprovechar al máximo el paso de "revalidate (revalidación)".
+
+#### Escenario: Almacenamiento en caché a corto plazo (la red recurre a la caché)
+
+- Cuando un recurso almacenado en caché es válido (&lt;= 10 minutos): El service worker va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que se lo devuelve al service worker sin pasar al lado del servidor.
+- Cuando un recurso en caché caduca (&gt; 10 minutos): El service worker devuelve el recurso en caché inmediatamente y va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que va del lado del servidor para buscar el recurso.
+
+Desventaja: Similar al escenario de almacenamiento en caché a mediano plazo, el service worker requiere una lógica adicional de eliminación de caché para anular la caché HTTP con el fin de obtener el último recurso del lado del servidor.
+
+#### Service worker en todos los escenarios
+
+En todos los escenarios, la caché del service worker aún puede devolver recursos almacenados en caché cuando la red es inestable. Por otro lado, la caché HTTP no es confiable cuando la red es inestable o inactiva.
+
+### Diferente lógica de caducidad de caché en la caché del service worker y las capas HTTP
+
+Para demostrar las ventajas y desventajas, analizaremos 3 escenarios: a largo, mediano y corto plazo.
+
+<table>
+<thead><tr>
+<th>Escenarios</th>
+<th>Almacenamiento en caché a largo plazo</th>
+<th>Almacenamiento en caché a mediano plazo</th>
+<th>Almacenamiento en caché a corto plazo</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Estrategia de almacenamiento en caché del service worker</td>
+<td>Caché, respaldo en la red</td>
+<td>Stale-while-revalidate</td>
+<td>Red usando al caché como respaldo</td>
+</tr>
+<tr>
+<td>Tiempo de vida (TTL) de caché de service worker</td>
+<td><strong>90 dias</strong></td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 día</strong></td>
+</tr>
+<tr>
+<td>Máxima edad del caché HTTP</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 día</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### Escenario: Almacenamiento en caché a largo plazo (caché, respaldo en la red)
+
+- Cuando un recurso almacenado en caché es válido en el caché del service worker (&lt;= 90 días): El service worker devuelve el recurso almacenado en caché inmediatamente.
+- Cuando un recurso almacenado en caché caduca en el caché del service worker (&gt; 90 días): El service worker va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor.
+
+Ventajas y desventajas:
+
+- Ventaja: Los usuarios experimentan una respuesta instantánea ya que el service worker devuelve los recursos almacenados en caché de manera inmediata.
+- Ventaja: El service worker tiene un control más detallado de cuándo usar su caché y cuándo solicitar nuevas versiones de recursos.
+- Desventaja: Se requiere una estrategia de almacenamiento en el caché del service worker bien definida.
+
+#### Escenario: Almacenamiento en caché a mediano plazo (Stale-while-revalidate)
+
+- Cuando un recurso almacenado en caché es válido en el caché del service worker (&lt;= 30 días): El service worker devuelve el recurso almacenado en caché inmediatamente.
+- Cuando un recurso almacenado en caché caduca en el caché del service worker (&gt; 30 días): El service worker va a la red en busca del recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor.
+
+Ventajas y desventajas:
+
+- Ventaja: Los usuarios experimentan una respuesta instantánea ya que el service worker devuelve los recursos almacenados en caché de inmediato.
+- Ventaja: El service worker puede asegurarse de que la **próxima** solicitud para una URL determinada utilice una respuesta nueva de la red, gracias a la revalidación que ocurre "en segundo plano".
+- Desventaja: Se requiere una estrategia de almacenamiento en el caché del service worker bien definida.
+
+#### Escenario: Almacenamiento en caché a corto plazo (Respaldo en la red)
+
+- Cuando un recurso almacenado en caché es válido en la memoria caché del service worker (&lt;= 1 día): El service worker va a la red en busca del recurso. El navegador devuelve el recurso de la caché HTTP si está allí. Si la red no funciona, el service worker devuelve el recurso de la caché del service worker.
+- Cuando un recurso almacenado en caché caduca en el caché del service worker (&gt; 1 día): El service worker va a la red para buscar el recurso. El navegador recupera los recursos a través de la red cuando la versión almacenada en caché en su caché HTTP ha caducado.
+
+Ventajas y desventajas:
+
+- Ventaja: Cuando la red es inestable o inactiva, el service worker devuelve los recursos almacenados en caché de manera inmediata.
+- Desventaja: El service worker requiere una eliminación de caché adicional para anular la caché HTTP y realizar consultas de "Network first (Primero en la red)".
+
+## Conclusión
+
+Dada la complejidad de la combinación de escenarios de almacenamiento en caché, no es posible diseñar una regla que cubra todos los casos. Sin embargo, según los resultados de las secciones anteriores, hay algunas sugerencias para tener en cuenta al diseñar tus estrategias de caché:
+
+- La lógica de almacenamiento en caché del service worker no necesita ser coherente con la lógica de caducidad del almacenamiento en caché HTTP. Si es posible, utiliza una lógica de caducidad más larga en el service worker para otorgarle más control al mismo.
+- El almacenamiento en caché HTTP todavía juega un papel importante, pero no es confiable cuando la red está inestable o inactiva.
+- Revisa tus estrategias de almacenamiento en caché para cada recurso para asegurarte de que la estrategia de almacenamiento en caché de tu service worker proporciona su valor, sin entrar en conflicto con la caché HTTP.
+
+## Aprende más
+
+- [Confiabilidad de la red](/reliable/)
+- [Evitar consultas de red innecesarias con HTTP Cache](/http-cache)
+- [Codelab de caché HTTP](/codelab-http-cache/)
+- [Medir el impacto en el desempeño de los service workers en el mundo real](https://developers.google.com/web/showcase/2016/service-worker-perf)
+- [Cache-Control contra Expires](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
diff --git a/src/site/content/es/reliable/service-workers-cache-storage/index.md b/src/site/content/es/reliable/service-workers-cache-storage/index.md
new file mode 100644
index 00000000000..c24fb38a193
--- /dev/null
+++ b/src/site/content/es/reliable/service-workers-cache-storage/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: Service workers y la API de almacenamiento en caché
+authors:
+  - jeffposnick
+date: 2018-11-05
+updated: 2020-02-27
+description: La caché HTTP del navegador es su primera línea de defensa. No es necesariamente el enfoque más poderoso o flexible, además tiene un control limitado sobre la vida útil de las respuestas en caché. Pero hay varias reglas generales que le ofrecen una implementación de almacenamiento en caché sensata sin mucho trabajo, por lo que siempre debería intentar seguirlas.
+---
+
+Usted está atrapado en una lucha por la confiabilidad de la red. La caché HTTP del navegador es su primera línea de defensa, pero como ha aprendido, solo es realmente eficaz cuando se cargan URL versionadas que ha visitado anteriormente. Por sí sola, la caché HTTP no es suficiente.
+
+Afortunadamente, hay dos herramientas más nuevas disponibles para ayudar a cambiar el rumbo a su favor: los [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) y la [API de almacenamiento en caché](https://developer.mozilla.org/docs/Web/API/CacheStorage). Dado que se usan en conjunto con tanta frecuencia, vale la pena aprender sobre ambas al mismo tiempo.
+
+## Service workers
+
+Un service worker está integrado en el navegador y es controlado por algo de código JavaScript adicional que usted es responsable de crear. Usted implementa esto junto con los otros archivos que componen su aplicación web real.
+
+Un service worker tiene algunos poderes especiales. Entre otras tareas, espera pacientemente que su aplicación web realice una solicitud saliente y luego entra en acción interceptándola. Lo que haga el service worker con esta solicitud interceptada depende de usted.
+
+Para algunas solicitudes, el mejor curso de acción podría ser simplemente permitir que la solicitud continúe en la red, al igual que lo que sucedería si no hubiera ningún service worker.
+
+Sin embargo, para otras solicitudes, puede aprovechar algo más flexible que la caché HTTP del navegador y devolver una respuesta rápida y confiable sin tener que preocuparse por la red. Eso implica usar la otra pieza del rompecabezas: la API de almacenamiento en caché.
+
+## La API de almacenamiento en caché
+
+La API de almacenamiento en caché abre una gama completamente nueva de posibilidades, al brindar a los desarrolladores un control total sobre el contenido de la caché. En lugar de depender de una combinación de encabezados HTTP y la [heurística](https://httpwg.org/specs/rfc7234.html#heuristic.freshness) incorporada del navegador, la API de almacenamiento en caché expone un enfoque basado en código para el almacenamiento en caché. La API de almacenamiento en caché es particularmente útil cuando se invoca desde el JavaScript de su service worker.
+
+### Espere … ¿hay otra caché en la que pensar ahora?
+
+Probablemente se esté haciendo preguntas como "¿Todavía necesito configurar mis encabezados HTTP?" y "¿Qué puedo hacer con esta nueva caché que no fuera posible con la caché HTTP?". No se preocupe, esas son reacciones naturales.
+
+Aún se recomienda que configure los encabezados `Cache-Control` en su servidor web, incluso cuando sepa que está utilizando la API de almacenamiento en caché. Por lo general, puede salirse con la suya mediante la configuración de `Cache-Control: no-cache` para las URL sin versión o `Cache-Control: max-age=31536000` para las URL que contienen información de versiones, como hashes.
+
+Al llenar la caché de la API de almacenamiento en caché, el navegador [busca de forma predeterminada las entradas existentes](https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-fight) en la caché HTTP y las usa si las encuentra. Si está agregando URL versionadas a la caché de la API de almacenamiento en caché, el navegador evita una solicitud de red adicional. La otra cara de la moneda es que si está utilizando encabezados `Cache-Control` mal configurados, como especificar una vida útil de caché de larga duración para una URL sin versión, puede terminar [empeorando las cosas](https://jakearchibald.com/2016/caching-best-practices/#a-service-worker-can-extend-the-life-of-these-bugs) al agregar ese contenido obsoleto a la API de almacenamiento de caché. Ordenar el comportamiento de la caché HTTP es un requisito previo para utilizar eficazmente la API de almacenamiento en caché.
+
+En cuanto a lo que ahora es posible con esta nueva API, la respuesta es: mucho. Algunos usos comunes que serían difíciles o imposibles con solo la caché de HTTP incluyen:
+
+- Utilice un enfoque de "actualización en segundo plano" para el contenido almacenado en caché, que se sabe que es obsoleto mientras se revalida.
+- Imponga un límite en la cantidad máxima de activos para almacenar en caché e implemente una política de vencimiento personalizada para eliminar elementos una vez que se alcance ese límite.
+- Compare las respuestas de red actualizadas y almacenadas previamente en caché para ver si algo ha cambiado y permita que el usuario actualice el contenido (con un botón, por ejemplo) cuando los datos se hayan actualizado realmente.
+
+Consulte la [API de caché: una guía rápida](/cache-api-quick-guide/) para obtener más información.
+
+### Tuercas y tornillos de la API
+
+Hay algunas cosas a tener en cuenta sobre el diseño de la API:
+
+- Los objetos [`Request`](https://developer.mozilla.org/docs/Web/API/Request) de solicitud se utilizan como claves únicas al leer y escribir en estas cachés. Para su comodidad, puede pasar una cadena de URL como `'https://example.com/index.html'` como clave en lugar de un objeto `Request` real y la API lo manejará automáticamente por usted.
+- Los objetos [`Response`](https://developer.mozilla.org/docs/Web/API/Response) de respuesta se utilizan como valores en estos cachés.
+- El encabezado `Cache-Control` en una `Response` dada se ignora efectivamente cuando se almacenan datos en l caché. No hay comprobaciones automáticas de caducidad o actualización incorporadas y una vez que almacena un elemento en la caché, persistirá hasta que su código lo elimine explícitamente. (Existen bibliotecas para simplificar el mantenimiento de la caché en su nombre. Se tratarán más adelante en esta serie).
+- A diferencia de las API síncronas más antiguas, como[`LocalStorage`](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage), todas las operaciones de la API de almacenamiento en caché son asincrónicas.
+
+## Un desvío rápido: promesas y async/await
+
+Los service workers y la API de almacenamiento en caché utilizan [conceptos de programación asincrónica](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming)). En particular, dependen en gran medida de las promesas para representar el resultado futuro de las operaciones asincrónicas. Usted debe familiarizarse con las [promesas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) y la sintaxis relacionada [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await) antes de la inmersión.
+
+{% Aside 'codelab' %} [Cree una aplicación confiable al registrar un service worker](/codelab-service-workers). {% endAside %}
+
+## No implemente ese código … todavía
+
+Si bien proporcionan una base importante y se pueden usar tal cual, tanto los service workers como la API de almacenamiento en caché son bloques de construcción de nivel inferior, con una serie de casos extremos y "errores". Hay algunas herramientas de nivel superior que pueden ayudar a suavizar las partes difíciles de esas API y proporcionar todo lo que necesita para crear un service worker listo para la producción. La siguiente guía cubre una de estas herramientas: [Workbox](https://developer.chrome.com/docs/workbox/).
+
+{% Aside 'success' %} Aprenda mientras se divierte. ¡Échele un vistazo al nuevo [juego Service Workies](https://serviceworkies.com/)! {% endAside %}
diff --git a/src/site/content/es/reliable/workbox/index.md b/src/site/content/es/reliable/workbox/index.md
new file mode 100644
index 00000000000..8726b92f728
--- /dev/null
+++ b/src/site/content/es/reliable/workbox/index.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: 'Workbox: su kit de herramientas para service worker de alto nivel'
+authors:
+  - jeffposnick
+date: 2018-11-05
+description: Workbox es un conjunto de herramientas de service worker de alto nivel construido sobre las API de service worker y almacenamiento en caché. Proporciona un conjunto de bibliotecas listas para producción para agregarles soporte sin conexión a las aplicaciones web.
+feedback:
+  - api
+---
+
+Dos API juegan un papel crucial en la creación de aplicaciones web confiables: [Service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) y [Almacenamiento en caché](https://developer.mozilla.org/docs/Web/API/Cache). Pero usarlas de manera efectiva, sin introducir errores sutiles o chocar con casos extremos, puede ser un desafío. Por ejemplo, los errores en el código de su service worker pueden causar problemas de almacenamiento en caché; a los usuarios se les puede mostrar contenido desactualizado o enlaces rotos.
+
+[Workbox](https://developer.chrome.com/docs/workbox/) es un conjunto de herramientas de service worker de alto nivel construido sobre las API de Service worker y Almacenamiento en caché. Proporciona un conjunto de bibliotecas listas para producción para agregarles soporte sin conexión a las aplicaciones web. El kit de herramientas está estructurado en dos colecciones: herramientas que ayudan a administrar el código que se ejecuta dentro de su service worker y herramientas que se integran con su proceso de compilación.
+
+### Código de tiempo de ejecución
+
+Este es el código que se ejecuta dentro de la secuencia de comandos del service worker y controla cómo éste intercepta las solicitudes salientes e interactúa con la API de almacenamiento en caché. Workbox tiene aproximadamente una [docena de módulos de biblioteca en total](https://developer.chrome.com/docs/workbox/modules/), cada una de ellas maneja una variedad de casos de uso especializados. Los módulos más importantes determinan *si* el service worker responderá (conocido como [enrutamiento](https://developer.chrome.com/docs/workbox/modules/workbox-routing/)) y *cómo* responderá (conocido como [estrategia de almacenamiento en caché](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/)).
+
+### Integración de compilación
+
+Workbox ofrece herramientas de [línea de comando](https://developer.chrome.com/docs/workbox/modules/workbox-cli/) ,[módulo Node.js](https://developer.chrome.com/docs/workbox/modules/workbox-build/) y [complemento de paquete web](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) que brindan formas alternativas de lograr dos cosas:
+
+- Crear un script de service worker basado en un conjunto de opciones de configuración. El service worker generado usa las bibliotecas de tiempo de ejecución de Workbox "bajo el capó" para poner en acción las estrategias de almacenamiento en caché que usted configura.
+- Generar una lista de URL que se deben "[almacenar en caché](https://developer.chrome.com/docs/workbox/modules/workbox-precaching/)", con base en patrones configurables para incluir y excluir archivos generados durante su proceso de compilación.
+
+## ¿Por qué debería utilizar Workbox?
+
+El uso de Workbox al crear su service worker es opcional; existen varias guías que recorren [estrategias comunes de almacenamiento en caché](/offline-cookbook/) desde una perspectiva "básica" de service worker. Si decide utilizar Workbox, estos son algunos de sus beneficios.
+
+### Gestión de caché
+
+Workbox maneja las actualizaciones de caché por usted, ya sea vinculadas a su proceso de compilación cuando se usa el almacenamiento en caché, o mediante políticas configurables de tamaño/antigüedad cuando se usa el almacenamiento en caché en tiempo de ejecución. La API de almacenamiento en caché subyacente es poderosa, pero no tiene ningún soporte integrado para la caducidad de la caché. Herramientas como Workbox llenan ese vacío.
+
+### Amplio registro e informes de errores
+
+Cuando comienza con los service workers, entender *por qué* algo se almacena en caché (o, igualmente frustrante, por qué *no se* almacena en caché) es un desafío. Workbox detecta automáticamente cuándo está ejecutando una versión de desarrollo de su sitio web en `localhost` y activa el registro de depuración en la consola JavaScript de su navegador.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gvsGSU3urfjl52jRcj3j.png", alt="Registro de Workbox en la consola de DevTools", width="800", height="438" %}
+
+SI le hace seguimiento a los mensajes de registro, puede llegar a la raíz de cualquier problema de configuración o invalidación mucho más rápidamente que si lo hiciera solo.
+
+### Una base de código probada en varios navegadores
+
+Workbox se desarrolla contra un conjunto de pruebas de varios navegadores y, cuando es posible, recurre automáticamente a implementaciones alternativas de funciones que faltan en ciertos navegadores.
+
+- El [`workbox-broadcast-cache-update module`](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/) usa la [API de canal de transmisión](https://developer.mozilla.org/docs/Web/API/Broadcast_Channel_API) cuando está disponible, y regresa a una implementación basada en [`postMessage()`](https://developer.mozilla.org/docs/Web/API/Window/postMessage) en los navegadores que carecen de soporte.
+- El [módulo workbox-background-sync](https://developer.chrome.com/docs/workbox/modules/workbox-background-sync/) usa la [API de sincronización en segundo plano](https://developer.chrome.com/blog/background-sync/) si es posible, y si no, recurre a reintentar los eventos en cola cada vez que se inicia el service worker.
+
+## ¿Cómo debería utilizar Workbox?
+
+### Integración del marco de trabajo
+
+Si está comenzando un nuevo proyecto desde cero, puede aprovechar la integración de Workbox que se encuentra en muchos kits de inicio y complementos adicionales populares:
+
+- [create-react-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+- [vue-cli](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-pwa/README.md)
+- [preact-cli](https://github.com/prateekbh/preact-cli-workbox-plugin/blob/master/README.md)
+- [Gatsby](https://www.gatsbyjs.org/packages/gatsby-plugin-offline/)
+- [Next.js](https://github.com/hanford/next-offline/blob/master/readme.md)
+
+### Agregue Workbox a su proceso de compilación existente
+
+Si ya tiene implementado un proceso de compilación para su sitio, integrar la [línea de comando](https://developer.chrome.com/docs/workbox/modules/workbox-cli/), el [módulo Node.js](https://developer.chrome.com/docs/workbox/modules/workbox-build/) o la [herramienta de complemento de paquete web](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) apropiados puede ser todo lo que necesita para comenzar con el uso de Workbox.
+
+En particular, la interfaz de línea de comandos de Workbox facilita la puesta en marcha, con un modo `wizard` que verificará su entorno de desarrollo local y sugerirá una configuración predeterminada razonable que podría usar en el futuro:
+
+```bash
+workbox wizard
+? ¿Cuál es el directorio raíz de su aplicación web (es decir, cuál directorio de su implementación)? src/
+? ¿Cuáles tipos de archivo quisiera almacenar previamente en caché? css, js, html
+? ¿Dónde quisiera que se guardara su archivo de service worker? build/sw.js
+? ¿Dónde quisiera guardar estas opciones de configuración? workbox-config.js
+```
+
+Para construir su service worker, ejecute `workbox generateSW workbox-config.js` como parte de un proceso de compilación. Consulte la [documentación de `generateSW`](https://goo.gl/fdTQBf) para obtener más detalles. Puede personalizar aún más su service worker si realiza cambios en `workbox-config.js`. Consulte la [documentación de las opciones](https://goo.gl/gVo87N) para obtener más detalles.
+
+### Use Workbox en tiempo de ejecución en un service worker existente
+
+Si tiene un service worker existente y desea probar las bibliotecas en tiempo de ejecución de Workbox, [importe Workbox desde su CDN oficial](https://developer.chrome.com/docs/workbox/modules/workbox-sw/#using-workbox-sw-via-cdn) y comience a usarlo para el almacenamiento en caché en tiempo de ejecución de inmediato. Tenga en cuenta que este caso de uso significa que no podrá aprovechar el almacenamiento en caché (que requiere integración en el tiempo de compilación), pero es excelente para crear prototipos y probar diferentes estrategias de almacenamiento en caché sobre la marcha.
+
+```js
+// Remplace 3.6.3 con el número de versión actual de Workbox.
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
+
+workbox.routing.registerRoute(
+  new RegExp('\.png$'),
+  workbox.strategies.cacheFirst({
+    cacheName: 'images-cache',
+  })
+);
+```
diff --git a/src/site/content/es/secure/cross-origin-isolation-guide/index.md b/src/site/content/es/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..c92120dbd27
--- /dev/null
+++ b/src/site/content/es/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Una guía para habilitar el aislamiento de origen cruzado
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: El aislamiento de origen cruzado permite que una página web utilice funciones potentes como SharedArrayBuffer. Este artículo explica cómo habilitar aislamiento del origen cruzado en su sitio web.
+description: El aislamiento de origen cruzado permite que una página web utilice funciones potentes como SharedArrayBuffer. Este artículo explica cómo habilitar aislamiento del origen cruzado en su sitio web.
+tags:
+  - security
+---
+
+Esta guía le muestra cómo habilitar el aislamiento de origen cruzado. Se requiere aislamiento de origen cruzado si desea utilizar [`SharedArrayBuffer`](/monitor-total-page-memory-usage/), [`performance.measureUserAgentSpecificMemory()`](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/) o [high resolution timer with better precision](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/).
+
+Si tiene la intención de habilitar el aislamiento de origen cruzado, evalúe el impacto que esto tendrá en otros recursos de origen cruzado en su sitio web, como la ubicación de anuncios.
+
+{% Details %} {% DetailsSummary %} Determine en qué lugar de su sitio web se usa `SharedArrayBuffer`
+
+A partir de Chrome 92, las funcionalidades que utilizan `SharedArrayBuffer` ya no funcionarán sin el aislamiento de origen cruzado. Si llegó a esta página debido a un `SharedArrayBuffer`, es probable que su sitio web o uno de los recursos integrados en él esté utilizando `SharedArrayBuffer`. Para asegurarse de que nada se interrumpa en su sitio web debido a la depreciación, comience por identificar dónde se utiliza.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- Active el aislamiento de origen cruzado para seguir utilizando `SharedArrayBuffer`.
+- Si depende del código de terceros que utiliza `SharedArrayBuffer`, notifique al proveedor de terceros para que tome medidas. {% endAside %}
+
+Si no está seguro de en qué parte de su sitio se utiliza un `SharedArrayBuffer`, hay dos maneras de averiguarlo:
+
+- Usando Chrome DevTools
+- (Avanzado) Uso de informes de depreciación
+
+Si ya sabe dónde está utilizando `SharedArrayBuffer`, pase a [Analizar el impacto del aislamiento de origen cruzado](#analysis).
+
+### Cómo utilizar Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) permite que los desarrolladores inspeccionen sitios web.
+
+1. [Abra Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) en la página que sospecha que podría estar usando `SharedArrayBuffer`.
+2. Seleccione el panel **Consola.**
+3. Si la página usa `SharedArrayBuffer`, aparecerá el siguiente mensaje:
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. El nombre del archivo y el número de línea al final del mensaje (por ejemplo, `common-bundle.js:535`) indican de dónde proviene `SharedArrayBuffer`. Si se trata de una biblioteca de terceros, comuníquese con el desarrollador para solucionar el problema. Si se implementa como parte de su sitio web, siga la guía que se indica a continuación para habilitar el aislamiento de origen cruzado.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="Advertencia de la consola DevToools cuando se utiliza SharedArrayBuffer sin aislamiento de origen cruzado", width="800", height="163" %} <figcaption>  Advertencia de la consola DevToools cuando se utiliza SharedArrayBuffer sin aislamiento de origen cruzado.</figcaption></figure>
+
+### (Avanzado) Uso de informes de depreciación
+
+Algunos navegadores tienen [una función de generación de informes en las API de depreciación](https://wicg.github.io/deprecation-reporting/) para un endpoint específico.
+
+1. [Configure un servidor de informes de depreciación y obtenga la URL de informes](/coop-coep/#set-up-reporting-endpoint). Puede conseguir esto utilizando un servicio público o construyendo uno usted mismo.
+2. Utilizando la URL, establezca el siguiente encabezado HTTP en las páginas que potencialmente utilizan `SharedArrayBuffer`.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. Una vez que el encabezado comienza a propagarse, el endpoint en el que se registró debería comenzar a recopilar informes de depreciación.
+
+Consulte un ejemplo de implementación aquí: [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me).
+
+{% endDetails %}
+
+## Cómo analizar el impacto del aislamiento de origen cruzado {: #analysis}
+
+¿No sería fantástico si pudiera evaluar el impacto que tendría la habilitación del aislamiento de origen cruzado en su sitio sin realmente interrumpir nada? Los encabezados HTTP [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) y [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) permiten hacer precisamente eso.
+
+1. Establezca [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) en su documento de nivel superior. Como su nombre lo indica, este encabezado solo envía informes sobre el impacto que `COOP: same-origin` **tendría** en su sitio. En realidad, no deshabilitará la comunicación con las ventanas emergentes.
+2. Establezca los informes y configure un servidor web para recibir y guardar los informes.
+3. Establezca [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources) en su documento de nivel superior. Nuevamente, este encabezado le permite ver el impacto de habilitar `COEP: require-corp` sin afectar realmente el funcionamiento de su sitio. Puede configurar este encabezado para enviar informes al mismo servidor de informes que configuró en el paso anterior.
+
+{% Aside %} También puede [habilitar la columna **Dominio**](https://developer.chrome.com/docs/devtools/network/#information) en el panel de la **Red** de Chrome DevTools para obtener una visualización general de los recursos que se verían afectados. {% endAside %}
+
+{% Aside 'caution' %}
+
+Habilitar el aislamiento de origen cruzado bloqueará la carga de recursos de origen cruzado que no se opten explícitamente y evitará que su documento de nivel superior pueda comunicarse con ventanas emergentes.
+
+Hemos estado explorando formas de implementar la `Cross-Origin-Resource-Policy` de origen cruzado a escala, ya que el aislamiento de origen cruzado requiere que todos los subrecursos se inscriban explícitamente. Y se nos ha ocurrido la idea de ir en la dirección opuesta: [un nuevo modo COEP "sin credenciales"](https://github.com/mikewest/credentiallessness/) que permite cargar recursos sin el encabezado CORP eliminando todas sus credenciales. Estamos averiguando los detalles de cómo debería funcionar, pero esperamos que esto alivie su carga de asegurarse de que los subrecursos envíen el encabezado de la `Cross-Origin-Resource-Policy`.
+
+Además, se sabe que el encabezado `Cross-Origin-Opener-Policy: same-origin` interrumpirá las integraciones que requieren interacciones de ventana de origen cruzado como OAuth y los pagos. Para mitigar este problema, estamos explorando [relajar la condición](https://github.com/whatwg/html/issues/6364) para habilitar el aislamiento entre orígenes `Cross-Origin-Opener-Policy: same-origin-allow-popups`. De esta forma será posible la comunicación con la ventana abierta.
+
+Si desea habilitar el aislamiento de origen cruzado, pero estos desafíos lo bloquean, le recomendamos que se [registre para una prueba de origen](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) y espere hasta que los nuevos modos estén disponibles. No tenemos previsto finalizar la prueba de origen hasta que estos nuevos modos estén disponibles.
+
+{% endAside %}
+
+## Mitigar el impacto del aislamiento de origen cruzado
+
+Una vez que haya determinado qué recursos se verán afectados por el aislamiento de origen cruzado, aquí hay pautas generales sobre cómo optar por esos recursos de origen cruzado:
+
+1. En recursos de origen cruzado como imágenes, scripts, hojas de estilo, iframes y otros, establezca el encabezado [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin) En los recursos del mismo sitio, establezca el encabezado [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin).
+2. Establezca el atributo `crossorigin` en la etiqueta HTML del documento de nivel superior si el recurso se presenta con [CORS](/cross-origin-resource-sharing/) (por ejemplo, `<img src="ejemplo.jpg" crossorigin>`).
+3. Si los recursos de origen cruzado cargados en iframes involucran otra capa de iframes, aplique de forma recursiva los pasos descritos en esta sección antes de seguir adelante.
+4. Una vez que confirme que todos los recursos de origen cruzado estén habilitados `Cross-Origin-Embedder-Policy: require-corp` en los recursos de origen cruzado cargados en iframes.
+5. Asegúrese de que no haya ventanas emergentes de origen cruzado que requieran comunicación a través de `postMessage()`. No hay forma de que sigan funcionando cuando el aislamiento de origen cruzado esté habilitado. Puede mover la comunicación a otro documento que no esté aislado de origen cruzado o utilizar un método de comunicación diferente (por ejemplo, solicitudes HTTP).
+
+## Habilitar el aislamiento de origen cruzado
+
+Una vez que haya mitigado el impacto mediante el aislamiento de origen cruzado, aquí hay pautas generales para habilitar el aislamiento de origen cruzado:
+
+1. Establezca el encabezado `Cross-Origin-Opener-Policy: same-origin` en su documento de nivel superior. Si había establecido `Cross-Origin-Opener-Policy-Report-Only: same-origin`, reemplácelo. Esto bloquea la comunicación entre su documento de nivel superior y sus ventanas emergentes.
+2. Establezca el encabezado `Cross-Origin-Embedder-Policy: require-corp` en su documento de nivel superior. Si estableció `Cross-Origin-Embedder-Policy-Report-Only: require-corp`, reemplácelo. Esto bloqueará la carga de recursos de origen cruzado que no estén habilitados.
+3. Verifique que `self.crossOriginIsolated` devuelva `true` en la consola para verificar que su página tenga un origen cruzado aislado.
+
+{% Aside 'gotchas' %}
+
+Habilitar el aislamiento de origen cruzado en un servidor local puede ser una molestia, ya que los servidores simples no admiten el envío de encabezados. Puede ejecutar Chrome con un indicador de línea de comandos `--enable-features=SharedArrayBuffer` para habilitar `SharedArrayBuffer` sin habilitar el aislamiento de origen cruzado. Aprenda [a ejecutar Chrome con una marca de línea de comando en las respectivas plataformas](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+{% endAside %}
+
+## Recursos
+
+- [Cómo hacer que su sitio web sea "aislado y de origen cruzado" utilizando COOP y COEP](/coop-coep/)
+- [Actualizaciones de SharedArrayBuffer en Android Chrome 88 y Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/es/secure/cross-origin-resource-sharing/index.md b/src/site/content/es/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..64053da06d0
--- /dev/null
+++ b/src/site/content/es/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,157 @@
+---
+layout: post
+title: Intercambio de recursos de origen cruzado (CORS)
+subhead: Intercambie recursos de origen cruzado de forma segura
+authors:
+  - kosamari
+date: 2018-11-05
+description: |2-
+
+  La política del mismo origen del navegador bloquea la lectura de un recurso de un origen distinto. Este mecanismo impide que un sitio malintencionado lea los datos de otro sitio, pero también impide los usos legítimos. ¿Qué tal si  quisiera conocer los datos meteorológicos de otro país? Habilitar el CORS permite que el servidor le diga al navegador que tiene permitido utilizar un origen adicional.
+tags:
+  - security
+---
+
+La política del mismo origen del navegador bloquea la lectura de un recurso de un origen distinto. Este mecanismo impide que un sitio malintencionado lea los datos de otro sitio, pero también impide los usos legítimos. ¿Qué tal si  quisiera conocer los datos meteorológicos de otro país?
+
+En una aplicación web moderna, una aplicación a menudo desea obtener recursos de un origen diferente. Por ejemplo, desea recuperar datos JSON de un dominio diferente o cargar imágenes de otro sitio en un elemento `<canvas>`
+
+En otras palabras, hay **recursos públicos** que deberían estar disponibles para que cualquiera los lea, pero la política del mismo origen bloquea eso. Los desarrolladores han utilizado soluciones alternativas como [JSONP](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about), pero el uso del **Intercambio de recursos de origen cruzado (CORS)** corrige esto de una forma estándar.
+
+Habilitar el **CORS** permite que el servidor le diga al navegador que tiene permiso para usar un origen adicional.
+
+## ¿Cómo funciona una consulta de recursos en la web?
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="consulta y respuesta", width="668", height="327" %} <figcaption> Imagen: Ilustración de la consulta del cliente y respuesta del servidor </figcaption></figure>
+
+Un navegador y un servidor pueden intercambiar datos a través de la red utilizando el **Protocolo de transferencia de hipertexto** (HTTP). El HTTP define las reglas de comunicación entre quien la solicita y quien responde, incluyendo la información que se necesita para obtener un recurso.
+
+La cabecera HTTP se utiliza para negociar el tipo de intercambio de mensajes entre el cliente y el servidor y se utiliza para determinar el acceso. Tanto la consulta del navegador como el mensaje de respuesta del servidor se dividen en dos partes: **cabecera** y **cuerpo**.
+
+### header (cabecera)
+
+Información sobre el mensaje, como el tipo de mensaje o la codificación del mensaje. Una cabecera puede incluir una [variedad de información](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) expresada como key-value pairs (par clave-valor). La cabecera de consulta y la cabecera de respuesta contienen información diferente.
+
+{% Aside %} Es importante tener en cuenta que las cabeceras no pueden contener comentarios. {% endAside %}
+
+**Ejemplo de cabecera de consulta**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+Lo anterior equivale a decir "Quiero recibir un HTML como respuesta. Aquí hay una cookie que tengo".
+
+**Ejemplo de cabecera de respuesta**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+Lo anterior equivale a decir "Los datos están codificados con gzip. No guarde en caché esto, por favor".
+
+### body (cuerpo)
+
+Es el mensaje en sí. Puede ser texto sin formato, una imagen binaria, JSON, HTML, etc.
+
+## ¿Cómo funciona CORS?
+
+Recuerde, la política del mismo origen le dice al navegador que bloquee las solicitudes de origen cruzado. Cuando desee obtener un recurso público de un origen diferente, el servidor que proporciona el recurso necesita decirle al navegador "Este origen de donde proviene la consulta puede acceder a mi recurso". El navegador recuerda eso y permite compartir recursos de origen cruzado.
+
+### Paso 1: consulta del cliente (navegador)
+
+Cuando el navegador realiza una consulta de origen cruzado, el navegador agrega una cabecera `Origin` con el origen actual (esquema, host y puerto).
+
+### Paso 2: respuesta del servidor
+
+En el lado del servidor, cuando un servidor ve esta cabecera y quiere permitir el acceso, necesita agregar una cabecera `Access-Control-Allow-Origin` a la respuesta especificando el origen de la consulta (o `*` para permitir cualquier origen).
+
+### Paso 3: el navegador recibe la respuesta
+
+Cuando el navegador ve esta respuesta con un `Access-Control-Allow-Origin` apropiado, el navegador permitirá que los datos de la respuesta se compartan con el sitio del cliente.
+
+## Vea a CORS en acción
+
+Aquí hay un pequeño servidor web que usa Express.
+
+{% Glitch {id: 'cors-demo', ruta: 'server.js', altura: 480}%}
+
+El primer endpoint (línea 8) no tiene ninguna cabecera de respuesta establecida, solo envía un archivo en respuesta.
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- Intente utilizar el siguiente comando:
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+Debería ver un error que dice:
+
+```bash
+request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource.
+```
+
+El segundo endpoint (línea 13) envía el mismo archivo en respuesta pero agrega `Access-Control-Allow-Origin: *` en la cabecera. Desde la consola, escriba:
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+Esta vez, su consulta no debe ser bloqueada.
+
+## Comparta credenciales con CORS
+
+Por razones de privacidad, CORS se usa normalmente para "solicitudes anónimas", aquellas en las que la consulta no identifica a su remitente. Si desea enviar cookies cuando usa CORS (que podría identificar al remitente), debe agregar cabeceras adicionales a la de consulta y de respuesta.
+
+### Request (consulta)
+
+Agregue `credentials: 'include'` a las opciones de fetch (recuperación) como se muestra a continuación. Esto incluirá la cookie con la consulta.
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### Response (respuesta)
+
+`Access-Control-Allow-Origin` debe establecerse en un origen específico (sin comodines usando `*` ) y debe establecer `Access-Control-Allow-Credentials` en `true` .
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## Solicitudes de verificación previa para peticiones HTTP complejas
+
+Si una aplicación web necesita una solicitud HTTP compleja, el navegador agrega una **[solicitud de verificación previa](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)** al principio de la cadena de solicitudes.
+
+La especificación CORS define una **consulta compleja** como
+
+- Una consulta que utilice métodos distintos a GET, POST o HEAD
+- Una consulta que incluya encabezados distintos a `Accept` , `Accept-Language` o `Content-Language`
+- Una consulta que tenga un `Content-Type` que no sea `application/x-www-form-urlencoded` , `multipart/form-data` o `text/plain`
+
+Los navegadores crean una consulta de verificación previa si es necesario. En una consulta `OPTIONS` como la que se muestra a continuación, es la que se envía antes del mensaje de consulta real.
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+En el lado del servidor, una aplicación debe responder a la consulta de verificación previa con información sobre los métodos que la aplicación acepta desde este origen.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+La respuesta del servidor también puede incluir un `Access-Control-Max-Age` para especificar la duración (en segundos) para almacenar en caché los resultados de la verificación previa para que el cliente no necesite realizar una solicitud de verificación previa cada vez que envía una consulta compleja.
diff --git a/src/site/content/es/secure/fixing-mixed-content/index.md b/src/site/content/es/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..49aabee21bd
--- /dev/null
+++ b/src/site/content/es/secure/fixing-mixed-content/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: Solucionar el contenido mixto
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: |2
+
+  Descubra cómo corregir errores de contenido mixto en su sitio web,
+  para proteger a los usuarios y garantizar que se cargue todo su contenido.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+Admitir HTTPS en su sitio web es un paso importante para la protección de su sitio y de sus usuarios contra ataques, pero el contenido mixto puede hacer que esa protección sea inútil. Los navegadores bloquearán el contenido mixto cada vez más inseguro, como se explica en [¿Qué es el contenido mixto?](/what-is-mixed-content)
+
+En esta guía, demostraremos las técnicas y herramientas para solucionar problemas existentes de contenido mixto y evitar que sucedan otros nuevos.
+
+## Encontrar contenido mixto mientras visita su sitio
+
+Cuando visita una página HTTPS en Google Chrome, el navegador le advierte sobre el contenido mixto en la forma de errores y advertencias en la consola de JavaScript.
+
+En [¿Qué es el contenido mixto?](/what-is-mixed-content), puede encontrar varios ejemplos y ver cómo se informan los problemas en Chrome DevTools.
+
+El ejemplo de [contenido mixto pasivo](https://passive-mixed-content.glitch.me/) generará las siguientes advertencias. Si el navegador puede encontrar el contenido en una URL `https`, lo actualiza automáticamente y luego muestra un mensaje.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="Chrome DevTools muestra las advertencias que aparecen cuando se detecta y actualiza contenido mixto", width="800", height="294" %}</figure>
+
+El [contenido mixto activo](https://active-mixed-content.glitch.me/) está bloqueado y se muestra una advertencia.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="Chrome DevTools muestra las advertencias que aparecen cuando el contenido mixto activo está bloqueado", width="800", height="304" %}</figure>
+
+Si encuentra advertencias como estas para las URL `http://` en su sitio, debe corregirlas en la fuente del mismo. Es útil hacer una lista de estas URL, junto con la página donde las encontró, para usarla cuando las corrija.
+
+{% Aside %} Los errores y advertencias de contenido mixto solo se muestran para la página que está viendo actualmente. Además, la consola de JavaScript se borra cada vez que navega a una página nueva. Esto significa que tendrá que revisar individualmente cada página de su sitio para encontrar estos errores. {% endAside %}
+
+### Encontrar el contenido mixto en su sitio
+
+Puede buscar contenido mixto directamente en su código fuente. Busque `http://` en su código fuente y encuentre las etiquetas que incluyan atributos de URL HTTP. Tenga en cuenta que tener `http://` en el atributo `href` de las etiquetas de anclaje (`<a>`) a menudo no es un problema de contenido mixto, con algunas excepciones notables que se comentan más adelante.
+
+Si su sitio se publica mediante un sistema de gestión de contenido, es posible que se inserten enlaces a URL inseguras cuando se publiquen las páginas. Por ejemplo, las imágenes pueden incluirse con una URL completa en lugar de una ruta relativa. Deberá encontrarlas y corregirlas dentro del contenido CMS.
+
+### Solucionar el contenido mixto
+
+Una vez que haya encontrado contenido mixto en la fuente de su sitio, puede seguir los siguientes pasos para solucionarlo.
+
+Si recibe un mensaje en la consola respecto a que una solicitud de recursos se actualizó automáticamente de HTTP a HTTPS, puede cambiar de forma segura el `http://` del recurso en su código a `https://`. También puede verificar si un recurso está disponible de forma segura si cambia de `http://` a `https://` en la barra de URL del navegador y si intenta abrir la URL en una pestaña del navegador.
+
+Si el recurso no está disponible a través de `https://`, debe considerar una de las siguientes opciones:
+
+- Incluya el recurso desde un host diferente, si hay uno disponible.
+- Descargue y aloje el contenido en su sitio directamente, si está legalmente autorizado para hacerlo.
+- Excluya por completo el recurso de su sitio.
+
+Una vez solucionado el problema, revise la página donde encontró el error originalmente y verifique que el error ya no aparezca.
+
+### Tenga cuidado con el uso de etiquetas no estándar
+
+Tenga cuidado con el uso de etiquetas no estándar en su sitio. Por ejemplo, las URL de etiquetas de anclaje (`<a>`) no generan errores de contenido mixto, ya que hacen que el navegador vaya a una nueva página. Esto significa que, por lo general, no es necesario solucionarlas. Sin embargo, algunos scripts de la galería de imágenes anulan la funcionalidad de la etiqueta `<a>` y cargan el recurso HTTP especificado por el atributo `href` en una pantalla Lightbox en la página, lo que genera un problema de contenido mixto.
+
+## Manejar el contenido mixto a escala
+
+Los pasos manuales anteriores funcionan bien para sitios web más pequeños; pero para sitios web grandes o sitios con muchos equipos de desarrollo separados, puede ser difícil realizar un seguimiento de todo el contenido que se carga. Para ayudar con esta tarea, puede utilizar la política de seguridad de contenido para indicarle al navegador que le notifique sobre el contenido mixto y asegurar que sus páginas nunca carguen recursos inseguros de forma inesperada.
+
+### Política de seguridad de contenido
+
+La [política de seguridad de contenido](/csp/) (CSP) es una función multipropósito del navegador que puede utilizar para administrar el contenido mixto a escala. El mecanismo de informes de CSP se puede utilizar para rastrear el contenido mixto en su sitio y proporcionar políticas de cumplimiento para proteger a los usuarios al actualizar o bloquear el contenido mixto.
+
+Puede habilitar estas funciones para una página al incluir el encabezado `Content-Security-Policy` o `Content-Security-Policy-Report-Only` en la respuesta enviada desde su servidor. Además, puede configurar `Content-Security-Policy` (aunque **no** `Content-Security-Policy-Report-Only`) mediante una etiqueta `<meta>` en la sección `<head>` de su página.
+
+{% Aside %} Los navegadores modernos hacen cumplir todas las políticas de seguridad de contenido que reciben. Los valores múltiples de encabezado CSP recibidos por el navegador en el encabezado de respuesta o en los elementos `<meta>` se combinan y aplican como una sola política. Asimismo, se combinan las políticas de presentación de informes. Las políticas se combinan al considerar la intersección de las políticas; es decir, cada política después de la primera solo puede restringir aún más el contenido permitido, no ampliarlo. {% endAside %}
+
+### Encontrar contenido mixto con la política de seguridad de contenido
+
+Puede utilizar la política de seguridad de contenido para recopilar informes de contenido mixto en su sitio. Para habilitar esta función, configure la directiva `Content-Security-Policy-Report-Only` al agregarla como un encabezado de respuesta para su sitio.
+
+Encabezado de respuesta:
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %} El encabezado de respuesta [report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) se está dejando de soportar en favor de [report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to). La compatibilidad del navegador con `report-to` se limita actualmente a Chrome y Edge. Puede proporcionar ambos encabezados, en cuyo caso `report-uri` se ignorará si el navegador admite `report-to`. {% endAside %}
+
+Cada vez que un usuario visita una página de su sitio, su navegador envía informes en formato JSON a `https://example.com/reportingEndpoint` sobre cualquier cosa que viole la política de seguridad de contenido. En este caso, cada vez que se carga un recurso secundario a través de HTTP, se envía un informe. Estos informes incluyen la URL de la página donde ocurrió la infracción de la política y la URL del recurso secundario que violó la política. Si configura su terminal de informes para registrar estos informes, puede rastrear el contenido mixto en su sitio sin visitar cada página por sí mismo.
+
+Las dos salvedades a esto son:
+
+- Los usuarios deben visitar su página en un navegador que comprenda el encabezado CSP. Esto es cierto para la mayoría de los navegadores modernos.
+- Solo obtiene informes de las páginas visitadas por sus usuarios. Por lo tanto, si tiene páginas que no reciben mucho tráfico, puede pasar algún tiempo antes de que obtenga informes para todo su sitio.
+
+La guía de [políticas de seguridad de contenido](/csp/) tiene más información y un terminal de ejemplo.
+
+### Alternativas a la presentación de informes con CSP
+
+Si tiene su sitio alojado en una plataforma como Blogger, es posible que no tenga acceso para modificar los encabezados y agregar un CSP. En cambio, una alternativa viable podría ser el uso de un rastreador de sitios web para encontrar problemas en su sitio, como [HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker) o [Mixed Content Scan](https://github.com/bramus/mixed-content-scan).
+
+### Actualizar las solicitudes inseguras
+
+Los navegadores están comenzando a actualizar y a bloquear solicitudes inseguras. Puede utilizar las directivas CSP para forzar la actualización automática o el bloqueo de estos activos.
+
+La directiva CSP [`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) le indica al navegador que actualice las URL inseguras antes de realizar solicitudes de red.
+
+Por ejemplo, si una página contiene una etiqueta de imagen con una URL HTTP como `<img src="http://example.com/image.jpg">`.
+
+En cambio, el navegador realiza una solicitud segura para `https://example.com/image.jpg`, lo que evita que el usuario reciba contenido mixto.
+
+Puede habilitar este comportamiento si envía un encabezado `Content-Security-Policy` con esta directiva:
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+O puede incrustar esa misma directiva en serie en la sección `<head>` del documento mediante un elemento `<meta>`:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+Al igual que con la actualización automática del navegador, si el recurso no está disponible a través de HTTPS, la solicitud actualizada falla y el recurso no se carga. Esto mantiene la seguridad de su página. La directiva `upgrade-insecure-requests` irá más allá de la actualización automática del navegador, para intentar actualizar las solicitudes que el navegador no actualizó actualmente.
+
+La directiva `upgrade-insecure-requests` se distribuye en cascada en los documento `<iframe>`, lo que garantiza que toda la página esté protegida.
+
+### Bloquear todo el contenido mixto
+
+Una opción alternativa para proteger a los usuarios es la directiva CSP [`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking). Esta directiva le indica al navegador que nunca cargue contenido mixto. Se bloquean todas las solicitudes de recursos de contenido mixto, incluido el contenido mixto activo y pasivo. Esta opción también se distribuye en cascada en los documentos `<iframe>`, lo que garantiza que toda la página esté libre de contenido mixto.
+
+Una página puede optar por este comportamiento si envía un encabezado `Content-Security-Policy` con esta directiva:
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+O si incrusta esa misma directiva en serie en la sección `<head>` del documento mediante un elemento `<meta>`:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %} Si configura `upgrade-insecure-requests` y `upgrade-insecure-requests` a la vez, `block-all-mixed-content` se evaluará y se utilizará primero. El navegador no seguirá bloqueando las solicitudes. Por lo tanto, debe utilizar uno u otro. {% endAside %}
diff --git a/src/site/content/es/secure/index.md b/src/site/content/es/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/es/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/es/secure/same-site-same-origin/index.md b/src/site/content/es/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..636740068e3
--- /dev/null
+++ b/src/site/content/es/secure/same-site-same-origin/index.md
@@ -0,0 +1,184 @@
+---
+layout: post
+title: Entendiendo "same-site" y "same-origin"
+authors:
+  - agektmr
+date: 2020-04-15
+updated: 2020-06-10
+description: |2-
+
+  "same-site" y "same-origen" se citan con frecuencia, pero a menudo son términos que se malinterpretan. Este artículo te ayuda a comprender qué son, cómo son y sus diferencias.
+tags:
+  - security
+---
+
+"same-site" y "same-origen" se citan con frecuencia, pero a menudo son términos que se malinterpretan. Por ejemplo, se mencionan en el contexto de transiciones de página, consultas `fetch()`, cookies, ventanas emergentes, recursos integrados y en iframes.
+
+## Origin
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="Origin", width="680", height="100" %}
+
+"Origin (Origen)"  es una combinación de un [esquema](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol) (también conocido como [protocolo](https://developer.mozilla.org/docs/Glossary/Protocol), por ejemplo [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) o [HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)), [nombre de host](https://en.wikipedia.org/wiki/Hostname) y [puerto](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port) (si se especifica). Por ejemplo, dada una URL de `https://www.example.com:443/foo`, el "origen" es `https://www.example.com:443`.
+
+### "same-origin" y "cross-origin" {: #same-origin-and-cross-origin }
+
+Los sitios web que tienen la combinación del mismo esquema, nombre de host y puerto se consideran "same-origin (mismo origen)". Todo lo demás se considera "cross-origin (origen cruzado)".
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origen A</th>
+        <th>Origen B</th>
+        <th>Explicación de si el Origen A y B son "same-origin" o "cross-origin"</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>https: // <strong>www.evil.com</strong>:443</td>
+        <td>origen cruzado: diferentes dominios</td>
+      </tr>
+      <tr>
+        <td>https://<strong>example.com</strong>:443</td>
+        <td>origen cruzado: diferentes subdominios</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td>origen cruzado: diferentes subdominios</td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>origen cruzado: diferentes esquemas</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:80</td>
+        <td>origen cruzado: diferentes puertos</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>mismo origen: coincidencia exacta</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>mismo origen: coincidencias de número de puerto implícito (443)</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Sitio
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="Sitio", width="680", height="142" %}
+
+Los dominios de nivel superior (TLD) como `.com` y `.org` se enumeran en la [Root Zone Database](https://www.iana.org/domains/root/db). En el ejemplo anterior, "sitio" es la combinación del TLD y la parte del dominio inmediatamente anterior. Por ejemplo, dada una URL de `https://www.example.com:443/foo`, el "sitio" es `example.com`.
+
+Sin embargo, para dominios como `.co.jp` o `.github.io` , el simple hecho de usar el TLD de `.jp` o `.io` no es lo suficientemente detallado para identificar el "sitio". Y no hay forma de determinar algorítmicamente el nivel de dominios registrables para un TLD en particular. Es por eso que se creó una lista de "TLD efectivos" (eTLD). Estos se definen en la [Public Suffix List (lista de sufijos públicos)](https://wiki.mozilla.org/Public_Suffix_List). La lista de eTLD es mantenida en [publicsuffix.org/list](https://publicsuffix.org/list/).
+
+El nombre completo del sitio se conoce como eTLD+1. Por ejemplo, dada una URL de `https://my-project.github.io`, el eTLD es `.github.io` y el eTLD+1 es `my-project.github.io`, que se considera un "sitio". En otras palabras, el eTLD+1 es el TLD efectivo y la parte del dominio inmediatamente anterior.
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### "same-site" y "cross-site" {: #same-site-cross-site }
+
+Los sitios web que tienen el mismo eTLD+1 se consideran "same-site (mismo sitio)". Los sitios web que tienen un eTLD+1 diferente son "cross-site (sitio cruzado)".
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origen A</th>
+        <th>Origen B</th>
+        <th>Explicación de si Origin A y B son "en el mismo sitio" o "entre sitios"</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>sitio cruzado: diferentes dominios</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>mismo sitio: los diferentes subdominios no importan</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td><strong>mismo sitio: diferentes esquemas no importan</strong></td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>mismo sitio: los diferentes puertos no importan</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>mismo sitio: coincidencia exacta</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>mismo sitio: los puertos no importan</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### "schemeful same-site"
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+La definición de "same-site" está evolucionando para considerar el esquema de URL como parte del sitio para evitar que HTTP se utilice como [un canal débil](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8). A medida que los navegadores adopten esta interpretación, es posible que veas referencias a "scheme-less same-site (mismo sitio sin esquema)" cuando se refiera a la definición anterior y "[schemeful same-site (mismo sitio esquemático)](/schemeful-samesite/)" refiriéndose a la definición más estricta. En ese caso, `http://www.example.com` y `https://www.example.com` se consideran cross-site porque los esquemas no coinciden.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origen A</th>
+        <th>Origen B</th>
+        <th>Explicación de si el origen A y B son "un mismo sitio intrépido"</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>cross-site: diferentes dominios</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>mismo sitio esquemático: los diferentes subdominios no importan</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>sitio cruzado: diferentes esquemas</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>mismo sitio esquemático: diferentes puertos no importan</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>mismo sitio esquemático: coincidencia exacta</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>mismo sitio esquemático: los puertos no importan</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Cómo comprobar si una solicitud es "same-site", "same-origin" o "cross-site"
+
+Chrome envía solicitudes junto con una cabecera HTTP de `Sec-Fetch-Site`. Ningún otro navegador es compatible con `Sec-Fetch-Site` partir de abril de 2020. Esto es parte de una propuesta más grande de [Fetch Metadata Request Headers](https://www.w3.org/TR/fetch-metadata/). La cabecera tendrá uno de los siguientes valores:
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+Al examinar el valor de `Sec-Fetch-Site`, puedes determinar si la solicitud es "same-site", "same-origin" o "cross-site" (el "schemeful-same-site" no se captura en `Sec-Fetch-Site`).
diff --git a/src/site/content/es/secure/security-headers/index.md b/src/site/content/es/secure/security-headers/index.md
new file mode 100644
index 00000000000..e19f9eec632
--- /dev/null
+++ b/src/site/content/es/secure/security-headers/index.md
@@ -0,0 +1,802 @@
+---
+layout: post
+title: Referencia rápida de las cabeceras de seguridad
+subhead: Obten más información sobre las cabeceras que pueden mantener seguro a tu sitio y busca rápidamente los detalles más importantes.
+authors:
+  - agektmr
+  - maudn
+  - arturjanc
+date: 2021-05-18
+hero: image/YLflGBAPWecgtKJLqCJHSzHqe2J2/E3BVnrBFNV6w2Uqxn3bQ.jpg
+alt: Un candado delante del código comprimido
+description: Este artículo enumera las cabeceras de seguridad más importantes que puedes utilizar para proteger tu página web. Úsalo para comprender las funciones de seguridad basadas en la web, aprende a implementarlos en tu sitio web y como referencia para cuando necesites un recordatorio.
+tags:
+  - blog
+  - security
+---
+
+Este artículo enumera las cabeceras de seguridad más importantes que puedes utilizar para proteger tu página web. Úsalo para comprender las funciones de seguridad basadas en la web, aprende a implementarlos en tu sitio web y como referencia para cuando necesites un recordatorio.
+
+Cabeceras de seguridad recomendados para sitios web que manejan datos confidenciales del usuario: : [Content Security Policy(CSP): Política de seguridad de contenido](#csp) : [Trusted Types (Tipos confiables)](#tt)
+
+Cabeceras de seguridad recomendados para todos los sitios web:: [X-Content-Type-Options](#xcto) : [X-Frame-Options](#xfo) : [Política de recursos de origen cruzado (CORP)](#corp) : [Política de apertura de origen cruzado (COOP)](#coop) : [Seguridad de transporte estricta de HTTP (HSTS)](#hsts)
+
+Cabeceras de seguridad para sitios web con capacidades avanzadas:: [Intercambio de recursos de origen cruzado (CORS)](#cors) : [Política de incrustación de origen cruzado (COEP)](#coep)
+
+{% Details %} {% DetailsSummary %}
+
+Amenazas conocidas en la web
+
+Antes de sumergirse en las cabeceras de seguridad, obtén información sobre las amenazas conocidas en la web y por qué te gustaría utilizar estas cabeceras de seguridad.
+
+{% endDetailsSummary %}
+
+Antes de sumergirse en las cabeceras de seguridad, obtén información sobre las amenazas conocidas en la web y por qué te gustaría utilizar estas cabeceras de seguridad.
+
+### Proteje tu sitio de vulnerabilidades de inyección
+
+Las vulnerabilidades de inyección surgen cuando los datos que no son de confianza procesados por tu aplicación pueden afectar su comportamiento y, comúnmente, llevar a la ejecución de scripts controlados por atacantes. La vulnerabilidad más común causada por errores de inyección es la [secuencia de comandos entre sitios](https://portswigger.net/web-security/cross-site-scripting) (XSS) en sus diversas formas, incluido [reflected XSS (XSS reflejado)](https://portswigger.net/web-security/cross-site-scripting/reflected), [stored XSS (XSS almacenado)](https://portswigger.net/web-security/cross-site-scripting/stored), [DOM-based XSS (XSS basado en DOM)](https://portswigger.net/web-security/cross-site-scripting/dom-based) y otras variantes.
+
+Una vulnerabilidad XSS normalmente puede dar a un atacante acceso completo a los datos del usuario procesados por la aplicación y cualquier otra información alojada en el mismo [origen web](/same-site-same-origin/#origin).
+
+Las defensas tradicionales contra las inyecciones incluyen el uso constante de sistemas de plantilla HTML con escape automático, evitar el uso de las [API de JavaScript peligrosas](https://domgo.at/cxss/sinks) y procesar correctamente los datos del usuario alojando las cargas de archivos en un dominio separado y desinfectando el HTML controlado por el usuario.
+
+- Utiliza la [Política de seguridad de contenido (CSP)](#csp) para controlar qué scripts se pueden ejecutar en tu aplicación para mitigar el riesgo de inyecciones.
+- Utiliza los [Trusted Types](#tt) para aplicar la desinfección de los datos que se pasan a las API peligrosas de JavaScript.
+- Utiliza [X-Content-Type-Options](#xcto) para evitar que el navegador malinterprete los tipos MIME de los recursos de tu sitio web, lo que puede llevar a la ejecución de un script.
+
+### Aísla tu sitio de otros sitios web
+
+La apertura de la web permite que los sitios web interactúen entre sí de formas que pueden violar las expectativas de seguridad de una aplicación. Esto incluye realizar solicitudes autenticadas inesperadamente o incrustar datos de otra aplicación en el documento del atacante, lo que permite al atacante modificar o leer datos de la aplicación.
+
+Las vulnerabilidades comunes que quiebran el aislamiento web incluyen el [clickjacking (secuestro de clics)](https://portswigger.net/web-security/clickjacking), la [falsificación de solicitudes entre sitios](https://portswigger.net/web-security/csrf) (CSRF), la [inclusión de scripts entre sitios](https://www.scip.ch/en/?labs.20160414) (XSSI) y varias [cross-site leaks (fugas entre sitios)](https://xsleaks.dev).
+
+- Utiliza [X-Frame-Options](#xfo) para evitar que tus documentos sean incrustados por un sitio web malicioso.
+- Utiliza la [Política de recursos de origen cruzado (CORP)](#corp) para evitar que los recursos de tu sitio web se incluyan en un sitio web de origen cruzado.
+- Utiliza la [Política de apertura de origen cruzado (COOP)](#coop) para proteger las ventanas de tu sitio web de las interacciones de sitios web maliciosos.
+- Utiliza el uso [compartido de recursos de origen cruzado (CORS)](#cors) para controlar el acceso a los recursos de tu sitio web desde documentos de origen cruzado.
+
+El [Post-Spectre Web Development (desarrollo web de Post-Spectre)](https://www.w3.org/TR/post-spectre-webdev/) es una excelente lectura si estás interesado en estas cabeceras.
+
+### Crea un sitio web potente de forma segura
+
+[Spectre](https://ieeexplore.ieee.org/document/8835233) coloca todos los datos cargados en el mismo [grupo de contexto de navegación](/why-coop-coep/) los cuales son potencialmente legibles a pesar [de la política del mismo origen](/same-origin-policy/). Los navegadores restringen las funciones que posiblemente puedan aprovechar la vulnerabilidad <br>mediante un entorno especial llamado "[aislamiento de origen cruzado](/coop-coep/)". Con el aislamiento de origen cruzado, puedes utilizar funciones potentes como `SharedArrayBuffer`.
+
+- Utiliza la [Política de incrustación de origen cruzado (COEP)](#coep) junto con [COOP](#coop) para habilitar el aislamiento de origen cruzado.
+
+### Cifra el tráfico a tu sitio
+
+Los problemas de cifrado aparecen cuando una aplicación no cifra completamente los datos en tránsito, lo que permite a los atacantes que "escuchan" a escondidas conocer las interacciones del usuario con la aplicación.
+
+Puede surgir un cifrado insuficiente en los siguientes casos: no usar HTTPS, [contenido mixto](/what-is-mixed-content/), configurar cookies sin el [atributo de `Secure`](https://developer.mozilla.org/docs/Web/HTTP/Cookies#restrict_access_to_cookies) (o con el [prefijo `__Secure`](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Cookie_prefixes)) o la [lax CORS validation logic (lógica de validación CORS laxa)](https://blog.detectify.com/2018/04/26/cors-misconfigurations-explained/).
+
+- Utiliza [HTTP Strict Transport Security (HSTS)](#hsts) para ofrecer tus contenidos de manera coherente a través de HTTPS.
+
+{% endDetails %}
+
+## Política de seguridad de contenido (CSP) {: #csp }
+
+[Cross-Site Scripting (XSS)](https://www.google.com/about/appsecurity/learning/xss/) es un ataque en el que una vulnerabilidad en un sitio web permite que se inyecte y ejecute un script malicioso.
+
+`Content-Security-Policy` proporciona una capa adicional para mitigar los ataques XSS al restringir qué scripts pueden ser ejecutados por la página.
+
+Se recomienda que habilites el CSP estricto mediante uno de los siguientes enfoques:
+
+- Si procesas tus páginas HTML en el servidor, utiliza **un CSP estricto basado en nonce**.
+- Si tu HTML tiene que ser servido de manera estática o en caché, por ejemplo, si es una aplicación de una sola página, usa **un CSP estricto basado en hash**.
+
+{% Label %} Ejemplo de uso: un CSP basado en nonce {% endLabel%}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo usar CSP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+{% Aside %}
+
+Un CSP puede ser una *protección adicional* contra ataques XSS; aún debes de asegurarte de escapar (y desinfectar) la entrada del usuario.
+
+{% endAside %}
+
+#### 1. Utiliza un CSP estricto basado en nonce {: #nonce-based-csp }
+
+Si procesas tus páginas HTML en el servidor, utiliza **un CSP estricto basado en nonce**.
+
+{% Aside 'caution' %}
+
+Un nonce es un número aleatorio que se usa solo una vez. Un CSP basado en nonce solo es seguro si puede generar un nonce diferente para cada respuesta. Si no puedes hacer esto, usa [un CSP basado en hash](#hash-based-csp) en su lugar.
+
+{% endAside %}
+
+Genera un nuevo valor nonce mediante scripts para cada consulta en el lado del servidor y establece la siguiente cabecera:
+
+{% Label %} archivo de configuración del servidor {% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+En HTML, para cargar los scripts, establece el atributo de `nonce` de todas las etiquetas de `<script>` a la misma cadena de `<RANDOM>`.
+
+{% Label %} index.html {% endLabel %}
+
+```html
+<script nonce="<RANDOM>" src="https://example.com/script1.js"></script>
+<script nonce="<RANDOM>">
+  // Scripts en linea pueden ser usados con el atributo de nonce.
+</script>
+```
+
+[Google Photos](https://photos.google.com/) es un buen ejemplo de CSP estricto basado en nonce. Usa DevTools para ver cómo se usa.
+
+#### 2. Utiliza un CSP estricto basado en hash {: #hash-based-csp }
+
+Si tu HTML debe entregarse de forma estática o en caché, por ejemplo, si estás creando una aplicación de una sola página (SPA), usa **un CSP estricto basado en hash**.
+
+{% Label %} archivo de configuración del servidor {% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'sha256-{HASH1}' 'sha256-{HASH2}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+En HTML, necesitarás insertar tus scripts para aplicar una política basada en hash, porque la [mayoría de los navegadores no admiten el hash de scripts externos](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned).
+
+{% Label %} index.html {% endLabel %}
+
+```html
+<script>
+...// tu script 1, en linea
+</script>
+<script>
+...// tu script 2, en linea
+</script>
+```
+
+Para cargar scripts externos, lee "Cargar scripts desde su origen dinámicamente" en la sección de [Opción B: Cabecera de respuesta de CSP basado en hash](/strict-csp/#hash-based-csp).
+
+[CSP Evaluator](https://csp-evaluator.withgoogle.com/) es una buena herramienta para evaluar tu CSP, pero al mismo tiempo es un buen ejemplo de CSP estricto basado en nonce. Usa DevTools para ver cómo se usa.
+
+### Navegadores compatibles
+
+Chrome, Firefox, Edge, Safari
+
+{% Aside 'gotchas' %}
+
+- `https:` Es un respaldo para Safari y `unsafe-inline` es un respaldo para versiones de navegador muy antiguas. `https:` y `unsafe-inline` no hacen que tu política sea menos segura porque serán ignorados por los navegadores que admiten `strict-dynamic`. Obtén más información en [Agregar alternativas para admitir Safari y navegadores más antiguos](/strict-csp/#step-4-add-fallbacks-to-support-safari-and-older-browsers).
+- Safari aún *no* admite `strict-dynamic`. Pero un CSP estricto como en los ejemplos anteriores es más seguro que un CSP de lista de permitidos (y mucho más seguro que no usar ningún CSP) para todos sus usuarios. Incluso en Safari, un CSP estricto protege tu sitio de algunos tipos de ataques XSS, porque la presencia del CSP no permite ciertos patrones inseguros.
+
+{% endAside %}
+
+Ver [más compatibilidades](https://developer.mozilla.org/docs/Web/HTTP/CSP#browser_compatibility).
+
+### Otras cosas a tener en cuenta sobre el CSP
+
+- La directiva de [`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) protege a tu sitio contra el clickjacking, un riesgo que surge si permites que los sitios que no son de confianza se incrusten al tuyo. Si prefieres una solución más simple, puedes usar [`X-Frame-Options`](#xfo) para bloquear la carga, pero `frame-ancestors` te brinda una configuración avanzada para permitir solo orígenes específicos como incrustadores.
+- Es posible que hayas utilizado [un CSP para asegurarte de que todos los recursos de su sitio se carguen a través de HTTPS](/fixing-mixed-content/#content-security-policy). Esto se ha vuelto menos relevante: hoy en día, la mayoría de los navegadores bloquean el [contenido mixto](/what-is-mixed-content/).
+- También puedes configurar un CSP en [report-only-mode (modo de solo informe)](/strict-csp/#step-2-set-a-strict-csp-and-prepare-your-scripts).
+- Si no puedes configurar un CSP como cabecera del lado del servidor, también puedes configurarlo como una metaetiqueta. Ten en cuenta que no puedes usar el **report-only mode** para las metaetiquetas (aunque [esto puede cambiar](https://github.com/w3c/webappsec-csp/issues/277)).
+
+### Aprende más
+
+- [Mitigar XSS con una estricta política de seguridad de contenido (CSP)](/strict-csp)
+- [Hoja de referencia de la política de seguridad de contenido](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
+
+{% endDetails %}
+
+## Trusted Types {: #tt}
+
+El [DOM-based XSS](https://portswigger.net/web-security/cross-site-scripting/dom-based) es un ataque en el que se pasan datos maliciosos a un receptor que admite la ejecución de código dinámico como `eval()` o `.innerHTML`.
+
+Los Trusted Types proporcionan las herramientas para escribir, revisar la seguridad y mantener aplicaciones libres de DOM XSS. Se pueden habilitar a través de [CSP](#csp) y hace que el código JavaScript sea seguro de forma predeterminada al limitar las API web peligrosas para que solo acepten un objeto especial: un Trusted Type.
+
+Para crear estos objetos, puedes definir políticas de seguridad en las que puedas asegurarte de que las reglas de seguridad (como el escape o la desinfección) se apliquen de forma coherente antes de que los datos se escriban en el DOM. Estas políticas son los únicos lugares en el código que potencialmente podrían introducir DOM XSS.
+
+{% Label %} Ejemplos de usos {% endLabel %}
+
+```http
+Content-Security-Policy: require-trusted-types-for 'script'
+```
+
+```javascript
+// Detección de función
+if (window.trustedTypes && trustedTypes.createPolicy) {
+  // Nombra y crea una política
+  const policy = trustedTypes.createPolicy('escapePolicy', {
+    createHTML: str => {
+      return str.replace(/\</g, '<').replace(/>/g, '>');
+    }
+  });
+}
+```
+
+```javascript
+// Asignación de cadenas crudas se bloquean por Trusted Types.
+el.innerHTML = 'some string'; // Esto arroja una excepción.
+
+// La asignación de Trusted Types se aceptó de manera segura.
+const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo utilizar Trusted Types
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+1. Aplicar Trusted Types para receptores DOM peligrosos {% Label %} Cabecera de CSP y Trusted Types: {% endLabel %}
+
+    ```http
+    Content-Security-Policy: require-trusted-types-for 'script'
+    ```
+
+    Actualmente, `'script'` es el único valor aceptable para la directiva de `require-trusted-types-for`.
+
+    Por supuesto, puedes combinar Trusted Types con otras directivas de CSP:
+
+    {% Label %} Combinando un CSP basado en los nonce anteriores con Trusted Types: {% endLabel %}
+
+    ```http
+    Content-Security-Policy:
+      script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+      object-src 'none';
+      base-uri 'none';
+      require-trusted-types-for 'script';
+    ```
+
+    {% Aside %}
+
+    Puedes limitar los nombres de políticas de Trusted Types permitidos estableciendo una directiva de `trusted-types` adicional (por ejemplo, `trusted-types myPolicy`). Sin embargo, esto no es un requisito.
+
+    {% endAside %}
+
+2. Definir una política
+
+    {% Label %} Política: {% endLabel %}
+
+    ```javascript
+    // Detección de función
+    if (window.trustedTypes && trustedTypes.createPolicy) {
+      // Nombra y crea una política
+      const policy = trustedTypes.createPolicy('escapePolicy', {
+        createHTML: str => {
+          return str.replace(/\</g, '&lt;').replace(/>/g, '&gt;');
+        }
+      });
+    }
+    ```
+
+    {% Aside %}
+
+    Puedes definir políticas con nombres arbitrarios a menos que limites los nombres de las políticas de Trusted Types permitidos estableciendo la directiva de `trusted-types`.
+
+    {% endAside %}
+
+3. Aplicar la política
+
+    {% Label %} Utiliza la política al escribir datos en el DOM: {% endLabel %}
+
+    ```javascript
+    // Asignación de cadenas crudas se bloquean por Trusted Types.
+    el.innerHTML = 'some string'; // Esto arroja una excepción.
+
+    // La asignación de Trusted Types se aceptó de manera segura.
+    const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+    el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)&gt;'
+    ```
+
+    Con `require-trusted-types-for 'script'`, el uso de un Trusted Type es un requisito. El uso de cualquier API de DOM peligrosa con una cadena dará como resultado un error.
+
+### Navegadores compatibles
+
+Chrome, Edge.
+
+Ver [más compatibilidades](https://caniuse.com/?search=trusted%20types).
+
+### Aprende más
+
+- [Evita las vulnerabilidades de secuencias de comandos en sitios cruzados basadas en DOM con Trusted Types](/trusted-types/)
+- [CSP: require-trusted-types-for - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for)
+- [CSP: trusted-types - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
+- [Demostración de Trusted Types:](https://www.compass-demo.com/trusted-types/) Abre DevTools Inspector y observa lo que está sucediendo
+
+{% endDetails %}
+
+## X-Content-Type-Options {: #xcto}
+
+Cuando se entrega un documento HTML malicioso desde tu dominio (por ejemplo, si una imagen cargada en un servicio de fotografías contiene un marcado HTML válido), algunos navegadores lo tratarán como un documento activo y le permitirán ejecutar scripts en el contexto de la aplicación, dando lugar a un [cross-site scripting bug (error de secuencia de comandos entre sitios)](https://www.google.com/about/appsecurity/learning/xss/).
+
+`X-Content-Type-Options: nosniff` previene indicando al navegador que el [tipo MIME](https://mimesniff.spec.whatwg.org/#introduction) establecido en el `Content-Type` para una respuesta dada es correcto. Se recomienda esta cabecera para **todos tus recursos**.
+
+{% Label %} Ejemplo de uso {% endLabel%}
+
+```http
+X-Content-Type-Options: nosniff
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo utilizar X-Content-Type-Options
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+`X-Content-Type-Options: nosniff` se recomienda para todos los recursos servidos desde tu servidor junto con la cabecera de `Content-Type`.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/IWqRWe9R1mOJImmMbLoM.png", alt="X-Content-Type-Options: nosniff", width="800", height="237" %}
+
+{% Label %} Ejemplos de cabeceras enviadas con un documento HTML {% endLabel %}
+
+```http
+X-Content-Type-Options: nosniff
+Content-Type: text/html; charset=utf-8
+```
+
+### Navegadores compatibles
+
+Chrome, Firefox, Safari, Edge
+
+Ver [más compatibilidades](https://caniuse.com/mdn-http_headers_x-content-type-options).
+
+### Aprende más
+
+- a0}X-Content-Type-Options - HTTP MDN
+
+{% endDetails %}
+
+## X-Frame-Options {: #xfo}
+
+Si un sitio web malicioso puede incrustar tu sitio como un iframe, esto puede permitir a los atacantes invocar acciones no deseadas por parte del usuario mediante [clickjacking](https://portswigger.net/web-security/clickjacking). Además, en algunos casos, [los ataques de tipo Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) brindan a los sitios web maliciosos la oportunidad de conocer el contenido de un documento incrustado.
+
+`X-Frame-Options` indica si un navegador debe poder representar una página en un `<frame>` , `<iframe>` , `<embed>` u `<object>`. **Se recomienda que todos los documentos** envíen esta cabecera para indicar si permiten ser incrustados por otros documentos.
+
+{% Aside %}
+
+Si necesitas un control más granular, como permitir que solo un origen específico incruste el documento, usa la directiva [`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) de [CSP](#csp).
+
+{% endAside %}
+
+{% Label %} Ejemplo de uso {% endLabel%}
+
+```http
+X-Frame-Options: DENY
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo utilizar X-Frame-Options
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Todos los documentos que no están diseñados para ser incrustados deben usar la cabecera de `X-Frame-Options`.
+
+Puedes probar cómo las siguientes configuraciones afectan la carga de un iframe en [esta demostración](https://cross-origin-isolation.glitch.me/). Cambia el `X-Frame-Options` y haz clic en el botón de **Reload the iframe (Recargar el iframe)**.
+
+#### Protege tu sitio web de ser incrustado por otros sitios web
+
+Niega ser incrustado por cualquier otro documento.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2ZM5obgGK38CMcZ75PkH.png", alt="X-Frame-Options: DENY", width="800", height="237" %}
+
+```http
+X-Frame-Options: DENY
+```
+
+#### Protege tu sitio web de ser incrustado por sitios web de origen cruzado
+
+Permitir ser incrustado solo por documentos del mismo origen.
+
+```http
+X-Frame-Options: SAMEORIGIN
+```
+
+{% Aside 'gotchas' %}
+
+Los documentos que se pueden incrustar de forma predeterminada significa que los desarrolladores web deben enviar explícitamente `DENY` o `SAMEORIGIN` para dejar de estar incrustados y protegerse de los ataques de canal lateral. El equipo de Chrome está considerando cambiar a bloquear incrustaciones de documentos de forma predeterminada para que los sitios web sean seguros incluso si no establecen explícitamente la cabecera. En ese nuevo mundo, los documentos tendrían que optar explícitamente para ser incrustados.
+
+{% endAside %}
+
+### Navegadores compatibles
+
+Chrome, Firefox, Safari, Edge
+
+Ver [más compatibilidades](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options#browser_compatibility).
+
+### Aprende más
+
+- a0}X-Frame-Options - HTTP
+
+{% endDetails %}
+
+## Política de recursos de origen cruzado (CORP) {: #corp}
+
+Un atacante puede incrustar recursos de otro origen, por ejemplo, de tu sitio, para obtener información sobre ellos explotando las [cross-site leaks](https://xsleaks.dev/).
+
+`Cross-Origin-Resource-Policy` mitiga este riesgo al indicar el conjunto de sitios web en los que se puede cargar. La cabecera toma uno de tres valores: `same-origin`, `same-site` y `cross-origin`. **Se recomienda que todos los recursos** envíen esta cabecera para indicar si permiten que otros sitios web los carguen.
+
+{% Label %} Ejemplo de uso {% endLabel%}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo usar CORP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Se recomienda que **todos** los recursos se sirvan con una de las siguientes tres cabeceras.
+
+Puedes probar cómo las siguientes configuraciones afectan la carga de recursos bajo un [`Cross-Origin-Embedder-Policy: require-corp`](#coep) en [esta demostración](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Cambia el menú desplegable de **Cross-Origin-Resource-Policy** y haz clic en el botón **Reload the iframe (Recargar el iframe)** o **Reload the image (Recargar la imagen)** para ver el efecto.
+
+#### Permitir que los recursos se carguen `cross-origin`
+
+Se recomienda que los servicios similares a CDN apliquen `cross-origin` a los recursos (ya que generalmente se cargan mediante páginas de origen cruzado), a menos que ya se hayan servido a través de [CORS,](#cors) que tiene un efecto similar.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/qP2mspVMC6RazxDjWUrL.png", alt="Cross-Origin-Resource-Policy: cross-origin", width="800", height="234" %}
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+#### Limitar los recursos que se cargarán desde el `same-origin`
+
+`same-origin` debe aplicarse a los recursos que están destinados a ser cargados solo por páginas del mismo origen. Debes de aplicar esto a los recursos que incluyen información confidencial sobre el usuario o respuestas de una API que está destinada a ser llamada solo desde el mismo origen.
+
+Ten en cuenta que los recursos con esta cabecera aún se pueden cargar directamente, por ejemplo, navegando a la URL en una nueva ventana del navegador. La política de recursos de origen cruzado (CORP) solo protege el recurso para que no se incruste en otros sitios web.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/7UzYMWsbKkh89m5ZImvj.png", alt="Cross-Origin-Resource-Policy: same-origin", width="800", height="238" %}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+#### Limita los recursos que se cargarán desde el `same-site`
+
+`same-site` es recomendado que se aplique a los recursos que son similares a los anteriores pero que están destinados a ser cargados por otros subdominios de tu sitio.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/R9yNRGSJ4xABc560WRJI.png", alt="Cross-Origin-Resource-Policy: same-site", width="800", height="233" %}
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+{% Aside %}
+
+Para obtener más información sobre la diferencia entre el same-origin (mismo origen) y el same-site (mismo sitio), consulta [Comprendiendo "same-site" y "same-origin"](/same-site-same-origin/).
+
+{% endAside %}
+
+### Navegadores compatibles
+
+Chrome, Firefox, Safari, Edge
+
+Ver [más compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-resource-policy).
+
+### Aprende más
+
+- [Considera implementar una política de recursos de origen cruzado](https://resourcepolicy.fyi/)
+- [Hacer que tu sitio web sea "aislado de origen cruzado" utilizando COOP y COEP](/coop-coep/)
+- [Por qué necesitas un "cross-origin-isolated" para funciones potentes](/why-coop-coep/)
+
+{% endDetails %}
+
+## Política de apertura de origen cruzado (COOP) {: #coop}
+
+El sitio web de un atacante puede abrir otro sitio en una ventana emergente para obtener información al respecto aprovechando las [cross-site leaks](https://xsleaks.dev/). En algunos casos, esto también puede permitir la explotación de ataques de canal lateral basados en [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)).
+
+La cabecera de `Cross-Origin-Opener-Policy` proporciona una forma para que un documento se aísle de las ventanas de origen cruzado abiertas a través de `window.open()` o un enlace con `target="_blank"` sin `rel="noopener"`. Como resultado, cualquier abridor de origen cruzado del documento no tendrá ninguna referencia a él y no podrá interactuar con él.
+
+{% Label %} Ejemplo de uso {% endLabel%}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo usar COOP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Puedes probar cómo las siguientes configuraciones afectan la comunicación con una ventana emergente de origen cruzado en [esta demostración](https://cross-origin-isolation.glitch.me/). Cambia el menú desplegable de **Cross-Origin-Opener-Policy** tanto para el documento como para la ventana emergente, haz clic en el botón **Open a popup (Abrir una ventana emergente)** y luego haz clic en **Send a postMessage (Enviar un postMessage)** para ver si el mensaje realmente se envió.
+
+#### Aislar un documento de las ventanas de origen cruzado
+
+Al establecer el `same-origin` el documento se aislará de las ventanas de documentos de origen cruzado.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/mSDG9auD7r5asxGJvJjg.png", alt="Cross-Origin-Opener-Policy: same-origin", width="800", height="235" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Aislar un documento de las ventanas de origen cruzado pero permitir ventanas emergentes
+
+La configuración de `same-origin-allow-popups` permite que un documento retenga una referencia a tus ventanas emergentes a menos que establezcan COOP con ventanas emergentes del `same-origin` o del `same-origin-allow-popups`. Esto significa que `same-origin-allow-popups` puede proteger el documento para que no se haga referencia cuando se abre como una ventana emergente, pero permiten que se comunique con sus propias ventanas emergentes.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2uJZ0s2VnjxJUcBI2Ol9.png", alt="Cross-Origin-Opener-Policy: same-origin-allow-popups", width="800", height="233" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+#### Permitir que un documento sea referenciado por ventanas de origen cruzado
+
+`unsafe-none` es el valor predeterminado, pero puede indicar explícitamente que este documento se puede abrir mediante una ventana de origen cruzado y conservar el acceso mutuo.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/oSco89ZT3RP7gZzNKDjY.png", alt="Cross-Origin-Opener-Policy: unsafe-none", width="800", height="233" %}
+
+{% Aside 'gotchas' %}
+
+Dado que `unsafe-none` es el valor predeterminado significa que los desarrolladores web deben enviar `same-origin-allow-popups` o `same-origin`  explícitamente para proteger tu sitio web de los ataques de canal lateral.
+
+{% endAside %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+{% Aside %}
+
+Las funciones como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` o [JS Self Profiling API](https://wicg.github.io/js-self-profiling/) están deshabilitadas de forma predeterminada. Algunos navegadores te permiten usarlos en contextos "aislados de origen cruzado", que requieren que configures las cabeceras de [COOP](#coop) y [COEP](#coep).
+
+Para obtener más información, lee [Hacer que tu sitio web sea "cross-origin-isolated" utilizando COOP y COEP](/coop-coep/).
+
+{% endAside %}
+
+#### Informar patrones incompatibles con COOP
+
+Puedes recibir informes cuando COOP evita interacciones entre ventanas con la API de Reporting.
+
+```http
+Cross-Origin-Opener-Policy: same-origin; report-to="coop"
+```
+
+COOP también admite un modo de solo informe para que puedas recibir informes sin bloquear realmente la comunicación entre documentos de origen cruzado.
+
+```http
+Cross-Origin-Opener-Policy-Report-Only: same-origin; report-to="coop"
+```
+
+### Navegadores compatibles
+
+Chrome, Firefox, Edge
+
+Ver [más compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-opener-policy).
+
+### Aprende más
+
+- [Por qué necesitas un "cross-origin-isolated" para funciones potentes](/why-coop-coep/)
+
+{% endDetails %}
+
+## Uso compartido de recursos de origen cruzado (CORS) {: #cors}
+
+A diferencia de otros elementos de este artículo, el intercambio de recursos de origen cruzado (CORS) no es una cabecera, sino un mecanismo del navegador que solicita y permite el acceso a recursos de origen cruzado.
+
+De forma predeterminada, los navegadores imponen [same-origin policy (política del mismo origen)](/same-origin-policy/) para evitar que una página web acceda a recursos de origen cruzado. Por ejemplo, cuando se carga una imagen de origen cruzado, aunque se muestra visualmente en la página web, el JavaScript de la página no tiene acceso a los datos de la imagen. El proveedor de recursos puede relajar las restricciones y permitir que otros sitios web lean el recurso al optar por participar con CORS.
+
+{% Label %} Ejemplo de uso {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo usar CORS
+
+{% endDetailsSummary %}
+
+Antes de investigar cómo configurar el CORS, es útil comprender la distinción entre tipos de petición. Dependiendo de los detalles de la petición, una petición se clasificará como una **petición simple** o una **petición preflighted**.
+
+Criterios para una petición simple:
+
+- El método es `GET` , `HEAD` o `POST` .
+- Las cabeceras personalizadas solo incluyen `Accept`, `Accept-Language`, `Content-Language` y `Content-Type`.
+- El `Content-Type` es `application/x-www-form-urlencoded`, `multipart/form-data` o `text/plain`.
+
+Todo lo demás se clasifica como una petición preflighted. Para obtener más detalles, consulta [Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS#simple_requests).
+
+### Usos recomendados
+
+#### Petición simple
+
+Cuando una petición cumple con los criterios de petición simple, el navegador envía una petición de origen cruzado con un `Origin` que indica el origen de la petición.
+
+{% Label %} Ejemplo de la cabecera de consulta {% endLabel %}
+
+```http
+Get / HTTP/1.1
+Origin: https://example.com
+```
+
+{% Label %} Ejemplo de la cabecera de respuesta {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+- `Access-Control-Allow-Origin: https://example.com` indica que `https://example.com` puede acceder al contenido de la respuesta. Los recursos destinados a ser legibles por cualquier sitio pueden establecer esta cabecera en `*`, en tal caso el navegador solo requerirá que la petición se realice [sin credenciales](https://developer.mozilla.org/docs/Web/API/Request/credentials#value).
+- `Access-Control-Allow-Credentials: true` indica que las solicitudes que llevan credenciales (cookies) pueden cargar el recurso. De lo contrario, las solicitudes autenticadas se rechazarán incluso si el origen solicitante está presente en la cabecera de `Access-Control-Allow-Origin`.
+
+Puedes probar cómo la petición simple afecta la carga de recursos en un [`Cross-Origin-Embedder-Policy: require-corp`](#coep) en [esta demostración](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Haz clic en la casilla de verificación **Cross-Origin Resource Sharing (Intercambio de recursos de origen cruzado)** y haz clic en el botón de **Reload the image (Volver a cargar la imagen)** para ver el efecto.
+
+#### Petición preflighted
+
+Una petición preflighted está precedida por una consulta de `OPTIONS` para verificar si se permite el envío de la consulta posterior.
+
+{% Label %} Ejemplo de la cabecera de consulta {% endLabel %}
+
+```http
+OPTIONS / HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+```
+
+- `Access-Control-Request-Method: POST` permite realizar la siguiente consulta con el método `POST`.
+- `Access-Control-Request-Headers: X-PINGOTHER, Content-Type` permite al solicitante establecer los `X-PINGOTHER` y las cabeceras HTTP de `Content-Type` en la petición posterior.
+
+{% Label %} Ejemplos de la cabecera de respuesta {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+```
+
+- `Access-Control-Allow-Methods: POST, GET, OPTIONS` indica que las peticiones posteriores se pueden realizar con los métodos `POST`, `GET` y `OPTIONS`.
+- `Access-Control-Allow-Headers: X-PINGOTHER, Content-Type` indica que las peticiones posteriores pueden incluir las cabeceras `X-PINGOTHER` y `Content-Type`.
+- `Access-Control-Max-Age: 86400` indica que el resultado de la petición preflighted se puede almacenar en caché durante 86400 segundos.
+
+### Navegadores compatibles
+
+Chrome, Firefox, Safari, Edge
+
+Ver [más compatibilidades](https://caniuse.com/mdn-http_headers_content-length_cors_response_safelist).
+
+### Aprende más
+
+- [Intercambio de recursos de origen cruzado (CORS)](/cross-origin-resource-sharing/)
+- [Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+
+{% endDetails %}
+
+## Política de incrustación de origen cruzado (COEP) {: #coep}
+
+Para reducir la habilidad de [los ataques basados en Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) para robar recursos de origen cruzado, funciones como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` o [JS Self Profiling API](https://wicg.github.io/js-self-profiling/) están deshabilitadas de forma predeterminada.
+
+`Cross-Origin-Embedder-Policy: require-corp` evita que los documentos y los workers carguen recursos de origen cruzado como imágenes, scripts, hojas de estilo, iframes y otros, a menos que estos recursos opten explícitamente por cargarse a través de cabeceras [CORS](#cors) o [CORP.](#corp) COEP se puede combinar con la `Cross-Origin-Opener-Policy` para optar por un documento en el [aislamiento de origen cruzado](/cross-origin-isolation-guide/).
+
+Utiliza `Cross-Origin-Embedder-Policy: require-corp` cuando desees habilitar el [aislamiento de origen cruzado](/coop-coep/) para tu documento.
+
+{% Label %} Ejemplo de uso {% endLabel %}
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo usar COEP
+
+{% endDetailsSummary %}
+
+### Usos de ejemplo
+
+COEP toma un valor único de `require-corp`. Al enviar esta cabecera, puedes indicarle al navegador que bloquee la carga de recursos que no se inscriben a través de [CORS](#cors) o [CORP](#corp).
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="Cómo funciona COEP", width="800", height="410" %}
+
+Puedes probar cómo las siguientes configuraciones afectan la carga de recursos en [esta demostración](https://cross-origin-isolation.glitch.me/). Cambia el menú desplegable de **Cross-Origin-Embedder-Policy**, el menú desplegable de **Cross-Origin-Resource-Policy**, la casilla de verificación **Report Only** etc, para ver cómo afectan la carga de recursos. Además, abre [the reporting endpoint demo (la demostración del punto final de informes)](https://reporting-endpoint.glitch.me/) para ver si se informan los recursos bloqueados.
+
+#### Habilitar el aislamiento de origen cruzado
+
+Habilita el [aislamiento entre orígenes](/coop-coep) enviando `Cross-Origin-Embedder-Policy: require-corp` junto con `Cross-Origin-Opener-Policy: same-origin`.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Informe de recursos incompatibles con COEP
+
+Puedes recibir informes de recursos bloqueados causados por COEP con la API de Reporting.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp; report-to="coep"
+```
+
+COEP también admite el modo de solo informe para que puedas recibir informes sin bloquear realmente la carga de recursos.
+
+```http
+Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="coep"
+```
+
+### Navegadores compatibles
+
+Chrome, Firefox, Edge
+
+Ver [más compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-embedder-policy).
+
+### Aprende más
+
+- [Cómo hacer que su sitio web sea "aislado y de origen cruzado" utilizando COOP y COEP](/coop-coep/)
+- [Por qué necesitas un "cross-origin-isolated" para funciones potentes](/why-coop-coep/)
+- [Una guía para habilitar el aislamiento de origen cruzado](/cross-origin-isolation-guide/)
+
+{% endDetails %}
+
+## HTTP Strict Transport Security (HSTS) {: #hsts}
+
+La comunicación a través de una conexión HTTP plain no está encriptada, lo que hace que los datos transferidos sean accesibles para los espías a nivel de red.
+
+`Strict-Transport-Security` informa al navegador que nunca debe cargar el sitio usando HTTP y usar HTTPS en su lugar. Una vez configurado, el navegador utilizará HTTPS en lugar de HTTP para acceder al dominio sin una redirección durante el tiempo definido en la cabecera.
+
+{% Label %} Ejemplo de uso {% endLabel%}
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+{% Details %} {% DetailsSummary %}
+
+Cómo utilizar HSTS
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Todos los sitios web que realizan la transición de HTTP a HTTPS deben responder con un `Strict-Transport-Security` cuando se recibe una consulta con HTTP.
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+### Navegadores compatibles
+
+Chrome, Firefox, Safari, Edge
+
+Ver [más compatibilidades](https://caniuse.com/stricttransportsecurity).
+
+### Aprende más
+
+- [Strict-Transport-Security - HTTP](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)
+
+{% endDetails %}
+
+## Lecturas complementarias
+
+- [Post-Spectre Web Development (Desarrollo web Post-Spectre)](https://www.w3.org/TR/post-spectre-webdev/)
diff --git a/src/site/content/es/secure/what-is-mixed-content/index.md b/src/site/content/es/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..2ef74e95c54
--- /dev/null
+++ b/src/site/content/es/secure/what-is-mixed-content/index.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: "¿Qué es contenido mixto?"
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: El contenido mixto se produce cuando el HTML inicial se carga mediante una conexión HTTPS segura, pero otros recursos se cargan por medio de una conexión HTTP insegura.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+El **contenido mixto** se produce cuando el HTML inicial se carga mediante una conexión [HTTPS](/why-https-matters/) segura, pero otros recursos se cargan por medio de una conexión HTTP insegura. Esto se denomina contenido mixto porque tanto el contenido HTTP como el HTTPS se cargan para mostrar la misma página y la solicitud inicial era segura mediante HTTPS.
+
+La solicitud de subrecursos basados en el protocolo HTTP inseguro debilita la seguridad de toda la página, ya que estas solicitudes son vulnerables a [**los ataques en las rutas**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1), en los que un atacante espía una conexión de red y ve o modifica la comunicación entre dos partes. Al utilizar estos recursos, los atacantes pueden rastrear a los usuarios y reemplazar el contenido de un sitio web y, en el caso del contenido mixto activo, asumir el control completo de la página, no solo de los recursos inseguros.
+
+Aunque muchos navegadores reportan al usuario advertencias sobre el contenido mixto, cuando esto sucede, ya es demasiado tarde: las solicitudes inseguras ya se llevaron a cabo y la seguridad de la página está comprometida.
+
+Por esta razón, los navegadores bloquean con mayor frecuencia los contenidos mixtos. Si tiene contenido mixto en su sitio, corregirlo garantizará que el contenido siga cargándose conforme los navegadores se vuelvan más estrictos.
+
+## Los dos tipos de contenido mixto
+
+Los dos tipos de contenido mixto son: activo y pasivo.
+
+El **contenido mixto pasivo** se refiere al contenido que no interactúa con el resto de la página, y por lo tanto un ataque de hombre en el medio se limita a lo que puede hacer si intercepta o cambia ese contenido. El contenido mixto pasivo se define como contenido de imágenes, video y audio.
+
+El **contenido mixto activo** interactúa con la página como un todo y permite a que un atacante efectúe casi cualquier cosa con la página. El contenido mixto activo incluye scripts, hojas de estilo, iframes y otro tipo de código que el navegador puede descargar y ejecutar.
+
+### Contenido mixto pasivo
+
+El contenido mixto pasivo se considera menos problemático, pero aún así representa una amenaza de seguridad para su sitio y sus usuarios. Por ejemplo, un atacante puede interceptar las solicitudes HTTP de las imágenes de su sitio y modificar o reemplazar estas imágenes. El atacante puede cambiar las imágenes de los botones *guardar* y *eliminar*, lo cual hace que sus usuarios eliminen contenido sin la intención de hacerlo; reemplacen los diagramas de sus productos con contenido lascivo o pornográfico, lo cual perjudica a su sitio; o se reemplacen las imágenes de sus productos con anuncios de un sitio o producto diferente.
+
+Incluso si el atacante no altera el contenido de su sitio, un atacante puede rastrear a los usuarios mediante solicitudes de contenido mixto. El atacante puede saber qué páginas visita un usuario y qué productos ve basándose en las imágenes u otros recursos que carga el navegador.
+
+Si el contenido mixto pasivo está presente, la mayoría de los navegadores indicarán en la barra de direcciones URL que la página no es segura, incluso cuando la propia página se cargó por medio de HTTPS. Puede observar este comportamiento con esta [demostración](https://passive-mixed-content.glitch.me/) que contiene ejemplos de contenido mixto pasivo.
+
+Hasta hace poco tiempo, el contenido mixto pasivo se cargaba en todos los navegadores, ya que su bloqueo hubiera perjudicado a muchos sitios web. Esta situación está comenzando a cambiar, por lo que es vital actualizar cualquier instancia de contenido mixto en su sitio.
+
+[Chrome actualmente implementa](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) la actualización automática del contenido mixto pasivo cuando es posible. La actualización automática significa que si el activo está disponible en HTTPS, pero se codificó como HTTP, el navegador cargará la versión HTTPS. Si no se encuentra una versión segura, el activo no se cargará.
+
+Siempre que se detecta contenido mixto o actualizaciones automáticas de contenido mixto pasivo, Chrome registra mensajes detallados en la pestaña **Problemas** de DevTools que le indican cómo solucionar el problema específico.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt = "La pestaña Problemas de Chrome DevTools muestra información detallada sobre el problema específico de contenido mixto y cómo solucionarlo", width = "800", height = "310 " %}</figure>
+
+### Contenido mixto activo
+
+El contenido activo mixto representa una amenaza mayor que el contenido pasivo mixto. Un atacante puede interceptar y reescribir el contenido activo, con lo cual puede obtener el control total de su página o incluso de todo su sitio web. Esto permitirá que el atacante modifique cualquier aspecto de la página, como mostrar un contenido totalmente diferente, robar las contraseñas de los usuarios u otras credenciales de inicio de sesión, robar las cookies de sesión de los usuarios o redirigir a los usuarios a un sitio completamente diferente.
+
+Debido a la peligrosidad de esta amenaza, la mayoría de los navegadores ya bloquean este tipo de contenidos de forma predeterminada para proteger a los usuarios, pero la función difiere según los proveedores y las versiones de los navegadores.
+
+Esta otra [demostración](https://active-mixed-content.glitch.me/) contiene ejemplos de contenido mixto activo. [Cargue el ejemplo a través de HTTP](http://active-mixed-content.glitch.me/) para ver el contenido que está bloqueado cuando [carga el ejemplo a través de HTTPS](https://active-mixed-content.glitch.me/) . El contenido bloqueado también se detallará en la pestaña **Problemas.**
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="La pestaña Problemas de Chrome DevTools muestra información detallada sobre el problema específico de contenido mixto y cómo solucionarlo", width="800", height="361" %}</figure>
+
+{% Aside %} Además, los navegadores destacan el contenido bloqueado en sus DevTools. Los problemas de contenido bloqueado se detallan en la pestaña **Problemas** de los navegadores basados en Chromium. Firefox y Safari registran los mensajes en la consola. {% endAside %}
+
+## La especificación del contenido mixto
+
+Los navegadores siguen los [requisitos del contenido mixto](https://w3c.github.io/webappsec-mixed-content/), que define las categorías [**contenido con opción de bloqueo**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content) y [**contenido de bloqueo**](https://w3c.github.io/webappsec-mixed-content/#category-blockable).
+
+Según las especificaciones, un recurso se considera como contenido con opción de bloqueo "cuando el riesgo de permitir su uso como contenido mixto es mayor que el riesgo de dañar partes significativas de la web"; esto es un subconjunto de la categoría de contenido mixto pasivo descrito anteriormente.
+
+Todo el contenido que no es **de bloqueo opcional** se considera **bloqueable**, y el navegador debe bloquearlo.
+
+{% Aside %} Hay un [Nivel 2 de la especificación de contenido mixto](https://w3c.github.io/webappsec-mixed-content/level2.html) en proceso, que agregará la actualización automática a los requisitos. {% endAside %}
+
+Durante los últimos años, el [uso de HTTPS aumentó drásticamente](https://transparencyreport.google.com/https/overview), y se convirtió en la opción predeterminada en la web. Esto hace que ahora sea más factible para los navegadores considerar el bloqueo de todo el contenido mixto, incluso aquellos tipos de sub-recursos definidos en la [especificación de contenido mixto](https://w3c.github.io/webappsec/specs/mixedcontent/) como **opciones de bloqueo**. Por este motivo, ahora vemos que Chrome adopta un enfoque más estricto con respecto a estos sub-recursos.
+
+### Navegadores antiguos
+
+Es importante recordar que no todos los visitantes de su sitio web utilizan los navegadores más actualizados. Las diferentes versiones de los distintos proveedores de navegadores consideran el contenido mixto de forma diferente. Por lo general, los navegadores y las versiones más antiguas no bloquean ningún contenido mixto, lo que resulta muy inseguro para el usuario.
+
+Al corregir los problemas de contenido mixto, garantiza que su contenido sea visible en los nuevos navegadores. A la vez, ayudará a proteger a los usuarios de contenidos peligrosos que no se bloquean en los navegadores más antiguos.
diff --git a/src/site/content/es/secure/why-https-matters/index.md b/src/site/content/es/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..80f7478fc4a
--- /dev/null
+++ b/src/site/content/es/secure/why-https-matters/index.md
@@ -0,0 +1,42 @@
+---
+layout: post
+title: Por qué el HTTPS es importante
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: |2-
+
+  HTTPS protege la integridad de tu sitio web, protege la privacidad y seguridad de
+  tus usuarios, y es un nuevo requisito previo para las potentes API de plataforma web.
+tags:
+  - security
+---
+
+Siempre debes de proteger todos tus sitios web con HTTPS, incluso si no manejan comunicaciones confidenciales. Además de proporcionar seguridad crítica e integridad de datos tanto para tus sitios web como para la información personal de tus usuarios, el HTTPS es un requisito para muchas funciones nuevas del navegador, en particular las necesarias para [las aplicaciones web progresivas (PWA)](/progressive-web-apps).
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## Resumen {: #summary }
+
+- Los intrusos, tanto malignos como benignos, explotan todos los recursos desprotegidos entre tus sitios web y tus usuarios.
+- Muchos intrusos miran comportamientos agregados para identificar a sus usuarios.
+- HTTPS no solo bloquea el uso indebido de tu sitio web. También es un requisito para muchas funciones de vanguardia y es una tecnología habilitadora para capacidades similares a las de una aplicación, como los service workers.
+
+## HTTPS protege la integridad de tu sitio web {: #integrity }
+
+HTTPS ayuda a evitar que los intrusos manipulen las comunicaciones entre tus sitios web y los navegadores de tus usuarios. Los intrusos incluyen atacantes maliciosos de manera intencional y las empresas legítimas, pero intrusivas, como son las ISP y hoteles, inyectan anuncios en las páginas.
+
+Los intrusos explotan las comunicaciones no protegidas para engañar a tus usuarios para que proporcionen información confidencial o instalen malware, o para insertar sus propios anuncios en tus recursos. Por ejemplo, algunos terceros inyectan anuncios en sitios web que potencialmente rompen las experiencias de los usuarios y crean vulnerabilidades en la seguridad.
+
+Los intrusos explotan todos los recursos desprotegidos que viajan entre tus sitios web y tus usuarios. Imágenes, cookies, scripts, HTML… todos son explotables. Las intrusiones pueden ocurrir en cualquier lugar de la red, incluyendo la máquina del usuario, un punto de acceso Wi-Fi o un ISP comprometido, solo por nombrar algunos ejemplos.
+
+## HTTPS protege la privacidad y la seguridad de tus usuarios {: #privacy }
+
+HTTPS evita que los intrusos puedan escuchar pasivamente las comunicaciones entre tus sitios web y tus usuarios.
+
+Un error común sobre el HTTPS es que los únicos sitios web que necesitan HTTPS son los que manejan comunicaciones confidenciales. Cada solicitud HTTP desprotegida puede potencialmente revelar información sobre los comportamientos y las identidades de tus usuarios. Aunque una sola visita a uno de tus sitios web desprotegidos puede no parecer alarmante, algunos intrusos miran las actividades de navegación agregadas de tus usuarios para hacer inferencias sobre tus comportamientos e intenciones y también para [anonimizar](https://en.wikipedia.org/wiki/De-anonymization) sus identidades. Por ejemplo, los empleados pueden revelar inadvertidamente condiciones de salud delicadas a sus jefes con solo leer artículos médicos desprotegidos.
+
+## HTTPS es el futuro de la web {: #capabilities }
+
+Las nuevas y potentes funciones de la plataforma web, como tomar fotografías o grabar audio con `getUserMedia()`, permitir experiencias de aplicaciones sin conexión con los [service workers](/service-workers-cache-storage/) o crear [aplicaciones web progresivas](/progressive-web-apps), requieren permiso explícito del usuario antes de ejecutar. Muchas API más antiguas también se están actualizando para requerir permiso de ejecución, como lo es la [API de Geolocalización](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation). HTTPS es un componente clave para los flujos de trabajo de permisos tanto para estas nuevas funciones como para las API actualizadas.
diff --git a/src/site/content/es/tags/index.11tydata.js b/src/site/content/es/tags/index.11tydata.js
new file mode 100644
index 00000000000..77ccce9b55f
--- /dev/null
+++ b/src/site/content/es/tags/index.11tydata.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {index} = require('../../../_collections/hooks/tags');
+
+module.exports = {
+  pagination: {
+    before: (tags) => index(tags),
+  },
+};
diff --git a/src/site/content/es/tags/index.md b/src/site/content/es/tags/index.md
new file mode 100644
index 00000000000..88540b14472
--- /dev/null
+++ b/src/site/content/es/tags/index.md
@@ -0,0 +1,12 @@
+---
+layout: index-page
+title: Tags
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+pagination:
+  data: collections.tags
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/es/tags/individual.11tydata.js b/src/site/content/es/tags/individual.11tydata.js
new file mode 100644
index 00000000000..f7e04e7077b
--- /dev/null
+++ b/src/site/content/es/tags/individual.11tydata.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {individual} = require('../../../_collections/hooks/tags');
+const {lang} = require('../lang');
+
+module.exports = {
+  pagination: {
+    before: (tags) => individual(tags, lang),
+  },
+};
diff --git a/src/site/content/es/tags/individual.md b/src/site/content/es/tags/individual.md
new file mode 100644
index 00000000000..ebf8989cb5c
--- /dev/null
+++ b/src/site/content/es/tags/individual.md
@@ -0,0 +1,18 @@
+---
+layout: item-page
+path: 'tags'
+showHero: true
+title: Tags
+permalink: /{{lang}}/{{ paged.href }}{% if paged.index > 0 %}{{ paged.index + 1 }}/{% endif %}index.html
+description: Our latest news, updates, and stories for developers
+renderData:
+  title: "{{ paged.overrideTitle or paged.title | i18n(locale) or title }}"
+  description: "{{ paged.description | i18n(locale) or description }}"
+  rss: "{{ paged.href }}feed.xml"
+pagination:
+  data: collections.tags
+  size: 1
+  alias: paged
+  resolve: values
+  addAllPagesToCollections: true
+---
diff --git a/src/site/content/es/vitals/index.md b/src/site/content/es/vitals/index.md
new file mode 100644
index 00000000000..5ce839b1420
--- /dev/null
+++ b/src/site/content/es/vitals/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: Web Vitals
+description: Métricas esenciales para un sitio saludable
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+Asegurar una calidad de experiencia de usuario óptima es clave para el éxito a largo plazo de cualquier sitio web. Tanto para un propietario de un negocio, especialista de marketing o desarrollador, Web Vitals pueden ayudarle a cuantificar la experiencia de su sitio e identificar oportunidades para mejorar.
+
+## Información general
+
+Web Vitals es una iniciativa de Google para proporcionar una guía unificada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web.
+
+Google ha proporcionado una serie de herramientas a lo largo de los años para medir y generar informes de rendimiento. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que a otros les resulta difícil mantenerse al día con la enorme cantidad de herramientas y métricas disponibles.
+
+Los propietarios de sitios no deberían tener que ser gurús del rendimiento para comprender la calidad de la experiencia que brindan a sus usuarios. La iniciativa Web Vitals tiene como objetivo simplificar el panorama y ayudar a los sitios a centrarse en las métricas que más importan, los llamados **Core Web Vitals**.
+
+## Core Web Vitals
+
+Los Core Web Vitals son el subconjunto de Web Vitals que se aplica a todas las páginas web, todos los propietarios de sitios deben medirlos y aparecerán en todas las herramientas de Google. Cada uno de los Core Web Vitals representa una faceta distinta de la experiencia del usuario, se puede medir [en el campo](/user-centric-performance-metrics/#how-metrics-are-measured) y refleja la experiencia en el mundo real de un resultado indispensable [centrado en el usuario](/user-centric-performance-metrics/#how-metrics-are-measured).
+
+Las métricas que componen los Core Web Vitals [evolucionarán](#evolving-web-vitals) con el tiempo. El conjunto actual en el 2020 se centra en tres aspectos de la experiencia del usuario: *carga* , *interactividad* y *estabilidad visual*, e incluye las siguientes métricas (y sus respectivos umbrales):
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Recomendaciones de umbral para LCP", width="400", height="350" %}   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Recomendaciones de umbral para FID", width="400", height="350" %}   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Recomendaciones de umbral para CLS", width="400", height="350" %} </div>
+
+- **[Largest Contentful Paint (LCP)](/lcp/)** : se refiere al tiempo para el despliegue del contenido más extenso, LCP por sus siglas en inglés, mide el rendimiento de *carga.* Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los **2,5 segundos desde** que la página comienza a cargarse.
+- **[First Input Delay (FID)](/fid/)**: se refiere a la demora para la primera entrada, FID por sus siglas en inglés, mide la *interactividad*. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de **100 milisegundos**.
+- **[Cumulative Layout Shift (CLS)](/cls/)**: se refiere a el cambio acumulativo en el diseño CLS por sus siglás en inglés, mide *la estabilidad visual*. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de **0,1.**
+
+Con cada una de las métricas anteriores, para asegurarse de que está alcanzando el objetivo recomendado para la mayoría de sus usuarios, un buen umbral para medir es el **percentil 75** de cargas de página, segmentado en dispositivos móviles y de escritorio.
+
+Las herramientas que evalúan el cumplimiento de los Core Web Vitals deben considerar la aprobación de una página si cumple con los objetivos recomendados en el percentil 75 para las tres métricas anteriores.
+
+{% Aside %} Para obtener más información sobre la investigación y la metodología en que se basan estas recomendaciones, consulte: [Definición de los umbrales de métricas de Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### Herramientas para medir y generar informes de Core Web Vitals
+
+Google cree que los Core Web Vitals son fundamentales para todas las experiencias web. Como resultado, se compromete a hacer aflorar estas métricas [en todas sus herramientas populares](/vitals-tools/). Las siguientes secciones detallan qué herramientas son compatibles con los Core Web Vitals.
+
+#### Herramientas en el campo para medir los Core Web Vitals
+
+El [Chrome User Experience Report (Informe de experiencia del usuario de Chrome)](https://developer.chrome.com/docs/crux/) recopila datos de medición de usuarios reales y anónimos para cada Core Web Vital. Estos datos permiten a los propietarios de sitios evaluar rápidamente su rendimiento sin tener que instrumentar manualmente los análisis en sus páginas, y potencian herramientas como [PageSpeed Insights](https://pagespeed.web.dev/) y el [informe de Core Web Vitals](https://support.google.com/webmasters/answer/9205520) de la Search Console.
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Chrome User Experience Report</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">Search Console (Core Web Vitals Report)</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} Para obtener información sobre cómo utilizar estas herramientas y qué herramienta es la adecuada para su caso de uso, consulte: [Getting started with measuring Web Vitals (Introducción a la medición de Web Vitals)](/vitals-measurement-getting-started/) {% endAside %}
+
+Los datos proporcionados por el Chrome User Experience Report ofrecen una forma rápida de evaluar el rendimiento de los sitios, pero no proporcionan la telemetría detallada por página vista que a menudo es necesaria para diagnosticar, monitorizar y reaccionar rápidamente a las regresiones con precisión. Como resultado, recomendamos encarecidamente que los sitios configuren su propia monitorización de usuarios reales.
+
+#### Medir los Core Web Vitals en JavaScript
+
+Cada uno de los Core Web Vitals se puede medir en JavaScript utilizando APIs estándares del web.
+
+La forma más sencilla de medir todos los Core Web Vitals es utilizar la biblioteca de JavaScript de [web-vitals](https://github.com/GoogleChrome/web-vitals), una pequeña envoltura alrededor de las API web subyacentes lista para la producción que mide cada métrica de una manera que coincide con la forma en que son informadas por todas las herramientas de Google enumeradas anteriormente.
+
+Con la [biblioteca web-vitals](https://github.com/GoogleChrome/web-vitals), medir cada métrica es tan simple como llamar a una sola función (consulte la documentación para conocer el [uso](https://github.com/GoogleChrome/web-vitals#usage) completo y los detalles de la [API):](https://github.com/GoogleChrome/web-vitals#api)
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+Una vez que haya configurado su sitio para usar la biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals) para medir y enviar sus datos de Core Web Vitals a un punto final de análisis, el siguiente paso es agregar y hacer un reporte sobre esos datos para ver si sus páginas cumplen con los umbrales recomendados para al menos el 75% de las visitas a la página.
+
+Algunos proveedores de análisis tienen soporte integrado para métricas de Core Web Vitals, incluso aquellos que no lo tienen, deberían incluir funciones de métricas personalizadas básicas que le permitan medir Core Web Vitals en su herramienta.
+
+Un ejemplo de esto es el [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report), que permite a los propietarios de sitios medir sus Core Web Vitals utilizando Google Analytics. Para obtener una guía sobre cómo medir los valores fundamentales de la Web mediante otras herramientas de análisis, consulte el artículo sobre [prácticas recomendadas para medir Core Web Vitals en el campo](/vitals-field-measurement-best-practices/).
+
+También se puede reportar sobre cada uno de los Core Web Vitals sin escribir código utilizando la [Extensión para Chrome de Web Vitals](https://github.com/GoogleChrome/web-vitals-extension). Esta extensión utiliza la biblioteca de [web-vitals](https://github.com/GoogleChrome/web-vitals) para medir cada una de estas métricas y mostrarlas a los usuarios mientras navegan por la web.
+
+Esta extensión puede resultar útil para comprender el rendimiento de sus propios sitios, los de la competencia y la web en general.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Extensión Web Vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Como alternativa, los desarrolladores que prefieren medir estas métricas directamente a través de las API web subyacentes pueden consultar estas guías de métricas para obtener detalles de implementación:
+
+- [Medir LCP en JavaScript](/lcp/#measure-lcp-in-javascript)
+- [Medir FID en JavaScript](/fid/#measure-fid-in-javascript)
+- [Medir CLS en JavaScript](/cls/#measure-cls-in-javascript)
+
+{% Aside %} Para obtener información adicional sobre cómo medir estas métricas mediante servicios de análisis populares (o sus propias herramientas de análisis internas), consulte: [Prácticas recomendadas para medir Web Vitals en el campo](/vitals-field-measurement-best-practices/) {% endAside %}
+
+#### Herramientas de laboratorio para medir Core Web Vitals
+
+Si bien todos los Core Web Vitals son, ante todo, métricas en el campo, muchas de ellas también se pueden medir en el laboratorio.
+
+La medición en el laboratorio es la mejor manera de probar el rendimiento de las funciones durante el desarrollo, antes de que se publiquen a los usuarios. También es la mejor forma de detectar las regresiones de rendimiento antes de que sucedan.
+
+Las siguientes herramientas se pueden utilizar para medir los Core Web Vitals en un entorno de laboratorio:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">DevTools de Chrome</a></td>
+        <td>✔</td>
+        <td>✘ (use <a href="/tbt/">TBT</a> en su lugar)</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/" class="_active_edit_href"> Lighthouse</a></td>
+        <td>✔</td>
+        <td>✘ (use <a href="/tbt/">TBT</a> en su lugar)</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Las herramientas como Lighthouse que cargan páginas en un entorno simulado sin un usuario no pueden medir FID (no hay entrada de usuario). Sin embargo, la métrica Total Blocking Time (TBT) se puede medir en laboratorio y es un excelente proxy para FID. Las optimizaciones de rendimiento que mejoran el TBT en el laboratorio deberían mejorar la FID en el campo (consulte las recomendaciones de rendimiento a continuación). {% endAside %}
+
+Si bien la medición de laboratorio es una parte esencial para brindar excelentes experiencias, no sustituye a la medición en el campo.
+
+El rendimiento de un sitio puede variar drásticamente según las capacidades del dispositivo de un usuario, las condiciones de su red, qué otros procesos pueden estar ejecutándose en el dispositivo y cómo interactúan con la página. De hecho, la puntuación de cada una de las métricas de Core Web Vitals puede verse afectada por la interacción del usuario. Solo la medición en el campo puede capturar con precisión la imagen completa.
+
+### Recomendaciones para mejorar sus puntuaciones
+
+Una vez que haya medido los Core Web Vitals e identificado las áreas de mejora, el siguiente paso es optimizar. Las siguientes guías ofrecen recomendaciones específicas sobre cómo optimizar sus páginas para cada uno de los Core Web Vitals:
+
+- [Optimizar LCP](/optimize-lcp/)
+- [Optimizar FID](/optimize-fid/)
+- [Optimizar CLS](/optimize-cls/)
+
+## Otros Web Vitals
+
+Si bien los Core Web Vitals son las métricas críticas para comprender y brindar una excelente experiencia de usuario, también existen otras métricas vitales.
+
+Estos otros Web Vitals a menudo sirven como métricas proxy o suplementarias para los Core Web Vitals, para ayudar a capturar una mayor parte de la experiencia o para ayudar a diagnosticar un problema específico.
+
+Por ejemplo, las métricas [Time to First Byte (TTFB)](/ttfb/) y [First Contentful Paint (FCP)](/fcp/) son aspectos vitales de la *experiencia de carga* y son útiles para diagnosticar problemas con LCP ([tiempos de respuesta del servidor](/overloaded-server/) lentos o [recursos de bloqueo de renderizado](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/), respectivamente).
+
+De manera similar, métricas como [Total Blocking Time (TBT)](/tbt/) y [Time to Interactive (TTI)](/tti/) son métricas de laboratorio que son vitales para detectar y diagnosticar posibles *problemas de interactividad* que afectarán a la FID. Sin embargo, no forman parte del conjunto Core Web Vitals porque no se pueden medir en el campo ni reflejan un resultado [centrado en el usuario.](/user-centric-performance-metrics/#how-metrics-are-measured)
+
+## Evolución de los Web Vitals
+
+Los Web Vitals y los Core Web Vitals son los mejores indicadores disponibles que los desarrolladores tienen en la actualidad para medir la calidad de la experiencia en la web, pero estos indicadores no son perfectos y se deben esperar mejoras o adiciones futuras.
+
+Los **Core Web Vitals** son relevantes para todas las páginas web y aparecen en las herramientas relevantes de Google. Los cambios en estas métricas tendrán un impacto de gran alcance; por ello, los desarrolladores deben esperar que las definiciones y los umbrales de Core Web Vitals sean estables y que las actualizaciones ocurran con un previo aviso y una cadencia anual predecible.
+
+Los otros Web Vitals suelen ser específicos del contexto o de la herramienta, y pueden ser más experimentales que los Core Web Vitals. Sus definiciones y umbrales pueden cambiar con mayor frecuencia.
+
+Para todos los Web Vitals, los cambios se documentarán de manera clara en este [REGISTRO DE CAMBIOS](http://bit.ly/chrome-speed-metrics-changelog) público.
diff --git a/src/site/content/fr/blog/blog.11tydata.js b/src/site/content/fr/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/fr/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/fr/blog/referrer-best-practices/index.md b/src/site/content/fr/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..ea7faa4102f
--- /dev/null
+++ b/src/site/content/fr/blog/referrer-best-practices/index.md
@@ -0,0 +1,333 @@
+---
+layout: post
+title: Bonnes pratiques concernant Referer et Referrer-Policy
+subhead: Bonnes pratiques pour configurer votre Referrer-Policy et utiliser le referrer (référent) dans les requêtes entrantes.
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2021-10-14
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: "Envisagez de définir une Referrer-Policy strict-origin-when-cross-origin. Cela permet de conserver une grande partie de l'utilité du referrer, tout en atténuant le risque de fuite de données cross-origin."
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## Sommaire
+
+- Les fuites d'informations cross-origin inattendues entravent la confidentialité des internautes. Une Referrer-Policy protrectrice peut aider.
+- Envisagez de configurer Referrer Policy `strict-origin-when-cross-origin`. Cela permet de conserver une grande partie de l'utilité du referrer, tout en atténuant le risque de fuite de données cross-origin.
+- N'utilisez pas de referrers pour la protection contre la falsification de requête intersites (CSRF, Cross Site Request Forgery). Utilisez plutôt des [jetons CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) et d'autres en-têtes comme couche de sécurité supplémentaire.
+
+{% Aside %} Avant de commencer :
+
+- Si vous n'êtes pas sûr de la différence entre "site" et "origin", consultez [Comprendre "same-site" et "same-origin"](/same-site-same-origin/).
+- Il manque un R à l'en-tête `Referer` en raison d'une faute d'orthographe d'origine dans la spécification. L'en-tête `Referrer-Policy` et `referrer` dans JavaScript et le DOM sont correctement orthographiés. {% endAside %}
+
+## Introduction à Referer et Referrer-Policy
+
+Les requêtes HTTP peuvent inclure l'en-tête optionnel [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer), qui indique l'origine ou l'URL de la page Web à partir de laquelle la requête a été effectuée. L'en-tête [`Referrer-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) définit quelles données sont mises à disposition dans l'en-tête `Referer`.
+
+Dans l'exemple ci-dessous, l'en-tête `Referer` inclut l'URL complète de la page du `site-one` à partir de laquelle la requête a été faite.
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="Requête HTTP incluant un en-tête Referer.", width="800", height="573" %}</figure>
+
+L'en-tête `Referer` peut être présent dans différents types de requêtes :
+
+- Requêtes de navigation, lorsqu'un utilisateur clique sur un lien
+- Requêtes de sous-ressources, lorsqu'un navigateur fait la requête d'images, d'IFrames, de scripts et d'autres ressources dont une page a besoin
+
+Pour les navigations et les IFrames, ces données sont également accessibles via JavaScript à l'aide de `document.referrer`.
+
+La valeur `Referer` peut être pertinente. Par exemple, un service d'analyse peut utiliser la valeur pour déterminer que 50 % des visiteurs sur `site-two.example` proviennent de `social-network.example`.
+
+Mais lorsque l'URL complète, y compris le chemin d'accès et la chaîne de requête, est envoyée dans le `Referer` **des origines**, cela peut **nuire à la confidentialité** et poser également **des risques de sécurité**. Examinez ces URL :
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URL avec chemins, mappés à différents risques de confidentialité et de sécurité.", width="800", height="370" %}</figure>
+
+Les URL 1 à 5 contiennent des informations privées, parfois même d'identification ou sensibles. La fuite silencieuse de ces informations des origines peut compromettre la confidentialité des internautes.
+
+L'URL #6 est une [URL de capacité](https://www.w3.org/TR/capability-urls/). Vous ne voulez pas qu'elle arrive dans les mains de quelqu'un d'autre que l'utilisateur prévu. Si cela devait se produire, un acteur malveillant pourrait détourner le compte de cet utilisateur.
+
+**Afin de restreindre les données referrer disponibles pour les requêtes de votre site, vous pouvez définir une Referrer-Policy.**
+
+## Quelles sont les politiques disponibles et en quoi diffèrent-elles ?
+
+Vous pouvez sélectionner l'une des huit politiques. Selon la politique, les données disponibles à partir de l'en-tête `Referer` (et `document.referrer`) peuvent :
+
+- Ne présenter aucune donnée (aucun en-tête `Referer` n'est présent)
+- Être uniquement l'[origine](/same-site-same-origin/#origin)
+- Être l'URL complète : origine, chemin et chaîne de requête
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Données pouvant être contenues dans l'en-tête Referer et document.referrer.", width="800", height="255" %}</figure>
+
+Certaines politiques sont conçues pour se comporter différemment selon le **contexte** : requête cross-origin ou same-origin, sécurité (si la destination de la requête est aussi sécurisée que l'origine), ou les deux. Ceci est utile pour limiter la quantité d'informations partagées entre les origines ou vers des origines moins sécurisées, tout en maintenant la qualité du referrer au sein de votre propre site.
+
+Voici un aperçu montrant comment les Referrer-Policy restreignent les données d'URL disponibles à partir de l'en-tête Referer et de `document.referrer` :
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Différentes Referrer-Policy et leur comportement, en fonction du contexte de sécurité et cross-origin.", width="800", height="537" %}</figure>
+
+MDN fournit une [liste complète de politiques et d'exemples de comportement](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives).
+
+Remarques :
+
+- Toutes les politiques qui prennent en compte le schéma (HTTPS ou HTTP) (`strict-origin`, `no-referrer-when-downgrade` et `strict-origin-when-cross-origin`) traitent les requêtes d'une origine HTTP vers une autre origine HTTP de la même manière que les requêtes d'une origine HTTPS vers une autre origine HTTPS, même si HTTP est moins sécurisé. En effet, pour ces politiques, ce qui compte est de savoir si une **régression** de la sécurité a lieu, c'est-à-dire si la requête peut exposer des données d'une origine chiffrée à une origine non chiffrée. Une requête HTTP → HTTP n'est pas cryptée depuis le début, il n'y a donc pas de régression. Les requêtes HTTPS → HTTP, au contraire, présentent une régression.
+- Pour les requêtes **same-origin**, le schéma (HTTPS ou HTTP) est le même. Par conséquent, il n'y a pas de régression de la sécurité.
+
+## Referrer-Policy par défaut dans les navigateurs
+
+*Depuis octobre 2021*
+
+**Si aucune Referrer-Policy n'est définie, la politique par défaut du navigateur sera utilisée.**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Navigateur</th>
+        <th>
+<code>Referrer-Policy</code> par défaut / Comportement</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>La valeur par défaut est <code>strict-origin-when-cross-origin</code>.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>La valeur par défaut est <code>strict-origin-when-cross-origin</code>.<br> À partir de la <a href="https://blog.mozilla.org/security/2021/10/05/firefox-93-features-an-improved-smartblock-and-new-referrer-tracking-protections/">version 93</a>, pour les utilisateurs utilisant la protection contre le pistage stricte et la navigation privée : les Referrer-Policy les moins restrictives <code>no-referrer-when-downgrade</code>, <code>origin-when-cross-origin</code> et <code>unsafe-url</code> sont ignorées pour les requêtes intersites. Ainsi, le referrer est toujours tronqué pour les requêtes intersites, quelle que soit la politique du site Web.</td>
+      </tr>
+      <tr>
+        <td>Bord</td>
+        <td>La valeur par défaut est <code>strict-origin-when-cross-origin</code>.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>La valeur par défaut est similaire à <code>strict-origin-when-cross-origin</code>, avec quelques spécificités. Consultez <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">Prévention de la protection contre le suivi</a> pour plus de détails.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Configurer votre Referrer-Policy : les bonnes pratiques
+
+{% Aside 'objective' %} Configurez explicitement une politique d'amélioration de la confidentialité, telle que `strict-origin-when-cross-origin` (ou plus stricte). {% endAside %}
+
+Il existe différentes manières de définir des Referrer-Policy pour votre site :
+
+- En tant qu'en-tête HTTP
+- Dans votre [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)
+- De JavaScript [pour chaque requête](https://javascript.info/fetch-api#referrer-referrerpolicy)
+
+Vous pouvez configurer différentes politiques pour différentes pages, requêtes ou éléments.
+
+L'en-tête HTTP et l'élément meta sont tous deux au niveau de la page. L'ordre de priorité lors de la détermination de la politique effective d'un élément est :
+
+1. Politque au niveau de l'élément
+2. Politque au niveau de la page
+3. Navigateur par défaut
+
+**Exemple :**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+L'image sera demandée avec une politique `no-referrer-when-downgrade`, tandis que toutes les autres requêtes de sous-ressources de cette page suivront la politique `strict-origin-when-cross-origin`.
+
+## Comment voir la Referrer-Policy ?
+
+Utiliser le site [securityheaders.com](https://securityheaders.com/) pour déterminer la politique qu'un site ou une page spécifique utilise.
+
+Vous pouvez également utiliser les outils de développement de Chrome, Edge ou Firefox pour déterminer la Referrer-Policy utilisée pour une requête spécifique. Pour le moment, Safari n'affiche pas l'en-tête `Referrer-Policy`, mais affiche le `Referer` qui a été envoyé.
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Une capture d'écran du panneau Réseau des outils pour les développeurs Chrome, montrant Referer et Referrer-Policy.", width="800", height="416" %}<figcaption> Outils pour les développeurs Chrome, <b>panneau Réseau</b> avec une requête sélectionnée.</figcaption></figure>
+
+## Quelle politique devez-vous définir pour votre site Web ?
+
+Résumé : configurez explicitement une politique d'amélioration de la confidentialité, telle que `strict-origin-when-cross-origin` (ou plus stricte).
+
+### Pourquoi "explicitement" ?
+
+Si aucune Referrer-Policy n'est définie, la politique par défaut du navigateur sera utilisée. En effet, les sites Web s'en remettent souvent à la valeur par défaut du navigateur. Mais ce n'est pas idéal, car :
+
+- Les politiques par défaut du navigateur sont soit `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, soit plus strictes, selon le navigateur et le mode (privé/incognito). Ainsi, votre site Web ne se comportera pas de manière prévisible sur tous les navigateurs.
+- Les navigateurs adoptent des valeurs par défaut plus strictes telles que `strict-origin-when-cross-origin` et des mécanismes tels que le [tronquage du referrer](https://github.com/privacycg/proposals/issues/13) pour les requêtes cross-origin. Opter explicitement pour une politique d'amélioration de la confidentialité avant que les paramètres par défaut du navigateur ne changent vous donne le contrôle et vous aide à exécuter les tests comme bon vous semble.
+
+### Pourquoi `strict-origin-when-cross-origin` (ou plus stricte) ?
+
+Vous avez besoin d'une politique sécurisée, qui renforce la confidentialité et qui est utile. Ce que signifie "utile" dépend de ce que vous attendez du referrer :
+
+- **Sécurisé** : si votre site Web utilise HTTPS ([sinon, faites-en une priorité](/why-https-matters/)), vous ne voulez pas que les URL de votre site Web fuitent dans les requêtes non HTTPS. Étant donné que n'importe qui sur le réseau peut les voir, cela exposerait vos utilisateurs à des attaques de connaisseurs. Les politiques `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, `no-referrer` et `strict-origin` résolvent ce problème.
+- **Renforcement de la confidentialité** : pour une requête cross-origin, `no-referrer-when-downgrade` partage l'URL complète, ce qui n'améliore pas la confidentialité. `strict-origin-when-cross-origin` et `strict-origin` ne partagent que l'origine, et `no-referrer` ne partage rien du tout. Il vous reste donc `strict-origin-when-cross-origin`, `strict-origin` et `no-referrer` comme options d'amélioration de la confidentialité.
+- **Utile** : `no-referrer` et `strict-origin` ne partagent jamais l'URL complète, même pour les requêtes cross-origin. Donc si vous en avez besoin, `strict-origin-when-cross-origin` est une meilleure option.
+
+Tout cela signifie que **`strict-origin-when-cross-origin`** est généralement un choix judicieux.
+
+**Exemple de configuration d'une politique `strict-origin-when-cross-origin` :**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+Ou côté serveur, par exemple dans Express :
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### Que se passe-t-il si `strict-origin-when-cross-origin` (ou plus strict) ne s'adapte pas à tous vos cas d'utilisation ?
+
+Dans ce cas, adoptez une **approche progressive** : configurez une politique protectrice comme `strict-origin-when-cross-origin` pour votre site Web et si besoin, une politique plus permissive pour des requêtes spécifiques ou des éléments HTML.
+
+### Exemple : politique au niveau de l'élément
+
+`index.html` :
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Notez que Safari/WebKit peut plafonner `document.referrer` ou l'en-tête `Referer` pour les requêtes [intersites](/same-site-same-origin/#same-site-cross-site). Consultez les [détails](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/).
+
+### Exemple : politique au niveau de la requête
+
+`script.js` :
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### Quels autres éléments devez-vous considérer ?
+
+Votre politique doit dépendre de votre site Web et de vos cas d'utilisation. Cela dépend de vous, de votre équipe et de votre entreprise. Si certaines URL contiennent des données d'identification ou sensibles, définissez une politique protectrice.
+
+{% Aside 'warning' %} Des données qui peuvent ne pas vous sembler sensibles peuvent l'être pour vos utilisateurs, ou ils ne souhaitent ou ne s'attendent simplement pas à ce qu'elles fuitent silencieusement cross-origin. {% endAside %}
+
+## Utiliser le referrer des requêtes entrantes : bonnes pratiques
+
+### Que faire si la fonctionnalité de votre site utilise l'URL de provenance des requêtes entrantes ?
+
+#### Protéger les données des utilisateurs
+
+Le `Referer` peut contenir des données privées, personnelles ou d'identification, alors assurez-vous de les traiter comme telles.
+
+#### Gardez à l'esprit que le `Referer` que vous recevez peut changer
+
+L'utilisation du referrer à partir de requêtes cross-origin entrantes présente quelques limitations :
+
+- Si vous n'avez aucun contrôle sur l'implémentation de l'émetteur de la requête, vous ne pouvez pas faire d'hypothèses sur l'en-tête `Referer` (et `document.referrer`) que vous recevez. L'émetteur de la requête peut décider à tout moment de passer à une politique `no-referrer`, ou plus généralement à une politique plus stricte que ce qu'il utilisait auparavant, ce qui signifie que vous obtiendrez moins de données via le `Referer` qu'auparavant.
+- Les navigateurs utilisent de plus en plus la Referrer-Policy `strict-origin-when-cross-origin` par défaut. Cela signifie que vous pouvez désormais recevoir uniquement l'origine (au lieu de l'URL de provenance complète) dans les requêtes cross-origin entrantes, si le site qui les envoie n'a pas défini de politque.
+- Les navigateurs peuvent changer la façon dont ils gèrent `Referer`. Par exemple, à l'avenir, ils peuvent décider de toujours tronquer les referrers aux origines dans les requêtes de sous-ressources cross-origin, afin de protéger la confidentialité des utilisateurs.
+- L'en-tête `Referer` (et `document.referrer`) peut contenir plus de données que vous n'en avez besoin, par exemple une URL complète lorsque vous voulez seulement savoir si la requête est de type cross-origin.
+
+#### Alternatives au `Referer`
+
+Vous devrez peut-être envisager des alternatives si :
+
+- Une fonctionnalité essentielle de votre site utilise l'URL de provenance des requêtes cross-origin entrantes ;
+- Et/ou si votre site ne reçoit plus la partie de l'URL de provenance dont il a besoin dans une requête cross-origin. Cela se produit lorsque l'émetteur de la requête a modifié sa politique ou lorsqu'il n'a défini aucune politique et que la politique par défaut du navigateur a changé (comme dans [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+Pour définir des alternatives, analysez d'abord quelle partie du referrer vous utilisez.
+
+**Si vous n'avez besoin que de l'origine (`https://site-one.example`) :**
+
+- Si vous utilisez le referrer dans un script qui a un accès de niveau supérieur à la page, `window.location.origin` est une alternative.
+- S'ils sont disponibles, des en-têtes comme [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) et [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) vous donnent `Origin` ou décrivent si la requête est de type cross-origin, ce qui peut être exactement ce dont vous avez besoin.
+
+**Si vous avez besoin d'autres éléments de l'URL (chemin, paramètres de requête…) :**
+
+- Les paramètres de requête peuvent répondre à votre cas d'utilisation et cela vous évite le travail d'analyse du referrer.
+- Si vous utilisez le referrer dans un script qui a un accès de niveau supérieur à la page, `window.location.pathname` peut être une alternative. Extrayez uniquement la section du chemin de l'URL et transmettez-la en tant qu'argument, afin que toute information potentiellement sensible dans les paramètres d'URL ne soit pas transmise.
+
+**Si vous ne pouvez pas utiliser ces alternatives :**
+
+- Vérifiez si vos systèmes peuvent être modifiés pour que l'émetteur de la requête (`site-one.example`) définisse explicitement les informations dont vous avez besoin dans une configuration quelconque. Avantages : plus explicite, plus respectueux de la vie privée pour les utilisateurs de `site-one.example`, plus à l'épreuve du temps. Inconvénients : potentiellement plus de travail de votre part ou pour les utilisateurs de votre système.
+- Vérifiez si le site qui émet les requêtes peut accepter de définir une Referrer-Policy par élément ou par requête de `no-referrer-when-downgrade`. Inconvénients : potentiellement moins respectueux de la vie privée pour les utilisateurs de `site-one.example`, potentiellement non pris en charge par tous les navigateurs.
+
+### Protection contre la falsification de requête intersites (CSRF)
+
+Notez qu'un émetteur de requête peut toujours décider de ne pas envoyer le referrer en définissant une politique `no-referrer` (et un acteur malveillant pourrait même usurper le referrer).
+
+Utilisez les [jetons CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) comme protection principale. Pour une protection supplémentaire, utilisez [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites), et au lieu de `Referer`, utilisez des en-têtes tels que [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (disponible sur les requêtes POST et CORS) et [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (si disponible).
+
+### Informations d'identification
+
+Assurez-vous de protéger les données personnelles ou sensibles des utilisateurs qui peuvent se trouver dans le `Referer`.
+
+Si vous n'utilisez que l'origine, vérifiez si l'en- [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) pourrait être une alternative. Cela peut vous donner les informations dont vous avez besoin à des fins de débogage d'une manière plus simple et sans avoir besoin d'analyser le référent.
+
+### Paiements
+
+Les fournisseurs de paiement peuvent s'appuyer sur l'en-tête `Referer` des requêtes entrantes pour les contrôles de sécurité.
+
+Par exemple :
+
+- L'utilisateur clique sur un bouton **Acheter** `online-shop.example/cart/checkout`.
+- `online-shop.example` redirige vers `payment-provider.example` pour gérer la transaction.
+- `payment-provider.example` vérifie le `Referer` de cette requête par rapport à une liste de `Referer` autorisées configurées par les marchands. S'il ne correspond à aucune entrée de la liste, `payment-provider.example` rejette la requête. S'il correspond, l'utilisateur peut procéder à la transaction.
+
+#### Bonnes pratiques pour les contrôles de sécurité des flux de paiement
+
+**Résumé : en tant que fournisseur de paiement, vous pouvez utiliser le `Referer` comme moyen de contrôle de base contre les attaques naïves, mais vous devez absolument disposer d'une autre méthode de vérification plus fiable.**
+
+L'en-tête `Referer` seul n'est pas une base fiable pour un contrôle : le site émettant la requête, qu'il soit un marchand légitime ou non, peut définir une politique `no-referrer` qui rendra les informations `Referer` indisponibles pour le fournisseur de paiement. Cependant, en tant que fournisseur de paiement, l'examen du `Referer` peut vous aider à repérer les attaquants naïfs qui n'ont pas défini une politique `no-referrer`. Vous pouvez donc décider d'utiliser le `Referer` comme premier contrôle de base. Pour ce faire :
+
+- **Ne vous attendez pas à ce que le `Referer` soit toujours présent ; et s'il est présent, ne vérifie que la portion de données qu'il inclura au minimum : l'origine**. Lors de la définition de la liste des `Referer` autorisées, assurez-vous qu'aucun chemin n'est inclus, uniquement l'origine. Exemple : les valeurs `Referer` autorisées pour `online-shop.example` devraient être `online-shop.example`, et non `online-shop.example/cart/checkout`. Pourquoi ? Parce qu'en attendant soit pas de `Referer` du tout, soit une valeur `Referer` qui est l'origine du site Web émettant la requête, vous évitez les erreurs inattendues puisque vous **ne faites pas d'hypothèses sur la `Referrer-Policy`** que votre commerçant a définie ou sur le comportement du navigateur si le commerçant n'a pas défini de politique. Le site et le navigateur peuvent retirer le `Referer` envoyé dans la requête entrante pour ne garder que l'origine ou ne pas envoyer le `Referer` du tout.
+- Si le `Referer` est absent ou s'il est présent et que votre vérification de base de l'origine du `Referer` a réussi : vous pouvez passer à votre autre méthode de vérification plus fiable (voir ci-dessous).
+
+**Quelle est une méthode de vérification plus fiable ?**
+
+Une méthode de vérification fiable consiste à laisser le demandeur **hacher les paramètres de la requête** avec une clé unique. En tant que fournisseur de paiement, vous pouvez alors **calculer le même hachage de votre côté** et n'accepter la requête que si elle correspond à votre calcul.
+
+**Qu'arrive-t-il au `Referer` lorsqu'un site marchand HTTP sans Referrer-Policy redirige vers un fournisseur de paiement HTTPS ?**
+
+Aucun `Referer` ne sera visible dans la requête adressée au fournisseur de paiement HTTPS, car la [plupart des navigateurs](#default-referrer-policies-in-browsers) utilisent `strict-origin-when-cross-origin` ou `no-referrer-when-downgrade` lorsqu'un site Web n'a pas de politique définie. Notez également que [le changement de Chrome vers une nouvelle politique par défaut](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) ne changera pas ce comportement.
+
+{% Aside %}
+
+Si votre site Web utilise HTTP, [migrez vers HTTPS](/why-https-matters/).
+
+{% endAside %}
+
+## Conclusion
+
+Une Referrer-Policy protectrice est un excellent moyen de donner plus de confidentialité à vos utilisateurs.
+
+Pour en savoir plus sur les différentes techniques de protection de vos utilisateurs, consultez la collection [Safe and secure](/secure/) de web.dev !
+
+*Avec un grand merci pour les contributions et les commentaires à tous les relecteurs, en particulier Kaustubha Govind, David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck et Kayce Basques.*
+
+## Ressources
+
+- [Comprendre "same-site" et "same-origin"](/same-site-same-origin/)
+- [Un nouvel en-tête de sécurité : Referrer-Policy (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [Referrer-Policy sur MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [En-tête Referer : problèmes de confidentialité et de sécurité sur MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Modification de Chrome : intention d'implémentation Blink](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Modification de Chrome : intention de livraison Blink](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Modification de Chrome : entrée d'état](https://www.chromestatus.com/feature/6251880185331712)
+- [Modification de Chrome : article de blog sur la version bêta 85](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [Thread GitHub sur le tronquage du referrer : ce que font les différents navigateurs](https://github.com/privacycg/proposals/issues/13)
+- [Spécification de Referrer-Policy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/fr/blog/samesite-cookies-explained/index.md b/src/site/content/fr/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..4dd963bd263
--- /dev/null
+++ b/src/site/content/fr/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,246 @@
+---
+title: Explication des Cookies SameSite
+subhead: Sécurisez votre site en apprenant à marquer explicitement vos cookies intersites.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: "Apprenez à marquer vos cookies pour une utilisation propriétaire et tierce avec l'attribut SameSite. Vous pouvez améliorer la sécurité de votre site en utilisant les valeurs Lax et Strict de SameSite pour améliorer la protection contre les attaques CSRF. La spécification du nouvel attribut None vous permet de marquer explicitement vos cookies pour une utilisation intersites."
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Cet article fait partie d'une série sur les modifications apportées aux attributs des cookies `SameSite` :
+
+- [Explication des cookies SameSite](/samesite-cookies-explained/)
+- [Recettes pour utiliser les cookies SameSite](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+Les cookies permettent d'ajouter un état persistant aux sites Web. Au fil des ans, leurs capacités ont grandi et évolué, mais ont laissé à la plate-forme des problèmes hérités. Pour résoudre ceci, les navigateurs (y compris Chrome, Firefox et Edge) modifient leur comportement pour appliquer davantage de paramètres par défaut préservant la confidentialité.
+
+Chaque cookie est une paire `key=value` avec un certain nombre d'attributs qui contrôlent quand et où ce cookie est utilisé. Vous avez probablement déjà utilisé ces attributs pour définir des éléments tels que des dates d'expiration ou pour indiquer que le cookie ne doit être envoyé que via HTTPS. Les serveurs définissent des cookies en envoyant l'en-tête `Set-Cookie` dans leur réponse. Pour tous les détails, vous pouvez consulter [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1), mais pour l'instant, voici un petit rappel.
+
+Supposons que vous ayez un blog sur lequel vous souhaitez afficher une promotion "Les nouveautés" à vos utilisateurs. Les utilisateurs peuvent ignorer la promotion et ne la reverront plus pendant un certain temps. Vous pouvez stocker cette préférence dans un cookie, la définir pour qu'elle expire dans un mois (2 600 000 secondes) et l'envoyer uniquement via HTTPS. Cet en-tête ressemblerait à ceci :
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Trois cookies envoyés à un navigateur depuis un serveur dans une réponse", width="800", height="276", style="max-width: 35vw" %}<figcaption> Les serveurs définissent des cookies à l'aide de l'en-tête <code>Set-Cookie</code></figcaption></figure>
+
+Lorsque votre lecteur consulte une page qui répond à ces exigences, c'est-à-dire qu'il utilise une connexion sécurisée et que le cookie date de moins d'un mois, son navigateur enverra cet en-tête dans sa requête :
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Trois cookies envoyés d'un navigateur à un serveur dans une requête", width="800", height="165", style="max-width: 35vw" %}<figcaption> Votre navigateur renvoie des cookies dans l'en-tête <code>Cookie</code></figcaption></figure>
+
+Vous pouvez également ajouter et lire les cookies disponibles sur ce site en JavaScript à l'aide de `document.cookie`. Effectuer une affectation à `document.cookie` créera ou remplacera un cookie avec cette clé. Par exemple, vous pouvez essayer ce qui suit dans la console JavaScript de votre navigateur :
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+La lecture de `document.cookie` affichera tous les cookies accessibles dans le contexte actuel, chaque cookie étant séparé par un point-virgule :
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript accédant aux cookies dans le navigateur", width="600", height="382", style="max-width: 35vw" %}<figcaption> JavaScript peut accéder aux cookies en utilisant <code>document.cookie</code>.</figcaption></figure>
+
+Si vous essayez ceci sur une sélection de sites populaires, vous remarquerez que la plupart d'entre eux définissent bien plus que trois cookies. Dans la plupart des cas, ces cookies sont envoyés dans chaque requête à ce domaine, ce qui entraîne un certain nombre d'implications. La bande passante de chargement est souvent plus restreinte que le téléchargement pour vos utilisateurs, de sorte que la surcharge de toutes les requêtes sortantes ajoute un délai au premier octet. Soyez prudent dans le nombre et la taille des cookies que vous définissez. Utilisez l'attribut `Max-Age` pour vous assurer que les cookies ne sont pas conservés plus longtemps que nécessaire.
+
+## Que sont les cookies propriétaires et tiers ?
+
+Si vous revenez à la même sélection de sites que précédemment, vous avez probablement remarqué que des cookies étaient présents pour une variété de domaines, et pas seulement sur celui sur lequel vous naviguiez. Les cookies qui correspondent au domaine du site actuel, c'est-à-dire ce qui est affiché dans la barre d'adresse du navigateur, sont appelés cookies **propriétaires**. De même, les cookies provenant de domaines autres que le site actuel sont appelés cookies **tiers**. Il ne s'agit pas d'un libellé absolu, mais relatif au contexte de l'utilisateur : le même cookie peut être soit propriétaire, soit tiers, selon le site sur lequel l'utilisateur se trouve à ce moment-là.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Trois cookies envoyés à un navigateur à partir de différentes requêtes sur la même page", width="800", height="346", style="max -largeur : 60vw" %}<figcaption> Les cookies peuvent provenir de différents domaines sur une même page.</figcaption></figure>
+
+En reprenant l'exemple ci-dessus, supposons que l'un de vos articles de blog contient une photo d'un chat particulièrement incroyable et qu'elle est hébergée sur `/blog/img/amazing-cat.png`. Parce que c'est une image tellement fabuleuse, une autre personne l'utilise directement sur son site. Si un visiteur a visité votre blog et possède le cookie `promo_shown`, lorsqu'il consulte `amazing-cat.png` sur le site de l'autre personne, ce cookie **{nbsp}sera envoyé** dans cette requête d'image. Ce n'est pas particulièrement utile puisque `promo_shown` n'est pas utilisé pour une raison quelconque sur le site de cette autre personne, cela ne fait qu'ajouter des surcharges à la requête.
+
+S'il s'agit d'un effet involontaire, pourquoi faire cela ? C'est ce mécanisme qui permet aux sites de conserver leur état lorsqu'ils sont utilisés dans un contexte tiers. Par exemple, si vous intégrez une vidéo YouTube sur votre site, les visiteurs verront une option "Regarder plus tard" dans le lecteur. Si votre visiteur est déjà connecté à YouTube, cette session est rendue accessible dans le lecteur intégré grâce à un cookie tiers. Ainsi, le bouton "Regarder plus tard" enregistrera simplement la vidéo en un clic plutôt que de l'inviter à se connecter ou de l'éloigner de votre page et revenir à YouTube.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="Le même cookie est envoyé dans trois contextes différents", width="800", height="433", style="max-width: 35vw" %} <figcaption> Un cookie dans un contexte tiers est envoyé lors de la visite de différentes pages. </figcaption></figure>
+
+L'une des propriétés culturelles du Web est qu'il a tendance à être ouvert par défaut. Cela fait partie de ce qui a permis à tant de personnes de créer leur propre contenu et applications dessus. Cependant, cela a également entraîné un certain nombre de problèmes de sécurité et de confidentialité. Les attaques de falsification de requête intersites (CSRF) reposent sur le fait que des cookies sont joints à toute requête à une origine donnée, peu importe qui initie la requête. Par exemple, si vous visitez `evil.example`, cela peut déclencher des requêtes vers `your-blog.example`, et votre navigateur se fera un plaisir de joindre les cookies associés. Si votre blog ne fait pas attention à la façon dont il valide ces requêtes, `evil.example` peut déclencher des actions telles que la suppression de publications ou l'ajout de leur propre contenu.
+
+Les utilisateurs sont également de plus en plus conscients de la manière dont les cookies peuvent être utilisés pour suivre leur activité sur plusieurs sites. Cependant, jusqu'à présent, il n'y avait aucun moyen d'indiquer explicitement votre intention en matière de cookies. Votre cookie `promo_shown` ne doit être envoyé que dans un contexte propriétaire, alors qu'un cookie de session pour un widget destiné à être intégré sur d'autres sites est intentionnellement présent pour fournir l'état de connexion dans un contexte tiers.
+
+## Indiquez explicitement l'utilisation des cookies avec l'attribut `SameSite`
+
+L'introduction de l'attribut `SameSite` (défini dans [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)) vous permet de déclarer si votre cookie doit être restreint à un contexte propriétaire ou de même site. Il est utile de comprendre exactement ce que "site" signifie ici. Le site est la combinaison du suffixe de domaine et de la partie du domaine juste avant. Par exemple, le domaine `www.web.dev` fait partie du site `web.dev`.
+
+{% Aside 'key-term' %}
+
+Si l'utilisateur se trouve sur `www.web.dev` et effectue la requête d'une image à `static.web.dev`, il s'agit alors d'une requête sur le **même site**.
+
+{% endAside %}
+
+La [liste des suffixes publics](https://publicsuffix.org/) définit cela,. Il ne s'agit donc pas seulement de domaines de premier niveau tels que `.com`, mais également de services tels que `github.io`. Cela permet à `your-project.github.io` et `my-project.github.io` de compter comme des sites distincts.
+
+{% Aside 'key-term' %}
+
+Si l'utilisateur est sur `your-project.github.io` et effectue la requête d'une image sur `my-project.github.io`, il s'agit d'une requête **intersite**.
+
+{% endAside %}
+
+L'introduction de l'attribut `SameSite` sur un cookie offre trois manières différentes de contrôler ce comportement. Vous pouvez choisir de ne pas spécifier l'attribut, ou vous pouvez utiliser `Strict` ou `Lax` pour limiter le cookie aux requêtes du même site.
+
+Si vous définissez `SameSite` sur `Strict`, votre cookie ne sera envoyé que dans un contexte propriétaire. En termes d'utilisateur, le cookie ne sera envoyé que si le site pour le cookie correspond au site actuellement affiché dans la barre d'URL du navigateur. Donc, si le cookie `promo_shown` est défini comme suit :
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+Lorsque l'utilisateur est sur votre site, le cookie sera envoyé avec la requête comme prévu. Cependant, lorsqu'on clique sur lien qui ramène à votre site, par exemple depuis un autre site ou via l'e-mail d'un ami, lors de cette requête initiale, le cookie ne sera pas envoyé. C'est une bonne chose lorsque vous avez des cookies associés à des fonctionnalités qui seront toujours à l'origine d'une navigation initiale, comme changer un mot de passe ou effectuer un achat, mais qui sont trop restrictifs pour `promo_shown`. Si l'un de vos lecteurs clique sur un lien menant vers votre site, il est préférable que le cookie soit envoyé afin que ses préférences puissent être appliquées.
+
+C'est là que `SameSite=Lax` entre en jeu, en permettant l'envoi du cookie avec ces navigations de premier niveau. Revenons à l'exemple de l'article sur le chat ci-dessus, dans lequel un autre site référence votre contenu. Ce dernier utilise directement votre photo de chat et fournit un lien vers votre article d'origine.
+
+```html
+<p>Regardez ce chat incroyable !</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Lisez l'article ici : <a href="https://blog.example/blog/cat.html"></a>.</p>
+```
+
+Et le cookie a été défini comme suit :
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+Lorsque le lecteur est sur le blog de l'autre personne, le cookie **ne sera pas envoyé** lorsque le navigateur effectue la requête `amazing-cat.png`. Cependant, si le lecteur clique sur le lien vers `cat.html` menant vers votre blog, cette requête **inclura** le cookie. `Lax` est donc un bon choix pour les cookies affectant l'affichage du site, `Strict` étant utile pour les cookies liés aux actions de votre utilisateur.
+
+{% Aside 'caution' %}
+
+Ni `Strict` ni `Lax` sont une solution complète pour la sécurité de votre site. Les cookies sont envoyés dans le cadre de la requête de l'utilisateur et vous devez les traiter de la même manière que toute autre entrée utilisateur. Cela signifie désinfecter et valider l'entrée. N'utilisez jamais de cookie pour stocker des données que vous considérez comme un secret côté serveur.
+
+{% endAside %}
+
+Enfin, il y a la possibilité de ne pas spécifier la valeur, ce qui était auparavant le moyen de déclarer implicitement que vous souhaitez que le cookie soit envoyé dans tous les contextes. Dans la dernière version de [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03), cela est rendu explicite en introduisant une nouvelle valeur de `SameSite=None`. Ainsi, vous pouvez utiliser `None` pour indiquer clairement que vous souhaitez intentionnellement que le cookie soit envoyé dans un contexte tiers.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Trois cookies étiquetés Aucun, Lax ou Strict selon leur contexte", width="800", height="456", style="max-width: 35vw" %}<figcaption> Marquez explicitement le contexte d'un cookie comme <code>None</code>, <code>Lax</code> ou <code>Strict</code>.</figcaption></figure>
+
+{% Aside %}
+
+Si vous fournissez un service que d'autres sites utilisent, comme des widgets, du contenu intégré, des programmes d'affiliation, de la publicité ou une connexion sur plusieurs sites, vous devez utiliser `None` pour assurer que votre intention est claire.
+
+{% endAside %}
+
+## Modifications du comportement par défaut sans SameSite
+
+Bien que l'attribut `SameSite` soit largement pris en charge, il n'a malheureusement pas été adopté massivement par les développeurs. Le principal défaut, l'envoi de cookies partout, signifie que tous les cas d'utilisation fonctionnent, mais laisse l'utilisateur vulnérable au CSRF et aux fuites d'informations non intentionnelles. Pour encourager les développeurs à exprimer leur intention et à offrir aux utilisateurs une expérience plus sûre, la proposition de l'IETF, [Incrementally Better Cookies,](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) présente deux changements clés :
+
+- Les cookies sans l'attribut `SameSite` seront traités comme `SameSite=Lax`.
+- Les cookies avec l'attribut `SameSite=None` doivent également spécifier `Secure`, ce qui signifie qu'ils nécessitent un contexte sécurisé.
+
+Chrome implémente ce comportement par défaut à partir de la version 84. Ils sont disponibles sur [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) à partir de Firefox 69, qui en fera des comportements par défaut à l'avenir. Pour tester ces comportements dans Firefox, ouvrez la page [`about:config`](http://kb.mozillazine.org/About:config) et configurez `network.cookie.sameSite.laxByDefault`. [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) prévoit également de modifier ses comportements par défaut.
+
+{% Aside %}
+
+Cet article sera mis à jour au fur et à mesure que d'autres navigateurs annonceront leur prise en charge.
+
+{% endAside %}
+
+### `SameSite=Lax` par défaut
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+Si vous envoyez un cookie sans aucun attribut `SameSite` spécifié…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Comportement par défaut appliqué' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+Le navigateur traitera ce cookie comme si `SameSite=Lax` était spécifié.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Bien que cela soit destiné à appliquer une valeur par défaut plus sécurisée, vous devez idéalement définir un attribut `SameSite` explicite plutôt que de vous fier au navigateur pour l'appliquer à votre place. Cela rend votre intention pour le cookie explicite et améliore les chances d'une expérience cohérente entre les navigateurs.
+
+{% Aside 'caution' %}
+
+Le comportement par défaut appliqué par Chrome est légèrement plus permissif qu'un `SameSite=Lax` explicite car il permettra l'envoi de certains cookies sur les requêtes POST de premier niveau. Vous pouvez voir les détails exacts sur [l'annonce de blink-dev](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ). Il s'agit d'une mesure d'atténuation temporaire. Vous devez toujours modifier vos cookies intersites pour utiliser {code2SameSite=None; Secure.
+
+{% endAside %}
+
+### `SameSite=None` doit être sécurisé
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+La configuration d'un cookie sans `Secure` **sera rejetée**.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+Vous devez vous assurer de coupler `SameSite=None` avec l'attribut `Secure`
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Vous pouvez tester ce comportement à partir de Chrome 76 en activant `about://flags/#cookies-without-same-site-must-be-secure` et depuis Firefox 69 dans [`about:config`](http://kb.mozillazine.org/About:config) en configurant `network.cookie.sameSite.noneRequiresSecure`.
+
+Il est conseillé de l'appliquer lors de la configuration de nouveaux cookies et d'actualiser activement les cookies existants même s'ils n'approchent pas de leur date d'expiration.
+
+{% Aside 'note' %}
+
+Si vous comptez sur des services qui fournissent du contenu tiers sur votre site, vous devez également vérifier auprès du fournisseur qu'il met à jour ses services. Vous devrez peut-être mettre à jour vos dépendances ou vos extraits de code pour vous assurer que votre site adopte le nouveau comportement.
+
+{% endAside %}
+
+Ces deux modifications sont rétrocompatibles avec les navigateurs qui ont correctement implémenté la version précédente de l'attribut `SameSite`, ou qui ne le prennent tout simplement pas en charge. En appliquant ces modifications à vos cookies, vous rendez explicite l'utilisation souhaitée de ces derniers plutôt que de vous fier au comportement par défaut du navigateur. De même, tous les clients qui ne reconnaissent pas `SameSite=None` pour l'instant doivent l'ignorer et continuer comme si l'attribut n'était pas défini.
+
+{% Aside 'warning' %}
+
+Un certain nombre d'anciennes versions de navigateurs, notamment Chrome, Safari et le navigateur UC, sont incompatibles avec le nouvel attribut `None` et peuvent ignorer ou restreindre le cookie. Ce comportement est corrigé dans les versions actuelles, mais pensez à vérifier votre trafic pour déterminer quelle proportion de vos utilisateurs est affectée. Vous pouvez voir la [liste des clients incompatibles connus sur le site Chromium](https://www.chromium.org/updates/same-site/incompatible-clients).
+
+{% endAside %}
+
+## Recettes de cookies `SameSite`
+
+Pour plus de détails sur comment mettre à jour vos cookies pour gérer les modifications apportées à `SameSite=None` et la différence de comportement des navigateurs, consultez l'article suivant : [Recettes pour utiliser les cookies SameSite](/samesite-cookie-recipes).
+
+_Merci pour les contributions et les commentaires de Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner et Vivek Sekhar_
+
+_Cookie hero image par [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/fr/fr.11tydata.js b/src/site/content/fr/fr.11tydata.js
new file mode 100644
index 00000000000..46f40a871ba
--- /dev/null
+++ b/src/site/content/fr/fr.11tydata.js
@@ -0,0 +1,32 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    translated: 'none',
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/fr/lang.js b/src/site/content/fr/lang.js
new file mode 100644
index 00000000000..0ed5391030e
--- /dev/null
+++ b/src/site/content/fr/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'fr',
+  locale: 'fr_FR',
+};
diff --git a/src/site/content/fr/secure/cross-origin-isolation-guide/index.md b/src/site/content/fr/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..d11a21e813e
--- /dev/null
+++ b/src/site/content/fr/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: "Un guide pour permettre l'isolement d'origines multiples"
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-05-06
+subhead: "L'isolement d'origines multiples permet à une page Web d'utiliser des fonctionnalités puissantes telles que SharedArrayBuffer. Cet article explique comment activer l'isolement d'origines multiples sur votre site Web."
+description: "L'isolement d'origines multiples permet à une page Web d'utiliser des fonctionnalités puissantes telles que SharedArrayBuffer. Cet article explique comment activer l'isolement d'origines multiples sur votre site Web."
+tags:
+  - security
+---
+
+Ce guide vous montre comment activer l'isolement d'origines multiples. L'isolement d'origines multiples est requis si vous souhaitez utiliser [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/), [un minuteur haute résolution avec une meilleure précision](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/) ou l'API JS Self-Profiling.
+
+Si vous souhaitez activer l'isolement d'origines multiples, évaluez l'impact que cela aura sur d'autres ressources d'origines multiples de votre site Web, telles que l'emplacement des annonces.
+
+{% Details %} {% DetailsSummary %} Déterminez où sur votre site Web `SharedArrayBuffer` est utilisé.
+
+À partir de Chrome 92, les fonctionnalités qui utilisent `SharedArrayBuffer` ne fonctionneront plus sans l'isolement d'origines multiples. Si vous avez atterri sur cette page en raison d'un message d'obsolescence `SharedArrayBuffer`, il est probable que votre site Web ou l'une des ressources qui y sont intégrées utilise `SharedArrayBuffer`. Pour vous assurer qu'aucun problème ne survienne sur votre site Web en raison d'une obsolescence, commencez par identifier où il est utilisé.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- Activez l'isolement d'origines multiples pour continuer à utiliser `SharedArrayBuffer`.
+- Si vous vous basez sur un code tiers qui utilise `SharedArrayBuffer`, informez le fournisseur tiers pour qu'il prenne des mesures. {% endAside %}
+
+Si vous ne savez pas où un `SharedArrayBuffer` est utilisé sur votre site, il existe deux façons de le savoir :
+
+- Utiliser Chrome DevTools
+- (Avancé) Utiliser les rapports d'obsolescence
+
+Si vous savez déjà où vous utilisez un `SharedArrayBuffer`, passez à [Analyser l'impact de l'isolement d'origines multiples](#analysis).
+
+### Utiliser Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) permet aux développeurs d'inspecter les sites Web.
+
+1. [Ouvrez Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) sur la page que vous soupçonnez d'utiliser un `SharedArrayBuffer`.
+2. Sélectionnez le panneau **Console.**
+3. Si la page utilise un `SharedArrayBuffer`, le message suivant s'affichera :
+    ```text
+    [Obsolescence] SharedArrayBuffer exigera l'isolement d'origines multiples à partir de la version M92, vers le mois de mai 2021. Consultez le lien suivant : https://developer.chrome.com/blog/enabling-shared-array-buffer/ pour en savoir plus. common-bundle.js:535
+    ```
+4. Le nom de fichier et le numéro de ligne à la fin du message (par exemple, `common-bundle.js:535`) indiquent d'où vient le `SharedArrayBuffer`. S'il s'agit d'une bibliothèque tierce, contactez le développeur pour résoudre le problème. S'il est implémenté dans le cadre de votre site Web, suivez le guide ci-dessous pour activer l'isolement d'origines multiples.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="Avertissement DevTools Console lorsqu'un SharedArrayBuffer est utilisé sans isolement d'origines multiples", width="800", height="163" %}<figcaption> Avertissement DevTools Console lorsqu'un SharedArrayBuffer est utilisé sans isolement d'origines multiples.</figcaption></figure>
+
+### (Avancé) Utilisation des rapports d'obsolescence
+
+Certains navigateurs disposent d'[une fonctionnalité de rapport d'obsolescence des API](https://wicg.github.io/deprecation-reporting/) à un point de terminaison spécifié.
+
+1. [Configurez un serveur de rapports d'obsolescence et obtenez l'URL du rapport](/coop-coep/#set-up-reporting-endpoint). Pour cela, utilisez un service public ou créez-en une vous-même.
+2. À l'aide de l'URL, définissez l'en-tête HTTP suivant sur les pages qui abritent potentiellement un `SharedArrayBuffer`.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. Une fois que l'en-tête commence à se propager, le point de terminaison que vous avez inscrit doit commencer à collecter des rapports d'obsolescence.
+
+Pour voir un exemple d'implémentation, accédez au lien suivant : [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me).
+
+{% endDetails %}
+
+## Analyser l'impact de l'isolement d'origines multiples {: #analysis}
+
+Ne serait-il pas formidable de pouvoir évaluer l'impact de l'activation de l'isolement d'origines multiples sur votre site sans prendre le risque d'endommager quoi que ce soit ? C'est exactement ce que les en-têtes HTTP [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) et [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) vous permettent de faire.
+
+1. Définissez [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) sur votre document de premier niveau. Comme son nom l'indique, cet en-tête envoie uniquement des rapports sur l'impact que `COOP: same-origin` **aurait** sur votre site ; il ne désactivera pas réellement la communication avec les fenêtres contextuelles.
+2. Configurez la création de rapports et configurez un serveur Web pour recevoir et enregistrer les rapports.
+3. Définissez [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources) sur votre document de premier niveau. Encore une fois, cet en-tête vous permet de visualiser l'impact de l'activation de `COEP: require-corp` sans réellement affecter le fonctionnement de votre site pour le moment. Vous pouvez configurer cet en-tête pour envoyer des rapports au même serveur de rapports que celui que vous avez configuré à l'étape précédente.
+
+{% Aside %} Vous pouvez également [activer la colonne **Domaine**](https://developer.chrome.com/docs/devtools/network/#information) dans le panneau **Réseau** de Chrome DevTools pour obtenir une vue générale des ressources susceptibles d'être affectées. {% endAside %}
+
+{% Aside 'caution' %}
+
+L'activation de l'isolement d'origines multiples bloquera le chargement des ressources d'origines multiples que vous n'activez pas explicitement, et cela empêchera votre document de premier niveau de pouvoir communiquer avec les fenêtres contextuelles.
+
+Nous avons étudié des moyens de déployer `Cross-Origin-Resource-Policy` à grande échelle, car l'isolement d'origines multiples nécessite que toutes les sous-ressources soient explicitement acceptées. Nous avons eu l'idée de faire l'inverse : [un nouveau mode COEP « sans informations d'identification »](https://github.com/mikewest/credentiallessness/) qui permet de charger des ressources sans l'en-tête CORP en supprimant toutes leurs informations d'identification. Nous sommes en train de déterminer les détails de la façon dont cela devrait fonctionner, mais nous espérons que cela vous soulagera de l'obligation de vérifier que les sous-ressources envoient bien l'en-tête `Cross-Origin-Resource-Policy`.
+
+On sait en outre que l'en-tête `Cross-Origin-Opener-Policy: same-origin` rompra les intégrations qui nécessitent des interactions de fenêtre d'origines multiples telles que OAuth et les paiements. Pour atténuer ce problème, nous étudions l'[assouplissement des conditions](https://github.com/whatwg/html/issues/6364) permettant l'isolement d'origines multiples avec `Cross-Origin-Opener-Policy: same-origin-allow-popups`. De cette façon, la communication avec la fenêtre ouverte par elle-même sera possible.
+
+Si vous souhaitez activer l'isolement d'origines multiples mais êtes bloqué par ces difficultés, nous vous recommandons de vous [inscrire à un essai d'origine](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) et d'attendre que les nouveaux modes soient disponibles. Nous ne prévoyons pas de mettre fin à l'essai d'origine tant que ces nouveaux modes ne seront pas disponibles.
+
+{% endAside %}
+
+## Atténuer l'impact de l'isolement d'origines multiples
+
+Une fois que vous avez déterminé quelles ressources seront affectées par l'isolement d'origines multiples, prenez connaissance des directives générales sur la façon dont vous optez réellement pour ces ressources d'origines multiples :
+
+1. Pour les ressources d'origines multiples telles que les images, les scripts, les feuilles de style, les iframes et autres, définissez l'en-tête [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin). Pour les ressources du même site, définissez l'en-tête [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin).
+2. Définissez l'attribut `crossorigin` dans la balise HTML du document de premier niveau si la ressource est fournie avec [CORS](/cross-origin-resource-sharing/) (par exemple, `<img src="example.jpg" crossorigin>`).
+3. Si les ressources d'origines multiples chargées dans les iframes impliquent une autre couche d'iframes, appliquez de manière récursive les étapes décrites dans cette section avant de continuer.
+4. Une fois que vous avez confirmé que toutes les ressources d'origines multiples sont activées, définissez `Cross-Origin-Embedder-Policy: require-corp` sur les ressources d'origines multiples chargées dans les iframes.
+5. Assurez-vous qu'il n'y a pas de fenêtres contextuelles d'origines multiples nécessitant une communication via `postMessage()`. Il n'y a aucun moyen de les faire fonctionner lorsque l'isolement d'origines multiples est activé. Vous pouvez déplacer la communication vers un autre document sans isolement d'origines multiples ou utiliser une méthode de communication différente (par exemple, des requêtes HTTP).
+
+## Activer l'isolement d'origines multiples
+
+Une fois que vous avez atténué l'impact grâce à l'isolement d'origines multiples, prenez connaissance des directives générales sur la façon dont vous pouvez l'activer :
+
+1. Définissez l'en-tête `Cross-Origin-Opener-Policy: same-origin` sur votre document de premier niveau. Si vous aviez défini `Cross-Origin-Opener-Policy-Report-Only: same-origin`, remplacez-le. Cela bloque la communication entre votre document de premier niveau et ses fenêtres contextuelles.
+2. Définissez l'en-tête `Cross-Origin-Embedder-Policy: require-corp` sur votre document de premier niveau. Si vous aviez défini `Cross-Origin-Embedder-Policy-Report-Only: require-corp`, remplacez-le. Cela bloquera le chargement des ressources d'origines multiples qui ne sont pas activées.
+3. Vérifiez que `self.crossOriginIsolated` renvoie `true` dans la console pour vérifier que votre page est soumise à l'isolement d'origines multiples.
+
+{% Aside 'gotchas' %}
+
+L'activation de l'isolement d'origines croisées sur un serveur local peut être difficile car les serveurs simples ne prennent pas en charge l'envoi d'en-têtes. Vous pouvez lancer Chrome avec un indicateur de ligne de commande `--enable-features=SharedArrayBuffer` pour activer l'objet `SharedArrayBuffer` sans activer l'isolement d'origines croisées. Découvrez [comment exécuter Chrome avec un indicateur de ligne de commande sur différentes plateformes](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+{% endAside %}
+
+## Ressources
+
+- [Making your website "cross-origin isolated" using COOP and COEP](/coop-coep/)
+- [SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/ja/404.md b/src/site/content/ja/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/ja/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/ja/accessible/index.md b/src/site/content/ja/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/ja/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/ja/angular/index.md b/src/site/content/ja/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/ja/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/ja/animations/index.md b/src/site/content/ja/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/ja/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/ja/blog/aspect-ratio/index.md b/src/site/content/ja/blog/aspect-ratio/index.md
new file mode 100644
index 00000000000..d0f043e2a51
--- /dev/null
+++ b/src/site/content/ja/blog/aspect-ratio/index.md
@@ -0,0 +1,191 @@
+---
+layout: post
+title: Chromium、Safari Technology Preview、およびFirefox Nightlyでサポートされる新しいアスペクト比のCSSプロパティ
+subhead: レスポンシブレイアウトの間隔を維持するのに役立つ新しいCSSプロパティ。
+authors:
+  - una
+date: 2021-01-28
+hero: image/admin/I14dS86oJT2f0uHaDLEM.jpg
+alt: 同じアスペクト比でサイズ変更されたカラフルな電話の画像。
+description: 新しい aspect-ratio CSSプロパティで、画像と要素内のアスペクト比の維持をさらに簡単に達成できるようになりました。
+tags:
+  - blog
+  - css
+---
+
+{% Aside %}
+
+要約: *アスペクト比*と呼ばれる一貫した幅と高さの比率を維持することは、レスポンシブ Web デザインや、[累積的なレイアウトシフト](/cls/)を防ぐために重要です。[Chromium 88](https://developer.apple.com/safari/technology-preview/release-notes/)、[Firefox 87](https://developer.apple.com/safari/technology-preview/release-notes/)、および [Safari Technology Preview 118](https://developer.apple.com/safari/technology-preview/release-notes/) に導入される新しい `aspect-ratio` プロパティを使用することで、これを維持するのがさらに簡単になりました。
+
+{% endAside %}
+
+## アスペクト比
+
+アスペクト比は、2 つの整数とコロンを使って「幅:高さ」または 「x:y」の次元として表されるのが最も一般的です。写真の最も一般的なアスペクト比は 4:3 と 3:2 ですが、ビデオや最近のコンシューマー向けカメラのアスペクト比は 16:9 である傾向があります。
+
+<figure>{% Img src="image/admin/od54hUUe21UABpbWxSFG.jpg", alt="同じアスペクト比を持つ 2 つの画像。1 つは 634 x 951px で、もう 1 つは 200 x 300px です。どちらもアスペクト比は 2:3 です。", width="800", height="526" %} <figcaption>同じアスペクト比を持つ 2 つの画像。1 つは 634 x 951px で、もう 1 つは 200 x 300px です。どちらもアスペクト比は 2:3 です。</figcaption></figure>
+
+レスポンシブデザインが出現したことで、特に画像のサイズと要素のサイズが使用可能なスペースに基づいて変化するようになったため、アスペクト比を維持することが Web 開発者にとってますます重要になっています。
+
+アスペクト比の維持が重要になる場合には、以下の例があります。
+
+- 親の幅の100％であり、高さが特定のビューポート比のままであるレスポンシブ iframe を作成する
+- 画像、[動画](http://fitvidsjs.com/)、または埋め込みが読み込まれてスペースを占有するときに再レイアウトされないように、各アイテム用の固有のプレースホルダーコンテナを作成する
+- インタラクティブなデータ視覚化または SVG アニメーション用に均一でレスポンシブなスペースを作成する
+- カードやカレンダーの日付といった複数の要素が伴うコンポーネント用に均一でレスポンシブなスペースを作成する
+- サイズの異なる複数の画像用に均一でレスポンシブなスペースを作成する（`object-fit` とともに使用する）
+
+## Object-fit
+
+アスペクト比を定義すると、レスポンシブなコンテキストでメディアのサイズを決定するのに役立ちます。このバケツのもう 1 つのツールは、`object-fit` プロパティです。ユーザーはこれを使用して、ブロック内のオブジェクト（画像など）がそのブロックをどのように埋めるかを記述できます。
+
+<figure>{% Img src="image/admin/A7uj6u5MULodlw4lVsI2.jpg", alt="Object-fit デモの視覚化", width="800", height="236" %} <figcaption>さまざまな <code>object-fit</code> の値を実演。<a href="https://codepen.io/una/pen/mdrLGjR">Codepen のデモ</a>をご覧ください。</figcaption></figure>
+
+`initial` 値と `fill` 値は、スペースを埋めるように画像を再調整します。この例では、これにより、ピクセルが再調整されるにつれ、画像が押しつぶされてぼやけています。これは理想的ではありません。`object-fit: cover` は、画像の最小サイズを使用してスペースを埋め、このサイズに基づいて画像をトリミングしてフィットさせます。最も低い境界で「ズームイン」します。`object-fit: contain` は、画像全体が常に表示されるようにするため、 `cover` の動作とは逆に、最大の境界のサイズ（上記の例では幅）を取って、画像のサイズを変更して固有のアスペクト比を維持しながらスペースにフィットさせます。`object-fit: none` の場合は、中央（デフォルトのオブジェクト位置）で自然なサイズでトリミングされた画像を示します。
+
+`object-fit: cover` は、サイズの異なる画像を処理する場合に、ほとんどの状況で、均一なインターフェイスを確保するように機能する傾向がありますが、この方法では情報が失われます（画像は最も長い辺に沿ってトリミングされます）。
+
+これらの失われる情報が重要であるならば（美容製品のフラットレイで作業する場合など）、重要なコンテンツをトリミングすることは許容できません。したがって、トリミングせずに UI スペースにフィットするさまざまなサイズのレスポンシブ画像が理想的と言えます。
+
+## 以前の技法: `padding-top` でアスペクト比を維持する
+
+<figure>{% Img src="image/admin/j3YJicINXjly349uEEUt.jpg", alt="padding-top を使用して、カルーセル内のプレビュー後の画像に 1:1 のアスペクト比を設定する。", width="800", height="296" %} <figcaption><code>padding-top</code> を使用して、カルーセル内のプレビュー後の画像に 1:1 のアスペクト比を設定する。</figcaption></figure>
+
+これらをさらにレスポンシブにするために、アスペクト比を使用できます。これにより、特定の比率のサイズを設定し、残りのメディアを個々の軸（高さまたは幅）に基づいて設定できます。
+
+画像の幅に基づいてアスペクト比を維持するために現在広く受け入れられているクロスブラウザソリューションは、「Padding-Top ハック」として知られています。このソリューションには、親コンテナと絶対的に配置された子コンテナが必要です。その上で、アスペクト比をパーセント率として計算し、 `padding-top` として設定します。以下に例を示します。
+
+- 1:1 のアスペクト比 = 1 / 1 = 1 = `padding-top: 100%`
+- 4:3 のアスペクト比 = 3 / 4 = 0.75 = `padding-top: 75%`
+- 3:2 のアスペクト比 = 2 / 3 = 0.66666 = `padding-top: 66.67%`
+- 16:9 のアスペクト比 = 9 / 16 = 0.5625 = `padding-top: 56.25%`
+
+アスペクト比の値を特定したので、それを親コンテナに適用できます。以下の例を考察してみましょう。
+
+```html
+<div class="container">
+  <img class="media" src="..." alt="...">
+</div>
+```
+
+次に、以下のように CSS を記述できます。
+
+```css
+.container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 のアスペクト比 */
+}
+
+.media {
+  position: absolute;
+  top: 0;
+}
+```
+
+## `aspect-ratio` でアスペクト比を維持する
+
+<figure>{% Img src="image/admin/XT8PbPiYx1IJq3Pvmanz.jpg", alt="aspect-ratio を使用してカルーセル内のプレビュー後の画像に 1:1 のアスペクト比を設定する。", width="800", height="296" %} <figcaption><code>aspect-ratio</code> を使用してカルーセル内のプレビュー後の画像に 1:1 のアスペクト比を設定する</figcaption></figure>
+
+残念ながら、これらの `padding-top` 値の計算はあまり直感的ではなく、追加のオーバーヘッドと配置が必要です。新しい固有の `aspect-ratio` [CSS プロパティ](https://drafts.csswg.org/css-sizing-4/#aspect-ratio)を使用すると、アスペクト比を維持するための言語がはるかに明確になります。
+
+同じマークアップで、`padding-top: 56.25%` を`aspect-ratio: 16 / 9` に置き換え、`aspect-ratio` を指定された `width` / `height` の比率に設定します。
+
+<div class="switcher">{% Compare 'worse', 'Using padding-top' %} ```css .container { width: 100%; padding-top: 56.25%; } ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Using aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+`padding-top` の代わりに `aspect-ratio` を使用する方がはるかに明確であり、padding プロパティをオーバーホールして通常の範囲外のことを行うことがありません。
+
+この新しいプロパティは、アスペクト比を `auto` に設定する機能も追加します。この場合、「固有のアスペクト比で置き換えられた要素はそのアスペクト比を使用しますが、そうでない場合は、ボックスには優先アスペクト比はありません」。 `auto` と `<ratio>` の両方が同時に指定されている場合、優先アスペクト比は、`width` を `height` で除算した指定の比率です。ただし、両方が一緒に指定されている場合、固有のアスペクト比で置き換えられた要素である場合は、代わりにそのアスペクト比が使用されます。
+
+## 例: グリッドの一貫性
+
+これは、CSS Grid や Flexbox などの CSS レイアウトメカニズムで非常にうまく機能します。スポンサーアイコンのグリッドなど、1:1 のアスペクト比を維持したい子要素を持つリストを考察してみましょう
+
+```html
+<ul class="sponsor-grid">
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+</ul>
+```
+
+```css
+.sponsor-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+.sponsor img {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  object-fit: contain;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/gridimages2.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>さまざまなアスペクト比のサイズの親要素を持つグリッド内の画像。<a href="https://codepen.io/una/pen/PoGddaw">Codepen のデモをご覧ください</a>。</figcaption></figure>
+
+## 例: レイアウトシフトを防止する
+
+`aspect-ratio` のもう 1 つの優れた機能は、プレースホルダースペースを作成して、[累積レイアウトシフト](/cls/)を防止し、より優れた[ウェブバイタル](/learn-core-web-vitals/)を提供できることです。この最初の例では、[Unsplash](https://source.unsplash.com/) などの API からアセットを読み込むと、メディアの読み込みが終了したときにレイアウトシフトが作成されます。
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-missing.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>読み込まれたアセットにアスペクト比が設定されていない場合に発生する累積レイアウトシフトの動画。この動画は、エミュレートされた 3G ネットワークで録画されています。</figcaption></figure>
+
+一方で、`aspect-ratio` を使用すると、このレイアウトシフトを防止するためのプレースホルダーが作成されます。
+
+```css
+img {
+  width: 100%;
+  aspect-ratio: 8 / 6;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-set.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>アスペクト比が設定された動画は、読み込み済みのアセットに配置されます。この動画は、エミュレートされた 3G ネットワークで録画されています。<a href="https://codepen.io/una/pen/GRjLZmG">Codepen のデモをご覧ください。</a></figcaption></figure>
+
+### ボーナスヒント: アスペクト比の画像属性
+
+画像のアスペクト比を設定するもう 1 つの方法は、[画像の属性](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)を使用することです。前もって画像のサイズがわかっている場合、これらのサイズをその `width` と `height` で設定するのが[ベストプラクティス](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/#check-the-images-width-and-height-attributes-in-the-html)とされています。
+
+上記の例では、サイズが 800 x 600px であることがわかっている場合、画像のマークアップは、`<img src="image.jpg" alt="..." width="800" height="600">` のようになります。送信される画像のアスペクト比がそれと同じでも、ピクセル値が必ずしも同じでない場合であっても、画像の属性値を使用して比率を設定し、スタイルで `width: 100%` にすることで、画像が適切なスペースを占有するようにすることができます。これらをまとめると、以下のようになります。
+
+```markup
+<!-- Markup -->
+<img src="image.jpg" alt="..." width="8" height="6">
+```
+
+```css
+/* CSS */
+img {
+  width: 100%;
+}
+```
+
+最終的な効果は、CSS を介して画像に `aspect-ratio` を設定する場合と同じで、累積的なレイアウトシフトが回避されます（[Codepen のデモをご覧ください](https://codepen.io/una/pen/gOwJWoz)）。
+
+## まとめ
+
+複数の最新のブラウザに導入される新しい `aspect-ratio` CSS プロパティを使用すると、メディアとレイアウトのコンテナの適切なアスペクト比を、もう少し簡単に維持できるようになります。
+
+写真提供: [Amy Shamblen](https://unsplash.com/photos/TXg_38oImi0) および [Lionel Gustave](https://unsplash.com/photos/c1rOy44wuts)（Unsplash より）
diff --git a/src/site/content/ja/blog/async-clipboard/index.md b/src/site/content/ja/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..20fb54fcb33
--- /dev/null
+++ b/src/site/content/ja/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: クリップボードアクセスのブロックを解除する
+subhead: テキストと画像へのより安全なブロックされていないクリップボードアクセス
+authors:
+  - developit
+  - thomassteiner
+description: 非同期クリップボードAPIは、アクセス権に適したコピーと貼り付けを簡素化します。
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: ショッピングリストが貼り付けられたクリップボード
+feedback:
+  - api
+---
+
+過去数年間、ブラウザはクリップボードの操作に[`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands)を使用してきました。これは広くサポートされていますが、この切り取りと貼り付けの方法には問題がありました。クリップボードへのアクセスは同期的でしたが、DOMの読み取りと書き込みしかできませんでした。
+
+小さなテキストの場合は問題ありませんが、クリップボード転送でページをブロックすると、エクスペリエンスに悪影響を及ぼす場合が多くあります。コンテンツを安全に貼り付けるには、時間のかかるサニタイズまたは画像のデコードが必要になる場合があります。ブラウザは、貼り付けられたドキュメントからリンクされたリソースを読み込むか、インライン化する必要がある場合があります。これにより、ディスクまたはネットワークで待機している間、ページがブロックされます。クリップボードへのアクセスを要求している間、ブラウザがページをブロックすることを要求して、アクセス権をミックスに追加することを想像してみてください。`document.execCommand()`に関連して設定されているアクセス権は緩く定義されており、ブラウザによって異なります。
+
+[非同期クリップボードAPI](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api)はこれらの問題に対処し、ページをブロックしない明確に定義されたアクセス権モデルを提供します。最近、Safariは、[バージョン13.1でのサポート](https://webkit.org/blog/10855/)を発表しました。これにより、主要なブラウザは基本的なレベルのサポートを提供します。この記事の執筆時点では、Firefoxはテキストのみをサポートしています。一部のブラウザでは、画像のサポートはPNGに制限されています。 APIの使用に興味がある場合は、先に進む前に[ブラウザのサポート表](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)を参照してください。
+
+{% Aside %}非同期クリップボードAPIは、テキストと画像の処理に制限されています。 Chrome 84には、クリップボードが任意のデータ型を処理できるようにする実験的な機能が導入されています。 {% endAside %}
+
+## コピー: クリップボードへのデータの書き込み
+
+### writeText()
+
+テキストをクリップボードにコピーするには、`writeText()`を呼び出します。このAPIは非同期であるため、`writeText()`関数は、渡されたテキストが正常にコピーされたかどうかに応じて解決または拒否するPromiseを返します。
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+### write()
+
+実際、`writeText()`は、汎用`write()`メソッドの便利なメソッドであり、画像をクリップボードにコピーすることもできます。`writeText()`と同様に、非同期であり、Promiseを返します。
+
+クリップボードに画像を書き込むには、画像を[`blob`](https://developer.mozilla.org/docs/Web/API/blob)として作成する必要があります。これを行う1つの方法は、`fetch()`を使用してサーバーに画像を要求し、応答で[`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob)を呼び出すことです。
+
+さまざまな理由で、サーバーに画像を要求することは、望ましくないか、不可能な場合があります。幸い、画像をキャンバスに描画して、キャンバスの[`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)メソッドを呼び出すこともできます。
+
+次に、`ClipboardItem`オブジェクトの配列をパラメータとして`write()`メソッドに渡します。現在、一度に渡すことができる画像は1つだけですが、将来的には複数の画像のサポートを追加したいと考えています。`ClipboardItem`は、画像のMIMEタイプのオブジェクトをキーとして、blobを値として取ります。 `fetch()`または`canvas.toBlob()`から取得したBlobオブジェクトの場合、 `blob.type`プロパティには、画像の正しいMIMEタイプが自動的に含まれます。
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} Safari (WebKit) は、ユーザーのアクティブ化をChromium (Blink) とは異なる方法で処理します ([WebKitのバグ #222262](https://bugs.webkit.org/show_bug.cgi?id=222262)を参照)。 `ClipboardItem`に結果を割り当てるpromiseですべての非同期操作を実行します。
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### コピーイベント
+
+ユーザーがクリップボードのコピーを開始した場合、非テキストデータがBLOBとして提供されます。[`copy`イベントに](https://developer.mozilla.org/docs/Web/API/Document/copy_event)は、項目がすでに正しい形式になっている`clipboardData`プロパティが含まれているため、Blobを手動で作成する必要がありません。`preventDefault()`を呼び出して、独自のロジックを優先してデフォルトの動作を防ぎ、内容をクリップボードにコピーします。クリップボードAPIがサポートされていないときに以前のAPIにフォールバックする方法については、この例で対応していません。これについては、この記事の後半の[機能の検出](#feature-detection)で説明します。
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Image copied.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## 貼り付け: クリップボードからデータを読み取る
+
+### readText()
+
+クリップボードからテキストを読み取るには、 `navigator.clipboard.readText()`を呼び出し、返されたPromiseが解決するのを待機します。
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+### read()
+
+`navigator.clipboard.read()`メソッドも非同期であり、Promiseを返します。クリップボードから画像を読み取るには、[`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem)オブジェクトのリストを取得し、この処理を繰り返します。
+
+各`ClipboardItem`は別の型に内容を格納できるため、もう一度`for...of`ループを使用して、型のリストを反復処理する必要があります。型ごとに、現在の型を引数として、`getType()`メソッドを呼び出し、対応するBlobを取得します。以前のように、このコードは画像に関連付けられておらず、他の将来のファイルタイプで動作します。
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### 貼り付けたファイルの操作
+
+ユーザーが<kbd>ctrl</kbd>+<kbd>c</kbd>や<kbd>ctrl</kbd>+<kbd>v</kbd>などのクリップボードのキーボードショートカットを使用できると便利です。 Chromiumは、以下に概説するように、クリップボードに*読み取り専用*ファイルを公開します。これは、ユーザーがオペレーティングシステムのデフォルトの貼り付けショートカットを押すか、ユーザーがブラウザのメニューバーで**[編集]** 、**[貼り付け]**の順にクリックしたときにトリガーされます。これ以上のコードは必要ありません。
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Read the file's contents, assuming it's a text file.
+  // There is no way to write back to it.
+  console.log(await file.text());
+});
+```
+
+### 貼り付けイベント
+
+前述のように、クリップボードAPIで機能するイベントを導入する計画がありますが、今のところ、既存の`paste`イベントを使用できます。このイベントは、クリップボードのテキストを読み取るための新しい非同期メソッドとうまく連携します。code1}copyイベントと同様に、必ず`preventDefault()`メソッドを呼び出してください。
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+`copy`イベントと同様に、クリップボードAPIがサポートされていない場合に以前のAPIにフォールバック方法については、[機能検出](#feature-detection)を参照してください。
+
+## 複数のファイルタイプの処理
+
+ほとんどの実装では、1回の切り取りまたはコピー操作のために、クリップボードに複数のデータ形式が配置されます。これには次の2つの理由があります。アプリ開発者はユーザーがテキストや画像をコピーしたいアプリの機能を知る方法がないことと、多くのアプリケーションが構造化データをプレーンテキストとして貼り付けることをサポートしていることです。**これは、[貼り付けてスタイルを合わせる]**または**[書式なしで貼り付け]**などの名前の**[編集]**メニュー項目がユーザーに表示されます。
+
+次の例は、これを行う方法を示しています。この例では、`fetch()`を使用して画像データを取得しますが、 [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas)または[File System](/file-system-access/) AccessAPIから取得することもできます。
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png');
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## セキュリティとアクセス権
+
+クリップボードへのアクセスは、常にブラウザにとってセキュリティ上の懸念でした。適切なアクセス権がないと、ページはあらゆる種類の悪意のあるコンテンツをユーザーのクリップボードにサイレントにコピーし、貼り付けられたときに壊滅的な結果を招く可能性があります。`rm -rf /`または[高圧縮ファイル爆弾の画像](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html)をクリップボードにサイレントコピーするWebページを想像してみてください。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="クリップボードのアクセス権をユーザーに求めるブラウザプロンプト。", width="800", height="338" %} <figcaption>クリップボードAPIのアクセス権プロンプト。</figcaption></figure>
+
+Webページにクリップボードへの無制限の読み取りアクセスを許可することはさらに厄介です。ユーザーは、パスワードや個人情報などの機密情報をクリップボードに定期的にコピーしますが、ユーザーの知らないうちにどこかのページによってこのような情報が読み取られる可能性があります。
+
+多数の新しいAPIと同様に、クリップボードAPIはHTTPS経由で提供されるページでのみサポートされます。悪用を防ぐために、クリップボードへのアクセスは、ページがアクティブなタブである場合にのみ許可されます。アクティブなタブのページは、アクセス権を要求せずにクリップボードに書き込むことができますが、クリップボードからの読み取りには常に許可が必要です。
+
+コピーと貼り付けのアクセス許可が[PermissionsAPIに](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web)追加されました。ページがアクティブなタブである場合、`clipboard-write`アクセス権が自動的にページに付与されます。`clipboard-read`アクセス権を要求する必要があります。これは、クリップボードからデータを読み取ろうとすることで実行できます。以下のコードは後者を示しています。
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Will be 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Listen for changes to the permission state
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+`allowWithoutGesture`オプションを使用して、切り取りまたは貼り付けを呼び出すために、ユーザージェスチャーが必要かどうかを制御することもできます。この値のデフォルトはブラウザによって異なるため、常にこの値を含めてください。
+
+ここで、クリップボードAPIの非同期性が実際に役立ちます。クリップボードデータの読み取りまたは書き込みを試みると、まだ許可されていない場合は、ユーザーにアクセス許可を求めるプロンプトが自動的に表示されます。 APIはPromiseベースであるため、これは完全に透過的です。ユーザーがクリップボードのアクセス許可を拒否すると、ページが適切に応答できるようにPromiseがアクセスを拒否します。
+
+Chromeでは、ページがアクティブなタブである場合にのみクリップボードへのアクセスを許可します。DevTools自体がアクティブなタブであるため、DevToolsに直接貼り付けた場合は、ここで示す例の一部が実行されません。これには注意が必要です。`setTimeout()`を使用してクリップボードへのアクセスを遅らせ、関数が呼び出される前にページ内をすばやくクリックしてフォーカスします。
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## アクセス権ポリシーの統合
+
+iframeでAPIを使用するには、[アクセス権ポリシー](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)を使用してAPIを有効にする必要があります。これにより、さまざまなブラウザ機能とAPIを選択的に有効化または無効化できるメカニズムが定義されます。具体的には、アプリのニーズに応じて、`clipboard-read`または`clipboard-write`のいずれかまたは両方を渡す必要があります。
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## 特徴の検出
+
+すべてのブラウザをサポートしながら非同期クリップボードAPIを使用するには、`navigator.clipboard`をテストし、以前のメソッドにフォールバックします。たとえば、他のブラウザを含めるために貼り付けを実装する方法は次のとおりです。
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+それだけではありません。 非同期クリップボードAPIより前は、Webブラウザ間でさまざまなコピーと貼り付けの実装が混在していました。ほとんどのブラウザで、ブラウザ自体のコピーと貼り付けは、`document.execCommand('copy')`および`document.execCommand('paste')`を使用してトリガーできます。コピーするテキストがDOMに存在しない文字列である場合は、DOMに挿入して、次の項目を選択する必要があります。
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+});
+```
+
+`window.clipboardData`からクリップボードにアクセスすることもできます。クリックイベント (責任を持って許可を求めることの一部) などのユーザージェスチャ内でアクセスした場合、アクセス許可プロンプトは表示されません。
+
+## デモ
+
+以下のデモまたは[直接Glitch](https://async-clipboard-api.glitch.me/)を使用して、非同期クリップボードAPIを試してみることができます。
+
+最初の例は、クリップボードの内外でテキストを移動する方法を示しています。
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+画像でAPIを試すには、このデモを使用してください。PNGのみが[一部のブラウザ](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility)でのみサポートされていることを覚えていてください。
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 次のステップ
+
+Chromeは、[ドラッグアンドドロップAPI](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)に合わせた簡略化されたイベントを使用した、非同期クリップボードAPIの拡張に積極的に取り組んでいます。潜在的なリスクがあるため、Chromeは慎重に進めています。 Chromeの進捗状況に関する最新情報については、この記事と[ブログ](/blog/)で最新情報を確認してください。
+
+現時点で、クリップボードAPIのサポート[は多くのブラウザ](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)で利用できます。
+
+充実したコピーと貼り付けを実装してみてください。
+
+## 関連リンク
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## 謝辞
+
+非同期クリップボードAPIは、[Darwin Huang](https://www.linkedin.com/in/darwinhuang/)氏と[Gary Kačmarčík](https://www.linkedin.com/in/garykac/)氏によって実装されました。Darwin氏はデモも提供してくれました。この記事の一部をレビューしてくれた[Kyarik](https://github.com/kyarik)氏とGary Kačmarčík氏に感謝します。
+
+ヒーロー画像提供者: [Unsplash](https://unsplash.com/@markuswinkler)、[Markus Winkler氏](https://unsplash.com/@markuswinkler)
diff --git a/src/site/content/ja/blog/bfcache/index.md b/src/site/content/ja/blog/bfcache/index.md
new file mode 100644
index 00000000000..57fd35b0af6
--- /dev/null
+++ b/src/site/content/ja/blog/bfcache/index.md
@@ -0,0 +1,346 @@
+---
+layout: post
+title: バック/フォワードキャッシュ
+subhead: ブラウザーの戻るボタンと進むボタンを使用するときに、ページが瞬時に読み込まれるように最適化します。
+description: |2-
+
+  ブラウザーの戻るボタンと進むボタンを使用するときに、ページを瞬時に読み込むように最適化する方法について説明します。
+authors:
+  - philipwalton
+date: 2020-11-10
+updated: 2021-11-15
+hero: image/admin/Qoeb8x3a11BdGgRzYJbY.png
+alt: 戻るボタンと進むボタン
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+バック/フォワードキャッシュ (またはbfcache) は、ブラウザーの最適化であり、即時の前後移動ナビゲーションを可能にします。これにより、ユーザー (特に低速のネットワークやデバイスを使用しているユーザー) のブラウジングエクスペリエンスが大幅に向上します。
+
+Web開発者として、ユーザーがメリットを享受できるように、すべてのブラウザーで[bfcache用にページを最適化](#optimize-your-pages-for-bfcache)する方法を理解することが重要です。
+
+## ブラウザーの互換性
+
+bfcacheは、デスクトップとモバイルの両方で、[Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching)と[Safari](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/)の両方で長年サポートされてきました。
+
+バージョン86以降、ChromeはAndroidの[クロスサイト](/same-site-same-origin/)ナビゲーションで少数のユーザー向けにbfcacheを有効にしました。以降のリリースでは、追加のサポートが徐々に展開されました。バージョン96以降、bfcacheはデスクトップとモバイルのすべてのChromeユーザーに対して有効になっています。
+
+## bfcacheの基本
+
+bfcacheは、ユーザーが移動しているときにページの完全なスナップショット (JavaScriptヒープを含む) を格納するメモリ内キャッシュです。ページ全体がメモリに保存されているため、ユーザーが戻ることを決めた場合、ブラウザーはすばやく簡単にページを復元できます。
+
+Webサイトにアクセスし、リンクをクリックして別のページに移動したことがありますが、それが目的のページではないことに気づき、[戻る] ボタンをクリックしたことが何度もあることでしょう。その瞬間、bfcacheは前のページの読み込み速度に大きな違いをもたらす可能性があります。
+
+<div class="table-wrapper">
+  <table data-alignment="top">
+    <tr>
+      <td width="30%">
+        <strong>bfcacheが有効になってい<em>ない</em></strong>
+      </td>
+      <td>前のページを読み込む新しい要求が開始され、そのページが繰り返しアクセスできるように<a href="/reliable/#the-options-in-your-caching-toolbox">最適化</a>されているかどうかに応じて、ブラウザーはダウンロードされたばかりのリソースの一部 (またはすべて) を再ダウンロード、再解析、および再実行しなければならない場合があります。</td>
+    <tr>
+      <td><strong>bfcacheを有効に<em>すると</em></strong></td>
+      <td>前のページの読み込みは<em>基本的に瞬時</em>に行われます。これは、ネットワークにまったくアクセスしなくても、ページ全体をメモリから復元できるためです。</td>
+    </tr>
+  </table>
+</div>
+
+ナビゲーションで実現可能な高速化については、この動画でbfcacheの動作を確認してください。
+
+{% YouTube 'cuPsdRckkF0' %}
+
+上の動画では、bfcacheを使用した例は、bfcacheを使用しない例よりもかなり高速です。
+
+bfcacheは、ナビゲーションを高速化するだけでなく、リソースを再度ダウンロードする必要がないため、データ使用量も削減します。
+
+Chromeの使用状況データによると、デスクトップでは10分の1のナビゲーション、モバイルでは5分の1のナビゲーションが前後いずれかの移動です。 bfcacheを有効にすると、ブラウザーはデータ転送と、毎日数十億ものWebページの読み込みに費やす時間をなくすことができます。
+
+### 「キャッシュ」の仕組み
+
+bfcacheで使用される「キャッシュ」は、[HTTPキャッシュ](/http-cache/) (これは繰り返しのナビゲーションを高速化するのにも役立ちます) とは異なります。bfcacheは、メモリ内のページ全体 (JavaScriptヒープを含む) のスナップショットですが、HTTPキャッシュには、以前に行われた要求に対する応答のみが含まれます。ページの読み込みに必要なすべての要求がHTTPキャッシュから実行されることは非常にまれであるため、bfcache復元を使用した繰り返しアクセスは、最も最適化された非bfcacheナビゲーションよりも常に高速です。
+
+ただし、メモリ内にページのスナップショットを作成するには、実行中のコードを保持するための最善の方法に関して、ある程度の複雑さが伴います。たとえば、ページがbfcacheにあるときにタイムアウトに達した場合、`setTimeout()`呼び出しをどのように処理しますか。
+
+この質問に対する答えは、ブラウザーが保留中のタイマーまたは未解決のプロミス (基本的には[JavaScriptタスクキュー](https://html.spec.whatwg.org/multipage/webappapis.html#task-queue)のすべての保留中のタスク) の実行を一時停止し、ページがbfcacheから復元されたとき (または復元された場合) にタスクの処理を再開することです。
+
+これはかなりリスクが低い (タイムアウトやプロミスなど) 場合もありますが、非常に混乱したり、予期しない動作につながる可能性があります。たとえば、ブラウザーが[IndexedDBトランザクション](https://developer.mozilla.org/docs/Web/API/IDBTransaction)の一部として必要なタスクを一時停止すると、同じオリジンで開いている他のタブに影響を与える可能性があります (同じIndexedDBデータベースには複数のタブから同時にアクセスできるため)。その結果、通常、ブラウザーは、IndexedDBトランザクションの途中、または他のページに影響を与える可能性のあるAPIを使用しているときには、ページをキャッシュに保存しようとしません。
+
+さまざまなAPIの使用がページのbfcacheの適格性にどのように影響するかについての詳細は、以下の[bfcache用にページを最適化する](#optimize-your-pages-for-bfcache)を参照してください。
+
+### bfcacheを監視するAPI
+
+bfcacheはブラウザーが自動的に行う最適化ですが、開発者が[ページを最適化](#optimize-your-pages-for-bfcache)し、それに応じて[メトリックやパフォーマンス測定](#implications-for-analytics-and-performance-measurement)を調整できるように、bfcacheがいつ発生するかを知ることは依然として重要です。
+
+bfcacheを監視するために使用される主なイベントは、[ページ遷移イベント](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent) (`pageshow`および`pagehide`) です。これらは、bfcacheが存在し、[現在使用されているほとんどすべてのブラウザー](https://caniuse.com/page-transition-events)でサポートされている限り存在します。
+
+新しい[ページライフサイクル](https://developer.chrome.com/blog/page-lifecycle-api/)イベント (`freeze`と`resume`) も、ページがbfcacheに入出力されるとき、およびその他の状況で配信されます。たとえば、CPU使用率を最小限に抑えるために、背景タブがフリーズした場合です。現在、ページライフサイクルイベントはChromiumベースのブラウザでのみサポートされていることに注意してください。
+
+#### ページがbfcacheから復元されるタイミングを監視する
+
+`pageshow`イベントは、ページが最初に読み込まれているとき、およびページがbfcacheから復元されるたびに、`load`イベントの直後に発生します。`pageshow`イベントには[`persisted`](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent/persisted)プロパティがあり、ページがbfcacheから復元された場合は`true`、そうでない場合は`false`になります。`persisted`プロパティを使用して、通常のページの読み込みとbfcacheの復元を区別できます。例えば次のようになります。
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    console.log('This page was restored from the bfcache.');
+  } else {
+    console.log('This page was loaded normally.');
+  }
+});
+```
+
+Page Lifecycle APIをサポートするブラウザーでは、ページがbfcacheから復元されたとき (`pageshow`イベントの直前) に`resume`イベントも発生しますが、ユーザーがフリーズした背景タブにもう一度アクセスしたときにも発生します。フリーズ後にページの状態 (bfcache内のページを含む) を復元する場合は、`resume`イベントを使用できますが、サイトのbfcacheヒット率を測定する場合は、 `pageshow`イベントを使用する必要があります。場合によっては、両方を使用する必要があります。
+
+{% Aside %} bfcache測定のベストプラクティスの詳細については、[パフォーマンスと分析への影響](#how-bfcache-affects-analytics-and-performance-measurement)を参照してください。 {% endAside %}
+
+#### ページがbfcacheになるときを監視する
+
+`pagehide`イベントは`pageshow`イベントの反対です。`pageshow`イベントは、ページが正常に読み込まれるか、bfcacheから復元されたときに発生します。`pagehide`イベントは、ページが正常に読み込み解除されたとき、またはブラウザーがページをbfcacheに入れようとしたときに発生します。
+
+`pagehide`イベントにも`persisted`プロパティがあり、 `false`場合は、ページがbfcacheに入ろうとしていないことを確信できます。ただし、 `persisted`プロパティが`true` 、ページがキャッシュされることは保証されません。*これは、ブラウザがページをキャッシュしようと*していることを意味しますが、キャッシュを不可能にする要因がある可能性があります。
+
+```js
+window.addEventListener('pagehide', (event) => {
+  if (event.persisted === true) {
+    console.log('This page *might* be entering the bfcache.');
+  } else {
+    console.log('This page will unload normally and be discarded.');
+  }
+});
+```
+
+同様に、 `freeze`イベントは`pagehide`ます（イベントの`persisted`プロパティが`true` ）が、これもブラウザ*が*ページをキャッシュすることを意図していることを意味します。以下に説明するいくつかの理由により、それでも破棄しなければならない場合があります。
+
+## bfcache用にページを最適化する
+
+すべてのページがbfcacheに保存されるわけではなく、ページがそこに保存されたとしても、無期限にそこにとどまるわけではありません。キャッシュヒット率を最大化するには、開発者がページをbfcacheに適格 (および不適格) にする理由を理解することが重要です。
+
+次のセクションでは、ブラウザーがページをキャッシュに保存できるようにするためのベストプラクティスの概要を説明します。
+
+### `unload`イベントは絶対に使用しない
+
+すべてのブラウザーでbfcacheを最適化する最も重要な方法は、`unload`イベントを使用しないことです。
+
+`unload` `unload`イベントが発生した後はページが存在し続けないという（合理的な）仮定の下で動作するため、ブラウザにとって問題があります。このプレゼント、これらのページの多くは*また、*ことを前提に構築されたので、挑戦`unload`イベントはもはや真でユーザーが離れてナビゲートされるたびに、火災う（と[長い時間のために、真されていません](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event)）。
+
+そのため、ブラウザーはジレンマに直面しており、ユーザーエクスペリエンスを向上させることができるものから選択する必要がありますが、ページを壊すリスクもあります。
+
+`unload`リスナーを追加する場合、ページをbfcacheの対象外にすることを選択しました。これにより、リスクは低くなりますが*、多く*のページが失格になります。 `unload`イベントリスナーを使用して一部のページをキャッシュしようとしますが、破損の可能性を減らすため`unload`イベントを実行しないため、イベントの信頼性が非常に低くなります。
+
+`unload`イベントを使用する代わりに`pagehide`イベントを使用してください。 `pagehide` `unload`イベントが現在発生しているすべての場合に発生し、ページがbfcacheに配置されたとき*にも発生します。*
+
+実際、[Lighthouse v6.2.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.2.0)には[`no-unload-listeners audit`](https://github.com/GoogleChrome/lighthouse/pull/11085)が追加されており、ページのJavaScript (サードパーティライブラリを含む) が`unload`イベントリスナーを追加する場合には開発者に警告します。
+
+{% Aside 'warning' %}絶対に`unload`イベントリスナーを追加しないでください。代わりに、`pagehide`イベントを使用してください。`unload`イベントリスナーを追加すると、Firefoxでのサイトの速度が低下し、ほとんどの場合ChromeとSafariではコードが実行されなくなります。 {% endAside %}
+
+#### 条件付きで`beforeunload`リスナーのみを追加する
+
+`beforeunload`イベントによって、ページがChromeまたはSafariのbfcacheの対象外になることはありませんが、Firefoxでは対象外になるため、どうしても必要な場合を除いて、このイベントの使用は避けてください。
+
+ただし、`unload`イベントとは異なり、`beforeunload`を使用する合理的な理由があります。たとえば、未保存の変更があり、ページから移動すると変更が失われることをユーザーに警告するときです。ユーザーに未保存の変更があるときにのみ`beforeunload`リスナーを追加し、未保存の変更が保存された直後に削除することをお勧めします。
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('beforeunload', (event) => {
+  if (pageHasUnsavedChanges()) {
+    event.preventDefault();
+    return event.returnValue = 'Are you sure you want to exit?';
+  }
+});
+```
+
+{% CompareCaption %}上記のコードは、`beforeunload`リスナーを無条件に追加します。 {% endCompareCaption %} {% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  return event.returnValue = 'Are you sure you want to exit?';
+};
+
+// ページに未保存の変更があるときにコールバックを呼び出す関数。
+onPageHasUnsavedChanges(() => {
+  window.addEventListener('beforeunload', beforeUnloadListener);
+});
+
+// ページの未保存の変更が解決されたときにコールバックを呼び出す関数。
+onAllChangesSaved(() => {
+  window.removeEventListener('beforeunload', beforeUnloadListener);
+});
+```
+
+{% CompareCaption %}上記のコードは、必要なときに`beforeunload`リスナーを追加します (不要なときは削除)。 {% endCompareCaption %} {% endCompare %}
+
+### window.opener参照を避ける
+
+一部のブラウザー (Chromiumベースのブラウザーを含む) では、[`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener) を使用せずに、[`window.open()`](https://developer.mozilla.org/docs/Web/API/Window/open) を使用するか、([バージョン88より前のChromiumベースのブラウザーで](https://crbug.com/898942)) [`target=_blank`](https://developer.mozilla.org/docs/Web/HTML/Element/a#target)へのリンクを使用してページが開かれた場合、元のページが開かれたページのウィンドウオブジェクトを参照します。
+
+[セキュリティ上のリスク](https://mathiasbynens.github.io/rel-noopener/)のほかに、非ヌルのcode1}[window.opener](https://developer.mozilla.org/docs/Web/API/Window/opener) 参照があるページは、それにアクセスしようとしているページを破損させる可能性があるため、安全にbfcacheに格納できません。
+
+したがって、可能な限り、`rel="noopener"`を使用して`window.opener`参照を作成しないようにすることをお勧めします。サイトでウィンドウを開いて、[`window.postMessage()`](https://developer.mozilla.org/docs/Web/API/Window/postMessage) で制御するか、ウィンドウオブジェクトを直接参照する必要がある場合は、開いているウィンドウも元のウィンドウもbfcache.の対象になりません。
+
+### ユーザーが移動する前に必ず開いている接続を閉じる
+
+上記のように、ページがbfcacheに格納されると、スケジュールされたすべてのJavaScriptタスクが一時停止され、ページがキャッシュから取り出されると再開されます。
+
+これらのスケジュールされたJavaScriptタスクがDOM API (または現在のページのみに分離された他のAPI) にのみアクセスしている場合、ページがユーザーに表示されていないときにこれらのタスクを一時停止しても、問題は発生しません。
+
+ただし、これらのタスクが同じオリジンの他のページからもアクセスできるAPIに接続されている場合 (たとえば、IndexedDB、Web Locks、WebSocketsなど) は、これらのタスクを一時停止すると他のタブのコードが実行されなくなる可能性があるため、これが問題になる可能性があります。
+
+その結果、一部のブラウザーでは、次のシナリオのときに、ページをbfcacheに配置しようとしません。
+
+- [IndexedDB接続](https://developer.mozilla.org/docs/Web/API/IDBOpenDBRequest)が開いているページ
+- 実行中の[fetch()](https://developer.mozilla.org/docs/Web/API/Fetch_API)または[XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)があるページ
+- [WebSocket](https://developer.mozilla.org/docs/Web/API/WebSocket)または[WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API)接続が開いているページ
+
+ページでこれらのAPIのいずれかを使用している場合は、`pagehide`または`freeze`イベント中に必ず接続を閉じて、オブザーバーを削除またはた切断することをお勧めします。これにより、ブラウザーは、開いている他のタブに影響を与えるリスクなく、ページを安全にキャッシュに保存できます。
+
+次に、ページがbfcacheから復元された場合、それらのAPIを再度開くか再接続できます (`pageshow`または`resume`イベント)。
+
+次の例では、`pagehide`イベントリスナーで開いている接続を閉じることにより、IndexedDBを使用するときに、ページがbfcacheの対象であることを確認する方法を示しています。
+
+```js
+let dbPromise;
+function openDB() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open('my-db', 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
+      req.onerror = () => reject(req.error);
+      req.onsuccess = () => resolve(req.result);
+    });
+  }
+  return dbPromise;
+}
+
+// ユーザーが移動するときにデータベースへの接続を閉じる。
+window.addEventListener('pagehide', () => {
+  if (dbPromise) {
+    dbPromise.then(db => db.close());
+    dbPromise = null;
+  }
+});
+
+// ページがbfcacheから読み込まれるか復元されるときに接続を開く。
+window.addEventListener('pageshow', () => openDB());
+```
+
+### bfcacheの復元後に古いデータまたは機密データを更新する
+
+サイトがユーザー状態 (特に機密性の高いユーザー情報) を保持している場合は、ページがbfcacheから復元された後、そのデータを更新またはクリアする必要があります。
+
+たとえば、ユーザーがチェックアウトページに移動してからショッピングカートを更新した場合、古いページがbfcacheから復元された場合、戻る操作によって古い情報が表示される可能性があります。
+
+もう1つのより重要な例は、ユーザーが公共のコンピューターでサイトからサインアウトし、次のユーザーが[戻る]ボタンをクリックした場合です。これにより、ユーザーがログアウトしたときにクリアされたと想定した個人データが公開される可能性があります。
+
+この状況を避けるために、`event.persisted`が`true`の場合、`pageshow`イベントの後に常にページを更新することをお勧めします。
+
+`pageshow`イベントでサイト固有のCookieが存在するかどうかを確認し、Cookieが見つからない場合は再読み込みします。
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted && !document.cookie.match(/my-cookie/)) {
+    //ユーザーがログアウトした場合に強制的に再読み込み。
+    location.reload();
+  }
+});
+```
+
+### ページがキャッシュ可能であることを確認するためのテスト
+
+Chrome DevToolsは、ページをテストしてbfcache用に最適化されていることを確認し、ページの適格性を妨げる可能性のある問題を特定するのに役立ちます。
+
+特定のページをテストするには、Chromeでそのページに移動し、DevToolsで**[アプリケーション]** > **[バックフォワードキャッシュ]** に移動します。次に、**[テストの実行**] ボタンをクリックすると、DevToolsは前後に移動して、ページをbfcacheから復元できるかどうかを判断します。
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/QafTzULUNflaSh77zBgT.png", alt="DevToolsのバックフォワードキャッシュパネル", width="800", height="313" %}
+
+{% Aside %} 現在、DevToolsのバック/フォワードキャッシュ機能は活発に開発されています。開発者は、Chrome Canaryでページをテストして、最新バージョンのDevToolsを実行し、最新のbfcacheの推奨事項が適用されていることを確認するように強くお勧めします。 {% endAside %}
+
+成功すると、パネルに「バックフォワードキャッシュから復元されました」と表示されます。
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vPwN0z95ZBTiwZIpdZT4.png", alt="ページがbfcacheから正常に復元されたことを報告するDevTools", width="800", height="313" %}
+
+失敗した場合、パネルにはページが復元されなかったことと、理由が表示します。開発者とが対処できる理由である場合は、その点についても表示されます。
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/ji3ew4DoP6joKdJvtGwa.png", alt="bfcacheからページを復元できなかったことを報告'するDevTools'", width="800", height="313" %}
+
+上のスクリーンショットでは、`unload`イベントリスナーの使用によって、ページがbfcacheの[対象にならなくなっています](/bfcache/#never-use-the-unload-event)。`unload`から`pagehide`を使用するように切り替えることで、この問題を修正できます。
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('unload', ...);
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.addEventListener('pagehide', ...);
+```
+
+{% endCompare %}
+
+## bfcacheが分析とパフォーマンス測定にどのように影響するか
+
+分析ツールを使用してサイトへのアクセスを追跡すると、Chromeはより多くのユーザーに対してbfcacheを有効し続けるため、報告されるページビューの総数が減少することに気付くはずです。
+
+実際、人気のある分析ライブラリのほとんどはbfcacheの復元を新しいページビューとして追跡しないため、bfcacheを実装している他のブラウザからのページビューを*すでに*過少報告している可能性があります。
+
+Chromeでbfcacheが有効であることでページビュー数を減らしたくない場合は、`pageshow`プロパティを待機し`persisted`プロパティを確認することで、bfcacheの復元をページビューとして報告できます (推奨)。
+
+次の例は、Google Analyticsでこれを行う方法を示しています。ロジックは他の分析ツールでも同様であるはずです。
+
+```js
+// ページが最初に読み込まれるときにページビューを送信。
+gtag('event', 'page_view');
+
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted === true) {
+    // Send another pageview if the page is restored from bfcache.
+    gtag('event', 'page_view');
+  }
+});
+```
+
+### パフォーマンス測定
+
+bfcacheは、[フィールド](/user-centric-performance-metrics/#in-the-field)で収集されたパフォーマンスメトリック、特にページの読み込み時間を測定するメトリックにも悪影響を与える可能性があります。
+
+bfcacheナビゲーションは、新しいページの読み込みを開始するのではなく、既存のページを復元します。このため、bfcacheを有効にすると、収集されるページの読み込みの総数が減少します。ただし、重要なのは、bfcacheの復元で置換されているページの読み込みは、データセット内で最も高速なページの読み込みの一部であった可能性が高いということです。これは、前後のナビゲーションは、定義上、繰り返しアクセスであり、繰り返しページの読み込みは、最初の訪問者からのページの読み込みよりも一般的に高速であるためです (前述の[HTTPキャッシュ](/http-cache/)のため)。
+
+その結果、データセット内のページの読み込みが減り、ユーザーが体験するパフォーマンスがおそらく向上したにもかかわらず、配信が遅くなる可能性があります。
+
+この問題に対処する方法はいくつかあります。1つは、すべてのページ読み込みメトリックにそれぞれの[ナビゲーションタイプ](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types) (`navigate`、 `reload`、 `back_forward`、または`prerender`) 注釈を付けることです。これにより、全体的な配信がマイナスに偏っている場合でも、これらのナビゲーションタイプ内でパフォーマンスを監視し続けることができます。このアプローチは、[Time to First Byte (TTFB)](/ttfb/)などの非ユーザー中心のページ読み込みメトリックで推奨されます。
+
+[Core Web Vitals](/vitals/)のようなユーザー中心のメトリックの場合、より適切なオプションは、ユーザーエクスペリエンスをより正確に表す値を報告することです。
+
+{% Aside 'caution' %} [Navigation Timing API](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types)の`back_forward`ナビゲーションタイプをbfcacheの復元と混同しないでください。Navigation Timing APIはページの読み込みにのみ注釈を付けますが、bfcacheの復元は前のナビゲーションから読み込まれたページを再利用します。 {% endAside %}
+
+### Core Web Vitalsへの影響
+
+[Core Web Vitals](/vitals/)はさまざまな次元 (読み込み速度、双方向性、視覚的安定性) でWebページのユーザーエクスペリエンスを測定します。ユーザーは、従来のページ読み込みよりも高速なナビゲーションとしてbfcacheの復元を体験するため、Core WebVitalsのメトリックがこれを反映することが重要です。 結局のところ、ユーザーにとって気になるのは、bfcacheが有効になっているかどうかではなく、ナビゲーションが高速であることだけです。
+
+Core Web Vitalsメトリックを収集して報告する[Chrome User Experience Report](https://developer.chrome.com/docs/crux/)などのツールは、bfcacheの復元をデータセット内の個別のページアクセスとして扱います。
+
+また、bfcacheの復元後にこれらのメトリックを測定するための専用のWebパフォーマンスAPIは (まだ) ありませんが、既存のWeb APIを使用してそれらの値を概算できます。
+
+- [Largest Contentful Paint (LCP)](/lcp/)では、`pageshow`イベントのタイムスタンプと次にペイントされたフレームのタイムスタンプの間の差分を使用できます (フレーム内のすべての要素が同時にペイントされるため)。 bfcache復元の場合、LCPとFCPは同じになることに注意してください。
+- [First Input Delay (FID)](/fid/) では、`pageshow`イベントリスナー ([FID polyfill](https://github.com/GoogleChromeLabs/first-input-delay)で使用したのと同じもの) を再度追加し、bfcache復元後も最初の入力の遅延としてFIDを報告できます。
+- [Cumulative Layout Shift (CLS)](/cls/) の場合、既存のパフォーマンスオブザーバーを引き続き使用できます。現在のCLS値を0にリセットするだけです。
+
+bfcacheが各メトリックに与える影響の詳細については、個々のCore Web Vitalsの[メトリックガイドページ](/vitals/#core-web-vitals)を参照してください。また、これらのメトリックのbfcacheバージョンをコードに実装する方法の具体例については、[web-vitals JSライブラリに追加するPR](https://github.com/GoogleChrome/web-vitals/pull/87)を参照してください。
+
+{% Aside %} `v1`以降、[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScriptライブラリは、報告するメトリックで[bfcacheの復元をサポート](https://github.com/GoogleChrome/web-vitals/pull/87)します。`v1`以降を使用している開発者は、コードを更新する必要はありません。 {% endAside %}
+
+## 追加リソース
+
+- [Firefox Caching](https://developer.mozilla.org/Firefox/Releases/1.5/Using_Firefox_1.5_caching) *(Firefoxのbfcache)*
+- [Page Cache](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) *(Safariのbfcache)*
+- [Back/forward cache: web exposed behavior](https://docs.google.com/document/d/1JtDCN9A_1UBlDuwkjn1HWxdhQ1H2un9K4kyPLgBqJUc/edit?usp=sharing) *(ブラウザー間のbfcacheの違い)*
+- [bfcache tester](https://back-forward-cache-tester.glitch.me/?persistent_logs=1) *(異なるAPIとイベントがブラウザーのbfcacheに影響する方法をテスト)*
diff --git a/src/site/content/ja/blog/blog.11tydata.js b/src/site/content/ja/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/ja/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/ja/blog/bluetooth/index.md b/src/site/content/ja/blog/bluetooth/index.md
new file mode 100644
index 00000000000..8588484d16b
--- /dev/null
+++ b/src/site/content/ja/blog/bluetooth/index.md
@@ -0,0 +1,415 @@
+---
+title: JavaScriptを介したBluetoothデバイスとの通信
+subhead: |2-
+
+  Web Bluetooth APIを使用すると、ウェブサイトはBluetoothデバイスと通信できます。
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: コイン上に置かれたBluetoothチップ
+description: |2-
+
+  Web Bluetooth APIを使用すると、ウェブサイトはBluetoothデバイスと通信できます。
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+セキュリティとプライバシーが保護された状態で、ウェブサイトが近くのBluetoothデバイスと通信できると言ったら信じられますか？これが可能であれば、心拍数モニター、歌う電球、さらには[カメ](https://www.youtube.com/watch?v=1LV1Fk5ZXwA)でさえ、ウェブサイトと直接対話することができることになります。
+
+これまで、Bluetoothデバイスと対話する機能は、プラットフォーム固有のアプリでのみ可能でした。 Web Bluetooth APIはこれを変更し、ウェブブラウザでも実現することを目的としています。
+
+## まず始めに
+
+[この記事は、Bluetooth Low Energy（BLE）とGeneric Attribute Profile](https://www.bluetooth.com/specifications/gatt/) （GATT）がどのように機能するかについての基本的な知識があることを前提としています。
+
+[Web Bluetooth API仕様](https://webbluetoothcg.github.io/web-bluetooth/)はまだ完成していませんが、仕様の作成者は、このAPIを試して、[仕様に関するフィードバック](https://github.com/WebBluetoothCG/web-bluetooth/issues)と[実装に関するフィードバック](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth)を提供する意気込みのある開発者を積極的に探しています。
+
+Web Bluetooth APIのサブセットは、ChromeOS、Chrome for Android 6.0、Mac（Chrome 56）、およびWindows 10（Chrome 70）で利用できます。つまり、近くのBluetooth Low Energyデバイスを[リクエスト](#request)して[接続](#connect)し、Bluetoothの特性を[読み](#read)/[書き](#write)し、[GATT通知を受信](#notifications)して[Bluetoothデバイスの切断](#disconnect)を認識し、[Bluetooth記述子の読み書き](#descriptors)さえも行うことができということです。詳細については、MDNの[ブラウザ互換性](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility)テーブルを参照してください。
+
+Linuxおよび以前のバージョンのWindowsの場合は、`about://flags`で`#experimental-web-platform-features`フラグを有効にしてください。
+
+### オリジントライアルに利用可能
+
+現場でWeb Bluetooth APIを使用している開発者から可能な限り多くのフィードバックを得るために、Chromeは以前、この機能をChromeOS、Android、およびMacの[オリジントライアル](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)としてChrome53に追加しました。
+
+このトライアルは2017年1月に成功して終了しました。
+
+## セキュリティ要件
+
+セキュリティのトレードオフを理解するために、ChromeチームのソフトウェアエンジニアとしてWeb Bluetooth APIの仕様に取り組むJeffreyYasskinが投稿した「[Web Bluetooth Security Model](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2)」という記事を読むことをお勧めします。
+
+### HTTPSのみ
+
+この実験的なAPIはウェブに追加された強力な新機能であるため、[セキュリティで保護されたコンテキスト](https://w3c.github.io/webappsec-secure-contexts/#intro)でのみ使用できます。つまり、[TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security)を念頭にビルドする必要があります。
+
+### ユーザージェスチャーが必要
+
+セキュリティ機能として、`navigator.bluetooth.requestDevice`でBluetoothデバイスを検出するには、タッチやマウスクリックなどの[ユーザージェスチャ](https://html.spec.whatwg.org/multipage/interaction.html#activation)によるトリガーが必要です。[`pointerup`](https://developer.chrome.com/blog/pointer-events/)、`click`、`touchend`イベントをリスンするということです。
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // navigator.bluetooth.requestDeviceを呼び出す
+});
+```
+
+## コードを確認する
+
+Web Bluetooth APIは、JavaScriptの[Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)に大きく依存しています。それらに精通していない場合は、このすばらしい[Promisesチュートリアル](/promises)をご覧ください。また、`() => {}`は単にECMAScript 2015の[Arrow関数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)です。
+
+### Bluetoothデバイスを要求する {: #request }
+
+このバージョンのWeb Bluetooth API仕様では、Centralロールで実行しているウェブサイトが、BLE接続を介してリモートGATTサーバーに接続できるようになっています。Bluetooth4.0以降を実装したデバイス間の通信をサポートしています。
+
+`navigator.bluetooth.requestDevice`を使用して近くのデバイスにアクセスを要求すると、ブラウザはユーザーにデバイスセレクターを表示します。ユーザーは1つのデバイスを選択するか、単にリクエストをキャンセルすることができます。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">Bluetoothデバイスのユーザープロンプト。</a></p>
+  </figcaption></figure>
+
+`navigator.bluetooth.requestDevice()`関数は、フィルターを定義する必須オブジェクトを取ります。これらのフィルターは、アドバタイズされたBluetooth GATTサービスやデバイス名に一致するデバイスのみを返すために使用されます。
+
+#### サービスフィルター
+
+たとえば、[Bluetooth GATT Battery Service](https://www.bluetooth.com/specifications/gatt/)をアドバタイズするBluetoothデバイスを要求するには、次のように行います。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+ただし、Bluetooth GATT Serviceが[標準Bluetooth GATTサービス](https://www.bluetooth.com/specifications/assigned-numbers/)のリストにない場合は、完全なBluetooth UUIDか短い16ビットまたは32ビット形式のいずれかを指定できます。
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### 名前フィルター
+
+`name`フィルターキーを使ってアドバタイズされているデバイス名に基づいて、または`namePrefix`フィルターキーを使ってこの名前のプレフィックスに基づいて、Bluetoothデバイスを要求することもできます。この場合、サービスフィルターに含まれていないサービスにアクセスできるように、`optionalServices`キーも定義する必要があることに注意してください。そうしない場合、後でそれらにアクセスしようとしたときにエラーが発生します。
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // 後でサービスにアクセスするために必要です。
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### メーカーデータフィルター
+
+`manufacturerData`フィルターキーを使ってアドバタイズされているメーカー固有のデータに基づいてBluetoothデバイスをリクエストすることもできます。このキーは、`companyIdentifier`という名前の必須の[Bluetooth会社ID](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/)キーを持つオブジェクトの配列です。それで始まるBluetoothデバイスからのメーカーデータをフィルタリングするデータプレフィックスを指定することもできます。サービスフィルターに含まれていないサービスにアクセスできるように`optionalServices`キーも定義する必要があることに注意してください。そうしない場合、後でそれらにアクセスしようとしたときにエラーが発生します。
+
+```js
+// メーカーデータのバイトが [0x01, 0x02] で開始するGoogle会社のBluetoothデバイスを
+// フィルターします。
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // 後でサービスにアクセスするために必要です。
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+マスクをデータプレフィックスとともに使用して、メーカーデータの一部のパターンに一致させることもできます。詳細については、 [Bluetoothデータフィルターの説明](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md)をご覧ください。
+
+{% Aside %}執筆時点では、 `manufacturerData`フィルターキーはChrome 92で使用できます。古いブラウザーとの下位互換性が必要な場合は、メーカーデータフィルターが空であると見なされるため、フォールバックオプションを提供する必要があります。 [例を](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ)参照してください。 {% endAside %}
+
+#### フィルターなし
+
+最後に、 `filters`の代わりに、`acceptAllDevices`キーを使用すると、近くにあるすべてのBluetoothデバイスを表示できます。一部のサービスにアクセスできるように`optionalServices`キーも定義する必要があります。そうしない場合、後でそれらにアクセスしようとしたときにエラーが発生します。
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // 後でサービスにアクセスするために必要です。
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %}フィルターがないために、関連のないデバイスがセレクターに表示され、エネルギーが浪費される可能性があります。注意して使用してください。 {% endAside %}
+
+### Bluetoothデバイスに接続する {: #connect }
+
+`BluetoothDevice`を取得したら、次はどうすればよいでしょうか。サービスと特性の定義を保持しているBluetoothリモートGATTサーバーに接続することにしましょう。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // 人間が読み取れるデバイス名。
+  console.log(device.name);
+
+  // リモートGATTサーバーへの接続を試行。
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### Bluetooth特性を読み取る {: #read }
+
+ここでは、リモートBluetoothデバイスのGATTサーバーに接続しています。次に、プライマリGATTサービスを取得し、このサービスに属する特性を読み取ります。たとえば、デバイスのバッテリーの現在の充電レベルを読み取ってみましょう。
+
+以下の例では、 `battery_level`は[標準化されたバッテリーレベル特性](https://www.bluetooth.com/specifications/gatt/)です。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Battery Serviceを取得中…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Battery Level Characteristicを取得中…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Battery Levelを読み取り中…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Battery percentage is ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+カスタムBluetoothGATT特性を使用する場合は、完全なBluetooth UUIDまたは短い16ビットまたは32ビット形式のいずれかを指定して、`service.getCharacteristic`を構成します。
+
+`characteristicvaluechanged`イベントリスナーを追加して、その値の読み取りを処理することもできることに注意してください。以降でのGATT通知もオプションで処理する方法については、「[Read Characteristic Value Changed Sample](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html)」をご覧ください。
+
+```js
+…
+.then(characteristic => {
+  // 特性値が変化したときのイベントリスナーをセットアップ。
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Battery Levelを読み取り中…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Battery percentage is ' + batteryLevel);
+}
+```
+
+### Bluetooth特性への書き込み {: #write }
+
+Bluetooth GATT特性への書き込みは、読み取るのと同じくらい簡単です。今回は、Heart Rate Control Point（心拍数コントロールポイント）を使用して、心拍数モニターデバイスの [Energy Expended]（消費エネルギー）フィールドの値を0にリセットしましょう。
+
+これは特別な技ではなく、すべて[Heart Rate Control Point Characteristicsページ](https://www.bluetooth.com/specifications/gatt/)で説明されています。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // 1の書き込みは、使用されたエネルギーをリセットするシグナルとなります。
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Energy expended has been reset.');
+})
+.catch(error => { console.error(error); });
+```
+
+### GATT通知を受け取る {: #notifications }
+
+次に、デバイスで[Heart Rate Measurement](https://www.bluetooth.com/specifications/gatt/)（心拍数測定）特性が変更されたときに通知を受ける方法を見てみましょう。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Notifications have been started.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Received ' + value);
+  // TODO: Heart Rate Measurement値を解析する。
+  // https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.jsを参照
+}
+```
+
+[通知サンプル](https://googlechrome.github.io/samples/web-bluetooth/notifications.html)`stopNotifications()`を使用して通知を停止し、追加された`characteristicvaluechanged`イベントリスナーを適切に削除する方法を示しています。
+
+### Bluetoothデバイスから切断する {: #disconnect }
+
+より優れたユーザーエクスペリエンスを提供するには、切断イベントをリスンし、ユーザーが再接続できるようにすることをお勧めします。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // デバイスが切断されたときのイベントリスナーをセットアップ。
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // リモートGATTサーバーへの接続を試行。
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Device ${device.name} is disconnected.`);
+}
+```
+
+`device.gatt.disconnect()`を呼び出して、ウェブアプリをBluetoothデバイスから切断することもできます。これにより、既存の`gattserverdisconnected`イベントリスナーがトリガーされます。別のアプリがすでにBluetoothデバイスと通信している場合、Bluetoothデバイスの通信は停止しないことに注意してください。詳細については、 [Device Disconnect Sample](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html)（デバイス切断サンプル）と[Automatic Reconnect Sample](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html)（自動再接続サンプル）をご覧ください。
+
+{% Aside 'caution' %} Bluetooth GATTの属性、サービス、特性などは、デバイスが切断されると無効になります。つまり、コードは、再接続後に`getPrimaryService(s)` 、 `getCharacteristic(s)`などを介して取得し直す必要があります。 {% endAside %}
+
+### Bluetooth記述子の読み書き {: #descriptors }
+
+Bluetooth GATT記述子は、特性値を説明する属性です。 Bluetooth GATTの特性と同様の方法で、それらを読み書きできます。
+
+たとえば、デバイスの体温計の測定間隔のユーザー説明を読み取る方法を見てみましょう。
+
+以下の例では、`health_thermometer`は[Health Thermometerサービス](https://www.bluetooth.com/specifications/gatt/)、 `measurement_interval`は[Measurement Interval特性](https://www.bluetooth.com/specifications/gatt/)、 `gatt.characteristic_user_description`は[Characteristic User Description記述子](https://www.bluetooth.com/specifications/assigned-numbers/)です。
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`User Description: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+デバイスの体温計の測定間隔のユーザー説明を読み取ったので、それを更新してカスタム値を書き込む方法を見てみましょう。
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Defines the time between measurements.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## サンプル、デモ、コードラボ
+
+以下のすべての[Web Bluetoothサンプル](https://googlechrome.github.io/samples/web-bluetooth/index.html)は正常に検証済みです。これらのサンプルをフルに活用するには、Battery Service、Heart Rate Service、またはHealth Thermometer Serviceを使用してBLEペリフェラルをシミュレートする[BLE Peripheral Simulator Android App](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral)をインストールすることをお勧めします。
+
+### 初心者
+
+- [Device Infor](https://googlechrome.github.io/samples/web-bluetooth/device-info.html) - デバイス情報。BLEデバイスから基本的なデバイス情報を取得します。
+- [Battery Level](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html) - バッテリーレベル。バッテリー情報をアドバタイズするBLEデバイスからバッテリー情報を取得します。
+- [Reset Energy](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html) - エネルギーのリセット。心拍数をアドバタイズするBLEデバイスから消費されるエネルギーをリセットします。
+- [Characteristic Properties](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html) - 特性プロパティ。BLEデバイスの特定の特性のすべてのプロパティを表示します。
+- [Notifications](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) - 通知。BLEデバイスからの特徴的な通知を開始および停止します。
+- [Device Disconnect](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) - デバイスの切断。BLEデバイスに接続した後、接続を解除して、BLEデバイスの切断から通知を受け取ります。
+- [Get Characteristics](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html) - 特性の取得。BLEデバイスからアドバタイズされたサービスのすべての特性を取得します。
+- [Get Descriptors](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html) - 記述子の取得。BLEデバイスからアドバタイズされたサービスのすべての特性の記述子を取得します。
+- [Manufacturer Data Filter](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html) - メーカーデータフィルター。メーカーデータと一致するBLEデバイスから基本的なデバイス情報を取得します。
+
+### 複数の操作を組み合わせる
+
+- [GAP Characteristics](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html) - GAP特性。BLEデバイスのすべてのGAP特性を取得します。
+- [Device Information Characteristics](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html) - デバイス情報の特性。BLEデバイスのすべてのデバイス情報の特性を取得します。
+- [Link Loss](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html) - リンク損失。BLEデバイスのアラートレベル特性（readValueおよびwriteValue）を設定します。
+- [Discover Services &amp; Characteristics](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html) - サービスと特性の検出。BLEデバイスからアクセス可能なすべてのプライマリサービスとその特性を検出します。
+- [Automatic Reconnect](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) - 自動再接続。指数バックオフアルゴリズムを使用して、切断されたBLEデバイスに再接続します。
+- [Read Characteristic Value Changed](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) - 変更された特性値の読み取り。バッテリーレベルを読み取り、BLEデバイスから変更が通知されます。
+- [Read Descriptors](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html) - 記述子の読み取り。BLEデバイスからサービスのすべての特性の記述子を読み取ります。
+- [Write Descriptor](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html) - 記述子の書き込み。BLEデバイス上の記述「Characteristic User Description」に書き込みます。
+
+厳選された[Web Bluetooth デモ](https://github.com/WebBluetoothCG/demos)と[公式のWeb Bluetooth Codelabs](https://github.com/search?q=org%3Agooglecodelabs+bluetooth)もご覧ください。
+
+## ライブラリ
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils)は、APIにいくつかの便利な関数を追加するnpmモジュールです。
+- Web Bluetooth APIシムは、最も人気のあるNode.js BLE 中央モジュールである[noble](https://github.com/sandeepmistry/noble)で利用できます。これにより、WebSocketサーバーやその他のプラグインを必要とせずに、nobleをwebpack/browserifyで処理することができます。
+- [angle-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth)は、Web Bluetooth APIの構成に必要なすべてのボイラープレートを抽象化する[Angular](https://angularjs.org)のモジュールです。
+
+## ツール
+
+- [Get Started with Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator)は、Bluetoothデバイスとの対話を開始するためのすべてのJavaScriptボイラープレートコードを生成するシンプルなウェブアプリです。デバイス名、サービス、特性を入力し、そのプロパティを定義すれば、準備は完了です。
+- すでにBluetooth開発者である場合、 [Web Bluetooth Developer Studio Plugin](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin)でも、Bluetoothデバイス用のWeb Bluetooth JavaScriptコードを生成できます。
+
+## ヒント
+
+**Bluetooth Internals**ページはChromeの`about://bluetooth-internals`で利用できるため、近くのBluetoothデバイスに関するすべて（ステータス、サービス、特性、記述子）を調べることができます。
+
+<figure>{% Img src="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt="BluetoothをデバッグするChrome内部ページのスクリーンショット", width="800", height="572" %} <figcaption>BluetoothデバイスをデバッグするChromeの内部ページ。</figcaption></figure>
+
+また、Bluetoothのデバッグが難しい場合があるため、公式の[How to file Web Bluetooth bugs](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs)（Web Bluetoothバグの報告方法）ページを確認することもお勧めします。
+
+{% Aside 'caution' %} Bluetooth特性の読み書きを並行して行うと、プラットフォームによってはエラーが発生する場合があります。必要に応じて、GATT操作要求を手動でキューに入れることを強くお勧めします。「[GATT operation in progress - how to handle it?](https://github.com/WebBluetoothCG/web-bluetooth/issues/188)」（進行中のGATT操作 - その処理方法は？）をご覧ください。 {% endAside %}
+
+## 今後の学習
+
+まず、[ブラウザとプラットフォームの実装ステータス](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md)を確認して、Web Bluetooth APIのどの部分が現在実装されているかを確認してください。
+
+まだ不完全ですが、近い将来に期待される内容が簡単に説明されています。
+
+- [近くのBLEアドバタイズメント](https://github.com/WebBluetoothCG/web-bluetooth/pull/239)のスキャンは、 `navigator.bluetooth.requestLEScan()`で行われます。
+- 新しい`serviceadded`イベントは、新しく検出されたBluetooth GATT Serviceを追跡し、`serviceremoved`イベントは削除されたサービスを追跡します。新しい`servicechanged`イベントは、特性や記述子がBluetooth GATT Serviceに追加または削除されたときに発生します。
+
+### APIのサポートを表示する
+
+Web Bluetooth APIを使用することをぽ考えですか？あなたのパブリックサポートは、Chromeチームが機能に優先順位を付け、他のブラウザベンダーにそれらをサポートすることがいかに重要であるかを示す上でとても役立ちます。
+
+[@ChromiumDev](https://twitter.com/ChromiumDev)にツイートして、このAPIをどこで、どのように使用しているのかお知らせください。ハッシュタグは[`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live)をお使いください。
+
+## リソース
+
+- Stack Overflow: [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Chromeの機能ステータス: [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Chrome実装のバグ: [https://crbug.com/?q=component:Blink&gt;Bluetooth](https://crbug.com/?q=component:Blink%3EBluetooth)
+- Web Bluetooth仕様:  [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- 仕様の問題: [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- BLE Peripheral Simulator App: [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ' %}
+
+## 謝辞
+
+この記事をレビューしてくれた[Kayce Basques](https://github.com/kaycebasques)にお礼申し上げます。ヒーロー画像提供: [SparkFun Electronics（米国、ボルダー）](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg)
diff --git a/src/site/content/ja/blog/building-a-sidenav-component/index.md b/src/site/content/ja/blog/building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..53cb3cc0180
--- /dev/null
+++ b/src/site/content/ja/blog/building-a-sidenav-component/index.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: sidenavコンポーネントの構築
+subhead: 応答性の高いスライドアウトsidenavを作成する方法の基本的な概要
+authors:
+  - adamargyle
+description: 応答性の高いスライドアウトsidenavを作成する方法の基本的な概要
+date: 2021-01-21
+hero: image/admin/Zo1KkESK9CfEIYpbWzap.jpg
+thumbnail: image/admin/pVZO6FsC9tF3H6QIWpY2.png
+codelabs: codelab-building-a-sidenav-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+この投稿では、応答性が高く、ステートフルで、キーボードナビゲーションをサポートし、JavaScriptの有無にかかわらず動作し、ブラウザー間で動作するWeb用のSidenavコンポーネントのプロトタイプを作成した方法について紹介します。[デモ](https://gui-challenges.web.app/sidenav/dist/)を試しください。
+
+ビデオがお好みの場合は、この投稿のYouTubeバージョンをご覧ください。
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## 概要
+
+応答性の高いナビゲーションシステムを構築するのは難しいです。多少のユーザーはキーボードを使用し、多少のユーザーは強力なデスクトップを使用し、一部のユーザーは小さなモバイルデバイスからアクセスします。訪問する全員がメニューを開いたり閉じたりできる必要があります。
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/desktop-demo-1080p.mp4">
+  </source></video>
+  <figcaption>デスクトップからモバイルへのレスポンシブ対応のレイアウトのデモ</figcaption></figure>
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/mobile-demo-1080p.mp4">
+  </source></video>
+  <figcaption>iOSとAndroidでの明るいテーマと暗いテーマ</figcaption></figure>
+
+## Web戦術
+
+このコンポーネントの調査では、いくつかの重要なWebプラットフォーム機能を組み合わせることができました。
+
+1. CSS [`:target`](#target-psuedo-class)
+2. CSS[グリッド](#grid-stack)
+3. CSS[変換](#transforms)
+4. ビューポートとユーザー設定に関するCSSメディアクエリ
+5. `focus` [UX拡張の](#ux-enhancements)ためのJS
+
+私のソリューションとしてはサイドバーを1つ準備し、 `540px`以下の「モバイル」ビューポートになる時だけで切り替わります。`540px`は、モバイル向けのレイアウトと静的デスクトップ向けのレイアウトを切り替えるためのブレークポイントになります。
+
+### CSS `:target` pseudo-class {: #target-psuedo-class }
+
+一つの`<a>`リンクはURLハッシュを`#sidenav-open`に設定し、別の1つは空（ `''` ）に設定します。最後に、要素の一個にはハッシュと一致する`id`を持つようになります。
+
+```html
+<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
+
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<aside id="sidenav-open">
+  …
+</aside>
+```
+
+これらの各リンクをクリックすると、ページURLのハッシュ状態が変更され、疑似クラスを使用してサイドナビーゲションを表示したり、非表示にしたりします。
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+  }
+
+  #sidenav-open:target {
+    visibility: visible;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/hash-change.mp4">
+  </source></video></figure>
+
+### CSSグリッド{: #grid-stacks }
+
+以前、絶対に位置又は固定位置のサイドナビゲーションのレイアウトとコンポーネントのみを使用しました。ただし、グリッドでは、 `grid-area`構文を使用して、同行または同列に複数の要素を割り当てることができます。
+
+#### スタック
+
+主要なレイアウト要素`#sidenav-container`は、1行と2列を作成するグリッドであり、それぞれ1つが`stack`と呼ばれます。スペースが制限されている場合、CSSはすべての`<main>`要素の子を同じグリッド名に割り当て、すべての要素を同じスペースに配置してスタックを作成します。
+
+```css
+#sidenav-container {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 540px) {
+  #sidenav-container > * {
+    grid-area: stack;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </source></video></figure>
+
+#### メニューの背景
+
+`<aside>`は、サイドナビゲーションを含むアニメーション要素です。 2つの子が`[nav]`という名前を持つ`<nav>`と、メニューを閉じるために使用される`[escape]`という名前を持つ背景`<a>`となります。
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+メニューオーバーレイとボタンに近くのネガティブスペースに適した比率を見つけるために、`2fr`と`1fr`を調整してください。
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </source></video>
+  <figcaption>比率を変更する結果のデモ。</figcaption></figure>
+
+### CSS 3D変換と遷移{: #transforms }
+
+これで、レイアウトはモバイルビューポートのサイズに応じてスタックされます。新規のスタイルを追加するまで、デフォルトで記事をオーバーレイしています。この次のセクションで狙っているUXは次のとおりです。
+
+- 開いたり閉じたりするアニメーションを作ります
+- ユーザーの同意を得るに限り、モーションでアニメートします
+- キーボードのフォーカスが画面外の要素に入らないように`visibility`アニメートします
+
+モーションアニメーションの実装を開始する頃には、アクセシビリティを念頭に置いて始めたいと思います。
+
+#### アクセス可能なモーション
+
+誰もスライドアウトモーションを体験したいわけではありません。私たちのソリューションでは、この設定がメディアクエリ内の`--duration`CSS変数を調整することにより適用されています。このメディアクエリ値は、（使用可能な場合）モーションに対するユーザーのオペレーティングシステムの設定を表します。
+
+```css
+#sidenav-open {
+  --duration: .6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidenav-open {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </source></video>
+  <figcaption>durationが適用されている場合と適用されていない場合のインタラクションのデモ。</figcaption></figure>
+
+これで、サイドナビゲーションがスライドして開閉している間に、ユーザーが動きを抑えたい場合は、要素を即座にビューに移動して、動きのない状態を維持します。
+
+#### 移行、変換、翻訳
+
+##### Sidenav out（デフォルト）
+
+モバイルでのサイドナビゲーションのデフォルト状態をオフスクリーン状態に設定するには、変換を使用して要素`transform: translateX(-110vw)`を配置します。
+
+`box-shadow`は非表示するときにメインビューポートを覗き込まないように確保するために、通常のオフスクリーンコードの`-100vw` に`10vw`を追加したことにご注意ください。
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+  }
+}
+```
+
+##### Sidenav in
+
+`#sidenav`要素が`:target`と一致したら、 `translateX()`の位置をhomebase `0`に設定し、URLハッシュが変更されたときにCSSが要素を`-110vw` の「out」位置から`var(--duration)`上`0` の「in」位置にスライドするのを確認します。
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open:target {
+    visibility: visible;
+    transform: translateX(0);
+    transition:
+      transform var(--duration) var(--easeOutExpo);
+  }
+}
+```
+
+#### 可視性の移行
+
+現在の目標は、メニューが表示されていない時にスクリーンリーダーからメニューを非表示にすることため、システムはオフスクリーンのメニューに注目していません。 `:target`が変わる時に可視性の移行を設定することで実現します。
+
+- 入ったら、可視性を移行しないでください。すぐに表示するので、要素がスライドインしてフォーカスを受け入れるのを確認できます。
+- 出る際に、可視性を移行するが、遅延させるため、移行の終了時`hidden`に反転します。
+
+### アクセシビリティUXの機能強化{: #ux-enhancements }
+
+#### Links
+
+このソリューションは、状態を管理することを目的とするURLの変更に依存しています。もちろん、`<a>`要素がここで利用される必要があり、いくつかの優れたアクセシビリティ機能を無料で取得します。インタラクティブな要素を、意図を明確に表現するラベルで飾りましょう。
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+  <svg>...</svg>
+</a>
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/keyboard-voiceover.mp4">
+  </source></video>
+  <figcaption>ナレーションとキーボードインタラクションUXのデモ。</figcaption></figure>
+
+これで、主要なインタラクションボタンは、マウスとキーボードの両方に対する意図を明確に示しています。
+
+#### `:is(:hover, :focus)`
+
+この便利なCSS機能疑似セレクターを使用すると、ホバースタイルをフォーカスと共に共有することで、ホバースタイルをすばやくこなせます。
+
+```css
+.hamburger:is(:hover, :focus) svg > line {
+  stroke: hsl(var(--brandHSL));
+}
+```
+
+#### JavaScriptを振りかける
+
+##### 閉じるには`escape`を押してください
+
+キーボードの`Escape`キーでメニューを閉じる必要がありますか？それを配線しましょう。
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', event => {
+  if (event.code === 'Escape') document.location.hash = '';
+});
+```
+
+##### ブラウザの履歴
+
+開閉する操作によって複数のエントリがブラウザの履歴にスタックされないようにするには、閉じるボタンに次のインラインにあるJavaScriptを追加します。
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+```
+
+これにより、閉じるときにURL履歴エントリが削除され、メニューが開かれなかったかのようになります。
+
+##### フォーカスUX
+
+次のスニペットは、開いた後または閉じた後の開くボタンと閉じるボタンにfocusするのに役立ちます。切り替えを簡単にしたい。
+
+```js
+sidenav.addEventListener('transitionend', e => {
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+      ? document.querySelector('#sidenav-close').focus()
+      : document.querySelector('#sidenav-button').focus();
+})
+```
+
+サイドナビが開いたら、閉じるボタンにfocusします。サイドナビが閉じたら、開くボタンにfocusします。JavaScriptの要素で`focus()`を呼び出すことにより、それをできます。
+
+### 結論
+
+以上で私のやり方を理解したと思うが、あなたはどうしますか？これにより、面白いコンポーネントアーキテクチャが実現します。最初のバージョンを作る方は何方ですか？ 🙂
+
+私たちのやり方を多様化し、ウェブ上でビルドするためのすべての方法を調べましょう。[Glitch](https://glitch.com)を作成し、バージョンを私へ[ツイート](https://twitter.com/argyleink)してください。下の[コミュニティリミックス](#community-remixes) セクションに追加します。
+
+## コミュニティリミックス
+
+- [@_developit](https://twitter.com/_developit) with カスタム要素：[デモとコード](https://glitch.com/edit/#!/app-drawer)
+- [@mayeedwin1](https://twitter.com/mayeedwin1) with HTML/CSS/JS：[デモとコード](https://glitch.com/edit/#!/maye-gui-challenge)
+- [@a_nurella](https://twitter.com/a_nurella) with a Glitch Remix：[デモとコード](https://glitch.com/edit/#!/sidenav-with-adam)
+- [@EvroMalarkey](https://twitter.com/EvroMalarkey) with HTML / CSS / JS：[デモとコード](https://evromalarkey.github.io/scrollsnap-drawer/index.html)
diff --git a/src/site/content/ja/blog/building-a-tabs-component/index.md b/src/site/content/ja/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..d5f34178ed2
--- /dev/null
+++ b/src/site/content/ja/blog/building-a-tabs-component/index.md
@@ -0,0 +1,633 @@
+---
+layout: post
+title: Tabコンポーネントの構築
+subhead: iOSおよびAndroidアプリに付いているものと同様のTabコンポーネントを構築する方法の基本的な概要。
+authors:
+  - adamargyle
+description: iOSおよびAndroidアプリに付いているものと同様のTabコンポーネントを構築する方法の基本的な概要。
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+この投稿では、レスポンシブで、複数のデバイスからの入力をサポートし、ブラウザー間で機能するWeb用のTabsコンポーネントを構築することについての考えを共有したいと思います。[デモを](https://gui-challenges.web.app/tabs/dist/)お試しください。
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> <a href="https://gui-challenges.web.app/tabs/dist/">Demo</a> </figcaption></figure>
+
+ビデオにより興味があれば、この投稿のYouTubeバージョンをご覧ください。
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## 概要
+
+Tabは設計システムの一般的なコンポーネントですが、種々な形状やフォームで使用されます。 以前`<frame>`要素を基に構築されたデスクトップtabがあったが、現在には物理プロパティを基にコンテンツをアニメ化するバターモバイルのコンポーネントがあります。こういったものはどちらでもスペース節約という目的に狙っています。
+
+本日、tabユーザー体験の基本は、表示フレーム内のコンテンツの可視性を切り替えるボタンナビゲーション範囲です。多くの異なるコンテンツ範囲は同じスペースを共有しますが、ナビゲーション内で選択されたボタンによって条件付きで表示されます。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png", alt="Webがコンポーネントのコンセプトに適用したスタイルの多様性のため、コラージュはかなり混沌になっています", width="800", height="500" %} <figcaption> 過去10年間のtabコンポーネントWebデザインスタイルのコラージュ </figcaption></figure>
+
+## Web戦術
+
+全体として見れば、いくつかの重要なWebプラットフォーム機能のおかげで、このコンポーネントの構築は非常に簡単になることがわかりました。
+
+- `scroll-snap-points`は適切なスクロール停止位置でのエレガントなスワイプとキーボードの相互作用のためです。
+- [Deep links](https://en.wikipedia.org/wiki/Deep_linking)はURLハッシュ経由でブラウザにページ内スクロールのアンカーと共有のサポートを処理されます。
+- `<a>`や`id="#hash"`要素のマークアップによりスクリーンリーダーをサポートします。
+- `prefers-reduced-motion`はクロスフェードトランジションとページ内のインスタントスクロールを有効にします。
+- ドラフトの`@scroll-timeline`web機能は選択されたタブを動的に下線を引いて色を変更します。
+
+### HTML {: #markup }
+
+基本的に、このUXはリンクをクリックし、URLにネストされたページの状態を表し、ブラウザが一致する要素にスクロールするとコンテンツ範囲が更新されるのを確認します。
+
+そこにはlinkと`:target`等の構造的なコンテンツメンバーがあります。`<nav>`が最適なリンクのリストと、 `<section>`が最適な`<article>`要素のリストが必要です。リンクハッシュごとはセクションと一致し、ブラウザにアンカー経由でスクロールさせます。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> Linkボタンをクリックして、フォーカスされたコンテンツ内にスライドさせます</figcaption></figure>
+
+たとえば、linkをクリックすると、Chrome 89にある`:target`記事が自動的にフォーカスさ、JSが必要ありません。そうしたら、ユーザーは通常入力デバイスを使用して記事のコンテンツをスクロールできます。マークアップに示されているように、これは無料で提供されるコンテンツです。
+
+次のマークアップを使用してタブを構成しました。
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+`href`プロパティと`id`プロパティを使用して`<a>`要素と`<article>`要素の間に接続を確立できます。
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+次に、記事に種々のloremを、リンクにさまざまな長さとタイトルの画像セットを入力しました。必要なコンテンツを使用して、レイアウトを開始できます。
+
+### スクロールレイアウト{: #overscroll }
+
+このコンポーネントには、3つの異なるタイプのスクロール範囲があります。
+
+- ナビゲーション<b style="color: #FF00E2;">（ピンク）</b>は水平方向にスクロール可能です
+- コンテンツ範囲<b style="color: #008CFF;">（青）</b>は水平方向にスクロール可能です
+- 各記事項目<b style="color: #2FD800;">（緑）</b>は垂直方向にスクロール可能です。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png", alt="スクロール範囲の輪郭を描き、スクロールする方向を示す矢印の該当色が付いた3つのカラフルなボックス。", width="800", height="450" %}</figure>
+
+スクロールに関連する要素には2つの異なるタイプがあります。
+
+1. **ウィンドウ**<br>`overflow`プロパティスタイルを持ち、定義されたディメンションが付いているボックス。
+2. **特大の表面**<br><br>このレイアウトでは、ナビゲーションlink、セクション記事、および記事のコンテンツを含むリストコンテナです。
+
+#### `<snap-tabs>`レイアウト{: #tabs-layout }
+
+私が選択した上位レベルのレイアウトはflex（Flexbox）でした。 `column`に方向を設定したので、headerとセクションは垂直方向に並べられています。これは最初のスクロールウィンドウであり、非表示のオーバーフローをすべて非表示にします。headerとセクションは、個々のゾーンとして、早めにオーバースクロールを採用します。
+
+{% Compare 'better', 'HTML' %}
+
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* establish primary containing box */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* be pushy about consuming all space */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* defend against <section> needing 100% */
+    flex-shrink: 0;
+    /* fixes cross browser quarks */
+    min-block-size: fit-content;
+  }
+}
+```
+
+{% endCompare %}
+
+カラフルな3スクロール図に戻ります。
+
+- `<header>`は、<b style="color: #FF00E2;">（ピンクの）</b>スクロールコンテナになるため準備されています。
+- `<section>`は<b style="color: #008CFF;">（青の）</b>スクロールコンテナになるため準備されています。
+
+以下で[VisBug](https://a.nerdy.dev/gimme-visbug)を使用して強調表示したフレームは、スクロールコンテナが作成した**ウィンドウ**を確認する上で役立ちます。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png", alt="header要素とセクション要素の上にはホットピンクのオーバーレイがあり、コンポーネントで占めるスペースに輪郭を描きます。", width="800", height="620" %}</figure>
+
+#### Tab`<header>`レイアウト{: #tabs-header }
+
+次のレイアウトはほぼ同じです。flexを使用して垂直方向の順序を作成します。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<snap-tabs>
+  <header>
+    <nav></nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css/1-2
+header {
+  display: flex;
+  flex-direction: column;
+}
+```
+{% endCompare %}
+</div>
+
+`.snap-indicator`は、linkのグループとともに水平方向に移動する必要があり、そしてこのheaderレイアウトは、その段階を設定する上で役立ちます。ここには絶対的に配置される要素はありません！
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png", alt="nav要素とspan.indicator要素の上にはホットピンクのオーバーレイがあり、コンポーネントで占めるスペースに輪郭を描きます。", width="800", height="368" %}</figure>
+
+次はスクロールスタイルです。2つの水平スクロール範囲（headerとセクション）間でスクロールスタイルを共有できることがわかったので、ユーティリティクラス`.scroll-snap-x`を作成しました。
+
+```css
+.scroll-snap-x {
+  /* browser decide if x is ok to scroll and show bars on, y hidden */
+  overflow: auto hidden;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  /* scrolling should snap children on x */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+それぞれがｘ軸のオーバーフロー、オーバースクロールをトラップするためのスクロール抑制、タッチデバイス用の非表示のスクロールバー、最後にコンテンツ表示範囲をロックするためのscroll-snapが必要です。キーボードのtab順序がアクセスでき、どちらのインタラクションガイドでも自然に照準を合わせます。Scroll snapコンテナは、キーボードから優れたカルーセルスタイルインタラクションも取得します。
+
+#### Tab header`<nav>`レイアウト{: #tabs-header-nav }
+
+ナビゲーションlinkは、改行なしで垂直方向の中央揃えたラインで配置される必要があり、各linkアイテムはscroll-snapコンテナにスナップする必要があります。 スウィフトは2021 CSSに機能します！
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+nav {
+  display: flex;
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+```
+{% endCompare %}
+</div>
+
+各リンクはそれ自体のスタイルとサイズを設定するため、ナビゲーションレイアウトでは方向とフローを指定するだけで済みます。ナビゲーションアイテムの唯一の幅は、インジケーターが新しいターゲットに合わせて幅を調整するため、タブ間の移行を楽しくします。ここにある要素の数に応じて、ブラウザはスクロールバーをレンダリングするかどうかを決定します。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png", alt="ナビゲーションの要素の上にはホットピンクのオーバーレイがあり、コンポーネント内で占めるスペースとオーバーフローするところのに輪郭を描きます。", width="800", height="327" %}</figure>
+
+#### Tab`<section>`レイアウト{: #tabs-section }
+
+このセクションはflexスアイテムであり、スペースの主要な消費者である必要があります。また、配置される記事の列を作成する必要があります。改めて、スウィフトは2021 CSSに機能します！ `block-size: 100%`はこの要素を引き伸ばして親を可能な限り埋めます。その上で独自のレイアウトのために、親の幅の`100%`である一連の列を作成します。親に強い制約を書き込んだので、パーセンテージはここでうまく機能します。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<section>
+  <article></article>
+  <article></article>
+  <article></article>
+  <article></article>
+</section>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+```
+{% endCompare %}
+</div>
+
+これは、「強引になるべく垂直方向に拡張する」と言っているかのようです（`flex-shrink: 0`設定したheaderがこの拡張プッシュに対する防御だと覚えておきましょう）。これにより、フルハイト例のセットに行の高さが設定されます。`auto-flow`スタイルは、我々の希望の通りに、グリッドに常に子を水平線に配置し、折り返しはなくするように指示します。そして親ウィンドウをオーバーフローさせます。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png", alt="記事の要素の上にはホットピンクのオーバーレイがあり、コンポーネント内で占めるスペースとオーバーフローするところに輪郭を描きます。", width="800", height="512" %}</figure>
+
+たまにこれを理解するのに困ります！このセクション要素はボックスに収まりますが、ボックスのセットも既に作成しました。画像と説明がお役に立てば幸いです。
+
+#### Tab`<article>`レイアウト {: #tabs-article }
+
+ユーザーは記事のコンテンツをスクロールでき、スクロールバーはオーバーフローがある場合にのみ表示される必要です。こういった記事の要素はきちんとした位置にあります。それらは同時にスクロールの親とスクロールの子です。ブラウザは、いくつかのトリッキーなタッチ、マウス、およびキーボードの相互作用を実際に処理してもらいます。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html
+<article>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  ...
+</article>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+```
+{% endCompare %}
+</div>
+
+親スクローラー内で記事をスナップすることを選択しました。ナビゲーションlinkアイテムと記事要素がそれぞれのスクロールコンテナのインラインスタートにスナップする方法が本当に気に入っています。それは調和のとれた関係のように感じます。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png", alt="記事要素とその子要素の上にはホットピンクのオーバーレイがあり、コンポーネントで占めるスペースとオーバーフローする方向に輪郭を描きます。", width="800", height="808" %}</figure>
+
+記事はグリッドの子であり、そのサイズは、スクロールUXを提供するビューポート範囲になるように事前に決めされています。つまり、ここでは高さや幅のスタイルは必要ありません。オーバーフローする方法を定義するだけで十分です。私はoverflow-yをautoに設定し、そして便利なoverscroll-behaviorプロパティを使用してスクロールの相互作用をトラップします。
+
+#### 3つのスクロール範囲の要約{: #scroll-areas-recap }
+
+以下のように、システム設定で「常にスクロールバーを表示する」を選択しました。レイアウトとスクロールオーケストレーションを確認するために、この設定をオンにしてレイアウトを機能させることは極めて重要だと思います。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png", alt="3つのスクロールバーが表示されるように設定されて、今レイアウトスペースが消費されるが、コンポーネントはまだ見栄えがします", width="500", height="607" %}</figure>
+
+このコンポーネント内でスクロールバーのガターがあるので、スクロール範囲がどこにあるか、それらがサポートする方向、およびそれらが互いにどのように相互作用するかを明確に示す上で役立つと思います。こういったスクロールウィンドウフレームがそれぞれどのようにレイアウトのflex またはgrid の親になるを検討しましょう。
+
+DevToolsは、これを可視化する上で役立ちます。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png", alt="スクロール範囲にはgrid とflexboxツールのオーバーレイがあり、コンポーネントで占めるスペースとオーバーフローする方向に輪郭を描きます", width="800", height="455" %} <figcaption> Chromium Devtoolsは、アンカー要素でフレックスボックスナビゲーション要素レイアウト、記事要素でいっぱいのグリッドセクションレイアウト、段落と見出し要素でいっぱいの記事要素を示しています。</figcaption></figure>
+
+スクロールレイアウトは完全です：スナップ、ディープリンク可能、キーボードアクセス可能。 UXの機能強化、スタイル、楽しみの強力な基盤。
+
+#### 機能のハイライト
+
+スクロールスナップされた子は、サイズ変更中にロックされた位置を維持します。これは、JavaScriptがデバイスの回転やブラウザのサイズ変更で何も表示する必要がないことを意味します。**レスポンシブ**以外のモードを選択し、デバイスフレームのサイズを変更することにより、Chromium DevTools[デバイスモード](https://developer.chrome.com/docs/devtools/device-mode/)で試しましょう。要素が表示されたままで、そのコンテンツでロックされていることに注意してください。これは、Chromiumが仕様を一致する目的にし実装を更新してから利用可能になっています。これについての[ブログ投稿](/snap-after-layout/)をご用意しました。
+
+### アニメーション{: #animation }
+
+ここでのアニメーション作業の目標は、インタラクションとUIフィードバックをしっかりに紐付けることです。これは、ユーザーがすべてのコンテンツを（期待の通り）スムーズに確認できるようにガイドまたは支援する上で役立ちます。目的と共に条件付きでモーションを追加します。ユーザーはオペレーティングシステムで[モーション嗜好](/prefers-reduced-motion/)を指定できるようになりました。私は自分のインターフェイスでユーザーの嗜好に応答することを非常に楽しんでいます。
+
+タブの下線を記事のスクロール位置に紐付けるします。スナップは、きれいに配置されるだけでなく、アニメーションの開始と終了を固定する役割も果たします。これにより、[ミニマップの](https://en.wikipedia.org/wiki/Mini-map)ように機能する`<nav>`がコンテンツに接続される状態を維持します。CSSとJSの両方からユーザーのモーション嗜好をチェックします。気配りのある素晴らしい場所がいくつかあります！
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+#### スクロール動作{: #scroll-behavior }
+
+`:target`と`element.scrollIntoView()`両方のモーション動作を強化する機会があります。デフォルトでは、それが瞬時に実行されます。ブラウザはスクロール位置を設定するだけです。さて、そこで点滅するのではなく、そのスクロール位置に移行したい場合はどうなりますか？
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+ここではモーションと、ユーザーが（スクロールなどの）制御しないモーションを紹介しているため、ユーザーがオペレーティングシステムでモーションの削減を優先しない場合のみ、このスタイルを適用します。このように、それで同意する人々のためにスクロールモーションを紹介します。
+
+#### Tabインジケーター{: #tabs-indicator}
+
+このアニメーションの目的は、インジケーターをコンテンツの状態に関連付ける上でサポートすることです。モーションを減らしたいユーザーにはクロスフェードの`border-bottom`スタイルを、そしてモーションを変更する必要のないユーザーにはスライディングに紐付けるスクロール+カラーフェードアニメーションをカラーリングすることにしました。
+
+Chromium Devtoolsでは、設定を切り替えて、2つの異なる遷移スタイルを示すことができます。これを作るのは凄く楽しました。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+ユーザーがモーションの削減を希望する場合は、`.snap-indicator`は不要となるので、非表示にします。その上で、それを`border-block-end`スタイルと`transition`に置き換えます。また、タブの相互作用で、アクティブなナビゲーションアイテムにブランドの下線が強調表示されるだけでなく、テキストの色も暗くなることに注意してください。アクティブな要素は、テキストの色のコントラストが高く、明るいアンダーライトのアクセントがあります。
+
+CSSを数行で追加するだけで、誰かが見られているように感じさせることができます（モーションの嗜好を慎重に尊重しているという意味で）。大好きです。
+
+#### `@scroll-timeline` {: #scroll-timeline}
+
+上記のセクションでは、減らされたモーションのクロスフェードスタイルを処理する方法を示しました。このセクションでは、インジケーターとスクロール範囲を紐付ける方法を説明します。これは次の楽しい実験的なものです。楽しんで頂けばと思います。
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+まず、JavaScriptからユーザーのモーション嗜好を確認します。結果が`false`である場合は、ユーザーがモーションを減らしたがり、そしてモーションエフェクトと紐付けるスクロールを実行しないことを意味します。
+
+```js
+if (motionOK) {
+  // motion based animation code
+}
+```
+
+これを書いている時点では[`@scroll-timeline`をサポートするブラウザ](https://caniuse.com/css-scroll-timeline)がなかったです。これは、ただ実験的な実装を含む[ドラフト仕様](https://drafts.csswg.org/scroll-animations-1/)です。ただし、このデモで使用するポリフィルがあります。
+
+##### ` ScrollTimeline`
+
+CSSとJavaScriptの両方ともスクロールタイムラインを作成できますが、アニメーション内でライブ要素測定を使用できるようにJavaScriptを選択しました。
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // scroll in the direction letters flow
+  fill: 'both',              // bi-directional linking
+});
+```
+
+別のスクロール位置をたどれるものが欲しくて、 そして`ScrollTimeline`を作成することにより、スクロールlinkのドライバーである`scrollSource`を定義します。通常、Web上のアニメーションはグローバルな時間枠のティックに逆行されるが、カスタムの`sectionScrollTimeline`を使用すると、すべてを変更できます。
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+アニメーションのキーフレームに入る前に、スクロールのフォロワーである`tabindicator`はカスタムタイムライン（セクションのスクロール）を基にアニメーション化されることを指摘することが重要だと思います。これで紐付けは完了したが、キーフレームとも呼ばれる、かつアニメーション化するための最終的な要素であるステートフルポイントが欠落しています。
+
+#### 動的キーフレーム
+
+`@scroll-timeline`でアニメーション化するための非常に強力で理論的な宣言型CSSの方法がありますが、私が選択したアニメーションはあまりにも動的でした。`auto`幅を切り替える方法はなく、子の長さに応じてキーフレームを動的に作成する方法もありません。
+
+JavaScriptはそういった情報を取得する方法を知っているので、子を自分で繰り返し処理させ、実行時に計算された値を取得します。
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+`tabnavitem`ごとに、 `offsetLeft`の位置を分解し、`translateX`値として使用する文字列を返します。これにより、アニメーション用に4つの変換キーフレームが作成されます。幅についても同じことが行われ、それぞれに動的幅が何だかが尋ねられて、キーフレーム値として使用されます。
+
+フォントとブラウザの設定を基した出力の例を次に示します。
+
+TranslateXキーフレーム：
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+幅のキーフレーム：
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["121px", "117px", "226px", "67px"]
+```
+
+戦略のまとめるとしては、タブインジケーターは、セクションスクローラーのスクロールスナップ位置に応じて、4つのキーフレームにわたってアニメーション化されます。スナップポイントは、キーフレーム間の明確な描写を作成し、アニメーションの同期された感触を実際に追加します。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png", alt="アクティブタブと非アクティブタブは、両方のコントラストの合格点数を示すVisBugオーバーレイで表示されます", width="540", height="400" %}</figure>
+
+ユーザーは、インタラクションを使用してアニメーションを操作しながら、インジケーターの幅と位置がセクションごとに変化するのを確認し、スクロールで完全に追跡します。
+
+お気づきではないかもしれませんが、強調表示されたナビゲーションアイテムが選択されると、色が変化することを非常に誇りに思っています。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+選択されていない明るい灰色は、強調表示されたアイテムのコントラストが高くなると、さらに押し戻されて表示されます。ホバーや選択の時など、テキストの色を変更させるのが一般的ですが、下線のインジケーターと同期して、スクロールに応じてその色を変更させるのは一段上のレベルです。
+
+これは実施した方法です：
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+各タブナビゲーションリンクには、この新しいカラーアニメーションが必要であり、下線インジケーターと同じスクロールタイムラインを追跡します。以前と同じタイムラインを使用します。スクロール時にティックを出すことが役割なので、そのティックを任意で種類のアニメーションで使用できます。以前のやり方と同じように、ループ内に4つのキーフレームを作成し、色を返します。
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+`var(--text-active-color)`が付いているキーフレームはlinkを強調表示しますが、それ以外は標準のテキスト色です。外側ループは各ナビゲーションアイテムであり、内側ループは各navアイテムの個人用キーフレームであるため、ネストされたループは比較的簡単になります。外側ループ要素が内側ループ要素と同じであるかどうかを確認し、それを使用して、いつ選択されたかを確認します。
+
+これについて書いたとき、とても楽しかったです。非常に楽しかったです。
+
+### さらに多くのJavaScriptの機能強化{: #js }
+
+ここで紹介している内容の主要はJavaScriptなしで機能することを覚えておく必要です。そうは言っても、JSが利用可能になると、どのように強化できるか確認しましょう。
+
+#### ディープリンク
+
+ディープリンクはモバイル用語ですが、ここでは、タブのコンテンツへURLを直接に共有できるという点でディープリンクの目的がタブに合うと思います。ブラウザは、URLハッシュで一致するIDにページ内で移動します。この`onload`ハンドラーがプラットフォーム間で効果を発揮するとわかりました。
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### スクロール終了の同期
+
+ユーザーは常にキーボードをクリックしたり使用したりせずに必要に応じて、自由にスクロールする場合もあります。セクションスクローラーがスクロールを停止すると、それがどこで止めても、上部のナビゲーションバーに合わせ必要があります。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+次はスクロールが終了するのをどうやって待つのです。
+
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+セクションがスクロールされているのはいつでも、セクションタイムアウトがある場合はそれをクリアし、新しいセクションを開始しましょう。セクションのスクロールが停止した場合は、タイムアウトをクリアせず、休止してから100ミリ秒後に起動しましょう。起動したら、ユーザーが停止した場所を特定できる関数を呼び出します。
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+スクロールがスナップされたと仮定すると、現在のスクロール位置をスクロール範囲の幅で割る結果は小数ではなく整数になります。次に、この計算されたインデックスを介してキャッシュからナビゲーションアイテムを取得しようとします。何かが見つかった場合は、アクティブに設定するための一致するのを送信します。
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+アクティブなタブの設定は、現在アクティブなタブをクリアしてから、着信ナビゲーションアイテムにアクティブな状態属性を与えることから始まります。 `scrollIntoView()`の呼び出しには、CSSとの楽しい相互作用があると覚えておきましょう。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+水平スクロールスナップユーティリティCSSでは、ユーザーがモーショントレラントである場合は、`smooth`スクロールを適用するメディアクエリを[ネスト](https://drafts.csswg.org/css-nesting-1/) しました。JavaScriptでは要素をスクロールして表示するための呼び出しを自由に行うことができ、CSSではUXを宣言的に管理できます。両方がたまに楽しい小さな試合を作ってもらいます。
+
+### 結論
+
+以上は私のやり方ですが貴方はどうしますか？これにより、楽しいコンポーネントアーキテクチャが実現できます。お気に入りのフレームワークで最初のバージョンを作成するのはどなたですか？ 🙂
+
+アプローチを多様化し、Web上で構築するためのすべての方法を学びましょう。[Glitch](https://glitch.com)を作成し、自分のバージョンを私に[ツイート](https://twitter.com/argyleink)してください。下の[Community remixes](#community-remixes)に追加します。
+
+## Community remixes
+
+- [@ devnook](https://twitter.com/devnook) 、 [@ rob_dodson](https://twitter.com/rob_dodson) 、および[@DasSurma](https://twitter.com/DasSurma)とWebコンポーネント： [記事](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs)。
+- [@jhvanderschee](https://twitter.com/jhvanderschee)ボタン付き： [Codepen](https://codepen.io/joosts/pen/PoKdZYP) 。
diff --git a/src/site/content/ja/blog/cache-api-quick-guide/index.md b/src/site/content/ja/blog/cache-api-quick-guide/index.md
new file mode 100644
index 00000000000..3a81abbb802
--- /dev/null
+++ b/src/site/content/ja/blog/cache-api-quick-guide/index.md
@@ -0,0 +1,266 @@
+---
+layou: post
+title: 'Cache API: クイックガイド'
+subhead: Cache APIを使用してアプリケーションデータをオフラインで利用できるようにする方法を学びます。
+authors:
+  - petelepage
+description: Cache API を使用してアプリケーションデータをオフラインで利用できるようにする方法を学びます。
+date: 2017-10-03
+updated: 2020-04-27
+tags:
+  - blog
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+[Cache API](https://developer.mozilla.org/docs/Web/API/Cache) は、ネットワークリクエストとそれに対応するレスポンスを保存、取得するためのシステムです。これらは、アプリケーションの実行中に作成される普通のリクエストとレスポンスである場合があれば、後で使用できるようにデータを保存しておくというだけの目的で作成される場合もあります。
+
+Cache API は、サービスワーカーがネットワークリクエストをキャッシュすることにより、ネットワークの速度や可用性を問わず、スピーディなレスポンスを提供できるようにする目的で作成されました。ただし、この API は一般的なストレージメカニズムとしても使用できます。
+
+## どこで利用できますか？
+
+Cache API は、[最新のすべてのブラウザ](https://caniuse.com/#feat=mdn-api_cache)で利用できます。 グローバル `caches` プロパティを通じて公開されるため、簡単な機能検出を使えば API の存在を調べられます。
+
+```js
+const cacheAvailable = 'caches' in self;
+```
+
+キャッシュ API には、ウィンドウ、iframe、ワーカー、またはサービスワーカーからアクセスできます。
+
+## 何を保存できるか
+
+キャッシュには、それぞれ HTTP のリクエストとレスポンスを意味する [`Request`](https://developer.mozilla.org/docs/Web/API/Request) オブジェクトと [`Response`](https://developer.mozilla.org/docs/Web/API/Response) オブジェクトのペアだけが格納されます。ただし、リクエストとレスポンスには、HTTP 経由で転送できるデータなら種類を問わず何でも含められます。
+
+### どれくらいの量を保管できるか？
+
+一言で言うと、**膨大な量**です。少なくとも数百メガバイト、場合によっては数百ギガバイト以上を保管できます。ブラウザの実装はさまざまですが、一般的に、使用可能なストレージの量は、デバイスの使用可能なストレージの量によります。
+
+## キャッシュの作成とオープン
+
+キャッシュを開くには、 `caches.open(name)`メソッドを使用して、キャッシュの名前を単一のパラメーターとして渡します。名前付きキャッシュが存在しない場合は、作成されます。このメソッドは`Cache`オブジェクトで解決さ`Promise`を返します。
+
+```js
+const cache = await caches.open('my-cache');
+// do something with cache...
+```
+
+## キャッシュに追加する
+
+キャッシュにアイテムを追加する方法は、`add` 、 `addAll` 、`put` という 3 種類があります。 3 つのメソッドはすべて `Promise` を返します。
+
+### `cache.add`
+
+まずは、`cache.add()` について説明します。受け取るパラメーターは、`Request` か URL (`string` ) のいずれかです。ネットワークにリクエストを送信し、レスポンスをキャッシュに保存します。フェッチが失敗した場合、またはレスポンスのステータスコードが 200 の範囲外である場合は、何も保存されず、`Promise` は拒否されます。CORS モードになっていないクロスオリジンリクエストは、`status` `0` を返すため、保管できません。このようなリクエストは、`put` を使用してのみ保存できます。
+
+```js
+// Retreive data.json from the server and store the response.
+cache.add(new Request('/data.json'));
+
+// Retreive data.json from the server and store the response.
+cache.add('/data.json');
+```
+
+### `cache.addAll`
+
+次は、`cache.addAll()` です。昨日は `add()` と似ていますが、`Request` オブジェクトまたは URL の (`string`) の配列を受け取ります。これは、個々のリクエストごとに `cache.add` を呼び出す場合と同じように機能しますが、キャッシュされないリクエストが 1 つでもあれば、`Promise` は拒否されます。
+
+```js
+const urls = ['/weather/today.json', '/weather/tomorrow.json'];
+cache.addAll(urls);
+```
+
+これらのいずれの場合も、既存の一致するエントリがあれば、新しいエントリによって上書きされます。これは、[キャッシュからの取得](#retrieving)に関するセクションで説明するのと同じ一致ルールを使用します。
+
+### `cache.put`
+
+最後は、`cache.put()` です。これを使用すると、ネットワークからのレスポンスを保存するか、独自の `Response` を作成して保存できます。受け取りパラメーターは 2 つです。1 つ目は、`Request` オブジェクトでも、URL の (`string`) でも構いませんが、2 つ目はネットワークからの `Response` か、コードによって生成されたレスポンスでなければいけません。
+
+```js
+// Retrieve data.json from the server and store the response.
+cache.put('/data.json');
+
+// Create a new entry for test.json and store the newly created response.
+cache.put('/test.json', new Response('{"foo": "bar"}'));
+
+// Retrieve data.json from the 3rd party site and store the response.
+cache.put('https://example.com/data.json');
+```
+
+`put()` は `add()` と `addAll()` よりも許容度が高く、CORS 以外のレスポンス、またはレスポンスのステータスコードが 200 の範囲外にあるその他のレスポンスを保存できます。また、同じリクエストに対する以前のレスポンスを上書きします。
+
+#### リクエストオブジェクトの作成
+
+保存されているものの URL を使用して、`Request` オブジェクトを作成します。
+
+```js
+const request = new Request('/my-data-store/item-id');
+```
+
+#### レスポンスオブジェクトの操作
+
+`Response` オブジェクトのコンストラクターは、 `Blob` や `ArrayBuffer`、`FormData` オブジェクト、文字列など、さまざまな種類のデータを受け入れます。
+
+```js
+const imageBlob = new Blob([data], {type: 'image/jpeg'});
+const imageResponse = new Response(imageBlob);
+const stringResponse = new Response('Hello world');
+```
+
+`Response` の MIMEタイプは、適切なヘッダーを設定することにより設定できます。
+
+```js
+  const options = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+  const jsonResponse = new Response('{}', options);
+```
+
+`Response` を取得して、その本文にアクセスしたいという場合に使用できるヘルパーメソッドはいくつかあります。それぞれが、異なる種類の値で解決する `Promise` を返します。
+
+<table>
+  <thead>
+    <th>方法</th>
+    <th>説明</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>arrayBuffer</code></td>
+      <td>バイトにシリアル化された本体を含む <code>ArrayBuffer</code> を返します。</td>
+    </tr>
+    <tr>
+      <td><code>blob</code></td>
+      <td>
+<code>Blob</code> を返します。<code>Response</code> が <code>Blob</code> を使って作成された場合、この新しい <code>Blob</code> は同じタイプになります。それ以外の場合は、<code>Response</code> <br> の <code>Content-Type</code> が使用されます。</td>
+    </tr>
+    <tr>
+      <td><code>text</code></td>
+      <td>本文のバイトを UTF-8 でエンコードされた文字列として解釈します。</td>
+    </tr>
+    <tr>
+      <td><code>json</code></td>
+      <td>本文のバイトを UTF-8 でエンコードされた文字列として解釈し、JSON として解析しようとします。結果のオブジェクトを返します。もしくは、文字列を JSON として解析できない場合は <code>TypeError</code> を投げます。</td>
+    </tr>
+    <tr>
+      <td><code>formData</code></td>
+      <td>本文のバイトを HTML フォームとして解釈し、 <code>multipart/form-data</code> または <code>application/x-www-form-urlencoded</code> としてエンコードします。 <a href="https://developer.mozilla.org/docs/Web/API/FormData">FormData</a> オブジェクトを返す、もしくはデータを解析できない場合は <code>TypeError</code> を投げます。</td>
+    </tr>
+    <tr>
+      <td><code>body</code></td>
+      <td>本文データの <a href="https://developer.mozilla.org/docs/Web/API/ReadableStream">ReadableStream</a> を返します。</td>
+    </tr>
+  </tbody>
+</table>
+
+例えば
+
+```js
+const response = new Response('Hello world');
+const buffer = await response.arrayBuffer();
+console.log(new Uint8Array(buffer));
+// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
+```
+
+## キャッシュからの取得 {: #retrieveing}
+
+キャッシュ内のアイテムを見つける場合は、`match` メソッドを使用できます。
+
+```js
+const response = await cache.match(request);
+console.log(request, response);
+```
+
+`request` が文字列の場合、ブラウザは `new Request(request)` を呼び出して `Request` に変換します。一致するエントリが見つかれば、この関数は `Response` に解決する `Promise` を返し、それ以外の場合は、`undefined` を返します。
+
+2 つの `Requests` が一致するかどうかを判断するために、ブラウザは URL 以外のものも使用します。クエリ文字列、`Vary` ヘッダー、または HTTP メソッド (`GET`、`POST`、`PUT` など) が異なる場合、2 つのリクエストは別のものとみなされます。
+
+options オブジェクトを 2 番目のパラメータとして渡せば、これらを部分的に、もしくは全て無視できます。
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const response = await cache.match(request, options);
+// do something with the response
+```
+
+キャッシュされたリクエストのうち、一致するものが複数ある場合は、最初に作成されたリクエストが返されます。一致する*すべて*のレスポンスを取得する場合は、`cache.matchAll()` を使用できます。
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const responses = await cache.matchAll(request, options);
+console.log(`There are ${responses.length} matching responses.`);
+```
+
+各キャッシュに `cache.match()` を呼び出す代わりに、ショートカットとして、`caches.match()` を使用すれば、すべてのキャッシュを一度に検索できます。
+
+## 検索
+
+Cache API は、`Response` オブジェクトに対してエントリを一致させる場合を除き、リクエストまたはレスポンスを検索する手段を提供しません。ただし、フィルタリングを使用するか、インデックスを作成すれば、独自の検索を実装できます。
+
+### フィルタリング
+
+独自の検索を実装する方法として、すべてのエントリをイテレートし、必要なエントリに絞り込むということができます。たとえば、`.png` で終わる URL を持つすべてのアイテムを検索するとします。
+
+```js
+async function findImages() {
+  // Get a list of all of the caches for this origin
+  const cacheNames = await caches.keys();
+  const result = [];
+
+  for (const name of cacheNames) {
+    // Open the cache
+    const cache = await caches.open(name);
+
+    // Get a list of entries. Each item is a Request object
+    for (const request of await cache.keys()) {
+      // If the request URL matches, add the response to the result
+      if (request.url.endsWith('.png')) {
+        result.push(await cache.match(request));
+      }
+    }
+  }
+
+  return result;
+}
+```
+
+このようにすれば、`Request` オブジェクトと `Response` オブジェクトの任意のプロパティを使用してエントリをフィルタリングできます。大量のデータセットを検索する場合は、処理速度が遅くなるので注意してください。
+
+### インデックスの作成
+
+独自の検索を実装するもう 1 つの方法に、検索可能なエントリのインデックスを個別に管理し、そのインデックスを IndexedDB に格納するという手があります。IndexedDB は、そもそも、こうしたオペレーションを意識してデザインされたものであるため、エントリの数が多いほど、優れたパフォーマンスを見せます。
+
+`Request` の URL を検索可能なプロパティと一緒に保存すると、検索後に正しいキャッシュエントリを簡単に取得できます。
+
+## アイテムの削除
+
+キャッシュからアイテムを削除するには、こちらのコードを使います。
+
+```js
+cache.delete(request);
+```
+
+リクエストを `Request` または URL の文字列にできる場合に使用します。また、このメソッドは、`cache.match` と同じ options オブジェクトも受け取ります。これにより、同じ URL に対して複数の `Request` / `Response` ペアを削除できます。
+
+```js
+cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});
+```
+
+## キャッシュの削除
+
+キャッシュを削除するには、 `caches.delete(name)`呼び出します。この関数は、キャッシュが存在して削除された場合は`true`解決され、それ以外の場合は`false`解決さ`Promise`
+
+## 感謝の言葉
+
+WebFundamentals に最初に登場したこの記事のオリジナルバージョンを執筆した Mat Scales に感謝いたします。
diff --git a/src/site/content/ja/blog/centering-in-css/index.md b/src/site/content/ja/blog/centering-in-css/index.md
new file mode 100644
index 00000000000..b757690bea3
--- /dev/null
+++ b/src/site/content/ja/blog/centering-in-css/index.md
@@ -0,0 +1,265 @@
+---
+layout: post
+title: CSSでのセンタリング
+subhead: 一連のテストを実行する際に、5つのセンタリング手法に従って、変更に対して最も回復力のある手法を確認します。
+authors:
+  - adamargyle
+description: 一連のテストを実行する際に、5つのセンタリング手法に従って、変更に対して最も回復力のある手法を確認します。
+date: 2020-12-16
+hero: image/admin/uz0bDoJvK4kbtjozekGA.png
+thumbnail: image/admin/4NFENgpVrXHi2O42mv0K.png
+codelabs: codelab-centering-in-css
+tags:
+  - blog
+  - css
+  - layout
+  - intl
+---
+
+CSSでのセンタリングは、ジョークや嘲笑に満ちた悪名高い課題です。2020年のCSSはすべて大人に成長し、今では強がらずにこれらのジョークを素直に笑えるようになっています。
+
+動画を好む方は、この記事のYouTubeバージョンをご覧ください。
+
+{% YouTube 'ncYzTvEMCyE' %}
+
+## チャレンジ
+
+**センタリングにはさまざまなタイプがあります**。さまざまなユースケースがあり、センタリングするものの数などもさまざまです。「勝利を手にできる」センタリング手法の背後にある理論的根拠を示すために、私はResilience Ringer（レジリエンスリンガー）なるものを作成しました。ここれは、各センタリング戦略のバランスを取り、ユーザーがパフォーマンスを観察するための一連のストレステストです。最後に、最高得点の獲得テクニックと「最も価値のある」テクニックを明らかにします。うまくいけば、あなたは新しいセンタリングテクニックと解決策を持ち帰ることができます。
+
+### Resilience Ringer
+
+Resilience Ringerは、センタリング戦略は多言語レイアウト、可変サイズのビューポート、テキスト編集、および動的コンテンツに対して高い回復力を持つ必要があるという私の信念を具現化したものです。これらの信条は、センタリングテクニックが次の項目に耐えられるようにするレジリエンステストを形作る上で支えとなりました。
+
+1. **Squished（左右の押しつぶし）:** センタリングは幅の変更に対応できる必要があります。
+2. **Squashed（上下の押しつぶし）:** センタリングは高さの変更に対応できる必要があります。
+3. **Duplicate（複製）:** センタリングはアイテムの数に対して動的である必要があります。
+4. **Edit（編集）:** センタリングはコンテンツの長さと言語に合わせて動的に行われる必要があります。
+5. **Flow（フロー）:** センタリングはドキュメントの方向と書き込みモードに依存しない必要があります。
+
+勝利のソリューションは、左右の押しつぶし、上下の押しつぶし、複製、編集、さまざまな言語モードと方向の入れ替えが起きても、コンテンツを中央に保持することによって、その回復力を実証する必要があります。信頼できるレジリエントなセンタリングが安全なセンタリングと言えます。
+
+#### 伝説
+
+コンテキストにそってメタ情報を示せるよう、色による視覚的なヒントをいくつか用意しました。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4K35cL1tVpEsGqb4FgKp.png", alt="", width="800", height="438" %} <figcaption></figcaption></figure>
+
+- ピンクの境界線は、センタリングスタイルのオーナーシップを示します。
+- 灰色のボックスは、アイテムを中央に配置しようとするコンテナの背景です。
+- 各子の背景色は白なので、センタリングテクニックが子ボックスのサイズに与える影響を確認できます（存在する場合）。
+
+## 5つのテクニック
+
+5つのセンタリングテクニックがResilience Ringerで競い、1つだけがレジリエンスの王冠を勝ち取ります👸。
+
+### 1. コンテンツセンター
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/content-center-ringer-cycle.mp4">
+  </source></video>
+  <figcaption><a href="https://github.com/GoogleChromeLabs/ProjectVisBug#visbug">VisBug</a>を使用してコンテンツの編集と複製を行う</figcaption></figure>
+
+1. **Squish**：素晴らしい！
+2. **Squash**：素晴らしい！
+3. **Duplicate**：素晴らしい！
+4. **Edit**：素晴らしい！
+5. **Flow**：素晴らしい！
+
+`display: grid`の簡潔さと`place-content`のショートハンドに勝るのは厳しくなるようです。これは子を集合的に中央揃えと両端揃えにするため、読まれることを意図した要素グループ向けの堅実なセンタリングテクニックです。
+
+```css
+.content-center {
+  display: grid;
+  place-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %}-コンテンツは制約されたスペースとオーバーフローでも中央に配置されます- 中央揃えの編集とメンテナンスはすべて1つの場所で行われます - ギャップによって_n_個の子の間で等間隔が保証されます - グリッドはデフォルトで行を作成します</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">最も幅の広い子（<code data-md-type="codespan">max-content</code>）が、残りすべての幅を設定します。これについては、 <a href="#gentle-flex" data-md-type="link">ジェントルフレックス</a>で詳しく説明します。</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+段落や見出し、プロトタイプ、または一般的に読みやすいセンタリングを必要とするものを含むマクロのレイアウトに**最適です**。
+
+{% Aside %} `place-content`は`display: grid`専用ではありません。`display: flex`にも`place-content`と`place-item`の[ショートハンド](https://codepen.io/argyleink/pen/PoqWOPZ)のメリットがあります。 {% endAside %}
+
+### 2. ジェントルフレックス
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gentle-flex-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish**：素晴らしい！
+2. **Squash**：素晴らしい！
+3. **Duplicate**：素晴らしい！
+4. **Edit**：素晴らしい！
+5. **Flow**：素晴らしい！
+
+ジェントルフレックスは、より真のセンタリング*限定*戦略です。`place-content: center`とは異なり、センタリング中に子のボックスのサイズが変更されないため、緩やかで柔軟性があります。可能な限り緩やかに、すべてのアイテムはスタックされ、中央に配置され、間隔が空けられます。
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 整列、方向、および均等割り付けのみを処理します - 編集とメンテナンスはすべて1つの場所で行われます - ギャップによって_n_個の子の間で等間隔が保証されます</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">コード行数が最も多い</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+マクロとミクロのレイアウトの両方に**最適です**。
+
+{% Aside "key-term" %}**マクロレイアウト**は、国の州や準州のようなもので、非常に高レベルで広いカバレッジゾーンです。マクロレイアウトによって作成されたゾーンには、より多くのレイアウトが含まれる傾向があります。レイアウトがカバーする面が少ないほど、マクロレイアウトは小さくなります。レイアウトがカバーする面積が小さいか、含まれるレイアウトが少なければ、マイクロレイアウトは大きくなります。 {% endAside %}
+
+### 3. オートボット
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/autobot-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish**：素晴らしい！
+2. **Squash**：素晴らしい！
+3. **Duplicate**：まぁまぁ
+4. **Edit**：素晴らしい！
+5. **Flow**：素晴らしい！
+
+コンテナは整列スタイルなしでフレックスするように設定されていますが、直接の子は自動マージンでスタイル設定されています。`margin: auto`には、要素のすべてのサイドに適用される何となく懐かしく素晴らしいものがあります。
+
+```css
+.autobot {
+  display: flex;
+}
+.autobot > * {
+  margin: auto;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 楽しいトリック - 急場しのぎ</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">オーバーフローすると厄介な結果</li>
+<li data-md-type="list_item" data-md-list-type="unordered">ギャップではなく均等割り付けに依存するということは、子がサイドに触れたレイアウトが発生する可能性があります。</li>
+<li data-md-type="list_item" data-md-list-type="unordered">位置に「押し込む」ことは最適ではないようであり、子のボックスのサイズが変わる可能性があります。</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+アイコンや擬似要素の中央揃えに**最適です**。
+
+### 4. ふわふわセンター
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/fluffy-center-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish**：悪い
+2. **Squash**：悪い
+3. **Duplicate**：悪い
+4. **Edit**：素晴らしい！
+5. **Flow:** 素晴らしい！（論理プロパティを使用する限り）
+
+「ふわふわセンター」は、最もおいしい響きの候補であり、完全に要素/子が制御する唯一のセンタリングテクニックです。私たちのソロの内側のピンクのボーダーを見てください！？
+
+```css
+.fluffy-center {
+  padding: 10ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} -コンテンツを保護します - アトミック - すべてのテストにはこのセンタリング戦略が密かに含まれています - 単語スペースはギャップです</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">役に立たないという錯覚</li>
+<li data-md-type="list_item" data-md-list-type="unordered">コンテナとアイテムの間に衝突があります。当然、それぞれのサイズが固定しているためです。</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+単語やフレーズを中心とセンタリング、タグ、ピル、ボタン、チップなどに**最適です**。
+
+### 5. ポップ＆プロップ
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/popnplop-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish**：OK
+2. **Squash**：OK
+3. **Duplicate**：悪い
+4. **Edit:** まぁまぁ
+5. **Flow:** まぁまぁ
+
+これは、絶対位置によって要素が通常のフローからはじき出されるため、「ポップ」します。名前の「プロップ」の部分は、私が他のものの上にそれをポチャンと落とす（プロップする）ことが最も役立つと思ったことに由来しています。これは、コンテンツサイズに柔軟かつ動的な、古典的で便利なオーバーレイセンタリングテクニックです。UIを他のUIの上に配置する必要がある場合もあります。
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 便利 - 信頼できる - 必要なときに非常に貴重</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">負のパーセンテージ値のコード</li>
+<li data-md-type="list_item" data-md-list-type="unordered">内包するブロックを強制する <code data-md-type="codespan">position: relative</code> が必要</li>
+<li data-md-type="list_item" data-md-list-type="unordered">早くて厄介な改行</li>
+<li data-md-type="list_item" data-md-list-type="unordered">ほかの作業を行わなければ、内包するブロック当たり1つしか存在できません</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+モーダル、トーストとメッセージ、スタックと深さ効果、ポップオーバーに**最適です**。
+
+## 勝者
+
+孤島でセンタリングテクニックを1つしか持てなかったとしたら、それは…
+
+[ダラララララララ…（ドラムロール）]
+
+**ジェントルフレックス**🎉
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+マクロレイアウトとマイクロレイアウトの両方に役立つので、私のスタイルシートではいつも使用しています。これは、私の期待にマッチする結果を出してくれる、万能で信頼性の高いソリューションです。また、私は本質的にサイジングオタクなので、このソリューションに向かう傾向があります。確かに、入力する量は多いですが、それから得るメリットの方が余分なコードよりも高いのです。
+
+### MVP
+
+**ふわふわセンター**
+
+```css
+.fluffy-center {
+  padding: 2ch;
+}
+```
+
+ふわふわセンターは非常に小さいので、センタリングテクニックとして見落としがちですが、私のセンタリング戦略の定番です。とてもアトミックなので、使っているのを忘れてしまうことがあります。
+
+### まとめ
+
+あなたのセンタリング戦略を破ったのはどのタイプですか？レジリエンスリンガーには他にどのようなチャレンジを追加できるでしょうか？コンテナの変換と自動高の切り替えを検討しましたが、他に何かありますか？
+
+私のやり方がわかったところで、あなたならどのようにしますか？私たちのアプローチを多様化し、Webで構築するためのあらゆる手法を一緒に学んでいきましょう。この記事のcodelabに従って、この記事の例と同じように、独自のセンタリングの例を作ってみてください。あなたのバージョンを[私宛にツイート](https://twitter.com/argyleink)していただけば、下の[コミュニティリミックス](#community-remixes)セクションに追加します。
+
+## コミュニティリミックス
+
+- [ブログ記事](https://css-tricks.com/)付きの[CSSトリック](https://css-tricks.com/centering-in-css/)
diff --git a/src/site/content/ja/blog/conversion-measurement/index.md b/src/site/content/ja/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..943f072418f
--- /dev/null
+++ b/src/site/content/ja/blog/conversion-measurement/index.md
@@ -0,0 +1,515 @@
+---
+layout: post
+title: よりプライベートな広告コンバージョンの測定方法である Event Conversion Measurement API について
+subhead: オリジン トライアルとして利用可能な新しい Web API がクロスサイト ID を使用せずに、広告のクリックがコンバージョンにつながるタイミングを測定します。
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %}Conversion Measurement API は *Attribution Reporting API* に名前が変更され、さらなる機能を提供します。
+
+- [Chrome 91](https://chromestatus.com/features/schedule) [以下で (Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md) ) をお試しの方は、この投稿を読んで、API の詳細、使用例、手順を確認してください。
+- Chrome (オリジン トライアル) での実験に利用できるこの API (Attribution Reporting) の次のイテレーションに興味がある方は、[メーリングリストにご登録の上、利用可能な実験の最新情報をご確認ください。](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev)
+
+{% endAside %}
+
+広告キャンペーンの効果を測定するために、広告主とサイト運営者は、広告のクリックまたは表示が購入や申し込みなどの[コンバージョンにつながる時期を知る必要があります。](/digging-into-the-privacy-sandbox/#conversion)**歴史的に、これはサードパーティの Cookie を使用**して行われてきました。現在、Event Conversion Measurement API を使用すると、サイト間でユーザーを認識するために使用できるメカニズムを使用せずに、サイト運営者の Web サイトでのイベントとその後の広告主サイトでのコンバージョンを関連付けることができます。
+
+{% Aside %}**この提案には、皆さまからのフィードバックが必要です。**コメントをお持ちの方は、API プロポーザルのリポジトリで[課題を作成してください。](https://github.com/WICG/conversion-measurement-api/issues/) {% endAside %}
+
+{% Aside %}この API は、プライバシーサンドボックスの一部であり、サードパーティの Cookie やその他のクロスサイト追跡メカニズムを使用せずにサードパーティのユース ケースを満たす一連の提案です。すべての提案の概要については、「[Digging into the Privacy Sandbox](/digging-into-the-privacy-sandbox)」を参照してください。 {% endAside %}
+
+## 用語集
+
+- **アドテック プラットフォーム**: ブランドや代理店がデジタル広告をターゲティング、配信、分析できるようにするソフトウェアやツールを提供する企業。
+- **広告主**: 広告にお金を払っている会社。
+- **サイト運営者**：ウェブサイトに広告を表示する会社。
+- **クリックスルー コンバージョン**: 広告のクリックに起因するコンバージョン。
+- **ビュースルー コンバージョン**: 広告のインプレッションに起因するコンバージョン (ユーザーが広告を操作しなかった場合は、後でコンバージョンします)。
+
+## この API について知っておく必要があるのは、アドテック プラットフォーム、広告主、パブリッシャーです。
+
+- **[デマンドサイド](https://en.wikipedia.org/wiki/Demand-side_platform)** プラットフォームなどの**アドテック プラットフォーム**は、現在サードパーティの Cookie に依存している機能をサポートするためにこの API を使用することに関心を持つ可能性が高いでしょう。変換測定システムの開発に取り組んでいる方は、[デモを試し](#experiment-with-the-api)、[API を使って実験を行い](#demo)、[フィードバックを共有](#share-your-feedback)していただくようお願いします。
+- **広告やコンバージョンの測定にカスタム コードを使用している広告主やサイト運営者**も、同様にこの API を使用して既存の手法を置き換えることに関心があるかもしれません。
+- **広告またはコンバージョン測定に関してアドテック プラットフォームに依存している広告主およびパブリッシャー**は、API を直接使用する必要はありませんが、API を統合する可能性のあるアドテック プラットフォームを使用している場合には、特に[この API の理論的根拠](#why-is-this-needed)に興味を示されるかもしれません。
+
+## API の概要
+
+### なぜこれが必要なのですか？
+
+今日、広告コンバージョンの測定は、多くの場合、 [サードパーティ Cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies) に依存しています。**しかし、ブラウザーはこれらへのアクセスを制限しています。**
+
+[Chromeは、サードパーティ Cookie のサポートを段階的に廃止することを](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html)計画しており[、ユーザーが選択した場合に](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en) Cookie をブロックする方法を提供します。 Safari は[サードパーティ Cookie](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) をブロックし、Firefox は[既知のサードパーティ追跡 Cookie をブロックし](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default)、また Edge は[追跡防止を提供します](https://support.microsoft.com/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention)。
+
+サードパーティ Cookie はレガシー ソリューションになりつつあります。**このような新しい専用の API** は、サードパーティ Cookie が解決したユース ケースにプライバシーを保護する方法で対処する目的で使用が広まっています。
+
+**Event Conversion Measurement API はサードパーティ Cookie とどのような点で異なりますか？**
+
+- Cookie とは異なり、コンバージョンを測定する**ために設計されています。**これにより、ブラウザーはより強化されたプライバシー保護を適用できるようになります。
+- **より高いレベルのプライバシー**を提供します。たとえば、サイト運営者側と広告主側のユーザー プロファイルをリンクするなど、2 つの異なるトップレベル サイトで同じユーザーを特定することが難しくなります。詳細については、「[How this API preserves user privacy](#how-this-api-preserves-user-privacy)」を参照してください。
+
+### 最初のイテレーション
+
+この API は**初期の実験段階にあり**ます。オリジン トライアルとして利用できるのは、API の**最初のイテレーション**です。[将来のイテレーション](#use-cases)では、状況が大幅に変わる可能性があります。
+
+### クリックのみ
+
+この API のイテレーションは、**クリックスルー コンバージョン測定**のみをサポートしていますが、 [ビュースルー コンバージョン測定](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md)は公開中です。
+
+### 使い方
+
+<figure>
+  {% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="図：変換測定 API ステップの概要", width="800", height="496" %}
+</figure>
+
+この API は、広告に使用される 2 種類のリンク (`<a>` 要素) で使用できます。
+
+- **ファーストパーティのコンテキスト**におけるリンク。ソーシャル ネットワーク上の広告や検索エンジンの結果ページなど。
+- **サードパーティの iframe** におけるリンク。サードパーティのアドテック プロバイダーを使用するパブリッシャー サイトなど。
+
+この API を使用すると、このようなアウトバウンド リンクを広告コンバージョンに固有の属性で構成できます。
+
+- クリック ID やキャンペーン ID など、サイト運営者側の広告クリックに添付するカスタム データ。
+- この広告のコンバージョンが見込まれる Web サイト。
+- 変換が成功したことを通知する必要があるレポート エンドポイント。
+- この広告でコンバージョンをカウントできなくなった締め切り日時。
+
+ユーザーが広告をクリックすると、(ユーザーのローカル デバイスの) ブラウザーがこのイベントをコンバージョン設定とともに記録し、 `<a>`要素のコンバージョン測定属性で指定されたデータをクリックします。
+
+その後、ユーザーは広告主の Web サイトにアクセスして、広告主またはそのアドテック プロバイダーが**コンバージョン**として分類するアクションを実行できます。これが発生した場合、広告クリックとコンバージョン イベントはユーザーのブラウザーによって照合されます。
+
+ブラウザーは最終的に `<a>` 要素の属性で指定されたエンドポイントに送信される**コンバージョン レポート**をスケジュールします。このレポートには、このコンバージョンにつながった広告クリックに関するデータと、コンバージョンに関するデータが含まれています。
+
+特定の広告クリックに対して複数のコンバージョンが登録されている場合、対応するレポートが多数送信されるようにスケジュールされます (広告クリックごとに最大 3 つ)。
+
+レポートは、変換後数日または場合によっては数週間の遅延後に送信されます ([レポートのタイミングで](#report-timing)理由を参照してください)。
+
+## ブラウザーのサポートと類似する API
+
+### ブラウザーのサポート
+
+Event Conversion Measurement API をサポートできます。
+
+- [オリジン トライアル](/origin-trials/)としてサポート可能。オリジン トライアルは、特定の[オリジンの](/same-site-same-origin/#origin)**すべての訪問者**に対して API を有効にします。**エンド ユーザーで API を試すには、オリジン トライアルにオリジンを登録する必要があります**。オリジン トライアルの詳細については、「[変換測定 API の使用](/using-conversion-measurement)」を参照してください。
+- Chrome 86 以降でフラグをオンにする。**フラグは、単一ユーザー**のブラウザーで API を有効にします。**フラグは、ローカルで開発するときに役立ちます**。
+
+[Chrome 機能エントリ](https://chromestatus.com/features/6412002824028160)の現在のステータスの詳細をご覧ください。
+
+### 標準化
+
+この API は、Web Platform Incubator Community Group ([WICG](https://www.w3.org/community/wicg/)) でオープンに設計されています。Chrome での実験に利用可能です。
+
+### 同様の API
+
+Safari で使用される Web ブラウザー エンジンである  WebKit には、同様の目標を持つ提案である[プライベート クリック測定](https://github.com/privacycg/private-click-measurement)があります。プライバシー コミュニティ グループ ([PrivacyCG](https://www.w3.org/community/privacycg/)) 内で作業中です。
+
+## この API がユーザーのプライバシーを保護する方法
+
+この API を使用すると、ユーザーのプライバシーを保護しながらコンバージョンを測定できます。ユーザーはサイト間で認識されません。**これは、データ制限**、**変換データの通知**、および**レポートのタイミング** メカニズムによって可能になります。
+
+これらのメカニズムがどのように機能するか、そしてそれらが実際に何を意味するかを詳しく見てみましょう。
+
+### データ制限
+
+以下において、**クリック時間または表示時間のデータ**は、広告がユーザーに配信されてからクリックまたは表示されたときに `adtech.example` で利用できるデータです。変換が発生したときのデータは、**コンバージョン時間データ**です。
+
+**パブリッシャー** `news.example` と**広告主** `shoes.example` を見てみましょう。**アドテック プラットフォーム** `adtech.example` のサードパーティ スクリプトがパブリッシャー サイト `news.example` に存在しており、広告主 `shoes.example` の広告が含まれています。`shoes.example` には、コンバージョンを検出するための `adtech.example` が含まれています。
+
+`adtech.example` は Web ユーザーについてどのくらい学ぶことができますか？
+
+#### サードパーティ Cookie を使用
+
+<figure>
+  {% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="図：サードパーティ Cookie がクロスサイト ユーザーの認識を可能にする方法", width="800", height="860" %}
+</figure>
+
+`adtech.example` は、**サイト間でユーザーを認識する**ために、**一意のクロスサイト識別子として使用されるサードパーティ Cookie** に依存しています。さらに、`adtech.example` は、詳細なクリック時間または表示時間のデータと詳細な変換時間のデータの**両方**にアクセスし、それらをリンクすることができます。
+
+その結果、`adtech.example` は、1 人のユーザーによる広告ビューからクリック、コンバージョンにおよぶサイト全体の行動を追跡できます。
+
+`adtech.example`、`news.example`、`shoes.example` だけでなく、多数のサイト運営者や広告主のサイトに存在する可能性が高いため、ユーザーの行動を Web 全体で追跡できます。
+
+#### Event Conversion Measurement API を使用
+
+<figure>
+  {% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="図：API がクロスサイトユーザー認識なしでコンバージョン測定を可能にする方法", width="800", height="643" %}
+  <figcaption>Cookie 図の「広告 ID」と「クリック ID」はどちらも、詳細データへのマッピングを可能にする識別子です。この図では、クリックスルー コンバージョン測定のみがサポートされているため、「クリック ID」と呼ばれています。</figcaption>
+</figure>
+
+`adtech.example` はクロスサイト識別子を使用できないため、**サイト間でユーザーを認識できません**。
+
+- 64 ビット識別子を広告クリックに添付できます。
+- 変換イベントに添付できる変換データは 3 ビットのみです。3 ビットは 0 から 7 までの整数値に適合できます。これは多くのデータではありませんが、広告主が将来の広告予算をどこに使うかについて適切な決定を下す方法を学ぶのに十分です (たとえば、データモデルのトレーニングによって)。
+
+{% Aside %}クリック データとコンバージョン データが同じコンテキストの JavaScript 環境に公開されることはありません。{% endAside %}
+
+#### サードパーティ Cookie に代わるものなし
+
+Event Conversion Measurement API などのサードパーティ Cookie に代わるものがなければ、コンバージョンを `adtech.example` することはできません。adtech.example がサイト運営者と広告主の両方のサイトに存在する場合は、クリック時間またはコンバージョン時間のデータにアクセスできますが、それらをリンクすることは一切できません。
+
+この場合、ユーザーのプライバシーは保護されますが、広告主は広告費を最適化できません。Event Conversion Measurement API のような代替手段が必要なのはこのためです。
+
+### コンバージョン データのノイズ
+
+変換時に収集された 3 ビットには**ノイズ**が発生します。
+
+たとえば、Chrome の実装では、データ ノイズは次のように機能します。API は 5％ の確率で実際のコンバージョン データではなくランダムな 3 ビット値をレポートします。
+
+これにより、プライバシー攻撃からユーザーが保護されます。いくつかの変換からのデータを悪用して識別子を作成しようとする攻撃者は、受信するデータを完全には信用できないため、こうしたタイプの攻撃はより複雑化します。
+
+[真のコンバージョン数を回復](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count)できることにご注意ください。
+
+クリック データとコンバージョン データの合計:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>データ</th>
+        <th>サイズ</th>
+        <th>例</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>クリック データ (<code>impressiondata</code> 属性)</td>
+        <td>64 ビット</td>
+        <td>広告 ID またはクリック ID</td>
+      </tr>
+      <tr>
+        <td>変換データ</td>
+        <td>3 ビット、ノイズ</td>
+        <td>サインアップ、完全なチェックアウトなど、コンバージョン タイプにマッピングできる 0 から 7 までの整数。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### レポートのタイミング
+
+特定の広告クリックに対して複数のコンバージョンが登録されている場合**、対応するレポートがコンバージョンごとに送信され、クリックごとに最大 3 つまで送信されます**。
+
+変換側からより多くの情報を取得する目的で変換時間が使用されることによりユーザーのプライバシーに影響がおよぶのを防ぐために、この API では、変換直後に変換レポートが送信されないことが指定されます。最初の広告クリックの後、このクリックに関連付けられた**レポート ウィンドウ**のスケジュールが開始されます。各レポート ウィンドウには期限があり、その期限より前に登録されたコンバージョンは、そのウィンドウの最後に送信されます。
+
+レポートは、このようにスケジュールされた日時の正確なタイミングでは送信されない場合があります。レポートの送信がスケジュールされているときにブラウザーが稼働していなければ、レポートはブラウザーの起動時に送信されます。それは、スケジュールされた時刻から数日後または数週間後となる場合があります。
+
+満了後 (クリック時間 + `impressionexpiry`)、変換はカウントされません。この広告の変換をカウントできなくなるタイミングとして、`impressionexpiry` がカットオフの日時となります
+
+Chromeでは、レポートのスケジュールは次のように機能します。
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>変換時間に応じて、変換レポートが送信されます (ブラウザーが開いている場合)...</th>
+        <th>レポート ウィンドウの数</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30 日、デフォルトおよび最大値</td>
+        <td>
+          <ul>
+            <li>広告がクリックされてから 2 日後</li>
+            <li>または広告クリックから 7 日後</li>
+            <li>または<code>impressionexpiry</code> = 広告クリックから 30 日後。</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>は 7 日から 30 日です</td>
+        <td>
+          <ul>
+            <li>広告クリックの 2 日後</li>
+            <li>または広告クリックから7日後</li>
+            <li>または広告クリック後の<code>impressionexpiry</code>
+</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>は 2 日から 7 日です</td>
+        <td>
+          <ul>
+            <li>広告クリックの 2 日後</li>
+            <li>または広告クリック後の<code>impressionexpiry</code>
+</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>は 2 日未満です</td>
+        <td>
+          <li>広告クリックの 2 日後</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>
+  {% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="どのレポートがいつ送信されるかを示すクロノロジー", width="800", height="462" %}
+</figure>
+
+タイミングの詳細については、 [スケジュールされたレポートの送信を](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports)参照してください。
+
+## 例
+
+{% Aside %}これが実際に動作することを確認するには、[デモ](https://goo.gle/demo-event-level-conversion-measurement-api)を試して、対応する[コード](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement)を確認してください。 {% endAside %}
+
+API によりコンバージョンが記録および報告される仕組みは次のとおりです。現在の API では、「click-to-convert」のフローはこのように機能します。この API の今後のイテレーションは、これと[異なる可能性があります](#use-cases)。
+
+### 広告クリック (ステップ 1 から 5)
+
+<figure>
+  {% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="図：広告クリックとクリック ストレージ", width="800", height="694" %}
+</figure>
+
+`<a>`広告要素は、iframe 内の`adtech.example` によってサイト運営者サイトに読み込まれます。
+
+アドテック プラットフォームの開発者は、`<a>` を以下のようなコンバージョン測定属性で設定しています。
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+このコードは以下を指定します：
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>属性</th>
+        <th>デフォルト値、最大、最小</th>
+        <th>例</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code> (必須)：広告クリックに添付する<b> 64 ビットの識別子。</b>
+</td>
+        <td>(デフォルトなし)</td>
+        <td>64 ビット整数などの動的に生成されたクリック ID： <code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code> (必須): <b><a href="/same-site-same-origin/#site" noopener="">eTLD + 1</a></b> 変換はこの広告のために期待されています。</td>
+        <td>(デフォルトなし)</td>
+        <td>
+<code>https://advertiser.example</code> 。<br> <code>conversiondestination</code>が<code>https://advertiser.example</code> である場合、 <code>https://advertiser.example</code> と<code>https://shop.advertiser.example</code> の両方での変換に起因します。<br> <code>conversiondestination</code>が<code>https://shop.advertiser.example</code> の場合も同じことが起こり、<code>https://advertiser.example</code> と<code>https://shop.advertiser.example</code> の両方での変換に起因します。</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>の有効期限 (オプション): ミリ秒単位で、コンバージョンがこの広告に起因する可能性がある場合のカットオフ時間。</td>
+        <td>
+<code>2592000000</code> = 30日 (ミリ秒単位)。<br><br>最大: 30 日 (ミリ秒単位)。<br><br>最小: 2日 (ミリ秒単位)。</td>
+        <td>クリックから 10 日後： <code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code> (オプション): 確認済みのコンバージョンをレポートする宛先。</td>
+        <td>リンク要素が追加されたページのトップレベルの起点。</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code>: 広告クリックの目的の宛先。</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}例に関する注意事項:
+
+- 現在はクリックのみがサポートされていますが、API の属性または API プロポーザルで使用されている「インプレッション」という用語があります。名前は、API の将来の反復で更新される可能性があります。
+- 広告は iframe 内にある必要はありませんが、これがこの例の基になっています。
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- `window.open` または `window.location` を介したナビゲートに基づくフローは、帰属の対象にはなりません。
+
+{% endAside %}
+
+ユーザーが広告をタップまたはクリックすると、広告主のサイトに移動します。ナビゲーションがコミットされると、ブラウザーは、`impressiondata`、`conversiondestination`、`reportingorigin`、`impressionexpiry` を含むオブジェクトを保存します。
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### 変換とレポートのスケジュール (ステップ 6 から 9)
+
+<figure>
+  {% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="図: 変換とレポートのスケジュール", width="800", height="639" %}
+</figure>
+
+広告をクリックした直後、または後で (たとえば翌日に)、ユーザーは `advertiser.example` にアクセスし、スポーツ シューズを閲覧し、購入したいペアを見つけて、チェックアウトに進みます。`advertiser.example` は、チェックアウト ページにピクセルを含めました。
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example` はこのリクエストを受信し、コンバージョンとして適格であると判断します。次に、コンバージョンを記録するようにブラウザーに要求する必要があります。`adtech.example` は、すべての変換データを 3 ビット (0 から 7 の整数) に圧縮します。たとえば、**チェックアウト** アクションを変換値 2 にマップする場合があります。
+
+`adtech.example` は、特定のレジスタ変換リダイレクトをブラウザーに送信します。
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %}`.well-known` は特別な URL です。これにより、ソフトウェア ツールやサーバーは、サイトで一般的に必要な情報やリソースを簡単に見つけることができます。たとえば、ユーザーが[パスワードを変更できる](/change-password-url/)ページを確認できます。ここで、`.well-known` は、ブラウザーがこれを特別な変換要求として認識するためだけの目的で使用されます。このリクエストは、実際にはブラウザーによって内部的にキャンセルされます。{% endAside %}
+
+ブラウザーはこのリクエストを受け取ります。`.well-known/register-conversion` を検出すると、ブラウザーは次のようになります。
+
+- `conversiondestination` に一致するストレージ内のすべての広告クリックを検索します (ユーザーが広告をクリックしたときに `conversiondestination` URL として登録された URL でこのコンバージョンを受信しているため)。 1 日前にサイト運営者のサイトで発生した広告クリックを検出します。
+- この広告クリックのコンバージョンを登録します。
+
+いくつかの広告のクリックが変換にマッチする場合があります。ユーザーは、`news.example` と `weather.example` の両方で `shoes.example` の広告をクリックした可能性があります。この場合は、複数の変換が登録されます。
+
+これで、ブラウザーはこの変換をアドテック サーバーに通知する必要があることを認識します。具体的には、`<a>` 要素とピクセル リクエスト (`adtech.example`) の両方で指定されている `reportingorigin` に報告する必要があります。
+
+そのために、ブラウザーは **コンバージョン レポート**、つまり (パブリッシャー サイトからの) クリック データを含むデータのブロブおよび (広告主サイトからの) コンバージョン データを含むデータを送信するようにスケジュールします。この例では、ユーザーはクリックの 1 日後にコンバージョンを達成しました。そのため、レポートは翌日、ブラウザーが実行されている場合はクリック後 2 日目で送信されるようにスケジュールされています。
+
+### レポートの送信 (ステップ 10 および 11)
+
+<figure>
+  {% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="図: レポートを送信するブラウザー", width="800", height="533" %}
+</figure>
+
+レポートを送信する予定の時間に達すると、ブラウザーは**変換レポート**を送信します。`<a>`要素 `adtech.example` で指定されたレポートの発信元に HTTP POST が送信されます。
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+パラメータとして含まれるものは次のとおりです。
+
+- 元の広告クリックに関連付けられたデータ (`impression-data`)。
+- 変換に関連するデータ[。ノイズが発生する可能性があり](#noising-of-conversion-data)ます。
+- クリックに起因するコンバージョン クレジット。この API は、**ラストクリック アトリビューション** モデルに従います。最新の一致する広告クリックには 100 のクレジットが与えられ、他のすべての一致する広告クリックには 0 のクレジットが与えられます。
+
+アドテック サーバーがこのリクエストを受信すると、サーバーから `impression-data` と `conversion-data` (つまり変換レポート) を取得できます。
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### その後の変換と有効期限
+
+後に、ユーザーは、たとえば、シューズに合わせてテニスのラケットを `advertiser.example` から購入するかもしれません。その際も同様のフローが発生します。
+
+- アドテック サーバーは、変換要求をブラウザーに送信します。
+- ブラウザーはこのコンバージョンを広告クリックと照合し、レポートをスケジュールし、それを後からアドテック サーバーに送信します。
+
+`impressionexpiry` の有効期限が切れると、この広告クリックのコンバージョンはカウントされなくなり、広告クリックはブラウザーのストレージから削除されます。
+
+## ユース ケース
+
+### 現在サポートされているもの
+
+- クリックスルー コンバージョンを測定する: どの広告クリックがコンバージョンにつながるかを判断し、コンバージョンに関する大まかな情報にアクセスします。
+- 機械学習モデルのトレーニングなどにより、データを収集して広告の選択を最適化します。
+
+### このイテレーションでサポートされていないもの
+
+次の機能はサポートされていませんが、この API の今後のイテレーション、または[集計](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md)レポートには含まれる可能性があります。
+
+- ビュースルー コンバージョン測定。
+- [複数のレポート エンドポイント](https://github.com/WICG/conversion-measurement-api/issues/29)。
+- [iOS/Android アプリで開始された Web コンバージョン](https://github.com/WICG/conversion-measurement-api/issues/54)。
+- コンバージョン リフトの測定/増分: 広告を見たテスト グループと見なかったコントロール グループの違いを測定することによる、コンバージョン行動の因果関係の違いの測定。
+- ラストクリックではないアトリビューション モデル。
+- 変換イベントに関する大量の情報を必要とするユース ケース。たとえば、きめ細かい購入額や商品カテゴリなど。
+
+これらの機能やその他の機能をサポートする前に、(ノイズやビット数の削減、その他の制限など) **さらなるプライバシー保護**を API に追加する必要があります。
+
+追加される可能性のある機能に関するディスカッションは、[API プロポーザル リポジトリの**課題のセクション**](https://github.com/WICG/conversion-measurement-api/issues)に公開されています。
+
+{% Aside %}ユース ケースの欠落や API に関するフィードバックがございましたら、ぜひ[共有](#share-your-feedback)してください。{% endAside %}
+
+### 将来のイテレーションで変わる可能性があるもの
+
+- この API は、初期の実験段階にあります。今後のイテレーションにおいて、この API は変更される可能性があります。その変更内容は、以下を含むものの、これらに限定されない可能性があります。その目標は、ユーザーのプライバシーを保護しながらコンバージョンを測定することであり、このユース ケースにより適切に対処するのに役立つ変更が加えられます。
+- API と属性の命名は進化する可能性があります。
+- クリック データとコンバージョン データはエンコードを必要としなくなる可能性があります。
+- 変換データの 3 ビット制限は増減する可能性があります。
+- [より多くの機能が追加される可能性があります。そうした新機能をサポートするのに必要でれば、](#what-is-not-supported-in-this-iteration)**さらなるプライバシー保護 (ノイズ/ビット数の減少/その他の制限など)** が追加される可能性もあります。
+
+新機能に関するディスカッションをフォローしたり、参加したりするには、プロポーザルの [GitHub リポジトリ](https://github.com/WICG/conversion-measurement-api/issues)を見てアイデアを送信してください。
+
+## お試しください
+
+### デモ
+
+[デモをお](https://goo.gle/demo-event-level-conversion-measurement-api)試しください。必ず「始める前に」の指示に従ってください。
+
+デモに関する質問については、[@maudnals](https://twitter.com/maudnals?lang=en) または [@ChromiumDev](https://twitter.com/ChromiumDev) をツイートしてください。
+
+### API をお試しください
+
+API をローカルで、またはエンドユーザーを対象に実験する予定の方は、[Using the conversion measurement API](/using-conversion-measurement) を参照してください。
+
+### フィードバックを共有する
+
+新しい Conversion Measurement API がユース ケースをサポートし、開発者に優れた体験を提供するには、**皆さまからのフィードバックが欠かせません**。
+
+- Chrome の実装に関するバグを報告するには、[バグを開いてください](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A)。
+- Chrome API のフィードバックを共有し、ユース ケースに関するディスカッションを行うには、新しい課題を作成するか、 [API プロポーザル リポジトリ](https://github.com/WICG/conversion-measurement-api/issues)に既存の課題に参加してください。[同様に、API プロポーザル リポジトリでは] (https://github.com/privacycg/private-click-measurement/issues)WebKit/Safari API とそのユース ケースに関するディスカッションを行えます。
+- 広告の使用例について話し合い、業界の専門家と意見を交換するには、 [Improving Web Advertising Business Group](https://www.w3.org/community/web-adv/) に参加してください。 WebKit/Safari API に関するディスカッションについては、[プライバシー コミュニティ グループ](https://www.w3.org/community/privacycg/)に参加してください。
+
+### 最新情報の確認をお忘れなく
+
+- 開発者によるフィードバックとユース ケースが収集されるにつれ、Event Conversion Measurement API は進化していきます。プロポーザルの [GitHub リポジトリ](https://github.com/WICG/conversion-measurement-api/)をご覧ください。
+- この API を補完する [AggregateConversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md) の進化を追いましょう。
+
+*Charlie Harrison、John Delaney、Michael Kleber、KayceBasques をはじめとする、すべてのレビュアーによる貢献とフィードバックに感謝いたします。*
+
+*William Warby によるヒーロー画像/Unsplash の [@wawarby](https://unsplash.com/photos/WahfNoqbYnM)、編集済み。*
diff --git a/src/site/content/ja/blog/coop-coep/index.md b/src/site/content/ja/blog/coop-coep/index.md
new file mode 100644
index 00000000000..6c42fd2cdeb
--- /dev/null
+++ b/src/site/content/ja/blog/coop-coep/index.md
@@ -0,0 +1,288 @@
+---
+layout: post
+title: COOPとCOEPの利用によりあなたのウェブサイトを「クロスオリジン分離」にする
+subhead: COOPとCOEPの利用により、クロスオリジンの分離環境を設定し、`SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory（）`、精度の高い高解像度タイマー等の強力な機能を有効にします。
+description: 多少のWebAPIは、Spectreのようなサイドチャネル攻撃のリスクを高めます。そのリスクを軽減するために、ブラウザはオプトインベースの分離環境を提供します。COOPとCOEPの利用により、クロスオリジンの分離環境を設定し、`SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory（）`、精度の高い高解像度タイマー等の強力な機能を有効にします。
+authors:
+  - agektmr
+hero: image/admin/Rv8gOTwZwxr2Z7b13Ize.jpg
+alt: ポップアップ、iframe、および画像を含むWebサイトを閲覧している人のイラスト。
+date: 2020-04-13
+updated: 2021-11-26
+tags:
+  - blog
+  - security
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/register_trial/2780972769901281281"
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+`SharedArrayBuffer`は、Chrome 92以降のクロスオリジン分離から有効になります。詳細については[、Android Chrome88およびDesktopChrome92のSharedArrayBufferアップデートを](https://developer.chrome.com/blog/enabling-shared-array-buffer/)ご覧ください。
+
+{% endAside %}
+
+**更新**
+
+- **2021年8月5日**：JSセルフプロファイリングAPIは、クロスオリジン分離を求めるAPIの1つとして言及されるが、 [最新の方向転換を](https://github.com/shhnjk/shhnjk.github.io/tree/main/investigations/js-self-profiling#conclusion)反映したので削除されました。
+- **2021年5月6日**：フィードバックと報告された問題に基づき、ChromeM92で制限されるクロスオリジン分離がないサイトでの` SharedArrayBuffer `の使用のタイムラインを調整することを決めました。
+- **2021年4月16日**[：新規COEPクレデンシャルレスモード](https://github.com/mikewest/credentiallessness/)と[COOP同一生成元許可ポップアップが、](https://github.com/whatwg/html/issues/6364)クロスオリジン分離のリラックス状態になることについてのメモを追加しました。
+- **2021年3月5日**Chrome 89で完全に有効になった`SharedArrayBuffer` 、`performance.measureUserAgentSpecificMemory()` 、およびデバッグ機能の制限を削除しました。今後の機能であるより高精度の`performance.now()`と`performance.timeOrigin`を追加しました。
+- **2021年2月19日**`allow="cross-origin-isolated"`機能ポリシーとDevToolsのデバッグ機能に関するメモを追加しました。
+- **2020年10月15日**： `self.crossOriginIsolated`はChrome 87から動けます。これを反映して、 `self.crossOriginIsolated`が`true` になったら、`document.domain`は不変となります。 `performance.measureUserAgentSpecificMemory()`はオリジン トライアルを終了し、Chrome89のデフォルトで有効にさせました。AndroidChromeの共有アレイバッファはChrome88から利用できるようになります。
+
+{% YouTube 'XLNJYhjA-0c' %}
+
+多少のWebAPIは、Spectreのようなサイドチャネル攻撃のリスクを高めます。そのリスクを軽減するために、ブラウザーはクロスオリジン分離と呼ばれるオプトインベースの分離環境を提供します。クロスオリジンの分離状態では、Webページは次のような特権機能を使用できます。
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>説明</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">
+          <code>SharedArrayBuffer</code></a>
+        </td>
+        <td>WebAssemblyスレッドに必要です。これはAndroidChrome 88から利用できます。デスクトップバージョンは現在、<a href="https://www.chromium.org/Home/chromium-security/site-isolation">サイト分離</a>のサポートにより、デフォルトで有効になっているが、クロスオリジン分離状態が要求され、 <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/">Chrome92でデフォルトで無効にされます</a>。</td>
+      </tr>
+      <tr>
+        <td>
+          <a href="/monitor-total-page-memory-usage/">
+          <code>performance.measureUserAgentSpecificMemory()</code></a>
+        </td>
+        <td>Chrome89から動けます。</td>
+      </tr>
+      <tr>
+        <td><a href="https://crbug.com/1180178"><code>performance.now()</code> 、 <code>performance.timeOrigin</code></a></td>
+        <td>現在、解像度が100マイクロ秒以上で、多くのブラウザで利用できます。クロスオリジンアイソレーションでは、解像度が5マイクロ秒以上になる可能性があります。</td>
+      </tr>
+    </tbody>
+    <caption>クロスオリジン分離状態で利用できる機能。</caption>
+  </table>
+</div>
+
+クロスオリジンの分離状態は、 `document.domain`の変更も防ぎます。（ `document.domain`を変更できると、同じサイトのドキュメント間の通信が可能になり、同一生成元ポリシーの抜け穴と見なされます。）
+
+クロスオリジンの分離状態にオプトインするには、メインドキュメントで次のHTTP headers を送信する必要があります。
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+これらのheadersは、クロスオリジンドキュメントによるロードを選択していないリソースまたはiframeのロードを停止し、クロスオリジンウィンドウがドキュメントと直接対話するのを防ぐようにブラウザーに指示します。これは、クロスオリジンでロードされるリソースにはオプトインを求めるとも意味します。
+
+[`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)を調べることで、Webページがクロスオリジンの分離状態にあるかどうかを判断できます。
+
+この記事では、これらの新しいheadersの使用方法を説明します。[フォローアップ記事](/why-coop-coep)では、より多くのバックグラウンドとコンテキストを提供します。
+
+{% Aside %}
+
+`SharedArrayBuffer` 、WebAssemblyスレッド、 `performance.measureUserAgentSpecificMemory()`またはブラウザープラットフォーム経由でより堅牢な方法でより正確な高解像度タイマーを使用できるようにWebサイトを準備したい人を対象としています。
+
+{% endAside %}
+
+{% Aside 'key-term' %}この記事では、似たような用語を数多く使用しています。より明確にするには、最初からそれらを定義しましょう。
+
+- [COEP：クロスオリジンエンベッダーポリシー](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP：クロスオリジンオープナーポリシー](https://github.com/whatwg/html/pull/5334/files)
+- [CORP：クロスオリジンリソースポリシー](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS：クロスオリジンリソースシェアリング](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB：クロスオリジンリードブロッキング](https://www.chromium.org/Home/chromium-security/corb-for-developers){% endAside %}
+
+## COOPとCOEPを展開することにより、Webサイトのクロスオリジンを分離します
+
+{% Aside %}[クロスオリジン分離を有効にするについての説明](/cross-origin-isolation-guide/)で、クロスオリジン分離を有効にする実用的な手順を学びます。 {% endAside %}
+
+### COOPとCOEPを統合する
+
+#### 1. 最上位のドキュメントで`Cross-Origin-Opener-Policy: same-origin`headersを設定します
+
+最上位のドキュメントで`COOP: same-origin`を有効にすると、同一生成元のウィンドウ、及びドキュメントから開いたウィンドウは、同じCOOP設定で同じ生成元にない限り、個別の閲覧コンテキスト組を得ます。したがって、開いているウィンドウには分離が適用され、両方のウィンドウ間の相互通信は無効になります。
+
+{% Aside 'caution' %}
+
+これにより、OAuthや支払いなどのクロスオリジンウィンドウの相互作用を求める統合が破られます。この状況を回避するために`Cross-Origin-Opener-Policy: same-origin-allow-popups`へのクロスオリジン分離を有効にする[条件の緩和を検討しています](https://github.com/whatwg/html/issues/6364)。このようにして、それ自体で開いたウィンドウとの通信が可能になります。
+
+クロスオリジン分離を有効にしたいが、この問題によって阻止されている場合は[、オリジントライアルに登録し](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)、新しい条件が効くまで待つことをお勧めします。この問題が安全に解決されるまで、オリジントライアルを終了する予定はありません。
+
+{% endAside %}
+
+閲覧コンテキストグループは、同じコンテキストを共有するタブ、ウィンドウ、またはiframeのグループです。 例えば、ウェブサイト(`https://a.example`)はポップアップウィンドウ(`https://b.example`)を開くと、オープナーウィンドウとポップアップウィンドウは同じ閲覧コンテキストをを共有し、`window.opener`などのDOM APIを介して相互にアクセスします。
+
+{% Img src="image/admin/g42eZMpIKNbUL0cN6yjC.png", alt="閲覧コンテキストグループ", width="470", height="469" %}
+
+[DevToolsで](#devtools-coop)ウィンドウオープナーとそのopeneeが別々の閲覧コンテキストグループに属しているかどうかをチェックすることができます。
+
+{% Aside 'codelab' %}[様々のCOOPパラメータの影響をご確認ください](https://cross-origin-isolation.glitch.me/coop). {% endAside %}
+
+#### 2.リソースのCORPまたはCORSが有効になっていることを確認すること
+
+ページ内のすべてのリソースにはCORP又はCORS HTTP headersがロードされていることを確認してください。このステップは[、COEPを有効にするステップ4に](#enable-coep)必要です。
+
+次はリソースの性質に応じて、実施する必要となることです。
+
+- リソースを**同じオリジンのみから**ロードしたい場合は、 `Cross-Origin-Resource-Policy: same-origin`headerをご設定ください。
+- リソースを**同じサイトのみから、かつ、オリジンを介して**ロードしたい場合は、 `Cross-Origin-Resource-Policy: same-site`headerをご設定ください。
+- リソースを**制御しクロスオリジンから**ロードをする場合は、可能であれば`Cross-Origin-Resource-Policy: cross-origin`headerをご設定ください。
+- 制御できないクロスオリジンリソースの場合：
+    - リソースがCORSで提供される場合は、読み込み中のHTMLタグで`crossorigin`属性をご使用ください。 （たとえば、 `<img src="***" crossorigin>`.)
+    - CORSまたはCORPのいずれかをサポートする必要がある場合は、リソースの所有者に連絡してください。
+- iframeの場合、CORPとCOEP headerを次のように使用します。Cross `Cross-Origin-Resource-Policy: same-origin` （またはコンテキストに応じて`same-site` 、 `cross-origin`)と `Cross-Origin-Embedder-Policy: require-corp` 。
+
+{% Aside %}
+`<iframe>`タグ `allow="cross-origin-isolated"`機能ポリシーを適用し、このドキュメントで説明されているのと同じ条件を満たすことで、iframe内に埋め込まれたドキュメントでクロスオリジン分離を有効にできます。親フレームと子フレームを含むドキュメントのチェーン全体も、クロスオリジンで分離される必要があることに注意してください。 {% endAside %}
+
+{% Aside 'key-term' %}"同一サイト"と"同一生成元"の違いを理解することが重要です。[同一サイトと同一生成元の理解](/same-site-same-origin)で相違についてご参照ください。 {% endAside %}
+
+#### 3. COEP Report-Only HTTP headerを使用して、埋め込まれたリソースを評価すること
+
+COEPを完全に有効にする前に、 `Cross-Origin-Embedder-Policy-Report-Only`headerを使用してドライランを実行し、ポリシーが実際に機能するかどうかを確認できます。埋め込まれたコンテンツをブロックせずにレポートを受け 取ります。これをすべてのドキュメントに再帰的に適用します。 Report-Only HTTP headerの詳細情報については、[Observe issues using the Reporting API](#observe-issues-using-the-reporting-api)をご参照ください。
+
+#### 4. COEPを有効にする {: #enable-coep }
+
+全てが機能し、すべてのリソースを正常にロードできることを確認したら、`Cross-Origin-Embedder-Policy: require-corp`HTTP headerを、iframeを介して埋め込まれているドキュメントを含むすべてのドキュメントに適用します。
+
+{% Aside 'codelab' %}[さまざまなCOEP / CORPパラメータの影響を確認してください](https://cross-origin-isolation.glitch.me/coep)。 {% endAside %}
+
+{% Aside %} [Squoosh](https://squoosh.app)（画像最適化PWA） [は、COOP / COEP](https://github.com/GoogleChromeLabs/squoosh/pull/829/files#diff-316f969413f2d9a065fcc08c7a5589c088dd1e21deebadccfc5a4372ac5e0cbbR22-R23)を使用して、Android ChromeもWasmスレッド（とShared Array Buffer）にアクセスできるようになりました。 {% endAside %}
+
+{% Aside 'caution' %}
+
+クロスオリジン分離ではすべてのサブリソースが明示的にオプトインする必要があるため、`Cross-Origin-Resource-Policy`を大規模にデプロイする方法をỉ調べてきました。そして、反対方向に進むアイデアを思いつきました。それは[新しいCOEPの「クレデンシャル無し」モード](https://github.com/mikewest/credentiallessness/)で、すべてのクレデンシャルを削除することにより、CORP header無しでリソースをロードできることです。機能の仕組みについての詳細を理解しているが、`Cross-Origin-Resource-Policy` headerを送信していることを確認する負担が軽減されることを期待しております。
+
+クロスオリジン分離を有効にしたいが、これによってブロックされている場合は[オリジントライアルに登録し](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)、新しいモードが効くまで待つことをお勧めします。新しいモードが利用可能になるまで、オリジントライアルを終了する予定はありません。
+
+{% endAside %}
+
+### `self.crossOriginIsolated`と共に分離が成功したかどうかを判断します
+
+`self.crossOriginIsolated`プロパティは、Webページがクロスオリジン分離状態になり、すべてのリソースとウィンドウが同じ閲覧コンテキストグループ内で分離されている場合に`true`を返します。このAPIを使用して、閲覧コンテキストグループを正常に分離し、 `performance.measureUserAgentSpecificMemory()`などの強力な機能にアクセスできたかどうかを判断できます。
+
+### ChromeDevToolsで問題をデバッグする
+
+{% YouTube 'D5DLVo_TlEA' %}
+
+画像などの画面に表示されるリソースの場合は、リクエストがブロックされ、ページに画像がないと示されるため、COEPの問題を簡単に検出できます。ただし、必ずしも視覚的な影響を与えないスクリプトやスタイルなどのリソースの場合、COEPの問題が見過ごされる恐れがあります。それらについては、DevToolsネットワークパネルをご利用ください。COEPに関する問題が発生する場合は、**ステータス**列にある`(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)`をご覧ください。
+
+<figure>{% Img src="image/admin/iGwe4M1EgHzKb2Tvt5bl.jpg", alt="ネットワークパネルのステータス例のCOEP問題.", width="800", height="444" %}</figure>
+
+次に、エントリをクリックしたら、詳細をご覧ください。
+
+<figure>{% Img src="image/admin/1oTBjS9q8KGHWsWYGq1N.jpg", alt="ネットワークパネルにあるネットワークリソースをクリックすると、COEPに関する問題の詳細がheaderタブに表示されます.", width="800", height="241" %}</figure>
+
+**アプリケーション**パネルでiframeとポップアップウィンドウの状態を確認することもできます。左側の「Frames」セクションに移動し、「Top」を開き、リソース構造の内訳をご確認ください。
+
+<span id="devtools-coep-iframe">`SharedArrayBuffer`の可用性などのiframeの状態を確認できます。</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9titfaieIs0gwSKnkL3S.png", alt="Chrome DevTools iframeのインスペクター", width="800", height="480" %}</figure>
+
+<span id="devtools-coop">クロスオリジンが分離されているかどうかなのポップアップウィンドウの状態を確認することもできます。</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kKvPUo2ZODZu8byK7gTB.png", alt="Chrome DevToolsポップアップウィンドウズのインスペクター", width="800", height="480" %}</figure>
+
+### ReportingAPIで問題を観察する
+
+[Reporting API](/reporting-api)は、種々な問題を検出できるメカニズムの一つです。 COEPがリソースのロードをブロックするか、COOPがポップアップウィンドウを分離するたびにレポートを送信するようにユーザーのブラウザーに指示するという仕組みでReportingAPIを構成できます。Chromeは、バージョン69以降から、COEPやCOOPなどのさまざまな用途でReportingAPIをサポートしています。
+
+{% Aside %}
+
+`Report-To` headerでReportingAPIをすでに利用していますか？`Report-To`を`Reporting-Endpoints`に置き換える新しいバージョンのReportingAPIに移行しています。新しいバージョンへの移行を検討してください。詳細については、 [Migrate to Reporting APIv1](/reporting-api-migration)をご覧ください。
+
+{% endAside %}
+
+Reporting APIを構成し、レポートを受信するようにサーバーを設定する方法については、[Using the Reporting API](/reporting-api/#using-the-reporting-api)に移動して、ご参考ください。
+
+#### COEPレポートの例
+
+クロスオリジンリソースがブロックされている場合の[COEPレポート](https://html.spec.whatwg.org/multipage/origin.html#coep-report-type)ペイロードの例は次のようになります。
+
+```json
+[{
+  "age": 25101,
+  "body": {
+    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
+    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
+    "destination": "image",
+    "disposition": "enforce",
+    "type": "corp"
+  },
+  "type": "coep",
+  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
+}]
+```
+
+{% Aside 'caution' %} `blocked-url`は後方互換性だけのために存在し、[最終的には削除](https://github.com/whatwg/html/pull/5848)されます。 {% endAside %}
+
+#### COOPレポートの例
+
+ポップアップウィンドウが開かれ、分離されたときの[COOPレポート](https://html.spec.whatwg.org/multipage/origin.html#reporting)ペイロードの例は、次のようになります。
+
+```json
+[{
+  "age": 7,
+  "body": {
+    "disposition": "enforce",
+    "effectivePolicy": "same-origin",
+    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
+    "type": "navigation-from-response"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+異なる閲覧コンテキストグループが相互にアクセスすると（「report-only」モードのみ）、COOPもレポートを送信します。例えば、 `postMessage()`が試行されたとき、レポートは、次のようになります。
+
+```json
+[{
+  "age": 51785,
+  "body": {
+    "columnNumber": 18,
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "lineNumber": 83,
+    "property": "postMessage",
+    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
+    "type": "access-from-coop-page-to-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+},
+{
+  "age": 51785,
+  "body": {
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "property": "postMessage",
+    "type": "access-to-coop-page-from-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+## 結論
+
+Webページを特別なクロスオリジン分離状態にオプトインするために、COOPとCOEP HTTP headerの組み合わせを使用します。 `self.crossOriginIsolated`を調べて、Webページがクロスオリジンの分離状態にあるかどうかを判断できます。
+
+新しい機能がこのクロスオリジンの分離された状態に有効になり、COOPとCOEPに関するDevToolsがさらに改善されるので、本投稿は更新され続けます。
+
+## 資力
+
+- [強力な機能に「クロスオリジン分離」が必要な理由](/why-coop-coep/)
+- [クロスオリジン分離を有効にするためのガイド](/cross-origin-isolation-guide/)
+- [Android Chrome88およびDesktopChrome92でのSharedArrayBufferの更新](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
+- [`measureUserAgentSpecificMemory()`使用してWebページの合計メモリ使用量を監視します](/monitor-total-page-memory-usage/)
diff --git a/src/site/content/ja/blog/css-marker-pseudo-element/index.md b/src/site/content/ja/blog/css-marker-pseudo-element/index.md
new file mode 100644
index 00000000000..51470119f9b
--- /dev/null
+++ b/src/site/content/ja/blog/css-marker-pseudo-element/index.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: "CSS ::markerで箇条書きをカスタムします"
+subhead: "<ul>or<ol>を使用すると、数字または箇条書きの色、サイズ、またはタイプをカスタマイズするのは簡単になります。"
+authors:
+  - adamargyle
+  - loirooriol
+description: "<ul>or<ol>を使用すると、数字または箇条書きの色、サイズ、またはタイプをカスタマイズするのは簡単になります。"
+tags:
+  - blog
+  - css
+date: 2020-09-02
+updated: 2020-09-02
+scheduled: NS
+hero: image/admin/GPGTyXJOh0cH0wa1PvXH.png
+thumbnail: image/admin/jbdOq0tGGzobMtaBsajn.png
+alt: 箇条書きとテキストの周りに別々のボックスを配置して、単一のリストアイテムの構造を表示する
+feedback:
+  - api
+---
+
+ブルームバーグが後援しているIgaliaのおかげで、私たちはついにスタイリングリストのハックを片付けることができます。見る！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOmqXrog0YoriZqqIzEZ.png", alt="", width="665", height="384" %} <figcaption> <a href="https://glitch.com/edit/#!/marker-fun-example">ソースを見る</a> </figcaption></figure>
+
+[CSS `::marker`](https://www.w3.org/TR/css-lists-3/#marker-pseudo)で、箇条書きと数字の内容といくつかのスタイルを変更できます。
+
+## ブラウザの互換性
+
+`::marker`は、Firefox for DesktopとAndroid、デスクトップSafariとiOS Safari（ただし、 `color`と`font-*`プロパティのみ、[バグ204163を](https://bugs.webkit.org/show_bug.cgi?id=204163)参照）、およびChromium-basedのデスクトップとAndroidブラウザでサポートされています。アップデートについては、MDNの[ブラウザ互換性](https://developer.mozilla.org/docs/Web/CSS/::marker#Browser_compatibility)テーブルを参照してください。
+
+## 疑似要素
+
+次の重要なHTMLの順序付けされていないリストを検討してください。
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
+  <li>Dolores quaerat illo totam porro</li>
+  <li>Quidem aliquid perferendis voluptates</li>
+  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
+  <li>Fuga</li>
+</ul>
+```
+
+次の予想できるレンダリングにつながるのは何ですか？
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-plain-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+`<li>`アイテムの先頭のドットは無料です！ブラウザは、生成されたマーカーボックスを描画および作成しています。
+
+本日、ブラウザが作成する箇条書き要素のスタイルを設定する機能を提供する`::marker`疑似要素についてお話させて頂き喜びます。
+
+{% Aside 'key-term' %}疑似要素は、document treeにある要素と違うドキュメント内の要素を表します。例えば、`p::first-line`を使用したら、段落にある最初の行を選択できますが、そのテキスト行をラップするHTML要素はありません。 {% endAside %}
+
+### Markerの作成
+
+`::marker`疑似要素マーカーボックスは、すべてのリストアイテム要素内に自動的に生成され、実際のコンテンツと `::before`疑似要素の前に存在します。
+
+```css
+li::before {
+  content: "::before";
+  background: lightgray;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  margin-inline-end: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 340px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-before-example?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+通常、リストアイテムは`<li>` HTML要素ですが、他の要素も`display: list-item`とリストアイテムになることができます。
+
+```html
+<dl>
+  <dt>Lorem</dt>
+  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
+  <dd>Dolores quaerat illo totam porro</dd>
+
+  <dt>Ipsum</dt>
+  <dd>Quidem aliquid perferendis voluptates</dd>
+</dl>
+```
+
+```css/1
+dd {
+  display: list-item;
+  list-style-type: "🤯";
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-definition-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### マーカーのスタイリング
+
+`::marker`までは`list-style-type`と`list-style-image`を使用してリストのスタイルを設定し、1行のCSSでリストアイテムのシンボルを変更できます。
+
+```css
+li {
+  list-style-image: url(/right-arrow.svg);
+  /* OR */
+  list-style-type: '👉';
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+これは十分に便利ですが、より改善する必要です。色、サイズ、間隔などを変更するのはどうですか？そこで、 `::marker`が役に立ちます。これにより、CSS:からこれらの疑似要素を個別およびグローバルにターゲティングできます。
+
+```css
+li::marker {
+  color: hotpink;
+}
+
+li:first-child::marker {
+  font-size: 5rem;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-introduction?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'caution' %}上記のリストにピンク色の箇条書きがない場合、 `::marker`はブラウザでサポートされていません。 {% endAside %}
+
+`list-style-type`プロパティは、指定のスタイリングの可能性を提供します。 `::marker`疑似要素は、marker自体をターゲットでき、それに直接スタイルを適用できることを意味します。これにより、はるかに細かく制御する可能になります。
+
+`::marker`ですべてのCSSプロパティを使用できるわけではありません。許可されているプロパティと許可されていないプロパティのリストは、仕様に明確に示されています。この疑似要素で面白いものを試するがうまくいかない場合は、以下のリストを参考し、CSSでできることとできないことの案内してもらいます。
+
+#### 許可されたCSS `::marker`プロパティ
+
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+`::marker`内容の変更は、 `list-style-type`ではなく`content`で行われます。この次の例では、一番目の項目は`list-style-type`を、2番目の項目は`::marker`を使用してスタイル設定されます。一番目のケースのプロパティは、markerだけでなくリストアイテム全体に適用されます。つまり、テキストはmarkerと同様にアニメーション化されます。 `::marker`を使用する場合、テキストではなくmarkerボックスのみをターゲットにできます。
+
+許可されない`background`プロパティがどのように影響しないかに注意してください。
+
+<div class="switcher">
+{% Compare 'worse', 'List Styles' %}
+```css
+li:nth-child(1) {
+  list-style-type: '?';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+```
+
+{% CompareCaption %}
+Mixed results between the marker and the list item
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Marker Styles' %}
+```css
+li:nth-child(2)::marker {
+  content: '!';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+```
+
+{% CompareCaption %}
+Focused results between marker and list item
+{% endCompareCaption %}
+
+{% endCompare %}
+</div>
+
+<br>
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe
+    src="https://glitch.com/embed/#!/embed/marker-style-vs-list-style-type?path=style.css&previewSize=100"
+    alt="List Demo on Glitch"
+    style="height: 100%; width: 100%; border: 0;">
+  </iframe>
+</div>
+
+{% Aside 'gotchas' %} Chromiumでは、 `white-space`は内側に配置されたmarkerにのみ機能します。外側に配置されたmarkerの場合、末尾のスペースを保持できるようにスタイルアジャスターは常に`white-space: pre`を強制します。 {% endAside %}
+
+#### Markerの内容を変更する
+
+Markerのスタイルを設定する方法は次に表示します。
+
+**すべてのリストアイテムを変更する**
+
+```css
+li {
+  list-style-type: "😍";
+}
+
+/* OR */
+
+li::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-all?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**1つのリストアイテムのみを変更する**
+
+```css
+li:last-child::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-one?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**リストアイテムをSVGに変更する**
+
+```css
+li::marker {
+  content: url(/heart.svg);
+  content: url(#heart);
+  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-inline-svg?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**番号付きリストの変更**`<ol>`はどうですか？順序付きリストアイテムのマーカーは数字であり、デフォルトで箇条書きではありません。CSSでは、これらが[Counter](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)と呼ばれ、そして非常に強力です。数字の開始位置と終了位置を設定およびリセットしたり、ローマ数字に切り替えたりするためのプロパティもあります。それをスタイリングできますか？はい、markerコンテンツの値を使用して、独自の番号付けプレゼンテーションを作成することもできます。
+
+```css
+li::marker {
+  content: counter(list-item) "› ";
+  color: hotpink;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-numbered-lists?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### デバッグ
+
+`::marker`疑似要素に適用されるスタイルの検査、デバッグ、および変更をサポートできるようになりました。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PYKVXEzycrMhQujXsNxQ.png", alt="DevToolsがユーザーエージェントからのスタイルとユーザースタイルを開いて、表示します", width="776", height="574", style="max-inline-size: 480px" %}</figure>
+
+### 将来の疑似要素のスタイリング
+
+:: markerの詳細については、次のサイトをご覧ください。
+
+- [Smashing Magazineの](https://www.smashingmagazine.com/)[CSSリスト、Marker、Counter](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/)
+- [CSS-Tricks](https://css-tricks.com/)からの[CSS CounterとCSS Gridによるカウント](https://css-tricks.com/counting-css-counters-css-grid/)
+- [MDNの](https://developer.mozilla.org/)[CSS Counterを使用する](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+
+スタイリングが難しいものにアクセスできるのは素晴らしいことです。あなたが他の自動生成された要素のスタイルを設定したいかもしれません。`<details>`または検索入力のオートコンプリートインジケーターに不満を感じるかもしれません。これらはブラウザー間で同じように実装されていません。必要なものを共有するには、 [https：//webwewant.fyiで](https://webwewant.fyi)に欲しいものを作成することです。
diff --git a/src/site/content/ja/blog/css-masking/index.md b/src/site/content/ja/blog/css-masking/index.md
new file mode 100644
index 00000000000..6fbce2d275d
--- /dev/null
+++ b/src/site/content/ja/blog/css-masking/index.md
@@ -0,0 +1,127 @@
+---
+title: CSS の mask-image プロパティを使用して画像に効果を適用する
+subhead: CSS マスキングでは、画像をマスクレイヤーとして使用するオプションが提供されます。つまり、画像、SVG、またはグラデーションをマスクとして使用し、画像エディタなしで興味深い効果を作成することができます。
+description: CSS マスキングでは、画像をマスクレイヤーとして使用するオプションが提供されます。つまり、画像、SVG、またはグラデーションをマスクとして使用し、画像エディタなしで興味深い効果を作成することができます。
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: マスクをかぶったテディベア。
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+`clip-path` プロパティを使用して[要素をクリップする](/css-clipping)と、クリップされた領域が非表示になります。代わりに、画像の一部を不透明にしたり、他の効果を適用したりする場合は、マスキングを使用する必要があります。この記事では、マスクレイヤーとして使用する画像を指定できる [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) プロパティを使用する方法について説明します。これには、3つのオプションがあり、画像ファイル、SVG、またはグラデーションとしてマスクを使用できます。
+
+## ブラウザの互換性
+
+ほとんどのブラウザは、標準の CSS マスキングプロパティを部分的にしかサポートしていません。最高のブラウザ互換性を得るには、標準プロパティに加えて `-webkit-` 接頭辞を使用する必要があります。完全なブラウザサポート情報については、「[CSS マスクを使用できますか？](https://caniuse.com/#feat=css-masks)」をご覧ください。
+
+接頭辞付きのプロパティを使用してブラウザをサポートする方法は優れてはいますが、マスキングを使用して画像の上にテキストを表示する場合、マスキングが使用できない場合に何が起こるかを確認する必要があります。マスキングバージョンを追加する前に、`mask-image` または `-webkit-mask-image` サポートを検出する機能クエリを使用して、読み取り可能なフォールバックを提供することをお勧めします。
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* ここに mask-image を必要とするコードを挿入します。 */
+}
+```
+
+## 画像によるマスキング
+
+`mask-image` プロパティは `background-image`プロパティと同じように動作します。`url()` 値を使用して、画像を渡します。マスク画像には、透明または半透明の領域が必要です。
+
+完全に透明な領域の場合、その領域の下の画像の部分が見えなくなります。ただし、半透明の領域を使用すると、元の画像の一部が透けて見えます。この違いは以下の Glitch で確認できます。最初の画像は、マスクのない元の風船の画像です。2 番目の画像には、完全に透明な背景に白い星が付いたマスクが適用されています。3 番目の画像には、背景に白い星があり、透明度がグラデーションになっています。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+この例では、値に `cover` を指定した `mask-size` プロパティも使用しています。このプロパティは、 [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size) と同じように動作します。キーワードの `cover` と `contain` を使用するか、任意の有効な長さの単位、またはパーセンテージを使用して背景のサイズを指定することができます。
+
+小さな画像を繰り返しパターンとして使用するために、背景画像を繰り返すのと同じようにしてマスクを繰り返すこともできます。
+
+## SVG によるマスキング
+
+画像ファイルをマスクとして使用する代わりに、SVG を使用できます。これを実現する方法にはいくつかありますが、1 つ目は SVG 内に `<mask>` 要素を指定し、その要素の ID を `mask-image` プロパティで参照する方法です。
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balloons">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="SVG マスクの使用例", width="699", height="490" %}</figure>
+
+このアプローチの利点は、画像だけでなく、任意の HTML 要素にマスクを適用できることです。残念ながら、このアプローチは Firefox 以外でサポートされていません。
+
+ただし、すべてが失われるわけではなく、画像をマスキングする最も一般的なシナリオであれば、SVG に画像を含めることができます。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## グラデーションによるマスキング
+
+CSS グラデーションをマスクとして使用するのが、画像や SVG を作成する手間をかけずにマスク領域を実現できる洗練された方法です。
+
+単純な線形グラデーションをマスクとして使用すると、たとえば、画像の下部がキャプションに隠れて暗くなりすぎないようにすることができます。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+サポートされているグラデーションタイプのいずれかを好きなだけクリエイティブに使用することができます。この次の例では、放射状グラデーションを使用して、キャプションの背後を照らす円形マスクを作成します。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 複数のマスクを使用する
+
+背景画像と同様に、複数のマスクソースを指定し、それらを組み合わせて必要な効果を得ることができます。これは、CSS グラデーションで生成されるパターンをマスクとして使用する場合に特に便利です。これらは通常、複数の背景画像を使用するため、マスクに簡単に変換できます。
+
+例として、[この記事](https://cssgradient.io/blog/gradient-patterns/)で素敵なチェッカーボードパターンを見つけました。背景画像を使用したコードは、次のようになります。
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+これ、または背景画像用にデザインされた他のパターンをマスクに変換するには、`background-*` プロパティを、 `-webkit` 接頭辞付きのプロパティを含む関連する`mask` プロパティに置き換えます。
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+画像にグラデーションパターンを適用することで、非常に素晴らしい効果が得られます。Glitch をリミックスして、他のバリエーションをテストしてみてください。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+CSS マスクは、クリッピングに加えて、グラフィックアプリケーションを使用せずに画像やその他の HTML 要素に注意を引くことのできる方法です。
+
+*<span>写真提供: <a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a>（Unsplash）</span>。*
diff --git a/src/site/content/ja/blog/css-web-vitals/index.md b/src/site/content/ja/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..e099448acde
--- /dev/null
+++ b/src/site/content/ja/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: WebVitalsのCSS
+subhead: WebVitalsを最適化するためのCSS関連の手法
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: マルチカラーグラデーション
+description: この記事では、Web Vitalsを最適化するためのCSS関連の手法について説明します。
+tags:
+  - blog
+  - performance
+  - css
+---
+
+スタイルの記述方法とレイアウトの作成方法は、[Core Web Vitals](/learn-core-web-vitals/)に大きな影響を与える可能性があります。これは、[Cumulative Layout Shift (CLS)](/cls)と[Largest Contentful Paint (LCP)](/lcp)に特に当てはまります。
+
+この記事では、Web Vitalsを最適化するためのCSS関連の手法について説明します。これらの最適化はページのさまざまな要素 (レイアウト、画像、フォント、アニメーション、読み込み) によって分類されます。その中で、[サンプルページ](https://codepen.io/una/pen/vYyLKvY)の改良について探ります。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="サンプルサイトのスクリーンショット", width="800", height="646" %}
+
+## レイアウト
+
+### DOMへのコンテンツの挿入
+
+周囲のコンテンツがすでに読み込まれた後にコンテンツをページに挿入すると、ページの他の要素がすべて下に配置されます。これにより、[レイアウトシフト](/cls/#layout-shifts-in-detail)が発生します。
+
+[Cookieの通知](/cookie-notice-best-practices/)、特にページの上部に配置される通知は、この問題の一般的な例です。読み込み時にこのようなレイアウトシフトを引き起こすことが多い他のページ要素としては、広告と埋め込みがあります。
+
+#### 特定
+
+Lighthouseの「大きいレイアウトシフトの回避」監査は、シフトしたページ要素を特定します。このデモの結果は次のようになります。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Lighthouseの「大きいレイアウトシフトの回避」監査", width="800", height="500" %}
+
+Cookie通知自体は読み込み時にシフトしないため、Cookie通知はこれらの調査結果に記載されていません。通知の下にあるページの項目 (つまり、 `div.hero`と`article`) がシフトします。レイアウトシフトの特定と修正の詳細については、[レイアウトシフトのデバッグ](/debugging-layout-shifts)を参照してください。
+
+{% Aside %}
+
+Lighthouseは、「ページの読み込み」イベントまでのページのパフォーマンスのみを分析します。Cookieのバナー、広告、およびその他のウィジェットは、ページが読み込まれるまで読み込まれない場合があります。これらのレイアウトシフトは、Lighthouseによって警告されていなくても、ユーザーに影響します。
+
+{% endAside %}
+
+#### 修正
+
+絶対位置または固定位置を使用して、ページの下部にCookie通知を配置します。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="ページの下部に表示されるCookie通知", width="800", height="656" %}
+
+変更前
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+変更後
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+このレイアウトシフトを修正する別の方法は、画面上部のCookie通知用にスペースを予約することです。このアプローチも同様に効果的です。詳細については、 [Cookie通知のベストプラクティス](/cookie-notice-best-practices/)を参照してください。
+
+{% Aside %}
+
+Cookie通知は、読み込み時にレイアウトシフトをトリガーする複数のページ要素の1つです。これらのページ要素を詳しく確認できるように、以降のデモ手順にはCookieの通知が含まれていません。
+
+{% endAside %}
+
+## 画像
+
+### 画像とLargest Contentful Paint (LCP)
+
+通常、画像はページのLargest Contentful Paint (LCP) 要素です。[LCP要素になりうる他のページ要素](/lcp/#what-elements-are-considered)には、テキストブロックと動画ポスター画像が含まれます。 LCP要素が読み込まれる時間によってLCPが決まります。
+
+ページのLCP要素は、ページが最初に表示されたときにユーザーに表示されるコンテンツに応じて、ページの読み込みごとに異なる可能性があることに注意してください。たとえば、このデモでは、Cookie通知の背景、ヒーロー画像、および記事のテキストが、潜在的なLCP要素の一部です。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="さまざまなシナリオでページのLCP要素を強調表示した図。", width="800", height="498" %}
+
+サンプルサイトでは、Cookie通知の背景画像は実際には大きな画像です。 LCPを改善するには、画像を読み込んで効果を作成するのではなく、CSSでグラデーションをペイントすることができます。
+
+#### 修正
+
+画像ではなくCSSグラデーションを使用するように`.banner` CSSを変更します。
+
+前：
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+後：
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### 画像とレイアウトシフト
+
+画像が読み込まれると、ブラウザーで画像のサイズを決定できます。ページがレンダリングされた後に画像の読み込みが発生し、画像のスペースが予約されていない場合は、画像が表示されたときにレイアウトシフトが発生します。このデモでは、ヒーロー画像が読み込まれたときにレイアウトシフトが発生しています。
+
+{% Aside %}レイアウトシフトを引き起こす画像の現象は、画像の読み込みが遅い状況でよりはっきりとします。たとえば、接続が遅い場合や、ファイルサイズが特に大きい画像を読み込む場合などです。 {% endAside %}
+
+#### 特定
+
+明示的な`width`と`height`ない画像を特定するために、Lighthouseの「画像要素に明示的な幅と高さがある」監査を使用します。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Lighthouseの「画像要素に明示的な幅と高さがある」監査", width="800", height="274" %}
+
+この例では、ヒーロー画像と記事画像のいずれにも`width`と`height`属性がありません。
+
+#### 修正
+
+レイアウトシフトを避けるために、これらの画像に`width`と`height`属性を設定します。
+
+変更前
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
+```
+
+変更後
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4" %}<figcaption>これで、レイアウトシフトが発生せずに画像が読み込まれます。</figcaption></figure>
+
+{% Aside %}画像を読み込む別のアプローチは、`width`および`height`属性を指定するとともに、[`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)および[`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)属性を使用することです。これには、さまざまなサイズの画像をさまざまなデバイスに提供できるというパフォーマンス上の利点があります。詳細については、[レスポンシブ画像の提供](/serve-responsive-images/)を参照してください。 {% endAside %}
+
+## フォント
+
+フォントはテキストのレンダリングを遅らせ、レイアウトシフトを引き起こす可能性があります。結果として、フォントを迅速に提供することが重要です。
+
+### 遅延テキストレンダリング
+
+デフォルトでは、関連付けられたWebフォントがまだ読み込まれていない場合、ブラウザーではテキスト要素がすぐにレンダリングされません。[これは、「スタイルなしテキストのフラッシュ」(FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) を防ぐために行われます。多くの場合、これにより[First Contentful Paint (FCP) が](/fcp)遅延します。状況によっては、Largest Contentful Paint (LCP) も遅延します。
+
+{% Aside %}
+
+デフォルトでは、ChromiumベースおよびFirefoxブラウザーでは、関連付けられたWebフォントが読み込まれていない場合、[最大3秒間テキストレンダリングをブロック](https://developers.google.com/web/updates/2016/02/font-display)します。Safariはテキストのレンダリングを無期限にブロックします。[ブロック期間](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline)は、ブラウザーがWebフォントを要求した時点から始まります。ブロック期間の終わりまでにフォントがまだ読み込まれていない場合、ブラウザーはフォールバックフォントを使用してテキストをレンダリングし、使用可能になった時点でWebフォントと入れ替えます。
+
+{% endAside %}
+
+### レイアウトシフト
+
+フォントスワップは、ユーザーにコンテンツをすばやく表示する点で優れていますが、レイアウトシフトが発生する可能性があります。これらのレイアウトシフトは、Webフォントとそのフォールバックフォントがページ上で異なる量のスペースを占める場合に発生します。類似した比率のフォントを使用すると、これらのレイアウトシフトのサイズを最小限に抑えることができます。
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="フォントスワップによるレイアウトシフトを示す図", width="800", height="452" %} <figcaption>この例では、フォントスワップにより、ページ要素が5ピクセル上にシフトしました。</figcaption></figure>
+
+#### 特定
+
+特定のページに読み込まれているフォントを確認するには、DevToolsの [**ネットワーク****] タブを開き、フォント**でフィルタリングします。フォントは大きなファイルになる可能性があるため、通常、使用するフォントの数を減らす方がパフォーマンスが向上します。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="DevToolsに表示されるフォントのスクリーンショット", width="800", height="252" %}
+
+フォントが要求されるまでにかかる時間を確認するには、[**タイミング**] タブをクリックします。フォントが要求されるのが早いほど、早い段階でフォントを読み込んで使用できます。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="DevToolsの [タイミング] タブのスクリーンショット", width="800", height="340" %}
+
+フォントの要求チェーンを表示するには、[**イニシエーター**] タブをクリックします。一般的に、要求チェーンが短いほど、フォントを早く要求できます。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="DevToolsの [イニシエーター] タブのスクリーンショット", width="800", height="189" %}
+
+#### 修正
+
+このデモでは、Google Fonts APIを使用しています。oogle Fontsには、`<link>`タグまたは`@import`ステートメントを使用してフォントを読み込むオプションがあります。`<link>`コードスニペットには、`preconnect`リソースヒントが含まれています。`@import`バージョンを使用するよりもスタイルシートの配信が速くなります。
+
+概念としては、[リソースヒント](https://www.w3.org/TR/resource-hints/#resource-hints)は、特定の接続を設定したり、特定のリソースをダウンロードしたりする必要があることをブラウザーに示す方法と考えることができます。その結果、ブラウザーはこれらのアクションを優先します。リソースヒントを使用するときには、特定のアクションに優先順位を付けると、他のアクションからブラウザーリソースが奪われることに注意してください。したがって、リソースのヒントは、すべてに設定するのではなく、慎重に使用する必要があります。詳細については、[ネットワーク接続を早期に確立して、認知されるページ速度を向上させる](/preconnect-and-dns-prefetch/)を参照してください。
+
+次の`@import`ステートメントをスタイルシートから削除します。
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+`<link>`タグをドキュメントの`<head>`に追加します。
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+これらのlinkタグは、Google Fontsが使用するオリジンへの早期接続を確立し、MontserratとRobotoのフォント宣言を含むスタイルシートを読み込むようにブラウザーに指示します。これらの`<link>`タグは、できるだけ早く`<head>`に配置する必要があります。
+
+{% Aside %}
+
+Google Fontsからフォントのサブセットのみを読み込むには、[`?text=`](https://developers.google.com/fonts/docs/getting_started) APIパラメーターを追加します。たとえば、`?text=ABC`は、「ABC」のレンダリングに必要な文字のみを読み込みます。これは、フォントのファイルサイズを小さくするための良い方法です。
+
+{% endAside %}
+
+## アニメーション
+
+アニメーションがWeb Vitalsに影響する主な方法は、アニメーションがレイアウトシフトを引き起こす場合です。[レイアウトをトリガーするアニメーション](/animations-guide/#triggers)と、ページ要素を移動する「アニメーションのような」効果があるアニメーションの2種類のアニメーションは、使用することを避けるようお勧めします。通常、これらのアニメーションは、[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)、[`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity)、[`filter`](https://developer.mozilla.org/docs/Web/CSS/filter)などのCSSプロパティを使用して、よりパフォーマンスの高い同等のアニメーションに置き換えることができます。詳細については、[高パフォーマンスCSSアニメーションを作成する方法](/animations/)を参照してください。
+
+### 特定
+
+灯台の「合成されていないアニメーションを避ける」監査は、パフォーマンスの低いアニメーションを特定するのに役立つ場合があります。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Lighthouseの「合成されていないアニメーションの回避」監査", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+Lighthouseの「合成されていないアニメーションの回避」監査では、パフォーマンスの低い*CSSアニメーション*のみが識別されます。JavaScriptベースのアニメーション (たとえば、[`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) を使用した要素の「アニメーション化」) はパフォーマンスに悪影響を及ぼしますが、この監査では警告されません。
+
+{% endAside %}
+
+### 修正
+
+`slideIn`アニメーションシーケンスを変更して`margin-left`プロパティを遷移させるのではなく、 `transform: translateX()`
+
+変更前
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+変更後
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## 重要なCSS
+
+スタイルシートはレンダリングをブロックしています。つまり、ブラウザーがスタイルシートを検出し、ブラウザーがスタイルシートをダウンロードして解析するまでは、ブラウザーで他のリソースのダウンロードが停止します。これにより、LCPが遅延する可能性があります。パフォーマンスを向上させるには、[未使用のCSSを削除し](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/)、[重要なCSSをインライン化{/a1し、](/extract-critical-css/)[重要で}ないCSSを延期](/defer-non-critical-css/#optimize)することを検討してください。
+
+## まとめ
+
+さらなる改善の余地はまだありますが (たとえば、[画像圧縮](/use-imagemin-to-compress-images/)を使用して画像をより迅速に配信する)、これらの変更により、このサイトのWeb Vitalsが大幅に改善されました。これが実際のサイトである場合、次のステップは、[実際のユーザーからパフォーマンスデータを収集](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data)して、[ほとんどのユーザーのWeb Vitalsのしきい値を満たしている](/vitals-measurement-getting-started/#data-interpretation)かどうかを評価することです。Web Vitalsの詳細については、[Web Vitalsの詳細](/learn-core-web-vitals/)を参照してください。
diff --git a/src/site/content/ja/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/ja/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..66f5f4450ae
--- /dev/null
+++ b/src/site/content/ja/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Core Web Vitals の指標のしきい値の定義
+subhead: Core Web Vitals のしきい値の背後にある調査と方法論
+authors:
+  - bmcquade
+description: Core Web Vitals のしきい値の根拠となる調査および方法論
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Core Web Vitals のしきい値の根拠となる調査および方法論
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Core Web Vitals](/vitals/#core-web-vitals) は、Web 上で実際にユーザーが体験するユーザー エクスペリエンスに関する重要な観点の測定を目的とした一連のフィールド指標です。Core Web Vitals には指標と各指標のターゲットとなるしきい値が含まれており、これらを参考にすることで、運営するサイトでのユーザー体験が "良い"、"改善が必要"、"悪い" のいずれの状態にあるかを開発者が定性的に理解できるようになります。この投稿では、Core Web Vitals の指標のしきい値の選択に一般的に使用されるアプローチと、Core Web Vitals の指標それぞれのしきい値がどのように選択されたかについて説明します。
+
+## Core Web Vitals の指標およびしきい値についての復習
+
+2020 年時点で Core Web Vitals は、Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP)、First Input Delay (初回入力までの遅延時間、FID)、Cumulative Layout Shift (累積レイアウト シフト数、CLS) という 3 つの指標により構成されています。それぞれの指標は、ユーザー エクスペリエンスに関する様々な観点を測定します。LCP は、ページの読み込みタイムラインにおいてページのメイン コンテンツの読み込みが完了したと思われる時点を示し、知覚される読み込み速度を測定するための指標です。FID は、応答性を測定し、ユーザーがページで初めて操作を試みるときに感じるエクスペリエンスを数値化するための指標です。CLS は、視覚的な安定性を測定し、表示されているページ コンテンツの予期しないレイアウト シフトの量を数値化するための指標です。
+
+それぞれの Core Web Vitals 指標には、パフォーマンスを"良い"、"改善が必要"、"悪い" のいずれかへと分類するしきい値が関連付けられています。
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Largest Contentful Paint のしきい値に関する推奨事項", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="First Input Delay のしきい値に関する推奨事項", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Cumulative Layout Shift のしきい値に関する推奨事項", width="400", height="350" %}
+</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>良い</th>
+      <th>悪い</th>
+      <th>パーセンタイル</th>
+    </tr>
+    <tr>
+      <td>Largest Contentful Paint</td>
+      <td>≤2500ms</td>
+      <td>4000 ミリ秒より大きい</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>First Input Delay</td>
+      <td>100 ミリ秒以下</td>
+      <td>300 ミリ秒より大きい</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>Cumulative Layout Shift</td>
+      <td>≤0.1</td>
+      <td>0.25 より大きい</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">加えて、あるページやサイトの全体的なパフォーマンスを分類するために、そのページやサイトの全ページ ビューの 75 パーセンタイル値を使用します。つまり、あるサイトのページ ビューの 75% 以上が "良い" に該当するしきい値を満たしていれば、そのサイトはその指標について "良い" パフォーマンスを維持しているとして分類されます。逆に、ページ ビューの少なくとも 25% が "悪い" に該当するしきい値を満たしていれば、そのサイトは "悪い" パフォーマンスを維持しているとして分類されます。たとえば、75 パーセンタイルの LCP が 2 秒の場合には "良い" として分類され、75 パーセンタイルの LCP が 5 秒の場合には "悪い" として分類されます。</p>
+<h2 data-md-type="header" data-md-header-level="2">Core Web Vitals の指標のしきい値の基準</h2>
+<p data-md-type="paragraph">Core Web Vitals 指標のしきい値を設定する際には、まずそれぞれのしきい値が満たすべき基準を特定しました。以下では、2020 年の Core Web Vitals 指標のしきい値を評価するために Google が使用した基準について説明します。以降のセクションでは、2020 年の各指標のしきい値を選択するためにこれらの基準がどのように適用されたかについて、より詳しく説明します。将来的には、Web 上での優れたユーザー エクスペリエンスを測定する能力をさらに向上させるために、基準やしきい値の改善および追加を行う予定です。</p>
+<h3 data-md-type="header" data-md-header-level="3">質の高いユーザー エクスペリエンス</h3>
+<p data-md-type="paragraph">私たちの第一の目標は、ユーザーおよびそのユーザー体験の質の最適化です。そのため、Core Web Vitals の "良い" の基準を満たしているページが質の高いユーザー エクスペリエンスを確実に提供することを目指しています。</p>
+<p data-md-type="paragraph">質の高いユーザー エクスペリエンスに関連のあるしきい値を特定するために、私たちは人間の知覚と HCI に関する研究に着目しました。こういった研究については、固定された単一のしきい値を用いてまとめられる場合もありますが、基礎的な研究は通常ある程度の範囲を持った値によって表現されます。たとえば、ユーザーが集中力を失うまでの時間を 1 秒と表現する場合がありますが、実際には数百ミリ秒から数秒に渡る範囲によって表現されています。知覚のしきい値はユーザーやコンテキストによって異なるという事実は、匿名化された Chrome の指標データの集計結果によっても裏付けられています。このデータによれば、ユーザーがページの読み込みを中止するまでに Web ページのコンテンツ表示を待っていた時間は、1 つのパターンのみではありませんでした。むしろこのデータは、滑らかで連続的な分布を示していたのです。人間の知覚のしきい値と関連する HCI に関する研究については、「<a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">Web Vitals の根拠となる科学</a>」を参照してください。</p>
+<p data-md-type="paragraph">ある指標について関連するユーザー エクスペリエンス調査が利用可能であり、文献で示されている値の範囲について妥当なコンセンサスが得られている場合には、この範囲を入力値として使用してしきい値の選択プロセスを進めます。また、Cumulative Layout Shift のような新しい指標について、関連するユーザー エクスペリエンス調査が利用不可能な場合には、その代替として、ある指標に関して異なるしきい値の候補を満たしている実際のページを評価し、良好なユーザー エクスペリエンスをもたらすしきい値を特定します。</p>
+<h3 data-md-type="header" data-md-header-level="3">既存の Web コンテンツで達成可能</h3>
+<p data-md-type="paragraph">さらに、サイトの所有者が "良い" しきい値を満たすサイトの最適化を達成できるように、Web 上にある既存のコンテンツでこのしきい値が達成可能であることが求められます。たとえば、0 ミリ秒は LCP に関して理想的な "良い" しきい値であり、結果的に瞬時に読み込みが行われるはずですが、0 ミリ秒というしきい値は、ネットワークやデバイスの処理の遅延を利用として、ほとんどの場合において現実的には達成が不可能です。したがって、0 ミリ秒という値は、Core Web Vitals に含まれる LCP の "良い" しきい値としては妥当ではありません。</p>
+<p data-md-type="paragraph">Core Web Vitals の "良い" しきい値の候補を評価する際には、<a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Chrome User Experience Report</a> (CrUX) のデータに基づいてそのしきい値が達成可能かどうかを検証します。あるしきい値が達成可能であることを確認するには、少なくとも<a href="/same-site-same-origin/#origin" data-md-type="link">オリジン</a>の 10% が現時点で "良い" しきい値を満たしていることが求められます。また、最適化されたサイトがフィールド データのばらつきによって誤って分類されてしまわないように、最適化されたコンテンツが "良い" しきい値を一貫して満たしているかどうかについても確認します。</p>
+<p data-md-type="paragraph">逆に、少数のオリジンのみが現時点で満たすことができていないパフォーマンス レベルを特定することにより、"悪い" しきい値を確立します。"悪い" しきい値の定義に関連する研究がない限りは、最もパフォーマンスの悪い 10% から 30% のオリジンがデフォルトで "悪い" として分類されます。</p>
+<h3 data-md-type="header" data-md-header-level="3">基準についての最終的な見解</h3>
+<p data-md-type="paragraph">候補となるしきい値を評価していくと、しきい値が互いに矛盾している場合が散見されました。たとえば、しきい値が一貫して達成が可能であることと、しきい値が一貫して良好なユーザー エクスペリエンスを確保することは、緊張関係にあります。また、人間の知覚に関する研究では一般的に値が範囲で提供されており、ユーザーの行動指標においては行動に緩やかな変化が見られることから、指標における "正しい" しきい値が 1 つではない場合が多いことが分かりました。このように、2020 年の Core Web Vitals では、完璧なしきい値というものは存在せず、時には複数の合理的なしきい値の候補の中から選択する必要があることを認識しつつ、上記の基準に最もよく適合する値を選択するというアプローチを取っています。「完璧なしきい値とは？」という問いではなく、「どれが私たちの基準に最もよく当てはまるしきい値の候補なのか？」という問いに焦点を当てました。</p>
+<h2 data-md-type="header" data-md-header-level="2">パーセンタイルの選択</h2>
+<p data-md-type="paragraph">先に述べたとおり、ページやサイトの総合的なパフォーマンスの分類には、そのページやサイトの全訪問者数の 75 パーセンタイルという値が使用されています。75 パーセンタイルという値は、次の 2 つの基準に基づいて選択されています。1 つ目の基準は、このパーセンタイルが、ページやサイトの訪問者の大多数が目標とするレベルのパフォーマンスを体験できることを確約するものでなければならないということです。そして 2 つ目の基準は、選択したパーセンタイルの値が外れ値による影響を受けすぎないということです。</p>
+<p data-md-type="paragraph">これらの目標は、お互いにやや相反する部分があります。1 つ目の目標を達成するには、一般的にパーセンタイルが高ければ高いほど良い結果となります。しかしながら、パーセンタイルが高くなるにつれて結果的に得られる値が外れ値の影響を受ける可能性も高くなります。あるサイトに対する少数の訪問が、ネットワーク接続がたまたま不安定であったために過剰に大きい LCP サンプルとなってしまった場合、サイトの分類がこういった外れ値のサンプルによって決定されてしまうことは避けたいものです。たとえば、訪問数が 100 回となるサイトのパフォーマンスを 95 などの高いパーセンタイル値を用いて評価する場合、95 というパーセンタイル値が外れ値による影響を受けるために必要な外れ値のサンプル数は、たったの 5 つです。</p>
+<p data-md-type="paragraph">これらの目標については多少相反する部分があるのですが、分析の結果、75 パーセンタイルが妥当なバランスであるという結論に至りました。75 パーセンタイルという値を使用することにより、ほとんどのサイト訪問者 (4 人中 3 人) が目標とするレベル以上のパフォーマンスを体験できたことが分かったのです。また、75 パーセンタイルという値は、外れ値による影響を受けにくくなっています。例に戻って見てみると、訪問数が 100 回となるサイトでは、75 というパーセンタイルの値が外れ値の影響を受けるため必要な外れ値のサンプル数は、25 です。100 件のサンプルのうち 25 件が外れ値となる可能性がありますが、95 パーセンタイルの場合に比べると確率ははるかに低くなります。</p>
+<h2 data-md-type="header" data-md-header-level="2">Largest Contentful Paint</h2>
+<h3 data-md-type="header" data-md-header-level="3">ユーザー体験の質</h3>
+<p data-md-type="paragraph">ユーザーがタスクに集中できなくなるまでの時間として "1秒" という数字がよく挙げられます。しかしながら、関連する調査を詳しく調べてみると、1 秒というのはおおよそ数百ミリ秒から数秒までの値の範囲を示す近似値であることが分かりました。</p>
+<p data-md-type="paragraph">1 秒のしきい値については、<a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">Card など</a>および <a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">Miller</a> による 2 つの論文がよく引用されています。Card は、Newell の「<a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">認知の統一理論</a>」を引用して、1 秒という "即時反応" のしきい値を定義しています。Newell は、即時反応を「ある刺激に対して<em data-md-type="emphasis">約 1 秒</em> (つまり、おおよそ 0.3 秒から 3 秒) 以内に行われる必要がある反応」として説明しています。これは、Newell の "認知についてのリアルタイムの制約" の議論に続くもので、「認知的考察を喚起するような環境との相互作用は、おおよそ 0.5 秒から 2-3 秒の範囲内で行われる」と述べています。また、1 秒というしきい値に関するもう 1 つの一般的な引用元に挙げられている Miller は、「反応の遅れが 2 秒を超え、さらに 1 秒程度延長される可能性がある場合、人間が機械コミュニケーションを使用して行うことのできるタスクは、その性格を大きく変えるだろう」と述べています。</p>
+<p data-md-type="paragraph">Miller および Card の研究では、ユーザーが集中力を失うまでの待ち時間がおおよそ 0.3 秒から 3 秒の範囲であることを記述しており、LCP の "良い" しきい値がこの範囲内に含まれるべきであることを示唆しています。また、既存の First Contentful Paint (視覚コンテンツの初期表示時間、FCP) の "良い" しきい値が 1 秒であり、Largest Contentful Paint が通常 First Contentful Paint の後に発生することを考慮し、LCP のしきい値の候補の範囲を 1 秒から 3 秒へとさらに制限しています。この範囲内で最も基準に適合するしきい値を選択するために、以下ではこれらのしきい値の候補の達成可能性について見ていきます。</p>
+<h3 data-md-type="header" data-md-header-level="3">達成可能性</h3>
+<p data-md-type="paragraph">CrUX のデータを使用することで、候補となる LCP の "良い" しきい値を満たす Web 上のオリジンのパーセンテージを決定することができます。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">(候補となる LCP のしきい値について) "良い" に分類された CrUX のオリジンのパーセンテージ</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1 秒</th>
+      <th>1.5 秒</th>
+      <th>2 秒</th>
+      <th>2.5 秒</th>
+      <th>3 秒</th>
+    </tr>
+    <tr>
+      <td><strong>スマートフォン</strong></td>
+      <td>3.5%</td>
+      <td>13％</td>
+      <td>27％</td>
+      <td>42％</td>
+      <td>55％</td>
+    </tr>
+    <tr>
+      <td><strong>デスクトップ</strong></td>
+      <td>6.9％</td>
+      <td>19％</td>
+      <td>36％</td>
+      <td>51％</td>
+      <td>64％</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">1 秒のしきい値を満たしているオリジンは 10% 未満ですが、1.5 秒から 3 秒までの他のしきい値を見てみると、少なくとも 10% のオリジンが "良い" しきい値を満たしているという条件に適合しており、したがって、これらは有効な候補であると言えます。</p>
+<p data-md-type="paragraph">加えて、最適化されているサイトが一貫して達成することができるしきい値を確実に選択するために、Web 全体においてパフォーマンスが上位に数えられるサイトの LCP パフォーマンスを分析し、これらのサイトにおいて一貫して達成が可能となるしきい値の決定を行う必要がありました。具体的には、パフォーマンスの高いサイトの 75 パーセンタイルにおいて一貫して達成が可能なしきい値の特定を目標としました。その結果として、1.5 秒や 2 秒のしきい値については一貫して達成することができないものの、2.5 秒であれば一貫して達成可能であることが分かりました。</p>
+<p data-md-type="paragraph">LCP の "悪い" しきい値の特定には CrUX のデータを使用し、ほぼすべてのオリジンが満たすしきい値を特定しました。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">(候補となる LCP のしきい値について) "悪い" に分類された CrUX のオリジンのパーセンテージ</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3 秒</th>
+      <th>3.5 秒</th>
+      <th>4 秒</th>
+      <th>4.5 秒</th>
+      <th>5 秒</th>
+    </tr>
+    <tr>
+      <td><strong>スマートフォン</strong></td>
+      <td>45％</td>
+      <td>35％</td>
+      <td>26％</td>
+      <td>20％</td>
+      <td>15％</td>
+    </tr>
+    <tr>
+      <td><strong>デスクトップ</strong></td>
+      <td>36％</td>
+      <td>26％</td>
+      <td>19％</td>
+      <td>14％</td>
+      <td>10％</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">4 秒のしきい値では、スマートフォンからのアクセスの約 26%、デスクトップからのアクセスの約 21％ が "悪い" として分類されています。これは、Google が目標としている 10% から 30％ の範囲に含まれているため、4 秒というしきい値は "悪い" しきい値として許容範囲内であると結論付けました。</p>
+<p data-md-type="paragraph">このように、Largest Contentful Paint については 2.5 秒が "良い" しきい値として妥当であり、4 秒が "悪い" しきい値として妥当であるとして結論付けました。</p>
+<h2 data-md-type="header" data-md-header-level="2">First Input Delay</h2>
+<h3 data-md-type="header" data-md-header-level="3">ユーザー体験の質</h3>
+<p data-md-type="paragraph">研究によれば、100 ミリ秒程度までの視覚的なフィードバックの遅延は、ユーザーによる入力などといった関連するソースによって引き起こされたものであるとして認識されるという結論が合理的な一貫性を持っています。このことから、First Input Delay の "良い" しきい値の最低基準として、100 ミリ秒という値が適切であると考えられます。入力処理の遅延が 100 ミリ秒を超えてくると、他の処理やレンダリングなどのステップが間に合わなくなってしまうのです。</p>
+<p data-md-type="paragraph">よく引用される Jakob Nielsen の「<a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">応答時間: ３つの重要な限界値</a>」では、システムが瞬時に応答しているとユーザーに感じさせるための限界値を 0.1 秒と定義しています。Nielsen は Miller と Card の研究を引用し、Card は Michotte による「<a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">因果関係の知覚</a>」(1962) を引用しています。Michotte の研究では、実験参加者に対してスクリーンに映った 2 つの物体を見せます。物体 A は 物体 B に向かって移動を開始し、物体 B に接触した瞬間に停止し、その後物体 B は移動を開始して物体 A から離れていきます。そして Michotte は、物体 A の動作が停止してから物体 B が動作を開始するまでの時間の間隔を変化させていきます。およそ 100 ミリ秒までの遅延では、物体 A が物体 B の動作を引き起こしているという印象を受けます。およそ 100 ミリ秒から 200 ミリ秒までの遅延では因果関係の知覚は混在し、200 ミリ秒以上の遅延では、物体 B の動作はもはや物体 A によって引き起こされたものではないと考えられます。</p>
+<p data-md-type="paragraph">同様に、Miller は "制御装置の起動に対する応答" についての応答のしきい値を「一般的にキーやスイッチなどを含む制御装置の物理的な起動を示す動作によって表現される操作の現れ」と定義し、「この応答は、(中略) 操作者によって引き起こされる機械的な動作の一部として知覚される必要があり、遅延時間は 0.1 秒以下にとどめる必要がある」と述べています。その後、「キーを押下してから視覚的なフィードバックを得るまでの遅延は、0.1 秒から 0.2 秒以下にとどめる必要がある」とも述べています。</p>
+<p data-md-type="paragraph">さらに最近では、Kaaresoja らが「<a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">時間的に完璧な仮想的なボタンへ向けて</a>」の中で、タッチスクリーンに表示された仮想的なボタンをタッチすることと、ボタンがタッチされたことを後から示す視覚的なフィードバックの同時性の知覚に関して、さまざまな遅延に関する調査を実施しています。ボタンを押してから視覚的なフィードバックが得られるまでの 遅延が 85 ミリ秒以下となる場合、参加者は 75% の割合でボタンを押したと同時に視覚的なフィードバックが得られたと回答しました。また、遅延時間が 100 ミリ秒以下となる場合には、参加者はボタン押下の知覚品質が一貫して高いと回答しましたが、100 ミリ秒から 150 ミリ秒の遅延時間では知覚品質は低下し、300 ミリ秒では非常に低いレベルにまで達しました。</p>
+<p data-md-type="paragraph">以上のことから、調査の結果として Web Vitals の 1 つである First Input Delay のしきい値としては、100 ミリ秒前後の値が適切であると結論付けられました。また、300 ミリ秒以上の遅延についてユーザーが低品質であるとして報告していることから、"悪い" しきい値としては 300 ミリ秒が妥当であると判断しました。</p>
+<h3 data-md-type="header" data-md-header-level="3">達成可能性</h3>
+<p data-md-type="paragraph">CrUX のデータを使用し、Web 上のオリジンの大多数 (75 パーセンタイル) が 100 ミリ秒という FID の "良い" しきい値を満たしていることを特定しました。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">(100 ミリ秒という FID のしきい値について) "良い" に分類された CrUX のオリジンのパーセンテージ</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100 ミリ秒</th>
+    </tr>
+    <tr>
+      <td><strong>スマートフォン</strong></td>
+      <td>78％</td>
+    </tr>
+    <tr>
+      <td><strong>デスクトップ</strong></td>
+      <td>99％ より大きい</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">また、Web 上における上位のサイトの 75 パーセンタイルがこのしきい値を常に満たすことができる (95 パーセンタイルが満たしている場合も多い) ことが確認できました。</p>
+<p data-md-type="paragraph">以上のことから、FID のしきい値については、100 ミリ秒が "良い" しきい値として妥当であることが結論付けられました。</p>
+<h2 data-md-type="header" data-md-header-level="2">Cumulative Layout Shift</h2>
+<h3 data-md-type="header" data-md-header-level="3">ユーザー体験の質</h3>
+<p data-md-type="paragraph">Cumulative Layout Shift (CLS) は、ページに表示されているコンテンツがどの程度移動するかを測定するための新しい指標です。CLS は新しい指標であるため、この指標での理想的なしきい値を直接的に知ることができるような研究はありません。そこで、ユーザーの期待に沿ったしきい値を特定するために、レイアウト シフトの大きさが様々に異なる実際のページを評価し、ページ コンテンツの消費に大きな混乱をもたらすことのない、許容範囲内として考えられる最大のレイアウト シフトの大きさを決定しました。Google の社内テストでは、0.15 を超えるレイアウト シフトは一貫して不快に感じられ、0.1 以下のレイアウト シフトは目立ちはするものの、過剰に不快に感じられるものではないことが明らかになりました。したがって、レイアウト シフトが発生しない場合が理想ではありますが、0.1 までの値であれば、"良い" CLS のしきい値の候補になると結論付けました。</p>
+<h3 data-md-type="header" data-md-header-level="3">達成可能性</h3>
+<p data-md-type="paragraph">CrUX のデータによると、オリジン全体の約 50％ において CLS が 0.05 以下となっていることがわかりました。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">「良好」として分類されたCrUXオリジンの割合（候補CLSしきい値の場合）</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.05</th>
+      <th>0.1</th>
+      <th>0.15</th>
+    </tr>
+    <tr>
+      <td><strong>スマートフォン</strong></td>
+      <td>49％</td>
+      <td>60％</td>
+      <td>69％</td>
+    </tr>
+    <tr>
+      <td><strong>デスクトップ</strong></td>
+      <td>42％</td>
+      <td>59％</td>
+      <td>69％</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">CrUX のデータは 0.05 が CLS の "良い" しきい値として妥当であることを示唆していますが、現在は混乱をもたらすようなレイアウト シフトの回避が困難となるユース ケースが存在することも認識しています。たとえば、ソーシャルメディアの埋め込みなどを含むサードパーティ製の埋め込みコンテンツでは、埋め込まれているコンテンツの高さが読み込みが完了するまで分からないという場合もあり、その場合には 0.05 よりも大きいレイアウト シフトが発生してしまう可能性があります。このように、0.05 という CLS のしきい値を多くのオリジンが満たしてはいるものの、しきい値を 0.1 と多少緩めに設定することでユーザー体験の質と達成可能性のバランスを取ることができると結論付けました。Web の世界のエコシステムが機能することでサードパーティ製の埋め込みコンテンツによるレイアウト シフトへの対処方法が今後特定され、将来的な Core Web Vitals のバージョンにおいてより厳格な CLSの "良い" しきい値である 0.05 や 0 を使用できるようになることを期待しています。</p>
+<p data-md-type="paragraph">加えて、CLS の "悪い" しきい値を決定するために、CrUX のデータを使用して大半のオリジンが満たしているしきい値を特定しました。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">(候補となる CLS のしきい値について) "悪い" に分類された CrUX のオリジンのパーセンテージ</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.15</th>
+      <th>0.2</th>
+      <th>0.25</th>
+      <th>0.3</th>
+    </tr>
+    <tr>
+      <td><strong>スマートフォン</strong></td>
+      <td>31％</td>
+      <td>25％</td>
+      <td>20％</td>
+      <td>18％</td>
+    </tr>
+    <tr>
+      <td><strong>デスクトップ</strong></td>
+      <td>31％</td>
+      <td>23％</td>
+      <td>18％</td>
+      <td>16％</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">0.25 のしきい値では、スマートフォンからのアクセスの約 20%、デスクトップからのアクセスの約 18％ が "悪い" として分類されています。これは、Google が目標としている 10% から 30％ の範囲に含まれているため、0.25 というしきい値は "悪い" しきい値として許容範囲内であると結論付けました。</p>
diff --git a/src/site/content/ja/blog/drag-and-drop/index.md b/src/site/content/ja/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..9327d5f32a0
--- /dev/null
+++ b/src/site/content/ja/blog/drag-and-drop/index.md
@@ -0,0 +1,259 @@
+---
+title: HTML5 Drag and Drop APIの使用
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: |2-
+
+  HTML5 Drag and Drop (DnD) APIを使うということは、ページ上のほぼすべての要素をドラッグ可能にできるということです。本記事では、ドラッグ & ドロップの基礎について説明します。
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+HTML5 Drag and Drop (DnD) APIを使うということは、ページ上のほぼすべての要素をドラッグ可能にできるということです。本記事では、ドラッグ &amp; ドロップの基礎について説明します。
+
+## ドラッグ可能なコンテンツの作成
+
+ほとんどのブラウザで、テキストの選択、画像、リンクがデフォルトでドラッグ可能になっていることは注目に値するでしょう。たとえば、[Google検索で](https://google.com)Googleロゴをドラッグすると、ゴースト画像が表示されます。次に、画像をアドレスバー、 `<input type="file" />`要素、またはデスクトップにドロップできます。他のタイプのコンテンツをドラッグ可能にするには、HTML5 DnD APIを使用する必要があります。
+
+オブジェクトをドラッグ可能にするには、その要素に対して`draggable=true`と設定します。画像、ファイル、リンク、またはページ上のマークアップなど、ほぼすべてのものをドラッグ可能にできます。
+
+この例では、CSSグリッドでレイアウトされたいくつかの列を再配置するためのインターフェイスを作成しています。私の列の基本的なマークアップは次のようになり、各列で`draggable`が`true`に設定されています。
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+こちらは私のコンテナ要素とボックス要素のCSSです。DnD 機能に関連するCSSは、[`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor)プロパティのみであることに注目してください。コードの残りの部分は、コンテナとボックス要素のレイアウトとスタイルを制御しています。
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+この時点で、アイテムをドラッグできることがわかりますが、他には何も起こりません。 DnD機能を追加するには、JavaScript APIを使用する必要があります。
+
+## ドラッグイベントをリッスンする
+
+ドラッグ &amp; ドロップのプロセス全体を監視する目的でアタッチするイベントは多岐に渡ります。
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+DnDフローを処理するには、ある種のソース要素（ドラッグが発生する場所）、データペイロード（ドロップしようとしているもの）、およびターゲット（ドロップをキャッチする領域）が必要です。ソース要素には、画像、リスト、リンク、ファイルオブジェクト、HTMLのブロックなどがあります。ターゲットは、ユーザーがドロップしようとしているデータを受け入れるドロップゾーン（または一連のドロップゾーン）です。すべての要素をターゲットにできるわけではないことに注意してください。たとえば、画像はターゲットにできません。
+
+## ドラッグ &amp; ドロップシーケンスの開始と終了
+
+コンテンツに対して`draggable="true"`属性を定義したら、`dragstart`イベントハンドラーをアタッチして、各列のDnDシーケンスを開始します。
+
+このコードは、ユーザーが列をドラッグし始めたときに列の不透明度を40％に設定し、ドラッグイベントが終了したときに100％に戻します。
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+結果は、下のGlitchデモで確認できます。アイテムをドラッグすると不透明になります。`dragstart`イベントのターゲットはソース要素であるため、`this.style.opacity`を40％に設定すると、移動されているのが現在選択している要素であるという視覚的なフィードバックがユーザーに与えられます。アイテムをドロップすると、ドロップ機能は適用されませんが、ソース要素の不透明度は100%に戻ります。
+
+{% Glitch { id: 'simple-drag-and-drop-1', path: 'style.css' } %}
+
+## `dragenter` 、 `dragover` 、`dragleave`を使用して視覚的な手がかりを追加する
+
+インターフェースの操作方法を理解しやすくするために、 3つのイベントハンドラー `dragenter` 、`dragover` 、`dragleave`を使用します。この例の列は、ドラッグ可能であることに加えて、ドロップターゲットでもあります。ユーザーがこれを理解しやすいように、ドラッグしたアイテムを列の上に移動させたとたんに境界線が破線に変わるようにすると良いでしょう。たとえば、CSSで、ドロップターゲットである要素を表すには、`over`クラスを作成することをおすすめします。
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+次に、JavaScriptでイベントハンドラーを設定し、列がドラッグされるときに`over`クラスを追加し、ドラッグを止めるときに削除します。また、`dragend`ハンドラでは、ドラッグの終了時に必ずクラスを削除します。
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch { id: 'simple-drag-drop2', path: 'dnd.js' } %}
+
+このコードには、カバーしておく価値のあるポイントがいくつかあります。
+
+- リンクのようなものをドラッグする場合、そのリンクに移動しようとするブラウザのデフォルト動作を防ぐ必要があります。これを行うには`dragover`イベントで`e.preventDefault()`を呼び出します。同じハンドラーで、`false`を返すのも良いプラクティスです。
+- `over`クラスを切り替える場合は、`dragover`ではなく、`dragenter`イベントハンドラーが使用されます。`dragover`を使用すると、列のホバー時に`dragover`イベントが引き続き発生するため、CSSクラスが何度も切り替えられることになります。最終的には、ブラウザのレンダラーが不要な作業を大量に行うことになります。再描画を最小限に抑えることに間違いはありません。`dragover`イベントを何かに使用する必要がある場合は、[イベントリスナーをスロットルまたはデバウンスする](https://css-tricks.com/debouncing-throttling-explained-examples/)ことを検討してください。
+
+## ドロップを完了する
+
+実際のドロップを処理するには、`drop`イベントのイベントリスナーを追加します。`drop`ハンドラーでは、ドロップに対するブラウザーのデフォルト動作を防ぐ必要があります。一般的には、何らかのリダイレクトが発生します。`e.stopPropagation()`呼び出すと、イベントがDOMをバブリングするのを防げます。
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // stops the browser from redirecting.
+  return false;
+}
+```
+
+新しいハンドラーは必ず他のハンドラーにも登録しておきましょう。
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+この時点でコードを実行すると、アイテムは新しい場所にドロップされません。これを実現するには、[`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer)オブジェクトを使用する必要があります。
+
+すべてのDnDマジックは、`dataTransfer`プロパティで起こります。ドラッグアクションで送信されたデータを保持します。`dataTransfer`が`dragstart`イベントで設定され、dropイベントで読み取り/処理されます。 `e.dataTransfer.setData(mimeType, dataPayload)`を呼び出すと、オブジェクトのMIMEタイプとデータペイロードを設定できます。
+
+この例では、ユーザーが列の順番を並べ替えられるようにします。これを行うには、まず、ドラッグの開始時にソース要素のHTMLを保存する必要があります。
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+`drop`イベントでは、列のドロップを処理し、ソース列のHTMLをドロップしたターゲット列のHTMLに設定します。最初に、ユーザーがドラッグしてきた同じ列にまたドロップしないことを確認します。
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+次のデモで結果を確認できます。A列をB列の上にドラッグして放し、場所がどのように変化するかを確認します。
+
+{% Glitch { id: 'simple-drag-drop', path: 'dnd.js' } %}
+
+## その他のドラッグプロパティ
+
+`dataTransfer`オブジェクトはプロパティを公開し、ドラッグプロセス中に視覚的なフィードバックを提供します。こうしたプロパティを使用して、各ドロップターゲットの特定のデータ型に対する反応を制御することもできます。
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed)は、ユーザーが要素に対して実行できる「ドラッグのタイプ」を制限します。これは、ドラッグアンドドロップ処理モデルで使用され、`dragenter` および `dragover` イベントの最中に`dropEffect`を初期化します。プロパティは次の値に設定できます。`none` 、 `copy` 、`copyLink` 、 `copyMove` 、`link` 、 `linkMove` 、`move` 、 `all` 、`uninitialized` 。
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect)は、`dragenter`イベントおよび`dragover`イベント中にユーザーに与えられるフィードバックを制御します。ユーザーがターゲット要素にカーソルを合わせると、ブラウザーのカーソルに実行される操作のタイプ（コピー、移動など）が示されます。 効果は、次の値のいずれかになります。`none`、`copy`、`link`、`move`。
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage)は、ブラウザのデフォルトの「ゴースト画像」フィードバックを使用する代わりに、ドラッグアイコンを設定できることを意味します。
+
+## ドラッグ &amp; ドロップによるファイルのアップロード
+
+この簡単な例では、列をドラッグソースとドラッグターゲットの両方として使用しています。これは、ユーザーがアイテムの再配置を求められるUIで見られることがあるかも知れません。場合によっては、たとえば、ドラッグターゲットとソースは異なる場合があります。ユーザーが製品のメイン画像として画像を1つ選択し、それをターゲットにドラッグするといったインターフェイスなどがそれに該当します。
+
+ドラッグ &amp; ドロップは、ユーザーがデスクトップからアプリケーションにアイテムをドラッグできるようにするためによく使用されます。主な違いは、`drop`ハンドラーにあります。`dataTransfer.getData()`を使用してファイルにアクセスする代わりに、それらのデータは`dataTransfer.files`プロパティに格納されます。
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Stops some browsers from redirecting.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Read the File objects in this FileList.
+  }
+}
+```
+
+これに関する詳細は、[Custom drag-and-drop (カスタムドラッグ &amp; ドロップ](/read-files/#select-dnd)をご覧ください。
+
+## その他のリソース
+
+- [The Drag and Drop Specification (ドラッグ &amp; ドロップの仕様)](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [MDN HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Vanilla JavaScriptを使用してドラッグ &amp; ドロップファイルアップローダーを作成する方法](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [HTMLのDrag and Drop APIを使用した駐車ゲームの作成](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [ReactでHTMLのDrag and Drop APIを使用する方法](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/ja/blog/evolving-cls/index.md b/src/site/content/ja/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..29afa8406e1
--- /dev/null
+++ b/src/site/content/ja/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: CLS 指標の進化
+subhead: 長期間有効なページに対する公平性を高めるための CLS 指標の改善計画について。
+description: 長期間有効なページに対する公平性を高めるための CLS 指標の改善計画について。
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: レイアウトシフトを測定するためのウィンドウアプローチの例。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2021年6月2日:** この記事で説明されている CLS のアップデートは、Chrome の Web ツール面全体に公開されました。詳細については、「[Web ツールでの累積レイアウトシフトの進化](/cls-web-tooling/)」をご覧ください。 {% endAside %}
+
+私たち（Chrome Speed Metrics チーム）は最近、[CLS 指標を長期間開いているページに対してより公平にするためのオプション](/better-layout-shift-metric/)に関する初回調査の概要を説明しました。非常に有益なフィードバックを多数受け取り、大規模な分析を行った上で、指標に適用予定の変更を仕上げました。**5 秒を上限とする 1 秒間隔の最大セッションウィンドウ**です。
+
+以下でその詳細をお読みください！
+
+## オプションはどのように評価されましたか？
+
+開発者コミュニティから受け取ったすべてのフィードバックを確認し、それを考慮しました。
+
+また、Chromeに[上位のオプション](/better-layout-shift-metric/#best-strategies)を実装し、数百万もの Web ページに渡ってメトリックの大規模な分析を行いました。各オプションがどのタイプのサイトを改善したか、またオプションがどのように比較されたかを確認しました。特に、さまざまなオプションによってスコアが異なるサイトを調べ、全体として、以下のことがわかりました。
+
+- **すべて**のオプションにより、ページで費やされた時間とレイアウトシフトスコアの間の相関関係が減少した。
+- どのページでもスコアが悪くなるオプションは**なかった**。したがって、この変更によってサイトのスコアが悪化することを心配する必要はない。
+
+## 決定点
+
+### セッションウィンドウの理由
+
+[以前の記事](/better-layout-shift-metric/)では、スコアが無制限に増加しないようにしながら、レイアウトシフトをグループ化するための[いくつかの異なるウィンドウ戦略](/better-layout-shift-metric/#windowing-strategies)について説明しました。開発者から受け取ったフィードバックは、レイアウトシフトを最も直感的にグループ化するセッションウィンドウ戦略を指示したものが圧倒的大多数でした。
+
+セッションウィンドウを確認するために、次の例を示します。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>セッションウィンドウの例。</figcaption></figure>
+
+上記の例では、ユーザーがページを表示すると、時間の経過とともに多くのレイアウトシフトが発生します。各シフトは青いバーで表されています。上記では、青いバーの高さがそれぞれに異なっており、個別のレイアウトシフトの[スコア](/cls/#layout-shift-score)が表されています。セッションウィンドウは、最初のレイアウトシフトから始まり、レイアウトシフトのない間隔ができるまで拡大し続けます。次のレイアウトシフトが発生すると、新しいセッションウィンドウが開始されます。レイアウトシフトのない間隔が 3 つあるため、この例には 3 つのセッションウィンドウがあることになります。現在の CLS の定義と同様に、各シフトのスコアが合計されるため、各ウィンドウのスコアは個別のレイアウトシフトの合計になります。
+
+[初回調査](/better-layout-shift-metric/#best-strategies)に基づいて、セッションウィンドウ間に 1 秒の間隔を選択したところこの間隔は、大規模な分析でうまく機能しました。したがって、上記の例に示されている「セッション間隔」は 1 秒です。
+
+### 最大セッションウィンドウの理由
+
+初回調査では、[要約戦略](/better-layout-shift-metric/#summarization)を 2 つのオプションに絞り込みました。
+
+- 非常に大きなセッションウィンドウ（5 秒の間隔がある上限なしのウィンドウ）の場合、すべてのセッションウィンドウの**平均**スコア。
+- 小さいセッションウィンドウ（上限 5 秒、間隔 1 秒）の場合、すべてのセッションウィンドウの**最大**スコア。
+
+初回調査の後、数百万を超える URL で大規模な分析を実行できるように、各指標を Chrome に追加しました。大規模な分析では、以下のようなレイアウトシフトパターンを持つ URL が多数あることがわかりました。
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="平均を引き下げる小さなレイアウトシフトの例", width="800", height="550" %}
+
+右下では、Session Windows 2 に小さなレイアウトシフトが 1 つしかなく、スコアが非常に低くなってるのがわかります。つまり、平均スコアがかなり低くなります。しかし、開発者がその小さなレイアウトシフトを修正するとどうなるでしょうか。次に、スコアを Session Windows 1 のみで計算すると、ページのスコアが*ほぼ 2 倍*になります。レイアウトシフトを改善したのにスコアが悪化したとなれば、開発者は非常に混乱し、落胆してしまうことでしょう。この小さなレイアウトシフトを取り除くことでわずかながら明らかにユーザーエクスペリエンスを向上させたわけですから、スコアが悪化するはずがないのです。
+
+平均に伴うこのような問題のため、私たちは、より小さく上限付きの最大ウィンドウで変更を進めることにしました。つまり、上記の例では、Session Window 2 は無視され、Session Window 1 のレイアウトシフトの合計のみが報告されるようになります。
+
+### 5 秒の理由
+
+複数のウィンドウサイズを評価したところ、以下の 2 つのことがわかりました。
+
+- ウィンドウが短い場合、ページの読み込みとユーザー操作への応答が遅くなると、レイアウトシフトが複数のウィンドウに分割され、スコアが向上する可能性がある。このような速度低下でスコアが上がらない程度に、ウィンドウの大きさを維持する必要がある。
+- 一部のページでは、小さなレイアウトシフトが絶え間なく発生している。たとえば、得点が更新されるたびに少しずつシフトするスポーツの得点表示ページなど。これらのシフトは煩わしいものではあるが、時間が経ってもその煩わしさが増加することはない。そのため、これらのタイプのレイアウトシフトに対してウィンドウが確実に制限されるようにする必要がある。
+
+上記の 2 つのことを念頭に、多くの実際の Web ページでさまざまなウィンドウサイズを比較したところ、5 秒のウィンドウサイズが適切な制限であるとう結論に達しました。
+
+## これは私のページの CLS スコアにどのように影響しますか？
+
+このアップデートによって ページの CLS に上限がつくため、このアップデートの結果、**スコアが悪化するページはありません**。
+
+また、私たちの分析に基づけば、**オリジンの 55％ は、75 パーセンタイルで CLS の変化にまったく気づくことはありません**。これは、現在ページにレイアウトシフトがないか、実際に存在するシフトがすでに単一のセッションウィンドウに制限されているためです。
+
+**残りのオリジンでは、75パーセンタイルでこの変更によりスコアが向上します**。ほとんどの場合はわずかな改善しか見られませんが、約 3％ のスコアは、「改善が必要」または「悪い」の評価から「良い」の評価に改善されます。[以前の記事](/better-layout-shift-metric/)で説明したように、こういったページでは無限のスクローラーが使用されている、更新の遅い UI が多数ある傾向にあります。
+
+## 新しい指標を試すには？
+
+間もなく、新しい指標定義を使用するようにツールがアップデートされます。それまでは、[JavaScript の実装例](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver)または [Web Vitals 拡張機能のフォーク](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls)を使用して、任意のサイトで 更新済みバージョンの CLS を試すことができます。
+
+前の記事を読んでフィードバックを送っていただいたすべての方に感謝します！
diff --git a/src/site/content/ja/blog/fast-playback-with-preload/index.md b/src/site/content/ja/blog/fast-playback-with-preload/index.md
new file mode 100644
index 00000000000..129f4c0cbcc
--- /dev/null
+++ b/src/site/content/ja/blog/fast-playback-with-preload/index.md
@@ -0,0 +1,435 @@
+---
+layout: post
+title: 音声と動画のプリロードによる高速再生
+subhead: リソースを積極的にプリロードしてメディアの再生を高速化する方法。
+authors:
+  - beaufortfrancois
+description: 再生の開始が速ければ、あなたの動画を見たり音声を聞いたりする人が多くなります。これは動かぬ事実です。この記事では、ユースケースに応じてリソースを積極的にプリロードすることによってメディアの再生を加速するために使用できるテクニックを探ります。
+date: 2017-08-17
+updated: 2020-11-16
+tags:
+  - media
+  - performance
+  - network
+---
+
+再生の開始が速ければ、あなたの動画を見たり音声を聞いたりする人が多くなります。[これは動かぬ事実です](https://www.digitaltrends.com/web/buffer-rage/)。この記事では、ユースケースに応じてリソースを積極的にプリロードすることによって音声と動画の再生を加速するために使用できるテクニックを探ります。
+
+<figure>
+  <video controls muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.webm#t=1.1" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.mp4#t=1.1" type="video/mp4">
+  </source></source></video>
+  <figcaption>
+    <p>クレジット: copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org</a>.</p>
+  </figcaption></figure>
+
+メディアファイルをプリロードする3つの方法について、長所と短所から説明します。
+
+<table>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>適している...</th>
+      <th>一方で...</th>
+    </tr>
+    <tr>
+      <td rowspan="3" style="white-space: nowrap"><a href="#video_preload_attribute">動画プリロード属性</a></td>
+      <td rowspan="3">Webサーバーでホストされている一意のファイルに簡単に使用できます。</td>
+      <td>ブラウザは属性を完全に無視する場合があります。</td>
+    </tr>
+<tr>
+      <td>HTMLドキュメントが完全にロードされ、解析されると、リソースのフェッチが開始されます。</td>
+    </tr>
+    <tr>
+      <td>Media Source Extensions（MSE）にメディアを提供するのはアプリであるため、MSEはメディア要素の<code>preload</code>属性を無視します。</td>
+    </tr>
+    <tr>
+      <td rowspan="2" style="white-space: nowrap"><a href="#link_preload">リンクプリロード</a></td>
+      <td>ドキュメントの<code>onload</code>イベントをブロックせずに、ブラウザに動画リソースの要求を強制します。</td>
+      <td>HTTP Range要求には互換性がありません。</td>
+    </tr>
+<tr>
+      <td>MSEおよびファイルセグメントと互換性があります。</td>
+      <td>完全なリソースをフェッチする場合は、小さなメディアファイル（&lt;5 MB）にのみ使用する必要があります。</td>
+    </tr>
+    <tr>
+      <td><a href="#manual_buffering">手動バッファリング</a></td>
+      <td>フルコントロール</td>
+      <td>複雑なエラー処理はWebサイトで行います。</td>
+    </tr>
+  </tbody>
+</table>
+
+## 動画プリロード属性
+
+動画ソースがWebサーバーでホストされている一意のファイルである場合は、動画`preload`属性を使用して、[プリロードする情報またはコンテンツの量](/video-and-source-tags/#preload)に関するヒントをブラウザに提供することをお勧めします。つまり、[Media Source Extensions（MSE）](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)には、`preload`との互換性がありません。
+
+リソースのフェッチは、最初のHTMLドキュメントが完全にロードされて解析（ `DOMContentLoaded`イベントが発生した場合など）されなければ開始されませんが、リソースが実際にフェッチされたときには、非常に異なる`load`イベントが発行されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/De8tMHJUn3XyzFfosVLb.svg", alt="", width="800", height="234" %}</figure>
+
+`preload`属性を`metadata`に設定すると、ユーザーには動画は必要ないと想定するが、そのメタデータ（サイズ、トラックリスト、再生時間など）をフェッチすることが望ましいことを示します。[Chrome 64](https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#media-preload-defaults-metadata)より、`preload`のデフォルト値は`metadata`であることに注意してください。（以前は`auto`でした。）
+
+```html
+<video id="video" preload="metadata" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+`preload`属性を`auto`に設定すると、ブラウザが十分なデータをキャッシュして、停止してさらにバッファリングすることなく完全な再生が可能になることを示します。
+
+```html
+<video id="video" preload="auto" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+ただし、いくつかの注意点があります。これは単なるヒントであるため、ブラウザは`preload`属性を完全に無視する場合があります。これを書いている時点では、Chromeに以下のルールが適用されます。
+
+- [データセーバー](https://support.google.com/chrome/answer/2392284)が有効になっている場合、Chromeは`preload`値を`none`に強制します。
+- Android 4.3では、[Android バグ](https://bugs.chromium.org/p/chromium/issues/detail?id=612909)により、Chromeは`preload`値を`none`に強制します。
+- セルラー接続（2G、3G、および4G）では、Chromeは`preload`値を`metadata`に強制します。
+
+### ヒント
+
+Webサイトに同じドメインに多数の動画リソースが含まれている場合は、`preload`値を`metadata`に設定するか、`poster`属性を定義して`preload`を`none`に設定することをお勧めします。そうすれば、同じドメインへのHTTP接続の最大数（HTTP 1.1仕様では6）に達してリソースのロードがハングしてしまう可能性を回避することができます。動画がコアユーザーエクスペリエンスの一部でない場合は、これによってページ速度も向上する可能性があります。
+
+## リンクプリロード
+
+他の[記事](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)で[説明](https://developers.google.com/web/updates/2016/03/link-rel-preload)されているように、[リンクプリロード](https://w3c.github.io/preload/)は、`load`イベントをブロックせずに、ページのダウンロード中にリソースを要求するようにブラウザを強制することができます。`<link rel="preload">`を介してロードされたリソースは、ブラウザにローカルに保存され、DOM、JavaScript、またはCSSで明示的に参照されるまで事実上、静止状態となります。
+
+プリロードは、現在のナビゲーションに焦点を合わせ、タイプ（スクリプト、スタイル、フォント、動画、音声など）に基づいて優先的にリソースをフェッチするという点で、プリフェッチとは異なります。現在のセッションのブラウザキャッシュをウォームアップするために使用する必要があります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/g5fQKJMivvcsHajmMmi2.svg", alt="", width="800", height="234" %}</figure>
+
+### フル動画をプリロードする
+
+JavaScriptが動画コンテンツのフェッチを要求したときに、リソースがブラウザによってすでにキャッシュされている可能性があるため、キャッシュから読み取られるように、以下のようにして、Webサイトに動画全体をプリロードすることができます。プリロード要求がまだ終了していない場合は、通常のネットワークフェッチが発生します。
+
+```js
+<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">
+
+<video id="video" controls></video>
+
+<script>
+  // Later on, after some condition has been met, set video source to the
+  // preloaded video URL.
+  video.src = 'https://cdn.com/small-file.mp4';
+  video.play().then(() => {
+    // If preloaded video URL was already cached, playback started immediately.
+  });
+</script>
+```
+
+{% Aside %}これは小さなメディアファイル（5MB未満）にのみ使用することをお勧めします。 {% endAside %}
+
+プリロードされたリソースはこの例の動画要素によって消費されるため、`as`プリロードリンクの値は`video`になっています。音声要素の場合は、 `as="audio"`です。
+
+### 最初のセグメントをプリロードする
+
+以下の例は、`<link rel="preload">`を使って動画の最初のセグメントをプリロードし、それをMedia Source Extensionsで使用する方法を示しています。MSE JavaScript APIに詳しくない場合は、「[MSEの基本](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)」を参照してください。
+
+単純化するために、動画全体が、`file_1.webm`、`file_2.webm`、`file_3.webm`などの小さなファイルに分割されていると仮定します。
+
+```html
+<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">
+
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // If video is preloaded already, fetch will return immediately a response
+    // from the browser cache (memory cache). Otherwise, it will perform a
+    // regular network fetch.
+    fetch('https://cdn.com/file_1.webm')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      // Append the data into the new sourceBuffer.
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch file_2.webm when user starts playing video.
+    })
+    .catch(error => {
+      // TODO: Show "Video is not available" message to user.
+    });
+  }
+</script>
+```
+
+{% Aside 'warning' %} クロスオリジンリソースの場合、CORSヘッダーが適切に設定されていることを確認してください。 `fetch(videoFileUrl, { mode: 'no-cors' })`でフェッチされた不透明な応答から配列バッファーを作成できないため、動画または音声要素をフィードすることはできません。 {% endAside %}
+
+### サポート
+
+どのブラウザがプリロードをサポートしているかを確認するには、MDNの[ブラウザ互換性](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)テーブルを参照してください。以下のスニペットを使用してその可用性を検出し、パフォーマンス指標を調整することをお勧めします。
+
+```js
+function preloadFullVideoSupported() {
+  const link = document.createElement('link');
+  link.as = 'video';
+  return (link.as === 'video');
+}
+
+function preloadFirstSegmentSupported() {
+  const link = document.createElement('link');
+  link.as = 'fetch';
+  return (link.as === 'fetch');
+}
+```
+
+## 手動バッファリング
+
+[Cache API](https://developer.mozilla.org/docs/Web/API/Cache)とService Workerに飛び込む前に、MSEを使用して動画を手動でバッファリングする方法を見てみましょう。以下の例では、WebサーバーがHTTP [`Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range)要求をサポートしていることを前提としていますが、これはファイルセグメントと非常によく似ています。[GoogleのShaka Player](https://github.com/google/shaka-player)、[JW Player](http://videojs.com/)、[Video.js](https://developer.jwplayer.com/)などの一部のミドルウェアライブラリは、これを処理するように構築されていることに注意してください。
+
+```html
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // Fetch beginning of the video by setting the Range HTTP request header.
+    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
+    });
+  }
+
+  function updateEnd() {
+    // Video is now ready to play!
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+
+    // Fetch the next segment of video when user starts playing the video.
+    video.addEventListener('playing', fetchNextSegment, { once: true });
+  }
+
+  function fetchNextSegment() {
+    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      const sourceBuffer = mediaSource.sourceBuffers[0];
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch further segment and append it.
+    });
+  }
+</script>
+```
+
+### 考慮事項
+
+メディアバッファリングエクスペリエンス全体を制御できるようになったので、プリロードを検討するときは、デバイスのバッテリーレベル、「データセーバーモード」のユーザー設定、およびネットワーク情報を考慮することをお勧めします。
+
+#### バッテリー対応
+
+動画のプリロードを検討する前に、ユーザーのデバイスのバッテリーレベルを考慮してください。これにより、電力レベルが低いときにバッテリーの寿命を延ばすことができます。
+
+デバイスのバッテリーが不足している場合は、プリロードを無効にするか、少なくとも低解像度の動画をプリロードします。
+
+```js
+if ('getBattery' in navigator) {
+  navigator.getBattery()
+  .then(battery => {
+    // If battery is charging or battery level is high enough
+    if (battery.charging || battery.level > 0.15) {
+      // TODO: Preload the first segment of a video.
+    }
+  });
+}
+```
+
+#### 「データセーバー」を検出する
+
+`Save-Data`クライアントヒント要求ヘッダーを使用して、ブラウザで「データ節約」モードにオプトインしているユーザーに高速で軽量なアプリケーションを配信します。この要求ヘッダーを特定することで、アプリケーションはコストとパフォーマンスに制約のあるユーザーに最適化されたユーザーエクスペリエンスをカスタマイズして配信することができます。
+
+詳細については、「[Save-Dataを使用して高速で軽量なアプリケーションを配信する](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data)」を参照してください。
+
+#### ネットワーク情報に基づくスマートローディング
+
+プリロードする前に、`navigator.connection.type`を確認することをお勧めします。`cellular`に設定すると、プリロードを防ぎ、モバイルネットワークオペレーターが帯域幅の料金を請求している可能性があることをユーザーに通知し、以前にキャッシュされたコンテンツの自動再生のみを開始できます。
+
+```js
+if ('connection' in navigator) {
+  if (navigator.connection.type == 'cellular') {
+    // TODO: Prompt user before preloading video
+  } else {
+    // TODO: Preload the first segment of a video.
+  }
+}
+```
+
+[ネットワーク情報のサンプル](https://googlechrome.github.io/samples/network-information/)をチェックして、ネットワークの変更に対応する方法も確認してください。
+
+### 複数の最初のセグメントを事前にキャッシュする
+
+ユーザーが最終的にどのメディアを選択するかを知らずに、投機的にメディアコンテンツをプリロードしたい場合はどうすればよいでしょうか？ユーザーが10本の動画を含むWebページを使用している場合、それぞれから1つのセグメントファイルをフェッチするのに十分なメモリがあるかもしれませんが、10個の非表示の`<video>`要素と10個の`MediaSource`オブジェクトを作成して、そのデータのフィードを開始してはいけません。
+
+以下の2部構成の例は、強力で使いやすい[Cache API](/cache-api-quick-guide/)を使用して、動画の最初のセグメントを事前に複数キャッシュする方法を示しています。IndexedDBでも同様のことが実現できることに注意してください。Cache APIは`window`オブジェクトからもアクセスできるため、Service Workerはまだ使用していません。
+
+#### フェッチとキャッシュ
+
+```js
+const videoFileUrls = [
+  'bat_video_file_1.webm',
+  'cow_video_file_1.webm',
+  'dog_video_file_1.webm',
+  'fox_video_file_1.webm',
+];
+
+// Let's create a video pre-cache and store all first segments of videos inside.
+window.caches.open('video-pre-cache')
+.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));
+
+function fetchAndCache(videoFileUrl, cache) {
+  // Check first if video is in the cache.
+  return cache.match(videoFileUrl)
+  .then(cacheResponse => {
+    // Let's return cached response if video is already in the cache.
+    if (cacheResponse) {
+      return cacheResponse;
+    }
+    // Otherwise, fetch the video from the network.
+    return fetch(videoFileUrl)
+    .then(networkResponse => {
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, networkResponse.clone());
+      return networkResponse;
+    });
+  });
+}
+```
+
+HTTP `Range`要求を使用する場合、Cache APIは[まだ](https://github.com/whatwg/fetch/issues/144)`Range`応答をサポートしていないため、`Response`オブジェクトを手動で再作成する必要があることに注意してください。 `networkResponse.arrayBuffer()`を呼び出すと、応答のコンテンツ全体がレンダラーメモリに一度にフェッチされることに注意してください。そのため、狭い範囲を使用することをお勧めします。
+
+参考までに、上記の例の一部を変更して、HTTP Range要求を動画プリキャッシュに保存しました。
+
+```js
+    ...
+    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
+    .then(networkResponse => networkResponse.arrayBuffer())
+    .then(data => {
+      const response = new Response(data);
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, response.clone());
+      return response;
+    });
+```
+
+#### 動画を再生する
+
+ユーザーが再生ボタンをクリックすると、利用可能な場合はすぐに再生が開始されるように、Cache APIで利用可能な動画の最初のセグメントがフェッチされます。それ以外の場合は、単にネットワークからフェッチします。ブラウザとユーザーが[キャッシュ](/storage-for-the-web/#eviction)をクリアする可能性があることに注意してください。
+
+前に見たように、MSEを使用して、動画の最初のセグメントを動画要素にフィードします。
+
+```js
+function onPlayButtonClick(videoFileUrl) {
+  video.load(); // Used to be able to play video later.
+
+  window.caches.open('video-pre-cache')
+  .then(cache => fetchAndCache(videoFileUrl, cache)) // Defined above.
+  .then(response => response.arrayBuffer())
+  .then(data => {
+    const mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+    function sourceOpen() {
+      URL.revokeObjectURL(video.src);
+
+      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+      sourceBuffer.appendBuffer(data);
+
+      video.play().then(() => {
+        // TODO: Fetch the rest of the video when user starts playing video.
+      });
+    }
+  });
+}
+```
+
+{% Aside 'warning' %} クロスオリジンリソースの場合、CORSヘッダーが適切に設定されていることを確認してください。 `fetch(videoFileUrl, { mode: 'no-cors' })`でフェッチされた不透明な応答から配列バッファーを作成できないため、動画または音声要素をフィードすることはできません。 {% endAside %}
+
+### Service WorkerでRange応答を作成する
+
+動画ファイル全体をフェッチしてCache APIに保存した場合はどうなるでしょうか？ブラウザがHTTP `Range`要求を送信するとき、Cache APIは[まだ](https://github.com/whatwg/fetch/issues/144)`Range`応答をサポートしていないため、動画全体をレンダラーメモリに入れたくないことは確かです。
+
+それでは、これらの要求をインターセプトして、Service Workerからカスタマイズされた`Range`応答を返す方法を説明しましょう。
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(loadFromCacheOrFetch(event.request));
+});
+
+function loadFromCacheOrFetch(request) {
+  // Search through all available caches for this request.
+  return caches.match(request)
+  .then(response => {
+
+    // Fetch from network if it's not already in the cache.
+    if (!response) {
+      return fetch(request);
+      // Note that we may want to add the response to the cache and return
+      // network response in parallel as well.
+    }
+
+    // Browser sends a HTTP Range request. Let's provide one reconstructed
+    // manually from the cache.
+    if (request.headers.has('range')) {
+      return response.blob()
+      .then(data => {
+
+        // Get start position from Range request header.
+        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
+        const options = {
+          status: 206,
+          statusText: 'Partial Content',
+          headers: response.headers
+        }
+        const slicedResponse = new Response(data.slice(pos), options);
+        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
+            (data.size - 1) + '/' + data.size);
+        slicedResponse.setHeaders('X-From-Cache': 'true');
+
+        return slicedResponse;
+      });
+    }
+
+    return response;
+  }
+}
+```
+
+`response.blob()`を使用してこのスライスされた応答を再作成したことに注意してください。これは`response.arrayBuffer()`がファイル全体をレンダラーメモリに取り込むときに、ファイルへのハンドルを提供するだけであるためです。
+
+私のカスタム`X-From-Cache` HTTPヘッダーを使用すると、この要求がキャッシュからのものか、ネットワークからのものかを知ることができます。[ShakaPlayer](https://github.com/google/shaka-player/blob/master/docs/tutorials/service-worker.md)などのプレーヤーは、ネットワーク速度の指標としての応答時間を無視するために使用できます。
+
+{% YouTube 'f8EGZa32Mts' %}
+
+`Range`要求を処理する方法の完全なソリューションについては、公式の[サンプルメディアアプリ](https://github.com/GoogleChrome/sample-media-pwa)と、特にその[ranged-response.js](https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/scripts/ranged-response.js)ファイルをご覧ください。
diff --git a/src/site/content/ja/blog/floc/index.md b/src/site/content/ja/blog/floc/index.md
new file mode 100644
index 00000000000..c8de3a6ee80
--- /dev/null
+++ b/src/site/content/ja/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: FLoCとは何ですか？
+subhead: FLoCは、個々のユーザーのブラウジング動作を共有せずに、広告の選択を可能にします。
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: ブライトン・ピアでのムクドリのつぶやき
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %}この投稿では、FLoCの最初のオリジントライアルのためにChromeに実装されたAPIデザインの概要を説明します。
+
+サードパーティのCookieやその他のクロスサイト追跡メカニズムを使用せずに嗜好ベースの広告を有効にするAPIの将来の反復は、現在開発中です。 {% endAside %}
+
+FLoCは、嗜好ベースの広告選択のためのプライバシー保護メカニズムを提供します。
+
+ユーザーがウェブ以内で行動すると、ブラウザーはFLoCアルゴリズムを使用して「インタレストコホート」を作成します。これは、最近の閲覧履歴が類似している何千のブラウザーでも同じです。ブラウザは、個人の閲覧データをブラウザベンダーや他の人と共有することなく、ユーザーのデバイス上で定期的にコホートを再計算します。
+
+{% Aside %}最初のFLoCトライアルでは、次の2つの理由のいずれかにより、ページへのアクセスがブラウザのFLoC計算にのみ含まれていました。
+
+- FLoC API（ `document.interestCohort()` ）がページで使用されます。
+- Chromeは、ページが[広告または広告関連のリソースを読み込み](https://github.com/WICG/floc/issues/82)しいることを検出します。
+
+他のクラスタリングアルゴリズムの場合、トライアルはさまざまな包含基準で実験することがあります。これは、オリジントライアルの実験プロセスの一部です。
+
+Chrome 89から91まで実行されていたFLoCの初期バージョンのオリジントライアルは、 [現在終了してい](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)ます。 {% endAside %}
+
+広告主（広告にお金を払うサイト）は、コホートデータを収集してアドテックプラットフォーム（広告を配信するためのソフトウェアとツールを提供する会社）に提供するために、独自のWebサイトにコードを含めることができます。たとえば、アドテックプラットフォームは、オンラインの靴店から、コホート1101および1354のブラウザが店のハイキング用品に興味を持っているように見えることを発現できます。他の広告主から、アドテックプラットフォームはそれらのコホートの他の興味について認識できます。
+
+その後、これらのコホートの1つのブラウザが、ニュースWebサイトなどの広告を表示するサイトからページを要求すると、広告プラットフォームはこのデータを使用して関連する広告（靴屋のハイキングブーツの広告など）を選択できます。
+
+プライバシーサンドボックスは、サードパーティのCookieやその他の追跡メカニズムを使用せずにサードパーティのユースケースを満たすための一連のプロポーザルです。すべてのプロポーザルの概要については[、プライバシーサンドボックスを掘り下げる](/digging-into-the-privacy-sandbox)を参照してください。
+
+**このプロポーザルにはフィードバックが必要です。**コメントがあれば、 [FLoCExplainer](https://github.com/WICG/floc)リポジトリで[issueを作成してください。](https://github.com/WICG/floc/issues/new)このプロポーザルに関するChromeの実験についてフィードバックがあれば、 [Intent toExperiment](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs)に返信を投稿してください。
+
+## なぜFLoCが必要なのですか？
+
+多くの企業は、サイトへのトラフィックを増やすために広告に依存しており、多くのサイト運営者のウェブサイトは、広告枠を販売することでコンテンツに資金を提供しています。人々は一般的に興味がありかつ有用な広告を見ることを好み、そして関連性のある広告はまた広告主により多くのビジネスと[それらを所有するウェブサイトにより多くの収入をもたらします](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf)。言い換えれば、広告スペースは、関連する広告を表示すると、より価値をもたらします。したがって、関連する広告を選択すると、広告がサポートされているWebサイトの収益が増加します。つまり、関連する広告は、ユーザーに利益をもたらすコンテンツ作成に資金を提供するのに役立ちます。
+
+ただし、人々は、現在、サイト全体の閲覧履歴を広告主や広告プラットフォームに公開する恐れがあるCookieの追跡やデバイスのフィンガープリントなどの手法に依存している、カスタマイズされた広告のプライバシーへの影響を懸念しています。 FLoCの提案は、プライバシーをより適切に保護する方法で広告を選択できるようにすることを目的としています。
+
+## FLoCは何に使用できますか？
+
+- 広告主のサイトに頻繁にアクセスすることが観察されている、または関連するトピックに関心を示しているコホートのブラウザが属しているユーザーに広告を表示します。
+- 機械学習モデルを使用して、ユーザーがコホートに応じてコンバージョンする確率を予測し、広告オークションの入札行動を通知します。
+- ユーザーにコンテンツをお進めします。例えば、ニュースサイトが、スポーツポッドキャストページがコホート1234およびコホート7からの訪問者に特に人気があることを観察したとします。彼らは、それらのコホートからの他の訪問者にもそのコンテンツを推奨できます。
+
+## FLoCはどのように機能しますか？
+
+以下の例では、FLoCを使用して広告を選択する際のさまざまな役割について説明します。
+
+- この例の**広告主**（広告にお金を払う会社）は、オンラインの靴の小売業者です。<br>**<u>shoestore.example</u>**
+
+- この例の**発行元**（広告スペースを販売するサイト）はニュースサイトです。<br> **<u>dailynews.example</u>**
+
+- **adtechプラットフォーム**（広告を配信するためのソフトウェアとツールを提供する）は次のとおりです。<br> **<u>adnetwork.example</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="図は、FLoCを使用して広告を選択および配信する際のさまざまな役割を段階的に示しています：FLoCサービス、ブラウザー、広告主、パブリッシャー（コホートを観察するため） 、Adtech、Publisher（広告を表示するため", width="800", height="359" %}
+
+この例では、ユーザーを**Yoshi**と**Alex**と呼びます。当初、彼らのブラウザは両方とも同じコホート、1354に属しています。
+
+{% Aside %}ここではユーザーをYoshiとAlexと呼んでいますが、これは例の目的のためだけです。 FLoCを使用する広告主、発行者、またはアドテックプラットフォームには、名前と個人のIDは公開されません。
+
+コホートを人々の集まりとは考えないでください。代わりに、コホートをブラウジングアクティビティのグループと考えてください。 {% endAside %}
+
+### 1.FLoCサービス
+
+1. ブラウザで使用されるFLoCサービスは、数千の「コホート」を含む数学モデルを作成します。コホートごとは、同様の最近の閲覧履歴を持つ数千のWebブラウザに対応します。これがどのように機能[するかについては、以下をご覧ください](#floc-server)。
+2. コホートごとには番号が付けられています。
+
+### 2.ブラウザ
+
+1. Yoshiのブラウザは、FLoCサービスから、FLoCモデルを説明するデータを取得します。
+2. Yoshiのブラウザは、[FLoCモデルのアルゴリズムを使用して](#floc-algorithm)自身の閲覧履歴に最も密接に対応しているコホートを計算します。この例では、それがコホート1354になります。YoshiのブラウザはFLoCサービスにデータを共有しないことに注意してください。
+3. 同様に、AlexのブラウザはコホートIDを計算します。 Alexの閲覧履歴はYoshiの閲覧履歴とは異なりますが、ブラウザが両方ともコホート1354に属しているほど類似しています。
+
+### 3.広告主： <span style="font-weight:normal">shoestore.example</span>
+
+1. Yoshiが<u>shoestore.example</u>にアクセスします。
+2. このサイトは、Yoshiのブラウザにそのコホート：1354を要求します。
+3. Yoshiはハイキングブーツを見ます。
+4. このサイトは、コホート1354のブラウザがハイキングブーツに興味を示したことを記録しています。
+5. このサイトは後に、コホート1354および他のコホートからの製品への追加の関心を記録します。
+6. このサイトは、コホートと製品の関心に関する情報を定期的に集約し、アドテックプラットフォーム<u>adnetwork.example</u>と共有しています。
+
+次はAlexの番です。
+
+### 4.発行元： <span style="font-weight:normal">dailynews.example</span>
+
+1. Alexは<u>dailynews.example</u>にアクセスします。
+2. このサイトは、Alexのブラウザにコホートを要求します。
+3. 次に、サイトは、Alexのブラウザのコホート: 1354を含むアドテックプラットフォーム<u>adnetwork.example</u>に広告をリクエストします。
+
+### 5.アドテックプラットフォーム： <span style="font-weight:normal">adnetwork.example</span>
+
+1. <u>adnetwork.example</u>が発行元<u>dailynews.example</u>と広告主<u>shoestore.example</u>から取得したデータを組み合わせることによって、Alexに適した広告を選択することができます。
+
+- <u>dailynews.exampleが</u>提供するAlexのブラウザのコホート（1354）。
+- <u>shoestore.example</u>からのコホートと製品の嗜好に関するデータ：「コホート1354のブラウザは、ハイキングブーツに興味があるかもしれません。」
+
+1. <u>adnetwork.exampleは</u>、Alexに適した広告を選択します：<u>shoestore.example</u>でのハイキングブーツの広告となります。
+2. <u>dailynews.example</u>が広告🥾を表示します。
+
+{% Aside %}広告選択の現在のアプローチは、Cookieの追跡やデバイスのフィンガープリントなどの手法に依存しています。これらの手法は、広告主などのサードパーティが個人のブラウジング動作を追跡するために使用します。
+
+FLoCで、ブラウザは閲覧履歴をFLoCサービスや他の人と**共有しません。**ユーザーのデバイス上のブラウザーは、属しているコホートを判断します。ユーザーの閲覧履歴がデバイスから必ず離れません。 {% endAside %}
+
+## FLoCモデルを作成するバックエンドサービスを実行するのは誰ですか？
+
+すべてのブラウザベンダーは、ブラウザをコホートにグループ化する方法を独自に選択する必要があります。 Chromeは独自のFLoCサービスを実行しています。他のブラウザは、異なるクラスタリング手法でFLoCを実装することを選択し、そのために独自のサービスを実行する場合があります。
+
+## FLoCサービスは、ブラウザがそのコホートをどのように処理できるようにしますか？ {：＃floc-server}
+
+1. ブラウザが使用するFLoCサービスは、すべての潜在的なウェブ閲覧履歴の多次元の数学的表現を作成します。このモデルを「コホートスペース」と呼びます。
+2. このサービスは、このスペースを数千のセグメントに分割します。セグメント毎は、何千もの同様の閲覧履歴のクラスターを表します。これらのグループ化は、実際の閲覧履歴を知ることを基にしていません。それらは単に「コホートスペース」でランダムな中心を選ぶか、ランダムな線でスペースを切り取ることをベースにしています。
+3. 各セグメントにはコホート番号が付けられています。
+4. Webブラウザーは、FLoCサービスから「コホートスペース」を説明するこのデータを取得します。
+5. ユーザーがWウェブを行動すると、ブラウザー[はアルゴリズム](#floc-algorithm)を使用して、自身の閲覧履歴に最も近い「コホートスペース」内の領域を定期的に計算します。
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="FLoCサーバーによって作成された「閲覧履歴スペース」の図。それぞれにコホート番号が付いた複数のセグメントが表示されます。", width="400", height="359" %}<figcaption> FLoCサービスは、「コホートスペース」を数千のセグメントに分割します（ここではごく一部のみを示しています）。</figcaption></figure>
+
+{% Aside %}このプロセスのどの時点でも、ユーザーの閲覧履歴はFLoCサービスまたはサードパーティと共有されません。ブラウザのコホートは、ユーザーのデバイス上のブラウザによって計算されます。 FLoCサービスによってユーザーデータが取得または保存されることはありません。 {% endAside %}
+
+## ブラウザのコホートは変更できますか？
+
+*はい*！ブラウザのコホートは間違いなく変わる可能性があります！おそらく毎週同じウェブサイトにアクセスすることはなく、ブラウザのコホートはそれを反映します。
+
+コホートは、人々の集まりではなく、ブラウジングアクティビティのクラスターを表します。コホートのアクティビティ特性は一般に時間の経過とともに一貫しており、コホートは同様の最近のブラウジング動作をグループ化するため、広告の選択に役立ちます。個々の人々のブラウザは、ブラウジング動作が変化すると、コホートに出入りします。当初、ブラウザは7日ごとにコホートを再計算することを期待しています。
+
+上記の例では、YoshiとAlexのブラウザのコホートはどちらも1354です。将来、YoshiのブラウザとAlexのブラウザは、関心が変わった場合に別のコホートに移動する可能性があります。以下の例では、Yoshiのブラウザはコホート1101に移動し、Alexのブラウザはコホート1378に移動します。他の人のブラウザは、閲覧の興味が変わると、コホートに出入りします。
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="FLoCサーバーによって作成された「閲覧履歴スペース」の図は複数のセグメントを表示し、それぞれのコホートを番号付いています。この図はAlexとYoshiユーザーのブラウザが閲覧の興味が時間とともに変化するにつれて、あるコホートから別のコホートに移動することを示します。 ", width="800", height="533" %}<figcaption>AlexとYoshiのブラウザコホートは、興味が変わると変わる可能性があります。</figcaption></figure>
+
+{% Aside %}コホートは、人々のグループではなく、ブラウジングアクティビティのグループを定義します。ブラウザは、アクティビティが変化すると、コホートに出入りします。 {% endAside %}
+
+## ブラウザはどのようにコホートを処理しますか？ {：＃floc-algorithm}
+
+上記のように、ユーザーのブラウザーは、コホートの数学的モデル、つまりすべてのユーザーのブラウジングアクティビティを表す多次元空間を記述するFLoCサービスからデータを取得します。次に、ブラウザはアルゴリズムを使用して、この「コホートスペース」のどの領域（つまり、どのコホート）が自身の最近のブラウジング動作に最も近いかを判断します。
+
+## FLoCはどのようにして適切なサイズのコホートを作成しますか？
+
+コホート毎には何千ものブラウザが所有しています。
+
+コホートのサイズが小さいほど、広告を個人化するのに役立つ場合がありますが、ユーザーの追跡を停止する可能性は低くなります。その逆も同様です。ブラウザをコホートに割り当てるメカニズムは、プライバシーとユーティリティの間でトレードオフを行う必要があります。プライバシーサンドボックスは、 [k-匿名性](https://en.wikipedia.org/wiki/K-anonymity)を使用して、ユーザーが「群衆の中に隠れること」を有効にします。コホートは、少なくともkのユーザーによって共有されている場合、k匿名となります。 k値が高いほど、コホートのプライバシーがより厳しく保護されます。
+
+## FLoCを使用して、機密カテゴリを基にして人をグループ化できますか？
+
+FLoCコホートモデルの構築に使用されるクラスタリングアルゴリズムは、カテゴリが機密である理由を学習せずに、コホートが機密カテゴリと相関する可能性があるかどうかを評価するように設計されています。人種、性的指向、病歴などのデリケートなカテゴリを公開する可能性のあるコホートはブロックされます。言い換えれば、そのコホートを処理するとき、ブラウザは機密カテゴリを表示しないコホートの中に選択します。
+
+## FLoCは、オンラインで人々を分類するもう1つの方法ですか？
+
+FLoCを使用すると、ユーザーのブラウザーは、他の何千ものユーザーのブラウザーとともに、何千ものコホートの1つに属します。サードパーティのCookieやその他のターゲティングメカニズムとは異なり、FLoCはユーザーのブラウザが含まれているコホートのみを表示し、個々のユーザーIDは表示しません。他の人がコホート内の個人を区別することはできません。さらに、ブラウザのコホートを計算するために使用されるブラウジングアクティビティに関する情報は、ブラウザまたはデバイス上でローカルに保持され、他の場所にはアップロードされません。ブラウザは、[差分プライバシー](https://en.wikipedia.org/wiki/Differential_privacy)などの他の匿名化方法をさらに活用する場合があります。
+
+## ウェブサイトは参加して情報を共有する必要がありますか？
+
+WebサイトはFLoCをオプトインまたはオプトアウトできるため、機密性の高いトピックに関するサイトは、サイトへのアクセスがFLoCの計算に含まれないようにすることができます。追加の保護として、FLoCサービスによる分析では、コホートが機密である理由を学習せずに、コホートがユーザーに関する機密情報を公開する可能性があるかどうかを評価します。コホートがデリケートなカテゴリのサイトにアクセスする通常よりも多くの人々を表す可能性がある場合、そのコホート全体が削除されます。ネガティブな財政状態とメンタルヘルスは、この分析の対象となるデリケートなカテゴリーの1つです。
+
+Webサイトは、そのページに[Permissions-Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)ヘッダー`interest-cohort=()`を設定することにより、[FLoC計算からページを除外できます](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)。除外されていないページの場合、ページで `document.interestCohort()`を使用していると、ページへのアクセスがブラウザのFLoC計算に含まれます。現在の[FLoCオリジントライアル](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)中に、ページが[広告または広告関連リソースをロード](https://github.com/WICG/floc/issues/82)していることをChromeが検出した場合、ページも計算に含まれます。 （[Chromiumの広告タグ付け](https://github.com/WICG/floc/issues/82)は、Chromeの広告検出メカニズムがどのように機能するかを説明しています。）
+
+イントラネットページなどのプライベートIPアドレスから提供されるページは、FLoC計算の一部にはなりません。
+
+## FLoC JavaScript APIはどのように機能しますか？
+
+{% Aside %} Chrome 89から91まで実行されていたFLoCの初期バージョンのオリジントライアル[は終了しました](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)。 {% endAside %}
+
+FLoC APIが単純に`id`と`version`提供するオブジェクトに解決されるpromiseを返す単一のメソッドです。
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+利用可能になったコホートデータは次のようになります。
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+`version`値により、FLoCを使用しているサイトは、コホートIDが参照しているブラウザーとFLoCモデルを知ることができます。以下で説明するように、 `document.interestCohort()`に返されたpromiseは `interest-cohort`権限が有効にしないフレームに対して拒否されます。
+
+## WebサイトはFLoC計算に含まれないようにオプトアウトできますか？
+
+`interest-cohort`権限ポリシーを使用すると、サイトは、コホート計算の目的にしているユーザーのサイトリストに含めたくないことを宣言できます。ポリシーはディフォルトで`許可`されます。`document.interestCohort()`によって返されるpromiseは、 `interest-cohort`権限が許可されていないフレームを拒否します。メインフレームに`interest-cohort`権限がない場合、ページへのアクセスはインタレストコホートの計算に含まれません。
+
+たとえば、サイトは次のHTTP応答ヘッダーを送信することですべてのFLoCコホート計算をオプトアウトできます。
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## ユーザーは、サイトがブラウザーのFLoCコホートを取得するのを止めることができますか？
+
+`chrome://settings/privacySandbox`でプライバシーサンドボックスを無効にした場合、JavaScriptを介して要求されたときに、ブラウザーはユーザーのコホートを提供しません。`document.interestCohort()`によって返されるpromiseは拒否されます。
+
+## どうすれば提案をしたりフィードバックを提供したりできますか？
+
+APIについてコメントがある場合は、 [FLoCExplainer](https://github.com/WICG/floc)リポジトリで[issueを作成してください。](https://github.com/WICG/floc/issues/new)
+
+## 詳細はこちら
+
+- [プライバシーサンドボックスを掘り下げる](/digging-into-the-privacy-sandbox/)
+- [FLoC Explainer](https://github.com/WICG/floc)
+- [FLoCOriginのトライアルとクラスタリング](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+- [FLoCAPIのコホートアルゴリズムの評価](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+写真: [Unsplash](https://unsplash.com/@rhyskentish) でアップロードされます。 [Sergey Zolkin](https://unsplash.com/photos/I5AYxsxSuVA)に撮影されました。
diff --git a/src/site/content/ja/blog/get-installed-related-apps/index.md b/src/site/content/ja/blog/get-installed-related-apps/index.md
new file mode 100644
index 00000000000..fdb5cdd6803
--- /dev/null
+++ b/src/site/content/ja/blog/get-installed-related-apps/index.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: アプリはインストールされていますか？ getInstalledRelatedApps（）が教えます！
+subhead: "`getInstalledRelatedApps（）`方法を使用することにより、WebサイトでiOS / Android /desktopアプリまたはPWAがユーザーのデバイスにインストールされているか確認できます。"
+authors:
+  - petelepage
+description: getInstalledRelatedApps（）APIは、WebプラットフォームAPIで、 iOS / Android /desktopアプリまたはPWAがユーザーのデバイスににインストールされているか確認できます。
+date: 2018-12-20
+updated: 2021-09-16
+tags:
+  - blog
+  - capabilities
+hero: image/admin/v9t93rXITPqFe3L0qlTN.jpg
+alt: アプリパネルが開いている状態のモバイルデバイス
+feedback:
+  - api
+---
+
+## getInstalledRelatedApps() APIとは何ですか？ {: ＃何 }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486" %}Webサイトが<code>getInstalledRelatedApps()</code>を使用してAndroidアプリが既にインストールされているか確認します。</figure>
+
+[`getInstalledRelatedApps()`](https://wicg.github.io/get-installed-related-apps/spec/)は*あなたの*ページで*あなたの*Mobile/Desktopアプリが、または場合によって、Progresssive Web App (PWA)がユーザーのデバイスに既にインストールされているかを確認でき、ユーザーエクスペリエンスをカスタマイズできます。
+
+たとえば、アプリがすでにインストールされている場合：
+
+- ユーザーを商品マーケティングページからアプリに直接リダイレクトします。
+- 通知が重複しないように、他のアプリでの通知など一部の機能を一元化します。
+- 他のアプリがすでにインストールされている場合は、PWA[のインストール](/customize-install/)を宣伝しません。
+
+`getInstalledRelatedApps()`  APIを使用するには、アプリにサイトについて通知してから、サイトにアプリについて通知する必要があります。 2つの関係を定義したら、アプリがインストールされているかどうかを確認できます。
+
+### 確認できる対応Appの種類
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>アプリの種類</th>
+        <th>からチェック可能</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#check-android">Androidアプリ</a></td>
+        <td>Androidのみ<br>Chrome80またはそれ以降</td>
+      </tr>
+      <tr>
+        <td><a href="#check-windows">Windows（UWP）アプリ</a></td>
+        <td>Windowsのみ<br>Chrome85またはそれ以降<br>Edge85またはそれ以降</td>
+      </tr>
+      <tr>
+        <td>プログレッシブウェブアプリ<br><a href="#check-pwa-in-scope">同じスコープ</a>または<a href="#check-pwa-out-of-scope">別のスコープに</a>インストールされています。</td>
+        <td>Androidのみ<br>Chrome84またはそれ以降</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} `getInstalledRelatedApps()` *APIでは、アプリがインストールされているかどうかのみを確認できます。インストールされたアプリのリストを取得すること、他のサードパーティのアプリがインストールされているかどうかを確認したりすることはできません。* {% endAside %}
+
+<!--  Android App -->
+
+## Androidアプリがインストールされているかどうかを確認します{: #check-android}
+
+WebサイトはAndroidアプリがインストールされているか確認できます。
+
+{% Compare 'better', 'Supported on' %} Android：Chrome80またそれ以降{% endCompare %}
+
+### WebサイトについてAndroid アプリに通知します。
+
+まず、[Digital AssetLinksシステム](https://developers.google.com/digital-asset-links/v1/getting-started)を使用して、WebサイトとAndroidアプリの関係を定義することにAndroidアプリを更新する必要があります。これにより、AndroidアプリがインストールされているかどうかをWebサイトのみが確認できるようになります。
+
+Androidアプリの`AndroidManifest.xml`に `asset_statements`エントリを追加します。
+
+```xml
+<manifest>
+  <application>
+   …
+    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
+   …
+  </application>
+</manifest>
+```
+
+次に、 `strings.xml`に次のアセットステートメントを追加し、ドメインで `site`を更新します。エスケープ文字を含めるようにしてください。
+
+```xml
+<string name="asset_statements">
+  [{
+    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
+    \"target\": {
+      \"namespace\": \"web\",
+      \"site\": \"https://example.com\"
+    }
+  }]
+</string>
+```
+
+完了したら、更新したAndroidアプリをPlay storeに公開します。
+
+### Androidアプリについてwebsiteに通知します。
+
+次に、[Webアプリマニフェストをページに追加](/add-manifest/) して、 AndroidアプリについてWebサイトに通知します。 マニフェストには、`related_applications`プロパティ、つまり `platform`や`id`などのアプリに関する詳細を提供する配列を含める必要があります。
+
+- `platform`が `play`必要があります
+- `id`はAndroidアプリのGooglePlayアプリケーションIDです
+
+```json
+{
+  "related_applications": [{
+    "platform": "play",
+    "id": "com.android.chrome",
+  }]
+}
+```
+
+### アプリがインストールされているかどうかを確認します
+
+最後に、 [`navigator.getInstalledRelatedApps()`](#use)を呼び出して、Androidアプリがインストールされているかどうかを確認します。
+
+[デモ](https://get-installed-apps.glitch.me/)をお試しください
+
+<!--  Windows App -->
+
+## Windows（UWP）アプリがインストールされているかどうかを確認します{: #check-windows}
+
+Webサイトでは、Windowsアプリ（UWPを使用して構築）がインストールされているかどうかを確認できます。
+
+{% Compare 'better', 'Supported on' %} Windows：Chrome 85またはそれ以降、Edge85またはそれ以降{% endCompare %}
+
+### WebサイトについてWindowsアプリに通知します。
+
+[URIハンドラー](https://docs.microsoft.com/windows/uwp/launch-resume/web-to-app-linking)を使用して、WebサイトとWindowsアプリケーション間の関係を定義するには、Windowsアプリを更新する必要があります。これにより、あなたのWebサイトでしかWindowsアプリがインストールされているかを確認できません。
+
+`Windows.appUriHandler`拡張機能登録をアプリのマニフェストファイル`Package.appxmanifest`追加します。たとえば、ウェブサイトのアドレスが`example.com`場合、アプリのマニフェストに次のエントリを追加します。
+
+```xml
+<Applications>
+  <Application Id="App" ... >
+      ...
+      <Extensions>
+         <uap3:Extension Category="windows.appUriHandler">
+          <uap3:AppUriHandler>
+            <uap3:Host Name="example.com" />
+          </uap3:AppUriHandler>
+        </uap3:Extension>
+      </Extensions>
+  </Application>
+</Applications>
+```
+
+`<Package>`属性に[`uap3`名前空間](https://docs.microsoft.com/uwp/schemas/appxpackage/uapmanifestschema/element-uap3-extension-manual#examples)を追加する必要がある場合があることに注意してください。
+
+`windows-app-web-link`という名前で`.json`ファイル（.jsonファイル拡張子なし）を作成し、アプリのパッケージファミリー名を指定します。そのファイルをサーバールートまたは`/.well-known/`ディレクトリに配置します。パッケージファミリー名は、アプリケーションマニフェストデザイナのパッケージングセクションにあります。
+
+```json
+[{
+  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
+  "paths": [ "*" ]
+}]
+```
+
+URIハンドラーの設定の詳細については、「 [アプリURIハンドラーを使用してWebサイトでアプリ](https://docs.microsoft.com/windows/uwp/launch-resume/web-to-app-linking)を有効にする」を参照してください。
+
+### WindowsアプリについてWebサイトに通知します。
+
+次に、Webアプリマニフェストをページに[追加して、](/add-manifest/) WindowsアプリについてWebサイトに通知します。 マニフェストには、`related_applications`プロパティ、つまり `platform`や`id`などのアプリに関する詳細を提供する配列を含める必要があります。
+
+- `platform`には`windows`必要があります
+- `id`は、アプリのパッケージファミリ名であり、 `Package.appxmanifest`ファイルの`<Application>` `Id`値が追加されます。
+
+```json
+{
+  "related_applications": [{
+    "platform": "windows",
+    "id": "MyApp_9jmtgj1pbbz6e!App",
+  }]
+}
+```
+
+### アプリがインストールされているかを確認します
+
+最後に、 [`navigator.getInstalledRelatedApps()`](#use)を呼び出して、Windowsアプリがインストールされているかどうかを確認します。
+
+<!--  PWA - in scope -->
+
+## Progressive Web Appがすでにインストールされているかを確認します（範囲内{: #check-pwa-in-scope}
+
+PWAは、すでにインストールされているかどうかを確認できます。この場合、リクエストを行うページは同じドメイン上にあり、Webアプリマニフェストの範囲で定義されているように、PWA[のスコープ内にある必要があります。](/add-manifest/#scope)
+
+{% Compare 'better', 'Supported on' %} Android：Chrome84以降{% endCompare %}
+
+### PWA にそれ自体を伝えください
+
+PWAの[Webアプリマニフェストに](/add-manifest/)`related_applications`エントリを追加して、PWAにそれ自体について通知します。
+
+- `platform` は`webapp`である必要があります
+- `url`は、PWAのWebアプリマニフェストへのフルパスです。
+
+```json
+{
+  …
+  "scope": "/",
+  "start_url": "/",
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://example.com/manifest.json",
+  }],
+  …
+}
+```
+
+### PWAがインストールされているかどうかを確認します
+
+最後に、 [PWAの範囲](/add-manifest/#scope)内から[`navigator.getInstalledRelatedApps()`](#use)を呼び出して、インストールされているかどうかを確認します。 `getInstalledRelatedApps()`がPWAの範囲外で呼び出された場合、falseが返されます。詳細については、次のセクションを参照してください。
+
+[デモ](https://gira-same-domain.glitch.me/pwa/)をお試しください
+
+<!--  PWA - NOT in scope -->
+
+## Progressive Web Appがインストールされているかどうかを確認します（範囲外）{: #check-pwa-out-of-scope}
+
+ページがPWAの[範囲](/add-manifest/#scope)外であっても、WebサイトはPWAがインストールされているかどうかを確認できます。 例えば、`/landing/`から提供されるランディングページは、 `/pwa/`から提供されるPWAがインストールされているかどうか、またはランディングページが`www.example.com`から提供され、PWAが`app.example.com`から提供されるかどうかを確認できます。
+
+{% Compare 'better', 'Supported on' %} Android：Chrome84またはそれ以降{% endCompare %}
+
+### WebサイトについてPWAに通知します。
+
+まず、PWAが提供されているサーバーにデジタルアセットLinkを追加する必要があります。これは、WebサイトとPWAの関係を定義するのに役立ち、WebサイトのみがPWAがインストールされているかどうかを確認できます。
+
+追加`assetlinks.json`にファイルを[`/.well-known/`](https://tools.ietf.org/html/rfc5785)例えば、PWAが住んでいるドメインのディレクトリ`app.example.com` 。 `site`プロパティで、チェックを実行するWebアプリマニフェストへのフルパスを指定します（PWAのWebアプリマニフェストではありません）。
+
+```json
+// Served from https://app.example.com/.well-known/assetlinks.json
+[
+  {
+    "relation": ["delegate_permission/common.query_webapk"],
+    "target": {
+      "namespace": "web",
+      "site": "https://www.example.com/manifest.json"
+    }
+  }
+]
+```
+{% Aside %}
+`assetlinks.json`ファイルを作成するときにファイル名を再確認してください。デバッグに何時間もかかってしまい、ファイル名に「s」を追加したことに気づきました。 {% endAside %}
+
+### PWAについてWebサイトに伝えます
+
+次に、Webアプリマニフェストをページに[追加して、](/add-manifest/) PWAアプリについてWebサイトに通知します。 マニフェストには、`related_applications` プロパティ、つまり`platform`や`url`などのPWAに関する詳細を提供する配列を含める必要があります。
+
+- `platform` は`webapp`である必要があります
+- `url`は、PWAのWebアプリマニフェストへのフルパスです。
+
+```json
+{
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://app.example.com/manifest.json",
+  }]
+}
+```
+
+### PWAがインストールされているかどうかを確認します
+
+最後に、 [`navigator.getInstalledRelatedApps()`](#use)を呼び出して、PWAがインストールされているかどうかを確認します。
+
+[デモ](https://gira-same-domain.glitch.me/)をお試しください
+
+<!--  Use the API-->
+
+## getInstalledRelatedApps() を呼び出す {: #use }
+
+`navigator.getInstalledRelatedApps()`呼び出すと、ユーザーのデバイスにインストールされているアプリの配列で解決されるPromiseが返されます。
+
+```js
+const relatedApps = await navigator.getInstalledRelatedApps();
+relatedApps.forEach((app) => {
+  console.log(app.id, app.platform, app.url);
+});
+```
+
+サイトが独自のアプリを幅広くテストすることを防ぐために、Webアプリマニフェストで宣言された最初の3つのアプリのみが実施できます。
+
+他のほとんどの強力なWebAPIと同様に、 `getInstalledRelatedApps()` **APIは、HTTPS経由で**提供される場合にのみ使用できます。
+
+## まだ質問がありますか？ {: #questions }
+
+まだ質問がありますか？ StackOverflowの [`getInstalledRelatedApps`タグ](https://stackoverflow.com/search?q=getinstalledrelatedapps)を取得して、他に同じ質問があるかを確認してください。ない場合は、[そこで質問](https://stackoverflow.com/questions/tagged/progressive-web-apps)し、必ず[`progressive-web-apps`](https://stackoverflow.com/questions/tagged/progressive-web-apps)タグを付けてください。私たちのチームはそのタグを頻繁に監視し、質問に答えようとします。
+
+## フィードバック{: #feedback }
+
+Chromeの実装にバグを見つけましたか？それとも、実装は仕様とは異なりますか？
+
+- [https://new.crbug.comで](https://bugs.chromium.org/p/chromium/issues/entry?components=Mobile%3EWebAPKs)バグを報告してください。できるだけ詳細を含め、バグを再現するための簡単な手順を提供し、**コンポーネント**ボックスに`Mobile>WebAPKs`[Glitch](https://glitch.com)は、すばやく簡単に再現を共有するのに最適です。
+
+## APIのサポートを表示する
+
+`getInstalledRelatedApps()` APIを使用する予定ですか？パブリックサポートは、Chromeチームが機能に優先順位を付けること、他のブラウザベンダーにそれらをサポートの重要性を示すのに役立ちます。
+
+- [WICG Discourseスレッド](https://discourse.wicg.io/t/proposal-get-installed-related-apps-api/1602)でAPIをどのように使用する予定かを共有します。
+- ハッシュタグ[<code>#getInstalledRelatedApps</code>](https://twitter.com/chromiumdev)を使用して<a>@ChromiumDev</a>にツイートを送信し、どこでどのようにそれを使用しているか私たちにお知らせください。
+
+## 役立つリンク{: #helpful }
+
+- [`getInstalledRelatedApps()` APIの公開説明者](https://github.com/WICG/get-installed-related-apps/blob/main/EXPLAINER.md)
+- [スペックドラフト](https://wicg.github.io/get-installed-related-apps/spec/)
+- [バグの追跡](https://bugs.chromium.org/p/chromium/issues/detail?id=895854)
+- [ChromeStatus.comエントリ](https://www.chromestatus.com/feature/5695378309513216)
+- 点滅コンポーネント： [`Mobile>WebAPKs`](https://chromestatus.com/features#component%3A%20Mobile%3EWebAPKs)
+
+## ご感謝
+
+Windowsアプリテストの詳細をご努力頂いたMicrosoftのSunggookChue氏と、Chrome の詳細についてのご協力頂いたRayanKanso氏には、特に感謝いたします。
diff --git a/src/site/content/ja/blog/how-to-use-local-https/index.md b/src/site/content/ja/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..dc5521c1cf9
--- /dev/null
+++ b/src/site/content/ja/blog/how-to-use-local-https/index.md
@@ -0,0 +1,270 @@
+---
+title: ローカル開発にHTTPSを使用する方法
+subhead: 場合によっては、HTTPSを使用してローカル開発サイトを実行する必要があります。これを安全かつ迅速に行うためのツールとヒント。
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %}ほとんどの場合、 `http://localhost`が必要な処理を実行します。通常、ブラウザでは、HTTPSのように動作します🔒。そのため、デプロイされたHTTPサイトで動作しない一部のAPIが`http://localhost`で動作します。
+
+つまり、カスタムホスト名やブラウザ間でのセキュアCookieなど、**特別な場合にのみ**HTTPSをローカルで使用する必要があるということです ([ローカル開発にHTTPSを使用する場合](/when-to-use-local-https)を参照)。該当する場合はお読みください。{% endAside %}
+
+*この投稿では、`localhost`に関する説明は、`127.0.0.1`と`[::1]`にも有効です。これらはいずれも、「ループバックアドレス」とも呼ばれるローカルコンピュータアドレスを記述しているためです。また、簡単にするために、ポート番号は指定されていません。**したがって、`http://localhost`は、 `http://localhost:{PORT}`または`http://127.0.0.1:{PORT}`と読んでください。*
+
+本番WebサイトがHTTPSを使用している場合は、ローカル開発サイトを**HTTPSサイトのよう**に動作させる必要があります (本番WebサイトがHTTPSを使用していない場合は、[HTTPSへの切り替えを優先します](/why-https-matters/))。ほとんどの場合、 `http://localhost`を信頼し、**HTTPSサイトのように**動作させることができます。ただし、[場合によっては](/when-to-use-local-https)、HTTPSを使用してサイトをローカルで実行する必要があります。次に、この方法について説明します。
+
+**⏩簡単な手順をお探しの場合、またはすでにこのトピックを読んだ場合は、[チートシート](#using-mkcert-cheatsheet)を開いてください。**
+
+## mkcertを使用してHTTPSでサイトをローカルで実行する (推奨)
+
+ローカル開発サイトでHTTPSを使用し、`https://localhost`または`https://mysite.example` (カスタムホスト名) にアクセスするには、[TLS証明書](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate)が必要です。ただし、証明書だけではブラウザによって有効だと見なされません。証明書は、**[信頼できる認証局 (CA)](https://en.wikipedia.org/wiki/Certificate_authority)**と呼ばれる、ブラウザによって信頼されている機関によって**署名**されている必要があります。
+
+必要な手順は、証明書を作成し、デバイスとブラウザによって**ローカルで信頼**されているCAで署名することです。[mkcert](https://github.com/FiloSottile/mkcert)はこの手順を支援するためのツールであり、数個のコマンドで手順を実行できます。次に、このツールの仕組みについて説明します。
+
+- HTTPSを使用してブラウザでローカルに実行されているサイトを開くと、ブラウザがローカル開発サーバーの証明書を確認します。
+- ブラウザは、証明書がmkcertによって生成された認証局によって署名されていることを確認すると、証明書が信頼できる認証局として登録されているかどうかを確認します。
+- mkcertは信頼できる機関として登録されているため、ブラウザは証明書を信頼し、HTTPS接続を作成します。
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="mkcertの動作の仕組みの図。", width="800", height="787" %} <figcaption>mkcertの動作の仕組みの図。</figcaption></figure>
+
+mkcert (および類似したツール) には、次のようなさまざまな利点があります。
+
+- mkcertは、**ブラウザによって有効な証明書と見なされる証明書に準拠した**証明書の作成に特化しています。mkecertによって作成された証明書は、常に更新され、要件とベストプラクティスに適合しています。このため、mkcertコマンドを実行して、適切な証明書を生成ときには、複雑な構成や引数が必要ありません。
+- mkcertはクロスプラットフォームツールです。全員が使用できます。
+
+mkcertは、ローカル開発用のTLS証明書を作成するために推奨されるツールです。[他のオプション](#running-your-site-locally-with-https-other-options)もご覧ください。
+
+多くのオペレーティングシステムには、[openssl](https://www.openssl.org/)などの証明書を生成するためのライブラリが含まれている場合があります。 このようなライブラリは、mkcertや類似したツールとは異なり、一貫して正しい証明書を生成しない可能性があります。また、複雑なコマンドの実行が必要になる場合があったり、必ずしもクロスプラットフォームではなかったりします。
+
+{% Aside 'gotchas' %} この投稿で注目しているmkcerは[こちら](https://github.com/FiloSottile/mkcert)です。[こちら](https://www.npmjs.com/package/mkcert)ではありません。{% endAside %}
+
+### 注意
+
+{% Aside 'caution' %}
+
+- `mkcert -install`を実行するときにmkcertによって自動的に作成されるファイル`rootCA-key.pem`は絶対にエクスポートしたり共有したりしないでください。**攻撃者がこのファイルを入手すると、ユーザーがアクセスしている可能性のあるすべてのサイトに対して中間者攻撃が発生する可能性があります**。攻撃者はユーザーのコンピュータから銀行、医療機関、またはソーシャルネットワークなどの任意のサイトへの安全な要求を傍受する可能性があります。ファイルが安全であることを確認するために、`rootCA-key.pem`が格納されている場所を知る必要がある場合は、`mkcert -CAROOT`を実行してください。
+- mkcertは**開発目的**でのみ使用してください。特に、絶対にエンドユーザーにmkcertコマンドの実行を依頼しないでください。
+- 開発チーム: チームのすべてのメンバーは、mkcertを**個別**にインストールして実行する必要があります (CAと証明書は保存、共有しないこと)。
+
+{% endAside %}
+
+### セットアップ
+
+1. mkcertをインストールします (1回のみ)。
+
+    オペレーティングシステムにmkcertをインストールするための[手順](https://github.com/FiloSottile/mkcert#installation)に従います。たとえば、macOSの場合は次のように実行します。
+
+    ```bash
+    brew install mkcert
+    brew install nss # if you use Firefox
+    ```
+
+2. ローカルルートCAにmkcertを追加します。
+
+    ターミナルで、次のコマンドを実行します。
+
+    ```bash
+    mkcert -install
+    ```
+
+    これにより、ローカル認証局 (CA) が生成されます。 mkcertで生成されたローカルCAは、デバイス上で**ローカル**でのみ信頼されます。
+
+3. mkcertによって署名されたサイトの証明書を生成します。
+
+    ターミナルで、サイトのルートディレクトリ、または証明書を保存するディレクトリに移動します。
+
+    次のコマンドを実行します。
+
+    ```bash
+    mkcert localhost
+    ```
+
+    `mysite.example`ようなカスタムホスト名を使用している場合は、次のコマンドを実行します。
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    上記のコマンドは2つの処理を実行します。
+
+    - 指定したホスト名の証明書を生成する
+    - mkcert (手順2でローカルCAとして追加した認証局) にこの証明書に署名させます。
+
+    これで、証明書の準備が整い、ブラウザによってローカルで信頼される認証局が署名しました。これで手順はほぼ完了ですが、サーバーはまだ証明書を認識していません。
+
+4. サーバーを構成します。
+
+    (開発サーバーはデフォルトでHTTPを使用する傾向があるため) ここで、HTTPSを使用し、作成したTLS証明書を使用するようにサーバーに命令します。
+
+    この正確な方法はサーバーによって異なります。次に例をいくつか示します。
+
+    **👩🏻‍💻ノードあり:**
+
+    `server.js` (`{PATH/TO/CERTIFICATE...}`および`{PORT}`を置換):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻http[サーバーを使用](https://www.npmjs.com/package/http-server):**
+
+    次のようにサーバーを起動します (`{PATH/TO/CERTIFICATE...}`を置換)。
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S`はHTTPSでサーバーを実行し、 `-C`は証明書を設定し、`-K`はキーを設定します。
+
+    **👩🏻‍💻React開発サーバーを使用する場合：**
+
+    `package.json`を次のように編集し、 `{PATH/TO/CERTIFICATE...}`を置換します。
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    たとえば、次のようにサイトのルートディレクトリに`localhost`証明書を作成した場合:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    `start`スクリプトは次のようになります。
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻その他の例:**
+
+    - [Angular開発サーバー](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨これで完了です。 `https://localhost`または`https://mysite.example`をブラウザ開きます。HTTPSを使用してローカルでサイトを実行しています。ブラウザはローカル認証局としてmkcertを信頼しているため、ブラウザの警告は表示されません。
+
+{% Aside %}サーバーがHTTPSに別のポートを使用している可能性があります。 {% endAside %}
+
+### mkcertの使用: チートシート
+
+{% Details %} {% DetailsSummary %} mkcertの概要{% endDetailsSummary %}
+
+HTTPSを使用してローカル開発サイトを実行するには、次の手順に従います。
+
+1. mkcertを設定します。
+
+    まだインストールしていない場合は、mkcertをインストールします。次に、macOSの例を示します。
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    WindowsおよびLinuxの手順については、 [mkcertのインストールを](https://github.com/FiloSottile/mkcert#installation)確認してください。
+
+    次に、ローカル認証局を作成します。
+
+    ```bash
+    mkcert -install
+    ```
+
+2. 信頼できる証明書を作成します。
+
+    ```bash
+    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
+    ```
+
+    これにより、有効な証明書が作成されます (`mkcert`によって自動的に署名されます)。
+
+3. HTTPSと手順2で作成した証明書を使用するように開発サーバーを構成します。
+
+4. ✨これで完了です。これで、ブラウザで警告が表示されずに`https://{YOUR HOSTNAME}`にアクセスできます。
+
+{% Aside 'caution' %}
+
+**これは開発目的**でのみ実行し、`rootCA-key.pem`ファイルは**絶対にエクスポートまたは共有しない** でください (ファイルが安全であることを確認するためにこのファイルの場所を知る必要がある場合は、`mkcert -CAROOT`を実行してください)。
+
+{% endAside %}
+
+{% endDetails %}
+
+## HTTPSを使用してサイトをローカルで実行する: その他のオプション
+
+### 自己署名証明書
+
+また、mkcertのようなローカル認証局を使用せずに**自分で証明書に署名**することもできます。
+
+この方法には問題点がいくつかあるので注意が必要です。
+
+- ブラウザによって認証局として信頼されていないため、手動でバイパスする必要があるという警告が表示されます。 Chromeでは、`#allow-insecure-localhost`フラグを使用して、`localhost`で表示されるこの警告を回避できます。
+- 保護されていないネットワークで作業している場合は、安全ではありません。
+- 自己署名証明書は、信頼できる証明書とまったく同じようには動作しません。
+- mkcertのようなローカルCAを使用する場合と比べ、必ずしも簡単または高速であるとは限りません。
+- ブラウザのコンテキストでこの手法を使用していない場合、サーバーの証明書の検証を無効にしなければならないことがあります。本番環境で再有効化しないと危険です。
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="自己署名証明書が使用されたときにブラウザに表示される警告のスクリーンショット。", width="800", height="598" %} <figcaption>自己署名証明書が使用されると、警告ブラウザが表示されます。</figcaption></figure>
+
+{% Aside %}証明書を指定しない場合、 [React](https://create-react-app.dev/docs/using-https-in-development/)および[Vueの](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve)開発サーバーのHTTPSオプションは、内部で自己署名証明書を作成します。これは簡単ですが、ブラウザの警告が表示され、上記の自己署名証明書に関連するその他の落とし穴が発生します。幸い、フロントエンドフレームワークの組み込みHTTPSオプション**を**使用して、mkcertなどを介して作成されたローカルで信頼できる証明書を指定できます。 [Reactの例を使用](/#setup:~:text=a%20React%20development%20server)したmkcertでこれを行う方法を参照してください。 {% endAside %}
+
+{% Details %} {% DetailsSummary %}ブラウザが自己署名証明書を信頼しないのはなぜですか。{% endDetailsSummary %}
+
+HTTPSを使用してブラウザでローカルに実行されているサイトを開くと、ブラウザはローカル開発サーバーの証明書を確認します。ブラウザで証明書がユーザーによって署名されていることが確認されると、信頼できる認証局として登録されているかどうかがチェックされます。信頼できる認証局として登録されていないため、ブラウザは証明書を信頼できません。接続が安全でないことを通知する警告が表示されます。自己責任で続行できます。続行すると、HTTPS接続が作成されます。
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="ブラウザが自己署名証明書を信頼しない理由: 図。", width="800", height="833" %} <figcaption>ブラウザが自己署名証明書を信頼しない理由。</figcaption></figure>
+
+{% endDetails %}
+
+### 通常の認証局によって署名された証明書
+
+また、ローカルではなく実際の認証局に証明書に署名させるという手法もあります。
+
+これらの手法の使用を検討している場合は、次の点に注意してください。
+
+- mkcertなどのローカルCA手法を使用するときよりも、セットアップ作業が多くなります。
+- 管理している有効なドメイン名を使用する必要があります。つまり、次の場合には、実際の認証局を**使用できません**。
+    - `localhost`および[予約](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml)されているその他のドメイン名 (例: `example`や`test`)。
+    - 管理していないドメイン名。
+    - 無効な最上位のドメイン。[有効な最上位のドメインの一覧](https://www.iana.org/domains/root/db)を参照してください。
+
+### リバースプロキシ
+
+別の方法として、HTTPSを使用してローカルで実行されているサイトにアクセスするときに、[ngrok](https://en.wikipedia.org/wiki/Reverse_proxy)などの[リバースプロキシ](https://ngrok.com/)を使用できます。
+
+次の点を考慮してください。
+
+- リバースプロキシで作成されたURLを共有すると、全員がローカル開発サイトにアクセスできます。これは、顧客に対してプロジェクトのデモを行うときには非常に便利です。しかし、プロジェクトの機密性が高い場合は、これがマイナス面になる可能性があります。
+- 価格設定を検討する必要があるかもしれません。
+- ブラウザの新しい[セキュリティ対策](/cors-rfc1918-feedback/)は、このようなツールの動作に影響を与える可能性があります。
+
+### フラグ (非推奨)
+
+`mysite.example`などのカスタムホスト名を使用している場合は、Chromeでフラグを使用して、`mysite.example`が安全であると強制的に見なすことができます。**これを行うことは避けてください。**理由は次のとおりです。
+
+- `mysite.example`が常にローカルアドレスに対して解決されることが100%確実である必要があります。そうしないと、本番環境の資格情報が漏洩する可能性があります。
+- この方法では、ブラウザ間でデバッグできません🙀。
+
+*寄稿とフィードバックに協力してくださったすべての校閲者と寄稿者、特にRyan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewoodに感謝申し上げます。 🙌*
+
+*[Unsplash](https://unsplash.com/photos/pbxwxwfI0B4)の[@anandu](https://unsplash.com/@anandu)によるヒーロー画像背景、編集済み。*
diff --git a/src/site/content/ja/blog/iframe-lazy-loading/index.md b/src/site/content/ja/blog/iframe-lazy-loading/index.md
new file mode 100644
index 00000000000..ccfc43715e7
--- /dev/null
+++ b/src/site/content/ja/blog/iframe-lazy-loading/index.md
@@ -0,0 +1,226 @@
+---
+layout: post
+title: 今こそ、オフスクリーンiframeの遅延読み込み
+subhead: iframe用のブラウザレベルのビルトイン遅延読み込みはこちら
+authors:
+  - addyosmani
+date: 2020-07-24
+updated: 2022-08-15
+hero: image/admin/dMCW2Qqi5Qp2DB3w4DyE.png
+alt: 画像とアセットを読み込んでいるスマートフォンのアウトライン
+description: この投稿では、loading属性と、それを使用してiframeの読み込みを制御する方法について説明します。
+tags:
+  - blog
+  - performance
+  - memory
+feedback:
+  - api
+---
+
+[画像の標準化された遅延読み込み](/browser-level-image-lazy-loading/)はChrome 76で`loading`属性という形で導入され、その後Firefoxでも導入されました。そして、今、**iframeのブラウザレベルの遅延読み込み**が[標準化](https://github.com/whatwg/html/pull/5579)され、ChromeおよびChromiumベースのブラウザでもサポートされるようになりました。
+
+```html/1
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+```
+
+iframeの標準化された遅延読み込みは、ユーザーがiframeの近くをスクロールするまで、オフスクリーンiframeが読み込まれないようにします。これにより、データが節約され、ページの他の部分の読み込みが高速化し、メモリ使用量が削減されます。
+
+この`<iframe loading=lazy>`の[デモ](https://lazy-load.netlify.app/iframes/)は、遅延読み込みの動画埋め込みを示しています。
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+### iframeを遅延読み込みすべき理由
+
+サードパーティの埋め込みは、動画再生ツールから、ソーシャルメディアの投稿、広告まで、幅広いユースケースに対応しています。多くの場合、このコンテンツはユーザーのビューポートにすぐには表示されず、ページをさらに下にスクロールして初めて表示されます。それにもかかわらず、ユーザーは、スクロールしない場合でも、フレームごとにデータのダウンロードと高額なJavaScriptのコストを支払っています。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqZMRuULxbz6DVXNP8ea.png", alt="iframeでiframe遅延読み込みを使用することによるデータの節約。この例では、即時読み込みでは3MBを取り込みますが、遅延読み込みでは、ユーザーがiframeの近くにスクロールするまで、このコードを取り込みません。", width="800", height="460" %}</figure>
+
+[データセーバーユーザー向けのオフスクリーンiframeの自動遅延読み込み](https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html)に関するChromeの調査に基づくと、iframeの遅延読み込みにより、データの節約の中央値が2〜3％、中央値での[最初のコンテンツフルペイントの](/fcp/)[削減が1〜2％、95パーセンタイルで](/fid/)[最初の入力遅延](/fid/)(FID)が2%改善される可能性があります。
+
+### ビルトインのiframeの遅延読み込みの機能
+
+`loading`属性を使用すると、ブラウザは、ユーザーがオフスクリーンのiframeや画像の近くをスクロールするまで、それらの読み込みを遅延できます。 `loading`は次の2つの値をサポートします。
+
+- `lazy`: 遅延読み込みの適切な候補です。
+- `eager`: 遅延読み込みには適していません。すぐに読み込みます。
+
+iframeで`loading`属性を使用すると、次のように機能します。
+
+```html
+<!-- iframeの遅延読み込み -->
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+
+<!-- iframeの即時読み込み -->
+<iframe src="https://example.com"
+        width="600"
+        height="400"></iframe>
+
+<!-- Lite Modeでloading="eager" を使用して自動遅延読み込みをオプトアウト  -->
+<iframe src="https://example.com"
+        loading="eager"
+        width="600"
+        height="400"></iframe>
+```
+
+属性をまったく指定しないと、リソースを明示的に即時読み込みするのと同じ影響があります。ただし、[Lite Mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html)のユーザーは、Chromeが`auto`値を使用して遅延読み込みするかどうかを決定します。
+
+JavaScriptを使用して*動的に*iframeを作成する必要がある場合は、要素で`iframe.loading = 'lazy'`を設定することも[サポート](https://bugs.chromium.org/p/chromium/issues/detail?id=993273)されています。
+
+```js/2
+var iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.loading = 'lazy';
+document.body.appendChild(iframe);
+```
+
+#### iframe固有の遅延読み込みの動作
+
+loading属性は、iframeが非表示かどうかによって、画像とは異なる方法でiframeに影響を与えます。(通常、非表示のiframeは分析や通信の目的で使用されます。) Chromeは、次の基準を使用して、iframeが非表示かどうかを判断します。
+
+- iframeの幅と高さが`4px`以下。
+- `display: none`または`visibility: hidden`が適用されている。
+- iframeが負のXまたはY位置を使用してオフスクリーンに配置されている。
+- この条件は`loading=lazy`と`loading=auto`の両方に適用されます。
+
+iframeがこれらの条件のいずれかを満たしている場合、Chromeはそれを非表示と見なし、ほとんどの場合、遅延読み込みを行いません。非表示ではないiframeは、[読み込み距離のしきい値](/browser-level-image-lazy-loading/#load-in-distance-threshold)内にある場合にのみ読み込まれます。 Chromeには、まだ取得中である遅延読み込みiframeのプレースホルダーが表示されます。
+
+### 一般的なiframe埋め込みを遅延読み込みした場合の影響
+
+オフスクリーンiframeの遅延読み込みがデフォルトになるように、Web全体を変更できるとしたらどうでしょうか。この場合は、だいたい次のようになります。
+
+YouTube動画埋め込みの遅延読み込み (最初のページ読み込みで最大500KBを節約):
+
+```html/1
+<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
+        loading="lazy"
+        width="560"
+        height="315"
+        frameborder="0"
+        allow="accelerometer; autoplay;
+        encrypted-media; gyroscope;
+        picture-in-picture"
+        allowfullscreen></iframe>
+```
+
+**エピソード:** Chrome.comのYouTube埋め込みを遅延読み込みに切り替えたとき、モバイルデバイスで対話時間を10秒節約できました。 YouTubeの内部バグを申請して、埋め込みコードに`loading=lazy`を追加するように提案しました。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt="Chrome.comは、YouTube動画埋め込み用のオフスクリーンiframeを遅延読み込みすることで、対話時間を10秒短縮しました", width="800", height="460" %}</figure>
+
+{% Aside %} YouTube埋め込みを読み込むためのより効率的な方法を探している場合は、[YouTube liteコンポーネント](https://github.com/paulirish/lite-youtube-embed)にも検討してみてください。{% endAside %}
+
+**Instagram埋め込みの遅延読み込み (最初の読み込みで100KBを超えるgzip圧縮を削減):**
+
+Instagramの埋め込みは、マークアップのブロックと、ページにiframeを挿入するスクリプトを提供します。このiframeを遅延読み込みすると、埋め込みに必要なすべてのスクリプトを読み込む必要がなくなります。このような埋め込みはほとんどの記事でビューポートの下に表示されることが多いため、iframeの遅延読み込みを検討するべき対象であると考えられます。
+
+**Spotify埋め込みの遅延読み込み (最初の読み込みで514KBを削減):**
+
+```html
+<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
+        loading="lazy"
+        width="300"
+        height="380"
+        frameborder="0"
+        allowtransparency="true"
+        allow="encrypted-media"></iframe>
+```
+
+上記の埋め込みは、メディアコンテンツのiframeを遅延読み込みした場合の潜在的な利点を示していますが、広告でもこのような利点を確認できる可能性があります。
+
+### 事例研究: Facebookのソーシャルプラグインの遅延読み込み
+
+Facebookの*ソーシャルプラグイン*を使用すると、開発者はFacebookコンテンツをWebページに埋め込むことができます。埋め込まれた投稿、写真、動画、コメントなど、このようなプラグインが多数提供されています。最も人気のあるプラグイン[Likeプラグイン](https://developers.facebook.com/docs/plugins/like-button/)で、ページを「いいね」した人の数を表示するボタンです。デフォルトでは、FB JSSDKを使用して、WebページにLikeプラグインを埋め込むと、最大215KBのリソースが取り込まれます。そのうち、197KBはJavaScriptです。多くの場合、プラグインは記事の最後またはページの終わり近くに表示される可能性があるため、オフスクリーンのときに即時読み込みすることは最適ではない可能性があります。
+
+<figure>{% Img src="image/admin/fdy8o61jxPN560IkF2Ne.png", alt="Facebookの「いいね」ボタン", width="800", height="71" %}</figure>
+
+エンジニアのStoyanStefanovのおかげで、[Facebookのすべてのソーシャルプラグインが標準化されたiframe遅延読み込みをサポートするようになりました](https://developers.facebook.com/docs/plugins/like-button#settings)。 プラグインの`data-lazy`構成を使用した遅延読み込みを選択する開発者は、ユーザーが近くをスクロールするまで、読み込みを回避できるようになります。これにより、埋め込みを必要とするユーザーにとっては埋め込みが完全に機能し、ページを最後までスクロールしていないユーザーにとってはデータが節約されます。これは、多数の埋め込みの中でも、本番環境で標準化されたiframe遅延読み込みを検討する最初の埋め込みであると思います。
+
+### iframeクロスブラウザの遅延読み込みも可能。
+
+iframeの遅延読み込みは、プログレッシブエンハンスメントとして適用できます。iframeの`loading=lazy`をサポートするブラウザは、iframeを遅延読み込みしますが、まだブラウザでサポートされていない場合は、`loading`属性が安全に無視されます。
+
+[lazysizes](/use-lazysizes-to-lazyload-images/) JavaScriptライブラリを使用して、オフスクリーンiframeを遅延読み込みすることもできます。これは、次の場合に推奨されることがあります。
+
+- 現在標準化された遅延読み込みが提供している数よりも多くのカスタム遅延読み込みしきい値が必要
+- ブラウザ間で一貫したiframe遅延読み込みエクスペリエンスをユーザーに提供したい
+
+```html/3
+<script src="lazysizes.min.js" async></script>
+
+<iframe frameborder="0"
+	  class="lazyload"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+```
+
+次のパターンを使用して、遅延読み込みを検出し、遅延読み込みがない場合はlazysizesを取得します。
+
+```html/2
+<iframe frameborder="0"
+	  class="lazyload"
+    loading="lazy"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+
+<script>
+  if ('loading' in HTMLIFrameElement.prototype) {
+    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
+
+    iframes.forEach(iframe => {
+      iframe.src = iframe.dataset.src;
+    });
+
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+
+</script>
+```
+
+### WordPressユーザー向けのオプション{: #wordpress }
+
+WordPressサイトには、何年分もの投稿コンテンツに多数のiframeが散在している可能性があります。任意で、WordPressテーマの`functions.php`ファイルに次のコードを追加して、既存のiframeに`loading="lazy"`を自動的に挿入できます。各iframeを個別に手動で更新する必要はありません。
+
+[iframeの遅延読み込みのブラウザレベルサポートもWordPressコアで動作していることに](https://core.trac.wordpress.org/ticket/50756)注意してください。次のスニペットは、関連するフラグをチェックします。これにより、WordPressに機能が組み込まれると、 `loading="lazy"`属性が手動で追加されなくなり、確実にこれらの変更と相互運用可能になり、属性が重複しなくなります。
+
+```php
+// TODO: https://core.trac.wordpress.org/ticket/50756 landsを1回削除。
+function wp_lazy_load_iframes_polyfill( $content ) {
+	// If WP core lazy-loads iframes, skip this manual implementation.
+	if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
+		return $content;
+	}
+
+	return str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+}
+add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );
+```
+
+WordPressサイトがキャッシュを利用している場合 (ヒント: キャッシュは推奨されます)、必ず後でサイトのキャッシュを再構築してください。
+
+### まとめ
+
+iframeの遅延読み込みの標準化されたサポートを組み込むと、Webページのパフォーマンスを大幅に向上させることが簡単にできます。フィードバックがある場合は、[Chromiumバグトラッカーに](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad)問題を送信してください。
+
+また、見逃した場合は、web.devの[画像と動画の遅延読み込みコレクション](/fast/#lazy-load-images-and-video)で詳細な遅延読み込みのアイデアを確認してください。
+
+*Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley、StoyanStefanovのレビューに感謝します。*
diff --git a/src/site/content/ja/blog/javascript-this/index.md b/src/site/content/ja/blog/javascript-this/index.md
new file mode 100644
index 00000000000..dd8be049f94
--- /dev/null
+++ b/src/site/content/ja/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: JavaScript：これはどういう意味ですか？
+subhead: JavaScriptでは `this`の値を理解するのに困る場合がありますが、次のとおりにやってみましょう
+description: JavaScriptでは `this`の値を理解するのに困る場合がありますが、次のとおりにやってみましょう
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+JavaScriptの`this`は笑いネタであり、それはまあ、それはかなり複雑からです。しかし、開発者が`this`対処を避けるために、もっと複雑かつドメイン固有のものをしたことを見られました 。`this`に困れば、この記事が役に立つかもしれません。これが私の`this`についてのガイドです。
+
+最も具体的な状況から始めて、最も具体的でない状況で終わります。この記事は、`if (…) … else if () … else if (…) …`ように大きいものなので、探しているコードに一致する最初のセクションに直接進むことができます。
+
+1. [関数が矢印関数として定義されている場合](#arrow-functions)
+2. [それ以外、関数/クラスが`new`で呼び出された場合](#new)
+3. [それ以外、関数に「バインドされた」 `this`値がある場合](#bound)
+4. [それ以外、`this`がcall-timeに設定されている場合](#call-apply)
+5. [それ以外、関数が親オブジェクト（ `parent.func()` ）を介して呼び出された場合](#object-member)
+6. [それ以外、関数または親スコープが厳密モードにある場合](#strict)
+7. [それ以外の場合](#otherwise)
+
+## 関数が矢印関数として定義されている場合：{: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+この場合には、`this`の値は*常に*親スコープ内にある`this`と同じです：
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+矢印関数では`this`の内側の値が変更されなくて、優れるものです。 *常に*外側の`this`と同じです。
+
+### その他の例
+
+矢印関数の使用により、`this`の値が[`bind`](#bound)に*変更されません* ：
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+矢印関数の使用により、`this`の値が[`call`または`apply`](#call-apply)に*変更されません* ：
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+矢印関数では、別のオブジェクトのメンバーとして関数を呼び出しても、`this`*の値が変更されません*。
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+矢印関数では、コンストラクターとして関数を呼び出しても、`this`*値が変更されません*。
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### 「バインドされた」インスタンスメソッド
+
+インスタンスメソッドでは、`this`が常にクラスインスタンスを参照することを確保したい場合は、最善の方法として矢印関数と[class fields](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields)を使用することを勧めます。
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+このパターンは、コンポーネント（ReactコンポーネントやWebコンポーネントなど）でイベントリスナーとしてインスタンスメソッドを使用する上で非常に役立ちます。
+
+上記は、「`this`は親スコープの `this`と同じになる」というルールに違反しているように感じるかもしれませんが、クラスフィールドをコンストラクターで設定するための糖衣構文のようなものと考えると意味が分かります。
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+代替パッテンには、コンストラクターで既存関数をバインドするか、コンストラクター内で関数を割り当てることが含まれます。何らかの理由でクラスフィールドを使用できない場合は、代替手段としてコンストラクター内で関数を割り当てることをお勧めします。
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## それ以外、関数/クラスが`new`: で呼び出された場合 {: #new }
+
+```js
+new Whatever();
+```
+
+下記のように`this`で `Whatever`（またはクラスの場合はそのconstructor関数）を呼び出し、`Object.create(Whatever.prototype)`の結果に設定します。
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+同様なやり方は古いスタイルのconstructorにも当てはまります。
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### その他の例
+
+`new`で呼び出された場合、 `this` は[`bind`](#bound)で*変更されません*：
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+`new`で呼び出された場合、別のオブジェクトのメンバーとして関数を呼び出しても、`this`の値が*変更されません。*
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## それ以外、関数に「バウンドされた」`this` の値がある場合 : {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+`boundFunction`呼ばれるたびに、その`this`値は`bind` (`boundObject`)に渡されたオブジェクトになります。
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %}`bind`で関数をその外側の`this`に結びつけることは避けてください。代わりに、[矢印関数を使用してください](#arrow-functions)。なぜかと言えば、コードの後半で発生することではなく、関数宣言から`this`明確にするからです。
+
+`bind` で`this`を親オブジェクトに関係のない値に設定しないでください。それは通常期待の通りにならなず、そして`this`がそのような悪い評判を得る理由です。代わりに、引数として値を渡すことを検討してください。より明確で、矢印関数で機能するからです。{% endAside %}
+
+### その他の例
+
+バインドされた関数を呼び出す場合、`this`の値が[`call`または`apply`](#call-apply)に*変更されません* ：
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+バインドされた関数を呼び出す場合、別のオブジェクトのメンバーとして関数を呼び出しても`this`値が*変更されません。*
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## それ以外、 `this`がcall-timeに設定されている場合：{: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+`this`の値に`call`/`apply`に渡されたオブジェクトです 。
+
+{% Aside 'warning' %}`call`/`apply` で `this`を親オブジェクトに関係のない値に設定しないでください。それは通常期待の通りにならなず、そして`this`がそのような悪い評判を得る理由です。代わりに、引数として値を渡すことを検討してください。より明確で、矢印関数で機能するからです。{% endAside %}
+
+残念ながら、 `this`はDOMイベントリスナーなどによって他の値に設定されており、これを使用すると、コードが理解しにくくなる可能性があります。
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+上記の場合などには`this`を使用せず、代わりに次のようにします。
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## それ以外、関数が親オブジェクト (`parent.func()`)を介して呼び出された場合： {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+この場合、関数は`obj`のメンバーとして呼び出されるため、 `this`は`obj`になります。これはcall-timeに発生するため、関数が親オブジェクトなしで、または別の親オブジェクトを使用して呼び出された場合、リンクは切断されます。
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod`*は*`obj`メンバーとして呼び出されないため、`someMethod() === obj`はfalseになります。次のようなことを試みたときに、この落とし穴に遭遇するかもしれません。
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+これは、 `querySelector`の実装がそれ自体の`this`値を調べて、それが一種のDOMノードであると想定するために壊れ、そしてその接続を壊します。上記を正しく機能するには：
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+面白い事実：すべてのAPIが`this`内部で使用しているわけではありません。`console.log`などのコンソールメソッドは`this`参考を回避するように変更されたため、`log`は`console`にバインドされる必要はありません。
+
+{% Aside 'warning' %}`this`を親オブジェクトと関係のない値に設定するためだけで、関数をオブジェクトに移植しないでください。それは通常期待の通りにならなず、そして<code>this</code>がそのような悪い評判を得る理由です。代わりに、引数として値を渡すことを検討してください。より明確で、矢印関数で機能するからです。{% endAside %}
+
+## それ以外、関数または親スコープが厳密モードにある場合： {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+この場合には、`this`の値は未定義です。親スコープが[厳密モード](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode)にある場合（およびすべてのモジュールが厳密モードにある場合）、`'use strict'`は必要ありません。
+
+{% Aside 'warning' %}これに依存しないでください。 `undefined`の値を取得する簡単な方法があります😀。{% endAside %}
+
+## それ以外：{: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+この場合には、`this`の値は`globalThis`と同じです 。
+
+{% Aside %}ほとんどの人（私を含む）は`globalThis`をグローバルオブジェクトと呼んでいますが、これは技術的に100％正しくありません。 ここは単に`global`ではなく`globalThis`と呼ばれる理由が入っている[Mathias Bynensとその詳細](https://mathiasbynens.be/notes/globalthis#terminology)です。 {% endAside %}
+
+{% Aside 'warning' %} `this`を使用してglobal objectを参照することは避けてください（はい、私はまだそれを呼んでいます）。代わりに、より明示的な[`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis) をご使用ください{% endAside %}
+
+## ふぅ！
+
+以上です！それが`this`について把握しているのです。何かご質問はありませんか？見逃したものはありますか？お気軽に[ツイート](https://twitter.com/jaffathecake)してください。
+
+[Mathias Bynens](https://twitter.com/mathias) 、[Ingvar Stepanyan](https://twitter.com/RReverser) 、と[Thomas Steiner](https://twitter.com/tomayac)に見直していただき、誠にありがとうございます。
diff --git a/src/site/content/ja/blog/long-tasks-devtools/index.md b/src/site/content/ja/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..b0e5c8ab03a
--- /dev/null
+++ b/src/site/content/ja/blog/long-tasks-devtools/index.md
@@ -0,0 +1,55 @@
+---
+title: 長い JavaScript タスクによって、対話時間が遅延していませんか？
+subhead: ユーザー操作を阻止するコストの高いタスクを診断する方法を学びます。
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: 砂が落ちている砂時計
+description: 長いタスクはメインスレッドをビジー状態にし、ユーザーの操作を遅らせる可能性があります。Chrome DevTools では、長いタスクを視覚化し、最適化するタスクを簡単に確認できるようになりました。
+tags:
+  - blog
+  - performance
+---
+
+**要約: 長いタスクはメインスレッドをビジー状態にし、ユーザーの操作を遅らせる可能性があります。Chrome DevTools では、長いタスクを視覚化し、最適化するタスクを簡単に確認できるようになりました。**
+
+Lighthouse を使用してページを監査している場合は、ユーザーがページを操作して応答を得ることができるまでの時間を表す [Time to Interactive](/tti/)（TTI/対話時間）という指標に聞き覚えがあるかもしれません。しかし、長い（JavaScript）タスクが  TTI の低下に大きく寄与する可能性があることはご存知ですか？
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Lighthouse のレポートに表示される Time to Interactive", width="800", height="169" %}
+
+## 長いタスクとは？
+
+[長いタスク](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API)とは、メインスレッドを長時間独占し、UI を「フリーズ」させる JavaScript コードです。
+
+Web ページの読み込み中、長いタスクがメインスレッドを拘束してしまい、ページの準備ができているように見えてもユーザー入力に応答できない状況を作り出してしまいます。イベントリスナーやクリックハンドラーなどがまだ接続されていないため、クリックやタップが機能しないことがよくあります。
+
+CPU を多用する長いタスクは、50 ミリ秒以上かかる複雑な作業が原因で発生します。なぜ 50 ミリ秒なのでしょうか？[The RAIL model](/rail/) では、100 ミリ秒以内に視覚的な応答を得るには、ユーザー入力イベントを [50 ミリ秒](/rail/#response-process-events-in-under-50ms)で処理することを推奨しています。そうでない場合、アクションとリアクションの関係が崩れてしまうためです。
+
+## 対話性を遅らせる可能性のある長いタスクが私のページにありますか？
+
+これまでは、[Chrome DevTools](https://developer.chrome.com/docs/devtools/) で 50 ミリ秒を超える長さのスクリプトを示す「長い黄色のブロック」を手動で探すか、[Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) を使用して対話性を遅らせているタスクを特定する必要がありました。これでは少し面倒かもしれません。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="短いタスクと長いタスクの違いを示す DevTools Performance パネルのスクリーンショット", width="800", height="450" %}
+
+パフォーマンス監査ワークフローを容易にするために、[DevTools は長いタスクを視覚化できるようになりました](https://developers.google.com/web/updates/2019/03/devtools#longtasks)。長いタスクである場合、タスク（灰色で表示）には赤いフラグが設定されます。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="Performance パネルで灰色のバーで示される長いタスクに赤いフラグを付けて視覚化する DevTools", width="800", height="450" %}
+
+- [Performance パネル](https://developer.chrome.com/docs/devtools/evaluate-performance/)で、読み込み中の Web ページのトレースを記録します。
+- メインスレッドビューで赤いフラグを探します。タスクは灰色で表示されています（「Task」）。
+- バーにカーソルを合わせると、タスクに掛かる時間と、それが「長い」と見なされたかどうかがわかります。
+
+## 長いタスクの原因は？
+
+長いタスクを引き起こしている原因を見つけるには、灰色の **Task** バーを選択します。下のドロワーで、［**Bottom-Up**］と［**Group by Activity**］を選択します。これにより、完了までに非常に長い時間がかかるタスクに（合計で）最も貢献したアクティビティを確認できます。以下は、コストのかかる DOM クエリのセットのようです。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="DevTools で長いタスク（「Task」ラベル）を選択すると、その原因となったアクティビティにドリルダウンできる。", width="800", height="450" %}
+
+## 長いタスクを最適化する一般的な方法とは？
+
+大規模なスクリプトは多くの場合、長いタスクの主な原因であるため、[それらを分割する](/reduce-javascript-payloads-with-code-splitting)ことを検討してください。また、サードパーティのスクリプトにも注意が必要です。そういったスクリプトの長いタスクは、プライマリコンテンツが対話背を得るまでの時間を遅らせる可能性があります。
+
+すべての作業を小さなチャンク（50 ミリ秒未満で実行できるサイズ）に分割し、これらのチャンクを適切な場所とタイミングで実行します。ワーカーでは、適切な場所がメインスレッドから外れている場合もあります。 Phil Walton の「[Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/)」は、このトピックに関する良い参考書と言えます。
+
+ページの応答性を維持します。ユーザーがサイトにアクセスしたときに楽しいエクスペリエンスを提供できるようにするには、長いタスクを最小限に抑えることが優れた方法と言えます。長いタスクに関する詳細については、「[ユーザー中心のパフォーマンス指標](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks)」をご覧ください。
diff --git a/src/site/content/ja/blog/maskable-icon/index.md b/src/site/content/ja/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..68b538bcdc7
--- /dev/null
+++ b/src/site/content/ja/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: マスカブルアイコンを使用したPWAでのアダプティブアイコンのサポート
+subhead: 対応プラットフォームでアダプティブアイコンを使用するための新しいアイコン形式。
+description: マスカブルアイコンは、より詳細な制御を可能にし、プログレッシブWebアプリでアダプティブアイコンの使用を可能にする新しいアイコン形式です。マスカブルアイコンを提供することで、すべてのAndroidでアイコンの見栄えが良くなります。
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: 白い円の内側に表示されるアイコンと円全体を埋めるアイコンとの比較
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## マスカブルアイコンとは何か。{: #what }
+
+最近のAndroid携帯にプログレッシブWebアプリをインストールした場合、アイコンに白い背景が表示されることに気付くかもしれません。 Android Oreoは、さまざまなデバイスモデルでさまざまな形でアプリアイコンを表示するアダプティブアイコンを導入しました。この新しい形式に従わないアイコンには、白い背景が表示されます。
+
+<figure>{% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="Androidの白い円の中にあるPWAアイコン", width="400", height="100" %} <figcaption>透明なPWAアイコンがAndroidの白い円の中に表示されます</figcaption></figure>
+
+マスカブルアイコンは、より詳細な制御を可能にし、プログレッシブWebアプリでアダプティブアイコンを使用できるようにする新しいアイコン形式です。マスカブルアイコンを提供すると、アイコンが図形全体を埋めて、すべてのAndroidデバイスで見栄えが良くなります。 最近、FirefoxとChromeはこの新しい形式のサポートを追加しました。これをアプリに採用できます。
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="Androidの円全体を埋めるPWAアイコン", width="400", height="100" %} <figcaption>代わりに、マスカブルアイコンが円全体を埋めます</figcaption></figure>
+
+## 現在のアイコンは対応しているか。
+
+マスカブルアイコンはさまざまな形状をサポートする必要があるため、ブラウザが後で目的の形状とサイズにトリミングできるように、不透明な画像にパディングを付けます。最終的に選択される形状はブラウザやプラットフォームごとに異なる可能性があるため、特定の形状に依存しないことをお勧めします。
+
+<figure data-float="right">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"], autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption>さまざまなプラットフォーム固有の形状</figcaption></figure>
+
+幸いなことに、すべてのプラットフォームで適用される、明確に定義され、[標準化された](https://w3c.github.io/manifest/#icon-masks)「最小セーフゾーン」があります。ロゴなどのアイコンの重要な部分は、アイコンの幅の40％の半径で、アイコンの中心にある円形の領域内に表示されることが望ましいとされます。外側の10％の端がトリミングされる場合があります。
+
+Chrome DevToolsを使用して、アイコンのどの部分がセーフゾーン内に収まるかを確認できます。プログレッシブWebアプリを開いた状態で、DevToolsを起動し、[**アプリケーション**]パネルに移動します。 [**アイコン]****セクションで、マスカブルアイコンの最小のセーフゾーンのみ**を表示するように選択できます。セーフゾーンのみが表示されるようにアイコンがトリミングされます。この安全な領域内にロゴが表示されている場合は、問題ありません。
+
+<figure>{% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="端がトリミングされたPWAアイコンを表示するDevToolsのアプリケーションパネル", width="762", height="423" %} <figcaption>アプリケーションパネル</figcaption></figure>
+
+さまざまなAndroidの図形でマスカブルアイコンをテストするには、私が作成した[Maskable.app](https://maskable.app/)ツールを使用します。アイコンを開くと、Maskable.appでさまざまな形やサイズを試すことができ、チームの他のメンバーとプレビューを共有することもできます。
+
+## マスカブルアイコンを採用する方法
+
+既存のアイコンに基づいてマスカブルアイコンを作成する場合は、 [Maskable.appエディタ](https://maskable.app/editor)を使用できます。アイコンをアップロードし、色とサイズを調整してから、画像をエクスポートします。
+
+<figure>{% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.appエディタのスクリーンショット", width="670", height="569" %} <figcaption> Maskable.appエディタでアイコンを作成する</figcaption></figure>
+
+マスカブルアイコン画像を作成して、DevToolsでテストしたら、新しいアセットを参照するように[Webアプリマニフェスト](/add-manifest/)を更新する必要があります。 Webアプリマニフェストは、Webアプリに関する情報をJSONファイルで提供し、[`icons`配列](/add-manifest/#icons)を含みます。
+
+マスカブルアイコンが追加され、Webアプリマニフェストにリストされている画像リソースに新しいプロパティ値が追加されました。 `purpose`フィールドは、アイコンの使用方法をブラウザに指示します。デフォルトでは、アイコンの目的は`"any"`です。これらのアイコンは、Androidの白い背景の上でサイズ変更されます。
+
+マスカブルアイコンは、`"maskable"`という別の目的を使用する必要があります。これは、画像がアイコンマスクとともに使用されることを示し、結果をより細かく制御できます。このようにすると、アイコンの背景が白になりません。他のデバイスでマスクせずにマスカブルアイコンを使用する場合、スペースで区切った複数の目的 (たとえば、 `"any maskable"`) を指定することもできます。
+
+{% Aside %} `"any maskable"`ように、スペースで区切られた複数の目的を*指定できます*が、実際には*指定しないでください*。 `"maskable"`アイコンを`"any"`アイコンとして使用することは、アイコンがそのまま使用されるため最適ではなく、余分なパディングが発生し、主要なアイコンのコンテンツが小さくなります。理想的には、 `"any"`目的のアイコンには透明な領域があり、サイトのファビコンのように余分なパディングがないようにする必要があります。これは、ブラウザによってアイコンに追加されないためです。 {% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- 新しいプロパティ値 `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+これで、独自のマスカブルアイコンを作成し、端から端までアプリの見栄えが良くなることを確認できます (あくまでも私の意見ですが、円から円、楕円から楕円にも対応しています😄)。
+
+## 謝辞
+
+この記事は[Joe Medley](https://github.com/jpmedley)によってレビューされました。
diff --git a/src/site/content/ja/blog/monitor-total-page-memory-usage/index.md b/src/site/content/ja/blog/monitor-total-page-memory-usage/index.md
new file mode 100644
index 00000000000..98e90ff7549
--- /dev/null
+++ b/src/site/content/ja/blog/monitor-total-page-memory-usage/index.md
@@ -0,0 +1,261 @@
+---
+layout: post
+title: measureUserAgentSpecificMemory() を使用してWebページの合計メモリ使用量を監視する
+subhead: リグレッションを検出するために本番環境でWebページのメモリ使用量を測定する方法について説明します。
+description: リグレッションを検出するために本番環境でWebページのメモリ使用量を測定する方法について説明します。
+updated: 2020-10-19
+date: 2020-04-13
+authors:
+  - ulan
+hero: image/admin/Ne2U4cUtHG6bJ0YeIkt5.jpg
+alt: |2
+
+  緑のRAMスティック。 UnsplashのHarrisonBroadbentによる写真。
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113"
+tags:
+  - blog
+  - memory
+  - javascript
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+**更新**
+
+**2021年4月23日:** ステータスを更新し、プロセス外のiframeに関するメモを使用してAPIの範囲を明確にしました。
+
+**2021年1月20日:** `performance.measureMemory`は`performance.measureUserAgentSpecificMemory`という名称に変更され、Chrome 89では[クロスオリジン分離](/coop-coep)されたWebページでデフォルトで有効にされています。結果の形式も、Origin Trialバージョンと比較してわずかに[変更](https://github.com/WICG/performance-measure-memory/blob/master/ORIGIN_TRIAL.md#result-differences)されています。 {% endAside %}
+
+ブラウザーはWebページのメモリを自動的に管理します。 Webページがオブジェクトを作成するときはいつでも、ブラウザーはオブジェクトを格納するために「内部」でメモリのチャンクを割り当てます。メモリは有限のリソースであるため、ブラウザーはガベージコレクションを実行して、オブジェクトが不要になるときを検出し、基になるメモリチャンクを解放します。ただし、検出は完全ではなく、完全な検出は不可能な作業であること[が証明されました](https://en.wikipedia.org/wiki/Halting_problem)。したがって、ブラウザーは「オブジェクトが必要である」という概念を「オブジェクトが到達可能である」という概念に近似します。Webページがその変数および他の到達可能なオブジェクトのフィールドを使用してオブジェクトに到達できない場合、ブラウザーはオブジェクトを安全に再利用できます。次の例に示すように、これら2つの概念の違いにより、メモリリークが発生します。
+
+```javascript
+const object = { a: new Array(1000), b: new Array(2000) };
+setInterval(() => console.log(object.a), 1000);
+```
+
+ここでは、大きい配列`b`は不要になりましたが、コールバックの`object.b`経由でして到達可能であるため、ブラウザーはそれを再利用しません。したがって、より大きな配列のメモリがリークします。
+
+Webではメモリリークが[蔓延しています](https://docs.google.com/presentation/d/14uV5jrJ0aPs0Hd0Ehu3JPV8IBGc3U8gU6daLAqj6NrM/edit#slide=id.p)。イベントリスナーの登録解除を忘れたり、iframeからオブジェクトを誤って取り込んだり、ワーカーを閉じなかったり、オブジェクトを配列に蓄積したりすることで、メモリリークは容易に発生します。 Webページにメモリリークがある場合、メモリ使用量は時間の経過とともに増加し、Webページは遅く表示され、ユーザーには肥大化します。
+
+この問題を解決するための最初のステップは、それを測定することです。新しい[`performance.measureUserAgentSpecificMemory()` API](https://github.com/WICG/performance-measure-memory)を使用すると、開発者は本番環境でのWebページのメモリ使用量を測定し、ローカルテストをすり抜けるメモリリークを検出できます。
+
+## `performance.measureUserAgentSpecificMemory()`とレガシー`performance.memory` APIとの違い{: #legacy-api }
+
+既存の非標準の`performance.memory` APIに詳しい場合は、新しいAPIとの違いについて疑問に思われるかもしれません。主な違いは、古いAPIはJavaScriptヒープのサイズを返すのに対し、新しいAPIはWebページで使用されているメモリ量を推定することです。この違いは、Chromeが同じヒープを複数のWebページ (または同じWebページの複数のインスタンス) と共有する場合に重要になります。このような場合、古いAPIの結果は任意でオフにできます。古いAPIは「ヒープ」などの実装固有の用語で定義されているため、標準化は不可能です。
+
+もう1つの違いは、新しいAPIがガベージコレクション中にメモリ測定を実行することです。これにより、結果のノイズが減少しますが、結果が生成されるまでに時間がかかる場合があります。他のブラウザーでは、ガベージコレクションに依存せずに、新しいAPIの実装を決定する場合があることに注意してください。
+
+## 推奨されるユースケース{: #use-cases}
+
+Webページのメモリ使用量は、イベント、ユーザーアクション、およびガベージコレクションのタイミングによって異なります。そのため、メモリ測定APIは、本番環境からのメモリ使用量データを集約することを目的としています。個々の呼び出しの結果はあまり役に立ちません。ユースケースの例:
+
+- Webページの新しいバージョンの展開中にリグレッション検出を実行して、新しいメモリリークを特定する。
+- A/ Bテストで新機能をテストし、メモリの影響を評価して、メモリリークを検出する。
+- メモリ使用量をセッション期間と相関させて、メモリリークの有無を検証する。
+- メモリ使用量をユーザーメトリックと相関させて、メモリ使用量の全体的な影響を理解する。
+
+## ブラウザーの互換性{: #compatibility }
+
+現在、APIはオリジントライアルとしてChrome83でのみサポートされています。ブラウザーにはメモリ内のオブジェクトを表すさまざまな方法とメモリ使用量を推定するさまざまな方法があるため、APIの結果は実装に大きく依存します。適切なアカウンティングが高すぎるか実行不可能な場合、ブラウザは一部のメモリ領域をアカウンティングから除外する場合があります。したがって、結果をブラウザー間で比較することはできません。同じブラウザーの結果を比較することだけが意味があります。
+
+## 現在のステータス{: #status }
+
+<div><table>
+    <thead>
+      <tr>
+        <th>ステップ</th>
+        <th>状態</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1. 説明者を作成する</td>
+        <td><a href="https://github.com/WICG/performance-measure-memory">完了</a></td>
+      </tr>
+      <tr>
+        <td>2. 仕様の初期ドラフトを作成する</td>
+        <td><a href="https://wicg.github.io/performance-measure-memory/">完了</a></td>
+      </tr>
+      <tr>
+        <td>3. フィードバックを収集して設計を繰り返す</td>
+        <td><a href="#feedback">進行中</a></td>
+      </tr>
+      <tr>
+        <td>4. オリジントライアル</td>
+        <td><a href="https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113">完了</a></td>
+      </tr>
+      <tr>
+        <td>5. 展開</td>
+        <td>Chrome89ではデフォルトで有効</td>
+      </tr>
+    </tbody>
+</table></div>
+
+## `performance.measureUserAgentSpecificMemory()`の使用方法{: use }
+
+### about：// flagsを介して有効にする
+
+オリジントライアルトークンなしで`performance.measureUserAgentSpecificMemory()`を実験するには、`about://flags`で`#experimental-web-platform-features`フラグを有効にします。
+
+### 特徴の検出
+
+実行環境がクロスオリジン情報のリークを防ぐためのセキュリティ要件を満たしていない場合、`performance.measureUserAgentSpecificMemory()` 関数が[SecurityError](https://developer.mozilla.org/docs/Web/API/DOMException#exception-SecurityError)で失敗する可能性があります。Chromeでのオリジントライアル中には、APIでは[サイト分離](https://developers.google.com/web/updates/2018/07/site-isolation)が有効になっている必要があります。APIが連携するときには、[クロスオリジン分離](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)に依存します。Webページは、[COOP + COEPヘッダー](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)を設定することにより、クロスオリジン分離をオプトインできます。
+
+```javascript
+if (performance.measureUserAgentSpecificMemory) {
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
+    } else {
+      throw error;
+    }
+  }
+  console.log(result);
+}
+```
+
+### ローカルテスト
+
+Chromeは、ガベージコレクション中にメモリ測定を実行します。これは、APIが結果のプロミスをすぐに解決せず、代わりに次のガベージコレクションを待機することを意味します。APIはタイムアウト後にガベージコレクションを強制的に実行します。タイムアウトは現在20秒に設定されています。`--enable-blink-features='ForceEagerMeasureMemory'` コマンドラインフラグを使用してChromeを起動すると、タイムアウトがゼロに短縮され、ローカルのデバッグとテストに役立ちます。
+
+## 例
+
+APIの推奨される使用法は、Webページ全体のメモリ使用量をサンプリングし、集計と分析のために結果をサーバーに送信するグローバルメモリモニターを定義することです。最も簡単な方法は、定期的に、たとえば`M`分ごとにサンプリングすることです。ただし、サンプル間でメモリのピークが発生する可能性があるため、データに偏りが生じます。次の例は、[ポアソン過程](https://en.wikipedia.org/wiki/Poisson_point_process)を使用して偏りのないメモリ測定を行う方法を示しています。これにより、サンプルが任意の時点 ([デモ](https://performance-measure-memory.glitch.me/)、[ソース](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0)) で等しく発生する可能性が高くなります。
+
+まず、ランダム化された間隔で`setTimeout()` を使用して、次のメモリ測定をスケジュールする関数を定義します。この関数は、メインウィンドウでページを読み込んだ後に呼び出されます。
+
+```javascript
+function scheduleMeasurement() {
+  if (!performance.measureUserAgentSpecificMemory) {
+    console.log(
+      'performance.measureUserAgentSpecificMemory() is not available.',
+    );
+    return;
+  }
+  const interval = measurementInterval();
+  console.log(
+    'Scheduling memory measurement in ' +
+      Math.round(interval / 1000) +
+      ' seconds.',
+  );
+  setTimeout(performMeasurement, interval);
+}
+
+// メインウィンドウでのページ読み込みの後に測定を開始。
+window.onload = function () {
+  scheduleMeasurement();
+};
+```
+
+`measurementInterval()` 関数は、平均して5分ごとに1回の測定が行われるように、ミリ秒単位でランダムな間隔を計算します。関数の基になる数学に興味がある場合は、[指数分布](https://en.wikipedia.org/wiki/Exponential_distribution#Computational_methods)を参照してください。
+
+```javascript
+function measurementInterval() {
+  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
+  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
+}
+```
+
+最後に、非同期の`performMeasurement()` 関数がAPIを呼び出し、結果を記録して、次の測定をスケジュールします。
+
+```javascript
+async function performMeasurement() {
+  // 1. performance.measureUserAgentSpecificMemory() を呼び出す。
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
+      return;
+    }
+    // 他のエラーを発生させる。
+    throw error;
+  }
+  // 2. 結果を記録する。
+  console.log('Memory usage:', result);
+  // 3. 次の測定をスケジュールする。
+  scheduleMeasurement();
+}
+```
+
+結果は次のようになります。
+
+```javascript
+// コンソール出力:
+{
+  bytes: 60_000_000,
+  breakdown: [
+    {
+      bytes: 40_000_000,
+      attribution: [
+        {
+          url: "https://foo.com",
+          scope: "Window",
+        },
+      ]
+      types: ["JS"]
+    },
+    {
+      bytes: 0,
+      attribution: [],
+      types: []
+    },
+    {
+      bytes: 20_000_000,
+      attribution: [
+        {
+          url: "https://foo.com/iframe",
+          container: {
+            id: "iframe-id-attribute",
+            src: "redirect.html?target=iframe.html",
+          },
+        },
+      ],
+      types: ["JS"]
+    },
+  ]
+}
+```
+
+合計メモリ使用量の見積もりは、`bytes`フィールドに返されます。バイトの値は、[数値区切り構文](https://v8.dev/features/numeric-separators)を使用しています。この値は実装に大きく依存するため、ブラウザー間で比較することはできません。同じブラウザーの異なるバージョン間でも変更される可能性があります。オリジントライアル中の値には、メインウィンドウとすべての**同じサイト**のiframeおよび関連ウィンドウのJavaScriptメモリ使用量が含まれます。APIが連携されると、値は現在のプロセスのすべてのiframe、関連するウィンドウ、およびWebワーカーのJavaScriptおよびDOMメモリを考慮します。[サイト分離](https://www.chromium.org/developers/design-documents/oop-iframes)が有効になっている場合、APIはクロスサイト[プロセス外iframe](https://www.chromium.org/Home/chromium-security/site-isolation)のメモリを測定しないことに注意してください。
+
+`breakdown`リストには、使用されているメモリに関する詳細情報が記載されています。各エントリは、メモリの一部を記述し、URLで識別される一連のウィンドウ、iframe、およびワーカーに帰属します。`types`フィールドには、メモリに関連付けられている実装固有のメモリタイプが一覧表示されます。
+
+すべてのリストを汎用的な方法で扱い、特定のブラウザーに基づいて仮定をハードコーディングしないことが重要です。たとえば、一部のブラウザーは空の`breakdown`または空の`attribution`を返す場合があります。他のブラウザーは`attribution`で複数のエントリを返し、これらのエントリのどれがメモリを所有しているかを区別できなかったことを示します。
+
+## フィードバック{: #feedback }
+
+`performance.measureUserAgentSpecificMemory()`に関する考えや経験について、[Webパフォーマンスコミュニティグループ](https://www.w3.org/community/webperfs/)およびChromeチームにお聞かせください。
+
+### API設計について教えてください
+
+期待どおりに機能しないAPIについて何かありますか？または、アイデアを実装するために必要な不足しているプロパティがありますか？ [performance.measureUserAgentSpecificMemory（）GitHubリポジトリに](https://github.com/WICG/performance-measure-memory/issues)仕様の問題を提出するか、既存の問題に考えを追加してください。
+
+### 実装に関する問題を報告する
+
+Chrome実装のバグを見つけた場合や、実装が仕様と異なる場合は、[https://new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EPerformanceAPIs)でバグを報告してください。必ず詳細を記入し、バグを再現するための簡単な手順を説明して、**Components**を`Blink>PerformanceAPIs`に設定してください。[Glitch](https://glitch.com/)は、すばやく簡単に再現を共有するのに最適です。
+
+### サポートを表示
+
+`performance.measureUserAgentSpecificMemory()`を使用するご予定ですか？皆さまからの公開サポートは、Chromeチームが各機能に優先順位を付け、そうした機能をサポートすることがいかに重要であるかを他のブラウザベンダーに示すのに役立ちます。[@ChromiumDev](https://twitter.com/chromiumdev)にツイートを送信し、使用している場所と使用している方法を教えてください。
+
+## 便利なリンク {: #helpful }
+
+- [説明者](https://github.com/WICG/performance-measure-memory)
+- [デモ](https://performance-measure-memory.glitch.me/) | [デモソース](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0)
+- [オリジントライアル](https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113)
+- [バグの追跡](https://bugs.chromium.org/p/chromium/issues/detail?id=1049093)
+- [ChromeStatus.comエントリ](https://www.chromestatus.com/feature/5685965186138112)
+
+## 謝辞
+
+API設計をレビューしてくださったDomenic Denicola氏、Yoav Weiss氏、Mathias Bynens氏、ChromeのコードをレビューしてくださったDominik Inführ氏、Hannes Payer氏、Kentaro Hara氏、Michael Lippautz氏に感謝します。また、APIを大幅に改善した貴重なユーザーフィードバックを提供してくださったPer Parker氏、Philipp Weis氏、Olga Belomestnykh氏、Matthew Bolohan氏、Neil Mckay氏にも感謝します。
+
+[Unsplashの](https://unsplash.com)[HarrisonBroadbent](https://unsplash.com/@harrisonbroadbent)による[ヒーロー画像](https://unsplash.com/photos/5tLfQGURzHM)
diff --git a/src/site/content/ja/blog/new-responsive/index.md b/src/site/content/ja/blog/new-responsive/index.md
new file mode 100644
index 00000000000..bc3a6015428
--- /dev/null
+++ b/src/site/content/ja/blog/new-responsive/index.md
@@ -0,0 +1,260 @@
+---
+layout: post
+title: 新しいレスポンシブ：コンポーネント主導のWebデザイン
+subhead: レスポンシブWebデザインの新時代におけるマクロとミクロのレイアウトの制御。
+authors:
+  - una
+description: ユーザー設定ベースのメディア機能、コンテナクエリ、および折りたたみ式画面などの新しい画面タイプのメディアクエリにより、レスポンシブWebデザインの新時代で使用できるようになります。
+date: 2021-05-19
+updated: 2021-05-26
+hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/P5LtV5IubshVuDac8uKO.jpg
+tags:
+  - blog
+  - css
+  - layout
+---
+
+{% YouTube 'jUQ2-C5ZNRc' %}
+
+## 最新のレスポンシブデザイン
+
+通常、「レスポンシブデザイン」という用語は、モバイルサイズからタブレットサイズ、デスクトップサイズにデザインのサイズを変更するときに、メディアクエリを使用してレイアウトを変更することを考慮しています。
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/3KENjI9FiNARctTiKDak.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+しかし、このレスポンシブデザインの概念は、ページレイアウトに表を使用するのと同じように、すぐに時代遅れになってしまう可能性があります。
+
+ビューポートベースのメディアクエリは、強力なツールをいくつか提供しますが、十分な精巧さがありません。ユーザーのニーズに対応する機能や、レスポンシブスタイルをコンポーネント自体に挿入する機能が不足しています。
+
+{% Aside %}この記事では、コンポーネントとは、カードやサイドバーなどの他の要素で構成される要素を含む要素を意味します。これらのコンポーネントは、当社のWebページを構成します。 {% endAside %}
+
+グローバルビューポート情報を使用してコンポーネントのスタイルを設定できますが、それらはまだスタイルを所有しておらず、デザインシステムがコンポーネントベースでページベースではない場合は機能しません。
+
+ただし、エコシステムは変化しており、急速に進化しています。CSSは進化しており、レスポンシブデザインの新時代が間近に迫っています。
+
+これは約10年ごとに発生します。 10年前の2010年から2012年頃に、モバイルとレスポンシブデザインに大きな変化が見られ、CSS3が登場しました。
+
+<figure>{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/IhVNwOMENjOT2eiIXuMg.png", alt="CSS styles timeline", width="800", height="211" %} <figcaption>出典: <a href="https://www.webdesignmuseum.org/web-design-history">Web Design Museum</a>. </figcaption></figure>
+
+したがって、エコシステムは、CSSにかなり大きな変更を加える準備ができていることがわかります。ChromeとWebプラットフォーム全体のエンジニアは、レスポンシブデザインの次の時代に向けて、プロトタイピング、仕様作成、実装の開始を行っています。
+
+これらの更新には、ユーザー設定ベースのメディア機能、コンテナクエリ、および折りたたみ式画面などの新しい画面タイプのメディアクエリが含まれます。
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/3yqBl9BQmGEVzDQU3Ivh.png", alt="ユーザー、コンテナ、およびフォームファクタに対応", width="800", height="248" %}
+
+## ユーザーへの対応
+
+新しいユーザー設定メディア機能により、ユーザー自身の特定の設定やニーズに合わせてWebエクスペリエンスをスタイリングすることができます。つまり、プリファレンスメディア機能を使用すると、ユーザーエクスペリエンスをユーザーエクスペリエンスに適合させることができます。
+
+これらのユーザー設定メディア機能は次のとおりです。
+
+- `prefers-reduced-motion`
+- `prefers-contrast`
+- `prefers-reduced-transparency`
+- `prefers-color-scheme`
+- `inverted-colors`
+- その他多数
+
+設定機能は、ユーザーがオペレーティングシステムで設定した環境設定を取得し、特にアクセシビリティが必要なユーザーにとって、より堅牢でパーソナライズされたWebエクスペリエンスを構築するのに役立ちます。
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/cGWnoAAwMTU7C3HOfYQl.png", alt="オペレーティングシステムのユーザー補助設定をオンにする", width="800", height="428" %}
+
+### `prefers-reduced-motion`
+
+[モーションを減らす](/prefers-reduced-motion/)ためにオペレーティングシステム設定を設定しているユーザーは、一般的にコンピューターを使用するときに要求するアニメーションの数を減らしています。したがって、Webの使用中は、派手なイントロ画面、カードフリップアニメーション、複雑なローダー、またはその他の派手なアニメーションを好まない可能性があります。
+
+`prefers-reduced-motion`を使用して、モーションを減らすことを念頭に置いてページをデザインし、このような設定をしていないユーザー向けにモーションが強化されたエクスペリエンスを作成できます。
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/r4z52PPvElemSUJwUCZp.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+このカードには両面に情報があります。ベースラインのモーションの少ないエクスペリエンスはその情報を表示するためのクロスフェードであり、モーションが強化されたエクスペリエンスはその反対側です。
+
+オンラインで情報を伝達するにはモーションが非常に重要であるため、Preferred-reduced-motionは「モーションなし」を意味するものではありません。代わりに、不必要な動きをせずにユーザーを案内する堅実なベースラインエクスペリエンスを提供し、アクセシビリティのニーズや設定がなくても、ユーザーに合ったエクスペリエンスを段階的に強化します。
+
+### `prefers-color-scheme`
+
+もう1つの設定メディア機能は[`prefers-color-scheme`](/prefers-color-scheme)です。この機能は、ユーザーが好むテーマに合わせてUIをカスタマイズするのに役立ちます。オペレーティングシステムでは、デスクトップでもモバイルでも、ユーザーは、時間帯に応じて変化する明るいテーマ、暗いテーマ、または自動テーマの設定を行うことができます。
+
+[CSSカスタムプロパティ](https://developer.mozilla.org/docs/Web/CSS/--*)を使用してページを設定すると、色の値の交換が簡単になります。`backgroundColor`や`textOnPrimary`などのカラーテーマ値をすばやく更新して、メディアクエリ内の新しいテーマに動的に調整できます。
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/j6Ru11BsBzCmINZDXKql.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+これらの設定クエリの一部を簡単にテストできるようにするために、毎回システム設定を開くのではなく、エミュレーション目的でDevToolsを使用できます。
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ol6pVXJLT44wAkRADAcq.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+### ダークテーマのデザイン
+
+ダークテーマ向けにデザインする場合、背景やテキストの色を反転したり、[ダークスクロールバー](/color-scheme/)を表示したりするだけではありません。気付かないかもしれませんが、いくつかの考慮事項があります。たとえば、視覚的な振動を減らすために、暗い背景の色の彩度を下げる必要がある場合があります。
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/tWxjbJ6yYUauQoCsySSX.png", alt="ダークテーマでは強い明るさの彩度の高い色を使用しない", width="698", height="640" %}
+
+影を使用して奥行きを作成し、要素を前方に描画するのではなく、要素の背景色に光を使用して要素を前方に描画することをお勧めします。これは、暗い背景では影がそれほど効果的ではないためです。
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ZiasjYiaPFmJJOkxJBce.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption> <a href="https://material.io">マテリアルデザイン</a>は、ダークテーマのデザインに関する優れたガイダンスを提供します。</figcaption></figure>
+
+ダークテーマは、よりカスタマイズされたユーザーエクスペリエンスを提供するだけでなく、AMOLED画面のバッテリー寿命を大幅に改善することもできます。これらは、新しいハイエンド携帯電話で見られる画面であり、モバイルデバイス全体でますます人気が高まっています。
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/ZszEdn43lc4ZmcOaGKy4.webp", alt="このグラフィックを最初に表示したトークのスクリーンショット", width="720", height="407" %}
+
+ダークテーマに関する[2018年のAndroidの調査](https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life)では、画面の明るさと全体的なユーザーインターフェースに応じて、最大60％の消費電力の節約が示されました。60％の統計は、アプリのUIにダークテーマとライトテーマを使用して、YouTubeの再生画面と100%の画面の明るさで一時停止した動画を比較した結果です。
+
+可能な限り、常にダークテーマエクスペリエンスをユーザーに提供する必要があります
+
+## コンテナへの対応
+
+CSSで最もエキサイティングな新しい分野の1つは、要素クエリとも呼ばれるコンテナクエリです。ページベースのレスポンシブデザインからコンテナベースのレスポンシブデザインへの移行が、デザインエコシステムの進化にどれほど貢献しているのかを十分に認識する必要があります。
+
+コンテナクエリが提供する強力な機能の例を次に示します。リンクリスト、フォントサイズ、親コンテナに基づく全体的なレイアウトなど、カード要素の任意のスタイルを操作できます。
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/fvrxk5kXiif6eFX25BH5.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption><a href="https://codepen.io/una/pen/LYbvKpK">}Codepenのデモを参照してください</a> (カナリアの旗の後ろ)。</figcaption></figure>
+
+この例は、2つの異なるコンテナーサイズを持つ2つの同一のコンポーネントを示しています。どちらも、CSSグリッドを使用して作成されたレイアウトのスペースを占めています。各コンポーネントは、独自のスペース割り当てに適合し、それに応じてスタイルを設定します。
+
+この程度の柔軟性は、メディアクエリだけでは不可能なことです。
+
+コンテナクエリは、レスポンシブデザインへのきわめて動的なアプローチを提供します。つまり、このカードコンポーネントをサイドバーやヒーローのセクション、またはページ本体の内側のグリッド内に配置すると、コンポーネント自体が、ビューポートではなく、コンテナに応じたレスポンシブ情報とサイズを所有します。
+
+これには`@container` at-ruleが必要です。これは`@media`を}使用したメディアクエリと同じように機能します。ただし、代わりに、`@container`はビューポートとユーザーエージェントではなく親コンテナに情報を照会します。
+
+```css
+.card {
+  container-type: inline-size;
+}
+
+@container (max-width: 850px) {
+  .links {
+    display: none;
+  }
+
+  .time {
+    font-size: 1.25rem;
+  }
+
+  /* ... */
+}
+```
+
+まず、親要素に包含を設定します。`@container`クエリを記述し、`min-width`または`max-width`を使用して、サイズに基づいてコンテナ内の要素のスタイルを設定します。
+
+上記のコードは`max-width`を使用し、`display:none`へのリンクを設定します。また、コンテナが`850px`未満の場合は時間フォントサイズを小さくします。
+
+### コンテナクエリカード
+
+このデモプラントのWebサイトでは、ヒーローのカード、最近表示したアイテムのサイドバー、製品グリッドなど、各製品カードはすべてまったく同じコンポーネントであり、同じマークアップが付いています。
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/D4hBchz6kaPjkgx8BCmU.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption><a href="https://codepen.io/una/pen/mdOgyVL">Codepenのデモを参照してください</a> (Canaryのフラグの後ろ)。</figcaption></figure>
+
+このレイアウト全体を作成するために使用されるメディアクエリは*なく*、コンテナクエリのみです。これにより、各製品カードを適切なレイアウトにシフトして、そのスペースを埋めることができます。たとえば、グリッドはminmax列レイアウトを使用して要素をスペースに流し込み、スペースが圧縮されすぎた場合 (最小サイズに達した場合) にグリッドを再レイアウトします。
+
+```css
+.product {
+  container-type: inline-size;
+}
+
+@container (min-width: 350px) {
+  .card-container {
+    padding: 0.5rem 0 0;
+    display: flex;
+  }
+
+  .card-container button {
+    /* ... */
+  }
+}
+
+```
+
+`350px`以上のスペースがある場合、カードのレイアウトは、デフォルトのフレックス方向が「行」である`display: flex`に設定されているため、水平になります。
+
+より少ないスペースで、製品カードが積み重ねられます。各製品カードはそれ自体をスタイルします。これは、グローバルスタイルだけでは不可能なことです。
+
+### コンテナクエリとメディアクエリの混合
+
+コンテナクエリには非常に多くのユースケースがあります。1つはカレンダーコンポーネントです。コンテナクエリを使用して、親の使用可能な幅に基づいてカレンダーイベントやその他のセグメントを再レイアウトできます。
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/hjV6i4PEu8wounYhHsHf.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption><a href="https://codepen.io/una/pen/RwodQZw">Codepenのデモを参照してください</a> (Canaryのフラグの後ろ)。</figcaption></figure>
+
+このデモコンテナは、カレンダーの日付と曜日のレイアウトとスタイルを変更するためにクエリを実行し、スケジュールされたイベントの余白とフォントサイズを調整して、スペースに合わせやすくします。
+
+次に、メディアクエリを使用して、画面サイズを小さくするためにレイアウト全体をシフトします。この例は、メディアクエリ（グローバルスタイルまたはマクロスタイルの調整）とコンテナクエリ（コンテナの子とそのマイクロスタイルの調整）を*組み合わせる*ことがいかに強力であるかを示しています。
+
+これで、同じUIコンポーネント内のマクロレイアウトとマイクロレイアウトを考えて、微妙なニュアンスのある設計上の決定を行うことができます。
+
+### コンテナクエリの使用
+
+これらのデモは、Chrome Canaryのフラグの後ろで再生できるようになりました。 Canaryで`about://flags`に移動し、`#enable-container-queries`フラグをオンにします。これにより、`@container`、`contain`、`contain`の`block-size`値、およびLayoutNGグリッドの実装のサポートが有効になります。
+
+### スコープスタイル
+
+コンテナクエリに基づいて構築するために、CSSワーキンググループは、コンポーネントの適切な名前空間と衝突回避に役立つ[スコープスタイル](https://css.oddbird.net/scope/)についても積極的に議論しています。
+
+<figure>{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/FCHIEO4IouHOQaOJXrQD.png", alt="スコープスタイル図", width="759", height="636" %} <figcaption><a href="https://css.oddbird.net/">Miriam Suzanne</a>氏がデザインした図。 </figcaption></figure>
+
+スコープスタイルを使用すると、パススルーおよびコンポーネント固有のスタイル設定で名前の衝突を回避できます。これは、CSSモジュールなどの多くのフレームワークやプラグインでフレームワーク内で実行できるようになっています。この仕様により、マークアップを調整することなく、読み取り可能なCSSを使用してコンポーネントのカプセル化されたスタイルをネイティブに記述できるようになります。
+
+```css
+/* @scope (<root>#) [to (<boundary>#)]? { … } */
+
+@scope (.tabs) to (.panel) {
+  :scope { /* targeting the scope root */ }
+  .light-theme :scope .tab { /* contextual styles */ }
+}
+```
+
+スコープを使用すると、「ドーナツ型」セレクターを作成できます。このセレクターでは、スタイルをカプセル化する場所と、スコープスタイルから抜け出してよりグローバルなスタイルを参照する場所を指定できます。
+
+この例としては、タブでスコープスタイルを取得するタブパネルや、タブ内のパネルで親スタイルを取得する場合があります。
+
+## フォームファクターに対応
+
+レスポンシブデザインの新時代についての会話の次のトピックは、フォームファクターの変化と、Webコミュニティとしてデザインする必要があるもの（形状変化画面や仮想現実など）の可能性の高まりです。
+
+<figure>{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/OeskptFb2djUWWmX7K9y.svg", alt="スパン図", width="800", height="488" %} <figcaption><a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>の図。</figcaption></figure>
+
+折りたたみ式またはフレキシブルスクリーン、およびスクリーンスパンの設計は、今日のフォームファクタの変化を確認できる一例です。そして、画面スパンは、これらの新しいフォームファクタとニーズに対応するために取り組んでいるさらに別の仕様です。
+
+画面にまたがる実験的な[メディアクエリは](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md)ここでも役立ちます。現在、次のように動作します。`@media (spanning: <type of fold>)` 。デモでは、2つの列を持つグリッドレイアウトを設定します。1つは--sidebar-widthの幅で、デフォルトは5remで、もう1つは`1fr`です。縦方向に折り目が1つあるデュアル画面でレイアウトを表示すると、`--sidebar-width`値が左の折り目の環境値で更新されます。
+
+```css
+:root {
+  --sidebar-width: 5rem;
+}
+
+@media (spanning: single-fold-vertical) {
+  --sidebar-width: env(fold-left);
+}
+
+main {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+}
+```
+
+これにより、サイドバー（この場合はナビゲーション）が一方の折り目のスペースを埋め、アプリのUIがもう一方の折り目を埋めるレイアウトが可能になります。これにより、UIの「折り目」が防止されます。
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/Uf3RL7EhVZGK2ECiD0sT.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+Chrome DevToolsエミュレータで折りたたみ可能な画面をテストして、ブラウザーで直接画面にまたがるデバッグとプロトタイプ作成に役立てることができます。
+
+## まとめ
+
+フラットスクリーンを超えてUIデザインを探求することは、コンテナクエリとスコープスタイルが非常に重要であるもう1つの理由です。これらは、ページレイアウトとグローバルスタイル、およびユーザースタイルからコンポーネントスタイルをサイロ化する機会を提供し、より弾力性のあるレスポンシブデザインを可能にします。これは、画面にまたがるニュアンスを含む、ページベースのメディアクエリを使用してマクロレイアウトを設計できることを意味します。同時に、コンポーネントのコンテナクエリでマイクロレイアウトを使用し、ユーザー設定ベースのメディアクエリを追加して、固有の設定とニーズに基づいてユーザーエクスペリエンスをカスタマイズします。
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/uAJDDUDLcAsLzBf0a27b.png", alt="新しいレスポンシブの円", width="800", height="442" %}
+
+*これ*は新しいレスポンシブです。
+
+マクロレイアウトとミクロレイアウトを組み合わせ、さらにユーザーのカスタマイズとフォームファクタを考慮に入れています。
+
+これらの変更だけでも、Webのデザイン方法にかなりの変化が生じます。しかし、これらを組み合わせると、レスポンシブデザインの概念化さえも非常に大きく変化することを意味します。ビューポートサイズを超えたレスポンシブデザインについて考え、コンポーネントベースのカスタマイズされたエクスペリエンスを向上させるために、これらすべての新しい軸を検討し始めましょう。
+
+レスポンシブデザインの次の時代はここにあり、すでにそれを自分で探求し始めることができます。
+
+### web.dev/learnCSS
+
+現時点では、CSSをレベルアップしたい場合、基本の一部を再検討したい場合は、新しい完全に無料のCSSコースとリファレンスがweb.devで提供されています。[web.dev/learnCSS](/learn/css)からアクセスできます。
+
+レスポンシブデザインの次の時代とそれに伴ういくつかのプリミティブについてこの概要を楽しんでいただけたと思います。また、これがWebデザインの将来にとって何を意味するのかについて私と同じように興奮していることを願っています。
+
+これは、UIコミュニティとして、コンポーネントベースのスタイル、新しいフォームファクターを採用し、ユーザーが応答するエクスペリエンスを作成するための大きな機会を開きます。
diff --git a/src/site/content/ja/blog/one-line-layouts/index.md b/src/site/content/ja/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..646cea6d445
--- /dev/null
+++ b/src/site/content/ja/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: 1行のCSSで10の最新のレイアウト
+subhead: この投稿では、CSSのいくつかの強力な行に焦点を当てています。これらの行は、深刻な重労働を行い、堅牢で最新のレイアウトを構築するのに役立ちます。
+authors:
+  - una
+description: この投稿では、負荷が高い処理を実行し、最新の堅牢なレイアウトを構築するのに役立つ、数行の強力なCSSをハイライトします。
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: Holy grailレイアウト。
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+最新のCSSレイアウトにより、開発者は数回のキー操作で実に有意義で堅牢なスタイリングルールを作成できます。上記の話とそれに続くこの投稿では、負荷の高い処理を実行する10行の強力なCSSについて検討します。
+
+{% Glitch { id: '1linelayouts', path: 'README.md', height: 480 } %}
+
+これらのデモを自分でフォローまたは試してみるには、上記のGlitch埋め込みを確認するか、[1linelayouts.glitch.me](https://1linelayouts.glitch.me)にアクセスしてください。
+
+## 01. Super Centered: `place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+最初の「単一行」レイアウトでは、CSSの世界全体で最大の謎である「センタリング」を解明します。これは[`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items)で考えるよりも簡単であることを理解していただきたいと思います。
+
+最初に、`display`メソッドとして`grid`を指定してから、同じ要素に`place-items: center`を書き込みます。`place-items`は、`align-items`と`justify-items`の両方を一度に設定するための省略形です。`center`に設定すると、`align-items`と`justify-items`の両方が`center`に設定されます。
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+これにより、固有のサイズに関係なく、コンテンツを親の中央に正確に配置できます。
+
+## 02. Deconstructed Pancake: `flex: <grow> <shrink> <baseWidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+次に、Deconstructed Pancakeです。これは、たとえばマーケティングサイトの一般的なレイアウトであり、通常は画像、タイトル、そして製品の一部の機能を説明するテキストを含む3つの項目の行が含まれる場合があります。モバイルでは、それらをうまく積み重ねて、画面サイズを大きくしたときに、拡大するようにします。
+
+この効果にFlexboxを使用することにより、画面のサイズが変更されたときにこれらの要素の配置を調整するためのメディアクエリは必要ありません。
+
+[`flex`](https://developer.mozilla.org/docs/Web/CSS/flex)省略形は、`flex: <flex-grow> <flex-shrink> <flex-basis>`を表します。
+
+このため、ボックスを`<flex-basis>`サイズまで埋める場合は、小さいサイズで縮小しますが、追加のスペースを埋めるために*拡大*しない場合は、`flex: 0 1 <flex-basis>`と記述します。この場合、`<flex-basis>`は`150px`なので、次のようになります。
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+あなたはストレッチにボックスをしたいと、彼らは次の行に折り返さとしてのスペースを埋める*ない*場合は、設定`<flex-grow>`に`1` 、それは次のようになりますので、：
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+これで、画面サイズを拡大または縮小すると、これらの柔軟な項目の拡大または縮小します。
+
+## 03. Sidebar Says: `grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+このデモでは、グリッドレイアウトの[minmax](https://developer.mozilla.org/docs/Web/CSS/minmax)関数を利用します。ここで行っているのは、サイドバーの最小サイズを`150px`に設定します。画面が大きい場合は、`25%`まで拡大します。サイドバーは常に親の水平スペースの`25%`を占め、その`25%`が`150px`より小さくなるまでこの状態が続きます。
+
+grid-template-columnsの値として、この値と`minmax(150px, 25%) 1fr`の値を追加します。最初の列の項目 (この場合はサイドバー) は`25%`で`minmax` `150px`を取得します。2番目の項目 (`main`セクション) は残りのスペースを単一の`1fr`トラックとして占めます。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. Pancake Stack: `grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+Deconstructed Pancakeとは異なり、この例では、画面サイズが変更されても子を折り返しません。一般に[スティッキーフッター](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers)と呼ばれるこのレイアウトは、モバイルアプリケーション (通常、フッターはツールバー)、およびWebサイト (多くの場合、シングルページアプリケーションはこのグローバルレイアウトを使用) 全体で、Webサイトとアプリの両方によく使用されます。
+
+コンポーネントに`display: grid`を追加すると、単一の列グリッドが作成されますが、メイン領域の高さは、その下にフッターがあるコンテンツと同じになります。
+
+フッターを下部に固定するには、次のコードを追加します。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+これにより、ヘッダーとフッターのコンテンツが自動的に子のサイズを取得するように設定され、残りのスペース (`1fr`) がメイン領域に適用されます。`auto`サイズの行は、子の最小コンテンツのサイズを取得し、そのコンテンツのサイズが大きくなると、行自体が大きくなって調整されます。
+
+## 05. Classic Holy Grailレイアウト: `grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+この従来からのHoly Grailレイアウトには、ヘッダー、フッター、左側のサイドバー、右側のサイドバー、およびメインコンテンツがあります。以前のレイアウトと似ていますが、サイドバーが追加されました。
+
+1行のコードを使用してこのグリッド全体を作成するには、`grid-template`プロパティを使用します。これにより、行と列の両方を同時に設定できます。
+
+プロパティと値のペアは次のとおり`grid-template: auto 1fr auto / auto 1fr auto`です。1番目と2番目のスペースで区切られたリストの間のスラッシュは、行と列の間の区切りです。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+ヘッダーとフッターに自動サイズのコンテンツが含まれていた最後の例のように、ここでは、左右のサイドバーが子の固有のサイズに基づいて自動的にサイズ変更されます。ただし、今回は縦 (高さ) ではなく横 (幅) のサイズです。
+
+## 06. 12-Spanグリッド: `grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+次に、もう1つの従来のレイアウトがあります。12-spanグリッドです。`repeat()`関数を使用して、すばやくCSSでグリッドを作成できます。グリッドテンプレート列で`repeat(12, 1fr);`を使用すると、`1fr`ごとに12列になります。
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+これで12列のトラックグリッドが作成されたため、子をグリッドに配置できます。これを行うための方法の1つは、グリッド線を使用してそれらを配置することです。たとえば、`grid-column: 1 / 13`は、最初の行から最後 (13番目) までのすべての行にまたがり、12列にまたがります。 `grid-column: 1 / 5;`最初の4列にまたがります。
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+別の方法として、`span`キーワードを使用して、作成することもできます。`span`を使用すると、開始線を設定し、その開始点からまたがる列数を設定します。この場合、`grid-column: 1 / span 12`は`grid-column: 1 / 13`と同じです。また、`grid-column: 2 / span 6`は`grid-column: 2 / 8`と同じです。
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+この7番目の例では、すでに学習したレスポンシブレイアウトの作成に関する概念の一部を、自動的に配置された柔軟な子と組み合わせます。非常に整然としています。ここで覚えておくべき重要な用語は、`repeat`、`auto-(fit|fill)`、および`minmax()'`です。これは頭字語のRAMとして覚えておくことができます。
+
+まとめると、次のようになります。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+ここでもrepeatを使用していますが、今回は、明示的な数値ではなく、`auto-fit`キーワードを使用しています。これにより、これらの子要素の自動配置が可能になります。これらの子の基本最小値は`150px`、最大値は`1fr`です。つまり、小さい画面では、`1fr`の幅全体を占めます。この幅がそれぞれ`150px`に達すると、同じ行にフローします。
+
+`auto-fit`では、ボックスの水平方向のサイズが150ピクセルを超えると、ボックスが伸びて残りのスペース全体が埋められます。ただし、これを`auto-fill`に変更すると、minmax関数の基本サイズを超えても伸びることはありません。
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. Line Up: `justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+次のレイアウトで示す主なポイントは、`justify-content: space-between`です。これは、最初と最後の子要素をバウンディングボックスの端に配置し、残りのスペースを要素間で均等に分散させます。これらのカードの場合、Flexbox表示モードになり、`flex-direction: column`を使用して方向がcolumnに設定されます。
+
+これにより、タイトル、説明、および画像ブロックが親カード内の縦の列に配置されます。次に、`justify-content: space-between`を適用すると、最初の (タイトル) 要素と最後の (画像ブロック) 要素がFlexbox<br>の端に固定され、それらの間の説明テキストが等間隔で各端点に配置されます。
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. Clamping My Style: `clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+ここでは、[ブラウザのサポート](https://caniuse.com/#feat=css-math-functions)が少ない手法についていくつか説明しますが、レイアウトとレスポンシブUI設計には非常におもしろい影響があります。このデモでは、`width: clamp(<min>, <actual>, <max>)`のようにclampを使用して幅を設定しています。
+
+これにより、絶対最小サイズと最大サイズ、および実際のサイズが設定されます。値を使用すると、次のようになります。
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+ここでの最小サイズは`23ch`、23文字です。最大サイズは`46ch`、46文字です。 [文字幅の単位](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)は、要素のフォントサイズ (具体的には`0`グリフの幅) に基づいています。 「実際の」サイズは50%で、これはこの要素の親幅の50%を表します。
+
+`clamp()`関数は、50%が`46ch`より大きい (広いビューポートの場合) か`23ch`より小さい (小さいビューポートの場合) 状態になる*まで*、この要素が50%の幅を保持できるようにしています。親のサイズを拡大および縮小すると、このカードの幅が固定された最大点まで増加し、固定された最小値まで減少することがわかります。追加のプロパティを適用して中央に配置したため、親の中央に配置されたままになります。これにより、幅が広すぎたり (`46ch`以上)、押しつぶされて狭くなりすぎたり (`23ch`未満) せずに、読みやすいレイアウトが可能になります。
+
+これは、レスポンシブタイポグラフィを実装するための優れた方法でもあります。たとえば、`font-size: clamp(1.5rem, 20vw, 3rem)`のように記述できます。この場合、見出しのフォントサイズは常に`1.5rem`から`3rem`間で固定されますが、ビューポートの幅に合わせて、実際の値の`20vw`に基づいて拡大および縮小します。
+
+これは、最小サイズと最大サイズの値で読みやすさを確保するための優れた手法ですが、最近のすべてのブラウザでサポートされているわけではないため、必ずフォールバックを準備して、テストを行ってください。
+
+## 10. Respect for Aspect: `aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+そして最後に、この最後のレイアウトツールは最も実験的なものです。最近、Chromium84でChromeCanaryに導入され、Firefoxからこれを実装するための積極的な取り組みが行われていますが、現在、安定したブラウザエディションには含まれていません。
+
+ただし、これは非常に一般的な問題であるため、説明しておきたいと思います。つまり、それは単に画像のアスペクト比を維持することです。
+
+`aspect-ratio`プロパティを使用して、カードのサイズを変更すると、緑色のビジュアルブロックがこの16x9のアスペクト比を維持します。`aspect-ratio: 16 / 9`でアスペクト比を維持しています。
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+このプロパティなしで16x9のアスペクト比を維持するには、[`padding-top`ハック](https://css-tricks.com/aspect-ratio-boxes/)を使用して、`56.25%`パディングを指定し、top-to-width比を設定する必要があります。ハックと割合を計算する必要性を回避するためのプロパティがまもなく用意されます。`1 / 1`比の正方形と、`2 / 1`で2:1比を作成できます。設定されたサイズ比でこの画像を調整するために必要なのはこれだけです。
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+この機能はまだ開発中ですが、特に動画やiframeに関して、私が何度も直面した多くの開発者の問題を解決するので、知っておくとよいでしょう。
+
+## まとめ
+
+強力な10行のCSSをお読みくださり、どうもありがとうございました。詳細については、[動画](https://youtu.be/qm0IfG1GyZU)をご覧になるか、ご自身で[デモ](https://1linelayouts.glitch.me)をお試しください。
diff --git a/src/site/content/ja/blog/optimize-cls/index.md b/src/site/content/ja/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..2296932aa25
--- /dev/null
+++ b/src/site/content/ja/blog/optimize-cls/index.md
@@ -0,0 +1,280 @@
+---
+title: Cumulative Layout Shift を最適化する
+subhead: 突然のレイアウト シフトを回避し、ユーザー エクスペリエンスを改善させる方法について説明します。
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: Cumulative Layout Shift (累積レイアウト シフト数、CLS) は、ページ内のコンテンツの突然の移動をユーザーが経験する頻度を数値化する指標です。このガイドでは、一般的に CLS を悪化させる原因となるサイズが指定されていない画像、iframe、動的コンテンツなどを最適化する方法について説明します。
+alt: レイアウト シフトが発生すると、読んでいたコンテンツやクリックしようとしていたコンテンツが突然ページの下方向へと押しやられてしまい、ユーザー エクスペリエンスの低下へとつながってしまいます。レイアウト シフトの原因となる動的コンテンツのためにスペースを確保しておくことで、より快適なユーザー エクスペリエンスを実現することができます。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='88' %}
+
+"今クリックしようと思っていたのに！どうして動いたの？😭"
+
+レイアウト シフトは、ユーザーの集中力を乱してしまう可能性があります。記事を読み始めたときに、突然ページ内の要素が移動してしまい、驚きながらも元々読み進めていた場所をもう一度見つけなければならない状況を想像してみてください。このような出来事は、Web 上でニュースを読んでいるときや、"検索" や "カートに入れる" などのボタンをクリックするときなどによく起こります。このような体験は視覚的に不快で、イライラするものです。こういった現象は、別の要素が突然ページに追加されたり、サイズが変更されたりしたために、視覚的な要素が強制的に移動させられた場合によく発生します。
+
+[Core Web Vitals](/vitals) 指標の 1 つである [Cumulative Layout Shift](/cls) (累積レイアウト シフト数、CLS) は、ユーザーの入力から 500 ミリ秒が経過したタイミング以降に発生したレイアウト シフトのシフト スコアを合計することによってコンテンツの不安定性を測定する指標です。この指標では、表示されているコンテンツがビューポート内でどの程度移動したか、および影響を受けた要素の移動距離が測定されます。
+
+このガイドでは、レイアウト シフトが発生する一般的な原因とその最適化について説明を行います。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="良好なCLS値は0.1未満、不良な値は0.25を超え、その間の値は改善が必要", width="384", height="96" %}
+</picture>
+
+
+CLS が低下する要因としては、一般的に以下のものが考えられます。
+
+- サイズが指定されていない画像
+- サイズが指定されていない広告、埋め込み要素、iframe
+- 動的に挿入されたコンテンツ
+- FOIT/FOUT の原因となる Web フォント
+- ネットワークの応答を待ってから DOM を更新するアクション
+
+## サイズが指定されていない画像 🌆
+
+**概要:** 画像要素や動画要素には、必ずサイズ属性 `width` と `height` を指定してください。または、[CSS を駆使したアスペクト比対応ボックス](https://css-tricks.com/aspect-ratio-boxes/)を利用して必要なスペースを確保します。この方法を使用すれば、画像の読み込み中にブラウザーがドキュメント内に適切なスペースを確保できるようになります。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg", controls=true, loop=true, muted=true %} <figcaption>width と height が指定されていない画像。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg", controls=true, loop=true, muted=true %} <figcaption>width と height が指定されている画像。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="画像へのサイズ指定前後での Cumulative Layout Shift の変化を示す Lighthouse レポート", width="800", height="148" %} <figcaption>画像へのサイズ指定が CLS に与える影響を示している Lighthouse 6.0 での測定結果。</figcaption></figure>
+
+### 歴史
+
+Web の黎明期には、開発者は `width` と `height` 属性を `<img>` タグに追加することでブラウザーが画像の取得を開始する前にページ上に十分なスペースを確保したりしていました。これにより、リフローやリレイアウトを最小限に抑えることができます。
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="風船と子犬" />
+```
+
+上に示した `width` と `height` には単位が含まれていないことにお気付きかもしれません。これらの "ピクセル" でのサイズ指定により、640x360 の領域が確保されます。画像の実際のサイズが一致しているかどうかに関わらず、画像はこのスペースに合わせて引き伸ばされます。
+
+[レスポンシブ Web デザイン](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)が登場したとき、開発者は `width` と `height` を省略し、代わりに以下のような CSS を使用して画像のサイズを変更するようになりました。
+
+```css
+img {
+  width: 100%; /* または max-width: 100%; */
+  height: auto;
+}
+```
+
+この方法の欠点として、画像のダウンロードが開始され、ブラウザーがそのサイズを判断できるようになってからでないと画像用のスペースを確保できないことが挙げられます。画像が読み込まれ始めると、それぞれの画像が画面に表示されるたびにページでリフローが発生します。そのため、突然テキストが下に移動する現象が一般的に見られるようになりました。この現象は、ユーザー エクスペリエンスとして好ましいものではありません。
+
+ここで登場するのが、アスペクト比です。画像のアスペクト比とは、画像の width と height の比率のことを指します。一般的に 2 つの数字をコロンで区切る形式によって表現されます (例: 16:9、4:3)。アスペクト比が x:y の場合、画像の幅は x 単位、高さは y 単位となります。
+
+これはつまり、片方のサイズが分かればもう片方のサイズを計算によって明らかにできることを意味しています。アスペクト比が 16:9 の場合には、以下のように計算します。
+
+- puppy.jpg の高さが 360px の場合、幅は 360x(16/9)=640px となります。
+- puppy.jpg の幅が 640px の場合、高さは 640x(9/16)=360px となります。
+
+アスペクト比を理解することで、ブラウザーが高さや関連する領域に対する十分なスペースを計算して確保できるようになります。
+
+### 最新のベスト プラクティス
+
+最近のブラウザーでは画像のデフォルトのアスペクト比を画像の width と height 属性に基づいて設定するようになっているため、レイアウト シフトの発生を防ぐためにそれらを設定しておくと便利です。CSS Working Group のおかげで、開発者は次のような形で通常通りに `width` と `height` を設定するだけでよくなりました。
+
+```html
+<!-- アスペクト比を 640:360 (16:9) に設定します -->
+<img src="puppy.jpg" width="640" height="360" alt="風船と子犬" />
+```
+
+そしてすべてのブラウザーの [UA スタイルシート](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets)は、要素に設定されている既存の `width` と `height` 属性に基づいて[デフォルトのアスペクト比](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images)を追加します。
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+アスペクト比は、画像が読み込まれる前に `width` と `height` 属性に基づいて計算されます。この情報は、レイアウト計算の初期段階で供給されます。画像の幅を特定の値 (たとえば `width: 100%`) に設定するように指示があると、アスペクト比はすぐに高さの計算に使用されます。
+
+ヒント: アスペクト比の理解が難しい場合には、便利な[計算機](https://aspectratiocalculator.com/16-9.html)をご利用ください。
+
+上で示した画像のアスペクト比の変更は [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) と [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891) で実装されており、[WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari) にも展開される予定です。
+
+アスペクト比に関する詳細とレスポンシブ画像に関するさらなる考察については、「[メディアのアスペクト比を利用した無駄のないページ読み込み](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/)」を参照してください。
+
+画像がコンテナに含まれている場合、CSS を使用して画像のサイズをこのコンテナの幅に合わせて変更することができます。画像の高さが固定値 (例: `360px`) にならないように、`height: auto;` を設定します。
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**レスポンシブ画像の場合**
+
+[レスポンシブ画像](/serve-responsive-images)を使用する場合、`srcset` を使用してブラウザーに選択させる画像と、各画像のサイズを定義します。また、`<img>` の width と height 属性を確実に設定するために、各画像では同じアスペクト比を使用する必要があります。
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="風船と子犬"
+/>
+```
+
+[アート ディレクション問題](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)への対応
+
+ページでは、ビューポートが狭い場合には画像をトリミングして表示し、デスクトップ環境ではフルサイズの画像を表示するとよいでしょう。
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="風船と子犬" />
+</picture>
+```
+
+これらの画像にはアスペクト比が異なるものが指定される可能性があり、ブラウザーはすべてのソースでサイズを指定するべきかどうかを含めて最も効果的な解決策を検討しています。解決策が決定されるまでは、ここではリレイアウトが可能です。
+
+## サイズが指定されていない広告、埋め込み要素、iframe 📢😱
+
+### 広告
+
+広告は、Web 上で発生するレイアウト シフトに最も大きな影響を与える要素の 1 つです。広告ネットワークやパブリッシャーはしばしば動的な広告サイズの変更をサポートしています。多彩な広告サイズによってクリック率が高くなればより多くの広告がオークションに参加して競い合うことになるため、パフォーマンスと収益が向上します。しかしながら、残念なことに広告によって表示コンテンツがページの下へと追いやられてしまうため、最適なユーザー エクスペリエンスが得られなくなってしまう可能性があります。
+
+広告のライフサイクルの中では、以下のような多くのポイントでレイアウト シフトが発生する可能性があります。
+
+- サイトが DOM に広告コンテナを挿入するとき
+- サイトがファーストパーティ コードを使用して広告コンテナのサイズを変更するとき
+- 広告タグ ライブラリが読み込まれる (それによって広告コンテナのサイズが変更される) とき
+- 広告がコンテナ内を表示される (最終的な広告のサイズが異なるためにサイズが変更される) とき
+
+以下に示すようなサイト上で発生する広告によるレイアウト シフトを減らすためのベスト プラクティスに従うことで、レイアウト シフトを軽減することができます。
+
+- 広告スロットのスペースを静的に確保します。
+    - つまり、広告タグ ライブラリが読み込まれる前に要素にスタイルを設定するのです。
+    - コンテンツ フロー内に広告を配置する場合には、スロットのサイズを確保しておくことで確実にレイアウト シフトを回避します。こういった広告については、画面外で読み込まれる場合でもレイアウト シフトが*発生しないようにする必要があります*。
+- ビューポートの最上部付近に位置が固定されていない広告を配置する場合には注意が必要です。
+    - 以下の例では、広告を "WORLD VISION" のロゴの下に移動し、スロット用に十分なスペースを確保しておくことをお勧めします。
+- 広告スロットが表示されているのに広告が返されていない場合には、プレースホルダーを表示することで確保されたスペースを崩さないようにします。
+- 可能な限り大きいサイズを広告スロット用に確保することで、レイアウト シフトを回避することができます。
+    - 有効な方法ではありますが、最大値よりも小さな広告クリエイティブがスロットに表示された場合に空白のスペースが生まれてしまうリスクがあります。
+- 過去のデータに基づき、対象の広告スロットに最適なサイズを選択しましょう。
+
+サイトによっては、広告スロットが埋まりそうにない場合に最初に枠を潰してしまうことでレイアウト シフトを抑えられる場合があります。広告配信を自分でコントロールしない限りは、正確なサイズを毎回簡単に選択する方法はありません。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption>十分なスペースが確保されていない広告。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption>十分なスペースが確保されている広告。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="広告などのバナー用のスペースを確保する前後での Cumulative Layout Shift の変化を示す Lighthouse レポート", width="800", height="148" %} <figcaption>バナー用のスペースの確保が CLS に与える影響を示している Lighthouse 6.0 での測定結果</figcaption></figure>
+
+#### 広告スロットのスペースを静的に確保する
+
+タグ ライブラリに渡されたものと同じサイズになるようにスロットの DOM 要素を静的にスタイル設定します。これにより、ライブラリの読み込み時にレイアウト シフトが発生しないようにすることができます。これを行わないと、ページがレイアウトされた後にライブラリがスロット要素のサイズを変更してしまう可能性があります。
+
+また、比較的サイズが小さい広告の配信についてもご検討ください。比較的小さな広告が配信されれば、パブリッシャーがコンテナに (比較的大きな) サイズを設定することにより、レイアウト シフトの発生を防止することができます。この方法の欠点として空白のスペースが増えてしまうことが挙げられますので、この点を念頭に置いてご検討ください。
+
+#### ビューポートの最上部付近への広告配置を避ける
+
+ビューポートの上部に位置する広告は、中央に位置する広告に比べてより大きなレイアウト シフトを引き起こしてしまう可能性があります。これは、上部に位置する広告は自然と下方向に位置するコンテンツが多くなってしまうために、広告によるレイアウト シフトが発生した場合に移動させてしまう要素が必然的に多くなることが原因です。逆にビューポートの中央付近に位置する広告は、上部に位置する広告に比べてレイアウトシフトが発生した場合に移動させてしまうコンテンツが比較的少なくなります。
+
+### 埋め込み要素と iframe
+
+埋め込みが可能なウィジェットを使用すると、移動が可能な Web コンテンツをページ内に埋め込むことができるようになります (たとえば、YouTube の動画、Google マップの地図、ソーシャル メディアの投稿など)。こういった埋め込みには、さまざまな形式が存在します。
+
+- HTML フォールバックや、そのフォールバックをリッチな埋め込み要素へと変換する JavaScript タグ。
+- インライン HTML スニペット
+- iframe を使用した埋め込み要素
+
+こういった埋め込み要素は埋め込まれる要素の大きさを事前に把握していない場合が多く (たとえばソーシャル メディアの投稿を埋め込む場合に、画像や動画、複数行に渡るテキストなどがそこに含まれているかどうか)、そのため、埋め込みを提供しているプラットフォームがその埋め込み要素を表示するために十分なスペースを確保できない場合があり、最終的に読み込まれたときにレイアウト シフトが発生してしまう場合があります。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %} <figcaption>スペースを確保せずに埋め込まれる場合。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %} <figcaption>スペースが確保された状態で埋め込まれる場合。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="埋め込み要素のためのスペースを確保する前後での Cumulative Layout Shift の変化を示す Lighthouse レポート", width="800", height="148" %} <figcaption>埋め込み要素のためのスペースの確保が CLS に与える影響を示している Lighthouse 6.0 での測定結果</figcaption></figure>
+
+これを回避するためには、プレースホルダーやフォールバックを使用して埋め込み要素を表示するために十分なスペースを事前に計算し、CLS を最小限に抑える必要があります。以下に、埋め込みに利用可能なワークフローの 1 つをご紹介します。
+
+- ブラウザーの開発ツールを使用して最終的な埋め込み要素の高さを確認する
+- 埋め込み要素が読み込まれると包含されている iframe のサイズも調整され、それに合わせてコンテンツのサイズも調整される。
+
+サイズに注意を払い、それに合わせて埋め込み用のプレースホルダーのスタイルを設定してください。広告やプレースホルダーのサイズが規格ごとに微妙に異なる場合には、メディア クエリを使用して調整する必要が生じる可能性があります。
+
+### 動的コンテンツ 📐
+
+**概要:** ユーザーの操作に対する応答以外で、既存のコンテンツの上側にコンテンツを挿入することは避けてください。こうしておくことで、レイアウト シフトが発生したとしても、その影響を想定内に留めておくことができるようになります。
+
+サイトの読み込みの際に、ビューポート内の上部または下部に UI が表示され、レイアウト シフトが発生したことがあるという方がいらっしゃるかもしれません。広告と同じように、バナーやフォームによってページ内のコンテンツが移動させられてしまうことがよくあります。
+
+- "ニュースレターにサインアップしましょう！" (おいおい、落ち着けって。さっき見たばかりだよ！)
+
+- "関連コンテンツ"
+
+- "[iOS/Android] アプリをインストールしましょう"
+
+- "まだまだ注文受付中です"
+
+- "GDPR に基づく通知"
+
+    <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %} <figcaption>スペースが確保されていない動的コンテンツ。</figcaption></figure>
+
+このようなタイプの UI アフォーダンスを表示しなければならない場合には、事前にビューポート内に十分なスペースを確保し (たとえば、プレースホルダーやスケルトン UI を使用しましょう)、読み込み時にページ内のコンテンツが大幅に移動してしまわないようにしましょう。
+
+場合によっては、コンテンツの動的な追加がユーザー エクスペリエンスにとって重要な要素となることがあります。たとえば、商品リストに商品を追加する場合や、ライブ フィードのコンテンツを更新する場合などです。そういった場合に予期しないレイアウト シフトを回避する方法には、以下のようなものがあります。
+
+- サイズが固定されたコンテナ内で、古いコンテンツを新しいコンテンツで置き換えるか、トランジション後にカルーセルを使用して古いコンテンツを削除します。新しいコンテンツが追加されている最中に誤ってクリックやタップを行なってしまうことがないよう、トランジションが完了するまでの間はリンクやコントロールを必ず無効にしてください。
+- 新しいコンテンツの読み込みをユーザーが主導するようにし、ユーザーがコンテンツの変化に驚かされることがないようにします (たとえば、"続きを読む" や "更新" ボタンなどを使用しましょう)。その場合に、ユーザーによる操作の前にコンテンツを事前取得しておくことで、すぐに表示されるようにすることをお勧めします。また、ユーザーが入力を行なってから 500 ミリ秒以内に発生したレイアウト シフトは CLS の対象にならないことを覚えておきましょう。
+- 画面外のコンテンツをシームレスに読み込み、ユーザーに利用可能であることをオーバーレイで通知しましょう (たとえば、"上にスクロール" ボタンなど)。
+
+<figure>{% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="予期しないレイアウト シフトを発生させることなく動的コンテンツを読み込む場合の例 (Twitter と Chloé の Web サイトより)", width="800", height="458" %} <figcaption>動的コンテンツを読み込んでも予期しないレイアウト シフトが発生しない場合の例。左: Twitter でのライブ フィード コンテンツの読み込み。右: Chloé の Web サイトでの "Load More" (続きを読む) の例。YNAP チームによる<a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">追加コンテンツを読み込む場合の CLS の最適化方法</a>をご確認ください。</figcaption></figure>
+
+### FOIT/FOUT の原因となる Web フォント 📝
+
+Web フォントのダウンロードとレンダリングが行われる場合、以下のような 2 つのパターンでレイアウト シフトが発生する可能性があります。
+
+- フォールバック フォントが新しいフォントと入れ替わる場合 (FOUT - スタイルが設定されていないテキストの瞬間的表示。Flash of unstyled text の略)。
+- 新しいフォントのレンダリングが完了するまでの間、"非表示" のテキストが表示される場合 (FOIT - 非表示テキストの瞬間的表示。Flash of invisible text の略)。
+
+以下のツールを使用することで、この現象を最小限に抑えることができます。
+
+- <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code> では、<code>auto</code>、<code>swap</code>、<code>block</code>、<code>fallback</code>、<code>optional</code> などの値を使用してカスタム フォントのレンダリング動作を修正することができます。残念ながら、これらの値 ([optional](http://crrev.com/749080) を除く) はすべて上に示したパターンのいずれかによるリレイアウトを引き起こしてしまう可能性があります。
+- [Font Loading API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) を使用すれば、必要なフォントの取得にかかる時間を短縮することができます。
+
+Chrome 83 の公開時点では、以下も方法もお勧めできます。
+
+- 主な Web フォントに `<link rel=preload>` を使用する: 事前読み込みされたフォントは初期の描画に含まれている可能性が高く、その場合にはレイアウト シフトは発生しません。
+- `<link rel=preload>` と `font-display: optional` を組み合わせる
+
+詳細については、「[オプションのフォントを事前読み込みすることにより、レイアウト シフトや非表示テキストの瞬間的表示 (FOIT) を防ぐ](/preload-optional-fonts/)」を参照してください。
+
+### アニメーション 🏃‍♀️
+
+**概要:** レイアウト シフトの原因となるプロパティを利用したアニメーションを、`transform` アニメーションに置き換えます。
+
+CSS プロパティの値が変更されると、ブラウザーがその変更に対応しなければならなくなります。`box-shadow` や `box-sizing` などを含む多くの値が、リレイアウト、描画、コンポジットを引き起こします。そして、簡単に変更が可能な CSS プロパティは多数存在します。
+
+レイアウト変更のトリガーとなる CSS プロパティについては、「[CSS のトリガー](https://csstriggers.com/)」および「[パフォーマンスの高いアニメーション](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)」を参照してください。
+
+### 開発者ツール 🔧
+
+喜ばしいことに、Cumulative Layout Shift (CLS) の測定やデバッグを行うためのツールは、以下に示すようにたくさんのものが存在します。
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [6.0](https://github.com/GoogleChrome/lighthouse/releases) 以降では、ラボ設定での CLS の測定がサポートされています。また、このリリースにおいては、レイアウト シフトを最も多く発生させているノードが強調表示されます。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="Lighthouse 6.0 では、Metrics (指標) セクションで CLS を測定することが可能です", width="800", height="309" %}
+
+DevTools の[パフォーマンス パネル](https://developer.chrome.com/docs/devtools/evaluate-performance/)では、Chrome 84 以降 **Experience** (エクスペリエンス) セクションでレイアウト シフトが強調表示されています。`Layout Shift` レコードの **Summary** (概要) ビューでは、Cumulative Layout Shift のスコアに加えて影響を受ける範囲を示す四角形のオーバーレイが表示されます。
+
+<figure>{% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Experience セクションを展開し、Layout Shift レコードが表示されている Chrome DevTools のパフォーマンス パネル", width="800", height="438" %} <figcaption>パフォーマンス パネルで新しいトレースを記録すると、結果を示す <b>Experience</b> セクションには <code>Layout Shift</code> レコードを表す赤色のバーが表示されます。レコードをクリックすることで、影響を受ける要素を詳細に確認することができます (例: エントリの Moved from (移動元) や Moved to (移動先) を確認する)。</figcaption></figure>
+
+また、[Chrome User Experience Report](https://developer.chrome.com/blog/chrome-ux-report-bigquery/) を使用し、オリジンレベルで集計される実際の環境での CLS を測定することも可能です。CrUX の CLS データは BigQuery を介して利用することができ、CLS のパフォーマンスを確認するための[サンプル クエリ](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql)が利用可能です。
+
+このガイドの内容は以上となります。この記事が少しでもあなたのページのレイアウト シフトを減らす手助けとなれば嬉しいです。
+
+*レビューしていただいた Philip Walton、Kenji Baheux、Warren Maresca、Annie Sullivan、Steve Kobes、Gilberto Cocchi には、心より感謝申し上げます。*
diff --git a/src/site/content/ja/blog/optimize-fid/index.md b/src/site/content/ja/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..dcc2b086ed2
--- /dev/null
+++ b/src/site/content/ja/blog/optimize-fid/index.md
@@ -0,0 +1,173 @@
+---
+title: First Input Delay を最適化する
+subhead: ユーザーによる操作により速く応答する方法。
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: スマートフォンの画面に触れる手
+description: First Input Delay (初回入力までの遅延時間、FID) は、ユーザーが初めてサイトを操作してからブラウザーが実際にその操作に応答するまでの時間を測定するものです。この記事では、使用されていない JavaScript の圧縮、長く時間がかかっているタスクの分割、操作に対する準備状況の改善などの実施により FID を最適化する方法について説明します。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>クリックしても反応がありません。なぜこのページを操作できないのでしょうか？😢</p>
+</blockquote>
+
+[First Contentful Paint](/fcp/) (視覚コンテンツの初期表示時間、FCP) と [Largest Contentful Paint](/lcp/) (最大視覚コンテンツの表示時間、LCP) は、どちらもコンテンツがページ上で視覚的にレンダリング (描画) されるまでにかかる時間を測定する指標です。描画にかかる時間も重要ではありますが、これは*読み込みの応答性*、つまりユーザーの操作に対するページの応答の速さを示すものではありません。
+
+[First Input Delay](/fid/) (FID) は、サイトのインタラクティブ性や応答性についてのユーザーの第一印象を測定する [Core Web Vitals](/vitals/) 指標です。ユーザーが最初にページに操作してからブラウザーが実際にその操作に応答するまでの時間を測定します。FID は[フィールド指標](/user-centric-performance-metrics/#in-the-field)であり、ラボ環境ではシミュレートできません。応答の遅延を測定するには、**実際のユーザーによる操作**が必要です。
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="良いfid値は2.5秒、悪い値は4.0秒を超え、その間の値は改善が必要", width="384", height="96" %}
+  </picture>
+
+[ラボ](/how-to-measure-speed/#lab-data-vs-field-data)環境での FID の予測には、[Total Blocking Time (合計ブロック時間、TBT)](/tbt/) をお勧めしています。この 2 つの指標の測定対象は異なりますが、通常 TBT の改善は FID の改善に相当します。
+
+FID が悪化する場合の主な原因には、**重い JavaScript の実行**が挙げられます。Web ページ上での JavaScript の解析方法、コンパイル方法、実行方法を最適化することにより、FID を直接的に短縮することができます。
+
+## 重い JavaScript の実行
+
+ブラウザーは、メイン スレッドで JavaScript を実行している最中にはほとんどのユーザー入力に応答することができません。言い換えれば、メイン スレッドがビジー状態の間はブラウザーがユーザーの操作に応答することはできません。これを改善するには、以下の方法を行います。
+
+- [長く時間がかかっているタスクを分割する](#long-tasks)
+- [操作に対する準備状況にページを最適化する](#optimize-interaction-readiness)
+- [Web Worker を使用する](#use-a-web-worker)
+- [JavaScript の実行にかかる時間を短縮する](#reduce-javascript-execution)
+
+## 長く時間がかかっているタスクを分割する {: #long-tasks }
+
+単一のページで読み込まれる JavaScript の量の削減をすでに試している場合には、長時間に渡って実行されるコードを**比較的小さな非同期タスク**へと分割する方法が有効となる可能性があります。
+
+[**長く時間がかかっているタスク**](/custom-metrics/#long-tasks-api)とは、ユーザーが UI の応答がが悪いと感じる可能性のある JavaScript の実行時間のことを指します。メイン スレッドを 50 ミリ秒以上に渡ってブロックし続けるコードは、すべて長く時間がかかっているタスクとして分類されます。長く時間がかかっているタスクは、潜在的な JavaScript の肥大化 (ユーザーがその場で必要とする以上のものを読み込み、実行すること) の兆候を示しています。長く時間がかかっているタスクを分割することにより、サイトの入力遅延を削減することができます。
+
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Chrome DevTools での長く時間がかかっているタスク", width="800", height="132" %}
+  <figcaption>Chrome DevTools のパフォーマンス パネルで<a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">可視化された、長く時間がかかっているタスク</a></figcaption>
+</figure>
+
+コード分割や、長く時間がかかっているタスクの分割などのベスト プラクティスを採用することにより、FID は顕著に改善されるはずです。TBT はフィールド指標ではありませんが、Time to Interactive (操作可能になるまでの時間、TTI) および FID の両指標が最終的に改善されるまでの進捗状況の確認に役立ちます。
+
+{% Aside %}詳細については、「[長く時間がかかっている JavaScript タスクが Time to Interactive を悪化させていませんか？](/long-tasks-devtools/)」を参照してください。{% endAside %}
+
+## 操作に対する準備状況にページを最適化する
+
+JavaScript に大きく依存している Web アプリケーションで FID や TBT のスコアが悪化する原因には、いくつかのものが考えられます。
+
+### ファーストパーティー スクリプトの実行によって操作に対する準備状況に遅延が生じる
+
+- JavaScript のサイズの肥大化、実行時間の長期化、非効率なチャンキングは、ユーザーの入力に対するページの応答時間を遅らせ、FID、TBT、TTI に影響を与えます。コードや機能のプログレッシブ読み込みはこの作業を分散させ、操作に対する準備状況を改善させます。
+- サーバー側でレンダリングされたアプリは、一見すぐに画面にピクセルが描画されるように見えるかもしれませんが、大量のスクリプトの実行によってユーザーの操作がブロックされる場合もあるので注意が必要です (イベント リスナーを接続するためのリハイドレーションなど)。ルートベースのコード分割が使用されている場合、これには数百ミリ秒、場合によっては数秒かかる可能性があります。より多くのロジックをサーバー側に移行するか、ビルド時に静的にコンテンツを生成することを検討してください。
+
+次に示すのは、あるアプリケーションのファーストパーティー スクリプトの読み込みを最適化する前後での TBT スコアの比較です。必要のないコンポーネントのために読み込み (および実行) にコストがかかっていたスクリプトをクリティカル パスから除外することにより、ユーザーはより早くページを操作できるようになりました。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="ファーストパーティー スクリプトの最適化により、Lighthouse での TBT スコアが改善されました。", width="800", height="148" %}
+
+### データフェッチが操作に対する準備状況の様々な側面に影響を与える可能性がある
+
+- カスケーディング フェッチのウォーターフォール (例: コンポーネントで使用される JavaScript やデータのフェッチ) での待機は、操作の遅延時間に影響を及ぼす可能性があります。カスケーディング データ フェッチへの依存は、最小限に抑えるようにしましょう。
+- サイズの大きいインラインのデータストアは、HTML の解析にかかる時間を増大させ、描画や操作の指標に影響を与えます。クライアント側で後処理が必要なデータの量を最小限に抑えるようにしましょう。
+
+### サードパーティ スクリプトの実行も操作の遅延時間に悪影響を及ぼす可能性がある
+
+- ネットワークをビジー状態にし、メイン スレッドを定期的に応答不可の状態にする可能性があるサードパーティ製のタグやアナリティクスが多くのサイトで使用されていますが、これらは操作の遅延時間に影響を及ぼします。サードパーティ製のコードについてはオンデマンドでの読み込みをご検討ください (たとえば、スクロールしてビューポートの範囲内に含まれるまで、Below the fold (ビロウ・ザ・フォールド、スクロールせずに閲覧可能なサイトのファースト ビュー以外の部分を指す) にある広告を読み込まないようにするなど)。
+- 場合によっては、メイン スレッドでの優先度や帯域幅の観点からサードパーティ スクリプトがファーストパーティ スクリプトよりも先に実行される可能性があり、ページが操作に応答できるようになるまでの時間にも遅延が生じる場合があります。ユーザーにとって最も価値があると思われるものを優先的に読み込むようにしましょう。
+
+## Web Worker を使用する
+
+メイン スレッドのブロックは、入力遅延を引き起こす主な原因の 1 つです。[Web Worker](https://developer.mozilla.org/docs/Web/API/Worker) は、JavaScript をバックグラウンドのスレッドで実行できるようにします。UI 以外の処理を別のワーカー スレッドに移すことでメイン スレッドのブロック時間を短縮し、結果的に FID を改善させることができます。
+
+運営するサイトで Web Worker をより簡単にご利用いただくために、以下のライブラリの使用をご検討ください。
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink): `postMessage` を抽象化して使いやすくしたヘルパー ライブラリ
+- [Workway](https://github.com/WebReflection/workway): 汎用的な Web Worker エクスポーター
+- [Workerize](https://github.com/developit/workerize): モジュールを Web Worker に移動
+
+{% Aside %}Web Worker を利用してメイン スレッド以外でコードを実行する方法については、「[Web Worker を使用してブラウザーのメイン スレッド以外で JavaScript を実行する](/off-main-thread/)」を参照してください。{% endAside %}
+
+### JavaScript の実行にかかる時間を短縮する {: #reduce-javascript-execution }
+
+ページ上の JavaScript の量を制限することで、ブラウザーが JavaScript コードを実行するために必要となる時間を短縮することができます。これにより、ユーザーの操作に対するブラウザーの応答時間を高速化することができます。
+
+ページ上で実行される JavaScript の量を減らす方法には、以下のものがあります。
+
+- 使用されていない JavaScript を先送りする
+- 使用されていないポリフィルを最小限に抑える
+
+#### 使用されていない JavaScript を先送りする
+
+デフォルトでは、すべての JavaScript はレンダリングをブロックします。ブラウザーは外部の JavaScript ファイルにリンクされているスクリプト タグに遭遇すると処理を中断し、その JavaScript のダウンロード、解析、コンパイル、実行を行わなければならなくなります。そのため、ページの処理やユーザーの入力に対する応答に必要なコードのみを読み込む必要があります。
+
+Chrome DevTools の [Coverage](https://developer.chrome.com/docs/devtools/coverage/) (カバレッジ) タブでは、Web ページで使用されていない JavaScript がどの程度存在しているかを確認することができます。
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="Coverage (カバレッジ) タブ。", width="800", height="559" %}
+
+使用されていない JavaScript を削減する方法には、以下のものがあります。
+
+- 複数のチャンクへとバンドルのコードを分割する
+- サードパーティ スクリプトを含む重要でない JavaScript を`async` または `defer` を使用して先送りする
+
+**コード分割**とは、1 つの大きな JavaScript バンドルを条件付きでの読み込みが可能な小さなチャンクへと分割することを意味します (レイジーロードとも呼ばれています)。[最新のブラウザーのほとんどが動的なインポート構文をサポート](https://caniuse.com/#feat=es6-module-dynamic-import)しており、モジュールを必要に応じてフェッチすることができます。
+
+```js
+import('module.js').then((module) => {
+  // モジュールを使用して何かを実行します。
+});
+```
+
+特定のユーザー操作 (ルートの変更やモーダル ウィンドウの表示など) に関する JavaScript を動的にインポートすることにより、最初のページ読み込みに使用されないコードを必要な場合にのみ取得できるようになります。
+
+一般的なブラウザーのサポートに加えて、動的なインポート構文は様々なビルド システムでも使用が可能です。
+
+- モジュール バンドラーとして [webpack](https://webpack.js.org/guides/code-splitting/)、[Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82)、[Parcel](https://parceljs.org/code_splitting.html) を使用している場合には、それらが提供する動的インポートのサポートをご利用ください。
+- [React](https://reactjs.org/docs/code-splitting.html#reactlazy)、[Angular](https://angular.io/guide/lazy-loading-ngmodules)、[Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) のようなクライアントサイド フレームワークでは、コンポーネントレベルでのレイジーロードを容易にするための抽象化を提供しています。
+
+{% Aside %}コード分割の詳細については、「[コード分割による JavaScript ペイロードの削減](/reduce-javascript-payloads-with-code-splitting/)」を参照してください。{% endAside %}
+
+コード分割以外にも、クリティカル パスや Above the fold (アバブ・ザ・フォールド、スクロールせずに閲覧可能なサイトのファースト ビューを指す) のコンテンツに必要のないスクリプトについては常に [async または defer](https://javascript.info/script-async-defer) を使用してください。
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+特別な理由がない限りは、すべてのサードパーティ スクリプトをデフォルトで `defer` または `async` のいずれかを使用して読み込むようにすることを強くお勧めします。
+
+#### 使用されていないポリフィルを最小限に抑える
+
+最新の JavaScript 構文を使用してコードを作成したり、最新のブラウザー API を参照したりしている場合、ページを古いブラウザーで動作させるためにはトランスパイルを行ったり、ポリフィルを使用したりする必要があります。
+
+ポリフィルやトランスパイルされたコードをサイトに使用する場合に考えられる主なパフォーマンス上の問題点の 1 つとして、最新のブラウザーがそれらを必要としていない場合にはダウンロードを行う必要がなくなるということが挙げられます。アプリケーションの JavaScript サイズを削減するには、使用されていないポリフィルを可能な限り少なくし、それらが必要とされる環境に限定して使用するようにしてください。
+
+運営するサイトでのポリフィルの使用を最適化する方法には、以下のものがあります。
+
+- トランスパイラとして [Babel](https://babeljs.io/docs/en/index.html) を使用している場合、[`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) を使用して、ターゲットにするブラウザーが必要とするポリフィルのみを使用するようにします。Babel 7.9 では、不必要なポリフィルをさらに削減するために [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) オプションを有効にしてください。
+
+- module/nomodule パターンを使用して、異なるバンドルを 2 つ配信します (`@babel/preset-env` も [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules) を介してこれをサポートしています)。
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    JavaScript モジュールをサポートしている環境であれば、Babel を使用してコンパイルされた新しい ECMAScript の機能の多くはすでにサポートされています。そのため、この手法を用いることにより、トランスパイルされたコードのみが実際にそれらを必要としているブラウザーに使用されていることを確認するプロセスを簡素化することができます。
+
+{% Aside %}このトピックの詳細については、「[最新のコードを最新のブラウザーに配信して、ページの読み込みを高速化する](/serve-modern-code-to-modern-browsers/)」ガイドをご覧ください。{% endAside %}
+
+## 開発者ツール
+
+FID を測定またはデバッグするためのツールは、以下のように様々なものが用意されています。
+
+- FID はフィールド指標であるため、[Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) には FID のサポートは含まれていません。ただし、その代替指標として [Total Blocking Time](/tbt/) (TBT) を使用することができます。TBT を改善することができる最適化手法であれば、実際のユーザー環境での FID も改善することができるはずです。
+
+    {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0", width="800", height="309" %}
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) は、オリジンレベルで集計された実際の環境での FID 値を提供します。
+
+*レビューしていただいた Philip Walton、Kayce Basques、Ilya Grigorik、Annie Sullivan には、心より感謝申し上げます。*
diff --git a/src/site/content/ja/blog/optimize-lcp/index.md b/src/site/content/ja/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..2757fc89590
--- /dev/null
+++ b/src/site/content/ja/blog/optimize-lcp/index.md
@@ -0,0 +1,412 @@
+---
+title: Largest Contentful Paint を最適化する
+subhead: メインコンテンツをより速くレンダリングする方法。
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2020-08-20
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: '"LCP を最適化する" のバナー画像'
+description: Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP) は、ページのメイン コンテンツの画面へのレンダリングが完了したタイミングを判断するために使用されます。この記事では、応答に時間がかかっているサーバー、リソースの読み込み時間、クライアントサイドでのレンダリングなどを改善することによって LCP を最適化する方法について説明します。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='1073' %}
+
+<blockquote>
+  <p>便利なコンテンツが表示されません！どうしてこんなに読み込みに時間がかかるのですか？😖</p>
+</blockquote>
+
+ユーザー エクスペリエンスを低下させる要因の 1 つに、画面にレンダリングされたコンテンツをユーザーが視認するまでの時間が挙げられます。[First Contentful Paint](/fcp) (視覚コンテンツの初期表示時間、FCP) は DOM コンテンツが最初にレンダリングされるまでの時間を測定する指標ですが、ページ上で最もサイズが大きいコンテンツ (通常はこちらの方がより重要となります) がレンダリングされるまでの時間を捕捉することはできません。
+
+[Largest Contentful Paint](/lcp) (最大視覚コンテンツの表示時間、LCP) は [Core Web Vitals](/vitals/) に含まれている指標であり、ビューポート内で最もサイズが大きいコンテンツ要素の表示タイミングを測定します。この指標は、ページのメイン コンテンツの画面へのレンダリングが完了したタイミングを判断するために使用されます。
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="良好なLCP値は2.5秒、不良な値は4.0秒を超え、その間の値は改善が必要", width="384", height="96" %}
+  </picture>
+
+LCP が低下する要因としては、一般的に以下のものが考えられます。
+
+- [サーバーの応答速度の低下](#slow-servers)
+- [レンダリングを妨げる JavaScript および CSS](#render-blocking-resources)
+- [リソースの読み込み速度の低下](#slow-resource-load-times)
+- [クライアントサイドでのレンダリング](#client-side-rendering)
+
+## サーバーの応答速度の低下 {: #slow-servers }
+
+ブラウザーがサーバーからコンテンツを受信するのに時間がかかればかかるほど、画面に何かをレンダリングするのに時間がかかってしまいます。サーバーの応答速度を高速化することで、LCP を含むすべてのページの読み込みに関連する指標を直接的に改善することができます。
+
+何よりもまず、サーバーがコンテンツを処理する方法と場所を改善しましょう。サーバーの応答時間を測定するには、[**Time to First Byte**](/ttfb/) (サーバーの初期応答時間、TTFB) を使用します。TTFB の改善には、以下のような様々な方法があります。
+
+- サーバーを最適化する
+- ユーザーを近くの CDN にルーティングする
+- アセットをキャッシュする
+- HTML ページをキャッシュファーストで配信する
+- サードパーティの接続を早期に確立する
+- Signed Exchange (SXG) を使用する
+
+### サーバーを最適化する
+
+サーバーが処理を完了するまでにかなり長い時間がかかってしまうような、負荷が高いクエリを実行していませんか？あるいは、別の複雑な処理がサーバーサイドで実行されていて、ページ コンテンツを返す処理に遅延が発生していませんか？サーバーサイドのコードを分析して効率化することで、ブラウザーがデータを受け取るまでの時間を直接的に改善することができます。
+
+多くのサーバーサイド Web フレームワークでは、ブラウザーからのリクエストに応じて即座に静的なページを配信するのではなく、動的に Web ページを生成する必要があります。つまり、すでに用意されている完全な HTML ファイルがブラウザーのリクエストに応じて送信されるのではなく、ページを構築するためのロジックをフレームワーク側で実行する必要があるのです。これは、データベース クエリの結果が保留されることや、UI フレームワーク ([React](https://reactjs.org/docs/react-dom-server.html) など) によってコンポーネントをマークアップ内に生成する必要があることが原因です。サーバー上で動作する多くの Web フレームワークには、この処理を高速化するためのパフォーマンス ガイダンスが用意されています。
+
+{% Aside %}詳細については、「[過負荷状態に陥っているサーバーの修正](/overloaded-server/)」を参照してください。{% endAside %}
+
+### ユーザーを近くの CDN にルーティングする
+
+コンテンツ デリバリー ネットワーク (CDN) とは、様々な場所に分散して設置されたサーバーのネットワークのことを指します。Web ページのコンテンツが 1 台のサーバーでホストされている場合、地理的に離れた場所にいるユーザーが使用しているブラウザーからのリクエストが文字通り世界中を移動しなければならなくなってしまうため、結果的に Web サイトの読み込みが遅くなります。ユーザーが地理的に離れたサーバーへのネットワーク リクエストによって長時間待たされることがないように、CDN の利用をご検討ください。
+
+### アセットをキャッシュする
+
+HTML が静的なもので、リクエストのたびに変更する必要がない場合には、キャッシングによって無駄な生成を防ぐことができます。生成された HTML のコピーをディスクに保存しておくこと (サーバーサイド キャッシング) によって TTFB を削減し、リソースの使用を最小限に抑えることができます。
+
+サーバー キャッシングの適用については、ご利用のツールチェーンに応じて以下のような複数の方法が存在します。
+
+- リバース プロキシ ([Varnish](https://varnish-cache.org/)、[nginx](https://www.nginx.com/)) を構成し、キャッシュされたコンテンツを配信するか、アプリケーション サーバーの前にインストールされた場合にキャッシュ サーバーとして機能させる
+- クラウド プロバイダー ([Firebase](https://firebase.google.com/docs/hosting/manage-cache)、[AWS](https://aws.amazon.com/caching/)、[Azure](https://docs.microsoft.com/azure/architecture/best-practices/caching)) のキャッシュ動作を構成して管理する
+- エッジ サーバーを設置している CDN を使用し、ユーザーの近くでコンテンツをキャッシュして保存する
+
+### HTML ページをキャッシュファーストで配信する
+
+インストールされている場合は、[Service Worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) がブラウザーのバックグラウンドで動作し、サーバーからのリクエストをインターセプトすることができます。このレベルのプログラマティック キャッシュ コントロールにより、HTML ページのコンテンツの一部または全部をキャッシュし、コンテンツが変更された場合にのみキャッシュを更新することができるようになります。
+
+このパターンを使用しているサイトで LCP の分布がどのように減少したかを、次の図に示します。
+
+<figure>{% Img src="image/admin/uB0Sm56R88MRF16voQ1k.png", alt="HTML キャッシングの使用前後での Largest Contentful Paint の分布の比較", width="800", height="495" %} <figcaption>Service Worker を使用している場合と、そうではない場合での Largest Contentful Paint の分布の比較 - <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a></figcaption></figure>
+
+このグラフは、過去 28 日間に渡る単一サイトでの LCP の分布を、Service Worker の状態別に示したものです。Service Worker にキャッシュファーストの HTML ページ配信が導入されると、LCP の値が高速化したページ読み込みの数が大幅に増加することにご注目ください (青いグラフで表示)。
+
+{% Aside %}HTML ページの全部または一部をキャッシュファーストで配信する技術については、「[Service Worker による HTML ペイロードの削減](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/)」を参照してください。{% endAside %}
+
+### サードパーティとの接続を早期に確立する
+
+サードパーティ オリジンへのサーバー リクエストも LCP に影響を及ぼす可能性があります。特にページ上で重要となるコンテンツの表示に必要な場合には、注意が必要です。`rel="preconnect"` を使用し、ページが可能な限り早期に接続を確立しようとしていることをブラウザーに通知します。
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+また、`dns-prefetch` を使用して DNS ルックアップをより速く完了させることも可能です。
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+どちらの場合でも動作はしますが、`preconnect` をブラウザーがサポートしていない場合のフォールバックとして `dns-prefetch` の使用をご検討ください。
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %}詳細については、「[ネットワーク接続を早期に確立し、知覚されるページ速度を向上させる](/preconnect-and-dns-prefetch/)」を参照してください。{% endAside %}
+
+### Signed Exchange (SXG) を使用する
+
+[Signed Exchange (SXG)](/signed-exchanges) は、簡単にキャッシュ可能な形式でコンテンツを配信することにより、より高速なユーザー エクスペリエンスを可能にする配信メカニズムです。具体的には、[Google 検索](https://developers.google.com/search/docs/advanced/experience/signed-exchange)が SXG をキャッシュし、状況に応じてプリフェッチします。トラフィックの大部分を Google 検索が占めているサイトにとっては、SXG は LCP を改善するための重要なツールとなる可能性があります。詳細については、「[Signed Exchange](/signed-exchanges)」を参照してください。
+
+## レンダリングを妨げる JavaScript および CSS {: #render-blocking-resources }
+
+ブラウザーは、コンテンツのレンダリングを開始する前に HTML のマークアップを解析して DOM ツリーに変換する必要があります。HTML パーサーは、外部スタイルシート (`<link rel="stylesheet">`) や同期的な JavaScript タグ (`<script src="main.js">`) に遭遇すると、一時停止します。
+
+スクリプトとスタイルシートは、どちらも FCP、ひいては LCP の低下につながるレンダリングを妨げるリソースです。重要でない JavaScript や CSS の読み込みは先送りし、Web ページのメイン コンテンツの読み込みを高速化しましょう。
+
+### CSS のブロック時間を短縮する
+
+以下の手法を用いて、サイト上でレンダリングを妨げる CSS の量が必要最小限になるようにします。
+
+- CSS を圧縮する
+- 重要でない CSS を先送りする
+- クリティカル CSS をインライン化する
+
+### CSS を圧縮する
+
+CSS ファイルには、読みやすくするために、スペース、インデント、コメントなどの文字が含まれています。こういった文字はブラウザーにとっては不要なものであり、これらのファイルを圧縮することによって確実に削除することができます。レンダリングを妨げる CSS の量を減らすことにより、最終的にはページのメイン コンテンツのレンダリングにかかる時間 (LCP) を改善することができます。
+
+モジュール バンドラーやビルド ツールを使用している場合には、適切なプラグインを導入してビルドごとに CSS ファイルを圧縮してください。
+
+- webpack の場合: [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
+- Gulp の場合: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
+- Rollup の場合: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+
+<figure>{% Img src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png", alt="LCP の改善例: CSS の圧縮前後の比較", width="800", height="139" %} <figcaption>LCP の改善例: CSS の圧縮前後の比較</figcaption></figure>
+
+{% Aside %}詳細については、「[CSS を圧縮する](/minify-css/)」ガイドを参照してください。{% endAside %}
+
+### 重要でない CSS を先送りする
+
+Chrome DevTools の [Coverage](https://developer.chrome.com/docs/devtools/coverage/) (カバレッジ) タブを使用し、Web ページで使用されていない CSS を見つけます。
+
+{% Img src="image/admin/wjS4NrU5EsJeCuvK0zhn.png", alt="Chrome DevTools の Coverage (カバレッジ) タブ", width="800", height="559" %}
+
+最適化の手順は、以下の通りです。
+
+- 使用されていない CSS は、すべて削除してください。サイト内の別のページで使用されている場合には、別のスタイルシートへと移動してください。
+- 初期のレンダリングに使用されない CSS については、`rel="preload"` や `onload` を活用した [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) を使用し、非同期でファイルを読み込みます。
+
+```html
+<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
+```
+
+<figure>{% Img src="image/admin/2fcwrkXQRQrM8w1qyy3P.png", alt="LCP の改善例: 重要でない CSS の先送り前後の比較", width="800", height="139" %} <figcaption>LCP の改善例: 重要でない CSS の先送り前後の比較</figcaption></figure>
+
+<figure>
+  {% Img
+    src="image/admin/2fcwrkXQRQrM8w1qyy3P.png",
+    alt="LCP の改善例: 重要でない CSS の先送り前後の比較",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP の改善例: 重要でない CSS の先送り前後の比較
+  </figcaption>
+</figure>
+
+{% Aside %}詳細については、「[重要でない CSS を先送りする](/defer-non-critical-css/)」ガイドを参照してください。{% endAside %}
+
+### クリティカル CSS をインライン化する
+
+Above the fold (アバブ・ザ・フォールド、スクロールせずに閲覧可能なサイトのファースト ビューを指す) のコンテンツに使用されているクリティカル パス CSS は、`<head>` タグ内に直接記述してインライン化します。
+
+<figure>
+  {% Img
+    src="image/admin/m0n0JsLpH9JsNnXywSwz.png",
+    alt="重要なCSSがインライン化",
+    width="800", height="325"
+  %}
+  <figcaption>重要なCSSがインライン化</figcaption>
+</figure>
+
+重要なスタイルをインライン化してしまえば、重要な CSS を取得するために順番にリクエストを行う必要がなくなります。そして、残りの部分を先送りすることによって CSS のブロック時間を最小限に抑えることができるようになります。
+
+インライン化されたスタイルを手動で追加できない場合には、ライブラリを使用してプロセスを自動化します。以下に、いくつかの例を挙げます。
+
+- [Critical](https://github.com/addyosmani/critical)、[CriticalCSS](https://github.com/filamentgroup/criticalCSS)、[Penthouse](https://github.com/pocketjoso/penthouse) は、Above the fold に含まれている CSS を抽出し、インライン化するためのパッケージです。
+- [Critters](https://github.com/GoogleChromeLabs/critters) は、クリティカル CSS をインライン化し、残りの部分の遅延読み込みを行う webpack プラグインです。
+
+<figure>
+  {% Img
+    src="image/admin/L8sc51bd3ckxwnUfczC4.png",
+    alt="LCP の改善例: クリティカル CSS のインライン化前後の比較",
+    width="800",
+    height="175"
+  %}
+  <figcaption>
+    LCP の改善例: クリティカル CSS のインライン化前後の比較
+  </figcaption>
+</figure>
+
+{% Aside %}詳細については、「[クリティカル CSS を抽出する](/extract-critical-css/)」ガイドを参照してください。{% endAside %}
+
+### JavaScript のブロック時間を短縮する
+
+ダウンロードされ、ユーザーに提供される JavaScript の量が必要最小限となるようにします。レンダリングを妨げる JavaScript の量を少なくすることでレンダリングが高速化し、結果的に LCP が改善されます。
+
+これを行うには、以下に示す様々な方法を用いてスクリプトの最適化を行う必要があります。
+
+- [JavaScript ファイルを圧縮する](/reduce-network-payloads-using-text-compression/)
+- [使用されていない JavaScript を先送りする](/reduce-javascript-payloads-with-code-splitting/)
+- [使用されていないポリフィルを最小限に抑える](/serve-modern-code-to-modern-browsers/)
+
+{% Aside %}「[First Input Delay を最適化する](/optimize-fid/)」ガイドでは、JavaScript によるブロック時間を短縮するために必要なすべての技術を、より詳細に説明しています。{% endAside %}
+
+## リソースの読み込み速度の低下 {: #slow-resource-load-times }
+
+CSS や JavaScript によるブロック時間の増加はパフォーマンスの低下に直接つながるものですが、その他様々な種類のリソースの読み込みにかかる時間についても、描画時間に影響を及ぼす可能性があります。LCP に影響を及ぼす要素の種類は、以下のとおりです。
+
+- `<img>` 要素
+- `<svg>` 要素内の `<image>` 要素
+- `<video>` 要素 ([ポスター](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)画像が LCP の測定に使用されます)
+- ([CSS グラデーション](https://developer.mozilla.org/docs/Web/CSS/url())とは対照的に、) <a><code>url()</code></a> 関数を介して読み込まれた背景画像が含まれている要素
+- テキスト ノードやその他のインラインレベルのテキスト要素を含む[ブロックレベル](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)要素。
+
+これらの要素が Above the fold でレンダリングされた場合、その読み込みにかかる時間は LCP に直接影響を及ぼします。これらのファイルの読み込みを可能な限り高速化するには、以下のような方法があります。
+
+- 画像を最適化して圧縮する
+- 重要なリソースを事前に読み込む
+- テキスト ファイルを圧縮する
+- ネットワーク接続の状況に応じて異なるアセットを配信する (アダプティブ サービング)
+- Service Worker を使用してアセットをキャッシュする
+
+### 画像を最適化して圧縮する
+
+多くのサイトにおいて、ページの読み込みが完了した時点で最もサイズが大きい要素として表示されるのは画像です。一般的な例としては、ヒーロー画像、大きなカルーセル、バナー画像などが挙げられます。
+
+<figure>
+  {% Img
+    src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png",
+    alt="",
+    width="459",
+    height="925"
+  %}
+  <figcaption>画像がページで最もサイズの大きい要素となっている例: <a href="https://design.google/">design.google</a></figcaption>
+</figure>
+
+こういったタイプの画像の読み込みやレンダリングにかかる時間の短縮は、LCP の直接的な改善につながります。これを実現するためには、以下の手法を用います。
+
+- まず第一に、画像を使用しないことを検討します。コンテンツに関係のない画像は、削除しましょう。
+- 画像を圧縮する (たとえば [Imagemin](/use-imagemin-to-compress-images) を使用)
+- 画像をより新しい形式 (JPEG 2000、JPEG XR、WebP) に変換する
+- レスポンシブ画像を使用する
+- 画像 CDN の使用を検討する
+
+{% Aside %}これらの技術について詳細に説明しているガイドやリソースについては、「[画像を最適化する](/fast/#optimize-your-images)」を参照してください。{% endAside %}
+
+### 重要なリソースを事前に読み込む
+
+たとえば、あるアプリケーションに含まれている数多くの CSS ファイルのいずれかの深い場所に記述されているフォントのように、特定の CSS ファイルや JavaScript ファイル内で宣言されている、または使用されている重要なリソースが意図したタイミングよりも遅れて取得される場合があります。
+
+特定のリソースを優先する必要があることが分かっている場合には、`<link rel="preload">` を使用してより早いタイミングでそのリソースを取得します。事前読み込みは[様々な種類のリソース](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded)に対して行うことができますが、まずはフォント、Above the fold に配置されている画像や動画、クリティカル パス CSS、JavaScript などを含む[重要なアセットの事前読み込み](/preload-critical-assets/)に焦点を当てる必要があります。
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+Chrome 73 以降では、事前読み込みと[レスポンシブ画像](/preload-responsive-images/)を併用して両方のパターンを組み合わせることにより、画像の読み込みを大幅に高速化することができます。
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### テキスト ファイルを圧縮する
+
+[Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) や [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) などの圧縮アルゴリズムを使用すれば、サーバーとブラウザー間で転送されるテキスト ファイル (HTML、CSS、JavaScript) のサイズを大幅に削減することができます。Gzip はすべてのブラウザーで効果的にサポートされており、さらに優れた圧縮結果を提供する Brotli は[比較的新しいブラウザーのほぼすべてで使用することができます](https://caniuse.com/#feat=brotli)。
+
+リソースを圧縮することで配信サイズも圧縮されるため、読み込み時間が改善されることで結果的に LCP も改善されます。
+
+1. まず、ご利用のサーバーがすでにファイルを自動的に圧縮しているかどうかを確認します。ほとんどのホスティング プラットフォーム、CDN、リバース プロキシ サーバーでは、デフォルトでアセットを圧縮してエンコードしているか、またはその設定を簡単に行うことができます。
+2. ファイルを圧縮するためにサーバーの設定を変更する必要がある場合には、gzip の代わりに圧縮率がより優れている Brotli の使用をご検討ください。
+3. 使用する圧縮アルゴリズムの選択が完了したら、ブラウザーからのリクエストがあったときにその場で圧縮するのではなく、ビルド処理の中で事前にアセットを圧縮します。これにより、サーバーのオーバーヘッドを最小限に抑え、特に高い圧縮率を使用する場合におけるリクエスト時の遅延を防ぐことができます。
+
+<figure>
+  {% Img
+    src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png",
+    alt="LCP の改善例: Brotli による圧縮の前後比較",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP の改善例: Brotli による圧縮の前後比較
+  </figcaption>
+</figure>
+
+{% Aside %}詳細については、「[ネットワーク ペイロードを圧縮する](/reduce-network-payloads-using-text-compression/)」ガイドを参照してください。{% endAside %}
+
+### アダプティブ サービング
+
+ページのメイン コンテンツを構成するリソースを読み込む際には、ユーザーのデバイスやネットワーク状況に応じた様々なアセットを条件付きでフェッチすると効果的です。この手法は、[Network Information](https://wicg.github.io/netinfo/) API、[Device Memory](https://www.w3.org/TR/device-memory/) API、[HardwareConcurrency](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency) API を使用して実施することができます。
+
+初期のレンダリングで重要な役割を果たすサイズの大きいアセットが存在する場合、ユーザーの接続状況やデバイスに応じて同一のリソースを異なるバリエーションで使用することができます。たとえば、接続速度が 4G 以下の場合に動画の代わりに画像を表示したりすることができます。
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // 動画の読み込み
+  } else {
+    // 画像の読み込み
+  }
+}
+```
+
+使用可能な便利なプロパティには、以下のものがあります。
+
+- `navigator.connection.effectiveType`: 効果的な接続タイプ
+- `navigator.connection.saveData`: データセーバーの有効/無効
+- `navigator.hardwareConcurrency`: CPU のコア数
+- `navigator.deviceMemory`: デバイスのメモリ量
+
+{% Aside %}詳細については、「[ネットワーク品質に基づくアダプティブ サービング](/adaptive-serving-based-on-network-quality/)」を参照してください。{% endAside %}
+
+### Service Worker を使用してアセットをキャッシュする
+
+この記事の前半で説明したように、Service Worker は比較的小さな HTML レスポンスの配信などを含む数多くの便利なタスクに利用が可能です。また、これを利用して静的なリソースをブラウザーにキャッシュし、繰り返しリクエストされる場合にネットワークを経由せずにリソースを提供することも可能です。
+
+Service Worker を使用して重要なリソースを事前にキャッシュしておくと、特に接続状態が悪い中で Web ページを再読み込みするユーザー (またはオフラインでアクセスするユーザー) の読み込み時間を大幅に削減することができます。また、[Workbox](https://developer.chrome.com/docs/workbox/) のようなライブラリを使用すれば、事前にキャッシュされたアセットの更新処理を自分で Service Worker を記述して処理するよりも簡単に行うことができます。
+
+{% Aside %}Service Worker と Workbox については、「[ネットワークの信頼性](/reliable/)」を参照してください。{% endAside %}
+
+## クライアントサイドでのレンダリング {: #client-side-rendering }
+
+多くのサイトでは、クライアントサイド JavaScript のロジックを使用してブラウザーで直接ページをレンダリングしています。[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/) などのフレームワークやライブラリの登場により、Web ページの様々な側面をサーバーではなくクライアント側で完全に処理するシングルページ アプリケーションの構築が容易になりました。
+
+ほとんどがクライアント側でレンダリングされるサイトを構築している場合、サイズの大きい JavaScript バンドルの使用が LCP に影響を及ぼす可能性があるため、注意が必要です。この現象を防ぐための最適化が実施されていない場合、重要な JavaScript のダウンロードと実行がすべて完了するまでの間にユーザーがページ上のコンテンツを表示することも操作することもできなくなってしまう可能性があります。
+
+クライアント側でレンダリングが行われるサイトを構築する場合には、以下のような最適化の実施をご検討ください。
+
+- 重要な JavaScript を圧縮する
+- サーバーサイドでレンダリングを行う
+- 事前レンダリングを行う
+
+### 重要な JavaScript を圧縮する
+
+もしも運営するサイトのコンテンツが一定量の JavaScript のダウンロードが完了した後にのみ表示や操作が可能となっている場合には、バンドルのサイズを可能な限り縮小することがより重要になります。これを行うには、以下の方法があります。
+
+- JavaScript の圧縮
+- 使用されていない JavaScript の先送り
+- 使用されていないポリフィルの最小化
+
+これらの最適化については、「[JavaScript のブロック時間を短縮する](#reduce-javascript-blocking-time)」セクションに戻り、詳細をご確認ください。
+
+### サーバーサイドでレンダリングを行う
+
+ほとんどの要素がクライアントサイドでレンダリングされているサイトにおいては、JavaScript の量を最小化することが最優先課題となります。しかしながら、LCP を少しでも改善したい場合には、サーバーサイド レンダリングの併用もご検討ください。
+
+このコンセプトは、サーバーを使用してアプリケーションを HTML へとレンダリングし、クライアント側で JavaScript や必要なデータのすべてを同一の DOM コンテンツへと "[ハイドレート](https://www.gatsbyjs.org/docs/react-hydration/)" することで機能します。これにより、ページのメイン コンテンツがクライアント側のみでレンダリングされるのではなく最初にサーバー上でレンダリングされるようになり、結果的に LCP を改善させることができます。ただし、この手法にはいくつかの欠点があります。
+
+- サーバー側とクライアント側で JavaScript を使用してレンダリングされる同一のアプリケーションを維持すると、複雑さが増してしまう。
+- サーバー上の HTML ファイルをレンダリングするために JavaScript を実行すると、単純にサーバーから静的なページを配信する場合に比べてサーバーの応答時間 (TTFB) が常に増大してしまう。
+- サーバー側でレンダリングされたページは一見操作可能に見えるものの、クライアントサイド JavaScript の実行がすべて完了するまではユーザーによる入力に応答することができない。つまり、これによって [**Time to Interactive**](/tti/) (操作可能になるまでの時間、TTI) が悪化してしまう可能性がある。
+
+### 事前レンダリングを行う
+
+事前レンダリングは、サーバーサイド レンダリングよりもシンプルな別の技術を用いてアプリケーションの LCP を改善する手法です。この方法では、ヘッドレス ブラウザー (ユーザー インターフェースのないブラウザー) を使用してビルド時にすべてのパターンで静的な HTML ファイルを生成します。これらのファイルは、アプリケーションに必要な JavaScript バンドルと一緒に配信することが可能です。
+
+事前レンダリングを使用する場合、TTI に関してはネガティブな影響を与えますが、サーバーの応答時間に関してはリクエストに応じてそれぞれのページを動的にレンダリングするサーバーサイド レンダリング ソリューションほどの影響は与えません。
+
+<figure>
+  {% Img
+    src="image/admin/sm9s16UHfh8a5MDEWjxa.png",
+    alt="LCP の改善例: 事前レンダリング前後の比較",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP の改善例: 事前レンダリング前後の比較
+  </figcaption>
+</figure>
+
+{% Aside %}さまざまな種類のサーバーサイド レンダリング アーキテクチャの詳細については、「[Web 上でのレンダリング](/rendering-on-the-web/)」を参照してください。{% endAside %}
+
+## 開発者ツール
+
+LCP を測定またはデバッグするためのツールは、以下のように様々なものが用意されています。
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) では、ラボ設定での LCP の測定がサポートされています。
+
+    {% Img src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg", alt="Lighthouse 6.0", width="800", height="309" %}
+
+- Chrome DevTools の [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) (パフォーマンス) パネルの **Timings** (タイミング) セクションには LCP マーカーが含まれており、**Related Node** (関連するノード) フィールドにカーソルを置くことで LCP に関連する要素を表示することができます。
+
+    {% Img src="image/admin/sxczQPKH0cvMBsNCx5uH.png", alt="Chrome DevTools での LCP", width="800", height="509" %}
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) は、オリジンレベルで集計された実際の環境での LCP 値を提供します。
+
+*レビューしていただいた Philip Walton、Katie Hempenius、Kayce Basques、Ilya Grigorik には、心より感謝申し上げます。*
diff --git a/src/site/content/ja/blog/payment-and-address-form-best-practices/index.md b/src/site/content/ja/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..52ed0d6c641
--- /dev/null
+++ b/src/site/content/ja/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,508 @@
+---
+title: 支払いフォームと住所フォームのベストプラクティス
+subhead: ユーザーが住所フォームと支払いフォームにできるだけ早く簡単に記入できるようにすることで、コンバージョンを最大化します。
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2021-11-30
+description: ユーザーが住所フォームと支払いフォームにできるだけ早く簡単に記入できるようにすることで、コンバージョンを最大化します。
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: ノートパソコンで支払いしようと支払いカードを使用しているビジネスマン。
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+フォームを適切に設計することは、ユーザーを助け、利便性とコンバージョン率を向上させます。簡単な修正を 1 つ施すだけで、大きな違いが生まれます！
+
+{% Aside 'codelab' %}こうしたベストプラクティスは、実践的なチュートリアルで学ぶことを好まれる方は、この記事でご紹介する 2 つのコードラボをご覧ください。
+
+- [Payment form best practices codelab (支払いフォームのベストプラクティスコードラボ)](/codelab-payment-form-best-practices)
+- [Address form best practices codelab (アドレスフォームのベストプラクティスコードラブ)](/codelab-address-form-best-practices) {% endAside %}
+
+こちらは、すべてのベストプラクティスを取り入れた簡単な支払いフォームの 1 例です。
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+こちらは、すべてのベストプラクティスを取り入れた簡単な住所フォームの 1 例です。
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## チェックリスト
+
+- [用途がはっきりした HTML 要素を使用する](#meaningful-html): `<form>` 、`<input>` 、`<label>` 、`<button>` 。
+- `<label>` を使って[各フォームフィールドに ラベルを付ける。](#html-label)
+- HTML 要素の属性を使用して、[組み込みのブラウザー機能にアクセスする](#html-attributes)。特に適切な値を持つ [`type`](#type-attribute) と [`autocomplete`](#autocomplete-attribute)。
+- 支払いカード番号など、増加させることを意図していない番号には `type="number"` を使用しない。代わりに、`type="text"`と [`inputmode="numeric"`](#inputmode-attribute) を使用する。
+- [適切なオートコンプリート値](#autocomplete-attribute)を `input` 、`select` 、または`textarea` に使用できる場合は、それを使用する。
+- ブラウザがフォームを自動入力できるように、入力の `name` と `id` 属性に、ページの読み込み中またはウェブサイトの展開中に変化しない[安定した値](#stable-name-id)を指定する。
+- 一旦タップされたり、クリックされたりした[送信ボタンを無効にする](#disable-submit)。
+- データは、フォームの送信中だけでなく、入力中にも[検証](#validate)する。
+- [ゲストのチェックアウト](#guest-checkout)をデフォルトにし、チェックアウトが完了した後にアカウントを簡単に作成できるようにする。
+- 分かりやすい行動喚起による明確なステップで[チェックアウトプロセスの進捗](#checkout-progress)を示す。
+- 混乱や気を散らすものを取り除くことにより、[チェックアウトの潜在的な離脱ポイントを制限する](#reduce-checkout-exits)。
+- チェックアウト時に[注文の完全な詳細](#checkout-details)を表示し、注文内容を簡単に調整できるようにする。
+- [不要なデータの提供は求めない](#unneeded-data)。
+- 正当な理由がない限り、[名前は単一の入力で求める](#single-name-input)。
+- 名前とユーザー名には、[ラテン文字以外の文字も入力できるようにする](#unicode-matching)。
+- [さまざまなアドレス形式を許可する](#address-variety)。
+- [アドレスに 1 つの `textarea`](#address-textarea) だけを使用することを検討する。
+- [請求先住所の入力にオートコンプリート](#billing-address)を使用する。
+- 必要に応じて[国際化およびローカライズする](#internationalization-localization)。
+- [郵便番号による住所検索](#postal-code-address-lookup)を使わないことを検討する。
+- [支払いカードのオートコンプリートの適切な値](#payment-form-autocomplete)を使用します。
+- [支払いカード番号](#single-number-input)には単一の入力を使用する。
+- オートフィルの使用体験を損なわせるような[カスタム要素の使用は避ける](#avoid-custom-elements)。
+- [現場とラボの両方でテストるす](#analytics-rum): ページ分析、インタラクション分析、および実際のユーザーのパフォーマンス測定。
+- [さまざまなブラウザ、デバイス、プラットフォームでテストする](#test-platforms)。
+
+{% Aside %}この記事は、住所フォームと支払いフォームのフロントエンドにおけるベストプラクティスに関するものです。サイトにトランザクションを実装する方法について説明いたしません。ウェブサイトに支払い機能を追加する方法について詳しくは、[Web Payments (ウェブペイメント)](/payments) を参照してください。 {% endAside %}
+
+## 用途がはっきりした HTML を使用する{: #meaningful-html }
+
+ジョブ用に構築された要素と属性を使用します。
+
+- `<form>` 、`<input>` 、`<label>` 、`<button>`
+- `type` 、 `autocomplete` 、 `inputmode`
+
+これらは、組み込みのブラウザ機能を有効にし、アクセシビリティを向上させ、マークアップに意味を持たせます。
+
+### HTML 要素を意図したとおりに使用する {: #html-elements }
+
+#### フォームを `<form>` の中に入れます {: #html-form }
+
+`<input>` 要素を `<form>` でラップせずに、単純に JavaScript でデータ送信を処理しようと考えることがあるかもしれません。
+
+それはやってはいけません！
+
+HTML の `<form>` を使用すると、すべての最新ブラウザーで一連のビルトイン機能を使用できるほか、スクリーンリーダーやその他の支援デバイスからサイトにアクセスできるようになります。`<form>` を使用すると、JavaScript のサポートに制限がある古いブラウザーでも基本的な機能を簡単に構築できるほか、コードに不具合があったとしても、JavaScript を無効にしている少数のユーザーに対してフォームの送信を有効にできます。
+
+ユーザー入力用のページコンポーネントが複数ある場合は、それぞれを独自の `<form>` 要素に配置してください。たとえば、同じページで検索と登録を行う場合は、それぞれを独自の `<form>` に配置します。
+
+#### `<label>` を使用して要素にラベルを付ける {: #html-label }
+
+`<input>` 、`<select>` 、または`<textarea>` にラベルを付けるには、[`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label) を使用します。
+
+ラベルの `for` 属性に入力の `id` と同じ値を指定して、ラベルを入力に関連付けます。
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+単一の入力に単一のラベルを使用します。1 つのラベルだけで複数の入力にラベルを付けようとしてはいけません。これは、ブラウザにも、スクリーンリーダーにも最適なことです。ラベルをタップまたはクリックすると、フォーカスが関連付けられている入力に移動し、スクリーンリーダーは、*label* またはラベルの *input* にフォーカスが移動したときにラベルテキストをアナウンスします。
+
+{% Aside 'caution' %} ラベルの代わりに[プレースホルダー](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)を単独で使用しないでください。入力ボックスにテキストを入力し始めると、プレースホルダーが非表示になるため、何のための入力なのかを忘れやすくなります。プレースホルダーを使用して日付などの値の正しい形式を表示する場合も同様です。これは、特に、電話中で気が散っていたり、ストレスを感じたりしているユーザーにとっては問題となり得ます。{% endAside %}
+
+#### ボタンを便利なものにする {: #html-button }
+
+ボタンには [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) を使用してください！`<input type="submit">` を使用することもできますが、`div`やその他の不適切な要素は使用しないようにしましょう。ボタン要素は、アクセス可能な動作や組み込みのフォーム送信機能を提供します。スタイルも簡単に指定できます。
+
+各フォーム送信ボタンには、その機能が分かる値を指定します。チェックアウトに向かう各ステップで、進捗状況を示し、次のステップを明確にする説明的な行動喚起を使用します。たとえば、配送先住所フォームの送信ボタンには、[**続行**] や [**保存**] の代わりに、[**支払いに進む**] といったラベルを付けます。
+
+{: #disable-submit }
+
+ユーザーが送信ボタンをタップまたはクリックしたとき (特に支払いや注文をするとき) には送信ボタンを無効にするということを検討してください。正常に機能しているボタンを何度も繰り返しクリックするユーザーはたくさんいます。それが原因で、チェックアウトが正常に行われず、サーバーに負荷を与えてしまう場合があります。
+
+一方で、完全かつ有効なユーザー入力を待っている送信ボタンを無効にしてはいけません。たとえば、何かが不足している、または無効であるからといって、[**アドレスを保存**] ボタンを無効のままにしてはいけません。ユーザーにとって不便な上に、ユーザーはボタンを何度もタップしたり、クリックしたりして、ボタンが壊れていると勘違いする可能性があります。代わりに、無効なデータが含まれたフォームをユーザーが送信しようとした場合は、何がおかしいのか、どうすれば修正できるのかを説明しましょう。モバイルでは特に重要なことです。モバイルでは、データを入力しにくいほか、フォームデータに未記入の箇所や無効な箇所があっても、ユーザーがフォームを送信しようとするまでは画面の枠から外れて見えない場合があります。
+
+{% Aside 'caution' %} フォームのボタンのデフォルトのタイプは `submit` です。フォームに別のボタンを追加する場合 (たとえば、**パスワードを表示**など)、`type="button"` を追加します。それ以外の場合は、ボタンをクリックまたはタップすれば、フォームが送信されます。
+{% endAside %}
+
+`Enter` キーを押すと、`submit` ボタンのクリックがシミュレートされます。フォームの[**送信**]ボタンの前に別のボタンを含め、かつそのタイプを指定しない場合、そのボタンはフォームのボタンのデフォルトのタイプ、つまり `submit` となり、フォームが送信される前にクリックイベントを受け取ります。この例については、[デモ](https://enter-button.glitch.me/): fill in the form, then press `Enter` (フォームに記入して [Enter] を押す) を参照してください。
+
+### HTML 属性を最大限に活用する {: #html-attributes }
+
+#### データを入力しやすくする
+
+{: #type-attribute }
+
+[`type` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)を使用して、モバイルで適切なキーボードを提供し、ブラウザーによる基本的な組み込み検証を有効にします。
+
+たとえば、メールアドレスには `type="email"`、電話番号には `type="tel"` を使用します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="それぞれ type=email と type=tel を使ったメールアドレスと電話番号の入力に適切なキーボードを表示した Android 携帯電話のスクリーンショット (2 個)。", width="800", height="683" %}<figcaption> 電子メールや携帯電話に適したキーボード。</figcaption></figure>
+
+{: #inputmode-attribute }
+
+{% Aside 'warning' %}「type = "number"」を使用すると、番号をインクリメントする上/下矢印が追加されます。これを、電話番号や支払いカード番号、アカウント番号などのデータに使用するのはナンセンスです。
+
+このような数値には、`type="text"` を設定します (デフォルトが `text` なため、属性は省略しても OK)。電話番号については、`type="tel"` を使用して、モバイルに適切なキーボードを用意します。その他の数値については、`inputmode="numeric"` を使用して、モバイルにテンキーを用意します。
+
+一部のサイトでは、モバイルユーザーが適切なキーボードを使用できるように、今でも支払いカード番号に `type="tel"` が使用されています。ただし、`inputmode` は [現在一般的にサポートされている](https://caniuse.com/input-inputmode)ため、これを行う必要はありません。ですが、ユーザーのブラウザを確認することをおすすめします。{% endAside %}
+
+{: #avoid-custom-elements }
+
+日付に `select` 要素を使用するのは避けましょう。適切に実装されていないと、オートフィルの使用体験が損なわれるほか、古いブラウザは機能すらしません。誕生年などの数値の場合は、`select` の代わりに、`input` 要素を使うことを検討してください。これは、特に、モバイルでは、長いドロップダウンリストから選択するよりも、手動で数字を入力する方が簡単でエラーが発生しにくいためです。 `inputmode="numeric"` を使用して、モバイルで正しいキーボードを確保し、検証とフォーマットのヒントをテキストまたはプレースホルダーで追加して、ユーザーが適切なフォーマットでデータを入力できるようにします。
+
+{% Aside %} [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) 要素を使用すると、ユーザーは使用可能なオプションの一覧から選択でき、ユーザーがテキストを入力するときには、提案が表示されます。[simpl.info/datalist](https://simpl.info/datalist) で `text`、`range`、および `color` 入力に対して `datalist` を試してみてください。誕生年の入力につては、[datalist-select.glitch.me](https://datalist-select.glitch.me) で `select` を `input` および  `datalist` と比較できます。
+{% endAside %}
+
+#### オートコンプリートを使用してアクセシビリティを改善し、ユーザーがデータを再入力しなくていいようにする {: #autocomplete-attribute }
+
+適切な `autocomplete` 値を使用すると、ブラウザはデータを安全に保存し、`input`、`select`、および `textarea` の値を自動入力してユーザーをサポートします。これはモバイルでは特に重要であり、[高いフォーム離脱率](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data)を避ける上で欠かせません。オートコンプリートには、 [アクセシビリティのメリットもたくさんあります](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)。
+
+フォームフィールドに適切なオートコンプリート値を使用できるのであれば、それを使用するべきです。すべての値の一覧とそれぞれの正しい使用法については、[MDN のウェブドキュメント](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)に記載されています。
+
+{: #stable-name-id }
+
+{% Aside %}適切なオートコンプリート値を使用するだけでなく、フォームフィールドの `name` と `id` 属性に、ページの読み込みやウェブサイトの展開中に変化しない[安定した値](#stable-name-id)を与えることで、ブラウザがフォームを自動入力できるようにします。{% endAside %}
+
+{: #billing-address }
+
+既定として、請求先住所は配送先住所と同じに設定します。フォームをすっきり見せるように、請求先住所は表示せずに、請求先住所を編集ためのリンクを提供します (もしくは、[`summary` 要素と `details` 要素を使用します](https://simpl.info/details/))。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="請求先住所を変更するためのリンクを示すチェックアウトページの例。", width="800", height="250" %}<figcaption>請求内容を確認するためのリンクを追加する。</figcaption></figure>
+
+配送先住所の場合と同様に、請求先住所に適切なオートコンプリート値を使用して、ユーザーがデータを何度も入力しなくて済みようにします。同じ名前の入力の値がセクションによって異なるという場合は、オートコンプリート属性にプレフィックスワードを追加します。
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### ユーザーが適切なデータを入力できるようにする {: #validation }
+
+ユーザーが「おかしたミス」を「強く指摘する」のは避けましょう。代わりに、問題が発生したときは、その場で解決できるようユーザーをサポートして、ユーザーがより迅速かつ簡単にフォーム入力を完了できるようにします。お客様は、チェックアウトプロセスを通じて、あなたの会社の製品やサービスに対してお金を支払おうとしているのです。あなたの仕事はそのお客様を助けることであって、罰することではありません！
+
+フォーム要素に[制約属性](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints)を追加すると、`min` や `max` 、`pattern` といった許容値を指定できます。要素の[有効性状態](https://developer.mozilla.org/docs/Web/API/ValidityState)は、要素の値が有効かどうかに応じて自動的に設定されます。値が有効であるか無効であるかを問わずに要素のスタイル指定をすることに使用できる CSS の疑似クラス `:valid` および `:invalid` も同様に設定されます。
+
+たとえば、次の HTML は、1900年から2020年の間の誕生年の入力を指定します。`type="number"` の制約を使用すると、入力値は `min` と `max` で指定された範囲内の数値のみに制限されます。この範囲外の数値を入力しようとすると、入力は無効な状態に設定されます。
+
+{% Glitch { id: 'constraints', path: 'index.html', height: 170 } %}
+
+次の例では、 `pattern="[\d ]{10,30}"` を使用して、スペースを許可しながら、有効な支払いカード番号を確認します。
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+最近のブラウザは、タイプが `email</cod> または <code data-md-type="codespan">url` の入力に対して基本的な検証も行います。
+
+{% Glitch { id: 'type-validation', path: 'index.html', height: 250 } %}
+
+{% Aside %} `type="email"` と指定されている入力に `multiple` 属性を追加して、単一の入力にコンマ区切りで入力される複数の電子メールアドレスに対する組み込みの検証機能を有効にします。{% endAside %}
+
+フォームの送信時に、ブラウザは、自動的に問題のあるフィールドや未記入の必須フィールドにフォーカスをあてます。 JavaScript は必要ありません！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="無効なメールアドレス値に対するプロンプトとフォーカスを示すデスクトップ版 Chromeのサインインフォームのスクリーンショット。", width="500", height="483" %}<figcaption>ブラウザに組み込まれた基本的な検証機能。</figcaption></figure>
+
+ユーザーが送信ボタンをクリックしたときにエラーの一覧を表示するのではなく、インラインで検証し、ユーザーがデータを入力するときにフィードバックを提供します。フォームの送信後にサーバー上のデータを検証する必要がある場合は、見つかったすべての問題を一覧表示し、無効な値を持つすべてのフォームフィールドを明確に強調表示し、問題のある各フィールドの横に修正が必要なことを説明するメッセージをインラインで表示します。サーバーログと分析データで一般的なエラーを確認してください。フォームの再設計が必要になる場合があります。
+
+また、ユーザーがデータを入力しているときやフォームを送信しているときは、JavaScript を使ってより堅牢な検証を行う必要があります。([幅広くサポートされている](https://caniuse.com/#feat=constraint-validation)) [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) を使用すれば、ブラウザの組み込み UI を使ってカスタム検証を追加して、フォーカスを設定し、プロンプトを表示できます。
+
+詳しくは、[Use JavaScript for more complex real-time validation (一層複雑なリアルタイム検証には JavaScript を使う)](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation) をご覧ください。
+
+{% Aside 'warning' %} クライアント側の検証とデータ入力の制約がある場合でも、ユーザーからのデータ入力と出力はバックエンドによって安全に処理される必要があります。ユーザー入力は、悪質な可能性があるため、決して信用してはいけません。詳細については、[OWASP Input Validation Cheat Sheet (OWASP入力検証に関するチートシート)](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html) をご覧ください。{% endAside %}
+
+#### 必須データの記入忘れがないようにユーザーをサポートする {: #required }
+
+必須の値については、入力に [`required` 属性](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) を使用します。
+
+フォームが送信されると、[最新のブラウザ](https://caniuse.com/mdn-api_htmlinputelement_required)は、自動的にプロンプトを表示し、データが入力されていない `required` フィールドにフォーカスを移動させます。[`:required` 疑似クラス](https://caniuse.com/?search=required)を使用すると、必須フィールドを強調表示できます。JavaScript は必要ありません！
+
+必須フィールドのラベルにアスタリスクを追加し、フォームの先頭にアスタリスクの意味を説明するメモを追加します。
+
+## チェックアウトを簡素化する {: #checkout-forms }
+
+### モバイルコマースのギャップに注意する！ {: #m-commerce-gap }
+
+*関心を維持するための予算*などというものがあるとすれば、それを使い果たしてしまうと、ユーザーはサイトから去って行くでしょう。
+
+特にモバイルでは、摩擦を減らし、集中力を維持する必要があります。多くのサイトでは、*トラフィック*はモバイルの方が多くなりますが、*コンバージョン*はデスクトップの方が多くなります。これは、[モバイルコマースギャップ](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)として知られる現象です。顧客はデスクトップで購入手続きを済ませることを好むかもしれませんが、モバイルのコンバージョン率が低いのは、ユーザーエクスペリエンスが乏しいことにも起因します。あなたの仕事は、モバイルで失われるコンバージョンを*最小限に抑え*、デスクトップでのコンバージョンを*最大限に高める*ことです。[ある調査](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)によると、モバイルにおけるフォームの使用体験をもっと快適にできる大きなチャンスがあると分かっています。
+
+ユーザーは、何よりも、長くて、複雑で、目的のはっきりしないフォームを放棄する傾向が強いです。これは、ユーザーが小さな画面を使っている、集中していない、または急いでいるときなどは、なおさら言えることです。ユーザーに求めるデータは、極力少なく抑えましょう。
+
+### ゲストチェックアウトをデフォルトにする {: #guest-checkout }
+
+オンラインストアの場合、フォームの摩擦を減らす最も簡単な方法は、ゲストのチェックアウトをデフォルトにすることです。購入する前にユーザーにアカウントの作成を強制しないでください。ショッピングカートを放棄する主な理由として、ゲストとしてチェックアウトすることが許可されていないことが挙げられます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="チェックアウト中にショッピングカートが放棄される理由。", width="800", height="503" %}<figcaption> <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a> 参照。</figcaption></figure>
+
+アカウントのサインアップは、チェックアウトの後に提供するとよいでしょう。その時点で、アカウントを設定するために必要なデータはほぼすべて揃っているため、ユーザーはアカウントをすばやく、簡単に作成できます。
+
+{% Aside 'gotchas' %} チェックアウト後にサインアップを提供する場合は、ユーザーのした購入が新しく作成されたアカウントにリンクされていることを確認してください。{% endAside %}
+
+### チェックアウトの進捗状況を表示する {: #checkout-progress }
+
+進捗状況を表示し、次に何をする必要があるかを明確にすることで、チェックアウトプロセスの複雑さを軽減できます。以下の動画は、英国の小売業者 [johnlewis.com](https://www.johnlewis.com) がこれ成し遂げている方法を紹介しています。
+
+<figure>
+  {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %}
+  <figcaption>Show checkout progress.</figcaption>
+</figure>
+
+ペースを最後まで維持する必要があります！支払いに向けた各ステップでは、ページの見出しと説明的なボタンの値を使用して、今何をする必要があるか、チェックアウトの次のステップは何かを明確にします。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>フォームボタンに、次のステップが分かる名前を付けます。</figcaption></figure>
+
+`enterkeyhint` 属性を使用して、モバイル用キーボードの Enter キーのラベルを設定します。例えば、`enterkeyhint="previous"` と`enterkeyhint="next"` は複数ページのフォーム内に、`enterkeyhint="done"` はフォームの最終入力に、そして `enterkeyhint="search"` は検索入力に使用します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Enter キーのボタンアイコンが enterkeyhint 入力属性によってどのように変更されるかを表した、Android のアドレスフォームを示す 2 つのスクリーンショット。", width="800", height="684" %}<figcaption> Android の Enter キーボタン(「次へ」と「完了」)。</figcaption></figure>
+
+`enterkeyhint` 属性は、[Android と iOSでサポートされています](https://caniuse.com/mdn-html_global_attributes_enterkeyhint)。詳細については、[enterkeyhint の説明](https://github.com/dtapuska/enterkeyhint)をご覧ください。
+
+{: #checkout-details }
+
+ユーザーがチェックアウトプロセスの中を簡単に戻ったり、進んだりできるようにし、支払の最終段階でも注文を簡単に調整できるようにします。注文内容は、簡単な内訳ではなく、詳細をすべて表示します。ユーザーが支払いページからアイテムの数量を簡単に調整できるようにします。チェックアウト時の優先事項は、コンバージョンに向けた進捗を妨げないことです。
+
+### 気が散る原因を取り除く {: #reduce-checkout-exits }
+
+製品のプロモーションなど、視野に入ってくるものや、気が散る原因となるものを取り除き、離脱ポイントが生まれる可能性を制限します。実績ある小売業者の多くは、チェックアウトからナビゲーションや検索機能まで削除しています。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="johnlewis.com におけるチェックアウトの進捗状況を表示したモバイルデバイスを示す 2 つのスクリーンショット。検索やナビゲーション、気が散る原因となるその他の要素は削除されている。", width="800", height="683" %}<figcaption> 検索やナビゲーション、気が散る原因となるその他の要素はチェックアウトから削除。</figcaption></figure>
+
+チェックアウトだけに集中できるようにしましょう。ここは、ユーザーを誘惑する場面ではありません！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="目障りな「無料ステッカー」の宣伝が表示されたモバイルのチェックアウトページを示したスクリーンショット。", width="350", height="735" %}<figcaption> お客様が購入手続きを完了させるのを邪魔してはいけません。</figcaption></figure>
+
+リピーターの場合、表示する必要のないデータを非表示にすることで、チェックアウトフローをさらに簡素化できます。例: 配送先住所を (フォームではなく) プレーンテキストで表示し、ユーザーがリンクを使って住所を変更できるようにします。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="プレーンテキストで表示されたテキスト、配送先住所を変更するためのリンク、(画面には写っていないが支払い方法と請求先住所) が含まれたチェックアウトページの「注文内容を確認」セクションを示したスクリーンショット。", width="450", height="219" %}<figcaption> お客様に見せる必要のないデータは非表示にする。</figcaption></figure>
+
+## 名前と住所を簡単に入力できるようにする {: #address-forms }
+
+### 必要なデータのみを要求する {: #unneeded-data }
+
+名前フォームと住所フォームのコーディングを開始する前に、必要なデータを把握をしておく必要があります。要らないデータは求めないようにしましょう！フォームの複雑さを軽減する最も簡単な方法は、不要なフィールドを削除することです。これはお客様のプライバシー保護にも役立ち、バックエンドデータのコストと責任を減らすことができます。
+
+### 単一の名前入力を使用する {: #single-name-input }
+
+名や姓、敬語、名前の他の部分を個別に保存する妥当な理由がない限り、名前は単一入力を使って入力できるようにします。名前に単一入力を使用すると、フォームの複雑さが軽減され、カットアンドペーストが可能になり、自動入力も簡単になります。
+
+特に、そうしないことが妥当だと思われる理由がない限り、敬称や肩書 (Mrs、Dr、Lord など) に個別の入力を追加する必要はありません。必要だと思えば、名前を一緒に記入できます。また、 `honorific-prefix` オートコンプリートは現在ほとんどのブラウザで機能しないため、名前の敬称や肩書のフィールドを追加すると、ほとんどのユーザーに対しアドレスフォームのオートフィル機能の使用体験が損なわれてしまいます。
+
+### 名前の自動入力を有効にする
+
+フルネームに `name` を使用します。
+
+```html
+<input autocomplete="name" ...>
+```
+
+名前を細かく分割する妥当な理由がある場合は、適切なオートコンプリート値を使用してください。
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### 国際名を許可する {: #unicode-matching }
+
+名前の入力を検証するか、名前データに使用できる文字を制限することをお勧めします。ただし、アルファベットについては、できるだけ制限を緩くする必要があります。自分の名前が「無効」と言われては、良い気分がしないでしょう。
+
+検証をする場合、ラテン文字のみに一致する正規表現は使わないようにしましょう。ラテン文字のみにしてしまうと、ラテン文字に含まれない文字を含む名前またはアドレスを持つユーザーが排除されてしまいます。代わりに Unicode の一致を許可し、バックエンドが入力と出力の両方として Unicode を安全にサポートするようにします。正規表現の Unicode は、最新のブラウザでしっかりとサポートされています。
+
+{% Compare 'worse' %}
+
+```html
+<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- Accepts Unicode letters. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Unicode のマッチングとラテン文字のみのマッチングの比較。</figcaption></figure>
+
+{% Aside %} [国際化とローカライゼーション](#internationalization-localization)の詳細は、以下よりご確認いただけます。フォームは、ユーザーがいるすべての地域で使用される名前に対応していることを確認しておきましょう。たとえば、日本語の名前の場合は、ふりがなのフィールドを用意することを検討する必要があります。これは、カスタマーサポートスタッフが電話でお客様の名前を言う際に便利です。{% endAside %}
+
+### アドレスのさまざまな形式を許可する {: #address-variety }
+
+住所フォームを設計するときは、1 つの国にもビックリするぼど多彩な住所形式があることを覚えておきましょう。「普通」の住所形式は存在しませんので注意してください。信じられないという方は、[UK Address Oddities (一風変わったイギリスの住所)](http://www.paulplowman.com/stuff/uk-address-oddities/) をご覧ください。
+
+#### 住所形式に柔軟性を持たせる {: flexible-address }
+
+形式の異なるフォームフィールドへの住所入力を必須にしてはいけません。
+
+たとえば、多くの住所には異なる形式が使用されており、不完全なデータはブラウザのオートフィル機能に支障をきたす可能性があるため、番地や通りの名前の入力を分けることにこだわってはいけません。
+
+`required` の住所フィールドには特に注意してください。たとえば、イギリスの大都市の住所に郡は使用されないにもかかわらず、多くのサイトではユーザーに郡の入力を強制しています。
+
+2つの柔軟な住所行を使用すると、さまざまな住所形式に十分対応できます。
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+一致させるラベルを追加します。
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+これを試すには、以下に埋め込まれているデモをリミックスして編集します。
+
+{% Aside 'caution' %} 調査によると、[**住所の 2 行目**がユーザーにとって不便である](https://baymard.com/blog/address-line-2)という結果も出ています。住所フォームを設計するときは、このことを念頭に置き、`textarea` (以下参照) やその他のオプションを使用するなど、代替案を検討する必要があります。{% endAside %}
+
+#### 住所に 1 つの textarea を使用することを検討する {: #address-textarea }
+
+アドレスの最も柔軟なオプションは、1 つの `textarea` を提供することです。
+
+`textarea` を使うアプローチは、どの住所形式にも適合するほか、切り取りと貼り付けにも最適です。ただし、データ要件に合わない場合もあり、それまでに `address-line1` と `address-line2` だけが使われたフォームしか使用したことがないユーザーは自動入力を使いこなせない可能性があることを心に留めておきましょう。
+
+テキストエリアの場合は、`street-address` をオートコンプリート値として使用します。
+
+こちらは、住所に 1 つの `textarea` が使用されたフォームの例です。
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### 住所フォームを国際化、ローカライズする {: #internationalization-localization }
+
+住所フォームでは、ユーザーの所在地に応じて、[国際化とローカリゼーション](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/)を検討することがとりわけ重要になります。
+
+同じ言語内であっても、アドレス部分の名前はアドレス形式と同様に異なりますので注意が必要です。
+
+```text
+    ZIP code: US
+ Postal code: Canada
+    Postcode: UK
+     Eircode: Ireland
+         PIN: India
+```
+
+自分の住所形式に合わないフォームや想定外の用語が使用されたフォームが表示されると、イライラしたり、困惑したりしかねません。
+
+サイトではアドレスフォームを[複数のロケール](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region)に対応できるようにカスタマイズする必要があるかもしれませんが、上述したテクニックでフォームの柔軟性を最大化するだけで十分な場合もあります。住所フォームをローカライズしない場合は、さまざまな住所形式に対処するために優先すべき事柄を把握しておきましょう。
+
+- 通りの名前や番地を必須にするなど、住所の各部分について細かくこだわり過ぎるのは避けましょう。
+- 可能であれば、フィールドを `required` にするのは避けましょう。たとえば、多くの国の住所には郵便番号がなく、地方の住所には通りや道路の名前がない場合があります。
+- 「国」ではなく「国/地域」、「ZIP」ではなく「ZIP /郵便番号」といった具合に、インクルーシブな名前を使用します。
+
+柔軟性を保ちましょう！[先ほど紹介したシンプルな住所の例](#address-textarea)は、多くのロケールに「十分」適応させることができます。
+
+#### 郵便番号による住所検索を使わないことを検討する {: #postal-code-address-lookup }
+
+一部のウェブサイトでは、郵便番号に基づいて住所を検索するサービスが使用されます。一部のユースケースでは実用的で良いかもしれませんが、デメリットがあることも認識しておく必要があります。
+
+郵便番号による住所の提案は、すべての国で機能するわけではありません。一部の地域では、郵便番号に膨大な数の住所が含まれる場合があります。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>郵便番号 (ZIP) には多くの住所が含まれている場合があります。</figcaption></figure>
+
+アドレスの長いリストから選択することはユーザーにとって困難でしょう。特に、急いでいる場合やストレスを感じている場合に、モバイルで選択するのは大変です。ユーザーが自動入力を利用して、シングルタップまたはクリックで完全な住所を自動的に入力できるようにすれば、楽な上に、エラーも出にくくなります。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>名前に単一の入力を使えば、ワンタップ (ワンクリック) でアドレスを入力できます。</figcaption></figure>
+
+## 支払いフォームを簡素化する {: #general-guidelines }
+
+支払いフォームは、チェックアウトプロセスの最も重要な部分です。設計の悪い支払いフォームは、[ショッピングカート放棄の一般的な原因](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)となっています。[悪魔は細部に宿る](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1)とはよく言ったものです。特にモバイルの場合は、小さな不具合があるだけで、ユーザーに購入を放棄させてしまいかねません。あなたの仕事は、ユーザーができるだけ簡単にデータを入力できるフォームを設計することです。
+
+### ユーザーが支払いデータを再入力しなくて済むようにする {: #payment-form-autocomplete }
+
+支払いカードフォームには、支払いカード番号、カードの名義人の名前、有効期限の年と月といった適切な `autocomplete` 値を必ず追加してください。
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+これにより、ブラウザは支払いカードの詳細を安全に保存し、フォームデータを正しく入力することでユーザーを支援できます。オートコンプリートがないと、ユーザーは支払いカードの詳細に関する物理的な記録を保管したり、支払いカードのデータを安全でないかたちでデバイスに保存したりする傾向が強くなります。
+
+{% Aside 'caution' %} 支払いカードタイプのセレクターは追加してはいけません。支払いカードの番号からいつでも推測できてしまいます。{% endAside %}
+
+### 支払いカードの日付にカスタム要素を使用しない
+
+[カスタム要素](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)は、適切に設計されていないと、自動入力に支障をきたし、支払いフローを中断させてしまう可能性があります。また、古いブラウザでは機能しません。支払いカードの他のすべての詳細はオートコンプリートで利用できても、カスタム要素の自動入力が機能しなかったために、ユーザーが物理的な支払いカードを探してまでカードの有効期限を調べることになれば、売り上げを失う可能性が高くなります。代わりに標準の HTML 要素を使用することを検討し、それに応じてスタイルを設定することを検討しましょう。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="自動入力を中断するカードの有効期限のカスタム要素を示す支払いフォームのスクリーンショット。", width="800", height="916" %}<figcaption>オートコンプリートによって、有効期限を除くすべてのフィールドが入力されているのが分かります！。</figcaption></figure>
+
+### 支払いカードと電話番号に単一の入力を使用する {: #single-number-input }
+
+支払いカードと電話番号には、単一の入力を使用します。番号を分割してはいけません。単一の入力を使用することで、ユーザーはデータを入力しやすくなり、検証が簡単になり、ブラウザで自動入力も使用できます。PIN や銀行コードといった他の数値データについても同じことを検討してください。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="クレジットカードフィールドが 4 つの入力要素に分割されていることを示す支払いフォームのスクリーンショット。", width="800", height="833" %}<figcaption>クレジットカード番号に複数の入力要素を使用してはいけません。</figcaption></figure>
+
+### 検証は慎重に {: #validate }
+
+データ入力は、リアルタイムに、そしてフォーム送信前にも検証する必要があります。これを行う方法の 1 つに、支払いカード入力に `pattern` 属性を追加するという手があります。ユーザーが無効な値を入力して支払いフォームを送信しようとすると、ブラウザーは警告メッセージを表示し、入力要素にフォーカスを移動させます。JavaScript は必要ありません！
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+ただし、正規表現 `pattern` は、[支払いカード番号の桁数](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35) (14 以上 ～ 20 桁以下) を処理できるほど柔軟でなくてはいけません。支払いカード番号の構成について詳しくは、[LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number) でご確認いただけます。
+
+物理的なカードの番号はスペースを挟んで表示されるため、ユーザーが新しい支払いカード番号を入力するときにはスペースを含められるようにします。その方が、ユーザーにとっては扱いやすいし (何かミスをしたと指摘しなくてすみます)、コンバージョンのフローを中断させる可能性も低いし、処理する前に簡単に数字の間のスペースを削除できます。
+
+{% Aside %} ID や支払いの確認にワンタイムパスコードを使用することをおすすめします。ただし、コードを手動で入力することを求めたり、電子メールまたは SMS テキストからコードをコピーするようことを求めたりすると、ミスをしやすくなり、摩擦の原因にもなります。ワンタイムパスコードを有効にするための効率的な方法に関する詳細は、[SMS OTP form best practices (SMS を使った OTP フォームに関するベストプラクティス)](/sms-otp-form) で解説しています。{% endAside %}
+
+## さまざまなデバイス、プラットフォーム、ブラウザ、バージョンでテストする {: #test-platforms }
+
+フォーム要素の機能と外観は異なる場合があり、ビューポートのサイズの違いにより配置に問題が出る可能性もあるため、住所フォームと支払いフォームはユーザーが一番使い慣れたプラットフォームでテストすることが特に重要になります。BrowserStack を使用すると、さまざまなデバイスやブラウザで[オープンソースプロジェクトを無料でテストする](https://www.browserstack.com/open-source)ことができます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="iPhone 7 と11 で表示した支払いフォーム (payment-form.glitch.me) のスクリーンショット。「支払いを完了」ボタンは iPhone 11には表示されますが、7 には表示されません。", width="800", height="707" %}<figcaption> 同じページを iPhone 7 と iPhone 11 で表示した画像。[<strong>支払いを完了</strong>] ボタンが隠れてしまわないように、<br>モバイルの小さいビューポートのパディングを減らす。 </figcaption></figure>
+
+## 分析と RUM を実装する {: #analytics-rum }
+
+ユーザビリティとパフォーマンスをローカルでテストすることが役立つ場合もありますが、ユーザーによる支払いフォームと住所フォームの使用体験を正しく理解するには、実際のデータが必要です。
+
+それには、分析と Real User Monitoring (リアルユーザーモニタリング) が必要です。チェックアウトページの読み込みにかかる時間や支払いが完了するまでにかかる時間など、実際のユーザーによる使用体験に関するデータです。
+
+- **ページ分析**: フォームが含まれたすべてのページの閲覧回数、バウンス率、離脱。
+- **インタラクション分析**: [goal funnels](https://support.google.com/analytics/answer/6180923?hl=en) と [events](https://developers.google.com/analytics/devguides/collection/gtagjs/events) は、ユーザーがチェックアウトフローを放棄する場所およびユーザーがフォームに入力する際に実行するアクションを示します。
+- **ウェブサイトのパフォーマンス**: [ユーザー中心の指標](/user-centric-performance-metrics)は、チェックアウトページの読み込みが遅いかどうか、および遅い場合の原因を示唆します。
+
+ページ分析、インタラクション分析、および実際のユーザーパフォーマンスの評価は、サーバーログ、コンバージョンデータ、A / B テストと組み合わせると特に価値が高くなり、割引コードによって収益が増えるかどうか、フォームレイアウトを変更すればコンバージョンが改善されるかどうかなどの疑問に答えられます。
+
+結果、注力の優先度を決定する、変更を加える、得られた成果に対して報酬を与えることについて、しっかりとした根拠が見つかります。
+
+## 学習を続けましょう {: #resources }
+
+- [Sign-up form best practices (サインアップフォームのベストプラクティス)](/sign-in-form-best-practices)
+- [Sign-in form best practices (サインアップフォームのベストプラクティス)](/sign-up-form-best-practices)
+- [WebOTP APIを使用してウェブ上の電話番号を確認する](/web-otp)
+- [Create Amazing Forms (すばらしいフォームを作成する)](/learn/forms/)
+- [Best Practices For Mobile Form Design (モバイルフォームデザインのベストプラクティス)](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [More capable form controls (より細かく機能するフォームコントロール)](/more-capable-form-controls)
+- [Creating Accessible Forms (使いやすいフォームの作成)](https://webaim.org/techniques/forms/)
+- [Streamlining the Sign-up Flow Using Credential Management API (認証情報管理 API を使用したサインアップフローの合理化)](https://developer.chrome.com/blog/credential-management-api/)
+- [『Frank's Compulsive Guide to Postal Addresses』](http://www.columbia.edu/~fdc/postal/)は、200 か国以上で使用される住所形式に関する便利なリンクと広範なガイダンスを提供します。
+- [国リスト](http://www.countries-list.info/Download-List)には、国コードと名前を複数の言語かつ複数の形式でダウンロードするためのツールが用意されています。
+
+写真の提供者: Unsplash の [@rupixen](https://unsplash.com/@rupixen)。
diff --git a/src/site/content/ja/blog/prefers-color-scheme/index.md b/src/site/content/ja/blog/prefers-color-scheme/index.md
new file mode 100644
index 00000000000..2311d64748e
--- /dev/null
+++ b/src/site/content/ja/blog/prefers-color-scheme/index.md
@@ -0,0 +1,460 @@
+---
+layout: post
+title: 'prefers-color-scheme: 昔馴染みのダークモード'
+subhead: 宣伝し過ぎ？それとも必要性？ダークモードとユーザーのためのサポート方法について学習しましょう！
+authors:
+  - thomassteiner
+date: 2019-06-27
+updated: 2020-08-02
+hero: image/admin/dgDcIJUyuWB5xNn9CODd.jpg
+hero_position: bottom
+alt: 夜の山のシルエット写真、Nathan Anderson（Unsplash）撮影。
+description: 現在、多くのデバイスがオペレーティングシステム全体でダークモードまたはダークテーマのエクスペリエンスをサポートしています。この記事では、Web ページでダークモードをサポートする方法を説明し、ベストプラクティスを提示した上で、Web 開発者が特定の Web ページでオペレーティングシステムレベルの設定を上書きする方法をユーザーに提供できる dark-mode-toggle というカスタム要素を紹介します。
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## はじめに
+
+{% Aside 'note' %}私はダークモードのこれまでの経緯と理論について多くの背景的調査を行いました。ダークモードの使用のみに興味がある場合は、[このセクションをスキップ](#activating-dark-mode-in-the-operating-system)してください。{% endAside %}
+
+### *ダークモード*が登場する前のダークモード
+
+<figure data-float="right">{% Img src="image/admin/fmdRPm6K5SXiIRLgyz4y.jpg", alt="グリーンスクリーンのコンピューターのモニター", width="233", height="175" %} <figcaption>グリーンスクリーン（<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">出典</a>）</figcaption></figure>
+
+ダークモードにおいては、一回りして戻ってきました。パーソナルコンピューターが台頭した当初、ダークモードは選択ではなく、事実でしかありませんでした。モノクロ <abbr title="Cathode-Ray Tube">CRT</abbr> コンピューターのモニターは、蓄光スクリーン上で電子線を発することによって機能し、初期の CRT で使用されていた蛍光体は緑色でした。テキストは緑、残りの画面は黒で表示されていたため、これらのモデルは[グリーンスクリーン](https://commons.wikimedia.org/wiki/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg)を呼ばれていました。
+
+<figure data-float="left">{% Img src="image/admin/l9oDlIO59oyJiXVegxIV.jpg", alt="白黒のワープロ", width="222", height="175" %} <figcaption>白黒（<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">出典</a>）</figcaption></figure>
+
+その後登場したカラー CRT は、赤、緑、および青の蛍光体を使用することで表現された多色表示でした。3 色すべての蛍光体を同時に発光することで白を作り出していました。より洗練された <abbr title="What You See Is What You Get">WYSIWYG</abbr> 系[デスクトップパブリッシング](https://en.wikipedia.org/wiki/Desktop_publishing)の登場により、実物の用紙に似せて仮想文書を作成するという考えに人気が集まりました。
+
+<figure data-float="right">{% Img src="image/admin/lnuLLcQzIF7r08lt479k.png", alt="WorldWideWeb ブラウザの白黒の Webページ", width="233", height="175" %} <figcaption>WorldWideWeb ブラウザ（<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">出典</a>）</figcaption></figure>
+
+これがデザイントレンドとしての*白黒*の始まりであり、このトレンドは[初期のドキュメントベースの Web](http://info.cern.ch/hypertext/WWW/TheProject.html) に引き継がれました。史上初のブラウザである[WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb)（[CSS はまだ発明されていなかった](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History)ころ）は、この方法で [Web ページを表示していました](https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png)。豆知識: その次に登場した 2 番目のブラウザである [Line Mode Browser](https://en.wikipedia.org/wiki/Line_Mode_Browser)（ターミナルベースのブラウザ）は、黒背景に緑文字が使用されていました。最近の Web ページと Web アプリは通常、明るい背景に暗いテキストを使用して設計されています。これは、[Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) を含むユーザーエージェントのスタイルシートにもハードコーディングされているベースラインの前提です。
+
+<figure data-float="left">{% Img src="image/admin/zCdyRdnAnbrB7aAB0TQi.jpg", alt="ベッドに寝転がって使用されるスマートフォン", width="262", height="175" %} <figcaption>ベッドで使用するスマートフォン（出典: Unsplash）</figcaption></figure>
+
+CRT の時代は過ぎ去りました。コンテンツの消費と作成は、バックライト付き <abbr title="液晶表示装置">LCD</abbr> または省エネ <abbr title="アクティブマトリックス有機発光ダイオード">AMOLED</abbr> スクリーンを使用するモバイルデバイスにシフトしています。小型で持ち運びに便利なコンピューター、タブレット、スマートフォンによって、使用パターンも新しくなっています。Web サーフ、趣味のコーディング、ハイエンドゲームなどのレジャータスクは、一日の終わりにかけて薄暗い環境で行われることが頻繁です。夜にはベッドに入ってデバイスを楽しむことさえあります。より多くの人が暗い環境でデバイスを使用するにつれ、*ライトオンダーク*のルーツに戻るという考えに人気が集まっているのです。
+
+### なぜダークモードなのか
+
+#### 美的理由によるダークモード
+
+[ダークモードが好きな理由や使用したい理由](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)を尋ねると、最初に*「目に優しい」*、次に*「エレガントで美しい」*という回答に人気が集まります。Appleは、 「[ダークモードの開発者向けドキュメント](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface)」において*「ほとんどのユーザーは、それぞれの美的センスに応じて明るい外観と暗い外観のどちらを有効にするかを選択しており、周囲の照明条件とは関係がない可能性がある」*と明示的に述べています。
+
+{% Aside 'note' %} 「[ダークモードを欲する理由とその使用方法に関するユーザー調査](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)」でさらに詳細をご覧ください。 {% endAside %}
+
+<figure data-float="right">{% Img src="image/admin/WZ9I5g1YGG6S1TjygEIq.png", alt="「White on Black」モードを使った MacOS System 7 のCloseView", width="193", height="225" %} <figcaption>System 7 CloseView（<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">出典</a>）</figcaption></figure>
+
+#### アクセシビリティツールとしてのダークモード
+
+ダークモードを実際に*必要*とし、それを別のアクセシビリティツールとして使用する人もいます。たとえば、ロービジョンのユーザーなどです。私が見つけたそのようなアクセシビリティツールの最初の出現は、[System 7](https://en.wikipedia.org/wiki/System_7) の *CloseView* 機能であり、これは*白地に黒*と*黒地に白*を切り替えることができました。System 7 はカラーをサポートしていましたが、デフォルトのユーザーインターフェイスは白黒のままでした。
+
+これらの反転ベースの実装は、色が導入されるとその弱点を示しました。Szpiro *et.al* による[ロービジョンユーザーがコンピューティングデバイスにどのようにアクセスしているか](https://dl.acm.org/citation.cfm?id=2982168)に関するユーザー調査では、インタビューしたすべてのユーザーが反転画像を嫌っているが、多くのユーザーが暗い背景に明るい文字表示を好むことがわかりました。Appleは、画像、メディア、および暗い色のスタイルを使用する一部のアプリを除いてディスプレイの色を反転させる[スマート反転](https://www.apple.com//accessibility/iphone/vision/)と呼ばれる機能で、このユーザーの好みに対応しています。
+
+特殊なロービジョンに、デジタル眼精疲労としても知られている、「*コンピュータ（デスクトップ、ノートパソコン、タブレットを含む）やその他の電子ディスプレイ（スマートフォンや電子書籍リーダーなど）の使用に関連付けられる目と視覚の複合問題*」として[定義](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1475-1313.2011.00834.x)されるコンピュータビジョン症候群があります。青少年による特に夜間の電子機器の使用によって、睡眠時間の短縮、入眠潜時の長時間化、睡眠不足の増加というリスクが増加するということが[提示](https://bmjopen.bmj.com/content/5/1/e006748)されています。さらに、ブルーライトへの暴露が[概日リズム](https://en.wikipedia.org/wiki/Circadian_rhythm) と睡眠サイクルの調整に関係していることが広く[報告](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4254760/) されており、[Rosenfield による調査によると](https://www.college-optometrists.org/oip-resource/computer-vision-syndrome--a-k-a--digital-eye-strain.html)、不規則な光の環境は睡眠不足につながる可能性があり、気分やタスクのパフォーマンスに影響を与える可能性があるとされています。こういった悪影響を抑制するには、iOS の[ナイトシフト](https://support.apple.com/HT207570)や Android の[ナイトライト](https://support.google.com/pixelphone/answer/7169926?)といった機能でディスプレイの色温度を調整してブルーライトを削減したり、ダークテーマやダークモードを通じて、一般的に明るい光や不規則な光を避けたりすることができます。
+
+#### AMOLED 画面でのダークモードによる省電力
+
+最後に、ダークモードは <abbr title="アクティブマトリックス有機発光ダイオード">AMOLED</abbr> 画面で*多く*のエネルギーを節約することが知られています。YouTube などの人気のある Google アプリに焦点を当てた Android のケーススタディでは、電力を最大 60％ 節約できることが示されています。以下の動画では、これらのケーススタディとアプリごとの省電力について詳しく説明されています。
+
+<figure data-size="full">{% YouTube id='N_6sPd0Jd3g', startTime='305' %}</figure>
+
+## OS でダークモードをアクティブにする
+
+ダークモードが多くのユーザーにとって非常に重要である理由の背景を説明したので、それをどのようにサポートできるかを確認しましょう。
+
+<figure data-float="left">{% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Android Q ダークモード設定", width="218", height="250" %} <figcaption>Android Q ダークテーマ設定</figcaption></figure>
+
+ダークモードまたはダークテーマをサポートするオペレーティングシステムには、通常、設定のどこかでアクティブ化するオプションがあります。macOS Xでは、システム環境設定の［*全般*］セクションの［*外観*］（<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lUAnDhiGiZxigDbCqfn1.png'%20%7C%20imgix%20%7D%7D">スクリーンショット</a>）にあり、Windows 10 では、［*色*］セクションの［*色を選択する*］（<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ahr8nkFttRPCe4RH8IEk.png'%20%7C%20imgix%20%7D%7D">スクリーンショット</a>）にあります。Android Q の場合は、［*ディスプレイ*］の下の［*ダークテーマ*］トグルスイッチ（<a href="%7B%7B%20'image/admin/Yh6SEoWDK1SbqcGjlL6d.png'%20%7C%20imgix%20%7D%7D">スクリーンショット</a>）にあり、iOS 13 の場合は、設定の［*ディスプレイと明るさ*］セクションの［*外観*］（<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K0QTu4Elw1ETabtoJjZ1.jpg'%20%7C%20imgix%20%7D%7D">スクリーンショット</a>）で変更できます。
+
+## `prefers-color-scheme` メディアクエリ
+
+先に進む前に、最後にもう 1 つ理論を説明します。[メディアクエリ](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries)を使用すると、作成者は、レンダリングされるドキュメントに関係なく、ユーザーエージェントまたはディスプレイデバイスをテストし、値または機能をクエリできます。これらは、CSS `@media` ルールで使用され、条件的にドキュメントにスタイルを適用します。また、HTML や JavaScript など、他のさまざまなコンテキストや言語でも使用されます。[Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/) では、いわゆるユーザー設定メディア機能が導入されています。これは、サイトがユーザーの好みのコンテンツ表示方法を検出する方法です。
+
+{% Aside 'note' %} ☝️確立されたユーザー設定メディア機能は、ページ上の動きを少なくしたいという希望を検出できる `prefers-reduced-motion` です。私は以前に<a href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" data-md-type="link">`prefers-reduced-motion`について書いたことがあります</a>。 {% endAside %}
+
+[`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) メディア機能は、ユーザーがページに明るい色または暗い色のテーマを使用するように要求したかどうかを検出するために使用されます。次の値で動作します。
+
+- `light`: ユーザーが明るいテーマ（明るい背景に暗いテキスト）を持つページを好むことをシステムに通知したことを示します。
+- `dark`: ユーザーが暗いテーマ（暗い背景に明るいテキスト）のページを好むことをシステムに通知したことを示します。
+
+{% Aside 'note' %} 以前のバージョンの仕様には、3 番目の値として `no-preference` 含まれていました。これは、ユーザーがシステムに優先順位を知らせていないことを示すためのものでした。これを実装するブラウザがこれまで存在しなかったため、この値は仕様から[削除されています](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976)。 {% endAside%}
+
+## ダークモードのサポート
+
+### ダークモードがブラウザでサポートされているかどうかを確認する
+
+ダークモードはメディアクエリを通じて報告されるため、メディアクエリ `prefers-color-scheme` が一致するかどうかを確認することで、現在のブラウザがダークモードをサポートしているかどうかを簡単に確認できます。値を含めていないことに注意してください。ただし、メディアクエリだけが一致するかどうかを純粋に確認してください。
+
+```js
+if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+  console.log('🎉 Dark mode is supported');
+}
+```
+
+執筆時点では、 `prefers-color-scheme` は、バージョン 76 以降の Chrome と Edge、バージョン 67 以降の Firefox、および macOS のバージョン 12.1 以降と iOS のバージョン 13以降の Safari で、デスクトップとモバイル（利用可能な場合）の両方でサポートされています。他のすべてのブラウザについては、「[サポートテーブルを使用できますか](https://caniuse.com/#feat=prefers-color-scheme)」をご覧ください。
+
+{% Aside 'note' %} 古いブラウザにダークモードのサポートを追加する [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) というカスタム要素があります。それについては、[この記事の後の方で](#the-lessdark-mode-togglegreater-custom-element)説明します。 {% endAside%}
+
+### リクエスト時にユーザーの好みについて学ぶ
+
+[`Sec-CH-Prefers-Color-Scheme`](/user-preference-media-features-headers/) クライアントヒントヘッダーを使用すると、サイトはリクエスト時にオプションでユーザーの配色設定を取得できるため、サーバーは適切な CSS をインライン化でき、したがって誤ったカラーテーマのフラッシュを回避できます。
+
+### 実際のダークモード
+
+最後に、ダークモードのサポートが実際にどのように見えるかを見てみましょう。「[ハイランダー](https://en.wikipedia.org/wiki/Highlander_(film))」と同じように、ダークモードでは *1 つしか勝者はありません*。ダークかライトのいずれかで、両方となることは絶対になりません！なぜこれを言及しているのでしょうか。この事実は読み込み戦略に　　影響を与えるからです。**ユーザーが現在使用していないモード用の CSS を重要なレンダリングパスでダウンロードするように強制しないでください。**読み込み速度を最適化するために、以下の推奨事項を実践で示すサンプルアプリ用の CSS を 3 つに分割し、[重要ではない CSS を延期](/defer-non-critical-css/)させています。
+
+- `style.css`: サイトで広く使用されている一般的なルールを含む
+- `dark.css`: ダークモードに必要なルールのみを含む
+- `light.css`: ライトモードに必要なルールのみを含む
+
+### 読み込み戦略
+
+後者の 2 つ（`light.css` と `dark.css`）は、`<link media>` クエリを使用して条件的に読みこまれます。最初は、[すべてのブラウザでは `prefers-color-scheme`](https://caniuse.com/#feat=prefers-color-scheme) はサポートされないようになっているため（[上記のパターン](#finding-out-if-dark-mode-is-supported-by-the-browser)で検出）、デフォルトの `light.css` ファイルを非常に小さなスクリプトで条件的に挿入される `<link rel="stylesheet">` 要素を通じて読み込むことで、動的に処理しています（light は適当に選択したものであり、dark をデフォルトのフォールバックエクスペリエンスに指定することも可能です）。[スタイル設定されていないコンテンツのフラッシュ](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)を避けるために、`light.css` が読み込まれるまで、コンテンツを非表示にしています。
+
+```html
+<script>
+  // If `prefers-color-scheme` is not supported, fall back to light mode.
+  // In this case, light.css will be downloaded with `highest` priority.
+  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+    document.documentElement.style.display = 'none';
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
+    );
+  }
+</script>
+<!--
+  Conditionally either load the light or the dark stylesheet. The matching file
+  will be downloaded with `highest`, the non-matching file with `lowest`
+  priority. If the browser doesn't support `prefers-color-scheme`, the media
+  query is unknown and the files are downloaded with `lowest` priority (but
+  above I already force `highest` priority for my default light experience).
+-->
+<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
+<link
+  rel="stylesheet"
+  href="/light.css"
+  media="(prefers-color-scheme: light)"
+/>
+<!-- The main stylesheet -->
+<link rel="stylesheet" href="/style.css" />
+```
+
+### スタイルシートアーキテクチャ
+
+私は [CSS 変数](https://developer.mozilla.org/docs/Web/CSS/var)を最大限に活用しているため、汎用の `style.css` を汎用とし、すべてのライトモードまたはダークモードのカスタマイズは、他の 2 つの `dark.css` と `light.css` ファイルで行っています。以下に実際のスタイルを抜粋していますが、全体的なアイデアを伝えるには十分なはずです。私は 2 つの  `-⁠-⁠color` と `-⁠-⁠background-color` 変数を宣言しています。これらは基本的に*ダークオンライト*と*ライトオンダーク*の基準となるテーマを作成する変数です。
+
+```css
+/* light.css: 👉 dark-on-light */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+}
+```
+
+```css
+/* dark.css: 👉 light-on-dark */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+}
+```
+
+私の `style.css` では、これらの変数を `body { … }` ルールで使用します。[`:root` CSS疑似クラス](https://developer.mozilla.org/docs/Web/CSS/:root)（HTML で `<html>` 要素を表し、具体性が高いことを除けば `html` セレクターと同一のセレクター）で定義されているため、カスケードダウンし、したがってグローバル CSS を宣言するのに役立ちます。
+
+```css
+/* style.css */
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  color: var(--color);
+  background-color: var(--background-color);
+}
+```
+
+上記のコードサンプルでは、[`color-scheme`](https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme) にスペースで区切られた `light dark` という値があることに気付いたと思います。
+
+これにより、アプリがサポートするカラーテーマがブラウザに通知され、ユーザーエージェントスタイルシートの特別なバリエーションをアクティブ化できるようになります。これは、たとえば、ブラウザに暗い背景と明るいテキストでフォームフィールドをレンダリングさせたり、スクロールバーを調整したり、テーマ対応のハイライトカラーを有効にしたりするのに役立ちます。`color-scheme` の正確な詳細は、「[CSS Color Adjustment Module Level 1](https://drafts.csswg.org/css-color-adjust-1/)」で指定されています。
+
+{% Aside 'note' %} 🌒 [`color-scheme` が実際に何をするか](/color-scheme/)についてさらにお読みください。 {% endAside %}
+
+それ以外のすべては、私のサイトの重要な項目に対して CSS 変数を定義するだけの問題です。ダークモードで作業する場合、意味的にスタイルを整理すると非常に役立ちます。たとえば、変数を `-⁠-⁠highlight-yellow` ではなく、`-⁠-⁠accent-color` と呼ぶことを検討してください。これは、「黄色」がダークモードでは実際には黄色ではなかったり、その逆の場合があったりするためです。以下は、私の例で使用しているいくつかの変数の例です。
+
+```css
+/* dark.css */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+  --link-color: rgb(0, 188, 212);
+  --main-headline-color: rgb(233, 30, 99);
+  --accent-background-color: rgb(0, 188, 212);
+  --accent-color: rgb(5, 5, 5);
+}
+```
+
+```css
+/* light.css */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+  --link-color: rgb(0, 0, 238);
+  --main-headline-color: rgb(0, 0, 192);
+  --accent-background-color: rgb(0, 0, 238);
+  --accent-color: rgb(250, 250, 250);
+}
+```
+
+### 完全な例
+
+次の [Glitch](https://dark-mode-baseline.glitch.me/) の埋め込みでは、上記の概念を実践に導入した完全な例を見ることができます。特定の[オペレーティングシステムの設定](#activating-dark-mode-in-the-operating-system)でダークモードに切り替えて、ページがどのように反応するかを確認してください。
+
+<div style="height: 900px; width: 100%;">
+  {% IFrame {
+    allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',
+    src: 'https://glitch.com/embed/#!/embed/dark-mode-baseline?path=style.css&previewSize=100&attributionHidden=true'
+  } %}
+</div>
+
+### 読み込みの影響
+
+この例で作業して見ると、メディアクエリを介して `dark.css` と `light.css` を読み込むする理由がわかるかもしれません。ダークモードを切り替えてページをリロードしてみてください。現在一致していない特定のスタイルシートは引き続き読み込まれますが、優先度が最も低いため、現時点でサイトが必要とするリソースと競合することはありません。
+
+{% Aside 'note' %} 😲 [一致しないメディアクエリでブラウザがスタイルシートをダウンロードする理由](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513)について、さらに詳細をご覧ください。 {% endAside %}
+
+<figure>{% Img src="image/admin/flTdLliru6GmqqlOKjNx.png", alt="ライトモードでダークモードの CSS が最低優先度でどのように読み込まれるかを示すネットワーク読み込み図", width="800", height="417" %} <figcaption>ライトモードのサイトは、ダークモードの CSS 最も低い優先度で読み込む。</figcaption></figure>
+
+<figure>{% Img src="image/admin/IDs6Le0VBhHu9QEDdxL6.png", alt="ダークモードでライトモードの CSS が最低優先度でどのように読み込まれるかを示すネットワーク読み込み図", width="800", height="417" %} <figcaption>}ダークモードのサイトは、ライトモードのCSS を最も低い優先度で読み込む。</figcaption></figure>
+
+<figure>{% Img src="image/admin/zJqu5k3TIgcZf1OHWWIq.png", alt="デフォルトのライトモードでダークモードの CSS が最低優先度でどのように読み込まれるかを示すネットワーク読み込み図", width="800", height="417" %} <figcaption><code>prefers-color-scheme</code> をサポートしていないブラウザでは、デフォルトのライトモードのサイトは、ダークモードの CSS 最も低い優先度で読み込む。</figcaption></figure>
+
+### ダークモードの変更への対応
+
+他のメディアクエリの変更と同様に、ダークモードの変更は JavaScript を介して適用できます。これを使用して、たとえば、 ページの[ファビコン](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#provide_great_icons_tiles)を動的に変更したり、Chrome の URL バーの色を決定する [`<meta name="theme-color">`](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#meta_theme_color_for_chrome_and_opera) を変更したりできます。上記の[完全な例](#full-example)はこれを実演しており、テーマの色とファビコンの変更を確認するために、[別のタブでデモ](https://dark-mode-baseline.glitch.me/)が開くようになっています。
+
+```js
+  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  darkModeMediaQuery.addListener((e) => {
+    const darkModeOn = e.matches;
+    console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
+  });
+```
+
+Chromium 93 と Safari 15 において、この色は、`meta` テーマカラー要素の `media` 属性を使ったメディアクエリを基に調整できます。最初に一致するものが選択されます。たとえば、ライトモード用に 1 つの色を使用し、ダークモード用に別の色を使用することができます。この記事の執筆時点では、マニフェストでそれらを定義することはできません。[GitHub の w3c/manifest#975 の課題](https://github.com/w3c/manifest/issues/975)を参照してください。
+
+```html
+<meta
+  name="theme-color"
+  media="(prefers-color-scheme: light)"
+  content="white"
+/>
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+## ダークモードのデバッグとテスト
+
+### DevTools で `prefers-color-scheme` をエミュレートする
+
+オペレーティングシステム全体の配色を切り替えると、すぐに煩わしくなります。そのため、Chrome DevTools では、現在表示されているタブのみに影響するように、ユーザーの好みの配色をエミュレートできるようになりました。[Command メニュー](https://developer.chrome.com/docs/devtools/command-menu/)を開いて、「`Rendering`」と入力し、`Show Rendering` コマンドを実行して、**Emulate CSS media feature prefers-color-scheme** オプションを変更します。
+
+<figure>{% Img src="image/admin/RIq2z6Ja1zSzfNTHic5z.png", alt="Chrome DevTools の［Rendering］タブにある［Emulate CSS media feature prefers-color-scheme］オプションのスクリーンショット", width="800", height="552" %}</figure>
+
+### Puppeteer で `prefers-color-scheme` をスクリーンショットする
+
+[Puppeteer](https://github.com/GoogleChrome/puppeteer/) は、[DevTools プロトコル](https://chromedevtools.github.io/devtools-protocol/)を介して Chrome または Chromium を制御するための高レベル API を提供する Node.js ライブラリです。[`dark-mode-screenshot`](https://www.npmjs.com/package/dark-mode-screenshot) を使用すると、ダークモードとライトモードの両方でページのスクリーンショットを作成できる Puppeteer スクリプトが提供されます。このスクリプトは 1 回限りで実行することも、継続的インテグレーション（CI）テストスイートの一部にすることもできます。
+
+```bash
+npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
+```
+
+## ダークモードのベストプラクティス
+
+### 真っ白なものは避けましょう
+
+気づいているかもしれませんが、私は真っ白を使用していません。代わりに、周囲の暗いコンテンツに対して光りやにじみがでることを防ぐために、少し暗い白を選択しています。`rgb(250, 250, 250)` のようにするとうまく機能します。
+
+### 写真画像の色を染め替えて暗くする
+
+以下の 2 つのスクリーンショットを比較すると、コアテーマが*ダークオンライト*から*ライトオンダーク*に変更されただけでなく、ヒーロー画像もわずかに異なって見えることがわかります。私の[ユーザー調査](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)によると、調査対象の大多数のユーザーは、ダークモードがアクティブな場合に、鮮やかさと明るさがわずかに劣る画像を好むことがわかっています。私はこれを*再色付け*と呼んでいます。
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/qzzYCKNSwoJr9BBEQlR7.png", alt="ダークモードでわずかに暗くしたヒーロー画像。", width="800", height="618" %} <figcaption> ダークモードでわずかに暗くしたヒーロー画像。</figcaption></figure>
+  <figure>{% Img src="image/admin/41RbLRZ5wzkoVnIRJkNl.png", alt="ライトモードの通常のヒーロー画像。", width="800", height="618" %} <figcaption> ライトモードの通常のヒーロー画像。</figcaption></figure>
+</div>
+
+再色付けは、画像に CSS フィルターを使用して実行できます。URL に `.svg` のないすべての画像に一致する CSS セレクターを使用します。これは、ベクター画像（アイコン）に画像（写真）とは異なる再色付け処理を行えることができるという考えです。これについては、[次の段落](#vector-graphics-and-icons)で説明します。もう一度 [CSS 変数](https://developer.mozilla.org/docs/Web/CSS/var)を使用しているところに注意してください。これにより、後でフィルターを柔軟に変更できます。
+
+{% Aside 'note' %} 🎨 [ダークモードでの再色付け設定に関するユーザー調査](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)について、さらに詳細をご覧ください。 {% endAside %}
+
+再色付けはダークモード、つまり `dark.css` がアクティブである場合にのみ必要であるため、`light.css` にはそれに対応するルールはありません。
+
+```css
+/* dark.css */
+--image-filter: grayscale(50%);
+
+img:not([src*='.svg']) {
+  filter: var(--image-filter);
+}
+```
+
+#### JavaScript を使用してダークモードの再色付け強度をカスタマイズする
+
+すべてのユーザーが同じではなく、ダークモードのニーズも人によって異なります。上記で説明した再色付け方法に従って、[JavaScript を介して](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript)グレースケールの強度を変更できるユーザー設定に簡単にすることができます。また `0%` に設定することで、再色付けを完全に無効にすることもできます。[`document.documentElement`](https://developer.mozilla.org/docs/Web/API/Document/documentElement) は、ドキュメントのルート要素への参照を提供することに注意してください。つまり [`:root` CSS 疑似クラス](https://developer.mozilla.org/docs/Web/CSS/:root)で参照できるのと同じ要素です。
+
+```js
+const filter = 'grayscale(70%)';
+document.documentElement.style.setProperty('--image-filter', value);
+```
+
+### ベクトルのグラフィックとアイコンを反転させる
+
+ベクター画像（私の例ではでは、`<img>` 要素を介して参照するアイコンとして使用されています）の場合、別の再色付け方法を使用してします。[調査](https://dl.acm.org/citation.cfm?id=2982168)によると、ユーザーは写真の反転を好まないことがわかっていますが、ほとんどのアイコンでは非常にうまく機能します。ここでも、CSS 変数を使用して、通常の状態と[`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover) 状態の反転量を決定しています。
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/JGYFpAPi4233HrEKTQZp.png", alt="ダークモードではアイコンが反転する。", width="744", height="48" %} <figcaption> ダークモードではアイコンが反転する。</figcaption></figure>
+  <figure>{% Img src="image/admin/W8AWbuqWthI6CfFsYunk.png", alt="ライトモードの通常のアイコン。", width="744", height="48" %} <figcaption> ライトモードの通常のアイコン。</figcaption></figure>
+</div>
+
+`dark.css` でのみアイコンを反転し、`light.css` では反転しないこと、そしてユーザーが選択したモードに応じて、アイコンがわずかに暗くまたは明るく表示されるように、2 つのケースで異なる反転強度を使用していることに注意してください。
+
+```css
+/* dark.css */
+--icon-filter: invert(100%);
+--icon-filter_hover: invert(40%);
+
+img[src*='.svg'] {
+  filter: var(--icon-filter);
+}
+```
+
+```css
+/* light.css */
+--icon-filter_hover: invert(60%);
+```
+
+```css
+/* style.css */
+img[src*='.svg']:hover {
+  filter: var(--icon-filter_hover);
+}
+```
+
+### インライン SVGに `currentColor` を使用する
+
+*インライン* SVG 画像の場合、[反転フィルターを使用](#invert-vector-graphics-and-icons)する代わりに、要素の `color` プロパティの値を表す [`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentColor_keyword) キーワードを利用できます。デフォルトで `color` 値を受け取らないプロパティで color 値を使用できます。便利なことに、 `currentColor` が [`fill` または `stroke` 属性](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes)の値として使用される場合、代わりに、color プロパティの継承値からその値を取得します。さらに、これは [`<svg><use href="…"></svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/use) でも機能するため、個別のリソースを持つことができ、 `currentColor` は引き続きコンテキストに適用されます。これは*インライン*または `<use href="…">` SVGのみで機能し、画像の `src` として、または何らかの方法で CSS を介して参照される SVG では機能しないことに注意してください。これは、以下のデモに適用されています。
+
+```html/2
+<!-- Some inline SVG -->
+<svg xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+>
+  […]
+</svg>
+```
+
+<div style="height: 950px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://glitch.com/embed/#!/embed/dark-mode-currentcolor?path=light.css&amp;previewSize=100', title: 'Glitch の dark-mode-currentcolor' } %}</div>
+
+### モード間のスムーズな移行
+
+`color` と `background-color` の両方が[アニメーション対応 CSS プロパティ](https://www.quackit.com/css/css3/animations/animatable_properties/)であるため、ダークモードからライトモードへの切り替え、またはその逆の切り替えをスムーズに行うことができます。アニメーションの作成は、2 つのプロパティに対して 2 つの `transition` を宣言するだけです。以下の例は全体的なアイデアを示すものであり、[デモ](https://dark-mode-baseline.glitch.me/)で実際に体験することができます。
+
+```css
+body {
+  --duration: 0.5s;
+   --timing: ease;
+
+  color: var(--color);
+  background-color: var(--background-color);
+
+  transition:
+    color var(--duration) var(--timing),
+    background-color var(--duration) var(--timing);
+}
+```
+
+### ダークモードでのアートディレクション
+
+一般に読み込みパフォーマンスの理由で、排他的に `<link>` 要素の `media` 属性で `prefers-color-scheme` を操作することを推奨していますが（スタイルシートのインラインでではなく）、実際に HTML コードで直接インラインで `prefers-color-scheme` を処理する必要がある場合があります。このような状況になるのがアートディレクションです。Web では、アートディレクションは、ページの全体的な視覚的な見栄えとそれが視覚的にどのように伝達するのか、気分を刺激するのか、機能を強調するのか、そして心理的にターゲットオーディエンスに魅力を与えるのかを操作します。
+
+ダークモードでは、特定のモードで最適な画像と[画像の再色付け](#photographic-images)が*不十分でないか*を判断するのは設計者の判断です。`<picture>` 要素と一緒に使用すると、表示する画像の `<source>` を `media` 属性に依存させることができます。以下の例では、ダークモードを左半球、ライトモードまたは優先順位が指定されていない場合を右半球に示し、他のすべての場合もデフォルトで右半球に示しています。もちろん、これは純粋に説明の目的でです。デバイスのダークモードを切り替えて、違いを確認してください。
+
+```html
+<picture>
+  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
+  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
+  <img src="eastern.webp" />
+</picture>
+```
+
+<div style="height: 600px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://glitch.com/embed/#!/embed/dark-mode-picture?path=index.html&amp;previewSize=100', title: 'Glitch の dark-mode-picture '} %}</div>
+
+### ダークモードで、オプトアウトを追加する
+
+上記の「[ダークモードの理由](#why-dark-mode)」セクションで説明したように、ダークモードはほとんどのユーザーにとって美的な選択です。そのため、一部のユーザーは実際にはオペレーティングシステムの UI をダークモードにしても、Web ページはを以前と同じように表示することを望んでいる可能性もあります。そこで、`prefers-color-scheme` を介してブラウザが送信するシグナルに従いつつも、オプションでユーザーがシステムレベルの設定を上書きできるようにすることが、優れたパターンと言えます。
+
+#### `<dark-mode-toggle>` カスタム要素
+
+もちろん、このためのコードを自分で作成することもできますが、ちょうどこの目的のために私が作成した既製のカスタム要素（Web コンポーネント）を使用することもできます。これは [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) と呼ばれ、完全にカスタマイズできるトグル（ダークモード: オン/オフ）またはテーマスイッチャー（テーマ: ライト/ダーク）をページに追加します。以下のデモは、動作中の要素を示しています（[上記](https://dark-mode-currentcolor.glitch.me/)の[他の](https://dark-mode-picture.glitch.me/)すべての[例](https://dark-mode-baseline.glitch.me/)でも🤫こっそり挿入しています）。
+
+```html
+<dark-mode-toggle
+    legend="Theme Switcher"
+    appearance="switch"
+    dark="Dark"
+    light="Light"
+    remember="Remember this"
+></dark-mode-toggle>
+```
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/Xy3uus69HnrkRPO4EuRu.png", alt="ライトモードの <dark-mode-toggle>。", width="140", height="76" %} <figcaption> ライトモードの <code><dark-mode-toggle></code></figcaption></dark-mode-toggle></figure>
+  <figure>{% Img src="image/admin/glRVRJpQ9hMip6MbqY9N.png", alt="ダークモードの <dark-mode-toggle>。", width="140", height="76" %} <figcaption> ダークモードの <code><dark-mode-toggle></code> 。</figcaption></dark-mode-toggle></figure>
+</div>
+
+下のデモの右上にあるダークモードコントロールをクリックまたはタップしてみてください。3 番目と 4 番目のコントロールのチェックボックスをオンにすると、ページを再読み込みしてもモード選択が記憶されることを確認できます。これにより、訪問者はオペレーティングシステムをダークモードに保ちながら、サイトをライトモードで楽しむことができ、その逆も可能です。
+
+<div style="height: 800px; width: 100%;">{% IFrame { allow: 'geolocation; microphone; camera; midi; vr; encrypted-media', src: 'https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html' } %}</div>
+
+## まとめ
+
+ダークモードでの作業とサポートは楽しく、新しいデザインの道を開いてくれます。一部の訪問者にとっては、サイトを持て余すか満足するかを分けるきっかけとなるかもしれません。いくつかの落とし穴があるため、注意深いテストが絶対に必要ですが、ダークモードは、すべてのユーザーを気にかけていることを示す絶好の機会です。この記事で言及したベストプラクティスと [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) カスタム要素のようなヘルパーは、素晴らしいダークモードエクスペリエンスを作成するあなた自身の能力に自信を与えてくれるはずです。作成したものやこの記事が役だったかどうか、または改善の提案などがあれば、[Twitter でお知らせください](https://twitter.com/tomayac)。お読みいただきありがとうございました！ 🌒
+
+## 関連リンク
+
+`prefers-color-scheme` メディアクエリに関するリソース:
+
+- [Chrome Platform Status ページ](https://chromestatus.com/feature/5109758977638400)
+- [Chromium bug](https://crbug.com/889087)
+- [Media Queries Level 5 の仕様](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
+
+`color-scheme` メタタグと CSS プロパティに関するリソース:
+
+- [`color-scheme` CSS プロパティとメタタグ](/color-scheme/)
+- [Chrome Platform Status ページ](https://chromestatus.com/feature/5330651267989504)
+- [Chromium bug](http://crbug.com/925935)
+- [CSS Color Adjustment Module Level 1 の仕様](https://drafts.csswg.org/css-color-adjust-1/)
+- [メタタグと CSS プロパティに関する GitHub の CSS WG の問題](https://github.com/w3c/csswg-drafts/issues/3299)
+- [メタタグに関する GitHub の HTML WHATWG の問題](https://github.com/whatwg/html/issues/4504)
+
+一般的なダークモードリンク:
+
+- [Material Design の「Dark Theme」](https://material.io/design/color/dark-theme.html)
+- [Web Inspector のダークモード](https://webkit.org/blog/8892/dark-mode-in-web-inspector/)
+- [WebKit のダークモードサポート](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
+- [Apple の『Human Interface Guidelines』の「Dark Mode」](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
+
+この記事で使用した背景調査記事:
+
+- 「[What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)」
+- 「[Let there be darkness! 🌚 Maybe…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)」
+- 「[Re-Colorization for Dark Mode](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)」
+
+## 謝辞
+
+`prefers-color-scheme` メディア機能、 `color-scheme` CSS プロパティ、および関連するメタタグは 👏 [Rune Lillesveen](https://twitter.com/runeli) の実装作業によるものです。Rune は、[CSS Color Adjustment Module Level 1](https://drafts.csswg.org/css-color-adjust-1/) 仕様の共同編集者でもあります。この記事を徹底してレビューしてくれた [Lukasz Zbylut](https://www.linkedin.com/in/lukasz-zbylut/)、[Rowan Merewood](https://twitter.com/rowan_m)、[Chirag Desai](https://www.linkedin.com/in/chiragd/)、および [Rob Dodson](https://twitter.com/rob_dodson) に 🙏 感謝しています。[読み込み戦略](#loading-strategy)は、[Jake Archibald](https://twitter.com/jaffathecake) が発案しました。[Emilio Cobos Álvarez](https://twitter.com/ecbos_) は、適切な `prefers-color-scheme` 検出方法に私を導いてくれました。参照された SVG と `currentColor` に関するヒントは [Timothy Hatcher](https://twitter.com/xeenon) から得ました。最後に、様々なユーザー調査に匿名で参加し、この記事の推奨事項の形成に力を貸してくれた多数の皆様にお礼申し上げます。ヒーロー画像提供: [Nathan Anderson](https://unsplash.com/photos/kujXUuh1X0o)。
diff --git a/src/site/content/ja/blog/preload-responsive-images/index.md b/src/site/content/ja/blog/preload-responsive-images/index.md
new file mode 100644
index 00000000000..76ada2f6091
--- /dev/null
+++ b/src/site/content/ja/blog/preload-responsive-images/index.md
@@ -0,0 +1,175 @@
+---
+layout: post
+title: レスポンシブ画像のプリロード
+subhead: Chrome 73からは、link rel = "preload"とレスポンシブ画像を組み合わせて、画像をより速く読み込むことができます。
+authors:
+  - yoavweiss
+description: |2-
+
+  優れたユーザーエクスペリエンスを提供するためにレスポンシブ画像をプリロードする新しくエキサイティングな可能性について学びます。
+hero: image/admin/QDCTiiyXE11bYSZMP3Yt.jpg
+alt: さまざまなサイズの画像フレームがたくさんある壁。
+date: 2019-09-30
+tags:
+  - blog
+  - performance
+  - images
+feedback:
+  - api
+---
+
+この記事では、私の2つのお気に入り、レスポンシブ画像*と*プリロードについて説明したいと思います。これらの機能の開発に深く関わった人間として、私はこの2つの機能が連携し合う様子を見るのをとても楽しみにしています！
+
+## レスポンシブ画像の概要
+
+幅300ピクセルの画面でウェブを閲覧しているときに、ページが幅1500ピクセルの画像をリクエストしたとします。あなたの画面では余分な解像度を使ってどうすることもできないため、そのページは、セルラーデータをたくさん無駄にしてしまいました。ブラウザが画面サイズより*少しだけ*幅が広いバージョン、たとえば325ピクセルをフェッチするというのが理想的でしょう。そうすれば、データを無駄にせずに、高解像度の画像が保証されます。また、画像の読み込みが速くなるので、まさに一石二鳥。[レスポンシブ画像](/serve-responsive-images/#serve-multiple-image-versions)を使用すると、ブラウザはさまざまな画像リソースをさまざまなデバイスにフェッチできます。[イメージCDN](/image-cdns/)を使用しない場合は、イメージごとに複数の村法を保存し、それらを`srcset`属性に指定しなくてはいけません。`w`値は、ブラウザに各バージョンの幅を指示します。デバイスに応じて、ブラウザは適切なものを選択できます。
+
+```html
+<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
+```
+
+## プリロードの概要
+
+[プリロード](/preload-critical-assets)を使用すると、HTMLで検出される前に、できるだけ早く読み込む必要がある重要なリソースをブラウザに知らせることができます。これは、スタイルシートに含まれているフォントや背景画像、スクリプトから読み込まれたリソースなど、簡単に見つけられないリソースを扱う場合に重宝します。
+
+```html
+<link rel="preload" as="image" href="important.png">
+```
+
+## レスポンシブ画像 + プリロード = 画像読み込みのスピードアップ
+
+レスポンシブ画像とプリロードが利用できるようになってから、数年が経ちましたが、何か足らないものがありました。そうです、レスポンシブ画像をプリロードする方法がなかったのです。 [Chrome 73](https://developers.google.com/web/updates/2019/03/nic73#more)から、ブラウザは`img`タグを検出する前に、`srcset`に指定されたレスポンシブ画像の適切なバリアントをプリロードできるようになったのです！
+
+サイトの構造によっては、画像の表示が大幅に高速化される可能性があります。JavaScriptを使用してレスポンシブ画像を遅延読み込みするサイトでテストを実行しました。プリロードを使ったことで、画像の読み込みがなんと1.2秒も速くなりました。
+
+{% Aside %}
+
+レスポンシブ画像は、[最近のすべてのブラウザでサポートされています](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility)が、レスポンシブ画像のプリロードは、[Chromiumベースのブラウザでしかサポートされていません](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)。
+
+{% endAside %}
+
+## `imagesrcset`と`imagesizes`
+
+レスポンシブ画像をプリロードできるよう、最近`<link>`要素に`imagesrcset`と`imagesizes`という属性が新しく追加されました。これらは、`<link rel="preload">`と一緒に使用され、`<img>`要素で使用される`srcset`と`sizes`のシンタックスと一致します。
+
+たとえば、次のように指定されたレスポンシブ画像をプリロードするとします。
+
+```html
+<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
+```
+
+その場合は、HTMLの`<head>`タグに以下を追加すれば行えます。
+
+```html
+<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
+```
+
+これにより、`srcset`と`sizes`が適用するのと同じリソース選択ロジックを使ってリクエストが開始されます。
+
+## ユースケース
+
+### 動的に注入するレスポンシブ画像のプリロード
+
+スライドショーの一部としてヒーロー画像を動的に読み込むとします。どの画像が最初に表示されるかも分かっています。その場合、スクリプトが実行されるのを待ってから対象の画像を読み込むというのは避けたいものでしょう。そんなことをすると、ユーザーに表示されるのが遅れてしまうからです。
+
+この問題は、画像ギャラリーが動的に読み込まれるウェブサイトで詳しく見ることができます。
+
+1. [このサンプルウェブサイト](https://responsive-preload.glitch.me/no_preload.html)を新しいタブで開きます。
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. [**Throttle**]ドロップダウンリストで、[**Fast 3G**]を選択します。
+
+2. [**Disable cache**] (キャッシュを無効にする) チェックボックスを無効にします。
+
+3. ページを再読み込みします。
+
+<figure>{% Img src="image/admin/cyocwRmB3XlfY26vUZ5h.png", alt="Chrome DevTools Networkパネルのスクリーンショット。", width="800", height="481" %}<figcaption>この滝は、ブラウザがスクリプトを実行し終えるまで画像の読み込みが始まらないため、画像が最初にユーザーに表示されるタイミングを不要に遅らせていることを示しています。</figcaption></figure>
+
+`preload`を使用すると、画像の読み込みが事前に開始され、ブラウザで表示する必要があるときにすでに読み込みが完了している可能性が高いため、ここでは重宝します。
+
+<figure>{% Img src="image/admin/rIRdFypLWf1ljMaXCVCs.png", alt="Chrome DevTools Networkパネルのスクリーンショット。", width="800", height="481" %}<figcaption>この滝は、最初の画像の読み込みがスクリプトの実行と同時に開始されているため、不要な遅延が回避され、画像が速く表示されていることを示しています。</figcaption></figure>
+
+プリロードによって生じる違いを確認するには、最初の例の手順に従って、動的に読み込まれた同じ画像ギャラリーを検査できますが、[プリロードされた最初の画像](https://responsive-preload.glitch.me/preload.html)から始めます。
+
+{% Aside %}この問題を回避する別の方法として、マークアップベースのカルーセルを使用して、[ブラウザのプリローダー](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/)に必要なリソースを取得させるという術があります。ただし、このアプローチは常に実用的であるとは限りません（マークアップベースではない既存のコンポーネントを再利用している場合など）。{% endAside %}
+
+### image-setを使用した背景画像のプリロード
+
+画面密度ごとに異なる背景画像を用意してある場合は、CSSの`image-set`構文を使用すればそれを指定できます。ブラウザは、画面の[DPR](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)に基づいて表示するものを選択できます。
+
+```css
+background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
+```
+
+{% Aside %}
+
+上記の構文では、ChromiumベースのブラウザーとWebKitベースのブラウザーの両方において、この機能を使うにはベンダープレフィックスが必要であることが無視されています。この機能を使うことを予定している方は、[Autoprefixer](https://github.com/postcss/autoprefixer)を使用して、これに自動的に対処することを検討してください。
+
+{% endAside %}
+
+CSSの背景画像は、ブラウザがページ内の`<head>`タグにあるすべてのCSSをダウンロードし、処理し終わるまで検出されないという点が問題となっています。かなりの数におよぶ場合があります。
+
+この問題は、サンプルウェブサイトに[レスポンシブ背景画像](https://responsive-preload.glitch.me/background_no_preload.html)使って確認できます。
+
+<figure>{% Img src="image/admin/7sjFt1RsoEOKn5zlS5zb.png", alt="Chrome DevTools Networkパネルのスクリーンショット。", width="800", height="451" %}<figcaption>この例では、CSSが完全にダウンロードされるまで画像のダウンロードが開始されないため、画像の表示に不必要な遅れが生じています。</figcaption></figure>
+
+レスポンシブ画像のプリロードは、こうした画像をより高速に読み込むためのシンプルな方法で、小技などは一切不要です。
+
+```html
+<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
+```
+
+前の例に[プリロードされたレスポンシブ背景画像](https://responsive-preload.glitch.me/background_preload.html)を使った場合の動作を確認できます。
+
+<figure>{% Img src="image/admin/dOI6EmChfahBujnZOke7.png", alt="Chrome DevTools Networkパネルのスクリーンショット。", width="800", height="439" %}<figcaption>ここでは、画像とCSSのダウンロードを同時に開始しているため、遅延が回避され、画像がより速く読み込まれています。</figcaption></figure>
+
+## レスポンシブ画像を実際にプリロードしてみる
+
+レスポンシブ画像をプリロードするということは、理論的には高速化を図るということですが、実際には何をしていることになるのでしょうか？
+
+その答えを見つけるために、私は[デモPWAショップ](https://github.com/GoogleChromeLabs/sample-pie-shop)のコピーを2([画像をプリロードしないもの](https://20190710t144416-dot-pie-shop-app.appspot.com/apparel)と[画像の一部だけをプリロードするもの](https://20190710t132936-dot-pie-shop-app.appspot.com/apparel))を作成しました。サイトはJavaScriptを使用して画像を遅延読み込みするため、最初のビューポートに入る画像を事前読み込みすることに効果を得られる可能性があります。
+
+そして、[プリロードなしの場合](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/)と[イメージをプリロードする場合](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/)について、次の結果が得られました。生の数値を見ると、[Start Render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render)には変化が見られませんが、[Speed Indexは](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)わずかに改善されています (画像がより速く到着するため、273ミリ秒へと改善。しかも、ピクセル領域の大きなチャンクを占めていません) が、一番重要な違いを示しているのは、[Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md)メトリックで、1.2秒も改善されています。 🎉🎉
+
+もちろん、違いを視覚的に示すのであれば、フィルムストリップを使って比較するのが一番です。
+
+<figure>{% Img src="image/admin/sXyZOvsNoAY0K2NRqT4U.png", alt="プリロードされた画像が約1.5秒速く表示されることをを示すWebPageTestのフィルムストリップによる比較を示したスクリーンショット。", width="800", height="328" %}<figcaption>フィルムストリップは、画像をプリロードすると到着までの時間が大幅に短縮されるため、ユーザーエクスペリエンスが大幅に向上することを示しています。</figcaption></figure>
+
+## プリロードと`<picture>` ？
+
+レスポンシブ画像に詳しい方は、「 [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture)についてはどうなのか？」と疑問に思われるかもしれません。
+
+Web Performance Working Groupは、`srcset`と`sizes`にプリロードと同様のものを追加することについて話し合っていますが、[「アートディレクション」](/codelab-art-direction/)のユースケースの課題に対処するはずの`<picture>`要素は考慮されていません。
+
+このユースケースが「無視」されているのはどうしてなのでしょう？
+
+そのユースケースを解決することにも関心はありますが、[先に解決すべき技術的な問題](https://calendar.perfplanet.com/2018/how-the-sausage-is-made-webperfwg-meeting-summary/)がまだいくつもあります。つまり、ここでの解決策が非常に複雑になるということです。その上、そのユースケースについては、今日この場でほぼ一通り対処できそうです。ちょっとした小技が必要になりますが (下をご覧ください)。
+
+そのため、Web Performance WGは、まず最初に`srcset`をアップロードし、`picture`を同等にサポートする需要が生まれるどうかを確認することにしています。
+
+`<picture>`をプリロードしなくてはいけなくなった場合は、回避策として次の手段が効果を発揮する可能性があります。
+
+以下のようなコードがある場合。
+
+```html
+<picture>
+    <source src="small_cat.jpg" media="(max-width: 400px)">
+    <source src="medium_cat.jpg" media="(max-width: 800px)">
+    <img src="huge_cat.jpg">
+</picture>
+```
+
+`<picture>`要素のロジック (正確には、画像ソース選択ロジック) は、`<source>`要素の`media`属性を順番に確認していき、最初に一致するものを見つけたら、アタッチされているリソースを使用するというものです。
+
+レスポンシブプリロードには「順序」または「最初の一致」の概念がないため、ブレークポイントは次のように変換する必要があります。
+
+```html
+<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
+<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
+<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
+```
+
+## 概要
+
+レスポンシブ画像のプリロードは、以前なら必要であった小技を使わなくてもレスポンシブ画像をプリロードできる新しい可能性を与えてくれます。これは、スピードを重視する開発者のツールボックスに加わった重要な新機能であり、私たちは、それを利用することで、ユーザーにできるだけ速く表示したい重要な画像を必要なタイミングで確実に表示することができます。
diff --git a/src/site/content/ja/blog/promises/index.md b/src/site/content/ja/blog/promises/index.md
new file mode 100644
index 00000000000..ef9b51490e0
--- /dev/null
+++ b/src/site/content/ja/blog/promises/index.md
@@ -0,0 +1,762 @@
+---
+title: JavaScript の Promises の紹介
+subhead: |2-
+
+  Promiseは、遅延計算と非同期の計算を簡素化します。Promise とははまだ完了していない操作のことです。
+description: Promiseは、遅延計算と非同期の計算を簡素化します。Promise とははまだ完了していない操作のことです。
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+開発者の皆さん、私たちはウェブ開発の歴史の中で極めて重要な瞬間にさしかかろうとしています。
+
+<em>【ドラムロール開始】</em>
+
+JavaScript に Promise が導入されました！
+
+<em>[花火が打ちあがり、キラキラした紙吹雪が舞い、人々が興奮]</em>
+
+この時点で、あなたには次のカテゴリのいずれかが当てはまると思います。
+
+- あなたの回りでは、大勢の人たちがこれを喜んでいますが、あなたは一体何の騒ぎなのか分かりません。あなたは「Promise」が何なのかさえ知らないのではないでしょうか。あなたは、思わず肩をすくてしまいます。しかし、キラキラ光る紙吹雪があなたの肩に重くのしかかってきます。これが当てはまるという方、ご安心ください。私もこの重要性を理解できるまでに何年もかかりました。あなたは、[最初](#whats-all-the-fuss-about)から始めることをおすすめします。
+- あなたは空に向かって拳を突き上げます！ついにこの時が来たといった感じでしょうか？あなたは Promise の使用経験はあるものの、すべての実装で API が多少異なるという点にイライラしていました。JavaScript 公式バージョンの API は何なのか？そういうあなたには、[用語集](#promise-terminology)から始めることをおすすめします。
+- そんなことはもう既に知っている、とこの知らせを初めて聞いて興奮する人々を笑うあなたは、自分のすごさに浸ってから、[API リファレンスに](#promise-api-reference)に直行してください。
+
+## Promise とは一体？ {: ＃whats-all-the-fuss-about}
+
+JavaScript はシングルスレッド、つまり、2 ビットのスクリプトを同時に実行することはできません。一つずつしか実行できません。ブラウザごとに異なりますが、JavaScript はブラウザ内で他の多くのものとスレッドを共有します。ただし、一般的に JavaScript は、ペイントやスタイルの更新、ユーザーによる操作の処理 (テキストの強調表示やフォームコントロールの操作など) と同じキューに置かれます。これらのいずれかで実行されるアクティビティが他の作業の実行を遅らせます。
+
+私たち人間は、マルチスレッドと言えるでしょう。複数の指を使って入力したり、運転しながら会話をしたりすることができます。私たちの邪魔をする唯一の関数は、くしゃみです。くしゃみをする間は、進行中の他のすべてのアクティビティを一時停止しなくてはいけません。特に、運転中や会話をしようとしているときなどは、結構イライラさせられます。くしゃみをするようなコードは書きたくないものです。
+
+回避策として、イベントやコールバックを使用したことがあるのではないでしょうか。以下のようなものがイベントです。
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // 画像の読み込みに成功
+});
+
+img1.addEventListener('error', function() {
+  // 残念、破損しています
+});
+```
+
+ここではくしゃみが一切起こりません。画像を見つけて、リスナーをいくつか追加しています。そして、JavaScript は、リスナーの 1 つが呼び出されるまで実行を停止できます。
+
+残念ながら、上の例では、イベントをリッスンする前にイベントが発生した可能性があるため、回避策として画像の「complete」プロパティを使用します。
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // 画像の読み込みに成功
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // 残念、破損しています
+});
+```
+
+これでは、画像に対してリッスンするチャンスを得る前に発生したエラーをキャッチできません。残念ながら、DOM にはそれを実現する方法がありません。しかも、ここでは画像を 1 つ読み込んでいるだけです。複数の画像がいつ読み込まれたのかを確認したい場合は、もっと複雑になります。
+
+## イベントを使うことがいつも最適であるとは限りません
+
+イベントは、`keyup` や `touchstart`など、同じオブジェクトに対して複数回発生する可能性のあるものに対して効果的です。これらのイベントでは、リスナーをアタッチする前に発生したことに配慮する必要がありません。しかし、非同期の成功/失敗に関しては、次のようなコードが理想的と言えます。
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // 読み込み完了
+}).orIfFailedCallThis(function() {
+  // 読み込み失敗
+});
+
+// and…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // すべて読み込み完了
+}).orIfSomeFailedCallThis(function() {
+  // 1 つ以上の画像の読み込みに失敗
+});
+```
+
+Promise は以下のように使い、名前も分かりやすく付けられています。HTML の image 要素に Promise を返す「ready」メソッドがある場合は、次のようにすることができます。
+
+```js
+img1.ready()
+.then(function() {
+  // 読み込み完了
+}, function() {
+  // 読み込み失敗
+});
+
+// and…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // すべて読み込み完了
+}, function() {
+  // 1 つ以上の画像の読み込みに失敗
+});
+```
+
+Promise は、次の点を除いて、最も基本的な面でイベントリスナーに少し似ています。
+
+- Promise は、1 回だけ成功または失敗する。2 回はできない。また、成功から失敗に、またはその逆に切り替えることもできない。
+- Promise が成功または失敗した後に成功/失敗のコールバックを追加した場合、イベントがその前に発生している場合でも、正しいコールバックが呼び出されます。
+
+これは、非同期の成功/失敗において非常に便利です。これは、何かが利用可能になった正確な時間よりも、結果に反応することが大切であるためです。
+
+## Promise の用語集 {: #promise-terminology}
+
+[Domenic Denicola](https://twitter.com/domenic)がこの記事の最初のドラフトを校正し、用語集の評価はなんと「F」でした。彼は私を拘束し、 強制的に [States and Fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) を 100 回コピーさせ、私に対する不安を綴った手紙を両親に書きました。にもかかわらず、私は未だに用語を混同していますが、基本的な用語をご紹介します。
+
+Promise は以下の状態にできます。
+
+- **fulfilled** - Promise に関連する行動が成功した
+- **rejected** - Promise に関連するアクションが失敗した
+- **pending** - まだ処理されても、拒否されてもいない
+- **settled** - 処理済みである、または拒否された
+
+[仕様](https://www.ecma-international.org/ecma-262/#sec-promise-objects)には、Promise のようなオブジェクトを説明するものとして、**thenable** という用語も使われています。この用語を見ると、過去にイングランドのあるフットボールクラブでマネージャーを務めた [Terry Venables](https://en.wikipedia.org/wiki/Terry_Venables) を思い出してしまうので、極力使わないようにします。
+
+## Promise が JavaScript に登場！
+
+Promise は、しばらく前から以下のようなライブラリとして出回っています。
+
+- [NS](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+上記のライブラリと JavaScript Promise は、Promises / A + と呼ばれる共通の標準化された動作を共有します。[jQuery ユーザーなら、これに似た](https://api.jquery.com/category/deferred-object/)[Deferreds](https://api.jquery.com/category/deferred-object/) と呼ばれるものがあるのをご存知かもしれません。ただし、Deferred は Promise / A + に準拠していないため、前者は[微妙に異なり、有用性も劣ります](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/)ので、注意が必要です。 jQuery にも [Promise 型](https://api.jquery.com/Types/#Promise)がありますが、これは単に Deferred のサブセットであり、同じ問題を抱えています。
+
+Promise の実装は標準化された動作に従いますが、全体的な API は異なります。 JavaScript の Promise と RSVP.js は、API が似ています。Promise は以下のように作成します。
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // async などの作業を行ってから。。。
+
+  if (/* everything turned out fine */) {
+    resolve("Stuff worked!");
+  }
+  else {
+    reject(Error("It broke"));
+  }
+});
+```
+
+Promise のコンストラクターは、引数 を 1 つ (resolve と reject という 2 つのパラメーターを持つコールバック) だけ受け取ります。コールバック内で async など、何らかの作業を実行し、すべてがうまく行った場合は resolve を呼び出し、そうでない場合は reject  を呼び出します。
+
+従来のシンプルな JavaScript で使われた `throw` と同様に、Error オブジェクトを使って拒否することは、必須ではないですが、お決まりとされています。 Error オブジェクトの利点は、スタックトレースをキャプチャするため、デバッグツールの効果が高まる点です。
+
+Promise は、以下のように使います。
+
+```js
+promise.then(function(result) {
+  console.log(result); // "成功！"
+}, function(err) {
+  console.log(err); // Error: "失敗！"
+});
+```
+
+`then()`は、2 つの引数 (成功の場合のコールバックと失敗の場合のコールバック) を取ります。どちらもオプションですので、コールバックは成功の場合だけ、もしくは失敗の場合だけ追加できます。
+
+JavaScript の Promise は、そもそも DOMで「Futures」として始まり、「Promises」へと名前が変更されてから、今回ついに JavaScript に移行しました。DOM ではなく JavaScript で使えると、Node.js をはじめとする、ブラウザー以外の JS コンテキストで利用できるため、非常に便利です (そのコア API で使用されるかどうかはまた別の話です)。
+
+Promise は JavaScript の機能ですが、DOM でも堂々と使用されています。実際、非同期の成功/失敗メソッドを備えたすべての新しい DOM API で Promise が使用されています。すでに、[Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota)、[Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready)、 [ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17) 、 [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options) 、[Streams](https://github.com/whatwg/streams#basereadablestream) などで行われています。
+
+## ブラウザのサポートとポリフィル
+
+現在、Promise はすでにいくつかのブラウザに実装されています。
+
+Chrome 32、Opera 19、Firefox 29、Safari 8、Microsoft Edge において、Promise はデフォルトで有効になっています。
+
+Promise が完全には実装されていないブラウザーを仕様に準拠させる、または他のブラウザーや Node.js に Promise を追加するには、[ポリフィル](https://github.com/jakearchibald/ES6-Promises#readme) (2k gzip圧縮) を確認してください。
+
+## 他のライブラリとの互換性
+
+JavaScript の Promise API は、`then()` メソッドを使用するすべてのものを Promise のようなもの (または promise-speak **ため息** の場合は `thenable`) として処理するため、Q Promise を返すライブラリを使用する場合は、問題なく JavaScript の新しい Promise とうまく連携するでしょう。
+
+ただし、前述したように、jQuery の Deferred はあまり役に立ちません。ありがたいことに、標準的な Promise にキャストすることができます。できるだけ早い段階で実行する価値があります。
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+ここで、jQuery の`$.ajax` は Deferred を返します。 Deferred には `then()` メソッドがあるため、 `Promise.resolve()` を使って JavaScript の Promise に変えることができます。ただし、たとえば、以下のように deferreds がコールバックに複数の引数を渡す場合があります。
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+JS の Promise は最初のものを除いてすべてを無視します。
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+幸い、通常は、これを期待するでしょう。少なくとも、必要なものへのアクセスを与えてくれます。また、jQuery は Error オブジェクトを拒否に渡すというルールには従わないことに注意してください。
+
+## 複雑な非同期コードが簡単に
+
+それでは、少しコーディングをしましょう。以下を行いたいとします。
+
+1. スピナーを起動して読み込みの進捗を示す
+2. ストーリーの JSON をフェッチして、タイトルと各チャプターの URL を取得する。
+3. ページにタイトルを追加する
+4. 各チャプターをフェッチする
+5. ページにストーリーを追加する
+6. スピナーを停止する
+
+…しかし、途中で問題が発生した場合は、それをユーザーに伝えます。その時点でスピナーを停止します。そうしないと、スピナーは回転し続け、目が回り、他の UI にクラッシュしてしまいます。
+
+もちろん、JavaScript を使用してストーリーを配信することはありません。[HTML として提供する方が速い](https://jakearchibald.com/2013/progressive-enhancement-is-faster/)ですが、複数のデータをフェッチしてから、すべてが完了した後に何らかのアクションを実行するといったこのパターンは API を操作する際によく見られます。
+
+まずは、ネットワークからデータをフェッチすることからはじめましょう。
+
+## XMLHttpRequest を Promise で対応
+
+古い API は Promise を使用するように更新されますが、下位互換性がある場合に限ります。`XMLHttpRequest` は最有力候補ですが、とりあえずは、GET リクエストを作成するシンプルな関数を書いてみましょう。
+
+```js
+function get(url) {
+  // Return a new promise.
+  return new Promise(function(resolve, reject) {
+    // Do the usual XHR stuff
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // This is called even on 404 etc
+      // so check the status
+      if (req.status == 200) {
+        // Resolve the promise with the response text
+        resolve(req.response);
+      }
+      else {
+        // Otherwise reject with the status text
+        // which will hopefully be a meaningful error
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Handle network errors
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Make the request
+    req.send();
+  });
+}
+```
+
+そしてその関数を使います。
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.error("Failed!", error);
+})
+```
+
+今は、手動で `XMLHttpRequest` を入力しなくても、HTTP リクエストを作成できます。`XMLHttpRequest` の苛立たしいキャメルケースを見なくて済めば、作業が簡単になるので嬉しい限りです。
+
+## 連鎖
+
+`then()` はストーリーの終わりではありません。複数の `then` をつなぎ合わせれば、値を変換したり、別の非同期アクションを一つずつ実行したりできます。
+
+### 値の変換
+
+値は、単純に新しい値を返すだけで変換できます。
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+実用的な例を見るために、次のコードに戻ります。
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+})
+```
+
+応答はJSONですが、現在プレーンテキストとして受信しています。私たちは、JSONを使用するために私たちget関数を変更することができ[`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType) 、私たちも、約束の地でそれを解決することができます：
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+`JSON.parse()`は単一の引数を取り、変換された値を返すため、ショートカットを作成できます。
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+実際、`getJSON()` 関数は非常に簡単に作成できます。
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+`getJSON()` は引き続き、URL をフェッチしてから、レスポンスを JSON として解析する Promise を返します。
+
+### 非同期アクションのキューイング
+
+`then` sをチェーンして、非同期アクションを順番に実行することもできます。
+
+`then()` コールバックから何かを返すときは、ちょっとした魔法を使っているような感じです。値を返す場合、次の `then()` はその値を使って呼び出されます。ただし、Promise のようなものを返す場合、次の `then()` はそれを待機することになり、その Promise が解決した (成功/失敗した) ときにだけ呼び出されます。例えば、次のコードをご覧ください。
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Got chapter 1!", chapter1);
+})
+```
+
+ここでは、リクエストする一連の URL が含まれた `story.json` に非同期リクエストを送信します。それから、最初の URL をリクエストします。ここで、Promise がシンプルなコールバックパターンよりも際立つようになります。
+
+チャプターを取得するためのショートカットメソッドを作成することもできます。
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// and using it is simple:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+`story.json` は `getChapter` が呼び出されるまでダウンロードしません。しかし、次に `getChapter` が呼び出されるときは、`story.json` を 2 回もフェッチしなくていいように、ストーリーの Promise を再利用します。Promise は非常に便利なんです！
+
+## エラー処理
+
+前に見たように、 `then()`は2つの引数を取ります。1つは成功、もう1つは失敗（またはpromise-speakでは実行と拒否）です。
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+`catch()` を使用することもできます。
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).catch(function(error) {
+  console.log("Failed!", error);
+})
+```
+
+`catch()` について何も特別なことはありません。`then(undefined, func)` のシュガーにすぎませんが、読みやすいのは確かです。上の 2 つのコード例は、異なる動作をしますので注意が必要です。後者は、下のコードと同じ動作をします。
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).then(undefined, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+違いは微妙ですが、非常に便利です。Promise の拒否は、拒否コールバック (または同等の `catch()`) がある次の `then()` までスキップします。`then(func1, func2)` では、`func1` または `func2` のいずれかが呼び出されますが、両方が呼び出されることはありません。しかし、`then(func1).catch(func2)` の場合は、両者はチェーンないでは個別のステップであるため、`func1` が拒否すれば、両方が呼び出されます。次のコードをご覧ください。
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Don't worry about it");
+}).then(function() {
+  console.log("All done!");
+})
+```
+
+上記のフローは、通常の JavaScript の try / catch と非常によく似ており、「try」内で発生したエラーはすぐに `catch()` ブロックに送られます。こちらは、上のコードをフローチャートにしたものです (私がフローチャートが大好きなので)。
+
+
+<div style="position: relative; padding-top: 93%;">
+  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
+</div>
+
+処理される Promise は青い線に、拒否される Promise については赤い線に従ってください。
+
+### JavaScript の例外と Promise
+
+拒否は、Promiseが 明示的に拒否された場合に発生しますが、コンストラクターのコールバックでエラーが投げられた場合は、暗黙的にも発生します。
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse throws an error if you feed it some
+  // invalid JSON, so this implicitly rejects:
+  resolve(JSON.parse("This ain't JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // This never happens:
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+つまり、エラーは自動的にキャッチされ、拒否となるため、Promise 関連の作業はすべて Promise コンストラクターのコールバック内で行うと便利だということになります。
+
+`then()` コールバックで投げられるエラーについても同じことが言えます。
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // This never happens, '/' is an HTML page, not JSON
+  // so JSON.parse throws
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+### 実際のエラー処理
+
+このストーリーとチャプターの例では、catch を使用してユーザーにエラーを表示できます。
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Failed to show chapter");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+`story.chapterUrls[0]` のフェッチが失敗した場合、(たとえば、http 500 またはユーザーがオフラインの場合)、後続のすべての成功コールバック (レスポンスを JSON として解析しようと試みる `getJSON()` の成功コールバックを含む) だけでなく、ページに chapter1.html を追加するコールバックもスキップします。代わりに、catch のコールバックへと進みます。その結果、前のアクションのいずれかが失敗した場合は、ページに「Failed to show chapter」が追加されます。
+
+JavaScript の try / catch と同様に、エラーはキャッチされ、後続のコードは続行されるため、スピナーは表示されることがありません。まさに理想通りの処理です。上のコードは、下のコードの非ブロック型の非同期バージョンになります。
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Failed to show chapter");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+`catch()` は、エラーから回復せずに、ログ目的で使用することをお勧めします。これは、エラーを投げ直すだけで行えます。今回の例では、`getJSON()` メソッドの中で行えます。
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("getJSON failed for", url, err);
+    throw err;
+  });
+}
+```
+
+なんとか 1 つのチャプターをフェッチできましたが、すべてのチャプターが必要なので、さっそく取りかかりましょう。
+
+## 並列処理とシーケンス化: それぞれの長所を活かす
+
+非同期で考えるのは簡単ではありません。手がつけられずに困っている人は、同期させるものとしてコードを記述してみてください。この場合は、以下のようになります。
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("All done");
+}
+catch (err) {
+  addTextToPage("Argh, broken: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch { id: 'promises-sync-example', height: 480 } %}
+
+これなら大丈夫ですね！しかし、これだと同期するだけでなく、ダウンロード中にはブラウザをロックすることになります。これを非同期にするには、`then()` を使って一つずつ実行していきます。
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // TODO: for each url in story.chapterUrls, fetch & display
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+しかし、チャプターの各 URLをループして、それらを順番にフェッチするにはどうすればいいでしょうか？以下のコードでは、**実現できません**。
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Fetch chapter
+  getJSON(chapterUrl).then(function(chapter) {
+    // and add it to the page
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`forEach` は非同期に対応していないため、チャプターはダウンロードされた順序で表示されます。パルプフィクションはそうやって制作されましたが、これはパルプフィクションではないので、修正しましょう。
+
+### シーケンスの作成
+
+`chapterUrls` 配列を一連の Promise に変換したいと思います。それは、`then()` を使って行えます。
+
+```js
+// Start off with a promise that always resolves
+var sequence = Promise.resolve();
+
+// Loop through our chapter urls
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Add these actions to the end of the sequence
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`Promise.resolve()` を見るのはこれが初めてです。これは、指定した値に解決される Promise を作成します。 `Promise` インスタンスを渡しても、返されるだけです (**注:** これは仕様への変更ですが、一部の実装では未だ実践されていません)。それに Promise のようなもの (`then()` メソッドを持つなど) に渡すと、同じかたちで実行/拒否される `Promise`  が作成されます。`Promise.resolve('Hello')` などの他の値を渡すと、その値を使って処理される Promise が作成されます。上のコードのように値なしで呼び出すと、「undefined」として処理されます。
+
+`Promise.reject(val)` というものもあります。これは、指定した値 (または undefined) で拒否される Promise を作成します。
+
+上のコードは、[`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) を使用すれば、読みやすくなります。
+
+```js
+// Loop through our chapter urls
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Add these actions to the end of the sequence
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+これは前の例と同じことをしていますが、個別の「シーケンス」変数は必要ありません。配列内のアイテムごとに reduce コールバックが呼び出されます。 「シーケンス」は、一回目は `Promise.resolve()` ですが、残りの呼び出しでは、前の呼び出しから返されたものになります。  `array.reduce`は、配列を単一の値 (この場合でいうと Promise) にまとめる際に非常に便利です。
+
+それでは、すべてのコードを一まとめにしてみましょう。
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Once the last chapter's promise is done…
+    return sequence.then(function() {
+      // …fetch the next chapter
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // and add it to the page
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-example', height: 480 } %}
+
+これで、同期バージョンの完全な非同期バージョンができました。しかし、まだ改善の余地はあります。現在、私たちのページは次のようにダウンロードされています。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+ブラウザには一度に複数のものをダウンロードする能力があるため、チャプターを一つずつダウンロードすることでパフォーマンスが損なわれていることになります。すべてのチャプターを同時にダウンロードして、完了した時点で処理するのが理想的です。幸い、それを実現できる API があります。
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+`Promise.all` は Promise の配列を受け取り、それらすべてが正常に完了したときに処理される Promise を作成してくれます。結果の配列は、(Promise の処理結果を問わず) 渡したPromise と同じ順番で作成されます。
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Take an array of promises and wait on them all
+  return Promise.all(
+    // Map our array of chapter urls to
+    // an array of chapter json promises
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Now we have the chapters jsons in order! Loop through…
+  chapters.forEach(function(chapter) {
+    // …and add to the page
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened so far
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-all-example', height: 480 } %}
+
+接続によっては、1 つずつ読み込む場合よりも数秒速くなる可能性があり、最初の試行よりもコードが少なくなります。チャプターはどの順番でもダウンロードできますが、画面には正しい順序で表示されます。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+ただし、知覚パフォーマンスについてはまだ改善の余地があります。最初のチャプターのダウンロードが終了したら、それをぺーじに追加します。そうすれば、ユーザーは残りのチャプターのダウンロードが完了する前に読み始めることができます。チャプター 3 が到着しても、ページには追加しません。チャプター 2 が欠落していることにユーザーが気付いていない可能性があるためです。チャプター 2 が完了したら、チャプター 2、3、…を追加していきます。
+
+これを行うには、すべてのチャプターの JSON を同時にフェッチしてから、それらをドキュメントに追加するシーケンスを作成します。
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Map our array of chapter urls to
+  // an array of chapter json promises.
+  // This makes sure they all download in parallel.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Use reduce to chain the promises together,
+      // adding content to the page for each chapter
+      return sequence
+      .then(function() {
+        // Wait for everything in the sequence so far,
+        // then wait for this chapter to arrive.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-best-example', height: 480 } %}
+
+こうして、両方の長所だけを活用できました！すべてのコンテンツを配信するのにかかる時間は同じですが、ユーザーは最初のコンテンツを早く読み始めることができます。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+この小さな例では、すべてのチャプターはほぼ同時に到着しますが、各チャプターを一つずつ表示することのメリットは、より大きなチャプターをダウンロードする際に一層際立つでしょう。
+
+[Node.js スタイルのコールバックまたはイベント](https://gist.github.com/jakearchibald/0e652d95c07442f205ce)を使用して同じことを実行すると、コードはおよそ 2 倍の量に膨れ上がりますが、さらに重要なことは、理解しにくくなってしまうという点です。ただし、これで Promise のすべてをカバーできた訳ではありません。ES6 の他の機能を組み合わせれば、作業がもっと簡単になります。
+
+## ボーナスラウンド: 拡張機能
+
+私が最初にこの記事を書いて以来、Promise を使用する機能は大幅に拡大しています。Chrome 55 が登場してからは、非同期関数で Promise ベースのコードを同期関数のように記述することができるようになりましたが、メインスレッドをブロックせずに行うことができます。詳しくは、[私が書いた非同期関数に関する記事](/async-functions)をお読みください。主要なブラウザでは、Promise と非同期機能の両方が幅広くサポートされています。詳しくは、MDN に記載の[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) および [async 関数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) のリファレンスを参照してください。
+
+本記事の校正および修正・提案をしてくださった皆さま (Anne van Kesteren、Domenic Denicola、Tom Ashworth、Remy Sharp、Addy Osmani、Arthur Evans、Yutaka Hirano) に感謝いたします。
+
+また、本記事の[さまざまな箇所を更新](https://mathiasbynens.be/)してくれた [MathiasBynens](https://github.com/html5rocks/www.html5rocks.com/pull/921/files)にも感謝いたします。
diff --git a/src/site/content/ja/blog/read-files/index.md b/src/site/content/ja/blog/read-files/index.md
new file mode 100644
index 00000000000..490bc81bba7
--- /dev/null
+++ b/src/site/content/ja/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: JavaScriptでファイルを読む
+subhead: ファイルを選択し、ファイルのメタデータとコンテンツを読み取り、読み取りの進捗を監視する方法。
+description: |2-
+
+  ファイルを選択し、ファイルのメタデータとコンテンツを読み取り、読み取りの進捗を監視する方法。
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+ユーザーのローカルデバイスにあるファイルを選択して操作することは、Webで最も一般的に使用される機能の1つです。これにより、ユーザーはファイルを選択し、サーバーにアップロードすることができます。たとえば、写真をアップロードしたり、税務書類の提出したりできます。ただし、サイトは、ネットワーク経由でデータを転送せずにファイルを読み取り、操作するということもできてしまいます。
+
+## 最新の File System Access API
+
+File System Access API (ファイルシステムアクセス) API は、ユーザーのローカルシステム上のファイルとディレクトリの読み取りおよび書き込みの両方を簡単に行う方法を提供します。現在、ChromeやEdgeなど、ほとんどのChromium派生ブラウザで利用できます。詳細については、[File System Access API](/file-system-access/) の記事を参照してください。
+
+File System Access API は、まだすべてのブラウザーと互換性があるわけではないため、利用可能な場合に新しいAPIを使用するヘルパーライブラリ、[browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access)、をご確認ください。新しいAPIが利用可能でない場合は、従来のアプローチにフォールバックします。
+
+## 従来のやり方でファイルを操作する方法
+
+このガイドでは、以下を行う方法について説明します。
+
+- ファイルを選択
+    - [HTML入力要素の使用](#select-input)
+    - [drag-and-dropゾーンの使用](#select-dnd)
+- [ファイルのメタデータを読み取る](#read-metadata)
+- [ファイルの中身を読む](#read-content)
+
+## ファイルを選択 {: #select }
+
+### HTML入力要素 {: #select-input}
+
+ユーザーがファイルを選択できるようにする最も簡単な方法は、すべての主要なブラウザーでサポートされている[`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)要素を使用することです。クリックすると、ユーザーはオペレーティングシステムの組み込みファイル選択UIを使用して、単一のファイル、または[`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes)属性が含まれている場合は、複数のファイルを選択できます。ユーザーが1つまたは複数のファイルの選択を終了すると、要素の`change`イベントが発生します。ファイルの一覧は、[`FileList`](https://developer.mozilla.org/docs/Web/API/FileList)オブジェクトである`event.target.files`からアクセスできます。`FileList`の各アイテムは、[`File`](https://developer.mozilla.org/docs/Web/API/File)オブジェクトです。
+
+```html
+<!-- The `multiple` attribute lets users select multiple files. -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %}[`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read)メソッドは、ファイルハンドルを使用して、ファイルを読み取るだけでなく、ファイルへの書き戻しもできるため、自分のユースケースにおいて実行可能な代替手段であるかどうかを確認します。 [この方法はポリフィル](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files)することができます。 {% endAside %}
+
+この例では、ユーザーはオペレーティングシステムの組み込みファイル選択UIを使用して複数のファイルを選択し、選択した各ファイルをコンソールに記録できます。
+
+{% Glitch { id: 'input-type-file', height: 480 } %}
+
+#### ユーザーが選択できるファイルの種類を制限する {: #accept}
+
+場合によっては、ユーザーが選択できるファイルの種類を制限したいときがあります。たとえば、画像編集アプリが、テキストファイルではなく、画像のみを受け入れるようにする場合です。これを行うには、入力要素に[`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes)属性を追加して、受け入れるファイルを指定します。
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### カスタムドラッグアンドドロップ{: #select-dnd}
+
+一部のブラウザでは、`<input type="file">`要素もドロップターゲットであるため、ユーザーはアプリにファイルをドラッグアンドドロップできます。ただし、ドロップターゲットは小さいため、使いにくい場合があります。代わりに、`<input type="file">`要素を使ってコア機能を指定したら、大きなカスタムドラッグアンドドロップサーフェスを提供できます。
+
+{% Aside %}[`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration)メソッドは、ファイルハンドルも提供し、ファイルの読み取りだけでなく、ファイルへの書き戻しもできるため、ユースケースの実行可能な代替手段であるかどうかを確認してください。{% endAside %}
+
+#### ドロップゾーンを選択する {: #choose-drop-zone}
+
+ドロップサーフェスは、アプリケーションの設計によって異なります。ドロップサーフェスは、ウィンドウの一部のみ、またはウィンドウ全体にすることもできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="画像圧縮WebアプリSquooshのスクリーンショット。", width="800", height="589" %}<figcaption> Squooshは、ウィンドウ全体をドロップゾーンにします。</figcaption></figure>
+
+Squooshを使用すると、ユーザーは画像をウィンドウ内の任意の場所にドラッグアンドドロップでき、**画像を選択**を選択すると、`<input type="file">`要素が呼び出されます。何をドロップゾーンとする場合も、そのサーフェスにファイルをドラッグアンドドロップできることをユーザーが分かるようにしましょう。
+
+#### ドロップゾーンを定義する {: #define-drop-zone}
+
+要素をドラッグアンドドロップゾーンにするには、2 つのイベント `dragover` と [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event) をリッスンする必要があります。`dragover`イベントは、ブラウザのUIを更新して、ドラッグアンドドロップアクションがファイルのコピーを作成していることを視覚的に示します。`drop` イベントは、ユーザーがファイルをサーフェスにドロップした後に発生します。入力要素の場合と同じように、ファイルの一覧は、[`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) オブジェクトである `event.dataTransfer.files` からアクセスできます。`FileList`の各アイテムは、[`File`](https://developer.mozilla.org/docs/Web/API/File) オブジェクトです。
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // Style the drag-and-drop as a "copy file" operation.
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+[`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)および[`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)は、ブラウザーのデフォルトの動作が実行されないようにし、代わりにコードが実行されるようにします。これらのメソッドがないと、ブラウザはページから離れ、ユーザーがブラウザウィンドウにドロップしたファイルを開きます。
+
+{＃この例は埋め込みとしては機能しません。＃}
+
+ライブデモンストレーションは、[Custom drag-and-drop (カスタムドラッグアンドドロップ)](https://custom-drag-and-drop.glitch.me/)をご覧ください。
+
+### ディレクトリの場合は？ {: #directories}
+
+残念ながら、現時点では、ディレクトリにアクセスする良い方法はありません。
+
+`<input type="file">` 要素の [`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory) 属性を使用すると、単一のディレクトリまたは複数のディレクトリを選択できます。一部のChromiumベースのブラウザのほか、おそらくデスクトップ版のSafari でもサポートされていますが、ブラウザの互換性について[矛盾した情報](https://caniuse.com/#search=webkitdirectory)が報告されています。
+
+{% Aside %}[`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents)メソッドは、ファイルハンドルも提供し、ファイルの読み取りだけでなく、ファイルへの書き戻しもできるため、ユースケースの実行可能な代替手段であるかどうかを確認してください。この方法は[ポリフィル](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories)することができます。{% endAside %}
+
+ドラッグアンドドロップが有効になっていると、ユーザーはディレクトリをドロップゾーンにドラッグしようとするかもしれません。ドロップイベントが発生すると、ディレクトリの `File` オブジェクトが含まれますが、ディレクトリ内のファイルには一切アクセスできなくなります。
+
+## ファイルメタデータの読み取り {: #read-metadata}
+
+[`File`](https://developer.mozilla.org/docs/Web/API/File)オブジェクトには、ファイルに関するいくつかのメタデータプロパティが含まれています。ほとんどのブラウザは、ファイル名、ファイルのサイズ、およびMIMEタイプを提供しますが、プラットフォームによっては、ブラウザが提供する情報が違ったり、他のブラウザよりも多くの情報が提供されたりする場合があります。
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // Not supported in Safari for iOS.
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // Not supported in Firefox for Android or Opera for Android.
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // Unknown cross-browser support.
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+実際の動作は、[`input-type-file`](https://input-type-file.glitch.me/) Glitch デモでご覧いただけます。
+
+## ファイルのコンテンツを読み取る {: #read-content}
+
+ファイルを読み取るには、 [`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader)を使用します。これにより、`File`オブジェクトのコンテンツをメモリに読み込むことができます。 `FileReader`には、ファイルを[配列バッファー](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer)、[データURL](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) 、または[テキスト](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText)として読み取るように指示できます。
+
+```js
+function readImage(file) {
+  // Check if the file is an image.
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+上記の例では、ユーザーが指定した `File` を読み取り、それをデータ URL に変換し、そのデータ URL を使って `img` 要素に画像を表示しています。ユーザーが画像ファイルを選択したことを確認する方法は、[`read-image-file`](https://read-image-file.glitch.me/) をご覧ください。
+
+{% Glitch { id: 'read-image-file', height: 480 } %}
+
+### 読み取られたファイルの進捗を監視する {: #monitor-progress}
+
+大きなファイルを読み取るときは、読み取りがどこまで進んだかを示すUXを提供すると便利な場合があります。そうするには、`FileReader` が提供する [`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event) イベントを使用します。`progress` イベントは、`loaded` (読み取られた量) と `total` (読み取る量の合計) という 2 つのプロパティを提供します。
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // Do something with result
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+ヒーロー画像、[Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)、Vincent Botta 氏提供
diff --git a/src/site/content/ja/blog/referrer-best-practices/index.md b/src/site/content/ja/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..5aee30c7c9a
--- /dev/null
+++ b/src/site/content/ja/blog/referrer-best-practices/index.md
@@ -0,0 +1,362 @@
+---
+layout: post
+title: リファラーとリファラーポリシーのベストプラクティス
+subhead: リファラーポリシーを設定し、送信されてくるリクエストにリファラーを使用するためのベストプラクティス。
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: |
+  `strict-origin-when-cross-origin` のリファラーポリシーを設定をご検討ください。データのクロスオリジンが漏洩するリスクを軽減しながら、リファラーの有用性の多くを保持します。
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## 概要
+
+- 予期しないクロスオリジン情報の漏洩は、Web ユーザーのプライバシーに支障をきたします。保護リファラーポリシーが便利です。
+- `strict-origin-when-cross-origin`リファラーポリシーを設定することをご検討ください。データのクロスオリジンを漏洩するリスクを軽減しながら、リファラーの有用性の多くを保持します。
+- クロスサイトリクエストフォージェリ (CSRF) 保護にリファラーを使用しないでください。 [代わりに CSRF トークン](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)を使用し、セキュリティの追加レイヤーとして他のヘッダーを使用します。
+
+{% Aside %}始める前に：
+
+- 「サイト」と「オリジン」の違いがわからない場合は、 [「同一サイト」と「同一オリジン」について](/same-site-same-origin/)をご確認ください。
+- 元々仕様にスペルミスがあり、 `Referer` ヘッダーの「R」が抜けています。JavaScript と DOM の`Referrer-Policy` ヘッダーと`referrer` のスペルは正しく表記されています。{% endAside %}
+
+## リファラーとリファラーポリシー 101
+
+HTTP リクエストには、リクエストの発信元または Web ページの URL を示す [`Referer` ヘッダーが含まれる場合があります。](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) [`Referrer-Policy` ヘッダーは、](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)`Referer` ヘッダーで使用できるデータを定義します。
+
+以下の例では、`Referer` ヘッダーには、リクエストの発信元となる `site-one` のページの完全な URL が含まれています。
+
+<figure>
+  {% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="リファラーヘッダーを含む HTTP リクエスト。", width="800", height="573" %}
+</figure>
+
+`Referer` ヘッダーは、さまざまなタイプのリクエストに存在する可能性があります。
+
+- ユーザーがリンクをクリックしたときのナビゲーションリクエスト
+- ブラウザーが画像、iframe、スクリプト、およびページに必要なその他のリソースを要求するときのサブリソース要求。
+
+`document.referrer` を使用して JavaScript 経由でアクセスすることも可能です。
+
+`Referer` 値はインサイトを提供する可能性があります。たとえば、分析サービスはこの値を使用して、 `site-two.example` の訪問者のうち 50% は `social-network.example`から来たと判断することが考えられます。
+
+ただし、パスとクエリ文字列を含む完全な URL が**オリジン間**を`リファラー`として送信される場合、これは**プライバシーの阻害**となるほか、**セキュリティリスク**をもたらす可能性があります。以下の URL をご覧ください。
+
+<figure>
+  {% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="パス付きの URL。さまざまなプライバシーとセキュリティのリスクにマッピングされています。", width="800", height="370" %}
+</figure>
+
+URL＃1 から ＃5 には個人情報が含まれており、場合によっては識別情報や機密情報も含まれます。これらがオリジン間でサイレントに漏洩されると、Web ユーザーのプライバシーが危険にさらされる可能性があります。
+
+URL＃6 は[機能 URL](https://www.w3.org/TR/capability-urls/) で、意図したユーザー以外の人物には渡したくないものです。これが発生した場合、悪意のある攻撃者がこのユーザーのアカウントを乗っ取る可能性があります。
+
+**サイトからのリクエストで利用できるリファラーデータを制限するには、リファラーポリシーを設定できます。**
+
+## 利用可能なポリシーは？それぞれの違う点は？
+
+8 つのポリシーから 1 つ選択できます。ポリシーに応じて、 `Referer` ヘッダー (および`document.referrer`) からは以下のデータを使用できる場合があります。
+
+- データなし (`Referer` ヘッダーがない)
+- [オリジン](/same-site-same-origin/#origin)のみ
+- 完全な URL：オリジン、パス、クエリ文字列
+
+<figure>
+  {% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Referer ヘッダーと document.referrer に含めることができるデータ。", width="800", height="255" %}
+</figure>
+
+一部のポリシーは、**コンテキスト**に応じて異なる動作をするように設計されています：クロスオリジンまたは同じオリジンのリクエスト、セキュリティ (リクエストの宛先がオリジンと同じくらい安全かどうか)、またはその両方。これは、自分のサイト内のリファラーの豊富さを維持しながら、オリジン間で共有される情報の量を制限したり、安全性の低いオリジンに制限したりするのに役立ちます。
+
+リファラ―ポリシーによってリファラ―ヘッダーと `document.referrer` の使用できる URL データがどのように制限されるかを以下にまとめています。
+
+<figure>
+  {% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="セキュリティとクロスオリジンコンテキストに応じた、さまざまなリファラーポリシーとその動作。", width="800", height="537" %}
+</figure>
+
+MDN で、 [ポリシーと動作の例の完全なリスト](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives)が提供されています。
+
+注意事項：
+
+- スキーム (HTTPS と HTTP) を考慮に入れるすべてのポリシー (`strict-origin` 、 `no-referrer-when-downgrade` 、および `strict-origin-when-cross-origin`) は、HTTP オリジンから別の HTTP オリジンへのリクエストを HTTPS オリジンから別の HTTPS オリジンへのリクエストと同じように処理します (HTTP の安全性が低い場合も例外ではありません)。これらのポリシーについては、セキュリティの**ダウングレード**が発生するかどうか、つまり、リクエストによりデータが暗号化されたオリジンから暗号化されていないオリジンに公開されてしまうかどうかが重要だからです。 HTTP から HTTP へのリクエストは最初から最後まで暗号化されないため、ダウングレードは起こりません。逆に、HTTPS から HTTP リクエストへのリクエストでは、ダウングレードが起こります。
+- リクエストの**オリジンが同じ**である場合は、スキーム (HTTPS または HTTP) が同じであるため、セキュリティのダウングレードは起こらないことを意味します。
+
+## ブラウザのデフォルトのリファラーポリシー
+
+*2020 年 7 月現在*
+
+**リファラーポリシーが設定されていない場合は、ブラウザーのデフォルトポリシーが使用されます。**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>ブラウザー</th>
+        <th>デフォルトの<code>Referrer-Policy</code>/動作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>クロム</td>
+        <td>
+<a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">バージョン85で</a><code>strict-origin-when-cross-origin</code>への切り替えを計画しています (以前は<code>no-referrer-when-downgrade</code>)</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> （<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">クローズドバグを参照してください</a>）</li>
+            <li>プライベートブラウジングおよびトラッカーの<code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>角</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>
+<code>strict-origin-when-cross-origin</code>での<a href="https://github.com/privacycg/proposals/issues/13">実験</a>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>サファリ</td>
+        <td>
+<code>strict-origin-when-cross-origin</code>と同様です。詳細については、「<a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">トラッキング防止トラッキングの防止</a>」を参照してください。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## リファラーポリシーの設定：ベストプラクティス
+
+{% Aside 'objective' %}`strict-origin-when-cross-origin` (またはそれ以上に厳密なポリシー) などのプライバシー強化ポリシーを明示的に設定します。 {% endAside %}
+
+サイトのリファラーポリシーを設定するには、さまざまな方法があります。
+
+- HTTP ヘッダーとして設定する
+- [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML) 内で設定する
+- [リクエストごとに](https://javascript.info/fetch-api#referrer-referrerpolicy) JavaScript から設定する
+
+ページ、リクエスト、要素ごとに異なるポリシーを設定できます。
+
+HTTP ヘッダーとメタ要素はどちらもページレベルです。要素の有効なポリシーを決定する際の優先順位は次のとおりです。
+
+1. 要素レベルのポリシー
+2. ページレベルのポリシー
+3. ブラウザーのデフォルト
+
+**例：**
+
+`index.html` ：
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+画像は`no-referrer-when-downgrade`ポリシーでリクエストされますが、このページからの他のすべてのサブリソースリクエストは、`strict-origin-when-cross-origin`ポリシーに従います。
+
+## リファラーポリシーを確認するにはどうすればよいですか？
+
+特定のサイトまたはページが使用しているポリシーを判別するには、[securityheaders.com](https://securityheaders.com/) が便利です。
+
+Chrome、Edge、または Firefox の開発者ツールを使用して、特定のリクエストに使用されるリファラーポリシーを確認することもできます。この記事の執筆時点では、Safari に`Referrer-Policy`ヘッダーは表示されませんが、送信された`Referer` は表示されます。
+
+<figure>
+  {% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Chrome DevTools のネットワークパネルのスクリーンショット。リファラーとリファラーポリシーを示しています。", width="800", height="416" %}
+  <figcaption>
+    Chrome DevTools、リクエストが選択された<b>ネットワーク</b>パネル。
+  </figcaption>
+</figure>
+
+## Web サイトにはどのポリシーを設定する必要がありますか？
+
+`strict-origin-when-cross-origin` （またはそれ以上）などのプライバシー強化ポリシーを明示的に設定します。
+
+### なぜ「明示的に」設定するのか？
+
+リファラーポリシーが設定されていない場合は、ブラウザーのデフォルトポリシーが使用されます。実際、Web サイトはブラウザーのデフォルト設定に従うことがよくあります。しかし、これは理想的ではありません。理由は次のとおりです。
+
+- ブラウザーのデフォルトポリシーは、ブラウザーとモード (プライベート/シークレット) に応じて、 `no-referrer-when-downgrade` 、 `strict-origin-when-cross-origin`のいずれか、またはさらに厳密なポリシーであるため、ブラウザーが異なると Web サイトの動作は予期できないものになります。
+- `strict-origin-when-cross-origin`などのより厳密なデフォルトと、クロスオリジンリクエストの[リファラートリミング](https://github.com/privacycg/proposals/issues/13)などのメカニズムを採用しています。ブラウザのデフォルトが変更される前にプライバシー強化ポリシーを明示的にオプトインすると、制御が可能になり、適切と思われるテストを実行できるようになります。
+
+### なぜ`strict-origin-when-cross-origin` (またはより厳密なポリシー) を使うのですか？
+
+ポリシーは安全で、プライバシーの強化につながり、かつ便利なものが必要だからです。何が「便利」なのかは、リファラーに何を求めているかによって異なります。
+
+- **安全**：Web サイトが HTTPS を使用している場合 ([使用していない場合は優先します](/why-https-matters/))、HTTPS 以外の要求で Web サイトの URL がリークしないようにします。ネットワーク上の誰もがこれらを見ることができるので、これはあなたのユーザーを中途半端な攻撃にさらすことになります。`no-referrer-when-downgrade`、`strict-origin-when-cross-origin`、`no-referrer`、`strict-origin` ポリシーがこの問題を解決します。
+- **プライバシー強化**：クロスオリジンリクエストの場合、 `no-referrer-when-downgrade` が完全な URL を共有します。これはプライバシー強化ではありません。 `strict-origin-when-cross-origin` と `strict-origin` のみを共有し、 `no-referrer` は何も共有しません。したがって、プライバシーを強化するオプションとしては `strict-origin-when-cross-origin`、`strict-origin`、および `no-referrer` を使用することになります。
+- **便利**： `no-referrer` と `strict-origin` は、同じオリジンのリクエストであっても、完全な URL を共有することはありません。したがって、これが必要な場合は、`strict-origin-when-cross-origin` の方が適切なオプションであると言えます。
+
+つまり、**`strict-origin-when-cross-origin`**が通常賢明な選択肢となります。
+
+**例： `strict-origin-when-cross-origin`ポリシーの設定：**
+
+`index.html` ：
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+またはサーバー側、たとえば Express の場合：
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### `strict-origin-when-cross-origin` (またはより厳密なポリシー) がすべてのユースケースに対応できない場合はどうしますか？
+
+この場合、**プログレッシブアプローチを採用します。**`strict-origin-when-cross-origin`などの保護ポリシーを設定し、必要に応じて、特定のリクエストや HTML 要素に対してより寛容なポリシーを設定します。
+
+### 例：要素レベルのポリシー
+
+`index.html` ：
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Safari/WebKit は、[クロスサイト](/same-site-same-origin/#same-site-cross-site)リクエストの `document.referrer` または `Referer` ヘッダーに上限を設ける場合があることにご注意ください。「[詳細](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)」をご確認ください。
+
+### 例：リクエストレベルのポリシー
+
+`script.js` ：
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### 他には何を考慮すべきですか？
+
+どのポリシーを使用するかは、Web サイトやユースケースにより異なります。これは、あなた自信やあなたのチーム、お勤め先の企業が決める事です。一部の URLに 識別データまたは機密データが含まれている場合は、保護ポリシーを設定します。
+
+{% Aside 'warning' %}機密性が低いと思われるデータでも、ユーザーにとっては機密性が高いものである場合があります。または、単に不要なデータであったり、オリジン間でサイレントにリークするとは思われていないデータである場合もあります。{% endAside %}
+
+## 送信されてくるリクエストのリファラーの使用：ベストプラクティス
+
+### サイトの機能が送信されてくるリクエストのリファラー URL を使用している場合はどうすればよいですか？
+
+#### ユーザーのデータを保護する
+
+`Referer`には、個人データや識別データが含まれている可能性があるため、適切に取り扱う必要があります。
+
+#### 受信する`Referer`は変更される場合があることを覚えておきましょう。
+
+送られてくるクロスオリジンリクエストのリファラーを使用することには、制限がいくつかあります。
+
+- リクエスト発信元の実装を一切制御できない場合には、受信する`Referer`ヘッダー (および`document.referrer`) について予想を立てることはできません。リクエスト発信元は、いつでも `no-referrer` ポリシー、または一般的にはより厳密なポリシーに切り替えることができます。つまり、`Referer` からは、それまでよりも少ない量のデータしか取得できなくなります。
+- ブラウザには、デフォルトで Referrer-Policy `strict-origin-when-cross-origin` が使用されることを増えつつあります。これは、これらを送信するサイトにポリシーが設定されていない場合は、受信するクロスオリジンリクエストで (完全なリファラーURLではなく) オリジンのみを受信できることを意味します。
+- ブラウザーは `Referer` の管理方法を変更する場合があります。たとえば、将来的には、ユーザーのプライバシーを保護するために、クロスオリジンサブリソースリクエストのオリジンへのリファラーを常にトリミングすることを決定することができます。
+- `Referer`ヘッダー (および`document.referrer`) には、必要以上のデータが含まれている場合があります。たとえば、リクエストがクロスオリジンであるかどうかだけを知りたいときに、完全な URL が含まれている場合があります。
+
+#### `Referer`代替
+
+次の場合は、代替案を検討する必要があります。
+
+- サイトの重要な機能は、受信するクロスオリジンリクエストのリファラー URL を使用します。
+- および/またはサイトがクロスオリジンリクエストで必要なリファラー URL の一部を受信しなくなった場合。これは、リクエストエミッタがポリシーを変更した場合、またはポリシーが設定されておらず、ブラウザのデフォルトのポリシーが変更された場合に発生します ([Chrome 85など](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default))。
+
+代替案を定義するには、最初にリファラーのどの部分を使用しているかを分析します。
+
+**オリジンのみが必要な場合 (`https://site-one.example`)：**
+
+- ページへのトップレベルのアクセス権を持つスクリプトでリファラーを使用している場合は、`window.location.origin` が代わりとなります。
+- [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) や [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) などのヘッダーを使用できる場合には、`Origin` を取得できたり、リクエストがクロスオリジンかどうかを説明できたりします。それがまさに必要となものである場合もあります。
+
+**URL の他の要素 (パス、クエリパラメータなど) が必要な場合：**
+
+- リクエストパラメータはユースケースに対応している可能性があり、これによりリファラーを解析する手間が省けます。
+- ページへのトップレベルのアクセス権を持つスクリプトでリファラーを使用している場合は、 `window.location.pathname`が代わりとなる可能性があります。 URL のパスセクションのみを抽出して引数として渡すため、URL パラメーター内の機密情報が渡されることはありません。
+
+**これらの代替手段を使用できない場合：**
+
+- リクエストの発信元 (`site-one.example`) が必要とされている情報を何らかの構成で明示的に設定することを要件とするようにシステムを変更できるかどうかを確認します。 メリット: `site-one.example` のユーザーにとっては情報がより明示的になり、プライバシーも保護され、将来的にも効果を発揮します。デメリット: 管理者およびシステムのユーザーの作業が増える可能性があります。
+- リクエストを発信するサイトが、要素ごとまたはリクエストごとのリファラーポリシーを `no-referrer-when-downgrade` に設定することに同意するかどうかを確認します。 `site-one.example` のユーザーのプライバシー保護が低下する可能性があり、すべてのブラウザーでサポートされるとは限りません。
+
+### クロスサイトリクエストフォージェリ (CSRF) 保護
+
+リクエストの発信元は、`no-referrer`ポリシーを設定すれば、いつでもリファラーを送信しないようにすることができます。(悪意のあるアクターはリファラーに対してスプーフィングを実行できる可能性すらあります)。
+
+[CSRF トークン](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)を主な保護として使用します。保護を強化するには [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites) を使用し、`Referer` の代わりに [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (POST および CORS リクエストで利用可能) や (利用可能な場合は) [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) などのヘッダーを使用します。
+
+### ロギング
+
+`Referer` 含まれている可能性のあるユーザーの個人データまたは機密データを必ず保護してください。
+
+オリジンのみを使用している場合は、[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) ヘッダーを代替として使用できるかどうかを確認してください。そうすることで、わざわざリファラーを解析せずに、デバッグに必要な情報をより簡単に得られる場合があります。
+
+### 支払い
+
+支払いプロバイダーは、セキュリティチェックを行う際に、受信するリクエストの `Referer` ヘッダーを確認する場合がります。
+
+たとえば：
+
+- ユーザーが `online-shop.example/cart/checkout` で**購入**ボタンをクリックします。
+- `online-shop.example` は、取引を管理するため `payment-provider.example` にリダイレクトします。
+- `payment-provider.example` は、このリクエストの `Referer` をマーチャントが設定した許可されている `Referer` 値のリストと照合します。リストのどのエントリとも一致しない場合、`payment-provider.example`はリクエストを拒否します。一致する場合、ユーザーは取引に進むことができます。
+
+#### 支払いフローのセキュリティチェックのベストプラクティス
+
+**まとめ: 支払いプロバイダーは、`Referer` をナイーブな攻撃に対する基本的なチェックとして使用できますが、他にも信頼性の高い検証方法を絶対に用意しておく必要があります。**
+
+`Referer` ヘッダーだけを見ても、セキュリティチェックを判断できる信頼性の高い根拠にはなりません。リクエストする側のサイトは、正当なマーチャントであるかどうかは問わず、`no-referrer` ポリシーを設定できてしまうからです。それにより、支払いプロバイダーは `Referer` 情報を使用できなくなってしまいます。ただし、支払いプロバイダーは、`Referer` を見ることで、`no-referrer` ポリシーを設定していないナイーブな攻撃者なら特定できる可能性があります。したがって、`Referer` を最初の基本的なチェックとして使用しても構わないでしょう。そうする場合は以下に注意しましょう。
+
+- **` Referer `が常に存在すると思ってはいけません。存在する場合は、それに少なくとも含まれるデータ (オリジン) だけをチェックします。**許可された ` Referer` のリストを設定するときは、オリジンだけが含まれていること、パスは一切含まれていないことを確認します。例: `Referer` 値のリストを設定するときは、パスが含まれておらず、起点のみが含まれていることを確認してください。例: `Referer` が全く存在しないこと、または `Referer` 値 (リクエストする側のウェブサイトのオリジン) が存在することを期待することで、マーチャントが設定した **`Referrer-Policy` やマーチャントがポリシーを一切設定していない場合ならブラウザーの動作について何の憶測も立てていない**ため、不測のエラーを防ぐことになるからです。サイトとブラウザーはともに、受信するリクエストの中身をオリジンだけ残して取り除くことができます。また、`Referer` を全く送信しないこともできます。
+- `Referer` が存在しない場合、またはリファラーが存在し、基本的な`Referer` 発信元チェックが成功した場合は、もう 1 つのより信頼性が高い検証方法を試します (以下を参照)。
+
+**より信頼性の高い検証方法とは何ですか？**
+
+信頼できる検証方法の 1 つとして、リクエスターに**一意のキーを使ってリクエストパラメーターをハッシュ化させる**という方法があります。支払いプロバイダーとして、**同じハッシュを自分サイドで計算する**ことにより、自分の計算結果と一致した場合にのみ、そのリクエストを受け入れるということができます。
+
+**リファラーポリシーを持たない HTTP マーチャントサイトが HTTPS プロバイダーにリダイレクトしたとき、`Referer` はどうなりますか？**
+
+ウェブサイトにポリシーが設定されていない場合、[多くのブラウザー](#default-referrer-policies-in-browsers)ではデフォルトで `strict-origin-when-cross-origin` または `no-referrer-when-downgrade` が使用されるため、HTTPS を介した支払いプロバイダーへのリクエストには `Referer` が一切表示されません。また、[Chrome が新たに採用したデフォルトのポリシー](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)によって、この動作が変更されることもありません。
+
+{% Aside %}
+
+Web サイトに HTTP を使用している場合は、 [HTTPS に移行します](/why-https-matters/)。
+
+{% endAside %}
+
+## 結論
+
+保護リファラーポリシーは、ユーザーのプライバシーを高める優れた方法です。
+
+ユーザーを保護するさまざまな手法の詳細については、web.dev の [Safe and secure](/secure/) コレクションをご覧ください！
+
+*Kaustubha Govind、David Van Cleve、Mike West、Sam Dutton、Rowan Merewood、Jxck、Kayce Basques をはじめとする、すべてのレビューアーの貢献とフィードバックに感謝いたします。*
+
+## リソース
+
+- [「同一サイト」と「同一オリジン」を理解する](/same-site-same-origin/)
+- [新しいセキュリティヘッダー：リファラーポリシー (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- MDN の[リファラーポリシー](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- MDN の[リファラーヘッダー：プライバシーとセキュリティの懸念](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Chrome の変更：Blink Intent to Implement](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Chrome の変更：Blink Intent to Ship](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Chrome の変更：ステータスエントリ](https://www.chromestatus.com/feature/6251880185331712)
+- [Chrome の変更：85 件のベータ版ブログ記事](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [GitHub スレッドをトリミングするリファラ―：さまざまなブラウザーの機能](https://github.com/privacycg/proposals/issues/13)
+- [リファラーポリシーの仕様](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/ja/blog/resize-observer/index.md b/src/site/content/ja/blog/resize-observer/index.md
new file mode 100644
index 00000000000..378fb605c55
--- /dev/null
+++ b/src/site/content/ja/blog/resize-observer/index.md
@@ -0,0 +1,127 @@
+---
+title: 要素の document.onresize のような ResizeObserver
+subhead: "`ResizeObserver` を使って、要素のサイズが変更されたことを知ることができます。"
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: プランターで成長する植物。
+description: "`ResizeObserver` は、要素のコンテンツの矩形が変更されたときにそのことを通知するため、それに合わせて反応することができます。"
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+`ResizeObserver` が導入される前、ビューポートのサイズ変更の通知を受けるには、ドキュメントの `resize` にリスナーをアタッチする必要がありました。その上で、イベントハンドラーで、その変更によって影響を受けた要素を特定し、特定のルーチンを呼び出して適切に対応していました。サイズ変更後の要素の新しいサイズが必要な場合は、`getBoundingClientRect()` または `getComputedStyle()` を呼び出す必要がありましたが、この場合、*すべて*の読み取りと*すべて*の書き込みのバッチ処理を行わないと、レイアウトがスラッシングする可能性がありました。
+
+この方法は、メインウィンドウのサイズを変更せずに要素が要素のサイズが変更するというケースもカバーしていませんでした。たとえば、新しい子を追加したり、要素の `display` スタイルを `none`に設定したり、または同様のアクションを実行すると、要素、その兄弟、またはその祖先のサイズが変更されてしまいます。
+
+これが、 `ResizeObserver` が便利なプリミティブである理由です。これは、変化の原因に関係なく、監視されている要素のサイズの変化に反応します。監視されている要素の新しいサイズへのアクセスも提供します。
+
+## API
+
+上記で述べた `Observer` 接尾辞を持つすべての API には、単純な API 設計があります。`ResizeObserver` も例外ではありません。`ResizeObserver` オブジェクトを作成し、コンストラクターにコールバックを渡します。コールバックには `ResizeObserverEntry` オブジェクトの配列（監視されている要素当たり 1 つのエントリ）が渡されます。
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// Observe one or multiple elements
+ro.observe(someElement);
+```
+
+## もう少し詳しく
+
+### 何がレポートされていますか？
+
+通常、 [`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry)は、`contentRect` と呼ばれるプロパティを介して要素のコンテンツボックスをレポートし、これにより [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) オブジェクトが返されます。このコンテンツボックスがコンテンツを配置できるボックスであり、パディングを差し引いたボーダーボックスです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="CSS ボックスモデルの図。", width="727", height="562" %}</figure>
+
+`ResizeObserver` は `contentRect` とパディングの両方のサイズを*レポート*しますが、`contentRect` のみを*監視*することに注意しておくことが重要です。`contentRect`  を要素の境界ボックスと*混同しない*ようにしましょう。`getBoundingClientRect()` によってレポートされる境界ボックスは、要素とその子孫をすべて含むボックスです。SVG はこのルールの例外であり、`ResizeObserver` は境界ボックスのサイズをレポートします。
+
+Chrome 84 の時点では、`ResizeObserverEntry` には、より詳細な情報を提供する 3 つの新しいプロパティが導入されています。これらのプロパティはそれぞれ、`blockSize` プロパティと `inlineSize` プロパティを含む `ResizeObserverSize` オブジェクトを返します。これは、コールバックが呼び出されたときに監視されている要素に関する情報です。
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+将来的には、複数列のシナリオで発生する複数のフラグメントを持つ要素をサポートできることが期待されるため、これらの項目はすべて読み取り専用配列を返すようになっています。今のところ、これらの配列には 1 つの要素しか含まれていません。
+
+これらのプロパティのプラットフォームサポートは制限され[ていますが、](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility)[Firefox はすでに最初の2つをサポートしています](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility)。
+
+### レポートされるタイミングは？
+
+仕様では、 `ResizeObserver` がペイント前とレイアウト後にすべてのサイズ変更イベントを処理することを禁じています。そのため、`ResizeObserver` のコールバックが、ページのレイアウトを変更するのに理想的な場所となります。`ResizeObserver` 処理はレイアウトとペイントの間で行われるため、これを行うとレイアウトが無効になるだけで、ペイントは無効になりません。
+
+### 落とし穴
+
+`ResizeObserver` へのコールバック内で監視されているオブジェクトのサイズを変更した場合はどうなるでしょうか。答えは次のとおりです。コールバックへの別の呼び出しをすぐにトリガーすることになります。幸い、`ResizeObserver` は、無限のコールバックループと循環依存を回避するメカニズムがあります。サイズ変更された要素が前のコールバックで処理された、DOM ツリー構造で*最も浅い*要素よりも深い場合、変更は同じフレームでのみ処理されます。それ以外の場合は、次のフレームに延期されます。
+
+## 応用
+
+`ResizeObserver` を使用して行えることの 1 つに、要素ごとのメディアクエリを実装することがあります。要素を監視することにより、デザインのブレークポイントを必然的に定義して要素のスタイルを変更することができます。次の[例](https://googlechrome.github.io/samples/resizeobserver/)では、2 番目のボックスは幅に応じて境界線の半径を変更します。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// Only observe the second box
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+もう 1 つの興味深い例として、チャットウィンドウが挙げられます。典型的な上から下への会話レイアウトで発生する問題は、スクロールの配置です。ユーザーの混乱を避けるために、ウィンドウが会話の下部に固定され、最新のメッセージが表示されるようにするとわかりやすくなります。さらに、あらゆる種類のレイアウト変更（電話の向きがランドスケープからポートレート、またはその逆に変わることを想定）でも同じことを達成できるでしょう。
+
+`ResizeObserver` を使用すると、*両方*のシナリオを処理する*単一*のコードを記述できます。ウィンドウのサイズ変更は、定義により `ResizeObserver` がキャプチャできるイベントではありますが、`appendChild()` 呼び出すと、新しい要素用にスペースを作成する必要があるため、その要素のサイズも変更されます（`overflow: hidden` が設定されていない限り）。これを念頭に置くと、ごくわずかな行でこの目的の効果を達成することができます。
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// Observe the scrollingElement for when the window gets resized
+ro.observe(document.scrollingElement);
+// Observe the timeline to process new messages
+ro.observe(timeline);
+```
+
+すごいと思いませんか？
+
+ここから、ユーザーが手動で上にスクロールし、新しいメッセージが届いた場合に*その*メッセージにスクロールを固定するというケースを処理するためのコードを追加できます。
+
+別のユースケースは、独自のレイアウトを操作しているあらゆる種類のカスタム要素のケースです。`ResizeObserver` が導入されるまでは、サイズが変更されたときに通知を受け取て子をレイアウトし直すための確実な方法はありませんでした。
+
+## まとめ
+
+`ResizeObserver` は、[ほとんどの主要なブラウザ](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility)で使用できます。場合によっては、ごく最近になって使用できるようになっていることもあります。[利用可能なポリフィル](https://github.com/WICG/ResizeObserver/issues/3)はありますが、`ResizeObserver` の機能を完全に複製しているわけではありません。現在の実装は、ポーリングまたは DOM へのセンチネル要素の追加に依存しています。前者では CPU がビジー状態になってしまうため、モバイルのバッテリーを消耗しますが、後者は DOM を変更してしまうため、スタイルやその他の DOM 依存コードを台無しにしてしまう可能性があります。
+
+写真提供: [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)（[Unsplash](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)）。
diff --git a/src/site/content/ja/blog/responsive-web-design-basics/index.md b/src/site/content/ja/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..39789994809
--- /dev/null
+++ b/src/site/content/ja/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,325 @@
+---
+title: レスポンシブウェブデザインの基本
+subhead: サイトを表示するデバイスのニーズと機能に対応するサイトを作成する方法。
+description: サイトを表示するデバイスのニーズと機能に対応するサイトを作成する方法。
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+モバイルデバイスを使ったWebの閲覧は、天飛躍的なペースで成長し続けています。こうしたデバイスはディスプレイサイズに制約されることが多く、コンテンツを画面上にレイアウトする上で異なるアプローチが必要です。
+
+レスポンシブウェブデザインは、もともと[A  List Apart の Ethan Marcotte 氏](http://alistapart.com/article/responsive-web-design/)によって定義されたもので、ユーザーとユーザーの使用するデバイスのニーズに応えます。レイアウトは、デバイスのサイズと機能に応じて変わります。たとえば、携帯電話の場合は、コンテンツ 1 列のビューに表示されます。タブレットでは、同じコンテンツが 2 列のビューに表示される場合があります。
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+携帯電話、「ファブレット」、タブレット、デスクトップ、ゲーム機、テレビ、さらにはウェアラブルでは、さまざまな画面サイズが存在します。画面サイズは常に変化するため、サイトが任意の画面サイズに適応できることは、今も今後も重要です。さらに、デバイスには、デバイスと対話するためのさまざまな機能があります。たとえば、訪問者の中にはタッチスクリーンを使用するユーザーがいるでしょう。現代のレスポンシブデザインは、これらすべてを考慮して、あらゆるユーザーのエクスペリエンスを最適化します。
+
+## ビューポートを設定する {: #viewport}
+
+さまざまなデバイス用に最適化されたページでは、ドキュメントの先頭にメタビューポートタグを含める必要があります。メタビューポートタグは、ページのサイズとスケーリングを制御する方法に関する指示をブラウザに出します。
+
+最高のエクスペリエンスを提供するために、モバイルブラウザはデスクトップ画面の幅 (通常は約`980px`ですが、デバイスによって異なります) を基準にページをレンダリングします。また、フォントサイズを大きくし、コンテンツを画面におさまるように拡大することにより、コンテンツの見栄えを良くしようとします。つまり、フォントサイズが一貫していないように見える可能性があり、ユーザーは、コンテンツを表示して操作するために、ダブルタップしたり、ピンチしてズームしたりする必要があります。
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+メタビューポート値 `width=device-width` は、デバイスに依存しないピクセルで画面の幅に合わせることをページに指示します。デバイス (または密度) に依存しないピクセルは、1 つのピクセスを表現したものであり、高密度画面では、多くの物理ピクセルで構成される場合があります。これにより、小型の携帯電話でも大型のデスクトップモニターでも、ページをリフローしてさまざまな画面サイズに合わせることができます。
+
+<figure>{% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="大きくズームアウトされているため、テキストが読みにくいページのスクリーンショット", width="500", height="640"%}<figcaption>ビューポートメタタグのないデバイスでページが読み込まれる様子を示した例。<a href="https://without-vp-meta.glitch.me/">Glitch でこちらの例をご覧ください</a>。</figcaption></figure>
+
+<figure>{% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="テキストを判読できるサイズにした同じページのスクリーンショット", width="500", height="888"%}<figcaption>ビューポートメタタグを使用してページをデバイスに読み込む方法の例。<a href="https://with-vp-meta.glitch.me/">Glitch でこちらの例をご覧ください</a>。</figcaption></figure>
+
+[一部のブラウザ](https://css-tricks.com/probably-use-initial-scale1/)は、横向きモードに回転するときにページの幅を一定に保ち、リフローして画面全体に表示する代わりにズームします。`initial-scale=1` 値を追加すると、デバイスの向きを問わず、CSS ピクセルとデバイスに依存しないピクセルの間に1：1の関係を確立する指示をブラウザーに出し、ページは横の幅を完全に利用できるようになります。
+
+{% Aside 'caution' %}古いブラウザが属性を適切に解析できるようにするには、コンマを使用して属性を区切ります。{% endAside %}
+
+[`width`または`initial-scale` Lighthouse監査を含む`<meta name="viewport">`タグ](https://developer.chrome.com/docs/lighthouse/pwa/viewport/)がない場合、HTMLドキュメントがビューポートメタタグを正しく使用していることを確認するプロセスを自動化するのに役立ちます。
+
+### アクセス可能なビューポートを確認する {: ＃accessible-viewport}
+
+`initial-scale` 以外にも、ビューポートでは次の属性も設定できます。
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+これらは、一旦設定されると、ゆーがーがズームできなくなるため、アクセシビリティの問題を引き起こす可能性があります。したがい、これらの属性を使用することはお勧めしません。
+
+## コンテンツのサイズをビューポートに合わせる {: #size-content}
+
+ユーザーは、デスクトップデバイスでも、モバイルデバイスでも、Webサイトを垂直方向にスクロールすることに慣れていますが、水平方向へのスクロールには慣れていないでしょう。したがい、ユーザーがページ全体を表示するのに水平方向にスクロールしたり、ズームアウトしたりする必要があると、優れたユーザーエクスペリエンスが損なわれてしまいます。
+
+メタビューポートタグを使用してモバイルサイトを開発する場合、指定したビューポートに完全に収まらないページコンテンツを誤って作成してしまう可能性があります。たとえば、ビューポートよりも広い幅で画像が表示されると、ビューポートが水平方向にスクロールする可能性があります。ユーザーがページを水平方向にスクロールする必要がないように、コンテンツをビューポートの幅内に収まるように調整する必要があります。
+
+Lighthouse の [Content is not sized correctly for the viewport](https://developer.chrome.com/docs/lighthouse/pwa/content-width/) 監査は、オーバーフローするコンテンツを検出するプロセスを自動化するのに役立ちます。
+
+### 画像 {: #images}
+
+画像のサイズは固定されており、ビューポートよりも大きい場合はスクロールバーが表示されます。この問題に対処する一般的な方法は、すべての画像に`100%` `max-width`を与えることです。これにより、ビューポートサイズが画像よりも小さい場合、画像はそのスペースに合わせて縮小されます。ただし、`width` の代わりに `max-width` を `100%` にするため、画像は自然なサイズを超えてストレッチすることはありません。画像が原因でスクロールバーが表示される問題が発生しないよう、スタイルシートに以下を追加しておくと無難でしょう。
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### 画像のサイズをimg要素に追加する {: #image-dimensions}
+
+`max-width: 100%`を使用すると、画像の自然なサイズが上書きされます。しかし、`<img>` タグには `width` 属性と `height` 属性を使用すべきでしょう。理由としては、最近のブラウザは、この情報を使用して画像のスペースを確保してから画像を読み込むため、それがコンテンツの読み込み時に[レイアウトがずれる](/optimize-cls/)問題を防ぐのに役立つためです。
+
+### レイアウト {: #layout}
+
+CSSピクセルの画面サイズと幅はデバイス間（たとえば、電話とタブレット間、さらには異なる電話間）で大きく異なるため、コンテンツを適切にレンダリングするためには、特定のビューポート幅に依存することは避けなくてはいけません。
+
+以前は、これにはパーセンテージでレイアウトを作成するために使用される設定要素が必要でした。以下の例では、ピクセルを使用してサイズ設定された、フロート要素を含む2列のレイアウトを確認できます。ビューポートが列の全幅よりも小さくなったら、コンテンツを表示するために水平方向にスクロールする必要があります。
+
+<figure>{% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="2列からなるレイアウトがあり、2つ目の列の大部分がビューポートからはみ出しているスクリーンショット", width="800", height="504" %}<figcaption>ピクセルを使用したフロートレイアウト。<a href="https://layout-floats-px.glitch.me/">Glitch でこちらの例をご覧ください</a>。</figcaption></figure>
+
+幅にパーセンテージを使用すると、列は常にコンテナサイズの特定のパーセンテージを維持します。つまり、列が狭くなるため、スクロールバーは作成されません。
+
+{% Glitch { id: 'layout-floats-percent', path: 'README.md' } %}
+
+Flexbox、Grid Layout、Multicolなど、最新のCSSレイアウト手法により、こうした柔軟なグリッドの作成が非常に簡単になります。
+
+#### Flexbox {: #flexbox}
+
+このレイアウト方法は、さまざまなサイズのアイテムがあり、小さいアイテムに小さいスぺースを、大きいアイテムに大きなスペースを与えることにより、各アイテムを 1 つまたは複数の列にゆったり収めたいという場合に最適です。
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+レスポンシブデザインでは、Flexboxを使用してアイテムを単一の行として表示したり、使用可能なスペースが減少したときに複数の行に折り返したりすることができます。
+
+{% Glitch { id: 'responsive-flexbox', height: 220 } %}
+
+[Flexbox について詳しくお読みください](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox)。
+
+#### CSS Grid Layout {: #grid }
+
+CSSグリッドレイアウトを使用すると、柔軟なグリッドを簡単に作成できます。先ほどのフロートの例を考慮すれば、パーセンテージの代わりに、グリッドレイアウトと `fr` ユニット (コンテナ内の使用可能なスペースの一部を表す) を使って列を作成することができるでしょう。
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+また、グリッドを使用すると、通常のグリッドレイアウトを作成し、スペースに収まるだけのアイテムを含めることができます。画面サイズが小さくなると、利用可能なトラックの数が減ります。以下のデモでは、各行に収まるだけの数のカードがあり、最小サイズは`200px`としています。
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[CSS Grid Layout について詳しく読む](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
+
+#### 複数列のレイアウト{: #multicol}
+
+一部のタイプのレイアウトでは、複数列レイアウト（Multicol）を使用できます。これにより、 `column-width`プロパティを使用してレスポンシブな数の列を作成できます。 `200px`の列を追加する余地がある場合は、列が追加されていることがわかります。
+
+{% Glitch { id: 'responsive-multicol', path: 'style.css' } %}
+
+[Multicolについて詳しく読む](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+
+## 応答性を確保するためにCSSメディアクエリを使用する{: media-queries}
+
+上記の手法で確保できる画面サイズ以上のサイズをサポートするには、レイアウトをさらに変更する必要があります。そこで便利なのが、メディクエリです。
+
+メディアクエリは、CSSスタイルに適用できるシンプルなフィルターです。コンテンツをレンダリングするデバイスのタイプ、またはそのデバイスの機能（幅、高さ、向き、ホバー機能、デバイスがタッチスクリーンとして使用されているかどうかなど）に基づいて、スタイルを簡単に変更できます。
+
+印刷に異なるスタイルを提供するには、次のように出力の*タイプ*をターゲットにし、印刷スタイルが指定されたスタイルシートを含める必要があります。
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+または、メディアクエリを使用して、メインのスタイルシートに印刷スタイルを含めることもできます。
+
+```css
+@media print {
+  /* print styles go here */
+}
+```
+
+{% Aside 'note' %}`@import`構文、 `@import url(print.css) print;`を使用して、メインのCSSファイルに別のスタイルシートを含めることもできます。ただし、パフォーマンス上の理由から、この使用はお勧めしません。詳細については、[Avoid CSS imports](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports) を参照してください。{% endAside %}
+
+レスポンシブウェブデザインの場合、通常、小さな画面に異なるレイアウトを提供するために、または訪問者がタッチスクリーンを使用していることを検出したときに、デバイス*の機能を照会します。*
+
+### ビューポートサイズに基づくメディアクエリ {: #viewport-media-queries}
+
+メディアクエリを使用すると、特定のスタイルが小さな画面から大きな画面に渡って適用されるレスポンシブエクスペリエンスを作成できます。したがって、ここで検出している機能は画面サイズであり、次の要素をテストできます。
+
+- `width` （ `min-width` 、 `max-width` ）
+- `height` （ `min-height` 、 `max-height` ）
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch { id: 'media-queries-size', path: 'index.html' } %}
+
+これらの機能はすべて、優れたブラウザサポートを備えています。ブラウザのサポート情報などの詳細については、MDNで[幅](https://developer.mozilla.org/docs/Web/CSS/@media/width)、[高さ](https://developer.mozilla.org/docs/Web/CSS/@media/height)、[向き](https://developer.mozilla.org/docs/Web/CSS/@media/orientation)、[アスペクト比を参照してください。](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio)
+
+{% Aside 'note' %} 仕様には、`device-width` と `device-height` のテストが含まれていました。これらは非推奨になっていますので、実行しないでください。デバイスウィンドウの実際の `device-width` と `device-height` を調べるためのテストは、ユーザーがデバイスウィンドウのサイズを変更した場合などは、ユーザーが見ているビューポイントと異なる場合があるため、実際には有用なものではありませんでした。{% endAside %}
+
+### デバイス機能に基づくメディアクエリ {: #capability-media-queries}
+
+利用可能なデバイスの種類を考慮すると、すべての大きなデバイスが通常のデスクトップであるのか、ノートパソコンであるのか、またユーザーが小さなデバイスでタッチスクリーンだけを使っているのかは判断できません。メディアクエリの仕様に新たな内容がいくつか追加されたおかげで、デバイスとの対話に使用されるポインターのタイプや、ユーザーが要素にカーソルを合わせることができるかどうかなどの機能をテストできるようになりました。
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+このデモは、通常のデスクトップコンピューターや携帯電話、タブレットなど、さまざまなデバイスで表示してみてください。
+
+{% Glitch 'media-query-pointer' %}
+
+こうした新機能は、すべての最新ブラウザで適切にサポートされています。[hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover)、[any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover)、[pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer)、[any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer) の詳細については、MDN の該当するページを参照してください。
+
+#### `any-hover`と`any-pointer` の使用について
+
+`any-hover` および `any-pointer` といった機能は、ユーザーがホバーする機能を持っているかどうか、または、デバイスと対話する主要な方法でなくても、そのタイプのポインターを使用しているかをテストします。これらを使用するときは十分に注意してください。タッチスクリーンを使用しているときにユーザーにマウスへの切り替えを強制することは、あまり好ましくありません。ただし、ユーザーが使用しているデバイスの種類を把握することが重要な場合は、`any-hover` と ` any-pointer` が重宝するかもしれません。たとえば、タッチスクリーンとトラックパッドを備えたノートパソコンは、ホバーする機能に加えて、粗いポインターと細かいポインターに一致する必要があります。
+
+## ブレークポイントの選択方法 {: #breakpoints}
+
+デバイスクラスに基づいてブレークポイントを定義しないでください。現在使用されている特定のデバイス、製品、ブランド名、またはオペレーティングシステムに基づいてブレークポイントを定義すると、メンテナンスが手に負えなくなる場合があります。代わりに、レイアウトをどのようにコンテナに調整するかは、コンテンツそのものを基に判断するべきです。
+
+### ブレークポイントは小さいものから始めて大きなものを選択する {: #major-breakpoints }
+
+最初に小さな画面サイズに収まるようにコンテンツを設計してから、ブレークポイントが必要になるまで画面を拡大します。これにより、コンテンツに基づいてブレークポイントを最適化し、可能な限り少ない数のブレークポイントを維持できます。
+
+最初に紹介した天気予報の例を見てみましょう。最初のステップは、予報を小さな画面に見栄えよく表示することです。
+
+<figure>{% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="モバイル幅で表示された気象アプリのスクリーンショット", width="400", height="667" %}<figcaption>狭い幅で表示したアプリ。</figcaption></figure>
+
+次に、要素間に空白があり過ぎて、予報の見栄えがとにかく悪いという所までブラウザのサイズを変更します。この判断は幾分主観的なものですが、 `600px`以上は確実に広すぎると言えるでしょう。
+
+<figure>{% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="アイテム間に大きなギャップがある気象アプリのスクリーンショット", width="400", height="240" %}<figcaption>アプリのデザインを微調整する必要があると感じる状態。</figcaption></figure>
+
+`600px` でブレークポイントを挿入するには、CSSの終わりにコンポートネントに対するメディアクエリを 2 つ (ブラウザーが`600px`以下の場合に使用するものを 1 つ、`600px` よりも広い場合に使用するものを 1 つ) 作成します。
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+最後に、CSSをリファクタリングします。`max-width` が `600px` のメディアクエリ内に、小さな画面専用のCSSを追加します。`min-width` が `601px`のメディアクエリ内には、より大きな画面用のCSSを追加します。
+
+#### 必要に応じてマイナーブレークポイントを選択します
+
+レイアウトが大幅に変更されたときにメジャーブレークポイントを選択することに加えて、マイナーな変更を調整することも役立ちます。たとえば、主要なブレークポイント間では、要素の余白やパディングを調整したり、フォントサイズを大きくして、レイアウトがより自然に感じられるようにしたりすることが役に立つ場合があります。
+
+小さな画面のレイアウトを最適化することから始めましょう。この場合、ビューポイントの幅が `360px` より広いときにはフォントをブーストしましょう。次に、十分なスペースがある場合は、高温と低温を分けることにより、双方が重なり合うのを避け、同じ線上に収めることができます。また、気象アイコンを少し大きくしましょう。
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+同様に、大画面の場合は、画面全体の幅を消費しないように、予報パネルの最大幅を制限とすることをお勧めします。
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch { id: 'responsive-forecast', path: 'style.css' } %}
+
+### テキストを最適化して読みやすくする
+
+読みやすさに関する従来の理論では、1 行あたり 70〜80 文字 (英語では約 8〜10 ワード) の列が理想とされています。したがって、テキストブロックの幅がおよそ 10 ワードを超えるときは、ブレークポイントを追加することを検討してください。
+
+<figure>{% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="テキストを含むページをモバイルデバイスに表示したスクリーンショット", width="400", height="488" %}<figcaption>モバイルデバイスで読み取られたテキスト。</figcaption></figure>
+
+<figure>{% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="テキストを含むページをデスクトップ用のブラウザに表示したスクリーンショット", width="800", height="377" %}<figcaption>行の長さを制限するためにブレークポイントが追加された状態でデスクトップブラウザ上で読み取られたのテキスト。</figcaption></figure>
+
+上記のブログ記事の例を詳しく見てみましょう。小さい画面では、`1em` のRobotoフォントは完全に機能しており、1 行あたり 10 ワードを表示していますが、大きい画面ではブレークポイントが必要です。この場合、ブラウザの幅が `575px` より大きい場合、コンテンツの幅は `550px` とするのが理想的です。
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch { id: 'rwd-reading', path: 'index.html' } %}
+
+### 単純にコンテンツを非常時にするということは避けましょう
+
+画面サイズに応じて、非表示または表示するコンテンツを選択するときは注意してください。画面に収まらないという理由だけでコンテンツを非表示にするのは止めましょう。画面サイズは、ユーザーが期待すると思われる情報を基に決定するものではありません。たとえば、天気予報から花粉数を省いてしまうことは、春のアレルギーに苦しみ、外出できるかどうかを判断するための情報を必要とする人々にとっては深刻な問題になる可能性があります。
+
+## Chrome DevToolsでメディアクエリブレークポイントを表示する {: #devtools}
+
+メディアクエリブレークポイントを設定したら、サイトがどのように表示されるかを確認する必要があります。ブラウザウィンドウのサイズを変更してブレークポイントをトリガーすることもできますが、Chrome DevToolsには、さまざまなブレークポイントの下でページがどのように表示されるかを簡単に確認できる機能が組み込まれています。
+
+<figure>{% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="気象アプリを開いて822ピクセルの幅を選択したDevToolsのスクリーンショット。", width="800", height="522" %}<figcaption> より広いビューポートサイズを見た状態で気象アプリを表示する DevToolsに。</figcaption></figure>
+
+<figure>{% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="気象アプリを開いて436ピクセルの幅を選択したDevToolsのスクリーンショット。", width="800", height="521" %}<figcaption>より狭いビューポートサイズを見た状態で気象アプリを表示するDevTools。</figcaption></figure>
+
+さまざまなブレークポイントでページを表示する場合は、
+
+[DevTools を開き](https://developer.chrome.com/docs/devtools/open/)、[デバイスモード](https://developer.chrome.com/docs/devtools/device-mode/#toggle)をオンにします。デフォルトでは、[レスポンシブモード](https://developer.chrome.com/docs/devtools/device-mode/#responsive)で開きます。
+
+[メディアクエリ](https://developer.chrome.com/docs/devtools/device-mode/#queries)を表示するには、[デバイスモード]メニューを開き、[メディアクエリを表示]を選択して、ブレークポイントを色付きのバーとしてページの上に表示します。
+
+メディアクエリがアクティブなときにページを表示するには、バーの1つをクリックします。バーを右クリックして、メディアクエリの定義にジャンプします。
diff --git a/src/site/content/ja/blog/samesite-cookie-recipes/index.md b/src/site/content/ja/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..5af4f17027e
--- /dev/null
+++ b/src/site/content/ja/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,158 @@
+---
+title: SameSite Cookieレシピ
+subhead: 今後のSameSite属性の動作の変更に備えて、サイトのCookieを更新します。
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: 新しいSameSite = None属性値の導入により、サイトでは、Cookieをクロスサイトで使用するように明示的に設定できるようになりました。ブラウザは、SameSite属性がないCookieをデフォルトでファーストパーティとして機能させようとしています。これは、現在のオープン動作よりも安全でプライバシーを保護するオプションです。ここでは、Cookieをマークアップし、この変更が適用されたときに、ファーストパーティおよびサードパーティCookieを確実に動作させ続ける方法について説明します。
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %}この記事は、Cookie の `SameSite` 属性の変更を扱うシリーズ記事の一部です。
+
+- [SameSite Cookie の説明](/samesite-cookies-explained/)
+- [SameSite Cookie のレシピ](/samesite-cookie-recipes/)
+- [スキームフル Same-Site](/schemeful-samesite){% endAside %}
+
+[Chrome](https://www.chromium.org/updates/same-site)、[Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ)、[Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ)などは、IETFの提案である[Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00)に沿って、デフォルトの動作を次のように変更します。
+
+- `SameSite`属性のないCookieは`SameSite=Lax`として扱われます。つまり、デフォルトの動作では、Cookieはファーストパーティのコンテキスト**のみ**に制限されます。
+- クロスサイト使用のCookieは、`SameSite=None; Secure`を指定し、サードパーティコンテキストを追加できるようにする**必要があります**。
+
+この機能は、 [Chrome 84 stable以降のデフォルトの動作](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html)です。まだ対応していない場合は、サードパーティのCookieの属性を更新して、将来ブロックされないようにしてください。
+
+## クロスブラウザのサポート
+
+MDNの[`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie)ページの[ブラウザの互換性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie)セクションを参照してください。
+
+## クロスサイトまたはサードパーティCookieの使用例
+
+さまざまな一般的なユースケースやパターンでは、Cookieをサードパーティのコンテキストで送信する必要があります。これらのユースケースのいずれかを提供したり、依存したりしている場合は、確実にサービスが正しく機能し続けるように、ユーザーまたはプロバイダのいずれかがCookieを更新していることを確認してください。
+
+### `<iframe>`内のコンテンツ
+
+`<iframe>`で表示される別のサイトのコンテンツは、サードパーティのコンテキストにあります。ここでの標準的な使用例は次のとおりです。
+
+- 動画、地図、コードサンプル、ソーシャル投稿など、他のサイトから共有される埋め込みコンテンツ。
+- 決済、カレンダー、手配、予約機能などの外部サービスのウィジェット。
+- あまり明確ではない`<iframes>`を作成するソーシャルボタンや不正防止サービスなどのウィジェット。
+
+ここでは、Cookieを使用して、セッションの状態を維持したり、一般的な設定を保存したり、統計を有効にしたり、既存のアカウントを持つユーザーのコンテンツをパーソナライズしたりできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="埋め込みコンテンツのURLがページのURLと一致しないブラウザウィンドウの図。", width="468", height="383", style="max-width: 35vw;" %} <figcaption>埋め込まれたコンテンツが最上位のブラウジングコンテキストと同じサイトから取得されていない場合は、サードパーティのコンテンツです。</figcaption></figure>
+
+さらに、本質的に、Webは構成可能であるため、`<iframes>`は、最上位またはファーストパーティのコンテキストでも表示されるコンテンツを埋め込むために使用されます。そのサイトで使用されているすべてのCookieは、サイトがフレーム内に表示されたときにサードパーティのCookieと見なされます。他のユーザーが簡単に埋め込むことができるサイトを作成し、Cookieを機能させる場合は、確実にサイト間で使用できるように設定するか、Cookieを使用せずにフォールバックできるようにする必要があります。
+
+### サイト間での「安全でない」要求
+
+「安全ではない」と言うと少し不安に思われるかもしれませんが、これは状態を変更することを目的とした要求を指します。Webでは、これは主にPOST要求です。`SameSite=Lax`に設定されたCookieは、安全な最上位のナビゲーションで送信されます。たとえば、リンクをクリックして別のサイトに移動します。ただし、POST経由の別のサイトへの`<form>`送信などには、Cookieは含まれません。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="あるページから別のページに送信される要求の図。", width="719", height="382", style="max-width: 35vw;" %} <figcaption>受信要求が「安全な」方法を使用している場合、Cookieが送信されます。</figcaption></figure>
+
+このパターンは、ユーザーをリモートサービスにリダイレクトして、戻る前に何らかの操作を実行する可能性のあるサイトに使用されます。たとえば、サードパーティのIDプロバイダーにリダイレクトします。ユーザーがサイトを離れる前に、[クロスサイトリクエストフォージェリ (CSRF)](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) 攻撃を軽減するために、返される要求でこのトークンをチェックできるように、使い捨てトークンを含むCookieが設定されます。その返り要求がPOST経由で送信される場合、Cookieを`SameSite=None; Secure`に設定する必要があります。
+
+### リモートリソース
+
+ページのリモートリソースは、`<img>`タグ、 `<script>`タグなどから要求ともに送信されるCookieに依存している可能性があります。一般的な使用例には、ピクセルの追跡とコンテンツのパーソナライズが含まれます。
+
+これは、`fetch`または`XMLHttpRequest`によってJavaScriptから開始された要求にも当てはまります。`fetch()`が[`credentials: 'include'`オプションを使用](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included)して呼び出された場合、これらの要求でCookieが想定される可能性があることを示します。`XMLHttpRequest`の場合、`true`に設定されている[`withCredentials`プロパティ](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials)のインスタンスを探します。これは、これらのリクエストでCookieが想定される可能性があることを示します。これらのCookieは、クロスサイト要求に含めるように適切に設定する必要があります。
+
+### WebView内のコンテンツ
+
+プラットフォーム固有のアプリのWebViewはブラウザに基づいているため、同じ制限や問題が当てはまるかどうかをテストする必要があります。Androidでは、WebViewがChromeに基づく場合、新しいデフォルト値はすぐにChrome 84に**適用されません**。ただし、今後は適用される予定です。このため、この点についてまだテストして準備してください。また、Androidでは、直接[CookieManager API](https://developer.android.com/reference/android/webkit/CookieManager)を使用して、プラットフォーム固有のアプリでCookieを設定できます。 ヘッダーまたはJavaScriptで設定されたCookieのように、クロスサイトで使用する計画の場合は、`SameSite=None; Secure`を追加することを検討してください。
+
+## `SameSite`を実装する方法
+
+ファーストパーティのコンテキストでのみ必要なCookieの場合、必要に応じて、`SameSite=Lax`または`SameSite=Strict`に設定することをお勧めします。何もせずにブラウザのデフォルトを適用させることもできますが、ブラウザ間で一貫性のない動作が発生し、各Cookieに対してコンソール警告が発生する可能性があります。
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+サードパーティコンテキストで必要なCookieの場合、必ず`SameSite=None; Secure`に設定する必要があります。`Secure`なしで`None`のみを指定した場合、Cookieは拒否されます。ブラウザ実装では相互に互換性がない差異があるため、次の[互換性がないクライアントの取り扱い](#handling-incompatible-clients)で説明する低減戦略の一部を使用しなければならない場合があります。
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### 互換性がないクライアントの取り扱い
+
+`None`を含み、デフォルトの動作を更新するこれらの変更はまだ比較的新しいため、これらの変更の処理方法に関してブラウザ間で一貫性がありません。現在確認済みの問題については、[chromium.orgの更新ページを](https://www.chromium.org/updates/same-site/incompatible-clients)参照できますが、これが網羅的であるかどうかを判断することはできません。これは理想的ではありませんが、この移行フェーズで採用できる回避策があります。ただし、一般的なルールは、互換性のないクライアントを特別な場合として扱うことです。新しいルールを実装しているブラウザの例外を作成しないでください。
+
+<code>None</code>を含み、デフォルトの動作を更新するこれらの変更はまだ比較的新しいため、これらの変更の処理方法に関してブラウザ間で一貫性がありません。現在確認済みの問題については、<a>chromium.orgの更新ページを</a>参照できますが、これが網羅的であるかどうかを判断することはできません。これは理想的ではありませんが、この移行フェーズで採用できる回避策があります。ただし、一般的なルールは、互換性のないクライアントを特別な場合として扱うことです。新しいルールを実装しているブラウザの例外を作成しないでください。
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+新しい動作を実装するブラウザは`SameSite`値でCookieを設定しますが、他のブラウザではそれが無視されるか、誤って設定される可能性があります。ただし、これらの同じブラウザでは、`3pcookie-legacy` Cookieが設定されます。含まれているCookieを処理するときには、サイトは最初に新しいスタイルのCookieの存在を確認し、見つからない場合はレガシーCookieにフォールバックします。
+
+以下の例は、Node.jsでこの処理を行う方法を示しています。[Expressフレームワーク](https://expressjs.com)とその[cookie-parser](https://www.npmjs.com/package/cookie-parser)ミドルウェアを使用しています。
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // 新しいスタイルCookieを設定
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // レガシーCookieで同じ値を設定
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // 最初に新しいスタイルCookieを確認
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // ない場合はレガシーCookieにフォールバック
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+この方法の欠点は、すべてのブラウザに対応するように冗長Cookieを設定しなければならず、Cookieの設定と読み取りの両方の時点で変更する必要があることです。ただし、この方法では、動作に関係なくすべてのブラウザに対応し、サードパーティCookieが以前と同じように機能し続けることが保証されます。
+
+別の方法として、`Set-Cookie`ヘッダーを送信する時点で、ユーザーエージェント文字列経由でクライアントを検出するように選択することもできます。[互換性のないクライアント](https://www.chromium.org/updates/same-site/incompatible-clients)のリストを参照してから、プラットフォームに適したライブラリ (Node.jsの[ua-parser-js](https://www.npmjs.com/package/ua-parser-js)ライブラリなど) を利用してください。これらの正規表現を自分で記述せずに済むように、ユーザーエージェントの検出を処理するライブラリを見つけることをお勧めします。
+
+この方法の利点は、Cookieを設定する時点で1つの変更を加えるだけで済むことです。ただし、ユーザーエージェントのスニッフィングは本質的に脆弱であり、影響を受けるすべてのユーザーを特定できない可能性があるため、注意が必要です。
+
+{% Aside %}
+
+選択するオプションに関係なく、レガシールートで送信されるトラフィックのレベルをログに記録する方法があることを確認することをお勧めします。これらのレベルがサイトの許容しきい値を下回ったら、この回避策を削除するように通知するリマインダまたはアラートがあることを確認してください。
+
+{% endAside %}
+
+## 言語、ライブラリ、フレームワークでの`SameSite=None`のサポート
+
+大半の言語とライブラリでCookieの`SameSite`属性がサポートされていますが、`SameSite=None`の追加はまだ比較的新しいため、今のところ標準的な動作の一部を回避する必要があるかもしれません。これらについては、<a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">GitHubの`SameSite`サンプルリポジトリ</a>を参照してください。
+
+## ヘルプ
+
+Cookieはいたるところにあり、特にサイト間のユースケースを組み合わせて使用する場合は、Cookieが設定され、使用されている場所がサイトによって完全に監査されていることはめったにありません。問題が発生した場合、初めてその問題が生じた可能性があります。その場合は、遠慮なく次の方法でお問い合わせください。
+
+- [GitHubの`SameSite`サンプルリポジトリ](https://github.com/GoogleChromeLabs/samesite-examples)で問題を登録する。
+- [StackOverflowで「samesite」タグ](https://stackoverflow.com/questions/tagged/samesite)に関する質問をブログに投稿する。
+- Chromiumの動作に関する問題については、 [[SameSitecookies]問題テンプレートを](https://bit.ly/2lJMd5c)でバグを登録する。
+- [`SameSite`更新ページ](https://www.chromium.org/updates/same-site)でChromeの進捗状況をフォローする。
+
+
diff --git a/src/site/content/ja/blog/samesite-cookies-explained/index.md b/src/site/content/ja/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..9e3538a9498
--- /dev/null
+++ b/src/site/content/ja/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,249 @@
+---
+title: SameSite Cookie の説明
+subhead: クロスサイト Cookie を明示的に設定する方法を学習し、サイトを安全に保ちます。
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: SameSite 属性を使用して、ファーストパーティおよびサードパーティでの使用に合わせて Cookie を設定する方法について説明します。SameSite 属性の Lax 値と Strict 値を使用して CSRF 攻撃に対する保護を強化することにより、サイトのセキュリティを高めることができます。また、新しい None 値を指定することにより、クロスサイトでの使用に合わせて Cookie を明示的に設定することができます。
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %}この記事は、Cookie の `SameSite` 属性の変更を扱うシリーズ記事の一部です。
+
+- [SameSite Cookie の説明](/samesite-cookies-explained/)
+- [SameSite Cookie のレシピ](/samesite-cookie-recipes/)
+- [スキームフル Same-Site](/schemeful-samesite){% endAside %}
+
+Cookie は Web サイトに永続的な状態を付与するために利用可能な方法の 1 つです。長い年月をかけてその機能は成長し、進化を続けてきましたが、プラットフォームに問題を引き起こす可能性がある旧来からの問題を残していました。この問題に対処するために、デフォルトの設定がプライバシーをより良く保護するためのものとなるようにブラウザー (Chrome、Firefox、Edge を含む) の動作が変更されています。
+
+それぞれの Cookie は、`key=value` のペアと、その Cookie がいつ、どこで使用されるのかを制御するためのいくつかの属性によって構成されています。これらの属性を使用して有効期限を設定したり、Cookie が HTTPS を介してのみ送信されるように設定を行なったりしたことがすでにおありかもしれません。サーバーは、適切に名付けられた `Set-Cookie` ヘッダーをレスポンスで送信することによって Cookie を設定します。詳細については「[RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1)」でご確認いただくことが可能ですが、ここでも簡単にご説明させていただきます。
+
+たとえばあなたがブログを運営していて、ユーザーに対して "新着情報" のプロモーションを表示させたい場合を想像してみてください。ユーザーはそのプロモーション表示を消すことができ、そのプロモーションはしばらくの間表示されなくなります。こういった設定を Cookie に保存し、1 か月 (260 万秒) で期限切れになるように設定し、HTTPS でのみ送信を行う場合、そのヘッダーは次のようになります。
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="サーバーからブラウザーへとレスポンスで送信される 3 つの Cookie", width="800", height="276", style="max-width: 35vw" %} <figcaption>サーバーは <code>Set-Cookie</code> ヘッダーを使用して Cookie を設定します。</figcaption></figure>
+
+ページの読者がこれらの条件を満たしているページを閲覧した場合、つまり、安全な接続が確立され、Cookie が 1 か月以内に作成されたものである場合、読者のブラウザーはリクエストで次のヘッダーを送信します。
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="1 回のリクエストでブラウザーからサーバーへと送信される 3 つの Cookie", width="800", height="165", style="max-width: 35vw" %} <figcaption>ブラウザーは、<code>Cookie</code> ヘッダーで Cookie を送り返します。</figcaption></figure>
+
+また、`document.cookie` を使用してそのサイトで利用可能な Cookie を JavaScript で追加したり、読み取ったりすることができます。`document.cookie` に代入を行うと、そのキーで Cookie を作成したり、上書きしたりすることができます。たとえば、ブラウザーの JavaScript コンソールで以下のものを試してみてください。
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+`document.cookie` を読み取ると、現在のコンテキストでアクセス可能なすべての Cookie が、それぞれの Cookie がセミコロンで区切られた形式で出力されます。
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="ブラウザー内の Cookie にアクセスする JavaScript", width="600", height="382", style="max-width: 35vw" %} <figcaption>JavaScript は <code>document.cookie</code> を使用して Cookie にアクセスすることができます。</figcaption></figure>
+
+人気のあるサイトで確認してみると、ほとんどのサイトで 3 つ以上の Cookie が設定されていることにお気付きになるはずです。ほとんどの場合、これらの Cookie はそのドメインへのすべてのリクエスト一つ一つで送信されますが、これは多くの意味を持っています。ユーザーにとってアップロードの帯域はダウンロードの帯域よりも制限されている場合が多いため、すべての送信リクエストにかかるオーバーヘッドは Time to First Byte (サーバーの初期応答時間、TTFB) に悪影響を及ぼすことになります。設定するクッキーの数やサイズについては、控えめに設定するようにしましょう。`Max-Age` 属性を利用して、Cookie が必要以上に長く留まらないようにしてください。
+
+## ファーストパーティ Cookie およびサードパーティ Cookie とは、何ですか？
+
+以前閲覧していたサイトに戻ってみると、現在アクセスしているサイトだけでなくさまざまなドメインを対象とした Cookie があることにお気付きになるかもしれません。現在訪問中のサイト (ブラウザーのアドレス バーに表示されているサイト) のドメインに一致する Cookie は、**ファーストパーティ** Cookie と呼ばれ、同様に現在訪問中のサイト以外のドメインからの Cookie は **サードパーティ** Cookie と呼ばれます。これは絶対的な分類ではなく、ユーザーのコンテキストに応じた相対的なものです。同じ Cookie でも、ユーザーがその時点でどのサイトにいるかによってファーストパーティ Cookie であったり、サードパーティ Cookie であったりします。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="同じページ内の異なるリクエストからブラウザに送信される 3 つの Cookie", width="800", height="346", style="max-width: 35vw" %} <figcaption>Cookie は 1 つのページ内にある様々なドメインから送信されてくる可能性があります。</figcaption></figure>
+
+前述した例において、あなたが運営するブログ記事の中に特に素晴らしい猫の写真があり、それが `/blog/img/amazing-cat.png` でホストされているとします。そして、その画像があまりにも素晴らしい画像であるために、他の人物がその人が運営するサイトで直接その画像を使用しているとします。もしもサイトの訪問者があなたのブログを過去に訪問したことがあり、`promo_shown` の Cookie を保持している場合、他者が運営するサイトで `amazing-cat.png` を閲覧すると、その画像へのリクエストで Cookie が**送信されます**。この場合、`promo_shown` が他者が運営するサイトで何かに使用されるわけではないために特に有益性はなく、リクエストにオーバーヘッドを加えるだけのものになってしまっています。
+
+この動作が意図しないものであるとすれば、なぜこのような動作をするのでしょうか？実はこのメカニズムにより、サイトがサードパーティのコンテキストで使用されている場合でもサイトの状態を維持することができるようになるのです。たとえば、YouTube の動画がサイトに埋め込まれている場合、訪問者のプレーヤーには "後で見る" というオプションが表示されます。訪問者がすでに YouTube にサインインしている場合には、そのセッションはサードパーティ Cookie によって埋め込みプレーヤー内で利用できるようになっています。つまり、サインインを促されたり、閲覧しているページから YouTube へと移動させられたりすることもなく "後で見る" ボタンを使用して動画をすぐに保存できるようになっているのです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="3 つの異なるコンテキストで送信されている同じ Cookie", width="800", height="433", style="max-width: 35vw" %} <figcaption>サードパーティ コンテキストの Cookie は、様々なページ訪問において送信されます。</figcaption></figure>
+
+Web の文化的特性の 1 つに、元来オープンであるという傾向が挙げられます。これにより、多くの人々が独自のコンテンツやアプリケーションを作成することが可能となりました。しかしながらその一方で、セキュリティやプライバシーの面での懸念も数多く生じています。クロスサイト リクエスト フォージェリ (CSRF) 攻撃は、誰がリクエストを開始したかに関わらず特定のオリジンに対するリクエストに Cookie が添付されてしまうという動作を悪用しています。たとえば、あなたが `evil.example` にアクセスすると、`your-blog.example` (あなたのブログのドメイン) へのリクエストが誘発され、あなたのブラウザーが関連する Cookie を喜んで添付してしまったりする可能性があります。あなたのブログにおいてこういったリクエストの検証に注意が払われていなかった場合には、`evil.example` が記事の削除や独自コンテンツの追加などのアクションを起こしてしまう可能性があります。
+
+複数のサイトを横断するユーザー アクティビティの追跡に Cookie がどのように使用されているかについては、ユーザーの意識も高まってきています。しかしながら、これまでは Cookie にその意図を明示する方法がありませんでした。`promo_shown` の Cookie はファーストパーティのコンテキストでのみ送信されるべきものですが、別のサイトに埋め込まれることが意図されているウィジェット用のセッション Cookie は、サードパーティのコンテキストにおいてサインイン状態を提供するために意図的に存在しています。
+
+## `SameSite` 属性を使用して Cookie の使用条件を明示する
+
+[RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00) で定義されている `SameSite` 属性の導入により、Cookie の付与をファーストパーティまたは同一サイトのコンテキストに限定するかどうかを宣言できるようになりました。ここでは、"サイト" の意味の正確な理解が役に立ちます。サイトとは、ドメイン サフィックスとその直前にあるドメイン部分の組み合わせです。たとえば、`www.web.dev` ドメインは `web.dev` サイトの一部です。
+
+{% Aside 'key-term' %}
+
+ユーザーが `www.web.dev` を閲覧していて `static.web.dev` に画像をリクエストする場合、これは**同一サイト** リクエストです。
+
+{% endAside %}
+
+[Public Suffix List](https://publicsuffix.org/) がこれを定義し、その中には `.com` のようなトップレベル ドメインだけでなく `github.io` のようなサービスも含まれています。そのため、`your-project.github.io` と `my-project.github.io` を別々のサイトとして見なすことができるようになってます。
+
+{% Aside 'key-term' %}
+
+ユーザーが `your-project.github.io` を閲覧していて `my-project.github.io` に画像をリクエストする場合、これは**クロスサイト** リクエストです。
+
+{% endAside %}
+
+Cookie に `SameSite` 属性を導入すると、この動作を制御するために 3 つの異なる方法を利用できるようになります。属性を指定しないことも可能ですし、`Strict` や `Lax` の値を使用して Cookie の付与を同一サイト リクエストのみに制限することもできます。
+
+`SameSite` 属性を `Strict` に設定すると、Cookie はファーストパーティのコンテキストでのみ送信されるようになります。ユーザー目線の用語を用いて説明すると、Cookie のサイトがブラウザーの URL バーに現在表示されているサイトに一致する場合にのみ、Cookie が送信されます。これは、`promo_shown` の Cookie が次のように設定されている場合に適用されます。
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+ユーザーがあなたのサイトを訪問しているとき、Cookie は意図した通りにリクエストとともに送信されます。しかしながら、別のサイトや友人から届いたメールなどからあなたのサイトへのリンクをたどる場合には、最初のリクエストでは Cookie は送信されません。これは、パスワードの変更や商品の購入など、初回のナビゲーションですぐに利用可能な機能に関連する Cookie を保持している場合には適しているのですが、`promo_shown` に対しては制限が強すぎます。リンクをたどってサイトに流入してきた場合でも、読者はそれぞれの設定が反映されるように Cookie を送信してほしいと考えるかもしれません。
+
+こういった場合には、このようなトップレベル ナビゲーションでの Cookie の送信を許可することができる `SameSite=Lax` が最適です。前述した猫の記事の例に戻り、別のサイトがあなたのコンテンツを参照している場合について考えてみましょう。他のユーザーは、あなたの猫の写真を直接利用していて、あなたのオリジナル記事へのリンクを提供しています。
+
+```html
+<p>この素晴らしい猫を見て！</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>
+  この<a href="https://blog.example/blog/cat.html">記事</a
+  >を読んでみてください。
+</p>
+```
+
+そして、Cookie は次のように設定されています。
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+読者が他のユーザーのブログを閲覧している場合、ブラウザーが `amazing-cat.png` をリクエストしても Cookie は**送信されません**。しかしながら、読者がリンクをたどってあなたのブログの `cat.html` にアクセスする場合、そのリクエストには Cookie が**含まれています**。これらのことから、サイトの表示に影響を与える Cookie には `Lax` が、ユーザーのアクションに関連する Cookie には `Strict` が適していると言えます。
+
+{% Aside 'caution' %}
+
+また、`Strict` と `Lax` のどちらもサイトのセキュリティに関しては完全なソリューションであるとは言えません。Cookie はユーザーのリクエストの一部として送信されるため、他のユーザー入力と同じように扱う必要があります。つまり、入力をサニタイズして検証する必要があるということです。サーバーサイドの秘密情報と思わしきデータの保存に Cookie を使用しないでください。
+
+{% endAside %}
+
+最後に、値を指定しないというオプションについてですが、このオプションはこれまで、すべてのコンテキストでの Cookie の送信を暗黙的に表明する方法でした。そして [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) の最新版のドラフトでは `SameSite=None` という新しい値が導入され、これが明示されるようになりました。つまり、`None` という値を使用することでサードパーティのコンテキストでの Cookie の意図的な送信を明示的に伝えることができるようになったのです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="コンテキストに応じて None、Lax、Strict と表示されている 3 つのクッキー", width="800", height="456", style="max-width: 35vw" %} <figcaption>Cookie のコンテキストを <code>None</code>、<code>Lax</code>、<code>Strict</code> として明示的にマークします。</figcaption></figure>
+
+{% Aside %}
+
+ウィジェット、埋め込みコンテンツ、アフィリエイト プログラム、広告、複数のサイトを横断するサインインなど、他のサイトで利用されるサービスを提供する場合には、意図が明確になるように `None` を使用する必要があります。
+
+{% endAside %}
+
+## SameSite を使用しない場合のデフォルトの動作の変更
+
+`SameSite` 属性は、広くサポートされてはいるものの、残念ながら開発者には広く受け入れられていません。あらゆる場所に Cookie を送信するというオープンなデフォルト動作はすべてのユースケースが動作することを意味していますが、ユーザーを CSRF や意図しない情報漏洩の危険にさらしてしまいます。開発者に意図を伝え、ユーザーにより安全な環境を提供するために、IETF の提案である「[Cookie の漸次的な改善](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00)」では以下 2 つの重要な変更点が提示されています。
+
+- `SameSite` 属性を持たない Cookie は、`SameSite=Lax` として扱われる。
+- `SameSite=None` の Cookie では、安全なコンテキストが必要であることを意味する `Secure` も一緒に指定する必要がある。
+
+Chrome ではバージョン 84 よりこの動作がデフォルトとして実装されています。[Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) では Firefox 69 でテストが可能となっており、将来的にはデフォルトの動作となる予定です。Firefox でこれらの動作をテストするには、[`about:config`](http://kb.mozillazine.org/About:config) を開き、`network.cookie.sameSite.laxByDefault` を設定します。[Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) でもデフォルトの動作が変更される予定です。
+
+{% Aside %}
+
+この記事は、追加のブラウザーがサポートを発表した場合に更新されます。
+
+{% endAside %}
+
+### デフォルト値としての `SameSite=Lax`
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+`SameSite` 属性が指定されていない Cookie を送信すると…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+ブラウザーは `SameSite=Lax` が指定されているものとしてその Cookie を扱います。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+この変更は、より安全なデフォルトの動作の適用を意図して実施されたものですが、ブラウザーによる適用に頼るのではなく、明示的に `SameSite` 属性を設定するのが理想的な方法です。これにより Cookie の意図が明確になり、様々なブラウザーにおいて一貫性のあるユーザー体験を提供できる可能性が高くなります。
+
+{% Aside 'caution' %}
+
+Chrome で適用されるデフォルトの動作は、トップレベル ナビゲーションでの POST リクエストで特定の Cookie の送信が許可されるため、明示的な `SameSite=Lax` よりも若干寛容です。詳細については、「[blink-dev のアナウンス](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ)」を参照してください。これは一時的な緩和を目的としたものであり、クロスサイトの Cookie については `SameSite=None; Secure` を使用するように修正する必要があります。
+
+{% endAside %}
+
+### `SameSite=None` には必ず Secure を指定する
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+`Secure` が指定されていない Cookie の設定は、**拒否されます**。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+`SameSite=None`を`Secure`属性とペアにする必要があります。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Chrome のバージョン 76 以降では `about://flags/#cookies-without-same-site-must-be-secure` を、Firefox のバージョン 69 以降では [`about:config`](http://kb.mozillazine.org/About:config) で `network.cookie.sameSite.noneRequiresSecure` を設定することにより、この動作のテストを行うことができます。
+
+新しい Cookie を設定する場合にはこれを適用し、有効期限が近づいていない場合でも既存の Cookie を積極的に更新することをお勧めします。
+
+{% Aside 'note' %}
+
+運営するサイトがサードパーティ製コンテンツを提供するサービスに依存している場合には、そのサービスが更新されているかどうかをプロバイダーに確認する必要もあります。また、サイトに新しい動作を反映させるために依存関係やスニペットを更新しなければならない場合もあります。
+
+{% endAside %}
+
+これらの変更は、いずれも旧バージョンの `SameSite` 属性を正しく実装しているか、あるいは全くサポートしていないブラウザーに対する後方互換性を持っています。これらの変更を Cookie に適用することにより、ブラウザーのデフォルト動作に頼ることなく意図的に使用方法を明示することができます。そして、クライアントが `SameSite=None` をまだ認識していない場合にはこれは無視され、この属性が設定されていないものとして処理されます。
+
+{% Aside 'warning' %}
+
+Chrome、Safari、UC ブラウザーを含む数多くのブラウザーの旧バージョンは新しい `None` 値との互換性を持っておらず、Cookie を無視したり、制限したりしてしまう可能性があります。この動作は現在のバージョンでは修正されていますが、この動作の影響を受けるユーザーの割合がどの程度になるのか、トラフィックを確認して把握する必要があります。詳細については、Chromium サイトの「[既知の非互換クライアント](https://www.chromium.org/updates/same-site/incompatible-clients)」のリストをご覧ください。
+
+{% endAside %}
+
+## `SameSite` Cookie のレシピ
+
+前述した `SameSite=None` についての変更やブラウザーの動作の違いを上手に処理するための Cookie の更新方法の詳細については、次の記事「[SameSite Cookie のレシピ](/samesite-cookie-recipes)」を参照してください。
+
+_Lily Chen、Malte Ubl、Mike West、Rob Dodson、Tom Steiner、Vivek Sekhar のご意見およびご協力に、心より感謝申し上げます。_
+
+_クッキーのヒーロー画像の提供: [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) の [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/ja/blog/schemeful-samesite/index.md b/src/site/content/ja/blog/schemeful-samesite/index.md
new file mode 100644
index 00000000000..a473635ab85
--- /dev/null
+++ b/src/site/content/ja/blog/schemeful-samesite/index.md
@@ -0,0 +1,240 @@
+---
+layout: post
+title: スキームフル Same-Site
+subhead: "「Same-Site」の定義は、URL スキームを含めるように進化しているため、サイトの HTTP バージョンと HTTPS バージョン間のリンクはクロスサイトリクエストとして考慮されるようになっています。できる限り問題を回避できるようにデフォルトで HTTPS にアップグレードするか、どのような SameSite 属性が必要であるかに関する詳細をお読みください。"
+description: "「Same-Site」の定義は、URL スキームを含めるように進化しているため、サイトの HTTP バージョンと HTTPS バージョン間のリンクはクロスサイトリクエストとして考慮されるようになっています。できる限り問題を回避できるようにデフォルトで HTTPS にアップグレードするか、どのような SameSite 属性が必要であるかに関する詳細をお読みください。"
+authors:
+  - bingler
+  - rowan_m
+date: 2020-11-20
+hero: image/admin/UMxBPy0AKAfbzxwgTroV.jpg
+thumbnail: image/admin/3J33n1o98vnkO6fdDFwP.jpg
+alt: クッキーを載せた 2 枚の皿。皿は HTTP と HTTPS の異なるスキームを、クッキーは Cookie を表している。
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} この記事は、`SameSite` Cookie 属性の変更に関する連載の一部です。
+
+- [SameSite Cookie の説明](/samesite-cookies-explained/)
+- [SameSite Cookie のレシピ](/samesite-cookie-recipes/)
+- [スキームフル Same-Site](/schemeful-samesite){% endAside %}
+
+[スキームフル Same-Site](https://mikewest.github.io/cookie-incrementalism/draft-west-cookie-incrementalism.html#rfc.section.3.3) は、単なる登録可能なドメインからスキームと登録可能なドメインへと（Web）サイトの定義を変更しています。詳細と例については、「[「same-site」と「same-origin」を理解する](/same-site-same-origin/#%22schemeful-same-site%22)」をご覧ください。
+
+{% Aside 'key-term' %} つまり、**http**://website.example のようにセキュリティで保護されていない HTTP バージョンのサイトと **https**://website.example のようにセキュリティで保護された HTTPS バージョンのサイトは、互いに**クロスサイト**とみなされるということです。{% endAside %}
+
+嬉しいのは、Web サイトがすでに完全に HTTPS にアップグレードされているのであれば、何も心配する必要はないということです。そのままで構いません。
+
+Web サイトをまだ完全にアップグレードしていない場合は、これを優先事項する必要があります。ただし、サイト訪問者が HTTP と HTTPS の間を行き来する場合がある場合は、それらの一般的なシナリオと、関連する `SameSite` Cookie の動作の概要を以下に示しています。
+
+{% Aside 'warning' %} 長期的には、[サードパーティ Cookie のサポート完全に失くして](https://blog.chromium.org/2020/10/progress-on-privacy-sandbox-and.html)、プライバシーを保護するほかの技術に置き換えることが計画されています。完全な HTTPS に移行するまでの一時的なソリューションとしては、Cookie に `SameSite=None; Secure` を設定してスキーム間で Cookie を送信できるようにすることに限ることをお勧めします。 {% endAside %}
+
+これらの変更を有効にして、Chrome と Firefox の両方でテストできます。
+
+- Chrome 86 で `about://flags/#schemeful-same-site` を有効にします。進捗状況は [Chrome ステータスページ](https://chromestatus.com/feature/5096179480133632)で追跡してください。
+- Firefox 79 の `about:config` で `network.cookie.sameSite.schemeful` を `true` に設定します。進捗状況は [Bugzilla の問題](https://bugzilla.mozilla.org/show_bug.cgi?id=1651119)で追跡してください。
+
+Cookie のデフォルトを `SameSite=Lax` に変更した主な理由の 1 つは、[クロスサイトリクエストフォージェリ（CSRF）](https://developer.mozilla.org/docs/Glossary/CSRF)から保護することでした。ただし、セキュリティで保護されていない HTTP トラフィックは、ネットワーク攻撃者が 同じサイトのセキュリティで保護された HTTPS バージョンで Cookie を使用できるように、その Cookie を改ざんする機会を与えています。スキーム間にクロスサイトの境界をさらに作成することで、これらの攻撃に対する防御をさらに高めることができます。
+
+## 一般的なクロススキームのシナリオ
+
+{% Aside 'key-term' %} すべての URL に site.example のように同一の登録可能なドメインがあっても、**http**://site.example と **https**://site.example のようにスキームが異なるような以下の例では、これらのドメインは互いに**クロススキーム**と呼ばれます。{% endAside %}
+
+### ナビゲーション
+
+クロススキームバージョンの Web サイト間を移動する際（たとえば、**http**://site.example から **https**://site.example にリンクしている場合）、以前は `SameSite=Strict` Cookie を送信することができました。現在では、これはクロスサイトナビゲーションとして扱われるようになっており、つまり `SameSite=Strict` Cookie はブロックされるようになっています。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yDViqKg9eeEeAEiCNqe4.png", alt="セキュリティで保護されていない HTTP バー所jんのサイトからセキュリティで保護された HTTPS バージョンのサイトへのリンクをたどることでトリガーされるクロススキームナビゲーション。SameSite=Strict Cookie はブロックされ、安全な Cookie である  SameSite=Lax と SameSite=None が許可されている。", width="800", height="342" %} <figcaption> HTTP から HTTPS へのクロススキームナビゲーション。 </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP→HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS→HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ブロック</td>
+   <td>⛔ブロック</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>✓許可</td>
+   <td>✓許可</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓許可</td>
+   <td>⛔ブロック</td>
+  </tr>
+</table>
+
+### サブリソースの読み込み
+
+{% Aside 'warning' %} すべての主要なブラウザは、スクリプトや iframe などの[アクティブな混合コンテンツ](https://developer.mozilla.org/docs/Web/Security/Mixed_content)をブロックします。また、[Chrome](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) や [Firefox](https://groups.google.com/g/mozilla.dev.platform/c/F163Jz32oYY) などのブラウザは、パッシブ混合コンテンツのアップグレードまたはブロックに取り組んでいます。 {% endAside %}
+
+ここで行った変更は、完全な HTTPS へのアップグレード作業中の一時的な修正と見なす必要があります。
+
+サブリソースの例には、XHR または Fetch で作成された画像、iframe、ネットワークリクエストが含まれます。
+
+クロススキームサブリソースをページに読み込むすると、以前は `SameSite=Strict` または`SameSite=Lax` Cookie を送信するか否かを設定できました。現在、これは他のサードパーティまたはクロスサイトのサブリソースと同じように処理されるようになっているため、`SameSite=Strict` または `SameSite=Lax` Cookie はブロックされます。
+
+さらに、ブラウザがセキュリティで保護されていないスキームからのリソースをセキュリティで保護されたページに読み込むことを許可している場合でも、サードパーティまたはクロスサイトの Cookie には `Secure` が必要なため、これらのリクエストではすべての Cookie がブロックされます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GgR6Yln1f9JGkt04exRC.png", alt="セキュリティで保護されていない HTTP バージョンのサイトに含まれているセキュリティで保護された HTTPS バージョンのサイトのリソースによって生じるクロススキームサブリソース。SameSite= Strict および SameSite = Lax Cookie がブロックされ、SameSite = None; Secure Cookie が許可される。", width="800", height="285" %} <figcaption> HTTPS を通じてクロススキームサブリソースを含む HTTP ページ。 </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP→HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS→HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ブロック</td>
+   <td>⛔ブロック</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ブロック</td>
+   <td>⛔ブロック</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓許可</td>
+   <td>⛔ブロック</td>
+  </tr>
+</table>
+
+### フォームの POST 送信
+
+クロススキームバージョンの Web サイト間で POST 送信を行うと、以前は `SameSite=Lax` または `SameSite=Strict` に設定された Cookie を送信できました。現在では、これはクロスサイト POST 送信として扱われており、`SameSite=None` の Cookie のみを送信できるようになっています。このシナリオは、デフォルトでセキュリティで保護されていないバージョンを提供しているサイトで発生する可能性がありますが、サインインまたはチェックアウトフォームの送信時にユーザーをセキュリティで保護されたバージョンにアップグレードするサイトで使用されている可能性があります。
+
+サブリソースと同様に、リクエストがセキュリティで保護された HTTPS から セキュリティで保護されていない HTTP に移行する場合、サードパーティまたはクロスサイトの Cookie には `Secure` が必要であるため、これらのリクエストではすべての Cookie がブロックされます。
+
+{% Aside 'warning' %} ここでの最善の解決策は、フォームページと宛先の両方が HTTPS などの安全な接続上にあることを確認することです。これは、ユーザーがフォームに機密情報を入力する場合に特に重要となります。 {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ud9LkDeGJUWHObifD718.png", alt="セキュリティで保護されていない HTTP バージョンのサイトにあるフォームがセキュリティで保護された HTTPS バージョンに送信されることで生じるクロススキームフォーム送信。SameSite=Strict と SameSite=Lax Cookie がブロックされ、SameSite=None; Secure Cookie が許可される。", width="800", height="376" %} <figcaption> HTTP から HTTPS へのクロススキームフォーム送信。 </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP→HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS→HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ブロック</td>
+   <td>⛔ブロック</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ブロック</td>
+   <td>⛔ブロック</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓許可</td>
+   <td>⛔ブロック</td>
+  </tr>
+</table>
+
+## 自分のサイトをテストするには？
+
+Chrome と Firefox で開発者向けツールとメッセージングを使用できます。
+
+Chrome 86 では、スキームフル Same-Site 問題は、[DevTools の［Issue］タブ](https://developer.chrome.com/docs/devtools/issues/)に含まれます。サイトでは以下の問題がハイライトされる場合があります。
+
+ナビゲーションの問題:
+
+- 「Migrate entirely to HTTPS to continue having cookies sent on same-site requests」- Chrome の将来のバージョンで Cookie が**ブロックされる**という警告です。
+- 「Migrate entirely to HTTPS to have cookies sent on same-site requests」- Cookie が**ブロックされている**という警告です。
+
+サブリソースの読み込みの問題:
+
+- 「Migrate entirely to HTTPS to continue having cookies sent to same-site subresources」または「Migrate entirely to HTTPS to continue allowing cookies to be set by same-site subresources」- Chrome の将来のバージョンで Cookie が**ブロックされる**という警告です。
+- 「Migrate entirely to HTTPS to have cookies sent to same-site subresources」または「Migrate entirely to HTTPS to allow cookies to be set by same-site subresources」- Cookie が**ブロックされている**という警告です。後者の警告は、フォームを POST 送信するときにも表示される可能性があります。
+
+詳細については、「[スキームフル Same-Site のテストとデバッグのヒント](https://www.chromium.org/updates/schemeful-same-site/testing-and-debugging-tips-for-schemeful-same-site)」をご覧ください。
+
+Firefox 79 の `about:config` で、`network.cookie.sameSite.schemeful` を `true` に設定すると、コンソールにスキームフル Same-Site の問題に関するメッセージが表示されます。サイトで以下のようなメッセージが表示される場合があります。
+
+- 「 Cookie `cookie_name` **will be soon** treated as cross-site cookie against `http://site.example/` because the scheme does not match.」
+- 「Cookie `cookie_name` **has been** treated as cross-site against `http://site.example/` because the scheme does not match.」
+
+## よくある質問
+
+### 私のサイトはすでに完全に HTTPSで提供されていますが、ブラウザの DevTools で問題が表示されているのはなぜですか？
+
+一部のリンクとサブリソースが依然としてセキュリティで保護されていない URL を指している可能性があります。
+
+この問題を修正する 1 つの方法は、[HTTP Strict-Transport-Security](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)（HSTS）と `includeSubDomain` ディレクティブを使用することです。HSTS + `includeSubDomain` を使用すると、ページの 1 つに誤ってセキュリティで保護されていないリンクが含まれている場合でも、ブラウザは代わりにセキュリティで保護されたバージョンを自動的に使用します。
+
+### HTTPS にアップグレードできない場合は？
+
+ユーザーを保護するためにサイトを完全に HTTPS にアップグレードすることを強くお勧めしますが、自分でアップグレードできない場合は、ホスティングプロバイダーに相談して、そのオプションを提供できるかどうかを確認することをお勧めします。セルフホストの場合は、[Let's Encrypt](https://letsencrypt.org/) に証明書をインストールして構成するためのツールが多数用意されています。また、HTTPS 接続を提供できる CDN またはその他のプロキシの背後にサイトを移動することを調べることもできます。
+
+それでも不可能な場合は、影響を受ける Cookie の `SameSite` 保護を緩和させてみてください。
+
+- `SameSite=Strict` Cookie のみがブロックされている場合は、保護を `Lax` に下げることができます。
+- `Strict` と `Lax` の両方がブロックされており、Cookie が安全な URL に送信されている（またはそこから設定されている）場合は、保護を `None` に下げることができます。
+    - Cookie を送信する（または Cookie を設定する）URL が安全でない場合、この回避策は**失敗します**。これは、`SameSite=None` に `Secure` 属性が必要であるためです。つまり、これらの Cookie は、安全でない接続を介して送信または設定されない可能性があります。この場合、サイトが HTTPS にアップグレードされるまで、その Cookie にアクセスすることはできません。
+    - 最終的にサードパーティの Cookie は徐々に完全に廃止されるため、これは一時的な措置であることを忘れないでください。
+
+### `SameSite` 属性を指定していない場合、Cookie にどのように影響しますか？
+
+`SameSite` 属性のない Cookie は、 `SameSite=Lax` を指定しているかのように扱われ、同じクロススキームの動作がこれらの Cookie にも適用されます。安全でないメソッドに対する一時的な例外が引き続き適用されることに注意してください。詳細については、<a href="https://www.chromium.org/updates/same-site/faq" data-md-type="link">Cromium `SameSite` FAQ の「Lax + POST の緩和」</a>をご覧ください。
+
+### WebSocket はどのような影響を受けますか？
+
+WebSocket 接続は、ページと同じセキュリティ設定である場合に、Same-Site と見なされます。
+
+Same-Site（同一サイト）:
+
+- `https://` からの `wss://` 接続
+- `http://` からの `ws://` 接続
+
+クロスサイト:
+
+- `http://` からの `wss://` 接続
+- `https://` からの `ws://` 接続
+
+*写真提供: [Julissa Capdevilla](https://unsplash.com/photos/wNjgWrEXAL0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)（[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)）*
diff --git a/src/site/content/ja/blog/storage-for-the-web/index.md b/src/site/content/ja/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..f46b542c7e7
--- /dev/null
+++ b/src/site/content/ja/blog/storage-for-the-web/index.md
@@ -0,0 +1,162 @@
+---
+title: ウェブ用ストレージ
+subhead: ブラウザにデータを保存するための手段はたくさんあります。あなたのニーズに一番合ったものを選びましょう。
+authors:
+  - petelepage
+description: ブラウザにデータを保存するための手段はたくさんあります。あなたのニーズに一番合ったものを選びましょう。
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: 積み重なった輸送コンテナ
+feedback:
+  - api
+---
+
+外出先では、インターネット接続が不安定であったり、存在しなかったりします。オフラインサポートと信頼性の高いパフォーマンスが[プログレッシブウェブアプリ](/progressive-web-apps/)の一般的な機能であるのはそのためです。たとえワイヤレス環境が完璧であっても、キャッシュやその他のストレージ技術を賢明に活用すれば、ユーザーエクスペリエンスを大幅に向上させることができます。静的アプリケーションリソース (HTML、JavaScript、CSS、画像など) やデータ (ユーザーデータ、ニュース記事など) をキャッシュする方法はいくつかあります。しかし、最適なソリューションはどれか？どれだけのデータを保管できるのか？削除されないようにするにはどうすればいいか？といった疑問が残ります。
+
+## 何を使うべきか？{: #recommendation }
+
+以下は、リソースを保管するのに便利なおすすめの手段です。
+
+- アプリとファイルベースのコンテンツを読み込むために必要なネットワークリソースについては、[**Cache Storage API**](/cache-api-quick-guide/) ([サービスワーカー](https://developer.chrome.com/docs/workbox/service-worker-overview/)の一部)を使用する。
+- その他のデータについては、[**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)を使用する ([promiseラッパー付き](https://www.npmjs.com/package/idb))。
+
+IndexedDBとCacheStorage APIは、最新のすべてのブラウザーでサポートされています。両方とも非同期であり、メインスレッドをブロックしません。これらは、`window`オブジェクト、ウェブワーカー、およびサービスワーカーからアクセスできるため、コード内の好きな場所から簡単に使用できます。
+
+## 他のストレージメカニズムは？ {: #other }
+
+ブラウザには利用できるストレージメカニズムが他にもいくつかありますが、使用制限があるほか、重大なパフォーマンスの問題を引き起こす可能性があります。
+
+[SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage)はタブ固有のもので、スコープはタブの有効期間に設定されています。IndexedDBのキーなど、セッション特有のわずかな情報を保管する場合に便利です。同期して働き、メインスレッドをブロックするため、使用する場合は注意が必要です。データ量は約5MBに制限されており、文字列しか含めることができません。タブ固有のものであるため、ウェブワーカーやサービスワーカーからはアクセスできません。
+
+[LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage)は同期して働き、メインスレッドをブロックするため、使用を避けるべきでしょう。データ量は、約5MBに制限されており、文字列しか含めることができません。ウェブワーカーやサービスワーカーからはアクセスできません。
+
+[クッキー](https://developer.mozilla.org/docs/Web/HTTP/Cookies)は使い道がいくつもありますが、ストレージとして使用するべきではありません。CookieはすべてのHTTPリクエストで送信されるため、少量以上のデータを保管すると、すべてのウェブリクエストのサイズを大幅に増加させてしまいます。同期して働くものであるため、ウェブワーカーからはアクセスできません。LocalStorageやSessionStorageと同じく、Cookieも文字列に制限されています。
+
+[File System API](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction)とFileWriter APIは、サンドボックス化されたファイルシステムに対してファイルの読み書きをするためのメソッドを提供します。非同期に働くものですが、[Chromiumベースのブラウザでしか利用できない](https://caniuse.com/#feat=filesystem)ため、おすすめしていません。
+
+[File System Access API](/file-system-access/)は、ユーザーがローカルファイルシステム上のファイルを簡単に読み取ったり、編集したりできるように設計されています。ユーザーは、ページがローカルファイルの読み書きを行う前にアクセス許可を付与する必要があるほか、アクセス許可はセッションをまたいで保持されません。
+
+WebSQLは、**使用を避けるべきです**。また、現在使用されている分は、IndexedDBに移行するべきです。サポートは、ほぼすべての主要ブラウザから[削除されています](https://caniuse.com/#feat=sql-storage)。W3Cは、2010年に[Web SQLの仕様の管理を終了](https://www.w3.org/TR/webdatabase/)し、今後更新する予定もありません。
+
+Application Cacheは**使用しないでください**。また、現在使用されている分は、サービスワーカーとCache APIに移行するべきです。[非推奨](https://developer.mozilla.org/docs/Web/API/Window/applicationCache)とされており、将来的にはブラウザからサポートが除去される予定です。
+
+## どれくらいのデータ量を保管できますか？{: #how-much }
+
+一言で言えば、**相当な量**を保管できます。少なくとも数百メガバイト。数百ギガバイトを超える可能性もあります。ブラウザの実装はさまざまですが、使用可能なストレージの量は、通常、デバイスで使用可能なストレージの量に基づいています。
+
+- Chromeでは、ブラウザは合計ディスク容量の最大80％を使用できます。オリジンは、合計ディスク容量の最大60％を使用できます。 [StorageManager API](#check)を使用すれば、使用可能な最大クォータを判断できます。他のChromiumベースのブラウザでは、より多くのストレージを使用できる場合があります。Chromeの実装の詳細については。[PR＃3896](https://github.com/GoogleChrome/web.dev/pull/3896)を参照してください。
+- Internet Explorer 10以降は最大250MBを保存できます。10MB以上が使用された場合は、それについてプロンプトが表示されます。
+- Firefoxは、ブラウザが空きディスク容量の50％までを使用できるようにしています。[eTLD + 1](https://godoc.org/golang.org/x/net/publicsuffix)グループ　(例: `example.com` 、 `www.example.com` 、 `foo.bar.example.com`)は、[最大2GBまで使用できます](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits)。[StorageManager API](#check-available)を使用すれば、残りの使用可能なスペースを判断できます。
+- Safari (デスクトップとモバイルの両方) は、約1GBの使用を許可しているようです。制限に達すると、Safariはユーザーにプロンプトを表示し、200MBずつ制限を増やしていきます。これに関する公式のドキュメントは見つかりませんでした。
+    - モバイル版Safariのホーム画面にPWAが追加されると、新しいストレージコンテナが作成され、PWAとモバイル版Safariの間では何も共有されなくなるようです。インストールされているPWAのクォータに達した際にストレージの追加を要求する手段は見当たりません。
+
+以前は、サイトが保存できるデータのしきい値を超えた場合、ブラウザはもっと多くのデータを使用する許可をユーザーに求めていました。たとえば、オリジンが50MB以上のデータを使用した場合、ブラウザは最大で100MBのデータを保存する許可をユーザーに求め、その後は50MBごとに再び要求していました。
+
+現在、最新のブラウザの多くは、ユーザーにプロンプトを表示せず、サイトが割り当てられたクォータまで使用することを許可しています。例外はSafariで、750MBでプロンプトを出し、最大1.1GBを保存する許可を求えます。オリジンが割り当てられた以上のクォータを使用しようとすると、それ以降のデータの書き込みは失敗します。
+
+## 利用可能なストレージの量を確認するにはどうすればよいですか？ {: #check }
+
+[多くのブラウザー](https://caniuse.com/#feat=mdn-api_storagemanager)では、[StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate)を使って、オリジンで利用可能なストレージの量とオリジンが使用しているストレージの量を判断することができます。IndexedDBとCacheAPIによって使用された合計バイト数を報告してくれるため、利用可能な残りのストレージ容量を概算できます。
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Number of bytes used.
+  // quota.quota -> Maximum number of bytes available.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`You've used ${percentageUsed}% of the available storage.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`You can write up to ${remaining} more bytes.`);
+}
+```
+
+[StorageManager](https://caniuse.com/#feat=mdn-api_storagemanager)は、まだすべてのブラウザーに実装されていないため、使用する前に機能を検出する必要があります。利用可能な場合でも、クォータ超過エラーをキャッチする必要があります (以下を参照)。場合によっては、使用可能なクォータが実際に使用可能なストレージの量を超える可能性があります。
+
+{% Aside %}他のChromiumベースのブラウザは、使用可能なクォータを報告するときに空き容量を考慮に入れる場合があります。 Chromeはこうした報告をせず、常に実際のディスクサイズの60％を報告します。これは、保存されているクロスオリジンリソースのサイズを決定する機能を減らすのに役立ちます。{% endAside %}
+
+### 検査
+
+開発中は、ブラウザのDevToolsを使用すれば、さまざまなストレージタイプを検査し、保存されているすべてのデータを簡単に消去できます。
+
+Chrome 88に新機能が追加され、ストレージウィンドウでサイトのストレージクォータを上書きできるようになりました。この機能により、さまざまなデバイスをシミュレートし、ディスクの可用性が低いシナリオでアプリの動作をテストすることができます。**[Application]** (アプリケーション) 、**[Storage]** (ストレージ) の順に移動し、[**Simulate custom storage quota (カスタムストレージクォータをシミュレートする)** のチェックボックスにチェックを入れます。そして、有効な数値を入力してストレージクォータをシミュレートします。
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="DevTools Storage ウィンドウ。", width="800", height="567"%}
+
+この記事の執筆に取り組んでいる間、私は[シンプルなツール](https://storage-quota.glitch.me/)を作成し、できるだけ多くのストレージをすばやく使用しようと試みました。さまざまなストレージメカニズムを試し、クォータを使い尽くすと何が起こりかを簡単にすばやく調べることができます。
+
+## クォータの超過に対処する方法とは？ {: #over-quota }
+
+クォータを超えてしまった場合はどうすればよいでしょう。それよりも大切なのは、`QuotaExceededError`であろうと他のエラーであろうと、書き込みエラーは常にキャッチして処理するべきだということです。次に、アプリのデザインに応じて、その対処方法を決定します。たとえば、長期間アクセスされていないコンテンツを削除したり、サイズに基づいてデータを削除したり、ユーザーが削除したいものを選択する手段を提供したりします。
+
+利用可能なクォータを超えると、IndexedDBとCache APIの両方が`DOMError`の`QuotaExceededError`という名前のエラーを投げます。
+
+### IndexedDB
+
+オリジンがクォータを超えた場合、IndexedDBへの書き込みは失敗します。トランザクションの`onabort()`ハンドラーが呼び出され、イベントが渡されます。イベントには、エラープロパティに`DOMException`を含めます。エラーの`name`を確認すると、 `QuotaExceededError`が返されます。
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+};
+```
+
+### Cache API
+
+オリジンがクォータを超えた場合にCache APIに書き込もうとすれば、`QuotaExceededError` `DOMException`が投げられ、拒否されます。
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+}
+```
+
+## 削除はどのような仕組みになっているのか？{: #eviction }
+
+ウェブストレージは、「ベストエフォート型」と「パーシステント型」という2種類のバケットに分類されます。ベストエフォートとは、ユーザーの邪魔をせずにブラウザでストレージを消去できることを意味しますが、長期データや重大なデータに対する耐久性は低くなります。ストレージの容量が少ない場合、パーシステント型 (永続的) のストレージは自動的に消去されません。このストレージを消去するには、ブラウザの設定から手動で行う必要があります。
+
+サイトのデータ (IndexedDB、Cache APIなどを含む) は、デフォルトでは、ベストエフォート型に分類されます。つまり、サイトが [パーシステント型のストレージを要求](/persistent-storage/)していない限り、ブラウザは、独自の判断でサイトのデータを削除します (デバイスのストレージ容量が少ない場合など)。
+
+ベストエフォート型における削除のポリシーは以下のとおりです。
+
+- Chromiumベースのブラウザは、ブラウザの容量が不足すると、データの削除を開始します。最近最も使用頻度の低いデータから順に削除していき、ブラウザによるデータの使用量が制限以内に収まるまで続けます。
+- Internet Explorer 10以降はデータを削除しませんが、オリジンによるそれ以上の書き込みは許可されません。
+- Firefoxは、使用可能なディスクスペースがいっぱいになるとデータの削除を開始します。最近最も使用頻度の低いオリジンから順に削除していき、ブラウザによるデータの使用量が制限以内に収まるまで続けます。
+- Safariはこれまでデータを削除していませんでしたが、最近、すべての書き込み可能なストレージに対して7日間の上限を設けています (以下を参照)。
+
+iOSとiPadOS 13.4およびmacOSのSafari13.1からは、IndexedDB、サービスワーカー登録、Cache APIを含む、スクリプトの書き込みが可能なすべてのストレージに7日間の上限が設けられています。これは、Safariが使用された後に、7日間経過してもユーザーがサイトを操作しない場合、Safariはすべてのコンテンツをキャッシュから削除することを意味します。この削除ポリシーは、ホーム画面に追加された**インストール済みのPWAには適用されません**。完全な詳細については、[Full Third-Party Cookie Blocking and More](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)と題したWebKitブログを参照してください。
+
+{% Aside %}重要なユーザーデータやアプリケーションデータを保護できるように、[パーシステント型ストレージ](/persistent-storage/)をリクエストすることができます。{% endAside %}
+
+## ボーナス：IndexedDBのラッパーを使用する理由
+
+IndexedDBは低レベルのAPIであり、使用する前に細かいセットアップが必要です。単純なデータを保存する場合は特に苦労するかもしれません。このAPIは、最新のPromiseベースのAPIとは異なり、イベントベースのAPIです。IndexedDBの[idb](https://www.npmjs.com/package/idb)のようなPromiseラッパーは、強力な機能を一部非表示にしますが、IndexedDBライブラリに付属する複雑な機構 (トランザクション、スキーマのバージョン管理など) を非表示にすることは、さらに重要な点であると言えます。
+
+## 結論
+
+ストレージに制限があり、ユーザーにもっと多くのデータを保存するよう促すというのはもう過去の話です。サイトは、実行に必要なすべてのリソースとデータを効果的に保存できます。 [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate)を使用すると、使用可能な量と使用した量を割り出せます。また、[パーシステント型ストレージ](/persistent-storage/)を使用すれば、ユーザーが削除しない限り、データが削除されることはありません。
+
+### 他のリソース
+
+- [IndexedDBのベストプラクティス](/indexeddb-best-practices/)
+- [ChromeWebストレージとクォータの概念](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### 関係者への感謝の言葉
+
+本記事のレビューを担当してくれた Jarryd Goodman、Phil Walton、キタムラ・エイジ、Daniel Murphy、Darwin Huang、Josh Bell、Marijn Kruisselbrink、Victor Costan、そして本記事のベースとなっている元の記事の執筆作業を行った Eiji Kitamura、Addy Osmani、Marc Cohen に感謝いたします。キタムラさんは、現在の動作を検証するのに役立つ Browser Storage Abuser という便利なツールを制作してくれました。可能な限りのデータを保存し、ブラウザーの制限を割り出すことができる優れものです。Safari のストレージ制限を詳しく調べてくれた Francois Beaufort にも感謝いたします。
+
+ヒーロー画像は、[Unsplash](https://unsplash.com/photos/uBe2mknURG4) の GuillaumeBolduc 氏が提供してくれました。
diff --git a/src/site/content/ja/blog/text-fragments/index.md b/src/site/content/ja/blog/text-fragments/index.md
new file mode 100644
index 00000000000..14c59491824
--- /dev/null
+++ b/src/site/content/ja/blog/text-fragments/index.md
@@ -0,0 +1,318 @@
+---
+title: 'これは人類最初の試みとして、驚異に満ちたリンクの物語である: テキストフラグメント'
+subhead: |2-
+
+  テキストフラグメントを使用すると、URLフラグメントでテキストスニペットを指定できます。
+  このようなテキストフラグメントを含むURLに移動する場合、ブラウザはそれを強調したりユーザーの注意を引いたりすることができます。
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: |2-
+
+  テキストフラグメントを使用すると、URLフラグメントでテキストスニペットを指定できます。
+  このようなテキストフラグメントを含むURLに移動する場合、ブラウザはそれを強調したりユーザーの注意を引いたりすることができます。
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## フラグメント識別子
+
+Chrome80は大きなリリースでした。これには、[WebワーカーのECMAScriptモジュール](/module-workers/)、 [Null合体](https://v8.dev/features/nullish-coalescing)、[オプションのチェーン](https://v8.dev/features/optional-chaining)など、非常に期待されている機能が多数含まれていました。このリリースは、いつものように、Chromiumブログの[ブログ記事](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)を通じて発表されました。下のスクリーンショットはそのブログ記事の抜粋です。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %} <figcaption><code>id</code>属性を持つ要素の周りに赤いボックスが付いたChromiumのブログ記事。</figcaption></figure>
+
+すべての赤いボックスが何を意味するのかを考えているのではないでしょうか。これらは、DevToolsで次のスニペットを実行した結果です。`id`属性を持つすべての要素が強調表示されています。
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+[フラグメント識別子](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)のお陰で、赤いボックスで強調表示された要素にディープリンクを作成することができます。これは、後で、ページのURLの[ハッシュ](https://developer.mozilla.org/docs/Web/API/URL/hash)で使用できるようになります。横にある「*[プロダクトフォーラム](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)にフィードバックを送信*」ボックスにディープリンクを作成するとした場合、手動でURL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#HTML1</mark></code></a>とすることで作成することができます。DevToolsの要素パネルに表示されているとおり、対象の要素には`id`属性と値`HTML1`があります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %} <figcaption>要素の<code>id</code>を表示するDevTools。</figcaption></figure>
+
+このURLをJavaScriptの`URL()`コンストラクターで解析すると、さまざまなコンポーネントが表示されます。値が`#HTML1`を持つ`hash`プロパティに注目してください。
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Creates a new `URL` object
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+ただし、DevToolsを開かなければ要素の`id`を見つけられないということは、ブログ記事の作成者がページのこの特定のセクションにリンクする必要があることを示す可能性があります。
+
+`id`を使わずに何かにリンクしたい場合はどうなるでしょうか。*ECMAScript Modules in Web Workers*ヘッダーにリンクするとしましょう。下のスクリーンショットでわかるように、問題の`<h1>`には`id`属性がありません。つまり、この見出しにリンクする方法はないということです。テキストフラグメントを使用すると、この問題を解決できます。
+
+<figure>% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption><code>id</code>のない見出しを表示するDevTools。</figcaption></figure>
+
+## テキストフラグメント
+
+[テキストフラグメント](https://wicg.github.io/ScrollToTextFragment/)の提案は、URLハッシュにテキストスニペットを指定するためのサポートを追加します。このようなテキストフラグメントを含むURLに移動する場合、ユーザーエージェントはそれを強調したり、ユーザーの注意を引くことができます。
+
+### ブラウザの互換性
+
+テキストフラグメント機能は、バージョン80以降のChromiumベースのブラウザでサポートされています。これを書いている時点では、SafariとFirefoxはこの機能を実装する意図を公に示していません。SafariとFirefoxのディスカッションへのポインタは、[関連リンク](#related-links)を参照してください。
+
+{% Aside 'success' %}これらのリンクは、Twitterなどの一部の一般的なサービスが使用する[クライアント側のリダイレクト](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections)を介して配信される場合には機能しませんでした。この問題は[crbug.com/1055455](https://crbug.com/1055455)として追跡されていましたが、現在では修正されています。通常の[HTTPリダイレクト](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle)は常に正常に機能していました。 {% endAside %}
+
+[セキュリティ](#security)上の理由から、この機能ではリンクを[`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener)コンテキストで開く必要があります。したがって、 `<a>`アンカーマークアップに[`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel)を含めるか、ウィンドウ機能フィーチャーの`Window.open()`リストに[`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener)を追加してください。
+
+### `textStart`
+
+テキストフラグメントの構文、最も単純な形式では次のようになります。ハッシュ記号`#`の後に`:~:text=`が続き、最後に`textStart`という、リンクする[パーセントエンコードされた](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)テキストを表すコードを入力します。
+
+```bash
+#:~:text=textStart
+```
+
+たとえば、[Chrome 80の機能を発表するブログ記事](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)のなかで、「*ECMAScript Modules in Web Workers*」という見出しにリンクするとした場合、このURLは次のようになります。
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers</mark></code></a>
+
+テキストフラグメントは<mark class="highlight-line highlight-line-active">このように</mark>が強調されます。Chromeなどのサポートブラウザでこのリンクをクリックすると、テキストフラグメントが強調表示され、スクロールして表示されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption>テキストフラグメントはスクロールして表示され、強調表示されます。</figcaption></figure>
+
+### `textStart`と`textEnd`
+
+では、「*ECMAScript Modules in Web Workers*」というタイトルの見出しだけでなく、*セクション*全体にリンクするにはどうすればよいでしょうか？セクションのテキスト全体をパーセントエンコードすると、URLがありえないほど長くなります。
+
+幸いなことに、もっと良い方法があります。テキスト全体ではなく、`textStart,textEnd`構文を使用して目的のテキストをフレーム化する方法です。したがって、目的のテキストの先頭にパーセントエンコードされた単語と目的のテキストの終わりにパーセントエンコードされた単語をカンマ（`,`）区切りで指定します。
+
+これは次のようになります。
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.</mark></code></a> 。
+
+`textStart`の`ECMAScript%20Modules%20in%20Web%20Workers`、コンマ（`,`）、そして`textEnd`として`ES%20Modules%20in%20Web%20Workers.`となっています。Chromeなどのサポートされているブラウザでクリックすると、セクション全体が強調表示され、スクロールして表示されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %} <figcaption>スクロール表示され、強調表示されたテキストフラグメント。</figcaption></figure>
+
+`textStart`と`textEnd`の選択について疑問に思うかもしれません。実際には、わずかに短いURL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript%20Modules,Web%20Workers.</mark></code></a>で、両側に2つの単語しか使用しなくてもよいでしょう。`textStart`と`textEnd`を以前の値と比較してください。
+
+`textStart`と`textEnd`の両方に1つの単語しか使用しない場合、問題が発生していることがわかります。URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=ECMAScript,Workers.</mark></code></a>はさらに短くなりましたが、強調表示されたテキストフラグメントは本来求めていたものではなくなりました。強調表示は、最初に出現する`Workers.`で停止し、これは正しい動作ではありますが、私が強調しようとしたものではありません。問題は、目的のセクションは、現在の一単語のみの`textStart`と`textEnd`の値では一意に識別されていないということです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption>意図しないテキストフラグメントがスクロール表示され、強調表示されています。</figcaption></figure>
+
+### `prefix-`と`-suffix`
+
+`textStart`と`textEnd`で十分な長さの値を使用することが、一意のリンクを取得するための1つのソリューションです。ただし、状況によっては、これが不可能な場合もあります。ちなみに、なぜChrome 80リリースのブログ記事を例として選んだのでしょうか？このリリースでテキストフラグメントが導入されたからです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="ブログ記事のテキスト: テキストURLフラグメント。ユーザーまたは作成者は、URLに指定するテキストフラグメントを使用してページの特定の部分にリンクできるようになりました。ページが読み込まれると、ブラウザはテキストを強調表示し、そのフラグメントまでスクロールして表示します。たとえば、以下のURLは、「Cat」のwikiページを読み込み、「text」パラメーターにリストされているコンテンツまでスクロールします。", width="800", height="200" %} <figcaption>テキストフラグメントの発表ブログ記事の抜粋。</figcaption></figure>
+
+上のスクリーンショットで「テキスト」という単語が4回表示されていることに注目してください。 4番目の出現は緑色のコードフォントで書かれています。この特定の単語にリンクする場合は、 `textStart`を`text`に設定します。「テキスト」という単語は1つの単語だけなので、 `textEnd`は存在できません。どうすればよいでしょうか？URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=text</mark></code></a>とすると、見出しにも「Text」が存在するため、最初の出現で一致してしまいます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption>「Text」の最初の出現に一致するテキストフラグメント。</figcaption></figure>
+
+{% Aside 'caution' %}テキストフラグメントの一致では大文字と小文字が区別されないことに注意してください。 {% endAside %}
+
+幸いなことに解決策があります。このようなケースでは、`prefix​-`と`-suffix`を指定することができます 。緑のコードフォントの「text」の前の単語は「the」で、後の単語は「parameter」です。ほかの3つの「Text」の出現には、これと同じ前後の単語がありません。この知識を使って、前のURLを微調整して、`prefix-`と`-suffix`を追加できます。他のパラメーターと同様に、これらもパーセントエンコードする必要があり、複数の単語を含めることができます。 <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=the-,text,-parameter</mark></code></a> 。パーサーが`prefix-`と`-suffix`をはっきりと識別できるようにするに 、`textStart`から分離し、オプションの`textEnd`にはダッシュ`-`を使用します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %}<figcaption> 「テキスト」の目的のオカレンスでのテキストフラグメントの一致。</figcaption></figure>
+
+### 完全な構文
+
+テキストフラグメントの完全な構文を以下に示します。（角括弧はオプションのパラメーターを示します。）すべてのパラメーターの値はパーセントエンコードする必要があります。これは特に、ダッシュ`-` 、アンパサンド`&` 、およびコンマ`,`文字の場合に特に重要であるため、テキストディレクティブ構文の一部として解釈されていません。
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+`prefix-`、`textStart`、`textEnd`、および`-suffix`はそれぞれ、単一の[ブロックレベル要素](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements)内のテキストに一致しますが、完全な`textStart,textEnd`の範囲は複数のブロックにまたがる*ことができます*。たとえば、 `:~:text=The quick,lazy dog`は次の例では失敗します。これは開始文字列の「The quick」が単一の中断されないブロックレベル要素内に表示されないためです。
+
+```html
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
+```
+
+ただし、この例では一致します。
+
+```html
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
+```
+
+### ブラウザ拡張機能を使ってテキストフラグメントURLを作成する
+
+テキストフラグメントのURLを手動で作成することは、特にそれらが一意であることを確認する場合には面倒です。本当に必要な場合は、仕様にいくつかのヒントがあり、 [テキストフラグメントURLを生成するための正確な手順](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives)がリストされています。 [Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment)と呼ばれるオープンソースのブラウザ拡張機能を提供しています。この拡張機能を使用すると、テキストを選択し、コンテキストメニューの[選択したテキストにリンクをコピー]をクリックして任意のテキストにリンクできます。この拡張機能は、次のブラウザで使用できます。
+
+- [Google Chrome用Link to Text Fragment](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Microsoft Edge用Link to Text Fragment](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Mozilla Firefox用Link to Text Fragment](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Apple Safari用Link to Text Fragment](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %} <figcaption><a href="https://github.com/GoogleChromeLabs/link-to-text-fragment"> Link to Text Fragment </a>ブラウザ拡張機能</figcaption></figure>
+
+### 1つのURLに複数のテキストフラグメント
+
+1つのURLに複数のテキストフラグメントが表示される可能性があることに注意してください。特定のテキストフラグメントは、アンパサンド文字で`&`区切る必要があります。ここに、3つのテキストフラグメントを含むリンクの例を示します。<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet<mark class="highlight-line highlight-line-active"></code></a>。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %} <figcaption>1つのURLの3つのテキストフラグメント。</figcaption></figure>
+
+### 要素とテキストフラグメントの混合
+
+従来の要素フラグメントをテキストフラグメントと組み合わせることができます。同一のURLに両方のフラグメントを含めることにまったく問題はないため、たとえばページの元のテキストが変更したことでテキストフラグメントが一致しなくなった場合の意味のあるフォールバックを提供することができます。「*Give us feedback in our [Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)*」セクションにリンクするURL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html<mark class="highlight-line highlight-line-active">#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.</mark></code></a> には、要素フラグメント（`HTML1`）だけでなく、テキストフラグメント（`text=Give%20us%20feedback%20in%20our%20Product%20Forums.`）の両方が含まれています。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %} <figcaption>要素フラグメントとテキストフラグメントの両方を使用したリンク。</figcaption></figure>
+
+### フラグメントディレクティブ
+
+まだ説明していない構文の要素が1つあります。それは、フラグメントディレクティブ`:~:`です。上記のような既存のURL要素フラグメントとの互換性の問題を回避するために、 [Text Fragments仕様](https://wicg.github.io/ScrollToTextFragment/)にはフラグメントディレクティブが導入されています。`:~:`というコードシーケンスで区切られたURLフラグメントの一部です。`text=`などのユーザーエージェント命令用に予約されており、作成者のスクリプトが直接対話できないように、読み込み中にURLから削除されます。ユーザーエージェント命令は、*ディレクティブ*とも呼ばれます。そのため、具体的なケースでは、 `text=`*はテキストディレクティブ*と呼ばれます。
+
+### 機能の検出
+
+サポートを検出するには、 `document`に`fragmentDirective`プロパティがあるかをテストします。フラグメントディレクティブは、URLがドキュメントではなくブラウザに向けられた命令を指定するためのメカニズムです。これは、作成者スクリプトとの直接の対話を回避することを目的としているため、既存のコンテンツに重大な変更を加える心配なく、将来のユーザーエージェント命令を追加できます。たとえば、翻訳のヒントを追加する可能性があります。
+
+```js
+if ('fragmentDirective' in document) {
+  // Text Fragments is supported.
+}
+```
+
+{% Aside %} Chrome80からChrome85まで、 `fragmentDirective`プロパティは`Location.prototype`で定義されていました。この変更の詳細については、[WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130)を参照してください。 {% endAside %}
+
+機能検出は主に、リンクが動的に生成され（たとえば、検索エンジンによって）、それらをサポートしていないブラウザへのテキストフラグメントリンクの提供を回避する場合を対象としています。
+
+### テキストフラグメントのスタイル付け
+
+デフォルトでは、ブラウザは[`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark)のスタイル（通常、`mark`のCSS[システムカラー](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors)である黄色に黒）と同じスタイルをテキストフラフメントにも設定します。ユーザーエージェントのスタイルシートには、次のようなCSSが含まれています。
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+ご覧のとおり、ブラウザは、適用された強調表示をカスタマイズするために使用できる[`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text)という疑似セレクターを公開します。たとえば、テキストフラグメントを赤い背景に黒いテキストになるようにデザインできます。いつものように、オーバーライドのスタイルがアクセシビリティの問題を引き起こさないように[色のコントラストを確認](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast)し、ハイライトが実際に他のコンテンツから視覚的に目立つようにしてください。
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### ポリフィル可能性
+
+テキストフラグメント機能は、ある程度ポリフィルすることができます。機能がJavaScriptで実装されているテキストフラグメントの組み込みサポートを提供しないブラウザ用に[、拡張機能](https://github.com/GoogleChromeLabs/link-to-text-fragment)によって内部的に使用される[ポリフィル](https://github.com/GoogleChromeLabs/text-fragments-polyfill)を提供します。
+
+### プログラムによるテキストフラグメントリンクの生成
+
+[ポリフィル](https://github.com/GoogleChromeLabs/text-fragments-polyfill)には、インポートしてテキストフラグメントリンクを生成するために使用できる`fragment-generation-utils.js`が含まれています。これは、以下のコードサンプルで概説されています。
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### 分析目的でのテキストフラグメントの取得
+
+多くのサイトがルーティングにフラグメントを使用しているため、ブラウザはそれらのページを壊さないようにテキストフラグメントを取り除きます。分析目的などでテキストフラグメントのリンクをページに公開する[必要があることは認められています](https://github.com/WICG/scroll-to-text-fragment/issues/128)が、提案されたソリューションはまだ実装されていません。今のところ回避策として、以下のコードを使用して必要な情報を抽出できます。
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### セキュリティ
+
+[テキストフラグメントディレクティブは、ユーザーのアクティブ化の](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation)結果である完全な（同じページではない）ナビゲーションでのみ呼び出されます。さらに、宛先とは異なるオリジンから発信されたナビゲーションでは、宛先のページが十分に分離されていることがわかるように[`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener)コンテキストで発生する必要があります。テキストフラグメントディレクティブは、メインフレームにのみ適用されます。つまり、テキストはiframe内で検索されず、iframeナビゲーションでテキストフラグメントを呼び出すことはできません。
+
+### プライバシー
+
+テキストフラグメントがページで見つかったかどうかに関係なく、テキストフラグメント仕様の実装がリークしないことが重要です。要素フラグメントは元のページ作成者の完全な制御下にありますが、テキストフラグメントは誰でも作成できます。上記の　　例では、`<h1>`に`id`がなかったために、「*ECMAScript Modules in Web Workers* 」という見出しにリンクできなかったことを思い出してください。それでは、どうすれば、テキストフラグメントを慎重に作成することで、誰もがどこにでもリンクできるというのでしょうか。
+
+悪意のある`evil-ads.example.com`という広告ネットワークを運営しているとしましょう。さらに、広告用のiframeの1つでは、ユーザーが広告と対話したら、テキストフラグメントURL <code>dating.example.com<mark class="highlight-line highlight-line-active">#:~:text=Log%20Out</mark></code>を使って、`dating.example.com`への隠しクロスオリジンiframeを動的に作成したことを想像してください。「Log Out」というテキストがあれば、犠牲者は現在`dating.example.com`にログイン中であることになるため、プロファイリングに使用することができます。テキストフラグメントの実装は悪意があるなどを認識しないことから、正しく一致するとフォーカスが切り替わるようにできるため、`evil-ads.example.com`で、`blur`イベントをリスンして一致が発生したことを知ることができます。Chromeでは、このようなシナリオを実現できないようにテキストフラグメントが実装されています。
+
+他には、スクロールの位置に応じてネットワークトラフィックを悪用する攻撃があります。会社のイントラネットの管理者のように、被害者のネットワークトラフィックログにアクセスできたとしましょう。次に、人事関連の「*What to Do If You Suffer From…*（次のような症状への対策）」という長いドキュメントがあり、*burn out*（燃え尽き）、*anxiety*（不安）などの症状のリストがあるとします。各項目の横に追跡用のピクセルを配置し、ドキュメントの読み込みが、たとえば「*burn out*」項目の追跡ピクセルの読み込みと一時的に同時に発生することがわかったなら、イントラネット管理者として、機密情報であり、誰にも表示されないと社員が思い込んでいる「`:~:text=burn%20out`」を使ったテキストフラグメントのリンクを社員がクリックしたと判定することができます。この例は、多少工夫されており、*非常に*具体的な前提条件が満たされることで悪用が成り立つため、Chromeのセキュリティチームはナビゲーションにスクロールを実装するリスクを管理可能と評価しました。他のユーザーエージェントは、代わりに手動のスクロールUI要素を表示するように決定している場合があります。
+
+オプトアウトを希望するサイトの場合、Chromiumは送信可能な[ドキュメントポリシー](https://wicg.github.io/document-policy/)ヘッダー値をサポートしているため、ユーザーエージェントはテキストフラグメントURLを処理しません。
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## テキストフラグメントの無効化
+
+この機能を無効にする最も簡単な方法は、HTTPレスポンスヘッダーを注入できる拡張機能を使用することです。たとえば、[ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj)（非Google製品）を使用すると、次のようにレスポンス（*リクエストではありません*）ヘッダーを挿入することができます。
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+オプトアウトするもう1つの方法は、より複雑ではありますが、エンタープライズ設定の[`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled) を使用することです。macOSでこれを行うには、以下のコマンドをターミナルに貼り付けます。
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+Windowsの場合は、[Google Chrome Enterpriseヘルプ](https://support.google.com/chrome/a/answer/9131254?hl=en)サポートサイトのドキュメントに従ってください。
+
+{% Aside 'warning' %}これは、操作内容を理解している場合に限り試してください。 {% endAside %}
+
+## Web検索のテキストフラグメント
+
+一部の検索では、Google検索エンジンは、関連するWebサイトのコンテンツスニペットによってクイックアンサーまたは要約を提供します。これらの*注目のスニペット*は、検索が質問の形式である場合に表示される可能性が最も高くなります。注目のスニペットをクリックすると、ユーザーはソースWebページの注目のスニペットテキストに直接移動します。この動作は、自動的に作成されたテキストフラグメントURLによるものです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %} <figcaption>注目のスニペットを表示するGoogle検索エンジンの結果ページ。ステータスバーにはテキストフラグメントURLが表示されている。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %} <figcaption>クリックすると、ページの関連するセクションがスクロールされて表示される。</figcaption></figure>
+
+## まとめ
+
+テキストフラグメントURLは、Webページ上の任意のテキストにリンクするための強力な機能です。これを使用すると、学術コミュニティは非常に正確な引用または参照リンクを提供でき、検索エンジンはページ上のテキスト結果にディープリンクを作成できます。また、ソーシャルネットワーキングサイトは、アクセスできないスクリーンショットではなく、ユーザーがWebページの特定の一節を共有できるようにすることができます。[テキストフラグメントURLを使用](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet)し、便利であることに気づいていただければと思います。[Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment)ブラウザ拡張機能をぜひインストールしてください。
+
+## 関連リンク
+
+- [Spec draft](https://wicg.github.io/scroll-to-text-fragment/)
+- [TAG Review](https://github.com/w3ctag/design-reviews/issues/392)
+- [Chrome Platform Status ページ](https://chromestatus.com/feature/4733392803332096)
+- [Chromeのバグトラッカー](https://crbug.com/919204)
+- [Intent to Shipスレッド](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [WebKit-Devスレッド](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Mozilla standards positionスレッド](https://github.com/mozilla/standards-positions/issues/194)
+
+## 謝辞
+
+テキストフラグメントは、[Grant Wang](https://github.com/grantjwang)の貢献とともに、[Nick Burris](https://github.com/nickburris)と[David Bokan](https://github.com/bokand)によって実装され、仕様に含まれました。この記事を徹底的にレビューしてくれた[Joe Medley](https://github.com/jpmedley)に感謝しています。ヒーロー画像提供: [Greg Rakozy](https://unsplash.com/@grakozy)（[Unsplash](https://unsplash.com/photos/oMpAz-DN-9I)）。
diff --git a/src/site/content/ja/blog/trust-tokens/index.md b/src/site/content/ja/blog/trust-tokens/index.md
new file mode 100644
index 00000000000..9427b47a8dd
--- /dev/null
+++ b/src/site/content/ja/blog/trust-tokens/index.md
@@ -0,0 +1,232 @@
+---
+title: トラストトークンの使用を開始する
+subhead: Trust Tokensは、Webサイトが指定の量の情報を持つ閲覧コンテキストから別のブラウジングコンテキストに（たとえば、サイト間で）伝達できる新規APIであり、受動的な追跡なしで不正行為と戦うのに役立ちます。
+authors:
+  - samdutton
+date: 2020-06-22
+updated: 2021-12-10
+hero: image/admin/okxi2ttRG3h1Z4F3cylI.jpg
+thumbnail: image/admin/cTo0l2opcfNxg1TEjxSg.jpg
+alt: トークンを持っている手の白黒写真
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside  'caution' %} **⚠️警告：アプリの更新が必要になります。**
+
+**TrustTokenV3は、ChromiumのTrustTokens実装**に対する下位互換性のない変更のコレクションです。変更はChrome92に到着し、2021年7月末にChromeStableに到達しました。
+
+まだ行っていない場合は、[APIをテスト](https://www.chromestatus.com/feature/5078049450098688)する既存のアプリケーションを更新する必要があります。
+
+詳細： [TrustTokenV3とは何ですか？](https://bit.ly/what-is-trusttokenv3)にご覧ください {% endAside %}
+
+<br><br>
+
+{% YouTube id='bXB1Iwq6Eq4' %}
+
+## 概要
+
+Trust tokenで、オリジンは信頼を持つユーザーに暗号トークンを発行できます。トークンはユーザーのブラウザによって保存されます。その後、ブラウザは他のコンテキストでトークンを使用して、ユーザーの信頼性を評価できます。
+
+Trust Token APIを使用すると、ユーザーを識別したり、2つのIDをリンクしたりせずに、あるコンテキストでのユーザーの信頼を別のコンテキストに伝達できます。
+
+[デモ](https://trust-token-demo.glitch.me)でAPIを試して、ChromeDevToolsの**ネットワーク**タブと**アプリケーション**タブで[トークンを調べることができます。](https://developers.google.com/web/updates/2021/01/devtools#trust-token)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/krrI292OLd6awb4dxkN0.jpg", alt="Chrome DevToolsネットワークタブの信頼トークンを表示するスクリーンショット.", width="800", height="584" %} <figcaption>ChromeDevToolsの<b>ネットワーク</b>タブの信頼トークンNetwork tab.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cwR9JdoVo1M4VDovP2oM.jpg", alt="Chrome DevToolsアプリケーションタブにTrust Tokenを表示するスクリーンショット.", width="800", height="584" %} <figcaption>ChromeDevTools<b>アプリケーション</b>のタブのTrust Token</figcaption></figure>
+
+{% Aside %}プライバシーサンドボックスは、サードパーティのCookieや他の追跡メカニズムを使用せずにサードパーティのユースケースを満たすための一連の提案です。すべての提案の概要については[、プライバシーサンドボックス](/digging-into-the-privacy-sandbox)を掘り下げるを参照してください。
+
+**この提案にはフィードバックが必要です。**コメントがある場合は、 [TrustToken説明](https://github.com/WICG/trust-token-api)リポジトリに[問題を挙げてください。](https://github.com/WICG/trust-token-api/issues/new) {% endAside %}
+
+## なぜTrust Tokenが必要なのですか？
+
+Webには、ユーザーが本人であり、人間になりすましたボットや、実際の人やサービスをだましている悪意のあるサードパーティではないことを示す信頼信号を確立する方法が必要です。不正防止は、広告主、広告プロバイダー、およびCDNにとって特に重要です。
+
+残念ながら、信頼性を測定して伝達するための既存のメカニズムは、たとえば、サイトとのやり取りが本当の人間によるものかどうかを判断するために、フィンガープリントの手法を利用しています。
+
+{% Aside 'key-term' %}**フィンガープリントを**使用すると、サイトは、デバイス、オペレーティングシステム、ブラウザの設定（言語設定、[ユーザーエージェント](https://developer.mozilla.org/docs/Web/API/NavigatorID/userAgent)、使用可能なフォントなど）やデバイスの状態の変化に関するデータを取得することで、個々のユーザーを識別および追跡できます。これは、サーバー上でリクエストヘッダーをチェックするか、クライアント上でJavaScriptを使用して実行できます。
+
+フィンガープリントは、ユーザーが認識しておらず、制御できないメカニズムを使用します。 [Panopticlick](https://panopticlick.eff.org/)や[amiunique.org](https://amiunique.org/)などのサイトでは、指紋データを組み合わせて個人を識別する方法を示しています。 {% endAside %}
+
+APIはプライバシーを保護し、個人のユーザーを追跡することなしで信頼性がサイト間で伝播できるようにする必要があります。
+
+## トラストトークンの提案には何が含まれていますか？
+
+Webには、詐欺やスパムを検出するために信頼信号を構築することが重要です。これを行うには、グローバルなクロスサイトのユーザーごとの識別子を使用してブラウジングを追跡することです。プライバシーを保護するAPIの場合、これは受け入れられません。
+
+提案[**説明者**](https://github.com/WICG/trust-token-api#overview)から：
+
+<blockquote>
+<p>このAPIは、サードパーティのコンテキストでアクセス可能な「プライバシーパス」スタイルの暗号化トークン用の新しいオリジンごとのストレージ領域を提案します。これらのトークンは個人化されておらず、ユーザーの追跡には使用できないが、暗号化されているため、偽造することはできません。</p>
+<p>オリジンがユーザーを信頼するコンテキストにある場合、ユーザーが不明または信頼性が低いコンテキストで次回で「使用される」可能のトークンのバッチをブラウザーに発行できます。トークンが互いに区別できないため、Webサイトがトークンを介してユーザーを追跡できないことは重要になります。</p>
+<p>さらに、特定のトークン償還にバインドされたキーを使用して送信リクエストに署名するためのブラウザの拡張メカニズムを提案します。</p>
+</blockquote>
+
+## サンプルAPIの使用法
+
+以下は、API Explainerの[サンプルコードを基にしています](https://github.com/WICG/trust-token-api#sample-api-usage)。
+
+{% Aside %}この投稿のコードは、Chrome88以降で利用可能な更新された構文を使用しています。{% endAside %}
+
+ユーザーがサードパーティの広告ネットワーク(`foo.example`)からの広告を埋め込んだニュースWebサイト(`publisher.example`)を想像してください。ユーザーは以前、trust tokenを発行するソーシャルメディアサイト(`issuer.example`)を使用しました。
+
+以下のシーケンスは、trust tokenがどのように機能するかを示しています。
+
+**1.**ユーザーは`issuer.example` に訪問し、アカウントアクティビティや、CAPTCHAチャレンジの通過など、自分が本物の人間であるとサイトに信じ込ませるアクションを実行します。
+
+**2.** `issuer.example`は、ユーザーが人間であるかを確認し、次のJavaScriptを実行して、ユーザーのブラウザーにtrust tokenを発行します。
+
+```js
+fetch('https://issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request',
+    issuer: 'https://issuer.example'
+  }
+}).then(...)
+```
+
+**3.**ユーザーのブラウザはtrust tokenを保存し、 `issuer.example`に関係付けます。
+
+**4.**しばらくして、ユーザーは`publisher.example`にアクセスします。
+
+**5.** `publisher.example`はユーザーが本物の人間であるかどうかを確認したいです。 `publisher.example`は`issuer.example`を信じるため、ユーザーのブラウザがその原点から有効なトークンを持っていることをチェックします：
+
+```js
+document.hasTrustToken('https://issuer.example');
+```
+
+**6.** `true`に解決されるpromiseを返すなら、それが`issuer.example`からのトークンを持っていると意味するので、`publisher.example`はトークンの引き換えを試みることができます。
+
+```js
+fetch('https://issuer.example/trust-token', {
+trustToken: {
+  type: 'token-redemption',
+  issuer: 'https://issuer.example',
+  refreshPolicy: {none, refresh}
+}
+}).then(...)
+```
+
+上記のコードで：
+
+1. 償還者`publisher.example`は償還を要求します。
+2. 引き換えが成功すると、発行者`issuer.example`は、ある時点でこのブラウザーに有効なトークンを発行したことを示す引き換えレコードを返します。
+
+**7.** `fetch()`によって返されたpromiseが解決されると、引き換えレコードは後続のリソースリクエストで使用できます。
+
+```js
+fetch('https://foo.example/get-content', {
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['https://issuer.example', ...]
+  }
+});
+```
+
+上記のコードで：
+
+1. 償還レコードは、リクエストheader `Sec-Redemption-Record`として含まれています。
+2. `foo.example`は償還レコードを受け取り、レコードを解析して、 `issuer.example`がこのユーザーを人間であると見なしたかどうかを判断できます。
+3. `foo.example`はそれに応じて応答します。
+
+{% Details %} {% DetailsSummary %} Webサイトは、あなたを信頼するかどうかをどのように判断できますか？ {% endDetailsSummary %} eコマースサイトでのショッピング履歴、ロケーションプラットフォームでのチェックイン、または銀行でのアカウント履歴を持っているようです。発行者は、あなたがアカウントを持っている期間や、あなたが本物の人間である可能性に対する信頼を高める他の相互作用（CAPTCHAやフォーム送信など）などの他の要因も調べる場合もあります。 {% endDetails %}
+
+### トラストトークンの発行
+
+ユーザーが`issuer.example`などのtrust token発行者によって信頼できると見なされた場合、 `trustToken`パラメーターと`fetch()`リクエストを行うことにより、ユーザーのtrust tokenを取得できます。
+
+```js
+fetch('issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request'
+  }
+}).then(...)
+```
+
+これにより、[新しい暗号化プリミティブ](https://privacypass.github.io/)を使用して[プライバシーパス](https://eprint.iacr.org/2020/072.pdf)発行プロトコルの拡張が呼び出されます。
+
+1. *nonces*呼ばれる疑似乱数のセットを生成します。
+
+2. nonces をブラインドし（発行者がコンテンツを表示できないようにエンコードし）、 `Sec-Trust-Token`ヘッダーでリクエストに添付します。
+
+3. 提供されたエンドポイントにPOSTリクエストを送信します。
+
+エンドポイントは[ブラインドトークン](https://en.wikipedia.org/wiki/Blind_signature)（ブラインドナンスの署名）で応答し、トークンはブラインド解除され、ブラウザーによってtrust tokenとして関連するナンスと一緒に内部に保存されます。
+
+### trust tokenの償還
+
+パブリッシャーサイト（ `publisher.example`など）は、ユーザーが使用できる信頼トークンがあるかどうかを確認できます。
+
+```js
+const userHasTokens = await document.hasTrustToken('issuer.example/trust-token');
+```
+
+利用可能なトークンがある場合、発行者サイトはそれらを引き換えて、引き換えレコードを取得できます。
+
+```js
+fetch('issuer.example/trust-token', {
+  ...
+  trustToken: {
+    type: 'token-redemption',
+    refreshPolicy: 'none'
+  }
+  ...
+}).then(...)
+```
+
+サイト運営者は、次のような`fetch()`呼出により、コメントの投稿、ページのいいね、投票への投票など、信頼トークンを必要とするリクエストに償還レコードを含めることができます。
+
+```js
+fetch('https://foo.example/post-comment', {
+  ...
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['issuer.example/trust-token', ...]
+  }
+  ...
+}).then(...);
+```
+
+`Sec-Redemption-Record`リクエストheaderとして含まれています。
+
+{% Aside %}Trust tokenには、Fetch、XHR、およびHTML `<iframe>`要素のオプションを介してのみアクセスできます。<br>直接アクセスすることはできません。 {% endAside%}
+
+### プライバシーに関する考慮事項
+
+トークンは「紐付け不可」の形で設計されています。発行者は、ユーザーがアクセスするサイトに関する集約情報を入手できるが、発行と償還を関連付けることはできません。ユーザーがトークンを償還するとき、発行者は、作成済みのトークンと区別することはできません。ただし、現在、trust tokenは空白の状態では存在しません。サードパーティのCookieや秘密の追跡技術など、発行者が現在（理論的には）サイト間でユーザーのIDを結合できる方法は他にもあります。サイトがサポートを計画する際には、このエコシステムの移行を理解することが重要です。これは、多くのプライバシーサンドボックスAPIの移行の一般的な側面であるため、ここではこれ以上説明しません。
+
+### セキュリティに関する考慮事項
+
+**Trust tokenの消耗：** 悪意のあるサイトは、特定の発行者からのユーザーのトークンの供給を故意に消耗させる可能性があります。この攻撃には、発行者が一度に多くのトークンを提供できるようにするなど、いくつかの緩和策があります。そのため、ユーザーは、ブラウザがトップレベルのページビューごとに1つのトークンを引き換えることを保証する十分な供給があります。
+
+**二重利用の防止：** マルウェアは、ユーザーのすべてのtrust tokenにアクセスしする意図を持ちます。ただし、すべての償還は同じトークン発行者に送信されるため、トークンは時間の経過とともに使い果たされます。これにより、各トークンが1回だけ使用されていることを確認できます。リスクを軽減するために、発行者はより少量のトークンに署名することもできます。
+
+### リクエストメカニズム
+
+たとえば、ナビゲーションリクエスト`fetch()`外部で償還レコードを送信できる場合があります。サイトは、HTTP応答headerに発行者データを含めて、ページの読み込みと並行してトークンの引き換えを有効にできる場合があります。
+
+**繰り返しになりますが、この提案にはあなたのフィードバックが必要です。** コメントがある場合は、TrustToken[説明リポジトリに](https://github.com/WICG/trust-token-api)[問題を挙げ](https://github.com/WICG/trust-token-api/issues/new)てください。
+
+## 詳細をご覧ください
+
+- [Trust Tokenのデモ](https://trust-token-demo.glitch.me)
+- [Chromeのオリジントライアルを始める](https://developer.chrome.com/blog/origin-trials/)
+- [プライバシーサンドボックスを掘り下げる](/digging-into-the-privacy-sandbox/)
+- [Trust Token APIExplainer](https://github.com/WICG/trust-token-api)
+- [Chromiumプロジェクト：Trust Token API](https://sites.google.com/a/chromium.org/dev/updates/trust-token)
+- [実装の意図：Trust TokenAPI](https://groups.google.com/a/chromium.org/g/blink-dev/c/X9sF2uLe9rA/m/1xV5KEn2DgAJ)
+- [Chromeプラットフォームのステータス](https://www.chromestatus.com/feature/5078049450098688)
+- [プライバシーパス](https://privacypass.github.io/)
+- [プライバシーパスの拡張](https://eprint.iacr.org/2020/072.pdf)
+
+---
+
+この投稿の作成とレビューに協力して頂いた皆様にご感謝いたします。
+
+写真は[ZSun Fu](https://unsplash.com/photos/b4D7FKAghoE)に撮影され、[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)にアップロードされました。
diff --git a/src/site/content/ja/blog/trusted-types/index.md b/src/site/content/ja/blog/trusted-types/index.md
new file mode 100644
index 00000000000..e3fb6cc79b8
--- /dev/null
+++ b/src/site/content/ja/blog/trusted-types/index.md
@@ -0,0 +1,220 @@
+---
+title: 信頼できるタイプを使用して、DOMベースのクロスサイトスクリプティングの脆弱性を防止します
+subhead: アプリケーションのDOMXSS攻撃対象領域を減らします。
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: クロスサイトスクリプティングの脆弱性を示すコードスニペット。
+description: |2
+
+  信頼できるタイプの紹介：DOMベースのクロスサイトを防ぐためのブラウザーAPI
+
+  最新のWebアプリケーションでのスクリプト。
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## なぜあなたは気にする必要がありますか？
+
+DOMベースのクロスサイトスクリプティング（DOM XSS）は、最も一般的なWebセキュリティの脆弱性の1つであり、アプリケーションに導入するのは非常に簡単です。[信頼できるタイプ](https://github.com/w3c/webappsec-trusted-types)は、危険なWeb API関数をデフォルトで安全にすることにより、DOM XSSの脆弱性のないアプリケーションを作成、セキュリティレビュー、および維持するためのツールを提供します。[信頼できるタイプはChrome83](https://github.com/w3c/webappsec-trusted-types#polyfill)でサポートされており、他のブラウザではポリフィルを利用できます。最新のクロスブラウザサポート情報[については、ブラウザの互換性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility)を参照してください。
+
+{% Aside 'key-term' %} DOMベースのクロスサイトスクリプティングは、ユーザーが制御する*ソース*（ユーザー名、URLフラグメントから取得したリダイレクトURLなど）*からのデータがシンク*`eval()`ような関数またはのようなプロパティセッターです`.innerHTML` 、任意のJavaScriptコードを実行できます。 {% endAside %}
+
+## バックグラウンド
+
+何年もの間、 [DOM XSS](https://owasp.org/www-community/attacks/xss/)は、最も一般的で危険なWebセキュリティの脆弱性の1つでした。
+
+クロスサイトスクリプティングには2つの異なるグループがあります。一部のXSSの脆弱性は、Webサイトを形成するHTMLコードを安全に作成しないサーバー側のコードが原因で発生します。他の人はクライアントに根本的な原因があり、JavaScriptコードがユーザー制御のコンテンツで危険な関数を呼び出します。
+
+[サーバー側のXSS](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)を防ぐために、文字列を連結してHTMLを生成せず、代わりに安全なコンテキスト自動エスケープテンプレートライブラリを使用してください。バグが必然的に発生するため、バグをさらに軽減するために[、ノンスベースのコンテンツセキュリティポリシー](https://csp.withgoogle.com/docs/strict-csp.html)を使用してください。
+
+[これで、ブラウザーは、信頼できるタイプ](https://bit.ly/trusted-types)のクライアント側（DOMベースとも呼ばれる）XSSを防ぐのにも役立ちます。
+
+## APIの紹介
+
+トラステッドタイプは、次の危険なシンク機能をロックダウンすることで機能します。[ブラウザベンダーとWebフレームワーク](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)は、セキュリティ上の理由からこれらの機能の使用をすでに避けているため、すでにそれらのいくつかを認識しているかもしれません。
+
+- **スクリプト操作**：<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src)との設定のテキストコンテンツ[`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script)要素。
+
+- **文字列からのHTMLの生成**：<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 、 [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML) 、[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) 、 [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc) 、 [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write) 、 [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) 、および[`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **プラグインコンテンツの実行**：<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src) 、 [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) 、および[`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **ランタイムJavaScriptコードのコンパイル**：<br> `eval` 、 `setTimeout` 、 `setInterval` 、 `new Function()`
+
+トラステッドタイプでは、データを上記のシンク関数に渡す前にデータを処理する必要があります。ブラウザはデータが信頼できるかどうかわからないため、文字列を使用するだけでは失敗します。
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML  = location.href;
+```
+
+{% CompareCaption %}信頼できるタイプを有効にすると、ブラウザは*TypeError*をスローし、文字列でDOMXSSシンクを使用できないようにします。 {% endCompareCaption %}
+
+{% endCompare %}
+
+データが安全に処理されたことを示すために、特別なオブジェクト（信頼できるタイプ）を作成します。
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %}信頼できるタイプを有効にすると、ブラウザはHTMLスニペットを期待するシンクの`TrustedHTML`他の機密性の高いシンク用の`TrustedScript`および`TrustedScriptURL`オブジェクトもあります。 {% endCompareCaption %}
+
+{% endCompare %}
+
+信頼できるタイプは、アプリケーションの[DOMXSS攻撃対象領域](https://en.wikipedia.org/wiki/Attack_surface)を大幅に削減します。これにより、セキュリティレビューが簡素化され、ブラウザで実行時にコードをコンパイル、リント、またはバンドルするときに実行されるタイプベースのセキュリティチェックを実施できます。
+
+## 信頼できるタイプの使用方法
+
+### コンテンツセキュリティポリシー違反レポートの準備
+
+レポートコレクター（オープンソースの[go-csp-collectorなど](https://github.com/jacobbednarz/go-csp-collector)）をデプロイするか、同等の商用製品の1つを使用できます。ブラウザで違反をデバッグすることもできます。
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### レポートのみのCSPヘッダーを追加する
+
+信頼できるタイプに移行するドキュメントに、次のHTTP応答ヘッダーを追加します。
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+これで、すべての違反が`//my-csp-endpoint.example`に報告されますが、Webサイトは引き続き機能します。次のセクションでは、 `//my-csp-endpoint.example`どのように機能するかを説明します。
+
+{% Aside 'caution' %}信頼できるタイプは、HTTPSや`localhost`[などの安全なコンテキスト](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)でのみ使用できます。 {% endAside %}
+
+### 信頼できるタイプの違反を特定する
+
+これ以降、信頼できるタイプが違反を検出するたびに、構成された`report-uri`が送信されます。たとえば、アプリケーションが文字列を`innerHTML`渡すと、ブラウザは次のレポートを送信します。
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+これは、39行目の`https://my.url.example/script.js` `<img src=x` `innerHTML`が呼び出されたことを示しています。この情報は、コードのどの部分がDOM XSSを導入していて、変更する必要があるかを絞り込むのに役立ちます。
+
+{% Aside %}このような違反のほとんどは、コードベースで[コードリンターまたは静的コードチェッカーを実行することによっても検出できます。](https://github.com/mozilla/eslint-plugin-no-unsanitized)これは、違反の大部分をすばやく特定するのに役立ちます。
+
+とはいえ、これらは不適合コードが実行されたときにトリガーされるため、CSP違反も分析する必要があります。 {% endAside %}
+
+### 違反を修正する
+
+信頼できるタイプの違反を修正するには、いくつかのオプションがあります。[問題のあるコード](#remove-the-offending-code)を[削除したり、ライブラリを使用し](#use-a-library)[たり、信頼できるタイプのポリシーを作成し](#create-a-trusted-type-policy)たり、最後の手段として[デフォルトのポリシーを作成したりできます](#create-a-default-policy)。
+
+#### 問題のあるコードを書き直してください
+
+おそらく、不適合な機能はもう必要ないのでしょうか、それともエラーが発生しやすい関数を使用せずに最新の方法で書き直すことができるのでしょうか。
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### ライブラリを使用する
+
+一部のライブラリは、シンク関数に渡すことができる信頼できるタイプをすでに生成しています。たとえば、 [DOMPurify](https://github.com/cure53/DOMPurify)を使用してHTMLスニペットをサニタイズし、XSSペイロードを削除できます。
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+[DOMPurifyは](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types)TrustedTypesをサポートし、ブラウザーが違反を生成しないよう`TrustedHTML`れたHTMLを返します。 {% Aside 'caution' %} DOMPurifyのサニタイズロジックにバグがある場合でも、アプリケーションにDOMXSSの脆弱性がある可能性があります。信頼できるタイプでは、*何らかの*方法で値を処理する必要がありますが、正確な処理ルールとは何か、およびそれらが安全かどうかはまだ定義されていません。 {% endAside %}
+
+#### 信頼できるタイプのポリシーを作成する
+
+機能を削除できない場合があり、値をサニタイズして信頼できるタイプを作成するためのライブラリがありません。そのような場合は、TrustedTypeオブジェクトを自分で作成してください。
+
+そのためには、最初に[ポリシーを](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr)作成します。ポリシーは、入力に特定のセキュリティルールを適用するトラステッドタイプのファクトリです。
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '<')
+  });
+}
+```
+
+このコードは、 `createHTML()`関数を`TrustedHTML`オブジェクトを生成できる`myEscapePolicy`定義されたルールは、新しいHTML要素の作成を防ぐために、 `<`
+
+次のようなポリシーを使用します。
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // true
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Aside %}
+`trustedTypes.createPolicy()`として`createHTML()`渡されるJavaScript関数は文字列を返しますが、 `createPolicy()`は、戻り値を正しい型（この場合は`TrustedHTML` ）でラップするポリシーオブジェクトを返します。 {% endAside %}
+
+#### デフォルトのポリシーを使用する
+
+問題のあるコードを変更できない場合があります。たとえば、これは、CDNからサードパーティのライブラリをロードする場合に当てはまります。その場合は、 [デフォルトのポリシーを](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr)使用してください。
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+信頼できるタイプのみを受け入れるシンクで文字列が使用される場合は常に、 `default`の名前のポリシーが使用されます。 {% Aside 'gotchas' %}デフォルトのポリシーは慎重に使用し、代わりに通常のポリシーを使用するようにアプリケーションをリファクタリングすることをお勧めします。そうすることで、セキュリティルールが処理するデータに近く、値を正しくサニタイズするためのコンテキストが最も多い設計が促進されます。 {% endAside %}
+
+### コンテンツセキュリティポリシーの実施に切り替える
+
+アプリケーションで違反が発生しなくなったら、信頼できるタイプの適用を開始できます。
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+出来上がり！これで、Webアプリケーションがどれほど複雑であっても、DOM XSSの脆弱性をもたらす可能性があるのは、ポリシーの1つに含まれるコードだけです。 [ポリシーの作成を制限することで、それをさらに制限できます。](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive)
+
+## 参考文献
+
+- [信頼できるタイプGitHub](https://github.com/w3c/webappsec-trusted-types)
+- [W3C仕様ドラフト](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [よくある質問](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [統合](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/ja/blog/usb/index.md b/src/site/content/ja/blog/usb/index.md
new file mode 100644
index 00000000000..fab832e2573
--- /dev/null
+++ b/src/site/content/ja/blog/usb/index.md
@@ -0,0 +1,241 @@
+---
+title: Web上のUSBデバイスにアクセスする
+subhead: |2-
+
+  WebUSB APIは、USBをWebに導入することで、USBをより安全で使いやすくします。
+authors:
+  - beaufortfrancois
+date: 2016-03-30
+updated: 2021-02-23
+hero: image/admin/hhnhxiNuRWMfGqy4NSaH.jpg
+thumbnail: image/admin/RyaGPB8fHCuuXUc9Wj9Z.jpg
+alt: Arduino Microボードの写真
+description: |2
+
+  WebUSB APIは、USBをWebに持ち込むことで、USBをより安全で使いやすくします。
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webusb
+---
+
+「USB」をわかりやすく簡単に言えば、ほとんどの場合、キーボード、マウス、音声、動画、ストレージデバイスがすぐに思い浮かぶでしょう。その通りですが、他の種類のユニバーサルシリアルバ (USB) デバイスもあります。
+
+これらの標準化されていないUSBデバイスでは、ユーザー (開発者) がそれらを利用できるようにするには、ハードウェアベンダーがプラットフォーム固有のドライバーとSDKを作成する必要があります。残念ながら、このプラットフォーム固有のコードは、歴史的にこれらのデバイスがWebで使用されるのを妨げてきました。そして、それがWebUSB APIが作成された理由の1つです。このAPIは、USBデバイスサービスをWebに公開する方法を提供するためです。このAPIを使用すると、ハードウェアメーカーは、デバイス用のクロスプラットフォームJavaScriptSDKを構築できます。しかし、最も重要なことは、**USBをWebに導入することで、USBをより安全で使いやすくすること**です。
+
+WebUSBAPIで期待できる動作を見てみましょう。
+
+1. USBデバイスを購入します。
+2. それをコンピュータに接続します。このデバイスにアクセスする適切なWebサイトとともに、通知がすぐに表示されます。
+3. 通知をクリックします。Webサイトが開き、すぐに使用できます。
+4. クリックして接続すると、USBデバイス選択ダイアログがChromeに表示され、デバイスを選択できます。
+
+これで完了です!
+
+WebUSB APIがない場合、この手順はどのようになるのでしょうか。
+
+1. プラットフォーム固有のアプリケーションをインストールします。
+2. オペレーティングシステムでサポートされている場合は、正しいアプリケーションをダウンロードしたことを確認します。
+3. アプリケーションをインストールします。運が良ければ、インターネットからのドライバ/アプリケーションのインストールについて警告する恐ろしいOSプロンプトやポップアップは表示されません。運が悪ければ、インストールされているドライバやアプリケーションが誤動作し、コンピュータに損害を与えます。(Webには[誤動作しているWebサイト](https://www.youtube.com/watch?v=29e0CtgXZSI)が含まれていることを忘れないでください)。
+4. この機能を1回だけ使用する場合、削除するまでコードはコンピュータに残ります。(Webでは、未使用のスペースは最終的に再利用されます。)
+
+## はじめに
+
+この記事は、USBの仕組みについての基本的な知識があることを前提としています。そうでない場合は、 [NutShellでUSB](http://www.beyondlogic.org/usbnutshell)を読み取ることをお勧めします。USBの背景情報については、[公式のUSB仕様](https://www.usb.org/)を確認してください。
+
+[WebUSB API](https://wicg.github.io/webusb/)はChrome61で利用できます。
+
+### オリジントライアルで利用可能
+
+現場でWebUSB APIを使用している開発者から可能な限り多くのフィードバックを得るために、以前、この機能を[オリジントライアル](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)としてChrome 54およびChrome 57に追加しました。
+
+最新のトライアルは2017年9月に正常に終了しました。
+
+## プライバシーとセキュリティ
+
+### HTTPSのみ
+
+この機能の能力により、[安全なコンテキスト](https://w3c.github.io/webappsec/specs/powerfulfeatures/#intro)でのみ機能します。これは、[TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security)を念頭に置いてビルドする必要があることを意味します。
+
+### ユーザージェスチャーが必要
+
+セキュリティ上の予防措置として、`navigator.usb.requestDevice()`は、タッチやマウスクリックなどのユーザージェスチャによってのみ呼び出すことができます。
+
+### 機能ポリシー
+
+[機能ポリシー](https://developer.mozilla.org/docs/Web/HTTP/Feature_Policy)は、開発者がさまざまなブラウザ機能とAPIを選択的に有効化または無効化できるようにするメカニズムです。 HTTPヘッダーやiframeの「allow」属性を使用して定義できます。
+
+usb属性をNavigatorオブジェクトに公開するかどうか、つまりWebUSBを許可するかどうかを制御する機能ポリシーを定義できます。
+
+次に、WebUSBが許可されていないヘッダーポリシーの例を示します。
+
+```http
+Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com
+```
+
+次に、USBが許可されているコンテナポリシーの別の例を示します。
+
+```html
+<iframe allowpaymentrequest allow="usb; fullscreen"></iframe>
+```
+
+## コーディングを始める
+
+WebUSB APIは、JavaScriptの[Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)に大きく依存しています。それらに精通していない場合は、このすばらしい[Promisesチュートリアル](/promises)をご覧ください。また、`() => {}`は単にECMAScript 2015の[Arrow関数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)です。
+
+### USBデバイスにアクセスする
+
+`navigator.usb.requestDevice()`を使用して接続された単一のUSBデバイスを選択するようにユーザーに指示するか、`navigator.usb.getDevices()`を呼び出して、オリジンがアクセスできるすべての接続されたUSBデバイスのリストを取得できます。
+
+`navigator.usb.requestDevice()`関数は、`filters`を定義する必須のJavaScriptオブジェクトを取ります。これらのフィルタは、任意のUSBデバイスを特定のベンダー (`vendorId`) および任意の製品 (`productId`) 識別子と照合するために使用されます。`classCode`、`protocolCode`、`serialNumber`、および`subclassCode`キーもそこで定義できます。
+
+<figure>{% Img src="image/admin/KIbPwUfEqgZZLxugxBOY.png", alt="ChromeでのUSBデバイスユーザープロンプトのスクリーンショット", width="800", height="533" %} <figcaption>USBデバイスのユーザープロンプト。</figcaption></figure>
+
+たとえば、オリジンを許可するように構成された接続済みのArduinoデバイスにアクセスする方法は次のとおりです。
+
+```js
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(device => {
+  console.log(device.productName);      // "Arduino Micro"
+  console.log(device.manufacturerName); // "Arduino LLC"
+})
+.catch(error => { console.error(error); });
+```
+
+まず、`0x2341` 16進数ですが、魔法のように思いついたわけではありません。[このUSBIDのリスト](http://www.linux-usb.org/usb.ids)で「Arduino」という単語を検索しただけです。
+
+上記の実行されたpromiseで返されるUSB `device`には、サポートされているUSBバージョン、最大パケットサイズ、ベンダー、製品ID、デバイスで可能な構成の数など、デバイスに関する基本的かつ重要な情報が含まれています。基本的に、デ[バイスのUSB記述子](http://www.beyondlogic.org/usbnutshell/usb5.shtml#DeviceDescriptors)のすべてのフィールドが含まれます。
+
+ちなみに、USBデバイス[がWebUSBのサポート](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor)を発表し、ランディングページのURLを定義すると、ChromeはUSBデバイスが接続されたときに永続的な通知を表示します。この通知をクリックすると、ランディングページが開きます。
+
+<figure>{% Img src="image/admin/1gRIz2wY4LYofeFq5cc3.png", alt="ChromeでのWebUSB通知のスクリーンショット", width="800", height="450" %} <figcaption>WebUSB通知。</figcaption></figure>
+
+`navigator.usb.getDevices()`を呼び出すだけで、以下に示すようにArduinoデバイスにアクセスできます。
+
+```js
+navigator.usb.getDevices().then(devices => {
+  devices.forEach(device => {
+    console.log(device.productName);      // "Arduino Micro"
+    console.log(device.manufacturerName); // "Arduino LLC"
+  });
+})
+```
+
+### Arduino USBボードと通信する
+
+では、WebUSB互換のArduinoボードからUSBポート経由で通信するのがいかに簡単かを見てみましょう。[https://github.com/webusb/arduino](https://github.com/webusb/arduino)で[スケッチ](http://www.arduino.cc/en/Tutorial/Sketch)をWebUSB対応にする手順を確認してください。
+
+ご安心ください。この記事の後半では、以下のすべてのWebUSBデバイスの方法について説明します。
+
+```js
+let device;
+
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(selectedDevice => {
+    device = selectedDevice;
+    return device.open(); // セッション開始。
+  })
+.then(() => device.selectConfiguration(1)) // デバイスの#1の構成を選択。
+.then(() => device.claimInterface(2)) // インターフェイス#2の排他的な制御を要求。
+.then(() => device.controlTransferOut({
+    requestType: 'class',
+    recipient: 'interface',
+    request: 0x22,
+    value: 0x01,
+    index: 0x02})) // Ready to receive data
+.then(() => device.transferIn(5, 64)) // エンドポイント#5から64バイトのデータを待機。
+.then(result => {
+  const decoder = new TextDecoder();
+  console.log('Received: ' + decoder.decode(result.data));
+})
+.catch(error => { console.error(error); });
+```
+
+ここで使用しているWebUSBライブラリは、(標準のUSBシリアルプロトコルに基づく) 1つのサンプルプロトコルを実装しているだけであり、メーカーは任意のセットとタイプのエンドポイントを作成できることに注意してください。制御転送は、バスの優先順位を取得し、明確に定義された構造になっているため、小さな構成コマンドに特に適しています。
+
+そして、これがArduinoボードにアップロードされたスケッチです。
+
+```arduino
+// サードパーティWebUSB Arduinoライブラリ
+#<WebUSB.h> を含める
+
+WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");
+
+#シリアルWebUSBSerialを定義
+
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {
+    ; // 接続するシリアルポートを待機。
+  }
+  Serial.write("WebUSB FTW!");
+  Serial.flush();
+}
+
+void loop() {
+  // 何も処理しない。
+}
+```
+
+上記のサンプルコードで使用されているサードパーティの[WebUSBArduinoライブラリ](https://github.com/webusb/arduino/tree/gh-pages/library/WebUSB)は、基本的に次の2つの処理を実行します。
+
+- このデバイスは、Chromeが[ランディングページのURL](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor)を読み取れるWebUSBデバイスとして機能します。
+- これは、デフォルトをオーバーライドするために使用できるWebUSBシリアルAPIを公開します。
+
+JavaScriptコードをもう一度見てください。ユーザーが`device`を選択すると、`device.open()`はプラットフォーム固有のすべての手順を実行して、USBデバイスとのセッションを開始します。次に、`device.selectConfiguration()`を使用して、使用可能なUSB構成を選択する必要があります。構成では、デバイスへの電力供給方法、最大消費電力、およびインターフェイスの数を指定することに注意してください。インターフェイスについて言えば、データはインターフェイスが要求されたときにのみインターフェイスまたは関連するエンドポイントに転送できるため、`device.claimInterface()`使用して排他的アクセスを要求する必要もあります。最後に、適切なコマンドを使用してArduinoデバイスをセットアップし、WebUSBシリアルAPIを使用して通信するには、 `device.controlTransferOut()`が必要です。
+
+そこから、`device.transferIn()`はデバイスへの一括転送を実行して、ホストが大量データを受信する準備ができていることをデバイスに通知します。次に、適切に解析する必要のある[DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) `data`を含む`result`オブジェクトでpromiseが実行されます。
+
+USBに精通している場合は、これらすべてがかなり馴染みの方法に見えるはずです。
+
+### さらに進める
+
+WebUSB APIを使用すると、すべてのUSB転送/エンドポイントタイプと連携できます。
+
+- 構成またはコマンドパラメータをUSBデバイスに送受信するために使用されるCONTROL転送は、`controlTransferIn(setup, length)`および`controlTransferOut(setup, data)`で処理されます。
+- 少量の時間が重要なデータに使用されるINTERRUPT転送は、`transferIn(endpointNumber, length)`および`transferOut(endpointNumber, data)`を使用したBULK転送と同じメソッドで処理されます。
+- 動画や音声などのデータストリームに使用されるISOCHRONOUS転送は、`isochronousTransferIn(endpointNumber, packetLengths)`および`isochronousTransferOut(endpointNumber, data, packetLengths)`で処理されます。
+- 時間が重要ではない大量のデータを信頼できる方法で転送するために使用されるBULK転送は、`transferIn(endpointNumber, length)`および`transferOut(endpointNumber, data)`で処理されます。
+
+また、WebUSB API用に設計されたUSB制御のLEDデバイスを構築するための基本的な例を提供するMike Tsao氏の[WebLightプロジェクト](https://github.com/sowbug/weblight)もご覧ください (Arduinoは使用していません)。ハードウェア、ソフトウェア、およびファームウェアが見つかります。
+
+## ヒント
+
+内部ページ`about://device-log`を使用すると、ChromeでのUSBのデバッグが簡単です。ここでは、USBデバイスに関連するすべてのイベントを1か所で確認できます。
+
+<figure>{% Img src="image/admin/ssq2mMZmxpWtALortfZx.png", alt="ChromeでWebUSBをデバッグするためのデバイスログページのスクリーンショット", width="800", height="442" %} <figcaption>WebUSBAPIをデバッグするためのChromeのデバイスログページ。</figcaption></figure>
+
+`about://usb-internals`内部ページも便利で、仮想WebUSBデバイスの接続と切断をシミュレートできます。これは、実際のハードウェアを使用せずにUIテストを実行する場合に役立ちます。
+
+<figure>{% Img src="image/admin/KB5z4p7fZRsvkfhVTNkb.png", alt="ChromeでWebUSBをデバッグするための内部ページのスクリーンショット", width="800", height="294" %} <figcaption>WebUSBAPIをデバッグするためのChromeの内部ページ。</figcaption></figure>
+
+ほとんどのLinuxシステムでは、USBデバイスはデフォルトで読み取り専用のアクセス許可にマッピングされます。ChromeがUSBデバイスを開くことができるようにするには、新しい[udevルール](https://www.freedesktop.org/software/systemd/man/udev.html)を追加する必要があります。`/etc/udev/rules.d/50-yourdevicename.rules`に、次の内容のファイルを作成します。
+
+```vim
+SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
+```
+
+たとえば、デバイスがArduinoの場合、`[yourdevicevendor]`は`2341`です。より具体的なルールには、`ATTR{idProduct}`を追加することもできます。 `user`が`plugdev`グループの[メンバー](https://wiki.debian.org/SystemGroups)であることを確認してください。次に、デバイスを再接続します。
+
+{% Aside  %} Arduinoの例で使用されているMicrosoft OS 2.0記述子は、Windows8.1以降でのみ機能します。それがなくても、WindowsのサポートにはINFファイルの手動インストールが必要です。 {% endAside %}
+
+## リソース
+
+- スタックオーバーフロー: [https://stackoverflow.com/questions/tagged/webusb](https://stackoverflow.com/questions/tagged/webusb)
+- WebUSB API仕様: [http://wicg.github.io/webusb/](https://wicg.github.io/webusb/)
+- Chromeの機能ステータス: [https://www.chromestatus.com/feature/5651917954875392](https://www.chromestatus.com/feature/5651917954875392)
+- 仕様の問題: [https://github.com/WICG/webusb/issues](https://github.com/WICG/webusb/issues)
+- 実装のバグ： [http：//crbug.com？q = component：Blink&gt; USB](http://crbug.com?q=component:Blink%3EUSB)
+- WebUSB ❤ ️Arduino: [https://github.com/webusb/arduino](https://github.com/webusb/arduino)
+- IRC: W3CのIRCの[#webusb](irc://irc.w3.org:6665/#webusb)
+- WICGメーリングリスト: [https://lists.w3.org/Archives/Public/public-wicg/](https://lists.w3.org/Archives/Public/public-wicg/)
+- WebLightプロジェクト: [https://github.com/sowbug/weblight](https://github.com/sowbug/weblight)
+
+[`#WebUSB`](https://twitter.com/search?q=%23WebUSB&src=typed_query&f=live)を使用して[@ChromiumDev] [cr-dev-twitter]にツイートを送信し、どこでどのように使用しているかをお知らせください。
+
+## 謝辞
+
+この記事をレビューしてくださった[Joe Medley](https://github.com/jpmedley)氏に感謝します。
diff --git a/src/site/content/ja/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/ja/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..b98eb231e6d
--- /dev/null
+++ b/src/site/content/ja/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,136 @@
+---
+title: 実際のユーザー環境で Web Vitals を測定するためのベスト プラクティス
+subhead: 現在ご利用中のアナリティクス ツールを使用して Web Vitals を測定する方法。
+authors:
+  - philipwalton
+description: 現在ご利用中のアナリティクス ツールを使用して Web Vitals を測定する方法
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: 現在ご利用中のアナリティクス ツールを使用して Web Vitals を測定する方法
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+実際の環境でのページのパフォーマンスを測定してレポートする機能は、パフォーマンスを診断し、長期的に改善していくにあたっては不可欠な要素です。[フィールド データ](/user-centric-performance-metrics/#in-the-field)がなければ、サイトに加えた変更が実際に望ましい結果をもたらしているかどうかを確認することができません。
+
+人気のある[リアル ユーザー モニタリング (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) アナリティクス プロバイダーの多くが、提供するツールですでに (数多くの[その他の Web Vitals](/vitals/#core-web-vitals) と同様に) [Core Web Vitals](/vitals/#other-web-vitals) 指標をサポートしています。こういった RUM アナリティクス ツールを現在ご利用中であれば、運営するサイト内のページが[推奨されている Core Web Vitals のしきい値](/vitals/#core-web-vitals)をどの程度満たしているかを評価し、将来的なパフォーマンスの低下を防止するという観点では申し分のない環境であると言えるでしょう。
+
+Core Web Vitals 指標をサポートしているアナリティクス ツールの使用をお勧めはしているものの、現在ご利用中のアナリティクス ツールがそれらをサポートしていないような場合でも、必ずしも使用するツールを切り替える必要はありません。ほとんどのアナリティクス ツールでは、[カスタム指標](https://support.google.com/analytics/answer/2709828)や[イベント](https://support.google.com/analytics/answer/1033068)を定義して測定する方法が提供されています。つまり、現在ご利用中のアナリティクス プロバイダーを使用しながらでも Core Web Vitals 指標を測定し、既存のアナリティクス レポートやダッシュボードへとそれらを追加できる可能性があるのです。
+
+このガイドでは、Core Web Vitals 指標 (またはカスタム指標) をサードパーティ製ツールや社内のアナリティクス ツールを用いて測定するためのベスト プラクティスについて説明を行います。また、自社のサービスに Core Web Vitals のサポートを追加したいと考えているアナリティクス ベンダー向けのガイドとしてもご利用いただけます。
+
+## カスタム指標またはイベントを使用する
+
+前述したように、ほとんどのアナリティクス ツールでカスタム データの測定を行うことができます。ご利用のアナリティクス ツールがこの機能をサポートしていれば、このメカニズムを使用して Core Web Vitals の各指標を測定することができるはずです。
+
+アナリティクス ツールを使用してカスタム指標やイベントを測定するためには、一般的に以下の 3 つの手順に従います。
+
+1. ツールの管理画面でカスタム指標の[定義または登録](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827)を行います (必要な場合)。*(注: すべてのアナリティクス プロバイダーでカスタム指標を事前に定義する必要があるわけではありません。)*
+2. フロントエンドの JavaScript コードで指標の値を計算します。
+3. 指標の値をアナリティクスのバックエンドへと送信し、名前または ID が手順 1 で定義したものに一致することを確認します *(必要な場合)*。
+
+手順 1 と 3 については、ご利用のアナリティクス ツールのドキュメンテーションを参照してください。手順 2 については、[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript ライブラリを使用して Core Web Vitals の各指標の値を計算することも可能です。
+
+次のコード サンプルでは、コードでこれらの指標を追跡し、アナリティクス サービスへと送信することがいかに簡単かを示しています。
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // 利用可能であれば `navigator.sendBeacon()` を使用し、`fetch()` にフォールバックします。
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## 分布のレポート方法
+
+カスタム指標やイベントを使用して Core Web Vitals の各指標の値を計算してアナリティクス サービスへと送信したら、次の手順として、収集した値を表示するレポートやダッシュボードの作成を行います。
+
+[推奨される Core Web Vitals のしきい値](/vitals/#core-web-vitals)を満たされていることを確認するには、レポートに各指標の 75 パーセンタイルの値を表示する必要があります。
+
+ご利用のアナリティクス ツールに分位数レポートが組み込まれていない場合には、すべての指標の値を昇順に並べ替えたレポートを作成することによって、このデータを手動で取得することができます。このレポートが生成されたら、レポートに含まれているすべての並べ替えられた値の完全なリストの中で 75% に相当する値を探します。その値こそが、75 パーセンタイルの値です。この方法は、データをどのようにセグメント化したとしても (デバイスの種類、接続の種類、国など) 同じです。
+
+ご利用のアナリティクス ツールが指標レベルのレポート粒度をデフォルトで提供していない場合でも、アナリティクス ツールが[カスタム ディメンション](https://support.google.com/analytics/answer/2709828)をサポートしていれば、同じ結果を得ることができるはずです。レポート構成にカスタム ディメンションを含めれば、追跡する個々の指標インスタンスごとに固有のカスタム ディメンション値を設定することで個々の指標インスタンスごとに分類されたレポートを生成することができるはずです。各インスタンスには固有のディメンション値があるため、グループ化は行われません。
+
+この手法の例としては、Google Analytics を利用した [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) が挙げられます。このレポートのコードは[オープン ソース](https://github.com/GoogleChromeLabs/web-vitals-report)化されているため、開発者の方がこのセクションで説明した技術のサンプルとしてこれらを参照することが可能です。
+
+<img src="https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png" no="" alt="Web Vitals Report のスクリーンショット">
+
+{% Aside %}ヒント: [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript ライブラリでは、レポートされた各指標インスタンスに ID を提供しており、これによってほとんどのアナリティクス ツールで分布を構築できるようにしています。詳細については、[`Metric`](https://github.com/GoogleChrome/web-vitals#metric) (指標) インターフェースのドキュメンテーションを参照してください。{% endAside %}
+
+## 適切なタイミングでデータを送信する
+
+パフォーマンス指標の中には、ページの読み込みが完了した時点ですぐに計算できるものもあれば、CLS のようにページの表示期間全体を考慮し、ページのアンロードが開始された時点で初めて確定するものもあります。
+
+ただし、`beforeunload` と `unload` イベントの両方が (特にモバイル環境では) 信頼性が低く、その使用が[推奨されていない](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid)ため (ページが [Back-Forward Cache](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache) の対象となることを妨げてしまう可能性があるため)、これが原因となって問題を引き起こしてしまう可能性があります。
+
+ページの表示期間全体を追跡する指標の場合には、ページの可視性の状態が `hidden` に変化したときには、指標の現在の値にかかわらず `visibilitychange` イベントの発生中に送信を行うことが最善の処理となります。これは、ページの可視性の状態が `hidden` に変更された時点で、そのページのスクリプトが再度実行可能となる保証がないからです。これは、ページのコールバックが発生していない状態でブラウザー アプリそのものを閉じることができるモバイル OS において特に顕著に見られます。
+
+なお、一般的にモバイル OS では、タブを切り替えたり、アプリを切り替えたり、ブラウザー アプリそのものを閉じたりした場合に `visibilitychange` イベントが発生します。また、タブを閉じた場合や新しいページに移動した場合にも `visibilitychange` イベントが発生します。そのため、`visibilitychange` イベントは `unload` や `beforeunload` イベントよりもはるかに信頼性が高くなります。
+
+{% Aside 'gotchas' %}[いくつかのブラウザのバグ](https://github.com/w3c/page-visibility/issues/59#issue-554880545)により、`visibilitychange` イベントが発生しない場合もあります。独自のアナリティクス ライブラリを構築している場合には、これらのバグにご注意ください。なお、[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript ライブラリでは、それらのバグをすべて明らかにすることが可能です。{% endAside %}
+
+## パフォーマンスを経時的に監視する
+
+アナリティクスの実装を更新し、Core Web Vitals 指標の追跡およびレポートが可能になったら、次の手順として、サイトの変更がパフォーマンスに及ぼす影響を経時的に追跡していきましょう。
+
+### 変更内容のバージョン管理を実施する
+
+変更内容を追跡するにあたっての素朴な (そして最終的には信頼ができない) アプローチとして、変更内容を本番環境にデプロイし、デプロイ日以降に受信した指標データがすべて新しいサイトに対応し、デプロイした日以前に受信した指標データがすべて旧サイトに対応していると仮定するアプローチが挙げられます。しかしながら、様々な要因 (HTTP、Service Worker、CDN 層でのキャッシングを含む) により、このアプローチが機能しなくなる可能性があります。
+
+より良いアプローチとしては、デプロイされた変更ごとに固有のバージョンを作成し、そのバージョンをアナリティクス ツールで追跡する方法があります。ほとんどのアナリティクス ツールではバージョンの設定がサポートされています。ご利用のツールが対応していない場合には、カスタム ディメンションを作成し、そのディメンションをデプロイされたバージョンに設定することができます。
+
+### 実験を行う
+
+バージョン管理をさらにもう一歩前進させ、複数のバージョン (または実験) を同時に追跡することができます。
+
+ご利用のアナリティクス ツールで実験グループを定義できる場合には、その機能をご利用ください。そうではない場合には、カスタム ディメンションを使用することで、レポートの中で各指標の値が特定の実験グループに関連付けられるように設定することができます。
+
+アナリティクスで実験を行うことにより、一部のユーザーに対して実験的な変更を適用し、その変更適用時のパフォーマンスをコントロール グループのユーザーによるパフォーマンスと比較することができるようになります。その変更によって確実にパフォーマンスが改善されたという確証が得られた場合には、その変更内容をすべてのユーザーに対して展開することができます。
+
+{% Aside %}実験グループについては、必ずサーバー上で設定するようにしてください。クライアント側で動作する実験ツールや A/B テスト ツールの使用は避けてください。一般的にこういったツールはユーザーの実験グループが決定されるまでの間レンダリングをブロックするため、LCP の値に悪影響を及ぼす可能性があります。{% endAside %}
+
+## 測定がパフォーマンスに影響を与えないようにする
+
+実際のユーザーのパフォーマンスを測定する際には、実行するパフォーマンス測定コードがページのパフォーマンスに対して絶対に悪影響を及ぼさないようにすることが重要です。もしも影響を与えてしまっているとすれば、パフォーマンスがビジネスに与える影響についてあなたが導き出そうとしている結論は信頼性を失ってしまいます。これは、アナリティクス コードそのものが最大の悪影響を及ぼしている可能性を否定することができないためです。
+
+RUM アナリティクスのコードを本番環境にデプロイする場合には、必ず以下の原則に従ってください。
+
+### アナリティクスを先送りする
+
+アナリティクス コードは常に非同期かつブロックが発生しない方法で読み込む必要があり、一般的には一番最後に読み込む必要があります。ブロックが発生する方法でアナリティクス コードを読み込んでしまうと、LCP に悪影響を及ぼす可能性があります。
+
+Core Web Vitals の測定に使用されるすべての API は ([`buffered`](https://www.chromestatus.com/feature/5118272741572608) フラグを介して) 非同期または遅延型のスクリプト読み込みをサポートするよう特別に設計されているため、スクリプトの読み込みタイミングを無理に早める必要はありません。
+
+ページの読み込みタイムラインの後半では計算ができないような指標を測定する場合には、早いタイミングで実行する必要のあるコード*のみ*を ([レンダリングを妨げるリクエスト](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)にならないように) ドキュメントの `<head>` 内にインライン化し 、残りの部分を先送りします。必要な指標が 1 つあるという理由だけで、すべてのアナリティクスを早いタイミングで読み込まないようにしてください。
+
+### 長く時間がかかっているタスクを作らない
+
+アナリティクス コードはしばしばユーザーの入力に応じて実行されますが、アナリティクス コードが多数の DOM 測定を行っていたり、その他のプロセッサに負荷がかかる API を使用していたりすると、アナリティクス コード自体が入力に対する応答性を低下させる原因となってしまいます。また、アナリティクス コードを含む JavaScript ファイルのサイズが大きい場合、そのファイルの実行によりメイン スレッドがブロックされ、FID に悪影響を及ぼしてしまいます。
+
+### ノンブロッキング API を使用する
+
+ <code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code> や <code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code> などの API は、ユーザーにとって重要なタスクをブロックすることなく重要ではないタスクを実行できるように、特別に設計されています。
+
+これらの API は、RUM アナリティクス ライブラリでの使用に最適なツールです。
+
+一般的に、すべてのアナリティクス ビーコンは `sendBeacon()` API を使用して送信される必要があります。また、すべての受動的なアナリティクス測定コードは、アイドル期間中に実行される必要があります。
+
+{% Aside %}アイドル時間を最大限に活用しつつ、必要なとき (ユーザーがページをアンロードするときなど) にコードを緊急実行できるようにする方法のガイダンスについては、idle-until-urgent パターンに関する[こちらの記事](https://philipwalton.com/articles/idle-until-urgent/)を参照してください。{% endAside %}
+
+### 必要以上に追跡しない
+
+ブラウザーは多くのパフォーマンス データを提供してくれますが、データが利用可能だからといって必ずしもそれらを記録し、アナリティクス サーバーへと送信する必要はありません。
+
+たとえば [Resource Timing API](https://w3c.github.io/resource-timing/) では、ページに読み込まれるすべてのリソースについての詳細なタイミング データが提供されています。しかしながら、それらのデータすべてがリソースの読み込みパフォーマンスの改善に必要であったり、役に立ったりするとは考えられません。
+
+要するに、データがそこにあるからという理由でただ追跡するのではなく、データを追跡するためのリソースを消費する前に、そのデータが使用されることを確認する必要があるのです。
diff --git a/src/site/content/ja/blog/vitals-measurement-getting-started/index.md b/src/site/content/ja/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..fbf51262d18
--- /dev/null
+++ b/src/site/content/ja/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: Web Vitals の測定を開始する
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: 月単位のグラフと、LCP、FID、CLS と表示されているストップウォッチ。
+description: 実際の環境とラボ環境の両方でサイトのWebバイタルを測定する方法を学びます。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+運営するサイトの改善を行う場合には、Web Vitals データの収集がその第一歩となります。分析内容を充実させるためには、実際のユーザー環境とラボ環境の両方でパフォーマンス データを収集する必要があります。Web Vitals の測定は最小限のコード変更で十分実施が可能であり、ツールについては無料のものを利用することができます。
+
+## RUM データを使用して Web Vitals を測定する
+
+[リアル ユーザー モニタリング](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) データはフィールド データとも呼ばれ、サイトを訪問した実際のユーザーが体験したパフォーマンスをキャプチャしたものです。RUM データは、サイトが[推奨されている Core Web Vitals のしきい値](/vitals/)を満たしているかどうかを Google が判断するために使用されます。
+
+### はじめに
+
+RUM を設定していない場合には、以下のツールを使用することで実際の環境でのサイトのパフォーマンスに関するデータをすばやく収集することができます。これらのツールはすべて同じ基本的なデータ セット ([Chrome User Experience Report](https://developer.chrome.com/docs/crux/)) をベースにしていますが、ユース ケースは若干異なります。
+
+- **PageSpeed Insights (PSI)**: [PageSpeed Insights](https://pagespeed.web.dev/) は、過去 28 日間に渡るパフォーマンスをページレベルやオリジンレベルで集約し、レポートします。また、パフォーマンスの改善につながる提案もご確認いただけます。運営するサイトの Web Vitals の測定および改善を開始する方法を 1 つに絞ってお勧めするとすれば、PSI を使用したサイトの監査をお勧めします。PSI は、[Web](https://pagespeed.web.dev/) サイト上でご利用いただくか、[API](https://developers.google.com/speed/docs/insights/v5/get-started) としてご利用いただくことができます。
+- **Search Console**: [Search Console](https://search.google.com/search-console/welcome) は、パフォーマンス データをページ単位でレポートします。そのため、改善が必要なページを特定する場合に適しています。PageSpeed Insights とは異なり、Search Console のレポートには過去のパフォーマンス データが含まれています。Search Console は、ご自身が運営する所有権が確認されたサイトでのみご利用いただけます。
+- **CrUX ダッシュボード**: [CrUX ダッシュボード](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard)は、選択したオリジンの CrUX データを確認することができる、構築済みのダッシュボードです。Data Studio 上に構築されており、セットアップには約 1 分かかります。PageSpeed Insights や Search Console と比較すると、CrUX ダッシュボードが提供するレポートはデータをより多彩な視点から提供しています。たとえば、データをデバイスや接続タイプごとに分類することなどが可能です。
+
+上記のツールは Web Vitals の測定を初めて行う場合に適しているものですが、それ以外の文脈においても有用であることを覚えておくとよいかもしれません。特に CrUX と PSI は API としても提供されており、[ダッシュボードの構築](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o)やその他のレポートの作成にも活用することができます。
+
+### RUM データの収集
+
+CrUX ベースのツールは Web Vitals のパフォーマンスを調査するにあたっての良い入門ツールとなりますが、データについては独自の RUM から取得したものの使用を強くお勧めします。ご自身で収集した RUM データは、サイトのパフォーマンスに関するより詳細なフィードバックをすばやく提供します。これにより、問題の特定や利用可能なソリューションのテストが容易になります。
+
+{% Aside %}CrUX ベースのデータ ソースは約 1 か月の粒度でデータをレポートしますが、データの詳細はツールごとに若干異なります。たとえば、PSI と Search Console は過去 28 日間に渡って観測されたパフォーマンスをレポートしますが、CrUX のデータセットやダッシュボードは月単位に分かれています。{% endAside %}
+
+RUM データは、専用の RUM プロバイダーを使用するか、または独自のツールをセットアップすることで収集が可能です。
+
+専用の RUM プロバイダーは、RUMデータの収集およびレポートに特化しています。こういったサービスを使用して Core Web Vitals を測定する場合には、自身が運営するサイトで Core Web Vitals のモニタリングを有効にすることについて、ご利用の RUM プロバイダーまでお問い合わせください。
+
+RUM プロバイダーを利用していない場合でも、[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)を使用して既存のアナリティクス セットアップを補強し、これらの指標に関するデータ収集やレポートを行うことができる可能性があります。この方法の詳細については、以下で詳しく説明します。
+
+### web-vitals JavaScript ライブラリ
+
+Web Vitals のために独自の RUM セットアップを実装する場合、[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)の使用が Web Vitals の測定値の収集にあたって最も簡単な方法となります。`web-vitals` は、[実際のユーザー環境で測定が可能な](/user-centric-performance-metrics/#in-the-field)各 Web Vitals 指標を収集してレポートする場合に便利な API を提供する、軽量なモジュール式のライブラリです (最大 1KB)。
+
+Web Vitals を構成する指標は、ブラウザーに組み込まれたパフォーマンス API から直接提供されるものではなく、それらの上に構築されています。たとえば、[Cumulative Layout Shift (累積レイアウト シフト数、CLS)](/cls/) は [Layout Instability API](https://wicg.github.io/layout-instability/) を使用して実装されています。`web-vitals` を使用すれば、これらの指標を自分で実装する場合でも心配する必要がなくなります。また、収集したデータが各指標の方法論やベスト プラクティスに一致していることも保証されます。
+
+`web-vitals` の実装に関する詳細については、「[ドキュメンテーション](https://github.com/GoogleChrome/web-vitals)」や「[実際のユーザー環境で Web Vitals を測定するためのベスト プラクティス](/vitals-field-measurement-best-practices/)」ガイドを参照してください。
+
+### データの集約
+
+`web-vitals` を使用して収集した測定値のレポートは必須の手順です。このデータが測定されていたとしても、レポートされなければ誰もそれを確認することができません。`web-vitals` のドキュメンテーションには、データを[ジェネリック API エンドポイント](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint)、[Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics)、[Google Tag Manager](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager) へと送信する方法を示すサンプルが含まれています。
+
+すでにお気に入りのレポート ツールがある場合には、そのツールの利用をご検討ください。そうでない場合には、無料の Google Analytics をこの目的でご利用いただくことが可能です。
+
+使用するツールを検討する場合には、誰がデータにアクセスする必要があるのかを考慮に入れるとよいでしょう。一般的に企業においては、単一の部門ではなく会社の全体がパフォーマンスの向上に対する関心を持っている場合に最大のパフォーマンスを達成することができます。「[Web サイトのスピードを部門横断的に修復する](/fixing-website-speed-cross-functionally/)」では、さまざまな部門から賛同を得る方法を紹介しています。
+
+### データの解釈
+
+パフォーマンス データを分析する際には、分布の末端に注意を払うことが重要になります。RUM データを確認してみると、あるユーザーのエクスペリエンスは高速なのに、別のユーザーのエクスペリエンスについては低速であるというように、パフォーマンスに大きなばらつきがあることが見て取れます。しかしながら、データの要約に中央値を使用してしまうと、このような挙動を簡単に覆い隠してしまいます。
+
+Web Vitals に関しては、Google では対象となるサイトやページが推奨されているしきい値を満たしているかどうかを判断するために、中央値や平均値などの統計ではなく "良い" ユーザー エクスペリエンスの割合を使用しています。具体的には、Core Web Vitals のしきい値を満たしていると判断されるためには、ページ訪問数の 75% が各指標の "良い" しきい値を満たしている必要があります。
+
+## ラボ データを使用して Web Vitals を測定する
+
+[ラボ データ](/user-centric-performance-metrics/#in-the-lab)は合成データとも呼ばれ、実際のユーザーではなく、制御された環境から収集されます。RUM データとは異なり、ラボ データはプリプロダクション環境から収集されるため、開発者のワークフローや継続的な統合プロセスに組み込むことが可能です。合成データを収集するツールの例としては、Lighthouse や WebPageTest が挙げられます。
+
+### 考慮事項
+
+RUM データとラボ データの間には、常に矛盾が生じています。これは、ラボ環境のネットワーク状況、デバイスの種類、場所などがユーザーの環境と大きく異なる場合には特に当てはまります。しかしながら、特に Web Vitals 指標のラボ データを収集する場合には、以下のような重要な考慮事項が複数存在します。
+
+- **Cumulative Layout Shift (CLS):** ラボ環境で測定された [Cumulative Layout Shift](/cls/) の値は、RUM データで観測される CLS に比べて人為的に低くなる可能性があります。CLS は、"*ページの全表示期間中*に発生した予期しないレイアウト シフトについて、個々のレイアウト シフト スコアを合計したもの。" として定義されています。しかしながら、ページの表示期間は実際のユーザーが読み込んだ場合と人工的なパフォーマンス測定ツールが読み込んだ場合とで一般的に大きく異なります。多くのラボ ツールではページは読み込まれるだけで、操作は行われません。その結果として、最初のページ読み込みに付随して発生するレイアウト シフトしか捕捉することができません。これに対し、RUM ツールを用いて測定される CLS は、ページの表示期間全体を通して発生する[予期しないレイアウト シフト](/cls/#expected-vs-unexpected-layout-shifts)を捕捉することができます。
+- **First Input Delay (初回入力までの遅延時間、FID):** [First Input Delay](/fid/) の測定にあたってはユーザーがページを実際に操作する必要があるため、ラボ環境では測定することができません。そのため、[Total Blocking Time](/tbt/) (合計ブロック時間、TBT) が FID のラボ環境での代替指標として推奨されています。TBT は、"First Contentful Paint (視覚コンテンツの初期表示時間、FCP) から Time to Interactive (操作可能になるまでの時間、TTI) までの間で、ユーザーの入力にページが応答できないようにブロックされている時間の合計" を測定します。FID と TBT の計算方法は異なりますが、どちらも起動プロセス中にメイン スレッドがブロックされている状態を反映しています。メイン スレッドがブロックされると、ブラウザーによるユーザーの操作への応答が遅れます。FID は、ユーザーが初めてページの操作を試みたときに発生する遅延 (もしあれば) を測定します。
+
+### ツール
+
+Web Vitals のラボ測定値の収集には、以下のツールが使用可能です。
+
+- **Web Vitals Chrome Extension:** Web Vitals Chrome [拡張機能](https://github.com/GoogleChrome/web-vitals-extension)は、指定されたページの Core Web Vitals (LCP、FID、CLS) を測定してレポートします。このツールは、開発者がコードを変更する際にリアルタイムでのパフォーマンス フィードバックを提供することを目的としています。
+- **Lighthouse:** Lighthouse は、LCP、CLS、TBT をレポートし、パフォーマンスを改善できる可能性がある部分を強調表示する機能を持っています。Lighthouse は、Chrome DevTools、Chrome 拡張機能、npm パッケージとして提供されています。Lighthouse は、[Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) を介して継続的な統合ワークフローに組み込むことも可能です。
+- **WebPageTest:** [WebPageTest](https://webpagetest.org/) では、標準レポートの一部に Web Vitals が含まれています。WebPageTest は、特定のデバイスやネットワーク状況下での Web Vitals の収集に役立ちます。
diff --git a/src/site/content/ja/blog/vitals-tools/index.md b/src/site/content/ja/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..2a7603d39b6
--- /dev/null
+++ b/src/site/content/ja/blog/vitals-tools/index.md
@@ -0,0 +1,157 @@
+---
+title: Core Web Vitals を測定するためのツール
+subhead: ご利用の開発ツールでも Core Web Vitals を測定することができるようになりました。
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: Lighthouse、PageSpeed Insights、Chrome UX Report などを含む人気の高い Web 開発者向けツールを対象として新しく発表された、Core Web Vitals の測定サポートについて説します。
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Chrome User Experience のロゴ、PageSpeed Insights のロゴ、Lighthouse のロゴ、Search Console のロゴ、Chrome DevTools のロゴ、Web Vitals Extension のロゴ。
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+先日発表された [Web Vitals](/vitals/) イニシアチブでは、すべてのサイトが Web 上で優れたユーザーエクスペリエンスを提供するために不可欠となる品質シグナルに関する統一的なガイダンスを提供させていただきました。そしてこのたび、**Web 開発者向けに提供されている Google の人気ツールのすべてで Core Web Vitals の測定がサポート**されるようになり、ユーザー エクスペリエンスに関する問題をより簡単に診断および修正できるようになりました。これには、[Lighthouse](https://github.com/GoogleChrome/lighthouse)、[PageSpeed Insights](https://pagespeed.web.dev/)、[Chrome DevTools](https://developer.chrome.com/docs/devtools/)、[Search Console](https://search.google.com/search-console/about)、[web.dev の測定ツール](/measure/)、[Web Vitals Chrome 拡張機能](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)、そして新しい [Chrome UX Report](https://developer.chrome.com/docs/crux/) API が含まれています。
+
+Google 検索には、[ページ エクスペリエンス](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)を評価するための基盤として Core Web Vitals が含まれるようになりました。これらの指標が可能な限りいつでも利用可能で、実用的であることはとても重要です。
+
+<figure>{% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Core Web Vitals の指標をサポートする Chrome および検索ツールの概要", width="800", height="509" %}</figure>
+
+{% Aside 'key-term' %}**ラボ測定を実施するためのツール**は、*潜在的なユーザー*があなたの Web サイトをどのように体験するかについての分析情報を提供し、デバッグに必要な再現性のある結果を提供します。**フィールド測定**を実施するためのツールは、*実際のユーザー*があなたの Web サイトをどのように体験しているかについての分析情報を提供します。このタイプの測定は、しばしばリアル ユーザー モニタリング (RUM) と呼ばれています。[ラボ測定またはフィールド測定を実施するためのツール](/how-to-measure-speed/#lab-data-vs-field-data)のそれぞれが、ユーザー エクスペリエンスの最適化に役立つ異なる価値を提供します。{% endAside %}
+
+Core Web Vitals を使用したユーザー エクスペリエンスの最適化を開始するには、以下のワークフローをお試しください。
+
+- Search Console の新しい Core Web Vitals Report を使用して、注意が必要なページのグループを (フィールド データに基づいて) 特定します。
+- 作業が必要なページを特定したら、(Lighthouse と Chrome UX Report を活用した) PageSpeed Insights を使用して、ページのラボ環境および実際のユーザー環境での問題を診断します。PageSpeed Insights (PSI) を Search Console から利用するか、URL を PSI に直接入力することが可能です。
+- ラボ環境があり、サイトをローカルで最適化する準備ができている場合には、Lighthouse と Chrome DevTools を使用して Core Web Vitals を測定することで、修正すべき点についての実用的なガイダンスを得ることができます。Web Vitals Chrome 拡張機能を使用すれば、各指標のリアルタイム ビューをデスクトップで確認することができます。
+- Core Web Vitals のカスタム ダッシュボードが必要な場合には、アップデートされた CrUX ダッシュボード、新しい Chrome UX Report API (フィールド データ向け)、PageSpeed Insights API (ラボ データ向け) などをご利用ください。
+- ガイダンスをお探しの場合には、web.dev/measure で PSI のデータを使用してあなたのページを測定し、優先度順に整理された最適化のためのガイドや Codelabs をご覧いただけます。
+- 最後にプル リクエストに Lighthouse CI を使用して、本番環境に変更内容をデプロイする前に Core Web Vitals の指標が悪化していないことを確認します。
+
+それでは、各ツールの具体的なアップデート内容をご紹介させていただきます。
+
+### Lighthouse
+
+Lighthouse は、開発者が問題を診断し、サイトのユーザー エクスペリエンスを向上させるために改善可能なポイントを特定するための自動 Web サイト監査ツールです。パフォーマンスやアクセシビリティなど、ユーザー エクスペリエンスの品質に関する様々な側面について、ラボ環境で測定を行います。Lighthouse の最新バージョン ([6.0](/lighthouse-whats-new-6.0/)、2020 年 5 月中旬リリース) には、付加的な監査、新しい指標、新しく構成されたパフォーマンス スコアが含まれています。
+
+<figure>{% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="最新の Core Web Vitals 指標を表示している Lighthouse 6.0", width="800", height="527" %}</figure>
+
+Lighthouse 6.0 では、レポートに 3 つの新しい指標が導入されました。そのうちの 2 つである [Largest Contentful Paint](/lcp/) (最大視覚コンテンツの表示時間、LCP) と [Cumulative Layout Shift](/cls/) (累積レイアウト シフト数、CLS) は、Core Web Vitals をラボ環境で実装したもので、ユーザー エクスペリエンスの最適化を行うために重要な診断情報を提供します。ユーザー エクスペリエンスを評価する上での重要性を考慮し、新しい指標は測定されレポートに含まれるだけでなく、パフォーマンス スコアの計算にも織り込まれています。
+
+Lighthouse に採用された 3 つ目の新しい指標である [Total Blocking Time](/tbt/) (合計ブロック時間、TBT) は、もう 1 つの Core Web Vitals 指標であり、フィールド指標である [First Input Delay](/fid/) (初回入力までの遅延時間、FID) と高い相関性を持っています。Lighthouse のレポートに記載されている推奨事項に従ってスコアを最適化することにより、ユーザーに対して可能な限り最高のユーザー体験を提供できるようになります。
+
+Lighthouse が活用されている製品は、マージされデプロイされる前にプル リクエストの Core Web Vitals を簡単に測定することができる [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) を含む最新バージョンを反映して更新されます。
+
+<figure>{% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="Largest Contentful Paint に関する様々なビューが表示されている Lighthouse CI", width="800", height="498" %}</figure>
+
+Lighthouse の最新のアップデートについては、「[Lighthouse 6.0 の最新情報](/lighthouse-whats-new-6.0/)」のブログ投稿を参照してください。
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/) (PSI) は、モバイル デバイスおよびデスクトップ デバイスにおける、ラボ環境や実際のユーザー環境でのパフォーマンスをレポートします。このツールは、特定のページで行われた実際のユーザー エクスペリエンスに関する概要情報 (Chrome UX Report を活用) と、サイトの所有者によるページのユーザー エクスペリエンスの改善に役立つ実用的な推奨事項 (Lighthouse を活用) を提供します。
+
+PageSpeed Insights や [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) も内部で Lighthouse 6.0 を使用するようにアップグレードされており、レポートのラボ セクションおよびフィールド セクションの両方で Core Web Vitals の測定をサポートするようになりました。Core Web Vitals は、以下のように青いリボンで表示されています。
+
+<figure>{% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="フィールド データおよびラボ データに分けて Core Web Vitals が表示されている PageSpeed Insights", width="800", height="873" %}</figure>
+
+[Search Console](https://search.google.com/search-console/) が注意が必要なページのグループに関する概要情報をサイトの所有者に提供する一方で、PSI はページのユーザー エクスペリエンスの改善機会をページごとに特定する際に役立ちます。PSI では、あなたのページがすべての Core Web Vitals について良好なユーザー体験を示すしきい値を満たしているかどうかを、レポートの上部に表示される **Passes the Core Web Vitals assessment** (Core Web Vitals の評価に合格) または **Does not pass the Core Web Vitals assessment** (Core Web Vitals の評価に不合格) を確認することで明確に判断することができます。
+
+### CrUX
+
+[Chrome UX Report](https://developer.chrome.com/docs/crux/) (CrUX) は、何百万もの Web サイトでの実際のユーザー エクスペリエンス データを集約したパブリック データセットです。これは、すべての Core Web Vitals の実際のユーザー環境でのバージョンを測定します。ラボ データとは異なり、CrUX のデータは実際のユーザー環境で[オプトインしたユーザー](https://developer.chrome.com/docs/crux/methodology/#user-eligibility)から取得されます。このデータを使用することで、開発者は自身または競合他社の Web サイトにおける実際のユーザー エクスペリエンスの分布を理解することができます。サイトに RUM がない場合でも、CrUX を使用すれば Core Web Vitals をすばやく簡単に評価できます。[BigQuery の CrUX データセット](https://developer.chrome.com/docs/crux/bigquery/)にはすべての Core Web Vitals についての詳細なパフォーマンス データが含まれており、月間スナップショットにてオリジンレベルでご覧いただけます。
+
+サイト パフォーマンスをユーザー目線で真に理解するための唯一の方法は、ユーザーがサイトを読み込み、操作を行っている実際の環境でパフォーマンスを測定することです。このタイプの測定方法は、一般的にリアル ユーザー モニタリング (または RUM) と呼ばれています。サイトに RUM を導入していなくても、CrUX を使用すれば Core Web Vitals をすばやく簡単に評価することができます。
+
+**CrUX API のご紹介**
+
+本日 Google は、[CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/) を発表させていただきます。これは、以下のフィールド指標に関するオリジンおよび URL レベルでの品質測定を開発ワークフローに簡単に統合することができる、高速かつ無料の方法です。
+
+- Largest Contentful Paint
+- Cumulative Layout Shift
+- First Input Delay
+- First Contentful Paint
+
+開発者はオリジンや URL でクエリを行なったり、様々な規格ごとに結果をセグメント化したりすることができます。API は毎日更新され、過去 28 日分のデータが集約されます (月単位で集計される BigQuery のデータセットとは異なります)。また、この API には Google が提供するもう 1 つの API である PageSpeed Insights API と同様の緩やかなパブリック API クォータ (1 日あたり 25,000 リクエスト) が設定されています。
+
+以下は、CrUX API を使用して Core Web Vitals の指標を**良い**、**改善が必要**、**悪い**の分布で可視化した[デモ](https://developer.chrome.com/blog/chrome-ux-report-api/)です。
+
+<figure>{% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Core Web Vitals の指標を表示している Chrome User Experience Report API のデモ", width="800", height="523" %}</figure>
+
+今後のリリースでは、API を拡張して CrUX のデータセットに含まれているその他の側面や指標にもアクセスできるようにする予定です。
+
+**新しくなった CrUX ダッシュボード**
+
+新しくデザインされた [CrUX ダッシュボード](http://g.co/chromeuxdash)ではオリジンのパフォーマンスを時系列で簡単に追跡することができ、すべての Core Web Vitals 指標の分布を監視できるようにもなりました。ダッシュボードの使用を開始するには、web.dev の「[Tutorial](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) (チュートリアル)」を参照してください。
+
+<figure>{% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="新しいランディング ページで Core Web Vitals の指標を表示している Chrome UX Report ダッシュボード", width="800", height="497" %}</figure>
+
+新しい Core Web Vitals ランディング ページが導入され、サイトのパフォーマンスを一目で確認できるようになりました。Google では、CrUX のすべてのツールに対する皆さまからのご意見をお待ちしております。ご意見やご質問は、Twitter アカウント [@ChromeUXReport](https://twitter.com/chromeuxreport) または [Google グループ](https://groups.google.com/a/chromium.org/g/chrome-ux-report)までお寄せください。
+
+### Chrome DevTools パフォーマンス パネル
+
+**エクスペリエンス セクションでのレイアウト シフト イベントのデバッグ**
+
+Chrome DevTools の**パフォーマンス** パネルに、予期しないレイアウト シフトの検出に役立つ**[エクスペリエンス セクション](https://developers.google.com/web/updates/2020/05/devtools#cls)**が新しく追加されました。これは、Cumulative Layout Shift の改善につながるページ上での視覚的不安定性に関する問題を発見して修正する際に役立ちます。
+
+<figure>{% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="パフォーマンス パネルに赤色で表示されている Cumulative Layout Shift", width="800", height="517" %}</figure>
+
+レイアウト シフトを選択すると、**Summary** (概要) タブにその詳細情報が表示されます。シフトの発生箇所を可視化するには、**Moved from** (移動元) フィールドと **Moved to** (移動先) フィールドにカーソルを合わせてください。
+
+**フッターに表示される Total Blocking Time を使用した操作に対する準備状況のデバッグ**
+
+Total Blocking Time (TBT) 指標は、ラボ ツールでの測定が可能な First Input Delay の優れた代替指標です。TBT は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する [First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/) と [Time to Interactive (操作可能になるまでの時間、TTI)](/tti/) の間の時間の合計を測定します。TBT をラボ環境で改善するパフォーマンスの最適化は、実際のユーザー環境でも同じように FID を改善してくれるはずです。
+
+<figure>{% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="DevTools のパフォーマンス パネルのフッターに表示されている Total Blocking Time", width="800", height="517" %}</figure>
+
+ページのパフォーマンスを測定する際に、Chrome DevTools の**パフォーマンス** パネルのフッターに TBT が表示されるようになりました。
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. **Record** (記録) をクリックします。
+2. ページの再読み込みを手動で行います。
+3. ページの読み込みが終わったら、記録を停止します。
+
+詳細については、「[DevTools (Chrome 84) の最新情報](https://developers.google.com/web/updates/2020/05/devtools#cls)」を参照してください。
+
+### Search Console
+
+Search Console の新しい [Core Web Vitals Report](https://support.google.com/webmasters/answer/9205520) は、CrUX の実際のユーザー環境で測定された (フィールド) データに基づいて、運営するサイト全体の中から注意が必要なページのグループを特定する際に役立ちます。URL のパフォーマンスは、状態、指標の種類、URL のグループ (類似した Web ページのグループ) ごとに分類されます。
+
+<figure>{% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Search Console の新しい Core Web Vitals Report", width="800", height="1000" %}</figure>
+
+このレポートは、LCP、FID、CLS という 3 つの Core Web Vitals 指標に基づいて作成されています。これらの指標について最低限のレポート データを持たない URL については、レポートから除外されます。新しいレポートをお試しいただき、あなたのオリジンのパフォーマンスの全体像を把握してみてください。
+
+Core Web Vitals に関連した問題を抱えるページの種類を特定したら、それらを代表するページに対して実施可能な具体的な最適化の提案を PageSpeed Insights を使用して確認することができます。
+
+#### web.dev
+
+[web.dev/measure](/measure/) では、ページのパフォーマンスを経時的に測定し、優先度順に整理された改善を行うためのガイドや Codelabs を確認することができます。web.dev/measure での測定には、PageSpeed Insights が使用されています。この測定ツールは、以下のように Core Web Vitals の指標にも対応しています。
+
+<figure>{% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="web.dev の測定ツールを使用して Core Web Vitals の指標を経時的に測定し、優先度順に整理されたガイダンスを確認することができます", width="800", height="459" %}</figure>
+
+### Web Vitals 拡張機能
+
+Web Vitals 拡張機能を使用すれば、デスクトップ版の Google Chrome で 3 つの Core Web Vitals 指標をリアルタイムに測定することができます。この拡張機能は、開発ワークフローの初期段階で問題を発見したり、Web を閲覧しながら Core Web Vitals のパフォーマンスを評価したりするための診断ツールとして役立てることができます。
+
+この拡張機能は、[Chrome ウェブストア](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)からインストールできるようになりました。是非ご利用ください。プロジェクトの [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) リポジトリへのフィードバックだけでなく、改善につながる貢献もお待ちしております。
+
+<figure>{% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Core Web Vitals がリアルタイムに表示されている Web Vitals Chrome 拡張機能", width="800", height="459" %}</figure>
+
+#### クイック ハイライト
+
+これで内容は以上です。次に実行可能な対応策を、以下にまとめました。
+
+- DevTools で **Lighthouse** を使用してユーザー エクスペリエンスを最適化し、実際のユーザー環境での Core Web Vitals を最適な状態に保つための準備を整えましょう。
+- **PageSpeed Insights** を使用して、ラボ環境と実際のユーザー環境での Core Web Vitals のパフォーマンスを比較しましょう。
+- 新しい **Chrome User Experience Report API** を使用して、あなたのオリジンと URL が過去 28 日間に渡って記録した Core Web Vitals パフォーマンスを確認しましょう。
+- DevTools の**パフォーマンス** パネルにある**エクスペリエンス** セクションとフッターを使用して特定の Core Web Vitals を深く調査し、デバッグを行いましょう。
+- **Search Console の Core Web Vitals Report** を使用して、あなたのオリジンが実際のユーザー環境でどのようなパフォーマンスを見せているかを確認しましょう。
+- **Web Vitals 拡張機能** を使用して、特定のページにおける Core Web Vitals のパフォーマンスをリアルタイムで追跡しましょう。
+
+6 月に開催される [web.dev Live](/live/) では、Core Web Vitals のツールについてより詳しいお話をさせていただきます。サインアップして、イベントに関する最新情報を手に入れましょう。
+
+Elizabeth と Addy (WebPerf 管理人)
diff --git a/src/site/content/ja/blog/web-share/index.md b/src/site/content/ja/blog/web-share/index.md
new file mode 100644
index 00000000000..f6c3b61b1e0
--- /dev/null
+++ b/src/site/content/ja/blog/web-share/index.md
@@ -0,0 +1,118 @@
+---
+title: Web ShareAPIを使用してOS共有UIと統合する
+subhead: Webアプリは、プラットフォーム固有のアプリと同じシステム提供の共有機能を使用できます。
+authors:
+  - joemedley
+date: 2019-11-08
+updated: 2021-07-09
+hero: image/admin/ruvEms3AeSZvlEI01DKo.png
+alt: Webアプリがシステム提供の共有UIを使用できることを示す図。
+description: Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じシステム提供の共有機能を使用できます。Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリへのリンク、テキスト、ファイルを共有できます。
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+stack_overflow_tag: web-share
+---
+
+Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じシステム提供の共有機能を使用できます。 Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリへのリンク、テキスト、およびファイルを共有できます。
+
+{% Aside %}共有は魔法の半分にすぎません。 Webアプリは共有ターゲットにすることもできます。つまり、プラットフォーム固有のアプリまたはWebアプリからデータ、リンク、テキスト、およびファイルを受信できます。アプリを共有ターゲットとして登録する方法の詳細については、[共有データの受信](/web-share-target/)の投稿を参照してください。{% endAside %}
+
+## 概念と使用方法
+
+<figure data-float="right">{% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="オプションとしてPWAがインストールされたシステムレベルの共有ターゲットピッカー。", width="370", height="349" %} <figcaption>オプションとしてPWAがインストールされたシステムレベルの共有ターゲットピッカー。</figcaption></figure>
+
+### 機能と制限
+
+Web共有には、次の機能と制限があります。
+
+- [HTTPS経由でアクセス](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features)するサイトでのみ使用できます。
+- クリックなどのユーザーアクションに応答して呼び出す必要があります。 `onload`ハンドラ経由で呼び出すことはできません。
+- URL、テキスト、またはファイルを共有できます。
+- 2021年1月の時点で、Safari、ChromiumフォークのAndroid、ChromeOS、WindowsのChromeで利用できます。 MacOS上のChromeはまだ開発中です。詳細については、 [MDN](https://developer.mozilla.org/docs/Web/API/Navigator/share#Browser_compatibility)を参照してください。
+
+### リンクとテキストの共有
+
+リンクとテキストを共有するには、 `share()`メソッドを使用します。これは、必須のプロパティオブジェクトを持つpromiseベースのメソッドです。ブラウザで`TypeError`を発生させないようにするには、オブジェクトに次のプロパティを1つ以上含める必要があります。`title`、`text`、`url`、または`files`。たとえば、URLなしでテキストを共有したり、その逆を行ったりすることができます。3つのメンバーすべてを許可すると、ユースケースの柔軟性が高まります。以下のコードを実行した後、ユーザーがターゲットとして電子メールアプリケーションを選択した場合を想像してみてください。`title`パラメータは、電子メールの件名、 `text`、メッセージ本文、およびファイル、添付ファイルになる場合があります。
+
+```js
+if (navigator.share) {
+  navigator.share({
+    title: 'web.dev',
+    text: 'Check out web.dev.',
+    url: 'https://web.dev/',
+  })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error));
+}
+```
+
+同じコンテンツの複数のURLがサイトにある場合は、現在のURLではなくページの正規URLを共有します。`document.location.href`を共有する代わりに、ページの`<head>`で正規URL `<meta>`タグをチェックし、それを共有します。これにより、ユーザーのエクスペリエンスが向上します。リダイレクトを回避するだけでなく、共有URLが特定のクライアントに適切なユーザーエクスペリエンスを提供することも保証します。たとえば、友人が共有しているモバイルURLをデスクトップコンピュータで見ると、デスクトップバージョンが表示されます。
+
+```js
+let url = document.location.href;
+const canonicalElement = document.querySelector('link[rel=canonical]');
+if (canonicalElement !== null) {
+    url = canonicalElement.href;
+}
+navigator.share({url});
+```
+
+### ファイルの共有
+
+ファイルを共有するには、最初に`navigator.canShare()`テストして呼び出します。`navigator.share()`呼び出しには、ファイルの配列が含まれます。
+
+```js/0-5
+if (navigator.canShare && navigator.canShare({ files: filesArray })) {
+  navigator.share({
+    files: filesArray,
+    title: 'Vacation Pictures',
+    text: 'Photos from September 27 to October 14.',
+  })
+  .then(() => console.log('Share was successful.'))
+  .catch((error) => console.log('Sharing failed', error));
+} else {
+  console.log(`Your system doesn't support sharing files.`);
+}
+```
+
+サンプルが`navigator.share()`ではなく、`navigator.canShare()`をテストすることによって、機能検出を処理しています。`canShare()`に渡されるデータオブジェクトは`files`プロパティのみをサポートします。画像、動画、音声、およびテキストファイルを共有できます。[(Chromiumで許可されているファイル拡張子を](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing)参照してください。) 将来、さらに多くのファイルタイプが追加される可能性があります。
+
+## Santa Trackerの事例研究
+
+<figure data-float="right">{% Img src="image/admin/2I5iOXaOpzEJlEbM694n.png", alt="共有ボタンを表示しているSanta Trackerアプリ。", width="343", height="600" %} <figcaption>Santa Tracke共有ボタン。</figcaption></figure>
+
+オープンソースプロジェクトである[Santa Tracke](https://santatracker.google.com/)は、Googleの休日の伝統です。毎年12月には、ゲームや教育体験でクリスマスを祝うことができます。
+
+2016年、Santa TrackeチームはAndroidでWeb Share APIを使用しました。このAPIはモバイルに最適でした。過去数年間、チームにとってはスペースが貴重であったため、モバイルの共有ボタンを削除しました。しかし、複数の共有ターゲットを持つという根拠を示すことはできませんでした。
+
+ところが、Web Share APIを使用すると、ボタンを1つ表示することができ、貴重なピクセルを節約できました。また、Web Shareで共有したユーザーは、APIを有効にしていないユーザーより約20%多いこともわかりました。[Santa Tracker](https://santatracker.google.com/)でWeb Shareの動作を確認してみてください。
+
+## ブラウザのサポート
+
+Web Share APIのブラウザーサポートには微妙な違いがあり、特定のメソッドがサポートされていることを前提にするのではなく、機能検出 (前のコードサンプルで説明) を使用することをお勧めします。
+
+2021年初めの時点で、APIを使用したタイトル、テキスト、およびURLの共有は、次のシステムでサポートされています。
+
+- macOSおよびiOSのSafari12以降。
+- AndroidのChrome75以降、ChromeOSとWindowsの89以降。
+
+APIを使用したファイル共有は、次のシステムでサポートされています。
+
+- macOSおよびiOS上のSafari15以降。
+- AndroidではChrome75以降、ChromeOSとWindowsでは89以降。
+
+(EdgeなどのほとんどのChromiumベースのブラウザは、対応するバージョンのChromeと同じ機能をサポートしています。)
+
+### APIのサポートを表示する
+
+Web Share APIを使用する計画がありますか。パブリックサポートは、Chromeチームが機能の優先順位を決定できるようにお手伝いしこの機能のサポートがどれほど重要であるのか他のブラウザベンダーに示します。
+
+[@ChromiumDev](https://twitter.com/ChromiumDev)にツイートして、このAPIをどこで、どのように使用されているのかお知らせください。ハッシュタグは[`#WebShare`](https://twitter.com/search?q=%23WebShare&src=recent_search_click&f=live)をお使いください。
+
+## 役立つリンク
+
+- [Web Shareデモ](https://w3c.github.io/web-share/demos/share-files.html)
+- [Scrapbook PWA](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/README.md#web-share-demo)
diff --git a/src/site/content/ja/blog/webrtc-standard-announcement/index.md b/src/site/content/ja/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..08f82f0f88d
--- /dev/null
+++ b/src/site/content/ja/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,40 @@
+---
+title: WebRTCは今W3CおよびIETF標準になりました
+subhead: |2
+
+  WebRTCの歴史、アーキテクチャ、ユースケース、および将来の概要。
+description: |2
+
+  WebRTCの歴史、アーキテクチャ、ユースケース、および将来の概要。
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+Web標準を定義するプロセスは、ブラウザ間の有用性、一貫性、および互換性を保証する長いプロセスです。本日、[W3CとIETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en)は、パンデミックの間中におそらく最も重要な標準の1つであるWebRTCの完成を示しています。
+
+{% Aside %}WebRTCの実装に関する実践的なチュートリアルについては、[WebRTCとのリアルタイム通信](https://codelabs.developers.google.com/codelabs/webrtc-web)コードラボをご覧ください。 {% endAside %}
+
+## 履歴 {: #history }
+
+WebRTCは、ブラウザ、モバイルアプリ、デスクトップアプリにリアルタイムの通信機能を提供するプラットフォームであり、通常はビデオ通話に使用されます。プラットフォームは、テクノロジーと標準の包括的なセットで構成されています。Googleは、ブラウザで実行できなかったAdobe Flashおよびデスクトップアプリケーションの代わりとして、2009年にWebRTCを作成するというアイデアを開始しました。前世代のブラウザベースの製品は、ライセンスされた独自テクノロジーの上に構築されました。ハングアウトなどの様々な製品がこのテクノロジーによって構築されました。その後、Googleはテクノロジーのライセンスを取得していた企業を獲得し、オープンソースのWebRTCプロジェクトとして利用できるようにしました。このコードベースはChromeに統合されており、WebRTCを使用するほとんどのアプリケーションによって使用されています。他のブラウザベンダーやMozilla、Microsoft、Cisco、Ericssonなどの業界リーダーとともに、WebRTCの標準化はW3CとIETFの両方で開始されました。2013年に、MozillaとGoogleは、ブラウザ間のビデオ通話の[デモを行いました](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html)。標準の進化を通じて、多くのアーキテクチャ上の議論がブラウザ間の実装の相違点につながり、互換性と相互運用性に挑戦しました。ほとんどの意見の相違は、過去数年間に基準が最終決定されたときに最終的に解決されました。WebRTC仕様には、互換性に対処するための[プラットフォームテストのフルセット](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned)とツールが付属しており、ブラウザはそれに応じて実装を大幅に調整しています。これにより、Web開発者が種々のブラウザの実装や仕様の変更にサービスを継続的に採用しなければならなかった困難の時期に終止符が打たれます。
+
+## アーキテクチャと機能{: #architecture }
+
+[`RTCPeerConnection` API](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection)は、WebRTC仕様の中心的な部分です。 `RTCPeerConnection`は、ピアツーピアプロトコルを使用して通信するために、異なるエンドポイント上で2つのアプリケーションを接続することを扱います。`PeerConnection` APIは、カメラとマイクにアクセスするための[`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) 、および画面コンテンツをキャプチャするための[`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia)と緊密に連携します。WebRTCを使用すると、オーディオやビデオのコンテンツ、および`DataChannel`介した任意のバイナリデータを含むストリームを送受信できます。オーディオとビデオを処理、エンコード、およびデコードするためのメディア機能は、WebRTC実装のコアを提供します。WebRTCはさまざまなオーディオコーデックをサポートしており、特に最も使用されて、用途が広いOpusがあります。WebRTCの実装は、Googleの無料で使用できるVP8ビデオコーデックとビデオ処理用のH.264の両方をサポートするために必要です。WebRTC接続は常に暗号化されます。これは、DTLSとSRTPの2つの既存のプロトコルを介して実現されます。 WebRTCは、ビデオコーデック（VP8、H264）、ネットワークトラバーサル（ICE）、トランスポート（RTP、SCTP）からメディア記述プロトコル（SDP）まで、既存の標準とテクノロジーに大きく依存しています。これは、50を超えるRFCで結び付けられています。
+
+## ユースケース：ミリ秒が問題になる場合{: #use-cases }
+
+WebRTCは、遠隔手術、システムモニタリング、自動運転車のリモートコントロール、バッファリングが不可能なUDP上に構築された音声通話やビデオ通話などのタイムクリティカルなアプリケーションで広く使用されています。 Google、Facebook、Cisco、RingCentral、Jitsiなどの企業のブラウザベースのビデオ通話サービスはほぼすべてWebRTCを使用しています。Google StadiaとNVIDIA GeForceは現在、WebRTCを使用して、知覚可能な遅延なしにクラウドからWebブラウザーにゲームプレイのストリームを取得しています。
+
+## パンデミックでビデオ通話のパフォーマンスに注目されています{: #performance }
+
+過去1年間で、WebRTCは、ブラウザー内からのビデオ通話の増加により、Chromeでの使用量が100倍に増加しました。パンデミックの間、ビデオ通話が人々の生活の基本的な部分になっていることを認識して、ブラウザベンダーは、ビデオ通話が依存するテクノロジーを最適化し始めました。これは、従業員と学生が自宅で仕事と勉強を始めた現状において、リソースを必要とする大規模な会議とビデオ会議でのビデオ効果がより一般的になるため、特に重要でした。過去1年間で、Chromeはビデオ通話でより30％までバッテリーに優しいものになり、頻繁に使用するシナリオに合わせてさらに最適化されています。 Mozilla、Apple、およびMicrosoftはすべてパンデミックをきっかけにWebRTCの実装を[大幅に改善](https://www.youtube.com/watch?v=YZROn-WsyO4)しました。特に、現在正式化されている標準に準拠していることを確認しています。
+
+## WebRTCの未来{: #未来}
+
+WebRTCは現在W3C標準として完成していますが、改善がまだ続いています。 [帯域幅を最大50％節約する](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/)新しいビデオコーデックAV1が、WebRTCおよびWebブラウザーで利用できるようになりました。オープンソースコードベースの継続的な改善により、遅延がさらに減少し、ストリーミングされるビデオの品質が向上することが期待されます。[WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/)は、新しいユースケースを有効にする補足APIを作成するイニシアチブを収集します。これらは、[スケーラブル映像符号化](https://www.w3.org/TR/webrtc-svc/)などの[既存の機能や、低レベルのコンポーネント](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md)へのアクセスを提供するAPIをより詳細に制御できるようにする、既存のAPIの拡張機能で構成されています。後者は、高性能のカスタムWebAssemblyコンポーネントを統合することにより、Web開発者が革新するための柔軟性を高めます。新たな5Gネットワークとよりインタラクティブなサービスの需要により、今後1年間でWebRTCに加えてサービスが継続的に増加すると予想されます。
diff --git a/src/site/content/ja/blog/yahoo-japan-identity-case-study/index.md b/src/site/content/ja/blog/yahoo-japan-identity-case-study/index.md
new file mode 100644
index 00000000000..c35f3a92449
--- /dev/null
+++ b/src/site/content/ja/blog/yahoo-japan-identity-case-study/index.md
@@ -0,0 +1,308 @@
+---
+layout: post
+title: Yahoo! JAPAN はパスワードレス認証で問い合わせを 25% 削減、ログイン時間も 2.6 倍速に
+subhead: >
+    Yahoo! JAPAN のパスワードレス認証について学ぶ
+description: |
+    Yahoo! JAPAN はパスワードレス認証を実現しました。そのアプローチと結果について学びましょう。
+authors:
+  - yuyaito
+  - agektmr
+  - alexandrawhite
+date: 2022-05-10
+hero: image/VbsHyyQopiec0718rMq2kTE1hke2/tqK2Tb4rUrxheagyYbDj.png
+alt: Many identical keys.
+tags:
+  - blog
+  - case-study
+---
+
+Yahoo! JAPAN は日本にて検索やニュースといったメディアサービス、e コマース、メールサービスなど、100を超えるサービスを提供している企業です。これらのサービスで利用するためのユーザーアカウントも長年提供し続け、月間のログインユーザーは 5,000 万を超える規模となっています。しかし、このユーザーアカウントを提供する中で、ユーザーアカウントに対しての攻撃を継続的に受けており、また、アカウントを継続利用する上での課題についてユーザーから問い合わせも多く頂いていました。これらの課題の多くはパスワードという認証手段に依存するものでした。また、当時、技術的にもパスワード以外の認証手段を提供するための機能やデバイスの普及が始まりつつありました。こういった背景のもと、Yahoo! JAPAN はパスワードによる認証からパスワードレスな認証へ移行すると判断しました。
+
+## なぜパスワードレスか
+
+Yahoo! JAPAN では以前、一般的なWebサービスのようにログイン ID とパスワードによる認証を基本としていました。しかし、パスワードは不正アクセスの被害を受ける可能性が高く、また、パスワードにまつわる問い合わせも非常に多い状況でした。
+
+パスワードに関連して様々な攻撃を観測しておりますが、パスワードリスト型攻撃やフィッシング詐欺などが中心となっています。上述したとおり、Yahoo! JAPAN が提供するサービスには e コマースなど金銭に関わるものがあるため不正アクセスの被害やアカウントを失った際のユーザーの被害が大きくなりがちです。
+
+パスワードリスト型攻撃が多い背景としては、複数のアプリや Web サイトでのパスワード使いまわしが多い現状があります。以下の数字は Yahoo! JAPAN が行ったアンケートの結果です。おおよそ 60% 以上のユーザーが複数のサービスでパスワードを使いまわしていると回答しており、パスワードリスト型攻撃が有効な攻撃方法となっていると考えられます。
+
+
+<ul class="stats">
+<div class="stats__item">
+<p class="stats__figure">
+50
+<sub>%</sub>
+</p>
+<p>50% 以上が ID / パスワードを 6 個以上使用</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+60
+<sub>%</sub>
+</p>
+<p>60% 以上が「複数のサービスでパスワードを使いまわしている」</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+70
+<sub>%</sub>
+</p>
+<p>最も利用されているログイン方法は「パスワード」で約 76%</p>
+</div>
+</ul>
+
+パスワードに関する問い合わせとしては、パスワードを忘れてしまったという問い合わせが大半でした。パスワードに関連して、ログイン ID も忘れてしまったという問い合わせもあり、これらの問い合わせだけで、最も多い時期ではアカウントにまつわる問い合わせの 1/3 以上を占めている状況でした。
+
+これらの状況を改善するべく、Yahoo! JAPAN はパスワードレスに移行すると判断しました。パスワードレスを進めることでセキュリティだけでなくユーザビリティについても改善できると考えています。
+
+セキュリティ観点ではユーザーの認証手段からパスワードを無くすことで、特にリスト型攻撃への被害を減らすことが出来、ユーザビリティ観点ではパスワードという記憶による認証に頼らない認証手段を提供することで、パスワードを忘れてログインできない、という事態を無くすことが出来ます。
+
+従来からいろいろなセキュリティ向上の取り組みを行っていましたが、単純にセキュリティが高いだけでは利用者に負担をかけるだけになってしまい、結果としてセキュリティの高い状態を実現できません。ユーザビリティを共に向上させられることや、セキュリティを高める必然性が伝わるようなコミュニケーションを心がける必要があると考えています。それが結果としてユーザビリティだけではなく、セキュリティを向上させることに
+繋がります。
+
+
+## Yahoo! JAPAN のパスワードレスの取り組み
+
+Yahoo! JAPAN ではパスワードレスを進めるため、いろいろな取り組みをしています。大別すると、
+
+1. パスワードに代わる認証手段の提供
+2. パスワードの無効化
+3. パスワードレスなアカウント登録
+
+の3つがあります。
+
+1、2 は既存の利用者に対して、3 は新規の利用者に対しての取り組みです。
+
+### 1. パスワードに代わる認証手段の提供
+
+パスワードを無効にするのであれば、パスワードに変わる認証手段を提供しなければいけません。
+
+Yahoo! JAPAN では、パスワードの代替として主に下記のような手段を提供しています。
+
+1.  [SMS 認証](/sms-otp-form/)
+2.  [FIDO 認証](https://developers.google.com/identity/fido)
+
+加えて、メール認証やパスワード + SMS OTP、パスワード + メール OTP などの認証手段も提供しています。
+
+#### SMS 認証
+
+SMS 認証は、ログインしようとしているユーザーが登録・確認済みの電話番号に SMS で 6 桁程度の認証用コードを送り、そのコードの入力によって認証する仕組みです。ユーザーは SMS が届くと、アプリを開いて認証用コードを記憶、もしくはコピーして入力する必要がありました。
+
+<figure class="screenshot">
+{% Img
+   alt="",
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/h08m9uzVJg9uNzM3LE5k.jpg", width="668", height="437"
+%}
+</figure>
+
+iOS では以前から SMS を OS が読み取り本文中の認証用コードをサジェストする機能がありましたが、最近では、`input` 要素の `autocomplete` 属性に `"one-time-code"`と指定することで、サジェストが利用できるようになりました。Android や Windows、Mac の Chrome でも、[WebOTP API](https://developer.mozilla.org/docs/Web/API/WebOTP_API) という仕組みを利用することによって同様の体験を提供可能になっています。
+
+HTML
+
+```html
+<form>
+  <input type="text" id="code" autocomplete="one-time-code"/>
+  <button type="submit">sign in</button>
+</form>
+```
+
+JavaScript
+
+```javascript
+if ('OTPCredential' in window) {
+  const input = document.getElementById('code');
+  if (!input) return;
+  const ac = new AbortController();
+  const form = input.closest('form');
+  if (form) {
+    form.addEventListener('submit', e => {
+      ac.abort();
+    });
+  }
+  navigator.credentials.get({
+    otp: { transport:['sms'] },
+    signal: ac.signal
+  }).then(otp => {
+    input.value = otp.code;
+  }).catch(err => {
+    console.log(err);
+  });
+}
+```
+
+いずれのアプローチも、SMS 文中にドメインを記載することで、指定されたドメインでのみサジェストすることにより、フィッシングされにくい仕組みになっています。 WebOTP API および `autocomplete="one-time-code"` についての詳細は[こちらの記事](/sms-otp-form/)をご覧ください。
+
+<figure class="screenshot">
+{% Img
+   alt="",
+   src="image/VbsHyyQopiec0718rMq2kTE1hke2/Szaf3C0hfjLNkTWAVf9B.png", width="387", height="523"
+%}
+</figure>
+
+#### FIDO / WebAuthn
+
+FIDO / WebAuthn はハードウェア認証器で公開鍵暗号ペアを生成し、所持証明する認証方式です。特にスマートフォンが認証器の場合は、指紋センサーや顔識別といった生体認証と組み合わせて、一段階二要素認証を行うことができます。この際、サーバーには署名と生体認証が成功したという情報のみが送られるため、生体情報が盗まれる危険性はありません。
+
+下記の図は FIDO / WebAuthn を行うサーバ/クライアントの構成図です。Client にある Authenticator は生体認証などを用いてユーザーの認証を行い、その結果に対して公開鍵暗号方式による署名を行います。また、署名作成に用いる秘密鍵を [TEE (Trusted Execution Environment)](https://en.wikipedia.org/wiki/Trusted_execution_environment) などに安全に保管します。FIDO では FIDO を利用するサービス提供者などのことを RP と呼びますが、RP のアプリケーションは OS、Browser を通して Authenticator から取得した検証結果を Server に送信し、Server は検証結果の妥当性を検証することで認証を完了します。
+
+<figure>
+   {% Img
+      src="image/VbsHyyQopiec0718rMq2kTE1hke2/PkFYWnOZABjPu7Zc7rXN.png", alt="", width="800", height="400"
+   %}
+</figure>
+
+詳しくは[こちらの記事](https://fidoalliance.org/fido-authentication/)をご覧ください。
+
+FIDO についてはデバイスの対応も進み、現在では下記のような対応状況となっています。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+       <tr>
+   <td>
+    <strong>OS</strong>
+   </td>
+   <td>
+    <strong>FIDO サポート</strong>
+   </td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+   <td>
+    Android
+   </td>
+   <td>
+    アプリ、ブラウザ (Chrome)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    iOS
+   </td>
+   <td>
+    アプリ (iOS14 以降)、ブラウザ (Safari 14 以降)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    Windows
+   </td>
+   <td>
+    ブラウザ (Edge, Chrome, Firefox)
+   </td>
+  </tr>
+  <tr>
+   <td>
+    Mac (Big Sur 以降)
+   </td>
+   <td>
+    ブラウザ (Safari, Chrome)
+   </td>
+  </tr>
+</tbody>
+  </table>
+</div>
+
+また、Yahoo! JAPAN ではこのうち、Android アプリ  / Web、iOS アプリ / Web、Windows (Edge、Chrome、Firefox)、Mac (Safari、Chrome)で FIDO に対応しています。コンシューマー向けのサービスとしてはおおよそのデバイスで FIDO は使える状況と言えますので、パスワードレスを進める上で FIDO はとても良い選択肢だと考えています。
+
+Yahoo! JAPAN ではユーザーが他の手段で認証後、FIDO / WebAuthn を登録していなければ、登録を推奨します。こうすることで、ユーザーが同じデバイスでログインする必要がある場合、例えば SMS 認証を繰り返すことなく、指紋認証だけですぐに認証することができ、ユーザー体験が向上します。
+
+<figure class="alignright">
+  {% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/iq0dODcbp3WcPUGTwHkl.png", width="520", height="497", class="screenshot", alt="" %}
+  <figcaption>Yahoo! JAPAN で利用される FIDO</figcaption>
+</figure>
+
+ただし、登録した生体認証は同じデバイスでしか利用できないため、ユーザーは新しいデバイスに移る度に別の手段で認証し、新しく生体認証を登録する必要があります。
+
+パスワードレスの普及を段階的に進めるためには、その過程でパスワードから移行中のユーザーを含め、複数の認証手段をユーザーに提供する必要があります。複数の認証手段を提供すると、ユーザーによって認証手段の設定状態も違いますし、ブラウザによって使える認証手段も違います。さらには、前回の認証手段と同じ認証手段でのログインができるとユーザーにとっては良い体験となると思います。これらの要件を満たすため、前回認証に用いた認証手段が何であるか、Cookie などに情報を保持してクライアントに紐づけて管理したり、認証時に利用しているブラウザ / アプリを分析する必要があります。認証時はユーザーの設定状態、クライアントで前回行われた認証手段、最低限必要な認証のレベルなどから判断して適切な認証手段をユーザーに求めます。
+
+### 2. パスワードの無効化
+
+Yahoo! JAPAN ではパスワードの代替となる認証手段をユーザーに設定してもらった上でパスワードを無効化し、パスワードを使えないようにしています。パスワードの代替となる認証手段を設定するだけではなく、パスワードを使えなくすること（もしくはパスワードだけでサインイン出来なくすること）によって初めてリスト型攻撃への防御となります。
+
+ここで問題となるのが、如何にユーザーにパスワードを無効化してもらうかということです。ユーザーにパスワードを無効化してもらえるよう、下記のような取り組みを行っています。
+
+* ユーザーがパスワードを再設定する場面でパスワードの代替となる認証手段を訴求
+* 頻度高く認証を求める場面で使いやすい認証手段（FIDO など）の設定とともにパスワードの無効化を訴求
+* e コマースの決済のようなリスクの高いサービスを利用する前にパスワードの無効化を訴求
+
+特にパスワードを忘れた場合、いわゆるアカウントリカバリをユーザーは行いますが、この際に以前であればパスワードを再設定していましたが、パスワード以外の認証手段も登録できるようにしており、これを推奨しています。
+
+### 3. パスワードレスなアカウント登録
+
+これが最もシンプルかつ効率的な対策です。アカウント作成時からパスワード不要のアカウントとして登録するのです。
+
+Yahoo! JAPAN では SMS認 証をした上でまずSMSによるサインインが出来るアカウントとして登録をするようになっています。その後、任意で FIDOの 登録を出来るよう FIDO設定の訴求を行っています。FIDO はデバイスごとの設定であるためデバイスが利用できなくなってしまうとアカウントリカバリーが難しいため、まずは電話番号を登録し、その後に FIDO など他の認証手段の登録を求めています。
+
+### パスワードレスについての主な課題
+
+パスワードという認証手段は人間の記憶に頼ったもので、デバイスに依存しない認証手段です。一方、パスワードレスへの取り組みとしてここまでに紹介した認証手段はデバイスに依存します。そのため、複数デバイスの間で同じアカウントを使うケースや、デバイスを失ったケースにおいて課題を抱えています。
+
+複数デバイスに関する課題の具体例を紹介します。複数デバイスに関する課題は主にユーザビリティに関わるもので、下記のようなものがあります。
+
+* SMS 認証を利用する際、PCを利用しているときにスマートフォンに届く SMS を閲覧する必要があり、面倒である
+* FIDO で、特に Platform Authenticator と呼ばれる OS などに紐付いた Authenticator を使う場合、ユーザーが複数のデバイスを利用すると登録していないデバイスでは FIDO による認証が行えず、デバイスごとに登録する必要がある
+
+デバイスを失ったケースの課題の具体例としては下記のようなものがあります。
+
+* 電話番号の回線を契約解除すると登録された電話番号への SMS の送信ができなくなる
+* FIDO は秘密鍵をデバイスに保管する方式であり、当然デバイスを失うと発行した秘密鍵は利用できなくなる
+
+パスワードレスの推進においてこれらの課題は重要なトピックで、Yahoo! JAPAN でもいろいろな取組をしています。
+
+シンプルかつ最も重要な解決手段として、複数の認証手段を登録してもらうというやり方があります。これはデバイスを紛失するなどといった事態に備えた取り組みであり、デバイスごとでの最適な認証手段の設定でもあります。FIDO の鍵はデバイスに依存するので、複数のデバイスで FIDO の秘密鍵を登録することも良いやり方です。
+
+他にも、WebOTP API を使うことで SMS の届く Android から PC の Chrome に SMS 内にある確認コードを受け渡すこともできます。詳しくは[こちらの記事](https://developer.chrome.com/blog/cross-device-webotp/)をご覧ください。また、最近では Apple が [PassKeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys) という機能を発表しています。この機能は iCloud KeyChain を用いることで、デバイスに保存された秘密鍵を同じApple ID で Sign In しているデバイス間で共有し、デバイスごとの登録を不要にするものです（その後 Google、Microsoft と[同名のプロジェクトを共同で推進することを発表](https://fidoalliance.org/apple-google-and-microsoft-commit-to-expanded-support-for-fido-standard-to-accelerate-availability-of-passwordless-sign-ins-jp/?lang=ja)）。なお、FIDO アライアンスもアカウントリカバリに関する課題を重要視しており[ホワイトペーパー](https://fidoalliance.org/white-paper-multiple-authenticators-for-reducing-account-recovery-needs-for-fido-enabled-consumer-accounts/)を発行しています。
+
+これらの課題に対する取り組みはパスワードレスの拡大に伴って、更に重要なトピックとなっていくと考えています。
+
+### パスワードレスの推進
+
+これらのパスワードレスへの取り組みを Yahoo! JAPAN は 2015 年頃より進めてきました。2015 年 5 月の FIDO サーバーの認定取得を始めとして、そこから SMS 認証の導入や、パスワード無効化機能の提供、各デバイスでの FIDO 対応などを順次進めて来ました。いまでは月間アクティブユーザーのうち、3,000 万を超えるユーザーがパスワードを無効化済みで、パスワード以外の認証手段を用いています。Yahoo! JAPAN での FIDO への対応は Android ブラウザ（Chrome）から始まり、いまでは FIDO の設定したユーザーは 1,000 万を超えています。
+
+この取組の成果として、ログイン ID / パスワードを忘れたという問い合わせについて、最も多かった時期から比べて、全体に占める割合が25%も減少しましたし、不正アクセスについても、パスワードレスのアカウントが増えることにより減少することが確認できています。
+
+特に FIDO は設定も簡単なため、その設定 CVR も高くなっています。実際に、Yahoo! JAPANでは前述の SMS 認証などより CVR が高いことがわかっています。また、FIDO については SMS認証に比べ認証時の成功率が高いこと、また認証にかかる時間についても平均速度が速く中央値も最も速いことがわかっています。なお、パスワードについては認証時間が短いグループもいることがわかっており、これはブラウザの [`autocomplete="current-password"`](/sign-in-form-best-practices/#current-password) によるものではないかと考えています。
+
+<ul class="stats">
+<div class="stats__item">
+<p class="stats__figure">
+25
+<sub>%</sub>
+</p>
+<p>ログイン ID / パスワード忘れの問い合わせの削減</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+74
+<sub>%</sub>
+</p>
+<p>FIDO での認証成功率</p>
+</div>
+<div class="stats__item">
+<p class="stats__figure">
+65
+<sub>%</sub>
+</p>
+<p>SMS 認証での認証成功率</p>
+</div>
+</ul>
+
+<figure class="screenshot">
+{% Img
+   src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/FHX1juV7V9GUpQnhs1sL.png",
+   alt="パスワード、SMS、FIDO それぞれによる認証時間を比較したグラフ",
+   width="800", height="484"
+%}
+<figcaption>平均すると、パスワードでは 21 秒、SMS では 27 秒かかるが、FIDO では 8 秒で認証できる。</figcaption>
+</figure>
+
+パスワードレスを進める上で一番難しいことは、認証手段の追加ではなく、その利用を如何に普及させるかというところです。パスワードレスによるサービス利用の体験が良く、またユーザーにとって合理的でなければなかなか移行は進みませんので、ユーザビリティを高めることで結果としてユーザーのセキュリティ向上を実現させる必要があり、これらはサービスによって独自の工夫が必要になると考えています。
+
+## まとめ
+
+今回は Yahoo! JAPAN のパスワードレスへの取り組みを紹介させていただきました。パスワードによる認証はセキュリティ面のリスクもあり、またユーザビリティの点でも課題を抱えています。その上、現在は、Web OTP API や FIDO など、パスワード以外での認証を支える技術も普及してきていますので、パスワードレスの取り組みを始めるべき時期と言えます。Yahoo! JAPAN では、このパスワードレスの取り組みにより、ユーザビリティ、セキュリティ双方の効果が確実に出ています。ただ、まだ多くのユーザーがパスワードを使用されておりますので、引き続きパスワードレスな認証手段の利用を拡大させていきます。また、パスワードレスな認証手段にプロダクトのユーザー体験を最適化するよう、プロダクトの改善も続けていきたいと考えています。
+
+_Photo by olieman.eth on [Unsplash](https://unsplash.com)_
diff --git a/src/site/content/ja/devices/index.md b/src/site/content/ja/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/ja/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/ja/discoverable/index.md b/src/site/content/ja/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/ja/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/ja/explore/explore.11tydata.js b/src/site/content/ja/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/ja/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ja/explore/index.md b/src/site/content/ja/explore/index.md
new file mode 100644
index 00000000000..39aa3e27d73
--- /dev/null
+++ b/src/site/content/ja/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: 探検
+date: 2022-12-10
+---
diff --git a/src/site/content/ja/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/ja/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..d6ca8ee402c
--- /dev/null
+++ b/src/site/content/ja/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: PRPLパターンを使用して即時読み込みを適用する
+authors:
+  - houssein
+description: PRPLは、Webページを読み込ませ、インタラクティブにさせ、高速化させるために使用されるパターンを説明する頭字語です。このガイドでは、これらの各手法が連動する仕組みと、個別に使用してパフォーマンス向上を実現する方法について説明します。
+date: 2018-11-05
+tags:
+  - performance
+---
+
+PRPLは、Webページを読み込ませ、インタラクティブにさせ、高速化させるために使用されるパターンを説明する頭字語です。
+
+- 最も重要なリソースを**プッシュ** (または**事前読み込み**) します。
+- できるだけ早く最初のルートを**レンダリング**します。
+- 残りのアセットを**事前にキャッシュに保存**します。
+- 他のルートや重要でないアセットを**遅延読み込み**します。
+
+このガイドでは、これらの各手法が連動する仕組みと、個別に使用してパフォーマンス向上を実現する方法について説明します。
+
+## Lighthouseでページを監査する
+
+Lighthouseを実行して、PRPL手法に沿った改善の機会を特定します。
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. **[パフォーマンス]** および **[プログレッシブWebアプリ]** チェックボックスを選択します。
+2. **[監査の実行]** をクリックして、レポートを生成します。
+
+詳細については、[Lighthouseを使用してパフォーマンス改善の機会を特定する](/discover-performance-opportunities-with-lighthouse)を参照してください。
+
+## 重要なリソースを事前読み込み
+
+Lighthouseは、特定のリソースが解析されて遅れて取得された場合、次の失敗した監査を示します。
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse: 主要な要求の監査を事前読み込み", width="745", height="97" %}
+
+[**事前読み込み**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)は宣言型の取得要求であり、ブラウザにできるだけ早くリソースを要求するように命令します。 HTMLドキュメントの先頭に`<link>`タグと`rel="preload"`を追加して、重要なリソースを事前に読み込みます。
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+`window.onload`イベントを遅らせずに、リソースを早くダウンロードするために、ブラウザはリソースに対してより適切な優先度レベルを設定します。
+
+重要なリソースの事前読み込みの詳細については、[重要なアセットの事前読み込み](/preload-critical-assets)ガイドを参照してください。
+
+## できるだけ早く最初のルートをレンダリングする
+
+サイトが画面にピクセルをレンダリングする瞬間に、[**First Paint**](/user-centric-performance-metrics/#important-metrics-to-measure)を遅らせるリソースがある場合、Lighthouseによって警告が表示されます。
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="レンダリングをブロックするリソースの監査を排除する", width="800", height="111" %}
+
+First Paintを改善するために、Lighthouseは、重要なJavaScriptをインライン化し、[`async`](/critical-rendering-path-adding-interactivity-with-javascript/)を使用してその他の項目を遅延すること、および最も重要なCSSをインライン化することをお勧めします。これにより、レンダリングをブロックするアセットを取得するためのサーバーとの間の往復処理が排除され、パフォーマンスが向上します。ただし、開発の観点からは、インラインコードはメンテナンスが難しく、ブラウザで個別にキャッシュに保存できません。
+
+First Paintを改善する別のアプローチは、ページの初期HTML**をサーバー側でレンダリング**することです。これにより、スクリプトの取得、解析、および実行中に、コンテンツがすぐにユーザーに表示されます。ただし、HTMLファイルのペイロードが大幅に増加する可能性があります。このため、[**Time to Interactive**](/tti/) (アプリケーションがインタラクティブになってユーザー入力に応答までにかかる時間) が長くなる可能性があります。
+
+アプリケーションのFirst Paintを減らすための唯一の正解はありません。利点がアプリケーションのトレードオフを上回る場合にのみ、スタイルのインライン化とサーバーサイドレンダリングを検討してください。これらの概念の詳細については、次のリソースを参照してください。
+
+- [CSS配信を最適化する](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [サーバーサイドレンダリングとは何か](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">{% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="サービスワーカーとの間の要求/応答", width="800", height="1224" %}</figure>
+
+## アセットを事前にキャッシュする
+
+**サービスワーカー**はプロキシとして機能し、繰り返しアクセスが発生したときに、サーバーではなく、キャッシュから直接アセットを取得できます。これにより、ユーザーがオフライン時にアプリケーションを使用できるだけでなく、繰り返しアクセスしたときのページの読み込み時間も短縮されます。
+
+複雑なキャッシュ要件がなく、ライブラリで対応できる場合は、サードパーティのライブラリを使用して、サービスワーカーを生成するプロセスを簡素化します。たとえば、[Workbox](/workbox)にはツール群が用意されており、サービスワーカーを作成および管理し、アセットをキャッシュに保存できます。サービスワーカーとオフラインの信頼性の詳細については、信頼性学習パスの[サービスワーカーガイド](/service-workers-cache-storage)を参照してください。
+
+## 遅延読み込み
+
+ネットワーク経由で送信するデータが多すぎると、Lighthouseは失敗した監査を表示します。
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse: 膨大なネットワークペイロード監査があります", width="800", height="99" %}
+
+これにはすべてのアセットタイプが含まれますが、大きなJavaScriptペイロードは、ブラウザで解析およびコンパイルするのに時間がかかるため、特にコストがかかります。Lighthouseは、必要に応じてこれに対する警告も提供します。
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse: JavaScript起動時間監査", width="797", height="100" %}
+
+ユーザーが最初にアプリケーションを読み込むときに必要なコードのみを含む小さなJavaScriptペイロードを送信するには、バンドル全体を分割し、オンデマンドでチャンクの[遅延読み込み](/reduce-javascript-payloads-with-code-splitting)を実行します。
+
+バンドルを分割できたら、より重要なチャンクを事前読み込みします ([重要なアセットの事前読み込み](/preload-critical-assets)ガイドを参照)。事前読み込みにより、重要性の高いリソースがブラウザによって先に取得およびダウンロードされることが保証されます。
+
+Lighthouseは、オンデマンドでさまざまなJavaScriptチャンクを分割して読み込むだけでなく、重要ではない画像を遅延読み込みするための監査も提供します。
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse: オフスクリーン画像の遅延監査", width="800", height="90" %}
+
+Webページで多数の画像を読み込む場合は、ページが読み込まれるときに、スクロールしなければ見えない位置、またはデバイスのビューポートの外にあるすべての画像を遅延します ([lazysizesを使用した画像の遅延読み込み](/use-lazysizes-to-lazyload-images)を参照)。
+
+## 次のステップ
+
+PRPLパターンの背景にあるいくつかの基本的な概念を理解したので、このセクションの次のガイドに進んで詳細を確認してください。すべての手法をまとめて適用する必要はないことを覚えておくことが重要です。次のいずれかを使用すると、パフォーマンスが大幅に向上します。
+
+- 重要なリソースを**プッシュ** (または**事前読み込み**) する。
+- できるだけ早く最初のルートを**レンダリング**する。
+- 残りのアセットを**事前にキャッシュに保存**する。
+- 他のルートや重要でないアセットを**遅延読み込み**する。
diff --git a/src/site/content/ja/fast/avoid-invisible-text/index.md b/src/site/content/ja/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..90d3db045ab
--- /dev/null
+++ b/src/site/content/ja/fast/avoid-invisible-text/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: フォントの読み込み中にテキストが非表示されることを避ける
+authors:
+  - katiehempenius
+description: フォントは普段、大きなファイルで読み込みに時間がかかります。これに対処するために、一部のブラウザは、フォントが読み込まれるまでテキストを非表示にします（非表示のテキストのフラッシュ）。パフォーマンスを最適化する目的で、「非表示のテキストのフラッシュ」を避けて、システムフォントを使用してユーザーにすぐにコンテンツを表示することを希望するかもしれません。
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## なぜこの点を配慮する必要がありますか？
+
+フォントは普段、大きなファイルで読み込みに時間がかかります。これに対処するために、一部のブラウザは、フォントが読み込まれるまでテキストを非表示にします（非表示のテキストのフラッシュ）。パフォーマンスを最適化する目的で、「非表示のテキストのフラッシュ」を避けて、（スタイルのないテキストのフラッシュ）システムフォントを使用してユーザーにすぐにコンテンツを表示することを希望するかもしれません。
+
+## すぐにテキストを表示する
+
+このガイドでは、これを実現する2つの方法を説明します。最初のアプローチは非常に簡単ですが、ユニバーサルブラウザが[サポート](https://caniuse.com/#search=font-display)してもらいません。 2番目のアプローチはより多くの作業が必要ですが、ブラウザが完全にサポートしてもらいます。最良の選択は、実際に実装して維持するものです。
+
+## オプション＃1：font-displayを使用する
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>前</th>
+        <th>後</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+}
+</code>
+        </td>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+  <strong>font-display: swap;</strong>
+}
+</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display)は、フォント表示戦略を指定するためのAPIです。 `swap`は、システムフォントを使用して、このフォントを使用するテキストがすぐに表示される必要があるようとブラウザに通知します。カスタムフォントの準備ができたら、システムフォントが交換されます。
+
+ブラウザは`font-display`サポートしていない場合、フォントの読み込みのためのデフォルトの動作にフローし続けます。[こちら](https://caniuse.com/#search=font-display)で`font-display`サポートしているブラウザを確認してください。
+
+下記は、一般的なブラウザのデフォルトのフォント読み込み動作です。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>ブラウザ</strong></th>
+        <th><strong>フォントの準備ができていない場合はデフォルトの動作が…</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>フォントの準備ができあがるまでシステムフォントを使用します。フォントを交換します。</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>3秒以内でテキストを非表示にします。それでもテキストの準備ができていない場合は、フォントの準備ができるまでシステムフォントを使用します。フォントを交換します。</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>3秒以内でテキストを非表示にします。それでもテキストの準備ができていない場合は、フォントの準備ができるまでシステムフォントを使用します。フォントを交換します。</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>フォントの準備ができるまでテキストを非表示にします。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## オプション＃2：カスタムフォントが読み込まれる後の使用を待機する
+
+もう少し作業を行うことで、すべてのブラウザで機能するように同じ動作を実装できます。
+
+このアプローチには3つの部分があります。
+
+- 最初のページ読み込み時にカスタムフォントを使用しないでください。これにより、ブラウザはシステムフォントを使用してテキストをすぐに表示できます。
+- カスタムフォントが読み込まれる時点を検出します。これは、[FontFaceObserver](https://github.com/bramstein/fontfaceobserver)ライブラリのおかげで、数行のJavaScriptコードで実現できます。
+- カスタムフォントを使用できようにページスタイルを更新します。
+
+これを実装するために実施する必要である変更は次のとおりです。
+
+- 最初のページの読み込み時にカスタムフォントを使用しないように、CSSをリファクタリングすること。
+- ページにスクリプトを追加すること。このスクリプトでは、カスタムフォントが読み込まれたことを検出して、ページのスタイルを更新します。
+
+{% Aside 'codelab' %} [Font Face Observerを使用して、テキストをすぐに表示します](/codelab-avoid-invisible-text)。 {% endAside %}
+
+## 確認
+
+Lighthouseの実行により、サイトがテキストを表示するために`font-display: swap`を使用していることを確認できます。
+
+{% Instruction 'audit-performance', 'ol' %}
+
+Webフォントの読み込み監査に合格したら、**テキストが表示されたままであること**を確認します。
diff --git a/src/site/content/ja/fast/codelab-preload-web-fonts/index.md b/src/site/content/ja/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..39942856294
--- /dev/null
+++ b/src/site/content/ja/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,57 @@
+---
+layout: codelab
+title: Webフォントをプリロードして読み込み速度を向上させる
+authors:
+  - gmimani
+description: このコードラボでは、Webフォントのプリロードによりページのパフォーマンスを向上させる方法を学びます。
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+このコードラボでは、`rel="preload"`を使用してWebフォントをプリロードし、スタイルが設定されていないテキストのちらつき（FOUT）を取り除く方法を説明します。
+
+## 測定
+
+まずは最適化の追加の前に、Webサイトのパフォーマンスを測定しましょう。{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+生成されるLighthouseレポートには、**Maximum critical path latency**の下にリソースのフェッチ順が表示されます。
+
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="Webフォントがクリティカルリクエストチェーンに存在します。", width="704", height="198" %}
+
+上記の監査では、Webフォントはクリティカルリクエストチェーンの一部であり、最後にフェッチされています。[**クリティカルリクエストチェーン**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)は、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。このアプリケーションでは、Webフォント（PacficoとPacifico-Bold）は、[@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face)ルールで定義されており、クリティカルリクエストチェーンでブラウザがフェッチする最後のリソースとなっています。通常、Webフォントは遅延読み込みされるため、クリティカルリソース（CSS、JS）がダウンロードされるまで読み込まれません。
+
+アプリケーションでフェッチされたリソースの順序は次のとおりです。
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="Webフォントは遅延読み込みされます。", width="583", height="256" %}
+
+## Webフォントのプリロード
+
+FOUTを回避するには、すぐに必要なWebフォントはプリロードしておくことができます。このアプリケーションの`Link`要素をドキュメントのheadに追加してください。
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+`as="font" type="font/woff2"`属性は、このリソースをフォントとしてダウンロードするようにブラウザに指示し、リソースキューの優先順位付けに役立ちます。
+
+`crossorigin`属性は、フォントが別のドメインからのものである可能性があるため、リソースをCORSリクエストでフェッチする必要があるかどうかを示します。この属性がない場合、ブラウザがプリロードされたフォントを認識しません。
+
+Pacifico-Boldがページのヘッダーで使用されているため、さらに早くフェッチできるようにpreloadタグを追加しました。Pacifico.woff2フォントは、展開表示の下にあるテキストのスタイルを設定するフォントであるため、それをプリロードしておく必要はありません。
+
+アプリケーションを再読み込みして、Lighthouseをもう一度実行します。**Maximum critical path latency**セクションを確認してください。
+
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="Pacifico-BoldのWebフォントがプリロードされ、クリティカルリクエストチェーンから削除されています", width="645", height="166" %}
+
+`Pacifico-Bold.woff2`がクリティカルリクエストチェーンからどのように削除されているかに注目してください。アプリケーションの早い段階でフェッチされています。
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="Pacifico-Bold Webフォントはプリロードされています", width="553", height="254" %}
+
+preloadを使用すると、ブラウザはこのファイルを早期にダウンロードする必要があることを認識します。preloadが正しく使用されていない場合、使用されていないリソースが不要に要求されてしまうため、パフォーマンスが低下する可能性があることに注意しておくことが重要です。
diff --git a/src/site/content/ja/fast/codelab-serve-images-webp/index.md b/src/site/content/ja/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..7c51d9f3d8e
--- /dev/null
+++ b/src/site/content/ja/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,128 @@
+---
+layout: codelab
+title: コマンドラインを使用した WebP 画像の作成
+authors:
+  - katiehempenius
+description: |2-
+
+  このコードラボでは、WebP を使用して最適化された画像を提供する方法について学びます。
+date: 2018-11-05
+glitch: webp-cli
+related_post: serve-images-webp
+tags:
+  - performance
+---
+
+webp <a href="https://developers.google.com/speed/webp/docs/precompiled">コマンドラインツール</a>はすでにインストールされているので、すぐに作業を開始できます。このツールは、JPG、PNG、および TIFF 画像を WebP に変換します。
+
+## 画像を WebP に変換する
+
+{% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+1. 次のコマンドを入力します。
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+このコマンドは `images/flower1.jpg` ファイルを品質レベル `50` (`0` が最低、`100` が最高) で変換し、`images/flower1.webp` として保存します。
+
+{% Aside %} どうして `webp` の代わりに `cwebp` と記述する理由が気になる方に説明すると、WebP には、WebP 画像をエンコードするコマンドとデコードするコマンドが別に用意されています。`cwebp` は画像を WebP にエンコードし、`dwebp` は画像を WebP からデコードします。{% endAside %}
+
+これを実行すると、コンソールに次のようなものが表示されます。
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+これで、画像が正常に WebP に変換されました。
+
+しかし、1 つの画像ごとにいちいち `cwebp` コマンドを実行していたのでは、多くの画像を変換するには時間がかかってしまうため、その場合は、代わりにスクリプトを使用するとよいでしょう。
+
+- コンソールで以下のスクリプトを実行します (バッククォートをお忘れなく)。
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+このスクリプトは、`images/` ディレクトリ内のすべてのファイルを品質レベル `50` で変換し、それらを新しいファイルとして同じディレクトリに保存します (同じ名前を使うが拡張子は `.webp` にする)。
+
+### ✔ チェックイン
+
+結果、`images/` ディレクトリに以下 6 つのファイルが作成されます。
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+次に、WebP 画像をサポートするブラウザに WebP 画像を提供するように Glitch を更新します。
+
+## `<picture>`タグを使用して WebP 画像を追加します
+
+`<picture>`タグを使用すると、古いブラウザのサポートを維持しながら、新しいブラウザに WebP を提供できます。
+
+- `index.html` 内で、`<img src="images/flower1.jpg"/>` を次の HTML に置き換えます。
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- 次に、`flower2.jpg`と `flower2.jpg` と `flower3.png` の `<img>` タグを `<picture>` タグに置き換えます。
+
+### ✔ チェックイン
+
+完了すると、 `index.html` の `<picture>` タグは以下のようになります。
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+次に、Lighthouse を使用して、WebP 画像がサイトに正しく実装されていることを確認します。
+
+##  WebP が使用されていることを Lighthouse で確認する
+
+Lighthouse の**Serve images in next-gen formats (画像を次世代フォーマットで提供する)** パフォーマンス監査を使用すると、サイト上のすべての画像に WebP のような次世代フォーマットが使用されているかどうかを確認できます。
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. **Serve images in next-gen formats** 監査に合格していることを確認します。
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Lighthouse の 'Serve images in next-gen formats' 監査に合格", width="701", height="651" %}
+
+うまく出来ましたね！これで、サイトに WebP 画像が表示されるようになりました。
diff --git a/src/site/content/ja/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/ja/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..02c949474c1
--- /dev/null
+++ b/src/site/content/ja/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,77 @@
+---
+layout: codelab
+title: lazysizesを使用したオフスクリーン画像の遅延読み込み
+authors:
+  - katiehempenius
+description: このコードラボでは、lazysizesを使用して、現在のビューポートの画像のみを読み込む方法について説明します。
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+遅延読み込みは、リソースを事前に読み込むのではなく、必要になるまでリソースの読み込みを待機するアプローチです。これにより、最初のページの読み込み時に読み込んで解析する必要のあるリソースの量が減り、パフォーマンスを向上させることができます。
+
+この手法でパフォーマンスを改善する候補は、最初のページ読み込み中に画面外にある画像です。[lazysizes](https://github.com/aFarkas/lazysizes)を使用すると、このパフォーマンス改善を簡単に実装できます。
+
+## lazysizesスクリプトをページに追加する
+
+{% Instruction 'remix' %}
+
+`lazysizes.min.js`はすでにダウンロードされており、このGlitchに追加されています。次の手順でページに追加します。
+
+- `<script>`タグを`index.html`に追加します。
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Images End -->
+</body>
+```
+
+{% Aside %} [lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js)ファイルはすでにこのプロジェクトに追加されているため、個別に追加する必要はありません。追加したスクリプトでこのスクリプトを使用できます。 {% endAside %}
+
+lazysizesは、ユーザーがページをスクロールするときに画像をインテリジェントに読み込み、先に表示される画像を優先します。
+
+## 画像を遅延読み込みするように命令する
+
+- 遅延読み込みされる画像に`lazyload`を追加します。また、`src`属性を`data-src`に変更します。
+
+たとえば、`flower3.png`の変更は次のようになります。
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+{% Aside %}
+この例では、`flower3.png`、 `flower4.jpg`、および`flower5.jpg`の遅延読み込みを試みます。
+
+`src`属性を`data-src`に変更する必要があるのはなぜでしょうか。この属性が変更されていない場合、すべての画像は遅延読み込みされず、すぐに読み込まれます。`data-src`はブラウザが認識する属性ではないため、この属性の画像タグを検出しても、画像は読み込まれません。この場合はこれで問題がありません。これにより、ブラウザではなく、lazysizesスクリプトが画像をいつ読み込むのかを決定できます。
+{% endAside %}
+
+## 実際の動作を確認する
+
+以上です。これらの変更の動作を確認するには、次の手順に従います。
+
+{% Instruction 'preview' %}
+
+- コンソールを開き、追加した画像を見つけます。ページを下にスクロールすると、クラスが`lazyload`に`lazyloaded`に変更されます。
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="遅延読み込み中の画像", width="428", height="252" %}
+
+- ネットワークパネルを見て、ページを下にスクロールするときに画像ファイルが個別に読み込まれることを確認します。
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="遅延読み込み中の画像", width="418", height="233" %}
+
+## Lighthouseを使用して検証する
+
+最後に、Lighthouseを使用してこれらの変更を確認することをお勧めします。Lighthouseの「オフスクリーン画像の遅延」パフォーマンス監査は、オフスクリーン画像に遅延読み込みを追加するのを忘れたかどうかを示します。
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. **オフスクリーン画像の遅延**監査に合格したことを確認します。
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Lighthouseの「画像の効率的なエンコード」監査に合格", width="800", height="774" %}
+
+成功です。lazysizesを使用して、ページで画像を遅延読み込みしました。
diff --git a/src/site/content/ja/fast/defer-non-critical-css/index.md b/src/site/content/ja/fast/defer-non-critical-css/index.md
new file mode 100644
index 00000000000..1ef20effac3
--- /dev/null
+++ b/src/site/content/ja/fast/defer-non-critical-css/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 重要でないCSSを延期する
+authors:
+  - demianrenzulli
+description: Critical Rendering Path (クリティカルレンダリングパス) を最適化し、FCP (First Contentful Paint) を改善する目的で重大でない CSS を延期する方法について学びます。
+date: 2019-02-17
+updated: 2020-06-12
+tags:
+  - performance
+---
+
+CSS ファイルは[レンダリングをブロックするリソース](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)です。つまり、ブラウザがページをレンダリングする前に、CSS ファイルを読み込み、処理する必要があります。不要に大きなスタイルを使うウェブページは、その分レンダリングの時間が長くなります。
+
+[本ガイドでは、Critical Rendering Path (クリティカルレンダリングパス) を最適化し、FCP (First Contentful Paint) を改善する目的で重大でない CSS を延期する方法について学びます。](/critical-rendering-path/)
+
+## 準最適な方法で CSS を読み込む
+
+次の例には、テキストで構成される 3 つのパラグラフが非表示となっているアコーディオンが含まれています。それぞれのスタイルは、異なるクラスを使って定義されています。
+
+{% Glitch { id: 'defer-css-unoptimized', path: 'index.html' } %}
+
+このページは 8 つのクラスを持つ CSS ファイルを要求しますが、「目に見える」コンテンツをレンダリングするのに 8 個すべては必要ありません。
+
+本ガイドの目的は、このページを最適化することです。そのため、**重要な**スタイルのみが同期され、読み込まれます。そして、残り (各パラグラフに適用されるスタイルなど) は非ブロック方式で読み込まれます。
+
+## 評価
+
+[ページで](https://defer-css-unoptimized.glitch.me/)[Lighthouse](/discover-performance-opportunities-with-lighthouse/#run-lighthouse-from-chrome-devtools) を実行し、[**パフォーマンス**] セクションに移動します。
+
+レポートでは、**First Contentful Paint**メトリックの値が「1」となっており、Opportunties のセクションでは、**Eliminate render-blocking resources** が **style.css** を指しています。
+
+<figure>{% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="最適化されていないページの Lighthouse レポート。FCP は「1」、Opportunities のセクションには「Eliminate blocking resources」と表示されている", width="800", height="640" %}</figure>
+
+{% Aside %}このデモサイトに使用している CSS は非常に小さなものです。より大きな CSS ファイルを要求していて (本番環境ではいたって普通です)、かつ対象のページには**アバブ・ザ・フォールド**コンテンツ (スクロールしなくても閲覧できる画面領域) のレンダリング中に使用されなかった CSS ルールが少なくとも 2048 バイトあることが Lighthouse によって検出される場合は、**Remove Unused CSS** という提案が表示されます。{% endAside %}
+
+この CSS がレンダリングをブロックする仕組みを視覚化するには、以下のことを行います。
+
+1. Chrome で[対象のページ](https://defer-css-unoptimized.glitch.me/)を開きます。{% Instruction 'devtools-performance', 'ol' %}
+2. [パフォーマンス]パネルで、[再**Reload**] (再よ見込み) をクリックします。
+
+結果のトレースでは、CSS の読み込みが完了した直後に **FCP** マーカーが配置されていることがわかります。
+
+<figure>{% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="最適化されていないページに対する DevTools のパフォーマンストレース。CSS の読み込み後に FCP が開始することを示している。", width="800", height="352", class="w -screenshot" %}</figure>
+
+これは、ブラウザは、画面上にピクセルを 1 つ描画するのにも、すべての CSS の読み込みと処理が完了するのを待たなくてはいけないことを意味しています。
+
+## 最適化
+
+このページを最適化するには、どのクラスが「クリティカル」と見なされるかを知る必要があります。それには、[Coverage Tool](https://developer.chrome.com/docs/devtools/css/reference/#coverage) (カバレッジツール) を使用します。
+
+1. DevTools で、`Control+Shift+P` または `Command+Shift+P` (Mac の場合) をクリックして、[Command Menu](https://developer.chrome.com/docs/devtools/command-menu/) (コマンドメニュー) を開きます。
+2. 「Coverage」と入力し、**Show Coverage** (カバレッジを表示) を選択します。
+3. [**Reload**] (再読み込み) ボタンをクリックして、ページを再読み込みし、カバレッジの取り込みを開始します。
+
+<figure>{% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="CSS ファイルのカバレッジ、未使用のバイトが 55.9％ であることを示している。", width="800", height="82" %}</figure>
+
+レポートをダブルクリックして、2 つの色に分けられたクラスを表示します。
+
+- 緑 (**クリティカル**): これらは、ブラウザが表示可能なコンテンツ (タイトル、サブタイトル、アコーディオンボタンなど) をレンダリングするために必要なクラスです。
+- 赤 (**重要ではない**): これらのスタイルは、すぐには表示されないコンテンツ (アコーディオン内のパラグラフなど) に適用されます。
+
+この情報を使って CSS を最適化することにより、ブラウザがページを読み込んだ直後に重要なスタイルの処理を開始すると同時に重要でない CSS は先送りにできるようにします。
+
+- カバレッジツールから取得したレポートにある緑色のクラス定義を抽出し、そうしたクラスをページの &lt;head&gt; タグ内の`<style>`ブロックに配置します。
+
+```html
+<style type="text/css">
+.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
+</style>
+```
+
+- 次に、次のパターンを適用して、残りのクラスを非同期に読み込みます。
+
+```html
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="styles.css"></noscript>
+```
+
+これは CSS を読み込む標準的な方法ではありません。以下のような仕組みになっています。
+
+- `link rel="preload" as="style"`は、スタイルシートを非同期的に要求します。`preload` の詳細については、[Preload critical assets guide (重要なアセットをプリロードする際のガイド)](/preload-critical-assets) をご覧ください。
+- `link` タグ内の `onload` 属性により、CSS は読み込みが完了した時点で処理されるようになります。
+- 使用した `onload` ハンドラを「null」にしておくと、一部のブラウザーでは、rel 属性を切り替えたときにハンドラを再度呼び出さないようにすることができます。
+- `noscript` 要素内のスタイルシートへの参照は、JavaScript を実行しないブラウザーのフォールバックとして機能します。
+
+{% Aside %}本ガイドでは、この最適化を実装するのにバニラコードを使用しました。実際の本番環境では、[loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) などの関数を使用することをお勧めします。この動作をカプセル化できるほか、異なるブラウザでも適切に機能するので便利です。{% endAside %}
+
+[結果のページ](https://defer-css-optimized.glitch.me/)は、ほとんどのスタイルが非同期に読み込まれる場合でも、前のバージョンと全く同じように見えます。以下は、インライン化されたスタイルと CSS ファイルに対する非同期リクエストを HTML ファイルに表示したものです。
+
+<!-- Copy and Paste Me -->
+
+{% Glitch { id: 'defer-css-optimized', path: 'index.html', previewSize: 0 } %}
+
+## モニター
+
+DevTools を使用して、[最適化されたページ](https://defer-css-optimized.glitch.me/)に対してもう一度**パフォーマンス**トレースを実行します。
+
+**FCP** マーカーは、ページが CSS を要求する前に表示されます。つまり、ブラウザーは、CSS が読み込まれるのを待たずにページをレンダリングすることができます。
+
+<figure>{% Img src="image/admin/0mVq3q760y37JSn2MmCP.png", alt="最適化されていないページに対する DevTools のパフォーマンストレース。CSS が読み込まれる前に FCP が開始されていることがわかります。", width="800", height="389" %}</figure>
+
+最後のステップとして、最適化されたページに対して Lighthouse を実行します。
+
+レポートを見れば、FCP ページが **0.2 秒**短縮されたことがわかります (20％ も改善しました！)。
+
+<figure>{% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="FCP の値が 0.8s になったことを示す Lighthouse のレポート。", width="800", height="324" %}</figure>
+
+**Eliminate render-blocking resources** という提案は **Opportunities** セクションから **Passed Audits** セクションに移動されています。
+
+<figure>{% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="'Eliminate blocing resources' が 'Passed Audits' セクションに移っていることを示す Lighthouse のレポート。", width="800", height="237" %}</figure>
+
+## 今度のステップと参考資料
+
+本ガイドでは、ページ内の未使用のコードを手動で抽出することにより、重要ではない CSS を延期する方法について学びました。本ガイドを補足する [extract critical CSS guide (重要な CSS を抽出するためのガイド)](/extract-critical-css/) では、重要な CSS を抽出できる人気の高いツールを紹介するほか、[コードラボ](/codelab-extract-and-inline-critical-css/)も含まれていますので、実際の動作をご覧いただけます。
diff --git a/src/site/content/ja/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/ja/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..e5b7e28a729
--- /dev/null
+++ b/src/site/content/ja/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: サードパーティのJavaScriptを効率的に読み込む
+subhead: サードパーティのスクリプトを使用して読み込み時間とユーザーエクスペリエンスを改善するときによくある誤りを回避します。
+authors:
+  - mihajlija
+date: 2019-08-14
+description: サードパーティのスクリプトを使用して読み込み時間とユーザーエクスペリエンスを改善するときによくある誤りを回避する方法について説明します。
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: 輸送コンテナーの航空写真。
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+サードパーティのスクリプトによってページの読み込みが[遅くなっている](/third-party-javascript/)場合は、パフォーマンスを改善するための次の2つのオプションがあります。
+
+- そのスクリプトがサイトにとって明確な価値を付加するのでなければ、スクリプトを削除する。
+
+- 読み込み処理を最適化する。
+
+この投稿では、次の手法を使用してサードパーティスクリプトの読み込み処理を最適化する方法について説明します。
+
+1. `<script>`タグで`async`または`defer`属性を使用する
+
+2. 必要なオリジンへの早期接続を確立する
+
+3. 遅延読み込み
+
+4. サードパーティのスクリプトを実行する方法を最適化する
+
+## `async`または`defer`を使用する
+
+[同期スクリプト](/third-party-javascript/)はDOMの構築とレンダリングを遅らせるため、ページをレンダリングする前にスクリプトを実行する必要がないかぎり、サードパーティのスクリプトは常に非同期で読み込んでください。
+
+`async`属性と`defer`属性は、バックグラウンドでスクリプトを読み込んでいるときにHTMLの解析を続行し、読み込み後にスクリプトを実行する可能性があることをブラウザーに通知します。このように、スクリプトのダウンロードはDOMの構築とページのレンダリングをブロックしません。その結果、すべてのスクリプトの読み込みが完了する前に、ページがユーザーに表示されます。
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+`async`と`defer`の違いは、スクリプトの実行を開始するタイミングです。
+
+### `async`
+
+`async`属性のスクリプトは、ダウンロードが完了した後、ウィンドウの[読み込み](https://developer.mozilla.org/docs/Web/Events/load)イベントの前の最初の機会に実行されます。これは、`async`スクリプトがHTMLに表示される順序で実行されない可能性がある (高い) ことを意味します。また、パーサーがまだ動作している間にダウンロードが終了すると、DOMの構築を中断される可能性があることも意味します。
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="パーサーをブロックするasync属性のスクリプトの図", width="800", height="252" %}
+
+### `defer`
+
+`defer`属性のスクリプトは、HTML解析が完全に終了した後、[`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded)イベントの前に実行されます。`defer`は、スクリプトがHTMLに表示される順序で実行され、パーサーをブロックしません。
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="defer属性のスクリプトとパーサーフローの図", width="800", height="253" %}
+
+- 読み込みプロセスの早い段階でスクリプトを実行させることが重要な場合は、`async`使用する。
+
+- 重要度の低いリソースでは`defer`を使用する (例: 最も重要な項目の下にある動画プレイヤー)。
+
+これらの属性を使用すると、ページの読み込みを大幅に高速化できます。たとえば、[最近、Telegraphは広告や分析を含むすべてのスクリプトを遅延](https://medium.com/p/a0a1000be5#4123)させ、広告の読み込み時間を平均4秒改善しました。
+
+{% Aside %}通常、分析スクリプトは早い段階で読み込まれるため、貴重な分析データを見逃すことはありません。幸い、初期のページ読み込みデータを保持しながら、[分析の初期化を遅延するパターン](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/)があります。 {% endAside %}
+
+## 必要なオリジンへの早期接続を確立する
+
+重要なサードパーティのオリジンへの[早期接続を確立](/preconnect-and-dns-prefetch/)することで、100〜500ミリ秒を節約できます。
+
+ここでは、次の2つの[`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link)タイプが役立ちます。
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+`<link rel="preconnect">`は、ページが別のオリジンへの接続を確立する予定であり、プロセスをできるだけ早く開始することをブラウザーに通知します。事前に接続されたオリジンからのリソースの要求が行われると、ダウンロードはすぐに開始されます。
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %}ブラウザーは10秒以内に使用されない接続をすべて閉じるため、すぐに使用する重要なドメインにのみ事前接続します。不必要な事前接続は他の重要なリソースを遅らせる可能性があるため、事前接続されたドメインの数を制限し、[事前接続の影響](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/)をテストします。 {% endAside %}
+
+### `dns-prefetch`
+
+`<link rel="dns-prefetch>`は、`<link rel="preconnect">`によって処理される対象の小さなサブセットを処理します。接続の確立には、DNSルックアップとTCPハンドシェイクが含まれます。安全なオリジンには、TLSネゴシエーションが必要です。`dns-prefetch`は、明示的に呼び出される前に特定のドメインのDNSのみを解決するようにブラウザーに命令します。
+
+`preconnect`ヒントは、最も重要な接続にのみ使用するのが最適です。重要度の低いサードパーティドメインの場合は、`<link rel=dns-prefetch>`を使用します。
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[`dns-prefetch`のブラウザーサポート](https://caniuse.com/#search=dns-prefetch)は[`preconnect`のサポート](https://caniuse.com/#search=preconnect)とは少し異なります。`dns-prefetch`は、`preconnect`をサポートしていないブラウザーのためのフォールバックとして機能します。これを安全に実装するには、次の個別のリンクタグを使用します。
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## サードパーティリソースの遅延読み込み
+
+埋め込まれたサードパーティのリソースは、構築が不十分な場合、ページ速度を低下させる大きな要因となる可能性があります。それらが重要ではない場合、画面の外にある場合 (つまり、ユーザーがスクロールして表示する必要がある場合)、遅延読み込みはページ速度とペイントメトリックを改善するための良い方法です。このようにして、ユーザーはメインページのコンテンツをより速く取得し、より良いエクスペリエンスを得ることができます。
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="モバイルデバイスに表示されるWebページの図で、スクロール可能なコンテンツが画面外に展開しています。スクロール可能なコンテンツがまだ読み込まれていないため、画面外のコンテンツの彩度が低くなっています。", width="366", height="438" %}</figure>
+
+効果的なアプローチの1つは、メインページのコンテンツが読み込まれた後にサードパーティのコンテンツを遅延読み込みすることです。広告はこのアプローチの良い候補です。
+
+広告は多くのサイトにとって重要な収入源ですが、ユーザーにとって必要なのはコンテンツです。広告を遅延読み込みして、メインコンテンツをより速く配信することで、広告の全体的な視認性の割合を高めることができます。たとえば、MediaVineは[遅延読み込み広告に](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/)切り替え、ページの読み込み速度が200％改善されました。DoubleClickの[公式ドキュメントに](https://support.google.com/dfp_premium/answer/4578089#lazyloading)は、広告を遅延読み込みする方法に関するガイダンスがあります。
+
+別のアプローチは、ユーザーがページのそのセクションまでスクロールしたときにのみサードパーティのコンテンツを読み込む方法です。
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/)は、要素がブラウザーのビューポートに入出力されるタイミングを効率的に検出するブラウザAPIであり、この手法を実装するために使用できます。[lazysizes](/use-lazysizes-to-lazyload-images/)は画像と[`iframes`](http://afarkas.github.io/lazysizes/#examples)を遅延読み込みするための一般的なJavaScriptライブラリです。 YouTubeの埋め込みと[ウィジェット](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks)をサポートしています。また、IntersectionObserverの[オプションのサポート](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js)もあります。
+
+{% Aside 'caution' %} JavaScriptを使用してリソースを遅延ロードするときには注意が必要です。不安定なネットワーク状態が原因でJavaScriptの読み込みに失敗した場合、リソースはまったく読み込まれません。 {% endAside %}
+
+[画像とiframeの遅延読み込みで`loading`属性](/browser-level-image-lazy-loading/)を使用することは、JavaScript手法の優れた代替手段であり、最近ではChrome76で利用できるようになりました。
+
+## サードパーティのスクリプトを実行する方法を最適化する
+
+### サードパーティのCDNホスティング
+
+サードパーティベンダーは、通常、[コンテンツ配信ネットワーク (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network) でホスティングするJavaScriptファイルのURLを提供するのが一般的です。このアプローチの利点は、URLをコピーして貼り付けるだけですぐに開始でき、メンテナンスの負荷がないことです。サードパーティベンダーは、サーバー構成とスクリプトの更新を処理します。
+
+ただし、それらは他のリソースと同じオリジンではないため、パブリックCDNからファイルを読み込むにはネットワークコストがかかります。ブラウザーは、DNSルックアップを実行し、新しいHTTP接続を確立して、安全なオリジンでベンダーのサーバーとSSLハンドシェイクを実行する必要があります。
+
+サードパーティのサーバーからのファイルを使用する場合、キャッシュを制御できることはめったにありません。他の誰かのキャッシュ戦略に依存すると、スクリプトがネットワークから不必要に頻繁に再取得される可能性があります。
+
+### サードパーティのスクリプトをセルフホスティングする
+
+セルフホスティングのサードパーティスクリプトは、スクリプトの読み込み処理をより細かく制御できるオプションです。セルフホスティングにより、次のことができます。
+
+- DNSルックアップとラウンドトリップ時間を短縮する。
+- [HTTPキャッシュ](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)ヘッダーを改善する。
+- [HTTP / 2サーバープッシュを利用](/performance-http2/)する。
+
+たとえば、Casperは、A/Bテストスクリプトをセルフホスティングすることで、読み込み時間を[1.7秒短縮](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec)することができました。
+
+ただし、セルフホスティングには大きな欠点が1つあります。それは、APIの変更やセキュリティの修正があった場合に、スクリプトが古くなり、自動更新を実行できない可能性があることです。
+
+{% Aside 'caution' %}
+
+スクリプトを手動で更新すると、開発プロセスの負荷が増大し、重要な更新を見逃す可能性があります。すべてのリソースを提供するためにCDNホスティングを使用していない場合は、[エッジキャッシング](https://www.cloudflare.com/learning/cdn/glossary/edge-server/)も見逃しており、サーバーの圧縮を最適化する必要があります。 {% endAside%}
+
+### サービスワーカーを使用して、サードパーティサーバーのスクリプトをキャッシュに保存する
+
+サードパーティのCDNの利点を活用しながら、キャッシュをより細かく制御できるセルフホスティングの代わりに、[サービスワーカーを使用してサードパーティのサーバーからスクリプトをキャッシュに保存することもできます](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)。これにより、スクリプトがネットワークから再取得される頻度を制御でき、ページが主要なユーザーの瞬間に到達するまで、必須ではないサードパーティリソースの要求を抑制する読み込み戦略を作成できます。この場合は、`preconnect`接続を使用して早期接続を確立することで、ネットワークコストをある程度軽減することもできます。
diff --git a/src/site/content/ja/fast/extract-critical-css/index.md b/src/site/content/ja/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..716dcd09733
--- /dev/null
+++ b/src/site/content/ja/fast/extract-critical-css/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: 重要なCSSを抽出する
+subhead: 重要なCSSテクニックを使用してレンダリング時間を改善する方法を学びます。
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: レンチとドライバのフラットレイ写真。
+description: |2-
+
+  重要なCSS手法を使用してレンダリング時間を改善する方法と、プロジェクトに最適なツールを選択する方法を学びます。
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+ブラウザは、ページを表示する前にCSSファイルをダウンロードして解析する必要があります。これにより、CSSはレンダリングブロックリソースになります。 CSSファイルが大きい場合、またはネットワークの状態が悪い場合、CSSファイルの要求により、Webページのレンダリングにかかる時間が大幅に長くなる可能性があります。
+
+{% Aside 'key-term' %}クリティカルCSSは、ユーザーに対してコンテンツをできるだけ速くレンダリングするために、重要なコンテンツのCSSを抽出する手法です。 {% endAside %}
+
+<figure>{% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="画面の端からWebページがオーバーフローするノートPCとモバイルデバイスの図", width="800", height="469", class="" %}</figure>
+
+{% Aside 'note' %}最も重要なのは、ページの読み込み時に、スクロールする前に、閲覧者に表示されるすべてのコンテンツです。非常に多数のデバイスと画面サイズがあるため、折りたたまれたコンテンツの上にあると見なされるコンテンツには普遍的に定義されたピクセルの高さがありません。 {% endAside %}
+
+HTMLドキュメントの`<head>`で抽出されたスタイルをインライン化すると、これらのスタイルを取り込むために追加の要求を行う必要がなくなります。 CSSの残りの部分は非同期でロードできます。
+
+<figure>{% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="クリティカルCSSが先頭でインライン化されたHTMLファイル", width="800", height="325" %} <figcaption>インライン化されたクリティカルCSS</figcaption></figure>
+
+レンダリング時間を改善すると、特にネットワークの状態が悪い[場合に、知覚されるパフォーマンスに](/rail/#focus-on-the-user)大きな違いが生じる可能性があります。モバイルネットワークでは、帯域幅に関係なく、高遅延が問題になります。
+
+<figure>{% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="3G接続でレンダリングブロックCSSを使用したページ (上) とインライン化されたクリティカルCSSを使用した同じページ (下) を読み込んだフィルムストリップビューの比較。上のフィルムストリップは、最終的にコンテンツを表示する前の6つの空白フレームを表示します。下のフィルムストリップは、最初のフレームに意味のあるコンテンツを表示します。", width="800", height="363" %} <figcaption>3G接続でレンダリングブロックCSSを使用したページ (上) とインライン化されたクリティカルCSSを使用した同じページ (下) の読み込みの比較</figcaption></figure>
+
+[First Contentful Paint (FCP)](/fcp/) が不十分で、Lighthouse監査で「レンダリングブロックリソースの排除」の可能性が特定された場合は、クリティカルCSSを試してみることをお勧めします。
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="「レンダリングブロックリソースの排除」または「未使用のCSSの遅延」の可能性が特定されたLighthouse監査", width="743", height="449" %}
+
+{% Aside 'gotchas' %}大量のCSSをインライン化すると、残りのHTMLドキュメントの送信が遅れることに注意してください。すべてが優先されるということは、何も優先されないということです。インライン化には、ブラウザがCSSをキャッシュに保存できず、後続のページの読み込みでCSSを再利用できないという欠点もあるため、慎重に使用することをお勧めします。 {% endAside %}
+
+<p id="14KB">最初にレンダリングする際の往復処理の数を最小限に抑えるには、最も重要なコンテンツを<strong>14 KB</strong> (圧縮) 未満に抑えるようにしてください。</p>
+
+{% Aside 'note' %}新しい[TCP](https://hpbn.co/building-blocks-of-tcp/)接続は、クライアントとサーバーの間で利用可能な帯域幅全体をすぐに使用することができません。伝送可能な容量を超えたデータで接続が過負荷になるのを防ぐために、[slow-start](https://hpbn.co/building-blocks-of-tcp/#slow-start)で処理されます。このプロセスでは、サーバーは少量のデータで転送を開始し、完全な状態でクライアントに到達した場合、次の往復処理でデータ量を2倍にします。ほとんどのサーバーでは、最初の往復処理で転送できる最大値は10パケットまたは約14KBです。 {% endAside %}
+
+この手法で達成できるパフォーマンスへの影響は、Webサイトのタイプによって異なります。一般的に、サイトのCSSが多いほど、インラインCSSの影響が大きくなる可能性があります。
+
+## ツールの概要
+
+ページのクリティカルCSSを自動的に決定できる多数の優れたツールがあります。この処理を手動で実行するのは非常に大変なので、このようなツールを使用すると便利です。ビューポートの各要素に適用されるスタイルを決定するには、DOM全体を分析する必要があります。
+
+### Critical
+
+[Critical](https://github.com/addyosmani/critical)は最も重要なCSSを抽出、縮小、インライン化し、[npmモジュール](https://www.npmjs.com/package/critical)として提供されています。 Gulp (直接) またはGrunt ([プラグイン](https://github.com/bezoerb/grunt-critical)として) で使用でき、[webpackプラグイン](https://github.com/anthonygore/html-critical-webpack-plugin)もあります。
+
+このツールはシンプルで、プロセスで多数の判定を実行します。スタイルシートを指定する必要さえありません。Criticalによって自動的に検出されます。また、複数の画面解像度のクリティカルCSSの抽出もサポートしています。
+
+### criticalCSS
+
+[CriticalCSS](https://github.com/filamentgroup/criticalCSS)は、最も重要なCSSを抽出するもう1つの[npmモジュールです。](https://www.npmjs.com/package/criticalcss) CLIとしても利用できます。
+
+クリティカルCSSをインライン化して縮小するオプションはありませんが、実際にはクリティカルCSSに属していないルールを強制的に含めることができ、`@font-face`宣言の包含をさらに細かく制御できます。
+
+### Penthouse
+
+[Penthouse](https://github.com/pocketjoso/penthouse)は、サイトまたはアプリに多数のスタイルまたはDOMに動的に挿入されるスタイル (Angularアプリで一般的に使用されている) がある場合に適しています。内部的に[Puppeteer](https://github.com/GoogleChrome/puppeteer)を使用し、[オンラインでホスティングされているバージョン](https://jonassebastianohlsson.com/criticalpathcssgenerator/)も提供しています。
+
+Penthouseはスタイルシートを自動的に検出しません。クリティカルCSSを生成するHTMLファイルとCSSファイルを指定する必要があります。利点は、多数のジョブを並列で実行できることです。
diff --git a/src/site/content/ja/fast/image-cdns/index.md b/src/site/content/ja/fast/image-cdns/index.md
new file mode 100644
index 00000000000..fbc70e65190
--- /dev/null
+++ b/src/site/content/ja/fast/image-cdns/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: 画像CDNを使用して画像を最適化する
+authors:
+  - katiehempenius
+description: 画像CDNは、画像の最適化に優れています。画像CDNに切り替えると、画像のバイト数を40〜80%節約できます。
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## 画像CDNを使用する理由
+
+画像コンテンツ配信ネットワーク (CDN) は画像の最適化に優れています。画像CDNに切り替えると、画像のバイト数を[40〜80%節約](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s)できます。理論的には、ビルドスクリプトのみを使用して同じ結果を得ることが可能ですが、実際にほとんどできません。
+
+## 画像CDNとは何か
+
+画像CDNは、画像の変換、最適化、配信に特化しています。サイトで使用されている画像にアクセスして操作するためのAPIと考えることもできます。画像CDNから読み込まれた画像の場合、画像URLは、読み込む画像だけでなく、サイズ、形式、品質などのパラメータも示します。これにより、さまざまなユースケースに合わせて画像のバリエーションを簡単に作成できます。
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="画像CDNとクライアント間の要求/応答フローを表示します。サイズや形式などのパラメータは、同じ画像のバリエーションを要求するために使用されます。", width="800", height="408" %} <figcaption>画像CDNが画像URLのパラメータに基づいて実行できる変換の例。</figcaption></figure>
+
+画像CDNは、必要に応じて新しいバージョンの画像を作成するという点で、ビルド時の画像最適化スクリプトとは異なります。その結果、CDNは一般に、ビルドスクリプトよりも、個々のクライアントごとに大幅にカスタマイズされた画像の作成に適しています。
+
+## 画像CDNがURLを使用して最適化オプションを示す方法
+
+画像CDNで使用される画像URLは、画像に関する重要な情報と、画像に適用する変換と最適化を伝送します。 URL形式は画像のCDNによって異なりますが、大まかに言えば、すべて同様の機能を備えています。最も一般的な機能をいくつかを見ていきましょう。
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="通常、画像のURLはオリジン、画像、セキュリティキー、変換で構成されます。", width="800", height="127" %}</figure>
+
+### オリジン
+
+画像CDNは、独自のドメインまたは画像CDNのドメインに存在できます。通常、サードパーティの画像CDNは、カスタムドメインを有料で使用するオプションを提供しています。独自のドメインを使用すると、URLを変更する必要がないため、後から画像CDNを簡単に切り替えることができます。
+
+上記の例では、カスタムドメインではなく、パーソナライズされたサブドメインを持つ画像CDNのドメイン (example-cdn.com) を使用しています。
+
+### 画像
+
+通常、画像CDNは、必要なときに既存の場所からイメージを自動的に取得するように構成できます。多くの場合、この機能は、画像CDNによって生成されたイメージのURL内に*既存の画像*の完全なURLを含めることによって実現されます。たとえば、次のようなURLが表示される場合があります。`https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`。 このURLは、`https://flowers.com/daisy.jpg`に存在する画像を取得して最適化します。
+
+画像を画像CDNにアップロードするためのもう一つの方法として、HTTP POST要求経由で画像CDNのAPIに画像を送信する方法も広くサポートされています。
+
+### セキュリティキー
+
+セキュリティキーは、他の人が画像の新しいバージョンを作成することを防ぎます。この機能が有効になっている場合、画像の新しいバージョンごとに一意のセキュリティキーが必要になります。誰かが画像のURLのパラメータを変更しようとして、有効なセキュリティキーを入力しなかった場合は、新しいバージョンを作成できません。画像CDNは、セキュリティキーの生成と追跡の詳細を管理します。
+
+### 変換
+
+画像CDNは、数十から数百種類ものさまざまな画像変換を提供します。これらの変換はURL文字列によって指定されます。また、同時に複数の変換を使用すること関する制限はありません。 Webパフォーマンスのコンテキストでは、最も重要な画像変換は、サイズ、ピクセル密度、フォーマット、および圧縮です。一般的に、このような変換により、画像CDNに切り替えるたときに、画像サイズが大幅に縮小されます。
+
+パフォーマンス変換には客観的に最適な設定が存在する傾向があるため、一部の画像CDNは、このような変換に対して「自動」モードをサポートしています。たとえば、画像をWebP形式に変換するように指定するのではなく、CDNに最適な形式を自動的に選択させて提供させることができます。画像CDNが画像を変換する最善の方法を決定するために使用できるシグナルは次のとおりです。
+
+- [クライアントのヒント](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/) (たとえば、ビューポートの幅、DPR、画像の幅)
+- [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data)ヘッダー
+- [User-Agent](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent)要求ヘッダー
+- [ネットワーク情報API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+
+たとえば、画像CDNは、JPEG XRをEdgeブラウザに、WebPをChromeブラウザに、JPEGを非常に古いブラウザに提供する場合があります。自動設定が一般的です。画像CDNでいったんサポートされた後は、コードを変更して新しいテクノロジーを採用する必要がなく、画像の最適化に関する画像CDNの優れた能力を活用できるためです。
+
+## 画像CDNの種類
+
+画像CDNは、セルフマネージドとサードパーティマネージドの2つのカテゴリに分類できます。
+
+### セルフマネージド画像CDN
+
+セルフマネージドCDNは、独自のインフラストラクチャを維持管理する能力を備えた技術担当者が配置されているサイトに適しています。
+
+[Thumbor](https://github.com/thumbor/thumbor)は、現在利用可能な唯一のセルフマネージド画像CDNです。オープンソースで無料で使用できますが、一般的に、ほとんどの商用CDNよりも機能が少なく、ドキュメントも充実していません。[Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor)、[Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87)、および[99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/)は、Thumborを使用している3つのサイトです。設定手順については、[Thumbor画像CDNをインストールする方法](/install-thumbor)の投稿を参照してください。
+
+### サードパーティの画像CDN
+
+サードパーティの画像CDNは、画像CDNをサービスとして提供します。クラウドプロバイダがサーバーやその他のインフラストラクチャを有料で提供するのと同じように、画像CDNは画像の最適化と配信を有料で提供します。サードパーティの画像CDNは基盤となるテクノロジーを管理しているため、導入が非常に簡単で、通常は10〜15分で完了します。ただし、大規模なサイトの完全な移行には、それよりもかなり長い時間がかかる場合があります。通常、サードパーティの画像CDNは使用状況ティアに基づいて価格設定されます。ほとんどの画像CDNは、製品を試す機会を提供するために、無料のティアまたは無料トライアルのいずれかを提供しています。
+
+## 画像CDNの選択
+
+画像CDNには多くの優れたオプションがあります。画像CDNによって機能の多少がありますが、いずれも画像のバイト数を削減し、ページの読み込みを高速化するのに役立つ可能性があります。機能セットのほかに、画像CDNを選択する際に考慮すべき他の要素は、コスト、サポート、ドキュメント、およびセットアップまたは移行の容易さです。
+
+決定する前に自分で試してみるのも役立つでしょう。いくつかの画像CDNを簡単に導入する方法については、次のコードラボをご覧ください。
diff --git a/src/site/content/ja/fast/index.md b/src/site/content/ja/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/ja/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/ja/fast/lazy-loading-video/index.md b/src/site/content/ja/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..83f84e3895f
--- /dev/null
+++ b/src/site/content/ja/fast/lazy-loading-video/index.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: 動画を遅延読み込みする
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: この記事では、遅延読み込みと、動画を遅延読み込みするときに利用できるオプションについて説明します。
+tags:
+  - performance
+feedback:
+  - api
+---
+
+[画像要素](/lazy-loading-images)と同様に、動画も遅延読み込みすることができます。動画は通常、`<video>` 要素で読み込まれます（ただし限定的な実装で [`<img>` を使用する別の手法](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/)も出現しています）。`<video>` を遅延読み込みする*方法*はユースケースによって異なるため、それぞれに異なるソリューションを必要とするシナリオをいくつか確認してみましょう。
+
+## 自動再生しない動画の場合 {: #video-no-autoplay }
+
+ユーザーが再生を開始する動画（つまり、*自動再生しない*動画）の場合、`<video>` 要素に [`preload` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload) を指定することが望ましい場合があります。
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+上記の例では、値が `none` の `preload` 属性を使用して、ブラウザが*すべての*動画データをプリロードしないようにしています。`poster` 属性は、`<video>` 要素に、動画の読み込み中に動画のスペースを占有するプレースホルダーを表示するようにする属性です。これは、動画を読み込む際のデフォルトの動作がブラウザごとに異なる可能性があるためです。
+
+- Chrome では、`preload` のデフォルトは以前は `auto` でしたが、Chrome 64 では、デフォルトで `metadata` に変更されています。それでも、デスクトップ版の Chrome では、`Content-Range` ヘッダーを使用して動画の一部がプリロードされる場合があります。Firefox、Edge、Internet Explorer 11 でも同じように動作します。
+- デスクトップ版の Chrome と同様に、Safari の 11.0 デスクトップ版は、動画の範囲をプリロードします。バージョン 11.2 からは、動画メタデータのみがプリロードされます。 [iOS の Safariでは、動画がプリロードされることはありません](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9)。
+- [データセーバーモード](https://support.google.com/chrome/answer/2392284)が有効になっている場合、 `preload` はデフォルトで `none` になります。
+
+`preload` に関するブラウザのデフォルトの動作は明確に設定されていないため、明示的に設定することがおそらく最善の策と言えるでしょう。ユーザーが再生を開始するこのケースでは、`preload="none"` が、すべてのプラットフォームで動画の読み込みを延期する最も簡単な方法です。`preload` 属性は、動画コンテンツの読み込みを延期する唯一の方法ではありません。「[*Fast Playback with Video Preload*](/fast-playback-with-preload/)」で、JavaScript で動画再生を扱うためのアイデアや洞察を得られるかもしれません。
+
+残念ながら、アニメーション GIF の代わりに動画を使用する場合は役に立ちません。これについて、次のセクションで説明します。
+
+## アニメーション GIF の代わりとして機能する動画の場合 {: #video-gif-replacement }
+
+アニメーション GIF は広く使用されていますが、多くの点で、特にファイルサイズにおいて、相当する動画に劣っています。アニメーション GIF は、数メガバイト範囲のデータにまで及ぶ可能性があります。同等の視覚的な品質を持つ動画は、はるかに小さい傾向があります。
+
+アニメーション GIF の代わりに `<video>` 要素を使用するのは `<img>` 要素ほど簡単ではありません。アニメーション GIF には次の 3 つの特徴があります。
+
+1. 読み込まれると自動的に再生する。
+2. 連続的にループする（[必ずしもそうではないケースもあります](https://davidwalsh.name/prevent-gif-loop)）。
+3. 音声トラックがない。
+
+これを `<video>` 要素を使用して達成すると、次のようになります。
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+`autoplay`、`muted`、および `loop` 属性は自明です。[iOS で自動再生を行うには、`playsinline` が必要](https://webkit.org/blog/6784/new-video-policies-for-ios/)です。これで、プラットフォーム間で機能する GIF の代替として動画をサーブできるようになりました。しかし、それを遅延読み込みするにはどうすればよいでしょうか？手始めに、`<video>` マークアップを適宜変更します。
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+[`poster` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)が追加されていることに気付くでしょう。これにより、動画が遅延読み込みされるまで `<video>` 要素のスペースに表示されるプレースホルダーを指定できます。[`<img>` の遅延読み込みの例](/lazy-loading-images/)と同様に、`<source>` 要素の `data-src` 属性に動画の URL を隠しておきます。そこから、Intersection Observer ベースの画像の遅延読み込みの例と同様の JavaScript コードを使用します。
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+`<video>` 要素を遅延読み込みするときは、すべての子 `<source>` 要素を反復処理し、それらの `data-src` 属性を `src` 属性に反転する必要があります。それが完了したら、要素の `load` メソッドを呼び出して動画の読み込みをトリガーする必要がありますが、それが終われば `autoplay` 属性に従ってメディアが自動的に再生を開始するようになります。
+
+この方法を使用すると、アニメーション GIF の動作をエミュレートする動画ソリューションを得られますが、アニメーション GIF と同じように大量のデータを使用することはなく、そのコンテンツを遅延読み込みすることができます。
+
+## 遅延読み込みライブラリ {: #libraries }
+
+以下のライブラリは、動画の遅延読み込みに役立ちます。
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) と [lozad.js](https://github.com/ApoorvSaxena/lozad.js) は、Intersection Observer のみを使用する超軽量のオプションです。そのため、パフォーマンスは高くなりますが、古いブラウザで使用する前にポリフィルする必要があります。
+- [yall.js](https://github.com/malchata/yall.js) は、Intersection Observer を使用し、イベントハンドラーにフォールバックするライブラリです。IE11 および主要なブラウザとの互換性があります。
+- React 固有の遅延読み込みライブラリが必要な場合は、 [react-lazyload](https://github.com/jasonslyvia/react-lazyload) を検討することをお勧めします。Intesection Observer を使用しませんが、React でのアプリケーション開発に慣れているのであれば、画像の遅延読み込みに似た方法を*得ることができます*。
+
+これらの遅延読み込みライブラリには十分なドキュメントが揃っており、さまざまな遅延読み込みに関する取り組みに対応できるマークアップパターンが豊富に用意されています。
diff --git a/src/site/content/ja/fast/lazy-loading/index.md b/src/site/content/ja/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..e14655d5a01
--- /dev/null
+++ b/src/site/content/ja/fast/lazy-loading/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: 遅延読み込みを使用して読み込み速度を向上しましょう
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: |2-
+
+  この投稿では、遅延読み込みと、自分のサイトで要素を遅延読み込みする必要である理由について説明します。
+tags:
+  - performance
+  - images
+---
+
+Webサイトの一般的なペイロードに含まれる[画像](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest)と[ビデオ](http://beta.httparchive.org/reports/page-weight#bytesVideo)の部分は、重要になるかもしれません。残念ながら、プロジェクトの利害関係者は、既存のアプリケーションからメディアリソースを削減することを望まいようです。このような行き詰まりは、特にすべての関係者がサイトのパフォーマンスを向上させたいが、実施方法について合意を得ない場合、苛立たしいものになります。幸いことに、遅延読み込みは、初期ページのペイロード*と*読み込み時間を短縮するソリューションですが、コンテンツを無駄にすることはありません。
+
+## 遅延読み込みとは何ですか？ {: #what }
+
+遅延読み込みは、ページの読み込み時に重要ではないリソースの読み込みを延期する手法です。代わりに、こういった重要ではないリソースは、必要になる時点に読み込まれます。画像の場合、「重要ではない」は普通に「画面外」と同義です。 Lighthouseを使用して改善を検討したことがあれば、この領域で[オフスクリーン画像監査の延期](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)のフォームでガイダンスを見たことがあるかもしれません。
+
+<figure>{% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Lighthouseでのオフスクリーン画像監査の延長のスクリーンショット。", width="800", height="102" %}<figcaption>Lighthouseのパフォーマンス監査の1つは、遅延読み込みの候補である画面外の画像を特定することです。</figcaption></figure>
+
+おそらく、遅延読み込みが実際に行われているのを見たことがあるでしょう。これは次のようになります。
+
+- ページに訪問し、コンテンツを読みながらスクロールを開始します。
+- ある時点で、プレースホルダー画像をビューポートにスクロールします。
+- プレースホルダー画像がいきなり最終画像に置き換えられます。
+
+画像の遅延読み込みの例は、一般公開プラットフォーム[Medium](https://medium.com/)にあります。このプラットフォームは、ページの読み込み時に軽量のプレースホルダー画像を読み込み、そしてビューポートにスクロールすると遅延読み込みの画像に置き換えられます。
+
+<figure>{% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="ブラウジング中、かつ遅延読み込みの動作を示しているWebサイトMediumのスクリーンショット。ぼやけたプレースホルダーは左側にあり、読み込まれたリソースは右にあります。", width="800", height="493" %}<br><figcaption>実際の遅延読み込みの例の画像。プレースホルダー画像はページの読み込みに読み込まれ（左）、そしてビューポートにスクロールすると、必要なときに最終的な画像が読み込まれます。</figcaption></figure>
+
+遅延読み込みに慣れていない場合は、この手法がどれほど有用であり、メリットは何であるか疑問に思われるかもしれません。ここで読んで調べましょう！
+
+## なぜ画像や動画を単に*読み込む*のではなく、遅延読み込みますか？ {: #why }
+
+ユーザーに表示されなさそうものを読み込んでいる可能性があるためです。これにはいくつかの理由でこの問題が起こります。
+
+- データを浪費します。計測されていない接続では、これは発生する可能性のある最悪の事態ではありません（ただし、実際にユーザーに表示される他のリソースをダウンロードするためにその貴重な帯域幅を使用することはできます）。ただし、制限されたデータプランでは、ユーザーが見ることのないものを読み込むと、お金の無駄になるかもしれません。
+- 処理時間、バッテリー、およびその他のシステムリソースを浪費します。メディアリソースがダウンロードされた後、ブラウザはそれをデコードし、ビューポートにそのコンテンツをレンダリングする必要があります。
+
+画像と動画の遅延読み込みにより、初期ページの読み込み時間、初期ページの重さ、システムリソースの使用量が削減されます。これらはすべて、パフォーマンスにプラスの影響を及ぼします。
+
+## 遅延読み込みの実装{: #implementing }
+
+遅延読み込みを実装するにはいくつかの手段があります。ソリューションの選択では、サポートするブラウザーと、遅延読み込みしようとしているものを考慮する必要があります。
+
+最新のブラウザは、画像とiframeの`loading`属性の使用によって有効にされる[ブラウザレベルの遅延読み込み](/browser-level-image-lazy-loading/)を実装しています。古いブラウザとの互換性を提供したり、埋め込む遅延読み込み無しで要素で遅延読み込みを実行したりするには、独自のJavaScriptを使用してソリューションを実装できます。これを行うのに役立つ既存のライブラリも多数あります。こういったすべてのアプローチの詳細については、このサイトの投稿を参照してください。
+
+- [遅延読み込みの画像](/lazy-loading-images/)
+- [遅延読み込みの動画](/lazy-loading-video/)
+
+また、[遅延読み込みに関する潜在的な問題の](/lazy-loading-best-practices)リストと、実装時の注意すべき点をまとめました。
+
+## 結論
+
+画像と動画の遅延読み込みにより、サイトの初期読み込み時間とページペイロードが大幅に低下する可能性があるので、慎重にご使用ください。ユーザーは、不必要なネットワークアクティビティや、表示されない可能性のあるメディアリソースの処理コストを負担することはありませんが、必要に応じてそれらのリソースを表示することはできます。
+
+パフォーマンス改善手法に関する限り、遅延読み込みについてはかなり議論の余地がありません。サイトにインライン画像がたくさんある場合は、不要なダウンロードを減らすのに最適な方法です。自分のサイトのユーザーとプロジェクトの利害関係者はそれを高く評価するでしょう！
diff --git a/src/site/content/ja/fast/optimize-webfont-loading/index.md b/src/site/content/ja/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..1f3db609aeb
--- /dev/null
+++ b/src/site/content/ja/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,148 @@
+---
+layout: post
+title: WebFont の読み込みとレンダリングを最適化する
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: この記事では、ページの読み込み時に WebFonts が使用できない場合に、レイアウトのずれや空白のページを防ぐために WebFonts を読み込む方法について説明します。
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+スタイルのバリエーションで、不要な可能性のあるものすべてを含む「完全な」WebFont に加え、結局未使用となり得るすべてのグリフが使用されていると、ダウンロードのデータ量は簡単に数メガバイトに跳ね上がる場合があります。この記事では、ユーザーが使用するものだけをダウンロードできるように、WebFonts の読み込みを最適化する方法について説明します。
+
+大きなファイルにすべてのバリエ―ションが含まれるという問題に対処できるよう、`@font-face` CSS ルールは、フォントファミリをリソースのコレクションに分割できるように設計されています。Unicode サブセットやスタイルの個別のバリエーションなどがその例にあたります。
+
+ブラウザは、こうした宣言をもとに、必要なサブセットとバリエーションを見つけ出し、テキストのレンダリングに最小限必要なセットをダウンロードします。とても便利な機能です。ただし、注意が足りないと、重要なレンダリングパスにパフォーマンスのボトルネックが発生し、テキストのレンダリングが遅れる可能性があります。
+
+### デフォルトの動作
+
+フォントの遅延読み込みは、テキストのレンダリングを遅れさせる可能性があると考えられます。ブラウザは、テキストをレンダリングするために必要なフォントリソースを認識する前に、DOM ツリーと CSSOM ツリーに依存する[レンダリングツリー](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)を構築する必要があります。その結果、フォントリクエストは他の重要なリソースの後まで処理されず、ブラウザはリソースがフェッチされるまでテキストのレンダリングができないようブロックされるという場合があります。
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="フォントのクリティカルレンダリングパス", width="800", height="303" %}
+
+1. ブラウザが HTML ドキュメントを要求します。
+2. ブラウザが HTML レスポンスの解析と DOM の構築を開始します。
+3. ブラウザが CSS、JS、およびその他のリソースを検出し、リクエストをディスパッチします。
+4. すべての CSS コンテンツが受信された後にブラウザが CSSOM を構築し、それを DOM ツリーと組み合わせてレンダリングツリーを構築します。
+    - フォントリクエストは、レンダリングツリーが、ページ上で指定されたテキストをレンダリングするのに必要なフォントバリエーションを示した後にディスパッチされます。
+5. ブラウザはレイアウトを実行し、コンテンツを画面に描画します。
+    - フォントがまだ使用できない場合、ブラウザはテキストピクセルを一切レンダリングしない可能性があります。
+    - フォントが使用可能になると、ブラウザはテキストピクセルを描画します。
+
+ブラウザがページレイアウトをレンダリングしながらも、テキストを完全に省いてしまう「空白テキスト問題」は、レンダリングツリーが構築された直後に完了し得るページコンテンツの最初の描画とフォントリソースに対するリクエストとの間で起る「競合」が原因で発生します。
+
+WebFonts をプリロードし、`font-display` を使用することにより、フォントが利用できない場合のブラウザーの動作をコントロールすれば、フォントの読み込みによって発生する空白ページやレイアウトのずれを防ぐことができます。
+
+### WebFont リソースをプリロードする
+
+事前に分かっている URL でホストされている特定の WebFont がページに必要になる可能性が高い場合は、[リソースの優先順位設定](https://developers.google.com/web/fundamentals/performance/resource-prioritization)を行うと便利です。`<link rel="preload">` を使用すると、クリティカルレンダリングパスの早い段階で、CSSOM が作成されるのを待たずに、WebFont のリクエストがトリガーされます。
+
+### テキストレンダリングの遅延をカスタマイズする
+
+プリロードを実行すれば、ページのコンテンツがレンダリングされるタイミングで WebFont が使用可能になる可能性は高まりますが、それが保証される訳ではありません。どちらにしろ、まだ利用できない `font-family` が使用されるテキストをレンダリングするブラウザの動作を考慮する必要があります。
+
+[Avoid invisible text during font loading](/avoid-invisible-text/) と題した記事を読めば、ブラウザのデフォルト動作には一貫性がないことがわかります。最新のブラウザであれば、[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) を使って希望の動作を指示できます。
+
+一部のブラウザに実装されるフォントタイムアウトの既存の動作と同様に、`font-display` を使用すれば、フォントダウンロードの存続期間を主に次の 3 つ期間に分割します。
+
+1. 最初のピリオドは**フォントブロック期間**です。この期間中にフォントフェイスが読み込まれていない場合、それを使用しようとする要素は、代わりに非表示のフォールバックフォントフェイスを使ってレンダリングする必要があります。フォントフェイスは、ブロック期間中に正常に読み込まれると、通常どおり使用されます。
+2. **フォントスワップ期間**は、フォントブロック期間の直後に発生します。この期間中にフォントフェイスが読み込まれていない場合、それを使用しようとする要素は、代わりにフォールバックフォントフェイスを使ってレンダリングする必要があります。フォントフェイスは、スワップ期間中に正常に読み込まれると、通常どおり使用されます。
+3. **フォント失敗期間**は、フォントスワップ期間の直後に発生します。この期間の開始時にフォントフェイスが読み込まれていない場合は、読み込み失敗とされ、通常のフォントへのフォールバックが発生します。それ以外の場合、フォントフェイスは通常どおり使用されます。
+
+こうした期間を理解すれば、`font-display` を使用して、ダウンロードされたのか、またはどのタイミングでダウンロードされたのかに応じて、どのようにフォントをレンダリングすべきかを判断できます。
+
+`font-display`プロパティを使用するには、`@font-face` ルールに追加します。
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* or block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+現在、`font-display` は次の値をサポートしています。
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+フォントのプリロードと `font-display` プロパティについて詳しくは、以下の記事を参照してください。
+
+- [Avoid invisible text during font loading (フォントの読み込み中に非表示のテキストが表示されるのを避ける)](/avoid-invisible-text/)
+- [Controlling font performance using font-display (font-display を使用したフォントパフォーマンスの制御)](https://developers.google.com/web/updates/2016/02/font-display)
+- [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts (オプションのフォントをプリロードすることにより、レイアウトのずれやテキストが一瞬見えなくなる現象 (FOIT) を防ぐ)](/preload-optional-fonts/)
+
+### Font Loading API
+
+`<link rel="preload">`と`font-display`を一緒に使用すると、オーバーヘッドをあまり追加せずに、フォントの読み込みとレンダリングを細かく制御できます。ただし、追加のカスタマイズが必要で、かつ JavaScript の実行により発生するオーバーヘッドを負担しても構わないなら、別の選択肢を使えます。
+
+[Font Loading API](https://www.w3.org/TR/css-font-loading/) は、CSS フォントフェイスを定義および操作し、ダウンロードの進行状況を追跡し、デフォルトの遅延読み込み動作をオーバーライドするためのスクリプトインターフェイスを提供します。たとえば、特定のフォントバリエーションが必要だと確信している場合は、それを定義して、フォントリソースを直地にフェッチするようブラウザに指示することができます。
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// don't wait for the render tree, initiate an immediate fetch!
+font.load().then(function() {
+  // apply the font (which may re-render text and cause a page reflow)
+  // after the font has finished downloading
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // OR... by default the content is hidden,
+  // and it's rendered after the font is available
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // OR... apply your own render strategy here...
+});
+```
+
+また、([`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check)) メソッドを使ってフォントの状態を確認し、そのダウンロードの進行状況を追跡できるため、ページにテキストをレンダリングするためのカスタム戦略を定義することもできます。
+
+- フォントが使用可能になるまで、すべてのテキストレンダリングをホールドできます。
+- フォントごとにカスタムタイムアウトを実装できます。
+- フォールバックフォントを使用して、レンダリングのブロックを解除し、フォントが使用可能になった後で目的のフォントを使用する新しいスタイルを挿入できます。
+
+何よりも、ページ上のさまざまなコンテンツに対して上記の戦略を組み合わせたり、マッチさせたりすることができます。たとえば、フォントが使用可能になるまで、一部のセクションでテキストのレンダリングを遅らせ、フォールバックフォントを使用し、フォントのダウンロードが完了した後に再度レンダリングすることができます。
+
+{% Aside %}Font Loading API は、[古いブラウザでは使用できません](http://caniuse.com/#feat=font-loading)。たとえ、JavaScript の他の依存関係から負担するオーバーヘッドが増えるとしても、[FontLoader polyfill](https://github.com/bramstein/fontloader) または [WebFontloader library](https://github.com/typekit/webfontloader) を使用して同様の機能を提供することを検討してください。{% endAside %}
+
+### 適切なキャッシングは必須
+
+フォントリソースは、通常、頻繁に更新されない静的リソースです。その結果、最大有効期限が長い場合に最適です。すべてのフォントリソースに対して、[条件付き ETag ヘッダー](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags)または[最適なキャッシュコントロールポリシー](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control)を必ず指定しましょう。
+
+ウェブアプリケーションが[サービスワーカー](https://developer.chrome.com/docs/workbox/service-worker-overview/)を使用する場合は、ほぼすべてのユースケースにおいて、[キャッシュファースト戦略](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network)を用いてフォントリソースを提供するのが適切です。
+
+フォントを保存するために、[`localStorage`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)  や [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) を使用するのは避けましょう。どちらも、パフォーマンスに問題があります。ブラウザの HTTP キャッシュは、ブラウザにフォントリソースを提供するのに最も適した、最も堅牢なメカニズムを提供します。
+
+## WebFont の読み込みチェックリスト
+
+- **`<link rel="preload">` 、`font-display` 、または Font Loading API を使用して、フォントの読み込みとレンダリングをカスタマイズする**。デフォルトの遅延読み込み動作は、テキストのレンダリングを遅らせる場合があります。こうしたウェブプラットフォーム機能を使用すれば、ページ上のさまざまなコンテンツに対してカスタムレンダリングとタイムアウト連略を指定できます。
+- **再検証のポリシーと最適なキャッシュのポリシーを指定する**。フォントは、更新頻度の低い静的リソースです。異なるページ間でフォントを効率的に再利用できるように、長い間に渡って保存される最長有効期間のタイムスタンプと再検証トークンがブラウザによって提供されていることを確認してください。 サービスワーカーを使用する場合は、キャッシュファースト戦略が適切です。
+
+## Lighthouse を使用した WebFont の読み込み動作の自動テスト
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) を使用すると、ウェブフォントを最適化するためのベストプラクティスが実践されていることを確認するプロセスを自動化できます。
+
+以下の監査を実施すれば、ウェブページでウェブフォントを最適化するためのベストプラクティスが長期に渡って実践されていることが保証されます。
+
+- [Preload key requests (キーリクエストをプリロードする)](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Uses inefficient cache policy on static assets (静的アセットに非効率的なキャッシュポリシーが使用されている)](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [All text remains visible during WebFont loads (WebFont の読み込み中もすべてのテキストが表示されたままになる)](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/ja/fast/preload-critical-assets/index.md b/src/site/content/ja/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..65eca61d322
--- /dev/null
+++ b/src/site/content/ja/fast/preload-critical-assets/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 重要なアセットをプリロードして、読み込み速度を向上させる
+authors:
+  - houssein
+  - mihajlija
+description: Webページを開くと、ブラウザはすぐにサーバーからのHTMLファイルをリクエストして、その内容を解析し、その他の外部参照用に個別のリクエストを送信します。クリティカルリクエストチェーンは、ブラウザによって優先順位が付けられてフェッチされるリソースの順序を表します。
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Webページを開くと、ブラウザはすぐにサーバーからのHTMLファイルをリクエストして、その内容を解析し、その他の外部参照用に個別のリクエストを送信します。開発者はページが必要とするすべてのリソースとどれが最も重要であるかを理解しています。その知識を使用すれば、重要なリソースを事前に要求し、ロードプロセスを高速化することが可能です。この記事には`<link rel="preload">`を使用してそれを実現する方法について説明します。
+
+## プリロードの仕組み
+
+プリロードは、通常、ブラウザが遅れて検出するリソースに最適です。
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Chrome DevToolsネットワークパネルのスクリーンショット。", width="701", height="509" %} <figcaption>この例では、<a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a>ルールを使って、Pacificoフォントがスタイルシートに定義されています。ブラウザは、スタイルシートのダウンロードと解析が完了した後にのみフォントファイルをロードします。</figcaption></figure>
+
+特定のリソースが現在のページで重要であることがわかっているため、そのリソースをプリロードすることで、ブラウザがロードするよりも前にそのリソースをフェッチするようにブラウザに指示します。
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="プリロードを適用した後のChrome DevToolsネットワークパネルのスクリーンショット。", width="701", height="509" %} <figcaption>この例では、Pacificoフォントがプリロードされているため、ダウンロードはスタイルシートと並行して行われます。</figcaption></figure>
+
+クリティカルリクエストチェーンは、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。Lighthouseは、このチェーンの3番目のレベルにあるアセットを遅延検出と識別します。[**重要リクエストのプリロード**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)監査を使用して、プリロードするリソースを特定できます。
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="Lighthouseの「重要なリクエストのプリロード」監査。", width="745", height="97" %}
+
+HTMLドキュメントのheadに、`<link>`タグと`rel="preload"`を追加して、リソースをプリロードできます。
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+ブラウザはプリロードされたリソースをキャッシュするため、必要なときにすぐに利用できます。（スクリプトを実行したり、スタイルシートを適用したりすることはありません。）
+
+{% Aside %} プリロード実装後、[Shopify、Financial Times、Treeboなどの多くのサイトで、](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)[Time to Interactive](/tti/)や[First Contentful Paint](/fcp/)などのユーザー中心の指標において1秒の改善が確認されました。{% endAside %}
+
+[`preconnect`](/preconnect-and-dns-prefetch)や[`prefetch`](/link-prefetch)などのリソースヒントは、ブラウザが適切と判断したときに実行されますが、`preload`はブラウザ必須です。最新のブラウザはすでにリソースの優先順位付けの実行に非常に優れているため、`preload`を慎重に使用し、最も重要なリソースのみをプリロードすることが重要です。
+
+未使用のpreloadについては、Chromeは`load`イベントの約3秒後にコンソール警告を表示します。
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="未使用のプリロードされたリソースに関するChrome DevToolsコンソールの警告。", width="800", height="228" %}
+
+{% Aside %} [`preload`はすべての最新のブラウザでサポート](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)されています。{% endAside %}
+
+## ユースケース
+
+{% Aside 'caution' %}執筆時点では、Chromeには、他の優先度の高いリソースよりも早くフェッチされるプリロードリクエストに関する未解決の[バグ](https://bugs.chromium.org/p/chromium/issues/detail?id=788757)があります。これが解決されるまでは、プリロードされるリソースがどのように「キューを割り込んで」、必要以上に早く要求される可能性があることに注意してください。 {% endAside %}
+
+### CSSで定義されたリソースのプリロード
+
+[`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face)ルールで定義されたフォントやCSSファイルで定義された背景画像は、ブラウザがそれらのCSSファイルをダウンロードして解析するまで検出されません。これらのリソースをプリロードすると、CSSファイルがダウンロードされる前に確実にフェッチされます。
+
+### CSSファイルのプリロード
+
+[クリティカルCSSアプローチ](/extract-critical-css)を使用している場合は、CSSは2つの部分に分割されます。展開の上のコンテンツをレンダリングするために必要なクリティカルCSSは、ドキュメントの`<head>`にインライン化され、それ以外のCSSは通常JavaScriptで遅延読み込みされます。クリティカルでないCSSを読み込まれるまでJavaScriptの実行を待機すると、ユーザーがスクロールする際にレンダリングに遅延が発生することがあるため、`<link rel="preload">`を使用してダウンロードをより早く開始することをお勧めします。
+
+### JavaScriptファイルのプリロード
+
+ブラウザはプリロードされたファイルを実行しないため、プリロードはフェッチをと[実行](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)を分離するのに役立ち、Time to Interactiveなどの指標を改善できます。プリロードは、JavaScriptバンドルを[分割](/reduce-javascript-payloads-with-code-splitting)して、重要なチャンクのみをプリロードする場合に最適にです。
+
+## rel=preloadを実装する方法
+
+`preload`を実装する最も簡単な方法は、ドキュメントの`<head>`に`<link>`タグを追加することです。
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+`as`属性を指定すると、ブラウザはプリフェッチされたリソースのタイプに応じて優先度を設定し、適切なヘッダーを設定し、リソースがキャッシュにすでに存在するかどうかを判断するのに役立ちます。この属性に使用できる値には、`script`、`style`、`font`、`image`[など](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes)があります。
+
+{% Aside %}ブラウザが様々な種類のリソースの優先順位をどのように付けているかを知るには、[Chromeのリソースの優先順位とスケジュール](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit)に関するドキュメントをご覧ください。{% endAside %}
+
+{% Aside 'caution' %} `as`属性を省略したり、無効な値を設定したりすることは、ブラウザが何をフェッチしているのかわからないため、正しい優先度を決定できない[XHRリクエスト](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)と同等です。また、スクリプトなどの一部のリソースが2回フェッチされる可能性もあります。 {% endAside %}
+
+フォントなどの一部の種類のリソースは、[匿名モード](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements)で読み込まれます。 `preload`を使って`crossorigin`属性を設定する必要がある場合は、次のようにします。
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} `crossorigin`属性なしでプリロードされたフォントは2回フェッチされます！ {% endAside %}
+
+`<link>`要素には、[`type` attribute](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)属性も使用できます。これには、紐付けされたリソースの[MIMEタイプ](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)が含まれます。ブラウザが`type`属性の値を使用することにより、ファイルタイプがサポートされている場合にのみリソースがプリロードされるようにすることができます。ブラウザが指定されたリソースタイプをサポートしていない場合は、`<link rel="preload">`を無視します。
+
+{% Aside 'codelab' %} [Webフォントをプリロードすることで、ページのパフォーマンスを向上させます](/codelab-preload-web-fonts)。 {% endAside %}
+
+[`Link` HTTPヘッダーを](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link)介して、任意のタイプのリソースをプリロードすることもできます。
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+HTTPヘッダーでの`preload`の指定には、ブラウザがドキュメントを解析して検出する必要がないというメリットがあるため、一部のケースでわずかな改善が得られます。
+
+### Webpackを使用したJavaScriptモジュールのプリロード
+
+アプリケーションのビルドファイルを作成するモジュールバンドラーを使用している場合は、preloadタグの挿入をサポートしているかどうかを確認する必要があります。[Webpack](https://webpack.js.org/)のバージョン4.6.0以降では、`import()`内で[マジックコメント](https://webpack.js.org/api/module-methods/#magic-comments)を使用することでpreloadがサポートされています。
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+古いバージョンのWebpackを使用している場合は、[preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin)などのサードパーティのプラグインを使用してください。
+
+## 結論
+
+ページ速度を向上させるには、ブラウザが遅れて検出する重要なリソースをプリロードするようにします。すべてをプリロードすると逆効果になるため、`preload`を慎重に使用し、[実際の影響を測定](/fast#measure-performance-in-the-field)するようにしてください。
diff --git a/src/site/content/ja/fast/rail/index.md b/src/site/content/ja/fast/rail/index.md
new file mode 100644
index 00000000000..a5893632e6a
--- /dev/null
+++ b/src/site/content/ja/fast/rail/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: RAILモデルでパフォーマンスを評価する
+description: |2-
+
+  RAILモデルを使用すると、設計者と開発者は、ユーザーエクスペリエンスに最も大きく影響するパフォーマンス最適化作業に狙いを定めることができます。RAILモデルが設定する目標とガイドライン、およびそれらを達成するために使用できるツールについて説明します。
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL**は、パフォーマンスに関する考え方を構造化する**ユーザー中心**のパフォーマンスモデルです。このモデルは、ユーザーエクスペリエンスを主要なアクション（タップ、スクロール、ロードなど）に分割し、それぞれのパフォーマンス目標を定義するのに役立ちます。
+
+RAILは、ウェブアプリのライフサイクルを構成する4つの要素、Response (応答)、Animation (アニメーション)、Idle (アイドル処理)、Load (読み込み) の頭文字を取ったものです。それぞれのパフォーマンスに関するユーザーの期待は異なるため、パフォーマンスの目標は、コンテキストおよび[ユーザーが遅延をどのように認識するかを調べたUX調査](https://www.nngroup.com/articles/response-times-3-important-limits/)を基に定義されます。
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="RAILパフォーマンスモデルを構成する4要素: 応答、アニメーション、アイドル処理、読み込み。", width="800", height="290" %}<figcaption> RAILパフォーマンスモデルを構成する4要素</figcaption></figure>
+
+## ユーザーに焦点を合わせる
+
+パフォーマンスへの取り組みはユーザーを中心に考えます。次の表は、ユーザーがパフォーマンスの遅延をどのように認識しているかを判断する主なメトリックを説明したものです。
+
+<table class="table-wrapper scrollbar">
+  <thead>パフォーマンスの遅延に対するユーザーの認識</thead>
+  <tr>
+    <td>0〜16ミリ秒</td>
+    <td>ユーザーは動きの追跡が非常にうまく、アニメーションがスムーズでないことを嫌います。毎秒60個の新しいフレームがレンダリングされる限り、アニメーションはスムーズであると認識されます。これは、ブラウザが新しいフレームを画面にペイントするのにかかる時間を含めて、フレームあたり16ミリ秒であり、アプリがフレームを生成するのに約10ミリ秒かかります。</td>
+  </tr>
+  <tr>
+    <td>0〜100ミリ秒</td>
+    <td>この時間枠内でユーザーのアクションに応答すると、ユーザーは結果がすぐに得られると感じます。これ以上の時間がかかると、アクションと反応の連携が壊れています。</td>
+  </tr>
+  <tr>
+    <td>100〜1000ミリ秒</td>
+    <td>この枠内では、物事がタスクの自然で継続的な進行の一部として感じられます。 ウェブ上のほとんどのユーザーにとって、ページの読み込みやビューの変更はタスクを意味します。</td>
+  </tr>
+  <tr>
+    <td>1000ミリ秒以上</td>
+    <td>1000ミリ秒（1秒）を超えると、ユーザーは実行中のタスクに集中できなくなります。</td>
+  </tr>
+  <tr>
+    <td>10000ミリ秒以上</td>
+    <td>10000ミリ秒（10秒）を超えると、ユーザーは不満を感じ、タスクを放棄する可能性があります。ユーザーが後で戻ってくるかどうかは定かではありません。</td>
+  </tr>
+</table>
+
+{% Aside %}ユーザーは、ネットワークの状態とハードウェアに応じて、パフォーマンスの遅延を異なるかたちで認識します。たとえば、高速Wi-Fi接続を介して強力なデスクトップマシンにサイトを読み込むという作業は、通常1秒未満で行われ、ユーザーはそれに慣れてしまっています。 低速の3G接続を使うモバイルデバイスにサイトを読み込むには時間がかかるため、モバイルユーザーは一般的に辛抱強く、またモバイルでは5秒以内に読み込むというのが現実的な目標と言えるでしょう。{% endAside %}
+
+## 目標とガイドライン
+
+RAILのコンテキストにおいて、**目標**と**ガイドライン**という用語には具体的な意味があります。
+
+- **目標**。ユーザーエクスペリエンスに関連する主要なパフォーマンスメトリック。たとえば、ペイントはタップしてから100ミリ秒未満で完了します。人間による認識は比較的一定であるため、これらの目標がすぐに変わる可能性は低いと言えるでしょう。
+
+- **ガイドライン**。目標の達成に役立つ推奨事項。これらは、現在のハードウェアおよびネットワーク接続の状態に固有である可能性があるため、時間の経過とともに変化する可能性があります。
+
+## 応答：イベントを50ミリ秒未満で処理する
+
+**目標**：ユーザー入力によって開始された移行を100ミリ秒以内に完了することで、ユーザーはやりとりが瞬時に行われていると感じます。
+
+**ガイドライン**：
+
+- 目に見える応答を100ミリ秒以内に確保するには、50ミリ秒以内にユーザー入力イベントを処理します。これは、ボタンのクリック、フォームコントロールの切り替え、アニメーションの開始など、ほとんどの入力に適用されます。タッチドラッグまたはスクロールはこれに該当しません。
+
+- 反直感的に聞こえるかもしれませんが、ユーザー入力にすぐに応答することが常に正しいとは限りません。この100ミリ秒の時間枠を使用すれば他の高価な作業を実行できますが、ユーザーをブロックしないように注意してください。可能であれば、バックグラウンドで作業してください。
+
+- 完了までに50ミリ秒以上かかるアクションについては、常にフィードバックを提供してください。
+
+### 50ミリ秒を目指す？それとも100ミリ秒？
+
+目標は100ミリ秒未満で入力に応答することですが、なぜ50ミリ秒しかないか？これは、一般的に、入力処理以外の作業も実行されており、そうした作業が許容可能な入力応答に使える時間の一部を占めるためです。アプリケーションがアイドル時間中に50ミリ秒の推奨チャンクで作業を実行している場合、そうした作業チャンクの1つで入力が発生すると、入力を最大で50ミリ秒のキューに入れることができます。これを考慮すると、実際の入力処理に使用できるのは、残りの50ミリ秒のみと想定しても問題ないでしょう。この効果については、次のダイアグラムをご覧ください。アイドルタスクの実行中に受信した入力がキューに入り、使用可能な処理時間が短縮されるのが分かります。
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="アイドルタスクの実行中に受信した入力がキューに入り、使用可能な入力処理時間が50msに短縮されるのを示した図", width="800", height="400" %}<figcaption>アイドル状態のタスクが入力応答バジェットにどう影響するか。</figcaption></figure>
+
+## アニメーション：フレームを10ミリ秒で生成する
+
+**目標**:
+
+- アニメーションの各フレームを10ミリ秒以内に生成します。技術的には、各フレームの最大バジェットは16ミリ秒（1000ミリ秒/ 60フレーム/秒≈16ミリ秒）ですが、ブラウザーは各フレームをレンダリングするのに約6ミリ秒かかるため、フレームあたり10ミリ秒のガイドラインになります。
+
+- 視覚的な滑らかさを目指します。ユーザーはフレームレートが変化に気づきます。
+
+**ガイドライン**:
+
+- アニメーションのようにプレッシャーの高いポイントでは、他の作業が一切必要なければ何もしない、何らかの作業が必要な場合は、極力最小の作業に抑えるのがカギです。可能であれば、60fpsに達する可能性を最大限に引き出せるように、100ミリ秒の応答を利用して高価な作業を事前に計算するようにします。
+
+- アニメーションを最適化するさまざまな戦略については、[Rendering Performance (パフォーマンスのレンダリング)](/rendering-performance/)を参照してください。
+
+{% Aside %}すべての種類のアニメーションを認識します。アニメーションは、単なるUI効果ではありません。以下のインタラクションは、すべてアニメーションと見なされます。
+
+- 視覚的なアニメーション、開始と終了、[トゥイーン](https://www.webopedia.com/TERM/T/tweening.html)、読み込み中を示すインジケーターなど。
+- スクロール。ユーザーがスクロールし始めてから、指を離してもページがスクロールし続けるという「フリング」が含まれます。
+- ドラッグ。アニメーションは、多くの場合、地図をパンニングしたり、ピンチングしてズームするといった、ユーザーの操作に続いて実行されます。{% endAside %}
+
+## アイドル: アイドル時間を最大化する
+
+**目標**：アイドル時間を最大化して、ページが50ミリ秒以内にユーザー入力に応答する確率を高めます。
+
+**ガイドライン**：
+
+- アイドル時間を利用し、延期された作業を完了させます。たとえば、ページを最初に読み込む際は、極力少ない量のデータを読み込んでから、[アイドル時間](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)を使って残りを読み込みます。
+
+- 作業はアイドル時間中に50ms以内で実行します。それ以上かかると、50ミリ秒以内にユーザー入力に応答するアプリの機能を妨げるリスクがあります。
+
+- アイドル時間の作業中にユーザーがページを操作する場合は、常にユーザーの操作を最優先し、アイドル時間の作業を中断する必要があります。
+
+## 読み込み: コンテンツを配信し、5秒以内にインタラクティブになります
+
+ページの読み込みが遅いと、ユーザーは関心を失い、タスクが中断されたと感じます。読み込みが速いサイトでは、[平均セッションが長くなり、バウンス率が低くなり、広告の視認性が高くなります](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)。
+
+**目標**:
+
+- ユーザーのデバイスおよびネットワーク機能に関連して、高速な読み込みパフォーマンスを最適化します。現在、最初の読み込みについて、[低速の3G接続を使ったミッドレンジのモバイルデバイスでは、ページを読み込んでから5秒以内](/tti/)に[インタラクティブになる](/performance-budgets-101/#establish-a-baseline)ことが適切な目標でしょう。
+
+- その後の読み込みでは、2秒以内にページを読み込むのが適切な目標です。
+
+{% Aside %}
+
+こうしたターゲットは時間の経過とともに変化する可能性があることに注意してください。
+
+{% endAside %}
+
+**ガイドライン**:
+
+- 読み込みパフォーマンスは、ユーザーの間で一般的なモバイルデバイスとネットワーク接続を使ってテストします。ユーザーの接続分布を確認するには、[Chrome User Experience Report](/chrome-ux-report/)を使用します。サイトでデータが利用できない場合は、Moto G4といったミッドレンジのAndroidの携帯電話および低速の3Gネットワーク (転送速度が400 ms RTT および 400 kbpsとして定義されたもの) が [The Mobile Economy 2019](https://www.gsma.com/mobileeconomy/)によって適切なグローバルベースラインとして提案されています。この組み合わせは、[WebPageTest](https://www.webpagetest.org/easy)で利用可能です。
+
+- 通常のモバイルユーザーのデバイスは2G、3G、または4G接続であると主張される場合がありますが、実際の[実効接続速度](/adaptive-serving-based-on-network-quality/#how-it-works)はパケットの損失やネットワークの変動により、大幅に遅くなることがよくあります。
+
+- [レンダリングをブロックするリソースを排除する](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)。
+
+- 読み込みが完全に完了したという認識を生むために、すべてを5秒以内に読み込む必要はありません。[画像の遅延読み込み](/browser-level-image-lazy-loading/)、[JavaScriptのコード分割バンドル](/reduce-javascript-payloads-with-code-splitting/)、および[web.devで提案されているその他の最適化方法](/fast/)を検討してください。
+
+{% Aside %}ページの読み込みパフォーマンスに影響を与える要因を認識しましょう。
+
+- ネットワークの速度と遅延
+- ハードウェア（たとえば、低速のCPU）
+- キャッシュの削除
+- L2 / L3キャッシングの違い
+- JavaScriptの解析 {% endAside %}
+
+## RAILを評価するためのツール
+
+RAILの評価を自動化するのに役立つツールはいくつかあります。どれを使用するかは、必要な情報の種類と使用するワークフローの種類によって異なります。
+
+### Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/)は、ページの読み込み中または実行中に発生するすべてのイベントについて詳細な分析を提供します。**パフォーマンス**パネルのUIを理解するには、[Get Started With Analyzing Runtime Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/)を参照してください。
+
+以下のDevTools機能は特に関連性が高いと言えます。
+
+- さほど強力でないデバイスをシミュレートするために、[CPUをスロットルする](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle)。
+
+- 低速の接続をシミュレートするために、[ネットワークをスロットルする](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle)。
+
+- [メインスレッドのアクティビティを表示](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main)して、記録中にメインスレッドで発生したすべてのイベントを表示する。
+
+- [メインスレッドのアクティビティをテーブルに表示](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities)して、最も時間を要したものの順にアクティビティを並べ替えます。
+
+- アニメーションが本当にスムーズに実行されているかを評価するために、[1秒あたりのフレーム数（FPS）](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps)を分析する。
+
+- [**パフォーマンスモニター**を使用して、CPU使用率、JSヒープサイズ、DOMノード、1秒あたりのレイアウトなど](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor)をリアルタイムに監視します。
+
+- **ネットワーク**セクションで記録している間に発生した[ネットワーク要求を視覚化](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network)する。
+
+- ページの読み込み中またはアニメーションの起動中にページがどのようにレンダリングされたかを正確に再生するために、[記録中にスクリーンショットをキャプチャ](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots)する。
+
+- ユーザーがページを操作した後にページで何が起こったかをすばやく特定するために、[インタラクションを表示](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions)する。
+
+- 潜在的に問題のあるリスナーが起動するたびに、ページを強調表示することにより、[スクロールパフォーマンスの問題をリアルタイムに見つける](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues)。
+
+- アニメーションのパフォーマンスに悪影響を与える可能性がある高価なペイントイベントを特定するために、[ペイントイベントをリアルタイムに表示](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)する。
+
+### Lighthouse
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)は、Chrome DevTools、 [web.dev / measure](/measure/) 、Chrome拡張機能、Node.jsモジュール、およびWebPageTest内で利用できます。 URLを指定すると、3G接続が遅いミッドレンジデバイスをシミュレートし、ページで一連の監査を実行してから、読み込みパフォーマンスに関するレポートと改善方法の提案を行います。
+
+以下の監査は特に関連性が高いと言えます。
+
+**応答**
+
+- [Max Potential First Input Delay (最初の入力の最大潜在遅延)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/)。メインスレッドのアイドル時間に基づいて、アプリがユーザー入力に応答するのにかかる時間を推定する。
+
+- [Does not use passive listeners to improve scrolling performance (スクロールパフォーマンスを向上させるためにパッシブリスナーを使用していない)](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/)。
+
+- [Total Blocking Time (合計ブロッキング時間)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)。マウスをクリックしたり、画面をタップしたり、キーボードを押すといった、ユーザー入力への応答がブロックされる合計時間を測定する。
+
+- [Time To Interactive (インタラクティブになるまでの時間)](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive)。ユーザーがすべてのページ要素を絶えず操作できるようになるまでの時間を測定する。
+
+**読み込み**
+
+- [Does not register a service worker that controls page and start_url (pageとstart_urlを制御するServiceWorkerを登録しない](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/)。Service Workerは、ユーザーのデバイスに共通のリソースをキャッシュして、ネットワーク経由でリソースをフェッチするために費やす時間を削減できます。
+
+- [Page load is not fast enough on mobile networks (モバイルネットワークにおけるページの読み込み速度が十分でない)](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/)。
+
+- [Eliminate render-blocking resources (レンダリングをブロックするリソースを排除する)](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)。
+
+- [Defer offscreen images (オフスクリーンの画像を延期する)](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)。オフスクリーン画像の読み込みは、必要になるまで延期します。
+
+- [Properly size images (画像を適切なサイズにする)](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/)。モバイルビューポートでレンダリングされるサイズよりも大幅に大きい画像を提供してはいけません。
+
+- [Avoid chaining critical requests (重要なリクエストを連鎖させない)](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)。
+
+- [Does not use HTTP/2 for all of its resources (すべてのリソースにHTTP / 2を使用していない)](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/)。
+
+- [Efficiently encode images (画像を効率的にエンコードしている)](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)。
+
+- [Enable text compression (テキスト圧縮を有効にしている)](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/)。
+
+- [Avoid enormous network payloads (巨大なネットワークペイロードを避けている)](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)。
+
+- [Avoid an excessive DOM size (過度のDOMサイズを避けている)](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)。ページのレンダリングに必要なDOMノードのみを渡すことにより、ネットワークバイトを削減します。
+
+### WebPageTest
+
+WebPageTestは、実際のブラウザを使用してウェブページにアクセスし、タイミングメトリックを収集するウェブパフォーマンスツールです。[webpagetest.org/easy](https://webpagetest.org/easy)にURLを入力して、低速の3G接続を備えた実際のMotoG4デバイスを使ったページの読み込みパフォーマンスに関する詳細なレポートを取得します。Lighthouse による監査を含めるように構成することもできます。
+
+## 概要
+
+RAILは、いわば、ウェブサイトのユーザーエクスペリエンスを個別のインタラクションで構成されるジャーニーとして見るためのレンズのようなものです。ユーザーエクスペリエンスに最大のインパクトをもたらすパフォーマンス目標を設定できるように、ユーザーがサイトをどのように認識しているかを理解しましょう。
+
+- ユーザーを中心に考える。
+
+- 100ミリ秒未満でユーザー入力に応答する。
+
+- アニメーション作成時またはスクロール時に10ミリ秒未満でフレームを生成する。
+
+- メインスレッドのアイドル時間を最大化する。
+
+- 5000ミリ秒未満でインタラクティブコンテンツを読み込む。
diff --git a/src/site/content/ja/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/ja/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..9cca2c38d5e
--- /dev/null
+++ b/src/site/content/ja/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: コード分割でJavaScriptペイロードを削減する
+authors:
+  - houssein
+description: 大きなJavaScriptペイロードを送信すると、サイトの速度に大きく影響します。アプリケーションの最初のページが読み込まれたときにすぐにすべてのJavaScriptをユーザーに送信するのではなく、バンドルを複数の部分に分割し、一番最初の時点で必要な項目のみを送信します。
+date: 2018-11-05
+codelabs:
+  - codelab-code-splitting
+tags:
+  - performance
+---
+
+誰でも待ち時間は減らしたいものです。**[読み込みに3秒以上かかると、ユーザーの50％以上がそのWebサイトを諦めます](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)**。
+
+大きなJavaScriptペイロードを送信すると、サイトの速度に大きく影響します。アプリケーションの最初のページが読み込まれるとすぐにすべてのJavaScriptをユーザーに送信するのではなく、バンドルを複数の部分に分割し、最初に必要な項目のみを送信します。
+
+## 測定
+
+ページ上のすべてのJavaScriptの実行にかなりの時間がかかると、Lighthouseは監査の失敗を示します。
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="実行に時間がかかりすぎるスクリプトを示すLighthouse監査の失敗。", width="797", height="100" %}
+
+JavaScriptバンドルを分割して、ユーザーがアプリケーションを読み込んだときに最初のルートに必要なコードのみを送信します。これにより、解析およびコンパイルする必要のあるスクリプトの量が最小限に抑えられ、ページの読み込み時間が短縮されます。
+
+[webpack](https://webpack.js.org/guides/code-splitting/)、[Parcel](https://parceljs.org/code_splitting.html)、[Rollup](https://rollupjs.org/guide/en#dynamic-import)などの一般的なモジュールバンドラを使用すると、[動的インポート](https://v8.dev/features/dynamic-import)を使用してバンドルを分割できます。たとえば、フォームが送信されたときに実行される`someFunction`メソッドの例を示す次のコードスニペットについて検討します。
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // uses moduleA
+}
+```
+
+ここで、 `someFunction`は特定のライブラリからインポートされたモジュールを使用します。このモジュールが他の場所で使用されていない場合は、フォームがユーザーによって送信されたときにのみ動的インポートを使用してフェッチするようにコードブロックを変更できます。
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // using the default export
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // uses moduleA
+}
+```
+
+モジュールを構成するコードは最初のバンドルに含まれず、**遅延読み込み**されるか、フォームの送信後に必要な場合にのみユーザーに表示されます。ページのパフォーマンスをさらに向上させるには、[クリティカルチャンクを事前読み込みし、優先的に早い段階で取り込みます](/preload-critical-assets)。
+
+前のコードスニペットはシンプルな例ですが、大規模なアプリケーションでは、サードパーティの依存関係の遅延読み込みは、一般的なパターンではありません。通常、サードパーティの依存関係は、頻繁に更新されないため、キャッシュに保存できる個別のベンダーバンドルに分割されます。詳細については、[**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/)を使用してこの手順を実行する方法を参照してください。
+
+クライアント側フレームワークを使用するときに、ルートまたはコンポーネントレベルで分割すると、アプリケーションのさまざまな部分を遅延読み込みするためのよりシンプルなアプローチです。webpackを使用する多くの一般的なフレームワークは抽象化を提供しており、自分で構成を行うよりも遅延読み込みが簡単になります。
diff --git a/src/site/content/ja/fast/remove-unused-code/index.md b/src/site/content/ja/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..8a5d46c7670
--- /dev/null
+++ b/src/site/content/ja/fast/remove-unused-code/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: 未使用のコードを削除する
+subhead: npmを使用すると、プロジェクトにコードを簡単に追加できます。しかし、あなたは本当に余分なバイトを全て使用していますか？
+authors:
+  - houssein
+date: 2018-11-05
+description: npmのようなレジストリは、全員が簡単にダウンロードして50万人以上の公開パッケージを使用できるようにすることにより、JavaScriptの世界を改善しています。ただし、十分に活用していないライブラリを含めることがよくあります。本問題を解決するには、バンドルを分析し、未使用のコードを検出しする必要となります。
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+[npmの](https://docs.npmjs.com/getting-started/what-is-npm)のようなレジストリは、全員が簡単にダウンロードして*50万*以上の公開パッケージを使用できるようにすることにより、JavaScriptの世界を改善しています。ただし、十分に活用していないライブラリを含めることがよくあります。本問題を解決するには、 **バンドルを分析** し、未使用のコードを検出しする必要となります。次に、**未使用**および**不要な**ライブラリを削除します。
+
+## バンドルを分析する
+
+DevToolsを使用すると、すべてのネットワークリクエストのサイズを簡単に確認できます。{% Instruction 'devtools-network', 'ol' %} {% Instruction 'disable-cache', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="バンドルリクエストのあるネットワークパネル", width="800", height="169" %}
+
+[DevToolsのカバレッジ](https://developer.chrome.com/docs/devtools/coverage/)タブには、アプリケーション内の未使用のCSSおよびJSコードの量も表示されます。
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="DevToolsのコードカバレッジ", width="800", height="562" %}
+
+ノードCLIを介して完全なLighthouse構成を指定することにより、「未使用のJavaScript」監査を使用して、アプリケーションに付属している未使用のコードの量を追跡することもできます。
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Lighthouse Unused JS Audit", width="800", height="347" %}
+
+バンドラーとして[webpack](https://webpack.js.org/)を使用している場合は[、Webpack BundleAnalyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)がバンドルの構成要素を調査するのに役立ちます。他のプラグインと同様に、プラグインをwebpack構成ファイルに含めます。
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+webpackは通常、シングルページアプリケーションの構築に使用されますが、 [Parcel](https://parceljs.org/)や[Rollup](https://rollupjs.org/guide/en)などの他のバンドラーにも、バンドルの分析に使用できる視覚化ツールが持っています。
+
+このプラグインが含まれている状態でアプリケーションをリロードすると、バンドル全体のズーム可能なツリーマップが表示されます。
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468" %}
+
+この可視化では、バンドルのどの部分が他の部分よりも大きいかを調べたり、インポートしているすべてのライブラリをより正確に把握したりできます。これは、未使用または不要なライブラリを使用しているかどうかを識別するのに役立ちます。
+
+## 未使用のライブラリを削除する
+
+前のツリーマップイメージでは、単一の`@firebase`ドメイン内にかなりの数のパッケージがあります。ウェブサイトにFirebaseデータベースコンポーネントのみが必要な場合は、インポートを更新してそのライブラリを取得します。
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+このプロセスは、大規模なアプリケーションでは非常に複雑であることを強調する必要となります。
+
+どこにも使用されていないはずで不思議にみえるパッケージについては、見直し、どの優先依存性が使用しているかを確認してください。必要なコンポーネントのみをインポートする方法を見つけてください。ライブラリを使用していない場合は、ライブラリを削除してください。ライブラリが最初のページ読み込みに必要ない場合は、[遅延読み込み](/reduce-javascript-payloads-with-code-splitting)できるかどうかを検討してください。
+
+また、webpackを使用している場合は[、人気のあるライブラリから未使用のコードを自動的に削除するプラグインのリストを](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)確認してください。
+
+{% Aside 'codelab' %}[未使用のコードを削除します。](/codelab-remove-unused-code) {% endAside %}
+
+## 不要なライブラリを削除する
+
+すべてのライブラリを簡単にパーツに分割して選択的にインポートできるわけではありません。これらのシナリオでは、ライブラリを完全に削除できるかどうかを検討してください。カスタムソリューションを構築するか、より軽量な代替手段を活用することは、常に検討する価値のあるオプションです。ただし、アプリケーションからライブラリを完全に削除する前に、これらの作業のいずれかに必要な複雑さと作業を比較検討することが重要です。
diff --git a/src/site/content/ja/fast/serve-images-webp/index.md b/src/site/content/ja/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..689f201ee6e
--- /dev/null
+++ b/src/site/content/ja/fast/serve-images-webp/index.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: WebP 画像の使用
+authors:
+  - katiehempenius
+description: WebP 画像は、JPEG および PNG の画像よりも小さく、通常はファイルサイズが 25〜35 ％も減少します。これにより、ページサイズは小さくなり、パフォーマンスは向上します。
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - codelab-serve-images-webp
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## なぜ重要視するべきか？
+
+WebP 画像は、JPEG や PNGの 画像よりも小さく、通常はファイルサイズが 25〜35 ％も縮小されます。これにより、ページサイズは小さくなり、パフォーマンスは向上します。
+
+- YouTube は、WebP のサムネイルに切り替えると、[ページの読み込みが10％ 速くなる](https://www.youtube.com/watch?v=rqXMwLbYEE4)ことを発見しました。
+- Facebook では、WebP に切り替えた際に、JPEG は 25〜35％、PNG は 80％ もファイルサイズが縮小されました。
+
+WebP は、JPEG、PNG、および GIF 画像に取って代わる優れた選択肢です。さらに、WebP は可逆圧縮と非可逆圧縮の両方を提供します。可逆圧縮では、データが失われることはありません。非可逆圧縮はファイルサイズを縮小しますが、画質を低下させる可能性があります。
+
+## 画像を WebP に変換する
+
+一般的に、画像を WebP に変換するためのアプローチとして、[cwebp コマンドラインツール](https://developers.google.com/speed/webp/docs/using)または [Imagemin WebP プラグイン](https://github.com/imagemin/imagemin-webp) (npm パッケージ) のいずれかが使用されます。通常、プロジェクトでビルドスクリプトまたはビルドツール (WebpackやGulpなど) を使用する場合は、Imagemin WebP プラグインが最適な一方で、シンプルなプロジェクトや画像を 1 回だけ変換する必要がある場合は、CLI が適切な選択肢とされています。
+
+画像を WebP に変換する場合、さまざまな圧縮設定をセットアップするオプションがありますが、ほとんどの人にとって、配慮する必要があるのは品質設定だけと思われます。品質レベルは 0 (最低) から 100 (最高) まで指定できます。どのレベルがニーズに合った画像品質とファイルサイズの適切なトレードオフであるかを見い出すために、いろいろなレベルを試してみる価値はあるでしょう。
+
+### cwebp を使用する
+
+cwebp のデフォルトの圧縮設定を使用して、ファイルを 1 つ変換します。
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+品質レベル `50` を使用して、ファイルを 1 つ変換します。
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+ディレクトリ内のすべてのファイルを変換します。
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### Imagemin を使用する
+
+Imagemin WebP プラグインは、単独で使用することも、お気に入りのビルドツール (Webpack / Gulp / Grunt など) と一緒に使用することもできます。通常は、ビルドスクリプトまたはビルドツールの構成ファイルに最大 10 行のコードを追加することが必要になります。以下に、これを [Webpack](https://glitch.com/~webp-webpack)、[Gulp](https://glitch.com/~webp-gulp)、および [Grunt](https://glitch.com/~webp-grunt) で行う方法の例をいくつか紹介します。
+
+これらのビルドツールを使用していない場合は、Imagemin を Node スクリプトとして単独で使用できます。 こちらのスクリプトは、`images` ディレクトリ内のファイルを変換し、`compressed_images` ディレクトリに保存します。
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## WebP 画像を提供する
+
+サイトが WebP と互換性のある[ブラウザ](https://caniuse.com/#search=webp)のみをサポートしている場合は、読み込みを停止できます。それ以外の場合は、WebP を新しいブラウザーに、フォールバックイメージを古いブラウザーに提供します。
+
+**ビフォー:**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**アフター:**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) 、 [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) 、および`<img>`タグは、それらが相互にどのように順序付けられているかを含め、すべて相互作用してこの最終結果を達成します。
+
+### 写真
+
+`<picture>` タグは、0 個以上の `<source>` タグと 1 つの`<img>` タグに対してラッパーを提供します。
+
+### ソース
+
+`<source>`タグは、メディアリソースを指定します。
+
+ブラウザは、サポートする形式で記述される一番最初のソースを使用します。ブラウザは、`<source>` タグに記述されているいずれの形式もサポートしていない場合、`<img>` タグで指定された画像の読み込みにフォールバックします。
+
+{% Aside 'gotchas' %}
+
+- 「好ましい」画像形式 (この場合は WebP) の `<source>` タグは、他の `<source>` タグよりも先に記述する必要があります。
+
+- `type` 属性の値は、画像形式に対応する MIME タイプでなければいけません。画像の [MIME タイプ](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)とそのファイル拡張子はよく似ていますが、必ずしも同じではありません (たとえば、`.jpg` と `image/jpeg`)。
+
+{% endAside %}
+
+### img
+
+`<picture>`タグがサポートされていないブラウザでもこのコードが機能するのは、`<img>`タグがあるためです。`<picture>`タグをサポートしないブラウザは、サポートしていないタグを無視します。したがい、唯一「認識」できる画像`<img src="flower.jpg" alt="">`を読み込みます。
+
+{% Aside 'gotchas' %}
+
+- `<img>`タグはいつも含める必要があり、常にすべての`<source>`タグの後に続いて一番最後に記述する必要があります。
+- `<img>`タグで指定されるリソースは、フォールバックとして使用できるように、一般的にサポートされている形式 (JPEGなど) である必要があります。{% endAside %}
+
+## WebP が使用されていることを確認する
+
+Lighthouse を使用すれば、サイト上のすべての画像が WebP を使用して提供されていることを確認できます。Lighthouse Performance Auditを実行し (**Lighthouse&gt; Options&gt; Performance**)、**Serve images in next-gen formats (次世代フォーマットで画像を提供)** 監査の結果を探します。Lighthouse は、WebP で提供されていない画像をリストアップします。
diff --git a/src/site/content/ja/fast/serve-responsive-images/index.md b/src/site/content/ja/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..73b5144729f
--- /dev/null
+++ b/src/site/content/ja/fast/serve-responsive-images/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: レスポンシブ画像を提供する
+authors:
+  - katiehempenius
+description: |2-
+
+  デスクトップサイズの画像をモバイルデバイスに配信すると、実際に必要なデータの2〜4倍以上のデータが必要になる場合があります。汎用的なやり方ではなく、それぞれのデバイスに合った異なる画像サイズを提供します。
+date: 2018-11-05
+updated: 2021-06-04
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+デスクトップサイズの画像をモバイルデバイスに配信すると、実際に必要なデータの2〜4倍以上のデータが必要になる場合があります。汎用的なやり方ではなく、それぞれのデバイスに合った異なる画像サイズを提供します。
+
+## 画像のサイズを変更する
+
+画像サイズ変更ツールとして最も人気が高いのは、[sharp npmパッケージ](https://www.npmjs.com/package/sharp)と[ImageMagickCLIツール](https://www.imagemagick.org/script/index.php)の2つです。
+
+sharp パッケージは、画像のサイズ変更を自動化するのに適しています（ウェブサイト上のすべてのビデオに対して複数のサイズのサムネイルを生成するといったことができます）。高速で、ビルドスクリプトやツールと簡単に統合できます。一方のImageMagickは、完全にコマンドラインから使用されるため、1回限りの画像サイズ変更に便利です。
+
+### sharp
+
+sharpをノードスクリプトとして使用するには、こちらのコードをプロジェクトに別のスクリプトとして保存し、それを実行して画像を変換します。
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+画像のサイズを元のサイズの33％に相当するサイズに変更するには、ターミナルで次のコマンドを実行します。
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+幅300px、高さ200pxの範囲内に収まるように画像のサイズを変更するには、次のコマンドを実行します。
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### イメージのバージョンはいくつ作成するべきですか？
+
+この質問の「正しい」答えは、1つではありません。ただし、3〜5種類のサイズの画像を提供するのが一般的です。より多くの画像サイズを提供することはパフォーマンスにプラスとなりますが、サーバー上で占めるスペースや記述するHTMLの量が増えてしまうのも事実です。
+
+### 別のオプション
+
+[Thumbor](https://github.com/thumbor/thumbor) （オープンソース）や[Cloudinary](https://cloudinary.com/)などの画像サービスもチェックしておく価値があります。画像サービスは、レスポンシブ画像（および画像操作）をオンデマンドで提供します。Thumborは、サーバーにインストールすることでセットアップされます。Cloudinaryの場合は、こうした詳細を処理したり、サーバーをセットアップしたりする必要はありません。どちらもを使っても簡単にレスポンシブ画像を作成できます。
+
+## 画像の複数のバージョンを提供する
+
+画像のバージョンを複数個指定すると、ブラウザは最適なバージョンを選択します。
+
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>前</strong></th>
+        <th><strong>後</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+`<img>`タグの[`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src) 、 [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) 、および[`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)属性がそれぞれ相互に作用し合い、この最終結果を生み出します。
+
+### 「src」属性
+
+src属性を使用すると、 `srcset`属性および`sizes`属性を[サポート](https://caniuse.com/#search=srcset)していないブラウザーでこのコードが機能します。ブラウザがこれらの属性をサポートしていない場合は、`src`属性で指定されたリソースの読み込みにフォールバックします。
+
+{% Aside %}
+`src`属性で指定されたリソースは、すべてのデバイスサイズで適切に機能するのに十分な大きさでなければいけません。{% endAside %}
+
+### 「srcset」属性
+
+`srcset`属性は、画像ファイル名とその幅または密度記述子をコンマ区切りでまとめたリストです。
+
+この例では、 [幅記述子を](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor)使用しています。`480w`は幅記述子であり、`flower-small.jpg`幅が480pxであることをブラウザに知らせます。 `1080w`は幅記述子であり、`flower-large.jpg`幅が1080pxであることをブラウザに知らせます。
+
+「幅記述子」という言葉は格好良く聞こえますが、ブラウザに画像の幅を知らせる方法にすぎません。これにより、ブラウザが画像のサイズを決定するために、わざわざその画像をダウンロードする必要がなくなります。
+
+{% Aside 'gotchas' %}幅記述子を書き込むには、（`px{/code1の代わりに)<code data-md-type="codespan">w`単位を使用します。たとえば、幅1024pxの画像は`1024w`のように記述されます。{% endAside %}
+
+**追加情報：** 密度記述子について知らなくても、さまざまな画像サイズを提供することができます。ただし、密度記述子の仕組みについて興味がある方は、[Resolution Switching code lab (解像度切り替えコードラボ)](/codelab-density-descriptors)をご覧ください。密度記述子は、デバイスの[ピクセル密度](https://en.wikipedia.org/wiki/Pixel_density)に基づいてさまざまな画像を提供する際に使用されます。
+
+### 「sizes」属性
+
+「sizes」属性は、画像が表示された時に持つ幅をブラウザに指定するものです。ただし、sizes属性は表示サイズには影響しません。それには、CSSが必要になります。
+
+ブラウザは、この情報とユーザーのデバイスについて分かっている情報（つまり、そのサイズとピクセル密度）を使用して、読み込む画像を決定します。
+
+ブラウザは、「`sizes` 」属性を認識できない場合は、`src` 」属性で指定された画像の読み込みにフォールバックします。(ブラウザは、「`sizes` 」属性と「 `srcset` 」属性のサポートを同時にリリースしているため、両方の属性をサポートする可能性とどちらもサポートしない可能性があります。
+
+{% Aside 'gotchas' %}スロット幅は、さまざまな単位を使用して指定できます。以下はすべて有効なサイズです。
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+以下は有効なサイズではありません：
+
+- `25%` （パーセンテージはsizes属性では使用できません）{% endAside %}
+
+**追加情報**格好良くやりたい場合は、sizes属性を使用して複数のスロットサイズを指定することもできます。これは、さまざまなビューポートのサイズに応じてさまざまなレイアウトを使用するウェブサイトに対応します。このやり方については、[複数のスロットコードサンプル](/codelab-specifying-multiple-slot-widths)を確認してください。
+
+### (さらなる) 追加情報
+
+上述した追加情報に加えて（そう、画像は複雑なんです！）、 [アートディレクション](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)にもこれらと同じ概念を使用できます。アートディレクションとは、（同じ画像の異なるバージョンではなく）外観が完全に異なる画像を異なるビューポートに提供することを言います。詳細は、[アートディレクションコードラボ](/codelab-art-direction)でご確認いただけます。
+
+## 確認
+
+レスポンシブ画像を実装したら、Lighthouseを使用して、すべての画像が使用されていることを確認できます。Lighthouseのパフォーマンス監査（**Lighthouse &gt; Options &gt; Performance**）を実行し、**Properly size images (適切にサイズ調整された画像)** 監査の結果を探します。結果には、サイズ変更が必要な画像が一覧表示されます。
diff --git a/src/site/content/ja/fast/use-imagemin-to-compress-images/index.md b/src/site/content/ja/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..8c6e77b34a9
--- /dev/null
+++ b/src/site/content/ja/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: Imagemin を使用して画像を圧縮する
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: 圧縮されていない画像は、不要なバイトを増やし、ページを肥大化させます。画像を圧縮することによりページの読み込みを改善するチャンスを探るべく、Lighthouse を実行します。
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## これが大切な理由とは？
+
+圧縮されていない画像は、不要なバイトを増やし、ページを肥大化させます。右側の写真は左側の写真よりも 40％ 小さいのですが、一般的なユーザーには同じように見えるのではないでしょうか。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 KB</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 KB</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## 評価
+
+Lighthouse を実行して、画像を圧縮することでページの読み込みを改善するチャンスを探ります。圧縮が可能な場合は、「Efficiently encode images」の欄にその手段が表示されます。
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="image", width="800", height="552" %}
+
+{% Aside %} 現在 Lighthouse では、画像を JPEG 形式で圧縮する方法だけが報告されます。{% endAside %}
+
+## Imagemin
+
+Imagemin は、さまざまな画像形式をサポートし、簡単にビルドスクリプトやビルドツールと連携できるため、画像圧縮にもってこいの選択肢です。Imagemin は、[CLI](https://github.com/imagemin/imagemin-cli) と [npm モジュール](https://www.npmjs.com/package/imagemin)の両方として利用できます。一般的に、npm モジュールは、設定オプションが多く用意されているので最適な選択肢とされていますが、コードをいじらずに Imagemin を試してみたいという方は、CLI も使用できます。
+
+### プラグイン
+
+Imagemin は「プラグイン」を中心に構築されています。プラグインは、特定の画像形式を圧縮する npm パッケージです (たとえば、「mozjpeg」は JPEG を圧縮します)。人気の高い画像形式では、プラグインの選択肢が複数個ある場合があります。
+
+プラグインを選択する際に考慮すべき点として、特に重要なのは、プラグインが「ロッシー」なのか「ロスレス」なのかという点です。後者の圧縮で、データが失われることはありません。前者の圧縮は、ファイルサイズを縮小できますが、画質が損なわれる可能性があります。プラグインが「ロッシー」なのか「ロスレス」なのかを示さない場合は、その API を見れば判断できます。出力の画質を指定できる場合は、「ロッシー」です。
+
+多くの人にとっては、ロッシーなプラグインがベストでしょう。ファイルサイズを大幅に縮小し、ニーズに合わせて圧縮レベルをカスタマイズできます。下の表は、人気の高い Imagemin プラグインを示したものです。利用できるプラグインは他にもありますが、プロジェクトに使う選択肢としては、どれも申し分ありません。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>画像形式</th>
+        <th>ロッシープラグイン</th>
+        <th>ロスレスプラグイン</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Imagemin CLI
+
+Imagemin CLI は、imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant、imagemin-svgo という 5つのプラグインで動作します。Imagemin は、入力の画像形式に基づいて適切なプラグインを使用します。
+
+「images/」ディレクトリにある画像を圧縮して、同じディレクトリに保存するには、次のコマンドを実行します (元のファイルは上書きされます)。
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Imagemin npm モジュール
+
+こうしたビルトツールの 1 つ使用する場合は、コードラボで [webpack](/codelab-imagemin-webpack)、[gulp](/codelab-imagemin-gulp)、または [grunt](/codelab-imagemin-grunt) のいずれかが搭載された Imaginemin をご覧ください。
+
+Imagemin は、ノードスクリプトとして単独で使用することもできます。下のコードでは、"imagemin-mozjpeg" プラグインを使って、JPEG ファイルを 50 の品質レベルに圧縮しています  (「０」が最低、「１００」が最高) 。
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/ja/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/ja/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..0b0467e29a6
--- /dev/null
+++ b/src/site/content/ja/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: パフォーマンス予算にLighthouseを使用する
+authors:
+  - katiehempenius
+description: 現在　LighthouseはPerformance Budgetをサポートできるようになりました。この機能、LightWalletは、5分以内に設定し、ページリソースのサイズと量に関するフィードバックを提供します。
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+現在　[Lighthouse](https://github.com/GoogleChrome/lighthouse)は、performance budgetをサポートできるようになりました。この機能である[LightWalletは](https://developers.google.com/web/tools/lighthouse/audits/budgets)、5分以内にセットアップでき、パフォーマンスメトリックとページリソースのサイズと量に関するフィードバックを提供します。
+
+## Lighthouseをインストールします
+
+LightWalletは、Lighthouse v5 +のコマンドラインバージョンで使用できます。
+
+開始するには、Lighthouseをインストールします。
+
+```bash
+npm install -g lighthouse
+```
+
+## Budgetを作成する
+
+`budget.json`というファイルを作成します。このファイルに次のJSONを追加します。
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+この例の`budget.json`ファイルは、5つの個別のbudgetを設定します。
+
+- 3000ミリ秒であるTime to Interactiveのbudget
+- 100ミリ秒であるFirst Meaningful Paintのbudget
+- 125KBであるページ上のJavaScriptの合計量のbudget
+- 300KBであるページ全体のサイズのbudget
+- 10リクエストであるサードパーティのオリジンに対して行われたリクエストの数に対するbudget
+
+サポートしたパフォーマンスメトのリクスとリソース種類の完全なリストについては、Lighthouseドキュメントの[Performance Budgets](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md)セクションを参照してください。
+
+## 灯台を実行します
+
+`--budget-path`フラグを使用してLighthouseを実行します。このフラグは、Lighthouseにbudgetファイルの場所を通知します。
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %}**注**：budgetファイルの名前は`budget.json`ではなくても問題ありません。 {% endAside %}
+
+## 結果を確認します
+
+LightWalletが正しく構成されている場合、Lighthouseレポートには**Performance** カテゴリ内の**Budgets**セクションが含まれます。
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="'Lighthouse レポートのBudgetセクション", width="800", height="289" %}
+
+LighthouseレポートのJSONバージョンでは、Lightwalletの結果は、 `performance-budget`監査の監査結果内にあります。
diff --git a/src/site/content/ja/fast/why-speed-matters/index.md b/src/site/content/ja/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..7ef3236649a
--- /dev/null
+++ b/src/site/content/ja/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: スピードが重要な理由とは？
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: ユーザーエクスペリエンスには、スピードが重要です。また、モバイルデバイスの遅さが原因で起こる遅延は、イライラするだけでなく、ビジネスにも悪影響となります。
+web_lighthouse: 該当なし
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+消費者は、ますますモバイルに依存し、デジタルコンテンツやサービスにアクセスするようになっています。サイト分析を見れば、自分のデータもその傾向を物語っているかもしれません。消費者の要求は、これまで以上に厳しく、サイトの使用経験を評価する際は、競合他社と比較するだけでなく、日々使用するベスト・イン・クラスのサービスに対しても評価しているのです。
+
+この記事では、パフォーマンスとビジネスの成功の関係について行われた調査を一部まとめて紹介していきます。
+
+## パフォーマンスとは、ユーザーを手放さないこと
+
+<figure data-float="right">
+  <blockquote>
+    <p>パフォーマンスは会社の収益に直接影響を及ぼしました。</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">Pinterest</a></p>
+    </cite>
+  </blockquote></figure>
+
+パフォーマンスは、オンラインベンチャー企業が成功を目指すに際し、大きな役割を果たします。パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりも、ユーザーを惹きつけ、保持することに長けています。
+
+Pinterestは、知覚される待ち時間を40％削減し、[検索エンジンのトラフィックと登録数を15％増加させました](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7)。
+
+COOKは、ページ読み込みの平均時間を850ミリ秒短縮し、[コンバージョンを7％増加させ、バウンス率を7％減少させ、セッションあたりのページ数を10％増加させました](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf)。
+
+また、いくつかの調査では、パフォーマンスの悪さがビジネス目標に悪影響を与える可能性が示唆されています。たとえば、[BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale)は、サイトの読み込みにかかる時間が1秒増えるだけで、サイトを去るユーザーの数が10％増加していることを発見しました。
+
+## パフォーマンスとは、コンバージョンを改善すること
+
+ユーザーを保持することは、コンバージョンを改善する上で重要です。遅いサイトでは収益が打撃を受け、速いサイトではコンバージョン率が増加することが分かっています。
+
+[Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html)の場合、ホームページの読み込み速度が100ミリ秒短縮されるごとに、セッションベースのコンバージョンが1.11％増加し、年間の平均収益は38万ドル近くも増加しました。さらに、チェックアウトページの読み込み速度が100ミリ秒短縮されると、セッションベースのコンバージョンが1.55％増加し、その結果、年間の平均収益は53万ドル近くも増加しました。
+
+[AutoAnything](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/)がページの読み込み時間を半減させたとき、売り上げは12％から13％に上昇しました。
+
+小売業者の[Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/)は、サイトの速度について監査を実施し、発見した問題に対処するための計画を立てました。これにより、ページの読み込み時間が20％短縮され、コンバージョン率が10％増加しました。
+
+## パフォーマンスで肝心なのは、ユーザーエクスペリエンス
+
+ユーザーエクスペリエンスで肝心なのは、スピードです。ある[消費者調査](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report)では、モバイルデバイスの遅さが引き起こす遅延に対するストレス反応が、ホラー映画を見たり、数学の問題を解いたりする場合と似たようなレベルであり、店で支払いをする際に列に並んで待つときよりも高いことが分かっています。
+
+サイトの読み込みが始まると、ユーザーは、コンテンツが表示されるのを待つことになります。コンテンツが表示されるまでは、これと言って何のユーザーエクスペリエンスもありません。エクスペリエンスの無いこの時間は、高速接続の場合はほんの一瞬だけですが、接続速度が遅いと、ユーザーは待機することを余儀なくされます。ページのリソースが少しずつ読み込まれるにつれ、さらなる問題が発生する可能性があります。
+
+<figure>{% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="ページの読み込みを示した2つのフィルムストリップのリールの比較。1つ目は低速接続でのページ読み込みを示し、2つ目は高速接続でのページ読み込みを示している。", width="800", height="264" %}<figcaption>非常に遅い接続（上）と速い接続（下）でのページ読み込みの比較。</figcaption></figure>
+
+パフォーマンスは、優れたユーザーエクスペリエンスの基本的な要素です。サイトに大量のコードがデプロイされていると、ブラウザはコードをダウンロードするためにユーザーのデータプランからメガバイトに相当するデータ量を使用しなくてはいけなくなります。モバイルデバイスのCPUパワーとメモリは限られています。私たちにとっては少量の最適化されていないコードでも、これらのデバイスを圧倒してしまうことがしばしばあります。これによりパフォーマンスが低下し、サイトは応答しなくなります。人間の一般的な行動を考えると、パフォーマンスの悪いアプリはすぐに破棄されてしまうでしょう。
+
+## パフォーマンスとは、ユーザーを考慮すること
+
+パフォーマンスの悪いサイトやアプリケーションは、ユーザーがより高いコストを支払う原因となる可能性があります。
+
+[モバイルユーザーは引き続き世界中のインターネットユーザーの大部分を占めている](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet)こともあり、こうしたユーザーの多くがモバイルLTE、4G、3G、さらには2Gネットワークを使ってウェブにアクセスしていることを覚えておくことは重要です。CalibreのBenSchwarz氏が[この実社会におけるパフォーマンス調査](https://calibreapp.com/blog/beyond-the-bubble)で指摘するように、プリペイドデータプランのコストは減少しており、かつてはインターネットへのアクセスが高くついていた場所からでも、安価にアクセスできるようになっています。モバイルデバイスとインターネットアクセスはもはや贅沢ではありません。これらは、ますます複雑につながり合う世界で生活し、機能していくための一般的なツールと化しています。
+
+[ページの合計サイズは少なくとも2011年以降着実に増加](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal)しており、その傾向はどうやら続いているようです。通常のページがより多くのデータを送信するため、ユーザーは課金制のデータプランをより頻繁に補充する必要があり、それには、もちろん、コストがかかります。
+
+ユーザーのお金を節約することに加え、高速で軽量なユーザーエクスペリエンスは、危機に直面しているユーザーにとっても重要であることがわかります。病院、診療所、危機管理センターなどの公共リソースには、危機の際に必要な重要かつ具体的な情報をユーザーに提供するオンラインリソースがあります。[ストレスの多い状況で重要な情報を効率的に提示するには設計が極めて重要](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis)ですが、この情報を迅速に提供することの重要性は軽視できません。それは私たちの仕事の一部です。
+
+## ウェブサイトのスピード改善に着手する {: #get-started}
+
+Googleがすべてのウェブサイトで重視すべきだと信じる評価基準を[Core Web Vitals](/vitals/#core-web-vitals)に記載していますので、ぜひ一読してください。
+
+<blockquote>
+  <p>本日、この作業に基づいて、これらのページエクスペリエンス指標を組み込んだ今後の検索ランキングの変更を早期に確認します。Core Web Vitalsと既存のページエクスペリエンスのシグナルを組み合わせた新しいシグナルを導入し、ウェブページでのユーザーエクスペリエンスの品質に関する全体像を提供します。</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">Evaluating page experience for a better web (より快適なウェブを目指したページ体験の評価)</a>、公式Googleウェブマスターセントラルブログ</cite>
+</blockquote>
+
+次は、スピードをアップさせて維持するためのヒントやコツを数多く紹介した[Fast load times](/fast/)をお読みください。
diff --git a/src/site/content/ja/feed.njk b/src/site/content/ja/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/ja/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/ja/identity/index.md b/src/site/content/ja/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/ja/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/ja/identity/sign-in-form-best-practices/index.md b/src/site/content/ja/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..8ccfb694f1e
--- /dev/null
+++ b/src/site/content/ja/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: サインインフォームのベストプラクティス
+subhead: クロスプラットフォーム対応のブラウザ機能を使用して、安全で、アクセスしやすく、使いやすいサインインフォームを作成します。
+authors:
+  - samdutton
+scheduled: NS
+date: 2020-06-29
+updated: 2021-09-27
+description: クロスプラットフォーム対応のブラウザ機能を使用して、安全で、アクセスしやすく、使いやすいサインインフォームを作成します。
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: 電話を手に持っている人。
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+ユーザーがサイトにログインする必要がある場合は、サインインフォームの適切なデザインが欠かせません。ユーザーが不安定な接続を使っている、モバイルデバイスを使っている、急いでいる、ストレスを感じているといった場合は、特に重要です。サインインフォームのデザインが不適切だと、バウンス率が高くなります。サイトからの離脱があるたびに、サインインの機会を逃しただけでなく、1 人のユーザーを失い、不愉快な思いをさせているのです。
+
+{% Aside 'codelab' %} こうしたベストプラクティスは実践的なチュートリアルで学びたいという方は、[Sign-in form best practices codelab (サインインフォームのベストプラクティスコードラボ)](/codelab-sign-in-form-best-practices/) をご活用ください。{% endAside %}
+
+こちらは、すべてのベストプラクティスを取り入れたシンプルなサインインフォームの 1 例です。
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+## チェックリスト
+
+- [用途がはっきりした HTML 要素を使用する](#meaningful-html) (`<form>` 、`<input>` 、`<label>` 、`<button>`)。
+- [各入力に `<label>` タグを付ける](#label) 。
+- 要素の属性を使って、[組み込みのブラウザ機能にアクセスする](#element-attributes) (`type` 、`name` 、`autocomplete` 、`required`)。
+- 入力の `name` と `id` 属性に、ページの読み込みやウェブサイトのデプロイ中に変更されない安定した値を指定する。
+- サインインを[独自の &lt;form&gt; 要素に配置する](#form)。
+- [フォームが正常に送信されることを確認する](#submission)。
+- サインアップフォームのパスワード入力と reset-password フォームの新しいパスワードに、[`autocomplete="new-password"`](#new-password) と [`id="new-password"`](#new-password) を使用する。
+- サインインパスワードの入力に、[`autocomplete="current-password"`](#current-password) と [`id="current-password"`](#current-password) を使用する。
+- [パスワードを表示](#show-password)する機能を提供する。
+- パスワード入力に [`aria-label` と `aria-describedby`](#accessible-password-inputs) を使用する。
+- [入力は 1 回だけ要求する](#no-double-inputs)。
+- [モバイルキーボードが入力やボタンを覆い隠さないようにフォームをデザインする](#keyboard-obstruction)。
+- フォームがモバイルで使用できることを確認する ([読みやすいテキスト](#size-text-correctly)を使用し、入力とボタンが[タッチターゲットとして機能するのに十分な大きさである](#tap-targets)ことを確認する)。
+- サインアップページとサインインページで[ブランディングとスタイルを維持する](#general-guidelines)。
+- [実地テストおよびとラボでのテストを行う](#analytics)。ページ分析、インタラクション分析、およびユーザー中心のパフォーマンス評価をサインアップフローとサインインフローに組み込む。
+- [さまざまなブラウザとデバイスでテストを行う](#devices) (フォームの動作はプラットフォームによって大きく異なる)。
+
+{% Aside %}この記事は、フロントエンドのベストプラクティスに関するものです。ユーザーの認証や認証情報の保存、アカウントの管理といった、バックエンドサービスを構築する方法については説明いたしません。独自のバックエンドを実行するためのコア原則については、[12 best practices for user account, authorization and password management (ユーザーアカウント、アクセス権限、およびパスワード管理のベストプラクティス 12 選)](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) にまとめてあります。世界各地にユーザーがいる場合は、サイトで使用するサードパーティによる ID サービスとそのコンテンツをローカライズすることを検討する必要があります。
+
+また、この記事では取り上げませんが、サインインの体験を向上させるのに役立つ比較的新しい API が 2 つあります。
+
+- [**WebOTP**](/web-otp/): SMS を使って携帯電話にワンタイムパスコードまたは PIN 番号を送信します。これにより、ユーザーは電話番号を識別子として選択できる (メールアドレスを入力する必要はありません！) ほか、サインインの際に使う 2 要素認証と支払いの確認に使うワンタイムコードも利用できるようになります。
+- [**認証情報管理**](https://developer.chrome.com/blog/credential-management-api/): 開発者がプログラムを使ってパスワードの認証情報と統合された認証情報を保存および取得できるようにします。{% endAside %}
+
+## 用途がはっきりした HTML を使用する {: #meaningful-html }
+
+特定のジョブ用に構築された要素 (`<form>` 、`<label>` 、`<button>`) を使用します。こうした要素は、ブラウザの組み込み機能を有効にし、アクセシビリティを向上させ、マークアップに意味を与えます。
+
+### `<form>` を使用する {: #form }
+
+入力を `<div>` 要素でラップして、送信されてくる入力データを純粋に JavaScript だけで処理しようと考えることがあるかもしれません。多くの場合は、昔ながらの [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 要素を使用する方がベターでしょう。これにより、スクリーンリーダーや他の支援デバイスがサイトにアクセスできるようになり、ブラウザのさまざまな組み込み機能が有効になり、古いブラウザーに対してベーシックで実用的なサインインを簡単に構築できるようになり、JavaScript が失敗した場合でも機能させることができます。
+
+{% Aside 'gotchas' %} ウェブページ全体を 1 つのフォームでラップするというミスがよく見られます。これはブラウザーのパスワードマネージャーと自動入力機能にとって問題となる恐れがあります。フォームを必要とする UI コンポーネントごとに別の &lt;form&gt; を使用します。たとえば、同じページにサインイン機能と検索機能がある場合は、2 つのフォーム要素を使用する必要があります。{% endAside %}
+
+### `<label>` を使用する {: #label }
+
+入力にラベルを付けるには、[`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label) を使用します。
+
+```html
+<label for="email">Email</label>
+<input id="email" …>
+```
+
+その理由は 2つあります。
+
+- ラベルをタップまたはクリックすると、フォーカスが入力に移動します。ラベルの `for` 属性と入力の `name` または `id` を使用して、ラベルを入力に関連付けます。
+- スクリーンリーダーは、ラベルまたはラベルの入力にフォーカスが移動すると、ラベルテキストをアナウンスします。
+
+プレースホルダーを入力ラベルとして使用してはいけません。私たちは、テキストを入力し始めると、何を入力するつもりだったのかを忘れてしまいがちです。メールアドレスだったっけ？それとも電話番号？アカウント ID ？ プレースホルダーについては、他にも問題視すべき事柄がいくつもあります。本当かなと気になる方は、2 つの記事 [Don't Use The Placeholder Attribute (プレースホルダーの属性は使わない)](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) および [Placeholders in Form Fields Are Harmful (フォームフィールドのプレースホルダーは要注意)](https://www.nngroup.com/articles/form-design-placeholders/) を参照してください。
+
+ラベルは、おそらく入力の上に配置するのがベストでしょう。そうすれば。モバイルとデスクトップで同じデザインを一貫させることができるほか、[Google による AI の調査](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)によると、ユーザーは画面上のラベルに目を通しやすくなります。ラベルと入力は画面幅いっぱいに表示されるため、どちらもラベルのテキストに合わせて調節する必要がありません。
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="モバイルでのフォーム入力ラベルの位置 (入力の横と上) を示すスクリーンショット。", width="500", height="253" %}<figcaption>ラベルと入力が同じ行にある場合はそれぞれの幅が制限される。</figcaption></figure>
+
+モバイルデバイスで [label-position](https://label-position.glitch.me) Glitch を開いて、ご自分の目でお確かめてください。
+
+### `<button>` を使用する {: #button }
+
+ボタンには [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) を使用してください！ボタン要素は、利用しやすい動作およびフォームを送信するための組み込み機能を提供するほか、スタイルも簡単に指定できます。`<div>` や他の要素をまるでボタンであるかのうように使っても意味がありません。
+
+ボタンは、何をするボタンなのかが書かれていないといけません。たとえば、**送信**や**開始**とするのではなく、**アカウントを作成**や**サインイン**のようにします。
+
+### フォームが正常に送信されることを確認する {: #submission}
+
+フォームが送信されたことをパスワードマネージャーが理解できるようにします。これを行う方法は 2 種類あります。
+
+- 別のページに移動する。
+- `History.pushState()` または `History.replaceState()` を使ってナビゲーションをエミュレートし、パスワードフォームを削除します。
+
+`XMLHttpRequest` や `fetch` リクエストをする場合は、サインインに成功したことがレスポンスで報告されること、またフォームを DOM から取り出し、サインインの成功をユーザーに伝えることによってきちんと処理されていることを確認します。
+
+ユーザーがボタンをタップまたはクリックするタイミングで[**サインイン**]ボタンを無効にすることを検討してください。多くのユーザーは、高速で応答性の高いサイトでも[ボタンを複数回クリックします](https://baymard.com/blog/users-double-click-online)。それは、サイトとのやり取りを遅らせ、サーバーの負荷を上昇させます。
+
+逆に、ユーザー入力を待っているフォームの送信を無効にしてはいけません。たとえば、ユーザーが顧客 PIN を入力していない場合は、[**サインイン**]ボタンを無効にしてはいけません。ユーザーは入力忘れに気付いて、(無効になっている) **サインイン**ボタンを繰り返しタップした場合に、ボタンが機能していないと勘違いするかもしれません。フォームの送信を無効にする必要があるなら、少なくとも、ユーザーが無効になっているボタンをクリックするときは、ユーザーに入力忘れの箇所を知らせるようにしましょう。
+
+{% Aside 'caution' %} フォームのボタンのデフォルトのタイプは `submit` です。フォームに別のボタンを追加する場合は (**パスワードを表示**など)、`type="button"` を追加します。それ以外の場合は、ボタンをクリックまたはタップすればフォームは送信されます。
+
+フォームフィールドのいずれかにフォーカスがある間に `Enter` キーを押すと、フォームの `submit` ボタンに対する最初のクリックがシミュレートされます。フォームの **Submit** ボタンの前に何らかのボタンを含める場合に、そのタイプを指定していなければ、そのボタンは、フォームボタンのデフォルトのタイプ (`submit`) が与えられ、フォームが送信される前にクリックイベントを受け取ることになります。この例については、[デモ](https://enter-button.glitch.me/)をご覧ください (フォームに入力して `Enter` を押してください)。{% endAside %}
+
+### 入力は 1 回だけ要求する {: #no-double-inputs }
+
+一部のサイトでは、ユーザーはメールアドレスまたはパスワードを 2 回入力することを強制されます。一部のユーザーのミスを減らせても、*すべてのユーザー*にとっては面倒なことであるため、[離脱率](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/)を高めてしまう可能性があります。また、ブラウザによってメールアドレスが自動入力されたり、強力なパスワードが提案されたりするサイトで入力を 2 回求めても意味がありません。それよりも、ユーザーが自分でメールアドレスを確認し (どうせしなくてはいけません)、必要に応じてパスワードを簡単にリセットできるようにした方がベターです。
+
+## 要素の属性を最大限に活用する {: #element-attributes }
+
+ここでマジックが起こります！ブラウザには、入力要素の属性を使用する便利なビルトイン機能が複数あります。
+
+## パスワードは非公開にするが、必要に応じてユーザーが見れるようにする {: #show-password }
+
+パスワードのテキストを非表示にし、パスワードのための入力であることをブラウザが理解できるようにするには、パスワード入力に `type="password"` を使用します。(ブラウザは[さまざまな手法](#autofill)を使って入力ロールを理解し、パスワードの保存を提供するかどうかを決定します)
+
+ユーザーが自分で入力したテキストを確認できるように、[**パスワードを表示**]のアイコンまたはボタンを追加するとよいでしょう。また[**パスワードを忘れた場合**]のリンクを追加することも忘れないようにしましょう。[Enable password display (パスワードの表示を有効にする)](#password-display) を参照してください。
+
+<figure>{% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="「パスワードを表示」のアイコンを示す Google のログインフォーム。", width="300", height="107" %}<figcaption> [<strong>パスワードを表示</strong>]のアイコンと[<strong>パスワードを忘れた場合</strong>]のリンクがある Google のサインインフォームを使ったパスワード入力。</figcaption></figure>
+
+## モバイルユーザーに適切なキーボードを提供する {: #mobile-keyboards }
+
+`<input type="email">`を使用して、モバイルユーザーに適切なキーボードを提供し、ブラウザによるメールアドレスの基本的なビルトイン検証機能を有効にします。JavaScript は必要ありません。
+
+メールアドレスの代わりに電話番号を使用する必要がある場合は、`<input type="tel">` を使うとモバイルデバイスで電話のキーパッドが有効化されます。必要な場合は、`inputmode` 属性も使用できます (PIN 番号の場合は `inputmode="numeric"` を使うのが最適です)。詳しくは、[Everything You Ever Wanted to Know About inputmode (inputmode について知っておきたいこと)](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/) を参照してください。
+
+{% Aside 'caution' %} `type="number"` を使うと、数値を増加させるための上/下矢印が追加されるため、ID やアカウント番号など、増加させるべきでない番号には使用しないでください。{% endAside %}
+
+### モバイルキーボードが**サインイン**ボタンを妨害しないようにする {: #keyboard-obstruction}
+
+残念ながら、注意が足りないと、モバイルキーボードがフォームを覆い隠したり、もっと酷い場合は、**[サインイン**]ボタンを部分的に妨害したりしてしまう場合があります。ユーザーは、状況が分からないまま諦めてしまう可能性があります。
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Android 携帯電話のサインインフォームを示した 2 つのスクリーンショット (そのうち 1 つは携帯電話のキーボードによって[送信]ボタンが覆い隠されている様子を示している)。", width="400", height="360" %}<figcaption> [<b>サインイン</b>]ボタン (見える場合と見えない場合)。</figcaption></figure>
+
+可能であれば、サインインページの上部には電子メールアドレス/電話番号およびパスワードの入力と**サインイン**ボタンのみを表示して、これを回避します。他のコンテンツはその下に配置します。
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Android 携帯電話のサインインフォームを示したスクリーンショット (サインインボタンは電話のキーボードによって覆い隠されていない)。", width="200", height="342" %}<figcaption>キーボードは<b>サインイン</b>ボタンを妨害していない。</figcaption></figure>
+
+#### さまざまなデバイスでテストする {: #devices }
+
+ターゲットオーディエンスを考慮して、さまざまなデバイスでテストを実施し、結果に応じて調整を行う必要があります。BrowserStack を使用すれば、実在するさまざまなデバイスやブラウザで[オープンソースプロジェクトのテストを無料で行えます](https://www.browserstack.com/open-source)。
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="iPhone 7、8、11 のサインインフォームを示したスクリーンショット。iPhone 7 と 8 では、サインインボタンが電話のキーボードによって覆われているが、iPhone 11 は覆われていない", width="800", height="522" %}<figcaption><b>サインイン</b>ボタン (iPhone 7 と 8では覆われているが、iPhone 11では覆われていない)。</figcaption></figure>
+
+#### ページを 2 つ使用することを検討する {: #two-pages}
+
+Amazon や eBay を含む一部のサイトでは、電子メールアドレス/電話番号とパスワードを 2 つのページで要求することによりこの問題を回避しています。このアプローチでは、ユーザーは 1 度に 1 つのことだけをすればいいので、使用体験がシンプルになります。
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Amazon ウェブサイトのサインインフォームを示したスクリーンショット (電子メールアドレス/電話番号とパスワードが 2 つの別のページで求められている)。", width="400", height="385" %}<figcaption> 2 段階のサインイン (電子メールアドレスまたは電話の後にパスワードを入力)。</figcaption></figure>
+
+これは &lt;form&gt;を 1 つ使って実装するのが理想です。JavaScript を使用して、最初に電子メールアドレスの入力のみを表示し、次にそれを非表示にしてからパスワード入力を表示します。電子メールアドレスとパスワードを入力する間に新しいページに移動することをユーザーに強制する必要がある場合は、パスワードマネージャーが正しい値を保存できるように、2 つ目のページのフォームには電子メールアドレスを値として持つ非表示の入力要素を設ける必要があります。コードの例は、[Password Form Styles that Chromium Understands (Chromium が理解できるパスワードフォームスタイル)](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands) でご覧いただけます。
+
+### ユーザーがデータを再入力しなくて済むようにする {: #autofill}
+
+ブラウザがデータを正しく保存し、自動入力できるようにすれば、ユーザーは電子メールアドレスとパスワードを入力することをわざわざ覚えておく必要がなくなります。これはモバイルでは特に重要である上に、[離脱率](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/)の高い電子メールアドレスの入力については絶対に欠かせません。
+
+このアプローチは 2 つの部分があります。
+
+1. `autocomplete` 、`name` 、`id` 、および `type` 属性は、後から自動入力に使用できるデータを保存するためにブラウザが各入力の役割を理解するのを助けます。最新のブラウザで自動入力を行えるようにデータを保存するには、各入力に `name` または `id` の安定した値 (各ページの読み込み時またはサイトのデプロイ時にランダムに生成される値ではない) があり、かつ`送信`ボタン付きの &lt;form&gt; に取り込まれることも必要とされます。
+
+2. `autocomplete` 属性は、ブラウザが保存されたデータを使用して入力を正しく自動入力するのを助けます。
+
+メールアドレスの入力には、`type="email"` を使用するべきですし、また `id="email"` と `name="email"` を使いたいところかもしれませんが、最近のブラウザは `username` を認識できるため、`autocomplete="username"` を使用します。
+
+パスワードの入力には、ブラウザが新しいパスワードと現在のパスワードを区別できるように、`autocomplete` と `id` の適切な値を使用します。
+
+### 新しいパスワードには `autocomplete="new-password"` と `id="new-password"` を使用する {: #new-password }
+
+- サインアップフォームのパスワード入力やパスワード変更フォームの新しいパスワードには、`autocomplete="new-password"` と `id="new-password"` を使用します。
+
+### 既存のパスワードには、`autocomplete="current-password"` と `id="current-password"` を使用する {: #current-password }
+
+- サインインフォームでのパスワード入力、またはパスワード変更フォームでのユーザーの古いパスワード入力には、`autocomplete="current-password"` と `id="current-password"` を使用します。これは、そのサイト用に保存されている現在のパスワードを使用することをブラウザに指示します。
+
+サインアップフォームの場合:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+サインインの場合:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %} Chrome などのブラウザは、リピーターがサインインする際にブラウザに搭載されているパスワードマネージャーを使ってフィールドを自動入力できます。こうした機能をうまく働かせるには、ブラウザはユーザーがパスワードを変更するタイミングを識別できる必要があります。
+
+具体的には、新しいパスワードが設定された後は、ユーザーのパスワードを変更するためのフォームをクリアするか、非表示にする必要があります。パスワードが変更された後もユーザーのパスワードを変更するフォームが記入されたまま残っていると、ブラウザは更新内容を記録できない場合があります。{% endAside %}
+
+### パスワードマネージャーをサポートする {: #password-managers}
+
+ブラウザが異なれば、電子メールアドレスの自動入力とパスワードの提案も処理の仕方が多少異なりますが、得られる効果はも多少異なりますが、効果はほぼ変わりありません。たとえば、デスクトップ版の Safari 11 以降では、パスワードマネージャーが表示された後、利用可能であれば、場合は生体認証 (指紋または顔認識) が使用されます。
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="デスクトップ版 Safari での 3 段階のサインインプロセス (パスワードマネージャー、生体認証、自動入力) を示したスクリーンショット。", width="800", height="234" %}<figcaption>オートコンプリートによるサインイン。テキスト入力は必要ありません！</figcaption></figure>
+
+デスクトップ版の Chrome は、メールアドレスの提案とパスワードマネージャーを表示し、パスワードを自動入力します。
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="デスクトップ版 Chrome での 4 段階のサインインプロセス (メールアドレスの補完、メールアドレスの提案、パスワードマネージャー、選択時の自動入力) を示したスクリーンショット。", width="800", height="232" %}<figcaption> Chrome 84 におけるオートコンプリートを使ったサインインフロー。</figcaption></figure>
+
+ブラウザのパスワードシステムと自動入力システムの仕組みは、単純なものではありません。値を推測、保存、表示するためのアルゴリズムは標準化されておらず、プラットフォームごとに異なります。たとえば、[Hidde de Vries 氏](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form)が指摘するように、「Firefox のパスワードマネージャーは、[レシピシステム](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)を使ってそのヒューリスティックを補完します。」
+
+[自動入力: ウェブ開発者が知っておくべきこと](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)ですが、`name` と `autocomplete` の使い方については限られた情報しかありません。[HTML の仕様](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control)に 59 個すべての値が記載されています。
+
+{% Aside %} `form` 要素そのものに加え、`input` 要素、`select` 要素、`textarea` 要素についても、サインアップフォームおよびサインインフォームで `name` と `id` に異なる値を使用すれば、パスワードマネージャーの働きを助けることができます。{% endAside %}
+
+### ブラウザが強力なパスワードを提案できるようにする {: #password-suggestions}
+
+最近のブラウザは、ヒューリスティックを使用して、パスワードマネージャの UI を表示するタイミングを決定し、強力なパスワードを提案します。
+
+こちらはデスクトップ版 Safari の場合です。
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="デスクトップ版 Firefox のパスワードマネージャーを示したスクリーンショット。", width="800", height="229" %}<figcaption> Safari でのパスワード提案フロー。</figcaption></figure>
+
+(Safari では、バージョン 12.0 以降、強力な一意のパスワード提案が利用可能になっています。)
+
+ブラウザのビルトインパスワードジェネレータがあるということは、ユーザーと開発者は、いわゆる「強力なパスワード」を作り出す必要がないということです。ブラウザは安全にパスワードを保存し、必要に応じて自動入力もできるため、ユーザーはパスワードを覚える必要も、入力する必要もありません。ユーザーにブラウザのビルトインパスワードジェネレータを利用するよう促せば、ユーザーがサイトで一意の強力なパスワードを使用する可能性が高まる一方、他のサイトで侵害され得るパスワードを再利用する可能性が低くなります。
+
+{% Aside %} このアプローチの欠点は、パスワードを複数のプラットフォームで共有する術がないという点です。たとえば、ユーザーは iPhone では Safari を使用しても、Windows ノートPC では Chrome を使用するかもしれません。{% endAside %}
+
+### ユーザーがうっかり入力し忘れるのを防ぐ {: #required-fields}
+
+メールアドレスとパスワードの両方のフィールドに `required` 属性を追加します。最新のブラウザでは、入力されていないデータがあれば、それにフォーカスが自動的に移動するようになっています。JavaScript は必要ありません！
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="デスクトップ版 Firefox と Android 版 Chrome で未入力のデータに対して「このフィールドは必須です」というプロンプトが表示される場合のスクリーンショット。", width="600", height="392" %}<figcaption> デスクトップ版 Firefox (バージョン76) および Android 版 Chrome (バージョン83) で不足しているデータに対して表示されるプロンプトとフォーカス。</figcaption></figure>
+
+## 指と親指のデザイン {: #mobile-design}
+
+入力要素とボタンに関連するほぼすべてのものについて、ブラウザのデフォルトサイズは小さ過ぎると思います。モバイルの場合は、特にそうです。言うまでもないかもしれませんが、多くのサイトのサインインフォームで問題になっています。
+
+### 入力とボタンが十分なサイズであることを確認する {: #tap-targets}
+
+デスクトップ上の入力とボタンのデフォルトサイズとパディングは、とにかく小さいですが、モバイルはもっと小さくなります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="デスクトップ版 Chrome および Android 版 Chrome のスタイル指定されていないフォームを示したスクリーンショット。", width="800", height="434" %}</figure>
+
+[Android のアクセシビリティガイダンスに](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB)よると、タッチスクリーンオブジェクトの推奨ターゲットサイズは 7〜10mm です。Apple インターフェイスガイドラインは、48x48 ピクセルを提案し、W3C は[少なくとも 44x44 CSS ピクセル](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)を提案しています。その上で、モバイルの入力要素とボタンに (少なくとも) 約15ピクセルのパディングを追加し、デスクトップの場合は約10ピクセルを追加します。実際のモバイルデバイスと実際の指または親指でこれを試してください。各入力とボタンを快適にタップできるはずです。
+
+Lighthouse による [Tap targets are not sized appropriately (タップターゲットのサイズが適切でない)](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/) 監査は、小さすぎる入力要素を検出するプロセスを自動化するのに役立ちます。
+
+#### 親指のデザイン {: #design-for-thumbs}
+
+[タッチターゲット](https://www.google.com/search?q=touch+target)を検索すると、人差し指の写真がたくさん表示されます。ただし、実際は、多くの人が親指を使って電話を操作します。しかし、親指は人差し指よりも大きいため、操作をしにくくなります。なおさら、適切なサイズのタッチターゲットが必要だと言えます。
+
+### テキストを十分に大きくする {: #size-text-correctly}
+
+サイズやパディングと同様に、特にモバイルでは、入力要素とボタンのデフォルトのブラウザフォントサイズが小さすぎます。
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="デスクトップ版 Android と Chrome でのスタイル未指定のフォームを示したスクリーンショット。", width="800", height="494" %}<figcaption>デスクトップとモバイルのデフォルトスタイル (入力テキストが小さすぎて、多くのユーザーが判読できない。</figcaption></figure>
+
+同じブラウザでも、プラットフォームが異なるとフォントのサイズも異なります。したがい、プラットフォームを問わずにうまく機能する特定のフォントサイズを指定するのは容易ではありません。人気のウェブサイトをさっと調査したところ、デスクトップの場合は 13～16 ピクセルのサイズが使用されているようです。モバイルのテキストは、物理的に少なくとも同じサイズにするとよいでしょう。
+
+つまり、モバイルではもっと大きなピクセルサイズを使用する必要があります (デスクトップ版の Chrome だと、`16px` ピクセルはとても読みやすいですが、Android 版の Chrome だと、`16px` のテキストは視力が高い人でも読みにくいでしょう。[メディアクエリ](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size)を使用すれば、ビューポートの各サイズに異なるフォントピクセルサイズを設定できます。モバイルでは `20px` がちょうどいいと思いますが、視力の弱い友人や同僚に見せてみるべきだと思います。
+
+Lighthouse による [Document doesn't use legible font sizes (ドキュメントは読みやすいフォントサイズを使用していない)](https://developer.chrome.com/docs/lighthouse/seo/font-size/) e監査は、小さすぎるテキストを検出するプロセスを自動化するのに役立ちます。
+
+### 各入力の間に十分なスペースを設ける {: #size-margins-correctly}
+
+入力がタッチターゲットとしてうまく機能するように十分なマージンを追加します。つまり、指幅程度のマージンを目安とします。
+
+### 入力がはっきりと見えることを確認する {: #visible-inputs}
+
+入力のデフォルトのボーダースタイルを使うと、入力が見にくくなります。Android 版の Chrome など、一部のプラットフォームではほとんど見えなくなってしまいます。
+
+パディングに加え、ボーダーも追加します。背景が白の場合は、`#ccc` かもっと暗い色を使用することが原則とされています。
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Android 版の Chrome でスタイル指定されたフォームを示したスクリーンショット。", width="250", height="525" %}<figcaption>読みやすいテキスト、目に見える入力ボーダー、十分なパディングとマージン。</figcaption></figure>
+
+### ブラウザの組み込み機能を使って無効な入力値について警告する  {: #built-in-validation}
+
+ブラウザーには、`type` 属性を持つ入力に対し、基本的なフォーム検証を行うためのビルトイン機能があります。無効な値が含まれたフォームを送信すると、ブラウザはそれに対して警告を出し、問題のある入力にフォーカスを移動させます。
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="メールアドレスの無効な値に対するプロンプトとフォーカスを表示したデスクトップ版の Chrome におけるサインインフォームを示したスクリーンショット。", width="300", height="290"%}<figcaption>ブラウザに組み込まれたベーシックな検証機能。</figcaption></figure>
+
+`:invalid` CSSセレクターを使用すれば、無効なデータを強調表示できます。`:not(:placeholder-shown)`を使用して、コンテンツのない入力を選択しないようにします。
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+値が無効な入力を強調表示する方法をいろいろお試しください。
+
+## 必要に応じて JavaScript を使用する {: #javascript}
+
+### パスワード表示を切り替える {: #password-display}
+
+ユーザーが入力したテキストを確認できるようにするには、**[パスワードを表示]**のアイコンまたはボタンを追加する必要があります。ユーザーが自分の入力したテキストを確認できないと、[ユーザビリティが損なわれます](https://www.nngroup.com/articles/stop-password-masking/)。現在、ビルトイン機能によってこれを行うための方法はありませんが、[実装の計画はあります](https://twitter.com/sw12/status/1251191795377156099)。代わりに JavaScript を使用する必要があります。
+
+<figure><img src="https://github.com/GoogleChrome/web.dev/blob/main/src/site/content/ja/identity/sign-in-form-best-practices/show-password-google.png?raw=true" class="" alt="「パスワードを表示」のアイコンを示した Google のサインインフォーム。"> <figcaption><strong>[パスワードを表示]</strong> のアイコンと <strong>[パスワードを忘れた場合]</strong> のリンクが使用された Google のサインインフォーム。</figcaption></figure>
+
+次のコードは、テキストボタンを使用して**パスワードの表示**機能を追加します。
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+以下はボタンをプレーンテキストのように見せるための CSS です。
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+そして、パスワードを表示するための JavaScript はこちら。
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Hide password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Hide password.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Show password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Show password as plain text. ' +
+      'Warning: this will display your password on the screen.');
+  }
+}
+```
+
+最終結果はこちら。
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Mac 版 Safari と iPhone 7 の「パスワードを表示」テキスト 'ボタン'  付きサインインフォームを示したスクリーンショット。", width="800", height="468" %}<figcaption> Mac 版 Safari と iPhone 7 の <strong>[パスワードを表示]テキスト</strong> 'ボタン'  付きサインインフォームを示したスクリーンショット。</figcaption></figure>
+
+### パスワード入力をアクセス可能にする {: #accessible-password-inputs}
+
+`aria-describedby`を使用して、制約を説明する要素の ID を指定することにより、パスワードルールを概略します。スクリーンリーダーは、ラベルテキスト、入力タイプ (パスワード)、説明をを順に提供します。
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
+```
+
+**[パスワードの表示]** 機能を追加するときは、必ず`aria-label` を使ってパスワードが表示されることを警告します。そうしないと、ユーザーが誤ってパスワードを公開してしまう場合があります。
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Show password as plain text.
+                    Warning: this will display your password on the screen.">
+  Show password
+</button>
+```
+
+ARIA の両機能の動作は、以下の Glitch で確認できます。
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+[アクセシブルフォームの作成には、フォームをアクセシブルに](https://webaim.org/techniques/forms/)するためのヒントがさらにあります。
+
+### 送信前にリアルタイムに検証する {: #validation}
+
+HTML フォームの要素と属性には基本的な検証機能が組み込まれていますが、ユーザーがデータを入力しているときやフォームを送信しようとしているときには、JavaScript を使用してより効果的な検証を行う必要があります。
+
+{% Aside 'warning' %}クライアント側の検証は、ユーザーがデータを入力するのに役立ち、サーバーに不要な負荷がかかるのを回避できますが、データは常にバックエンドで検証およびサニタイズする必要があります。{% endAside %}
+
+サインインフォームコードラボの[ステップ 5](https://glitch.com/edit/#!/sign-in-form-codelab-5) では、ブラウザの組み込み UI を使ってカスタム検証を追加し、フォーカスの設定とプロンプトの表示を行う目的で、([広くサポートされている](https://caniuse.com/#feat=constraint-validation)) [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) が使用されます。
+
+詳しくは、[Use JavaScript for more complex real-time validation (JavaScriptを使用して、より複雑なリアルタイム検証を行う)](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation) を参照してください。
+
+### 分析と RUM {: #analytics}
+
+「評価できないものは、改善できない」という考えは、特にサインアップフォームとサインインフォームについて言えることです。目標を設定し、成功を評価し、サイトを改善し、それを繰り返すという作業が必要です。
+
+[割引ユーザビリティテスト](https://www.nngroup.com/articles/discount-usability-20-years/)は、変更を試すのに役立ちますが、ユーザーによるサインアップフォームとサインインフォームの使用体験を理解するには、実際のデータが必要です。
+
+- **ページ分析**: サインアップページおよびサインインページのビュー、バウンス率、閲覧終了。
+- **インタラクション分析**: [ゴールファネル](https://support.google.com/analytics/answer/6180923?hl=en) (ユーザーがサインインまたはサインインフローから離脱する箇所) と [イベント](https://developers.google.com/analytics/devguides/collection/gtagjs/events) (ユーザーがフォームを操作するときに行う操作)
+- **ウェブサイトのパフォーマンス**: [ユーザー中心の指標](/user-centric-performance-metrics) (何らかの理由でサインアップフォームとサインインフォームが遅くなっていないか。遅いなら、何が原因となっているか)。
+
+また、サインアップとサインインのさまざまなアプローチを試すことを目的とした A/B テストの実装、すべてのユーザーに変更をリリースする前に、ユーザーのサブセットに対して変更を検証することを目的とした段階的なロールアウトを検討することをおすすめします。
+
+## 一般的なガイドライン {: #general-guidelines}
+
+UI と UX を適切に設計すれば、サインインフォームからの離脱を削減できます。
+
+- サインインする場所は分かりやすい場所に配置しましょう！**サインイン**、**アカウントを作成**、**登録**など、一般的に理解されている表現を使用して、ページの上部にサインインフォームへのリンクを配置します。
+- 集中できるようにしましょう！サインアップフォームは、オファーやサイトの機能などを紹介する場所ではありません。
+- サインアップは極力シンプルにしましょう。住所やクレジットカードの詳細といった他のユーザーデータは 、ユーザーがそうした情報を提供することに明らかなメリットがあると判断した場合にのみ収集します。
+- ユーザーがサインアップフォームを開始する前に、どのような価値提案があるのかを明確にします。サインインすることにどのようなメリットがあるのか？サインアップを完了するための具体的な理由ををユーザーに提供します。
+- 一部のユーザーは電子メールを使用していない場合があるため、可能であれば、ユーザーが電子メールアドレスではなく携帯電話番号で本人確認できるようにしましょう。
+- パスワードを簡単にリセットできるようにし、**[パスワードを忘れた場合]**のリンクもすぐ見つけられるようにしましょう。
+- 利用規約とプライバシーポリシードキュメントへのリンクを挿入する: サイトでユーザーのデータを保護する方法を最初から明確にしておきましょう。
+- サインアップページとサインインページに会社または組織のロゴと名前を含め、文言、フォント、およびスタイルをサイト全体で一致させます。フォームによっては、他のコンテンツのように同じサイトに属しているように感じられない場合があります。URL が大幅に異なる場合は、特にそう感じるでしょう。
+
+## 学習を続けしましょう {: #resources}
+
+- [Create Amazing Forms (すばらしいフォームを作成する)](/learn/forms/)
+- [Best Practices For Mobile Form Design (モバイルフォームデザインのベストプラクティス)](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [More capable form controls (より細かく機能するフォームコントロール)](/more-capable-form-controls)
+- [Creating Accessible Forms (使いやすいフォームの作成)](https://webaim.org/techniques/forms/)
+- [Streamlining the Sign-in Flow Using Credential Management API (認証情報管理 API を使用したサインインフローの合理化)](https://developer.chrome.com/blog/credential-management-api/)
+- [WebOTPAPIを使用してWeb上の電話番号を確認する](/web-otp/)
+
+写真は、[Unsplash](https://unsplash.com) の [Meghan Schiereck 氏](https://unsplash.com/photos/_XFObcM_7KU) にご提供いただきました。
diff --git a/src/site/content/ja/index.11tydata.js b/src/site/content/ja/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/ja/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/ja/index.md b/src/site/content/ja/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/ja/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/ja/ja.11tydata.js b/src/site/content/ja/ja.11tydata.js
new file mode 100644
index 00000000000..888b758a7af
--- /dev/null
+++ b/src/site/content/ja/ja.11tydata.js
@@ -0,0 +1,31 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/ja/lang.js b/src/site/content/ja/lang.js
new file mode 100644
index 00000000000..921c146fca1
--- /dev/null
+++ b/src/site/content/ja/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'ja',
+  locale: 'ja_JP',
+};
diff --git a/src/site/content/ja/learn-core-web-vitals/index.md b/src/site/content/ja/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/ja/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/ja/learn/css/box-model/box-model.assess.yml b/src/site/content/ja/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/ja/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/ja/learn/css/box-model/index.md b/src/site/content/ja/learn/css/box-model/index.md
new file mode 100644
index 00000000000..0372f854044
--- /dev/null
+++ b/src/site/content/ja/learn/css/box-model/index.md
@@ -0,0 +1,163 @@
+---
+title: ボックスモデル
+description: |2
+
+  CSSで表示されるものはすべてボックスです。
+  したがって、CSSボックスモデルがどのように機能するかを理解することは、CSSのコア基盤です。
+audio:
+  title: 'CSSポッドキャスト   - 001: ボックスモデル'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+次のHTMLコードがあるとします。
+
+```html
+<p>I am a paragraph of text that has a few words in it.</p>
+```
+
+このHTMLに次のCSSを記述します。
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+コンテンツは要素から外れ、幅は100ピクセルではなく142ピクセルになります。なぜでしょうか。ボックスモデルはCSSの重要な基盤です。より予測可能なCSSを作成するには、ボックスモデルがどのように機能して、CSSの他の側面によってどのように影響を受けるのかを理解する必要があります。そして、重要な点は、ボックスモデルを制御する方法を理解することです。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRemxN', height: 300 } %}</figure>
+
+CSSを作成するとき、またはWeb全般で作業するときに覚えておくべき非常に重要なことは、CSSによって表示される要素がすべてボックスであるということです。これは、`border-radius`を使用して円のように見えるボックスでも、単純なテキストでも同じです。覚えておくべき重要なことは、それがすべてボックスであるということです。
+
+## コンテンツとサイズ設定
+
+ボックスの動作は、 `display`値、設定されたサイズ、およびボックス内に存在するコンテンツに基づいて異なります。このコンテンツは、子要素によって生成されたさらに多くのボックスであったり、プレーンテキストコンテンツであったりする可能性があります。いずれにしても、このコンテンツはデフォルトでボックスのサイズに影響します。
+
+これを制御するには、**外在サイズ設定**を使用します。あるいは、**内在サイズ設定**を使用して、コンテンツサイズに基づいてブラウザに決定させることもできます。
+
+デモを使用して、違いを簡単に見てみましょう。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' } %} <figcaption>ボックスが外在サイズ設定を使用しているときには、追加できるコンテンツの量には制限があり、それを超えると、ボックスの境界からオーバーフローします。このため、「awesome」という単語がオーバーフローします。</figcaption></figure>
+
+デモでは、固定サイズで太い境界線のボックスがあり、このボックスに「CSS is awesome」という単語が入っています。このボックスは幅設定があるので、外在サイズです。これで子コンテンツのサイズが制御されます。ただし、これには問題があります。「awesome」という単語がボックスに対して大きすぎるため、親ボックスの**境界ボックス**の外側にオーバーフローしてしまいます(この点については授業の後半で詳しく説明します)。 このオーバーフローを防止するための方法の1つは、幅の設定を解除するか、この場合は`width`を`min-content`に設定して、ボックスを内在サイズにできるようにすることです。 `min-content`キーワードは、ボックスの幅をコンテンツの内在最小幅(「{awesome」)に制限するようにボックスに命令します。これにより、「CSS is awesome」がボックス内にきっちりと収まります。
+
+さらに複雑な例を見て、実際のコンテンツに対するさまざまなサイズ設定の影響を確認しましょう。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+内在サイズ設定のオンとオフを切り替え、外在サイズ設定をより詳細に制御し、コンテンツに内在サイズ設定をより詳細に制御させる方法を確認します。内在および外在サイズ設定の効果を確認するには、カードにコンテンツの文をいくつか追加します。この要素が外在サイズ設定を使用しているときには、追加できるコンテンツの量に制限があり、それを超えると要素の境界からオーバーフローしますが、内部サイズ設定がオンになっている場合はオーバーフローしません。
+
+デフォルトでは、この要素には`width`と`height`があり、いずれも`400px`に設定されています。これらのサイズは、要素内のすべてに厳密な境界を設定します。この境界は、コンテンツがボックスに対して大きすぎる場合を除いて尊重されます。大きすぎる場合、目に見えるオーバーフローが発生します。花の写真の下にあるキャプションの内容をボックスの高さ(2、3行)を超えるように変更すると、この実際の動作を確認できます。
+
+{% Aside "key-term" %}ボックスに対してコンテンツが大きすぎて収まらないときには、これをオーバーフローと呼びます。要素がオーバーフローコンテンツを処理する方法を管理するには、`overflow`プロパティを使用します。 {% endAside %}
+
+内在サイズ設定に切り替えると、ボックスのコンテンツのサイズに基づいて、ブラウザに決定させます。内在サイズ設定では、ボックスがコンテンツのサイズ変更を試みるのではなく、コンテンツに合わせてボックスのサイズが変更されるため、オーバーフローが発生する可能性は大幅に低くなります。これはブラウザのデフォルトの柔軟な動作であることを覚えておくことが重要です。表面上は外在サイズ設定の方がより細かい制御ができますが、ほとんどの場合において内在サイズ設定が最も柔軟性に優れています。
+
+## ボックスモデルの領域
+
+ボックスは、すべてが特定の仕事をする別個のボックスモデル領域で構成されています。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="ボックスモデルの4つの主な領域を示す図 - コンテンツボックス、パディングボックス、境界ボックス、マージンボックス", width="800", height="547" %} <figcaption>ボックスモデルの4つの主な領域は、コンテンツボックス、パディングボックス、境界ボックス、マージンボックスです。</figcaption></figure>
+
+まず、**コンテンツボックス**から始めます。これはコンテンツが存在する領域です。すでに学習したように、このコンテンツは親のサイズを制御できるため、通常は、最もサイズが変動する領域です。
+
+**パディングボックス**はコンテンツボックスを囲み、[`padding`](https://developer.mozilla.org/docs/Web/CSS/padding)プロパティによって作成されたスペースです。パディングはボックス内にあるため、ボックスの背景は作成されたスペースに表示されます。 `overflow: auto`や`overflow: scroll`などのオーバーフロールールがボックスに設定されている場合、スクロールバーもこのスペースを占有します。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+**境界ボックス**はパディングボックスを囲みます。スペースは`border`値によって占められます。境界ボックスはボックスの境界です。**境界エッジ**は視覚的に見える内容の限界です。 <a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a>プロパティは、要素を視覚的にフレーム化するために使用されます。
+
+最後の領域である**マージンボックス**はボックスの周囲のスペースであり、ボックスの`margin`ルールによって定義されます。 [`outline`](https://developer.mozilla.org/docs/Web/CSS/outline)や[`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow)などのプロパティも上部に描画されるためこのスペースを占め、ボックスのサイズには影響しません。 ボックスでは`outline-width`を`200px`に設定することができ、ボックスを含むボックスのすべての要素がまったく同じサイズになります。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea' } %}</figure>
+
+## 役に立つ例
+
+ボックスモデルは複雑で理解することが難しいので、例を使用して学習した内容をまとめます。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="3つのフォトフレーム", width="800", height="562" %}</figure>
+
+この図では、3つのフォトフレームが隣に並べて壁に取り付けられています。この図には、フレームの要素をボックスモデルに関連付けるラベルがあります。
+
+この例を分解するには、次の手順を実行します。
+
+- コンテンツボックスはアートワークです。
+- パディングボックスは、フレームとアートワークの間にある白いマットです。
+- ボーダーボックスはフレームであり、アートワークに文字通りのボーダーを提供します。
+- マージンボックスは、各フレーム間のスペースです。
+- 影はマージンボックスと同じスペースを占めます。
+
+## ボックスモデルのデバッグ
+
+ブラウザのDevToolsは、選択したボックスのボックスモデル計算を視覚化します。これは、ボックスモデルがどのように機能するか、そして重要な点として作業中のWebサイトにどのように影響するかを理解するのに役立ちます。
+
+先に進み、ブラウザで次の手順を試します。
+
+1. [DevToolsを開く](https://developer.chrome.com/docs/devtools/open/)
+2. [要素を選択します](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. ボックスモデルデバッガーを表示する
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## ボックスモデルの制御
+
+ボックスモデルを制御する方法を理解するには、まずブラウザで発生する動作を理解する必要があります。
+
+すべてのブラウザは、ユーザーエージェントスタイルシートをHTMLドキュメントに適用します。使用されるCSSはブラウザごとに異なりますが、コンテンツを読みやすくするために適切なデフォルト設定を提供します。これらは、CSSが定義されていない場合に、要素がどのように表示され、動作するかを定義します。 これは、ボックスのデフォルトの`display`も設定されている、ユーザーエージェントスタイルにあります。たとえば、通常のフローでは、 `<div>`要素のデフォルトの`display`値は`block`であり、 `<li>`のデフォルトの`display`値は`list-item`であり、 `<span>`のデフォルトの`display`値は`inline`です。
+
+`inline`要素にはブロックマージンがありますが、他の要素はそれを無視します。 `inline-block`使用すると、これらの要素はブロックマージンを適用しますが、要素は`inline`要素と同じ動作のほとんどを維持します。 `block`アイテムは、デフォルトで使用可能な**インラインスペースを**埋めますが、 `inline`要素と`inline-block`要素はそのコンテンツと同じ大きさしかありません。
+
+ユーザーエージェントのスタイルが各ボックスにどのように影響するかを理解するとともに`box-sizing`を理解する必要があります。これは、ボックスのサイズを計算する方法をボックスに指示します。デフォルトでは、すべての要素のユーザーエージェントスタイルは次のとおりです。`box-sizing: content-box;`。
+
+`box-sizing`が`content-box`の値であるということは、`width`や`height`などのサイズを設定すると、それらが**コンテンツボックスに**適用されることを意味します。次に、 `padding`と`border`を設定すると、これらの値がコンテンツボックスのサイズに追加されます。
+
+{% Assessment 'box-model' %}
+
+このボックスの実際の幅は260pxになります。 CSSはデフォルトの`box-sizing: content-box`ため、適用される幅はコンテンツの幅であり、 `padding`と`border`がそれに追加されます。したがって、コンテンツの200px +パディングの40px +境界線の20pxは、合計で260pxの表示幅になります。
+
+`border-box`を使用するように次の変更を加えることで、これ*を*制御できます。
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+この代替ボックスモデルは、CSSにコンテンツボックスではなく境界ボックスに`width`を適用するように命令します。つまり、 `border`と`padding`が*押し込まれ*ます。その結果、 `.my-box`を`200px`幅に設定すると、実際には`200px`幅でレンダリングされます。
+
+次のインタラクティブデモでこれがどのように機能するかを確認してください。 `box-sizing`値を切り替えると、青い背景で表示されます。CSSは*ボックス内*に適用されています。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+このCSSルールは、ドキュメント内のすべての要素と、すべての`::before`および`::after`疑似要素を選択し、 `box-sizing: border-box`を適用します。これは、すべての要素にこの代替ボックスモデルがあることを意味します。
+
+代替ボックスモデルでは予測可能性が高くなることがあるため、[この例のように](https://piccalil.li/blog/a-modern-css-reset)、開発者はこのルールを[このような](https://piccalil.li/blog/a-modern-css-reset)リセットやノーマライザーに追加することがよくあります。
+
+## リソース
+
+- [ボックスモデルの紹介](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [ブラウザ開発ツールとは何ですか？](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### ユーザーエージェントのスタイルシート
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/ja/learn/css/css.11tydata.js b/src/site/content/ja/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/ja/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/ja/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/ja/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/ja/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/ja/learn/css/selectors/index.md b/src/site/content/ja/learn/css/selectors/index.md
new file mode 100644
index 00000000000..5980567ed8e
--- /dev/null
+++ b/src/site/content/ja/learn/css/selectors/index.md
@@ -0,0 +1,353 @@
+---
+title: セレクター
+description: 要素に CSS を適用するには、要素を選択する必要があります。CSS には、これを行う方法がたくさんあります。本モジュールではそれを詳しく見ていきます。
+audio:
+  title: CSS ポッドキャスト   - 002：セレクター
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+記事の最初のパラグラフとして使用される場合には、サイズを大きくして、かつ赤色で表示したいテキストがあるとします。
+
+```html
+<article>
+  <p>I want to be red and larger than the other text.</p>
+  <p>I want to be normal sized and the default color.</p>
+</article>
+```
+
+その場合は、CSS セレクターを使ってその特定の要素を検索し、次のように CSS ルールを適用します。
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+このような状況を解決するために、CSS には対象となる要素を選択し、それに対して、シンプルさや複雑さを問わず、さまざまなルールを適用できるオプションがたくさんあります。
+
+{% Codepen { user: 'web-dot-dev', id: 'XWprGYz', height: 250 } %}
+
+## CSS ルールの構成要素
+
+CSS におけるセレクターの機能の仕組みと役割について理解するには、CSS ルールを構成する各要素について知っておくことが重要です。 CSS ルールは、1 つ以上のセレクターと 1 つ以上の宣言を含むコードブロックです。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt=".my-css-rule というセレクターが使用された CSS ルールの画像", width="800", height="427" %}を使用したCSSルールの画像</figure>
+
+この CSS ルールの**セレクター**は、`.my-css-rule` で、ページ上で `my-css-rule` というクラスを持つすべての要素を検索します。中括弧内には 3 つの宣言があります。宣言とは、セレクターによって一致する要素にスタイルを適用するプロパティと値のペアです。CSS ルールで使用できる宣言とセレクターの数に制限はありません。
+
+## シンプルなセレクター
+
+最もシンプルなセレクターは、HTML タグに追加できる HTML 要素とタグ、ID、またそれ以外の属性をターゲットにします。
+
+### ユニバーサルセレクター
+
+[ユニバーサルセレクター](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) (別名ワイルドカード) は、あらゆる要素をマッチさせます。
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+上のルールを使うと、ページ上のすべての HTML 要素のテキストはホットピンクで表示されます。
+
+### タイプセレクター
+
+[タイプセレクター](https://developer.mozilla.org/docs/Web/CSS/Type_selectors)は、指定する HTML 要素を直接マッチさせます。
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+上のルールを使うと、`<section>` の各要素の全側面に `2em` の `padding` が適用されます。
+
+### クラスセレクター
+
+HTML 要素は、`class` 属性に 1 つ以上の項目を定義できます。[クラスセレクター](https://developer.mozilla.org/docs/Web/CSS/Class_selectors)は、そのクラスが適用されているすべての要素をマッチさせます。
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+クラスが適用されている要素はすべて赤になります。
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+`.` が CSS だけに使われている (HTML には**使われていない**) 点に注意してください。その理由は、`.` 文字を使うと、CSS 言語にクラス属性のメンバーを一致させるよう指示できるためです。これは CSS で一般的に使われるパターンであり、1 つまたは複数の特殊文字によってセレクターのタイプが定義されます。
+
+`.my-class` クラスを持つ HTML 要素は、以下のようなクラスが他にいくつかある場合でも、上記の CSS ルールにマッチされます。
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+それは、CSS は、定義されたクラスそのものにマッチさせるのではなく、そのクラスを*持つ* `class` 属性を探すことが理由です。
+
+{% Aside %}クラス属性の値は、ほぼすべての値にすることができます。クラス名 (または ID) は、`.1element` のように、数字からはじめることはできませんので、注意が必要です。詳しくは、[仕様](https://www.w3.org/TR/CSS21/syndata.html#characters)をお読みください。{% endAside %}
+
+### ID セレクター
+
+`id` 属性を持つ HTML 要素は、ページ上でその ID 値を持つ唯一の要素でなくてはいけません。[ID セレクター](https://developer.mozilla.org/docs/Web/CSS/ID_selectors)を使って要素を選択する場合は、以下のようにします。
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+この CSS は、`rad` という `id` を持つ HTML 要素に青い境界線を適用します。以下のように記述します。
+
+```html
+<div id="rad"></div>
+```
+
+クラスセレクター `.` の場合と似ていますが、CSS に特定の `id` にマッチする要素を探す指示をするときは、`#` 文字の後に対象となる要素の名前を記述します。
+
+{% Aside %} ブラウザは、`id` のインスタンスを複数個検出しても、セレクターが一致する CSS ルールを適用します。 ただし、`id` 属性を持つ要素は、その id に対して一意の値を持つことが決められているため、1 つの要素に対して非常に具体的な CSS を記述していない限り、`id` セレクターを使ったスタイルは、再利用できなくなることを避ける意味でも、適用しない方が無難でしょう。{% endAside %}
+
+### 属性セレクター
+
+[属性セレクター](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors)を使用すれば、特定の HTML 属性を持つ要素や HTML 属性に特定の値を持つ要素を探すことができます。セレクターを (`[ ]`) で囲めば、特定の属性を探すよう CSS に指示することができます。
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+こちらの CSS は、`data-type` 属性の値が `primary` となっているすべての要素を探します。
+
+```html
+<div data-type="primary"></div>
+```
+
+`data-type` の特定の値を探さずに、値を問わず、何らかの属性を持つ要素を探すこともできます。
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+上の `<div>` 要素は 2 つともテキストの色が赤くなります。
+
+属性セレクターに `s` 演算子を追加すれば、ケース (大文字と小文字) を区別する属性セレクターを使用できます。
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+つまり、HTML 要素の `data-type` が `primary` ではなく、`Primary` であれば、テキストの色は赤くなりません。その逆のパターンとして、`i` 演算子を使用すれば、大文字と小文字は区別されません。
+
+ケース演算子の他にも、属性値内の文字列を部分的にマッチさせる演算子も使用できます。
+
+```css
+/* A href that contains "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* A href that starts with https */
+[href^='https'] {
+  color: green;
+}
+
+/* A href that ends with .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbOy' } %} <figcaption>このデモでは、属性セレクターの `$` 演算子が `href` 属性からファイルの種類を取得しています。これにより、取得したファイルの種類に応じて、疑似要素を使ってラベルにプレフィックスを付けることができます。</figcaption></figure>
+
+### グループ化セレクター
+
+セレクターは、複数の要素をマッチさせることができます。複数のセレクターをコンマで区切れば、1 つのグループにできます。
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+この例では、色の変更の適用範囲が `<strong>` 要素と `<em>` 要素の両方に拡張されています。また、`.my-class` という名前のクラスと `lang` 属性を持つ要素にも拡張されています。
+
+{% Assessment 'simple-selectors' %}
+
+## 疑似クラスと疑似要素
+
+CSS は、プラットフォームの特定の状態 (要素がホバーされたときなど) や、*要素内*の構造、要素の一部などにフォーカスする便利なセレクタータイプを提供します。
+
+### 疑似クラス
+
+HTML 要素は、操作中であったり、子要素の 1 つが一定の状態にあったりするため、さまざまな状態が発生します。
+
+たとえば、ユーザーは、マウスポインターを使って HTML 要素*または*子要素をホバーすることもできます。このような状況では、`:hover` 疑似クラスを使用します。
+
+```css
+/* Our link is hovered */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Sets all even paragraphs to have a different background */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+詳しくは、[pseudo-classes module (疑似クラスモジュール)](/learn/css/pseudo-classes)をご覧ください。
+
+### 疑似要素
+
+疑似要素は、プラットフォームの状態に応答する代わりに、CSS で新しい要素を挿入しているかのように機能するため、疑似クラスとは異なります。 また、疑似要素は、1 つのコロン (`:`) を使用する代わりに二重コロン (`::`) を使用するため、構文的にも異なります。
+
+{% Aside %}二重コロン (`::`) は、疑似要素と疑似クラスを区別するものですが、この区別は古いバージョンの CSS 仕様にはなかったため、ブラウザーは、IE8 といった古いブラウザーとの下位互換性を維持できるよう、`:before` や `:after` のように、元の疑似要素に対し単一のコロンを使用することをサポートしています。{% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+上のデモでリンクのラベルの前にファイルのタイプが付けられていることからも分かるように、コンテンツは `::before` 疑似要素を使用すれば**要素の先頭に**、`::after` 疑似要素を使用すれば**要素の終わりに**挿入できます。
+
+しかし、疑似要素は、コンテンツを挿入する以外にも、要素の特定の部分をターゲットにすることにも使用できます。たとえば、何らかのリストがある場合、`::marker` を使用すれば、リスト内の各箇条書や数字のスタイルを指定できます
+
+```css
+/* Your list will now either have red dots, or red numbers */
+li::marker {
+  color: red;
+}
+```
+
+また、`::selection` を使用すれば、ユーザーがハイライトしたコンテンツのスタイルを指定できます。
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+詳しくは、[module on pseudo-elements (疑似要素に関するモジュール)](/learn/css/pseudo-elements) をご覧ください。
+
+{% Assessment 'pseudo-selectors' %}
+
+## 複雑なセレクター
+
+これまでさまざまな種類のセレクターを紹介してきましたが、CSS を使った*より細かな制御*が必要になる場合があります。そこで便利なのが、複雑なセレクターです。
+
+次に紹介するセレクターを使うと、より細かな制御が可能になる一方で、下方にしかカスケードできない、つまり子要素しか選択できないことをこの時点で覚えておくとよいでしょう。上方にターゲットを合わせ、親要素を選択することはできません。カスケードの概要と仕組みについては、[後のセッション](/learn/css/the-cascade)でカバーします。
+
+### コンビネータ
+
+コンビネータは、2 つのセレクターの間に記述します。たとえば、`p > strong` というセレクターがあれば、`>` 文字がコンビネーターです。こうしたコンビネータを使用するセレクタは、ドキュメント内の位置に基づいてアイテムを選択するのに役立ちます。
+
+#### 子孫コンビネータ
+
+子孫コンビネータについて理解するには、まず最初に親要素と子要素について理解する必要があります。
+
+```html
+<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
+```
+
+テキストを含む `<p>` が親要素です。その `<p>` 要素の中に `<strong>` 要素があり、その中がコンテンツが太字になります。`<p>` 要素の中にあるため、子要素となります。
+
+子孫コンビネータを使用すると、子要素をターゲットにできます。その場合はスペース (` `) を使い、ブラウザに子要素を探す指示を出します。
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+上のスニペットでは、`<p>` 要素の子要素である `<strong>` 要素がすべて選択され、テキストは再帰的に青色にされます。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbGN' } %} <figcaption>子孫コンビネータは再帰的な働きをするため、各子要素に追加されたパディングが適用されるので、互い違いな効果が得られます。</figcaption></figure>
+
+その効果は、上の例で `.top div` を使用すると分かりやすく視覚化できるでしょう。その CSS ルールは、そうした`<div>` 要素に左パディングを追加します。コンビネータは再帰的に働くため、`.top` 内にあるすべての `<div>` 要素に同じパディングが適用されます。
+
+このデモの HTML ウィンドウを見れば、`.top` 要素に複数の `<div>` 子要素があり、それらの中にも `<div>` 子要素があるのが分かります。
+
+#### 隣接兄弟コンビネータ
+
+セレクターに「`+`」文字を使用すると、ある要素の直後に続く要素を探すことができます。
+
+{% Codepen { user: 'web-dot-dev', id: 'JjEPzwB' } %}
+
+スタックされた要素の間にスペースを追加したい場合、対象の要素が `.top` の子要素に隣接する**次の兄弟**であれば、隣接兄弟コンビネータを使用します。
+
+下のセレクターを使用すれば、`.top` のすべての子要素にマージンを追加できます。
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+このルールは、`.top` のすべての子要素を選択しているため、余分かつ不要なスペースが作成される可能性があるという問題点があります。**隣接兄弟コンビネータ** を **ユニバーサルセレクター** を組み合わせれば、スペースを追加する要素をコントロールできるだけでなく、**どの要素にも**スペースを適用することができます。そうすれば、`.top` どのような HTML 要素が表示されても、長期的に柔軟に対応できます。
+
+#### 後続兄弟コンビネータ
+
+後続コンビネータは、隣接兄弟セレクターと非常によく似ていまが「`+`」文字の代わりに「`~`」文字を使用します。同じ親を持つ隣接要素ではなく、同じ親を持つ別の要素の後に来る要素が対象になるという点で異なります。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELzPPX', height: 400 } %} <figcaption>純粋な CSS スイッチ要素を作成するには、後続セレクターを「:checked」疑似クラスと一緒に使用します。</figcaption></figure>
+
+この後続コンビネータは、わずかながら柔軟性があるため、カスタムスイッチに関連付けられているチェックボックスが `:checked` の状態にあるときは、そのカスタムスイッチの色を変更するといった上のサンプルのようなコンテキストでは便利です。
+
+#### 子コンビネータ
+
+子コンビネータ (別名: 直系子孫) を使用すると、コンビネータセレクタの使用に伴う再帰をより細かく制御できます。`>` 文字を使用すれば、コンビネータセレクターを**直接の子にのみ**適用できます。
+
+先ほど紹介した隣接兄弟セレクターの例について考えてみましょう。各**隣接兄弟**にスペースが追加された訳ですが、対象となっている要素がその子として**隣接兄弟要素**を持っている場合は、不要かつ余分なスペースができてしまう場合があります。
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZYMJL' } %}
+
+この問題を解決するには、**隣接兄弟セレクター** を `> * + *` のように、子コンビネーターを取り入れるかたちで変更します。これで、このルールは、`.top` の直接の子**だけに**適用されるようになります。
+
+{% Codepen { user: 'web-dot-dev', id: 'dyNbrEr' } %}
+
+### 複合セレクター
+
+セレクターを組み合われば、特定性と読みやすさを高めることができます。たとえば、`.my-class`  クラスを持つ `<a>` 要素をターゲットにするには、次のように記述します。
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+これは、すべてのリンクに赤色を適用するものではありません。むしろ、`.my-class` に赤色が適用されるのは、それが `<a>` 要素にある**場合に限ります**。詳しくは、[specificity module (特異性モジュール)](/learn/css/specificity) を参照してください。
+
+{% Assessment 'complex-selectors' %}
+
+## リソース
+
+- [CSS selectors reference (CSS セレクターのリファレンス)](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [}Interactive selectors game (インタラクティブセレクターゲーム)](https://flukeout.github.io/)
+- [Pseudo-class and pseudo-elements reference (疑似クラスおよび疑似要素のリファレンス)](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [A tool that translates CSS selectors into plain-english explainers (CSS セレクターをわかりやすい英語の説明に変換するツール)](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/ja/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/ja/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/ja/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/ja/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/ja/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/ja/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/ja/learn/index.md b/src/site/content/ja/learn/index.md
new file mode 100644
index 00000000000..2b35cb58e9c
--- /dev/null
+++ b/src/site/content/ja/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: 学び
+---
diff --git a/src/site/content/ja/learn/learn.11tydata.js b/src/site/content/ja/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/ja/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ja/media/index.md b/src/site/content/ja/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/ja/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/ja/metrics/cls/index.md b/src/site/content/ja/metrics/cls/index.md
new file mode 100644
index 00000000000..45c9321d4d1
--- /dev/null
+++ b/src/site/content/ja/metrics/cls/index.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Cumulative Layout Shift (CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-19
+description: この投稿では、Cumulative Layout Shift (累積レイアウト シフト数、CLS) という指標について紹介し、その測定方法に関する説明を行います。
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %}**2021 年 6 月 1 日:** CLS の実装が変更されました。変更の理由に関する詳細については、「[進化を続ける CLS 指標](/evolving-cls)」を参照してください。{% endAside %}
+
+{% Aside 'key-term' %}Cumulative Layout Shift (累積レイアウト シフト数、CLS) は、[視覚的な安定性](/user-centric-performance-metrics/#types-of-metrics)を測定するための重要なユーザーを中心とした指標です。これは、ユーザーが予期しないレイアウト シフトに遭遇する頻度の数値化に役立つ指標であり、CLS が低ければ低いほど、そのページが[快適](/user-centric-performance-metrics/#questions)であることが保証されます。{% endAside %}
+
+インターネットで記事を読んでいて、突然ページのレイアウトが変わってしまったことはありませんか？何の警告もなく文字が移動してしまい、自分がページ内のどこを読んでいたのか分からなくなってしまうことがあります。さらにひどい場合には、リンクやボタンをタップしようとしてから画面に指が触れるまでのほんの一瞬の間に "パッ" とリンクが移動してしまい、結局別のものをクリックしてしまう場合もあります。
+
+ほとんどの場合、こういったユーザー体験は単に煩わしいだけなのですが、中には実害をもたらしてしまう場合もあります。
+
+<figure>
+  <video autoplay controls loop muted poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png" width="658" height="510">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>レイアウトの不安定さがユーザーにネガティブな影響を及ぼす状況について説明しているスクリーンキャスト。</figcaption></figure>
+
+ページ コンテンツの予期しない移動は、一般的にリソースが非同期的に読み込まれたり、ページ上の既存のコンテンツの上側に DOM 要素が動的に追加されたりする場合に発生します。原因としては、サイズが明示されていない画像や動画、フォールバックとして用意されているフォントよりも大きく、または小さくレンダリングされるフォント、動的にサイズが変更されるサードパーティ製の広告やウィジェットなどが考えられます。
+
+この問題をさらに深刻なものにしているのは、開発段階でのサイトの機能が、実際にユーザーが体験するものとはかなり異なる場合が多いという点です。カスタマイズされたコンテンツやサードパーティ製のコンテンツは開発段階では本番環境と同じように動作しませんし、テスト画像については開発者のブラウザー キャッシュにすでに保存されている場合が多く、ローカル環境で実行される API コールも遅延に気付くことができないほど高速である場合が多いです。
+
+Cumulative Layout Shift (CLS) 指標は、実際のユーザーに対するこの現象の発生頻度を測定することにより、この問題への対処をサポートします。
+
+## CLS とは？
+
+CLS は、ページの表示中に発生した[予期しない](/cls/#expected-vs-unexpected-layout-shifts)レイアウトシフトごとに*レイアウト シフト スコア*の最大バーストを測定します。
+
+*レイアウト シフト*は、表示された要素がレンダリングされたフレームから次のフレームへと位置を変更する際に発生します。(個々の[レイアウト シフト スコア](#layout-shift-score)の計算方法に関する詳細については、以下を参照してください)。
+
+[*セッション ウィンドウ*](evolving-cls/#why-a-session-window)と呼ばれるレイアウト シフトのバーストとは、それぞれが独立した 1 回以上のレイアウト シフトが、1 回のシフトが 1 秒未満、ウィンドウ全体で最大 5 秒間の長さで急速に連続して発生することを指します。
+
+そして最大バーストとは、そのウィンドウで発生したすべてのレイアウト シフトを累積したスコアが最大となるセッション ウィンドウのことを指します。
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>セッション ウィンドウの例。青いバーは、個々のレイアウト シフトのスコアを表しています。</figcaption></figure>
+
+{% Aside 'caution' %}以前の CLS は、ページの表示期間全体で発生した*個々のレイアウト シフト スコアすべて*の合計値を測定していました。オリジナルの実装に対応可能なベンチマーク機能を現在も提供しているツールを確認するには、「[進化を続ける Web ツールでの Cumulative Layout Shift](/cls-web-tooling)」を参照してください。{% endAside %}
+
+### CLS における良いスコアとは？
+
+良好なユーザー体験を提供するために、サイトは CLS スコアが **0.1** 以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="良好なCLS値は0.1未満、不良な値は0.25を超え、その間の値は改善が必要", width="400", height="300" %}
+</picture>
+
+{% Aside %}この推奨事項の根拠となる調査および方法論に関する詳細については、「[Core Web Vitals 指標のしきい値の定義](/defining-core-web-vitals-thresholds/)」を参照してください。{% endAside %}
+
+## レイアウト シフトの詳細
+
+レイアウト シフトは [Layout Instability API](https://github.com/WICG/layout-instability) によって定義されており、ビューポート内に表示されている要素が 2 つのフレーム間で開始位置 (たとえば、デフォルトの [writing-mode](https://developer.mozilla.org/docs/Web/CSS/writing-mode) での top と left) を変更すると、`layout-shift` エントリがレポートされます。こういった要素は、*不安定な要素*としてみなされます。
+
+レイアウト シフトは、既存の要素がその開始位置を変更する場合にのみ発生することにご注意ください。新しい要素が DOM に追加されたり、既存の要素のサイズが変更されたりしても、その変更が表示されている他の要素の開始位置の変更を引き起こさない限りはレイアウト シフトとしてカウントされません。
+
+### レイアウト シフト スコア
+
+*レイアウト シフト スコア*を計算するために、ブラウザーはビューポートのサイズと、2 つのレンダリング フレーム間におけるビューポート内での*不安定な要素*の移動を確認します。レイアウト シフト スコアは、その移動の 2 つの尺度である*インパクト係数* (Impact Fraction) と*距離係数* (Distance Fraction) の積です (いずれも以下のように定義されます)。
+
+```text
+layout shift score = impact fraction * distance fraction
+```
+
+### インパクト係数
+
+[インパクト係数](https://github.com/WICG/layout-instability#Impact-Fraction)は、*不安定な要素*が 2 つのフレーム間におけるビューポート領域にどのような影響を与えるかを測定します。
+
+前のフレーム*と*現在のフレームにおけるすべての*不安定な要素*の表示領域の合計が、ビューポートの総領域の一部として、現在のフレームの*インパクト係数*となります。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="*不安定な要素*が 1 つ含まれているインパクト係数の例", width="800", height="600", linkTo=true %}
+
+上の画像には、1 つのフレームでビューポートの半分を占めている要素があります。そして次のフレームでは、その要素はビューポートの高さの 25% 分下方向に移動しています。赤い点線で囲まれている長方形は両方のフレームにおける要素の表示領域の合計を示しており、この場合にはビューポート全体の 75% となるため、その*インパクト係数*は `0.75` となります。
+
+### 距離係数
+
+レイアウト シフト スコアを算出するための式に含まれているもう一方の構成要素は、不安定な要素がビューポートと比較してどの程度移動したかを測定します。*距離係数*は、フレーム内での*不安定な要素*の最大の移動距離 (水平方向または垂直方向のいずれか) をビューポートの最大サイズ (幅または高さのうち大きい方のいずれか) で割ったものです。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="*不安定な要素*が 1 つ含まれている距離係数の例", width="800", height="600", linkTo=true %}
+
+上の例では、ビューポートの最大サイズは高さであり、不安定な要素はビューポートの高さの 25% 分移動したことになるため、*距離係数*は 0.25 となります。
+
+つまりこの例では、*インパクト係数*が `0.75`、*距離係数*が `0.25` となるため、*レイアウト シフト スコア*は `0.75 x 0.25 = 0.1875` となります。
+
+{% Aside %}当初は、レイアウト シフト スコアは*インパクト係数*のみに基づいて計算されていました。この*距離係数*は、サイズの大きな要素がわずかな距離のみ移動する場合に、過度にペナルティを課してしまうことを避けるために導入されました。{% endAside %}
+
+次の例では、既存の要素へのコンテンツの追加がレイアウト シフト スコアにどのような影響を及ぼすかについて説明します。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="安定した要素、*不安定な要素*、ビューポート クリッピングが含まれるレイアウト シフトの例", width="800", height="600", linkTo=true %}
+
+"Click Me!" (クリックしてね！) ボタンが黒色のテキストを含む灰色のボックスの下に追加され、白色のテキストを含む緑色のボックスを下方向に押し下げました (ボックスの一部がビューポートの外に出てしまいました)。
+
+この例では、灰色のボックスのサイズは変更されていますが、開始位置は変更されていないため、これは*不安定な要素*ではありません。
+
+"Click Me!" ボタンはそれまで DOM に存在していなかったため、このボタンの開始位置についても変更はありません。
+
+緑色のボックスの開始位置は変更されたものの、一部がビューポートから外に出ています。*インパクト係数*の計算には、非表示領域は考慮されません。両方のフレームでの緑色のボックスの表示領域の合計 (赤い点線で囲まれている長方形で示されています) は、最初のフレームでの緑色のボックスの領域と同じで、ビューポートの 50% になります。この場合の*インパクト係数*は、`0.5` です。
+
+*距離係数*は、紫色の矢印で示されています。緑色のボックスはビューポートの約 14% 分下方向に移動しているため、*距離分数*は `0.14` となります。
+
+レイアウト シフト スコアは、`0.5 x 0.14 = 0.07` です。
+
+次の最後の例では、*不安定な要素*が複数ある場合を示しています。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="複数の安定した要素と*不安定な要素*が含まれるレイアウト シフトの例", width="800", height="600", linkTo=true %}
+
+上の画像にある 1 つ目のフレームでは、動物に関する API リクエストの 4 件の結果がアルファベット順に並べ替えられています。2 つ目のフレームでは、並べ替えられたリストに結果がさらに追加されています。
+
+リストの一番上にある項目 ("Cat") は、フレーム間で開始位置が変更されていないため、安定した要素であると言えます。同様にリストに追加された新しいアイテムも、それまで DOM に存在していなかったため、開始位置に変更はありません。しかしながら、"Dog"、"Horse"、"Zebra" とラベル付けされている項目はすべて開始位置が変更されているため、これらは*不安定な要素*となります。
+
+赤い点線で囲まれている長方形は、これら 3 つの*不安定な要素*の前後の領域の合計を示しており、この場合はビューポートの領域の約 38% になります (この場合の*インパクト係数*は `0.38` です)。
+
+3 つの矢印は、*不安定な要素*がそれぞれの開始位置から移動した距離を示しています。そして、青い矢印で示されている "Zebra" 要素がビューポートの高さの約 30% と最も大きく移動しています。よって、この例での*距離係数*は `0.3` となります。
+
+レイアウト シフト スコアは、`0.38 x 0.3 = 0.114` です。
+
+### 意図的に行われるレイアウト シフトと予期しないレイアウト シフト
+
+すべてのレイアウト シフトが問題となるわけではありません。実際に、多くの動的な Web アプリケーションにおいてページ上に存在する要素の開始位置の頻繁な変更が行われています。
+
+#### ユーザーの操作によるレイアウト シフト
+
+レイアウト シフトは、ユーザーがその発生を予期していない場合にのみ問題となります。その一方で、ユーザーによる操作 (リンクのクリック、ボタンの押下、検索ボックスへの入力など) に応じて発生するレイアウト シフトについては、通常その関係性をユーザーが明確に理解できるようにインタラクションの近くで発生させている限りは問題ありません。
+
+たとえば、ユーザーの操作によって完了するまでに時間がかかるネットワーク リクエストがトリガーされた場合には、リクエストの完了時に不快なレイアウト シフトが発生してしまうことを避けるためにすぐにスペースを作成し、そこに読み込みインジケーターを表示させるのが最善の方法です。ユーザーが読み込み中であることに気付けなかったり、リソースの準備がいつ完了するのか分からなかったりすると、ユーザーが読み込みの待機中に何か別のものをクリックしようとしてしまうかもしれませんし、その結果としてページから離脱してしまう可能性もあります。
+
+ユーザーの入力から 500 ミリ秒以内に発生するレイアウト シフトには [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput) フラグが設定されるため、それらを計算から除外することができます。
+
+{% Aside 'caution' %}`hadRecentInput` フラグは、個別の入力イベント (タップ、クリック、キー押下など) に対してのみ true になります。連続的なインタラクション (スクロール、ドラッグ、ピンチによるズーム ジェスチャーなど) は "最近の入力" (Recent Input、500 ミリ秒以内に応答が発生する入力) とはみなされません。詳細はについては、「[レイアウトの不安定性の仕様](https://github.com/WICG/layout-instability#recent-input-exclusion)」を参照してください。{% endAside %}
+
+#### アニメーションとトランジション
+
+アニメーションやトランジションは、上手に使用することでユーザーを驚かせることなくページ上のコンテンツを更新することができる優れた手法です。ページ上でコンテンツが突然何の前触れもなく移動してしまえば、ユーザーはほとんどの場合に悪印象を抱いてしまいます。しかしながら、ある位置から目的の位置へと少しづつ自然に移動するようなコンテンツは、ユーザーにとっては何が起こっているのかを理解しやすいですし、状態が変化している間にユーザーを誘導することもできます。
+
+CSS の [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) プロパティを使用すれば、レイアウト シフトを発生させることなく要素をアニメーション化することができます。
+
+- `height` プロパティや `width` プロパティを変更するのではなく、`transform: scale()` を使用します。
+- 要素を移動させる場合には、`top`、`right`、`bottom`、`left` の各プロパティを変更するのではなく、`transform: translate()` を使用します。
+
+## CLS の測定方法
+
+CLS は[ラボ環境](/user-centric-performance-metrics/#in-the-lab)または[実際のユーザー環境](/user-centric-performance-metrics/#in-the-field)で測定が可能で、以下のツールが使用できます。
+
+{% Aside 'caution' %}通常ラボ測定を実施するためのツールは人工的な環境でページの読み込みを行うため、ページの読み込み中に発生するレイアウト シフトしかレポートできません。そのため、ラボ測定を実施するためのツールが指定されたページについてレポートする際の CLS の値は、ユーザーが実際の環境で体験する値よりも小さくなる可能性があります。{% endAside %}
+
+### フィールド測定を実施するためのツール
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)
+
+### ラボ測定を実施するためのツール
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### JavaScript を使用して CLS を測定する
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+JavaScript を使用した CLS の測定には、[Layout Instability API](https://github.com/WICG/layout-instability) を使用することができます。以下の例では、予期しない `layout-shift` エントリをリッスンしてセッションごとに分類し、変更が発生するたびにセッションの最大値をログとして記録する [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) の作成方法を示しています。
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // 直近のユーザーの入力がないレイアウト シフトのみをカウントします。
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // エントリが前のエントリの発生から 1 秒以内に発生していて、
+      // かつ同一セッション内の最初のエントリの発生から 5 秒以内に発生している場合には、
+      // そのエントリを現在のセッションに含めます。そうでない場合には、新しいセッションを開始します。
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // 現在のセッションの値が現在の CLS の値よりも大きい場合には、
+      // CLS とそれに寄与しているエントリを更新します。
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // 更新された値 (およびそのエントリ) をコンソールにログとして記録します。
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+このコードは CLS を計算してログとして記録するための基本的な方法を示していますが、[Chrome User Experience Report](https://developer.chrome.com/docs/crux/) (CrUX) での測定結果と一致するように CLS を正確に測定する方法はより複雑です。詳細については、以下を参照してください。
+
+{% endAside %}
+
+ほとんどの場合、ページがアンロードされている時点での CLS 値がそのページの最終的な CLS 値となるのですが、重要な例外もいくつか存在します。
+
+次のセクションでは、API がレポートする内容と、指標の計算方法の違いについて説明します。
+
+#### 指標と API の違い
+
+- ページがバックグラウンドで読み込まれた場合や、ブラウザーがコンテンツのいずれかを描画する前にバックグラウンドに移行した場合には、CLS 値をレポートしてはいけません。
+- ページが [Back/Forward Cache](/bfcache/#impact-on-core-web-vitals) から復元された場合、これはユーザーにとって異なるページ訪問となるため、その CLS 値はゼロへとリセットされる必要があります。
+- API では iframe 内で発生したシフトについての `layout-shift` エントリはレポートされませんが、CLS を正確に測定するためにはこれらのエントリも考慮に入れる必要があります。サブフレームが[集約](https://github.com/WICG/layout-instability#cumulative-scores)のために API を使用してその親フレームに `layout-shift` エントリをレポートすることができます。
+
+これらの例外に加えて、CLS はページの表示期間全体を測定するため、より複雑さが増しています。
+
+- ユーザーは、1 つのタブを (数日間、数週間、数か月など) *かなりの*長期間に渡って開き続ける場合があります。実際に、タブをまったく閉じないユーザーが存在する可能性もあります。
+- モバイル OS では、通常ブラウザーはバックグラウンド タブについてはページ アンロード コールバックを実行しないため、"最終的な" 値のレポートが困難になっています。
+
+こういったケースに対処するためには、ページがアンロードされるタイミングに加えて、バックグラウンドに移行するタイミングでも CLS をレポートする必要があります ([`visibilitychange` イベント](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange)は、これらのシナリオの両方をカバーしています)。このデータを受け取ったアナリティクス システムは、最終的な CLS 値をバックエンドで計算する必要があります。
+
+開発者がこれらのケースをすべて記憶して対処する必要はありません。[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)を使用すれば、上記すべてが考慮された状態で CLS の測定を行うことができます。
+
+```js
+import {onCLS} from 'web-vitals';
+
+// CLS のレポートが必要なすべての状況で
+// CLS を測定し、ログとして記録します。
+onCLS(console.log);
+```
+
+JavaScript を使用して CLS を測定する方法に関する詳細な例については、[`onCLS()` のソース コード](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts)を参照してください。
+
+{% Aside %}場合によっては (クロスオリジン iframe など)、JavaScript を使用して CLS を測定することはできません。詳細については、`web-vitals` ライブラリの「[制限事項](https://github.com/GoogleChrome/web-vitals#limitations)」セクションを参照してください。{% endAside %}
+
+## CLS の改善方法
+
+以下に挙げるいくつかの原則に従うことにより、ほとんどの Web サイトで予期しないレイアウト シフトの発生を回避することができます。
+
+- **画像要素や動画要素に必ず size 属性を付ける手法や、[CSS を駆使したアスペクト比対応ボックス](https://css-tricks.com/aspect-ratio-boxes/)などの手法を用いて必要なスペースを確保する。** こういったアプローチを取ることによって、ブラウザーが画像の読み込み中に適切なサイズのスペースをドキュメント内に確保することができます。なお、機能ポリシーをサポートしているブラウザーであれば、[unsized-media 機能ポリシー](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md)を使用してこの動作を強制することも可能です。
+- **ユーザーの操作に応じる場合を除き、既存のコンテンツの上側にコンテンツを挿入しない。** こうしておくことで、レイアウト シフトが発生したとしても、その影響を想定内に留めておくことができるようになります。
+- **レイアウト変更のトリガーとなるプロパティを利用したアニメーションよりも、transform アニメーションを優先する。** ある状態から別の状態へのコンテキストや連続性を提供する方法でトランジションをアニメーション化しましょう。
+
+CLS の改善方法の詳細については、「[CLS を最適化する](/optimize-cls/)」および「[レイアウト シフトのデバッグ](/debug-layout-shifts)」を参照してください。
+
+## その他のリソース
+
+- [レイアウト シフトを最小限に抑える方法](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)に関する Google パブリッシャー タグのガイダンス
+- [Annie Sullivan](https://anniesullie.com/) と [Steve Kobes](https://kobes.ca/) による「[Cumulative Layout Shift を理解する](https://youtu.be/zIJuY-JCjqw)」[#PerfMatters](https://perfmattersconf.com/) より (2020)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ja/metrics/custom-metrics/index.md b/src/site/content/ja/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..80ac2ac6351
--- /dev/null
+++ b/src/site/content/ja/metrics/custom-metrics/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: カスタムメトリック
+authors:
+  - philipwalton
+date: 2019-11-08
+description: |2-
+
+  カスタムメトリックを使用すると、サイト固有の体験を構成する各要素を評価、最適化できます。
+tags:
+  - performance
+  - metrics
+---
+
+特定のウェブサイトで普遍的に測定できる[user-centric metrics  (ユーザー中心のメトリック)](/user-centric-performance-metrics/)を持つことには多くの価値があります。これらのメトリックを活用すると、以下のことを行えます。
+
+- ユーザーの全面的なウェブ体験を理解できる
+- 自分のサイトを競合他社のサイトと簡単に比較できる
+- カスタムコードを記述せずに、分析ツールで有用かつ実用的なデータを追跡できる
+
+ユニバーサルメトリクスは、便利なベースラインですが、多くの場合、特定のサイトの全体的なエクスペリエンスを把握するには、こうしたメトリクス*以外のメトリクス*も評価しなくてはいけません。
+
+カスタムメトリックを使用すると、以下のような、自分のサイトだけに該当する可能性があるサイトエクスペリエンスの要素を評価できます。
+
+- シングルページアプリ（SPA）がある「ページ」から別の「ページ」に移行するのにかかる時間
+- ログインしたユーザーのためにデータベースからフェッチされたデータをページに表示するのにかかる時間
+- サーバー側でレンダリングされた（SSR）アプリが[ハイドレイト](https://addyosmani.com/blog/rehydration/)するのにかかる時間
+- リピーターによってロードされたリソースのキャッシュヒット率
+- ゲーム内のクリックイベントまたはキーボードイベントのイベントレイテンシ
+
+## カスタムメトリックを測定するためのAPI
+
+これまで、ウェブ開発者は、パフォーマンスを測定するための低レベルAPIをあまり持っていなかったため、サイトのパフォーマンスを測定する場合はハッキングに頼らざるを得ませんでした。
+
+たとえば、`requestAnimationFrame`ループを実行し、各フレーム間のデルタを計算することで、JavaScriptタスクの実行時間が長いためにメインスレッドがブロックされているかどうかを判断できます。デルタがディスプレイのフレームレートよりも大幅に長い場合は、長いタスクとして報告できます。ただし、このようなハッキングは、実際にはパフォーマンス自体に影響を与えるため（たとえば、バッテリーの消耗など）、お勧めできません。
+
+効果的にパフォーマンスを測定するための最初のルールは、パフォーマンス測定手法自体がパフォーマンスの問題を引き起こしていないことを確認することです。したがい、サイトで測定するカスタムメトリックについては、可能であれば次のAPIのいずれかを使用することをお勧めします。
+
+### パフォーマンスオブザーバー
+
+PerformanceObserver APIを理解することは、カスタムパフォーマンスメトリックを作成するために重要です。理由は、それがこの記事で説明する他のすべてのパフォーマンスAPIからデータを取得するメカニズムであるためです。
+
+`PerformanceObserver`を使用すると、パフォーマンス関連のイベントを受動的にサブスクライブできます。つまり、これらのAPIは通常、[アイドル期間中](https://w3c.github.io/requestidlecallback/#idle-periods)にコールバックが発生するため、ページのパフォーマンスに干渉しません。
+
+`PerformanceObserver`を作成するには、新しいパフォーマンスエントリがディスパッチされるたびに実行されるコールバックを渡します。そして、[`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe)メソッドを介してリッスンするエントリのタイプをオブザーバーに知らせます。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+以下のセクションでは、監視に使用できるさまざまなエントリタイプをすべて挙げていますが、新しいブラウザでは、静的な[`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute)プロパティを使えば、利用できるエントリタイプを調べることができます。
+
+{% Aside %}`observe()`メソッドに渡されるオブジェクトは`entryTypes`配列を指定することもできます（同じオブザーバーを介して複数のエントリタイプを監視するため）。`entryTypes`を指定するのは、数多くのブラウザーでサポートされている古いオプションですが、`type`を使用すると、エントリ固有の監視構成 (次に説明する`buffered`など) を追加で指定できるため、今ではそれが優先されるようになりました。{% endAside %}
+
+#### すでに発生したエントリを監視する
+
+デフォルトでは、`PerformanceObserver`オブジェクトは、エントリが発生したときにのみ監視できます。これは、パフォーマンス分析コードを遅延ロードする場合（優先度の高いリソースをブロックしないため）に問題になる可能性があります。
+
+(発生した後の) 履歴エントリを取得するには、`observe()`を呼び出すときに、`buffered`フラグを`true`に設定します。`PerformanceObserver`コールバックが最初に呼び出されるときに、ブラウザは、自身の[performance entry buffer](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer)の履歴エントリを含みます。
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %}メモリの問題を回避できるよう、パフォーマンスエントリバッファには制限が設けられています。たいていの一般的なページの読み込みでは、バッファがいっぱいになり、エントリが失われる可能性はほとんどありません。{% endAside %}
+
+#### 避けるべきレガシーパフォーマンスAPI
+
+Performance Observer APIが生まれる前、開発者は[`performance`](https://w3c.github.io/performance-timeline/)オブジェクトで定義された次の3つのメソッドを使用してパフォーマンスエントリにアクセスすることができました。
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+これらのAPIは今もサポートされていますが、新しいエントリが発信されるタイミングをリッスンできないため、使用することはお勧めていません。さらに、多くの新しいAPI（Long Tasksなど）は、`performance`を介して公開されません。`PerformanceObserver`を介してのみ公開されます。
+
+Internet Explorerとの互換性が必要でない限りは、コードにこうしたメソッドを使うことは避け、今後は`PerformanceObserver`を使う方が無難でしょう。
+
+### User Timing API
+
+[User Timing API](https://w3c.github.io/user-timing/)は、時間ベースのメトリックを測定するためのAPIです。これにより、特定の時点を任意にマークし、後からそれらのマークの間の期間を測定することができます。
+
+```js
+// Record the time immediately before running a task.
+performance.mark('myTask:start');
+await doMyTask();
+// Record the time immediately after running a task.
+performance.mark('myTask:end');
+
+// Measure the delta between the start and end of the task
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+`Date.now()`や`performance.now()`といったAPIは、同様の機能を提供しますが、User Timing APIを使用することには、パフォーマンスツールとうまく統合できるという利点があります。たとえば、Chrome DevToolsは[[パフォーマンス]パネルにユーザータイミングの測定値](https://developers.google.com/web/updates/2018/04/devtools#tabs)を視覚化します。また、多くの分析プロバイダーは、ユーザーが行った測定値を自動的に追跡し、期間データを分析バックエンドに送信します。
+
+ユーザータイミングの測定値をレポートするには、 [PerformanceObserver](#performance-observer)を使って、`measure`型のエントリを監視する登録を行います。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `measure` entries to be dispatched.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Long Tasks API
+
+[Long Tasks API](https://w3c.github.io/longtasks/)は、ブラウザのメインスレッドがフレームレートや入力遅延に影響を与えるのに十分な時間がブロックされているかどうかを知るのに役立ちます。現在、このAPIは、50ミリ秒 (ms) を超えて実行されるすべてのタスクを報告します。
+
+高価なコードを実行する（または大きなスクリプトをロードして実行する）必要があるときは、そのコードがメインスレッドをブロックしたかどうかを追跡すると便利です。実際、多くの高レベルのメトリックは、Long Tasks APIそのものを基に構築されています(such as [Time to Interactive (TTI)](/tti/) や [Total Blocking Time (TBT)など。](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/))
+
+長いタスクがいつ発生するかを判断するには、 [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)を使って、`longtask`型のエントリを監視する登録を行います。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `longtask` entries to be dispatched.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Element Timing API
+
+[Largest Contentful Paint（LCP）](/lcp/)メトリックは、最大の画像またはテキストブロックがいつ画面にペイントされたかを知るのに役立ちますが、場合によっては、別の要素のレンダリング時間を測定する必要があります。
+
+このような場合は、 [Element TimingAPIを](https://wicg.github.io/element-timing/)使用できます。実際、Largest Contentful PaintAPIはElementTiming APIを基に構築されており、最大のcontentful要素に関する自動レポートを追加しますが、別の要素に`elementtiming`属性を明示的に追加し、PerformanceObserverを登録して要素エントリの型を監視すれば、その別の要素についても報告できます。
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">This is text I care about.</p>
+...
+<script>
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `element` entries to be dispatched.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} Largest Contentful Paintで考慮される要素のタイプは、Element TimingAPIを使って観察できるものと同じです。これらのいずれの型でもない要素に`elementtiming`属性を追加しても、その属性は無視されます。{% endAside %}
+
+### Event Timing API
+
+[First Input Delay（FID）](/fid/)メトリックは、ユーザーが最初にページを操作してから、ブラウザーがその操作に応答してイベントハンドラーの処理を実際に開始できるようになるまでの時間を測定します。ただし、場合によっては、イベント処理にかかる時間と、次のフレームをレンダリングできるようになるまでの時間を測定することも役立つ場合があります。
+
+[こうした測定は、FIDの測定に使用される Event Timing API](https://wicg.github.io/event-timing/) を使用すれば可能になります。以下のようなタイムスタンプがイベントライフサイクルにたくさん公開されるためです。
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime) ：ブラウザがイベントを受信した時刻。
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart) ：ブラウザがイベントのイベントハンドラーの処理を開始できる時間。
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend) ：ブラウザがこのイベントのイベントハンドラから開始されたすべての同期コードの実行を終了する時間。
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart) ：ブラウザがイベントを受信してから、イベントハンドラから開始されたすべての同期コードの実行が終了した後、次のフレームを描画できるようになるまでの時間（セキュリティ上の理由から8ミリ秒に<br>四捨五入されます）。
+
+次の例は、これらの値を使用してカスタム測定値を作成する方法を示しています。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Measure First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Measure the time it takes to run all event handlers
+    // Note: this does not include work scheduled asynchronously using
+    // methods like `requestAnimationFrame()` or `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Measure the entire duration of the event, from when input is received by
+    // the browser until the next frame can be painted after processing all
+    // event handlers.
+    // Note: similar to above, this value does not include work scheduled
+    // asynchronously using `requestAnimationFrame()` or `setTimeout()`.
+    // And for security reasons, this value is rounded to the nearest 8ms.
+    const firstInputDuration = firstInput.duration;
+
+    // Log these values the console.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Resource Timing API
+
+[Resource Timing API](https://w3c.github.io/resource-timing/)は、特定のページのリソースが読み込まれた方法に関する詳しいインサイトを開発者に提供します。APIの名前からは分かりませんが、提供される情報は、タイミングデータだけではありません (もちろん[それも多く含まれています](https://w3c.github.io/resource-timing/#processing-model))。以下のようなデータにもアクセスできます。
+
+- [initiatorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype): リソースがフェッチされる方法 (`<script>`または`<link>`タグ、または`fetch()`タグからフェッチ)
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol): `h2`や`quic`などのリソースをフェッチするために使用されるプロトコル
+- [encodingBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize) / [decodeBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize) ]: エンコードまたはデコードされた形式のリソースのサイズ (両方)
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize): ネットワークで実際に転送されたリソースのサイズ。リソースがキャッシュを使って満たされる場合、この値は`encodedBodySize`よりも大分小さくなる可能性があり、場合によってはゼロになる可能性があります（キャッシュの再検証が必要ない場合）。
+
+リソースタイミングエントリの`transferSize`プロパティを使用して、*cache hit rate (キャッシュヒット率)*メトリックまたは*total cached resource size (キャッシュされたリソースサイズ合計)*メトリックの合計を測定できます。これは、リソースキャッシュ戦略がリピーター (サイトに再度アクセスするユーザー) に対するパフォーマンスへの影響を理解するのに役立ちます。
+
+次の例では、ページによって要求されたすべてのリソースをログに記録し、各リソースがキャッシュを介して実行されたかどうかを示します。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Start listening for `resource` entries to be dispatched.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Navigation Timing API
+
+[Navigation Timing API](https://w3c.github.io/navigation-timing/)はResourceTiming API[に似ていますが、報告するのはナビゲーション要求のみです。`navigation`エントリ型も`resource`エントリ型に似ていますが、ナビゲーションリクエストだけに固有の](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests)[別の情報](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming)が含まれます (`DOMContentLoaded` イベントや `load` イベントが発生する場合など)。
+
+[多くの開発者がサーバーの応答時間 (](https://en.wikipedia.org/wiki/Time_to_first_byte)[Time to First Byte](https://en.wikipedia.org/wiki/Time_to_first_byte)) を理解するために追跡するメトリックの 1 つが、Navigation Timing API で利用できます (具体的にはそのエントリの`responseStart`タイムスタンプ)。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+サービスワーカーを使用する開発者が気にするもう 1 つのメトリックに、ナビゲーションリクエストに対するサーバーワーカーの起動時間があります。これは、ブラウザーがフェッチイベントのインターセプトを開始する前にサーバーワーカースレッドを開始するのにかかる時間です。
+
+特定のナビゲーションリクエストに対するサーバーワーカーの起動時間は、`entry.responseStart` と `entry.workerStart` の間のデルタによって判断できます。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Server Timing API
+
+[Server Timing API を](https://w3c.github.io/server-timing/)使用すると、応答ヘッダーを使ってリクエスト固有のタイミングデータをサーバーからブラウザーに渡すことができます。たとえば、データベース内の特定のリクエストに関するデータの検索にかかった時間を示すことができます。これは、サーバーの速度低下によって引き起こされるパフォーマンスの問題をデバッグするのに役立ちます。
+
+サードパーティの分析プロバイダーを使用する開発者にとって、Server Timing API は、こうした分析ツールによって測定される可能性のある別のビジネスメトリックにサーバーパフォーマンスのデータを相関させる唯一の手段となっています。
+
+レスポンスにサーバータイミングデータを指定するには、 `Server-Timing`応答ヘッダーを使用できます。以下はその一例です。
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+次に、このデータは、ページから、ResourceTiming API および NavigationTiming API の `resource` または `navigation` エントリの両方で読み取ることができます。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Logs all server timing data for this response
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
diff --git a/src/site/content/ja/metrics/fcp/index.md b/src/site/content/ja/metrics/fcp/index.md
new file mode 100644
index 00000000000..78b34217b03
--- /dev/null
+++ b/src/site/content/ja/metrics/fcp/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: First Contentful Paint (FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-19
+description: この投稿では、First Contentful Paint (視覚コンテンツの初期表示時間、FCP) という指標について紹介し、その測定方法に関する説明を行います。
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}First Contentful Paint (視覚コンテンツの初期表示時間、FCP) は、[知覚される読み込み速度](/user-centric-performance-metrics/#types-of-metrics)を測定するための重要なユーザーを中心とした指標です。これは、FCP がページの読み込みタイムラインにおいて最初にコンテンツが読み込まれたと思われる時点 (ユーザーが画面上に何らかのコンテンツが表示されたことを確認するタイミング) を示すためです。FCP を高速にすることで、そのページが[動作している](/user-centric-performance-metrics/#questions)ことをユーザーに確信させることができるようになります。{% endAside %}
+
+## FCP とは？
+
+First Contentful Paint (FCP) 指標は、ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定します。この指標における "コンテンツ" は、テキスト、画像 (背景画像を含む)、`<svg>` 要素、白以外の `<canvas>` 要素のことを指しています。
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="google.com の FCP タイムライン", width="800", height="311", linkTo=true %}
+
+上の読み込みタイムラインでは、FCP は 2 フレーム目で発生しています。これが、最初のテキストや画像要素が画面にレンダリングされるタイミングです。
+
+コンテンツの一部がレンダリングされたものの、すべてのコンテンツがレンダリングされたわけではないことがわかります。これは、*First* Contentful Paint (FCP) と、ページのメイン コンテンツの読み込み完了タイミングの測定が目的となる *[Largest Contentful Paint (LCP)](/lcp/)* の重要な違いです。
+
+<picture>
+  <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="良好なFCP値は1.8秒以下、不良な値は3.0秒を超え、その間の値は改善が必要", width="400", height="300" %}
+</picture>
+
+### FCP における良いスコアとは？
+
+良好なユーザー体験を提供するために、サイトは First Contentful Paint が **1.8 秒**以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。
+
+## FCP の測定方法
+
+FCP は[ラボ環境](/user-centric-performance-metrics/#in-the-lab)または[実際のユーザー環境](/user-centric-performance-metrics/#in-the-field)で測定が可能で、以下のツールが使用できます。
+
+### フィールド測定を実施するためのツール
+
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [Search Console (Core Web Vitals Report)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)
+
+### ラボ測定を実施するためのツール
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+
+### JavaScript を使用して FCP を測定する
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+JavaScript を使用した FCP の測定には、[Paint Timing API](https://w3c.github.io/paint-timing/) を使用することができます。以下の例では、`first-contentful-paint` という名前の `paint` エントリをリッスンし、コンソールにログを記録する [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) の作成方法を示しています。
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+このコードは `first-contentful-paint` エントリをコンソールにログとして記録する方法を示していますが、JavaScript を使用して FCP を測定する方法はより複雑です。詳細については、以下を参照してください。
+
+{% endAside %}
+
+上記の例では、ログに記録されている `first-contentful-paint` エントリが、最初の視覚コンテンツ要素が描画されるタイミングを教えてくれます。ただし、このエントリが FCP の測定に有効とはならない場合もあります。
+
+次のセクションでは、API がレポートする内容と、指標の計算方法の違いについて説明します。
+
+#### 指標と API の違い
+
+- API はバックグラウンド タブで読み込まれているページに対しても `first-contentful-paint` エントリをディスパッチしますが、FCP を計算する場合には、そういったページは無視する必要があります (最初の描画タイミングが考慮されるのは、ページがずっとフォアグラウンドにあった場合のみです)。
+- API は、ページが [Back/Forward Cache](/bfcache/#impact-on-core-web-vitals) から復元された場合の `first-contentful-paint` エントリはレポートしませんが、これらはユーザーにとっては別々のページ訪問となるため、こういったケースにおいても FCP は測定される必要があります。
+- API では [クロス オリジンの iframe の描画タイミングはレポートされない場合があります](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes)が、FCP を正確に測定するためにはすべてのフレームを考慮に入れる必要があります。サブフレームが集約のために API を使用してその親フレームに描画タイミングをレポートすることができます。
+
+こういった微妙な違いをすべて記憶していなくても、[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)を使用して FCP を測定すれば、これらの違いを (可能な限り) 処理してくれます。
+
+```js
+import {onFCP} from 'web-vitals';
+
+// 実行可能となった時点ですぐに FCP の測定やログ記録を実行します。
+onFCP(console.log);
+```
+
+JavaScript を使用して FCP を測定する方法に関する詳細な例については、[`onFCP()` のソース コード](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts)を参照してください。
+
+{% Aside %}場合によっては (クロスオリジン iframe など)、JavaScript を使用して FCP を測定することはできません。詳細については、`web-vitals` ライブラリの「[制限事項](https://github.com/GoogleChrome/web-vitals#limitations)」セクションを参照してください。{% endAside %}
+
+## FCP の改善方法
+
+特定のサイトについて FCP の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な [Opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) (改善機会) や [Diagnostics](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics) (診断) に注目します。
+
+FCP の (あらゆるサイトに共通する) 一般的な改善方法については、以下のパフォーマンス ガイドを参照してください。
+
+- [レンダリングをブロックするリソースを排除する](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [CSS を圧縮する](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [使用されていない CSS を削除する](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [必要なオリジンに事前接続する](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [サーバーの応答時間 (TTFB) を短縮する](/ttfb/)
+- [複数のページ リダイレクトを避ける](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [キー リクエストを事前に読み込む](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [過大なネットワーク ペイロードを回避する](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [効率的なキャッシュ ポリシーを使用して静的なアセットを配信する](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [過大な DOM サイズを回避する](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [クリティカルなリクエストの深さを最小化する](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Web フォントの読み込み中にテキストが表示されたままになっていることを確認する](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [リクエスト数を少なく、転送サイズを小さく維持する](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ja/metrics/fid/index.md b/src/site/content/ja/metrics/fid/index.md
new file mode 100644
index 00000000000..067f10bbbf9
--- /dev/null
+++ b/src/site/content/ja/metrics/fid/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: First Input Delay (FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: この投稿では、First Input Delay（FID）メトリックを紹介し、説明しますそれを測定する方法
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}First Input Delay (初回入力までの遅延時間、FID) は、[読み込みの応答性](/user-centric-performance-metrics/#types-of-metrics)を測定するための重要なユーザーを中心とした指標です。これは、応答のないページを操作する場合のユーザー体験を数値化したものであり、FID が短ければ短いほど、そのページがユーザーにとって[使いやすい](/user-centric-performance-metrics/#questions)ものであることが保証されます。{% endAside %}
+
+良い第一印象を与えることがいかに重要かは誰もが知っています。新しい人と出会うとき、そしてウェブ上で体験を構築するときも重要です。
+
+Web 上では、第一印象の良し悪しがお客様がロイヤル ユーザーとなってくれるか、それとも離脱して二度と戻ってこないかの分かれ道となります。そして、一体何が良い印象としてお客様の中に残るのか、またこのサイトがユーザー対してどのような印象を与えているのかをいかに測定するかが課題となります。
+
+そして Web 上での第一印象には、様々な見方が存在します。サイトのデザインや視覚的な魅力を重視する視点もあれば、スピードや応答性などを重視する視点も存在します。
+
+Web API を使用してサイトのデザインがどの程度ユーザーに好まれているかを測定するのは難しいですが、そのスピードや応答性については測定が可能です。
+
+ユーザーにとっての第一印象であるサイトの読み込みの速さは、[First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/) を使用して測定が可能です。しかし、サイトが画面にピクセルを描画するスピードは、ユーザーが体験する物語の一部に過ぎません。ユーザーがそのピクセルを操作しようとしたときにサイトがいかに早く反応するかという点も、同様に重要なのです。
+
+First Input Delay (FID) 指標は、サイトのインタラクティブ性と応答性に関するユーザーの第一印象を測定する場合に役立ちます。
+
+## FIDとは何ですか？
+
+FID は、ユーザーが最初にページを操作したとき (リンクをクリックしたり、ボタンをタップしたり、JavaScript を使用して実装されたカスタム コントロールを使用したりしたとき) から、その操作に応じてブラウザーが実際にイベント ハンドラーの処理を開始するまでの時間を測定します。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="良いfid値は2.5秒、悪い値は4.0秒を超え、その間の値は改善が必要", width="400", height="300" %}
+</picture>
+
+### FID における良いスコアとは？
+
+良好なユーザー体験を提供するために、サイトは First Input Delay が **100 ミリ秒**以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。
+
+{% Aside %}この推奨事項の根拠となる調査および方法論に関する詳細については、「[Core Web Vitals の指標のしきい値の定義](/defining-core-web-vitals-thresholds/)」を参照してください。{% endAside %}
+
+## FID の詳細
+
+イベントに応答するコードを書く開発者としては、イベントが発生すればコードはすぐに実行されるものだと思い込みがちです。しかしながらユーザーとしては、スマートフォンで Web ページを読み込み、操作をしようとしているのに何も反応がなくてイライラした経験がきっとあるはずです。
+
+一般的に入力遅延 (別名: 入力レイテンシー) は、ブラウザーのメイン スレッドが何か他の作業で忙しく、ユーザーの操作に (まだ) 応答できない場合に発生します。よくある理由としては、アプリが読み込んでいる大きな JavaScript ファイルの解析と実行でブラウザーがビジー状態になっていることが挙げられます。この間、ブラウザーはイベント リスナーを実行することができなくなります。なぜなら、ブラウザーが読み込んでいる JavaScript がブラウザーに対して別の作業を指示している可能性があるからです。
+
+{% Aside 'gotchas' %}FID は、イベント処理の "遅延" のみを測定します。イベントの処理時間そのものや、イベント ハンドラーの実行後にブラウザーが UI を更新するまでの時間については測定を行いません。こういった時間もユーザー エクスペリエンスに影響を及ぼすものではありますが、FID の一部に含めてしまうと、イベントの非同期処理へと開発者を駆り立ててしまう可能性があります。これにより指標は改善されますが、ユーザー体験は悪化してしまう可能性があります。詳細については、後述する「[なぜ入力遅延のみを考慮するのですか？](#why-only-consider-the-input-delay)」を参照してください。{% endAside %}
+
+典型的な Web ページの読み込みについて、次のタイムラインを例に考えてみましょう。
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="ページ読み込みの追跡例", width="800", height="260", linkTo=true %}
+
+上の図は、ページがリソース (主に CSS や JS ファイル) に対していくつかのネットワーク リクエストを行い、それらのリソースのダウンロードが完了した後、メイン スレッドで処理を行っている様子を示しています。
+
+その結果として、メイン スレッドが一時的にビジー状態となる期間 (ベージュ色の[タスク](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task)ブロックで示されている部分) が現れます。
+
+最初に発生する長い入力遅延は、一般的に [First Contentful Paint (FCP)](/fcp/) と [Time to Interactive (操作可能になるまでの時間、TTI)](/tti/) の間に発生します。これは、ページがコンテンツのレンダリングを一部完了しているものの、まだ確実に操作可能になっていないために発生します。この現象を解説するために、FCP と TTI をタイムラインに追加してみましょう。
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="FCPとTTI を追加したページ読み込みの追跡例", width="800", height="340", linkTo=true %}
+
+FCP と TTI の間に、かなり長い期間に渡って (3 つの[長く時間がかかっているタスク](/custom-metrics/#long-tasks-api)を含む) 処理が発生していることにお気付きかもしれません。ユーザーがその期間内にページの操作を試みると (たとえばリンクをクリックするなど)、クリックを受け取ってからメイン スレッドが応答するまでの時間に遅延が生じます。
+
+それでは、ユーザーが最も長く時間がかかっているタスクの発生初期に近いタイミングでページの操作を試みた場合に一体何が起こるかについて考えてみましょう。
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="FCP、TTI、FID を追加したページ読み込みの追跡例", width="800", height="380", linkTo=true %}
+
+ブラウザーがタスクを実行している最中に入力が発生したため、ブラウザーが入力内容に応答するためには、このタスクが完了するまで待機しなければなりません。この待機時間が、このページでのユーザーの FID 値となります。
+
+この例では、たまたまメイン スレッドが最もビジーな時間帯の初期にユーザーがページにアクセスしました。もしもユーザーがもう少し早く (アイドル期間内に) ページにアクセスしていれば、ブラウザーはすぐに反応できたはずです。このような入力遅延のばらつきは、指標のレポートで FID 値の分布を確認することの重要性を示しています。この点については、後述する「FID データの分析とレポート」のセクションで詳しく説明します。
+
+### インタラクションにイベントリスナーがない場合はどうなりますか？
+
+FID は、ブラウザーが入力イベントを受け取ってからメイン スレッドが次のアイドル期間に入るまでの差分を測定します。つまり、**イベント リスナーが登録されていない場合でも** FID は測定されるのです。その理由は、ユーザーによるインタラクションの多くはイベント リスナーを必要としませんが、実行のためにはメイン スレッドがアイドル状態であることは*必須である*からです。
+
+たとえば、以下の HTML 要素はすべて、ユーザーによるインタラクションに応答する前に、メイン スレッドで実行中のタスクの完了を待つ必要があります。
+
+- テキスト フィールド、チェックボックス、ラジオ ボタン ( `<input>`、`<textarea>`)
+- ドロップダウンの選択 (`<select>`)
+- リンク (`<a>`)
+
+### なぜ最初の入力のみを考慮するのですか？
+
+遅延の発生がユーザー エクスペリエンスの低下につながるのはどのような入力であっても同様ですが、Google では以下の理由から初回入力の遅延の測定を主に推奨しています。
+
+- 初回入力の遅延は、サイトの応答性に関するユーザーの第一印象となります。第一印象は、サイトの品質や信頼性についての全体的な印象を形成する上で非常に重要な要素となります。
+- 今日の Web で見られるインタラクティブ性に関する問題の中でも、最も重大なものはページの読み込み時に発生しています。そのため Google では、サイトでのユーザーによる初回のインタラクションの改善に注力することが、Web 全体におけるインタラクティブ性の改善に最も大きな効果をもたらすことになると考えています。
+- 最初に発生する長い入力遅延に対するサイト側での修正方法として推奨されているソリューション (コードの分割、JavaScript の事前読み込みの削減など) は、ページの読み込み後に発生する入力に時間のかかるタイプの遅延を修正するためのソリューションとは必ずしも一致しません。これらの指標を分離することにより、より具体的なパフォーマンス ガイドラインを Web 開発者に提供できるようになります。
+
+### 何が初回入力としてカウントされますか？
+
+FID は、読み込み時のページの応答性を測定するための指標です。そのため、個別のアクション (クリック、タップ、キー押下など) による入力イベントにのみ焦点を当てています。
+
+スクロールやズームなどといったその他のインタラクションは連続的な動作であり、パフォーマンス上の制限事項が全く異なります (また、別のスレッドで実行することによってブラウザー側でレイテンシーを隠すことも可能です)。
+
+言い換えるならば、FID は [RAIL パフォーマンス モデル](/rail/)における R (応答性) に焦点を当てているのに対し、スクロールやズームは A (アニメーション) により強い関連性を持っており、それらのパフォーマンス品質は個別に評価される必要があります。
+
+### ユーザーがサイトを操作したことがない場合はどうなりますか？
+
+すべてのユーザーが訪問するサイトで必ず操作を行うわけではありません。また、すべての操作が FID に関連しているわけでもありません (前のセクションで説明したとおりです)。さらには、ユーザーによって初回操作が悪いタイミング (メイン スレッドが長期間ビジー状態になっている時) に行われる場合もあれば、良いタイミング (メイン スレッドが完全にアイドル状態になっている時) に行われる場合もあります。
+
+つまり、FID 値がないユーザーもいれば、FID 値が低いユーザーや FID 値が高いユーザーもいるのです。
+
+FID をどのように追跡し、レポートし、分析するかについては、おそらくあなたが慣れ親しんできた他の指標とはかなり方法が異なるはずです。次のセクションでは、これらを実施する場合に考えられる最善の方法について説明します。
+
+### なぜ入力遅延のみを考慮するのですか？
+
+先に述べたように、FID はイベント処理の "遅延" のみを測定します。イベントの処理時間そのものや、イベント ハンドラーの実行後にブラウザーが UI を更新するまでの時間については測定を行いません。
+
+こういった時間もユーザーにとって重要であり、ユーザー体験に*かなりの*影響を及ぼすものですが、この指標には含まれません。これは、これらの時間を指標に含めることが実際にはユーザー体験の質を落としてしまう回避策の実装へと開発者を駆り立ててしまうことを避けることが目的です。この場合の回避策には、イベント ハンドラーのロジックを、イベントに関連するタスクから分離するために (`setTimeout()` や `requestAnimationFrame()` を介した) 非同期コールバックでラップすることなどが挙げられます。結果的に指標のスコアは改善されますが、ユーザーが実際に感じる応答時間は長くなってしまいます。
+
+FID はイベントのレイテンシーの "遅延" 部分のみを測定するものですが、イベントのライフサイクルのより幅広い部分を追跡したいという開発者の方は、[Event Timing API](https://wicg.github.io/event-timing/) を使用することでそれらを実行することができます。詳細については、「[カスタム指標](/custom-metrics/#event-timing-api)」に記載されているガイドを参照してください。
+
+## FID の測定方法
+
+FID の測定には実際のユーザーによるページの操作が必要となるため、実際のユーザー環境でしか測定できません。FID は、以下のツールを使用して測定することができます。
+
+{% Aside %}FID の測定には実際のユーザーが必要となるため、ラボ環境では測定できません。しかしながら、[Total Blocking Time (合計ブロック時間、TBT)](/tbt/) 指標はラボ環境でも測定可能です。実際のユーザー環境での FID との相関性も高く、インタラクティブ性に影響を与える問題の把握も可能です。ラボ環境での TBT の改善による最適化は、実際のユーザーに対する FID の改善にも繋がるはずです。{% endAside %}
+
+### フィールド測定を実施するためのツール
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)
+
+### JavaScript を使用して FID を測定する
+
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
+JavaScript を使用した FID の測定には、[Event Timing API](https://wicg.github.io/event-timing) を使用することができます。以下の例では、[`first-input`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) エントリをリッスンしてコンソールにログを記録する [`PerformanceObserver`](https://wicg.github.io/event-timing/#sec-performance-event-timing) の作成方法を示しています。
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %}このコードは `first-input` エントリをコンソールにログとして記録して遅延を計算する方法を示していますが、JavaScript を使用して FID を測定する方法はより複雑です。詳細については、以下を参照してください。{% endAside %}
+
+上記の例では、`first-input` エントリの遅延値をエントリの `startTime` と `processingStart` タイムスタンプ間の差分を取得することによって測定しています。ほとんどの場合においてこれが FID 値となりますが、すべての `first-input` エントリが FID の測定に有効であるとは限りません。
+
+次のセクションでは、API がレポートする内容と、指標の計算方法の違いについて説明します。
+
+#### 指標と API の違い
+
+- API はバックグラウンドのタブで読み込まれているページに対して `first-input` エントリをディスパッチしますが、FID を計算する場合にはそういったページを無視する必要があります。
+- また、API は初回入力が発生する前にページがバックグラウンドに移行したとしても `first-input` エントリをディスパッチしますが、FID を計算する場合にはこういったエントリも無視する必要があります (入力が考慮されるのは、ページがずっとフォアグラウンドにあった場合のみです)。
+- API では、ページが [Back/Forward Cache](/bfcache/#impact-on-core-web-vitals) から復元された場合の `first-input` エントリはレポートされませんが、これらはユーザーにとって別々のページ訪問となるため、こういったケースにおいても FID は測定される必要があります。
+- API では iframe 内で発生した入力はレポートされませんが、FID を適切に測定するためにはこれらの入力も考慮に入れる必要があります。サブフレームが集約のために API を使用してその親フレームに `first-input` エントリをレポートすることができます。
+
+こういった微妙な違いをすべて記憶していなくても、[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)を使用して FID を測定すれば、これらの違いを (可能な限り) 処理してくれます。
+
+```js
+import {onFID} from 'web-vitals';
+
+// 実行可能となった時点ですぐに FID の測定やログ記録を実行します。
+onFID(console.log);
+```
+
+JavaScript を使用して FID を測定する方法に関する詳細な例については、[`onFID()` のソース コード](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts)を参照してください。
+
+{% Aside %}場合によっては (クロスオリジン iframe など)、JavaScript を使用して FID を測定することはできません。詳細については、`web-vitals` ライブラリの「[limitations](https://github.com/GoogleChrome/web-vitals#limitations) (制限事項)」セクションを参照してください。{% endAside %}
+
+### FID データの分析とレポート
+
+FID 値にはばらつきが予想されるため、FID をレポートする際には値の分布を確認し、パーセンタイルが高いものに注目することが重要です。
+
+すべての Core Web Vitals でしきい値となる[パーセンタイルの選択](/defining-core-web-vitals-thresholds/#choice-of-percentile)は 75 ですが、FID については特に 95 から 99 パーセンタイルを確認することを強くお勧めします。なぜならこれらのパーセンタイルは、ユーザーがあなたのサイトで経験した第一印象の中でも特に悪いものに対応しているからです。これらを確認することによって、最も改善が必要な領域を見つけることができます。
+
+これは、デバイスのカテゴリや種類ごとにレポートをセグメント化した場合でも同様です。たとえば、デスクトップとモバイルで別々のレポートを実行している場合、デスクトップで最も気をつけなければならない FID 値はデスクトップ ユーザーのうち 95 から 99 パーセンタイルに含まれるユーザーの値であり、モバイルで最も気をつけなければならない FID 値はモバイル ユーザーのうち 95 から 99 パーセンタイルに含まれるユーザーの値となります。
+
+## FID の改善方法
+
+特定のサイトについて FID の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な [Opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) (改善機会) に注目します。
+
+FID はユーザー環境で測定される指標ですが (Lighthouse はラボ環境で使用するメトリック ツールです)、FID を改善するためのガイダンスは、ラボ環境での指標である [Total Blocking Time (TBT)](/tbt/) を改善するためのガイダンスと同じです。
+
+FID の改善方法の詳細については、「[Optimize FID](/optimize-fid/) (FID を最適化する)」を参照してください。FID の改善にもつながる個別のパフォーマンス改善手法に関するその他のガイダンスについては、以下を参照してください。
+
+- [サードパーティ製コードの影響を減らす](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [JavaScript の実行にかかる時間を短縮する](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [メイン スレッドの作業を最小限に抑える](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [リクエスト数を少なく、転送サイズを小さく維持する](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)<br>
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ja/metrics/index.md b/src/site/content/ja/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/ja/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/ja/metrics/lcp/index.md b/src/site/content/ja/metrics/lcp/index.md
new file mode 100644
index 00000000000..ef8a988da1d
--- /dev/null
+++ b/src/site/content/ja/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Largest Contentful Paint (LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-19
+description: この投稿では、Largest Contentful Paint (LCP) という指標について紹介し、その測定方法に関する説明を行います。
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP) は、[知覚される読み込み速度](/user-centric-performance-metrics/#types-of-metrics)を測定するための重要なユーザーを中心とした指標です。これは、LCP がページの読み込みタイムラインにおいてページのメイン コンテンツが読み込まれたと思われる時点を示すためです。LCP を高速にすることで、そのページが[便利](/user-centric-performance-metrics/#questions)であることをユーザーに強く印象付けることができるようになります。{% endAside %}
+
+歴史的に見ても、Web ページのメイン コンテンツがどの程度早く読み込まれ、ユーザーに対して表示されるかを測定することは Web 開発者にとっての大きな課題でした。
+
+[load](https://developer.mozilla.org/docs/Web/Events/load) や [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) のような古い指標は、ユーザーが画面上で見ているものとは必ずしも一致しないため、 適切ではありません。また、[First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/) のようなユーザーを中心とした新しいパフォーマンス指標は、読み込みエクスペリエンスのごく初期の部分しかキャプチャできません。特にページにスプラッシュ スクリーンや読み込みインジケーターなどが表示されている場合には、この瞬間的な出来事はユーザーにとってあまり意味がありません。
+
+過去には、初期表示後の読み込みエクスペリエンスを把握するために [First Meaningful Paint (意味のある視覚コンテンツの初期表示時間、FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) や [Speed Index (スピード インデックス、SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) といったパフォーマンス指標を推奨してきました。しかしながら、これらの指標は複雑で説明が難しく、間違っている場合も多かったため、これらを使用してページのメイン コンテンツがいつ読み込まれたかを特定することはできませんでした。
+
+物事には、シンプルな方が好ましい場合があります。[W3C Web Performance ワーキング グループ](https://www.w3.org/webperf/)での議論や Google が実施した調査によると、ページのメイン コンテンツの読み込みタイミングをより正確に測定するためには、最も大きい要素がレンダリングされるタイミングの測定が重要であることが分かりました。
+
+## LCP とは？
+
+Largest Contentful Paint (LCP) 指標は、ビューポート内に表示される最も大きい[画像またはテキスト ブロック](https://w3c.github.io/hr-time/#timeorigin-attribute)のレンダリング時間を、ページの[初期読み込み開始](#what-elements-are-considered)タイミングと比較してレポートします。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="良好なLCP値は2.5秒、不十分な値は4.0秒を超え、その間の値は改善が必要", width="400", height="300" %}
+</picture>
+
+### LCP における良いスコアとは？
+
+良好なユーザー体験を提供するために、サイトは Largest Contentful Paint が **2.5 秒**以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。
+
+{% Aside %}この推奨事項の根拠となる調査および方法論に関する詳細については、「[Core Web Vitals の指標のしきい値の定義](/defining-core-web-vitals-thresholds/)」を参照してください。{% endAside %}
+
+### どのような要素が考慮されますか？
+
+[Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/) で現在規定されているように、Largest Contentful Paint については以下の要素が考慮されます。
+
+- `<img>` 要素
+- `<svg>` 要素内の `<image>` 要素
+- `<video>` 要素 (ポスター画像が使用されます)
+- ([CSS グラデーション](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients)とは対照的に、) [`url()`](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients) 関数を介して読み込まれた背景画像が含まれている要素
+- テキスト ノードやその他のインラインレベルのテキスト要素の子要素を含む[ブロックレベル](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)要素。
+
+なお、要素をこのように限定したのは、最初に考え方をシンプルにするという意図があったためです。研究が進むにつれて、追加の要素 (`<svg>`、`<video>` など) が今後追加されていく可能性があります。
+
+### 要素のサイズはどのようにして決定されますか？
+
+Largest Contentful Paint としてレポートされる要素のサイズは、通常ビューポート内でユーザーに対して表示されるサイズとなります。要素がビューポートからはみ出していたり、要素の一部が切り取られていたり、画面に表示されない[オーバーフロー](https://developer.mozilla.org/docs/Web/CSS/overflow)が発生したりしているような場合、そういった部分は要素のサイズには含まれません。
+
+[本来のサイズ](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)からリサイズされた画像要素については、表示されたサイズと本来のサイズのうち、いずれか小さい方がレポートされます。たとえば、本来のサイズよりもはるかに小さいサイズへと縮小された画像については、表示されたサイズのみがレポートされ、逆に大きなサイズへと引き伸ばされたり拡大されたりした画像については、本来のサイズのみがレポートされます。
+
+テキスト要素については、そのテキスト ノードのサイズ (すべてのテキスト ノードを包含する最小の長方形) のみが考慮されます。
+
+あらゆる要素において、CSS を介して適用されているマージン、パディング、ボーダーはすべて考慮されません。
+
+{% Aside %}どのテキスト ノードがどの要素に属しているかについての判断は時に難しいものとなり、特にインライン要素やプレーン テキスト ノードだけでなくブロックレベル要素も子要素として含んでいる要素については、特に難しくなります。この場合に重要となるのは、すべてのテキスト ノードは最も近いブロックレベルの祖先要素に属している (そして、その要素にのみ属している) という点です。[仕様](https://wicg.github.io/element-timing/#set-of-owned-text-nodes)では、各テキスト ノードはその[包含ブロック](https://developer.mozilla.org/docs/Web/CSS/Containing_block)を生成する要素に属するとして定義されています。{% endAside %}
+
+### 最大視覚コンテンツはどのタイミングでレポートされますか？
+
+Web ページは段階的に読み込まれる場合が多く、その結果としてページ内で最も大きい要素が変更される可能性があります。
+
+こういった変更の可能性に対応するため、ブラウザーは最初のフレームを描画した直後に、最大のコンテンツ要素を特定する `largest-contentful-paint` タイプの [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) をディスパッチします。しかしながら、後続するフレームのレンダリング後に最大のコンテンツ要素が変更されるたびに、別の [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) をディスパッチします。
+
+たとえば、テキストとヒーロー画像があるページでは、ブラウザーはテキストを最初にレンダリングします。その時点でブラウザーは `largest-contentful-paint` エントリをディスパッチしますが、その `element` プロパティはおそらく `<p>` または `<h1>` を参照するはずです。その後、ヒーロー画像の読み込みが完了すると 2 番目の `largest-contentful-paint` エントリがディスパッチされ、その `element` プロパティは `<img>` を参照するはずです。
+
+重要なのは、ある要素についてレンダリングが完了し、ユーザーに対して表示された時点で初めて、その要素は最大のコンテンツ要素としてみなされるという点です。まだ読み込まれていない画像は、"レンダリングされた" とはみなされません。また、[フォント ブロック期](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline)に Web フォントを使用するテキスト ノードについても同様です。このような場合に、比較的サイズが小さい要素が最大のコンテンツ要素としてレポートされる可能性がありますが、よりサイズの大きい要素のレンダリングが完了すれば、別の `PerformanceEntry` オブジェクトを介してすぐにその要素がレポートされます。
+
+遅れて読み込まれる画像やフォントに加えて、新しいコンテンツが利用可能になったタイミングでページが新しい要素を DOM に追加する場合があります。こういった新しい要素のいずれかがそれまでの最大のコンテンツ要素よりもサイズが大きくなる場合、新しい `PerformanceEntry` もレポートされます。
+
+現時点での最大のコンテンツ要素がビューポートから削除された場合 (あるいは DOM から削除された場合)、よりサイズの大きい要素がレンダリングされない限り、その要素が引き続き最大のコンテンツ要素として見なされます。
+
+{% Aside %}Chrome 88 より以前のバージョンでは削除された要素は最大のコンテンツ要素としては見なされず、現在の候補の削除が新しい `largest-contentful-paint` エントリのディスパッチのトリガーとなっていました。しかしながら、画像カルーセルのような一般的な UI パターンにおいては DOM 要素が削除されるケースが多いため、ユーザー体験をより正確に反映するためにこの指標はアップデートされました。詳細については、[CHANGELOG](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md) を参照してください。{% endAside %}
+
+ブラウザーは、ユーザーが (タップ、スクロール、キー押下などにより) ページを操作すると、すぐに新しいエントリのレポートを停止します。ユーザーの操作によって、ユーザーに対して表示される内容が変更される場合がよくあるからです (特にスクロールの場合)。
+
+分析を行う場合には、直近にディスパッチされた `PerformanceEntry` のみをアナリティクス サービスにレポートする必要があります。
+
+{% Aside 'caution' %}ユーザーはバックグラウンド タブでページを開くこともできるため、Largest Contentful Paint はユーザーがタブにフォーカスするまで発生しない可能性があり、そのタイミングはユーザーが最初にタブを読み込んだタイミングよりもずっと後になる可能性があります。{% endAside %}
+
+#### 読み込み時間とレンダリング時間
+
+セキュリティ上の理由から、[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) ヘッダーを持たないクロスオリジン画像では画像のレンダリングのタイムスタンプは公開されません。その代わりに、読み込み時間のみが公開されます (この情報はその他多くの Web API を介してすでに公開されているためです)。
+
+以下の[使用例](#measure-lcp-in-javascript)では、レンダリング時間が利用できない要素の処理方法について示しています。ただし、可能な限り[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) ヘッダーを設定することを常に推奨しています。そうすることで、指標はより正確になります。
+
+### 要素のレイアウトやサイズの変更は、どのように処理されますか？
+
+新しいパフォーマンス エントリを計算してディスパッチする際に発生するパフォーマンス オーバーヘッドを低く抑えるために要素のサイズや位置を変更しても、新しい LCP 候補は生成されません。要素の初期サイズとビューポート内での位置のみが考慮されます。
+
+つまり、最初は画面外にレンダリングされ、その後で画面内に移動した画像についてはレポートされない可能性があります。また、最初はビューポート内にレンダリングされていた要素が押し下げられて表示されなくなった場合でも、ビューポート内での初期サイズがレポートされます。
+
+### 例
+
+ここでは、いくつかの人気 Web サイトにおいて Largest Contentful Paint が発生する場合の例をご紹介します。
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="cnn.com の Largest Contentful Paint タイムライン", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="techcrunch.com の Largest Contentful Paint タイムライン", width="800", height="311" %}
+
+上記 2 つのタイムラインでは、コンテンツが読み込まれると、最大の要素が変更されます。1 つ目の例では新しいコンテンツが DOM に追加され、それにより最大の要素が変更されています。2 つ目の例ではレイアウトが変更され、それまで最も大きかったコンテンツがビューポートから削除されています。
+
+遅れて読み込まれたコンテンツの方がすでにページ上に表示されているコンテンツよりもサイズが大きいといったケースはよく見られますが、必ずしもそうなるわけではありません。次の 2 つの例では、ページが完全に読み込まれる前に Largest Contentful Paint が発生しています。
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="instagram.com の Largest Contentful Paint タイムライン", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="google.com の Largest Contentful Paint タイムライン", width="800", height="311" %}
+
+1 つ目の例では、Instagram のロゴの読み込みが比較的早い段階で完了し、その他のコンテンツが徐々に表示されていく中でもロゴが最大の要素となっています。Google の検索結果ページの例では、画像やロゴの読み込みが完了する前に表示されるテキストの段落が最大の要素となっています。個々の画像はすべてこの段落よりもサイズが小さいため、読み込みプロセス全体を通してこの段落がずっと最大の要素となっています。
+
+{% Aside %}Instagram のタイムラインの最初のフレームで、カメラのロゴに緑色のボックスがないことにお気づきの方がいらっしゃるかもしれません。これは、この要素が `<svg>` 要素だからであり、`<svg>` 要素は現段階で LCP の候補とされていません。最初の LCP 候補は、2 つ目のフレームに含まれているテキストです。{% endAside %}
+
+## LCP の測定方法
+
+LCP は[ラボ環境](/user-centric-performance-metrics/#in-the-lab)または[実際のユーザー環境](/user-centric-performance-metrics/#in-the-field)で測定が可能で、以下のツールが使用できます。
+
+### フィールド測定を実施するためのツール
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)
+
+### ラボ測定を実施するためのツール
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### JavaScript を使用して LCP を測定する
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+JavaScript を使用した LCP の測定には、[Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/) を使用することができます。以下の例では、`largest-contentful-paint` エントリをリッスンしてコンソールにログを記録する [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) の作成方法を示しています。
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+このコードは `largest-contentful-paint` エントリをコンソールにログとして記録する方法を示していますが、JavaScript を使用して LCP を測定する方法はより複雑です。詳細については、以下を参照してください。
+
+{% endAside %}
+
+上記の例では、ログとして記録された各 `largest-contentful-paint` エントリが現時点での LCP 候補を表しています。一般的には最後に発行されたエントリの `startTime` 値が LCP 値となりますが、必ずしもそうなるわけではありません。すべての `largest-contentful-paint` エントリが LCP の測定に有効なわけではありません。
+
+次のセクションでは、API がレポートする内容と、指標の計算方法の違いについて説明します。
+
+#### 指標と API の違い
+
+- API はバックグラウンド タブで読み込まれているページに対して `largest-contentful-paint` エントリをディスパッチしますが、LCP を計算する場合にはそういったページを無視する必要があります。
+- API はページがバックグラウンドに移行した後も `largest-contentful-paint` エントリをディスパッチし続けますが、LCP を計算する場合にはこういったエントリを無視する必要があります (要素が考慮されるのは、ページがずっとフォアグラウンドにあった場合のみです)。
+- API は、ページが [Back/Forward Cache](/bfcache/#impact-on-core-web-vitals) から復元された場合の `largest-contentful-paint` エントリはレポートしませんが、これらはユーザーにとっては別々のページ訪問となるため、こういったケースにおいても LCP は測定される必要があります。
+- API では iframe に含まれている要素は考慮されませんが、LCP を正確に測定するためにはこれらの要素も考慮に入れる必要があります。サブフレームが集約のために API を使用してその親フレームに `largest-contentful-paint` エントリをレポートすることができます。
+
+こういった微妙な違いをすべて記憶していなくても、[`web-vitals` JavaScript ライブラリ](https://github.com/GoogleChrome/web-vitals)を使用して LCP を測定すれば、これらの違いを (可能な限り) 処理してくれます。
+
+```js
+import {onLCP} from 'web-vitals';
+
+// 実行可能となった時点ですぐに LCP の測定やログ記録を実行します。
+onLCP(console.log);
+```
+
+JavaScript を使用して LCP を測定する方法に関する詳細な例については、[`onLCP()` のソース コード](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts)を参照してください。
+
+{% Aside %}場合によっては (クロスオリジン iframe など)、JavaScript を使用して LCP を測定することはできません。詳細については、`web-vitals` ライブラリの「[limitations](https://github.com/GoogleChrome/web-vitals#limitations) (制限事項)」セクションを参照してください。{% endAside %}
+
+### 最も重要な要素が最もサイズの大きい要素ではない場合
+
+場合によっては、ページ上で最も重要な要素が最もサイズの大きい要素ではないため、開発者の方がこれらの要素以外の要素のレンダリング時間を測定したいと考える可能性があります。これは、「[Custom Metrics](https://wicg.github.io/element-timing/) (カスタム指標)」の記事で説明されている [Element Timing API](/custom-metrics/#element-timing-api) を使用すれば可能です。
+
+## LCP の改善方法
+
+LCPは、主に次の 4 つの要因の影響を受けます。
+
+- サーバーの応答時間が遅い
+- レンダリングを妨げる JavaScript および CSS
+- リソースの読み込み時間
+- クライアント側のレンダリング
+
+LCP の改善方法の詳細については、「[LCP を最適化する](/optimize-lcp/)」を参照してください。LCP の改善にもつながる個別のパフォーマンス改善手法に関するその他のガイダンスについては、以下を参照してください。
+
+- [PRPL パターンを使用して読み込みを高速化する](/apply-instant-loading-with-prpl)
+- [クリティカル レンダリング パスの最適化](/critical-rendering-path/)
+- [CSS を最適化する](/fast#optimize-your-css)
+- [画像を最適化する](/fast#optimize-your-images)
+- [Web フォントを最適化する](/fast#optimize-web-fonts)
+- [JavaScript を最適化する](/fast#optimize-your-javascript) (クライアント サイドでレンダリングを行うサイト向け)
+
+## その他のリソース
+
+- [Annie Sullivan](https://youtu.be/ctavZT87syI) による「[Chrome のパフォーマンス監視から得られた教訓](https://anniesullie.com/)」[performance.now()](https://perfnow.nl/) より (2019)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ja/metrics/tbt/index.md b/src/site/content/ja/metrics/tbt/index.md
new file mode 100644
index 00000000000..79a5f3d45f2
--- /dev/null
+++ b/src/site/content/ja/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Total Blocking Time (TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: この投稿では、Total Blocking Time (合計ブロック時間、TBT) という指標について紹介し、その測定方法に関する説明を行います。
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+Total Blocking Time (合計ブロック時間、TBT) は、[読み込みの応答性](/user-centric-performance-metrics/#in-the-lab)を測定するために重要となる[ラボ環境での指標](/user-centric-performance-metrics/#types-of-metrics)です。ページが確実に操作可能になるまでの間の操作不可能性の重大さの数値化に役立ち、TBT が低ければ低いほどページが確実に[使用可能](/user-centric-performance-metrics/#questions)となることを示しています。
+
+{% endAside %}
+
+## TBT とは？
+
+Total Blocking Time (TBT) 指標は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する [First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/) と [Time to Interactive (操作可能になるまでの時間、TTI)](/tti/) の間の時間の合計を測定します。
+
+メイン スレッド上で 50 ミリ秒 (ms) 以上実行されているタスクを意味する[長く時間がかかっているタスク](/custom-metrics/#long-tasks-api)がある場合、メイン スレッドは "ブロックされた" とみなされます。メイン スレッドが "ブロックされた" と表現されるのは、ブラウザーが進行中のタスクを中断することができないからです。そのため、長く時間がかかっているタスクの途中でユーザーがページを*操作*した場合、ブラウザーは応答する前にタスクの終了を待たなければなりません。
+
+タスクの処理にかなり長く時間がかかっている場合 (例: 50 ms 以上)、ユーザーはその遅延に気付き、ページが遅い、または質が低いと感じてしまう可能性があります。
+
+特定の長いタスクの*ブロック時間*は、50ミリ秒を超える期間です。また、*ページの合計ブロック時間*は、FCPとTTIの間で発生する各長いタスクの*ブロック時間の合計です。*
+
+たとえば、ページを読み込んでいる最中のブラウザーのメイン スレッドの図は、以下のようになります。
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="メイン スレッドでのタスク処理のタイムライン", width="800", height="156", linkTo=true %}
+
+上記のタイムライン上には 5 つのタスクがあり、そのうちの 3 つは継続時間が 50 ms を超えているため、長く時間がかかっているタスクとなります。以下の図は、長く時間がかかっているタスクそれぞれのブロック時間を示しています。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="ブロック時間を示しているメイン スレッドでのタスク処理のタイムライン", width="800", height="156", linkTo=true %}
+
+このため、メイン スレッドでのタスク実行の総時間は 560 ミリ秒ですが、そのうちの 345 ミリ秒のみがブロック時間としてみなされます。
+
+<table>
+  <tr>
+    <th></th>
+    <th>タスクの継続時間</th>
+    <th>タスクのブロック時間</th>
+  </tr>
+  <tr>
+    <td>タスク 1</td>
+    <td>250 ミリ秒</td>
+    <td>200 ミリ秒</td>
+  </tr>
+  <tr>
+    <td>タスク 2</td>
+    <td>90 ミリ秒</td>
+    <td>40 ミリ秒</td>
+  </tr>
+  <tr>
+    <td>タスク 3</td>
+    <td>35 ミリ秒</td>
+    <td>0 ミリ秒</td>
+  </tr>
+  <tr>
+    <td>タスク 4</td>
+    <td>30 ミリ秒</td>
+    <td>0 ミリ秒</td>
+  </tr>
+  <tr>
+    <td>タスク 5</td>
+    <td>155 ミリ秒</td>
+    <td>105 ミリ秒</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>合計ブロック時間</strong></td>
+    <td><strong>345 ミリ秒</strong></td>
+  </tr>
+</table>
+
+### TBT は TTI にどのように関係していますか？
+
+TBTは、ページが確実に操作可能になる前の操作不可能性の重大さの数値化に役立つため、TTI との相性が非常に良い指標です。
+
+TTI は、メイン スレッドに長く時間がかかっているタスクがない状態が少なくとも 5 秒間続いた場合に、そのページを "確実に操作可能" であるとみなします。つまり、51 ミリ秒のタスクが 10 秒の間に 3 つ散らばっている場合、10 秒間の長く時間がかかっているタスク 1 つと同じように TTI を悪化させてしまいます。この 2 つのシナリオは、ページの操作を試みようとするユーザーにとってはまったく異なるものに感じられるはずです。
+
+最初のケースの場合、51 ミリ秒のタスクが 3 つあれば、TBT は **3 ミリ秒**になります。一方で、10 秒のタスクが 1 つある場合、TBT は **9950 ミリ秒**となります。2 番目のケースで TBT 値が大きくなっているのは、ユーザー体験の悪化を示しています。
+
+## TBT の測定方法
+
+TBT は、[ラボ環境](/user-centric-performance-metrics/#in-the-lab)で測定する場合に最適な指標です。TBT の測定に最適な方法には、サイトでの Lighthouse のパフォーマンス監査の実行が挙げられます。使用方法の詳細については、「[TBT に関する Lighthouse ドキュメント](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)」を参照してください。
+
+### ラボ測定を実施するためのツール
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %}実際のユーザー環境での TBT の測定は可能ですが、ユーザーの操作がページの TBT に影響を与え、レポートに多数のばらつきが出てしまう可能性があるため、お勧めできません。実際のユーザー環境でのページのインタラクティブ性を理解するためには、[First Input Delay (FID)](/fid/) を測定する必要があります。{% endAside %}
+
+## TBT における良いスコアとは？
+
+優れたユーザー エクスペリエンスを提供するためには、**平均的なモバイル ハードウェア**でテストを行った場合に、Total Blocking Time を **300 ミリ秒**以下に抑えるよう努力する必要があります。
+
+ページの TBT が Lighthouse のパフォーマンス スコアにどのような影響を及ぼすかについては、「[Lighthouse による TBT スコアの決定方法](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)」を参照してください。
+
+## TBT の改善方法
+
+特定のサイトについて TBT の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な [Opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) (改善機会) に注目します。
+
+TBT の (あらゆるサイトに共通する) 一般的な改善方法については、以下のパフォーマンス ガイドを参照してください。
+
+- [サードパーティ製コードの影響を減らす](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [JavaScript の実行にかかる時間を短縮する](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [メイン スレッドの作業を最小限に抑える](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [リクエスト数を少なく、転送サイズを小さく維持する](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ja/metrics/tti/index.md b/src/site/content/ja/metrics/tti/index.md
new file mode 100644
index 00000000000..38d76916cf4
--- /dev/null
+++ b/src/site/content/ja/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Time to Interactive (TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: この投稿では、Time to Interactive (操作可能になるまでの時間、TTI) という指標について紹介し、その測定方法に関する説明を行います。
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}Time to Interactive (操作可能になるまでの時間、TTI) は、[読み込みの応答性](/user-centric-performance-metrics/#in-the-lab)を測定するために重要となる[ラボ環境での指標](/user-centric-performance-metrics/#types-of-metrics)です。TTI は、ページが*見かけ上*操作可能になっているものの、実際にはそうでない場合を特定するのに役立ちます。TTI を高速にすることで、そのページが[使用可能](/user-centric-performance-metrics/#in-the-lab)であることをユーザーに確信させることができます。{% endAside %}
+
+## TTI とは？
+
+TTI 指標は、ページの読み込みが開始されてから主なサブリソースの読み込みが完了するまでの時間を測定するもので、改善することでページがユーザーの入力に対してすばやく確実に応答できるようになります。
+
+Web ページの[パフォーマンス トレース](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/)に基づいて TTI を計算するには、以下の手順に従います。
+
+1. [First Contentful Paint (FCP)](/fcp/) から開始します。
+2. 少なくとも 5 秒間の落ち着いている期間を時間の経過順に探していきます。この場合の*落ち着いている期間*とは、[長く時間がかかっているタスク](/custom-metrics/#long-tasks-api)がなく、実行中のネットワーク GET リクエストが 2 件以下となる期間として定義されます。
+3. 落ち着いている期間より前の期間内で、一番最後に現れる長く時間がかかっているタスクを見つけ出します。長く時間がかかっているタスクが見つからない場合には、FCP まで遡ります。
+4. 落ち着いている期間より前の期間内で一番最後に現れる長く時間がかかっているタスクの終了時間が、TTI となります。(長く時間がかかっているタスクが見つからない場合には、FCP と同じ値になります)。
+
+以下の図は、上記の手順を視覚化したものです。
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="TTI の算出方法を示すページの読み込みタイムライン", width="800", height="473", linkTo=true %}
+
+歴史的に開発者はレンダリング時間を短縮するためにページを最適化してきており、時には TTI を犠牲にしてきました。
+
+サーバーサイド レンダリング (SSR) のような技術は、ページが*見かけ上*は操作可能である (つまり、リンクやボタンが画面に表示されている) にもかかわらず、メイン スレッドがブロックされていたり、それらの要素を制御する JavaScript コードが読み込まれていなかったりするために*実際には*操作可能ではないといったシナリオをもたらします。
+
+操作可能に見えて、実際には操作可能ではないページでユーザーが操作を試みると、次のいずれかの応答が返ってきます。
+
+- 最良のシナリオの場合、ユーザーはページの反応が遅いことに苛立ちを覚えます。
+- 最悪のシナリオの場合、ページが故障していると判断され、離脱されてしまう可能性があります。さらには、あなたが管理するブランドの価値に対する自信や信頼を失ってしまう可能性すらあります。
+
+このような問題を回避するために、FCP と TTI の差を最小限に抑えるように努力してください。また、かなりの差がある場合には、ページ上のコンポーネントがまだ操作可能になっていないことを示す視覚的なインジケーターを設置してください。
+
+## TTI の測定方法
+
+TTI は、[ラボ環境](/user-centric-performance-metrics/#in-the-lab)で測定する場合に最適な指標です。TTI の測定に最適な方法には、サイトでの Lighthouse のパフォーマンス監査の実行が挙げられます。使用方法の詳細については、「[TTI に関する Lighthouse ドキュメント](/tti/)」を参照してください。
+
+### ラボ測定を実施するためのツール
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %}実際のユーザー環境での TTI の測定は可能ですが、ユーザーの操作がページの TTI に影響を与え、レポートに多数のばらつきが出てしまう可能性があるため、お勧めできません。実際のユーザー環境でのページのインタラクティブ性を理解するためには、[First Input Delay (FID)](/fid/) を測定する必要があります。{% endAside %}
+
+## TTI における良いスコアとは？
+
+優れたユーザー エクスペリエンスを提供するためには、**平均的なモバイル ハードウェア**でテストを行った場合に、Time to Interactive を **5 秒**以下に抑えるよう努力する必要があります。
+
+ページの TTI が Lighthouse のパフォーマンス スコアにどのような影響を及ぼすかについては、「[Lighthouse による TTI スコアの決定方法](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score)」を参照してください。
+
+## TTI の改善方法
+
+特定のサイトについて TTI の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な [Opportunities](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) (改善機会) に注目します。
+
+TTI の (あらゆるサイトに共通する) 一般的な改善方法については、以下のパフォーマンス ガイドを参照してください。
+
+- [JavaScript を圧縮する](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [必要なオリジンに事前接続する](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [キー リクエストを事前に読み込む](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [サードパーティ製コードの影響を減らす](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [クリティカルなリクエストの深さを最小化する](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [JavaScript の実行にかかる時間を短縮する](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [メイン スレッドの作業を最小限に抑える](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [リクエスト数を少なく、転送サイズを小さく維持する](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ja/metrics/user-centric-performance-metrics/index.md b/src/site/content/ja/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..5e47d273159
--- /dev/null
+++ b/src/site/content/ja/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: ユーザーを中心としたパフォーマンス指標
+authors:
+  - philipwalton
+date: 2019-11-08
+description: ユーザーを中心としたパフォーマンス指標は、実際のユーザーにとって有益となる方法でサイトのエクスペリエンスを理解し、改善するための重要なツールです。
+tags:
+  - performance
+  - metrics
+---
+
+パフォーマンスがいかに重要であるかは、既によく知られています。しかしながら、パフォーマンスや Web サイトの "高速" 化とは、具体的にどのようなことを指しているのでしょうか。
+
+実際には、パフォーマンスとは相対的なものです。
+
+- あるユーザー (高速なネットワーク上で高性能なデバイスを使用しているユーザー) にとってそのサイトは高速かもしれませんが、別のユーザー (低速なネットワーク上で性能の低いデバイスを使用しているユーザー) にとっては低速となる可能性があります。
+- 2 つのサイトがまったく同じ時間で読み込みを完了しているにもかかわらず、一方のサイトの方が速く読み込みが完了しているように*見える*場合があります (コンテンツの読み込みを最後まで待たずに、徐々に読み込みながら表示をしている場合)。
+- サイトの読み込みが早いように*見えても*、ユーザーの操作に対する応答が遅い (あるいは全く応答しない) 場合があります。
+
+そのため、パフォーマンスについて語る場合には、正確で、定量的に測定が可能な客観的な基準に基づいて言及することが重要となります。この基準は、*指標*と呼ばれています。
+
+しかしながら、客観的な基準に基づいていて定量的に測定が可能だからといって、その指標が有用であるとは限りません。
+
+## 指標の定義
+
+歴史的に、Web のパフォーマンスは <code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code> イベントを使用して測定されてきました。しかしながら、<code>load</code> がページのライフサイクルにおいて明確に定義された瞬間であったとしても、その瞬間が必ずしもユーザーの関心に一致するわけではありません。
+
+たとえばサーバーは、最小限のページで応答することもできます。このページはすぐに "読み込まれ" ますが、`load` イベントが発生してから数秒の間、コンテンツのフェッチやページ上でのコンテンツ表示を延期してしまいます。このようなページは、技術的には読み込み時間が速くなるかもしれませんが、その時間はページの読み込み時にユーザーが実際に体験する時間とは一致しません。
+
+過去数年に渡り、Chrome チームのメンバーは [W3C Web Performance ワーキング グループ](https://www.w3.org/webperf/)と協力しながら、ユーザーが Web ページのパフォーマンスをどのように体験するかについてより正確な測定を行うための一連の新しい API および指標の標準化に取り組んできました。
+
+指標がユーザーにとって適切であることを保証するために、以下のような重要な質問に当てはめることで評価を行っています。
+
+<table id="questions">
+  <tr>
+    <td><strong>動作していますか？</strong></td>
+    <td>ナビゲーションは正常に起動しましたか？サーバーからの応答はありましたか？</td>
+  </tr>
+  <tr>
+    <td><strong>役に立っていますか？</strong></td>
+    <td>ユーザーが利用できるだけのコンテンツがレンダリングされていますか？</td>
+  </tr>
+  <tr>
+    <td><strong>使用が可能ですか？</strong></td>
+    <td>ユーザーがページを操作できていますか？ビジー状態になっていませんか？</td>
+  </tr>
+  <tr>
+    <td><strong>快適ですか？</strong></td>
+    <td>遅延やエラーがなく、スムーズで自然な操作ができていますか？</td>
+  </tr>
+</table>
+
+## 指標の測定方法
+
+パフォーマンス指標は、一般的に次の 2 つの方法のいずれかによって測定されます。
+
+- **ラボ環境での測定:** 一貫性のある管理された環境で、ページの読み込みをシミュレートするためのツールを使用します。
+- **実際のユーザー環境での測定:** 実際にページを読み込み、操作しているユーザーについて測定します。
+
+どちらかのオプションが、他方のオプションより優れているわけでも、劣っているわけでもありません。実際には、両方のオプションを併用しながらパフォーマンスを向上させていきます。
+
+### ラボ環境での測定
+
+新機能を開発する際には、ラボ環境でのパフォーマンスのテストが欠かせません。本番環境で機能がリリースされる前に、実際のユーザー環境でその機能のパフォーマンス特性を測定することは不可能です。そのため、機能がリリースされる前にラボ環境で機能をテストしておくことが、パフォーマンスの悪化を防ぐためには最善の方法となります。
+
+### 実際のユーザー環境での測定
+
+一方で、ラボ環境でのテストはパフォーマンス測定において妥当な代替策となるものの、それがすべてのユーザーによる実際のユーザー環境でのサイトの利用方法を反映しているとは限りません。
+
+サイトのパフォーマンスは、ユーザーが使用するデバイスの性能やネットワークの状態に大きく左右されます。また、ユーザーがページを操作しているかどうか (またはその操作方法) によっても変わってきます。
+
+さらには、ページの読み込みは決定論的なものではない可能性があります。たとえば、カスタマイズされたコンテンツや広告を読み込むサイトでは、ユーザーごとにパフォーマンス特性が大きく異なってくる可能性があります。ラボ環境でのテストでは、そういった違いを捕捉することはできません。
+
+サイト パフォーマンスをユーザー目線で真に理解するための唯一の方法は、ユーザーがサイトを読み込み、操作を行っている環境でパフォーマンスを測定することです。このタイプの測定方法は、一般的にリアル ユーザー モニタリング (または RUM) と呼ばれています。
+
+## 指標の種類
+
+ユーザーがパフォーマンスをどのように認識しているかに関する指標は、他にもいくつかあります。
+
+- **知覚される読み込み速度:** ページがすべての視覚要素を読み込み、画面にレンダリングする速度。
+- **読み込みの応答性:** コンポーネントがユーザーの操作に対してすばやく応答するために、ページが必要な JavaScript コードを読み込んで実行する速度。
+- **実行時の応答性:** ページの読み込みが完了した後、ページがユーザーの操作にどの程度すばやく応答できるかを示す指標。
+- **視覚的な安定性:** ユーザーが予期しないような手法でページ上の要素が移動し、ユーザーの操作に支障をきたす可能性があるかどうかを示す指標。
+- **滑らかさ:** トランジションやアニメーションが一定のフレーム レートでレンダリングされ、ある状態から別の状態へと流れるように移動しているかどうかを示す指標。
+
+上記すべてのパフォーマンス指標を考慮に入れる場合、ページのパフォーマンス特性をすべて把握するには単一の指標では不十分であることがお分かりいただけるかと思います。
+
+## 測定すべき重要な指標
+
+- **[First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/):** この指標は、ページの読み込みが開始されてから、ページのコンテンツのいずれかの部分が画面にレンダリングされるまでの時間を測定します。*([ラボ環境](#in-the-lab), [実際のユーザー環境](#in-the-field))*
+- **[Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP)](/lcp/):** この指標は、ページの読み込みが開始されてから、最もサイズの大きいテキスト ブロックまたは画像要素が画面にレンダリングされるまでの時間を測定します。*([ラボ環境](#in-the-lab), [実際のユーザー環境](#in-the-field))*
+- **[First Input Delay (初回入力までの遅延時間、FID)](/fid/):** この指標は、ユーザーが最初にサイトを操作したとき (リンクをクリックしたり、ボタンをタップしたり、JavaScript を使用して実装されたカスタム コントロールを使用したりしたとき) から、その操作に実際に応答するまでの時間を測定します。*([実際のユーザー環境](#in-the-field))*
+- **[Time to Interactive (操作可能になるまでの時間、TTI)](/tti/):** この指標は、ページの読み込みが開始されてから視覚的なレンダリングが完了し、初期スクリプトが (あれば) 読み込まれ、ユーザーの入力に対してすばやく確実に応答できるようになるまでの時間を測定します。*([ラボ環境](#in-the-lab))*
+- **[Total Blocking Time (合計ブロック時間、TBT)](/tbt/):** この指標は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する FCP と TTI の間の時間の合計を測定します。*([ラボ環境](#in-the-lab))*
+- **[Cumulative Layout Shift (累積レイアウト シフト数、CLS)](/cls/):** この指標は、ページの読み込みが開始されてからページの[ライフサイクルの状態](https://developer.chrome.com/blog/page-lifecycle-api/)が hidden に変わるまでの間に発生した予期しないレイアウト シフトの累積スコアを測定します。*([ラボ環境](#in-the-lab), [実際のユーザー環境](#in-the-field))*
+
+このリストにはユーザーに関連するパフォーマンスの様々な側面を測定する指標が含まれていますが、すべてを網羅しているわけではありません (たとえば、実行時の応答性や滑らかさについては、現在のところカバーされていません)。
+
+不足する領域を補うために新しい指標が導入される場合も考えられますが、運営するサイトに合わせて調整された指標が最適な場合もあります。
+
+## カスタム指標
+
+上記のパフォーマンス指標は、Web 上に存在するほぼすべてのサイトのパフォーマンス特性について一般的な理解を得る場合に適しています。また、自身が運営するサイトのパフォーマンスを競合他社のサイトと比較する場合の共通指標としても有効です。
+
+しかしながら、特定のサイトが何らかの特徴を持っていて、パフォーマンスの全体像を把握するためには別の指標が必要となる場合も考えられます。たとえば、LCP 指標はページのメイン コンテンツの読み込みが完了したタイミングを測定するための指標ですが、最もサイズの大きい要素がページのメイン コンテンツに含まれていない場合もあり、その場合には LCP が意味をなさないことも考えられます。
+
+このようなケースに対応するために、Web Performance ワーキング グループでは独自のカスタム指標の実装に便利な低水準の API も標準化しています。
+
+- [User Timing API](https://w3c.github.io/user-timing/)
+- [Long Tasks API](https://w3c.github.io/longtasks/)
+- [Element Timing API](https://wicg.github.io/element-timing/)
+- [Navigation Timing API](https://w3c.github.io/navigation-timing/)
+- [Resource Timing API](https://w3c.github.io/resource-timing/)
+- [Server Timing](https://w3c.github.io/server-timing/)
+
+これらの API を使用してサイト固有のパフォーマンス特性を測定する方法については、「[カスタム指標](/custom-metrics/)」に記載されているガイドを参照してください。
diff --git a/src/site/content/ja/mini-apps/index.md b/src/site/content/ja/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/ja/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/ja/offline.md b/src/site/content/ja/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/ja/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/ja/payments/index.md b/src/site/content/ja/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/ja/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/ja/progressive-web-apps/app-like-pwas/index.md b/src/site/content/ja/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..006852026ba
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,403 @@
+---
+layout: post
+title: PWAをアプリのように動作させる
+subhead: プログレッシブWebアプリをWebサイトのように動作させるのではなく、「実際の」アプリのように動作させる
+authors:
+  - thomassteiner
+description: Web技術を使用してプラットフォーム固有のアプリパターンを実装する手順を理解して、プログレッシブWebアプリを「実際の」アプリのように動作させる方法について説明します。
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+プログレッシブWebアプリは、「PWAは単なるWebサイト」と言っても良いでしょう。 MicrosoftのPWAドキュメントでは、[そのこと](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites)に[同意](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites)しており、PWAの提唱者であるFrances Berriman氏とAlex Russell氏さえも[そのように述べています](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites)。まさにPWAは単なるWebサイトですが、それだけではありません。正しく実行された場合、PWAはWebサイトのように動作するのではなく、「実際の」アプリのように感じられます。では、実際のアプリのような動作とは何を意味するでしょうか。
+
+この質問に答えるために、Apple [Podcasts](https://support.apple.com/HT201859)アプリの例を取り上げます。これはデスクトップのmacOSとモバイルのiOS (およびiPadOS) で利用できます。Podcastsはメディアアプリケーションですが、これから説明する中心的な概念は、他のカテゴリのアプリにも当てはまります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="iPhoneとMacBookをサイドバイサイドで実行し、両方ともPodcastsアプリケーションを実行しています。", width="800", height="617" %} <figcaption> iPhoneおよびmacOS上のApple Podcasts (<a href="https://support.apple.com/HT201859">出典</a>)。</figcaption></figure>
+
+{% Aside 'caution' %}次の一覧のiOS/Android/デスクトップアプリの各機能には、詳細が表示される**Webコンポーネントでこれを実行する方法**があります。さまざまなオペレーティングシステムのすべてのブラウザが、一覧のすべてのAPIまたは機能をサポートしているわけではないのでご注意ください。リンクされた記事の互換性に関する注意事項をよく確認してください。 {% endAside %}
+
+## オフラインで実行可能
+
+一歩下がって、携帯電話やデスクトップコンピュータにインストールされているプラットフォーム固有のアプリケーションのいくつかを考えると、明らかに際立っていることが1つあります。それは常に何か情報が得られるということです。Podcastsアプリでは、オフラインであっても常に何らかの動作が行われます。ネットワークに接続していない場合でも、当然アプリは起動しきます。[**トップチャート**] セクションにコンテンツは表示されませんが、「**現在接続できません**」メッセージと [**再試行**] ボタンがペアになって表示されます。これは期待していた経験ではないかもしれませんが、少なくとも何らかの情報を得ることはできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="ネットワーク接続が利用できない場合の情報メッセージ「現在接続できません」を表示するPodcastsアプリ。", width="800", height="440" %} <figcaption>ネットワーク接続のないPodcastsアプリ。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %}Webでこれを実行する方法{% endDetailsSummary %}Podcastsアプリは、いわゆるアプリシェルモデルに従っています。左側のメニューアイコンやコアプレーヤーのUIアイコンなどの装飾画像を含め、コアアプリを表示するために必要なすべての静的コンテンツはローカルキャッシュに保存されます。<b>トップチャート</b>データなどの動的コンテンツはオンデマンドでのみ読み込まれ、読み込みに失敗した場合はローカルキャッシュに保存されたフォールバックコンテンツが表示されます。このアーキテクチャモデルをWebアプリに適用する方法については、<a href="https://developers.google.com/web/fundamentals/architecture/app-shell">アプリシェルモデル</a>の記事を参照してください。 {% endDetails %}
+
+## オフラインコンテンツが利用可能で、メディアが再生可能
+
+オフラインでも、左側のドロワーから[**ダウンロード済み**] セクションに移動して、ダウンロードしたポッドキャストエピソードを楽しむことができます。これらのエピソードは、すぐに再生でき、アートワークや説明などのすべてのメタデータとともに表示されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="ポッドキャスト再生のエピソードをダウンロードしたPodcastsアプリ。", width="800", height="440" %} <figcaption>ダウンロードしたポッドキャストのエピソードは、ネットワークがなくても再生できます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}以前にダウンロードしたメディアコンテンツは、たとえば<a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Workbox</a>ライブラリの<a href="https://developer.chrome.com/docs/workbox/">キャッシュに保存された音声と動画の再生</a>レシピを使用して、キャッシュから再生できます。その他のコンテンツは、常にキャッシュまたはIndexedDBに保存できます。詳細については、<a href="/storage-for-the-web/">Webのストレージ</a>の記事を読み、どのストレージテクノロジーをいつ使用するかを確認してください。使用可能なメモリ量が少なくなっても、消去されずに永続的に保存する必要があるデータの場合には、<a href="/persistent-storage/">永続ストレージAPI</a>を使用できます。 {% endDetails %}
+
+## プロアクティブなバックグラウンドダウンロード
+
+オンライン接続されたときには、`http 203`などのクエリでコンテンツを検索できます。また、検索結果[HTTP 203ポッドキャスト](/podcasts/)を購読することを決めたときには、シリーズの最新エピソードがすぐにダウンロードされ、問い合わせはありません。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="購読直後にポッドキャストの最新エピソードをダウンロードするPodcastsアプリ。", width="800", height="658" %} <figcaption>ポッドキャストを購読すると、最新のエピソードがすぐにダウンロードされます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}ポッドキャストエピソードのダウンロードには、時間がかかる場合があります。<a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a>を使用すると、ダウンロードをブラウザに委任できます。ブラウザは、ダウンロードをバックグラウンドで処理します。 Androidでは、さらにブラウザがこれらのダウンロードをオペレーティングシステムに委任することもできるため、ブラウザを継続的に実行する必要はありません。ダウンロードが完了すると、アプリのサービスワーカーが起動し、応答の処理方法を決定できます。 {% endDetails %}
+
+## 他のアプリケーションとの共有と連携
+
+Podcastsアプリは、他のアプリケーションと自然に統合されます。たとえば、好きなエピソードを右クリックすると、メッセージアプリなど、デバイス上の他のアプリと共有できます。また、システムクリップボードとも自然に統合されます。任意のエピソードを右クリックして、そのエピソードへのリンクをコピーできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="[エピソードの共有] > [メッセージ] オプションが選択されたポッドキャストエピソードで呼び出されたPodcastsアプリのコンテキストメニュー。", width="800", height="392" %} <figcaption>ポッドキャストエピソードをメッセージアプリに共有する。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/web-share/">Web Share API</a>と<a href="/web-share-target/">Web Share Target API</a>を使用すると、デバイスの他のアプリケーションとの間でテキスト、ファイル、リンクをアプリで共有および受信できます。Webアプリがオペレーティングシステムに組み込まれた右クリックメニューにメニュー項目を追加することはまだできませんが、デバイスの他のアプリとリンクする方法は他にもたくさんあります。<a href="/image-support-for-async-clipboard/">Async Clipboard API</a>を使用すると、テキストおよび画像データ (PNG画像) をプログラムで読み取り、システムクリップボードに書き込むことができます。Androidでは、<a href="/contact-picker/">Contact Picker API</a>を使用して、デバイスの連絡先管理からエントリを選択できます。プラットフォーム固有のアプリとPWAの両方を提供している場合は、<a href="/get-installed-related-apps/">Get Installed Related Apps API</a>を使用して、プラットフォーム固有のアプリがインストールされているかどうかを確認できます。インストールされている場合は、ユーザーにPWAのインストールや承認、Webプッシュ通知の承諾を促す必要はありません。 {% endDetails %}
+
+## バックグラウンドアプリ更新
+
+Podcastsアプリの設定で、新しいエピソードを自動的にダウンロードするようにアプリを構成できます。そのことを考える必要さえありません。更新されたコンテンツが常に提供されているのです。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="[Podcastsの更新] オプションが [毎時] に設定されている [一般] セクションのPodcastsアプリの設定メニュー。", width="800", height="465" %} <figcaption>1時間ごとに新しいポッドキャストエピソードをチェックするように構成されたPodcasts。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/periodic-background-sync/">Periodic Background Sync API</a>を使用すると、アプリを実行しなくても、バックグラウンドでコンテンツを定期的に更新できます。つまり、新しいコンテンツがプロアクティブに利用可能であるため、ユーザーはいつでもすぐにコンテンツを掘り下げることができます。 {% endDetails %}
+
+## クラウド上で同期された状態
+
+同時に、サブスクリプションは、所有しているすべてのデバイス間で同期されます。シームレスな世界では、ポッドキャストのサブスクリプションを手動で同期することを気にする必要はありません。同様に、モバイルデバイスのメモリが、デスクトップですでに聴いたエピソードによって消費されることを心配する必要もありません。逆も同様です。再生状態は同期されたままで、聴いたエピソードは自動的に削除されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="[デバイス間でサブスクリプションを同期する] オプションがアクティブになっている [詳細] セクションのPodcastsの設定メニュー。", width="800", height="525" %} <figcaption>状態はクラウド上で同期されます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法 {% endDetailsSummary %}アプリ状態データの同期タスクは、<a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a>に委任できます。同期処理自体は、ユーザーがアプリを再度閉じた場合を含め<em>最終的</em>に実行されれば、即時実行する必要はありません。{% endDetails %}
+
+## ハードウェアメディアキーコントロール
+
+Chromeブラウザでニュースページを読んでいるときなど、別のアプリケーションで忙しいときでも、ノートPCのメディアキーを使用してPodcastsアプリを制御できます。前後にスキップするためだけにアプリに切り替える必要はありません。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="Apple MacBook Pro Magic Keyboardと注釈付きメディアキー。", width="800", height="406" %} <figcaption>メディアキーを使用すると、Podcastsアプリ (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">出典</a>) を制御できます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}メディアキーは<a href="/media-session/">Media Session API</a>でサポートされています。このように、ユーザーは物理キーボードやヘッドフォンのハードウェアメディアキーを利用したり、スマートウォッチのソフトウェアメディアキーからWebアプリを制御したりすることもできます。さらにシーク操作をスムーズにするには、オープニングクレジットやチャプターの境界を通過するなど、ユーザーがコンテンツの重要な部分をシークするときに<a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">振動パターン</a>を送信することができます。{% endDetails %}
+
+## マルチタスクとアプリショートカット
+
+もちろん、いつでもどこからでもPodcastsアプリにマルチタスクで戻ることができます。アプリには明確に識別できるアイコンがあり、デスクトップやアプリケーションドックに配置することもできるので、好きなときにPodcastsをすぐに起動できます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="いくつかのアプリアイコンから選択できるmacOSタスクスイッチャー。そのうちの1つはPodcastsアプリです。", width="800", height="630" %} <figcaption>Podcastsアプリに戻るマルチタスク。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}デスクトップとモバイルの両方のプログレッシブWebアプリを、ホーム画面、スタートメニュー、またはアプリケーションドックにインストールできます。インストールは、プロアクティブなプロンプトに基づいて行うことも、アプリ開発者が完全に制御することもできます。基本的な情報については、<a href="/install-criteria/">What does it take to be installable?</a>記事をお読みください。マルチタスクの場合、PWAはブラウザから独立して表示されます。 {% endDetails %}
+
+## コンテキストメニューのクイックアクション
+
+最も一般的なアプリのアクションである **[新しいコンテンツの検索]** と **[新しいエピソードの確認]** は、Dockのアプリのコンテキストメニューから直接利用できます。ログイン時に **[オプション]** メニューからアプリを開くこともできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="[検索] および [新しいエピソードの確認] オプションを表示するPodcastsアプリアイコンのコンテキストメニュー。", width="534", height="736" %} <figcaption>クイックアクションは、アプリアイコンからすぐに利用できます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/app-shortcuts/">PWAのWebアプリマニフェストでアプリアイコンのショートカット</a>を指定することにより、ユーザーがアプリアイコンから直接アクセスできる一般的なタスクへのクイックルートを登録できます。macOSなどのオペレーティングシステムでは、ユーザーが、ログイン時にアプリアイコンを右クリックしてアプリを起動するように設定することもできます。<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">ログイン時</a>に実行するための提案は現在作業中です。 {% endDetails %}
+
+## デフォルトのアプリとして機能する
+
+他のiOSアプリケーション、さらにはWebサイトや電子メールでさえ、 `podcasts://` URLスキームを活用することでPodcastsアプリと統合できます。ブラウザで[`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903)などのリンクをたどると、Podcastsアプリが表示され、ポッドキャストを購読するか聴くかを決めることができます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="ポッドキャストアプリを開くかどうかをユーザーに確認するダイアログを表示するChromeブラウザ。", width="800", height="492" %} <figcaption>Podcastsアプリはブラウザから直接開くことができます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}完全にカスタムのURLスキームを処理することはまだ可能ではありませんが、PWAの<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URLプロトコル処理</a>の提案は現在作業中です。現在では、<a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>と<code>web+</code>スキームプレフィックスが最善の代替手段です。 {% endDetails %}
+
+## ローカルファイルシステムの統合
+
+すぐには思いつかないかもしれませんが、Podcastsアプリは自然にローカルファイルシステムと統合されます。ポッドキャストエピソードをダウンロードすると、ノートPCでは`~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`に保存されます。ただし、`~/Documents`とは異なり、このディレクトリは当然標準のユーザーが直接アクセスすることを意図したものではありません。ファイル以外の保存メカニズムは、[オフラインコンテンツ](#offline-content-available-and-media-playable)セクションを参照してください。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="macOS FinderがPodcastsアプリのシステムディレクトリに移動しました。", width="800", height="337" %} <figcaption>ポッドキャストのエピソードは、特別なシステムアプリフォルダに保存されます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}<a href="/file-system-access/">File System Access API{/a0を使用すると、開発者はデバイスのローカルファイルシステムにアクセスできます。直接使用することも、APIをサポートしていないブラウザのフォールバックを透過的に提供する</a><a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access</a>サポートライブラリ経由で使用することもできます。セキュリティ上の理由から、システムディレクトリはWebアクセスできません。 {% endDetails %}
+
+## プラットフォームのルックアンドフィール
+
+PodcastsなどのiOSアプリケーションには自明なより微妙なことがあります。つまり、どのテキストラベルも選択できず、すべてのテキストがコンピュータのシステムフォントと融合されています。また、システムカラーテーマ (ダークモード) の選択も優先されます。
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="ダークモードのPodcastsアプリ。", width="800", height="463" %} <figcaption>Podcastsアプリは、ライトモードとダークモードをサポートしています。</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="ライトモードのPodcastsアプリ。", width="800", height="463" %} <figcaption>アプリはデフォルトのシステムフォントを使用します。</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}<a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select</code></a> CSSプロパティと値<a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>none</code></a>を利用することで、UI要素が誤って選択されるのを防ぐことができます。ただし、<em>アプリのコンテンツ</em>を選択不能にする目的でこのプロパティをむやみに使用しないでください。ボタンのテキストなどのUI要素でのみ使用してください。<a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> CSSプロパティの値<a href="https://developer.mozilla.org/docs/Web/CSS/font-family#<generic-name>:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a>では、アプリに使用するシステムのデフォルトUIフォントを指定することができます。<a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>選択を優先し、オプションの<a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">ダークモードトグル</a>でそれをオーバーライドすることで、アプリはユーザーの配色設定に従うことができます。決定するもう1つの点は、スクロール領域の境界に達したときにブラウザでどのような処理を実行すべきかということかもしれません。たとえば、カスタム<em>プルを実装して更新</em>します。これは、<a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a>プロパティで可能です。 {% endDetails %}
+
+## カスタマイズされたタイトルバー
+
+Podcastsアプリウィンドウを見ると、Safariブラウザウィンドウなどの従来の統合されたタイトルバーとツールバーがなく、メインプレーヤーウィンドウにドッキングされたサイドバーのようなカスタマイズされたエクスペリエンスになっていることがわかります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="Safariブラウザの統合されたタイルバーとツールバー。", width="800", height="40" %} <figcaption></figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="Podcastsアプリの分割されたカスタムタイトルバー。", width="800", height="43" %} <figcaption>SafariとPodcastsのカスタマイズされたタイトルバー。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法 {% endDetailsSummary %} 現在は不可能ですが、現在、<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">タイトルバーのカスタマイズ</a>に取り組んでいます。ただし、Webアプリマニフェストの <a href="/add-manifest/#display"><code>display</code></a>および<a href="/add-manifest/#theme-color"><code>theme-color</code></a>プロパティを指定して、アプリケーションウィンドウの外観を決定し、どのデフォルトブラウザコントロールが表示されるのか (または何も表示されないのか) を決定することができ (推奨され) ます。{% endDetails %}
+
+## 軽快なアニメーション
+
+Podcastsでは、アプリ内アニメーションは軽快でスムーズです。たとえば、右側の**エピソードノート**ドロワーを開くと、スマートにスライドします。ダウンロードから1つのエピソードを削除すると、残りのエピソードが浮き上がり、削除されたエピソードによって解放された画面領域を使用します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="[エピソードノート] ドロワーが展開されたPodcastsアプリ。", width="800", height="463" %} <figcaption>ドロワーを開くときのようなアプリ内アニメーションは軽快です。</figcaption></figure>
+
+<a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}</a><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">アニメーションとパフォーマンス</a>の記事で概説されている多数のベストプラクティスを考慮すると、Webでの高パフォーマンスアニメーションは確かに可能です。ページ制御されたコンテンツやメディアカルーセルで一般的に見られるスクロールアニメーションは、<a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSSスクロールスナップ</a>機能を使用することで大幅に改善できます。完全に制御するには、<a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a>を使用できます。 {% endDetails %}
+
+## アプリの外部に表示されたコンテンツ
+
+iOSのPodcastsアプリは、実際のアプリケーション以外の場所、たとえば、システムのウィジェットビューや、Siri提案の形式でコンテンツを表示できます。タップするだけで操作できるプロアクティブな使用状況ベースの注意喚起があると、Podcastsなどのアプリの再エンゲージメント率が大幅に向上する可能性があります。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="ポッドキャストの新しいエピソードを提案するPodcastsアプリを表示するiOSウィジェットビュー。", width="751", height="1511" %} <figcaption>アプリのコンテンツはメインのPodcastsアプリの外部に表示されます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/content-indexing-api/">Content Index API</a>を使用すると、アプリケーションはPWAのどのコンテンツがオフラインで利用できるかをブラウザに通知できます。これにより、ブラウザはこのコンテンツをメインアプリの外部に表示できます。アプリで関心のあるコンテンツを<a href="https://developers.google.com/search/docs/data-types/speakable">読み上げ可能な</a>音声再生に適したものとしてマークアップし、一般的に<a href="https://developers.google.com/search/docs/guides/search-gallery">構造化マークアップ</a>を使用することで、検索エンジンやGoogleアシスタントなどの仮想アシスタントが製品を最適な形で提示できるようになります。 {% endDetails %}
+
+## ロック画面のメディアコントロールウィジェット
+
+ポッドキャストエピソードの再生中、Podcastsアプリは、エピソードのアートワーク、エピソードのタイトル、ポッドキャスト名などのメタデータを備えた美しいコントロールウィジェットをロック画面に表示します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="豊富なメタデータを含むポッドキャストエピソードを表示するロック画面のiOSメディア再生ウィジェット。", width="751", height="1511" %} <figcaption>アプリで再生するメディアはロック画面から制御できます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/media-session/">Media Session API</a>を使用すると、アートワーク、トラックタイトルなどのメタデータを指定して、ロック画面、スマートウォッチ、またはブラウザの他のメディアウィジェットに表示できます。{% endDetails %}
+
+## プッシュ通知
+
+プッシュ通知は、Web上で少し煩わしいものになっています ([通知プロンプトは今ではかなり静かに](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html)なっていますが)。しかし、適切に使用すれば、多くの価値を付加できます。たとえば、iOS Podcastsアプリは、オプションで、購読しているポッドキャストの新しいエピソードを通知したり、新しいエピソードを推奨したり、新しいアプリの機能を通知したりできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="[通知] 設定画面のiOS Podcastsアプリ。[新しいエピソード] の通知トグルがアクティブになっています。", width="751", height="1511" %} <figcaption>アプリはプッシュ通知を送信して、新しいコンテンツをユーザーに通知できます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}<a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a>を使用すると、アプリがプッシュ通知を受信できるため、PWAに関する注目すべきイベントについてユーザーに通知できます。将来の確認済みの時間に発生し、ネットワーク接続を必要としない通知の場合は、<a href="/notification-triggers/">Notification Triggers API</a>を使用できます。 {% endDetails %}
+
+## アプリアイコンのバッジ
+
+私が購読しているポッドキャストの1つでは、新しいエピソードが利用可能になるといつでも、Podcastsのホーム画面アイコンにアプリアイコンバッジが表示され、アプリを確認するように邪魔にならない方法で通知します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="[バッジ] トグルがアクティブになっていることを示すiOS設定画面。", width="751", height="1511" %} <figcaption>バッジは、アプリケーションが新しいコンテンツについてユーザーに通知するためのスマートな方法です。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %}<a href="/badging-api/">Badging API</a>を使用してアプリアイコンバッジを設定できます。これは、PWAに「未読」アイテムという概念がある場合、または目立たないようにユーザーの注意をアプリに向ける手段が必要な場合に特に役立ちます。 {% endDetails %}
+
+## メディアの再生は省エネ設定よりも優先される
+
+ポッドキャストメディアの再生中は、画面がオフになることがありますが、システムはスタンバイモードになりません。アプリは、たとえば歌詞やキャプションを表示するために、オプションで画面を起動状態に保つこともできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="[Energy Saver] セクションのmacOS設定。", width="800", height="573" %} <figcaption>アプリは画面を起動状態に保つことができます。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} <a href="/wakelock/">Screen Wake Lock API</a>を使用すると、画面がオフになるのを防ぐことができます。Webでのメディア再生は、システムがスタンバイモードに切り替わるのを自動的に防ぎます。 {% endDetails %}
+
+## アプリストアでのアプリの検索
+
+PodcastsアプリはmacOSデスクトップエクスペリエンスの一部ですが、iOSではAppStoreからインストールする必要があります。`podcast`、`podcasts`、または`apple podcasts`を検索すると、すぐにAppStoreでアプリが表示されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="iOS App Storeで「podcasts」を検索するとPodcastsアプリが表示されます。", width="751", height="1511" %} <figcaption>ユーザーはアプリストアでアプリを検索することを学びました。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Webでこれを実行する方法{% endDetailsSummary %} AppleはAppStoreでのPWAを許可していませんが、Androidでは、<a href="/using-a-pwa-in-your-android-app/">信頼できるWebアクティビティにラップされた</a>PWAを送信できます。 <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a>スクリプトにより、これは簡単な操作になります。このスクリプトは、コマンドラインを実行せずに使用できる<a href="https://www.pwabuilder.com/">PWABuilder</a>のAndroidアプリのエクスポート機能を内部的に強化するものでもあります。 {% endDetails %}
+
+## 機能の概要
+
+以下の表は、すべての機能の概要を簡潔に説明し、Webで実現するために役立つリソースの一覧を示します。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>機能</th>
+        <th>Webで実行するために役立つリソース</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">オフラインで実行可能</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/architecture/app-shell">アプリシェルモデル</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#offline-content-available-and-media-playable">オフラインコンテンツが利用可能、メディア再生可能</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">キャッシュに保存された音声と動画を再生</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">ワークボックスライブラリ</a></li>
+            <li><a href="/storage-for-the-web/">ストレージAPI</a></li>
+            <li><a href="/persistent-storage/">永続ストレージAPI</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">プロアクティブなバックグラウンドダウンロード</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">他のアプリケーションとの共有と連携</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">Web Share API</a></li>
+            <li><a href="/web-share-target/">Web Share Target API</a></li>
+            <li><a href="/image-support-for-async-clipboard/">Async Clipboard API</a></li>
+            <li><a href="/contact-picker/">Contact Picker API</a></li>
+            <li><a href="/get-installed-related-apps/">Get Installed Related Apps API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">さわやかな背景アプリ</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">Periodic Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">クラウド上で同期された状態</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">ハードウェアメディアキーコントロール</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">マルチタスクとアプリのショートカット</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">インストール可能性の基準</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">コンテキストメニューのクイックアクション</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">アプリアイコンのショートカット</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">ログイン時に実行</a> (初期段階)</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">デフォルトのアプリとして機能する</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URLプロトコル処理</a> (初期段階)</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">ローカルファイルシステムの統合</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">File System Access API</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-accessライブラリ</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">プラットフォームのルックアンドフィール</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">ダークモードトグル</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">カスタマイズされたタイトルバー</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">タイトルバーのカスタマイズ</a> (初期段階)</li>
+            <li><a href="/add-manifest/#display">表示モード</a></li>
+            <li><a href="/add-manifest/#theme-color">テーマカラー</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">きびきびとしたアニメーション</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">アニメーションとパフォーマンスのヒント</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSSスクロールスナップ</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">アプリの外部に表示されたコンテンツ</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">Content Index API</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">読み上げ可能コンテンツ</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">構造化されたマークアップ</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">ロック画面メディアコントロールウィジェット</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">プッシュ通知</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a></li>
+            <li><a href="/notification-triggers/">Notification Triggers API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">アプリアイコンのバッジ</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">Badging API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">メディアの再生は省エネ設定よりも優先される</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">Screen Wake Lock API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">アプリストアでのアプリの検索</a></td>
+        <td>
+          <ul>
+            <li><a href="/using-a-pwa-in-your-android-app/">信頼できるWebアクティビティ</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code>ライブラリ</a></li>
+            <li><a href="https://www.pwabuilder.com/">PWABuilderツール</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## まとめ
+
+PWAは、2015年の導入以来、長い道のりを歩んできました。[ProjectFugu🐡](https://developer.chrome.com/blog/fugu-status)のコンテキストでは、会社横断的なChromiumチームが最後に残ったギャップを埋めるために取り組んでいます。この記事のアドバイスの一部だけに従うことで、アプリのような感覚に少しずつ近づき、ユーザーに「単なるWebサイト」を扱っていることを忘れさせることができます。正直なところ、ほとんどの人にとって*実際の*アプリのように感じられる限り、アプリがどのように構築されているか (そしてなぜそれらが必要なのか) は気にしないはずです。
+
+## 謝辞
+
+この記事は、[Kayce Basques](/authors/kaycebasques/)氏、[Joe Medley](/authors/joemedley/)氏、[Joshua Bell](https://github.com/inexorabletash)氏、[Dion Almaer](https://blog.almaer.com/)氏、[Ade Oshineye](https://blog.oshineye.com/)氏、[Pete LePage](/authors/petelepage/)氏、[Sam Thorogood](/authors/samthor/)氏、[Reilly Grant](https://github.com/reillyeon)氏、[Jeffrey Yasskin](https://github.com/jyasskin)氏によってレビューされました。
diff --git a/src/site/content/ja/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/ja/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..4070637799d
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,98 @@
+---
+layout: codelab
+title: インストール可能にする
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description: このコードラボでは、beforeinstallprompt イベントを使用してサイトをインストール可能にする方法を学びます。
+glitch: make-it-installable?path=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+この Glitch には、[非常に単純な Service Worker](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js) や [Web アプリマニフェスト](https://glitch.com/edit/#!/make-it-installable?path=manifest.json)など、プログレッシブ Web アプリをインストール可能にするために必要な重要なコンポーネントがすでに含まれています。また、デフォルトで非表示になっているインストールボタンもあります。
+
+## beforeinstallprompt イベントをリスンする
+
+ブラウザが `beforeinstallprompt` イベントを発すると、プログレッシブ Web アプリをインストールできるようになり、インストールボタンをユーザーに表示できるようになります。`beforeinstallprompt` イベントは、PWA が[インストール可能性の基準](/install-criteria/)を満たしたときに発生します。
+
+{% Instruction 'remix', 'ol' %}
+
+1. `beforeinstallprompt` イベントハンドラーを `window` オブジェクトに追加します。
+2. `event` をグローバル変数として保存します。プロンプトを表示するために後で必要になります。
+3. インストールボタンを非表示状態を解除します。
+
+コード：
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // モバイルでミニ情報バーが表示されないようにする。
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // イベントをスタッシュして後でトリガーできるようにする。
+  window.deferredPrompt = event;
+  // インストールボタンのコンテナから 'hidden' クラスを削除する。
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## インストールボタンのクリックを処理する
+
+インストールプロンプトを表示するには、保存された `beforeinstallprompt` イベントで `prompt()` を呼び出します。`prompt()` の呼び出しは、インストールボタンのクリックハンドラーで行われます。これは、`prompt()` がユーザーのジェスチャーによって呼び出されるためです。
+
+1. インストールボタンのクリックイベントハンドラーを追加します。
+2. 保存された `beforeinstallprompt` イベントで `prompt()` を呼び出します。
+3. プロンプトの結果をログに記録します。
+4. 保存された `beforeinstallprompt` イベントを null に設定します。
+5. インストールボタンを非表示にします。
+
+コード:
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // デファーされたプロンプトは使用できません。
+    return;
+  }
+  // インストールプロンプトを表示する。
+  promptEvent.prompt();
+  // 結果をログに記録する
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // デファーされたプロンプトの変数をリセット。
+  // prompt() は1回しか呼び出せません。
+  window.deferredPrompt = null;
+  // インストールボタンを非表示にする。
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## インストールイベントを追跡する
+
+インストールボタンを使用してプログレッシブ Web アプリをインストールするのは、ユーザーが PWA をインストールできる方法のひとつに過ぎません。Chrome のメニュー、ミニ情報バー、および[オムニボックスのアイコンを](/promote-install/#browser-promotion)使用することもできます。`appinstalled` イベントをリスンすることで、これらすべてのインストール方法を追跡できます。
+
+1. `appinstalled` イベントハンドラーを `window` オブジェクトに追加します。
+2. インストールイベントを分析またはその他のメカニズムに記録します。
+
+コード:
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // deferredPrompt をクリアしてガベージコレクションを行えるようにする
+  window.deferredPrompt = null;
+});
+```
+
+## 参考文献
+
+おめでとうございます。アプリがインストール可能になりました！
+
+以下に、これから実行できる追加内容を紹介します。
+
+- [アプリがホーム画面から起動されたかどうかを検出する](/customize-install/#detect-mode)
+- [代わりに、OS のアプリインストールプロンプトを表示する](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/ja/progressive-web-apps/customize-install/index.md b/src/site/content/ja/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..49d662c107c
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: 独自のアプリ内インストールエクスペリエンスを提供する方法
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2-
+
+  beforeinstallpromptイベントを使用して、カスタマイズしたシームレスなアプリ内インストールエクスペリエンスをユーザーに提供します。
+tags:
+  - progressive-web-apps
+---
+
+多くのブラウザーでは、プログレッシブウェブアプリ（PWA）のインストールをPWAのユーザーインターフェイス内で直接有効にして促進することができます。インストール（以前はAdd to Home Screenと呼ばれることもありました）を使用すると、ユーザーはモバイルデバイスまたはデスクトップデバイスにPWAを簡単にインストールできます。PWAをインストールすると、ユーザーのランチャーに追加され、インストールされている他のアプリと同じように実行できるようになります。
+
+[ブラウザが提供するインストールエクスペリエンス](/promote-install/#browser-promotion)に加えて、独自のカスタムインストールフローをアプリ内で直接提供することができます。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Spotify PWAで提供されるInstall Appボタン", width="491", height="550"%}<figcaption> Spotify PWAで提供される「Install App」ボタン</figcaption></figure>
+
+インストールを促すかどうかを検討するときは、ユーザーが通常どのようにPWAを使用しているかを考えると良いでしょう。たとえば、1週間にPWAを複数回も使用するユーザーがいる場合、これらのユーザーにとっては、スマートフォンのホーム画面またはデスクトップのオペレーティングシステムの[スタート]メニューから便利にアプリを起動できると便利でしょう。一部の生産性アプリやエンターテインメントアプリにとっては、インストールされた`standalone`モードまたは`minimal-ui`モードでウィンドウからブラウザーのツールバーを削除することによって画面領域が広がるということがメリットになるでしょう。
+
+## インストールを促す方法 {: #promote-installation}
+
+プログレッシブウェブアプリがインストール可能であることを示し、カスタマイズしたアプリ内インストールのフローを提供するには、以下のことを行います。
+
+1. `beforeinstallprompt`イベントをリッスンする。
+2. `beforeinstallprompt`イベントを保存して、後でインストールフローをトリガーできるようにする。
+3. PWAがインストール可能であることをユーザーに知らせ、アプリ内インストールのフローを開始するボタンまたはその他の要素を提供する。
+
+{% Aside %} `beforeinstallprompt`イベントと`appinstalled`イベントは、ウェブアプリマニフェストの仕様から独自の[インキュベーター](https://github.com/WICG/beforeinstallprompt)に移動されました。Chromeチームは、引き続きこれらのイベントをサポートしていきます。また、サポートを削除または廃止する予定はありません。GoogleのWeb DevRelチームは、カスタマイズされたインストールエクスペリエンスを提供するために、これらのイベントを使用することを引き続き推奨しています。{% endAside %}
+
+### `beforeinstallprompt`イベントをリッスンする {: #beforeinstallprompt}
+
+プログレッシブウェブアプリが必要な[インストール基準](/install-criteria/)を満たしている場合、ブラウザは`beforeinstallprompt`イベントを発生させます。イベントへの参照を保存し、ユーザーインターフェイスを更新することにより、ユーザーがPWAをインストールできることを示します。これを以下のコードで説明します。
+
+```js
+// Initialize deferredPrompt for use later to show browser install prompt.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent the mini-infobar from appearing on mobile
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI notify the user they can install the PWA
+  showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %}対象のアプリがインストール可能であることをユーザーに知らせ、アプリ内インストールのフローを提供するために使用できる[パターン](/promote-install/)はたくさんあります。たとえば、ヘッダーのボタン、ナビゲーションメニューのアイテム、コンテンツフィードなどを使えます。{% endAside %}
+
+### アプリ内インストールのフロー {: #in-app-flow}
+
+アプリ内インストールを提供するには、ユーザーがクリックしてアプリをインストールできるボタンまたはその他のインターフェース要素を提供します。要素がクリック`beforeinstallprompt`されたら、保存されている`beforeinstallprompt`イベントに対して`prompt()`を呼び出します (`deferredPrompt`変数に格納されています)。それにより、ユーザーにはモーダルインストールダイアログが表示され、PWAをインストールすることをユーザーに確認します。
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Hide the app provided install promotion
+  hideInstallPromotion();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.userChoice;
+  // Optionally, send analytics event with outcome of user choice
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null;
+});
+```
+
+`userChoice`プロパティは、ユーザーの選択によって解決されるPromiseです。延期されたイベントに対して`prompt()`を呼び出せるのは1回だけです。ユーザーがそれを無視した場合は、`beforeinstallprompt`イベントが再度発生するまで待機する必要があります。通常は、`userChoice`プロパティが解決された直後に発生します。
+
+{% Aside 'codelab' %} [beforeinstallpromptイベントを使用してサイトをインストール可能にします](/codelab-make-installable)。 {% endAside %}
+
+## PWAが正常にインストールされたことを検出する {: #detect-install}
+
+`userChoice`プロパティを使用すると、ユーザーがユーザーインターフェイス内からアプリをインストールしたかどうかを判断できます。ただし、ユーザーがアドレスバーまたはその他のブラウザコンポーネントからPWAをインストールした場合は、`userChoice`を使っても効果はありません。代わりに、`appinstalled`イベントをリッスンすると良いでしょう。このイベントは、PWAのインストールに使用されているメカニズムを問わず、PWAがインストールされるたびに発生します。
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Hide the app-provided install promotion
+  hideInstallPromotion();
+  // Clear the deferredPrompt so it can be garbage collected
+  deferredPrompt = null;
+  // Optionally, send analytics event to indicate successful install
+  console.log('PWA was installed');
+});
+```
+
+## PWAがどのように起動されたかを検出する {: #detect-launch-type}
+
+CSS `display-mode`メディアクエリは、PWAがどのように起動されたかを示します (ブラウザタブで起動されたのか、インストールされたPWAとして起動されたのか)。このおかげで、アプリの起動方法に応じてさまざまなスタイルを適用することができます。たとえば、インストールされたPWAとして起動するときは、常にインストールボタンを非表示にし、戻るボタンを提供します。
+
+### PWAがどのように開始されたかを追跡する
+
+ユーザーがPWAを起動する方法を追跡するには、`matchMedia()`を使って`display-mode`メディアクエリをテストします。iOSのSafariではまだこれがサポートされていないため、 `navigator.standalone`確認する必要があります。これは、ブラウザがスタンドアロンモードで実行されているかどうかを示すブール値を返します。
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### 表示モードがいつ変わるかを追跡する
+
+ユーザーが`standalone`と`browser tab`を切り替えているかどうかを追跡するには、`display-mode`メディアクエリへの変更をリッスンします。
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### 現在の表示モードに基づいてUIを更新する
+
+インストールされたPWAとして起動されたときにPWAに異なる背景色を適用するには、条件付きCSSを使用します。
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## アプリのアイコンと名前を更新する
+
+アプリ名を更新したり、新しいアイコンを提供したりする必要がある場合はどうすればいいでしょうか？こうした変更がChromeにどのタイミングで、どのように反映されるかは、[How Chrome handles updates to the web app manifest](/manifest-updates/)をお読みください。
diff --git a/src/site/content/ja/progressive-web-apps/drive-business-success/index.md b/src/site/content/ja/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..54d6d70b64b
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: プログレッシブWebアプリでビジネスの成功を推進する
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: PWAの信頼できるビジネスケースを構築します。投資するタイミングと、投資の成功を測定する方法について説明します。
+tags:
+  - progressive-web-apps
+---
+
+プログレッシブWebアプリは、Webサイトを最新化し、ユーザーの新しい期待に適応するために、多くの企業のロードマップに取り入れられています。そして、すべての新しい概念や技術的能力と同様に、顧客が望んでいるものなのか、ビジネスをどれだけ成長させるのか、技術的に実現可能かという疑問も生じます。
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="ステークホルダーを特定する", width="800", height="254" %}
+
+デジタル戦略を形作るために、多くのステークホルダーが関与します。プロダクトマネージャーとCMOは各機能のビジネスへの影響を共同で所有し、CTOは技術の実現可能性と信頼性を評価します。また、UX研究者は機能が実際の顧客の問題に対応できることを検証します。
+
+この記事の目的は、このような3つの疑問に答え、PWAプロジェクトを形成できるように支援することです。顧客のニーズから始めて、これをPWA機能に変換し、各機能がもたらすビジネスへの影響の測定について重点的に扱います。
+
+## PWAは顧客のニーズを解決する {: #solve-customer-needs }
+
+Googleで製品を開発するときには、「[ユーザーに焦点を合わせれば、あとはうまくいく](https://www.google.com/about/philosophy.html)」というルールに従っています。*ユーザーファーストを*考えてください。顧客のニーズは何か、PWAでどのようにそれらを提供するのかを考えれば良いのです。
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="顧客のニーズを特定する", width="800", height="262" %}
+
+ユーザーを研究すると、次のような興味深いパターンがいくつか見つかります。
+
+- ユーザーはモバイルでの遅延や信頼性の欠如を嫌います。モバイルの遅延によって引き起こされるストレスのレベルは、[ホラー映画を見るのに匹敵](https://blog.hubspot.com/marketing/mobile-website-load-faster)します。
+- スマートフォンユーザーの50%は、[アプリをダウンロードしたくない](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/)ため、閲覧や買い物の際に会社のモバイルサイトを使用する可能性が高くなっています。
+- アプリをアンインストールする主な理由の1つは、[ストレージが限られている](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/)ことです (通常、インストールされたPWAはたったの1MB未満しか占有しません)。
+- スマートフォンユーザーは、製品に[関連する推奨事項](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/)を提供するモバイルサイトから購入する可能性が高く、スマートフォンユーザーの85%は[モバイル通知が役立つ](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/)と述べています。
+
+このような観察から、顧客は、高速で、インストール可能で、信頼性が高く、魅力的な (F.I.R.E.) エクスペリエンスを好むことがわかりました。
+
+## PWAは最新のWeb機能を活用する {: #modern-capabilities }
+
+PWAは、高速でインストール可能、信頼性が高く、魅力的なサイトにすることで、顧客のニーズを満たすことを目的とした一連のベストプラクティスと最新のWeb APIを提供します。
+
+たとえば、サービスワーカーを使用して[リソースをキャッシュに保存](/service-workers-cache-storage/)し、[予測プリフェッチ](/precache-with-workbox/)を実行すると、サイトの速度と信頼性が向上します。サイトをインストール可能にすると、顧客がホーム画面またはアプリランチャーから直接サイトにアクセスできるようになります。また、[Webプッシュ通知](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices)などの新しいAPIを使用すると、パーソナライズされたコンテンツを使用してユーザーを簡単にもう一度引き寄せ、ロイヤルティを生み出すことができます。
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="新しい機能によるユーザーエクスペリエンスの向上", width="800", height="393" %}
+
+## ビジネスへの影響を理解する{: #business-impact }
+
+ビジネスの成功の定義は、活動内容によっては多岐にわたることがあります。
+
+- サービスに長い時間を費やしているユーザー
+- リードの直帰率の低下
+- コンバージョン率の向上
+- リピーターを増やす
+
+ほとんどのPWAプロジェクトでは、モバイルコンバージョン率が高くなり、多数の[PWAケーススタディ](https://www.pwastats.com/)から詳細を学ぶことができます。目的によっては、ビジネスにとってより意味のあるPWAのいくつかの側面に優先順位を付けたい場合がありますが、それはまったく問題ありません。 PWAの機能は、個別に選択して起動できます。
+
+では、これらの優れた各F.I.R.E機能のビジネスへの影響を測定します。
+
+### 高速Webサイトのビジネスへの影響{: #impact-fast }
+
+[Deloitte Digitalの最近の調査](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html)によると、ページ速度はビジネスメトリクスに大きな影響を及ぼします。
+
+さまざまな方法で、サイトの速度を最適化して、すべてのユーザーの重要なユーザージャーニーを最適化することができます。どこから始めればよいかわからない場合は、[Fast](/fast/)セクションを参照して、[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)を使用し、最も重要な項目の修正を優先してください。
+
+速度の最適化に取り組むときは、適切なツールとメトリックを使用してサイトの速度を頻繁に測定し、進捗状況を監視します。たとえば、[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)を使用してメトリックを測定し、[「良好な」Core Web Vitals](/vitals/#core-web-vitals)といった明確な目標を修正し、[ビルドプロセスにパフォーマンスバジェット](/incorporate-performance-budgets-into-your-build-tools/)を組み込みます。毎日の測定と[「速度の価値」の方法論](/value-of-speed/)のおかげで、速度の増分的な変化の影響を分離し、作業によって生み出された収益の増加分を計算できます。
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="速度の値を測定し、それをコンバージョンと相関させます", width="800", height="306" %}
+
+Ebayは、[速度を2019年の会社の目標](/shopping-for-speed-on-ebay/)にし、パフォーマンスバジェット、クリティカルパスの最適化、予測プリフェッチなどの手法を使用しました。また、検索ページの読み込み時間が100ミリ秒改善するごとに、カードへの追加数が0.5％増加すると結論付けました。
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="読み込み時間が100ミリ秒改善された結果、eBayのカート数が0.5%増加しました", width="800", height="184" %}
+
+### インストール可能なWebサイトのビジネスへの影響{: #impact-installable }
+
+なぜユーザーにPWAをインストールしてもらいたいのでしょうか。それは、簡単にサイトにアクセスできるようにするためです。Androidアプリのインストールで、少なくとも3つのステップ (Play Storeへのリダイレクト、ダウンロード、ファネル最上位でのAndroidアプリの再起動) が追加される場合、PWAのインストールはワンクリックでシームレスに実行され、ユーザーが現在のコンバージョンファネルから離れることはありません。
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="インストールエクスペリエンスはシームレスであること", width="800", height="239" %}
+
+インストールすると、ユーザーはホーム画面のアイコンからワンクリックで起動したり、アプリを切り替えるときにアプリトレイに表示したり、アプリの検索結果から見つけたりすることができます。このアプリは動的Discover-Launch-Switchと呼ばれ、自由にアクセスできるようにするには、PWAをインストール可能にすることが非常に重要です。
+
+PWAは、デバイスの使い慣れた検出および起動画面からアクセスできるほか、プラットフォーム固有のアプリとまったく同じように起動します。スタンドアロンエクスペリエンスでは、ブラウザーとは別になります。さらに、アプリスイッチャーや設定などのOSレベルのデバイスサービスも利用できます。
+
+PWAをインストールするユーザーは、最もエンゲージメントの高いユーザーである可能性が高く、リピート訪問の増加、長いサイト滞在時間、高いコンバージョン率など、一時的なアクセスユーザーよりもエンゲージメントのメトリックが高く、多くの場合、モバイルデバイスのプラットフォーム固有のアプリユーザーと同等と言えます。
+
+PWAをインストール可能にするには、[基本条件](/install-criteria/)を満たす必要があります。これらの条件を満たすと、iOSを含むデスクトップとモバイルのユーザーエクスペリエンス内で[インストールをプロモーション](/promote-install/)できます。
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="PWAはどこにでもインストール可能", width="800", height="227" %}
+
+PWAのインストールのプロモーションを開始したら、PWAをインストールしているユーザーの数と、ユーザーがどのようにPWAを使用しているのかを測定する必要があります。
+
+サイトをインストールするユーザーの数を最大化するには、さまざまなプロモーションメッセージ (「1秒でインストール」、「ショートカットを追加して注文状況を追跡」など)、さまざまなプレイスメント (ヘッダーバナー、インフィード) を[テスト](https://pwa-book.awwwards.com/chapter-4)できます。ファネルのさまざまな段階 (2 番目にアクセスしたページ、予約後) でサイトを提案してみてください。
+
+ユーザーがサイトを離れる場所とリテンションを改善する方法を理解するために、次の4つの方法でインストールファネルを[測定](https://pwa-book.awwwards.com/chapter-8)できます。
+
+- インストール可能なユーザーの数
+- UIインストールプロンプトをクリックしたユーザーの数
+- インストールを承認および拒否したユーザーの数
+- インストールに成功したユーザーの数
+
+PWAインストールをすべてのユーザーにプロモーションしたり、少数のユーザーグループに限定して実験する慎重なアプローチを使用したりできます。
+
+数日後または数週間後には、ビジネスへの影響を測定するためのデータが得られているはずです。インストールされたショートカットからアクセスするユーザーはどのような行動を取っているのでしょうか。エンゲージメントやコンバージョン率は高くなっているのでしょうか。
+
+PWAをインストールしたユーザーをセグメント化するには、[`appinstalled`イベントを](/customize-install/#detect-install)追跡し、JavaScriptを使用して、[ユーザーがスタンドアロンモード (インストールされたPWAの使用状況を示す) であるかどうかを確認](/customize-install/#detect-launch-type)します。そして、これらの情報を分析追跡の変数またはディメンションとして使用します。
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="インストールの値を測定", width="800", height="253" %}
+
+[Weekendeskのケーススタディ](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf)は興味深いものです。インストール率を最大化するために2番目にアクセスしたしたページでインストールを提案したところ、ホーム画面のアイコンをクリックして戻ってきた顧客が宿泊を予約する確率は2倍以上になることが観察されました。
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="インストールしたユーザーのコンバージョン率は2.5倍高い", width="800", height="201" %}
+
+インストールは、ユーザーをサイトに引き戻し、顧客ロイヤルティを向上させるための優れた方法です。これらのプレミアムユーザー向けにエクスペリエンスをパーソナライズすることも考えられます。
+
+プラットフォーム固有のアプリがすでに導入されている場合でも、最初にアプリを提案してから、アプリのインストールバナーを拒否したり無視したりしたユーザーに対してPWAをプッシュするようにテストすることができます。 「セミエンゲージ」しているユーザーの中には、アプリストアベースのインストールのしきい値を満たしていない場合があります。このようなユーザーは、より軽量で摩擦が少ないと一般的に認識されているPWAのインストール可能性で対処できます。
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="PWAはセミエンゲージメントのユーザーにリーチできる", width="800", height="229" %}
+
+### 信頼できるWebサイトのビジネスへの影響{: #impact-reliable }
+
+ユーザーがオフラインのときに提供されるChrome Dinoゲームは、月に[2億7000万回](https://www.blog.google/products/chrome/chrome-dino/)以上プレイされます。この驚異的な数字は、特に、インド、ブラジル、メキシコ、インドネシアなどのモバイルデータの信頼性が低いか、モバイルデータが高額である市場では、ネットワークの信頼性が大きなチャンスであることを示しています。
+
+アプリストアからインストールされたアプリを起動すると、ユーザーはインターネットに接続しているかどうかに関係なく、アプリが開くことを期待します。プログレッシブWebアプリも例外ではありません。
+
+少なくとも、ネットワーク接続がないとアプリを利用できないことをユーザーに伝える簡単なオフラインページを用意する必要があります。次に、[オフラインで意味のある機能](https://pwa-book.awwwards.com/chapter-6)を提供することで、エクスペリエンスをさらに一歩進めることを検討してください。たとえば、チケットや搭乗券、オフラインのウィッシュリスト、コールセンターの連絡先情報、ユーザーが最近表示した記事やレシピなどへのアクセスを提供できます。
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="オフラインのときでも役立つ", width="800", height="243" %}
+
+[信頼できるユーザーエクスペリエンスを](https://pwa-book.awwwards.com/chapter-6)実装したら、それを測定できます。ネットワークがオフラインになり、再びネットワークに接続したときに、Webサイトに留まっているユーザーはどの地域で何人いるでしょうか。
+
+オフラインの使用量は、ユーザーが[オフラインまたはオンライン](https://pwa-book.awwwards.com/chapter-8)になったときに分析pingを記録することで測定できます。ネットワークに接続した後、何人のユーザーがWebサイトを閲覧し続けているかが示されます。
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivagoでは、再びオンラインになったときにユーザーの67%が閲覧を続けている", width="800", height="272" %}
+
+[Trivagoのケーススタディ](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)は、これがビジネス目標にどのように影響するかを示しています。オフライン期間によってセッションが中断されたユーザー (ユーザーの約3%) の場合、オンラインに戻ったときに、ユーザーの67%が引き続きサイトを閲覧しています。
+
+### ユーザーを惹き付けるWebサイトのビジネスへの影響{: #impact-engaging }
+
+Webプッシュ通知を使用すると、ユーザーはお気に入りのサイトからのタイムリーな更新をオプトインでき、カスタマイズされた関連コンテンツを効果的に再利用できます。
+
+ただし、これには注意が必要です。ユーザーが最初にアクセスしたときに、利点を提示せずにWeb通知に登録するようにユーザーに求めると、迷惑広告と見なされ、エクスペリエンスに悪影響を与える可能性があります。通知を許可するように求めるときには[ベストプラクティス](https://developers.google.com/web/fundamentals/push-notifications/permission-ux)に従い、列車の遅延、価格の追跡、在庫切れの製品などの関連する使用方法を示すことで、通知を許可したくなる理由を提示します。
+
+技術的には、サービスワーカーのおかげで、Web上の[プッシュ通知](https://developers.google.com/web/fundamentals/push-notifications/)はバックグラウンドで実行され、キャンペーンを管理するために構築されたシステム (Firebaseなど) によって送信されることがよくあります。この機能は、モバイル (Android) およびデスクトップユーザーに大きなビジネス価値をもたらします。これにより、繰り返しのアクセスが増加し、その結果、売上とコンバージョンが増加します。
+
+プッシュキャンペーンの効果を測定するには、ファネル全体を測定する必要があります。
+
+- プッシュ通知の対象となるユーザーの数
+- カスタム通知UIプロンプトをクリックしたユーザーの数
+- プッシュ通知許可を付与するユーザーの数
+- プッシュ通知を受信するユーザーの数
+- 通知を利用するユーザーの数
+- 通知から来るユーザーのコンバージョンとエンゲージメント
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="Webプッシュ通知の値を測定", width="800", height="255" %}
+
+破棄されたカートでユーザーを再エンゲージすることで[コンバージョン率を4.5倍にしたCarrefour](https://useinsider.com/case-studies/carrefour/)のように、Webプッシュ通知に関する優れたケーススタディはたくさんあります。
+
+## PWAのP: 機能ごとにプログレッシブに起動{: #feature-by-feature }
+
+PWAは、Webの広範囲なリーチの利点を活用する最新のWebサイトであり、Android/iOS /デスクトップアプリでユーザーが好む使いやすい機能がすべて取り入れられています。これらは、ビジネスの特殊性と優先順位に応じて独立して実装できる一連のベストプラクティスと最新のWeb APIを活用しています。
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="PWAを段階的に起動", width="800", height="253" %}
+
+Webサイトの最新化を加速し、それを真のPWAにするために、アジャイルであること、つまり機能ごとに起動することをお勧めします。まず、ユーザーと一緒にどの機能が最も価値をもたらすかを調査してから、設計者や開発者に提供します。最後に、PWAが生み出した金銭的利益を正確に測定することを忘れないでください。
diff --git a/src/site/content/ja/progressive-web-apps/index.md b/src/site/content/ja/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/ja/progressive-web-apps/install-criteria/index.md b/src/site/content/ja/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..c467835427d
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: どうすればインストール可能にできますか？
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: プログレッシブ Web アプリのインストール可能性の基準。
+tags:
+  - progressive-web-apps
+---
+
+プログレッシブ Web アプリ（PWA）は、Web テクノロジーを使用して構築された最新の高品質アプリケーションです。PWAは、iOS/Android/デスクトップアプリと同様の機能を提供し、不安定なネットワーク状態でも信頼性が高く、インストール可能であるため、ユーザーが簡単に見つけて使用できます。
+
+ほとんどのユーザーは、アプリケーションのインストールと、インストールされたエクスペリエンスの利点に精通しています。インストールされたアプリケーションは、Mac OS X の Applicationsフォルダ、Windowsのスタートメニュー、Android と iOS のホーム画面など、オペレーティングシステムの起動画面に表示されます。また、アクティビティスイッチャー、Spotlight などのデバイス検索エンジン、およびコンテンツ共有シートにも表示されます。
+
+ほとんどのブラウザは、プログレッシブ Web アプリ（PWA）が特定の基準を満たしたときにインストール可能であることをユーザーに示します。インジケータの例には、アドレスバーの [インストール] ボタン、またはオーバーフローメニューの [インストール] メニュー項目が含まれます。
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="インストールインジケーターが表示されたオムニボックスのスクリーンショット。", width="800", height="307" %} <figcaption> ブラウザが提供するインストールプロモーション（デスクトップ）</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="ブラウザが提供するインストールプロモーションのスクリーンショット。", width="800", height="307" %} <figcaption>ブラウザが提供するインストールプロモーション（モバイル）</figcaption></figure>
+</div>
+
+さらに、基準が満たされると、多くのブラウザは `beforeinstallprompt` イベントを発し、アプリ内のインストールフローをトリガーするカスタムアプリ内 UX を提供できます。
+
+## インストール基準 {: #criteria }
+
+Chrome では、プログレッシブ Web アプリは `beforeinstallprompt` イベントを発してブラウザー内インストールプロモーションを表示する前に、次の基準を満たしている必要があります。
+
+- Web アプリはまだインストールされていない
+- ユーザーエンゲージメントヒューリスティックに対応している
+- HTTPS 経由で提供されている
+- 以下を含む [Web アプリマニフェスト](/add-manifest/)が含まれている
+    - `short_name` または `name`
+    - `icons` - 192px と 512px のアイコンを含む必要があります。
+    - `start_url`
+    - `display` - `fullscreen`、`standalone`、または `minimal-ui` のいずれかである必要があります。
+    - `prefer_related_applications` が存在していないか、 `false` である
+- `fetch` ハンドラーをもつサービスワーカーを登録する
+
+他のブラウザにも同様のインストール基準がありますが、わずかな違いがある場合があります。詳細については、それぞれのサイトを確認してください。
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/progressive-web-apps#requirements)
+- [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
+- [Opera](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} Androidでは、Web アプリのマニフェストに `related_applications` と `"prefer_related_applications": true` が含まれている場合、ユーザーは Google Play ストアに移動し、代わりに[指定された Android アプリをインストールするよう求められます](https://developer.chrome.com/blog/app-install-banners-native/)。 {% endAside %}
diff --git a/src/site/content/ja/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/ja/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..4692da0baba
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,245 @@
+---
+layout: post
+title: オフラインフォールバックページを作成する
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: アプリのシンプルなオフラインエクスペリエンスを作成する方法について説明します。
+tags:
+  - progressive-web-apps
+---
+
+Googleアシスタントアプリ、Slackアプリ、Zoomアプリ、および携帯電話やパソコン上の他のほとんどのプラットフォーム固有のアプリに共通するものは何ですか？そうです、彼らは常に少なくともあなたに*何かを*与えます。ネットワークに接続していない場合でも、アシスタントアプリを開くか、Slackに入る、またはZoomを起動することができます。*特に意味のあるものが得られない場合*や、達成したいことを達成できない場合もありますが、少なくとも何かを取得し、アプリを制御できます。
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="オフライン中のGoogle Assistantモバイルアプリ。", width="621", height="1344" %} <figcaption id="fig-assistant"> Google Assistant. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="オフライン中のSlackモバイルアプリ。", width="621", height="1344" %} <figcaption id="fig-slack"> Slack. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="オフライン中のZoomモバイルアプリ。", width="621", height="1344" %} <figcaption id="fig-zoom"> Zoom. </figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">プラットフォーム固有のアプリでは、ネットワークに接続していなくても、何かを得ることができます。</figcaption>
+
+
+
+対照的に、従来、Webでは、オフラインのときは何も得られません。 Chromeは[オフラインの恐竜ゲーム](https://www.blog.google/products/chrome/chrome-dino/)を提供しますが、それだけです。
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="オフライン恐竜ゲームを表示するGoogle Chromeモバイルアプリ。", width="800", height="1731" %} <figcaption id="fig-chrome-ios"> Google Chrome for iOS. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="オフライン恐竜ゲームを表示するGoogle Chromeデスクトップアプリ。", width="800", height="607" %} <figcaption id="fig-chrome"> Google Chrome for macOS. </figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">Webでは、ネットワーク接続がない場合、デフォルトでは何も得られません。</figcaption>
+
+
+
+## カスタムサービスワーカーを含むオフラインフォールバックページ
+
+ただし、このようにする必要はありません。[サービスワーカーとCache Storage API](/service-workers-cache-storage/)のおかげで、カスタマイズされたオフラインエクスペリエンスをユーザーに提供できます。これは、ユーザーが現在オフラインであるという情報を含むシンプルなブランドページにすることもできますが、たとえば、手動の **[再接続]** ボタンと自動再接続試行のカウントダウンを備えた有名な[trivagoオフライン迷路ゲーム](https://www.trivago.com/offline)のようなもっとクリエイティブなソリューションにすることもできます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="trivagoオフライン迷路が表示されたtrivagoオフラインページ。", width="800", height="616" %} <figcaption>trivagoオフライン迷路。</figcaption></figure>
+
+### サービスワーカーの登録
+
+これを実現する方法は、サービスワーカーを使用することです。次のコードサンプルのように、メインページからServiceWorkerを登録できます。通常、これはアプリが読み込まれた後に行います。
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### サービスワーカーコード
+
+実際のサービスワーカーファイルの内容は一見少し複雑に見えるかもしれませんが、次のサンプルのコメントで問題がすっきりするはずです。主な考え方は、ナビゲーション要求の失敗時のみ提供される`offline.html`ファイルを事前にキャッシュに保存し、ブラウザーに他のすべてのケースを処理させるということです。
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ 本ライセンスに準拠していない場合は、このファイルを使用することが禁止されています。
+ 本ライセンスのコピーは次のサイトから取得できます。
+ http://www.apache.org/licenses/LICENSE-2.0
+ 適用される法律で義務付けられている場合、または書面で合意した場合を除き、
+ 本ライセンスの下で配布されたソフトウェアは、明示的であるか暗示的であるかを問わず一切の保証または条件なく、「現状有姿」で配布されます。
+ 本ライセンスの下での許可と制限を規定する特定の言語のライセンスを参照してください。
+*/
+
+// OFFLINE_VERSION の数が増えると、インストールイベントが開始し、
+// キャッシュに保存されていたリソースが強制的にネットワークから更新される。
+// この変数は意図的に宣言され、未使用。
+// 必要に応じてlinterのコメントを追加すること。
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// 必要に応じてこれを別のURLでカスタマイズする。
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // 待機中のサービスワーカーが強制的にアクティブなサービスワーカーにされる。
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // サポートされている場合はナビゲーション事前読み込みを有効にする。
+      // https://developers.google.com/web/updates/2017/02/navigation-preloadを参照
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // アクティブなサービスワーカーにただちにページを制御するように命令する。
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // これがHTMLページのナビゲーション要求の場合は、event.respondWith()
+  // のみを呼び出す。
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // まず、サポートされている場合は、ナビゲーション事前読み込み応答を使用する。
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // 常に最初にネットワークを試行する。
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catchは例外が発生した場合にのみトリガーされる。
+          // これはネットワークエラーが原因であることがほとんどである。
+          // fetch() が4xxまたは5xxの範囲の応答コード
+          // の有効なHTTP応答を返す場合、catch() は呼び出されない。
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // if() 条件がfalseの場合、このfetchハンドラーは要求を傍受しない。
+  // 他のfetchハンドラーが登録されている場合は、
+  // event.respondWith() を呼び出す可能性がある。fetchハンドラーが
+  // event.respondWith() を呼び出す場合は、サービスワーカーが関与していないかのように
+  // ブラウザーによって要求が処理される。
+});
+```
+
+### オフラインフォールバックページ
+
+`offline.html`ファイルは、クリエイティブになり、ニーズに合わせてブランドを追加できる場所です。次の例は、可能な最小限の処理を示しています。ボタン押下に基づく手動の再読み込みと、[`online`イベント](https://developer.mozilla.org/docs/Web/API/Window/online_event)および通常のサーバーポーリングに基づく自動再読み込みの両方を示します。
+
+{% Aside 'gotchas' %}オフラインページに必要なすべてのリソースをキャッシュに保存する必要があります。これに対処する1つの方法は、すべてをインライン化することです。これにより、オフラインページは自己完結型になります。次の例では、これを示します。 {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>You are offline</h1>
+
+    <p>Click the button below to try reloading.</p>
+    <button type="button">⤾ Reload</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // 手動再読み込み機能。
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // ネットワーク状態の変更を待機。オンラインになったときに再読み込み。
+      // これはデバイスが完全にオフラインのケースを処理する。
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // サーバーが応答しているかどうかをチェックし、応答している場合はページを再読み込み。
+      // これはデバイスがオンラインのケースを処理するが、
+      // サーバーがオフラインであるか、正常に動作していない。
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // サーバーから有効な応答が得られることを検証
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // サーバーに接続できない。無視。
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## デモ
+
+以下に埋め込ま}れた{a0デモでは、オフラインフォールバックページの動作を確認できます。興味があれば、Glitchの[ソースコード](https://glitch.com/edit/#!/offline-fallback-demo)を調べることができます。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### アプリをインストール可能にする際の注意事項
+
+サイトにオフラインフォールバックページがあるので、次のステップについて疑問に思うかもしれません。アプリをインストール可能にするには、[Webアプリマニフェスト](/add-manifest/)を追加し、任意で[インストール戦略](/define-install-strategy/)を検討する必要があります。
+
+### Workbox.jsでオフラインフォールバックページを提供する際の補足
+
+[Workbox.js](https://developer.chrome.com/docs/workbox/)について聞いたことがあるかもしれません。Workbox.jsは、Webアプリにオフラインサポートを追加するためのJavaScriptライブラリのセットです。自分で作成するServiceWorkerコードを減らしたい場合は、[オフラインページでのみ](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only)Workbox.jsレシピを使用できます。
+
+次は、アプリの[インストール戦略を定義する方法](/define-install-strategy/)について学習します。
diff --git a/src/site/content/ja/progressive-web-apps/promote-install/index.md b/src/site/content/ja/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..a485443ed4f
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,194 @@
+---
+layout: post
+title: PWAのインストールを促進するためのパターン
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: |2-
+
+  Progressive Web Appのインストールを促進する方法とベストプラクティス。
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+プログレッシブウェブアプリ（PWA）のインストールでは、ユーザーの検索と利用をやすくさせます。PWAのインストールができることに気付いていないユーザーもいるので、PWAのインストールを促進および有効化することを目的とするアプリ内の体験を提供するに役立つ場合があります。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="PWAの簡単なインストールボタンのスクリーンショット.", width="800", height="368" %} <figcaption>PWA内にある簡単なインストールボタン. </figcaption></figure>
+
+このリストは完璧ではないが、PWAのインストールを促進するための種々な方法の起点を共有します。 どんなパターン、*または利用中のパターン*に関係なく、これらはすべて、インストールフローをトリガーする同じコードにつながります。これは、[独自のアプリ内インストール体験を提供する方法](/customize-install/)に記載されています。
+
+<div class="w-clearfix"> </div>
+
+## PWAインストールプロモーションのベストプラクティス{: #best-practices}
+
+サイトで使用しているプロモーションパターンを問わず適用されるベストプラクティスがいくつかあります。
+
+- プロモーションは、ユーザージャーニーの流れの外に置いてください。たとえば、PWAログインページで、ログインフォームと送信ボタンの下に召喚状を配置します。促進パターンを破壊的に利用すると、PWAの有用性が低下し、エンゲージメント指標に悪影響を及ぼします。
+- プロモーションを却下または拒否する機能を含めます。ユーザーがこれを行ったら、ユーザーの嗜好を覚えておいて、ユーザーがサインインしたか購入を完了したかなど、ユーザーとコンテンツとの関係に変化があった場合にのみ再プロンプトを表示します。
+- PWAの別々部分でこれらの複数の手法を組み合わせますが、インストールプロモーションでユーザーを圧倒したり、迷惑をかけたりしないように注意してください。
+- [`beforeinstallprompt`インベント](/customize-install/#beforeinstallprompt) }が発生した**後**にのみプロモーションを表示します。
+
+## 自動ブラウザプロモーション{: #browser-promotion}
+
+[特定の基準](/install-criteria/)が満たされると、ほとんどのブラウザーは、プログレッシブWebアプリがインストール可能な状態になることをユーザーに自動的に示します。たとえば、デスクトップChromeではオムニボックスにインストールボタンが表示されます。
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="インストールインジケーターが表示されたオムニボックスのスクリーンショット.", width="800", height="307" %} <figcaption>ブラウザが インストールプロモーション(デスクトップ)を提供しました</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="ブラウザが提供したインストールプロモーションのスクリーンショット.", width="800", height="307" %} <figcaption> ブラウザ提供のインストールプロモーション（モバイル） </figcaption></figure>
+</div>
+
+<div class="w-clearfix"> </div>
+
+Chrome for Androidはユーザーにミニ情報バーを表示するが、これは`beforeinstallprompt`イベントで`preventDefault()` の呼び出しによって止められます。`preventDefault()`呼び出さない場合、バナーは、ユーザーが最初にサイトにアクセスしたときに表示され、Androidでのインストール条件を満たし、約90日後に再び表示されます。
+
+## アプリケーションUIのプロモーションパターン{: #app-ui-patterns}
+
+アプリケーションUIのプロモーションパターンは、ほぼすべての種類のPWAに使用でき、サイトナビゲーションやバナーなどのアプリケーションUIに表示されます。他のタイプのプロモーションパターンと同様に、ユーザーの移動の中断を最小限に抑えるために、ユーザーのコンテキストを認識することが重要です。
+
+プロモーションUIをトリガーするタイミングを考慮したサイトは、インストール数を増やし、インストールに興味のないユーザーの移動を妨げることを回避します。
+
+<div class="w-clearfix"> </div>
+
+### シンプルインストールボタン{: #simple-button}
+
+最も簡単なUXは、Webコンテンツの適切な場所に「インストール」または「アプリを入手する」ボタンを付けることです。ボタンが他の重要な機能をブロックせず、ユーザーがアプリケーションを移動する際の邪魔にならないようにしてください。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="カスタムインストールボタン", width="800", height="448" %} <figcaption>シンプルなインストールボタン</figcaption></figure>
+
+<div class="w-clearfix"> </div>
+
+### 固定のheader {: #header }
+
+これは、サイトのheaderの一部であるインストールボタンです。他のheaderコンテンツには、ロゴやハンバーガーメニューなどのサイトのブランドがよく入っています。Headerは`position:fixed`になるか、サイトの機能とユーザーのニーズにあわせないかもしれません。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="Headerのカスタムインストールボタン", width="800", height="448" %} <figcaption> Headerのカスタムインストールボタン </figcaption></figure>
+
+適切に使用すると、サイトのheaderからPWAのインストールを促進することは、最も忠実な顧客があなたの経験に戻しやすくするための優れた方法です。 PWA headerのピクセルは貴重であるため、インストールの召喚状のサイズが適切であり、他のheaderコンテンツよりも重要であり、邪魔にならないようにしてください。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="Headerのカスタムインストールボタン", width="800", height="430" %} <figcaption> Headerのカスタムインストールボタン </figcaption></figure>
+
+次のことを確認してください。
+
+- `beforeinstallprompt`が起動されていない限り、インストールボタンを表示しないでください。
+- ユーザーに対するインストールされているユースケースの価値を評価します。プロモーションからのメリットを得る可能性が高いユーザーにのみプロモーションを表示するように、選択的なターゲティングを検討してください。
+- 貴重なheaderスペースを効率的に使用します。Header でユーザーに提供するのに他に何が役立つかを検討し、他のオプションと比較したインストールプロモーションの優先度を比較検討します。
+
+<div class="w-clearfix"> </div>
+
+### ナビゲーションメニュー{: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="ナビゲーションメニューのカスタムインストールボタン", width="800", height="1117" %} <figcaption> スライドアウトナビゲーションメニューにインストールボタン/プロモーションを追加します. </figcaption></figure>
+
+メニューを開いたユーザーがあなたの体験への関与を示しているため、ナビゲーションメニューはアプリのインストールを促進するのに最適な場所です。
+
+次のことを確認してください。
+
+- 重要なナビゲーションコンテンツを中断しないでください。 PWAインストールプロモーションを他のメニュー項目の下に配置します。
+- ユーザーがPWAをインストールすることでメリットが得られる理由について、関連性の高く短い提案を行います。
+
+<div class="w-clearfix"> </div>
+
+### ランディングページ{: #landing }
+
+ランディングページの目的はあなたの製品とサービスを宣伝することです。それで、これはあなたのPWAのインストールによるメリットを宣伝する規模を拡大することに適切である場所です。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="ランディングページのカスタムインストールプロンプト", width="800", height="1117" %} <figcaption> ランディングページのカスタムインストールプロンプト </figcaption></figure>
+
+まず、サイトの価値提案を説明してから、訪問者にインストールにより得られるものを知らせます。
+
+次のことを確認してください。
+
+- 訪問者にとって最も重要な機能をアピールし、ランディングページに導くためのキーワードを強調します。
+- インストールプロモーションと召喚状が目立つように調整するが、価値提案を明確にした後でのみです。これはあなたのランディングページですため、任意に調整してください。
+- ユーザーが時間をよく費やすアプリの部分にインストールプロモーションを追加することを検討してください。
+
+<div class="w-clearfix"> </div>
+
+### バナーをインストールする{: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="ページ上部のカスタムインストールバナー.", width="800", height="1000" %} <figcaption> ページ上部の非表示のバナー. </figcaption></figure>
+
+ほとんどのユーザーは、モバイル体験でインストールバナーに遭遇し、バナーによって提供されるインタラクションに精通しています。バナーはユーザーを混乱させる可能性があるため、慎重に使用する必要があります。
+
+次のことを確認してください。
+
+- バナーを表示する前に、ユーザーがサイトに関心を示すまで待ちます。ユーザーがバナーを却下した場合、電子商取引での購入やアカウントへの登録など、コンテンツへのエンゲージメントのレベルが高いことを示すコンバージョンイベントをユーザーがトリガーしない限り、バナーを再度表示しないでください。
+- バナーにはPWAのインストールによる価値について簡単に説明する短文を記載してください。例えば、PWAのインストールをiOS / Androidアプリと区別するには、ユーザーのデバイスにほとんどストレージを使用しないことや、ストアのリダイレクトなしで直ちにインストールすることを伝えます。
+
+<div class="w-clearfix"> </div>
+
+### 一時的なUI {: #temporary-ui}
+
+[スナックバー](https://material.io/components/snackbars/)のデザインパターンなどの一時的なUIは、ユーザーに通知し、ユーザーにアクションを簡単に完了させます。この場合は、アプリをインストールしてください。これらの種類のUIパターンを適切に使用すると、ユーザーフローが中断されずに、ユーザーが無視すると通常に自動的に閉じられます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="スナックバーとしてのカスタムインストールバナー.", width="800", height="448" %} <figcaption> PWAがインストール可能であることを示す非表示のスナックバー. </figcaption></figure>
+
+いくつかのエンゲージメント、アプリとのやり取りの後にスナックバーを表示します。ページの読み込み時に表示されたり、コンテキストから外れたりすると、簡単に見落とされたり、認知機能の過負荷につながる可能性があります。これが発生すると、ユーザーは表示されたものをすべて見落とす可能性が高いです。また、サイトの新規ユーザーはPWAのインストールをすぐできない可能性があることを忘れないでください。したがって、このパターンを使用する前に、ユーザーからの強い関心のシグナルが届くまで待つことをお勧めします。たとえば、繰り返しの訪問、ユーザーのサインイン、または同様のコンバージョンイベントなどです。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="スナックバー形のカスタムインストールバナー.", width="800", height="424" %} <figcaption> PWAのインストールができることを示す非表示のスナックバー. </figcaption></figure>
+
+次のことを確認してください。
+
+- スナックバーを4〜7秒間で表示して、ユーザーに邪魔をせずにそれを見て反応してもらうのに十分な時間を与えます。
+- バナーなどの他の一時的なUIの上に表示しないでください。
+- このパターンを使用する前に、ユーザーからの強い関心のシグナルが届くまで待ってください。たとえば、繰り返しの訪問、ユーザーのサインイン、または同様のコンバージョンイベントなどです。
+
+<div class="w-clearfix"> </div>
+
+## 変換後
+
+ユーザーコンバージョンイベントの直後、たとえば電子商取引での購入後は、PWAのインストールを促進する絶好の機会です。ユーザーは明らかにあなたのコンテンツに関与しており、コンバージョンは、ユーザーが再びあなたのサービスに関与することを示します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="変換後のインストールプロモーションのスクリーンショット.", width="800", height="448" %} <figcaption>ユーザーが購入を完了した後にプロモーションをインストールします. </figcaption></figure>
+
+### 予約またはチェックアウトの旅{: #journey }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="ユーザージャーニーの後にプロモーションをインストールします.", width="800", height="1419" %} <figcaption> ユーザージャーニーの後にプロモーションをインストールします. </figcaption></figure>
+
+予約またはチェックアウトフローの典型的なものなど、連続した移動中または移動後にインストールプロモーションを表示します。ユーザーがジャーニーを完了した後にプロモーションを表示する場合は、ジャーニーが完了したため、プロモーションをより目立たせることができます。
+
+次のことを確認してください。
+
+- 関連する召喚状を付けます。アプリをインストールすることでメリットが得られるユーザーが誰ですか？とその理由は何ですか？彼らが現在行っているジャーニーとどのように関連していますか？
+- ブランドにインストール済みのアプリユーザー向けの独自のオファーがある場合は、ここでそれらについて言及してください。
+- プロモーションをジャーニーの次のステップに邪魔をしないようにしてください。そうしないと、ジャーニーの完了率に悪影響を与える可能性があります。上記の電子商取引の例では、チェックアウトの主要な召喚状がアプリのインストールプロモーションの上にあることに注目してください。
+
+<div class="w-clearfix"> </div>
+
+### サインアップ、サインイン、またはサインアウトフロー{: #sign-up}
+
+このプロモーションは、プロモーションカードをより目立たせることができる[、ジャーニーの](#journey)プロモーションパターンの特殊なケースです。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="サインアップページのカスタムインストールボタン。", width="800", height="1117" %}<figcaption>サインアップページのカスタムインストールボタン。</figcaption></figure>
+
+これらのページは通常、PWAのバリュープロポジションがすでに確立されている熱心なユーザーのみに閲覧されます。また、通常にこれらのページには載せる有用なコンテンツがあまりあまりません。結果として、邪魔にならない限り、より大きな召喚状を作成することで混乱が少なくなります。
+
+次のことを確認してください。
+
+- サインアップフォーム内でのユーザーの移動を妨げないようにしてください。複数のステップからなるプロセスの場合は、ユーザーが移動を完了するまで待つことをお勧めします。
+- 登録済のユーザーに最も関連する機能を宣伝します。
+- アプリの登録済のエリア内にインストールプロモーションを追加することを検討してください。
+
+<div class="w-clearfix"> </div>
+
+## インラインのプロモーションパターン
+
+インラインプロモーション手法は、プロモーションとサイトコンテンツを織り交ぜます。トレードオフのあるアプリケーションUIでのプロモーションよりも微妙になることが多いです。関心のあるユーザーが気付くほどプロモーションを目立たせたいが、ユーザー体験の質を損なわない範囲で調整してください。
+
+### インフィード{: #インフィード}
+
+インフィードインストールプロモーションは、PWAの各ニュース記事または他の情報カードの各リストの間に表示されます。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="コンテンツフィード内にプロモーションをインストールします.", width="800", height="1000" %} <figcaption> コンテンツフィード内にプロモーションをインストールします. </figcaption></figure>
+
+あなたの目標は、ユーザーに楽しむコンテンツにもっと簡単にアクセスする方法を示すことです。ユーザーに役立つ機能の宣伝に注目してください。
+
+次のことを確認してください。
+
+- ユーザーを迷惑をかけないように、プロモーションの頻度を制限します。
+- ユーザーがプロモーションを断れるようにします。
+- 断ったユーザーの選択を覚えておいてください。
diff --git a/src/site/content/ja/progressive-web-apps/pwa-checklist/index.md b/src/site/content/ja/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..fd1314771ea
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: 優れたプログレッシブ Web アプリとは？
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: 優れたまたは素晴らしいプログレッシブ Web アプリとは？
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+プログレッシ Web アプリ（PWA）は、最新の API で構築と拡張されており、単一のコードベースで、*場所やデバイスを問わず、誰にでも*到達しながら、拡張された機能、信頼性、およびインストール可能性を提供します。可能な限り最高のエクスペリエンスを作り出すために、[基本的](#core)かつ[最適な](#optimal)チェックリストと推奨事項をガイドとして使用してください。
+
+## 基本的なプログレッシブ Web アプリのチェックリスト {: #core }
+
+プログレッシブ Web アプリのチェックリストは、サイズや入力の種類に関係なく、すべてのユーザーがアプリをインストールして使用できるようにする理由について説明しています。
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+高速に開始して速度を維持する
+
+オンラインエクスペリエンスの成功には、パフォーマンスが大きく関わっています。パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりもユーザーの関心を引き付け、維持するためです。サイトは、ユーザー中心のパフォーマンスメトリクスの最適化に重点を置く必要があります。
+
+{% endDetailsSummary %}
+
+オンラインエクスペリエンスの成功には、パフォーマンスが大きく関わっています。パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりもユーザーの関心を引き付け、維持するためです。サイトは、ユーザー中心のパフォーマンスメトリクスの最適化に重点を置く必要があります。
+
+#### 理由
+
+ユーザーにアプリを*使用*させるには、速度が重要です。実際、ページの読み込み時間が 1 秒から 10 秒になると、ユーザーがバウンスする確率は 123％ 増加します。パフォーマンスは `load` イベントに限られたことではありません。ユーザーが、ボタンのクリックなどの操作が届いているかどうかを考えるようなことがあってはいけません。スクロールとアニメーションはスムーズに感じられなければなりません。パフォーマンスは、アプリケーションに対するユーザーの認識から実際の実行まで、エクスペリエンス全体に影響を及ぼします。
+
+アプリケーションごとにニーズは異なりますが、Lighthouse のパフォーマンス監査は、[RAIL ユーザー中心のパフォーマンスモデル](/rail/)に基づいており、これらの監査で高いスコアを得られれば、ユーザーが楽しい体験を得る可能性が高くなります。また、[PageSpeed Insights](https://pagespeed.web.dev/) や [Chrome ユーザーエクスペリエンスレポート](https://developer.chrome.com/docs/crux/)を使用して、Web アプリの実際のパフォーマンスデータを取得することもできます。
+
+#### 方法
+
+PWA を高速で開始し、その速度を維持する方法については、[高速読み込み時間に関するガイド](/fast/)に従ってください。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+どのブラウザでも動作する
+
+ユーザーは、Web アプリをインストールする前に、ユーザーが好むブラウザを使用して Web アプリにアクセスできます。
+
+{% endDetailsSummary%}
+
+ユーザーは、Web アプリをインストールする前に、ユーザーが好むブラウザを使用して Web アプリにアクセスできます。
+
+#### 理由
+
+プログレッシブ Web アプリは元々 Web アプリです。つまり、1 つのブラウザだけでなく、さまざまなブラウザで動作する必要があります。
+
+これを効果的に実現するには、『[Resilient Web Design](https://resilientwebdesign.com/)』の中で Jeremy Keith が述べた言葉を借りれば、コア機能を特定し、可能な限り単純なテクノロジーを使用してその機能を利用できるようにし、可能な場合はエクスペリエンスを強化することが方法として挙げられます。多くの場合、これは、まず HTML だけで始めてコア機能を作成し、より魅力的なエクスペリエンスを生み出すために、CSS と JavaScript を使用してユーザーエクスペリエンスを強化するということです。
+
+フォームの送信を例にとってみましょう。これを実装する最も簡単な方法は、 `POST` リクエストを送信する HTML フォームです。それを構築した後で、フォームの検証と AJAX による送信を実現する JavaScript でエクスペリエンスを強化することができます。それをサポートできるユーザーのエクスペリエンスを向上させることができるのです。
+
+ユーザーがさまざまなデバイスやブラウザでサイトを体験することを考慮してください。ただスペクトルの上限をターゲットにするわけにはいきません。機能の検出を行えば、現時点では存在していないブラウザやデバイスを使用するユーザーを含む、幅広い潜在的なユーザーに、使いものになるエクスペリエンスを提供できるでしょう。
+
+#### 方法
+
+Jeremy Keith の『[Resilient Web Design](https://resilientwebdesign.com/)』は、このクロスブラウザのプログレッシブ手法で Web デザインを考える方法を説明している優れたリソースです。
+
+#### その他の読み物
+
+- A List Apart の「[Understanding Progressive Enhancement](https://alistapart.com/article/understandingprogressiveenhancement/)」は、このトピックの導入に最適な記事です。
+- Smashing Magazine の「[Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)」には、実用的な紹介とより高度なトピックへのリンクが掲載されています。
+- MDN の「[Implementing feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)」というタイトルの記事では、機能を直接クエリして検出する方法について説明されています。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+あらゆる画面サイズに対応
+
+ユーザーは任意の画面サイズで PWA を使用でき、すべてのコンテンツは任意のビューポートサイズで利用できます。
+
+{% endDetailsSummary %}
+
+ユーザーは任意の画面サイズで PWA を使用でき、すべてのコンテンツは任意のビューポートサイズで利用できます。
+
+#### 理由
+
+デバイスにはさまざまなサイズがあり、ユーザーは同じデバイス上でもさまざまなサイズでアプリケーションを使用できます。したがって、コンテンツがビューポート内に収まるだけでなく、サイトのすべての機能とコンテンツがすべてのビューポートサイズで使用できるようにすることが重要です。
+
+ユーザーが実行したいタスクとアクセスしたいコンテンツは、ビューポートのサイズによって変化しません。コンテンツはさまざまなビューポートサイズで再配置されるため、どのような形態であってもすべてがそこに収まります。実際、Luke Wroblewski が著書『Mobile First』で述べているように、大きい物から小さい物へではなく、小さい物から大きい物へ向かって取り組むことで、サイトのデザインを実際に改善できます。
+
+> モバイルデバイスでは、ソフトウェア開発チームがアプリケーション内の最も重要なデータとアクションのみに専念することが必要です。320 x 480 ピクセルの画面には、無関係で不要な要素を配置する余地がないわけですから、どれを優先するのかを決定する必要があります。
+
+#### 方法
+
+レスポンシブデザインに関するリソースは、[Ethan Marcotte のオリジナルの記事](https://alistapart.com/article/responsive-web-design/)、それに関連する[重要な概念のコレクション](https://snugug.com/musings/principles-responsive-web-design/)、そして豊富な本や講演などたくさんあります。この議論をレスポンシブデザインのコンテンツの側面に絞り込むには、[コンテンツファーストデザイン](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c)と[コンテンツアウトレスポンシブレイアウト](https://alistapart.com/article/content-out-layout/)を掘り下げていくことができます。最後に、モバイルに焦点を当てていますが、Josh Clark の「[Seven Deadly Mobile Myths](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca)」に含まれるレッスンは、モバイルと同様にレスポンシブサイトの小規模なビューにも関連しています。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+カスタムオフラインページを提供
+
+ユーザーがオフラインの場合、ユーザーを PWA に保持すると、デフォルトのブラウザのオフラインページに戻るよりもシームレスなエクスペリエンスを提供できます。
+
+{% endDetailsSummary %}
+
+ユーザーがオフラインの場合、ユーザーを PWA に保持すると、デフォルトのブラウザのオフラインページに戻るよりもシームレスなエクスペリエンスを提供できます。
+
+#### 理由
+
+ユーザーは、接続ステータスに関係なく、インストールされたアプリが機能することを期待しています。プラットフォーム固有のアプリがオフラインのときに空白のページを表示することはありません。また、プログレッシブ Web アプリがブラウザのデフォルトのオフラインページを表示することもありません。ユーザーがキャッシュされていない URL に移動したときと、接続が必要な機能を使用しようとしたときの両方でカスタムオフラインエクスペリエンスを提供することで、Web エクスペリエンスが実行中のデバイスの一部であるかのように感じることができます。
+
+#### 方法
+
+Service Worker の `install` イベント中に、後で使用するためのカスタムオフラインページを事前にキャッシュしておくことができます。ユーザーがオフラインになった場合は、事前にキャッシュされたカスタムオフラインページで応答できます。カスタム[オフラインページのサンプル](https://googlechrome.github.io/samples/service-worker/custom-offline-page/)に従うと、この例の動作を確認し、自分で実装する方法を学ぶことができます。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+インストール可能である
+
+デバイスにアプリをインストールまたは追加するユーザーは、それらのアプリをより多く利用する傾向があります。
+
+{% endDetailsSummary %}
+
+デバイスにアプリをインストールまたは追加するユーザーは、それらのアプリをより多く利用する傾向があります。
+
+#### 理由
+
+プログレッシブ Web アプリをインストールすると、他のインストール済みのアプリと同じような外観、操作感、動作が得られ、他のアプリと同じ場所から起動します。ブラウザとは別の独自のアプリウィンドウで実行し、他のアプリと同じようにタスクリストに表示されます。
+
+なぜユーザーに PWA をインストールしてもらいたいのでしょうか？ユーザーにアプリストアからアプリをインストールしてもらいたいのと同じ理由です。アプリをインストールするユーザーはエンゲージ度の最も高いオーディエンスです。通常の訪問者よりもエンゲージメントメトリクスが優れており、多くの場合、モバイルデバイスのアプリユーザーと同等です。これらのメトリクスには、より多くのリピート訪問、より長いサイト滞在時間、より高いコンバージョン率が含まれます。
+
+#### 方法
+
+[インストール可能なガイド](/customize-install/)に従って、PWAをインストール可能にする方法とインストール可能であることをテストする方法を学び、自分で試してみることができます。
+
+{% endDetails %}
+
+## 最適なプログレッシブ Web アプリのチェックリスト {: #optimal }
+
+クラス最高のアプリのように感じられる、真に優れたプログレッシブ Web アプリを作成するには、基本チェックリスト以上のものが必要です。プログレッシブ Web アプリの最適なチェックリストは、Web を強力にするものを活用しながら、PWA を実行中のデバイスの一部であるかのように感じさせることに関連しています。
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+オフラインエクスペリエンスを提供する
+
+接続が厳密に必要とされない場合、アプリはオフラインでもオンラインと同じように動作します。
+
+{% endDetailsSummary %}
+
+接続が厳密に必要とされない場合、アプリはオフラインでもオンラインと同じように動作します。
+
+#### 理由
+
+カスタムオフラインページを提供することに加えて、ユーザーはプログレッシブ Web アプリがオフラインで使用できることを期待しています。たとえば、旅行アプリや航空会社のアプリでは、オフライン時に旅程と搭乗券に簡単にアクセスできる必要があります。音楽、ビデオ、ポッドキャストアプリでは、オフラインで再生できる必要があります。ソーシャルアプリやニュースアプリは、オフラインでも閲覧できるように、最近のコンテンツをキャッシュする必要があります。また、ユーザーはオフライン時に認証状態が維持されることを期待しているため、オフライン認証の設計が求められます。オフライン PWA は、ユーザーに真のアプリのようなエクスペリエンスを提供します。
+
+#### 方法
+
+ユーザーがオフラインで作業できることを期待している機能を決定したら、コンテンツを利用可能にしてオフラインのコンテキストに適応できるようにする必要があります。さらに、ブラウザ内の NoSQL ストレージシステムである [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb) を使用してデータを保存および取得し、[バックグラウンド同期](https://developer.chrome.com/blog/background-sync/)を使用して、ユーザーがオフライン中にアクションを実行し、ユーザーが再び安定した接続を確立するまでサーバー通信を延期できるようにすることができます。また、Service Worker を使用して、オフラインで使用する画像、動画ファイル、音声ファイルなどの他の種類のコンテンツを保存したり、それらを使用して[安全で長期間有効なセッション](https://developer.chrome.com/blog/2-cookie-handoff/)を実装し、ユーザーの認証を維持したりすることもできます。ユーザーエクスペリエンスの観点から、読み込み中に速度とコンテンツをユーザーに認識させる[スケルトン画面](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)を使用して、必要に応じてキャッシュされたコンテンツまたはオフラインインジケーターにフォールバックできます。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+完全にアクセス可能である
+
+すべてのユーザー操作は、[WCAG 2.0](https://www.w3.org/TR/WCAG20/) アクセシビリティ要件に合格しています。
+
+{% endDetailsSummary %}
+
+すべてのユーザー操作は、[WCAG 2.0](https://www.w3.org/TR/WCAG20/) アクセシビリティ要件に合格しています。
+
+#### 理由
+
+ほとんどの人は、人生のある時点で、[WCA G2.0](https://www.w3.org/TR/WCAG20/) アクセシビリティ要件でカバーされている方法で PWA を利用したいと思うことがあるでしょう。PWA を操作し、理解する人間の能力はスペクトル上に存在し、ニーズは一時的でも永続的でもある可能性があります。PWA をアクセシブルにすることで、誰もが使用できることを保証できます。
+
+#### 方法
+
+W3C の『[Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)』は最適な出発点です。アクセシビリティテストの大部分は手動で行う必要があります。Lighthouse の[アクセシビリティ](https://github.com/dequelabs/axe-core)監査、[axe](https://accessibilityinsights.io/)、[Accessibility Insights](https://developer.chrome.com/docs/lighthouse/accessibility/) などのツールは、アクセシビリティテストを自動化するのに役立ちます。また、`a` や `button` 要素のように、意味的に正しい要素を独自に再作成せずに使用することも重要です。そうすることで、より高度な機能を構築する必要がある場合に、アクセシビリティへの期待を確実に満たすことができます（矢印とタブのどちらをいつ使用するかなど）。[A11Y Nutrition Cards](https://accessibilityinsights.io/) には、いくつかの一般的なコンポーネントについて、これに関する優れたアドバイスをていきょうしています。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+検索で検出可能
+
+PWA は、簡単に[検索で検出](/discoverable/)可能です。
+
+{% endDetailsSummary %}
+
+PWA は、簡単に[検索で検出](/discoverable/)可能です。
+
+#### 理由
+
+Web の最大の利点の1つは、検索を通じてサイトやアプリを発見できることです。実際、すべての Web サイトトラフィックの [半分以上](https://www.brightedge.com/resources/research-reports/channel_share)はオーガニック検索によるものです。コンテンツの正規 URL が存在し、検索エンジンがサイトをインデックス化できることを確認することは、ユーザーが PWA を見つけられるようにする上で重要なことです。これは、特にクライアント側レンダリングを採用する場合に当てはまります。
+
+#### 方法
+
+まず、各 URL に一意の説明的なタイトルとメタ説明があることを確認します。次に、Lighthouse の [Google 検索コンソール](https://search.google.com/search-console/about)と[検索エンジン最適化監査](https://developer.chrome.com/docs/lighthouse/seo/)を使用して、PWA の検出可能性の問題をデバッグして修正することができます。[Bing](https://www.bing.com/toolbox/webmaster) や [Yandex](https://webmaster.yandex.com/welcome/) の Web マスターツールを使用して、[Schema.org](https://goo.gle/search-gallery) のスキーマを介して[構造化データ](https://schema.org/)をPWAに含めることを検討することもできます。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+任意の入力タイプを使用できる
+
+PWA は、マウス、キーボード、スタイラス、またはタッチでも同様に使用できます。
+
+{% endDetailsSummary %}
+
+PWA は、マウス、キーボード、スタイラス、またはタッチでも同様に使用できます。
+
+#### 理由
+
+デバイスにはさまざまな入力方法が用意されており、ユーザーはアプリケーションを使用中に入力方法をシームレスに切り替えることができなければなりません。同様に重要なこととして、入力方法は画面サイズに依存しないようにする必要があります。つまり、大きなビューポートはタッチをサポートする必要があり、小さなビューポートはキーボードとマウスをサポートする必要があります。最大限の能力を発揮して、アプリケーションとそのすべての機能が、ユーザーが選択できる入力方法をサポートしていることを確認してください。必要に応じて、エクスペリエンスを強化して、入力固有のコントロール（プルして再読み込みなど）も可能にする必要があります。
+
+#### 方法
+
+[Pointer Events API](https://developer.chrome.com/blog/pointer-events/) は、さまざまな入力オプションを操作するための統一されたインターフェイスを提供し、スタイラスサポートを追加するのに特に適しています。タッチとキーボードの両方をサポートするには、正しいセマンティック要素（アンカー、ボタン、フォームコントロールなど）を使用し、非セマンティック HTML（アクセシビリティに適している）でこれらを再構築しないようにしてください。ホバー時にアクティブになる操作を含める場合は、クリックまたはタップでもアクティブにできることを確認してください。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+許可要求のコンテキストを提供する
+
+強力な API を使用するための許可を求めるときは、コンテキストを提供し、API が必要な場合にのみ求めます。
+
+{% endDetailsSummary %}
+
+強力な API を使用するための許可を求めるときは、コンテキストを提供し、API が必要な場合にのみ求めます。
+
+#### 理由
+
+通知、ジオロケーション、資格情報などの権限プロンプトをトリガーする API は、オプトインを必要とする強力な機能に関連する傾向があるため、ユーザーを混乱させるように意図的に設計されています。ページ読み込み時など、追加のコンテキストなしでこれらのプロンプトをトリガーすると、ユーザーはこれらのアクセス許可に同意する可能性が低くなり、将来的にそれらを信用しなくなる可能性が高くなります。代わりに、そのアクセス許可が必要な理由について、コンテキスト内の理由をユーザーに提供した後でのみ、これらのプロンプトをトリガーするようにします。
+
+#### 方法
+
+[Permission UX](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) の記事と UX Planet の「[The Right Ways to Ask Users for Permissions](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27)」は、モバイルに焦点を当てながらもすべての PWA に適用される許可プロンプトを設計する方法を理解できる優れたリソースです。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+健全なコードのベストプラクティスに従う
+
+コードベースを健全に維持することで、目標の達成と新機能の提供が容易になります。
+
+{% endDetailsSummary %}
+
+コードベースを健全に維持することで、目標の達成と新機能の提供が容易になります。
+
+#### 理由
+
+最新の Web アプリケーションの構築には多くのことが関わっています。アプリケーションを最新の状態に保ち、コードベースを正常に保つことで、このチェックリストに記載されている他の目標を満たす新機能を簡単に提供できるようになります。
+
+#### 方法
+
+健全なコードベースを確保するための優先度の高いチェックはたくさんあります。既知の脆弱性を持つライブラリの使用を回避する、非推奨の API を使用していないことを確認する、コードベースから Web アンチパターンを除去する（ `document.write()` の使用や非パッシブスクロールイベントリスナーの使用など）、さらには、分析やその他のサードパーティライブラリが読み込みに失敗した場合に PWA がエラーにならないように防御的にコーディングするなどが挙げられます。複数のブラウザとリリースチャンネルで、リンティングなどの静的コード分析と自動テストを要求することを検討してください。これらの手法は、本番環境に移行する前にエラーを検出するのに役立ちます。
+
+{% endDetails %}
diff --git a/src/site/content/ja/progressive-web-apps/what-are-pwas/index.md b/src/site/content/ja/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..d21bf082908
--- /dev/null
+++ b/src/site/content/ja/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: プログレッシブウェブアプリとは何ですか？
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: |2-
+
+  プログレッシブウェブアプリ（PWA）とそれを他のウェブアプリから差別化する 3 つの柱についてご紹介します。
+tags:
+  - progressive-web-apps
+---
+
+ウェブは素晴らしいプラットフォームです。デバイスやオペレーティングシステム全体でのユビキタス性の組み合わせ、ユーザー中心のセキュリティモデル、および仕様も実装も単一の企業が制御しているものではないという事実があるため、Webはソフトウェア開発のユニークなプラットフォームとなっています。固有のリンク機能と組み合わせることで、検索して見つけたものを誰とでも、どこからでも共有することができます。あなたがウェブサイトにアクセスするときはいつでも、最新の状態にあり、そのサイトでの経験はあなたの望みどおりにその時だけのものにも、永続的なものにもなります。 ウェブアプリケーションは、単一のコードベースで、*場所やデバイスを問わずあらゆるユーザー*に達することができます。
+
+プラットフォーム固有のアプリケーションは、非常に豊富で信頼性が高いことで知られています。それらは、ホーム画面、ドック、およびタスクバーに絶えず存在しています。これらは、ネットワーク接続に関係なく機能します。こうしたアプリケーションは、独自のスタンドアロン体験として起動します。ローカルファイルシステムからファイルを読み書きしたり、USB、シリアル、Bluetooth経由で接続されたハードウェアにアクセスしたり、連絡先やカレンダーイベントなどのデバイスに保存されているデータとやり取りしたりすることもできます。これらのアプリケーションでは、写真を撮ったり、ホーム画面に表示されている再生中のソングを確認したり、別のアプリを使用中にソングの再生を制御したりできます。プラットフォーム固有のアプリケーションは、まるでそれらが実行されるデバイスの*一部*であるかのように感じられます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="高機能を持つプラットフォーム固有のアプリ、高リーチを持つウェブアプリ、高機能と高リーチの両方を持つプログレッシブウェブアプリの相対的機能とリーチを示すグラフ。", width="370", height="367" %}<figcaption>プラットフォーム固有のアプリ、ウェブアプリ、プログレッシブウェブアプリの機能およびリーチの比較。</figcaption></figure>
+
+プラットフォーム固有のアプリとウェブアプリを機能とリーチの観点から考えると、プラットフォーム固有のアプリは機能に優れていることを示す一方で、ウェブアプリはリーチに優れていることを示します。では、プログレッシブウェブアプリはどのような位置付けになるのでしょうか？
+
+プログレッシブウェブアプリ（PWA）は、単一のコードベースで、拡張された機能、信頼性、およびインストール可能性を提供しながら、*場所やデバイスを問わず、あらゆるユーザー*に達することができるよう、最新のAPIで構築、拡張されています。
+
+## アプリの3つの柱
+
+プログレッシブウェブアプリは、高い機能を持ち、信頼性があり、インストールが可能となるように設計されたウェブアプリケーションです。これら3つの柱があるおかげで、プログレッシブウェブアプリは、まるでプラットフォーム固有のアプリケーションであるかのように感じられます。
+
+### 高い機能を持つ
+
+今日、ウェブはそれだけでも非常に有能です。たとえば、WebRTC、ジオロケーション、プッシュ通知を使用すれば、ハイパーローカルビデオチャットアプリを構築できます。そのアプリをインストール可能にし、WebGLとWebVRを使用することでそれらの会話を仮想化することができます。 Web Assemblyの導入により、開発者はC、C ++、Rustといった他のエコシステムを利用して、数十年分に相当する作業と機能をWebに導入することができます。たとえば、[Squoosh.app](https://squoosh.app/)は、それを活用して高度な画像圧縮を行います。
+
+最近まで、そうした機能を独自のものとして主張できたのはプラットフォーム固有のアプリだけでした。一部の機能はまだWebの手の届かないところにありますが、新しいAPIと今後のAPIはその現状を一変させ、Webにおけるファイルシステムアクセスやメディアコントロール、アプリバッジ、クリップボードの完全サポートなどの用途を拡張しようとしています。これらの機能はすべて、Webの安全なユーザー中心のアクセス許可モデルで構築されているため、Webサイトにアクセスする際にユーザーがビクビクすることはありません。
+
+最新のAPI、Web Assembly、および新しいAPIと今後のAPIの間で、Webアプリケーションはこれまで以上に機能が向上し、その勢いは止まりません。
+
+### 信頼性がある
+
+信頼性の高いプログレッシブウェブアプリは、ネットワークを問わず、高速で信頼性が高いと感じられます。
+
+ユーザーにサイトを*使用*してもらうには、スピードが欠かせません。実際、ページの読み込み時間が1秒から10秒になると、ユーザーがサイトを去ってしまう確率は[123％増加](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/)します。パフォーマンスは、`onload`イベント以降も続きます。たとえば、ユーザーがボタンをクリックする場合など、サイトとのやり取りがちゃんと登録されているのかをユーザーに心配させてしまうようではいけません。スクロールやアニメーションはスムーズに感じられなくてはいけません。パフォーマンスは、ユーザーによるアプリケーションの認識から実際のパフォーマンスにいたる体験のすべてに影響します。
+
+最後に、信頼できるアプリケーションは、ネットワーク接続の状態を問わず使用できる必要があります。ユーザーは、ネットワーク接続が遅くても、不安定でも、またオフラインの場合でも、アプリが起動することを期待します。ユーザーは、サーバーにリクエストを送信するのが困難であったとしても、メディアトラックやチケット、旅程など、前回操作したコンテンツが利用可能であることを期待します。リクエストを送信できない場合、ユーザーは、アプリが何の表示もせずにエラーになったり、クラッシュしたりするのではなく、問題が発生しているという表示が出ることを期待します。
+
+ユーザーは、自分の操作にすかさず反応するアプリと信頼できるエクスペリエンスを好みます。
+
+### インストール可能
+
+インストールされたプログレッシブウェブアプリは、ブラウザタブではなくスタンドアロンウィンドウで実行されます。これらは、ユーザーのホーム画面、ドック、タスクバー、またはシェルフから起動できるほか、デバイス上で検索し、アプリスイッチャーを使って切り替えることができるため、まるでインストールされているデバイスに組み込まれてあるかのように感じます。
+
+ウェブアプリがインストールされると、新しい機能が開きます。通常、ブラウザで実行するときに予約されているキーボードショートカットが利用可能になります。プログレッシブウェブアプリは、他のアプリケーションからのコンテンツを受け入れるように登録したり、さまざまな種類のファイルを処理するためのデフォルトのアプリケーションとして登録したりできます。
+
+プログレッシブウェブアプリがタブではなくスタンドアロンアプリのウィンドウで稼働するようになると、ユーザーの考え方や操作方法が変わります。
+
+## 両方の長所を活かす
+
+本質的に、プログレッシブウェブアプリは単なるウェブアプリケーションです。プログレッシブエンハンスメントを使用すると、最新のブラウザで新しい機能が有効になります。 サービスワーカーとウェブアプリのマニフェストを使用すると、ウェブアプリケーションは信頼性が高まり、とインストール可能となります。新しい機能が利用できない場合でも、ユーザーは主なエクスペリエンスを楽しめます。
+
+数字は嘘をつきません！プログレッシブウェブアプリをリリースした企業は、目覚ましい成果を上げています。たとえば、Twitterでは、セッションあたりのページ数が65％増、ツイートが75％増、バウンス率が20％減、そしてアプリのサイズは97％以上小さくなりました。 日経では、PWAに切り替えた後、オーガニックトラフィックが2.3倍に増え、サブスクリプションが58%増、毎日のアクティブユーザーが49％増となりました。Huluは、プラットフォーム固有のデスクトップエクスペリエンスをプログレッシブウェブアプリに置き換えた結果、再訪問数が27％増加しました。
+
+プログレッシブウェブアプリは、ユーザーが喜ぶウェブ体験を実現するユニークな機会を提供します。プログレッシブウェブアプリでは、強化された機能と信頼性を届ける最新のウェブ機能が活用されるため、*誰でも、どこからでも、どのデバイスを使ってでも*たった一つのコードベースを使ってアプリをインストールできます。
diff --git a/src/site/content/ja/react/index.md b/src/site/content/ja/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/ja/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/ja/reliable/http-cache/index.md b/src/site/content/ja/reliable/http-cache/index.md
new file mode 100644
index 00000000000..65aa97eb20a
--- /dev/null
+++ b/src/site/content/ja/reliable/http-cache/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: HTTPキャッシュを使用して不要なネットワーク要求を防ぐ
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-17
+description: どのようにすれば不要なネットワーク要求を回避できるのでしょうか。ブラウザのHTTPキャッシュは第1ディフェンスラインです。この方法は必ずしも最も強力または柔軟なアプローチであるとは限りません。また、キャッシュに格納された応答の存続期間を制御する能力も限定的です。しかし、これは効果的で、すべてのブラウザでサポートされているため、簡単に導入することができます。
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+ネットワーク上でリソースを取得するには、時間とコストの両方がかかります。
+
+- サイズが大きい応答では、ブラウザとサーバーと間で何度も往復する必要があります。
+- [重要なリソース](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)がすべて完全にダウンロードされるまで、ページは読み込まれません。
+- データ量が制限されているモバイルデータプランでサイトにアクセスしている場合、不要なネットワーク要求はすべて無駄なコストになります。
+
+どのようにすれば不要なネットワーク要求を回避できるのでしょうか。ブラウザのHTTPキャッシュは第1ディフェンスラインです。この方法は必ずしも最も強力または柔軟なアプローチであるとは限りません。また、キャッシュに格納された応答の存続期間を制御する能力も限定的です。しかし、これは効果的で、すべてのブラウザでサポートされているため、簡単に導入することができます。
+
+このガイドでは、効果的なHTTPキャッシュ実装の基本について説明します。
+
+## ブラウザの互換性{: #browser-compatibility }
+
+実際には、HTTPキャッシュと呼ばれる単一のAPIはありません。これは、WebプラットフォームAPIのコレクションの一般的な名前です。これらのAPIは、すべてのブラウザでサポートされています。
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## HTTPキャッシュの仕組み{: #overview }
+
+ブラウザが行うすべてのHTTP要求は、最初にブラウザキャッシュにルーティングされ、要求の実行に使用できる有効な応答がキャッシュにあるかどうかが確認されます。一致する応答がある場合、応答はキャッシュから読み取られます。これにより、ネットワーク遅延と転送のデータコストの両方が解消されます。
+
+HTTPキャッシュの動作は、[要求ヘッダー](https://developer.mozilla.org/docs/Glossary/Request_header)と[応答ヘッダーの](https://developer.mozilla.org/docs/Glossary/Response_header)組み合わせによって制御されます。理想的なシナリオでは、Webアプリケーションのコード (要求ヘッダーを決定する) とWebサーバーの構成 (応答ヘッダーを決定する) の両方を制御できるようになります。
+
+詳細な概念の概要については、 MDNの[HTTPキャッシュ](https://developer.mozilla.org/docs/Web/HTTP/Caching)の記事を確認してください。
+
+## 要求ヘッダー：デフォルトを使用する (通常) {: #request-headers }
+
+Webアプリケーションの送信要求には多数の重要なヘッダーが含まれていますが、ほとんどの場合、要求が実行されると、ユーザーではなく、ブラウザによってヘッダーが設定されます。 [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match)と[`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since)など、鮮度のチェックに影響する要求ヘッダーは、ブラウザで認識されているHTTPキャッシュの現在の値に基づいて表示されます。
+
+これは朗報です。つまり、`<img src="my-image.png">`ようなタグを引き続きHTMLに含めることができ、ユーザー側で作業しなくても、ブラウザで自動的にHTTPキャッシュが処理されます。
+
+{% Aside %} WebアプリケーションでHTTPキャッシュの制御を強化する必要がある開発者向けには、別の方法があります。レベルを落とし、手動で[APIの取得](https://developer.mozilla.org/docs/Web/API/Fetch_API)を使用して、特定の[`Request`](https://developer.mozilla.org/docs/Web/API/Request)オーバーライドが設定された[`Request`](https://developer.mozilla.org/docs/Web/API/Request/cache)オブジェクトを渡すことができます。ただし、これはこのガイドの対象外であるため、ここでは説明しません。 {% endAside %}
+
+## 応答ヘッダー：Webサーバーを構成する{: #response-headers }
+
+HTTPキャッシュ設定の最も重要な部分は、Webサーバーが各送信応答に追加するヘッダーです。次のヘッダーはすべて、効果的なキャッシュ動作に影響します。
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control): サーバーは、 `Cache-Control`ディレクティブを返します。このディレクティブは、ブラウザおよびその他の中間キャッシュが個々の応答をキャッシュする方法と期間を指定します。
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag): ブラウザは、期限切れになったキャッシュに格納された応答を見つけると、小さいトークン (通常はファイルの内容のハッシュ) をサーバーに送信して、ファイルが変更されたかどうかを確認できます。サーバーが同じトークンを返す場合、ファイルは同じであり、再ダウンロードする必要はありません。
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified): このヘッダーは、`ETag`と同じ目的を果たしますが、`ETag`のコンテンツベースのストラテジとは対照的に、時間ベースのストラテジを使用して、リソースが変更されたかどうかを判断します。
+
+一部のWebサーバーには、デフォルトでこれらのヘッダーを設定するためのビルトインのサポートがありますが、明示的に構成しないかぎり、ヘッダーを完全に除外するものもあります。ヘッダーの構成*方法*の具体的な詳細は、使用するWebサーバーによって大きく異なります。最も正確な詳細については、サーバーのマニュアルを参照してください。
+
+検索を減らすために、いくつかの一般的なWebサーバーの構成に関する手順を次に示します。
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+`Cache-Control`応答ヘッダーを省略しても、HTTPキャッシュは無効になりません。特定のタイプのコンテンツに対して最も合理的なキャッシュ動作の種類は、ブラウザによって[効果的に推測](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness)されます。ブラウザの推測よりも詳細な制御が必要になる可能性があるため、時間をかけて応答ヘッダーを構成してください。
+
+## 使用すべき応答ヘッダー値{: #response-header-strategies }
+
+Webサーバーの応答ヘッダーを構成するときには、次の2つの重要なシナリオに対応してください。
+
+### バージョン管理されたURLの長期キャッシュ{: #versioned-urls }
+
+{% Details %} {% DetailsSummary 'h4' %}バージョン管理されたURLはキャッシュストラテジに役立ちます。バージョン管理されたURLは、キャッシュに保存された応答を簡単に無効化できるため、優れた方法です。{% endDetailsSummary %}サーバーがブラウザーにCSSファイルを1年間キャッシュに保存するように命令 (<code>Cache-Control: max-age=31536000</code>) し、設計者が緊急更新を行ったため、すぐにロールアウトする必要があるとします。キャッシュに保存された「古い」コピーを更新するようにブラウザに通知するにはどうすればよいのでしょうか。少なくとも、リソースのURLを変更せずに行うことはできません。ブラウザが応答をキャッシュに保存した後、キャッシュに保存されたバージョンは、<code>max-age</code>または<code>expires</code>の判定に基づき最新の状態でなくなったか、何らかの他の理由 (たとえば、ユーザーがブラウザのキャッシュを消去したなど) でキャッシュから削除されるまで使用されます。その結果、ページの作成時に異なるユーザーが異なるバージョンのファイルを使用する可能性があります。つまり、リソースを取得したばかりのユーザーは新しいバージョンを使用し、以前の (まだ有効な) コピーをキャッシュに保存したユーザーは古いバージョンの応答を使用します。クライアント側のキャッシュと迅速な更新の両方の長所をどのように活用できるのでしょうか。コンテンツが変更されるたびに、リソースのURLを変更し、ユーザーに新しい応答を強制的にダウンロードさせることになります。通常、これを行うには、ファイルのフィンガープリントまたはバージョン番号をファイル名に埋め込みます (例: <code>style.x234dff.css</code>。{% endDetails %}
+
+[フィンガープリント](https://en.wikipedia.org/wiki/Fingerprint_(computing))またはバージョン情報を含み、内容が変更されないURLの要求に応答する場合は、応答に`Cache-Control: max-age=31536000`を追加します。
+
+この値を設定すると、次の1年間 (31,536,000秒、サポートされる最大値) の任意の時点で同じURLを読み込む必要があるときに、Webサーバーに対してネットワーク要求をまったく行わずに、HTTPキャッシュ内の値をすぐに使用できることをブラウザに通知します。これはすばらしいことです。ネットワークを回避することで信頼性と速度がすぐに実現できます。
+
+webpackのようなビルドツールは、アセットURLにハッシュフィンガープリントを割り当てる[プロセスを自動化](https://webpack.js.org/guides/caching/#output-filenames)できます。
+
+{% Aside %}さらなる最適化として[`immutable`プロパティ](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading)を`Cache-Control`ヘッダーに追加することもできますが、一部のブラウザでは[無視されます](https://www.keycdn.com/blog/cache-control-immutable#browser-support)。{% endAside %}
+
+### バージョン管理されていないURLのサーバーによる再検証{: #unversioned-urls }
+
+残念ながら、読み込むすべてのURLがバージョン管理されるわけではありません。Webアプリケーションを展開する前に、ビルドステップを含めることができず、ハッシュをアセットURLに追加できない場合もあります。さらに、すべてのWebアプリケーションではHTMLファイルが必要です。これらのファイルはバージョン情報を含むことはほとんどありません。アクセスするURLが`https://example.com/index.34def12.html`であることを記憶している必要がある場合、Webアプリをわざわざ使用することはありません。では、このようなURLに対して何ができるのでしょうか。
+
+このシナリオでは、敗北を認めなければなりません。 HTTPキャッシュだけでは、ネットワークを完全に回避するほど強力ではありません。([サービスワーカー](/service-workers-cache-storage/)についてはすぐに学習します。サービスワーカーはこの状況を有利にするために必要なサポートを提供します。) ただし、ネットワーク要求が可能なかぎり高速かつ効率的であることを保証するために実行できるいくつかの手順があります。
+
+次の`Cache-Control`値は、バージョン管理されていないURLがキャッシュに保存される場所と方法を微調整するのに役立ちます。
+
+- `no-cache`: これは、キャッシュに保存されたバージョンのURLを使用する前に、毎回サーバーで再検証する必要があることをブラウザに命令します。
+- `no-store` 。これは、ブラウザおよびその他の中間キャッシュ（CDNなど）に、ファイルのどのバージョンも保存しないように指示します。
+- `private`: ブラウザはファイルをキャッシュに保存できますが、中間キャッシュはできません。
+- `public`: 応答は任意のキャッシュに保存できます。
+
+[付録: `Cache-Control`フローチャート](#flowchart)を確認して、使用する`Cache-Control`値を決定するプロセスを視覚化してください。 `Cache-Control`には、カンマ区切りのディレクティブのリストを使用することもできます。<a href="#examples" data-md-type="link">付録: `Cache-Control`の例</a>を参照してください。
+
+さらに、[`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag)または[`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified)の2つの追加の応答ヘッダーのいずれかを設定することも役立ちます。[Responseヘッダー](#response-headers)で説明したように、`ETag`と`Last-Modified`はいずれも同じ目的を果たします。つまり、ブラウザで有効期限が切れたキャッシュのファイルを再ダウンロードする必要があるかどうかを判断します。`ETag`の方が正確であり、推奨されます。
+
+{% Details %} {% DetailsSummary 'h4' %}ETagの例: {% endDetailsSummary %}最初の取得から120秒が経過し、ブラウザが同じリソースに対して新しい要求を開始したと仮定します。まず、ブラウザはHTTPキャッシュをチェックし、以前の応答を検索します。残念ながら、応答の有効期限が切れているため、ブラウザは以前の応答を使用できません。この時点で、ブラウザは新しい要求を配信し、新しい完全な応答を取得できます。ただし、リソースが変更されていない場合は、すでにキャッシュにある同じ情報をダウンロードする理由がないため、これは非効率的です。 <code>ETag</code>ヘッダーで指定されている検証トークンが解決するように設計されている問題です。サーバーは任意のトークンを生成して返します。これは通常、ファイルの内容のハッシュまたはその他のフィンガープリントです。ブラウザは、フィンガープリントがどのように生成されるかを認識する必要はありません。次の要求でサーバーに送信するだけで済みます。フィンガープリントが同じである場合、リソースは変更されておらず、ブラウザはダウンロードをスキップできます。 {% endDetails %}
+
+`ETag`または`Last-Modified`を設定すると、再検証要求が大幅に効率的になります。最終的には、[要求ヘッダー](#request-headers)に記述された[`If-Modified-Since`](#request-headers)または[`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match)がトリガーされます。
+
+適切に構成されたWebサーバーは、受信要求ヘッダーを確認するときに、ブラウザによってすでにHTTPキャッシュに格納されたリソースのバージョンがWebサーバー上の最新バージョンと一致するかどうかを確認できます。一致がある場合、サーバーは[`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304) HTTP応答で応答できます。これは、「既存のリソースを引き続き使用すること」という意味です。このような応答を送信するときには、転送するデータがほとんどありません。このため、通常は、要求されている実際のリソースのコピーを実際に返送するよりも処理が大幅に高速化します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="リソースを要求しているクライアントと304ヘッダーで応答しているサーバーの図。", width="474", height="215" %} <figcaption>ブラウザはサーバーに<code>/file</code>を要求し<code>If-None-Match</code>ヘッダーを追加して、サーバー上のファイルの<code>ETag</code>がブラウザの<code>If-None-Match</code>値と一致しない場合にのみ、完全なファイルを返すようにサーバーに命令します。この場合、2つの値が一致したため、サーバーは、ファイルをキャッシュに保存する期間に関する命令 (<code>Cache-Control: max-age=120</code>) と<code>304 Not Modified</code>応答を返します。</figcaption></figure>
+
+## まとめ{: #summary }
+
+HTTPキャッシュを使用すると、不要なネットワーク要求が減るため、読み込みパフォーマンスを向上させるための効果的な方法になります。HTTPキャッシュはすべてのブラウザでサポートされており、設定にそれほど手間はかかりません。
+
+次の`Cache-Control`構成から始めることをお勧めします。
+
+- `Cache-Control: no-cache`: 使用する前に毎回サーバーと再検証すべきリソース。
+- `Cache-Control: no-store`: 絶対にキャッシュに保存しないリソース。
+- `Cache-Control: max-age=31536000`: バージョン管理リソース。
+
+また、`ETag`または`Last-Modified`ヘッダーは、期限切れのキャッシュリソースをより効率的に再検証するのに役立ちます。
+
+{% Aside 'codelab' %}[HTTP Cache codelab](/codelab-http-cache)を試して、Expressで`Cache-Control`と`ETag`を実際に体験してください。 {% endAside %}
+
+## 詳細{: #learn-more }
+
+`Cache-Control`ヘッダーの使用の応用的な使用方法については、Archibaldの[Caching best practices &amp; max-age gotchas](https://jakearchibald.com/2016/caching-best-practices/)を確認してください。
+
+繰り返しアクセスするユーザー向けにキャッシュの使用を最適化する方法については、[Love your cache](/love-your-cache)を参照してください。
+
+## 付録: その他のヒント{: #tips }
+
+時間に余裕がある場合は、次の方法でHTTPキャッシュの使用を最適化できます。
+
+- 一貫性のあるURLを使用します。同じコンテンツを異なるURLで提供する場合、そのコンテンツは複数回取得および保存されます。
+- チャーンを最小限に抑えます。リソースの一部 (CSSファイルなど) が頻繁に更新され、ファイルの残りの部分 (ライブラリコードなど) が頻繁に更新されない場合は、頻繁に更新されるコードを別のファイルに分割して、頻繁に更新されるコードには短時間のキャッシュストラテジを使用し、頻繁に変更されないコードには長時間のキャッシュストラテジを使用することを検討してください。
+- `Cache-Control`ポリシーである程度の古さが許容される場合は、新しい[`stale-while-revalidate`{/a0ディレクティブを確認してください。](/stale-while-revalidate/)
+
+## 付録: `Cache-Control`フローチャート{: #flowchart }
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="フローチャート", width="595", height="600" %}
+
+## 付録: `Cache-Control`例{: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<code>Cache-Control</code>値</th>
+        <th>説明</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>応答は、ブラウザおよび中間キャッシュによって最大1日間 (60秒 x 60分 x 24時間) キャッシュに保存できます。</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>応答は、ブラウザによって最大10分間 (60秒 x 10分間) キャッシュに保存できます (中間キャッシュはキャッシュに保存できません)。</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>応答は、任意のキャッシュに1年間保存できます。</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>応答をキャッシュに保存することは許可されておらず、要求ごとに全体を取得する必要があります。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/ja/reliable/index.md b/src/site/content/ja/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/ja/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/ja/reliable/offline-cookbook/index.md b/src/site/content/ja/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..ec5b63f471d
--- /dev/null
+++ b/src/site/content/ja/reliable/offline-cookbook/index.md
@@ -0,0 +1,616 @@
+---
+layout: post
+title: オフラインクックブック
+description: アプリをオフラインで動作させるための一般的なレシピ。
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+[サービスワーカー](/service-workers-cache-storage/)を用いたオフラインでの解決をあきらめ、開発者たちに自力で解決するための可動要素を提供しました。キャッシュとリクエストの処理方法をコントロールできます。つまり、独自のパターンを作成できるということです。考えられるいくつかのパターンを別々に見てみましょう。ただし、実際には、URL とコンテキストに応じて、多くのパターンを連携させて使用する可能性があります。
+
+こうしたパターンの実用的なデモは、[Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) およびパフォーマンスへの影響を示す[こちらのビデオ](https://www.youtube.com/watch?v=px-J9Ghvcx4)で一部ご覧いただけます。
+
+## キャッシュマシン - リソースを保存するタイミング
+
+[サービスワーカー](/service-workers-cache-storage/)を使用すれば、リクエストの処理をキャッシュとは別に行えますので、切り離してお見せしていきます。まずは、キャッシングを行うタイミングについて見ていきましょう。
+
+### インストール時 - 依存関係としての場合 {: #on-install-as-dependency}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="インストール時 - 依存関係としての場合。", width="800", height="498" %}<figcaption>インストール時 - 依存関係としての場合。</figcaption></figure>
+
+サービスワーカーは、`install` イベントを起こします。これを使用すれば、他のイベントを処理する前に準備しておく必要があるものを準備できます。このイベントが発生する間、サービスワーカーの古いバージョンはまだ実行中で、ページのためにあくせく働いていますので、ここで実行することがサービスワーカーの働きを邪魔することがあってはいけません。
+
+**理想的な用途:** CSS、画像、フォント、JS、テンプレートなど、基本的には、サイトのその「バージョン」に対して静的であるとみなせるもの。
+
+これらは、フェッチに失敗した場合にサイトの機能を完全に損なわせるものであり、同等のプラットフォーム固有アプリが最初のダウンロードの一部として取り込むものです。
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil`は、インストールの長さと成功を定義する Promise を受け取ります。Promise が拒否された場合、インストールは失敗と見なされ、このサービスワーカーは破棄されます (古いバージョンが実行されている場合は、そのまま残ります)。`caches.open()` と `cache.addAll()` は Promise を返します。リソースのいずれかのフェッチに失敗した場合、`cache.addAll()` の呼び出しは拒否されます。
+
+[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) では、これを使用して[静的アセットをキャッシュ](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3)します。
+
+### インストール時 - 依存関係としてではない場合 {: #on-install-not}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="インストール時 - 依存関係としてではない場合。", width="800", height="500" %}<figcaption>インストール時 - 依存関係としてではない場合。</figcaption></figure>
+
+これは上述した内容と似ていますが、インストールの完了を遅らせることも、キャッシュが失敗した場合にインストールを失敗させることもありません。
+
+**理想的な用途:** ゲーム後半のレベルのアセットなど、すぐには必要とされない一層大きなリソース。
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+上記の例では、レベル 11～20 の `cache.addAll` Promise が `event.waitUntil` に戻されないため、たとえ失敗しても、ゲームは引き続きオフラインでプレイできます。もちろん、こうしたレベルが存在しない場合に備え、実際に存在しない場合は、それらをもう一度キャッシングしようと試みる必要があります。
+
+サービスワーカーは、イベントの処理を完了しているため、レベル 11〜20 のダウンロード中に強制終了される可能性があります。つまり、イベントはキャッシュされません。将来的には、こういったケースや映画のような容量の大きなダウンロードは、[Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API) によって処理されるようになります。現在、その API は Chromium フォークでのみサポートされています。
+
+### アクティベート時 {: #on-activate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="アクティベート時", width="800", height="500" %}<figcaption>アクティベート時。</figcaption></figure>
+
+**理想的な用途:** クリーンアップと移行。
+
+新しいサービスワーカーがインストールされ、前のバージョンが使用されなくなれば、新しいサービスワーカーがアクティブになり、`activate` イベントが発生します。古いバージョンはもう使用されないため、このタイミングで [IndexedDB におけるスキーマの移行](/indexeddb-best-practices/)を処理し、未使用のキャッシュを削除しておくとよいでしょう。
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+アクティベーション中には、`fetch` といった他のイベントがキューに入るため、アクティベーションが長くなり、ページの読み込みがブロックされる可能性があります。アクティベーションは極力効率的なものにして、古いバージョンがアクティブであったときには*実行できなかったこと*だけに使用しましょう。
+
+[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) では、これを使用して[古いキャッシュを除去](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17)します。
+
+### ユーザーによる操作時 {: #on-user-interaction}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="ユーザーによる操作時。", width="800", height="222" %}<figcaption>ユーザーによる操作時。</figcaption></figure>
+
+**理想的な用途:** サイト全体をオフラインにはできないため、ユーザーがオフラインで利用できるコンテンツを選択できるようにした場合。たとえば、YouTube のようなビデオやウィキペディアの記事、Flickr の特定のギャラリーなどが該当します。
+
+ユーザーのために [後で読む] ボタンや [オフライン用に保存] ボタンを用意します。クリックされたら、ネットワークから必要なものをフェッチして、キャッシュにポップします。
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+[caches API](https://developer.mozilla.org/docs/Web/API/Cache) は、ページとサービスワーカーから利用できるため、キャッシュに何かを追加するのにサービスワーカーを使う必要がありません。
+
+### ネットワークからレスポンスを受信する時 {: #on-network-response}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="ネットワークからレスポンスを受信する時。", width="800", height="390" %}<figcaption>ネットワークからレスポンスを受信する時。</figcaption></figure>
+
+**理想的な用途:** ユーザーの受信トレイや記事の内容といったリソースを頻繁に更新する場合。アバターなどの必須ではないコンテンツにも便利ですが、注意が必要です。
+
+リクエストがキャッシュ内のデータのいずれにも一致しない場合は、ネットワークからリクエストを取得してページに送信すると同時にキャッシュに追加します。
+
+これをアバターなどのさまざまな URL に対して行う場合は、オリジンのストレージを肥大化させないよう注意が必要です。ユーザーがディスクスペースを解放する必要がある場合に、最初の候補になるのは避けたいものです。キャッシュ内の不要なアイテムは必ず削除しましょう。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+メモリを効率的に使用するために、レスポンス / リクエストの本文を読み取ることができるのは 1 回だけです。上記のコードは、 [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) を使用して、個別に読み取ることができる別のコピーを作成します。
+
+[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) では、これを使用して [Flickr 画像](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109)をキャッシュします。
+
+### Stale-while-revalidate {: #stale-while-revalidate}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="Stale-while-revalidate。", width="800", height="388" %}<figcaption>Stale-while-revalidate。</figcaption></figure>
+
+**理想的な用途:** リソースを頻繁に更新するが、最新バージョンを使用することは必須ではない場合。アバターはこのカテゴリに該当します。
+
+キャッシュされたバージョンが利用可能な場合は、それを使用しますが、次回に備えてアップデートをフェッチします。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+[これは、HTTPのstale-while-revalidate](https://www.mnot.net/blog/2007/12/12/stale)と非常によく似ています。
+
+### プッシュメッセージ送信時 {: #on-push-message}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="プッシュメッセージ送信時。", width="800", height="498" %}<figcaption>プッシュメッセージ送信時。</figcaption></figure>
+
+[Push API](/push-notifications/) は、サービスワーカーを土台に構築されたもう 1 つの機能です。これを使用することで、OS のメッセージングサービスから送られてくるメッセージに応答して、サービスワーカーを起動できます。これは、ユーザーがサイトに対してタブを開いていない場合でも発生します。サービスワーカーだけが起動します。ページからこれを行う許可を要求すると、ユーザーにプロンプトが表示されます。
+
+**最適な用途:** チャットメッセージ、最新ニュース、電子メールなどの通知に関連するコンテンツ。また、ToDo リストの更新やカレンダーの変更など、即時に同期することがメリットとなるコンテンツを変更する頻度が低い場合。
+
+{% YouTube '0i7YdSEQI1w' %}
+
+タップすると関連するページを開く、またはそれにフォーカスを当てる通知が一般的には最終的な結果となりますが、これが発生する前にキャッシュを更新するということが*非常に重要*となります。ユーザーはプッシュメッセージを受信した時点では明らかにオンライン中なわけですがが、最終的に通知を操作するときはオフラインである可能性があるため、このコンテンツをオフラインで利用できるようにすることが重要です。
+
+このコードは、通知を表示する前にキャッシュを更新します。
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### バックグランドでの同期時 {: #on-background-sync}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="バックグランドでの同期時。", width="800", height="219" %}<figcaption>バックグランドでの同期時。</figcaption></figure>
+
+[バックグランドでの同期時](https://developer.chrome.com/blog/background-sync/)も、サービスワーカーを土台に構築された機能の 1 です。これを使えば、バックグラウンドデータの同期を 1 回だけ、または (非常にヒューリスティックな) 間隔で要求できます。これは、ユーザーがサイトに対してタブを開いていなくても発生します。サービスワーカーだけが起動します。ページからこれを行う許可を要求すると、ユーザーにプロンプトが表示されます。
+
+**理想的な用途:** 緊急性のない更新。特に更新がある度に送られてくるプッシュメッセージがユーザーにとって頻繁すぎるほど定期的に発生する更新  (ソーシャルタイムラインやニュース記事など)。
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## キャッシュの永続性 {: #cache-persistence}
+
+あなたのオリジンには、やりたいことができるように、一定の空きスペースが与えられます。その空きスペースは、すべてのオリジンストレージ[((ローカル) ストレージ](https://developer.mozilla.org/docs/Web/API/Storage)、[IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB) 、[ファイルシステムアクセス](/file-system-access/)、そして、もちろん[キャッシュ](https://developer.mozilla.org/docs/Web/API/Cache)) の間で共有されます。
+
+あなたに与えられる量は仕様で決定されていません。これは、デバイスやストレージ条件によります。以下のコードを使えば、自分に割り当てられた量を確認できます。
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+ただし、すべてのブラウザのストレージと同様に、ブラウザは、デバイスのストレージが不足してくると、自由にデータを破棄することができます。残念なことに、ブラウザは、ユーザーが何としてでもキープしておきたい映画と無くてもいいようなゲームとの違いを区別することができません。
+
+この回避策として、[StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager) インターフェイスを使用します。
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+もちろん、ユーザーは許可を与える必要があります。これには、PermissionsAPI を使用します。
+
+ユーザーによる操作をこのフローに含めるのは重要なことです。これは、ユーザーに削除する作業を任せられるためです。デバイスのストレージが不足し始め、重要でないデータをクリアしてもそれを解決しない場合、ユーザーはキープするアイテムと削除するアイテムを決定することができます。
+
+これを機能させるには、オペレーティングシステムが、ブラウザを単一のアイテムとして報告するのではなく、「耐久性のある」オリジンを、ストレージ使用量の内訳でプラットフォーム固有のアプリと同等に扱う必要があります。
+
+## 提案への対応 — リクエストへの対応 {: #serving-suggestions}
+
+データは好きなだけキャッシュできます。どのタイミングで、どのように使用するかを指示しない限り、サービスワーカーがキャッシュを使用することはありません。以下に、リクエストの処理パターンをいくつか紹介します。
+
+### キャッシュのみ {: #cache-only}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="キャッシュのみ。", width="800", height="272" %}<figcaption>キャッシュのみ。</figcaption></figure>
+
+**理想的な用途:** サイトの特定の「バージョン」に対して静的であると考えられるもの。これらは、その存在を当てにできるよう、インストールイベントでキャッシュしておく必要があります。
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+このケースを特別に処理することは稀ですが、その方法は [Cache, falling back to network](#cache-falling-back-to-network) でカバーしています。
+
+### ネットワークのみ {: #network-only}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="ネットワークのみ。", width="800", height="272" %}<figcaption>ネットワークのみ。</figcaption></figure>
+
+**理想的な用途:** 分析 ping や GET 以外のリクエストなど、同等のオフライン機能が無いもの。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+このケースを特別に処理することが必要になるのは稀ですが、そのやり方は、[キャッシュ、ネットワークへのフォールバック)](#cache-falling-back-to-network) でカバーします。
+
+### キャッシュ、ネットワークへのフォールバック {: #cache-falling-back-to-network}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="キャッシュ、ネットワークへのフォールバック。", width="800", height="395" %}<figcaption>キャッシュ、ネットワークへのフォールバック。</figcaption></figure>
+
+**理想的な用途:** オフラインファーストのアプローチで構築する場合。そのような場合は、以下のコードでリクエストの大多数を処理します。他のパターンは、受信するリクエストに応じて例外とされます。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+これにより、キャッシュ内のものに対しては「キャッシュのみ」の動作が提供され、キャッシュされていないものに対しては「ネットワークのみ」の動作が提供されます (キャッシュできないため、GET 以外のすべてのリクエストが含まれます)。
+
+### キャッシュとネットワークの競合 {: #cache-and-network-race}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="キャッシュとネットワークの競合。", width="800", height="427" %}<figcaption> キャッシュとネットワークの競合。</figcaption></figure>
+
+**理想的な用途:** 小さなアセットのうち、ディスクアクセスが遅いデバイスにおいてパフォーマンスを追い求めているアセット。
+
+古いハードドライブ、ウイルススキャナー、および高速インターネット接続の組み合わせ方によっては、ディスクよりもネットワークからの方がリソースをすばやく取得できる場合があります。ただし、ユーザーのデバイスにコンテンツがあるときにネットワークにアクセスすると、データが無駄になる可能性があるため、注意が必要です。
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### ネットワークがキャッシュにフォールバックする場合 {: #network-falling-back-to-cache}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="ネットワークがキャッシュにフォールバックする場合。", width="800", height="388" %}<figcaption>ネットワークがキャッシュにフォールバックする場合。</figcaption></figure>
+
+**理想的な用途:** サイトの「バージョン」の外で頻繁に更新されるリソースのクイックフィックス。たとえば、記事、アバター、ソーシャルメディアのタイムライン、ゲームリーダーボードなど。
+
+つまり、オンラインユーザーには最新のコンテンツを提供される一方で、オフラインユーザーには古いキャッシュバージョンが提供されます。ネットワークリクエストが成功した場合は、[キャッシュエントリを更新](#on-network-response)することをお勧めします。
+
+ただし、この方法には欠点があります。ユーザーが断続的な接続、または低速の接続を使用している場合は、全く差し支えのないコンテンツすでにデバイス上にあるにもかかわらず、それを取得するにはデバイスに何らかの障害が起きるまで待たなくてはいけないのです。それまでには、とても長い時間がかかり、ユーザーにとってはとてもイライラする使用体験となります。より好適な解決策については、次のパターン、[キャッシュ、ネットワークの順にアクセスする](#cache-then-network)を参照してください。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### キャッシュ、ネットワークの順にアクセスする {: #cache-then-network}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="Cache then network。", width="800", height="478" %}<figcaption>キャッシュ、ネットワークの順にアクセスする。</figcaption></figure>
+
+**最適な用途:** 頻繁に更新されるコンテンツ。例: 記事、ソーシャルメディアのタイムライン、ゲーム。リーダーボードなど。
+
+この場合、ページは 2 つのリクエストを行う必要があります。1 つはキャッシュに対して、もう 1 つはネットワークに対して行います。最初にキャッシュされたデータを表示してから、ネットワークデータが到着したとき / 到着した場合にページを更新するというものです。
+
+新しいデータが到着したときに現在のデータを置き換えることができる場合もありますが (ゲームリーダーボードなど)、コンテンツが大きい場合は混乱を招く可能性があります。基本的に、ユーザーが読んだり、操作したりしているかもしれないものを「消してしまう」のはいけません。
+
+Twitter では、古いコンテンツの上に新しいコンテンツを追加し、ユーザーがスムーズにコンテンツを読めるように、スクロールの位置が調整されています。これができるのは、Twitter ではコンテンツに対してほぼ線形の順序が大体維持されているためです。私は、このやり方を [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) に適用し、コンテンツを出来るだけ速く画面に表示するようにしましたが、最新のコンテンツについては到着すると同時に表示しています。
+
+**ページのコード:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**サービスワーカーのコード:**
+
+常にネットワークにアクセスし、キャッシュを更新する必要があります。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) では、回避策として [fetch の代わりに XHR](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3) を使用し、Accept ヘッダーを基準外の使い方をして、結果を取得する場所 ([ページコード](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70)、[サービスワーカーコード](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)) をサービスワーカーに指示しました。
+
+### 一般的なフォールバック {: #generic-fallback}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="一般的なフォールバック。", width="800", height="389" %}<figcaption>一般的なフォールバック。</figcaption></figure>
+
+キャッシュやネットワークから提供できないものがあった場合は、一般的なフォールバックを提供することをお勧めします。
+
+**最適な用途:** アバター、失敗した POST リクエスト、「オフライン中は利用できません」ページといったセカンダリ画像。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+フォールバック先のアイテムは、[インストールの依存関係](#on-install-as-dependency)である可能性があります。
+
+ページに電子メールが表示されている場合、サービスワーカーは、電子メールを IndexedDB の「送信トレイ」に保存することにフォールバックし、送信は失敗したがデータは正常に保持されたことをページに知らせることによって応答する場合があります。
+
+### サービスワーカー側のテンプレート {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="サービスワーカー側のテンプレート。", width="800", height="463" %} <figcaption>サービスワーカー側のテンプレート。</figcaption></figure>
+
+**理想的な用途:** サーバーの応答をキャッシュできないページ。
+
+[ページをサーバー上でレンダリングすると処理が速くなる](https://jakearchibald.com/2013/progressive-enhancement-is-faster/)ものですが、これは、「ログイン済み…」など、キャッシュ内では理解に困るような状態データが含まれることを意味する場合があります。ページがサービスワーカーによって制御されている場合は、代わりにテンプレートと一緒に JSON データをリクエストし、それをレンダリングすると良いかもしれません。
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## まとめ
+
+使用するメソッドをこのうちの 1 つに限定する必要はありません。実際、リクエストの URL によっては、たくさんの方法を活用することになるでしょう。たとえば、[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) では以下が使用されています。
+
+- [インストール時のキャッシュ](#on-install-as-dependency) (静的 UIと動作の場合)
+- [ネットワークからレスポンスを受信する時にキャッシュ](#on-network-response) (Flickr 画像とデータの場合)
+- [キャッシュからフェッチし、ネットワークにフォールバックする](#cache-falling-back-to-network) (大半のリクエストの場合)
+- [キャッシュ、ネットワークの順にフェッチする](#cache-then-network) (Flickr 検索結果の場合)
+
+どう対応するかは、リクエストを見て判断します。
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+お分かりいただけたでしょうか。
+
+### クレジット
+
+素敵なアイコンをご提供いただきありがとうございます。
+
+- [コード](http://thenounproject.com/term/code/17547/): buzzyrobot
+- [カレンダー](http://thenounproject.com/term/calendar/4672/): Scott Lewis
+- [ネットワーク](http://thenounproject.com/term/network/12676/): Ben Rizzo
+- [SD](http://thenounproject.com/term/sd-card/6185/): Thomas Le Bas
+- [CPU](http://thenounproject.com/term/cpu/72043/): iconsmind.com
+- [ゴミ箱](http://thenounproject.com/term/trash/20538/): trasnik
+- [通知](http://thenounproject.com/term/notification/32514/): @daosme
+- [レイアウト](http://thenounproject.com/term/layout/36872/): Mister Pixel
+- [クラウド](http://thenounproject.com/term/cloud/2788/): P.J. Onori
+
+そして、「公開」前にお恥ずかしいミスをたくさん見つけてくれた [Jeff Posnick](https://twitter.com/jeffposnick) に感謝します。
+
+### 参考文献
+
+- [Service Workers—an Introduction (サービスワーカー — はじめに)](/service-workers-cache-storage/)
+- [Is Service Worker ready? (サービスワーカーの準備はできていますか？)](https://jakearchibald.github.io/isserviceworkerready/)—track the implementation status across the main browsers (メインブラウザー全体で実装ステータスを追跡)
+- [JavaScript Promises — an Introduction (JavaScript の Promise - はじめに)](/promises) - guide to promises (Promise の手引き)
diff --git a/src/site/content/ja/secure/cross-origin-isolation-guide/index.md b/src/site/content/ja/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..1130be2c5bc
--- /dev/null
+++ b/src/site/content/ja/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: クロスオリジンアイソレーションを有効にするためのガイド
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: クロスオリジンアイソレーションを使用すると、ウェブページで SharedArrayBuffer のような強力な機能を使用できるようになります。この記事では、ウェブサイトでクロスオリジンアイソレーションを有効にする方法について説明します。
+description: クロスオリジンアイソレーションを使用すると、ウェブページで SharedArrayBuffer のような強力な機能を使用できるようになります。この記事では、ウェブサイトでクロスオリジンアイソレーションを有効にする方法について説明します。
+tags:
+  - security
+---
+
+このガイドでは、Cross-Origin Isolation (クロスオリジンアイソレーション) を有効にする方法を説明します。クロスオリジンアイソレーションは、[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) や [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/)、[高精度の高解像度タイマー](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/)を使用する場合に必要となります。
+
+クロスオリジンアイソレーションを有効にする場合は、広告の配置など、ウェブサイト上の他のクロスオリジンリソースに与える影響を評価してください。
+
+{% Details %} {% DetailsSummary %} `SharedArrayBuffer` がウェブサイト上のどこで使用されているかを判断します。
+
+Chrome 92 以降、`SharedArrayBuffer` を使用する機能は、クロスオリジンアイソレーションがないと動作しなくなります。`SharedArrayBuffer` が非推奨となったことを告げるメッセージを見てこのページにたどり着いたのであれば、お使いのウェブサイトまたはそのウェブサイトに埋め込まれているリソースの 1 つが `SharedArrayBuffer` を使用している可能性があります。これが非推奨となったためにウェブサイトサイトで問題が発生するということがないように、まずは使用されている場所を特定します。
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- クロスオリジンアイソレーションを有効にして、`SharedArrayBuffer` を引き続き使用できるようにします。
+- `SharedArrayBuffer` を使用するサードパーティのコードに依存している場合は、サードパーティのプロバイダーに何らかの措置を取るよう通知してください。 {% endAside %}
+
+`SharedArrayBuffer` がサイトのどこで使用されているかわからない場合は、次の 2 つの方法で確認できます。
+
+- ChromeDevTools を使う
+- (高度) 非推奨のレポート機能を使う
+
+`SharedArrayBuffer`を使用している場所がすでにわかっている場合は、[クロスオリジンアイソレーションの影響を分析する](#analysis)にスキップしてください。
+
+### ChromeDevTools を使う
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) を使用すると、開発者はウェブサイトを検査できます。
+
+1. [SharedArrayBuffer](https://developer.chrome.com/docs/devtools/open/) を使用していると思われるページで [Chrome DevTools を開きます](https://developer.chrome.com/docs/devtools/open/)。
+2. **コンソール**パネルを選択します。
+3. ページに `SharedArrayBuffer` が使用されている場合は、次のメッセージが表示されます。
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. メッセージの最後に記載されているファイル名と行番号 (たとえば、`common-bundle.js:535`) は、 `SharedArrayBuffer` がどこから取得されているのかを示しています。サードパーティのライブラリの場合は、開発者に連絡して問題を修正してください。ウェブサイトの一部として実装されている場合は、以下のガイドに従って、クロスオリジンアイソレーションを有効にしてください。
+
+<figure>
+  {% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation", width="800", height="163" %}
+  <figcaption>DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation.</figcaption>
+</figure>
+
+### (高度) 非推奨のレポート機能を使う
+
+一部のブラウザには、[非推奨になる API を指定されたエンドポイントに報告する機能](https://wicg.github.io/deprecation-reporting/)があります。
+
+1. [非推奨レポートサーバーをセットアップし、報告する URL を取得します](/coop-coep/#set-up-reporting-endpoint)。これは、公共のサービスを使用するか、独自に構築して行います。
+2. URL を使って、`SharedArrayBuffer` を提供している可能性のあるページに次の HTTP ヘッダーを設定します。
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. ヘッダーの伝播が開始されると、登録したエンドポイントが非推奨レポートの収集を開始します。
+
+こちらの実装例を参照してください： [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me)。
+
+{% endDetails %}
+
+## クロスオリジンアイソレーションの影響を分析する{：#analysis}
+
+クロスオリジンアイソレーションを有効にすることがサイトに与える影響を何も破損せずに評価できたら非常に便利だと思いませんか？[`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) および [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) ヘッダーを使用すると、それを実際に行うことができます。
+
+1. トップレベルドキュメントで[`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) を設定します。名前から分かるように、このヘッダーは、`COOP: same-origin` がサイトに与えると**思われる**影響に関するレポートのみを送信します。ポップアップウィンドウとの通信が無効化されることはありません。
+2. レポートを設定し、レポートを受信して保存するようにウェブサーバーを設定します。
+3. トップレベルのドキュメントで [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources) を設定します。ここでも、`COEP: require-corp` を有効化することのインパクトをサイトに影響を与えずに確認することができます。このヘッダーは、前のステップでセットアップした同じレポートサーバーにレポートを送信するように設定できます。
+
+{% Aside %} Chrome DevTools の**ネットワーク**パネルの[**ドメイン**列を有効化する](https://developer.chrome.com/docs/devtools/network/#information)ことにより、影響を受けると思われるリソースの全体像を確認することもできます。{% endAside %}
+
+{% Aside 'caution' %}
+
+クロスオリジンアイソレーションを有効にすると、明示的にオプトインしていないクロスオリジンリソースの読み込みがブロックされ、トップレベルのドキュメントがポップアップウィンドウと通信できなくなります。
+
+クロスオリジンアイソレーションではすべてのサブリソースを明示的にオプトインする必要があるため、`Cross-Origin-Resource-Policy` を大規模にデプロイする方法を模索してきました。そして、真逆の手段、つまり、すべてのクレデンシャルを削除することで、CORP ヘッダーなしでリソースをロードできる[新しい COEP の「クレデンシャルなし」モード](https://github.com/mikewest/credentiallessness/)を採用するというアイデアを思いつきました。どのように機能させるかについて、詳細は現在考えている最中ですが、サブリソースによって `Cross-Origin-Resource-Policy` ヘッダーが送信されることを確認する手間が軽減されることを願っています。
+
+また、`Cross-Origin-Opener-Policy: same-origin` ヘッダーにより、OAuth や支払いなどのクロスオリジンウィンドウのインタラクションを必要とする統合が断たれてしまうことが分かっています。この問題を緩和するために、[条件を緩和](https://github.com/whatwg/html/issues/6364)して、`Cross-Origin-Opener-Policy: same-origin-allow-popups` に対するクロスオリジンアイソレーションを有効にすることを検討しています。このようにして、自らを開くウィンドウとの通信が可能になります。
+
+クロスオリジンアイソレーションを有効にしたいが、これらの課題に先に進めない場合は、[オリジントライアルに登録](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)し、新しいモードが利用可能になるまでお待ちいただくことをお勧めします。新しいモードが利用可能になるまで、オリジントライアルを終了する予定はありません。
+
+{% endAside %}
+
+## クロスオリジンアイソレーションの影響を軽減する
+
+以下は、どのリソースがクロスオリジンアイソレーションの影響を受けるのかを判断した後に、そうしたクロスオリジンリソースを実際にオプトインする際のガイドラインです。
+
+1. 画像、スクリプト、スタイルシート、iframe などのクロスオリジンリソースに対して、[`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin) ヘッダーを設定します。同じサイトのリソースには、[`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin) ヘッダーを設定します。
+2. リソースが [CORS](/cross-origin-resource-sharing/) で提供される場合は、トップレベルドキュメントの HTML タグに `crossorigin` 属性を設定します (`<img src="example.jpg" crossorigin>` のようにする)。
+3. iframe にロードされたクロスオリジンリソースに iframe の別のレイヤーが含まれる場合は、このセクションで説明している手順を再帰的に適用してから続行してください。
+4. すべてのクロスオリジンリソースがオプトインされていることを確認したら、iframe にロードされたクロスオリジンリソースに対して `Cross-Origin-Embedder-Policy: require-corp` ヘッダーを設定します。
+5. `postMessage()` 経由の通信を必要とするクロスオリジンポップアップウィンドウがないことを確認してください。クロスオリジンアイソレーションが有効になっている状態でそれらを継続的に機能させることはできません。通信をクロスオリジンアイソレーションが有効な別のドキュメントに移動したり、別の通信方法 (HTTP リクエストなど) を使用したりできます。
+
+## クロスオリジンアイソレーションを有効にする
+
+以下は、クロスオリジンアイソレーションによる影響を軽減した後にクロスオリジンアイソレーションを有効にするためガイドラインです。
+
+1. トップレベルのドキュメントに `Cross-Origin-Opener-Policy: same-origin` ヘッダーを設定します。`Cross-Origin-Opener-Policy-Report-Only: same-origin` を設定している場合は、それを置き換えます。これにより、トップレベルのドキュメントとそのポップアップウィンドウとの通信がブロックされます。
+2. トップレベルのドキュメントに `Cross-Origin-Embedder-Policy: require-corp` ヘッダーを設定します。`Cross-Origin-Embedder-Policy-Report-Only: require-corp` を設定している場合は、それを置き換えます。これにより、オプトインされていないクロスオリジンリソースのロードがブロックされます。
+3. `self.crossOriginIsolated` が `true` を返すことを確認して、ページのクロスオリジンアイソレーションが有効であることを確認します。
+
+{% Aside 'gotchas' %}
+
+シンプルなサーバーはヘッダーの送信をサポートしていないため、ローカルサーバーでクロスオリジンアイソレーションを有効にするのは面倒な場合があります。コマンドラインフラグ `--enable-features=SharedArrayBuffer` を使って Chrome を起動すれば、クロスオリジンアイソレーションを有効にしなくても `SharedArrayBuffer` を有効にできます。[それぞれのプラットフォームでコマンドラインフラグを使って Chrome を起動する方法を見る。](https://www.chromium.org/developers/how-tos/run-chromium-with-flags)
+
+{% endAside %}
+
+## リソース
+
+- [COOP と COEP を使用してウェブサイトのクロスオリジンアイソレーションを有効化する](/coop-coep/)
+- [Android Chrome88 および DesktopChrome92 における SharedArrayBuffer の更新](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/ja/secure/cross-origin-resource-sharing/index.md b/src/site/content/ja/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..90b35e4f19a
--- /dev/null
+++ b/src/site/content/ja/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,158 @@
+---
+layout: post
+title: クロスオリジンリソースシェアリング（CORS）
+subhead: クロスオリジンリソースを安全に共有する
+authors:
+  - kosamari
+date: 2018-11-05
+description: |2-
+
+  ブラウザの same-origin ポリシーは、別のオリジンからのリソースの読み取りをブロックします。このメカニズムは、悪意のあるサイトが別のサイトを読み取るのを防ぎます。しかし、正当な使用までもが防がれてしまいます。
+  他の国から気象データを取得したい場合はどうすればいいでしょうか？CORSを有効にすると、サーバーはブラウザに別のオリジンの使用が許可されていると伝えることができます。
+tags:
+  - security
+---
+
+ブラウザの same-origin ポリシーは、別のオリジンからのリソースの読み取りをブロックします。このメカニズムは、悪意のあるサイトが別のサイトのデータを読み取るのを防ぎますが、正当な使用も防がれてしまいます。他の国から気象データを取得したい場合はどうすればいいでしょうか？
+
+最新のWebアプリケーションでは、アプリケーションが別のオリジンからリソースを取得したがることがよくあります。たとえば、別のドメインからJSONデータを取得したり、別のサイトの画像を`<canvas>`要素に読み込んだりすることが必要な場合があります。
+
+つまり、**誰もが読み取れるばずの公開リソース**までもが、same-origin ポリシーによってブロックされてしまうのです。[開発者はJSONP](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about)などの回避策を使用しましたが、**Cross-Origin Resource Sharing (クロスオリジンリソースシェアリング (CORS)) を使用すれば、**これを標準的な方法で修正できます。
+
+**CORS**を有効にすると、サーバーはブラウザに別のオリジンの使用が許可されていることを通知できます。
+
+## リソースリクエストはWeb上でどのように機能しますか？
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="request and response", width="668", height="327"%}<figcaption>図：図示されたクライアントリクエストとサーバーレスポンス</figcaption></figure>
+
+ブラウザとサーバーは、**Hypertext Transfer Protocol  (ハイパーテキスト転送プロトコル)** (HTTP) を使用することにより、ネットワーク経由でデータのやり取りを行えます。 HTTPは、リソースを取得するために必要な情報など、リクエスターとレスポンダー間の通信ルールを定義します。
+
+HTTPヘッダーは、クライアントとサーバーの間で行うメッセージ交換の種類をネゴシエートするために使用されるほか、アクセスを決定するためにも使用されます。ブラウザのリクエストとサーバーのレスポンスメッセージはどちらも、**ヘッダー**と**本文**の2つの部分に分けられます。
+
+### ヘッダー
+
+メッセージの種類やエンコーディングなど、メッセージに関する情報。ヘッダーには、キーと値のペアとして表される[さまざまな情報](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)を含めることができます。リクエストヘッダーとレスポンスヘッダーには異なる情報が含まれています。
+
+{% Aside %}ヘッダーにコメントを含めることはできないのでご注意ください。 {% endAside %}
+
+**リクエストヘッダーの例**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+上記は、「HTML を返してください。Cookieはこちらです」という内容のリクエストです。
+
+**レスポンスヘッダーの例**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+上記は、「データはgzipでエンコードされています。これをキャッシュしないでください」という内容のレスポンスです。
+
+### 本文
+
+これは、メッセージそのものです。プレーンテキスト、画像バイナリ、JSON、HTMLなどが該当します。
+
+## CORSはどのように機能しますか？
+
+same-originポリシーはクロスオリジンリクエストをブロックする指示をブラウザに出すということを覚えておきましょう。別のオリジンからパブリックリソースを取得する場合、リソースを提供するサーバーはブラウザに「リクエストの送信元であるこのオリジンは私のリソースにアクセスできます」と通知を出す必要があります。ブラウザはそれを記憶し、オリジン間でのリソースの共有を可能にします。
+
+### ステップ1：クライアント (ブラウザー) リクエスト
+
+ブラウザは、クロスオリジンリクエストを出す際に、現在のオリジン (スキーム、ホスト、ポート) 付きの `Origin` ヘッダーを追加します。
+
+### ステップ2：サーバーレスポンス
+
+サーバー側では、このヘッダーを見てアクセスを許可する場合、レスポンスに `Access-Control-Allow-Origin`を追加してリクエスト元を指定する必要があります (もしくは `*`を使用してあらゆるオリジンを許可します)。
+
+### ステップ3：ブラウザがレスポンスを受信する
+
+ブラウザは、レスポンスに適切な`Access-Control-Allow-Origin`ヘッダーが付けられているのを見ると、レスポンスデータがクライアントサイトと共有されることを許可します。
+
+## CORSの実例
+
+Expressを使用する小さなWebサーバーがあります。
+
+{% Glitch { id: 'cors-demo', path: 'server.js', height: 480 } %}
+
+最初のエンドポイント (8行目) にはレスポンスヘッダーが設定されておらず、レスポンスとしてファイルを送信します。
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- 次のコマンドを試してください。
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+次のようなエラーが表示されます。
+
+```bash
+request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource.
+```
+
+2番目のエンドポイント (13行目) は、応答として同じファイルを送信しますが、ヘッダーに`Access-Control-Allow-Origin: *`を追加します。コンソールから、以下のコードを試してみてください
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+今回は、リクエストがブロックされないはずです。
+
+## CORSとクレデンシャルを共有する
+
+プライバシー上の理由から、CORSは通常、「匿名リクエスト」(リクエストがリクエスターを識別しないリクエスト) に使用されます。CORS (送信者を識別できる) を使用するときにCookieを送信する場合は、リクエストとレスポンスにヘッダーを追加する必要があります。
+
+### リクエスト
+
+以下のように、`credentials: 'include'`をフェッチオプションに追加します。これにより、クッキーがリクエストに追加されます。
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### レスポンス
+
+`Access-Control-Allow-Origin`は特定のオリジンに設定する必要があり、(`*`を使ったワイルドカードはなし)。また `Access-Control-Allow-Credentials`は、を`true`に設定する必要があります。
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## 複雑なHTTP呼び出しのプリフライトリクエスト
+
+Webアプリで複雑なHTTPリクエストが必要な場合、ブラウザは**[プリフライトリクエスト](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)**をリクエストチェーンの先頭に追加します。
+
+CORS仕様では、**複雑なリクエスト**は以下のように定義されています。
+
+- GET、POST、またはHEAD以外のメソッドを使用するリクエスト
+- `Accept` 、 `Accept-Language`または`Content-Language`以外のヘッダーを含むリクエスト
+- `application/x-www-form-urlencoded` 、 `multipart/form-data` 、または`text/plain`以外の`Content-Type`ヘッダーを持つリクエスト
+
+ブラウザは、必要に応じてプリフライトリクエストを作成します。これは、以下のような`OPTIONS`リクエストであり、実際のリクエストメッセージの前に送信されます。
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+サーバー側では、アプリケーションは、アプリケーションがこのオリジンから受け入れるメソッドに関する情報をもってプリフライトリクエストに応答する必要があります。
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+サーバーのレスポンスには、`Access-Control-Max-Age`ヘッダーを含めて、プリフライトの結果をキャッシュする期間 (秒単位) を指定することもできるため、クライアントは複雑なリクエストを送信するたびにプリフライトリクエストを行う必要がありません。
diff --git a/src/site/content/ja/secure/fixing-mixed-content/index.md b/src/site/content/ja/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..c6b25e4808e
--- /dev/null
+++ b/src/site/content/ja/secure/fixing-mixed-content/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: 混在コンテンツの修正
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: ユーザーを保護し、すべてのコンテンツを確実に読み込めるよう、ウェブサイト上で発生する混在コンテンツのエラーを修正する方法について解説します。
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+ウェブサイトでHTTPSをサポートすることは、サイトとユーザーを攻撃から保護するための重要なステップですが、コンテンツが混在していると、その保護の効果が損なわれてしまいます。[What is mixed content? (混合コンテンツとは？)](/what-is-mixed-content)でも説明があるように、安全でない混在コンテンツはブラウザによってブロックされます。
+
+このガイドでは、混在コンテンツに関する既存の問題を修正し、新しい問題の発生を防ぐための手法とツールをご紹介します。
+
+## 自身のサイトにアクセスして混在コンテンツを見つける
+
+Google ChromeでHTTPSのページにアクセスすると、ブラウザは、混在コンテンツある場合、JavaScriptコンソール内でそれをエラーおよび警告として表示します。
+
+[What is mixed content? (混在コンテンツとは？)](/what-is-mixed-content)では、数多くの例に加え、Chrome DevToolsで問題が報告される仕組みを紹介しています。
+
+[パッシブ混在コンテンツ](https://passive-mixed-content.glitch.me/)の例では、次のような警告が表示されます。ブラウザは、`https` URLでコンテンツを見つけることができれば、それを自動的に更新してからメッセージを表示します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="混在コンテンツが検出、更新されたときに Chrom DevToolsで表示される警告", width="800", height="294" %}</figure>
+
+[アクティブな混在コンテンツ](https://active-mixed-content.glitch.me/)はブロックされ、以下のような警告が表示されます。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="アクティブな混在コンテンツがブロックされたときにChrome DevToolsに表示される警告", width="800", height="304" %}</figure>
+
+サイトの`http://` URLについて、こうした警告が見つかった場合は、サイトのソースで修正する必要があります。こうしたURLをそれぞれが見つかったページと一緒にリストアップしておけば、修正するときに便利です。
+
+{% Aside %}混在コンテンツのエラーと警告は、現在表示しているページに対してのみ表示され、新しいページに移動すると、毎回JavaScriptコンソールはクリアされます。つまり、こうしたエラーを見つけるには、サイトの各ページを表示する必要があります。{% endAside %}
+
+### サイト内の混在コンテンツを見つける
+
+混在コンテンツは、ソースコードの中で直接検索できます。ソースで`http://`を検索し、HTTP URL属性を含むタグを探します。アンカータグ (`<a>`)の`href`に`http://`があっても、それは混在コンテンツの問題ではない場合がしばしばあります。注目すべき例外がいくつかありますが、それらについては後ほど解説します。
+
+サイトがコンテンツ管理システムを使って公開されている場合は、ページが公開された時に安全でないURLへのリンクが挿入されている可能性があります。たとえば、画像に、相対パスではなく、完全なURLが含まれる場合などがあります。これは、CMSコンテンツ内で見つけて修正する必要があります。
+
+### 混在コンテンツの修正
+
+サイトのソースに混在コンテンツを見つけたら、次のステップで修正します。
+
+リソースリクエストがHTTPからHTTPSに自動的に更新されたというコンソールメッセージが表示された場合は、コード内のリソースの`http://`を安全に`https://`に変更できます。また、ブラウザのURLバーの`http://`を`https://`に変更し、そのURLをブラウザのタブで開けば、リソースが利用できるかどうかを安全に確認できます。
+
+リソースが`https://`経由で利用できない場合は、次のいずれかのオプションを検討することをおすすめします。
+
+- 別のホストのリソースを含める (利用可能な場合)。
+- コンテンツをダウンロードして、自分のサイトで直接ホスティングする (法的に許可されている場合)。
+- サイトからリソースを完全に除外する。
+
+問題を修正したら、最初にエラーを見つけたページを表示して、エラーが表示されなくなったことを確認します。
+
+### タグの非標準的な使い方に注意する
+
+サイトで非標準的な使われ方をしているタグに注意してください。たとえば、アンカー (`<a>`) タグのURLは、ブラウザを新しいページに移動させるものであるため、混在コンテンツのエラーにはなりません。つまり、通常なら、これを修正する必要はありません。ただし、一部の画像ギャラリースクリプトは、`<a>`タグの機能をオーバーライドし、`href`属性が指定するHTTPリソースをページのライトボックスのディスプレイに読み込んでしまうため、混在コンテンツの問題を引き起こします。
+
+## 混在コンテンツを広範に処理する
+
+小規模なウェブサイトであれば、こうした手動による手順でも事足りるでしょう。ただし、サイトが大規模なものであったり、多数の開発チームが関与するものであれば、そのサイトに読み込まれるすべてのコンテンツを追跡するのは困難になります。この場合、コンテンツセキュリティポリシーを使って、ブラウザに混在コンテンツについて通知するよう指示を出せば、安全でないリソースが予期せぬかたちでページに読み込まれることを確実に防げます。
+
+### コンテンツセキュリティポリシー
+
+[Content security policy (コンテンツセキュリティポリシー)](/csp/) (CSP) は、混在コンテンツを大規模に管理する際に便利な多目的ブラウザ機能です。CSPレポートメカニズムを使用すれば、サイトの混在コンテンツを追跡し、混在コンテンツを更新またはブロックすることで、ユーザーを保護するための実施ポリシーを提供できます。
+
+対象となるページでこうした機能を有効化するには、サーバーから送信されるレスポンスに`Content-Security-Policy`または`Content-Security-Policy-Report-Only`ヘッダーを含めます。さらに、ページの`<head>`セクションに`<meta>`タグを使えば、`Content-Security-Policy`を設定できます (`Content-Security-Policy-Report-Only`は**設定できません**)。
+
+{% Aside %}最新のブラウザでは、受信するすべてのコンテンツセキュリティポリシーが実施されます。ブラウザがレスポンスヘッダーまたは`<meta>`要素に受信する複数のCSPヘッダー値は結合され、単一のポリシーとして実施されます。報告ポリシーも同様に結合されます。ポリシーは、各ポリシーの共通部分を取り入れることによって結合されます。つまり、最初のポリシーに続く各ポリシーは、許可されるコンテンツの幅を広げるのではなく、どんどん制限していくということです。{% endAside %}
+
+### コンテンツセキュリティポリシーを使用して混在コンテンツを見つける
+
+コンテンツセキュリティポリシーを使用すれば、サイトで見つかった混在コンテンツのレポートを収集できます。この機能を有効にするには、 `Content-Security-Policy-Report-Only`ディレクティブをサイトのレスポンスヘッダーとして追加し、設定します。
+
+レスポンスヘッダー：
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %} [report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri)レスポンスヘッダーは近々非推奨となり、代わりに[report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to)が優先されます。`report-to`のブラウザサポートは現在、ChromeとEdgeに限定されています。両方のヘッダーを指定できますが、ブラウザが `report-to`をサポートしている場合、`report-to`サポートしている場合、`report-uri`は無視されます。{% endAside %}
+
+ユーザーがサイトのページにアクセスする際に、コンテンツセキュリティポリシーに違反するものがあれば、ブラウザはそれについてJSON形式のレポートを`https://example.com/reportingEndpoint`に送信します。この場合、サブリソースがHTTPを介して読み込まれるときは、毎回レポートが送信されます。このレポートには、ポリシー違反が発生したページのURLとポリシーに違反したサブリソースのURLが含まれます。こうしたレポートをログに記録するためのレポートエンドポイントを設定している場合は、自ら各ページにアクセスしなくても、サイトの混在コンテンツを追跡できます。
+
+注意点が2つあります。
+
+- ユーザーは、CSPヘッダーを理解できるブラウザーでページにアクセスする必要があります。最新のブラウザの多くについて言えることです。
+- レポートは、ユーザーがアクセスしたページの分しか取得できません。トラフィックの少ないページがある場合は、サイト全体のレポートを取得するまでに少し時間がかかるかもしれません。
+
+[Content security policy (コンテンツセキュリティポリシー)](/csp/) ガイドに詳しい情報とエンドポイントの例を記載しています。
+
+### CSPを使用したレポートの代替手段
+
+サイトがBloggerなどのプラットフォームでホストされている場合は、ヘッダーを変更したりCSPを追加したりするためのアクセス権を持っていない場合があります。代わりに、実行可能な代案として、[HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker)や[Mixed Content Scan](https://github.com/bramus/mixed-content-scan)といったウェブサイトクローラーを用いて、サイト全体で問題を探るということができます。
+
+### 安全でないリクエストの更新
+
+ブラウザは、安全でないリクエストを更新したり、ブロックしたりするようになりつつあります。CSPディレクティブを使用すれば、こうしたアセットを自動的に更新したり、ブロックしたりできます。
+
+[`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) CSPディレクティブを使用すると、ネットワーク要求を行う前に、安全でないURLを更新するという指示がブラウザに出されます。
+
+たとえば、ページに`<img src="http://example.com/image.jpg">`といったHTTP URLを持つ画像タグが含まれている場合。
+
+ブラウザは、代わりに、`https://example.com/image.jpg`に対する安全なリクエストを行うため、ユーザーは混在コンテンツから保護されます。
+
+この動作を有効にするには、次のディレクティブを指定した`Content-Security-Policy`を送信します。
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+もしくは、`<meta>`要素を使って、ドキュメントの`<head>`セクションの中に同じディレクティブを埋め込みます。
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+ブラウザによる自動更新と同様に、リソースがHTTPS経由で利用できない場合、更新されたリクエストは失敗となり、リソースも読み込まれません。こうして、ページのセキュリティは維持されます。`upgrade-insecure-requests`ディレクティブは、ブラウザが現在更新していない要求までも更新しようと試みるため、ブラウザによる自動更新以上の働きをしてくれます。
+
+`upgrade-insecure-requests`は、`<iframe>`ドキュメントにカスケードするため、ページ全体の安全が保証されます。
+
+### すべての混在コンテンツをブロックする
+
+ユーザーを保護するための代替の選択肢に、[`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking) CSPディレクティブがあります。このディレクティブは、ブラウザに混在コンテンツを決して読み込まないという指示を出します。アクティブとパッシブの両方を含めたすべての混在コンテンツに対するリソース要求がブロックされます。この選択肢も、`<iframe>`ドキュメントにカスケードしますので、ページには混在コンテンツが一切含まれないことが保証されます。
+
+次のディレクティブを指定して、`Content-Security-Policy`ヘッダーを送信すれば、ページは自らこの動作にオプトインできるようになります。
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+もしくは、`<meta>`要素を使って、同じディレクティブをドキュメントの`<head>`セクションに埋め込みます。
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %} `upgrade-insecure-requests`と`block-all-mixed-content`の両方を設定している場合は、まず最初に`upgrade-insecure-requests`が評価、使用されます。ブラウザは要求をブロックしません。したがい、どちらか一方だけを使用しましょう。{% endAside %}
diff --git a/src/site/content/ja/secure/index.md b/src/site/content/ja/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/ja/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/ja/secure/same-site-same-origin/index.md b/src/site/content/ja/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..5c48f2ca011
--- /dev/null
+++ b/src/site/content/ja/secure/same-site-same-origin/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: "「same-site」と「same-origin」を理解する"
+authors:
+  - agektmr
+date: 2020-04-15
+updated: 2020-06-10
+description: "「same-site」と「same-origin」は頻繁に引用されますが、誤解されることもよくあります。この記事は、それらが何であるか、そしてどのように違うかについて説明します。"
+tags:
+  - security
+---
+
+「same-site」と「same-origin」は頻繁に引用されますが、誤解されることもよくあります。例えば、ページ切り替えコンテキスト、 `fetch()`リクエスト、Cookies、開くポップアップ、埋め込みリソース、iframeで言及されています。
+
+## オリジン
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="Origin", width="680", height="100" %}
+
+「オリジン」は、[スキーム](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol)（[プロトコル](https://developer.mozilla.org/docs/Glossary/Protocol)とも呼ばれ、 [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP)や[HTTPSなど](https://developer.mozilla.org/docs/Glossary/HTTPS)）、[ホスト名](https://en.wikipedia.org/wiki/Hostname)、および[ポート](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port)（指定されている場合）の組み合わせです。たとえば、URLが`https://www.example.com:443/foo`場合、「origin」は`https://www.example.com:443`です。
+
+### 「same-origin」と「cross-origin」{: #same-origin-and-cross-origin}
+
+同じスキーム、ホスト名、ポートの組み合わせを持つWebサイトは、「同一オリジン」と見なされます。それ以外はすべて「オリジン間」と見なされます。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>オリジンA</th>
+        <th>オリジンB</th>
+        <th>オリジンAとオリジンBが「same-origin」か「cross-origin」かについての説明します。</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>https：// <strong>www.evil.com：443</strong>
+</td>
+        <td>cross-origin：異なるドメイン</td>
+      </tr>
+      <tr>
+        <td>https：// <strong>example.com：443</strong>
+</td>
+        <td>cross-origin：異なるサブドメイン</td>
+      </tr>
+      <tr>
+        <td>https：// <strong>login</strong> .example.com：443</td>
+        <td>cross-origin：異なるサブドメイン</td>
+      </tr>
+      <tr>
+        <td><strong>http://www.example.com:443</strong></td>
+        <td>cross-origin：異なるスキーム</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com：80</strong></td>
+        <td>cross-origin：異なるポート</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>same-origin：完全一致</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>same-origin：暗黙のポート番号（443）が一致する</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## サイト
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="Site", width="680", height="142" %}
+
+`.com`や`.org`などのトップレベルドメイン（TLD）は、[ルートゾーンデータベースに](https://www.iana.org/domains/root/db)リストされています。上記の例では、「サイト」はTLDとその直前のドメインの一部の組み合わせです。 `https://www.example.com:443/foo` / fooのURLが与えられた場合、「サイト」は`example.com`です。
+
+しかし、`.co.jp`や`.github.io`などのドメインの`.jp`または`.io` TLDを使用するだけでは、「サイト」を識別できるほど正確ではありません。また、特定のTLDの登録可能ドメインのレベルをアルゴリズム的に決定する方法はありません。そのため、「有効なTLD」（eTLD）のリストが作成されました。これらは、[Public Suffix List](https://wiki.mozilla.org/Public_Suffix_List)で定義されています。 eTLDのリストは、[publicsuffix.org/list](https://publicsuffix.org/list/)で管理されています。
+
+サイト名全体はeTLD + 1として知られています。たとえば、URLが`https://my-project.github.io`場合、eTLDは`.github.io`あり、eTLD + 1は`my-project.github.io`であり、これは「サイト」と見なされます。つまり、eTLD + 1は有効なTLDであり、その直前のドメインの一部です。
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### 「same-site」と「cross-site」{: #same-site-cross-site}
+
+同じeTLD + 1を持つWebサイトは、「same-site」と見なされます。異なるeTLD + 1を持つWebサイトは、「cross-site」です。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>オリジンA</th>
+        <th>オリジンB</th>
+        <th>オリジンAとオリジンBが「same-site」か「cross-site」かについての説明</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https：// <strong>www.evil.com：443</strong>
+</td>
+        <td>cross-site：異なるドメイン</td>
+      </tr>
+      <tr>
+        <td>https：// <strong>login</strong> .example.com：443</td>
+        <td><strong>same-site：異なるサブドメインは重要ではありません</strong></td>
+      </tr>
+      <tr>
+        <td><strong>http://www.example.com:443</strong></td>
+        <td><strong>same-site：異なるスキームは重要ではありません</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com：80</strong></td>
+        <td><strong>same-site：異なるポートは重要ではありません</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>same-site：完全に一致します</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>same-site：ポートは重要ではありません</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### 「スキームフル same-site」
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+「same-site」の定義は、HTTPが[脆弱なチャネル](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8)として使用されないように、 URL スキームをサイトの一部として考慮するように展開されています。ブラウザがこの解釈に移行すると、古い定義を指す場合は「スキームレス same-site」、より厳しい定義を指す場合は[「スキームフル same-site」](/schemeful-samesite/)という表記を目にすることがあります。その場合、スキームが一致しないため`http://www.example.com`と`https://www.example.com`はcross-siteと見なされます。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>オリジンA</th>
+        <th>オリジンB</th>
+        <th>オリジンAとオリジンBが「スキームフル same-site」であるかどうかの説明</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https：// <strong>www.evil.com：443</strong>
+</td>
+        <td>cross-site：異なるドメイン</td>
+      </tr>
+      <tr>
+        <td>https：// <strong>login</strong> .example.com：443</td>
+        <td><strong>スキームフル same-site：異なるサブドメインは重要ではありません</strong></td>
+      </tr>
+      <tr>
+        <td><strong>http://www.example.com:443</strong></td>
+        <td>cross-site：異なるスキーム</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com：80</strong></td>
+        <td><strong>スキームフル same-site：異なるポートは重要ではありません</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>スキームフル same-site：完全に一致します</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>スキームフル same-site：ポートは重要ではありません</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## リクエストが「same-site」、「same-origin」、「cross-site」のいずれであるかを確認する方法
+
+Chromeは`Sec-Fetch-Site`headerでリクエストを送信します。 2020年4月の時点から、 `Sec-Fetch-Site`をサポートするブラウザがありません。[これは、より大きなFetch Metadata RequestHeaders](https://www.w3.org/TR/fetch-metadata/)提案の一部です。headerには、次のいずれかの値が含まれます。
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+`Sec-Fetch-Site`の値を調べることで、リクエストが「same-site」、「same-origin」、「cross-site」のいずれであるかを判断できます（「schemeful-same-site」は `Sec-Fetch-Site` でキャプチャされません）。
diff --git a/src/site/content/ja/secure/what-is-mixed-content/index.md b/src/site/content/ja/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..b8806918c5a
--- /dev/null
+++ b/src/site/content/ja/secure/what-is-mixed-content/index.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: 混合コンテンツとは何ですか？
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: 混合コンテンツは、最初の HTML がセキュリティで保護されている HTTPS 接続を介して読み込まれていても、他のリソースがセキュリティで保護されていない HTTP 接続を介して読み込まれる場合に起こります。
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+**混合コンテンツ**は、最初の HTML がセキュリティで保護されている [HTTPS](/why-https-matters/) 接続を介して読み込まれていても、他のリソース（画像、動画、スタイルシート、スクリプトなど）がセキュリティで保護されていない HTTP 接続を介して読み込まれる場合に起こります。HTTP と HTTPS の両コンテンツが同じページに読み込まれて表示されており、最初のリクエストが HTTPS 経由でセキュリティで保護されていたため、混合コンテンツと呼ばれます。
+
+セキュリティで保護されていない HTTP プロトコルを使用してサブリソースをリクエストすると、ページ全体のセキュリティが弱まります。これらのリクエストは、攻撃者がネットワーク接続を盗聴し、2 者間の通信を閲覧または変更する、[**パス上攻撃**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1)に対して脆弱であるためです。攻撃者はこれらのリソースを使用して、ユーザーを追跡し、Web サイト上のコンテンツを置き換えることができます。そしてアクティブな混合コンテンツの場合であれば、セキュリティで保護されていないリソースだけでなく、ページを完全に制御できます。
+
+多くのブラウザはユーザーに混合コンテンツの警告を報告しますが、これが発生すれば手遅れです。セキュリティで保護されていないリクエストはすでに実行されており、ページのセキュリティが危険にさらされてしまっています。
+
+これが、ブラウザが混合コンテンツをますますブロックしている理由です。サイトに混合コンテンツが存在する場合は、それを修正することで、ブラウザがより厳密になってもコンテンツが引き続き読み込まれるようすることができます。
+
+## 2 種類の混合コンテンツ
+
+混合コンテンツには、アクティブとパッシブの 2 種類があります。
+
+**パッシブ混合コンテンツ**とは、ページの他の部分と対話しないコンテンツを指します。したがって、中間者攻撃は、そのコンテンツを傍受または変更した場合に実行できることに制限されます。パッシブ混合コンテンツは、画像、動画、およびオーディオコンテンツとして定義されます。
+
+**アクティブ混合コンテンツ**とは、ページ全体と対話し、攻撃者がページに対してほぼすべてのことを実行できるコンテンツを指します。アクティブ混合コンテンツには、スクリプト、スタイルシート、iframe、およびブラウザがダウンロードして実行できるその他のコードが含まれます。
+
+### パッシブ混合コンテンツ
+
+パッシブ混合コンテンツは問題が少ないと見なされていますが、それでもサイトとユーザーにセキュリティ上の脅威をもたらします。たとえば、攻撃者はサイト上の画像に対する HTTP リクエストを傍受し、これらの画像を交換または置換する可能性があります。攻撃者が*保存*ボタンと*削除*ボタンの画像を入れ替えれば、ユーザーが意図せずにコンテンツを削除する可能性があり、製品のダイアグラムをわいせつなコンテンツに置き換えれば、サイトの信用を傷つけてしまいます。または、商品の写真を他のサイトや商品の広告に置き換える可能性もあります。
+
+攻撃者がサイトのコンテンツを変更しなくても、攻撃者は混合コンテンツのリクエストを介してユーザーを追跡できます。攻撃者は、ブラウザが読み込む画像やその他のリソースに基づいて、ユーザーがどのページにアクセスし、どの製品を閲覧しているかを知ることができます。
+
+パッシブ混合コンテンツが存在する場合、ページ自体は HTTPS 経由で読み込まれた場合であっても、ほとんどのブラウザはページがセキュリティで保護されていないことを URL バーに示します。この動作は、パッシブ混合コンテンツの例を含むこちらの[デモ](https://passive-mixed-content.glitch.me/)で観察できます。
+
+最近まで、パッシブ混合コンテンツがすべてのブラウザに読み込まれていました。これらのコンテンツをブロックすると、多くの Web サイトが機能しなくなっていたでしょう。そのような状態は現在変化し始めており、サイト上の混合コンテンツのインスタンスを更新することが重要となっています。
+
+Chrome は現在、可能な限り、パッシブ混合コンテンツの自動アップグレードを[展開しています](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html)。自動アップグレードとは、アセットが HTTPS 経由で利用可能であっても HTTP としてハードコーディングされている場合、ブラウザは HTTPS バージョンを読み込むことを意味します。セキュリティで保護されたバージョンが見つからない場合、アセットは読み込まれません。
+
+混合コンテンツを検出するか、パッシブ混合コンテンツを自動アップグレードするたびに、Chrome は詳細メッセージを DevToolsの [**Issues**] タブに記録して、特定の問題を修正する方法を案内します。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="Chrome DevTools の [Issues] タブには、特定の混合コンテンツの問題とその修正方法に関する詳細情報が表示されます。", width="800", height="310" %}</figure>
+
+### アクティブな混合コンテンツ
+
+アクティブな混合コンテンツは、パッシブな混合コンテンツよりも大きな脅威をもたらします。攻撃者はアクティブなコンテンツを傍受して書き換えることができるため、ページ、さらには Web サイト全体までも、完全に制御できます。これにより、攻撃者は、まったく異なるコンテンツの表示、ユーザーパスワードやその他のログイン資格情報の盗用、ユーザーセッション cookie の盗用、別のサイトへのユーザーのリダイレクトなど、ページに関するあらゆる情報を変更できます。
+
+この脅威の深刻さにより、ほとんどのブラウザはユーザーを保護するためにこの種のコンテンツをデフォルトですでにブロックしていますが、機能はブラウザのベンダーとバージョンによって異なります。
+
+このもう 1 つの[デモ](https://active-mixed-content.glitch.me/)には、アクティブな混合コンテンツの例が含まれています。[例を HTTP 経由で読み込んで](http://active-mixed-content.glitch.me/)、 [HTTPS 経由で例を読み込む際にブロックされるコンテンツを確認します。ブロックされたコンテンツは、[**Issues**] タブでも詳しく説明されます。](https://active-mixed-content.glitch.me/)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="Chrome DevToolsの [Issues] タブには、特定の混合コンテンツの問題とその修正方法に関する詳細情報が表示されます。", width="800", height="361" %}</figure>
+
+{% Aside %} ブラウザは、DevTools でブロックされたコンテンツもハイライト表示します。ブロックされたコンテンツの問題については、Chromium ベースのブラウザの [**Issues**] タブで詳しく説明されます。Firefox と Safari はコンソールにメッセージを記録します。 {% endAside %}
+
+## 混合コンテンツ仕様
+
+ブラウザは、 [**オプションでブロック可能なコンテンツ**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content)と[**ブロック可能なコンテンツの**](https://w3c.github.io/webappsec-mixed-content/#category-blockable)[カテゴリを定義する混合コンテンツ仕様に](https://w3c.github.io/webappsec-mixed-content/)従っています。
+
+仕様から、リソースは「混合コンテンツとしての使用を許可するリスクが Web の大部分を破壊するリスクよりも重要である場合」、オプションでブロック可能なコンテンツとして適格です。これは、上記のパッシブ混合コンテンツカテゴリのサブセットです。
+
+**オプションでブロック可能**でないすべてのコンテンツは**ブロック可能**と見なされ、ブラウザでブロックする必要があります。
+
+{% Aside %}[混合コンテンツ仕様のレベル 2](https://w3c.github.io/webappsec-mixed-content/level2.html) が制作中であり、仕様への自動アップグレードが追加される予定です。 {% endAside %}
+
+近年、[HTTPS の使用は劇的に増加](https://transparencyreport.google.com/https/overview)し、Web の明確なデフォルトになっています。このため、ブラウザは、[混合コンテンツ仕様](https://w3c.github.io/webappsec/specs/mixedcontent/)で**オプションでブロック可能**として定義されているサブリソースタイプであっても、すべての混合コンテンツをブロックすることを検討できるようになりました。これが、Chrome がこれらのサブリソースに対してより厳格なアプローチを取っている理由です。
+
+### 古いブラウザ
+
+Web サイトへのすべての訪問者が最新のブラウザを使用しているわけではないことを覚えておくことが重要です。ブラウザベンダーとバージョンごとに、混合コンテンツの処理方法は異なります。最悪の場合、古いブラウザやバージョンでは混合コンテンツがまったくブロックされないため、ユーザーにとって非常に危険です。
+
+混合コンテンツの問題を修正すると、コンテンツが新しいブラウザに表示されるようになります。また、古いブラウザでブロックされていない危険なコンテンツからユーザーを保護するのにも役立ちます。
diff --git a/src/site/content/ja/secure/why-https-matters/index.md b/src/site/content/ja/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..517d2816d74
--- /dev/null
+++ b/src/site/content/ja/secure/why-https-matters/index.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: HTTPSが重要な理由
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: |2-
+
+  HTTPSはウェブサイトの整合性、プライバシー、セキュリティを保護するほか、新しくパワフルなウェブプラットフォーム API の必須要素です。
+tags:
+  - security
+---
+
+ウェブサイトは、機密性の高い通信データを処理しない場合でも、常にHTTPSを使って保護する必要があります。HTTPSは、ウェブサイトとユーザーの個人情報の両方に重大なセキュリティとデータの整合性を提供するだけでなく、多くの新しいブラウザー機能、特に[プログレッシブウェブプリ](/progressive-web-apps)で必須とされています。
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## 要約 {: #summary}
+
+- 侵入者は、悪意を持つ者も、そうでない者も、ウェブサイトとユーザーの間に存在するありとあらゆる無保護のリソースを悪用します。
+- 多くの侵入者は、集約されたユーザー動作を見てユーザーを特定します。
+- HTTPSは、ウェブサイトの誤用を防ぐだけでなく、多くの最先端機能やサービスワーカーといったアプリに似た機能を実現するテクノロジーの要件でもあります。
+
+## HTTPSはウェブサイトの整合性を保護する {: #integrity}
+
+HTTPSは、ウェブサイトとユーザーのブラウザ間で行われる通信データが侵入者によって改ざんされるのを防ぐのに役立ちます。侵入者には、意図的に悪意を持つ攻撃者や、ページに広告を挿入するISPやホテルといった、合法ではあるが迷惑な企業などが含まれます。
+
+侵入者は、保護されていない通信を悪用することにより、ユーザーをだまし、個人情報を提供させたり、マルウェアをインストールしたり、独自の広告をリソースに挿入したりします。たとえば、一部のサードパーティは、ユーザーエクスペリエンスを害しい、セキュリティの脆弱性を生み出す可能性のある広告をウェブサイトに挿入します。
+
+侵入者は、ウェブサイトとユーザーの間でやりとりされる無保護のリソースを悪用します。画像、Cookie、スクリプト、HTMLはすべて悪用可能です。侵入は、ユーザーのマシンやWi-Fiホットスポット、侵害されたISPなど、ネットワーク上のありとあらゆる場所で行われる可能性があります。
+
+## HTTPSはユーザーのプライバシーとセキュリティを保護する {: #privacy}
+
+HTTPSは、ウェブサイトとユーザーの間で行われる通信を侵入者によって受動的にリッスンされるのを防ぎます。
+
+HTTPSに関する一般的な誤解の1つに、HTTPSを必要とするウェブサイトは機密性の高い通信を処理するウェブサイトだけであるというものがあります。保護されていないHTTPリクエストは、ユーザーの行動やアイデンティティに関する情報を明らかにしてしまう可能性があります。保護されていないウェブサイトに1回アクセスするだけなら無害に思えるかもしれませんが、一部の侵入者は、ユーザーの総合的な閲覧履歴を見ることにより、そのユーザーの行動や意図を推測し、アイデンティティを[特定](https://en.wikipedia.org/wiki/De-anonymization)することがあります。たとえば、従業員は、無保護の医療記事を読むだけで、誤ってプライベートな健康状態を雇用主に開示してしまう可能性があります。
+
+## HTTPSがウェブの未来を握る {: #capabilities}
+
+`getUserMedia()`を使用した写真の撮影や音声の録音[、サービスワーカーを使った](/service-workers-cache-storage/)オフラインアプリエクスペリエンスの有効化、[プログレッシブウェブアプリ](/progressive-web-apps)の構築など、パワフルで新しいウェブプラットフォーム機能を実行するには、ユーザーからの明示的な許可が必要です。 [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation)など、多くの古いAPIも実行するには許可が必要となるかたちで更新されつつあります。HTTPSは、こうした新機能と最新のAPIの両方において、権限ワークフローの重要なコンポーネントとして機能します。
diff --git a/src/site/content/ja/vitals/index.md b/src/site/content/ja/vitals/index.md
new file mode 100644
index 00000000000..e3fa6958e98
--- /dev/null
+++ b/src/site/content/ja/vitals/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: Web Vitals
+description: サイトの健全性を判断するための重要な指標
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+ユーザー エクスペリエンス品質の最適化は、Web 上に存在するあらゆるサイトに適用可能な、長期的な成功を目指す上での秘訣であると言えます。Web Vitals は、ビジネス オーナー、マーケティング担当者、開発者などによる自身が運営するサイトのユーザー体験の数値化や、改善可能なポイントの特定をサポートします。
+
+## 概要
+
+Web Vitals は、Web 上での優れたユーザー エクスペリエンスの提供に欠かすことのできない品質シグナルに関する統一的なガイダンスの提供を目的とした、Google によるイニシアチブです。
+
+Google ではパフォーマンスの測定およびレポートに関し、長年にわたり数多くのツールを提供してきました。一部の開発者たちはすでにこれらのツールの使用に精通しているものの、その他のユーザーにとっては、こういった豊富に存在するツールや指標に関する学習を進めていくことは難しく感じられてしまうようです。
+
+ユーザーに提供されているエクスペリエンス品質を理解するために、サイトの所有者がサイト パフォーマンスの達人となる必要はありません。Web Vitals イニシアチブは必要な観点をシンプルに整理し、最も重要な指標である **Core Web Vitals** へと注力できるようにすることを目標としています。
+
+## Core Web Vitals
+
+Core Web Vitals とは、すべての Web ページに適用可能な Web Vitals のサブセットのことを指します。すべてのサイト所有者にとって測定する価値のあるもので、Google が提供するあらゆるツールで採用されています。Core Web Vitals に含まれている各指標は、ユーザー エクスペリエンスに関する特徴的な観点を提供し、[フィールド データ](/user-centric-performance-metrics/#how-metrics-are-measured)の測定が可能であり、[ユーザーを中心とした](/user-centric-performance-metrics/#how-metrics-are-measured)重要な結果に基づく実際のユーザー体験を反映します。
+
+Core Web Vitals を構成する指標は、時間の経過とともに[進化](#evolving-web-vitals)しています。2020 年現在のセットでは、ユーザー エクスペリエンスが持つ 3 つの観点 (*読み込み時間*、*インタラクティブ性*、*視覚的な安定性*) に焦点が当てられており、以下の指標 (および各指標のしきい値) が含まれています。
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Largest Contentful Paint のしきい値に関する推奨事項", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="First Input Delay のしきい値に関する推奨事項", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Cumulative Layout Shift のしきい値に関する推奨事項", width="400", height="350" %}</div>
+
+- **[Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP)](/lcp/)**: *読み込み*のパフォーマンスを測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの読み込みが開始されてからの LCP を **2.5 秒**以内にする必要があります。
+- **[First Input Delay (初回入力までの遅延時間、FID)](/fid/)**: *インタラクティブ性*を測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの FID を **100 ミリ秒**以下にする必要があります。
+- **[Cumulative Layout Shift (累積レイアウト シフト数、CLS)](/cls/)**: *視覚的な安定性*を測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの CLS を **0.1** 以下に維持する必要があります。
+
+上記の各指標について、ほぼすべてのユーザーにとって好ましい推奨目標値を確実に達成するために、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の **75 パーセンタイル**をしきい値として設定しています。
+
+Core Web Vitals への準拠を評価するツールは、上記 3 つの指標すべてにおいて 75 パーセンタイルという推奨目標値を達成している場合に、そのページを合格として判定するように設定されています。
+
+{% Aside %}これらの推奨事項の根拠となる調査および方法論に関する詳細については、「[Core Web Vitals の指標のしきい値の定義](/defining-core-web-vitals-thresholds/)」を参照してください。{% endAside %}
+
+### Core Web Vitals の測定およびレポートを実施するためのツール
+
+Google では、Core Web Vitals をあらゆる Web エクスペリエンスにおける重要な指標として捉えています。その結果として、[人気のあるすべての Google 製ツール](/vitals-tools/)でのこれらの指標の採用に取り組んでいます。このセクションでは、Core Web Vitals をサポートするツールについて詳しく説明していきます。
+
+#### Core Web Vitals のフィールド測定を実施するためのツール
+
+[Chrome User Experience Report](https://developer.chrome.com/docs/crux/) は、非特定化された実際のユーザーによる測定データを Core Web Vitals の各指標ごとに収集するツールです。このデータを活用すれば、サイト所有者はページに手動でアナリティクス ツールを設置しなくてもパフォーマンスをすばやく評価できるようになり、[PageSpeed Insights](https://pagespeed.web.dev/) や Search Console の [Core Web Vitals Report](https://support.google.com/webmasters/answer/9205520)などのツールを強化することもできるようになります。
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Chrome User Experience Report</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">Search Console (Core Web Vitals Report)</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %}これらのツールの使用方法や、ユース ケースごとに最適なツールの選別に関するガイダンスについては、「[Web Vitals の測定の概要](/vitals-measurement-getting-started/)」を参照してください。{% endAside %}
+
+Chrome User Experience Report が提供するデータの活用によってサイトのパフォーマンスをすばやく評価できるようにはなりますが、正確な診断、監視、パフォーマンスの低下に対する迅速な対応などを実施するために必要となる可能性がある詳細なページビュー単位のテレメトリは提供されません。そのため、サイトには実際にユーザーを監視する仕組みを独自に設定しておくことを強くお勧めします。
+
+#### JavaScript で Core Web Vitals を測定する
+
+Core Web Vitals の各指標は、標準の Web API を使用して JavaScript で測定することができます。
+
+Core Web Vitals の各指標をすべて測定するためには、[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript ライブラリを使用するのが最も簡単です。このライブラリは、前述したすべての Google 製ツールでレポートされている方法に完全に一致する方法で各指標を測定することができる、基本的な Web API を集めた小さなラッパーです。
+
+[Web-vitals](https://github.com/GoogleChrome/web-vitals) ライブラリを使用することにより、各指標の測定は単一の関数の呼び出しと同じくらい簡単になります (詳細な[使用方法](https://github.com/GoogleChrome/web-vitals#usage)および [API](https://github.com/GoogleChrome/web-vitals#api) に関する詳細については、ドキュメントを参照してください)。
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // 利用が可能な場合には `navigator.sendBeacon()` を使用し、`fetch()` にフォールバックします。
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+[Web-Vitals](https://github.com/GoogleChrome/web-vitals) ライブラリを使用して Core Web Vitals データを測定し、アナリティクス エンドポイントへと送信するようサイトを構成したら、次のステップはそのデータの集計およびレポートを実施し、推奨しきい値 (ページ別訪問数の少なくとも 75%) を満たしているかどうかを確認することです。
+
+一部のアナリティクス プロバイダーには Core Web Vitals の各指標のサポートが最初から組み込まれていますが、そうではない場合であっても、Core Web Vitals を各ツール上で測定可能にするための基本的なカスタム指標機能が備わっているはずです。
+
+その一例として、サイトの所有者が Google Analytics を使用して Core Web Vitals を測定することができる [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) が挙げられます。その他のアナリティクス ツールを使用して Core Web Vitals を測定する場合のガイダンスについては、「[Web Vitals をフィールド測定するためのベスト プラクティス](/vitals-field-measurement-best-practices/)」を参照してください。
+
+また、[Web Vitals Chrome 拡張機能](https://github.com/GoogleChrome/web-vitals-extension)を使用すれば、コードを記述しなくても Core Web Vitals の各指標をレポートすることができるようになります。この拡張機能は各指標の測定に [web-vitals](https://github.com/GoogleChrome/web-vitals) ライブラリを使用し、Web を閲覧する際にそれらをユーザーに表示します。
+
+この拡張機能は、自身が運営するサイトや競合他社のサイト、そして Web 全体のパフォーマンスを把握する場合に役立ちます。
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Web Vitals 拡張機能</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+開発者の方でこれらの指標を基本的な Web API を使用して直接測定したいという場合には、以下のガイドから詳細な実装手順をご確認いただけます。
+
+- [JavaScript を使用して LCP を測定する](/lcp/#measure-lcp-in-javascript)
+- [JavaScript を使用して FID を測定する](/fid/#measure-fid-in-javascript)
+- [JavaScript を使用して CLS を測定する](/cls/#measure-cls-in-javascript)
+
+{% Aside %}一般的なアナリティクス サービス (または独自の社内アナリティクス ツール) を使用してこれらの指標を測定する方法に関する詳細なガイダンスについては、「<a>Web Vitals をフィールド測定するためのベスト プラクティス</a>」を参照してください。{% endAside %}
+
+#### Core Web Vitals のラボ測定を実施するためのツール
+
+Core Web Vitals に関してはフィールド データの測定が何よりも優先されますが、その多くはラボ データの場合でも測定が可能です。
+
+ラボ データの測定は、まだユーザー対して公開されていない開発段階の機能のパフォーマンスをテストする場合に最適な方法です。また、パフォーマンスの低下を事前に察知したい場合にも最適です。
+
+ラボ環境で Core Web Vitals を測定する場合には、以下のツールが使用可能です。
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">Chrome DevTools</a></td>
+        <td>✔</td>
+        <td>✘ (代わりに <a href="/tbt/">TBT</a> を使用してください)</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>
+        <td>✔</td>
+        <td>✘ (代わりに <a href="/tbt/">TBT</a> を使用してください)</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}Lighthouse のようなユーザーが存在しないシミュレーション環境でページの読み込みを行うツールでは、FID を測定することができません (FID の測定にはユーザーによる入力が必要です)。ただし、Total Blocking Time (合計ブロック時間、TBT) 指標はラボ環境でも測定可能であり、FID の優れた代替指標となります。ラボ環境での TBT の改善に伴うパフォーマンスの最適化がなされることにより、実際のユーザー環境での FID も改善されるはずです (後述するパフォーマンスに関する推奨事項を参照してください)。{% endAside %}
+
+ラボ環境での測定は優れたユーザー体験を提供する上で不可欠な要素ではありますが、実際のユーザー環境での測定に取って代わるものではありません。
+
+サイトのパフォーマンスは、ユーザーが使用するデバイスの性能やネットワークの状態、ユーザーのデバイス上での別プロセスの実行状況、そしてユーザーによるページの操作方法に応じて大きく変化します。実際に Core Web Vitals の各指標のスコアは、ユーザーの操作に影響を受けます。正確な全体像を把握することができるのは、実際のユーザー環境での測定のみです。
+
+### スコアを改善するための推奨事項
+
+Core Web Vitals の測定によって改善点を見つけたら、次のステップは最適化です。以下のガイドでは、ページを最適化するために必要となる具体的な推奨事項を、Core Web Vitals の各指標ごとに紹介しています。
+
+- [LCP を最適化する](/optimize-lcp/)
+- [FID を最適化する](/optimize-fid/)
+- [CLS を最適化する](/optimize-cls/)
+
+## Other Web Vitals
+
+Core Web Vitals は優れたユーザー エクスペリエンスについての理解を深め、それらをユーザーに対して提供する際に重要な意味を持つ指標ですが、重要な指標はこれ以外にも存在します。
+
+そういった Web Vitals のその他の指標は、多くの場合 Core Web Vitals の代替指標または補足指標として機能し、ユーザー体験をより大きな観点から把握したり、特定の問題を診断したりする場合に役立ちます。
+
+たとえば [Time to First Byte (サーバーの初期応答時間、TTFB)](/ttfb/) や [First Contentful Paint (視覚コンテンツの初期表示時間、FCP)](/fcp/) などの指標は、どちらも*読み込み*時のユーザー体験に関連する重要な観点であり、それぞれが LCP に関する問題 ([サーバーの応答時間](/overloaded-server/)が長すぎる場合や、[レンダリングを妨げるリソース](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)に関連する問題など) の診断に役立ちます。
+
+同様に、[Total Blocking Time (合計ブロック時間、TBT)](/tbt/) や [Time to Interactive (操作可能になるまでの時間、TTI)](/tti/) などの指標は、FID に影響を及ぼす潜在的な*インタラクティブ性*に関する問題を察知して診断を実施するために不可欠な、ラボ環境での指標です。これらの指標は実際のユーザー環境では測定できず、また[ユーザーを中心とした](/user-centric-performance-metrics/#how-metrics-are-measured)結果も反映していないため、Core Web Vitals には含まれません。
+
+## Evolving Web Vitals
+
+Web Vitals および Core Web Vitals は、Web 上でのユーザー エクスペリエンス品質の測定に関して現在利用可能な最高品質のシグナルを開発者に提供していますが、これらのシグナルも完璧なものではなく、将来的な改善や機能追加が期待されています。
+
+**Core Web Vitals** はあらゆる Web ページに関連し、関連する Google 製ツールにも広く採用されているため、これらの指標に対する変更の実施は広範囲に影響を及ぼします。そのため、開発者の方々は Core Web Vitals の定義およびしきい値が安定していること、そして更新に関する情報が事前に通知され、かつ更新が予測可能な 1 年周期で実施されることを期待しているものと思われます。
+
+Web Vitals のその他の指標はコンテキストやツールに特有のものが多く、Core Web Vitals よりも実験的なものとなる場合があります。そのため、それらの指標の定義およびしきい値は、より頻繁に変更される可能性があります。
+
+Web Vitals に含まれるすべての指標に対して実施された変更の内容については、公開されている [CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog) にて詳細にドキュメント化されます。
diff --git a/src/site/content/ko/404.md b/src/site/content/ko/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/ko/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/ko/accessible/color-and-contrast-accessibility/index.md b/src/site/content/ko/accessible/color-and-contrast-accessibility/index.md
new file mode 100644
index 00000000000..571a52ce88b
--- /dev/null
+++ b/src/site/content/ko/accessible/color-and-contrast-accessibility/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: 색상 및 대비 접근성
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-03-31
+description: |2
+
+  시력이 좋은 경우 모든 사람이 동일한 방식으로 색상 또는 텍스트 가독성을 인식한다고 가정하기 쉽지만 물론 그렇지 않습니다.
+tags:
+  - accessibility
+---
+
+시력이 좋은 경우 모든 사람이 동일한 방식으로 색상 또는 텍스트 가독성을 인식한다고 가정하기 쉽지만 물론 그렇지 않습니다.
+
+여러분들 생각대로 어떤 사람들에게는 읽기 쉬운 색상 조합이 다른 사람들에게는 어렵거나 불가능합니다. 이것은 일반적으로 전경색과 배경색의 휘도 사이의 관계인 색상 대비로 귀결됩니다. 색상이 비슷하면 명암비가 낮습니다. 색상이 서로 다를 때 명암비가 높습니다.
+
+[WebAIM 지침](https://webaim.org/standards/wcag/)은 모든 텍스트에 대해 4.5:1의 AA(최소) 명암비를 권장합니다. 비율이 3:1로 낮아질 수 있는 경우인 매우 큰 텍스트(기본 본문 텍스트보다 120-150% 더 큼)는 예외입니다. 아래 표시된 명암비의 차이를 확인하십시오.
+
+<figure>{% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="다른 명암비를 보여주는 이미지", width="800", height="328" %}</figure>
+
+4.5:1의 명암비는 약 20/40 시력에 해당하는 시력 손실을 가진 사용자가 일반적으로 경험하는 대비 감도 손실을 보상하기 때문에 레벨 AA에 대해 선택되었습니다. 일반적으로 20/40은 약 80세의 사람들의 전형적인 시력으로 보고됩니다. 저시력 장애 또는 색약이 있는 사용자의 경우 본문 텍스트의 대비를 최대 7:1까지 높일 수 있습니다.
+
+Lighthouse의 접근성 감사를 사용하여 색상 대비를 확인할 수 있습니다. DevTools를 열고 감사를 클릭한 다음 접근성을 선택하여 보고서를 실행합니다.
+
+<figure>{% Img src="image/admin/vSFzNOurQO6z2xV6qWuW.png", alt="색상 대비 감사 출력 스크린샷", width="800", height="218" %}</figure>
+
+Chrome에는 [페이지의 모든 저대비 텍스트](https://developers.google.com/web/updates/2020/10/devtools#css-overview)를 감지하는 데 도움이 되는 실험 기능도 포함되어 있습니다. [접근 가능한 색상 제안](https://developers.google.com/web/updates/2020/08/devtools#accessible-color)을 사용하여 대비가 낮은 텍스트를 수정할 수도 있습니다.
+
+<figure>{% Img src="image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt="Chrome 저대비 텍스트 실험 기능의 출력 스크린샷.", width="800", height="521" %}</figure>
+
+보다 완전한 보고서를 보려면 [접근성 인사이트 확장](https://accessibilityinsights.io/)을 설치하십시오. Fastpass 보고서에서 확인하는 것 중 하나는 색상 대비입니다. 실패한 요소에 대한 자세한 보고서를 받게 됩니다.
+
+<figure>{% Img src="image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt="접근성 통계 보고서", width="800", height="473" %}</figure>
+
+## 고급 지각 대비 알고리즘(APCA)
+
+[APCA(Advanced Perceptual Contrast Algorithm)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html)는 색상 인식에 대한 현대적 연구를 기반으로 하여 대비를 계산하는 새로운 방법입니다.
+
+[AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) 가이드라인과 비교하여 APCA는 컨텍스트 종속적입니다.
+
+대비는 다음 기능을 기반으로 계산됩니다.
+
+- 공간 속성(글꼴 두께 및 텍스트 크기)
+- 텍스트 색상(텍스트와 배경의 인지된 밝기 차이)
+- 컨텍스트(주변 조명, 환경 및 텍스트의 의도된 목적)
+
+Chrome에는 [AA/AAA 명암비 지침을 APCA로 대체하는 실험적 기능](https://developers.google.com/web/updates/2021/01/devtools#apca)이 포함되어 있습니다.
+
+<figure>{% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="Chrome의 APCA 기능 출력 스크린샷", width="800", height="543" %}</figure>
+
+## 색상만으로 정보를 전달하지 마십시오
+
+전 세계적으로 약 3억 2천만 명에게 색각 이상이 있습니다. 남성 12명 중 1명, 여성 200명 중 1명이 일종의 "색맹"을 가지고 있습니다. 이는 사용자의 약 1/20 또는 5%가 의도한 대로 사이트를 경험하지 못할 것임을 의미합니다. 정보를 전달하기 위해 색상에 의존할 때 우리는 그 수치를 허용할 수 없는 수준으로 끌어 올립니다.
+
+{% Aside %} 참고: "색맹"이라는 용어는 종종 사람이 색을 구별하는 데 문제가 있는 시각 상태를 설명하는 데 사용되지만 실제로는 극소수의 사람들이 진정한 색맹입니다. 색 결핍이 있는 대부분의 사람들은 일부 또는 대부분의 색을 볼 수 있지만 빨간색과 녹색(가장 일반적임), 갈색과 주황색, 파란색과 보라색과 같은 특정 색을 구별하는 데 어려움을 겪습니다. {% endAside %}
+
+예를 들어, 입력 양식에서 전화 번호가 잘못되었음을 나타내기 위해 빨간색 밑줄이 그어질 수 있습니다. 그러나 색상이 부족하거나 화면 판독기 사용자에게는 해당 정보가 제대로 전달되지 않습니다. 따라서 사용자가 중요한 정보에 액세스할 수 있는 여러 경로를 항상 제공해야 합니다.
+
+<figure style="width: 200px">{% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="잘못된 전화번호가 빨간색으로만 강조 표시된 입력 양식의 이미지입니다.", width="293", height="323" %}</figure>
+
+[WebAIM 체크리스트는 섹션 1.4.1](https://webaim.org/standards/wcag/checklist#sc1.4.1) 에 "색상이 콘텐츠를 전달하거나 시각적 요소를 구별하는 유일한 방법으로 사용되어서는 안 된다"고 명시되어 있습니다. 또한 특정 대비 요구 사항을 충족하지 않는 한 "주변 텍스트와 링크를 구별하기 위해 색상만 사용해서는 안 된다"고 언급합니다. 대신 체크리스트는 링크가 활성화된 시기를 나타내기 위해 밑줄과 같은 추가 표시기를(CSS `text-decoration` 속성 사용을 사용하여) 추가할 것을 권장합니다.
+
+이전 예제를 수정하는 쉬운 방법은 필드에 추가 메시지를 추가하여 유효하지 않으며 그 이유를 알리는 것입니다.
+
+<figure style="width: 200px">{% Img src="image/admin/FLQPcG16akNRoElx3pnz.png", alt="지난 예에서와 동일한 입력 양식입니다. 이번에는 필드 문제를 나타내는 텍스트 레이블이 있습니다.", width="292", height="343" %}</figure>
+
+앱을 빌드할 때 이러한 종류의 사항을 염두에 두고 중요한 정보를 전달하기 위해 색상에 너무 많이 의존할 수 있는 영역에 주의하십시오.
+
+사이트가 다른 사람들에게 어떻게 보이는지 궁금하거나 UI의 색상 사용에 크게 의존하는 경우 DevTools를 사용하여 다양한 유형의 색맹을 비롯한 다양한 형태의 시각 장애를 시뮬레이션할 수 있습니다. Chrome에는 [시각 장애 에뮬레이션 기능](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies)이 포함되어 있습니다. 액세스하려면 DevTools를 연 다음 Drawer에서 **Rendering** 탭을 열면 다음과 같은 색약을 에뮬레이션할 수 있습니다.
+
+- Protanopia: 붉은 빛을 감지할 수 없음.
+- Deuteranopia: 녹색 빛을 감지할 수 없습니다.
+- Tritanopia: 청색광을 감지할 수 없음.
+- Achromatopsia: 회색 음영을 제외한 모든 색상을 인식할 수 없음(매우 드물게).
+
+<figure>{% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="색맹이 있는 사람의 시력을 모방하면 페이지가 회색조로 표시됩니다.", width="800", width="800", height="393" %}</figure>
+
+## 고대비 모드
+
+고대비 모드를 사용하면 사용자가 전경색과 배경색을 반전할 수 있으며, 이는 종종 텍스트를 더 잘 돋보이게 하는 데 도움이 됩니다. 시각 장애가 있는 사용자의 경우 고대비 모드를 사용하면 페이지의 콘텐츠를 훨씬 쉽게 탐색할 수 있습니다. 컴퓨터에서 고대비 설정을 얻는 몇 가지 방법이 있습니다.
+
+Mac OSX 및 Windows와 같은 운영 체제는 시스템 수준에서 모든 항목에 대해 활성화할 수 있는 고대비 모드를 제공합니다.
+
+고대비 설정을 켜고 애플리케이션의 모든 UI가 여전히 표시되고 사용 가능한지 확인하는 것도 유용합니다.
+
+예를 들어 탐색 모음은 현재 선택된 페이지를 나타내기 위해 미묘한 배경색을 사용할 수 있습니다. 고대비 확장 프로그램으로 보면 그 미묘함이 완전히 사라지고 어떤 페이지가 활성화되어 있는지 독자가 이해하게 됩니다.
+
+<figure style="width: 500px">{% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="활성 탭을 읽기 어려운 고대비 모드의 탐색 모음 스크린샷", width="640", height="57" %}</figure>
+
+마찬가지로 이전 단원의 예를 고려하면 잘못된 전화 번호 필드의 빨간색 밑줄이 구별하기 어려운 청록색으로 표시될 수 있습니다.
+
+<figure>{% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="이번에는 고대비 모드에서 사용되는 이전 주소 형식의 스크린샷입니다. 잘못된 요소의 색상 변경을 읽기 어렵습니다.", width="700", height="328" %}</figure>
+
+앞서 다룬 명암비를 충족한다면 고대비 모드를 지원하는 데 문제가 없을 것입니다. 그러나 확실히 하기 위해 [고대비 Chrome 확장 프로그램을](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph) 설치하고 모든 것이 예상대로 작동하고 보이는지 확인하기 위해 페이지를 한 번 더 확인하는 것이 좋습니다.
diff --git a/src/site/content/ko/accessible/control-focus-with-tabindex/index.md b/src/site/content/ko/accessible/control-focus-with-tabindex/index.md
new file mode 100644
index 00000000000..9af89f90990
--- /dev/null
+++ b/src/site/content/ko/accessible/control-focus-with-tabindex/index.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: tabindex로 포커스 제어
+authors:
+  - robdodson
+date: 2018-11-18
+description: "<button> 또는 <input>과 같은 표준 HTML 요소에는 무료로 내장된 키보드 접근성이 있습니다. 맞춤형 상호작용 구성 요소를 구축하는 경우 tabindex를 사용하여 키보드에 액세스할 수 있는지 확인합니다."
+---
+
+`<button>` 또는 `<input>` 과 같은 표준 HTML 요소에는 무료로 내장된 키보드 접근성이 있습니다. 그러나 *맞춤형* 상호작용 구성 요소를 구축하는 경우 `tabindex` 속성을 사용하여 키보드에 액세스할 수 있는지 확인합니다.
+
+{% Aside %} 가능하면 사용자 정의 버전을 구축하는 대신 내장 HTML 요소를 사용하세요. 예들 들어, `<button>`은 스타일 지정이 매우 쉽고 이미 완전한 키보드 지원을 제공합니다. `tabindex`를 관리하거나 ARIA로 의미 체계를 추가할 필요가 없습니다. {% endAside %}
+
+## 컨트롤이 키보드에 액세스할 수 있는지 확인
+
+Lighthouse와 같은 도구는 특정 접근성 문제를 감지하는 데 탁월하지만 일부 항목은 사람만 테스트할 수 있습니다.
+
+`Tab` 키를 눌러 사이트를 탐색해 보세요. 페이지의 모든 상호작용 컨트롤에 접근할 수 있나요? 그렇지 않은 경우 [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex)를 사용하여 해당 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
+
+{% Aside 'warning' %} 포커스 표시기가 전혀 표시되지 않으면 CSS에 의해 숨겨져 있을 수 있습니다. 언급된 `:focus { outline: none; }` 스타일이 있는지 확인하세요. [스타일 지정](/style-focus)에 대한 가이드에서 이 문제를 해결하는 방법을 배울 수 있습니다. {% endAside %}
+
+## 탭 순서에 요소 삽입
+
+`tabindex="0"`을 사용하여 자연스러운 탭 순서로 요소를 삽입하세요. 예를 들면 다음과 같습니다.
+
+```html
+<div tabindex="0">Focus me with the TAB key</div>
+```
+
+요소에 초점을 맞추려면 `Tab` 키를 누르거나 요소의 `focus()` 메서드를 호출합니다.
+
+{% Glitch { id: 'tabindex-zero', path: 'index.html', height: 346 } %}
+
+## 탭 순서에서 요소 제거
+
+`tabindex="-1"`을 사용하여 요소를 제거합니다. 예를 들면 다음과 같습니다.
+
+```html
+<button tabindex="-1">Can't reach me with the TAB key!</button>
+```
+
+이렇게 하면 자연스러운 탭 순서에서 요소가 제거되지만 `focus()` 메서드를 호출하여 요소에 계속 초점을 맞출 수 있습니다.
+
+{% Glitch { id: 'tabindex-negative-one', path: 'index.html', height: 346 } %}
+
+`tabindex="-1"`을 요소에 적용해도 하위 요소에는 영향을 미치지 않습니다. 자연스럽게 탭 순서에 있거나 `tabindex` 값으로 인해 탭 순서대로 유지됩니다. 탭 순서에서 요소와 모든 하위 요소를 제거하려면 [WICG의 `inert` polyfill](https://github.com/WICG/inert) 사용을 고려하세요. polyfill은 제안된 `inert` 속성의 동작을 모방하여 요소가 보조 기술에 의해 선택되거나 읽히는 것을 방지합니다.
+
+{% Aside 'caution' %} `inert` polyfill은 시험적이며 모든 경우에 예상대로 작동하지 않을 수 있습니다. 프로덕션 환경에서 사용하기 전에 신중하게 테스트하세요. {% endAside %}
+
+## `tabindex > 0` 방지
+
+0보다 큰 모든 `tabindex`는 요소를 자연스러운 탭 순서의 맨 앞으로 옮깁니다. `tabindex`가 0보다 큰 요소가 여러 개 있는 경우 탭 순서는 0보다 큰 가장 낮은 값부터 시작하여 위로 올라갑니다.
+
+0보다 큰 `tabindex`를 사용하면 화면 판독기가 탭 순서가 아니라 DOM 순서로 페이지를 탐색하기 때문에 **안티 패턴**으로 간주됩니다. 한 요소의 탭 순서가 더 빨라야 하는 경우 DOM의 이전 위치로 이동해야 합니다.
+
+`tabindex` &gt; 0인 요소를 쉽게 식별할 수 있습니다. 접근성 감사(Lighthouse &gt; 옵션 &gt; 접근성)를 실행하고 "0보다 큰 [tabindex] 값을 가진 요소가 없습니다"라는 감사 결과를 찾으세요.
+
+## "roving `tabindex` "를 사용하여 액세스 가능한 구성 요소 생성
+
+복잡한 구성 요소를 구축하는 경우 초점을 넘어 추가적인 키보드 지원을 추가해야 할 필요가 있을 수 있습니다. 내장된 `select` 요소를 고려하세요. 초점을 맞출 수 있으며 화살표 키를 사용하여 추가 기능(선택 가능한 옵션)을 표시할 수 있습니다.
+
+고유한 구성 요소에서 유사한 기능을 구현하려면 "roving `tabindex`"라는 기술을 사용하세요. roving tabindex는 현재 활성화된 하위 요소를 제외한 모든 하위 요소에 대해 `tabindex`을 설정하여 작동합니다. 그런 다음 구성 요소는 키보드 이벤트 리스너를 사용하여 사용자가 눌렀던 키를 확인합니다.
+
+이 경우 구성 요소는 이전에 포커스가 맞춰진 하위 요소의 `tabindex`를 -1로 설정하고 포커스를 받을 하위 요소의 `tabindex`를 0으로 설정한 다음 여기에 `focus()` 메서드를 호출합니다.
+
+**이전**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="0">Redo</div>
+  <button tabindex="-1">Cut</div>
+</div>
+```
+
+**이후**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="-1">Redo</div>
+  <button tabindex="0">Cut</div>
+</div>
+```
+
+{% Glitch { id: 'roving-tabindex', path: 'index.html', height: 346 } %}
+
+{% Aside %} 이러한 `role=""` 속성이 무엇을 위한 것인지 궁금하신가요? 이것들을 사용하면 요소의 의미를 변경하여 스크린 리더로 적절하게 알릴 수 있습니다. [스크린 리더 기본](/semantics-and-screen-readers) 가이드에서 이에 대해 자세히 알아볼 수 있습니다. {% endAside %}
+
+{% Assessment 'self-assessment' %}
+
+## 키보드 액세스 레시피
+
+사용자 지정 구성 요소에 필요한 키보드 지원 수준이 확실하지 않은 경우 [ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/)을 참조하세요. 이 편리한 가이드는 일반적인 UI 패턴을 나열하고 구성 요소가 지원해야 하는 키를 식별합니다.
diff --git a/src/site/content/ko/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/ko/accessible/control-focus-with-tabindex/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/ko/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/ko/accessible/index.md b/src/site/content/ko/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/ko/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/ko/accessible/labels-and-text-alternatives/index.md b/src/site/content/ko/accessible/labels-and-text-alternatives/index.md
new file mode 100644
index 00000000000..87465fae30c
--- /dev/null
+++ b/src/site/content/ko/accessible/labels-and-text-alternatives/index.md
@@ -0,0 +1,224 @@
+---
+layout: post
+title: 레이블 및 대체 텍스트
+authors:
+  - robdodson
+date: 2018-11-18
+description: 스크린 리더가 사용자에게 음성 UI를 제공하기 위해서는 의미 있는 요소에 적절한 레이블이나 대체 텍스트가 있어야 합니다. 레이블 또는 대체 택스트는 요소에 액세스 가능한 이름을 제공합니다. 이는 액세스 가능성 트리에서 요소 의미론을 표현하기 위한 주요 속성 중 하나입니다.
+---
+
+스크린 리더가 사용자에게 음성 UI를 제공하기 위해서는 의미 있는 요소에 적절한 레이블이나 대체 텍스트가 있어야 합니다. 레이블 또는 대체 택스트는 요소에 액세스 가능한 **이름**을 제공합니다. 이는 [액세스 가능성 트리에서 요소 의미론을 표현](/semantics-and-screen-readers/#semantic-properties-and-the-accessibility-tree)하기 위한 주요 속성 중 하나입니다.
+
+요소의 이름이 요소의 **역할**과 결합되면 사용자 컨텍스트를 제공하므로 사용자가 상호 작용하는 요소의 유형과 페이지에 표시되는 방식을 이해할 수 있습니다. 이름이 없으면 스크린 리더는 요소의 역할만 표시합니다. 페이지를 탐색하고 추가 컨텍스트 없이 "버튼", "체크상자", "이미지"가 표시되기를 기다린다고 상상해 보세요. 이러한 이유로 라벨링 및 대체 텍스트가 우수하고 접근 가능한 경험에 중요합니다.
+
+## 요소의 이름 검사
+
+Chrome의 DevTools를 사용하여 요소의 액세스 가능한 이름을 쉽게 확인할 수 있습니다.
+
+1. 요소를 마우스 오른쪽 버튼으로 클릭하고 **검사**를 선택합니다. 그러면 DevTools 요소 패널이 열립니다.
+2. 요소 패널에서 **접근성** 창을 찾습니다. `»` 기호 뒤에 숨겨져 있을 수 있습니다.
+3. **계산된 속성** 드롭다운에서 **이름** 속성을 찾습니다.
+
+<figure>{% Img src="image/admin/38c68DmamTCqt2LFxTmu.png", alt="", width="800", height="471" %} <figcaption> 버튼의 계산된 이름을 보여주는 DevTools 접근 가능성 창. </figcaption></figure>
+
+{% Aside %} 자세히 알아보려면 [DevTools 접근 가능성 참조](https://developer.chrome.com/docs/devtools/accessibility/reference/)를 확인하세요. {% endAside %}
+
+`alt{/code1 텍스트가 있는 <code data-md-type="codespan">img` 또는 `label`이 있는 `input`을 찾고 있든지 관계 없이 이러한 모든 시나리오에서 동일한 결과가 나타납니다. 요소에 액세스 가능한 이름을 부여합니다.
+
+## 누락된 이름 확인
+
+요소의 유형에 따라 액세스 가능한 이름을 요소에 추가하는 방법은 다양합니다. 다음 표에는 액세스 가능한 이름이 필요한 가장 일반적인 요소 유형과 추가 방법에 대한 설명 링크가 나와 있습니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>요소 유형</th>
+        <th>이름 추가 방법</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>HTML 문서</td>
+        <td><a href="#label-documents-and-frames">문서 및 프레임에 레이블 지정</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;frame&gt;</code> 또는 <code>&lt;iframe&gt;</code> 요소</td>
+        <td><a href="#label-documents-and-frames">문서 및 프레임에 레이블 지정</a></td>
+      </tr>
+      <tr>
+        <td>이미지 요소</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">이미지 및 개체에 대한 대체 텍스트 포함</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;input type="image"&gt;</code> 요소</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">이미지 및 개체에 대한 대체 텍스트 포함</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;object&gt;</code> 요소</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">이미지 및 개체에 대한 대체 텍스트 포함</a></td>
+      </tr>
+      <tr>
+        <td>버튼</td>
+        <td><a href="#label-buttons-and-links">레이블 버튼 및 링크</a></td>
+      </tr>
+      <tr>
+        <td>링크</td>
+        <td><a href="#label-buttons-and-links">레이블 버튼 및 링크</a></td>
+      </tr>
+      <tr>
+        <td>양식 요소</td>
+        <td><a href="#label-form-elements">레이블 양식 요소</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 문서 및 프레임 레이블 지정
+
+모든 페이지에는 페이지 내용을 간략하게 설명하는 [`title`](https://developer.mozilla.org/docs/Web/HTML/Element/title) 요소가 있어야 합니다. `title` 요소는 페이지에 액세스 가능한 이름을 제공합니다. 스크린 리더가 페이지에 들어가면 다음 텍스트가 가장 먼저 표시됩니다.
+
+예를 들어, 아래 페이지는 "Mary's Maple Bar Fast-Baking Recipe"라는 제목을 갖습니다.
+
+```html/3
+<!doctype html>
+  <html lang="en">
+    <head>
+      <title>Mary's Maple Bar Fast-Baking Recipe</title>
+    </head>
+  <body>
+    …
+  </body>
+</html>
+```
+
+{% Aside %} 효과적인 제목 작성에 대한 팁은 [설명이 포함된 제목 작성 가이드](/write-descriptive-text)를 참조하십시오. {% endAside %}
+
+마찬가지로 모든 `frame` 또는 `iframe` 요소에는 `title` 속성이 있어야 합니다.
+
+```html
+<iframe title="An interactive map of San Francisco" src="…"></iframe>
+```
+
+`iframe`의 콘텐츠에는 자체 내부 `title` 요소가 포함될 수 있지만 스크린 리더는 일반적으로 프레임 경계에서 멈추고 요소의 역할("프레임")과 `title` 속성에서 제공하는 액세스 가능한 이름을 표시합니다. 이를 통해 사용자는 프레임에 들어갈지 아니면 우회할지 결정할 수 있습니다.
+
+## 이미지 및 개체에 대한 대체 텍스트 포함
+
+`img`는 이미지에 접근 가능한 이름을 부여하기 위해 항상 [`alt`](https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes) 속성을 동반해야 합니다. 이미지가 로드되지 않으면 `alt` 텍스트가 자리 표시자로 사용되므로 사용자는 이미지가 전달하려는 내용을 알 수 있습니다.
+
+좋은 `alt` 텍스트를 작성하는 것은 약간의 기교가 필요하지만 따를 수 있는 몇 가지 가이드라인이 있습니다.
+
+1. 이미지가 주변 텍스트를 읽으면 얻기 어려운 콘텐츠를 제공하는지 확인합니다.
+2. 그렇다면 가능한 한 간결하게 콘텐츠를 전달합니다.
+
+이미지가 장식 역할을 하고 유용한 콘텐츠를 제공하지 않는 경우 빈 `alt=""` 속성을 지정하여 접근성 트리에서 이미지를 제거할 수 있습니다.
+
+{% Aside %} [WebAIM의대체 텍스트 가이드](https://webaim.org/techniques/alttext/)를 확인하여 효과적인 `alt` 텍스트 작성 방법에 대해 알아보세요. {% endAside %}
+
+### 링크 및 입력으로서의 이미지
+
+링크에 래핑된 이미지는 `img`의 `alt` 속성을 사용하여 사용자가 링크를 클릭할 경우 탐색할 위치를 설명해야 합니다.
+
+```html
+<a href="https://en.wikipedia.org/wiki/Google">
+  <img alt="Google's wikipedia page" src="google-logo.jpg">
+</a>
+```
+
+마찬가지로 `<input type="image">` 요소를 사용하여 이미지 버튼을 생성하는 경우 사용자가 버튼을 클릭할 때 발생하는 동작을 설명하는 `alt` 텍스트를 포함해야 합니다.
+
+```html/5
+<form>
+  <label>
+    Username:
+    <input type="text">
+  </label>
+  <input type="image" alt="Sign in" src="./sign-in-button.png">
+</form>
+```
+
+### 내장된 개체
+
+일반적으로 Flash, PDF 또는 ActiveX와 같은 내장된 기능에 사용되는 `<object>` 요소도 대체 텍스트를 포함해야 합니다. 이미지와 유사하게 이 텍스트는 요소가 렌더링되지 않으면 표시됩니다. 대체 텍스트는 아래의 "연례 보고서"와 같이 `object` 요소 내부에 일반 텍스트로 들어갑니다.
+
+```html
+<object type="application/pdf" data="/report.pdf">
+Annual report.
+</object>
+```
+
+## 레이블 버튼 및 링크
+
+버튼과 링크는 사이트 경험에 결정적인 역할을 하는 경우가 많으며 두 가지 모두 접근하기 좋은 이름을 갖는 것이 중요합니다.
+
+### 버튼
+
+`button` 요소는 항상 텍스트 콘텐츠를 사용하여 액세스 가능한 이름을 계산하려고 시도합니다. `form`의 일부가 아닌 버튼의 경우 텍스트 콘텐츠로 명확한 작업을 작성하는 것만으로도 액세스할 수 있는 좋은 이름을 만들 수 있습니다.
+
+```html
+<button>Book Room</button>
+```
+
+{% Img src="image/admin/tcIDzNpCHS9AlfwflQjI.png", alt="'방 예약' 버튼이 있는 모바일 양식.", width="800", height="269" %}
+
+이 규칙의 한 가지 일반적인 예외는 아이콘 버튼입니다. 아이콘 버튼은 이미지 또는 아이콘 글꼴을 사용하여 버튼에 대한 텍스트 콘텐츠를 제공할 수 있습니다. 예를 들어, WYSIWYG(What You See Is What You Get) 편집기에서 텍스트 서식을 지정하는 데 사용한 버튼은 일반적으로 그래픽 기호일 뿐입니다.
+
+{% Img src="image/admin/ZmQ77kLPbqd5iFOmn4SU.png", alt="왼쪽 정렬 아이콘 버튼.", width="800", height="269" %}
+
+아이콘 버튼을 사용하여 작업할 때 `aria-label` 속성을 사용하여 명시적으로 액세스 가능한 이름을 지정하는 것이 유용할 수 있습니다. `aria-label`은 버튼 안의 모든 텍스트 콘텐츠를 재정의하므로 스크린 리더를 사용하는 모든 사람에게 작업을 명확하게 설명할 수 있습니다.
+
+```html
+<button aria-label="Left align"></button>
+```
+
+### 링크
+
+버튼과 마찬가지로 링크는 주로 텍스트 콘텐츠에서 액세스 가능한 이름을 얻습니다. 링크를 생성할 때 사용하기 좋은 방법은 "여기" 또는 "자세히 알아보기"와 같은 채우기 단어 대신 가장 의미 있는 텍스트를 링크 자체에 넣는 것입니다.
+
+{% Compare 'worse', 'Not descriptive enough' %}
+
+```html
+Check out our guide to web performance <a href="/guide">here</a>.
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'Useful content!' %}
+
+```html
+Check out <a href="/guide">our guide to web performance</a>.
+```
+
+{% endCompare %}
+
+이는 페이지의 모든 링크를 나열할 수 있는 단축키를 제공하는 스크린 리더에 특히 유용합니다. 링크가 반복적인 채우기 텍스트로 가득 차 있으면 다음 단축키가 훨씬 덜 유용합니다.
+
+<figure>{% Img src="image/admin/IPxS2dwHMyGRvGxGi5n2.jpg", alt="'여기'라는 단어로 채워진 VoiceOver 링크 메뉴.", width="519", height="469" %} <figcaption> 링크 메뉴에 의한 탐색 결과를 나타내는 macOS 용 스크린 리더 VoiceOver에 대한 예. </figcaption></figure>
+
+## 레이블 양식 요소
+
+레이블을 확인란과 같은 양식 요소와 연결하는 두 가지 방법이 있습니다. 두 가지 방법 중 하나를 사용하면 레이블 텍스트도 확인란의 클릭 대상이 되며, 이는 마우스 또는 터치스크린 사용자에게도 유용합니다. 레이블을 요소와 연결하려면 다음 중 하나를 수행하세요.
+
+- 레이블 요소 내부에 입력 요소 배치
+
+```html
+<label>
+  <input type="checkbox">Receive promotional offers?</input>
+</label>
+```
+
+- 또는 라벨의 `for` 속성 사용 및 요소의 `id` 참조
+
+```html
+<input id="promo" type="checkbox"></input>
+<label for="promo">Receive promotional offers?</label>
+```
+
+확인란 레이블이 올바르게 지정된 경우, 스크린 리더는 요소가 확인란 역할을 하고, 선택된 상태이며, 아래의 VoiceOver 예제와 같이 "홍보 제안을 수신하시겠습니까?"라는 이름을 가진 요소를 보고할 수 있습니다.
+
+<figure>{% Img src="image/admin/WklT2ymrCmceyrGUNizF.png", alt="'홍보 제안을 수신하시겠습니까?'를 나타내는 VoiceOver 텍스트 출력", width="640", height="174" %}</figure>
+
+{% Assessment 'self-assessment' %}
diff --git a/src/site/content/ko/accessible/labels-and-text-alternatives/self-assessment.assess.yml b/src/site/content/ko/accessible/labels-and-text-alternatives/self-assessment.assess.yml
new file mode 100644
index 00000000000..7a074e4e939
--- /dev/null
+++ b/src/site/content/ko/accessible/labels-and-text-alternatives/self-assessment.assess.yml
@@ -0,0 +1,89 @@
+setLeader: |
+  Check whether sample HTML elements have accessible names
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: "![temp](image/user/temp.svg)"
+    type: think-and-check
+    stem: Does this image have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Give an image an accessible name by adding an `alt` attribute.
+  - stimulus: |
+      ```html
+      <object type="application/pdf" data="/report.pdf" alt="Annual report"></object>
+      ```
+    type: think-and-check
+    stem: Does this object have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give an `<object>` element a name by providing text content.
+          (An `alt` attribute on an object will not be read by assistive technologies.)
+  - stimulus: |
+      This sample renders an icon button:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give a button an accessible name by providing text content,
+          an `aria-label` attribute, or an `aria-labelledby` attribute.
+  - stimulus: |
+      This sample renders an icon button with a tooltip that appears on hover and focus:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+        <span class="tooltip hidden">Open menu</span>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Even if the button's tooltip is visually hidden using CSS,
+          assistive technologies can still read its text content.
+
+          **Caution:** When visually hiding button text,
+          use CSS rather than the `hidden` attribute.
+          The `hidden` attribute removes the element
+          from the accessibility tree.
+  - stimulus: |
+      ```html
+      <label>
+        <input type="checkbox" value="subscribe"></input>
+        Subscribe to the newsletter?
+      </label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. The label is associated with the checkbox
+          because the label is the checkbox's parent.
+          So, assistive technologies treat the label's
+          text content as the input's name.
+  - stimulus: |
+      ```html
+      <input type="checkbox" value="subscribe"></input>
+      <label for="subscribe">Subscribe to the newsletter?</label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **No**. The checkbox's `value` attribute indicates
+          what text will be saved when the form is submitted,
+          but assistive technologies don't read it.
+          To provide an accessible name,
+          add an `id` attribute with the value `subscribe`
+          to associate the checkbox with the label.
diff --git a/src/site/content/ko/angular/index.md b/src/site/content/ko/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/ko/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/ko/animations/index.md b/src/site/content/ko/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/ko/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/ko/blog/accent-color/index.md b/src/site/content/ko/blog/accent-color/index.md
new file mode 100644
index 00000000000..05533061953
--- /dev/null
+++ b/src/site/content/ko/blog/accent-color/index.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: CSS `accent-color`
+subhead: 한 줄의 코드로 브랜드 색상을 기본 제공 HTML 양식 입력으로 가져옵니다.
+authors:
+  - adamargyle
+  - jarhar
+description: 한 줄의 코드로 브랜드 색상을 기본 제공 HTML 양식 입력으로 가져옵니다.
+date: 2021-08-11
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WOcuCLCwMr0M2lF17bmm.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/huEpiCoJQ6dAo8rHGsZT.png
+tags:
+  - blog
+  - css
+---
+
+오늘날의 HTML 양식 요소는 [사용자 정의하기가 어렵습니다](https://codepen.io/GeoffreyCrofte/pen/BiHzp). 사용자 정의 스타일이 거의 없거나 전혀 없는 것과 입력 스타일을 재설정하고 처음부터 구축하는 것 중 하나를 선택하는 것처럼 느껴집니다. 처음부터 구축하는 것은 예상보다 훨씬 더 많은 작업이 필요합니다. 또한 요소 상태([불확실한 상태](https://developer.mozilla.org/docs/Web/CSS/:indeterminate), 브라우저가 이를 주시함)에 대한 스타일을 잊어 버리고 기본 제공 접근성 기능이 손실될 수 있습니다. 브라우저가 제공하는 것을 완전히 재창조하기 위해서는 하려고 하는 일보다 더 많은 작업이 필요할 수 있습니다.
+
+```css
+accent-color: hotpink;
+```
+
+[CSS UI 사양](https://www.w3.org/TR/css-ui-4/#widget-accent)의 CSS `accent-color`는 CSS의 한 라인으로 엘리먼트에 색조를 지정합니다. 이는 브랜드를 엘리먼트로 가져올 수 있는 방법을 제공함으로써 사용자 정의에 대한 노력을 덜어줍니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CfSS3F1XUsfCHIB86xeE.png", alt="체크상자, 라디오 버튼, 범위 슬라이더 및 진행 요소가 모두 색조 지정된 핫핑크인 강조 색상 데모에 대한 밝은 테마 스크린샷.", width="800", height="548" %} <figcaption> <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">데모</a> </figcaption></figure>
+
+`accent-color` 속성은 [`color-scheme`](/color-scheme/)과도 작동하므로 작성자가 밝은 요소와 어두운 요소 모두에 색조를 지정할 수 있습니다. 다음 예에서 사용자는 어두운 테마 활성화를 가지며 페이지는 `color-scheme: light dark`을 사용하고 어두운 테마 핫핑크 색조 지정된 컨트롤을 위해 동일한 `accent-color: hotpink`를 사용합니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3gxeeZoSLY34tsMxkyt9.png", alt="체크상자, 라디오 버튼, 범위 슬라이더 및 진행 요소가 모두 색조 지정된 핫핑크인 강조 색상 데모에 대한 어두운 테마 스크린샷.", width="800", height="548" %} <figcaption> <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demo</a> </figcaption></figure>
+
+### 브라우저 지원
+
+이 글을 작성하는 시점에서 Chromium 93+ 및 Firefox 92+는 `accent-color`를 지원합니다.
+
+## 지원 요소
+
+현재, 네 가지 요소 즉, [체크상자](#checkbox), [라디오](#radio), [범위](#range) 및 [진행](#progress)만 `accent-color` 속성을 통해 색조가 지정됩니다. 각각의 요소는 밝고 어두운 색상 구조로 [https://accent-color.glitch.me](https://accent-color.glitch.me)에서 미리 볼 수 있습니다.
+
+{% Aside "warning" %} 다음 데모 요소가 모두 같은 색상이라면 브라우저는 `accent-color`를 지원하지 않는 것입니다. {% endAside %}
+
+### 체크상자
+
+{% Codepen { user: 'web-dot-dev', id: 'dyWjGqZ' } %}
+
+### 라디오
+
+{% Codepen { user: 'web-dot-dev', id: 'WNjKrgB' } %}
+
+### 범위
+
+{% Codepen { user: 'web-dot-dev', id: 'yLbqeRy' } %}
+
+### 진행
+
+{% Codepen { user: 'web-dot-dev', id: 'rNmrxqL' } %}
+
+## 대비 보장
+
+액세스할 수 없는 요소가 존재하는 것을 방지하기 위해 `accent-color`가 있는 브라우저는 사용자 정의 액센트와 함께 사용할 [적격 대비 색상](https://webaim.org/articles/contrast/)을 결정해야 합니다. 다음은 Chrome 94(왼쪽)와 Firefox 92 Nightly(오른쪽)의 알고리즘이 어떻게 다른지 보여주는 스크린샷입니다.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DJhB56n10Eh8O29RsRdE.png", alt="다양한 색조와 음영으로 전체 체크상자 스펙트럼을 렌더링하는 나란히 놓인 Firefox와 Chromium 스크린샷.", width="800", height="832" %}
+
+여기에서 가장 중요한 것은 **브라우저를 신뢰**하는 것입니다. 브랜드 색상을 제공하고 브라우저가 현명한 결정을 내릴 것이라고 신뢰하세요.
+
+{% Aside %} 브라우저는 어두운 테마에서 색상을 변경하지 않습니다. {% endAside %}
+
+## 추가: 더 많은 색조 지정
+
+이 네 가지 양식 요소보다 더 많은 요소를 색조 지정하는 방법이 궁금한가요? 다음은 색조를 지정하는 최소 샌드박스입니다.
+
+- 초점 링
+- 텍스트 선택 하이라이트
+- 목록 [마커](/css-marker-pseudo-element/)
+- 화살표 표시기(Webkit만 해당)
+- 스크롤바 썸(Firefox만 해당)
+
+```css
+html {
+  --brand: hotpink;
+  scrollbar-color: hotpink Canvas;
+}
+
+:root { accent-color: var(--brand); }
+:focus-visible { outline-color: var(--brand); }
+::selection { background-color: var(--brand); }
+::marker { color: var(--brand); }
+
+:is(
+  ::-webkit-calendar-picker-indicator,
+  ::-webkit-clear-button,
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button
+) {
+  color: var(--brand);
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'RwVBreJ' } %}
+
+### 잠재적 미래
+
+사양은 본 문서에 제시된 네 가지 요소에 `accent-color`를 적용하는 것을 제한하지 않으며 나중에 더 많은 지원이 추가될 수 있습니다. `<select>`에서 선택한 `<option>`과 같은 요소는 `accent-color`로 강조 표시될 수 있습니다.
+
+웹에서 어떤 것을 색조 지정하고 싶은가요? 선택기로 [@argyleink](https://twitter.com/argyleink)를 트윗하면 이 문서에 추가될 수 있습니다!
diff --git a/src/site/content/ko/blog/app-shortcuts/index.md b/src/site/content/ko/blog/app-shortcuts/index.md
new file mode 100644
index 00000000000..563b4b09b15
--- /dev/null
+++ b/src/site/content/ko/blog/app-shortcuts/index.md
@@ -0,0 +1,158 @@
+---
+title: 앱 바로 가기로 빠르게 작업 완료
+subhead: 앱 바로 가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
+authors:
+  - beaufortfrancois
+  - jungkees
+date: 2020-05-20
+updated: 2021-10-12
+hero: image/admin/1ekafMZjtzcd0G3TLQJ4.jpg
+alt: 앱 바로가기 메뉴가 표시된 Android 휴대전화 사진
+description: 앱 바로 가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+사용자의 생산성을 향상하고 주요 작업에 대한 재참여를 촉진하기 위해 웹 플랫폼은 이제 앱 바로 가기를 지원합니다. 이를 통해 웹 개발자는 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
+
+이 문서에서는 이러한 앱 바로 가기를 정의하는 방법을 설명합니다. 또한 몇 가지 관련 모범 사례를 배우게 됩니다.
+
+## 앱 바로 가기 정보
+
+앱 바로 가기를 사용하면 사용자가 웹 앱 내에서 일반적인 작업이나 권장 작업을 빠르게 시작할 수 있습니다. 앱 아이콘이 표시되는 곳이면 어디에서나 이러한 작업에 쉽게 액세스할 수 있으므로 사용자의 생산성이 향상되고 웹 앱에 대한 참여도가 높아집니다.
+
+앱 바로 가기 메뉴는 사용자 바탕 화면의 작업 표시줄(Windows) 또는 독(macOS)에서 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하거나 Android에서 앱의 런처 아이콘을 길게 누르면 호출됩니다.
+
+<figure>{% Img src="image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt="Android에서 열린 앱 바로 가기 메뉴의 스크린샷", width="800", height="420" %}<figcaption> Android에서 열린 앱 바로 가기 메뉴</figcaption></figure>
+
+<figure>{% Img src="image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt="Windows에서 열린 앱 바로 가기 메뉴의 스크린샷", width="800", height="420" %}<figcaption> Windows에서 열린 앱 바로 가기 메뉴</figcaption></figure>
+
+앱 바로 가기 메뉴는 사용자의 데스크톱 또는 모바일 장치에 설치된 [Progressive Web Apps](/progressive-web-apps/)에 대해서만 표시됩니다. [설치하려면 무엇이 필요합니까?](/install-criteria/)를 확인하십시오. 설치 가능성 요구 사항에 대해 알아보십시오.
+
+각 앱 바로 가기는 웹 앱 [범위](/add-manifest/#scope) 내의 URL과 연결된 사용자 의도를 나타냅니다. 사용자가 앱 바로 가기를 활성화하면 URL이 열립니다. 앱 바로 가기의 예는 다음과 같습니다.
+
+- 최상위 탐색 항목(예: 홈, 타임라인, 최근 주문)
+- 검색
+- 데이터 입력 작업(예: 이메일 또는 트윗 작성, 영수증 추가)
+- 활동(예: 가장 인기 있는 연락처와 채팅 시작)
+
+{% Aside %} 앱 바로 가기를 설계하고 표준화한 Microsoft Edge 및 Intel 직원에게 큰 감사를 드립니다. Chrome은 Chromium 프로젝트를 진행하기 위해 협력하는 커미터 커뮤니티에 의존합니다. 모든 Chromium 커미터가 Google 직원은 아니며 이러한 기여자는 특별한 인정을 받을 자격이 있습니다! {% endAside %}
+
+## 웹 앱 매니페스트에서 앱 바로 가기 정의
+
+앱 바로 가기는 [웹 앱 매니페스트](/add-manifest)에 선택적으로 정의되며, 이 JSON 파일은 브라우저에 프로그레시브 웹 앱에 대해 알려주고 사용자의 데스크톱이나 모바일 장치에 설치했을 때 작동 방식을 알려줍니다. 더 구체적으로 말하면 `shortcuts` 배열 멤버에서 선언됩니다. 다음은 잠재적인 웹 앱 매니페스트의 예입니다.
+
+```json
+{
+  "name": "Player FM",
+  "start_url": "https://player.fm?utm_source=homescreen",
+  …
+  "shortcuts": [
+    {
+      "name": "Open Play Later",
+      "short_name": "Play Later",
+      "description": "View the list of podcasts you saved for later",
+      "url": "/play-later?utm_source=homescreen",
+      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "View Subscriptions",
+      "short_name": "Subscriptions",
+      "description": "View the list of podcasts you listen to",
+      "url": "/subscriptions?utm_source=homescreen",
+      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
+    }
+  ]
+}
+```
+
+`shortcuts` 배열의 각 구성원은 `name`과 `url`을 포함하는 사전입니다. 다른 구성원은 선택 사항입니다.
+
+### 이름
+
+사용자에게 표시될 때 앱 바로 가기에 대한 사람이 읽을 수 있는 레이블입니다.
+
+### short_name(선택 사항)
+
+공간이 제한된 곳에 사용되는 사람이 읽을 수 있는 레이블입니다. 선택 사항이더라도 제공하는 것이 좋습니다.
+
+### 설명 (선택 사항)
+
+앱 바로 가기의 사람이 읽을 수 있는 용도입니다. 작성 당시에는 사용되지 않았지만 향후 보조 기술에 노출될 수 있습니다.
+
+### URL
+
+사용자가 앱 바로 가기를 활성화할 때 열리는 URL입니다. 이 URL은 웹 앱 매니페스트 범위 내에 있어야 합니다. 상대 URL인 경우 기본 URL은 웹 앱 매니페스트의 URL이 됩니다.
+
+### 아이콘(선택 사항)
+
+이미지 리소스 개체의 배열입니다. 각 개체는 `src` 및 `sizes` 속성을 포함해야 합니다. [웹 앱 매니페스트 아이콘](/add-manifest/#icons) 과 달리 `type`은 선택 사항입니다.
+
+작성 당시 SVG 파일은 지원되지 않으므로 대신 PNG를 사용하십시오.
+
+완벽한 픽셀 아이콘을 원하면 48dp 단위로 제공하십시오(즉, 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 픽셀 아이콘). 그렇지 않으면 단일 192x192 픽셀 아이콘을 사용하는 것이 좋습니다.
+
+품질 측정을 위해 아이콘은 Android에서 기기의 이상적인 크기인 48dp의 절반 이상이어야 합니다. 예를 들어 [xxhdpi 화면](https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp)에 표시하려면 아이콘이 최소 72 x 72 픽셀이어야 합니다. (픽셀 단위의 dp 단위를 [변환](https://developer.android.com/training/multiscreen/screendensities#dips-pels)하는 공식에서 파생됩니다.)
+
+## 앱 바로 가기 테스트
+
+앱 바로 가기가 올바르게 설정되었는지 확인하려면 DevTools의 **애플리케이션** 패널에서 **매니페스트** 창을 사용하세요.
+
+<figure>{% Img src="image/admin/rEL0r8lEfYHlsj0ylLSL.png", alt="DevTools의 앱 바로 가기 스크린샷", width="800", height="534" %}<figcaption> DevTools에 표시된 앱 바로 가기</figcaption></figure>
+
+이 창은 앱 바로 가기를 포함하여 많은 매니페스트 속성의 사람이 읽을 수 있는 버전을 제공합니다. 모든 바로 가기 아이콘이 제공되는 경우 제대로 로드되는지 쉽게 확인할 수 있습니다.
+
+프로그레시브 웹 앱 업데이트는 하루에 한 번으로 제한되기 때문에 모든 사용자가 앱 바로 가기를 즉시 사용하지 못할 수 있습니다. [Chrome에서 웹 앱 매니페스트에 대한 업데이트를 처리하는 방법](/manifest-updates)에 대해 자세히 알아보세요.
+
+## 모범 사례
+
+### 우선 순위에 따라 앱 바로 가기 주문
+
+표시되는 앱 바로 가기 수의 제한은 플랫폼에 따라 다르므로 `shortcuts` 배열에서 가장 먼저 나타나도록 앱 바로 가기를 우선 순위에 따라 정렬하는 것이 좋습니다. 예를 들어 Windows의 Chrome 및 Edge는 앱 바로 가기 수를 10개로 제한하는 반면 Android용 Chrome은 처음 4개의 앱 바로 가기만 고려합니다.
+
+{% Aside %} Android 7용 Chrome 92는 이제 3개의 앱 단축키만 허용합니다. 앱에 사용 가능한 바로 가기 슬롯 중 하나를 사용하여 사이트 설정에 대한 바로 가기가 추가되었습니다. {% endAside %}
+
+### 고유한 앱 바로 가기 이름 사용
+
+앱 바로 가기가 항상 표시되지 않을 수 있으므로 아이콘에 의존하여 앱 바로 가기를 구별해서는 안 됩니다. 예를 들어 macOS는 도크 바로 가기 메뉴에서 아이콘을 지원하지 않습니다. 각 앱 바로 가기에 고유한 이름을 사용합니다.
+
+### 앱 바로가기 사용량 측정
+
+`start_url`을 사용하는 것처럼 앱 바로 가기 `url` 항목에 주석을 달아야 합니다(예: `url: "/my-shortcut?utm_source=homescreen"`).
+
+## 브라우저 지원
+
+앱 바로가기는 Android(Chrome 84), Windows(Chrome 85 및 Edge 85), ChromeOS(Chrome 92), macOS 및 Linux(Chrome 96 및 Edge 96)에서 사용할 수 있습니다.
+
+<figure>{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/6KgvySxUcryuD0gwXa0u.png",alt="ChromeOS에서 열린 앱 바로 가기 메뉴의 스크린샷", width="800", height="450" %}<figcaption> ChromeOS에서 열린 앱 바로 가기 메뉴</figcaption></figure>
+
+## 신뢰할 수 있는 웹 활동 지원
+
+[신뢰할 수 있는 웹 활동](/using-a-pwa-in-your-android-app/)을 사용하는 Android 앱을 빌드하는 데 권장되는 도구인 [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap)은 웹 앱 매니페스트에서 앱 바로 가기를 읽고 Android 앱에 대한 해당 구성을 자동으로 생성합니다. 앱 바로 가기 아이콘은 [필수](https://github.com/GoogleChromeLabs/bubblewrap/issues/116)이며 Bubblewrap에서 최소 96 x 96픽셀이어야 합니다.
+
+프로그레시브 웹 앱을 신뢰할 수 있는 웹 활동으로 쉽게 전환할 수 있는 훌륭한 도구인 [PWABuilder](https://www.pwabuilder.com/)는 몇 가지 [주의 사항](https://github.com/pwa-builder/CloudAPK/issues/25)이 있는 앱 바로 가기를 지원합니다.
+
+신뢰할 수 있는 웹 활동을 Android 애플리케이션에 수동으로 통합하는 개발자의 경우 [Android 앱 바로 가기](https://developer.android.com/guide/topics/ui/shortcuts)를 사용하여 동일한 동작을 구현할 수 있습니다.
+
+## 샘플
+
+<figure>
+  <video controls autoplay loop muted src="https://storage.googleapis.com/web-dev-assets/app-shortcuts/app-shortcuts-recording.mp4">
+  </video></figure>
+
+[앱 바로 가기 샘플](https://app-shortcuts.glitch.me) 및 해당 [소스](https://glitch.com/edit/#!/app-shortcuts)를 확인하세요.
+
+{% Glitch { id: 'app-shortcuts', path: 'public/manifest.json', height: 480 } %}
+
+## 유용한 링크
+
+- [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Shortcuts/explainer.md)
+- [사양](https://w3c.github.io/manifest/#shortcuts-member)
+- [앱 바로 가기 샘플](https://app-shortcuts.glitch.me) | [앱 바로 가기 샘플 소스](https://glitch.com/edit/#!/app-shortcuts)
+- [추적 버그](https://bugs.chromium.org/p/chromium/issues/detail?id=955497)
+- [ChromeStatus.com 항목](https://chromestatus.com/feature/5706099464339456)
+- Blink 구성 요소: [`UI>Browser>WebAppInstalls`](https://crbug.com/?q=component:UI%3EBrowser%3EWebAppInstalls)
diff --git a/src/site/content/ko/blog/appcache-removal/index.md b/src/site/content/ko/blog/appcache-removal/index.md
new file mode 100644
index 00000000000..7e6008a3537
--- /dev/null
+++ b/src/site/content/ko/blog/appcache-removal/index.md
@@ -0,0 +1,186 @@
+---
+layou: post
+title: AppCache 제거 준비하기
+subhead: Chrome 85는 기본적으로 AppCache에 대한 지원을 제거합니다. 대부분의 개발자는 지금 AppCache로부터 마이그레이션해야 하며 더 이상 기다리지 않아야 합니다.
+authors:
+  - jeffposnick
+description: Chrome 및 기타 브라우저의 AppCache 제거 계획에 대한 세부정보입니다.
+date: 2020-05-18
+updated: 2021-08-23
+tags:
+  - blog
+  - chrome-84
+  - origin-trials
+  - service-worker
+hero: image/admin/YDs2H4gLPhIwPMjPtc8o.jpg
+alt: 고풍스러운 저장 용기입니다.
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673"
+---
+
+[이전 발표](https://blog.chromium.org/2020/01/appcache-scope-restricted.html)에 이어 Chrome 및 기타 Chromium 기반 브라우저에서 [AppCache에](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) 대한 지원이 제거됩니다. 개발자는 더 이상 기다리지 말고 지금 AppCache로부터 마이그레이션하는 것이 좋습니다.
+
+현재 브라우저에서 광범위하게 지원되는 [서비스 작업자](https://developer.chrome.com/docs/workbox/service-worker-overview/)는 AppCache가 제공했던 오프라인 경험을 제공하는 대안을 제공합니다. [마이그레이션 전략](#migration-strategies)을 참조하세요.
+
+## 타임라인
+
+Chrome 출시 일정에 대한 [최근 변경사항](https://blog.chromium.org/2020/03/chrome-and-chrome-os-release-updates.html)으로 인해 이러한 단계 중 일부의 시기가 다를 수 있습니다. 우리는 이 일정을 최신 상태로 유지하기 위해 노력할 것이지만 현 시점에서 특정 마일스톤을 기다리지 말고 가능한 한 빨리 AppCache로부터 마이그레이션하세요.
+
+"사용되지 않는" 기능이 여전히 존재하지만 사용을 권장하지 않는 경고 메시지를 기록합니다. "제거된" 기능은 더 이상 브라우저에 존재하지 않습니다.
+
+<div>
+  <table>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/UKF8cK0EwMI/m/NLhsIrs-AQAJ">비보안 컨텍스트에서 사용 중단</a></td>
+    <td>Chrome 50(2016년 4월)</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/ANnafFBhReY/m/1Xdr53KxBAAJ?pli=1">비보안 컨텍스트에서 제거</a></td>
+    <td>Chrome 70(2018년 10월)</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/0daqyD8kCQAJ">보안 컨텍스트에서 사용 중단</a></td>
+    <td>Chrome 79(2019년 12월)</td>
+    </tr>
+    <tr>
+    <td><a href="https://blog.chromium.org/2020/01/appcache-scope-restricted.html">AppCache 범위 제한</a></td>
+    <td>Chrome 80(2020년 2월)</td>
+    </tr>
+    <tr>
+    <td>"리버스" 원본 평가판 시작</td>
+    <td>Chrome 84(2020년 7월)</td>
+    </tr>
+    <tr>
+    <td>
+<a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/AvxoE6JpBgAJ">보안 컨텍스트에서 제거</a>. 원본 평가판에 옵트인한 경우는 제외</td>
+    <td>Chrome 85(2020년 8월)</td>
+    </tr>
+    <tr>
+    <td>원본 평가판 완료와 함께 모든 사람을 위한 보안 컨텍스트에서 제거 완료</td>
+    <td>2021년 10월 5일(대략 Chrome 95)</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} 이 타임라인은 iOS 이외의 **모든 플랫폼**의 Chrome에 적용됩니다. Android [WebView](https://developer.android.com/reference/android/webkit/WebView) 내에서 사용되는 AppCache를 위한 조정된 타임라인도 있습니다. 자세한 내용은 이 게시물 뒷부분의 [크로스 플랫폼 이야기](#the-cross-platform-story)를 참조하세요. {% endAside %}
+
+## 원본 평가판
+
+이 타임라인에는 제거할 예정인 두 가지 마일스톤이 나열됩니다. Chrome 85부터 AppCache는 기본적으로 Chrome에서 더 이상 사용할 수 없습니다. AppCache로부터 마이그레이션하는 데 추가 시간이 필요한 개발자는 '리버스' [원본 평가판](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)에 [가입](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673)하여 웹 앱용 AppCache의 가용성을 연장할 수 있습니다. 원본 평가판은 Chrome 84에서 시작되어(Chrome 85에서 기본적으로 제거되기 전에) 2021년 10월 5일(대략 Chrome 95)까지 활성화됩니다. 이 시점에서 AppCache는 원본 평가판에 등록한 사람을 포함하여 모든 사람에 대해 완전히 제거됩니다.
+
+{% Aside %} 우리는 왜 이것을 '리버스' 원본 평가판이라고 부를까요? 일반적으로 원본 평가판을 통해 개발자는 Chrome에서 기본적으로 제공되기 전에 새 기능에 미리 액세스할 수 있도록 선택(옵트인)할 수 있습니다. 이 경우 우리는 개발자가 기존 기술이 Chrome에서 제거된 후에도 일시적으로 사용할 수 있도록 선택(옵트인)할 수 있게 합니다. {% endAside %}
+
+"리버스" 원본 평가판에 참여하려면:
+
+<ol>
+<li>여러분의 원본에 대한 <a href="https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673">토큰을 요청</a>하세요.</li>
+<li>여러분의 HTML 페이지에 토큰을 추가하세요. <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#how-do-i-enable-an-experimental-feature-on-my-origin">두 가지 방법</a>이 있습니다.<ul>
+<li> 각 페이지의 헤드에 <code>origin-trial</code> <code>&lt;meta&gt;</code> 태그를 추가합니다. 예: <code>&lt;meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"&gt;</code> </li> <li> <code>Origin-Trial</code> HTTP 헤더가 포함된 응답을 반환하도록 서버를 구성합니다. 결과 응답 헤더는 다음과 같아야 합니다. <code>Origin-Trial: TOKEN_GOES_HERE</code> </li> </ul>
+</li>
+<li>여러분의 AppCache 매니페스트에 동일한 토큰을 추가합니다. 다음 형식으로 여러분의 매니페스트의 새 필드에서 이 작업을 수행합니다.</li>
+</ol>
+
+```text
+ORIGIN-TRIAL:
+TOKEN_GOES_HERE
+```
+
+(`ORIGIN-TRIAL`과 여러분의 토큰 사이에는 새 줄이 있어야 합니다.)
+
+
+
+
+
+{% Aside %} 매니페스트의 토큰은 매니페스트 자체의 `ORIGIN-TRIAL` 필드에 **반드시** 있어야 합니다. HTML 페이지의 토큰과 달리 HTTP 헤더를 통해 이를 제공할 수 없습니다. {% endAside %}
+
+`index.html` 및 `manifest.appcache` 파일 모두에 올바른 원본 평가판 토큰을 추가하는 방법을 설명하는 샘플 프로젝트가 아래에 포함되어 있는 것을 볼 수 있습니다.
+
+{% Glitch { id: 'appcache-reverse-ot', path: 'manfiest.appcache', height: 480 } %}
+
+### 토큰이 여러 곳에 필요한 이유는 무엇인가요?
+
+**동일한 원본 평가판 토큰**을 다음과 연결해야 합니다.
+
+- AppCache를 사용하는 **여러분의 모든 HTML 페이지**.
+- `ORIGIN-TRIAL` 매니페스트 필드를 통한 **여러분의 모든 AppCache 매니페스트**.
+
+과거에 원본 평가판에 참여했다면 여러분의 HTML 페이지에만 토큰을 추가했을 수 있습니다. AppCache "리버스" 원본 평가판은 토큰을 여러분의 각 AppCache 매니페스트에도 연결해야 한다는 점에서 특별합니다.
+
+HTML 페이지에 원본 평가판 토큰을 추가하면 웹 앱 내에서 `window.applicationCache` 인터페이스가 활성화됩니다. 토큰과 연결되지 않은 페이지는 `window.applicationCache` 메서드 및 이벤트를 사용할 수 없습니다. 토큰이 없는 페이지도 AppCache로부터 리소스를 로드할 수 없습니다. Chrome 85부터 AppCache가 존재하지 않는 것처럼 작동합니다.
+
+AppCache 매니페스트에 원본 평가판 토큰을 추가하면 각 매니페스트가 여전히 유효함을 나타냅니다. Chrome 85부터 `ORIGIN-TRIAL` 필드가 없는 매니페스트는 형식이 잘못된 것으로 처리되고 매니페스트 내의 규칙은 무시됩니다.
+
+### 원본 평가판 배포 시기 및 공급
+
+'리버스' 원본 평가판은 공식적으로 Chrome 84부터 시작되지만 여러분은 오늘 원본 평가판에 [가입](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673)하고 여러분의 HTML 및 AppCache 매니페스트에 토큰을 추가할 수 있습니다. 여러분의 웹 앱 잠재고객이 점차적으로 Chrome 84로 업그레이드함에 따라 여러분이 이미 추가한 모든 토큰이 적용됩니다.
+
+AppCache 매니페스트에 토큰을 추가한 후에는 `about://appcache-internals`를 방문하여 여러분의 Chrome(버전 84 이상)의 로컬 인스턴스가 원본 평가판 토큰을 매니페스트의 캐시된 항목과 올바르게 연결했는지 확인하세요. 여러분의 원본 평가판이 인식되면 해당 페이지에 여러분의 매니페스트와 연결된 `Token Expires: Tue Apr 06 2021...` 필드가 표시되어야 합니다.
+
+<figure>{% Img src="image/admin/Xid94kdPT5yGbQzBL4at.jpg", alt="인식된 토큰을 보여주는 about://appcache-internals 인터페이스.", width="550", height="203" %}</figure>
+
+## 제거 전 테스트
+
+가능한 한 빨리 AppCache로부터 마이그레이션하는 것이 좋습니다. 여러분의 웹 앱에서 AppCache 제거를 테스트하려면 `about://flags/#app-cache` [플래그](https://www.chromium.org/developers/how-tos/run-chromium-with-flags)를 사용하여 제거를 시뮬레이션하세요. 이 플래그는 Chrome 84부터 사용할 수 있습니다.
+
+## 마이그레이션 전략 {: #migration-strategies }
+
+[현재 브라우저에서 광범위하게 지원되는](https://developer.mozilla.org/docs/Web/API/ServiceWorker#Browser_compatibility) 서비스 작업자는 AppCache에서 제공하는 오프라인 경험에 대한 대안을 제공합니다.
+
+우리는 전체 AppCache 인터페이스를 복제하지는 않지만 서비스 작업자를 사용하여 AppCache의 일부 기능을 복제하는 [폴리필](https://github.com/GoogleChromeLabs/sw-appcache-behavior)을 제공했습니다. 이는 특히 `window.applicationCache` 인터페이스 또는 관련 AppCache 이벤트를 대체하지 않습니다.
+
+더 복잡한 경우에는 [Workbox](https://developer.chrome.com/docs/workbox/)와 같은 라이브러리를 사용하여 여러분의 웹 앱용 최신 서비스 작업자를 쉽게 만들 수 있습니다.
+
+### 상호 배타적인 서비스 작업자와 AppCache
+
+마이그레이션 전략을 수행하는 동안 Chrome은 서비스 작업자의 [제어](/service-worker-lifecycle/#scope-and-control) 하에 로드된 모든 페이지에서 AppCache 기능을 비활성화한다는 점을 염두에 두시기 바랍니다. 즉, 특정 페이지를 제어하는 서비스 작업자를 배포하는 즉시 해당 페이지에서 AppCache를 더 이상 사용할 수 없습니다.
+
+이 때문에 서비스 작업자로 하나씩 마이그레이션하지 않는 것이 좋습니다. 캐싱 논리의 일부만 포함하는 서비스 작업자를 배포하는 것은 실수입니다. "차이를 메우기" 위해 AppCache로 물러날 수는 없습니다.
+
+마찬가지로 AppCache를 제거하기 전에 서비스 작업자를 배포한 다음 이전 AppCache 구현으로 롤백해야 하는 경우 해당 서비스 작업자의 [등록을 취소](https://stackoverflow.com/a/33705250/385997)해야 합니다. 지정된 페이지의 범위에 등록된 서비스 작업자가 있는 한 AppCache는 사용되지 않습니다.
+
+## 크로스 플랫폼 이야기
+
+특정 브라우저 공급업체의 AppCache 제거 계획에 대한 자세한 정보를 원하는 경우 해당 공급업체의 후속 작업을 알아보는 것이 좋습니다.
+
+### 모든 플랫폼의 Firefox
+
+Firefox는 릴리스 44(2015년 9월)에서 AppCache를 [사용 중단](https://www.fxsitecompat.dev/en-CA/docs/2015/application-cache-api-has-been-deprecated/)했으며 2019년 9월부터 베타 및 나이틀리 빌드에서 AppCache에 대한 지원을 [제거](https://www.fxsitecompat.dev/en-CA/docs/2019/application-cache-storage-has-been-removed-in-nightly-and-early-beta/)했습니다.
+
+### iOS 및 macOS의 Safari
+
+Safari는 2018년 초에 AppCache를 [사용 중단](https://bugs.webkit.org/show_bug.cgi?id=181764)했습니다.
+
+### iOS의 크롬
+
+iOS용 Chrome은 다른 플랫폼의 Chrome과 다른 브라우저 엔진인 [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview)를 사용하기 때문에 특별한 경우로 봐야 합니다. 서비스 작업자는 현재 WKWebView를 사용하는 iOS 앱에서 지원되지 않으며 Chrome의 AppCache 제거 발표는 [iOS용 Chrome의 AppCache 가용성](https://webkit.org/status/#specification-application-cache)을 다루지 않습니다. 여러분의 웹 앱에 iOS용 Chrome 사용자가 많다는 사실을 알고 있다면 이 점을 염두에 두시기 바랍니다.
+
+### 안드로이드 WebViews
+
+Android 애플리케이션의 일부 개발자는 Chrome [WebView](https://developer.android.com/reference/android/webkit/WebView)를 사용하여 웹 콘텐츠를 표시하고 AppCache를 사용할 수도 있습니다. 그러나 WebView용 원본 평가판을 활성화하는 것은 불가능합니다. 그 점을 고려해볼때 Chrome WebView는 Chrome 90에서 예상되는 최종 제거가 수행될 때까지 원본 평가판 없이 AppCache를 지원합니다.
+
+## 더 알아보기
+
+다음은 AppCache에서 서비스 작업자로 마이그레이션하는 개발자를 위한 몇 가지 참고 자료입니다.
+
+### 문서
+
+- [서비스 작업자: 소개](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+- [서비스 작업자 수명 주기](/service-worker-lifecycle/)
+- [프로그레시브 웹 앱 교육](https://developers.google.com/web/ilt/pwa)
+- [네트워크 안정성](/reliable/)
+
+### 도구
+
+- [AppCache 폴리필](https://github.com/GoogleChromeLabs/sw-appcache-behavior)
+- [Workbox](https://developer.chrome.com/docs/workbox/)
+- [PWA 빌더](https://www.pwabuilder.com/)
+
+## 지원 받기
+
+특정 도구를 사용할 때 문제가 발생하면 GitHub 리포지토리에서 해당 문제를 엽니다.
+
+<code>[html5-appcache](https://stackoverflow.com/questions/tagged/html5-appcache)</code> 태그를 사용하여 [Stack Overflow](https://stackoverflow.com/)의 AppCache로부터 마이그레이션하는 방법에 대한 일반적인 질문을 할 수 있습니다.
+
+Chrome의 AppCache 제거와 관련된 버그가 발생하면 Chromium 문제 추적기를 사용하여 [신고해주세요](https://crbug.com/new).
+
+*이곳의 이미지는 [Smithsonian Institution Archives, Acc. 11-007, Box 020, 이미지 번호 MNH-4477](https://www.si.edu/object/usnm-storage-drawer:siris_arc_391797)를 기반으로 합니다.*
diff --git a/src/site/content/ko/blog/async-clipboard/index.md b/src/site/content/ko/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..a17803c99c3
--- /dev/null
+++ b/src/site/content/ko/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: 클립보드 액세스 차단 해제
+subhead: 텍스트 및 이미지에 대한 더 안전하고 차단되지 않은 클립보드 액세스
+authors:
+  - developit
+  - thomassteiner
+description: Async Clipboard API는 사용 권한이 있는 복사 및 붙여넣기를 단순화합니다.
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: 쇼핑 목록이 있는 클립보드
+feedback:
+  - api
+---
+
+지난 몇 년 동안 브라우저는 클립보드 상호 작용에 [`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands)를 사용했습니다. 널리 지원되기는 하지만 이 잘라내어 붙여넣는 방법에는 대가가 필요했습니다. 즉, 클립보드 액세스는 동기식이었고 DOM을 읽고 쓸 수만 있었습니다.
+
+소량의 텍스트라면 문제가 없겠지만 클립보드 전송을 위해 페이지를 차단할 때 문제를 겪는 경우가 많습니다. 콘텐츠를 안전하게 붙여넣으려면 시간이 많이 소요되는 삭제 또는 이미지 디코딩이 필요할 수 있습니다. 브라우저는 붙여넣은 문서에서 연결된 리소스를 로드하거나 인라인 처리해야 할 수 있습니다. 그러면 디스크나 네트워크에 대기하는 동안 페이지가 차단됩니다. 브라우저가 클립보드 액세스를 요청하는 동안 페이지를 차단하도록 요구하는 권한이 여기에 추가된다고 상상해 보세요. 동시에, 클립보드 상호작용을 위해 `document.execCommand()` 주변에 배치된 권한은 느슨하게 정의되며 브라우저마다 다릅니다.
+
+[Async Clipboard API](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api)는 페이지를 차단하지 않는 잘 정의된 권한 모델을 제공하여 이러한 문제를 해결합니다. Safari는 최근 [버전 13.1에서 이에 대한 지원](https://webkit.org/blog/10855/)을 발표했습니다. 이를 통해 주요 브라우저는 기본 수준의 지원을 제공합니다. 이 글을 쓰는 시점에서 Firefox는 텍스트만 지원합니다. 이미지 지원은 일부 브라우저에서 PNG로 제한됩니다. API 사용에 관심이 있는 경우 계속하기 전에 [브라우저 지원 표를 참조](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)하세요.
+
+{% Aside %} Async Clipboard API는 텍스트 및 이미지 처리로 제한됩니다. Chrome 84에는 클립보드가 임의의 데이터 유형을 처리할 수 있는 실험적 기능이 도입되었습니다. {% endAside %}
+
+## 복사: 클립보드에 데이터 쓰기
+
+### writeText()
+
+텍스트를 클립보드에 복사하려면 `writeText()`를 호출하세요. 이 API는 비동기식이므로 `writeText()` 함수는 전달된 텍스트가 성공적으로 복사되었는지 여부에 따라 확인하거나 거부하는 Promise를 반환합니다.
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+### write()
+
+사실, `writeText()`는 이미지를 클립보드에 복사할 수 있도록 해주는 일반 `write()` 메서드의 편의 메서드일 뿐입니다. `writeText()`와 마찬가지로 비동기식이며 Promise를 반환합니다.
+
+클립보드에 이미지를 쓰려면 이미지가 [`blob`](https://developer.mozilla.org/docs/Web/API/blob)으로 필요합니다. 이를 수행하는 한 가지 방법은 `fetch()`를 사용하여 서버에서 이미지를 요청한 다음 응답에서 [`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob)을 호출하는 것입니다.
+
+서버에서 이미지를 요청하는 것은 여러 가지 이유로 바람직하지 않거나 불가능할 수 있습니다. 다행히 캔버스에 이미지를 추출하고 캔버스의 [`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob) 메서드를 호출할 수도 있습니다.
+
+다음으로, `ClipboardItem` 객체의 배열을 `write()` 메서드에 매개변수로 전달합니다. 현재는 한 번에 하나의 이미지만 전달할 수 있지만 향후 여러 이미지에 대한 지원을 추가할 수 있기를 바랍니다. `ClipboardItem`은 이미지의 MIME 유형을 키로 사용하고 blob을 값으로 사용하는 객체를 취합니다. `fetch()` 또는 `canvas.toBlob()`에서 얻은 Blob 객체의 경우 `blob.type` 속성에는 이미지에 대한 올바른 MIME 유형이 자동으로 포함됩니다.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} Safari(WebKit)는 사용자 활성화를 Chromium(Blink)과 다르게 취급합니다([WebKit 버그 #222262](https://bugs.webkit.org/show_bug.cgi?id=222262) 참조). Safari의 경우 결과가 `ClipboardItem`에 할당되는 promise에서 모든 비동기 작업을 실행합니다.
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### 복사 이벤트
+
+사용자가 클립보드 복사를 시작하는 경우 텍스트가 아닌 데이터가 자동을 Blob으로 제공됩니다. [`copy` 이벤트](https://developer.mozilla.org/docs/Web/API/Document/copy_event)에는 이미 올바른 형식의 항목이 있는 `clipboardData` 속성이 포함되어 있어 수동으로 Blob을 만들 필요가 없습니다. `preventDefault()`를 호출하여 기본 동작 대신 고유한 논리가 적용되도록 만든 다음, 내용을 클립보드에 복사합니다. 이 예제에서 다루지 않은 것은 Clipboard API가 지원되지 않을 때 이전 API로 대체하는 방법입니다. 이 문서 뒷부분의 [기능 감지](#feature-detection)에서 이에 대해 설명하겠습니다.
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Image copied.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## 붙여넣기: 클립보드에서 데이터 읽기
+
+### readText()
+
+클립보드에서 텍스트를 읽으려면 `navigator.clipboard.readText()`를 호출하고 반환된 Promise가 해결될 때까지 기다립니다.
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+### read()
+
+`navigator.clipboard.read()` 메서드도 비동기식이며 Promise를 반환합니다. 클립보드에서 이미지를 읽으려면 [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem) 객체 목록을 가져온 다음 반복합니다.
+
+각 `ClipboardItem`은 다른 유형의 내용을 가지고 있을 수 있으므로 `for...of` 루프를 다시 사용하여 유형 목록을 반복해야 합니다. 각 유형에 대해, 현재 유형을 인수로 사용한 `getType()` 메서드를 호출하여 해당 Blob을 가져옵니다. 이전과 마찬가지로 이 코드는 이미지에 연결되지 않으며 향후 다른 파일 형식에서도 작동합니다.
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### 붙여넣은 파일 작업
+
+사용자가 <kbd>ctrl</kbd> + <kbd>c</kbd> 및 <kbd>ctrl</kbd> + <kbd>v</kbd>와 같은 클립보드 키보드 단축키를 사용할 수 있으면 유용합니다. Chromium은 아래에 설명된 대로 클립보드에 *읽기 전용* 파일을 노출합니다. 이것은 사용자가 운영 체제의 기본 붙여넣기 단축키를 누르거나 사용자가 브라우저 메뉴 모음에서 **편집**을 클릭한 다음 **붙여넣기**를 클릭할 때 트리거됩니다. 더 이상 배관 코드가 필요하지 않습니다.
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Read the file's contents, assuming it's a text file.
+  // There is no way to write back to it.
+  console.log(await file.text());
+});
+```
+
+### 붙여넣기 이벤트
+
+앞서 언급했듯이 Clipboard API와 함께 작동하는 이벤트를 도입할 계획이 있지만 지금은 기존 `paste` 이벤트를 사용할 수 있습니다. 이 이벤트는 클립보드 텍스트를 읽기 위한 새로운 비동기 메서드와 잘 작동합니다. `copy` 이벤트와 마찬가지로 `preventDefault()`를 호출하는 것을 잊지 마세요.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+`copy` 이벤트와 마찬가지로 Clipboard API가 지원되지 않을 때 이전 API로 대체하는 동작은 [기능 감지](#feature-detection)에서 다룹니다.
+
+## 여러 파일 형식 처리
+
+대부분의 구현은 단일 잘라내기 또는 복사 작업을 위해 클립보드에 여러 데이터 형식을 넣습니다. 여기에는 두 가지 이유가 있습니다. 앱 개발자 입장에서는 사용자가 텍스트나 이미지를 복사하려는 앱의 기능을 알 수 있는 방법이 없으며 많은 애플리케이션이 구조화된 데이터를 일반 텍스트로 붙여넣기를 지원합니다. 이는 **붙여넣기 및 스타일 일치** 또는 **서식 없이 붙여넣기**와 같은 이름을 가진 **편집** 메뉴 항목으로 사용자에게 제시됩니다.
+
+다음 예제는 이를 수행하는 방법을 보여줍니다. 이 예제에서는 `fetch()`를 사용하여 이미지 데이터를 가져오지만 [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas) 또는 [File System Access API](/file-system-access/)에서 가져올 수도 있습니다.
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png');
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## 보안 및 권한
+
+클립보드 액세스는 항상 브라우저에 보안 문제를 야기시킵니다. 적절한 권한이 없으면 페이지는 모든 종류의 악성 콘텐츠를 사용자의 클립보드에 자동으로 복사하여, 붙여넣을 때 치명적인 결과를 초래할 수 있습니다. `rm -rf /` 또는 [압축 해제 폭탄 이미지](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html)를 클립보드에 자동으로 복사하는 웹 페이지를 상상해 보세요.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="사용자에게 클립보드 권한을 요청하는 브라우저 메시지", width="800", height="338" %}<figcaption> Clipboard API에 대한 권한 요청 메시지.</figcaption></figure>
+
+웹 페이지에 클립보드에 대한 무제한 읽기 액세스 권한을 부여하는 것은 훨씬 큰 문제를 일으킵니다. 사용자가 정기적으로 암호 및 개인 정보와 같은 민감한 정보를 클립보드에 복사한다면 사용자 모르게 모든 페이지에서 이를 읽을 수 있게 됩니다.
+
+많은 새로운 API와 마찬가지로 Clipboard API는 HTTPS를 통해 제공되는 페이지에만 지원됩니다. 악용을 방지하기 위해 페이지가 활성 탭일 때만 클립보드 액세스가 허용됩니다. 활성 탭의 페이지는 권한을 요청하지 않고 클립보드에 쓸 수 있지만 클립보드에서 읽기에는 항상 권한이 필요합니다.
+
+복사 및 붙여넣기 권한이 [Permissions API](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web)에 추가되었습니다. `clipboard-write` 권한은 페이지가 활성 탭일 때 자동으로 부여됩니다. `clipboard-read` 권한을 요청해야 하며, 이를 위해 클립보드에서 데이터 읽기를 시도할 수 있습니다. 아래 코드는 후자를 보여줍니다.
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Will be 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Listen for changes to the permission state
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+`allowWithoutGesture` 옵션을 사용하여 잘라내기 또는 붙여넣기를 호출하기 위해 사용자 제스처가 필요한지 여부를 제어할 수 있습니다. 이 값의 기본값은 브라우저에 따라 다르므로 항상 포함해야 합니다.
+
+바로 여기에서 Clipboard API의 비동기 특성이 매우 유용합니다. 클립보드 데이터를 읽거나 쓰려고 하면 아직 권한이 부여되지 않은 경우 사용자에게 권한을 묻는 메시지가 자동으로 표시됩니다. API는 promise 기반이므로 이는 완전히 투명하며 사용자가 클립보드 권한을 거부하면 promise가 거부되어 페이지가 적절하게 응답할 수 있습니다.
+
+Chrome은 페이지가 활성 탭일 때만 클립보드 액세스를 허용하므로 DevTools에 직접 붙여넣을 경우 여기의 일부 예가 실행되지 않는다는 것을 알게 될 것입니다. DevTools 자체가 활성 탭이기 때문입니다. 요령: `setTimeout()`을 사용하여 클립보드 액세스를 연기한 다음, 함수가 호출되기 전에 페이지 내부를 빠르게 클릭하여 포커스를 옮깁니다.
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## 권한 정책 통합
+
+iframe에서 API를 사용하려면 다양한 브라우저 기능과 API를 선택적으로 활성화 및 비활성화할 수 있는 메커니즘을 정의하는 [권한 정책](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)으로 이를 활성화해야 합니다. 구체적으로, 앱의 필요에 따라 `clipboard-read` 또는 `clipboard-write` 중 하나 또는 둘 모두를 전달해야 합니다.
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## 기능 감지
+
+모든 브라우저를 지원하면서 Async Clipboard API를 사용하려면 `navigator.clipboard`에 대해 테스트하고 이전 방법으로 대체하세요. 예를 들어, 다음은 다른 브라우저를 포함하도록 붙여넣기를 구현할 수 있는 방법입니다.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+이것이 전부는 아닙니다. Async Clipboard API 이전에는 웹 브라우저 전반에서 다양한 복사 및 붙여넣기 구현이 혼합되어 있었습니다. 대부분의 브라우저에서 브라우저 자체의 복사 및 붙여넣기는 `document.execCommand('copy')` 및 `document.execCommand('paste')`를 사용하여 트리거할 수 있습니다. 복사할 텍스트가 DOM에 없는 문자열이면 DOM에 삽입하고 선택해야 합니다.
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+});
+```
+
+Internet Explorer에서는 `window.clipboardData`를 통해 클립보드에 액세스할 수도 있습니다. 책임감 있게 권한을 요청하는 일부로서, 클릭 이벤트와 같은 사용자 제스처 내에서 액세스하는 경우 권한 부여 메시지가 표시되지 않습니다.
+
+## 데모
+
+아래 데모에서, 또는 [Glitch에서 직접](https://async-clipboard-api.glitch.me/) Async Clipboard API를 사용해볼 수 있습니다.
+
+첫 번째 예는 클립보드 안팎으로 텍스트를 이동하는 방법을 보여줍니다.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+이미지로 API를 시도하려면 이 데모를 사용하세요. PNG만 지원되며 [일부 브라우저](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility)에서만 지원된다는 점을 상기하세요.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 다음 단계
+
+Chrome은 [Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)에 맞춰진 단순화된 이벤트로 Asynchronous Clipboard API를 확장하기 위해 적극적으로 노력하고 있습니다. 잠재적인 위험 때문에 Chrome은 신중하게 진행하고 있습니다. Chrome의 진행 상황에 대한 최신 정보를 얻으려면 이 문서와 [블로그](/blog/)에서 업데이트를 확인하세요.
+
+현재, Clipboard API에 대한 지원은 [여러 브라우저](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)에서 사용할 수 있습니다.
+
+복사 및 붙여넣기 작업을 즐기세요!
+
+## 관련된 링크
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## 감사의 말
+
+Asynchronous Clipboard API는 [Darwin Huang](https://www.linkedin.com/in/darwinhuang/)과 [Gary Kačmarčík](https://www.linkedin.com/in/garykac/)에 의해 구현되었습니다. Darwin은 데모도 제공했습니다. 이 글을 검토해 준 [Kyarik](https://github.com/kyarik)와 Gary Kačmarčík에게 다시 한 번 감사의 말을 전합니다.
+
+[Unsplash](https://unsplash.com/photos/7iSEHWsxPLw)에서 [Markus Winkler](https://unsplash.com/@markuswinkler)가 영웅 이미지 제공.
diff --git a/src/site/content/ko/blog/bfcache/index.md b/src/site/content/ko/blog/bfcache/index.md
new file mode 100644
index 00000000000..6e9470b1976
--- /dev/null
+++ b/src/site/content/ko/blog/bfcache/index.md
@@ -0,0 +1,347 @@
+---
+layout: post
+title: 캐시 뒤로/앞으로
+subhead: 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지를 즉시 로드하도록 최적화하십시오.
+description: |2
+
+  브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지를 즉시 로드하도록 최적화하는 방법을 알아보세요.
+authors:
+  - philipwalton
+date: 2020-11-10
+updated: 2021-11-15
+hero: image/admin/Qoeb8x3a11BdGgRzYJbY.png
+alt: 뒤로 및 앞으로 버튼
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+뒤로/앞으로 캐시(또는 bfcache)는 즉각적인 뒤로 및 앞으로 탐색을 가능하게 하는 브라우저 최적화입니다. 사용자, 특히 느린 네트워크나 장치를 사용하는 사용자의 검색 경험을 크게 향상시킵니다.
+
+웹 개발자는 사용자가 이점을 누릴 수 있도록 모든 브라우저에서 [bfcache에 페이지를 최적화](#optimize-your-pages-for-bfcache)하는 방법을 이해하는 것이 중요합니다.
+
+## 브라우저 호환성
+
+bfcache는 데스크톱과 모바일에서 수년 동안 [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching)와 [Safari](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) 모두에서 지원되었습니다.
+
+버전 86부터 Chrome은 소수의 사용자를 위해 Android에서 [사이트 간](/same-site-same-origin/) 탐색을 위해 bfcache를 활성화했습니다. 후속 릴리스에서는 추가 지원이 천천히 롤아웃되었습니다. 버전 96부터 bfcache는 데스크톱 및 모바일의 모든 Chrome 사용자가 사용할 수 있습니다.
+
+## bfcache 기본 사항
+
+bfcache는 사용자가 다른 곳으로 이동할 때 페이지의 전체 스냅샷(JavaScript 힙 포함)을 저장하는 메모리 내 캐시입니다. 전체 페이지를 메모리에 저장하면 사용자가 돌아가기로 결정하면 브라우저에서 빠르고 쉽게 페이지를 복원할 수 있습니다.
+
+웹사이트를 방문하고 다른 페이지로 이동하기 위해 링크를 클릭한 적이 몇 번이나 있었는데, 원하는 페이지가 아님을 깨닫고 뒤로 버튼을 클릭했습니까? 그 순간에 bfcache는 이전 페이지가 로드되는 속도에 큰 차이를 만들 수 있습니다.
+
+<div class="table-wrapper">
+  <table data-alignment="top">
+    <tr>
+      <td width="30%">
+        <strong>bfcache가 활성화되지 <em>않은 경우</em></strong>
+      </td>
+      <td>이전 페이지를 로드하기 위해 새 요청이 시작되고 해당 페이지가 반복 방문에 대해 얼마나 <a href="/reliable/#the-options-in-your-caching-toolbox">최적화</a>되었는지에 따라 브라우저는 리소스의 일부(또는 전체)를 다시 다운로드하고, 다시 구문 분석하고, 다시 실행해야 할 수 있습니다. 방금 다운로드했습니다.</td>
+    </tr>
+    <tr>
+      <td><strong>bfcache가 활성화된 <em>경우</em></strong></td>
+      <td>이전 페이지를 로드하는 것은 <em>본질적으로 즉각적입니다</em> . 네트워크에 전혀 연결하지 않고도 전체 페이지를 메모리에서 복원할 수 있기 때문입니다.</td>
+    </tr>
+  </table>
+</div>
+
+bfcache가 작동하는 동영상을 확인하여 탐색 속도를 높일 수 있는지 알아보십시오.
+
+{% YouTube 'cuPsdRckkF0' %}
+
+위의 비디오에서 bfcache가 있는 예제는 없는 예제보다 훨씬 빠릅니다.
+
+bfcache는 탐색 속도를 높일 뿐만 아니라 리소스를 다시 다운로드할 필요가 없기 때문에 데이터 사용량도 줄입니다.
+
+Chrome 사용 데이터에 따르면 데스크톱의 탐색 10개 중 1개, 모바일의 탐색 5개 중 1개가 뒤로 또는 앞으로 이동하는 것으로 나타났습니다. bfcache가 활성화되면 브라우저는 데이터 전송과 매일 수십억 개의 웹 페이지를 로드하는 데 소요되는 시간을 없앨 수 있습니다!
+
+### "캐시" 작동 방식
+
+bfcache에서 사용하는 "캐시"는 [HTTP 캐시](/http-cache/)와 다릅니다(반복 탐색 속도를 높이는 데 유용함). bfcache는 메모리에 있는 전체 페이지의 스냅샷(JavaScript 힙 포함)인 반면 HTTP 캐시에는 이전에 작성된 요청에 대한 응답만 포함됩니다. 페이지를 로드하는 데 필요한 모든 요청이 HTTP 캐시에서 이행될 수 있는 경우는 매우 드물기 때문에 bfcache 복원을 사용한 반복 방문은 가장 잘 최적화된 비 bfcache 탐색보다 항상 빠릅니다.
+
+그러나 메모리에 페이지의 스냅샷을 만드는 것은 진행 중인 코드를 가장 잘 보존하는 방법의 측면에서 약간의 복잡성을 수반합니다. 예를 들어, 페이지가 bfcache에 있는 동안 시간 초과에 도달한 `setTimeout()` 호출을 어떻게 처리합니까?
+
+대답은 브라우저가 보류 중인 타이머나 확인되지 않은 약속 실행을 일시 중지하고(기본적으로 [JavaScript 작업 대기열](https://html.spec.whatwg.org/multipage/webappapis.html#task-queue)의 모든 보류 중인 작업) bfcache에서 페이지가 복원될 때(또는 그러한 경우) 처리 작업을 다시 시작한다는 것입니다.
+
+어떤 경우에는 이것은 상당히 낮은 위험(예: 시간 초과 또는 약속)이지만 다른 경우에는 매우 혼란스럽거나 예기치 않은 동작으로 이어질 수 있습니다. 예를 들어 브라우저가 [IndexedDB 트랜잭션](https://developer.mozilla.org/docs/Web/API/IDBTransaction)의 일부로 필요한 작업을 일시 중지하면 동일한 출처의 다른 열린 탭에 영향을 미칠 수 있습니다(동일한 IndexedDB 데이터베이스는 여러 탭에서 동시에 액세스할 수 있기 때문). 결과적으로 브라우저는 일반적으로 IndexedDB 트랜잭션 중간에 페이지를 캐시하거나 다른 페이지에 영향을 줄 수 있는 API를 사용하지 않습니다.
+
+다양한 API 사용이 페이지의 bfcache 자격에 미치는 영향에 대한 자세한 내용은 아래의 [bfcache에 맞게 페이지 최적화](#optimize-your-pages-for-bfcache)를 참조하세요.
+
+### bfcache를 관찰하는 API
+
+bfcache는 브라우저가 자동으로 수행하는 최적화이지만 개발자는 [페이지를 최적화](#optimize-your-pages-for-bfcache)하고 그에 따라 [모든 메트릭 또는 성능 측정을 조정할 수 있도록 언제 발생하는지 아는 것](#implications-for-analytics-and-performance-measurement)이 여전히 중요합니다.
+
+bfcache를 관찰하는 데 사용되는 주요 이벤트는 [페이지 전환 이벤트](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent)(`pageshow` 및 `pagehide`)로, bfcache가 있는 동안 계속 존재했으며 [현재 사용 중인 거의 모든 브라우저](https://caniuse.com/page-transition-events)에서 지원됩니다.
+
+새로운 [페이지 수명 주기](https://developer.chrome.com/blog/page-lifecycle-api/) 이벤트(`freeze` 및 `resume`)는 페이지가 bfcache에 들어오거나 나갈 때뿐만 아니라 다른 상황에서도 전달됩니다. 예를 들어 CPU 사용량을 최소화하기 위해 백그라운드 탭이 정지되는 경우입니다. 페이지 수명 주기 이벤트는 현재 Chromium 기반 브라우저에서만 지원됩니다.
+
+#### bfcache에서 페이지가 복원될 때 관찰
+
+`pageshow` 이벤트는 페이지가 처음 로드될 때와 페이지가 bfcache에서 복원될 때 `load` 이벤트 직후에 발생합니다. `pageshow` 이벤트에는 <code>[persisted](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent/persisted)</code> 속성이 있으며, 페이지가 bfcache에서 복원된 경우 <code>true</code>이고 그렇지 않은 경우 <code>false</code>입니다. <code>persisted</code> 속성을 사용하여 일반 페이지 로드와 bfcache 복원을 구별할 수 있습니다. 예시:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    console.log('This page was restored from the bfcache.');
+  } else {
+    console.log('This page was loaded normally.');
+  }
+});
+```
+
+페이지 수명 주기 API를 지원하는 브라우저에서 `resume` 이벤트는 `pageshow` 이벤트 직전에 페이지가 bfcache에서 복원될 때도 발생하지만, 사용자가 고정된 배경 탭을 다시 방문할 때도 발생합니다. 페이지 고정 후(bfcache에 페이지 포함) 페이지 상태를 복원하려면 `resume` 이벤트를 사용할 수 있지만 사이트의 bfcache 적중률을 측정하려면 `pageshow` 이벤트를 사용해야 합니다. 어떤 경우에는 둘 다 사용해야 할 수도 있습니다.
+
+{% Aside %} bfcache 측정 권장사항에 대한 자세한 내용은 [성능 및 분석에 대한 의미](#how-bfcache-affects-analytics-and-performance-measurement)를 참조하세요. {% endAside %}
+
+#### 페이지가 bfcache에 들어갈 때 관찰
+
+`pagehide` 이벤트는 `pageshow` 이벤트에 대응합니다. `pageshow` 이벤트는 페이지가 정상적으로 로드되거나 bfcache에서 복원될 때 발생합니다. `pagehide` 이벤트는 페이지가 정상적으로 언로드되거나 브라우저가 이를 bfcache에 넣으려고 할 때 발생합니다.
+
+`pagehide` 이벤트에도 `persisted` 속성이 있으며 이것이 `false` 이면 페이지가 bfcache에 들어가지 않을 것이라고 확신할 수 있습니다. 그러나 `persisted` 속성이 `true` 페이지가 캐시된다는 보장이 없습니다. 즉, 브라우저 *가 페이지를 캐시하려고* 하지만 캐시를 불가능하게 하는 요인이 있을 수 있습니다.
+
+```js
+window.addEventListener('pagehide', (event) => {
+  if (event.persisted === true) {
+    console.log('This page *might* be entering the bfcache.');
+  } else {
+    console.log('This page will unload normally and be discarded.');
+  }
+});
+```
+
+유사하게, `freeze` 이벤트는 `pagehide` 이벤트 직후에 실행되지만(이벤트의 `persisted` 속성이 `true`인 경우), 다시 말하지만 이는 브라우저가 페이지를 캐시*하려고 한다는 의미*일 뿐입니다. 아래에 설명된 여러 가지 이유로 여전히 이를 버려야 할 수 있습니다.
+
+## bfcache에 맞게 페이지 최적화
+
+모든 페이지가 bfcache에 저장되는 것은 아니며 페이지가 거기에 저장되더라도 무기한 유지되지는 않습니다. 개발자가 캐시 적중률을 최대화하기 위해 페이지가 bfcache에 적합한(및 부적격) 이유를 이해하는 것이 중요합니다.
+
+다음 섹션에서는 가능한 한 브라우저가 페이지를 캐시할 수 있도록 하는 모범 사례에 대해 설명합니다.
+
+### `unload` 이벤트 사용 금지
+
+모든 브라우저에서 bfcache를 최적화하는 가장 중요한 방법은 `unload` 이벤트를 사용하지 않는 것입니다. 항상!
+
+`unload` 이벤트는 bfcache보다 앞서고 `unload` 이벤트가 발생한 후 페이지가 계속 존재하지 않을 것이라는 (합리적) 가정 하에 인터넷 상의 많은 페이지가 작동하기 때문에 브라우저에 문제가 있습니다. *또한*, 이러한 페이지의 대부분은 사용자가 탐색할 때마다 `unload` 이벤트가 발생한다는 가정 하에 작성되었기 때문에 더 이상 사실이 아니며 [오랫동안 사실이 아니었습니다](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event).
+
+따라서 브라우저는 딜레마에 직면해 있으며 사용자 경험을 개선할 수 있지만 페이지가 깨질 위험이 있는 것 중에서 선택해야 합니다.
+
+`unload` 리스너를 추가하는 경우 bfcache에 부적격 페이지를 선택했습니다. 이는 덜 위험하지만 *많은* 페이지의 자격을 박탈합니다. `unload` 이벤트 리스너를 사용하여 일부 페이지를 캐시하려고 시도하지만 잠재적인 파손을 줄이기 위해 `unload` 이벤트를 실행하지 않아 이벤트를 매우 신뢰할 수 없게 만듭니다.
+
+`unload` 이벤트를 사용하는 대신 페이지 `pagehide` 이벤트를 사용하십시오. `pagehide` 이벤트 모든 경우에 화재 `unload` 페이지가 bfcache에 넣어 때 이벤트가 현재 발사, *또한* 발생합니다.
+
+실제로, [Lighthouse v6.2.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.2.0)는 <code>[no-unload-listeners audit](https://github.com/GoogleChrome/lighthouse/pull/11085)</code>를 추가했는데, 이는 (타사 라이브러리의 JavaScript를 포함하여) 페이지에 있는 JavaScript가 <code>unload</code> 이벤트 수신기를 추가할 경우 개발자에게 경고합니다.
+
+{% Aside 'warning' %} `unload` 이벤트 리스너를 추가하지 마세요! 대신 페이지 `pagehide` 이벤트를 사용하십시오. `unload` 이벤트 리스너를 추가하면 Firefox에서 사이트 속도가 느려지고 대부분의 경우 Chrome 및 Safari에서 코드가 실행되지 않습니다. {% endAside %}
+
+#### 조건부로 `beforeunload` 리스너만 추가
+
+`beforeunload` 이벤트는 Chrome 또는 Safari에서 페이지를 bfcache에 부적격하게 만들지 않지만 Firefox에서는 부적격하게 만들므로 절대적으로 필요한 경우가 아니면 사용하지 마십시오.
+
+`unload` 이벤트와 달리 `beforeunload`에 대한 합법적인 용도가 있습니다. 예를 들어 저장하지 않은 변경 사항이 있음을 사용자에게 경고하려는 경우 사용자가 페이지를 떠나면 손실됩니다. 이 경우 `beforeunload` 리스너를 추가하고 저장되지 않은 변경 사항이 저장된 직후 제거하는 것이 좋습니다.
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('beforeunload', (event) => {
+  if (pageHasUnsavedChanges()) {
+    event.preventDefault();
+    return event.returnValue = 'Are you sure you want to exit?';
+  }
+});
+```
+
+{% CompareCaption %} 위의 코드는 `beforeunload` 리스너를 추가합니다. {% endCompareCaption %} {% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  return event.returnValue = 'Are you sure you want to exit?';
+};
+
+// A function that invokes a callback when the page has unsaved changes.
+onPageHasUnsavedChanges(() => {
+  window.addEventListener('beforeunload', beforeUnloadListener);
+});
+
+// A function that invokes a callback when the page's unsaved changes are resolved.
+onAllChangesSaved(() => {
+  window.removeEventListener('beforeunload', beforeUnloadListener);
+});
+```
+
+{% CompareCaption %} 위의 코드는 `beforeunload` 리스너를 추가합니다(필요하지 않은 경우 제거). {% endCompareCaption %} {% endCompare %}
+
+### window.opener 참조 피하기
+
+일부 브라우저(Chromium 기반 브라우저 포함)에서 <code>[window.open()](https://developer.mozilla.org/docs/Web/API/Window/open)</code> 또는 <code>[target=_blank](https://developer.mozilla.org/docs/Web/HTML/Element/a#target)</code>가 있는 링크에서 ([버전 88에 대해 Chromium 기반 브라우저 우선](https://crbug.com/898942))를 사용하여 페이지를 열었을 경우(<code>[rel="noopener"](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener)</code>를 지정하지 않고) 열린 페이지의 창 오브젝트에 대한 참조가 열립니다.
+
+[보안 위험이 있을](https://mathiasbynens.github.io/rel-noopener/) 뿐만 아니라 null이 아닌 <code>[window.opener](https://developer.mozilla.org/docs/Web/API/Window/opener)</code> 참조가 있는 페이지는 bfcache에 안전하게 넣을 수 없습니다. 액세스를 시도하는 모든 페이지가 손상될 수 있습니다.
+
+`rel="noopener"`를 사용하여 `window.opener` 참조를 생성하지 않는 것이 가장 좋습니다. 사이트에서 창을 열고 <code>[window.postMessage()](https://developer.mozilla.org/docs/Web/API/Window/postMessage)</code>를 통해 창을 제어하거나 창 개체를 직접 참조해야 하는 경우 열린 창 둘 다 오프너도 bfcache에 적합하지 않습니다.
+
+### 사용자가 다른 곳으로 이동하기 전에 항상 열려 있는 연결 닫기
+
+위에서 언급했듯이 페이지를 bfcache에 넣으면 모든 예약된 JavaScript 작업이 일시 중지되고 페이지가 캐시에서 제거될 때 다시 시작됩니다.
+
+이러한 예약된 JavaScript 작업이 DOM API에만 액세스하거나 현재 페이지에만 격리된 다른 API에 액세스하는 경우 페이지가 사용자에게 표시되지 않는 동안 이러한 작업을 일시 중지해도 문제가 발생하지 않습니다.
+
+그러나 이러한 작업이 동일한 출처의 다른 페이지에서도 액세스할 수 있는 API에 연결된 경우(예: IndexedDB, Web Locks, WebSockets 등) 이러한 작업을 일시 중지하면 다른 탭의 코드가 실행되지 않을 수 있으므로 문제가 될 수 있습니다. .
+
+결과적으로 일부 브라우저는 다음 시나리오에서 페이지를 bfcache에 넣지 않습니다.
+
+- [IndexedDB 연결](https://developer.mozilla.org/docs/Web/API/IDBOpenDBRequest)이 열려 있는 페이지
+- 진행 중인 [fetch()](https://developer.mozilla.org/docs/Web/API/Fetch_API) 또는 [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)가 있는 페이지
+- [열린 WebSocket](https://developer.mozilla.org/docs/Web/API/WebSocket) 또는 [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) 연결이 있는 페이지
+
+`pagehide` 또는 `freeze` 이벤트 중에 항상 연결을 닫고 관찰자를 제거하거나 연결을 끊는 것이 가장 좋습니다. 그러면 브라우저가 열려 있는 다른 탭에 영향을 줄 위험 없이 페이지를 안전하게 캐시할 수 있습니다.
+
+그런 다음 페이지가 bfcache에서 복원되면 해당 API를 다시 열거나 다시 연결할 수 있습니다(`pageshow` 또는 `resume` 이벤트).
+
+다음 예는 `pagehide` 이벤트 수신기에서 열린 연결을 닫아서 IndexedDB를 사용할 때 페이지가 bfcache에 적합한지 확인하는 방법을 보여줍니다.
+
+```js
+let dbPromise;
+function openDB() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open('my-db', 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
+      req.onerror = () => reject(req.error);
+      req.onsuccess = () => resolve(req.result);
+    });
+  }
+  return dbPromise;
+}
+
+// Close the connection to the database when the user is leaving.
+window.addEventListener('pagehide', () => {
+  if (dbPromise) {
+    dbPromise.then(db => db.close());
+    dbPromise = null;
+  }
+});
+
+// Open the connection when the page is loaded or restored from bfcache.
+window.addEventListener('pageshow', () => openDB());
+```
+
+### bfcache 복원 후 오래되거나 민감한 데이터 업데이트
+
+사이트에서 사용자 상태(특히 민감한 사용자 정보)를 유지하는 경우 bfcache에서 페이지를 복원한 후 해당 데이터를 업데이트하거나 지워야 합니다.
+
+예를 들어, 사용자가 체크아웃 페이지로 이동한 다음 장바구니를 업데이트하는 경우 bfcache에서 오래된 페이지가 복원되면 뒤로 탐색 시 잠재적으로 오래된 정보가 표시될 수 있습니다.
+
+더 중요한 또 다른 예는 사용자가 공용 컴퓨터의 사이트에서 로그아웃하고 다음 사용자가 뒤로 버튼을 클릭하는 경우입니다. 이는 사용자가 로그아웃할 때 지워졌다고 가정한 개인 데이터를 잠재적으로 노출할 수 있습니다.
+
+`event.persisted`가 `true`인 경우 `pageshow` 이벤트 이후에 항상 페이지를 업데이트하는 것이 좋습니다.
+
+`pageshow` 이벤트에 사이트별 쿠키가 있는지 확인하고 쿠키가 없으면 다시 로드합니다.
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted && !document.cookie.match(/my-cookie/)) {
+    // Force a reload if the user has logged out.
+    location.reload();
+  }
+});
+```
+
+### 페이지가 캐시 가능한지 테스트
+
+Chrome DevTools는 페이지를 테스트하여 bfcache에 최적화되어 있는지 확인하고 해당 페이지가 자격을 갖추지 못하게 하는 문제를 식별하는 데 도움이 될 수 있습니다.
+
+특정 페이지를 테스트하려면 Chrome에서 해당 페이지로 이동한 다음 DevTools에서 **애플리케이션** &gt; **캐시 뒤로-앞으로**로 이동합니다. 다음으로 **테스트 실행** 버튼을 클릭하면 DevTools가 페이지를 bfcache에서 복원할 수 있는지 여부를 확인하기 위해 이전 및 뒤로 탐색을 시도합니다.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/QafTzULUNflaSh77zBgT.png", alt="DevTools의 캐시 패널 뒤로-앞으로", width="800", height="313" %}
+
+{% Aside %} DevTools의 뒤로/앞으로 캐시 기능은 현재 개발 중입니다. 개발자는 Chrome Canary에서 페이지를 테스트하여 최신 버전의 DevTools를 실행하고 최신 bfcache 권장 사항을 받을 것을 적극 권장합니다. {% endAside %}
+
+성공하면 패널에서 "역방향 캐시에서 복원됨"을 보고합니다.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vPwN0z95ZBTiwZIpdZT4.png", alt="DevTools 보고 페이지가 bfcache에서 성공적으로 복원되었습니다", width="800", height="313" %}
+
+실패하면 패널에 페이지가 복원되지 않았으며 이유가 나열됩니다. 그 이유가 개발자로서 해결할 수 있는 것이라면 다음과 같이 표시됩니다.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/ji3ew4DoP6joKdJvtGwa.png", alt="DevTools가 bfcache에서 페이지 복원 실패 보고", width="800", height="313" %}
+
+위의 스크린샷에서 `unload` 이벤트 리스너를 사용하면 페이지가 bfcache에 [적합하지 않습니다](/bfcache/#never-use-the-unload-event). 대신 `unload`에서 `pagehide`를 사용하여 이 문제를 해결할 수 있습니다.
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('unload', ...);
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.addEventListener('pagehide', ...);
+```
+
+{% endCompare %}
+
+## bfcache가 분석 및 성능 측정에 미치는 영향
+
+분석 도구를 사용하여 사이트 방문을 추적하는 경우 Chrome에서 더 많은 사용자를 위해 bfcache를 계속 활성화함에 따라 보고된 총 페이지뷰 수가 감소하는 것을 알 수 있습니다.
+
+사실, 대부분의 인기 있는 분석 라이브러리가 bfcache 복원을 새 페이지뷰로 추적하지 않기 때문에 bfcache를 구현하는 다른 브라우저의 페이지뷰를 *이미* 과소보고하고 있을 수 있습니다.
+
+Chrome에서 bfcache를 활성화하여 페이지뷰 수가 감소하지 않도록 하려면 `pageshow` 이벤트를 듣고  `persisted` 속성을 확인하여 bfcache 복원을 페이지뷰(권장)로 보고할 수 있습니다.
+
+다음 예는 Google Analytics로 이 작업을 수행하는 방법을 보여줍니다. 로직은 다른 분석 도구와 유사해야 합니다.
+
+```js
+// Send a pageview when the page is first loaded.
+gtag('event', 'page_view');
+
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted === true) {
+    // Send another pageview if the page is restored from bfcache.
+    gtag('event', 'page_view');
+  }
+});
+```
+
+### 성능 측정
+
+bfcache는 또한 [필드에서](/user-centric-performance-metrics/#in-the-field) 수집된 성능 메트릭, 특히 페이지 로드 시간을 측정하는 메트릭에 부정적인 영향을 미칠 수 있습니다.
+
+bfcache 탐색은 새 페이지 로드를 시작하지 않고 기존 페이지를 복원하므로 bfcache가 활성화되면 수집된 총 페이지 로드 수가 감소합니다. 그러나 중요한 것은 bfcache 복원으로 대체되는 페이지 로드가 데이터 세트에서 가장 빠른 페이지 로드 중 일부였을 가능성이 있다는 것입니다. 이는 정의상 뒤로 및 앞으로 탐색이 반복 방문이고 반복 페이지 로드가 일반적으로 첫 번째 방문자의 페이지 로드보다 빠르기 때문입니다(앞서 언급한 [HTTP 캐싱](/http-cache/)으로 인해).
+
+결과적으로 데이터 세트의 빠른 페이지 로드가 줄어들어 사용자가 경험하는 성능이 향상되었을 수 있음에도 불구하고 분포가 더 느리게 왜곡될 수 있습니다!
+
+이 문제를 처리하는 몇 가지 방법이 있습니다. 하나는 모든 페이지 로드 메트릭에 각각의 [탐색 유형(](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types)`navigate` , `reload` , `back_forward` 또는 `prerender`)을 주석으로 추가하는 것입니다. 이렇게 하면 전체 분포가 음수로 치우치더라도 이러한 탐색 유형 내에서 성능을 계속 모니터링할 수 있습니다. 이 접근 방식은 [TTFB(Time to First Byte)](/ttfb/)와 같은 사용자 중심이 아닌 페이지 로드 메트릭에 권장됩니다.
+
+[Core Web Vitals](/vitals/)와 같은 사용자 중심 메트릭의 경우 더 나은 옵션은 사용자 경험을 보다 정확하게 나타내는 값을 보고하는 것입니다.
+
+{% Aside 'caution' %} [Navigation Timing API](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types)에서 `back_forward` 탐색 유형은 bfcache 복원과 혼동되어서는 안 됩니다. Navigation Timing API는 페이지 로드에만 주석을 다는 반면 bfcache 복원은 이전 탐색에서 로드된 페이지를 재사용합니다. {% endAside %}
+
+### 핵심 Web Vitals에 미치는 영향
+
+[Core Web Vitals](/vitals/)는 다양한 차원(로딩 속도, 상호 작용, 시각적 안정성)에 걸쳐 웹 페이지에 대한 사용자 경험을 측정하고 사용자는 bfcache 복원을 기존 페이지 로드보다 더 빠른 탐색으로 경험하기 때문에 Core Web Vitals 메트릭이 이를 반영하는 것이 중요합니다. 결국 사용자는 bfcache가 활성화되었는지 여부를 신경 쓰지 않고 탐색이 빠르기만 하면 됩니다!
+
+Core Web Vitals 측정항목을 수집하고 보고하는 [Chrome 사용자 경험 보고서](https://developer.chrome.com/docs/crux/)와 같은 도구는 bfcache 복원을 데이터세트에서 별도의 페이지 방문으로 처리합니다.
+
+bfcache 복원 후 이러한 메트릭을 측정하기 위한 전용 웹 성능 API는 (아직) 없지만 기존 웹 API를 사용하여 해당 값을 근사화할 수 있습니다.
+
+- [가장 큰 콘텐츠가 포함된 페인트(LCP)](/lcp/)의 `pageshow` 이벤트의 타임스탬프와 다음으로 칠해진 프레임의 타임스탬프 사이의 델타를 사용할 수 있습니다(프레임의 모든 요소가 동시에 칠해지기 때문). bfcache 복원의 경우 LCP와 FCP가 동일합니다.
+- [FID(First Input Delay](/fid/) )의 경우 `pageshow` 이벤트에서 이벤트 리스너([FID polyfill](https://github.com/GoogleChromeLabs/first-input-delay)에서 사용하는 것과 동일)를 다시 추가하고 FID를 bfcache 복원 후 첫 번째 입력의 지연으로 보고할 수 있습니다.
+- [CLS(Cumulative Layout Shift)](/cls/)의 경우 기존 성능 관찰자를 계속 사용할 수 있습니다. 현재 CLS 값을 0으로 재설정하기만 하면 됩니다.
+
+bfcache가 각 측정항목에 미치는 영향에 대한 자세한 내용은 개별 핵심 핵심 성능 [메트릭 가이드 페이지](/vitals/#core-web-vitals)를 참조하세요. 그리고 코드에서 이러한 메트릭의 bfcache 버전을 구현하는 방법에 대한 구체적인 예는 [web-vitals JS 라이브러리에 추가](https://github.com/GoogleChrome/web-vitals/pull/87)하는 PR을 참조하십시오.
+
+{% Aside %} `v1`부터 [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리는 보고하는 메트릭에서 [bfcache 복원을 지원](https://github.com/GoogleChrome/web-vitals/pull/87)합니다. `v1` 이상을 사용하는 개발자는 코드를 업데이트할 필요가 없습니다. {% endAside %}
+
+## 추가 리소스
+
+- [Firefox 캐싱](https://developer.mozilla.org/Firefox/Releases/1.5/Using_Firefox_1.5_caching) *(Firefox의 bfcache)*
+- [페이지 캐시](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) *(Safari의 bfcache)*
+- [캐시 뒤로/앞으로: 웹에 노출된 동작](https://docs.google.com/document/d/1JtDCN9A_1UBlDuwkjn1HWxdhQ1H2un9K4kyPLgBqJUc/edit?usp=sharing) *(브라우저 간 bfcache 차이)*
+- [bfcache 테스터](https://back-forward-cache-tester.glitch.me/?persistent_logs=1) *(다양한 API와 이벤트가 브라우저에서 bfcache에 미치는 영향 테스트)*
diff --git a/src/site/content/ko/blog/blog.11tydata.js b/src/site/content/ko/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/ko/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/ko/blog/bluetooth/index.md b/src/site/content/ko/blog/bluetooth/index.md
new file mode 100644
index 00000000000..ca93bee27f1
--- /dev/null
+++ b/src/site/content/ko/blog/bluetooth/index.md
@@ -0,0 +1,411 @@
+---
+title: JavaScript를 통해 블루투스 장치와의 통신
+subhead: Web Bluetooth API를 사용하면 웹 사이트에서 블루투스 장치와 통신할 수 있습니다.
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: 코인에 들어가 있는 블루투스 칩
+description: Web Bluetooth API를 사용하면 웹 사이트에서 블루투스 장치와 통신할 수 있습니다.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+웹 사이트가 안전하고 개인 정보를 보호하는 방식으로 근처의 블루투스 장치와 통신할 수 있다고 말한다면 어떻게 될까요? 이런 식으로 심박수 모니터, 노래하는 전구, 심지어 [거북이](https://www.youtube.com/watch?v=1LV1Fk5ZXwA)까지 웹 사이트와 직접 상호작용할 수 있습니다.
+
+지금까지 블루투스 장치와의 상호 작용은 플랫폼별 앱에서만 가능했습니다. Web Bluetooth API는 이러한 한계를 벗어나 웹 브라우저에도 이를 이용 가능하게 하는 것을 목표로 합니다.
+
+## 시작하기 전에
+
+이 문서에서는 독자가 BLE(Bluetooth Low Energy) 및 GATT([Generic Attribute Profile](https://www.bluetooth.com/specifications/gatt/)) 작동 방식에 대한 기본 지식이 있다고 가정합니다.
+
+[Web Bluetooth API 사양](https://webbluetoothcg.github.io/web-bluetooth/)은 아직 확정되지 않았지만 사양 작성자들이 열정적인 개발자를 대상으로 이 API를 사용해 보고 [사양에 대한 피드백](https://github.com/WebBluetoothCG/web-bluetooth/issues)과 [구현에 대한 피드백](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth)을 제공할 것을 적극적으로 권하고 있습니다.
+
+Web Bluetooth API의 하위 요소는 ChromeOS, Android 6.0용 Chrome, Mac(Chrome 56) 및 Windows 10(Chrome 70)에서 사용할 수 있습니다. 즉, 가까운 BLE(Bluetooth Low Energy) 장치를 [요청](#request)하여 여기에 [연결](#connect)하고, 블루투스 특성을 [읽고](#read) [쓰며](#write), [GATT 알림을 수신](#notifications)하고 [블루투스 장치의 연결이 끊긴 시점](#disconnect)을 인식하고, 심지어 [블루투스 설명자를 읽고 쓸](#descriptors) 수 있게 될 것입니다. 자세한 내용은 MDN의 [브라우저 호환성](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility) 표를 참조하세요.
+
+Linux 및 이전 버전의 Windows의 경우 `about://flags`에서 `#experimental-web-platform-features` 플래그를 활성화합니다.
+
+### 원본 평가에 사용 가능
+
+현장에서 Web Bluetooth API를 사용하는 개발자로부터 최대한 많은 피드백을 얻기 위해 Chrome은 이전에 ChromeOS, Android 및 Mac에 대한 [원본 평가](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)로 Chrome 53에 이 기능을 추가했습니다.
+
+이 평가는 2017년 1월에 성공적으로 종료되었습니다.
+
+## 보안 요구 사항
+
+보안 트레이드오프를 이해하려면 Web Bluetooth API 사양 작업에 참여하고 있는 Chrome 팀의 소프트웨어 엔지니어인 Jeffrey Yasskin의 [웹 블루투스 보안 모델](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2) 게시물을 읽어볼 것을 추천합니다.
+
+### HTTPS 전용
+
+이 실험적 API는 웹에 추가된 강력한 새로운 기능이기 때문에 [보안 컨텍스트](https://w3c.github.io/webappsec-secure-contexts/#intro)에서만 사용할 수 있습니다. 즉, [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security)를 염두에 두고 빌드해야 합니다.
+
+### 사용자 제스처 필요
+
+보안 조치로서, `navigator.bluetooth.requestDevice`를 사용하여 블루투스 장치를 검색하려면 터치 또는 마우스 클릭과 같은 [사용자 제스처](https://html.spec.whatwg.org/multipage/interaction.html#activation)로 트리거해야 합니다. [`pointerup`](https://developer.chrome.com/blog/pointer-events/), `click` 및 `touchend` 이벤트 수신에 대해 이야기하고 있는 것입니다.
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // Call navigator.bluetooth.requestDevice
+});
+```
+
+## 코드로 들어가기
+
+Web Bluetooth API는 JavaScript [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)에 크게 의존합니다. 이 내용에 익숙하지 않다면 이 훌륭한 [Promise 튜토리얼](/promises)을 확인해 보세요. 한 가지 더, `() => {}`는 단순히 ECMAScript 2015 [Arrow 함수](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)입니다.
+
+### 블루투스 장치 요청 {: #request }
+
+이 버전의 Web Bluetooth API 사양을 사용하면 중앙 역할에서 실행되는 웹 사이트가 BLE 연결을 통해 원격 GATT 서버에 연결할 수 있습니다. 블루투스 4.0 이상을 구현한 장치간 통신이 지원됩니다.
+
+웹 사이트에서 `navigator.bluetooth.requestDevice`를 사용하여 주변 장치에 대한 액세스를 요청하면 브라우저는 사용자에게 하나의 장치를 선택하거나 단순히 요청을 취소할 수 있는 장치 선택기를 표시합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">블루투스 장치 사용자 프롬프트</a></p>
+  </figcaption></figure>
+
+`navigator.bluetooth.requestDevice()` 함수는 필터를 정의하는 필수 객체를 사용합니다. 이러한 필터는 일부 광고된 Bluetooth GATT 서비스 및/또는 장치 이름과 일치하는 장치만 반환하는 데 사용됩니다.
+
+#### 서비스 필터
+
+예를 들어, [Bluetooth GATT 배터리 서비스](https://www.bluetooth.com/specifications/gatt/)를 광고하는 블루투스 장치를 요청하려면 다음과 같이 합니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+하지만 해당 Bluetooth GATT 서비스가 [표준화된 Bluetooth GATT 서비스](https://www.bluetooth.com/specifications/assigned-numbers/) 목록에 없으면 전체 블루투스 UUID 또는 짧은 16비트 또는 32비트 형식을 제공할 수 있습니다.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### 이름 필터
+
+`name` 필터 키를 사용하여 광고된 장치 이름, 또는 경우에 따라 `namePrefix`로 이 이름의 접두사를 기반으로 블루투스 장치를 요청할 수 있습니다. 이 경우 서비스 필터에 포함되지 않은 서비스에 액세스할 수 있도록 `optionalServices` 키도 정의해야 합니다. 그렇지 않으면 나중에 액세스하려고 할 때 오류가 발생합니다.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### 제조업체 데이터 필터
+
+`manufacturerData` 필터 키를 이용해 광고된 제조업체별 데이터를 기반으로 블루투스 장치를 요청할 수도 있습니다. 이 키는 `companyIdentifier`라는 필수 [블루투스 회사 식별자](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/) 키가 있는 객체의 배열입니다. 시작하는 블루투스 장치에서 제조업체 데이터를 필터링하는 데이터 접두사를 제공할 수도 있습니다. 서비스 필터에 포함되지 않은 서비스에 액세스하려면 `optionalServices` 키도 정의해야 합니다. 그렇지 않으면 나중에 액세스하려고 할 때 오류가 발생합니다.
+
+```js
+// Filter Bluetooth devices from Google company with manufacturer data bytes
+// that start with [0x01, 0x02].
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+마스크는 제조업체 데이터의 일부 패턴과 일치시키기 위해 데이터 접두사와 함께 사용할 수도 있습니다. 자세한 내용은 [블루투스 데이터 필터 설명](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md)을 확인하세요.
+
+{% Aside %} 이 글을 쓰는 시점에서 `manufacturerData` 필터 키는 Chrome 92에서 사용할 수 있습니다. 이전 브라우저와의 하위 호환성이 필요한 경우, 제조업체 데이터 필터는 비어 있는 것으로 간주되므로 대체 옵션을 제공해야 합니다. [예](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ)를 참조하세요. {% endAside %}
+
+#### 필터 없음
+
+마지막으로, `filters` 대신 `acceptAllDevices` 키를 사용하여 근처의 모든 블루투스 장치를 표시할 수 있습니다. 또한 일부 서비스에 액세스하기 위해 `optionalServices` 키도 정의해야 합니다. 그렇지 않으면 나중에 액세스하려고 할 때 오류가 발생합니다.
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %} 이로 인해 선택기에 관련 없는 여러 장치가 표시되고 필터가 없기 때문에 에너지가 낭비될 수 있습니다. 주의해서 사용하세요. {% endAside %}
+
+### 블루투스 장치에 연결 {: #connect }
+
+그렇다면 이제 `BluetoothDevice`를 가지고 무엇을 해야 할까요? 서비스 및 특성 정의를 가지고 있는 블루투스 원격 GATT 서버에 연결해 보겠습니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // Human-readable name of the device.
+  console.log(device.name);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### 블루투스 특성 읽기 {: #read }
+
+여기서 우리는 원격 블루투스 장치의 GATT 서버에 연결됩니다. 이제 기본 GATT 서비스를 얻고 이 서비스에 속하는 특성을 읽으려고 합니다. 예를 들어 장치 배터리의 현재 충전 수준을 읽어 보겠습니다.
+
+아래 예에서 `battery_level`은 [표준화된 배터리 수준 특성](https://www.bluetooth.com/specifications/gatt/)입니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Getting Battery Service…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Getting Battery Level Characteristic…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Battery percentage is ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+사용자 지정 블루투스 GATT 특성을 사용하는 경우 전체 블루투스 UUID 또는 짧은 16비트 또는 32비트 형식을 `service.getCharacteristic`에 제공할 수 있습니다.
+
+또한, 특성에서 `characteristicvaluechanged` 이벤트 리스너를 추가하여 값의 판독을 처리할 수도 있습니다. 들어오는 GATT 알림을 선택적으로 처리하는 방법도 알아보려면 [Read Characteristic Value Changed Sample](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html)을 확인하세요.
+
+```js
+…
+.then(characteristic => {
+  // Set up event listener for when characteristic value changes.
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Battery percentage is ' + batteryLevel);
+}
+```
+
+### 블루투스 특성에 쓰기 {: #write }
+
+블루투스 GATT 특성에 쓰는 것은 읽는 것만큼 쉽습니다. 이번에는 Heart Rate Control Point를 사용하여 심박수 모니터 장치에서 Energy Expended 필드의 값을 0으로 재설정해 보겠습니다.
+
+여기에 마법 같은 것은 없습니다. [Heart Rate Control Point 특성 페이지](https://www.bluetooth.com/specifications/gatt/)에 모두 설명되어 있습니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // Writing 1 is the signal to reset energy expended.
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Energy expended has been reset.');
+})
+.catch(error => { console.error(error); });
+```
+
+### GATT 알림 수신 {: #notifications }
+
+이제 장치에서 [심박수 측정](https://www.bluetooth.com/specifications/gatt/) 특성이 변경될 때 알림을 받는 방법을 살펴보겠습니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Notifications have been started.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Received ' + value);
+  // TODO: Parse Heart Rate Measurement value.
+  // See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
+}
+```
+
+[알림 샘플](https://googlechrome.github.io/samples/web-bluetooth/notifications.html)에 `stopNotifications()`를 사용하여 알림을 중단하고 추가된 `characteristicvaluechanged` 이벤트 리스너를 적절하게 제거하는 방법이 나와 있습니다.
+
+### 블루투스 장치에서 연결 해제 {: #disconnect }
+
+더 나은 사용자 경험을 제공하기 위해 연결 중단 이벤트에 수신 대기하고 사용자를 다시 연결하도록 초대할 수 있습니다.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // Set up event listener for when device gets disconnected.
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Device ${device.name} is disconnected.`);
+}
+```
+
+`device.gatt.disconnect()`를 호출하여 웹 앱을 블루투스 장치에서 연결 해제할 수도 있습니다. 그러면 기존 `gattserverdisconnected` 이벤트 리스너가 트리거됩니다. 다른 앱이 이미 블루투스 장치와 통신하고 있는 경우에는 블루투스 장치 통신이 중단되지 않습니다. 자세히 알아보려면 [장치 연결 해제 샘플](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) 및 [자동 재연결 샘플](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html)을 확인하세요.
+
+{% Aside 'caution' %} 블루투스 GATT 속성, 서비스, 특성 등은 장치 연결이 끊어지면 무효화됩니다. 즉, 재연결 후에 해당 코드에서 항상 (`getPrimaryService(s)`, `getCharacteristic(s)` 등을 통해) 이러한 속성을 다시 가져와야 합니다. {% endAside %}
+
+### 블루투스 설명자 읽기 및 쓰기 {: #descriptors }
+
+블루투스 GATT 설명자는 특성 값을 설명하는 속성입니다. 블루투스 GATT 특성과 유사한 방식으로 읽고 쓸 수 있습니다.
+
+예를 들어 장치의 건강 체온계의 측정 간격에 대한 사용자 설명을 읽는 방법을 살펴보겠습니다.
+
+아래 예에서 `health_thermometer`는 [건강 체온계 서비스](https://www.bluetooth.com/specifications/gatt/)이고, `measurement_interval`은 [측정 간격 특성](https://www.bluetooth.com/specifications/gatt/)이고, `gatt.characteristic_user_description`은 [특성 사용자 설명 설명자](https://www.bluetooth.com/specifications/assigned-numbers/)입니다.
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`User Description: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+장치의 건강 온도계 측정 간격에 대한 사용자 설명을 읽었으므로 이제 이를 업데이트하고 사용자 정의 값을 작성하는 방법을 살펴보겠습니다.
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Defines the time between measurements.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## 샘플, 데모 및 코드랩
+
+아래의 모든 [웹 블루투스 샘플](https://googlechrome.github.io/samples/web-bluetooth/index.html)은 성공적으로 테스트되었습니다. 이러한 샘플을 최대한 활용하려면 배터리 서비스, 심박수 서비스 또는 건강 체온계 서비스로 BLE 주변 장치를 시뮬레이션하는 [BLE 주변 장치 시뮬레이터 Android 앱](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral)의 설치를 권장합니다.
+
+### 초보자
+
+- [장치 정보](https://googlechrome.github.io/samples/web-bluetooth/device-info.html) - BLE 장치에서 기본 장치 정보를 검색합니다.
+- [배터리 수준](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html) - 배터리 정보를 광고하는 BLE 장치에서 배터리 정보를 검색합니다.
+- [에너지 재설정](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html) - 심박수를 알리는 BLE 장치에서 소모된 에너지를 재설정합니다.
+- [특성 속성](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html) - BLE 장치의 특정 특성에 대한 모든 속성을 표시합니다.
+- [알림](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) - BLE 장치에서 특성 알림을 시작 및 중지합니다.
+- [장치 연결 해제](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) - BLE 장치에 연결한 후 연결을 끊고 연결이 끊어지면 알림을 받습니다.
+- [특성 가져오기](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html) - BLE 장치에서 광고된 서비스의 모든 특성을 가져옵니다.
+- [설명자 가져오기](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html) - BLE 장치에서 광고된 서비스의 모든 특성 설명자를 가져옵니다.
+- [제조업체 데이터 필터](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html) - BLE 장치에서 제조업체 데이터와 일치하는 기본 장치 정보를 검색합니다.
+
+### 여러 작업 결합
+
+- [GAP 특성](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html) - BLE 장치의 모든 GAP 특성을 가져옵니다.
+- [장치 정보 특성](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html) - BLE 장치의 모든 장치 정보 특성을 가져옵니다.
+- [링크 손실](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html) - BLE 장치의 경고 수준 특성(readValue 및 writeValue)을 설정합니다.
+- [서비스 및 특성 검색](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html) - BLE 장치에서 액세스 가능한 모든 기본 서비스와 해당 특성을 검색합니다.
+- [자동 재연결](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) - 지수 백오프 알고리즘을 사용하여 연결이 끊긴 BLE 장치에 다시 연결합니다.
+- [변경된 특성 값 읽기](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) - 배터리 수준을 읽고 BLE 장치에서 변경 사항을 알립니다.
+- [설명자 읽기](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html) - BLE 장치에서 서비스의 모든 특성 설명자를 읽습니다.
+- [설명자 쓰기](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html) - BLE 장치의 "특성 사용자 설명" 설명자에 씁니다.
+
+[선별된 웹 블루투스 데모](https://github.com/WebBluetoothCG/demos)와 [공식 웹 블루투스 코드랩](https://github.com/search?q=org%3Agooglecodelabs+bluetooth)도 확인하세요.
+
+## 라이브러리
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils)는 API에 몇 가지 편의 기능을 추가하는 npm 모듈입니다.
+- Web Bluetooth API shim은 가장 널리 사용되는 Node.js BLE 중앙 모듈인 [noble](https://github.com/sandeepmistry/noble)에서 사용할 수 있습니다. 이를 통해 WebSocket 서버 또는 기타 플러그인 없이도 noble을 웹팩/탐색 처리할 수 있습니다.
+- [angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth)는 Web Bluetooth API를 구성하는 데 필요한 모든 상용구를 추상화하는 [Angular](https://angularjs.org)용 모듈입니다.
+
+## 도구
+
+- [Get Started with Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator)는 블루투스 장치와 상호 작용을 시작하려고 할 때 모든 JavaScript 상용구 코드를 생성해주는 간단한 웹 앱입니다. 장치 이름, 서비스, 특성을 입력하고 속성을 정의하기만 하면 됩니다.
+- 이미 블루투스를 개발 중이라면 [Web Bluetooth Developer Studio Plugin](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin)을 이용해 블루투스 장치에 대한 Web Bluetooth JavaScript 코드도 생성할 수 있습니다.
+
+## 팁
+
+Chrome의 `about://bluetooth-internals`에서 제공하는 **Bluetooth Internals** 페이지를 살펴보세요. 상태, 서비스, 특성 및 설명자 등 주변의 블루투스 장치에 대한 모든 것을 검사할 수 있습니다.
+
+<figure>{% Img src="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt="블루투스를 디버깅하기 위한 Chrome의 내부 페이지를 보여주는 스크린샷", width="800", height="572" %}<figcaption> 블루투스 장치 디버깅을 위한 Chrome 내부 페이지입니다.</figcaption></figure>
+
+또한 블루투스 디버깅이 때로 어려울 수 있으므로 공식 [웹 블루투스 버그 신고 방법](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs) 페이지도 확인해 볼 것을 추천합니다.
+
+{% Aside 'caution' %} 블루투스 특성을 동시에 읽고 쓸 경우 플랫폼에 따라 오류가 발생할 수 있습니다. 적절한 경우 GATT 작업 요청을 수동으로 대기열에 추가하는 것이 좋습니다. ["GATT 작업 진행 중 - 처리 방법"](https://github.com/WebBluetoothCG/web-bluetooth/issues/188)을 참조하세요. {% endAside %}
+
+## 향후 계획
+
+먼저 [브라우저 및 플랫폼 구현 현황](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md)을 확인하여 Web Bluetooth API의 어떤 부분이 현재 구현되고 있는지 알아보세요.
+
+아직 불완전하지만 가까운 미래에 무엇을 기대할 수 있는지 살짝 들여다보겠습니다.
+
+- `navigator.bluetooth.requestLEScan()`으로 [주변 BLE 광고 검색](https://github.com/WebBluetoothCG/web-bluetooth/pull/239)이 이루어집니다.
+- 새로운 `serviceadded` 이벤트가 새로 발견된 블루투스 GATT 서비스를 추적하고 `serviceremoved` 이벤트는 제거된 서비스를 추적합니다. 블루투스 GATT 서비스에서 특성 및/또는 설명자가 추가되거나 제거되면 새로운 `servicechanged` 이벤트가 발생합니다.
+
+### API에 대한 지원 표시
+
+Web Bluetooth API를 사용할 계획이십니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 힘이 됩니다.
+
+[`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live) 해시 태그로 [@ChromiumDev](https://twitter.com/ChromiumDev)에 트윗을 보내어 어디서 어떤 방법으로 이 API를 사용하는지 알려주세요.
+
+## 리소스
+
+- 스택 오버플로: [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Chrome 기능 상태: [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Chrome 구현 버그: [https://crbug.com/?q=component:Blink&gt;Bluetooth](https://crbug.com/?q=component:Blink%3EBluetooth)
+- 웹 블루투스 사양: [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- 사양 문제: [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- BLE 주변기기 시뮬레이터 앱: [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ' %}
+
+## 감사의 말
+
+이 글을 검토한 [Kayce Basques](https://github.com/kaycebasques)에게 감사의 말을 전합니다. [미국 볼더에 위치한 SparkFun Electronics](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg)에서 이미지를 제공했습니다.
diff --git a/src/site/content/ko/blog/building-a-sidenav-component/index.md b/src/site/content/ko/blog/building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..f6d3c1dc875
--- /dev/null
+++ b/src/site/content/ko/blog/building-a-sidenav-component/index.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: sidenav 구성요소 빌드
+subhead: 반응형 슬라이드 아웃 sidenav를 구축하는 방법에 대한 기본 개요
+authors:
+  - adamargyle
+description: 반응형 슬라이드 아웃 sidenav를 구축하는 방법에 대한 기본 개요
+date: 2021-01-21
+hero: image/admin/Zo1KkESK9CfEIYpbWzap.jpg
+thumbnail: image/admin/pVZO6FsC9tF3H6QIWpY2.png
+codelabs: codelab-building-a-sidenav-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+이 게시물에서 반응형, 상태 저장형, 키보드 탐색 지원, JavaScript 유무에 관계없이 작동하고 여러 브라우저에서 작동하는 웹용 sidenav 구성 요소의 프로토타입을 만든 방법을 공유합니다. [데모](https://gui-challenges.web.app/sidenav/dist/)를 사용해 보세요.
+
+비디오를 선호하는 경우 이 게시물의 YouTube 버전이 있습니다.
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## 개요
+
+반응형 내비게이션 시스템을 구축하는 것은 어렵습니다. 일부 사용자는 키보드를 사용하고 일부는 강력한 데스크톱을 사용하며 일부는 소형 모바일 장치에서 방문합니다. 방문하는 모든 사람이 메뉴를 열고 닫을 수 있어야 합니다.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/desktop-demo-1080p.mp4">
+  </source></video>
+  <figcaption>데스크톱과 모바일에 반응하는 레이아웃 데모</figcaption></figure>
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/mobile-demo-1080p.mp4">
+  </source></video>
+  <figcaption>iOS 및 Android에서 작동하는 밝고 어두운 테마</figcaption></figure>
+
+## 웹 전술
+
+이번 구성 요소 탐색에서 몇 가지 중요한 웹 플랫폼 기능을 결합할 수 있었습니다.
+
+1. CSS [`:target`](#target-psuedo-class)
+2. CSS [그리드](#grid-stack)
+3. CSS [변환](#transforms)
+4. 뷰포트 및 사용자 기본 설정에 대한 CSS 미디어 쿼리
+5. `focus` [UX 향상](#ux-enhancements)을 위한 JS
+
+저의 해법은 `540px` 이하의 "모바일" 뷰포트에 있을 때만 토글됩니다. `540px`는 모바일 대화형 레이아웃과 정적 데스크톱 레이아웃 간 전환을 결정하는 임계점이 될 것입니다.
+
+### CSS `:target` 의사 클래스 {: #target-psuedo-class }
+
+하나의 `<a>` 링크는 URL 해시를 `#sidenav-open`로 다른 하나는 비어 있음(`''`)으로 설정합니다. 마지막으로 요소에는 해시와 일치하는 `id`가 있습니다.
+
+```html
+<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
+
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<aside id="sidenav-open">
+  …
+</aside>
+```
+
+이러한 각 링크를 클릭하면 페이지 URL의 해시 상태가 변경되고 의사 클래스를 사용하여 sidenav를 표시하거나 숨깁니다.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+  }
+
+  #sidenav-open:target {
+    visibility: visible;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/hash-change.mp4">
+  </source></video></figure>
+
+### CSS 그리드 {: #grid-stacks }
+
+과거에는 절대 위치 또는 고정 위치 sidenav 레이아웃 및 구성 요소만 사용했습니다. 그리드의 `grid-area` 구문을 사용하면 동일한 행이나 열에 여러 요소를 할당할 수 있습니다.
+
+#### 스택
+
+기본 레이아웃 요소인 `#sidenav-container`는 1개의 행과 2개의 열을 생성하는 그리드이며, 각각 1개는 `stack`으로 명명됩니다. 공간이 제한되면 CSS는 모든 `<main>` 요소의 자식을 동일한 그리드 이름에 할당하고 모든 요소를 동일한 공간에 배치하여 스택을 만듭니다.
+
+```css
+#sidenav-container {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 540px) {
+  #sidenav-container > * {
+    grid-area: stack;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </source></video></figure>
+
+#### 메뉴 배경
+
+`<aside>`는 sidenav를 포함하는 애니메이션 요소입니다. 여기에는 2개의 자식이 있습니다. `[nav]`로 명명된 탐색 컨테이너 `<nav>`와 메뉴를 닫는 데 사용되며 `[escape]`으로 명명된 백드롭 `<a>`입니다.
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+`2fr` 및 `1fr`을 조정하여 메뉴 오버레이와 음수 공간 닫기 버튼에 대해 원하는 비율을 찾습니다.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </source></video>
+  <figcaption>비율을 변경하면 어떻게 되는지를 보여주는 데모입니다.</figcaption></figure>
+
+### CSS 3D 변환 및 전환 {: #transforms }
+
+이제 레이아웃이 모바일 뷰포트 크기로 쌓입니다. 몇 가지 새로운 스타일을 추가할 때까지는 기본적으로 기사를 오버레이합니다. 다음은 이 다음 섹션에서 목표로 하는 몇 가지 UX입니다.
+
+- 열기 및 닫기 애니메이션
+- 사용자가 동의하는 경우에만 모션으로 애니메이션을 적용
+- `visibility` 애니메이션을 적용하여 키보드 포커스가 오프스크린 요소에 들어가지 않게 하기
+
+모션 애니메이션을 구현할 때 접근성을 최우선으로 생각하고 시작하고 싶습니다.
+
+#### 접근 가능한 모션
+
+모든 사람이 슬라이드 아웃 모션 경험을 원하는 것은 아닙니다. 우리 솔루션에서 이 기본 설정은 미디어 쿼리 내에서 `--duration` CSS 변수를 조정하여 적용됩니다. 미디어 쿼리  값은 동작에 대한 사용자의 운영 체제 기본 설정을 나타냅니다(사용 가능한 경우).
+
+```css
+#sidenav-open {
+  --duration: .6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidenav-open {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </source></video>
+  <figcaption>지속 시간이 적용되거나 적용되지 않은 상호 작용의 데모입니다.</figcaption></figure>
+
+이제 sidenav가 열리고 닫힐 때 사용자가 감소된 움직임을 선호하는 경우 움직임이 없는 상태를 유지하면서 요소를 즉시 보기로 이동합니다.
+
+#### 전환, 변형, 번역
+
+##### sidenav out(기본값)
+
+모바일에서 sidenav의 기본 상태를 오프스크린 상태로 설정하려면 `transform: translateX(-110vw)`을 적용하여 요소를 배치합니다.
+
+sidenav의 `box-shadow`가 숨겨져 있을 때 기본 뷰포트를 들여다보지 않도록 하기 위해 일반적인 오프스크린 코드인 `-100vw`에 또 다른 `10vw`를 추가했습니다.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+  }
+}
+```
+
+##### sidenav in
+
+`#sidenav` 요소가 `:target`과 일치하면 `translateX()` 위치를 homebase `0`으로 설정하고 URL 해시가 변경될 때 CSS가 요소를 `-110vw` 출력 위치에서 "in" 위치인  `0`으로 `var(--duration)` 동안 슬라이드 아웃하는 것을 지켜보세요.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open:target {
+    visibility: visible;
+    transform: translateX(0);
+    transition:
+      transform var(--duration) var(--easeOutExpo);
+  }
+}
+```
+
+#### 전환 가시성
+
+이제 목표는 메뉴가 없을 때 화면 판독기에서 메뉴를 숨겨 시스템이 화면 밖의 메뉴에 포커스를 두지 않도록 하는 것입니다. `:target`이 변경될 때 가시성 전환을 설정하여 이를 수행합니다.
+
+- 들어갈 때 가시성을 전환하지 마십시오. 요소가 슬라이드 안으로 들어가고 포커스를 받는 것을 볼 수 있도록 바로 볼 수 있게 합니다.
+- 나갈 때에는 가시성을 전환하되 지연시키세요. 전환 과정의 끝에 `hidden`으로 전환됩니다.
+
+### 접근성 UX 개선 사항 {: #ux-enhancements }
+
+#### 링크
+
+이 솔루션은 상태를 관리하기 위해 URL 변경에 의존합니다. 당연히 `<a>` 요소를 사용해야 하며 몇 가지 좋은 접근성 기능을 무료로 얻을 수 있습니다. 의도를 명확하게 나타내는 레이블로 대화형 요소를 장식합시다.
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+  <svg>...</svg>
+</a>
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/keyboard-voiceover.mp4">
+  </source></video>
+  <figcaption>음성 해설 및 키보드 상호 작용 UX의 데모.</figcaption></figure>
+
+이제 기본 상호 작용 버튼이 마우스와 키보드 모두에 대한 의도를 명확하게 나타냅니다.
+
+#### `:is(:hover, :focus)`
+
+이 편리한 CSS 기능 의사 선택기를 사용하면 호버 스타일을 포커스와 공유하여 신속하게 포함할 수 있습니다.
+
+```css
+.hamburger:is(:hover, :focus) svg > line {
+  stroke: hsl(var(--brandHSL));
+}
+```
+
+#### JavaScript에 뿌리기
+
+##### 닫으려면 `escape` 를 누르세요
+
+키보드의 `Escape` 키를 누르면 메뉴가 닫히지 않습니까? 연결해 보겠습니다.
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', event => {
+  if (event.code === 'Escape') document.location.hash = '';
+});
+```
+
+##### 브라우저 기록
+
+열기 및 닫기 상호 작용이 브라우저 기록에 여러 항목을 쌓는 것을 방지하려면 닫기 버튼에 다음 JavaScript 인라인을 추가하십시오.
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+```
+
+이렇게 하면 닫을 때 URL 기록 항목이 제거되어 메뉴가 열리지 않은 것처럼 만듭니다.
+
+##### 포커스 UX
+
+다음 스니펫은 열리거나 닫은 후 열기 및 닫기 버튼에 초점을 맞추는 데 도움이 됩니다. 토글을 쉽게 하고 싶습니다.
+
+```js
+sidenav.addEventListener('transitionend', e => {
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+      ? document.querySelector('#sidenav-close').focus()
+      : document.querySelector('#sidenav-button').focus();
+})
+```
+
+sidenav가 열리면 닫기 버튼에 초점을 맞춥니다. sidenav가 닫히면 열기 버튼에 초점을 맞춥니다. JavaScript의 요소에서 `focus()`를 호출하여 이 작업을 수행합니다.
+
+### 결론
+
+이제 제가 어떻게했는지 알아보았습니다. 여러분이라면 어떻게 하시겠습니까? 이것은 재미있는 구성 요소 아키텍처입니다! 슬롯이 있는 1차 버전은 누가 만들까요? 🙂
+
+접근 방식을 다양화하고 웹에서 구축하는 모든 방법을 알아보겠습니다. [Glitch](https://glitch.com)를 만들고 버전을 [트윗](https://twitter.com/argyleink) 하면 아래 [커뮤니티 리믹스](#community-remixes) 섹션에 추가하겠습니다.
+
+## 커뮤니티 리믹스
+
+- [@_developit](https://twitter.com/_developit)의 사용자 정의 요소: [데모 및 코드](https://glitch.com/edit/#!/app-drawer)
+- [@mayeedwin1](https://twitter.com/mayeedwin1)의 HTML/CSS/JS: [데모 및 코드](https://glitch.com/edit/#!/maye-gui-challenge)
+- [@a_nurella](https://twitter.com/a_nurella)의 Glitch Remix: [데모 및 코드](https://glitch.com/edit/#!/sidenav-with-adam)
+- [@EvroMalarkey](https://twitter.com/EvroMalarkey)의 HTML/CSS/JS: [데모 및 코드](https://evromalarkey.github.io/scrollsnap-drawer/index.html)
diff --git a/src/site/content/ko/blog/building-a-tabs-component/index.md b/src/site/content/ko/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..724687e4603
--- /dev/null
+++ b/src/site/content/ko/blog/building-a-tabs-component/index.md
@@ -0,0 +1,633 @@
+---
+layout: post
+title: 탭 구성 요소 빌드
+subhead: iOS 및 Android 앱에서 발견할 수 있는 것과 유사한 탭 구성 요소를 빌드하는 방법에 대한 기본 개요입니다.
+authors:
+  - adamargyle
+description: iOS 및 Android 앱에서 발견할 수 있는 것과 유사한 탭 구성 요소를 빌드하는 방법에 대한 기본 개요입니다.
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+이 게시물에서는 반응형이고 여러 장치 입력을 지원하며 여러 브라우저에서 작동하는 웹용 탭 구성 요소를 구축하는 방법에 대한 생각을 공유합니다. [데모](https://gui-challenges.web.app/tabs/dist/)를 사용해 보세요.
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> <a href="https://gui-challenges.web.app/tabs/dist/">데모</a> </figcaption></figure>
+
+동영상을 선호하는 경우 이 게시물의 YouTube 버전이 있습니다.
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## 개요
+
+탭은 디자인 시스템의 일반적인 구성 요소이지만 다양한 모양과 형태를 취할 수 있습니다. 처음에는 `<frame>` 요소를 기반으로 하는 데스크톱 탭이 있었으며 이제 물리적 속성을 기반으로 콘텐츠에 애니메이션을 적용하는 버터 같은 모바일 구성 요소가 있습니다. 그들은 모두 같은 일을 하려고 합니다. 바로 공간 절약입니다.
+
+오늘날 탭 사용자 경험의 핵심은 디스플레이 프레임에서 콘텐츠의 가시성을 토글하는 버튼 탐색 영역입니다. 많은 다른 콘텐츠 영역이 동일한 공간을 공유하지만 이들은 탐색에서 선택한 버튼을 기반으로 조건부로 표시됩니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png", alt="웹이 구성 요소 개념에 적용한 스타일의 거대한 다양성으로 인해 콜라주가 매우 혼란스럽습니다.", width="800", height="500" %} <figcaption> 지난 10년 동안의 탭 구성 요소 웹 디자인 스타일의 콜라주 </figcaption></figure>
+
+## 웹 전술
+
+몇 가지 중요한 웹 플랫폼 기능 덕분에 이 구성 요소를 빌드하기가 대체적으로 매우 간단하다는 것을 알게 되었습니다.
+
+- 적절한 스크롤 정지 위치와 함께 우아한 스와이프 및 키보드 상호 작용을 위한 `scroll-snap-points`
+- 인페이지 앵커링 및 공유 지원을 처리한 브라우저를 위한 URL 해시를 통한 [딥링크](https://en.wikipedia.org/wiki/Deep_linking)
+- `<a>` 및 `id="#hash"` 요소 마크업을 통한 스크린 리더 지원
+- 크로스페이드 전환 및 즉각적인 인페이지 스크롤을 활성화하기 위한 `prefers-reduced-motion`
+- 선택한 탭에 동적으로 밑줄을 긋고 색상을 변경하는 초안 상태(in-draft)의 `@scroll-timeline` 웹 기능
+
+### HTML {: #markup }
+
+기본적인 UX는 다음과 같습니다. 링크를 클릭하고 URL이 중첩된 페이지 상태를 나타내도록 한 다음, 일치하는 요소로 브라우저가 스크롤할 때 콘텐츠 영역 업데이트를 확인합니다.
+
+여기에는 링크 및 `:target`과 같은 구조적 콘텐츠 구성 요소가 있습니다. 우리는 `<nav>`가 유용한 링크 목록과 `<section>`가 유용한 `<article>` 요소의 목록이 필요합니다. 각 링크 해시는 섹션과 일치하게 되며 브라우저가 앵커링을 통해 스크롤할 수 있도록 합니다.
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> 링크 버튼을 클릭하면 초점이 맞춰진 콘텐츠가 슬라이딩됩니다. </figcaption></figure>
+
+예를 들어 링크를 클릭하면 Chrome 89의 `:target` 기사에 자동으로 초점이 맞춰지며 JS가 필요하지 않습니다. 그러면 사용자는 언제나처럼 입력 장치로 기사 콘텐츠를 스크롤할 수 있습니다. 이는 마크업에 표시된 대로 무료 콘텐츠입니다.
+
+저는 다음 마크업을 사용하여 탭을 구성했습니다.
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+저는 다음과 같이 `href` 및 `id` 속성을 사용하여 `<a>` 및 `<article>` 요소 간의 연결을 설정할 수 있습니다.
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+다음으로 저는 혼합된 양의 lorem으로 문서를 채우고 혼합된 길이와 이미지 세트의 제목으로 링크를 채웠습니다. 우리는 작업할 콘텐츠로 레이아웃을 시작할 수 있습니다.
+
+### 스크롤 레이아웃 {: #overscroll }
+
+이 구성 요소에는 3가지 유형의 스크롤 영역이 있습니다.
+
+- 탐색<b style="color: #FF00E2;">(분홍색)</b>은 가로로 스크롤 할 수 있습니다.
+- 콘텐츠 영역<b style="color: #008CFF;">(파란색)</b>은 가로로 스크롤 할 수 있습니다.
+- 각 문서 항목<b style="color: #2FD800;">(녹색)</b>은 세로로 스크롤 할 수 있습니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png", alt="스크롤 영역의 윤곽을 표시하고 스크롤 방향을 표시하는 색 맞추기 방향 화살표와 3가지 색상의 상자.", width="800", height="450" %}</figure>
+
+스크롤과 관련된 두 가지 유형의 요소가 있습니다.
+
+1. **창(window)** <br>`overflow` 속성 스타일이 있는 정의된 치수가 있는 상자입니다.
+2. **오버사이즈 표면** <br>이 레이아웃에서는 탐색 링크, 섹션 문서 및 문서 콘텐츠와 같은 목록 컨테이너입니다.
+
+#### `<snap-tabs>` 레이아웃 {: #tabs-layout }
+
+제가 선택한 최상위 레이아웃은 flex(Flexbox)였습니다. 저는 헤더와 섹션이 세로로 정렬되도록 방향을 `column`으로 설정했습니다. 이것은 우리의 첫 번째 스크롤 창이며 오버플로가 숨겨져 있는 모든 것을 숨깁니다. 헤더와 섹션은 곧 오버스크롤을 개별 영역으로 사용할 것입니다.
+
+{% Compare 'better', 'HTML' %}
+
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* establish primary containing box */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* be pushy about consuming all space */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* defend against <section> needing 100% */
+    flex-shrink: 0;
+    /* fixes cross browser quarks */
+    min-block-size: fit-content;
+  }
+}
+```
+
+{% endCompare %}
+
+3색 스크롤 다이어그램으로 다시 돌아가 살펴보면:
+
+- `<header>`는 이제 <b style="color: #FF00E2;">(분홍색)</b> 스크롤 컨테이너가 될 준비가 되었습니다.
+- `<section>`은 <b style="color: #008CFF;">(파란색)</b> 스크롤 컨테이너가 될 준비가 되었습니다.
+
+아래에서 [VisBug](https://a.nerdy.dev/gimme-visbug)로 강조 표시한 프레임은 스크롤 컨테이너가 생성한 **창**을 확인하는 데 도움이 됩니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png", alt="이 헤더 및 섹션 요소에 핫핑크색의 오버레이가 있으며 이는 구성 요소에서 차지하는 공간을 설명합니다.", width="800", height="620" %}</figure>
+
+#### 탭 `<header>` 레이아웃 {: #tabs-header }
+
+다음 레이아웃은 거의 동일합니다. 저는 flex를 사용하여 세로 순서를 만듭니다.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<snap-tabs>
+  <header>
+    <nav></nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css/1-2
+header {
+  display: flex;
+  flex-direction: column;
+}
+```
+{% endCompare %}
+</div>
+
+`.snap-indicator`는 링크 그룹과 함께 세로로 이동해야 하며, 이 헤더 레이아웃은 해당 단계를 설정하는 데 도움이 됩니다. 여기에는 절대 위치 요소가 없습니다!
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png", alt="nav 및 span.indicator 요소에는 구성 요소에서 이들이 차지하는 공간을 설명하는 핫핑크색 오버레이가 있습니다.", width="800", height="368" %}</figure>
+
+다음은 스크롤 스타일입니다. 우리가 2개의 가로 스크롤 영역(헤더 및 섹션) 간에 스크롤 스타일을 공유할 수 있다는 것이 밝혀졌기에 저는 유틸리티 클래스인 `.scroll-snap-x`를 만들었습니다.
+
+```css
+.scroll-snap-x {
+  /* browser decide if x is ok to scroll and show bars on, y hidden */
+  overflow: auto hidden;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  /* scrolling should snap children on x */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+각각은 x축에 오버플로가 필요하며, 오버스크롤을 트래핑하기 위한 스크롤 포함, 터치 장치용 숨겨진 스크롤 막대, 마지막으로 콘텐츠 표시 영역을 잠그기 위한 스크롤 스냅이 필요합니다. 우리의 키보드 탭 순서는 액세스할 수 있으며 모든 상호 작용 가이드는 자연스럽게 초점을 맞춥니다. 또한, 스크롤 스냅 컨테이너는 각각의 키보드에서 멋진 캐러셀 스타일 상호 작용을 얻습니다.
+
+#### 탭 헤더 `<nav>` 레이아웃 {: #tabs-header-nav }
+
+nav 링크는 줄 바꿈 없이 세로로 가운데에 배치되어야 하며 각 링크 항목은 스크롤 스냅 컨테이너에 맞춰져야 합니다. 2021 CSS를 위한 신속한 작업입니다!
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+nav {
+  display: flex;
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+```
+{% endCompare %}
+</div>
+
+각 링크는 자체적으로 스타일과 크기를 지정하므로 nav 레이아웃은 방향과 흐름만 지정하면 됩니다. nav 항목의 고유한 너비는 표시기가 새 대상에 맞게 너비를 조정할 때 탭 간 전환을 재미있게 만듭니다. 여기에 있는 요소의 수에 따라 브라우저는 스크롤 막대를 렌더링할지 여부를 결정합니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png", alt="이 nav 요소에는 핫핑크색 오버레이가 표시되어 이들이 구성 요소에서 차지하는 공간과 오버플로되는 위치를 설명합니다.", width="800", height="327" %}</figure>
+
+#### 탭 `<section>` 레이아웃 {: #tabs-section }
+
+이 섹션은 flex 항목이며 공간의 기준 소비자가 되어야 합니다. 또한 문서를 배치할 열을 생성해야 합니다. 다시 말하지만, CSS 2021를 위한 신속한 작업입니다! `block-size: 100%`는 상위 항목을 최대한 채우도록 이 요소를 확장한 다음 자체 레이아웃을 위해 상위 항목의 너비가 `100%`인 일련의 열을 만듭니다. 상위 항목에 대한 강력한 제약 조건을 작성했기 때문에 백분율은 여기에서 훌륭하게 작동합니다.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<section>
+  <article></article>
+  <article></article>
+  <article></article>
+  <article></article>
+</section>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+```
+{% endCompare %}
+</div>
+
+이는 마치 우리가 "강제적으로라도 세로로 최대한 확장하세요"하는 것과 같으며(`flex-shrink: 0`으로 설정한 헤더를 기억하세요. 이는 확장 압력에 대한 방어제입니다), 이는 전체 높이 열의 세트의 행 높이를 설정합니다. `auto-flow` 스타일은 상위 창을 오버플로하기 위해 그리드로 하여금 항상 우리가 원하는 대로 하위 항목을 줄 바꿈 없이 세로로 배치하도록 지시합니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png", alt="이 문서 요소에는 구성 요소에서 이들이 차지하는 공간과 오버플로되는 위치를 설명하는 핫핑크색 오버레이가 있습니다.", width="800", height="512" %}</figure>
+
+저는 때때로 이러한 내용이 이해하기 어렵다는 것을 발견합니다! 이 섹션 요소는 상자로 구분하고 있지만 상자 세트도 생성했습니다. 시각 자료와 설명이 도움이 되었으면 합니다.
+
+#### 탭 `<article>` 레이아웃 {: #tabs-article }
+
+사용자는 문서 콘텐츠를 스크롤할 수 있어야 하며 스크롤 막대는 오버플로가 있는 경우에만 표시되어야 합니다. 이러한 문서 요소는 깔끔한 위치에 있습니다. 그들은 동시에 스크롤 상위 요소이자 스크롤 하위 요소입니다. 브라우저는 여기에서 우리를 위해 까다로운 터치, 마우스 및 키보드 상호 작용을 실제로 처리합니다.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html
+<article>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  ...
+</article>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+```
+{% endCompare %}
+</div>
+
+저는 이 문서가 상위 스크롤러 내에서 스냅되도록 선택했습니다. 저는 탐색 링크 항목과 문서 요소가 각각의 스크롤 컨테이너의 인라인 시작에 스냅하는 방식을 정말 좋아합니다. 그것이 조화로운 관계처럼 보이고 느껴지기 때문입니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png", alt="문서 요소와 그 하위 요소에 핫핑크색의 오버레이가 있으며 구성 요소에서 그들이 차지하는 공간과 오버플로 방향을 설명합니다.", width="800", height="808" %}</figure>
+
+이 문서는 그리드의 하위 요소이며 우리가 스크롤 UX를 제공하고자 하는 뷰포트 영역으로 크기가 미리 정해져 있습니다. 이것은 제가 높이나 너비 스타일이 필요하지 않다는 것을 의미하며, 저는 오버플로 방식을 정의하기만 하면 됩니다. 저는 overflow-y를 auto로 설정한 다음 편리한 overscroll-behavior 속성으로 스크롤 상호 작용을 트래핑합니다.
+
+#### 3개의 스크롤 영역 요약 {: #scroll-areas-recap }
+
+아래에서 저는 시스템 설정에서 "항상 스크롤 막대 표시"를 선택했습니다. 레이아웃과 스크롤 오케스트레이션을 검토해야 하기 때문에 저는 이 설정이 켜진 상태에서 레이아웃이 작동하는 것이 두 배로 중요하다고 생각합니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png", alt="3개의 스크롤 막대가 표시되도록 설정되어 이제 레이아웃 공간을 소비하고 있으며, 구성 요소는 여전히 멋있어 보입니다.", width="500", height="607" %}</figure>
+
+저는 이 구성 요소에서 스크롤 막대의 여백을 보는 것은 스크롤 영역이 어디에 있는지, 스크롤 영역이 지원하는 방향 및 서로 상호 작용하는 방식을 명확하게 표시하는 데 도움이 된다고 생각합니다. 이러한 스크롤 창 프레임 각각이 레이아웃의 플렉스 또는 그리드 상위 요소가 되는 방법을 고려하세요.
+
+DevTools는 다음을 시각화하는 데 도움이 될 수 있습니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png", alt="스크롤 영역에 그리드 및 플렉스박스(Flexbox) 도구 오버레이가 있어 구성 요소에서 차지하는 공간과 오버플로 방향을 설명합니다.", width="800", height="455" %} <figcaption> 앵커 요소로 가득 찬 플렉스박스 nav 요소 레이아웃, 문서 요소로 가득 찬 그리드 섹션 레이아웃, 단락과 제목 요소로 가득 찬 문서 요소를 보여주는 Chromium Devtools. </figcaption></figure>
+
+스냅핑, 딥 링크 및 키보드 액세스 등 스크롤 레이아웃이 완료되었습니다. UX 향상, 스타일 및 즐거움을 위한 강력한 기반입니다.
+
+#### 기능 하이라이트
+
+스크롤 스냅된 자식은 크기 조정 중에 잠긴 위치를 유지합니다. 즉, JavaScript는 장치 회전 또는 브라우저 크기 조정 시 아무 것도 표시할 필요가 없습니다. Chromium DevTools [장치 모드](https://developer.chrome.com/docs/devtools/device-mode/)에서 **반응형** 이외의 모드를 선택한 다음 장치 프레임 크기를 조정하여 사용해 보세요. 요소는 계속 표시되며 콘텐츠와 함께 잠겨 있음에 유의하세요. 이것은 Chromium이 사양과 일치하도록 구현을 업데이트한 이후에 사용할 수 있었습니다. 다음은 이에 대한 [블로그 게시물](/snap-after-layout/)입니다.
+
+### 애니메이션 {: #animation }
+
+여기서 애니메이션 작업의 목표는 상호 작용을 UI 피드백과 명확하게 연결하는 것입니다. 이는 사용자가 모든 콘텐츠를 원활하게(잘 될 경우) 찾을 수 있도록 안내하거나 지원하는 데 도움이 됩니다. 저는 목적과 조건부로 모션을 추가하겠습니다. 이제 사용자는 자신의 운영체제에서 [자신의 모션 선호 설정](/prefers-reduced-motion/)을 지정할 수 있으며, 저는 저의 인터페이스에서 사용자의 선호 설정에 응답하는 것을 즐깁니다.
+
+기사 스크롤 위치에 탭 밑줄을 연결하겠습니다. 스냅핑은 정렬을 잘하기 위해 사용할 뿐만 아니라  애니메이션의 시작과 끝을 고정시키는 역할도 합니다. 이렇게 하면 [미니 맵](https://en.wikipedia.org/wiki/Mini-map)과 같은 역할을 하는 `<nav>`가 콘텐츠에 연결된 상태로 유지됩니다. 우리는 CSS와 JS 모두에서 사용자의 모션 선호 설정을 확인할 것입니다. 고려해야 할 몇 가지 좋은 위치가 있습니다!
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+#### 스크롤 동작 {: #scroll-behavior }
+
+`:target` 및 `element.scrollIntoView()` 모두의 모션 동작을 향상시킬 수 있습니다. 기본적으로 이는 인스턴트입니다. 브라우저는 스크롤 위치만 설정합니다. 그럼, 우리가 거기에서 깜박이는 대신 스크롤 위치로 전환하려면 어떻게 해야 할까요?
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+여기에서 우리는 모션과 사용자가 제어하지 않는 모션(예: 스크롤)을 소개하므로 우리는 사용자가 자신의 운영 체제에 모션 감소에 대한 선호 설정이 없는 경우에만 이 스타일을 적용합니다. 이런 식으로, 우리는 이런 설정에 대해 괜찮아하는 사람들에게만 스크롤 동작을 소개합니다.
+
+#### 탭 표시기 {: #tabs-indicator }
+
+이 애니메이션의 목적은 표시기를 콘텐츠 상태와 연결하는 데 도움이 되는 것입니다. 저는 모션 감소를 선호하는 사용자를 위해 색상 지정 크로스페이드 `border-bottom` 스타일을 사용하고 모션 사용에 동의하는 사용자에게 스크롤 링크 슬라이딩 + 색상 페이드 애니메이션을 사용하기로 결정했습니다.
+
+Chromium Devtools에서 저는 선호 설정을 토글 설정하고 2가지 다른 전환 스타일을 시연할 수 있습니다. 저는 이것을 구축하는 데 많은 재미를 느꼈습니다.
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+저는 더 이상 필요로 하지 않기 때문에 사용자가 모션 감소를 선호하는 경우 저는 `.snap-indicator`를 숨깁니다. 그런 다음 이를 `border-block-end` 스타일과 `transition`으로 교체합니다. 또한 탭 상호 작용에서 활성 nav 항목이 있는 탭 상호 작용 알림에 브랜드 밑줄 강조 표시가 있을 뿐만 아니라 텍스트 색상이 더 어둡다는 것을 알 수 있습니다. 활성 요소는 더 높은 텍스트 색상 대비와 밝은 언더라이트 액센트가 있습니다.
+
+CSS를 몇 줄만 추가하면 누군가가 본 듯한 느낌을 받을 수 있습니다(우리가 그들의 모션 선호 설정을 신중하게 존중한다는 의미에서). 저는 그것을 좋아합니다.
+
+#### `@scroll-timeline` {: #scroll-timeline }
+
+위의 섹션에서는 저는 여러분께 모션 감소 크로스페이드 스타일을 처리하는 방법을 보여 드렸습니다. 앞으로 이 섹션에서는 표시기와 스크롤 영역을 함께 연결하는 방법을 보여 드리겠습니다. 다음은 재미있는 실험적인 내용입니다. 여러분들도 저만큼 즐기시길 바랍니다.
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+저는 먼저 JavaScript에서 사용자의 모션 선호 설정을 확인합니다. 결과가 `false`(사용자가 모션 감소를 선호함을 의미함)인 경우 스크롤 링크 동작 효과를 실행하지 않습니다.
+
+```js
+if (motionOK) {
+  // motion based animation code
+}
+```
+
+이 글을 작성하는 시점에는 [`@scroll-timeline`에 대한 브라우저 지원](https://caniuse.com/css-scroll-timeline)이 없었습니다. 이는 실험적 구현만 포함된 [초안 사양](https://drafts.csswg.org/scroll-animations-1/)입니다. 하지만 제가 사용하는 이 데모인 보충 기능(polyfill)이 있습니다.
+
+##### ` ScrollTimeline`
+
+CSS와 JavaScript는 모두 스크롤 타임라인을 생성할 수 있지만 저는 JavaScript를 선택하였고, 그래서 애니메이션에서 라이브 요소 측정을 사용할 수 있었습니다.
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // scroll in the direction letters flow
+  fill: 'both',              // bi-directional linking
+});
+```
+
+저는 1개 항목이 다른 항목의 스크롤 위치를 따르길 바라며, `ScrollTimeline`을 생성하는 작업을 통해 스크롤 링크의 드라이버인 `scrollSource`를 정의합니다. 일반적으로 웹의 애니메이션은 전역 시간 프레임 틱에 대해 실행되지만, 메모리에 사용자 지정 `sectionScrollTimeline`이 있으면 저는 모든 것을 변경할 수 있습니다.
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+애니메이션의 키프레임으로 들어가기 전에 스크롤의 팔로워인 `tabindicator`가 사용자 지정 타임라인, 즉 우리 섹션의 스크롤을 기반으로 애니메이션 작업을 수행하도록 가리키는 것이 중요하다고 생각합니다. 이렇게 하면 연결을 완료하지만, 애니메이션을 적용할 상태 저장 지점 혹은 키프레임이라고 부르는 최종 구성 요소가 누락되어 있습니다.
+
+#### 동적 키프레임
+
+`@scroll-timeline`으로 애니메이션을 적용하는 정말 강력한 순수한 선언적 CSS 방식이 있지만 제가 선택한 애니메이션은 너무 동적이었습니다. `auto` 너비 간에 전환할 수 있는 방법은 없으며, 하위 요소 길이를 기반으로 다수의 키프레임을 동적으로 생성할 수 있는 방법도 없습니다.
+
+JavaScript는 해당 정보를 얻는 방법을 알고 있기에 우리는 하위 요소를 직접 반복하고 런타임에 계산된 값을 가져올 것입니다.
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+각 `tabnavitem`에 대해 `offsetLeft` 위치를 구조 분해(destructure)하고 이를 `translateX` 값으로 사용하는 문자열을 반환합니다. 그러면 애니메이션에 대한 4개의 변환 키프레임이 생성됩니다. 이는 너비에 대해서도 동일하게 수행되며, 각각의 동적 너비가 무엇인지 묻고 이를 키프레임 값으로 사용합니다.
+
+다음은 저의 글꼴 및 브라우저 선호 설정을 기반으로 한 출력의 예입니다.
+
+TranslateX 키프레임:
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+너비 키프레임:
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["121px", "117px", "226px", "67px"]
+```
+
+전략을 요약하자면, 섹션 스크롤러의 스크롤 스냅 위치에 따라 탭 표시기가 4개의 키프레임에 걸쳐 애니메이션 작업을 수행합니다. 스냅 포인트는 우리의 키프레임 사이를 명확하게 설명하고 애니메이션의 동기화된 느낌에 실제로 추가합니다.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png", alt="활성 탭과 비활성 탭은 VisBug 오버레이와 함께 표시되어 두 가지 모두에 대한 통과 대비 점수를 보여줍니다.", width="540", height="400" %}</figure>
+
+사용자는 상호 작용으로 애니메이션을 구동하며, 표시기의 너비와 위치가 한 섹션에서 다음 섹션으로 변경되는 것을 보고 스크롤을 사용하여 완벽하게 추적합니다.
+
+눈치채지 못하셨겠지만 저는 강조 표시된 탐색 항목이 선택될 때 색상이 변하는 것을 매우 자랑스럽게 생각합니다.
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+강조 표시된 항목의 대비가 더 높을 때 선택하지 않은 밝은 회색이 항목이 훨씬 더 뒤로 밀려 나타납니다. 마우스를 가져갔을 때와 선택했을 때와 같이 텍스트의 색상을 전환하는 것이 일반적이며, 밑줄 표시기와 동기화되어 스크롤할 때 해당 색상을 전환하는 것은 다음 단계입니다.
+
+제가 한 방법은 다음과 같습니다.
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+각 탭 nav 링크에는 밑줄 표시기와 동일한 스크롤 타임라인을 추적하는 이 새로운 색상 애니메이션이 필요합니다. 저는 이전과 동일한 타임라인을 사용합니다. 이것의 역할은 스크롤 시 눈금을 내보내는 것이기 때문에 우리는 원하는 모든 유형의 애니메이션에서 해당 눈금을 사용할 수 있습니다. 이전과 마찬가지로 저는 루프에 4개의 키프레임을 만들고 색상을 반환합니다.
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+색상이 `var(--text-active-color)`인 키프레임은 링크를 강조 표시하며 그렇지 않을 경우에는 표준 텍스트 색상입니다. 외부 루프는 각 nav 항목이고 내부 루프는 각 navitem의 개인 키프레임이기 때문에 중첩 루프는 비교적 간단합니다. 저는 외부 루프 요소가 내부 루프 요소와 동일한지 확인하며, 이를 사용하여 언제 선택되었는지 알 수 있습니다.
+
+저는 이러한 내용을 작성하며 매우 즐거웠습니다. 정말 즐거웠습니다.
+
+### 더 많은 JavaScript 개선 사항 {: #js }
+
+여기에서 보여드리는 핵심이 JavaScript 없이 작동한다는 점을 상기할 가치가 있습니다. JS를 사용할 수 있을 때 이를 어떻게 향상시킬 수 있는지 살펴보겠습니다.
+
+#### 딥 링크
+
+딥링크는 모바일 용어에 가깝지만 탭 콘텐츠에 대한 URL을 직접 공유할 수 있다는 점에서 딥링크의 의도가 탭을 사용하는 여기에서 충족된다고 생각합니다. 브라우저는 URL 해시와 일치하는 ID로 페이지 내 탐색을 수행합니다. 저는 이 `onload` 핸들러가 플랫폼 전반에 영향을 미친다는 것을 알았습니다.
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### 스크롤 종료 동기화
+
+우리의 사용자들은 항상 클릭하거나 키보드를 사용하는 것은 아니며, 때때로 그들은, 당연히 할 수 있기에, 그저 자유롭게 스크롤합니다. 섹션 스크롤러가 스크롤을 멈췄을 때, 그것이 멈춘 위치가 어디든지 상단 탐색 모음과 일치해야 합니다.
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+제가 스크롤 종료를 기다리는 방법은 다음과 같습니다.
+
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+섹션이 스크롤될 때마다 섹션 시간 초과가 있는 경우 이를 지우고 새 섹션을 시작합니다. 섹션 스크롤이 중지되면 시간 초과를 지우지 않고 휴식 후 100ms를 실행합니다. 실행되면 사용자가 멈춘 위치를 파악하는 함수를 호출합니다.
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+스크롤이 스냅되었다고 가정하고 스크롤 영역의 너비에서 현재 스크롤 위치를 나누면 소수점이 아닌 정수가 됩니다. 그런 다음 저는 이 계산된 인덱스를 통해 캐시에서 navitem을 가져오려고 시도하며, 무언가를 찾은 경우 저는 일치 항목을 전송하여 활성이 설정되도록 합니다.
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+활성 탭 설정은 현재 활성 탭을 지우고 들어오는 nav 항목에 활성 상태 속성을 부여하는 것으로 시작됩니다. `scrollIntoView()`에 대한 호출에는 주목할 가치가 있는 CSS와의 재미있는 상호 작용이 있습니다.
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+수평 스크롤 스냅 유틸리티 CSS에서 우리는 사용자가 모션에 내성이 있는 경우 `smooth` 스크롤을 적용하는 미디어 쿼리를 [중첩했습니다](https://drafts.csswg.org/css-nesting-1/). JavaScript는 스크롤 요소를 뷰로 자유롭게 호출할 수 있으며, CSS는 UX를 선언적으로 관리할 수 있습니다. 그들이 때때로 만드는 아주 유쾌한 작은 매칭입니다.
+
+### 결론
+
+이제 제가 어떻게 했는지 알아보았습니다. 여러분이라면 어떻게 하시겠습니까?! 이것은 재미있는 구성 요소 아키텍처를 만듭니다! 가장 좋아하는 프레임워크에 슬롯이 있는 첫 번째 버전은 누가 만들까요? 🙂
+
+접근 방식을 다양화하고 웹에서 구축하는 모든 방법을 알아보겠습니다. [Glitch](https://glitch.com)를 만들고 여러분의 버전을 [트윗](https://twitter.com/argyleink)하면 아래 [커뮤니티 리믹스](#community-remixes) 섹션에 추가하겠습니다.
+
+## 커뮤니티 리믹스
+
+- [@devnook](https://twitter.com/devnook), [@rob_dodson](https://twitter.com/rob_dodson) 및 [@DasSurma](https://twitter.com/DasSurma)(웹 구성 요소 포함): [article](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs).
+- [@jhvanderschee](https://twitter.com/jhvanderschee) 버튼: [Codepen](https://codepen.io/joosts/pen/PoKdZYP).
diff --git a/src/site/content/ko/blog/cache-api-quick-guide/index.md b/src/site/content/ko/blog/cache-api-quick-guide/index.md
new file mode 100644
index 00000000000..5ae518b0181
--- /dev/null
+++ b/src/site/content/ko/blog/cache-api-quick-guide/index.md
@@ -0,0 +1,266 @@
+---
+layou: post
+title: 'Cache API: 빠른 가이드'
+subhead: Cache API를 사용하여 애플리케이션 데이터를 오프라인에서 사용할 수 있도록 하는 방법을 알아보세요.
+authors:
+  - petelepage
+description: Cache API를 사용하여 애플리케이션 데이터를 오프라인에서 사용할 수 있도록 하는 방법을 알아보세요.
+date: 2017-10-03
+updated: 2020-04-27
+tags:
+  - blog
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+[Cache API](https://developer.mozilla.org/docs/Web/API/Cache)는 네트워크 요청 및 해당 응답을 저장하고 검색하는 시스템입니다. 이는 애플리케이션을 실행하는 과정에서 생성되는 일반 요청 및 응답일 수도 있고, 나중에 사용하기 위한 데이터를 저장하는 목적으로만 생성될 수도 있습니다.
+
+Cache API는 서비스 워커가 네트워크 요청을 캐시할 수 있도록 하여 네트워크 속도나 가용성과 관계없이 빠른 응답을 제공할 수 있도록 만들어졌습니다. 그러나 API는 일반적인 저장 메커니즘으로도 사용할 수 있습니다.
+
+## 어디에서 사용할 수 있나요?
+
+[Cache API는 모든 최신 브라우저](https://caniuse.com/#feat=mdn-api_cache) 에서 사용할 수 있습니다. 글로벌 `caches` 속성을 통해 노출되므로 간단한 기능 감지로 API의 존재 여부를 테스트할 수 있습니다.
+
+```js
+const cacheAvailable = 'caches' in self;
+```
+
+Cache API는 창, 아이프레임, 워커 또는 서비스 워커에서 액세스할 수 있습니다.
+
+## 저장할 수 있는 것
+
+캐시는 각각 HTTP 요청 및 응답을 나타내는 [`Request`](https://developer.mozilla.org/docs/Web/API/Request) 및 [`Response`](https://developer.mozilla.org/docs/Web/API/Response) 개체 쌍만 저장합니다. 그러나 요청 및 응답에는 HTTP를 통해 전송할 수 있는 모든 종류의 데이터가 포함될 수 있습니다.
+
+### 얼마나 저장할 수 있나요?
+
+간단히 말해서, **많이 저장할 수 있으며** 적어도 수백 MB, 경우에 따라 수 GB 이상까지도 될 수 있습니다. 브라우저 구현은 다를 수 있지만 사용 가능한 저장 공간의 양은 일반적으로 장치에서 사용 가능한 저장 공간의 양에 따라 결정됩니다.
+
+## 캐시 생성 및 열기
+
+캐시를 열려면 `caches.open(name)` 메서드를 사용하여 캐시 이름을 단일 매개변수로 전달합니다. 명명된 캐시가 없으면 생성됩니다. 이 메서드는 `Cache` 개체로 처리되는 `Promise`를 반환합니다.
+
+```js
+const cache = await caches.open('my-cache');
+// 캐시로 뭔가를 합니다...
+```
+
+## 캐시에 추가
+
+캐시에 항목을 추가하는 세 가지 방법인 `add` , `addAll` 및 `put`이 있습니다. 세 가지 방법 모두 `Promise`로 반환합니다.
+
+### `cache.add`
+
+첫째로, `cache.add()`가 있습니다. `Request` 또는 URL( `string` ) 중 하나의 매개변수를 사용합니다. 네트워크에 요청하고 응답을 캐시에 저장합니다. 가져오기에 실패하거나 응답의 상태 코드가 200번대가 아니면 아무것도 저장되지 않고 `Promise`는 거부됩니다. CORS 모드가 아닌 교차 출처 요청은 `status`를 `0`으로 반환하기 때문에 저장할 수 없다는 점을 참고해 주세요. 그러한 요청은 `put`으로만 저장할 수 있습니다.
+
+```js
+// 서버에서 data.json을 검색하고 응답을 저장합니다.
+cache.add(new Request('/data.json'));
+
+// 서버에서 data.json을 검색하고 응답을 저장합니다.
+cache.add('/data.json');
+```
+
+### `cache.addAll`
+
+다음으로 `cache.addAll()`이 있습니다. `add()`와 유사하게 작동하지만, `Request` 객체 또는 URL( `string`s)의 배열을 사용합니다. 이는 단일 요청이 캐시에 저장되지 않은 경우 `Promise`에서 거부된다는 점을 제외하고 각 개별 요청에 대해 `cache.add` 를 호출하는 것과 유사하게 작동합니다.
+
+```js
+const urls = ['/weather/today.json', '/weather/tomorrow.json'];
+cache.addAll(urls);
+```
+
+이러한 각 경우에 새 항목은 일치하는 기존 항목을 덮어씁니다. 이는 [검색](#retrieving) 섹션에서 설명한 것과 동일한 일치 규칙을 사용합니다.
+
+### `cache.put`
+
+마지막으로, 네트워크로부터의 응답을 저장하거나 자신의 `Response`를 생성 및 저장할 수 있는 `cache.put()`이 있습니다. 두 개의 매개변수를 사용합니다. 첫 번째는 `Request` 객체 또는 URL( `string`)일 수 있습니다. 두 번째는 네트워크 또는 코드에서 생성된 `Response`여야 합니다.
+
+```js
+// 서버에서 data.json을 검색하고 응답을 저장합니다.
+cache.put('/data.json');
+
+// test.json에 데힌 항목을 생성하고 새로 생성된 응답을 저장합니다.
+cache.put('/test.json', new Response('{"foo": "bar"}'));
+
+// 제3자 사이트에서 data.json을 검색하고 응답을 저장합니다.
+cache.put('https://example.com/data.json');
+```
+
+`put()` 메서드는 `add()` 또는 `addAll()` 보다 더 유연하며 CORS가 아닌 응답이나 응답의 상태 코드가 200번대에 있지 않은 다른 응답을 저장할 수 있습니다. 이는 동일한 요청에 대한 이전 응답을 덮어씁니다.
+
+#### 요청 객체 생성
+
+저장 중인 것의 URL을 사용하여 `Request` 객체를 생성합니다.
+
+```js
+const request = new Request('/my-data-store/item-id');
+```
+
+#### Response 개체 작업
+
+`Response` `Blob` , `ArrayBuffer` , `FormData` 개체 및 문자열을 비롯한 다양한 유형의 데이터를 허용합니다.
+
+```js
+const imageBlob = new Blob([data], {type: 'image/jpeg'});
+const imageResponse = new Response(imageBlob);
+const stringResponse = new Response('Hello world');
+```
+
+적절한 헤더를 설정하여 `Response`의 MIME 유형을 설정할 수 있습니다.
+
+```js
+  const options = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+  const jsonResponse = new Response('{}', options);
+```
+
+`Response` 을 검색하여 본문에 액세스하려는 경우 사용할 수 있는 몇 가지 도우미 메서드가 있습니다. 각각은 다른 유형의 값으로 처리하는 `Promise`를 반환합니다.
+
+<table>
+  <thead>
+    <th>메서드</th>
+    <th>설명</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>arrayBuffer</code></td>
+      <td>바이트로 직렬화된 본문을 포함하는<code>ArrayBuffer</code>를 반환합니다.</td>
+    </tr>
+    <tr>
+      <td><code>blob</code></td>
+      <td>
+<code>Blob</code>을 반환합니다. <code>Response</code>가 <code>Blob</code>으로 생성된 경우 새 <code>Blob</code>은 유형이 동일합니다. 그 외에는 <code>Response</code>의<code>Content-Type</code>이 사용됩니다.</td>
+    </tr>
+    <tr>
+      <td><code>text</code></td>
+      <td>본문의 바이트를 UTF-8로 인코딩된 문자열로 해석합니다.</td>
+    </tr>
+    <tr>
+      <td><code>json</code></td>
+      <td>본문의 바이트를 UTF-8로 인코딩된 문자열로 해석한 다음 JSON으로 구문 분석을 시도합니다. 결과 개체를 반환하거나 문자열을 JSON으로 구문 분석할 수 없는 경우 <code>TypeError</code>가 발생합니다.</td>
+    </tr>
+    <tr>
+      <td><code>formData</code></td>
+      <td>         Interprets the bytes of the body as an HTML form, encoded either as         <code>multipart/form-data</code> or         <code>application/x-www-form-urlencoded</code>. Returns a         <a href="https://developer.mozilla.org/docs/Web/API/FormData">FormData</a>         object, or throws a <code>TypeError</code> if the data cannot be parsed.</td>
+    </tr>
+    <tr>
+      <td><code>body</code></td>
+      <td>         Returns a <a href="https://developer.mozilla.org/docs/Web/API/ReadableStream">ReadableStream</a>         for the body data.</td>
+    </tr>
+  </tbody>
+</table>
+
+예시
+
+```js
+const response = new Response('Hello world');
+const buffer = await response.arrayBuffer();
+console.log(new Uint8Array(buffer));
+// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
+```
+
+## 캐시에서 검색 {: #retrieving }
+
+캐시에서 항목을 찾으려면 `match` 메서드를 사용할 수 있습니다.
+
+```js
+const response = await cache.match(request);
+console.log(request, response);
+```
+
+`request`가 문자열인 경우 브라우저는 `new Request(request)`를 호출하여 이를 `Request`로 변환합니다. 이 함수는 일치하는 항목이 발견되면 `Response`를 처리하는 `Promise`를 반환하거나 그렇지 않으면 `undefined`를 반환합니다.
+
+두 `Request`가 일치하는지 확인하기 위해 브라우저는 URL만 사용하지 않습니다. 쿼리 문자열, `Vary` 헤더 또는 HTTP 메서드(`GET`, `POST` , `PUT` 등)가 다른 두 요청은 서로 다른 것으로 간주됩니다.
+
+옵션 객체를 두 번째 매개변수로 전달하여 이러한 사항 중 일부 또는 전부를 무시할 수 있습니다.
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const response = await cache.match(request, options);
+// 응답으로 뭔가를 합니다.
+```
+
+캐시된 요청이 두 개 이상 일치하면 먼저 생성된 요청이 반환됩니다. *모두* 일치하는 응답을 검색하려고 하는 경우 `cache.matchAll()`을 사용할 수 있습니다.
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const responses = await cache.matchAll(request, options);
+console.log(`There are ${responses.length} matching responses.`);
+```
+
+각 캐시에 대해 `cache.match()`를 호출하는 대신`caches.match()`를 사용하여 단축키로 모든 캐시를 한 번에 검색할 수 있습니다.
+
+## 검색
+
+Cache API는 `Response` 개체에 대해 일치하는 항목을 제외하고 요청이나 응답을 검색하는 방법을 제공하지 않습니다. 그러나 필터링을 사용하거나 인덱스를 생성하여 맞춤 검색을 구현할 수 있습니다.
+
+### 필터링
+
+맞춤 검색을 구현하는 한 가지 방법은 모든 항목을 반복하고 원하는 항목으로 필터링하는 것입니다. URL이 `.png`로 끝나는 모든 항목을 찾고 싶다고 가정해 봅시다.
+
+```js
+async function findImages() {
+  // 이 원본으로부터 모든 캐시의 리스트를 가져옵니다.
+  const cacheNames = await caches.keys();
+  const result = [];
+
+  for (const name of cacheNames) {
+    // 캐시를 엽니다.
+    const cache = await caches.open(name);
+
+    // 항목의 리스트를 얻습니다. 각 항목은 Request 객체입니다.
+    for (const request of await cache.keys()) {
+      // 요청 URL이 일치하면, 결과에 응답을 추가합니다.
+      if (request.url.endsWith('.png')) {
+        result.push(await cache.match(request));
+      }
+    }
+  }
+
+  return result;
+}
+```
+
+이 방법으로 `Request` 및 `Response` 개체의 속성을 사용하여 항목을 필터링할 수 있습니다. 대규모 데이터 집합을 검색하는 경우 속도가 느립니다.
+
+### 인덱스 생성
+
+맞춤 검색을 구현하는 다른 방법은 검색할 수 있는 항목의 별도 인덱스를 유지하고 인덱스를 IndexedDB에 저장하는 것입니다. IndexedDB는 이러한 작업을 위해 설계되었기 때문에 항목이 많을수록 성능이 훨씬 좋습니다.
+
+`Request`의 URL을 검색 가능한 속성과 함께 저장하면 검색 후 올바른 캐시 항목을 쉽게 검색할 수 있습니다.
+
+## 항목 삭제
+
+캐시에서 항목을 삭제하려면:
+
+```js
+cache.delete(request);
+```
+
+여기서 요청은 `Request` 또는 URL 문자열일 수 있습니다. 이 메서드는 또한 동일한 URL에 대한 여러`Request`/`Response` 쌍을 삭제할 수 있도록 하는 `cache.match`으로 동일한 옵션 객체를 사용합니다.
+
+```js
+cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});
+```
+
+## 캐시 삭제
+
+캐시를 삭제하려면 `caches.delete(name)`를 호출하세요. 이 함수는 캐시가 존재했거나 삭제된 경우 `true`, 그렇지 않은 경우 `false`로 처리되는 `Promise`를 반환합니다.
+
+## 감사합니다
+
+WebFundamentals에 처음 발행된 이 기사의 원본 버전을 작성한 Mat Scales에게 감사드립니다.
diff --git a/src/site/content/ko/blog/carousel-best-practices/index.md b/src/site/content/ko/blog/carousel-best-practices/index.md
new file mode 100644
index 00000000000..1ef708a00c4
--- /dev/null
+++ b/src/site/content/ko/blog/carousel-best-practices/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: 캐러셀 권장사항
+subhead: 성능과 사용성을 위해 캐러셀을 최적화합니다.
+authors:
+  - katiehempenius
+description: 성능과 사용성을 위해 캐러셀을 최적화하는 방법을 알아보세요.
+date: 2021-01-26
+hero: image/admin/i7tjE04MYo7xJOZKkyQI.jpg
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소입니다. 캐러셀은 '자동 재생'하거나 사용자가 수동으로 탐색할 수 있습니다. 캐러셀은 다른 곳에서도 사용할 수 있지만 홈페이지에 이미지, 제품 및 프로모션을 표시하는 데 가장 자주 사용됩니다.
+
+이 문서에서는 캐러셀의 성능 및 UX 모범 사례에 대해 설명합니다.
+
+<figure>{% Img src="image/admin/u2FlXalClwBeDOBBiwxu.png", alt="캐러셀을 보여주는 이미지", width="629", height="420" %}</figure>
+
+## 성능
+
+잘 구현된 캐러셀은 그 자체로 성능에 미치는 영향이 매우 적거나 전혀 없습니다. 그러나 캐러셀에는 종종 큰 미디어 자산이 포함됩니다. 큰 자산은 캐러셀에 표시되는지 여부에 관계없이 성능에 영향을 줄 수 있습니다.
+
+- **LCP(Largest Contentful Paint: 최대 콘텐트풀 페인트)**
+
+    스크롤 없이 볼 수 있는 큰 캐러셀에는 종종 페이지의 LCP 요소가 포함되어 LCP에 상당한 영향을 줄 수 있습니다. 이러한 상황에서 캐러셀을 최적화하면 LCP가 크게 향상될 수 있습니다. 캐러셀이 포함된 페이지에서 LCP 측정이 작동하는 방식에 대한 자세한 설명은 [캐러셀에 대한 LCP 측정](#lcp-measurement-for-carousels) 섹션을 참조하세요.
+
+- **FID(First Input Delay: 최초 입력 지연)**
+
+    캐러셀에는 최소한의 JavaScript 요구 사항이 있어 페이지 상호 작용에 영향을 주지 않습니다. 사이트의 캐러셀에 오래 실행되는 스크립트가 있다면 캐러셀 도구 교체를 고려해야 합니다.
+
+- **CLS(Cumulative Layout Shift: 누적 레이아웃 이동)**
+
+    놀랍도록 많은 캐러셀에서 CLS의 원인이 될 수 있는 낮은 품질의 비합성 애니메이션을 사용합니다. 자동 재생 캐러셀이 있는 페이지에서 이는 무한 CLS를 유발할 가능성이 있습니다. 이러한 유형의 CLS는 일반적으로 사람의 눈으로는 분명히 보이지 않아 문제를 간과하기 쉽습니다. 이 문제를 방지하려면 캐러셀에서 [비합성 애니메이션의 사용을 피하십시오](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/).(예: 슬라이드 전환 중)
+
+## 성능 모범 사례
+
+### HTML을 사용하여 캐러셀 콘텐츠 불러오기
+
+캐러셀 콘텐츠는 페이지 로드 과정 초기에 브라우저에서 검색할 수 있도록 페이지의 HTML 마크업을 통해 로드되어야 합니다. JavaScript를 사용하여 캐러셀 콘텐츠의 로딩을 시작하는 것은 캐러셀을 사용할 때 피해야 할 가장 큰 수행 중 실수일 것입니다. 이는 이미지 로딩을 지연시키고 LCP에 부정적인 영향을 줄 수 있습니다.
+
+{% Compare 'better' %}
+
+```html
+<div class="slides">
+  <img src="https://example.com/cat1.jpg">
+  <img src="https://example.com/cat2.jpg">
+  <img src="https://example.com/cat3.jpg">
+</div>
+```
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```javascript
+const slides = document.querySelector(".slides");
+const newSlide = document.createElement("img");
+newSlide.src = "htttp://example.com/cat1.jpg";
+slides.appendChild(newSlide);
+```
+
+{% endCompare %}
+
+고급 캐러셀 최적화를 첫 번째 슬라이드를 정지 상태로 로딩한 다음, 탐색 컨트롤 및 추가 콘텐츠를 포함하도록 점진적으로 향상시키는 것을 고려하십시오. 이 기술은 사용자의 관심이 길어지는 환경에 가장 적당하며, 그러면 추가 콘텐츠를 로드할 수 있는 시간이 생깁니다. 사용자가 1, 2초 정도만 머무는 홈페이지와 같은 환경에서는 단일 이미지만 로드하는 것으로 유사한 효과를 낼 수 있습니다.
+
+### 레이아웃 이동 피하기
+
+{% Aside %}
+
+Chrome 88-90은 레이아웃 이동이 계산되는 방식과 관련된 다양한 [버그 수정](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md)을 출시했습니다. 이 버그 수정의 많은 부분이 캐러셀과 관련되어 있습니다. 이러한 수정의 결과로 사이트는 이후 버전의 Chrome에서 캐러셀 관련 레이아웃 이동 지수가 낮아질 것으로 예상하고 있습니다.
+
+{% endAside %}
+
+슬라이드 전환 및 탐색 컨트롤은 캐러셀에서 레이아웃 이동의 가장 일반적인 두 가지 소스입니다.
+
+- **슬라이드 전환:** 슬라이드 전환 중에 발생하는 레이아웃 이동은 일반적으로 DOM 요소의 레이아웃 유도 속성을 업데이트하여 발생합니다. 이러한 속성 중 일부의 예로는 `left`, `top`, `width` 및 `marginTop`가 있습니다. 레이아웃 이동을 피하려면 대신 CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) 속성을 사용하여 이러한 요소를 전환합니다. 이 [데모](https://glitch.com/~basic-carousel)는 `transform`을 사용하여 기본적인 캐러셀을 만드는 방법을 보여줍니다.
+
+- **탐색 컨트롤:** DOM에서 캐러셀 탐색 컨트롤을 이동하거나 추가/제거하면 이러한 변경 사항이 구현되는 방식에 따라 레이아웃 이동이 일어날 수 있습니다. 이 동작이 나타내는 캐러셀은 일반적으로 사용자 호버에 반응하여 그렇게 작동합니다.
+
+다음은 캐러셀에 대한 CLS 측정과 관련하여 흔히 혼동할 수 있는 몇 가지 사항입니다.
+
+- **자동 재생 캐러셀:** 슬라이드 전환은 캐러셀 관련 레이아웃 이동의 가장 일반적인 원인입니다. 자동재생이 아닌 캐러셀에서 이러한 레이아웃 이동은 일반적으로 사용자 상호작용으로부터 500ms 이내에 발생하므로 [CLS(Cumulative Layout Shift)에 포함되지 않습니다](/cls/#expected-vs-unexpected-layout-shifts). 그러나 자동 재생 캐러셀의 경우 이러한 레이아웃 이동이 잠재적으로 CLS에 포함될 수 있을 뿐만 아니라 무기한 반복될 수도 있습니다. 따라서 자동 재생 캐러셀이 레이아웃 이동의 원인이 아님을 확인하는 것이 특히 중요합니다.
+
+- **스크롤:** 일부 캐러셀에서는 스크롤을 사용하여 캐러셀 슬라이드를 탐색할 수 있습니다. 만약 요소의 시작 위치가 변경되지만 그 스크롤 오프셋(즉, [`scrollLeft`](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) 또는 [`scrollTop`](https://developer.mozilla.org/docs/Web/API/Element/scrollTop) )이 동일한 양만큼(그러나 반대 방향으로) 변경되는 경우에는 동일한 프레임에서 발생하는 한 레이아웃 이동으로 간주되지 않습니다.
+
+레이아웃 변환에 대한 자세한 내용은 [디버그 레이아웃 변환](/debug-layout-shifts/#identifying-the-cause-of-a-layout-shift)을 참조하세요.
+
+### 현대 기술의 사용
+
+많은 사이트에서 캐러셀을 구현하기 위해 [타사 JavaScript](/third-party-javascript) 라이브러리를 사용합니다. 현재 이전 캐러셀 도구를 사용하는 경우 최신 도구로 전환하여 성능을 향상시킬 수 있습니다. 최신 도구는 더 효율적인 API를 사용하는 경향이 있으며 jQuery와 같은 추가 종속성을 요구할 가능성이 적습니다.
+
+그러나 구축하는 캐러셀 유형에 따라 JavaScript가 전혀 필요하지 않을 수도 있습니다. 새로운 [Scroll Snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) API를 사용하면 HTML과 CSS만 사용하여 캐러셀 같은 전환을 구현할 수 있습니다.
+
+다음은 도움이 될 수 있는 `scroll-snap` 사용에 대한 몇 가지 리소스입니다.
+
+- [스토리 구성 요소(web.dev) 빌드](/building-a-stories-component/)
+- [차세대 웹 스타일링: 스크롤 스냅(web.dev)](/next-gen-css-2019/#scroll-snap)
+- [CSS 전용 캐러셀(CSS 트릭)](https://css-tricks.com/css-only-carousel/)
+- [CSS 전용 캐러셀을 만드는 방법(CSS 트릭)](https://css-tricks.com/how-to-make-a-css-only-carousel/)
+
+### 캐러셀 콘텐츠 최적화
+
+캐러셀에는 사이트의 가장 큰 이미지가 포함되는 경우가 많으므로 이러한 이미지가 완전히 최적화되었는지 확인하는 데 시간을 할애할 가치가 있습니다. 올바른 이미지 형식과 압축 수준을 선택하고, [이미지 CDN을 사용하고](/image-cdns), [srcset을 사용하여 여러 이미지 버전을 제공하는 것](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap)은 모두 이미지의 전송 크기를 줄일 수 있는 기술입니다.
+
+## 성능 측정
+
+이 섹션에서는 캐러셀과 관련된 LCP 측정에 대해 설명합니다. 캐러셀은 LCP 계산 중에 다른 UX 요소와 다르지 않게 취급되지만 캐러셀을 자동 재생하기 위한 LCP 계산 방식은 흔히 혼동할 수 있는 지점입니다.
+
+### 캐러셀에 대한 LCP 측정
+
+캐러셀에 대한  LCP 계산이 작동하는 방식을 이해하기 위한 핵심 내용은 다음과 같습니다.
+
+- LCP는 페이지 요소를 프레임에 그려진 것으로  간주합니다. 사용자가 페이지와 상호 작용(탭, 스크롤 또는 키 누르기)하면 LCP 요소의 새 후보는 더 이상 고려되지 않습니다. 따라서 자동 재생 캐러셀의 모든 슬라이드는 최종 LCP 요소가 될 가능성이 있는 반면, 고정 캐러셀에서는 첫 번째 슬라이드만 잠재적 LCP 후보가 됩니다.
+- 동일한 크기의 두 이미지가 렌더링되면 첫 번째 이미지가 LCP 요소로 간주됩니다. LCP 요소는 LCP 후보가 현재 LCP 요소보다 클 때만 업데이트됩니다. 따라서 모든 캐러셀 요소의 크기가 동일하면 LCP 요소가 첫 번째로 표시되는 이미지가 될 것입니다.
+- LCP 후보를 평가할 때 LCP는 "[눈에 보이는 크기 또는 고유 크기 중 더 작은 것](/lcp)"을 고려합니다. 따라서 자동 재생 캐러셀이 일관된 크기로 이미지를 표시하고 있지만, 표시되는 크기보다 작은 다양한 [고유 크기](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)의 이미지를 포함하는 경우, LCP 요소는 새 슬라이드가 표시될 때 변경될 수 있습니다. 이 경우 모든 이미지가 동일한 크기로 표시되면 고유 크기가 가장 큰 이미지가 LCP 요소로 간주됩니다. LCP를 낮게 유지하려면 자동 재생 캐러셀의 모든 항목이 동일한 고유 크기를 가지도록 해야 합니다.
+
+### Chrome 88의 캐러셀에 대한 LCP 계산 변경사항
+
+[Chrome 88](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md)부터는 DOM에서 늦게 제거되는 이미지가 잠재적인 최대 콘텐트풀 페인트로 간주됩니다. Chrome 88 이전에는 이러한 이미지는 고려 대상에서 제외되었습니다. 자동 재생 캐러셀을 사용하는 사이트의 경우 이러한 정의의 변경이 LCP 지수에 중립적이거나 긍정적인 영향을 미치게 될 것입니다.
+
+이 변경은 많은 사이트에서 이전에 표시된 이미지를 DOM 트리에서 제거하여 캐러셀 전환을 구현한다는 [관찰](https://github.com/anniesullie/LCP_Examples/tree/master/removed_from_dom)에 대한 응답으로 이루어졌습니다. Chrome 88 이전에는 새 슬라이드가 표시될 때마다, 이전 요소의 제거가 LCP 업데이트를 촉발하였습니다. 이 변경 사항은 자동 재생 캐러셀에만 영향을 미칩니다. 정의에 따라 잠재적인 최대 콘텐트풀 페인트는 사용자가 페이지와 처음 상호작용하기 전에만 발생할 수 있습니다.
+
+## 기타 고려 사항
+
+이 섹션에서는 캐러셀을 구현할 때 염두에 두어야 할 UX 및 제품 모범 사례에 대해 설명합니다. 캐러셀은 비즈니스 목표를 향상시키고 탐색하고 읽기 쉬운 방식으로 콘텐츠를 제시해야 합니다.
+
+### 탐색 모범 사례
+
+#### 눈에 띄는 탐색 컨트롤 제공
+
+캐러셀 탐색 컨트롤은 클릭하기 쉽고 눈에 잘 띄어야 합니다. 이는 거의 잘 이뤄지지 않고 있는 사항으로, 대부분의 캐러셀은 작고 보기 힘든 탐색 컨트롤을 가지고 있습니다. 단일 색상 또는 스타일의 탐색 컨트롤이 모든 상황에서 잘 작동하는 경우는 거의 없습니다. 예를 들어, 어두운 배경에서 또렷하게 보이는 화살표는 밝은 배경에서는 잘 보이지 않을 수도 있습니다.
+
+#### 탐색 진행률 표시
+
+캐러셀 탐색 컨트롤은 총 슬라이드 수와 슬라이드를 통한 사용자의 진행 상황에 대한 배경 정보를 제공해야 합니다. 이 정보를 통해 사용자는 쉽게 특정 슬라이드를 탐색하고 이미 본 콘텐츠가 어떤 것인지를 알 수 있게 됩니다. 다음 슬라이드에서 발췌한 내용이든 썸네일 목록이든 관계 없이 예정된 콘텐츠에 대한 미리보기를 제공하는 것도 도움이 되고 참여도를 높일 수 있습니다.
+
+#### 모바일 제스처 지원
+
+모바일에서 스와이프 제스처는 기존 탐색 컨트롤(예: 화면 버튼)과 함께 지원되어야 합니다.
+
+#### 대체 탐색 경로 제공
+
+대부분의 사용자가 모든 캐러셀 콘텐츠에 참여할 가능성은 낮기 때문에 캐러셀 슬라이드가 링크하는 콘텐츠는 다른 탐색 경로에서 액세스할 수 있어야 합니다.
+
+### 가독성 모범 사례
+
+#### 자동 재생 사용하지 않기
+
+자동 재생을 사용하면 역설에 가까운 두 가지 문제가 발생합니다. 화면의 애니메이션은 사용자의 주의를 흩트리고 더 중요한 정보 콘텐츠에서 시선을 빼앗습니다. 동시에 사용자는 종종 애니메이션을 광고와 연관시켜 자동 재생되는 캐러셀을 무시합니다.
+
+따라서 자동 재생이 좋은 선택인 경우는 드뭅니다. 콘텐츠가 중요한 경우 자동 재생을 사용하지 않으면 노출이 최대화됩니다. 캐러셀 콘텐츠가 중요하지 않은 경우 자동 재생을 사용하면 더 중요한 콘텐츠에서 주의를 돌리게 됩니다. 또한 자동 재생 캐러셀은 읽기 어려울 수 있습니다(귀찮기도 하고요). 사람들은 서로 다른 속도로 읽기 때문에 캐러셀이 다양한 사용자에게 '적절한' 시간에 일관되게 전환되는 경우는 드뭅니다.
+
+이상적으로는 슬라이드 탐색은 탐색 컨트롤을 통해 사용자가 지시해야 합니다. 자동 재생을 사용해야만 한다면, 자동재생은 사용자 호버에서 비활성화되어야 합니다. 또한 슬라이드 전환 속도는 슬라이드 콘텐츠를 고려해야 합니다. 슬라이드에 포함된 텍스트가 많을수록 화면에 더 오래 표시되어야 합니다.
+
+#### 텍스트와 이미지를 별도로 유지
+
+캐러셀 텍스트 콘텐츠는 종종 HTML 마크업을 사용하여 별도로 표시되지 않고 해당 이미지 파일에 '통합'됩니다. 이 접근 방식은 접근성, 현지화 및 압축률에 좋지 않습니다. 또한 자산 생성에 대한 획일적인 접근 방식을 권장합니다. 그러나 동일한 이미지 및 텍스트 형식이 데스크톱 및 모바일에서 동일하게 읽기 쉬운 경우는 거의 없습니다.
+
+#### 간결하게 만들기
+
+사용자의 관심을 끌 수 있는 시간은 1초도 되지 않습니다. 짧고 핵심을 찌르는 카피가 메시지가 전달될 확률을 높여줄 것입니다.
+
+### 제품 모범 사례
+
+캐러셀은 추가 콘텐츠를 표시하기 위해 추가적인 수직 공간을 사용할 수 없는 상황에서 잘 작동합니다. 제품 페이지의 캐러셀은 종종 이러한 사용의 좋은 예시입니다.
+
+그러나 캐러셀이 항상 효과적으로 사용되는 것은 아닙니다.
+
+- 캐러셀은 특히 프로모션이 포함되거나 자동으로 진행되는 경우 쉽게 사용자에게 광고로 [오인](https://www.nngroup.com/articles/auto-forwarding/)됩니다. 사용자는 광고를 무시하는 경향이 있는데, 이것은 [배너 광고 회피](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/) 현상으로 알려져 있습니다.
+- 캐러셀은 여러 부서를 달래고 비즈니스 우선 순위에 대한 결정을 회피하기 위해 자주 사용됩니다. 결과적으로 캐러셀은 비효율적인 콘텐츠의 쓰레기장으로 쉽게 변질될 수 있습니다.
+
+#### 추정 사항의 점검
+
+캐러셀, 특히 홈페이지에 대한 캐러셀의 비즈니스 효과는 평가와 테스트를 받아야 합니다. 캐러셀 클릭률은 캐러셀과 캐러셀의 콘텐츠가 효과적인지 판단하는 데 도움이 됩니다.
+
+#### 관련성
+
+캐러셀은 명확한 맥락과 함께 흥미롭고 관련성 높은 콘텐츠를 포함할 때 가장 잘 작동합니다. 콘텐츠가 캐러셀 외부에 있는 사용자의 주의를 끌지 못한다면, 캐러셀에 콘텐츠를 배치해도 성능은 향상되지 않습니다. 캐러셀을 꼭 사용해야 한다면, 콘텐츠의 우선 순위를 지정하고 사용자가 클릭하여 다음 슬라이드로 가고 싶어할 만큼 각 슬라이드가 관련성을 가지도록 하십시오.
diff --git a/src/site/content/ko/blog/centering-in-css/index.md b/src/site/content/ko/blog/centering-in-css/index.md
new file mode 100644
index 00000000000..614e998630b
--- /dev/null
+++ b/src/site/content/ko/blog/centering-in-css/index.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: CSS에서 센터링
+subhead: 5가지 센터링 기술을 따라 일련의 테스트를 거치면서 어떤 것이 변경에 가장 탄력적인지 확인하십시오.
+authors:
+  - adamargyle
+description: 5가지 센터링 기술에 따라 일련의 테스트를 거쳐 어떤 것이 변경에 가장 탄력적인지 확인하십시오.
+date: 2020-12-16
+hero: image/admin/uz0bDoJvK4kbtjozekGA.png
+thumbnail: image/admin/4NFENgpVrXHi2O42mv0K.png
+codelabs: codelab-centering-in-css
+tags:
+  - blog
+  - css
+  - layout
+  - intl
+---
+
+CSS에서 센터링은 농담과 조롱으로 가득 찬 악명 높은 도전입니다. 2020 CSS는 모두 성장했으며 이제 이를 악물면서가 아니라 그 농담에 정직하게 웃을 수 있습니다.
+
+비디오를 선호하는 경우 이 게시물의 YouTube 버전이 있습니다.
+
+{% YouTube 'ncYzTvEMCyE' %}
+
+## 당면 과제
+
+다양한 사용 사례에서부터  센터링 수 등 **센터링에는 다양한 유형이 있습니다.** "승리" 센터링 기술의 근거를 설명하기 위해 Resilience Ringer를 만들었습니다. 각 센터링 전략에 대한 일련의 스트레스 테스트로 내부 균형을 유지하고 성능을 관찰할 수 있습니다. 마지막으로 '가장 가치 있는' 기술은 물론 최고 득점 기술까지 공개합니다. 새로운 센터링 기술과 솔루션을 알아보십시오.
+
+### Resilience Ringer
+
+Resilience Ringer는 센터링 전략이 국제 레이아웃, 다양한 크기의 뷰포트, 텍스트 편집 및 동적 콘텐츠에 탄력적이어야 한다는 신념을 나타냅니다. 이러한 원칙은 센터링 기술이 견딜 수 있도록 다음과 같은 탄력성 테스트를 형성하는 데 도움이 되었습니다.
+
+1. **스퀴시:** 센터링은 너비의 변경 사항을 처리할 수 있어야 합니다.
+2. **스퀴시:** 센터링은 너비의 변경 사항을 처리할 수 있어야 합니다.
+3. **복제:** 가운데 맞춤은 항목 수에 따라 동적이어야 합니다.
+4. **편집:** 센터링은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.
+5. **흐름:** 센터링은 문서 방향 및 쓰기 모드에 구애받지 않아야 합니다.
+
+승리 솔루션은 뭉개지고, 찌그러지고, 복제되고, 편집되고, 다양한 언어 모드와 방향으로 바뀌면서 콘텐츠를 중앙에 유지하여 탄력성을 보여야 합니다. 믿을 수 있고 탄력적이며 안전한 센터.
+
+#### 범례
+
+컨텍스트에서 일부 메타 정보를 유지하는 데 도움이 되는 몇 가지 시각적 색상 힌트를 제공했습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4K35cL1tVpEsGqb4FgKp.png", alt="", width="800", height="438" %}<figcaption></figcaption></figure>
+
+- 분홍색 테두리는 센터링 스타일의 소유권을 나타냅니다.
+- 회색 상자는 항목을 중앙에 배치하려는 컨테이너의 배경입니다.
+- 각 하위 항목의 배경색은 흰색이므로 센터링 기술이 하위 상자 크기에 미치는 영향을 확인할 수 있습니다(있는 경우).
+
+## 5명의 참가자
+
+5가지 센터링 테크닉이 Resilience Ringer에 들어가고, 오직 하나만 Resilience Crown 👸을 받게 됩니다.
+
+### 1. 콘텐츠 센터
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/content-center-ringer-cycle.mp4">
+  </source></video>
+  <figcaption><a href="https://github.com/GoogleChromeLabs/ProjectVisBug#visbug">VisBug</a>로 콘텐츠 편집 및 복제</figcaption></figure>
+
+1. **스퀴시** : 굉장해!
+2. **스쿼시** : 좋아!
+3. **중복** : 훌륭합니다!
+4. **편집** : 훌륭합니다!
+5. **흐름** : 좋아!
+
+`display: grid`와 `place-content` 약칭의 간결함을 이기기는 어려울 것입니다. 하위 항목을 집합적으로 중앙에 정렬하고 양쪽 맞춤하므로 읽을 요소 그룹에 대한 견고한 중앙 정렬 기술입니다.
+
+```css
+.content-center {
+  display: grid;
+  place-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 제한된 공간과 오버플로에서도 콘텐츠가 중앙에 배치됩니다. - 중앙 정렬 편집 및 유지 관리가 모두 한 곳에서 이루어집니다. - 간격은 _n_개의 하위 항목 간에 동일한 간격을 보장합니다. - 그리드는 기본적으로 행을 생성합니다.</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">가장 넓은 자식( <code data-md-type="codespan">max-content</code> )은 나머지 모든 항목의 너비를 설정합니다. 이것에 대해서는 <a href="#gentle-flex" data-md-type="link">Gentle Flex</a>에서 자세히 논의할 것입니다.</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+일반적으로 단락과 헤드 라인, 프로토 타입, 또는 읽기 중심 필요한 것을 포함하는 매크로 레이아웃에 **적합합니다.**
+
+{% Aside %} `place-content`는 `display: grid` 전용이 아닙니다. `display: flex` `place-content` 및 `place-item` [약칭](https://codepen.io/argyleink/pen/PoqWOPZ)의 이점을 누릴 수 있습니다. {% endAside %}
+
+### 2. Gentle Flex
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gentle-flex-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **스퀴시:** 굉장해!
+2. **스쿼시:** 좋아!
+3. **중복:** 훌륭합니다!
+4. **편집:** 훌륭합니다!
+5. **흐름:** 좋아!
+
+Gentle Flex는 진정한 센터링 *전용* 전략입니다. 부드럽고 온화 `place-content: center`와 달리 센터링 중에 하위 상자 크기가 변경되지 않기 때문입니다. 가능한 한 부드럽게 모든 항목이 쌓이고 중앙에 배치되고 간격이 지정됩니다.
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 정렬, 방향 및 배포만 처리 - 편집 및 유지 관리가 모두 한 곳에서 수행됨 - 간격은 _n_ 하위 항목 사이에 동일한 간격을 보장합니다.</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">대부분의 코드 라인</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+매크로 및 마이크로 레이아웃 모두에 **적합합니다.**
+
+{% Aside "key-term" %} **매크로 레이아웃**은 국가의 주 또는 영토와 같습니다. 매우 높은 수준의 넓은 적용 범위입니다. 매크로 레이아웃으로 생성된 영역은 더 많은 레이아웃을 포함하는 경향이 있습니다. 레이아웃이 덮는 표면이 적을수록 매크로 레이아웃이 적어집니다. 레이아웃이 더 적은 표면적을 포함하거나 더 적은 레이아웃을 포함함에 따라 더 마이크로 레이아웃이 됩니다. {% endAside %}
+
+### 3. 오토봇
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/autobot-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **스퀴시:** 굉장해
+2. **스쿼시:** 훌륭하다
+3. **중복:** 좋아
+4. **편집:** 훌륭하다
+5. **흐름:** 훌륭하다
+
+컨테이너는 정렬 스타일 없이 flex로 설정되는 반면, 직계 자식은 자동 여백으로 스타일이 지정됩니다. `margin: auto` 요소의 모든 면에서 자동으로 작업하는 데에는 향수를 불러일으키고 멋진 것이 있습니다.
+
+```css
+.autobot {
+  display: flex;
+}
+.autobot > * {
+  margin: auto;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 재미있는 트릭 - 빠르고 더러운</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">넘칠 때 어색한 결과</li>
+<li data-md-type="list_item" data-md-list-type="unordered">간격 대신 분포에 대한 의존은 측면에 닿는 하위 항목과 함께 레이아웃이 발생할 수 있음을 의미합니다.</li>
+<li data-md-type="list_item" data-md-list-type="unordered">제자리에 "밀어넣는" 것은 최적이 아닌 것처럼 보이며 하위 상자 크기가 변경될 수 있습니다.</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+아이콘 또는 의사 요소의 센터링에 **적합합니다.**
+
+### 4. 플러피 센터
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/fluffy-center-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **스퀴시:** 나쁨
+2. **스쿼시:** 나쁨
+3. **중복:** 나쁨
+4. **편집:** 훌륭합니다!
+5. **흐름:** 좋아! (논리적 속성을 사용하는 한)
+
+참가자 "플러피 센터"는 단연코 가장 맛있는 소리를 내는 경쟁자이며 전적으로 요소/하위 항목 소유의 유일한 센터링 기술입니다. 우리 솔로 내부 핑크 테두리가 보이시나요!?
+
+```css
+.fluffy-center {
+  padding: 10ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 콘텐츠 보호 - Atomic - 모든 테스트에는 이 중심 전략이 비밀리에 포함되어 있습니다. - Word space is gap</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">쓸모가 없다는 착각</li>
+<li data-md-type="list_item" data-md-list-type="unordered">컨테이너와 품목 사이에 충돌이 있습니다. 자연스럽게 각각의 크기가 매우 확고하기 때문입니다.</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+단어나 구문 중심의 센터링, 태그, 알약, 버튼, 칩 등에 **적합합니다.**
+
+### 5. 팝 &amp; 플롭
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/popnplop-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **스퀴시:** 양호
+2. **스쿼시:** 양호
+3. **중복:** 나쁨
+4. **편집:** 좋음
+5. **흐름:** 좋음
+
+이것은 절대 위치가 정상적인 흐름에서 요소가 불쑥 튀어나오기 때문에 "팝"이라고 합니다. 이름의 "플롭" 부분은 내가 가장 유용하다고 생각하는 부분에서 유래했습니다. 콘텐츠 크기에 유연하고 역동적인 고전적이고 편리한 오버레이 센터링 기술입니다. 때로는 다른 UI 위에 UI를 배치해야 하는 경우가 있습니다.
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - 유용함 - 신뢰할 수 있음 - 필요할 때 매우 유용합니다.</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">음수 백분율 값이 있는 코드</li>
+<li data-md-type="list_item" data-md-list-type="unordered">
+<code data-md-type="codespan">position: relative</code> 필요: 포함하는 블록을 강제로 기준</li>
+<li data-md-type="list_item" data-md-list-type="unordered">초기 및 어색한 줄 바꿈</li>
+<li data-md-type="list_item" data-md-list-type="unordered">추가 노력 없이 포함 블록당 1개만 있을 수 있습니다.</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+조동사, 토스트와 메시지, 스택 및 깊이 효과, 팝오버에 **적합합니다.**
+
+## 승자
+
+섬에서 1개의 센터링 기술만 가질 수 있다면 그것은…
+
+[드럼 롤]
+
+**젠틀 플렉스** 🎉
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+매크로 및 마이크로 레이아웃 모두에 유용하기 때문에 내 스타일시트에서 항상 찾을 수 있습니다. 내 기대와 일치하는 결과를 제공하는 신뢰할 수 있는 만능 솔루션입니다. 또한 나는 본질적인 크기 조정 중독자이기 때문에 이 솔루션으로 졸업하는 경향이 있습니다. 사실, 입력해야 할 것이 많지만 이것이 제공하는 이점은 추가 코드보다 큽니다.
+
+### MVP
+
+**플러피 센터**
+
+```css
+.fluffy-center {
+  padding: 2ch;
+}
+```
+
+플러피 센터는 너무 미세해서 센터링 기술로 간과하기 쉽지만 제 센터링 전략의 핵심입니다. 너무 원자적이어서 가끔 그것을 사용하고 있다는 사실을 잊어버립니다.
+
+### 결론
+
+어떤 유형의 것들이 센터링 전략을 깨뜨립니까? 탄력성 링거에 추가할 수 있는 다른 과제는 무엇입니까? 컨테이너의 해석과 자동 높이 스위치를 고려했습니다. 그 외에는 무엇이 있을까요!?
+
+이제 방법을 알았으니 어떻게 하시겠습니까?! 접근 방식을 다양화하고 웹에서 구축하는 모든 방법을 알아보겠습니다. 이 게시물의 코드랩을 따라 이 게시물에 있는 것처럼 자신만의 센터링 예제를 만드십시오. 버전을 [트윗](https://twitter.com/argyleink)하면 아래 [커뮤니티 리믹스](#community-remixes) 섹션에 추가하겠습니다.
+
+## 커뮤니티 리믹스
+
+- [블로그 게시물](https://css-tricks.com/centering-in-css/)을 사용한 [CSS 트릭](https://css-tricks.com/)
diff --git a/src/site/content/ko/blog/color-scheme/index.md b/src/site/content/ko/blog/color-scheme/index.md
new file mode 100644
index 00000000000..613c8ebb17b
--- /dev/null
+++ b/src/site/content/ko/blog/color-scheme/index.md
@@ -0,0 +1,189 @@
+---
+title: "'color-scheme' CSS 속성과 해당 메타 태그를 사용하여 다크 모드 기본 스타일을 개선"
+subhead: |2
+
+  'color-scheme' CSS 속성 및 해당 메타 태그
+
+  개발자가 사용자 에이전트 스타일시트의 테마별 기본값으로 페이지를 선택하도록 허용합니다.
+authors:
+  - thomassteiner
+date: 2020-04-08
+updated: 2021-10-19
+hero: image/admin/rOe3wxcy28m5DCKcHv7E.jpg
+alt: 배경에 선명한 흑백 대비가 있는 벽에 있는 비둘기.
+description: |2
+
+  색 구성표 CSS 속성 및 해당 메타 태그
+
+  개발자가 사용자 에이전트 스타일시트의 테마별 기본값으로 페이지를 선택할 수 있도록 합니다.
+
+  예를 들어 양식 컨트롤, 스크롤 막대 및 CSS 시스템 색상과 같은 것입니다.
+
+  동시에 이 기능은 브라우저가 자체적으로 변환을 적용하는 것을 방지합니다.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## 배경
+
+### `prefers-color-scheme` 사용자 기본 설정 미디어 기능
+
+[`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) 사용자 기본 설정 미디어 기능을 통해 개발자는 페이지 모양을 완전히 제어할 수 있습니다. 익숙하지 않은 경우 내 기사 [`prefers-color-scheme`: Hello dark, my old friend](/prefers-color-scheme/)를 읽어보세요. 여기에서 놀라운 다크 모드 경험을 만드는 방법에 대해 알고 있는 모든 것을 문서화했습니다.
+
+기사에서 간략하게만 언급된 퍼즐 조각 중 하나는 `color-scheme` CSS 속성과 동일한 이름의 해당 메타 태그입니다. 둘 다 예를 들어 양식 컨트롤, 스크롤 막대 및 CSS 시스템 색상과 같은 사용자 에이전트 스타일시트의 테마별 기본값에 페이지를 선택할 수 있도록 하여 개발자로서의 삶을 더 쉽게 만듭니다. 동시에 이 기능은 브라우저가 자체적으로 변환을 적용하는 것을 방지합니다.
+
+### 사용자 에이전트 스타일시트
+
+계속하기 전에 사용자 에이전트 스타일시트가 무엇인지 간략하게 설명하겠습니다. 대부분의 경우 *사용자 에이전트* *(UA)라는 단어를 브라우저* 를 말하는 멋진 방법으로 생각할 수 있습니다. UA 스타일시트는 페이지의 기본 모양과 느낌을 결정합니다. 이름에서 알 수 있듯이 UA 스타일시트는 해당 UA에 의존하는 것입니다. [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) (및 Chromium) UA 스타일시트를 보고 [Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) 또는 [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) (및 WebKit)와 비교할 수 있습니다. 일반적으로 UA 스타일시트는 대부분의 항목에 동의합니다. 예를 들어, 그들은 모두 링크를 파란색, 일반 텍스트 검정색, 배경색을 흰색으로 만들지만 양식 컨트롤의 스타일을 지정하는 방법과 같이 중요하고(때로는 짜증나는) 차이점도 있습니다.
+
+[WebKit의 UA 스타일시트](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)와 이것이 다크 모드와 관련하여 하는 일을 자세히 살펴보십시오. (스타일시트에서 "dark"에 대한 전체 텍스트 검색을 수행하십시오.) 스타일시트에서 제공하는 기본값은 다크 모드가 켜져 있는지 여부에 따라 변경됩니다. [`:matches`](https://css-tricks.com/almanac/selectors/m/matches/) `-apple-system-control-background` 같은 WebKit 내부 변수와 WebKit 내부 전처리기 지시문 `#if defined` 사용하는 CSS 규칙이 있습니다.
+
+```css
+input,
+input:matches([type="password"], [type="search"]) {
+  -webkit-appearance: textfield;
+  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
+      HAVE_OS_DARK_MODE_SUPPORT
+    color: text;
+    background-color: -apple-system-control-background;
+  #else
+    background-color: white;
+  #endif
+  /* snip */
+}
+```
+
+`color` 및 `background-color` 속성에 대한 일부 비표준 값을 확인할 수 있습니다. `text`나 `-apple-system-control-background` 모두 유효한 CSS 색상이 아닙니다. WebKit 내부 *시맨틱* 색상입니다.
+
+CSS는 의미 체계 색상을 표준화했습니다. [CSS 색상 모듈 레벨 4](https://drafts.csswg.org/css-color/#css-system-colors)에 지정되어 있습니다. 예를 들어 [`Canvas`](https://drafts.csswg.org/css-color/#valdef-system-color-canvas) `<canvas>` 태그와 혼동하지 말 것)는 애플리케이션 콘텐츠 또는 문서의 배경 [`CanvasText`](https://drafts.csswg.org/css-color/#valdef-system-color-canvastext)인 반면 CanvasText는 애플리케이션 콘텐츠 또는 문서의 텍스트용입니다. 이 둘은 함께 사용되며 단독으로 사용하면 안 됩니다.
+
+UA 스타일시트는 고유한 독점 또는 표준화된 의미 체계 색상을 사용하여 기본적으로 HTML 요소를 렌더링하는 방법을 결정할 수 있습니다. 운영 체제가 어두운 모드로 설정되어 있거나 어두운 테마를 사용하는 경우 `CanvasText` (또는 `text`)는 조건부로 흰색으로 설정되고 `Canvas` (또는 `-apple-system-control-background`)는 검은색으로 설정됩니다. 그런 다음 UA 스타일시트는 다음 CSS를 한 번만 할당하고 밝은 모드와 어두운 모드를 모두 포함합니다.
+
+```css
+/**
+  Not actual UA stylesheet code.
+  For illustrative purposes only.
+*/
+body {
+  color: CanvasText;
+  background-color: Canvas
+}
+```
+
+## `color-scheme` CSS 속성
+
+[CSS 색상 조정 모듈 레벨 1](https://drafts.csswg.org/css-color-adjust/) 사양은 다크 모드, 대비 조정 또는 원하는 특정 색상 구성표와 같은 사용자 기본 설정을 처리할 목적으로 사용자 에이전트에 의한 자동 색상 조정에 대한 제어 및 모델을 소개합니다.
+
+[`color-scheme`](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop) 속성은 요소가 렌더링하기에 편안한 색 구성표를 나타낼 수 있도록 합니다. 이러한 값은 사용자의 기본 설정과 협상되어 CSS 시스템 색상의 사용된 값뿐만 아니라 양식 컨트롤 및 스크롤 막대의 기본 색상과 같은 사용자 인터페이스(UI) 항목에 영향을 미치는 선택된 색상 구성표가 생성됩니다. 현재 지원되는 값은 다음과 같습니다.
+
+- *`normal`* 요소가 색 구성표를 전혀 인식하지 못하므로 요소가 브라우저의 기본 색 구성표로 렌더링되어야 함을 나타냅니다.
+
+- *`[ light | dark ]+`* 요소가 나열된 색상 구성표를 인식하고 처리할 수 있음을 나타내며 이들 사이의 정렬된 기본 설정을 나타냅니다.
+
+{% Aside 'note' %} 두 키워드를 모두 제공하면 첫 번째 구성표가 작성자가 선호함을 나타내지만 사용자가 대신 선호하는 경우 두 번째 구성표도 허용됩니다. {% endAside %}
+
+이 목록에서 `light`는 밝은 배경색과 어두운 전경색을 사용하여 밝은 색 구성표를 `dark`는 어두운 배경색과 밝은 전경색으로 반대를 나타냅니다.
+
+모든 요소에 대해 색 구성표로 렌더링하면 요소에 대해 브라우저에서 제공하는 모든 UI에서 사용되는 색이 색 구성표의 의도와 일치해야 합니다. 예를 들면 스크롤 막대, 맞춤법 검사 밑줄, 양식 컨트롤 등이 있습니다.
+
+{% Aside 'note' %} `color-scheme` CSS 속성은 `:root` 수준과 개별 요소 수준 모두에서 사용할 수 있습니다. {% endAside %}
+
+`:root` 요소에서 색 구성표를 사용한 렌더링은 추가로 캔버스의 표면 색상(즉, 전역 배경색), `color` 속성의 초기 값 및 시스템 색상의 사용 값에 영향을 주어야 하며 또한 뷰포트의 스크롤 막대에 영향을 줍니다.
+
+```css
+/*
+  The page supports both dark and light color schemes,
+  and the page author prefers dark.
+*/
+:root {
+  color-scheme: dark light;
+}
+```
+
+## `color-scheme` 메타 태그
+
+`color-scheme` CSS 속성을 준수하려면 CSS를 먼저 다운로드하고(`<link rel="stylesheet">`를 통해 참조하는 경우) 구문 분석해야 합니다. 사용자 에이전트가 페이지 배경을 원하는 색 구성표로 *즉시* `color-scheme` [`<meta name="color-scheme">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme) 요소에 제공할 수도 있습니다.
+
+```html
+<!--
+  The page supports both dark and light color schemes,
+  and the page author prefers dark.
+-->
+<meta name="color-scheme" content="dark light">
+```
+
+## `color-scheme`와 `prefers-color-scheme` 색상 구성표 결합
+
+메타 태그와 CSS 속성(`:root` 요소에 적용된 경우) 모두 결국 동일한 동작을 일으키므로 항상 메타 태그를 통해 색 구성표를 지정하는 것이 좋습니다. 그러면 브라우저가 선호하는 구성표를 더 빨리 채택할 수 있습니다.
+
+절대 기준선 페이지의 경우 추가 CSS 규칙이 필요하지 않지만 일반적인 경우 항상 `color-scheme`과 `prefers-color-scheme`를 결합해야 합니다. 예를 들어 WebKit 및 Chrome에서 클래식 링크 파란색 `rgb(0,0,238)`에 대해 사용하는 독점 WebKit CSS 색상 `-webkit-link`는 검은색 배경에서 명암비가 2.23:1로 충분하지 않으며 WCAG AA는 물론 WCAG AAA [요구 사항](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels) 둘 다에서 [실패](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000)합니다.
+
+[Chrome](https://crbug.com/1066811), [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209851) 및 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1626560)에 대한 버그와 H[TML 표준의 메타 문제](https://github.com/whatwg/html/issues/5426)를 열어 이 문제를 해결했습니다.
+
+## `prefers-color-scheme`와의 상호 작용
+
+`color-scheme` CSS 속성과 해당 메타 태그와 `prefers-color-scheme` 사용자 기본 설정 미디어 기능의 상호 작용은 처음에는 혼란스러워 보일 수 있습니다. 사실 둘이서 정말 잘 놀아요. 이해해야 할 가장 중요한 것은 `color-scheme`이 기본 모양을 독점적으로 결정하는 반면, `prefers-color-scheme`은 스타일 가능한 모양을 결정한다는 것입니다. 이를 명확히 하기 위해 다음 페이지를 가정합니다.
+
+```html
+<head>
+  <meta name="color-scheme" content="dark light">
+  <style>
+    fieldset {
+      background-color: gainsboro;
+    }
+    @media (prefers-color-scheme: dark) {
+      fieldset {
+        background-color: darkslategray;
+      }
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Lorem ipsum dolor sit amet, legere ancillae ne vis.
+  </p>
+  <form>
+    <fieldset>
+      <legend>Lorem ipsum</legend>
+      <button type="button">Lorem ipsum</button>
+    </fieldset>
+  </form>
+</body>
+```
+
+페이지의 인라인 CSS 코드는 설정 `<fieldset>` 요소의 `background-color` 하는 `gainsboro` 일반적인 경우에,하고 `darkslategray` 사용자가 선호하는 경우 `dark` 에 따라 색상 `prefers-color-scheme` 사용자 환경 미디어 기능을.
+
+`<meta name="color-scheme" content="dark light">` 요소를 통해 페이지는 브라우저에 어두운 테마에 대한 기본 설정과 함께 어둡고 밝은 테마를 지원한다고 알려줍니다.
+
+운영 체제가 어두운 모드로 설정되어 있는지 밝은 모드로 설정되어 있는지에 따라 사용자 에이전트 스타일시트에 따라 전체 페이지가 어둡게 표시되거나 그 반대의 경우도 마찬가지입니다. 단락 텍스트 또는 페이지의 배경색을 변경하기 위해 개발자가 제공한 추가 CSS가 *없습니다.*
+
+페이지에서 개발자가 제공한 인라인 스타일시트의 규칙에 따라 다크 모드가 활성화되었는지 여부에 따라 `<fieldset>` 요소의 `background-color`가 변화합니다. `gainsboro` 또는 `darkslategray` 중 하나입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSgOIiGRqjw2PvRlVCaV.png", alt="밝은 모드의 페이지입니다.", width="800", height="322" %}<figcaption> <strong>라이트 모드:</strong> 개발자와 사용자 에이전트가 지정한 스타일입니다. 사용자 에이전트 스타일시트에 따라 텍스트는 검정색이고 배경은 흰색입니다. <code>&lt;fieldset&gt;</code> 요소의 <code>background-color</code>은 인라인 개발자 스타일시트에 따라 <code>gainsboro</code>입니다.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qqkHz83kerktbDIGCJeG.png", alt="어두운 모드의 페이지입니다.", width="800", height="322" %}<figcaption> <strong>다크 모드:</strong> 개발자와 사용자 에이전트가 지정한 스타일입니다. 사용자 에이전트 스타일시트에 따라 텍스트는 흰색이고 배경은 검은색입니다. <code>&lt;fieldset&gt;</code> 요소의 <code>background-color</code> 은 인라인 개발자 스타일시트에 따라 <code>darkslategray</code>입니다.</figcaption></figure>
+
+`<button>` 요소의 모양은 사용자 에이전트 스타일시트에 의해 제어됩니다. `color`가 [`ButtonText`](https://drafts.csswg.org/css-color/#valdef-system-color-buttontext) 시스템 색상으로 설정되고 `background-color` 및 네 개의 `border-color`는 시스템 색상 [`ButtonFace`](https://drafts.csswg.org/css-color/#valdef-system-color-buttonface)로 설정됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lSNFROIe1P94DlhoVtoV.png", alt="ButtonFace 속성을 사용하는 라이트 모드 페이지입니다.", width="800", height="322" %}<figcaption> <strong>라이트 모드:</strong> <code>background-color</code> 및 다양한 <code>border-color</code>가 <a href="https://drafts.csswg.org/css-color/#valdef-system-color-buttonface">ButtonFace</a> 시스템 색상으로 설정됩니다.</figcaption></figure>
+
+`<button>` 요소의 `border-color`가 어떻게 변경되는지 확인합니다. `border-top-color`과 `border-bottom-color`에 대한 *계산된* 값은 `rgba(0, 0, 0, 0.847)`(어두움)에서 `rgba(255, 255, 255, 0.847)`(밝음)으로 전환합니다. 사용자 에이전트는 색상 구성표에 따라 `ButtonFace`를 동적으로 업데이트하기 때문입니다. 관련 시스템 색상 `ButtonText`에 설정된 `<button>`요소의 `color`에 대해 같은 방식이 적용됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IogmyIzUhokJgnnxUkPi.png", alt="계산된 색상 값이 ButtonFace와 일치함을 표시합니다.", width="800", height="322" %}<figcaption> <strong>라이트 모드:</strong> 사용자 에이전트 스타일시트에서 <code>ButtonFace</code>로 설정된 <code>border-top-color</code> 및 <code>border-bottom-color</code>의 계산된 값 <code>rgba(0, 0, 0, 0.847)</code>입니다.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3sU1uZyt3zNhEgw3gpZJ.png", alt="어두운 모드에서 계산된 색상 값이 ButtonFace와 여전히 일치함을 표시합니다.", width="800", height="322" %}<figcaption> <strong>다크 모드:</strong> 사용자 에이전트 스타일시트에서 <code>ButtonFace</code>로 설정된 <code>border-top-color</code> 및 <code>border-bottom-color</code>의 계산된 값은 이제 <code>rgba(255, 255, 255, 0.847)</code>입니다.</figcaption></figure>
+
+## 데모
+
+[Glitch](https://color-scheme-demo.glitch.me/) 의 데모에서 많은 수의 HTML 요소에 적용된 `color-scheme` 의 효과를 볼 수 있습니다. 데모는 [위의 경고](#using-color-scheme-in-practice)에 언급된 링크 색상으로 WCAG AA 및 WCAG AAA [위반](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000)을 *의도적으로* 보여줍니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqXapQKcNbyE3uwEOELO.png", alt="라이트 모드에 있는 데모입니다.", width="800", height="982" %}<figcaption> <a href="https://color-scheme-demo.glitch.me/">데모</a>가 <code>color-scheme: light</code> 전환되었습니다.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9G4hFdtSSwPLOm57zedD.png", alt="다크 모드에 있는 데모입니다.", width="800", height="982" %}<figcaption> <a href="https://color-scheme-demo.glitch.me/">데모</a>가 <code>color-scheme: dark</code> 전환되었습니다. 링크 색상과 함께 WCAG AA 및 WCAG AAA <a href="https://webaim.org/resources/contrastchecker/?fcolor=0000EE&amp;bcolor=000000">위반</a>에 유의하십시오.</figcaption></figure>
+
+## 감사의 말
+
+`color-scheme` CSS 속성과 해당 메타 태그는 [Rune Lillesveen](https://github.com/lilles)에 의해 구현되었습니다. Rune은 CSS 색상 조정 모듈 레벨 1 사양의 공동 편집자이기도 합니다. [Unsplash](https://unsplash.com/@philinit?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)의 [Philippe Leone](https://unsplash.com/photos/dbFfEBOCrkU)의 영웅 이미지.
diff --git a/src/site/content/ko/blog/commonjs-larger-bundles/index.md b/src/site/content/ko/blog/commonjs-larger-bundles/index.md
new file mode 100644
index 00000000000..2effe5a4af8
--- /dev/null
+++ b/src/site/content/ko/blog/commonjs-larger-bundles/index.md
@@ -0,0 +1,243 @@
+---
+title: CommonJS가 번들을 더 크게 만드는 방법
+subhead: CommonJS 모듈이 애플리케이션의 트리 쉐이킹에 어떻게 영향을 미치는지 알아보십시오.
+authors:
+  - mgechev
+date: 2020-05-08
+updated: 2020-05-26
+hero: image/admin/S5JWmwRRW3rEXKwJR0JA.jpg
+alt: CommonJS가 번들을 더 크게 만드는 방법
+description: |-
+  CommonJS 모듈은 JavaScript를 방지하는 매우 동적입니다.
+  옵티마이저와 번들은 이에 대해 고급 최적화를 수행합니다.
+tags:
+  - blog
+  - javascript
+  - modules
+---
+
+이 포스트에서 우리는 CommonJS가 무엇이고 왜 그것이 당신의 JavaScript 번들을 필요 이상으로 크게 만드는지 살펴볼 것입니다.
+
+요약: 번 **들러가 애플리케이션을 성공적으로 최적화할 수 있도록 하려면 CommonJS 모듈에 의존하지 말고 전체 애플리케이션에서 ECMAScript 모듈 구문을 사용하십시오.**
+
+## CommonJS는 무엇입니까?
+
+CommonJS는 JavaScript 모듈에 대한 규칙을 수립한 2009년의 표준입니다. 처음에는 주로 서버 측 응용 프로그램을 위해 웹 브라우저 외부에서 사용하기 위한 것이었습니다.
+
+CommonJS를 사용하면 모듈을 정의하고 모듈에서 함수를 내보내고 다른 모듈로 가져올 수 있습니다. 예를 들어, 정의 아래의 조각 5개 함수 추출 모듈: `add` , `subtract` , `multiply` , `divide` 및 `max`:
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+나중에 다른 모듈에서 다음 함수 중 일부 또는 전체를 가져와 사용할 수 있습니다.
+
+```javascript
+// index.js
+const { add } = require('./utils');
+console.log(add(1, 2));
+```
+
+`node`로 `index.js`를 호출하면 콘솔에 `3`이 출력됩니다.
+
+2010년대 초 브라우저에 표준화된 모듈 시스템이 없었기 때문에 CommonJS는 JavaScript 클라이언트 측 라이브러리에서도 널리 사용되는 모듈 형식이 되었습니다.
+
+## CommonJS는 최종 번들 크기에 어떤 영향을 줍니까?
+
+서버 측 JavaScript 애플리케이션의 크기는 브라우저에서만큼 중요하지 않기 때문에 CommonJS는 프로덕션 번들 크기를 줄이도록 설계되지 않았습니다. 동시에, [분석](https://v8.dev/blog/cost-of-javascript-2019)에 따르면 JavaScript 번들 크기가 여전히 브라우저 앱을 느리게 만드는 가장 큰 이유입니다.
+
+`webpack`  및 `terser`와 같은 JavaScript 번들 및 미니파이어는 앱 크기를 줄이기 위해 다양한 최적화를 수행합니다. 빌드 시 애플리케이션을 분석하면서 사용하지 않는 소스 코드에서 최대한 제거하려고 합니다.
+
+예를 들어 위의 스니펫에서 최종 번들은 `index.js`에서 가져오는 `utils.js`의 유일한 기호이기 때문에 `add` 함수만 포함해야 합니다.
+
+`webpack` 구성을 사용하여 앱을 빌드해 보겠습니다.
+
+```javascript
+const path = require('path');
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'production',
+};
+```
+
+여기에서 프로덕션 모드 최적화를 사용하고 `index.js`를 진입점으로 사용하도록 지정합니다. `webpack`를 호출한 후 [출력](https://github.com/mgechev/commonjs-example/blob/master/commonjs/dist/out.js) 크기를 탐색하면 다음과 같이 표시됩니다.
+
+```shell
+$ cd dist && ls -lah
+625K Apr 13 13:04 out.js
+```
+
+**번들은 625KB** 입니다. 출력을 보는 경우 `utils.js`의 모든 함수와 [`lodash`](https://lodash.com/)**의 많은 모듈을 찾게 됩니다. `index.js`에서 `lodash`를 사용하지 않지만 이는 출력의 일부이므로** 프로덕션 애셋에 많은 추가 가중치를 추가합니다.
+
+이제 모듈 형식을 [ECMAScript 모듈](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)로 변경하고 다시 시도하겠습니다. 이번에는 `utils.js`가 다음과 같이 보일 것입니다.
+
+```javascript
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+export const multiply = (a, b) => a * b;
+export const divide = (a, b) => a / b;
+
+import { maxBy } from 'lodash-es';
+
+export const max = arr => maxBy(arr);
+```
+
+그리고 `index.js`는 ECMAScript 모듈 구문을 사용하여 `utils.js`에서 가져옵니다.
+
+```javascript
+import { add } from './utils';
+
+console.log(add(1, 2));
+```
+
+`webpack` 구성을 사용하여 애플리케이션을 빌드하고 출력 파일을 열 수 있습니다. 이제 다음 [출력](https://github.com/mgechev/commonjs-example/blob/master/esm/dist/out.js)과 함께 **40 bytes** 입니다.
+
+```javascript
+(()=>{"use strict";console.log(1+2)})();
+```
+
+최종 번들에는 사용하지 않는 `utils.js`의 함수가 포함되어 있지 않으며 `lodash`의 흔적도 없습니다! 또한 `terser`(`webpack`가 사용하는 자바스크립트 미니어)는 `console.log`에서 `add` 함수에 밑줄을 그었습니다.
+
+당신이 물어볼 수 있는 공정한 질문은 **왜 CommonJS를 사용하면 출력 번들이 거의 16,000배 더 커지는가 하는 것입니다**. 물론 이것은 장난감 예제이며 실제로 크기 차이는 그리 크지 않을 수 있지만 CommonJS가 프로덕션 빌드에 상당한 가중치를 추가할 가능성이 있습니다.
+
+**CommonJS 모듈은 ES 모듈보다 훨씬 동적이기 때문에 일반적인 경우에 최적화하기가 더 어렵습니다. 번들러와 미니파이어가 애플리케이션을 성공적으로 최적화할 수 있도록 하려면 CommonJS 모듈에 의존하지 말고 전체 애플리케이션에서 ECMAScript 모듈 구문을 사용하십시오.**
+
+`index.js`에서 ECMAScript 모듈을 사용하더라도 사용 중인 모듈이 CommonJS 모듈이면 앱의 번들 크기가 문제가 됩니다.
+
+## CommonJS가 앱을 더 크게 만드는 이유는 무엇입니까?
+
+이 질문에 답하기 위해 `webpack`에서 `ModuleConcatenationPlugin`의 동작을 살펴본 후 정적 분석 가능성에 대해 논의합니다. 이 플러그인은 모든 모듈의 범위를 하나의 클로저로 연결하고 브라우저에서 코드 실행 시간을 단축합니다. 예를 살펴보겠습니다.
+
+```javascript
+// utils.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+
+```javascript
+// index.js
+import { add } from './utils';
+const subtract = (a, b) => a - b;
+
+console.log(add(1, 2));
+```
+
+위의 ECMAScript 모듈은 `index.js`에서 가져옵니다. `subtract` 함수도 정의합니다. `webpack` 구성을 사용하여 프로젝트를 빌드할 수 있지만 이번에는 최소화를 비활성화합니다.
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: false
+  },
+  mode: 'production',
+};
+```
+
+생성된 출력을 살펴보겠습니다.
+
+```javascript
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+
+// CONCATENATED MODULE: ./utils.js**
+const add = (a, b) => a + b;
+const subtract = (a, b) => a - b;
+
+// CONCATENATED MODULE: ./index.js**
+const index_subtract = (a, b) => a - b;**
+console.log(add(1, 2));**
+
+/******/ })();
+```
+
+위의 출력에서 모든 함수는 동일한 네임스페이스 안에 있습니다. 충돌을 방지하기 위해 webpack은 `index.js`의 `subtract` 함수 이름을 `index_subtract`로 변경했습니다.
+
+축소자가 위의 소스 코드를 처리하면 다음이 수행됩니다.
+
+- 사용하지 않는 함수 `subtract` 및 `index_subtract` 제거
+- 모든 주석 및 중복 공백 제거
+- `console.log` 호출에서 `add` 함수 본문 인라인
+
+종종 개발자 **는 사용하지 않는 가져오기를 제거하는 것을 tree-shaking**이라고 합니다. Tree-shaking은 webpack이 utils.js에서 가져오는 기호와 `utils.js` 기호를 정적으로(빌드 시) 이해할 수 있었기 때문에 가능했습니다.
+
+이 동작은 CommonJS와 비교하여 **정적으로 더 분석 가능**하기 때문에 **ES 모듈에** 대해 기본적으로 활성화되어 있습니다.
+
+똑같은 예를 보겠습니다. 하지만 이번에는 ES 모듈 대신 CommonJS를 사용하도록 `utils.js`를 변경합니다.
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+이 작은 업데이트는 출력을 크게 변경합니다. 이 페이지에 포함하기에는 너무 길어서 일부만 공유했습니다.
+
+```javascript
+...
+(() => {
+
+"use strict";
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
+const subtract = (a, b) => a - b;
+console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));
+
+})();
+```
+
+최종 번들에는 번들된 모듈에서 함수 가져오기/내보내기를 담당하는 삽입된 코드인 `webpack` `utils.js` 및 `index.js`의 모든 기호를 동일한 네임스페이스 아래에 배치하는 대신 `__webpack_require__`를 사용하는 `add` 함수가 동적으로 필요합니다.
+
+이것은 CommonJS를 사용하여 임의의 표현식에서 내보내기 이름을 가져올 수 있기 때문에 필요합니다. 예를 들어, 아래 코드는 절대적으로 유효한 구문입니다.
+
+```javascript
+module.exports[localStorage.getItem(Math.random())] = () => { … };
+```
+
+사용자 브라우저의 컨텍스트에서 런타임에만 사용할 수 있는 정보가 필요하기 때문에 번들러가 내보낸 기호의 이름이 무엇인지 빌드 시간에 알 수 있는 방법이 없습니다.
+
+**이런 식으로 축소기는 `index.js`가 종속성에서 정확히 무엇을 사용하는지 이해할 수 없으므로 트리를 흔들 수 없습니다.** 타사 모듈에서도 정확히 동일한 동작을 관찰할 것입니다. **`node_modules`에서 CommonJS 모듈을 가져오면 빌드 도구 체인이 이를 제대로 최적화할 수 없습니다.**
+
+## CommonJS로 트리 흔들기
+
+CommonJS 모듈은 정의상 동적이기 때문에 분석하기가 훨씬 더 어렵습니다. 예를 들어, ES 모듈의 가져오기 위치는 표현식인 CommonJS와 비교하여 항상 문자열 리터럴입니다.
+
+경우에 따라 사용 중인 라이브러리가 CommonJS를 사용하는 방법에 대한 특정 규칙을 따르는 경우 타사 `webpack` [플러그인](https://github.com/indutny/webpack-common-shake)을 사용하여 빌드 시 사용하지 않는 내보내기를 제거할 수 있습니다. 이 플러그인은 트리 쉐이킹에 대한 지원을 추가하지만 종속성이 CommonJS를 사용할 수 있는 다양한 방법을 모두 다루지는 않습니다. 이것은 ES 모듈과 동일한 보장을 받지 못한다는 것을 의미합니다. `webpack` 동작 외에 빌드 프로세스의 일부로 추가 비용이 추가됩니다.
+
+## 결론
+
+**번들러가 애플리케이션을 성공적으로 최적화할 수 있도록 하려면 CommonJS 모듈에 의존하지 말고 전체 애플리케이션에서 ECMAScript 모듈 구문을 사용하십시오.**
+
+다음은 최적의 경로에 있는지 확인하기 위한 몇 가지 실행 가능한 팁입니다.
+
+- Rollup.js의 [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) 플러그인을 사용하고 `modulesOnly` 플래그를 설정하여 ECMAScript 모듈에만 의존하도록 지정합니다.
+- [`is-esm`](https://github.com/mgechev/is-esm) 패키지를 사용하여 npm 패키지가 ECMAScript 모듈을 사용하는지 확인하십시오.
+- Angular를 사용하는 경우 기본적으로 트리를 흔들 수 없는 모듈에 의존하면 경고가 표시됩니다.
diff --git a/src/site/content/ko/blog/compat2021/index.md b/src/site/content/ko/blog/compat2021/index.md
new file mode 100644
index 00000000000..9443e811743
--- /dev/null
+++ b/src/site/content/ko/blog/compat2021/index.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: 'Compat 2021: 웹에서 5가지 주요 호환성 문제 제거'
+subhead: |-
+  Google은 웹 개발자를 위한 다음과 같은 상위 5가지 브라우저 호환성 문제를 해결하기 위해 다른 브라우저 공급업체 및 업계 파트너와 협력하고 있습니다.
+  CSS flexbox, CSS 그리드, `position:sticky`, `aspect-ratio` 및 CSS 변환.
+description: "Google이 어떻게 웹 개발자를 위한 다음과 같은 상위 5가지 브라우저 호환성 문제를 해결하기 위해 다른 브라우저 공급업체 및 업계 파트너와 협력하고 있는지 알아보세요. CSS flexbox, CSS 그리드, `position:sticky`, `aspect-ratio` 및 CSS 변환."
+authors:
+  - robertnyman
+  - foolip
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/KQ5oNcLGKdBSuUM8pFPx.jpeg
+alt: 조각이 빠진 퍼즐입니다.
+date: 2021-03-22
+updated: 2021-11-16
+tags:
+  - blog
+  - css
+---
+
+Google은 다른 브라우저 공급업체 및 업계 파트너와 협력하여 웹 개발자가 겪는 상위 5가지 브라우저 호환성 문제를 해결하고 있습니다. 초점 영역은 CSS flexbox, CSS Grid, `position: sticky`, `aspect-ratio` 및 CSS 변환입니다. 참여 방법을 확인하고 [팔로우하여 기여 방법](#contribute)을 알아보세요.
+
+## 배경
+
+웹에서의 호환성은 항상 개발자에게 큰 도전이었습니다. 지난 몇 년 동안 Google과 Mozilla 및 Microsoft를 포함한 기타 파트너는 상황을 개선하기 위한 작업 및 우선순위 지정을 추진하고 웹 개발자의 가장 큰 고충에 대해 자세히 알아보기 시작했습니다. 이 프로젝트는 [Google의 개발자 만족도](/developer-satisfaction)(DevSAT) 작업과 연결되어 있으며 2019년에 [MDN DNA(개발자 요구 평가) 설문조사](https://insights.developer.mozilla.org/)가 만들어졌으며 2020년 [MDN 브라우저 호환성 보고서 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)에 제시된 심층 연구로 인해 더욱 큰 규모로 시작되었습니다. [CSS 현황](https://stateofcss.com/) 및 [JS 현황](https://stateofjs.com/) 설문조사와 같은 다양한 채널에서 추가 연구가 수행되었습니다.
+
+2021년의 목표는 5가지 핵심 초점 영역에서 브라우저 호환성 문제를 제거하여 개발자가 이를 신뢰할 수 있는 기반으로 자신 있게 구축할 수 있도록 하는 것입니다. 이 노력을 [**#Compat 2021**](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live)이라고 합니다.
+
+## 집중할 대상 선택
+
+기본적으로 모든 웹 플랫폼에 브라우저 호환성 문제가 있지만 이 프로젝트의 초점은 가장 문제가 많은 소수의 영역에 초점을 맞추고 있습니다.
+
+호환성 프로젝트는 우선 순위를 정할 영역에 영향을 미치는 여러 기준을 사용하며 그 중 일부는 다음과 같습니다.
+
+- 기능 사용. 예를 들어, flexbox는 모든 페이지 보기의 [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)에서 사용되며 [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)에서 채택이 크게 증가하고 있습니다.
+
+- 버그 수( [Chromium](https://bugs.chromium.org/p/chromium/issues/list), [Gecko](https://bugzilla.mozilla.org/describecomponents.cgi), [WebKit](https://bugs.webkit.org/) ) 및 Chromium의 경우 해당 버그에 별이 몇 개 있습니다.
+
+- 조사 결과:
+
+    - [MDN DNA 설문 조사](https://insights.developer.mozilla.org/)
+    - [MDN 브라우저 호환성 보고서](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+    - 가장 잘 알려지고 사용되는 기능의 [CSS 현황](https://2020.stateofcss.com/en-US/features/)
+
+- [web-platform-tests](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project)의 테스트 결과. 예를 들어 [wpt.fyi의 flexbox](https://wpt.fyi/results/css/css-flexbox)입니다.
+
+- 가장 많이 검색된 기능을 [사용할 수 있습니까?](https://caniuse.com/)
+
+## 2021년 5대 중점 분야
+
+2020년에 Chromium은 2020년에 [Chromium의 브라우저 호환성 개선](https://blog.chromium.org/2020/06/improving-chromiums-browser.html)에 설명된 주요 영역을 다루는 작업을 시작했습니다. 2021년, 우리는 더 멀리 나아가기 위한 헌신적인 노력을 시작합니다. Google과 [Microsoft는](https://www.igalia.com/)[Igalia](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/)와 함께 Chromium의 주요 문제를 해결하기 위해 협력하고 있습니다. Chromium 및 WebKit의 정기적인 기고자이자 임베디드 장치용 공식 WebKit 포트의 유지 관리자인 Igalia는 이러한 호환성 노력에 매우 지원하고 참여했으며 식별된 문제를 해결하고 추적하는 데 도움이 될 것입니다.
+
+다음은 2021년에 수정하기로 약속된 영역입니다.
+
+### CSS flexbox
+
+[CSS flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)는 [웹에서 널리 사용](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)되며 개발자에게는 여전히 몇 가지 주요 과제가 있습니다. 예를 들어 [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=721123)과 [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209983)는 `auto-height` 플렉스 컨테이너에 문제가 있어 이미지 크기가 잘못 조정됩니다.
+
+<div class="switcher">
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qmKoKHkZga5hgBeiHuBz.png", alt="체스판의 확대 사진입니다.", width="800", height="400" %}<figcaption style="margin-top: auto"> 버그로 인해 이미지 크기가 잘못되었습니다.</figcaption></figure>
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/0ruhCiZKRP9jBhnN70Xh.png", alt="체스판", width="800",height="800" %}<figcaption style="margin-top: auto"> 올바른 크기의 이미지입니다.<br> <a href="https://unsplash.com/photos/ab5OK9mx8do">Alireza Mahmoudi</a>의 사진.</figcaption></figure>
+</div>
+
+[Igalia의 flexbox Cats](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/) 블로그 게시물은 더 많은 예를 통해 이러한 문제에 대해 자세히 설명합니다.
+
+#### 우선순위가 높은 이유
+
+- 설문 조사: [MDN 브라우저 호환성 보고서의 주요](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html) 문제, [CSS 현황](https://2020.stateofcss.com/en-US/features/)에서 가장 많이 알려져 있고 사용됨
+- 테스트: 모든 브라우저에서 [85% 통과](https://wpt.fyi/results/css/css-flexbox)
+- 사용량: 페이지 뷰의 [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692), [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)에서 크게 증가
+
+### CSS 그리드
+
+[CSS 그리드](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)는 최신 웹 레이아웃을 위한 핵심 빌딩 블록으로, 많은 이전 기술과 해결 방법을 대체합니다. 채택이 증가함에 따라 브라우저 간의 차이가 그것을 피할 이유가 되지 않도록 견고해야 합니다. 부족한 영역 중 하나는 Gecko에서는 지원되지만 [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=759665) 또는 [WebKit](https://bugs.webkit.org/show_bug.cgi?id=204580)에서는 지원되지 않는 그리드 레이아웃을 애니메이션하는 기능입니다. 지원되면 다음과 같은 효과가 가능합니다.
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Ovs6wg9o5AJUG4IIoVvj.mp4", height="400", controls=false, autoplay=true, loop=true, muted=true, playinline=true %}<figcaption> <a href="https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/">Chen Hui Jing</a>의 애니메이션 체스 데모.</figcaption></figure>
+
+#### 우선순위가 높은 이유
+
+- 설문 조사: [MDN 브라우저 호환성 보고서 2위](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html) , 잘 알려져 있지만 [CSS 현황](https://2020.stateofcss.com/en-US/features/)에서는 덜 사용됨
+- 테스트: 모든 브라우저에서 [75% 통과](https://wpt.fyi/results/css/css-grid)
+- 사용량: [8% 및 꾸준히 증가](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693), [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)에서 약간 증가
+
+{% Aside %} [subgrid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid)와 같은 새로운 기능이긴 하지만  개발자에게 중요합니다, 그것은 이 특정 노력의 일부가 아닙니다. 계속하려면 [MDN의 Subgrid 호환성](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid#browser_compatibility)을 참조하세요. {% endAside %}
+
+### CSS 위치: 고정
+
+[고정 위치 지정을](https://developer.mozilla.org/docs/Web/CSS/position#sticky_positioning) 사용하면 콘텐츠가 뷰포트 가장자리에 고정될 수 있으며 일반적으로 뷰포트 상단에 항상 표시되는 헤더에 사용됩니다. 모든 브라우저에서 지원되지만 의도한 대로 작동하지 않는 일반적인 사용 사례가 있습니다. 예를 들어 [고정 테이블 헤더](https://bugs.chromium.org/p/chromium/issues/detail?id=702927)는 Chromium에서 지원되지 않으며 이제는 [플래그 뒤에서 지원](https://bugs.chromium.org/p/chromium/issues/detail?id=958381) 되지만 결과는 브라우저 간에 일관되지 않습니다.
+
+<div class="switcher">
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/DtNtuWCZUNwi7GGSBPvA.png", alt="", width="250", height="350" %}<figcaption> "TablesNG"가 있는 Chromium</figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/hJwLpLeJNfG6kVBUK9Yn.png", alt="", width="250", height="350" %}<figcaption> Gecko</figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/od1YyD2BoBqfrnkzynUK.png", alt="", width="250", height="350" %}<figcaption> WebKit</figcaption></figure>
+</div>
+
+Rob Flack의 <a href="https://output.jsbin.com/xunosud">고정 테이블 헤더 데모</a>를 확인하세요.
+
+#### 우선순위가 높은 이유
+
+- 설문 조사: [CSS](https://2020.stateofcss.com/en-US/features/) 현황에서 널리 알려져 있거나 사용 되며 [MDN 브라우저 호환성 보고서](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)에서 여러 번 언급되었습니다.
+- 테스트: 모든 브라우저에서 [66% 통과](https://wpt.fyi/results/css/css-position/sticky?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=%28status%3A%21missing%26status%3A%21pass%26status%3A%21ok%29)
+- 사용량: [8%](https://www.chromestatus.com/metrics/feature/timeline/popularity/3354)
+
+### CSS aspect-ratio 속성
+
+새로운 [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) CSS 속성을 사용하면 요소에 대한 일관된 너비 대 높이 비율을 쉽게 유지할 수 있으므로 잘 알려진 다음과 같은 [`padding-top` hack](/aspect-ratio/#the-old-hack-maintaining-aspect-ratio-with-padding-top)이 필요하지 않습니다.
+
+<div class="switcher">{% Compare 'worse', 'Using padding-top' %} ```css .container {width: 100%; padding-top: 56.25%; } ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Using aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+매우 일반적인 사용 사례이기 때문에 널리 사용될 것으로 예상되며 모든 일반적인 시나리오와 브라우저 전반에서 견고하게 유지되기를 원합니다.
+
+#### 우선순위가 높은 이유
+
+- 설문 조사: 이미 잘 알려져 있지만 [CSS 현황](https://2020.stateofcss.com/en-US/features/)에서는 아직 널리 사용되지 않습니다.
+- 테스트: 모든 브라우저에서 [27% 통과](https://wpt.fyi/results/css/css-sizing/aspect-ratio)
+- 사용량: [3%](https://www.chromestatus.com/metrics/css/timeline/popularity/657) 및 증가할 것으로 예상됨
+
+### CSS 변환
+
+[CSS 변환](https://developer.mozilla.org/docs/Web/CSS/transform)은 수년 동안 모든 브라우저에서 지원되었으며 웹에서 널리 사용됩니다. 그러나 특히 애니메이션 및 3D 변환과 같이 브라우저 간에 동일하게 작동하지 않는 영역이 여전히 많이 남아 있습니다. 예를 들어 카드 뒤집기 효과는 브라우저 간에 매우 일관성이 없을 수 있습니다.
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/RhyPpk7dUooEobKZ3VOC.mp4", controls=false, autoplay=true, loop=true, muted=true, playinline=true %}<figcaption> Chromium(왼쪽), Gecko(가운데) 및 WebKit(오른쪽)의 카드 뒤집기 효과. <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1008483#c42">버그 코멘트</a>에서 David Baron의 데모.</figcaption></figure>
+
+#### 우선순위가 높은 이유
+
+- 설문 조사: [CSS 현황](https://2020.stateofcss.com/en-US/features/)에서 매우 잘 알려져 있고 사용됨
+- 테스트: 모든 브라우저에서 [55% 통과](https://wpt.fyi/results/css/css-transforms)
+- 사용량: [80%](https://www.chromestatus.com/metrics/css/timeline/popularity/446)
+
+## 기여하고 팔로우하는 방법 {: #contribute }
+
+[@ChromiumDev](https://twitter.com/ChromiumDev) 또는 [Compat 2021의 공개 메일링 리스트](https://groups.google.com/g/compat2021)에 게시한 업데이트를 팔로우하고 공유하세요. 확실히 버그가 존재하는지 확인하거나 겪고 있는 문제에 대한 [파일](/how-to-file-a-good-bug/)을 제출하고, 빠진 게 있다면 위의 채널을 통해 연락하세요.
+
+여기 web.dev에 진행 상황에 대한 정기적인 업데이트가 있으며 [Compat 2021 대시보드](https://wpt.fyi/compat2021)에서 각 중점 영역에 대한 진행 상황을 확인할 수도 있습니다.
+
+<figure><p data-md-type="paragraph"><a href="https://wpt.fyi/compat2021">{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/BgX0dnesIhLaFAKyILzk.png", alt="Compat 2021 대시보드", width="800", height="942" %}</a></p>
+<figcaption>Compat 2021 대시보드(2021년 11월 16일에 찍은 스크린샷).</figcaption></figure>
+
+안정성과 상호 운용성을 개선하기 위한 브라우저 공급업체 간의 이러한 공동 노력이 웹에서 놀라운 것을 구축하는 데 도움이 되기를 바랍니다!
diff --git a/src/site/content/ko/blog/conversion-measurement/index.md b/src/site/content/ko/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..fbb662384c7
--- /dev/null
+++ b/src/site/content/ko/blog/conversion-measurement/index.md
@@ -0,0 +1,499 @@
+---
+layout: post
+title: 광고 전환을 측정하는 보다 개인적인 방법인 Event Conversion Measurement API
+subhead: 최초 평가판으로 사용할 수 있는 새로운 Web API는 사이트 간 식별자를 사용하지 않고 언제 광고 클릭이 전환으로 이어지는 지를 측정합니다.
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %} Conversion Measurement API는 *Attribution Reporting API*로 이름이 바뀌고 더 많은 기능을 제공합니다.
+
+- [Chrome 91](https://chromestatus.com/features/schedule) [이하에서 (Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md))를 실험하고 있다면 이 게시물을 읽고 API 사용 방법에 대한 자세한 내용, 사용 사례 및 지침을 확인하세요.
+- Chrome(원본 평가판)에서 실험에 사용할 수 있는 이 API(속성 보고)의 다음 버전에 관심이 있다면 [메일링 리스트에 가입](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev)하여 사용 가능한 실험에 대한 업데이트를 받으세요.
+
+{% endAside %}
+
+광고 캠페인의 효과를 측정하기 위해 광고주와 게시자는 광고 클릭 또는 조회가 구매 또는 가입과 같은 [전환](/digging-into-the-privacy-sandbox/#conversion)으로 이어지는 시점을 알아야 합니다. 지금까지는 이 목적에 **제3자 쿠키**가 사용되었습니다. 이제 Event Conversion Measurement API를 사용하면 여러 사이트에서 사용자를 인식하는 데 사용할 수 있는 메커니즘을 사용하지 않고도 게시자 웹사이트의 이벤트와 광고주 사이트의 후속 전환 간의 상관 관계를 파악할 수 있습니다.
+
+{% Aside %} **이 제안에 여러분의 피드백이 필요합니다!** 의견이 있으면 API 제안 저장소에 [이슈를 생성](https://github.com/WICG/conversion-measurement-api/issues/)해 주세요. {% endAside %}
+
+{% Aside %} 이 API는 제3자 쿠키 또는 기타 사이트 간 추적 메커니즘 없이 제3자 사용 사례를 충족하기 위한 일련의 제안인 개인정보 보호 샌드박스의 일부입니다. 모든 제안에 대한 개요는 [개인정보 보호 샌드박스 심층 해부](/digging-into-the-privacy-sandbox)를 참조하세요. {% endAside %}
+
+## 용어 사전
+
+- **애드테크 플랫폼**: 브랜드 또는 대행사가 디지털 광고를 타겟팅, 전달 및 분석할 수 있도록 하는 소프트웨어 및 도구를 제공하는 회사입니다.
+- **광고주**: 광고 비용을 지불하는 회사입니다.
+- **게시자**: 해당 웹사이트에 광고를 게재하는 회사입니다.
+- **사용자 클릭 전환**: 광고 클릭에 기여한 전환입니다.
+- **조회 후 전환**: 광고 노출에 기여한 전환입니다(사용자가 광고와 상호 작용하지 않으면 나중에 전환).
+
+## 이 API에 대해 알아야 하는 대상자: 애드테크 플랫폼, 광고주 및 게시자
+
+- **[수요측 플랫폼](https://en.wikipedia.org/wiki/Demand-side_platform)**과 같은 **애드테크 플랫폼**은 현재 제3자 쿠키에 의존하는 기능을 지원하기 위해 이 API를 사용하는 데 관심이 있을 것입니다. 전환 측정 시스템을 다루고 있다면 [데모를 시도해 보고](#demo), [이 API를 실험하고](#experiment-with-the-api), [피드백을 공유해 주세요](#share-your-feedback).
+- **광고 또는 전환 측정을 위해 맞춤 코드에 의존하는 광고주와 게시자**도 마찬가지로 이 API를 사용하여 기존 기술을 대체하는 데 관심을 가질 수 있습니다.
+- **광고 또는 전환 측정을 위해 애드테크 플랫폼에 의존하는 광고주 및 게시자**는 이 API를 직접 사용할 필요는 없지만, 특히 API를 통합할 수 있는 애드테크 플랫폼으로 작업하는 경우에 [이 API에 담겨진 논리](#why-is-this-needed)에 관심을 가질 수 있습니다.
+
+## API 개요
+
+### 왜 필요한가?
+
+현재, 광고 전환 측정을 위해 [제3자 쿠키](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies)가 사용되는 경우가 많습니다. **그러나 브라우저가 이에 대한 액세스를 제한하고 있습니다.**
+
+Chrome은 [제3자 쿠키에 대한 지원을 단계적으로 중단](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html)[할 계획이며 사용자가 원하는 경우 이를 차단할 수 있는 방법을 제공합니다](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en). Safari는 [제3자 쿠키를 차단](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)하고, Firefox는 [알려진 제3자 추적 쿠키를 차단](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default)하며, Edge는 [추적 방지 기능](https://support.microsoft.com/en-us/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention)을 제공합니다.
+
+제3자 쿠키는 레거시 솔루션이 되고 있습니다. 제3자 쿠키가 해결한 사용 사례를 개인정보를 보호하는 방식으로 해결하기 위해 본 API와 같이 **특정 목적을 염두에 둔 새로운 API가 등장하고 있습니다.**
+
+**Event Conversion Measurement API는 제3자 쿠키와 어떻게 비교됩니까?**
+
+- 쿠키와 달리 이 API는 전환을 측정하기 위한 **특정한 목적을 염두에 두고 개발되었습니다.** 이를 통해 브라우저는 더욱 강화된 개인정보 보호를 적용할 수 있습니다.
+- **기밀성이 더욱 높습니다**. 예를 들어 게시자 측 및 광고주 측 사용자 프로필을 연결하려는 목적으로 두 개의 서로 다른 최상위 사이트에서 사용자를 인식하기 어렵습니다. [이 API가 사용자 개인정보를 보호하는 방법](#how-this-api-preserves-user-privacy)에서 그 이유를 확인하세요.
+
+### 첫 번째 버전
+
+이 API는 **초기 실험 단계**에 있습니다. 최초 평가판에서는 API의 **첫 번째 버전**을 사용할 수 있습니다. [향후 버전](#use-cases)에서는 내용이 크게 달라질 수 있습니다.
+
+### 클릭 전환만 지원
+
+이 API 버전에서는 **사용자 클릭 전환 측정**만 지원하지만 [조회 후 전환 측정](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md)도 공개 인큐베이션 상태에 있습니다.
+
+### 작동 원리
+
+<figure>{% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="다이어그램: conversion measurement API 단계 개요", width="800", height="496" %}</figure>
+
+이 API는 광고에 사용되는 두 가지 유형의 링크(`<a>` 요소)와 함께 사용할 수 있습니다.
+
+- 소셜 네트워크 또는 검색 엔진 결과 페이지의 광고와 같은 **자사** 컨텍스트의 링크
+- 제3자 애드테크 제공업체를 사용하는 게시자 사이트와 같은 **제3자 iframe**의 링크입니다.
+
+이 API를 사용하면 광고 전환과 관련된 특성으로 이러한 아웃바운드 링크를 구성할 수 있습니다.
+
+- 클릭 ID 또는 캠페인 ID와 같이 게시자 측의 광고 클릭에 첨부하는 사용자 지정 데이터
+- 이 광고에 대해 전환이 예상되는 웹사이트
+- 성공적인 변환에 대해 알림을 받아야 하는 보고 끝점
+- 이 광고에 대해 더 이상 전환을 계산할 수 없는 마감 날짜 및 시간
+
+사용자가 광고를 클릭하면 사용자의 로컬 장치에 있는 브라우저가 이 이벤트를 기록하며, `<a>` 요소의 전환 측정 특성으로 지정된 전환 구성과 클릭 데이터도 함께 기록합니다.
+
+나중에 사용자는 광고주의 웹사이트를 방문하여 광고주 또는 애드테크 제공업체가 **전환**으로 분류한 작업을 수행할 수 있습니다. 이 경우 사용자의 브라우저에서 광고 클릭과 전환 이벤트의 일치가 이루어집니다.
+
+브라우저는 마지막으로 `<a>` 요소의 특성에 지정된 끝점으로 **전환 보고서** 전송을 예약합니다. 이 보고서에는 이 전환으로 이어진 광고 클릭에 대한 데이터와 전환에 대한 데이터가 포함됩니다.
+
+특정 광고 클릭에 대해 여러 전환이 등록된 경우, 해당 보고서가 전송되도록 예약됩니다(광고 클릭당 최대 3개).
+
+보고서는 전환 후 며칠 또는 몇 주 후의 시차를 두고 전송됩니다(그 이유는 [보고서 타이밍](#report-timing) 참조).
+
+## 브라우저 지원 및 유사한 API
+
+### 브라우저 지원
+
+Event Conversion Measurement API는 다음과 같이 지원될 수 있습니다.
+
+- [최초 평가판으로 지원](/origin-trials/). 최초 평가판을 사용하면 해당 [출처](/same-site-same-origin/#origin)의 **모든 방문자**가 API를 사용할 수 있습니다. **최종 사용자에게 API를 사용해 보려면 최초 평가판에 대한 출처를 등록해야 합니다**. 최초 평가판에 관한 자세한 내용은 [Conversion Measurement API 사용](/using-conversion-measurement)을 참조하세요.
+- Chrome 86 이상에서 플래그의 사용을 설정합니다. 플래그를 통해 **단일 사용자**의 브라우저에서 API를 사용할 수 있습니다. **플래그는 로컬에서 개발할 때 유용합니다**.
+
+[Chrome 기능 항목](https://chromestatus.com/features/6412002824028160)에서 현재 상황에 대한 자세한 내용을 확인하세요.
+
+### 표준화
+
+이 API는 [WICG](https://www.w3.org/community/wicg/)(Web Platform Incubator Community Group)에서 공개적으로 설계되고 있습니다. Chrome에서 실험적으로 이용할 수 있습니다.
+
+### 유사한 API
+
+Safari에서 사용하는 웹 브라우저 엔진인 WebKit에는 [Private Click Measurement](https://github.com/privacycg/private-click-measurement)라는 유사한 목표를 가진 제안이 있습니다. 개인정보 보호 커뮤니티 그룹([PrivacyCG](https://www.w3.org/community/privacycg/)) 내에서 작업이 이루어지고 있습니다.
+
+## 이 API가 사용자 개인정보를 보호하는 방법
+
+이 API를 사용하면 사용자의 개인정보를 보호하면서 전환을 측정할 수 있습니다. 즉, 사이트 간에 사용자를 식별할 수 없습니다. 이를 위해 **데이터 제한**, **변환 데이터에 노이즈 도입** 및 **보고 타이밍** 메커니즘이 적용됩니다.
+
+이러한 메커니즘이 작동하는 방식과 실제로 의미하는 바를 자세히 살펴보겠습니다.
+
+### 데이터 제한
+
+이어지는 내용에서 **클릭 시간 또는 조회 시간 데이터**는 사용자에게 광고가 게재된 후 클릭 또는 조회되었을 때 `adtech.example`이 사용할 수 있는 데이터입니다. 전환이 발생한 시점의 데이터가 **전환 시간 데이터**입니다.
+
+**게시자** `news.example`과 **광고주** `shoes.example`을 살펴보겠습니다. **애드테크 플랫폼** `adtech.example`의 제3자 스크립트는 광고주 `shoes.example`에 대한 광고를 포함하도록 게시자 사이트 `news.example`에 제공됩니다. `shoes.example`에는 전환을 감지하기 위해 `adtech.example` 스크립트도 포함됩니다.
+
+`adtech.example`은 웹 사용자에 대해 얼마나 알 수 있습니까?
+
+#### 제3자 쿠키 사용
+
+<figure>{% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="다이어그램: 제3자 쿠키가 사이트 간 사용자 인식을 가능하게 하는 방법", width="800", height="860" %}</figure>
+
+`adtech.example`은 **사이트 간 고유 식별자로 사용되는 제3자 쿠키**를 이용해 **사이트 간에 사용자를 인식**합니다. 또한 `adtech.example`은 상세한 클릭 또는 조회 시간 데이터와 상세한 전환 시간 데이터에 **모두** 액세스하여 이들을 연결할 수 있습니다.
+
+결과적으로 `adtech.example`은 광고 보기, 클릭 및 전환 사이에 사이트 간 단일 사용자의 행동을 추적할 수 있습니다.
+
+`adtech.example`은 `news.example` 및 `shoes.example`뿐만 아니라 수많은 게시자 및 광고주 사이트에서 제공될 가능성이 높으므로 웹 전체에서 사용자의 행동을 추적할 수 있습니다.
+
+#### Event Conversion Measurement API 사용
+
+<figure>{% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="다이어그램: API가 사이트 간 사용자 인식 없이 전환 측정을 가능하게 하는 방법", width="800", height="643" %} <figcaption>쿠키 다이어그램의 "광고 ID"와 "클릭 ID"는 모두 세부 데이터에 매핑할 수 있게 해주는 식별자입니다. 이 다이어그램에서는 사용자 클릭 전환 측정만 지원되므로 "클릭 ID"라고 합니다.</figcaption></figure>
+
+`adtech.example`은 사이트 간 식별자를 사용할 수 없으며, 따라서 **여러 사이트에 걸쳐 사용자를 인식할 수 없습니다**.
+
+- 64비트 식별자는 광고 클릭에 첨부할 수 있습니다.
+- 변환 이벤트에는 3비트의 변환 데이터만 첨부할 수 있습니다. 3비트는 0에서 7 사이의 정수 값에 맞을 수 있습니다. 이것은 많은 데이터는 아니지만 광고주가 미래에 광고 예산을 어디에 사용할지 올바른 결정을 내리는 방법(예를 들어, 데이터 모델을 훈련하여)을 알아내기에는 충분합니다.
+
+{% Aside %} 클릭 데이터와 전환 데이터는 동일한 컨텍스트에서 JavaScript 환경에 노출되지 않습니다. {% endAside %}
+
+#### 제3자 쿠키에 대한 대안이 없을 때
+
+Event Conversion Measurement API와 같은 제3자 쿠키에 대한 대안이 없으면 전환에 기여하지 못합니다. `adtech.example`이 게시자와 광고주 사이트 모두에 있는 경우 클릭 시간 또는 전환 시간 데이터에 액세스할 수 있지만 서로를 절대 연결할 수 없습니다.
+
+이 경우 사용자 개인정보는 보호되지만 광고주는 광고 지출을 최적화할 수 없습니다. Event Conversion Measurement API와 같은 대안이 필요한 이유가 여기에 있습니다.
+
+### 전환 데이터에 노이즈 도입
+
+전환 시간에 수집된 3비트에는 **노이즈가 도입**됩니다.
+
+예를 들어 Chrome의 구현에서 데이터 노이즈 도입은 다음과 같이 작동합니다. 전체 시간 중 5%의 경우에 API는 실제 전환 데이터 대신 임의의 3비트 값을 보고합니다.
+
+그러면 사용자의 개인정보가 공격으로부터 보호를 받습니다. 식별자를 생성하기 위해 여러 변환의 데이터를 악용하려는 행위자는 수신하는 데이터를 완전히 신뢰하지 못하게 되므로 이러한 유형의 공격이 더 복잡해집니다.
+
+[실제 전환 수](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count)는 복구가 가능합니다.
+
+클릭 데이터 및 전환 데이터 요약:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>데이터</th>
+        <th>크기</th>
+        <th>예시</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>클릭 데이터( <code>impressiondata</code> 특성)</td>
+        <td>64비트</td>
+        <td>광고 ID 또는 클릭 ID</td>
+      </tr>
+      <tr>
+        <td>전환 데이터</td>
+        <td>3비트, 노이즈 도입</td>
+        <td>전환 유형(가입, 결제 완료 등)에 매핑할 수 있는 0에서 7 사이의 정수</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### 보고 타이밍
+
+특정 광고 클릭에 대해 여러 전환이 등록된 경우 **각 전환에 대해 해당 보고서가 전송되며 클릭당 최대 3회까지 가능합니다**.
+
+전환 시간이 전환 측에서 더 많은 정보를 얻는 데 사용되지 않도록 하여 사용자의 개인정보를 보호하기 위해 이 API는 전환이 발생한 직후 전환 보고서가 전송되지 않도록 지정합니다. 최초 광고 클릭 후, 이 클릭과 관련된 **보고 기간** 일정이 시작됩니다. 각 보고 기간에는 기한이 있으며 해당 기한 전에 등록된 전환은 해당 기간이 끝날 때 전송됩니다.
+
+보고서는 정확히 예약된 날짜와 시간에 전송되지 않을 수도 있습니다. 보고서가 전송되도록 예약된 시간에 브라우저가 실행되고 있지 않으면 브라우저 시작 시 보고서가 전송됩니다. 이 시간은 예약된 시간보다 며칠 또는 몇 주가 늦을 수 있습니다.
+
+만료(클릭 시간 + `impressionexpiry`) 후에는 전환이 카운트되지 않습니다. `impressionexpiry`는 전환이 더 이상 이 광고에 대해 카운트될 수 없는 경계 시기에 해당하는 날짜와 시간입니다.
+
+Chrome에서 보고서 예약은 다음과 같이 작동합니다.
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>전환 시간에 따라 전환 보고서가 전송됩니다(브라우저가 열려 있는 경우)...</th>
+        <th>보고 기간 수</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30일, 기본값 및 최대값</td>
+        <td>
+          <ul>
+            <li>광고를 클릭한 후 2일</li>
+            <li>또는 광고 클릭 후 7일</li>
+            <li>또는 <code>impressionexpiry</code> = 광고 클릭 후 30일</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>는 7일에서 30일 사이입니다.</td>
+        <td>
+          <ul>
+            <li>광고 클릭 후 2일</li>
+            <li>또는 광고 클릭 후 7일</li>
+            <li>또는 광고 클릭 후 <code>impressionexpiry</code>
+</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>는 2일에서 7일 사이입니다.</td>
+        <td>
+          <ul>
+            <li>광고 클릭 후 2일</li>
+            <li>또는 광고 클릭 후 <code>impressionexpiry</code>
+</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>는 2일 미만입니다.</td>
+        <td>
+          <li>광고 클릭 후 2일</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>{% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="어떤 보고서가 언제 보내졌는 지에 대한 연대기", width="800", height="462" %}</figure>
+
+타이밍에 대한 자세한 내용은 [예약 보고서 보내기](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports)를 참조하세요.
+
+## 예시
+
+{% Aside %} 실제 작동을 확인하려면 [데모](https://goo.gle/demo-event-level-conversion-measurement-api) ⚡️를 시도하고 해당하는 [코드](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement)를 확인하세요. {% endAside %}
+
+API가 전환을 기록하고 보고하는 방법은 다음과 같습니다. 이것이 현재 API에서 클릭-투-전환 흐름이 작동하는 방식입니다. 이 API의 향후 버전에서는 [달라질 수 있습니다](#use-cases).
+
+### 광고 클릭(1~5단계)
+
+<figure>{% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="다이어그램: 광고 클릭 및 클릭 저장", width="800", height="694" %}</figure>
+
+`<a>` 광고 요소는 iframe 내의 `adtech.example`에 의해 게시자 사이트에 로드됩니다.
+
+애드테크 플랫폼 개발자들은 전환 측정 특성으로 `<a>` 요소를 구성하고 있습니다.
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+이 코드는 다음을 지정합니다.
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>귀속</th>
+        <th>기본값, 최대, 최소</th>
+        <th>예시</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code>(필수): 광고 클릭에 첨부할 <b>64비트</b> 식별자입니다.</td>
+        <td>(기본값 없음)</td>
+        <td>64비트 정수와 같이 동적으로 생성된 클릭 ID: <code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code>(필수): 이 광고에 대해 전환이 예상되는 <b><a href="/same-site-same-origin/#site" noopener="">eTLD+1</a></b>입니다.</td>
+        <td>(기본값 없음)</td>
+        <td>
+<code>https://advertiser.example</code>.<br><code>conversiondestination</code>이 <code>https://advertiser.example</code>인 경우 <code>https://advertiser.example</code> 및 <code>https://shop.advertiser.example</code> 모두의 전환이 귀속됩니다.<br><code>conversiondestination</code>이 <code>https://shop.advertiser.example</code>인 경우에도 마찬가지입니다: <code>https://advertiser.example</code> 및 <code>https://shop.advertiser.example</code> 모두의 전환이 귀속됩니다.</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>(선택 사항): 전환이 이 광고에 귀속될 수 있는 제한 시간(밀리초)입니다.</td>
+        <td>
+<code>2592000000</code> = 30일(밀리초).<br><br> 최대: 30일(밀리초).<br><br> 최소: 2일(밀리초).</td>
+        <td>클릭 후 10일: <code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code>(선택 사항): 확인된 전환을 보고할 대상입니다.</td>
+        <td>링크 요소가 추가되는 페이지의 최상위 출처입니다.</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code>: 광고 클릭의 의도된 대상입니다.</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} 예시에 관한 몇 가지 참고 사항:
+
+- 지금은 클릭만 지원되지만 API의 특성이나 API 제안에 "노출"이라는 용어가 사용됩니다. 이름은 API의 향후 버전에서 업데이트될 수 있습니다.
+- 광고가 iframe에 있을 필요는 없지만 이것이 이 예시의 기초입니다.
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- `window.open` 또는 `window.location`을 통한 탐색을 기반으로 하는 흐름은 특성에 적합한 대상이 아닙니다.
+
+{% endAside %}
+
+사용자가 광고를 탭하거나 클릭하면 광고주의 사이트로 이동합니다. 탐색이 커밋되면 브라우저가 `impressiondata`, `conversiondestination`, `reportingorigin` 및 `impressionexpiry`를 포함하는 객체를 저장합니다.
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### 전환 및 보고 예약(6~9단계)
+
+<figure>{% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="다이어그램: 전환 및 보고 예약", width="800", height="639" %}</figure>
+
+광고를 클릭한 직후 또는 나중에(예: 다음 날) 사용자는 `advertiser.example`을 방문하여 운동화를 검색하고 구매하려는 신발을 찾은 다음 결제를 진행합니다. `advertiser.example`의 체크아웃 페이지에 픽셀이 포함되었습니다.
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example`은 이 요청을 수신하고 이것이 전환에 해당한다고 결정합니다. 이제 브라우저에서 전환을 기록하도록 요청해야 합니다. `adtech.example`은 모든 전환 데이터를 0에서 7 사이의 정수인 3비트로 압축합니다. 예를 들어 **체크아웃** 작업을 전환 값 2에 매핑할 수 있습니다.
+
+그런 다음 `adtech.example`은 특정 레지스터 전환 리디렉션을 브라우저로 보냅니다.
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %} `.well-known` URL은 특수 URL입니다. 이를 통해 소프트웨어 도구와 서버는 사이트에 일반적으로 필요한 정보나 리소스(예: 사용자가 [비밀번호를 변경](/change-password-url/)할 수 있는 페이지)를 쉽게 찾을 수 있습니다. 여기서 `.well-known`은 브라우저가 이를 특별한 전환 요청으로 인식하도록 하기 위해서만 사용됩니다. 이 요청은 실제로 브라우저에서 내부적으로 취소됩니다. {% endAside %}
+
+브라우저는 이 요청을 수신합니다. `.well-known/register-conversion`을 감지하면 브라우저가 다음 작업을 수행합니다.
+
+- `conversiondestination`과 일치하는 저장소의 모든 광고 클릭을 조회합니다(사용자가 광고를 클릭할 때 `conversiondestination` URL로 등록된 URL에서 이 전환을 수신하기 때문). 하루 전에 게시자의 사이트에서 발생한 광고 클릭을 찾습니다.
+- 이 광고 클릭에 대한 전환을 등록합니다.
+
+여러 광고 클릭이 전환과 일치할 수 있습니다. 사용자가 `news.example` 및 `weather.example` 모두에서 `shoes.example`에 대한 광고를 클릭했을 수 있습니다. 이 경우 여러 전환이 등록됩니다.
+
+이제 브라우저는 이 전환을 애드테크 서버에 알려야 한다는 것을 알고 있습니다. 보다 구체적으로 말하면 브라우저는 `<a>` 요소와 픽셀 요청(`adtech.example`) 모두에 지정된 `reportingorigin`을 알려야 합니다.
+
+이를 위해 브라우저는 클릭 데이터(게시자의 사이트로부터 출처) 및 전환 데이터(광고주로부터 출처)가 포함된 데이터 컬렉션인 **전환 보고서**를 보내도록 예약합니다. 이 예에서는 사용자가 클릭하고 하루 후에 전환했습니다. 따라서 브라우저가 실행 중이라면 클릭 후 이틀에 지난 시점인 다음 날 보고서가 전송되도록 예약됩니다.
+
+### 보고서 보내기(10 및 11단계)
+
+<figure>{% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="다이어그램: 보고서를 보내는 브라우저", width="800", height="533" %}</figure>
+
+보고서를 보내도록 예약된 시간에 도달하면 브라우저가 **전환 보고서**를 보냅니다. 구체적으로, `<a>` 요소(`adtech.example`)에 지정된 보고 출처로 HTTP POST가 보내집니다. 예를 들면 다음과 같습니다.
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+매개변수로 포함되는 항목은 다음과 같습니다.
+
+- 원래 광고 클릭과 관련된 데이터(`impression-data`)
+- [잠재적으로 노이즈가 도입](#noising-of-conversion-data)된 전환과 관련된 데이터
+- 클릭에 기인하는 전환 크레딧. 이 API는 **마지막 클릭 기여** 모델을 따릅니다. 가장 최근에 일치하는 광고 클릭에는 100의 크레딧이 주어지고 일치하는 다른 모든 광고 클릭에는 0의 크레딧이 주어집니다.
+
+이 요청을 받은 애드테크 서버는 여기에서 `impression-data` 및 `conversion-data`, 즉 전환 보고서를 가져올 수 있습니다.
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### 후속 전환 및 만료
+
+나중에 사용자가 다시 전환할 수도 있습니다. 예를 들어 `advertiser.example`에서 신발에 어울리는 테니스 라켓을 구매할 수 있습니다. 여기서도 비슷한 흐름이 발생합니다.
+
+- 애드테크 서버는 브라우저에 전환 요청을 보냅니다.
+- 브라우저는 이 전환을 광고 클릭과 일치시키고 보고서를 예약하고 나중에 애드테크 서버로 보고서를 보냅니다.
+
+`impressionexpiry` 후, 이 광고 클릭에 대한 전환의 카운트가 중단되고 광고 클릭이 브라우저 저장소에서 삭제됩니다.
+
+## 사용 사례
+
+### 현재 지원되는 내용
+
+- 사용자 클릭 전환 측정: 어떤 광고 클릭이 전환으로 연결되는지 확인하고 전환에 대한 대략적인 정보에 액세스합니다.
+- 광고 선택을 최적화하기 위한 데이터를 수집합니다(예: 머신러닝 모델 훈련).
+
+### 이 버전에서 지원되지 않는 내용
+
+다음 기능은 지원되지 않지만 이 API의 향후 버전 또는 [집계](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md) 보고서에는 포함될 수 있습니다.
+
+- 조회 후 전환 측정
+- [다중 보고 끝점](https://github.com/WICG/conversion-measurement-api/issues/29)
+- [iOS/Android 앱에서 시작된 웹 전환](https://github.com/WICG/conversion-measurement-api/issues/54)
+- 전환 상승 측정/증분: 광고를 본 테스트 그룹과 그렇지 않은 대조군 간의 차이를 측정하여 전환 행동의 인과적 차이를 측정합니다.
+- 마지막 클릭이 아닌 기여 모델
+- 전환 이벤트에 대해 더 많은 양의 정보가 필요한 사용 사례(예: 세분화된 구매 가치 또는 제품 범주)
+
+이러한 기능이 지원되려면 먼저 **더 많은 개인정보 보호**(노이즈, 더 적은 비트 또는 기타 제한)가 API에 추가되어야 합니다.
+
+추가 가능한 기능에 대한 논의는 [API 제안 저장소의 **이슈**](https://github.com/WICG/conversion-measurement-api/issues)에서 공개적으로 이루어집니다.
+
+{% Aside %} 해당 사용 사례가 없습니까? API에 대한 피드백이 있습니까? [공유하세요](#share-your-feedback). {% endAside %}
+
+### 향후 버전에서 변경될 수 있는 기타 사항
+
+- 이 API는 초기 실험 단계에 있습니다. 향후 버전에서는 아래 나열된 항목을 포함하여(이에 국한되지는 않음) 이 API에 상당한 변경이 이루어질 수 있습니다. 사용자 개인정보를 보호하면서 전환을 측정하는 것이 목표가 될 것이며 이 사용 사례를 보다 잘 해결하는 데 도움이 되는 변경이 이루어질 것입니다.
+- API 및 특성 명명에 개선이 있을 수 있습니다.
+- 클릭 데이터와 전환 데이터에 인코딩이 필요하지 않을 수 있습니다.
+- 전환 데이터에 대한 3비트 제한이 증가하거나 감소할 수 있습니다.
+- [더 많은 기능](#what-is-not-supported-in-this-iteration)이 추가될 수 있으며, 이러한 새로운 기능을 지원하는 데 필요한 경우 **더 많은 개인정보 보호 수단**(노이즈 도입/더 적은 비트/기타 제한)이 마련될 수 있습니다.
+
+새로운 기능에 대한 토론에 참여하고 팔로우하려면 제안의 [GitHub 저장소](https://github.com/WICG/conversion-measurement-api/issues)를 보고 아이디어를 제출하세요.
+
+## 시도해 보기
+
+### 데모
+
+[데모](https://goo.gle/demo-event-level-conversion-measurement-api)를 시도해 보세요. "시작하기 전에" 지침을 따르세요.
+
+데모에 대한 질문이 있으면 [@maudnals](https://twitter.com/maudnals?lang=en) 또는 [@ChromiumDev](https://twitter.com/ChromiumDev)를 트윗하세요!
+
+### API로 실험하기
+
+API로 실험해볼 계획이라면(로컬에서, 또는 최종 사용자를 통해) [Conversion Measurement API 사용하기](/using-conversion-measurement)를 참조하세요.
+
+### 피드백 공유
+
+새로운 Conversion Measurement API가 여러분의 사용 사례를 지원하고 우수한 개발자 경험을 제공할 수 있으려면 **여러분의 피드백은 매우 중요합니다.**
+
+- Chrome 구현에 대한 버그를 보고하려면 [버그를 개설하세요](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A).
+- Chrome API에 대한 피드백을 공유하고 사용 사례를 논의하려면 [API 제안 저장소](https://github.com/WICG/conversion-measurement-api/issues)에서 새 이슈를 만들거나 기존 이슈에 참여하세요. 마찬가지로 [API 제안 저장소](https://github.com/privacycg/private-click-measurement/issues)에서 WebKit/Safari API 및 사용 사례에 대해 논의할 수 있습니다.
+- 광고 사용 사례에 대해 논의하고 업계 전문가와 의견을 교환하려면 [웹 광고 개선 비즈니스 그룹](https://www.w3.org/community/web-adv/)에 가입하세요. WebKit/Safari API에 대해 토론하려면 [개인정보 보호 커뮤니티 그룹](https://www.w3.org/community/privacycg/)에 가입하세요.
+
+### 계속 주시하기
+
+- 개발자 피드백과 사용 사례가 쌓여가면서 Event Conversion Measurement API가 앞으로 더욱 발전하게 될 것입니다. 제안의 [GitHub 저장소](https://github.com/WICG/conversion-measurement-api/)를 계속 주시해 주세요.
+- 이 API를 보완할 [Aggregate Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md)도 어떻게 발전하는지 지켜봐 주세요.
+
+*모든 검토자, 특히 Charlie Harrison, John Delaney, Michael Kleber 및 Kayce Basques의 기여와 피드백에 깊이 감사 드립니다.*
+
+*[Unsplash](https://unsplash.com/photos/WahfNoqbYnM) 소속 William Warby / @wawarby의 영웅 이미지, 편집함*
diff --git a/src/site/content/ko/blog/coop-coep/index.md b/src/site/content/ko/blog/coop-coep/index.md
new file mode 100644
index 00000000000..49e24d3f545
--- /dev/null
+++ b/src/site/content/ko/blog/coop-coep/index.md
@@ -0,0 +1,291 @@
+---
+layout: post
+title: COOP 및 COEP를 사용하여 웹사이트를 "cross-origin isolated"로 만들기
+subhead: |-
+  COOP 및 COEP를 사용하여 cross-origin isolated 환경을 설정하고
+  'SharedArrayBuffer', 'performance.measureUserAgentSpecificMemory()' 및 더 나은 정밀도의 고해상도 타이머와 같이 강력한 기능을 활성화하세요.
+description: |-
+  일부 웹 API는 Spectre와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 완화하기 위해 브라우저는
+  옵트인(opt-in) 기반의 격리 환경인 cross-origin isolated를 제공합니다. COOP 및 COEP를 사용하여 이러한 환경을 설정하고 'SharedArrayBuffer', 'performance.measureUserAgentSpecificMemory()' 또는 더 나은 정밀도의 고해상도 타이머와 같은 강력한 기능을 활성화하세요.
+authors:
+  - agektmr
+hero: image/admin/Rv8gOTwZwxr2Z7b13Ize.jpg
+alt: 팝업, iframe 및 이미지가 있는 웹사이트를 탐색하는 사람의 그림입니다.
+date: 2020-04-13
+updated: 2021-11-26
+tags:
+  - blog
+  - security
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/register_trial/2780972769901281281"
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+`SharedArrayBuffer`는 Chrome 92부터 교차 출처 격리가 필요합니다. [Android Chrome 88 및 데스크톱 Chrome 92의 SharedArrayBuffer 업데이트](https://developer.chrome.com/blog/enabling-shared-array-buffer/)에서 자세히 알아보세요.
+
+{% endAside %}
+
+**업데이트**
+
+- **2021년 8월 5일**: JS Self-Profiling API는 교차 출처 격리가 필요한 API 중 하나로 언급되었으나 [최신 방향성 변경](https://github.com/shhnjk/shhnjk.github.io/tree/main/investigations/js-self-profiling#conclusion)을 반영하여 삭제되었습니다.
+- **2021년 5월 6일**: 보고된 피드백 및 문제를 기반으로 Chrome M92에서 `SharedArrayBuffer`이 사용될 때의 타임라인을 조정하여 cross-origin isolated가 적용되지 않은 사이트에서 사용하는 것을 제한하였습니다.
+- **2021년 4월 16일**: [새로운 COEP 무 자격 증명 모드](https://github.com/mikewest/credentiallessness/) 및 교차 출처 격리를 위해 조건이 완화된 [COOP same-origin-allow-popups](https://github.com/whatwg/html/issues/6364)에 대한 참고 사항을 추가했습니다.
+- **2021년 3월 5일**: `SharedArrayBuffer` , `performance.measureUserAgentSpecificMemory()` 및 디버깅 기능에 대한 제한이 제거되었습니다. 이 기능은 이제 Chrome 89에서 완전히 활성화됩니다. 앞으로 더 높은 정밀도를 갖게 될 `performance.now()` 및 `performance.timeOrigin`을 추가했습니다.
+- **2021년 2월 19일**: `allow="cross-origin-isolated"` 및 디버깅 기능에 대한 참고 사항을 추가했습니다.
+- **2020년 10월 15일** : `self.crossOriginIsolated` 는 Chrome 87에서 사용할 수 있습니다. 이를 반영하여 `self.crossOriginIsolated` 가 `true` `document.domain`을 변경할 수 없습니다. `performance.measureUserAgentSpecificMemory()`는 원본 평가판을 종료하고 Chrome 89에서 기본적으로 활성화됩니다. Android Chrome의 공유 배열 버퍼는 Chrome 88에서 사용할 수 있습니다.
+
+{% YouTube 'XLNJYhjA-0c' %}
+
+일부 웹 API는 Spectre와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 완화하기 위해 브라우저는 옵트인 기반 격리 환경인 cross-origin isolated를 제공합니다. cross-origin isolated가 적용된 상태에서 웹 페이지는 다음과 같은 특별 기능을 사용할 수 있습니다.
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>설명</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">
+          <code>SharedArrayBuffer</code></a>
+        </td>
+        <td>WebAssembly 스레드에 필요합니다. 이 API는 Android Chrome 88에서 사용할 수 있습니다. 데스크톱 버전은 현재 <a href="https://www.chromium.org/Home/chromium-security/site-isolation">사이트 격리</a>의 도움으로 기본적으로 활성화되어 있지만 cross-origin isolated 상태가 필요하며 <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/">Chrome 92에서는 기본적으로 비활성화됩니다</a> .</td>
+      </tr>
+      <tr>
+        <td>
+          <a href="/monitor-total-page-memory-usage/">
+          <code>performance.measureUserAgentSpecificMemory()</code></a>
+        </td>
+        <td>Chrome 89부터 사용할 수 있습니다.</td>
+      </tr>
+      <tr>
+        <td><a href="https://crbug.com/1180178"><code>performance.now()</code> , <code>performance.timeOrigin</code></a></td>
+        <td>현재 해상도가 100마이크로초 이상으로 제한된 많은 브라우저에서 사용할 수 있습니다. 교차 출처 격리를 사용하면 해상도가 5마이크로초 이상일 수 있습니다.</td>
+      </tr>
+    </tbody>
+    <caption>cross-origin isolated 상태에서 사용할 수 있는 기능입니다.</caption>
+  </table>
+</div>
+
+cross-origin isolated 상태는 `document.domain` 수정도 방지합니다(`document.domain`을 변경할 수 있다는 것은 동일한 사이트의 문서들 간의 통신을 가능하게 하며, 동일 출처 정책의 허점으로 여겨져 왔습니다).
+
+cross-origin isolated 상태를 선택하려면 기본 문서에서 다음 HTTP 헤더를 보내야 합니다.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+이 헤더는 교차 출처 문서에 의해 로드되도록 선택하지 않은 리소스 또는 iframe의 로드를 차단하고 교차 출처 창이 문서와 직접 상호 작용하는 것을 방지하도록 브라우저에 지시합니다. 이는 교차 출처로 로드되는 리소스에 옵트인이 필요함을 의미합니다.
+
+[`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)를 검사하여 웹 페이지가 cross-origin isolated 상태인지 여부를 확인할 수 있습니다.
+
+이 문서에서는 이러한 새 헤더를 사용하는 방법을 보여줍니다. [후속 기사](/why-coop-coep)에서 더 많은 배경과 맥락을 제공할 것입니다.
+
+{% Aside %}
+
+이 기사는 `SharedArrayBuffer` , WebAssembly 스레드, `performance.measureUserAgentSpecificMemory()` 또는 고해상도 타이머를 브라우저 플랫폼 전반에 걸쳐 보다 강력한 방식으로 보다 정밀하게 사용할 수 있도록 준비하려는 사람들을 대상으로 합니다.
+
+{% endAside %}
+
+{% Aside 'key-term' %} 이 문서에서는 유사하게 들리는 많은 용어를 사용합니다. 더 명확하게 하기 위해 먼저 용어들을 정의해 보겠습니다.
+
+- [COEP: 교차 출처 임베더 정책](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP: 교차 출처 오프너 정책](https://github.com/whatwg/html/pull/5334/files)
+- [CORP: 교차 출처 리소스 정책](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS: 교차 출처 리소스 공유](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB: 교차 출처 읽기 차단](https://www.chromium.org/Home/chromium-security/corb-for-developers) {% endAside %}
+
+## COOP 및 COEP를 배포하여 웹 사이트를 cross-origin isolated로 만들기
+
+{% Aside %} [교차 출처 격리를 활성화하기 위한 가이드](/cross-origin-isolation-guide/)에서 교차 출처 격리를 활성화하는 실제 단계를 알아보세요. {% endAside %}
+
+### COOP 및 COEP 통합
+
+#### 1. `Cross-Origin-Opener-Policy: same-origin` 헤더를 최상위 문서에 설정합니다
+
+최상위 문서에서 `COOP: same-origin`을 활성화하면 동일한 출처를 가진 창과 해당 문서에서 열린 창은 동일한 출처에 동일한 COOP 설정으로 있지 않는 한 별도의 탐색 컨텍스트 그룹을 갖게 됩니다. 따라서 열린 창에 대해 격리가 적용되고 두 창 간의 상호 통신이 비활성화됩니다.
+
+{% Aside 'caution' %}
+
+이렇게 하면 OAuth 및 결제와 같은 같은 출처 간 창 상호 작용이 필요한 통합이 중단됩니다. 이 문제를 완화하기 위해 `Cross-Origin-Opener-Policy: same-origin-allow-popups` 대한 교차 출처 격리의 활성화 [조건을 완화하는 방법을 모색하고 있습니다](https://github.com/whatwg/html/issues/6364). 이렇게 하면 저절로 열리는 창과의 통신이 가능합니다.
+
+교차 출처 격리를 활성화하고 싶지만 이 문제로 차단된 [경우 출처 평가판에 등록](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)하고 새 조건을 사용할 수 있을 때까지 기다리는 것이 좋습니다. 이 문제가 안전하게 해결될 때까지 원본 평가판을 종료할 계획이 없습니다.
+
+{% endAside %}
+
+브라우징 컨텍스트 그룹은 동일한 컨텍스트를 공유하는 탭, 창 또는 iframe의 그룹입니다. 예를 들어 웹사이트(`https://a.example`)가 팝업 창(`https://b.example`)을 열면 오프너 창과 팝업 창은 동일한 브라우징 컨텍스트를 공유하며 `window.opener`와 같은 DOM API를 통해 서로 액세스할 수 있습니다.
+
+{% Img src="image/admin/g42eZMpIKNbUL0cN6yjC.png", alt="탐색 컨텍스트 그룹", width="470", height="469" %}
+
+[DevTools에서](#devtools-coop) 창 오프너와 열린 창이 별도의 탐색 컨텍스트 그룹에 있는지 확인할 수 있습니다.
+
+{% Aside 'codelab' %} [다양한 COOP 매개변수의 영향을 확인하세요](https://cross-origin-isolation.glitch.me/coop) . {% endAside %}
+
+#### 2. 리소스에 CORP 또는 CORS가 활성화되어 있는지 확인
+
+페이지의 모든 리소스가 CORP 또는 CORS HTTP 헤더와 함께 로드되었는지 확인합니다. 이 단계는 [COEP를 활성화하는 네 번째 단계](#enable-coep)에 필요합니다.
+
+리소스의 특성에 따라 수행해야 하는 작업은 다음과 같습니다.
+
+- **리소스가 동일한 출처에서만** 로드될 것으로 예상되는 경우 `Cross-Origin-Resource-Policy: same-origin` 헤더를 설정합니다.
+- **리소스가 동일한 사이트이지만 교차 출처에서** 로드될 것으로 예상되는 경우 `Cross-Origin-Resource-Policy: same-site` 헤더를 설정합니다.
+- 리소스가 **사용자 제어 하에 교차 출처에서 로드되는** 경우 가능하면 `Cross-Origin-Resource-Policy: cross-origin` 헤더를 설정하십시오.
+- 제어할 수 없는 교차 출처 리소스의 경우:
+    - 리소스가 CORS와 함께 제공되는 경우 로딩 HTML 태그에서 `crossorigin` 속성을 사용하십시오(예: `<img src="***" crossorigin>`).
+    - 리소스 소유자에게 CORS 또는 CORP를 지원하도록 요청하십시오.
+- iframe의 경우 CORP 및 COEP 헤더를 다음과 같이 사용합니다. `Cross-Origin-Resource-Policy: same-origin` (또는 컨텍스트에 따라 `same-site` , `cross-origin`) 혹은 `Cross-Origin-Embedder-Policy: require-corp`.
+
+{% Aside 'gotchas' %} `allow="cross-origin-isolated"` 기능 정책을 `<iframe>` 태그에에 적용하고 이 문서에 설명된 것과 동일한 조건을 충족하여 iframe 내에 포함된 문서에서 교차 출처 격리를 활성화할 수 있습니다. 상위 프레임과 하위 프레임을 포함한 전체 문서 체인도 교차 출처에서 격리되어야 합니다. {% endAside %}
+
+{% Aside 'key-term' %} "동일 사이트"와 "동일 출처"의 차이점을 이해하는 것이 중요합니다. [동일 사이트 및 동일 출처 이해하기](/same-site-same-origin)에서 차이점에 대해 알아보세요. {% endAside %}
+
+#### 3. COEP 보고서 전용 HTTP 헤더를 사용하여 포함된 리소스 평가
+
+`Cross-Origin-Embedder-Policy-Report-Only` 헤더를 사용하여 테스트 실행을 수행하여 정책이 실제로 작동하는지 검사할 수 있습니다. 포함된 콘텐츠를 차단하지 않고 보고서를 받게 됩니다. 이를 모든 문서에 재귀적으로 적용합니다. 보고 전용 HTTP 헤더에 대한 정보는  [보고 API를 사용하여 문제 관찰](#observe-issues-using-the-reporting-api)을 참조하십시오.
+
+#### 4. COEP 활성화 {: #enable-coep }
+
+모든 것이 작동하고 모든 리소스가 성공적으로 로드되는 것을 확인한 후 iframe을 통해 포함된 문서를 포함한 모든 문서에 `Cross-Origin-Embedder-Policy: require-corp` HTTP 헤더를 적용하세요.
+
+{% Aside 'codelab' %} [다양한 COEP/CORP 매개변수의 영향을 확인하세요](https://cross-origin-isolation.glitch.me/coep) . {% endAside %}
+
+{% Aside %} [Squoosh](https://squoosh.app)(이미지 최적화 PWA)는 [이제 COOP/COEP를 사용하여](https://github.com/GoogleChromeLabs/squoosh/pull/829/files#diff-316f969413f2d9a065fcc08c7a5589c088dd1e21deebadccfc5a4372ac5e0cbbR22-R23) Android Chrome에서도 Wasm Threads(및 Shared Array Buffer)에 액세스할 수 있습니다. {% endAside %}
+
+{% Aside 'caution' %}
+
+`Cross-Origin-Resource-Policy`를 대규모로 배포하는 방법을 모색해 왔습니다. 교차 출처 격리를 위해서는 모든 하위 리소스가 명시적으로 옵트인해야 하기 때문입니다. 그리고 우리는 반대 방향으로 가는 아이디어를 생각해 냈습니다. 모든 자격 증명을 제거하여 CORP 헤더 없이 리소스를 로드할 수 있는 [새로운 COEP "무 자격 증명" 모드](https://github.com/mikewest/credentiallessness/)입니다. 작동 방식에 관한 세부 사항을 파악하고 있지만 이 모드가 하위 `Cross-Origin-Resource-Policy` 헤더를 보내고 있는지 확인하는 부담을 덜어주기를 바랍니다.
+
+교차 출처 격리를 활성화하고 싶지만 이에 의해 차단되는 [경우 출처 평가판에 등록](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) 하고 새 모드를 사용할 수 있을 때까지 기다리는 것이 좋습니다. 새 모드를 사용할 수 있을 때까지 원본 평가판을 종료할 계획이 없습니다.
+
+{% endAside %}
+
+### `self.crossOriginIsolated` 격리 성공 여부 확인
+
+`self.crossOriginIsolated` 속성은 웹 페이지가 원본 간 격리 상태이고 모든 리소스와 창이 동일한 탐색 컨텍스트 그룹 내에서 격리된 경우 `true`를 반환합니다. 이 API를 활용하여 탐색 컨텍스트 그룹이 성공적으로 격리되고 `performance.measureUserAgentSpecificMemory()`와 같은 강력한 기능에 대한 액세스 권한을 얻었는지 확인할 수 있습니다.
+
+### Chrome DevTools를 사용하여 문제 디버그
+
+{% YouTube 'D5DLVo_TlEA' %}
+
+이미지와 같이 화면에 렌더링되는 리소스의 경우 요청이 차단되고 페이지에 누락된 이미지가 표시되기 때문에 COEP 문제를 감지하기가 상당히 쉽습니다. 그러나 스크립트나 스타일과 같이 시각적 영향이 반드시 필요하지 않은 리소스의 경우 COEP 문제가 눈에 띄지 않을 수 있습니다. 이를 위해 DevTools 네트워크 패널을 사용하십시오. COEP에 문제가 있는 경우 **상태** 열에 `(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)`를 볼 수 있습니다.
+
+<figure>{% Img src="image/admin/iGwe4M1EgHzKb2Tvt5bl.jpg", alt="네트워크 패널의 상태 열에 나타난 COEP 문제", width="800", height="444" %}</figure>
+
+그런 다음 항목을 클릭하여 자세한 내용을 볼 수 있습니다.
+
+<figure>{% Img src="image/admin/1oTBjS9q8KGHWsWYGq1N.jpg", alt="COEP 문제에 대한 세부정보는 네트워크 패널에서 네트워크 리소스를 클릭하면 헤더 탭에 표시됩니다.", width="800", height=" 241" %}</figure>
+
+**응용 프로그램** 패널을 통해 iframe 및 팝업 창의 상태를 확인할 수도 있습니다. 왼쪽의 "프레임" 섹션으로 이동하고 "상단"을 확장하여 리소스 구조의 분석을 확인합니다.
+
+<span id="devtools-coep-iframe">'SharedArrayBuffer' 사용 가능 여부 등 iframe의 상태를 확인할 수 있습니다.</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9titfaieIs0gwSKnkL3S.png", alt="Chrome DevTools iframe 검사기", width="800", height="480" %}</figure>
+
+<span id="devtools-coop">또한 교차 출처 격리 여부와 같은 팝업 창의 상태를 확인할 수 있습니다.</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kKvPUo2ZODZu8byK7gTB.png", alt="Chrome DevTools 팝업 창 검사기", width="800", height="480" %}</figure>
+
+### 보고 API를 사용하여 문제 관찰
+
+[보고 API](/reporting-api)는 다양한 문제를 감지할 수 있는 또 다른 메커니즘입니다. COEP가 리소스 로드를 차단하거나 COOP가 팝업 창을 분리할 때마다 보고서를 보내도록 사용자의 브라우저에 지시하도록 보고 API를 구성할 수 있습니다. Chrome은 COEP 및 COOP를 비롯한 다양한 용도로 버전 69부터 보고 API를 지원해 왔습니다.
+
+{% Aside %}
+
+보고 API와 `Report-To` 헤더를 사용할 준비가 되셨나요? Chrome은 `Report-To`를 `Reporting-Endpoints`로 대체하는 보고 API의 새 버전으로 전환하고 있습니다. 새 버전으로 마이그레이션하는 것을 고려하십시오. 자세한 내용은 [보고 API v1로 마이그레이션](/reporting-api-migration)을 확인하세요.
+
+{% endAside %}
+
+보고 API를 구성하고 보고서를 수신하도록 서버를 설정하는 방법을 배우려면 보고 [API 사용](/reporting-api/#using-the-reporting-api)으로 이동하십시오.
+
+#### COEP 보고서 예시
+
+교차 출처 리소스가 차단된 경우 [COEP 보고서](https://html.spec.whatwg.org/multipage/origin.html#coep-report-type) 페이로드의 예는 다음과 같습니다.
+
+```json
+[{
+  "age": 25101,
+  "body": {
+    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
+    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
+    "destination": "image",
+    "disposition": "enforce",
+    "type": "corp"
+  },
+  "type": "coep",
+  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
+}]
+```
+
+{% Aside 'caution' %} `blocked-url`은 이전 버전과의 호환성을 위해서만 존재하며 [추후에 제거됩니다](https://github.com/whatwg/html/pull/5848). {% endAside %}
+
+#### COOP 보고서 예시
+
+팝업 창이 분리되어 열릴 때의 [COOP 보고서](https://html.spec.whatwg.org/multipage/origin.html#reporting) 페이로드의 예는 다음과 같습니다.
+
+```json
+[{
+  "age": 7,
+  "body": {
+    "disposition": "enforce",
+    "effectivePolicy": "same-origin",
+    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
+    "type": "navigation-from-response"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+다른 브라우징 컨텍스트 그룹이 서로 액세스를 시도하면("보고 전용" 모드에서만) COOP도 보고서를 보냅니다. 예를 들어 `postMessage()`가 시도될 때의 보고서는 다음과 같습니다.
+
+```json
+[{
+  "age": 51785,
+  "body": {
+    "columnNumber": 18,
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "lineNumber": 83,
+    "property": "postMessage",
+    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
+    "type": "access-from-coop-page-to-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+},
+{
+  "age": 51785,
+  "body": {
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "property": "postMessage",
+    "type": "access-to-coop-page-from-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+## 결론
+
+COOP 및 COEP HTTP 헤더의 조합을 사용하여 웹 페이지를 특별한 교차 출처 격리 상태로 선택하십시오. `self.crossOriginIsolated`를 검사하여 웹 페이지가 원본 간 격리 상태인지 여부를 확인할 수 있습니다.
+
+이 교차 출처 격리 상태에 새로운 기능이 제공되고 COOP 및 COEP와 관련된 DevTools에 대한 추가 개선이 이루어지면 이 게시물을 계속 업데이트하겠습니다.
+
+## 자원
+
+- [강력한 기능을 위해 "교차 출처 격리"가 필요한 이유](/why-coop-coep/)
+- [교차 출처 격리를 가능하게 하는 가이드](/cross-origin-isolation-guide/)
+- [Android Chrome 88 및 Desktop Chrome 92의 SharedArrayBuffer 업데이트](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
+- [`measureUserAgentSpecificMemory()`를 사용하여 웹 페이지의 총 메모리 사용량을 모니터링](/monitor-total-page-memory-usage/)
diff --git a/src/site/content/ko/blog/css-marker-pseudo-element/index.md b/src/site/content/ko/blog/css-marker-pseudo-element/index.md
new file mode 100644
index 00000000000..28a81ac5461
--- /dev/null
+++ b/src/site/content/ko/blog/css-marker-pseudo-element/index.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: "CSS ::marker를 사용한 맞춤 글머리 기호"
+subhead: 이제 <ul> 또는 <ol>을 사용할 때 숫자나 글머리 기호의 색상, 크기 또는 유형을 사용자 지정하는 것이 간단합니다.
+authors:
+  - adamargyle
+  - loirooriol
+description: 이제 <ul> 또는 <ol>을 사용할 때 숫자나 글머리 기호의 색상, 크기 또는 유형을 사용자 지정하는 것이 간단합니다.
+tags:
+  - blog
+  - css
+date: 2020-09-02
+updated: 2020-09-02
+scheduled: 'true'
+hero: image/admin/GPGTyXJOh0cH0wa1PvXH.png
+thumbnail: image/admin/jbdOq0tGGzobMtaBsajn.png
+alt: 글머리 기호와 텍스트 주위에 별도의 상자를 넣어 단일 목록 항목의 구조 표시
+feedback:
+  - api
+---
+
+Bloomberg가 후원하는 Igalia 덕분에 마침내 스타일링 목록을 쉽게 처리할 수 있습니다. 보세요!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOmqXrog0YoriZqqIzEZ.png", alt="", width="665", height="384" %} <figcaption> <a href="https://glitch.com/edit/#!/marker-fun-example">소스 보기</a> </figcaption></figure>
+
+[CSS `::marker`](https://www.w3.org/TR/css-lists-3/#marker-pseudo) 덕분에 글머리 기호와 숫자의 내용과 일부 스타일을 변경할 수 있습니다.
+
+## 브라우저 호환성
+
+`::marker`는 데스크톱 및 Android용 Firefox, 데스크톱 Safari 및 iOS Safari(`color` 및 `font-*` 속성만 해당: [버그 204163](https://bugs.webkit.org/show_bug.cgi?id=204163) 참조), Chromium 기반 데스크톱 및 Android 브라우저에서 지원됩니다. 업데이트는 MDN의 [브라우저 호환성](https://developer.mozilla.org/docs/Web/CSS/::marker#Browser_compatibility) 표를 참조하십시오.
+
+## 의사 요소
+
+다음 필수 HTML 정렬되지 않은 목록을 고려하십시오.
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
+  <li>Dolores quaerat illo totam porro</li>
+  <li>Quidem aliquid perferendis voluptates</li>
+  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
+  <li>Fuga</li>
+</ul>
+```
+
+결과적으로 다음과 같은 놀라운 렌더링이 발생합니다.
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-plain-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+`<li>` 항목의 시작 부분에 있는 점은 공짜입니다! 브라우저는 생성된 마커 상자를 그리고 생성합니다.
+
+오늘 우리는 브라우저가 생성하는 글머리 기호 요소의 스타일을 지정하는 기능을 제공하는 `::marker`의사 요소에 대해 이야기하게 되어 기쁩니다.
+
+{% Aside 'key-term' %} 의사 요소는 문서 트리에 존재하지 않는 문서의 요소를 나타냅니다. 예를 들어, 해당 텍스트 줄을 감싸는 HTML 요소가 없더라도 `p::first-line`을 사용하여 단락의 첫 번째 줄을 선택할 수 있습니다. {% endAside %}
+
+### 마커 만들기
+
+`::marker` 의사 요소 마커 상자는 모든 목록 항목 요소 내에서 실제 내용과 `::before` 의사 요소 앞에 자동으로 생성됩니다.
+
+```css
+li::before {
+  content: "::before";
+  background: lightgray;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  margin-inline-end: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 340px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-before-example?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+일반적으로 목록 항목은 `<li>` HTML 요소입니다. 그러나 다른 요소도 `display: list-item`을 사용하면 목록 항목이 될 수 있습니다.
+
+```html
+<dl>
+  <dt>Lorem</dt>
+  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
+  <dd>Dolores quaerat illo totam porro</dd>
+
+  <dt>Ipsum</dt>
+  <dd>Quidem aliquid perferendis voluptates</dd>
+</dl>
+```
+
+```css/1
+dd {
+  display: list-item;
+  list-style-type: "🤯";
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-definition-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 마커 스타일링
+
+`::marker` 전까지는 `list-style-type` 및 `list-style-image`를 사용하여 목록 스타일을 지정하고 CSS 한 줄로 목록 항목 기호를 변경할 수 있었습니다.
+
+```css
+li {
+  list-style-image: url(/right-arrow.svg);
+  /* OR */
+  list-style-type: '👉';
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+이것도 편리하지만 더 많은 것이 필요합니다. 색상, 크기, 간격 등을 변경하는 것은 어떨까요? 바로 그럴 때 `::marker`를 쓸 수 있습니다. CSS에서 이러한 유사 요소의 개별 및 전역 타겟팅을 허용합니다.
+
+```css
+li::marker {
+  color: hotpink;
+}
+
+li:first-child::marker {
+  font-size: 5rem;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-introduction?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'caution' %} 위 목록에 분홍색 글머리 기호가 없다면 `::marker`가 지원되지 않는 것입니다. {% endAside %}
+
+`list-style-type` 속성은 매우 제한된 스타일 가능성을 제공합니다. `::marker` 의사 요소는 마커 자체를 대상으로 하고 스타일을 직접 적용할 수 있음을 의미합니다. 이것은 훨씬 더 많은 제어를 허용합니다.
+
+`::marker`에서 모든 CSS 속성을 사용할 수는 없습니다. 허용되는 속성과 허용되지 않는 속성 목록은 사양에 명확하게 표시되어 있습니다. 이 의사 요소로 흥미로운 것을 시도했지만 작동하지 않는 경우 아래에서 CSS로 수행할 수 있는 작업과 수행할 수 없는 작업에 대한 지침을 참조하세요.
+
+#### 허용된 CSS `::marker` 속성
+
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+`::marker`의 내용 변경은 `list-style-type`이 아닌 `content`으로 수행됩니다. 이 예시의 첫 번째 항목은 `list-style-type`을 사용하여 스타일이 지정되고 두 번째 항목은 `::marker`로 스타일이 지정됩니다. 첫 번째 경우의 속성은 마커뿐만 아니라 전체 목록 항목에 적용됩니다. 즉, 텍스트와 마커에 애니메이션이 적용됩니다. `::marker`를 사용할 때 텍스트가 아닌 마커 상자만 대상으로 지정할 수 있습니다.
+
+또한 허용되지 않는 `background` 속성이 어떻게 영향을 미치지 않는지 확인하십시오.
+
+<div class="switcher">{% Compare 'worse', 'List Styles' %} ```css li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; } ```</div>
+<p data-md-type="paragraph">{% CompareCaption %} 마커와 목록 항목 간의 혼재된 결과 {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'Marker Styles' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">li:nth-child(2)::marker {
+  content: '!';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+</code></pre>
+<p data-md-type="paragraph">{% CompareCaption %} 마커와 목록 항목 간의 초점이 맞춰진 결과 {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+<br>
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-vs-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'gotchas' %} Chromium에서 `white-space`는 위치 지정 마커 내부에만 작동합니다. 외부 위치 마커의 경우 스타일 조정자는 후행 공백을 유지하기 위해 `white-space: pre`를 강제합니다. {% endAside %}
+
+#### 마커의 내용 변경
+
+다음은 마커의 스타일을 지정할 수 있는 몇 가지 방법입니다.
+
+**모든 목록 항목 변경**
+
+```css
+li {
+  list-style-type: "😍";
+}
+
+/* OR */
+
+li::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-all?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**하나의 목록 항목만 변경**
+
+```css
+li:last-child::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-one?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**목록 항목을 SVG로 변경**
+
+```css
+li::marker {
+  content: url(/heart.svg);
+  content: url(#heart);
+  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-inline-svg?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**번호 매기기 목록 변경** `<ol>`은 어떻까요? 정렬된 목록 항목의 마커는 기본적으로 글머리 기호가 아닌 숫자입니다. CSS에서는 이를 [Counters](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)라고 하며 매우 강력합니다. 숫자가 시작하고 끝나는 위치를 설정 및 재설정하거나 로마 숫자로 전환하는 속성도 있습니다. 스타일을 지정할 수 있을까요? 예, 마커 콘텐츠 값을 사용하여 고유한 번호 매기기 프레젠테이션을 만들 수도 있습니다.
+
+```css
+li::marker {
+  content: counter(list-item) "› ";
+  color: hotpink;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-numbered-lists?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 디버깅
+
+Chrome DevTools는 `::marker` 의사 요소에 적용되는 스타일을 검사, 디버그 및 수정하는 데 도움을 줄 준비가 되어 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PYKVXEzycrMhQujXsNxQ.png", alt="DevTools가 사용자 에이전트 및 사용자 스타일의 스타일을 열고 표시합니다.", width="776", height="574", style="max-inline-size: 480px" %}</figure>
+
+### 미래의 의사 요소 스타일링
+
+::marker에 대한 자세한 내용은 다음에서 확인할 수 있습니다.
+
+- [Smashing Magazine](https://www.smashingmagazine.com/)의 [CSS 목록, 마커 및 카운터](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/)
+- [CSS-Tricks](https://css-tricks.com/)의 [CSS 카운터 및 CSS 그리드로 계산](https://css-tricks.com/counting-css-counters-css-grid/)
+- [MDN](https://developer.mozilla.org/)의 [CSS 카운터 사용하기](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+
+지금까지 스타일링하기 어려웠던 것에 접근할 수 있어 좋습니다. 자동으로 생성된 다른 요소의 스타일을 지정할 수 있기를 원할 수 있습니다. 여러 브라우저에서 동일한 방식으로 구현되지 않는 `<details>` 또는 검색 입력 자동 완성 표시기에 불만이 있을 수 있습니다. 필요한 것을 공유하는 한 가지 방법은 [https://webwewant.fyi](https://webwewant.fyi)에서 원하는 것을 생성하는 것입니다.
diff --git a/src/site/content/ko/blog/css-masking/index.md b/src/site/content/ko/blog/css-masking/index.md
new file mode 100644
index 00000000000..bf03147cf2a
--- /dev/null
+++ b/src/site/content/ko/blog/css-masking/index.md
@@ -0,0 +1,127 @@
+---
+title: CSS의 mask-image 속성을 사용하여 이미지에 효과 적용
+subhead: CSS 마스킹은 이미지를 마스크 레이어로 사용할 수 있는 옵션을 제공합니다. 즉, 이미지, SVG 또는 그라디언트를 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.
+description: CSS 마스킹은 이미지를 마스크 레이어로 사용할 수 있는 옵션을 제공합니다. 즉, 이미지, SVG 또는 그라디언트를 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: 마스크를 쓴 테디베어.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+`clip-path` 속성을 사용하여 [요소를 자르면](/css-clipping) 잘린 영역이 보이지 않게 됩니다. 대신 이미지의 일부를 불투명하게 만들거나 이미지에 다른 효과를 적용하려면 마스킹을 사용해야 합니다. 이 게시물은 CSS에서 [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) 속성을 사용하는 방법을 설명합니다. 이를 통해 마스크 레이어로 사용할 이미지를 지정할 수 있습니다. 이렇게 하면 세 가지 옵션이 제공됩니다. 즉, 이미지 파일을 마스크, SVG 또는 그라디언트로 사용할 수 있습니다.
+
+## 브라우저 호환성
+
+대부분의 브라우저는 표준 CSS 마스킹 속성을 부분적으로만 지원합니다. 최상의 브라우저 호환성을 얻으려면 표준 속성과 함께 `-webkit-` 접두어를 사용해야 합니다. 전체 브라우저 지원 정보를 보려면 [CSS 마스크를 사용할 수 있습니까?](https://caniuse.com/#feat=css-masks)를 참조하세요.
+
+브라우저가 접두어 속성 사용을 잘 지원하지만 마스킹을 사용하여 이미지 위에 있는 텍스트를 표시할 때 마스킹을 사용할 수 없는 경우 발생할 상황에 주의하세요. `mask-image` 또는 `-webkit-mask-image`에 대한 지원을 감지하기 위한 기능 쿼리를 사용하고 마스킹된 버전을 추가하기 전에 읽기 가능한 대체 수단을 제공하는 것이 좋습니다.
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* code that requires mask-image here. */
+}
+```
+
+## 이미지로 마스킹
+
+`mask-image` 속성은 `background-image` 속성과 유사한 방식으로 작동합니다. `url()` 값을 사용하여 이미지를 전달합니다. 마스크 이미지에는 투명하거나 반투명한 영역이 있어야 합니다.
+
+완전히 투명한 영역은 해당 영역 아래에 있는 이미지의 일부를 보이지 않게 합니다. 그러나 반투명한 영역을 사용하면 원본 이미지의 일부가 관통되어 보일 수 있습니다. 아래에서 Glitch의 차이를 확인할 수 있습니다. 첫 번째 이미지는 마스크가 없는 풍선의 원본 이미지입니다. 마스크가 적용된 두 번째 이미지에는 완전히 투명한 배경에 흰색 별이 있습니다. 세 번째 이미지에는 그라데이션 투명도의 배경에 흰색 별이 있습니다.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+이 예제에서는 값이 `cover`인 `mask-size` 속성도 사용되었습니다. 이 속성은 [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size)와 같은 방식으로 작동합니다. `cover` 및 `contain` 키워드를 사용하거나 유효한 길이 단위 또는 백분율을 사용하여 배경 크기를 지정할 수 있습니다.
+
+작은 이미지를 반복 패턴으로 사용하기 위해 배경 이미지를 반복하는 것처럼 마스크를 반복할 수도 있습니다.
+
+## SVG로 마스킹
+
+이미지 파일을 마스크로 사용하는 대신 SVG를 사용할 수 있습니다. 이를 위해 몇 가지 방법을 이용할 수 있습니다. 첫 번째는 `<mask>` 요소를 SVG 내에 두고 `mask-image` 속성에서 해당 요소의 ID를 참조하는 것입니다.
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balloons">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="SVG 마스크 사용 예", width="699", height="490" %}</figure>
+
+이 접근 방식의 장점은 마스크가 이미지뿐만 아니라 모든 HTML 요소에 적용될 수 있다는 것입니다. 불행히도 이 접근 방식을 지원하는 브라우저는 Firefox뿐입니다.
+
+그러나 이미지를 마스킹하는 가장 일반적인 시나리오의 경우 SVG에 이미지를 포함할 수 있으므로 모든 것이 손실되지는 않습니다.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 그라데이션으로 마스킹
+
+CSS 그라디언트를 마스크로 사용하면 이미지나 SVG를 만드는 수고를 들이지 않고도 마스킹된 영역을 간편하게 얻을 수 있습니다.
+
+예를 들어, 마스크로 사용되는 간단한 선형 그라디언트는 이미지의 하단 부분이 캡션 아래에서 너무 어두워 보이지 않도록 할 수 있습니다.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+지원되는 모든 그라디언트 유형을 사용하고 원하는 만큼 창의적으로 만들 수 있습니다. 다음 예제에서는 방사형 그라디언트를 사용하여 캡션 뒤를 비추는 원형 마스크를 만듭니다.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 여러 마스크 사용
+
+배경 이미지와 마찬가지로 여러 마스크 소스를 지정하고 결합하여 원하는 효과를 얻을 수 있습니다. 이것은 CSS 그라디언트로 생성된 패턴을 마스크로 사용하려는 경우에 특히 유용합니다. 일반적으로 여러 배경 이미지를 사용하므로 마스크로 쉽게 변환할 수 있습니다.
+
+예를 들어 [이 기사](https://cssgradient.io/blog/gradient-patterns/)에서 멋진 바둑판 패턴을 찾았습니다. 배경 이미지를 사용하는 코드는 다음과 같습니다.
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+이 패턴이나 배경 이미지용으로 설계된 다른 패턴을 마스크로 바꾸려면 `background-*` 속성을 `-webkit` 접두어가 붙은 속성을 포함해 관련 `mask` 속성으로 대체해야 합니다.
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+이미지에 그라디언트 패턴을 적용하면 정말 멋진 효과를 얻을 수 있습니다. Glitch를 다시 결합하고 다른 변형을 테스트해 보세요.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+클리핑과 함께 CSS 마스크는 그래픽 애플리케이션을 사용하지 않고도 이미지 및 기타 HTML 요소에 흥미를 더할 수 있는 방법입니다.
+
+*<span>Unsplash에서 제공된 <a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a>의 사진</span>.*
diff --git a/src/site/content/ko/blog/css-web-vitals/index.md b/src/site/content/ko/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..25e6358f2e6
--- /dev/null
+++ b/src/site/content/ko/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: Web Vitals용 CSS
+subhead: Web Vitals 최적화를 위한 CSS 관련 기술
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: 멀티 컬러 그라디언트
+description: 이 문서에서는 Web Vitals를 최적화하기 위한 CSS 관련 기술을 다룹니다.
+tags:
+  - blog
+  - performance
+  - css
+---
+
+스타일을 작성하고 레이아웃을 작성하는 방식은 [핵심 성능 향상](/learn-core-web-vitals/)에 큰 영향을 미칠 수 있습니다. [이는 CLS(Cumulative Layout Shift)](/cls) 및 [LCP(Large Contentful Paint)](/lcp)에 특히 해당됩니다.
+
+이 문서에서는 Web Vitals를 최적화하기 위한 CSS 관련 기술을 다룹니다. 이러한 최적화는 페이지의 다양한 측면(레이아웃, 이미지, 글꼴, 애니메이션, 로딩)으로 분류됩니다. 그 과정에서 [예제 페이지](https://codepen.io/una/pen/vYyLKvY)를 개선하는 방법을 살펴보겠습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="예제 사이트의 스크린샷", width="800", height="646" %}
+
+## 레이아웃
+
+### DOM에 콘텐츠 삽입
+
+주변 콘텐츠가 이미 로드된 후 페이지에 콘텐츠를 삽입하면 페이지의 다른 모든 항목이 아래로 밀려납니다. 이로 인해 [레이아웃이 변경](/cls/#layout-shifts-in-detail)됩니다.
+
+[쿠키 알림](/cookie-notice-best-practices/), 특히 페이지 상단에 있는 쿠키 알림은 이 문제의 일반적인 예입니다. 로드할 때 이러한 유형의 레이아웃 이동을 자주 일으키는 다른 페이지 요소에는 광고 및 포함이 있습니다.
+
+#### 식별
+
+Lighthouse "대규모 레이아웃 변경 방지" 감사는 변경된 페이지 요소를 식별합니다. 이 데모의 경우 결과는 다음과 같습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Lighthouse의 '대규모 레이아웃 변경 방지' 감사", width="800", height="500" %}
+
+쿠키 알림이 로드될 때 쿠키 알림 자체가 이동하지 않기 때문에 쿠키 알림은 이러한 결과에 나열되지 않습니다. 오히려 페이지에서 그 아래에 있는 항목(즉, `div.hero` 및 `article`)이 이동합니다. 레이아웃 이동 식별 및 수정에 대한 자세한 내용은 [레이아웃 이동 디버깅](/debugging-layout-shifts)을 참조하십시오.
+
+{% Aside %}
+
+Lighthouse는 "페이지 로드" 이벤트까지만 페이지 성능을 분석합니다. 쿠키 배너, 광고 및 기타 위젯은 페이지가 로드될 때까지 로드되지 않는 경우가 있습니다. 이러한 레이아웃 변경은 Lighthouse에서 플래그를 지정하지 않은 경우에도 여전히 사용자에게 영향을 줍니다.
+
+{% endAside %}
+
+#### 수정
+
+절대 위치 또는 고정 위치를 사용하여 페이지 하단에 쿠키 알림을 배치합니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="페이지 하단에 쿠키 알림 표시", width="800", height="656" %}
+
+이전:
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+이후:
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+이 레이아웃 이동을 수정하는 또 다른 방법은 화면 상단에 쿠키 알림을 위한 공간을 예약하는 것입니다. 이 접근 방식은 똑같이 효과적입니다. 자세한 내용은 [쿠키 공지 모범 사례](/cookie-notice-best-practices/)를 참조하십시오.
+
+{% Aside %}
+
+쿠키 알림은 로드될 때 레이아웃 이동을 유발하는 여러 페이지 요소 중 하나입니다. 이러한 페이지 요소를 자세히 살펴보는 데 도움이 되도록 후속 데모 단계에는 쿠키 알림이 포함되지 않습니다.
+
+{% endAside %}
+
+## 이미지
+
+### 이미지 및 최대 내용이 포함된 페인트(LCP)
+
+이미지는 일반적으로 페이지의 LCP(Large Contentful Paint) 요소입니다. [LCP 요소가 될 수 있는 다른 페이지 요소](/lcp/#what-elements-are-considered)에는 텍스트 블록 및 비디오 포스터 이미지가 있습니다. LCP 요소가 로드되는 시간에 따라 LCP가 결정됩니다.
+
+페이지의 LCP 요소는 페이지가 처음 표시될 때 사용자에게 표시되는 콘텐츠에 따라 페이지 로드마다 다를 수 있습니다. 예를 들어, 이 데모에서 쿠키 알림의 배경, 영웅 이미지 및 기사 텍스트는 잠재적인 LCP 요소의 일부입니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="다양한 시나리오에서 페이지의 LCP 요소를 강조하는 다이어그램.", width="800", height="498" %}
+
+예시 사이트에서 쿠키 알림의 배경 이미지는 사실 큰 이미지입니다. LCP를 개선하려면 효과를 생성하기 위해 이미지를 로드하는 대신 CSS에서 그라디언트를 칠할 수 있습니다.
+
+#### 수정
+
+이미지 대신 CSS 그라디언트를 사용 `.banner` CSS를 변경합니다.
+
+이전:
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+이후:
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### 이미지 및 레이아웃 변경
+
+브라우저는 이미지가 로드된 후에만 이미지의 크기를 결정할 수 있습니다. 페이지가 렌더링된 후 이미지 로드가 발생하지만 이미지를 위한 공간이 예약되지 않은 경우 이미지가 나타날 때 레이아웃 이동이 발생합니다. 데모에서 영웅 이미지가 로드될 때 레이아웃 이동을 일으키고 있습니다.
+
+{% Aside %} 이미지 로드가 느린 상황(예: 연결 속도가 느리거나 파일 크기가 특히 큰 이미지를 로드할 때)에서 레이아웃 이동을 유발하는 이미지 현상이 더 분명합니다. {% endAside %}
+
+#### 식별
+
+`width`와 `height`가 없는 이미지를 식별하려면 Lighthouse의 "이미지 요소에 너비와 높이가 명시적" 감사를 사용합니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Lighthouse의 '이미지 요소에 너비와 높이가 명시적'", width="800", height="274" %}
+
+이 예에서 영웅 이미지와 기사 이미지 모두 `width`와 `height` 속성이 없습니다.
+
+#### 수정
+
+레이아웃 이동을 방지하려면 이러한 이미지 `width` 및 `height` 속성을 설정하십시오.
+
+이전:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
+```
+
+이후:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4" %} <figcaption> 이제 이미지가 레이아웃 이동 없이 로드됩니다.</figcaption></figure>
+
+{% Aside %} 이미지를 로드하는 또 다른 방법은 `width` 및 `height` 속성 지정과 함께 [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) 및 [`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) 속성을 사용하는 것입니다. 이렇게 하면 다른 장치에 다른 크기의 이미지를 제공할 수 있는 추가적인 성능 이점이 있습니다. 자세한 내용은 [반응형 이미지 제공](/serve-responsive-images/)을 참조하십시오. {% endAside %}
+
+## 글꼴
+
+글꼴로 인해 텍스트 렌더링이 지연되고 레이아웃이 변경될 수 있습니다. 결과적으로 글꼴을 빨리 전달하는 것이 중요합니다.
+
+### 지연된 텍스트 렌더링
+
+기본적으로 브라우저는 연결된 웹 글꼴이 아직 로드되지 않은 경우 텍스트 요소를 즉시 렌더링하지 않습니다. 이것은 ["스타일이 지정되지 않은 텍스트의 플래시"(FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)를 방지하기 위해 수행됩니다. 많은 상황에서 이로 인해 [FCP(First Contentful Paint)](/fcp)가 지연됩니다. 어떤 상황에서는 이것이 LCP(Large Contentful Paint)를 지연시킵니다.
+
+{% Aside %}
+
+기본적으로 Chromium 기반 및 Firefox 브라우저는 연결된 웹 글꼴이 로드되지 않은 경우 [최대 3초 동안 텍스트 렌더링을 차단](https://developers.google.com/web/updates/2016/02/font-display)합니다. Safari는 텍스트 렌더링을 무기한 차단합니다. [차단 기간](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline)은 브라우저가 웹 글꼴을 요청할 때 시작됩니다. 차단 기간이 끝날 때까지 글꼴이 로드되지 않은 경우 브라우저는 대체 글꼴을 사용하여 텍스트를 렌더링하고 사용 가능한 경우 웹 글꼴로 교체합니다.
+
+{% endAside %}
+
+### 레이아웃 변경
+
+글꼴 스와핑은 사용자에게 콘텐츠를 빠르게 표시하는 데 탁월하지만 레이아웃 이동을 유발할 가능성이 있습니다. 이러한 레이아웃 변경은 웹 글꼴과 해당 대체 글꼴이 페이지에서 다른 양의 공간을 차지할 때 발생합니다. 비슷한 비율의 글꼴을 사용하면 이러한 레이아웃 이동의 크기가 최소화됩니다.
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="글꼴 교체로 인한 레이아웃 이동을 보여주는 다이어그램", width="800", height="452" %} <figcaption> 이 예에서 글꼴 교체로 인해 페이지 요소가 5픽셀 위쪽으로 이동했습니다.</figcaption></figure>
+
+#### 식별
+
+특정 페이지에 로드되는 글꼴을 보려면 DevTools에서 **네트워크** 탭을 열고 **글꼴**로 필터링하십시오. 글꼴은 큰 파일일 수 있으므로 일반적으로 더 적은 수의 글꼴만 사용하는 것이 성능에 더 좋습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="DevTools에 표시된 글꼴의 스크린샷", width="800", height="252" %}
+
+글꼴을 요청하는 데 걸리는 시간을 보려면 **타이밍** 탭을 클릭하십시오. 글꼴을 더 빨리 요청할수록 더 빨리 로드하여 사용할 수 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="DevTools의 '타이밍' 탭 스크린샷", width="800", height="340" %}
+
+글꼴에 대한 요청 체인을 보려면 **개시자** 탭을 클릭하십시오. 일반적으로 요청 체인이 짧을수록 글꼴을 더 빨리 요청할 수 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="DevTools의 '초기자' 탭 스크린샷", width="800", height="189" %}
+
+#### 수정
+
+이 데모는 Google Fonts API를 사용합니다. `<link>` 태그 또는 `@import` 구문을 통해 글꼴을 로드하는 옵션을 제공합니다. `<link>` 코드 조각에는 `preconnect` 리소스 힌트가 포함되어 있습니다. `@import` 버전을 사용하는 것보다 스타일시트를 더 빠르게 전달할 수 있습니다.
+
+매우 높은 수준에서 [리소스 힌트](https://www.w3.org/TR/resource-hints/#resource-hints)는 브라우저에 특정 연결을 설정하거나 특정 리소스를 다운로드해야 한다는 힌트를 주는 방법으로 생각할 수 있습니다. 결과적으로 브라우저는 이러한 작업의 우선 순위를 지정합니다. 리소스 힌트를 사용할 때 특정 작업의 우선 순위를 지정하면 다른 작업에서 브라우저 리소스가 제거된다는 점에 유의하십시오. 따라서 리소스 힌트는 모든 것이 아니라 신중하게 사용해야 합니다. 자세한 내용은 [인지되는 페이지 속도를 개선하기 위해 조기에 네트워크 연결 설정](/preconnect-and-dns-prefetch/)을 참조하십시오.
+
+스타일시트에서 `@import` 구문을 제거하십시오.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+문서의 `<head>` 다음에 `<link>` 태그를 추가합니다.
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+이러한 링크 태그는 브라우저에 Google 글꼴이 사용하는 원본에 대한 초기 연결을 설정하고 Montserrat 및 Roboto에 대한 글꼴 선언이 포함된 스타일시트를 로드하도록 지시합니다. 이러한 `<link>` 태그가 `<head>`에 가능한 한 일찍 배치되어야 합니다.
+
+{% Aside %}
+
+Google 글꼴에서 글꼴의 하위 집합만 로드하려면 [`?text=`](https://developers.google.com/fonts/docs/getting_started) API 매개변수를 추가합니다. 예를 들어 `?text=ABC`는 "ABC"를 렌더링하는 데 필요한 문자만 로드합니다. 이것은 글꼴의 파일 크기를 줄이는 좋은 방법입니다.
+
+{% endAside %}
+
+## 애니메이션
+
+애니메이션이 Web Vitals에 영향을 미치는 주요 방법은 레이아웃 변경을 일으키는 경우입니다. 사용을 피해야 하는 두 가지 유형의 애니메이션이 있습니다. [레이아웃을 트리거하는 애니메이션](/animations-guide/#triggers)과 페이지 요소를 이동하는 "애니메이션과 유사한" 효과입니다. [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) , [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) 및 [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter)와 같은 CSS 속성을 사용하여 보다 성능이 뛰어난 동등한 애니메이션으로 대체할 수 있습니다. 자세한 내용은 [고성능 CSS 애니메이션을 만드는 방법](/animations/)을 참조하십시오.
+
+### 식별
+
+Lighthouse의 "비합성 애니메이션 피하기" 감사는 성능이 좋지 않은 애니메이션을 식별하는 데 도움이 될 수 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Lighthouse의 '비합성 애니메이션 방지' 감사", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+Lighthouse의 "비합성 애니메이션 방지" 감사는 성능이 저하된 *CSS 애니메이션*만 식별합니다. JavaScript 기반 애니메이션(예: [`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 사용)은 성능에 좋지 않지만 이 감사에서 플래그가 지정되지 않습니다.
+
+{% endAside %}
+
+### 수정
+
+`margin-left` 속성을 전환하는 대신 `transform: translateX()` `slideIn` 애니메이션 시퀀스를 변경합니다.
+
+이전:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+이후:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## 중요한 CSS
+
+스타일시트는 렌더링 차단입니다. 즉, 브라우저가 스타일시트를 만나면 브라우저가 스타일시트를 다운로드하고 구문 분석할 때까지 다른 리소스 다운로드를 중지합니다. 이것은 LCP를 지연시킬 수 있습니다. 성능을 향상시키려면 [사용하지 않는 CSS를 제거](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/)하고 [중요한 CSS를 인라인](/extract-critical-css/)하고 [중요하지 않은 CSS를 연기](/defer-non-critical-css/#optimize)하는 것을 고려하십시오.
+
+## 결론
+
+추가 개선의 여지가 있지만(예: [이미지 압축](/use-imagemin-to-compress-images/)을 사용하여 이미지를 더 빠르게 전달) 이러한 변경으로 인해 이 사이트의 Web Vital이 크게 향상되었습니다. 이것이 실제 사이트인 경우 다음 단계는 [실제 사용자로부터 성능 데이터를 수집](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data)하여 [대부분의 사용자에 대한 Web Vitals 임계값을 충족](/vitals-measurement-getting-started/#data-interpretation)하는지 평가하는 것입니다. Web Vitals에 대한 자세한 내용은 [Web Vitals 학습](/learn-core-web-vitals/)을 참조하십시오.
diff --git a/src/site/content/ko/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/ko/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..aa833655ed3
--- /dev/null
+++ b/src/site/content/ko/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,237 @@
+---
+layout: post
+title: Core Web Vitals 메트릭 및 임계값 정의
+subhead: Core Web Vitals 임계값에 대한 연구 및 방법론
+authors:
+  - bmcquade
+description: Core Web Vitals 임계값에 대한 연구 및 방법론
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Core Web Vitals 임계값에 대한 연구 및 방법론
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Core Web Vital](/vitals/#core-web-vitals)은 웹에서 실제 사용자 경험의 중요한 측면을 측정하는 필드 메트릭 세트입니다. Core Web Vitals에는 메트릭과 각 메트릭에 대한 대상 임계값이 포함되어 있어 개발자가 사이트 경험 품질이 "양호(good)", "개선 필요(needs improvement)" 또는 "나쁨(poor)" 중 어디에 속하는지 이해하는 데 도움이 됩니다. 이 게시물에서는 일반적으로 Core Web Vitals 메트릭에 대한 임계값을 선택하는 데 사용되는 접근 방식과 특정 Core Web Vitals 메트릭에 대한 임계값이 어떻게 선택되었는지 설명합니다.
+
+## 다시 짚어보기: Core Web Vitals 메트릭 및 임계값
+
+2020년 Core Web Vitals은 Large Contentful Paint(최대 콘텐츠풀 페인트, LCP), First Input Delay(최초 입력 지연, FID), Cumulative Layout Shift(누적 레이아웃 이동, CLS) 메트릭입니다. 각 메트릭은 사용자 경험의 다른 측면을 측정합니다. LCP는 인지된 로드 속도를 측정하고 페이지 로드 타임라인에서 페이지의 메인 콘텐츠가 로드된 지점을 표시합니다. FID는 응답성을 측정하고 사용자가 페이지와 처음 상호 작용을 시도할 때 느끼는 경험을 수량화합니다. CLS는 시각적 안정성을 측정하고 시각적 페이지 콘텐츠의 예기치 못한 레이아웃 이동을 수치화하여 표현합니다.
+
+각 Core Web Vitals 메트릭에는 성능을 "양호(good)", "개선 필요(needs improvement)" 또는 "나쁨(poor)"으로 분류하는 관련 임계값이 있습니다.
+
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="최대 콘텐츠풀 페인트 권장 임계값", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="최초 입력 지연 권장 임계값", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="누적 레이아웃 이동 권장 임계값", width="400", height="350" %}
+</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>양호</th>
+      <th>나쁨</th>
+      <th>백분위수</th>
+    </tr>
+    <tr>
+      <td>최대 콘텐츠풀 페인트</td>
+      <td>≤2500ms</td>
+      <td>&gt;4000ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>최초 입력 지연</td>
+      <td>≤100ms</td>
+      <td>&gt;300ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>누적 레이아웃 이동</td>
+      <td>≤0.1</td>
+      <td>&gt;0.25</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">추가적으로 페이지 또는 사이트의 전반적인 성능을 분류하기 위해 해당 페이지 또는 사이트에 대한 모든 페이지 조회수의 75번째 백분위수 값을 사용합니다. 즉, 사이트에 대한 페이지 조회수의 75% 이상이 "양호" 임계값을 충족하는 경우 해당 사이트는 해당 메트릭에 대해 "양호"한 성능을 보이는 것으로 간주됩니다. 반대로 페이지 보기의 25% 이상이 "나쁨" 임계값을 충족하면 해당 사이트의 성능은 "나쁜" 것으로 간주됩니다. 예를 들어 2초의 75번째 백분위수 LCP는 "양호"로 분류되고 5초의 75번째 백분위수 LCP는 "나쁨"으로 분류됩니다.</p>
+<h2 data-md-type="header" data-md-header-level="2">Core Web Vitals 메트릭 및 임계값 기준</h2>
+<p data-md-type="paragraph">Core Web Vitals 메트릭에 대한 임계값을 설정하기 위해 우리는 먼저 각 임계값이 충족해야 하는 기준을 식별했습니다. 아래에서는 2020년 Core Web Vitals 메트릭 임계값을 평가하기 위해 Google에서 사용한 기준을 설명합니다. 다음 섹션에서는 2020년에 각 메트릭에 대한 임계값을 선택하기 위해 이러한 기준이 어떻게 적용되었는지 자세히 설명하겠습니다. 이후 몇 년 동안 이러한 기준 및 임계값을 개선하고 추가해 나가며 웹에서의 우수한 사용자 경험 측정을 더욱 발전시켜 나갈 수 있을 것으로 예상합니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">고품질 사용자 경험</h3>
+<p data-md-type="paragraph">핵심 목표는 사용자 및 사용자 경험 품질을 최적화하는 것입니다. 이를 감안할 때 Core Web Vitals의 "양호" 임계값을 충족하는 페이지가 고품질 사용자 경험을 제공하도록 하는 것을 목표로 합니다.</p>
+<p data-md-type="paragraph">고품질 사용자 경험과 관련된 임계값을 식별하기 위해 우리는 인간의 인식과 HCI 연구를 살펴봅니다. 이 연구는 고정된 단일 임계값을 사용하여 요약되는 경우가 있지만, 기본 연구는 일반적으로 값의 범위로 표현된다는 점을 알 수 있었습니다. 예를 들어, 사용자가 초점을 잃기 전에 일반적으로 대기하는 시간에 대한 연구는 1초로 설명되는 반면, 기본 연구는 실제로 수백 밀리초에서 수 초의 범위로 표현됩니다. 인식 임계값이 사용자 및 컨텍스트에 따라 다르다는 사실은 익명화된 Chrome 메트릭 데이터 집계가 뒷받침하며 사용자가 페이지 로드를 중단하기 전에 웹페이지에 콘텐츠가 표시될 때까지 기다리는 시간이 단 한 번도 없음을 보여줍니다. 오히려 이 데이터는 원활하고 연속적인 분포를 보여줍니다. 인간의 인식 임계값 및 관련 HCI 연구에 대한 더 자세한 내용은 <a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">Web Vitals의 과학</a>을 참조하세요.</p>
+<p data-md-type="paragraph">주어진 메트릭에 대해 관련 사용자 경험 연구를 이용할 수 있고 자료의 값 범위에 대해 합당한 합의가 있는 경우 우리는 이 범위를 임계값 선택 프로세스를 안내하는 입력으로 사용합니다. 누적 레이아웃 이동과 같은 새로운 메트릭처럼 관련 사용자 경험 연구를 사용할 수 없는 경우 대신 메트릭에 대한 서로 다른 후보 임계값을 충족하는 실제 페이지를 평가하여 우수한 사용자 경험을 제공하는 임계값을 식별합니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">기존 웹 콘텐츠로 달성 가능</h3>
+<p data-md-type="paragraph">또한 사이트 소유자가 "양호" 임계값을 충족하도록 사이트를 최적화려면 웹의 기존 콘텐츠에 대해 이러한 임계값을 달성할 수 있어야 합니다. 예를 들어, 0밀리초는 즉각적인 로드 경험을 제공하는 이상적인 LCP "양호" 임계값이지만 네트워크 및 장치 처리 지연으로 인해 대부분의 경우 0밀리초 임계값을 실제로 달성할 수는 없습니다. 따라서 0밀리초는 Core Web Vitals에 대한 합리적인 LCP "양호" 임계값이라고 할 수 없습니다.</p>
+<p data-md-type="paragraph">Core Web Vitals의 "양호" 임계값 후보를 평가할 때는 <a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Chrome User Experience Report</a>(CrUX)의 데이터를 기반으로 해당 임계값을 달성할 수 있는지 확인합니다. 임계값을 달성할 수 있는지 확인하려면 현재 <a href="/same-site-same-origin/#origin" data-md-type="link">원본</a>의 10% 이상이 "양호" 임계값을 충족해야 합니다. 또한, 최적화가 제대로 이루어진 사이트가 필드 데이터의 가변성으로 인해 잘못 분류되지 않도록 이러한 최적화 콘텐츠가 일관되게 "양호" 임계값을 충족하는지 확인합니다.</p>
+<p data-md-type="paragraph">반대로, "나쁨" 임계값을 설정할 때는 현재 소수의 출처만이 충족하지 못하는 성능 수준을 식별합니다. "나쁨" 임계값을 정의하는 것과 관련해 사용 가능한 연구가 없는 한, 기본적으로 가장 성능이 좋지 않은 원본의 10~30%가 "나쁨"으로 분류됩니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">기준에 대한 마지막 정리</h3>
+<p data-md-type="paragraph">후보 임계값을 평가하면서 우리는 기준이 서로 충돌하는 경우가 있음을 발견했습니다. 예를 들어, 지속적으로 달성할 수 있는 임계값과 지속적으로 우수한 사용자 경험을 보장하는 것 사이에 충돌이 있을 수 있습니다. 또한 인간의 인지와 관련한 연구는 일반적으로 다양한 값을 제공하며 사용자 행동 메트릭은 행동의 점진적인 변화를 보여주기 때문에 메트릭에 대한 단일 "올바른" 임계값이 없는 경우가 많습니다. 따라서 2020년 Core Web Vitals에 대한 우리의 접근 방식은 완벽한 임계값은 없으며 때로는 여러 가지 합리적인 임계값 중 선택해야 할 수도 있음을 인지하면서 위의 기준을 가장 잘 충족하는 임계값을 선택하는 것이었습니다. "완벽한 임계계값"을 찾는 것보다는 "우리 기준을 최적으로 달성하는 후보 임계값"을 찾는 데 집중했습니다.</p>
+<h2 data-md-type="header" data-md-header-level="2">백분위수 선택</h2>
+<p data-md-type="paragraph">앞서 언급했듯이 페이지 또는 사이트의 전반적인 성능을 분류하기 위해 해당 페이지 또는 사이트에 대한 모든 방문의 75번째 백분위수 값을 사용합니다. 75번째 백분위수는 두 가지 기준에 따라 선택되었습니다. 첫째, 백분위수는 페이지 또는 사이트 방문의 대부분이 목표 수준의 성능을 경험했음을 보증해야 합니다. 둘째, 선택된 백분위수의 값이 이상값에 의해 지나치게 영향을 받아서는 안 됩니다.</p>
+<p data-md-type="paragraph">이러한 목표는 다소 상충됩니다. 첫 번째 목표를 충족하려면 일반적으로 더 높은 백분위수를 선택하는 것이 좋습니다. 그러나 백분위수가 높을수록 결과 값이 이상적인 값의 영향을 받을 가능성도 높아집니다. 사이트에 대한 몇 번의 방문이 비정상적인 네트워크 연결을 통해 발생하여 LCP 샘플이 지나치게 큰 경우 이러한 이상값 샘플에 의해 사이트 분류가 결정되도록 할 수는 없었습니다. 예를 들어, 95번째와 같은 높은 백분위수를 사용하여 100번의 방문이 있는 사이트의 성능을 평가하는 경우 95번째 백분위수 값에 대해 이상값의 영향을 받는 이상값 샘플은 5개뿐입니다.</p>
+<p data-md-type="paragraph">분석 후 이러한 목표가 조금 상충한다는 점을 감안하여 우리는 75번째 백분위수가 합리적인 균형을 이룬다는 결론을 내렸습니다. 75번째 백분위수를 사용하면 대부분의 사이트 방문(3/4)이 목표 수준 이상의 성능을 경험했다는 것을 알 수 있습니다. 또한 75번째 백분위수 값은 이상값의 영향을 덜 받습니다. 다시 예시로 돌아가 보죠. 100회의 방문이 있는 사이트의 경우 이러한 방문 중 25회는 이상값의 영향을 받는 75번째 백분위수 값에 대해 큰 이상값 샘플을 보고해야 합니다. 100개 샘플 중 25개가 이상값일 가능성이 있지만 95번째 백분위수를 사용하는 경우보다 가능성이 훨씬 적습니다.</p>
+<h2 data-md-type="header" data-md-header-level="2">최대 콘텐츠풀 페인트</h2>
+<h3 data-md-type="header" data-md-header-level="3">경험의 질</h3>
+<p data-md-type="paragraph">1초는 사용자가 작업에 대한 집중을 잃기 시작하기까지 대기하는 시간이라고 언급되는 경우가 많습니다. 관련 연구를 자세히 살펴보면 1초가 대략 수백 밀리초에서 몇 초에 이르는 값 범위를 설명하는 근사치라는 것을 알 수 있습니다.</p>
+<p data-md-type="paragraph">일반적으로 1초라는 값의 인용 출처는 <a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">Card et al</a>과 <a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">Miller</a>입니다. Card는 Newell의 <a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">Unified Theories of Gocnition(통합 인지 이론)</a>을 인용하며 "즉각적 응답"의 임계값을 1초로 정의합니다. Newell은 즉각적인 반응을 "어떤 자극에 대해 <em data-md-type="emphasis">약 1초</em>(즉, 대략 ~0.3초에서 ~3초) 이내에 이루어져야 하는 반응"이라고 설명합니다. 이것은 "인지에 대한 실시간 제약"에 대한 Newell의 논의를 따릅니다. 여기에서는 "인지 고려 사항을 불러일으키는 환경과의 상호 작용은 대략 0.5초에서 2-3초 사이에 발생"한다고 이야기합니다. 1초라는 임계값에 대해 일반적으로 인용되는 또 다른 출처인 Miller는 "인간이 기계 통신으로 수행할 수 있고 수행할 작업은 응답 지연이 2초 이상일 경우 그 성격이 크게 바뀌며, 1초 정도 더 확대될 수 있다"고 말합니다.</p>
+<p data-md-type="paragraph">Miller와 Card의 연구에서는 사용자가 집중을 잃기 전에 대기하는 시간을 대략 0.3초에서 3초 범위로 설명하며, 이는 LCP에 대한 "양호" 임계값이 이 범위에 있어야 함을 시사합니다. 또한 기존의 최초 콘텐츠풀 페인트에 대한 "양호" 임계값이 1초이며, 최대 콘텐츠풀 페인트가 일반적으로 최초 콘텐츠풀 페인트 이후에 발생한다는 점을 감안하면 후보 LCP 임계값의 범위를 1초에서 3초로 추가로 제한할 수 있습니다. 이 범위에서 기준에 가장 잘 맞는 임계값을 선택하기 위해 우리는 아래와 같이 이러한 후보 임계값의 달성 가능성을 살펴보았습니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">달성 가능성</h3>
+<p data-md-type="paragraph">CrUX의 데이터를 사용하여 후보 LCP에 대한 "양호" 임계값을 충족하는 웹에서의 원본 백분율을 결정할 수 있습니다.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">"양호"로 분류된 CrUX 원본의 %(후보 LCP 임계값용)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1초</th>
+      <th>1.5초</th>
+      <th>2초</th>
+      <th>2.5초</th>
+      <th>3초</th>
+    </tr>
+    <tr>
+      <td><strong>휴대폰</strong></td>
+      <td>3.5%</td>
+      <td>13%</td>
+      <td>27%</td>
+      <td>42%</td>
+      <td>55%</td>
+    </tr>
+    <tr>
+      <td><strong>데스크톱</strong></td>
+      <td>6.9%</td>
+      <td>19%</td>
+      <td>36%</td>
+      <td>51%</td>
+      <td>64%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">10% 미만의 원본은 1초 임계값을 충족하는 반면, 1.5초에서 3초 사이의 다른 모든 임계값은 최소 10%의 원본이 "양호" 임계값을 충족해야 한다는 요건을 충족하므로 유효한 후보입니다.</p>
+<p data-md-type="paragraph">또한 최적화가 잘 이루어진 사이트에 대해 선택한 임계값을 일관되게 달성할 수 있도록 웹 전반에서 최고 성능 사이트에 대한 LCP 성능을 분석하여 이러한 사이트에 대해 일관되게 달성할 수 있는 임계값을 결정합니다. 특히, 최고 성능 사이트에 대해 75번째 백분위수에서 일관되게 달성할 수 있는 임계값을 식별하는 것을 목표로 합니다. 1.5초 및 2초 임계값은 일관되게 달성할 수 없는 반면 2.5초는 일관되게 달성할 수 있습니다.</p>
+<p data-md-type="paragraph">LCP에 대한 "불량" 임계값을 식별하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족되는 임계값을 식별합니다.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">"나쁨"으로 분류된 CrUX 원본의 %(후보 LCP 임계값용)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3초</th>
+      <th>3.5초</th>
+      <th>4초</th>
+      <th>4.5초</th>
+      <th>5 초</th>
+    </tr>
+    <tr>
+      <td><strong>휴대폰</strong></td>
+      <td>45%</td>
+      <td>35%</td>
+      <td>26%</td>
+      <td>20%</td>
+      <td>15%</td>
+    </tr>
+    <tr>
+      <td><strong>데스크톱</strong></td>
+      <td>36%</td>
+      <td>26%</td>
+      <td>19%</td>
+      <td>14%</td>
+      <td>10%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">4초 임계값의 경우 휴대폰 원본의 약 26%, 데스크톱 원본의 약 21%가 나쁨으로 분류됩니다. 이는 목표 범위인 10-30%에 속하므로 4초가 허용 가능한 "나쁨" 임계값이라는 결론을 내렸습니다.</p>
+<p data-md-type="paragraph">따라서 합리적인 "양호" 임계값은 2.5초이고 최대 콘텐츠풀 페인트에 대한 합리적인 "나쁨" 임계값은 4초라는 결론을 내릴 수 있습니다.</p>
+<h2 data-md-type="header" data-md-header-level="2">최초 입력 지연</h2>
+<h3 data-md-type="header" data-md-header-level="3">경험의 질</h3>
+<p data-md-type="paragraph">연구는 최대 약 100ms의 시각적 피드백 지연이 사용자 입력과 같은 관련 소스로 인해 발생하는 것으로 인식된다는 합리적이고 일관적인 결론으로 이어집니다. 이는 100ms라는 최초 입력 지연에 대한 "양호" 임계값이 최소 기준으로 적절할 수 있음을 시사합니다. 입력 처리 지연이 100ms를 초과하는 경우 다른 처리 및 렌더링 단계가 제시간에 완료될 수 없기 때문입니다.</p>
+<p data-md-type="paragraph">일반적으로 인용되는 Jakob Nielsen의 <a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">Response Times: The 3 Important Limits</a>에서는 사용자가 시스템이 즉각적으로 반응하고 있다고 느끼는 제한이 0.1초라고 정의합니다. Nielsen은 Michotte가 1962년에 발표한 <a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">The Perception of Causality</a>를 인용한 Miller와 Card를 언급합니다. Michotte의 연구에서는 실험 참가자에게 두 개의 물체가 표시되는 화면을 보여줍니다. 물체 A는 출발하여 물체 B를 향해 이동하다가 B와 접촉하는 순간 멈추고, 이후 B는 A에서 멀어지기 시작합니다. Michotte는 물체 A가 멈추고 물체 B가 움직이기 시작할 때 사이의 시간 간격을 변경하면서 참가자가 물체 A가 물체 B의 움직임을 유발한다는 인상을 받는 시간은 최대 100ms인 것을 발견했습니다. 100ms에서 200ms 사이일 경우 인과 관계의 인식이 혼합되며 200ms 이상일 경우 물체 B가 움직인 것이 물체 A로 인한 것이었다고 인지하지 않았습니다.</p>
+<p data-md-type="paragraph">이와 유사하게 Miller는 "제어 활성화에 대한 응답"에 대한 응답 임계값을 "키, 스위치, 기타 컨트롤의 움직임 등 일반적으로 물리적 활성화가 있음을 알리는 신호"라고 정의합니다. 또한 이 응답은 작업자가 유발한 기계적 활동의 일부로 인지되어야 하며 시간 지연은 0.1초보다 커서는 안 된다고 말합니다. 이후에는 키 누름과 시각적 피드백의 간격은 0.1~0.2초를 초과해서는 안 된다고 이야기하기도 합니다.</p>
+<p data-md-type="paragraph">보다 최근에 Kaaresoja et al은 <a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">Towards Temporally Perfect Virtual Button</a>에서 다양한 지연에 대해 터치스크린에서 가상 버튼을 터치하는 것과 버튼이 터치되었음을 나타내는 후속 시각적 피드백 사이의 동시성에 대한 인식을 조사했습니다. 버튼 누름과 시각적 피드백 사이의 지연이 85ms 이하인 경우 75%의 참가자는 버튼을 누르는 것과 동시에 시각적 피드백이 나타났다고 보고했습니다. 또한, 지연 시간이 100ms 이하인 경우 실험 참가자는 일관적으로 버튼 누름의 반응 품질이 높다고 인지했으며, 100ms~150ms인 경우에는 품질이 떨어진다는 것을 인지하고, 300ms의 지연에 대해 매우 좋지 않은 반응을 보였습니다.</p>
+<p data-md-type="paragraph">위의 내용을 감안하여 Web Vitals에 대한 적절한 최초 입력 지연 임계값은 약 100ms의 값 범위라는 결론을 내릴 수 있었습니다. 또한 사용자가 300ms 이상의 지연에 대해 낮은 품질 수준을 보고했으므로 합리적인 "나쁨" 임계값은 300ms로 정했습니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">달성 가능성</h3>
+<p data-md-type="paragraph">CrUX의 데이터를 사용하여 웹의 다양한 출처가 75번째 백분위수에서 100ms라는 FID의 "양호" 임계값을 충족하는지 확인합니다.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">FID 100ms 임계값에 대해 "양호"로 분류된 CrUX 출처의 %</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100ms</th>
+    </tr>
+    <tr>
+      <td><strong>휴대폰</strong></td>
+      <td>78%</td>
+    </tr>
+    <tr>
+      <td><strong>데스크톱</strong></td>
+      <td>&gt;99%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">또한 웹 전체에서 상위 사이트가 75번째 백분위수에서 이 임계값을 일관되게 충족할 수 있음을 관찰했습니다(종종 95번째 백분위수에서 충족되는 경우도 있음).</p>
+<p data-md-type="paragraph">위의 내용을 감안할 때 100ms가 FID에 대한 합리적인 "양호" 임계값이라는 결론을 내릴 수 있습니다.</p>
+<h2 data-md-type="header" data-md-header-level="2">누적 레이아웃 이동</h2>
+<h3 data-md-type="header" data-md-header-level="3">경험의 질</h3>
+<p data-md-type="paragraph">누적 레이아웃 이동(CLS)은 페이지의 시각적 콘텐츠가 이동하는 정도를 측정하는 새로운 메트릭입니다. CLS는 새로운 메트릭이므로 이에 대한 메트릭을 직접적으로 알려주는 연구는 없습니다. 따라서 사용자 기대에 부합하는 임계값을 식별할 수 있도록 우리는 페이지 콘텐츠를 소비할 때 심각한 중단을 유발하기 전 허용 가능한 정도로 인지되는 이동의 최대 수를 확인하고자 레이아웃 이동 수를 달리한 실시간 페이지를 평가했습니다. 내부 테스트 결과 0.15 이상의 이동 수준은 지속적으로 방해가 되는 것으로 인지되는 반면 0.1 이하의 이동은 눈에 띄지만 과도하게 방해가 되지는 않다고 인지하는 것으로 나타났습니다. 따라서 이상적인 상황은 레이아웃 이동이 없는 것이지만, "양호"로 볼 수 있는 후보 CLS 임계값은 최대 0.1이라는 결론을 내렸습니다.</p>
+<h3 data-md-type="header" data-md-header-level="3">달성 가능성</h3>
+<p data-md-type="paragraph">CrUX 데이터를 기반으로 하면 거의 50%에 달하는 출처의 CLS가 0.05 이하임을 알 수 있습니다.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">"양호"로 분류된 CrUX 출처의 %(후보 CLS 임계값용)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.05</th>
+      <th>0.1</th>
+      <th>0.15</th>
+    </tr>
+    <tr>
+      <td><strong>휴대폰</strong></td>
+      <td>49%</td>
+      <td>60%</td>
+      <td>69%</td>
+    </tr>
+    <tr>
+      <td><strong>데스크톱</strong></td>
+      <td>42%</td>
+      <td>59%</td>
+      <td>69%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">CrUX 데이터는 0.05가 합리적인 CLS "양호" 임계값일 수 있음을 시사하지만 우리는 현재 방해가 되는 레이아웃 이동을 피하기 어려운 사용 사례가 있다는 것도 알고 있습니다. 예를 들어 소셜 미디어 임베드와 같은 타사 임베딩 콘텐츠의 경우 임베드된 콘텐츠의 높이는 로드가 완료될 때까지 알 수 없으며, 이로 인해 0.05보다 큰 레이아웃 이동이 발생할 수 있습니다. 따라서 우리는 대부분 출처가 0.05 임계값을 충족하지만 0.1이라는 보다 완화된 CLS 임계값이 경험의 품질과 달성 가능성 사이에서 더 나은 균형을 유지한다고 결론지었습니다. 앞으로 웹 생태계에서 타사 임베드로 인한 레이아웃 이동에 대한 해결책을 찾아 향후 Core Web Vitals 반복에서 0.05 또는 0이라는 엄격한 CLS "양호" 임계값을 사용할 수 있기를 바랍니다.</p>
+<p data-md-type="paragraph">또한 CLS에 대한 "나쁨" 임계값을 결정하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족되는 임계값을 식별했습니다.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">"나쁨"으로 분류된 CrUX 출처의 %(후보 CLS 임계값용)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.15</th>
+      <th>0.2</th>
+      <th>0.25</th>
+      <th>0.3</th>
+    </tr>
+    <tr>
+      <td><strong>휴대폰</strong></td>
+      <td>31%</td>
+      <td>25%</td>
+      <td>20%</td>
+      <td>18%</td>
+    </tr>
+    <tr>
+      <td><strong>데스크톱</strong></td>
+      <td>31%</td>
+      <td>23%</td>
+      <td>18%</td>
+      <td>16%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">임계값이 0.25인 경우 휴대폰 출처의 약 20%, 데스크톱 출처의 약 18%가 "나쁨"으로 분류됩니다. 이는 목표 범위인 10-30%에 속하므로 0.25가 허용 가능한 "나쁨" 임계값이라는 결론을 내내렸습니다.</p>
diff --git a/src/site/content/ko/blog/drag-and-drop/index.md b/src/site/content/ko/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..8476675be13
--- /dev/null
+++ b/src/site/content/ko/blog/drag-and-drop/index.md
@@ -0,0 +1,259 @@
+---
+title: HTML5 드래그 앤 드롭 API 사용
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: |-
+  HTML5 DnD(드래그 앤 드롭) API는
+  페이지의 거의 모든 요소를 드래그할 수 있음을 의미합니다. 이 게시물에서는 드래그 앤 드롭의 기본 사항에 대해 설명합니다.
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+HTML5 DnD(드래그 앤 드롭) API는<br>페이지의 거의 모든 요소를 드래그할 수 있음을 의미합니다. 이 게시물에서는 드래그 앤 드롭의 기본 사항에 대해 설명합니다.
+
+## 드래그 가능한 콘텐츠 만들기
+
+대부분의 브라우저에서 텍스트 선택, 이미지 및 링크는 기본적으로 드래그할 수 있습니다. 예를 들어 [Google Search](https://google.com)에서 Google 로고를 드래그하면 고스트 이미지가 표시됩니다. 그다음 이미지가 주소 표시줄, `<input type="file" />` 요소 또는 바탕 화면에 놓일 수 있습니다. 다른 유형의 콘텐츠를 드래그 가능하게 만들려면 HTML5 DnD API를 사용해야 합니다.
+
+개체를 드래그 가능하게 만들려면 해당 요소에서 `draggable=true`를 설정하십시오. 페이지의 이미지, 파일, 링크, 파일 또는 마크업 등 거의 모든 것을 드래그할 수 있습니다.
+
+이 예에서는 CSS 그리드로 배치된 일부 열을 재정렬하는 인터페이스를 만들고 있습니다. 내 열의 기본 마크업은 다음과 같습니다. 각 열에는 `true`로 설정된 `draggable` 속성이 있습니다.
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+내 컨테이너 및 상자 요소에 대한 CSS는 다음과 같습니다. DnD 기능과 관련된 유일한 CSS는 [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor) 속성입니다. 나머지 코드는 컨테이너 및 상자 요소의 레이아웃과 스타일을 제어합니다.
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+이 시점에서 항목을 드래그할 수 있지만 다른 일은 일어나지 않습니다. DnD 기능을 추가하려면 JavaScript API를 사용해야 합니다.
+
+## 드래그 이벤트 수신 대기
+
+전체 드래그 앤 드롭 프로세스를 모니터링하기 위해 연결할 수 있는 다양한 이벤트가 있습니다.
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+DnD 흐름을 처리하려면 일종의 소스 요소(드래그가 시작되는 위치), 데이터 페이로드(드롭하려는 대상) 및 대상(드롭 캐치 영역)이 필요합니다. 소스 요소는 이미지, 목록, 링크, 파일 개체, HTML 블록 등이 될 수 있습니다. 대상은 사용자가 드롭하려는 데이터를 허용하는 드롭 영역(또는 드롭 영역 집합)입니다. 모든 요소가 대상이 될 수 있는 것은 아닙니다. 예를 들어 이미지는 대상이 될 수 없습니다.
+
+## 드래그 앤 드롭 시퀀스 시작 및 종료
+
+콘텐츠에서 `draggable="true"` 속성을 정의하면 `dragstart` 이벤트 핸들러를 연결하여 각 열에 대한 DnD 시퀀스를 시작합니다.
+
+이 코드는 사용자가 드래그를 시작할 때 열의 불투명도를 40%로 설정하고 드래그 이벤트가 끝나면 100%로 되돌립니다.
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+결과는 아래 Glitch 데모에서 볼 수 있습니다. 항목을 드래그하면 불투명해집니다. `dragstart` 이벤트의 대상이 소스 요소이므로 `this.style.opacity`를 40%로 설정하면 사용자에게 요소가 이동 중인 현재 선택 항목이라는 시각적 피드백을 제공합니다. 항목을 놓으면 드롭 기능이 제자리에 있지 않아도 소스 요소가 100% 불투명 상태로 되돌아갑니다.
+
+% Glitch { id: 'simple-drag-and-drop-1', path: 'style.css' } %}
+
+## `dragenter`, `dragover` 및 `dragleave`로 시각적 신호 추가
+
+사용자가 인터페이스와 상호 작용하는 방법을 이해하는 데 도움이 되도록 `dragenter`, `dragover` 및 `dragleave` 이벤트 핸들러를 사용하십시오. 이 예에서 열은 드래그 가능할 뿐만 아니라 드롭 대상이기도 합니다. 드래그한 항목을 열 위에 고정할 때 테두리를 파선으로 만들어 사용자가 이해할 수 있도록 지원합니다. 예를 들어 CSS에서 드롭 대상인 요소를 나타내는 `over` 클래스를 만들 수 있습니다.
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+그다음, JavaScript에서 이벤트 핸들러를 설정하고 열을 드래그할 때 `over` 클래스를 추가하고 떠날 때 이를 삭제합니다. `dragend` 핸들러에서 드래그가 끝날 때 클래스를 제거해야 합니다.
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch { id: 'simple-drag-drop2', path: 'dnd.js' } %}
+
+이 코드에서 다룰 가치가 있는 몇 가지 사항이 있습니다.
+
+- 링크와 같은 것을 드래그할 경우 해당 링크로 이동하는 브라우저의 기본 동작을 방지해야 합니다. 이렇게 하려면 `dragover` 이벤트에서 `e.preventDefault()`를 호출합니다. 또 다른 좋은 방법은 동일한 핸들러에서 `false`를 반환하는 것입니다.
+- `dragenter` 이벤트는 `dragover` 대신 `over` 클래스를 토글하는 데 사용됩니다. `dragover`를 사용하는 경우, `dragover` 이벤트가 열 호버링에서 계속 실행됨에 따라 CSS 클래스가 여러 번 토글됩니다. 궁극적으로 이는 바탕 화면의 렌더러가 많은 양의 불필요한 작업을 수행하도록 합니다. 다시 그리기를 최소화하는 것은 항상 좋은 생각입니다. 무언가에 대해 `dragover` 이벤트를 사용해야 하는 경우, [이벤트 리스너를 조절하거나 디바운싱는 것](https://css-tricks.com/debouncing-throttling-explained-examples/)을 고려하십시오.
+
+## 드롭 완료
+
+실제 드롭 작업을 진행하려면 `drop` 이벤트에 대한 이벤트 리스너를 추가하십시오. `drop` 핸들러에서는 일반적으로 일종의 성가신 리디렉션인 드롭에 대한 브라우저의 기본 동작을 방지해야 합니다. `e.stopPropagation()`을 호출하여 이벤트가 DOM을 버블링하는 것을 방지할 수 있습니다.
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // stops the browser from redirecting.
+  return false;
+}
+```
+
+다른 핸들러 사이에 새 핸들러를 등록해야 합니다.
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+이 시점에서 코드를 실행하면 항목이 새 위치로 드롭되지 않습니다. 이를 위해서는 [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer) 개체를 사용해야 합니다.
+
+`dataTransfer` 속성은 모든 DnD 마술이 일어나는 곳입니다. 드래그 동작으로 전송된 데이터 조각을 보유합니다. `dataTransfer`는 `dragstart` 이벤트에서 설정되고 드롭 이벤트에서 판독/처리됩니다. `e.dataTransfer.setData(mimeType, dataPayload)`를 호출하면 개체의 MIME 유형과 데이터 페이로드를 설정할 수 있습니다.
+
+이 예에서는 사용자가 열의 순서를 다시 정렬할 수 있도록 합니다. 이를 위해 먼저 드래그가 시작될 때 소스 요소의 HTML을 저장해야 합니다.
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+`drop` 이벤트에서 열 드롭을 처리하고 원본 열의 HTML을 사용자가 드롭한 대상 열의 HTML로 설정한 후 먼저 사용자가 드래그한 열과 동일한 열로 드롭하지 않는지 확인합니다.
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+다음 데모에서 결과를 볼 수 있습니다. B 열 위에 A 열을 끌어다 놓으면 위치가 어떻게 변경되는지 확인할 수 있습니다.
+
+{% Glitch { id: 'simple-drag-drop', path: 'dnd.js' } %}
+
+## 더 많은 드래그 속성
+
+`dataTransfer` 개체는 속성을 노출하여 드래그 프로세스 동안 사용자에게 시각적 피드백을 제공합니다. 이러한 속성을 사용하여 각 드롭 대상이 특정 데이터 유형에 반응하는 방식을 제어할 수 있습니다.
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed)는 사용자가 요소에서 수행할 수 있는 '드래그 유형'을 제한합니다. 드래그 앤 드롭 처리 모델에서 `dragenter` 및 `dragover` 이벤트 동안 `dropEffect`를 초기화하는 데 사용됩니다. 속성은 `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` 및 `uninitialized` 값으로 설정할 수 있습니다.
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect)는 `dragenter` 및 `dragover` 이벤트 동안 사용자에게 제공되는 피드백을 제어합니다. 사용자가 대상 요소 위로 마우스를 가져가면 브라우저의 커서가 어떤 유형의 작업(예: 복사, 이동 등)을 수행할 것인지 나타냅니다. `none`, `copy`, `link`, `move` 값 중 하나에 효과가 나타날 수 있습니다.
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage)는 브라우저의 기본 '고스트 이미지' 피드백을 사용하는 대신 선택적으로 드래그 아이콘을 설정할 수 있음을 의미합니다.
+
+## 드래그 앤 드롭으로 파일 업로드
+
+이 간단한 예에서는 열을 드래그 소스와 드래그 대상으로 사용합니다. 이는 사용자에게 항목을 다시 정렬하라고 요청하는 UI에 표시될 수 있습니다. 이러한 상황에서, 사용자가 선택한 이미지를 대상으로 드래그하여 제품에 대한 메인 이미지가 되도록 하나의 이미지를 선택해야 하는 인터페이스 같이 드래그 대상과 소스가 다를 수 있습니다.
+
+드래그 앤 드롭은 사용자가 데스크탑에서 응용 프로그램으로 항목을 드래그하는 데 자주 사용됩니다. 주요 차이점은 `drop` 핸들러에 있습니다. `dataTransfer.getData()`를 사용하여 파일에 액세스하는 대신 데이터가 `dataTransfer.files` 속성에 포함됩니다.
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Stops some browsers from redirecting.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Read the File objects in this FileList.
+  }
+}
+```
+
+[드래그 앤 드롭 사용자 정의](/read-files/#select-dnd)에서 이에 대한 자세한 정보를 확인할 수 있습니다.
+
+## 추가 리소스
+
+- [드래그 앤 드롭 사양](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [MDN HTML 드래그 앤 드롭 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Vanilla JavaScript로 드래그 앤 드롭 파일 업로더를 만드는 방법](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [HTML 드래그 앤 드롭 API로 주차 게임 만들기](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [React에서 HTML 드래그 앤 드롭 API를 사용하는 방법](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/ko/blog/evolving-cls/index.md b/src/site/content/ko/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..9c001bb6fdc
--- /dev/null
+++ b/src/site/content/ko/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: CLS 메트릭의 진화
+subhead: 수명이 긴 페이지에 더 공정하도록 CLS 메트릭을 개선하기 위한 계획.
+description: 수명이 긴 페이지에 더 공정하도록 CLS 메트릭을 개선하기 위한 계획.
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: 레이아웃 이동을 측정하기 위한 예제 윈도잉 접근 방식.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2021년 6월 2일:** 이 게시물에 설명된 CLS 업데이트는 현재 Chrome의 웹 도구 영역 전체에서 사용할 수 있습니다. 자세한 내용은 [웹 도구에서 진화하는 누적 레이아웃 이동](/cls-web-tooling/)을 참조하세요. {% endAside %}
+
+우리(Chrome Speed Metrics Team)는 최근 [오랫동안 열려 있는 페이지에 대해 CLS 메트릭을 보다 공정하게 만들기 위한 옵션](/better-layout-shift-metric/)의 초기 연구를 개괄적으로 설명했습니다. 매우 유익한 피드백을 많이 받았고 대규모 분석을 완료한 후 메트릭에 적용할 계획인 다음의 변경 사항을 확정했습니다: **1초 간격이고 최대 5초로 제한된 최대 세션 윈도우**.
+
+계속해서 자세한 내용을 읽어보세요!
+
+## 옵션을 어떻게 평가했을까요?
+
+개발자 커뮤니티로부터 받은 모든 피드백을 검토하고 고려했습니다.
+
+또한 Chrome에서 [상위 옵션](/better-layout-shift-metric/#best-strategies)을 구현하고 수백만 개의 웹페이지에 대해 대규모 메트릭 분석을 수행했습니다. 각 옵션이 개선시킨 사이트 유형과 옵션을 비교한 방식을 점검했으며 특히 옵션에 따라 다른 점수가 매겨진 사이트를 면밀히 조사했습니다. 전반적으로 다음과 같은 점을 발견했습니다.
+
+- **모든** 옵션은 페이지에서 보낸 시간과 레이아웃 이동 점수 간의 상관 관계를 줄였습니다.
+- **어떤** 옵션도 페이지에 대해 더 낮은 점수로 이어지지 않았습니다. 따라서 이 변경으로 인해 사이트의 점수가 악화될 것이라는 걱정은 할 필요가 없습니다.
+
+## 결정 포인트
+
+### 왜 세션 창인가?
+
+[이전 게시물](/better-layout-shift-metric/)에서 점수가 무한대로 증가하지 않도록 하는 동시에 레이아웃 이동을 그룹화하기 위한[몇 가지 다른 윈도잉 전략](/better-layout-shift-metric/#windowing-strategies)을 다루었습니다. 개발자들로부터 받은 피드백은 레이아웃 이동을 가장 직관적으로 그룹화한다는 점에서 세션 창 전략에 압도적으로 많은 손을 들어주었습니다.
+
+세션 창을 검토하기 위한 예는 다음과 같습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>세션 창의 예.</figcaption></figure>
+
+위의 예에서 사용자가 페이지를 볼 때 시간이 지남에 따라 많은 레이아웃 이동이 발생합니다. 각각은 파란색 막대로 표시됩니다. 위에서 파란색 막대의 높이가 다른 것을 알 수 있습니다. 이것들은 각 개별 레이아웃 이동의 [점수](/cls/#layout-shift-score)를 나타냅니다. 세션 창은 첫 번째 레이아웃 이동으로 시작하여 레이아웃 이동이 없는 간격이 있을 때까지 계속 확장됩니다. 다음 레이아웃 이동이 발생하면 새 세션 창이 시작됩니다. 레이아웃 이동이 없는 세 개의 간격이 있으므로 이 예제에는 세 개의 세션 창이 있습니다. CLS의 현재 정의와 유사하게 각 이동의 점수가 합산되어 각 창의 점수는 개별 레이아웃 이동의 합계가 됩니다.
+
+[초기 연구](/better-layout-shift-metric/#best-strategies)를 기반으로, 세션 창 사이에 1초 간격을 선택했으며 이 간격은 대규모 분석에서 잘 작동했습니다. 따라서 위의 예에 표시된 "세션 간격"은 1초입니다.
+
+### 최대 세션 창이 필요한 이유는 무엇인가요?
+
+초기 연구에서 [요약 전략](/better-layout-shift-metric/#summarization)을 두 가지 옵션으로 좁혔습니다.
+
+- 매우 큰 세션 창에 대해 모든 세션 창의 **평균** 점수(5초 간격의 제한이 없는 창).
+- 더 작은 세션 창에 대해 모든 세션 창의 **최대** 점수(최대 5초, 그 사이에 1초 간격).
+
+초기 조사 후 수백만 개의 URL에 대한 대규모 분석을 수행할 수 있도록 각 메트릭을 Chrome에 추가했습니다. 대규모 분석에서 우리는 다음과 같은 레이아웃 이동 패턴을 가진 많은 URL을 발견했습니다.
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="평균을 낮추는 작은 레이아웃 이동의 예", width="800", height="550" %}
+
+오른쪽 하단에서 세션 창 2에 아주 낮은 점수를 주는 단 하나의 작은 레이아웃 이동만 있음을 알 수 있습니다. 즉, 평균 점수가 매우 낮습니다. 그러나 개발자가 이 작은 레이아웃 이동을 수정한다면 어떨까요? 그러면 점수가 세션 창 1에서만 계산됩니다. 즉, 페이지 점수가 *거의 두 배*가 됩니다. 개발자가 레이아웃 이동을 개선했지만 점수가 오히려 더 나빠졌다는 사실을 알게 된다면 정말 혼란스럽고 낙담할 것입니다. 그리고 이 작은 레이아웃 이동을 제거하면 분명히 사용자 경험이 약간 더 개선되므로 점수를 악화시키지 않을 것입니다.
+
+평균과 관련된 이 문제 때문에 우리는 더 작고 제한이 있는 최대 창으로 진행하기로 결정했습니다. 따라서 위의 예에서 세션 창 2는 무시되고 세션 창 1의 레이아웃 이동 합계만 보고됩니다.
+
+### 왜 5초일까요?
+
+여러 창 크기를 평가하고 두 가지를 발견했습니다.
+
+- 짧은 창의 경우 느린 페이지 로드와 사용자 상호 작용에 대한 느린 응답으로 인해 레이아웃 이동이 여러 창으로 분할되고 점수가 향상될 수 있습니다. 속도 저하를 보상하지 않도록 창을 충분히 크게 유지하려고 했습니다!
+- 작은 레이아웃 이동이 계속되는 일부 페이지가 있습니다. 예를 들어, 각 점수 업데이트와 함께 약간씩 이동하는 스포츠 점수 페이지가 있습니다. 이러한 이동은 성가시지만 시간이 지남에 따라 더 성가시게 되지는 않습니다. 그래서 우리는 이러한 유형의 레이아웃 이동에 대해 창이 제한되도록 하고 싶었습니다.
+
+이 두 가지를 염두에 두고 많은 실제 웹 페이지에서 다양한 창 크기를 비교한 결과, 5초가 창 크기의 적절한 제한이라는 결론을 내렸습니다.
+
+## 이것이 내 페이지의 CLS 점수에 어떤 영향을 주나요?
+
+이 업데이트는 페이지의 CLS를 제한하므로 이 변경으로 인해 **어떤 페이지에서도 점수가 다 나빠지지 않습니다.**
+
+그리고 우리의 분석에 따르면 **원본의 55%는 75번째 백분위수에서 CLS의 변화를 전혀 보지 못할 것입니다**. 이는 해당 페이지에 현재 레이아웃 이동이 없거나 이동이 있더라도 이미 단일 세션 창으로 제한되어 있기 때문입니다.
+
+**원본의 나머지는 이 변경으로 75번째 백분위수에서 점수 향상을 보게 될 것입니다.** 대부분은 개선 수준이 미미하겠지만 약 3%는 점수가 "개선 필요" 또는 "나쁨" 등급에서 "좋음" 등급으로 향상되는 결과를 보게 될 것입니다. 이러한 페이지는 [이전 게시물](/better-layout-shift-metric/)에서 설명한 대로 무한 스크롤러를 사용하거나 UI 업데이트가 느린 경향이 있습니다.
+
+## 어떻게 시도해 볼 수 있나요?
+
+곧 새로운 메트릭 정의를 사용하도록 도구를 업데이트할 예정입니다! 그때까지는 [예제 JavaScript 구현](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) 또는 [Web Vitals 확장의 포크](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls)를 사용하여 모든 사이트에서 업데이트된 버전의 CLS를 사용해 볼 수 있습니다.
+
+시간을 내어 이전 게시물을 읽고 피드백을 주신 모든 분들께 감사드립니다!
diff --git a/src/site/content/ko/blog/fast-playback-with-preload/index.md b/src/site/content/ko/blog/fast-playback-with-preload/index.md
new file mode 100644
index 00000000000..5bca5fb2bc7
--- /dev/null
+++ b/src/site/content/ko/blog/fast-playback-with-preload/index.md
@@ -0,0 +1,436 @@
+---
+layout: post
+title: 오디오 및 비디오 사전 로드로 빠른 재생
+subhead: 리소스를 능동적으로 미리 로드하여 미디어 재생을 가속화하는 방법.
+authors:
+  - beaufortfrancois
+description: 더 빠른 재생 시작은 더 많은 사람들이 귀하의 비디오를 보거나 오디오를 듣고 있음을 의미합니다. 이것은 알려진 사실입니다. 이 기사에서는 사용 사례에 따라 리소스를 능동적으로 미리 로드하여 미디어 재생을 가속화하는 데 사용할 수 있는 기술을 살펴보겠습니다.
+date: 2017-08-17
+updated: 2020-11-16
+tags:
+  - media
+  - performance
+  - network
+---
+
+더 빠른 재생 시작은 더 많은 사람들이 귀하의 비디오를 보거나 오디오를 듣고 있음을 의미합니다. [이것은 알려진 사실](https://www.digitaltrends.com/web/buffer-rage/)입니다. 이 기사에서는 사용 사례에 따라 리소스를 능동적으로 미리 로드하여 오디오 및 비디오 재생을 가속화하는 데 사용할 수 있는 기술을 살펴보겠습니다.
+
+<figure>
+  <video controls muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.webm#t=1.1" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.mp4#t=1.1" type="video/mp4">
+  </source></source></video>
+  <figcaption>
+    <p>크레딧: copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org</a> .</p>
+  </figcaption></figure>
+
+미디어 파일을 미리 로드하는 세 가지 방법을 장단점부터 설명하겠습니다.
+
+<table>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>장점...</th>
+      <th>단점...</th>
+    </tr>
+    <tr>
+      <td rowspan="3" style="white-space: nowrap"><a href="#video_preload_attribute">동영상 미리 로드 속성</a></td>
+      <td rowspan="3">웹 서버에서 호스팅되는 고유한 파일에 사용하기 쉽습니다.</td>
+      <td>브라우저는 속성을 완전히 무시할 수 있습니다.</td>
+    </tr>
+<tr>
+      <td>HTML 문서가 완전히 로드되고 구문 분석되면 리소스 가져오기가 시작됩니다.</td>
+    </tr>
+    <tr>
+      <td>MSE(Media Source Extensions)는 앱이 MSE에 미디어를 제공해야 하기 때문에 미디어 요소에서 <code>preload</code> 특성을 무시합니다.</td>
+    </tr>
+    <tr>
+      <td rowspan="2" style="white-space: nowrap"><a href="#link_preload">링크 사전 로드</a></td>
+      <td>
+<code>onload</code> 이벤트를 차단하지 않고 브라우저가 비디오 리소스를 요청하도록 합니다.</td>
+      <td>HTTP 범위 요청은 호환되지 않습니다.</td>
+    </tr>
+<tr>
+      <td>MSE 및 파일 세그먼트와 호환됩니다.</td>
+      <td>전체 리소스를 가져올 때 작은 미디어 파일(&lt;5MB)에만 사용해야 합니다.</td>
+    </tr>
+    <tr>
+      <td><a href="#manual_buffering">수동 버퍼링</a></td>
+      <td>완전 통제</td>
+      <td>복잡한 오류 처리는 웹사이트의 책임입니다.</td>
+    </tr>
+  </tbody>
+</table>
+
+## 동영상 미리 로드 속성
+
+비디오 소스가 웹 서버에서 호스팅되는 고유한 파일인 경우 비디오 `preload` 속성을 사용하여 [사전 로드할 정보 또는 콘텐츠의 크기](/video-and-source-tags/#preload)에 대한 힌트를 브라우저에 제공할 수 있습니다. 이는 [MSE(Media Source Extensions)](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)가 `preload`와 호환되지 않음을 의미합니다.
+
+리소스 가져오기는 초기 HTML 문서가 완전히 로드되고 구문 분석된 경우에만 시작되는 반면(예: `DOMContentLoaded` 이벤트가 시작됨), 리소스를 실제로 불러올 때 아주 다른 `load` 이벤트가 시작합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/De8tMHJUn3XyzFfosVLb.svg", alt="", width="800", height="234" %}</figure>
+
+`preload` 속성을 `metadata`로 설정하면 사용자에게 비디오가 필요하지 않을 것으로 예상되지만 해당 메타데이터(크기, 트랙 목록, 지속 시간 등)를 가져오는 것이 바람직함을 나타냅니다. [Chrome 64](https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#media-preload-defaults-metadata)부터 `preload`의 기본값은 `metadata`입니다. (`auto`였음)
+
+```html
+<video id="video" preload="metadata" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+`preload` 속성을 `auto`로 설정하면 브라우저가 추가 버퍼링을 위해 중지할 필요 없이 완전한 재생이 가능한 충분한 데이터를 캐시할 수 있음을 나타냅니다.
+
+```html
+<video id="video" preload="auto" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+그러나 몇 가지 주의 사항이 있습니다. 이것은 힌트일 뿐이므로 브라우저는 `preload` 속성을 완전히 무시할 수 있습니다. 작성 당시 Chrome에 적용되는 몇 가지 규칙은 다음과 같습니다.
+
+- [데이터 세이버](https://support.google.com/chrome/answer/2392284)가 사용 설정되면 Chrome은 강제로 `preload` 값을 `none`으로 설정합니다.
+- Android 4.3에서 Chrome은 [Android 버그](https://bugs.chromium.org/p/chromium/issues/detail?id=612909)로 인해 `preload` 값을 `none`으로 설정합니다.
+- 셀룰러 연결(2G, 3G, 4G)에서 Chrome은 `preload` 값을 `metadata`로 강제 적용합니다.
+
+### 팁
+
+웹사이트에 동일한 도메인에 많은 비디오 리소스가 포함되어 있는 경우 `preload` 값을 `metadata`로 설정하거나 `poster` 속성을 정의하고 `preload`를 `none`으로 설정하는 것이 좋습니다. 그렇게 하면 리소스 로드를 중단할 수 있는 동일한 도메인에 대한 최대 HTTP 연결 수(HTTP 1.1 사양에 따라 6개)에 도달하는 것을 방지할 수 있습니다. 동영상이 핵심 사용자 경험의 일부가 아닌 경우 이렇게 하면 페이지 속도가 향상될 수도 있습니다.
+
+## 링크 프리로드
+
+다른 [기사](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)에서 [다루었듯이](https://developers.google.com/web/updates/2016/03/link-rel-preload) [링크 미리 로드](https://w3c.github.io/preload/)는 `load` 이벤트를 차단하지 않고 페이지가 다운로드되는 동안 브라우저가 리소스를 요청하도록 하는 선언적 가져오기입니다. `<link rel="preload">`를 통해 로드된 리소스는 브라우저에 로컬로 저장되며 DOM, JavaScript 또는 CSS에서 명시적으로 참조될 때까지 효과적으로 비활성화됩니다.
+
+미리 로드는 현재 탐색에 초점을 맞추고 유형(스크립트, 스타일, 글꼴, 비디오, 오디오 등)에 따라 우선적으로 리소스를 가져오는 점에서 프리페치와 다릅니다. 현재 세션에 대한 브라우저 캐시를 워밍업하는 데 사용해야 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/g5fQKJMivvcsHajmMmi2.svg", alt="", width="800", height="234" %}</figure>
+
+### 전체 비디오 미리 로드
+
+다음은 웹사이트에 전체 동영상을 미리 로드하여 자바스크립트가 동영상 콘텐츠를 가져오도록 요청할 때 브라우저에서 리소스를 이미 캐시했을 수 있으므로 캐시에서 읽도록 하는 방법입니다. 사전 로드 요청이 아직 완료되지 않은 경우 일반 네트워크 가져오기가 발생합니다.
+
+```js
+<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">
+
+<video id="video" controls></video>
+
+<script>
+  // Later on, after some condition has been met, set video source to the
+  // preloaded video URL.
+  video.src = 'https://cdn.com/small-file.mp4';
+  video.play().then(() => {
+    // If preloaded video URL was already cached, playback started immediately.
+  });
+</script>
+```
+
+{% Aside %} 작은 미디어 파일(5MB 미만)에만 사용하는 것이 좋습니다. {% endAside %}
+
+예에서 미리 로드된 리소스는 비디오 요소에서 소비될 것이기 때문에 `as` 미리 로드 링크 값은 `video`입니다. 오디오 요소인 경우 `as="audio"`가 됩니다.
+
+### 첫 번째 세그먼트 미리 로드
+
+`<link rel="preload">`를 사용하여 비디오의 첫 번째 세그먼트를 미리 로드하고 미디어 소스 확장과 함께 사용하는 방법을 보여줍니다. MSE JavaScript API에 익숙하지 않은 경우 [MSE 기본 사항](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)을 참조하십시오.
+
+`file_1.webm` , `file_2.webm` , `file_3.webm` 등과 같은 더 작은 파일로 분할되었다고 가정해 보겠습니다.
+
+```html
+<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">
+
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // If video is preloaded already, fetch will return immediately a response
+    // from the browser cache (memory cache). Otherwise, it will perform a
+    // regular network fetch.
+    fetch('https://cdn.com/file_1.webm')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      // Append the data into the new sourceBuffer.
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch file_2.webm when user starts playing video.
+    })
+    .catch(error => {
+      // TODO: Show "Video is not available" message to user.
+    });
+  }
+</script>
+```
+
+{% Aside 'warning' %} 교차 출처 리소스의 경우 CORS 헤더가 올바르게 설정되었는지 확인하십시오. `fetch(videoFileUrl, { mode: 'no-cors' })`로 검색된 불투명 응답에서 배열 버퍼를 만들 수 없으므로 비디오 또는 오디오 요소를 공급할 수 없습니다. {% endAside %}
+
+### 지원
+
+미리 로드를 지원하는 브라우저를 확인하려면 MDN의 [브라우저 호환성](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility) 표를 참조하십시오. 성능 측정 항목을 조정하기 위해 아래 스니펫으로 가용성을 감지할 수 있습니다.
+
+```js
+function preloadFullVideoSupported() {
+  const link = document.createElement('link');
+  link.as = 'video';
+  return (link.as === 'video');
+}
+
+function preloadFirstSegmentSupported() {
+  const link = document.createElement('link');
+  link.as = 'fetch';
+  return (link.as === 'fetch');
+}
+```
+
+## 수동 버퍼링
+
+[Cache API](https://developer.mozilla.org/docs/Web/API/Cache)와 서비스 워커에 대해 알아보기 전에 MSE로 비디오를 수동으로 버퍼링하는 방법을 살펴보겠습니다. 아래 예에서는 웹 서버가 HTTP [`Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range) 요청을 지원한다고 가정하지만 이는 파일 세그먼트와 매우 유사합니다. [Google의 Shaka Player](https://github.com/google/shaka-player) , [JW Player](https://developer.jwplayer.com/) 및 [Video.js](http://videojs.com/)와 같은 일부 미들웨어 라이브러리는 이를 처리하도록 빌드되었습니다.
+
+```html
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // Fetch beginning of the video by setting the Range HTTP request header.
+    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
+    });
+  }
+
+  function updateEnd() {
+    // Video is now ready to play!
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+
+    // Fetch the next segment of video when user starts playing the video.
+    video.addEventListener('playing', fetchNextSegment, { once: true });
+  }
+
+  function fetchNextSegment() {
+    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      const sourceBuffer = mediaSource.sourceBuffers[0];
+      sourceBuffer.appendBuffer(data);
+      // TODO: Fetch further segment and append it.
+    });
+  }
+</script>
+```
+
+### 고려 사항
+
+이제 전체 미디어 버퍼링 경험을 제어할 수 있으므로 사전 로드를 고려할 때 장치의 배터리 수준, "데이터 절약 모드" 사용자 기본 설정 및 네트워크 정보를 고려하는 것이 좋습니다.
+
+#### 배터리 인식
+
+동영상을 미리 로드하기 전에 사용자 기기의 배터리 잔량을 고려하세요. 이렇게 하면 전력 수준이 낮을 때 배터리 수명이 보존됩니다.
+
+기기의 배터리가 부족할 때 미리 로드를 비활성화하거나 최소한 저해상도 비디오를 미리 로드합니다.
+
+```js
+if ('getBattery' in navigator) {
+  navigator.getBattery()
+  .then(battery => {
+    // If battery is charging or battery level is high enough
+    if (battery.charging || battery.level > 0.15) {
+      // TODO: Preload the first segment of a video.
+    }
+  });
+}
+```
+
+#### "데이터 세이버" 감지
+
+`Save-Data` 클라이언트 힌트 요청 헤더를 사용하여 브라우저에서 "데이터 절약" 모드를 선택한 사용자에게 빠르고 가벼운 애플리케이션을 제공합니다. 이 요청 헤더를 식별함으로써 애플리케이션은 비용 및 성능 제약이 있는 사용자에게 최적화된 사용자 경험을 사용자 지정하고 제공할 수 있습니다.
+
+자세한 내용은 [Save-Data로 빠르고 가벼운 애플리케이션 제공](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data)을 참조하십시오.
+
+#### 네트워크 정보 기반 스마트 로드
+
+미리 로드하기 전에 `navigator.connection.type`을 확인하고 싶을 수 있습니다. `cellular`로 설정하면 사전 로드를 방지하고 모바일 네트워크 운영자가 대역폭에 대해 요금을 부과할 수 있음을 사용자에게 알리고 이전에 캐시된 콘텐츠의 자동 재생만 시작할 수 있습니다.
+
+```js
+if ('connection' in navigator) {
+  if (navigator.connection.type == 'cellular') {
+    // TODO: Prompt user before preloading video
+  } else {
+    // TODO: Preload the first segment of a video.
+  }
+}
+```
+
+[네트워크 정보 샘플](https://googlechrome.github.io/samples/network-information/)을 확인하여 네트워크 변경 사항에 대응하는 방법도 알아보십시오.
+
+### 여러 개의 첫 번째 세그먼트를 사전 캐시
+
+이제 사용자가 결국 선택할 미디어를 모른 채 일부 미디어 콘텐츠를 추측에 따라 미리 로드하려면 어떻게 해야 합니까? 사용자가 10개의 비디오가 포함된 웹 페이지에 있는 경우 각각에서 하나의 세그먼트 파일을 가져오기에 충분한 메모리가 있지만 10개의 숨겨진 `<video>` 요소와 10개의 `MediaSource` 객체를 만들고 해당 데이터를 공급하기 시작해서는 안 됩니다.
+
+아래의 두 부분으로 구성된 예제는 강력하고 사용하기 쉬운 [Cache API](/cache-api-quick-guide/) 를 사용하여 비디오의 여러 첫 번째 세그먼트를 미리 캐싱하는 방법을 보여줍니다. IndexedDB에서도 비슷한 것을 얻을 수 있습니다. `window` 개체에서도 액세스할 수 있으므로 아직 서비스 워커를 사용하지 않습니다.
+
+#### 불러오기 및 캐시
+
+```js
+const videoFileUrls = [
+  'bat_video_file_1.webm',
+  'cow_video_file_1.webm',
+  'dog_video_file_1.webm',
+  'fox_video_file_1.webm',
+];
+
+// Let's create a video pre-cache and store all first segments of videos inside.
+window.caches.open('video-pre-cache')
+.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));
+
+function fetchAndCache(videoFileUrl, cache) {
+  // Check first if video is in the cache.
+  return cache.match(videoFileUrl)
+  .then(cacheResponse => {
+    // Let's return cached response if video is already in the cache.
+    if (cacheResponse) {
+      return cacheResponse;
+    }
+    // Otherwise, fetch the video from the network.
+    return fetch(videoFileUrl)
+    .then(networkResponse => {
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, networkResponse.clone());
+      return networkResponse;
+    });
+  });
+}
+```
+
+HTTP `Range` 요청을 사용하려면 Cache API가 [아직](https://github.com/whatwg/fetch/issues/144) `Range` 응답을 지원하지 않기 때문에 `Response` 객체를 수동으로 다시 생성해야 합니다. `networkResponse.arrayBuffer()`를 호출하면 응답의 전체 내용을 한 번에 렌더러 메모리로 가져오므로 작은 범위를 사용하는 것이 좋습니다.
+
+참고로, HTTP 범위 요청을 비디오 프리캐시에 저장하기 위해 위의 예시의 일부를 수정했습니다.
+
+```js
+    ...
+    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
+    .then(networkResponse => networkResponse.arrayBuffer())
+    .then(data => {
+      const response = new Response(data);
+      // Add the response to the cache and return network response in parallel.
+      cache.put(videoFileUrl, response.clone());
+      return response;
+    });
+```
+
+#### 동영상 재생
+
+사용자가 재생 버튼을 클릭하면 Cache API에서 사용 가능한 비디오의 첫 번째 세그먼트를 가져와 사용 가능한 경우 즉시 재생이 시작되도록 합니다. 그렇지 않으면 단순히 네트워크에서 가져옵니다. 브라우저와 사용자는 [캐시](/storage-for-the-web/#eviction)를 지우기로 결정할 수 있습니다.
+
+앞에서 본 것처럼 MSE를 사용하여 비디오의 첫 번째 세그먼트를 비디오 요소에 공급합니다.
+
+```js
+function onPlayButtonClick(videoFileUrl) {
+  video.load(); // Used to be able to play video later.
+
+  window.caches.open('video-pre-cache')
+  .then(cache => fetchAndCache(videoFileUrl, cache)) // Defined above.
+  .then(response => response.arrayBuffer())
+  .then(data => {
+    const mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+    function sourceOpen() {
+      URL.revokeObjectURL(video.src);
+
+      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+      sourceBuffer.appendBuffer(data);
+
+      video.play().then(() => {
+        // TODO: Fetch the rest of the video when user starts playing video.
+      });
+    }
+  });
+}
+```
+
+{% Aside 'warning' %} 교차 출처 리소스의 경우 CORS 헤더가 올바르게 설정되었는지 확인하십시오. `fetch(videoFileUrl, { mode: 'no-cors' })`로 검색된 불투명 응답에서 배열 버퍼를 만들 수 없으므로 비디오 또는 오디오 요소를 공급할 수 없습니다. {% endAside %}
+
+### 서비스 워커로 범위 응답 생성
+
+이제 전체 비디오 파일을 가져와서 Cache API에 저장했다면 어떻게 될까요? 브라우저가 HTTP `Range` 요청을 보낼 때 캐시 API가 [아직](https://github.com/whatwg/fetch/issues/144) `Range` 응답을 지원하지 않기 때문에 전체 비디오를 렌더러 메모리로 가져오고 싶지 않을 것입니다.
+
+따라서 이러한 요청을 가로채서 서비스 작업자로부터 사용자 지정된 `Range` 응답을 반환하는 방법을 보여드리겠습니다.
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(loadFromCacheOrFetch(event.request));
+});
+
+function loadFromCacheOrFetch(request) {
+  // Search through all available caches for this request.
+  return caches.match(request)
+  .then(response => {
+
+    // Fetch from network if it's not already in the cache.
+    if (!response) {
+      return fetch(request);
+      // Note that we may want to add the response to the cache and return
+      // network response in parallel as well.
+    }
+
+    // Browser sends a HTTP Range request. Let's provide one reconstructed
+    // manually from the cache.
+    if (request.headers.has('range')) {
+      return response.blob()
+      .then(data => {
+
+        // Get start position from Range request header.
+        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
+        const options = {
+          status: 206,
+          statusText: 'Partial Content',
+          headers: response.headers
+        }
+        const slicedResponse = new Response(data.slice(pos), options);
+        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
+            (data.size - 1) + '/' + data.size);
+        slicedResponse.setHeaders('X-From-Cache': 'true');
+
+        return slicedResponse;
+      });
+    }
+
+    return response;
+  }
+}
+```
+
+`response.arrayBuffer()`가 전체 파일을 렌더러 메모리로 가져오는 동안 단순히 파일에 대한 핸들을 제공하기 때문에 이 슬라이스 응답을 재생성하기 위해 `response.blob()`을 사용했다는 점에 유의하는 것이 중요합니다.
+
+내 사용자 지정 `X-From-Cache` HTTP 헤더를 사용하여 이 요청이 캐시에서 왔는지 네트워크에서 왔는지 알 수 있습니다. [ShakaPlayer](https://github.com/google/shaka-player/blob/master/docs/tutorials/service-worker.md)와 같은 플레이어는 응답 시간을 네트워크 속도의 지표로 무시하는 데 사용할 수 있습니다.
+
+{% YouTube 'f8EGZa32Mts' %}
+
+`Range` 요청을 처리하는 방법에 대한 완전한 솔루션은 공식 [샘플 미디어 앱](https://github.com/GoogleChrome/sample-media-pwa) 과 특히 [ranged-response.js](https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/scripts/ranged-response.js) 파일을 살펴보십시오.
diff --git a/src/site/content/ko/blog/fetch-metadata/index.md b/src/site/content/ko/blog/fetch-metadata/index.md
new file mode 100644
index 00000000000..365c48c35c0
--- /dev/null
+++ b/src/site/content/ko/blog/fetch-metadata/index.md
@@ -0,0 +1,201 @@
+---
+title: Fetch Metadata로 웹 공격으로부터 리소스 보호
+subhead: CSRF, XSSI 및 교차 출처 정보 누출을 방지합니다.
+authors:
+  - lwe
+date: 2020-06-04
+updated: 2020-06-10
+hero: image/admin/El8ytnIgMDWVzdsglcfv.jpg
+alt: 리소스 격리 정책과 관련된 Python 코드의 스크린샷.
+description: Fetch Metadata는 서버가 교차 출처 공격으로부터 자신을 보호할 수 있도록 설계된 새로운 웹 플랫폼 기능입니다.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 웹 리소스를 격리해야 하는 이유는 무엇인가요?
+
+여러 웹 애플리케이션은 [사이트 간 요청 위조](https://portswigger.net/web-security/csrf) (CSRF), [사이트 간 스크립트 포함](https://portswigger.net/research/json-hijacking-for-the-modern-web) (XSSI), 타이밍 공격, [교차 출처 정보 누출](https://arxiv.org/pdf/1908.02204.pdf) 또는 추측성 실행 사이드 채널 ([Spectre](https://developer.chrome.com/blog/meltdown-spectre/)) 공격과 같은 [교차 출처](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22) 공격에 취약합니다.
+
+[Fetch Metadata](https://www.w3.org/TR/fetch-metadata/) 요청 헤더를 통해 강력한 심층 방어 메커니즘(리소스 격리 정책)을 배포하여 이러한 일반적인 교차 출처 공격으로부터 애플리케이션을 보호할 수 있습니다.
+
+특정 웹 애플리케이션에 의해 노출된 리소스는 다른 웹사이트가 아닌 애플리케이션 자체에 의해서만 로드되는 것이 일반적입니다. 이러한 경우 Fetch Metadata 요청 헤더를 기반으로 리소스 격리 정책을 배포하는 것은 그리 힘들지 않으며 동시에 사이트 간 공격으로부터 애플리케이션을 보호합니다.
+
+## 브라우저 호환성 {: #compatibility }
+
+Fetch Metadata 요청 헤더는 Chrome 76 및 기타 Chromium 기반 브라우저에서 지원되며 Firefox에서 개발 중입니다. 최신 브라우저 지원 정보는 [브라우저 호환성](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site#Browser_compatibility)을 참조하십시오.
+
+## 배경
+
+웹은 기본적으로 열려 있고 애플리케이션 서버는 외부 애플리케이션에서 발생하는 통신으로부터 스스로를 쉽게 보호할 수 없기 때문에 많은 사이트 간 공격이 가능합니다. 일반적인 교차 출처 공격은 공격자가 사용자를 자신이 제어하는 사이트로 유인한 다음 사용자가 로그인한 서버에 양식을 제출하는 CSRF(교차 사이트 요청 위조)입니다. 서버는 요청이 다른 도메인(교차 사이트)에서 시작되었는지 알 수 없고 브라우저는 자동으로 쿠키를 교차 사이트 요청에 첨부하므로 서버가 사용자를 대신하여 공격자가 요청한 작업을 실행합니다.
+
+XSSI(교차 사이트 스크립트 포함) 또는 교차 출처 정보 누출과 같은 다른 교차 사이트 공격은 본질적으로 CSRF와 유사하며 공격자가 관리하는 문서에서 공격 대상이 된 애플리케이션의 리소스를 로드하고 공격 대상이 된 애플리케이션에 대한 정보를 누출하는 데 의존합니다. 애플리케이션은 신뢰할 수 있는 요청과 신뢰할 수 없는 요청을 쉽게 구별할 수 없으므로 악의적인 사이트 간 트래픽을 삭제할 수 없습니다.
+
+{% Aside 'gotchas' %} 위에서 설명한 리소스에 대한 공격 외에도 *창 참조*로 인해 출처 간 정보 누출 및 Spectre 공격이 발생할 수 있습니다. `Cross-Origin-Opener-Policy` 응답 헤더를 `same-origin`으로 설정하여 이를 방지할 수 있습니다. {% endAside %}
+
+## 메타데이터 가져오기 도입 {: #introduction }
+
+Fetch Metadata 요청 헤더는 서버가 교차 출처 공격으로부터 스스로를 방어할 수 있도록 설계된 새로운 웹 플랫폼 보안 기능입니다. `Sec-Fetch-*` 헤더 집합에서 HTTP 요청 컨텍스트에 대한 정보를 제공함으로써 응답 서버가 요청을 처리하기 전에 보안 정책을 적용할 수 있습니다. 개발자는 이를 통해 요청이 생성된 방식과 사용될 컨텍스트에 따라 요청을 수락하거나 거부할지 여부를 결정할 수 있으므로 자체 애플리케이션에서 만든 합법적인 요청에만 응답할 수 있습니다.
+
+{% Compare 'better', 'Same-Origin' %} {% CompareCaption %} 자체 서버(동일 출처)에서 제공하는 사이트에서 시작된 요청은 계속 작동합니다. {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/aRsy2xULTR4TM2sMMsbQ.png", alt="브라우저가 HTTP 요청 헤더 'Sec Fetch-Site: same-origin'을 전송하도록 JavaScript에서 https://site.example/foo.json 리소스에 대한 https://site.example의 가져오기 요청", width="800", height="176" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cross-site' %} {% CompareCaption %} `Sec-Fetch-*` 헤더가 제공하는 HTTP 요청의 추가 컨텍스트 때문에 서버에서 악의적인 사이트 간 요청을 거부할 수 있습니다. {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/xY4yB36JqsVw62wNMIWt.png", alt="브라우저가 HTTP 요청 헤더 'Sec-Fetch-Site: cross-site'를 전송하도록 img 요소의 src 속성을 'https://site.example/foo.json'으로 설정하는 https://evil.example에 대한 이미지.", width="800", height="171" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+### `Sec-Fetch-Site`
+
+`Sec-Fetch-Site`는 요청을 전송한 [사이트](/same-site-same-origin)를 서버에 알려줍니다. 브라우저는 이 값을 다음 중 하나로 설정합니다.
+
+- 요청이 자체 애플리케이션(예: `site.example` )에 의해 이루어진 경우 `same-origin`
+- 사이트의 하위 도메인에서 요청한 경우(예: `bar.site.example`) `same-site`
+- 사용자 에이전트와 사용자의 상호 작용(예: 책갈피 클릭)으로 인해 요청이 명시적으로 발생한 경우 `none`
+- 다른 웹사이트에서 요청을 전송한 경우(예: `evil.example`) `cross-site`
+
+### `Sec-Fetch-Mode`
+
+`Sec-Fetch-Mode`는 요청 [모드](https://developer.mozilla.org/docs/Web/API/Request/mode)를 나타냅니다. 이는 대략적으로 요청 유형에 해당하며 이를 사용하면 탐색 요청과 리소스 로드를 구분할 수 있습니다. 예를 들어, `navigate` 대상은 최상위 탐색 요청을 나타내는 반면 `no-cors`는 이미지 로드와 같은 리소스 요청을 나타냅니다.
+
+### `Sec-Fetch-Dest`
+
+`Sec-Fetch-Dest`는 요청의 [대상](https://developer.mozilla.org/docs/Web/API/Request/destination)을 노출합니다(예: `script` 또는 `img` 태그로 인해 브라우저가 리소스를 요청한 경우).
+
+## 교차 출처 공격으로부터 보호하기 위해 Fetch Metadata를 사용하는 방법
+
+이러한 요청 헤더가 제공하는 추가 정보는 매우 단순하지만 추가 컨텍스트를 통해 단 몇 줄의 코드로 서버 측에서 리소스 격리 정책이라고도 하는 강력한 보안 로직을 구축할 수 있습니다.
+
+### 리소스 격리 정책 구현
+
+리소스 격리 정책은 외부 웹사이트에서 리소스를 요청하는 것을 방지합니다. 이러한 트래픽을 차단하면 CSRF, XSSI, 타이밍 공격 및 교차 출처 정보 누출과 같은 일반적인 교차 사이트 웹 취약점을 완화할 수 있습니다. 이러한 정책은 애플리케이션의 모든 엔드포인트에 대해 활성화할 수 있으며 HTTP `GET` 요청을 통한 직접 탐색 뿐만 아니라 자체 애플리케이션에서 시작되는 모든 리소스 요청을 허용합니다. 교차 사이트 컨텍스트에서 로드되어야 하는 엔드포인트(예: CORS를 사용하여 로드된 엔드포인트)는 이 로직에서 제외될 수 있습니다.
+
+#### 1단계: Fetch Metadata를 전송하지 않는 브라우저의 요청 허용
+
+모든 브라우저가 Fetch Metadata를 지원하는 것은 아니므로 `sec-fetch-site`의 존재 여부를 확인하여 `Sec-Fetch-*` 헤더를 설정하지 않는 요청을 허용해야 합니다.
+
+{% Aside %} 다음 예는 모두 Python 코드에 관한 것입니다. {% endAside %}
+
+```python
+if not req['sec-fetch-site']:
+  return True  # Allow this request
+```
+
+{% Aside 'caution' %} Fetch Metadata는 Chromium 기반 브라우저에서만 지원되므로 기본 방어선이 아닌 [심층 방어 수단](https://static.googleusercontent.com/media/landing.google.com/en//sre/static/pdf/Building_Secure_and_Reliable_Systems.pdf#page=181)으로 사용해야 합니다. {% endAside %}
+
+#### 2단계: 동일한 사이트 및 브라우저 시작 요청 허용
+
+교차 출처 컨텍스트(예: `evil.example`)에서 시작되지 않은 모든 요청이 허용됩니다. 특히 다음과 같은 요청이 이에 해당합니다.
+
+- 자체 애플리케이션에서 시작하는 요청(예: `site.example`이 `site.example/foo.json`을 항상 허용하도록 요청하는 동일한 출처 요청).
+- 하위 도메인에서 시작하는 요청.
+- 사용자 에이전트와 사용자의 상호 작용(예: 직접 탐색 또는 책갈피 클릭 등)으로 인해 명시적으로 발생하는 요청.
+
+```python
+if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+  return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} 하위 도메인을 완전히 신뢰할 수 없는 경우, `same-site` 값을 제거하여 하위 도메인의 요청을 차단하여 정책을 더 엄격하게 만들 수 있습니다. {% endAside %}
+
+#### 3단계: 간단한 최상위 탐색 및 iframe 허용
+
+사이트가 다른 사이트에서 계속 링크될 수 있도록 하려면 단순( `HTTP GET`) 최상위 탐색 기능을 허용해야 합니다.
+
+```python
+if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+  # <object> and <embed> send navigation requests, which we disallow.
+  and req['sec-fetch-dest'] not in ('object', 'embed'):
+    return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} 위의 로직은 애플리케이션의 엔드포인트가 다른 웹사이트에서 리소스로 사용되지 않도록 보호하지만 최상위 탐색 및 임베딩(예: `<iframe>`에서 로드)을 허용합니다. 보안을 더욱 강화하기 위해 Fetch Metadata 헤더를 사용하여 사이트 간 탐색을 허용된 페이지 집합으로만 제한할 수 있습니다. {% endAside %}
+
+#### 4단계: 사이트 간 트래픽을 제공하기 위한 엔드포인트 선택 해제(선택 사항)
+
+어떤 경우에는 애플리케이션이 사이트 간에 로드되도록 의도된 리소스를 제공할 수 있습니다. 이러한 리소스는 경로별 또는 엔드포인트별로 제외되어야 합니다. 이러한 엔드포인트의 예는 다음과 같습니다.
+
+- 교차 출처에 액세스해야 하는 엔드포인트: 애플리케이션이 `CORS` 활성화된 엔드포인트를 제공하는 경우 이러한 엔드포인트에 대한 사이트 간 요청이 여전히 가능한지 확인하기 위해 리소스 격리에서 명시적으로 선택 해제해야 합니다.
+- 공개 리소스(예: 이미지, 스타일 등): 다른 사이트에서 교차 출처로 로드할 수 있어야 하는 모든 공개 및 비인증 리소스도 면제될 수 있습니다.
+
+```python
+if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+  return True
+```
+
+{% Aside 'caution' %} 이러한 보안 제한에서 애플리케이션의 일부를 선택 해제하기 전에 해당 항목이 정적이며 민감한 사용자 정보를 포함하고 있지 않는지 확인하세요. {% endAside %}
+
+#### 5단계: 탐색이 아닌 사이트 간 요청을 모두 거부합니다
+
+다른 **사이트 간** 요청은 이 리소스 격리 정책에 의해 거부되므로 일반적인 사이트 간 공격으로부터 애플리케이션을 보호합니다.
+
+{% Aside 'gotchas' %} 기본적으로 정책을 위반하는 요청은 `HTTP 403` 응답으로 거부되어야 하지만 사용 사례에 따라 다음과 같은 다른 작업을 고려할 수도 있습니다.
+
+- **로그 전용 위반**. 이는 정책의 호환성을 테스트하고 선택 해제해야 할 수 있는 엔드포인트를 찾을 때 특히 유용합니다.
+- **요청 수정**. 특정 시나리오에서는 랜딩 페이지로 리디렉션하고 인증 자격 증명(예: 쿠키)을 삭제하는 것과 같은 다른 작업을 수행하는 것이 좋습니다. 하지만 이는 Fetch Metadata 기반 정책의 보호 기능을 약화시킬 수 있습니다. {% endAside %}
+
+**예:** 다음 코드는 서버에서 또는 잠재적으로 악의적인 사이트 간 리소스 요청을 거부하는 미들웨어로 강력한 리소스 격리 정책을 완벽하게 구현하는 동시에 간단한 탐색 요청을 허용하는 방법을 보여줍니다.
+
+```python
+# Reject cross-origin requests to protect from CSRF, XSSI, and other bugs
+def allow_request(req):
+  # Allow requests from browsers which don't send Fetch Metadata
+  if not req['sec-fetch-site']:
+    return True
+
+  # Allow same-site and browser-initiated requests
+  if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+    return True
+
+  # Allow simple top-level navigations except <object> and <embed>
+  if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+    and req['sec-fetch-dest'] not in ('object', 'embed'):
+      return True
+
+  # [OPTIONAL] Exempt paths/endpoints meant to be served cross-origin.
+  if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+    return True
+
+  # Reject all other requests that are cross-site and not navigational
+  return False
+```
+
+### 리소스 격리 정책 배포
+
+1. 위의 코드 조각과 같은 모듈을 설치하여 사이트가 어떻게 작동하는지 기록하고 모니터링하며 제한 사항이 합법적인 트래픽에 영향을 미치지 않는지 확인합니다.
+2. 합법적인 출처 간 엔드포인트를 제외하여 잠재적 위반을 수정합니다.
+3. 비준수 요청을 삭제하여 정책을 시행합니다.
+
+### 정책 위반 식별 및 수정
+
+먼저 서버 측 코드의 보고 모드에서 정책을 활성화하여 부작용 없는 방식으로 정책을 테스트하는 것이 좋습니다. 대안으로, 미들웨어에서 이 로직을 구현하거나 정책이 프로덕션 트래픽에 적용될 때 생성할 수 있는 위반 사례를 기록하는 역방향 프록시에서 구현할 수 있습니다.
+
+Google에서 Fetch Metadata 리소그 격리 정책을 배포한 경험에 따르면 대부분의 애플리케이션은 기본적으로 이러한 정책과 호환되며 사이트 간 트래픽을 허용하기 위해 엔드포인트를 제외할 필요가 거의 없습니다.
+
+### 리소스 격리 정책 시행
+
+정책이 합법적인 프로덕션 트래픽에 영향을 미치지 않는지 확인한 이후에는 제한을 적용하여 다른 사이트에서 리소스를 요청할 수 없도록 하고 사이트 간 공격으로부터 사용자를 보호할 준비가 된 것입니다.
+
+{% Aside 'caution' %} 민감한 타이밍 정보가 노출되지 않도록 인증을 확인하거나 다른 요청을 처리하기 전에 유효하지 않은 요청을 거부해야 합니다. {% endAside %}
+
+## 추가 참고 자료
+
+- [W3C 페치 메타데이터 요청 헤더 사양](https://www.w3.org/TR/fetch-metadata/)
+- [메타데이터 플레이그라운드 가져오기](https://secmetadata.appspot.com/)
+- [Google I/O 토크: 최신 플랫폼 기능으로 웹 앱 보호](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)(슬라이드)
+
+{% YouTube id='DDtM9caQ97I', startTime='1856' %}
diff --git a/src/site/content/ko/blog/fetch-upload-streaming/index.md b/src/site/content/ko/blog/fetch-upload-streaming/index.md
new file mode 100644
index 00000000000..584a50fef1f
--- /dev/null
+++ b/src/site/content/ko/blog/fetch-upload-streaming/index.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: fetch API를 사용한 스트리밍 요청
+authors:
+  - jakearchibald
+description: Chrome은 이제 버전 95부터 업로드 스트리밍을 지원합니다. 이는 전체 본문을 사용할 수 있게 되기 전에 요청을 시작할 수 있다는 것을 의미합니다.
+date: 2020-07-22
+updated: 2021-09-22
+hero: image/admin/9U7u4C7WCGbrdHm3181W.jpg
+alt: 시냇물을 향해 가는 카누
+tags:
+  - blog
+  - chrome-95
+  - network
+  - service-worker
+feedback:
+  - api
+---
+
+Chrome 95부터 streams API를 사용하여 전체 본문을 사용할 수 있게 되기 전에 요청을 시작할 수 있습니다.
+
+이것을 사용하여 다음을 수행할 수 있습니다.
+
+- 서버를 워밍업합니다. 즉, 사용자가 텍스트 입력 필드에 포커스를 맞추면 요청을 시작하고 모든 헤더를 제거한 다음 입력한 데이터를 보내기 전에 사용자가 '보내기'를 누를 때까지 기다릴 수 있습니다.
+- 오디오, 비디오 또는 입력 데이터와 같이 클라이언트에서 생성된 데이터를 차례로 보냅니다.
+- HTTP을 통해 웹 소켓을 다시 만듭니다.
+
+그러나 이것은 낮은 수준의 웹 플랫폼 기능이므로 *제* 아이디어에 국한되지 마십시오. 요청 스트리밍에 대한 훨씬 더 흥미로운 사용 사례를 생각할 수 있습니다.
+
+## 데모 {: #demo }
+
+{% Glitch { id: 'fetch-request-stream', path: 'index.html', height: 480 } %}
+
+이것은 사용자에서 서버로 데이터를 스트리밍하고 실시간으로 처리할 수 있는 데이터를 다시 보내는 방법을 보여줍니다.
+
+네, 가장 상상력이 풍부한 예는 아닙니다. 저는 그저 단순하게 하고 싶었습니다. 알겠죠?
+
+어쨌든, 이것은 어떻게 작동할까요?
+
+## fetch 스트림의 흥미진진한 모험에 대한 지난 이야기
+
+*응답* 스트림은 현재 모든 최신 브라우저에서 사용할 수 있습니다. 서버에서 도착하는 응답의 일부에 다음과 같이 액세스할 수 있습니다.
+
+```js
+const response = await fetch(url);
+const reader = response.body.getReader();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+  console.log('Received', value);
+}
+
+console.log('Response fully received');
+```
+
+각 `value`는 바이트의 `Uint8Array` 입니다. 얻을 수 있는 어레이의 수와 어레이의 크기는 네트워크 속도에 따라 다릅니다. 빠른 연결을 사용하는 경우 더 적은 양의 더 큰 데이터 '청크(chuncks)'를 얻게 됩니다. 느린 연결을 사용하는 경우 더 많은 작은 청크를 얻게 됩니다.
+
+바이트를 텍스트로 변환하려면 [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder/decode)를 사용하거나 [대상 브라우저에서 지원하는](https://caniuse.com/#feat=mdn-api_textdecoderstream) 경우 최신 변환 스트림을 사용할 수 있습니다.
+
+```js
+const response = await fetch(url);
+const reader = response.body
+  .pipeThrough(new TextDecoderStream())
+  .getReader();
+```
+
+`TextDecoderStream`는 이러한 모든 `Uint8Array` 덩어리를 가져와 문자열로 변환하는 변환 스트림입니다.
+
+스트림은 데이터가 도착하는 즉시 작업을 시작할 수 있기 때문에 훌륭합니다. 예를 들어, 100개의 '결과' 목록을 수신하는 경우 100개 모두를 기다리지 않고 수신하는 즉시 첫 번째 결과를 표시할 수 있습니다.
+
+어쨌든, 그것은 응답 스트림입니다. 제가 이야기하고 싶은 흥미롭고 새로운 것은 요청 스트림입니다.
+
+## 본문 요청 스트리밍
+
+요청에는 다음과 같은 본문이 있을 수 있습니다.
+
+```js
+await fetch(url, {
+  method: 'POST',
+  body: requestBody,
+});
+```
+
+이전에는 요청을 시작하기 전에 전체 본문을 준비해야 했지만 이제는 Chrome 95에서 고유 `ReadableStream` 데이터를 제공할 수 있습니다.
+
+```js
+function wait(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+const stream = new ReadableStream({
+  async start(controller) {
+    await wait(1000);
+    controller.enqueue('This ');
+    await wait(1000);
+    controller.enqueue('is ');
+    await wait(1000);
+    controller.enqueue('a ');
+    await wait(1000);
+    controller.enqueue('slow ');
+    await wait(1000);
+    controller.enqueue('request.');
+    controller.close();
+  },
+}).pipeThrough(new TextEncoderStream());
+
+fetch(url, {
+  method: 'POST',
+  headers: { 'Content-Type': 'text/plain' },
+  body: stream,
+});
+```
+
+위는 "이것은 느린 요청입니다"를 한 번에 한 단어씩 서버에 보내고 각 단어마다 1초간 일시적으로 정지됩니다.
+
+요청 본문의 각 청크는 바이트의 `Uint8Array`여야 하기 때문에, `pipeThrough(new TextEncoderStream())`을 사용하여 변환합니다.
+
+### 쓰기 가능한 스트림
+
+`WritableStream` 이 있을 때 스트림으로 작업하는 것이 더 쉬운 경우가 있습니다. 'identity' 스트림을 사용하여 이 작업을 수행할 수 있으며 이는 읽기/쓰기 가능 쌍으로, 전달된 내용을 쓰기 가능한 end로 가져와서 읽기 가능한 end로 보냅니다. 인수 없이 `TransformStream`을 생성하여 다음 중 하나를 생성할 수 있습니다.
+
+```js
+const { readable, writable } = new TransformStream();
+
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+이제 쓰기 가능한 스트림으로 보내는 모든 것이 요청의 일부가 됩니다. 이를 통해 스트림을 함께 작성할 수 있습니다. 예를 들어, 다음은 한 URL에서 데이터를 가져와 압축하고 다른 URL로 보내는 어리석은 예입니다.
+
+```js
+// url1에서 가져오기:
+const response = await fetch(url1);
+const { readable, writable } = new TransformStream();
+
+// url1에서 데이터 압축하기:
+response.body
+  .pipeThrough(new CompressionStream('gzip'))
+  .pipeTo(writable);
+
+// url2로 게시하기:
+await fetch(url2, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+위의 예는 gzip을 사용하여 임의의 데이터를 압축하기 위해 [압축 스트림](https://chromestatus.com/feature/5855937971617792)을 사용합니다.
+
+### 특징 감지
+
+```js
+const supportsRequestStreamsP = (async () => {
+  const supportsStreamsInRequestObjects = !new Request('', {
+    body: new ReadableStream(),
+    method: 'POST',
+  }).headers.has('Content-Type');
+
+  if (!supportsStreamsInRequestObjects) return false;
+
+  return fetch('data:a/a;charset=utf-8,', {
+    method: 'POST',
+    body: new ReadableStream(),
+  }).then(() => true, () => false);
+})();
+
+// 참고: supportsRequestStreamsP는 약속입니다.
+if (await supportsRequestStreamsP) {
+  // …
+} else {
+  // …
+}
+```
+
+궁금하시다면, 기능 감지가 작동하는 방식은 다음과 같습니다.
+
+브라우저가 특정 `body` 유형을 지원하지 않는 경우, 객체에 `toString()` 을 호출하고 그 결과를 본문으로 사용합니다. 따라서 브라우저가 요청 스트림을 지원하지 않는 경우 요청 본문은 `"[object ReadableStream]"` 문자열이 됩니다. 문자열이 본문으로 사용되면 `Content-Type` 헤더를 `text/plain;charset=UTF-8`로 알맞게 설정합니다. 따라서 해당 헤더가 설정되어 있으면 브라우저가 요청 개체의 스트림을 지원하지 *않는다*는 것을 알고 일찍 종료할 수 있습니다.
+
+불행히도 Safari는 요청 객체의 스트림을 지원*하지만*  `fetch`와 함께 사용할 수 는 *없습니다*.
+
+이를 테스트하기 위해 스트림 본문으로 `fetch`를 시도합니다. 테스트는 네트워크에 의존하는 경우 불안정하고 느릴 수 있지만 고맙게도 사양의 단점은 `data:` URL)에 `POST` 요청을 허용합니다. 이것은 연결 없이 빠르게 작동합니다. Safari는 스트림 본문을 지원하지 않기 때문에 이 호출을 거부합니다.
+
+## 제한
+
+스트리밍 요청은 웹의 새로운 기능이기 때문에 다음과 같은 몇 가지 제한 사항이 있습니다.
+
+### 제한된 리디렉션
+
+일부 형식의 HTTP 리디렉션에서는 브라우저에서 요청 본문을 다른 URL로 다시 보내야 합니다. 이를 지원하려면 브라우저는 스트림의 내용을 버퍼링해야 하는데, 이는 일종의 요점을 무효화하므로 그렇게 하지 않습니다.
+
+대신 요청에 스트리밍 본문이 있고 응답이 303이 아닌 HTTP 리디렉션인 경우 가져오기가 거부되고 리디렉션이 수행되지 *않습니다*.
+
+303 리디렉션은 메서드를 명확하게 `GET`으로 변경하고 요청 본문을 삭제하기 때문에 허용됩니다.
+
+### 기본적으로 HTTP/2 전용
+
+기본적으로 연결 방식이 HTTP/2가 아니면 가져오기가 거부됩니다. HTTP/1.1을 통한 스트리밍 요청을 사용하려면 다음을 선택해야 합니다.
+
+```js/3-3
+await fetch(url, {
+  method: 'POST',
+  body: stream,
+  allowHTTP1ForStreamingUpload: true,
+});
+```
+
+{% Aside 'caution' %} `allowHTTP1ForStreamingUpload`는 비표준이며 Chrome의 실험적 구현의 일부로만 사용됩니다. {% endAside %}
+
+HTTP/1.1 규칙에 따라 요청 및 응답 본문은 어느 것이든 `Content-Length` 헤더를 보내야 하므로 상대방이 수신할 데이터의 양을 알거나 [청크 인코딩](https://en.wikipedia.org/wiki/Chunked_transfer_encoding)을 사용하도록 메시지 형식을 변경합니다. 청크 인코딩을 사용하면 본문이 각각 고유한 콘텐츠 길이를 가진 부분으로 분할됩니다.
+
+청크 인코딩은 HTTP/1.1 *응답*에 관해서는 매우 일반적이지만 *요청*에 관해서는 매우 드뭅니다. 이 때문에 Chrome은 호환성에 대해 약간 걱정하고 있으므로 지금은 옵트인 상태입니다.
+
+{% Aside %} HTTP/2 데이터는 청크 [프레임](https://developers.google.com/web/fundamentals/performance/http2#streams_messages_and_frames)을 호출하지만 항상 '청크'되기 때문에 HTTP/2에서는 문제가 되지 않습니다. 청크 인코딩은 HTTP/1.1까지 도입되지 않았으므로 스트리밍 본문이 있는 요청은 HTTP/1 연결에서 항상 실패합니다. {% endAside %}
+
+이 시도가 어떻게 진행되는지에 따라 사양은 스트리밍 응답을 HTTP/2로 제한하거나 항상 HTTP/1.1 및 HTTP/2 모두에 대해 허용합니다.
+
+### 이중 통신 없음
+
+HTTP의 잘 알려지지 않은 기능(이것이 표준 동작인지 여부는 묻는 사람에 따라 다름)은 요청을 보내는 동안 응답을 받을 수 있다는 것입니다. 그러나 잘 알려지지 않았기 때문에 서버와 브라우저에서 잘 지원되지 않습니다.
+
+Chrome의 현재 구현에서는 본문이 완전히 전송될 때까지 응답을 받지 못합니다. 다음 예제에서 `responsePromise` 는 읽을 수 있는 스트림이 닫힐 때까지 resove 되지 않습니다. 그 지점 이전에 서버가 보내는 모든 것은 버퍼링됩니다.
+
+```js
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readableStream,
+});
+```
+
+이중 통신의 다음으로 가장 좋은 방법은 스트리밍 요청으로 하나의 가져오기를 수행한 다음 스트리밍 응답을 수신하기 위해 다른 가져오기를 수행하는 것입니다. 서버는 URL의 ID와 같이 이러한 두 요청을 연결하는 방법이 필요합니다. 이것이 [데모](#demo)가 작동하는 방식입니다.
+
+## 잠재적인 문제
+
+예, 그래서… 이것은 새로운 기능이며 오늘날 인터넷에서 잘 사용되지 않는 기능입니다. 다음은 주의해야 할 몇 가지 문제입니다.
+
+### 서버 측의 비호환성
+
+일부 앱 서버는 스트리밍 요청을 지원하지 않고 대신 전체 요청이 수신될 때까지 기다렸다가 전체 요청을 볼 수 있게 합니다. 대신 [NodeJS](https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_class_http_incomingmessage)와 같이 스트리밍을 지원하는 앱 서버를 사용하세요.
+
+하지만 아직 숲에서 나오지 않았습니다! NodeJS와 같은 애플리케이션 서버는 일반적으로 "프론트 엔드 서버"라고 하는 다른 서버 뒤에 위치하며, 이 서버는 결국 CDN 뒤에 위치할 수 있습니다. 이들 중 하나가 요청을 체인의 다음 서버에 제공하기 전에 버퍼링하기로 결정하면 요청 스트리밍의 이점을 잃게 됩니다.
+
+또한 HTTP/1.1을 사용하는 경우 서버 중 하나가 청크 인코딩에 대해 준비되지 않을 수 있으며 오류와 함께 실패할 수 있습니다. 하지만 적어도 테스트하고 필요한 경우 서버를 변경해 볼 수는 있습니다.
+
+*…긴 한숨…*
+
+### 통제할 수 없는 비호환성
+
+HTTPS를 사용하는 경우 사용자와 사용자 간의 프록시에 대해 걱정할 필요가 없지만 사용자가 자신의 컴퓨터에서 프록시를 실행 중일 수 있습니다. 일부 인터넷 보호 소프트웨어는 브라우저와 네트워크 사이를 오가는 모든 것을 모니터링할 수 있도록 이 작업을 수행합니다.
+
+이 소프트웨어가 요청 본문을 버퍼링하거나 HTTP/1.1의 경우 청크 인코딩을 예상하지 않고 흥미로운 방식으로 중단되는 경우가 있을 수 있습니다.
+
+현재로서는 이런 일이 얼마나 자주 일어날지는 분명하지 않습니다.
+
+이를 방지하려면 위의 [데모](#demo)와 유사한 '기능 테스트'를 만들 수 있습니다. 여기서 스트림을 닫지 않고 일부 데이터를 스트리밍하려고 합니다. 서버가 데이터를 수신하면 다른 가져오기를 통해 응답할 수 있습니다. 이러한 일이 발생하면 클라이언트가 엔드 투 엔드 스트리밍 요청을 지원한다는 것을 알게 됩니다.
+
+## 피드백 환영
+
+커뮤니티의 피드백은 새 API 설계에 매우 중요하므로 사용해 보고 의견을 알려주세요! 버그가 발생하면 [보고](https://bugs.chromium.org/p/chromium/issues/list) 해주세요. 일반적인 피드백인 경우에는 [Blink-network-dev Google 그룹](https://groups.google.com/a/chromium.org/forum/#!forum/blink-network-dev)으로 보내주세요.
+
+사진 제공: [Unsplash](https://unsplash.com/s/photos/canoe-stream?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)에서 [Laura Lefurgey-Smith](https://unsplash.com/s/photos/canoe-stream?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/ko/blog/floc/index.md b/src/site/content/ko/blog/floc/index.md
new file mode 100644
index 00000000000..1f0f4120dd3
--- /dev/null
+++ b/src/site/content/ko/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: FLoC란 무엇입니까?
+subhead: FLoC는 개별 사용자의 브라우징 행동을 공유하지 않고 광고 선택을 가능하게 합니다.
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: 브라이튼 부두 위 찌르레기의 중얼거림
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} 이 게시물은 FLoC의 첫 번째 원본 평가판을 위해 Chrome에 구현된 API 설계를 간략하게 설명합니다.
+
+제3자 쿠키 또는 기타 사이트 간 추적 메커니즘 없이 관심 기반 광고를 가능하게 하는 API의 향후 버전은 현재 개발 중입니다. {% endAside %}
+
+FLoC는 관심 기반 광고 선택을 위한 개인 정보 보호 메커니즘을 제공합니다.
+
+사용자가 웹에서 이동할 때 브라우저는 FLoC 알고리즘을 사용하여 유사한 최근 검색 기록을 가진 수천 개의 브라우저에서 동일한 "관심 집단"을 계산합니다. 브라우저는 개별 브라우징 데이터를 브라우저 공급업체나 다른 사람과 공유하지 않고 사용자의 장치에서 주기적으로 해당 집단을 다시 계산합니다.
+
+{% Aside %} 초기 FLoC 평가판 동안 페이지 방문은 다음 두 가지 이유 중 하나로 인해 브라우저의 FLoC 계산에만 포함되었습니다.
+
+- FLoC API(`document.interestCohort()`)가 페이지에서 사용됩니다.
+- Chrome은 페이지에서 [광고 또는 광고 관련 리소스를 로드](https://github.com/WICG/floc/issues/82)하는 것을 감지합니다.
+
+다른 클러스터링 알고리즘의 경우 실험에서 다른 포함 기준을 사용하여 실험할 수 있습니다. 이는 원본 실험 프로세스의 일부입니다.
+
+Chrome 89부터 91에서 실행되었던 FLoC의 초기 버전에 대한 원본 평가판이 [이제 종료되었습니다](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+광고주(광고 비용을 지불하는 사이트)는 코호트 데이터를 수집하여 광고기술 플랫폼(광고 제공을 위한 소프트웨어 및 도구를 제공하는 회사)에 제공하기 위해 자신의 웹사이트에 코드를 포함할 수 있습니다. 예를 들어, 광고기술 플랫폼은 집단 1101 및 1354의 브라우저가 상점의 하이킹 장비에 관심이 있는 것으로 보이는 온라인 신발 상점으로부터 학습할 수 있습니다. 다른 광고주로부터 광고기술 플랫폼은 해당 집단의 다른 관심사에 대해 학습합니다.
+
+결과적으로 광고 플랫폼은 해당 집단 중 하나의 브라우저가 뉴스 웹사이트와 같이 광고를 표시하는 사이트에서 페이지를 요청할 때 이 데이터를 사용하여 관련 광고(예: 신발 가게의 등산화 광고)를 선택할 수 있습니다.
+
+프라이버시 샌드박스는 제3자 쿠키 또는 기타 추적 메커니즘 없이 제3자 사용 사례를 충족하기 위한 일련의 제안입니다. 모든 제안에 대한 개요는 [개인 정보 보호 샌드박스 자세히 보기](/digging-into-the-privacy-sandbox)를 참조하세요.
+
+**이 제안은 귀하의 피드백이 필요합니다.** 의견이 있는 경우 [FLoC Explainer](https://github.com/WICG/floc/issues/new) 저장소에 [문제를 생성하십시오](https://github.com/WICG/floc). Chrome이 이 제안을 실험에 하는 것해 피드백이 있는 경우 [실험 의도](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs)에 회신을 게시하세요.
+
+## FLoC가 필요한 이유는 무엇입니까?
+
+많은 기업이 광고에 의존하여 트래픽을 사이트로 유도하고 많은 게시자 웹사이트에서 광고 인벤토리를 판매하여 콘텐츠 자금을 조달합니다. 사람들은 일반적으로 자신에게 관련성 있고 유용한 광고를 보고 싶어하며 관련성 있는 광고는 광고주에게 더 많은 비즈니스를 제공하고 [해당 광고를 호스팅하는 웹사이트에 더 많은 수익을 가져다 줍니다](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf). 즉, 광고 공간은 관련성 높은 광고를 보여줄 때 더 가치가 있습니다. 따라서 관련 광고를 선택하면 광고 지원 웹사이트의 수익이 증가합니다. 이는 다시 관련 광고가 사용자에게 이익이 되는 콘텐츠 제작 자금을 지원한다는 것을 의미합니다.
+
+그러나 사람들은 현재 쿠키 추적 및 장치 지문과 같은 기술에 의존하는 맞춤형 광고가 개인 정보 보호에 미치는 영향에 대해 우려하고 있습니다. FLoC 제안은 개인 정보를 더 잘 보호하는 방식으로 광고 선택을 허용하는 것을 목표로 합니다.
+
+## FLoC는 무엇에 사용할 수 있습니까?
+
+- 광고주의 사이트를 자주 방문하거나 관련 주제에 관심을 보이는 집단에 속하는 브라우저를 사용하는 사람들에게 광고를 게재합니다.
+- 광고 경매 입찰과 관련된 행동을 알리기 위해 기계 학습 모델을 사용하여 사용자 집단을 기반으로 사용자가 전환할 확률을 예측합니다.
+- 사용자에게 콘텐츠를 추천합니다. 예를 들어, 뉴스 사이트에서 스포츠 팟캐스트 페이지가 집단 1234 및 7의 방문자에게 특히 인기가 있다는 것을 관찰했다고 가정합니다. 해당 콘텐츠를 해당 집단의 다른 방문자에게 추천할 수 있습니다.
+
+## FLoC는 어떻게 작동합니까?
+
+아래 예는 FLoC를 사용하여 광고를 선택하는 다양한 역할을 설명합니다.
+
+- 이 예에서 **광고주**(광고 비용을 지불하는 회사)는 온라인 신발 소매업체입니다.<br> **<u>shoestore.example</u>**
+
+- 예에서 **게시자**(광고 공간을 판매하는 사이트)는 뉴스 사이트입니다.<br> **<u>dailynews.example</u>**
+
+- **광고기술 플랫폼**(광고 전달을 위한 소프트웨어 및 도구 제공)은 다음과 같습니다.<br> **<u>adnetwork.example</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="FLoC를 사용하여 광고를 선택하고 전달하는 다양한 역할을 단계별로 보여주는 다이어그램: FLoC 서비스, 브라우저, 광고주, 게시자(집단 관찰용), 광고기술 제공자, 게시자(광고 표시용)", width="800", height="359" %}
+
+이 예에서 우리는 사용자를 **Yoshi** 및 **Alex**라고 불렀습니다. 처음에는 두 브라우저 모두 동일한 집단인 1354에 속합니다.
+
+{% Aside %} 여기에서는 사용자를 Yoshi와 Alex라고 불렀지만 이는 예시를 위한 것일 뿐입니다. 이름과 개인의 신원은 FLoC를 사용하는 광고주, 게시자 또는 애드테크 플랫폼에 공개되지 않습니다.
+
+집단을 사람들의 집합체로 생각하지 마십시오. 대신, 집단을 브라우징 활동의 그룹으로 생각하십시오. {% endAside %}
+
+### 1. FLoC 서비스
+
+1. 브라우저에서 사용하는 FLoC 서비스는 수천 개의 "집단(cohort)"으로 수학적 모델을 생성하며, 각각은 유사한 최근 검색 기록을 가진 수천 개의 웹 브라우저에 해당합니다. [아래](#floc-server)에서 작동 방식에 대해 자세히 알아보세요.
+2. 각 집단에는 번호가 부여됩니다.
+
+### 2. 브라우저
+
+1. FLoC 서비스에서 Yoshi의 브라우저는 FLoC 모델을 설명하는 데이터를 얻습니다.
+2. Yoshi의 브라우저 는 [FLoC 모델의 알고리즘을 사용](#floc-algorithm)하여 자신의 검색 기록에 가장 근접한 집단을 계산하여 집단을 계산합니다. 이 예에서는 집단 1354가 됩니다. Yoshi의 브라우저는 FLoC 서비스와 데이터를 공유하지 않습니다.
+3. 같은 방식으로 Alex의 브라우저는 집단 ID를 계산합니다. Alex의 검색 기록은 Yoshi의 검색 기록과 다르지만 두 브라우저가 모두 집단 1354에 속할 정도로 비슷합니다.
+
+### 3. 광고주: <span style="font-weight:normal">shoestore.example</span>
+
+1. Yoshi가 <u>shoestore.example을</u> 방문합니다.
+2. 이 사이트는 Yoshi의 브라우저에 집단 1354를 요청합니다.
+3. Yoshi가 등산화를 살펴봅니다.
+4. 이 사이트는 집단 1354의 브라우저가 등산화에 관심을 보였다고 기록합니다.
+5. 이 사이트는 나중에 집단 1354와 다른 집단의 제품에 대한 추가 관심을 기록합니다.
+6. 이 사이트는 adtech 플랫폼 <u>adnetwork.example</u>을 사용하여 집단 및 제품 관심 분야에 대한 정보를 주기적으로 집계하고 공유합니다.
+
+이제 Alex 차례입니다.
+
+### 4. 게시자: <span style="font-weight:normal">dailynews.example</span>
+
+1. Alex는 <u>dailynews.example을</u> 방문합니다.
+2. 이 사이트는 Alex의 브라우저에 해당 집단을 요청합니다.
+3. 그런 다음 사이트는 Alex의 브라우저 집단인 1354를 포함하여 adtech 플랫폼 <u>adnetwork.example</u>에 광고를 요청합니다.
+
+### 5. 광고기술 플랫폼: <span style="font-weight:normal">adnetwork.example</span>
+
+1. <u>adnetwork.example</u>은 게시자 <u>dailynews.example</u>과 광고주 <u>shoestore.example</u>의 데이터를 결합하여 Alex에게 적합한 광고를 선택할 수 있습니다.
+
+- <u>Dailynews.example</u>에서 제공한 Alex가 사용하는 브라우저의 집단: 1354.
+- <u>shoestore.example의</u> 집단 및 제품 관심분야에 대한 데이터: "집단 1354 의 브라우저가 등산화에 관심이 있을 수 있습니다."
+
+1. <u>adnetwork.example</u>은 Alex에게 적합한 광고인 <u>shoestore.example</u>의 하이킹 부츠 광고를 선택합니다.
+2. <u>Dailynews.example</u>은 광고🥾를 표시합니다.
+
+{% Aside %} 광고 선택에 대한 현재 접근 방식은 쿠키 및 기기 지문 추적과 같은 기술에 의존하며, 이는 광고주와 같은 제3자가 개별 탐색 행동을 추적하는 데 사용합니다.
+
+FLoC를 사용하면 브라우저는 FLoC 서비스 또는 다른 사람과 검색 기록을 **공유하지 않습니다.** 사용자 기기의 브라우저는 어느 집단에 속하는지 알아냅니다. 사용자의 검색 기록은 장치를 떠나지 않습니다. {% endAside %}
+
+## FLoC 모델을 생성하는 백엔드 서비스는 누가 실행합니까?
+
+모든 브라우저 공급업체는 브라우저를 집단으로 그룹화하는 방법을 스스로 선택해야 합니다. Chrome은 자체 FLoC 서비스를 실행하고 있습니다. 다른 브라우저는 다른 클러스터링 접근 방식으로 FLoC를 구현하도록 선택할 수 있으며 그렇게 하기 위해 자체 서비스를 실행할 것입니다.
+
+## FLoC 서비스를 통해 브라우저가 해당 집단을 파악할 수 있는 방법은 무엇입니까? {: #floc-서버 }
+
+1. 브라우저에서 사용하는 FLoC 서비스는 모든 잠재적인 웹 검색 기록에 대한 다차원 수학적 표현을 생성합니다. 우리는 이 모델을 "집단 공간"이라고 부를 것입니다.
+2. 서비스는 이 공간을 수천 개의 세그먼트로 나눕니다. 각 세그먼트는 수천 개의 유사한 검색 기록 클러스터를 나타냅니다. 이러한 그룹화는 실제 검색 기록을 아는 것을 기반으로 하지 않습니다. 그들은 단순히 "집단 공간"에서 임의의 중심을 선택하거나 임의의 선으로 공간을 자르는 것을 기반으로 합니다.
+3. 각 세그먼트에는 집단 번호가 지정됩니다.
+4. 웹 브라우저는 FLoC 서비스에서 "집단 공간"을 설명하는 이 데이터를 가져옵니다.
+5. 사용자가 웹에서 이동할 때 브라우저는 [알고리즘을 사용](#floc-algorithm)하여 자신의 검색 기록과 가장 근접하게 일치하는 "집단 공간"의 영역을 주기적으로 계산합니다.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="FLoC 서버에 의해 생성된 '탐색 기록 공간'의 다이어그램으로, 각각 집단 번호가 있는 여러 세그먼트를 보여줍니다.", width="400", height="359" %}<figcaption> FLoC 서비스는 "코호트 공간"을 수천 개의 세그먼트로 나눕니다(여기에는 몇 개만 표시됨).</figcaption></figure>
+
+{% Aside %} 이 과정에서 사용자의 검색 기록은 FLoC 서비스나 제3자와 공유되지 않습니다. 브라우저의 집단은 사용자의 기기에서 브라우저에 의해 계산됩니다. FLoC 서비스는 사용자 데이터를 수집하거나 저장하지 않습니다. {% endAside %}
+
+## 브라우저의 집단이 변경될 수 있습니까?
+
+*예* ! 브라우저의 집단은 확실히 바뀔 수 있습니다! 당신은 매주 같은 웹사이트를 방문하지 않을 것이고, 당신의 브라우저 집단은 이를 반영할 것입니다.
+
+집단은 사람들의 집합이 아니라 탐색 활동의 집합을 나타냅니다. 집단의 활동 특성은 일반적으로 시간이 지남에 따라 일관되며 집단은 유사한 최근 탐색 행동을 그룹화하기 때문에 광고 선택에 유용합니다. 개별 사용자의 브라우저는 브라우징 행동이 변경됨에 따라 집단 안팎으로 떠돌아다니게 됩니다. 처음에는 브라우저가 7일마다 해당 집단을 다시 계산할 것으로 예상합니다.
+
+위의 예에서 Yoshi와 Alex의 브라우저 집단은 모두 1354입니다. 향후 Yoshi의 브라우저와 Alex의 브라우저는 관심사가 변경되면 다른 집단으로 이동할 수 있습니다. 아래 예에서 Yoshi의 브라우저는 집단 1101로 이동하고 Alex의 브라우저는 집단 1378로 이동합니다. 다른 사람들의 브라우저는 탐색 관심 분야가 변경됨에 따라 집단 안팎으로 이동합니다.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="FLoC 서버에 의해 생성된 '탐색 기록 공간'의 다이어그램으로, 각각 코호트 번호가 있는 여러 브라우저 세그먼트를 보여줍니다. 다이어그램이 시간이 지나면서 탐색 관심사가 변경됨에 따라 Yoshi와 Alex가 한 집단에서 다른 집단으로 이동하는 것을 보여줍니다.", width="800", height="533" %}<figcaption> Yoshi와 Alex의 브라우저 집단은 관심사가 바뀌면 바뀔 수 있습니다.</figcaption></figure>
+
+{% Aside %} 집단은 사람들의 그룹이 아니라 탐색 활동의 그룹을 정의합니다. 브라우저는 활동이 변경됨에 따라 코호트 안팎으로 이동합니다. {% endAside %}
+
+## 브라우저는 해당 집단을 어떻게 처리합니까? {: #floc-algorithm }
+
+위에서 설명한 것처럼 사용자의 브라우저는 집단에 대한 수학적 모델을 설명하는 FLoC 서비스에서 데이터를 가져옵니다. 즉, 모든 사용자의 탐색 활동을 나타내는 다차원 공간입니다. 그런 다음 브라우저는 알고리즘을 사용하여 이 "집단 공간"의 어느 영역(즉, 어느 집단)이 자신의 최근 탐색 동작과 가장 근접하게 일치하는지 알아냅니다.
+
+## FLoC는 집단의 적절한 크기를 어떻게 계산합니까?
+
+각 집단에는 수천 개의 브라우저가 있습니다.
+
+집단 크기가 작을수록 광고를 개인화하는 데 더 유용할 수 있지만 사용자 추적을 중지할 가능성은 낮고 반대의 경우도 마찬가지입니다. 브라우저를 집단에 할당하는 메커니즘은 개인 정보 보호와 유용성 사이에서 균형을 유지해야 합니다. 프라이버시 샌드박스는 [k-익명성](https://en.wikipedia.org/wiki/K-anonymity)을 사용하여 사용자가 "군중 속에 숨을 수 있도록" 합니다. 집단은 최소 k명의 사용자가 공유하는 경우 k-익명성을 갖습니다. k 숫자가 높을수록 집단이 더 많이 개인 정보를 보호합니다.
+
+## FLoC를 사용하여 민감한 카테고리를 기반으로 사람들을 그룹화할 수 있습니까?
+
+FLoC 코호트 모델을 구성하는 데 사용되는 클러스터링 알고리즘은 카테고리가 민감한 이유를 배우지 않고 코호트가 민감한 카테고리와 상관 관계가 있는지 여부를 평가하도록 설계되었습니다. 인종, 성, 병력 등 민감한 카테고리를 노출할 수 있는 집단은 차단됩니다. 다시 말해, 해당 집단을 구성할 때 브라우저는 민감한 카테고리를 표시하지 않는 집단 중에서만 선택합니다.
+
+## FLoC는 온라인에서 사람들을 분류하는 또 다른 방법입니까?
+
+FLoC를 사용하면 사용자의 브라우저가 수천 개의 다른 사용자 브라우저와 함께 수천 개의 집단 중 하나에 속하게 됩니다. 타사 쿠키 및 기타 타겟팅 메커니즘과 달리 FLoC는 개별 사용자 ID가 아닌 사용자 브라우저가 속한 집단만 표시합니다. 다른 사람들은 집단 내에서 개인을 구별할 수 없습니다. 또한 브라우저 집단을 구성하는 데 사용되는 탐색 활동에 대한 정보는 브라우저나 장치에 로컬로 보관되며 다른 곳에 업로드되지 않습니다. 브라우저는 [차등 개인 정보 보호](https://en.wikipedia.org/wiki/Differential_privacy)와 같은 다른 익명화 방법을 추가로 활용할 수 있습니다.
+
+## 웹사이트가 참여하고 정보를 공유해야 합니까?
+
+웹사이트는 FLoC를 선택하거나 선택 해제할 수 있으므로 민감한 주제에 대한 사이트는 해당 사이트 방문이 FLoC 계산에 포함되는 것을 방지할 수 있습니다. 추가적인 보호조치로 FLoC 서비스의 분석은 해당 집단이 민감한 이유를 알지 못한 채 사용자에 대한 민감한 정보를 집단이 공개할 수 있는지 여부를 평가합니다. 집단이 민감한 범주의 사이트를 방문하는 일반 사용자 수보다 많을 수 있는 경우 해당 집단 전체가 제거됩니다. 부정적인 재정 상태와 정신 건강은 이 분석에서 다루는 민감한 범주에 속합니다.
+
+웹사이트는 해당 페이지에 대한 [Permissions-Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) 헤더 `interest-cohort=()`를 설정하여 [FLoC 계산에서 페이지를 제외할 수 있습니다.](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) 제외되지 않은 페이지의 경우 `document.interestCohort()`가 페이지에서 사용되면 페이지 방문이 브라우저의 FLoC 계산에 포함됩니다. 현재 [FLoC 원본 평가판](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561) 동안 Chrome에서 페이지가 [광고 또는 광고 관련 리소스를 로드](https://github.com/WICG/floc/issues/82)하는 것을 감지하면 페이지도 계산에 포함됩니다. ([Chromium의 광고 태그 지정은](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md) Chrome의 광고 감지 메커니즘이 작동하는 방식을 설명합니다.)
+
+인트라넷 페이지와 같은 개인 IP 주소에서 제공되는 페이지는 FLoC 계산의 일부가 아닙니다.
+
+## FLoC JavaScript API는 어떻게 작동합니까?
+
+{% Aside %} Chrome 89에서 91까지 실행되었던 FLoC 초기 버전의 원본 평가판이 [종료되었습니다](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561) . {% endAside %}
+
+FLoC API는 매우 간단합니다. 집단 `id`와 `version`을 제공하는 객체로 해소되는 promise를 반환하는 단일 메서드입니다.
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+사용 가능한 집단 데이터는 다음과 같습니다.
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+`version` 값을 사용하면 FLoC를 사용하는 사이트에서 집단 ID가 참조하는 브라우저와 FLoC 모델을 알 수 있습니다. 아래에 설명된 대로 `document.interestCohort()`가 반환하는 promise는 `interest-cohort` 권한이 허용되지 않는 모든 프레임을 거부합니다.
+
+## 웹사이트가 FLoC 계산에 포함되지 않도록 선택할 수 있습니까?
+
+`interest-cohort` 권한 정책을 통해 사이트는 집단 계산을 위해 사용자의 사이트 목록에 포함되는 것을 원하지 않는다고 선언할 수 있습니다. 정책은 기본값으로`allow` 됩니다. `document.interestCohort()`에 의해 반환된 promise는 `interest-cohort` 권한이 허용되지 않는 모든 프레임을 거부합니다. 메인 프레임에 `interest-cohort` 권한이 없으면 페이지 방문은 관심 집단 계산에 포함되지 않습니다.
+
+예를 들어 사이트는 다음 HTTP 응답 헤더를 전송하여 모든 FLoC 집단 계산에 포함되지 않도록 할 수 있습니다.
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## 사용자가 사이트에서 브라우저의 FLoC 집단을 가져오는 것을 중지할 수 있습니까?
+
+`chrome://settings/privacySandbox`에서 개인 정보 보호 샌드박스를 비활성화하면 브라우저는 JavaScript를 통해 요청할 때 사용자 집단을 제공하지 않습니다. `document.interestCohort()`에 의해 반환된 promise가 거부합니다.
+
+## 제안을 하거나 피드백을 제공하려면 어떻게 해야 합니까?
+
+API에 대한 의견이 있는 경우 [FLoC Explainer](https://github.com/WICG/floc/issues/new) 저장소에 [문제를 생성](https://github.com/WICG/floc/issues/new)하십시오.
+
+## 더 찾아 보기
+
+- [프라이버시 샌드박스 자세히 알아보기](/digging-into-the-privacy-sandbox/)
+- [FLoC Explainer](https://github.com/WICG/floc)
+- [FLoC 원본 평가판 및 클러스터링](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+- [FLoC API를 위한 집단 평가 알고리즘](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+[Unsplash](https://unsplash.com/photos/I5AYxsxSuVA)에 있는 [Rhys Kentish](https://unsplash.com/@rhyskentish)의 사진.
diff --git a/src/site/content/ko/blog/get-installed-related-apps/index.md b/src/site/content/ko/blog/get-installed-related-apps/index.md
new file mode 100644
index 00000000000..76cb8a62804
--- /dev/null
+++ b/src/site/content/ko/blog/get-installed-related-apps/index.md
@@ -0,0 +1,316 @@
+---
+layout: post
+title: 앱이 설치되어 있습니까? getInstalledRelatedApps()가 알려줄 것입니다!
+subhead: "`getInstalledRelatedApps()` 메서드를 사용하면 웹사이트에서 iOS/Android/데스크톱 앱 또는 PWA가 사용자의 기기에 설치되어 있는지 확인할 수 있습니다."
+authors:
+  - petelepage
+description: "`getInstalledRelatedApps()` 메서드는 웹사이트에서 iOS/Android/데스크톱 앱 또는 PWA가 사용자의 기기에 설치되어 있는지 확인할 수 있게 하는 웹 플랫폼 API입니다."
+date: 2018-12-20
+updated: 2021-09-16
+tags:
+  - blog
+  - capabilities
+hero: image/admin/v9t93rXITPqFe3L0qlTN.jpg
+alt: 앱 패널이 열린 휴대기기
+feedback:
+  - api
+---
+
+## getInstalledRelatedApps() API란 무엇입니까? {: #what }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486" %} <figcaption> Android 앱이 이미 설치되어 있는지 확인하기 위해 <code>getInstalledRelatedApps()</code>를 사용하는 웹사이트.</figcaption></figure>
+
+[`getInstalledRelatedApps()`](https://wicg.github.io/get-installed-related-apps/spec/)를 사용하면 *여러분*의 페이지에서 *여러분*의 모바일, 데스크톱 앱 또는 경우에 따라서 PWA가 사용자 장치에 설치되었는지 확인하고 그러한 경우 사용자 경험을 최적화 할 수 있습니다.
+
+예를 들어 앱이 이미 설치된 경우 다음을 할 수 있습니다.
+
+- 사용자를 제품 마케팅 페이지에서 앱으로 직접 리디렉션합니다.
+- 중복 알림을 방지하기 위해 다른 앱의 알림과 같은 일부 기능을 중앙 집중화합니다.
+- 다른 앱이 이미 설치된 경우 PWA [설치](/customize-install/)를 홍보하지 않습니다.
+
+`getInstalledRelatedApps()` API를 사용하려면 앱에 사이트에 대해 알려준 다음 사이트에 앱에 대해 알려야 합니다. 둘 사이의 관계를 정의하면 앱이 설치되었는지 확인할 수 있습니다.
+
+### 확인할 수 있는 지원 앱 유형
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>앱 유형</th>
+        <th>확인 가능 버전</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#check-android">Android 앱</a></td>
+        <td>Android 전용<br> Chrome 80 이상</td>
+      </tr>
+      <tr>
+        <td><a href="#check-windows">Windows(UWP) 앱</a></td>
+        <td>Windows 전용<br> Chrome 85 이상<br> Edge 85 이상</td>
+      </tr>
+      <tr>
+        <td>
+<br><a href="#check-pwa-in-scope">동일한 범위</a> 또는 <a href="#check-pwa-out-of-scope">다른 범위에 설치된</a> PWA.</td>
+        <td>Android 전용<br> Chrome 84 이상</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} 는 `getInstalledRelatedApps()` API는 *여러분의의* 응용 프로그램이 설치되어 있는지 확인할 수 있습니다. 설치된 모든 앱의 목록을 얻거나 다른 타사 앱이 설치되어 있는지 확인할 수 없습니다. {% endAside %}
+
+<!--  Android App -->
+
+## Android 앱이 설치되어 있는지 확인 {: #check-android }
+
+웹사이트에서 Android 앱이 설치되어 있는지 확인할 수 있습니다.
+
+{% Compare 'better', 'Supported on' %} Android: Chrome 80 이상 {% endCompare %}
+
+### 웹사이트에 대해 Android 앱에 알리기
+
+먼저 [Digital Asset Links 시스템을](https://developers.google.com/digital-asset-links/v1/getting-started) 사용하여 웹사이트와 Android 애플리케이션 간의 관계를 정의하도록 Android 앱을 업데이트해야 합니다. 이렇게 하면 여러분의 웹사이트만 여러분의 Android 앱이 설치되어 있는지 확인할 수 있습니다.
+
+Android 앱의 `AndroidManifest.xml`에 `asset_statements` 항목을 추가합니다.
+
+```xml
+<manifest>
+  <application>
+   …
+    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
+   …
+  </application>
+</manifest>
+```
+
+그런 다음, `strings.xml`에 다음 자산 설명을 추가하여 `site`를 도메인으로 업데이트하십시오. 이스케이프 문자를 포함해야 합니다.
+
+```xml
+<string name="asset_statements">
+  [{
+    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
+    \"target\": {
+      \"namespace\": \"web\",
+      \"site\": \"https://example.com\"
+    }
+  }]
+</string>
+```
+
+완료되면 업데이트된 Android 앱을 Play 스토어에 게시합니다.
+
+### Android 앱에 대해 웹사이트에 알리기
+
+그런 다음 페이지에 [웹 앱 매니페스트](/add-manifest/)를 추가하여 Android 앱에 대해 웹사이트에 알립니다. `platform` 및 `id`를 포함하여 앱에 대한 세부 정보를 제공하는 배열인 `related_applications` 속성이 포함되어야 합니다.
+
+- `platform`은 `play`이어야 합니다
+- `id` 는 Android 앱의 GooglePlay 애플리케이션 ID입니다
+
+```json
+{
+  "related_applications": [{
+    "platform": "play",
+    "id": "com.android.chrome",
+  }]
+}
+```
+
+### 앱이 설치되어 있는지 확인
+
+마지막으로 [`navigator.getInstalledRelatedApps()`](#use)를 호출하여 Android 앱이 설치되었는지 확인합니다.
+
+[데모](https://get-installed-apps.glitch.me/) 사용해보기
+
+<!--  Windows App -->
+
+## Windows(UWP) 앱이 설치되어 있는지 확인 {: #check-windows }
+
+웹 사이트는 Windows 앱(UWP를 사용하여 빌드)이 설치되어 있는지 확인할 수 있습니다.
+
+{% Compare 'better', 'Supported on' %} Windows: Chrome 85 이상, Edge 85 이상 {% endCompare %}
+
+### 웹 사이트에 대해 Windows 앱에 알리기
+
+[URI 처리기](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking)를 사용하여 웹 사이트와 Windows 애플리케이션 간의 관계를 정의하려면 Windows 앱을 업데이트해야 합니다. 이렇게 하면 여러분의 웹 사이트만 여러분의 Windows 앱이 설치되어 있는지 확인할 수 있습니다.
+
+앱의 매니페스트 파일 `Package.appxmanifest` `Windows.appUriHandler` 확장 등록을 추가합니다. 예를 들어 웹사이트 주소가 `example.com` 인 경우 앱의 매니페스트에 다음 항목을 추가합니다.
+
+```xml
+<Applications>
+  <Application Id="App" ... >
+      ...
+      <Extensions>
+         <uap3:Extension Category="windows.appUriHandler">
+          <uap3:AppUriHandler>
+            <uap3:Host Name="example.com" />
+          </uap3:AppUriHandler>
+        </uap3:Extension>
+      </Extensions>
+  </Application>
+</Applications>
+```
+
+`<Package>` 속성에 [`uap3` 네임스페이스](https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/uapmanifestschema/element-uap3-extension-manual#examples) 를 추가해야 할 수도 있습니다.
+
+`windows-app-web-link`라는 JSON 파일(`.json` 파일 확장자 제외)을 만들고 앱의 패키지 제품군 이름을 제공합니다. 해당 파일을 서버 루트나 `/.well-known/` 디렉토리에 두십시오. 앱 매니페스트 디자이너의 패키징 섹션에서 패키지 패밀리 이름을 찾을 수 있습니다.
+
+```json
+[{
+  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
+  "paths": [ "*" ]
+}]
+```
+
+URI 처리기 설정에 대한 자세한 내용은 [앱 URL 처리기를 사용하여 웹 사이트용 앱 활성화](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking)를 참조하세요.
+
+### 웹 사이트에 Windows 앱에 대해 알리기
+
+그런 다음 페이지에 [웹 앱 매니페스트](/add-manifest/)를 추가하여 Windows 앱에 대해 웹사이트에 알립니다. `platform` 및 `id` 포함하여 앱에 대한 세부 정보를 제공하는 배열인 `related_applications` 속성이 포함되어야 합니다.
+
+- `platform`은 `windows`이어야 합니다
+- `id`는 `Package.appxmanifest`의 `<Application>` `Id` 값이 추가된 앱의 패키지 패밀리 이름입니다.
+
+```json
+{
+  "related_applications": [{
+    "platform": "windows",
+    "id": "MyApp_9jmtgj1pbbz6e!App",
+  }]
+}
+```
+
+### 앱이 설치되어 있는지 확인
+
+마지막으로 [`navigator.getInstalledRelatedApps()`](#use)를 호출하여 Windows 앱이 설치되었는지 확인합니다.
+
+<!--  PWA - in scope -->
+
+## PWA가 이미 설치되어 있는지 확인(범위 내) {: #check-pwa-in-scope }
+
+PWA가 이미 설치되어 있는지 확인할 수 있습니다. 이 경우 요청하는 페이지는 웹 앱 매니페스트의 범위에 의해 정의된 대로 동일한 도메인에 있어야 하고 PWA [범위](/add-manifest/#scope) 내에 있어야 합니다.
+
+{% Compare 'better', 'Supported on' %} Android: Chrome 84 이상 {% endCompare %}
+
+### 자신에 대해 PWA에 알리십시오
+
+[PWA 웹 앱 매니페스트](/add-manifest/)에 `related_applications` 항목을 추가하여 PWA에 대해 알립니다.
+
+- `platform`은 `webapp`이어야 합니다
+- `url`은 PWA의 웹 앱 매니페스트에 대한 전체 경로입니다
+
+```json
+{
+  …
+  "scope": "/",
+  "start_url": "/",
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://example.com/manifest.json",
+  }],
+  …
+}
+```
+
+### PWA가 설치되어 있는지 확인
+
+마지막으로 PWA [범위](/add-manifest/#scope) 내에서 [`navigator.getInstalledRelatedApps()`](/add-manifest/#scope)를 호출하여 설치되었는지 확인합니다. `getInstalledRelatedApps()`가 PWA 범위 밖에서 호출되면 false를 반환합니다. 자세한 내용은 다음 섹션을 참조하십시오.
+
+[데모](https://gira-same-domain.glitch.me/pwa/) 사용해보기
+
+<!--  PWA - NOT in scope -->
+
+## PWA가 설치되어 있는지 확인(범위 외) {: #check-pwa-out-of-scope }
+
+페이지가 PWA [범위](/add-manifest/#scope)를 벗어나더라도 웹사이트에서 PWA가 설치되어 있는지 확인할 수 있습니다. `/landing/`에서 제공되는 방문 페이지는 `/pwa/`에서 제공되는 PWA가 설치되어 있는지 또는 방문 페이지가 `www.example.com`에서 제공되고 PWA가 `app.example.com`에서 제공되는지 확인할 수 있습니다.
+
+{% Compare 'better', 'Supported on' %} Android: Chrome 84 이상 {% endCompare %}
+
+### 웹사이트에 대해 PWA에 알리세요
+
+먼저 PWA가 제공되는 서버에 디지털 자산 링크를 추가해야 합니다. 이렇게 하면 웹사이트와 PWA 간의 관계를 정의하는 데 도움이 되며 여러분의 웹사이트만 여러분의 PWA가 설치되어 있는지 확인할 수 있습니다.
+
+`assetlinks.json` 파일을 PWA가 있는 도메인의 [`/.well-known/`](https://tools.ietf.org/html/rfc5785) 디렉터리에 추가합니다(예: `app.example.com`). `site` 속성에서 검사를 수행할 웹 앱 매니페스트의 전체 경로를 제공합니다(PWA의 웹 앱 매니페스트 아님).
+
+```json
+// Served from https://app.example.com/.well-known/assetlinks.json
+[
+  {
+    "relation": ["delegate_permission/common.query_webapk"],
+    "target": {
+      "namespace": "web",
+      "site": "https://www.example.com/manifest.json"
+    }
+  }
+]
+```
+
+{% Aside %} `assetlinks.json` 파일을 생성할 때 파일 이름을 다시 확인하세요. 저는 디버깅에 많은 시간을 낭비하다가 파일 이름에 's'를 추가했다는 사실을 깨달았습니다. {% endAside %}
+
+### 웹사이트에 PWA에 대해 알리세요
+
+그런 다음 페이지에 [웹 앱 매니페스트](/add-manifest/)를 추가하여 PWA 앱에 대해 웹사이트에 알립니다. `platform` 및 `url`을 포함하여 PWA에 대한 세부 정보를 제공하는 배열인 `related_applications` 속성이 포함되어야 합니다.
+
+- `platform`은 `webapp`이어야 합니다
+- `url` 은 PWA의 웹 앱 매니페스트에 대한 전체 경로입니다
+
+```json
+{
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://app.example.com/manifest.json",
+  }]
+}
+```
+
+### PWA가 설치되어 있는지 확인
+
+마지막으로 [`navigator.getInstalledRelatedApps()`](#use)를 호출하여 PWA가 설치되었는지 확인합니다.
+
+[데모](https://gira-same-domain.glitch.me/) 사용해보기
+
+<!--  Use the API-->
+
+## getInstalledRelatedApps() 호출 {: #use }
+
+`navigator.getInstalledRelatedApps()`를 호출하면 사용자 장치에 설치된 앱 배열로 해결되는 약속이 반환됩니다.
+
+```js
+const relatedApps = await navigator.getInstalledRelatedApps();
+relatedApps.forEach((app) => {
+  console.log(app.id, app.platform, app.url);
+});
+```
+
+사이트에서 지나치게 광범위한 자체 앱 세트를 테스트하지 못하도록 웹 앱 매니페스트에 선언된 처음 세 개의 앱만 고려됩니다.
+
+대부분의 다른 강력한 웹 API와 마찬가지로 `getInstalledRelatedApps()` **API는 HTTPS를** 통해 제공되는 경우에만 사용할 수 있습니다.
+
+## 아직 질문이 있으신가요? {: #questions }
+
+아직 질문이 있으신가요? [StackOverflow에서 `getInstalledRelatedApps` 태그를](https://stackoverflow.com/search?q=getinstalledrelatedapps) 확인하여 비슷한 질문이 있는 사람이 있는지 확인하세요. 그렇지 않은 경우 거기에서 [질문](https://stackoverflow.com/questions/tagged/progressive-web-apps)을 하되 [`progressive-web-apps`](https://stackoverflow.com/questions/tagged/progressive-web-apps) 태그를 지정하세요. 저희 팀은 해당 태그를 자주 모니터링하고 귀하의 질문에 답변하려고 합니다.
+
+## 피드백 {: #feedback }
+
+Chrome 구현에서 버그를 찾으셨나요? 아니면 구현이 사양과 다른가요?
+
+- [https://new.crbug.com][에서] 버그를 [신고하세요](https://bugs.chromium.org/p/chromium/issues/entry?components=Mobile%3EWebAPKs). 가능한 한 많은 세부 정보를 포함하고 버그를 재현하기 위한 간단한 지침을 제공하고 **구성 요소** 상자에 `Mobile>WebAPKs`를 입력합니다. [Glitch](https://glitch.com) 는 빠르고 쉬운 재현을 공유하는 데 유용합니다.
+
+## API에 대한 지원 표시
+
+`getInstalledRelatedApps()`를 사용할 계획이십니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 힘이 됩니다.
+
+- [WICG Discourse 스레드](https://discourse.wicg.io/t/proposal-get-installed-related-apps-api/1602)에서 API 사용 계획을 공유하세요.
+- [@ChromiumDev](https://twitter.com/chromiumdev)으로 해시태그  [`#getInstalledRelatedApps`](https://twitter.com/search?q=%23getInstalledRelatedApps&src=typed_query&f=live)를 포함한 트윗을 보내서 어디에서 어떻게 활용하고 있는지 알려주세요.
+
+## 유용한 링크 {: #helpful }
+
+- [`getInstalledRelatedApps()` API에 대한 공개 설명](https://github.com/WICG/get-installed-related-apps/blob/main/EXPLAINER.md)
+- [사양 초안](https://wicg.github.io/get-installed-related-apps/spec/)
+- [버그 추적](https://bugs.chromium.org/p/chromium/issues/detail?id=895854)
+- [ChromeStatus.com 항목](https://www.chromestatus.com/feature/5695378309513216)
+- Blink 구성 요소: [`Mobile>WebAPKs`](https://chromestatus.com/features#component%3A%20Mobile%3EWebAPKs)
+
+## 감사의 말
+
+Windows 앱 테스트에 대한 세부 정보를 제공한 Microsoft의 Sunggook Chu와 Chrome 세부 정보에 대한 도움을 준 Rayan Kanso에게 특별히 감사드립니다.
diff --git a/src/site/content/ko/blog/how-to-file-a-good-bug/index.md b/src/site/content/ko/blog/how-to-file-a-good-bug/index.md
new file mode 100644
index 00000000000..75108ebc0ed
--- /dev/null
+++ b/src/site/content/ko/blog/how-to-file-a-good-bug/index.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: 양호한 브라우저 버그를 신고하는 방법
+subhead: 브라우저에서 발견한 문제에 대해 브라우저 공급업체에 알리는 것은 웹 플랫폼 개선에 필수적인 부분입니다!
+authors:
+  - robertnyman
+  - petelepage
+date: 2020-06-15
+updated: 2020-06-15
+description: 브라우저, 특정 기기 또는 플랫폼에서 발견한 문제를 브라우저 공급업체에 알리는 것은 웹 플랫폼 개선에 필수적인 부분입니다!
+tags:
+  - blog
+---
+
+양호한 버그를 신고하는 것은 어렵지 않지만 약간의 작업이 필요합니다. 목표는 고장 난 것을 쉽게 찾고, 근본 원인을 파악하고, 가장 중요한 점으로는 그것을 고칠 방법을 찾는 것입니다. 빠르게 진행되는 버그는 분명히 예상되는 동작으로 쉽게 재현되는 경향이 있습니다.
+
+## 버그인지 확인
+
+첫 번째 단계는 "올바른" 동작이 무엇인지 파악하는 것입니다.
+
+### 올바른 동작은 무엇입니까?
+
+[MDN](https://developer.mozilla.org/)에서 관련 API 문서를 확인하거나 관련 사양을 찾아보세요. 이 정보는 실제로 손상된 API, 손상된 위치, 예상 동작을 결정하는 데 도움이 될 수 있습니다.
+
+### 다른 브라우저에서 작동합니까?
+
+브라우저 간에 다른 동작은 일반적으로 상호 운용성 문제로 더 높은 우선순위를 가지는데, 특히 버그가 포함된 브라우저가 이상한 경우에 그렇습니다. [BrowserStack](https://www.browserstack.com/)과 같은 도구를 사용하여 최신 버전의 Chrome, Firefox, Safari 및 Edge에서 테스트해보세요.
+
+가능하다면 사용자 에이전트 스니핑으로 인해 페이지가 의도적으로 다르게 동작하지 않는지 확인하세요. Chrome DevTools에서 [`User-Agent` 문자열을 다른 브라우저로 설정](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/)해보세요.
+
+### 최근 릴리스에서 중단되었습니까?
+
+과거에는 예상대로 작동했지만, 최근 브라우저 릴리스에서 중단되었습니까? 이러한 "회귀"에 대해서는 특히 작동한 버전 번호와 실패한 버전을 제공하는 경우 훨씬 더 빠르게 조치를 취할 수 있습니다. [BrowserStack](https://www.browserstack.com/)과 같은 도구를 사용하면 이전 브라우저 버전을 쉽게 확인할 수 있고 [bisect-builds 도구](https://www.chromium.org/developers/bisect-builds-py)(Chromium용)를 사용하면 변경 사항을 매우 효율적으로 검색할 수 있습니다.
+
+문제가 회귀이고 이를 재현할 수 있는 경우 일반적으로 근본 원인을 빠르게 찾아 수정할 수 있습니다.
+
+### 다른 사람들도 같은 문제를 보고 있습니까?
+
+문제가 발생할 경우 다른 개발자도 같은 문제를 겪고 있을 가능성이 큽니다. 먼저 [Stack Overflow](http://stackoverflow.com/)에서 버그를 검색해보세요. 그러면 추상적인 문제를 손상된 특정 API로 변환하는 데 도움이 될 수 있으며, 버그가 수정될 때까지 단기적인 해결 방법을 찾는 데 도움이 될 수 있습니다.
+
+## 이전에 보고된 적이 있습니까?
+
+버그가 무엇인지 파악했으면 브라우저 버그 데이터베이스를 검색하여 이미 신고된 버그인지 확인할 차례입니다.
+
+- Chromium 기반 브라우저: [https://crbug.com](https://crbug.com/)
+- Firefox: [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Safari 및 WebKit 기반 브라우저: [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+문제를 설명하는 기존 버그를 찾으면 버그에 별표를 표시하거나 즐겨찾기에 추가하거나 댓글을 달아 지원을 추가하세요. 또한 많은 사이트에서 자신을 CC 목록에 추가하고 버그 변경 시 업데이트를 받을 수 있습니다.
+
+버그에 대해 설명하기로 결정했다면 버그가 웹사이트에 미치는 영향에 대한 정보를 포함하세요. 버그 추적기는 일반적으로 모든 댓글에 대해 이메일을 보내므로 "+1" 스타일의 댓글을 추가하지 마세요.
+
+## 버그 신고
+
+이전에 신고된 적 없는 버그인 경우 브라우저 공급업체에 이에 대해 알려야 합니다.
+
+### 최소화된 테스트 케이스 만들기 {: #minified-test-case }
+
+Mozilla에는 [최소화된 테스트 케이스를 만드는 방법](https://developer.mozilla.org/docs/Mozilla/QA/Reducing_testcases)에 대한 훌륭한 기사가 있습니다. 긴 내용을 짧게 요약하자면, 문제에 대한 설명은 훌륭한 시작이지만 문제를 보여주는 버그에 연결된 데모를 제공하는 것보다 나은 방법은 없다는 내용입니다. 빠른 진행 가능성을 최대화하려면 예제에 문제를 보여주는 데 필요한 최소한의 가능한 코드를 포함해야 합니다. 최소한의 코드 샘플은 버그가 수정될 확률을 높이기 위해 할 수 있는 가장 중요한 사항입니다.
+
+다음은 테스트 케이스 최소화를 위한 몇 가지 팁입니다.
+
+- 웹 페이지를 다운로드하고 [`<base href="https://original.url">`](https://developer.mozilla.org/docs/Web/HTML/Element/base)을 추가하고 버그가 로컬에 존재하는지 확인하세요. URL이 HTTPS를 사용하는 경우 라이브 HTTPS 서버가 필요할 수 있습니다.
+- 가능한 한 많은 브라우저의 최신 빌드에서 로컬 파일을 테스트하세요.
+- 모든 것을 하나의 파일로 압축해보세요.
+- 버그가 사라질 때까지 코드를 제거하세요(불필요하다는 사실을 알고 있는 코드부터 시작).
+- 버전 제어를 사용하여 작업을 저장하고 잘못된 작업을 실행 취소할 수 있습니다.
+
+#### 축소된 테스트 케이스 호스팅
+
+축소된 테스트 케이스를 호스팅할 좋은 장소를 찾고 있다면 다음과 같은 몇 가지 좋은 장소를 사용할 수 있습니다.
+
+- [Glitch](https://glitch.com)
+- [JSBin](https://jsbin.com)
+- [JSFiddle](https://jsfiddle.net)
+- [CodePen](https://codepen.io)
+
+이들 중 여러 사이트에서는 콘텐츠를 iframe으로 표시하므로 기능이나 버그가 다르게 작동할 수 있습니다.
+
+## 문제 제기
+
+최소화된 테스트 케이스가 있으면 해당 버그를 신고할 준비가 된 것입니다. 올바른 버그 추적 사이트로 이동하여 새 문제를 만드세요.
+
+- Chromium 기반 브라우저 - [https://crbug.com/new](https://crbug.com/new)
+- Firefox - [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Safari 및 WebKit 기반 브라우저 - [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+### 문제에 대한 명확한 설명과 문제를 재현하는 데 필요한 단계를 제공합니다
+
+첫째, 엔지니어가 문제가 무엇인지 신속하게 이해하고 문제를 분류하는 데 도움이 되도록 명확히 설명합니다.
+
+```text
+When installing a PWA using the `beforeinstallprompt.prompt()`, the
+`appinstalled` event fires before the call to `prompt()` resolves.
+```
+
+그런 다음 문제를 재현하는 데 필요한 자세한 단계를 제공합니다. 여기에서 [축소된 테스트 케이스](#minified-test-case)가 등장합니다.
+
+```text
+What steps will reproduce the problem?
+1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
+   console tab.
+2. Click the Install button in the page, you might need to interact with
+   the page a bit before it becomes enabled.
+3. Click Install on the browser modal install confirmation.
+```
+
+마지막으로 *실제* 결과와 *예상* 결과를 설명합니다.
+
+```text
+What is the actual result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL: Success (logged when `appinstalled` event fired)
+2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+
+What is the expected result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+2. INSTALL: Success (logged when `appinstalled` event fired)
+```
+
+자세한 내용은 MDN에서 [버그 보고서 작성 지침](https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines)을 확인하세요.
+
+#### 보너스: 문제의 스크린샷 또는 스크린캐스트 추가
+
+필수 사항은 아니지만, 경우에 따라 문제의 스크린샷이나 스크린캐스트를 추가하는 것이 도움이 될 수 있습니다. 이는 버그를 재현하기 위해 몇몇 이상한 단계가 필요할 수 있는 경우에 특히 유용합니다. 스크린캐스트나 스크린샷에서 어떤 일이 일어나는지 볼 수 있으면 도움이 될 수 있을 때가 많습니다.
+
+### 환경 세부 정보 포함
+
+일부 버그는 특정 운영 체제나 특정한 종류의 디스플레이(예: 낮은 dpi 또는 높은 dpi)에서만 재현할 수 있습니다. 사용한 테스트 환경에 대한 세부 정보를 포함해야 합니다.
+
+### 버그 제출
+
+마지막으로 버그를 제출합니다. 그런 다음 버그에 대한 응답이 있는지 이메일을 계속 주시하세요. 일반적으로 조사 도중과 버그 수정 시, 엔지니어가 추가 질문을 할 수도 있고 문제 재현에 어려움이 있는 경우 연락할 수도 있습니다.
diff --git a/src/site/content/ko/blog/how-to-use-local-https/index.md b/src/site/content/ko/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..5620e9fb9a1
--- /dev/null
+++ b/src/site/content/ko/blog/how-to-use-local-https/index.md
@@ -0,0 +1,270 @@
+---
+title: 로컬 개발에 HTTPS를 사용하는 방법
+subhead: 때때로 HTTPS를 사용하여 로컬 개발 사이트를 실행해야 합니다. 이를 안전하고 신속하게 수행하기 위한 도구 및 팁.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %} 대부분의 경우 `http://localhost`는 필요한 작업을 수행합니다. 브라우저에서는 대부분 HTTPS 🔒처럼 작동합니다. 배포된 HTTP 사이트에서 작동하지 않는 일부 API가 `http://localhost`에서 작동하기 때문입니다.
+
+이것이 의미하는 바는 사용자 지정 호스트 이름 또는 브라우저 간 보안 쿠키와 같은 **특별한 경우에만** 로컬에서 HTTPS를 사용해야 한다는 것입니다([로컬 개발을 위해 HTTPS를 사용하는 경우](/when-to-use-local-https) 참조). 해당하는 경우 계속 읽으십시오! {% endAside %}
+
+*이 게시물에서 `localhost`에 대한 진술은 `127.0.0.1` 및 `[::1]`에도 유효합니다. 둘 다 "루프백 주소"라 하는 로컬 컴퓨터 주소를 설명하기 때문입니다. 또한 이를 간소화하기 위해 포트 번호를 지정하지 않습니다.**따라서 `http://localhost`가 표시될 경우, `http://localhost:{PORT}` 또는 `http://127.0.0.1:{PORT}`로 읽습니다.*
+
+프로덕션 웹 사이트에서 HTTPS를 사용하는 경우 로컬 개발 사이트가 **HTTPS 사이트처럼** 작동하기를 원합니다(프로덕션 웹 사이트에서 HTTPS를 사용하지 않는 경우 [HTTPS로 전환하는 것을 우선 순위로 지정](/why-https-matters/)). 대부분의 경우 `http://localhost`가 **HTTPS 사이트처럼** 작동할 것으로 여길 수 있습니다. 그러나 [일부 경우에서](/when-to-use-local-https) HTTPS를 사용하여 로컬에서 사이트를 실행해야 합니다. 이 작업을 수행하는 방법을 살펴보겠습니다.
+
+**⏩ 빠른 지침을 찾고 있습니까, 아니면 전에 여기에 와본 적이 있습니까? [Cheatsheet](#using-mkcert-cheatsheet)로 건너뛰십시오.**
+
+## mkcert를 사용하여 HTTPS로 로컬에서 사이트 실행(권장)
+
+로컬 개발 사이트에서 HTTPS를 사용하고 `https://localhost` 또는 `https://mysite.example`(사용자 지정 호스트 이름)에 액세스하려면 [TLS 인증서](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate)가 필요합니다. 그러나 브라우저는 어떤 인증서도 유효한 것으로 간주하지 않습니다. 인증서는 신뢰할 수 있는 **[인증 기관(CA)](https://en.wikipedia.org/wiki/Certificate_authority)**이라 부르는 브라우저가 신뢰하는 실체에 의해 **서명**되어야 합니다.
+
+사용자가 할 일은 인증서를 생성하고 장치와 브라우저가 **로컬로 신뢰**하는 CA를 사용하여 서명하는 것입니다. [mkcert](https://github.com/FiloSottile/mkcert)는 몇 가지 명령으로 이를 수행하는 데 도움이 되는 도구입니다. 작동 방법은 다음과 같습니다.
+
+- HTTPS를 사용하여 브라우저에서 로컬로 실행되는 사이트를 열면 브라우저가 로컬 개발 서버의 인증서를 확인합니다.
+- 인증서가 mkcert 생성 인증 기관에 의해 서명되었음을 확인하면 브라우저는 해당 인증서가 신뢰할 수 있는 인증 기관으로 등록되었는지 확인합니다.
+- mkcert는 신뢰할 수 있는 기관으로 등재되어 있으므로 브라우저가 인증서를 신뢰하고 HTTPS 연결을 만듭니다.
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="mkcert 작동 방식 다이어그램.", width="800", height="787" %} <figcaption>mkcert 작동 방식 다이어그램.</figcaption></figure>
+
+mkcert(및 유사 도구)는 다음과 같은 몇 가지 이점을 제공합니다.
+
+- mkcert는 **브라우저가 유효한 인증서로 간주하는 것과 호환되는** 인증서를 생성하는 데 특화되어 있습니다. 요구 사항 및 모범 사례에 맞게 계속 업데이트됩니다. 이러한 이유로 올바른 인증서를 생성하기 위해 복잡한 구성이나 인수로 mkcert 명령을 실행할 필요가 없습니다!
+- mkcert는 교차 플랫폼 도구입니다. 팀원 누구나 사용할 수 있습니다.
+
+mkcert는 로컬 개발을 위한 TLS 인증서 생성에 권장하는 도구입니다. [다른 옵션](#running-your-site-locally-with-https-other-options)도 확인할 수 있습니다.
+
+많은 운영 체제에는 [openssl](https://www.openssl.org/)과 같은 인증서를 생성하는 라이브러리가 포함되어 있을 수 있습니다. mkcert 및 이와 유사한 도구와 달리 이러한 라이브러리는 올바른 인증서를 일관되게 생성하지 않을 수 있고 복잡한 명령을 실행해야 할 수 있으며 반드시 교차 플랫폼일 필요는 없습니다.
+
+{% Aside 'gotchas' %} 우리가 이 게시물에서 관심을 갖고 있는 mkcert는 [이것](https://www.npmjs.com/package/mkcert)이 아니라 [이것](https://github.com/FiloSottile/mkcert)입니다. {% endAside %}
+
+### 주의
+
+{% Aside 'caution' %}
+
+- `mkcert -install` 실행 시 `rootCA-key.pem` mkcert가 자동으로 생성하는 파일을 내보내거나 공유하지 마십시오. **이 파일을 장악한 공격자는 사용자가 방문할 수 있는 모든 사이트에 대해 경로 내 공격을 생성할 수 있습니다** . 공격자는 사용자 컴퓨터에서 은행, 의료 서비스 제공자 또는 소셜 네트워크와 같은 모든 사이트에 대한 보안 요청을 가로챌 수 있습니다. `rootCA-key.pem`이 안전한 위치에 있는지 확인해야 하는 경우 `mkcert -CAROOT`을 실행하십시오.
+- **개발 목적**으로만 mkcert를 사용하고, 확장하여 최종 사용자에게 mkcert 명령을 실행하도록 요청하지 마십시오.
+- 개발 팀: 팀의 모든 구성원은 mkcert를 **별도로** 설치하고 실행해야 합니다(CA 및 인증서를 저장 및 공유하지 않음).
+
+{% endAside %}
+
+### 설정
+
+1. mkcert를 설치합니다(한 번만).
+
+    운영 체제에 mkcert를 설치하는 [지침](https://github.com/FiloSottile/mkcert#installation)을 따르십시오. 예를 들어 macOS에서는 다음 지침을 따르십시오.
+
+    ```bash
+    brew install mkcert
+    brew install nss # if you use Firefox
+    ```
+
+2. 로컬 루트 CA에 mkcert를 추가합니다.
+
+    터미널에서 다음 명령을 실행합니다.
+
+    ```bash
+    mkcert -install
+    ```
+
+    그러면 로컬 인증 기관(CA)이 생성됩니다. mkcert 생성 로컬 CA는 기기에서 **로컬**로만 신뢰할 수 있습니다.
+
+3. mkcert에서 서명한 사이트에 대한 인증서를 생성합니다.
+
+    터미널에서 사이트의 루트 디렉터리 또는 인증서를 배치할 디렉터리로 이동합니다.
+
+    그런 다음, 다음을 실행합니다.
+
+    ```bash
+    mkcert localhost
+    ```
+
+    `mysite.example`과 같은 사용자 지정 호스트 이름을 사용하는 경우 다음을 실행합니다.
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    위의 명령은 다음과 같은 두 가지 작업을 수행합니다.
+
+    - 지정한 호스트 이름에 대한 인증서를 생성합니다.
+    - mkcert(2단계에서 로컬 CA로 추가)가 이 인증서에 서명하도록 합니다.
+
+    이제 인증서가 준비되었으며 브라우저가 로컬로 신뢰하는 인증 기관에 의해 서명되었습니다. 거의 완료되었지만 서버가 아직 인증서에 대해 알지 못합니다!
+
+4. 서버를 구성합니다.
+
+    이제 서버에 HTTPS를 사용하고(개발 서버는 기본적으로 HTTP를 사용하는 경향이 있으므로) 방금 전에 생성한 TLS 인증서를 사용하도록 지시해야 합니다.
+
+    이 작업을 수행하는 방법은 서버에 따라 다릅니다. 몇 가지 예:
+
+    **👩🏻‍💻 노드 사용:**
+
+    `server.js` (`{PATH/TO/CERTIFICATE...}` 및 `{PORT}` 대체):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻 [http 서버](https://www.npmjs.com/package/http-server) 사용:**
+
+    다음과 같이 서버를 시작합니다(`{PATH/TO/CERTIFICATE...}` 대체).
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S`는 HTTPS로 서버를 실행하고 `-C`는 인증서를 설정하고 `-K`는 키를 설정합니다.
+
+    **👩🏻‍💻 React 개발 서버 사용:**
+
+    `package.json`을 다음과 같이 편집하고 `{PATH/TO/CERTIFICATE...}`를 대체합니다.
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    예를 들어, 다음과 같이 사이트의 루트 디렉터리에 있는 `localhost`에 대한 인증서를 생성한 경우:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    `start` 스크립트는 다음과 같이 표시되어야 합니다.
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 다른 예:**
+
+    - [앵귤러 개발 서버](https://angular.io/cli/serve)
+    - [파이썬](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨ 작업을 완료했습니다! 브라우저에서 `https://localhost` 또는 `https://mysite.example`을 엽니다. HTTPS를 사용하여 로컬에서 사이트를 실행하고 있습니다. 브라우저가 mkcert를 로컬 인증 기관으로 신뢰하기 때문에 브라우저 경고가 표시되지 않습니다.
+
+{% Aside %} 서버가 HTTPS에 대해 다른 포트를 사용할 수 있습니다. {% endAside %}
+
+### mkcert 사용: cheatsheet
+
+{% Details %} {% DetailsSummary %} mkcert 요약{% endDetailsSummary %}
+
+HTTPS로 로컬 개발 사이트를 실행하려면:
+
+1. mkcert를 설정합니다.
+
+    아직 설정하지 않은 경우 예를 들어 macOS에 mkcert를 설치합니다.
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    Windows 및 Linux 지침은 [mkcert 설치](https://github.com/FiloSottile/mkcert#installation)를 확인하십시오.
+
+    그런 다음 로컬 인증 기관을 만듭니다.
+
+    ```bash
+    mkcert -install
+    ```
+
+2. 신뢰할 수 있는 인증서를 만듭니다.
+
+    ```bash
+    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
+    ```
+
+    이렇게 하면 유효한 인증서(`mkcert`가 자동으로 서명)가 생성됩니다.
+
+3. HTTPS와 2단계에서 생성한 인증서를 사용하도록 개발 서버를 구성합니다.
+
+4. ✨ 작업을 완료했습니다! 이제 경고 없이 브라우저에서 `https://{YOUR HOSTNAME}`에 액세스할 수 있습니다.
+
+{% Aside 'caution' %}
+
+**개발 목적**으로만 이 작업을 수행하고 `rootCA-key.pem` 파일을 **내보내거나 공유**하지 마십시오(이 파일이 안전한지 확인하기 위해 이 파일의 위치를 알아야 하는 경우 {`mkcert -CAROOT` 실행).
+
+{% endAside %}
+
+{% endDetails %}
+
+## HTTPS를 사용하여 로컬에서 사이트 실행: 기타 옵션
+
+### 자체 서명 인증서
+
+mkcert와 같은 로컬 인증 기관을 사용하지 않고 대신 **인증서에 직접 서명**할 수도 있습니다.
+
+이 접근 방식의 몇 가지 함정에 주의하십시오.
+
+- 브라우저는 사용자를 인증 기관으로 신뢰하지 않으며 수동으로 우회해야 하는 경고를 표시합니다. Chrome에서는 `#allow-insecure-localhost` 플래그를 사용하여 `localhost`에서 이 경고를 자동으로 우회할 수 있습니다. 이렇기 때문에 약간 진부한 느낌이 듭니다.
+- 안정적이지 않은 네트워크에서 작업하는 경우 안전하지 않습니다.
+- 자체 서명된 인증서는 신뢰할 수 있는 인증서와 정확히 같은 방식으로 작동하지 않습니다.
+- mkcert와 같은 로컬 CA를 사용하는 것보다 반드시 더 쉽거나 빠른 것은 아닙니다.
+- 브라우저 컨텍스트에서 이 기술을 사용하지 않는 경우 서버에 대한 인증서 확인을 비활성화해야 할 수 있습니다. 프로덕션 과정에서 다시 활성화하지 않으면 위험할 수 있습니다.
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="자체 서명된 인증서가 사용될 때 브라우저에 표시되는 경고 스크린샷.", width="800", height="598" %}<figcaption>자체 서명된 인증서가 사용될 때 브라우저에 경고가 표시됩니다.</figcaption></figure>
+
+{% Aside %} 인증서를 지정하지 않으면 [React](https://create-react-app.dev/docs/using-https-in-development/) 및 [Vue](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve)의 개발 서버 HTTPS 옵션이 내부적으로 자체 서명된 인증서를 생성합니다. 이 방법은 빠르지만 브라우저 경고가 표시되고 위에 나열된 자체 서명 인증서와 관련된 다른 함정이 발생합니다. 다행히 프론트엔드 프레임워크의 내장 HTTPS 옵션을 **사용하고** mkcert 또는 이와 유사한 도구를 통해 생성된 로컬로 신뢰할 수 있는 인증서를 지정할 수 있습니다. 이 작업은 [mkcert에서 React 예제](/#setup:~:text=a%20React%20development%20server)를 사용하여 참조하십시오. {% endAside %}
+
+{% Details %} {% DetailsSummary %} 브라우저가 자체 서명한 인증서를 신뢰하지 않는 이유는 무엇입니까? {% endDetailsSummary %}
+
+HTTPS를 사용하여 브라우저에서 로컬로 실행되는 사이트를 열면 브라우저가 로컬 개발 서버의 인증서를 확인합니다. 사용자가 직접 서명한 인증서가 확인되면 신뢰할 수 있는 인증 기관으로 등록되어 있는지 여부를 확인합니다. 사용자가 직접 서명하지 않았기 때문에 브라우저는 인증서를 신뢰할 수 없으며, 연결이 안전하지 않음을 알리는 경고를 표시합니다. 계속하면 HTTPS 연결이 생성되므로 위험을 감수하고 진행할 수 있습니다.
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="브라우저가 자체 서명 인증서를 신뢰하지 않는 이유: 다이어그램.", width="800", height="833" %}<figcaption> 브라우저가 자체 서명된 인증서를 신뢰하지 않는 이유.</figcaption></figure>
+
+{% endDetails %}
+
+### 일반 인증 기관에 의해 서명된 인증서
+
+로컬 인증 기관이 아닌 실제 인증 기관이 인증서에 서명하는 방법을 찾을 수도 있습니다.
+
+이러한 기술을 사용하려는 경우 염두에 두어야 할 몇 가지 사항은 다음과 같습니다.
+
+- mkcert와 같은 로컬 CA 기술을 사용할 때보다 더 많은 설정 작업을 수행해야 합니다.
+- 사용자가 제어하고 유효한 도메인 이름을 사용해야 합니다. 즉, 다음에 대해 실제 인증 기관을 **사용할 수 없습니다**.
+    - `localhost` 및 [예약](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml)된 기타 도메인 이름(예: `example` 또는 `test`).
+    - 사용자가 제어하지 않는 모든 도메인 이름.
+    - 유효하지 않은 최상위 도메인. [유효한 최상위 도메인 목록](https://www.iana.org/domains/root/db)을 참조하십시오.
+
+### 역방향 프록시
+
+HTTPS를 사용하여 로컬에서 실행되는 사이트에 액세스하는 또 다른 옵션은 [ngrok](https://en.wikipedia.org/wiki/Reverse_proxy)와 같은 [역방향 프록시](https://ngrok.com/)를 사용하는 것입니다.
+
+고려해야 할 몇 가지 사항:
+
+- 역방향 프록시로 생성한 URL을 공유하면 누구나 해당 지역 개발 사이트에 액세스할 수 있습니다. 이는 프로젝트를 고객에게 시연할 때 매우 유용할 수 있습니다! 또는 프로젝트가 민감할 경우 단점이 될 수 있습니다.
+- 가격을 고려해야 할 수도 있습니다.
+- 브라우저의 새로운 [보안 조치](/cors-rfc1918-feedback/)는 이러한 도구의 작동 방식에 영향을 미칠 수 있습니다.
+
+### 플래그(권장하지 않음)
+
+`mysite.example`과 같은 사용자 지정 호스트 이름을 사용하는 경우 Chrome에서 플래그를 사용하여 `mysite.example`를 강제로 안전한 것으로 간주할 수 있습니다. 다음과 같은 이유로 **이러한 작업을 수행하는 것을 피하십시오**.
+
+- `mysite.example`이 항상 로컬 주소로 확인된다는 것을 100% 확신해야 합니다. 그렇지 않으면 프로덕션 자격 증명이 누출될 수 있습니다.
+- 이 트릭🙀을 사용하면 여러 브라우저에서 디버그할 수 없습니다.
+
+*모든 검토자와 기고자, 특히 Ryan Sleevi, Filippo Valsorda, Milica Mihajlija 및 Rowan Merewood의 기고와 피드백에 깊은 감사를 드립니다. 🙌*
+
+*영웅 이미지 배경은 [Unsplash](https://unsplash.com/photos/pbxwxwfI0B4)에서 [@anandu](https://unsplash.com/@anandu)가 편집했습니다.*
diff --git a/src/site/content/ko/blog/javascript-this/index.md b/src/site/content/ko/blog/javascript-this/index.md
new file mode 100644
index 00000000000..9deb0eff08e
--- /dev/null
+++ b/src/site/content/ko/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: 'JavaScript: 이것(this)이 의미하는 바는 무엇입니까?'
+subhead: JavaScript에서 `this`의 값을 알아내는 것은 까다로울 수 있습니다. 작업 수행 방법은 다음과 같습니다.
+description: JavaScript에서 `this`의 값을 알아내는 것은 까다로울 수 있습니다. 작업 수행 방법은 다음과 같습니다.
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+JavaScript의 `this`는 많은 농담의 소재가 되곤 합니다. 그 이유는 그것이 꽤 복잡하기 때문입니다. 하지만 개발자가 이 `this`를 처리하지 않기 위해 훨씬 더 복잡하고 도메인 특정 작업을 수행하는 것을 보았습니다. `this`에 대해 잘 모르는 경우 도움이 되기를 바랍니다. 이것은 저의 `this` 가이드입니다.
+
+가장 구체적인 상황부터 시작하여 가장 덜 구체적인 상황으로 마무리하겠습니다. 이 문서는 큰 `if (…) … else if () … else if (…) …`와 대략적으로 비슷하므로 여러분이 보고 있는 코드와 일치하는 첫 번째 섹션으로 바로 이동할 수 있습니다.
+
+1. [함수가 화살표 함수로 정의된 경우](#arrow-functions)
+2. [그렇지 않고 함수/클래스가 `new`](#new)로 호출되는 경우
+3. [그렇지 않고 함수에 '바운드' `this` 값이 있는 경우](#bound)
+4. [그렇지 않고 `this`가 호출 시 설정된 경우](#call-apply)
+5. [그렇지 않고 함수가 상위 개체를 통해 호출되는 경우(`parent.func()`)](#object-member)
+6. [그렇지 않고 함수 또는 상위 범위가 엄격 모드에 있는 경우](#strict)
+7. [그 외의 경우](#otherwise)
+
+## 함수가 화살표 함수로 정의된 경우: {: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+이 경우 `this`의 값은 *항상* 상위 범위의 `this`와 동일합니다.
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+화살표 함수는 `this`의 내부 값을 변경할 수 없고 *항상* 외부 `this`와 동일하기 때문에 훌륭합니다.
+
+### 다른 예시
+
+화살표 함수를 사용하면 [`bind`](#bound)로 `this` 값을 변경할 수 *없습니다*.
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+화살표 기능을 사용하면 [`call` 또는 `apply`](#call-apply)로 `this` 값을 변경할 수 *없습니다*.
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+화살표 함수를 사용하면 다른 개체의 구성 요소로 함수를 호출하여 `this`의 값을 변경할 수 *없습니다*.
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+화살표 함수를 사용하면 함수를 생성자로 호출하여 `this`의 값을 변경할 수 *없습니다*.
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### '바운드' 인스턴스 메서드
+
+인스턴스 메서드를 사용할 때 `this`가 항상 클래스 인스턴스를 참조하도록 하려면 화살표 함수와 [클래스 필드](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields)를 사용하는 것이 가장 좋습니다.
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+이 패턴은 구성 요소(예: React 구성 요소 또는 웹 구성 요소)에서 인스턴스 메서드를 이벤트 리스너로 사용할 때 정말 유용합니다.
+
+위의 내용이 "`this`는 상위 범위의 `this`와 동일할 것"이라는 규칙을 위반하는 것처럼 느껴질 수 있지만 클래스 필드를 생성자에서 설정하기 위한 구문 설탕과 같다고 생각하면 이해가 되기 시작합니다.
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+대체 패턴에는 생성자에 기존 함수를 바인딩하거나 생성자에 함수를 할당하는 것이 포함됩니다. 어떤 이유로 클래스 필드를 사용할 수 없는 경우 생성자에서 함수를 할당하는 것이 합리적인 대안입니다.
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## 그렇지 않고 함수/클래스가 `new`로 호출되는 경우: {: #new }
+
+```js
+new Whatever();
+```
+
+위는 `this` `Object.create(Whatever.prototype)` 의 결과로 설정하여 `Whatever` (또는 클래스인 경우 생성자 함수)을 호출합니다.
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+이전 스타일 생성자의 경우에도 마찬가지입니다.
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### 다른 예
+
+`new` 호출할 때 `this` 의 값은 [`bind`](#bound) 로 변경할 *수 없습니다* .
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+`new` 호출할 때 `this` 의 값은 다른 객체의 멤버로 함수를 호출하여 변경할 *수 없습니다.*
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## 그렇지 않고 함수에 '바운드' `this` 값이 있는 경우: {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+`boundFunction` 이 호출될 때마다 `this` `bind` ( `boundObject` )에 전달된 객체가 됩니다.
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %} `bind` 를 사용하여 함수를 외부 `this` 에 바인딩하지 마십시오. 대신 [화살표 함수를](#arrow-functions) 사용하십시오. 코드에서 나중에 발생하는 것이 아니라 함수 선언에서 `this`
+
+`this` 부모 객체와 관련이 없는 어떤 값으로 설정 `bind` 를 사용하지 마십시오. 보통 예기치 않은 왜 그건 `this` 나쁜 평판을 가져옵니다. 대신 값을 인수로 전달하는 것을 고려하십시오. 더 명확하고 화살표 기능과 함께 작동합니다. {% endAside %}
+
+### 다른 예
+
+바인딩된 함수를 호출할 때 `this` [`call` 또는 `apply`](#call-apply) 로 변경할 *수 없습니다* .
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+바인딩된 함수를 호출할 때 `this` 값은 다른 객체의 멤버로 함수를 호출하여 변경할 *수 없습니다.*
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## 그렇지 않고 `this`가 호출 시 설정된 경우: {: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+`this` 값은 `call`/`apply`에 전달된 개체입니다.
+
+{% Aside 'warning' %} `call`/`apply`를 사용하여 `this`를 상위 개체와 관련이 없는 값으로 설정하지 마십시오. 이것은 일반적으로 예상치 못하며 `this`가 나쁜 평판을 받는 이유가 됩니다. 대신 값을 인수로 전달하는 것을 고려하십시오. 더 명확하며 화살표 함수와 함께 작동합니다. {% endAside %}
+
+불행히도 `this`는 DOM 이벤트 리스너와 같은 요소에 의해 다른 값으로 설정되며, 이를 사용할 경우 이해하기 어려운 코드 결과를 얻을 수 있습니다.
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+저는 위와 같은 경우에 `this`를 사용하는 대신 다음을 사용합니다.
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## 그렇지 않고 함수가 상위 개체를 통해 호출되는 경우 (`parent.func()`): {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+이 경우 함수는 `obj`의 구성 요소로 호출되므로 `this`는 `obj`가 됩니다. 이것은 호출 시에 발생하므로 함수가 상위 개체 없이 호출되거나 다른 상위 개체와 함께 호출되면 링크가 끊어집니다.
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod() === obj`는 `someMethod`가 `obj`의 구성 요소로 호출되지 *않으므로* false입니다. 다음과 같은 코드를 시도할 때 이러한 문제가 발생했을 수 있습니다.
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+`querySelector` 구현이 자체 `this` 값을 바라보며 이것이 일종의 DOM 노드일 것으로 예상하고 위의 경우 해당 연결을 끊기 때문에 이것이 중단됩니다. 위의 사항을 올바르게 달성하려면 다음을 수행하십시오.
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+재미있는 사실: 모든 API가 내부적으로 `this`를 사용하는 것은 아닙니다. `console.log`와 같은 콘솔 메서드는 `this` 참조를 피하기 위해 변경되었으므로 `log`를 `console`에 바인딩할 필요는 없습니다.
+
+{% Aside 'warning' %} `this`를 상위 개체와 관련이 없는 값으로 설정하기 위해 개체에 함수를 이식하지 마십시오. 이것은 일반적으로 예상치 못하며 <code>this</code>가 나쁜 평판을 받는 이유가 됩니다. 대신 값을 인수로 전달하는 것을 고려하십시오. 더 명확하며 화살표 함수와 함께 작동합니다. {% endAside %}
+
+## 그렇지 않고 함수 또는 상위 범위가 엄격 모드에 있는 경우: {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+이 경우 `this`의 값은 정의되어 있지 않습니다. 상위 범위가 [엄격 모드](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode)이고 모든 모듈이 엄격 모드인 경우 `'use strict'`가 함수에 필요하지 않습니다.
+
+{% Aside 'warning' %} 이에 의존하지 마십시오. `undefined` 값을 얻는 더 쉬운 방법이 있습니다 😀. {% endAside %}
+
+## 그 외의 경우: {: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+이 경우 `this`의 값은 `globalThis`와 동일합니다.
+
+{% Aside %} 저를 포함한 대부분의 사람들은 `globalThis` 전역 개체를 호출하지만 이것은 기술적으로 100% 정확하지 않습니다. [자세한 내용과 함께 Mathias Bynens를 소개](https://mathiasbynens.be/notes/globalthis#terminology)합니다. 여기에는 단순히 `global`이 아니라 `globalThis`라고 불리는 이유가 포함되어 있습니다. {% endAside %}
+
+{% Aside 'warning' %} 전역 개체를 참조하기 위해 `this`를 사용하지 마세요(예, 저도 여전히 그렇게 부르고 있습니다). 대신 훨씬 더 명시적인 [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis)를 사용하십시오. {% endAside %}
+
+## 휴우!
+
+이게 전부입니다! 이것에 제가 `this`에 대해 아는 전부입니다. 질문이 있으신가요? 제가 놓친 게 있을까요? 저에게 [트윗 메시지를 주시기 바랍니다](https://twitter.com/jaffathecake).
+
+내용을 검토해 주신 [Mathias Bynens](https://twitter.com/mathias), [Ingvar Stepanyan](https://twitter.com/RReverser), [Thomas Steiner](https://twitter.com/tomayac)에게 감사드립니다.
diff --git a/src/site/content/ko/blog/lighthouse-whats-new-6.0/index.md b/src/site/content/ko/blog/lighthouse-whats-new-6.0/index.md
new file mode 100644
index 00000000000..a4d998a049d
--- /dev/null
+++ b/src/site/content/ko/blog/lighthouse-whats-new-6.0/index.md
@@ -0,0 +1,321 @@
+---
+layout: post
+title: Lighthouse 6.0의 새로운 기능
+subhead: 새로운 지표, 성과 점수 업데이트, 새로운 감사 등.
+authors:
+  - cjamcl
+date: 2020-05-19
+hero: image/admin/93kZL2w49CLIc514qojJ.svg
+alt: Lighthouse 로고.
+tags:
+  - blog
+  - performance
+  - lighthouse
+---
+
+오늘 Lighthouse 6.0을 출시합니다!
+
+[Lighthouse](https://github.com/GoogleChrome/lighthouse/)는 개발자가 사이트의 사용자 경험을 개선할 수 있는 기회와 진단을 제공하는 자동화된 웹사이트 감사 도구입니다. Chrome DevTools, npm(Node 모듈 및 CLI) 또는 브라우저 확장([Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 및 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/))에서 사용할 수 있습니다. [web.dev/measure](/measure/) 및 [PageSpeed Insights](https://pagespeed.web.dev/)를 비롯한 많은 Google 서비스를 지원합니다.
+
+Lighthouse 6.0은 npm과 [Chrome Canary](https://www.google.com/chrome/canary/)에서 즉시 사용할 수 있습니다. Lighthouse를 활용하는 다른 Google 서비스는 이달 말까지 업데이트됩니다. Chrome 84(7월 중순)의 Chrome Stable에 상륙합니다.
+
+Lighthouse Node CLI를 시도하려면 다음 명령을 사용하십시오.
+
+```bash
+npm install -g lighthouse
+lighthouse https://www.example.com --view
+```
+
+이 버전의 Lighthouse에는 [6.0 변경 로그에 나열된](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0) 많은 변경 사항이 포함되어 있습니다. 이 글에서 다음과 같은 주요 내용을 다룹니다.
+
+- [새로운 측정항목](#new-metrics)
+- [성능 점수 업데이트](#score)
+- [새로운 감사](#new-audits)
+- [Lighthouse CI](#ci)
+- [이름이 변경된 Chrome DevTools 패널](#devtools)
+- [모바일 에뮬레이션](#emulation)
+- [브라우저 확장](#extension)
+- [예산](#budgets)
+- [소스 위치 링크](#source-location)
+- [수평선에](#horizon)
+- [감사합니다!](#thanks)
+
+## 새 측정항목 {: #new-metrics }
+
+<figure>{% Img src="image/admin/Yo1oNtdfEF4PhD7zHDHQ.png", alt="Lighthouse 6.0 측정항목", width="600", height="251" %}</figure>
+
+Lighthouse 6.0은 보고서에 세 가지 새로운 메트릭을 도입합니다. 이러한 새로운 측정항목 중 LCP(Largest Contentful Paint) 및 CLS(Cumulative Layout Shift)는 [Core Web Vitals](/vitals/)의 실험실 구현입니다.
+
+### 가장 큰 내용이 포함된 페인트(LCP) {: #lcp }
+
+[LCP(Large Contentful Paint)](https://www.web.dev/lcp/)는 인지된 로딩 경험을 측정한 것입니다. 기본 또는 "가장 큰" 콘텐츠가 로드되어 사용자에게 표시될 때 페이지 로드 중 지점을 표시합니다. LCP는 로딩 경험의 맨 처음만 포착하는 FCP(First Contentful Paint)를 보완하는 중요한 요소입니다. LCP는 사용자가 실제로 페이지의 콘텐츠를 얼마나 빨리 볼 수 있는지에 대한 신호를 개발자에게 제공합니다. 2.5초 미만의 LCP 점수는 '양호'로 간주됩니다.
+
+자세한 내용은 Paul Irish의 [LCP에 대한 심층 분석을 시청](https://youtu.be/diAc65p15ag)하십시오.
+
+### 누적 레이아웃 시프트(CLS) {: #cls }
+
+[CLS(Cumulative Layout Shift)](https://www.web.dev/cls/)는 시각적 안정성을 측정한 것입니다. 페이지의 콘텐츠가 시각적으로 이동하는 정도를 수량화합니다. 낮은 CLS 점수는 개발자에게 사용자가 과도한 콘텐츠 이동을 경험하고 있지 않다는 신호입니다. 0.10 미만의 CLS 점수는 '양호'로 간주됩니다.
+
+랩 환경의 CLS는 페이지 로드가 끝날 때까지 측정됩니다. 반면 필드에서는 첫 번째 사용자 상호 작용까지 또는 모든 사용자 입력을 포함하여 CLS를 측정할 수 있습니다.
+
+자세한 내용은 Annie Sullivan의 [CLS에 대한 심층 분석을 시청](https://youtu.be/zIJuY-JCjqw)하십시오.
+
+### 총 차단 시간(TBT) {: #tbt }
+
+[총 차단 시간(TBT)](https://www.web.dev/tbt/)은 로드 응답성을 수량화하여 기본 스레드가 입력 응답성을 방지할 만큼 충분히 오랫동안 차단된 총 시간을 측정합니다. TBT는 FCP(First Contentful Paint)와 TTI(Time to Interactive) 사이의 총 시간을 측정합니다. 이는 TTI의 동반 메트릭이며 페이지와 상호 작용하는 사용자의 기능을 차단하는 기본 스레드 활동을 정량화하는 데 더 많은 뉘앙스를 제공합니다.
+
+또한 TBT는 핵심 Web Vital인 필드 메트릭 [FID(First Input Delay)](/fid/)와 잘 연관됩니다.
+
+## 실적 점수 업데이트 {: #score }
+
+Lighthouse의 [성능 점수](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/)는 페이지 속도를 요약하기 위해 여러 메트릭의 가중치 혼합에서 계산됩니다. 6.0 성능 점수 공식은 다음과 같습니다.
+
+&lt;style&gt; .lh-table { min-width: unset; } .lh-table td { min-width: unset; } &lt;/style&gt;
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>단계</strong></th>
+<th><strong>측정항목 이름</strong></th>
+<th><strong>메트릭 무게</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>초기(15%)</td>
+<td>첫 번째 콘텐츠가 포함된 페인트(FCP)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td>중기(40%)</td>
+<td>속도 지수(SI)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td></td>
+<td>최대 함량 페인트(LCP)</td>
+<td>25%</td>
+</tr>
+<tr>
+<td>후기(15%)</td>
+<td>인터랙티브 시간(TTI)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td>메인 스레드(25%)</td>
+<td>총 차단 시간(TBT)</td>
+<td>25%</td>
+</tr>
+<tr>
+<td>예측 가능성(5%)</td>
+<td>누적 레이아웃 시프트(CLS)</td>
+<td>5%</td>
+</tr>
+</tbody>
+</table>
+
+세 가지 새로운 메트릭이 추가되었지만 첫 번째 의미 있는 페인트, 첫 번째 CPU 유휴 및 최대 잠재적 FID의 세 가지 이전 메트릭이 제거되었습니다. 나머지 메트릭의 가중치는 메인 스레드 상호 작용 및 레이아웃 예측 가능성을 강조하도록 수정되었습니다.
+
+비교를 위해 버전 5 점수는 다음과 같습니다.
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>단계</strong></th>
+<th><strong>측정항목 이름</strong></th>
+<th><strong>무게</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>초기(23%)</td>
+<td>첫 번째 콘텐츠가 포함된 페인트(FCP)</td>
+<td>23%</td>
+</tr>
+<tr>
+<td>중기(34%)</td>
+<td>속도 지수(SI)</td>
+<td>27%</td>
+</tr>
+<tr>
+<td></td>
+<td>첫 번째 의미 있는 페인트(FMP)</td>
+<td>7%</td>
+</tr>
+<tr>
+<td>완료(46%)</td>
+<td>인터랙티브 시간(TTI)</td>
+<td>33%</td>
+</tr>
+<tr>
+<td></td>
+<td>첫 번째 CPU 유휴(FCI)</td>
+<td>13%</td>
+</tr>
+<tr>
+<td>메인 스레드</td>
+<td>최대 잠재적 FID</td>
+<td>0%</td>
+</tr>
+</tbody>
+</table>
+
+{% Img src="image/admin/gJnkac5fOfjOvmeLXdPO.png", alt="Lighthouse 점수가 버전 5와 6 사이에서 변경되었습니다.", width="800", height="165" %}
+
+Lighthouse 버전 5와 6 사이의 점수 변경 사항에 대한 몇 가지 주요 사항:
+
+- **TTI의 무게가 33%에서 15%로 감소했습니다**. 이는 TTI 변동성에 대한 사용자 피드백과 사용자 경험 개선으로 이어지는 메트릭 최적화의 불일치에 대한 직접적인 응답이었습니다. TTI는 페이지가 완전히 상호작용할 때 여전히 유용한 신호이지만 TBT를 보완으로 사용하면 [변동성이 줄어듭니다](https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit#heading=h.vkfjuiyx1s5l). 이 점수 변경으로 개발자가 사용자 상호 작용을 최적화하도록 더 효과적으로 권장되기를 바랍니다.
+- **FCP의 무게가 23%에서 15%로 감소했습니다.** 첫 번째 픽셀이 칠해진 경우에만 측정(FCP)하여 완전한 그림을 얻을 수 없었습니다. 사용자가 가장 관심을 가질 만한 것(LCP)을 볼 수 있을 때 측정과 결합하면 로딩 경험을 더 잘 반영합니다.
+- **Max Potential FID** **는 더 이상 사용되지 않습니다**. 더 이상 보고서에 표시되지 않지만 JSON에서는 계속 사용할 수 있습니다. 이제 mpFID 대신 TBT를 확인하여 상호 작용성을 정량화하는 것이 좋습니다.
+- **첫 번째 의미 있는 페인트는 더 이상 사용되지 않습니다.** 이 측정항목은 너무 변종이었고 구현이 Chrome 내부 렌더링에 따라 다르기 때문에 실행 가능한 표준화 경로가 없었습니다. 일부 팀은 사이트에서 FMP 타이밍이 가치가 있다고 생각하지만 메트릭은 추가 개선을 받지 못합니다.
+- **첫 번째 CPU 유휴**는 TTI와 충분히 구별되지 않기 때문에 더 이상 사용되지 않습니다. TBT와 TTI는 이제 상호 작용을 위한 필수 지표입니다.
+- CLS의 가중치는 상대적으로 낮지만 향후 주요 버전에서 증가할 것으로 예상됩니다.
+
+### 점수 변동 {: #score-shifts }
+
+이러한 변경 사항이 실제 사이트의 점수에 어떤 영향을 줍니까? 우리는 두 개의 데이터 세트를 사용하여 점수 변경에 대한 [분석](https://docs.google.com/spreadsheets/d/1BZFh7AyyaLHCj5LGAbrn3m72ysu4yv8okyHG-f3MoXI/edit?usp=sharing)을 게시했습니다. 하나는 [일반 사이트 세트](https://gist.github.com/connorjclark/8afe673d4e7c6e17204834a256e7caf1)이고 다른 하나는 [Eleventy](https://www.11ty.dev/)로 구축된 [정적 사이트 세트](https://gist.github.com/connorjclark/0be52464887ae3a6f29ad5a798122e0c#file-readme-md)입니다. 요약하면, 사이트의 ~20%는 눈에 띄게 더 높은 점수를 보고, ~30%는 거의 변화가 없으며, ~50%는 최소 5점 감소를 봅니다.
+
+점수 변경은 세 가지 주요 구성 요소로 나눌 수 있습니다.
+
+- 점수 가중치 변경
+- 기본 메트릭 구현에 대한 버그 수정
+- 개별 점수 곡선 변경
+
+점수 가중치 변경과 세 가지 새로운 측정항목의 도입으로 인해 전체 점수 변경의 대부분이 이루어졌습니다. 개발자가 아직 최적화하지 않은 새로운 메트릭은 버전 6 성능 점수에서 상당한 비중을 차지합니다. 버전 5에서 테스트 말뭉치의 평균 성능 점수는 약 50인 반면, 새로운 총 차단 시간 및 최대 콘텐츠가 포함된 페인트 메트릭의 평균 점수는 약 30이었습니다. 이 두 메트릭을 함께 사용하면 Lighthouse 버전 6에서 가중치의 50%를 차지합니다. 성능 점수가 떨어지므로 당연히 많은 비율의 사이트가 감소했습니다.
+
+기본 메트릭 계산에 대한 버그 수정으로 인해 점수가 달라질 수 있습니다. 이는 비교적 적은 수의 사이트에 영향을 미치지만 특정 상황에서는 상당한 영향을 미칠 수 있습니다. 전반적으로 사이트의 약 8%는 메트릭 구현 변경으로 인해 점수가 향상되었으며 사이트의 약 4%는 메트릭 구현 변경으로 인해 점수가 감소했습니다. 약 88%의 사이트가 이러한 수정 사항의 영향을 받지 않았습니다.
+
+개별 점수 곡선의 변화는 아주 약간이지만 전체 점수 변화에도 영향을 미쳤습니다. 우리는 주기적으로 점수 곡선이 [HTTPArchive 데이터 세트](http://httparchive.org/)에서 관찰된 메트릭과 일치하는지 확인합니다. 주요 구현 변경 사항의 영향을 받는 사이트를 제외하고 개별 메트릭에 대한 점수 곡선을 약간 조정하면 사이트의 약 3% 점수가 향상되고 사이트의 약 4% 점수가 감소했습니다. 약 93%의 사이트가 이 변경의 영향을 받지 않았습니다.
+
+### 점수 계산기 {: #calculator }
+
+성과 채점을 탐색하는 데 도움이 되는 [점수 계산기](https://googlechrome.github.io/lighthouse/scorecalc/)를 게시했습니다. 계산기는 또한 Lighthouse 버전 5와 6 점수를 비교합니다. Lighthouse 6.0으로 감사를 실행하면 보고서에 결과가 채워진 계산기에 대한 링크가 포함됩니다.
+
+<figure>{% Img src="image/admin/N8cRFUnM526m3fB4GQVf.png", alt="Lighthouse 점수 계산기.", width="600", height="319" %} <figcaption>게이지 업그레이드에 대해 <a href="https://twitter.com/anatudor">Ana Tudor</a>에게 큰 감사를 드립니다!</figcaption></figure>
+
+## 새 감사 {: #new-audits }
+
+### 미사용 자바스크립트 {: #unused-javascript }
+
+새로운 감사: [**Unused JavaScript**](/remove-unused-code/)에서 [DevTools 코드 적용 범위](https://developer.chrome.com/docs/devtools/coverage/)를 활용하고 있습니다.
+
+이 감사는 *완전히* 새로운 것은 아닙니다. [2017년 중기](https://github.com/GoogleChrome/lighthouse/issues/1852#issuecomment-306900595)에 추가되었지만 성능 오버헤드 때문에 Lighthouse를 최대한 빠르게 유지하기 위해 기본적으로 비활성화되어 있습니다. 이 범위 데이터를 수집하는 것이 이제 훨씬 더 효율적이므로 기본적으로 활성화하는 것이 좋습니다.
+
+### 접근성 감사 {: #a11y }
+
+Lighthouse는 접근성 카테고리를 강화하기 위해 멋진 [axe-core](https://github.com/dequelabs/axe-core) 라이브러리를 사용합니다. Lighthouse 6.0에는 다음 감사가 추가되었습니다.
+
+- [aria-hidden-body](/aria-hidden-body/)
+- [aria-hidden-focus](/aria-hidden-focus/)
+- [aria-input-field-name](/aria-input-field-name/)
+- [aria-toggle-field-name](/aria-toggle-field-name/)
+- [form-field-multiple-labels](/form-field-multiple-labels/)
+- [heading-order](/heading-order/)
+- [duplicate-id-active](/duplicate-id-active/)
+- [duplicate-id-aria](/duplicate-id-aria/)
+
+### 마스크 가능 아이콘 {: #maskable-icon }
+
+[마스크 가능한 아이콘](/maskable-icon/)은 모든 유형의 장치에서 PWA 아이콘을 멋지게 보이게 하는 새로운 아이콘 형식입니다. PWA가 가능한 한 좋게 보이도록 하기 위해 manifest.json이 이 새로운 형식을 지원하는지 확인하는 새로운 감사를 도입했습니다.
+
+### 문자 집합 선언 {: #charset }
+
+[meta charset 요소](https://developer.chrome.com/docs/lighthouse/best-practices/charset/)는 HTML 문서를 해석하는 데 사용해야 하는 문자 인코딩을 선언합니다. 이 요소가 없거나 문서에서 늦게 선언된 경우 브라우저는 여러 경험적 방법을 사용하여 어떤 인코딩을 사용해야 하는지 추측합니다. 브라우저가 잘못 추측하고 늦은 메타 문자 집합 요소가 발견되면 일반적으로 파서는 지금까지 수행한 모든 작업을 버리고 다시 시작하여 사용자에게 좋지 않은 경험을 선사합니다. 이 새로운 감사는 페이지에 유효한 문자 인코딩이 있고 초기에 미리 정의되어 있는지 확인합니다.
+
+## Lighthouse CI {: #ci }
+
+[지난 11월 CDS](/lighthouse-evolution-cds-2019/#lighthouse-ci-alpha-release)에서 우리는 지속적 통합 파이프라인의 모든 커밋에 대해 Lighthouse 결과를 추적하는 오픈 소스 Node CLI 및 서버인 [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)를 발표했으며 알파 릴리스 이후로 먼 길을 왔습니다. Lighthouse CI는 이제 Travis, Circle, GitLab 및 GitHub Actions를 비롯한 다양한 CI 제공업체를 지원합니다. 바로 배포할 수 있는 [도커 이미지](https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs/recipes)를 사용하면 쉽게 설정할 수 있으며, 포괄적인 대시보드 재설계를 통해 이제 Lighthouse의 모든 카테고리 및 메트릭에 대한 추세를 보여주어 자세한 분석을 할 수 있습니다.
+
+[시작 안내서](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md)에 따라 지금 바로 프로젝트에서 Lighthouse CI를 사용하십시오.
+
+<figure data-float="left">{% Img src="image/admin/sXnTzewqGuc84MOCzFJe.png", alt="Lighthouse CI.", width="600", height="413", linkTo=true %}</figure>
+
+<figure data-float="left">{% Img src="image/admin/uGT7AUJEQeqK1vlKySLb.png", alt="Lighthouse CI.", width="600", height="412", linkTo=true %}</figure>
+
+<figure>{% Img src="image/admin/ZR48KZebW43eyAvB1RkT.png", alt="Lighthouse CI.", width="600", height="354", linkTo=true %}</figure>
+
+## Chrome DevTools 패널의 이름 변경 {: #devtools }
+
+**감사** 패널의 이름을 **Lighthouse** 패널로 변경했습니다. 이거면 충분하죠!
+
+DevTools 창 크기에 따라 패널이 `»` 버튼 뒤에 있을 수 있습니다. 탭을 끌어 순서를 변경할 수 있습니다.
+
+[명령 메뉴](https://developer.chrome.com/docs/devtools/command-menu/)를 사용 하여 패널을 빠르게 표시하려면 다음을 수행하십시오.
+
+1. {% Instruction 'devtools', 'none' %}
+2. {% Instruction 'devtools-command', 'none' %}
+3. "Lighthouse"를 입력하기 시작합니다.
+4. `Enter`를 누릅니다.
+
+## 모바일 에뮬레이션 {: #emulation }
+
+Lighthouse는 모바일 우선 사고방식을 따릅니다. 성능 문제는 일반적인 모바일 조건에서 더 분명하지만 개발자는 종종 이러한 조건에서 테스트하지 않습니다. 이것이 Lighthouse의 기본 구성이 모바일 에뮬레이션을 적용하는 이유입니다. 에뮬레이션은 다음으로 구성됩니다.
+
+- 느린 네트워크 및 CPU 조건을 시뮬레이션했습니다([Lantern](https://github.com/GoogleChrome/lighthouse/blob/master/docs/lantern.md)이라는 시뮬레이션 엔진을 통해).
+- 기기 화면 에뮬레이션(Chrome DevTools에 있는 것과 동일).
+
+Lighthouse는 처음부터 Nexus 5X를 참조 장치로 사용했습니다. 최근 몇 년 동안 대부분의 성능 엔지니어는 테스트 목적으로 Moto G4를 사용해 왔습니다. 이제 Lighthouse는 이를 따르고 참조 장치를 Moto G4로 변경했습니다. 실제로 이 변경 사항은 그다지 눈에 띄지 않지만 다음은 웹 페이지에서 감지할 수 있는 모든 변경 사항입니다.
+
+- 화면 크기가 412x660픽셀에서 360x640픽셀로 변경되었습니다.
+- 사용자 에이전트 문자열이 약간 변경되어 이전에 `Nexus 5 Build/MRA58N` 이었던 장치 부분은 이제 `Moto G (4)`가 됩니다.
+
+Chrome 81부터 Moto G4는 Chrome DevTools 기기 에뮬레이션 목록에서도 사용할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wMyHDbxs49CTJ831UBp7.png", alt="Moto G4가 포함된 Chrome DevTools 장치 에뮬레이션 목록.", width="800", height="653" %}</figure>
+
+## 브라우저 확장자 {: #extension }
+
+[Lighthouse용 Chrome 확장 프로그램](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)은 Lighthouse를 로컬에서 실행하는 편리한 방법이었습니다. 불행히도 지원하기가 복잡했습니다. Chrome DevTools **Lighthouse** 패널이 더 나은 경험(보고서가 다른 패널과 통합됨)이기 때문에 Chrome 확장 프로그램을 단순화하여 엔지니어링 오버헤드를 줄일 수 있다고 느꼈습니다.
+
+Lighthouse를 로컬로 실행하는 대신 확장 프로그램은 이제 [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)를 사용합니다. 우리는 이것이 일부 사용자에게 충분하지 않다는 것을 알고 있습니다. 주요 차이점은 다음과 같습니다.
+
+- PageSpeed Insights는 로컬 Chrome 인스턴스가 아닌 원격 서버를 통해 실행되기 때문에 비공개 웹사이트를 감사할 수 없습니다. 비공개 웹 사이트를 감사해야 하는 경우 DevTools **Lighthouse** 패널 또는 Node CLI를 사용하십시오.
+- PageSpeed Insights는 최신 Lighthouse 릴리스 사용을 보장하지 않습니다. 최신 릴리스를 사용하려면 Node CLI를 사용하세요. 브라우저 확장은 릴리스 후 ~1-2주 후에 업데이트됩니다.
+- PageSpeed Insights는 Google API이며 이를 사용하면 Google API 서비스 약관에 동의하는 것으로 간주됩니다. 서비스 약관에 동의하지 않거나 동의할 수 없는 경우 DevTools **Lighthouse** 패널 또는 Node CLI를 사용하십시오.
+
+좋은 소식은 제품 스토리를 단순화하여 다른 엔지니어링 문제에 집중할 수 있다는 것입니다. 그 결과 [Lighthouse Firefox 확장 기능](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)을 출시했습니다!
+
+## 예산 {: #budgets }
+
+Lighthouse 5.0 은 페이지가 제공할 수 있는 [각 리소스 유형](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#resource-budgets)(예: 스크립트, 이미지 또는 CSS)에 대한 임계값 추가를 지원하는 [성능 예산](/performance-budgets-101/)을 도입했습니다.
+
+Lighthouse 6.0은 [예산 메트릭에 대한 지원](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#timing-budgets)을 추가하므로 이제 FCP와 같은 특정 메트릭에 대한 임계값을 설정할 수 있습니다. 현재 예산은 Node CLI 및 Lighthouse CI에서만 사용할 수 있습니다.
+
+## 소스 위치 링크 {: #source-location }
+
+Lighthouse가 페이지에 대해 찾은 문제 중 일부는 소스 코드의 특정 줄로 다시 추적될 수 있으며 보고서에는 관련 있는 정확한 파일과 줄이 표시됩니다. DevTools에서 이를 쉽게 탐색할 수 있도록 보고서에 지정된 위치를 클릭하면 **소스** 패널에서 관련 파일이 열립니다.
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>DevTools는 문제를 일으키는 정확한 코드 라인을 보여줍니다.</figcaption></figure>
+
+## 곧 발생 {: #horizon }
+
+Lighthouse는 다음과 같은 새로운 기능을 강화하기 위해 소스 맵을 수집하는 실험을 시작했습니다.
+
+- JavaScript 번들에서 중복 모듈을 감지합니다.
+- 최신 브라우저로 전송되는 코드에서 과도한 폴리필 또는 변환을 감지합니다.
+- 미사용 JavaScript 감사를 강화하여 모듈 수준의 세분성을 제공합니다.
+- 조치가 필요한 모듈을 강조 표시하는 트리맵을 시각화합니다.
+- "소스 위치"가 있는 보고서 항목에 대한 원래 소스 코드를 표시합니다.
+
+<figure>{% Img src="image/admin/iZPhM3KNQebgwCsgXTuf.png", alt="소스 맵의 모듈을 표시하는 사용되지 않는 JavaScript.", width="600", height="566" %}<figcaption> 소스 맵을 사용하여 사용하지 않는 JavaScript 감사는 특정 번들 모듈에서 사용되지 않는 코드를 표시합니다.</figcaption></figure>
+
+이러한 기능은 Lighthouse의 향후 버전에서 기본적으로 활성화됩니다. 지금은 다음 CLI 플래그를 사용하여 Lighthouse의 실험적 감사를 볼 수 있습니다.
+
+```bash
+lighthouse https://web.dev --view --preset experimental
+```
+
+## 감사합니다! {: #thanks }
+
+Lighthouse를 사용하고 피드백을 제공해 주셔서 감사합니다. 귀하의 피드백은 Lighthouse를 개선하는 데 도움이 되며 Lighthouse 6.0을 통해 웹 사이트의 성능을 더 쉽게 개선할 수 있기를 바랍니다.
+
+다음에 무엇을 할 수 있습니까?
+
+- Chrome Canary를 열고 **Lighthouse** 패널을 사용해 보세요.
+- 노드 CLI 사용: `npm install -g lighthouse && lighthouse https://yoursite.com --view`.
+- 프로젝트와 함께 [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci#lighthouse-ci)를 실행하십시오.
+- [Lighthouse 감사 문서](/learn/#lighthouse)를 검토하십시오.
+- 더 나은 웹을 만드는 즐거움을 누리세요!
+
+우리는 웹에 열정적이며 개발자 커뮤니티와 협력하여 웹을 개선하는 데 도움이 되는 도구를 구축하는 것을 좋아합니다. Lighthouse는 오픈 소스 프로젝트이며 오타 수정에서 문서 리팩터링, 새로운 감사에 이르기까지 모든 것을 도와주는 모든 기여자에게 큰 감사를 드립니다. [기여에 관심](https://github.com/GoogleChrome/lighthouse/blob/master/CONTRIBUTING.md)이 있으십니까? [Lighthouse GitHub 리포지토리](https://github.com/GoogleChrome/lighthouse)에서 살펴보세요.
diff --git a/src/site/content/ko/blog/long-tasks-devtools/index.md b/src/site/content/ko/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..c735874b470
--- /dev/null
+++ b/src/site/content/ko/blog/long-tasks-devtools/index.md
@@ -0,0 +1,55 @@
+---
+title: 긴 JavaScript 작업으로 인해 상호 작용까지의 시간이 지연됩니까?
+subhead: 사용자 상호 작용을 방해하는 비용이 많이 드는 작업을 진단하는 방법을 알아봅니다.
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: 모래가 쏟아지는 모래시계
+description: 긴 작업은 메인 스레드를 바쁘게 하여 사용자 상호 작용을 지연시킬 수 있습니다. Chrome DevTools가 이제 긴 작업을 시각화하여 최적화할 작업을 더 쉽게 보여줍니다.
+tags:
+  - blog
+  - performance
+---
+
+**t긴 작업은 메인 스레드를 바쁘게 만들어 사용자 상호 작용을 지연시킬 수 있습니다. Chrome DevTools는 이제 긴 작업을 시각화하여 최적화할 작업을 더 쉽게 보여줍니다.**
+
+Lighthouse를 사용하여 페이지를 감사하는 경우 사용자가 페이지와 상호 작용하고 응답을 받을 수 있는 시간을 나타내는 지표인 [상호 작용 시간](/tti/)에 익숙할 것입니다. 하지만 긴 (JavaScript) 작업이 TTI를 저하시키는 데 크게 기여할 수 있다는 사실을 알고 계셨나요?
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Lighthouse 보고서에 표시되는 상호 작용 시간", width="800", height="169" %}
+
+## 긴 작업이란?
+
+[긴 작업](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API)은 오랜 시간 동안 메인 스레드를 독점하여 UI를 "정지"시키는 JavaScript 코드입니다.
+
+웹 페이지가 로드되는 동안 긴 작업은 메인 스레드를 묶어두기 때문에 페이지가 준비된 것처럼 보이더라도 사용자 입력에 응답하지 않게 만들 수 있습니다. 이벤트 리스너, 클릭 핸들러 등이 아직 연결되지 않았기 때문에 클릭과 탭이 작동하지 않는 경우가 많습니다.
+
+CPU를 많이 사용하는 긴 작업은 50ms 이상 걸리는 복잡한 작업으로 인해 발생합니다. 왜 하필 50ms일까요? [RAIL 모델](/rail/)은 100ms 이내에 가시적인 응답을 보장하기 위해 [50ms](/rail/#response-process-events-in-under-50ms) 내에 사용자 입력 이벤트를 처리할 것을 제안합니다. 그렇지 않으면 동작과 그 반응 사이의 연결이 끊어집니다.
+
+## 내 페이지에 상호 작용을 지연시킬 수 있는 긴 작업이 있나요?
+
+지금까지는 [Chrome DevTools](https://developer.chrome.com/docs/devtools/)에서 50ms가 넘는 스크립트의 "긴 노란색 블록"을 수동으로 찾거나 [Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/)를 사용하여 상호 작용을 지연시키는 작업을 파악해야 했습니다. 조금 번거로울 수 있습니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="짧은 작업과 긴 작업의 차이점을 보여주는 DevTools 성능 패널 스크린샷", width="800", height="450" %}
+
+성능 감사 워크플로를 쉽게 수행하도록 [DevTools는 이제 긴 작업을 시각화](https://developers.google.com/web/updates/2019/03/devtools#longtasks)합니다. 작업(회색으로 표시)이 긴 작업이면 빨간색 플래그가 지정됩니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="DevTools는 긴 작업에 대해 성능 패널에서 빨간색 플래그가 있는 회색 막대를 표시해 시각화", width="800", height="450" %}
+
+- 웹 페이지를 로드하는 [성능 패널](https://developer.chrome.com/docs/devtools/evaluate-performance/)에서 추적을 기록합니다.
+- 기본 스레드 보기에서 빨간색 플래그를 찾습니다. 이제 작업이 회색("작업")으로 표시된 것을 볼 수 있습니다.
+- 막대 위로 마우스를 가져가면 작업 기간과 이 작업이 "긴" 것으로 간주되었는지 여부를 알 수 있습니다.
+
+## 긴 작업의 원인은 무엇인가요?
+
+긴 작업의 원인을 찾으려면 회색 **작업** 표시줄을 선택합니다. 아래 드로어에서 **Bottom-Up(상향식)** 및 **Group by Activity(활동별 그룹화)**를 선택합니다. 이를 통해 완료하는 데 너무 오래 걸리는 작업에 가장 많은(전체적으로) 기여를 한 활동을 확인할 수 있습니다. 아래에서는 비용이 많이 드는 DOM 쿼리 세트가 이유인 것으로 보입니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="DevTools에서 긴 작업('Task'로 레이블 지정)을 선택하면 작업이 오래 걸리는 원인을 제공한 활동을 심층 조사할 수 있습니다.", width="800", height="450" %}
+
+## 긴 작업을 최적화하는 일반적인 방법은 무엇인가요?
+
+큰 스크립트가 긴 작업의 주된 원인인 경우가 많으므로 [이를 분할](/reduce-javascript-payloads-with-code-splitting)하는 것이 좋습니다. 또한 타사 스크립트에도 주목하세요. 이러한 스크립트의 긴 작업으로 인해 기본 콘텐츠가 빠르게 응답하지 못할 수 있습니다.
+
+모든 작업을 작은 덩어리(50ms 미만에 실행됨)로 나누고 이러한 덩어리를 올바른 위치와 시간에 실행시키세요. 올바른 위치는 작업자의 기본 스레드에서 벗어날 수도 있습니다. Phil Walton의 [Idle Until Urgent(급해질 때까지 놀기)](https://philipwalton.com/articles/idle-until-urgent/)를 읽어보면 좋은 참조가 될 것입니다.
+
+페이지가 빠르게 반응하도록 만드세요. 긴 작업을 최소화하면 사용자가 사이트를 방문할 때 즐거운 경험을 할 수 있습니다. 긴 작업에 대한 자세한 내용은 [사용자 중심의 성능 메트릭](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks)을 확인해 보세요.
diff --git a/src/site/content/ko/blog/maskable-icon/index.md b/src/site/content/ko/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..c1b23b54454
--- /dev/null
+++ b/src/site/content/ko/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: 마스크 가능한 아이콘이 있는 PWA의 적응형 아이콘 지원
+subhead: 지원 플랫폼에서 적응형 아이콘을 사용하는 새로운 아이콘 형식입니다.
+description: 마스크 가능한 아이콘은 더 많은 제어를 제공하고 PWA가 적응형 아이콘을 사용할 수 있게 하는 새로운 아이콘 형식입니다. 마스크 가능한 아이콘을 제공하면 모든 Android 장치에서 아이콘이 멋지게 보일 수 있습니다.
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: 전체 원을 덮는 아이콘과 비교하여 흰색 원 안에 포함된 아이콘
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## 마스크 가능한 아이콘은 무엇입니까? {: #what }
+
+최근 Android 휴대폰에 PWA를 설치한 경우 아이콘이 흰색 배경으로 표시되는 것을 알 수 있습니다. Android Oreo는 다양한 기기 모델에서 다양한 모양으로 앱 아이콘을 표시하는 적응형 아이콘을 도입했습니다. 이 새로운 형식을 따르지 않는 아이콘에는 흰색 배경이 제공됩니다.
+
+<figure>{% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="Android의 흰색 원 안에 있는 PWA 아이콘", width="400", height="100" %}<figcaption> Android에서 투명한 PWA 아이콘이 흰색 원 안에 나타남</figcaption></figure>
+
+마스크 가능한 아이콘은 더 많은 제어를 제공하고 PWA에서 적응형 아이콘을 사용할 수 있도록 하는 새로운 아이콘 형식입니다. 마스크 가능한 아이콘을 제공하면 아이콘이 전체 모양을 채우고 모든 Android 기기에서 멋지게 보일 수 있습니다. Firefox와 Chrome은 최근 이 새로운 형식에 대한 지원을 추가했으며 앱에서 이를 채택할 수 있습니다.
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="Android에서 전체 원을 덮는 PWA 아이콘", width="400", height="100" %}<figcaption> 마스크 가능한 아이콘이 대신 전체 원을 덮습니다.</figcaption></figure>
+
+## 현재 아이콘이 준비되었습니까?
+
+마스크 가능한 아이콘은 다양한 모양을 지원해야 하므로 브라우저에서 나중에 원하는 모양과 크기로 자를 수 있는 일부 패딩이 있는 불투명 이미지를 제공합니다. 궁극적으로 선택한 모양은 브라우저와 플랫폼마다 다를 수 있으므로 특정 모양에 의존하지 않는 것이 가장 좋습니다.
+
+<figure data-float="right">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"], autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> 특정 플랫폼용 모양 </figcaption></figure>
+
+다행히도 모든 플랫폼이 존중하는 잘 정의되고 [표준화된](https://w3c.github.io/manifest/#icon-masks) "최소 안전 지대"가 있습니다. 로고와 같은 아이콘의 중요한 부분은 아이콘 너비의 40%와 동일한 반경을 가진 아이콘 중앙의 원형 영역 내에 있어야 합니다. 바깥쪽 10% 가장자리는 잘릴 수 있습니다.
+
+Chrome DevTools를 사용하여 아이콘의 어느 부분이 안전 영역 내에 있는지 확인할 수 있습니다. PWA를 연 상태에서 DevTools를 시작하고 **애플리케이션** 패널로 이동합니다. **아이콘** 섹션에서 **마스크 가능한 아이콘의 최소 안전 영역만 표시**를 선택할 수 있습니다. 안전 영역만 보이도록 아이콘이 잘립니다. 이 안전한 영역 내에서 로고가 보이면 잘 진행한 것입니다.
+
+<figure>{% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="가장자리가 잘린 PWA 아이콘을 표시하는 DevTools의 응용 프로그램 패널", width="762", height="423" %}<figcaption> 애플리케이션 패널</figcaption></figure>
+
+다양한 Android 모양으로 마스크 가능한 아이콘을 테스트하려면 제가 만든 [Maskable.app](https://maskable.app/) 도구를 사용하세요. 아이콘을 열면 Maskable.app에서 다양한 모양과 크기를 시도할 수 있으며 팀의 다른 사람들과 미리보기를 공유할 수 있습니다.
+
+## 마스크 가능한 아이콘을 어떻게 채택합니까?
+
+기존 아이콘을 기반으로 마스크 가능한 아이콘을 만들려면 [Maskable.app 편집기](https://maskable.app/editor)를 사용할 수 있습니다. 아이콘을 업로드하고 색상과 크기를 조정한 다음 이미지를 내보냅니다.
+
+<figure>{% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.app 편집기 스크린샷", width="670", height="569" %}<figcaption> Maskable.app Editor에서 아이콘 만들기</figcaption></figure>
+
+마스크 가능한 아이콘 이미지를 만들고 DevTools에서 테스트했으면 새 자산을 가리키도록 [웹 앱 매니페스트](/add-manifest/)를 업데이트해야 합니다. 웹 앱 매니페스트는 웹 앱에 대한 정보를 JSON 파일로 제공하며[`icons` 배열을](/add-manifest/#icons) 포함합니다.
+
+마스크 가능한 아이콘을 포함하여 웹 앱 매니페스트에 나열된 이미지 리소스에 대한 새 속성 값이 추가되었습니다. `purpose` 필드는 브라우저에 아이콘을 어떻게 사용해야 하는지 알려줍니다. 기본적으로 아이콘의 목적은 `"any"` 입니다. 이 아이콘은 Android의 흰색 배경 위에서 크기가 조정됩니다.
+
+마스크 가능한 아이콘은 `"maskable"`과 같은 다른 용도를 사용해야 합니다. 이는 이미지가 아이콘 마스크와 함께 사용되어 결과를 더 잘 제어할 수 있음을 나타냅니다. 이렇게 하면 아이콘의 배경이 흰색이 아닙니다. 마스크 가능한 아이콘을 다른 장치에서 마스크 없이 사용하려는 경우 공백으로 구분된 여러 용도(예: `"any maskable"`)를 지정할 수 있습니다.
+
+{% Aside %} `"any maskable"` 과 같이 공백으로 구분된 여러 목적을 *지정할 수 있지만* 실제로는 *해서는 안 됩니다*. `"maskable"` 아이콘을 `"any"` 아이콘으로 사용하는 것은 아이콘이 있는 그대로 사용되기 때문에 차선책입니다. 이상적으로는 `"any"` 목적을 위한 아이콘은 투명 영역을 가져야 하며 브라우저에서 추가하지 않을 것이기 때문에 사이트의 파비콘과 같은 추가 여백이 없어야 합니다. {% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- New property value `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+이를 통해 자신만의 마스크 가능한 아이콘을 만들어 앱이 가장자리에서 가장자리로 멋지게 보이도록 할 수 있습니다.
+
+## 감사의 말
+
+이 기사는 [Joe Medley](https://github.com/jpmedley)가 검토했습니다.
diff --git a/src/site/content/ko/blog/min-max-clamp/index.md b/src/site/content/ko/blog/min-max-clamp/index.md
new file mode 100644
index 00000000000..f515a9921e7
--- /dev/null
+++ b/src/site/content/ko/blog/min-max-clamp/index.md
@@ -0,0 +1,154 @@
+---
+title: 'min(), max() 및 clamp(): 오늘날 사용할 수 있는 세 가지 논리적 CSS 함수'
+subhead: 잘 지원되는 CSS 기능을 사용하여 요소 크기를 제어하고 적절한 간격을 유지하며 유동적인 타이포그래피를 구현하는 방법을 알아보세요.
+authors:
+  - una
+date: 2020-10-14
+hero: image/admin/aVL3BEXD3AF9fFzPGKMf.jpg
+alt: 책상 위에 놓인 도구 세트입니다.
+description: 최소, 최대 및 클램프는 더 적은 코드를 사용하여 더 반응적인 스타일을 가능하게 하는 몇 가지 강력한 CSS 기능을 제공합니다. 이 게시물은 잘 지원되는 CSS 수학 함수를 사용하여 요소 크기를 제어하고 적절한 간격을 유지하며 유동적인 타이포그래피를 구현하는 방법에 대해 설명합니다.
+tags:
+  - blog
+  - css
+  - layout
+feedback:
+  - api
+---
+
+반응형 디자인이 진화하고 점점 더 미묘해짐에 따라 CSS도 끊임없이 진화하고 작성자에게 향상된 제어 기능을 제공합니다. [`min()`](https://developer.mozilla.org/docs/Web/CSS/min) , [`max()`](https://developer.mozilla.org/docs/Web/CSS/max) 및 [`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp) 함수는 웹사이트와 앱을 보다 동적이고 반응적으로 제작할 수 있는 최신 도구입니다.
+
+유연하고 유동적인 타이포그래피, 제어된 요소 크기 조정 및 적절한 간격 유지와 관련하여 `min()` , `max()` 및 `clamp()`가 도움이 될 수 있습니다.
+
+## 배경
+
+<blockquote>
+  <p>수학 함수인 <code>calc()</code> , <code>min()</code> , <code>max()</code> 및 <code>clamp()</code> 사용하면 덧셈(+), 뺄셈(-), 곱셈(*) 및 나눗셈(/)이 있는 수학 표현식을 구성 요소 값으로 사용할 수 있습니다.</p>
+  <cite><p data-md-type="paragraph"><a href="https://www.w3.org/TR/css-values-4/#calc-notation">CSS 값 및 단위 레벨 4</a></p></cite>
+</blockquote>
+
+Safari는 2019년 4월에 완전한 기능 세트를 최초로 [출시](https://bugs.webkit.org/show_bug.cgi?id=167000) 했으며, 그해 후반에 Chromium이 버전 79를 출시했습니다. 올해 Firefox [75](https://bugzilla.mozilla.org/show_bug.cgi?id=1519519)가 출시되면서 모든 브라우저가 `min()`, `max()` 및 `clamp()`를 지원하게 되었습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIgePP41Quh7ubYh54vo.png", alt="", width="800", height="246" %} <figcaption> <a href="https://caniuse.com/css-math-functions">Caniuse</a> 지원 테이블. </figcaption></figure>
+
+## 사용 방법
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-demo.mp4">
+  </source></video>
+  <figcaption>min() 함수가 옵션 목록과 그 부모를 기반으로 값을 선택하는 방법을 보여줍니다. <a href="https://codepen.io/una/pen/rNeGNVL">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+적절한 경우 CSS 표현식의 오른쪽에 `min()` , `max()` 및 `clamp()` 를 사용할 수 있습니다. `min()` 및 `max()`의 경우 값의 인수 목록을 제공하고 브라우저는 각각 가장 작은 값 또는 가장 큰 값을 결정합니다. 예를 들어 `min(1rem, 50%, 10vw)`의 경우 브라우저는 이러한 상대 단위 중 가장 작은 단위를 계산하고 해당 값을 실제 값으로 사용합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-demo.mp4">
+  </source></video>
+  <figcaption>max() 함수가 옵션 목록과 그 부모를 기반으로 값을 선택하는 방법을 보여줍니다. <a href="https://codepen.io/una/pen/RwaZXqR">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+`max()` 함수는 쉼표로 구분된 표현식 목록에서 가장 큰 값을 선택합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-demo.mp4">
+  </source></video>
+  <figcaption>clamp() 함수가 옵션 목록과 그 부모를 기반으로 값을 선택하는 방법을 보여줍니다. <a href="https://codepen.io/una/pen/bGpoGdJ">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+`clamp()`를 사용하려면 최소값, 이상적인 값(계산할 값) 및 최대값의 세 가지 값을 입력합니다.
+
+이러한 함수는 `<length>` , `<frequency>` , `<angle>` , `<time>` , `<percentage>` , `<number>` 또는 `<integer>` 가 허용되는 모든 곳에서 사용할 수 있습니다. 이러한 함수는 단독으로 사용하거나(예: `font-size: max(0.5vw, 50%, 2rem)`), `calc()`와 함께 사용하거나(i.e. `font-size: max(calc(0.5vw - 1em), 2rem)`), 구성하여 사용할 수 있습니다((i.e. `font-size: max(min(0.5vw, 1em), 2rem)`).
+
+{% Aside %} `min()` 내부에서 계산하는 경우 `max()`, `clamp()` 또는 `calc()` 호출을 제거할 수 있습니다. 예를 들어 `font-size: max(calc(0.5vw - 1em), 2rem)`는 `font-size: max(0.5vw - 1em, 2rem)`와 동일합니다. {% endAside %}
+
+요약:
+
+- `min(<value-list>)`: 쉼표로 구분된 표현식 목록에서 가장 작은 값을 선택합니다.
+- `max(<value-list>)`: 쉼표로 구분된 표현식 목록에서 가장 큰 값을 선택합니다.
+- `clamp(<min>, <ideal>, <max>)`: 설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정합니다.
+
+몇 가지 예를 살펴보겠습니다.
+
+## 완벽한 너비
+
+로버트 브링허스트(Robert Bringhurst)의 [타이포그래피 스타일의 요소(Elements of Typographic Style)](http://webtypography.net/2.1.2#:~:text=%E2%80%9CAnything%20from%2045%20to%2075,is%2040%20to%2050%20characters.%E2%80%9D)에 따르면 "텍스트 사이즈가 설정되고 세리프 텍스트 페이스를 사용하는 단일 열 페이지에서 가장 이상적인 줄 당 길이는 45자자에서 75자로 간주된다."고 합니다
+
+텍스트 블록이 45자보다 좁거나 75자보다 넓지 않도록 하려면 `clamp()` 및 `ch`(0-width [character advance](https://developer.mozilla.org/docs/Web/CSS/length)) 단위를 사용하십시오.
+
+```css
+p {
+  width: clamp(45ch, 50%, 75ch);
+}
+```
+
+이렇게 하면 브라우저가 단락의 너비를 결정할 수 있습니다. 50%의 너비가 `45ch`보다 작은 경우가 아니면 너비를 50%로 설정하며 작은 경우 `45ch`가 선택됩니다. 50%가 `75ch`보다 넓은 경우도 동일합니다. 이 데모에서는 카드 자체가 고정됩니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-width.mp4">
+  </source></video>
+  <figcaption>clamp() 함수를 사용하여 최소 및 최대 너비를 제한합니다. <a href="https://codepen.io/una/pen/QWyLxaL">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+`min()` 또는 `max()` 함수로 이것을 분해할 수 있습니다. 요소의 너비가 `50%`이고 `75ch` 를 초과하지 않도록 하려면(즉, 더 큰 화면에서) 다음과 같이 코드를 작성하세요. `width: min(75ch, 50%);`. 이는 `min()` 함수를 사용하여 "최대" 크기를 설정합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-width.mp4">
+  </source></video>
+  <figcaption>clamp() 함수를 사용하여 최소 및 최대 너비를 제한합니다.</figcaption></figure>
+
+`max()` 함수를 사용하여 읽을 수 있는 텍스트의 최소 크기를 확인할 수 있습니다. 이것은 다음과 같을 것입니다: `width: max(45ch, 50%);`. 여기서 브라우저는 `45ch` 또는 `50%` 중 더 큰 것을 선택합니다. 이는 요소가 *최소한* `45ch` 이상이어야 함을 의미합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-width.mp4">
+  </source></video>
+  <figcaption>clamp() 함수를 사용하여 최소 및 최대 너비를 제한합니다.</figcaption></figure>
+
+## 패딩 관리
+
+`min()` 함수가 "최대" 값을 설정하고 `max()` 가 "최소" 값을 설정하는 위와 같은 개념을 사용하여 `max()`로 최소 패딩 크기를 설정할 수 있습니다. 이 예제는 [CSS Tricks](https://css-tricks.com/using-max-for-an-inner-element-max-width/)에서 가져온 것입니다. 여기에서 독자 Caluã de Lacerda Pataca는 다음과 같은 아이디어를 공유했습니다. 요소가 더 큰 화면 크기에서 추가 패딩을 가질 수 있도록 하고 특히 인라인 패딩에서 더 작은 화면 크기에서는 최소 패딩을 유지하는 것입니다. 이를 달성하려면 `calc()`을 사용하고 양쪽에서 최소 패딩을 뺍니다. `calc((100vw - var(--contentWidth)) / 2)`, *혹은* max를 사용하세요. `max(2rem, 50vw - var(--contentWidth) / 2)`. 합치면 이렇게 됩니다.
+
+```css
+footer {
+  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-padding.mp4">
+  </source></video>
+  <figcaption>max() 함수를 사용하여 구성 요소에 대한 최소 패딩을 설정합니다. <a href="https://codepen.io/chriscoyier/pen/qBZqNKa">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+## 유동적인 타이포그래피
+
+[유동적인 타이포그래피](https://www.smashingmagazine.com/2016/05/fluid-typography/)를 가능하게 하기 위해 [Mike Riethmeuller](https://twitter.com/mikeriethmuller)는 `calc()` 함수를 사용하여 최소 글꼴 크기, 최대 글꼴 크기를 설정하고 최소에서 최대로 크기 조정을 허용하는 기술을 대중화했습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/fliud-type.mp4">
+  </source></video>
+  <figcaption>clamp()를 사용하여 유동적인 타이포그래피를 만듭니다. <a href="https://codepen.io/una/pen/ExyYXaN">Codepen의 데모를 참조하십시오.</a></figcaption></figure>
+
+`clamp()`를 사용하면 이것을 더 명확하게 작성할 수 있습니다. 복잡한 문자열을 요구하는 대신 브라우저가 작업을 수행할 수 있습니다. 허용되는 최소 글꼴 크기(예 `1.5rem`), 최대 크기(예: `3rem`) 및 이상적인 크기로 `5vw`를 설정 합니다.
+
+이제 훨씬 더 간결한 코드를 사용하여 제한적인 최소값과 최대값에 도달할 때까지 페이지의 표시 영역 너비에 따라 크기가 조정되는 타이포그래피를 얻습니다.
+
+```css
+p {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+{% Aside 'warning' %} `max()` 또는 `clamp()`로 얻을 수 있는 텍스트의 크기를 제한하면 [1.4.4 텍스트 크기 조정(AA)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text)에 따라 WCAG 오류가 발생할 수 있습니다. 사용자가 텍스트를 원래 크기의 200%로 조정할 수 없기 때문입니다. [확대/축소로 결과를 테스트](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html)하십시오. {% endAside %}
+
+## 결론
+
+CSS 수학 함수인 `min()` , `max()` 및 `clamp()`는 매우 강력하고 잘 지원되며 반응형 UI를 구축하는 데 도움이 될 수 있습니다. 더 많은 리소스를 보려면 다음을 확인하세요.
+
+- [MDN의 CSS 값 및 단위](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [CSS 값 및 단위 레벨 4 사양](https://www.w3.org/TR/css-values-4/)
+- [CSS Trick: 내부 요소 너비에 대한 기사](https://css-tricks.com/using-max-for-an-inner-element-max-width/)
+- [Ahmad Shadeed: min(), max(), clamp() 살펴보기](https://ishadeed.com/article/css-min-max-clamp/)
+
+[Unsplash의 @yer_a_wizard](https://unsplash.com/@yer_a_wizard) 표지 이미지.
diff --git a/src/site/content/ko/blog/monitor-total-page-memory-usage/index.md b/src/site/content/ko/blog/monitor-total-page-memory-usage/index.md
new file mode 100644
index 00000000000..ac91448536c
--- /dev/null
+++ b/src/site/content/ko/blog/monitor-total-page-memory-usage/index.md
@@ -0,0 +1,265 @@
+---
+layout: post
+title: "`measureUserAgentSpecificMemory()`를 사용하여 웹 페이지의 총 메모리 사용량 모니터링"
+subhead: |2
+
+  회귀를 감지하기 위해 프로덕션에서 웹 페이지의 메모리 사용량을 측정하는 방법을 알아보세요.
+description: |2
+
+  회귀를 감지하기 위해 프로덕션에서 웹 페이지의 메모리 사용량을 측정하는 방법을 알아보세요.
+updated: 2020-10-19
+date: 2020-04-13
+authors:
+  - ulan
+hero: image/admin/Ne2U4cUtHG6bJ0YeIkt5.jpg
+alt: |2
+
+  녹색 RAM 스틱. Unsplash에 있는 Harrison Broadbent의 사진.
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113"
+tags:
+  - blog
+  - memory
+  - javascript
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+**업데이트**
+
+**2021년 4월 23일**: out-of-process iframe에 대한 참고 사항으로 상태를 업데이트하고 API의 범위를 명확히 했습니다.
+
+**2021년 1월 20일**: `performance.measureMemory`가 `performance.measureUserAgentSpecificMemory`로 이름이 변경되고 기본적으로 [사용 오리진 간 격리](/coop-coep) 웹 페이지에 대해 Chrome 89에서 활성화됩니다. 결과 형식도 Origin Trial 버전에 비해 약간 [변경되었습니다.](https://github.com/WICG/performance-measure-memory/blob/master/ORIGIN_TRIAL.md#result-differences) {% endAside %}
+
+브라우저는 웹 페이지의 메모리를 자동으로 관리합니다. 웹 페이지가 객체를 생성할 때마다 브라우저는 객체를 저장하기 위해 "후드 아래" 메모리 청크를 할당합니다. 메모리는 유한한 리소스이기 때문에 브라우저는 객체가 더 이상 필요하지 않은 때를 감지하고 기본 메모리 청크를 해제하기 위해 가비지 수집을 수행합니다. 하지만 탐지는 완벽하지 않으며, 완벽한 탐지는 불가능한 작업임이 [입증](https://en.wikipedia.org/wiki/Halting_problem)되었습니다. 따라서 브라우저는 "객체에 도달할 수 있음"이라는 개념으로 "객체가 필요합니다"라는 개념을 근사합니다. 웹 페이지가 해당 변수와 도달 가능한 다른 객체의 필드를 통해 객체에 도달할 수 없는 경우 브라우저는 객체를 안전하게 회수할 수 있습니다. 이 두 개념의 차이로 인해 다음 예제와 같이 메모리 누수가 발생합니다.
+
+```javascript
+const object = { a: new Array(1000), b: new Array(2000) };
+setInterval(() => console.log(object.a), 1000);
+```
+
+여기서 더 큰 배열 `b`는 더 이상 필요하지 않지만 콜백에서 `object.b`를 통해 여전히 연결할 수 있기 때문에 브라우저는 이를 회수하지 않습니다. 따라서 더 큰 배열의 메모리가 누출됩니다.
+
+메모리 누수는 [웹에서 만연](https://docs.google.com/presentation/d/14uV5jrJ0aPs0Hd0Ehu3JPV8IBGc3U8gU6daLAqj6NrM/edit#slide=id.p)합니다. 이벤트 리스너 등록 취소를 잊어버리거나, 실수로 iframe에서 객체를 캡처하거나, 작업자를 닫지 않거나, 객체를 배열에 누적하는 등의 방식으로 이벤트 리스너를 쉽게 도입할 수 있습니다. 웹 페이지에 메모리 누수가 있는 경우 시간이 지남에 따라 메모리 사용량이 증가하고 웹 페이지가 느리고 사용자에게 부풀려 보입니다.
+
+이 문제를 해결하는 첫 번째 단계는 측정입니다. 새로운 [`performance.measureUserAgentSpecificMemory()` API](https://github.com/WICG/performance-measure-memory)를 통해 개발자는 프로덕션에서 웹 페이지의 메모리 사용량을 측정하여 로컬 테스트를 통과하는 메모리 누수를 감지할 수 있습니다.
+
+## `performance.measureUserAgentSpecificMemory()`는 기존 `performance.memory` API와 어떻게 다릅니까? {: #legacy-api }
+
+기존의 비표준 `performance.memory` API에 익숙하다면 새 API와 어떻게 다른지 궁금할 것입니다. 주요 차이점은 이전 API는 JavaScript 힙의 크기를 반환하는 반면 새 API는 웹 페이지에서 사용하는 메모리를 추정한다는 것입니다. 이 차이는 Chrome이 여러 웹 페이지(또는 동일한 웹 페이지의 여러 인스턴스)와 동일한 힙을 공유할 때 중요합니다. 이 경우 기존 API의 결과가 임의로 해제될 수 있습니다. 구 API는 "힙"과 같은 구현별 용어로 정의되어 있기 때문에 표준화하는 것은 희망이 없습니다.
+
+또 다른 차이점은 새 API가 가비지 수집 중에 메모리 측정을 수행한다는 것입니다. 이렇게 하면 결과의 노이즈가 줄어들지만 결과가 생성될 때까지 시간이 걸릴 수 있습니다. 다른 브라우저는 가비지 수집에 의존하지 않고 새 API를 구현하기로 결정할 수 있습니다.
+
+## 제안된 사용 사례 {: #use-cases }
+
+웹 페이지의 메모리 사용량은 이벤트, 사용자 작업 및 가비지 컬렉션의 타이밍에 따라 다릅니다. 이것이 메모리 측정 API가 프로덕션에서 메모리 사용 데이터를 집계하기 위한 이유입니다. 개별 호출의 결과는 덜 유용합니다. 사용 사례 예시:
+
+- 새로운 메모리 누수를 포착하기 위해 웹 페이지의 새 버전을 롤아웃하는 동안 회귀 감지.
+- 새로운 기능을 A/B 테스트하여 메모리 영향을 평가하고 메모리 누수를 감지합니다.
+- 메모리 누수의 유무를 확인하기 위해 세션 기간과 메모리 사용량을 연관시킵니다.
+- 메모리 사용량을 사용자 메트릭과 연관시켜 메모리 사용량의 전반적인 영향을 이해합니다.
+
+## 브라우저 호환성 {: #compatibility }
+
+현재 API는 원본 평가판으로 Chrome 83에서만 지원됩니다. API의 결과는 구현에 따라 크게 달라집니다. 브라우저는 메모리에서 객체를 표현하는 방식과 메모리 사용량을 추정하는 방식이 다르기 때문입니다. 적절한 계산이 너무 비싸거나 실행 불가능한 경우 브라우저는 일부 메모리 영역을 계산에서 제외할 수 있습니다. 따라서 브라우저 간에 결과를 비교할 수 없습니다. 동일한 브라우저에 대한 결과를 비교하는 것은 의미가 있습니다.
+
+## 현재 상태 {: #status }
+
+<div><table>
+    <thead>
+      <tr>
+        <th>단계</th>
+        <th>상태</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1. 설명자 만들기</td>
+        <td><a href="https://github.com/WICG/performance-measure-memory">완료</a></td>
+      </tr>
+      <tr>
+        <td>2. 사양의 초기 초안 작성</td>
+        <td><a href="https://wicg.github.io/performance-measure-memory/">완료</a></td>
+      </tr>
+      <tr>
+        <td>3. 피드백 수집 및 디자인 반복</td>
+        <td><a href="#feedback">진행 중</a></td>
+      </tr>
+      <tr>
+        <td>4. 오리진 트라이얼</td>
+        <td><a href="https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113">완료</a></td>
+      </tr>
+      <tr>
+        <td>5. 출시</td>
+        <td>Chrome 89에서 기본적으로 활성화됨</td>
+      </tr>
+    </tbody>
+</table></div>
+
+## `performance.measureUserAgentSpecificMemory()` 사용 {: 사용 }
+
+### about://flags를 통해 활성화
+
+오리진 평가판 토큰 없이 `performance.measureUserAgentSpecificMemory()`를 실험하려면 `about://flags` `#experimental-web-platform-features` 플래그를 활성화하십시오.
+
+### 특징 감지
+
+실행 환경이 교차 출처 정보 누출 방지를 위한 보안 요구 사항을 충족하지 않는 경우 `performance.measureUserAgentSpecificMemory()` 기능이 [SecurityError](https://developer.mozilla.org/docs/Web/API/DOMException#exception-SecurityError)와 함께 실패할 수 있습니다. Chrome에서 원본 평가판을 사용하는 동안 API를 사용하려면 [사이트 격리](https://developers.google.com/web/updates/2018/07/site-isolation)가 활성화되어 있어야 합니다. API가 제공되면 [교차 출처 격리](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)에 의존합니다. [웹 페이지는 COOP+COEP 헤더](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)를 설정하여 교차 출처 격리를 선택할 수 있습니다.
+
+```javascript
+if (performance.measureUserAgentSpecificMemory) {
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
+    } else {
+      throw error;
+    }
+  }
+  console.log(result);
+}
+```
+
+### 로컬 테스트
+
+Chrome은 가비지 수집 중에 메모리 측정을 수행합니다. 즉, API가 결과 약속을 즉시 확인하지 않고 대신 다음 가비지 수집을 기다립니다. API는 현재 20초로 설정된 시간 초과 후 가비지 수집을 강제 실행합니다. `--enable-blink-features='ForceEagerMeasureMemory'` 명령줄 플래그로 Chrome을 시작하면 시간 초과가 0으로 줄어들고 로컬 디버깅 및 테스트에 유용합니다.
+
+## 예시
+
+API의 권장 사용법은 전체 웹 페이지의 메모리 사용량을 샘플링하고 그 결과를 집계 및 분석을 위해 서버로 보내는 글로벌 메모리 모니터를 정의하는 것입니다. 가장 간단한 방법은 예를 들어 `M` 분마다 주기적으로 샘플링하는 것입니다. 그러나 메모리 피크가 샘플 간에 발생할 수 있기 때문에 데이터에 바이어스가 발생합니다. 다음 예제는 샘플이 임의의 시점[(데모](https://performance-measure-memory.glitch.me/), [소스](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0))에서 발생할 가능성이 동일하게 보장하는 [푸아송 프로세스](https://en.wikipedia.org/wiki/Poisson_point_process)를 사용하여 편향되지 않은 메모리 측정을 수행하는 방법을 보여줍니다.
+
+먼저 무작위 간격으로 `setTimeout()`을 사용하여 다음 메모리 측정을 예약하는 함수를 정의합니다. 이 함수는 메인 창에서 페이지 로드 후에 호출되어야 합니다.
+
+```javascript
+function scheduleMeasurement() {
+  if (!performance.measureUserAgentSpecificMemory) {
+    console.log(
+      'performance.measureUserAgentSpecificMemory() is not available.',
+    );
+    return;
+  }
+  const interval = measurementInterval();
+  console.log(
+    'Scheduling memory measurement in ' +
+      Math.round(interval / 1000) +
+      ' seconds.',
+  );
+  setTimeout(performMeasurement, interval);
+}
+
+// Start measurements after page load on the main window.
+window.onload = function () {
+  scheduleMeasurement();
+};
+```
+
+`measurementInterval()` 함수는 평균적으로 5분마다 하나의 측정이 있도록 임의의 간격을 밀리초 단위로 계산합니다. 함수 이면의 수학에 관심이 있는 경우 [지수 분포](https://en.wikipedia.org/wiki/Exponential_distribution#Computational_methods)를 참조하세요.
+
+```javascript
+function measurementInterval() {
+  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
+  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
+}
+```
+
+마지막으로 async `performMeasurement()` 함수는 API를 호출하고 결과를 기록하고 다음 측정을 예약합니다.
+
+```javascript
+async function performMeasurement() {
+  // 1. Invoke performance.measureUserAgentSpecificMemory().
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('The context is not secure.');
+      return;
+    }
+    // Rethrow other errors.
+    throw error;
+  }
+  // 2. Record the result.
+  console.log('Memory usage:', result);
+  // 3. Schedule the next measurement.
+  scheduleMeasurement();
+}
+```
+
+결과는 다음과 같을 수 있습니다.
+
+```javascript
+// Console output:
+{
+  bytes: 60_000_000,
+  breakdown: [
+    {
+      bytes: 40_000_000,
+      attribution: [
+        {
+          url: "https://foo.com",
+          scope: "Window",
+        },
+      ]
+      types: ["JS"]
+    },
+    {
+      bytes: 0,
+      attribution: [],
+      types: []
+    },
+    {
+      bytes: 20_000_000,
+      attribution: [
+        {
+          url: "https://foo.com/iframe",
+          container: {
+            id: "iframe-id-attribute",
+            src: "redirect.html?target=iframe.html",
+          },
+        },
+      ],
+      types: ["JS"]
+    },
+  ]
+}
+```
+
+총 메모리 사용량 추정치는 `bytes` 필드에 반환됩니다. 바이트 값이 [숫자 구분자 구문](https://v8.dev/features/numeric-separators)을 사용하고 있습니다. 이 값은 구현에 따라 크게 달라지며 여러 브라우저에서 비교할 수 없습니다. 동일한 브라우저의 다른 버전 간에도 변경될 수 있습니다. 원본 평가판 동안 값에는 기본 창과 모든 **동일 사이트** iframe 및 관련 창의 JavaScript 메모리 사용량이 포함됩니다. API가 제공되면 이 값은 현재 프로세스의 모든 iframe, 관련 창 및 웹 작업자의 JavaScript 및 DOM 메모리를 설명합니다. [API는 사이트 격리](https://www.chromium.org/Home/chromium-security/site-isolation)가 활성화된 경우 [교차 사이트 out-of-process iframe](https://www.chromium.org/developers/design-documents/oop-iframes)의 메모리를 측정하지 않습니다.
+
+`breakdown` 목록은 사용된 메모리에 대한 추가 정보를 제공합니다. 각 항목은 메모리의 일부를 설명하고 URL로 식별되는 일련의 창, iframe 및 작업자에 대한 속성을 지정합니다. `types` 필드는 메모리와 관련된 구현별 메모리 유형을 나열합니다.
+
+모든 목록을 일반적인 방식으로 처리하고 특정 브라우저를 기반으로 가정을 하드코딩하지 않는 것이 중요합니다. 예를 들어, 일부 브라우저는 빈 `breakdown` 또는 빈 `attribution`을 반환할 수 있습니다. 다른 브라우저는 이러한 항목 중 메모리를 소유한 항목을 구별할 수 없음을 나타내는 `attribution`은 여러 항목을 반환할 수 있습니다.
+
+## 피드백 {: #feedback }
+
+[Web Performance Community Group](https://www.w3.org/community/webperfs/) 및 Chrome 팀은 `performance.measureUserAgentSpecificMemory()`에 대한 생각과 경험을 듣고 싶습니다.
+
+### API 디자인에 대해 알려주세요
+
+API에 대해 예상대로 작동하지 않는 것이 있습니까? 아니면 아이디어를 구현하는 데 필요한 속성이 누락되었습니까? [performance.measureUserAgentSpecificMemory() GitHub 리포지토리](https://github.com/WICG/performance-measure-memory/issues)에 사양 문제를 제출하거나 기존 문제에 대한 생각을 추가하세요.
+
+### 구현 문제 보고
+
+Chrome 구현에서 버그를 찾으셨나요? 아니면 구현이 사양과 다른가요? [new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EPerformanceAPIs)에서 버그를 신고하세요. 가능한 한 많은 세부 정보를 포함하고 버그를 재현하기 위한 간단한 지침을 제공하고 **구성 요소**를 `Blink>PerformanceAPIs`로 설정해야 합니다. [Glitch](https://glitch.com/)는 빠르고 쉬운 재현을 공유하는 데 유용합니다.
+
+### 지원 표시
+
+`performance.measureUserAgentSpecificMemory()`를 사용할 계획입니까? 공개 지원은 Chrome 팀이 기능의 우선 순위를 지정하고 다른 브라우저 공급업체에서 기능을 지원하는 것이 얼마나 중요한지 보여주는 데 도움이 됩니다. [@ChromiumDev](https://twitter.com/chromiumdev)로 트윗을 보내어 사용 위치와 방법을 알려주세요.
+
+## 유용한 링크 {: #helpful }
+
+- [설명자](https://github.com/WICG/performance-measure-memory)
+- [데모](https://performance-measure-memory.glitch.me/) | [데모 소스](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0)
+- [오리진 트라이얼](https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113)
+- [추적 버그](https://bugs.chromium.org/p/chromium/issues/detail?id=1049093)
+- [ChromeStatus.com 항목](https://www.chromestatus.com/feature/5685965186138112)
+
+## 감사의 말
+
+API 설계 검토를 담당한 Domenic Denicola, Yoav Weiss, Mathias Bynens와 Chrome에서 코드 검토를 담당한 Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz에게 큰 감사를 드립니다. 또한 API를 크게 개선한 귀중한 사용자 피드백을 제공한 Per Parker, Philipp Weis, Olga Belomestnykh, Matthew Bolohan 및 Neil Mckay에게도 감사드립니다.
+
+[Unsplash](https://unsplash.com)에 있는 [Harrison Broadbent의](https://unsplash.com/@harrisonbroadbent) [영웅 이미지](https://unsplash.com/photos/5tLfQGURzHM)
diff --git a/src/site/content/ko/blog/off-main-thread/index.md b/src/site/content/ko/blog/off-main-thread/index.md
new file mode 100644
index 00000000000..bbd150d4775
--- /dev/null
+++ b/src/site/content/ko/blog/off-main-thread/index.md
@@ -0,0 +1,184 @@
+---
+title: 웹 작업자를 사용하여 브라우저의 메인 스레드에서 JavaScript 실행
+subhead: 오프 메인 스레드 아키텍처가 앱의 안정성과 사용자 경험을 크게 향상시킬 수 있습니다.
+description: 브라우저의 메인 스레드는 엄청나게 과중됩니다. 웹 작업자를 사용하여 메인 스레드에서 코드를 옮기면 앱의 안정성과 사용자 경험을 크게 향상시킬 수 있습니다.
+authors:
+  - surma
+date: 2019-12-05
+tags:
+  - blog
+  - performance
+  - test-post
+---
+
+지난 20년 동안 웹은 몇 가지 스타일과 이미지가 있는 정적인 문서에서 복잡하고 동적인 응용 프로그램으로 극적으로 발전했습니다. 하지만 한 가지는 거의 변경되지 않은 채 그대로 남아 있습니다. 사이트를 렌더링하고 JavaScript를 실행하는 스레드는 몇 가지 예외 사항을 제외하고 브라우저 탭당 한 개뿐입니다.
+
+결과적으로 메인 스레드는 엄청나게 과중되었습니다. 그리고 웹 앱의 복잡성이 심화됨에 따라 메인 스레드는 성능에 심각한 병목 현상이 발생합니다. 설상가상으로 특정 사용자의 메인 스레드에서 코드를 실행하는 데 소요되는 시간은 장치 기능이 성능에 막대한 영향을 미치기 때문에 **거의 전혀 예측할 수 없습니다.** 사용자가 매우 제한된 피처폰에서 고출력, 고재생률 플래그십 머신에 이르기까지 점점 더 다양한 기기에서 웹에 액세스함에 따라 이러한 예측 불가능성은 더욱 커질 것입니다.
+
+정교한 웹 앱이 [RAIL 모델](/rail/)(인간의 인식과 심리학에 대한 경험적 데이터를 기반으로 함)과 같은 성능 가이드라인을 안정적으로 충족하기를 원한다면 **메인 스레드(OMT)에서** 코드를 실행할 수 있는 방법이 필요합니다.
+
+{% Aside %} OMT 아키텍처 사례에 대해 자세히 알고 싶다면 아래에 제공되어 있는 저의 CDS 2019 강연을 시청하세요. {% endAside %}
+
+{% YouTube '7Rrv9qFMWNM' %}
+
+## 웹 작업자로 스레딩
+
+다른 플랫폼은 일반적으로 스레드에 하나의 기능을 제공하여 병렬 작업을 지원합니다. 이러한 기능은 나머지 프로그램과 병렬로 실행됩니다. 두 스레드에서 동일한 변수에 액세스할 수 있으며 이러한 공유 리소스에 대한 액세스를 뮤텍스 및 세마포와 동기화하여 경쟁 조건을 방지할 수 있습니다.
+
+JavaScript에서는 2007년부터 사용되어 왔으며 2012년부터 모든 주요 브라우저에서 지원되는 웹 작업자로부터 거의 유사한 기능을 얻을 수 있습니다. 웹 작업자는 메인 스레드와 병렬로 실행되지만 OS 스레딩과 달리 변수를 공유할 수 없습니다.
+
+{% Aside %} 웹 작업자를 [서비스 작업자](/service-workers-cache-storage) 또는 [worklet](https://developer.mozilla.org/docs/Web/API/Worklet)과 혼동하지 마십시오. 이름은 비슷하지만 기능과 용도는 다릅니다. {% endAside %}
+
+웹 작업자를 만들려면 작업자 생성자에 파일을 전달하세요. 그러면 작업자 생성자가 별도의 스레드에서 해당 파일을 실행하기 시작합니다.
+
+```js
+const worker = new Worker("./worker.js");
+```
+
+[`postMessage` API](https://developer.mozilla.org/docs/Web/API/Window/postMessage)를 통해 메시지를 전송하여 웹 작업자와 통신합니다. `postMessage` 호출의 매개변수로 메시지 값을 전달한 다음 메시지 이벤트 리스너를 작업자에 추가합니다.
+
+<!--lint disable no-duplicate-headings-in-section-->
+
+### `main.js`
+
+```js/1
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+```
+
+### `worker.js`
+
+```js
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+});
+```
+
+메인 스레드로 메시지를 다시 보내려면 웹 작업자에서 동일한 `postMessage` API를 사용하고 메인 스레드에서 이벤트 리스너를 설정하세요.
+
+### `main.js`
+
+```js/2-4
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+worker.addEventListener("message", event => {
+  console.log(event.data);
+});
+```
+
+### `worker.js`
+
+```js/3
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+  postMessage(a+b);
+});
+```
+
+물론 이 접근 방식은 다소 제한적입니다. 역사적으로 웹 작업자는 주로 메인 스레드에서 힘든 작업의 한 부분을 옮기는 데 사용되었습니다. 단일 웹 작업자로 여러 작업을 처리하려고 하면 빠르게 다루는 것이 어려워집니다. 매개변수뿐만 아니라 메시지의 작업도 인코딩해야 하고 요청에 대한 응답을 일치시키기 위해 부기를 수행해야 합니다. 웹 작업자가 더 널리 채택되지 않은 이유는 이러한 복잡성 때문일 수 있습니다.
+
+그러나 메인 스레드와 웹 작업자 간의 일부 통신 어려움을 제거할 수 있다면 이 모델은 많은 사용 사례에 매우 적합할 것입니다. 그리고 운 좋게도 그와 같은 일을 하는 라이브러리가 있습니다!
+
+## Comlink: 웹 작업자가 작업을 덜 수행하도록 하기
+
+[Comlink](http://npm.im/comlink)는 `postMessage`의 세부 사항에 대해 생각할 필요 없이 웹 작업자를 사용할 수 있도록 하는 것을 목표로 하는 라이브러리입니다. Comlink를 사용하면 스레딩을 지원하는 다른 프로그래밍 언어처럼 웹 작업자와 메인 스레드 간에 변수를 공유할 수 있습니다.
+
+웹 작업자에서 가져오고 메인 스레드에 노출할 함수 집합을 정의하여 Comlink를 설정합니다. 그런 다음 메인 스레드에서 Comlink를 가져오고 작업자를 래핑하고 노출된 함수에 액세스합니다.
+
+### `worker.js`
+
+```js
+import {expose} from "comlink";
+
+const api = {
+  someMethod() { /* … */ }
+}
+expose(api);
+```
+
+### `main.js`
+
+```js
+import {wrap} from "comlink";
+
+const worker = new Worker("./worker.js");
+const api = wrap(worker);
+```
+
+메인 스레드의 `api` 변수는 모든 함수가 값 자체가 아닌 값에 대한 약속을 반환한다는 점을 제외하면 웹 작업자의 변수와 동일하게 동작합니다.
+
+## 웹 작업자로 이동해야 하는 코드는 무엇입니까?
+
+웹 작업자는 DOM 및 [WebUSB](https://developer.mozilla.org/docs/Web/API/USB), [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) 또는 [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)와 같은 많은 API에 액세스할 수 없으므로 작업자에 이러한 액세스에 의존하는 앱 조각을 넣을 수 없습니다. 그럼에도 불구하고, 작업자에게 이동되는 모든 작은 코드 조각은 사용자 인터페이스 업데이트와 같이 거기에 *있어야 하는* 항목에 대해 기본 스레드에서 더 많은 여유 공간을 구입합니다.
+
+{% Aside %} 메인 스레드에 대한 UI 액세스를 제한하는 것은 실제로 다른 언어에서 일반적입니다. 사실 iOS와 Android 모두 메인 스레드를 *UI 스레드*라고 부릅니다. {% endAside %}
+
+웹 개발자의 한 가지 문제는 대부분의 웹 앱이 Vue 또는 React와 같은 UI 프레임워크에 의존하여 앱의 모든 것을 오케스트레이션한다는 것입니다. 모든 것은 프레임워크의 구성 요소이므로 본질적으로 DOM에 연결됩니다. 이는 OMT 아키텍처로의 마이그레이션을 어렵게 만드는 것 처럼 보입니다.
+
+하지만 UI 문제가 상태 관리와 같이 다른 문제와 분리된 모델로 전환하면 웹 작업자가 프레임워크 기반 앱에서도 상당히 유용할 수 있습니다. 이것이 바로 PROXX에서 취한 접근 방식입니다.
+
+## PROXX: OMT 사례 연구
+
+Google Chrome 팀은 오프라인 작업 및 매력적인 사용자 경험을 포함하여 [Progressive Web App](/load-faster-like-proxx/) 요구 사항을 충족하는 Minesweeper 클론으로 [PROXX](https://developers.google.com/web/progressive-web-apps)를 개발했습니다. 불행히도 게임의 초기 버전은 피처폰과 같은 제한된 장치에서 제대로 수행되지 않아 팀은 메인 스레드가 병목 현상임을 깨닫게 되었습니다.
+
+팀은 웹 작업자를 사용하여 게임의 시각적 상태를 로직과 분리하기로 결정했습니다.
+
+- 메인 스레드는 애니메이션 및 전환 렌더링을 처리합니다.
+- 웹 작업자는 순전히 계산적인 게임 로직을 처리합니다.
+
+{% Aside %} 이 접근 방식은 Redux [Flux 패턴](https://facebook.github.io/flux/)과 유사하므로 많은 Flux 앱을 OMT 아키텍처로 상당히 쉽게 마이그레이션할 수 있습니다. Redux 앱에 OMT를 적용하는 방법에 대해 자세히 알아보려면 [이 블로그 게시물](http://dassur.ma/things/react-redux-comlink/)을 살펴보세요. {% endAside %}
+
+OMT는 PROXX의 피처폰 성능에 흥미로운 영향을 미쳤습니다. 비 OMT 버전에서 UI는 사용자가 상호 작용한 후 6초 동안 정지됩니다. 피드백이 없으며 사용자는 다른 작업을 수행하기 전에 6초 동안 기다려야 합니다.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption><strong>비-OMT</strong> 버전의 PROXX에서 UI 응답 시간.</figcaption></figure>
+
+하지만 OMT 버전에서는 게임이 UI 업데이트를 완료하는 데 *12초*가 걸립니다. 성능 손실처럼 보이지만 실제로는 사용자에 대한 피드백을 증가시킵니다. 앱이 프레임을 전혀 전달하지 않는 비-OMT 버전보다 더 많은 프레임을 전달하기 때문에 속도가 느려집니다. 따라서 사용자는 어떤 일이 일어나고 있는지 알고 UI가 업데이트될 때 계속 플레이할 수 있으므로 더 나은 게임 환경을 누릴 수 있습니다.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>PROXX의 <strong>OMT</strong> 버전에서 UI 응답 시간.</figcaption></figure>
+
+이것은 의식적인 트레이드 오프입니다 : 우리가 제한된 장치의 사용자에게 하이 엔드 기기의 사용자를 처벌하지 않고 더 나은 *느낌* 경험을 제공합니다.
+
+## OMT 아키텍처의 의미
+
+PROXX 예에서 볼 수 있듯이 OMT는 앱이 더 넓은 범위의 기기에서 안정적으로 실행되도록 하지만 앱을 더 빠르게 만들지는 않습니다.
+
+- 작업을 줄이는 것이 아니라 메인 스레드에서 작업을 옮기는 것일 뿐입니다.
+- 웹 작업자와 메인 스레드 간의 추가 통신 오버헤드로 인해 작업이 약간 느려지는 경우도 있습니다.
+
+### 절충안 고려
+
+메인 스레드는 JavaScript가 실행되는 동안 스크롤과 같은 사용자 상호 작용을 자유롭게 처리할 수 있으므로 총 대기 시간이 약간 더 길더라도 삭제된 프레임이 더 적습니다. 삭제된 프레임의 경우 오류 한계가 더 작으므로 프레임을 삭제하는 것보다 사용자를 조금 더 기다리게 하는 것이 좋습니다. 프레임 삭제는 밀리초 내에 발생하지만 사용자가 대기 시간을 인식하기 전에 *수백 밀리초*가 있습니다.
+
+장치 전반에서 성능을 예측할 수 없기 때문에 OMT 아키텍처의 목표는 병렬화에 대한 성능 혜택에 관한 것이 아니라 실제로 **위험을 감소**(매우 다양한 런타임 조건에서 애플리케이션을 더욱 강력하게 만듦)하는 것에 관한 것입니다. UX의 탄력성과 개선 효과를 증대하는 것은 속도를 약간 절충하는 것보다 가치가 있습니다.
+
+{% Aside %} 개발자는 메인 스레드와 웹 작업자 간에 복잡한 개체를 복사하는 비용에 대해 우려하는 경우가 종종 있습니다. 자세한 내용은 제 강연에 나와 있지만 일반적으로 개체의 문자열화된 JSON 표현이 10KB 미만인 경우 성능 예산을 초과하지 않아야 합니다. 더 큰 개체를 복사해야 하는 경우 [ArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 또는 [WebAssembly](https://webassembly.org/)를 사용하는 것이 좋습니다. 이 문제에 대한 자세한 내용은 [`postMessage` 성능에 대한 이 블로그 게시물](https://dassur.ma/things/is-postmessage-slow)에서 읽을 수 있습니다. {% endAside %}
+
+### 툴링에 대한 참고 사항
+
+웹 작업자는 아직 주류가 아니므로 [WebPack](https://webpack.js.org/) 및 [Rollup](https://github.com/rollup/rollup)과 같은 대부분의 모듈 도구는 즉시 지원하지 않습니다. ([Parcel](https://parceljs.org/)은 지원하지만 말이죠!) 다행히도 웹 작업자를 WebPack과 Rollup으로 *작업*할 수 있는 플러그인이 있습니다.
+
+- WebPack용 [작업자 플러그인](https://github.com/GoogleChromeLabs/worker-plugin)
+- 롤업용 [rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread)
+
+## 요약
+
+특히 점점 더 글로벌화되고 있는 시장에서 우리 앱이 가능한 한 안정적이고 액세스 가능하도록 하려면 제한된 장치를 지원해야 합니다. 이는 전 세계 대부분의 사용자가 웹에 액세스하는 방식입니다. OMT는 고급 장치 사용자에게 부정적인 영향을 주지 않으면서 이러한 장치의 성능을 증대할 수 있는 유망한 방법을 제공합니다.
+
+또한 OMT에는 다음과 같은 부차적인 이점이 있습니다.
+
+- JavaScript 실행 비용을 별도의 스레드로 전가합니다.
+- *구문 분석* 비용이 전가되므로 UI 부팅이 더 빨라집니다. 그러면 [First Contentful Paint](/fcp/) 또는 [Time to Interactive](/tti/)가 줄어 역으로 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 점수가 증가할 수 있습니다.
+
+웹 작업자는 두려워할 필요가 없습니다. Comlink와 같은 도구는 작업자로부터 작업을 빼앗고 다양한 웹 애플리케이션을 위한 실용적인 선택이 될 수 있습니다.
diff --git a/src/site/content/ko/blog/one-line-layouts/index.md b/src/site/content/ko/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..b22fdbd4061
--- /dev/null
+++ b/src/site/content/ko/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: CSS 한 줄에서 10가지 현대적인 레이아웃 만나보기
+subhead: 이 게시물은 대단한 효과를 발휘하고 강력한 현대적 레이아웃을 구축하는 데 도움이 되는 몇 가지 강력한 CSS 라인을 집중 조명합니다.
+authors:
+  - una
+description: 이 게시물은 대단한 효과를 발휘하고 강력한 현대적 레이아웃을 구축하는 데 도움이 되는 몇 가지 강력한 CSS 라인을 집중 조명합니다.
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: 성배 레이아웃.
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+최신 CSS 레이아웃을 통해 개발자는 몇 번의 키 입력만으로 의미 있고 강력한 스타일 규칙을 작성할 수 있습니다. 위의 논의와 함께 이 후속 게시물에서는 대단한 효과를 발휘하는 CSS의 10가지 강력한 라인을 살펴봅니다.
+
+{% Glitch { id: '1linelayouts', path: 'README.md', height: 480 } %}
+
+이 데모를 따라하거나 직접 시도하려면 위의 Glitch 임베드를 확인하거나 [1linelayouts.glitch.me](https://1linelayouts.glitch.me)를 방문하세요.
+
+## 01. 가운데 맞춤 완전 해결: `place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+첫 번째 'single-line' 레이아웃의 경우 모든 CSS 영역에서 가장 큰 미스터리인 가운데 맞춤을 해결해 보겠습니다. [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items)를 사용하면 이것이 생각보다 쉽다는 것을 알려드리려고 합니다.
+
+먼저 `display` 메서드로 `grid`를 지정한 다음, 동일한 요소에 `place-items: center`를 작성합니다. `place-items`는 `align-items`와 `justify-items`를 한 번에 모두 설정하는 축약형입니다. `center`로 설정하면 `align-items`와 `justify-items` 모두 `center`로 설정됩니다.
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+이렇게 하면 본질적인 크기에 관계없이 콘텐츠가 상위 요소 내에서 완벽하게 중앙에 오도록 할 수 있습니다.
+
+## 02. 분해된 팬케이크: `flex: <grow> <shrink> <baseWidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+다음은 분해 팬케이크입니다! 이것은 예를 들어 제품의 일부 기능을 설명하는 이미지, 제목 및 일부 텍스트가 포함된 3개의 항목 행이 있을 수 있는 마케팅 사이트에 일반적인 레이아웃입니다. 모바일에서는 콘텐츠를 깔끔하게 쌓아 표시하고 화면 크기가 커지면서 확장되기를 원할 것입니다.
+
+이 효과를 위해 Flexbox를 사용하면 화면 크기가 조정될 때 이러한 요소의 배치를 조정하기 위해 미디어 쿼리가 필요하지 않습니다.
+
+[`flex`](https://developer.mozilla.org/docs/Web/CSS/flex)의 축약형은 `flex: <flex-grow> <flex-shrink> <flex-basis>`를 나타냅니다.
+
+이 때문에 상자가 `<flex-basis>` 크기로 채워지고 더 작은 크기에서는 줄어들되 *늘려서* 추가 공간을 채우지 않게 하려면 다음과 같이 작성합니다: `flex: 0 1 <flex-basis>`. 이 경우 `<flex-basis>`는 `150px`이므로 다음과 같습니다.
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+다음 라인으로 줄바꿈할 때 상자가 펼쳐지고 공간을 채우도록 하기를 *원한다면* 다음과 같이 `<flex-grow>`를 `1`로 설정합니다.
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+이제 화면 크기를 늘리거나 줄이면 이러한 플렉스 항목이 줄어들고 늘어납니다.
+
+## 03. 사이드바가 하는 말: `grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+이 데모는 그리드 레이아웃을 위한 [minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) 함수를 활용합니다. 여기서 하려는 것은 최소 사이드바 크기를 `150px`이 되도록 설정하되, 더 큰 화면에서는 `25%`까지 늘어나도록 하는 것입니다. 사이드바는 상위 수평 공간의 `25%`를 차지하며, 이 `25%`가 `150px`보다 작아질 때까지는 계속 이 상태를 유지합니다.
+
+`minmax(150px, 25%) 1fr` 값을 사용하여 grid-template-columns 값으로 이를 추가합니다. 첫 번째 열의 항목(이 경우 사이드바)은 `25%`에서 `150px`의 `minmax`를 가지며, 두 번째 항목(여기서는 `main` 섹션)은 나머지 공간을 단일 `1fr` 트랙으로 차지합니다.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. 팬케이크 스택: `grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+분해된 팬케이크와 달리 이 예제는 화면 크기가 변경될 때 하위 요소를 래핑하지 않습니다. 일반적으로 [고정 바닥글](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers)이라고 하는 이 레이아웃은 웹사이트와 앱, 모바일 애플리케이션(바닥글은 일반적으로 도구 모음) 및 웹사이트(단일 페이지 애플리케이션은 종종 이 전역 레이아웃을 사용함)에 자주 사용됩니다.
+
+`display: grid`를 구성 요소에 추가하면 단일 열 그리드가 제공되지만 기본 영역은 바닥글이 그 아래에 있는 콘텐츠만큼만 높아집니다.
+
+바닥글을 맨 아래에 고정하려면 다음을 추가합니다.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+이렇게 하면 머리글 및 바닥글 내용이 자동으로 하위 요소의 크기를 사용하도록 설정되고 나머지 공간(`1fr`)이 기본 영역에 적용됩니다. 한편, `auto` 크기 행은 하위 요소의 최소 내용 크기를 사용하므로 해당 내용의 크기가 증가하면 행 자체가 조정되어 커집니다.
+
+## 05. 고전적 성배 레이아웃: `grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+이 고전적 성배 레이아웃의 경우 머리글, 바닥글, 왼쪽 사이드바, 오른쪽 사이드바 및 주요 콘텐츠가 있습니다. 이전 레이아웃과 비슷하지만 이제 사이드바가 있습니다!
+
+한 줄의 코드를 사용하여 이 전체 그리드를 작성하려면 `grid-template` 속성을 사용합니다. 이렇게 하면 행과 열을 동시에 설정할 수 있습니다.
+
+속성 및 값 쌍은 다음과 같습니다: `grid-template: auto 1fr auto / auto 1fr auto`. 공백으로 구분된 첫 번째 목록과 두 번째 목록 사이의 슬래시는 행과 열 사이의 구분선입니다.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+머리글과 바닥글에 자동 크기 조정 콘텐츠가 있는 마지막 예에서와 같이 여기에서 왼쪽 및 오른쪽 사이드바는 하위 요소의 고유 크기에 따라 자동으로 크기가 조정됩니다. 그런데 이번에는 세로(높이)가 아닌 가로(가로) 크기입니다.
+
+## 06. 12-스팬 그리드: `grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+다음으로 또 다른 고전적 레이아웃이 있습니다. 바로 12-스팬 그리드입니다. `repeat()` 함수를 사용하여 CSS에서 그리드를 빠르게 작성할 수 있습니다. 그리드 템플릿 열에 `repeat(12th, 1fr);`을 사용하면 `1fr` 각각에 12개의 열이 제공됩니다.
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+이제 12열 트랙 그리드가 있으므로 그리드에 하위 요소를 배치할 수 있습니다. 이를 수행하는 한 가지 방법은 그리드 선을 사용하여 배치하는 것입니다. 예를 들어, `grid-column: 1 / 13`은 첫 번째 줄부터 마지막(13번째) 줄까지 확장되고 12개의 열에 걸쳐집니다. `grid-column: 1 / 5;`은 처음 4개에 걸쳐집니다.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+이를 작성하는 또 다른 방법은 `span` 키워드를 사용하는 것입니다. `span`을 사용하면 시작 선을 설정한 다음 해당 시작점에서 몇 개의 열로 확장할지 설정합니다. 이 경우 `grid-column: 1 / span 12`는 `grid-column: 1 / 13`과 같고 `grid-column: 2 / span 6`은 `grid-column: 2 / 8`과 같습니다.
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM(Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+이 일곱 번째 예에서는 이미 배운 개념을 일부 결합하여 자동으로 배치되는 유연한 하위 요소가 있는 반응형 레이아웃을 만듭니다. 상당히 단출합니다. 여기서 기억해야 할 핵심 항은 `repeat`, `auto-(fit|fill)` 및 `minmax()'`이며, 이를 약어 RAM으로 기억하면 쉽습니다.
+
+모두 함께 보면 다음과 같습니다.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+다시 반복을 사용하지만 이번에는 명시적 숫자 값 대신 `auto-fit`을 사용합니다. 이렇게 하면 이러한 하위 요소를 자동으로 배치할 수 있습니다. 이 하위 요소들은 또한 기본 최소값이 `150px`이고 최대값이 `1fr`입니다. 즉, 작은 화면에서는 전체 `1fr` 너비를 차지하고 각각 `150px` 너비에 도달하면 같은 줄로 흐르기 시작합니다.
+
+`auto-fit`을 사용하면 가로 크기가 150px를 초과할 때 상자가 늘어나서 나머지 공간을 모두 채웁니다. 그러나 이것을 `auto-fill`로 변경하면 minmax 함수의 기본 크기가 초과될 때 늘어나지 않습니다.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. 라인업: `justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+다음 레이아웃의 경우, 여기에서 보여주려는 핵심은 첫 번째 하위 요소와 마지막 하위 요소를 경계 상자의 가장자리에 배치하고 나머지 공간은 요소 사이에 균등하게 분배하는 `justify-content: space-between`입니다. 이러한 카드의 경우, Flexbox 디스플레이 모드에 배치되며 방향은 `flex-direction: column`을 사용하여 열로 설정됩니다.
+
+그러면 제목, 설명 및 이미지 블록이 상위 카드 내부의 세로 열에 배치됩니다. 그런 다음 `justify-content: space-between`을 적용하면 첫 번째(제목) 요소와 마지막(이미지 블록) 요소가 flexbox의 가장자리에 고정되고 그 사이에 있는 설명 텍스트는 각 끝점에 동일한 간격으로 배치됩니다.
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. 내 스타일 클램핑: `clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+여기에서 [브라우저 지원이 적은](https://caniuse.com/#feat=css-math-functions) 몇 가지 기술에 대해 알아보겠습니다. 이러한 기술은 레이아웃 및 반응형 UI 디자인과 관련해서는 흥미로운 의미를 내포할 수 있습니다. 이 데모에서는 `width: clamp(<min>, <actual>, <max>)`와 같이 클램프를 사용하여 너비를 설정합니다.
+
+이것은 절대 최소 및 최대 크기와 실제 크기를 설정합니다. 값을 사용하면 다음과 같을 수 있습니다.
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+여기서 최소 크기는 `23ch` 또는 23자 단위이고 최대 크기는 `46ch`, 46자입니다. [문자 너비 단위](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)는 요소의 글꼴 크기(구체적으로 `0` 글리프의 너비)를 기반으로 합니다. '실제' 크기는 이 요소의 상위 너비의 50%를 나타내는 50%입니다.
+
+여기서 `clamp()` 함수가 하는 일은 50%가 `46ch`(넓은 뷰포트)보다 크거나 `23ch`(작은 뷰포트)보다 작아질 *때까지* 이 요소가 50%의 너비를 유지할 수 있도록 하는 것입니다. 상위 크기를 늘리거나 줄일 때 이 카드의 너비가 클램핑된 최대 지점으로 증가하고 클램핑된 최소 지점으로 감소하는 것을 볼 수 있습니다. 그런 다음 상위의 중앙에 머무르는데, 중앙에 놓이도록 하는 추가 속성을 적용했기 때문입니다. 그 결과, 텍스트가 너무 넓거나(`46ch` 이상) 너무 찌그러지고 좁지(`23ch` 미만) 않으므로 레이아웃을 읽기가 더 쉬워집니다.
+
+이것은 또한 반응형 타이포그래피를 구현하는 좋은 방법입니다. 예를 들어, 다음과 같이 작성할 수 있습니다: `font-size: clamp(1.5rem, 20vw, 3rem)`. 이 경우 헤드라인의 글꼴 크기는 항상 `1.5rem`과 `3rem` 사이에서 클램핑된 상태로 유지되지만 뷰포트의 너비에 맞게 `20vw`의 실제값을 기준으로 증가 및 축소됩니다.
+
+이것은 최소 및 최대 크기 값으로 가독성을 보장하는 훌륭한 기술이지만 모든 최신 브라우저에서 지원되는 것은 아니므로 폴백이 있어야 하고 자신만의 테스트를 수행해야 합니다.
+
+## 10. 종횡비 준수: `aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+마지막으로, 이 마지막 레이아웃 도구는 가장 실험적인 도구입니다. 최근 Chromium 84의 Chrome Canary에 도입되었으며 이를 구현하기 위해 Firefox에서 적극적으로 노력하고 있지만 현재 안정적인 브라우저 버전은 아닙니다.
+
+하지만 이는 자주 마주치는 문제이므로 언급하기로 결정했습니다. 이것은 단순히 이미지의 종횡비를 유지하는 문제입니다.
+
+`aspect-ratio` 속성을 사용하면 카드 크기를 조정할 때 녹색 시각 블록은 이 16 x 9의 종횡비를 유지합니다. `aspect-ratio: 16 / 9`를 사용하여 종횡비를 유지합니다.
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+이 속성 없이 16 x 9 종횡비를 유지하려면 [`padding-top` hack](https://css-tricks.com/aspect-ratio-boxes/)이 필요하며 여기에 `56.25%`의 패딩을 제공하여 top-to-width 비율을 설정해야 합니다. Hack과 백분율 계산 필요성을 피하기 위해 곧 이에 대한 속성이 제공될 것입니다. `1 / 1` 비율로 사각형을 만들고, `2 / 1`로 2대1 비율을 만들고, 설정된 크기 비율로 이 이미지 크기를 조정하는 데 필요한 모든 것을 얻을 수 있을 것입니다.
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+이 기능은 아직 개발 중이지만 특히 비디오 및 iframe과 관련하여 나 자신이 여러 번 직면했던 많은 개발자 갈등을 해결해주므로 알아두면 좋은 기능입니다.
+
+## 결론
+
+CSS의 10가지 강력한 라인을 알아본 이 여정을 따라와 주셔서 감사합니다. 자세히 알아보려면 [전체 동영상](https://youtu.be/qm0IfG1GyZU)을 시청하고 직접 [데모](https://1linelayouts.glitch.me)를 사용해 보세요.
diff --git a/src/site/content/ko/blog/optimize-cls/index.md b/src/site/content/ko/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..b523fb44d05
--- /dev/null
+++ b/src/site/content/ko/blog/optimize-cls/index.md
@@ -0,0 +1,279 @@
+---
+title: 누적 레이아웃 이동 최적화
+subhead: 갑작스러운 레이아웃 이동을 방지해 사용자 경험을 개선하는 방법을 알아봅니다.
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: Cumulative Layout Shift(누적 레이아웃 이동, CLS)는 사용자가 페이지 콘텐츠에서 갑작스러운 이동을 경험하는 빈도를 수량화하는 메트릭입니다. 이 가이드에서는 차원이나 동적 콘텐츠가 없는 이미지 및 iframe과 같이 CLS가 발생하는 일반적인 원인을 최적화하는 방법을 알아봅니다.
+alt: 레이아웃 이동이 발생하면 읽고 있던 페이지가 갑자기 밀리거나, 페이지의 더 아래 부분을 클릭하게 되는 등 열악한 사용자 경험으로 이어질 수 있습니다. 레이아웃 이동을 일으키는 동적 콘텐츠를 위한 공간을 확보하면 좀 더 원활한 사용자 경험을 조성하는 데 도움이 됩니다.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='88' %}
+
+"저걸 클릭하려고 했는데! 왜 움직인 거야? 😭"
+
+레이아웃 변경은 사용자의 주의를 산만하게 할 수 있습니다. 글을 읽기 시작했는데, 갑자기 요소가 페이지 아래로 이동해서 읽었던 곳을 다시 찾아야 한다고 생각해보세요. 이런 상황은 뉴스를 읽거나 '검색' 또는 '장바구니에 추가' 버튼을 클릭하려고 할 때 등 웹에서 자주 경험할 수 있는 일입니다. 이러한 경험은 시각적으로 거슬리는 데다가 짜증스럽죠. 다른 요소가 갑자기 페이지에 추가되거나 크기 조정으로 인해 시각적 요소가 강제로 이동할 때 자주 발생하는 현상입니다.
+
+[Cumulative Layout Shift(누적 레이아웃 이동, CLS)](/cls)는 [CoreWeb Vitals](/vitals) 메트릭으로, 사용자 입력 500ms 이내에 발생하지 않는 레이아웃 이동에 대한 점수를 합산하여 콘텐츠의 불안정성을 측정합니다. 뷰포트에서 가시적인 콘텐츠가 얼마나 이동했는지와 영향을 받은 요소가 이동한 거리를 확인합니다.
+
+이 가이드에서는 레이아웃 이동의 일반적인 원인을 최적화하는 방법을 다룹니다.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="좋은 CLS 값은 0.1 미만이고 나쁜 값은 0.25보다 크며 그 사이에는 개선이 필요합니다", width="384", height="96" %}
+</picture>
+
+열악한 CLS 값이 발생하는 일반적인 이유는 다음과 같습니다.
+
+- 크기가 정해지지 않은 이미지
+- 크기가 정해지지 않은 광고, 임베드 및 iframe
+- 동적으로 주입된 콘텐츠
+- FOIT/FOUT을 유발하는 웹 글꼴
+- DOM을 업데이트하기 전에 네트워크 응답을 대기하는 작업
+
+## 크기가 정해지지 않은 이미지 🌆
+
+**요약:** 이미지 및 비디오 요소에 항상 `width` 및 `height` 크기 속성을 포함하세요. 또는 [CSS 종횡비 상자](https://css-tricks.com/aspect-ratio-boxes/)를 사용하여 필요한 공간을 확보해 두는 방법도 좋습니다. 이러한 접근 방식을 통해 이미지가 로드되는 동안 브라우저가 문서에 올바른 양의 공간을 할당할 수 있습니다.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg", controls=true, loop=true, muted=true %} <figcaption> 너비와 높이가 지정되지 않은 이미지. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg", controls=true, loop=true, muted=true %} <figcaption> 너비와 높이가 지정된 이미지. </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="이미지에 대한 치수 설정 후 누적 레이아웃 이동에 미치는 이전/이후 영향을 보여주는 Lighthouse 보고서", width="800", height="148" %} <figcaption> 이미지 치수 설정 후 CLS에 대한 영향을 보여주는 Lighthouse 6.0. </figcaption></figure>
+
+### 역사
+
+웹 초기에 개발자는 브라우저가 이미지 가져오기를 시작하기 전에 페이지에 충분한 공간이 할당되었는지 확인하기 위해 `<img>` 태그에 `width` 및 `height` 속성을 추가하곤 했습니다. 이렇게 하면 재배치나 레이아웃 재구성을 최소화할 수 있기 때문이었죠.
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="강아지와 풍선" />
+```
+
+`width`와 `height`에는 단위가 포함되지 않는다는 것을 알 수 있습니다. 이러한 "픽셀" 크기는 640x360의 공간이 확보되도록 합니다. 실제 크기가 일치하는지와는 관계없이 이미지는 이 공간에 맞게 조정됩니다.
+
+그러다가 [반응형 웹 디자인](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)이 도입되며 `width`와 `height`를 생략하고, 대신 CSS를 사용하여 이미지 크기를 조정하기 시작했습니다.
+
+```css
+img {
+  width: 100%; /* or max-width: 100%; */
+  height: auto;
+}
+```
+
+이 접근 방식의 단점은 이미지가 다운로드되기 시작하고 브라우저가 크기를 결정할 수 있을 때만 이미지에 대한 공간을 할당할 수 있다는 것입니다. 이미지가 로드되면 각 이미지가 화면에 나타날 때 페이지가 재배치되면서 텍스트가 갑자기 화면 아래로 사라져 버리는 것이 일반적이었습니다. 전혀 원활한 사용자 경험을 제공하지 못했죠.
+
+여기서 종횡비가 등장하게 됩니다. 이미지의 종횡비란 너비와 높이의 비율로, 콜론으로 구분된 두 개의 숫자로 표현하는 것이 일반적입니다(예: 16:9 또는 4:3). x:y 종횡비의 경우 이미지의 너비는 x 단위이고 높이는 y 단위입니다.
+
+즉, 크기 중 하나를 알고 있으면 다른 크기를 결정할 수 있다는 의미입니다. 16:9 종횡비의 경우 다음과 같이 계산됩니다.
+
+- puppy.jpg의 높이가 360px인 경우 너비는 360 x (16 / 9) = 640px입니다.
+- puppy.jpg의 너비가 640픽셀인 경우 높이는 640 x (9 / 16) = 360픽셀입니다.
+
+종횡비를 알면 브라우저에서 높이 및 관련 영역에 대한 충분한 공간을 계산하고 할당할 수 있습니다.
+
+### 최신 모범 사례
+
+최신 브라우저는 이제 이미지의 너비 및 높이 속성을 기반으로 이미지의 기본 종횡비를 설정하므로 레이아웃 이동을 방지하도록 설정하는 것이 중요합니다. CSS Working Group 덕분에 개발자는 `width`와 `height`를 일반적으로 설정하기만 하면 됩니다.
+
+```html
+<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<img src="puppy.jpg" width="640" height="360" alt="강아지와 풍선" />
+```
+
+… 그리고 모든 브라우저의 [UA 스타일시트](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets) 는 요소의 기존 `width` 및 `height` 속성을 기반으로 [기본 종횡비](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images)를 추가합니다.
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+이것은 이미지가 로드되기 전에 `width` 및 `height` 속성을 기반으로 종횡비를 계산하고 레이아웃 계산이 시작되는 그 시점에 이러한 정보를 제공합니다. 이미지에 특정 너비(예: `width: 100%`)가 지정되면 종횡비를 사용하여 높이를 계산합니다.
+
+팁: 종횡비를 파악하기가 어렵다면 편리한 [계산기](https://aspectratiocalculator.com/16-9.html)를 사용할 수 있습니다.
+
+위 이미지 종횡비 변화는 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231). [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891)에 제공되었으며 [WebKit](https://twitter.com/smfr/status/1220051332767174656)(Safari)에 적용됩니다.
+
+반응형 이미지와 종횡비에 대해 더욱 심층적으로 알아보려면 [미디어 종횡비를 사용해 원활하게 페이지 로드하기](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/)를 참조하세요
+
+이미지가 컨테이너 안에 있다면 CSS를 사용하여 이 컨테이너의 너비에 맞게 이미지 크기를 조정할 수 있습니다. 여기에서는 이미지 높이의 값이 고정되지 않도록(예: `360px`) `height: auto;`를 설정합니다.
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**그렇다면 반응형 이미지는요?**
+
+[반응형 이미지](/serve-responsive-images) 작업 시에는 `srcset`을 통해 브라우저에서 선택하고 각 이미지의 크기를 결정하도록 허용할 이미지를 정의합니다. `<img>` 너비 및 높이 속성을 설정할 수 있도록 하려면 각 이미지가 동일한 종횡비를 사용해야 합니다.
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="강아지와 풍선"
+/>
+```
+
+[아트 디렉션](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)은요?
+
+페이지는 데스크톱에 표시되는 전체 이미지와 함께 좁은 뷰포트에 이미지의 잘린 부분을 포함하려고 할 수 있습니다.
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="강아지와 풍선" />
+</picture>
+```
+
+이러한 이미지는 다른 종횡비를 가질 수 있으며 브라우저는 여전히 모든 소스에서 크기를 지정하는 방법을 비롯해 가장 효율적인 솔루션이 무엇인지 평가하고 있습니다. 솔루션이 결정될 때까지는 여전히 레이아웃 재구성이 발생할 가능성이 있습니다.
+
+## 크기가 정해지지 않은 광고, 임베드 및 iframe 📢😱
+
+### 광고
+
+광고는 웹에서 레이아웃 이동에 가장 크게 기여하는 요소 중 하나입니다. 광고 네트워크 및 게시자는 동적 광고 크기를 지원하는 경우가 많습니다. 광고의 크기는 경매에서 더 높은 클릭률과 더 많은 광고로 이어져 성능/수익을 높이는 요소이기 때문이죠. 안타깝게도 광고는 사용자가 보는 콘텐츠를 페이지 아래로 밀어내기 때문에 최적의 사용자 경험과는 멀어지게 됩니다.
+
+광고 수명 주기 동안 여러 지점에서 레이아웃 이동이 발생할 수 있습니다.
+
+- 사이트가 DOM에 광고 컨테이너를 삽입하는 경우
+- 사이트에서 자사 코드로 광고 컨테이너의 크기를 조정하는 경우
+- 광고 태그 라이브러리가 로드되고 광고 컨테이너의 크기가 조정되는 경우
+- 광고가 컨테이너를 채우며 최종 광고의 크기가 달라 크기를 조정하는 경우
+
+다행히도 사이트에서는 광고 이동을 줄이기 위한 모범 사례를 따를 수 있습니다. 사이트는 다음을 통해 이러한 레이아웃 이동을 경감시킬 수 있습니다.
+
+- 광고 슬롯을 위한 고정 공간을 확보합니다.
+    - 즉, 광고 태그 라이브러리가 로드되기 전에 요소의 스타일을 지정합니다.
+    - 콘텐츠 흐름에 따라 광고를 배치하는 경우 슬롯 크기를 미리 확보하여 이동이 없도록 합니다. 이러한 광고는 화면 밖에서 로드되는 경우 레이아웃 이동을 일으키지 *않아야 합니다.*
+- 뷰포트 상단 근처에 비고정 광고를 배치하는 경우 주의를 기울여야 합니다.
+    - 아래 예에서는 광고를 "world vision" 로고 아래로 이동하고 해당 슬롯에 대한 충분한 공간을 확보하는 것이 좋습니다.
+- 자리 표시자를 표시하여 광고 슬롯이 표시될 때 반환된 광고가 없는 경우 할당된 공간이 축소되지 않도록 합니다.
+- 광고 슬롯에 대해 가능한 가장 큰 크기를 할당해 이동이 없도록 합니다.
+    - 이것 또한 방법이긴 하지만, 더 작은 광고 크리에이티브가 해당 슬롯을 채우면 빈 공간이 생길 위험이 있습니다.
+- 과거 데이터를 기반으로 광고 슬롯에 가장 적합한 크기를 선택합니다.
+
+일부 사이트에서는 광고 슬롯이 채워지지 않을 경우 초기에 슬롯을 축소하면 레이아웃 이동을 줄일 수 있다는 사실을 발견할 수도 있습니다. 게시되는 광고를 직접 제어하지 않는 한 매번 정확한 크기를 쉽게 선택할 수 있는 방법은 없습니다.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption> 충분한 공간이 확보되지 않은 광고. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption> 충분한 공간이 확보된 광고. </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="광고와 같은 배너를 위한 공간을 확보했을 경우 누적 레이아웃 이동에 미치는 이전/이후 영향을 보여주는 Lighthouse 보고", width="800", height="148" %} <figcaption> 이 배너에 대한 공간 확보 후 CLS에 대한 영향을 보여주는 Lighthouse 6.0.</figcaption></figure>
+
+#### 광고 슬롯을 위한 고정 공간 확보
+
+태그 라이브러리에 전달된 동일한 크기로 슬롯 DOM 요소에 고정 스타일을 지정합니다. 이렇게 하면 라이브러리가 로드될 때 레이아웃 이동이 발생하지 않도록 할 수 있습니다. 이렇게 하지 않는 경우 라이브러리가 페이지 레이아웃 후 슬롯 요소의 크기를 변경할 수 있습니다.
+
+더 작은 광고가 게시되는 경우도 고려해야 합니다. 더 작은 광고가 게재되는 경우 게시자는 레이아웃 이동을 피하기 위해 더 큰 컨테이너의 스타일을 지정할 수 있습니다. 이 접근 방식의 단점은 빈 공간의 양이 증가한다는 것으로, 균형에 신경을 써야 합니다.
+
+#### 뷰포트 상단 근처에 광고 배치하지 않기
+
+뷰포트 상단 근처에 있는 광고는 중간에 있는 광고보다 더 큰 레이아웃 이동을 일으킬 수 있습니다. 이는 일반적으로 상단에 있는 광고가 더 많은 콘텐츠를 아래로 밀어내기 때문입니다. 즉, 광고가 이동을 발생시키는 경우 더 많은 요소가 이동한다는 의미죠. 반대로 뷰포트 중앙 근처에 있는 광고는 위쪽에 있는 콘텐츠가 이동할 가능성이 적으므로 그리 많은 요소가 이동하지 않는 경우가 많습니다.
+
+### 임베드 및 iframe
+
+임베딩 가능한 위젯을 사용하면 페이지에 이식 가능한 웹 콘텐츠(예: YouTube의 비디오, Google Maps의 지도, 소셜 미디어 게시물 등)를 포함할 수 있습니다. 이러한 임베드는 다음과 같은 다양한 형식을 취할 수 있습니다.
+
+- 대체를 멋진 임베딩으로 변환해주는 HTML 대체 및 JavaScript 태그
+- 인라인 HTML 코드 조각
+- iframe 임베드
+
+이러한 임베드는 그 크기를 미리 알지 못하는 경우가 많습니다. 예를 들어 소셜 미디어 게시물의 경우 임베딩되는 것이 이미지인지 동영상인지 여러 줄의 텍스트인지 알 수 없습니다. 그 결과 임베드를 제공하는 플랫폼에서 항상 임베드에 대한 충분한 공간을 확보할 수 있는 것은 아니며, 이로 인해 최종적으로 로드될 때 레이아웃 이동이 발생할 수 있습니다.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %} <figcaption> 확보된 공간이 없는 임베드. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %} <figcaption> 확보된 공간이 있는 임베드 </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="이 임베드를 위한 공간을 확보한 경우 누적 레이아웃 이동에 미치는 이전/이후 영향을 보여주는 Lighthouse 보고", width="800", height="148" %} <figcaption> 이 임베드에 대한 공간 확보 후 CLS에 대한 영향을 보여주는 Lighthouse 6.0. </figcaption></figure>
+
+이 문제를 해결하려면 자리 표시자 또는 대체가 있는 포함을 위한 충분한 공간을 미리 계산하여 CLS를 최소화할 수 있습니다. 포함에 사용할 수 있는 하나의 워크플로:
+
+- 브라우저 개발자 도구를 사용하여 최종 임베드 높이를 확인합니다.
+- 임베드가 로드되면 포함된 iframe의 크기가 해당 콘텐츠에 맞게 조정됩니다.
+
+임베드를 위한 자리 표시자의 크기와 스타일을 기록해두세요. 미디어 쿼리를 사용하여 다양한 폼 팩터 간에 광고/자리 표시자 크기의 미묘한 차이를 설명해야 하는 경우도 있습니다.
+
+### 동적 콘텐츠 📐
+
+**요약:** 사용자 상호 작용에 대한 응답을 제외하고는 기존 콘텐츠 위에 콘텐츠를 삽입하는 것을 피하는 것이 좋습니다. 이렇게 하면 레이아웃 이동이 발생하기 때문입니다.
+
+사이트를 로드하려고 할 때 뷰포트의 상단 또는 하단에 팝업되는 UI 때문에 레이아웃이 이동하는 것을 경험하신 적이 있을 겁니다. 광고와 마찬가지로 이는 페이지의 나머지 콘텐츠를 이동시키는 배너 및 양식이 있을 때 발생하는 경우가 많습니다.
+
+- "뉴스레터에 가입하세요!" (천천히 해! 우린 방금 만났잖아!)
+
+- "관련 콘텐츠"
+
+- "[iOS/Android] 앱 설치"
+
+- "주문하세요"
+
+- "GDPR 공지"
+
+    <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %} <figcaption> 공간이 확보된 동적 콘텐츠. </figcaption></figure>
+
+이러한 유형의 UI 어포던스를 표시해야 하는 경우 미리 뷰포트에 충분한 공간을 확보하여(예: 자리 표시자 또는 스켈레톤 UI 사용) 로드 시 페이지의 콘텐츠가 크게 이동하는 일이 없도록 합니다.
+
+동적으로 콘텐츠를 추가하는 것이 사용자 경험에 중요할 때도 있습니다. 예를 들어 항목 목록에 더 많은 제품을 로드하거나 라이브 피드 콘텐츠를 업데이트할 때와 같은 경우죠. 이러한 경우 예기치 않은 레이아웃 이동을 방지하는 몇 가지 방법이 있습니다.
+
+- 고정 크기 컨테이너에서 이전 콘텐츠를 새 콘텐츠로 교체하거나 전환이 이루어진 후 캐러셀을 사용해 이전 콘텐츠를 제거합니다. 새 콘텐츠를 가져오는 동안 우발적인 클릭이나 탭을 방지하기 위해 전환이 완료될 때까지는 모든 링크와 컨트롤을 비활성화해야 합니다.
+- 사용자가 새 콘텐츠 로드를 시작하도록 하여 이동을 예측할 수 있도록 합니다(예: "더 로드" 또는 "새로고침" 버튼 사용). 콘텐츠가 즉시 표시되도록 사용자 상호 작용 전에 콘텐츠를 미리 가져오는 것이 좋습니다. 참고로 사용자 입력 후 500ms 이내에 발생하는 레이아웃 이동은 CLS 계산에 포함되지 않습니다.
+- 콘텐츠를 화면 밖에서 원활하게 로드하고 사용자에게 사용 가능하다는 메시지를 오버레이합니다(예: "위로 스크롤" 버튼 사용).
+
+<figure>{% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="Twitter 및 Chloé 웹사이트로 본 예기치 않은 레이아웃 이동이 없는 동적 콘텐츠 로딩 예시", width="800", height="458" %} <figcaption> 예기치 않은 레이아웃 이동이 없는 동적 콘텐츠 로딩 예시. 왼쪽: Twitter의 실시간 피드 콘텐츠 로딩. 오른쪽: Chloé 웹사이트의 "Load More"(더 로드하기) 예시. YNAP 팀이 <a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">더 많은 콘텐츠 로드 시 CLS를 최적화한 방법</a>을 알아보세요.</figcaption></figure>
+
+### FOUT/FOIT를 유발하는 웹 글꼴 📝
+
+웹 글꼴을 다운로드하고 렌더링하면 두 가지 방식으로 레이아웃이 변경될 수 있습니다.
+
+- 대체 글꼴이 새 글꼴로 바뀝니다(FOUT - 스타일이 지정되지 않은 텍스트 플래시).
+- "보이지 않는" 텍스트는 새 글꼴이 렌더링될 때까지 표시됩니다(FOIT - 보이지 않는 텍스트 플래시).
+
+다음 도구를 사용하면 이를 최소화할 수 있습니다.
+
+- <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code>를 사용하면 <code>auto</code>, <code>swap</code>, <code>block</code>, <code>fallback</code> 및 <code>optional</code>과 같은 값으로 커스텀 글꼴의 렌더링 동작을 수정할 수 있습니다. 하지만 [optional](http://crrev.com/749080)을 제외한 이 모든 값이 위와 같은 방식 중 하나로 레이아웃 재구성을 발생시킬 수 있습니다.
+- [Font Loading API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api)를 사용하면 필요한 글꼴을 가져오는 데 걸리는 시간을 줄일 수 있습니다.
+
+Chrome 83부터 다음과 같은 방식을 추천합니다.
+
+- 핵심 웹 글꼴에 `<link rel=preload>` 사용: 미리 로드된 글꼴은 최초 페인트를 충족할 가능성이 더 높으며 이 경우 레이아웃 이동이 발생하지 않습니다.
+- `<link rel=preload>` 및 `font-display: optional` 조합
+
+자세한 내용은 [선택적 글꼴 사전 로드로 레이아웃 이동 및 보이지 않는 텍스트의 깜박임(FOIT) 방지](/preload-optional-fonts/)를 참조하세요.
+
+### 애니메이션 🏃‍♀️
+
+**요약:** 레이아웃 이동을 유발하는 속성의 애니메이션보다 `transform` 애니메이션을 권장합니다.
+
+CSS 속성 값을 변경하면 브라우저가 이러한 변경 사항에 반응해야 할 수 있습니다. `box-shadow` 및 `box-sizing`과 같은 많은 값이 레이아웃 재구성, 페인트 및 합성을 트리거합니다. 보다 비용이 적게 드는 방식으로 다수의 CSS 속성을 변경할 수 있습니다.
+
+어떤 CSS 속성이 레이아웃을 트리거하는지 자세히 알아보려면 [CSS 트리거](https://csstriggers.com/) 및 [고성능 애니메이션](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)을 참조하세요.
+
+### 개발자 도구 🔧
+
+다행히도 누적 레이아웃 이동(CLS)을 측정하고 디버그하는 데 사용할 수 있는 다양한 도구가 있습니다.
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [6.0](https://github.com/GoogleChrome/lighthouse/releases) 이상에서는 실험실 환경에서 CLS 측정할 수 있도록 지원합니다. 이 버전에서는 가장 많은 레이아웃 이동을 일으키는 노드도 강조 표시해줍니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="Lighthouse 6.0은 메트릭 섹션에서 CLS 측정을 위한 지원도 포함합니다.", width="800", height="309" %}
+
+DevTools의 [Performance 패널](https://developer.chrome.com/docs/devtools/evaluate-performance/)은 Chrome 84부터 **Experience** 섹션에 레이아웃 이동을 강조 표시해줍니다. `Layout Shift` 기록의 **Summary** 보기에는 영향을 받는 부분을 보여주는 직사각형 오버레이와 함께 누적 레이아웃 이동 점수를 표시합니다.
+
+<figure>{% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Experience 섹션 확장 시 Chrome DevTools Performance 패널에 표시되는 Layout Shift 기록", width="800", height="438" %} <figcaption>Performance 패널에 새로운 흔적이 기록되면 결과의 <b>Experience</b> 섹션에 <code>Layout Shift</code> 기록이 붉은색 막대와 함께 표시됩니다. 해당 기록을 클릭하면 영향을 받는 요소(예: Moved from/to 항목 참조)가 드릴다운됩니다.</figcaption></figure>
+
+[Chrome User Experience Report](https://developer.chrome.com/blog/chrome-ux-report-bigquery/)를 사용해 원본 수준에서 집계된 실제 CLS를 측정할 수도 있습니다. CrUX CLS 데이터는 BigQuery를 통해 제공되며 CLS 성능을 확인하기 위한 [샘플 쿼리](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql)도 사용할 수 있습니다.
+
+이 가이드는 여기까지입니다. 페이지 이동을 줄이는 데 도움이 되기를 바랍니다. :)
+
+*검토해주신 Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes 및 Gilberto Cocchi에게 감사드립니다.*
diff --git a/src/site/content/ko/blog/optimize-fid/index.md b/src/site/content/ko/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..e42cf194901
--- /dev/null
+++ b/src/site/content/ko/blog/optimize-fid/index.md
@@ -0,0 +1,176 @@
+---
+title: 최초 입력 지연 최적화
+subhead: 사용자 상호 작용에 더 빨리 응답하는 방법
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: 스마트폰 화면을 만지는 손
+description: First Input Delay(최초 입력 지연, FID)는 사용자가 사이트에 처음 상호 작용한 시간부터 브라우저가 실제로 해당 상호 작용에 응답할 수 있었던 시간까지를 측정합니다. 사용하지 않는 JavaScript를 최소화하고, 긴 작업을 분리하고, 상호 작용 준비를 개선하여 FID를 최적화하는 방법을 알아봅니다.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>분명히 클릭했는데 아무 일도 없잖아! 이 페이지와 상호 작용할 수 없는 이유가 뭐지? 😢</p>
+</blockquote>
+
+[First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/) 및 [Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)](/lcp/)는 모두 콘텐츠가 페이지에서 시각적으로 렌더링(페인트)하는 데 걸리는 시간을 측정하는 메트릭입니다. 페인트 시간은 중요하긴 하지만 *로드 응답성* 또는 페이지가 사용자 상호 작용에 얼마나 빨리 응답하는지는 포착하지 않습니다.
+
+[First Input Delay](/fid/)(최초 입력 지연, FID)는 사이트의 상호 작용 및 응답성에 대한 사용자의 첫인상을 포착하는 [Core Web Vitals](/vitals/) 메트릭으로, 사용자가 페이지와 처음 상호 작용한 시점부터 브라우저가 실제로 해당 상호 작용에 응답한 시점까지의 시간을 측정합니다. FID는 [필드 메트릭](/user-centric-performance-metrics/#in-the-field)이며 실험실 환경에서 시뮬레이션할 수 없습니다. 응답 지연을 측정하려면 **실제 사용자 상호 작용**이 필요하기 때문입니다.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="좋은 fid 값은 2.5초이고, 나쁨 값은 4.0초보다 크며 그 사이에는 개선이 필요합니다.", width="384", height="96" %}
+  </picture>
+
+[실험실](/how-to-measure-speed/#lab-data-vs-field-data)에서 FID를 예측하는 데 활용할 만한 메트릭은 [Total Blocking Time(총 차단 시간, TBT)](/tbt/)입니다. 둘은 서로 다른 부분을 측정하지만, TBT를 개선하면 일반적으로 FID도 개선됩니다.
+
+열악한 FID의 주요 원인은 **과도한 JavaScript 실행**입니다. JavaScript가 웹 페이지에서 구문 분석, 컴파일 및 실행하는 방식을 최적화하면 FID가 감소합니다.
+
+## 집약적 JavaScript 실행
+
+브라우저는 메인 스레드에서 JavaScript를 실행하는 동안 대부분의 사용자 입력에 응답할 수 없습니다. 즉, 메인 스레드가 사용 중인 경우 브라우저는 사용자 상호 작용에 응답할 수 없다는 의미입니다. 이를 개선하기 위한 방법은 다음과 같습니다.
+
+- [긴 작업 세분화](#long-tasks)
+- [상호 작용 준비를 위해 페이지 최적화](#optimize-interaction-readiness)
+- [웹 작업자 사용](#use-a-web-worker)
+- [JavaScript 실행 시간 단축](#reduce-javascript-execution)
+
+## 긴 작업 세분화 {: #long-tasks }
+
+단일 페이지에 로드되는 JavaScript를 줄이는 방법을 이미 시도했다면, 장기 실행 코드를 **더 작은 비동기 작업**으로 세분화하는 방법이 유용할 수도 있습니다.
+
+[**긴 작업**](/custom-metrics/#long-tasks-api)이란 사용자가 UI가 응답하지 않는다는 것을 발견할 수 있는 JavaScript 실행 기간입니다. 50ms 이상 메인 스레드를 차단하는 모든 코드는 긴 작업이라고 볼 수 있으며 사용자가 현재 필요로 하는 것보다 더 많은 것을 로드 및 실행해 JavaScript가 팽창할 가능성이 있음을 나타내는 신호일 수 있습니다. 그러므로 긴 작업을 분할하면 사이트의 입력 지연을 줄일 수 있습니다.
+
+<figure>{% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Chrome DevTools의 긴 작업", width="800", height="132" %} <figcaption>Chrome DevTools의 Performance 패널에서 <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">긴 작업을 시각화</a>한 모습</figcaption></figure>
+
+
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Chrome DevTools의 긴 작업", width="800", height="132" %}
+  <figcaption>Chrome DevTools의 Performance 패널에서 <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">긴 작업을 시각화</a>한 모습</figcaption>
+</figure>
+
+FID는 코드 분할 및 긴 작업 세분화와 같은 모범 사례를 채택하면 눈에 띄게 개선됩니다. TBT는 필드 메트릭이 아니지만 궁극적으로 Time To Interactive(상호 작용까지의 시간, TTI)와 FID를 모두 개선하기 위한 진행 상황을 확인하는 데 유용합니다.
+
+{% Aside %} 자세한 내용은 [긴 JavaScript 작업으로 인해 상호 작용까지의 시간이 지연되나요?](/long-tasks-devtools/)를 참조하세요. {% endAside %}
+
+## 상호 작용 준비를 위해 페이지 최적화
+
+JavaScript에 크게 의존하는 웹 앱에서 FID 및 TBT 점수가 좋지 않은 일반적인 원인에는 여러 가지가 있습니다.
+
+### 자사 스크립트 실행으로 상호 작용 준비가 지연될 수 있음
+
+- JavaScript 크기 팽창, 과도한 실행 시간 및 비효율적인 청크로 인해 페이지가 사용자 입력에 응답하고 FID, TBT 및 TTI에 영향을 미치는 속도가 느려질 수 있습니다. 코드와 기능을 점진적으로 로드하면 이 작업을 분산하고 상호 작용 준비를 개선하는 데 도움이 될 수 있습니다.
+- 서버 측에서 렌더링된 앱은 화면에 픽셀이 빠르게 그려지는 것처럼 보일 수 있지만 대규모 스크립트 실행(예: 이벤트 리스너를 연결하기 위한 원상 회복)으로 인해 사용자 상호 작용이 차단될 수도 있다는 점에 유의해야 합니다. 경로 기반 코드 분할을 사용하는 경우 수백 밀리초, 때로는 몇 초가 소요될 수 있습니다. 더 많은 논리를 서버 측으로 이동하거나 빌드 시간 동안 더 많은 콘텐츠를 고정적으로 생성하도록 하는 것이 좋습니다.
+
+다음은 애플리케이션에 대한 자사 스크립트 로딩을 최적화하기 전과 후의 TBT 점수입니다. 중요하지 않은 구성 요소에 대해 비용이 많이 드는 스크립트 로드(및 실행)를 이동함으로써 사용자는 페이지와 훨씬 더 빨리 상호 작용할 수 있게 되었습니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="자사 스크립트 최적화 후 개선된 Lighthouse의 TBT 점수.", width="800", height="148" %}
+
+### 상호 작용 준비의 여러 측면에 영향을 주는 데이터 가져오기
+
+- 계속해서 이어지는 계단식 가져오기(예: 구성 요소에 대한 JavaScript 및 데이터 가져오기)를 기다리는 것은 상호 작용 지연 시간에 영향을 줄 수 있습니다. 그러므로 계단식 데이터 가져오기에 대한 의존도를 최소화하는 것을 목표로 하세요.
+- 대규모 인라인 데이터 저장소는 HTML 구문 분석 시간을 늘려 페인트 및 상호 작용 메트릭 모두에 영향을 줄 수 있습니다. 클라이언트 측에서 후처리해야 하는 데이터의 양을 최소화하는 것을 목표로 하세요.
+
+### 상호 작용 지연 시간을 늦출 수 있는 타사 스크립트 실행
+
+- 많은 사이트에는 네트워크를 계속 바쁘게 유지하고 메인 스레드가 주기적으로 응답하지 않도록 하여 상호 작용 대기 시간에 영향을 줄 수 있는 타사 태그 및 분석이 포함되어 있습니다. 타사 코드의 주문형 로드를 탐색해보세요(예: 뷰포트에 더 가깝게 스크롤될 때까지 스크롤해야 볼 수 있는 광고를 로드하지 않을 수 있음).
+- 경우에 따라 타사 스크립트가 메인 스레드의 우선순위 및 대역폭 측면에서 자사 스크립트보다 앞에 올 수 있으며, 이 경우 페이지에서 상호 작용 준비를 마치는 시간도 지연됩니다. 사용자에게 가장 큰 가치를 제공하는 부분을 먼저 로드하도록 우선순위를 정하세요.
+
+## 웹 작업자 사용
+
+차단된 메인 스레드는 입력 지연의 주요 원인 중 하나입니다. [웹 작업자](https://developer.mozilla.org/docs/Web/API/Worker)를 사용하면 백그라운드 스레드에서 JavaScript를 실행할 수 있습니다. UI가 아닌 작업을 별도의 작업자 스레드로 이동하면 메인 스레드 차단 시간을 줄이고 결과적으로 FID를 개선할 수 있습니다.
+
+사이트에서 웹 작업자를 더 쉽게 사용할 수 있도록 다음 라이브러리를 사용하는 것이 좋습니다.
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink) `postMessage`를 추상화하고 사용하기 쉽게 만드는 도우미 라이브러리
+- [Workway](https://github.com/WebReflection/workway) : 일반적 목적의 웹 작업자 익스포터
+- [Workerize](https://github.com/developit/workerize) : 모듈을 웹 작업자로 이동
+
+{% Aside %} 웹 작업자가 메인 스레드에서 코드를 실행하는 방법에 대해 자세히 알아보려면 [웹 작업자를 사용하여 브라우저의 메인 스레드에서 JavaScript 실행](/off-main-thread/)을 참조하세요. {% endAside %}
+
+### JavaScript 실행 시간 단축 {: #reduce-javascript-execution }
+
+페이지의 JavaScript 양을 제한하면 브라우저에서 JavaScript 코드를 실행하는 데 필요한 시간이 줄어듭니다. 이렇게 하면 브라우저가 사용자 상호 작용에 응답할 수 있는 속도가 빨라집니다.
+
+페이지에서 실행되는 JavaScript의 양을 줄이는 방법은 다음과 같습니다.
+
+- 사용하지 않는 JavaScript 지연
+- 사용하지 않는 Polyfills 최소화
+
+#### 사용하지 않는 JavaScript 지연
+
+기본적으로 모든 JavaScript는 렌더링을 차단합니다. 브라우저가 외부 JavaScript 파일에 연결되는 스크립트 태그를 만나면 수행 중인 작업을 일시 중지하고 해당 JavaScript를 다운로드, 구문 분석, 컴파일 및 실행해야 합니다. 따라서 페이지 또는 사용자 입력에 응답하는 데 필요한 코드만 로드해야 합니다.
+
+Chrome DevTools의 [Coverage](https://developer.chrome.com/docs/devtools/coverage/) 탭을 보면 웹 페이지에서 사용되지 않는 JavaScript가 어느 정도인지 파악할 수 있습니다.
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="Coverage 탭.", width="800", height="559" %}
+
+사용하지 않는 JavaScript를 줄이는 방법은 다음과 같습니다.
+
+- 번들을 여러 청크로 코드 분할
+- `async` 또는 `defer`를 사용하여 타사 스크립트를 비롯한 중요하지 않은 JavaScript 지연
+
+**코드 분할**은 하나의 큰 JavaScript 번들을 조건부로 로드할 수 있는 더 작은 청크로 분할하는 개념입니다(지연 로드라고도 함). 대부분의 최신 브라우저는 [동적 가져오기 구문을 지원하며](https://caniuse.com/#feat=es6-module-dynamic-import) 이는 요청 시 모듈 가져오기를 허용합니다.
+
+```js
+import('module.js').then((module) => {
+  // 모듈로 뭔가 해보기.
+});
+```
+
+특정 사용자 상호 작용(예: 경로 변경 또는 모달 표시)에서 JavaScript를 동적으로 가져오면 초기 페이지 로드에 사용되지 않는 코드는 필요할 때만 가져오도록 합니다.
+
+일반적인 브라우저 지원 외에도 다양한 빌드 시스템에서 동적 가져오기 구문을 사용할 수 있습니다.
+
+- [webpack](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82) , [Rollup](https://parceljs.org/code_splitting.html) 또는 [Parcel](https://webpack.js.org/guides/code-splitting/)을 모듈 번들러로 사용하는 경우 동적 가져오기 지원을 활용하세요.
+- [React](https://reactjs.org/docs/code-splitting.html#reactlazy) , [Angular](https://angular.io/guide/lazy-loading-ngmodules) 및 [Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) 와 같은 클라이언트 측 프레임워크는 구성 요소 수준에서 지연 로드를 쉽게 하기 위해 추상화를 제공합니다.
+
+{% Aside %} 코드 분할에 대해 자세히 알아보려면 [코드 분할로 JavaScript 페이로드 줄이기](/reduce-javascript-payloads-with-code-splitting/)를 참조하세요. {% endAside %}
+
+코드 분할 외에도 중요 경로 또는 스크롤 없이 볼 수 있는 콘텐츠에 필요하지 않은 스크립트에는 항상 [async 또는 defer](https://javascript.info/script-async-defer)를 사용하세요.
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+특별한 이유가 없는 한 모든 타사 스크립트는 기본적으로 `defer` 또는 `async`
+
+#### 사용하지 않는 Polyfills 최소화
+
+최신 JavaScript 구문을 사용하여 코드를 작성하고 최신 브라우저 API를 참조하는 경우 이전 브라우저에서 작동하려면 코드를 변환하고 Polyfills을 포함해야 합니다.
+
+사이트에 Polyfills 및 변환 컴파일된 코드를 포함할 때 발생하는 주요 성능 문제는 최신 브라우저에서 필요하지 않은 경우 이를 다운로드할 필요가 없다는 것입니다. 애플리케이션의 JavaScript 크기를 줄이려면 사용하지 않는 Polyfills을 최대한 최소화하고 필요한 환경에서만 사용을 제한하세요.
+
+사이트에서 폴리필 사용을 최적화하려면 다음과 같은 방법을 사용합니다.
+
+- [Babel](https://babeljs.io/docs/en/index.html)을 변환기로 사용하는 경우 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)를 사용하여 타겟팅하려는 브라우저에 필요한 Polyfills만 포함합니다. Babel 7.9의 경우 [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) 옵션을 활성화하여 불필요한 Polyfills을 더 줄일 수 있습니다.
+
+- module/nomodule 패턴을 사용하여 두 개의 개별 번들을 제공합니다(`@babel/preset-env` 역시 [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)를 통해 이를 지원함).
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    Babel로 컴파일된 많은 최신 ECMAScript 기능은 JavaScript 모듈을 지원하는 환경에서 이미 지원되고 있습니다. 따라서 이렇게 하면 실제로 필요한 브라우저에 대해 변환 컴파일된 코드만 사용되도록 하여 프로세스를 단순화할 수 있습니다.
+
+{% Aside %} [더 빠른 페이지 로드를 위해 최신 브라우저에 최신 코드 제공](/serve-modern-code-to-modern-browsers/) 가이드에서 이 주제에 대해 자세히 설명합니다. {% endAside %}
+
+## 개발자 도구
+
+FID를 측정하고 디버그하는 데 사용할 수 있는 여러 가지 도구가 있습니다.
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/)은 필드 메트릭인 FID에 대한 지원을 포함하지 않습니다. 그러나 [총 차단 시간](/tbt/)(TBT)를 그 대체제로 사용할 수 있습니다. TBT를 개선하는 최적화는 필드에서 FID도 개선합니다.
+
+    {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0.", width="800", height="309" %}
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) 는 원본 수준에서 집계된 실제 FID 값을 제공합니다.
+
+*Philip Walton, Kayce Basques, Ilya Grigorik 및 Annie Sullivan의 리뷰에 감사드립니다.*
diff --git a/src/site/content/ko/blog/optimize-lcp/index.md b/src/site/content/ko/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..35c56124965
--- /dev/null
+++ b/src/site/content/ko/blog/optimize-lcp/index.md
@@ -0,0 +1,442 @@
+---
+title: 최대 콘텐츠풀 페인트 최적화
+subhead: 메인 콘텐츠를 더 빠르게 렌더링하는 방법.
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2020-08-20
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: LCP 배너 최적화
+description: Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 페이지의 메인 콘텐츠가 화면에 모두 렌더링되었을 때를 결정하는 데 사용됩니다. 느린 서버 응답 시간, 리소스 로드 시간, 클라이언트 측 렌더링을 개선해 LCP를 최적화하는 방법을 알아보세요.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='1073' %}
+
+<blockquote>
+  <p>쓸 만한 콘텐츠가 보이지 않아요! 로드하는 데 왜 이렇게 오래 걸리는 거죠? 😖</p>
+</blockquote>
+
+열악한 사용자 경험에 큰 영향을 미치는 요소 중 하나는 사용자가 화면에 렌더링되는 콘텐츠를 보기까지 얼마나 많은 시간이 걸리느냐입니다. [First Contentful Paint](/fcp)(최초 콘텐츠풀 페인트, FCP)는 초기 DOM 콘텐츠가 렌더링되는 데 걸리는 시간을 측정하지만 페이지에서 가장 크고 일반적으로 가장 의미 있는 콘텐츠를 렌더링하는 데 걸린 시간은 포착하지 않습니다.
+
+[Large Contentful Paint](/lcp)(최대 콘텐츠풀 페인트, LCP)는 [Core Web Vitals](/vitals/) 메트릭이며 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정합니다. 페이지의 메인 콘텐츠가 화면에서 렌더링을 완료한 시점을 결정하는 데 사용할 수 있습니다.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="좋은 LCP 값은 2.5초이고 나쁜 값은 4.0초보다 크며 그 사이에는 개선이 필요합니다.", width="384", height="96" %}
+  </picture>
+
+열악한 LCP 값이 발생하는 일반적인 이유는 다음과 같습니다.
+
+- [느린 서버 응답 시간](#slow-servers)
+- [렌더링 차단 JavaScript 및 CSS](#render-blocking-resources)
+- [느린 리소스 로드 시간](#slow-resource-load-times)
+- [클라이언트 측 렌더링](#client-side-rendering)
+
+## 느린 서버 응답 시간 {: #slow-servers }
+
+브라우저가 서버에서 콘텐츠를 수신하는 데 시간이 오래 걸릴수록 화면에 무엇이든 렌더링하는 데 더 오래 걸립니다. 더 빠른 서버 응답 시간은 LCP를 포함한 모든 단일 페이지 로드 메트릭을 직접적으로 향상시킵니다.
+
+가장 먼저 해야 할 것은 서버에서 콘텐츠를 처리하는 방법과 위치를 개선하는 것입니다. [**Time to First Byte**](/ttfb/)(최초 바이트까지의 시간, TTFB)로 서버 응답 시간을 측정하세요. 다음과 같이 다양한 방식으로 TTFB를 개선할 수 있습니다.
+
+- 서버 최적화
+- 사용자를 가까운 CDN으로 라우팅
+- 자산 캐시
+- HTML 페이지 캐시 우선 제공
+- 조기에 타사 연결 구축
+- 서명된 교환 사용
+
+### 서버 최적화
+
+서버가 완료하는 데 상당한 시간이 걸리는 쿼리를 실행하고 있나요? 아니면 서버 측에서 진행되는 다른 복잡한 작업으로 인해 페이지 콘텐츠를 반환하는 프로세스를 지연되나요? 서버 측 코드의 효율성을 분석하고 개선하면 브라우저가 데이터를 수신하는 데 걸리는 시간이 빨라집니다.
+
+대부분의 서버 측 웹 프레임워크는 브라우저에서 요청할 때 고정 페이지를 즉시 제공하는 것이 아니라, 웹 페이지를 동적으로 생성해야 합니다. 즉, 브라우저가 요청할 때 이미 준비된 완전한 HTML 파일을 보내는 것이 아니라 프레임워크에서 페이지를 구성하는 논리를 실행해야 한다는 의미입니다. 이는 데이터베이스 쿼리의 결과가 보류 중이거나 구성 요소가 UI 프레임워크(예: [React](https://reactjs.org/docs/react-dom-server.html) )에 의해 마크업으로 생성되어야 하기 때문일 수 있습니다. 서버에서 실행되는 여러 가지 웹 프레임워크에는 이 프로세스의 속도를 높이는 데 사용할 수 있는 성능 지침이 있습니다.
+
+{% Aside %} 자세한 내용은 [과부하 서버 수정](/overloaded-server/)을 확인하세요. {% endAside %}
+
+### 사용자를 가까운 CDN으로 라우팅
+
+콘텐츠 전송 네트워크(CDN)은 여러 위치에 분산된 서버 네트워크입니다. 웹 페이지의 콘텐츠가 단일 서버에서 호스팅되는 경우 지리적으로 멀리 떨어져 있는 사용자에게는 해당 웹사이트가 느리게 표시될 수 있습니다. 브라우저 요청이 말 그대로 세계를 한 바퀴 돌아야 하기 때문이죠. 사용자가 멀리 떨어진 서버에 대한 네트워크 요청을 기다리지 않도록 하려면 CDN을 사용하는 것이 좋습니다.
+
+### 자산 캐시
+
+HTML이 고정적이며 모든 요청에 대해 변경할 필요가 없는 경우 캐싱을 통해 HTML이 불필요하게 다시 생성되는 것을 방지할 수 있습니다. 서버 측 캐싱은 생성된 HTML의 복사본을 디스크에 저장해 TTFB를 줄이고 리소스 사용을 최소화할 수 있습니다.
+
+도구 체인에 따라 서버 캐싱을 적용하는 다양한 방법이 있습니다.
+
+- 캐시된 콘텐츠를 제공하거나 애플리케이션 서버 앞에 설치된 경우 캐시 서버 역할을 하도록 역방향 프록시([Varnish](https://varnish-cache.org/) , [nginx](https://www.nginx.com/)) 구성
+- 클라우드 공급자([Firebase](https://firebase.google.com/docs/hosting/manage-cache), [AWS](https://aws.amazon.com/caching/), [Azure](https://docs.microsoft.com/en-us/azure/architecture/best-practices/caching))의 캐시 동작 구성 및 관리
+- 콘텐츠가 캐시되어 사용자에게 더 가까운 곳에 저장되도록 엣지 서버를 제공하는 CDN 사용
+
+### HTML 페이지 캐시 우선 제공
+
+설치되면 [서비스 작업자](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)가 브라우저 백그라운드에서 실행되고 서버의 요청을 가로챌 수 있습니다. 이 수준의 프로그래밍 방식 캐시 제어를 사용하면 HTML 페이지 콘텐츠의 일부 또는 전체를 캐시하고 콘텐츠가 변경된 경우에만 캐시를 업데이트할 수 있습니다.
+
+다음 차트는 이 패턴을 사용하여 사이트에서 LCP 분포가 어떻게 감소했는지 보여줍니다.
+
+<figure>
+  {% Img
+    src="image/admin/uB0Sm56R88MRF16voQ1k.png",
+    alt="HTML 캐싱 전후 최대 콘텐츠풀 페인트 분포",
+    width="800",
+    height="495"
+  %}
+</figure>
+
+<figure>
+  {% Img
+    src="image/admin/uB0Sm56R88MRF16voQ1k.png",
+    alt="HTML 캐싱 전후 최대 콘텐츠풀 페인트 분포",
+    width="800",
+    height="495"
+  %}
+  <figcaption> 페이지 로드 시 서비스 작업자 여부에 따른 최대 콘텐츠풀 분포 - <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a> </figcaption>
+</figure>
+
+이 차트는 지난 28일 동안 단일 사이트의 LCP 분포를 서비스 작업자 상태별로 분류하여 보여줍니다. 캐시 우선 HTML 페이지 서비스가 서비스 작업자(차트의 파란색 부분)에 도입된 후 얼마나 많은 페이지 로드가 더 빨라진 LCP 값을 갖게 됐는지 확인하세요.
+
+{% Aside %} 전체 또는 부분 캐시 우선 HTML 페이지를 제공하는 기술에 대해 자세히 알아보려면 [서비스 작업자가 있는 더 작은 HTML 페이로드](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/)를 참조하세요. {% endAside %}
+
+### 조기에 타사 연결 구축
+
+타사 출처에 대한 서버 요청은 특히 페이지에 중요한 콘텐츠를 표시해야 하는 경우 LCP에 영향을 줄 수 있습니다. `rel="preconnect"`를 사용하여 페이지가 최대한 빨리 연결을 구축할 것임을 브라우저에 알립니다.
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+`dns-prefetch`를 사용하여 DNS 조회를 더 빠르게 해결할 수도 있습니다.
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+두 힌트 모두 다르게 작동하지만 `preconnect`를 지원하지 않는 브라우저에 대한 대체로 `dns-prefetch`를 사용할 수도 있습니다.
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %} 인지된 페이지 속도를 개선하려면 [초기에 네트워크 연결 구축](/preconnect-and-dns-prefetch/)을 읽고 자세히 알아보세요. {% endAside %}
+
+### 서명된 교환(SXG) 사용
+
+[서명된 교환(SXG)](/signed-exchanges)이란 쉽게 캐시할 수 있는 형식으로 콘텐츠를 제공하여 더 빠른 사용자 경험을 가능하게 하는 전달 메커니즘입니다. 특히 [Google 검색](https://developers.google.com/search/docs/advanced/experience/signed-exchange)은 SXG를 캐시하고 때로는 미리 가져옵니다. Google 검색에서 트래픽의 많은 부분을 수신하는 사이트의 경우 SXG는 LCP를 개선하기 위한 중요한 도구가 될 수 있습니다. 자세한 내용은 [서명된 교환](/signed-exchanges)을 참조하세요.
+
+## 렌더링 차단 JavaScript 및 CSS {: #render-blocking-resources }
+
+브라우저에서 콘텐츠를 렌더링하려면 먼저 HTML 마크업을 DOM 트리로 구문 분석해야 합니다. HTML 파서는 외부 스타일시트( `<link rel="stylesheet">`) 또는 동기 JavaScript 태그( `<script src="main.js">`)를 만나면 일시 중지됩니다.
+
+스크립트와 스타일시트는 모두 FCP를 지연시키고 결과적으로 LCP까지 지연시키는 렌더링 차단 리소스입니다. 중요하지 않은 JavaScript 및 CSS를 지연시키면 웹 페이지의 메인 콘텐츠 로드 속도를 빠르게 할 수 있습니다.
+
+### CSS 차단 시간 단축
+
+다음과 같은 방법으로 필요한 최소 CSS만 사이트에서 렌더링을 차단하도록 합니다.
+
+- CSS 축소
+- 중요하지 않은 CSS 지연
+- 중요 CSS 즉시 처리
+
+### CSS 축소
+
+가독성을 높이기 위해 CSS 파일에는 공백, 들여쓰기 또는 주석과 같은 문자를 포함할 수 있습니다. 이런 문자는 모두 브라우저에 필요하지 않으며, 이러한 파일을 축소하면 제거됩니다. 궁극적으로 CSS 차단량을 줄이면 페이지의 메인 콘텐츠를 완전히 렌더링하는 데 걸리는 시간(LCP)이 항상 향상됩니다.
+
+모듈 번들러 또는 빌드 도구를 사용하는 경우 적절한 플러그인을 포함하여 모든 빌드에서 CSS 파일을 축소합니다.
+
+- Webpack: [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
+- Gulp: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
+- Rollup: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+
+<figure>
+  {% Img
+    src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png",
+    alt="LCP 개선 예시: CSS 축소 이전/이후",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP 개선 예시: CSS 축소 이전/이후
+  </figcaption>
+</figure>
+
+{% Aside %} 자세한 내용은 [CSS](/minify-css/) 축소 가이드를 참조하세요. {% endAside %}
+
+### 중요하지 않은 CSS 지연
+
+Chrome DevTools의 [Coverage](https://developer.chrome.com/docs/devtools/coverage/) 탭을 사용하여 웹 페이지에서 사용하지 않는 CSS를 찾습니다.
+
+{% Img src="image/admin/wjS4NrU5EsJeCuvK0zhn.png", alt="Chrome DevTools의 Coverage 탭", width="800", height="559" %}
+
+다음과 같은 방법으로 최적화할 수 있습니다.
+
+- 사용하지 않는 CSS를 완전히 제거하거나 사이트의 별도 페이지에서 사용하는 경우 다른 스타일시트로 이동합니다.
+- 초기 렌더링에 필요하지 않은 CSS의 경우 [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md)를 사용해 `rel="preload"` 및 `onload`를 활용해 비동기식으로 파일을 로드합니다.
+
+```html
+<link
+  rel="preload"
+  href="stylesheet.css"
+  as="style"
+  onload="this.rel='stylesheet'"
+/>
+```
+
+<figure>
+  {% Img
+    src="image/admin/2fcwrkXQRQrM8w1qyy3P.png",
+    alt="LCP 개선 예시: 중요하지 않은 CSS 지연 이전/이후",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP 개선 예시: 중요하지 않은 CSS 지연 이전/이후
+  </figcaption>
+</figure>
+
+{% Aside %} 자세한 내용은 [중요하지 않은 CSS 지연](/defer-non-critical-css/) 가이드를 참조하세요. {% endAside %}
+
+### 중요 CSS 즉시 처리
+
+스크롤 없이 볼 수 있는 콘텐츠에 사용되는 중요 경로 CSS를 `<head>`에 포함해 즉시 처리합니다
+
+<figure>
+  {% Img
+    src="image/admin/m0n0JsLpH9JsNnXywSwz.png",
+    alt="중요 CSS 즉시 처리됨",
+    width="800", height="325"
+  %}
+  <figcaption>중요 CSS 즉시 처리됨</figcaption>
+</figure>
+
+중요한 스타일을 즉시 처리하면 중요한 CSS를 가져오기 위해 왕복 요청을 할 필요가 없습니다. 나머지를 연기하면 CSS 차단 시간이 최소화됩니다.
+
+사이트에 즉시 처리 스타일을 수동으로 추가할 수 없다면 라이브러리를 사용해 프로세스를 자동화하세요. 예시는 다음과 같습니다.
+
+- [Critical](https://github.com/addyosmani/critical), [CriticalCSS](https://github.com/filamentgroup/criticalCSS) 및 [Penthouse](https://github.com/pocketjoso/penthouse) 는 모두 스크롤 없이 볼 수 있는 CSS를 추출하고 즉시 처리하는 패키지입니다.
+- [Critters](https://github.com/GoogleChromeLabs/critters)는 중요한 CSS를 즉시 처리하고 나머지는 지연 로드하는 웹팩 플러그인입니다.
+
+<figure>
+  {% Img
+    src="image/admin/L8sc51bd3ckxwnUfczC4.png",
+    alt="LCP 개선 예시: 중요 CSS 즉시 처리 이전/이후",
+    width="800",
+    height="175"
+  %}
+  <figcaption>
+    LCP 개선 예시: 중요 CSS 즉시 처리 이전/이후
+  </figcaption>
+</figure>
+
+{% Aside %} 자세히 알아보려면 [중요 CSS 추출](/extract-critical-css/) 가이드를 살펴보세요. {% endAside %}
+
+### <a>JavaScript 차단 시간 단축</a>
+
+필요한 최소한의 JavaScript를 다운로드하여 사용자에게 제공합니다. 차단하는 JavaScript의 양을 줄이면 렌더링 속도가 빨라지고 결과적으로 LCP가 향상됩니다.
+
+몇 가지 다른 방법으로 스크립트를 최적화하여 이를 수행할 수 있습니다.
+
+- [JavaScript 파일 축소 및 압축](/reduce-network-payloads-using-text-compression/)
+- [사용하지 않는 JavaScript 지연](/reduce-javascript-payloads-with-code-splitting/)
+- [사용하지 않는 Polyfills 최소화](/serve-modern-code-to-modern-browsers/)
+
+{% Aside %} [최초 입력 지연 최적화](/optimize-fid/) 가이드에서는 JavaScript 차단 시간을 줄이는 데 필요한 모든 기술을 조금 더 자세히 설명합니다. {% endAside %}
+
+## 느린 리소스 로드 시간 {: #slow-resource-load-times }
+
+CSS 또는 JavaScript 차단 시간이 증가는 성능 저하에 직접적 영향을 미치지만, 다른 많은 유형의 리소스를 로드하는 데 걸리는 시간도 페인트 시간에 영향을 줄 수 있습니다. LCP에 영향을 미치는 요소 유형은 다음과 같습니다.
+
+- `<img>` 요소
+- `<svg>` 요소 내부의 `<image>`
+- `<video>` 요소([포스터](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster) 이미지는 LCP 측정에 사용됨)
+- [`url()`](https://developer.mozilla.org/docs/Web/CSS/url) 함수를 통해 로드된 배경 이미지가 있는 요소<a>(CSS 그라데이션</a>과는 대조적임)
+- 텍스트 노드 또는 기타 인라인 수준 텍스트 요소를 포함하는 [블록 수준 요소](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)
+
+스크롤 없이 볼 수 있는 상태로 렌더링된 경우 이러한 요소를 로드하는 데 걸리는 시간은 LCP에 직접적인 영향을 미칩니다. 이러한 파일이 가능한 한 빨리 로드되도록 하는 몇 가지 방법이 있습니다.
+
+- 이미지 최적화 및 압축
+- 중요한 리소스 미리 로드
+- 텍스트 파일 압축
+- 네트워크 연결을 기반으로 다양한 자산 제공(적응형 서비스)
+- 서비스 작업자를 사용하여 자산 캐시
+
+### 이미지 최적화 및 압축
+
+대부분의 사이트에서 이미지는 페이지 로드가 완료되었을 때 표시되는 가장 큰 요소입니다. 대표 이미지, 대형 캐러셀 또는 배너 이미지 등이 이러한 예시에 속합니다.
+
+<figure>
+  {% Img
+    src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png",
+    alt="",
+    width="459",
+    height="925"
+  %}
+  <figcaption>이미지가 가장 큰 페이지 요소인 경우: <a href="https://design.google/">design.google</a></figcaption>
+</figure>
+
+이러한 유형의 이미지를 로드하고 렌더링하는 데 걸리는 시간을 개선하면 LCP 속도 향상에 직접적인 영향을 미칩니다. 이를 달성하는 방법은 다음과 같습니다.
+
+- 처음부터 이미지를 사용하지 않는 것이 좋습니다. 콘텐츠와 관련이 없는 경우 삭제하세요.
+- 이미지 압축(예: [Imagemin](/use-imagemin-to-compress-images) 사용)
+- 이미지를 최신 형식(JPEG 2000, JPEG XR 또는 WebP)으로 변환
+- 반응형 이미지 사용
+- 이미지 CDN 사용 고려
+
+{% Aside %} 이러한 모든 기술을 자세히 설명하는 가이드 및 리소스를 확인하려면 [이미지 최적화](/fast/#optimize-your-images)를 참조하세요. {% endAside %}
+
+### 중요한 리소스 미리 로드
+
+특정 CSS 또는 JavaScript 파일에서 선언되거나 사용되는 중요한 리소스는 애플리케이션의 수많은 CSS 파일 중 하나에 저장된 글꼴처럼 생각보다 늦게 가져오게 될 수 있습니다.
+
+특정 리소스에 우선순위를 지정해야 하는 경우 `<link rel="preload">`를 사용해 더 빨리 가져옵니다. [다양한 유형의 리소스](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded)를 미리 로드할 수 있지만 먼저 글꼴, 스크롤 없이 볼 수 있는 이미지 또는 동영상, 중요한 경로 CSS 또는 JavaScript와 같은 [중요한 자산을 미리 로드](/preload-critical-assets/)하는 데 집중해야 합니다.
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+Chrome 73부터 [반응형 이미지](/preload-responsive-images/)와 함께 사전 로드를 사용해 더 빠른 이미지 로드를 위한 두 가지 패턴을 조합할 수 있습니다.
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### 텍스트 파일 압축
+
+[Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) 및 [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html)와 같은 압축 알고리즘은 서버와 브라우저 사이에 전송되는 텍스트 파일(HTML, CSS, JavaScript)의 크기를 크게 줄일 수 있습니다. Gzip은 모든 브라우저에서 효과적으로 지원되며 더 나은 압축 결과를 제공하는 Brotli 역시 [거의 모든 최신 브라우저에서 사용할 수 있습니다](https://caniuse.com/#feat=brotli).
+
+리소스를 압축하면 전달 크기가 최소화되어 로드 시간이 향상되고 결과적으로 LCP가 향상됩니다.
+
+1. 먼저 서버에서 이미 파일을 자동으로 압축하는 것은 아닌지 확인하세요. 대부분의 호스팅 플랫폼, CDN 및 역방향 프록시 서버는 기본적으로 자산을 압축으로 인코딩하거나 쉽게 구성할 수 있도록 지원합니다.
+2. 파일을 압축하기 위해 서버를 수정해야 하는 경우 gzip 대신 더 나은 압축 비율을 제공하는 Brotli를 사용하는 것이 좋습니다.
+3. 사용할 압축 알고리즘을 선택한 후에는 브라우저에서 요청하는 즉시 자산을 압축하는 대신 빌드 프로세스 중에 미리 자산을 압축하세요. 이렇게 하면 서버 오버헤드가 최소화되고, 특히 높은 압축률을 사용한 경우 요청 시 지연이 방지됩니다.
+
+<figure>
+  {% Img
+    src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png",
+    alt="LCP 개선 예시: Brotli 압축 이전/이후",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP 개선 예시: Brotli 압축 이전/이후
+  </figcaption>
+</figure>
+
+{% Aside %} 자세한 내용은 [네트워크 페이로드 축소 및 압축](/reduce-network-payloads-using-text-compression/) 가이드를 참조하세요. {% endAside %}
+
+### 적응형 게재
+
+페이지의 메인 콘텐츠를 구성하는 리소스를 로드할 때 사용자의 기기나 네트워크 상황에 따라 조건부로 다른 자산을 가져오는 것이 효과적일 수 있습니다. [네트워크 정보](https://wicg.github.io/netinfo/), [장치 메모리](https://www.w3.org/TR/device-memory/) 및 [HardwareConcurrency](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency) API를 사용하여 수행할 수 있습니다.
+
+초기 렌더링에 중요한 큰 자산이 있는 경우 사용자의 연결 또는 장치에 따라 동일한 리소스의 다양한 변형을 사용할 수 있습니다. 예를 들어, 4G보다 연결 속도가 낮다면 동영상 대신 이미지를 표시할 수 있습니다.
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // Load video
+  } else {
+    // Load image
+  }
+}
+```
+
+사용할 수 있는 유용한 속성 목록은 다음과 같습니다.
+
+- `navigator.connection.effectiveType`: 유효 연결 유형
+- `navigator.connection.saveData`: 데이터 절약 활성화/비활성화
+- `navigator.hardwareConcurrency`: CPU 코어 수
+- `navigator.deviceMemory`: 장치 메모리
+
+{% Aside %} 자세한 내용은 [네트워크 품질 기반 적응형 게재](/adaptive-serving-based-on-network-quality/)를 참조하세요. {% endAside %}
+
+### 서비스 작업자를 사용하여 자산 캐시
+
+서비스 작업자는 이 글의 앞에서 언급했듯 더 작은 HTML 응답을 제공하는 것을 포함하여 여러 가지 유용한 작업에 사용될 수 있습니다. 또한 반복 요청 시 네트워크에서 대신 브라우저에 제공할 수 있는 정적 리소스를 캐시하는 데 사용할 수도 있습니다.
+
+서비스 작업자를 사용하여 중요한 리소스를 미리 캐싱하면 로드 시간을 크게 줄일 수 있습니다. 연결 상태가 약한 상태에서, 심지어는 오프라인에서 웹 페이지를 다시 로드하는 사용자의 경우 특히 그렇습니다. [Workbox](https://developer.chrome.com/docs/workbox/)와 같은 라이브러리는 사전 캐시된 자산 업데이트 프로세스를 만들 수 있으며 이는 커스텀 서비스 작업자를 작성하는 것보다 쉽습니다.
+
+{% Aside %} 서비스 작업자 및 Workbox에 대해 자세히 알아보려면 [네트워크 안정성](/reliable/)을 참조하세요. {% endAside %}
+
+## 클라이언트 측 렌더링 {: #client-side-rendering }
+
+많은 사이트에서 클라이언트 측 JavaScript 논리를 사용하여 브라우저에서 직접 페이지를 렌더링합니다. [React](https://reactjs.org/) , [Angular](https://angular.io/) 및 [Vue](https://vuejs.org/) 같은 프레임워크 및 라이브러리를 사용하면 웹 페이지의 다양한 측면을 완전히 서버가 아닌 클라이언트에서 처리하는 단일 페이지 애플리케이션을 더 쉽게 구축할 수 있습니다.
+
+대부분 클라이언트에서 렌더링되는 사이트를 구축하는 경우 대규모 JavaScript 번들을 사용한다면 LCP에 미칠 수 있는 영향에 주의해야 합니다. 이를 방지하기 위한 최적화가 이루어지지 않으면 모든 중요한 JavaScript의 다운로드 및 실행이 완료될 때까지 사용자가 페이지의 콘텐츠를 보거나 상호 작용할 수 없습니다.
+
+클라이언트 측 렌더링 사이트를 구축할 때는 다음과 같은 최적화 방식을 고려하세요.
+
+- 중요 JavaScript 최소화
+- 서버 측 렌더링 사용
+- 사전 렌더링 사용
+
+### 중요 JavaScript 최소화
+
+사이트의 콘텐츠가 일정량의 JavaScript가 다운로드된 후에만 표시되거나 상호 작용할 수 있는 경우 번들의 크기를 최대한 줄여야 합니다. 이를 위해서는 다음과 같은 방법을 사용하세요.
+
+- JavaScript 축소
+- 사용하지 않는 JavaScript 지연
+- 사용하지 않는 Polyfills 최소화
+
+이러한 최적화에 대해 자세히 알아보려면 [JavaScript 차단 시간 단축](#reduce-javascript-blocking-time) 섹션으로 돌아가세요.
+
+### 서버 측 렌더링 사용
+
+대부분 클라이언트에서 렌더링되는 사이트의 경우 항상 JavaScript의 양을 최소화하는 것에 가장 먼저 집중해야 합니다. 그러나 최대한 LCP를 개선하기 위해 서버 렌더링 경험을 결합하는 것도 고려해볼 수 있습니다.
+
+이 개념은 서버를 사용하여 애플리케이션을 HTML로 렌더링하는 방식으로 작동합니다. 그러면 클라이언트가 모든 JavaScript 및 필수 데이터를 동일한 DOM 콘텐츠에 "[하이드레이션](https://www.gatsbyjs.org/docs/react-hydration/)"합니다. 이렇게 하면 페이지의 주요 콘텐츠가 클라이언트에서만이 아니라 서버에서 먼저 렌더링되도록 하여 LCP를 개선할 수 있지만 몇 가지 단점이 있습니다.
+
+- 서버와 클라이언트에서 동일한 JavaScript 렌더링 애플리케이션을 유지 관리하면 복잡성이 증가할 수 있습니다.
+- 서버에서 HTML 파일을 렌더링하기 위해 JavaScript를 실행하면 서버에서 정적 페이지를 제공하는 것과 비교하여 항상 서버 응답 시간(TTFB)이 늘어납니다.
+- 서버에서 렌더링된 페이지는 상호 작용할 수 있는 것처럼 보이지만 모든 클라이언트 측 JavaScript가 실행될 때까지 사용자 입력에 응답할 수 없습니다. 이로 인해 [**Time to Interactive**](/tti/)(상호 작용까지의 시간, TTI)는 점수가 낮아집니다.
+
+### 사전 렌더링 사용
+
+사전 렌더링은 서버 측 렌더링보다는 덜 복잡하면서도 LCP를 개선하는 방법을 제공하는 별도의 기술입니다. 사용자 인터페이스가 없는 브라우저인 헤드리스 브라우저는 빌드 시 모든 경로의 정적 HTML 파일을 생성하는 데 사용됩니다. 이러한 파일은 이후 애플리케이션에 필요한 JavaScript 번들과 함께 제공될 수 있습니다.
+
+사전 렌더링을 사용하면 TTI에는 여전히 부정적이지만, 서버 응답 시간은 요청된 후에만 각 페이지를 동적으로 렌더링하는 서버 측 렌더링 솔루션의 경우만큼 영향을 받지 않습니다.
+
+<figure>
+  {% Img
+    src="image/admin/sm9s16UHfh8a5MDEWjxa.png",
+    alt="LCP 개선 예시: 사전 렌더링 이전/이후",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    LCP 개선 예시: 사전 렌더링 이전/이후
+  </figcaption>
+</figure>
+
+{% Aside %} 다양한 서버 렌더링 아키텍처에 대해 자세히 알아보려면 [웹에서 렌더링하기](/rendering-on-the-web/)를 참조하세요. {% endAside %}
+
+## 개발자 도구
+
+LCP를 측정하고 디버그하는 데 사용할 수 있는 여러 가지 도구가 있습니다.
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/)은 실험실 설정에서 LCP를 측정할 수 있도록 지원합니다.
+
+  {% Img src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg", alt="Lighthouse 6.0", width="800", height="309" %}
+
+- Chrome DevTools의 [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) 패널에 있는 **Timing** 섹션에는 LCP 마커가 포함되어 있으며 **Related Node** 필드 위로 마우스를 가져가면 해당 LCP와 연결된 요소가 표시됩니다.
+
+  {% Img src="image/admin/sxczQPKH0cvMBsNCx5uH.png", alt="Chrome DevTools의 LCP", width="800", height="509" %}
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) 는 원본 수준에서 집계된 실제 LCP 값을 제공합니다.
+
+_Philip Walton, Katie Hempenius, Kayce Basques, Ilya Grigorik의 리뷰에 감사드립니다._
diff --git a/src/site/content/ko/blog/payment-and-address-form-best-practices/index.md b/src/site/content/ko/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..edfb82d67e0
--- /dev/null
+++ b/src/site/content/ko/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,506 @@
+---
+title: 지불 및 주소 양식 모범 사례
+subhead: 사용자가 가능한 한 빠르고 쉽게 주소 및 지불 양식을 작성할 수 있도록 하여 전환을 극대화하십시오.
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2021-11-30
+description: 사용자가 가능한 한 빠르고 쉽게 주소 및 지불 양식을 작성할 수 있도록 하여 전환을 극대화하십시오.
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: 노트북 컴퓨터에서 지불하기 위해 지불 카드를 사용하는 사업가.
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+효과적으로 설계된 양식은 사용자를 돕고 전환율을 높입니다. 약간만 수정하더라도 큰 차이를 만들 수 있습니다!
+
+{% Aside 'codelab' %} 실습 가이드를 통해 이러한 모범 사례를 배우고 싶다면 이 게시물의 두 코드랩을 확인하세요.
+
+- [결제 양식 모범 사례 Codelab](/codelab-payment-form-best-practices)
+- [주소 양식 모범 사례 Codelab](/codelab-address-form-best-practices) {% endAside %}
+
+다음은 모든 모범 사례를 보여주는 간단한 지불 양식의 예입니다.
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+다음은 모든 모범 사례를 보여주는 간단한 주소 양식의 예입니다.
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## 체크리스트
+
+- `<form>`, `<input>`, `<label>` 및 `<button>`과 같은 [의미 있는 HTML 요소를 사용하세요](#meaningful-html).
+- [`<label>`이 있는 각 양식 필드에 레이블 지정하세요](#html-label).
+-  HTML 요소 속성을 사용하여 [기본 제공 브라우저 기능](#html-attributes) 특히 적절한 값이 있는 [`type`](#type-attribute) 및 [`autocomplete`](#autocomplete-attribute)에 액세스하세요.
+- 지불 카드 번호와 같이 증가하도록 의도되지 않은 번호에 `type="number"`를 사용하지 않도록 하세요. 대신 `type="text"` 및 [`inputmode="numeric"`](#inputmode-attribute)을 사용하세요.
+- `input`, `select` 또는 `textarea`에 [적절한 자동 완성 값](#autocomplete-attribute)을 사용할 수 있으면 이를 사용해야 합니다.
+- 브라우저가 양식을 자동으로 채우는 데 도움이 되도록 페이지 로드 또는 웹사이트 배치 사이에서 변하지 않는 `name` 및 `id` 속성 [안정 값](#stable-name-id)을 입력하세요.
+- 탭하거나 클릭하면 [제출 버튼이 비활성화](#disable-submit)됩니다.
+- 입력하는 동안 양식을 제출할 뿐만 아니라 데이터를 [유효성 검사](#validate)하세요.
+- 결제가 완료되면 [게스트 결제](#guest-checkout)를 기본값으로 설정하고 계정 생성을 간단하게 만들 수 있습니다.
+- 명확한 단계에서 명확한 실행 호출과 함께 [결제 프로세스 진행 과정](#checkout-progress)을 표시합니다.
+- 클러터와 방해 요소를 제거하여 [잠재적 결제 출구 지점을 제한](#reduce-checkout-exits)합니다.
+- 결제 시 [전체 주문 세부 정보](#checkout-details)를 표시하고 주문을 쉽게 조정할 수 있습니다.
+- [필요하지 않은 데이터를 요구하지 마십시오](#unneeded-data) .
+- 합당한 이유가 없는 한 [단일 입력으로 이름을 요청하세요.](#single-name-input)
+- 이름과 사용자 이름에 [라틴어 전용 문자를 강제로 사용하지 마세요.](#unicode-matching)
+- [다양한 주소 형식을 허용합니다](#address-variety).
+- [주소에 하나의 `textarea`](#address-textarea)를 사용하는 것을 고려하세요.
+- [청구서 수신 주소 자동 완성](#billing-address) 기능을 사용하세요.
+- 필요한 경우 [국제화 및 현지화](#internationalization-localization)합니다.
+- [우편번호 주소를 조회하는 것](#postal-code-address-lookup)을 피하세요.
+- [적절한 지불 카드 값 자동 채우기 기능](#payment-form-autocomplete)을 사용하세요.
+- [결제 카드 번호에 하나의 입력 값](#single-number-input)만 사용하세요.
+- 자동 채우기 경험을 방해하는 [사용자 지정 요소](#avoid-custom-elements)를 사용하는 것을 피하세요.
+- [현장 및 실험실 테스트](#analytics-rum): 페이지 분석, 상호 작용 분석 및 실제 사용자 성능 측정.
+- [다양한 브라우저, 장치 및 플랫폼에서 테스트](#test-platforms)합니다.
+
+{% Aside %} 본 문서는 주소 및 결제 양식에 대한 최신 모범 사례에 대한 것입니다. 사이트에서 트랜잭션을 구현하는 방법은 설명되어 있지 않습니다. 웹사이트에 결제 기능을 추가하는 방법에 대해 자세히 알아보려면 [웹 결제](/payments)를 참조하십시오. {% endAside %}
+
+## 의미 있는 HTML 사용하기 {: #meaningful-html}
+
+작업을 위해 빌드된 요소와 속성을 사용합니다.
+
+- `<form>`, `<input>`, `<label>` 및 `<button>`
+- `type`, `autocomplete` 및 `inputmode`
+
+이를 통해 기본 제공 브라우저 기능을 활성화하고 접근성을 개선하며 마크업에 의미를 추가할 수 있습니다.
+
+### 의도한 대로 HTML 요소 사용하기 {: #html-elements}
+
+#### 양식을 &lt;form&gt;에 넣기  {: #html-form}
+
+`<input>` 요소를 `<form>`에 래핑하지 않고 순수하게 JavaScript로 데이터 제출을 처리하고 싶을 수 있습니다.
+
+그렇게 하지 마세요!
+
+HTML `<form>`을 사용하면 모든 최신 브라우저에서 강력한 기본 제공 기능 모음에 액세스할 수 있으며 화면 리더 및 기타 보조 장치에서 사이트에 액세스할 수 있습니다. 또한 `<form>`을 사용하면 JavaScript 지원이 제한된 기존 브라우저를 위한 기본 기능을 구축하고 코드에 결함이 있는 경우라도 양식 제출을 활성화하고 실제로 JavaScript를 비활성화하는 소수의 사용자를 위해 더 간단하게 만들 수 있습니다.
+
+사용자 입력 항목을 위한 두 개 이상의 페이지 구성 요소가 있는 경우 각각 고유한 `<form>` 요소에 넣어야 합니다. 예를 들어, 동일한 페이지에서 로그인하고 검색하는 경우 각각을 고유한 `<form>`에 넣으십시오.
+
+#### `<label>`을 사용하여 요소 레이블 지정하기 {: #html-label}
+
+`<input>`, `<select>` 또는 `<textarea>`에 대한 레이블을 지정하려면 [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label)을 사용하세요.
+
+입력의 `id`와 값이 동일한 레이블의 `for` 속성을 제공하여 입력을 레이블과 연관시킵니다.
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+단일 입력에 단일 레이블을 사용합니다. 하나의 레이블로 여러 입력에 대한 레이블을 지정하지 마십시오. 이것은 브라우저에서 가장 잘 작동하고 스크린 리더에서 가장 효과적입니다. 레이블을 탭하거나 클릭하면 연관된 입력으로 포커스가 이동하고 *레이블* 또는 레이블의 *입력*이 포커스를 받으면 스크린 디더가 레이블 텍스트를 공개합니다.
+
+{% Aside 'caution' %} 레이블 대신 자체적인 [자리 표시자](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)를 사용하지 마세요. 입력 항목에 텍스트를 입력하기 시작하면 자리 표시자가 숨겨져 입력 항목이 무엇을 위한 것인지 잊어버리기 쉽습니다. 날짜와 같은 값의 올바른 형식을 표시하기 위해 자리 표시자를 사용하는 경우에도 마찬가지입니다. 이는 특히 주의가 산만하거나 스트레스를 받는 경우 전화 사용자에게 문제가 될 수 있습니다! {% endAside %}
+
+#### 유용한 버튼 {: #html-button} 만들기
+
+버튼에는 [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)을 사용하세요! `<input type="submit">`을 사용할 수도 있지만 `div` 또는 버튼 역할을 하는 다른 임의 요소를 사용하지 마십시오. 버튼 요소는 액세스 가능한 동작, 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다.
+
+각 양식 제출 버튼에 기능을 설명하는 값을 지정하십시오. 체크아웃에 대한 각 단계에서 진행 상황을 보여주고 다음 단계를 명확하게 보여주는 설명적 동작 호출 기능을 사용하세요. 예를 들어, 배송 주소 양식의 제출 버튼에 **계속** 또는 **저장**이 아닌 **결제 진행**이라는 레이블을 지정합니다.
+
+{: #disable-submit}
+
+사용자가 제출 버튼을 탭하거나 클릭하면, 특히 사용자가 결제를 하거나 주문할 때 제출 버튼을 비활성화하는 것이 좋습니다. 제대로 작동하는 경우에도 많은 사용자가 버튼을 반복적으로 클릭하기 때문입니다. 이로 인해 결제가 이루어지지 않고 서버에 부하가 발생할 수 있습니다.
+
+반면에 완전하고 유효한 사용자 입력을 기다리는 제출 버튼을 비활성화하지 마십시오. 예를 들어, 무언가가 누락되었거나 유효하지 않다고 해서 **주소 저장** 버튼을 비활성화된 상태로 두지 마십시오. 이는 사용자에게 도움이 되지 않습니다. 사용자는 계속해서 버튼을 탭하거나 클릭하고 버튼이 고장난 것으로 생각할 수 있습니다. 대신 사용자가 유효하지 않은 데이터가 포함된 양식을 제출하려고 하면 무엇이 잘못되었으며 수정하려면 어떻게 해야 하는지 알려주세요. 이는 데이터 입력이 더 어렵고 양식 제출을 시도할 때 사용자의 화면에 누락되거나 잘못된 양식 데이터가 표시되지 않을 수 있는 모바일에서 특히 중요합니다.
+
+{% Aside 'caution' %} 양식에 있는 버튼의 기본 유형은 `submit`입니다. 양식(예: **비밀번호 표시**)에 다른 버튼을 추가하려면 `type="button"`을 추가하세요. 그렇지 않으면 버튼을 클릭하거나 탭하면 양식이 제출됩니다.
+
+양식 필드에 포커스가 있는 동안 `Enter` 키를 누르면 양식의 첫 번째 `submit` 버튼 클릭이 시뮬레이션됩니다. **Submit** 버튼 전에 양식에 버튼을 포함하려면 유형을 지정하지 마십시오. 이 버튼은 양식(`submit`)의 버튼에 대한 기본 유형이며 해당 양식이 제출되기 전에 클릭 이벤트를 수신합니다. 이에 대한 예는 [demo](https://enter-button.glitch.me/)를 참조하세요. 양식을 작성한 다음 `Enter` 키를 누릅니다. {% endAside %}
+
+### HTML 속성 {: #html-attributes} 최대한 활용하기
+
+#### 사용자가 데이터를 쉽게 입력할 수 있도록 합니다
+
+{: #type-attribute}
+
+적절한 입력 [`type` 속성](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 제공 유효성 검사 기능을 활성화하세요.
+
+예를 들어 이메일 주소에 `type="email"`을 사용하고 전화번호에는 `type="tel"`을 사용하세요.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="이메일 주소(type=email 사용)를 입력하는 동안 그리고 전화번호(type=tel 포함)를 입력하는 동안 적절한 키보드를 표시하는 Android 전화에 대한 스크린샷 2개.", width="800", height="683" %} <figcaption>이메일 및 전화에 적합한 키보드.</figcaption></figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %} type="number"를 사용하면 위/아래 화살표를 추가하여 숫자를 증가시키므로 전화, 지불 카드 또는 계좌 번호와 같은 데이터에는 의미가 없습니다.
+
+이와 같은 숫자의 경우, `type="text"`를 설정(또는 `text`가 기본 값이므로 설정을 그대로 남겨 둠)합니다. 전화번호의 경우 `type="tel"`을 사용하여 모바일에서 적절한 키보드를 가져옵니다. 다른 숫자의 경우 `inputmode="numeric"`을 사용하여 모바일에서 숫자 키보드를 가져옵니다.
+
+일부 사이트는 모바일 사용자가 올바른 키보드를 가져올 수 있도록 지불 카드 번호에 `type="tel"`을 여전히 사용합니다. 그러나 `inputmode`는 [현재 매우 광범위하게 지원](https://caniuse.com/input-inputmode)되므로 그렇게 까지 할 필요는 없습니다. 하지만 사용자의 브라우저를 확인하십시오. {% endAside %}
+
+{: #avoid-custom-elements}
+
+날짜의 경우 사용자 지정 `select` 요소를 사용하지 마십시오. 제대로 구현되지 않고 기존 브라우저에서 작동하지 않으면 자동 채우기 경험이 방해를 받습니다. 생년월일과 같은 숫자의 경우, 특히 모바일에서 긴 드롭다운 목록에서 선택하는 것보다 수동으로 숫자를 입력하는 것이 더 쉽고 오류가 덜 발생할 수 있으므로 `select`을 사용하기 보다 `input`을 사용하는 것을 고려하세요. `inputmode="numeric"`을 사용하여 모바일에서 올바른 키보드를 확인하고, 텍스트 또는 자리 표시자와 함께 유효성 검사 및 형식 힌트를 추가하여 사용자가 적절한 형식으로 데이터를 입력할 수 있도록 합니다.
+
+{% Aside %} [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) 요소는 사용자가 사용 가능한 옵션 목록에서 선택할 수 있도록 하고 사용자가 텍스트를 입력할 때 일치하는 제안을 제공합니다. `text`의 경우 `datalist`를 시도하고, [simpl.info/datalist](https://simpl.info/datalist)에서 `range` 및 `color` 입력을 시도하세요. 출생 연도를 입력하는 경우, [datalist-select.glitch.me](https://datalist-select.glitch.me)에서 `select`과 `input` 그리고 `datalist`를 비교할 수 있습니다. {% endAside %}
+
+#### 자동 완성을 사용하여 접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 돕습니다 {: #autocomplete-attribute}
+
+적절한 `autocomplete` 값을 사용하면 브라우저에서 데이터를 안전하게 저장하고 `input`, `select` 및 `textarea` 값을 자동으로 완성하여 사용자를 지원할 수 있습니다. 이는 모바일에서 특히 중요하며 [높은 양식 이탈률](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data)을 방지하는 데 중요합니다. 자동 완성 기능은 또한 [여러 접근성 이점](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)도 제공합니다.
+
+양식 필드에 적절한 자동 완성 값을 사용할 수 있는 경우 이를 사용해야 합니다. [MDN 웹 문서](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)에는 값의 전체 목록과 이를 올바르게 사용하는 방법에 대한 설명이 있습니다.
+
+{: #stable-name-id}
+
+{% Aside %} 적절한 자동 완성 값을 사용하고 양식 필드 `name` 및 `id` 속성에 페이지 로드 또는 웹사이트 배치 사이를 변경하지 않는 [안정한 값](#stable-name-id)을 제공하여 브라우저가 양식을 자동으로 완성하도록 지원합니다. {% endAside %}
+
+{: #billing-address}
+
+기본적으로 청구서 수신 주소를 배송 주소와 동일하게 설정합니다. 청구서 수신 주소를 양식에 표시하는 대신 청구서 수신 주소를 편집할 수 있는 링크를 제공(또는 [`summary` 및 `details` 요소](https://simpl.info/details/) 사용)하여 시각적 혼란을 줄입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="청구서 수신 주소를 변경하는 링크를 나타내는 결제 페이지 예제.", width="800", height="250" %} <figcaption>청구서 검토 링크 추가.</figcaption></figure>
+
+배송 주소와 마찬가지로 청구서 수신 주소에 적절한 자동 완성 값을 사용하면 사용자가 데이터를 두 번 이상 입력할 필요가 없습니다. 다른 섹션에 동일한 이름이 있는 입력에 대한 값이 다를 경우 접두어를 추가하여 속성을 자동으로 완성합니다.
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### 사용자가 올바른 데이터를 입력할 수 있도록 지원 {: #validation}
+
+고객이 "잘못을 저질렀다고" 해서 "비방"하지 마십시오. 대신 문제가 발생하는 즉시 사용자가 수정할 수 있도록 도와줌으로써 양식을 더 빠르고 쉽게 완료할 수 있도록 돕습니다. 고객은 결제 프로세스를 통해 회사에 제품이나 서비스에 대한 비용을 지불하려는 것입니다. 고객을 처벌하는 대신 도와주십시오!
+
+`min`, `max` 및 `pattern`을 포함하여 허용되는 값을 지정하기 위해 양식 요소에 [제약 조건 속성](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints)을 추가할 수 있습니다. 요소의 [유효성 상태](https://developer.mozilla.org/docs/Web/API/ValidityState)는 요소의 값이 유효한지 여부에 따라 자동으로 설정되며, 유효하거나 유효하지 않은 값으로 요소의 스타일을 지정하는 데 사용할 수 있는 `:valid` 및 `:invalid` CSS 의사 클래스도 마찬가지입니다.
+
+예를 들어, 다음 HTML은 1900년에서 2020년 사이의 출생 연도에 대한 입력 항목을 지정합니다. `type="number"`를 사용하면 입력 값이 `min` 및 `max`에 의해 지정된 범위 내의 숫자로만 제한됩니다. 범위를 벗어난 숫자를 입력하려고 하면 입력 항목이 유효하지 않은 상태로 설정됩니다.
+
+{% Glitch { id: 'constraints', path: 'index.html', height: 170 } %}
+
+다음 예에서는 `pattern="[\d ]{10,30}"`을 사용하여 공백을 허용하면서 유효한 결제 카드 번호를 확인합니다.
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+최신 브라우저는 `email` 또는 `url` 유형의 입력에 대한 기본 유효성 검사도 수행합니다.
+
+{% Glitch { id: 'type-validation', path: 'index.html', height: 250 } %}
+
+{% Aside %} `type="email"`이 있는 입력에 `multiple` 속성을 추가하여 단일 입력에서 쉼표로 구분된 여러 이메일 주소에 대한 기본 제공 유효성 검사 기능을 활성화합니다. {% endAside %}
+
+양식 제출 시 브라우저는 문제가 있거나 필수 값이 누락된 필드에 자동으로 초점을 맞춥니다. JavaScript가 필요하지 않습니다!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="브라우저 프롬프트와 유효하지 않은 이메일 값에 대한 포커스를 보여주는 데스크톱의 Chrome 로그인 양식에 대한 스크린샷.", width="500", height="483" %} <figcaption>브라우저의 기본 제공 유효성 검사 기능.</figcaption></figure>
+
+제출 버튼을 클릭할 때 오류 목록을 제공하는 대신 인라인으로 유효성을 검사하고 사용자가 데이터를 입력할 때 피드백을 제공합니다. 양식 제출 후 서버의 데이터를 유효성 검사해야 하는 경우 발견된 모든 문제를 나열하고 유효하지 않은 값이 있는 모든 양식 필드를 명확하게 강조 표시하고 문제가 있는 각 필드 옆에 수정해야 할 항목을 설명하는 메시지를 인라인으로 표시합니다. 서버 로그 및 분석 데이터에서 일반적인 오류를 확인하십시오. 양식을 다시 디자인해야 할 수도 있습니다.
+
+또한 사용자가 데이터를 입력하고 양식을 제출하는 동안 더 강력한 유효성 검사를 수행하려면 JavaScript를 사용해야 합니다. 포커스를 설정하고 프롬프트 메시지를 표시하는 기본 제공 브라우저 UI를 사용하여 사용자 지정 유효성 검사 기능을 추가하려면 [제약 조건 유효성 검사 API](https://html.spec.whatwg.org/multipage/forms.html#constraints)(이는 [폭넓게 지원됨](https://caniuse.com/#feat=constraint-validation))를 사용하십시오.
+
+[보다 복잡한 실시간 유효성 검사를 위해 JavaScript 사용](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)에서 자세히 알아보세요.
+
+{% Aside 'warning' %} 클라이언트 측 유효성 검사 및 데이터 입력 제약 조건이 있더라도 백엔드가 사용자의 데이터 입력 및 출력을 안전하게 처리하는지 확인해야 합니다. 사용자 입력을 절대 신뢰하지 마십시오. 악의적일 수 있습니다. [OWASP 입력 유효성 검사 치트 시트](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)에서 자세히 알아보세요. {% endAside %}
+
+#### 사용자가 필수 데이터를 누락하지 않도록 지원 {: #required}
+
+필수 값에 대한 입력에 [`required` 속성](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)을 사용합니다.
+
+양식이 제출되면 [최신 브라우저](https://caniuse.com/mdn-api_htmlinputelement_required)는 자동으로 메시지를 표시하고 누락된 데이터가 있는 `required` 필드에 초점을 맞출 때 [`:required` pseudo-class](https://caniuse.com/?search=required)를 사용하여 필수 필드를 강조 표시할 수 있습니다. JavaScript가 필요하지 않습니다!
+
+모든 필수 필드의 레이블에 별표를 추가하고 양식의 시작 부분에 별표가 의미하는 바를 설명하는 메모를 추가합니다.
+
+## 결제 간소화 {: #checkout-forms}
+
+### 모바일 상거래 격차를 염두에 두십시오! {: #m-commerce-gap}
+
+사용자가 사이트 이용 과정에서 *번거로움*을 느낀다고 상상해 보세요. 사이트를 이용하는 것이 번거로우면 사용자가 사이트를 떠납니다.
+
+특히 모바일에서는 마찰을 줄이고 초점을 유지해야 합니다. 많은 사이트에서 모바일에서 더 많은 *트래픽*이 발생하지만 데스크톱에서는 더 많은 *전환*이 발생합니다. 이러한 현상을 [모바일 상거래 격차](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)라고 합니다. 고객은 단순히 데스크탑에서 구매를 완료하는 것을 선호할 수 있지만 낮은 모바일 전환율도 좋지 않은 사용자 경험의 결과입니다. 모바일에서 손실된 전환율을 *최소화*하고 데스크탑에서 전환율을 *극대화*하는 것입니다. [연구에 따르면](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs) 더 나은 모바일 양식 경험을 제공하는 것은 엄청난 기회가 있습니다.
+
+무엇보다 사용자는 길고 복잡하며 방향 감각을 잃어버리기 쉬운 양식을 포기할 가능성이 더 큽니다. 이것은 사용자가 더 작은 화면에 있거나 주의가 산만하거나 서두를 때 특히 그렇습니다. 가능한 한 적은 양의 데이터를 요청하세요.
+
+### 게스트 체크아웃을 기본으로 설정하기 {: #guest-checkout}
+
+온라인 상점의 경우 양식 마찰을 줄이는 가장 간단한 방법은 게스트 결제를 기본값으로 설정하는 것입니다. 사용자가 구매하기 전에 계정을 만들도록 강요하지 마십시오. 고객 결제를 허용하지 않는 것이 장바구니 포기의 주요 원인입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="결제하는 동안 장바구니를 포기하는 이유.", width="800", height="503" %} <figcaption>출처: <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a></figcaption></figure>
+
+결제 후 계정 가입을 제안할 수 있습니다. 이 시점에서 계정을 설정하는 데 필요한 대부분의 데이터가 이미 있으므로 사용자를 위해 계정을 빠르고 쉽게 만들 수 있습니다.
+
+{% Aside 'gotchas' %} 결제 후 가입을 제안하는 경우 사용자가 방금 구매한 항목이 새로 생성한 계정에 연결되어 있는지 확인하세요! {% endAside %}
+
+### 결제 진행률 표시 {: #checkout-progress}
+
+진행 상황을 표시하고 다음에 수행해야 할 작업을 명확히 하여 결제 프로세스를 더 쉽게 만들 수 있습니다. 아래 동영상은 영국 소매업체인 [johnlewis.com](https://www.johnlewis.com)이 이를 달성하는 방법을 보여줍니다.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %} <figcaption>결제 진행 과정 보기.</figcaption></figure>
+
+모멘텀을 유지해야 합니다! 결제를 위한 각 단계마다 페이지 제목과 설명 버튼 값을 사용하여 지금 수행해야 할 작업과 결제 후 단계를 명확히 합니다.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>양식 버튼에 다음에 무엇이 표시될지 알려주는 의미 있는 이름을 부여하십시오.</figcaption></figure>
+
+모바일 키보드 입력 키 레이블을 설정하려면 양식 입력에 `enterkeyhint` 속성을 사용하십시오. 예를 들어, 다중 페이지 양식 내에서는 `enterkeyhint="previous"` 및 `enterkeyhint="next"`를 사용하고, 양식의 최종 입력에 대해서는 `enterkeyhint="done"`, 그리고 검색 입력에 대해서는 `enterkeyhint="search"`를 사용하십시오.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Enterkeyhint 입력 속성이 Enter 키 버튼 아이콘을 변경하는 방법을 보여주는 Android 주소 양식에 대한 두 개의 스크린샷.", width="800", height="684" %} <figcaption>Android의 입력 키 버튼: '다음' 및 '완료'.</figcaption></figure>
+
+`enterkeyhint` 속성은 [Android 및 iOS에서 지원](https://caniuse.com/mdn-html_global_attributes_enterkeyhint)됩니다. [enterkeyhint 설명자](https://github.com/dtapuska/enterkeyhint)에서 자세한 내용을 확인할 수 있습니다.
+
+{: #checkout-details}
+
+사용자가 결제 프로세스 내에서 쉽게 이동하고 심지어 최종 결제 단계에서도 주문 내역을 쉽게 조정할 수 있도록 합니다. 간략한 예약 정보뿐만 아니라 주문에 대한 전체적인 세부 정보를 표시합니다. 사용자가 결제 페이지에서 항목 수량을 쉽게 조정할 수 있도록 합니다. 결제 프로세스에서 가장 우선시해야 하는 것은 전환 진행 과정을 방해하지 않는 데 있습니다.
+
+### 주의 산만 요소 제거 {: #reduce-checkout-exits}
+
+제품 프로모션과 같은 시각적 혼란과 주의를 산만하게 하는 요소를 제거하여 잠재적 출구 지점을 제한합니다. 많은 성공적인 소매업체는 결제에서 탐색 및 검색을 제거하기도 합니다.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="johnlewis.com 결제를 통한 진행 상황을 보여주는 두 개의 모바일 스크린샷. 검색, 탐색 및 기타 방해 요소가 제거되었습니다.", width="800", height="683" %}
+  <figcaption>결제를 위해 제거된 검색, 탐색 및 기타 방해 요소.</figcaption>
+</figure>
+
+여정에 집중하세요. 지금은 사용자가 다른 일을 하도록 유혹할 때가 아닙니다!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="무료 스티커에 대한 산만한 프로모션을 보여주는 모바일 결제 페이지 스크린샷", width="350", height="735" %} <figcaption> 고객이 구매를 완료하는 데 방해가 되지 않도록 합니다.</figcaption></figure>
+
+재방문 사용자의 경우 볼 필요가 없는 데이터를 숨겨 결제 흐름을 더욱 간순화할 수 있습니다. 예를 들어, 배송 주소를 양식이 아닌 일반 텍스트로 표시하여 사용자가 링크를 통해 배송 주소를 변경할 수 있도록 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="표시되지 않은 배송 주소, 지불 방법 및 청구서 수신 주소를 변경하는 링크를 포함하여 일반 텍스트로 텍스트를 표시하는 결제 페이지의 '주문 검토' 섹션에 대한 스크린샷.", width="450", height="219" %} <figcaption>고객이 볼 필요가 없는 데이터를 숨깁니다.</figcaption></figure>
+
+## 이름과 주소를 쉽게 입력할 수 있도록 합니다. {: #address-forms}
+
+### 필요한 데이터만 요청하세요. {: #unneeded-data}
+
+이름 및 주소 양식 코딩을 시작하기 전에 어떤 데이터가 필요한지 이해해야 합니다. 필요하지 않은 데이터를 요청하지 마세요! 양식 복잡성을 줄이는 가장 간단한 방법은 불필요한 필드를 제거하는 것입니다. 이는 고객 개인정보 보호에도 유용하고 백엔드 데이터 비용과 책임을 줄일 수 있습니다.
+
+### 단일 이름 입력 사용 {: #single-name-input}
+
+이름, 성, 존칭 또는 기타 이름 부분을 별도로 저장해야 하는 합당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용하세요. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고 잘라서 붙여넣기가 가능하며 자동 채우기 기능이 더 간단해집니다.
+
+특히, 합당한 이유가 없는 한 접두사 또는 타이틀(예: Mrs, Dr 또는 Lord)에 대해 별도의 입력을 추가하지 않도록 하십시오. 사용자가 원할 경우 이름을 입력할 수 있도록 해야 합니다. 또한 `honorific-prefix` 자동 완성 기능은 현재 대부분의 브라우저에서 작동하지 않으므로 이름 접두사 또는 타이틀 필드를 추가하면 대부분의 사용자들은 주소 양식 자동 채우기 경험이 방해를 받습니다.
+
+### 이름 자동 작성 기능 사용
+
+전체 이름에 대해 `name`을 사용하세요:
+
+```html
+<input autocomplete="name" ...>
+```
+
+이름 부분을 분할해야 하는 합당한 이유가 있다면 다음과 같은 적절한 자동 완성 값을 사용해야 합니다.
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### 국제 이름 허용 {: #unicode-matching}
+
+이름 입력을 확인하거나 이름 데이터에 허용되는 문자를 제한할 수 있습니다. 그러나 가능한 한 알파벳에 제한을 두지 않아야 합니다. 고객에게 이름이 "유효하지 않다"고 말하는 것은 실례입니다!
+
+유효성 검사를 위해 라틴 문자와만 일치하는 정규식을 사용하지 않도록 하십시오. 라틴 전용은 라틴 알파벳에 없는 문자를 포함하는 이름이나 주소를 가진 사용자를 배제시킵니다. 대신 유니코드 문자와 일치하는 정규식을 허용하고 백엔드가 입력과 출력 모두에서 유니코드를 안전하게 지원하도록 하십시오. 정규식의 유니코드는 최신 브라우저에서 효과적으로 지원됩니다.
+
+{% Compare 'worse' %}
+
+```html
+<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- Accepts Unicode letters. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>라틴어 전용 문자 일치와 비교한 유니코드 문자 일치.</figcaption></figure>
+
+{% Aside %} 아래에서 [국제화 및 현지화](#internationalization-localization)에 대해 자세히 알아볼 수 있지만 사용자가 있는 모든 지역의 이름에 대해 양식이 효과적인지 확인하세요. 예를 들어, 일본어 이름의 경우 음성 이름을 위한 필드를 넣는 것을 고려해야 합니다. 이렇게 하면 고객 지원 직원이 전화로 고객의 이름을 말할 수 있습니다. {% endAside %}
+
+### 다양한 주소 형식 허용 {: #address-variety}
+
+주소 양식을 디자인할 때 단일 국가 내에서도 당혹해할 정도로 다양한 주소 형식을 염두에 두십시오. "정상" 주소에 대해 가정하지 않도록 주의하세요. (확실하지 않다면 [UK Address Oddities!](http://www.paulplowman.com/stuff/uk-address-oddities/)를 살펴보세요!)
+
+#### 주소 양식을 유연하게 만들기 {:flexible-address}
+
+사용자가 맞지 않는 양식 필드에 자신의 주소를 입력하도록 강요하지 마세요.
+
+예를 들어, 많은 주소가 해당 형식을 사용하지 않고 불완전한 데이터로 인해 브라우저 자동 채우기 기능이 중단될 수 있으므로 별도의 입력에서 집 번호와 거리 이름을 고집하지 마십시오.
+
+`required` 주소 필드에 특히 주의하세요. 예를 들어 영국의 대도시 주소에는 카운티가 없지만 많은 사이트에서는 여전히 사용자가 카운티를 입력하도록 강요합니다.
+
+두 개의 유연한 주소 입력란을 사용하면 다양한 주소 형식에 대해 충분히 효과적일 수 있습니다.
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+일치하는 레이블 추가:
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+아래에 포함된 데모를 리믹스하고 편집하여 이를 시도할 수 있습니다.
+
+{% Aside 'caution' %} 연구에 따르면 [**주소 입력란 2**는 사용자에게 문제가 될 수 있습니다](https://baymard.com/blog/address-line-2). 주소 양식을 디자인할 때 이를 염두에 두십시오. 단일 `textarea`(아래 참조) 또는 다른 옵션을 사용하는 것과 같은 대안을 고려해야 합니다. {% endAside %}
+
+#### 주소에 단일 텍스트 영역을 사용하는 것을 고려하십시오. {: #address-textarea}
+
+주소에 대한 가장 유연한 옵션은 단일 `textarea` 을 제공하는 것입니다.
+
+`textarea` 접근 방식은 모든 주소 형식에 적합하며 잘라내기 및 붙여넣기에 적합하지만 데이터 요구 사항에 부합하지 않을 수 있으며 `address-line1` 및 `address-line2`가 있는 양식만 이전에 사용한 경우 사용자의 자동 채우기 기능이 방해 받을 수 있습니다.
+
+텍스트 영역의 경우 자동 완성 값으로 `street-address`를 사용하세요.
+
+다음은 주소에 `textarea`를 사용하는 방법을 보여주는 양식의 예입니다.
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### 주소 양식의 국제화 및 현지화 {: #internationalization-localization}
+
+주소 양식은 사용자의 위치에 따라 [국제화 및 현지화](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/)를 고려하는 것이 특히 중요합니다.
+
+주소 부분의 이름은 주소 형식과 함께 동일한 언어 내에서도 다양합니다.
+
+```text
+    ZIP code: US
+ Postal code: Canada
+    Postcode: UK
+     Eircode: Ireland
+         PIN: India
+```
+
+주소에 맞지 않거나 기대하는 단어를 사용하지 않는 형식으로 제시되는 것은 짜증스럽거나 당혹스러울 수 있습니다.
+
+[여러 로케일](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region)에 대한 주소 양식을 사용자 정의하는 것이 귀하의 사이트에 필요할 수 있지만 위에서 설명한 대로 양식 유연성을 극대화하는 기술을 사용하는 것이 적절할 수 있습니다. 주소 형식을 현지화하지 않는 경우 다양한 주소 형식에 대처하기 위한 주요 우선 순위를 이해해야 합니다.
+
+- 거리 이름이나 집 번호를 요구하는 것과 같이 주소 부분에 대해 지나치게 구체적으로 요청하지 마십시오.
+- 가능하면 필드를 `required`로 만드는 것을 피하십시오. 예를 들어, 많은 국가의 주소에는 우편번호가 없으며 시골 주소에는 거리 또는 도로 이름이 없을 수 있습니다.
+- '국가'가 아닌 '국가/지역' 'ZIP'이 아닌 'ZIP/우편번호' 등 포괄적인 이름을 사용하세요.
+
+유연하게 유지하세요! 많은 로케일에서 '충분히 효과적으로' 사용되도록 [위의 간단한 주소 형식 예제](#address-textarea)를 채택할 수 있습니다.
+
+#### 우편번호 주소 조회를 피하는 것을 고려하십시오. {: #postal-code-address-lookup}
+
+일부 웹사이트는 우편번호 또는 ZIP을 기반으로 주소를 조회하는 서비스를 사용합니다. 이는 일부 사용 사례에서는 합리적일 수 있지만 잠재적인 단점을 알고 있어야 합니다.
+
+우편번호 주소 제안은 모든 국가에서 효과적이지 않으며 일부 지역에서는 우편번호에 상당히 많은 잠재적 주소가 될 수 있습니다.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>ZIP 또는 우편번호에는 많은 주소가 포함될 수 있습니다!</figcaption></figure>
+
+사용자가 긴 주소 목록에서 선택하기가 어렵습니다. 특히 사용자가 서두르거나 스트레스를 받는 모바일에서는 더욱 그렇습니다. 사용자가 자동 채우기 기능을 활용하고 한 번의 탭이나 클릭으로 채워진 전체 주소를 입력하도록 하는 것이 더 쉽고 오류가 덜 발생할 수 있습니다.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>단일 이름 입력으로 원 탭(원 클릭) 주소 입력이 가능합니다.</figcaption></figure>
+
+## 결제 양식 간소화 {: #general-guidelines}
+
+지불 양식은 결제 프로세스에서 가장 중요한 부분입니다. 잘못된 지불 양식 디자인은 [장바구니 포기](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)의 일반적인 원인입니다. [문제는 세부 사항에 있습니다](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1). 작은 결함만으로 특히 모바일에서 사용자가 구매를 포기하도록 유도할 수 있습니다. 사용자가 데이터를 가능한 한 쉽게 입력할 수 있도록 양식을 디자인해야 합니다.
+
+### 사용자가 지불 데이터를 다시 입력하지 않도록 지원하세요. {: #payment-form-autocomplete}
+
+지불 카드 번호, 카드 이름, 만료 월 및 연도를 포함하여 지불 카드 양식에 `autocomplete` 값을 추가해야 합니다.
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+이를 통해 브라우저는 지불 카드 세부 정보를 안전하게 저장하고 양식 데이터를 올바르게 입력하여 사용자를 지원할 수 있습니다. 자동 완성 기능이 없으면 사용자는 지불 카드 세부 정보의 물리적 기록을 유지하거나 지불 카드 데이터를 장치에 안전하지 않게 저장할 가능성이 더 큽니다.
+
+{% Aside 'caution' %} 지불 카드 번호에서 항상 추론할 수 있기 때문에 지불 카드 유형에 선택기를 추가하지 마세요. {% endAside %}
+
+### 지불 카드 날짜에 사용자 정의 요소를 사용하지 마세요
+
+적절히 디자인되지 않은 경우 [사용자 정의 요소](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)는 자동 채우기를 중단하여 결제 흐름을 방해할 수 있으며 이전 브라우저에서는 효과적이지 않을 수 있습니다. 자동 완성 기능에서 다른 모든 지불 카드 세부 정보를 사용할 수 있지만 자동 채우기가 사용자 지정 요소에 효과적이지 않았기 때문에 사용자는 만료 날짜를 찾기 위해 자신의 실제 지불 카드를 찾아야 합니다. 따라서 구매하지 않고 사이트를 떠날 수 있습니다. 대신 표준 HTML 요소를 사용하고 그에 따라 스타일을 지정하는 것을 고려하십시오.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="자동 채우기를 방해하는 카드 만료 날짜에 대한 사용자 정의 요소를 보여주는 지불 양식 스크린샷.", width="800", height="916" %} <figcaption>만료 날짜를 제외한 모든 필드가 채워진 자동 완성 기능!</figcaption></figure>
+
+### 지불 카드 및 전화번호 숫자에 단일 입력 사용 {: #single-number-input}
+
+지불 카드 및 전화번호의 경우 단일 입력을 사용합니다. 번호를 여러 부분으로 나누지 마십시오. 그러면 사용자가 데이터를 더 쉽게 입력할 수 있고 유효성 검사가 더 간단해지며 브라우저에서 자동 채우기 기능을 사용할 수 있습니다. PIN 및 은행 코드와 같은 다른 숫자 데이터에 대해서도 동일한 작업을 수행하는 것을 고려하십시오.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="4가지 입력 요소로 나누어진 신용카드 필드를 표시하는 지불 양식 스크린샷.", width="800", height="833" %} <figcaption>신용카드 번호에 여러 개의 입력을 사용하지 마세요.</figcaption></figure>
+
+### 신중하게 유효성 검사 {: #validate}
+
+실시간으로 그리고 양식을 제출하기 전에 데이터 입력 항목에 대한 유효성을 검사해야 합니다. 유효성 검사를 수행하는 한 가지 방법은 지불 카드 입력에 `pattern` 속성을 추가하는 것입니다. 사용자가 잘못된 값으로 지불 양식을 제출하려고 하면 브라우저는 경고 메시지를 표시하고 입력에 초점을 맞춥니다. JavaScript는 필요하지 않습니다!
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+그러나 `pattern` 정규식은 14자리(또는 그 이하)에서 20(또는 그 이상)까지의 [지불 카드 번호 길이 범위](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35)를 처리할 수 있을 만큼 충분히 유연해야 합니다. 결제 카드 번호 구조화에 대한 자세한 내용은 [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number)에서 확인할 수 있습니다.
+
+사용자가 새 지불 카드 번호를 입력할 때 공백을 포함할 수 있도록 허용하세요. 실제 카드에 숫자가 표시되는 방식이기 때문입니다. 이는 사용자에게 더 친숙하고("뭔가 잘못했습니다"라고 말할 필요가 없음) 변환 흐름을 방해할 가능성이 적으며 처리하기 전에 숫자에서 공백을 쉽게 제거할 수 있습니다.
+
+{% Aside %} 신원 확인 또는 지불 확인을 위해 일회성 비밀번호를 사용할 수 있습니다. 하지만 사용자에게 코드를 수동으로 입력하거나 이메일 또는 SMS 텍스트에서 복사하도록 요청하는 것은 오류가 발생하기 쉽고 마찰의 원인이 됩니다. [SMS OTP 양식 모범 사례](/sms-otp-form)에서 일회성 암호를 활성화하는 더 나은 방법에 대해 알아보세요. {% endAside %}
+
+## 다양한 기기, 플랫폼, 브라우저 및 버전에서 테스트하기 {: #test-platforms}
+
+양식 요소의 기능과 모양이 다를 수 있고 표시 영역 크기의 차이로 인해 위치 문제가 발생할 수 있으므로 사용자에게 가장 일반적인 플랫폼에서 주소 및 지불 양식을 테스트하는 것이 특히 중요합니다. BrowserStack을 사용하면 다양한 장치와 브라우저에서 [오픈 소스 프로젝트를 무료로 테스트](https://www.browserstack.com/open-source)할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="iPhone 7 및 11에서 지불 양식 payment-form.glitch.me에 대한 스크린샷. 전체적인 지불 버튼은 iPhone 11에는 표시되지만 7에서는 표시되지 않습니다.", width="800", height="707" %} <figcaption>iPhone 7 및 iPhone 11의 동일한 페이지.<br><strong>지불 완료</strong> 버튼이 숨겨지지 않도록 더 작은 모바일 표시 영역의 패딩을 줄이십시오.</figcaption></figure>
+
+## 분석 및 RUM 구현 {: #analytics-rum}
+
+사용 가능성 및 성능을 로컬에서 테스트하는 것이 유용할 수 있지만 사용자가 지불 및 주소 양식을 경험하는 방식을 올바르게 이해하려면 실제 데이터가 필요합니다.
+
+이를 위해서는 결제 페이지를 로드하는 데 소요되는 시간 또는 결제를 완료하는 데 소요되는 시간과 같은 실제 사용자 경험에 대한 데이터인 분석 및 실제 사용자 모니터링이 필요합니다.
+
+- **페이지 분석**: 양식이 있는 모든 페이지에 대한 페이지 조회수, 이탈률 및 종료율.
+- **상호 작용 분석**: [목표 유입 경로](https://support.google.com/analytics/answer/6180923?hl=en) 및 [이벤트](https://developers.google.com/analytics/devguides/collection/gtagjs/events)는 사용자가 결제 흐름을 포기한 위치와 양식과 상호 작용할 때 취하는 작업을 나타냅니다.
+- **웹사이트 성능**: [사용자 중심 매트릭](/user-centric-performance-metrics)을 통해 결제 페이지가 느리게 로드되는지 알려줄 수 있고 만약 느리게 로드될 경우 그 원인이 무엇인지 알려줄 수 있습니다.
+
+페이지 분석, 상호 작용 분석 및 실제 사용자 성능 측정은 서버 로그, 전환 데이터 및 A/B 테스트와 결합될 때 특히 유용하므로 할인 코드가 수익을 늘리는지 또는 양식 레이아웃의 변경이 전환을 개선하는지 여부와 같은 질문에 답할 수 있습니다.
+
+이는 결과적으로 노력의 우선순위를 정하고, 변화를 일으키며, 성공에 대한 보상을 제공할 수 있는 견고한 기반을 제공합니다.
+
+## 학습 계속 {: #resources}
+
+- [로그인 양식 모범 사례](/sign-in-form-best-practices)
+- [가입 양식 모범 사례](/sign-up-form-best-practices)
+- [WebOTP API로 웹에서 전화번호 확인](/web-otp)
+- [놀라운 양식 만들기](/learn/forms/)
+- [모바일 양식 디자인 모범 사례](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [더 많은 기능을 갖춘 양식 컨트롤](/more-capable-form-controls)
+- [액세스 가능한 양식 만들기](https://webaim.org/techniques/forms/)
+- [Credential Management API를 사용하여 가입 흐름 간소화](https://developer.chrome.com/blog/credential-management-api/)
+- [Frank의 우편 주소에 대한 필수 가이드(Frank's Compulsive Guide to Postal Addresses)](http://www.columbia.edu/~fdc/postal/)는 200개가 넘는 국가의 주소 형식에 대한 유용한 링크와 광범위한 지침을 제공합니다.
+- [국가 목록](http://www.countries-list.info/Download-List)에는 국가 코드와 이름을 여러 언어로, 그리고 여러 형식으로 다운로드할 수 있는 도구가 있습니다.
+
+사진 제공: [Unsplash](https://unsplash.com/photos/Q59HmzK38eQ)에서 [@rupixen](https://unsplash.com/@rupixen)
diff --git a/src/site/content/ko/blog/periodic-background-sync/index.md b/src/site/content/ko/blog/periodic-background-sync/index.md
new file mode 100644
index 00000000000..f2eb1df66d3
--- /dev/null
+++ b/src/site/content/ko/blog/periodic-background-sync/index.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: 주기적 백그라운드 동기화 API로 더 풍부한 오프라인 경험
+subhead: 더 유사한 경험을 위해 백그라운드에서 웹 앱의 데이터를 동기화하십시오.
+authors:
+  - jeffposnick
+  - joemedley
+date: 2019-11-10
+updated: 2020-08-18
+hero: image/admin/Bz7MndcsUGPLAnQwIMfJ.jpg
+alt: 동기화되어 비행하는 다채로운 비행기
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/4048736065006075905"
+description: 주기적 백그라운드 동기화를 통해 웹 애플리케이션이 주기적으로 백그라운드에서 데이터를 동기화하여 웹 앱을 iOS/Android/데스크톱 앱에 더 가깝게 만듭니다.
+tags:
+  - capabilities
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} 웹 앱은 iOS/Android/데스크톱 앱이 할 수 있는 모든 작업을 수행할 수 있어야 합니다. 주기적인 백그라운드 동기화가 포함되어 있는 [기능 프로젝트](https://developer.chrome.com/blog/capabilities/)는 이를 목표로 합니다. 다른 기능에 대해 알아보고 진행 상황을 확인하려면 [웹을 위한 새로운 기능 잠금 해제](https://developer.chrome.com/blog/capabilities/)를 따르십시오. {% endAside %}
+
+다음과 같은 상황에 처한 적이 있습니까?
+
+- 기차나 지하철을 탈 때 연결이 불안하거나 아예 끊어짐
+- 동영상을 너무 많이 본 후 이동통신사에 의해 속도가 제한됨
+- 대역폭이 수요를 못 따라가는 국가에서 생활
+
+그렇다면 웹에서 특정 작업을 수행하는 데 대한 좌절감을 확실히 느끼고 왜 플랫폼별 앱이 이러한 시나리오에서 더 나은 성능을 보이는지 궁금했을 것입니다. 플랫폼별 앱은 뉴스 기사나 날씨 정보와 같은 새로운 콘텐츠를 미리 가져올 수 있습니다. 지하철에 네트워크가 없어도 뉴스를 읽을 수 있습니다.
+
+주기적 백그라운드 동기화를 사용하면 웹 애플리케이션이 백그라운드에서 데이터를 주기적으로 동기화하여 웹 애플리케이션을 플랫폼별 앱의 동작에 더 가깝게 만들 수 있습니다.
+
+## 현재 상태
+
+아래 표는 주기적 백그라운드 동기화 API의 현재 상태를 설명합니다.
+
+<table>
+<tr>
+<th markdown="block">단계</th>
+<th markdown="block">상태</th>
+</tr>
+<tr>
+<td markdown="block">1. 안내서 만들기</td>
+<td markdown="block"><a href="https://github.com/WICG/BackgroundSync/tree/master/explainers">완료</a></td>
+</tr>
+<tr>
+<td markdown="block">2. 사양의 초기 초안 작성</td>
+<td markdown="block"><a href="https://wicg.github.io/periodic-background-sync/" rel="noopener">완료</a></td>
+</tr>
+<tr>
+<td markdown="block">3. 피드백 수집 및 디자인 반복</td>
+<td markdown="block">진행 중</td>
+</tr>
+<tr>
+<td markdown="block">4. 원본 평가판</td>
+<td markdown="block"><a>완료</a></td>
+</tr>
+<tr>
+<td markdown="block"><strong>5. 출시</strong></td>
+<td markdown="block"><strong>Chrome 80</strong></td>
+</tr>
+</table>
+
+## 사용해 보기
+
+[라이브 데모 앱](https://webplatformapis.com/periodic_sync/periodicSync_improved.html)을 사용하여 주기적으로 백그라운드 동기화를 사용해 볼 수 있습니다. 사용하기 전에 다음을 확인하십시오.
+
+- Chrome 80 이상을 사용 중입니다.
+- 주기적 백그라운드 동기화를 활성화하기 전에 웹 앱을 [설치합니다.](https://developers.google.com/web/fundamentals/app-install-banners/)
+
+## 개념 및 사용법
+
+주기적 백그라운드 동기화를 사용하면 프로그레시브 웹 앱 또는 서비스 작업자 지원 페이지가 시작될 때 새로운 콘텐츠를 표시할 수 있습니다. 앱이나 페이지를 사용하지 않을 때 백그라운드에서 데이터를 다운로드하여 이를 수행합니다. 이렇게 하면 앱 콘텐츠가 표시되는 동안 실행 후 새로 고쳐지지 않습니다. 더 좋은 점은 앱이 새로고침하기 전에 콘텐츠 스피너를 표시하지 않는다는 것입니다.
+
+정기적인 백그라운드 동기화가 없으면 웹 앱은 다른 방법을 사용하여 데이터를 다운로드해야 합니다. 일반적인 예는 푸시 알림을 사용하여 서비스 작업자를 깨우는 것입니다. 사용자는 '새 데이터 사용 가능'과 같은 메시지에 의해 하던 일이 중단됩니다. 데이터 업데이트는 본질적으로 부수적인 효과입니다. 중요한 속보와 같은 정말 중요한 업데이트에 대해 푸시 알림을 사용할 수 있는 옵션이 여전히 있습니다.
+
+주기적 백그라운드 동기화는 백그라운드 동기화와 쉽게 혼동됩니다. 이름은 비슷하지만 사용 사례는 다릅니다. 무엇보다도 백그라운드 동기화는 이전 요청이 실패한 경우 서버에 데이터를 재전송하는 데 가장 일반적으로 사용됩니다.
+
+### 사용자 참여 권한 얻기
+
+잘못 수행하면 정기적인 백그라운드 동기화가 사용자 리소스를 낭비할 수 있습니다. Chrome은 출시하기 전에 테스트 기간을 거쳐 올바른지 확인했습니다. 이 섹션에서는 이 기능을 최대한 유용하게 만들기 위해 Chrome에서 내린 몇 가지 설계 결정에 대해 설명합니다.
+
+Chrome이 내린 첫 번째 설계 결정은 웹 앱은 사람이 기기에 앱을 설치하고 별개의 애플리케이션으로 시작한 후에만 주기적 백그라운드 동기화를 사용할 수 있다는 것입니다. Chrome의 일반 탭 컨텍스트에서는 주기적 백그라운드 동기화를 사용할 수 없습니다.
+
+또한 Chrome은 사용하지 않거나 거의 사용하지 않는 웹 앱이 배터리나 데이터를 불필요하게 소모하는 것을 원하지 않기 때문에 Chrome은 개발자가 사용자에게 가치를 제공하여 권한를 얻을 수 있도록 주기적인 백그라운드 동기화를 설계했습니다. 구체적으로 Chrome은 [사이트 참여 점수](https://www.chromium.org/developers/design-documents/site-engagement)(`about://site-engagement/`)를 사용하여 지정된 웹 앱에 대해 주기적 백그라운드 동기화가 발생할 수 있는지 여부와 빈도를 결정합니다. 즉, 참여 점수가 0보다 크지 않다면 `periodicsync` 이벤트가 전혀 실행되지 않으며, 해당 값은 `periodicsync` 이벤트가 실행되는 빈도에 영향을 줍니다. 이렇게 하면 백그라운드에서 동기화되는 앱이 현재 사용 중인 앱뿐임을 보장합니다.
+
+주기적 백그라운드 동기화는 인기 있는 플랫폼의 기존 API 및 관행과 몇 가지 유사점을 공유합니다. 예를 들어, 일회성 백그라운드 동기화와 푸시 알림을 사용하면 사용자가 페이지를 닫은 후 웹 앱의 로직이 서비스 작업자를 통해 조금 더 오래 지속됩니다. 대부분의 플랫폼에서 사람들은 중요한 업데이트, 콘텐츠 미리 가져오기, 데이터 동기화 등에 대해 더 나은 사용자 경험을 제공하기 위해 백그라운드에서 네트워크에 주기적으로 액세스하는 앱을 설치하는 것이 일반적입니다. 마찬가지로 주기적인 백그라운드 동기화는 웹 앱 논리의 수명을 연장하여 한 번에 몇 분 정도 정기적으로 실행되도록 합니다.
+
+브라우저에서 이러한 상황이 제한 없이 자주 발생하도록 허용한 경우 개인 정보 보호 문제가 발생할 수 있습니다. Chrome이 주기적 백그라운드 동기화에 대한 이러한 위험을 해결한 방법은 다음과 같습니다.
+
+- 백그라운드 동기화 활동은 장치가 이전에 연결된 네트워크에서만 발생합니다. Chrome은 신뢰할 수 있는 당사자가 운영하는 네트워크에만 연결할 것을 권장합니다.
+- 모든 인터넷 통신과 마찬가지로 주기적 백그라운드 동기화는 클라이언트의 IP 주소, 통신 중인 서버 및 서버 이름을 노출합니다. 앱이 포그라운드에 있을 때만 동기화할 때의 수준으로 이러한 노출을 줄이기 위해 브라우저는 사용자가 해당 앱을 사용하는 빈도에 맞춰 앱의 백그라운드 동기화 빈도를 제한합니다. 사용자가 앱과 자주 상호 작용하지 않으면 주기적 백그라운드 동기화의 트리거가 중지됩니다. 이는 플랫폼별 앱의 현상 유지에 대한 순 개선입니다.
+
+### 언제 사용할 수 있습니까?
+
+사용 규칙은 브라우저에 따라 다릅니다. 위에서 요약하면 Chrome은 정기적인 백그라운드 동기화에 대해 다음 요구 사항을 적용합니다.
+
+- 특정 사용자 참여 점수.
+- 이전에 사용한 네트워크의 존재.
+
+동기화 타이밍은 개발자가 제어하지 않습니다. 동기화 빈도는 앱 사용 빈도와 일치합니다(플랫폼별 앱은 현재 이 작업을 수행하지 않습니다.). 또한 장치의 전원 및 연결 상태도 가져옵니다.
+
+### 언제 사용해야 합니까?
+
+`periodicsync` 이벤트를 처리하기 위해 서비스 작업자가 깨어나면 데이터를 요청할 *기회*가 있지만 그렇게 해야 할 *의무*는 없습니다. 이벤트를 처리할 때 네트워크 조건과 사용 가능한 스토리지를 고려하고 이에 대한 응답으로 다양한 양의 데이터를 다운로드해야 합니다. 다음 리소스를 사용하여 도움을 받을 수 있습니다.
+
+- [네트워크 정보 API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+- [데이터 절약 모드 감지](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#detecting_the_save-data_setting)
+- [사용 가능한 저장용량 예상](https://developers.google.com/web/updates/2017/08/estimating-available-storage-space)
+
+### 권한
+
+서비스 작업자가 설치된 후 [권한 API](https://developer.mozilla.org/docs/Web/API/Permissions_API)를 사용하여 `periodic-background-sync`를 쿼리합니다. 창 또는 서비스 작업자 컨텍스트에서 이 작업을 수행할 수 있습니다.
+
+```js
+const status = await navigator.permissions.query({
+  name: 'periodic-background-sync',
+});
+if (status.state === 'granted') {
+  // Periodic background sync can be used.
+} else {
+  // Periodic background sync cannot be used.
+}
+```
+
+### 주기적 동기화 등록
+
+이미 언급했듯이 주기적 백그라운드 동기화에는 서비스 작업자가 필요합니다. `ServiceWorkerRegistration.periodicSync`를 사용하여 `PeriodicSyncManager`를 가져오고 이에 대해 `register()`를 호출합니다. 등록하려면 태그와 최소 동기화 간격( `minInterval` )이 모두 필요합니다. 태그는 여러 동기화를 등록할 수 있도록 등록된 동기화를 식별합니다. 아래 예에서 태그 이름은 `'content-sync'`이고 `minInterval`은 하루입니다.
+
+```js/3-5
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  try {
+    await registration.periodicSync.register('content-sync', {
+      // An interval of one day.
+      minInterval: 24 * 60 * 60 * 1000,
+    });
+  } catch (error) {
+    // Periodic background sync cannot be used.
+  }
+}
+```
+
+### 등록 확인
+
+`periodicSync.getTags()`를 호출하여 등록 태그의 배열을 가져옵니다. 아래 예에서는 태그 이름을 사용하여 캐시 업데이트가 다시 업데이트되지 않도록 활성 상태인지 확인합니다.
+
+```js/2,4
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  const tags = await registration.periodicSync.getTags();
+  // Only update content if sync isn't set up.
+  if (!tags.includes('content-sync')) {
+    updateContentOnPageLoad();
+  }
+} else {
+  // If periodic background sync isn't supported, always update.
+  updateContentOnPageLoad();
+}
+```
+
+또한 `getTags()`를 사용하여 웹 앱의 설정 페이지에 활성 등록 목록을 표시하여 사용자가 특정 유형의 업데이트를 활성화하거나 비활성화할 수 있도록 할 수 있습니다.
+
+### 주기적 백그라운드 동기화 이벤트에 응답
+
+주기적 백그라운드 동기화 이벤트에 응답하려면 서비스 워커에 `periodicsync` 이벤트 핸들러를 추가하세요. 전달된 `event` 객체에는 등록 중에 사용된 값과 일치하는 `tag` 매개 변수가 포함됩니다. 예를 들어 주기적인 백그라운드 동기화가 `'content-sync'`라는 이름으로 등록된 경우 `event.tag`는 `'content-sync'`가 됩니다.
+
+```js
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    // See the "Think before you sync" section for
+    // checks you could perform before syncing.
+    event.waitUntil(syncContent());
+  }
+  // Other logic for different tags as needed.
+});
+```
+
+### 동기화 등록 취소
+
+등록된 동기화를 종료하려면 등록을 취소하려는 동기화 이름을 포함하여 `periodicSync.unregister()`를 호출하세요.
+
+```js
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  await registration.periodicSync.unregister('content-sync');
+}
+```
+
+## 인터페이스
+
+다음은 주기적 백그라운드 동기화 API에서 제공하는 인터페이스에 대한 간략한 설명입니다.
+
+- `PeriodicSyncEvent`. 브라우저가 선택할 때 `ServiceWorkerGlobalScope.onperiodicsync` 이벤트 핸들러에 전달됩니다.
+- `PeriodicSyncManager`. 주기적 동기화를 등록 및 등록 해제하고 등록된 동기화에 대한 태그를 제공합니다. ServiceWorkerRegistration.periodicSync` 속성에서 이 클래스의 인스턴스를 검색합니다.
+- `ServiceWorkerGlobalScope.onperiodicsync`. `PeriodicSyncEvent`를 수신하는 핸들러를 등록합니다.
+- `ServiceWorkerRegistration.periodicSync`. `PeriodicSyncManager` 대한 참조를 반환합니다.
+
+## 예시
+
+### 콘텐츠 업데이트
+
+다음 예에서는 정기적인 백그라운드 동기화를 사용하여 뉴스 사이트 또는 블로그에 대한 최신 기사를 다운로드하고 캐시합니다. 어떤 종류의 동기화인지(`'update-articles'`)를 나타내는 태그 이름을 확인하세요. `updateArticles()`에 대한 호출은 `event.waitUntil()`에 싸여 있기 때문에 기사가 다운로드되고 저장되기 전에 서비스 작업자가 종료할 수 없습니다.
+
+```js/7
+async function updateArticles() {
+  const articlesCache = await caches.open('articles');
+  await articlesCache.add('/api/articles');
+}
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'update-articles') {
+    event.waitUntil(updateArticles());
+  }
+});
+```
+
+### 기존 웹 앱에 주기적 백그라운드 동기화 추가
+
+[이번 변경](https://github.com/GoogleChromeLabs/so-pwa/pull/11)은 [기존 PWA](https://so-pwa.firebaseapp.com/)에 주기적 백그라운드 동기화를 추가하는 데 필요했습니다. 이 예에는 웹 앱의 주기적 백그라운드 동기화 상태를 설명하는 여러 유용한 로깅 문이 포함되어 있습니다.
+
+## 디버깅
+
+로컬에서 테스트하는 동안 주기적인 백그라운드 동기화를 확인하고 종단 간 보기를 수행하는 것은 어려울 수 있습니다. 활성 등록, 대략적인 동기화 간격 및 과거 동기화 이벤트의 로그에 대한 정보는 웹 앱의 동작을 디버깅하는 동안 귀중한 컨텍스트를 제공합니다. 다행히 Chrome DevTools의 실험 기능을 통해 모든 정보를 찾을 수 있습니다.
+
+{% Aside %} Chrome 81 이상에서는 주기적 백그라운드 동기화 디버깅이 사용 설정되었습니다. {% endAside %}
+
+### 로컬 활동 기록
+
+DevTools의 **주기적인 백그라운드 동기화** 섹션은 주기적인 백그라운드 동기화 수명 주기의 주요 이벤트(동기화 등록, 배경 동기화 수행 및 등록 취소)를 중심으로 구성되어 있습니다. 이러한 이벤트에 대한 정보를 얻으려면 **기록 시작**을 클릭하십시오.
+
+<figure>{% Img src="image/admin/wcl5Bm6Pe9xn5Dps6IN6.png", alt="DevTools의 기록 버튼", width="708", height="90" %}<figcaption> DevTools의 기록 버튼</figcaption></figure>
+
+기록하는 동안 항목은 이벤트에 해당하는 DevTools에 표시되며 각각에 대해 기록된 컨텍스트 및 메타데이터와 함께 표시됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/m92Art0OwiM0VyI7czFB.png", alt="기록된 주기적 백그라운드 동기화 데이터의 예",  width="800", height="357", style="max-width: 75%" %}<figcaption> 기록된 주기적인 백그라운드 동기화 데이터의 예</figcaption></figure>
+
+기록을 한 번 활성화하면 최대 3일 동안 활성화된 상태로 유지되어 DevTools가 향후 몇 시간 동안 발생할 수 있는 백그라운드 동기화에 대한 로컬 디버깅 정보를 캡처할 수 있습니다.
+
+### 이벤트 시뮬레이션
+
+백그라운드 활동을 기록하는 것이 도움이 될 수 있지만 이벤트가 정상적인 케이던스에서 이벤트가 시작되는 것을 기다릴 필요 없이 `periodicsync` 핸들러를 즉시 테스트하고 싶은 때가 있을 수 있습니다.
+
+Chrome DevTools의 애플리케이션 패널에 있는 **서비스 작업자** 섹션을 통해 이 작업을 수행할 수 있습니다. **주기적 동기화** 필드를 사용하면 이벤트에 사용할 태그를 제공하고 원하는 만큼 여러 번 트리거할 수 있습니다.
+
+{% Aside %} `periodicsync` 동기화 이벤트를 수동으로 트리거하려면 Chrome 81 이상이 필요합니다. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BQ5QdjwaRDP42cHqW98W.png", alt="응용 프로그램 패널의 '서비스 작업자' 섹션에 '주기적 동기화' 텍스트 필드와 버튼이 표시됩니다.", width="800", height="321", style="max-width: 90%" %}</figure>
+
+## DevTools 인터페이스 사용
+
+Chrome 81부터 DevTools *애플리케이션* 패널에 **주기적 백그라운드 동기화** 섹션이 표시됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eYJtJfZ9Qo145lUQe4Ur.png", alt="주기적인 백그라운드 동기화 섹션을 보여주는 응용 프로그램 패널", width="382", height="253", style="max-width: 75%" %}</figure>
diff --git a/src/site/content/ko/blog/prefers-color-scheme/index.md b/src/site/content/ko/blog/prefers-color-scheme/index.md
new file mode 100644
index 00000000000..b9bb612e5e7
--- /dev/null
+++ b/src/site/content/ko/blog/prefers-color-scheme/index.md
@@ -0,0 +1,455 @@
+---
+layout: post
+title: 'prefers-color-scheme: 안녕! 내 오랜 친구 다크'
+subhead: 지나친 과장, 혹은 필수? 다크 모드에 대한 모든 것과 사용자에게 도움이 되도록 이를 지원하는 방법에 대해 알아봅니다!
+authors:
+  - thomassteiner
+date: 2019-06-27
+updated: 2020-08-02
+hero: image/admin/dgDcIJUyuWB5xNn9CODd.jpg
+hero_position: 맨 아래
+alt: Unsplash에서 Nathan Anderson이 제공한 야간의 산 실루엣 사진.
+description: 이제 많은 장치에서 운영 체제 전반에 걸쳐 다크 모드 또는 다크 테마 경험을 지원합니다. 이 게시물에서는 웹 페이지에서 다크 모드를 지원하는 방법을 설명하고 모범 사례를 소개하며, dark-mode-toggle이라는 사용자 지정 요소에 대해 알아봅니다. 웹 개발자는 이 요소를 사용하여 사용자가 특정 웹 페이지에서 운영 체제 수준의 기본 설정을 재정의하도록 할 수 있습니다.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## 소개
+
+{% Aside 'note' %} 저는 다크 모드의 역사와 이론에 대한 배경을 많이 연구했습니다. 다크 모드 작업에만 관심이 있다면 [소개 부분은 건너뛰어](#activating-dark-mode-in-the-operating-system)도 됩니다. {% endAside %}
+
+### *다크 모드* 전의 다크 모드
+
+<figure data-float="right">   {% Img src="image/admin/fmdRPm6K5SXiIRLgyz4y.jpg", alt="그린 스크린 컴퓨터 모니터", width="233", height="175" %}   <figcaption>그린 스크린(<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">출처</a>)</figcaption></figure>
+
+우리는 다크 모드의 시초부터 많은 길을 거쳐왔습니다. 개인용 컴퓨팅이 태동하던 당시에는 다크 모드가 선택의 문제가 아니었습니다. 그저 사실이었죠. 흑백 <abbr title="Cathode-Ray Tube">CRT</abbr> 컴퓨터 모니터는  인광 스크린에 전자 빔을 쏘는 방식으로 작동했고 초기 CRT에 사용된 인광은 녹색이었습니다. 텍스트가 녹색으로 표시되고 화면의 나머지 부분은 검은색이었기 때문에 이러한 모델을 [그린 스크린](https://commons.wikimedia.org/wiki/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg)이라고도 많이 불렀습니다.
+
+<figure data-float="left">   {% Img src="image/admin/l9oDlIO59oyJiXVegxIV.jpg", alt="다크 온 화이트 단어 처리", width="222", height="175" %}   <figcaption>다크 온 화이트(<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">출처</a>)</figcaption></figure>
+
+이후에 도입된 컬러 CRT는 빨간색, 녹색 및 파란색 인광체를 사용하여 여러 색상을 표시했습니다. 세 가지 인광을 모두 활성화하면 흰색이 만들어집니다. 보다 정교한 <abbr title="What You See Is What You Get">WYSIWYG</abbr> [데스크톱 출판](https://en.wikipedia.org/wiki/Desktop_publishing)의 출현으로 가상 문서를 실제 종이와 비슷하게 만드는 아이디어가 인기를 얻었습니다.
+
+<figure data-float="right">{% Img src="image/admin/lnuLLcQzIF7r08lt479k.png", alt="WorldWideWeb 브라우저의 다크 온 화이트 웹페이지", width="233", height="175" %}<figcaption> WorldWideWeb 브라우저(<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">출처</a>)</figcaption></figure>
+
+여기서부터 디자인 트렌드로서 *다크 온 화이트(Dark-on-White*)가 시작되었고, 이 트렌드는 [초기 문서 기반의 웹](http://info.cern.ch/hypertext/WWW/TheProject.html)까지 이어졌습니다. 최초의 브라우저인 [WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb)(이 때는 [CSS가 아직 생겨나지도](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History) 않았음)은 이러한 방식으로 [웹페이지를 표시했습니다](https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png). 재미있는 사실: 터미널 기반 브라우저였던 두 번째 브라우저인 [Line Mode Browser](https://en.wikipedia.org/wiki/Line_Mode_Browser)는 그린 온 다크였습니다. 당시에 웹 페이지와 웹 앱이 일반적으로 밝은 배경에 어두운 텍스트로 디자인되어 [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)을 포함한 사용자 에이전트 스타일시트에 기본적인 방식으로 자리를 잡게 되었습니다.
+
+<figure data-float="left">{% Img src="image/admin/zCdyRdnAnbrB7aAB0TQi.jpg", alt="침대에 누워 스마트폰을 사용하는 모습", width="262", height="175" %}<figcaption> 침대에서 사용하는 스마트폰(출처: Unsplash)</figcaption></figure>
+
+CRT의 시대는 지났습니다. 콘텐츠 소비와 제작은 <abbr title="액정 디스플레이">백라이트 LCD</abbr>나 에너지 절약형 <abbr title="활성 매트릭스 유기 발광 다이오드">AMOLED</abbr> 화면을 사용하는 모바일 기기로 옮겨가고 있습니다. 더 작고 더 휴대하기 쉬운 컴퓨터, 태블릿 및 스마트폰의 등장으로 새로운 사용 패턴이 생겨나고 있습니다. 웹 브라우징, 재미로 하는 코딩, 고급 게임과 같은 레저 작업은 야간에 어두운 환경에서 이루어지는 경우가 많습니다. 사람들은 심지어 밤에 침대에서 기기를 통한 탐닉에 빠집니다. 사람들이 어둠 속에서 기기를 더 많이 사용할수록 *라이트-온-다크*의 뿌리로 돌아가려는 아이디어가 더 힘을 얻고 있습니다.
+
+### 왜 다크 모드인가?
+
+#### 심미적 이유로 본 다크 모드
+
+[다크 모드를 선호하거나 원하는 이유](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)를 물었을 때 *"눈이 편하다"*라고 대답한 사람들이 가장 많았고 *"우아하고 아름답다"*는 반응이 그 뒤를 이었습니다. Apple은 [다크 모드 개발자 문서](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface)에서 다음과 같이 확실히 밝히고 있습니다: *"밝은 모양 또는 어두운 모양을 선택할지의 여부는 대부분의 사용자에게 미학적인 문제이지, 주변 조명 조건과는 관련이 없을 수 있습니다."*
+
+{% Aside 'note' %} 계속해서 [사람들이 다크 모드를 원하는 이유와 이를 사용하는 방식에 대한 사용자 연구](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)에 대해 더 읽어보세요. {% endAside %}
+
+<figure data-float="right">   {% Img src="image/admin/WZ9I5g1YGG6S1TjygEIq.png", alt="Mac OS System 7에서 \"검정 바탕에 흰색\" 모드로 표시된 CloseView", width="193", height="225" %}   <figcaption>System 7 CloseView(<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">출처</a>)</figcaption></figure>
+
+#### 접근성 도구로서의 다크 모드
+
+실제로 다크 모드가 *필요*하고 이를 또 다른 접근성 도구로 사용하는 사람들(예: 저시력자)도 있습니다. 초기에 제가 찾을 수 있었던 이러한 접근성 도구로 [System 7](https://en.wikipedia.org/wiki/System_7)의 *CloseView*라는 기능이 있는데, 이를 통해 *흰색 바탕에 검정*과 *검정 바탕에 흰색* 사이를 전화할 수 있습니다. System 7은 컬러를 지원했지만 기본 사용자 인터페이스는 여전히 흑백이었습니다.
+
+이러한 반전 형태의 기능 구현은 컬러가 도입된 후에는 그 장점이 퇴색되었습니다. [저시력자가 컴퓨팅 장치에 액세스하는 방식](https://dl.acm.org/citation.cfm?id=2982168)에 관한 *Szpiro 등*의 사용자 연구에 따르면, 인터뷰에 응한 모든 사용자는 반전된 이미지를 싫어했으며, 대신 많은 사람들이 어두운 배경에 밝은 텍스트를 선호하는 것으로 나타났습니다. Apple은 이미지, 미디어 및 어두운 색상 스타일을 사용하는 일부 앱을 제외하고 디스플레이의 색상을 반전시키는 [Smart Invert](https://www.apple.com//accessibility/iphone/vision/)라는 기능으로 이러한 사용자 선호도에 응답했습니다.
+
+저시력의 특수한 형태는 디지털 눈피로라고도 하는 컴퓨터 시각 증후군(Computer Vision Syndrome)으로, 이는 *"컴퓨터(데스크톱, 노트북, 태블릿 포함) 및 기타 전자 디스플레이(예: 스마트폰 및 전자책 기기)의 사용과 관련하여 시각 및 시력에 나타나는 복합적 문제"*로 정의됩니다. 청소년이 특히 ​​야간에 전자 기기를 사용하면 수면 시간의 단축, 수면 개시 잠복기의 증가 및 수면 결핍의 증가 등을 겪을 위험이 커지는 것으로 [알려져](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4254760/) 있습니다. 또한, 블루라이트에 대한 노출은 [생체 리듬](https://support.apple.com/en-us/HT207570)과 수면 주기의 조절에 관여하는 것으로 널리 [보고](https://www.college-optometrists.org/oip-resource/computer-vision-syndrome--a-k-a--digital-eye-strain.html)되었으며 불규칙한 조명 환경은 수면 부족으로 이어져 기분 상태와 작업 성과에 영향을 미칠 수 있다고 [Rosenfield의 연구](https://www.college-optometrists.org/oip-resource/computer-vision-syndrome--a-k-a--digital-eye-strain.html)에서 제시하고 있습니다. 이러한 부정적인 영향을 제한하는 방법으로 iOS의 [Night Shift](https://support.apple.com/en-us/HT207570) 또는 Android의 [Night Light](https://support.google.com/pixelphone/answer/7169926?)와 같은 기능을 통해 디스플레이 색온도를 조정하여 블루라이트를 줄이면 효과를 볼 수 있고, 어두운 테마 또는 어두운 모드를 통해 전반적으로 밝은 조명이나 불규칙한 조명을 피하는 것도 효과적입니다.
+
+#### AMOLED 화면의 다크 모드 절전
+
+마지막으로 다크 모드는 <abbr title="활성 매트릭스 유기 발광 다이오드">AMOLED</abbr> 화면에서 *많은* 에너지를 절약하는 것으로 알려져 있습니다. YouTube와 같은 인기 있는 Google 앱에 초점을 맞춘 Android 사례 연구에 따르면 최대 60%까지 전력을 절약할 수 있는 것으로 나타났습니다. 아래 비디오에서 이러한 사례 연구와 앱별 절전 효과에 대한 자세한 내용을 확인할 수 있습니다.
+
+<figure data-size="full">{% YouTube id='N_6sPd0Jd3g', startTime='305' %}</figure>
+
+## 운영 체제에서 다크 모드 활성화
+
+이제 많은 사용자에게 다크 모드가 중요한 이유에 대한 배경을 설명했으니 이를 지원하는 방법을 살펴보도록 하겠습니다.
+
+<figure data-float="left">   {% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Android Q 다크 모드 설정", width="218", height="250" %}   <figcaption>Android Q 다크 테마 설정</figcaption></figure>
+
+다크 모드 또는 다크 테마를 지원하는 운영 체제에는 일반적으로 설정 어딘가에 이를 활성화할 수 있는 옵션이 있습니다. macOS X에서는 시스템 환경설정의 *일반* 섹션에 *모양*이라는 이름으로 있고(<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lUAnDhiGiZxigDbCqfn1.png'%20%7C%20imgix%20%7D%7D">스크린샷</a>), Windows 10에서는 *색상* 섹션에 *색상 선택*이라는 이름으로 제공됩니다(<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ahr8nkFttRPCe4RH8IEk.png'%20%7C%20imgix%20%7D%7D">스크린샷</a>). Android Q의 경우 *디스플레이*의 *다크 테마* 토글 스위치에서 찾을 수 있고(<a href="%7B%7B%20'image/admin/Yh6SEoWDK1SbqcGjlL6d.png'%20%7C%20imgix%20%7D%7D">스크린샷</a>) iOS 13에서는 설정의 *디스플레이 및 밝기* 섹션에서 *모양*을 변경할 수 있습니다(<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K0QTu4Elw1ETabtoJjZ1.jpg'%20%7C%20imgix%20%7D%7D">스크린샷</a>).
+
+## `prefers-color-scheme` 미디어 쿼리
+
+시작하기 전에 마지막으로 한 가지 이론을 덧붙이겠습니다. [미디어 쿼리](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries)를 통해 작성자는 렌더링되는 문서와 관계없이 사용자 에이전트 또는 디스플레이 장치의 값이나 기능을 테스트하고 쿼리할 수 있습니다. 이는 CSS `@media` 규칙에서 조건부로 문서에 스타일을 적용하기 위해 사용되고, HTML 및 JavaScript와 같은 다양한 기타 컨텍스트 및 언어에서도 사용됩니다. [미디어 쿼리 레벨 5](https://drafts.csswg.org/mediaqueries-5/)는 사용자가 선호하는 콘텐츠 표시 방식을 사이트에서 감지할 수 있는 한 가지 방법으로, 소위 사용자 기본 설정 미디어 기능을 도입합니다.
+
+{% Aside 'note' %} ☝️ 사용자 선호도가 관련된 기존의 미디어 기능으로 페이지에서 움직임을 줄이고자 하는 요구를 감지할 수 있는 `prefers-reduced-motion`가 있습니다. 제가 전에 <a href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" data-md-type="link">`prefers-reduced-motion`에 대해 글을 쓴</a> 적이 있습니다. {% endAside %}
+
+기본 [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) 미디어 기능은 사용자가 페이지에 밝은 색상 또는 어두운 색상 테마를 사용하도록 요청했는지 감지하는 데 사용됩니다. 다음 값으로 작동합니다.
+
+- `light`: 사용자가 시스템에 밝은 테마(밝은 배경에 어두운 텍스트)가 있는 페이지를 선호한다고 알렸음을 나타냅니다.
+- `dark`: 사용자가 어두운 테마(어두운 배경에 밝은 텍스트)가 있는 페이지를 선호한다고 시스템에 알렸음을 나타냅니다.
+
+{% Aside 'note' %} 이전 버전의 사양에는 세 번째 값인 `no-preference`가 포함되었습니다. 이는 사용자가 시스템에 어떤 선호도도 나타내지 않았음을 나타내기 위한 것입니다. 어떤 브라우저도 이를 구현하지 않았기 때문에 이 값은 사양에서 [제거](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976)되었습니다. {% endAside%}
+
+## 다크 모드 지원
+
+### 브라우저에서 다크 모드가 지원되는지 확인하기
+
+다크 모드는 미디어 쿼리를 통해 보고되므로 미디어 쿼리 `prefers-color-scheme`이 일치하는지 여부를 확인하여 현재 브라우저가 다크 모드를 지원하는지 쉽게 확인할 수 있습니다. 어떤 값도 포함하지 않고 단지 미디어 쿼리가 일치하는지만 확인합니다.
+
+```js
+if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+  console.log('🎉 Dark mode is supported');
+}
+```
+
+작성 당시를 기준으로, `prefers-color-scheme`은 데스크톱과 모바일(사용 가능한 경우)을 모두 포함해 Chrome 및 Edge 버전 76, Firefox 버전 67, Safari 버전 12.1(macOS) 및 버전 13(iOS)에서 지원됩니다. 다른 모든 브라우저의 경우에는 [지원 테이블을 사용할 수 있습니까?](https://caniuse.com/#feat=prefers-color-scheme)를 확인할 수 있습니다.
+
+{% Aside 'note' %} 이전 브라우저에 다크 모드 지원을 추가하는 사용자 지정 요소인 [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle)를 사용할 수 있습니다. 이 내용은 [본 글 아래](#the-lessdark-mode-togglegreater-custom-element)에서 계속 다룹니다. {% endAside%}
+
+### 요청 시 사용자의 선호도에 대해 알아내기
+
+[`Sec-CH-Prefers-Color-Scheme`](/user-preference-media-features-headers/) 클라이언트 힌트 헤더를 사용하면 사이트에서 요청 시 선택적으로 사용자의 색 구성표 기본 설정을 얻을 수 있으므로 서버가 올바른 CSS를 인라인하여 잘못된 색 테마가 표시되는 것을 방지할 수 있습니다.
+
+### 실제 다크 모드
+
+마지막으로 다크 모드 지원이 실제 상황에서는 어떤지 살펴보겠습니다. [Highlander](https://en.wikipedia.org/wiki/Highlander_(film))와 마찬가지로 다크 모드에서도 어둡거나 밝음 *중 하나만 있을 수 있고, 둘 모두는 불가능합니다!* 이것을 언급하는 이유가 뭘까요? 이 사실이 로딩 전략에 영향을 미치기 때문입니다. **사용자가 현재 사용하지 않는 모드에 대한 중요 렌더링 경로에서 CSS를 다운로드하도록 강요하지 마세요.** 그래서 [중요하지 않은 CSS를 지연](/defer-non-critical-css/)시켜 로드 속도를 최적화하기 위해 실제로 다음 권장 사항을 보여주는 예제 앱에 대한 CSS를 세 부분으로 분할했습니다.
+
+- 사이트에서 보편적으로 사용되는 일반 규칙을 포함하는 `style.css`
+- 다크 모드에 필요한 규칙만 포함하는 `dark.css`
+- 라이트 모드에 필요한 규칙만 포함하는 `light.css`
+
+### 로드 전략
+
+마지막 두 개인 `light.css` 및 `dark.css`는 `<link media>` 쿼리를 사용하여 조건부로 로드됩니다. 처음에는 [모든 브라우저가 `prefers-color-scheme`](https://caniuse.com/#feat=prefers-color-scheme)을 지원하지는 않을 것입니다([위의 패턴](#finding-out-if-dark-mode-is-supported-by-the-browser)을 사용하여 감지 가능). 저는 아주 작은 인라인 스크립트에 조건부로 삽입된 `<link rel="stylesheet">` 요소를 통해 기본 `light.css` 파일을 로드하는 식으로 이를 동적으로 처리합니다(라이트는 임의의 선택이며, 다크를 기본 대체 환경으로 만들 수도 있었음). [스타일이 지정되지 않은 콘텐츠의 플래시](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)를 방지하기 위해 `light.css`가 로드될 때까지 페이지의 콘텐츠를 숨깁니다.
+
+```html
+<script>
+  // If `prefers-color-scheme` is not supported, fall back to light mode.
+  // In this case, light.css will be downloaded with `highest` priority.
+  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+    document.documentElement.style.display = 'none';
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
+    );
+  }
+</script>
+<!--
+  Conditionally either load the light or the dark stylesheet. The matching file
+  will be downloaded with `highest`, the non-matching file with `lowest`
+  priority. If the browser doesn't support `prefers-color-scheme`, the media
+  query is unknown and the files are downloaded with `lowest` priority (but
+  above I already force `highest` priority for my default light experience).
+-->
+<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
+<link
+  rel="stylesheet"
+  href="/light.css"
+  media="(prefers-color-scheme: light)"
+/>
+<!-- The main stylesheet -->
+<link rel="stylesheet" href="/style.css" />
+```
+
+### 스타일시트 아키텍처
+
+저는 [CSS 변수](https://developer.mozilla.org/docs/Web/CSS/var)를 최대한 활용합니다. 이렇게 하면 일반 `style.css`가 상당히 일반적이 될 수 있으며 모든 라이트 모드 또는 다크 모드 사용자 지정이 다른 두 파일인 `dark.css` 및 `light.css`에서 이루어집니다. 아래에서 실제 스타일의 일부를 볼 수 있지만 전체적인 아이디어를 전달하기에는 충분합니다. 기본적으로 *dark-on-light* 및 *light-on-dark* 기준 테마를 생성하는 두 개의 변수 `-⁠-⁠color` 및 `-⁠-⁠background-color`를 선언합니다.
+
+```css
+/* light.css: 👉 dark-on-light */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+}
+```
+
+```css
+/* dark.css: 👉 light-on-dark */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+}
+```
+
+이 `style.css`에서는 `body { … }` 규칙에 이러한 변수를 사용합니다. 이러한 변수는 HTML에서 `<html>` 요소를 나타내고 특이성이 더 높다는 점을 빼고 `html` 선택기와 동일한 [`:root` CSS pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:root) 선택기에서 정의되므로 아래로 캐스케이드되어 제 경우에 글로벌 CSS 변수를 선언하는 역할을 하게 됩니다.
+
+```css
+/* style.css */
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  color: var(--color);
+  background-color: var(--background-color);
+}
+```
+
+위의 코드 샘플에서 공백으로 구분된 값인 `light dark`를 포함한 [`color-scheme`](https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme) 속성을 발견했을 것입니다.
+
+이것은 내 앱이 지원하는 색상 테마를 브라우저에 알려주고 사용자 에이전트 스타일시트의 특수 형태를 활성화할 수 있도록 합니다. 그 결과 예를 들어 브라우저가 어두운 배경과 밝은 텍스트로 양식 필드를 렌더링하도록 하거나 스크롤 막대를 조정하거나 테마 인식 하이라이트 색상을 지원하는 데 도움을 줍니다. `color-scheme`의 정확한 세부 정보는 [CSS 색상 조정 모듈 레벨 1](https://drafts.csswg.org/css-color-adjust-1/)에 지정되어 있습니다.
+
+{% Aside 'note' %} 🌒 [`color-scheme`이 실제로 하는 일](/color-scheme/)에 대해 자세히 읽어보세요. {% endAside %}
+
+무엇보다도 내 사이트에서 중요한 내용에 대한 CSS 변수를 정의하는 것이 관건입니다. 의미적으로 스타일을 구성하면 다크 모드로 작업할 때 많은 도움이 됩니다. 예를 들어, `-⁠-⁠highlight-yellow` 대신 `-⁠-⁠accent-color` 변수를 호출하는 것이 좋은데, "yellow"는 실제로 다크 모드에서 노란색이 아닐 수 있고 그 반대의 경우도 마찬가지이기 때문입니다. 다음은 내 예에서 사용되는 다른 일부 변수들의 예입니다.
+
+```css
+/* dark.css */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+  --link-color: rgb(0, 188, 212);
+  --main-headline-color: rgb(233, 30, 99);
+  --accent-background-color: rgb(0, 188, 212);
+  --accent-color: rgb(5, 5, 5);
+}
+```
+
+```css
+/* light.css */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+  --link-color: rgb(0, 0, 238);
+  --main-headline-color: rgb(0, 0, 192);
+  --accent-background-color: rgb(0, 0, 238);
+  --accent-color: rgb(250, 250, 250);
+}
+```
+
+### 전체 예
+
+다음 [Glitch](https://dark-mode-baseline.glitch.me/) 임베드에서 위의 개념을 실제로 적용한 완전한 예제를 볼 수 있습니다. 해당하는 특정한 [운영 체제 설정](#activating-dark-mode-in-the-operating-system)에서 다크 모드를 전환하고 페이지가 어떻게 반응하는지 확인해 보세요.
+
+<div style="height: 900px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-baseline?path=style.css&amp;previewSize=100&amp;attributionHidden=true'   } %}</div>
+
+### 로딩의 영향
+
+이 예제를 사용해보면 미디어 쿼리를 통해 제가 `dark.css`와 `light.css`를 로드하는 이유를 알 수 있습니다. 다크 모드를 전환하고 페이지를 다시 로드해 보세요. 현재 일치하지 않는 특정 스타일시트가 여전히 로드되지만 우선순위가 가장 낮으므로 현재 사이트에서 필요한 리소스와 경합하지 않습니다.
+
+{% Aside 'note' %} 😲 [브라우저가 일치하지 않는 미디어 쿼리로 스타일시트를 다운로드하는 이유](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513)에 대해 읽어보세요. {% endAside %}
+
+<figure>{% Img src="image/admin/flTdLliru6GmqqlOKjNx.png", alt="라이트 모드에서 다크 모드 CSS가 가장 낮은 우선순위로 로드되는 방식을 보여주는 네트워크 로드 다이어그램", width="800", height="417" %}<figcaption>라이트 모드의 사이트는 다크 모드 CSS를 가장 낮은 우선 순위로 로드합니다.</figcaption></figure>
+
+<figure>{% Img src="image/admin/IDs6Le0VBhHu9QEDdxL6.png", alt="다크 모드에서 라이트 모드 CSS가 가장 낮은 우선 순위로 로드되는 방식을 보여주는 네트워크 로드 다이어그램", width="800", height="417" %}<figcaption>다크 모드의 사이트는 라이트 모드 CSS를 가장 낮은 우선 순위로 로드합니다.</figcaption></figure>
+
+<figure>{% Img src="image/admin/zJqu5k3TIgcZf1OHWWIq.png", alt="기본 라이트 모드에서 다크 모드 CSS가 가장 낮은 우선 순위로 로드되는 방식을 보여주는 네트워크 로드 다이어그램", width="800", height="417" %}<figcaption> <code>prefers-color-scheme</code>을 지원하지 않는 브라우저에서 기본 라이트 모드의 사이트가 다크 모드 CSS를 가장 낮은 우선 순위로 로드합니다.</figcaption></figure>
+
+### 다크 모드 변경에 대한 반응
+
+다른 미디어 쿼리 변경과 마찬가지로 다크 모드 변경은 JavaScript를 통해 구독할 수 있습니다. 예를 들어 이것을 사용하여 페이지의 [파비콘](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#provide_great_icons_tiles)을 동적으로 변경하거나 Chrome에서 URL 표시줄의 색상을 결정하는 [`<meta name="theme-color">`](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#meta_theme_color_for_chrome_and_opera)를 변경할 수 있습니다. 위의 [전체 예제](#full-example)는 이러한 내용을 실제로 보여줍니다. 테마 색상과 파비콘 변경 사항을 보려면 [별도의 탭에서 데모](https://dark-mode-baseline.glitch.me/)를 여세요.
+
+```js
+  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  darkModeMediaQuery.addListener((e) => {
+    const darkModeOn = e.matches;
+    console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
+  });
+```
+
+Chromium 93 및 Safari 15부터 `meta` 테마 색상 요소의 `media` 특성을 사용하여 미디어 쿼리를 기반으로 색상을 조정할 수 있습니다. 일치하는 첫 번째 색상이 선택됩니다. 예를 들어 라이트 모드에 대한 색상과 다크 모드에 대한 색상을 각기 다르게 가질 수 있습니다. 작성 당시를 기준으로, 매니페스트에서는 이를 정의할 수 없습니다. [w3c/manifest#975 GitHub 문제](https://github.com/w3c/manifest/issues/975)를 참조하세요.
+
+```html
+<meta
+  name="theme-color"
+  media="(prefers-color-scheme: light)"
+  content="white"
+/>
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+## 다크 모드 디버깅 및 테스트
+
+### DevTools에서 `prefers-color-scheme` 에뮬레이션
+
+전체 운영 체제의 색 구성표를 전환하는 것은 매우 성가신 일이 될 수 있으므로, Chrome DevTools를 사용하여 현재 표시되는 탭에만 영향을 미치는 방식으로 사용자가 선호하는 색 구성표를 에뮬레이션할 수 있습니다. [명령 메뉴](https://developer.chrome.com/docs/devtools/command-menu/)를 열고 `Rendering` 입력을 시작하고 `Show Rendering` 명령을 실행한 다음, **CSS 미디어 요소 prefers-color-scheme 에뮬레이션** 옵션을 변경합니다.
+
+<figure>   {% Img src="image/admin/RIq2z6Ja1zSzfNTHic5z.png", alt="A Chrome DevTools의 렌더링 탭에 있는 'CSS 미디어 요소 prefers-color-scheme 에뮬레이션' 옵션을 보여주는 스크린샷", width="800", height="552" %}</figure>
+
+### Puppeteer로 `prefers-color-scheme` 스크린샷 만들기
+
+[Puppeteer](https://github.com/GoogleChrome/puppeteer/)는 [DevTools 프로토콜](https://chromedevtools.github.io/devtools-protocol/)을 통해 Chrome 또는 Chromium을 제어하는 고급 API를 제공하는 Node.js 라이브러리입니다. [`dark-mode-screenshot`](https://www.npmjs.com/package/dark-mode-screenshot)을 사용하여 다크 모드와 라이트 모드 모두에서 페이지의 스크린샷을 만들 수 있는 Puppeteer 스크립트를 제공합니다. 이 스크립트를 일회성으로 실행하거나 CI(지속적 통합) 테스트 세트의 일부로 만들 수 있습니다.
+
+```bash
+npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
+```
+
+## 다크 모드 모범 사례
+
+### 순수한 흰색은 피할 것
+
+여기서 순수하게 흰색이 사용되지 않았다는 점을 알아차린 분들도 있을 겁니다. 주변의 어두운 콘텐츠로 빛이 번지는 것을 방지하기 위해 저는 약간 더 어두운 흰색을 선택합니다. `rgb(250, 250, 250)` 정도면 좋습니다.
+
+### 사진 이미지 다시 채색 및 어둡게 만들기
+
+아래 두 스크린샷을 비교해 보면 핵심 테마가 *다크 온 라이트*에서 *라이트 온 다크*로 변경되었을 뿐만 아니라 영웅 이미지도 약간 다르게 보이는 것을 알 수 있습니다. 저의 [사용자 연구](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)에 따르면 설문 응한 대다수의 사람들이 다크 모드가 활성화되어 있을 때 약간 덜 생생하고 덜 밝은 이미지를 선호하는 것으로 나타났습니다. 저는 이것을 *다시 채색한다*고 부릅니다.
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/qzzYCKNSwoJr9BBEQlR7.png", alt="다크 모드에서 약간 더 어두워진 영웅 이미지", width="800", height="618" %}<figcaption> 영웅 이미지가 다크 모드에서 약간 더 어두워졌습니다.</figcaption></figure>
+  <figure>{% Img src="image/admin/41RbLRZ5wzkoVnIRJkNl.png", alt="라이트 모드의 일반 영웅 이미지.", width="800", height="618" %}<figcaption> 라이트 모드의 일반 영웅 이미지.</figcaption></figure>
+</div>
+
+저의 이미지에서 CSS 필터를 통해 다시 채색할 수 있습니다. 이를 위해 URL에 `.svg`가 없는 모든 이미지와 일치하는 CSS 선택기를 사용합니다. 벡터 그래픽(아이콘)을 내 이미지(사진)와 다르게 다시 채색 처리할 수 있다는 것이 주된 개념이며 이에 대해서는 [다음 단락](#vector-graphics-and-icons)에서 좀 더 이야기하겠습니다. 나중에 유연하게 필터를 변경할 수 있도록 [CSS 변수](https://developer.mozilla.org/docs/Web/CSS/var)를 다시 사용하는 것에 주목하세요.
+
+{% Aside 'note' %} 🎨 [다크 모드를 사용한 다시 채색 방식에 관한 사용자 연구](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)에 대해 자세히 읽어보세요. {% endAside %}
+
+다시 채색하는 처리는 다크 모드에서만 필요하므로, 즉 `dark.css`가 활성일 때만 필요하므로 `light.css`에는 이에 상응하는 규칙이 없습니다.
+
+```css
+/* dark.css */
+--image-filter: grayscale(50%);
+
+img:not([src*=".svg"]) {
+  filter: var(--image-filter);
+}
+```
+
+#### JavaScript로 다크 모드 다시 채색 강도 사용자 정의
+
+모든 사람이 같은 것은 아니며 사람마다 필요한 다크 모드가 다릅니다. 위에서 설명한 다시 채색 방식을 이용함으로써 저는 그레이스케일 강도를 [JavaScript를 통해 변경](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript)할 수 있는 사용자 기본 설정으로 쉽게 만들 수 있으며 값을 `0%`로 설정하여 다시 채색을 완전히 비활성화할 수도 있습니다. [`document.documentElement`](https://developer.mozilla.org/docs/Web/API/Document/documentElement)는 문서의 루트 요소에 대한 참조를 제공합니다. 즉, 이것은 [`:root` CSS 의사 클래스](https://developer.mozilla.org/docs/Web/CSS/:root)로 참조할 수 있는 동일한 요소입니다.
+
+```js
+const filter = 'grayscale(70%)';
+document.documentElement.style.setProperty('--image-filter', value);
+```
+
+### 벡터 그래픽 및 아이콘 반전시키기
+
+제 경우에 `<img>` 요소를 통해 참조하는 아이콘으로 사용되는 벡터 그래픽의 경우, 상이한 다시 채색 방법을 사용합니다. [연구](https://dl.acm.org/citation.cfm?id=2982168) 결과에 따르면 사람들은 사진 반전을 좋아하지 않지만 대부분의 아이콘에서는 효과가 좋습니다. 다시, CSS 변수를 사용하여 일반 및 [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover) 상태에서 반전의 양을 결정합니다.
+
+<div class="switcher">
+  <figure>{% Img src="image/admin/JGYFpAPi4233HrEKTQZp.png", alt="다크 모드에서 아이콘이 반전됩니다.", width="744", height="48" %}<figcaption> 다크 모드에서 아이콘이 반전됩니다.</figcaption></figure>
+  <figure>{% Img src="image/admin/W8AWbuqWthI6CfFsYunk.png", alt="라이트 모드의 일반 아이콘", width="744", height="48" %}<figcaption> 라이트 모드의 일반 아이콘.</figcaption></figure>
+</div>
+
+`dark.css`에서만 아이콘을 반전시키고 `light.css`에서는 반전시키지 않은 방식, 그리고 사용자가 선택한 모드에 따라 아이콘이 약간 더 어둡거나 밝게 나타나도록 하기 위해 두 경우에 `:hover`가 다른 반전 강도를 얻는 방식에 주목하세요.
+
+```css
+/* dark.css */
+--icon-filter: invert(100%);
+--icon-filter_hover: invert(40%);
+
+img[src*=".svg"] {
+  filter: var(--icon-filter);
+}
+```
+
+```css
+/* light.css */
+--icon-filter_hover: invert(60%);
+```
+
+```css
+/* style.css */
+img[src*=".svg"]:hover {
+  filter: var(--icon-filter_hover);
+}
+```
+
+### 인라인 SVG에 `currentColor` 사용
+
+*인라인* SVG 이미지의 경우 [반전 필터를 사용](#invert-vector-graphics-and-icons)하는 대신, 요소의 `color` 속성 값을 나타내는 [`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentColor_keyword) CSS 키워드를 활용할 수 있습니다. 이를 통해 기본적으로 `color` 값을 받지 않는 속성에서 이 값을 사용할 수 있습니다. 편리하게도 `currentColor`가 SVG [`fill` 또는 `stroke` 특성](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes)의 값으로 사용되면 대신 색상 속성의 상속된 값에서 이 값을 가져옵니다. 더 좋은 점: [`<svg><use href="…"></svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/use)에서도 작동하므로 별도의 리소스를 가질 수 있고 `currentColor`는 컨텍스트에서 계속 적용됩니다. 이것은 *인라인* 또는 `<use href="…">` SVG에만 작동하며 이미지의 `src`로 참조되거나 CSS를 통해 참조되는 SVG에는 작동하지 않습니다. 아래 데모에서 이것이 적용된 모습을 볼 수 있습니다.
+
+```html/2
+<!-- Some inline SVG -->
+<svg xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+>
+  […]
+</svg>
+```
+
+<div style="height: 950px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-currentcolor?path=light.css&amp;previewSize=100',     title: 'dark-mode-currentcolor on Glitch'   } %}</div>
+
+### 모드 간 부드러운 전환
+
+`color`와 `background-color`가 모두 [애니메이션 가능한 CSS 속성](https://www.quackit.com/css/css3/animations/animatable_properties/)이라는 사실 덕분에 다크 모드에서 라이트 모드, 또는 그 반대로 부드럽게 전환할 수 있습니다. 두 속성에 대해 두 개의 `transition`만 선언하여 애니메이션을 만들 수 있습니다. 아래 예는 전반적인 아이디어를 보여주며 [데모](https://dark-mode-baseline.glitch.me/)에서 라이브로 체험할 수 있습니다.
+
+```css
+body {
+  --duration: 0.5s;
+   --timing: ease;
+
+  color: var(--color);
+  background-color: var(--background-color);
+
+  transition:
+    color var(--duration) var(--timing),
+    background-color var(--duration) var(--timing);
+}
+```
+
+### 다크 모드로 아트 디렉션
+
+일반적으로 로딩 성능상의 이유로 `<link>` 요소의 `media` 속성에서 `prefers-color-scheme`만으로 작업할 것을 권장하지만(스타일시트의 인라인 대신) HTML 코드에서 인라인으로 직접 `prefers-color-scheme`을 사용해야 할 때가 있습니다. 아트 디렉션이 이러한 경우에 해당합니다. 웹에서 아트 디렉션은 페이지의 전반적인 시각적 모양과 페이지가 시각적으로 소통하고, 분위기를 자극하고, 특징을 부각시키고, 대상 청중에게 심리적으로 호소하는 방식을 다룹니다.
+
+다크 모드의 경우, 특정 모드에서 어떤 이미지가 가장 좋은지, 그리고 [이미지 다시 채색](#photographic-images)이 충분히 좋지 *않을* 수 있는지 여부를 결정하는 것은 디자이너의 판단에 달려 있습니다. `<picture>` 요소와 함께 사용하면 표시할 이미지의 `<source>`가 `media` 특성에 종속적이 될 수 있습니다. 아래 예에는 다크 모드의 경우 서반구를 표시하고 라이트 모드의 경우 동반구를 표시하거나, 기본 설정이 지정되지 않은 경우 다른 모든 경우에 기본적으로 동반구를 표시합니다. 이것은 물론 순전히 설명을 위한 것입니다. 장치에서 직접 다크 모드를 전환하여 차이를 확인해 보세요.
+
+```html
+<picture>
+  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
+  <source srcset="eastern.webp" media="(prefers-color-scheme: light)">
+  <img src="eastern.webp">
+</picture>
+```
+
+<div style="height: 600px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-picture?path=index.html&amp;previewSize=100',     title: 'dark-mode-picture on Glitch'   } %}</div>
+
+### 다크 모드, 그러나 옵트아웃 추가
+
+위의 [왜 다크 모드인가?](#why-dark-mode) 섹션에서 언급했듯이 다크 모드는 대부분의 사용자에게 미학적인 선택입니다. 결과적으로 일부 사용자는 실제로 운영 체제 UI를 어둡게 유지하고 싶지만 웹 페이지는 원래 보던 익숙한 방식으로 보는 것을 선호할 수 있습니다. 좋은 패턴은 처음에는 브라우저가 `prefers-color-scheme`을 통해 보내는 신호를 따르지만 선택적으로 사용자가 시스템 수준 설정을 재정의할 수 있도록 하는 것입니다.
+
+#### `<dark-mode-toggle>` 맞춤 요소
+
+물론 이를 위한 코드를 직접 생성할 수도 있지만 이 목적에 맞게 제가 만든 기성 사용자 정의 요소(웹 구성 요소)를 사용할 수도 있습니다. 이 요소는 [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle)라고 하며 완전히 사용자 정의할 수 있는 토글(다크 모드: 켜기/끄기) 또는 테마 전환기(테마: 라이트/다크)를 페이지에 추가시킵니다. 아래의 데모는 실제 이 요소가 사용된 모습을 보여줍니다(이런, [위의](https://dark-mode-picture.glitch.me/) [다른](https://dark-mode-baseline.glitch.me/) 모든 [예](https://dark-mode-currentcolor.glitch.me/)에서도 🤫 조용히 숨겨 놓았군요).
+
+```html
+<dark-mode-toggle
+    legend="Theme Switcher"
+    appearance="switch"
+    dark="Dark"
+    light="Light"
+    remember="Remember this"
+></dark-mode-toggle>
+```
+
+<div class="switcher">
+  <figure>     {% Img src="image/admin/Xy3uus69HnrkRPO4EuRu.png", alt="라이트 모드에서 {dark-mode-toggle0}", width="140", height="76" %}     <figcaption>       라이트 모드에서 <code>&lt;dark-mode-toggle&gt;</code>.     </figcaption>   {/dark-mode-toggle0}</figure>
+  <figure>     {% Img src="image/admin/glRVRJpQ9hMip6MbqY9N.png", alt="라이트 모드에서 {dark-mode-toggle0}.", width="140", height="76" %}     <figcaption>       다크 모드에서 <code>&lt;dark-mode-toggle&gt;</code>.     </figcaption>   {/dark-mode-toggle0}</figure>
+</div>
+
+아래 데모에서 오른쪽 상단 모서리에 있는 다크 모드 컨트롤을 클릭하거나 탭해 보세요. 세 번째와 네 번째 컨트롤에서 확인란을 선택하면 페이지를 새로 고치더라도 모드 선택이 기억된다는 것을 알 수 있습니다. 이를 통해 방문자는 운영 체제를 다크 모드로 유지하면서 사이트는 라이트 모드로 유지할 수 있습니다(그 반대도 마찬가지).
+
+<div style="height: 800px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html'   } %}</div>
+
+## 결론
+
+다크 모드를 지원하고 작업하는 것은 디자인을 재미 있고 새롭게 창조하는 길을 열어줍니다. 일부 방문자에게는 사이트를 처리할 수 없는 것과 행복한 사용자가 되는 것의 차이가 될 수 있습니다. 몇 가지 함정이 있고 신중한 테스트가 확실히 요구되지만 다크 모드는 확실히 모든 사용자에 대한 관심을 보여줄 좋은 기회입니다. 이 게시글에서 언급한 모범 사례와 [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) 사용자 지정 요소와 같은 헬퍼를 통해 자신감을 가지고 멋진 다크 모드 경험을 만들어낼 수 있을 것으로 생각합니다. 이 게시물이 도움이 되었거나 자작품이 있다면, 또는 개선을 위한 제안이 있으면 [Twitter에서 알려주세요.](https://twitter.com/tomayac) 읽어 주셔서 감사합니다! 🌒
+
+## 관련된 링크
+
+`prefers-color-scheme` 미디어 쿼리 리소스:
+
+- [Chrome Platform 현황 페이지](https://chromestatus.com/feature/5109758977638400)
+- [Chromium 버그](https://crbug.com/889087)
+- [미디어 쿼리 레벨 5 사양](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)
+
+`color-scheme` 메타 태그 및 CSS 속성 리소스:
+
+- [`color-scheme` CSS 속성 및 메타 태그](/color-scheme/)
+- [Chrome Platform 현황 페이지](https://chromestatus.com/feature/5330651267989504)
+- [Chromium 버그](http://crbug.com/925935)
+- [CSS 색상 조정 모듈 레벨 1 사양](https://drafts.csswg.org/css-color-adjust-1/)
+- [메타 태그 및 CSS 속성에 대한 CSS WG GitHub 이슈](https://github.com/w3c/csswg-drafts/issues/3299)
+- [메타 태그에 대한 HTML WHATWG GitHub 이슈](https://github.com/whatwg/html/issues/4504)
+
+일반 다크 모드 링크:
+
+- [Material Design—다크 테마](https://material.io/design/color/dark-theme.html)
+- [Web Inspector의 다크 모드](https://webkit.org/blog/8892/dark-mode-in-web-inspector/)
+- [WebKit의 다크 모드 지원](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
+- [Apple Human Interface 가이드라인—다크 모드](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)
+
+이 게시물에 대한 배경 연구 자료:
+
+- [다크 모드의 "supported-color-schemes"가 실제로 하는 역할은? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)
+- [어둠이 있게 하라! 🌚 아마도…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)
+- [다크 모드를 위한 다시 채색](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b)
+
+## 감사의 말
+
+`prefers-color-scheme` 미디어 기능, `color-scheme` CSS 속성 및 관련 메타 태그는 👏 [Rune Lillesveen](https://twitter.com/runeli)이 구현했습니다. Rune은 [CSS 색상 조정 모듈 레벨 1](https://drafts.csswg.org/css-color-adjust-1/) 사양의 공동 편집자로 참여했습니다. 이 글을 검토해준 [Lukasz Zbylut](https://www.linkedin.com/in/lukasz-zbylut/), [Rowan Merewood](https://twitter.com/rowan_m), [Chirag Desai](https://www.linkedin.com/in/chiragd/) 및 [Rob Dodson](https://twitter.com/rob_dodson)에게 감사드립니다. [로딩 전략](#loading-strategy)은 [Jake Archibald](https://twitter.com/jaffathecake)의 아이디어입니다. [Emilio Cobos Álvarez](https://twitter.com/ecbos_)는 저에게 올바른 `prefers-color-scheme` 감지 방법을 알려 주었습니다. 참조된 SVG 및 `currentColor`에 대한 팁은 [Timothy Hatcher](https://twitter.com/xeenon)가 제공한 것입니다. 마지막으로, 이 기사의 권장 사항에 초석이 된 다양한 사용자 연구를 위해 힘써준 많은 익명 참가자에게 감사드립니다. [Nathan Anderson](https://unsplash.com/photos/kujXUuh1X0o)에서 영웅 이미지를 제공했습니다.
diff --git a/src/site/content/ko/blog/prefers-reduced-motion/index.md b/src/site/content/ko/blog/prefers-reduced-motion/index.md
new file mode 100644
index 00000000000..9540652aad2
--- /dev/null
+++ b/src/site/content/ko/blog/prefers-reduced-motion/index.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: 'prefers-reduced-motion: 때로는 움직임이 적을수록 더 많음'
+subhead: |2-
+
+  prefers-reduced-motion 미디어 쿼리는 사용자가 요청했는지 여부를 감지합니다.
+
+  운영 체제에서 사용하는 애니메이션이나 모션의 양을 최소화합니다.
+authors:
+  - thomassteiner
+description: prefers-reduced-motion 미디어 쿼리는 시스템이 사용하는 애니메이션이나 모션의 양을 최소화하도록 사용자가 요청했는지 여부를 감지합니다. 이것은 최소화된 애니메이션이 필요하거나 선호하는 사용자를 위한 것입니다. 예를 들어, 전정 장애가 있는 사람들은 종종 애니메이션이 최소한으로 유지되기를 원합니다.
+date: 2019-03-11
+updated: 2019-12-10
+tags:
+  - blog
+  - media-queries
+  - css
+hero: image/admin/LI2vYKZwQ98w3MLtUF8V.jpg
+alt: 기차에서 여성의 타임랩스
+feedback:
+  - api
+---
+
+모든 사람이 장식용 애니메이션이나 전환을 좋아하는 것은 아니며, 일부 사용자는 시차 스크롤, 확대 효과 등에 직면했을 때 노골적으로 멀미를 경험합니다. Chrome 74는 이러한 기본 설정을 표시한 사용자를 위해 사이트의 모션 축소 변형을 설계할 수 있는 사용자 기본 설정 미디어 쿼리 `prefers-reduced-motion`를 지원합니다.
+
+## 실생활과 웹에서 너무 많은 움직임
+
+다른 날, 나는 아이들과 아이스 스케이팅을 하고 있었습니다. 날씨가 좋았고, 햇빛이 비췄고, 아이스 링크는 사람들로 가득 찼습니다⛸. 단 한가지 문제점은 저는 군중들을 잘 다루지 못한다는 것입니다. 움직이는 표적이 너무 많아서, 저는 어떤 것에 집중하지 못하고, 결국 길을 잃고, 마치 개미집🐜을 쳐다보는 것 같은 시각적 과부하를 느끼게 됩니다.
+
+<figure>{% Img src="image/admin/JA5v1s8gSBk70eJBB8xW.jpg", alt="아이스 스케이트를 타는 사람들의 무리", width="580", height="320" %}<figcaption>실생활에서 시각적 과부하.</figcaption></figure>
+
+때때로 웹에서 동일한 일이 발생할 수 있습니다. 깜박이는 광고, 멋진 시차 효과, 놀라운 공개 애니메이션, 자동 재생 비디오 등으로 *웹은 때때로 상당히 압도적일 수 있습니다*… 다행히도 실생활과 달리 이에 대한 해결책이 있습니다. CSS 미디어 쿼리 `prefers-reduced-motion`을 통해 개발자는 감소된 움직임을 선호하는 사용자를 위해 페이지 변형을 만들 수 있습니다. 여기에는 비디오 자동 재생을 자제하는 것부터 순전히 장식적인 효과를 비활성화하는 것, 특정 사용자를 위한 페이지를 완전히 다시 디자인하는 것까지 모두 포함될 수 있습니다.
+
+기능에 대해 자세히 알아보기 전에 한 걸음 뒤로 물러나서 웹에서 어떤 애니메이션이 사용되는지 생각해 보겠습니다. 원하는 경우 배경 정보를 건너뛰고 [아래의 기술 세부 정보로 바로 이동](#working-with-the-media-query)할 수도 있습니다.
+
+## 웹상의 애니메이션
+
+*애니메이션은 사용자에게 피드백* 을 제공하는 데 자주 사용됩니다. 예를 들어 작업이 수신되어 처리 중임을 알릴 수 있습니다. 예를 들어, 쇼핑 웹사이트에서 제품은 사이트의 오른쪽 상단 모서리에 아이콘으로 표시된 가상 장바구니로 "비행"하도록 애니메이션될 수 있습니다.
+
+또 다른 사용 사례는 사용자의 많은 시간을 차지하고 전체 경험이 더 *빠르게 느껴지도록*하기 위해 스켈레톤 화면, 컨텍스트 메타데이터 및 저품질 이미지 미리보기를 혼합하여 사용하여 [사용자 인식](https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3)을 해킹하는 모션을 사용하는 것과 관련이 있습니다. 아이디어는 사용자에게 다가오는 것에 대한 컨텍스트를 제공하는 동시에 가능한 한 빨리 사물을 로드하는 것입니다.
+
+마지막으로 애니메이션 그라디언트, 시차 스크롤, 배경 비디오 등과 같은 *장식 효과가 있습니다.* 많은 사용자가 이러한 애니메이션을 즐기는 반면 일부 사용자는 산만하거나 느려지는 느낌 때문에 싫어합니다. 최악의 경우 사용자는 실제 경험한 것처럼 멀미에 시달릴 수 있으므로 이러한 사용자에게는 애니메이션을 줄이는 것이 *의학적 필요* 입니다.
+
+## 동작 유발 전정 스펙트럼 장애
+
+일부 사용자는 [애니메이션 콘텐츠에서 주의가 산만하거나 메스꺼움](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)을 경험합니다. 예를 들어, 스크롤링 애니메이션은 스크롤링과 관련된 주요 요소 이외의 요소가 많이 움직일 때 전정 장애를 유발할 수 있습니다. 예를 들어, 시차 스크롤 애니메이션은 배경 요소가 전경 요소와 다른 속도로 움직이기 때문에 전정 장애를 유발할 수 있습니다. 전정(내이) 장애 반응에는 현기증, 메스꺼움 및 편두통이 포함되며 때로는 회복을 위해 침상 안정이 필요합니다.
+
+## 운영 체제에서 동작 제거
+
+많은 운영 체제에는 오랫동안 감소된 동작에 대한 기본 설정을 지정하기 위한 접근성 설정이 있었습니다. 아래 스크린샷은 macOS Mojave의 **모션 감소** 기본 설정과 Android Pie의 **애니메이션 제거** 기본 설정을 보여줍니다. 선택하면 이러한 기본 설정으로 인해 운영 체제에서 앱 실행 애니메이션과 같은 장식 효과를 사용하지 않습니다. 응용 프로그램 자체도 이 설정을 존중하고 불필요한 애니메이션을 모두 제거해야 합니다.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KwuLNPefeDzUfR17EUtr.png", alt="'움직임 줄이기' 확인란이 선택된 macOS 설정 화면의 스크린샷.", width="398", height="300" %}</figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qed7yE6FKVQ5YXHn0TbJ.png", alt="'애니메이션 제거' 확인란이 선택된 Android 설정 화면의 스크린샷", width="287", height="300" %}</figure>
+</div>
+
+## 웹에서 모션 제거
+
+[Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/)는 웹에서도 감소된 모션 사용자 기본 설정을 제공합니다. 미디어 쿼리를 통해 작성자는 렌더링되는 문서와 관계없이 사용자 에이전트 또는 디스플레이 장치의 값이나 기능을 테스트하고 쿼리할 수 있습니다. 미디어 쿼리 [`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)은 사용하는 애니메이션이나 동작의 양을 최소화하기 위해 사용자가 운영 체제 기본 설정을 설정했는지 감지하는 데 사용됩니다. 두 가지 가능한 값을 사용할 수 있습니다.
+
+- `no-preference`: 사용자가 기본 운영 체제에서 기본 설정을 지정하지 않았음을 나타냅니다. 이 키워드 값은 부울 컨텍스트에서 `false`로 평가됩니다.
+- `reduce`: 사용자가 인터페이스가 움직임이나 애니메이션을 최소화해야 함을 나타내는 운영 체제 기본 설정을 지정했음을 나타냅니다. 바람직하지 않은 모든 움직임이 제거되는 지점까지입니다.
+
+## 미디어 쿼리 작업
+
+{% Aside %} [움직임이 적은 미디어 쿼리를 사용할 수 있나요?](https://caniuse.com/#feat=prefers-reduced-motion)를 참조하세요. `prefers-reduced-motion` 지원하는지 알아내십시오. {% endAside %}
+
+모든 미디어 쿼리와 마찬가지로, CSS 컨텍스트와 JavaScript 컨텍스트에서 `prefers-reduced-motion`을 확인할 수 있습니다.
+
+두 가지 모두를 설명하기 위해 사용자가 클릭하기를 원하는 중요한 가입 버튼이 있다고 가정해 보겠습니다. 나는 눈길을 끄는 "진동" 애니메이션을 정의할 수 있지만 훌륭한 웹 시민으로서 나는 애니메이션에 명시적으로 OK인 사용자에게만 재생하지만 애니메이션을 옵트아웃한 사용자일 수 있는 다른 모든 사람은 아닙니다. 미디어 쿼리를 이해하지 못하는 브라우저 사용자.
+
+```css
+/*
+  If the user has expressed their preference for
+  reduced motion, then don't use animations on buttons.
+*/
+@media (prefers-reduced-motion: reduce) {
+  button {
+    animation: none;
+  }
+}
+
+/*
+  If the browser understands the media query and the user
+  explicitly hasn't set a preference, then use animations on buttons.
+*/
+@media (prefers-reduced-motion: no-preference) {
+  button {
+    /* `vibrate` keyframes are defined elsewhere */
+    animation: vibrate 0.3s linear infinite both;
+  }
+}
+```
+
+{% Aside %}
+`link` 요소 `media` 속성을 통해서만 조건부로 로드하는 별도의 스타일시트에 모든 애니메이션 관련 CSS를 아웃소싱하여 선택 해제된 사용자가 다운로드하지 않도록 할 수 있습니다. 😎 `<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">`
+{% endAside %}
+
+`prefers-reduced-motion`으로 작업하는 방법을 설명하기 위해 [Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API)로 복잡한 애니메이션을 정의했다고 가정해 보겠습니다. CSS 규칙은 사용자 기본 설정이 변경될 때 브라우저에 의해 동적으로 트리거되지만 JavaScript 애니메이션의 경우 변경 사항을 직접 수신한 다음 잠재적으로 실행 중인 애니메이션을 수동으로 중지해야 합니다(또는 사용자가 허용하는 경우 다시 시작해야 함).
+
+```js
+const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+mediaQuery.addEventListener('change', () => {
+  console.log(mediaQuery.media, mediaQuery.matches);
+  // Stop JavaScript-based animations.
+});
+```
+
+실제 미디어 쿼리 주위의 괄호는 필수 사항입니다.
+
+{% Compare 'worse' %}
+
+```js
+window.matchMedia('prefers-reduced-motion: reduce')
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.matchMedia('(prefers-reduced-motion: reduce)')
+```
+
+{% endCompare %}
+
+## 데모
+
+저는 Rogério Vicente의 놀라운 [🐈 HTTP 상태 고양이](https://http.cat/)를 기반으로 작은 데모를 만들었습니다. 먼저 잠시 시간을 내어 농담을 감상해 보세요. 재미있습니다. 기다릴게요. 이제 돌아와서 [데모](https://prefers-reduced-motion.glitch.me)를 소개하겠습니다. 아래로 스크롤하면 각 HTTP 상태 고양이가 오른쪽 또는 왼쪽에서 번갈아 나타납니다. 그것은의 버터는 60 FPS 애니메이션을 부드럽게하지만, 위에서 설명한 바와 같이, 일부 사용자는 `prefers-reduced-motion`를 싫어하거나 동작에 지장을 받을 수 있으므로 데모는 AAA를 존중하도록 프로그래밍되어 있습니다. 이것은 동적으로 작동하므로 사용자는 다시 로드할 필요 없이 즉석에서 기본 설정을 변경할 수 있습니다. 사용자가 감소된 동작을 선호하면 불필요한 공개 애니메이션이 사라지고 일반 스크롤 동작만 남습니다. 아래 스크린캐스트는 작동 중인 데모를 보여줍니다.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/zWs45QPPI9C8CjF813Zx.mp4", muted=true, playsinline=true, controls=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CQAw3Ee43Dcv0JOsm9fl.png" %}<figcaption> <a href="https://prefers-reduced-motion.glitch.me"><code>prefers-reduced-motion</code> 데모</a> 앱 동영상</figcaption></figure>
+
+## 결론
+
+사용자 기본 설정을 존중하는 것은 최신 웹 사이트의 핵심이며 브라우저는 웹 개발자가 그렇게 할 수 있도록 점점 더 많은 기능을 노출하고 있습니다. 또 다른 시작 예는 사용자가 밝은 색 구성표를 선호하는지 어두운 색 구성표를 선호하는지 감지하는 [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) 내 기사 [Hello Darkness, My Old Friend](/prefers-color-scheme) 🌒 `prefers-color-scheme`에 대한 모든 것을 읽을 수 있습니다.
+
+CSS의 작업 그룹은 [사용자 선호도 미디어 쿼리](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) 같은 [`prefers-reduced-transparency`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency)(사용자가 투명성을 감소 선호 한 경우를 검출)을 [`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)(검출 사용자가 증가 또는 인접 사이의 콘트라스트의 양을 감소시키는 시스템을 요청한 경우 색상) 및 [`inverted-colors`](https://drafts.csswg.org/mediaqueries-5/#inverted)(사용자가 반전된 색상을 선호하는지 감지)를 더 표준화합니다. 👀 이 공간을 주목하세요. Chrome에서 출시되면 확실히 알려드리겠습니다!
+
+## (보너스) 모든 웹사이트에서 강제로 움직임 감소
+
+모든 사이트가 `prefers-reduced-motion`을 사용하는 것은 아니거나 취향에 크게 맞지 않을 수 있습니다. 어떤 이유에서든 모든 웹사이트에서 움직임을 멈추고 싶다면 실제로 할 수 있습니다. 이를 가능하게 하는 한 가지 방법은 방문하는 모든 웹 페이지에 다음 CSS가 포함된 스타일시트를 삽입하는 것입니다. 이를 허용하는 여러 [브라우저 확장 프로그램](https://chrome.google.com/webstore/search/user%20stylesheets?_category=extensions)이 있습니다(사용 위험은 사용자가 감수해야 합니다!).
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+```
+
+이것이 작동하는 방식은 위의 CSS가 모든 애니메이션의 지속 시간을 재정의하고 더 이상 눈에 띄지 않을 정도로 짧은 시간으로 전환한다는 것입니다. 일부 웹 사이트는 올바르게 작동하기 위해 실행될 애니메이션에 의존하기 때문에(아마도 특정 단계는 [`animationend` 이벤트](https://developer.mozilla.org/docs/Web/API/HTMLElement/animationend_event)의 발생에 따라 다르기 때문일 수 있음), 더 급진적인 `animation: none !important;` 접근 방식이 작동하지 않습니다. 위의 해킹도 모든 웹사이트에서 성공을 보장하는 것은 아니므로(예: [Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API)를 통해 시작된 모션을 중지할 수 없음) 파손을 발견하면 반드시 비활성화하십시오.
+
+## 관련된 링크
+
+- [미디어 쿼리 레벨 5](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion) 사양의 최신 편집자 초안.
+- [Chrome 플랫폼 상태](https://www.chromestatus.com/feature/5597964353404928)의 `prefers-reduced-motion`.
+- `prefers-reduced-motion` [Chromium 버그](http://crbug.com/722548).
+- Blink [게시 구현 의향](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NZ3c9d4ivA8/BIHFbOj6DAAJ).
+
+## 감사의 말
+
+Chrome에서 `prefers-reduced-motion`을 구현했으며 [Rob Dodson](https://twitter.com/rob_dodson)과 함께 이 글도 검토한 [Stephen McGruer](https://github.com/stephenmcgruer)에게 큰 박수를 보냅니다. Unsplash의 Hannah Cauhepe의 [영웅 이미지](https://unsplash.com/photos/im7Tiw1OY7c).
diff --git a/src/site/content/ko/blog/preload-optional-fonts/index.md b/src/site/content/ko/blog/preload-optional-fonts/index.md
new file mode 100644
index 00000000000..af5a9a26082
--- /dev/null
+++ b/src/site/content/ko/blog/preload-optional-fonts/index.md
@@ -0,0 +1,70 @@
+---
+title: 선택적 글꼴 사전 로드로 레이아웃 이동 및 보이지 않는 텍스트의 깜박임(FOIT) 방지
+subhead: 'Chrome 83부터 link rel="preload" 및 font-display:  optional을 결합하여 레이아웃 버벅거림을 완전히 제거할 수 있습니다.'
+authors:
+  - houssein
+date: 2020-03-18
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
+alt: 흰 탁자 위에 놓인 활자 세트의 큰 문자 A.
+description: "Chrome 83은 렌더링 주기를 최적화하여 선택적 글꼴을 사전 로드할 때 레이아웃 이동을 없앱니다. \n<link rel=\"preload\">를 font-display: optional과 결합하는 것은 사용자 정의 글꼴의 버벅거림 없는 렌더링을 보장하는 가장 효과적인 방법입니다."
+tags:
+  - blog
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+{% Aside %} Chrome 83에서는 선택적 글꼴이 사전 로드될 때 레이아웃 이동 및 FOIT(보이지 않는 텍스트) 깜박임을 완전히 없애기 위해 새로운 글꼴 로드 기능이 개선되었습니다. {% endAside %}
+
+Chrome 83은 렌더링 주기를 최적화하여 선택적 글꼴을 사전 로드할 때 레이아웃 이동을 없앱니다. `<link rel="preload">`를 `font-display: optional`과 결합하는 것은 사용자 정의 글꼴의 버벅거림 없는렌더링을 보장하는 가장 효과적인 방법입니다.
+
+## 브라우저 호환성 {: #compatibility }
+
+최신 교차 브라우저 지원 정보는 다음과 같은 MDN의 데이터를 확인하세요.
+
+- [`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)
+- [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
+
+## 글꼴 렌더링
+
+레이아웃 이동 또는 재레이아웃은 웹 페이지의 리소스가 동적으로 변경되어 콘텐츠가 "이동"할 때 발생합니다. 웹 글꼴을 가져오고 렌더링 하면 다음 두 가지 방법 중 하나로 레이아웃이 바로 이동할 수 있습니다.
+
+- 폴백 글꼴이 새 글꼴로 바뀝니다("스타일이 지정되지 않은 텍스트 깜박임")
+- "보이지 않는" 텍스트는 새 글꼴이 페이지에 렌더링될 때까지 표시됩니다("보이지 않는 텍스트 플래시").
+
+CSS [`font-display`](https://font-display.glitch.me/) 속성은 다양한 범위의 값 (`auto`, `block`, `swap`, `fallback` 및 `optional` )을 통해 사용자 정의 글꼴의 렌더링 동작을 수정하는 방법을 제공합니다. 사용할 값을 선택하는 것은 비동기적으로 로드된 글꼴의 기본 동작에 따라 다릅니다. 그러나 지원되는 이러한 모든 값은 지금까지 위에 나열된 두 가지 방법 중 하나로 레이아웃을 다시 트리거 할 수 있습니다!
+
+{% Aside %} [누적 레이아웃 이동](/cls/) 측정 항목을 사용하면 웹페이지의 레이아웃 불안정성을 측정할 수 있습니다. {% endAside %}
+
+## 선택적 글꼴
+
+`font-display` 속성은 세 가지 기간의 타임라인을 사용하여 렌더링 되기 전에 다운로드해야 하는 글꼴을 처리합니다.
+
+- **차단:** "보이지 않는" 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
+- **교체:** 폴백 시스템 글꼴을 사용하여 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
+- **실패:** 폴백 시스템 글꼴을 사용하여 텍스트를 렌더링합니다.
+
+이전에 `font-display: optional`로 지정된 글꼴에는 100ms의 차단 기간이 있고 교체 기간이 없었습니다. 이는 "보이지 않는" 텍스트가 폴백 글꼴로 전환되기 전에 매우 짧게 표시되는 것을 의미합니다. 글꼴이 100ms 이내에 다운로드되지 않으면 폴백 글꼴이 사용되며 폴백이 발생하지 않습니다.
+
+<figure>{% Img src="image/admin/WHLORYEu864QRRveFQUz.png", alt="글꼴 로드 실패 시 이전 선택적 글꼴 동작을 보여주는 다이어그램", width="800", height="340" %}<figcaption> 100ms 차단 기간 <b>이후</b> 글꼴을 다운로드할 때 Chrome에서 이전 <code>font-display: optional</code> 동작 </figcaption></figure>
+
+단, 100ms의 차단 기간이 끝나기 전에 글꼴을 다운로드 한 경우, 사용자 정의 글꼴을 렌더링하여 페이지에 사용합니다.
+
+<figure>{% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="글꼴이 제시간에 로드될 때 이전 선택적 글꼴 동작을 보여주는 다이어그램", width="800", height="318" %}<figcaption> 100ms 차단 기간 <b>이전</b> 글꼴을 다운로드할 때 Chrome에서 이전 <code>font-display: optional</code> 동작</figcaption></figure>
+
+Chrome은 폴백 글꼴이 사용되는지나 맞춤 글꼴이 제시간에 로드를 완료하는지에 관계없이 두 경우 모두에서 페이지를 **두 번** 다시 렌더링합니다. 이에 따라 보이지 않는 텍스트가 약간 깜박이고 새 글꼴이 렌더링 되는 경우 페이지 내용의 일부를 옮기는 레이아웃 버벅거림이 발생합니다. 이는 글꼴이 브라우저의 디스크 캐시에 저장되어 있고 차단 기간이 완료되기 전에 로드될 수 있는 경우에도 발생합니다.
+
+[`<link rel="preload'>`](/codelab-preload-web-fonts/)로 미리 로드된 선택적 글꼴의 첫 번째 렌더링 주기를 완전히 없애기 위해 Chrome 83에 [최적화](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632)가 적용되었습니다. 대신 맞춤 글꼴 로드가 완료되거나 일정 시간이 경과할 때까지 렌더링이 차단됩니다. 이 시간 초과 기간은 현재 100ms로 설정되어 있지만 성능을 최적화하기 위해 가까운 시일 내에 변경될 수 있습니다.
+
+<figure>{% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="글꼴 로드 실패 시 새로운 미리 로드된 선택적 글꼴 동작을 보여주는 다이어그램", width="800", height="353" %} <figcaption> 글꼴이 미리 로드되고 100ms 차단 기간(보이지 않는 텍스트의 깜박임 없음) <b>이후</b> 글꼴이 다운로드될 때 Chrome에서 <figcaption> 새로운 <code>font-display: optional</code> 동작 </figcaption></figcaption></figure>
+
+<figure>{% Img src="image/admin/OEHClGFMFspaWjb3xXLY.png", alt="글꼴이 제시간에 로드될 때 미리 로드된 선택적 글꼴 동작을 보여주는 다이어그램", width="800", height="346" %}<figcaption> 100ms 차단 기간(보이지 않는 텍스트의 플래시 없음) <b>이전</b> 글꼴이 미리 로드되고 글꼴을 다운로드할 때 Chrome에서 새로운 <code>font-display: optional</code> 동작</figcaption></figure>
+
+Chrome에서 선택적 글꼴을 미리 로드하면 레이아웃이 버벅거릴 가능성과 스타일이 지정되지 않은 텍스트의 깜박임이 없어집니다. 이것은 [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional)에 지정된 필수 동작과 일치합니다. 선택적 글꼴은 레이아웃이 다시 발생하지 않도록 해야 하고 사용자 에이전트는 대신 적절한 시간 동안 렌더링을 지연할 수 있습니다.
+
+선택적 글꼴을 미리 로드할 필요는 없지만, 특히 브라우저의 캐시에 선택적 글꼴이 아직 저장되지 않은 경우 첫 번째 렌더링 주기 전에 로드할 가능성이 매우 높아집니다.
+
+## 결론
+
+Chrome 팀은 이러한 새로운 최적화가 적용된 선택적 글꼴을 미리 로드한 경험을 듣고 싶습니다! 문제가 발생하거나 기능 제안을 삭제하려면 [문제](https://bugs.chromium.org/p/chromium/issues/entry)를 알리세요.
diff --git a/src/site/content/ko/blog/promises/index.md b/src/site/content/ko/blog/promises/index.md
new file mode 100644
index 00000000000..4dec70fd79e
--- /dev/null
+++ b/src/site/content/ko/blog/promises/index.md
@@ -0,0 +1,759 @@
+---
+title: 'JavaScript Promises: 소개'
+subhead: Promise는 지연 및 비동기 계산을 단순화합니다. Promise는 아직 완료되지 않은 작업을 나타냅니다.
+description: Promise는 지연 및 비동기 계산을 단순화합니다. Promise는 아직 완료되지 않은 작업을 나타냅니다.
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+개발자 여러분, 웹 개발의 역사에서 중요한 순간에 대비하십시오.
+
+<em>[드럼롤 시작]</em>
+
+JavaScript에 Promise가 도착했습니다!
+
+<em>[불꽃이 터지고, 위에서 반짝이는 종이 비가 내리고, 군중이 열광합니다]</em>
+
+이 시점에서 여러분은 다음 범주 중 하나에 속합니다.
+
+- 사람들이 여러분 주위에서 환호하고 있지만, 여러분은 왜 야단들인지 잘 모릅니다. 아마도 여러분은 "Promise"가 무엇인지 확실히 모를 수도 있습니다. 어깨를 으쓱해 보지만 반짝이는 종이의 무게가 어깨를 짓누릅니다. 그렇다면 걱정하지 마십시오. 제가 왜 이 일에 관심을 가져야 하는지 알아내는 데 오랜 시간이 걸렸습니다. 아마도 여러분은 [처음부터](#whats-all-the-fuss-about) 시작하고 싶을 것입니다.
+- 여러분은 공중에 주먹을 날립니다! 시간 맞나요? 이전에 이러한 Promise 기능을 사용한 적이 있지만 모든 구현에 약간 다른 API가 있다는 것이 귀찮습니다. 공식 JavaScript 버전에 대한 API는 무엇입니까? 아마도 [용어](#promise-terminology)부터 시작하고 싶을 것입니다.
+- 여러분은 이미 이것을 알고 있었고 이것이 마치 새로운 것인 것처럼 펄쩍펄쩍 뛰는 사람들을 비웃을 것입니다. 잠시 자신의 우월성을 만끽했으면 [API 참조](#promise-api-reference) 페이지로 바로 이동하세요.
+
+## 이런 호들갑은 어디서 오는 것일까요? {: #whats-all-the-fuss-about }
+
+JavaScript는 단일 스레드입니다. 즉, 두 비트의 스크립트를 동시에 실행할 수 없습니다. 차례로 실행해야 하는 것이죠. 브라우저에서 JavaScript는 브라우저마다 차이가 있는 많은 요소들과 스레드를 공유합니다. 그러나 일반적으로 JavaScript는 페인팅, 스타일 업데이트 및 사용자 작업 처리(예: 텍스트 강조 표시 및 양식 컨트롤과의 상호 작용)와 동일한 대기열에 있습니다. 이러한 것들 중 하나에서 이루어지는 작업으로 인해 다른 작업들이 지연됩니다.
+
+인간으로서 여러분은 멀티스레드입니다. 여러 손가락으로 입력할 수 있고 운전하면서 대화할 수 있습니다. 우리가 처리해야 하는 유일한 차단 기능은 재채기입니다. 재채기하는 동안에는 현재의 모든 활동을 일시 중단해야 하니까요. 특히 운전을 하면서 대화하려고 할 때는 상당히 짜증스럽습니다. 재채기하는 코드를 작성하고 싶지는 않을 것입니다.
+
+이 문제를 해결하기 위해 아마도 이벤트와 콜백을 사용했을 것입니다. 다음과 같은 이벤트가 있습니다.
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // woo yey image loaded
+});
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+이것은 전혀 재채기가 아닙니다. 이미지를 얻고 몇 개의 리스너를 추가하면 JavaScript는 해당 리스너 중 하나가 호출될 때까지 실행을 중지할 수 있습니다.
+
+불행히도 위의 예에서는 이벤트를 수신 대기하기 전에 이벤트가 발생했을 수 있으므로 이미지의 "complete" 속성을 사용하여 이 문제를 해결해야 합니다.
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // woo yey image loaded
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+이 코드는 우리가 수신 대기할 기회를 얻기 전에 오류가 발생한 이미지를 포착하지 못합니다. 불행히도 DOM으로는 그렇게 할 수 있는 방법이 없습니다. 또한 하나의 이미지를 로드하고 있습니다. 여러 이미지가 로드되는 경우에 이를 알고 싶다면 상황이 훨씬 더 복잡해집니다.
+
+## 이벤트가 항상 최선의 방법은 아닙니다
+
+이벤트는 `keyup`, `touchstart` 등과 같이 동일한 객체에서 여러 번 발생할 수 있는 상황에서는 매우 좋습니다. 이러한 이벤트에서는 리스너를 연결하기 전에 발생한 상황에 크게 신경 쓰지 않습니다. 그러나 비동기 성공/실패와 관련해서는 이상적으로 다음과 같은 코드가 필요합니다.
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // loaded
+}).orIfFailedCallThis(function() {
+  // failed
+});
+
+// and…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // all loaded
+}).orIfSomeFailedCallThis(function() {
+  // one or more failed
+});
+```
+
+이것이 Promise가 하는 역할이지만 명명하기가 더 좋습니다. HTML 이미지 요소에 Promise를 반환하는 "ready" 메서드가 있다면 다음과 같이 할 수 있습니다.
+
+```js
+img1.ready()
+.then(function() {
+  // loaded
+}, function() {
+  // failed
+});
+
+// and…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // all loaded
+}, function() {
+  // one or more failed
+});
+```
+
+가장 기본적인 Promise는 다음을 제외하고는 이벤트 리스너와 비슷합니다.
+
+- Promise는 한 번만 성공하거나 실패할 수 있습니다. 두 번 성공하거나 실패할 수 없으며 성공에서 실패로 또는 그 반대로 전환할 수도 없습니다.
+- Promise가 성공하거나 실패하고 나중에 성공/실패 콜백을 추가하면 이벤트가 더 일찍 발생했더라도 올바른 콜백이 호출됩니다.
+
+이것은 비동기 성공/실패에 매우 유용한데, 무언가를 사용할 수 있게 된 정확한 시간보다는 결과에 반응하는 데 더 관심이 있기 때문입니다.
+
+## Promise 용어 {: #promise-terminology }
+
+[Domenic Denicola](https://twitter.com/domenic)가 이 기사의 첫 초안을 검토하고 용어 사용에 대해 저에게 "F" 점수를 주었습니다. 그는 나를 붙잡아두고 [States and Fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md)를 100번이나 외우라고 강요하고 제 부모님에게 우려스러운 편지를 썼습니다. 그럼에도 불구하고 여전히 많은 용어가 혼동되지만 기본 사항은 다음과 같습니다.
+
+Promise는 다음과 같을 수 있습니다.
+
+- **처리됨** - Promise와 관련된 작업이 성공했습니다.
+- **거부됨** - Promise와 관련된 작업이 실패했습니다.
+- **보류 중** - 아직 처리 또는 거부되지 않았습니다.
+- **해결됨** - 처리 또는 거부되었습니다.
+
+[사양](https://www.ecma-international.org/ecma-262/#sec-promise-objects)에서도 `then` 메서드가 있다는 점에서 Promise과 유사한 객체를 설명하기 위해 **thenable**이라는 용어를 사용합니다. 이 용어는 전 잉글랜드 축구 감독인 [Terry Venables](https://en.wikipedia.org/wiki/Terry_Venables)를 생각나게 하므로 최대한 사용을 자제하겠습니다.
+
+## JavaScript에 Promise가 도착했습니다!
+
+Promise는 다음과 같은 라이브러리 형태로 한동안 사용되었습니다.
+
+- [Q](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+위의 라이브러리와 JavaScript Promise는 [Promises/A+](https://github.com/promises-aplus/promises-spec)라고 하는 표준화된 공통 동작을 공유합니다. jQuery 사용자라면 이와 유사하게 [Deferreds](https://api.jquery.com/category/deferred-object/)라는 것을 가지고 있을 것입니다. 그러나 Deferreds는 Promise/A+를 따르지 않으므로 [미묘하게 다르고 유용성이 떨어](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/)지므로 주의하세요. jQuery에도 [Promise 유형](https://api.jquery.com/Types/#Promise)이 있지만 이것은 Deferred에 포함된 요소이며 동일한 문제를 가지고 있습니다.
+
+Promise의 구현은 표준화된 동작을 따르지만 전체 API는 다릅니다. JavaScript Promise는 API에서 RSVP.js와 유사합니다. Promise를 만드는 방법은 다음과 같습니다.
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // do a thing, possibly async, then…
+
+  if (/* everything turned out fine */) {
+    resolve("Stuff worked!");
+  }
+  else {
+    reject(Error("It broke"));
+  }
+});
+```
+
+Promise 생성자는 하나의 인수, 두 개의 매개변수가 있는 콜백(resolve 및 reject)을 사용합니다. 콜백 내에서 비동기화와 같은 작업을 수행한 다음 모든 것이 정상이면 resolve를 호출하고 그렇지 않으면 reject를 호출합니다.
+
+구식의 일반 JavaScript에서 `throw`와 마찬가지로 Error 객체로 거부하는 것이 일반적이지만 필수는 아닙니다. Error 객체의 이점은 스택 추적을 캡처하여 디버깅 도구를 더 유용하게 만든다는 것입니다.
+
+이 Promise를 사용하는 방법은 다음과 같습니다.
+
+```js
+promise.then(function(result) {
+  console.log(result); // "Stuff worked!"
+}, function(err) {
+  console.log(err); // Error: "It broke"
+});
+```
+
+`then()`은 두 개의 인수, 성공 사례를 위한 하나의 콜백과 실패 사례를 위한 또 다른 콜백을 사용합니다. 둘 모두 선택 사항이므로 성공 또는 실패 사례에 대해서만 콜백을 추가할 수 있습니다.
+
+JavaScript Promise는 DOM에서 "Futures"로 시작했다가 "Promises"로 이름이 바뀌었고 마침내 JavaScript로 들어왔습니다. DOM이 아닌 JavaScript에서 이를 사용하는 것이 좋은데, Node.js와 같은 브라우저가 아닌 JS 컨텍스트에서 사용할 수 있기 때문입니다(코어 API에서 이를 사용하는지 여부는 또 다른 문제임).
+
+JavaScript 기능이지만 DOM은 이를 두려움 없이 사용합니다. 실제로, 비동기 성공/실패 메서드가 있는 모든 새로운 DOM API는 Promise를 사용합니다. [Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota), [Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready), [ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17), [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options), [Streams](https://github.com/whatwg/streams#basereadablestream) 등에서 이미 그렇게 되고 있습니다.
+
+## 브라우저 지원 및 폴리필
+
+현재, 브라우저에서 이미 Promise가 구현되고 있습니다.
+
+Chrome 32, Opera 19, Firefox 29, Safari 8 및 Microsoft Edge부터 기본적으로 Promise가 활성화됩니다.
+
+완전한 Promise 구현이 없는 브라우저가 사양을 준수하도록 하거나 다른 브라우저와 Node.js에 Promise를 추가하려면 [polyfill](https://github.com/jakearchibald/ES6-Promises#readme)(2k gzipped)을 확인하세요.
+
+## 다른 라이브러리와의 호환성
+
+JavaScript Promises API는 `then()`가 있는 모든 요소를 Promise와 유사한 것으로 취급하므로(또는 Promise 영역의 표현으로 *sigh*에서 `thenable`), Q Promise를 반환하는 라이브러리를 사용하는 경우에 이는 문제가 없으며 새로운 JavaScript Promise에서 잘 작동합니다.
+
+언급했듯이 jQuery의 Deferreds는 그다지 …도움이 되지 않습니다. 다행스럽게도 이를 표준 Promise로 캐스트할 수 있으며, 가능한 한 빨리 그렇게 하는 것이 좋습니다.
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+여기서 jQuery의 `$.ajax`는 Deferred를 반환합니다. `then()` 메서드가 있기 때문에 `Promise.resolve()`는 이를 JavaScript Promise로 변환할 수 있습니다. 그러나 때로 deferreds는 콜백에 여러 인수를 전달하는데, 예를 들면 다음과 같습니다.
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+반면 JS Promise는 첫 번째를 제외한 모든 것을 무시합니다.
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+다행스럽게도 이것이 일반적으로 원하는 것이거나 최소한 원하는 것에 접근할 수 있게 해줍니다. 또한 jQuery는 Error 객체를 거부로 전달하는 규칙을 따르지 않습니다.
+
+## 복잡한 비동기 코드가 더 쉬워졌습니다
+
+이제, 코딩을 해보겠습니다. 다음을 원한다고 가정합니다.
+
+1. 로딩을 나타내기 위해 스피너를 시작합니다.
+2. 각 챕터의 제목과 URL을 제공하는 스토리에 대해 일부 JSON을 가져옵니다.
+3. 페이지에 제목을 추가합니다.
+4. 각 챕터를 가져옵니다.
+5. 페이지에 스토리를 추가합니다.
+6. 스피너를 중지합니다.
+
+… 그리고 도중에 문제가 발생하면 사용자에게 알립니다. 그 시점에서 스피너도 중단시켜야 할 것입니다. 그렇지 않으면 회전을 계속 보느라 현기증이 나고 다른 UI와 충돌할 것입니다.
+
+물론 [HTML 역할을 하는 것이 더 빠르기 때문에](https://jakearchibald.com/2013/progressive-enhancement-is-faster/) 스토리를 전달하기 위해 JavaScript를 사용하지 않을 것입니다. 그러나 이 패턴은 API를 다룰 때 꽤 일반적입니다. 즉, 여러 데이터를 가져온 다음 모두 끝나면 특정 작업을 수행합니다.
+
+먼저 네트워크에서 데이터 가져오기를 처리해 보겠습니다.
+
+## XMLHttpRequest의 Promise 처리
+
+이전 API는 이전 버전과 호환되는 방식으로 가능한 경우 Promise를 사용하도록 업데이트됩니다. `XMLHttpRequest`가 주요 후보지만 그 동안 GET 요청을 만드는 간단한 함수를 작성해 보겠습니다.
+
+```js
+function get(url) {
+  // Return a new promise.
+  return new Promise(function(resolve, reject) {
+    // Do the usual XHR stuff
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // This is called even on 404 etc
+      // so check the status
+      if (req.status == 200) {
+        // Resolve the promise with the response text
+        resolve(req.response);
+      }
+      else {
+        // Otherwise reject with the status text
+        // which will hopefully be a meaningful error
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Handle network errors
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Make the request
+    req.send();
+  });
+}
+```
+
+이제 사용해보겠습니다.
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.error("Failed!", error);
+})
+```
+
+이제 `XMLHttpRequest`를 수동으로 입력하지 않고 HTTP 요청을 수행할 수 있습니다. 단어들이 붙어 있어 짜증을 일으키는 `XMLHttpRequest`를 덜 볼수록 삶은 더 행복해집니다.
+
+## 체인 연결
+
+`then()`이 이야기의 끝이 아니므로 `then`을 함께 연결하여 값을 변환하거나 추가 비동기 작업을 차례로 실행할 수 있습니다.
+
+### 값 변환
+
+단순히 새 값을 반환하여 값을 변환할 수 있습니다.
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+실용적인 예를 위해 다음으로 돌아가 보겠습니다.
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+})
+```
+
+응답은 JSON이지만 현재 일반 텍스트로 받고 있습니다. JSON [`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType)을 사용하도록 get 함수를 변경할 수 있지만 Promise 영역에서도 이를 해결할 수 있습니다.
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+`JSON.parse()`는 단일 인수를 취하고 변환된 값을 반환하므로 바로가기를 만들 수 있습니다.
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+실제로 `getJSON()` 함수를 정말 쉽게 만들 수 있습니다.
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+`getJSON()`은 여전히 URL을 가져온 다음 응답을 JSON으로 구문 분석하는 Promise를 반환합니다.
+
+### 비동기 작업 대기열
+
+`then`을 연결하여 비동기 작업을 순차적으로 실행할 수도 있습니다.
+
+`then()` 콜백에서 무언가를 반환하는 것은 약간의 마법과 같습니다. 값을 반환하면 다음 `then()`이 해당 값으로 호출됩니다. 그러나 Promise와 같은 것을 반환하면 다음 `then()`가 여기에 대기하며 해당 Promise가 (성공/실패)를 처리할 때만 호출됩니다. 예를 들면 다음과 같습니다.
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Got chapter 1!", chapter1);
+})
+```
+
+여기서는 `story.json`에 대해 요청할 일단의 URL을 제공하는 비동기 요청을 만들고 그 중 첫 번째를 요청합니다. 바로 이 때 Promise가 단순한 콜백 패턴에서 두드러지기 시작합니다.
+
+챕터를 가져오는 바로가기 메서드를 만들 수도 있습니다.
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// and using it is simple:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+`getChapter`가 호출될 때까지 `story.json`을 다운로드하지 않지만 다음 번에 `getChapter`가 호출될 때 스토리 Promise를 재사용하여 `story.json`이 한 번만 가져와지도록 합니다.  이게 바로 Promise죠!
+
+## 오류 처리
+
+앞서 보았듯이 `then()`은 성공에 대한 인수와 실패에 대한 인수(또는 Promise 영역의 표현으로 처리 및 거부)의 두 가지 인수를 취합니다.
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+`catch()`를 사용할 수도 있습니다.
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).catch(function(error) {
+  console.log("Failed!", error);
+})
+```
+
+`catch()`에는 특별한 것이 없으며 `then(undefined, func)`에 대한 장식 정도이지만 더 읽기 쉽습니다. 위의 두 코드 예제는 동일하게 동작하지 않습니다. 후자는 다음과 동일합니다.
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).then(undefined, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+그 차이는 미묘하지만 대단히 유용합니다. Promise 거부는 거부 콜백(또는 동등하므로 `catch()`)을 사용하여 다음 `then()`으로 건너뜁니다. `then(func1, func2)`를 사용하면 `func1` 또는 `func2`가 호출되고 둘 모두 호출되지 않습니다. 그러나 `then(func1).catch(func2)`를 사용하면 `func1`이 거부되는 경우에 둘 모두 호출되는데, 체인에서 개별적인 단계이기 때문입니다. 다음을 수행하세요.
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Don't worry about it");
+}).then(function() {
+  console.log("All done!");
+})
+```
+
+위의 흐름은 일반 JavaScript try/catch와 매우 유사하며 "try" 내에서 발생하는 오류는 즉시 `catch()` 블록으로 이동합니다. 다음은 위의 순서도입니다(저는 순서도를 좋아합니다).
+
+<div style="position: relative; padding-top: 93%;">
+  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
+</div>
+
+처리되는 Promise의 경우 파란색 선을 따르고, 거부되는 Promise의 경우 빨간색 선을 따릅니다.
+
+### JavaScript 예외 및 Promise
+
+거부는 Promise가 명시적으로 거부될 때 발생하지만 생성자 콜백에서 오류가 발생하는 경우에도 암시적으로 발생합니다.
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse throws an error if you feed it some
+  // invalid JSON, so this implicitly rejects:
+  resolve(JSON.parse("This ain't JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // This never happens:
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+이것은 Promise 생성자 콜백 내에서 모든 Promise 관련 작업을 수행하는 것이 유용하다는 것을 의미합니다. 오류가 자동으로 포착되어 거부되니까요.
+
+`then()` 콜백에서 발생한 오류도 마찬가지입니다.
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // This never happens, '/' is an HTML page, not JSON
+  // so JSON.parse throws
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+### 실제 오류 처리
+
+스토리와 챕터에서 catch를 사용하여 사용자에게 오류를 표시할 수 있습니다.
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Failed to show chapter");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+`story.chapterUrls[0]` 가져오기가 실패하면(예: http 500 또는 사용자가 오프라인 상태임) 응답을 JSON으로 구문 분석하려고 시도하는 `getJSON()`의 콜백을 포함하여 이어지는 모든 성공 콜백을 건너뛰고 페이지에 chapter1.html을 추가하는 콜백도 건너뜁니다. 결과적으로 이전 작업 중 하나라도 실패하면 "챕터 표시 실패"가 페이지에 추가됩니다.
+
+JavaScript의 try/catch와 마찬가지로 오류가 포착되고 후속 코드가 계속되므로 스피너가 항상 숨겨지게 되는데, 이것이 우리가 원하는 것입니다. 위의 내용은 다음의 비차단 비동기 버전이 됩니다.
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Failed to show chapter");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+오류로부터 복구하지 않고 단순히 로깅 목적으로 `catch()`를 원할 수 있습니다. 이렇게 하려면 오류를 다시 발생시키세요. `getJSON()` 메서드에서 그렇게 할 수 있습니다:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("getJSON failed for", url, err);
+    throw err;
+  });
+}
+```
+
+그래서 한 챕터를 가져올 수 있었지만 우리는 모든 것을 원합니다. 그렇게 해보겠습니다.
+
+## 병렬 처리 및 시퀀싱: 두 가지 장점을 모두 활용
+
+비동기를 생각하는 것은 쉽지 않습니다. 원하는 대로 잘 되지 않으면 코드가 동기식인 것처럼 작성해 보세요. 이 경우 다음과 같습니다.
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("All done");
+}
+catch (err) {
+  addTextToPage("Argh, broken: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch { id: 'promises-sync-example', height: 480 } %}
+
+제대로 작동합니다! 그러나 이것은 동기식이며 다운로드되는 동안 브라우저가 잠깁니다. 이 작업을 비동기식으로 만들기 위해 `then()`을 사용하여 작업이 차례로 일어나게 합니다.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // TODO: for each url in story.chapterUrls, fetch & display
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+그러나 챕터 URL을 반복하고 순서대로 가져오려면 어떻게 할 수 있을까요? 이것은 **작동하지 않습니다**:
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Fetch chapter
+  getJSON(chapterUrl).then(function(chapter) {
+    // and add it to the page
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`forEach`는 비동기를 인식하지 않으므로 어떤 순서로든 다운로드되는 순서로 챕터가 표시됩니다. 이것이 기본적으로 Pulp Fiction이 작성된 방식이지만 여기서는 Pulp Fiction이 아니므로 수정하겠습니다.
+
+### 시퀀스 만들기
+
+`chapterUrls` 배열을 Promise의 시퀀스로 바꾸려는 것이 우리가 하려는 것입니다. 이를 위해 `then()`을 사용할 수 있습니다.
+
+```js
+// Start off with a promise that always resolves
+var sequence = Promise.resolve();
+
+// Loop through our chapter urls
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Add these actions to the end of the sequence
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`Promise.resolve()`를 본 것은 이번이 처음입니다. 이것은 사용자가 제공하는 어떤 값이든 확인하는 Promise를 생성합니다. 여기에 `Promise`의 인스턴스를 전달하면 간단히 반환됩니다(**참고:** 이것은 일부 구현이 아직 따르지 않는 사양의 변경 사항입니다). Promise와 같은 것에 이를 전달하면(`then()` 메서드가 있음) 동일한 방식으로 처리/거부되는 실제 `Promise`가 만들어집니다. 다른 값(예: `Promise.resolve('Hello')`)을 전달하면 해당 값으로 처리되는 Promise가 생성됩니다. 위와 같이 값 없이 호출하면 "undefined"로 처리됩니다.
+
+`Promise.reject(val)`도 있는데, 이는 사용자가 제공하는(또는 정의되지 않은) 값으로 거부되는 Promise를 생성합니다.
+
+[`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)를 사용하여 위의 코드를 정리할 수 있습니다.
+
+```js
+// Loop through our chapter urls
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Add these actions to the end of the sequence
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+이것은 이전 예제와 동일하지만 별도의 "sequence" 변수가 필요하지 않습니다. 우리의 reduce 콜백은 배열의 각 항목에 대해 호출됩니다. "sequence"는 처음에는 `Promise.resolve()`이지만 나머지 호출에 대해서는 "sequence"가 이전 호출에서 반환된 내용이 됩니다. `array.reduce`는 배열을 단일 값으로 낮추는 데 정말 유용하며, 이 경우에는 이것이 Promise입니다.
+
+모두 하나로 정리해 보겠습니다.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Once the last chapter's promise is done…
+    return sequence.then(function() {
+      // …fetch the next chapter
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // and add it to the page
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-example', height: 480 } %}
+
+여기에 동기화 버전의 완전히 비동기화된 버전이 있습니다. 하지만 우리는 더 잘할 수 있습니다. 현재 페이지가 다음과 같이 다운로드되고 있습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+브라우저는 한 번에 여러 항목을 다운로드하는 데 능숙하므로 챕터를 차례로 다운로드하면 성능이 저하됩니다. 우리가 원하는 것은 모두 동시에 다운로드한 다음 모두 완료되면 처리하는 것입니다. 다행스럽게도 이를 위한 API가 있습니다.
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+`Promise.all`은 Promise의 배열을 취하고 모두 성공적으로 완료될 때 처리하는 Promise를 생성합니다. 전달한 Promise와 동일한 순서로 결과 배열(Promise가 처리되는 대상에 상관없이)을 얻습니다.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Take an array of promises and wait on them all
+  return Promise.all(
+    // Map our array of chapter urls to
+    // an array of chapter json promises
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Now we have the chapters jsons in order! Loop through…
+  chapters.forEach(function(chapter) {
+    // …and add to the page
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened so far
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-all-example', height: 480 } %}
+
+연결에 따라 하나씩 로드하는 것보다 몇 초 더 빠를 수 있으며 첫 번째 시도보다 코드가 적습니다. 챕터는 어떤 순서로든 다운로드할 수 있지만 올바른 순서로 화면에 나타납니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+그러나 여전히 인지된 성능을 향상시킬 수 있습니다. 챕터 1이 도착하면 이를 페이지에 추가해야 합니다. 이렇게 하면 나머지 챕터가 도착하기 전에 사용자가 읽기를 시작할 수 있습니다. 챕터 3이 도착하면 이를 페이지에 추가하지 않습니다. 왜냐하면 사용자가 챕터 2가 누락된 것을 인식하지 못할 수도 있기 때문입니다. 챕터 2가 도착하면 챕터 2와 3을 추가하는 식으로 진행할 수 있습니다.
+
+이를 위해 동시에 모든 챕터에 대한 JSON을 가져온 다음 문서에 추가할 시퀀스를 생성합니다.
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Map our array of chapter urls to
+  // an array of chapter json promises.
+  // This makes sure they all download in parallel.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Use reduce to chain the promises together,
+      // adding content to the page for each chapter
+      return sequence
+      .then(function() {
+        // Wait for everything in the sequence so far,
+        // then wait for this chapter to arrive.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-best-example', height: 480 } %}
+
+이렇게 우리는 두 가지의 장점을 모두 얻었습니다! 모든 콘텐츠를 전달하는 데 동일한 시간이 걸리지만 사용자는 첫 번째 콘텐츠를 더 빨리 받습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+이 간단한 예에서는 모든 챕터가 거의 같은 시간에 도착하지만 한 번에 하나씩 표시할 때의 이점은 더 많고 더 큰 챕터에서 커집니다.
+
+[Node.js 스타일 콜백이나 이벤트](https://gist.github.com/jakearchibald/0e652d95c07442f205ce)로 위의 작업을 수행하면 코드가 약 두 배가 되지만 더 중요한 것은 따라하기가 쉽지 않다는 것입니다. 그러나 이것이 Promise에 대한 이야기의 끝이 아닙니다. 다른 ES6 기능과 결합될 때 훨씬 더 쉬워집니다.
+
+## 보너스 라운드: 확장된 기능
+
+이 글을 처음 작성한 이후로 Promise의 활용 가능성이 크게 확장되었습니다. Chrome 55 이후로 비동기 함수는 Promise 기반 코드가 동기적인 것처럼 작성될 수 있게 해주면서도 메인 스레드를 차단하지 않습니다. 이에 대한 자세한 내용은 [제가 작성한 비동기 함수 문서](/async-functions)를 참조하세요. 주요 브라우저에서 Promise 및 비동기 함수 모두가 광범위하게 지원됩니다. 자세한 내용은 MDN의 [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) 및 [비동기 함수](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) 참조에서 찾을 수 있습니다.
+
+이 글을 교정하고 수정/추천을 해주신 Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp, Addy Osmani, Arthur Evans, Yutaka Hirano에게 깊은 감사를 드립니다.
+
+또한 기사의 [여러 부분](https://github.com/html5rocks/www.html5rocks.com/pull/921/files)을 [업데이트해주신 Mathias Bynens](https://mathiasbynens.be/)에게도 감사드립니다.
diff --git a/src/site/content/ko/blog/read-files/index.md b/src/site/content/ko/blog/read-files/index.md
new file mode 100644
index 00000000000..a292530e6e4
--- /dev/null
+++ b/src/site/content/ko/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: JavaScript에서 파일 읽기
+subhead: 파일 선택, 파일 메타데이터 및 콘텐츠 읽기, 읽기 진행률 모니터링 방법.
+description: |2-
+
+  파일 선택, 파일 메타데이터 및 콘텐츠 읽기, 읽기 진행률 모니터링을 수행하는 방법.
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+웹에서 가장 일반적으로 사용되는 기능 중 하나로, 사용자는 자신의 로컬 장치에서 파일을 선택하고 상호 작용할 수 있습니다. 이를 통해 사용자는 파일을 선택하여 서버에 업로드할 수 있습니다(예: 사진 업로드 또는 세금 문서 제출 등). 그러나 사이트에서 네트워크를 통해 데이터를 전송할 필요 없이 파일을 읽고 조작할 수도 있습니다.
+
+## 최신 파일 시스템 액세스 API
+
+파일 시스템 액세스 API는 사용자의 로컬 시스템에 있는 파일과 디렉토리를 읽고 쓸 수 있는 간편한 방법을 제공합니다. 이는 현재 Chrome 또는 Edge와 같은 대부분의 Chromium 파생 브라우저에서 사용할 수 있습니다. 자세한 내용은 [파일 시스템 액세스 API](/file-system-access/) 문서를 참조하세요.
+
+파일 시스템 액세스 API는 아직 모든 브라우저와 호환되지 않기 때문에 새로운 API를 사용할 수 있는 곳이라면 어디에서나 사용하지만 그렇지 않은 경우에는 레거시 접근 방식으로 대체하는 도우미 라이브러리인 [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access)를 확인해 보세요.
+
+## 파일 작업, 고전적인 방식
+
+이 가이드에서는 다음을 수행하는 방법을 보여줍니다.
+
+- 파일 선택
+    - [HTML 입력 요소 사용](#select-input)
+    - [끌어서 놓기 영역 사용](#select-dnd)
+- [파일 메타데이터 읽기](#read-metadata)
+- [파일 내용 읽기](#read-content)
+
+## 파일 선택 {: #select }
+
+### HTML 입력 요소 {: #select-input }
+
+사용자가 파일을 선택할 수 있도록 하는 가장 쉬운 방법은 모든 주요 브라우저에서 지원되는 `<input type="file">` 요소를 사용하는 것입니다. 이를 클릭하면 사용자가 운영 체제의 내장 파일 선택 UI를 사용하여 하나의 파일, 또는 [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) 속성이 포함된 경우 여러 파일을 선택할 수 있습니다. 사용자가 하나 또는 여러 파일의 선택을 마치면 이 요소의 `change` 이벤트가 시작됩니다. [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) 객체인 `event.target.files`에서 파일 목록에 액세스할 수 있습니다. `FileList`의 각 항목은 [`File`](https://developer.mozilla.org/docs/Web/API/File) 객체입니다.
+
+```html
+<!-- The `multiple` attribute lets users select multiple files. -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %} [`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read) 메서드가 해당 사용 사례에 효과적인 대안인지 확인하세요. 읽기와 별도로 파일에 다시 쓸 수 있도록 파일 핸들도 제공하기 때문입니다. 이 메서드는 [폴리필](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files)할 수 있습니다. {% endAside %}
+
+이 예에서는 사용자가 운영 체제의 내장 파일 선택 UI를 사용하여 여러 파일을 선택한 다음 선택한 각 파일을 콘솔에 기록할 수 있습니다.
+
+{% Glitch { id: 'input-type-file', height: 480 } %}
+
+#### 사용자가 선택할 수 있는 파일 유형 제한 {: #accept }
+
+경우에 따라 사용자가 선택할 수 있는 파일 유형을 제한해야 할 수 있습니다. 예를 들어 이미지 편집 앱은 텍스트 파일이 아닌 이미지만 허용해야 합니다. 이를 위해 입력 요소에 [`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) 속성을 추가하여 어떤 파일이 허용되는지 지정할 수 있습니다.
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### 사용자 지정 드래그 앤 드롭 {: #select-dnd }
+
+일부 브라우저에서 `<input type="file">` 요소는 사용자가 파일을 앱으로 끌어다 놓을 수 있도록 하는 드롭 대상이기도 합니다. 그러나 드롭 대상이 작아 사용하기 어려울 수 있습니다. 그래서, `<input type="file">` 요소를 사용하여 핵심 기능을 제공한 후에는 큰 사용자 지정 끌어서 놓기 표면을 제공할 수 있습니다.
+
+{% Aside %} [`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration) 메서드가 해당 사용 사례에 효과적인 대안인지 확인하세요. 읽기와 별도로 파일에 다시 쓸 수 있도록 파일 핸들도 제공하기 때문입니다. {% endAside %}
+
+#### 드롭 영역 선택 {: #choose-drop-zone }
+
+드롭 표면은 애플리케이션의 디자인에 따라 다릅니다. 창의 일부만 드롭 표면이 되도록 하거나 잠재적으로 전체 창을 드롭 표면으로 원할 수 있습니다.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="이미지 압축 웹 앱인 Squoosh의 스크린샷.", width="800", height="589" %}   <figcaption>     Squoosh는 전체 창을 드롭 영역으로 만듭니다.   </figcaption></figure>
+
+Squoosh를 사용하면 사용자가 창의 아무 곳이나 이미지를 끌어다 놓을 수 있으며 **이미지 선택**을 클릭하면 `<input type="file">` 요소가 호출됩니다. 드롭 영역으로 무엇을 선택하든 사용자가 파일을 해당 표면으로 끌어다 놓을 수 있다는 점을 분명히 알도록 해야 합니다.
+
+#### 드롭 영역 정의 {: #define-drop-zone }
+
+요소를 드래그 앤 드롭 영역으로 설정하려면 [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event) 및 [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)이라는 두 가지 이벤트에 수신 대기해야 합니다. `dragover` 이벤트는 드래그 앤 드롭 작업으로 파일 복사본이 만들어진다는 것을 시각적으로 나타내도록 브라우저 UI를 업데이트합니다. `drop` 이벤트는 사용자가 파일을 표면에 놓은 후에 시작됩니다. 입력 요소와 유사하게 [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) 객체인 `event.dataTransfer.files`에서 파일 목록에 액세스할 수 있습니다. `FileList`의 각 항목은 [`File`](https://developer.mozilla.org/docs/Web/API/File) 객체입니다.
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // Style the drag-and-drop as a "copy file" operation.
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+[`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) 및 [`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)는 브라우저의 기본 동작이 발생하지 않도록 하고 대신 코드가 실행되도록 합니다. 그렇지 않으면 브라우저가 페이지에서 벗어나 사용자가 브라우저 창에 놓은 파일을 열게 됩니다.
+
+{# 이 예제는 임베드로 작동하지 않습니다. #}
+
+라이브 데모를 보려면 [사용자 지정 드래그 앤 드롭](https://custom-drag-and-drop.glitch.me/)을 확인하세요.
+
+### 디렉토리는 어떻습니까? {: #directories }
+
+불행히도 현재 디렉토리에 액세스할 수 있는 좋은 방법은 없습니다.
+
+`<input type="file">` 요소의 [`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory) 속성을 사용하면 사용자가 디렉토리를 선택할 수 있습니다. 일부 Chromium 기반 브라우저 및 데스크톱 Safari에서는 지원되지만 브라우저 호환성에 대한 [상충되는](https://caniuse.com/#search=webkitdirectory) 보고가 있습니다.
+
+{% Aside %} [`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents) 메서드가 해당 사용 사례에 효과적인 대안인지 확인하세요. 읽기와 별도로 디렉토리에 다시 쓸 수 있도록 디렉토리 핸들도 제공하기 때문입니다. 이 메서드는 [폴리필](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories)할 수 있습니다. {% endAside %}
+
+드래그 앤 드롭이 활성화된 경우 사용자는 드롭 영역에 디렉토리를 끌어가려고 할 수 있습니다. 드롭 이벤트가 발생하면 여기에 디렉토리에 대한 `File` 객체가 포함되지만 디렉토리 내의 어떤 파일에도 액세스할 수 없습니다.
+
+## 파일 메타데이터 읽기 {: #read-metadata }
+
+[`File`](https://developer.mozilla.org/docs/Web/API/File) 객체에는 파일에 관한 여러 메타데이터 속성이 포함되어 있습니다. 대부분의 브라우저는 파일 이름, 파일 크기 및 MIME 유형을 제공하지만 플랫폼에 따라 브라우저마다 다르거나 추가적인 정보를 제공할 수 있습니다.
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // Not supported in Safari for iOS.
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // Not supported in Firefox for Android or Opera for Android.
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // Unknown cross-browser support.
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+[`input-type-file`](https://input-type-file.glitch.me/) Glitch 데모에서 실제 작동하는 모습을 볼 수 있습니다.
+
+## 파일 내용 읽기 {: #read-content }
+
+파일을 읽으려면 [`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader)를 사용하세요. 그러면 `File` 객체의 콘텐츠를 메모리로 읽을 수 있습니다. 파일을 [배열 버퍼](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer), [데이터 URL](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) 또는 [텍스트](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText)로 읽도록 `FileReader`에 지시할 수 있습니다.
+
+```js
+function readImage(file) {
+  // Check if the file is an image.
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+위의 예는 사용자가 제공한 `File`을 읽어 데이터 URL로 변환하고 해당 데이터 URL을 사용하여 `img` 요소에 이미지를 표시합니다. 사용자가 이미지 파일을 선택했는지 확인하는 방법을 보려면 [`read-image-file`](https://read-image-file.glitch.me/) Glitch를 살펴보세요.
+
+{% Glitch { id: 'read-image-file', height: 480 } %}
+
+### 파일 읽기 진행률 모니터링 {: #monitor-progress }
+
+대용량 파일을 읽을 때 읽기 진행 정도를 나타내는 UX를 제공하면 도움이 될 수 있습니다. 이를 위해 `FileReader`에서 제공하는 [`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event) 이벤트를 사용합니다. `progress` 이벤트는 두 가지 속성, 즉 읽은 양인 `loaded`와 읽어야 할 총량인 `total`을 제공합니다.
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // Do something with result
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+[Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)의 Vincent Botta 제공 영웅 이미지
diff --git a/src/site/content/ko/blog/referrer-best-practices/index.md b/src/site/content/ko/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..0c9d1d114f5
--- /dev/null
+++ b/src/site/content/ko/blog/referrer-best-practices/index.md
@@ -0,0 +1,349 @@
+---
+layout: post
+title: 리퍼러 및 리퍼러 정책 모범 사례
+subhead: 리퍼러 정책을 설정하고 들어오는 요청에서 리퍼러를 사용하는 모범 사례
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: |
+  `strict-origin-when-cross-origin` 의 리퍼러 정책 설정을 고려하세요. 출처 간 데이터 누출 위험을 완화하면서 리퍼러의 유용성을 많은 부분 유지합니다.
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## 요약
+
+- 예상치 못한 출처 간 정보 누출로 웹 사용자의 개인 정보가 침해될 수 있습니다. 여기서 보호 리퍼러 정책이 도움이 될 수 있습니다.
+- `strict-origin-when-cross-origin`의 리퍼러 정책 설정을 고려하세요. 출처 간 데이터 누출 위험을 완화하면서 리퍼러의 유용성을 많은 부분 유지합니다.
+- 교차 사이트 요청 위조(CSRF) 보호 목적으로 리퍼러를 사용하지 마세요. 대신, [CSRF 토큰](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)을 사용하고 다른 헤더를 추가 보안 계층으로 사용하세요.
+
+{% Aside %} 시작하기 전에:
+
+- "사이트"와 "출처"의 차이점에 대해 확실히 모르겠으면 ["same-site" 및 "same-origin" 이해하기](/same-site-same-origin/)를 확인해 보세요.
+- 사양의 원래 맞춤법 오류로 인해 `Referer` 헤더에는 R이 빠져 있습니다. JavaScript 및 DOM의 `Referrer-Policy` 헤더와 `referrer`는 철자가 정확합니다. {% endAside %}
+
+## 리퍼러 및 리퍼러 정책 A부터 Z까지
+
+HTTP 요청에는 요청이 이루어진 출처 또는 웹 페이지 URL을 나타내는 [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) 헤더가 포함될 수 있습니다. [`Referrer-Policy` 헤더](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)는 `Referer` 헤더에서 사용할 수 있는 데이터를 정의합니다.
+
+아래 예에서 `Referer` 헤더에는 요청이 이루어진 `site-one`에 있는 페이지의 전체 URL이 포함됩니다.
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="리퍼러 헤더를 포함하는 HTTP 요청", width="800", height="573" %}</figure>
+
+`Referer` 헤더는 다양한 유형의 요청에 존재할 수 있습니다.
+
+- 사용자가 링크를 클릭할 때의 탐색 요청
+- 브라우저가 페이지에 필요한 이미지, iframe, 스크립트 및 기타 리소스를 요청할 때의 하위 리소스 요청
+
+탐색 및 iframe의 경우, `document.referrer` 사용하여 JavaScript를 통해서도 이 데이터에 액세스할 수 있습니다.
+
+`Referer` 값은 유익한 정보를 내포할 수 있습니다. 예를 들어, 분석 서비스는 이 값을 사용하여 `site-two.example` 방문자의 50%가 `social-network.example`에서 왔다는 사실을 알아낼 수 있습니다.
+
+그러나 경로와 쿼리 문자열을 포함하는 전체 URL이 **출처 간**에 `Referer`에서 전송되면 이는 **개인정보 침해**를 유발할 수 있으며 **보안 위험**을 제기할 수 있습니다. 다음 URL을 살펴보세요.
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="경로가 있는 URL, 다양한 개인정보 보호 및 보안 위험에 매핑됨", width="800", height="370" %}</figure>
+
+URL #1 ~ #5에는 개인정보가 포함되어 있으며 때로는 개인 식별이 가능하거나 민감한 정보도 포함될 수 있습니다. 출처 간에 이러한 정보가 감지되지 않고 누출되면 웹 사용자의 개인정보가 위험에 빠질 수 있습니다.
+
+URL #6은 [기능 URL](https://www.w3.org/TR/capability-urls/)입니다. 의도한 사용자 이외의 다른 사람의 손에 정보가 넘어가는 것은 원하지 않을 것입니다. 이런 일이 실제로 발생하면 악의적인 행위자에 의해 이 사용자의 계정이 도용될 수 있습니다.
+
+**사이트의 요청에 사용할 수 있는 리퍼러 데이터를 제한하기 위해 리퍼러 정책을 설정할 수 있습니다.**
+
+## 어떤 정책을 사용할 수 있고 서로 어떻게 다릅니까?
+
+8가지 정책 중 하나를 선택할 수 있습니다. 정책에 따라 `Referer` 헤더(및 `document.referrer`)에서 사용할 수 있는 데이터는 다음과 같습니다.
+
+- 데이터 없음(`Referer` 헤더가 없음)
+- [출처](/same-site-same-origin/#origin)만
+- 전체 URL: 출처, 경로 및 쿼리 문자열
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Referer 헤더 및 document.referrer에 포함될 수 있는 데이터", width="800", height="255" %}</figure>
+
+일부 정책은 출처 간 또는 동일 출처 요청, 보안(요청 대상이 출처만큼 안전한지 여부) 또는 둘 모두 등 **컨텍스트**에 따라 다르게 작동하도록 설계됩니다. 이는 자체 사이트 내에서 리퍼러의 풍부함을 유지하면서 출처 간에 공유되는 정보의 양을 제한하거나 덜 안전한 원본으로 제한하는 데 유용합니다.
+
+다음은 리퍼러 정책이 Referer 헤더와 `document.referrer`에서 사용할 수 있는 URL 데이터를 제한하는 방법을 보여주는 개요입니다.
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="보안 및 출처 간 컨텍스트에 따라 다른 리퍼러 정책 및 동작", width="800", height="537" %}</figure>
+
+MDN은 [정책 및 동작의 전체 예시 목록](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives)을 제공합니다.
+
+참고 사항:
+
+- 전송 방식(HTTPS 대 HTTP)을 고려하는 모든 정책(`strict-origin`, `no-referrer-when-downgrade` 및 `strict-origin-when-cross-origin`)은 HTTP의 보안성이 떨어지더라도 HTTP 출처에서 다른 HTTP 출처로의 요청을 HTTPS 출처에서 다른 HTTPS 출처로의 요청과 동일한 방식으로 처리합니다. 그 이유는 이러한 정책의 경우에 보안 **다운그레이드**가 발생하는지 여부가 중요하기 때문입니다. 즉, 요청으로 인해 암호화된 출처의 데이터가 암호화되지 않은 출처에 노출될 수 있는지 여부가 중요한 것입니다. HTTP → HTTP 요청은 항상 암호화되지 않으므로 다운그레이드가 없습니다. 반면, HTTPS → HTTP 요청은 다운그레이드가 발생합니다.
+- 요청이 **same-origin**인 경우, 전송 방식(HTTPS 또는 HTTP)이 동일합니다. 따라서 보안 다운그레이드가 없습니다.
+
+## 브라우저의 기본 리퍼러 정책
+
+*2020년 7월 현재*
+
+**리퍼러 정책이 설정되어 있지 않으면 브라우저의 기본 정책이 사용됩니다.**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>브라우저</th>
+        <th>기본 <code>Referrer-Policy</code> / 동작</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>
+<a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">버전 85</a>에서 <code>strict-origin-when-cross-origin</code>으로 전환할 계획(이전 <code>no-referrer-when-downgrade</code>)</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">마감된 버그 참조</a>)</li>
+            <li>비공개 브라우징 및 추적기의 <code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>
+<code>strict-origin-when-cross-origin</code> <a href="https://github.com/privacycg/proposals/issues/13">실험 중</a>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>
+<code>strict-origin-when-cross-origin</code>와 유사합니다. 자세한 내용은 <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">추적 방지</a>를 참조하세요.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 리퍼러 정책 설정하기: 모범 사례
+
+{% Aside 'objective' %} `strict-origin-when-cross-origin`(또는 더 엄격)과 같은 개인정보 보호 강화 정책을 명시적으로 설정하세요. {% endAside %}
+
+사이트에 대해 리퍼러 정책을 설정하는 여러 가지 방법이 있습니다.
+
+- HTTP 헤더로
+- [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML) 내에서
+- [요청이 있을 시](https://javascript.info/fetch-api#referrer-referrerpolicy) JavaScript에서
+
+페이지, 요청 또는 요소마다 다른 정책을 설정할 수 있습니다.
+
+HTTP 헤더와 메타 요소는 모두 페이지 수준입니다. 요소의 유효 정책을 결정할 때 우선 순위는 다음과 같습니다.
+
+1. 요소 수준 정책
+2. 페이지 수준 정책
+3. 브라우저 기본 설정
+
+**예시:**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+이미지는 `no-referrer-when-downgrade` 정책으로 요청되는 반면 이 페이지의 다른 모든 하위 리소스 요청은 `strict-origin-when-cross-origin` 정책을 따릅니다.
+
+## 리퍼러 정책을 보려면 어떻게 합니까?
+
+[securityheaders.com](https://securityheaders.com/)은 특정 사이트나 페이지가 사용하는 정책을 확인하기에 편리합니다.
+
+Chrome, Edge 또는 Firefox의 개발자 도구를 사용하여 특정 요청에 사용된 리퍼러 정책을 볼 수도 있습니다. 이 글을 작성하는 시점에 Safari는 `Referrer-Policy` 헤더를 표시하지 않지만 전송된 `Referer`는 표시합니다.
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="리퍼러 및 리퍼러 정책을 보여주는 Chrome DevTools의 네트워크 패널 스크린샷", width="800", height="416" %}<figcaption> Chrome DevTools, 요청이 선택된 <b>네트워크 패널</b></figcaption></figure>
+
+## 내 웹 사이트에 어떤 정책을 설정해야 합니까?
+
+요약: `strict-origin-when-cross-origin`(또는 더 엄격)과 같은 개인정보 보호 강화 정책을 명시적으로 설정합니다.
+
+### 왜 "명시적"이어야 합니까?
+
+리퍼러 정책이 설정되어 있지 않으면 브라우저의 기본 정책이 사용됩니다. 실제로 웹 사이트는 종종 브라우저의 기본값을 따릅니다. 그러나 이것은 다음과 같은 이유로 이상적이지 않습니다.
+
+- 브라우저 기본 정책은 브라우저와 모드(비공개/시크릿)에 따라 `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, 또는 이보다 엄격합니다. 따라서 웹 사이트가 모든 브라우저에서 예상대로 작동하는 것은 아닙니다.
+- 브라우저는 출처 간 요청에 대해 `strict-origin-when-cross-origin`과 같은 더 엄격한 기본값 및 [리퍼러 트리밍](https://github.com/privacycg/proposals/issues/13)과 같은 메커니즘을 채택하고 있습니다. 브라우저 기본값이 변경되기 전에 개인정보 보호 강화 정책을 명시적으로 선택하면 제어력을 확보할 수 있고 적절하다고 판단되는 테스트를 실행할 수 있습니다.
+
+### 왜 `strict-origin-when-cross-origin`(또는 더 엄격)을 사용해야 합니까?
+
+안전하고 개인정보 보호를 강화하며 유용한 정책이 필요합니다. 여기서 "유용한"이라는 말은 리퍼러에서 원하는 바에 따라 다릅니다.
+
+- **보안**: 웹 사이트에서 HTTPS를 사용하는 경우([그렇지 않은 경우 우선 순위로 지정할 것](/why-https-matters/)) HTTPS가 아닌 요청에서 웹 사이트의 URL이 누출되는 것을 원하지 않을 것입니다. 네트워크에 있는 모든 사람이 이를 볼 수 있으므로 사용자가 중간자 공격에 노출될 수 있습니다. `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, `no-referrer` 및 `strict-origin` 정책이 이 문제를 해결해줍니다.
+- **개인정보 보호 강화**: 출처 간 요청의 경우 `no-referrer-when-downgrade`가 전체 URL을 공유합니다. 이는 개인정보 보호를 강화하는 것이 아닙니다. `strict-origin-when-cross-origin` 및 `strict-origin`만 출처를 공유하고 `no-referrer`는 아무 것도 공유하지 않습니다. 그러면 개인정보 보호 선택지로 `strict-origin-when-cross-origin`, `strict-origin` 및 `no-referrer`가 남습니다.
+- **유용성**: `no-referrer` 및 `strict-origin`은 same-origin 요청에 대해서도 전체 URL을 공유하지 않습니다. 따라서 이것이 필요한 경우 `strict-origin-when-cross-origin`이 더 나은 선택입니다.
+
+이 모든 사항들을 고려하면 **`strict-origin-when-cross-origin`**이 일반적으로 합리적인 선택임을 알 수 있습니다.
+
+**예: `strict-origin-when-cross-origin` 정책 설정:**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+또는 서버측, 예를 들어 Express에서:
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### `strict-origin-when-cross-origin`(또는 더 엄격)이 모든 사용 사례를 수용하지 못한다면 어떻게 될까요?
+
+이 경우 **점진적인 접근 방식**을 취하세요. 웹 사이트에 대해 `strict-origin-when-cross-origin`과 같은 보호 정책을 설정하고 필요한 경우 특정 요청이나 HTML 요소에 대해 보다 관대한 정책을 설정합니다.
+
+### 예: 요소 수준 정책
+
+`index.html` :
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Safari/WebKit은 [사이트 간](/same-site-same-origin/#same-site-cross-site) 요청에 `document.referrer` 또는 `Referer` 헤더를 제한할 수 있습니다. [자세한 내용](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)을 확인하세요.
+
+### 예: 요청 수준 정책
+
+`script.js` :
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### 또 어떤 점들을 고려해야 합니까?
+
+정책은 웹 사이트와 사용 사례에 따라 달라져야 합니다. 이는 귀하, 귀하의 팀, 회사의 판단에 달려 있습니다. 일부 URL에 개인 식별 데이터 또는 민감한 데이터가 포함된 경우 보호 정책을 설정하세요.
+
+{% Aside 'warning' %} 귀하에게 민감하지 않은 데이터가 사용자에게는 민감할 수 있거나 단순히 출처 간에서 감지되지 않고 누출되기를 원하거나 그러기를 예상하는 데이터가 아닐 수 있습니다. {% endAside %}
+
+## 들어오는 요청에서 리퍼러 사용: 모범 사례
+
+### 내 사이트 기능에 들어오는 요청의 리퍼러 URL이 사용되는 경우 어떻게 해야 합니까?
+
+#### 사용자 데이터 보호
+
+`Referer`에는 비공개, 개인 또는 식별 데이터가 포함될 수 있으므로 그에 따라 취급해야 합니다.
+
+#### 수신하는 `Referer`는 달라질 수 있다는 점에 유의하세요
+
+들어오는 출처 간 요청의 리퍼러를 사용하면 몇 가지 제한이 따릅니다.
+
+- 요청 이미터의 구현을 제어할 수 없는 경우 수신하는 `Referer` 헤더(및 `document.referrer`)에 대해 가정을 할 수 없습니다. 요청 이미터는 언제든지 `no-referrer` 정책으로 전환하거나, 더 일반적으로 말하면, 이전보다 더 엄격한 정책으로 전환을 결정할 수도 있습니다. 이 경우에는 이전보다 `Referer`를 통해 더 적은 데이터를 얻게 됩니다.
+- 기본적으로, 브라우저에 리퍼러 정책 `strict-origin-when-cross-origin`이 점차 많이 사용되고 있습니다. 즉, 들어오는 출처 간 요청에서 출처만(전체 리퍼러 URL이 아니라) 수신할 수 있습니다. 이러한 정보를 보내는 사이트에 이 정책이 설정되어 있지 않은 경우에도 마찬가지입니다.
+- 브라우저는 `Referer`를 관리하는 방식을 변경할 수도 있습니다. 예를 들어, 향후에는 사용자 개인 정보를 보호하기 위해 출처 간 하위 리소스 요청에서 출처에 대한 리퍼러를 항상 트리밍하도록 동작할 수 있습니다.
+- `Referer` 헤더(및 `document.referrer`)에 필요 이상으로 많은 데이터가 포함될 수 있습니다. 예를 들어 요청이 출처 간인지만 알고 싶을 때 전체 URL이 포함될 수 있습니다.
+
+#### `Referer`에 대한 대안
+
+다음과 같은 경우 대안을 고려해야 할 수 있습니다.
+
+- 사이트의 필수 기능이 들어오는 출처 간 요청의 리퍼러 URL을 사용합니다.
+- 및/또는 사이트가 출처 간 요청에서 필요로 하는 리퍼러 URL의 일부를 더 이상 수신하지 않는 경우. 이러한 상황은 요청 이미터가 정책을 변경하거나 정책이 설정되지 않았고 브라우저 기본 정책이 변경된 경우(예: [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default))에 발생합니다.
+
+대안을 정의하려면 먼저 사용 중인 리퍼러 부분을 분석하세요.
+
+**출처(`https://site-one.example`)만 필요한 경우:**
+
+- 페이지에 대한 최상위 액세스 권한이 있는 스크립트에서 리퍼러를 사용하는 경우 `window.location.origin`이 대안입니다.
+- 가능한 경우, [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) 및 [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site)와 같은 헤더가 `Origin`을 제공하거나, 정확하게 원하는 바 대로 요청이 출처 간인지 여부를 설명합니다.
+
+**URL의 다른 요소(경로, 쿼리 매개변수…)가 필요한 경우:**
+
+- 요청 매개변수가 사용 사례를 처리할 수 있으며 이를 통해 리퍼러를 구문 분석하는 작업을 생략할 수 있습니다.
+- 페이지에 대한 최상위 액세스 권한이 있는 스크립트에서 리퍼러를 사용하는 경우 `window.location.pathname`이 대안이 될 수 있습니다. URL의 경로 섹션만 추출하여 인수로 전달함으로써 URL 매개변수에 있을 수 있는 잠재적으로 민감한 정보가 전달되지 않도록 합니다.
+
+**이러한 대안을 이용할 수 없는 경우:**
+
+- 요청 이미터(`site-one.example`)가 요구되는 정보를 일종의 구성에서 명시적으로 설정할 것을 기대하도록 시스템을 변경할 수 있는지 확인하세요. 장점: `site-one.example` 사용자에게 더욱 명시적으로 개인정보를 보호해 주며 미래에 더 잘 대비할 수 있습니다. 단점: 잠재적으로, 여러분이나 시스템 사용자에게 더 많은 작업이 필요할 수 있습니다.
+- 요청을 내보내는 사이트가 `no-referrer-when-downgrade`의 요소별 또는 요청별 리퍼러 정책 설정에 동의할 수 있는지 확인하세요. 단점: `site-one.example` 사용자의 개인정보 보호 수준이 낮고 일부 브라우저에서 지원되지 않을 수 있습니다.
+
+### 교차 사이트 요청 위조(CSRF) 보호
+
+요청 이미터는 `no-referrer` 정책을 설정하여 언제든지 리퍼러를 보내지 않도록 결정할 수 있습니다(악의적인 행위자는 리퍼러를 도용할 수도 있음).
+
+[CSRF 토큰](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)을 기본 보호 수단으로 사용하세요. 보호 수준을 더욱 높이기 위해 [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites)를 사용하고 `Referer` 대신 [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)(POST 및 CORS 요청에서 사용 가능) 및 [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site)(사용 가능한 경우)와 같은 헤더를 사용하세요.
+
+### 로깅
+
+`Referer`에 있을 수 있는 사용자의 개인 데이터 또는 민감한 데이터를 보호해야 합니다.
+
+출처만 사용하는 경우 [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) 헤더가 대안이 될 수 있는지 확인하세요. 이렇게 하면 리퍼러를 구문 분석할 필요 없이 더 간단한 방법으로 디버깅에 필요한 정보를 얻을 수 있습니다.
+
+### 결제
+
+결제 공급자는 보안 검사를 위해 들어오는 요청의 `Referer` 헤더에 의존할 수 있습니다.
+
+예를 들면 다음과 같습니다.
+
+- 사용자가 `online-shop.example/cart/checkout`에서 **구매** 버튼을 클릭합니다.
+- `online-shop.example`은 거래를 관리하기 위해 `payment-provider.example`로 리디렉션됩니다.
+- `payment-provider.example`은 판매자가 설정한 허용된 `Referer` 값 목록과 대조해 이 요청의 `Referer`를 검사합니다. 목록의 항목과 일치하지 않는 부분이 있으면 `payment-provider.example`이 요청을 거부합니다. 일치하는 경우에는 사용자가 거래로 진행할 수 있습니다.
+
+#### 결제 흐름의 보안을 검사하기 위한 모범 사례
+
+**요약: 결제 공급자는 낮은 수준의 공격에 대한 기본적인 검사로 `Referer`를 사용할 수 있지만 더 신뢰할 수 있는 다른 검증 방법이 꼭 있어야 합니다.**
+
+`Referer` 헤더 자체는 검사를 위한 신뢰할 수 있는 기반이 되지 못합니다. 합법적인 판매자인지 여부에 관계없이 요청하는 사이트는 `no-referrer` 정책을 설정할 수 있고, 그렇게 되면 결제 공급자가 `Referer` 정보를 사용할 수 없게 됩니다. 그러나 결제 공급자의 입장에서 `Referrer`를 볼 수 있다면 `no-referrer` 정책을 설정하지 않은 순진한 공격자를 잡아내는 데 도움이 될 수 있습니다. 따라서 첫 단계의 기본적 검사로 `Referer` 사용을 선택할 수 있습니다. 만약 그러한 경우에는 다음 지침을 따르세요.
+
+- **`Referer`가 ​​항상 존재할 것으로 기대하지 마세요. 존재하는 경우에는 최소한 포함할 데이터 부분(출처)에 대해서만 확인하세요.** 허용되는 `Referer` 값 목록을 설정할 때 경로는 포함되지 않고 출처만 포함되도록 하세요. 예: `online-shop.example`에 허용되는 `Referer` 값은 `online-shop.example/cart/checkout`이 아니라 `online-shop.example`이어야 합니다. 이유? `Referer`가 전혀 없을 것으로 예상하거나 요청하는 웹사이트의 출처인 `Referer` 값을 예상함으로써 판매자가 설정한 **`Referrer-Policy`에 대해, 또는 판매자가 정책을 설정하지 않은 경우 브라우저 동작**에 대해 어떠한 가정도 하지 않을 것이기 때문에 예상치 못한 오류를 방지하게 됩니다. 사이트와 브라우저 모두 들어오는 요청에서 보낸 `Referer`를 출처만 남기고 제거하거나 `Referer`를 전혀 보내지 않을 수 있습니다.
+- `Referer`가 없는 경우, 또는 존재하고 기본적인 `Referer` 출처 확인에 성공한 경우: 다른 더 신뢰할 수 있는 인증 방법으로 진행할 수 있습니다(아래 참조).
+
+**더 신뢰할 수 있는 검증 방법은 무엇입니까?**
+
+신뢰할 수 있는 검증 방법 중 하나는 요청자가 고유 키와 함께 **요청 매개변수를 해시 처리**하도록 하는 것입니다. 그러면 결제 공급자가 **자체적으로 동일한 해시를 계산**하고 계산과 일치하는 경우에만 요청을 수락할 수 있습니다.
+
+**리퍼러 정책이 없는 HTTP 판매자 사이트가 HTTPS 결제 공급자로 리디렉션하는 경우 `Referer`는 어떻게 됩니까?**
+
+요청에서 HTTPS 결제 공급자에게 `Referer`가 보이지 않는 이유는 [대부분의 브라우저](#default-referrer-policies-in-browsers)가 `strict-origin-when-cross-origin` 또는 웹사이트에 정책이 설정되지 않은 경우 `no-referrer-when-downgrade`를 기본적으로 사용하기 때문입니다. 또한 [Chrome의 새로운 기본 정책 변경 사항](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)은 이 동작을 변경하지 않는다는 점에도 유의해야 합니다.
+
+{% Aside %}
+
+웹사이트에서 HTTP를 사용하는 경우 [HTTPS로 마이그레이션하세요](/why-https-matters/).
+
+{% endAside %}
+
+## 결론
+
+보호 리퍼러 정책은 사용자의 개인정보 보호 수준을 높이는 좋은 방법입니다.
+
+사용자를 보호하기 위한 다양한 기술에 대해 자세히 알아보려면 web.dev의 [Safe and secure](/secure/) 컬렉션을 확인하세요!
+
+*모든 리뷰어, 특히 Kaustubha Govind, David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck 및 Kayce Basques의 기여와 피드백에 깊이 감사 드립니다.*
+
+## 리소스
+
+- ["same-site" 및 "same-origin" 이해하기](/same-site-same-origin/)
+- [새로운 보안 헤더: 리퍼러 정책(2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [MDN의 리퍼러 정책](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [리퍼러 헤더: MDN의 개인정보 및 보안 문제](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Chrome 변경: 구현 의도 간단히 알아보기](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Chrome 변경: 배송 의도 간단히 알아보기](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Chrome 변경: 상태 항목](https://www.chromestatus.com/feature/6251880185331712)
+- [Chrome 변경: 85 베타 블로그 게시물](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [리퍼러 트리밍 GitHub 스레드: 다양한 브라우저가 하는 일](https://github.com/privacycg/proposals/issues/13)
+- [리퍼러 정책 사양](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/ko/blog/resize-observer/index.md b/src/site/content/ko/blog/resize-observer/index.md
new file mode 100644
index 00000000000..1b9ee39c551
--- /dev/null
+++ b/src/site/content/ko/blog/resize-observer/index.md
@@ -0,0 +1,131 @@
+---
+title: 'ResizeObserver: 요소에 대한 document.onresize와 같음'
+subhead: "'ResizeObserver'는 요소의 크기가 변경될 때 알려줍니다."
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: 상자에서 식물 재배.
+description: |2
+
+  'ResizeObserver'는 요소의 콘텐츠 사각형이 변경될 때 알려줍니다.
+
+  그에 따라 대응할 수 있도록 크기를 조정합니다.
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+`ResizeObserver` 이전에는 문서의 `resize` 이벤트에 리스너를 연결하여 뷰포트의 치수 변경에 대한 알림을 받아야 했습니다. 그런 다음 이벤트 핸들러에서 해당 변경의 영향을 받은 요소를 파악하고 적절하게 대응하기 위해 특정 루틴을 호출해야 합니다. 크기 조정 후 요소의 새로운 차원을 필요로 하는 경우, `getBoundingClientRect()` 또는 `getComputedStyle()`를 호출해야 했으며, 그러면 *모든* 읽기와 *모든* 쓰기의 일괄 처리를 관리하지 않는 경우 레이아웃 스래싱이 발생할 수 있습니다.
+
+이것은 메인 창의 크기를 조정하지 않고 요소의 크기를 변경하는 경우도 다루지 않았습니다. 예를 들어, 새 하위 요소를 추가하거나 요소의 `display` 스타일을 `none`으로 설정하거나 유사한 작업을 수행하면 요소, 동종 요소 또는 상위 요소의 크기가 변경될 수 있습니다.
+
+이것이 `ResizeObserver`가 유용한 프리미티브인 이유입니다. 변화의 원인과 상관없이 관찰된 요소의 크기 변화에 반응합니다. 관찰된 요소의 새로운 크기에 대한 액세스도 제공합니다.
+
+## API
+
+`Observer` 접미사가 있는 모든 API는 간단한 API 디자인을 공유합니다. `ResizeObserver`도 예외는 아닙니다. `ResizeObserver` 객체를 만들고 콜백을 생성자에 전달합니다. 콜백에는 요소의 새 차원이 포함된 `ResizeObserverEntry` 개체 배열(관찰된 요소당 하나의 항목)이 전달됩니다.
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// Observe one or multiple elements
+ro.observe(someElement);
+```
+
+## 몇 가지 세부 사항
+
+### 보고되는 내용은 무엇입니까?
+
+일반적으로 [`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry) [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) 개체를 반환하는 `contentRect`라는 속성을 통해 요소의 콘텐츠 상자를 보고합니다. 콘텐츠 상자는 콘텐츠를 넣을 수 있는 상자입니다. 경계 상자에서 패딩을 뺀 값입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="CSS 상자 모델의 다이어그램입니다.", width="727", height="562" %}</figure>
+
+이 때 `ResizeObserver`가 `contentRect`와 패딩의 치수를 모두 *보고*하는 반면, `contentRect`만을 *관찰*합니다. `contentRect`를 요소의 경계 상자와 혼동하지 *마십시오.* `getBoundingClientRect()` 의해 보고된 경계 상자는 전체 요소와 해당 하위 항목을 포함하는 상자입니다. `ResizeObserver`가 경계 상자의 크기를 보고하는 규칙의 예외입니다.
+
+Chrome 84부터 `ResizeObserverEntry`에는 보다 자세한 정보를 제공하는 세 가지 새로운 속성이 있습니다. 이러한 속성 각각은 `blockSize` 속성과 `inlineSize` 속성을 포함하는 `ResizeObserverSize` 객체를 반환합니다. 이 정보는 콜백이 호출될 때 관찰된 요소에 대한 것입니다.
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+이러한 항목은 모두 읽기 전용 배열을 반환합니다. 미래에는 다중 열 시나리오에서 발생하는 여러 조각이 있는 요소를 지원할 수 있기를 기대하기 때문입니다. 현재로서는 이러한 배열에는 하나의 요소만 포함됩니다.
+
+이러한 속성에 대한 플랫폼 지원은 제한적이지만 [Firefox는 이미 처음 두 가지를 지원](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility)합니다.
+
+### 보고 시기
+
+이 사양은 `ResizeObserver`가 페인트 전과 레이아웃 후에 모든 크기 조정 이벤트를 처리해야 한다고 규정합니다. `ResizeObserver`의 콜백을 페이지 레이아웃 변경 이상적인 장소로 만듭니다. `ResizeObserver` 처리는 레이아웃과 페인트 사이에서 발생하기 때문에 그렇게 하면 페인트가 아닌 레이아웃만 무효화됩니다.
+
+### 갓차
+
+콜백 내부에서 관찰된 요소의 크기를 `ResizeObserver`로 변경하면 어떻게 될까요? 답은 바로 콜백에 대한 또 다른 호출을 트리거한다는 것입니다. 다행히 `ResizeObserver`에는 무한 콜백 루프와 순환 종속성을 방지하는 메커니즘이 있습니다. 크기가 조정된 요소가 이전 콜백에서 처리된 *가장 얕은* 요소보다 DOM 트리에서 더 깊은 경우 변경 사항은 동일한 프레임에서만 처리됩니다. 그렇지 않으면 다음 프레임으로 연기됩니다.
+
+## 애플리케이션
+
+`ResizeObserver`를 사용하여 수행할 수 있는 한 가지는 요소별 미디어 쿼리를 구현하는 것입니다. 요소를 관찰함으로써 디자인 중단점을 명령적으로 정의하고 요소의 스타일을 변경할 수 있습니다. 다음 [예](https://googlechrome.github.io/samples/resizeobserver/)에서 두 번째 상자는 너비에 따라 테두리 반경을 변경합니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// Only observe the second box
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+또 다른 흥미로운 예는 채팅 창입니다. 일반적인 위에서 아래로 대화 레이아웃에서 발생하는 문제는 스크롤 위치 지정입니다. 사용자를 혼란스럽게 하지 않으려면 창이 최신 메시지가 표시되는 대화 하단에 고정되어 있으면 도움이 됩니다. 또한 모든 종류의 레이아웃 변경(가로에서 세로로 또는 그 반대로 휴대폰을 생각하는 것)도 동일하게 달성해야 합니다.
+
+`ResizeObserver`를 사용하면 *두* 시나리오를 모두 처리하는 *단일* 코드를 작성할 수 있습니다. 창 크기 조정은 `ResizeObserver`가 정의에 따라 캡처할 수 있지만, `appendChild()`를 호출하면 해당 요소의 크기도 조정됩니다(`overflow: hidden` 이 설정되지 않은 경우). 왜냐하면 새 요소를 위한 공간을 만들어야 하기 때문입니다. 이를 염두에 두고 원하는 효과를 얻는 데 몇 줄만 사용됩니다.
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// Observe the scrollingElement for when the window gets resized
+ro.observe(document.scrollingElement);
+// Observe the timeline to process new messages
+ro.observe(timeline);
+```
+
+꽤 깔끔하죠?
+
+여기에서 사용자가 수동으로 위로 스크롤하고 새 메시지가 수신될 때 *해당* 메시지에 고정되도록 스크롤하려는 경우를 처리하기 위해 더 많은 코드를 추가할 수 있습니다.
+
+또 다른 사용 사례는 자체 레이아웃을 수행하는 모든 종류의 사용자 정의 요소에 대한 것입니다. `ResizeObserver` 전까지는 하위 요소를 다시 배치할 수 있도록 치수가 변경될 때 알림을 받는 안정적인 방법이 없었습니다.
+
+## 결론
+
+`ResizeObserver`는 [대부분의 주요 브라우저](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility)에서 사용할 수 있습니다. 어떤 경우에는 가용성이 지원된 사례는 아주 최근입니다. [일부 polyfills이 가능하긴](https://github.com/WICG/ResizeObserver/issues/3) 하지만 완전히 `ResizeObserver`의 기능을 복제 할 수 없습니다. 현재 구현은 폴링 또는 DOM에 센티넬 요소 추가에 의존합니다. 전자는 CPU를 바쁘게 유지하여 모바일에서 배터리를 소모하는 반면 후자는 DOM을 수정하고 스타일 및 기타 DOM 의존 코드를 엉망으로 만들 수 있습니다.
+
+사진 제공: [Unsplash](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)에서 [Markus Spiske](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/ko/blog/responsive-web-design-basics/index.md b/src/site/content/ko/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..fe046cf8f04
--- /dev/null
+++ b/src/site/content/ko/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,333 @@
+---
+title: 반응형 웹 디자인 기초
+subhead: 사이트가 보여지는 장치의 요구와 기능에 대응하도록 사이트를 만드는 방법.
+description: 사이트가 보여지는 장치의 요구와 기능에 대응하도록 사이트를 만드는 방법을 소개합니다.
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+{# TODO(kayce): #1983이 들어오면 이 하드 코딩된 ToC를 제거하십시오. #}
+
+- [뷰포트 설정](#viewport)
+- [뷰포트에 맞게 콘텐츠 크기 조정](#size-content)
+- [빠른 응답을 위해 CSS 미디어 쿼리 사용](#media-queries)
+- [중단점을 선택하는 방법](#breakpoints)
+- [Chrome DevTools에서 미디어 쿼리 중단점 보기](#devtools)
+
+웹 서핑을 위한 모바일 장치의 사용은 천문학적인 속도로 계속 증가하고 있으며 이러한 장치는 종종 디스플레이 크기의 제약을 받기 때문에 콘텐츠가 화면에 배치되는 방식에서 새로운 접근 방식이 요구됩니다.
+
+[A List Apart에서 Ethan Marcotte](http://alistapart.com/article/responsive-web-design/)이 처음 정의한 반응형 웹 디자인은 사용자와 사용자가 사용하는 장치의 요구에 대응합니다. 장치의 크기와 기능에 따라 레이아웃이 달라집니다. 예를 들어, 전화 사용자는 하나의 열에 콘텐츠가 표시되는 모습을 볼 수 있지만, 태블릿은 동일한 콘텐츠를 두 개의 열에 표시할 수 있습니다.
+
+<figure>   {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+휴대폰, "패블릿", 태블릿, 데스크톱, 게임 콘솔, TV, 심지어 웨어러블에 이르기까지 다양한 화면 크기가 존재합니다. 화면 크기는 계속해서 변하기 때문에 사이트가 현재 또는 미래의 모든 화면 크기에 적응할 수 있도록 하는 것이 중요합니다. 또한 장치에는 우리가 상호 작용하는 다양한 요소들이 있습니다. 예를 들어 방문자 중 일부는 터치스크린을 사용합니다. 현대적인 반응형 디자인은 이러한 모든 사항을 고려하여 모든 사람의 경험을 최적화합니다.
+
+## 뷰포트 설정 {: #viewport }
+
+다양한 장치에 최적화된 페이지는 문서 헤드에 메타 뷰포트 태그를 포함해야 합니다. 메타 뷰포트 태그는 페이지의 크기와 배율을 제어하는 방법에 대한 정보를 브라우저에 제공합니다.
+
+최상의 경험을 제공하기 위해 모바일 브라우저는 페이지를 데스크톱 화면 너비(일반적으로 약 `980px`, 그러나 장치에 따라 다름)로 렌더링한 다음 글꼴 크기를 늘리고 화면에 맞게 콘텐츠 크기를 조정하여 콘텐츠를 더 보기 좋게 만듭니다. 즉, 사용자에게 글꼴 크기가 일관되지 않게 나타날 수 있어 콘텐츠를 보고 상호 작용하기 위해 사용자가 두 번 탭하거나 핀치하여 확대해야 할 수 있습니다.
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+메타 뷰포트 값 `width=device-width`를 사용하면 장치 독립적인 픽셀로 화면 너비를 일치시킬 것을 페이지에 지시합니다. 고밀도 화면에서 많은 물리적 픽셀로 구성될 수 있는 단일 픽셀의 표현인 장치(또는 밀도) 독립 픽셀입니다. 이를 통해 페이지는 작은 휴대폰에서 렌더링하든 큰 데스크톱 모니터에서 렌더링하든 다양한 화면 크기와 일치하도록 콘텐츠를 리플로우할 수 있습니다.
+
+<figure>   {% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="텍스트가 매우 축소되어 읽기 어려운 페이지를 보여주는 스크린샷", width="500", height="640" %}   <figcaption>     뷰포트 메타 태그가 없는 기기에서 페이지가 로드되는 방식을 보여주는 예입니다. <a href="https://without-vp-meta.glitch.me/">Glitch에서 이 예를 참조하세요</a>.   </figcaption></figure>
+
+<figure>   {% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="텍스트가 읽을 수 있는 크기로 표시된 동일한 페이지의 스크린샷", width="500", height="888" %}   <figcaption>     뷰포트 메타 태그가 있는 기기에서 페이지가 로드되는 방식을 보여주는 예입니다. <a href="https://with-vp-meta.glitch.me/">Glitch에서 이 예를 참조하세요</a>.   </figcaption></figure>
+
+[일부 브라우저](https://css-tricks.com/probably-use-initial-scale1/)는 가로 모드로 회전할 때 페이지의 너비를 일정하게 유지하고 리플로우 대신 확대/축소를 통해 화면을 채웁니다. `initial-scale=1` 값을 추가하면 브라우저가 장치 방향에 관계없이 CSS 픽셀과 장치 독립적인 픽셀 사이에 1:1 관계를 유지하도록 지시하고 페이지에서 전체 가로 너비를 활용할 수 있습니다.
+
+{% Aside 'caution' %} 이전 브라우저에서 속성을 제대로 구문 분석할 수 있도록 쉼표를 사용하여 속성을 구분하세요. {% endAside %}
+
+[`width` 또는 `initial-scale`가 있는 `<meta name="viewport">` 태그가 없습니까](https://developer.chrome.com/docs/lighthouse/pwa/viewport/) Lighthouse 감사는 HTML 문서가 뷰포트 메타 태그를 올바르게 사용하고 있는지 확인하는 프로세스를 자동화하는 데 도움을 줄 수 있습니다.
+
+### 액세스 가능한 뷰포트 확인 {: #accessible-viewport }
+
+`initial-scale`을 설정하는 외에 뷰포트에서 다음 속성을 설정할 수도 있습니다.
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+이러한 속성을 설정하면 사용자가 뷰포트를 확대/축소할 수 없게 되어 잠재적으로 접근성 문제가 발생할 수 있습니다. 따라서 이러한 속성을 사용하지 않는 것이 좋습니다.
+
+## 뷰포트에 맞게 콘텐츠 크기 조정 {: #size-content }
+
+데스크톱과 모바일 기기 모두에서 사용자는 웹사이트를 세로로 스크롤하는 데는 익숙하지만 가로는 그렇지 않습니다. 전체 페이지를 보기 위해 사용자가 가로로 스크롤하거나 축소해야 한다면 사용자 경험이 나빠집니다.
+
+메타 뷰포트 태그가 있는 모바일 사이트를 개발할 때 실제로 지정된 뷰포트에 맞지 않는 페이지 콘텐츠를 제작하는 실수를 하기가 쉽습니다. 예를 들어, 뷰포트보다 넓은 너비로 표시되는 이미지가 있으면 뷰포트를 가로로 스크롤해야 할 수 있습니다. 사용자가 가로로 스크롤할 필요가 없도록 이 콘텐츠를 뷰포트 너비에 맞게 조정해야 합니다.
+
+[뷰포트에 맞게 콘텐츠 크기가 올바르게 지정되지 않았습니다.](https://developer.chrome.com/docs/lighthouse/pwa/content-width/) Lighthouse 감사를 통해 범위를 넘어가는 콘텐츠를 감지하는 프로세스를 자동화할 수 있습니다.
+
+### 이미지 {: #images }
+
+이미지의 크기는 고정되어 있으며 뷰포트보다 크면 스크롤바가 나타납니다. 이 문제를 처리하는 일반적인 방법은 모든 이미지에 `100%`의 `max-width`를 부여하는 것입니다. 이렇게 하면 뷰포트 크기가 이미지보다 작은 경우 이미지가 공간에 맞게 축소됩니다. 그러나 `width`가 아닌 `max-width`가 `100%`이기 때문에 이미지가 원래 크기보다 크게 늘어나지 않습니다. 일반적으로 이미지가 스크롤바를 유발하는 문제가 발생하지 않도록 스타일시트에 다음을 추가하는 것이 안전합니다.
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### img 요소에 이미지 크기 추가 {: #image-dimensions }
+
+`max-width: 100%`를 사용하는 경우 이미지의 자연적인 치수를 무시하는 것이지만 `<img>` 태그에서 `width` 및 `height` 속성을 계속 사용해야 합니다. 이는 최신 브라우저가 이 정보를 사용하여 이미지가 로드되기 전에 해당 공간을 예약하기 때문에 콘텐츠가 로드될 때 [레이아웃이 변경](/optimize-cls/)되는 것을 방지하는 데 도움이 됩니다.
+
+### 레이아웃 {: #layout }
+
+CSS 픽셀의 화면 크기와 너비는 기기(예: 휴대폰과 태블릿, 심지어 휴대폰 간에도)에 따라 크게 다르기 때문에 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안 됩니다.
+
+과거에는 레이아웃을 생성하는 데 사용되는 요소를 백분율로 설정해야 했습니다. 아래 예에서 픽셀을 사용하여 크기가 조정된 부동 요소가 있는 2-열 레이아웃을 볼 수 있습니다. 뷰포트가 열의 전체 너비보다 작아지면 콘텐츠를 보기 위해 가로로 스크롤해야 합니다.
+
+<figure>   {% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="두 번째 열의 대부분이 뷰포트 밖에 있는 2-열 레이아웃을 보여주는 스크린샷", width="800", height="504" %}   <figcaption>     픽셀을 사용하는 부동 레이아웃. <a href="https://layout-floats-px.glitch.me/">Glitch에서 이 예제를 참조하세요</a>.   </figcaption></figure>
+
+너비에 백분율을 사용하면 열이 항상 컨테이너의 특정 비율로 유지됩니다. 즉, 스크롤바를 만드는 대신 열이 좁아집니다.
+
+{% Glitch { id: 'layout-floats-percent', path: 'README.md' } %}
+
+Flexbox, Grid Layout 및 Multicol과 같은 최신 CSS 레이아웃 기술을 사용하면 이러한 유연한 그리드를 훨씬 쉽게 만들 수 있습니다.
+
+#### Flexbox {: #flexbox }
+
+이 레이아웃 방법은 크기가 다른 항목 집합이 있고 작은 항목은 더 적은 공간을 차지하고 큰 항목은 더 많은 공간을 차지하여 한 행 또는 여러 행에 항목이 보기 좋게 놓이도록 하려는 경우에 이상적입니다.
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+반응형 디자인에서 Flexbox를 사용하여 항목을 단일 행으로 표시하거나 사용 가능한 공간이 줄어들면 여러 행으로 래핑할 수 있습니다.
+
+{% Glitch { id: 'responsive-flexbox', height: 220 } %}
+
+[Flexbox에 대해 자세히 알아보기](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox)
+
+#### CSS 그리드 레이아웃 {: #grid }
+
+CSS 그리드 레이아웃을 사용하면 유연한 그리드를 간단하게 생성할 수 있습니다. 백분율로 열을 만드는 대신 이전의 부동 예제를 고려하면 그리드 레이아웃, 그리고 컨테이너에서 사용 가능한 공간 부분을 나타내는 `fr` 단위를 사용할 수 있습니다.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+그리드를 사용하여 수용 가능한 만큼 많은 항목을 사용하여 일반 그리드 레이아웃을 만들 수도 있습니다. 화면 크기가 줄어들면 사용 가능한 트랙 수가 줄어듭니다. 아래 데모에는 각 행에 들어갈 수 있는 만큼의 카드가 있으며 최소 크기는 `200px`입니다.
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[CSS 그리드 레이아웃에 대해 자세히 알아보기](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
+
+#### 다중 열 레이아웃 {: #multicol }
+
+일부 형태의 레이아웃에는 `column-width` 속성으로 여러 개의 반응형 열을 생성할 수 있는 다중 열 레이아웃(Multicol)을 사용할 수 있습니다. 아래 데모에는 또 다른 `200px` 열을 위한 공간이 있는 경우 열이 추가되는 것을 볼 수 있습니다.
+
+{% Glitch { id: 'responsive-multicol', path: 'style.css' } %}
+
+[Multicol에 대해 자세히 알아보기](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+
+## 빠른 응답을 위해 CSS 미디어 쿼리 사용 {: #media-queries }
+
+위에 표시된 기술이 허용하는 것보다 특정 화면 크기를 지원하기 위해 레이아웃을 더 광범위하게 변경해야 할 때가 있습니다. 이 때 미디어 쿼리가 유용합니다.
+
+미디어 쿼리는 CSS 스타일에 적용할 수 있는 간단한 필터입니다. 콘텐츠를 렌더링하는 장치 유형 또는 해당 장치의 특징(예: 너비, 높이, 방향, 호버링 가능 여부, 장치를 터치스크린으로 사용 중인지 여부)에 따라 스타일을 쉽게 변경할 수 있습니다.
+
+다양한 인쇄 스타일을 제공하려면 다음과 같이 인쇄 스타일이 있는 스타일시트를 포함할 수 있도록 출력 *유형*을 지정해야 합니다.
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+또는 미디어 쿼리를 사용하여 기본 스타일시트에 인쇄 스타일을 포함할 수 있습니다.
+
+```css
+@media print {
+  /* print styles go here */
+}
+```
+
+{% Aside 'note' %} `@import` 구문, `@import url(print.css) print;`를 사용하여 기본 CSS 파일에 별도의 스타일시트를 포함할 수도 있지만 이러한 사용은 성능상의 이유로 권장되지 않습니다. 자세한 내용은 [CSS 가져오기 방지](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports)를 참조하세요. {% endAside %}
+
+반응형 웹 디자인의 경우 일반적으로 더 작은 화면에 다른 레이아웃을 제공하기 위해, 또는 방문자가 터치스크린을 사용하는 것으로 감지될 때 장치의 *특징*을 쿼리합니다.
+
+### 뷰포트 크기에 따른 미디어 쿼리 {: #viewport-media-queries }
+
+미디어 쿼리를 사용하면 작은 화면, 큰 화면 및 그 중간 화면에 특정 스타일이 적용되는 반응형 경험을 만들 수 있습니다. 따라서 여기에서 감지하는 특징은 화면 크기이며 다음 사항을 테스트할 수 있습니다.
+
+- `width` ( `min-width` , `max-width` )
+- `height` ( `min-height` , `max-height` )
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch { id: 'media-queries-size', path: 'index.html' } %}
+
+이러한 모든 특징은 뛰어난 브라우저 지원을 제공합니다. 브라우저 지원 정보를 포함한 자세한 내용은 MDN의 [너비](https://developer.mozilla.org/docs/Web/CSS/@media/width), [높이](https://developer.mozilla.org/docs/Web/CSS/@media/height), [방향](https://developer.mozilla.org/docs/Web/CSS/@media/orientation) 및 [종횡비](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio)를 참조하세요.
+
+{% Aside 'note' %} 사양에는 `device-width` 및 `device-height`에 대한 테스트가 포함되었습니다. 이러한 테스트는 더 이상 사용되지 않으며 피해야 합니다. `device-width` 및 `device-height`는 실제로 유용하지 않은 장치 창의 실제 크기를 테스트합니다. 예를 들어 사용자가 브라우저 창의 크기를 조정한 경우, 이것은 보고 있는 뷰포트와 다를 수 있기 때문입니다. {% endAside %}
+
+### 장치 기능에 따른 미디어 쿼리 {: #capability-media-queries }
+
+사용 가능한 장치가 늘어남에 따라 모든 대형 장치가 일반 데스크톱 또는 랩톱 컴퓨터라거나, 사람들이 작은 장치에서만 터치스크린을 사용할 것이라고 가정할 수는 없습니다. 미디어 쿼리 사양에 몇 가지 새로운 추가 기능을 사용하여 장치와 상호 작용하는 데 사용되는 포인터 유형 및 사용자가 요소 위로 마우스를 이동할 수 있는지 여부와 같은 기능을 테스트할 수 있습니다.
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+일반 데스크톱 컴퓨터, 휴대폰 또는 태블릿과 같은 다양한 장치에서 이 데모를 보세요.
+
+{% Glitch 'media-query-pointer' %}
+
+이러한 새로운 기능은 모든 최신 브라우저에서 잘 지원됩니다. MDN 페이지에서 [호버](https://developer.mozilla.org/docs/Web/CSS/@media/hover), [임의의 호버](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover), [포인터](https://developer.mozilla.org/docs/Web/CSS/@media/pointer), [임의의 포인터](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer)에 대해 자세히 알아보세요.
+
+#### `any-hover` 및 `any-pointer` 사용하기
+
+`any-hover` 및 `any-pointer` 기능은 사용자가 마우스를 가져갈 수 있는지 여부를 테스트하거나, 장치와 상호 작용하는 기본 방식이 아닌 경우에도 해당 유형의 포인터를 사용하는지 여부를 테스트합니다. 사용자가 터치스크린을 사용하고 있을 때 마우스로 전환하도록 만드는 것은 그다지 친절하지 않습니다! 그러나 `any-hover` 및 `any-pointer`는 사용자가 가지고 있는 장치의 종류를 파악하는 것이 중요한 경우 유용할 수 있습니다. 예를 들어, 터치스크린과 트랙 패드가 있는 노트북은 호버링 기능 외에도 거친 포인터와 미세한 포인터를 일치시켜야 합니다.
+
+## 중단점을 선택하는 방법 {: #breakpoints }
+
+장치 클래스를 기반으로 중단점을 정의하지 마세요. 현재 사용 중인 특정 장치, 제품, 브랜드 이름 또는 운영 체제를 기반으로 중단점을 정의하면 유지 관리에서 큰 어려움에 봉착할 수 있습니다. 대신, 콘텐츠 자체에 따라 레이아웃이 컨테이너에 맞게 조정되는 방식이 결정되어야 합니다.
+
+### 작게 시작하여 주요 중단점을 선택하고 점차 확대 {: #major-breakpoints }
+
+먼저 작은 화면 크기에 맞게 콘텐츠를 디자인한 다음 중단점이 필요할 때까지 화면을 확장합니다. 이를 통해 콘텐츠를 기반으로 중단점을 최적화하고 중단점의 수를 가능한 한 최소화할 수 있습니다.
+
+처음에 본 예제인 날씨 예보를 계속 작업해 보겠습니다. 첫 번째 단계는 작은 화면에서 예보가 잘 보이도록 하는 것입니다.
+
+<figure>   {% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="모바일 너비에 맞춰진 날씨 앱의 스크린샷", width="400", height="667" %}   <figcaption>     너비가 좁은 앱.   </figcaption></figure>
+
+그런 다음, 요소 사이에 공백이 너무 많아 예보가 시각적으로 이상해 보일 때까지 브라우저 크기를 조정합니다. 결정은 다소 주관적이지만 위의 `600px`는 확실히 너무 넓습니다.
+
+<figure>   {% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="항목 간 간격이 넓은 날씨 앱의 스크린샷", width="400", height="240" %}   <figcaption>     디자인을 조정해야 한다고 느껴지는 시점까지 이른 앱.   </figcaption></figure>
+
+`600px`에 중단점을 삽입하려면 구성요소의 CSS 끝에 두 개의 미디어 쿼리를 만듭니다. 하나는 브라우저가 `600px` 이하일 때 사용하고 다른 하나는 `600px` 보다 넓을 때 사용합니다.
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+마지막으로, CSS를 리팩토링합니다. `600px`의 `max-width`에 대한 미디어 쿼리 내부에 작은 화면만을 위한 CSS를 추가합니다. `601px`의 `min-width`에 대한 미디어 쿼리 내부에는 더 큰 화면을 위한 CSS를 추가합니다.
+
+#### 필요한 경우 부수적인 중단점 선택
+
+레이아웃이 크게 변경될 때 주요 중단점을 선택하는 외에도 부수적인 변경에 맞게 조정하는 것도 도움이 됩니다. 예를 들어, 주요 중단점 사이에 요소의 여백 또는 패딩을 조정하거나 레이아웃에서 더 자연스럽게 느껴지도록 글꼴 크기를 늘리는 것이 도움이 될 수 있습니다.
+
+작은 화면 레이아웃을 최적화하는 것부터 시작하겠습니다. 이 경우, 뷰포트 너비가 `360px` 이상일 때 글꼴을 키워보겠습니다. 둘째, 공간이 충분할 때 고온과 저온을 분리하여 서로 위, 아래로 놓이지 않고 같은 라인에 있도록 할 수 있습니다. 날씨 아이콘도 좀 더 크게 만들어 보겠습니다.
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+마찬가지로 대형 화면의 경우 전체 화면 너비를 사용하지 않도록 예보 패널의 최대 너비로 제한하는 것이 가장 좋습니다.
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch { id: 'responsive-forecast', path: 'style.css' } %}
+
+### 읽기 좋게 텍스트 최적화
+
+고전적인 가독성 이론에 따르면 이상적인 열은 한 줄에 70~80자(영어의 경우 약 8~10단어)를 포함해야 합니다. 따라서 텍스트 블록의 너비가 약 10단어를 초과할 때마다 중단점을 추가하는 것이 좋습니다.
+
+<figure>   {% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="모바일 장치의 텍스트 페이지를 보여주는 스크린샷", width="400", height="488" %}   <figcaption>     모바일 장치에서 읽혀지는 텍스트.   </figcaption></figure>
+
+<figure>   {% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="데스크톱 브라우저의 텍스트 페이지를 보여주는 스크린샷", width="800", height="377" %}   <figcaption>     줄 길이를 제한하기 위해 중단점이 추가된 데스크톱 브라우저에서 읽혀지는 텍스트.   </figcaption></figure>
+
+위의 블로그 게시물 예를 자세히 살펴보겠습니다. 작은 화면에서 `1em`의 Roboto 글꼴은 한 줄에 10단어를 제공하여 완벽하게 작동하지만 큰 화면에서는 중단점이 필요합니다. 이 경우 브라우저 너비가 `575px`보다 크면 이상적인 콘텐츠 너비는 `550px`입니다.
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch { id: 'rwd-reading', path: 'index.html' } %}
+
+### 단순히 콘텐츠를 숨기지 말 것
+
+화면 크기에 따라 숨기거나 표시할 콘텐츠를 선택할 때 주의하세요. 단순히 화면에 맞출 수 없다는 이유로 콘텐츠를 숨기지 마세요. 사용자가 원하는 것이 화면 크기에 의해서만 결정되는 것은 아닙니다. 예를 들어, 일기 예보에서 꽃가루 수를 없애면 봄철에 외출할지 여부를 결정하기 위해 이 정보가 꼭 필요한 알레르기 환자에게 심각한 문제가 될 수 있습니다.
+
+## Chrome DevTools에서 미디어 쿼리 중단점 보기 {: #devtools }
+
+미디어 쿼리 중단점을 설정했으면 이로 인해 사이트가 어떻게 표시되는지 확인하고 싶을 것입니다. 브라우저 창의 크기를 조정하여 중단점을 트리거할 수 있지만 Chrome DevTools에는 다양한 중단점에서 페이지가 어떻게 보이는지 쉽게 확인할 수 있는 기능이 기본적으로 제공됩니다.
+
+<figure>   {% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="날씨 앱이 열려 있고 너비가 822픽셀로 선택된 DevTools의 스크린샷.", width="800", height="522" %}   <figcaption>     더 넓은 뷰포트 크기에서 볼 때 날씨 앱을 보여주는 DevTools.   </figcaption></figure>
+
+<figure>   {% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="날씨 앱이 열려 있고 너비가 436픽셀로 선택된 DevTools의 스크린샷.", width="800", height="521" %}   <figcaption>     더 좁은 뷰포트 크기에서 볼 때 날씨 앱을 보여주는 DevTools.   </figcaption></figure>
+
+다른 중단점에서 페이지를 보려면 다음 단계를 따르세요.
+
+[DevTools](https://developer.chrome.com/docs/devtools/open/)를 연 다음 [Device Mode](https://developer.chrome.com/docs/devtools/device-mode/#toggle)를 켭니다. 기본적으로 [반응형 모드](https://developer.chrome.com/docs/devtools/device-mode/#responsive)에서 열립니다.
+
+미디어 쿼리를 보려면 장치 모드 메뉴를 열고 [미디어 쿼리 표시](https://developer.chrome.com/docs/devtools/device-mode/#queries)를 선택하여 중단점을 페이지 위에 컬러 막대로 표시합니다.
+
+해당 미디어 쿼리가 활성화되어 있는 동안 막대 중 하나를 클릭하여 페이지를 봅니다. 막대를 마우스 오른쪽 버튼으로 클릭하면 미디어 쿼리의 정의를 볼 수 있습니다.
diff --git a/src/site/content/ko/blog/samesite-cookie-recipes/index.md b/src/site/content/ko/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..2cdecfe3f61
--- /dev/null
+++ b/src/site/content/ko/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,169 @@
+---
+title: SameSite 쿠키 레서피
+subhead: SameSite 특성 동작에 대한 향후 변경 사항에 대비하기 위해 사이트의 쿠키를 업데이트하십시오.
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: |2
+
+  새로운 SameSite=None 속성 값의 도입으로 사이트는 이제
+
+  사이트 간 사용을 위해 쿠키를 명시적으로 표시합니다. 브라우저는 다음으로 이동합니다.
+
+  SameSite 속성이 없는 쿠키는 기본적으로 자사로 작동합니다.
+
+  현재 열려 있는 행동보다 더 안전하고 개인 정보를 보호하는 옵션입니다.
+
+  자사 및 타사를 보장하기 위해 쿠키를 마크업하는 방법 알아보기
+
+  이 변경 사항이 적용되면 쿠키는 계속 작동합니다.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %} 이 문서는 `SameSite` 쿠키 속성 변경에 대한 시리즈의 일부입니다.
+
+- [SameSite 쿠키 설명](/samesite-cookies-explained/)
+- [SameSite 쿠키 레서피](/samesite-cookie-recipes/)
+- [계획적인 Same-Site](/schemeful-samesite) {% endAside %}
+
+[Chrome](https://www.chromium.org/updates/same-site) , [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) , [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) 및 기타는 IETF 제안인 [Incrementally Better Cookies에](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) 따라 기본 동작을 다음과 같이 변경합니다.
+
+- `SameSite` 속성이 없는 쿠키 `SameSite=Lax`로 처리됩니다. 즉, 기본 동작은 쿠키를 당사자 컨텍스트**로만** 제한하는 것입니다.
+- 교차 사이트 사용을 위한 쿠키에서 `SameSite=없음; 보안`을 지정**해야** 타사 컨텍스트에 포함을 사용하도록 설정합니다.
+
+이 기능은 [Chrome 84 안정 버전 이후의 기본 동작](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html)입니다. 아직 업데이트하지 않았다면 향후 차단되지 않도록 타사 쿠키의 속성을 업데이트해야 합니다.
+
+## 브라우저 간 지원
+
+MDN의 [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) [페이지의 브라우저 호환성](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie#Browser_compatibility) 섹션을 참조하십시오.
+
+## 교차 사이트 또는 타사 쿠키 사용 사례
+
+타사 컨텍스트에서 쿠키를 보내야 하는 일반적인 사용 사례 및 패턴이 많이 있습니다. 이러한 사용 사례 중 하나를 제공하거나 이에 의존하는 경우 서비스가 계속해서 올바르게 작동하도록 귀하 또는 제공자가 쿠키를 업데이트하고 있는지 확인하십시오.
+
+### `<iframe>` 내의 콘텐츠
+
+`<iframe>`에 표시된 다른 사이트의 콘텐츠는 타사 컨텍스트에 있습니다. 표준 사용 사례는 다음과 같습니다.
+
+- 비디오, 지도, 코드 샘플 및 소셜 게시물과 같은 다른 사이트에서 공유된 포함된 콘텐츠.
+- 결제, 캘린더, 예약 및 예약 기능과 같은 외부 서비스의 위젯.
+- 덜 명확한 `<iframes>`을 생성하는 소셜 버튼 또는 사기 방지 서비스와 같은 위젯.
+
+쿠키는 무엇보다도 세션 상태를 유지하고, 일반 기본 설정을 저장하고, 통계를 활성화하거나, 기존 계정이 있는 사용자를 위해 콘텐츠를 개인화하는 데 사용될 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="포함된 콘텐츠의 URL이 페이지의 URL과 일치하지 않는 브라우저 창의 다이어그램입니다.", width="468", height="383 ", 스타일="최대 너비: 35vw;" %}<figcaption> 포함된 콘텐츠가 최상위 검색 컨텍스트와 동일한 사이트에서 제공되지 않으면 타사 콘텐츠입니다.</figcaption></figure>
+
+또한 웹은 본질적으로 구성 가능하므로 `<iframes>`는 최상위 또는 자사 컨텍스트에서도 볼 수 있는 콘텐츠를 포함하는 데 사용됩니다. 해당 사이트에서 사용하는 모든 쿠키는 사이트가 프레임 내에 표시될 때 타사 쿠키로 간주됩니다. 쿠키를 사용하여 기능을 수행하면서 다른 사람이 쉽게 포함할 수 있는 사이트를 만드는 경우 사이트 간 사용으로 표시되어 있는지 또는 쿠키 없이도 정상적으로 대체할 수 있는지 확인해야 합니다.
+
+### 사이트 전체에서 "안전하지 않은" 요청
+
+여기서 "안전하지 않음"이 약간 우려되는 것처럼 들릴 수 있지만 이는 상태를 변경하려는 모든 요청을 나타냅니다. 웹에서 주로 POST 요청에 해당합니다. `SameSite=Lax`로 표시된 쿠키는 안전한 최상위 탐색(예: 링크를 클릭하여 다른 사이트로 이동)에서 전송됩니다. 그러나 POST를 통해 다른 사이트로 `<form>` 제출과 같은 것은 쿠키를 포함하지 않습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="한 페이지에서 다른 페이지로 이동하는 요청의 다이어그램입니다.", width="719", height="382", style="max-width: 35vw;" %}<figcaption> 들어오는 요청이 "안전한" 방법을 사용하는 경우 쿠키가 전송됩니다.</figcaption></figure>
+
+이 패턴은 사용자를 원격 서비스로 리디렉션하여 반환하기 전에 일부 작업(예: 타사 ID 공급자로 리디렉션)을 수행하도록 리디렉션할 수 있는 사이트에 사용됩니다. 사용자가 사이트를 떠나기 전에 [CSRF(Cross Site Request Forgery)](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) 공격을 완화하기 위해 반환 요청에서 이 토큰을 확인할 수 있다는 기대와 함께 단일 사용 토큰이 포함된 쿠키가 설정됩니다. 반환 요청이 POST를 통해 오는 경우 쿠키를 `SameSite=None; Secure`로 설정해야 합니다.
+
+### 원격 리소스
+
+`<img>` 태그, `<script>` 태그 등에서 요청과 함께 보낼 쿠키에 의존할 수 있습니다. 일반적인 사용 사례에는 픽셀 추적 및 콘텐츠 개인 설정이 포함됩니다.
+
+`fetch` 또는 `XMLHttpRequest`에 의해 JavaScript에서 시작된 요청에도 적용됩니다. `fetch()` [`credentials: 'include'` 옵션](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included) 과 함께 호출되면 해당 요청에서 쿠키가 예상될 수 있다는 좋은 표시입니다. `XMLHttpRequest` `true`로 설정되는 [`withCredentials` 속성의](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials) 인스턴스를 찾아야 합니다. 이는 해당 요청에서 쿠키가 예상될 수 있음을 나타내는 좋은 표시입니다. 이러한 쿠키는 사이트 간 요청에 포함되도록 적절하게 표시되어야 합니다.
+
+### WebView 내의 콘텐츠
+
+플랫폼별 앱의 WebView는 브라우저에서 구동되며 동일한 제한 사항이나 문제가 적용되는지 테스트해야 합니다. Android에서 WebView가 Chrome에 의해 구동되는 경우 새로운 기본값은 Chrome 84에 즉시 적용되지 **않습니다**. 그러나 향후에 적용할 의도이므로 여전히 테스트하고 이에 대비해야 합니다. 또한 Android에서는 플랫폼별 앱이 [CookieManager API](https://developer.android.com/reference/android/webkit/CookieManager)를 통해 직접 쿠키를 설정할 수 있습니다. 헤더 또는 JavaScript를 통해 설정된 쿠키와 마찬가지로 교차 사이트를 위한 경우 `SameSite=None; Secure`를 포함하도록 고려하십시오.
+
+## 지금 바로 `SameSite`를 구현하는 방법
+
+자사 컨텍스트에서만 필요한 쿠키의 경우 필요에 따라 `SameSite=Lax` 또는 `SameSite=Strict`로 표시하는 것이 좋습니다. 아무 것도 하지 않고 브라우저가 기본값을 적용하도록 선택할 수도 있지만, 이는 브라우저 전반에 걸쳐 일관되지 않은 동작과 각 쿠키에 대한 잠재적인 콘솔 경고의 위험이 있습니다.
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+타사 컨텍스트에 필요한 쿠키의 경우 `SameSite=None; Secure`로 표기되었는지 확인해야 합니다. 두 속성이 함께 필요하다는 점을 유념하십시오. `Secure` 없이 `None`을 지정하면 쿠키가 거부됩니다. 하지만 브라우저 구현에는 상호 호환되지 않는 차이점이 있으므로 아래의 [호환되지 않는 클라이언트 처리](#handling-incompatible-clients)에 설명된 완화 전략 중 일부를 사용해야 할 수도 있습니다.
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### 호환되지 않는 클라이언트 처리
+
+`None`을 포함하고 기본 동작을 업데이트하는 이러한 변경 사항은 아직 비교적 새로운 것이기 때문에 이러한 변경 사항을 처리하는 방법에 대해 브라우저 간에 불일치가 있습니다. 현재 알려진 문제에 대해서는 [chromium.org의 업데이트](https://www.chromium.org/updates/same-site/incompatible-clients) 페이지를 참조할 수 있지만 이것이 완전하다고 말할 수는 없습니다. 이것이 이상적이지는 않지만 이 과도기 단계에서 사용할 수 있는 해결 방법이 있습니다. 그러나 일반적인 규칙은 호환되지 않는 클라이언트를 특수한 경우로 취급하는 것입니다. 최신 규칙을 구현하는 브라우저에 대해 예외를 생성하지 마십시오.
+
+첫 번째 옵션은 새 쿠키와 이전 스타일 쿠키를 모두 설정하는 것입니다.
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+새로운 동작을 구현하는 브라우저는 `SameSite` 값으로 쿠키를 설정하지만 다른 브라우저는 쿠키를 무시하거나 잘못 설정할 수 있습니다. 그러나 동일한 브라우저는 `3pcookie-legacy` 쿠키를 설정합니다. 포함된 쿠키를 처리할 때 사이트는 먼저 새 스타일 쿠키의 존재를 확인하고 발견되지 않으면 기존 쿠키로 대체해야 합니다.
+
+아래 예제는 [Express 프레임워크](https://expressjs.com)와 [쿠키 파서](https://www.npmjs.com/package/cookie-parser) 미들웨어를 사용하여 Node.js에서 이 작업을 수행하는 방법을 보여줍니다.
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // Set the new style cookie
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // And set the same value in the legacy cookie
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // check the new style cookie first
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // otherwise fall back to the legacy cookie
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+단점은 여기에 모든 브라우저를 포함하도록 중복 쿠키를 설정하는 것과 쿠키를 설정하고 읽는 시점에서 모두 변경해야 한다는 것입니다. 그러나 이 접근 방식은 동작에 관계없이 모든 브라우저를 포괄해야 하며 타사 쿠키가 이전과 같이 계속 작동하도록 해야 합니다.
+
+`Set-Cookie` 헤더를 보내는 시점에서 사용자 에이전트 문자열을 통해 클라이언트를 감지하도록 선택할 수 있습니다. [호환되지 않는 클라이언트 목록](https://www.chromium.org/updates/same-site/incompatible-clients)을 참조한 다음 플랫폼에 적합한 라이브러리(예: Node.js의 [ua-parser-js](https://www.npmjs.com/package/ua-parser-js) 라이브러리)를 사용하십시오. 사용자 에이전트 감지를 처리할 라이브러리를 찾는 것이 좋습니다. 이러한 정규식을 직접 작성하고 싶지 않을 가능성이 높기 때문입니다.
+
+이 접근 방식의 이점은 쿠키를 설정하는 시점에서 한 번만 변경하면 된다는 것입니다. 그러나 여기서 필요한 경고는 사용자 에이전트 스니핑이 본질적으로 취약하고 영향을 받는 모든 사용자를 포착하지 못할 수 있다는 것입니다.
+
+{% Aside %}
+
+어떤 옵션을 선택하든 기존 경로를 통과하는 트래픽 수준을 기록하는 방법이 있는지 확인하는 것이 좋습니다. 해당 수준이 사이트에 허용되는 임계값 아래로 떨어지면 이 해결 방법을 제거하도록 미리 알림이나 경고가 있는지 확인하십시오.
+
+{% endAside %}
+
+## 언어, 라이브러리 및 프레임워크에서 `SameSite=None` 지원
+
+대부분의 언어와 라이브러리는 쿠키에 대해 `SameSite` 특성을 지원하지만, `SameSite=None` 추가하는 것은 여전히 상대적으로 새로운 것이므로 현재로서는 일부 표준 동작을 해결해야 할 수도 있습니다. 이는 GitHub의 <a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">`SameSite`</a> 예시 리포지토리에 기록되어 있습니다.
+
+## 지원 받기
+
+쿠키는 도처에 있으며 특히 사이트 간 사용 사례를 혼합하여 설정하고 사용하는 사이트를 완전히 감사하는 경우는 드뭅니다. 문제가 발생하면 누구나 처음으로 문제를 겪을 수 있으므로 주저하지 말고 문의하십시오.
+
+- [GitHub의 `SameSite` 예시 리포지토리](https://github.com/GoogleChromeLabs/samesite-examples)에서 문제를 제기하십시오.
+- [StackOverflow의 "samesite" 태그](https://stackoverflow.com/questions/tagged/samesite)에 대한 질문을 블로그에 게시하십시오.
+- Chromium의 동작과 관련된 문제의 경우 [[SameSite 쿠키] 문제 템플릿](https://bit.ly/2lJMd5c)을 통해 버그를 제기하세요.
+- [`SameSite` 업데이트 페이지](https://www.chromium.org/updates/same-site)에서 Chrome의 진행 상황을 따르십시오.
+
diff --git a/src/site/content/ko/blog/samesite-cookies-explained/index.md b/src/site/content/ko/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..716e9c70c20
--- /dev/null
+++ b/src/site/content/ko/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,246 @@
+---
+title: SameSite 쿠키 설명
+subhead: 사이트 간 쿠키를 명시적으로 표시하는 방법을 학습하여 사이트를 보호하세요.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: SameSite 속성을 사용하여 자사 및 타사 사용을 위해 쿠키를 표시하는 방법을 알아보세요. SameSite의 Lax 및 Strict 값을 사용하여 CSRF 공격에 대한 보호를 개선함으로써 사이트의 보안을 강화할 수 있습니다. 새로운 None 특성을 지정하면 사이트 간 사용을 위해 쿠키를 명시적으로 표시할 수 있습니다.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} 이 문서는 `SameSite` 쿠키 특성 변경에 관한 시리즈의 일부입니다.
+
+- [SameSite 쿠키 설명](/samesite-cookies-explained/)
+- [SameSite 쿠키 레시피](/samesite-cookie-recipes/)
+- [계획적인 Same-Site](/schemeful-samesite) {% endAside %}
+
+쿠키는 웹 사이트에 영구적 상태를 추가하는 데 사용할 수 있는 방법 중 하나입니다. 수년에 걸쳐 쿠키의 기능은 성장하고 발전했지만 몇 가지 고질적인 문제가 있는 플랫폼으로 남아 있습니다. 이 문제를 해결하기 위해 브라우저(Chrome, Firefox 및 Edge 포함)는 개인 정보의 보호 수준을 높이는 기본값을 적용하도록 동작을 변경하고 있습니다.
+
+각 쿠키는 해당 쿠키가 사용되는 시기와 위치를 제어하는 여러 특성을 가지고 있는 `key=value` 쌍입니다. 아마도 만료 날짜를 설정하거나 쿠키가 HTTPS를 통해서만 전송되어야 함을 나타내는 데 이미 이러한 특성을 사용했을 것으로 생각합니다. 서버는 응답에 `Set-Cookie`라는 잘 어울리는 이름의 헤더를 전송하여 쿠키를 설정합니다. 자세한 내용은 [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1)에서 알아볼 수 있지만 지금은 여기서는 간단히 복습할 수 있습니다.
+
+사용자에게 "새로운 기능" 프로모션을 표시하려는 블로그가 있다고 가정해 보겠습니다. 사용자는 프로모션을 닫을 수 있고, 그러면 잠시 동안 다시 볼 수 없을 것입니다. 해당 기본 설정을 쿠키에 저장하고, 한 달(2,600,000초) 후에 만료되도록 설정하고, HTTPS를 통해서만 보낼 수 있습니다. 해당 헤더는 다음과 같습니다.
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="3개의 쿠키가 응답으로 서버에서 브라우저로 전송되고 있습니다", width="800", height="276", style="max-width: 35vw" %}<figcaption> 서버는 <code>Set-Cookie</code> 헤더를 사용하여 쿠키를 설정합니다.</figcaption></figure>
+
+독자가 이러한 요구 사항을 충족하는 페이지를 볼 때, 즉 보안 연결에 있고 쿠키가 한 달 미만인 경우 브라우저는 요청에 다음 헤더를 보냅니다.
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="요청에 브라우저에서 서버로 3개의 쿠키를 보내는 중", width="800", height="165", style="max-width: 35vw" %}<figcaption> 귀하의 브라우저에서 <code>Cookie</code> 헤더에 쿠키를 다시 보냅니다.</figcaption></figure>
+
+`document.cookie`를 사용하여 JavaScript에서 해당 사이트에 사용할 수 있는 쿠키를 추가하고 읽을 수도 있습니다. `document.cookie`에 할당을 하면 해당 키를 포함한 쿠키가 생성되거나 재정의됩니다. 예를 들어 브라우저의 JavaScript 콘솔에서 다음을 시도할 수 있습니다.
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+`document.cookie`를 읽으면 현재 컨텍스트에서 액세스할 수 있는 모든 쿠키가 출력되며 각 쿠키는 세미콜론으로 구분됩니다.
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="브라우저 내에서 쿠키에 액세스하는 JavaScript", width="600", height="382", style="max-width: 35vw" %}<figcaption> JavaScript는 <code>document.cookie</code>를 사용하여 쿠키에 액세스할 수 있습니다.</figcaption></figure>
+
+인기 있는 사이트에서 이 기능을 시도하면 대부분이 3개 이상의 쿠키를 설정한다는 것을 알 수 있을 것입니다. 대부분의 경우 이러한 쿠키는 해당 도메인에 대한 각각의 요청에 대해 전송되며 이는 여러 의미를 갖습니다. 사용자에 대해 업로드 대역폭은 다운로드보다 제한적인 경우가 많으므로 모든 아웃바운드 요청에 대한 오버헤드로 인해 첫 바이트까지의 시간이 지연됩니다. 설정하는 쿠키의 수와 크기에서 보수적 입장을 유지하세요. `Max-Age` 특성을 사용하여 쿠키가 필요 이상으로 오래 유지되지 않도록 하세요.
+
+## 자사 및 타사 쿠키란 무엇입니까?
+
+이전에 보았던 동일한 사이트로 돌아가면 현재 방문 중인 도메인뿐만 아니라 다양한 도메인에 대한 쿠키가 있음을 알 수 있습니다. 현재 사이트의 도메인, 즉 브라우저의 주소 표시줄에 표시되는 도메인과 일치하는 쿠키를 **자사** 쿠키라고 합니다. 마찬가지로 현재 사이트가 아닌 다른 도메인의 쿠키를 **타사** 쿠키라고 합니다. 이것은 절대적인 레이블은 아니며 사용자의 컨텍스트에 상대적입니다. 동일한 쿠키가 사용자가 당시 어느 사이트에 있는 지에 따라 자사 또는 타사가 될 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="같은 페이지의 서로 다른 요청에서 브라우저로 3개의 쿠키가 전송되고 있습니다", width="800", height="346", style="max-width: 35vw" %} <figcaption> 쿠키는 한 페이지의 다양한 도메인에서 제공될 수 있습니다. </figcaption></figure>
+
+위의 예를 계속 이어가 보면, 블로그 게시물 중 하나에 정말 멋진 고양이 사진이 있고 `/blog/img/amazing-cat.png`에서 호스팅된다고 가정해 보겠습니다. 이미지가 너무 멋져서 다른 사람이 자신의 사이트에 이 이미지를 직접 사용합니다. 방문자가 귀하의 블로그에 방문했고 `promo_shown` 쿠키가 있는 경우 다른 사람의 사이트에서 `amazing-cat.png`를 볼 때 이미지에 대한 이 요청에서 해당 쿠키가 **전송됩니다**. 이것이 누구에게나 특별하게 유용하지는 않은데, `promo_shown`은 이 다른 사람의 사이트에서 아무 것에도 사용되지 않고 단순히 요청에 오버헤드만 가중시킬뿐이기 때문입니다.
+
+이것이 의도하지 않은 결과라면 그렇게 할 이유가 있을까요? 사이트가 타사 컨텍스트에서 사용될 때 상태를 유지할 수 있도록 하는 것이 바로 이 메커니즘입니다. 예를 들어, 사이트에 YouTube 동영상을 삽입하면 방문자의 플레이어에 "나중에 보기" 옵션이 표시됩니다. 방문자가 이미 YouTube에 로그인되어 있는 경우 해당 세션은 타사 쿠키에 의해 내장 플레이어에서 제공되고 있는 것입니다. 즉, "나중에 보기" 버튼을 누르면 로그인하거나 페이지에서 다른 곳으로 이동했다가 다시 YouTube로 이동할 필요 없이 한 번에 동영상을 저장할 것입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="같은 쿠키가 세 가지 다른 컨텍스트로 전송 중입니다", width="800", height="433", style="max-width: 35vw" %} <figcaption> 타사 컨텍스트의 쿠키는 다른 페이지를 방문할 때 전송됩니다. </figcaption></figure>
+
+웹의 문화적 속성 중 하나는 기본적으로 열려 있는 경향이 있다는 것입니다. 바로 이러한 부분 때문에 많은 사람들이 이곳에서 자신의 콘텐츠와 앱을 만들 수 있는 것입니다. 그러나 이로 인해 많은 보안 및 개인정보보호 문제도 대두됩니다. 사이트 간 요청 위조(CSRF) 공격은 누가 요청을 시작했는 지에 관계없이 쿠키가 지정된 출처에 대한 모든 요청에 첨부된다는 사실을 악용한 것입니다. 예를 들어, `evil.example`를 방문한다면 `your-blog.example`에 대한 요청이 트리거될 수 있고 브라우저는 기꺼이 관련 쿠키를 첨부할 것입니다. 여러분의 블로그가 이러한 요청을 검증하는 방식에 주의를 기울이지 않는다면 `evil.example`이 게시물을 삭제하거나 자체 콘텐츠를 추가하는 등의 작업을 트리거할 수 있습니다.
+
+또한 사용자들은 여러 사이트에서 자신들의 활동을 추적하는 데 쿠키가 어떻게 이용될 수 있는 지에 대해 더 민감해지고 있습니다. 그러나 지금까지 쿠키와 관련하여 자신의 의도를 명시적으로 나타낼 방법은 없었습니다. `promo_shown` 쿠키는 자사 컨텍스트에서만 전송되어야 하는 반면, 다른 사이트에 포함되는 위젯을 위한 세션 쿠키는 타사 컨텍스트에서 로그인 상태를 제공하기 위해 의도적으로 존재합니다.
+
+## `SameSite` 특성을 사용하여 쿠키 사용을 명시적으로 선언
+
+`SameSite` 특성([RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)에 정의됨)을 도입하면 쿠키를 자사 또는 동일 사이트 컨텍스트로 제한해야 하는지 여부를 선언할 수 있습니다. 여기서 '사이트'가 의미하는 바를 정확히 이해하면 도움이 됩니다. 사이트는 도메인 접미사와 바로 앞의 도메인 부분이 결합된 것입니다. 예를 들어 `www.web.dev` 도메인은 `web.dev` 사이트의 일부입니다.
+
+{% Aside 'key-term' %}
+
+사용자가 `www.web.dev`에 있고 `static.web.dev`에서 이미지를 요청하는 경우, 이것은 **same-site** 요청입니다.
+
+{% endAside %}
+
+[공개 접미사 목록](https://publicsuffix.org/)이 이것을 정의하므로 여기에는 `.com`과 같은 최상위 도메인뿐만 아니라 `github.io`와 같은 서비스도 포함합니다. 이를 통해 `your-project.github.io`와 `my-project.github.io`를 별도의 사이트로 간주할 수 있습니다.
+
+{% Aside 'key-term' %}
+
+사용자가 `your-project.github.io`에 있고 `my-project.github.io`에서 이미지를 요청하는 경우, 이것은 **사이트 간** 요청입니다.
+
+{% endAside %}
+
+쿠키에 대한 `SameSite` 특성을 도입하면 이 동작을 제어하는 세 가지 방법이 제공됩니다. 특성을 지정하지 않도록 선택하거나 `Strict` 또는 `Lax`를 사용하여 쿠키를 same-site 요청으로 제한할 수 있습니다.
+
+`SameSite`를 `Strict`으로 설정하면 쿠키가 자사 컨텍스트에서만 전송됩니다. 사용자 측면에서 쿠키는 해당 사이트가 현재 브라우저의 URL 표시줄에 표시된 사이트와 일치하는 경우에만 전송됩니다. 따라서 `promo_shown` 쿠키가 다음과 같이 설정된 경우:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+사용자가 여러분의 사이트에 있으면 예상대로 요청과 함께 쿠키가 전송됩니다. 그러나 다른 사이트에서 또는 친구의 이메일을 통해 여러분의 사이트로 연결되는 링크를 따라가는 경우, 이 초기 요청 시 쿠키가 전송되지 않습니다. 비밀번호 변경 또는 구매와 같이 초기 탐색 시에 항상 작동하는 기능과 관련된 쿠키가 있는 경우에는 이러한 동작이 유용하지만 `promo_shown`에는 너무 제한적입니다. 독자가 이 링크를 따라 사이트로 들어올 때는 기본 설정을 적용할 수 있도록 쿠키가 전송되기를 원합니다.
+
+이러한 최상위 탐색과 함께 쿠키를 보낼 수 있게 하는 `SameSite=Lax`가 바로 이 경우에 도움을 줍니다. 다른 사이트에서 여러분의 콘텐츠를 참조하는 위의 고양이 기사의 예를 다시 살펴보겠습니다. 그들은 고양이 사진을 직접 사용하고 원본 기사에 대한 링크를 제공합니다.
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+그리고 쿠키는 다음과 같이 설정되었습니다.
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+독자가 다른 사람의 블로그에 있을 때 브라우저가 `amazing-cat.png`를 요청하면 쿠키가 **전송되지 않습니다**. 그러나 독자가 블로그의 `cat.html` 링크를 따라가면 해당 요청에 쿠키가 **포함됩니다.** 따라서 `Lax`는 사이트 표시에 영향을 미치는 쿠키에 좋은 선택이고, `Strict`는 사용자가 수행하는 작업과 관련된 쿠키에 유용합니다.
+
+{% Aside 'caution' %}
+
+`Strict`과 `Lax` 모두 사이트 보안을 위한 완벽한 솔루션은 아닙니다. 쿠키는 사용자 요청의 일부로 전송되며 다른 사용자 입력과 동일하게 취급해야 합니다. 즉, 입력을 적절하게 검열하고 유효성을 확인해야 한다는 것입니다. 서버 측 기밀로 간주되는 데이터를 저장하는 데 절대 쿠키를 사용하지 마세요.
+
+{% endAside %}
+
+마지막으로, 이전에 모든 컨텍스트에서 쿠키가 전송되기를 원한다는 사실을 암시적으로 명시하는 방식으로서, 값을 지정하지 않는 방법이 있습니다. [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03)의 최신 초안에서는 `SameSite=None`의 새 값을 도입하여 이 부분을 명시적으로 나타냅니다. 즉, `None`을 사용하여 의도적으로 타자 컨텍스트에서 쿠키가 전송되기를 원한다는 사실을 명확하게 전달할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="해당 컨텍스트에 따라 세 가지 쿠키에 None, Lax 또는 Strict의 레이블이 붙습니다", width="800", height="456", style="max-width: 35vw" %} <figcaption> 쿠키의 컨텍스트를 <code>None</code>, <code>Lax</code> 또는 <code>Strict</code>으로 명시적으로 나타냅니다. </figcaption></figure>
+
+{% Aside %}
+
+위젯, 포함된 콘텐츠, 제휴 프로그램, 광고 또는 여러 사이트에 걸친 로그인과 같이 다른 사이트에서 소비하는 서비스를 제공하는 경우, 의도를 명확하게 하기 위해 `None`을 사용해야 합니다.
+
+{% endAside %}
+
+## SameSite가 없는 기본 동작으로 변경
+
+`SameSite` 특성은 널리 지원되지만 많은 개발자들이 채택하고 있지는 않습니다. 쿠키를 전송하는 것이 너무나 일반화되어 있어서 모든 사용 사례가 작동하지만, 이것은 또한 사용자가 CSRF 및 의도하지 않은 정보 누출에 취약하다는 것을 의미합니다. 개발자가 의도를 드러내고 사용자에게 더 안전한 경험을 제공하도록 장려하기 위해 IETF에서 제안한 [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00)는 두 가지 주요 변경을 제시하고 있습니다.
+
+- `SameSite` 특성이 없는 쿠키는 `SameSite=Lax`로 처리됩니다.
+- `SameSite=None`을 포함한 쿠키는 `Secure`도 지정해야 합니다. 즉, 보안 컨텍스트가 필요합니다.
+
+Chrome은 버전 84부터 이 기본 동작을 구현합니다. [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ)는 Firefox 69부터 테스트 버전을 제공하고 있으며 향후 기본 동작으로 만들 것입니다. Firefox에서 이러한 동작을 테스트하려면 [`about:config`](http://kb.mozillazine.org/About:config)을 열고 `network.cookie.sameSite.laxByDefault`를 설정하세요. [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) 또한 기본 동작을 변경할 계획입니다.
+
+{% Aside %}
+
+추가 브라우저 지원에 대한 발표가 나오면 이 문서도 업데이트됩니다.
+
+{% endAside %}
+
+### `SameSite=Lax`를 기본적으로 설정
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+어떤 `SameSite` 특성도 지정하지 않고 쿠키를 보내면…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+브라우저는 이 쿠키를 `SameSite=Lax`가 지정된 것처럼 처리합니다.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+이는 보다 안전한 기본값을 적용하려는 것이지만 브라우저에서 자체적으로 적용해주기를 바라기 보다는 `SameSite` 특성을 명시적으로 설정하는 것이 바람직합니다. 그러면 쿠키에 대한 의도가 명확해지고 여러 브라우저에서 일관된 경험을 할 수 있을 가능성이 높아집니다.
+
+{% Aside 'caution' %}
+
+Chrome에서 적용하는 기본 동작은 명시적 `SameSite=Lax`보다 약간 더 관대한데, 특정 쿠키가 최상위 POST 요청에서 전송되도록 허용하기 때문입니다. [blink-dev 공지](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ)에서 정확한 세부 내용을 확인할 수 있습니다. 이것은 임시 방편으로 마련된 것이므로 `SameSite=None; Secure`을 사용하도록 사이트 간 쿠키를 수정할 필요성은 여전히 있습니다.
+
+{% endAside %}
+
+### `SameSite=None`은 안전해야 합니다
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+`Secure` 없이 쿠키를 설정하면 **거부됩니다**.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+`SameSite=None`을 `Secure` 특성과 쌍으로 구성해야 합니다.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+`about://flags/#cookies-without-same-site-must-be-secure`를 활성화하여 Chrome 76부터 이 동작을 테스트할 수 있으며 Firefox 69부터는 [`about:config`](http://kb.mozillazine.org/About:config)에서 `network.cookie.sameSite.noneRequiresSecure`를 설정하면 됩니다.
+
+새 쿠키를 설정할 때 이를 적용하고 만료일이 다가오지 않았더라도 기존 쿠키를 새로 고칠 수 있습니다.
+
+{% Aside 'note' %}
+
+사이트에서 타사 콘텐츠를 제공하는 서비스를 이용하는 경우 해당 서비스를 업데이트하고 있는지 공급자에게도 확인해야 합니다. 사이트에서 새 동작이 적용되도록 종속성 또는 스니펫을 업데이트해야 할 수도 있습니다.
+
+{% endAside %}
+
+이러한 변경 사항은 이전 버전의 `SameSite` 특성을 올바르게 구현한 브라우저와 하위 호환되며, 그렇지 않으면 전혀 지원하지 않습니다. 쿠키에 이러한 변경 사항을 적용하면 브라우저의 기본 동작에 의존하지 않고 쿠키의 용도를 명시적으로 나타낼 수 있습니다. 마찬가지로, 아직까지 `SameSite=None`을 인식하지 못하는 클라이언트는 이를 무시하고 특성이 설정되지 않은 것처럼 계속 작동하게 됩니다.
+
+{% Aside 'warning' %}
+
+Chrome, Safari 및 UC 브라우저를 비롯한 이전 버전의 여러 브라우저는 새로운 `None` 특성과 호환되지 않으며 쿠키를 무시하거나 제한할 수 있습니다. 이 동작은 현재 버전에서 수정되었지만 트래픽을 확인하여 영향을 받는 사용자의 비율을 파악해야 합니다. [Chromium 사이트에서 알려진 비호환 클라이언트 목록](https://www.chromium.org/updates/same-site/incompatible-clients)을 찾아볼 수 있습니다.
+
+{% endAside %}
+
+## `SameSite` 쿠키 레시피
+
+`SameSite=None`에 대한 이러한 변경 사항과 브라우저 동작의 차이를 성공적으로 처리하도록 쿠키를 업데이트하는 방법에 대한 자세한 내용은 후속 게시물, [SameSite 쿠키 레시피](/samesite-cookie-recipes)를 참조하세요.
+
+_Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner, Vivek Sekhar의 기여와 피드백에 감사드립니다._
+
+_[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)의 [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)가 제공한 쿠키 영웅 이미지_
diff --git a/src/site/content/ko/blog/schemeful-samesite/index.md b/src/site/content/ko/blog/schemeful-samesite/index.md
new file mode 100644
index 00000000000..1fed06d3af8
--- /dev/null
+++ b/src/site/content/ko/blog/schemeful-samesite/index.md
@@ -0,0 +1,240 @@
+---
+layout: post
+title: Schemeful 동일 사이트
+subhead: '"동일 사이트"의 정의는 URL 체계를 포함하도록 진화하고 있습니다. 따라서 사이트의 HTTP와 HTTPS 버전 간의 링크는 이제 크로스 사이트 요청으로 계산됩니다. 가능한 한 문제를 방지하기 위해 기본적으로 HTTPS로 업그레이드하거나 어떤 SameSite 속성 값이 필요한지에 대한 자세한 내용을 계속 읽어보세요.'
+description: '"동일 사이트"의 정의는 URL 체계를 포함하도록 진화하고 있습니다. 따라서 사이트의 HTTP와 HTTPS 버전 간의 링크는 이제 크로스 사이트 요청으로 계산됩니다. 가능한 한 문제를 방지하기 위해 기본적으로 HTTPS로 업그레이드하거나 어떤 SameSite 속성 값이 필요한지에 대한 자세한 내용을 계속 읽어보세요.'
+authors:
+  - bingler
+  - rowan_m
+date: 2020-11-20
+hero: image/admin/UMxBPy0AKAfbzxwgTroV.jpg
+thumbnail: image/admin/3J33n1o98vnkO6fdDFwP.jpg
+alt: 두 접시에 따로 담긴 쿠키. 접시는 서로 다른 체계, HTTP 및 HTTPS를 나타냅니다. 쿠키는 쿠키를 나타냅니다.
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} 이 문서는 `SameSite` 쿠키 특성 변경에 관한 시리즈의 일부입니다.
+
+- [SameSite 쿠키 설명](/samesite-cookies-explained/)
+- [SameSite 쿠키 레시피](/samesite-cookie-recipes/)
+- [Schemeful 동일 사이트](/schemeful-samesite) {% endAside %}
+
+[Schemeful 동일 사이트](https://mikewest.github.io/cookie-incrementalism/draft-west-cookie-incrementalism.html#rfc.section.3.3)는 웹(사이트)의 정의를 등록 가능한 도메인에서 Scheme + 등록 가능한 도메인으로 바꿔놓습니다. ["동일 사이트" 및 "동일 출처" 이해하기](/same-site-same-origin/#%22schemeful-same-site%22)에서 자세한 내용과 예를 찾아볼 수 있습니다.
+
+{% Aside 'key-term' %} 다시 말하면, 사이트의 안전하지 않은 HTTP 버전(예를 들어, **http**://website.example)과 해당 사이트의 보안 HTTPS 버전(예를 들어, **https**://website.example)이 이제 각 사이트에 대해 **크로스 사이트**로 간주됩니다. {% endAside %}
+
+좋은 소식은 웹사이트가 이미 HTTPS로 완전히 업그레이드되었다면 아무것도 시경 쓸 필요가 없다는 것입니다. 바뀌는 것은 아무것도 없습니다.
+
+아직 웹사이트를 완전히 업그레이드하지 않았다면 최우선적으로 그렇게 해야 합니다. 그러나 사이트 방문자가 HTTP와 HTTPS 사이를 전환하는 경우가 있다면 이러한 일반적인 일부 시나리오와 관련된 `SameSite` 쿠키 동작을 아래에 요약했으니 참고하세요.
+
+{% Aside 'warning' %} 장기적 계획은 [타사 쿠키에 대한 지원을 완전히 단계적으로 중단하고](https://blog.chromium.org/2020/10/progress-on-privacy-sandbox-and.html) 개인정보를 보호하는 대체 방법으로 전환하는 것입니다. 쿠키에서 `SameSite=None; Secure`를 설정하여 scheme 사이에 이를 전송할 수 있도록 하는 방법은 완전한 HTTPS로의 마이그레이션을 앞두고 임시적으로 채택할 수 있는 솔루션으로 생각해야 합니다. {% endAside %}
+
+Chrome과 Firefox 모두에서 테스트를 위해 이러한 변경을 활성화할 수 있습니다.
+
+- Chrome 86에서 `about://flags/#schemeful-same-site`를 활성화합니다. [Chrome 상태 페이지](https://chromestatus.com/feature/5096179480133632)에서 진행 상황을 추적합니다.
+- Firefox 79에서는 `about:config`를 통해 `network.cookie.sameSite.schemeful`을 `true`로 설정합니다. [Bugzilla 이슈](https://bugzilla.mozilla.org/show_bug.cgi?id=1651119)를 통해 진행 상황을 추적하세요.
+
+`SameSite=Lax`를 쿠키의 기본값으로 변경하려는 주요 이유 중 하나는 [CSRF(Cross-Site Request Forgery)](https://developer.mozilla.org/docs/Glossary/CSRF)로부터 보호하기 위한 것이었습니다. 그러나 안전하지 않은 HTTP 트래픽은 여전히 네트워크 공격자가 쿠키를 변조한 다음 사이트의 보안 HTTPS 버전에서 이를 사용할 수 있는 기회를 제공합니다. Scheme 사이에서 이러한 추가적인 크로스 사이트 경계를 생성하면 이러한 공격에 대비하는 추가 방어선이 만들어집니다.
+
+## 일반적인 크로스-Scheme 시나리오
+
+{% Aside 'key-term' %} URL이 모두 동일한 등록 가능한 도메인(예: site.example)을 갖지만 다른 scheme(예를 들어, **http**://site.example 대 **https**://site.example)을 사용하는 아래 예와 같은 상황에서 이를 서로 간에 **크로스-scheme**이라고 합니다. {% endAside %}
+
+### 이동
+
+웹사이트의 크로스-scheme 버전 사이를 이동하면(예를 들어, **http**://site.example에서 **https**://site.example로 연결) 이전에는 `SameSite=Strict` 쿠키를 보낼 수 있었습니다. 이것은 현재 크로스 사이트 이동으로 취급되어 `SameSite=Strict` 쿠키가 차단됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yDViqKg9eeEeAEiCNqe4.png", alt="사이트의 안전하지 않은 HTTP 버전에서 안전한 HTTPS 버전으로 연결되는 링크를 따라가면 크로스-scheme 이동이 트리거됩니다. SameSite=Strick 쿠키 차단됨, SameSite=Lax 및 SameSite=None; 보안 쿠키는 허용됩니다.", width="800", height="342" %}<figcaption> HTTP에서 HTTPS로의 크로스-scheme 이동.</figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ 차단됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>✓ 허용됨</td>
+   <td>✓ 허용됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ 허용됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+</table>
+
+### 하위 리소스 로딩
+
+{% Aside 'warning' %} 모든 주요 브라우저는 스크립트 또는 iframe과 같은 [활성 혼합 콘텐츠](https://developer.mozilla.org/docs/Web/Security/Mixed_content)를 차단합니다. 또한 [Chrome](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) 및 [Firefox](https://groups.google.com/g/mozilla.dev.platform/c/F163Jz32oYY)를 포함한 브라우저는 수동 혼합 콘텐츠를 업그레이드하거나 차단하는 방향으로 가고 있습니다. {% endAside %}
+
+여기서의 변경 사항은 완전한 HTTPS로 업그레이드하는 과정을 진행하는 동안 임시 해결책으로만 간주해야 합니다.
+
+하위 리소스의 예로는 이미지, iframe 및 XHR 또는 Fetch를 사용한 네트워크 요청이 있습니다.
+
+페이지에 크로스-scheme 하위 리소스를 로드하면 이전에는 `SameSite=Strict` 또는 `SameSite=Lax` 쿠키를 보내거나 설정할 수 있었습니다. 이제 이것은 다른 타사 또는 크로스 사이트 하위 리소스와 동일한 방식으로 처리됩니다. 즉, `SameSite=Strict` 또는 `SameSite=Lax` 쿠키가 차단됩니다.
+
+또한 브라우저가 보안되지 않은 scheme의 리소스를 보안 페이지에 로드하도록 허용하더라도 타사 또는 크로스 사이트 쿠키에 `Secure`가 필요하므로 이러한 요청에서 모든 쿠키가 차단됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GgR6Yln1f9JGkt04exRC.png", alt="사이트의 보안 HTTPS 버전 리소스에서 발생하는 크로스-scheme 하위 리소스가 비보안 HTTP 버전에 포함됨. SameSite=Strict 및 SameSite=Lax 쿠키가 차단됨, SameSite=None; 보안 쿠키는 허용됩니다.", width="800", height="285" %}<figcaption> HTTPS를 통해 크로스-scheme 하위 리소스를 포함하는 HTTP 페이지.</figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ 차단됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ 차단됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ 허용됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+</table>
+
+### 양식 게시
+
+웹사이트의 크로스-scheme 버전 간에 게시하면 이전에는 `SameSite=Lax` 또는 `SameSite=Strict`로 설정된 쿠키가 전송될 수 있었습니다. 이제 이것은 크로스 사이트 POST로 처리됩니다. 즉, `SameSite=None` 쿠키만 보낼 수 있습니다. 기본적으로 안전하지 않은 버전을 제공하지만 로그인 또는 체크아웃 양식을 제출할 때 사용자를 보안 버전으로 업그레이드하는 사이트에서 이러한 상황이 발생할 수 있습니다.
+
+하위 리소스와 마찬가지로 요청이 보안(예: HTTPS)에서 비보안(예: HTTP) 컨텍스트로 이동하는 경우 타사 또는 크로스 사이트 쿠키에 `Secure`가 필요하므로 이러한 요청에서 모든 쿠키가 차단됩니다.
+
+{% Aside 'warning' %} 여기에서 가장 좋은 해결책은 양식 페이지와 대상이 모두 HTTPS와 같은 보안 연결상에 있는지 확인하는 것입니다. 이는 사용자가 양식에 민감한 정보를 입력하는 경우 특히 중요합니다. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ud9LkDeGJUWHObifD718.png", alt="사이트의 비보안 HTTP 버전 양식에서 크로스-scheme으로 양식을 제출하면 보안 HTTPS 버전으로 제출됨. SameSite=Strict 및 SameSite=Lax 쿠키 차단됨, 및 SameSite=None; 쿠키가 허용됩니다.", width="800", height="376" %}<figcaption> HTTP에서 HTTPS로 크로스-scheme 양식 제출.</figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ 차단됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ 차단됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ 허용됨</td>
+   <td>⛔ 차단됨</td>
+  </tr>
+</table>
+
+## 내 사이트를 테스트하려면 어떻게 해야 하나요?
+
+개발자 도구 및 메시징은 Chrome 및 Firefox에서 사용할 수 있습니다.
+
+Chrome 86부터 [DevTools의 Issue 탭](https://developer.chrome.com/docs/devtools/issues/)에 Schemeful Same-Site 이슈가 포함됩니다. 사이트에 대해 다음 이슈가 강조 표시되는 것을 볼 수도 있습니다.
+
+이동 문제:
+
+- "동일 사이트 요청에서 계속 쿠키를 보내려면 완전히 HTTPS로 마이그레이션하십시오." - 향후 Chrome 버전에서 쿠키가 **차단될 것이라는** 경고입니다.
+- "동일 사이트 요청에서 쿠키를 보내려면 완전히 HTTPS로 마이그레이션하십시오." - 쿠키가 **차단되었다는** 경고입니다.
+
+하위 리소스 로드 문제:
+
+- "동일 사이트 하위 리소스로 계속 쿠키를 보내려면 완전히 HTTPS로 마이그레이션하십시오." 또는 "동일 사이트 하위 리소스에서 쿠키를 계속 설정하도록 하려면 완전히 HTTPS로 마이그레이션하십시오." - 향후 Chrome 버전에서 쿠키가 **차단될 것이라는** 경고입니다.
+- "동일 사이트 하위 리소스로 쿠키를 보내려면 완전히 HTTPS로 마이그레이션하십시오." 또는 "동일 사이트 하위 리소스에서 쿠키를 설정할 수 있게 하려면 완전히 HTTPS로 마이그레이션하십시오." - 쿠키가 **차단되었음**을 경고합니다. 후자의 경고는 양식을 게시할 때도 나타날 수 있습니다.
+
+자세한 내용은 [Schemeful 동일 사이트에 대한 테스트 및 디버깅 팁](https://www.chromium.org/updates/schemeful-same-site/testing-and-debugging-tips-for-schemeful-same-site)에서 확인할 수 있습니다.
+
+Firefox 79부터 `network.cookie.sameSite.schemeful`이 `about:config`를 통해 `true`로 설정되면 콘솔에 Schemeful 동일 사이트 문제에 대한 메시지가 표시됩니다. 해당 사이트에서 다음 메시지를 볼 수도 있습니다.
+
+- "Scheme이 일치하지 않기 때문에 쿠키 `cookie_name`은 **조만간** `http://site.example/`에 대해 크로스 사이트 쿠키로 취급됩니다."
+- "Scheme이 일치하지 않기 때문에 쿠키 `cookie_name`은 `http://site.example/`에 대해 크로스 사이트로 **취급되었습니다**."
+
+## 자주하는 질문
+
+### 내 사이트는 이미 HTTPS에서 완전히 사용 가능합니다. 내 브라우저의 DevTools에 문제가 표시되는 이유는 무엇인가요?
+
+일부 링크와 하위 리소스가 여전히 안전하지 않은 URL을 가리킬 수 있습니다.
+
+이 문제를 해결하는 한 가지 방법은 [HTTP Strict-Transport-Security](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)(HSTS) 및 `includeSubDomain` 지시문을 사용하는 것입니다. HSTS + `includeSubDomain`을 사용하면 페이지 중 하나에 실수로 안전하지 않은 링크가 포함된 경우에도 브라우저가 자동으로 보안 버전을 대신 사용합니다.
+
+### HTTPS로 업그레이드할 수 없으면 어떻게 하나요?
+
+사용자를 보호하기 위해 사이트를 완전히 HTTPS로 업그레이드할 것을 강력히 권장하지만 스스로 할 수 없는 경우 호스팅 제공업체에 해당 옵션을 제공할 수 있는지 문의하는 것이 좋습니다. 자체 호스팅하는 경우 [Let's Encrypt](https://letsencrypt.org/)에서 인증서를 설치하고 구성할 수 있는 다양한 도구를 제공합니다. HTTPS 연결을 제공할 수 있는 CDN 또는 기타 프록시 뒤로 사이트를 이동하는 방법도 고려해볼 수 있습니다.
+
+여전히 가능하지 않은 경우 영향을 받는 쿠키에서 `SameSite` 보호를 완화시켜 보세요.
+
+- `SameSite=Strict` 쿠키만 차단되는 경우 보호를 `Lax`로 낮출 수 있습니다.
+- `Strict` 및 `Lax` 쿠키가 모두 차단되고 쿠키가 보안 URL로 전송(또는 이로부터 설정)되는 경우 보호를 `None`으로 낮출 수 있습니다.
+    - 이 해결 방법은 쿠키를 보내는(또는 쿠키를 설정하는) URL이 안전하지 않은 경우 **실패합니다**. `SameSite=None`에는 쿠키에서 `Secure` 특성이 필요하기 때문입니다. 즉, 이러한 쿠키는 안전하지 않은 연결을 통해 전송되거나 설정되지 않을 수 있습니다. 이 경우 사이트가 HTTPS로 업그레이드될 때까지 해당 쿠키에 액세스할 수 없습니다.
+    - 결국 제3자 쿠키가 완전히 단계적으로 제거될 것이므로 이는 일시적이라는 점을 기억하세요.
+
+### `SameSite` 특성을 지정하지 않은 경우 쿠키에 어떤 영향을 미치나요?
+
+`SameSite` 특성이 없는 쿠키는 `SameSite=Lax`를 지정한 것처럼 처리되며 동일한 크로스-scheme 동작이 이러한 쿠키에도 적용됩니다. 안전하지 않은 방법에 대한 임시 예외는 계속 적용됩니다. 자세한 내용은 <a href="https://www.chromium.org/updates/same-site/faq" data-md-type="link">Chromium `SameSite`에서 Lax + POST 완화 FAQ</a>를 참조하세요.
+
+### WebSocket은 어떤 영향을 받나요?
+
+WebSocket 연결은 페이지와 동일한 보안성을 가진 경우 여전히 동일 사이트로 간주됩니다.
+
+동일 사이트:
+
+- `https://`에서 `wss://` 연결
+- `http://`에서 `ws://` 연결
+
+크로스 사이트:
+
+- `http://`에서 `wss://` 연결
+- `https://`에서 `ws://` 연결
+
+*[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)에서 제공된 [Julissa Capdevilla](https://unsplash.com/photos/wNjgWrEXAL0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 사진*
diff --git a/src/site/content/ko/blog/stale-while-revalidate/index.md b/src/site/content/ko/blog/stale-while-revalidate/index.md
new file mode 100644
index 00000000000..3690d8d0ea1
--- /dev/null
+++ b/src/site/content/ko/blog/stale-while-revalidate/index.md
@@ -0,0 +1,95 @@
+---
+title: stale-while-revalidate로 최신 상태 유지
+subhead: 웹 앱을 제공할 때 즉시성과 최신성의 균형을 유지하는 데 도움이 되는 추가 도구입니다.
+authors:
+  - jeffposnick
+date: 2019-07-18
+description: stale-while-revalidate는 개발자가 캐시된 콘텐츠를 즉시 로드하는 즉시성과 캐시된 콘텐츠에 대한 업데이트가 향후에 사용되도록 보장하는 최신성 간의 균형을 유지하는 데 도움이 됩니다.
+hero: image/admin/skgQgcT3q8fdBGGNL3o1.jpg
+alt: 반쯤 칠한 벽의 사진입니다.
+tags:
+  - blog
+feedback:
+  - api
+---
+
+## 제공된 것은?
+
+[`stale-while-revalidate`](https://tools.ietf.org/html/rfc5861#section-3)는 개발자가 캐시된 *콘텐츠를 즉시 로드*하는 즉시성과 *캐시된 콘텐츠에 대한 업데이트가 향후에 사용되도록 보장*하는 최신성 간의 균형을 유지하는 데 도움이 됩니다. 정기적으로 업데이트되는 서드파티 웹 서비스 또는 라이브러리를 유지 관리하거나 자사 자산의 수명이 짧은 경향이 있는 경우 `stale-while-revalidate`가 기존 캐싱 정책에 유용한 추가 기능이 될 수 있습니다.
+
+`Cache-Control`에서 `max-age`와 함께 `stale-while-revalidate` 설정 지원은 [Chrome 75](https://chromestatus.com/feature/5050913014153216) 및 [Firefox 68](https://bugzilla.mozilla.org/show_bug.cgi?id=1536511)에서 사용할 수 있습니다.
+
+`stale-while-revalidate`를 지원하지 않는 브라우저는 해당 구성 값을 자동으로 무시하고 [`max-age`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#max-age)를 사용합니다. 간단히 설명하겠습니다…
+
+## 무슨 뜻인가요?
+
+`stale-while-revalidate`를 다음과 같은 두 부분으로 나누겠습니다. 캐시된 응답이 오래될 수 있다는 아이디어와 재검증 프로세스입니다.
+
+첫째, 브라우저는 캐시된 응답이 "오래된 것"인지 여부를 어떻게 알 수 있나요? `stale-while-revalidate`를 포함한 [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) 응답 헤더는 `max-age` 또한 포함해야 하며, 오래된 것인지 여부를 결정하는 `max-age`를 통해 지정된 시간(초)을 포함해야 합니다.  `max-age` 보다 새로운 캐시된 응답은 최신 것으로 간주되고 더 오래된 캐시된 응답은 오래된 것으로 간주됩니다.
+
+로컬로 캐시된 응답이 아직 최신 상태이면 그대로 사용하여 브라우저의 요청을 이행할 수 있습니다. `stale-while-revalidate`의 관점에서 보면 이 시나리오에서는 할 일이 없습니다.
+
+그러나 캐시된 응답이 오래된 경우 다른 연령 기반 검사가 수행됩니다. 캐시된 응답의 기간이 `stale-while-revalidate` 설정에 포함된느 기간 내에 포함됩니까?
+
+오래된 응답 기간이 이 창에 해당하는 경우 브라우저의 요청을 이행하는 데 사용됩니다. 동시에 캐시된 응답의 사용을 지연시키지 않는 방식으로 네트워크에 대해 "재검증" 요청이 이루어집니다. 반환된 응답은 이전에 캐시된 응답과 동일한 정보를 포함하거나 다를 수 있습니다. 어느 쪽이든 네트워크 응답은 로컬에 저장되어 이전에 캐시된 항목을 대체하고 향후 `max-age` 비교 중에 사용되는 "최신성" 타이머를 재설정합니다.
+
+그러나 오래된 캐시된 응답이 오래되어 `stale-while-revalidate` 기간을 벗어나면 브라우저의 요청을 이행하지 않습니다. 브라우저는 대신 네트워크에서 응답을 검색하고 이를 사용하여 초기 요청을 수행하고 로컬 캐시를 새로운 응답으로 채웁니다.
+
+## 실전 예시
+
+다음은 현재 시간을 반환하기 위한 HTTP API의 간단한 예입니다. 보다 구체적으로 말하면 현재 시간이 지난 시간(분)입니다.
+
+{% Glitch { id: 'swr-demo', path: 'server.js:20:15', height: 346 } %}
+
+이 시나리오에서 웹 서버는 HTTP 응답에서 이 `Cache-Control` 헤더를 사용합니다.
+
+```text
+Cache-Control: max-age=1, stale-while-revalidate=59
+```
+
+이 설정은 시간에 대한 요청이 다음 1초 이내에 반복되는 경우 이전에 캐시된 값이 여전히 최신 상태이며 재검증 없이 그대로 사용됨을 의미합니다.
+
+1초에서 60초 사이에 요청이 반복되면 캐시된 값은 유효하지 않지만 API 요청을 이행하는 데 사용됩니다. 동시에 "백그라운드에서" 나중에 사용할 수 있도록 캐시를 새 값으로 채우기 위해 유효성 재확인 요청이 수행됩니다.
+
+요청이 60초 이상 지난 후 반복되면 오래된 응답이 전혀 사용되지 않으며 브라우저의 요청을 이행하고 캐시 재검증이 모두 네트워크에서 응답을 받는 데 달려 있습니다.
+
+다음은 이 세 가지 상태에 대한 분석과 각 상태가 우리 예에 적용되는 기간입니다.
+
+{% Img src="image/admin/C8lg2FSEqhTKR6WmYky3.svg", alt="이전 섹션의 정보를 보여주는 다이어그램입니다.", width="719", height="370" %}
+
+## 일반적인 사용 사례는 무엇인가요?
+
+"시간 후 몇 분" API 서비스에 대한 위의 예는 고안되었지만 예상되는 사용 사례를 보여줍니다. 새로 고쳐야 하지만 어느 정도의 진부함을 수용할 수 있는 정보를 제공하는 서비스입니다.
+
+덜 인위적인 예는 현재 기상 조건에 대한 API 또는 지난 한 시간 동안 작성된 주요 뉴스 헤드라인일 수 있습니다.
+
+일반적으로 알려진 간격으로 업데이트되는 모든 응답은 여러 번 요청될 가능성이 있으며 해당 간격 내에서 정적이며 `max-age`를 통한 단기 캐싱의 좋은 후보입니다. `max-age`와 함께 `stale-while-revalidate`를 사용하면 네트워크 응답을 차단하지 않고도 캐시에서 최신 콘텐츠로 향후 요청을 이행할 수 있는 가능성이 높아집니다.
+
+## 서비스 워커와 어떻게 상호 작용하나요?
+
+`stale-while-revalidate` 기회에 대해 들어본 적이 있다면 이것은 [서비스 워커](/service-workers-cache-storage/) 내에서 사용되는 [레시피](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate)의 컨텍스트에 있다는 것입니다.
+
+`Cache-Control` 헤더를 통해 stale-while-revalidate를 사용하는 것은 서비스 워커에서 사용하는 것과 몇 가지 유사점을 공유하며 최신성 절충 및 최대 수명에 대한 동일한 고려 사항이 많이 적용됩니다. `Cache-Control` 헤더 구성에만 의존할지 결정할 때 고려해야 할 몇 가지 고려 사항이 있습니다.
+
+### 다음과 같은 경우 서비스 워커 접근 방식을 사용하세요…
+
+- 웹 앱에서 이미 서비스 워커를 사용하고 있습니다.
+- 캐시 콘텐츠에 대한 세밀한 제어가 필요하고 가장 최근에 사용한 만료 정책과 같은 것을 구현하려고 합니다. Workbox의 [Cache Expiration](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/) 모듈이 도움이 될 수 있습니다.
+- 재검증 단계 동안 백그라운드에서 오래된 응답이 변경될 때 알림을 받고 싶습니다. Workbox의 [브로드캐스트 캐시 업데이트](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/) 모듈이 이에 도움이 될 수 있습니다.
+- 모든 최신 브라우저에서 `stale-while-revalidate` 동작이 필요합니다.
+
+### 다음과 같은 경우 캐시 제어 접근 방식을 사용하세요…
+
+- 웹 앱용 서비스 작업자를 배포하고 유지 관리하는 오버헤드를 처리하지 않는 것이 좋습니다.
+- 브라우저의 자동 캐시 관리로 로컬 캐시가 너무 커지는 것을 방지할 수 있습니다.
+- 현재 모든 최신 브라우저에서 지원되지 않는 접근 방식은 문제가 없습니다(2019년 7월 기준, 향후 지원이 늘어날 수 있음).
+
+서비스 워커를 사용하고 있고 `Cache-Control` 헤더를 통해 일부 응답에 대해 `stale-while-revalidate`를 활성화한 경우 서비스 워커는 일반적으로 요청에 응답할 때 "첫 번째 크랙"을 갖게 됩니다. 서비스 워커가 응답하지 않기로 결정하거나 응답을 생성하는 과정에서 [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API)를 사용한 다음 `Cache-Control` 헤더를 통해 구성된 동작이 적용됩니다.
+
+## 더 알아보기
+
+- Fetch API 사양의 [`stale-while-revalidate` 응답.](https://fetch.spec.whatwg.org/#concept-stale-while-revalidate-response)
+- [RFC 5861](https://tools.ietf.org/html/rfc5861), 초기 `stale-while-revalidate` 사양을 다룹니다.
+- [HTTP 캐시: 첫 번째 방어선](/http-cache/), 이 사이트의 "네트워크 안정성" 가이드에 있습니다.
+
+*사무엘 젤러의 영웅 이미지.*
diff --git a/src/site/content/ko/blog/storage-for-the-web/index.md b/src/site/content/ko/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..6473f42e7fc
--- /dev/null
+++ b/src/site/content/ko/blog/storage-for-the-web/index.md
@@ -0,0 +1,164 @@
+---
+title: 웹용 스토리지
+subhead: 브라우저에 데이터를 저장하기 위한 다양한 옵션이 있습니다. 여러분의 요구 사항에 가장 적합한 것은 무엇일까요?
+authors:
+  - petelepage
+description: 브라우저에 데이터를 저장하기 위한 다양한 옵션이 있습니다. 여러분의 요구 사항에 가장 적합한 것은 무엇일까요?
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  # - indexeddb
+  # - cachestorage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: 선적 컨테이너 더미
+feedback:
+  - api
+---
+
+인터넷 연결은 이동 중에 불안정하거나 부재할 수 있으므로 [프로그레시브 웹 앱](/progressive-web-apps/)의 공통적인 특징으로 오프라인 지원과 안정적인 성능이 포함되어야 합니다. 완벽한 무선 환경에서도 캐싱 및 기타 스토리지 기술을 적절하게 이용하면 사용자 경험을 크게 향상시킬 수 있습니다. 정적 애플리케이션 리소스(HTML, JavaScript, CSS, 이미지 등) 및 데이터(사용자 데이터, 뉴스 기사 등)를 캐싱하는 방법에는 여러 가지가 있습니다. 그렇다면 가장 좋은 솔루션은 무엇일까요? 얼마나 저장할 수 있을까요? 제거되는 것을 어떻게 방지할 수 있을까요?
+
+## 무엇을 사용해야 할까요? {: #recommendation }
+
+리소스 저장에 대한 일반적인 권장 사항은 다음과 같습니다.
+
+- 앱 및 파일 기반 콘텐츠를 로드하는 데 필요한 네트워크 리소스의 경우, [**Cache Storage API**](/cache-api-quick-guide/)([서비스 작업자](https://developer.chrome.com/docs/workbox/service-worker-overview/)의 일부)를 사용합니다.
+- 다른 데이터의 경우, [**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)([promise wrapper](https://www.npmjs.com/package/idb) 포함)를 사용합니다.
+
+IndexedDB 및 Cache Storage API는 모든 최신 브라우저에서 지원됩니다. 둘 모두 비동기식이며 메인 스레드를 차단하지 않습니다. 이러한 API는 `window` 개체, 웹 작업자 및 서비스 작업자에서 액세스할 수 있으므로 코드의 어디에서나 쉽게 사용할 수 있습니다.
+
+## 다른 스토리지 메커니즘은 어떻습니까? {: #other }
+
+브라우저에서 사용할 수 있는 몇 가지 다른 스토리지 메커니즘이 있지만 사용이 제한되어 있어 심각한 성능 문제를 일으킬 수 있습니다.
+
+[SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage)는 탭에 특정하며 탭의 수명으로 범위가 한정됩니다. 이는 IndexedDB 키와 같은 소량의 세션 특정 정보를 저장하는 데 유용할 수 있습니다. 하지만 동기식이고 기본 스레드를 차단하므로 주의해서 사용해야 합니다. 약 5MB로 제한되며 문자열만 포함할 수 있습니다. 탭에 특정하기 때문에 웹 작업자나 서비스 작업자는 액세스할 수 없습니다.
+
+[LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage)는 동기식이며 기본 스레드를 차단하므로 사용을 피해야 합니다. 약 5MB로 제한되며 문자열만 포함할 수 있습니다. LocalStorage는 웹 작업자 또는 서비스 작업자가 액세스할 수 없습니다.
+
+[쿠키](https://developer.mozilla.org/docs/Web/HTTP/Cookies)는 제 역할이 있지만 스토리지 목적으로는 사용하지 않아야 합니다. 쿠키는 모든 HTTP 요청과 함께 전송되므로 소량의 데이터 이상을 저장하면 모든 웹 요청의 크기가 크게 증가합니다. 동기식이며 웹 작업자가 액세스할 수 없습니다. LocalStorage 및 SessionStorage와 마찬가지로 쿠키는 문자열로만 제한됩니다.
+
+[File System API](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction) 및 FileWriter API는 샌드박스 파일 시스템에 파일을 읽고 쓰기 위한 메서드를 제공합니다. 비동기식이지만 [Chromium 기반 브라우저에서만 사용할 수](https://caniuse.com/#feat=filesystem) 있으므로 권장하지 않습니다.
+
+[File System Access API](/file-system-access/)는 사용자가 로컬 파일 시스템에서 파일을 쉽게 읽고 편집할 수 있도록 설계되었습니다. 페이지가 로컬 파일을 읽거나 쓸 수 있으려면 사용자가 권한을 부여해야 하며 권한은 세션 사이에서 유지되지 않습니다.
+
+WebSQL은 사용하지 **않아야** 하며 기존의 사용은 IndexedDB로 마이그레이션해야 합니다. 거의 모든 주요 브라우저에서 지원이 [제거](https://caniuse.com/#feat=sql-storage)되었습니다. W3C는 2010년에 [Web SQL 사양 유지를 중단](https://www.w3.org/TR/webdatabase/)했으며 추가 업데이트 계획이 없습니다.
+
+애플리케이션 캐시는 사용하지 **않아야** 하며 기존의 사용은 서비스 작업자와 Cache API로 마이그레이션해야 합니다. 이것은 [더 이상 사용되지 않으며](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) 향후 브라우저에서 지원이 제거됩니다.
+
+## 얼마나 많이 저장할 수 있나요? {: #how-much }
+
+간단히 말해서, **많이 저장할 수 있으며** 적어도 수백 MB, 경우에 따라 수 GB 이상까지도 될 수 있습니다. 브라우저 구현은 다를 수 있지만 사용 가능한 저장 공간의 양은 일반적으로 장치에서 사용 가능한 저장 공간의 양에 따라 결정됩니다.
+
+- Chrome은 브라우저가 전체 디스크 공간의 최대 80%까지 사용할 수 있도록 합니다. 오리진은 전체 디스크 공간의 최대 60%를 사용할 수 있습니다. [StorageManager API](#check)를 사용하여 사용 가능한 최대 할당량을 결정할 수 있습니다. 다른 Chromium 기반 브라우저에서는 더 많은 스토리지 사용을 허용할 수도 있습니다. Chrome 구현에 대한 자세한 내용은 [PR #3896](https://github.com/GoogleChrome/web.dev/pull/3896)을 참조하세요.
+- Internet Explorer 10 이상은 최대 250MB까지 저장할 수 있으며 10MB 이상을 사용하면 사용자에게 메시지를 표시합니다.
+- Firefox에서는 브라우저가 디스크 여유 공간의 최대 50%를 사용하도록 허용합니다. [eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix) 그룹(예: `example.com`, `www.example.com` 및 `foo.bar.example.com`)은 [최대 2GB를 사용할 수 있습니다](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits). [StorageManager API](#check-available)를 사용하여 아직 사용 가능한 공간을 확인할 수 있습니다.
+- Safari(데스크톱 및 모바일 모두)는 약 1GB를 허용하는 것으로 보입니다. 제한에 도달하면 Safari에서 사용자에게 메시지를 표시하여 제한을 200MB 단위로 늘립니다. 이에 대한 공식 문서는 찾을 수 없었습니다.
+    - PWA가 모바일 Safari의 홈 화면에 추가되면 새 스토리지 컨테이너를 생성하는 것으로 보이며 PWA와 모바일 Safari 간에는 아무것도 공유되지 않습니다. 설치된 PWA의 할당량에 도달하면 추가 스토리지를 요청할 방법이 없는 것 같습니다.
+
+과거에는 사이트가 저장 데이터의 특정 한계를 초과하면 브라우저가 사용자에게 더 많은 데이터를 사용할 수 있는 권한을 부여하라는 메시지를 표시했습니다. 예를 들어, 오리진이 50MB 이상을 사용한 경우 브라우저는 사용자에게 최대 100MB까지 저장할 수 있도록 허용하라는 메시지를 표시하고 그 이후로는 50MB 단위로 다시 요청합니다.
+
+오늘날 대부분의 최신 브라우저는 사용자에게 메시지를 표시하지 않으며 사이트에서 지정된 할당량까지 사용할 수 있도록 합니다. 750MB에서 메시지를 표시하여 최대 1.1GB까지 저장할 수 있는 권한을 요청하는 Safari의 경우는 예외입니다. 오리진이 지정된 할당량보다 더 많이 사용하려고 하면 추가적인 데이터 쓰기 시도가 실패합니다.
+
+## 사용 가능한 저장 용량을 어떻게 확인할 수 있나요? {: #check }
+
+[많은 브라우저](https://caniuse.com/#feat=mdn-api_storagemanager)에서 [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate)를 사용하여 오리진에서 사용 가능한 스토리지의 양과 사용 중인 스토리지의 양을 확인할 수 있습니다. 이 API는 IndexedDB 및 Cache API에서 사용한 총 바이트 수를 보고하며 사용 가능한 대략적인 잔여 저장 공간을 계산할 수 있습니다.
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Number of bytes used.
+  // quota.quota -> Maximum number of bytes available.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`You've used ${percentageUsed}% of the available storage.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`You can write up to ${remaining} more bytes.`);
+}
+```
+
+StorageManager는 아직 모든 브라우저에서 [구현](https://caniuse.com/#feat=mdn-api_storagemanager)되지 않았으므로 사용하기 전에 기능이 있는지 찾아야 합니다. 사용 가능한 경우에도 여전히 할당량 초과 오류를 파악해야 합니다(아래 참조). 경우에 따라 사용 가능한 할당량이 실제 사용 가능한 스토리지의 양을 초과할 수 있습니다.
+
+{% Aside %} 다른 Chromium 기반 브라우저는 사용 가능한 할당량을 보고할 때 여유 공간의 양을 고려할 수 있습니다. Chrome은 그렇지 않으며 항상 실제 디스크 크기의 60%를 보고합니다. 그러면 저장된 교차 출처 리소스의 크기를 결정하기가 더 어려워집니다. {% endAside %}
+
+### 검사
+
+개발하는 동안 브라우저의 DevTools를 사용하여 다양한 스토리지 유형을 검사하고 저장된 모든 데이터를 쉽게 지울 수 있습니다.
+
+스토리지 창에서 사이트의 스토리지 할당량을 무시할 수 있는 새로운 기능이 Chrome 88에 추가되었습니다. 이 기능을 사용하면 다양한 장치를 시뮬레이션하고 사용 가능한 디스크의 양이 부족할 때를 가정하고 앱의 동작을 테스트할 수 있습니다. **Application(애플리케이션)**, 그 다음 **Storage(스토리지)**로 이동하고 **Simulate custom storage quota(사용자 지정 스토리지 할당량 시뮬레이션)** 확인란을 선택한 후, 유효한 숫자를 입력하여 스토리지 할당량을 시뮬레이션합니다.
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="DevTools 스토리지 창", width="800", height="567" %}
+
+이 기사를 작성하는 동안 가능한 한 많은 스토리지를 빠르게 사용하기 위해 [간단한 도구](https://storage-quota.glitch.me/)를 작성했습니다. 이것은 다양한 저장 메커니즘을 실험하고 할당량을 모두 사용하면 어떻게 되는지 확인할 수 있는 빠르고 쉬운 방법입니다.
+
+## 할당량 초과를 처리하는 방법은 무엇인가요? {: #over-quota }
+
+할당량을 초과하면 어떻게 해야 할까요? `QuotaExceededError`이든 다른 무엇이든 쓰기 오류를 항상 포착하고 처리하는 것이 가장 중요합니다. 그런 다음 앱 설계에 따라 처리 방법을 결정합니다. 예를 들어 오랫동안 액세스하지 않은 콘텐츠를 삭제하거나, 크기를 기준으로 데이터를 제거하거나, 사용자가 삭제할 항목을 선택할 수 있는 방법을 제공합니다.
+
+사용 가능한 할당량을 초과하면 IndexedDB와 Cache API 모두 `QuotaExceededError`라는 `DOMError`를 발생시킵니다.
+
+### IndexedDB
+
+오리진이 할당량을 초과하면 IndexedDB에 대한 쓰기 시도가 실패합니다. 그리고 트랜잭션의 `onabort()` 핸들러가 호출되어 이벤트를 전달합니다. 이 이벤트에는 오류 속성에 `DOMException`이 포함됩니다. `name` 오류를 확인하면 `QuotaExceededError`가 반환됩니다.
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+};
+```
+
+### Cache API
+
+오리진이 할당량을 초과하면 Cache API에 대한 쓰기 시도가 `QuotaExceededError` `DOMException`을 발생시키며 거부됩니다.
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+}
+```
+
+## 제거는 어떻게 이루어지나요? {: #eviction }
+
+웹 스토리지는 "Best Effort"와 "Persistent"의 두 가지 버킷으로 분류됩니다. Best Effort는 사용자의 개입 없이 브라우저에서 저장소를 지울 수 있음을 의미하지만 장기 또는 중요한 데이터에는 내구성이 떨어집니다. Persistent 스토리지는 스토리지가 부족할 때 자동으로 지워지지 않습니다. 사용자가 브라우저 설정을 통해 이 스토리지를 직접 지워야 합니다.
+
+기본적으로, 사이트의 데이터(IndexedDB, Cache API 등 포함)는 Best Effort의 범주에 속합니다. 즉, 사이트에서 [Persistent 스토리지를 요청](/persistent-storage/)하지 않았다면 브라우저가 예를 들어 장치 스토리지가 부족할 때 자유 판단에 따라 사이트 데이터를 제거할 수 있습니다.
+
+Best Effort의 제거 정책은 다음과 같습니다.
+
+- Chromium 기반 브라우저는 브라우저의 공간이 부족할 때 데이터 제거를 시작합니다. 최근 사용 빈도가 적은 오리진부터 시작하여 차례로 브라우저의 사용량 제한이 더 이상 초과되지 않을 때까지 모든 사이트 데이터가 삭제됩니다.
+- Internet Explorer 10+는 데이터를 제거하지 않지만 오리진이 더 이상 쓰지 못하도록 합니다.
+- Firefox는 사용 가능한 디스크 공간이 가득 차면 데이터를 제거하기 시작합니다. 최근 사용 빈도가 적은 오리진부터 시작하여 차례로 브라우저의 사용량 제한이 더 이상 초과되지 않을 때까지 모든 사이트 데이터가 삭제됩니다.
+- Safari는 이전에 데이터를 제거하지 않았지만 최근에는 쓰기 가능한 모든 스토리지에 대해 새로운 7일 제한을 구현했습니다(아래 참조).
+
+iOS 및 iPadOS 13.4, 및 macOS의 Safari 13.1부터 시작하여 IndexedDB, 서비스 작업자 등록 및 Cache API를 포함하여 모든 스크립트 쓰기 가능 스토리지에 7일 제한이 시행됩니다. 즉, 사용자가 사이트와 상호 작용하지 않으면 Safari가 Safari 사용 7일 후에 캐시에서 모든 콘텐츠를 제거합니다. 이 제거 정책은 홈 화면에 추가된 **설치된 PWA에는 적용되지 않습니다.** 자세한 내용은 WebKit 블로그에서 [전체 타사 쿠키 차단 등](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)을 참조하십시오.
+
+{% Aside %} 중요한 사용자 또는 애플리케이션 데이터를 보호하기 위해 사이트에 [Persistent 스토리지](/persistent-storage/)를 요청할 수 있습니다. {% endAside %}
+
+## 보너스: IndexedDB에 래퍼를 사용하는 이유
+
+IndexedDB는 사용하기 전에 상당한 설정이 필요한 저수준 API로, 단순한 데이터를 저장할 때 특히 힘이 들 수 있습니다. 대부분의 최신 promise 기반 API와 달리 이 API는 이벤트 기반입니다. IndexedDB용 [idb](https://www.npmjs.com/package/idb)와 같은 Promise 래퍼는 일부 강력한 기능을 숨기지만, 더 중요한 것으로, IndexedDB 라이브러리와 함께 제공되는 복잡한 처리 작용(예: 트랜잭션, 스키마 버전 관리)도 숨깁니다.
+
+## 결론
+
+스토리지가 제한적인 시대는 지났고 사용자들은 더욱 더 많은 데이터를 저장하고 있습니다. 사이트는 실행에 필요한 모든 리소스와 데이터를 효과적으로 저장할 수 있습니다. [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate)를 사용하면 사용 가능한 스토리지 양과 사용한 양을 확인할 수 있습니다. 그리고 [Persistent 스토리지](/persistent-storage/)를 사용하면 사용자가 제거하지 않는 한 데이터가 제거되지 않도록 보호할 수 있습니다.
+
+### 추가 리소스
+
+- [IndexedDB 모범 사례](/indexeddb-best-practices/)
+- [Chrome 웹 스토리지 및 할당량 개념](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### 감사의 말
+
+이 기사를 검토해준 Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruissselbrink 및 Victor Costan에게 특별한 감사의 말을 전합니다. 이 글의 배경이 된 원본 기사를 작성한 Eiji Kitamura, Addy Osmani, Marc Cohen에게도 감사의 말을 전합니다. Eiji는 현재 동작을 확인하는 데 유용한 [Browser Storage Abuser](http://demo.agektmr.com/storage/)라는 유용한 도구를 제작했습니다. 이 도구를 사용하면 가능한 한 많은 데이터를 저장하고 브라우저의 스토리지 제한을 볼 수 있습니다. Safari를 파헤쳐 스토리지 한계를 알아낸 Francois Beaufort에게 감사드립니다.
+
+영웅 이미지는 [Unsplash](https://unsplash.com/photos/uBe2mknURG4)에서 Guillaume Bolduc이 제공했습니다.
diff --git a/src/site/content/ko/blog/streams/index.md b/src/site/content/ko/blog/streams/index.md
new file mode 100644
index 00000000000..e00dfd5f7ba
--- /dev/null
+++ b/src/site/content/ko/blog/streams/index.md
@@ -0,0 +1,809 @@
+---
+title: Streams—최종 가이드
+subhead: Streams API를 통해 읽기, 쓰기 및 변환 스트림을 사용하는 방법에 대해 알아보세요.
+description: Streams API를 사용하면 JavaScript가 네트워크를 통해 수신된 데이터 스트림에 프로그래밍 방식으로 액세스하여 원하는 대로 처리할 수 있습니다.
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2021-02-25
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: 낙엽이 물든 숲 속 개울
+tags:
+  - blog
+  - capabilities
+---
+
+Streams API를 사용하면 네트워크를 통해 수신되거나 로컬에서 생성된 데이터 스트림에 프로그래밍 방식으로 액세스하고 JavaScript로 처리할 수 있습니다. 스트리밍은 수신, 전송 또는 작은 청크로 변환하려는 리소스를 분할한 다음 이러한 청크를 비트 단위로 처리하는 작업과 관련이 있습니다. 스트리밍은 웹 페이지에 표시할 HTML이나 비디오 같은 자산을 수신할 때 브라우저가 수행하는 것이지만, 이 기능은 2015년에 스트림이 포함된 `fetch`가 도입되기 전에는 JavaScript에서 사용할 수 없었습니다.
+
+{% Aside %} `XMLHttpRequest`를 사용하여 기술적으로 스트리밍할 수 있었지만 [그리 효과적이지 않았습니다](https://gist.github.com/igrigorik/5736866). {% endAside %}
+
+이전에는 어떤 종류의 리소스(비디오 또는 텍스트 파일 등)를 처리하려면 전체 파일을 다운로드하고 적절한 형식으로 역직렬화될 때까지 기다린 다음 처리해야 했습니다. JavaScript에서 스트림을 사용할 수 있게 되면서 이 모든 것이 바뀌었습니다. 이제 버퍼, 문자열 또는 blob을 생성할 필요 없이 클라이언트에서 사용 가능한 즉시 JavaScript를 사용해 원시 데이터를 점진적으로 처리할 수 있습니다. 이렇게 하면 여러 사용 사례가 잠금 해제됩니다. 그 중 일부는 아래에 나열되어 있습니다.
+
+- **비디오 효과:** 실시간으로 효과를 적용하는 변환 스트림을 통해 읽기 가능한 비디오 스트림 파이핑합니다.
+- **데이터 압축(압축 해제):** 파일 스트림을 선택적으로 압축(압축 해제)하는 변환 스트림을 통해 파이핑합니다.
+- **이미지 디코딩:** 바이트를 비트맵 데이터로 디코딩하는 변환 스트림을 통해 HTTP 응답 스트림을 파이핑한 다음, 비트맵을 PNG로 변환하는 또 다른 변환 스트림을 통해 파이핑합니다. 서비스 작업자의 `fetch` 핸들러 내에 설치된 경우 이를 통해 AVIF와 같은 새 이미지 형식을 투명하게 폴리필할 수 있습니다.
+
+## 핵심 개념
+
+다양한 유형의 스트림에 대해 자세히 설명하기 전에 몇 가지 핵심 개념을 소개하겠습니다.
+
+### 청크
+
+청크는 스트림에 쓰거나 스트림에서 읽는 **단일 데이터 조각**입니다. 모든 유형이 될 수 있습니다. 스트림은 다른 유형의 청크를 포함할 수도 있습니다. 대부분의 경우 청크는 해당 스트림에 대한 가장 원자적인 단위의 데이터가 아닙니다. 예를 들어, 바이트 스트림에는 단일 바이트 대신 16KiB `Uint8Array`로 구성된 청크가 포함될 수 있습니다.
+
+### 읽기 가능한 스트림
+
+읽기 가능한 스트림은 읽을 수 있는 데이터 소스를 나타냅니다. 즉, 데이터는 읽기 가능한 스트림에서 **나옵니다**. 구체적으로, 읽기 가능한 스트림은 `ReadableStream` 클래스의 인스턴스입니다.
+
+### 쓰기 가능한 스트림
+
+쓰기 가능한 스트림은 쓸 수 있는 데이터의 대상을 나타냅니다. 즉, 데이터는 쓰기 가능한 스트림으로 **들어갑니다**. 구체적으로, 쓰기 가능한 스트림은 `WritableStream` 클래스의 인스턴스입니다.
+
+### 스트림 변환
+
+변환 스트림은 **한 쌍의** 스트림 즉, 쓰기 가능한 쪽이라고 하는 쓰기 가능한 스트림과 읽을 수 있는 쪽이라고 하는 읽을 수 있는 스트림으로 구성되어 있습니다. 이는 실제 세계에서 한 언어에서 다른 언어로 즉석에서 번역하는 [동시 통역사](https://en.wikipedia.org/wiki/Simultaneous_interpretation)로 비유할 수 있습니다. 변환 스트림에 고유한 방식으로 쓰기 가능한 쪽에 기록하면 읽기 가능한 쪽에서 읽을 수 있는 새 데이터가 생성됩니다. 구체적으로, `writable` 속성과 `readable` 속성이 있는 모든 개체는 변환 스트림으로 사용할 수 있습니다. 그러나 표준 `TransformStream` 클래스를 사용하면 적절하게 얽힌 쌍을 더 쉽게 만들 수 있습니다.
+
+### 파이프 체인
+
+스트림은 주로 서로 **파이핑**하여 사용됩니다. 읽기 가능한 스트림은 읽기 가능한 스트림의 `pipeTo()` 메서드를 사용하여 쓰기 가능한 스트림에 직접 파이핑할 수 있습니다. 또한 읽기 가능한 스트림의 `pipeThrough()` 메서드를 사용하여 우선 하나 이상의 스트림을 통해 파이핑할 수 있습니다. 이러한 방식으로 **함께 파이핑된 스트림 세트**를 파이프 체인이라 부릅니다.
+
+### 배압
+
+파이프 체인이 구성되면 청크가 파이프 체인을 통해 얼마나 빨리 통과하는지에 대한 신호를 전달합니다. 체인의 단계가 아직 청크를 수락할 수 없는 경우 파이프 체인을 통해 신호를 역방향으로 전파하여 결국 원래 소스에 청크를 너무 빨리 생성하는 것을 중지하라는 지시를 내립니다. 이러한 **정규화 흐름** 프로세스를 배압이라고 합니다.
+
+### 티잉
+
+`tee()` 메서드를 사용하여 읽기 가능한 스트림을 티잉(대문자 'T' 모양의 이름을 따서 명명)할 수 있습니다. 이렇게 하면 스트림이 **잠깁니다**. 즉, 스트림을 더 이상 직접 사용할 수 없게 됩니다. 그러나 독립적으로 사용할 수 있는 분기라고 하는 **두 개의 새로운 스트림**을 생성합니다. 스트림을 되감거나 다시 시작할 수 없기 때문에 티잉도 중요합니다. 이에 대해서는 나중에 자세히 다루도록 하겠습니다.
+
+<figure><comment data-md-type="comment"></comment> {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="호출에서 패치 API(출력이 티잉되는 변환 스트림을 통해 파이핑된 다음 첫 번째 결과로 나타나는 읽기 가능한 스트림을 위해 브라우저에 전송되고 두 번째 결과로 나타나는 읽기 가능한 스트림을 위해 서비스 작업자 캐시에 전송됨)로 이어지는 읽기 가능한 스트림으로 구성된 파이프 체인 다이어그램", width="800", height="430" %} <figcaption>파이프 체인.</figcaption></figure>
+
+## 읽기 가능한 스트림 메커니즘
+
+읽기 가능한 스트림은 기본 소스로부터 흐르는 [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) 개체에 의해 JavaScript로 표현되는 데이터 소스입니다. [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) 생성자는 해당 핸들러에서 읽기 가능한 스트림 개체를 만들고 반환합니다. 기본 소스에는 다음과 같은 두 가지 유형이 있습니다.
+
+- **푸시 소스**는 액세스할 때 데이터를 지속적으로 푸시하며 스트림에 대한 액세스를 시작, 일시 중지 또는 취소하는 것은 사용자에게 달려 있습니다. 예에는 라이브 비디오 스트림, 서버 전송 이벤트 또는 WebSocket이 포함됩니다.
+- **풀 소스**는 일단 연결되면 데이터를 명시적으로 요청해야 합니다. 예에는 `fetch()` 또는 `XMLHttpRequest` 호출을 통한 HTTP 작업이 포함됩니다.
+
+스트림 데이터는 **청크**라고 하는 작은 조각으로 순차적으로 판독됩니다. 스트림에 배치된 청크는 **대기열에 추가**됩니다. 이는 청그가 읽을 준비가 된 대기열에서 대기하고 있음을 의미합니다. **내부 큐**는 아직 읽지 않은 청크를 추적합니다.
+
+**대기열 전략**은 스트림이 내부 큐의 상태를 기반으로 배압 신호를 보내는 방법을 결정하는 개체입니다. 대기열 전략은 각 청크에 크기를 할당하고 대기열에 있는 모든 청크의 전체 크기를 **상위 워터 마크**라고 하는 지정된 숫자와 비교합니다.
+
+스트림 내부의 청크는 **리더**에 의해 판독됩니다. 이 리더는 한 번에 하나의 청크씩 데이터를 검색하므로 원하는 작업을 수행할 수 있습니다. 리더 및 리더와 함께 제공되는 다른 처리 코드를 **컨슈머(consumer)**라고 합니다.
+
+이 컨텍스트에서 다음 구성을 **컨트롤러**라고 합니다. 읽기 가능한 각 스트림에는 이름에서 알 수 있듯이 스트림을 제어할 수 있는 연결된 컨트롤러가 있습니다.
+
+한 번에 하나의 리더만 스트림을 읽을 수 있습니다. 리더가 생성되고 스트림 읽기를 시작하면(즉, **활성 리더**가 되면) 스트림에 **잠깁니다**. 다른 리더가 스트림 읽기를 인계하도록 하려면 일반적으로 다른 작업을 수행하기 전에 첫 번째 리더를 **해제**해야 합니다(스트림을 **티잉**할 수는 있음).
+
+### 읽기 가능한 스트림 만들기
+
+[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) 생성자를 호출하여 읽기 가능한 스트림을 만듭니다. 생성자에는 생성된 스트림 인스턴스의 동작 방식을 정의하는 메서드 및 속성을 가진 개체를 나타내는 선택적 인수 `underlyingSource`가 있습니다.
+
+#### `underlyingSource`
+
+다음과 같은 선택적 개발자 정의 메서드를 사용할 수 있습니다.
+
+- `start(controller)`: 개체가 생성되는 즉시 호출됩니다. 이 메서드는 스트림 소스에 액세스할 수 있으며 스트림 기능을 설정하는 데 필요한 다른 모든 작업을 수행할 수 있습니다. 이 프로세스를 비동기식으로 수행해야 하는 경우 이 메서드가 성공 또는 실패를 알리는 약속을 반환할 수 있습니다. 이 메서드에 전달된 `controller` 매개변수는 [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController)입니다.
+- `pull(controller)`: 더 많은 청크를 가져올 때 스트림을 제어하는 데 사용할 수 있습니다. 스트림의 내부 청크 대기열이 가득 차 있지 않은 한 대기열이 높은 워터 마크에 도달할 때까지 반복적으로 호출됩니다. `pull()` 호출의 결과가 약속이면 해당 약속이 이행될 때까지 `pull()`이 호출되지 않습니다. 약속이 거부되면 스트림에 오류가 발생합니다.
+- `cancel(reason)`: 스트림 컨슈머가 스트림을 취소할 때 호출됩니다.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+`ReadableStreamDefaultController`는 다음 메서드를 지원합니다.
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close)는 연결된 스트림을 닫습니다.
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue)는 연결된 스트림의 해당 청크를 대기열에 넣습니다.
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error)는 연결된 스트림과의 향후 상호 작용에 오류를 발생시킵니다.
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('The first chunk!');
+},
+/* … */
+```
+
+#### `queuingStrategy`
+
+마찬가지로 옵션인 두 번째 `ReadableStream()` 생성자는 `queuingStrategy`입니다. 이는 스트림에 대한 대기열 전략을 선택적으로 정의하는 개체이며 다음과 같은 두 개의 매개변수를 취합니다.
+
+- `highWaterMark`: 이 대기열 전략을 사용하는 스트림의 높은 워터 마크를 나타내는 음수가 아닌 숫자입니다.
+- `size(chunk)`: 주어진 청크 값에 대한 음이 아닌 유한한 크기를 계산하고 반환하는 함수입니다. 결과 값은 `ReadableStreamDefaultController.desiredSize` 속성을 통해 표시되는 배압을 결정하는 데 사용됩니다. 기본 소스의 `pull()` 메서드가 호출되는 시점을 관할합니다.
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} 사용자 정의 `queuingStrategy`를 지정하거나 이 개체의 값에 대해 [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) 또는 [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)의 인스턴스를 사용할 수 있습니다. `queuingStrategy`가 제공되지 않으면 사용하는 기본 값은 `1`의 `highWaterMark`를 갖는 `CountQueuingStrategy`와 동일합니다. {% endAside %}
+
+#### `getReader()` 및 `read()` 메서드
+
+읽기 가능한 스트림에서 읽으려면 [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader)가 되는 리더가 필요합니다. `ReadableStream` 인터페이스의 `getReader()` 메서드는 리더를 생성하고 스트림을 잠급니다. 스트림이 잠겨 있는 동안 이 스트림을 해제할 때까지 다른 리더를 얻을 수 없습니다.
+
+`ReadableStreamDefaultReader` 인터페이스의 [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read) 메서드는 스트림의 내부 대기열에 있는 다음 청크에 대한 액세스를 제공하는 약속을 반환합니다. 스트림의 상태에 따라 하나의 결과로 이행하거나 거부합니다. 다양한 가능성은 다음과 같습니다.
+
+- 청크를 사용할 수 있는 경우 <br> `{ value: chunk, done: false }` 형식의 개체로 약속이 이행됩니다.
+- 스트림이 닫히면 <br> `{ value: undefined, done: true }` 형식의 개체로 약속이 이행됩니다.
+- 스트림에 오류가 발생하면 관련 오류와 함께 약속이 거부됩니다.
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('The stream is done.');
+    break;
+  }
+  console.log('Just read a chunk:', value);
+}
+```
+
+#### `locked` 속성
+
+[`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked) 속성에 액세스하여 읽기 가능한 스트림이 잠겨 있는지 확인할 수 있습니다.
+
+```js
+const locked = readableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### 읽기 가능한 스트림 코드 샘플
+
+아래 코드 샘플은 실행 중인 모든 스텝을 보여줍니다. 먼저 `underlyingSource` 인수(즉, `TimestampSource` 클래스)에서 `start()` 메서드를 정의하는 `ReadableStream`을 만듭니다. 이 메서드는 스트림의 `controller`에 10초 동안 매초마다 타임스탬프를 `enqueue()`하도록 지시합니다. 마지막으로 컨트롤러에 스트림을 `close()`하도록 지시합니다. `getReader()` 메서드를 통해 리더를 생성하고 스트림이 `done`될 때까지 `read()`를 호출하여 이 스트림을 사용합니다.
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // Add the string to the stream.
+      controller.enqueue(string);
+      console.log(`Enqueued ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // Close the stream after 10s.
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // This is called if the reader cancels.
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // The `read()` method returns a promise that
+    // resolves when a value has been received.
+    const { done, value } = await reader.read();
+    // Result objects contain two properties:
+    // `done`  - `true` if the stream has already given you all its data.
+    // `value` - Some data. Always `undefined` when `done` is `true`.
+    if (done) return result;
+    result += value;
+    console.log(`Read ${result.length} characters so far`);
+    console.log(`Most recently read chunk: ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('Stream complete', result));
+```
+
+### 비동기식 반복
+
+스트림이 `done`되면 각 `read()` 루프 반복을 확인하는 것이 가장 편리한 API가 아닐 수 있습니다. 다행히도 곧 이를 수행하는 더 좋은 방법이 있습니다. 바로 비동기식 반복입니다.
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %} 비동기 반복은 아직 어떤 브라우저에서도 구현되지 않았습니다. {% endAside %}
+
+오늘날 비동기식 반복을 사용하는 해결 방법은 도우미 함수로 동작을 구현하는 것입니다. 이를 통해 아래 스니펫에 제시되어 있는 코드에서 기능을 사용할 수 있습니다.
+
+```js
+function streamAsyncIterator(stream) {
+  // Get a lock on the stream:
+  const reader = stream.getReader();
+
+  return {
+    next() {
+      // Stream reads already resolve with {done, value}, so
+      // we can just call read:
+      return reader.read();
+    },
+    return() {
+      // Release the lock if the iterator terminates.
+      reader.releaseLock();
+      return {};
+    },
+    // for-await calls this on whatever it's passed, so
+    // iterators tend to return themselves.
+    [Symbol.asyncIterator]() {
+      return this;
+    },
+  };
+}
+
+async function example() {
+  const response = await fetch(url);
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    console.log(chunk);
+  }
+}
+```
+
+### 읽기 가능한 스트림 티잉
+
+`ReadableStream` 인터페이스의 [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) 메서드는 현재 읽기 가능한 스트림을 티잉하여 두 개의 결과 분기를 새 `ReadableStream` 인스턴스로 포함하는 두 요소 배열을 반환합니다. 이를 통해 두 개의 리더가 스트림을 동시에 읽을 수 있습니다. 예를 들어 서버에서 응답을 가져와 브라우저로 스트리밍하고 서비스 작업자 캐시로 스트리밍하려는 경우 서비스 작업자에서 이 작업을 수행할 수 있습니다. 응답 본문은 두 번 이상 사용할 수 없으므로 이를 수행하려면 두 개의 사본이 필요합니다. 스트림을 취소하려면 결과 분기를 모두 취소해야 합니다. 스트림을 티잉하면 일반적으로 해당 기간 동안 스트림이 잠기므로 다른 리더가 스트림을 잠글 수 없습니다.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called `read()` when the controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+// Create two `ReadableStream`s.
+const [streamA, streamB] = readableStream.tee();
+
+// Read streamA iteratively one by one. Typically, you
+// would not do it this way, but you certainly can.
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// Read streamB in a loop. This is the more common way
+// to read data from the stream.
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## 읽기 가능한 바이트 스트림
+
+바이트를 나타내는 스트림의 경우, 특히 복사본을 최소화하여 바이트를 효율적으로 처리하기 위해 읽기 가능한 스트림의 확장 버전이 제공됩니다. 바이트 스트림을 사용하면 BYOB(Bring-Your-Own-Buffer) 리더를 확보할 수 있습니다. 기본 구현은 WebSocket의 경우 문자열 또는 배열 버퍼와 같은 다양한 출력을 제공할 수 있지만 바이트 스트림은 바이트 출력을 보장합니다. 또한 BYOB 리더는 안정적이라는 이점이 있습니다. 버퍼가 분리되면 동일한 버퍼에 두 번 쓰지 않도록 보장하여 경쟁 조건을 피할 수 있기 때문입니다. BYOB 리더는 버퍼를 재사용할 수 있으므로 브라우저에서 가비지 수집 작업을 실행해야 하는 횟수를 줄일 수 있습니다.
+
+### 읽기 가능한 바이트 스트림 만들기
+
+`ReadableStream()` 생성자에 추가적인 `type` 매개변수를 전달하여 읽기 가능한 바이트 스트림을 만들 수 있습니다.
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### `underlyingSource`
+
+읽기 가능한 바이트 스트림의 기본 소스에는 `ReadableByteStreamController`가 제공됩니다. `ReadableByteStreamController.enqueue()` 메서드는 값이 `ArrayBufferView`인 `chunk` 인수를 취합니다. `ReadableByteStreamController.byobRequest` 속성은 현재 BYOB pull 요청을 반환하거나 없는 경우 null을 반환합니다. 마지막으로 `ReadableByteStreamController.desiredSize` 속성은 제어되는 스트림의 내부 대기열을 채우는 데 필요한 크기를 반환합니다.
+
+### `queuingStrategy`
+
+마찬가지로 옵션인 `ReadableStream()` 생성자의 인수는 `queuingStrategy`입니다. 이는 하나의 매개변수를 취하는 스트림에 대한 대기열 전략을 선택적으로 정의하는 개체입니다.
+
+- `highWaterMark`: 이 대기열 전략을 사용하는 스트림의 상위 워터 마크를 나타내는 음수가 아닌 바이트 수입니다. `ReadableByteStreamController.desiredSize` 속성을 통해 명시되는 배압을 결정하는 데 사용됩니다. `pull()` 메서드가 호출되는 시기를 제어합니다.
+
+{% Aside %} 다른 스트림 유형에 대한 대기열 전략과 달리 읽기 가능한 바이트 스트림에 대한 대기열 전략에는 `size(chunk)` 함수가 없습니다. 각 청크의 크기는 항상 `byteLength` 속성에 의해 결정됩니다. {% endAside %}
+
+{% Aside %} `queuingStrategy`가 제공되지 않은 경우 사용되는 기본값은 `0`의 `highWaterMark`를 갖는 값입니다. {% endAside %}
+
+#### `getReader()` 및 `read()` 메서드
+
+그런 다음 `ReadableStream.getReader({ mode: "byob" })`에 따라 `mode` 매개변수를 설정하여 `ReadableStreamBYOBReader`에 액세스할 수 있습니다. 이를 통해 복사를 방지하기 위해 버퍼 할당을 보다 정밀하게 제어할 수 있습니다. 바이트 스트림에서 읽으려면 `ReadableStreamBYOBReader.read(view)`를 호출해야 합니다. 여기에서 `view`는 [`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView)입니다.
+
+#### 읽기 가능한 바이트 스트림 코드 샘플
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("The first 1024 bytes, or less:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+다음 함수는 무작위로 생성된 배열의 효율적인 제로 카피 읽기를 허용하는 읽기 가능한 바이트 스트림을 반환합니다. 미리 결정된 1,024의 청크 크기를 사용하는 대신 개발자가 제공한 버퍼를 채우려고 시도하여 전체적으로 제어할 수 있도록 합니다.
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // Even when the consumer is using the default reader,
+      // the auto-allocation feature allocates a buffer and
+      // passes it to us via `byobRequest`.
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## 쓰기 가능한 스트림의 메커니즘
+
+쓰기 가능한 스트림은 데이터를 쓸 수 있는 하나의 대상이며 이는 [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) 개체에 의해 JavaScript에 표시됩니다. 쓰기 가능한 스트림은 원시 데이터가 기록되는 하위 수준 I/O 싱크인 **기본 싱크** 상단에서 추상화 함수로서의 역할을 수행합니다.
+
+데이터는 한 번에 하나의 청크씩 **작성자**를 통해 스트림에 기록됩니다. 청크는 리더의 청크와 마찬가지로 다양한 형태를 취할 수 있습니다. 원하는 코드를 사용하여 쓰기 준비가 된 청크를 생성할 수 있습니다. 작성자와 관련 코드를 **생산자**라고 합니다.
+
+작성자(**활성 작성자**)가 생성되고 스트림에 대한 쓰기 작업을 시작하면, 스트림에 **잠기게 됩니다**. 한 번에 하나의 작성자만 쓰기 가능한 스트림에 쓸 수 있습니다. 다른 작성자가 스트림에 대한 쓰기 작업을 시작하도록 하려면 일반적으로 스트림을 해제한 다음 다른 작성자를 연결해야 합니다.
+
+**내부 큐**는 스트림에 기록되었지만 기본 싱크에서 아직 처리되지 않은 청크를 계속 추적합니다.
+
+**대기열 전략**은 스트림이 내부 큐의 상태를 기반으로 배압 신호를 보내는 방법을 결정하는 개체입니다. 대기열 전략은 각 청크에 크기를 할당하고 대기열에 있는 모든 청크의 전체 크기를 **상위 워터 마크**라고 하는 지정된 숫자와 비교합니다.
+
+최종 구성은 **컨트롤러**라고 합니다. 쓰기 가능한 각 스트림에는 스트림을 제어(예: 중단)할 수 있는 관련 컨트롤러가 있습니다.
+
+### 쓰기 가능한 스트림 만들기
+
+Streams API의 [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) 인터페이스는 스트리밍 데이터를 싱크라고 하는 대상에 쓰기 위한 표준 추상화 함수를 제공합니다. 이 개체는 내장된 배압 및 대기열과 함께 제공됩니다. [`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream) 생성자를 호출하여 쓰기 가능한 스트림을 만듭니다. 여기에는 생성된 스트림 인스턴스가 작동하는 방식을 정의하는 메서드와 속성이 있는 개체를 나타내는 옵션 `underlyingSink`가 있습니다.
+
+#### `underlyingSink`
+
+`underlyingSink`에는 다음과 같은 옵션의 개발자 정의 메서드가 포함될 수 있습니다. 일부 메서드에 전달된 `controller` 매개변수는 [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController)입니다.
+
+- `start(controller)`: 이 메서드는 개체가 생성될 때 즉시 호출됩니다. 이 메서드의 콘텐츠는 기본 싱크에 액세스하는 것을 목표로 해야 합니다. 이 프로세스를 비동기식으로 수행해야 하는 경우 성공 또는 실패를 알리는 약속을 반환할 수 있습니다.
+- `write(chunk, controller)`: 이 메서드는 새로운 데이터 청크(`chunk` 매개변수에 지정됨)가 기본 싱크에 기록될 준비가 되면 호출됩니다. 쓰기 작업의 성공 또는 실패를 알리는 약속을 반환할 수 있습니다. 이 메서드는 이전 쓰기가 성공한 이후에만 호출되고 스트림이 닫히거나 중지된 이후에는 호출되지 않습니다.
+- `close(controller)`: 이 메서드는 앱이 스트림에 청크 쓰기를 완료했다는 신호를 보내는 경우에 호출됩니다. 콘텐츠는 기본 싱크에 대한 쓰기를 완료하고 액세스를 해제하는 데 필요한 모든 작업을 수행해야 합니다. 이 프로세스가 비동기식이면 성공 또는 실패를 알리는 약속을 반환할 수 있습니다. 이 메서드는 대기 중인 모든 쓰기가 성공한 후에만 호출됩니다.
+- `abort(reason)`: 이 메서드는 앱이 스트림을 갑자기 닫고 오류 상태가 되기를 바란다는 신호를 보내는 경우에 호출됩니다. `close()`와 마찬가지로 보유하고 있는 리소스를 정리할 수 있지만 쓰기가 대기 중인 경우라도 `abort()`가 호출됩니다. 이러한 청크는 폐기됩니다. 이 프로세스가 비동기식으로 이루어지면 성공 또는 실패를 알리는 약속을 반환할 수 있습니다.  `reason` 매개변수에는 스트림이 중지된 이유를 설명하는 `DOMString`이 포함되어 있습니다.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+Streams API의 [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController) 인터페이스는 쓰기 동안 또는 쓰기가 끝날 때 더 많은 청크가 제출되므로 설정하는 동안 `WritableStream`의 상태를 제어할 수 있는 컨트롤러를 나타냅니다. `WritableStream`을 구성할 때 기본 싱크에는 이에 상응하는 `WritableStreamDefaultController` 인스턴스가 제공됩니다. `WritableStreamDefaultController`에는 [`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error) 메서드가 하나만 있습니다. 이 메서드는 관련 스트림과의 향후 상호 작용에서 오류를 발생시킵니다.
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // Try to do something dangerous with `chunk`.
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### `queuingStrategy`
+
+마찬가지로 옵션인 두 번째 `WritableStream()` 생성자 인수는 `queuingStrategy`입니다. 스트림에 대한 대기열 전략을 선택적으로 정의하는 개체이며 다음과 같은 두 개의 매개변수를 취합니다.
+
+- `highWaterMark`: 이 대기열 전략을 사용하는 스트림의 높은 워터 마크를 나타내는 음수가 아닌 숫자입니다.
+- `size(chunk)`: 주어진 청크 값의 음이 아닌 유한한 크기를 계산하고 반환하는 함수입니다. `WritableStreamDefaultWriter.desiredSize` 속성을 통해 표시되는 배압을 결정하는 데 사용됩니다.
+
+{% Aside %} 사용자 정의 `queuingStrategy`를 지정하거나 이 개체의 값에 대해 [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) 또는 [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)의 인스턴스를 사용할 수 있습니다. `queuingStrategy`가 제공되지 않으면 사용하는 기본 값은 `1`의 `highWaterMark`를 갖는 `CountQueuingStrategy`와 동일합니다. {% endAside %}
+
+#### `getWriter()` 및 `write()` 메서드
+
+쓰기 가능한 스트림에 쓰려면 `WritableStreamDefaultWriter`가 될 작성자가 필요합니다. `WritableStream` 인터페이스의 `getWriter()` 메서드가 새로운 인스턴스 `WritableStreamDefaultWriter`를 반환하며 해당 인스턴스에 대한 스트림을 잠급니다. 스트림이 잠겨 있는 동안 현재 작성자가 해제될 때까지 다른 작성자를 확보할 수 없습니다.
+
+[`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write) 인터페이스의 [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) 메서드가 전달된 데이터 청크를 `WritableStream` 및 기본 싱크에 쓴 다음 쓰기 작업의 성공 또는 실패를 알리는 약속을 반환합니다. "성공"이 의미하는 바는 기본 싱크에 달려 있습니다. 청크가 수락되었음을 나타낼 수 있으며 반드시 최종 대상에 안전하게 저장되는 것은 아닙니다.
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('The first chunk!');
+```
+
+#### `locked` 속성
+
+[`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked) 속성에 액세스하여 쓰기 가능한 스트림이 잠겨 있는지 확인할 수 있습니다.
+
+```js
+const locked = writableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### 쓰기 가능한 스트림 코드 샘플
+
+아래 코드 샘플은 실행 중인 모든 단계를 나타냅니다.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[start]');
+  },
+  async write(chunk, controller) {
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // Wait to add to the write queue.
+  await writer.ready;
+  console.log('[ready]', Date.now() - start, 'ms');
+  // The Promise is resolved after the write finishes.
+  writer.write(char);
+}
+await writer.close();
+```
+
+### 읽기 가능한 스트림을 쓰기 가능한 스트림으로 파이핑
+
+읽기 가능한 스트림은 읽기 가능한 스트림의 [`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo) 메서드를 통해 쓰기 가능한 스트림으로 파이핑될 수 있습니다. `ReadableStream.pipeTo()`는 현재 `ReadableStream`을 해당 `WritableStream`으로 파이핑하고 파이핑 프로세스가 성공적으로 완료되면 이행되는 약속을 반환하거나 오류가 발생하면 거부합니다.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start readable]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called when controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // Called by constructor
+    console.log('[start writable]');
+  },
+  async write(chunk, controller) {
+    // Called upon writer.write()
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[finished]');
+```
+
+## 변환 스트림 생성
+
+Streams API의 `TransformStream` 인터페이스는 변환 가능한 데이터 세트를 나타냅니다. 해당 핸들러에서 변환 스트림 개체를 생성하고 반환하는 `TransformStream()` 생성자를 호출하여 변환 스트림을 생성합니다. `TransformStream()` 생성자는 `transformer`를 나타내는 선택적 JavaScript 개체를 첫 번째 인수로 수락합니다. 이러한 개체에는 다음과 같은 메서드가 포함될 수 있습니다.
+
+### `transformer`
+
+- `start(controller)`: 이 메서드는 개체가 생성될 때 즉시 호출됩니다. 일반적으로 이 메서드는`controller.enqueue()` 사용하여 접두사 청크를 대기열에 넣는 데 사용됩니다. 이러한 청크는 읽기 가능한 쪽에서 읽혀지지만 쓰기 가능한 쪽의 쓰기에 의존하지 않습니다. 예를 들어 접두사 청크를 획득하는 데 약간의 노력이 필요하므로 이 초기 프로세스가 비동기식으로 이루어지는 경우 함수는 성공 또는 실패를 알려주는 약속을 반환할 수 있습니다. 거부된 약속은 스트림에 오류를 발생시킵니다. 생성된 모든 예외는 `TransformStream()` 생성자에 의해 다시 생성됩니다.
+- `transform(chunk, controller)`: 이 메서드는 원래 쓰기 가능한 쪽에 쓰여진 새로운 청크가 변환될 준비가 되었을 때 호출됩니다. 이 스트림이 구현되면 이전 변환이 성공한 이후에만 호출되고 `start()`가 완료하기 전 또는 `flush()`가 호출된 이후에 호출되지 않도록 보장합니다. 이 함수는 변환 스트림의 실제 변환 작업을 수행합니다. 이 함수는 `controller.enqueue()`를 사용하여 결과를 대기열에 넣을 수 있습니다. 이렇게 하면`controller.enqueue()`가 호출된 횟수에 따라 쓰기 가능한 쪽에 작성된 단일 청크가 읽기 가능한 쪽에서 제로나 여러 청크로 나타납니다. 변환 프로세스가 비동기식으로 이루어지면 이 함수는 변환의 성공 또는 실패를 알리는 약속을 반환할 수 있습니다. 거부된 약속은 변환 스트림의 읽기 가능한 쪽과 쓰기 가능한 쪽 모두에 오류가 발생합니다. `transform()` 메서드가 제공되지 않으면 아이덴터티 변환이 사용됩니다. 이는 쓰기 가능한 쪽에서 읽기 가능한 쪽까지 변경되지 않은 청크를 대기열에 넣습니다.
+- `flush(controller)`: 이 메서드는 쓰기 가능한 쪽에 쓰여진 모든 청크가 `transform()`을 성공적으로 통과하여 변환되고 쓰기 가능한 쪽이 닫히려고 한 후에 호출됩니다. 일반적으로 접미사 청크가 닫히기 전에 읽을 수 있는 쪽에 접미사 청크를 추가하는 데 사용됩니다. 플러싱 프로세스가 비동기식으로 이루어지는 경우 이 함수는 성공 또는 실패를 알려주는 약속을 반환할 수 있습니다. 결과가 `stream.writable.write()` 호출자에게 전달됩니다. 또한 거부된 약속은 스트림의 읽기 가능한 쪽과 쓰기 가능한 쪽 모두에 오류를 발생시킵니다. 예외 생성 작업은 거부된 약속을 반환하는 것과 동일하게 처리됩니다.
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### `writableStrategy` 및 `readableStrategy` 대기열 전략
+
+`TransformStream()` 생성자의 두 번째 및 세 번째 선택적 매개변수는 선택적 `writableStrategy` 및 `readableStrategy` 대기열 전략입니다. 이러한 매개변수들은 각각  [읽기 가능한](#the-queuingstrategy) 스트림 섹션과 [쓰기 가능한](#the-queuingstrategy-3) 스트림 섹션에 설명된 대로 정의됩니다.
+
+### 스트림 코드 샘플 변환
+
+다음 코드 샘플은 작동 중인 간단한 변환 스트림을 보여줍니다.
+
+```js
+// Note that `TextEncoderStream` and `TextDecoderStream` exist now.
+// This example shows how you would have done it before.
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+### 변환 스트림을 통해 읽을 수 있는 스트림 파이핑
+
+`ReadableStream` 인터페이스의 [`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough) 메서드는 변환 스트림 또는 다른 쓰기/읽기 가능한 쌍을 통해 현재 스트림을 파이핑하는 연결 가능한 방법을 제공합니다. 스트림을 파이핑하면 일반적으로 파이프 기간 동안 스트림이 잠기므로 다른 리더가 스트림을 잠글 수 없습니다.
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // called by constructor
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // called read when controller's queue is empty
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close(); // or controller.error();
+  },
+  cancel(reason) {
+    // called when rs.cancel(reason)
+    console.log('[cancel]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+다음 코드 샘플(약간 인위적임)은 반환된 응답 약속을 [스트림으로](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream) 사용하고 청크 단위로 대문자화하여 모든 텍스트를 대문자로 지정하는 `fetch()`의 "샤우팅" 버전을 구현하는 방법을 보여줍니다. 이 접근 방식의 장점은 전체 문서가 다운로드될 때까지 기다릴 필요가 없다는 것입니다. 이는 대용량 파일을 처리할 때 큰 차이를 만들 수 있습니다.
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## 브라우저 지원 및 폴리필
+
+브라우저에서 Streams API에 대한 지원은 다양합니다. 자세한 호환성 데이터는 [사용할 수](https://caniuse.com/streams) 있는지 확인하십시오. 일부 브라우저는 특정 기능의 일부만 구현하므로 데이터를 철저히 확인해야 합니다.
+
+좋은 소식은 사용 가능한 [참조 구현](https://github.com/whatwg/streams/tree/master/reference-implementation)과 프로덕션 사용을 대상으로 하는 [폴리필](https://github.com/MattiasBuelens/web-streams-polyfill)이 있다는 것입니다.
+
+{% Aside 'gotchas' %} 가능한 한 기본 제공 기능을 사용할 수 없는 경우에만 조건부로 폴리필을 로드합니다. {% endAside %}
+
+## 데모
+
+아래 데모는 읽기, 쓰기 및 변환 스트림이 작동하는 모습을 보여줍니다. 이 데모는 `pipeThrough()` 및 `pipeTo()` 파이프 체인의 예도 포함하며 `tee()`도 보여줍니다. 선택적으로 자체 창에서 [데모](https://streams-demo.glitch.me/)를 실행하거나 [소스 코드](https://glitch.com/edit/#!/streams-demo?path=script.js)를 볼 수 있습니다.
+
+{% Glitch 'streams-demo' %}
+
+## 브라우저에서 사용할 수 있는 유용한 스트림
+
+브라우저에 바로 내장된 유용한 스트림이 많습니다. Blob에서 `ReadableStream`을 쉽게 만들 수 있습니다. [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) 인터페이스의 [stream()](https://developer.mozilla.org/docs/Web/API/Blob/stream) 메서드는 `ReadableStream`를 반환하는 데 이는 읽을 때 Blob 내에 포함된 데이터를 반환합니다. 또한 [`File`](https://developer.mozilla.org/docs/Web/API/File) 개체는 `Blob`의 특정 종류이며 Blob가 사용할 수 있는 모든 컨텍스트에서 사용할 수 있습니다.
+
+```js
+const readableStream = new Blob(['hello world'], { type: 'text/plain' }).stream();
+```
+
+`TextDecoder.decode()` 및 `TextEncoder.encode()`의 스트리밍 변형을 각각 [`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) 및 [`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream)이라고 합니다.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+[`CompressionStream`](https://wicg.github.io/compression/#compression-stream) 및 [`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream) 변환 스트림으로 각각 파일을 압축하거나 압축 해제하는 것은 쉽습니다. 아래 코드 샘플은 Streams 사양을 다운로드하고 브라우저에서 바로 압축(gzip)하고 압축된 파일을 디스크에 직접 쓰는 방법을 보여줍니다.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+[파일 시스템 액세스 API](/file-system-access/)의 [`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream) 및 실험적인 [`fetch()` 요청 스트림](/fetch-upload-streaming/#writable-streams)은 외부에서 쓰기 가능한 스트림의 예입니다.
+
+[직렬 API](/serial/)는 읽기 및 쓰기 가능한 스트림을 모두 많이 사용합니다.
+
+```js
+// Prompt user to select any serial port.
+const port = await navigator.serial.requestPort();
+// Wait for the serial port to open.
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// Listen to data coming from the serial device.
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // Allow the serial port to be closed later.
+    reader.releaseLock();
+    break;
+  }
+  // value is a Uint8Array.
+  console.log(value);
+}
+
+// Write to the serial port.
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
+await writer.write(data);
+// Allow the serial port to be closed later.
+writer.releaseLock();
+```
+
+마지막으로 [`WebSocketStream`](/websocketstream/) API는 스트림을 WebSocket API와 통합합니다.
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## 유용한 리소스
+
+- [스트림 사양](https://streams.spec.whatwg.org/)
+- [함께 제공되는 데모](https://streams.spec.whatwg.org/demos/)
+- [스트림 폴리필](https://github.com/MattiasBuelens/web-streams-polyfill)
+- [2016년 - 웹 스트림의 해](https://jakearchibald.com/2016/streams-ftw/)
+- [비동기 반복자와 생성자](https://jakearchibald.com/2017/async-iterators-and-generators/)
+- [스트림 시각화 도우미](https://surma.dev/lab/whatwg-stream-visualizer/lab.html)
+
+## 감사의 말
+
+이 기사는 [Jake Archibald](https://jakearchibald.com/), [François Beaufort](https://github.com/beaufortfrancois), [Sam Dutton](https://samdutton.com/), [Mattias Buelens](https://github.com/MattiasBuelens), [Surma](https://surma.dev/), [Joe Medley](https://github.com/jpmedley) 및 [Adam Rice](https://github.com/ricea)가 검토했습니다. [Jake Archibald](https://jakearchibald.com/)의 블로그 게시물은 스트림을 이해하는 데 많은 도움이 되었습니다. 코드 샘플 중 일부는 GitHub 사용자 [@bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac)의 탐색에서 영감을 얻었으며 산문의 일부는 [Streams에 대한 MDN Web Docs](https://developer.mozilla.org/docs/Web/API/Streams_API)를 기반으로 구축되었습니다. [Streams 표준](https://streams.spec.whatwg.org/)의 [작성자](https://github.com/whatwg/streams/graphs/contributors)는 이 사양을 작성하는 데 엄청난 노력을 기울였습니다. 히어로 이미지는 [Unsplash](https://unsplash.com/@ryanlara)에 [Ryan Lara](https://unsplash.com/)가 제공한 이미지입니다.
diff --git a/src/site/content/ko/blog/strict-csp/index.md b/src/site/content/ko/blog/strict-csp/index.md
new file mode 100644
index 00000000000..0787d8069ba
--- /dev/null
+++ b/src/site/content/ko/blog/strict-csp/index.md
@@ -0,0 +1,405 @@
+---
+layout: post
+title: 엄격한 CSP(콘텐츠 보안 정책)로 XSS(교차 사이트 스크립팅) 완화
+subhead: 교차 사이트 스크립팅에 대한 심층 방어로 스크립트 임시값 또는 해시를 기반으로 CSP를 배포하는 방법.
+description: 교차 사이트 스크립팅에 대한 심층 방어로 스크립트 임시값 또는 해시를 기반으로 CSP를 배포하는 방법 대해 알아봅니다.
+authors:
+  - lwe
+date: 2021-03-15
+hero: image/3lmWcR1VGYVMicNlBh4aZWBTcSg1/mhE0NYvP3JFyvNyiQ1dj.jpg
+alt: 엄격한 콘텐츠 보안 정책을 설정하는 JavaScript 코드의 스크린샷.
+tags:
+  - blog
+  - security
+---
+
+## 엄격한 CSP(콘텐츠 보안 정책)를 배포해야 하는 이유는 무엇일까요?
+
+웹 애플리케이션에 악성 스크립트를 삽입하는 기능인 [XSS(교차 사이트 스크립팅)](https://www.google.com/about/appsecurity/learning/xss/)는 10년이 넘도록 가장 큰 웹 보안 취약점 중 하나였습니다.
+
+[콘텐츠 보안 정책(CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) 은 XSS를 완화하는 데 도움이 되는 추가 보안 계층입니다. CSP 구성에는 웹 페이지에 콘텐츠 보안 정책 HTTP 헤더를 추가하고 사용자 에이전트가 해당 페이지에 대해 로드할 수 있는 리소스를 제어하는 값을 설정하는 작업이 포함됩니다. 본 문서는 [대부분의 구성에서 우회](https://research.google.com/pubs/pub45542.html)할 수 있는 종종 XSS에 노출된 페이지를 떠나 XSS를 완화하기 위해 일반적으로 사용되는 호스트 allowlist 기반의 CSP 대신에 임시값 또는 해시 기반의 CSP를 사용하는 방법에 대해 설명합니다.
+
+{% Aside 'key-term' %} *임시값*은 `<script>` 태그를 신뢰할 수 있는 것으로 표시하는 데 사용할 수 있는 단 한 번 사용되는 임의의 숫자입니다. {% endAside %}
+
+{% Aside 'key-term' %} 해시 함수는 입력 값을 압축된 숫자 값인 해시로 변환하는 수학 함수입니다. *해시*(예: [SHA-256](https://en.wikipedia.org/wiki/SHA-2))를 사용하여 인라인 `<script>` 태그를 신뢰할 수 있는 것으로 표시할 수 있습니다. {% endAside %}
+
+임시값 또는 해시를 기반으로 하는 콘텐츠 보안 정책은 종종 *엄격한 CSP*라고 합니다. 애플리케이션이 엄격한 CSP를 사용하는 경우 HTML 삽입 결함을 발견한 공격자는 일반적으로 이를 사용하여 브라우저가 취약한 문서의 컨텍스트에서 악성 스크립트를 실행하도록 할 수 없습니다. 이는 엄격한 CSP가 해시된 스크립트 또는 서버에서 생성된 올바른 임시값이 있는 스크립트만 허용하므로 공격자는 주어진 응답에 대한 올바른 임시값을 모르면 스크립트를 실행할 수 없기 때문입니다.
+
+{% Aside %} 사이트를 XSS로부터 보호하려면 사용자 입력을 삭제 *하고* CSP를 추가 보안 레이어로 사용하세요. CSP는 악성 스크립트의 실행을 방지할 수 있는 [심층 방어](https://en.wikipedia.org/wiki/Defense_in_depth_(computing)) 기술이지만 XSS 버그를 방지(그리고 즉시 수정) 하는 것을 대체할 수는 없습니다. {% endAside %}
+
+### 허용 목록 CSP보다 엄격한 CSP가 권장되는 이유
+
+사이트에 이미 `script-src www.googleapis.com`과 같은 CSP가 있는 경우, 교차 사이트 스크립팅에 대해 효과적이지 않을 수 있습니다! 이러한 유형의 CSP를 허용 목록 CSP라고 하며 이것은 몇 가지 단점이 있습니다.
+
+- 많은 사용자 정의가 필요합니다.
+- [대부분의 구성에서 우회](https://research.google.com/pubs/pub45542.html) 할 수 있습니다.
+
+따라서 허용 목록 CSP는 일반적으로 공격자가 XSS를 악용하는 것을 방지하는 데 효과가 없습니다. 그렇기 때문에 위에서 설명한 함정을 피하기 위해 암호화 임시값 또는 해시를 기반으로 하는 엄격한 CSP를 사용하는 것이 좋습니다.
+
+<div class="switcher">{% Compare 'worse', 'Allowlist CSP' %} - 사이트를 효과적으로 보호하지 않습니다. ❌ - 고도로 맞춤화되어야 합니다. 😓 {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Strict CSP' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">사이트를 효과적으로 보호합니다. ✅</li>
+<li data-md-type="list_item" data-md-list-type="unordered">항상 같은 구조를 가지고 있습니다. 😌 {% endCompare %}</li>
+</ul>
+<div data-md-type="block_html"></div>
+
+## 엄격한 콘텐츠 보안 정책이란 무엇인가요?
+
+엄격한 콘텐츠 보안 정책은 다음과 같은 구조를 가지며 다음 HTTP 응답 헤더 중 하나를 설정하여 활성화됩니다.
+
+- **임시값 기반의 엄격한 CSP**
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/er4BaGCJzBwDaESFKfZd.jpg", alt="", width="800", height="279" %}
+
+- **해시 기반 엄격한 CSP**
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Aside warning %} 이것은 엄격한 CSP의 가장 기본적인 버전입니다. 여러 브라우저에서 효과를 보려면 조정해야 합니다. 자세한 내용은 [Safari 및 이전 브라우저를 지원하도록 대체 추가](#step-4:-add-fallbacks-to-support-safari-and-older-browsers)를 참조하세요. {% endAside %}
+
+다음 속성은 CSP를 위와 같이 "엄격"하게 만들어 안전합니다.
+
+- 임시값 `'nonce-{RANDOM}'` 또는 해시 `'sha256-{HASHED_INLINE_SCRIPT}'`를 사용하여 어떤 `<script>` 태그가 사이트 개발자가 신뢰하고 사용자 브라우저에서 실행할 수 있도록 허락된 것인지 표시할 수 있습니다.
+
+- 이미 신뢰할 수 있는 스크립트에 의해 생성된 스크립트의 실행을 자동으로 허용하여 임시값 또는 해시 기반 CSP를 배포하는 노력을 줄이기 위해 [`'strict-dynamic'`](https://www.w3.org/TR/CSP3/#strict-dynamic-usage)을 설정합니다. 또한 대부분의 타사 JavaScript 라이브러리 및 위젯 사용을 차단 해제합니다.
+
+- URL 허용 목록을 기반으로 하지 않으므로 [일반적인 CSP 우회를](https://speakerdeck.com/lweichselbaum/csp-is-dead-long-live-strict-csp-deepsec-2016?slide=15) 겪지 않습니다.
+
+- 인라인 이벤트 헨들러 또는 `javascript:` URI와 같은 신뢰할 수 없는 인라인 스크립트를 차단합니다.
+
+- Flash와 같은 위험한 플러그인을 비활성화하도록 `object-src`를 제한합니다.
+
+- `<base>`를 제한하여 `base-uri` 태그 삽입을 차단합니다. 이것은 공격자가 상대 URL에서 로드된 스크립트의 위치를 변경하는 것을 방지합니다.
+
+{% Aside %} 엄격한 CSP의 또 다른 장점은 CSP가 항상 동일한 구조를 가지며 애플리케이션에 맞게 사용자 지정할 필요가 없다는 것입니다. {% endAside %}
+
+## 엄격한 CSP 채택
+
+엄격한 CSP를 채택하려면 다음을 수행해야 합니다.
+
+1. 애플리케이션에서 임시값 또는 해시 기반 CSP를 설정해야 하는지 결정합니다.
+2. [엄격한 콘텐츠 보안 정책이란](#what-is-a-strict-content-security-policy) 섹션에서 CSP를 복사하고 애플리케이션 전체에서 응답 헤더로 설정합니다.
+3. HTML 템플릿 및 클라이언트 측 코드를 리팩터링하여 CSP와 호환되지 않는 패턴을 제거합니다.
+4. Safari 및 이전 브라우저를 지원하도록 대비책을 추가합니다.
+5. CSP를 배포합니다.
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (플래그 `--preset=experimental`를 포함한 v7.3.0 이상) **모범 사례** 감사를 이 프로세스 전반에 걸쳐 사용하여 사이트에 CSP가 있는지, 그리고 이것이 XSS에 대해 효과적일 만큼 충분히 엄격한지 확인할 수 있습니다.
+
+{% Img src="image/9B7J9oWjgsWbuE84mmxDaY37Wpw2/42a4iEEKsD4T3yU47vNQ.png", alt="시행 모드에서 CSP를 찾을 수 없다는 Lighthouse 보고서 경고", width="730", height="78" %}
+
+### 1단계: 임시값 또는 해시 기반 CSP가 필요한지 결정
+
+엄격한 CSP에는 임시값과 해시 기반의 두 가지 유형이 있습니다. 작동 방식은 다음과 같습니다.
+
+- **임시값 기반 CSP** *: 런타임 시* 임의의 숫자를 생성하여 CSP에 포함하고 페이지의 모든 스크립트 태그와 연결합니다. 공격자는 해당 스크립트에 대한 올바른 임의의 숫자를 추측해야 하기 때문에 페이지에 악성 스크립트를 포함하고 실행할 수 없습니다. 이것은 숫자를 추측할 수 없고 런타임 시 모든 응답에 대해 새로 생성된 경우에만 작동합니다.
+- **해시 기반 CSP** : 모든 인라인 스크립트 태그의 해시가 CSP에 추가됩니다. 각 스크립트에는 다른 해시가 있습니다. 공격자는 페이지에 악성 스크립트를 포함하고 실행할 수 없습니다. 해당 스크립트의 해시가 CSP에 있어야 하기 때문입니다.
+
+엄격한 CSP 접근 방식을 선택하는 기준은 다음과 같습니다.
+
+<div>
+  <table>
+      <caption>엄격한 CSP 접근 방식을 선택하는 기준</caption>
+      <thead>
+      <tr>
+        <th>임시값 기반 CSP</th>
+        <td>모든 응답에 대해 새로운 임시 토큰(임시값)을 만들 수 있는 서버에서 렌더링된 HTML 페이지의 경우.</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>해시 기반 CSP</th>
+        <td>정적으로 제공되거나 캐시되어야 하는 HTML 페이지의 경우. 예를 들어, Angular, React 등과 같은 프레임워크로 구축된 단일 페이지 웹 애플리케이션은 서버 측 렌더링 없이 정적으로 제공됩니다.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### 2단계: 엄격한 CSP 설정 및 스크립트 준비
+
+CSP를 설정할 때 다음과 같은 몇 가지 옵션이 있습니다.
+
+- 보고 전용 모드( `Content-Security-Policy-Report-Only` ) 또는 시행 모드( `Content-Security-Policy` ). 보고 전용에서 CSP는 아직 리소스를 차단하지 않습니다. 아무 것도 중단되지 않습니다. 그러나 오류를 보고 차단되었을 항목에 대한 보고서를 받을 수 있습니다. 로컬에서 CSP를 설정하는 중일 때는 두 모드 모두 브라우저 콘솔에서 오류를 표시하므로 이는 실제로 중요하지 않습니다. 적용 모드를 사용하면 페이지가 깨져 보이기 때문에 차단된 리소스를 확인하고 CSP를 조정하기가 훨씬 쉬워집니다. 보고 전용 모드는 나중에 프로세스에서 가장 유용합니다( [5단계](#step-5:-deploy-your-csp) 참조).
+- 헤더 또는 HTML `<meta>` 태그. 로컬 개발의 경우 `<meta>` 태그를 사용하면 CSP를 조정하고 사이트에 미치는 영향을 빠르게 확인할 수 있습니다. 하지만:
+    - 나중에 CSP를 프로덕션에 배포할 때 HTTP 헤더로 설정하는 것이 좋습니다.
+    - 보고서 전용 모드에서 CSP를 설정하려면 헤더로 설정해야 합니다. CSP 메타 태그는 보고서 전용 모드를 지원하지 않습니다.
+
+<span id="nonce-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} 옵션 A: 임시값 기반 CSP {% endDetailsSummary %}
+
+애플리케이션에서 다음 `Content-Security-Policy` HTTP 응답 헤더를 설정합니다.
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside 'caution' %}
+
+`{RANDOM}` 자리 표시자를 **모든 서버 응답에서** *랜덤*으로 생성되는 임시 값으로 교체합니다. {% endAside %}
+
+#### CSP에 대한 임시값 생성
+
+임시값은 페이지 로드당 한 번만 사용되는 임의의 숫자입니다. 임시값 기반 CSP는 공격자가 임시값을 **추측할 수 없는** 경우에만 XSS를 완화할 수 있습니다. CSP의 임시값은 다음과 같아야 합니다.
+
+- 암호학적으로 **강력한 랜** 값(이상적으로는 길이 128비트 이상)
+- **모든 응답에 대해** 새로 생성됨
+- Base64 인코딩
+
+다음은 서버 측 프레임워크에서 CSP 임시값을 추가하는 방법에 대한 몇 가지 예입니다.
+
+- [Django (python)](https://django-csp.readthedocs.io/en/latest/nonce.html)
+- Express (JavaScript):
+
+```javascript
+const app = express();
+app.get('/', function(request, response) {
+    // 모든 응답에 대해 새로운 랜덤 임시값 생성.
+    const nonce = crypto.randomBytes(16).toString("base64");
+    // 엄격한 임시값 기나 CSP 응답 헤더 설정
+    const csp = `script-src 'nonce-${nonce}' 'strict-dynamic' https:; object-src 'none'; base-uri 'none';`;
+    response.set("Content-Security-Policy", csp);
+    // 애플리케이션의 모든 <script> 태그는 이 값에 `임시` 속성을 설정해야 합니다.
+    response.render(template, { nonce: nonce });
+  });
+}
+```
+
+#### `<script>` 요소에 `nonce` 속성 추가
+
+임시값 기반 CSP를 사용하면 모든 `<script>` 요소는 CSP 헤더(모든 스크립트는 동일한 임시값을 가질 수 있음)에 지정된 랜덤 임시 값과 맞는 `nonce` 속성이 있어야 합니다. 첫 번째 단계는 이러한 속성을 모든 스크립트에 추가하는 것입니다.
+
+{% Compare 'worse', 'Blocked by CSP'%}
+
+```html
+<script src="/path/to/script.js"></script>
+<script>foo()</script>
+```
+
+{% CompareCaption %} CSP는 이러한 스크립트에 `nonce` 속성이 없기 때문에 차단합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script nonce="${NONCE}" src="/path/to/script.js"></script>
+<script nonce="${NONCE}">foo()</script>
+```
+
+{% CompareCaption %} `${NONCE}`가 CSP 응답 헤더의 임시값과 일치하는 값으로 대체되는 경우 이러한 스크립트의 실행을 허용합니다. 일부 브라우저는 페이지 소스를 검사할 때 `nonce` 속성을 숨깁니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} CSP에서 `'strict-dynamic'` 을 사용하면 초기 HTML 응답에 있는 `<script>` 태그를 추가해야 합니다. `'strict-dynamic'` 은 이미 신뢰할 수 있는 안전한 스크립트에 의해 로드된 한 페이지에 동적으로 추가된 스크립트의 실행을 허용합니다([사양](https://www.w3.org/TR/CSP3/#strict-dynamic-usage) 참조). {% endAside %}
+
+{% endDetails %}
+
+<span id="hash-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} 옵션 B: 해시 기반 CSP 응답 헤더 {% endDetailsSummary %}
+
+애플리케이션에서 다음 `Content-Security-Policy` HTTP 응답 헤더를 설정합니다.
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+여러 인라인 스크립트의 경우 구문은 `'sha256-{HASHED_INLINE_SCRIPT_1}' 'sha256-{HASHED_INLINE_SCRIPT_2}'`입니다.
+
+{% Aside 'caution' %} `{HASHED_INLINE_SCRIPT}` 자리 표시자는 다른 스크립트를 로드하는 데 사용할 수 있는 인라인 스크립트의 base64로 인코딩된 SHA-256 해시로 바꿔야 합니다(다음 섹션 참조). 이 [도구](https://strict-csp-codelab.glitch.me/csp_sha256_util.html)로 `<script>` 블록의 SHA 해시를 계산할 수 있습니다. 대안은 차단된 스크립트의 해시가 포함된 Chrome 개발자 콘솔의 CSP 위반 경고를 검사하고 이러한 해시를 정책에 'sha256-…'으로 추가하는 것입니다.
+
+공격자가 삽입한 스크립트는 해시된 인라인 스크립트와 이에 의해 동적으로 추가된 스크립트만 브라우저에서 실행할 수 있으므로 브라우저에서 차단됩니다. {% endAside %}
+
+#### 소스 스크립트를 동적으로 로드
+
+외부에서 제공되는 모든 스크립트는 인라인 스크립트를 통해 동적으로 로드되어야 합니다. CSP 해시는 인라인 스크립트에 대해서만 브라우저에서 지원되기 때문입니다(소스 스크립트에 대한 해시는 [브라우저에서 잘 지원되지 않음](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned)).
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/B2YsfJDYw8PRI6kJI7Bs.jpg", alt="", width="800", height="333" %}
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<script src="https://example.org/foo.js"></script>
+<script src="https://example.org/bar.js"></script>
+```
+
+{% CompareCaption %} 인라인 스크립트만 해시될 수 있으므로 CSP는 이러한 스크립트를 차단합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<script>
+var scripts = [ 'https://example.org/foo.js', 'https://example.org/bar.js'];
+scripts.forEach(function(scriptUrl) {
+  var s = document.createElement('script');
+  s.src = scriptUrl;
+  s.async = false; // 실행 순서 유지를 위함
+  document.head.appendChild(s);
+});
+</script>
+```
+
+{% CompareCaption %} 이 스크립트의 실행을 허용하려면 인라인 스크립트의 해시를 계산하고 CSP 응답 헤더에 추가하여 `{HASHED_INLINE_SCRIPT}` 자리 표시자를 대체해야 합니다. 해시 양을 줄이기 위해 모든 인라인 스크립트를 선택적으로 단일 스크립트로 병합할 수 있습니다. 이 작업을 확인하려면 [예제](https://strict-csp-codelab.glitch.me/solution_hash_csp#)를 확인하고 [코드](https://glitch.com/edit/#!/strict-csp-codelab?path=demo%2Fsolution_hash_csp.html%3A1%3A)를 검사하세요. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} 인라인 스크립트에 대한 CSP 해시를 계산할 때 `<script>` 태그를 열고 닫는 사이의 공백 문자가 중요합니다. 이 [도구를](https://strict-csp-codelab.glitch.me/csp_sha256_util.html) 사용하여 인라인 스크립트에 대한 CSP 해시를 계산할 수 있습니다. {% endAside %}
+
+{% Details %}
+
+{% DetailsSummary %} `async = false` 및 스크립트 로딩 `async = false`는 이 경우에 차단되지 않지만 주의해서 사용하세요. {% endDetailsSummary %}
+
+위의 코드 조각에 bar 전에 foo가 실행되도록 하기 위해`s.async = false`가 추가되었습니다(bar가 먼저 로드되더라도). <strong data-md-type="double_emphasis">이 스니펫에서 `s.async = false`는 스크립트가 로드되는 동안 파서를 차단하지 않습니다</strong> . 스크립트가 동적으로 추가되기 때문입니다. `async` 스크립트에 대해 동작하는 것처럼 파서는 스크립트가 실행될 때만 중지됩니다. 그러나 이 스니펫을 사용할 때는 다음 사항에 유의하세요.
+
+- 문서 다운로드가 완료되기 전에 스크립트 중 하나/둘 모두가 실행될 수 있습니다. 스크립트가 실행될 때 문서가 준비되도록 하려면 스크립트를 추가하기 전에 [`DOMContentLoaded` 이벤트](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event)를 기다려야 합니다. 이로 인해 성능 문제가 발생하는 경우(스크립트가 충분히 일찍 다운로드를 시작하지 않기 때문에) 이 페이지에서 [preload 태그](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)를 먼저 사용할 수 있습니다.
+- `defer = true`는 아무 것도 하지 않습니다. 해당 동작이 필요한 경우 스크립트를 실행하려는 시간에 수동으로 실행해야 합니다. {% endDetails %}
+
+{% endDetails %}
+
+### 3단계: HTML 템플릿 및 클라이언트 측 코드를 리팩터링하여 CSP와 호환되지 않는 패턴 제거
+
+인라인 이벤트 핸들러(예: `onclick="…"` , `onerror="…"` ) 및 JavaScript URI( `<a href="javascript:…">` )를 사용하여 스크립트를 실행할 수 있습니다. 이는 XSS 버그를 발견한 공격자가 이러한 종류의 HTML을 삽입하고 악성 JavaScript를 실행할 수 있음을 의미합니다. 임시값 또는 해시 기반 CSP는 이러한 마크업의 사용을 허용하지 않습니다. 사이트에서 위에 설명된 패턴을 사용하는 경우 더 안전한 대안으로 리팩토링해야 합니다.
+
+이전 단계에서 CSP를 활성화한 경우 CSP가 호환되지 않는 패턴을 차단할 때마다 콘솔에서 CSP 위반을 볼 수 있습니다.
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/mRWfNxAhQXzInOLCgtv8.jpg", alt="Chrome 개발자 콘솔의 CSP 위반 보고서", width="800", height="235" %}
+
+대부분의 경우 수정은 간단합니다.
+
+#### 인라인 이벤트 핸들러를 리팩토링하려면 JavaScript 블록에서 추가되도록 다시 작성하십시오
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<span onclick="doThings();">A thing.</span>
+```
+
+{% CompareCaption %} CSP는 인라인 이벤트 핸들러를 차단합니다. {% endCompareCaption%}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<span id="things">A thing.</span>
+<script nonce="${nonce}">
+  document.getElementById('things')
+          .addEventListener('click', doThings);
+</script>
+```
+
+{% CompareCaption %} CSP는 JavaScript를 통해 등록된 이벤트 핸들러를 허용합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### `javascript:` URI의 경우 유사한 패턴을 사용할 수 있습니다
+
+{% Compare 'worse', 'Blocked by CSP' %}
+
+```html
+<a href="javascript:linkClicked()">foo</a>
+```
+
+{% CompareCaption %} CSP는 javascript: URI를 차단합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Allowed by CSP' %}
+
+```html
+<a id="foo">foo</a>
+<script nonce="${nonce}">
+  document.getElementById('foo')
+          .addEventListener('click', linkClicked);
+</script>
+```
+
+{% CompareCaption %} CSP는 JavaScript를 통해 등록된 이벤트 핸들러를 허용합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### JavaScript에서 `eval()` 사용
+
+애플리케이션이 `eval()` 을 사용하여 JSON 문자열 직렬화를 JS 객체로 변환하는 경우 이러한 인스턴스를 `JSON.parse()` 로 리팩토링해야 합니다. 이 또한 [더 빠릅니다.](https://v8.dev/blog/cost-of-javascript-2019#json)
+
+`eval()` 사용을 모두 제거할 수 없는 경우에도 엄격한 임시값 기반 CSP를 설정할 수 있지만 정책을 약간 안전하지 않게 만드는 `'unsafe-eval'` CSP 키워드를 사용해야 합니다.
+
+이 엄격한 CSP 코드랩에서 이것과 더 많은 이러한 리팩토링 예시를 찾을 수 있습니다. {% Glitch { id: 'strict-csp-codelab', path: 'demo/solution_nonce_csp.html', Highlights: '14,20,28,39 ,40,41,42,43,44,45,54,55,56,57,58,59,60', PreviewSize: 35, allow: [] } %}
+
+### 4단계: Safari 및 이전 브라우저를 지원하도록 대체 추가
+
+CSP는 모든 주요 브라우저에서 지원되지만 두 가지 대체가 필요합니다.
+
+- `'strict-dynamic'`을 사용하려면 `'strict-dynamic'`에 대한 지원이 없는 유일한 주요 브라우저인 사파리에 대한 대체로 `https:`를 추가해야 합니다.
+
+    - `'strict-dynamic'` 을 지원하는 모든 브라우저는 `https:` 대체를 무시하므로 정책의 강도가 떨어지지 않습니다.
+    - Safari에서 외부 소스 스크립트는 HTTPS 출처에서 온 경우에만 로드할 수 있습니다. 이것은 엄격한 CSP보다 안전하지 않습니다(대체입니다). 그러나 `'unsafe-inline'`이 존재하지 않거나 해시 또는 임시값이  있는 경우 무시되기 때문에 `javascript:` 주입과 같은 일반적인 XSS 원인으로부터 여전히 보호됩니다.
+
+- 매우 오래된 브라우저 버전(4년 이상)과의 호환성을 보장하기 위해 `'unsafe-inline'` 을 대체로 추가할 수 있습니다. CSP 임시값 또는 해시가 있는 경우 모든 최신 브라우저는 `'unsafe-inline'`를 무시합니다.
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{random}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside %} `https:` 및 `unsafe-inline`은 `strict-dynamic`을 지원하는 브라우저에서 무시되므로 정책을 안전하지 않게 만들지 않습니다. {% endAside %}
+
+### 5단계: CSP 배포
+
+로컬 개발 환경에서 CSP에 의해 차단되는 합법적인 스크립트가 없는지 확인한 후 CSP를 (스테이징 후) 프로덕션 환경에 배포할 수 있습니다.
+
+1. `Content-Security-Policy-Report-Only` 헤더를 사용하여 보고서 전용 모드에서 CSP를 (선택적으로) 배포합니다. [보고 API](/reporting-api/)에 대해 자세히 알아보세요. 보고서 전용 모드는 실제로 CSP 제한을 적용하기 전에 프로덕션의 새 CSP와 같은 잠재적인 주요 변경 사항을 테스트하는 데 편리합니다. 보고 전용 모드에서 CSP는 애플리케이션의 동작에 영향을 주지 않습니다(실제로 중단되는 것은 없음). 그러나 브라우저는 CSP와 호환되지 않는 패턴이 발생하는 경우 콘솔 오류 및 위반 보고서를 계속 생성합니다(따라서 최종 사용자에게 어떤 문제가 발생했는지 확인할 수 있습니다).
+2. CSP가 최종 사용자에게 손상을 초래하지 않을 것이라고 확신하면 `Content-Security-Policy` 응답 헤더를 사용하여 CSP를 배포합니다. **이 단계를 완료해야만 CSP가 XSS로부터 애플리케이션을 보호하기 시작합니다** . HTTP 헤더 서버 측을 통해 CSP를 설정하는 것이 `<meta>` 태그로 설정하는 것보다 더 안전합니다. 가능하면 헤더를 사용하십시오.
+
+{% Aside 'gotchas' %} 사용 중인 CSP를 [CSP Evaluator](https://csp-evaluator.withgoogle.com) 또는 Lighthouse로 확인하여 "엄격"한지 확인하세요. 정책을 조금만 변경해도 보안이 크게 저하될 수 있으므로 이는 매우 중요합니다. {% endAside %}
+
+{% Aside 'caution' %} 프로덕션 트래픽에 CSP를 활성화하면 브라우저 확장 프로그램 및 멀웨어로 인해 CSP 위반 보고서에 약간의 노이즈가 표시될 수 있습니다. {% endAside %}
+
+## 제한 사항
+
+일반적으로 엄격한 CSP는 XSS를 완화하는 데 도움이 되는 강력한 추가 보안 레이어를 제공합니다. 대부분의 경우 CSP는 공격 표면을 상당히 줄입니다(`javascript:` URI와 같은 위험한 패턴은 완전히 꺼짐). 그러나 사용 중인 CSP 유형(임시값, 해시, `'strict-dynamic'` 또는 제외)에 따라 CSP가 보호하지 않는 경우가 있습니다.
+
+- 스크립트는 임시값이지만 본문 또는 해당 `<script>` 요소의 `src` 매개 변수에 직접 주입이 있는 경우입니다.
+- 동적으로 생성된 스크립트 `document.createElement('script')` )의 위치에 주입이 있는 경우, 인수 값을 기반으로 `script` DOM 노드를 생성하는 라이브러리 함수를 포함합니다. jQuery의 `.html()`, `.get()` 및   jQuery &lt; 3.0의 `.post()`와 같은 몇 가지 일반적인 API가 포함됩니다.
+- 오래된 AngularJS 애플리케이션에 템플릿 주입이 있는 경우. AngularJS 템플릿을 주입할 수 있는 공격자는 이를 사용하여  [임의의 JavaScript를 실행](https://sites.google.com/site/bughunteruniversity/nonvuln/angularjs-expression-sandbox-bypass)할 수 있습니다.
+- 정책이 `'unsafe-eval'`과 `eval()`,  `setTimeout()` 및 기타 거의 사용되지 않는 API에 대한 주입을 포함하는 경우입니다.
+
+개발자와 보안 엔지니어는 코드 검토 및 보안 감사 중에 이러한 패턴에 특히 주의해야 합니다. [이 CSP 프레젠테이션](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf#page=27)에서 위에 설명된 사례에 대한 자세한 내용을 찾을 수 있습니다.
+
+{% Aside %} 신뢰할 수 있는 유형은 엄격한 CSP를 매우 잘 보완하며 위에 나열된 일부 제한 사항으로부터 효율적으로 보호할 수 있습니다. [web.dev](/trusted-types)에서 신뢰할 수 있는 유형을 사용하는 방법에 대해 자세히 알아보세요. {% endAside %}
+
+## 추가 참고 자료
+
+- [CSP는 죽었다, CSP 만세! 화이트리스트의 불안정성과 콘텐츠 보안 정책의 미래](https://research.google/pubs/pub45542/)
+- [CSP 평가자](https://csp-evaluator.withgoogle.com/)
+- [LocoMoco 콘퍼런스: 콘텐츠 보안 정책 - 강화와 완화 사이의 성공적인 혼란](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf)
+- [Google I/O 토크: 최신 플랫폼 기능으로 웹 앱 보호](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)
diff --git a/src/site/content/ko/blog/text-fragments/index.md b/src/site/content/ko/blog/text-fragments/index.md
new file mode 100644
index 00000000000..45872943321
--- /dev/null
+++ b/src/site/content/ko/blog/text-fragments/index.md
@@ -0,0 +1,314 @@
+---
+title: |2
+
+  아무도 링크한 적이 없는 과감한 링크: 텍스트 조각
+subhead: 텍스트 조각을 사용하면 URL 조각에 텍스트 조각을 지정할 수 있습니다. 이러한 텍스트 조각이 있는 URL로 이동할 때 브라우저를 강조하거나 사용자의 주의를 끌 수 있습니다.
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: 텍스트 조각을 사용하면 URL 조각에 텍스트 조각을 지정할 수 있습니다. 이러한 텍스트 조각이 있는 URL로 이동할 때 브라우저를 강조하거나 사용자의 주의를 끌 수 있습니다.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## 조각 식별자
+
+Chrome 80은 커다란 릴리스였습니다. 여기에는 웹 작업자의 [ECMAScript 모듈](/module-workers/), [무효 병합](https://v8.dev/features/nullish-coalescing), [선택적 연결](https://v8.dev/features/optional-chaining) 등과 같이 매우 기대되는 기능이 많이 포함되어 있습니다. 릴리스는 평소와 같이 Chromium 블로그의 [블로그 게시물](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)을 통해 발표되었습니다. 아래 스크린샷에서 블로그 게시물의 발췌문을 볼 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %} <figcaption><code>id</code> 속성이 있는 요소 주위에 빨간색 상자가 있는 Chromium 블로그 게시물.</figcaption></figure>
+
+아마도 모든 빨간 상자가 무엇을 의미하는지 스스로에게 묻고 있을 것입니다. DevTools에서 다음 스니펫을 실행한 결과입니다. `id` 속성이 있는 모든 요소를 강조 표시합니다.
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+페이지 URL의 [해시](https://developer.mozilla.org/docs/Web/API/URL/hash)에서 사용하는 [조각 식별자](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment) 덕분에 빨간색 상자로 강조 표시된 모든 요소에 대한 딥 링크를 배치할 수 있습니다. *옆에 있는 [제품 포럼](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)의 피드백 제공* 상자에 딥 링크를 하고 싶다고 가정하고 URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1&lt;/mark&gt;</code></a>을 직접 제작해서 할 수 있습니다. 개발자 도구의 요소 패널에서 볼 수 있듯이 문제의 요소에는 값이 `id` 속성이 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %} <figcaption>요소의 <code>id</code>를 표시하는 개발 도구.</figcaption></figure>
+
+JavaScript's `URL()` 생성자로 이 URL을 구문 분석하면 다른 구성 요소가 표시됩니다. `#HTML1` 값을 가진 `hash` 속성을 확인하세요.
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Creates a new `URL` object
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+`id`를 찾기 위해 개발자 도구를 열어야 한다는 사실은 페이지의 이 특정 섹션이 블로그 게시물 작성자에 의해 링크될 가능성에 대해 많은 것을 말해줍니다.
+
+`id` 없는 항목에 연결하려면 어떻게 합니까? *웹 작업자의 ECMAScript 모듈* 헤딩에 연결하는 것으로 가정해 보겠습니다. 아래 스크린샷에서 볼 수 있듯이 `<h1>`에 `id` 속성이 없습니다. 즉, 이 제목에 연결할 수 있는 방법이 없습니다. 이것이 텍스트 조각이 해결하는 문제입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption><code>id</code> 없는 제목을 표시하는 개발 도구.</figcaption></figure>
+
+## 텍스트 조각
+
+[텍스트 조각](https://wicg.github.io/ScrollToTextFragment/) 제안은 URL 해시에 텍스트 조각을 지정하기 위한 지원을 추가합니다. 이러한 텍스트 조각이 있는 URL로 이동할 때 사용자 에이전트는 이를 강조하거나 사용자의 주의를 끌 수 있습니다.
+
+### 브라우저 호환성
+
+텍스트 조각 기능은 Chromium 기반 브라우저 버전 80 이상에서 지원됩니다. 글을 쓰는 시점에서 Safari와 Firefox는 이 기능을 구현하려는 의도를 공개적으로 알리지 않았습니다. Safari 및 Firefox 토론에 대한 포인터는 [관련 링크](#related-links)를 참조하십시오.
+
+{% Aside 'success' %} 이 링크는 Twitter와 같은 일부 일반 서비스에서 사용하는 [클라이언트 측 리디렉션](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections)을 통해 제공될 때 작동하지 않았습니다. 이 문제는 [crbug.com/1055455](https://crbug.com/1055455)로 추적되었으며 현재 수정되었습니다. 일반 [HTTP 리디렉션](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle)은 항상 제대로 작동했습니다. {% endAside %}
+
+[보안](#security) 상의 이유로 이 기능을 사용하려면 [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener) 컨텍스트에서 링크를 열어야 합니다. `<a>` 앵커 마크업에 [`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel)를 포함하거나 창 기능 기능의 `Window.open()` [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener)를 추가해야 합니다.
+
+### `textStart`
+
+가장 간단한 형태의 텍스트 조각 구문은 다음과 같습니다. 해시 기호 `#` 뒤에 `:~:text=`와 마지막으로 `textStart` 있으며 이는 링크하려는 [백분율로 인코딩된](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 텍스트를 나타냅니다.
+
+```bash
+#:~:text=textStart
+```
+
+예를 들어 [Chrome 80의 기능을 발표](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) 하는 블로그 게시물 제목에 있는 *웹 작업자의 ECMAScript 모듈*에 연결하고 싶다고 가정해 보겠습니다. 이 경우 URL은 다음과 같습니다.
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers&lt;/mark&gt;</code></a>
+
+텍스트 조각이 <mark class="highlight-line highlight-line-active">이와 같이</mark> 강조됩니다. Chrome과 같은 지원 브라우저에서 링크를 클릭하면 텍스트 조각이 강조 표시되고 보기로 스크롤됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption>텍스트 조각이 보기로 스크롤되어 강조 표시되었습니다.</figcaption></figure>
+
+### `textStart` 및 `textEnd`
+
+이제 제목뿐만 아니라 *웹 작업자의 ECMAScript 모듈*이라는 전체 *섹션*에 연결하려면 어떻게 해야 합니까? 섹션의 전체 텍스트를 백분율로 인코딩하면 결과 URL이 비현실적으로 길어집니다.
+
+다행히 더 좋은 방법이 있습니다. `textStart,textEnd` 구문을 사용하여 원하는 텍스트의 프레임을 지정할 수 있습니다. 따라서, I는 원하는 텍스트의 시작 퍼센트 인코딩 단어 쌍 및 쉼표 `,`로 구분하여 원하는 텍스트의 끝에 퍼센트 인코딩 된 단어 쌍을 지정합니다.
+
+다음과 같습니다.
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.&lt;/mark&gt;</code></a> .
+
+`textStart`의 경우 `ECMAScript%20Modules%20in%20Web%20Workers`, 쉼표 `,` 다음에 `ES%20Modules%20in%20Web%20Workers.` `textEnd`가 옵니다. Chrome과 같은 지원 브라우저를 클릭하면 전체 섹션이 강조 표시되고 보기로 스크롤됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %} <figcaption>텍스트 조각이 보기로 스크롤되어 강조 표시되었습니다.</figcaption></figure>
+
+이제 `textStart` 및 `textEnd` 선택에 관해 궁금증이 생길 것입니다. 실제로 URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules,Web%20Workers.&lt;/mark&gt;</code></a>는 약간 더 짧으며, 양쪽에 두 단어만 있으면 작동했을 것입니다. `textStart` 및 `textEnd`를 이전 값과 비교합니다.
+
+`textStart`와 textEnd 모두에 대해 한 단어만 사용 `textEnd`을 알 수 있습니다. URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript,Workers.&lt;/mark&gt;</code></a> 는 이제 더 짧아졌지만 강조 표시된 텍스트 조각은 더 이상 원래 원하는 것이 아닙니다. `Workers.` 단어가 처음 나오는 위치에서 멈춥니다. , 정확하지만 강조하려고 한 것은 아닙니다. 문제는 원하는 섹션이 현재 한 단어로 된 `textStart` 및 `textEnd` 값으로 고유하게 식별되지 않는다는 것입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption>의도하지 않은 텍스트 조각이 보기로 스크롤되어 강조 표시되었습니다.</figcaption></figure>
+
+### `prefix-` 및 `-suffix`
+
+`textStart` 및 `textEnd` 대해 충분히 긴 값을 사용하는 것은 고유한 링크를 얻기 위한 한 가지 솔루션입니다. 그러나 일부 상황에서는 이것이 불가능합니다. 참고로 Chrome 80 릴리스 블로그 게시물을 예로 선택한 이유는 무엇인가요? 대답은 이번 릴리스에서 텍스트 조각이 도입되었다는 것입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="블로그 게시물 텍스트: 텍스트 URL 조각. 사용자 또는 작성자는 이제 URL에 제공된 텍스트 조각을 사용하여 페이지의 특정 부분에 연결할 수 있습니다. 페이지가 로드되면 브라우저는 텍스트를 강조 표시하고 조각을 스크롤하여 보기에 표시합니다. 예를 들어 아래 URL은 'Cat'에 대한 Wiki 페이지를 로드하고 'text' 매개변수에 나열된 콘텐츠로 스크롤합니다.", width="800", height="200" %} <figcaption>텍스트 조각 발표 블로그 게시물 발췌.</figcaption></figure>
+
+위의 스크린샷에서 "텍스트"라는 단어가 네 번 나타나는 것을 확인하십시오. 네 번째 항목은 녹색 코드 글꼴로 작성됩니다. 이 특정 단어에 연결하려면 `textStart`를 `text`로 설정합니다. "text"라는 단어는 하나의 단어이므로 `textEnd`가 될 수 없습니다. 그렇다면 어떻게 될까요? URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=text&lt;/mark&gt;</code></a>는 제목에 이미 있는 "Text"라는 단어가 처음 나타날 때 일치합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption>"텍스트"가 처음 나타날 때 일치하는 텍스트 조각.</figcaption></figure>
+
+{% Aside 'caution' %} 텍스트 조각 일치는 대소문자를 구분하지 않습니다. {% endAside %}
+
+다행히 해결책이 있습니다. 이런 경우에, `prefix​-`와 `-suffix`를 지정할 수 있습니다. 녹색 코드 글꼴 "text" 앞의 단어는 "the"이고 뒤의 단어는 "parameter"입니다. "텍스트"라는 단어의 다른 세 항목 중 어느 것도 동일한 주변 단어를 가지고 있지 않습니다. 이 지식을 바탕으로, 이전 URL을 조정하고 `prefix-`와 `-suffix`를 추가할 수 있습니다. 다른 매개변수와 마찬가지로 이 매개변수도 백분율로 인코딩되어야 하며 둘 이상의 단어를 포함할 수 있습니다. <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=the-,text,-parameter&lt;/mark&gt;</code></a>. 구문 분석에서 `prefix-`와 `-suffix`를 명확하게 식별하기 위해서 `textStart` 및 선택적 `textEnd`로부터 대시 `-`를 사용해 구분할 필요가 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %} <figcaption>"텍스트"의 원하는 발생에서 일치하는 텍스트 조각.</figcaption></figure>
+
+### 전체 구문
+
+텍스트 조각의 전체 구문은 아래와 같습니다. (대괄호는 선택적 매개변수를 나타냅니다.) 모든 매개변수의 값은 퍼센트로 인코딩되어야 합니다. 이것은 대시 `-` , 앰퍼샌드 `&` 및 쉼표 `,` 문자에 특히 중요하므로 텍스트 지시문 구문의 일부로 해석되지 않습니다.
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+각 `prefix-` , `textStart` , `textEnd` 및 `-suffix`는 단일 [블록 수준 요소](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements) 내의 텍스트와만 일치하지만 전체 `textStart,textEnd` 범위는 여러 블록에 걸쳐 있을 *수 있습니다.* 예를 들어 `:~:text=The quick,lazy dog`은 시작 문자열 "The quick"이 중단되지 않은 단일 블록 수준 요소 내에 나타나지 않기 때문에 다음 예에서 일치하지 않습니다.
+
+```html
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
+```
+
+그러나 다음 예에서는 일치합니다.
+
+```html
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
+```
+
+### 브라우저 확장 프로그램으로 텍스트 조각 URL 만들기
+
+텍스트 조각 URL을 손으로 만드는 것은 특히 고유한지 확인하는 경우 지루합니다. 정말로 원하는 경우 사양에 몇 가지 팁이 있으며 [텍스트 조각 URL을 생성하기 위한](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives) 정확한 단계가 나열되어 있습니다. 텍스트를 선택한 다음 컨텍스트 메뉴에서 "선택한 텍스트로 링크 복사"를 클릭하여 링크할 수 있는 [텍스트 조각에 링크](https://github.com/GoogleChromeLabs/link-to-text-fragment)라는 오픈 소스 브라우저 확장을 제공합니다. 이 확장은 다음 브라우저에서 사용할 수 있습니다.
+
+- [Chrome용 텍스트 조각에 대한 링크](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Microsoft Edge용 텍스트 조각에 대한 링크](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Mozilla Firefox용 텍스트 조각에 대한 링크](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Apple Safari용 텍스트 조각에 대한 링크](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %}<figcaption> <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">Text Fragment</a> 브라우저 확장에 대한 링크.</figcaption></figure>
+
+### 하나의 URL에 있는 여러 텍스트 조각
+
+여러 텍스트 조각이 하나의 URL에 나타날 수 있습니다. 특정 텍스트 조각은 앰퍼샌드 문자 `&`로 구분해야 합니다. 다음은 3개의 텍스트 조각이 있는 링크의 예입니다. <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet&lt;mark class="highlight-line highlight-line-active"&gt;</code></a> .
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %}<figcaption> 하나의 URL에 3개의 텍스트 조각이 있습니다.</figcaption></figure>
+
+### 요소 및 텍스트 조각 혼합
+
+전통적인 요소 조각은 텍스트 조각과 결합될 수 있습니다. 예를 들어 페이지의 원본 텍스트가 변경되는 경우 의미 있는 대체를 제공하여 텍스트 조각이 더 이상 일치하지 않도록 하기 위해 동일한 URL에 둘 다 있으면 완벽합니다. URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.&lt;/mark&gt;</code></a> *[제품 포럼](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs) 섹션의 피드백 제공* 링크에는 요소 단편(`HTML1`)과 텍스트 조각(`text=Give%20us%20feedback%20in%20our%20Product%20Forums.`)을 포함합니다:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %}<figcaption> 요소 조각과 텍스트 조각 모두와 연결합니다.</figcaption></figure>
+
+### 조각 지시문
+
+나는 아직 설명하지 않은 구문의 한 요소가있다 : 조각 지침 `:~:` . 위에 표시된 기존 URL 요소 단편과의 호환성 문제를 피하기 위해 [텍스트 단편 사양](https://wicg.github.io/ScrollToTextFragment/)은 단편 지시문을 도입합니다. `:~:` 구분된 URL 조각의 일부입니다. `text=`와 같은 사용자 에이전트 지침을 위해 예약되어 있으며 작성자 스크립트가 직접 상호 작용할 수 없도록 로드하는 동안 URL에서 제거됩니다. 사용자 에이전트 지침은 *지시문*이라고도 합니다. 따라서 구체적인 경우에는 `text=` *텍스트 지시문*이라고 합니다.
+
+### 특징 감지
+
+지원을 감지하려면 `document` `fragmentDirective` 속성을 테스트하십시오. 조각 지시문은 URL이 문서가 아닌 브라우저로 지시되는 지침을 지정하는 메커니즘입니다. 이는 작성자 스크립트와의 직접적인 상호 작용을 피하기 위한 것이므로 기존 콘텐츠에 주요 변경 사항을 도입하는 것을 두려워하지 않고 향후 사용자 에이전트 지침을 추가할 수 있습니다. 그러한 미래 추가의 한 가지 잠재적인 예는 번역 힌트가 될 수 있습니다.
+
+```js
+if ('fragmentDirective' in document) {
+  // Text Fragments is supported.
+}
+```
+
+{% Aside %} Chrome 80부터 Chrome 85까지, `fragmentDirective` `Location.prototype`에 정의되었습니다. 이 변경 사항에 대한 자세한 내용은 [WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130)을 참조하십시오. {% endAside %}
+
+기능 감지는 링크를 지원하지 않는 브라우저에 대한 텍스트 조각 링크 제공을 피하기 위해 링크가 동적으로 생성되는 경우(예: 검색 엔진에 의해) 주로 사용됩니다.
+
+### 텍스트 조각 스타일 지정
+
+기본적으로 브라우저는 표시 스타일과 동일한 방식으로 텍스트 조각의 스타일을 지정 [`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) (일반적으로 노란색 바탕에 검은색, CSS [시스템 색상](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors) `mark`). 사용자 에이전트 스타일시트에는 다음과 같은 CSS가 포함되어 있습니다.
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+보시다시피 브라우저는 적용된 강조 표시를 사용자 지정하는 데 사용할 수 가상 선택기(pseudo selector) [`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text)를 내포합니다. 예를 들어 텍스트 조각을 빨간색 배경에 검은색 텍스트로 디자인할 수 있습니다. 항상 그렇듯이, 재정의 스타일로 인해 접근성 문제가 발생하지 않도록 [색상 대비를 확인](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast)하고 강조 표시가 나머지 콘텐츠와 시각적으로 뚜렷하게 구분되는지 확인하십시오.
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### 폴리필 가능성
+
+텍스트 조각 기능은 어느 정도 폴리필할 수 있습니다. JavaScript에서 기능이 구현되는 텍스트 조각에 대한 기본 제공 지원을 제공하지 않는 브라우저를 위해 [확장 프로그램](https://github.com/GoogleChromeLabs/link-to-text-fragment)에서 내부적으로 사용하는 [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill)을 제공합니다.
+
+### 프로그래밍 방식 텍스트 조각 링크 생성
+
+[폴리필](https://github.com/GoogleChromeLabs/text-fragments-polyfill)에는 가져와 텍스트 조각 링크를 생성하는 데 사용할 수 있는 `fragment-generation-utils.js` 파일이 포함되어 있습니다. 이는 아래 코드 샘플에 설명되어 있습니다.
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### 분석 목적으로 텍스트 조각 얻기
+
+많은 사이트가 라우팅을 위해 조각을 사용합니다. 이것이 브라우저가 해당 페이지를 손상시키지 않기 위해 텍스트 조각을 제거하는 이유입니다. 예를 들어 분석 목적을 위해 페이지에 대한 텍스트 조각 링크를 노출해야 할 [필요성이 인정](https://github.com/WICG/scroll-to-text-fragment/issues/128)되었지만 제안된 솔루션은 아직 구현되지 않았습니다. 현재 해결 방법으로 아래 코드를 사용하여 원하는 정보를 추출할 수 있습니다.
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### 보안
+
+텍스트 조각 지시문은 [사용자 활성화](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation)의 결과인 전체(동일 페이지가 아닌) 탐색에서만 호출됩니다. 또한 목적지와 다른 출발지에서 시작하는 탐색은 목적지 페이지가 충분히 격리된 것으로 알려진 [`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) 텍스트 조각 지시문은 메인 프레임에만 적용됩니다. 즉, iframe 내에서 텍스트가 검색되지 않고 iframe 탐색이 텍스트 조각을 호출하지 않습니다.
+
+### 프라이버시
+
+페이지에서 텍스트 조각이 발견되었는지 여부에 관계없이 텍스트 조각 사양의 구현이 누출되지 않는 것이 중요합니다. 요소 조각은 원래 페이지 작성자가 완전히 제어하지만 텍스트 조각은 누구나 만들 수 있습니다. 위의 예에서 `<h1>`에 `id`가 없었기 때문에 웹 작업자의 *ECMAScript 모듈* 제목에 연결할 수 있는 방법이 없었지만 누구나 텍스트 조각을 세심히 제작하여 연결할 수 있었던 방법을 기억하십시오.
+
+악의적인 광고 네트워크 `evil-ads.example.com`을 실행했다고 생각해 보십시오. 광고 iframe 중 하나에서 텍스트 조각 URL <code>dating.example.com&amp;lt;mark class="highlight"를 사용하여 &lt;code data-md-type="codespan"&gt;dating.example.com</code>에 대한 숨겨진 교차 출처 iframe을 동적으로 생성했다고 가정해 보겠습니다. -line Highlight-line-active"&gt;#:~:text=Log%20Out&lt;/mark&gt; 사용자가 광고와 상호작용하면 "Log Out"이라는 텍스트가 발견되면 피해자가 현재 `dating.example.com`에 로그인되어 있다는 것을 알고 있으며 이를 사용자 프로파일링에 사용할 수 있습니다. 순진한 텍스트 조각 구현은 성공적인 일치가 포커스 전환을 유발해야 한다고 결정할 수 있으므로 `evil-ads.example.com`에서 `blur` 이벤트를 수신하고 매칭이 발생한 때를 알 수 있습니다. Chrome에서는 위와 같은 시나리오가 발생하지 않도록 텍스트 조각을 구현했습니다.
+
+또 다른 공격은 스크롤 위치를 기반으로 하는 네트워크 트래픽을 악용하는 것일 수 있습니다. 회사 인트라넷 관리자와 같이 피해자의 네트워크 트래픽 로그에 액세스했다고 가정합니다. 이제 긴 인적 자원 문서에 *What to Do If You Suffer From…* 그리고 *번아웃* , *불안* 등과 같은 조건 목록이 있다고 상상해 보십시오. 목록의 각 항목 옆에 추적 픽셀을 배치할 수 있습니다. 그런 다음 문서 로드가 *번아웃* 항목 옆에 있는 추적 픽셀의 로드와 일시적으로 동시에 발생한다고 판단하면 인트라넷 관리자로서 직원이 텍스트 조각 링크를 클릭했다고 결정할 수 있습니다. `:~:text=burn%20out`을 사용하여 직원이 기밀이며 누구에게도 표시되지 않는다고 가정했을 수 있습니다. 이 예는 처음부터 다소 인위적으로 만들어졌고 악용하려면 *매우* 구체적인 전제 조건이 충족되어야 하기 때문에 Chrome 보안 팀은 탐색 시 스크롤을 구현하는 위험을 관리하기 쉽게 평가했습니다. 다른 사용자 에이전트는 대신 수동 스크롤 UI 요소를 표시하기로 결정할 수 있습니다.
+
+선택 해제하려는 사이트의 경우 Chromium은 보낼 수 있는 [문서 정책](https://wicg.github.io/document-policy/) 헤더 값을 지원하므로 사용자 에이전트가 텍스트 조각 URL을 처리하지 않습니다.
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## 텍스트 조각 비활성화
+
+이 기능을 사용하지 않도록 설정하기 위한 가장 쉬운 방법은 예를 들어 [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj)(Google 제품 아님)와 같이, HTTP 응답 헤더를 삽입 할 수 있는 확장 기능을 사용하여 응답(*not* 요청)을 삽입하는 것입니다:
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+더 복잡한 또 다른 옵트아웃 방법은 엔터프라이즈 설정 [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled)를 사용하는 것입니다. macOS에서 이 작업을 수행하려면 터미널에 아래 명령을 붙여넣습니다.
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+Windows의 경우 [Google Chrome Enterprise 도움말](https://support.google.com/chrome/a/answer/9131254?hl=en) 지원 사이트의 설명서를 따르십시오.
+
+{% Aside 'warning' %} 수행하는 작업을 확실히 알고 있을 때만 이것을 시도하십시오. {% endAside %}
+
+## 웹 검색의 텍스트 조각
+
+일부 검색의 경우 검색 엔진 Google은 관련 웹사이트의 콘텐츠 스니펫으로 빠른 답변이나 요약을 제공합니다. 이러한 *추천 스니펫* 은 검색이 질문 형식일 때 표시될 가능성이 가장 높습니다. 추천 스니펫을 클릭하면 사용자가 소스 웹 페이지의 추천 스니펫 텍스트로 바로 이동합니다. 이것은 자동으로 생성된 텍스트 조각 URL 덕분에 작동합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %} <figcaption>추천 스니펫을 보여주는 Google 검색 엔진 결과 페이지. 상태 표시줄에 텍스트 조각 URL이 표시됩니다.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %} <figcaption>클릭하면 페이지의 관련 섹션이 스크롤되어 표시됩니다.</figcaption></figure>
+
+## 결론
+
+텍스트 조각 URL은 웹페이지의 임의의 텍스트에 연결하는 강력한 기능입니다. 학계에서는 이를 사용하여 매우 정확한 인용 또는 참조 링크를 제공할 수 있습니다. 검색 엔진은 이를 사용하여 페이지의 텍스트 결과에 딥링크할 수 있습니다. 소셜 네트워킹 사이트는 이를 사용하여 사용자가 액세스할 수 없는 스크린샷 대신 웹페이지의 특정 구절을 공유할 수 있습니다. [텍스트 조각 URL](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet)을 유용하게 사용하시기 바랍니다. [Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment) 브라우저 확장을 반드시 설치해야 합니다.
+
+## 관련된 링크
+
+- [사양 초안](https://wicg.github.io/scroll-to-text-fragment/)
+- [태그 검토](https://github.com/w3ctag/design-reviews/issues/392)
+- [Chrome 플랫폼 상태 항목](https://chromestatus.com/feature/4733392803332096)
+- [크롬 추적 버그](https://crbug.com/919204)
+- [배송 의도 스레드](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [WebKit-Dev 스레드](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Mozilla 표준 위치 스레드](https://github.com/mozilla/standards-positions/issues/194)
+
+## 감사의 말
+
+텍스트 조각은 [Grant Wang](https://github.com/grantjwang)의 공헌으로 [Nick Burris](https://github.com/nickburris)와 [David Bokan](https://github.com/bokand)이 구현하고 지정했습니다. 이 기사의 철저한 검토에 애써준 [Joe Medley](https://github.com/jpmedley)에게 감사 인사를 전합니다. 영웅 이미지 제공: [Unsplash](https://unsplash.com/photos/oMpAz-DN-9I)에서 [Greg Rakozy](https://unsplash.com/@grakozy).
diff --git a/src/site/content/ko/blog/trust-tokens/index.md b/src/site/content/ko/blog/trust-tokens/index.md
new file mode 100644
index 00000000000..c4d55461ec6
--- /dev/null
+++ b/src/site/content/ko/blog/trust-tokens/index.md
@@ -0,0 +1,233 @@
+---
+title: 신뢰 토큰 시작하기
+subhead: '신뢰 토큰은 웹사이트가 수동 추적 없이 사기를 방지하기 위해 한 브라우징 컨텍스트에서 다른 브라우징 컨텍스트(예: 사이트 간)로 제한된 양의 정보를 전달할 수 있도록 하는 새로운 API입니다.'
+authors:
+  - samdutton
+date: 2020-06-22
+updated: 2021-12-10
+hero: image/admin/okxi2ttRG3h1Z4F3cylI.jpg
+thumbnail: image/admin/cTo0l2opcfNxg1TEjxSg.jpg
+alt: 토큰을 들고 있는 손의 흑백 사진
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside  'caution' %} **⚠️ 경고: 앱을 업데이트해야 할 수도 있습니다!**
+
+**TrustTokenV3** 는 Chromium의 신뢰 토큰 구현에 대한 이전 버전과 호환되지 않는 변경 사항 모음입니다. 변경 사항은 2021년 7월 말에 Chrome 안정화 버전에 도달한 Chrome 92에 적용되었습니다.
+
+아직 업데이트하지 않았다면 [API를 테스트하는](https://www.chromestatus.com/feature/5078049450098688) 기존 애플리케이션을 업데이트해야 합니다.
+
+자세히 알아보기: [TrustTokenV3이란 무엇입니까?](https://bit.ly/what-is-trusttokenv3) {% endAside %}
+
+<br><br>
+
+{% YouTube id='bXB1Iwq6Eq4' %}
+
+## 요약
+
+신뢰 토큰을 사용하면 출처가 신뢰하는 사용자에게 암호화 토큰을 발급할 수 있습니다. 토큰은 사용자의 브라우저에 저장됩니다. 그런 다음 브라우저는 다른 컨텍스트에서 토큰을 사용하여 사용자의 신뢰성을 평가할 수 있습니다.
+
+신뢰 토큰 API를 사용하면 사용자를 식별하거나 두 ID를 연결하지 않고도 한 컨텍스트에서 사용자의 신뢰를 다른 컨텍스트로 전달할 수 있습니다.
+
+[데모](https://trust-token-demo.glitch.me)에서 API를 사용해 보고 Chrome DevTools **네트워크** 및 **애플리케이션** 탭에서 [토큰을 검사](https://developers.google.com/web/updates/2021/01/devtools#trust-token)할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/krrI292OLd6awb4dxkN0.jpg", alt="Chrome DevTools 네트워크 탭에서 신뢰 토큰을 보여주는 스크린샷", width="800", height="584" %}<figcaption> Chrome DevTools <b>네트워크</b> 탭에서 토큰을 신뢰합니다.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cwR9JdoVo1M4VDovP2oM.jpg", alt="Chrome DevTools 애플리케이션 탭에서 신뢰 토큰을 보여주는 스크린샷.", width="800", height="584" %}<figcaption> Chrome DevTools <b>애플리케이션</b> 탭에서 토큰을 신뢰합니다.</figcaption></figure>
+
+{% Aside %} 개인정보 보호 샌드박스는 타사 쿠키 또는 기타 추적 메커니즘 없이 타사 사용 사례를 충족하기 위한 일련의 제안입니다. 모든 제안에 대한 개요는  [개인 정보 보호 샌드박스](/digging-into-the-privacy-sandbox) 자세히 보기를 참조하세요.
+
+**이 제안은 귀하의 피드백이 필요합니다!** 의견이 있는 경우 [신뢰 토큰 안내](https://github.com/WICG/trust-token-api/issues/new) 저장소에 [문제를 생성](https://github.com/WICG/trust-token-api)하십시오. {% endAside %}
+
+## 왜 신뢰 토큰이 필요한가요?
+
+웹은 사용자가 실제 사람이나 서비스를 사칭하는 악의적인 제3자나 사람을 가장하는 봇이 아니라 자신이 주장하는 사람임을 보여주는 신뢰 신호를 설정하는 방법이 필요합니다. 사기 방지는 광고주, 광고 제공업체 및 CDN에게 특히 중요합니다.
+
+불행히도, 예를 들어 사이트와의 상호 작용이 실제 사람의 것인지 확인하기 위해 신뢰성을 측정하고 전파하는 많은 기존 메커니즘은 지문에도 사용할 수 있는 기술을 활용합니다.
+
+{% Aside 'key-term' %} **지문**을 사용하면 사이트에서 기기, 운영체제, 브라우저 설정(예: 언어 기본 설정, [사용자 에이전트](https://developer.mozilla.org/docs/Web/API/NavigatorID/userAgent), 사용 가능한 글꼴) 또는 기기 상태 변경에 대한 데이터를 가져와 개별 사용자를 식별하고 추적할 수 있습니다. 이것은 요청 헤더를 확인하여 서버에서 또는 JavaScript를 사용하여 클라이언트에서 수행할 수 있습니다.
+
+지문은 사용자가 인식하지 못하고 제어할 수 없는 메커니즘을 사용합니다. [Panopticlick](https://panopticlick.eff.org/) 및 [amiunique.org](https://amiunique.org/)와 같은 사이트는 지문 데이터를 결합하여 귀하를 개인으로 식별하는 방법을 보여줍니다. {% endAside %}
+
+API는 개인 정보를 보호하여 개별 사용자 추적 없이도 신뢰가 사이트 전체에 전파될 수 있도록 해야 합니다.
+
+## 신뢰 토큰 제안에는 무엇이 있습니까?
+
+웹은 사기 및 스팸을 탐지하기 위해 신뢰 신호 구축에 의존합니다. 이를 수행하는 한 가지 방법은 전역, 사이트 간 사용자별 식별자로 탐색을 추적하는 것입니다. 개인 정보 보호 API의 경우 허용되지 않습니다.
+
+제안 [**설명**](https://github.com/WICG/trust-token-api#overview)에서:
+
+<blockquote>
+<p>이 API는 타사 컨텍스트에서 액세스할 수 있는 "Prrivacy Pass" 스타일 암호화 토큰을 위한 새로운 원본별 저장 영역을 제안합니다. 이 토큰은 개인화되지 않았으며 사용자를 추적하는 데 사용할 수 없지만 위조될 수 없도록 암호로 서명됩니다.</p>
+<p>출처가 사용자를 신뢰하는 컨텍스트에 있는 경우 브라우저에 토큰 배치를 발행할 수 있습니다. 이 토큰은 나중에 사용자를 알 수 없거나 덜 신뢰할 수 있는 컨텍스트에서 "사용"할 수 있습니다. 결정적으로 토큰은 서로 구별할 수 없으므로 웹사이트에서 토큰을 통해 사용자를 추적하지 못합니다.</p>
+<p>또한 브라우저가 특정 토큰 상환에 바인딩된 키로 나가는 요청에 서명할 수 있는 확장 메커니즘을 제안합니다.</p>
+</blockquote>
+
+## 샘플 API 사용
+
+[다음은 API 설명의 샘플 코드](https://github.com/WICG/trust-token-api#sample-api-usage)에서 수정한 것입니다.
+
+{% Aside %} 이 게시물의 코드는 Chrome 88 이후 사용 가능한 업데이트된 구문을 사용합니다. {% endAside %}
+
+사용자가 타사 광고 네트워크(`foo.example`)의 광고를 포함하는 뉴스 웹사이트(`publisher.example`)를 방문한다고 가정해 봅니다. 사용자는 신뢰 토큰을 발행하는 소셜 미디어 사이트( `issuer.example`)를 사용한 적이 있습니다.
+
+아래 순서는 신뢰 토큰이 작동하는 방식을 보여줍니다.
+
+**1.** 사용자가 `issuer.example`을 방문하여 계정 활동, 보안문자 챌린지 통과와 같이 사이트가 실제 사람이라고 믿도록 하는 작업을 수행합니다.
+
+**2.** `issuer.example`은 사용자가 사람인지 확인하고 다음의 JavaScript를 실행하여 사용자의 브라우저에 신뢰 토큰을 발행합니다.
+
+```js
+fetch('https://issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request',
+    issuer: 'https://issuer.example'
+  }
+}).then(...)
+```
+
+**3.** 사용자의 브라우저는 신뢰 토큰을 `issuer.example`과 연결하여 저장합니다.
+
+**4.** 잠시 후 사용자는 `publisher.example`을 방문합니다.
+
+**5.** `publisher.example`은 사용자가 실제 사람인지 알고 싶어합니다. `publisher.example`은 `issuer.example`을 신뢰하므로 사용자의 브라우저에 해당 출처의 유효한 토큰이 있는지 확인합니다.
+
+```js
+document.hasTrustToken('https://issuer.example');
+```
+
+**6.** 이것이 `true`로 해결되는 약속을 반환하는 경우 사용자가 `issuer.example`에서 발행된 토큰을 가지고 있다는 것을 의미합니다. 따라서 `publisher.example`은 토큰을 상환하려고 시도할 수 있습니다.
+
+```js
+fetch('https://issuer.example/trust-token', {
+trustToken: {
+  type: 'token-redemption',
+  issuer: 'https://issuer.example',
+  refreshPolicy: {none, refresh}
+}
+}).then(...)
+```
+
+이 코드는 다음을 수행합니다.
+
+1. 토큰 상환자 `publisher.example`이 상환을 요청합니다.
+2. 상환에 성공하면 발행자 `issuer.example`은 특정 시점에 이 브라우저에 유효한 토큰을 발행했음을 나타내는 상환 기록을 반환합니다.
+
+**7.** `fetch()`가 반환한 약속이 해결되면 상환 기록을 후속 리소스 요청에 사용할 수 있습니다.
+
+```js
+fetch('https://foo.example/get-content', {
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['https://issuer.example', ...]
+  }
+});
+```
+
+이 코드는 다음을 수행합니다.
+
+1. 상환 기록은 요청 헤더 `Sec-Redemption-Record`로 포함됩니다.
+2. `foo.example`은 상환 기록을 수신하고 기록을 구문 분석하여 `issuer.example`이 이 사용자를 사람으로 생각했는지 여부를 결정할 수 있습니다.
+3. `foo.example` 은 그에 따라 응답합니다.
+
+{% Details %} {% DetailsSummary %} 웹사이트에서 사용자를 신뢰할 수 있는지 여부를 어떻게 알 수 있나요? {% endDetailsSummary %} 전자상거래 사이트의 쇼핑 내역, 위치 플랫폼의 체크인 또는 은행의 계좌 내역이 있을 수 있습니다. 또한 발급자는 계정 보유 기간 또는 실제 사람일 가능성에 대한 발급자의 신뢰를 높이는 기타 상호 작용(예: CAPTCHA 또는 양식 제출)과 같은 다른 요소를 살펴볼 수도 있습니다. {% endDetails %}
+
+### 신뢰 토큰 발행
+
+`issuer.example`과 같은 신뢰 토큰 발행자에 의해 신뢰할 수 있는 것으로 간주되는 경우 `trustToken` 매개변수를 포함한 `fetch()` 요청을 수행하여 사용자에 대한 신뢰 토큰을 가져올 수 있습니다.
+
+```js
+fetch('issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request'
+  }
+}).then(...)
+```
+
+이것은 [새로운 암호화 프리미티브를](https://eprint.iacr.org/2020/072.pdf) 사용하여 [Privacy Pass](https://privacypass.github.io/) 발급 프로토콜의 확장을 호출합니다.
+
+1. *nonce*로 알려진 의사 난수 세트를 생성합니다.
+
+2. nonce를 블라인드(발급자가 내용을 볼 수 없도록 인코딩)하고 `Sec-Trust-Token` 헤더의 요청에 첨부합니다.
+
+3. 제공된 엔드포인트에 POST 요청을 보냅니다.
+
+끝점은 [블라인드 토큰](https://en.wikipedia.org/wiki/Blind_signature)(블라인드 nonce에 대한 서명)으로 응답한 다음 토큰이 블라인드 해제되고 브라우저에 의해 관련 nonce와 함께 내부적으로 신뢰 토큰으로 저장됩니다.
+
+### 신뢰 토큰 상환
+
+게시자 사이트(예: `publisher.example` )는 사용자가 사용할 수 있는 신뢰 토큰이 있는지 확인할 수 있습니다.
+
+```js
+const userHasTokens = await document.hasTrustToken('issuer.example/trust-token');
+```
+
+사용 가능한 토큰이 있는 경우 게시자 사이트에서 토큰을 사용하여 사용 기록을 얻을 수 있습니다.
+
+```js
+fetch('issuer.example/trust-token', {
+  ...
+  trustToken: {
+    type: 'token-redemption',
+    refreshPolicy: 'none'
+  }
+  ...
+}).then(...)
+```
+
+`fetch()` 호출을 사용하여 의견 게시, 페이지 좋아요, 투표 투표와 같이 신뢰 토큰이 필요한 요청에 상환 기록을 포함할 수 있습니다.
+
+```js
+fetch('https://foo.example/post-comment', {
+  ...
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['issuer.example/trust-token', ...]
+  }
+  ...
+}).then(...);
+```
+
+상환 기록은 `Sec-Redemption-Record` 요청 헤더로 포함됩니다.
+
+{% Aside %} 신뢰 토큰은 Fetch, XHR 및 HTML `<iframe>` 요소에 대한 옵션을 통해서만 액세스할 수 있습니다.
+ 직접 액세스할 수 없습니다. {% endAside%}
+
+### 개인정보 보호 고려사항
+
+토큰은 '연결 불가능'하도록 설계되었습니다. 발행자는 사용자가 방문하는 사이트에 대한 집계 정보를 알 수 있지만 발행과 상환을 연결할 수는 없습니다. 사용자가 토큰을 상환할 때 발행자는 토큰을 생성한 다른 토큰과 구별할 수 없습니다. 그러나 현재 신뢰 토큰은 독자적으로 존재하지 않습니다. 현재 제3자 쿠키 및 은밀한 추적 기술과 같이 이론적으로 발급자가 여러 사이트에서 사용자의 ID를 취합할 수 있는 다른 방법이 있습니다. 사이트가 지원을 계획할 때 이러한 생태계 전환을 이해하는 것이 중요합니다. 이것은 많은 개인정보 샌드박스 API에 대한 전환의 일반적인 측면이므로 여기에서 더 이상 논의하지 않습니다.
+
+### 보안 고려 사항
+
+**신뢰 토큰 소진:** 악의적인 사이트가 특정 발행자의 토큰 공급을 의도적으로 고갈시킬 수 있습니다. 발행자가 한 번에 많은 토큰을 제공할 수 있도록 하는 것과 같이 이러한 종류의 공격에 대한 몇 가지 완화 방법이 있습니다. 이를 브라우저가 최상위 페이지 보기당 하나의 토큰만 사용하도록 하여 사용자가 토큰을 적절히 공급받도록 할 수 있습니다.
+
+**이중 지출 방지:** 맬웨어가 사용자의 모든 신뢰 토큰에 액세스를 시도할 수 있습니다. 그러나 모든 상환은 각 토큰이 한 번만 사용되는지 확인할 수 있는 동일한 토큰 발행자에게 보내지기 때문에 시간이 지나면서 토큰이 소진됩니다. 위험을 완화하기 위해 발행자는 더 적은 수의 토큰에 서명할 수도 있습니다.
+
+### 요청 메커니즘
+
+예를 들어 탐색 요청과 함께 `fetch()` 외부에서 상환 기록을 보내는 것을 허용할 수 있습니다. 사이트는 페이지 로드와 동시에 토큰 상환을 활성화하기 위해 HTTP 응답 헤더에 발급자 데이터를 포함할 수도 있습니다.
+
+**다시 말씀드리지만 이 제안은 귀하의 피드백이 필요합니다!** 의견이 있는 경우 신뢰 토큰 [설명 저장소](https://github.com/WICG/trust-token-api)에 [문제](https://github.com/WICG/trust-token-api/issues/new) 를 생성하십시오.
+
+## 자세히 알아보기
+
+- [신뢰 토큰 데모](https://trust-token-demo.glitch.me)
+- [Chrome의 원본 평가판 시작하기](https://developer.chrome.com/blog/origin-trials/)
+- [개인정보 샌드박스 자세히 알아보기](/digging-into-the-privacy-sandbox/)
+- [신뢰 토큰 API 설명](https://github.com/WICG/trust-token-api)
+- [Chromium 프로젝트: 신뢰 토큰 API](https://sites.google.com/a/chromium.org/dev/updates/trust-token)
+- [구현 의도: 신뢰 토큰 API](https://groups.google.com/a/chromium.org/g/blink-dev/c/X9sF2uLe9rA/m/1xV5KEn2DgAJ)
+- [Chrome 플랫폼 상태](https://www.chromestatus.com/feature/5078049450098688)
+- [Privacy Pass](https://privacypass.github.io/)
+- [Privacy Pass의 확장](https://eprint.iacr.org/2020/072.pdf)
+
+---
+
+이 게시물을 작성하고 검토하는 데 도움을 주신 모든 분들께 감사드립니다.
+
+사진 제공: [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)의 [ZSun Fu](https://unsplash.com/photos/b4D7FKAghoE)
diff --git a/src/site/content/ko/blog/trusted-types/index.md b/src/site/content/ko/blog/trusted-types/index.md
new file mode 100644
index 00000000000..c620c61f26e
--- /dev/null
+++ b/src/site/content/ko/blog/trusted-types/index.md
@@ -0,0 +1,215 @@
+---
+title: 신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지
+subhead: 애플리케이션의 DOM XSS 공격 표면을 줄입니다.
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: 교차 사이트 스크립팅 취약점을 보여주는 코드 조각.
+description: '신뢰할 수 있는 유형 소개: 최신 웹 애플리케이션에서 DOM 기반 교차 사이트 스크립팅을 방지하는 브라우저 API입니다.'
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 왜 신경을 써야 할까요?
+
+DOM 기반 교차 사이트 스크립팅(DOM XSS)은 가장 일반적인 웹 보안 취약점 중 하나이며 애플리케이션에 도입하기가 매우 쉽습니다. [신뢰할 수 있는 유형](https://github.com/w3c/webappsec-trusted-types)은 위험한 웹 API 기능을 기본적으로 보호함으로써 DOM XSS 취약점이 없는 애플리케이션을 작성, 보안 검토 및 유지 관리할 수 있는 도구를 제공합니다. 신뢰할 수 있는 유형은 Chrome 83에서 지원되며 [polyfill](https://github.com/w3c/webappsec-trusted-types#polyfill)은 기타 브라우저에서 사용할 수 있습니다. 최신 교차 브라우저 지원 정보는 [브라우저 호환성](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility) 을 참조하세요.
+
+{% Aside 'key-term' %} DOM 기반 교차 사이트 스크립팅은 사용자가 제어하는 *소스* (예: 사용자 이름 또는 URL 조각에서 가져온 리디렉션 URL)의 데이터가 `eval()`과 같은 함수 또는 `.innerHTML`과 같은 속성 설정자와 같은 *싱크에* 도달하면 발생하며, 이는 임의의 JavaScript 코드를 실행할 수 있습니다. {% endAside %}
+
+## 배경
+
+수년 동안 [DOM XSS](https://owasp.org/www-community/attacks/xss/)는 가장 일반적이고 위험한 웹 보안 취약점 중 하나였습니다.
+
+교차 사이트 스크립팅에는 두 가지 뚜렷한 그룹이 있습니다. 일부 XSS 취약점은 웹사이트를 구성하는 HTML 코드를 안전하지 않게 생성하는 서버 측 코드로 인해 발생합니다. 이외에는 클라이언트에 근본 원인이 있어 JavaScript 코드가 사용자 제어 콘텐츠로 위험한 함수를 호출합니다.
+
+[서버 측 XSS를 방지](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)하려면 문자열을 연결하여 HTML을 생성하는 것 대신 안전한 컨텍스트 자동 이스케이프 템플릿 라이브러리를 사용하세요. 불가피하게 발생하는 버그에 대한 추가 완화를 위해 [임시 기반 콘텐츠 보안 정책](https://csp.withgoogle.com/docs/strict-csp.html)을 사용합니다.
+
+이제 브라우저는 [신뢰할 수 있는 유형](https://bit.ly/trusted-types)으로 클라이언트 측(DOM 기반이라고도 함) XSS를 방지하는 데도 도움이 됩니다.
+
+## API 소개
+
+신뢰할 수 있는 유형은 다음과 같은 위험한 싱크 기능을 봉쇄하는 방식으로 작동합니다. 브라우저 공급업체와 [웹 프레임워크](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)가 이미 보안상의 이유로 이러한 기능을 사용하지 않도록 지시하기 때문에 일부는 이미 알고 있을 수 있습니다.
+
+- **스크립트 조작**:<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) 및 [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script) 요소의 텍스트 내용 설정.
+
+- **문자열에서 HTML 생성**:<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) , [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML) ,[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) , [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc) , [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write) , [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) 및 [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **플러그인 콘텐츠 실행**:<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src) , [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) 및 [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **런타임 JavaScript 코드 컴파일**:<br> `eval` , `setTimeout` , `setInterval` , `new Function()`
+
+신뢰할 수 있는 유형을 사용하려면 위의 싱크 함수에 데이터를 전달하기 전에 데이터를 처리해야 합니다. 브라우저는 데이터가 신뢰할 수 있는지 알지 못하기 때문에 문자열을 사용하는 것만으로는 실패합니다.
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML  = location.href;
+```
+
+{% CompareCaption %} 신뢰할 수 있는 유형이 활성화되면 브라우저에서 *TypeError*를 발생시키고 문자열이 있는 DOM XSS 싱크 사용을 방지합니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+데이터가 안전하게 처리되었음을 나타내려면 신뢰할 수 있는 유형이라는 특수 개체를 만듭니다.
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %} 신뢰할 수 있는 유형이 활성화되면 브라우저는 HTML 스니펫을 예상하는 싱크에 `TrustedHTML` 개체를 수락합니다. 다른 민감한 싱크에 대한 `TrustedScript` 및 `TrustedScriptURL` 개체도 있습니다. {% endCompareCaption %}
+
+{% endCompare %}
+
+신뢰할 수 있는 유형은 애플리케이션의 DOM XSS [공격 표면](https://en.wikipedia.org/wiki/Attack_surface)을 크게 줄입니다. 보안 검토를 단순화하고 브라우저에서 런타임 시 코드를 컴파일, 린트 또는 번들링 할 때 수행되는 유형 기반 보안 검사를 시행할 수 있습니다.
+
+## 신뢰할 수 있는 유형을 사용하는 방법
+
+### 콘텐츠 보안 정책 위반 보고서 준비
+
+보고서 콜렉터(예: 오픈 소스 [go-csp-collector](https://github.com/jacobbednarz/go-csp-collector))를 배포하거나 상용 제품 중 하나를 사용할 수 있습니다. 브라우저에서 위반을 디버그 할 수도 있습니다.
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### 보고서 전용 CSP 헤더 추가
+
+신뢰할 수 있는 유형으로 마이그레이션하려는 문서에 다음 HTTP 응답 헤더를 추가합니다.
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+이제 모든 위반 사항이 `//my-csp-endpoint.example`에 보고되지만 웹사이트는 계속 작동합니다. 다음 섹션에서 `//my-csp-endpoint.example`이 작동하는 방식을 설명합니다.
+
+{% Aside 'caution' %} 신뢰할 수 있는 유형은 HTTPS 및 `localhost`와 같은 [보안 컨텍스트](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)에서만 사용할 수 있습니다. {% endAside %}
+
+### 신뢰할 수 있는 유형 위반 식별
+
+이제부터 신뢰할 수 있는 유형이 위반을 감지할 때마다 보고서가 구성된 `report-uri`로 전송됩니다. 예를 들어, 애플리케이션이 `innerHTML` 문자열을 전달하면 브라우저는 다음 보고서를 보냅니다.
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+이것은 `https://my.url.example/script.js`에서 39번째 줄의 `innerHTML`이 `<img src=x` 시작하는 문자열로 호출되었음을 의미합니다. 이 정보는 DOM XSS를 도입하고 변경해야 하는 코드 부분을 좁히는 데 도움이 됩니다.
+
+{% Aside %} 이와 같은 대부분의 위반은 코드베이스에서 코드 린터 또는 [정적 코드 검사기](https://github.com/mozilla/eslint-plugin-no-unsanitized)를 실행하여 감지할 수도 있습니다. 이렇게 하면 많은 양의 위반을 빠르게 식별하는 데 도움이 됩니다.
+
+즉, 부적합 코드가 실행될 때 트리거 되므로 CSP 위반도 분석해야 합니다. {% endAside %}
+
+### 위반 사항 수정
+
+신뢰할 수 있는 유형 위반을 수정하기 위한 몇 가지 옵션이 있습니다. [문제가 되는 코드를 제거](#remove-the-offending-code)하거나, [라이브러리를 사용](#use-a-library)하거나, [신뢰할 수 있는 유형 정책을 생성](#create-a-trusted-type-policy)하거나, 최후의 수단으로 [기본 정책을 생성](#create-a-default-policy)할 수 있습니다.
+
+#### 문제가 되는 코드 다시 작성
+
+혹시 호환되지 않는 기능은 더 이상 필요하지 않거나 오류가 발생하기 쉬운 기능을 사용하지 않고 최신 방식으로 다시 작성할 수 있을까요?
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### 라이브러리 사용
+
+일부 라이브러리는 싱크 함수에 전달할 수 있는 신뢰할 수 있는 유형을 이미 생성합니다. 예를 들어 [DOMPurify](https://github.com/cure53/DOMPurify)를 사용하여 HTML 스니펫을 삭제하고 XSS 페이로드를 제거할 수 있습니다.
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+DOMPurify는 [신뢰할 수 있는 유형을 지원](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types)하며 브라우저가 위반을 생성하지 않도록 `TrustedHTML` 개체로 래핑된 정제된 HTML을 반환합니다. {% Aside 'caution' %} DOMPurify의 삭제 논리에 버그가 있는 경우 애플리케이션에 여전히 DOM XSS 취약점이 있을 수 있습니다. 신뢰할 수 있는 유형을 사용하면 값을 *어떻게든* 처리해야 하지만 정확한 처리 규칙이 무엇인지, 안전한지 여부는 아직 정의하지 않습니다. {% endAside %}
+
+#### 신뢰할 수 있는 유형 정책 만들기
+
+때때로 기능을 제거할 수 없고, 값을 삭제하고 신뢰할 수 있는 유형을 생성하는 라이브러리가 없습니다. 이러한 경우 신뢰할 수 있는 유형 개체를 직접 만드세요.
+
+이를 위해 먼저 [정책을](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr) 만듭니다. 정책은 입력에 특정 보안 규칙을 적용하는 신뢰할 수 있는 유형의 팩토리입니다.
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // 기능 테스트
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '<')
+  });
+}
+```
+
+이 코드는 `createHTML()` 함수를 통해 `TrustedHTML` 개체를 생성할 수 있는 `myEscapePolicy`라는 정책을 만듭니다. 정의된 규칙은 새 HTML 요소의 생성을 방지하기 위해 `<`를 HTML escape 처리합니다.
+
+다음과 같이 정책을 사용합니다.
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // 참
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Aside %} `trustedTypes.createPolicy()`에 JavaScript 함수가 전달되는 동안 `createHTML()`은 문자열을 반환하고, `createPolicy()`는 반환 값을 올바른 유형(이 경우 `TrustedHTML`)으로 래핑 하는 정책 객체를 반환합니다. {% endAside %}
+
+#### 기본 정책 사용
+
+때로는 문제가 되는 코드를 변경할 수 없습니다. 예를 들어 CDN에서 타사 라이브러리를 로드하는 경우입니다. 이 경우 [기본 정책을](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr) 사용합니다.
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // 기능 테스트
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+이름이 `default`인 정책은 신뢰할 수 있는 유형만 허용하는 싱크에서 문자열을 사용할 때마다 사용됩니다. {% Aside 'gotchas' %} 기본 정책을 드물게 사용하고 일반 정책을 대신 사용하도록 애플리케이션을 리팩토링하는 것을 선호합니다. 그렇게 하면 보안 규칙이 처리하는 데이터에 가까운 설계를 장려하고 값을 올바르게 삭제하는 데 가장 많은 컨텍스트를 갖게 됩니다. {% endAside %}
+
+### 콘텐츠 보안 정책 시행으로 전환
+
+애플리케이션이 더 이상 위반을 생성하지 않으면 신뢰할 수 있는 유형 적용을 시작할 수 있습니다.
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+짜잔! 이제 웹 애플리케이션이 아무리 복잡하더라도 DOM XSS 취약점을 도입할 수 있는 유일한 것은 정책 중 하나의 코드입니다. [정책 생성을 제한](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive)하여 이를 더욱 봉쇄할 수 있습니다.
+
+## 추가 읽기
+
+- [신뢰할 수 있는 유형 GitHub](https://github.com/w3c/webappsec-trusted-types)
+- [W3C 사양 초안](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [자주하는 질문](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [통합](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/ko/blog/usb/index.md b/src/site/content/ko/blog/usb/index.md
new file mode 100644
index 00000000000..34949000ade
--- /dev/null
+++ b/src/site/content/ko/blog/usb/index.md
@@ -0,0 +1,237 @@
+---
+title: 웹에서 USB 장치에 액세스
+subhead: WebUSB API는 USB를 웹으로 가져와 더 안전하고 사용하기 쉽게 만듭니다.
+authors:
+  - beaufortfrancois
+date: 2016-03-30
+updated: 2021-02-23
+hero: image/admin/hhnhxiNuRWMfGqy4NSaH.jpg
+thumbnail: image/admin/RyaGPB8fHCuuXUc9Wj9Z.jpg
+alt: Arduino Micro 보드의 사진
+description: WebUSB API는 USB를 웹으로 가져와 더 안전하고 사용하기 쉽게 만듭니다.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webusb
+---
+
+부연 없이 "USB"라고 하면 곧바로 키보드, 마우스, 오디오, 비디오, 저장 장치 등을 떠올릴 가능성이 큽니다. 맞습니다. 하지만 그 밖에 다른 종류의 USB(Universal Serial Bus) 장치들도 있습니다.
+
+이러한 비표준 USB 장치를 사용하려면 하드웨어 공급업체에서 플랫폼별 드라이버와 SDK를 작성해야 개발자가 이를 사용할 수 있습니다. 안타깝게도 이 플랫폼 고유의 코드는 지금까지 이러한 장치를 웹에서 사용하지 못하게 만드는 걸림돌이었습니다. WebUSB API가 만들어진 이유도 바로 이때문인데, USB 장치 서비스를 웹에 노출하는 방법을 제공하기 위해서입니다. 이 API를 사용하여 하드웨어 제조업체는 해당 장치용 크로스 플랫폼 JavaScript SDK를 구축할 수 있습니다. 그러나 가장 중요한 것은 이것이 **USB를 웹으로 가져옴으로써 USB를 더 안전하고 사용하기 쉽게 만든다는** 것입니다.
+
+WebUSB API가 있을 때 기대할 수 있는 동작을 살펴보겠습니다.
+
+1. USB 장치를 구입합니다.
+2. 컴퓨터에 연결합니다. 이 장치에 대해 이동할 올바른 웹사이트와 함께 알림이 즉시 나타납니다.
+3. 알림을 클릭합니다. 웹사이트가 있고 사용할 준비가 되었습니다!
+4. 클릭하여 연결하면 Chrome에 장치를 선택할 수 있는 USB 장치 선택기가 표시됩니다.
+
+기대하시라!
+
+WebUSB API가 없다면 이 절차는 어떻게 될까요?
+
+1. 플랫폼별 애플리케이션을 설치합니다.
+2. 내 운영 체제에서 지원되는 경우 올바른 항목을 다운로드했는지 확인합니다.
+3. 설치를 수행합니다. 운이 좋다면 인터넷에서 드라이버/애플리케이션 설치를 경고하는 무서운 OS 메시지나 팝업이 표시되지 않습니다. 운이 없으면 설치된 드라이버나 애플리케이션이 오작동하여 컴퓨터를 손상시킵니다(웹은 [오작동하는 웹사이트](https://www.youtube.com/watch?v=29e0CtgXZSI)를 포함하도록 구축된다는 점을 상기).
+4. 기능을 한 번만 사용하는 경우 코드는 제거할 때까지 컴퓨터에 남아 있습니다(웹에서는 사용하지 않은 공간이 결국 회수됨.)
+
+## 시작하기 전에
+
+이 문서에서는 USB 작동 방식에 대한 기본적 지식이 있다고 가정합니다. 그렇지 않다면 [USB 요약](http://www.beyondlogic.org/usbnutshell)을 읽어볼 것을 추천합니다. USB에 대한 배경 정보는 [공식 USB 사양](https://www.usb.org/)을 확인하세요.
+
+[WebUSB API](https://wicg.github.io/webusb/)는 Chrome 61에서 사용할 수 있습니다.
+
+### 원본 평가에 사용 가능
+
+현장에서 WebUSB API를 사용하는 개발자들로부터 최대한 많은 피드백을 받기 위해 이전에 Chrome 54 및 Chrome 57에 이 기능을 [원본 평가](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)로 추가했습니다.
+
+최근 평가는 2017년 9월에 성공적으로 종료되었습니다.
+
+## 개인정보보호 및 보안
+
+### HTTPS만
+
+이 기능은 강력하다는 점 때문에 [보안 컨텍스트](https://w3c.github.io/webappsec/specs/powerfulfeatures/#intro)에서만 작동합니다. 즉, [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security)를 염두에 두고 빌드해야 합니다.
+
+### 사용자 제스처 필요
+
+보안상의 이유로 `navigator.usb.requestDevice()`는 터치나 마우스 클릭과 같은 사용자 제스처를 통해서만 호출할 수 있습니다.
+
+### 기능 정책
+
+[기능 정책](https://developer.mozilla.org/docs/Web/HTTP/Feature_Policy)은 개발자가 다양한 브라우저 기능과 API를 선택적으로 활성화 및 비활성화할 수 있는 메커니즘입니다. HTTP 헤더 및/또는 iframe "allow" 특성을 통해 정의할 수 있습니다.
+
+USB 특성이 Navigator 객체에서 노출되는지, 즉 WebUSB를 허용하는지 여부를 제어하는 기능 정책을 정의할 수 있습니다.
+
+다음은 WebUSB가 허용되지 않는 헤더 정책의 예입니다.
+
+```http
+Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com
+```
+
+다음은 USB가 허용되는 컨테이너 정책의 또 다른 예입니다.
+
+```html
+<iframe allowpaymentrequest allow="usb; fullscreen"></iframe>
+```
+
+## 코딩 시작하기
+
+WebUSB API는 JavaScript [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)에 크게 의존합니다. 이 내용에 익숙하지 않다면 이 훌륭한 [Promise 튜토리얼](/promises)을 확인해 보세요. 한 가지 더, `() => {}`는 단순히 ECMAScript 2015 [Arrow 함수](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)입니다.
+
+### USB 장치에 액세스
+
+`navigator.usb.requestDevice()`를 사용하여 연결된 단일 USB 장치를 선택하도록 사용자에게 메시지를 표시하거나 `navigator.usb.getDevices()`를 호출하여 원본이 액세스할 수 있는 연결된 모든 USB 장치 목록을 가져올 수 있습니다.
+
+`navigator.usb.requestDevice()` 함수는 `filters`를 정의하는 필수 JavaScript 객체를 사용합니다. 이러한 필터는 USB 장치를 지정된 공급업체(`vendorId`) 및 선택적으로 제품(`productId`) 식별자와 일치시키는 데 사용됩니다. `classCode`, `protocolCode`, `serialNumber` 및 `subclassCode` 키도 여기에서 정의할 수 있습니다.
+
+<figure>{% Img src="image/admin/KIbPwUfEqgZZLxugxBOY.png", alt="Chrome의 USB 장치 사용자 프롬프트를 보여주는 스크린샷", width="800", height="533" %}<figcaption> USB 장치 사용자 프롬프트.</figcaption></figure>
+
+예를 들어, 원본을 허용하도록 구성된 연결된 Arduino 장치에 액세스하는 방법은 다음과 같습니다.
+
+```js
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(device => {
+  console.log(device.productName);      // "Arduino Micro"
+  console.log(device.manufacturerName); // "Arduino LLC"
+})
+.catch(error => { console.error(error); });
+```
+
+제가 이 `0x2341` 16진수를 마술처럼 생각해낸 것은 아닙니다. 이 [USB ID 목록](http://www.linux-usb.org/usb.ids)에서 단순히 "Arduino"라는 단어를 검색했습니다.
+
+위의 이행된 promise에서 반환된 USB `device`에는 지원되는 USB 버전, 최대 패킷 크기, 공급업체 및 제품 ID, 장치가 가질 수 있는 가능한 구성 수와 같은 장치에 대한 몇 가지 기본적이지만 중요한 정보가 들어 있습니다. 기본적으로 [장치 USB 설명자](http://www.beyondlogic.org/usbnutshell/usb5.shtml#DeviceDescriptors)의 모든 필드를 포함합니다.
+
+그런데 USB 장치가 [WebUSB 지원](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor)을 공표하고 랜딩 페이지 URL을 정의하면 USB 장치가 연결될 때 Chrome에서 지속적인 알림을 표시합니다. 이 알림을 클릭하면 랜딩 페이지가 열립니다.
+
+<figure>{% Img src="image/admin/1gRIz2wY4LYofeFq5cc3.png", alt="Chrome의 WebUSB 알림을 보여주는 스크린샷", width="800", height="450" %}<figcaption> WebUSB 알림.</figcaption></figure>
+
+여기에서 간단히 `navigator.usb.getDevices()`를 호출하고 아래와 같이 Arduino 장치에 액세스할 수 있습니다.
+
+```js
+navigator.usb.getDevices().then(devices => {
+  devices.forEach(device => {
+    console.log(device.productName);      // "Arduino Micro"
+    console.log(device.manufacturerName); // "Arduino LLC"
+  });
+})
+```
+
+### Arduino USB 보드와 대화
+
+자, 이제 USB 포트를 통해 WebUSB 호환 Arduino 보드에서 통신하는 것이 얼마나 쉬운지 알아보겠습니다. [https://github.com/webusb/arduino](https://github.com/webusb/arduino)의 지침을 확인하여 여러분의 [스케치](http://www.arduino.cc/en/Tutorial/Sketch)를 WebUSB 활성화하세요.
+
+걱정하지 마세요. 이 문서 뒷부분에서 아래에 언급된 모든 WebUSB 장치 메서드를 다룰 것입니다.
+
+```js
+let device;
+
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(selectedDevice => {
+    device = selectedDevice;
+    return device.open(); // Begin a session.
+  })
+.then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
+.then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
+.then(() => device.controlTransferOut({
+    requestType: 'class',
+    recipient: 'interface',
+    request: 0x22,
+    value: 0x01,
+    index: 0x02})) // Ready to receive data
+.then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
+.then(result => {
+  const decoder = new TextDecoder();
+  console.log('Received: ' + decoder.decode(result.data));
+})
+.catch(error => { console.error(error); });
+```
+
+여기에서 사용하고 있는 WebUSB 라이브러리는 하나의 예제 프로토콜(표준 USB 직렬 프로토콜에 기반)을 구현하고 있으며 제조업체는 원하는 모든 유형의 엔드포인트를 만들 수 있다는 점을 염두에 두기 바랍니다. 제어 전송은 버스 우선 순위를 얻고 구조가 잘 정의되어 있으므로 소규모 구성 명령에 특히 좋습니다.
+
+다음은 Arduino 보드에 업로드된 스케치입니다.
+
+```arduino
+// Third-party WebUSB Arduino library
+#include <WebUSB.h>
+
+WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");
+
+#define Serial WebUSBSerial
+
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {
+    ; // Wait for serial port to connect.
+  }
+  Serial.write("WebUSB FTW!");
+  Serial.flush();
+}
+
+void loop() {
+  // Nothing here for now.
+}
+```
+
+위의 샘플 코드에 사용된 타사 [WebUSB Arduino 라이브러리](https://github.com/webusb/arduino/tree/gh-pages/library/WebUSB)는 기본적으로 두 가지를 수행합니다.
+
+- 장치는 Chrome이 [랜딩 페이지 URL](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor)을 읽을 수 있도록 하는 WebUSB 장치 역할을 합니다.
+- 기본 API를 재정의하는 데 사용할 수 있는 WebUSB Serial API를 노출합니다.
+
+JavaScript 코드를 다시 보세요. 사용자가 선택한 `device`를 가져오면 `device.open()`은 모든 플랫폼별 단계를 실행하여 USB 장치와의 세션을 시작합니다. 그러면 `device.selectConfiguration()`으로 사용 가능한 USB 구성을 선택해야 합니다. 구성은 장치에 전원이 공급되는 방식, 최대 전력 소비 및 인터페이스 수를 지정한다는 점을 기억하세요. 인터페이스에 대해 말하자면, 인터페이스가 요청될 때 데이터가 인터페이스 또는 연결된 엔드포인트로만 전송될 수 있기 때문에 `device.claimInterface()`를 사용하여 배타적 액세스도 요청해야 합니다. 마지막으로, WebUSB Serial API를 통해 통신하기 위해 적절한 명령으로 Arduino 장치를 설정하는 데 `device.controlTransferOut()` 호출이 필요합니다.
+
+여기에서 `device.transferIn()`은 호스트가 대량 데이터를 수신할 준비가 되었음을 알리기 위해 장치로 대량 전송을 수행합니다. 그런 다음 적절하게 구문 분석해야 하는 [DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) `data`가 포함된 `result` 객체로 promise가 이행됩니다.
+
+USB에 익숙하다면 이 모든 내용이 상당히 낯익을 것입니다.
+
+### 더 나아가기
+
+WebUSB API를 사용하면 모든 USB 전송/엔드포인트 유형과 상호 작용할 수 있습니다.
+
+- 구성 또는 명령 매개변수를 USB 장치로 보내거나 받는 데 사용되는 CONTROL 전송은 `controlTransferIn(setup, length)` 및 `controlTransferOut(setup, data)`로 처리됩니다.
+- 시간에 민감한 소량의 데이터에 사용되는 INTERRUPT 전송은 `transferIn(endpointNumber, length)` 및 `transferOut(endpointNumber, data)`를 사용하는 BULK 전송과 동일한 메서드로 처리됩니다.
+- 비디오 및 사운드와 같은 데이터 스트림에 사용되는 ISOCHRONOUS 전송은 `isochronousTransferIn(endpointNumber, packetLengths)` 및 `isochronousTransferOut(endpointNumber, data, packetLengths)`로 처리됩니다.
+- 시간에 민감하지 않은 대량의 데이터를 안정적으로 전송하는 데 사용되는 BULK 전송은 `transferIn(endpointNumber, length)` 및 `transferOut(endpointNumber, data)`로 처리됩니다.
+
+또한 WebUSB API용으로 설계된 USB 제어 LED 장치를 구축하는 기초 예제로서 Mike Tsao의 [WebLight 프로젝트](https://github.com/sowbug/weblight)를 살펴보는 것도 유익할 수 있습니다(여기서는 Arduino를 사용하지 않음). 하드웨어, 소프트웨어 및 펌웨어를 찾을 수 있습니다.
+
+## 팁
+
+모든 USB 장치 관련 이벤트를 한 곳에서 볼 수 있는 내부 페이지인 `about://device-log`가 있어 Chrome에서는 USB 디버깅이 간편합니다.
+
+<figure>{% Img src="image/admin/ssq2mMZmxpWtALortfZx.png", alt="Chrome에서 WebUSB를 디버그하기 위한 장치 로그 페이지 스크린샷", width="800", height="442" %}<figcaption> WebUSB API 디버깅을 위한 Chrome의 장치 로그 페이지.</figcaption></figure>
+
+내부 페이지 `about://usb-internals`도 유용하며 가상 WebUSB 장치의 연결 및 분리를 시뮬레이션할 수 있습니다. 실제 하드웨어 없이 UI 테스트를 수행하는 데 유용합니다.
+
+<figure>{% Img src="image/admin/KB5z4p7fZRsvkfhVTNkb.png", alt="Chrome에서 WebUSB를 디버그하기 위한 내부 페이지 스크린샷", width="800", height="294" %}<figcaption> WebUSB API 디버깅을 위한 Chrome의 내부 페이지.</figcaption></figure>
+
+대부분의 Linux 시스템에서 USB 장치는 기본적으로 읽기 전용 권한으로 매핑됩니다. Chrome에서 USB 장치를 열 수 있도록 하려면 새 [udev 규칙](https://www.freedesktop.org/software/systemd/man/udev.html)을 추가해야 합니다. 다음 내용으로 `/etc/udev/rules.d/50-yourdevicename.rules`에 파일을 만듭니다.
+
+```vim
+SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
+```
+
+예를 들어 장치가 Arduino인 경우 `[yourdevicevendor]`는 `2341`입니다. 더 구체적인 규칙이 필요할 때는 `ATTR{idProduct}`를 추가할 수도 있습니다. `user`가 `plugdev` 그룹의 [구성원](https://wiki.debian.org/SystemGroups)인지 확인하세요. 그런 다음 장치를 다시 연결하기만 하면 됩니다.
+
+{% Aside  %} Arduino 예제에서 사용된 Microsoft OS 2.0 설명자는 Windows 8.1 이상에서만 작동합니다. 이것이 없으면 Windows 지원을 위해 INF 파일을 수동으로 설치해야 합니다. {% endAside %}
+
+## 리소스
+
+- 스택 오버플로: [https://stackoverflow.com/questions/tagged/webusb](https://stackoverflow.com/questions/tagged/webusb)
+- WebUSB API 사양: [http://wigg.github.io/webusb/](https://wicg.github.io/webusb/)
+- Chrome 기능 상태: [https://www.chromestatus.com/feature/5651917954875392](https://www.chromestatus.com/feature/5651917954875392)
+- 사양 문제: [https://github.com/WICG/webusb/issues](https://github.com/WICG/webusb/issues)
+- 구현 버그: [http://crbug.com?q=component:Blink&gt;USB](http://crbug.com?q=component:Blink%3EUSB)
+- WebUSB ❤ ️Arduino: [https://github.com/webusb/arduino](https://github.com/webusb/arduino)
+- IRC: W3C의 IRC에 관한 [#webusb](irc://irc.w3.org:6665/#webusb)
+- WICG 메일링 리스트: [https://lists.w3.org/Archives/Public/public-wicg/](https://lists.w3.org/Archives/Public/public-wicg/)
+- WebLight 프로젝트: [https://github.com/sowbug/weblight](https://github.com/sowbug/weblight)
+
+해시태그 [`#WebUSB`](https://twitter.com/search?q=%23WebUSB&src=typed_query&f=live)를 사용하여 [@ChromiumDev][cr-dev-twitter]으로 트윗을 보내어 이러한 리소스를 어디에서 어떻게 사용하고 있는지 알려주세요.
+
+## 감사의 말
+
+이 문서를 검토해준 [Joe Medley](https://github.com/jpmedley)에게 감사드립니다.
diff --git a/src/site/content/ko/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/ko/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..ec8aa1d7259
--- /dev/null
+++ b/src/site/content/ko/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,136 @@
+---
+title: 필드의 Web Vitals 측정 모범 사례
+subhead: 현재 분석 도구로 Web Vitals를 측정하는 방법.
+authors:
+  - philipwalton
+description: 현재 분석 도구로 Web Vitals를 측정하는 방법
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: 현재 분석 도구로 Web Vitals를 측정하는 방법
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+페이지의 실제 성능을 측정하고 보고하는 기능을 확보하는 것은 시간 경과에 따른 성능을 진단하고 개선하는 데 중요한 부분입니다. [필드 데이터](/user-centric-performance-metrics/#in-the-field)가 없다면 사이트에 대한 변경 사항이 실제로 원하는 결과를 얻고 있는지 확실히 알 수 없습니다.
+
+여러 가지 인기 [Real User Monitoring(실제 사용자 모니터링, RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) 분석 제공업체에서는 이미 자체 도구에서 [Core Web Vitals 메트릭](/vitals/#core-web-vitals)과 [기타 Web Vitals](/vitals/#core-web-vitals)를 지원하고 있습니다. 현재 이러한 RUM 분석 도구 중 하나를 사용하고 있다면 사이트의 페이지가 [권장되는 Core Web Vitals 임계값](/vitals/#core-web-vitals)을 얼마나 잘 충족하는지 평가하고 향후 회귀를 방지할 수 있습니다.
+
+Core Web Vitals 메트릭을 지원하는 분석 도구를 사용하는 것이 좋긴 하지만 현재 사용 중인 분석 도구가 이를 지원하지 않는 경우 반드시 전환할 필요는 없습니다. 거의 모든 분석 도구는 [사용자 지정 메트릭](https://support.google.com/analytics/answer/2709828) 또는 [이벤트](https://support.google.com/analytics/answer/1033068) 를 정의 및 측정하는 방법을 제공합니다. 즉, 현재 분석 공급업체를 이용해 Core Web Vitals 메트릭을 측정하고 이를 기존 분석 보고서 및 대시보드에 추가할 수 있다는 의미입니다.
+
+이 가이드에서는 타사 또는 내부 분석 도구를 사용하여 Core Web Vitals 메트릭(또는 모든 사용자 지정 메트릭)을 측정하는 모범 사례를 설명합니다. 서비스에 Core Web Vitals 지원을 추가하려는 분석 벤더인 경우 이를 가이드로 삼을 수 있습니다.
+
+## 사용자 지정 메트릭 또는 이벤트 사용
+
+위에서 언급했듯이 대부분의 분석 도구에서는 사용자 지정 데이터를 측정할 수 있습니다. 분석 도구가 이를 지원하는 경우 이 메커니즘을 사용하여 각 Core Web Vitals 메트릭을 측정할 수 있어야 합니다.
+
+분석 도구에서 사용자 지정 메트릭 또는 이벤트를 측정하기 위해서는 일반적으로 3단계를 거칩니다.
+
+1. 필요한 경우 도구의 관리자에서 사용자 지정 메트릭을 [정의하거나 등록](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827)합니다. *(참고: 모든 분석 제공업체에서 사용자 지정 메트릭을 미리 정의해야 하는 것은 아닙니다.)*
+2. 프런트엔드 JavaScript 코드에서 메트릭 값을 계산합니다.
+3. 이름 또는 ID가 1단계에서 정의된 것과 일치하도록 메트릭 값을 분석 백엔드로 보냅니다*(필요한 경우에만)*.
+
+1단계와 3단계의 경우 분석 도구의 설명서에서 지침을 참조할 수 있습니다. 2단계에서는 [Web Vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리를 사용하여 각 Core Web Vitals 메트릭의 값을 계산할 수 있습니다.
+
+다음 코드 샘플은 코드에서 이러한 메트릭을 추적하고 분석 서비스로 보내는 것이 얼마나 쉬운지를 보여줍니다.
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## 분포를 보고할 수 있는지 확인
+
+각 Core Web Vitals에 대한 값을 계산하고 사용자 지정 메트릭 또는 이벤트를 사용하여 분석 서비스로 보낸 후 다음 단계는 수집된 값을 표시하는 보고서 또는 대시보드를 작성하는 것입니다.
+
+[권장 Core Web Vitals 임계값](/vitals/#core-web-vitals)을 충족하는지 확인하려면 75번째 백분위수에서 각 메트릭의 값을 표시하는 보고서가 필요합니다.
+
+분석 도구가 백분위수 보고를 기본적으로 제공하지 않는 경우 오름차순으로 정렬된 모든 메트릭 값을 나열하는 보고서를 생성하여 이 데이터를 수동으로 얻을 수 있습니다. 이 보고서가 생성되면 해당 보고서의 모든 값이 정렬된 전체 목록의 75%에 해당하는 결과가 해당 메트릭의 75번째 백분위수가 됩니다. 이는 장치 유형, 연결 유형, 국가 등 데이터를 어떻게 분류했는지와 상관 없이 동일합니다.
+
+분석 도구가 기본적으로 메트릭 수준 보고 세분화를 제공하지 않는 경우 분석 도구가 [커스텀 차원](https://support.google.com/analytics/answer/2709828)을 지원하면 동일한 결과를 얻을 수 있습니다. 추적하는 각 개별 메트릭 인스턴스에 대해 고유한 사용자 지정 차원 값을 설정하면 보고서 구성에 사용자 지정 메트릭을 포함해 개별 메트릭 인스턴스별로 분류된 보고서를 생성할 수 있습니다. 각 인스턴스에는 고유한 차원 값이 있으므로 그룹화되지 않습니다.
+
+[Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report)는 Google Analytics를 사용하는 이러한 기술의 예시입니다. 보고서의 코드는 [오픈 소스](https://github.com/GoogleChromeLabs/web-vitals-report)이므로 개발자는 이 섹션에 설명된 기술의 예로 이를 참조할 수 있습니다.
+
+<img src="https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png" no="" alt="Web Vitals Report 스크린샷">
+
+{% Aside %} 팁: [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리는 보고된 각 메트릭 인스턴스에 대한 ID를 제공하므로 대부분의 분석 도구에서 분포를 구축할 수 있습니다. 자세한 내용은 [`Metric`](https://github.com/GoogleChrome/web-vitals#metric) 인터페이스 문서를 참조하세요. {% endAside %}
+
+## 적시에 데이터 전송
+
+일부 성능 메트릭은 페이지 로드가 완료되면 계산할 수 있는 반면 CLS와 같은 다른 성능 메트릭은 페이지의 전체 수명을 고려하며 페이지에서 언로드를 시작한 후에야 최종적으로 결정됩니다.
+
+하지만 이러한 방법은 특히 모바일에서 `beforeunload` 및 `unload` 이벤트를 모두 신뢰할 수 없으며 사용이 [권장되지 않기](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid) 때문에 문제가 될 수 있습니다. 이로 인해 페이지가 [Back-Forward Cache](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache)에 부적합해질 수 있기 때문입니다.
+
+페이지의 전체 수명을 추적하는 메트릭의 경우 `visibilitychange` 이벤트 동안 페이지의 페이지의 가시성 상태가 `hidden`으로 변경될 때마다 메트릭의 현재 값을 보내는 것이 가장 좋습니다. 페이지의 가시성 상태가 `hidden`으로 변경되면 해당 페이지의 스크립트가 다시 실행될 수 있다는 보장이 없기 때문입니다. 이는 페이지 콜백이 실행되지 않고 브라우저 앱 자체를 닫을 수 있는 모바일 운영 체제에서 특히 그렇습니다.
+
+모바일 운영 체제는 일반적으로 탭을 전환하거나, 앱을 전환하거나, 브라우저 앱 자체를 닫을 때 `visibilitychange`를 실행한다는 점에 유의하시기 바랍니다. 또한 탭을 닫거나 새 페이지로 이동할 때도 `visibilitychange` 이벤트를 실행합니다. 이로 인해 `visibilitychange` 이벤트가 `unload` 또는 `beforeunload` 이벤트보다 훨씬 더 안정적입니다.
+
+{% Aside 'gotchas' %} [일부 브라우저 버그](https://github.com/w3c/page-visibility/issues/59#issue-554880545)로 인해  `visibilitychange` 이벤트가 실행되지 않는 경우도 있습니다. 자체 분석 라이브러리를 구축하는 경우 이러한 버그를 인식하는 것이 중요합니다. [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리는 이러한 모든 버그를 설명합니다. {% endAside %}
+
+## 시간 경과에 따른 성능 모니터링
+
+Core Web Vitals 메트릭을 추적하고 보고하도록 분석 구현을 업데이트한 후 다음 단계는 사이트 변경 사항이 시간 경과에 따라 성능에 미치는 영향을 추적하는 것입니다.
+
+### 변경 사항 버전 관리
+
+변경 사항을 추적할 때 프로덕션에 변경 사항을 배포하고, 배포일 이후 수신된 모든 메트릭이 새로운 사이트에 해당하며, 배포일 이전에 수신된 모든 메트릭은 이전 사이트에 해당한다고 가정하는 것은 너무나 고지식하며 안정적이도 않은 방법입니다. HTTP, 서비스 작업자 또는 CDN 계층에서의 캐싱을 포함한 여러 가지 요소가 이를 작동할 수 없게 하기 때문입니다.
+
+훨씬 더 나은 접근 방식은 배포된 각 변경 사항에 대해 고유한 버전을 만든 다음 분석 도구에서 해당 버전을 추적하는 것입니다. 대부분의 분석 도구는 버전 설정을 지원합니다. 그렇지 않은 경우 사용자 지정 차원을 만들고 해당 차원을 배포된 버전으로 설정할 수 있습니다.
+
+### 실험 실행
+
+동시에 여러 버전 또는 실험을 추적하여 버전 관리를 한 단계 더 발전시킬 수 있습니다.
+
+분석 도구에서 실험 그룹을 정의할 수 있는 경우 해당 기능을 사용하세요. 해당 기능이 없다면 사용자 지정 메트릭을 사용해 각 측메트릭 값을 보고서의 특정 실험 그룹에 연결할 수 있습니다.
+
+분석에 실험을 적용하면 실험적 변경 사항을 일부 사용자에게 적용하고 해당 변경 사항의 성능을 통제 그룹의 사용자 성능과 비교할 수 있습니다. 변경이 실제로 성능을 향상시킨다는 확신이 생기면 모든 사용자에게 롤아웃할 수 있습니다.
+
+{% Aside %} 실험 그룹은 항상 서버에서 설정해야 합니다. 클라이언트에서 실행되는 실험 또는 A/B 테스트 도구는 사용하지 마세요. 이러한 도구는 일반적으로 사용자의 실험 그룹이 결정될 때까지 렌더링을 차단하므로 LCP 시간에 악영향을 미칠 수 있습니다. {% endAside %}
+
+## 측정이 성능에 영향을 미치지 않는지 확인
+
+실제 사용자의 성능을 측정할 때 실행 중인 성능 측정 코드가 페이지 성능에 부정적인 영향을 미치지 않도록 하는 것이 매우 중요합니다. 그렇게 되는 경우 분석 코드 자체가 문제인지 알 수 없기 때문에 성능이 비즈니스에 미치는 영향에 대한 결과를 신뢰할 수 없게 됩니다.
+
+프로덕션 사이트에 RUM 분석 코드를 배포할 때는 항상 다음 원칙을 따르세요.
+
+### 분석 지연
+
+분석 코드는 항상 비동기식, 비차단 방식으로 로드해야 하며 일반적으로 마지막에 로드해야 합니다. 차단 방식으로 분석 코드를 로드하면 LCP에 부정적인 영향을 미칠 수 있습니다.
+
+Core Web Vitals 메트릭을 측정하는 데 사용되는 모든 API는 [`buffered`](https://www.chromestatus.com/feature/5118272741572608) 플래그를 통해 비동기 및 지연된 스크립트 로드를 지원하도록 특별히 설계되었으므로 스크립트를 일찍 로드하기 위해 서두를 필요가 없습니다.
+
+페이지 로드 타임라인에서 나중에 계산할 수 없는 메트릭을 측정하는 경우라면 *초기에 실행해야 하는 코드만* 문서의 `<head>`에 인라인해야 합니다(그러므로 [렌더링 차단 요청이](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/) 아님). 그리고 나머지는 미루세요. 단일 메트릭에 필요하다고 해서 모든 분석을 초반에 로드할 필요는 없습니다.
+
+### 긴 작업을 생성하지 말 것
+
+분석 코드는 종종 사용자 입력에 대한 응답으로 실행되지만 분석 코드가 많은 DOM 측정을 수행하거나 다른 프로세서 집약적인 API를 사용하는 경우 분석 코드 자체가 입력 응답성을 저하시킬 수 있습니다. 또한 분석 코드가 포함된 JavaScript 파일이 큰 경우 해당 파일을 실행하면 메인 스레드가 차단되어 FID에 부정적인 영향을 미칠 수 있습니다.
+
+### 비차단 API 사용
+
+<code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code> 및 <code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code> 같은 API는 사용자에게 크리티컬한 태스크를 차단하지 않는 방식으로 크리티컬이 아닌 태스크를 운영하기 위해 특별히 설계되었습니다.
+
+이러한 API는 RUM 분석 라이브러리에서 사용할 수 있는 훌륭한 도구입니다.
+
+일반적으로 모든 분석 비콘은 `sendBeacon()` API(사용 가능한 경우)를 사용하여 전송되어야 하며 모든 수동 분석 측정 코드는 유휴 기간 실행되어야 합니다.
+
+{% Aside %} 유휴 시간 사용을 최대화하는 동시에 필요할 때(예: 사용자가 페이지를 언로드하는 경우) 코드가 긴급하게 실행될 수 있도록 하는 방법을 알아보려면 [idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/) 패턴을 참조하세요. {% endAside %}
+
+### 필요 이상으로 추적하지 말 것
+
+브라우저는 많은 성능 데이터를 노출하지만 데이터를 사용할 수 있다고 해서 반드시 기록하고 분석 서버로 보내야 하는 것은 아닙니다.
+
+예를 들어 [Resource Timing API](https://w3c.github.io/resource-timing/)는 페이지에 로드된 모든 단일 리소스에 대한 자세한 타이밍 데이터를 제공합니다. 그러나 모든 데이터가 리소스 로드 성능을 개선하는 데 반드시 또는 유용하지는 않죠.
+
+존재하는 모든 데이터를 추적하지 마세요. 추적하기 위해 리소스를 사용하기 전에 해당 데이터가 사용될 것인지를 확인하는 것이 우선입니다.
diff --git a/src/site/content/ko/blog/vitals-measurement-getting-started/index.md b/src/site/content/ko/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..1c3e09f12fb
--- /dev/null
+++ b/src/site/content/ko/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: Web Vitals 측정 시작하기
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: LCP, FID 및 CLS라는 라벨이 붙은 스톱워치가 오버레이된 월별 그래프
+description: 실제 환경과 실험실 환경 모두에서 사이트의 Web Vitals를 측정하는 방법을 알아보세요.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+사이트에서 Web Vital에 대한 데이터를 수집하는 것은 이를 개선하기 위한 첫 번째 단계입니다. 전반적인 분석은 실제 환경과 실험실 환경 모두에서 성능 데이터를 수집합니다. Web Vitals 측정에는 최소한의 코드 변경이 필요하며 무료 도구를 사용하여 수행할 수 있습니다.
+
+## RUM 데이터를 사용하여 Web Vitals 측정
+
+필드 데이터라고도 알려진 [Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring)(실제 사용자 모니터링, RUM) 데이터는 사이트의 실제 사용자가 경험하는 성능을 포착합니다. RUM 데이터는 Google에서 사이트가 [권장되는 Core Web Vitals 임계값](/vitals/)을 충족하는지 확인하는 데 사용됩니다.
+
+### 시작하기
+
+RUM 설정이 없는 경우 다음 도구를 사용하여 사이트의 실제 성능에 대한 데이터를 빠르게 제공할 수 있습니다. 이러한 도구는 모두 동일한 기본 데이터 세트([Chrome User Experience Report](https://developer.chrome.com/docs/crux/))를 기반으로 하지만 사용 사례가 약간 다릅니다.
+
+- **PageSpeed Insights(PSI)** : [PageSpeed Insights](https://pagespeed.web.dev/)는 지난 28일 동안 집계된 페이지 수준 및 원본 수준 성능에 대해 보고하며 성능 개선 방법을 제안합니다. 사이트의 Web Vitals 측정 및 개선을 하나로 시작하고 싶다면 PSI를 사용하여 사이트를 감사하는 것이 좋습니다. PSI는 [웹](https://pagespeed.web.dev/) 또는 [API](https://developers.google.com/speed/docs/insights/v5/get-started)를 통해 이용할 수 있습니다.
+- **Search Console** : [Search Console](https://search.google.com/search-console/welcome)은 페이지별로 성능 데이터를 보고합니다. 따라서 개선이 필요한 특정 페이지를 식별하는 데 적합합니다. PageSpeed Insights와 달리 Search Console 보고에는 과거 성능 데이터 내역이 포함됩니다. Search Console은 본인이 소유하고 있으며 소유권이 확인된 사이트에서만 사용할 수 있습니다.
+- **CrUX 대시보드**: [CrUX 대시보드](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard)는 선택한 출처에 대한 CrUX 데이터를 표시하는 사전 구축된 대시보드입니다. Data Studio를 기반으로 구축되며 설정 프로세스는 약 1분 정도 소요됩니다. PageSpeed Insights 및 Search Console과 비교했을 때 CrUX 대시보드 보고는 더 많은 차원을 포함합니다. 예를 들면 데이터를 장치 및 연결 유형별로 분류할 수 있습니다.
+
+위에 나열된 도구는 Web Vitals 측정을 "시작"하는 데 적합할 뿐만 아니라 다른 곳에서도 유용할 수 있습니다. 특히 CrUX와 PSI는 모두 API로 제공되며 [대시보드](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o) 및 기타 보고를 구축하는 데 사용할 수 있습니다.
+
+### RUM 데이터 수집
+
+CrUX 기반 도구는 Web Vitals 성능을 조사하기 위한 좋은 출발점이지만, 자체 RUM으로 이를 보완하는 방법을 적극 추천합니다. 직접 수집한 RUM 데이터는 사이트 성능에 대한 보다 자세하고 즉각적인 피드백을 제공하기 때문에 문제를 쉽게 식별하고 가능한 솔루션을 테스트할 수 있습니다.
+
+{% Aside %} CrUX 기반 데이터 소스는 약 1개월 단위로 데이터를 보고하지만 세부 내용은 도구에 따라 조금씩 다릅니다. 예를 들어 PSI와 Search Console은 지난 28일 동안 관찰된 성능을 보고하는 반면 CrUX 데이터 세트와 대시보드는 월별로 분류하여 보고합니다. {% endAside %}
+
+전용 RUM 제공자를 이용하거나, 고유한 도구를 설정하여 본인에게 필요한 RUM 데이터를 수집할 수 있습니다.
+
+전용 RUM 공급자는 RUM 데이터 수집 및 보고를 전문으로 합니다. 이러한 서비스와 함께 Core Web Vitals를 사용하려면 RUM 공급자에게 사이트에서 Core Web Vitals 모니터링을 활성화하는 방법을 문의하세요.
+
+RUM 공급자를 이용하지 않는 경우, [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)를 사용하여 이러한 메트릭을 수집하고 보고하도록 기존 분석 설정을 보강할 수 있습니다. 아래에서 이러한 방식에 대한 자세한 설명을 확인해주세요.
+
+### web-vitals JavaScript 라이브러리
+
+Web Vitals에 대해 자체적인 RUM 설정을 구현하려는 경우, Web Vitals 측정을 수집하는 가장 쉬운 방법은 사용하는 [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리를 사용하는 것입니다. `web-vitals`는 [현장에서 측정 가능](/user-centric-performance-metrics/#in-the-field)한 각 Web Vitals 메트릭을 수집하고 보고하기 위한 편리한 API를 제공하는 소규모 모듈식 라이브러리(~1KB)입니다.
+
+Web Vital을 구성하는 메트릭은 모두 브라우저의 빌트인 성능 API에 의해 직접적으로 노출되는 것이 아니라, 이를 기반으로 구축됩니다. 예를 들어 [Cumulative Layout Shift(누적 레이아웃 이동, CLS)](/cls/)는 [Layout Instability API](https://wicg.github.io/layout-instability/)를 사용해 구현됩니다. `web-vitals`를 사용하면 이러한 메트릭을 직접 구현하는 것에 대해 걱정할 필요가 없으며, 수집한 데이터가 각 메트릭에 대한 방법론 및 모범 사례와 일치하는지 확인할 수 있습니다.
+
+`web-vitals` 구현에 대한 자세한 내용은 [문서](https://github.com/GoogleChrome/web-vitals) 및 [현장의 Web Vitals 측정에 대한 모범 사례](/vitals-field-measurement-best-practices/)를 참조하세요.
+
+### 데이터 집계
+
+`web-vitals`가 수집한 측정값을 보고하는 것이 중요합니다. 이 데이터가 측정되었으나 보고되지 않은 경우에는 절대 확인할 수 없기 때문이죠. `web-vitals` 문서에는 데이터를 [API 엔드포인트](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint), [Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics) 또는 [Google Tag Manager](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager)로 보내는 방법을 보여주는 예시가 기재되어 있습니다.
+
+선호하는 보고 도구가 이미 있는 경우 해당 도구를 사용하는 것이 좋습니다. 그렇지 않은 경우 무료로 제공되는 Google Analytics를 이러한 용도로 사용할 수 있습니다.
+
+사용할 도구를 고려할 때 누가 데이터에 액세스하게 될지 고려하는 것이 좋습니다. 기업은 일반적으로 단일 부서가 아니라 회사 전체가 성능 개선에 관심을 가질 때 가장 큰 성과를 거둡니다. 다른 부서의 승인을 받는 방법을 알아보려면 [전체적인 웹 사이트 속도 수정](/fixing-website-speed-cross-functionally/)을 참조하세요.
+
+### 데이터 해석
+
+성능 데이터를 분석할 때는 분포의 꼬리에 관심을 기울이는 게 중요합니다. RUM 데이터는 성능이 다양하다는 것을 보여주는 경우가 많습니다. 빠른 속도를 경험하는 사용자도 있고, 느린 속도를 경험하는 사용자도 있습니다. 그러나 중앙값을 사용하여 데이터를 요약하면 이러한 부분이 쉽게 가려집니다.
+
+Google은 Web Vitals에 대해 중앙값 또는 평균과 같은 통계가 아닌 "원활한" 경험의 비율을 사용하여 사이트 또는 페이지가 권장 임계값을 충족하는지 결정합니다. 특히 사이트 또는 페이지가 Core Web Vitals 임계값을 충족하는 것으로 간주되려면 페이지 방문의 75%가 각 메트릭에 대한 "양호" 임계값을 충족해야 합니다.
+
+## 실험실 데이터를 사용하여 Web Vitals 측정
+
+인공적 데이터라고도 불리는 [실험실 데이터](/user-centric-performance-metrics/#in-the-lab)는 실제 사용자가 아닌 통제된 환경에서 수집됩니다. 실험실 데이터는 RUM 데이터와 달리 사전 프로덕션 환경에서 수집할 수 있으므로 개발자 워크플로 및 지속적인 통합 프로세스에 통합할 수 있습니다. 인공적 데이터를 수집하는 도구의 예로는 Lighthouse 및 WebPageTest가 있습니다.
+
+### 고려 사항
+
+RUM 데이터와 실험실 데이터 사이에는 항상 불일치가 있습니다. 특히 네트워크 조건, 장치 유형 또는 실험실 환경의 위치가 사용자의 환경과 크게 다른 경우에는 더욱 그렇습니다. 그러나 Web Vitals 메트릭에 대한 실험실 데이터를 수집할 때는 특히 유의해야 할 특정 고려 사항이 몇 가지 있습니다.
+
+- **Cumulative Layout Shift(누적 레이아웃 이동, CLS):** 실험실 환경에서 측정된 [누적 레이아웃 이동](/cls/)은 RUM 데이터에서 관찰된 CLS보다 인위적으로 낮을 수 있습니다. CLS는 *"페이지의 전체 수명 동안* 발생하는 예기치 않은 모든 레이아웃 전환에 대한 개별 레이아웃 전환 점수의 합계"로 정의됩니다. 그러나 페이지의 수명은 일반적으로 실제 사용자가 로드하는지, 인위적인 성능 측정 도구에 의해 로드되는지에 따라 크게 달라집니다. 대부분의 실험실 도구는 페이지만 로드하고 상호 작용하지 않으므로, 결과적으로 초기 페이지 로드 중에 발생하는 레이아웃 이동만 포착하게 됩니다. 그러나 RUM 도구로 측정한 CLS는 페이지의 전체 수명 동안 발생하는 [예기치 않은 레이아웃의 변화](/cls/#expected-vs-unexpected-layout-shifts)를 모두 포착합니다.
+- **First Input Delay(최초 입력 지연, FID):** [최초 입력 지연](/fid/) 은 페이지에 대한 사용자 상호 작용이 필요하기 때문에 실험실 환경에서 측정할 수 없습니다. 이로 인해 실험실에서는 FID를 대체해 [Total Blocking Time](/tbt/)(총 차단 시간, TBT)을 사용하도록 권장됩니다. TBT는 "First Contentful Paint(최초 콘텐츠풀 페인트, FCP)와 Time to Interactive(상호 작용까지의 시간, TTI) 사이에서 페이지가 사용자 입력에 응답하지 못하도록 차단되는 총 시간"을 측정합니다. FID와 TBT는 다르게 계산되지만 둘 다 부트스트랩 프로세스 동안 차단된 메인 스레드를 반영하며, 메인 스레드가 차단되는 경우 브라우저에서는 사용자 상호 작용에 대한 응답이 지연됩니다. FID는 가능한 경우 사용자가 페이지와 처음 상호작용을 시도할 때 발생하는 지연을 측정합니다.
+
+### 도구
+
+다음 도구를 사용하여 Web Vitals의 실험실 측정값을 수집할 수 있습니다.
+
+- **Web Vitals Chrome 확장 프로그램:** Web Vitals Chrome [확장 프로그램](https://github.com/GoogleChrome/web-vitals-extension)은 주어진 페이지에 대한 Core Web Vitals(LCP, FID 및 CLS)를 측정하고 보고합니다. 이 도구는 개발자에게 코드 변경 시 실시간 성능 피드백을 제공하기 위해 제작되었습니다.
+- **Lighthouse:** Lighthouse는 LCP, CLS 및 TBT를 보고하고 가능한 성능 개선 사항도 강조합니다. Lighthouse는 Chrome DevTools에서 Chrome 확장 프로그램 및 npm 패키지로 사용할 수 있습니다. Lighthouse는 [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)를 통해 지속적인 통합 워크플로에 통합될 수도 있습니다.
+- **WebPageTest:** [WebPageTest](https://webpagetest.org/)는 표준 보고의 일부로 Web Vitals를 포함합니다. WebPageTest는 특정 장치 및 네트워크 조건에서 Web Vitals에 대한 정보를 수집하는 데 유용합니다.
diff --git a/src/site/content/ko/blog/vitals-tools/index.md b/src/site/content/ko/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..ca463aca894
--- /dev/null
+++ b/src/site/content/ko/blog/vitals-tools/index.md
@@ -0,0 +1,157 @@
+---
+title: Core Web Vitals 측정 도구
+subhead: 이제 즐겨 사용하는 개발자 도구로 Core Web Vitals를 측정할 수 있습니다.
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: Lighthouse, PageSpeed Insights, Chrome UX Report 등과 같은 인기 있는 웹 개발자 도구 전반에서 사용할 수 있는 최신 이니셔티브인 Core Web Vitals 측정 지원에 대해 알아보세요.
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Chrome User Experience 로고, PageSpeed Insights 로고, Lighthouse 로고, Search Console 로고, Chrome DevTools 로고, Web Vitals 확장 프로그램 로고.
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+최근에 발표된 [Web Vitals](/vitals/) 이니셔티브는 모든 사이트가 웹에서 뛰어난 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합적인 지침을 제공합니다. 이제 **웹 개발자가 즐 겨 사용하는 Google의 모든 인기 도구가 Core Web Vitals 측정을 지원**하여 사용자 경험 문제를 보다 쉽게 진단하고 수정할 수 있게 되었습니다. 이러한 도구에는 [Lighthouse](https://github.com/GoogleChrome/lighthouse) , [PageSpeed Insights](https://pagespeed.web.dev/) , [Chrome DevTools](https://developer.chrome.com/docs/devtools/) , [Search Console](https://search.google.com/search-console/about) , [web.dev의 측정 도구](/measure/) , [Web Vitals Chrome 확장 프로그램](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) 및 새로운 [Chrome UX Report](https://developer.chrome.com/docs/crux/) API가 포함됩니다.
+
+이제 Google 검색에 Core Web Vitals가 [페이지 경험](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html) 평가의 기초로 포함되므로 이러한 메트릭을 가능한 한 사용 및 실행 가능하게 만드는 것이 중요합니다.
+
+<figure>{% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Core Web Vitals 메트릭을 지원하는 Chrome 및 Search Tools 요약", width="800", height="509" %}</figure>
+
+{% Aside 'key-term' %} **실험실 도구**는 *잠재적인 사용자*가 웹사이트를 어떻게 경험할 것인지에 대한 통찰력을 제공하고 디버깅을 위한 재현 가능한 결과를 제공합니다. **필드** 도구는 *실제 사용자* 가 웹사이트를 경험하는 방식에 대한 통찰력을 제공합니다. 이러한 유형의 측정을 Real User Monitoring(실제 사용자 모니터링, RUM)이라고 합니다. 각 [실험실 또는 필드 도구](/how-to-measure-speed/#lab-data-vs-field-data)는 사용자 경험을 최적화하기 위한 고유한 가치를 제공합니다. {% endAside %}
+
+Core Web Vitals로 사용자 경험을 최적화하는 여정을 시작하려면 다음 워크플로를 따라해보세요.
+
+- Search Console의 새로운 Core Web Vitals Report를 사용해 주의가 필요한 페이지 그룹을 식별하세요(필드 데이터 기반).
+- 작업이 필요한 페이지를 식별했으면 PageSpeed Insights(Lighthouse 및 Chrome UX Report 기반)를 사용하여 페이지의 실험실 및 필드 문제를 진단합니다. PageSpeed Insights(PSI)는 Search Console을 통해 사용하거나 PSI에 직접 URL을 입력할 수 있습니다.
+- 실험실에서 로컬로 사이트를 최적화할 준비가 되었나요? Lighthouse 및 Chrome DevTools를 사용하여 Core Web Vitals를 측정하고 정확히 무엇을 수정해야 할지 실행 가능한 지침을 확보하세요. Web Vitals Chrome 확장 프로그램을 사용하면 데스크톱에서 실시간으로 메트릭을 볼 수 있습니다.
+- Core Web Vitals의 맞춤형 대시보드가 필요하신가요? 업데이트된 CrUX Dashboard 또는 필드 데이터를 위한 새로운 Chrome UX Report API를 사용하거나 실험실 데이터를 위한 PageSpeed Insights API를 사용하세요.
+- 지침을 찾고 계신가요? web.dev/measure는 PSI 데이터를 사용해 페이지를 측정하고 최적화를 위한 우선순위 가이드 및 Codelab 세트를 표시합니다.
+- 마지막으로, 변경 사항을 프로덕션에 배포하기 전에 회귀가 없더록 Lighthouse CI를 사용하여 Core Web Vitals으로 요청을 풀링하세요.
+
+여기까지는 간단한 소개였습니다. 이제 각 업데이트에 대해 좀 더 자세히 알아보죠!
+
+### Lighthouse
+
+Lighthouse는 개발자가 문제를 진단하고 사이트의 사용자 경험을 개선할 기회를 식별할 수 있도록 지원하는 자동화된 웹사이트 감사 도구입니다. 실험실 환경에서 성능 및 접근성을 포함한 여러 차원의 사용자 경험 품질을 측정합니다. 최신 버전의 Lighthouse( [6.0](/lighthouse-whats-new-6.0/) , 2020년 5월 중순 출시)에는 추가 감사, 새로운 메트릭 및 새로 구성된 성능 점수가 포함되어 있습니다.
+
+<figure>{% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="최신 Core Web Vitals 메트릭을 표시하는 Lighthouse 6.0", width="800", height="527" %}</figure>
+
+Lighthouse 6.0은 보고서에 세 가지 새로운 메트릭을 도입했습니다. 이러한 새로운 메트릭 중 [Large Contentful Paint](/lcp/)(최대 콘텐츠풀 페인트, LCP) 및 [Cumulative Layout Shift](/cls/)(누적 레이아웃 이동, CLS)는 Core Web Vitals의 실험실 구현이며 사용자 경험을 최적화하기 위한 중요한 진단 정보를 제공합니다. 사용자 경험 평가의 중요성을 감안할 때 새로운 메트릭은 측정되어 보고서에 포함될 뿐만 아니라 성능 점수 계산에도 고려됩니다.
+
+Lighthouse에 포함된 세 번째 새로운 메트릭인 [Total Blocking Time](/tbt/)(총 차단 시간, TBT)은 또 다른 Core Web Vitals 메트릭인 [First Input Delay](/fid/)(최초 입력 지연, FID) 필드 메트릭과 관련성이 큽니다. Lighthouse 보고서에 제공된 권장 사항을 따르고 점수에 맞게 최적화하면 사용자에게 가능한 최고의 경험을 제공할 수 있습니다.
+
+Lighthouse가 제공하는 모든 제품은 최신 버전을 반영하도록 업데이트됩니다. 여기에는 병합 및 배포 전에 풀링 요청에 대한 Core Web Vitals를 쉽게 측정할 수 있는 [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)가 포함됩니다.
+
+<figure>{% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="최대 콘텐츠풀 페인트로 diff 보기를 표시하는 Lighthouse CI", width="800", height="498" %}</figure>
+
+Lighthouse의 최신 업데이트에 대해 자세히 알아보려면 [Lighthouse 6.0의 새로운 기능](/lighthouse-whats-new-6.0/) 블로그 게시물을 확인하세요.
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/)(PSI)는 모바일 및 데스크톱 장치 모두에서 페이지의 실험실 및 현장 성능에 대해 보고합니다. 이 도구는 실제 사용자가 페이지를 경험하는 방식에 대한 개요(Chrome UX Report로 제공)와 사이트 소유자가 페이지 경험을 개선하기 위해 실행 가능한 권장 사항(Lighthouse로 제공)을 제공합니다.
+
+PageSpeed Insights 및 [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) 역시 내부에서 Lighthouse 6.0을 사용하도록 업그레이드되었으며 이제 보고서의 실험실 및 필드 섹션 모두에서 Core Web Vitals 측정을 지원합니다! Core Web Vitals에는 아래와 같이 파란색 리본이 표시됩니다.
+
+<figure>{% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="PageSpeed Insights에서 필드 및 실험실용으로 표시되는 Core Web Vitals 데이터", width="800", height="873" %}</figure>
+
+[Search Console](https://search.google.com/search-console/)은 사이트 소유자에게 주의가 필요한 페이지 그룹에 대한 개요를 제공하는 반면, PSI는 페이지 경험을 개선할 수 있는 페이지당 기회를 식별하는 데 도움이 됩니다. PSI에서는 보고서 상단에 **Core Web Vitals 평가 합격** 또는 **Core Web Vitals 평가 불합격** 여부가 표시되므로 해당 페이지가 모든 Core Web Vitals 평가에서 우수한 경험을 위한 임계값을 충족하는지 여부를 명확하게 확인할 수 있습니다.
+
+### CrUX
+
+[Chrome UX Report](https://developer.chrome.com/docs/crux/)(CrUX)는 수백만 개의 웹사이트에 대한 실제 사용자 경험 데이터의 공개 데이터 세트로 모든 Core Web Vitals의 필드 버전을 측정합니다. 실험실 데이터와 달리 CrUX 데이터는 필드에서 [옵트인된 사용자](https://developer.chrome.com/docs/crux/methodology/#user-eligibility)가 제공합니다. 개발자는 이러한 데이터를 사용하여 자신 또는 경쟁업체의 웹사이트에서 실제 사용자 경험의 분포를 이해할 수 있습니다. 사이트에 대한 RUM이 없더라도 CrUX는 Core Web Vitals를 평가하기 위한 쉽고 빠른 방법을 제공해줍니다. [BigQuery의 CrUX 데이터 세트](https://developer.chrome.com/docs/crux/bigquery/)에는 모든 Core Web Vital에 대한 세분화된 성능 데이터가 포함되어 있으며 원본 수준의 월별 스냅샷에서 사용할 수 있습니다.
+
+사이트가 사용자를 위해 어떻게 작동하는지 제대로 알 수 있는 유일한 방법은 해당 사용자가 사이트를 로드하고 상호 작용할 때 필드에서 사이트의 성능을 실제로 측정하는 것입니다. 이러한 측정 유형을 일반적으로 Real User Monitoring(실제 사용자 모니터링, RUM)이라고 합니다. 사이트에 대한 RUM이 없더라도 CrUX는 Core Web Vitals를 평가하기 위한 쉽고 빠른 방법을 제공해줍니다.
+
+**CrUX API 소개**
+
+개발 워크플로를 원본 및 URL 수준 품질 측정과 쉽고 빠르게 통합할 수 있게 해주는 무료 [CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/)를 발표하게 되어 기쁩니다. 다음 필드 메트릭에 대해 사용할 수 있습니다.
+
+- Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
+- Cumulative Layout Shift(누적 레이아웃 이동, CLS)
+- First Input Delay(최초 입력 지연, FID)
+- First Contentful Paint(최초 콘텐츠풀 페인트, FCP)
+
+개발자는 원본 또는 URL을 쿼리하고 다양한 폼 팩터로 결과를 분류할 수 있습니다. API는 매일 업데이트되며 이전 28일 동안의 데이터를 요약합니다(월별로 집계되는 BigQuery 데이터세트와 다름). 또한 해당 API에는 다른 API인 PageSpeed Insights API(하루 25,000개 요청)에 적용하는 것과 동일한 완화된 공개 API 할당량을 적용합니다.
+
+다음은 CrUX API를 사용하여 **양호(good)**, **개선 필요(needs improvement)** 또는 **나쁨(poor)** 상태의 분포를 통해 Core Web Vitals 메트릭을 시각화해주는 [데모](https://developer.chrome.com/blog/chrome-ux-report-api/)입니다.
+
+<figure>{% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Core Web Vitals 메트릭을 보여주는 Chrome User Experience Report API 데모", width="800", height="523" %}</figure>
+
+향후 릴리스에서는 추가 CrUX 데이터 세트 차원 및 메트릭에 액세스할 수 있도록 API를 확장할 계획입니다.
+
+**개선된 CrUX Dashboard**
+
+새롭게 재설계된 [CrUX Dashboard](http://g.co/chromeuxdash)를 사용하면 시간 경과에 따른 원본의 성능을 쉽게 추적하고, 이를 사용하여 모든 Core Web Vitals 메트릭의 분포를 모니터링할 수 있습니다. Dashboard를 시작하려면 web.dev에서 [튜토리얼](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/)을 확인하세요.
+
+<figure>{% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="새 랜딩 페이지에서 Core Web Vitals를 표시하는 Chrome UX Report Dashboard", width="800", height="497" %}</figure>
+
+사이트 성능을 한눈에 훨씬 더 쉽게 파악할 수 있도록 새로운 Core Web Vitals 랜딩 페이지를 도입했습니다. CrUX 도구에 대한 피드백은 언제나 환영입니다. [@ChromeUXReport](https://twitter.com/chromeuxreport) Twitter 계정 또는 [Google 그룹](https://groups.google.com/a/chromium.org/g/chrome-ux-report)으로 다양한 생각과 질문을 공유해주세요.
+
+### Chrome DevTools 성능 패널
+
+**Experience 섹션의 레이아웃 이동 이벤트 디버그**
+
+Chrome DevTools **Performance** 패널에는 예기치 않은 레이아웃 이동을 감지하는 데 도움이 되는 새로운 **[Experience 섹션](https://developers.google.com/web/updates/2020/05/devtools#cls)**이 있습니다. 이는 페이지에서 누적 레이아웃 이동을 야기하는 불안정한 시각적 문제를 찾고 수정하는 데 유용합니다.
+
+<figure>{% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="Performance 패널에서 빨간색으로 표시되는 누적 레이아웃 이동", width="800", height="517" %}</figure>
+
+Layout Shift를 선택하여 **Summary** 탭에서 세부 정보를 볼 수 있습니다. 이동 자체가 발생한 위치를 시각화하려면 **Moved from** 및 **Moved to** 필드 위로 마우스를 가져가세요.
+
+**바닥글의 총 차단 시간으로 상호 작용 준비 상태 디버그**
+
+총 차단 시간(TBT) 메트릭은 실험실 도구에서 측정할 수 있으며 최초 입력 지연의 대체로 사용하기 좋습니다. TBT는 입력 응답을 방지할 수 있을 정도로 오래 메인 스레드가 차단된 경우 [First Contentful Paint](/fcp/)(최초 콘텐츠풀 페인트, FCP)와 [Time to Interactive](/tti/)(상호 작용까지의 시간, TTI) 사이의 총 시간을 측정합니다. 실험실에서 TBT를 개선하는 성능 최적화는 필드에서 FID를 개선할 수 있습니다.
+
+<figure>{% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt=" DevTools Performance 패널의 바닥글에 표시되는 총 차단 시간", width="800", height="517" %}</figure>
+
+이제 페이지 성능을 측정할 때 Chrome DevTools **Performance** 패널의 바닥글에 TBT가 표시됩니다.
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. **Record**를 클릭합니다.
+2. 페이지를 수동으로 새로고침합니다.
+3. 페이지가 로드될 때까지 기다렸다가 기록을 중지합니다.
+
+자세한 내용은 [DevTools의 새로운 기능(Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls)을 참조하세요.
+
+### Search Console
+
+Search Console의 새로운 [Core Web Vitals Report](https://support.google.com/webmasters/answer/9205520) 는 CrUX의 실제(필드) 데이터를 기반으로 사이트에서 주의가 필요한 페이지 그룹을 식별할 수 있게 해줍니다. URL 성능은 상태, 메트릭 유형 및 URL 그룹(유사한 웹 페이지의 그룹)별로 나뉩니다.
+
+<figure>{% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Search Console의 새로운 Core Web Vitals Report", width="800", height="1000" %}</figure>
+
+이 보고서는 LCP, FID, CLS 등 세 가지 Core Web Vitals 메트릭을 기반으로 합니다. URL에 이러한 메트릭에 대한 최소량의 보고 데이터가 없다면 보고서에서 생략됩니다. 원본의 성능을 전체적으로 보려면 새로운 보고서를 사용해보세요.
+
+Core Web Vitals 관련 문제가 있는 페이지 유형을 식별하면 PageSpeed Insights를 통해 해당 페이지에 특정한 최적화 방법을 제안받을 수 있습니다.
+
+#### web.dev
+
+[web.dev/measure](/measure/)를 사용하면 시간 경과에 따른 페이지 성능을 측정하고 개선을 위한 우선순위 가이드 및 Codelab 세트 목록을 표시합니다. 이러한 PageSpeed Insights에서 제공합니다. 측정 도구는 이제 아래와 같이 Core Web Vitals 메트릭도 지원합니다.
+
+<figure>{% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="web.dev 특정 도구로 시간 경과에 따른 Core Web Vitals 측정 및 우선순위 가이드 받기", width="800", height="459" %}</figure>
+
+### Web Vitals 확장 프로그램
+
+Web Vitals 확장 프로그램은 데스크톱 Google Chrome에 대한 3개의 핵심 Web Vitals 메트릭을 실시간으로 측정합니다. 이는 개발 워크플로 초기에 문제를 파악하고 웹을 탐색할 때 Core Web Vitals의 성능을 평가하기 위한 진단 도구로 유용합니다.
+
+이제 이 확장 프로그램을 [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)에서 설치할 수 있으므로 유용하게 활용하시기 바랍니다. 프로젝트의 [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) 리포지토리에 대한 피드백과 개선 사항은 언제든 환영입니다.
+
+<figure>{% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Web Vitals Chrome 확장 프로그램에 실시간으로 표시되는 Core Web Vitals", width="800", height="459" %}</figure>
+
+#### 하이라이트
+
+여기까지입니다! 이후 다음을 시도해보세요.
+
+- DevTools에서 **Lighthouse**를 사용하여 사용자 경험을 최적화하고 필드에서 Core Web Vitals를 충족할 수 있도록 준비합니다.
+- **PageSpeed Insights** 를 사용하여 실험실과 필드의 Core Web Vitals 성능을 비교해보세요.
+- 새로운 **Chrome User Experience Report API** 를 사용해 원본 및 URL에서 지난 28일 동안 Core Web Vitals가 얼마나 잘 충족되었는지 쉽게 확인할 수 있습니다.
+- **Experience** 섹션 및 DevTools **Performance** 패널의 바닥글을 통해 특정 Core Web Vitals에 대해 심층적으로 파악하고 디버그하세요.
+- **Search Console의 Core Web Vitals Report**를 사용해 필드에서의 원본 성능에 대한 요약을 받으세요.
+- **Web Vitals 확장 프로그램**을 사용하여 Core Web Vitals을 기반으로 한 페이지 성능을 실시간으로 추적하세요.
+
+Core Web Vitals 도구에 대한 자세한 내용은 6월 [web.dev Live](/live/)에서 다룰 예정입니다. 이벤트에 대한 업데이트를 받으려면 등록해주세요!
+
+~ WebPerf 관리인 Elizabeth와 Addy 씀
diff --git a/src/site/content/ko/blog/web-share/index.md b/src/site/content/ko/blog/web-share/index.md
new file mode 100644
index 00000000000..bdd94f577e2
--- /dev/null
+++ b/src/site/content/ko/blog/web-share/index.md
@@ -0,0 +1,118 @@
+---
+title: Web Share API로 OS 공유 UI와 통합
+subhead: 웹 앱은 플랫폼별 앱과 동일한 시스템 제공 공유 기능을 사용할 수 있습니다.
+authors:
+  - joemedley
+date: 2019-11-08
+updated: 2021-07-09
+hero: image/admin/ruvEms3AeSZvlEI01DKo.png
+alt: 웹 앱이 시스템 제공 공유 UI를 사용할 수 있음을 보여주는 그림.
+description: Web Share API를 통해 웹 앱은 플랫폼별 앱과 동일한 시스템 제공 공유 기능을 사용할 수 있습니다. Web Share API를 사용하면 웹 앱이 플랫폼별 앱과 동일한 방식으로 장치에 설치된 다른 앱에 대한 링크, 텍스트 및 파일을 공유할 수 있습니다.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+stack_overflow_tag: web-share
+---
+
+Web Share API를 통해 웹 앱은 플랫폼별 앱과 동일한 시스템 제공 공유 기능을 사용할 수 있습니다. Web Share API를 사용하면 웹 앱이 플랫폼별 앱과 동일한 방식으로 장치에 설치된 다른 앱에 대한 링크, 텍스트 및 파일을 공유할 수 있습니다.
+
+{% Aside %} 공유는 마법의 절반에 불과합니다. 웹 앱은 공유 대상이 될 수도 있습니다. 즉, 플랫폼별 또는 웹 앱에서 데이터, 링크, 텍스트 및 파일을 수신할 수 있습니다. 앱을 공유 대상으로 등록하는 방법에 대한 자세한 내용은 [공유 데이터 받기](/web-share-target/) 게시물을 참조하세요. {% endAside %}
+
+## 개념 및 사용법
+
+<figure data-float="right">{% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="PWA가 옵션으로 설치된 시스템 수준 공유 대상 선택기.", width="370", height="349" %}<figcaption> PWA가 옵션으로 설치된 시스템 수준 공유 대상 선택기.</figcaption></figure>
+
+### 기능 및 제한 사항
+
+웹 공유에는 다음과 같은 기능과 제한 사항이 있습니다.
+
+- [HTTPS를 통해 액세스](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features)하는 사이트에서만 사용할 수 있습니다.
+- 클릭과 같은 사용자 작업에 대한 응답으로 호출되어야 합니다. `onload` 핸들러를 통해 호출하는 것은 불가능합니다.
+- URL, 텍스트 또는 파일을 공유할 수 있습니다.
+- 2021년 1월부터 Safari, Chromium 포크의 Android, ChromeOS 및 Windows의 Chrome에서 사용할 수 있습니다. MacOS의 Chrome은 아직 개발 중입니다. 자세한 내용은 [MDN](https://developer.mozilla.org/docs/Web/API/Navigator/share#Browser_compatibility)을 참조하세요.
+
+### 링크 및 텍스트 공유
+
+링크와 텍스트를 공유하려면 필수 속성 객체가 있는 promise 기반 메서드인 `share()` 메서드를 사용합니다. 브라우저가 `TypeError`를 발생시키지 않도록 하려면 `title`, `text`, `url` 또는 `files` 속성 중 하나 이상이 객체에 포함되어야 합니다. 예를 들어 URL 없이 텍스트를 공유하거나 그 반대의 경우도 마찬가지입니다. 세 개의 구성원을 모두 허용하면 사용 사례의 유연성이 확장됩니다. 아래 코드를 실행한 후 사용자가 이메일 애플리케이션을 대상으로 선택했다고 가정해 보겠습니다. `title` 매개변수는 이메일 제목, `text`는 메시지 본문, 그리고 파일은 첨부 파일이 될 수 있습니다.
+
+```js
+if (navigator.share) {
+  navigator.share({
+    title: 'web.dev',
+    text: 'Check out web.dev.',
+    url: 'https://web.dev/',
+  })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error));
+}
+```
+
+사이트에 동일한 콘텐츠에 대한 여러 URL이 있는 경우 현재 URL 대신 페이지의 표준 URL을 공유하세요. `document.location.href`를 공유하는 대신, 페이지의 `<head>`에서 표준 URL `<meta>` 태그를 확인하고 이를 공유합니다. 그러면 사용자 경험이 개선됩니다. 이를 통해 리디렉션을 방지할 뿐만 아니라 공유 URL이 특정 클라이언트에 대해 올바른 사용자 경험을 제공하도록 할 수 있습니다. 예를 들어 친구가 모바일 URL을 공유하고 여러분이 데스크톱 컴퓨터에서 이를 보는 경우 데스크톱 버전이 표시되어야 합니다.
+
+```js
+let url = document.location.href;
+const canonicalElement = document.querySelector('link[rel=canonical]');
+if (canonicalElement !== null) {
+    url = canonicalElement.href;
+}
+navigator.share({url});
+```
+
+### 파일 공유
+
+파일을 공유하려면 먼저 `navigator.canShare()`를 테스트하고 호출합니다. 그런 다음 `navigator.share()` 호출에 파일 배열을 포함시킵니다.
+
+```js/0-5
+if (navigator.canShare && navigator.canShare({ files: filesArray })) {
+  navigator.share({
+    files: filesArray,
+    title: 'Vacation Pictures',
+    text: 'Photos from September 27 to October 14.',
+  })
+  .then(() => console.log('Share was successful.'))
+  .catch((error) => console.log('Sharing failed', error));
+} else {
+  console.log(`Your system doesn't support sharing files.`);
+}
+```
+
+샘플은 `navigator.share()`가 아닌 `navigator.canShare()`를 테스트하여 기능 감지를 처리합니다. `canShare()`로 전달된 데이터 객체는 `files` 속성만 지원합니다. 이미지, 비디오, 오디오 및 텍스트 파일을 공유할 수 있습니다([Chromium에서 허용되는 파일 확장자](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing) 참조). 향후 더 많은 파일 형식이 추가될 수 있습니다.
+
+## Santa Tracker 사례 연구
+
+<figure data-float="right">{% Img src="image/admin/2I5iOXaOpzEJlEbM694n.png", alt="공유 버튼을 표시하는 Santa Tracker 앱.", width="343", height="600" %}<figcaption> Santa Tracker 공유 버튼.</figcaption></figure>
+
+오픈 소스 프로젝트인 [Santa Tracker](https://santatracker.google.com/)는 Google의 휴일 전통입니다. 매년 12월이 되면 게임과 교육적 체험으로 시즌을 기념할 수 있습니다.
+
+2016년에 Santa Tracker 팀은 Android에서 Web Share API를 사용했습니다. 이 API는 모바일에 완벽했습니다. 이전 몇 년 동안 팀은 모바일에서 공유 버튼을 제거했는데, 공간이 무엇보다 중요하고 여러 공유 대상을 둔다는 것을 정당화할 수 없었기 때문입니다.
+
+그러나 Web Share API를 사용하면 버튼 하나를 표시할 수 있어 소중한 픽셀을 절약할 수 있었습니다. 또한 API를 사용하지 않는 사용자보다 Web Share와 공유하는 사용자가 20% 정도 더 많다는 사실을 발견했습니다. Web Share가 실제 작동하는 모습을 보려면 [Santa Tracker](https://santatracker.google.com/)로 이동하세요.
+
+## 브라우저 지원
+
+Web Share API에 대한 브라우저 지원은 미묘한 부분이 있으며 특정 방법이 지원된다고 가정하는 대신 기능 감지(이전 코드 샘플에서 설명한 대로)를 사용하는 것이 좋습니다.
+
+2021년 초부터 API를 사용하여 제목, 텍스트 및 URL을 공유하는 기능이 다음 환경에서 지원됩니다.
+
+- macOS 및 iOS에서 Safari 12 이상
+- Android에서 Chrome 75 이상, ChromeOS 및 Windows에서 89 이상
+
+API를 사용한 파일 공유는 다음 환경에서 지원됩니다.
+
+- macOS 및 iOS에서 Safari 15 이상
+- Android에서 Chrome 75 이상, ChromeOS 및 Windows에서 89 이상
+
+(Edge와 같은 대부분의 Chromium 기반 브라우저는 해당하는 Chrome 버전과 동일하게 이 기능을 지원합니다.)
+
+### API에 대한 지원 표시
+
+Web Share API를 사용할 계획이십니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 힘이 됩니다.
+
+[@ChromiumDev](https://twitter.com/ChromiumDev)으로 해시태그 [`#WebShare`](https://twitter.com/search?q=%23WebShare&src=recent_search_click&f=live)를 포함한 트윗을 보내서 어디에서 어떻게 이 API를 활용하고 있는지 알려주세요.
+
+## 유용한 링크
+
+- [Web Share 데모](https://w3c.github.io/web-share/demos/share-files.html)
+- [Scrapbook PWA](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/README.md#web-share-demo)
diff --git a/src/site/content/ko/blog/webrtc-standard-announcement/index.md b/src/site/content/ko/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..29f028f8033
--- /dev/null
+++ b/src/site/content/ko/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,40 @@
+---
+title: WebRTC는 이제 W3C 및 IETF 표준입니다.
+subhead: |2
+
+  WebRTC의 역사, 아키텍처, 사용 사례 및 미래에 대한 간략한 개요.
+description: |2
+
+  WebRTC의 역사, 아키텍처, 사용 사례 및 미래에 대한 간략한 개요.
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+웹 표준을 정의하는 프로세스는 여러 브라우저에서의 유용성, 일관성 및 호환성을 보장하는 긴 프로세스입니다. 오늘날 [W3C 및 IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en)는 팬데믹 기간 동안 아마도 가장 중요한 표준 중 하나인 WebRTC의 완성을 기념합니다.
+
+{% Aside %} WebRTC를 구현하는 실습을 보려면 [WebRTC를 사용하는 실시간 통신](https://codelabs.developers.google.com/codelabs/webrtc-web) Codelab을 확인하세요. {% endAside %}
+
+## 역사 {: #history }
+
+WebRTC는 브라우저, 모바일 앱 및 데스크톱 앱에 실시간 통신 기능을 제공하는 플랫폼이며 일반적으로 영상 통화에 사용됩니다. 이 플랫폼은 포괄적인 기술 및 표준 세트로 구성됩니다. Google은 브라우저에서 실행할 수 없는 Adobe Flash 및 데스크톱 응용 프로그램의 대안으로 2009년에 WebRTC를 만들려는 아이디어를 시작했습니다. 이전 세대의 브라우저 기반 제품은 라이선스가 부여된 독점 기술을 기반으로 구축되었습니다. 행아웃(Hangouts)을 비롯한 다양한 제품이 이 기술로 구축되었습니다. 그런 다음 Google은 기술 라이선스를 받아 오던 회사를 인수하여 이를 오픈 소스 WebRTC 프로젝트로 사용할 수 있도록 했습니다. 이 코드베이스는 Chrome에 통합되어 있으며 WebRTC를 사용하는 대부분의 애플리케이션에서 사용됩니다. Mozilla, Microsoft, Cisco 및 Ericsson과 같은 다른 브라우저 공급업체 및 업계 리더와 함께 WebRTC의 표준화는 W3C 및 IETF 모두에서 시작되었습니다. 2013년에 Mozilla와 Google은 브라우저 간 영상 통화를 [시연했습니다](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html). 표준의 발전을 통해 많은 아키텍처 논의가 브라우저 간 구현 차이와 호환성 및 상호 운용성 문제로 이어졌습니다. 이러한 불일치의 대부분은 지난 몇 년 동안 표준이 확정되면서 궁극적으로 해결되었습니다. 이제 WebRTC 사양에는 [플랫폼 테스트의 전체 세트](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned) 및 호환성을 해결하는 도구가 함께 제공되며 브라우저는 그에 따라 구현을 크게 조정했습니다. 이로써 웹 개발자가 다양한 브라우저 구현 및 사양 변경에 따라 자신들의 서비스를 지속적으로 채택해야 하는 어려운 시절이 끝났습니다.
+
+## 아키텍처 및 기능 {: #architecture }
+
+[`RTCPeerConnection` API](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection)는 WebRTC 사양의 핵심 부분입니다. `RTCPeerConnection`은 P2P 프로토콜을 사용하여 서로 다른 끝점에 있는 두 애플리케이션이 통신하도록 연결을 처리합니다. `PeerConnection` API는 카메라 및 마이크에 액세스하기 위해 [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia)와, 그리고 화면 콘텐츠 캡처를 위해 [`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia)와 밀접하게 상호작용합니다. WebRTC를 사용하면 `DataChannel`을 통해 오디오 및/또는 동영상 콘텐츠는 물론 임의의 바이너리 데이터가 포함된 스트림을 보내고 받을 수 있습니다. 오디오 및 영상을 처리, 인코딩, 디코딩을 하는 미디어 기능은 모든 WebRTC 구현의 핵심을 제공합니다. WebRTC는 다양한 오디오 코덱을 지원하며 Opus가 가장 많이 사용되고 다재다능합니다. WebRTC 구현은 Google의 무료 VP8 영상 코덱과 영상 처리용 H.264를 모두 지원하는 데 필요합니다. WebRTC 연결은 항상 암호화되며 이는 DTLS 및 SRTP의 두 가지 기존 프로토콜을 통해 이루어집니다. WebRTC는 영상 코덱(VP8, H264), 네트워크 트래버설(ICE), 전송(RTP, SCTP)에서 미디어 설명 프로토콜(SDP)에 이르기까지 기존 표준 및 기술에 크게 의존합니다. 이것은 50개 이상의 RFC와 함께 결부되어 있습니다.
+
+## 사용 사례: 밀리초 단위의 문제인 경우 {: #use-cases }
+
+WebRTC는 원격 수술, 시스템 모니터링, 자율주행차의 원격 제어와 같이 시간이 중요한 애플리케이션과 버퍼링이 불가능한 UDP 기반의 음성 또는 영상 통화에 널리 사용됩니다. Google, Facebook, Cisco, RingCentral 및 Jitsi와 같은 회사의 거의 모든 브라우저 기반 영상 통화 서비스는 WebRTC를 사용합니다. Google Stadia 및 NVIDIA GeForce NOW는 WebRTC를 사용하여 지연을 인지할 수 없을 정도로 빠르게 클라우드에서 웹 브라우저로 게임 플레이 스트림을 가져옵니다.
+
+## 팬데믹은 영상 통화 성능에 초점을 맞춥니다 {: #performance }
+
+지난 1년 동안 브라우저 내에서 영상 통화량의 증가로 Chrome에서의 WebRTC 사용량이 100배 증가했습니다. 영상 통화가 팬데믹 기간 동안 많은 사람들의 삶의 근본적인 부분이 되었음을 인식하고 브라우저 공급업체는 영상 통화가 의존하는 기술을 최적화하기 시작했습니다. 직원들과 학생들이 집에서 일하고 공부하기 시작하면서 영상 회의에서 대규모 회의 및 영상 효과를 요구하는 리소스가 점점 더 보편화됨에 따라 이러한 최적화는 특히 중요했습니다. 작년에 Chrome은 영상 통화에서 최대 30% 이상의 배터리 사용 최적화를 이루었으며, 사용량이 많은 시나리오에서 더 많은 최적화가 제공됩니다. Mozilla, Apple, Microsoft는 모두 팬데믹 기간 동안 WebRTC 구현을 [상당히 개선](https://www.youtube.com/watch?v=YZROn-WsyO4)했으며, 이들은 특히 현재 공식화된 표준을 준수하는지 확인합니다.
+
+## WebRTC의 미래 {: #future }
+
+WebRTC는 이제 W3C 표준으로 완성되었지만 개선은 계속됩니다. [대역폭을 최대 50% 절약](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/)하는 새로운 영상 코덱 AV1이 WebRTC 및 웹 브라우저에서 제공됩니다. 오픈 소스 코드 기반의 지속적인 개선은 지연을 더욱 줄이고 스트리밍할 수 있는 영상의 품질을 향상시킬 것으로 예상됩니다. [WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/)는 새로운 사용 사례를 만드는 보조 API를 만들기 위한 이니셔티브를 수집합니다. 이는 [확장 가능한 영상 코딩](https://www.w3.org/TR/webrtc-svc/)과 같은 기존 기능과 [하위 수준 구성 요소](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md)에 대한 액세스 권한을 부여하는 API와 같은 기존 기능에 대한 추가 제어를 제공하는 기존 API에 대한 확장으로 구성됩니다. 후자는 고성능 사용자 지정 WebAssembly 구성 요소를 통합하여 웹 개발자가 혁신할 수 있는 더 많은 유연성을 제공합니다. 5G 네트워크의 부상과 더 많은 대화형 서비스에 대한 수요로 인해 우리는 내년에 WebRTC를 기반으로 구축되는 서비스가 계속해서 증가할 것으로 기대하고 있습니다.
diff --git a/src/site/content/ko/blog/why-coop-coep/index.md b/src/site/content/ko/blog/why-coop-coep/index.md
new file mode 100644
index 00000000000..d95b0056603
--- /dev/null
+++ b/src/site/content/ko/blog/why-coop-coep/index.md
@@ -0,0 +1,155 @@
+---
+title: 강력한 기능을 위해 "cross-origin isolated"가 필요한 이유
+subhead: "`SharedArrayBuffer`,  `performance.measureUserAgentSpecificMemory()`와 같은 강력한 기능을 사용하기 위해 출처 간 격리와 더 나은 정밀도의 고해상도 타이머가 필요한 이유를 알아봅니다."
+description: 일부 웹 API는 Spectre와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 완화하기 위해 브라우저는 옵트인(opt-in) 기반의 격리 환경인 cross-origin isolated를 제공합니다.`SharedArrayBuffer`,  `performance.measureUserAgentSpecificMemory()`와 같은 강력한 기능을 사용하기 위해 출처 간 격리와 더 나은 정밀도의 고해상도 타이머가 필요한 이유를 알아봅니다.
+authors:
+  - agektmr
+  - domenic
+hero: image/admin/h8g1TQjkfkJSpWJrPakB.jpg
+date: 2020-05-04
+updated: 2021-08-05
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 소개
+
+COOP 및 COEP를 사용하여 [웹사이트를 "cross-origin isolated"로 만들기](/coop-coep/)에서 COOP 및 COEP를 사용하여 "cross-origin isolated" 상태로 채택하는 방법을 설명했습니다. 이것은 브라우저에서 강력한 기능을 활성화하기 위해 출처 간 격리가 필요한 이유를 설명하는 동반 문서입니다.
+
+{% Aside 'key-term' %} 이 문서에서는 유사하게 들리는 많은 용어를 사용합니다. 더 명확하게 하기 위해 먼저 용어들을 정의해 보겠습니다.
+
+- [COEP: 출처 간 임베더 정책](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP: 출처 간 오프너 정책](https://github.com/whatwg/html/pull/5334/files)
+- [CORP: 출처 간 리소스 정책](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS: 출처 간 리소스 공유](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB: 출처 간 읽기 차단](https://www.chromium.org/Home/chromium-security/corb-for-developers) {% endAside %}
+
+## 배경
+
+웹은 [동일 출처 정책](/same-origin-policy/)을 기반으로 구축되었습니다. 문서 및 스크립트가 다른 출처의 리소스와 상호 작용할 수 있는 방법을 제한하는 보안 기능입니다. 이 원칙은 웹사이트가 출처 간 리소스에 액세스할 수 있는 방법을 제한합니다. 예를 들어 `https://a.example`의 문서는 `https://b.example`에 호스팅된 데이터에 액세스할 수 없습니다.
+
+그러나 동일 출처 정책에는 몇 가지 역사적 예외가 있었습니다. 모든 웹사이트는 다음을 수행할 수 있습니다.
+
+- 출처 간 iframe 삽입
+- 이미지 또는 스크립트와 같은 출처 간 리소스 포함
+- DOM 참조로 출처 간 팝업 창 열기
+
+웹을 처음부터 디자인할 수 있다면 이러한 예외는 존재하지 않을 것입니다. 불행히도 웹 커뮤니티가 엄격한 동일 출처 정책의 주요 이점을 깨달았을 때 웹은 이미 이러한 예외에 의존하고 있었습니다.
+
+이러한 느슨한 동일 출처 정책의 보안 부작용은 두 가지 방식으로 패치되었습니다. 한 가지 방법은 서버가 지정된 출처와 리소스를 공유할 수 있도록 하는 목적을 가진 [CORS(Cross Origin Resource Sharing)](https://developer.mozilla.org/docs/Web/HTTP/CORS)라는 새로운 프로토콜을 도입하는 것이었습니다. 다른 방법은 이전 버전과의 호환성을 유지하면서 원본 간 리소스에 대한 직접 스크립트 액세스를 암시적으로 제거하는 것입니다. 이러한 출처 간 리소스를 "불투명한" 리소스라고 합니다. 예를 들어, 이것이 CORS가 이미지에 적용되지 않는 한 `CanvasRenderingContext2D`를 통한 출처 간 이미지의 픽셀 조작이 실패하는 이유입니다.
+
+이러한 모든 정책 결정은 브라우징 컨텍스트 그룹 내에서 발생합니다.
+
+{% Img src="image/admin/z1Gr4mmJMo383dR9FQUk.png", alt="컨텍스트 그룹 탐색", width="800", height="469" %}
+
+오랫동안 CORS와 불투명한 리소스의 조합만으로도 브라우저를 안전하게 만들 수 있었습니다. 때때로 극단적인 경우(예: [JSON 취약점](https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/))가 발견되어 패치가 필요했지만 전반적으로 출처 간 리소스의 원시 바이트에 대한 직접 읽기 액세스를 허용하지 않는 원칙은 성공적이었습니다.
+
+이것은 모두 [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability))로 변경되어 코드와 동일한 브라우징 컨텍스트 그룹에 로드되는 모든 데이터를 잠재적으로 읽을 수 있습니다. 특정 작업에 걸리는 시간을 측정하여 공격자는 CPU 캐시의 내용을 추측할 수 있으며 이를 통해 프로세스 메모리의 내용을 추측할 수 있습니다. 이러한 타이밍 공격은 플랫폼에 존재하는 낮은 세분성 타이머로 가능하지만 명시적(예: `performance.now()`) 및 암시적(예: `SharedArrayBuffer`)과 같은 높은 세분성 타이머로 속도를 높일 수 있습니다. `evil.com`이 출처 간 이미지를 포함하는 경우 Spectre 공격을 사용하여 픽셀 데이터를 읽을 수 있으므로 "불투명성"에 의존하는 보호가 효과가 없습니다.
+
+{% Img src="image/admin/wN636enwMtBrrOfhzEoq.png", alt="Spectr", width="800", height="500" %}
+
+이상적으로는 모든 출처 간 요청은 리소스를 소유한 서버에서 명시적으로 검사해야 합니다. 리소스 소유 서버에서 검사를 제공하지 않으면 데이터가 악의적인 행위자의 탐색 컨텍스트 그룹에 포함되지 않으므로 웹 페이지에서 수행할 수 있는 Spectre 공격의 손이 닿지 않는 곳에 있게 됩니다. 이를 출처 간 격리 상태라고 합니다. 이것이 바로 COOP+COEP에 관한 것입니다.
+
+출처 간 격리 상태에서 요청 사이트는 덜 위험한 것으로 간주되며 `SharedArrayBuffer` , `performance.measureUserAgentSpecificMemory()` 및 Spectre와 같은 공격에 사용할 수 있는 더 나은 정밀도의 [고해상도 타이머](https://www.w3.org/TR/hr-time/)와 같은 강력한 기능을 잠금 해제합니다. 이것은 또한 `document.domain` 수정을 방지합니다.
+
+### 출처 간 임베더 정책 {: #coep }
+
+[COEP(Cross Origin Embedder Policy)](https://wicg.github.io/cross-origin-embedder-policy/)는 CORP 또는 CORS를 사용하여 문서 권한을 명시적으로 부여하지 않는 출처 간 리소스를 문서에서 로드하지 못하도록 합니다. 이 기능을 사용하면 문서에서 이러한 리소스를 로드할 수 없다고 선언할 수 있습니다.
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="COEP 작동 방식", width="800", height="410" %}
+
+이 정책을 활성화하려면 문서에 다음 HTTP 헤더를 추가하세요.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+`require-corp` 키워드는 COEP에 대해 유일하게 허용되는 값입니다. 이렇게 하면 문서가 동일한 출처의 리소스만 로드하거나 다른 출처에서 명시적으로 로드 가능한 것으로 표시된 리소스만 로드할 수 있는 정책이 시행됩니다.
+
+다른 출처에서 리소스를 로드할 수 있으려면 CORS(Cross Origin Resource Sharing) 또는 CORP(Cross Origin Resource Policy)를 지원해야 합니다.
+
+### 출처 간 리소스 공유 {: #cors }
+
+출처 간 리스소가 [출처 간 리소스 공유(CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS)를 지원하는 경우 [`crossorigin` 속성](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)을 사용하여 COEP에 의해 차단되지 않고 이를 웹 페이지에 로드할 수 있습니다.
+
+```html
+<img src="https://third-party.example.com/image.jpg" crossorigin>
+```
+
+예를 들어 이 이미지 리소스가 CORS 헤더와 함께 제공되는 경우 리소스 패치 요청에서 [CORS 모드](https://developer.mozilla.org/docs/Web/API/Request/mode)를 사용하도록 <br>`crossorigin` 속성을 사용합니다. 이것은 또한 CORS 헤더를 설정하지 않는 한 이미지가 로드되는 것을 방지합니다.
+
+`fetch()` 메서드를 통해 출처 간 데이터를 가져올 수 있습니다. 이 메서드는 서버가 [올바른 HTTP 헤더{/a1로} 응답하는 한 특별한 처리가 필요하지 않습니다.](https://developer.mozilla.org/docs/Web/HTTP/CORS#The_HTTP_response_headers)
+
+### 출처 간 리소스 정책 {: #corp }
+
+[CORP(출처 간 리소스 정책)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))는 원래 다른 출처에서 리소스를 로드하지 못하도록 보호하기 위해 옵트인(opt-in)으로 도입되었습니다. COEP의 컨텍스트에서 CORP는 리소스를 로드할 수 있는 사람에 대한 리소스 소유자의 정책을 지정할 수 있습니다.
+
+`Cross-Origin-Resource-Policy` 헤더는 다음과 같은 세 가지 가능한 값을 취합니다.
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+`same-site`로 표시된 리소스는 동일한 사이트에서만 로드할 수 있습니다.
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+`same-origin`로 표시된 리소스는 동일한 출처에서만 로드할 수 있습니다.
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+`cross-origin`로 표시된 리소스는 모든 웹사이트에서 로드할 수 있습니다([이 값](https://mikewest.github.io/corpp/#integration-fetch)은 COEP와 함께 CORP 사양에 추가되었습니다.).
+
+{% Aside %} COEP 헤더를 추가하면 서비스 워커를 사용하여 제한을 우회할 수 없습니다. 문서가 COEP 헤더로 보호되는 경우 응답이 문서 프로세스에 들어가기 전이나 문서를 제어하는 서비스 작업자에 들어가기 전에 정책이 준수됩니다. {% endAside %}
+
+### 출처 간 오프너 정책 {: #coop }
+
+[COOP(Cross Origin Opener Policy)](https://github.com/whatwg/html/pull/5334/files)를 사용하면 최상위 창이 다른 최상위 창과 직접 상호 작용할 수 없도록 다른 문서를 다른 탐색 컨텍스트 그룹에 배치하여 다른 문서와 격리되도록 할 수 있습니다. 예를 들어 COOP가 있는 문서에서 팝업이 열리면 해당 `window.opener` 속성은 `null`입니다. 또한 오프너 참조 `.closed` 속성이 `true`를 반환합니다.
+
+{% Img src="image/admin/eUu74n3GIlK1fj9ACxF8.png", alt="COOP", width="800", height="452" %}
+
+`Cross-Origin-Opener-Policy` 헤더는 다음과 같은 세 가지 가능한 값을 취합니다.
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+`same-origin`으로 표시된 문서는 동일한 검색 컨텍스트 그룹을 명시적으로 `same-origin`으로 표시된 동일 출처 문서와 공유할 수 있습니다.
+
+{% Img src="image/admin/he8FaRE2ef67lamrFG60.png", alt="COOP", width="800", height="507" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+`same-origin-allow-popups`가 있는 최상위 문서는 COOP를 설정하지 않았거나 COOP를 `unsafe-none`로 설정하여 격리를 옵트아웃(opt out)하는 팝업에 대한 참조를 유지합니다.
+
+{% Img src="image/admin/AJdm6vFq4fQXUWOTFeFa.png", alt="COOP", width="800", height="537" %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+`unsafe-none`는 기본값이며 오프너 자체의 COOP가 `same-origin`인 경우가 아니면 문서를 오프너의 탐색 컨텍스트 그룹에 추가할 수 있습니다.
+
+{% Aside %} [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#Window_features) 속성은 오프너 측에서만 작동한다는 점을 제외하고 COOP에서 기대하는 것과 유사한 효과를 가집니다. (제3자가 창을 열면 창의 연결을 해제할 수 없습니다.) `window.open(url, '_blank', 'noopener')` 또는 `<a target="_blank" rel="noopener">`와 같은 작업을 수행하여 `noopener`를 첨부하는 경우에, 열려 있는 창에서 창을 의도적으로 분리할 수 있습니다.
+
+`noopener`는 COOP로 대체될 수 있지만 COOP를 지원하지 않는 브라우저에서 웹사이트를 보호하려는 경우에는 여전히 유용합니다. {% endAside %}
+
+## 요약 {: #summary }
+
+`SharedArrayBuffer` , `performance.measureUserAgentSpecificMemory()` 또는 더 나은 정밀도를 가진 [고해상도 타이머](https://www.w3.org/TR/hr-time/)와 같은 강력한 기능에 대한 액세스를 보장하려면 `require-corp` 값을 포함한 COEP와 `same-origin` 값을 포함한 COOP를 모두 사용해야 한다는 점을 기억하세요. 둘 중 하나가 없으면 브라우저는 이러한 강력한 기능을 안전하게 사용할 수 있도록 충분한 격리를 보장하지 않습니다. [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated)가 `true`를 반환하는지 확인하여 페이지의 상황을 확인할 수 있습니다.
+
+[COOP 및 COEP를 사용하여 웹사이트를 "출처 간 격리"로 만들기](/coop-coep/)에서 이를 구현하는 단계를 알아보세요.
+
+## 리소스
+
+- [COOP 및 COEP 설명](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)
+- [공유 메모리에 대한 계획된 변경 사항 - JavaScript | MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes)
diff --git a/src/site/content/ko/devices/index.md b/src/site/content/ko/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/ko/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/ko/discoverable/index.md b/src/site/content/ko/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/ko/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/ko/explore/explore.11tydata.js b/src/site/content/ko/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/ko/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ko/explore/index.md b/src/site/content/ko/explore/index.md
new file mode 100644
index 00000000000..eea2c3b38de
--- /dev/null
+++ b/src/site/content/ko/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: 탐구하다
+date: 2022-12-10
+---
diff --git a/src/site/content/ko/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/ko/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..369e41302e4
--- /dev/null
+++ b/src/site/content/ko/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: PRPL 패턴으로 즉시 로딩 적용
+authors:
+  - houssein
+description: |2-
+
+  PRPL은 웹 페이지를 더 빠르게 로드하고 상호작용할 수 있도록 만드는 데 사용되는 패턴을 설명하는 약어입니다. 이 가이드에서는 이러한 각 기술을 함께 사용하거나 독립적으로 사용하여 성능을 내는 방법을 배웁니다.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+PRPL은 웹 페이지를 로드하고 대화식으로 더 빠르게 만드는 데 사용되는 패턴을 설명하는 약어입니다.
+
+- 가장 중요한 리소스를 **푸시**(또는 **미리 로드**)합니다.
+- 가능한 한 빨리 초기 경로를 **렌더링**합니다.
+- 나머지 자산을 **미리 캐시**합니다.
+- 다른 경로 및 중요하지 않은 자산을 **지연 로드**합니다.
+
+이 가이드에서는 이러한 각 기술이 함께 잘 사용되거나 독립적으로 사용되어 성능을 낼 수 있는 방법을 알아봅니다.
+
+## Lighthouse로 페이지 감사
+
+Lighthouse를 실행하여 PRPL 기술과 일치하는 개선 기회를 식별합니다.
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. **성능** 및 **프로그레시브 웹 앱** 확인란을 선택합니다.
+2. **감사 실행을** 클릭하여 보고서를 생성합니다.
+
+자세한 내용은 [Lighthouse로 성능 기회 발견](/discover-performance-opportunities-with-lighthouse)을 참조하십시오.
+
+## 중요한 리소스 미리 로드
+
+Lighthouse는 특정 리소스을 분석하고 가져오는 게 늦어지는 경우 다음과 같은 실패한 감사를 표시합니다.
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse: 사전 로드 키 요청 감사", width="745", height="97" %}
+
+[**사전 로드**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content)는 브라우저에 가능한 한 빨리 리소스를 요청하도록 지시하는 선언적 가져오기 요청입니다. HTML 문서의 헤드에 `rel="preload"`를 포함한 `<link>` 태그를 추가하여 중요한 리소스를 미리 로드합니다.
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+`window.onload` 이벤트를 지연시키지 않으면서 더 빨리 다운로드를 시도하기 위해 리소스에 대해 더 적절한 우선 순위 수준을 설정합니다.
+
+중요한 리소스를 미리 로드하는 방법에 대한 자세한 내용은 [중요한 자산 미리 로드](/preload-critical-assets) 가이드를 참조하세요.
+
+## 최대한 빠르게 초기 경로를 렌더링
+
+Lighthouse는 사이트에서 픽셀을 화면에 렌더링하는 순간인 [**FP(First Paint)**](/user-centric-performance-metrics/#important-metrics-to-measure)를 지연시키는 리소스가 있는 경우 경고합니다.
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Lighthouse: 렌더링 차단 리소스 감사 제거", width="800", height="111" %}
+
+FP를 개선하기 위해 Lighthouse는 중요한 JavaScript를 인라인하고 [`async`](/critical-rendering-path-adding-interactivity-with-javascript/)를 사용하여 나머지는 연기할 뿐만 아니라 스크롤 없이 볼 수 있는 부분에서 사용되는 중요한 CSS를 인라인할 것을 권장합니다. 이는 렌더링 차단 자산을 가져오기 위한 서버와의 왕복 통신을 제거함으로써 성능을 향상시킵니다. 그러나 인라인 코드는 개발 관점에서 유지 관리하기가 더 어려우며 브라우저에서 별도로 캐시할 수 없습니다.
+
+FP를 개선하는 또 다른 방법은 페이지의 초기 HTML을 **서버 측에서 렌더링**하는 것입니다.이렇게 하면 스크립트를 계속 가져오고, 구문 분석하고, 실행하는 동안 사용자에게 즉시 콘텐츠가 표시됩니다. 그러나 이렇게 하면 HTML 파일의 페이로드가 크게 증가하여 응용 프로그램이 대화형이 되어 사용자 입력에 응답하는 데 걸리는 시간인 [**상호 작용까지의 시간**](/tti/)이 나빠질 수 있습니다.
+
+응용 프로그램에서 FP를 줄이는 올바른 하나의 해법은 없으며, 응용 프로그램에서 잃는 것보다 얻는 것이 더 큰 경우에만 인라인 스타일과 서버 측 렌더링을 고려해야 합니다. 다음 리소스를 통해 이 두 개념에 대해 자세히 알아볼 수 있습니다.
+
+- [CSS 전달 최적화](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [서버 측 렌더링이란 무엇입니까?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">{% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="서비스 작업자와의 요청/응답", width="800", height="1224" %}</figure>
+
+## 자산 사전 캐시
+
+**서비스 작업자**는 프록시 역할을 하여 반복 방문 시 서버가 아닌 캐시에서 자산을 직접 가져올 수 있습니다. 이렇게 하면 사용자가 오프라인일 때 애플리케이션을 사용할 수 있을 뿐만 아니라 반복 방문 시 페이지 로드 시간이 빨라집니다.
+
+라이브러리에서 제공할 수 있는 것보다 더 복잡한 캐싱 요구 사항이 없는 경우 타사 라이브러리를 사용하여 서비스 작업자 생성 프로세스를 단순화합니다. 예를 들어 [Workbox](/workbox)는 자산을 캐시할 서비스 작업자를 만들고 유지 관리할 수 있는 도구 모음을 제공합니다. 서비스 워커 및 오프라인 안정성에 대한 자세한 내용은 안정성 학습 경로의 [서비스 작업자 가이드](/service-workers-cache-storage)를 참조하세요.
+
+## 지연 로드
+
+Lighthouse는 네트워크를 통해 너무 많은 데이터를 보내면 실패한 감사를 표시합니다.
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse: 막대한 네트워크 페이로드 감사 있음", width="800", height="99" %}
+
+여기에는 모든 자산 유형이 포함되지만 대형 JavaScript 페이로드는 브라우저가 이를 구문 분석하고 컴파일하는 데 걸리는 시간으로 인해 특히 비용이 많이 듭니다. Lighthouse는 적절한 경우 이에 대한 경고도 제공합니다.
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse: JavaScript 부팅 시간 감사", width="797", height="100" %}
+
+사용자가 애플리케이션을 처음 로드할 때 필요한 코드만 포함하는 더 작은 JavaScript 페이로드를 보내려면 요청 시 전체 번들과 [지연 로드](/reduce-javascript-payloads-with-code-splitting) 청크를 분할합니다.
+
+번들을 분할하는 데 성공했다면 더 중요한 청크를 미리 로드하세요([중요 자산 미리 로드](/preload-critical-assets) 가이드 참조). 미리 로드하면 브라우저에서 더 중요한 리소스를 더 빨리 가져와 다운로드할 수 있습니다.
+
+요청에 따라 다양한 JavaScript 청크를 분할하고 로드하는 것 외에도 Lighthouse는 중요하지 않은 이미지를 지연 로드하는 것에 대한 감사도 제공합니다.
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse: 오프스크린 이미지 감사 연기", width="800", height="90" %}
+
+웹 페이지에 많은 이미지를 로드하는 경우 페이지가 로드될 때 스크롤 없이 볼 수 있는 부분 또는 장치 표시 영역 외부에 있는 모든 이미지를 연기합니다([이미지를 지연 로드하기 위해 lazysizes 사용](/use-lazysizes-to-lazyload-images) 참조).
+
+## 다음 단계
+
+이제 PRPL 패턴의 기본 개념 중 일부를 이해했으므로 이 섹션의 다음 가이드를 계속 진행하여 자세히 알아보세요. 모든 기술을 함께 적용할 필요는 없다는 점을 기억하는 것이 중요합니다. 다음 중 하나에 대한 모든 노력은 눈에 띄는 성능 향상을 제공합니다.
+
+- 중요한 리소스를 **푸시**(또는 **미리 로드**)합니다.
+- 가능한 한 빨리 초기 경로를 **렌더링**합니다.
+- 나머지 자산을 **미리 캐시**합니다.
+- 다른 경로 및 중요하지 않은 자산을 **지연 로드**합니다.
diff --git a/src/site/content/ko/fast/avoid-invisible-text/index.md b/src/site/content/ko/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..f01e4475ba2
--- /dev/null
+++ b/src/site/content/ko/fast/avoid-invisible-text/index.md
@@ -0,0 +1,105 @@
+---
+layout: post
+title: 글꼴 로드 중 보이지 않는 텍스트 방지
+authors:
+  - katiehempenius
+description: 글꼴은 로드하는 데 시간이 걸리는 대용량 파일인 경우가 많습니다. 이를 처리하기 위해 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨깁니다("보이지 않는 텍스트의 깜박임(FOIT)". 성능을 최적화하는 경우 "보이지 않는 텍스트의 깜박임(FOIT)"을 피하고 시스템 글꼴을 사용하여 즉시 사용자에게 콘텐츠를 표시하고 싶을 것입니다.
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## 왜 신경을 써야 할까요?
+
+글꼴은 로드하는 데 시간이 걸리는 대용량 파일인 경우가 많습니다. 이를 처리하기 위해 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨깁니다("보이지 않는 텍스트의 깜박임(FOIT)". 성능을 최적화하는 경우 "보이지 않는 텍스트의 깜박임(FOIT)"을 피하고 시스템 글꼴을 사용하여 즉시 사용자에게 콘텐츠를 표시하고 싶을 것입니다("스타일이 지정되지 않은 텍스트의 깜박임(FOUT)").
+
+## 즉시 텍스트 표시
+
+이 가이드에서는 이를 달성하는 두 가지 방법을 설명합니다. 첫 번째 접근 방식은 매우 간단하지만 범용 브라우저의 [지원](https://caniuse.com/#search=font-display)이 없습니다. 두 번째 접근 방식은 더 많은 작업이 필요하지만 전체 브라우저를 지원합니다. 가장 좋은 선택은 실제로 구현하고 유지 관리하는 것입니다.
+
+## 옵션 #1: font-display 사용
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>이전</th>
+        <th>이후</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face { font-family: Helvetica; }</code>
+        </td>
+        <td>
+<code>@font-face { font-family: Helvetica; &lt;strong&gt;font-display: swap;&lt;/strong&gt; }</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display)는 글꼴이 표시되는 방식을 지정하기 위한 API입니다. `swap`은 글꼴을 사용하는 텍스트가 시스템 글꼴을 사용하여 즉시 표시되어야 함을 브라우저에 알립니다. 사용자 정의 글꼴이 준비되면 시스템 글꼴을 대체합니다.
+
+브라우저가 `font-display`를 지원하지 않는 경우 브라우저는 글꼴 로드에 대한 기본 동작을 계속 따릅니다. [여기](https://caniuse.com/#search=font-display)에서 `font-display`를 지원하는 브라우저를 확인하세요.
+
+다음은 일반 브라우저의 기본 글꼴 로드 동작입니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>브라우저</strong></th>
+        <th><strong>글꼴이 준비되지 않은 경우 기본 동작...</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 바꿉니다.</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>최대 3초 동안 텍스트를 숨깁니다. 텍스트가 아직 준비되지 않은 경우 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 바꿉니다.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>최대 3초 동안 텍스트를 숨깁니다. 텍스트가 아직 준비되지 않은 경우 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 바꿉니다.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>글꼴이 준비될 때까지 텍스트를 숨깁니다.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 옵션 #2: 사용자 정의 글꼴이 로드될 때까지 사용을 대기
+
+조금만 더 노력하면 동일한 동작이 모든 브라우저에서 작동하도록 구현할 수 있습니다.
+
+이 접근 방식은 세 부분으로 이루어져 있습니다.
+
+- 초기 페이지 로드 시 사용자 정의 글꼴을 사용하지 않습니다. 이렇게 하면 브라우저가 시스템 글꼴을 사용하여 텍스트를 즉시 표시합니다.
+- 사용자 글꼴이 로드되는 시기를 감지합니다. [FontFaceObserver](https://github.com/bramstein/fontfaceobserver) 라이브러리 덕분에 몇 줄의 JavaScript 코드만으로 이 작업을 수행할 수 있습니다.
+- 사용자 정의 글꼴을 사용하도록 페이지 스타일을 업데이트합니다.
+
+이를 구현하기 위한 예상 변경 사항은 다음과 같습니다.
+
+- 초기 페이지 로드 시 사용자 정의 글꼴을 사용하지 않도록 CSS를 리팩터링합니다.
+- 페이지에 스크립트를 추가합니다. 이 스크립트는 사용자 정의 글꼴이 로드되는 시기를 감지한 후 페이지 스타일을 업데이트합니다.
+
+{% Aside 'codelab' %} [텍스트를 즉시 표시하려면 Font Face Observer를 사용하십시오.](/codelab-avoid-invisible-text) {% endAside %}
+
+## 확인하기
+
+Lighthouse를 실행하여 사이트에서 `font-display: swap`을 사용하여 텍스트를 표시하는지 확인합니다.
+
+{% Instruction 'audit-performance', 'ol' %}
+
+**webfont를 로드하는 동안 텍스트가 보이는 상태를 유지하는지 확인** 감사를 통과하는지 확인합니다.
diff --git a/src/site/content/ko/fast/browser-level-image-lazy-loading/index.md b/src/site/content/ko/fast/browser-level-image-lazy-loading/index.md
new file mode 100644
index 00000000000..e4f9e7e13b2
--- /dev/null
+++ b/src/site/content/ko/fast/browser-level-image-lazy-loading/index.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: 웹용 브라우저 수준 이미지 지연 로딩
+subhead: 지연 로딩이 드디어 기본 제공됩니다!
+authors:
+  - houssein
+  - addyosmani
+  - mathiasbynens
+date: 2019-08-06
+updated: 2020-07-16
+hero: image/admin/F6VE4QkpCsomiJilTFNG.png
+alt: 로딩 이미지와 자산이 있는 전화 개요
+description: 이 게시물은 로딩 속성과 이를 이용해 이미지 로딩을 제어하는 방법을 다룹니다.
+tags:
+  - blog
+  - performance
+feedback:
+  - api
+---
+
+이제 웹에서 지연 로딩 이미지에 대한 브라우저 수준 지원이 제공됩니다! 이 비디오에서는 이 기능의 [데모](https://mathiasbynens.be/demo/img-loading-lazy)를 보여줍니다.
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+Chrome 76 이상에서는 사용자 지정 지연 로딩 코드를 작성하거나 별도의 JavaScript 라이브러리를 사용할 필요 없이 `loading` 속성을 사용하여 이미지를 지연 로딩할 수 있습니다.
+
+## 브라우저 호환성
+
+`<img loading=lazy>`는 가장 널리 사용되는 Chromium 기반 브라우저(Chrome, Edge, Opera) 및 [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/75#HTML)에서 지원됩니다. WebKit(Safari) 구현은 [진행 중](https://bugs.webkit.org/show_bug.cgi?id=200764)입니다. [caniuse.com](https://caniuse.com/#feat=loading-lazy-attr)에서 브라우저 간 지원에 대한 자세한 정보를 제공합니다. `loading` 속성을 지원하지 않는 브라우저는 부정적인 영향 없이 이 속성을 간단히 무시합니다.
+
+## 브라우저 수준의 지연 로딩이 필요한 이유는 무엇입니까?
+
+[HTTPArchive](https://httparchive.org/reports/page-weight)에 따르면 이미지는 대부분의 웹사이트에서 가장 많이 요청되는 자산 유형이며 일반적으로 다른 리소스보다 더 많은 대역폭을 차지합니다. 90번째 백분위수에서 사이트는 데스크톱 및 모바일에서 약 4.7MB의 이미지를 보냅니다. [고양이 사진](https://en.wikipedia.org/wiki/Cats_and_the_Internet)이 많네요.
+
+현재 오프스크린 이미지 로드를 지연시키는 방법에는 두 가지가 있습니다.
+
+- [Intersection Observer API](https://developer.chrome.com/blog/intersectionobserver/) 사용
+- `scroll`, `resize` 또는 `orientationchange` [이벤트 핸들러](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way) 사용
+
+어느 옵션이든 개발자는 지연 로딩 기능을 포함할 수 있으며 많은 개발자들이 사용하기 훨씬 쉬운 추상화를 제공하기 위해 타사 라이브러리를 구축했습니다. 그러나 브라우저에서 직접 지원하는 지연 로딩을 사용하면 외부 라이브러리가 필요하지 않습니다. 또한 브라우저 수준의 지연 로딩을 사용하면 클라이언트에서 JavaScript가 비활성화된 경우에도 지연된 이미지 로딩이 계속해서 작동합니다.
+
+## `loading` 속성
+
+현재 Chrome에서는 이미 장치 뷰포트와의 상대적인 위치에 따라 서로 다른 우선 순위를 두고 이미지를 로드합니다. 뷰포트 아래의 이미지는 더 낮은 우선 순위로 로드되지만 여전히 가능한 한 빨리 가져옵니다.
+
+Chrome 76 이상에서는 `loading` 속성을 사용하여 스크롤로 도달할 수 있는 오프스크린 이미지의 로딩을 완전히 지연시킬 수 있습니다.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+다음은 `loading` 속성에 대해 지원되는 값입니다.
+
+- `auto`: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작입니다.
+- `lazy`: 뷰포트로부터 [계산된 거리](#distance-from-viewport-thresholds)에 도달할 때까지 리소스 로딩을 지연시킵니다.
+- `eager`: 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다.
+
+{% Aside 'caution' %} Chromium에서 사용할 수 있지만 `auto` 값은 [사양](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes)에 언급되어 있지 않습니다. 변경될 수도 있으므로 포함될 때까지 이 값은 사용하지 않는 것이 좋습니다. {% endAside %}
+
+### 뷰포트로부터 거리 임계값
+
+스크롤 없이 바로 볼 수 있는 폴드 위의 모든 이미지는 정상적으로 로드됩니다. 장치 뷰포트보다 훨씬 아래에 있는 이미지는 사용자가 근처까지 스크롤할 때만 가져옵니다.
+
+Chromium에서 구현된 지연 로딩은 사용자가 근처까지 스크롤하면 로딩이 끝날 수 있도록 오프스크린 이미지가 충분히 조기에 로드되도록 합니다. 뷰포트에 표시되기 전에 가까운 이미지를 가져오면 표시될 시점에는 이미 로딩을 마칠 가능성이 최대화됩니다.
+
+JavaScript 지연 로딩 라이브러리와 비교하여 보기 내로 스크롤되는 이미지를 가져오기 위한 임계값은 보수적인 것으로 여겨질 수 있습니다. Chromium은 이러한 임계값을 개발자 기대치에 더 잘 맞추는 방법을 찾고 있습니다.
+
+{% Aside %} Android에서 Chrome을 사용하여 수행한 실험에 따르면 4G에서 지연 로드된 폴드 아래 이미지의 97.5%가 표시 화면에 들어오고 10ms 내에 완전히 로딩되었습니다. 느린 2G 네트워크에서도 폴드 아래 이미지의 92.6%가 10ms 이내에 완전히 로드되었습니다. 이는 브라우저 수준의 지연 로딩이 보기 내로 스크롤되는 요소의 가시성과 관련하여 안정적인 경험을 제공함을 의미합니다. {% endAside %}
+
+거리 임계값은 고정되어 있지 않으며 여러 요인에 따라 다릅니다.
+
+- 가져오는 이미지 리소스의 유형
+- Android용 Chrome에서 [Lite 모드](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) 사용 여부
+- [효과적인 연결 유형](https://googlechrome.github.io/samples/network-information/)
+
+[Chromium 소스](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad)에서 다양한 유효 연결 유형에 대한 기본값을 찾을 수 있습니다. 이러한 수치, 그리고 뷰포트로부터 특정 거리에 도달한 경우에만 가져오는 접근 방식은 가까운 장래에 변경될 수 있습니다. Chrome 팀이 로딩 시작 시점을 결정하기 위한 휴리스틱을 개선하고 있기 때문입니다.
+
+{% Aside %} Chrome 77 이상에서는 DevTools에서 [네트워크를 스로틀링](https://developer.chrome.com/docs/devtools/network/#throttle)하여 이러한 다양한 임계값을 실험할 수 있습니다. 한편으로, `about://flags/#force-effective-connection-type` 플래그를 사용하여 브라우저의 유효 연결 유형을 재정의해야 합니다. {% endAside %}
+
+## 향상된 데이터 절약 및 뷰포트로부터 거리 임계값
+
+2020년 7월 기준, Chrome은 개발자 기대치를 더 잘 충족할 수 있도록 이미지 지연 로딩에 대한 뷰포트로부터의 거리 임계값을 조정하는 부분에서 큰 개선을 이루었습니다.
+
+고속 연결(예: 4G)에서는 Chrome에서 뷰포트로부터의 거리 임계값을 `3000px`에서 `1250px`로 줄였으며, 저속 연결(예: 3G)에는 임계값을 `4000px`에서 `2500px`로 줄였습니다. 이러한 변화로 두 가지 긍정적 효과가 나타납니다.
+
+- `<img loading=lazy>`가 JavaScript 지연 로딩 라이브러리가 제공하는 경험에 더 가깝게 작동합니다.
+- 새로운 뷰포트로부터 거리 임계값에서도 사용자가 이미지까지 스크롤하는 시점에 이미지가 로드되도록 보장할 수 있습니다.
+
+아래의 고속 연결(4G)에 대한 데모 중 하나에서 뷰포트까지의 거리 임계값을 이전과 이후로 나누어 비교한 결과를 볼 수 있습니다.
+
+이전 임계값과 새 임계값 비교:
+
+<figure>   {% Img src="image/admin/xSZMqpbioBRwRTnenK8f.png", alt="이미지 지연 로딩에 대해 새롭게 향상된 임계값으로 뷰포트로부터 거리 임계값을 3000px에서 1250px로 줄여 연결 속도 개선", width="800", height="460" %}</figure>
+
+그리고 새로운 임계값 대 지연 크기(주요 JS 지연 로딩 라이브러리):
+
+<figure>   {% Img src="image/admin/oHMFvflk9aesT7r0iJbx.png", alt="동일한 네트워크 조건에서 70KB로 로드되는 LazySizes와 비교하여 90KB의 이미지를 로드하는 Chrome의 새로운 뷰포트로부터의 거리 임계값", width="800", height="355" %}</figure>
+
+{% Aside %} 최신 버전의 Chrome 사용자도 새로운 임계값의 이점을 누릴 수 있도록 Chrome 79 - 85에서도 사용할 수 있도록 이러한 변경 사항을 백포트했습니다. 이전 버전과 최신 버전의 Chrome에서 데이터 절약을 비교하려는 경우 이 점을 염두에 두십시오. {% endAside %}
+
+각 브라우저에서 뷰포트로부터의 거리 임계값 접근 방식이 더 개선된 방식으로 정착되도록 웹 표준 커뮤니티에서 활동 노력을 기울이고 있습니다.
+
+### 이미지에는 차원 속성이 포함되어야 합니다
+
+브라우저가 이미지를 로드하는 동안 명시적으로 지정되지 않는 한 이미지의 크기를 즉시 알 수 없습니다. 브라우저가 페이지에서 이미지를 위한 충분한 공간을 확보할 수 있도록 하려면 모든 `<img>` 태그에 `width` 및 `height` 속성이 모두 포함되는 것이 좋습니다. 지정된 치수가 없으면 로드하는 데 시간이 걸리는 페이지에서 더 확연하게 [레이아웃 이동](/cls)이 발생할 수 있습니다.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+또는 인라인 스타일에서 직접 값을 지정합니다.
+
+```html
+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+```
+
+치수 설정의 모범 사례는 지연 로드 여부에 관계없이 `<img>` 태그에 적용됩니다. 지연 로딩을 사용하면 관련성이 더 높아질 수 있습니다. 최신 브라우저에서 이미지의 `width` 및 `height`를 설정하면 브라우저가 고유한 크기를 유추할 수도 있습니다.
+
+대부분의 시나리오에서 치수가 포함되지 않은 경우 이미지는 여전히 지연 로드되지만 몇 가지 예외적인 경우를 알고 있어야 합니다. `width`와 `height`가 지정되지 않으면 이미지 크기는 처음에 0×0픽셀입니다. 이러한 이미지 갤러리가 있는 경우 브라우저는 처음에 모두가 뷰포트에 맞는다고 결론내릴 수 있습니다. 각각이 실제로 공간을 차지하지 않고 오프스크린에 이미지가 푸시되지 않기 때문입니다. 이 경우 브라우저는 모든 항목이 사용자에게 표시된다고 결정하고 모든 항목을 로드하기로 결정합니다.
+
+또한 [이미지 크기를 지정하면 레이아웃 변경이 발생할 가능성이 줄어듭니다](https://www.youtube.com/watch?v=4-d_SoCHeWE). 이미지의 크기를 포함할 수 없는 경우 지연 로드는 네트워크 리소스 절약과 잠재적으로 레이아웃 변경의 위험이 더 커지는 것 사이에서 절충일 수 있습니다.
+
+Chromium의 지연 로드는 이미지가 표시되면 로드될 가능성이 있는 방식으로 구현되지만 로드되지 않을 가능성이 아직 작게나마 남아 남아있습니다. 이 경우 이러한 이미지에 `width` 및 `height` 속성이 없으면 누적 레이아웃 이동에 대한 영향이 증가합니다.
+
+{% Aside %} 이 [데모](https://mathiasbynens.be/demo/img-loading-lazy)를 보고 `loading` 속성이 100장의 사진에 대해 어떻게 작동하는지 살펴보세요. {% endAside %}
+
+`<picture>` 요소를 사용하여 정의된 이미지도 지연 로드될 수 있습니다.
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
+  <img src="photo.jpg" loading="lazy">
+</picture>
+```
+
+브라우저가 `<source>` 요소에서 로드할 이미지를 결정하지만 `loading` 속성은 대체 `<img>` 요소에만 포함시키면 됩니다.
+
+## 처음 표시되는 뷰포트에 있는 이미지의 지연 로딩 방지하기
+
+처음 표시되는 뷰포트에 있는 이미지에 대해 `loading=lazy` 설정을 피해야 합니다.
+
+가능하면 접힌 부분 아래에 있는 이미지에만 `loading=lazy`를 추가하는 것이 좋습니다. 즉각적으로 로드된 이미지는 바로 가져올 수 있지만, 지연되어 로드된 이미지에 대해서는 브라우저가 IntersectionObserver 사용 가능 여부에 따라 결정되는 이미지의 페이지 위치에 대해 알 때까지 기다려야 합니다.
+
+{% Aside %} Chromium에서 `loading=lazy`로 표시된 초기 뷰포트의 이미지가 최대 콘텐츠풀 페인트에 미치는 영향은 매우 작습니다. 즉시 로드된 이미지와 비교하여 75 및 99번째 백분위수에서 1% 미만의 회귀를 갖습니다. {% endAside %}
+
+일반적으로, 뷰포트 내의 모든 이미지는 브라우저의 기본값을 사용하여 빠르게 로드되어야 합니다. 뷰포트 내 이미지의 경우 이를 위해 `loading=eager`를 지정할 필요가 없습니다.
+
+```html
+<!-- visible in the viewport -->
+<img src="product-1.jpg" alt="..." width="200" height="200">
+<img src="product-2.jpg" alt="..." width="200" height="200">
+<img src="product-3.jpg" alt="..." width="200" height="200">
+
+<!-- offscreen images -->
+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
+```
+
+## 단계적 저하
+
+아직 `loading` 속성을 지원하지 않는 브라우저는 그 존재를 무시합니다. 물론 이러한 브라우저는 지연 로딩의 이점을 얻지 못하지만 속성을 포함한다고 해서 브라우저에 부정적인 영향은 없습니다.
+
+## 자주하는 질문
+
+### Chrome에서 이미지를 자동으로 지연 로드할 계획이 있습니까?
+
+Chromium은 Android용 Chrome에서 [Lite 모드](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html)가 활성화된 경우 지연되기에 적합한 이미지를 이미 자동으로 지연 로드합니다. 이것은 주로 데이터 절약에 대해 의식하는 사용자를 대상으로 합니다.
+
+### 로드가 트리거되기 전에 이미지가 얼마나 가까워야 하는지 변경할 수 있습니까?
+
+이러한 값은 하드코딩되어 있으며 API를 통해 변경할 수 없습니다. 그러나 브라우저가 다양한 임계 거리와 변수로 시도됨에 따라 향후 변경될 수 있습니다.
+
+### CSS 배경 이미지가 `loading` 속성을 이용할 수 있습니까?
+
+아니요, 현재 `<img>` 태그로만 사용할 수 있습니다.
+
+### 장치 뷰포트 내에 있는 지연 로딩 이미지의 단점이 있습니까?
+
+Chrome은 사전 로드 스캐너에서 `loading=lazy` 이미지를 사전 로드하지 않으므로 폴드 위 이미지에 `loading=lazy`를 놓지 않는 것이 더 안전합니다.
+
+### `loading` 속성은 뷰포트에 있지만 즉시 보이지 않는 이미지에서 어떻게 작동합니까(예: 캐러셀 뒤에 있거나 특정 화면 크기의 경우 CSS에 의해 숨겨짐)?
+
+[계산된 거리](#distance-from-viewport-thresholds)만큼 장치 뷰포트 아래에 있는 이미지만 느리게 로드됩니다. 뷰포트 위의 모든 이미지는 즉시 표시되는지 여부에 관계없이 정상적으로 로드됩니다.
+
+### 이미 타사 라이브러리나 스크립트를 사용하여 이미지를 지연 로드하고 있는 경우에는 어떻게 합니까?
+
+`loading` 속성은 현재 어떤 방식으로든 자산을 지연 로드하는 코드에 영향을 주지 않지만 고려해야 할 몇 가지 중요한 사항이 있습니다.
+
+1. 사용자 지정 지연 로더가 이미지 또는 프레임을 Chrome이 정상적으로 로드할 때보다 더 빨리(즉, [뷰포트로부터 거리 임계값](#distance-from-viewport-thresholds)보다 큰 거리에서) 로드하려고 하는 경우, 여전히 지연되고 정상적인 브라우저 동작을 기반으로 로드됩니다.
+2. 사용자 지정 지연 로더가 브라우저보다 특정 이미지를 로드할 시기를 결정하기 위해 더 짧은 거리를 사용하는 경우 동작은 사용자 지정 설정을 따릅니다.
+
+`loading="lazy"`와 함께 타사 라이브러리를 계속 사용해야 하는 중요한 이유 중 하나는 아직 이 속성을 지원하지 않는 브라우저에 폴리필을 제공하려는 것입니다.
+
+### 아직 지연 로딩을 지원하지 않는 브라우저는 어떻게 처리합니까?
+
+폴리필을 만들거나 타사 라이브러리를 사용하여 사이트에서 이미지를 지연 로드하세요. `loading` 속성을 사용하여 브라우저에서 기능이 지원되는지 확인할 수 있습니다.
+
+```js
+if ('loading' in HTMLImageElement.prototype) {
+  // supported in browser
+} else {
+  // fetch polyfill/third-party library
+}
+```
+
+예를 들어, [lazysizes](https://github.com/aFarkas/lazysizes)는 널리 사용되는 JavaScript 지연 로딩 라이브러리입니다. `loading`이 지원되지 않는 경우에만 지연 크기를 대체 라이브러리로 로드하는 `loading` 속성에 대한 지원을 감지할 수 있습니다. 이것은 다음과 같이 작동합니다.
+
+- 지원되지 않는 브라우저에서 즉시 로드를 방지하려면 `<img src>`를 `<img data-src>` `loading`로 대체합니다. `loading` 속성이 지원되는 경우 `data-src`를 `src`로 바꿉니다.
+- `loading`가 지원되지 않는 경우 대체(lazysizes)를 로드하고 시작합니다. lazysize 문서에 따라 `lazyload` 클래스를 지연 로드할 이미지를 lazysize에 표시하는 방법으로 사용합니다.
+
+```html
+<!-- Let's load this in-viewport image normally -->
+<img src="hero.jpg" alt="…">
+
+<!-- Let's lazy-load the rest of these images -->
+<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
+
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+</script>
+```
+
+다음은 이 패턴의 [데모](https://lazy-loading.firebaseapp.com/lazy_loading_lib.html)입니다. Firefox 또는 Safari와 같은 브라우저에서 시도하여 대체 동작을 확인하세요.
+
+{% Aside %} lazysizes 라이브러리는 사용 가능한 경우 브라우저 수준의 지연 로드를 사용하지만 필요할 때 라이브러리의 사용자 정의 기능으로 대체하는 [로딩 플러그인](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading)도 제공합니다. {% endAside %}
+
+### iframe에 대한 지연 로딩도 Chrome에서 지원됩니까?
+
+`<iframe loading=lazy>`는 최근에 표준화되었으며 이미 Chromium에서 구현되었습니다. 이를 통해 `loading` 속성을 사용하여 iframe을 지연 로드할 수 있습니다. iframe 지연 로딩에 대한 전용 문서가 곧 web.dev에 게시될 예정입니다.
+
+`loading` 속성은 iframe이 숨겨져 있는지 여부에 따라 이미지와 다르게 iframe에 영향을 줍니다. (숨겨진 iframe은 종종 분석 또는 커뮤니케이션 목적으로 사용됩니다.) Chrome은 다음 기준을 사용하여 iframe이 숨겨져 있는지 여부를 결정합니다.
+
+- iframe의 너비와 높이가 4픽셀 이하입니다.
+- `display: none` 또는 `visibility: hidden`이 적용되었습니다.
+- iframe이 음의 X 또는 Y 위치 지정을 사용하여 스크린 외부에 배치됩니다.
+
+iframe이 이러한 조건 중 하나라도 충족하면 Chrome은 이를 숨겨진 것으로 간주하고 대부분의 경우 지연 로드하지 않습니다. 숨겨지지 *않은* Iframe은 [뷰포트로부터 거리 임계값](#distance-from-viewport-thresholds) 내에 있는 경우에만 로드됩니다. 아직 가져오고 있는 지연 로드된 iframe에 대해서는 자리 표시자가 표시됩니다.
+
+### 브라우저 수준의 지연 로딩은 웹 페이지의 광고에 어떤 영향을 줍니까?
+
+이미지 또는 iframe의 형태로 사용자에게 표시되는 모든 광고는 다른 이미지 또는 iframe과 마찬가지로 지연 로드됩니다.
+
+### 웹 페이지가 인쇄될 때 이미지는 어떻게 처리됩니까?
+
+이 기능은 현재 Chrome에 없지만 페이지가 인쇄되면 모든 이미지와 iframe이 즉시 로드되도록 해야 하는 [미해결 문제](https://bugs.chromium.org/p/chromium/issues/detail?id=875403)가 있습니다.
+
+### Lighthouse는 브라우저 수준의 지연 로딩을 인식합니까?
+
+Lighthouse의 이전 버전은 여전히 이미지에서 `loading=lazy`를 사용하는 페이지에 오프스크린 이미지를 로드하기 위한 전략이 필요하다는 점을 강조하여 나타냅니다. [Lighthouse 6.0](/lighthouse-whats-new-6.0/) 이상은 서로 다른 임계값을 사용하여 [오프스크린 이미지 연기](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/) 감사를 통과할 수 있도록 하는 오프 스크린 이미지 지연 로드 접근 방식을 고려합니다.
+
+## 결론
+
+이미지 지연 로딩을 지원하면 웹 페이지의 성능을 훨씬 쉽게 개선할 수 있습니다.
+
+Chrome에서 이 기능을 사용했을 때 비정상적인 동작이 감지되었습니까? [버그를 신고](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C)하세요!
diff --git a/src/site/content/ko/fast/choose-the-right-image-format/index.md b/src/site/content/ko/fast/choose-the-right-image-format/index.md
new file mode 100644
index 00000000000..b0c2afe9701
--- /dev/null
+++ b/src/site/content/ko/fast/choose-the-right-image-format/index.md
@@ -0,0 +1,134 @@
+---
+layout: post
+title: 올바른 이미지 형식 선택
+authors:
+  - ilyagrigorik
+description: |2
+
+  올바른 이미지 형식을 선택하는 것은 웹사이트에 최적화된 이미지를 제공하는 첫 번째 단계입니다. 이 게시물은 올바른 선택을 하는 데 도움이 됩니다.
+date: 2018-08-30
+updated: 2020-06-18
+tags:
+  - performance
+  - images
+---
+
+가장 먼저 자문해야 할 질문은 이미지가 실제로 원하는 효과를 얻기 위해 필요한지 여부입니다. 좋은 디자인은 단순하고 항상 최고의 성능을 제공합니다. 페이지의 HTML, CSS, JavaScript 및 기타 자산에 비해 많은 바이트를 필요로 하는 이미지 리소스를 제거할 수 있다면 이것이 항상 최상의 최적화 전략입니다. 즉, 잘 배치된 이미지는 천 마디 말보다 더 많은 정보를 전달할 수 있으므로 균형을 찾는 것은 사용자에게 달려 있습니다.
+
+다음으로 원하는 결과를 제공할 수 있지만 보다 효율적인 방식으로 대체 기술이 있는지 고려해야 합니다.
+
+- **CSS 효과** (예: 그림자 또는 그라디언트) 및 CSS 애니메이션을 사용하여 모든 해상도 및 확대/축소 수준에서 종종 이미지 파일에 필요한 바이트의 일부만 사용하더라도 항상 선명하게 보이는 해상도 독립적인 자산을 생성할 수 있습니다.
+- **웹 글꼴을** 사용하면 텍스트를 선택, 검색 및 크기 조정하는 기능을 유지하면서 아름다운 서체를 사용할 수 있으므로 사용성이 크게 향상됩니다.
+
+이미지 자산에서 텍스트를 인코딩하는 자신을 발견했다면 중지하고 재고하십시오. 훌륭한 타이포그래피는 좋은 디자인, 브랜딩 및 가독성에 매우 중요하지만 이미지 내 텍스트는 좋지 않은 사용자 경험을 제공합니다. 웹 글꼴을 사용하려면 [자체 최적화 세트](https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/)가 필요하지만 이러한 모든 문제를 해결하고 항상 텍스트를 표시하는 데 더 나은 선택입니다.
+
+## 올바른 이미지 형식 선택
+
+이미지가 올바른 옵션이라고 확신하는 경우 작업에 적합한 이미지 종류를 신중하게 선택해야 합니다.
+
+<figure>{% Img src="image/admin/dJuB2DQcbhtwD5VdPVlR.png", alt="확대된 벡터 및 래스터 이미지", width="585", height="313" %} <figcaption>확대된 벡터 이미지(L) 래스터 이미지(R)</figcaption></figure>
+
+- [벡터 그래픽](https://en.wikipedia.org/wiki/Vector_graphics)은 선, 점 및 다각형을 사용하여 이미지를 나타냅니다.
+- [래스터 그래픽](https://en.wikipedia.org/wiki/Raster_graphics)은 직사각형 격자 내에서 각 픽셀의 개별 값을 인코딩하여 이미지를 나타냅니다.
+
+각 형식에는 고유한 장단점이 있습니다. 벡터 형식은 로고, 텍스트 또는 아이콘과 같은 단순한 기하학적 모양으로 구성된 이미지에 이상적입니다. 모든 해상도와 확대/축소 설정에서 선명한 결과를 제공하므로 다양한 크기로 표시해야 하는 자산 및 고해상도 화면에 이상적인 형식입니다.
+
+그러나 장면이 복잡한 경우(예: 사진) 벡터 형식이 부족합니다. 모든 모양을 설명하기 위한 SVG 마크업의 양이 엄청나게 많을 수 있고 출력이 여전히 "사실적"으로 보이지 않을 수 있습니다. 이 경우 PNG, JPEG 또는 WebP와 같은 래스터 이미지 형식을 사용해야 합니다.
+
+래스터 이미지는 해상도나 확대/축소에 독립적이라는 좋은 속성을 갖고 있지 않습니다. 래스터 이미지를 확대하면 들쭉날쭉하고 흐릿한 그래픽이 표시됩니다. 결과적으로 사용자에게 최적의 경험을 제공하기 위해 여러 버전의 래스터 이미지를 다양한 해상도로 저장해야 할 수 있습니다.
+
+## 고해상도 화면의 의미
+
+픽셀에는 CSS 픽셀과 장치 픽셀의 두 가지 종류가 있습니다. 단일 CSS 픽셀은 단일 장치 픽셀에 직접 대응하거나 여러 장치 픽셀로 뒷받침될 수 있습니다. 점은 무엇인가? 장치 픽셀이 많을수록 화면에 표시되는 콘텐츠의 세부 사항이 더 미세해집니다.
+
+<figure>{% Img src="image/admin/oQV7qJ9fUMkYsKlUMrL4.png", alt="CSS 픽셀과 기기 픽셀의 차이를 보여주는 세 개의 이미지.", width="470", height="205" %}<figcaption> CSS 픽셀과 장치 픽셀의 차이입니다.</figcaption></figure>
+
+높은 DPI(HiDPI) 화면은 아름다운 결과를 제공하지만 한 가지 분명한 절충안이 있습니다. 이미지 자산은 더 많은 장치 픽셀 수를 활용하기 위해 더 많은 세부 정보가 필요합니다. 좋은 소식은 벡터 이미지가 이 작업에 이상적으로 적합하다는 것입니다. 어떤 해상도에서도 선명한 결과로 렌더링할 수 있기 때문입니다. 더 미세한 디테일을 렌더링하려면 더 높은 처리 비용이 발생할 수 있지만 기본 자산은 동일하고 해상도에 독립적입니다. .
+
+반면에 래스터 이미지는 픽셀 단위로 이미지 데이터를 인코딩하기 때문에 훨씬 더 큰 문제를 야기합니다. 따라서 픽셀 수가 많을수록 래스터 이미지의 파일 크기가 커집니다. 예를 들어 100x100(CSS) 픽셀로 표시되는 사진 자산의 차이점을 살펴보겠습니다.
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>화면 해상도</th>
+    <th>총 픽셀</th>
+    <th>압축되지 않은 파일 크기(픽셀당 4바이트)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="resolution">1배</td>
+  <td data-th="total pixels">100 x 100 = 10,000</td>
+  <td data-th="filesize">40,000바이트</td>
+</tr>
+<tr>
+  <td data-th="resolution">2배</td>
+  <td data-th="total pixels">100 x 100 x 4 = 40,000</td>
+  <td data-th="filesize">160,000바이트</td>
+</tr>
+<tr>
+  <td data-th="resolution">3배</td>
+  <td data-th="total pixels">100 x 100 x 9 = 90,000</td>
+  <td data-th="filesize">360,000바이트</td>
+</tr>
+</tbody>
+</table></div>
+
+실제 화면의 해상도를 두 배로 늘리면 총 픽셀 수가 4배 증가합니다. 가로 픽셀 수는 두 배, 세로 픽셀 수는 두 배입니다. 따라서 "2x" 화면은 필요한 픽셀 수를 두 배로 늘릴 뿐만 아니라 네 배로 늘립니다!
+
+그렇다면 이것이 실제로 의미하는 바는 무엇입니까? 고해상도 화면을 통해 아름다운 이미지를 전달할 수 있으며 이는 훌륭한 제품 기능이 될 수 있습니다. 그러나 고해상도 화면에는 고해상도 이미지도 필요하므로 다음을 수행합니다.
+
+- 벡터 이미지는 해상도와 무관하고 항상 선명한 결과를 제공하므로 가능한 한 선호합니다.
+- 래스터 이미지가 필요한 경우 [반응형 이미지](/serve-responsive-images/)를 제공합니다.
+
+## 다양한 래스터 이미지 형식의 기능
+
+다양한 손실 및 무손실 압축 알고리즘 외에도 다양한 이미지 형식은 애니메이션 및 투명도(알파) 채널과 같은 다양한 기능을 지원합니다. 결과적으로 특정 이미지에 대한 "올바른 형식"의 선택은 원하는 시각적 결과와 기능적 요구 사항의 조합입니다.
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>체재</th>
+    <th>투명도</th>
+    <th>생기</th>
+    <th>브라우저</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></td>
+  <td data-th="transparency">예</td>
+  <td data-th="animation">아니요</td>
+  <td data-th="browser">모두</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></td>
+  <td data-th="transparency">아니요</td>
+  <td data-th="animation">아니요</td>
+  <td data-th="browser">모두</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/WebP">웹피</a></td>
+  <td data-th="transparency">예</td>
+  <td data-th="animation">예</td>
+  <td data-th="browser">모든 최신 브라우저. <a href="https://caniuse.com/#feat=webp">사용할 수 있습니까?</a>를 참조하십시오.</td>
+</tr>
+</tbody>
+</table></div>
+
+보편적으로 지원되는 두 가지 래스터 이미지 형식(PNG 및 JPEG)이 있습니다. 이러한 형식 외에도 최신 브라우저는 더 나은 전체 압축과 더 많은 기능을 제공하는 최신 형식의 WebP를 지원합니다. 그렇다면 어떤 형식을 사용해야 할까요?
+
+WebP 형식은 일반적으로 이전 형식보다 더 나은 압축을 제공하며 가능한 경우 사용해야 합니다. WebP를 다른 이미지 형식과 함께 폴백으로 사용할 수 있습니다. 자세한 내용은 [WebP 이미지 사용](/serve-images-webp/)을 참조하십시오.
+
+이전 이미지 형식과 관련하여 다음을 고려하십시오.
+
+1. **애니메이션이 필요하십니까? `<video>` 요소를 사용하세요.**
+    - GIF는 어떻습니까? GIF는 색상표를 최대 256색으로 제한하고 `<video>` 요소보다 훨씬 더 큰 파일 크기를 만듭니다. [애니메이션 GIF를 비디오로 교체](/replace-gifs-with-videos/)를 참조하십시오.
+2. **최고의 해상도로 미세한 디테일을 보존해야 합니까? PNG를 사용하십시오.**
+    - PNG는 색상 팔레트 크기 선택 외에 손실 압축 알고리즘을 적용하지 않습니다. 결과적으로 최고 품질의 이미지를 생성하지만 다른 형식보다 파일 크기가 훨씬 더 커집니다. 신중하게 사용하세요.
+    - 이미지 자산에 기하학적 모양으로 구성된 이미지가 포함된 경우 벡터(SVG) 형식으로 변환하는 것이 좋습니다!
+    - 이미지 자산에 텍스트가 포함된 경우 중지하고 재고하십시오. 이미지의 텍스트는 선택, 검색 또는 "확대/축소"가 불가능합니다. 브랜딩 또는 기타 이유로 사용자 정의 모양을 전달해야 하는 경우 웹 글꼴을 대신 사용하십시오.
+3. **사진, 스크린샷 또는 유사한 이미지 자산을 최적화하고 있습니까? JPEG를 사용하십시오.**
+    - JPEG는 손실 및 무손실 최적화의 조합을 사용하여 이미지 자산의 파일 크기를 줄입니다. 자산에 대한 최상의 품질 대 파일 크기 절충점을 찾기 위해 여러 JPEG 품질 수준을 시도합니다.
+
+마지막으로 WebView를 사용하여 플랫폼별 애플리케이션에서 콘텐츠를 렌더링하는 경우 클라이언트를 완전히 제어할 수 있고 WebP를 독점적으로 사용할 수 있습니다. Facebook을 비롯한 많은 기업은 WebP를 사용하여 애플리케이션 내에서 모든 이미지를 제공합니다. 절약할 가치는 분명히 있습니다.
diff --git a/src/site/content/ko/fast/codelab-preload-web-fonts/index.md b/src/site/content/ko/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..d3c982b897e
--- /dev/null
+++ b/src/site/content/ko/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,57 @@
+---
+layout: codelab
+title: 웹 글꼴을 미리 로드하여 로딩 속도 개
+authors:
+  - gmimani
+description: 이 코드랩에서는 웹 글꼴을 미리 로드하여 페이시 성능을 개선하는 방법에 대해 알아봅니다.
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+이 코드랩에는 `rel="preload"`를 사용하여 웹 글꼴을 미리 로드하여 스타일이 지정되지 않은 텍스트(FOUT)의 플래시를 제거하는 방법이 제시되어 있습니다.
+
+## 측정
+
+최적화를 추가하기 전에 먼저 웹사이트의 성능을 측정하십시오. {% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+생성된 Lighthouse 보고서에는 **최대 중요 경로 대기 시간** 아래에 리소스 가져오기 순서가 표시됩니다.
+
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="웹 글꼴은 중요 요청 체인에 나타납니다.", width="704", height="198" %}
+
+위의 감사에서 웹 글꼴은 중요한 요청 체인의 일부이며 마지막으로 가져옵니다. [**중요 요청 체인**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)은 브라우저에서 우선 순위를 지정하고 가져오는 리소스의 순서를 나타냅니다. 이 애플리케이션에서 웹 글꼴(Pacfico 및 Pacifico-Bold)은 [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) 규칙을 사용하여 지정되며 중요 요청 체인에서 브라우저가 가져온 마지막 리소스입니다. 일반적으로 웹 글꼴은 늦게 로드됩니다. 이는 중요 리소스(CSS, JS)가 다운로드될 때까지 로드되지 않음을 의미합니다.
+
+다음은 애플리케이션에서 가져온 리소스의 순서입니다.
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="웹 글꼴이 늦게 로드되었습니다.", width="583", height="256" %}
+
+## 웹 글꼴 미리 로드
+
+FOUT을 방지하기 위해 즉시 필요한 웹 글꼴을 미리 로드할 수 있습니다. 문서 헤드에 이 애플리케이션에 대한 `Link` 요소를 추가합니다.
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+`as="font" type="font/woff2"` 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선 순위를 지정하는 데 도움이 됩니다.
+
+`crossorigin` 속성은 글꼴이 다른 도메인에서 올 수 있으므로 CORS 요청으로 리소스를 가져와야 하는지 여부를 나타냅니다. 이 속성이 없으면 브라우저에서 미리 로드된 글꼴을 무시합니다.
+
+페이지 헤더에 Pacifico-Bold가 사용되므로 더 빨리 가져올 수 있도록 사전 로드 태그를 추가했습니다. Pacifico.woff2 글꼴은 접힌 부분 아래에 있는 텍스트의 스타일을 지정하기 때문에 미리 로드하는 것은 그리 중요하지 않습니다.
+
+애플리케이션을 다시 로드하고 Lighthouse를 다시 실행하십시오. **최대 중요 경로 대기 시간** 섹션을 확인하십시오.
+
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="Pacifico-Bold 웹 글꼴이 사전 로드되어 중요 요청 체인에서 제거됨", width="645", height="166" %}
+
+`Pacifico-Bold.woff2`가 중요 요청 체인에서 어떻게 제거되었는지 확인하십시오. 애플리케이션에서 더 일찍 패치됩니다.
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="Pacifico-Bold 웹폰트가 미리 로드됨", width="553", height="254" %}
+
+사전 로드 시 브라우저는 이 파일을 더 일찍 다운로드해야 한다는 것을 알고 있습니다. 적절히 사용하지 않으면 사전 로드가 사용되지 않는 리소스에 대해 불필요한 요청을 하여 성능을 저하시킬 수 있다는 점에 유의하는 것이 중요합니다.
diff --git a/src/site/content/ko/fast/codelab-serve-images-webp/index.md b/src/site/content/ko/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..05e27063eea
--- /dev/null
+++ b/src/site/content/ko/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,126 @@
+---
+layout: codelab
+title: 명령줄을 사용하여 WebP 이미지 만들기
+authors:
+  - katiehempenius
+description: 이 코드랩에서는 WebP를 사용하여 최적화된 이미지를 제공하는 방법을 알아봅니다.
+date: 2018-11-05
+glitch: webp-cli
+related_post: 서브 이미지 WebP
+tags:
+  - performance
+---
+
+webp <a href="https://developers.google.com/speed/webp/docs/precompiled">명령줄 도구</a>가 이미 설치되었으므로 시작할 준비가 되었습니다. 이 도구는 JPG, PNG 및 TIFF 이미지를 WebP로 변환합니다.
+
+## 이미지를 WebP로 변환
+
+{% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+1. 다음 명령을 입력합니다.
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+이 명령은 품질 `50` ( `0`이 최악, `100`이 최고)으로 `images/flower1.jpg` 파일을 변환하고 `images/flower1.webp`로 저장합니다.
+
+{% Aside %} `webp` 대신 왜  `cwebp`를 입력했는지 궁금하십니까? WebP에는 WebP 이미지를 인코딩 및 디코딩하기 위한 두 가지 별도의 명령이 있습니다. `cwebp`는 이미지를 WebP로 인코딩하고, `dwebp`은 WebP에서 이미지를 디코딩합니다. {% endAside %}
+
+이 작업을 수행한 후 콘솔에 다음과 같은 내용이 표시되어야 합니다.
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+이미지를 WebP로 성공적으로 변환했습니다.
+
+그러나 `cwebp` 명령으로 한 번에 한 이미지씩 실행하면 많은 이미지를 변환하는 데 오랜 시간이 걸립니다. 이 작업을 수행해야 하는 경우 스크립트를 대신 사용할 수 있습니다.
+
+- 콘솔에서 이 스크립트를 실행하세요(역따옴표를 잊지 마세요).
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+이 스크립트는 품질 `50`으로 `images/` 디렉터리의 모든 파일을 변환하고 동일한 디렉터리에 새 파일(같은 파일 이름이지만 `.webp` 파일 확장명을 가짐)로 저장합니다.
+
+### ✔︎ 체크인
+
+`images/` 디렉터리에 6개의 파일이 있어야 합니다.
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+다음으로, 이 Glitch를 업데이트하여 WebP 이미지를 지원하는 브라우저에 제공합니다.
+
+## `<picture>` 태그를 사용하여 WebP 이미지 추가
+
+`<picture>` 태그를 사용하면 이전 브라우저에 대한 지원을 유지하면서 최신 브라우저에 WebP를 제공할 수 있습니다.
+
+- `index.html` `<img src="images/flower1.jpg"/>`를 다음 HTML로 바꿉니다.
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- 다음으로, `flower2.jpg` 및 `flower3.png`에 대한 `<img>` 태그를 `<picture>` 태그로 교체합니다.
+
+### ✔︎ 체크인
+
+완료되면 `index.html`의 `<picture>` 태그는 다음과 같아야 합니다.
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+그런 다음 Lighthouse를 사용하여 사이트에서 WebP 이미지를 올바르게 구현했는지 확인합니다.
+
+## Lighthouse로 WebP 사용 확인
+
+Lighthouse의 **차세대 형식의 이미지 제공** 성능 감사를 통해 사이트의 모든 이미지가 WebP와 같은 차세대 형식을 사용하고 있는지 알 수 있습니다.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. **차세대 형식의 이미지 제공** 감사가 통과되었는지 확인합니다.
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Lighthouse에서 '차세대 형식의 이미지 제공' 감사 통과", width="701", height="651" %}
+
+성공! 이제 사이트에서 WebP 이미지를 제공하고 있습니다.
diff --git a/src/site/content/ko/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/ko/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..7c2b203b18f
--- /dev/null
+++ b/src/site/content/ko/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,75 @@
+---
+layout: codelab
+title: lazysizes를 사용하여 오프스크린 이미지를 지연 로드
+authors:
+  - katiehempenius
+description: 이 코드랩(codelab)에서는 lazysize를 사용하여 현재 뷰포트에 있는 이미지만 로드하는 방법을 알아봅니다.
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+지연 로딩은 리소스를 미리 로드하지 않고 필요할 때까지 리소스 로드를 기다리는 접근 방식입니다. 이렇게 하면 초기 페이지 로드 시 로드 및 구문 분석해야 하는 리소스의 양을 줄여 성능을 향상시킬 수 있습니다.
+
+초기 페이지 로드 중에 있는 오프스크린 이미지는 이 기술을 적용하기 좋은 이상적인 후보입니다. 무엇보다도 [lazysizes](https://github.com/aFarkas/lazysizes)를 사용하면 이를 매우 간단하게 구현할 수 있습니다.
+
+## 페이지에 lazysizes 스크립트 추가
+
+{% Instruction 'remix' %}
+
+`lazysizes.min.js`가 이미 다운로드되어 이 글리치(Glitch)에 추가되었습니다. 이를 페이지에 포함하려면:
+
+- 다음 `<script>` 태그를 `index.html`에 추가합니다.
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Images End -->
+</body>
+```
+
+{% Aside %} [lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js) 파일이 이미 이 프로젝트에 추가되었으므로 별도로 추가할 필요가 없습니다. 방금 추가한 스크립트는 이 스크립트를 사용할 수 있습니다. {% endAside %}
+
+lazysizes는 사용자가 페이지를 스크롤할 때 이미지를 지능적으로 로드하고 사용자가 곧 보게 될 이미지의 우선 순위를 지정합니다.
+
+## 지연 로드할 이미지 표시
+
+- 지연 로드해야 하는 이미지에 `lazyload`를 추가합니다. 또한, `src` 속성을 `data-src`로 변경합니다.
+
+예를 들어, `flower3.png` 의 변경 사항은 다음과 같습니다.
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+이 예에서는 `flower3.png` , `flower4.jpg` 및 `flower5.jpg`를 지연 로드해보십시오.
+
+{% Aside %} `src` 속성을 `data-src`로 변경해야 하는 이유가 궁금할 것입니다. 이 속성이 변경되지 않으면 모든 이미지가 지연 로드되는 대신 즉시 로드됩니다. `data-src`는 브라우저가 인식하는 속성이 아니므로 이 속성을 포함하는 이미지 태그를 만나면 이미지를 로드하지 않습니다. 이 경우에는 브라우저가 아니라 lazysizes 스크립트가 이미지를 로드해야 하는 시기를 결정할 수 있기 때문에 이는 좋게 해석됩니다. {% endAside %}
+
+## 실제 작동 보기
+
+그게 전부입니다! 이러한 변경 사항이 실제로 작동하는지 확인하려면 다음 단계를 따르십시오.
+
+{% Instruction 'preview' %}
+
+- 콘솔을 열고 방금 추가한 이미지를 찾습니다. 페이지를 아래로 스크롤할 때 클래스가 `lazyload`에서 `lazyloaded`로 변경되어야 합니다.
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="지연 로드되고 있는 이미지", width="428", height="252" %}
+
+- 페이지를 아래로 스크롤할 때 이미지 파일이 개별적으로 로드되는 것을 보려면 네트워크 패널을 보십시오.
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="지연 로드되고 있는 이미지", width="418", height="233" %}
+
+## Lighthouse를 사용하여 확인
+
+마지막으로 Lighthouse를 사용하여 이러한 변경 사항을 확인하는 것이 좋습니다. Lighthouse의 "Defer offscreen images" 성능 감사는 오프스크린 이미지에 지연 로드를 추가하는 것을 잊었는지 여부를 나타냅니다.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. **Defer offscreen images** 감사가 통과되었는지 확인합니다.
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Lighthouse에서 '효율적으로 이미지 인코딩' 감사 통과", width="800", height="774" %}
+
+성공했습니다! 여러분의 페이지에 이미지를 지연 로드하기 위해 lazysizes를 사용했습니다.
diff --git a/src/site/content/ko/fast/cookie-notice-best-practices/index.md b/src/site/content/ko/fast/cookie-notice-best-practices/index.md
new file mode 100644
index 00000000000..8414cf4430a
--- /dev/null
+++ b/src/site/content/ko/fast/cookie-notice-best-practices/index.md
@@ -0,0 +1,239 @@
+---
+layout: post
+title: 쿠키 알림에 대한 모범 사례
+subhead: |2
+
+  성능 및 사용성을 위해 쿠키 알림을 최적화합니다.
+authors:
+  - katiehempenius
+date: 2021-03-30
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/V8rNgYUkkAWET3EkBL6H.png
+alt: 쿠키 공지 그림.
+description: |2
+
+  쿠키 알림이 성능, 성능 측정 및 UX에 미치는 영향에 대해 알아보세요.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+이 문서는 쿠키 알림이 성능, 성능 측정 및 사용자 경험에 미치는 영향에 대해 설명합니다.
+
+## 성능
+
+쿠키 알림은 일반적으로 페이지 로드 프로세스 초기에 로드되고 모든 사용자에게 표시되며 광고 및 기타 페이지 콘텐츠 로드에 잠재적으로 영향을 미칠 수 있기 때문에 페이지 성능에 상당한 영향을 미칠 수 있습니다.
+
+쿠키 알림이 Web Vitals 측정항목에 영향을 미칠 수 있는 방법은 다음과 같습니다.
+
+- **가장 큰 콘텐츠가 포함된 페인트(LCP):** 대부분의 쿠키 동의 알림은 상당히 작기 때문에 일반적으로 페이지의 LCP 요소를 포함하지 않습니다. 그러나 이것은 특히 모바일 장치에서 발생할 수 있습니다. 모바일 장치에서 쿠키 알림은 일반적으로 화면의 더 많은 부분을 차지합니다. 이것은 일반적으로 쿠키 알림에 큰 텍스트 블록이 포함될 때 발생합니다(텍스트 블록도 LCP 요소일 수 있음).
+
+- **FID(First Input Delay):** 일반적으로 쿠키 동의 솔루션 자체는 FID에 최소한의 영향을 미쳐야 합니다. 쿠키 동의에는 JavaScript 실행이 거의 필요하지 않습니다. 그러나 이러한 쿠키가 활성화하는 기술, 즉 광고 및 추적 스크립트는 페이지 상호 작용에 상당한 영향을 미칠 수 있습니다. 쿠키가 승인될 때까지 이러한 스크립트를 지연시키면 FID(First Input Delay)를 줄이는 기술로 작용할 수 있습니다.
+
+- **CLS(누적 레이아웃 이동):** 쿠키 동의 알림은 레이아웃 이동의 매우 일반적인 소스입니다.
+
+일반적으로 제3자 제공업체의 쿠키 알림은 귀하가 직접 구축한 쿠키 알림보다 성능에 더 큰 영향을 미칠 것으로 예상할 수 있습니다. 이것은 쿠키 알림 고유의 문제가 아니라 일반적인 타사 스크립트의 특성입니다.
+
+### 모범 사례
+
+이 섹션의 모범 사례는 타사 쿠키 알림에 중점을 둡니다. 이러한 모범 사례의 전부는 아니지만 일부는 자사 쿠키 알림에도 적용됩니다.
+
+#### 쿠키 알림 스크립트를 비동기식으로 로드
+
+쿠키 알림 스크립트는 비동기식으로 로드해야 합니다. 이렇게 하려면 스크립트 태그에[`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) 속성을 스크립트 태그에 추가하세요.
+
+```html
+<script src="https://cookie-notice.com/script.js" async>
+```
+
+비동기가 아닌 스크립트는 브라우저 파서를 차단합니다. 이것은 페이지 로드와 LCP를 지연시킵니다. 자세한 내용은 [효율적으로 타사 JavaScript 로드](/efficiently-load-third-party-javascript/)를 참조하십시오.
+
+{% Aside %} 동기 스크립트를 사용해야 하는 경우(예: 일부 쿠키 알림은 동기 스크립트를 사용하여 쿠키 차단을 구현함) 이 요청이 최대한 빨리 로드되도록 해야 합니다. 이를 수행하는 한 가지 방법은 [리소스 힌트](/preconnect-and-dns-prefetch/)를 사용하는 것 입니다. {% endAside %}
+
+#### 쿠키 알림 스크립트 직접 로드
+
+쿠키 알림 스크립트는 태그 관리자나 다른 스크립트에 의해 로드되지 않고 기본 문서의 HTML에 스크립트 태그를 배치하여 "직접" 로드해야 합니다. 태그 관리자 또는 보조 스크립트를 사용하여 쿠키 알림 스크립트를 삽입하면 쿠키 알림 스크립트의 로드가 지연됩니다. 이러한 경우 브라우저의 lookahead 파서로부터 스크립트를 가리고 JavaScript 실행 전에 스크립트가 로드되지 않습니다.
+
+#### 쿠키 알림 출처와 조기 연결 설정
+
+타사 위치에서 쿠키 알림 스크립트를 로드하는 모든 사이트는 `dns-prefetch` 또는 `preconnect` 리소스 힌트를 사용하여 쿠키 알림 리소스를 호스팅하는 원본과의 조기 연결을 설정해야 합니다. 자세한 내용은 [인지되는 페이지 속도를 개선하기 위해 조기에 네트워크 연결 설정](/preconnect-and-dns-prefetch/)을 참조하십시오.
+
+```html
+<link rel="preconnect" href="https://cdn.cookie-notice.com/">
+```
+
+{% Aside %} 쿠키 알림은 여러 출처에서 리소스를 로드하는 것이 일반적입니다(예: `www.cookie-notice.com` 및 `cdn.cookie-notice.com` 모두에서 리소스 로드). 별도의 출처에는 별도의 연결이 필요하므로 별도의 리소스 힌트가 필요합니다. {% endAside %}
+
+#### 쿠키 알림을 적절하게 미리 로드
+
+일부 사이트는 [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) 리소스 힌트를 사용하여 쿠키 알림 스크립트를 로드하는 것이 좋습니다. `preload` 리소스 힌트는 지정된 리소스에 대한 조기 요청을 시작하도록 브라우저에 알립니다.
+
+```html
+<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
+```
+
+`preload`는 사용량이 페이지당 몇 개의 핵심 리소스를 가져오는 것으로 제한될 때 가장 강력합니다. 따라서 쿠키 알림 스크립트를 미리 로드하는 것의 유용성은 상황에 따라 달라집니다.
+
+#### 쿠키 알림 스타일 지정 시 성능 절충 사항에 유의
+
+타사 쿠키 알림의 모양과 느낌을 사용자 지정하면 추가 성능 하락이 발생할 수 있습니다. 예를 들어, 타사 쿠키 알림은 페이지의 다른 곳에서 사용되는 동일한 리소스(예: 웹 글꼴)를 항상 재사용할 수 있는 것은 아닙니다. 또한 타사 쿠키 알림은 긴 요청 체인의 끝에 스타일을 로드하는 경향이 있습니다. 예상치 못한 상황을 피하려면 쿠키 알림이 스타일 및 관련 리소스를 로드하고 적용하는 방법을 알고 있어야 합니다.
+
+#### 레이아웃 변경 피하기
+
+다음은 쿠키 알림과 관련된 가장 일반적인 레이아웃 변경 문제입니다.
+
+- **화면 상단 쿠키 알림**: 화면 상단 쿠키 알림은 레이아웃 이동의 매우 일반적인 소스입니다. 주변 페이지가 이미 렌더링된 후 쿠키 알림이 DOM에 삽입되면 그 아래에 있는 페이지 요소를 페이지 아래로 더 밀어 넣습니다. 이러한 유형의 레이아웃 이동은 동의 알림을 위해 DOM의 공간을 예약하여 제거할 수 있습니다. 이것이 실현 가능한 솔루션이 아닌 경우(예: 쿠키 알림의 크기가 지역에 따라 다른 경우) 고정 바닥글 또는 모달을 사용하여 쿠키 알림을 표시하는 것이 좋습니다. 이 두 가지 대체 접근 방식 모두 쿠키 알림을 페이지의 나머지 부분 위에 "오버레이"로 표시하므로 쿠키 알림이 로드될 때 콘텐츠 이동을 일으키지 않아야 합니다.
+- **애니메이션** : 많은 쿠키 알림은 애니메이션을 사용합니다. 예를 들어 쿠키 알림을 "슬라이딩 인"하는 것은 일반적인 디자인 패턴입니다. 이러한 효과가 구현되는 방식에 따라 레이아웃 이동이 발생할 수 있습니다. 자세한 내용은 [레이아웃 전환 디버깅](/debugging-layout-shifts/)을 참조하십시오.
+- **글꼴** : 늦게 로드하는 글꼴은 렌더링을 차단하거나 레이아웃 이동을 유발할 수 있습니다. 이 현상은 느린 연결에서 더 분명합니다.
+
+#### 고급 로딩 최적화
+
+이러한 기술은 구현하는 데 더 많은 작업이 필요하지만 쿠키 알림 스크립트의 로드를 더욱 최적화할 수 있습니다.
+
+- 자체 서버에서 타사 쿠키 알림 스크립트를 캐싱하고 제공하면 이러한 리소스의 전달 속도를 향상시킬 수 있습니다.
+- [서비스 워커](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers)를 사용하면 쿠키 알림 스크립트와 같은 [타사 스크립트의 가져오기 및 캐싱](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)을 더 잘 제어할 수 있습니다.
+
+## 성능 측정
+
+쿠키 알림은 성능 측정에 영향을 줄 수 있습니다. 이 섹션에서는 이러한 영향과 이를 완화하기 위한 기술에 대해 설명합니다.
+
+### 실제 사용자 모니터링(RUM)
+
+일부 분석 및 RUM 도구는 쿠키를 사용하여 성능 데이터를 수집합니다. 사용자가 쿠키 사용을 거부하는 경우 이러한 도구는 성능 데이터를 캡처할 수 없습니다.
+
+사이트는 이러한 현상을 인지하고 있어야 합니다. RUM 도구가 데이터를 수집하는 데 사용하는 메커니즘을 이해하는 것도 가치가 있습니다. 그러나 일반적인 사이트의 경우 이러한 불일치는 데이터 왜곡의 방향과 크기를 고려할 때 경보의 원인이 아닐 수 있습니다. 쿠키 사용은 성능 측정을 위한 기술적 요구 사항이 아닙니다. [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리는 쿠키를 사용하지 않는 라이브러리의 예입니다.
+
+귀하의 사이트가 쿠키를 사용하여 성능 데이터를 수집하는 방식(즉, 쿠키에 개인 정보가 포함되어 있는지 여부)과 해당 법률에 따라 성능 측정을 위한 쿠키는 다른 목적을 위해 귀하의 사이트에서 사용되는 일부 쿠키(예: 광고 쿠키)와 동일한 법적 요구 사항의 적용을 받지 않을 수 있습니다. 일부 사이트는 사용자 동의를 요청할 때 성능 쿠키를 별도의 쿠키 범주로 분류합니다.
+
+### 합성 모니터링
+
+사용자 지정 구성이 없으면 대부분의 합성 도구(예: Lighthouse 및 WebPageTest)는 쿠키 동의 알림에 응답하지 않은 최초 사용자의 경험만 측정합니다. 그러나 성능 데이터를 수집할 때 캐시 상태의 변화(예: 초기 방문 대 반복 방문)뿐만 아니라 쿠키 수락 상태의 변화(수락, 거부 또는 응답 없음)도 고려해야 합니다.
+
+다음 섹션에서는 쿠키 알림을 성능 측정 워크플로에 통합하는 데 도움이 될 수 있는 WebPageTest 및 Lighthouse 설정에 대해 설명합니다. 그러나 쿠키 및 쿠키 알림은 실험실 환경에서 완벽하게 시뮬레이션하기 어려울 수 있는 많은 요소 중 하나일 뿐입니다. 이러한 이유로 합성 도구가 아닌 [RUM 데이터](/user-centric-performance-metrics/#how-metrics-are-measured)를 성능 벤치마킹의 초석으로 만드는 것이 중요합니다.
+
+### WebPageTest로 쿠키 알림 테스트
+
+#### 스크립팅
+
+추적을 수집하는 동안 [WebPageTest](https://webpagetest.org/)가 쿠키 동의 배너를 "클릭"하도록 스크립팅을 사용할 수 있습니다.
+
+**스크립트** 탭으로 이동하여 스크립트를 추가합니다. 아래 스크립트는 테스트할 URL로 이동한 다음 id가 `cookieButton`인 DOM 요소를 클릭합니다.
+
+{% Aside 'caution' %} WebPageTest 스크립트는 [탭으로 구분](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#scripting) 됩니다. {% endAside %}
+
+```shell
+combineSteps
+navigate    %URL%
+clickAndWait    id=cookieButton
+```
+
+이 스크립트를 사용할 때 다음 사항에 유의하십시오.
+
+- `combineSteps`는 추적 및 측정의 단일 세트로 이어지는 스크립팅 단계의 결과를 "결합"하도록  WebPageTest에 지시합니다. `combineSteps` 없이 이 스크립트를 실행하는 것도 유용할 수 있습니다. 별도의 추적을 통해 리소스가 쿠키를 수락하기 전이나 후에 로드되었는지 쉽게 확인할 수 있습니다.
+- `%URL%`은 테스트 중인 URL을 참조하는 WebPageTest 규칙입니다.
+- `clickAndWait`는 WebPageTest에 `attribute=value`로 표시된 요소를 클릭하고 후속 브라우저 활동이 완료될 때까지 기다리라고 지시합니다. `clickAndWait attribute=Value` 형식을 따릅니다.
+
+이 스크립트를 올바르게 구성했다면 WebPageTest에서 찍은 스크린샷에 쿠키 알림이 표시되지 않아야 합니다(쿠키 알림이 수락됨).
+
+WebPageTest 스크립팅에 대한 자세한 내용은 [WebPageTest 문서](https://docs.webpagetest.org/scripting/)를 확인하십시오.
+
+#### 쿠키 설정
+
+쿠키 세트로 WebPageTest를 실행하려면 **고급** 탭으로 이동하여 쿠키 헤더를 **사용자 정의 헤더** 필드에 추가하십시오.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/qSccrAxF0H4yoSzYRYdh.png", alt="WebPageTest의 '사용자 정의 헤더' 필드를 보여주는 스크린샷", width="800", height="181" %}
+
+#### 테스트 위치 변경
+
+WebPageTest에서 사용하는 테스트 위치를 변경하려면 **고급 테스트** 탭 **에 있는 테스트 위치** 드롭다운을 클릭합니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/J27NcDQ5LTtXYloaA1DN.png", alt="WebPageTest의 '테스트 위치' 드롭다운 스크린샷", width="800", height="267" %}
+
+### Lighthouse로 쿠키 알림 테스트
+
+Lighthouse 실행 시 쿠키를 설정하면 Lighthouse에서 테스트하기 위해 페이지를 특정 상태로 전환하는 메커니즘 역할을 할 수 있습니다. Lighthouse의 쿠키 동작은 컨텍스트(DevTools, CLI 또는 PageSpeed Insights)에 따라 약간 다릅니다.
+
+#### 개발자 도구
+
+Lighthouse가 DevTools에서 실행될 때 쿠키가 지워지지 않습니다. 그러나 다른 유형의 저장소는 기본적으로 지워집니다. 이 동작은 **Lighthouse** 설정 패널에서 **저장소 비우기** 옵션을 사용하여 변경할 수 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/nmNDeSoGEQUVKeTP7q7R.png", alt="Lighthouse '저장소 비우기' 옵션을 강조한 스크린샷", width="800", height="304" %}
+
+#### CLI
+
+CLI에서 Lighthouse를 실행하면 새로운 Chrome 인스턴스가 사용되므로 기본적으로 쿠키가 설정되지 않습니다. 특정 쿠키 세트를 사용하여 CLI에서 Lighthouse를 실행하려면 다음 [명령](https://github.com/GoogleChrome/lighthouse#cli-options)을 사용하십시오.
+
+```shell
+lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
+```
+
+Lighthouse CLI에서 사용자 지정 요청 헤더를 설정하는 방법에 대한 자세한 내용은 [인증된 페이지에서 Lighthouse 실행](https://github.com/GoogleChrome/lighthouse/blob/master/docs/authenticated-pages.md)을 참조하십시오.
+
+#### PageSpeed 인사이트
+
+PageSpeed Insights에서 Lighthouse를 실행하면 새로운 Chrome 인스턴스가 사용되며 쿠키가 설정되지 않습니다. 특정 쿠키를 설정하도록 PageSeed Insights를 구성할 수 없습니다.
+
+## 사용자 경험
+
+다양한 쿠키 동의 알림의 사용자 경험(UX)은 주로 페이지 내 쿠키 알림의 위치와 사용자가 사이트의 쿠키 사용을 사용자 지정할 수 있는 범위라는 두 가지 결정의 결과입니다. 이 섹션에서는 이러한 두 가지 결정에 대한 잠재적인 접근 방식에 대해 설명합니다.
+
+{% Aside 'caution' %} 쿠키 알림 UX는 지역에 따라 크게 다를 수 있는 법률의 영향을 크게 받습니다. 따라서 이 섹션에서 논의된 일부 디자인 패턴은 특정 상황과 관련이 없을 수 있습니다. 이 문서는 법적 조언을 대신할 수 없습니다. {% endAside %}
+
+쿠키 알림에 대한 잠재적인 디자인을 고려할 때 고려해야 할 몇 가지 사항은 다음과 같습니다.
+
+- UX: 좋은 사용자 경험입니까? 이 특정 디자인이 기존 페이지 요소와 사용자 흐름에 어떤 영향을 미칩니까?
+- 비즈니스: 사이트의 쿠키 전략은 무엇입니까? 쿠키 알림에 대한 귀하의 목표는 무엇입니까?
+- 법적 요건: 법적 요구 사항을 준수합니까?
+- 엔지니어링: 구현하고 유지 관리하는 데 얼마나 많은 작업이 필요합니까? 얼마나 변경하기 어려울까요?
+
+### 배치
+
+쿠키 알림은 머리글, 인라인 요소 또는 바닥글로 표시될 수 있습니다. 모달을 사용하여 페이지 콘텐츠 상단에 표시하거나 [전면 광고](https://en.wikipedia.org/wiki/Interstitial_webpage) 로 사용할 수도 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/LLqHAhp7W6x4E3rZh0Oc.png", alt="쿠키 알림에 대한 다양한 배치 옵션의 예를 보여주는 다이어그램", width="800", height="345" %}
+
+#### 머리글, 바닥글 및 인라인 쿠키 알림
+
+쿠키 알림은 일반적으로 머리글이나 바닥글에 배치됩니다. 이 두 가지 옵션 중에서 바닥글 배치는 눈에 거슬리지 않고 배너 광고 또는 알림과 관심을 끌기 위해 경쟁하지 않으며 일반적으로 CLS를 유발하지 않기 때문에 일반적으로 선호됩니다. 또한 개인정보취급방침 및 이용약관을 게시하는 곳이기도 합니다.
+
+인라인 쿠키 알림도 옵션이지만 기존 사용자 인터페이스에 통합하기 어려울 수 있으므로 일반적이지 않습니다.
+
+#### 모달
+
+모달은 페이지 콘텐츠 상단에 표시되는 쿠키 동의 알림입니다. 모달은 크기에 따라 모양과 성능이 상당히 다를 수 있습니다.
+
+더 작고 화면의 일부만 차지하는 모달은 [레이아웃 변경](/cls/)을 일으키지 않는 방식으로 쿠키 알림을 구현하는 데 어려움을 겪고 있는 사이트에 좋은 대안이 될 수 있습니다.
+
+반면에 페이지 콘텐츠의 대부분을 가리는 큰 모달은 주의해서 사용해야 합니다. 특히 소규모 사이트에서는 사용자가 콘텐츠가 가려진 익숙하지 않은 사이트의 쿠키 알림을 수락하지 않고 사이트를 떠날 수 있습니다. 반드시 동의어인 것은 아니지만 전체 화면 쿠키 동의 모달 사용을 고려하고 있다면 [쿠키 벽](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/)에 관한 법률을 알고 있어야 합니다.
+
+{% Aside %} 큰 모달은 일종의 전면 광고로 간주될 수 있습니다. Google 검색은 전면 광고가 쿠키 배너의 경우와 같이 법적 규정을 준수하는 데 사용되는 경우 이를 [처벌하지 않습니다.](https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on) 그러나 다른 상황에서 전면 광고를 사용하는 경우(특히 방해가 되거나 사용자 환경이 좋지 않은 경우) 불이익을 받을 수 있습니다. {% endAside %}
+
+### 구성 가능성
+
+쿠키 알림 인터페이스는 사용자에게 허용하는 쿠키에 대한 다양한 제어 수준을 제공합니다.
+
+#### 구성 불가능
+
+이러한 알림 스타일의 쿠키 배너는 사용자에게 쿠키를 선택 해제하기 위한 직접적인 UX 제어를 제공하지 않습니다. 대신 일반적으로 웹 브라우저를 사용하여 쿠키를 관리하는 방법에 대한 정보를 사용자에게 제공할 수 있는 사이트의 쿠키 정책에 대한 링크를 포함합니다. 이러한 통지에는 일반적으로 "해제" 및/또는 "수락" 버튼이 포함됩니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/RlAg8DCjBC0bX7Ki5MuE.png", alt="쿠키 구성 가능성이 없는 쿠키 알림의 예를 보여주는 다이어그램", width="800", height="518" %}
+
+#### 일부 구성 가능성
+
+이러한 쿠키 알림은 사용자에게 쿠키를 거부할 수 있는 옵션을 제공하지만 더 세분화된 제어를 지원하지 않습니다. 쿠키 통지에 대한 이러한 접근 방식은 덜 일반적입니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/MOl8u9NcnyjCWogxzjdz.png", alt="일부 쿠키 구성 가능성이 있는 쿠키 알림의 예를 보여주는 다이어그램", width="800", height="508" %}
+
+#### 전체 구성 가능성
+
+이러한 쿠키 알림은 사용자가 수락하는 쿠키 사용을 구성하기 위한 보다 세분화된 제어 기능을 제공합니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QfFoqkkmdKHAYlftIH0n.png", alt="전체 쿠키 구성 가능성이 있는 쿠키 알림의 예를 보여주는 다이어그램", width="800", height="467" %}
+
+- **UX:** 쿠키 사용 구성을 위한 컨트롤은 사용자가 초기 쿠키 동의 알림에 응답할 때 실행되는 별도의 모달을 사용하여 가장 일반적으로 표시됩니다. 그러나 공간이 충분한 경우 일부 사이트는 초기 쿠키 동의 알림 내에 이러한 제어를 인라인으로 표시합니다.
+
+- **세분성:** 쿠키 구성 가능성에 대한 가장 일반적인 접근 방식은 사용자가 쿠키 "범주"별로 쿠키를 선택하도록 허용하는 것입니다. 일반적인 쿠키 범주의 예로는 기능, 타겟팅 및 소셜 미디어 쿠키가 있습니다.
+
+    그러나 일부 사이트는 한 단계 더 나아가 사용자가 쿠키별로 선택하도록 허용합니다. 또는 사용자에게 보다 구체적인 제어 기능을 제공하는 또 다른 방법은 "광고"와 같은 쿠키 카테고리를 특정 사용 사례로 분류하는 것입니다. 예를 들어 사용자가 "기본 광고"와 "개인 맞춤 광고"를 별도로 선택할 수 있습니다.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/z7zFPtCkFi8GEpkfubek.png", alt="전체 쿠키 구성이 가능한 쿠키 알림의 예를 보여주는 다이어그램", width="800", height="372" %}
diff --git a/src/site/content/ko/fast/defer-non-critical-css/index.md b/src/site/content/ko/fast/defer-non-critical-css/index.md
new file mode 100644
index 00000000000..1984f3e5471
--- /dev/null
+++ b/src/site/content/ko/fast/defer-non-critical-css/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 중요하지 않은 CSS 연기
+authors:
+  - demianrenzulli
+description: 중요 렌더링 경로를 최적화하고 FCP(First Contentful Paint)를 개선하기 위해 중요하지 않은 CSS를 연기하는 방법에 대해 알아보세요.
+date: 2019-02-17
+updated: 2020-06-12
+tags:
+  - performance
+---
+
+CSS 파일은 [렌더링 차단 리소스](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)입니다. 브라우저가 페이지를 렌더링하기 전에 로드 및 처리해야 합니다. 불필요하게 큰 스타일이 포함된 웹 페이지는 렌더링하는 데 시간이 더 오래 걸립니다.
+
+이 가이드에서는 [중요 렌더링 경로](/critical-rendering-path/)를 최적화하고 [FCP(First Contentful Paint)](/fcp/)를 개선하기 위해 중요하지 않은 CSS를 연기하는 방법에 대해 배우게 됩니다.
+
+## 차선책으로 CSS 로드하기
+
+다음 예제에는 각각 다른 클래스로 스타일이 지정된 3개의 숨겨진 텍스트 단락이 있는 아코디언이 포함되어 있습니다.
+
+{% Glitch { id: 'defer-css-unoptimized', path: 'index.html' } %}
+
+이 페이지는 8개의 클래스가 있는 CSS 파일을 요청하지만 "보이는" 콘텐츠를 렌더링하는 데 모든 클래스가 필요한 것은 아닙니다.
+
+이 가이드의 목표는 이 페이지를 최적화하는 것이므로 **중요한** 스타일만 동기식으로 로드되고 나머지(예: 단락에 적용된 스타일)는 비차단 방식으로 로드됩니다.
+
+## 측정
+
+[페이지](/discover-performance-opportunities-with-lighthouse/#run-lighthouse-from-chrome-devtools)에서 [Lighthouse](https://defer-css-unoptimized.glitch.me/)를 실행하고 **성능** 섹션으로 이동합니다.
+
+보고서는 값이 "1s"인 **First Contentful Paint** 메트릭과 **style.css** 파일을 가리키는 **렌더 차단 리소스 제거** 기회를 보여줍니다.
+
+<figure>{% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="'1초'의 FCP 및 'Opportunities' 아래에 'Eliminate blocking resources'가 표시되는 최적화되지 않은 페이지에 대한 Lighthouse 보고서, ", width="800", height="640" %}</figure>
+
+{% Aside %} 이 데모 사이트에 사용하는 CSS는 매우 작습니다. 더 큰 CSS 파일(프로덕션 시나리오에서 흔히 볼 수 있음)을 요청하는 경우 그리고 Lighthouse가 **폴드 상에 있는** 콘텐츠를 렌더링하는 동안 사용되지 않은 2048바이트 이상의 CSS 규칙이 페이지에 있음을 감지하면 **미사용 CSS 제거**라는 제안도 받게 됩니다. {% endAside %}
+
+이 CSS가 렌더링을 차단하는 방법을 시각화하려면:
+
+1. Chrome에서 [페이지](https://defer-css-unoptimized.glitch.me/)를 엽니다. {% Instruction 'devtools-performance', 'ol' %}
+2. 성능 패널에서 **다시 로드**를 클릭합니다.
+
+결과 추적에서 CSS가 다음에 대한 로드를 완료한 직후 **FCP** 마커가 배치된 것을 볼 수 있습니다.
+
+<figure>{% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="CSS 로드 후 FCP 시작을 나타내는 최적화되지 않은 페이지에 대한 DevTools 성능 추적.", width="800", height="352" %}</figure>
+
+즉, 브라우저는 화면에 단일 픽셀을 그리기 전에 모든 CSS가 로드되고 처리될 때까지 기다려야 합니다.
+
+## 최적화
+
+이 페이지를 최적화하려면 "중요"로 간주되는 클래스를 알아야 합니다. 이를 위해 [Coverage Tool](https://developer.chrome.com/docs/devtools/css/reference/#coverage)을 사용합니다.
+
+1. DevTools에서 {`Control+Shift+P` 또는 `Command+Shift+P` (Mac)를 눌러 [명령 메뉴](https://developer.chrome.com/docs/devtools/command-menu/)를 엽니다.
+2. "Coverage"를 입력하고 **Show Coverage**를 선택합니다.
+3. 페이지를 다시 로드하고 커버리지 캡처를 시작하려면 **리로드** 버튼을 클릭하십시오.
+
+<figure>{% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="55.9% 미사용 바이트를 표시하는 CSS 파일 커버리지.", width="800", height="82" %}<br>두 가지 색상으로 표시된 클래스를 보려면 보고서를 두 번 클릭하십시오.</figure>
+
+두 가지 색상으로 표시된 클래스를 보려면 보고서를 두 번 클릭하십시오.
+
+- 녹색(**중요**): 브라우저에서 표시되는 콘텐츠(제목, 부제목, 아코디언 버튼 등)를 렌더링하는 데 필요한 클래스입니다.
+- 빨간색(**중요하지 않음**): 이 스타일은 아코디언 안의 단락과 같이 즉시 표시되지 않는 콘텐츠에 적용됩니다.
+
+이 정보를 사용하여 브라우저가 페이지 로드 후 즉시 중요한 스타일을 처리하도록 CSS를 최적화하고 중요하지 않은 CSS는 나중에 처리하도록 합니다.
+
+- Coverage 도구에서 얻은 보고서에서 녹색으로 표시된 클래스 정의를 추출하고 해당 클래스를 페이지 헤드의 `<style>` 블록에 넣습니다.
+
+```html
+<style type="text/css">
+.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
+</style>
+```
+
+- 그다음, 다음과 같은 패턴을 적용하여 나머지 클래스를 비동기적으로 로드합니다.
+
+```html
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="styles.css"></noscript>
+```
+
+이것은 CSS를 로드하는 일반적인 방법이 아닙니다. 작동 방식은 다음과 같습니다.
+
+- `link rel="preload" as="style"`은 스타일시트를 비동기적으로 요청합니다. [중요 자산 사전 로드 가이드](/preload-critical-assets)에서 `preload`에 대해 자세히 알 수 있습니다.
+- `link`의 `onload` 속성을 사용하면 로드가 완료될 때 CSS를 처리할 수 있습니다.
+- `onload` 핸들러를 사용한 후 이를 "nulling"하면 rel 속성을 전환할 때 일부 브라우저가 핸들러를 다시 호출하지 않도록 할 수 있습니다.
+- `noscript` 요소 내부의 스타일시트에 대한 참조는 JavaScript를 실행하지 않는 브라우저의 대체 수단으로 작동합니다.
+
+{% Aside %} 이 가이드에서는 바닐라 코드를 사용하여 이 최적화를 구현했습니다. 실제 프로덕션 시나리오에서는 이 동작을 캡슐화하고 여러 브라우저에서 효과적으로 작동할 수 있는 [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md)와 같은 기능을 사용하는 것이 좋습니다. {% endAside %}
+
+[결과 페이지](https://defer-css-optimized.glitch.me/)는 대부분의 스타일이 비동기식으로 로드되는 경우에도 이전 버전과 정확히 동일해 보입니다. 인라인 스타일과 CSS 파일에 대한 비동기 요청이 HTML 파일에서 어떻게 보이는지 보여줍니다.
+
+<!-- Copy and Paste Me -->
+
+{% Glitch { id: 'defer-css-optimized', path: 'index.html', previewSize: 0 } %}
+
+## 모니터
+
+DevTools를 사용하여 [최적화된 페이지](https://defer-css-optimized.glitch.me/)에서 다른 **성능** 추적을 실행합니다.
+
+**FCP** 마커는 페이지가 CSS를 요청하기 전에 나타납니다. 즉, 브라우저는 페이지를 렌더링하기 전에 CSS가 로드될 때까지 기다릴 필요가 없습니다.
+
+<figure>{% Img src="image/admin/0mVq3q760y37JSn2MmCP.png", alt="CSS라 로드되기 전 FCP 시작을 표시하는 최적화되지 않은 페이지에 대한 DevTools 성능 추적.", width="800", height="389" %}</figure>
+
+마지막 단계로 최적화된 페이지에서 Lighthouse를 실행합니다.
+
+보고서에서 FCP 페이지가 **0.2초** 감소(20% 개선!)된 것을 볼 수 있습니다.
+
+<figure>{% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="'0.8초의 FCP 값을 나타내는 Lighthouse 보고서.", width="800", height="324" %}</figure>
+
+**렌더링 차단 리소스 제거** 제안은 더 이상 **기회** 아래에 없으며 이제 **통과된 감사** 섹션에 속합니다.
+
+<figure>{% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="'통과된 감사' 섹션에서 '차단 리소스 제거'를 표시하는 Lighthouse 보고서.", width="800", height="237" %}</figure>
+
+## 다음 단계 및 참조
+
+이 가이드에서는 페이지에서 미사용 코드를 수동으로 추출하여 중요하지 않은 CSS를 연기하는 방법에 대해 배웠습니다. 이에 대한 보완책으로, [중요한 CSS 추출 가이드](/extract-critical-css/)는 중요한 CSS를 추출하는 가장 인기 있는 도구 중 일부를 다루고 있으며 실제로 어떻게 작동하는지 확인할 수 있는 [코드랩](/codelab-extract-and-inline-critical-css/)을 포함하고 있습니다.
diff --git a/src/site/content/ko/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/ko/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..abd04b79cc5
--- /dev/null
+++ b/src/site/content/ko/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: 타사 JavaScript를 효율적으로 로드
+subhead: 로드 시간과 사용자 경험을 개선하기 위해 타사 스크립트를 사용하는 일반적인 함정을 피하십시오.
+authors:
+  - mihajlija
+date: 2019-08-14
+description: |2
+
+  로드 시간과 사용자 경험을 개선하기 위해 타사 스크립트를 사용하는 일반적인 함정을 피하는 방법을 알아보십시오.
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: 선적 컨테이너의 항공 보기입니다.
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+타사 스크립트가 페이지 로드 [속도를 늦추는](/third-party-javascript/) 경우 성능을 개선할 수 있는 두 가지 옵션이 있습니다.
+
+- 사이트에 명확한 가치를 추가하지 않는 경우 제거하십시오.
+
+- 로딩 프로세스를 최적화합니다.
+
+이 게시물은 다음 기술을 사용하여 타사 스크립트의 로딩 프로세스를 최적화하는 방법을 설명합니다.
+
+1. `<script>` 태그에서 `async` 또는 `defer` 속성 사용
+
+2. 필요한 오리진에 대한 초기 연결 설정
+
+3. 지연 로딩
+
+4. 타사 스크립트 제공 방법 최적화
+
+## `async` 또는 `defer` 사용
+
+[동기 스크립트](/third-party-javascript/)는 DOM 생성 및 렌더링을 지연시키므로 페이지를 렌더링하기 전에 스크립트를 실행해야 하는 경우가 아니면 항상 타사 스크립트를 비동기적으로 로드해야 합니다.
+
+`async` 및 `defer` 속성은 브라우저에 백그라운드에서 스크립트를 로드하는 동안 HTML 구문 분석을 계속하고 로드된 후 스크립트를 실행할 수 있음을 알려줍니다. 이렇게 하면 스크립트 다운로드가 DOM 구성 및 페이지 렌더링을 차단하지 않습니다. 그 결과 모든 스크립트가 로드되기 전에 사용자가 페이지를 볼 수 있습니다.
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+`async`와 `defer`의 차이점은 스크립트 실행을 시작할 때입니다.
+
+### `async`
+
+`async` 속성이 있는 스크립트는 다운로드가 완료된 후 창의 [로드](https://developer.mozilla.org/docs/Web/Events/load) 이벤트 전에 첫 번째 기회에 실행됩니다. `async` 스크립트가 HTML에 나타나는 순서대로 실행되지 않을 가능성이 있음을 의미합니다. 또한 파서가 작동하는 동안 다운로드를 마치면 DOM 구축을 중단할 수 있음을 의미합니다.
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="비동기 속성이 있는 파서 차단 스크립트 다이어그램", width="800", height="252" %}
+
+### `defer`
+
+`defer` 속성이 있는 스크립트는 HTML 구문 분석이 완전히 완료된 후 [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) 이벤트 전에 실행됩니다. `defer`는 스크립트가 HTML에 나타나는 순서대로 실행되도록 보장하고 파서를 차단하지 않습니다.
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="지연 속성이 있는 스크립트가 있는 파서 흐름 다이어그램", width="800", height="253" %}
+
+- 로드 프로세스 초기에 스크립트를 실행해야 하는 경우 `async`를 사용합니다.
+
+- 덜 중요한 리소스에 대해 `defer`를 사용합니다. 예를 들어 스크롤 없이 볼 수 있는 동영상 플레이어입니다.
+
+이러한 속성을 사용하면 페이지 로드 속도를 크게 높일 수 있습니다. 예를 들어 [Telegraph는 최근 광고 및 분석을 포함한 모든 스크립트를 연기](https://medium.com/p/a0a1000be5#4123)하고 광고 로딩 시간을 평균 4초 개선했습니다.
+
+{% Aside %} 분석 스크립트는 일반적으로 일찍 로드되므로 귀중한 분석 데이터를 놓치지 않습니다. 다행히 초기 페이지 로드 데이터를 유지하면서 [분석을 느리게 초기화](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/)하는 패턴이 있습니다. {% endAside %}
+
+## 필요한 원본에 대한 초기 연결 설정
+
+중요한 타사 출처에 대한 [초기 연결](/preconnect-and-dns-prefetch/)을 설정하여 100–500ms를 절약할 수 있습니다.
+
+두 가지 [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) 유형이 여기에 도움이 될 수 있습니다.
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+`<link rel="preconnect">`는 귀하의 페이지가 다른 출처에 대한 연결을 설정하고 가능한 한 빨리 프로세스를 시작하기를 원한다는 것을 브라우저에 알립니다. 미리 연결된 오리진에서 리소스를 요청하면 즉시 다운로드가 시작됩니다.
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %} 브라우저는 10초 이내에 사용되지 않는 모든 연결을 닫기 때문에 곧 사용할 중요한 도메인에만 사전 연결합니다. 불필요한 사전 연결은 다른 중요한 리소스를 지연시킬 수 있으므로 사전 연결 도메인의 수를 제한하고 [사전 연결이 미치는 영향을 테스트](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/)하십시오. {% endAside %}
+
+### `dns-prefetch`
+
+`<link rel="dns-prefetch>`은 `<link rel="preconnect">`가 처리하는 것의 작은 부분집합을 처리합니다. 연결 설정에는 DNS 조회 및 TCP 핸드셰이크가 포함되며 보안 출처의 경우 TLS 협상이 포함됩니다. `dns-prefetch`는 브라우저가 명시적으로 호출되기 전에 특정 도메인의 DNS만 확인하도록 지시합니다.
+
+`preconnect` 힌트는 가장 중요한 연결에만 사용하는 것이 가장 좋습니다. 덜 중요한 타사 도메인의 경우 `<link rel=dns-prefetch>`를 사용하십시오.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[`dns-prefetch`에 대한 브라우저 지원](https://caniuse.com/#search=dns-prefetch)은 [`preconnect` 지원](https://caniuse.com/#search=preconnect)과 약간 다르기 때문에, `dns-prefetch`는 `preconnect`가 지원하지 않는 브라우저에 대한 대체 역할을 할 수 있습니다. 이를 안전하게 구현하려면 별도의 링크 태그를 사용하십시오.
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## 타사 리소스 지연 로드
+
+내장된 타사 리소스는 제대로 구성되지 않은 경우 느린 페이지 속도에 크게 기여할 수 있습니다. 중요하지 않거나 스크롤 없이 볼 수 있는 경우(즉, 사용자가 보기 위해 스크롤해야 하는 경우) 지연 로드는 페이지 속도와 페인트 메트릭을 개선하는 좋은 방법입니다. 이렇게 하면 사용자는 기본 페이지 콘텐츠를 더 빨리 얻을 수 있고 더 나은 경험을 할 수 있습니다.
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="스크롤 가능한 콘텐츠가 화면 너머로 확장되는 모바일 기기에 표시되는 웹페이지의 다이어그램입니다. 스크롤 없이 볼 수 있는 콘텐츠는 로드되지 않았기 때문에 채도가 낮습니다. 아직.", width="366", height="438" %}</figure>
+
+한 가지 효과적인 접근 방식은 기본 페이지 콘텐츠가 로드된 후 타사 콘텐츠를 지연 로드하는 것입니다. 광고는 이 접근 방식의 좋은 후보입니다.
+
+광고는 많은 사이트에서 중요한 수입원이지만 사용자는 콘텐츠를 찾아옵니다. 광고를 지연 로드하고 주요 콘텐츠를 더 빠르게 전달하면 광고의 전체 조회가능성 비율을 높일 수 있습니다. 예를 들어 MediaVine은 [지연 로드 광고](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/)로 전환하여 페이지 로드 속도가 200% 향상되었습니다. DoubleClick은 [공식 문서](https://support.google.com/dfp_premium/answer/4578089#lazyloading)에서 광고를 지연 로드하는 방법에 대한 지침을 제공합니다.
+
+다른 접근 방식은 사용자가 페이지의 해당 섹션으로 스크롤할 때만 타사 콘텐츠를 로드하는 것입니다.
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/)는 요소가 브라우저의 뷰포트에 들어오거나 나갈 때 효율적으로 감지하는 브라우저 API이며 이 기술을 구현하는 데 사용할 수 있습니다. [lazysizes](/use-lazysizes-to-lazyload-images/)는 [`iframes`](http://afarkas.github.io/lazysizes/#examples)을 지연 로드하는 인기 있는 JavaScript 라이브러리입니다. YouTube 임베드 및 [위젯](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks)을 지원합니다. IntersectionObserver에 대한 [선택적 지원](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js)도 있습니다.
+
+{% Aside 'caution' %} 자바스크립트로 리소스를 지연 로드할 때 주의하세요. 불안정한 네트워크 상태로 인해 JavaScript가 로드되지 않으면 리소스가 전혀 로드되지 않습니다. {% endAside %}
+
+[이미지 및 iframe을 지연 로드하기 위해 `loading`](/browser-level-image-lazy-loading/) 속성을 사용하는 것은 JavaScript 기술에 대한 훌륭한 대안이며 최근에 Chrome 76에서 사용할 수 있게 되었습니다!
+
+## 타사 스크립트 제공 방법 최적화
+
+### 타사 CDN 호스팅
+
+타사 공급업체는 일반적으로 [CDN(콘텐츠 전송 네트워크)](https://en.wikipedia.org/wiki/Content_delivery_network)에서 호스팅하는 JavaScript 파일의 URL을 제공하는 것이 일반적입니다. 이 접근 방식의 이점은 URL을 복사하여 붙여넣기만 하면 빠르게 시작할 수 있고 유지 관리 오버헤드가 없다는 것입니다. 타사 공급업체가 서버 구성 및 스크립트 업데이트를 처리합니다.
+
+그러나 나머지 리소스와 동일한 출처에 있지 않기 때문에 공용 CDN에서 파일을 로드하려면 네트워크 비용이 듭니다. 브라우저는 DNS 조회를 수행하고, 새 HTTP 연결을 설정하고, 보안 출처에서 공급업체 서버와 SSL 핸드셰이크를 수행해야 합니다.
+
+타사 서버의 파일을 사용하는 경우 캐싱을 거의 제어할 수 없습니다. 다른 사람의 캐싱 전략에 의존하면 스크립트가 불필요하게 네트워크에서 너무 자주 다시 가져올 수 있습니다.
+
+### 타사 스크립트 자체 호스트
+
+자체 호스팅 타사 스크립트는 스크립트의 로드 프로세스를 더 잘 제어할 수 있는 옵션입니다. 자체 호스팅을 통해 다음을 수행할 수 있습니다.
+
+- DNS 조회 및 왕복 시간을 줄입니다.
+- [HTTP 캐싱](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) 헤더를 개선합니다.
+- [HTTP/2 서버 푸시](/performance-http2/)를 활용합니다.
+
+예를 들어 Casper는 A/B 테스트 스크립트를 자체 호스팅하여 로드 시간을 [1.7초 단축](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec)했습니다.
+
+자체 호스팅에는 한 가지 큰 단점이 있습니다. 스크립트가 오래될 수 있고 API 변경이나 보안 수정이 있을 때 자동 업데이트를 받지 못한다는 것입니다.
+
+{% Aside 'caution' %}
+
+스크립트를 수동으로 업데이트하면 개발 프로세스에 많은 오버헤드가 추가될 수 있으며 중요한 업데이트를 놓칠 수 있습니다. 모든 리소스를 제공하기 위해 CDN 호스팅을 사용하지 않는다면 [에지 캐싱](https://www.cloudflare.com/learning/cdn/glossary/edge-server/)도 놓치게 되며 서버 압축을 최적화해야 합니다. {% endAside%}
+
+### 서비스 워커를 사용하여 타사 서버의 스크립트 캐시
+
+타사 CDN 이점을 유지하면서 캐싱을 더 잘 제어할 수 있는 자체 호스팅의 대안은 [서비스 워커를 사용하여 타사 서버의 스크립트를 캐시하는 것](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)입니다. 이렇게 하면 네트워크에서 스크립트를 다시 가져오는 빈도를 제어할 수 있으며 페이지가 주요 사용자 순간에 도달할 때까지 중요하지 않은 타사 리소스에 대한 요청을 조절하는 로드 전략을 만들 수 있습니다. `preconnect`을 사용하여 초기 연결을 설정하면 네트워크 비용을 어느 정도 완화할 수도 있습니다.
diff --git a/src/site/content/ko/fast/extract-critical-css/index.md b/src/site/content/ko/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..8ebead841c2
--- /dev/null
+++ b/src/site/content/ko/fast/extract-critical-css/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: 중요한 CSS 추출
+subhead: 중요한 CSS 기술로 렌더링 시간을 개선하는 방법을 알아보세요.
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: 렌치와 드라이버를 진열한 사진.
+description: |2
+
+  중요한 CSS 기술로 렌더링 시간을 개선하는 방법과 프로젝트에 가장 적합한 도구를 선택하는 방법에 대해 알아보세요.
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 구문 분석해야 CSS를 렌더링 차단 리소스로 만듭니다. CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹 페이지가 렌더링되는 데 걸리는 시간이 크게 늘어날 수 있습니다.
+
+{% Aside 'key-term' %} Critical CSS는 사용자에게 가능한 한 빨리 콘텐츠를 렌더링하기 위해 스크롤 없이 볼 수 있는 콘텐츠에 대한 CSS를 추출하는 기술입니다. {% endAside %}
+
+<figure>{% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="웹페이지가 화면 가장자리를 넘고 있는 노트북 및 모바일 장치의 그림", width="800", height="469", class ="" %}</figure>
+
+{% Aside 'note' %} 스크롤 없이 볼 수 있는 부분은 스크롤하기 전 페이지 로드 시 뷰어가 보는 모든 콘텐츠입니다. 무수히 많은 장치와 화면 크기가 있기 때문에 스크롤 없이 볼 수 있는 콘텐츠 이상으로 간주되는 보편적으로 정의된 픽셀 높이는 없습니다. {% endAside %}
+
+`<head>`에서 추출된 스타일을 인라인하면 이러한 스타일을 가져오기 위해 추가로 요청할 필요가 없습니다. CSS의 나머지 부분은 비동기식으로 로드할 수 있습니다.
+
+<figure>{% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="머리에 인라인된 중요한 CSS가 있는 HTML 파일", width="800", height="325" %}<figcaption> 인라인 중요 CSS</figcaption></figure>
+
+렌더링 시간을 개선하면 특히 열악한 네트워크 조건에서 [인지된 성능](/rail/#focus-on-the-user)에 큰 차이를 만들 수 있습니다. 모바일 네트워크에서는 대역폭에 관계없이 높은 대기 시간이 문제입니다.
+
+<figure>{% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="3G 연결에서 렌더링 차단 CSS가 있는 페이지(상단)와 인라인 중요 CSS가 있는 동일한 페이지(하단)를 로드하는 필름 스트립 보기 비교. 맨 위로 필름 스트립은 최종적으로 콘텐츠를 표시하기 전에 6개의 빈 프레임을 표시합니다. 하단 필름 스트립은 첫 번째 프레임에 의미 있는 콘텐츠를 표시합니다.", width="800", height="363" %}<figcaption> 3G 연결에서 렌더링 차단 CSS가 있는 페이지(상단)와 인라인 중요 CSS가 있는 동일한 페이지(하단) 로드 비교</figcaption></figure>
+
+[FCP(First Contentful Paint)](/fcp/)가 불량하고 Lighthouse 감사에서 "렌더링 차단 리소스 제거" 기회가 표시되는 경우 중요 CSS를 사용하는 것이 좋습니다.
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="'렌더 차단 리소스 제거' 또는 '사용하지 않는 CSS 연기' 기회를 사용한 Lighthouse 감사", width="743", height="449" %}
+
+{% Aside 'gotchas' %} 많은 양의 CSS를 인라인하면 HTML 문서의 나머지 부분의 전송이 지연된다는 점에 유의하세요. 모든 것이 우선시되면 아무것도 아닙니다. 인라인은 또한 브라우저가 후속 페이지 로드에서 재사용하기 위해 CSS를 캐싱하는 것을 방지한다는 점에서 몇 가지 단점이 있으므로 드물게 사용하는 것이 가장 좋습니다. {% endAside %}
+
+<p id="14KB">첫 번째 렌더링 왕복 횟수를 최소화하려면 스크롤 없이 볼 수 있는 콘텐츠를 <strong>14KB</strong> (압축) 미만으로 유지하는 것을 목표로 합니다.</p>
+
+{% Aside 'note' %} 새로운 [TCP](https://hpbn.co/building-blocks-of-tcp/) 연결은 클라이언트와 서버 사이에서 사용 가능한 전체 대역폭을 즉시 사용할 수 없으며, 모두 연결할 수 있는 것보다 많은 데이터로 연결에 과부하가 걸리는 것을 피하기 위해 [느린 시작](https://hpbn.co/building-blocks-of-tcp/#slow-start)을 거칩니다. 이 과정에서 서버는 적은 양의 데이터로 전송을 시작하고, 완벽한 상태로 클라이언트에 도달하면 다음 왕복에서 양의 2배가 된다. 대부분의 서버에서 첫 번째 왕복에서 전송할 수 있는 최대 크기는 패킷 10개 또는 약 14KB입니다. {% endAside %}
+
+이 기술로 달성할 수 있는 성능 영향은 웹사이트 유형에 따라 다릅니다. 일반적으로 사이트에 CSS가 많을수록 인라인 CSS의 영향도 커집니다.
+
+## 도구 개요
+
+페이지의 중요한 CSS를 자동으로 결정할 수 있는 훌륭한 도구가 많이 있습니다. 이 작업을 수동으로 수행하는 것은 지루한 프로세스이기 때문에 이것은 좋은 소식입니다. 뷰포트의 각 요소에 적용되는 스타일을 결정하려면 전체 DOM을 분석해야 합니다.
+
+### Critical
+
+[Critical](https://github.com/addyosmani/critical)은 스크롤 없이 볼 수 있는 CSS를 추출, 축소 및 인라인하며 [npm 모듈](https://www.npmjs.com/package/critical)로 사용할 수 있습니다. Gulp(직접) 또는 Grunt([플러그인](https://github.com/bezoerb/grunt-critical))와 함께 사용할 수 있으며 [webpack 플러그인](https://github.com/anthonygore/html-critical-webpack-plugin)도 있습니다.
+
+프로세스에서 많은 생각을 필요로 하는 간단한 도구입니다. 스타일시트를 지정할 필요도 없습니다. Critical은 자동으로 스타일시트를 감지합니다. 또한 여러 화면 해상도에 대해 중요한 CSS 추출을 지원합니다.
+
+### criticalCSS
+
+[CriticalCSS](https://github.com/filamentgroup/criticalCSS) 는 스크롤 없이 볼 수 있는 CSS를 추출하는 또 다른 [npm 모듈입니다.](https://www.npmjs.com/package/criticalcss) CLI로도 사용 가능합니다.
+
+중요한 CSS를 인라인하고 축소하는 옵션은 없지만 실제로 중요한 CSS에 속하지 않는 규칙을 강제로 포함할 수 있고 `@font-face` 선언을 포함하는 것에 대해 더 세부적으로 제어할 수 있습니다.
+
+### Penthouse
+
+[Penthouse](https://github.com/pocketjoso/penthouse)는 사이트나 앱에 DOM에 동적으로 주입되는 많은 수의 스타일이나 스타일이 있는 경우에 좋은 선택입니다(Angular 앱에서 일반적). 내부적으로 [Puppeteer](https://github.com/GoogleChrome/puppeteer)를 사용 하며 [온라인 호스팅 버전](https://jonassebastianohlsson.com/criticalpathcssgenerator/)도 제공합니다.
+
+Penthouse는 스타일시트를 자동으로 감지하지 않으므로 중요한 CSS를 생성할 HTML 및 CSS 파일을 지정해야 합니다. 장점은 많은 작업을 병렬로 실행하는 데 좋습니다.
diff --git a/src/site/content/ko/fast/image-cdns/index.md b/src/site/content/ko/fast/image-cdns/index.md
new file mode 100644
index 00000000000..1a199b8e154
--- /dev/null
+++ b/src/site/content/ko/fast/image-cdns/index.md
@@ -0,0 +1,83 @@
+---
+layout: post
+title: 이미지 CDN을 사용하여 이미지 최적화
+authors:
+  - katiehempenius
+description: |2
+
+  이미지 CDN은 이미지 최적화에 탁월합니다.
+
+  이미지 CDN으로 전환하면 이미지 바이트를 40–80% 절약할 수 있습니다.
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## 이미지 CDN을 사용하는 이유는 무엇입니까?
+
+이미지 콘텐츠 전송 네트워크(CDN)는 이미지 최적화에 탁월합니다. 이미지 CDN으로 전환하면 이미지 파일 크기를 [40~80% 줄일 수 있습니다.](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s) 이론상으로는 빌드 스크립트만 사용하여 동일한 결과를 얻을 수 있지만 실제로는 드뭅니다.
+
+## 이미지 CDN이란 무엇입니까?
+
+이미지 CDN은 이미지 변환, 최적화 및 전달을 전문으로 합니다. 사이트에서 사용되는 이미지에 액세스하고 조작하기 위한 API로 간주할 수도 있습니다. 이미지 CDN에서 로드된 이미지의 경우 이미지 URL은 로드할 이미지뿐만 아니라 크기, 형식 및 품질과 같은 매개변수도 나타냅니다. 이를 통해 다양한 사용 사례에 대한 이미지 변형을 쉽게 만들 수 있습니다.
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="이미지 CDN과 클라이언트 간의 요청/응답 흐름을 표시합니다. 크기 및 형식과 같은 매개변수는 동일한 이미지의 변형을 요청하는 데 사용됩니다.", width="800", height="408" %}<figcaption> 변환의 예 이미지 CDN은 이미지 URL의 매개변수를 기반으로 수행할 수 있습니다.</figcaption></figure>
+
+이미지 CDN은 필요에 따라 새 버전의 이미지를 생성한다는 점에서 빌드 시 이미지 최적화 스크립트와 다릅니다. 결과적으로 CDN은 일반적으로 빌드 스크립트보다 각 개별 클라이언트에 대해 크게 사용자 지정된 이미지를 만드는 데 더 적합합니다.
+
+## 이미지 CDN이 URL을 사용하여 최적화 옵션을 나타내는 방법
+
+이미지 CDN에서 사용하는 이미지 URL은 이미지와 이미지에 적용해야 하는 변환 및 최적화에 대한 중요한 정보를 전달합니다. URL 형식은 이미지 CDN에 따라 다르지만 대략적으로는 모두 유사한 기능을 가지고 있습니다. 가장 일반적인 몇 가지 기능을 살펴보겠습니다.
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="이미지 URL은 일반적으로 원본, 이미지, 보안 키 및 변환 구성요소로 구성됩니다.", width="800", height="127" %}</figure>
+
+### 기원
+
+이미지 CDN은 자체 도메인 또는 이미지 CDN의 도메인에 있을 수 있습니다. 타사 이미지 CDN은 일반적으로 사용자 지정 도메인을 유료로 사용할 수 있는 옵션을 제공합니다. 자체 도메인을 사용하면 URL을 변경할 필요가 없기 때문에 나중에 이미지 CDN을 쉽게 전환할 수 있습니다.
+
+위의 예는 사용자 지정 도메인이 아닌 개인별로 맞춤 설정된 하위 도메인과 함께 이미지 CDN의 도메인("example-cdn.com")을 사용합니다.
+
+### 이미지
+
+이미지 CDN은 일반적으로 필요할 때 기존 위치에서 이미지를 자동으로 검색하도록 구성할 수 있습니다. 이 기능은 이미지 CDN에 의해 생성된 이미지에 대한 URL 내에 *기존 이미지*의 전체 URL을 포함함으로써 달성되는 경우가 많습니다. 예를 들어, `https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`와 같은 URL을 볼 수 있습니다. 이 URL은 `https://flowers.com/daisy.jpg`에 있는 이미지를 검색하고 최적화합니다.
+
+이미지 CDN에 이미지를 업로드하는 널리 지원되는 또 다른 방법은 HTTP POST 요청을 통해 이미지 CDN의 API에 이미지를 보내는 것입니다.
+
+### 보안 키
+
+보안 키는 다른 사람이 새 버전의 이미지를 만드는 것을 방지합니다. 이 기능을 사용하는 경우 이미지의 새 버전마다 고유한 보안 키가 필요합니다. 누군가 이미지 URL의 매개변수를 변경하려고 하지만 유효한 보안 키를 제공하지 않으면 새 버전을 만들 수 없습니다. 이미지 CDN은 보안 키 생성 및 추적에 대한 세부 정보를 처리합니다.
+
+### 변환
+
+이미지 CDN은 수십 가지, 경우에 따라 수백 가지의 다양한 이미지 변환을 제공합니다. 이러한 변환은 URL 문자열을 통해 지정되며 동시에 여러 변환을 사용하는 데 제한이 없습니다. 웹 성능의 맥락에서 가장 중요한 이미지 변환은 크기, 픽셀 밀도, 형식 및 압축입니다. 이러한 변환은 이미지 CDN으로 전환하면 일반적으로 이미지 크기가 크게 감소하는 이유입니다.
+
+성능 변환에 대해 객관적으로 최상의 설정이 있는 경향이 있으므로 일부 이미지 CDN은 이러한 변환에 대해 "자동" 모드를 지원합니다. 예를 들어, 이미지가 WebP 형식으로 변환되도록 지정하는 대신 CDN이 자동으로 최적의 형식을 선택하고 제공하도록 할 수 있습니다. 이미지 CDN이 이미지를 변환하는 가장 좋은 방법을 결정하는 데 사용할 수 있는 신호는 다음과 같습니다.
+
+- [클라이언트 힌트](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/)(예: 뷰포트 너비, DPR 및 이미지 너비)
+- [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data) 헤더
+- [사용자 에이전트](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) 요청 헤더
+- [네트워크 정보 API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+
+예를 들어 이미지 CDN은 Edge 브라우저에 JPEG XR, Chrome 브라우저에 WebP, 아주 구형인 브라우저에 JPEG를 제공할 수 있습니다. 자동 설정은 이미지 CDN에서 지원되면 새로운 기술을 채택하기 위해 코드를 변경할 필요 없이 이미지를 최적화하는 데 있어 이미지 CDN의 상당한 전문성을 활용할 수 있기 때문에 널리 사용됩니다.
+
+## 이미지 CDN의 유형
+
+이미지 CDN은 자체 관리 및 타사 관리의 두 가지 범주로 나눌 수 있습니다.
+
+### 자체 관리 이미지 CDN
+
+자체 관리형 CDN은 자신의 인프라를 편안하게 유지 관리할 수 있는 엔지니어링 직원이 있는 사이트에 적합합니다.
+
+[Thumbor](https://github.com/thumbor/thumbor)는 현재 사용할 수 있는 유일한 자체 관리 이미지 CDN입니다. 오픈 소스이며 무료로 사용할 수 있지만 일반적으로 대부분의 상용 CDN보다 기능이 적고 설명서가 다소 제한적입니다. [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor), [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87) 및 [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/)는 Thumbor를 사용하는 3가지 사이트입니다. 설정 지침은 [Thumbor 이미지 CDN 설치 방법](/install-thumbor) 게시물을 참조하십시오.
+
+### 타사 이미지 CDN
+
+타사 이미지 CDN은 이미지 CDN을 서비스로 제공합니다. 클라우드 공급자가 서버 및 기타 인프라를 유료로 제공하는 것처럼; 이미지 CDN은 이미지 최적화 및 전송을 유료로 제공합니다. 타사 이미지 CDN은 기본 기술을 유지하므로 시작하는 것이 상당히 간단하고 일반적으로 10-15분 내에 완료할 수 있지만 대규모 사이트의 경우 전체 마이그레이션은 훨씬 더 오래 걸릴 수 있습니다. 타사 이미지 CDN은 일반적으로 사용 계층에 따라 가격이 책정되며 대부분의 이미지 CDN은 무료 계층 또는 무료 평가판을 제공하여 제품을 사용해 볼 수 있는 기회를 제공합니다.
+
+## 이미지 CDN 선택
+
+이미지 CDN에는 좋은 옵션이 많이 있습니다. 일부는 다른 것보다 더 많은 기능을 가지고 있지만 모두 이미지의 바이트를 절약하여 페이지를 더 빨리 로드하는 데 도움이 될 것입니다. 기능 세트 외에도 이미지 CDN을 선택할 때 고려해야 할 다른 요소로는 비용, 지원, 문서, 설정 또는 마이그레이션 용이성 등이 있습니다.
+
+결정을 내리기 전에 직접 시도해 보는 것도 도움이 될 수 있습니다. 아래에서 여러 이미지 CDN을 빠르게 시작하는 방법에 대한 지침이 포함된 코드랩을 찾을 수 있습니다.
diff --git a/src/site/content/ko/fast/index.md b/src/site/content/ko/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/ko/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/ko/fast/lazy-loading-images/index.md b/src/site/content/ko/fast/lazy-loading-images/index.md
new file mode 100644
index 00000000000..6d6e8231484
--- /dev/null
+++ b/src/site/content/ko/fast/lazy-loading-images/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: 이미지 지연 로딩
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2022-08-11
+description: |2-
+
+  이 게시물에서는 지연 로딩과 이미지 지연 로딩 시 사용할 수 있는 옵션에 대해 설명합니다.
+tags:
+  - performance
+  - images
+feedback:
+  - api
+---
+
+`<img>` 요소 또는 CSS 배경 이미지로 인라인되기 때문에 이미지가 웹페이지에 나타날 수 있습니다. 이 게시물에서는 두 가지 유형의 이미지를 지연 로드하는 방법에 대해 알아봅니다.
+
+## 인라인 이미지 {: #images-inline }
+
+가장 일반적인 지연 로딩 후보는 `<img>` 요소에서 사용되는 이미지입니다. 인라인 이미지에는 지연 로딩을 위한 세 가지 옵션이 있으며, 이는 브라우저 간 최상의 호환성을 위해 조합하여 사용할 수 있습니다.
+
+- [브라우저 수준 지연 로딩 사용](#images-inline-browser-level)
+- [Intersection Observer 사용](#images-inline-intersection-observer)
+
+### 브라우저 수준 지연 로딩 사용 {: #images-inline-browser-level }
+
+Chrome과 Firefox는 모두 `loading` 속성으로 지연 로딩을 지원합니다. 이 속성을 `<img>` 요소와 `<iframe>` 요소에 추가할 수 있습니다. `lazy` 값은 이미지가 뷰포트에 있는 경우 즉시 이미지를 로드하고 사용자가 이미지 근처에서 스크롤할 때 다른 이미지를 가져오도록 브라우저에 지시합니다.
+
+{% Aside %} `<iframe loading="lazy">`가 현재 비표준임에 유의하십시오. Chromium에서 구현되었지만 아직 사양이 없으며 이러한 일이 발생하면 향후 변경될 수 있습니다. 사양의 일부가 될 때까지 `loading` 속성을 사용하여 iframes를 지연 로드하지 않는 것이 좋습니다. {% endAside %}
+
+브라우저 지원에 대한 자세한 내용은 MDN의 [브라우저 호환성](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility) 테이블의 `loading` 필드를 참조하십시오. 브라우저가 지연 로딩을 지원하지 않을 경우 속성이 무시되고 평소와 같이 이미지가 즉시 로드됩니다.
+
+대부분의 웹 사이트에서 이 속성을 인라인 이미지에 추가하면 성능이 향상되고 스크롤할 수 없는 이미지를 로드할 때 시간을 절약할 수 있습니다. 이미지 수가 많고 로딩 지연을 지원하지 않는 브라우저 사용자가 혜택을 받을 수 있도록 하려면 이 방법을 다음에 설명하는 방법 중 하나와 결합해야 합니다.
+
+자세히 알아보려면 [웹용 브라우저 수준 지연 로딩](/browser-level-image-lazy-loading/)을 확인하세요.
+
+### Intersection Observer 사용 {: #images-inline-intersection-observer }
+
+`<img>` 요소의 지연 로딩을 폴리필하기 위해 JavaScript를 사용하여 해당 요소가 뷰포트에 있는지 확인합니다. 그렇다면 `src`(종종 `srcset`) 속성이 원하는 이미지 콘텐츠에 대한 URL로 채워집니다.
+
+이전에 지연 로딩 코드를 작성한 경우, `scroll` 또는 `resize`와 같은 이벤트 핸들러를 사용하여 작업을 완료했을 수 있습니다. 이 접근 방식은 여러 브라우저에서 가장 호환되지만 최신 브라우저는 [Intersection Observer API](https://developer.chrome.com/blog/intersectionobserver/)를 통해 요소 가시성을 확인하는 작업을 수행하는 더 성능적이고 효율적인 방법을 제공합니다.
+
+Intersection Observer는 지루한 요소 가시성 감지 코드를 작성하는 대신 요소를 감시하기 위해 Observer를 등록하기만 하면 되기 때문에 다양한 이벤트 핸들러에 의존하는 코드보다 사용 및 읽기가 더 쉽습니다. 남은 일은 요소가 표시될 때 무엇을 할지 결정하는 것입니다. 지연 로드된 `<img>` 요소에 대해 다음과 같은 기본 마크업 패턴을 가정해 보겠습니다.
+
+```html
+<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
+```
+
+이 마크업에서 집중해야 할 세 가지 관련 부분이 있습니다.
+
+1. JavaScript에서 요소를 선택하는 `class` 속성.
+2. 페이지가 처음 로드될 때 표시될 자리 표시자 이미지를 참조하는 `src` 속성.
+3. 요소가 뷰포트에 있을 때 로드할 이미지의 URL을 포함하는 자리 표시자 속성인 `data-src` 및 `data-srcset` 속성.
+
+이제 JavaScript에서 Intersection Observer를 사용하여 이 마크업 패턴을 사용하여 이미지를 지연 로드하는 방법을 살펴보겠습니다.
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.srcset = lazyImage.dataset.srcset;
+          lazyImage.classList.remove("lazy");
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+});
+```
+
+문서의 `DOMContentLoaded` 이벤트에서, 이 스크립트는 `lazy`의 등급이 있는 모든 `<img>` 요소에 대한 DOM을 조회합니다. Intersection Observer를 사용 가능한 경우, `img.lazy` 요소가 뷰포인트에 진입할 때 콜백을 실행하는 새로운 Observer를 생성하십시오.
+
+{% Glitch { id: 'lazy-intersection-observer', path: 'index.html', previewSize: 0 } %}
+
+Intersection Observer는 모든 최신 브라우저에서 사용할 수 있습니다. 따라서 이를 `loading="lazy"`에 대한 폴리필로 사용하면 대부분의 방문자가 지연 로딩을 사용할 수 있습니다.
+
+## CSS의 이미지 {: #images-css }
+
+`<img>` 태그는 웹 페이지에서 이미지를 사용하는 가장 일반적인 방법이지만 CSS [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) 속성(및 기타 속성)을 통해 이미지를 호출할 수도 있습니다. 브라우저 수준의 지연 로딩은 CSS 배경 이미지에 적용되지 않으므로 지연 로딩할 배경 이미지가 있는 경우 다른 방법을 고려해야 합니다.
+
+가시성에 관계없이 로드하는 `<img>` 요소와는 달리 CSS의 이미지 로드 동작은 더 많은 추측을 통해 수행됩니다. [문서와 CSS 객체 모델](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model) 및 [렌더 트리](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)가 구축되면 브라우저는 외부 리소스를 요청하기 전에 CSS가 문서에 어떻게 적용되는지 검사합니다. 브라우저가 외부 리소스를 포함하는 CSS 규칙이 현재 구성된 문서에 적용되지 않는다고 판단한 경우 브라우저는 이를 요청하지 않습니다.
+
+JavaScript를 사용하여 요소가 뷰포트 내에 있는지 확인한 다음 배경 이미지를 호출하는 스타일링을 적용하는 요소에 클래스를 적용하여 CSS에서 이미지 로드를 연기하는 데 이 추측 동작을 사용할 수 있습니다. 이 경우 초기 로드 시점 대신 필요한 시점에 이미지가 다운로드됩니다. 예를 들어 큰 히어로 배경 이미지가 포함된 요소를 가정해 보겠습니다.
+
+```html
+<div class="lazy-background">
+  <h1>Here's a hero heading to get your attention!</h1>
+  <p>Here's hero copy to convince you to buy a thing!</p>
+  <a href="/buy-a-thing">Buy a thing!</a>
+</div>
+```
+
+`div.lazy-background` 요소는 일반적으로 일부 CSS에서 호출하는 히어로 배경 이미지를 포함합니다. 그러나 이 지연 로딩 예제에서는 요소가 뷰포트에 있을 때 요소에 추가된 `visible` 클래스를 통해 `div.lazy-background` 요소의 `background-image` 속성을 격리할 수 있습니다.
+
+```css
+.lazy-background {
+  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
+}
+
+.lazy-background.visible {
+  background-image: url("hero.jpg"); /* The final image */
+}
+```
+
+여기에서 JavaScript를 사용하여 요소가 뷰포트에 있는지 확인하고(Intersection Observer 사용!) 이미지를 로드하는 시점에서 `visible` 클래스를 `div.lazy-background` 요소에 추가합니다.
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          lazyBackgroundObserver.unobserve(entry.target);
+        }
+      });
+    });
+
+    lazyBackgrounds.forEach(function(lazyBackground) {
+      lazyBackgroundObserver.observe(lazyBackground);
+    });
+  }
+});
+```
+
+{% Glitch { id: 'lazy-background', path: 'index.html', previewSize: 0 } %}
+
+## 지연 로딩 라이브러리 {: #libraries }
+
+다음 라이브러리를 사용하여 이미지를 지연 로드할 수 있습니다.
+
+- [lazysizes](https://github.com/aFarkas/lazysizes)는 이미지와 iframe을 지연 로드하는 모든 기능을 갖춘 지연 로드 라이브러리입니다. 이것이 사용하는 패턴은 `lazyload` 클래스를 `<img>` 요소와 자동으로 결합하고 `src` 및/또는 `srcset` 속성으로 각각 스와핑되는 콘텐츠인 `data-src` 및/또는 `data-srcset` 속성으로 이미지 URL을 지정해야 한다는 점에서 여기에 제시된 코드 예제와 상당히 유사합니다. 이는 Intersection Observer(폴리필 가능)을 사용하며 [여러 플러그인](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo)으로 확장하여 비디오 지연 로드 같은 작업을 수행할 수 있습니다. [lazysizes 사용 방법에 대해 자세히 알아보세요](/use-lazysizes-to-lazyload-images/).
+- [Vanilla-lazyload](https://github.com/verlok/vanilla-lazyload)는 이미지, 배경 이미지, 비디오, iframe 및 스크립트를 지연 로드하는 가벼운 옵션입니다. 이는 Intersection Observer를 활용하고 반응형 이미지를 지원하며 브라우저 수준의 지연 로딩을 가능하게 합니다.
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js)는 Intersection Observer만 사용하는 또 다른 가벼운 옵션입니다. 따라서 고성능이지만 이전 브라우저에서 사용하려면 먼저 폴리필해야 합니다.
+- React 전용 지연 로딩 라이브러리가 필요한 경우 [react-lazyload](https://github.com/jasonslyvia/react-lazyload)를 고려하세요. 이는 Intersection Observer를 사용하지는 않지만, React로 애플리케이션을 개발하는 데 익숙한 사람들을 위해 이미지를 지연 로드하는 친숙한 방법을 *제공합니다*.
diff --git a/src/site/content/ko/fast/lazy-loading-video/index.md b/src/site/content/ko/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..5caf3a35334
--- /dev/null
+++ b/src/site/content/ko/fast/lazy-loading-video/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: 동영상 지연 로드
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: |2-
+
+  이 게시물에서는 지연 로딩 및 비디오 지연 로딩 시 사용할 수 있는 옵션에 대해 설명합니다.
+tags:
+  - performance
+feedback:
+  - api
+---
+
+[이미지 요소](/lazy-loading-images)와 마찬가지로 동영상을 지연 로드할 수도 있습니다. 동영상은 일반적으로 `<video>` 요소를 통해 로드됩니다([`<img>`를 사용하는 대체 방법](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/)이 등장한 경우에도). `<video>`를 지연 로드하는 *방법*은 사용 사례에 따라 다릅니다. 각각 다른 솔루션이 필요한 몇 가지 시나리오에 대해 논의해 보겠습니다.
+
+## 자동 재생되지 않는 동영상의 경우 {: #video-no-autoplay }
+
+사용자가 재생을 시작한 동영상(즉, 자동 재생 *되지 않는* 동영상)의 경우 `<video>` [`preload` 속성](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload)을 지정하는 것이 바람직할 수 있습니다.
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+위의 예에서는 값이 `none` `preload` 속성을 사용하여 브라우저가 동영상 데이터를 미리 로드 *하지 못하도록 합니다.* `poster` 속성은 동영상이 로드되는 동안 공간을 차지할 자리 표시자를 `<video>`에 제공합니다. 그 이유는 동영상 로드에 대한 기본 동작이 브라우저마다 다를 수 있기 때문입니다.
+
+- `preload`의 기본값은 `auto`였지만 Chrome 64에서는 이제 `metadata`로 기본 설정됩니다. `Content-Range` 헤더를 사용하여 비디오의 일부를 미리 로드할 수 있습니다. Firefox, Edge 및 Internet Explorer 11은 유사하게 작동합니다.
+- 데스크톱의 Chrome과 마찬가지로 11.0 데스크톱 버전의 Safari는 다양한 동영상을 미리 로드합니다. 버전 11.2부터 비디오 메타데이터만 미리 로드됩니다. [iOS의 Safari에서는 동영상이 미리 로드되지 않습니다](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9) .
+- [데이터 절약 모드](https://support.google.com/chrome/answer/2392284)가 활성화되면 `preload`가 기본적으로 `none`으로 설정됩니다.
+
+`preload`와 관련된 브라우저 기본 동작은 고정되어 있지 않기 때문에 명시적인 것이 최선의 방법일 것입니다. 사용자가 재생을 시작하는 경우 `preload="none"`을 사용하는 것이 모든 플랫폼에서 동영상 로드를 연기하는 가장 쉬운 방법입니다. `preload` 속성은 동영상 콘텐츠의 로드를 지연시키는 유일한 방법이 아닙니다. [*동영상 사전 로드를 사용한 빠른 재생*](/fast-playback-with-preload/)은 JavaScript에서 동영상 재생 작업에 대한 몇 가지 아이디어와 통찰력을 제공할 수 있습니다.
+
+안타깝게도 다음에 다룰 애니메이션 GIF 대신 동영상을 사용하려는 경우에는 유용하지 않습니다.
+
+## 애니메이션 GIF를 대체하는 동영상의 경우 {: #video-gif-replacement }
+
+애니메이션 GIF는 널리 사용되지만 여러 면에서 특히 파일 크기 면에서 동급의 동영상에 미치지 못합니다. 애니메이션 GIF는 수 메가바이트의 데이터 범위로 확장될 수 있습니다. 비슷한 화질의 비디오는 훨씬 작은 경향이 있습니다.
+
+애니메이션 GIF를 대체하기 위해 `<video>` 요소를 사용하는 `<img>` 요소만큼 간단하지 않습니다. 애니메이션 GIF에는 세 가지 특징이 있습니다.
+
+1. 로드되면 자동으로 재생됩니다.
+2. 계속 반복됩니다([항상 그렇지는 않음](https://davidwalsh.name/prevent-gif-loop)).
+3. 오디오 트랙이 없습니다.
+
+`<video>` 요소로 이를 달성하는 것은 다음과 같습니다:
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+`autoplay` , `muted` 및 `loop` 속성은 자명합니다. [`playsinline`은 iOS에서 자동 재생이 발생하는 데 필요합니다](https://webkit.org/blog/6784/new-video-policies-for-ios/). 이제 여러 플랫폼에서 작동하는 서비스 가능한 GIF 대체품이 생겼습니다. 하지만 지연 로딩은 어떻게 할까요? 시작하려면 `<video>` 마크업을 수정하십시오.
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+동영상이 지연 로드될 때까지 `<video>` 요소의 공간을 차지할 자리 표시자를 지정할 수 있는 [`poster` 속성](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)이 추가되었음을 알 수 있습니다. [`<img>` 지연 로딩 예제](/lazy-loading-images/)와 마찬가지로 `<source>` 요소 `data-src` 속성에 동영상 URL을 숨깁니다. 거기에서 Intersection Observer 기반 이미지 지연 로드 예제와 유사한 JavaScript 코드를 사용합니다.
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+`<video>` 요소를 지연 로드할 때 모든 하위 `<source>` 요소를 반복하고 해당 `data-src` 속성을 `src` 속성으로 전환해야 합니다. `load` 메서드를 호출하여 동영상 로드를 트리거해야 합니다. `autoplay` 속성에 따라 자동으로 재생되기 시작합니다.
+
+이 방법을 사용하면 애니메이션 GIF 동작을 에뮬레이트하는 동영상 솔루션이 있지만 애니메이션 GIF처럼 집중적인 데이터 사용량이 발생하지 않으며 해당 콘텐츠를 지연 로드할 수 있습니다.
+
+## 지연 로딩 라이브러리 {: #libraries }
+
+다음 라이브러리는 동영상을 지연 로드하는 데 도움이 될 수 있습니다.
+
+- [Vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) 및 [lozad.js](https://github.com/ApoorvSaxena/lozad.js)는 Intersection Observer만 사용하는 초경량 옵션입니다. 따라서 성능이 높지만 이전 브라우저에서 사용하려면 먼저 폴리필해야 합니다.
+- [yall.js](https://github.com/malchata/yall.js)는 Intersection Observer를 사용하고 이벤트 핸들러로 폴백하는 라이브러리입니다. IE11 및 주요 브라우저와 호환됩니다.
+- React 전용 지연 로딩 라이브러리가 필요한 경우 [react-lazyload](https://github.com/jasonslyvia/react-lazyload)를 고려하세요. 이는 Intersection Observer를 사용하지는 않지만, React로 애플리케이션을 개발하는 데 익숙한 사람들을 위해 이미지를 지연 로드하는 친숙한 방법을 *제공합니다*.
+
+이러한 지연 로딩 라이브러리 각각은 다양한 지연 로딩 노력을 위한 많은 마크업 패턴과 함께 잘 문서화되어 있습니다.
diff --git a/src/site/content/ko/fast/lazy-loading/index.md b/src/site/content/ko/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..b508c2164d0
--- /dev/null
+++ b/src/site/content/ko/fast/lazy-loading/index.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: 지연 로드를 사용하여 로드 속도 향상
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: 이 게시물은 지연 로드와 사이트에서 요소를 지연 로드하고 싶어 할 수 있는 이유를 설명합니다.
+tags:
+  - performance
+  - images
+---
+
+웹 사이트의 일반적인 페이로드에서 [이미지](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest) 및 [동영상](http://beta.httparchive.org/reports/page-weight#bytesVideo)이 차지하는 부분이 상당할 수 있습니다. 불행히도 프로젝트 이해 관계자는 기존 응용 프로그램에서 미디어 리소스를 줄이는 것을 꺼려할 수 있습니다. 이러한 교착 상태에서는, 특히 관련된 모든 당사자가 사이트 성능을 개선하기를 원하지만 거기에 도달하는 방법에 동의할 수 없는 경우 좌절감을 느낄 수 있습니다. 다행히 지연 로드는 초기 페이지 페이로드 *및* 로드 시간은 낮추지만 콘텐츠는 아끼지 않는 솔루션입니다.
+
+## 지연 로드란? {: #what }
+
+지연 로드는 페이지 로드 시 중요하지 않은 리소스의 로드를 연기하는 기술입니다. 대신 이러한 중요하지 않은 리소스는 필요한 순간에 로드됩니다. 이미지와 관련하여 "비중요"는 종종 "오프스크린"과 거의 같은 의미를 갖습니다. 여러분이 Lighthouse를 사용하며 몇 가지 개선 가능성을 조사했다면 [오프스크린 이미지 지연 감사](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/) 형식으로 이 영역에 있는 몇 가지 지침을 보았을 것입니다.
+
+<figure>{% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Lighthouse의 오프스크린 이미지 지연 감사의 스크린샷.", width="800", height="102" %} <figcaption>Lighthouse의 성능 감사 중 하나는 지연 로드 후보인 오프스크린 이미지를 식별하는 것입니다.</figcaption></figure>
+
+아마도 지연 로드가 작동하는 것을 이미 보았을 것이며 다음과 같이 진행됩니다.
+
+- 여러분은 페이지에 도착하면 콘텐츠를 읽으면서 스크롤을 시작합니다.
+- 어느 시점에 자리 표시자 이미지를 뷰포트로 스크롤합니다.
+- 자리 표시자 이미지가 갑자기 최종 이미지로 교체됩니다.
+
+이미지 지연 로드의 예는 인기 퍼블리싱 플랫폼인 [Medium](https://medium.com/)에서 확인할 수 있습니다. 이 플랫폼은 페이지 로드 시 가벼운 자리 표시자 이미지를 로드하고 뷰포트로 스크롤할 때 지연 로드 이미지로 대체합니다.트로 스크롤할 때 지연 로드 이미지로 대체합니다.
+
+<figure>{% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="탐색 중인 웹 사이트 Medium의 스크린샷으로 지연 로드가 작동하는 모습을 보여줍니다. 흐릿한 자리 표시자는 왼쪽에 있고 로드된 리소스는 오른쪽에 있습니다.", width="800", height="493" %} <figcaption>작동 중인 이미지 지연 로드의 예. 자리 표시자 이미지는 페이지 로드 시 로드되며(왼쪽), 뷰포트로 스크롤하면 최종 이미지가 필요할 때 로드됩니다.</figcaption></figure>
+
+지연 로드에 익숙하지 않다면 이 기술이 얼마나 유용한지, 그리고 그 이점이 무엇인지 궁금할 것입니다. 계속 읽어나가며 알아보십시오.
+
+## 이미지나 동영상을 그냥 *로드*하지 않고 지연 로드하는 이유는 무엇인가요? {: #why }
+
+사용자가 볼 수 없는 내용을 로드할 수 있기 때문입니다. 이것은 다음과 같은 몇 가지 이유로 문제가 됩니다.
+
+- 데이터를 낭비합니다. 무과금 연결의 경우 이는 일어날 수 있는 최악의 상황이 아닙니다(단, 사용자가 실제로 보게 될 다른 리소스를 다운로드하는 데 귀중한 대역폭을 사용할 수는 있음). 그러나 약정 데이터 요금제에서는 사용자가 전혀 볼 수 없는 항목을 로드하는 것은 사실상 비용 낭비가 될 수 있습니다.
+- 처리 시간, 배터리 및 기타 시스템 리소스를 낭비합니다. 미디어 리소스를 다운로드한 후 브라우저는 이를 디코딩하고 뷰포트에서 콘텐츠를 렌더링해야 합니다.
+
+이미지 및 동영상을 지연 로드하면 초기 페이지 로드 시간, 초기 페이지 무게 및 시스템 리소스 사용량이 줄어들며 이 모든 것이 성능에 긍정적인 영향을 미칩니다.
+
+## 지연 로드 구현 {: #implementing }
+
+지연 로드를 구현하는 방법에는 여러 가지가 있습니다. 솔루션 선택 시 지원하는 브라우저와 지연 로드를 고려해야 합니다.
+
+최신 브라우저는 이미지 및 iframe에서 `loading` 속성을 사용하여 사용 설정할 수 있는 [브라우저 수준 지연 로드](/browser-level-image-lazy-loading/)를 구현합니다. 구형 브라우저와의 호환성을 제공하거나 내장 지연 로드 없이 요소에서 지연 로드를 수행하기 위해 자체 JavaScript로 솔루션을 구현할 수 있습니다. 이 작업을 수행하는 데 도움이 되는 기존 라이브러리도 많이 있습니다. 이러한 모든 접근 방식에 대한 자세한 내용은 이 사이트의 게시물을 참조하십시오.
+
+- [이미지 지연 로드](/lazy-loading-images/)
+- [동영상 지연 로드](/lazy-loading-video/)
+
+또한, 우리는 [지연 로드의 잠재적 문제](/lazy-loading-best-practices) 목록과 구현 시 주의해야 할 사항을 정리했습니다.
+
+## 결론
+
+주의해서 사용하며 이미지와 동영상을 지연 로드하면 사이트의 초기 로드 시간과 페이지 페이로드를 상당히 줄일 수 있습니다. 사용자는 볼 수 없는 미디어 리소스의 불필요한 네트워크 활동 및 처리 비용을 발생시키지 않게 되며, 다만 원하는 경우 해당 리소스를 계속 볼 수 있습니다.
+
+성능 개선 기술의 관점에서 지연 로드는 합리적인 선택이며 논쟁의 여지가 없습니다. 사이트에 인라인 이미지가 많은 경우 불필요한 다운로드를 줄이는 아주 좋은 방법입니다. 여러분의 사이트 사용자와 프로젝트 이해 관계자는 이를 높이 평가할 것입니다!
diff --git a/src/site/content/ko/fast/minify-css/index.md b/src/site/content/ko/fast/minify-css/index.md
new file mode 100644
index 00000000000..139ad09e19e
--- /dev/null
+++ b/src/site/content/ko/fast/minify-css/index.md
@@ -0,0 +1,167 @@
+---
+layout: post
+title: CSS 축소
+authors:
+  - demianrenzulli
+description: 브라우저가 스타일을 처리하는 방식에 영향을 주지 않고 성능을 향상시키기 위해 CSS 파일을 축소하는 방법을 알아봅니다.
+date: 2019-05-02
+tags:
+  - performance
+---
+
+CSS 파일에는 주석, 화이트 공백 및 들여쓰기와 같은 불필요한 문자가 포함될 수 있습니다. 프로덕션에서는 브라우저가 스타일을 처리하는 방식에 영향을 주지 않으면서 파일 크기를 줄이기 위해 이러한 문자를 안전하게 제거할 수 있습니다. 이 기술을 **축소**라고 합니다.
+
+## 축소되지 않은 CSS 로드하기
+
+다음 CSS 블록을 살펴보세요.
+
+```css
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+/* all titles need to have the same font, color and background */
+h1 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+
+h2 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+```
+
+이 콘텐츠는 읽기 쉬운데, 필요한 것보다 더 큰 파일을 생성해야 합니다.
+
+- 들여쓰기를 위해 공백을 사용하고 주석이 포함되어 있습니다. 주석은 브라우저에서 무시되므로 제거할 수 있습니다.
+- `<h1>` 및 `<h2>` 요소는 스타일이 동일합니다. "`h1 {...} h2 {...}`"와 같이 이들을 별도로 선언하는 대신 "`h1, h2{...}`"로 표현할 수 있습니다.
+- **background-color**, `#000000`은 `#000`으로 표현할 수 있습니다.
+
+이러한 변경을 수행한 후에는 동일한 스타일의 더 간결한 버전을 얻을 수 있습니다.
+
+```css
+body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
+```
+
+아마도 이런 CSS를 작성하고 싶지는 않을 것입니다. 대신 평소와 같이 CSS를 작성하고 빌드 프로세스에 축소 단계를 추가할 수 있습니다. 이 가이드에서는 널리 사용되는 빌드 도구인 [webpack](https://webpack.js.org/)을 사용하여 이를 수행하는 방법을 알아봅니다.
+
+## 측정
+
+다른 가이드인 [Fav Kitties](https://fav-kitties-animated.glitch.me/)에서 사용한 사이트에 CSS 축소를 적용합니다. 이 사이트 버전은 멋진 CSS 라이브러리인 [animate.css](https://github.com/daneden/animate.css)를 사용하여 사용자가 고양이 😺에 투표할 때 다양한 페이지 요소에 애니메이션을 적용합니다.
+
+첫 번째 단계로 이 파일을 축소한 후 어떤 기회가 있는지 이해해야 합니다.
+
+1. [측정 페이지](/measure)를 엽니다.
+2. URL: `https://fav-kitties-animated.glitch.me`를 입력하고 **Run Audit(감사 실행)**을 클릭합니다.
+3. **View report(보고서 보기)**를 클릭합니다.
+4. **Performance(성능)**를 클릭하고 **Opportunities(기회)** 섹션으로 이동합니다.
+
+결과 보고서는 **animate.css** 파일에서 최대 **16KB**를 절약할 수 있음을 보여줍니다.
+
+{% Img src="image/admin/RFMk5OMAIvOlkUZJTsh4.png", alt="Lighthouse: CSS 축소 기회", width="800", height="172", class="screenshot" %}
+
+이제 CSS의 내용을 검사합니다.
+
+1. Chrome에서 [Fav Kitties 사이트](https://fav-kitties-animated.glitch.me/)를 엽니다. (Glitch 서버가 처음 응답하는 데 시간이 걸릴 수 있습니다.) {% Instruction 'devtools-network', 'ol' %}
+2. **CSS** 필터를 클릭합니다.
+3. **Disable cache(캐시 비활성화)** 확인란을 선택합니다. {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/WgneNAyftk8jneyXxMih.png", alt="DevTools CSS 최적화되지 않은 추적", width="800", height="138" %}
+
+페이지는 각각 **1.9KB**와 **76.2KB**인 두 CSS 파일을 요청합니다.
+
+1. **animate.css**를 클릭합니다.
+2. **Response(응답)** 탭을 클릭하여 파일 내용을 확인합니다.
+
+스타일시트에는 화이트 공백 및 들여쓰기 문자가 포함되어 있습니다.
+
+{% Img src="image/admin/UEB5Xxe5IHhGtMx3XfKD.png", alt="DevTools CSS 최적화되지 않은 응답", width="800", height="286" %}
+
+다음으로, 이러한 파일을 축소하기 위해 빌드 프로세스에 몇 가지 webpack 플러그인을 추가합니다.
+
+{% Aside 'note' %} **참고:** 이전 Lighthouse 보고서에는 `animate.css`만 축소에 대한 기회로 나열됩니다. `style.css`를 축소하면 일부 바이트도 절약되지만 Lighthouse에서 상당한 절약 효과라고 여기기에는 충분하지 않습니다. 그러나 CSS를 축소하는 것은 일반적인 모범 사례입니다. 따라서 모든 CSS 파일을 축소하는 것이 좋습니다. {% endAside %}
+
+## Webpack을 사용한 CSS 축소
+
+최적화를 시작하기 전에 [Fav Kitties 사이트](https://glitch.com/edit/#!/fav-kitties-animated?path=webpack.config.js:1:0%5D)의 빌드 프로세스가 어떻게 작동하는지 이해해 보겠습니다.
+
+{% Glitch { id: 'fav-kitties-animated', path: 'webpack.config.js', previewSize: 0 } %}
+
+기본적으로 webpack이 생성하는 결과적인 JS 번들은 인라인된 CSS 파일의 내용을 포함합니다. 우리는 별도의 CSS 파일을 유지하려고 하므로 두 가지 보완 플러그인을 사용합니다.
+
+- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)은 빌드 프로세스의 단계 중 하나로 각 스타일 시트를 자체 파일로 추출합니다.
+- [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries)는 **webpack-config.js**에 나열된 각 CSS 파일에 대해 추가 JS 파일의 생성을 방지하기 위해 wepback 4의 문제를 수정하는 데 사용됩니다.
+
+이제 프로젝트에서 몇 가지 사항을 변경합니다.
+
+1. [Glitch에서 Fav Kitties 프로젝트](https://glitch.com/~fav-kitties-animated)를 엽니다. {% Instruction 'source', 'ol' %} {% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+결과적인 CSS를 축소하려면 [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)을 사용합니다.
+
+1. Glitch 콘솔에서 `npm install --save-dev optimize-css-assets-webpack-plugin`을 실행합니다.
+2. `refresh`를 실행하여 변경 사항이 Glitch 편집기와 동기화되도록 합니다.
+
+다음으로, Glitch 편집기로 돌아가 **webpack.config.js** 파일을 열고 다음과 같이 수정합니다.
+
+파일 시작 부분에 모듈을 로드합니다.
+
+```js
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+```
+
+그런 다음 플러그인의 인스턴스를 **plugins** 배열에 전달합니다.
+
+```js
+  plugins: [
+    new HtmlWebpackPlugin({template: "./src/index.html"}),
+    new MiniCssExtractPlugin({filename: "[name].css"}),
+    new FixStyleOnlyEntriesPlugin(),
+    new OptimizeCSSAssetsPlugin({})
+  ]
+```
+
+변경 후 프로젝트 재빌드가 트리거됩니다. 결과적인 **webpack.config.js**의 모습은 다음과 같습니다.
+
+{% Glitch { id: 'fav-kitties-animated-min', path: 'webpack.config.js', previewSize: 0 } %}
+
+다음으로, 성능 도구를 사용하여 이 최적화의 결과를 확인합니다.
+
+## 확인
+
+{% Instruction 'preview' %}
+
+이전 단계에서 길을 잃은 경우 [여기](https://fav-kitties-animated-min.glitch.me/)를 클릭하여 최적화된 버전의 사이트를 열 수 있습니다.
+
+파일의 크기와 내용을 검사하려면:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. **CSS** 필터를 클릭합니다.
+2. **Disable cache(캐시 비활성화)** 확인란이 아직 선택되지 않은 경우 선택합니다. {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/id5kWwB3NilmVPWPTM59.png", alt="DevTools CSS 최적화되지 않은 응답", width="800", height="130" %}
+
+이러한 파일을 검사하고 새 버전에 어떤 화이트 공백도 없는 것을 확인할 수 있습니다. 두 파일 모두 훨씬 작습니다. 특히 [animate.css](http://fav-kitties-animated-min.glitch.me/animate.css)는 **~26%** 감소하여 **~20KB**가 절약되었습니다!
+
+마지막 단계:
+
+1. [측정 페이지](/measure)를 엽니다.
+2. 최적화된 사이트의 URL을 입력합니다.
+3. **View report(보고서 보기)**를 클릭합니다.
+4. **Performance(성능)**를 클릭하고 **Opportunities(기회)** 섹션을 찾습니다.
+
+보고서에 "CSS 축소"가 더 이상 "기회"로 표시되지 않으며 이제 "감사 통과" 섹션으로 이동되었습니다.
+
+{% Img src="image/admin/zegn2qIHYYK58w1GhgYd.png", alt="Lighthouse가 최적화된 페이지 감사를 통과했습니다.", width="800", height="163" %}
+
+CSS 파일은 [렌더링을 차단하는 리소스](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)이므로 대용량 CSS 파일을 사용하는 사이트에 축소를 적용하면 [첫 콘텐츠풀 페인트](/fcp/)와 같은 메트릭에서 개선을 확인할 수 있습니다.
+
+## 다음 단계 및 리소스
+
+이 가이드에서는 webpack을 이용한 CSS 축소에 대해 다루었지만, [Gulp](https://gulpjs.com/)에 대한 [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css) 또는 [Grunt](https://gruntjs.com/)에 대한 [grunt-contrib-cssmin](https://www.npmjs.com/package/grunt-contrib-cssmin)와 같이 다른 빌드 도구에도 같은 접근 방식을 따를 수 있습니다.
+
+축소는 다른 유형의 파일에도 적용할 수 있습니다. [네트워크 페이로드 축소 및 압축 가이드](/fast/reduce-network-payloads-using-text-compression)를 확인하여 JS를 축소하는 도구와 압축과 같은 보완 기술에 대해 자세히 알아보세요.
diff --git a/src/site/content/ko/fast/optimize-css-background-images-with-media-queries/index.md b/src/site/content/ko/fast/optimize-css-background-images-with-media-queries/index.md
new file mode 100644
index 00000000000..9f939205d12
--- /dev/null
+++ b/src/site/content/ko/fast/optimize-css-background-images-with-media-queries/index.md
@@ -0,0 +1,132 @@
+---
+layout: post
+title: 미디어 쿼리로 CSS 배경 이미지 최적화
+authors:
+  - demianrenzulli
+description: 미디어 쿼리를 사용하여 필요한 만큼만 이미지를 전송합니다. 이는 일반적으로 반응형 이미지라고 하는 기술입니다.
+date: 2020-03-05
+updated: 2020-03-05
+tags:
+  - performance
+---
+
+많은 사이트에서 특정 화면에 최적화되지 않은 이미지, 즉 많은 리소스를 요청하고 일부 장치에서는 절대 사용하지 않을 스타일이 포함된 대용량 CSS 파일을 보냅니다. 미디어 쿼리를 사용하는 것은 사용자에게 전송되는 데이터의 양을 줄이고 페이지 로드 성능을 개선하기 위함이며, 미디어 쿼리는 맞춤형 스타일시트와 자산을 다양한 화면에 전달하는 데 널리 사용되는 기술입니다. 이 가이드에서는 **반응형 이미지**라고 하는 기술인 미디어 쿼리를 사용하여 일반적으로 필요한 만큼만 이미지를 보내는 방법을 보여줍니다.
+
+## 전제 조건
+
+이 가이드는 사용자가 [Chrome DevTools](https://developer.chrome.com/docs/devtools/)에 익숙하다고 가정합니다. 원하는 경우 다른 브라우저의 DevTools를 대신 사용할 수 있습니다. 이 가이드의 Chrome DevTools 스크린샷을 선택한 브라우저의 관련 기능에 다시 매핑하기만 하면 됩니다.
+
+## 반응형 배경 이미지의 이해하기
+
+먼저 최적화되지 않은 데모의 네트워크 트래픽을 분석합니다.
+
+1. 새 Chrome 탭에서 [최적화되지 않은 데모](https://use-media-queries-unoptimized.glitch.me/)를 엽니다. {% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Aside %} DevTools에 대해 더 많은 도움이 필요하면 [Chrome DevTools로 네트워크 활동 검사하기](https://developer.chrome.com/docs/devtools/network/)를 확인하세요. {% endAside %}
+
+요청되는 유일한 이미지는 **1006KB** 크기인 `background-desktop.jpg`입니다.
+
+<figure>{% Img src="image/admin/K8P4MHp2FSnZYTw3ZVkG.png", alt="최적화되지 않은 배경 이미지에 대한 DevTools 네트워크 추적.", width="800", height="126" %}</figure>
+
+브라우저 창의 크기를 조정하고 네트워크 로그에 페이지에서 수행하는 새 요청이 표시되지 않는지 확인합니다. 이는 모든 화면 크기에 동일한 이미지 배경이 사용됨을 의미합니다.
+
+[style.css](https://use-media-queries-unoptimized.glitch.me/style.css)에서 배경 이미지를 제어하는 스타일을 볼 수 있습니다.
+
+```css
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+사용된 각 속성의 의미는 다음과 같습니다.
+
+- `background-position: center center`: 이미지를 세로와 가로의 중앙에 배치합니다.
+- `background-repeat: no-repeat`: 이미지를 한 번만 표시합니다.
+- `background-attachment: fixed`: 배경 이미지가 스크롤되지 않도록 합니다.
+- `background-size: cover`: 전체 컨테이너를 덮도록 이미지 크기를 조정합니다.
+- `background-image: url(images/background-desktop.jpg)`: 이미지의 URL입니다.
+
+이러한 스타일 속성을 결합하여 사용하면 배경 이미지를 다양한 화면 높이와 너비에 맞게 조정하도록 브라우저에 지시합니다. 이것은 반응형 배경을 달성하기 위한 첫 번째 단계입니다.
+
+모든 화면 크기에 단일 배경 이미지를 사용하는 경우 몇 가지 제한 사항이 있습니다.
+
+- 휴대전화와 같은 일부 장치의 경우 더 작고 가벼운 이미지 배경을 사용해도 똑같이 좋아 보여도 화면 크기에 관계없이 동일한 양의 바이트가 전송됩니다. 일반적으로 여러분은 성능을 향상하고 사용자 데이터를 절약하기 위해 사용자 화면에서 좋아 보이는 가능한 작은 이미지를 보내려고 합니다.
+- 더 작은 장치에서는 이미지가 전체 화면을 덮도록 늘이거나 일부를 잘라 표시하여 사용자에게 배경의 관련 부분을 잠재적으로 숨길 수 있습니다.
+
+다음 섹션에서는 사용자 장치에 따라 다양한 배경 이미지를 로드하기 위해 최적화를 적용하는 방법을 배웁니다.
+
+## 미디어 쿼리 사용하기
+
+미디어 쿼리를 사용하는 것은 특정 미디어 또는 장치 유형에만 적용되는 스타일시트를 선언하는 일반적인 기술입니다. 특정 스타일이 정의되는 일련의 중단점을 정의할 수 있는 [@media 규칙](https://developer.mozilla.org/docs/Web/CSS/@media)을 사용하여 구현됩니다. `@media` 규칙에서 정의한 조건(예: 특정 화면 너비)이 충족되면 중단점 내부에 정의된 스타일 그룹이 적용됩니다.
+
+다음 단계를 사용하여 페이지를 요청하는 장치의 최대 너비에 따라 다른 이미지가 사용되도록 [사이트](https://use-media-queries-unoptimized.glitch.me/)에 미디어 쿼리를 적용할 수 있습니다.
+
+- `style.css`에서 배경 이미지 URL이 포함된 줄을 제거합니다.
+
+```css//4
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+- 다음으로, 모바일, 태블릿 및 데스크톱 화면이 일반적으로 갖는 픽셀 단위의 공통 치수를 기반으로 각 화면 너비에 대한 중단점을 생성합니다.
+
+모바일의 경우:
+
+```css
+@media (max-width: 480px) {
+    body {
+        background-image: url(images/background-mobile.jpg);
+    }
+}
+```
+
+태블릿의 경우:
+
+```css
+@media (min-width: 481px) and (max-width: 1024px) {
+    body {
+        background-image: url(images/background-tablet.jpg);
+    }
+}
+```
+
+데스크톱 장치의 경우:
+
+```css
+@media (min-width: 1025px) {
+    body {
+	    background-image: url(images/background-desktop.jpg);
+   }
+}
+```
+
+여러분의 브라우저에 최적화된 버전의 [style.css](https://use-media-queries-optimized.glitch.me/style.css)를 열어 변경 사항을 확인합니다.
+
+{% Aside %} 최적화된 데모에 사용된 이미지는 이미 다양한 화면 크기에 맞게 크기가 조정되어 있습니다. 이미지 크기를 조정하는 방법을 보여주는 것은 이 가이드의 범위를 벗어납니다. 그러나 이에 대해 더 알고 싶다면 [반응형 이미지 제공 가이드](/serve-responsive-images/)에서 다루는 [선명한 npm 패키지](https://www.npmjs.com/package/sharp) 및 [ImageMagick CLI](https://www.imagemagick.org/script/index.php)와 같은 유용한 도구를 확인하세요. {% endAside %}
+
+## 다른 장치 측정
+
+다음으로 다양한 화면 크기와 시뮬레이션된 모바일 장치로 결과 사이트를 시각화합니다.
+
+1. 새 Chrome 탭에서 [최적화된 사이트](https://use-media-queries-optimized.glitch.me/)를 엽니다.
+2. 뷰포트를 좁게 만듭니다(`480px` 미만). {% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %} `background-mobile.jpg` 이미지가 어떻게 요청되었는지 확인합니다.
+3. 뷰포트를 더 넓게 만듭니다. `480px`보다 넓은 경우 `background-tablet.jpg`가 어떻게 요청되는지 확인합니다. `1025px` 보다 넓은 경우 `background-desktop.jpg`가 어떻게 요청되는지 확인합니다.
+
+브라우저 화면의 너비가 변경되면 새 이미지가 요청됩니다.
+
+특히 너비가 모바일 중단점에서 정의한 값 미만(480px)인 경우 다음 네트워크 로그가 표시됩니다.
+
+<figure>{% Img src="image/admin/jd2kHIefYf91udpFEmvx.png", alt="최적화된 배경 이미지를 위한 DevTools 네트워크 추적.", width="800", height="125" %}</figure>
+
+새로운 모바일 배경의 크기는 데스크톱보다 **67% 작습니다**.
+
+## 요약
+
+이 가이드에서는 미디어 쿼리를 적용하여 특정 화면 크기에 맞게 조정된 배경 이미지를 요청하고, 휴대폰과 같은 작은 장치에서 사이트에 액세스할 때 바이트를 절약하는 방법을 배웠습니다. 여러분은 `@media` 규칙을 사용하여 반응형 배경을 구현했습니다. 이 기술은 모든 브라우저에서 널리 지원됩니다. 새로운 CSS 기능인 [image-set()](https://www.w3.org/TR/css-images-4/#image-set-notation)은 더 적은 수의 코드로 동일한 목적을 달성할 수 있습니다. 이 글을 작성하는 시점에 이 기능은 모든 브라우저에서 지원되고 있지 않지만 이 기술에 대한 흥미로운 대안이 될 수 있으므로 기술 적용이 어떻게 발전하는지 계속 주시하고 싶을 것입니다.
diff --git a/src/site/content/ko/fast/optimize-webfont-loading/index.md b/src/site/content/ko/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..b32d7422949
--- /dev/null
+++ b/src/site/content/ko/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: WebFont 로딩 및 렌더링 최적화
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2
+
+  이 게시물은 페이지가 로드될 때 WebFont를 사용할 수 없을 때 레이아웃 이동 및 빈 페이지를 방지하기 위해 WebFont를 로드하는 방법을 설명합니다.
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+필요하지 않을 수 있는 모든 문체 변형과 사용되지 않을 수 있는 모든 글리프를 포함하는 "전체" WebFont는 쉽게 메가바이트 다운로드를 초래할 수 있습니다. 이 게시물에서는 방문자가 사용할 항목만 다운로드하도록 WebFont 로드를 최적화하는 방법을 알아봅니다.
+
+모든 변형이 포함된 대용량 파일의 문제를 해결하기 위해 `@font-face` CSS 규칙은 글꼴 패밀리를 리소스 모음으로 분할할 수 있도록 특별히 설계되었습니다. 예를 들어 유니코드 하위 집합 및 고유한 스타일 변형이 있습니다.
+
+이러한 선언이 주어지면 브라우저는 필요한 하위 집합과 변형을 파악하고 텍스트를 렌더링하는 데 필요한 최소 집합을 다운로드하므로 매우 편리합니다. 그러나 주의하지 않으면 중요한 렌더링 경로에 성능 병목 현상이 발생하고 텍스트 렌더링이 지연될 수도 있습니다.
+
+### 기본 동작
+
+글꼴의 지연 로딩은 텍스트 렌더링을 지연시킬 수 있는 중요한 숨겨진 의미를 전달합니다. 브라우저는 텍스트를 렌더링하기 위해 필요한 글꼴 리소스를 알기 전에 DOM 및 CSSOM 트리에 종속된 [렌더링 트리를 구성](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)해야 합니다. 결과적으로 글꼴 요청은 다른 중요한 리소스보다 훨씬 늦게 지연되고 브라우저는 리소스를 가져올 때까지 텍스트를 렌더링하지 못하도록 차단될 수 있습니다.
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="글꼴 중요 렌더링 경로", width="800", height="303" %}
+
+1. 브라우저는 HTML 문서를 요청합니다.
+2. 브라우저는 HTML 응답을 구문 분석하고 DOM을 구성하기 시작합니다.
+3. 브라우저는 CSS, JS 및 기타 리소스를 검색하고 요청을 발송합니다.
+4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 구성하고 이를 DOM 트리와 결합하여 렌더링 트리를 구성합니다.
+    - 페이지에서 지정된 텍스트를 렌더링하는 데 필요한 글꼴 변형을 렌더링 트리가 표시한 후 글꼴 요청이 전달됩니다.
+5. 브라우저는 레이아웃을 수행하고 콘텐츠를 화면에 그립니다.
+    - 글꼴을 아직 사용할 수 없는 경우 브라우저에서 텍스트 픽셀을 렌더링하지 못할 수 있습니다.
+    - 글꼴을 사용할 수 있게 되면 브라우저는 텍스트 픽셀을 그립니다.
+
+렌더링 트리가 빌드된 직후에 수행할 수 있는 페이지 콘텐츠의 첫 번째 페인트와 글꼴 리소스에 대한 요청 사이의 "경합"은 브라우저가 페이지 레이아웃을 렌더링할 수 있지만 아무 것도 생략하는 "빈 텍스트 문제"를 생성하는 원인입니다. 텍스트.
+
+WebFont를 미리 로드하고 `font-display`를 사용하여 사용할 수 없는 글꼴로 브라우저가 작동하는 방식을 제어하면 글꼴 로드로 인한 빈 페이지 및 레이아웃 이동을 방지할 수 있습니다.
+
+### WebFont 리소스 미리 로드
+
+페이지에 미리 알고 있는 URL에서 호스팅되는 특정 WebFont가 필요할 가능성이 높은 경우 [리소스 우선 순위](https://developers.google.com/web/fundamentals/performance/resource-prioritization)를 활용할 수 있습니다. `<link rel="preload">`를 사용하면 CSSOM이 생성될 때까지 기다릴 필요 없이 중요한 렌더링 경로 초기에 WebFont에 대한 요청이 트리거됩니다.
+
+### 텍스트 렌더링 지연 사용자 지정
+
+미리 로드하면 페이지의 콘텐츠가 렌더링될 때 WebFont를 사용할 수 있을 가능성이 높아지지만 보장되지는 않습니다. 아직 사용할 수 없는 `font-family`을 사용하는 텍스트를 렌더링할 때 브라우저가 어떻게 작동하는지 고려해야 합니다.
+
+[글꼴 로드 중 보이지 않는 텍스트 방지](/avoid-invisible-text/) 게시물에서 기본 브라우저 동작이 일관되지 않음을 확인할 수 있습니다. [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display)를 사용하여 최신 브라우저에서 원하는 동작 방식을 알릴 수 있습니다.
+
+일부 브라우저에서 구현하는 기존 글꼴 시간 초과 동작과 유사하게 `font-display`는 글꼴 다운로드 수명을 세 가지 주요 기간으로 분할합니다.
+
+1. 첫 번째 기간은 **글꼴 차단 기간**입니다. 이 기간 동안 글꼴이 로드되지 않으면 이를 사용하려는 모든 요소는 대신 보이지 않는 대체 글꼴로 렌더링해야 합니다. 차단 기간 동안 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
+2. **글꼴 교체 기간**은 글꼴 차단 기간 직후에 발생합니다. 이 기간 동안 글꼴이 로드되지 않으면 이를 사용하려는 모든 요소는 대신 대체 글꼴로 렌더링해야 합니다. 스왑 기간 동안 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
+3. **글꼴 오류 기간**은 글꼴 교체 기간 직후에 발생합니다. 이 기간이 시작될 때 글꼴이 아직 로드되지 않은 경우 로드 실패로 표시되어 정상적인 글꼴 폴백이 발생합니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.
+
+이 기간을 이해한다는 것은 `font-display`를 사용하여 다운로드 여부 또는 다운로드 시기에 따라 글꼴을 렌더링하는 방법을 결정할 수 있음을 의미합니다.
+
+`font-display` 속성을 사용하려면 `@font-face` 규칙에 추가하세요.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* or block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+`font-display`는 현재 다음 값 범위를 지원합니다.
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+글꼴 미리 로드 및 `font-display` 속성에 대한 자세한 내용은 다음 게시물을 참조하세요.
+
+- [글꼴 로드 중 보이지 않는 텍스트 방지](/avoid-invisible-text/)
+- [font-display를 사용하여 글꼴 성능 제어](https://developers.google.com/web/updates/2016/02/font-display)
+- [선택적 글꼴을 미리 로드하여 레이아웃 이동 및 보이지 않는 텍스트(FOIT) 깜박임을 방지](/preload-optional-fonts/)
+
+### 글꼴 로딩 API
+
+`<link rel="preload">`와 CSS `font-display`를 사용하면 많은 오버헤드를 추가하지 않고도 글꼴 로드 및 렌더링을 크게 제어할 수 있습니다. 그러나 추가 사용자 정의가 필요하고 JavaScript를 실행하여 발생하는 오버헤드를 기꺼이 발생시키려는 경우 다른 옵션이 있습니다.
+
+[글꼴 로딩 API](https://www.w3.org/TR/css-font-loading/)는 CSS 글꼴을 정의 및 조작하고 다운로드 진행률을 추적하고 기본 지연 로드 동작을 재정의하는 스크립팅 인터페이스를 제공합니다. 예를 들어 특정 글꼴 변형이 필요하다고 확신하는 경우 이를 정의하고 브라우저에 글꼴 리소스를 즉시 가져오도록 지시할 수 있습니다.
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// don't wait for the render tree, initiate an immediate fetch!
+font.load().then(function() {
+  // apply the font (which may re-render text and cause a page reflow)
+  // after the font has finished downloading
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // OR... by default the content is hidden,
+  // and it's rendered after the font is available
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // OR... apply your own render strategy here...
+});
+```
+
+또한 글꼴 상태([`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check)를 통해) 방법을 확인하고 다운로드 진행률을 추적할 수 있으므로 페이지에 텍스트를 렌더링하기 위한 사용자 정의 전략을 정의할 수도 있습니다.
+
+- 글꼴을 사용할 수 있을 때까지 모든 텍스트 렌더링을 보류할 수 있습니다.
+- 각 글꼴에 대해 사용자 지정 시간 초과를 구현할 수 있습니다.
+- 대체 글꼴을 사용하여 렌더링 차단을 해제하고 글꼴을 사용할 수 있게 된 후 원하는 글꼴을 사용하는 새 스타일을 삽입할 수 있습니다.
+
+무엇보다도 페이지의 다양한 콘텐츠에 대해 위의 전략을 혼합하고 일치시킬 수도 있습니다. 예를 들어 글꼴을 사용할 수 있을 때까지 일부 섹션에서 텍스트 렌더링을 지연하고 대체 글꼴을 사용한 다음 글꼴 다운로드가 완료된 후 다시 렌더링할 수 있습니다.
+
+{% Aside %} Font Loading API는 [이전 브라우저에서 사용할 수 없습니다](http://caniuse.com/#feat=font-loading). 추가 JavaScript 종속성으로 인해 더 많은 오버헤드가 발생하더라도 유사한 기능을 제공하기 위해 [FontLoader 폴리필](https://github.com/bramstein/fontloader) 또는 [WebFontloader 라이브러리](https://github.com/typekit/webfontloader)를 사용하는 것을 고려하십시오. {% endAside %}
+
+### 적절한 캐싱은 필수
+
+글꼴 리소스는 일반적으로 자주 업데이트되지 않는 정적 리소스입니다. 결과적으로 긴 최대 사용 기간 만료에 이상적입니다. [조건부 ETag 헤더](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags)와 모든 글꼴 리소스에 대한 [최적의 캐시 제어 정책](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control)을 모두 지정해야 합니다.
+
+웹 애플리케이션이 [Service Worker](https://developer.chrome.com/docs/workbox/service-worker-overview/)를 사용하는 경우 [캐시 우선 전략](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network)으로 글꼴 리소스를 제공하는 것이 대부분의 사용 사례에 적합합니다.
+
+[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 또는 [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)를 사용하여 글꼴을 저장해서는 안 됩니다. 이들 각각에는 고유한 성능 문제 세트가 있습니다. 브라우저의 HTTP 캐시는 브라우저에 글꼴 리소스를 제공하는 가장 강력하고 강력한 메커니즘을 제공합니다.
+
+## WebFont 로딩 체크리스트
+
+- **`<link rel="preload">` , `font-display` 또는 글꼴 로드 API를 사용하여 글꼴 로드 및 렌더링을 사용자 정의**합니다. 기본 지연 로드 동작으로 인해 텍스트 렌더링이 지연될 수 있습니다. 이러한 웹 플랫폼 기능을 사용하면 특정 글꼴에 대해 이 동작을 재정의하고 페이지의 다양한 콘텐츠에 대해 사용자 지정 렌더링 및 시간 초과 전략을 지정할 수 있습니다.
+- **재확인 및 최적의 캐싱 정책 지정:** 글꼴은 자주 업데이트되지 않는 정적 리소스입니다. 서로 다른 페이지 간에 글꼴을 효율적으로 재사용할 수 있도록 서버가 수명이 긴 최대 사용 기간 타임 스탬프와 재검증 토큰을 제공하는지 확인하십시오. 서비스 워커를 사용하는 경우 캐시 우선 전략이 적합합니다.
+
+## Lighthouse를 사용한 WebFont 로딩 동작에 대한 자동화된 테스트
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)는 웹 글꼴 최적화 모범 사례를 따르고 있는지 확인하는 프로세스를 자동화하는 데 도움이 될 수 있습니다.
+
+다음 감사는 페이지가 시간이 지남에 따라 웹 글꼴 최적화 모범 사례를 계속 따르고 있는지 확인하는 데 도움이 될 수 있습니다.
+
+- [키 요청 미리 로드](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [정적 자산에 비효율적인 캐시 정책 사용](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [WebFont가 로드되는 동안 모든 텍스트 계속 표시](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/ko/fast/preload-critical-assets/index.md b/src/site/content/ko/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..9d42bfc6002
--- /dev/null
+++ b/src/site/content/ko/fast/preload-critical-assets/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 중요한 자산을 미리 로드하여 로딩 속도 향상
+authors:
+  - houssein
+  - mihajlija
+description: 웹 페이지를 여는 즉시 브라우저가 서버에 HTML 문서를 요청하고 HTML 파일의 내용을 구문 분석하며 다른 외부 참조에 대한 별도의 요청을 제출합니다. 중요 요청 체인은 브라우저에서 우선 순위를 지정하고 가져오는 리소스 순서를 나타냅니다.
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+웹 페이지를 열면 브라우저가 서버에서 HTML 문서를 요청하고 해당 내용을 구문 분석하며 참조된 리소스에 대한 별도의 요청을 제출합니다. 개발자는 페이지에 필요한 모든 리소스와 그 중 가장 중요한 리소스를 이미 알고 있습니다. 이러한 지식을 활용하여 중요한 리소스를 미리 요청하고 로딩 프로세스의 속도를 높일 수 있습니다. 이 게시물에서는 `<link rel="preload">`를 사용하여 로딩 프로세서의 속도를 높이는 방법에 대해 설명합니다.
+
+## 사전 로딩 작동 방식
+
+사전 로딩은 일반적으로 브라우저가 늦게 발견한 리소스에 가장 적합합니다.
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Chrome DevTools Network 패널에 대한 스크린샷.", width="701", height="509" %} <figcaption>이 예제에서, Pacifico 글꼴은 <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a> 규칙을 사용하여 스타일시트에 지정됩니다. 브라우저는 스타일시트 다운로드 및 구문 분석을 완료한 이후에만 글꼴 파일을 로드합니다.</figcaption></figure>
+
+특정 리소스를 미리 로드하면 현재 페이지에 중요하다고 확신하기 때문에 브라우저가 검색할 때보다 더 빨리 가져오고 싶다고 브라우저에 알립니다.
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="사전 로딩 적용 후 Chrome DevTools Network 패널에 대한 스크린샷.", width="701", height="509" %} <figcaption>이 예제에서는 Pacifico 글꼴이 미리 로드되어 있으므로 스타일시트를 사용하는 동시에 다운로드됩니다.</figcaption></figure>
+
+중요한 요청 체인은 브라우저에서 우선순위를 지정하고 가져오는 리소스의 순서를 나타냅니다. Lighthouse는 이 체인의 세 번째 수준에 있는 자산을 늦게 발견한 자산으로 식별합니다. [**사전 로드 키 요청**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) 감사를 사용하여 사전 로드할 리소스를 식별할 수 있습니다.
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="Lighthouse의 사전 로드 키 요청 감사.", width="745", height="97" %}
+
+HTML 문서의 헤드에 `rel="preload"`가 있는 `<link>` 태그를 추가하여 리소스를 미리 로드할 수 있습니다.
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+브라우저는 미리 로드된 리소스를 캐시하므로 필요 시 즉시 사용할 수 있습니다. (스크립트를 실행하거나 스타일시트를 적용하지 않습니다.)
+
+{% Aside %} 사전 로딩을 구현한 후 [Shopify, Financial Times 및 Treebo](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)를 포함한 많은 사이트에서 [Interactive 시간](/tti/) 및 [First Contentful Paint](/fcp/)와 같은 사용자 중심 매트릭이 1초 개선되었습니다. {% endAside %}
+
+리소스 힌트(예: [`preconnect`](/preconnect-and-dns-prefetch) 및 [`prefetch`](/link-prefetch))는 브라우저가 적합하다고 판단하는 대로 실행됩니다. 반면에 `preload`는 브라우저에 필수입니다. 최신 브라우저는 이미 리소스의 우선순위를 정하는 데 능숙합니다. `preload` 드물게 사용하고 가장 중요한 리소스만 미리 로드하는 것이 중요하기 때문입니다.
+
+사용되지 않은 프리로드는 `load` 이벤트 후 약 3초 후에 Chrome에서 콘솔 경고를 트리거합니다.
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="사용되지 않은 리소스에 대한 Chrome DevTools Console 경고.", width="800", height="228" %}
+
+{% Aside %} `preload`는 모든 최신 브라우저에서 [지원됩니다](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility). {% endAside %}
+
+## 사용 사례
+
+{% Aside 'caution' %} 작성 시점에서 Chrome에는 우선순위가 더 높은 다른 리소스보다 빨리 가져오는 미리 로드된 요청에 대한 공개 [버그](https://bugs.chromium.org/p/chromium/issues/detail?id=788757)가 있습니다. 이 문제가 해결될 때까지 미리 로드된 리소스가 어떻게 "대기열을 건너뛰고" 원래보다 빠르게 요청될 수 있는지 살펴보세요. {% endAside %}
+
+### CSS에 지정된 리소스 사전 로딩
+
+[`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face) 규칙으로 지정된 글꼴 또는 CSS 파일에 지정된 배경 이미지는 브라우저가 해당 CSS 파일을 다운로드하고 구문 분석할 때까지 검색되지 않습니다. 이러한 리소스를 미리 로드하면 CSS 파일이 다운로드되기 전에 가져올 수 있습니다.
+
+### CSS 파일 사전 로딩
+
+[중요한 CSS 접근 방식](/extract-critical-css)을 사용하고 있는 경우 CSS를 두 부분으로 나눕니다. 위의 내용을 렌더링하는 데 필요한 중요한 CSS는 문서의 `<head>`에 표시되며 중요하지 않은 CSS는 일반적으로 JavaScript에서 지연 로딩됩니다. 중요하지 않은 CSS를 로드하기 전에 JavaScript가 실행될 때까지 기다리면 사용자가 스크롤할 때 렌더링 지연이 발생합니다. 따라서 다운로드를 더 일찍 시작하려면 `<link rel="preload">`를 사용하는 것이 좋습니다.
+
+### JavaScript 파일 사전 로딩
+
+브라우저는 사전 로드된 파일을 실행하지 않으므로 사전 로딩은 [실행](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)에서 가져오기를 분리하는 데 유용합니다. 이를 통해  Interactive 시간 같은 매트릭을 개선할 수 있습니다. JavaScript 번들을 [분할](/reduce-javascript-payloads-with-code-splitting)하고 중요한 청크만 미리 로드할 경우 사전 로딩이 가장 적합합니다.
+
+## rel=preload 구현 방법
+
+`preload`를 구현하는 가장 간단한 방법은 문서의 `<head>`에 `<link>` 태그를 추가하는 것입니다.
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+`as` 속성을 제공하면 브라우저가 유형에 따라 미리 가져온 리소스의 우선순위를 설정하고, 올바른 헤더를 설정하며, 리소스가 이미 캐시에 있는지 여부를 판단하는 데 도움이 됩니다. 이 속성에 허용되는 값은 `script`, `style`, `font`, `image`  [등](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes)입니다.
+
+{% Aside %} 브라우저가 다양한 유형의 리소스에 우선순위를 지정하는 방법에 대해 자세히 알아보려면 [Chrome 리소스 우선순위 및 일정](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) 문서를 살펴보세요. {% endAside %}
+
+{% Aside 'caution' %} `as` 속성을 생략하거나 유효하지 않은 값을 갖는 것은 [XHR 요청](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)과 같습니다. 여기서 브라우저는 무엇을 가져오는지 알지 못하므로 올바른 우선순위를 판단할 수 없습니다. 또한 스크립트와 같은 일부 리소스를 두 번 가져올 수도 있습니다. {% endAside %}
+
+글꼴과 같은 일부 리소스 유형은 [익명 모드](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements)로 로드됩니다. `preload`가 있는 `crossorigin`을 설정해야 합니다.
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} `crossorigin` 속성 없이 미리 로드된 글꼴은 두 번 가져옵니다! {% endAside %}
+
+`<link>` 요소는 또한 [`type` 속성](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 수락하는 데 여기에는 링크 연결된 리소스의 [MIME 유형](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)이 포함됩니다. 브라우저는 `type` 속성을 사용하여 파일 유형이 지원되는 경우에만 리소스를 미리 로드합니다. 브라우저가 지정된 리소스 유형을 지원하지 않을 경우 이는 `<link rel="preload">`를 무시합니다.
+
+{% Aside 'codelab' %}  [웹 글꼴을 미리 로드하여 페이지 성능을 개선합니다](/codelab-preload-web-fonts). {% endAside %}
+
+[`Link` HTTP 헤더](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link)를 통해 모든 유형의 리소스를 미리 로드할 수도 있습니다.
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+HTTP 헤더에서 `preload`를 지정함으로써 누릴 수 있는 이점은 브라우저가 문서를 찾기 위해 문서를 구문 분석할 필요가 없다는 데 있습니다. 이는 일부 경우에서 약간의 개선 효과를 제공할 수 있습니다.
+
+### 웹팩을 사용하여 JavaScript 모듈 사전 로딩
+
+애플리케이션의 빌드 파일을 생성하는 모듈 번들러를 사용하는 경우 사전 로드 태그 삽입 기능을 지원하는지 확인해야 합니다. [webpack](https://webpack.js.org/) 버전 4.6.0 이상에서는 사전 로딩 기능이 `import()` 내의 [magic comments](https://webpack.js.org/api/module-methods/#magic-comments)를 사용하여 지원됩니다.
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+이전 버전의 웹팩을 사용하는 경우 [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin)과 같은 타사 플러그인을 사용하세요.
+
+## 결론
+
+페이지 속도를 개선하려면 브라우저가 늦게 발견한 중요한 리소스를 미리 로드하십시오. 모든 것을 미리 로드하는 것은 생산성이 떨어질 수 있으므로 `preload`를 조금만 사용하고 [실제 환경에 미치는 영향을 측정하십시오](/fast#measure-performance-in-the-field).
diff --git a/src/site/content/ko/fast/publish-modern-javascript/index.md b/src/site/content/ko/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..32a9165bfc5
--- /dev/null
+++ b/src/site/content/ko/fast/publish-modern-javascript/index.md
@@ -0,0 +1,304 @@
+---
+layout: post
+title: 더 빠른 애플리케이션을 위한 최신 JavaScript 배포, 제공 및 설치
+subhead: 최신 JavaScript 의존성 및 결과물을 중심으로 성능을 개선합니다.
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: 최신 JavaScript는 트랜스파일 된 ES5에 비해 크기 및 성능 향상을 제공하여 95%의 웹 브라우저에서 지원됩니다. 최신 JavaScript 결과물을 활성화하면 애플리케이션에 이러한 이점이 있지만 그 효과는 이미 ES5로 트랜스파일 된 의존성으로 인해 제한됩니다. 이 가이드는 최신 패키지를 npm으로 배포하는 방법, 최신 JavaScript 패키지를 설치하고 최적으로 번들링하는 방법에 관해 설명합니다.
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - codelab-serve-modern-code
+tags:
+  - performance
+  - blog
+---
+
+브라우저의 90% 이상이 최신 JavaScript를 실행할 수 있지만 널리 퍼져있는 레거시 JavaScript는 오늘날 웹에서 성능 문제를 일으키는 가장 큰 원인 중 하나입니다. [EStimator.dev](http://estimator.dev/)는 최신 JavaScript 문법을 제공하여 사이트가 크기와 성능을 얼마나 향상할 수 있는지 계산하는 간단한 웹 기반 도구입니다.
+
+<figure data-size="full">{% Img src="image/admin/FHHnXqdjdsC6PNSSnnC4.png", alt="EStimator.dev 분석은 최신 JavaScript로 웹사이트가 9% 더 빨라질 수 있다는 것을 보여줍니다.", width="800", height="785" %}<figcaption> EStimator.dev </figcaption></figure>
+
+오늘날 웹은 레거시 JavaScript로 인해 제한되며 **ES2017** 문법을 사용하여 웹 페이지 또는 패키지를 작성, 배포 및 제공하는 것만큼 성능을 향상시키는 단일 최적화 방식은 없습니다.
+
+## 최신 자바스크립트
+
+최신 JavaScript는 특정 버전의 ECMAScript 사양으로 작성된 코드가 아니라 모든 최신 브라우저에서 지원되는 문법이 특징입니다. Chrome, Edge, Firefox 및 Safari와 같은 최신 웹 브라우저는 [브라우저 시장의 90%](https://www.caniuse.com/usage-table) 이상을 차지하고 동일한 기본 렌더링 엔진에 의존하는 다른 브라우저가 추가로 5%를 차지합니다. 이는 전 세계 웹 트래픽의 95%가 다음을 포함한 지난 10년 동안 가장 널리 사용된 JavaScript 언어 기능을 지원하는 브라우저에서 발생한다는 것을 의미합니다.
+
+- 수업(ES2015)
+- 화살표 함수(ES2015)
+- 제너레이터 (ES2015)
+- 블록 스코핑 (ES2015)
+- 디스트럭처링 (ES2015)
+- Rest 및 Spread 매개 변수(ES2015)
+- 객체 축약(ES2015)
+- Async/await (ES2017)
+
+최신 버전의 언어 사양에 있는 기능은 일반적으로 최신 브라우저에서 일관되게 지원되지 않습니다. 예를 들어, 많은 ES2020 및 ES2021 기능은 여전히 주요 브라우저인 브라우저 시장의 70%에서만 지원되지만 이러한 기능에 직접 의존하는 것은 충분히 안전하지는 않습니다. 즉, "최신" JavaScript는 변하긴 하지만 ES2017은[일반적으로 사용되는 대부분의 최신 문법 기능을 포함하는 동시에](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c) 가장 광범위한 브라우저 호환성을 제공합니다. 즉, **ES2017은 오늘날 최신 문법에 가장 근접합니다**.
+
+## 레거시 JavaScript
+
+레거시 JavaScript는 특히 위에 언급한 모든 언어 기능을 사용하지 않는 코드입니다. 개발자 대부분은 최신 문법을 사용하여 소스 코드를 작성하지만, 브라우저 지원 향상을 위해 모든 것을 레거시 문법으로 컴파일합니다. 레거시 문법으로 컴파일하면 브라우저 지원 범위가 늘어나지만, 효과는 종종 우리가 생각하는 것보다 작습니다. 많은 경우 상당한 비용이 발생하는 데 반해 지원은 약 95%에서 98%로 증가합니다.
+
+- 레거시 JavaScript는 일반적으로 동등한 최신 코드보다 크기가 약 20% 더 크고 속도는 느립니다. 도구의 결함과 잘못된 구성은 종종 이 격차를 더욱 넓힙니다.
+
+- 설치된 라이브러리는 일반적인 프로덕션 JavaScript 코드의 90%를 차지합니다. 라이브러리 코드는 최신 코드를 배포하여 방지할 수 있는 폴리필 및 복제된 헬퍼 함수로 인해 더 높은 레거시 JavaScript 오버헤드를 발생시킵니다.
+
+## npm의 최신 JavaScript
+
+최근 Node.js는 [패키지의 진입점](https://nodejs.org/api/packages.html#packages_package_entry_points)을 정의하기 위해  `"exports"` 필드를 표준화했습니다.
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+`"exports"` 필드에서 참조하는 모듈은 ES2019를 지원하는 12.8 이상의 Node 버전을 의미합니다. 이는 `"exports"` 필드를 사용하여 참조되는 모든 모듈이 *최신 JavaScript로 작성*될 수 있다는 것을 의미합니다. 패키지 사용자는 `"exports"` 필드가 있는 모듈에 최신 코드가 포함되어 있고 필요한 경우 트랜스파일해야 한다고 간주해야 합니다.
+
+### 최신 코드 전용
+
+최신 코드가 포함된 패키지를 배포하고 소비자가 이를 의존성으로 사용할 때 소비자가 트랜스파일을 처리하도록 하려면 `"exports"` 필드만 사용하세요.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %} 이 접근 방식은 *권장되지 않습니다*. 완벽한 세상에서, 모든 개발자는 이미 모든 의존성( `node_modules` )을 필요한 문법으로 트랜스파일하도록 빌드 시스템을 구성했을 것입니다. 그러나 현재는 그렇지 않으며 최신 구문만 사용하여 패키지를 배포하면 레거시 브라우저를 통해 액세스할 수 있는 애플리케이션에서 패키지를 사용할 수 없습니다. {% endAside %}
+
+### 레거시 폴백이 있는 최신 코드
+
+최신 코드를 사용하고 레거시 브라우저에 대한 ES5 + CommonJS 폴백도 포함하는 패키지를 배포하려면 `"exports"` 필드를 `"main"`와 함께 사용합니다.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### 레거시 폴백 및 ESM 번들러 최적화가 포함된 최신 코드
+
+폴백 CommonJS 진입점을 정의하는 것 외에도 `"module"` 필드는 유사한 레거시 대체 번들을 지정하는 데 사용할 수 있습니다. JavaScript 모듈 문법(`import` 및 `export`)을 사용합니다.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+webpack 및 Rollup과 같은 많은 번들러는 이 필드에 의존하여 모듈 기능을 활용하고 [트리 쉐이킹을](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size) 가능하게 합니다. `import`/`export` 문법을 제외한 최신 코드를 포함하지 않는 레거시 번들이므로 이 접근 방식을 사용하여 번들링에 최적화된 레거시 폴백과 함께 최신 코드를 제공합니다.
+
+## 애플리케이션의 최신 JavaScript
+
+서드파티 의존성은 웹 애플리케이션에서 일반적인 프로덕션용 JavaScript 코드의 대부분을 구성합니다. npm 의존성은 역사적으로 레거시 ES5 구문으로 배포되었지만 더 이상 안전하지 않으며 의속성 업데이트로 인해 애플리케이션에서 브라우저 지원이 중단될 위험이 있습니다.
+
+최신 JavaScript를 배포하는 npm 패키지의 수가 증가함에 따라 빌드 도구가 이를 처리하도록 설정되어 있는지 확인하는 것이 중요합니다. 사용하고 있는 npm 패키지 중 일부가 이미 최신 언어 기능을 사용하고 있을 가능성이 큽니다. 이전 브라우저에서 애플리케이션을 중단하지 않고 npm의 최신 코드를 사용할 수 있는 여러 옵션이 있지만 일반적인 아이디어는 빌드 시스템이 의존성을 소스 코드와 동일한 문법을 사용한 코드로 트랜스파일하도록 하는 것입니다.
+
+## webpack
+
+webpack 5부터는 번들 및 모듈용 코드를 생성할 때 webpack이 사용할 구문을 구성할 수 있습니다. 이것은 코드나 종속성을 트랜스파일하지 않으며 webpack에 의해 생성된 "glue" 코드에만 영향을 미칩니다. 브라우저 지원 대상을 지정하려면 프로젝트에 [browserslist 구성](https://github.com/browserslist/browserslist#readme)을 추가하거나 webpack 구성에서 직접 수행하세요.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+최신 ES 모듈 환경을 대상으로 할 때 불필요한 래퍼 기능을 생략하는 최적화된 번들을 생성하도록 webpack을 구성하는 것도 가능합니다. 이는 또한 `<script type="module">`을 사용하여 코드 분할 번들을 로드하도록 webpack을 구성합니다.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+Optimize Plugin 및 BabelEsmPlugin과 같은 레거시 브라우저를 계속 지원하면서 최신 JavaScript를 컴파일 및 제공할 수 있는 많은 webpack 플러그인이 있습니다.
+
+### Optimize Plugin
+
+[Optimize Plugin](https://github.com/developit/optimize-plugin)은 개별 소스 파일 대신 최종 번들 코드를 최신 JavaScript에서 JavaScript로 변환하는 webpack 플러그인입니다. 이것은 webpck 구성이 다중 출력 결과물이나 문법에 대한 특별한 분기 없이 모든 것이 최신 JavaScript라고 가정할 수 있도록 하는 자체적으로 포함된 설정입니다.
+
+Optimize Plugin은 개별 모듈 대신 번들에서 작동하므로 애플리케이션의 코드와 의존성을 동일하게 처리합니다. 이렇게 하면 코드가 번들로 제공되고 올바른 문법으로 트랜스파일되기 때문에 npm의 최신 JavaScript 의존성을 안전하게 사용할 수 있습니다. 또한 이는 최신 및 레거시 브라우저에 대해 별도의 번들을 생성하는 동시에 두 가지 컴파일 단계를 포함하는 기존 솔루션보다 빠를 수 있습니다. 두 세트의 번들은[module/nomodule 패턴](/serve-modern-code-to-modern-browsers/)을 사용하여 로드되도록 설계되었습니다.
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+`Optimize Plugin` 은 일반적으로 최신 코드와 레거시 코드를 별도로 번들로 제공하는 사용자 지정 webpack 구성보다 더 빠르고 효율적일 수 있습니다. 또한 [Babel](https://babeljs.io/) 실행을 처리하고 최신 및 레거시 출력에 대해 별도의 최적 설정으로 [Terser](https://terser.org/)를 사용하여 번들을 축소합니다. 마지막으로 생성된 레거시 번들에 필요한 폴리필이 전용 스크립트로 추출되어 최신 브라우저에서 중복되거나 불필요하게 로드되지 않습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>비교: 소스 모듈을 두 번 트랜스파일하는 것과 생성된 번들을 트랜스파일하는 것.</figcaption></figure>
+
+### BabelEsmPlugin
+
+[BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin)}은 {a1@babel/preset-env 와 함께 작동하여 기존 번들의 최신 버전을 생성하여 최신 브라우저에 덜 변환된 코드를 제공하는 webpack 플러그인입니다. [이것은 Next.js](https://nextjs.org/) 및 [Preact CLI](https://preactjs.com/cli/) 에서 사용되는 가장 인기 있는 완성된 모듈/노모듈용 솔루션입니다.
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // 기존 babel-loader 구성:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+`BabelEsmPlugin`은 애플리케이션의 두 가지 크게 분리된 빌드를 실행하기 때문에 광범위한 webpack 구성을 지원합니다. 두 번 컴파일하면 대규모 응용 프로그램의 경우 약간의 추가 시간이 걸릴 수 있지만 이 기술을 사용하면 `BabelEsmPlugin`이 기존 webpack 구성에 원활하게 통합되고 사용 가능한 가장 편리한 옵션 중 하나가 됩니다.
+
+### node_modules를 트랜스파일하도록 babel-loader 구성
+
+이전의 두 플러그인을 사용하지 않고 `babel-loader`를 사용하는 경우 최신 JavaScript npm 모듈을 사용하려면 중요한 단계가 필요합니다. 두 개의 개별 `babel-loader` 구성을 정의하는 것은 `node_modules` 에 있는 최신 언어 기능을 ES2017로 자동 컴파일하는 동시에 프로젝트 구성에 정의된 Babel 플러그인 및 사전 설정으로 퍼스트 파티 코드를 트랜스파일할 수 있습니다. 이것은 모듈/노모듈 설정을 위한 최신 및 레거시 번들을 생성하지 않지만 이전 브라우저를 중단하지 않고 최신 JavaScript가 포함된 npm 패키지를 설치하고 사용할 수 있도록 합니다.
+
+[webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm)은 이 기술을 사용하여 `package.json`의 `"exports"` 필드가 있는 npm 의존성을 컴파일합니다. 여기에는 다음과 같은 최신 문법이 포함될 수 있기 때문입니다.
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // node_modules에서 발견된 최신 문법을 자동 트랜스파일
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+또는 모듈이 resolve 될 때 `package.json`의 `"exports"` 필드를 확인하여 webpack 구성에서 기술을 수동으로 구현할 수 있습니다. 간결함을 위해 캐싱을 생략하면 사용자 정의 구현은 다음과 같을 수 있습니다.
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // 퍼스트 파티 코드 트랜스파일:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // 최신 문법으로 작성된 의존성 모듈 트랜스파일:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+이 접근 방식을 사용할 때는 minifier가 최신 구문을 지원하는지 확인해야 합니다. [Terser](https://github.com/terser/terser#minify-options) 와 [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options)에는 압축 및 포매팅 중 ES2017 문법을 보존하고 경우에 따라 생성하기 위해 `{ecma: 2017}`을 지정하는 옵션이 있습니다.
+
+## Rollup
+
+롤업은 단일 빌드의 일부로 여러 번들 세트를 생성하기 위한 기본 제공 지원을 가지고 있으며 기본적으로 최신 코드를 생성합니다. 결과적으로 이미 사용하고 있을 가능성이 있는 공식 플러그인으로 최신 및 레거시 번들을 생성하도록 롤업을 구성할 수 있습니다.
+
+### @rollup/plugin-babel
+
+Rollup을 사용하는 경우 [`getBabelOutputPlugin()` 메서드](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code) (Rollup의 [공식 Babel 플러그인](https://github.com/rollup/plugins/tree/master/packages/babel) 제공)는 개별 소스 모듈이 아닌 생성된 번들의 코드를 변환합니다. Rollup은 각각 고유한 플러그인이 있는 단일 빌드의 일부로 여러 번들 세트를 생성하는 기능이 기본적으로 있습니다. 각각 다른 다음과 같은 Babel 출력 플러그인 구성을 통해 전달하여 최신 및 레거시 번들을 생성하기 위해 이를 사용할 수 있습니다.
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // 최신 번들:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // 레거시(ES5) 번들:
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## 추가 빌드 도구
+
+Rollup과 Webpack은 고도로 구성 가능합니다. 즉, 일반적으로 각 프로젝트는 의존성 모듈에서 최신 JavaScript 문법을 사용하도록 구성을 업데이트해야 합니다. [Parcel](https://parceljs.org/), [Snowpack](https://www.snowpack.dev/), [Vite](https://github.com/vitejs/vite) 및 [WMR](https://github.com/preactjs/wmr)과 같이 구성보다 규칙과 기본값을 선호하는 더 높은 수준의 빌드 도구도 있습니다. 이러한 도구의 대부분은 npm 의존성 모듈이 최신 문법을 포함할 수 있다고 가정하고 프로덕션용으로 빌드할 때 적절한 구문 수준으로 트랜스파일합니다.
+
+webpack 및 Rollup을 위한 전용 플러그인 외에도 레거시 폴백이 있는 최신 JavaScript 번들은 [devolution](https://github.com/theKashey/devolution)을 사용하여 모든 프로젝트에 추가할 수 있습니다. Devolution은 빌드 시스템의 출력 결과물을 변환하여 레거시 JavaScript 변형을 생성하여 번들링 및 변환이 최신 출력물을 가정할 수 있도록 하는 독립 실행형 도구입니다.
+
+## 결론
+
+[EStimator.dev](http://estimator.dev/)는 대다수의 사용자를 위해 최신 JavaScript 코드로 전환하는 것이 얼마나 큰 영향을 미칠 수 있는지 쉽게 평가할 수 있는 방법을 제공하도록 제작되었습니다. 오늘날 ES2017은 최신 문법에 가장 가깝고 npm, Babel, webpack 및 Rollup과 같은 도구를 통해 이 문법을 사용하여 빌드 시스템을 구성하고 패키지를 작성할 수 있습니다. 이 게시물은 여러 접근 방식을 다루며 사용 사례에 가장 적합한 옵션을 사용해야 합니다.
+
+{% YouTube 'cLxNdLK--yI' %}
+
+<br>
diff --git a/src/site/content/ko/fast/rail/index.md b/src/site/content/ko/fast/rail/index.md
new file mode 100644
index 00000000000..5d275ebcfb5
--- /dev/null
+++ b/src/site/content/ko/fast/rail/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: RAIL 모델을 사용한 성능 측정
+description: |2-
+
+  RAIL 모델을 통해 디자이너와 개발자는 사용자 경험에 가장 큰 영향을 미치는 성능 최적화 작업을 안정적으로 목표로 삼을 수 있습니다. RAIL 모델이 설정한 목표와 지침, 그리고 이를 달성하기 위해 사용할 수 있는 도구에 대해 알아봅니다.
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL**은 성능에 대해 생각할 수 있는 구조를 제공하는 **사용자 중심**의 성능 모델입니다. 이 모델은 사용자 경험을 주요 작업(예: 탭, 스크롤, 로드)으로 분류하고 각각에 대한 성능 목표를 정의하는 데 도움을 줍니다.
+
+RAIL은 웹 앱 수명 주기의 4가지 뚜렷한 측면인 응답(response), 애니메이션(animation), 유휴 상태(idle) 및 로드(load)를 나타냅니다. 사용자는 이러한 각 컨텍스트에 대해 서로 다른 성능 기대치를 가지고 있으므로 컨텍스트 및 [사용자가 지연을 인식하는 방식에 대한 UX 연구](https://www.nngroup.com/articles/response-times-3-important-limits/)를 기반으로 성능 목표가 정의됩니다.
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="RAIL 성능 모델의 네 가지 부분: 응답(response), 애니메이션(animation), 유휴 상태(idle) 및 로드(load)", width="800", height="290" %} <figcaption>RAIL 성능 모델의 네 가지 부분</figcaption></figure>
+
+## 사용자에게 집중
+
+사용자를 성능 개선 노력의 중심에 둡니다. 아래 표는 사용자가 성능 지연을 인식하는 방식에 대한 주요 측정항목을 설명합니다.
+
+<table class="table-wrapper scrollbar">
+  <thead>성능 지연에 대한 사용자 인식</thead>
+  <tr>
+    <td>0~16ms</td>
+    <td>사용자는 움직임을 추적하는 데 매우 능숙하며 애니메이션이 매끄럽지 않으면 싫어합니다. 사용자는 초당 60개의 새 프레임이 렌더링되는 한 애니메이션을 부드럽게 인식합니다. 이 경우 브라우저가 새 프레임을 화면에 그리는 데 걸리는 시간을 포함하여 프레임당 16ms이며, 앱에서 프레임을 생성하는 데에는 약 10ms가 걸립니다.</td>
+  </tr>
+  <tr>
+    <td>0~100ms</td>
+    <td>이 시간 내에 사용자 동작에 응답하면 창과 사용자는 결과가 즉각적이라고 느낍니다. 더 길어지면, 동작과 응답 사이의 연결이 끊어집니다.</td>
+  </tr>
+  <tr>
+    <td>100~1000ms</td>
+    <td>이 창에서 대상이 자연스럽고 지속적인 작업 진행의 일부로 느껴집니다. 대부분의 웹 사용자에게 페이지 로드 또는 보기 변경은 작업을 나타냅니다.</td>
+  </tr>
+  <tr>
+    <td>1000ms 이상</td>
+    <td>1000밀리초(1초)를 초과하면 사용자는 수행 중인 작업에 대한 집중을 잃습니다.</td>
+  </tr>
+  <tr>
+    <td>10000ms 이상</td>
+    <td>10000밀리초(10초)를 초과하면 사용자가 좌절하고 작업을 포기할 가능성이 높습니다. 사용자는 나중에 돌아올 수도 있고 그렇지 않을 수도 있습니다.</td>
+  </tr>
+</table>
+
+{% Aside %} 사용자는 네트워크 조건 및 하드웨어에 따라 성능 지연을 다르게 인식합니다. 예를 들어, 빠른 Wi-Fi 연결을 사용하는 강력한 성능의 데스크톱 컴퓨터에서 사이트를 로드하면 일반적으로 1초 이내에 완료하며, 사용자는 이에 익숙해집니다. 연결 속도가 느린 3G 모바일 장치에서 사이트를 로드하면 시간이 더 오래 걸리므로 모바일 사용자는 일반적으로 더 인내하며 모바일에서 사이트를 5초 안에 로드한다는 현실적인 목표를 갖습니다. {% endAside %}
+
+## 목표 및 지침
+
+RAIL의 컨텍스트에서 **목표** 및 **지침**이라는 용어는 다음과 같은 구체적인 의미를 갖습니다.
+
+- **목표**. 사용자 경험과 관련된 주요 성능 측정항목입니다. 예를 들어 탭하면 100밀리초 이내에 화면에 그립니다. 인간의 인식은 상대적으로 일정하기 때문에 이러한 목표는 조만간 변경되지 않을 것입니다.
+
+- **지침**. 목표 달성에 도움이 되는 권장 사항입니다. 이는 현재 하드웨어 및 네트워크 연결 조건에 따라 다를 수 있으므로 시간이 지남에 따라 변경될 수 있습니다.
+
+## 응답: 50ms 미만으로 이벤트 처리
+
+**목표**: 사용자 입력으로 시작된 전환을 100ms 이내에 완료하여 사용자가 상호 작용이 즉각적인 것처럼 느끼게 합니다.
+
+**지침**:
+
+- 100ms 이내에 가시적인 응답을 보장하기 위해 50ms 이내에 사용자 입력 이벤트를 처리합니다. 이는 버튼 클릭, 양식 컨트롤 토글 전환 또는 애니메이션 시작과 같은 대부분의 입력에 적용됩니다. 이것은 터치하여 끌기 또는 스크롤에는 적용되지 않습니다.
+
+- 직관적이지 않게 들릴 수 있지만 사용자 입력에 즉시 응답하는 것이 항상 올바른 호출은 아닙니다. 리소스를 많이 필요로 하는 비싼 작업을 수행하기 위해 이 100ms 창을 사용할 수 있지만 사용자를 차단하지 않게 주의해야 합니다. 가능하면 백그라운드에서 작업하도록 합니다.
+
+- 완료하는 데 50ms 이상 걸리는 작업의 경우 항상 피드백을 제공합니다.
+
+### 50ms 또는 100ms?
+
+목표는 100ms 이내에 입력에 응답하는 것인데 우리의 예산은 왜 50ms에 불과할까요? 이는 일반적으로 입력 처리 외에 다른 작업이 수행되고 있으며, 해당 작업이 허용 가능한 입력 응답에 사용할 수 있는 시간의 일부를 차지하기 때문입니다. 애플리케이션이 유휴 시간 동안 권장되는 50ms 청크로 작업을 수행한다면, 이는 해당 작업 청크 중 하나의 동안 작업이 이루어질 때, 입력이 최대 50ms 동안 대기할 수 있음을 의미합니다. 이를 고려한다면 실제 입력 처리에 나머지 50ms만 사용할 수 있다고 가정하는 것이 안전합니다. 이러한 효과는 유휴 작업 동안 수신된 입력이 사용 가능한 처리 시간을 줄이며 큐에서 대기하는 방식을 보여주는 아래 다이어그램에 시각화되어 있습니다.
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="유휴 작업 동안 수신된 입력이 사용 가능한 처리 시간을 50ms로 줄이며 큐에서 대기하는 방식을 보여주는 다이어그램", width="800", height="400" %} <figcaption>유휴 작업이 입력 응답 예산에 영향을 미치는 방식.</figcaption></figure>
+
+## 애니메이션: 10ms 안에 프레임 생성
+
+**목표** :
+
+- 애니메이션의 각 프레임을 10ms 이하로 생성합니다. 기술적으로 각 프레임의 최대 예산은 16ms(1000ms/초당 60프레임 ≈ 16ms)이지만 브라우저가 각 프레임을 렌더링하는 데 약 6ms가 필요하므로 프레임당 10ms의 지침이 필요합니다.
+
+- 시각적 부드러움을 목표로 합니다. 프레임 속도가 달라지면 사용자가 알아차립니다.
+
+**지침** :
+
+- 애니메이션과 같이 높은 가중 지점에서의 핵심은 가능하다면 아무것도 하지 않고, 그럴 수 없는 경우 절대적으로 최소한의 작업만 수행합니다. 가능할 때마다 100ms 응답을 사용하여 값비싼 작업을 미리 계산하여 60fps에 도달할 가능성을 극대화합니다.
+
+- 다양한 애니메이션 최적화 전략은 [렌더링 성능](/rendering-performance/)을 참조합니다.
+
+{% Aside %} 모든 유형의 애니메이션을 인식합니다. 애니메이션은 단순한 UI 효과가 아닙니다. 이러한 각 상호 작용은 애니메이션으로 간주됩니다.
+
+- 입구 및 출구, [트윈](https://www.webopedia.com/TERM/T/tweening.html) 및 로드 표시기와 같은 시각적 애니메이션.
+- 스크롤. 여기에는 사용자가 스크롤을 시작한 다음 손을 떼면 페이지가 계속 스크롤되는 플링이 포함됩니다.
+- 끌기. 지도를 이동하거나 손가락을 모아 확대/축소하는 것과 같이 애니메이션이 사용자 상호 작용을 따르는 경우가 종종 있습니다. {% endAside %}
+
+## 유휴 상태: 유휴 시간 극대화
+
+**목표**: 유휴 시간을 극대화하여 페이지가 50ms 이내에 사용자 입력에 응답할 가능성을 높입니다.
+
+**지침** :
+
+- 유휴 시간을 사용하여 지연 작업을 완료합니다. 예를 들어 초기 페이지 로드의 경우 데이터를 최대한 적게 로드한 후 [유휴 시간](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)을 사용하여 나머지를 로드합니다.
+
+- 50ms 이내의 유휴 시간 동안 작업을 수행합니다. 더 길어지면 50ms 이내에 사용자 입력에 응답해야 하는 앱의 기능을 방해할 위험이 있습니다.
+
+- 사용자가 유휴 시간 작업 중에 페이지와 상호 작용하는 경우 사용자 상호 작용이 항상 가장 높은 우선순위를 취하며, 유휴 시간 작업은 중단해야 합니다.
+
+## 로드: 5초 이내에 콘텐츠를 전달하고 상호 작용 준비하기
+
+로드: 5초 이내에 콘텐츠를 전달하고 대화형 준비 완료하기
+
+**목표** :
+
+- 사용자의 장치 및 네트워크 기능과 관련된 빠른 로드 성능을 최적화합니다. 현재 첫 번째 로드의 좋은 목표는 페이지를 로드하고 [느린 3G 연결을 사용하는 중급 휴대 장치에서 5초 이내](/tti/)로 [상호 작용](/performance-budgets-101/#establish-a-baseline) 준비를 완료하는 것입니다.
+
+- 다음 로드의 경우 2초 이내로 페이지를 로드하는 것을 목표로 하는 것이 좋습니다.
+
+{% Aside %}
+
+이러한 목표는 시간이 지남에 따라 변경될 수 있습니다.
+
+{% endAside %}
+
+**지침** :
+
+- 사용자 간에 공통적인 모바일 장치 및 네트워크 연결에서 로드 성능을 테스트합니다. [Chrome 사용자 경험 보고서](/chrome-ux-report/)를 사용하여 사용자의 [연결 분포](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard)를 확인할 수 있습니다. 사이트에서 데이터를 사용할 수 없는 경우를 위해 [The Mobile Economy 2019](https://www.gsma.com/mobileeconomy/)는 Moto G4와 같은 중급 Android 휴대전화와 느린 3G 네트워크(400ms RTT 및 400kbps 전송 속도로 정의됨)가 좋은 글로벌 기준이라고 제안합니다. 이 조합은 [WebPageTest](https://www.webpagetest.org/easy)에서 사용할 수 있습니다.
+
+- 일반적인 모바일 사용자의 장치가 2G, 3G 또는 4G에 연결되어 있어도 실제로는 패킷 손실 및 네트워크 변동으로 인해 [유효 연결 속도](/adaptive-serving-based-on-network-quality/#how-it-works)가 상당히 느린 경우가 많습니다.
+
+- [렌더링 차단 리소스를 제거합니다](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
+
+- 완전한 로드를 인식하기 위해 5초 이내에 모든 것을 로드할 필요는 없습니다. [지연 로드 이미지](/browser-level-image-lazy-loading/), [코드 분할 JavaScript 번들](/reduce-javascript-payloads-with-code-splitting/) 및 [web.dev에 제안된 기타 최적화](/fast/)를 고려해 보십시오.
+
+{% Aside %} 페이지 로드 성능에 영향을 미치는 요인을 파악합니다.
+
+- 네트워크 속도 및 대기 시간
+- 하드웨어(예: 느린 CPU)
+- 캐시 제거
+- L2/L3 캐싱의 차이
+- 자바스크립트 파싱 {% endAside %}
+
+## RAIL 측정 도구
+
+RAIL 측정을 자동화하는 데 도움이 되는 몇 가지 도구가 있습니다. 사용하는 도구는 필요한 정보 유형과 선호하는 워크플로 유형에 따라 다릅니다.
+
+### Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/)는 페이지가 로드되거나 실행되는 동안 발생하는 모든 것에 대한 심층 분석을 제공합니다. **성능** 패널 UI에 익숙해지려면 [런타임 성능 분석 시작하기](https://developer.chrome.com/docs/devtools/evaluate-performance/)를 참조하십시오.
+
+다음 DevTools 기능이 특히 관련이 있습니다.
+
+- [CPU 조절](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle)로 덜 강력한 장치를 시뮬레이션합니다.
+
+- [네트워크 조절](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle)로 느린 연결을 시뮬레이션합니다.
+
+- [기본 스레드 활동 보기](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main)로 기록하는 동안 기본 스레드에서 발생한 모든 이벤트를 봅니다.
+
+- [표로 기본 스레드 활동 보기](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities)로 가장 많은 시간을 차지하는 활동을 기준으로 활동을 정렬합니다.
+
+- [초당 프레임 수(FPS) 분석](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps)으로 애니메이션이 실제로 원활하게 실행되는지 측정합니다.
+
+- **성능 모니터링**을 사용하여 실시간으로 [CPU 사용량, JS 힙 크기, DOM 노드, 초당 레이아웃 등을 모니터링](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor)합니다.
+
+- **네트워크** 섹션을 사용하여 기록하는 동안 발생한 [네트워크 요청을 시각화](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network)합니다.
+
+- [기록하는 동안 스크린샷을 캡처](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots)하여 페이지가 로드되는 동안이나 애니메이션이 실행되는 동안 등에 페이지가 어떻게 보이는지 정확하게 재생합니다.
+
+- [상호 작용 확인](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions)으로 사용자가 페이지와 상호 작용한 후 페이지에서 발생한 일을 빠르게 식별합니다.
+
+- 잠재적으로 문제가 있는 수신기가 실행될 때마다 페이지를 강조 표시하여 [실시간으로 스크롤 성능 문제를 찾습니다](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues).
+
+- [실시간으로 페인트 이벤트 보기](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)로 애니메이션 성능에 해를 끼칠 수 있는 비용이 많이 드는 페인트 이벤트를 식별합니다.
+
+### Lighthouse
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)는 Chrome DevTools와 [web.dev/measure](/measure/)에서 사용하고, Chrome 확장 프로그램과 Node.js 모듈로 사용하거나 WebPageTest 내에서 사용할 수 있습니다. URL을 지정하면 느린 3G 연결을 사용하는 중급 장치를 시뮬레이션하고 페이지에서 일련의 감사를 실행한 다음 로드 성능에 대한 보고서와 개선 방법에 대한 제안을 제공합니다.
+
+다음 감사가 특히 관련이 있습니다.
+
+**응답**
+
+- [최대 잠재적 최초 입력 지연(FID)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/) . 기본 스레드 유휴 시간을 기반으로 앱이 사용자 입력에 응답하는 데 걸리는 시간을 추정합니다.
+
+- [스크롤 성능을 향상시키기 위해 소극적 수신기를 사용하지 않습니다](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/) .
+
+- [총 차단 시간](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/) . 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 응답하지 못하도록 페이지가 차단된 총 시간을 측정합니다.
+
+- [상호 작용까지의 시간](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive). 사용자가 모든 페이지 요소와 일관되게 상호 작용할 수 있는 시점을 측정합니다.
+
+**로드**
+
+- [페이지 및 start_url을 제어하는 서비스 작업자를 등록하지 않습니다](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/). 서비스 작업자는 사용자 장치의 공통 리소스를 캐시하여 네트워크를 통해 리소스를 가져오는 데 소요되는 시간을 줄일 수 있습니다.
+
+- [모바일 네트워크에서 페이지 로드가 충분히 빠르지 않습니다](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/).
+
+- [렌더링 차단 리소스를 제거합니다](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources) .
+
+- [오프스크린 이미지를 지연합니다](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/). 필요할 때까지 오프스크린 이미지 로드를 지연합니다.
+
+- [이미지 크기를 적절하게 조정합니다](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/). 모바일 뷰포트에서 렌더링된 크기보다 훨씬 큰 이미지를 제공하면 안 됩니다.
+
+- [중요한 요청의 연결을 피합니다](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).
+
+- [모든 해당 리소스에 대해 HTTP/2를 사용하지 않습니다](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).
+
+- [이미지를 효율적으로 인코딩합니다](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
+
+- [텍스트 압축을 활성화합니다](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/) .
+
+- [거대한 네트워크 페이로드를 피합니다](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).
+
+- [과도한 DOM 크기를 피합니다](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). 페이지를 렌더링하는 데 필요한 DOM 노드만 전달하여 네트워크 바이트를 줄입니다.
+
+### WebPageTest
+
+WebPageTest는 실제 브라우저를 사용하여 웹페이지에 액세스하고 타이밍 측정항목을 수집하는 웹 성능 도구입니다. 느린 3G 연결을 사용하는 실제 Moto G4 장치에서의 페이지의 로드 성능에 대한 자세한 보고서를 받으려면 [webpagetest.org/easy](https://webpagetest.org/easy)에 URL을 입력합니다. Lighthouse 감사를 포함하도록 구성할 수도 있습니다.
+
+## 요약
+
+RAIL은 웹사이트의 사용자 경험을 고유한 상호 작용으로 구성된 여정으로 보기 위한 렌즈입니다. 사용자 경험에 가장 큰 영향을 미치는 성능 목표를 설정하기 위해 사용자가 사이트를 어떻게 인식하는지 이해해야 합니다.
+
+- 사용자에게 집중합니다.
+
+- 100ms 이내에 사용자 입력에 응답합니다.
+
+- 애니메이션 또는 스크롤 시 10ms 미만의 프레임을 생성합니다.
+
+- 메인 스레드 유휴 시간을 극대화합니다.
+
+- 5000ms 이내에 상호 작용 콘텐츠를 로드합니다.
diff --git a/src/site/content/ko/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/ko/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..9140ae3831e
--- /dev/null
+++ b/src/site/content/ko/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: 코드 분할로 JavaScript 페이로드 줄이기
+authors:
+  - houssein
+description: 대용량 JavaScript 페이로드를 보내면 사이트 속도에 상당한 영향을 미칩니다. 애플리케이션의 첫 페이지가 로드되는 즉시 모든 JavaScript를 사용자에게 제공하는 대신 번들을 여러 조각으로 나누고 맨 처음에 필요한 것만 보내십시오.
+date: 2018-11-05
+codelabs:
+  - codelab-code-splitting
+tags:
+  - performance
+---
+
+기다리는 것을 좋아하는 사람은 없습니다. **[사용자의 50% 이상이 로드하는 데 3초 이상 걸리는 경우 웹사이트를 이탈합니다](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)**.
+
+대용량 JavaScript 페이로드를 보내면 사이트 속도에 상당한 영향을 미칩니다. 애플리케이션의 첫 페이지가 로드되는 즉시 모든 JavaScript를 사용자에게 제공하는 대신 번들을 여러 조각으로 나누고 맨 처음에 필요한 것만 보내십시오.
+
+## 측정
+
+Lighthouse는 페이지에서 모든 JavaScript를 실행하는 데 상당한 시간이 걸리면 실패한 감사라고 표시합니다.
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="실행하는 데 너무 오래 걸리는 스크립트를 보여주는 실패한 Lighthouse 감사.", width="797", height="100" %}
+
+사용자가 애플리케이션을 로드할 때 초기 경로에 필요한 코드만 보내도록 JavaScript 번들을 분할합니다. 이렇게 하면 구문 분석 및 컴파일해야 하는 스크립트의 양이 최소화되어 페이지 로드 시간이 빨라집니다.
+
+[webpack](https://parceljs.org/code_splitting.html), [Parcel](https://rollupjs.org/guide/en#dynamic-import), [Rollup](https://webpack.js.org/guides/code-splitting/)과 같은 인기 있는 모듈 번들러를 사용하면 [동적 가져오기](https://v8.dev/features/dynamic-import)를 사용하여 번들을 분할할 수 있습니다. 예를 들어 양식이 제출될 때 실행되는 `someFunction` 메소드의 예를 보여주는 다음 코드 스니펫을 고려하십시오.
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // uses moduleA
+}
+```
+
+여기에서 `someFunction`은 특정 라이브러리에서 가져온 모듈을 사용합니다. 이 모듈이 다른 곳에서 사용되지 않는 경우 동적 가져오기를 사용하여 사용자가 양식을 제출한 경우에만 가져오도록 코드 블록을 수정할 수 있습니다.
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // using the default export
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // uses moduleA
+}
+```
+
+모듈을 구성하는 코드는 초기 번들에 포함되지 않고 이제 **지연 로드**되거나 양식 제출 후 필요할 때만 사용자에게 제공됩니다. 페이지 성능을 더욱 향상시키려면 [중요한 청크를 미리 로드하여 우선순위를 지정하고 더 빨리 가져오세요](/preload-critical-assets).
+
+이전 코드 스니펫은 간단한 예이지만 지연 로드 타사 종속성은 대규모 애플리케이션에서 일반적인 패턴이 아닙니다. 일반적으로 타사 종속성은 자주 업데이트되지 않기 때문에 캐시될 수 있는 별도의 공급업체 번들로 분할됩니다. [**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/)이 이를 어떻게 도울 수 있는지 자세히 알아볼 수 있습니다.
+
+클라이언트 측 프레임워크를 사용할 때 경로 또는 구성 요소 수준에서 분할하는 것은 애플리케이션의 다른 부분을 지연 로드하는 더 간단한 방법입니다. 웹팩(webpack)을 사용하는 많은 인기 프레임워크는 구성을 직접 살펴보는 것보다 지연 로딩을 쉽게 하기 위해 추상화를 제공합니다.
diff --git a/src/site/content/ko/fast/reduce-network-payloads-using-text-compression/index.md b/src/site/content/ko/fast/reduce-network-payloads-using-text-compression/index.md
new file mode 100644
index 00000000000..c32c7803736
--- /dev/null
+++ b/src/site/content/ko/fast/reduce-network-payloads-using-text-compression/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: 네트워크 페이로드 축소 및 압축
+authors:
+  - houssein
+date: 2018-11-05
+description: 웹 페이지의 성능을 향상시키는 데 사용할 수 있는 두 가지 유용한 기술인 축소 및 데이터 압축이 있습니다. 이 두 가지 기술을 통합하면 페이로드 크기가 줄어들고 결과적으로 페이지 로드 시간이 단축됩니다.
+codelabs:
+  - codelab-text-compression
+  - codelab-text-compression-brotli
+tags:
+  - performance
+---
+
+웹 페이지의 성능을 향상시키는 데 사용할 수 있는 두 가지 유용한 기술이 있습니다.
+
+- 축소
+- 데이터 압축
+
+이 두 기술을 모두 통합하면 페이로드 크기가 줄어들고 페이지 로드 시간이 향상됩니다.
+
+## 측정
+
+Lighthouse는 페이지에서 축소할 수 있는 CSS 또는 JS 리소스를 감지하면 실패한 감사를 표시합니다.
+
+{% Img src="image/admin/ZT9ESeCStegt0SklYbni.png", alt="Lighthouse CSS 감사 축소", width="800", height="90" %}
+
+{% Img src="image/admin/vDaAnUSvQxmGcoasQj1k.png", alt="Lighthouse Minify JS 감사", width="800", height="112" %}
+
+또한 압축되지 않은 자산에 대해 감사합니다.
+
+{% Img src="image/admin/xfqzdLuu3w3lanxo5Ggc.png", alt="Lighthouse: 텍스트 압축 사용", width="800", height="123" %}
+
+## 축소
+
+축소는 더 작지만 완벽하게 유효한 코드 파일을 만드는 데 필요하지 않은 공백과 모든 코드를 제거하는 프로세스입니다. <a>Terser</a>는 널리 사용되는 JavaScript 압축 도구입니다. [webpack](https://webpack.js.org/) v4에는 기본적으로 이 라이브러리에 대한 플러그인이 포함되어 있어 축소된 빌드 파일을 생성합니다.
+
+- webpack v4 이상을 사용 중이라면 추가 작업 없이 진행하는 것이 좋습니다. 👍
+- 이전 버전의 웹팩을 사용하는 경우 웹팩 구성 설정에 `TerserWebpackPlugin`을 설치하고 포함합니다. [설명서](https://webpack.js.org/plugins/terser-webpack-plugin/)를 따라 방법을 알아보세요.
+- `Terser`를 사용하지 않는 경우 Terser를 CLI 도구로 사용하거나 애플리케이션에 대한 종속성으로 직접 포함하십시오. 프로젝트 [문서](https://github.com/terser-js/terser)에 지침이 나와 있습니다.
+
+## 데이터 압축
+
+**압축**은 압축 알고리즘을 사용하여 데이터를 수정하는 프로세스입니다. [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s)은 서버 및 클라이언트 상호 작용에 가장 널리 사용되는 압축 형식입니다. [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html)는 Gzip보다 훨씬 더 나은 압축 결과를 제공할 수 있는 최신 압축 알고리즘입니다.
+
+{% Aside %} 파일을 압축하면 웹페이지의 성능이 크게 향상될 수 있지만 직접 압축할 필요는 거의 없습니다. 많은 호스팅 플랫폼, CDN 및 역방향 프록시 서버는 기본적으로 압축을 사용하여 자산을 인코딩하거나 쉽게 구성할 수 있습니다. 자체 솔루션을 출시하기 전에 압축이 이미 지원되는지 확인하려면 사용 중인 도구에 대한 설명서를 읽으십시오. {% endAside %}
+
+브라우저로 보낸 파일을 압축하는 방법에는 두 가지가 있습니다.
+
+- 동적으로
+- 정적으로
+
+두 접근 방식 모두 다음 섹션에서 다룰 고유한 장점과 단점이 있습니다. 애플리케이션에 가장 적합한 것을 사용하십시오.
+
+## 동적 압축
+
+이 프로세스에는 브라우저에서 요청할 때 자산을 즉석에서 압축하는 작업이 포함됩니다. 이것은 수동으로 또는 빌드 프로세스를 사용하여 파일을 압축하는 것보다 간단할 수 있지만 높은 압축 수준을 사용하는 경우 지연이 발생할 수 있습니다.
+
+[Express](https://expressjs.com/)는 Node용으로 널리 사용되는 웹 프레임워크이며 [압축](https://github.com/expressjs/compression) 미들웨어 라이브러리를 제공합니다. 요청 시 자산을 압축하는 데 사용합니다. 다음은 올바르게 사용하는 전체 서버 파일의 예입니다.
+
+```js/5
+const express = require('express');
+const compression = require('compression');
+
+const app = express();
+
+app.use(compression());
+
+app.use(express.static('public'));
+
+const listener = app.listen(process.env.PORT, function() {
+	console.log('Your app is listening on port ' + listener.address().port);
+});
+```
+
+`gzip`를 사용하여 자산을 압축합니다. 웹 서버가 지원하는 경우 더 나은 압축 비율을 달성하기 위해 Brotli를 통해 압축하기 위해 [Shrink-ray](https://github.com/aickin/shrink-ray#readme)와 같은 별도의 모듈을 사용하는 것이 좋습니다.
+
+{% Aside 'codelab' %} express.js를 사용하여 [gzip](/codelab-text-compression) 및 [Brotli](/codelab-text-compression-brotli)로 자산을 압축합니다. {% endAside %}
+
+## 정적 압축
+
+정적 압축에는 미리 자산을 압축하고 저장하는 작업이 포함됩니다. 이렇게 하면 특히 높은 압축 수준을 사용하는 경우 빌드 프로세스가 더 오래 걸릴 수 있지만 브라우저가 압축된 리소스를 가져올 때 지연이 발생하지 않습니다.
+
+웹 서버가 Brotli를 지원하는 경우 [웹팩](https://github.com/mynameiswhm/brotli-webpack-plugin)과 함께 BrotliWebpackPlugin과 같은 플러그인을 사용하여 빌드 단계의 일부로 자산을 압축합니다. 그렇지 않으면 [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin)을 사용하여 gzip으로 자산을 압축합니다. webpack 구성 파일에 다른 플러그인과 마찬가지로 포함될 수 있습니다.
+
+```js/4
+module.exports = {
+	//...
+	plugins: [
+		//...
+		new CompressionPlugin()
+	]
+}
+```
+
+압축 파일이 빌드 폴더의 일부가 되면 서버에서 모든 JS 끝점을 처리하여 압축 파일을 제공하는 경로를 만듭니다. 다음은 gzip으로 압축된 자산에 대해 Node 및 Express로 이를 수행하는 방법의 예입니다.
+
+<pre>const express = require('express');
+const app = express();
+
+&lt;strong&gt;app.get('*.js', (req, res, next) =&gt; {
+	req.url = req.url + '.gz';
+	res.set('Content-Encoding', 'gzip');
+	next();
+});&lt;/strong&gt;
+
+app.use(express.static('public'));
+</pre>
diff --git a/src/site/content/ko/fast/reduce-webfont-size/index.md b/src/site/content/ko/fast/reduce-webfont-size/index.md
new file mode 100644
index 00000000000..e7c25798066
--- /dev/null
+++ b/src/site/content/ko/fast/reduce-webfont-size/index.md
@@ -0,0 +1,228 @@
+---
+layout: post
+title: WebFont 크기 줄이기
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2
+
+  이 게시물은 좋은 타이포그래피가 느린 사이트를 의미하지 않도록 사이트에서 사용하는 WebFonts의 크기를 줄이는 방법을 설명합니다.
+tags:
+  - performance
+  - fonts
+---
+
+타이포그래피는 좋은 디자인, 브랜딩, 가독성 및 접근성의 기본입니다. WebFont는 위의 모든 것 이상을 가능하게 합니다. 텍스트는 선택 가능하고 검색 가능하며 확대/축소 가능하고 높은 DPI 친화적이며 화면 크기와 해상도에 관계없이 일관되고 선명한 텍스트 렌더링을 제공합니다. WebFonts는 좋은 디자인, UX 및 성능에 매우 중요합니다.
+
+WebFont 최적화는 전체 성능 전략의 중요한 부분입니다. 각 글꼴은 추가 리소스이며 일부 글꼴은 텍스트 렌더링을 차단할 수 있지만 페이지에서 WebFonts를 사용한다고 해서 더 느리게 렌더링되어야 하는 것은 아닙니다. 반대로 최적화된 글꼴을 페이지에 로드 및 적용하는 방법에 대한 신중한 전략과 결합하면 전체 페이지 크기를 줄이고 페이지 렌더링 시간을 개선할 수 있습니다.
+
+## WebFont의 구조
+
+*WebFont*는 글리프 모음이며 각 글리프는 문자나 기호를 설명하는 벡터 모양입니다. 결과적으로 두 개의 간단한 변수가 특정 글꼴 파일의 크기를 결정합니다. 각 글리프의 벡터 경로 복잡성과 특정 글꼴의 글리프 수입니다. 예를 들어, 가장 인기 있는 WebFont 중 하나인 Open Sans에는 라틴어, 그리스어 및 키릴 문자를 포함하는 897개의 글리프가 포함되어 있습니다.
+
+{% Img src="image/admin/B92rhiBJD9sx88a5CvVy.png", alt="글꼴 글리프 테이블", width="800", height="309" %}
+
+글꼴을 선택할 때 지원되는 문자 집합을 고려하는 것이 중요합니다. 페이지 콘텐츠를 여러 언어로 현지화해야 하는 경우 사용자에게 일관된 모양과 경험을 제공할 수 있는 글꼴을 사용해야 합니다. 예를 들어, [Google의 Noto 글꼴 모음](https://www.google.com/get/noto/)은 전 세계의 모든 언어를 지원하는 것을 목표로 합니다. 그러나 모든 언어가 포함된 Noto의 총 크기는 1.1GB+ ZIP 다운로드가 됩니다.
+
+이 게시물에서는 WebFont의 전달된 파일 크기를 줄이는 방법을 알아봅니다.
+
+### WebFont 형식
+
+오늘날 웹에서는 4가지 글꼴 컨테이너 형식을 사용하고 있습니다.
+
+- [EOT](https://en.wikipedia.org/wiki/Embedded_OpenType)
+- [TTF](https://en.wikipedia.org/wiki/TrueType)
+- [WOFF](https://en.wikipedia.org/wiki/Web_Open_Font_Format)
+- [WOFF2](https://www.w3.org/TR/WOFF2/).
+
+[WOFF](http://caniuse.com/#feat=woff) 및 [WOFF 2.0](http://caniuse.com/#feat=woff2)이 가장 폭넓게 지원되지만 이전 브라우저와의 호환성을 위해 다른 형식을 포함해야 할 수도 있습니다.
+
+- WOFF 2.0 변형을 지원하는 브라우저에 제공합니다.
+- 대부분의 브라우저에 WOFF 변형을 제공합니다.
+- 이전 Android(4.4 미만) 브라우저에 TTF 변형을 제공합니다.
+- 이전 IE(IE9 미만) 브라우저에 EOT 변형을 제공합니다.
+
+[{% Aside %} 기술적으로 SVG 글꼴 컨테이너](http://caniuse.com/svg-fonts)라는 또 다른 컨테이너 형식이 있지만 IE와 Firefox는 이를 지원하지 않았으며 이제 Chrome에서 더 이상 사용되지 않습니다. 따라서 사용이 제한적이며 이 가이드에서는 의도적으로 생략했습니다. {% endAside %}
+
+### 압축으로 글꼴 크기 줄이기
+
+글꼴은 문자 형태를 설명하는 경로 집합인 글리프 모음입니다. 개별 글리프는 다르지만 GZIP 또는 호환 가능한 압축기로 압축할 수 있는 유사한 정보가 많이 포함되어 있습니다.
+
+- EOT 및 TTF 형식은 기본적으로 압축되지 않습니다. 이러한 형식을 제공할 때 서버가 [GZIP 압축](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip)을 적용하도록 구성되어 있는지 확인하십시오.
+- WOFF에는 압축 기능이 내장되어 있습니다. WOFF 압축기가 최적의 압축 설정을 사용하고 있는지 확인하십시오.
+- WOFF2는 사용자 지정 전처리 및 압축 알고리즘을 사용하여 다른 형식에 비해 ~30% 파일 크기 감소를 제공합니다. 자세한 내용 [은 WOFF 2.0 평가 보고서](http://www.w3.org/TR/WOFF20ER/)를 참조하십시오.
+
+마지막으로 일부 글꼴 형식에는 일부 플랫폼에서 필요하지 않을 수 있는 [글꼴 힌트](https://en.wikipedia.org/wiki/Font_hinting) 및 [커닝](https://en.wikipedia.org/wiki/Kerning) 정보와 같은 추가 메타데이터가 포함되어 있어 추가 파일 크기 최적화가 가능합니다. 사용 가능한 최적화 옵션에 대해서는 글꼴 압축기에 문의하고 이 경로를 선택하는 경우 이러한 최적화된 글꼴을 테스트하고 각 브라우저에 전달할 적절한 인프라가 있는지 확인하십시오. 예를 들어 [Google Fonts](https://fonts.google.com/)는 각 글꼴에 대해 30개 이상의 최적화된 변형을 유지 관리하고 각 플랫폼 및 브라우저에 대한 최적의 변형을 자동으로 감지하여 제공합니다.
+
+{% Aside %} EOT, TTF 및 WOFF 형식에 [Zopfli 압축](http://en.wikipedia.org/wiki/Zopfli) 사용을 고려하세요. Zopfli는 zlib 호환 압축기로 gzip에 비해 파일 크기가 5% 감소합니다. {% endAside %}
+
+## @font-face를 사용하여 글꼴 모음 정의
+
+`@font-face` CSS at-rule을 사용하면 특정 글꼴 리소스의 위치, 스타일 특성, 사용해야 하는 유니코드 코드포인트를 정의할 수 있습니다. `@font-face` 선언의 조합은 "글꼴 패밀리"를 구성하는 데 사용할 수 있으며, 브라우저는 이 글꼴 리소스를 다운로드하여 현재 페이지에 적용해야 하는 글꼴 리소스를 평가하는 데 사용할 수 있습니다.
+
+### 가변 글꼴 고려
+
+가변 글꼴은 글꼴의 여러 변형이 필요한 경우 글꼴의 파일 크기를 크게 줄일 수 있습니다. 일반 및 볼드 스타일과 기울임꼴 버전을 로드할 필요 없이 모든 정보가 포함된 단일 파일을 로드할 수 있습니다.
+
+가변 글꼴은 이제 모든 최신 브라우저에서 지원됩니다. 자세한 내용 [은 웹의 가변 글꼴 소개](/variable-fonts/) 에서 확인하세요.
+
+### 올바른 형식 선택
+
+각 `@font-face` 선언은 여러 선언의 논리적 그룹 역할을 하는 글꼴 모음의 이름, 스타일, 두께 및 스트레치와 같은 [글꼴 속성](http://www.w3.org/TR/css3-fonts/#font-prop-desc) 및 글꼴 리소스에 대한 위치의 우선 순위 목록을 지정하는 [src 설명자](http://www.w3.org/TR/css3-fonts/#src-desc)를 제공합니다.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome.woff2') format('woff2'),
+        url('/fonts/awesome.woff') format('woff'),
+        url('/fonts/awesome.ttf') format('truetype'),
+        url('/fonts/awesome.eot') format('embedded-opentype');
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Awesome Font Italic'),
+        url('/fonts/awesome-i.woff2') format('woff2'),
+        url('/fonts/awesome-i.woff') format('woff'),
+        url('/fonts/awesome-i.ttf') format('truetype'),
+        url('/fonts/awesome-i.eot') format('embedded-opentype');
+}
+```
+
+먼저, 위의 예는 두 가지 스타일(normal 및 *italic*)을 가진 단일 *Awesome Font* 모음을 정의하며, 각 스타일은 서로 다른 글꼴 리소스 집합을 가리킵니다. 차례로 각 `src` 설명자에는 우선 순위가 지정되고 쉼표로 구분된 리소스 변형 목록이 포함됩니다.
+
+- `local()` 지시문을 사용하면 로컬에 설치된 글꼴을 참조, 로드 및 사용할 수 있습니다.
+- `url()` 지시문을 사용하면 외부 글꼴을 로드할 수 있으며 제공된 URL에서 참조하는 글꼴 형식을 나타내는 선택적 `format()` 힌트를 포함할 수 있습니다.
+
+{% Aside %} 기본 시스템 글꼴 중 하나를 참조하지 않는 한 사용자가 로컬로 설치하는 경우는 드뭅니다. 특히 모바일 기기에서는 추가 글꼴을 "설치"하는 것이 사실상 불가능합니다. 항상 "만약에 대비하여" `local()`로 시작해야 하며 `url()` 항목 목록을 제공해야 합니다. {% endAside %}
+
+브라우저는 글꼴이 필요하다고 판단하면 지정된 순서대로 제공된 리소스 목록을 반복하고 적절한 리소스를 로드하려고 시도합니다. 예를 들어 위의 예를 따르면 다음과 같습니다.
+
+1. 브라우저는 페이지 레이아웃을 수행하고 페이지에 지정된 텍스트를 렌더링하는 데 필요한 글꼴 변형을 결정합니다.
+2. 필요한 각 글꼴에 대해 브라우저는 해당 글꼴을 로컬에서 사용할 수 있는지 확인합니다.
+3. 글꼴을 로컬에서 사용할 수 없는 경우 브라우저는 외부 정의를 반복합니다.
+    - 형식 힌트가 있는 경우 브라우저는 다운로드를 시작하기 전에 힌트를 지원하는지 확인합니다. 브라우저가 힌트를 지원하지 않으면 브라우저는 다음 힌트로 넘어갑니다.
+    - 형식 힌트가 없으면 브라우저는 리소스를 다운로드합니다.
+
+적절한 형식 힌트와 함께 로컬 및 외부 지시문을 조합하면 사용 가능한 모든 글꼴 형식을 지정하고 브라우저가 나머지를 처리하도록 할 수 있습니다. 브라우저는 필요한 리소스를 결정하고 최적의 형식을 선택합니다.
+
+{% Aside %} 글꼴 변형이 지정되는 순서가 중요합니다. 브라우저는 지원하는 첫 번째 형식을 선택합니다. 따라서 최신 브라우저에서 WOFF 2.0을 사용하려면 WOFF 위에 WOFF 2.0 선언을 배치해야 합니다. {% endAside %}
+
+### 유니코드 범위 하위 집합
+
+스타일, 두께 및 늘이기 같은 글꼴 속성 외에도 `@font-face` 규칙을 사용하면 각 리소스에서 지원하는 유니코드 코드포인트 집합을 정의할 수 있습니다. 이를 통해 큰 유니코드 글꼴을 더 작은 하위 집합(예: 라틴어, 키릴 자모 및 그리스어 하위 집합)으로 분할하고 특정 페이지의 텍스트를 렌더링하는 데 필요한 글리프만 다운로드할 수 있습니다.
+
+[유니코드 범위 설명자](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range)를 사용하면 쉼표로 구분된 범위 값 목록을 지정할 수 있습니다. 각 목록은 다음 세 가지 형식 중 하나일 수 있습니다.
+
+- 단일 코드포인트(예: `U+416` )
+- 간격 범위(예: `U+400-4ff` ): 범위의 시작 및 끝 코드포인트를 나타냅니다.
+- 와일드카드 범위(예: `U+4??` ): `?` 문자는 16진수를 나타냅니다.
+
+예를 들어, *Awesome Font* 모음을 라틴어 및 일본어 하위 집합으로 분할할 수 있으며 각 하위 집합은 브라우저가 필요에 따라 다운로드합니다.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-jp.woff2') format('woff2'),
+        url('/fonts/awesome-jp.woff') format('woff'),
+        url('/fonts/awesome-jp.ttf') format('truetype'),
+        url('/fonts/awesome-jp.eot') format('embedded-opentype');
+  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
+}
+```
+
+{% Aside %} 유니코드 범위 하위 설정은 상형 문자 수가 서양 언어보다 훨씬 많고 일반적인 "전체" 글꼴이 수십 킬로바이트가 아닌 메가바이트로 측정되는 아시아 언어에 특히 중요합니다. {% endAside %}
+
+유니코드 범위 하위 집합과 글꼴의 각 스타일 변형에 대한 개별 파일을 사용하면 더 빠르고 효율적으로 다운로드할 수 있는 합성 글꼴 모음을 정의할 수 있습니다. 방문자는 필요한 변형과 하위 집합만 다운로드하며 페이지에서 보거나 사용할 수 없는 하위 집합을 강제로 다운로드하지 않습니다.
+
+대부분의 브라우저는 [이제 unicode-range를 지원](http://caniuse.com/#feat=font-unicode-range)합니다. 이전 브라우저와의 호환성을 위해 "수동 하위 설정"으로 대체해야 할 수도 있습니다. 이 경우 필요한 모든 하위 집합이 포함된 단일 글꼴 리소스를 제공하고 나머지는 브라우저에서 숨겨야 합니다. 예를 들어 페이지에서 라틴 문자만 사용하는 경우 다른 글리프를 제거하고 해당 특정 하위 집합을 독립 실행형 리소스로 제공할 수 있습니다.
+
+1. **필요한 하위 집합을 결정합니다.**
+    - 브라우저가 유니코드 범위 하위 집합을 지원하는 경우 올바른 하위 집합을 자동으로 선택합니다. `@font-face` 규칙에 적절한 유니코드 범위를 지정하기만 하면 됩니다.
+    - 브라우저가 유니코드 범위 하위 집합을 지원하지 않으면 페이지에서 불필요한 하위 집합을 모두 숨겨야 합니다. 즉, 개발자는 필수 하위 집합을 지정해야 합니다.
+2. **글꼴 하위 집합 생성:**
+    - 오픈 소스 [pyftsubset 도구](https://github.com/behdad/fonttools/)를 사용하여 글꼴의 하위 집합을 만들고 최적화하십시오.
+    - 일부 글꼴 서비스는 페이지에 필요한 하위 집합을 수동으로 지정하는 데 사용할 수 있는 사용자 정의 쿼리 매개변수를 통한 수동 하위 설정을 허용합니다. 글꼴 제공업체의 설명서를 참조하십시오.
+
+### 글꼴 선택 및 합성
+
+각 글꼴 모음은 여러 스타일 변형(일반, 굵게, 기울임꼴)과 각 스타일에 대한 여러 가중치로 구성되며, 각 스타일에는 서로 다른 간격, 크기 또는 다른 모양과 같은 매우 다른 글리프 모양이 포함될 수 있습니다.
+
+{% Img src="image/admin/FNtAc2xRmx2MuUt2MADj.png", alt="글꼴 두께", width="697", height="127" %}
+
+예를 들어, 위의 다이어그램은 400(일반), 700(굵게) 및 900(매우 굵게)의 세 가지 다른 굵기 두께를 제공하는 글꼴 모음을 보여줍니다. 다른 모든 중간 변형(회색으로 표시됨)은 브라우저에서 가장 가까운 변형에 자동으로 매핑됩니다.
+
+<blockquote>
+  <p>면이 없는 가중치를 지정하면 가중치가 가까운 면이 사용됩니다. 일반적으로 굵은 가중치는 가중치가 더 큰 면에 매핑되고 가벼운 가중치는 가중치가 더 가벼운 면에 매핑됩니다.</p>
+<cite><p data-md-type="paragraph"><a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm">CSS 글꼴 일치 알고리즘</a></p></cite>
+</blockquote>
+
+*기울임꼴* 변형에도 유사한 논리가 적용됩니다. 글꼴 디자이너는 생성할 변형을 제어하고 페이지에서 사용할 변형을 제어합니다. 각 변형은 별도의 다운로드이므로 변형 수를 작게 유지하는 것이 좋습니다. *예를 들어, Awesome Font* 모음에 대해 두 개의 굵은 변형을 정의할 수 있습니다.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l-700.woff2') format('woff2'),
+        url('/fonts/awesome-l-700.woff') format('woff'),
+        url('/fonts/awesome-l-700.ttf') format('truetype'),
+        url('/fonts/awesome-l-700.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+위의 예는 동일한 라틴 문자 집합(`U+000-5FF`)을 포함하지만 일반(400) 및 굵게(700)의 두 가지 "가중치"를 제공하는 두 가지 리소스로 구성된 *Awesome Font* 모음을 선언합니다. 그러나 CSS 규칙 중 하나가 다른 글꼴 두께를 지정하거나 font-style 속성을 기울임꼴로 설정하면 어떻게 됩니까?
+
+- 정확한 글꼴 일치를 사용할 수 없는 경우 브라우저는 가장 가까운 글꼴로 대체합니다.
+- 일치하는 스타일이 없으면(예: 위의 예에서 기울임꼴 변형이 선언되지 않은 경우) 브라우저는 자체 글꼴 변형을 합성합니다.
+
+{% Img src="image/admin/a8Jo2cIO1tPsj71AzftS.png", alt="글꼴 합성", width="800", height="356" %}
+
+{% Aside 'warning' %} 합성된 접근 방식은 기울임꼴 형태의 모양이 매우 다른 키릴 자모와 같은 스크립트에는 적합하지 않을 수 있습니다. 해당 스크립트에서 적절한 충실도를 위해 실제 기울임꼴 글꼴을 사용하십시오. {% endAside %}
+
+위의 예는 Open Sans의 실제 글꼴과 합성 글꼴 결과의 차이를 보여줍니다. 합성된 모든 변형은 단일 400 가중치 글꼴에서 생성됩니다. 보시다시피 결과에 눈에 띄는 차이가 있습니다. 굵게 및 비스듬한 변형을 생성하는 방법에 대한 세부 정보는 지정되지 않습니다. 따라서 결과는 브라우저마다 다르며 글꼴에 따라 크게 달라집니다.
+
+{% Aside %} 최상의 일관성과 시각적 결과를 얻으려면 글꼴 합성에 의존하지 마십시오. 대신 사용된 글꼴 변형의 수를 최소화하고 해당 위치를 지정하여 페이지에서 사용할 때 브라우저에서 다운로드할 수 있도록 합니다. 또는 가변 글꼴을 사용하도록 선택합니다. 즉, 어떤 경우에는 합성된 변형이 [실행 가능한 옵션](https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/)일 수 있지만 합성된 변형을 사용할 때는 주의해야 합니다. {% endAside %}
+
+## WebFont 크기 최적화 체크리스트
+
+- **글꼴 사용 감사 및 모니터링:** 페이지에 너무 많은 글꼴을 사용하지 말고 각 글꼴에 대해 사용된 변형 수를 최소화하십시오. 이는 사용자에게 보다 일관되고 빠른 경험을 제공하는 데 도움이 됩니다.
+- **글꼴 리소스의** 하위 집합: 많은 글꼴이 하위 집합이 되거나 여러 유니코드 범위로 분할되어 특정 페이지에 필요한 글리프만 제공할 수 있습니다. 이렇게 하면 파일 크기가 줄어들고 리소스의 다운로드 속도가 향상됩니다. 그러나 하위 집합을 정의할 때 글꼴 재사용을 위해 최적화하도록 주의하십시오. 예를 들어, 각 페이지에 서로 다르지만 겹치는 문자 집합을 다운로드하지 마십시오. 예를 들어 라틴어 및 키릴 자모와 같은 스크립트를 기반으로 하위 집합을 지정하는 것이 좋습니다.
+- **각 브라우저에 최적화된 글꼴 형식** 제공: 각 글꼴을 WOFF 2.0, WOFF, EOT 및 TTF 형식으로 제공합니다. EOT 및 TTF 형식은 기본적으로 압축되지 않으므로 GZIP 압축을 적용해야 합니다.
+- **`src` 목록에서 `local()`에 우선 순위 부여:** 목록 `local('글꼴 이름')` 처음에 `src` 요청이 이미 설치된 글꼴에 대해 HTTP 요청이 이뤄지지 않았음을 확인합니다.
+- **[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)를 사용하여** [텍스트 압축](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/)을 테스트합니다.
diff --git a/src/site/content/ko/fast/remove-unused-code/index.md b/src/site/content/ko/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..c8fc656e01e
--- /dev/null
+++ b/src/site/content/ko/fast/remove-unused-code/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: 사용하지 않는 코드 제거
+subhead: npm을 사용하면 프로젝트에 코드를 쉽게 추가할 수 있습니다. 그렇지만 이런 추가적인 바이트를 모두 활용하고 계십니까?
+authors:
+  - houssein
+date: 2018-11-05
+description: npm과 같은 레지스트리는 누구나 쉽게 다운로드하여 50만 개 이상의 공개 패키지를 사용할 수 있게 하여 JavaScript 세계를 더 나은 방향으로 변화시켰습니다. 그러나 우리는 종종 완전히 활용하지 않는 라이브러리를 포함합니다. 이 문제를 고치기 위해 번들을 분석하여 사용하지 않는 코드를 감지하세요.
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+[npm](https://docs.npmjs.com/getting-started/what-is-npm)과 같은 레지스트리는 누구나 쉽게 다운로드하여 *50만 개* 이상의 공개 패키지를 사용할 수 있게 하여 JavaScript 세계를 더 나은 방향으로 변화시켰습니다. 그러나 우리는 종종 완전히 활용하지 않는 라이브러리를 포함합니다. 이 문제를 고치기 위해 **번들을 분석**하여 사용되지 않는 코드를 감지하세요. 그리고 **사용하지 않고** **필요하지 않은** 라이브러리를 삭제하세요.
+
+## 번들 분석
+
+DevTools를 사용하면 모든 네트워크 요청의 크기를 쉽게 확인할 수 있습니다. {% Instruction 'devtools-network', 'ol' %} {% Instruction 'disable-cache', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="번들 요청이 있는 네트워크 패널", width="800", height="169" %}
+
+DevTools의 [Coverage](https://developer.chrome.com/docs/devtools/coverage/) 탭은 애플리케이션에서 얼마나 많은 CSS 및 JS 코드가 사용되지 않았는지 알려줍니다.
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="DevTools의 코드 적용 범위", width="800", height="562" %}
+
+Node CLI를 통해 전체 Lighthouse 구성을 지정하면 "사용되지 않은 JavaScript" 감사를 사용하여 애플리케이션과 함께 제공되는 사용되지 않은 코드의 양을 추적할 수도 있습니다.
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Lighthouse 미사용 JS 감사", width="800", height="347" %}
+
+[webpack](https://webpack.js.org/)을 번들러로 사용하는 경우 [Webpack 번들 분석기](https://github.com/webpack-contrib/webpack-bundle-analyzer)가 번들을 구성하는 요소를 조사하는 데 도움이 됩니다. 다른 플러그인과 마찬가지로 webpack 구성 파일에 플러그인을 포함합니다.
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+webpack은 일반적으로 단일 페이지 애플리케이션을 빌드하는 데 사용되지만 [Parcel](https://parceljs.org/) 및 [Rollup](https://rollupjs.org/guide/en)과 같은 다른 번들러에도 번들을 분석하는 데 사용할 수 있는 시각화 도구가 있습니다.
+
+이 플러그인이 포함된 애플리케이션을 다시 로드하면 전체 번들의 확대/축소 가능한 트리맵이 표시됩니다.
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack 번들 분석기", width="800", height="468" %}
+
+이 시각화를 사용하면 번들의 어느 부분이 다른 부분보다 큰지 검사할 수 있을 뿐만 아니라 가져오는 모든 라이브러리에 대한 더 나은 아이디어를 얻을 수 있습니다. 이것은 사용하지 않거나 불필요한 라이브러리를 사용하고 있는지 식별하는 데 도움이 될 수 있습니다.
+
+## 사용하지 않는 라이브러리 제거
+
+이전 트리맵 이미지에는 단일 `@firebase` 도메인 내에 꽤 많은 패키지가 있습니다. 웹사이트에 Firebase 데이터베이스 구성요소만 필요한 경우 가져오기를 업데이트하여 해당 라이브러리를 가져옵니다.
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+이 프로세스는 대규모 응용 프로그램의 경우 훨씬 더 복잡하다는 점이 매우 중요합니다.
+
+어디에도 사용되지 않는다고 확신하는 신비해 보이는 패키지의 경우 한 걸음 뒤로 물러나서 최상위 종속성 중 어느 것이 이를 사용하고 있는지 확인하십시오. 필요한 구성 요소만 가져올 수 있는 방법을 찾으십시오. 라이브러리를 사용하지 않는 경우 제거하십시오. 초기 페이지 로드에 라이브러리가 필요하지 않은 경우 [지연 로드가](/reduce-javascript-payloads-with-code-splitting) 가능한지 고려하십시오.
+
+webpack을 사용하는 경우 [인기 있는 라이브러리에서 사용하지 않는 코드를 자동으로 제거하는 플러그인 목록](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)을 확인하세요.
+
+{% Aside 'codelab' %} [사용하지 않는 코드를 제거합니다.](/codelab-remove-unused-code) {% endAside %}
+
+## 불필요한 라이브러리 제거
+
+모든 라이브러리를 부품으로 쉽게 분류하고 선택적으로 가져올 수 있는 것은 아닙니다. 이러한 시나리오에서는 라이브러리를 완전히 제거할 수 있는지 고려하십시오. 맞춤형 솔루션을 구축하거나 더 가벼운 대안을 활용하는 것은 항상 고려할 가치가 있는 옵션이어야 합니다. 그러나 응용 프로그램에서 라이브러리를 완전히 제거하기 전에 이러한 노력 중 하나에 필요한 복잡성과 노력을 저울질하는 것이 중요합니다.
diff --git a/src/site/content/ko/fast/replace-gifs-with-videos/index.md b/src/site/content/ko/fast/replace-gifs-with-videos/index.md
new file mode 100644
index 00000000000..267d9c0fdee
--- /dev/null
+++ b/src/site/content/ko/fast/replace-gifs-with-videos/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: 애니메이션 GIF를 비디오로 대체하여 페이지를 더 빠르게 로드
+authors:
+  - houssein
+description: Imgur 또는 Gfycat와 같은 서비스에서 애니메이션 GIF를 보고 개발 도구에서 검사해보니 GIF가 실제로 비디오라는 사실을 알게 된 적이 있었나요? 여기에는 그럴 만한 이유가 있습니다. 애니메이션 GIF는 용량이 정말 클 수 있습니다! 대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있습니다.
+date: 2018-11-05
+updated: 2019-08-29
+codelabs:
+  - codelab-replace-gifs-with-video
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Imgur 또는 Gfycat와 같은 서비스에서 애니메이션 GIF를 보고 개발 도구에서 검사해보니 GIF가 실제로 비디오라는 사실을 알게 된 적이 있었나요? 여기에는 그럴 만한 이유가 있습니다. 애니메이션 GIF는 용량이 *정말 클 수 있습니다*.
+
+{% Img src="image/admin/3UZ0b9dDotVIXWQT5Auk.png", alt="13.7MB gif를 보여주는 DevTools 네트워크 패널.", width="800", height="155" %}
+
+고맙게도 로딩 성능과 관련된 이 영역은 비교적 적은 노력으로 큰 효과를 거둘 수 부분입니다! **대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있습니다**.
+
+## 먼저 측정하기
+
+Lighthouse를 사용하여 사이트에서 비디오로 변환할 수 있는 GIF가 있는지 확인하세요. DevTools에서 Audits(감사) 탭을 클릭하고 Performance(성능) 확인란을 선택합니다. 그런 다음 Lighthouse를 실행하고 보고서를 확인합니다. 변환할 수 있는 GIF가 있으면 "애니메이션 콘텐츠에 비디오 형식 사용"이라는 제안이 표시될 것입니다.
+
+{% Img src="image/admin/KOSr9IivnkyaFk6RJ5u1.png", alt="애니메이션 콘텐츠에 비디오 형식 사용 Lighthouse 감사 실패.", width="800", height="173" %}
+
+## MPEG 비디오 만들기
+
+GIF를 비디오로 변환하는 방법에는 여러 가지가 있습니다. 이 가이드에서 사용하는 도구는 **[FFmpeg](https://www.ffmpeg.org/)**입니다. FFmpeg를 사용하여 GIF인 `my-animation.gif`를 MP4 비디오로 변환하려면 콘솔에서 다음 명령을 실행하세요.
+
+```bash
+ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+이 명령은 FFmpeg에 `my-animation.gif`를 **입력**으로 받아서(`-i` 플래그로 지정됨) `my-animation.mp4`라는 비디오로 변환할 것을 지시합니다.
+
+libx264 인코더는 320x240픽셀과 같이 크기가 짝수인 파일에서만 작동합니다. 입력 GIF의 크기가 홀수인 경우 FFmpeg에서 '높이/너비를 2로 나눌 수 없음' 오류를 반환하지 않도록 자르기 필터를 포함시킬 수 있습니다.
+
+```bash
+ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+## WebM 비디오 만들기
+
+MP4는 1999년부터 사용되었지만 WebM은 2010년에 처음 출시된 비교적 새로운 파일 형식입니다. WebM 비디오는 MP4 비디오보다 훨씬 작지만 모든 브라우저가 WebM을 지원하는 것은 아니므로 둘 모두 만드는 것이 좋습니다.
+
+FFmpeg를 사용하여 `my-animation.gif`를 WebM 비디오로 변환하려면 콘솔에서 다음 명령을 실행하세요.
+
+```bash
+ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
+```
+
+## 차이점 비교
+
+GIF와 비디오 간의 비용 절감 효과는 상당히 클 수 있습니다.
+
+{% Img src="image/admin/LWzvOWaOdMnNLTPWjayt.png", alt="gif의 경우 3.7MB, mp4의 경우 551KB, webm의 경우 341KB를 보여주는 파일 크기 비교.", width="800", height="188" %}
+
+이 예에서 초기 GIF는 3.7MB인 것에 비해 MP4 버전은 551KB, WebM 버전은 341KB에 불과합니다!
+
+## GIF 이미지를 비디오로 대체
+
+애니메이션 GIF에는 비디오가 그대로 재현해야 하는 세 가지 주요 특성이 있습니다.
+
+- 자동으로 재생됩니다.
+- 계속해서 반복됩니다(보통은 그렇지만 반복되지 않게 할 수 있음).
+- 소리가 나지 않습니다.
+
+다행스럽게도 `<video>` 요소를 사용하여 이러한 동작을 재현할 수 있습니다.
+
+```bash
+<video autoplay loop muted playsinline></video>
+```
+
+이러한 특성을 가진 `<video>` 요소는 자동으로 재생되고, 끝없이 반복되며, 오디오를 재생하지 않고, 인라인으로 재생(전체 화면이 아닌)되는 등, 애니메이션 GIF에서 예상되는 모든 특징이 그대로 동작합니다! 🎉
+
+마지막으로 `<video>` 요소에는 브라우저의 형식 지원에 따라 브라우저가 선택할 수 있는 다른 비디오 파일을 가리키는 `<source>` 하위 요소가 필요합니다. 브라우저가 WebM을 지원하지 않는 경우 MP4로 대체할 수 있도록 WebM과 MP4를 모두 제공하세요.
+
+```html
+<video autoplay loop muted playsinline>
+  <source src="my-animation.webm" type="video/webm">
+  <source src="my-animation.mp4" type="video/mp4">
+</video>
+```
+
+{% Aside 'codelab' %} [애니메이션 GIF를 비디오로 대체하세요](/codelab-replace-gifs-with-video). {% endAside %}
+
+{% Aside %} 브라우저는 어떤 `<source>`가 최적인지 판단하지 않으므로 `<source>`의 순서가 중요합니다. 예를 들어, MP4 비디오를 먼저 지정하고 브라우저가 WebM을 지원하는 경우 브라우저는 WebM `<source>`를 건너뛰고 MPEG-4를 대신 사용합니다. WebM `<source>`가 먼저 사용되도록 하려면 이를 먼저 지정하세요! {% endAside %}
diff --git a/src/site/content/ko/fast/serve-images-webp/index.md b/src/site/content/ko/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..349130820be
--- /dev/null
+++ b/src/site/content/ko/fast/serve-images-webp/index.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: WebP 이미지 사용
+authors:
+  - katiehempenius
+description: WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 일반적으로 파일 크기가 25~35% 감소합니다. 이렇게 하면 페이지 크기가 줄어들고 성능은 향상됩니다.
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - 서브 이미지 WebP
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## 왜 신경을 써야 할까요?
+
+WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 일반적으로 파일 크기가 25~35% 감소합니다. 이렇게 하면 페이지 크기가 줄어들고 성능은 향상됩니다.
+
+- YouTube는 WebP 미리 보기 이미지로 전환하면 [페이지 로드 속도가 10% 빨라진다는 것](https://www.youtube.com/watch?v=rqXMwLbYEE4)을 발견했습니다.
+- 페이스북은 WebP 사용으로 전환했을 때 JPEG의 경우 파일 크기가 25~35% 감소하고 PNG의 경우 파일 크기가 80% 감소하는 효과를 [경험했습니다](https://code.fb.com/android/improving-facebook-on-android/).
+
+WebP는 JPEG, PNG 및 GIF 이미지를 훌륭하게 대체합니다. 또한 WebP는 무손실 및 손실 압축을 모두 제공합니다. 무손실 압축은 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질을 저하시킬 수 있습니다.
+
+## 이미지를 WebP로 변환
+
+사람들은 일반적으로 이미지를 WebP로 변환하기 위해 [cwebp 명령줄 도구](https://developers.google.com/speed/webp/docs/using) 또는 [Imagemin WebP 플러그인](https://github.com/imagemin/imagemin-webp) (npm 패키지) 중 하나를 사용합니다. Imagemin WebP 플러그인은 일반적으로 프로젝트에서 빌드 스크립트나 빌드 도구(예: Webpack 또는 Gulp)를 사용하는 경우 가장 좋은 선택인 반면 CLI는 간단한 프로젝트에 적합하거나 이미지를 한 번만 변환해야 하는 경우에 적합합니다.
+
+이미지를 WebP로 변환할 때 다양한 압축 설정을 지정할 수 있는 옵션이 있지만 대부분의 사람들에게 있어 가장 신경 써야 할 것은 품질 설정뿐입니다. 0(최악)에서 100(최상) 사이의 품질 수준을 지정할 수 있습니다. 이미지 품질과 필요에 맞는 파일 크기 사이의 적절한 균형이 어느 수준인지 찾는 것에 열중할 가치가 있습니다.
+
+### cwebp 사용
+
+cwebp의 기본 압축 설정을 사용하여 단일 파일을 변환합니다.
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+품질 수준 `50`을 사용하여 단일 파일을 변환합니다.
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+디렉터리의 모든 파일을 변환합니다.
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### Imagemin 사용
+
+Imagemin WebP 플러그인은 단독으로 또는 선호하는 빌드 도구(Webpack/Gulp/Grunt/etc.)와 함께 사용할 수 있습니다. 여기에는 일반적으로 빌드 스크립트 또는 빌드 도구의 구성 파일에 코드를 10줄까지 추가하는 작업이 포함됩니다. 다음은 [Webpack](https://glitch.com/~webp-webpack) , [Gulp](https://glitch.com/~webp-gulp) 및 [Grunt](https://glitch.com/~webp-grunt)에서 이를 수행하는 방법의 예시입니다.
+
+이러한 빌드 도구 중 하나를 사용하지 않는 경우 Imagemin 자체를 노드 스크립트로 사용할 수 있습니다. 이 스크립트는 `images` 디렉터리에 있는 파일을 변환하고 `compressed_images` 디렉터리에 저장합니다.
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## WebP 이미지 제공
+
+사이트가 WebP 호환 [브라우저](https://caniuse.com/#search=webp)만 지원하는 경우 읽기를 중지할 수 있습니다. 그렇지 않으면 WebP를 최신 브라우저에 제공하고 대체 이미지를 이전 브라우저에 제공합니다.
+
+**이전:**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**이후:**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+서로 상대적으로 정렬되는 방식을 포함한 [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture), [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) 및 `<img>` 태그는 모두 상호 작용하여 이러한 최종 결과를 얻습니다.
+
+### 그림
+
+`<picture>` 태그는 0개 이상의 `<source>` 태그와 하나의 `<img>` 태그에 대한 래퍼를 제공합니다.
+
+### 소스
+
+`<source>` 태그는 미디어 리소스를 지정합니다.
+
+브라우저는 지원하는 형식으로 나열된 첫 번째 소스를 사용합니다. `<source>` 태그에 나열된 형식을 브라우저가 지원하지 않으면 `<img>` 태그에 지정된 이미지를 로드하는 것으로 대체됩니다.
+
+{% Aside 'gotchas' %}
+
+- "선호하는" 이미지 형식에 대한 `<source>` 태그는 다른 `<source>` 태그보다 먼저 나열되어야 합니다.
+
+- `type` 속성의 값은 이미지 형식에 해당하는 MIME 유형이어야 합니다. 이미지의 [MIME 유형](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)과 파일 확장자는 종종 비슷하지만 반드시 같은 것은 아닙니다(예: `.jpg` 대 `image/jpeg`).
+
+{% endAside %}
+
+### 이미지
+
+`<img>` 태그는 `<picture>` 태그를 지원하지 않는 브라우저에서 코드를 작동하게 하는 것입니다. 브라우저가 `<picture>` 태그를 지원하지 않으면 지원하지 않는 태그를 무시합니다. 따라서 브라우저는 `<img src="flower.jpg" alt="">` 태그만 "보고" 해당 이미지를 로드합니다.
+
+{% Aside 'gotchas' %}
+
+- `<img>` 태그는 항상 포함되어야 하며 모든 `<source>` 태그 다음으로 항상 마지막에 나열되어야 합니다.
+- `<img>` 태그로 지정된 리소스는 대체적으로 사용할 수 있도록 보편적으로 지원되는 형식(예: JPEG)이어야 합니다. {% endAside %}
+
+## WebP 사용 확인
+
+Lighthouse는 사이트의 모든 이미지가 WebP를 사용하여 제공되고 있는지 확인하는 데 사용할 수 있습니다. Lighthouse 성능 감사(**Lighthouse &gt; 옵션 &gt; 성능**)를 실행하고 **차세대 형식의 이미지 제공** 감사 결과를 찾습니다. Lighthouse는 WebP에서 제공되지 않는 모든 이미지를 나열합니다.
diff --git a/src/site/content/ko/fast/serve-images-with-correct-dimensions/index.md b/src/site/content/ko/fast/serve-images-with-correct-dimensions/index.md
new file mode 100644
index 00000000000..87549a36577
--- /dev/null
+++ b/src/site/content/ko/fast/serve-images-with-correct-dimensions/index.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: 올바른 크기의 이미지 제공
+authors:
+  - katiehempenius
+description: 우리 모두 봤습니다. 페이지에 이미지를 추가하기 전에 축소하는 것을 잊으셨습니다. 이미지는 괜찮아 보이지만, 사용자의 데이터를 낭비하고 페이지 성능을 저하시키고 있습니다.
+date: 2018-11-05
+wf_blink_components: 해당 없음
+codelabs:
+  - codelab-serve-images-correct-dimensions
+tags:
+  - performance
+---
+
+우리 모두 봤습니다. 페이지에 이미지를 추가하기 전에 축소하는 것을 잊으셨습니다. 이미지는 괜찮아 보이지만, 사용자의 데이터를 낭비하고 페이지 성능을 저하시키고 있습니다.
+
+## 잘못된 크기의 이미지 식별
+
+Lighthouse를 사용하면 크기가 잘못된 이미지를 쉽게 식별할 수 있습니다. 성능 감사(**Lighthouse &gt; 옵션 &gt; 성능**)를 실행하고 **적절한 크기의 이미지** 감사 결과를 찾습니다. 감사에는 크기를 조정해야 하는 모든 이미지가 나열됩니다.
+
+## 올바른 이미지 크기 결정
+
+이미지 크기 조정은 매우 복잡할 수 있습니다. 이러한 이유로 우리는 "좋음"과 "더 좋음"의 두 가지 접근 방식을 제공했습니다. 둘 다 성능이 향상되지만 "더 나은" 접근 방식을 이해하고 구현하는 데 시간이 조금 더 걸릴 수 있습니다. 그러나 더 큰 성능 향상으로 보상을 받을 수도 있습니다. 귀하를 위한 최선의 선택은 편안하게 구현할 수 있는 것입니다.
+
+### CSS 단위에 대한 간략한 참고 사항
+
+이미지를 포함하여 HTML 요소의 크기를 지정하기 위한 두 가지 유형의 CSS 단위가 있습니다.
+
+- 절대 단위: 절대 단위를 사용하여 스타일이 지정된 요소는 장치에 관계없이 항상 동일한 크기로 표시됩니다. 유효한 절대 CSS 단위의 예: px, cm, mm, in.
+- 상대 단위: 상대 단위를 사용하여 스타일이 지정된 요소는 지정된 상대 길이에 따라 다양한 크기로 표시됩니다. 유효한 상대 CSS 단위의 예: %, vw(1vw = 뷰포트 너비의 1%), em(1.5em = 글꼴 크기의 1.5배).
+
+### "좋은" 접근 방식
+
+다음을 기반으로 크기 조정이 있는 이미지의 경우…
+
+- **상대 단위**: 모든 장치에서 작동하는 크기로 이미지 크기를 조정합니다.
+
+분석 데이터(예: Google Analytics)를 확인하여 사용자가 일반적으로 사용하는 디스플레이 크기를 확인하는 것이 도움이 될 수 있습니다. 또는 [screensiz.es](http://screensiz.es/)는 많은 일반 장치의 디스플레이에 대한 정보를 제공합니다.
+
+- **절대 단위**: 이미지가 표시되는 크기와 일치하도록 이미지 크기를 조정합니다.
+
+DevTools Elements 패널을 사용하여 이미지가 표시되는 크기를 결정할 수 있습니다.
+
+{% Img src="image/admin/pKQa0Huu0KGInOekdz6M.png", alt="DevTools 요소의 패널", width="800", height="364" %}
+
+### "더 나은" 접근 방식
+
+다음을 기반으로 크기 조정이 있는 이미지의 경우…
+
+- **절대 단위:** [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset) 및 [크기](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes) 속성을 사용하여 다양한 디스플레이 밀도에 대해 다양한 이미지를 제공합니다. [(여기](/serve-responsive-images)에서 반응형 이미지에 대한 가이드를 읽어보세요.)
+
+"디스플레이 밀도"는 디스플레이마다 픽셀 밀도가 다르다는 사실을 나타냅니다. 다른 모든 조건이 동일하면 높은 픽셀 밀도 디스플레이가 낮은 픽셀 밀도 디스플레이보다 더 선명하게 보입니다.
+
+결과적으로 사용자가 장치의 픽셀 밀도에 관계없이 가능한 가장 선명한 이미지를 경험하게 하려면 여러 이미지 버전이 필요합니다.
+
+{% Aside %} 일부 사이트에서는 이러한 이미지 품질 차이가 중요하다고 생각하고 일부 사이트에서는 그렇지 않습니다. {% endAside %}
+
+반응형 이미지 기술을 사용하면 여러 이미지 버전을 나열하고 장치에서 가장 적합한 이미지를 선택할 수 있습니다.
+
+- **상대 단위:** 반응형 이미지를 사용하여 표시 크기에 따라 다양한 이미지를 제공합니다. [(여기](/serve-responsive-images)에서 가이드를 읽으십시오.)
+
+모든 장치에서 작동하는 이미지는 더 작은 장치의 경우 불필요하게 커집니다. 반응형 이미지 기술, 특히 [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset%22) 및 [크기](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes)를 사용하면 여러 이미지 버전을 지정하고 장치에서 가장 적합한 크기를 선택할 수 있습니다.
+
+## 이미지 크기 조정
+
+어떤 접근 방식을 선택하든 ImageMagick을 사용하여 이미지 크기를 조정하는 것이 도움이 될 수 있습니다. [ImageMagick](https://www.imagemagick.org/script/index.php)은 이미지를 만들고 편집하는 데 가장 널리 사용되는 명령줄 도구입니다. 대부분의 사람들은 GUI 기반 이미지 편집기보다 CLI를 사용할 때 훨씬 빠르게 이미지 크기를 조정할 수 있습니다.
+
+원본 크기의 25%로 이미지 크기 조정:
+
+```bash
+convert flower.jpg -resize 25% flower_small.jpg
+```
+
+"너비 200px x 높이 100px"에 맞게 이미지 크기 조정:
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 200x100 flower_small.jpg
+
+# Windows
+magick convert flower.jpg -resize 200x100 flower_small.jpg
+```
+
+많은 이미지의 크기를 조정하는 경우 스크립트나 서비스를 사용하여 프로세스를 자동화하는 것이 더 편리할 수 있습니다. 반응형 이미지 가이드에서 이에 대해 자세히 알아볼 수 있습니다.
+
+## 확인하기
+
+모든 이미지의 크기를 조정했으면 Lighthouse를 다시 실행하여 누락된 항목이 없는지 확인하십시오.
diff --git a/src/site/content/ko/fast/serve-responsive-images/index.md b/src/site/content/ko/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..dbf4fee8736
--- /dev/null
+++ b/src/site/content/ko/fast/serve-responsive-images/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: 반응형 이미지 제공
+authors:
+  - katiehempenius
+description: 데스크톱 크기의 이미지를 모바일 장치에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지에 대한 "일률적인" 접근 방식 대신 다양한 장치에 다양한 이미지 크기를 제공하십시오.
+date: 2018-11-05
+updated: 2021-06-04
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+데스크톱 크기의 이미지를 모바일 장치에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지에 대한 "일률적인" 접근 방식 대신 다양한 장치에 다양한 이미지 크기를 제공하십시오.
+
+## 이미지 크기 조정
+
+가장 널리 사용되는 이미지 크기 조정 도구 중 두 가지는 [Sharp npm 패키지](https://www.npmjs.com/package/sharp) 와 [ImageMagick CLI 도구](https://www.imagemagick.org/script/index.php) 입니다.
+
+Sharp 패키지는 이미지 크기 조정을 자동화하는 데 적합합니다(예: 웹사이트의 모든 동영상에 대해 여러 크기의 축소판 그림 생성). 빌드 스크립트 및 도구와 빠르고 쉽게 통합됩니다. 반면 ImageMagick은 전적으로 명령줄에서 사용되기 때문에 일회성 이미지 크기 조정에 유용합니다.
+
+### sharp
+
+sharp를 Node 스크립트로 사용하려면 이 코드를 프로젝트에 별도의 스크립트로 저장한 다음 실행하여 이미지를 변환합니다.
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+이미지 크기를 원래 크기의 33%로 조정하려면 터미널에서 다음 명령을 실행합니다.
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+너비 300픽셀 x 높이 200픽셀에 맞게 이미지 크기를 조정하려면 다음 명령을 실행합니다.
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### 몇 개의 이미지 버전을 만들어야 합니까?
+
+이 질문에 대한 하나의 "정답"은 없습니다. 그러나 일반적으로 3~5개의 서로 다른 크기의 이미지를 제공합니다. 더 많은 이미지 크기를 제공하면 성능이 향상되지만 서버에서 더 많은 공간을 차지하고 HTML을 조금 더 작성해야 합니다.
+
+### 다른 옵션
+
+[Thumbor](https://github.com/thumbor/thumbor)(오픈 소스) 및 [Cloudinary](https://cloudinary.com/)와 같은 이미지 서비스도 확인할 가치가 있습니다. 이미지 서비스는 요청 기반 반응형 이미지(및 이미지 조작)를 제공합니다. Thumbor는 서버에 설치하여 설정됩니다. Cloudinary는 이러한 세부 정보를 처리하며 서버 설정이 필요하지 않습니다. 둘 모두 반응형 이미지를 만드는 쉬운 방법입니다.
+
+## 여러 이미지 버전 제공
+
+여러 이미지 버전을 지정하면 브라우저에서 사용하기에 가장 적합한 버전을 선택합니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>전</strong></th>
+        <th><strong>후</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+`<img>` 태그의 [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src), [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) 및 [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) 속성은 모두 이 최종 결과를 얻기 위해 상호 작용합니다.
+
+### "src" 속성
+
+src 속성은 이 코드가 `srcset` 및 `sizes` 속성을 [지원](https://caniuse.com/#search=srcset)하지 않는 브라우저에서 작동하도록 합니다. 브라우저가 이러한 속성을 지원하지 않으면 `src` 속성에서 지정한 리소스를 로드하는 것으로 대체됩니다.
+
+{% Aside 'gotchas' %} `src` 속성으로 지정한 리소스는 모든 장치 크기에서 잘 작동할 만큼 충분히 커야 합니다. {% endAside %}
+
+### "srcset" 속성
+
+`srcset` 속성은 이미지 파일 이름과 너비 또는 밀도 설명자를 쉼표로 구분한 목록입니다.
+
+이 예시에서는 [너비 설명자](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor)를 사용합니다. `480w`는 `flower-small.jpg`의 너비가 480px임을 브라우저에 알리는 너비 설명자입니다. `1080w`는 `flower-large.jpg`의 너비가 1080px임을 브라우저에 알리는 너비 설명자입니다.
+
+"너비 설명자"는 멋지게 들리지만 브라우저에 이미지의 너비를 알려주는 하나의 방법일 뿐입니다. 이렇게 하면 브라우저에서 이미지 크기를 결정하기 위해 이미지를 다운로드할 필요가 없습니다.
+
+{% Aside 'gotchas' %} 너비 설명자를 작성하려면 `w` 단위(`px` 대신)를 사용합니다. 예를 들어 너비가 1024px인 이미지는 `1024w`로 작성하게 됩니다. {% endAside %}
+
+**추가 크레딧:** 다양한 이미지 크기를 제공하기 위해 밀도 설명자에 대해 알 필요는 없습니다. 그러나 밀도 설명자의 작동 방식이 궁금한 경우 [해상도 전환 코드 랩](/codelab-density-descriptors)을 확인합니다. 밀도 설명자는 장치의 [픽셀 밀도](https://en.wikipedia.org/wiki/Pixel_density)에 따라 다양한 이미지를 제공하는 데 사용됩니다.
+
+### "크기" 속성
+
+크기 속성은 이미지가 표시될 때 브라우저에 이미지의 너비를 알려줍니다. 그러나 크기 속성은 표시 크기에 영향을 주지 않습니다. 이를 위해서는 여전히 CSS가 필요합니다.
+
+브라우저는 로드할 이미지를 결정하기 위해 사용자 장치에 대해 알고 있는 정보(예: 치수 및 픽셀 밀도)와 함께 이 정보를 사용합니다.
+
+브라우저가 '`sizes`' 속성을 인식하지 못하는 경우 브라우저는 '`src`' 속성에서 지정한 이미지를 로드하도록 대체합니다. (브라우저는 '`sizes`' 및 '`srcset`' 속성을 동시에 지원하므로 브라우저는 두 속성을 모두 지원하거나 둘 다 지원하지 않게 됩니다.)
+
+{% Aside 'gotchas' %} 다양한 단위를 사용하여 슬롯 너비를 지정할 수 있습니다. 다음은 모두 유효한 크기입니다.
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+다음은 유효한 크기가 아닙니다.
+
+- `25%` (비율은 크기 속성과 함께 사용할 수 없음) {% endAside %}
+
+**추가 크레딧:** 멋지게 만들고 싶은 경우 크기 속성을 사용하여 여러 슬롯 크기를 지정할 수도 있습니다. 이것은 다른 뷰포트 크기에 대해 다른 레이아웃을 사용하는 웹 사이트를 수용합니다. 이 작업을 수행하는 방법을 알아 보려면 이 [다중 슬롯 코드 샘플](/codelab-specifying-multiple-slot-widths)을 확인하십시오.
+
+### (좀 더) 추가 크레딧
+
+이미 나열된 모든 추가 크레딧 외에도(이미지는 복잡합니다!) [아트 디렉션](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)에도 이와 동일한 개념을 사용할 수 있습니다. 아트 디렉션은 완전히 다른 모양의 이미지(같은 이미지의 다른 버전이 아닌)를 다른 뷰포트에 제공하는 실행 방법입니다. [아트 디렉션 코드 랩](/codelab-art-direction)에서 자세히 알아볼 수 있습니다.
+
+## 검증
+
+반응형 이미지를 구현한 후에는 Lighthouse를 사용하여 누락된 이미지가 없는지 확인할 수 있습니다. Lighthouse 성능 감사(**Lighthouse &gt; 옵션 &gt; 성능**)를 실행하고 **적절한 크기의 이미지** 감사 결과를 찾습니다. 이 결과에는 크기를 조정해야 하는 이미지가 나열됩니다.
diff --git a/src/site/content/ko/fast/signed-exchanges/index.md b/src/site/content/ko/fast/signed-exchanges/index.md
new file mode 100644
index 00000000000..ccf60c84a0e
--- /dev/null
+++ b/src/site/content/ko/fast/signed-exchanges/index.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: SXG(Signed Exchanges)
+subhead: SXG는 리소스가 전달된 방식에 관계없이 리소스의 출처를 인증할 수 있도록 하는 전달 메커니즘입니다.
+authors:
+  - katiehempenius
+date: 2020-10-14
+updated: 2021-04-21
+hero: image/admin/6ll3P8MYWxvtb1ZjXIzb.jpg
+alt: 봉투 더미.
+description: SXG는 리소스가 전달된 방식에 관계없이 리소스의 출처를 인증할 수 있도록 하는 전달 메커니즘입니다.
+tags:
+  - blog
+  - performance
+---
+
+SXG(Signed Exchanges)는 리소스가 전달된 방식에 관계없이 리소스의 출처를 인증할 수 있도록 하는 전달 메커니즘입니다. 이러한 분리는 개인정보 보호 프리페치, 오프라인 인터넷 경험 및 타사 캐시에서 제공과 같은 다양한 사용 사례를 발전시킵니다. 또한 SXG를 구현하면 일부 사이트에 대한 LCP(Large Contentful Paint)를 개선할 수 있습니다.
+
+본 문서에서는 SXG의 작동 방식, 사용 사례 및 도구에 대한 포괄적 개요 정보를 제공합니다.
+
+## 브라우저 호환성 {: #browser-compatibility }
+
+SXG는 Chromium 기반 브라우저(버전: Chrome 73, Edge 79 및 Opera 64부터)에서 [지원](https://caniuse.com/#feat=sxg)됩니다.
+
+## 개요
+
+SXG(서명된 교환)를 사용하면 브라우저가 콘텐츠 배포 방식과 관계없이 콘텐츠의 출처와 무결성을 확인할 수 있는 방식으로 사이트에서 요청/응답 쌍("HTTP 교환")에 암호로 서명할 수 있습니다. 결과적으로, 브라우저는 콘텐츠를 전달한 서버의 URL이 아닌 주소창에 원본 사이트 URL을 표시할 수 있습니다.
+
+SXG의 광범위한 의미는 콘텐츠를 휴대 가능하도록 만든다는 것입니다. SXG를 통해 전달된 콘텐츠는 출처의 완전한 보증과 속성을 그대로 유지하면서 제3자가 쉽게 배포할 수 있습니다. 이전에 사이트가 속성을 그대로 유지하면서 제3자를 활용하여 콘텐츠를 배포하는 유일한 방법은 사이트가 배포자와 SSL 인증서를 공유하는 것이었습니다. 여기에는 보안상의 단점이 있습니다. 게다가 컨텐츠를 진정으로 휴대할 수 있게 만드는 것과는 거리가 멉니다.
+
+장기적으로 볼 때, 진정한 휴대 가능 콘텐츠를 활용하여 완전한 오프라인 경험과 같은 사용 사례를 달성할 수 있습니다. 단기적으로 볼 때, SXG의 주요 사용 사례는 쉽게 캐시할 수 있는 형식으로 콘텐츠를 제공하여 더 빠른 사용자 경험을 제공하는 것입니다. 특히 [Google 검색](#google-search)은 SXG를 캐시하고 미리 가져오는 경우가 종종 있습니다. Google 검색에서 트래픽의 많은 부분을 수신하는 사이트의 경우 SXG는 사용자에게 더 신속하게 페이지를 로드하는 중요한 도구가 될 수 있습니다.
+
+### SXG 형식
+
+SXG는 HTTP 교환과 [서명](https://cbor.io/)이라는 두 가지 기본 구성 요소가 있는 [바이너리 인코딩](https://cbor.io/) 파일로 캡슐화됩니다. HTTP 교환은 요청 URL, 콘텐츠 협상 정보 및 HTTP 응답으로 구성됩니다.
+
+다음은 디코딩된 SXG 파일의 예입니다.
+
+```html
+format version: 1b3
+request:
+  method: GET
+  uri: https://example.org/
+  headers:
+response:
+  status: 200
+  headers:
+    Cache-Control: max-age=604800
+    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
+    Expires: Mon, 24 Aug 2020 16:08:24 GMT
+    Content-Type: text/html; charset=UTF-8
+    Content-Encoding: mi-sha256-03
+    Date: Mon, 17 Aug 2020 16:08:24 GMT
+    Vary: Accept-Encoding
+signature:
+    label;cert-sha256=*ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=*;
+    cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
+    date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=*MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=*;
+    validity-url="https://example.org/webpkg/validity"
+header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=
+
+The exchange has a valid signature.
+payload [1256 bytes]:
+<!doctype html>
+<html>
+<head>
+    <title>SXG example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+<div>
+    <h1>Hello</h1>
+</div>
+</body>
+</html>
+```
+
+서명의 `expires` 매개변수는 SXG의 만료 날짜를 나타냅니다. SXG는 최대 7일 동안 유효합니다. SXG의 만료 날짜가 향후 7일 이상이면 브라우저에서 이를 거부합니다. [Signed HTTP Exchanges 사양](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-3.1)에서 서명 헤더에 대한 자세한 정보를 찾아보세요.
+
+### 웹 패키징
+
+SXG는 광범위한 [Web Packaging](https://github.com/WICG/webpackage) 사양 제안 제품군의 일부입니다. SXG 외에도 Web Packaging 사양의 다른 주요 구성 요소는 [Web Bundles](/web-bundles/)("번들 HTTP 교환")입니다. 웹 번들은 번들을 해석하는 데 필요한 HTTP 리소스와 메타데이터의 모음입니다.
+
+SXG와 Web Bundles 간의 관계는 일반적으로 혼동하기 쉽습니다. SXG와 웹 번들은 서로 의존하지 않는 두 가지 별개의 기술입니다. Web Bundles은 서명된 교환과 서명되지 않은 교환 모두에서 사용할 수 있습니다. SXG와 Web Bundles에 의해 진보된 공통 목표는 오프라인 사용을 위해 사이트 전체를 공유할 수 있는 "웹 패키징" 형식을 만드는 것입니다.
+
+SXG는 Chromium 기반 브라우저가 구현할 Web Packaging 사양의 첫 번째 부분입니다.
+
+## SXG 로드
+
+처음에는 SXG의 주요 사용 사례가 페이지의 기본 문서에 대한 전달 메커니즘이 될 가능성이 있습니다. 이 사용 사례의 경우  `<link>` 또는 `<a>` 태그와 [`Link` 헤더](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link)를 사용하여 SXG를 참조할 수 있습니다. 다른 리소스와 마찬가지로 SXG는 브라우저의 주소 표시줄에 해당 URL을 입력하여 로드할 수 있습니다.
+
+```html
+<a href="https://example.com/article.html.sxg">
+```
+
+```html
+<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
+```
+
+SXG를 사용하여 하위 리소스를 제공할 수도 있습니다. 자세한 내용은 [Signed Exchange 하위 리소스 대체](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md)를 참조하십시오.
+
+## SXG 제공
+
+### 콘텐츠 협상
+
+[콘텐츠 협상](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation)은 클라이언트의 기능 및 기본 설정에 따라 동일한 URL에서 동일한 리소스의 다른 표현을 제공하기 위한 메커니즘입니다. 예를 들어, 리소스의 gzip 버전을 일부 클라이언트에 제공할 수 있지만 Brotli 버전은 다른 클라이언트에 제공할 수 없습니다. 콘텐츠 협상을 통해 브라우저의 기능에 따라 동일한 콘텐츠의 SXG 및 비-SXG 표현을 모두 제공할 수 있습니다.
+
+웹 브라우저는 [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept) 요청 헤더를 사용하여 지원하는 [MIME 유형](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 전달합니다. 브라우저가 SXG를 지원하는 경우 MIME 유형 `application/signed-exchange`가 이러한 값 목록에 자동으로 포함됩니다.
+
+예를 들어, 다음은 Chrome 84에서 보낸 `Accept` 헤더입니다.
+
+```json
+accept:
+text/html,
+application/xhtml+xml,
+application/xml;q=0.9,
+image/webp,image/apng,
+\*/\*;q=0.8,
+application/signed-exchange;v=b3;q=0.9
+```
+
+이 문자열의 `application/signed-exchange;v=b3;q=0.9` 부분은 Chrome이 SXG, 특히 `b3` 버전을 지원한다는 것을 웹 서버에 알립니다. 마지막 부분 `q=0.9`는 [q-value](https://developer.mozilla.org/docs/Glossary/Quality_values)을 나타냅니다.
+
+`q-value`는 `0`에서 `1`까지 십진수 척도를 사용하는 특정한 형식에 대한 브라우저의 상대적 선호도를 나타냅니다. 여기에서 `1`은 가장 높은 우선순위를 나타냅니다. 하나의 형식에 대해 `q-value`이 제공되지 않으면 `1`은 암시 값입니다.
+
+### 모범 사례
+
+`Accept` 헤더가 `application/signed-exchange`에 대한 `q-value`가 `text/html`에 대한 `q-value`보다 크거나 동일할 때 서버는 SXG를 제공해야 합니다. 실제로 이는 본래의 서버가 브라우저가 아닌 크롤러에 SXG를 제공함을 의미합니다.
+
+SXG는 캐싱 또는 프리페칭과 함께 사용할 때 우수한 성능을 제공할 수 있습니다. 하지만 이러한 최적화의 이점 없이 본래의 서버에서 직접 로드되는 콘텐츠의 경우 `text/html`이 SXG보다 더 나은 성능을 제공합니다. 콘텐츠를 SXG로 제공하면 크롤러 및 기타 중개자가 SXG를 캐시하여 사용자에게 더 빠르게 전달할 수 있습니다.
+
+다음 정규식은 SXG로 제공되어야 하는 요청에 대한 `Accept` 헤더를 일치시키는 데 사용할 수 있습니다.
+
+```regex
+Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
+```
+
+하위 표현식 `(,|$)`은 SXG에 대한 `q-value`이 생략된 헤더와 일치합니다. 이러한 생략은 SXG에 대한 `q-value`가 `1`임을 의미합니다. `Accept` 헤더가 이론적으로 하위 문자열 `q=1`을 포함할 수 있지만 [실제로](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) 브라우저는 기본값이 `1`일 때 형식의 `q-value`를 정확하게 나열하지 않습니다.
+
+## Chrome DevTools로 SXG 디버깅{: #debugging }
+
+Signed Exchanges는 Chrome DevTools **네트워크** 패널의 **유형** 열에서 `signed-exchange`를 찾아 식별할 수 있습니다.
+
+<figure>{% Img src="image/admin/cNdohSaeXqGHFBwD7L3B.png", alt="DevTools '네트워크' 패널 내의 SXG 요청을 보여주는 스크린샷", width="696", height="201" %} <figcaption>DevTools의 <b>네트워크</b> 패널</figcaption></figure>
+
+**미리보기** 탭은 SXG의 내용에 대한 자세한 정보를 제공합니다.
+
+<figure>{% Img src="image/admin/E0rBwuxk4BxFmLJ3gXhP.png", alt="SXG에 대한 '미리보기' 탭 스크린샷", width="800", height="561" %} <figcaption> DevTools의 <b>미리보기</b> 탭</figcaption></figure>
+
+SXG를 직접 보려면 [}SXG를 지원하는 브라우저 중 하나](https://signed-exchange-testing.dev/) 에서 이 [데모](#browser-compatibility)를 방문하세요.
+
+## 사용 사례
+
+SXG를 사용하여 본래의 서버에서 사용자에게 직접 콘텐츠를 전달할 수 있지만 이는 SXG의 목적을 크게 상쇄합니다. 오히려 원본 서버에서 생성된 SXG가 캐시되어 중개자가 사용자에게 제공할 때 SXG의 의도된 사용 및 이점이 주로 달성됩니다.
+
+이 섹션에서는 주로 Google 검색을 통한 SXG의 캐싱 및 제공에 대해 설명하지만 아웃링크에 더 빠른 사용자 경험 또는 제한된 네트워크 액세스에 대한 더 큰 복원성을 제공하려는 모든 사이트에 적용할 수 있는 기술입니다. 여기에는 검색 엔진과 소셜 미디어 플랫폼뿐만 아니라 오프라인 소비를 위한 콘텐츠를 제공하는 정보 포털도 포함됩니다.
+
+### Google 검색
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/oMtUUAVj5hAGwBZMDwct.png", alt="캐시에서 제공되는 미리 가져온 SXG를 보여주는 다이어그램.", width="800", height="396" %}
+
+Google 검색은 SXG를 사용하여 사용자에게 검색 결과 페이지에서 로드된 페이지에 대한 더 빠른 페이지 로드 경험을 제공합니다. Google 검색에서 상당한 트래픽을 수신하는 사이트는 콘텐츠를 SXG로 제공하여 잠재적으로 상당한 성능 향상을 볼 수 있습니다.
+
+Google 검색은 이제 해당되는 경우 SXG를 크롤, 캐시 및 미리 가져옵니다. Google과 다른 검색 엔진은 사용자가 방문할 가능성이 있는 콘텐츠 예를 들어, 첫 번째 검색 결과에 상응하는 페이지를 [미리 가져오는](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ) 경우가 종종 있습니다. SXG는 비-SXG 형식에 비해 개인정보 보호 이점이 있기 때문에 미리 가져오기 작업에 특히 적합합니다.
+
+{% Aside %} 모든 네트워크 요청에는 어떻게 또는 왜 만들어졌는지에 관계없이 일정량의 사용자 정보가 내재되어 있습니다. 여기에는 IP 주소, 쿠키의 유무, `Accept-Language`와 같은 헤더 값 등의 정보가 포함됩니다. 이 정보는 요청이 있을 때 대상 서버에 "공개"됩니다. SXG는 본래의 서버가 아닌 캐시에서 미리 가져오기 때문에 미리 가져오는 시점이 아니라 사용자가 사이트를 탐색한 후에만 사이트에 대한 사용자의 관심이 원본 서버에 공개됩니다. 또한 SXG를 통해 미리 가져온 콘텐츠는 사용자가 콘텐츠를 로드하지 않는 한 쿠기로 설정되거나 `localStorage`에 액세스하지 않습니다. 또한 이것은 SXG 참조자에 대한 새로운 사용자 정보를 드러내지 않습니다. 미리 가져오는 동안 SXG를 사용하는 것은 개인정보 보호 미리 가져오기 개념의 한 예입니다. {% endAside %}
+
+#### 크롤링
+
+Google 검색 크롤러가 전송한 [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) 헤더는 `text/html` 및 `application/signed-exchange`에 대한 동일한 선호도를 나타냅니다.  [이전 섹션](#best-practices)에서 설명한 대로 SXG를 사용하려는 사이트는 `Accept` 요청 헤더가 `text/html`에서 SXG에 대해 동일하거나 더 높은 선호도를 나타낼 때 이를 제공해야 합니다. 실제로, 크롤러만 `text/html`에서 SXG에 대한 선호도를 나타냅니다.
+
+#### 색인화
+
+페이지의 SXG 및 비SXG 표현은 Google 검색에서 별도로 순위를 매기거나 색인화하지 않습니다. SXG는 궁극적으로 전달 메커니즘이며 기본 콘텐츠를 변경하지 않습니다. 이를 감안할 때 Google 검색이 다른 방식으로 제공되는 동일한 콘텐츠를 별도로 색인화하거나 순위를 매기는 것은 이치에 맞지 않습니다.
+
+#### 웹 바이탈
+
+Google 검색에서 트래픽의 상당 부분을 수신하는 사이트의 경우 SXG를 사용하여 [Web Vitals](/vitals/), 즉 [LCP](/lcp/)를 개선할 수 있습니다. 캐시 및 미리 불러온 SXG는 사용자에게 매우 빠르게 제공될 수 있으며 이로 인해 LCP가 더 빨리 생성됩니다. SXG가 강력한 도구가 될 수 있지만 CDN 사용 및 렌더링 차단 하위 리소스 감소와 같은 다른 성능 최적화와 결합할 때 가장 효과적입니다.
+
+### AMP
+
+AMP 콘텐츠는 SXG를 사용하여 전달할 수 있습니다. SXG를 사용하면 AMP URL이 아닌 표준 URL을 사용하여 AMP 콘텐츠를 미리 가져와 표시할 수 있습니다.
+
+이 문서에 설명된 모든 개념은 여전히 AMP 사용 사례에 적용되지만 AMP에는 SXG 생성을 위한 별도의 [도구](https://github.com/ampproject/amppackager)가 있습니다.
+
+{% Aside%} [amp.dev](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/)에서 서명 교환을 사용하여 AMP를 제공하는 방법에 대해 알아 봅니다. {% endAside %}
+
+## 도구
+
+SXG 구현 절차는 특정 URL에 해당하는 SXG를 생성한 다음 해당 SXG를 요청자(일반적으로 크롤러)에게 제공하는 절차로 구성됩니다. SXG를 생성하려면 SXG에 서명할 수 있는 인증서가 필요합니다.
+
+### 인증서
+
+프로덕션 과정에서 SXG를 사용하기 위해서는`CanSignHttpExchanges` 확장자를 지원하는 인증서가 필요합니다. [사양](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-4.2)에 따라 이 확장자가 있는 인증서의 유효 기간은 90일을 넘지 않아야 하며 요청하는 도메인에 구성된 [DNS CAA 레코드](https://en.wikipedia.org/wiki/DNS_Certification_Authority_Authorization)가 있어야 합니다.
+
+[이 페이지](https://github.com/google/webpackager/wiki/Certificate-Authorities)에는 이러한 유형의 인증서를 발급할 수 있는 인증 기관이 나열되어 있습니다. SXG용 인증서는 상업용 인증서 발급 기관을 통해서만 사용할 수 있습니다.
+
+### 플랫폼별 SXG 도구
+
+이러한 도구는 특정 기술 스택을 지원합니다. 이러한 도구 중 하나가 지원하는 플랫폼을 이미 사용하고 있다면 범용 도구보다 더 쉽게 설정할 수 있을 것입니다.
+
+- [`sxg-rs/cloudflare_worker`](https://github.com/google/sxg-rs/tree/main/cloudflare_worker)는 [Cloudflare Workers](https://workers.cloudflare.com/)에서 실행됩니다.
+
+- [`sxg-rs/fastly_compute`](https://github.com/google/sxg-rs/tree/main/fastly_compute)는 [Fastly Compute@Edge](https://www.fastly.com/products/edge-compute/serverless)에서 실행됩니다.
+
+- [자동 Signed Exchanges](https://blog.cloudflare.com/automatic-signed-exchanges/)는 자동으로 인증서를 획득하고 Signed Exchanges를 생성하는 Cloudflare 기능입니다.
+
+- [NGINX SXG 모듈](https://github.com/google/nginx-sxg-module)은 [nginx](https://nginx.org/)를 사용하는 사이트에 대한 SXG를 생성하고 제공합니다. 설정 지침은 [여기](/how-to-set-up-signed-http-exchanges/)에서 찾을 수 있습니다.
+
+- [Envoy SXG 필터](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/sxg_filter)는 [Envoy](https://www.envoyproxy.io/)를 사용하는 사이트에 대한 SXG를 생성하고 제공합니다.
+
+### 범용 SXG 도구
+
+#### Web Packager CLI
+
+[Web Packager CLI](https://github.com/google/webpackager)는 특정 URL에 해당하는 SXG를 생성합니다.
+
+```shell
+webpackager \
+    --private\_key=private.key \
+    --cert\_url=https://example.com/certificate.cbor \
+    --url=https://example.com
+```
+
+SXG 파일이 생성되면 서버에 업로드하고 `application/signed-exchange;v=b3` MIME 유형과 함께 제공하세요. 더불어 SXG 인증서를 `application/cert-chain+cbor`로 제공해야 합니다.
+
+#### Web Packager 서버
+
+[Web Packager 서버](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md)인 `webpkgserver`는 SXG를 제공하기 위한 [역 프록시](https://en.wikipedia.org/wiki/Reverse_proxy) 역할을 합니다. URL이 주어지면 `webpkgserver`가 URL의 내용을 가져와 SXG로 패키징하고 응답으로 SXG를 제공합니다. Web Packager 서버 설정에 대한 지침은 [Web Packager를 사용하여 서명된 교환을 설정하는 방법](/signed-exchanges-webpackager)을 참조하십시오.
+
+### SXG 라이브러리
+
+다음 라이브러리를 사용하여 고유한 SXG 생성기를 만들 수 있습니다.
+
+- [`sxg_rs`](https://github.com/google/sxg-rs/tree/main/sxg_rs)는 SXG를 생성하기 위한 Rust 라이브러리입니다. 가장 강력한 기능을 갖춘 SXG 라이브러리이며 `cloudflare_worker` 및 `fastly_compute` 도구에 대한 기반으로 사용합니다.
+
+- [`libsxg`](https://github.com/google/libsxg)는 SXG를 생성하기 위한 최소 C 라이브러리입니다. NGINX SXG 모듈 및 Envoy SXG 필터 대한 기반으로 사용됩니다.
+
+- [`go/signed-exchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) [는 SXG 생성의 참조 구현](https://en.wikipedia.org/wiki/Reference_implementation) 으로 웹 패키지 사양에서 제공하는 최소 Go 라이브러리입니다. 이는 참조 CLI 도구, [`gen-signedexchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) 및 보다 기능적인 Web Packager 도구의 기초로 사용합니다.
+
+## 결론
+
+서명된 교환은 리소스가 전달된 방식과 관계없이 리소스의 출처와 유효성을 확인할 수 있는 전달 메커니즘입니다. 결과적으로 SXG는 전체 게시자 속성을 유지하면서 제3자에 의해 배포될 수 있습니다.
+
+## 추가 읽기
+
+- [Signed HTTP Exchanges를 위한 초안 사양](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html)
+- [Web Packaging 설명자](https://github.com/WICG/webpackage/tree/main/explainers)
+- [Google 검색에서 Signed Exchanges 시작하기](https://developers.google.com/search/docs/advanced/experience/signed-exchange)
+- [Web Packager를 사용하여 Signed Exchanges를 설정하는 방법](/signed-exchanges-webpackager)
+- [Signed Exchanges 데모](https://signed-exchange-testing.dev/)
diff --git a/src/site/content/ko/fast/use-imagemin-to-compress-images/index.md b/src/site/content/ko/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..579f7acb71e
--- /dev/null
+++ b/src/site/content/ko/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,126 @@
+---
+layout: post
+title: Imagemin을 사용하여 이미지 압축
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: |2-
+
+  압축되지 않은 이미지는 불필요한 바이트로 페이지를 부풀립니다. Lighthouse를 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는 기회를 확인합니다.
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## 왜 신경을 써야 할까요?
+
+압축되지 않은 이미지는 불필요한 바이트로 페이지를 부풀립니다. 오른쪽 사진은 왼쪽 사진보다 40% 작지만 일반 사용자에게는 동일하게 보일 것입니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 KB</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 KB</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## 측정
+
+Lighthouse를 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는 기회를 확인합니다. 이러한 기회는 "효율적으로 이미지 인코딩"에 나열되어 있습니다.
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="image", width="800", height="552" %}
+
+{% Aside %} Lighthouse는 현재 JPEG 형식의 이미지만 압축할 수 있는 기회에 대해 보고합니다. {% endAside %}
+
+## Imagemin
+
+Imagemin은 다양한 이미지 형식을 지원하고 빌드 스크립트 및 빌드 도구와 쉽게 통합되므로 이미지 압축에 탁월한 선택입니다. Imagemin은 [CLI](https://github.com/imagemin/imagemin-cli) 및 [npm 모듈](https://www.npmjs.com/package/imagemin)로 사용할 수 있습니다. 일반적으로 npm 모듈은 더 많은 구성 옵션을 제공하기 때문에 최선의 선택이지만, 코드를 건드리지 않고 Imagemin을 사용하려는 경우 CLI가 적절한 대안이 될 수 있습니다.
+
+### 플러그인
+
+Imagemin은 "플러그인"을 중심으로 구축되었습니다. 플러그인은 특정 이미지 형식을 압축하는 npm 패키지입니다(예: "mozjpeg"는 JPEG 압축). 인기 있는 이미지 형식에는 선택할 수 있는 여러 플러그인이 있을 수 있습니다.
+
+플러그인을 선택할 때 고려해야 할 가장 중요한 사항은 "손실"인지 "무손실"인지입니다. 무손실 압축에서는 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질을 저하시킬 수 있습니다. 플러그인이 "손실"인지 "무손실"인지를 언급하지 않으면 API로 알 수 있습니다. 출력의 이미지 품질을 지정할 수 있다면 "손실"입니다.
+
+대부분의 사람들에게는 손실 플러그인이 최선의 선택입니다. 훨씬 더 큰 파일 크기 절감 효과를 제공하며 요구 사항에 맞게 압축 수준을 사용자 지정할 수 있습니다. 아래 표에는 인기 있는 Imagemin 플러그인이 나열되어 있습니다. 이것들이 사용 가능한 유일한 플러그인은 아니지만 모두 프로젝트에 좋은 선택이 될 것입니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>이미지 형식</th>
+        <th>손실 플러그인</th>
+        <th>무손실 플러그인</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Imagemin CLI
+
+Imagemin CLI는 imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant 및 imagemin-svgo의 5가지 플러그인과 함께 작동합니다. Imagemin은 입력의 이미지 형식에 따라 적절한 플러그인을 사용합니다.
+
+"images/" 디렉터리의 이미지를 압축하고 동일한 디렉터리에 저장하려면 다음 명령을 실행하십시오(원본 파일 덮어쓰기).
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Imagemin npm 모듈
+
+만약 당신이 이 빌드 도구들 중 하나를 사용한다면, [webpack](/codelab-imagemin-webpack), [gulp](/codelab-imagemin-gulp) 또는 [grunt](/codelab-imagemin-grunt)로 Imaginemin의 코드랩을 확인하십시오.
+
+Imagemin 자체를 노드 스크립트로 사용할 수도 있습니다. 이 코드는 "imagemin-mozjpeg" 플러그인을 사용하여 JPEG 파일을 50 품질로 압축합니다('0'은 최악, '100'은 최고):
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/ko/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/ko/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..0dc7bcff475
--- /dev/null
+++ b/src/site/content/ko/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: 성능 예산에 Lighthouse 사용
+authors:
+  - katiehempenius
+description: |2-
+
+  Lighthouse는 이제 성능 예산을 지원합니다. LightWallet은 5분 이내에 설정할 수 있고 페이지 리소스 크기와 수량에 대한 피드백을 제공합니다.
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+[Lighthouse](https://github.com/GoogleChrome/lighthouse)는 이제 성능 예산을 지원합니다. [LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets)은 5분 이내에 설정할 수 있으며 성능 지표, 페이지 리소스의 크기 및 수량에 대한 피드백을 제공합니다.
+
+## Lighthouse 설치
+
+LightWallet은 Lighthouse v5+의 명령줄 버전에서 사용할 수 있습니다.
+
+시작하려면 Lighthouse를 설치하세요.
+
+```bash
+npm install -g lighthouse
+```
+
+## 예산 만들기
+
+`budget.json`이라는 파일을 만듭니다. 이 파일에 다음 JSON을 추가합니다.
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+이 예제 `budget.json` 파일은 5개의 개별 예산을 설정합니다.
+
+- 상호작용까지의 시간: 3000ms.
+- 첫 번째 의미 있는 페인트(FMP): 1000ms.
+- 페이지의 총 JavaScript 양: 125KB.
+- 페이지의 전체 크기: 300KB.
+- 타사 출처에 대한 요청 수: 10개.
+
+지원되는 성능 메트릭 및 리소스 유형의 전체 목록은 Lighthouse 문서의 [성능 예산](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md) 섹션을 참조하십시오.
+
+## Lighthouse 실행
+
+`--budget-path` 플래그를 사용하여 Lighthouse를 실행합니다. 이 플래그는 Lighthouse에 예산 파일의 위치를 알려줍니다.
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %} **참고**: 예산 파일의 이름은 `budget.json`일 필요가 없습니다. {% endAside %}
+
+## 결과 보기
+
+LightWallet이 올바르게 구성된 경우 Lighthouse 보고서에는 **성능** 범주 내에 **예산** 섹션이 포함됩니다.
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="Lighthouse 보고서의 '예산' 섹션", width="800", height="289" %}
+
+Lighthouse 보고서의 JSON 버전에서 Lightwallet 결과는 `performance-budget` 감사 결과 내에서 찾을 수 있습니다.
diff --git a/src/site/content/ko/fast/why-speed-matters/index.md b/src/site/content/ko/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..14d4aaad4a5
--- /dev/null
+++ b/src/site/content/ko/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: 속도가 왜 중요합니까?
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: 사용자 경험에서 속도는 중요한 역할을 합니다. 모바일 속도로 인한 지연은 실망스러울 뿐만 아니라 비즈니스 결과에도 부정적인 영향을 미칠 수 있습니다.
+web_lighthouse: 해당 없음
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+소비자는 디지털 콘텐츠 및 서비스에 액세스하기 위해 모바일에 점점 더 의존하고 있으며 사이트 분석을 보면 이 이야기가 여러분의 데이터밖에서 전개되는 것을 확인할 수 있습니다. 또한, 소비자는 그 어느 때보다 요구 사항이 많으며, 여러분의 사이트 경험을 평가할 때 여러분을 경쟁업체와 비교할 뿐만 아니라 매일 사용하는 동급 최고의 서비스와 비교하며 여러분을 평가합니다.
+
+이 게시물은 성과와 비즈니스 성공 간의 관계에 대해 수행된 일부 연구를 정리합니다.
+
+## 성능은 사용자 유지를 좌우합니다
+
+<figure data-float="right">
+  <blockquote>
+    <p>실적은 회사의 수익에 직접적인 영향을 미쳐왔습니다.</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">핀터레스트</a></p>
+    </cite>
+  </blockquote></figure>
+
+성능은 모든 온라인 벤처의 성공에 중요한 역할을 합니다. 성능이 좋은 사이트는 성능이 낮은 사이트보다 더 많은 사용자의 참여를 유도하고 유지합니다.
+
+핀터레스트는 인지된 대기 시간을 40% 줄였으며 [검색 엔진 트래픽과 가입 수를 15% 늘렸습니다](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7).
+
+COOK은 평균 페이지 로드 시간을 850밀리초로 줄여 [전환율을 7% 늘리고, 이탈률을 7% 낮추고, 세션당 페이지 수를 10% 늘렸습니다](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf).
+
+연구에 따르면 낮은 성능은 비즈니스 목표에 부정적인 영향을 미칠 수 있습니다. 예를 들어 [BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale)는 사이트를 로드하는 시간이 1초 추가될 때마다 사용자 수가 추가로 10% 줄어든다는 사실을 발견했습니다.
+
+## 성능은 전환율 향상을 좌우합니다
+
+사용자를 유지하는 것은 전환을 개선하는 데 중요합니다. 느린 사이트는 수익에 부정적인 영향을 미치고 빠른 사이트는 전환율을 높이는 것으로 나타났습니다.
+
+[Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html)의 경우 홈페이지 로드 속도가 100ms 감소할 때마다 세션 기반 전환이 1.11% 증가하여 평균 연간 수익이 거의 $380,000 증가했습니다. 또한, 체크아웃 페이지 로드 속도가 100ms 감소하면 세션 기반 전환이 1.55% 증가하여 연간 평균 수익이 거의 $530,000 증가했습니다.
+
+[AutoAnything은 페이지 로드 시간을 절반으로  줄였을 때](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/) 매출이 12%에서 13% 증가했습니다.
+
+소매업체 [Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/)는 사이트 속도를 감사한 후 발견한 문제를 해결하기 위한 계획을 수립하여 페이지 로드 시간을 20% 줄이고 전환율을 10% 증가시켰습니다.
+
+## 성능은 사용자 경험을 좌우합니다
+
+사용자 경험에서 속도는 중요한 역할을 합니다. [소비자 연구](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report)에 따르면 모바일 속도 지연에 대한 스트레스 반응은 공포 영화를 보거나 수학 문제를 푸는 것과 유사하며, 소매점 계산대에서 기다리는 것보다 더 큽니다.
+
+사이트가 로드되기 시작하면 사용자가 콘텐츠가 표시되기를 기다리는 시간이 있습니다. 이 작업이 완료되기까지는 사용자 경험이 없는 것입니다. 이러한 경험의 부재는 빠른 연결에서 일시적인 현상입니다. 그러나 느린 연결에서는 사용자가 강제로 기다려야 합니다. 페이지 리소스가 서서히 유입되면 사용자는 더 많은 문제를 경험할 수 있습니다.
+
+<figure>{% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="페이지 로드의 두 필름 릴의 비교. 첫 번째는 느린 연결에서의 페이지 로드를 보여주고 두 번째는 빠른 연결에서의 동일한 페이지 로드를 보여줍니다.", width="800", height="264" %} <figcaption>매우 느린 연결(위)과 빠른 연결(아래)의 페이지 로드 비교.</figcaption></figure>
+
+성능은 우수한 사용자 경험에서 기본적인 측면입니다. 사이트에서 많은 양의 코드를 제공하는 경우 브라우저는 코드를 다운로드하기 위해 사용자 데이터 요금제를 메가바이트 단위로 사용해야 합니다. 모바일 장치는 CPU 성능과 메모리가 제한되어 있습니다. 이러한 장치들은 종종 우리가 약간 최적화되지 않았다고 생각하는 코드에 압도되곤 합니다. 이로 인해 성능이 저하되어 응답하지 않는 모습도 보입니다. 인간의 행동 양식에 대해서 우리가 알다시피 사용자는 해당 응용 프로그램을 포기하기 전까지만 성능이 낮은 응용 프로그램을 용인할 것입니다.
+
+## 성능은 사람을 좌우합니다
+
+성능이 좋지 않은 사이트와 응용 프로그램은 이를 사용하는 사람들에게 실질적인 비용을 초래할 수도 있습니다.
+
+[모바일 사용자가 계속해서 전 세계 인터넷 사용자의 더 많은 부분을 차지함에 따라](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet) 이러한 사용자 중 상당수가 모바일 LTE, 4G, 3G, 2G 네트워크를 통해 웹에 액세스한다는 점을 기억하는 것이 중요합니다. Calibre의 Ben Schwarz가 [실제 성능에 대한 이 연구](https://calibreapp.com/blog/beyond-the-bubble)에서 지적했듯이, 선불 데이터 요금제의 비용이 감소하고 있으며, 결과적으로 이전에는 인터넷 이용이 없었던 곳에서 더 저렴하게 액세스할 수 있게 되었습니다. 모바일 기기와 인터넷 접속은 더 이상 사치품이 아닙니다. 그것들은 점점 더 상호 연결되는 세계에서 탐색하고 기능하는 데 필요한 일반 도구입니다.
+
+[총 페이지 크기는 최소 2011년 이후부터 꾸준히 증가해 왔으며](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal) 이러한 추세는 계속될 것으로 보입니다. 일반적인 페이지에서 더 많은 데이터를 전송함에 따라 사용자는 데이터 요금제를 더 자주 충전해야 하므로 비용이 많이 듭니다.
+
+사용자의 비용을 절약하는 것 외에도 빠르고 가벼운 사용자 경험은 응급 상황의 사용자에게 매우 중요합니다. 병원, 진료소 및 응급 센터와 같은 공공 자원에는 응급 상황의 사용자에게 필요한 중요하고 구체적인 정보를 제공하는 온라인 자원이 있습니다.[디자인은 스트레스가 많은 순간에 중요한 정보를 효율적으로 표시하기 위해 중요하지만](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis) 이러한 정보를 빠르게 전달하는 것의 중요성은 아무리 강조해도 지나치지 않습니다. 그것이 우리의 임무 중 하나입니다.
+
+## 웹사이트 속도 향상 시작하기 {: #get-started }
+
+Google에서 모든 웹사이트가 집중해야 한다고 생각하는 메트릭에 대해 알아보려면 [코어 웹 바이탈](/vitals/#core-web-vitals)을 읽어보십시오.
+
+<blockquote>
+  <p>오늘 우리는 이 작업을 기반으로 이러한 페이지 경험 메트릭을 통합하는 향후 검색 순위 변경 사항을 미리 살펴보고자 합니다. 우리는 코어 웹 바이탈을 페이지 경험에 대한 기존 신호와 결합하여 웹 페이지에서의 사용자 경험 품질에 대한 전체적인 그림을 제공하는 새로운 신호를 도입할 것입니다.</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">더 나은 웹을 위한 페이지 경험 평가</a> , 공식 Google 검색 센터 블로그</cite>
+</blockquote>
+
+그런 다음 [빠른 로드 시간](/fast/)에서 속도 향상 및 속도 유지와 관련된 다양한 팁과 요령을 확인하십시오.
diff --git a/src/site/content/ko/feed.njk b/src/site/content/ko/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/ko/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/ko/identity/index.md b/src/site/content/ko/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/ko/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/ko/identity/sign-in-form-best-practices/index.md b/src/site/content/ko/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..98ab8f223f0
--- /dev/null
+++ b/src/site/content/ko/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+~---
+layout: post
+title: 로그인 양식 모범 사례
+subhead: 교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 작성하십시오.
+authors:
+  - samdutton
+scheduled: 진실
+date: 2020-06-29
+updated: 2021-09-27
+description: 교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 작성하십시오.
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: 전화기를 들고 있는 사람.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+사용자가 사이트에 로그인해야 하는 경우 올바른 로그인 양식 디자인이 중요합니다. 이것은 연결 상태가 좋지 않거나 모바일, 바쁘거나 스트레스를 받는 사람들에게 특히 그렇습니다. 잘못 설계된 로그인 양식은 높은 이탈률을 보입니다. 각 반송은 로그인 기회를 놓친 것뿐만 아니라 사용자를 잃고 불만을 품은 것을 의미할 수 있습니다.
+
+{% Aside 'codelab' %} 실습 가이드를 통해 이러한 모범 사례를 배우고 싶다면 [로그인 양식 모범 사례 코드랩](/codelab-sign-in-form-best-practices/)을 확인하세요. {% endAside %}
+
+다음은 모든 모범 사례를 보여주는 간단한 로그인 양식의 예입니다.
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+## 체크리스트
+
+- [의미 있는 HTML 요소 사용](#meaningful-html): `<form>` , `<input>` , `<label>` 및 `<button>`.
+- [각 입력에`<label>` 레이블을 지정하십시오](#label).
+- 요소 속성을 사용하여 [내장 브라우저 기능(](#element-attributes)`type`, `name`, `autocomplete`, `required`)에 액세스합니다.
+- 입력 `name` 및 `id` 속성은 페이지 로드나 웹사이트 배포 간에 변하지 않는 안정적인 값을 부여합니다.
+- [자체 &lt;form&gt; 요소에](#form) 로그인을 넣습니다.
+- [성공적인 양식 제출을 확인하십시오](#submission) .
+- 로그인 양식의 비밀번호 입력과 재설정 비밀번호 형식의 새 비밀번호 입력에는 [`autocomplete="new-password"`](#new-password) 및 [`id="new-password"`](#new-password)를 사용합니다.
+- 로그인 비밀번호 입력에 [`autocomplete="current-password"`](#current-password) 및 [`id="current-password"`](#current-password)를 사용합니다.
+- [비밀번호 표시](#show-password) 기능을 제공합니다.
+- 비밀번호 입력에 [`aria-label` 및 `aria-describedby`](#accessible-password-inputs)를 사용합니다.
+- [입력을 이중화하지 마십시오](#no-double-inputs).
+- [모바일 키보드가 입력이나 버튼을 가리지 않도록](#keyboard-obstruction) 양식을 디자인합니다.
+- 모바일에서 양식을 사용할 수 있는지 확인: [읽기 쉬운 텍스트](#size-text-correctly)를 사용하고 입력과 버튼이 [터치 대상으로 작동할 수 있을 만큼 충분히 커야 합니다](#tap-targets).
+- 가입 페이지와 로그인 페이지에서 [브랜딩과 스타일을 유지하세요.](#general-guidelines)
+- [현장 및 실험실 테스트](#analytics): 페이지 분석, 상호 작용 분석 및 사용자 중심 성능 측정을 가입 및 로그인 흐름에 구축합니다.
+- [브라우저 및 장치에서 테스트](#devices): 양식 동작은 플랫폼에 따라 크게 다릅니다.
+
+{% Aside %} 이 도움말은 프론트엔드 권장 사항에 관한 것입니다. 사용자 인증, 자격 증명 저장 또는 계정 관리를 위한 백엔드 서비스를 구축하는 방법은 설명하지 않습니다. [사용자 계정, 권한 부여 및 비밀번호 관리를 위한 12가지 모범 사례](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)는 자체 백엔드를 실행하기 위한 핵심 원칙을 간략하게 설명합니다. 전 세계의 다른 지역에 사용자가 있는 경우 사이트의 콘텐츠와 타사 ID 서비스 사용을 현지화하는 것을 고려해야 합니다.
+
+또한 더 나은 로그인 환경을 구축하는 데 도움이 될 수 있는 이 문서에서 다루지 않은 두 가지 비교적 새로운 API가 있습니다.
+
+- [**WebOTP**](/web-otp/): SMS를 통해 휴대폰으로 일회용 비밀번호 또는 PIN 번호를 전달합니다. 이를 통해 사용자는 전화번호를 식별자로 선택할 수 있고(이메일 주소를 입력할 필요가 없음!) 로그인을 위한 2단계 인증과 결제 확인을 위한 일회성 코드를 사용할 수 있습니다.
+- [**자격 증명 관리**](https://developer.chrome.com/blog/credential-management-api/): 개발자가 비밀번호 자격 증명 및 연합 자격 증명을 프로그래밍 방식으로 저장 및 검색할 수 있도록 합니다. {% endAside %}
+
+## 의미 있는 HTML 사용 {: #meaningful-html }
+
+작업을 위해 제작된 요소 사용: `<form>`, `<label>` 및 `<button>`. 이를 통해 내장 브라우저 기능을 활성화하고 접근성을 개선하며 마크업에 의미를 추가합니다.
+
+### `<form>` 사용 {: #form }
+
+`<div>`로 래핑하고 순수 자바스크립트로 입력 데이터 제출을 처리하고 싶을 수 있습니다. [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 요소를 사용하는 것이 좋습니다. 이렇게 하면 화면 판독기 및 기타 보조 장치에서 사이트에 액세스할 수 있고, 다양한 내장 브라우저 기능이 활성화되고, 이전 브라우저를 위한 기본 기능 로그인을 더 간단하게 구축할 수 있으며, JavaScript가 실패하더라도 계속 작동할 수 있습니다.
+
+{% Aside 'gotchas' %} 일반적인 실수는 전체 웹페이지를 단일 형식으로 래핑하는 것이지만 이는 브라우저 비밀번호 관리자 및 자동 완성에 문제를 일으킬 수 있습니다. 양식이 필요한 각 UI 구성 요소에 대해 다른 &lt;form&gt;을 사용합니다. 예를 들어 동일한 페이지에서 로그인과 검색이 있는 경우 두 개의 양식 요소를 사용해야 합니다. {% endAside %}
+
+### `<label>` 사용 {: #label }
+
+입력에 레이블을 지정하려면 [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label)을 사용하십시오!
+
+```html
+<label for="email">Email</label>
+<input id="email" …>
+```
+
+두 가지 이유:
+
+- 레이블을 탭하거나 클릭하면 포커스가 해당 입력으로 이동합니다. `for` `name` 또는 `id`와 함께 사용하여 레이블을 입력과 연결합니다.
+- 스크린리더는 레이블 또는 레이블의 입력이 포커스를 받으면 레이블 텍스트를 알립니다.
+
+자리 표시자를 입력 레이블로 사용하지 마십시오. 사람들은 특히 주의가 산만해지는 경우("이메일 주소, 전화번호 또는 계정 ID를 입력했나요?") 텍스트를 입력하기 시작하면 입력 내용을 잊어버리기 쉽습니다. 자리 표시자에는 다른 많은 잠재적인 문제가 있습니다. 확신이 없으면 [자리 표시자 특성을 사용하지 말고](https://www.nngroup.com/articles/form-design-placeholders/) [양식 필드의 자리 표시자는 해로움](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)을 참조하십시오.
+
+레이블을 입력 위에 두는 것이 가장 좋습니다. 이를 통해 모바일과 데스크톱에서 일관된 디자인이 가능하며 [Google AI 연구](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)에 따르면 사용자가 더 빠르게 스캔할 수 있습니다. 전체 너비 레이블 및 입력을 얻을 수 있으며 레이블 텍스트에 맞게 레이블 및 입력 너비를 조정할 필요가 없습니다.
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="모바일에서 양식 입력 레이블 위치를 보여주는 스크린샷: 입력 옆 및 입력 위.", width="500", height="253" %} <figcaption>레이블과 입력 너비는 둘 다 같은 줄에 있을 때 제한됩니다.</figcaption></figure>
+
+모바일 장치에서 [레이블 위치](https://label-position.glitch.me) Glitch를 열어 직접 확인하십시오.
+
+### `<button>` 사용 {: #버튼 }
+
+버튼에는 [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button)을 사용하세요! 버튼 요소는 액세스 가능한 동작과 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다. `<div>`나 버튼인 척하는 다른 요소를 사용하는 것은 의미가 없습니다.
+
+제출 버튼이 무엇을 하는지 확인하십시오. 예에는 **제출** 또는 **시작**이 아닌 **계정 만들기** 또는 **로그인**이 있습니다.
+
+### 성공적인 양식 제출 확인 {: #submission }
+
+비밀번호 관리자가 양식이 제출되었음을 이해하도록 돕습니다. 두 가지 방법이 있습니다.
+
+- 다른 페이지로 이동합니다.
+- `History.pushState()` 또는 `History.replaceState()`로 탐색을 에뮬레이트하고 비밀번호 양식을 제거하십시오.
+
+`XMLHttpRequest` 또는 `fetch` 요청을 사용하여 로그인 성공이 응답으로 보고되고 DOM에서 양식을 가져오고 사용자에게 성공을 표시하여 처리되는지 확인합니다.
+
+사용자가 **로그인** 버튼을 탭하거나 클릭하면 비활성화하는 것이 좋습니다. 빠르고 반응이 빠른 사이트에서도 [많은 사용자가 버튼을 여러 번 클릭](https://baymard.com/blog/users-double-click-online)합니다. 그러면 상호 작용이 느려지고 서버 부하가 늘어납니다.
+
+반대로 사용자 입력을 기다리는 양식 제출을 비활성화하지 마십시오. 예를 들어 사용자가 고객 PIN을 입력하지 않은 경우 **로그인** 버튼을 비활성화하지 마십시오. 사용자는 양식에서 무언가를 놓친 다음(비활성화됨) **로그인** 버튼을 반복해서 탭하고 작동하지 않는다고 생각할 수 있습니다. 최소한 양식 제출을 비활성화해야 하는 경우 비활성화된 버튼을 클릭할 때 누락된 사항을 사용자에게 설명하십시오.
+
+{% Aside 'caution' %} 양식에 있는 버튼의 기본 유형은 `submit`입니다. 양식에 다른 버튼을 추가하려면(예: **비밀번호 표시**의 경우) `type="button"`을 추가합니다. 그렇지 않으면 버튼을 클릭하거나 탭하면 양식이 제출됩니다.
+
+양식 필드에 포커스가 있는 동안 `Enter` 키를 누르면 `submit` 버튼 클릭을 시뮬레이션합니다. 양식에 **제출** 버튼 앞에 버튼을 포함하고 유형을 지정하지 않으면 해당 버튼은 양식의 버튼에 대한 기본 유형(`submit`)을 가지며 양식이 제출되기 전에 클릭 이벤트를 수신합니다. 이에 대한 예는 [데모](https://enter-button.glitch.me/)를 보고 양식을 채운 다음 `Enter`를 누릅니다. {% endAside %}
+
+### 입력을 두 배로 늘리지 않기 {: #no-double-inputs }
+
+일부 사이트에서는 사용자가 이메일이나 비밀번호를 두 번 입력하도록 합니다. 그러면 일부 사용자의 오류가 줄어들 수 있지만 *모든* 사용자에게 추가 작업이 발생하고 [이탈률이 높아집니다](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/). 브라우저가 이메일 주소를 자동 완성하거나 강력한 비밀번호를 제안하는 위치를 두 번 묻는 것도 의미가 없습니다. 사용자가 이메일 주소를 확인할 수 있도록 하고(어쨌든 그렇게 해야 함) 필요한 경우 비밀번호를 쉽게 재설정할 수 있도록 하는 것이 좋습니다.
+
+## 요소 속성을 최대한 활용 {: #element-attributes }
+
+마법이 실제로 일어나는 곳입니다! 브라우저에는 입력 요소 속성을 사용하는 여러 가지 유용한 내장 기능이 있습니다.
+
+## 비밀번호를 비공개로 유지하되 사용자가 원할 때 비밀번호를 볼 수 있게 하기 {: #show-password }
+
+비밀번호 텍스트를 숨기고 브라우저가 비밀번호용 입력임을 이해하는 데 도움이 되도록 비밀번호 입력에는 `type="password"`가 있어야 합니다. (브라우저는 입력 역할을 이해하고 비밀번호 저장을 제안할지 여부를 결정하기 위해 [다양한 기술](#autofill)을 사용합니다.)
+
+사용자가 입력한 텍스트를 확인할 수 있도록 **비밀번호 표시** 아이콘 또는 버튼을 추가해야 하며 **비밀번호 분실** 링크를 추가하는 것을 잊지 마십시오. [비밀번호 표시 활성화](#password-display)를 참조하십시오.
+
+<figure>{% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="비밀번호 표시 아이콘을 표시하는 Google 로그인 양식.", width="300", height="107" %} <figcaption>Google 로그인 양식에서 비밀번호 입력: <strong>비밀번호 표시</strong> 아이콘 및 <strong>비밀번호 찾기</strong> 링크가 있습니다.</figcaption></figure>
+
+## 모바일 사용자에게 적합한 키보드 제공 {: #mobile-keyboards }
+
+`<input type="email">`을 사용하여 모바일 사용자에게 적절한 키보드를 제공하고 브라우저에서 기본 내장 이메일 주소 유효성 검사를 활성화합니다. JavaScript가 필요하지 않습니다!
+
+이메일 주소 대신 전화번호를 사용해야 하는 경우 `<input type="tel">`은 모바일에서 전화 키패드를 활성화합니다. `inputmode` 속성을 사용할 수도 있습니다 `inputmode="numeric"`은 PIN 번호에 이상적입니다. [입력 모드에 대해 알고 싶었던 모든 것](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)에서 더 자세한 정보를 얻을 수 있습니다.
+
+{% Aside 'caution' %} `type="number"`는 위/아래 화살표를 추가하여 숫자를 증가시키므로 ID 및 계정 번호와 같이 증가할 의도가 없는 숫자에는 사용하지 마십시오. {% endAside %}
+
+### 모바일 키보드가 **로그인** 버튼을 가리지 않도록 방지 {: #keyboard-obstruction }
+
+유감스럽게도 조심하지 않으면 모바일 키보드가 양식을 덮거나 더 심하게는 **로그인** 버튼을 부분적으로 가리게 될 수 있습니다. 사용자는 무슨 일이 일어났는지 깨닫기도 전에 포기할 수 있습니다.
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Android 휴대전화 로그인 양식의 두 스크린샷: 제출 버튼이 휴대전화 키보드에 가려지는 방식을 보여주는 스크린샷", width="400", height="360" %}<figcaption><b>로그인</b> 버튼: 지금은 표시되지만 이제는 표시되지 않습니다.</figcaption></figure>
+
+가능하면 **로그인** 페이지 상단에 이메일/전화 및 비밀번호 입력과 로그인 버튼만 표시하여 이를 방지하십시오. 아래에 다른 내용을 넣으십시오.
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Android 휴대폰의 로그인 양식 스크린샷: 로그인 버튼이 휴대폰 키보드에 가려지지 않습니다.", width="200", height="342" %} <figcaption>키보드가 <b>로그인</b> 버튼을 가리지 않습니다.</figcaption></figure>
+
+#### 다양한 기기에서 테스트 {: #devices }
+
+대상 고객을 위해 다양한 장치에서 테스트하고 그에 따라 조정해야 합니다. BrowserStack을 사용하면 다양한 실제 장치 및 브라우저에서 [오픈 소스 프로젝트를 무료로 테스트](https://www.browserstack.com/open-source)할 수 있습니다.
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="iPhone 7, 8 및 11의 로그인 양식 스크린샷. iPhone 7 및 8의 로그인 버튼은 전화 키보드로 가려져 있지만 iPhone 11에는 없음", width="800", height="522" %}<figcaption><b>로그인</b> 버튼: iPhone 7 및 8에서는 가려져 있지만 iPhone 11에서는 보이지 않습니다.</figcaption></figure>
+
+#### 두 페이지 사용 고려 {: #two-pages }
+
+일부 사이트(Amazon 및 eBay 포함)는 두 페이지에 이메일/전화 및 비밀번호를 요청하여 문제를 방지합니다. 이 접근 방식은 또한 경험을 단순화합니다. 사용자는 한 번에 한 가지만 수행해야 합니다.
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Amazon 웹사이트의 로그인 양식 스크린샷: 두 개의 별도 '페이지'에 있는 이메일/전화 및 비밀번호.", width="400", height="385" %} <figcaption>2단계 로그인: 이메일 또는 전화, 비밀번호</figcaption></figure>
+
+이상적으로는 단일 &lt;form&gt;으로 구현되어야 합니다. JavaScript를 사용하여 처음에 이메일 입력만 표시한 다음 숨기고 비밀번호 입력을 표시합니다. 사용자가 이메일과 비밀번호를 입력하는 사이에 새 페이지로 이동하도록 해야 하는 경우 두 번째 페이지의 양식에는 비밀번호 관리자가 올바른 값을 저장할 수 있도록 이메일 값과 함께 숨겨진 입력 요소가 있어야 합니다. [Chromium이 이해하는 비밀번호 양식 스타일](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)은 코드 예제를 제공합니다.
+
+### 사용자가 데이터를 다시 입력하지 않도록 돕기 {: #autofill }
+
+브라우저가 데이터를 올바르게 저장하고 입력을 자동 완성하도록 도와 사용자가 이메일 및 비밀번호 값을 입력하는 것을 기억할 필요가 없습니다. 이는 모바일에서 특히 중요하며 [포기율이 높은](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/) 이메일 입력에 중요합니다.
+
+여기에는 두 부분이 있습니다.
+
+1. `autocomplete` , `name` , `id` 및 `type` 속성은 브라우저가 나중에 자동 완성에 사용할 수 있는 데이터를 저장하기 위해 입력의 역할을 이해하는 데 도움이 됩니다. 자동 채우기를 위해 데이터를 저장할 수 있도록 최신 브라우저는 안정적인 `name` 또는 `id` 값(각 페이지 로드 또는 사이트 배포 시 무작위로 생성되지 않음)을 갖고 `submit` 버튼이 있는 &lt;form&gt; 형식이어야 하는 입력도 필요합니다.
+
+2. `autocomplete` 속성은 브라우저가 저장된 데이터를 사용하여 입력을 올바르게 자동 완성하는 데 도움이 됩니다.
+
+이메일 입력의 경우 `autocomplete="username"` . 왜냐하면 `type="email"`을 사용해야 하고 `id="email"` 및 `name="email"` `username`은 최신 브라우저의 비밀번호 관리자에 의해 인식되기 때문입니다.
+
+비밀번호 입력의 경우 적절한 `autocomplete` 및 `id` 값을 사용하여 브라우저가 새 비밀번호와 현재 비밀번호를 구별할 수 있도록 합니다.
+
+### 새 비밀번호 {: #new-password }에 `autocomplete="new-password"` 및 `id="new-password"` 사용
+
+- `autocomplete="new-password"` 및 `id="new-password"`를 사용하거나 비밀번호 변경 양식의 새 비밀번호를 사용하세요.
+
+### 기존 비밀번호 {: #current-password }에 `autocomplete="current-password"` 및 `id="current-password"` 사용
+
+- 로그인 양식의 비밀번호 입력 또는 비밀번호 변경 양식의 사용자 이전 비밀번호 입력에 `autocomplete="current-password"` 및 `id="current-password"`를 사용하십시오. 이것은 사이트에 대해 저장된 현재 비밀번호를 사용하기를 원한다는 것을 브라우저에 알립니다.
+
+가입 양식:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+로그인:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %} Chrome과 같은 브라우저는 브라우저의 비밀번호 관리자를 사용하여 재방문 사용자의 로그인 과정에서 필드를 자동 완성할 수 있습니다. 이러한 기능이 작동하려면 브라우저가 사용자가 비밀번호를 변경할 때 이를 구별할 수 있어야 합니다.
+
+특히 새 비밀번호를 설정한 후 사용자 비밀번호 변경 양식을 지우거나 페이지에서 숨겨야 합니다. 비밀번호 변경이 발생한 후에도 사용자 비밀번호 변경 양식이 페이지에 계속 채워져 있으면 브라우저에서 업데이트를 기록하지 못할 수 있습니다. {% endAside %}
+
+### 비밀번호 관리자 지원 {: #password-managers }
+
+브라우저마다 이메일 자동 완성 및 비밀번호 제안을 다소 다르게 처리하지만 효과는 거의 동일합니다. 예를 들어 데스크톱의 Safari 11 이상에서는 비밀번호 관리자가 표시된 다음 가능한 경우 생체 인증(지문 또는 얼굴 인식)이 사용됩니다.
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="데스크톱용 Safari의 3단계 로그인 프로세스 스크린샷: 비밀번호 관리자, 생체 인증, 자동 완성.", width="800", height="234" %} <figcaption>자동 완성으로 로그인 - 텍스트 입력이 필요하지 않습니다!</figcaption></figure>
+
+데스크톱의 Chrome은 이메일 제안을 표시하고 비밀번호 관리자를 표시하며 비밀번호를 자동 완성합니다.
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="데스크톱용 Chrome 로그인 프로세스의 4단계 스크린샷: 이메일 완성, 이메일 제안, 비밀번호 관리자, 선택 시 자동 완성.", width="800", height="232" %} <figcaption>Chrome 84의 자동 완성 로그인 흐름.</figcaption></figure>
+
+브라우저 비밀번호 및 자동 완성 시스템은 간단하지 않습니다. 값을 추측, 저장 및 표시하는 알고리즘은 표준화되지 않았으며 플랫폼마다 다릅니다. 예를 들어, [Hidde de Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form)가 지적한 바와 같이: "Firefox의 비밀번호 관리자는 [레시피 시스템](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)으로 휴리스틱을 보완합니다."
+
+[자동 완성: 웹 개발자가 알아야 하지만](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont) `name` 및 `autocomplete` 사용에 대한 추가 정보가 없습니다. [HTML 사양](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control)은 59개의 가능한 값을 모두 나열합니다.
+
+{% Aside %} 가입 및 로그인 양식에서 `input` , `select` 및 `textarea` 요소는 물론 `form` 요소 자체에 `name` 과 `id` 값을 사용하여 비밀번호 관리자를 도울 수 있습니다. {% endAside %}
+
+### 브라우저에 강력한 비밀번호 제안 가능 {: #password-suggestions }
+
+최신 브라우저는 경험적 방법을 사용하여 비밀번호 관리자 UI를 표시하고 강력한 비밀번호를 제안할 시기를 결정합니다.
+
+다음은 Safari가 데스크톱에서 수행하는 방법입니다.
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="데스크톱의 Firefox 비밀번호 관리자 스크린샷", width="800", height="229" %} <figcaption>Safari의 비밀번호 제안 흐름.</figcaption></figure>
+
+(강력한 고유 비밀번호 제안은 버전 12.0부터 Safari에서 사용할 수 있습니다.)
+
+내장된 브라우저 비밀번호 생성기는 사용자와 개발자가 "강력한 비밀번호"가 무엇인지 알아낼 필요가 없음을 의미합니다. 브라우저는 비밀번호를 안전하게 저장하고 필요에 따라 자동 완성할 수 있으므로 사용자가 비밀번호를 기억하거나 입력할 필요가 없습니다. 사용자가 내장된 브라우저 비밀번호 생성기를 활용하도록 권장하면 사이트에서 고유하고 강력한 비밀번호를 사용할 가능성이 높아지고 다른 곳에서 손상될 수 있는 비밀번호를 재사용할 가능성이 줄어듭니다.
+
+{% Aside %} 이 접근 방식의 단점은 플랫폼 간에 비밀번호를 공유할 수 있는 방법이 없다는 것입니다. 예를 들어 사용자는 iPhone에서 Safari를 사용하고 Windows 노트북에서 Chrome을 사용할 수 있습니다. {% endAside %}
+
+### 실수로 누락된 입력으로부터 사용자를 저장하도록 돕기 {: #required-fields }
+
+이메일 및 비밀번호 필드 모두에 `required` 속성을 추가하십시오. 최신 브라우저는 누락된 데이터에 대해 자동으로 메시지를 표시하고 초점을 설정합니다. JavaScript가 필요하지 않습니다!
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="데스크톱 Firefox 및 Android용 Chrome의 스크린샷에 누락된 데이터에 대한 '이 필드를 작성하십시오' 프롬프트가 표시됩니다.", width="600", height="392" %} <figcaption>데스크톱용 Firefox(버전 76) 및 Android용 Chrome(버전 83)에서 누락된 데이터에 대한 프롬프트 및 포커스.</figcaption></figure>
+
+## 손가락과 엄지손가락을 위한 디자인 {: #mobile-design }
+
+입력 요소 및 버튼과 관련된 거의 모든 것에 대한 기본 브라우저 크기는 특히 모바일에서 너무 작습니다. 이것은 명백해 보일 수 있지만 많은 사이트의 로그인 양식에서 흔히 발생하는 문제입니다.
+
+### 입력과 버튼이 충분히 큰지 확인 {: #tap-targets }
+
+입력 및 버튼의 기본 크기와 패딩은 데스크톱에서 너무 작고 모바일에서는 더 작습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="데스크톱용 Chrome 및 Android용 Chrome의 스타일이 지정되지 않은 양식 스크린샷", width="800", height="434" %}</figure>
+
+[Android 접근성 지침](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB)에 따르면 터치스크린 개체의 권장 대상 크기는 7–10mm입니다. Apple 인터페이스 지침은 48x48 픽셀을 제안하고 W3C는 [최소 44x44 CSS 픽셀](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)을 제안합니다. 이를 기반으로 모바일의 경우 입력 요소 및 버튼에 약 15픽셀, 데스크톱에서 약 10픽셀의 패딩을 추가합니다. 실제 모바일 장치와 실제 손가락 또는 엄지 손가락으로 이것을 시도하십시오. 각 입력과 버튼을 편안하게 누를 수 있어야 합니다.
+
+[탭 대상의 크기가 적절하지 않습니다.](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/) Lighthouse 감사는 너무 작은 입력 요소를 감지하는 프로세스를 자동화하는 데 도움이 될 수 있습니다.
+
+#### 엄지손가락을 위한 디자인 {: #design-for-thumbs }
+
+[터치 대상](https://www.google.com/search?q=touch+target)을 검색하면 많은 집게손가락 사진을 볼 수 있습니다. 그러나 현실 세계에서 많은 사람들이 엄지손가락을 사용하여 휴대폰과 상호 작용합니다. 엄지손가락은 집게손가락보다 크고 컨트롤은 덜 정확합니다. 적절한 크기의 터치 대상에 대한 더 많은 이유입니다.
+
+### 텍스트를 충분히 크게 만들기 {: #size-text-correctly }
+
+크기 및 패딩과 마찬가지로 입력 요소 및 버튼의 기본 브라우저 글꼴 크기는 특히 모바일에서 너무 작습니다.
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="데스크톱 및 Android의 Chrome에서 스타일이 지정되지 않은 양식의 스크린샷", width="800", height="494" %} <figcaption>데스크탑 및 모바일의 기본 스타일: 입력 텍스트가 너무 작아서 많은 사용자가 읽을 수 없습니다.</figcaption></figure>
+
+다른 플랫폼의 브라우저는 글꼴 크기를 다르게 지정하므로 모든 곳에서 잘 작동하는 특정 글꼴 크기를 지정하기가 어렵습니다. 인기 있는 웹사이트에 대한 간단한 설문조사는 데스크톱에서 13-16픽셀 크기를 보여줍니다. 모바일에서 텍스트의 경우 물리적 크기와 일치하는 것이 좋은 최소값입니다.
+
+즉, 모바일에서는 더 큰 픽셀 크기를 사용해야 합니다. `16px`는 꽤 읽을 수 있지만 시력이 좋아도 Android용 Chrome에서는 `16px` [미디어 쿼리](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size)를 사용하여 다양한 표시 영역 크기에 대해 다른 글꼴 픽셀 크기를 설정할 수 있습니다. `20px`가 적당하지만 시력이 좋지 않은 친구나 동료와 함께 테스트해야 합니다.
+
+[문서에서 읽을 수 있는 글꼴 크기를 사용하지 않습니다.](https://developer.chrome.com/docs/lighthouse/seo/font-size/) Lighthouse 감사를 사용하면 너무 작은 텍스트를 감지하는 프로세스를 자동화할 수 있습니다.
+
+### 입력 사이에 충분한 공간 제공 {: #size-margins-correctly }
+
+입력이 터치 대상으로 잘 작동하도록 충분한 여백을 추가합니다. 즉, 여백의 손가락 너비 정도를 목표로 합니다.
+
+### 입력이 명확하게 보이는지 확인 {: #visible-inputs }
+
+입력에 대한 기본 테두리 스타일은 입력을 보기 어렵게 만듭니다. Android용 Chrome과 같은 일부 플랫폼에서는 거의 보이지 않습니다.
+
+패딩뿐만 아니라 테두리를 추가합니다. 흰색 배경에 `#ccc` 또는 더 어두운 색을 사용하는 것이 일반적인 규칙입니다.
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Android의 Chrome에서 스타일이 지정된 양식의 스크린샷.", width="250", height="525" %} <figcaption>읽기 쉬운 텍스트, 눈에 보이는 입력 테두리, 적절한 패딩 및 여백.</figcaption></figure>
+
+### 내장 브라우저 기능을 사용하여 잘못된 입력 값 경고 {: #built-in-validation }
+
+브라우저에는 `type` 속성에 대한 기본 양식 유효성 검사를 수행하는 기능이 내장되어 있습니다. 브라우저는 잘못된 값으로 양식을 제출할 때 경고하고 문제가 있는 입력에 초점을 맞춥니다.
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="잘못된 이메일 값에 대한 브라우저 프롬프트 및 포커스를 표시하는 데스크톱의 Chrome 로그인 양식 스크린샷.", width="300", height="290" %} <figcaption>브라우저에 의한 기본 내장 유효성 검사.</figcaption></figure>
+
+`:invalid` CSS 선택기를 사용하여 잘못된 데이터를 강조 표시할 수 있습니다. 내용이 없는 입력을 선택하지 않으려면 `:not(:placeholder-shown)`을 사용하십시오.
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+유효하지 않은 값이 있는 입력을 강조 표시하는 다양한 방법을 시도해 보십시오.
+
+## 필요한 경우 JavaScript 사용 {: #javascript }
+
+### 비밀번호 표시 전환 {: #password-display }
+
+사용자가 입력한 텍스트를 확인할 수 있도록 **비밀번호 표시** 아이콘 또는 버튼을 추가해야 합니다. 사용자가 입력한 텍스트를 볼 수 없으면 [사용성이 저하](https://www.nngroup.com/articles/stop-password-masking/)됩니다. [구현 계획](https://twitter.com/sw12/status/1251191795377156099)은 있지만 현재로서는 이를 수행할 수 있는 기본 제공 방법이 없습니다. 대신 JavaScript를 사용해야 합니다.
+
+<figure><img src="./show-password-google.png" width="350" alt="비밀번호 표시 아이콘이 표시된 Google 로그인 양식."><figcaption> Google 로그인 양식: <strong>비밀번호 표시</strong> 아이콘 및 <strong>비밀번호 찾기</strong> 링크가 있습니다.</figcaption></figure>
+
+다음 코드는 텍스트 버튼을 사용하여 **비밀번호 표시** 기능을 추가합니다.
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+다음은 버튼을 일반 텍스트처럼 보이게 하는 CSS입니다.
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+그리고 비밀번호를 보여주는 자바스크립트:
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Hide password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Hide password.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Show password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Show password as plain text. ' +
+      'Warning: this will display your password on the screen.');
+  }
+}
+```
+
+최종 결과는 다음과 같습니다.
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Mac 및 iPhone 7의 Safari에서 비밀번호 텍스트 '버튼' 표시가 있는 로그인 양식 스크린샷.", width="800", height="468" %} <figcaption>Mac 및 iPhone 7의 Safari에서 <strong>비밀번호</strong> 텍스트 '버튼' 표시가 있는 로그인 양식.</figcaption></figure>
+
+### 비밀번호 입력에 액세스할 수 있도록 설정 {: #accessible-password-inputs }
+
+제약 조건을 설명하는 요소의 ID를 지정하여 비밀번호 규칙을 간략하게 `aria-describedby`를 사용하십시오. 스크린 리더는 레이블 텍스트, 입력 유형(비밀번호), 설명을 차례로 제공합니다.
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
+```
+
+**비밀번호 표시** 기능을 추가할 때 비밀번호가 표시될 것임을 경고하는 `aria-label`을 포함해야 합니다. 그렇지 않으면 사용자가 실수로 비밀번호를 공개할 수 있습니다.
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Show password as plain text.
+                    Warning: this will display your password on the screen.">
+  Show password
+</button>
+```
+
+다음 Glitch에서 두 ARIA 기능이 모두 작동하는 것을 볼 수 있습니다.
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+[액세스 가능한 양식 만들기](https://webaim.org/techniques/forms/)에는 액세스 가능한 양식을 만드는 데 도움이 되는 추가 팁이 있습니다.
+
+### 제출하기 전에 실시간으로 확인 {: #validation }
+
+HTML 양식 요소 및 속성에는 기본 유효성 검사를 위한 기본 제공 기능이 있지만 사용자가 데이터를 입력하는 동안 및 양식 제출을 시도할 때 JavaScript를 사용하여 더욱 강력한 유효성 검사를 수행해야 합니다.
+
+{% Aside 'warning' %} 클라이언트측 유효성 검사는 사용자가 데이터를 입력하는 데 도움이 되며 불필요한 서버 로드를 방지할 수 있지만 항상 백엔드에서 데이터를 유효성 검사하고 삭제해야 합니다. {% endAside %}
+
+로그인 양식 코드랩의 [5단계](https://glitch.com/edit/#!/sign-in-form-codelab-5)에서는 [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints)([광범위하게 지원됨](https://caniuse.com/#feat=constraint-validation))를 사용하여 기본 제공 브라우저 UI를 사용하여 사용자 지정 유효성 검사를 추가하여 포커스를 설정하고 프롬프트를 표시합니다.
+
+자세히 알아보기: [보다 복잡한 실시간 유효성 검사를 위해 JavaScript를 사용하십시오](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+### 분석 및 RUM {: #analytics }
+
+"측정할 수 없는 것은 개선할 수 없습니다"는 가입 및 로그인 양식에 특히 해당됩니다. 목표를 설정하고, 성공을 측정하고, 사이트를 개선하고, 반복해야 합니다.
+
+[할인 사용성 테스트](https://www.nngroup.com/articles/discount-usability-20-years/)는 변경 사항을 시도하는 데 도움이 될 수 있지만 사용자가 가입 및 로그인 양식을 경험하는 방식을 실제로 이해하려면 실제 데이터가 필요합니다.
+
+- **페이지 분석**: 가입 및 로그인 페이지 조회수, 이탈률 및 이탈.
+- **상호 작용 분석**: [목표 유입 경로](https://support.google.com/analytics/answer/6180923?hl=en)(사용자가 로그인 또는 로그인 흐름을 포기하는 위치) 및 [이벤트](https://developers.google.com/analytics/devguides/collection/gtagjs/events)(사용자가 양식과 상호 작용할 때 취하는 작업은 무엇입니까?)
+- **웹 사이트 성능**: [사용자 중심 메트릭](/user-centric-performance-metrics)(어떤 이유로 가입 및 로그인 양식이 느리고, 그렇다면 원인은 무엇입니까?).
+
+가입 및 로그인에 대한 다양한 접근 방식을 시도하기 위해 A/B 테스트를 구현하고 모든 사용자에게 변경 사항을 릴리스하기 전에 일부 사용자의 변경 사항을 검증하기 위한 단계적 출시를 고려할 수도 있습니다.
+
+## 일반 지침 {: #general-guidelines }
+
+잘 설계된 UI 및 UX는 로그인 양식 포기를 줄일 수 있습니다.
+
+- 사용자가 로그인을 찾도록 만들지 마십시오! **로그인** , **계정 만들기** 또는 **등록**과 같이 잘 알려진 문구를 사용하여 페이지 상단에 로그인 양식에 대한 링크를 넣으십시오.
+- 집중하세요! 가입 양식은 제안 및 기타 사이트 기능으로 사람들의 주의를 산만하게 하는 곳이 아닙니다.
+- 가입 복잡성을 최소화합니다. 다른 사용자 데이터(예: 주소 또는 신용 카드 세부 정보)는 사용자가 해당 데이터를 제공함으로써 얻을 수 있는 분명한 이점이 있는 경우에만 수집합니다.
+- 사용자가 가입 양식을 작성하기 전에 가치 제안이 무엇인지 명확히 하십시오. 로그인하면 어떤 이점이 있습니까? 사용자에게 가입 완료에 대한 구체적인 인센티브를 제공합니다.
+- 일부 사용자는 이메일을 사용하지 않을 수 있으므로 가능하면 사용자가 이메일 주소 대신 휴대전화 번호로 자신을 식별할 수 있도록 합니다.
+- 사용자가 비밀번호를 쉽게 재설정할 수 있도록 하고 **비밀번호를 잊어버리셨습니까?** 링크를 만들어야 합니다.
+- 서비스 약관 및 개인 정보 보호 정책 문서에 대한 링크: 처음부터 사용자에게 데이터를 보호하는 방법을 명확히 하십시오.
+- 가입 및 로그인 페이지에 회사 또는 조직의 로고와 이름을 포함하고 언어, 글꼴 및 스타일이 사이트의 나머지 부분과 일치하는지 확인하십시오. 일부 양식은 특히 URL이 크게 다른 경우 다른 콘텐츠와 동일한 사이트에 속해 있다고 느껴지지 않습니다.
+
+## 학습 계속 {: #resources }
+
+- [놀라운 양식 만들기](/learn/forms/)
+- [모바일 양식 디자인 모범 사례](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [더 많은 기능을 갖춘 양식 컨트롤](/more-capable-form-controls)
+- [액세스 가능한 양식 만들기](https://webaim.org/techniques/forms/)
+- [Credential Management API를 사용하여 로그인 흐름 간소화](https://developer.chrome.com/blog/credential-management-api/)
+- [WebOTP API로 웹에서 전화번호 확인](/web-otp/)
+
+사진 제공: [Unsplash](https://unsplash.com)에서 [Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU)
diff --git a/src/site/content/ko/identity/sign-up-form-best-practices/index.md b/src/site/content/ko/identity/sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..6eb033d94ab
--- /dev/null
+++ b/src/site/content/ko/identity/sign-up-form-best-practices/index.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: 가입 양식 모범 사례
+subhead: 사용자가 최소한의 번거로움으로 가입, 로그인 및 계정 세부 정보를 관리하도록 돕습니다.
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2020-12-11
+description: 사용자가 최소한의 번거로움으로 가입, 로그인 및 계정 세부 정보를 관리하도록 돕습니다.
+hero: image/admin/YfAltWqxvie1SP19BxBj.jpg
+thumbnail: image/admin/7bDPvFWBMFIMynoqDpMc.jpg
+alt: 손으로 쓴 심은 채소 목록 페이지를 보여주는 클립보드입니다.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - 가입 양식 모범 사례 코드랩
+---
+
+{% YouTube 'Ev2mCzJZLtY' %}
+
+사용자가 사이트에 로그인해야 하는 경우 좋은 가입 양식 디자인이 중요합니다. 이것은 연결 상태가 좋지 않거나 모바일에서나, 바쁘거나 스트레스를 받는 사람들에게 특히 그렇습니다. 잘못 설계된 가입 양식은 높은 이탈률을 보입니다. 각 이탈은 가입 기회를 놓친 것이 아니라 사용자를 잃었으며 사용자가 불만을 품은 것을 의미할 수 있습니다.
+
+{% Aside 'codelab' %} 실습 가이드를 통해 이러한 모범 사례를 배우고 싶다면 [가입 양식 모범 사례 코드랩](/codelab-sign-up-form-best-practices)을 확인하세요. {% endAside %}
+
+다음은 모든 모범 사례를 보여주는 매우 간단한 가입 양식의 예입니다.
+
+{% Glitch { id: 'signup-form', path: 'index.html', height: 700 } %}
+
+{% Aside 'caution' %} 이 게시물은 양식 모범 사례에 관한 것입니다.
+
+서드파티 ID 제공자(연동 로그인)를 통해 가입을 구현하는 방법이나, 사용자를 인증하고, 자격 증명을 저장하고, 계정을 관리하는 백엔드 서비스를 구축하는 방법은 설명하지 않습니다.
+
+[웹 앱에 Google 로그인 통합](https://developers.google.com/identity/sign-in/web/sign-in)에서는 가입 옵션에 연동 로그인을 추가하는 방법을 설명합니다.
+
+[사용자 계정, 권한 부여 및 암호 관리를 위한 12가지 모범 사례](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)는 사용자 계정 관리를 위한 핵심 백엔드 원칙을 간략하게 설명합니다. {% endAside %}
+
+## 체크리스트
+
+- [가능하면 로그인을 피하세요](#no-forced-sign-in).
+- [계정을 만드는 방법을 명확히 하세요](#obvious-account-creation).
+- [계정 세부 정보에 액세스하는 방법을 명확히 하세요](#obvious-account-details).
+- [어수선함을 줄이세요](#cut-clutter).
+- [세션 길이를 고려하세요](#session-length).
+- [암호 관리자가 암호를 안전하게 제안하고 저장할 수 있도록 돕습니다](#help-password-managers).
+- [도용된 비밀번호를 허용하지 마세요](#no-compromised-passwords).
+- [암호 붙여넣기를 허용하지 마세요](#allow-password-pasting).
+- [암호를 일반 텍스트로 저장하거나 전송하지 마세요](#salt-and-hash).
+- [비밀번호 업데이트를 강제하지 마세요](#no-forced-password-updates).
+- [암호를 변경하거나 재설정하기 쉽게 만드세요](#password-change).
+- [연동 로그인을 활성화하세요](#federated-login).
+- [계정 전환을 간단하게 만드세요](#account-switching).
+- [다단계 인증 제공을 고려하세요](#multi-factor-authentication).
+- [사용자 이름에 주의하세요](#username).
+- [랩뿐만 아니라 현장에서도 테스트합니다.](#analytics-rum)
+- [다양한 브라우저, 장치 및 플랫폼에서 테스트합니다](#test-platforms).
+
+## 가능하면 로그인을 피하세요. {: #no-forced-sign-in }
+
+가입 양식을 구현하고 사용자에게 사이트에서 계정을 만들도록 요청하기 전에 정말 필요한지 고려하세요. 가능하면 로그인 뒤의 기능을 차단하는 것을 피해야 합니다.
+
+최고의 가입 양식은 가입 양식이 없습니다!
+
+사용자에게 계정을 만들도록 요청하면 사용자와 사용자가 달성하려는 것 사이를 오가게 됩니다. 귀하는 부탁을 하고 사용자에게 개인 데이터를 신뢰하도록 요청합니다. 저장하는 모든 암호와 데이터 항목에는 개인 정보 보호 및 보안 "데이터 부채"가 수반되어 사이트에 대한 비용 및 법적 책임이 됩니다.
+
+사용자에게 계정 생성을 요청하는 주된 이유가 탐색 또는 탐색 세션 사이에 정보를 저장하는 것이라면 [대신 클라이언트 측 저장소](/storage-for-the-web)를 사용하는 것이 좋습니다. 쇼핑 사이트의 경우 사용자가 구매를 위해 계정을 만들도록 강요하는 것이 장바구니 이탈의 주요 원인으로 인용됩니다. [게스트 체크아웃을 기본값으로 설정](/payment-and-address-form-best-practices#guest-checkout) 해야 합니다.
+
+## 로그인을 명확하게 하세요 {: #obvious-account-creation}
+
+예를 들어 페이지 오른쪽 상단의 **로그인(Login)** 또는 **로그인(Sign in)** 버튼을 사용하여 사이트에서 계정을 만드는 방법을 명확하게 만드세요. 모호한 아이콘이나 모호한 문구("탑승하세요!", "합류하기")를 사용하지 말고 탐색 메뉴에서 로그인을 숨기지 마세요. 사용성 전문가인 Steve Krug는 웹사이트 사용성에 대한 접근 방식을 다음과 같이 요약했습니다. [생각하게 하지 마세요!](https://uxplanet.org/dont-make-me-think-20-wise-thoughts-about-usability-from-steve-krug-876b563f1d63) 웹 팀의 다른 사람들을 설득해야 하는 경우 [분석](#analytics-rum)을 사용하여 다양한 옵션의 영향을 보여줍니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KeztoU8KgAqrQ5CKBSWw.jpg", alt="안드로이드 폰에서 본 모의 전자상거래 웹사이트 스크린샷 2장. 왼쪽은 로그인 링크 아이콘을 사용하여 다소 모호한 부분이 있습니다. 오른쪽에 있는 하나는 단순히 '로그인'이라고 되어 있습니다.", width="800", height="737" %}<figcaption> 로그인을 명확하게 합니다. 아이콘이 모호할 수 있지만 <b>로그인</b> 버튼이나 링크는 명확합니다.</figcaption></figure>
+
+{% Aside %} 계정을 생성하기 위한 버튼(또는 링크)을 추가하고 기존 사용자가 로그인할 수 있는 다른 버튼을 추가할지 고민할 수 있습니다. 이제 많은 인기 사이트에서 단일 **로그인** 버튼만 표시합니다. 사용자가 이를 탭하거나 클릭하면 필요한 경우 계정을 생성할 수 있는 링크도 표시됩니다. 이는 이제 일반적인 패턴이며 사용자가 이를 이해할 가능성이 높지만 [상호 작용 분석](#analytics-rum)을 사용하여 단일 버튼이 가장 잘 작동하는지 여부를 모니터링할 수 있습니다. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WUgCNqhEgvoWEVwGjfrA.jpg", alt="Gmail 로그인 스크린샷: 로그인 버튼이 표시된 한 페이지, 클릭하면 계정 만들기 링크가 있는 양식으로 연결됩니다.", width ="800", height="545" %} <figcaption>Gmail 로그인 페이지에는 계정을 만들 수 있는 링크가 있습니다.<br> 여기에 표시된 것보다 큰 창 크기에서 Gmail은 <b>로그인</b> 링크 및 <b>계정 만들기</b> 버튼을 보여줍니다.</figcaption></figure>
+
+Google과 같은 ID 제공업체를 통해 가입하고 이메일과 비밀번호를 사용하여 가입하는 사용자의 계정을 연결해야 합니다. ID 공급자의 프로필 데이터에서 사용자의 이메일 주소에 액세스하고 두 계정을 일치시킬 수 있으면 쉽게 할 수 있습니다. 아래 코드는 Google 로그인 사용자의 이메일 데이터에 액세스하는 방법을 보여줍니다.
+
+```js
+// auth2가 gapi.auth2.init()로 초기화되었습니다
+if (auth2.isSignedIn.get()) {
+  var profile = auth2.currentUser.get().getBasicProfile();
+  console.log(`Email: ${profile.getEmail()}`);
+}
+```
+
+{: #obvious-account-details}
+
+사용자가 로그인하면 계정 세부 정보에 액세스하는 방법을 명확히 하세요. 특히 [비밀번호를 변경하거나 재설정](#password-change) 하는 방법을 명확히 하세요.
+
+## 어수선함을 줄이기 {: #cut-clutter}
+
+가입 과정에서 여러분의 임무는 복잡성을 최소화하고 사용자가 집중할 수 있도록 하는 것입니다. 어수선함을 줄입니다. 지금은 주의를 산만하게 하고 유혹할 때가 아닙니다!
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/avoid-distractions.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>사용자가 가입을 완료하는 데 방해가 되지 않도록 하세요.</figcaption></figure>
+
+가입할 때 가능한 한 적게 요구하세요. 추가 사용자 데이터(예: 이름 및 주소)는 필요한 경우에만 그리고 사용자가 해당 데이터를 제공함으로써 분명한 이점이 있다고 판단되는 경우에만 수집합니다. 통신하고 저장하는 모든 데이터 항목에는 비용과 법적 책임이 따른다는 점을 명심하세요.
+
+사용자의 연락처 세부 정보를 올바르게 얻으려고 입력을 두 배로 늘리지 마세요. 그러면 양식 완성 속도가 느려지고 양식 필드가 자동으로 채워지는 경우 의미가 없습니다. 대신 연락처 세부 정보를 입력한 사용자에게 확인 코드를 보내고 응답이 있으면 계정 생성을 계속합니다. 이것은 일반적인 가입 패턴입니다. 사용자는 이에 익숙합니다.
+
+새 기기나 브라우저에서 로그인할 때마다 사용자에게 코드를 전송하여 비밀번호 없는 로그인을 고려할 수 있습니다. Slack 및 Medium과 같은 사이트는 이 버전을 사용합니다.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/medium-sign-in.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>medium.com에서 비밀번호 없는 로그인.</figcaption></figure>
+
+연동 로그인과 마찬가지로 이것은 사용자 암호를 관리할 필요가 없다는 추가 이점이 있습니다.
+
+## 세션 길이 고려 {: #session-length}
+
+사용자 ID에 대해 어떤 접근 방식을 취하든 세션 길이에 대해 신중하게 결정해야 합니다. 사용자가 로그인된 상태를 유지하는 시간과 로그아웃을 유발하는 원인이 무엇입니까?
+
+사용자가 모바일인지 데스크탑인지, 데스크탑에서 공유하는지 아니면 장치를 공유하는지 고려하세요.
+
+{% Aside %} 구매가 이루어지거나 계정이 업데이트되는 경우와 같이 민감한 기능에 대해 재인증을 시행하여 공유 기기의 일부 문제를 해결할 수 있습니다. 코드랩 [여러분의 첫 WebAuthn 앱](https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0)에서 재인증을 구현하는 방법에 대해 자세히 알아볼 수 있습니다. {% endAside %}
+
+## 비밀번호 관리자가 비밀번호를 안전하게 제안하고 저장할 수 있도록 도와주세요 {: #help-password-managers}
+
+서드파티 및 빌드인 브라우저 암호 관리자가 암호를 제안하고 저장하도록 도와줄 수 있으므로 사용자가 직접 암호를 선택, 기억 또는 입력할 필요가 없습니다. 암호 관리자는 최신 브라우저에서 잘 작동하여 여러 장치, 플랫폼별 및 웹 앱 및 새 장치에서 계정을 동기화합니다.
+
+따라서 특히 올바른 자동 완성 값을 사용하기 위해 가입 양식을 올바르게 코딩하는 것이 매우 중요합니다. 가입 양식의 경우 새로운 비밀 번호에 대해 `autocomplete="new-password"`를 사용하고, `autocomplete="email"` 및 `autocomplete="tel"`과 같은 가능한 다른 양식 필드에 올바른 자동 완성 값을 추가하세요. `input` , `select` 및 `textarea` 요소와 마찬가지로 `form` 요소 자체에 대해 가입 및 로그인 양식에 `name`과 `id` 값을 사용하여 암호 관리자를 도울 수 있습니다.
+
+또한 적절한 [`type` 속성](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 빌드인 유효성 검사를 활성화해야 합니다. [지불 및 주소 양식 모범 사례](/payment-and-address-form-best-practices#type)에서 자세히 알아볼 수 있습니다.
+
+{% Aside %} [로그인 양식 모범 사례](/sign-in-form-best-practices)에는 양식 디자인, 레이아웃 및 접근성을 개선하는 방법과 기본 제공 브라우저 기능을 활용하기 위해 양식을 올바르게 코딩하는 방법에 대한 더 많은 팁이 있습니다. {% endAside %}
+
+## 사용자가 보안 암호를 입력하도록 합니다. {: #secure-passwords}
+
+암호 관리자가 암호를 제안할 수 있도록 하는 것이 가장 좋은 방법이며 사용자가 브라우저 및 서드파티 브라우저 관리자가 제안하는 강력한 암호를 수락하도록 권장해야 합니다.
+
+그러나 많은 사용자가 자신의 암호를 입력하기를 원하므로 암호 강도에 대한 규칙을 구현해야 합니다. 미국 국립 표준 기술 연구소(National Institute of Standards and Technology)는 [안전하지 않은 암호를 피하는 방법을](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements) 설명합니다.
+
+{% Aside 'warning' %} 일부 사이트의 가입 양식에는 브라우저 및 타사 비밀번호 관리자가 생성한 강력한 비밀번호를 허용하지 않는 비밀번호 유효성 검사 규칙이 있습니다. 양식 완성을 방해하고 사용자를 귀찮게 하며 사용자가 암호 관리자가 생성한 암호보다 덜 안전할 수 있는 자신의 암호를 만들어야 하므로 사이트에서 이 작업을 수행하지 않도록 하세요. {% endAside %}
+
+## 유출된 비밀번호 허용 안함 {: #no-compromised-passwords}
+
+비밀번호에 대해 어떤 규칙을 선택하든 [보안 침해](https://haveibeenpwned.com/PwnedWebsites) 에 노출된 비밀번호를 허용해서는 안 됩니다.
+
+사용자가 암호를 입력하면 이미 손상된 암호가 아닌지 확인해야 합니다. [Have I Been Pwned](https://haveibeenpwned.com/Passwords) 사이트는 암호 확인을 위한 API를 제공하거나 이를 서비스로 직접 실행할 수 있습니다.
+
+Google의 비밀번호 관리자를 사용하면 [기존 비밀번호가 도용되었는지 확인](https://passwords.google.com/checkup)할 수도 있습니다.
+
+사용자가 제안한 비밀번호를 거부하는 경우 거부된 이유를 구체적으로 설명하십시오. [문제를 인라인으로 표시하고 해결 방법을 설명](https://baymard.com/blog/inline-form-validation) 하세요. 사용자가 등록 양식을 제출하고 서버의 응답을 기다려야 하는 것이 아니라 사용자가 값을 입력하는 즉시 문제를 해결하는 방법을 설명합니다.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/password-validation.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>비밀번호가 거부된 이유를 명확히 하세요.</figcaption></figure>
+
+## 비밀번호 붙여넣기를 금지하지 마세요. {: #allow-password-pasting}
+
+일부 사이트에서는 텍스트를 암호 입력에 붙여넣는 것을 허용하지 않습니다.
+
+비밀번호 붙여넣기를 허용하지 않으면 사용자를 짜증 나게 하고 기억하기 쉬운(따라서 손상되기 더 쉬울 수 있음) 비밀번호를 권장하며 영국 국가 사이버 보안 센터(UK National Cyber Security Centre)와 같은 조직에 따르면 실제로 [보안](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords)이 저하될 수 있습니다. 사용자는 비밀번호를 붙여넣으려는 시도 *후에*만 붙여넣기가 허용되지 않는다는 사실을 알게 되므로 [비밀번호 붙여넣기를 허용하지 않아도 클립보드 취약점을 피할 수는 없습니다](https://github.com/OWASP/owasp-masvs/issues/106).
+
+## 비밀번호를 일반 텍스트로 저장하거나 전송하지 마세요. {: #salt-and-hash}
+
+비밀번호를 [솔트 및 해시](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt)하고 [자신만의 해시 알고리즘을 만들려고 하지 마세요](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html)!
+
+## 비밀번호 업데이트를 강제하지 마세요 {: #no-forced-password-updates}
+
+[사용자가 임의로 암호를 업데이트하도록 강요하지 마세요.](https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers:~:text=Verifiers%20SHOULD%20NOT%20require%20memorized%20secrets%20to%20be%20changed%20arbitrarily%20(e.g.%2C%20periodically).)
+
+강제로 암호를 업데이트하면 IT 부서에 비용이 많이 들고 사용자가 짜증이 날 수 있으며 [보안에 큰 영향을 미치지 않습니다](https://pages.nist.gov/800-63-FAQ/#q-b05). 또한 사람들이 안전하지 않은 기억할 수 있는 암호를 사용하거나 암호의 물리적 기록을 유지하도록 권장할 수 있습니다.
+
+비밀번호 업데이트를 강제하기보다 비정상적인 계정 활동을 모니터링하고 사용자에게 경고해야 합니다. 가능하면 데이터 침해로 인해 도용된 비밀번호도 모니터링해야 합니다.
+
+또한 사용자에게 계정 로그인 기록에 대한 액세스 권한을 제공하여 로그인이 발생한 위치와 시간을 보여주어야 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zZXmhWc9bZ1GtvrE5Ooq.jpg", alt="Gmail 계정 활동 페이지", width="800", height="469" %}<figcaption> <a href="https://support.google.com/mail/answer/45938?hl=en-GB" title="Gmail 계정 활동을 보는 방법을 알아보세요.">Gmail 계정 활동 페이지</a>.</figcaption></figure>
+
+## 비밀번호를 변경하거나 재설정하기 쉽게 만드세요 {: #password-change}
+
+사용자에게 계정 비밀번호를 **업데이트** 하는 위치와 방법을 명확히 하세요. 일부 사이트에서는 놀라울 정도로 어렵습니다.
+
+물론 사용자가 비밀번호를 잊어버린 경우 쉽게 **재설정**할 수 있도록 해야 합니다. Open Web Application Security Project는 [분실된 암호를 처리하는 방법](https://cheatsheetseries.owasp.org/cheatsheets/Forgot_Password_Cheat_Sheet.html)에 대한 자세한 지침을 제공합니다.
+
+귀하의 비즈니스와 사용자를 안전하게 보호하려면 사용자가 비밀번호가 도용된 것을 발견한 경우 비밀번호를 변경하도록 돕는 것이 특히 중요합니다. 이를 더 쉽게 하려면 [`/.well-known/change-password`](https://w3c.github.io/webappsec-change-password-url/) URL을 사이트에 추가하여 비밀번호 관리 페이지로 리디렉션합니다. 이를 통해 비밀번호 관리자는 사이트의 비밀번호를 변경할 수 있는 페이지로 사용자를 직접 탐색할 수 있습니다. 이 기능은 이제 Safari, Chrome에서 구현되었으며 다른 브라우저에서도 제공될 예정입니다. [비밀번호 변경을 위해 잘 알려진 URL을 추가하여 사용자가 비밀번호를 쉽게 변경](/change-password-url)할 수 있도록 구현하는 방법을 설명합니다.
+
+또한 사용자가 원하는 경우 계정을 쉽게 삭제할 수 있도록 해야 합니다.
+
+## 서드파티 ID 제공업체를 통한 로그인 제공 {: #federated-login}
+
+많은 사용자가 이메일 주소와 비밀번호 등록 양식을 사용하여 웹사이트에 로그인하는 것을 선호합니다. 그러나 사용자가 연동 로그인이라고도 하는 서드파티 ID 공급자를 통해 로그인할 수 있도록 설정해야 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jubgwX1shLB7qAIiioTU.jpg", alt="워드프레스 로그인 페이지", width="800", height="513" %}<figcaption> Google 및 Apple 로그인 옵션이 있는 WordPress 로그인 페이지.</figcaption></figure>
+
+이 접근 방식에는 몇 가지 장점이 있습니다. 연동 로그인을 사용하여 계정을 만드는 사용자의 경우 비밀번호를 묻거나, 커뮤니케이션하거나, 저장할 필요가 없습니다.
+
+또한 이메일 주소와 같은 연동 로그인을 통해 확인된 추가 프로필 정보에 액세스할 수도 있습니다. 즉, 사용자가 해당 데이터를 입력할 필요가 없고 귀하가 직접 확인할 필요가 없습니다. 연동 로그인은 또한 사용자가 새 장치를 마련했을 때 훨씬 쉽게 만들 수 있습니다.
+
+[웹 앱에 Google 로그인 통합](https://developers.google.com/identity/sign-in/web/sign-in)에서는 가입 옵션에 연동 로그인을 추가하는 방법을 설명합니다. [다른 많은](https://en.wikipedia.org/wiki/Federated_identity#Examples) ID 플랫폼을 사용할 수 있습니다.
+
+{% Aside %} 새 기기를 마련했을 때의 "첫 날 경험"이 점점 더 중요해집니다. 사용자는 휴대전화, 노트북, 데스크톱, 태블릿, TV 또는 자동차를 비롯한 여러 장치에서 로그인할 것을 기대합니다. 가입 및 로그인 양식이 매끄럽지 않은 경우 사용자를 잃거나 최소한 다시 설정될 때까지 접속을 잃을 위험이 있습니다. 새로운 장치를 사용하는 사용자가 사이트를 시작하고 실행할 수 있도록 최대한 빠르고 쉽게 만들어야 합니다. 이것은 연동 로그인이 도움이 될 수 있는 또 다른 영역입니다. {% endAside %}
+
+## 계정 전환을 간단하게 하세요 {: #account-switching}
+
+많은 사용자가 동일한 브라우저를 사용하여 장치를 공유하고 계정 간에 교환합니다. 사용자가 연동 로그인에 액세스하는지 여부에 관계없이 계정 전환을 간단하게 만들어야 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sPDZJIY5Vo2ijqyuofCy.jpg", alt="Gmail, 계정 전환 표시 중", width="800", height="494" %}<figcaption> Gmail에서 계정 전환.</figcaption></figure>
+
+## 다중 인증 제공 고려 {: #multi-factor-authentication}
+
+다중 인증은 사용자가 여러 가지 방법으로 인증을 제공하도록 하는 것을 의미합니다. 예를 들어 사용자에게 비밀번호를 설정하도록 요구할 뿐만 아니라 이메일이나 SMS 문자 메시지로 전송된 일회용 비밀번호를 사용하거나 앱 기반 일회용 코드, 보안 키 또는 지문 센서. [SMS OTP 모범 사례](/sms-otp-form) 및 [WebAuthn으로 강력한 인증 활성화](https://developer.chrome.com/blog/webauthn/)에서는 다중 인증을 구현하는 방법을 설명합니다.
+
+사이트에서 개인 정보나 민감한 정보를 처리하는 경우 반드시 다중 인증을 제공(또는 시행)해야 합니다.
+
+## 사용자 이름 {: #username}에 주의하세요
+
+사용자 이름이 필요하지 않은 경우(또는 필요한 때까지) 사용자 이름을 강요하지 마세요. 사용자가 전자 메일 주소(또는 전화 번호)와 암호만 사용하여 가입하고 로그인할 수 있도록 하거나 원하는 경우 [연동 로그인](#federated-login)을 사용하도록 설정합니다. 사용자 이름을 선택하고 기억하도록 강요하지 마세요.
+
+사이트에 사용자 이름이 필요한 경우 사용자에게 불합리한 규칙을 적용하지 말고 사용자가 사용자 이름을 업데이트하는 것을 막지 마세요. 백엔드에서 사용자 이름과 같은 개인 데이터를 기반으로 한 식별자가 아니라 모든 사용자 계정에 대해 고유한 ID를 생성해야 합니다.
+
+사용자 이름에 `autocomplete="username"`을 사용해야 합니다.
+
+{% Aside 'caution' %} 개인 이름과 마찬가지로 사용자 이름이 [라틴 알파벳](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes#Types:~:text=Latin%20alphabet) 문자로 제한되지 않도록 합니다. [지불 및 주소 양식 모범 사례](/payment-and-address-form-best-practices#unicode-matching)는 유니코드 문자 일치를 사용하여 유효성을 검사하는 방법과 일치하는 유니코드 문자를 사용하여 검증해야 하는지 이유를 설명합니다. {% endAside %}
+
+## 다양한 기기, 플랫폼, 브라우저 및 버전에서 테스트하기 {: #test-platforms}
+
+사용자에게 가장 일반적인 플랫폼에서 가입 양식을 테스트합니다. 양식 요소 기능은 다를 수 있으며 뷰포트 크기의 차이로 인해 레이아웃 문제가 발생할 수 있습니다. BrowserStack을 사용하면 다양한 장치와 브라우저에서 [오픈 소스 프로젝트를 무료로 테스트](https://www.browserstack.com/open-source)할 수 있습니다.
+
+## 분석 및 실제 사용자 모니터링 구현 {: #analytics-rum}
+
+사용자가 가입 양식을 경험하는 방식을 이해하려면 [현장 데이터와 랩 데이터](/how-to-measure-speed/#lab-data-vs-field-data)가 필요합니다. 분석 및 [실제 사용자 모니터링](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic#Real_User_Monitoring)(RUM)은 가입 페이지를 로드하는 데 걸리는 시간, 사용자가 상호 작용하는(또는 그렇지 않은) UI 구성 요소, 사용자가 가입을 완료하는 데 걸리는 시간과 같은 사용자의 실제 경험에 대한 데이터를 제공합니다.
+
+- **페이지 분석** : 가입 과정의 모든 페이지에 대한 [페이지 조회수, 이탈률 및 종료율.](https://analytics.google.com/analytics/academy/course/6)
+- **상호 작용 분석** : [목표 유입 경로](https://support.google.com/analytics/answer/6180923?hl=en) 및 [이벤트](https://developers.google.com/analytics/devguides/collection/gtagjs/events)는 사용자가 가입 과정을 포기한 위치와 가입 페이지의 버튼, 링크 및 기타 구성 요소를 클릭하는 사용자의 비율을 나타냅니다.
+- **웹사이트 성능** : [사용자 중심 메트릭](/user-centric-performance-metrics)을 통해 가입 과정이 느리게 로드되거나 [시각적으로 불안정](/cls)한지 여부를 알 수 있습니다.
+
+작은 변경이 가입 양식 완료율에 큰 차이를 만들 수 있습니다. 분석 및 RUM을 사용하면 변경 사항을 최적화하고 우선 순위를 지정하고 로컬 테스트에서 노출되지 않은 문제에 대해 사이트를 모니터링할 수 있습니다.
+
+## 학습 계속 {: #resources}
+
+- [로그인 양식 모범 사례](/sign-in-form-best-practices)
+- [지불 및 주소 양식 모범 사례](/payment-and-address-form-best-practices)
+- [놀라운 양식 만들기](/learn/forms/)
+- [모바일 양식 디자인 모범 사례](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [더 많은 기능을 갖춘 양식 컨트롤](/more-capable-form-controls)
+- [액세스 가능한 양식 만들기](https://webaim.org/techniques/forms/)
+- [Credential Management API를 사용하여 가입 과정 간소화](https://developer.chrome.com/blog/credential-management-api/)
+- [WebOTP API로 웹에서 전화번호 확인](/web-otp)
+
+사진 제공: [Unsplash](https://unsplash.com/photos/lUShu7PHIGA)에서 [@ecowarriorprincess](https://unsplash.com/@ecowarriorprincess).
diff --git a/src/site/content/ko/identity/sms-otp-form/index.md b/src/site/content/ko/identity/sms-otp-form/index.md
new file mode 100644
index 00000000000..a623981d1bb
--- /dev/null
+++ b/src/site/content/ko/identity/sms-otp-form/index.md
@@ -0,0 +1,186 @@
+---
+layout: post
+title: SMS OTP 양식 모범 사례
+subhead: SMS OTP 양식을 최적화하고 사용자 경험을 개선하는 방법을 알아보세요.
+authors:
+  - agektmr
+date: 2020-12-09
+updated: 2020-12-09
+hero: image/admin/J3XT84NDBPLlsRN0PhLl.jpg
+alt: 네온 채팅 버블 기호.
+description: 사용자에게 SMS를 통해 전달되는 OTP(일회성 비밀번호)를 제공하도록 요청하는 것은 사용자의 전화번호를 확인하는 일반적인 방법입니다. 이 게시물에는 훌륭한 사용자 경험을 제공하는 SMS OTP 양식을 구축하기 위한 모범 사례가 제공되어 있습니다.
+tags:
+  - identity
+  - security
+  - forms
+---
+
+{% YouTube 'sU4MpWYrGSI' %}
+
+사용자에게 SMS를 통해 전달되는 OTP(일회성 비밀번호) 제공하도록 요청하는 것은 사용자의 전화번호를 확인하는 일반적인 방법입니다. SMS OTP에 대한 몇 가지 사용 사례가 있습니다.
+
+- **이중 인증.** 사용자 이름과 비밀번호 외에, SMS OTP는 SMS OTP를 수신한 사람이 해당 계정을 소유하고 있다는 강력한 신호로 사용될 수 있습니다.
+- **전화번호 인증.** 일부 서비스는 사용자의 기본 식별자로 전화번호를 사용합니다. 이러한 서비스에서 사용자는 SMS를 통해 수신된 전화번호와 OTP를 입력하여 본인임을 증명할 수 있습니다. PIN과 결합하여 이중 인증을 구성하는 경우도 있습니다.
+- **계정 복구.** 사용자가 자신의 계정에 액세스할 수 없게 되면 계정을 복구할 방법이 필요합니다. 등록된 이메일 주소로 이메일을 보내거나 전화번호로 SMS OTP를 보내는 것은 일반적인 계정 복구 방법입니다.
+- **지불 확인** 지불 시스템에서 일부 은행 또는 신용카드 발급사는 보안상의 이유로 지불인에게 추가 인증을 요청합니다. SMS OTP는 일반적으로 이러한 용도로 사용됩니다.
+
+이 게시물에서는 위의 사용 사례를 위해 SMS OTP 양식을 구축하는 모범 사례를 설명합니다.
+
+{% Aside 'caution' %} 이 게시물에서는 SMS OTP 양식 모범 사례에 대해 논의하지만 SMS OTP는 전화번호가 재활용될 수 있고 때때로 도용될 수 있기 때문에 그 자체로는 가장 안전한 인증 방법이 아니라는 점에 유의하십시오. 그리고 [OTP 자체 개념은 피싱에 취약합니다](https://youtu.be/kGGMgEfSzMw?t=1133).
+
+더 나은 보안을 찾고 있다면 [WebAuthn](https://www.w3.org/TR/webauthn-2/)을 사용하는 것이 좋습니다. Chrome Dev Summit 2019의 ["가입 및 로그인의 새로운 기능](https://goo.gle/webauthn-video)" 강연에서 이에 대해 자세히 알아보고 ["첫 번째 WebAuthn 앱 빌드](https://goo.gle/WebAuthnReauthCodelab)" 코드랩으로 생체 인식 센서를 사용하여 재인증 환경을 구축하세요. {% endAside %}
+
+## 체크리스트
+
+SMS OTP로 최상의 사용자 경험을 제공하려면 다음 단계를 따르세요.
+
+- 다음과 함께 `<input>` 요소를 사용하세요.
+    - `type="text"`
+    - `inputmode="numeric"`
+    - `autocomplete="one-time-code"`
+- `@BOUND_DOMAIN #OTP_CODE`를 OTP SMS 메시지의 마지막 줄로 사용합니다.
+- [WebOTP API](/web-otp/)를 사용합니다.
+
+## `<input>` 요소 사용
+
+`<input>` 요소가 있는 양식을 사용하는 것은 모든 브라우저에서 효과적이므로 따를 수 있는 가장 중요한 모범 사례입니다. 이 게시물의 다른 제안이 일부 브라우저에서 효과적이지 않더라도 사용자는 여전히 수동으로 OTP를 입력하고 제출할 수 있습니다.
+
+```html
+<form action="/verify-otp" method="POST">
+  <input type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         pattern="\d{6}"
+         required>
+</form>
+```
+
+다음은 입력 필드가 브라우저 기능을 최대한 활용할 수 있도록 하는 몇 가지 아이디어입니다.
+
+### `type="text"`
+
+OTP는 일반적으로 5자리 또는 6자리 숫자이므로 입력 필드에 `type="number"`를 사용하는 것은 모바일 키보드를 숫자로만 변경하기 때문에 직관적일 수 있습니다. 브라우저는 입력 필드가 예기치 않은 동작을 유발할 수 있는 여러 숫자의 시퀀스가 아니라 셀 수 있는 숫자일 것으로 예상하므로 권장하지 않습니다. `type="number"`를 사용하면 입력 필드 옆에 위쪽 및 아래쪽 버튼이 표시됩니다. 이 버튼을 누르면 숫자가 증가하거나 감소하고 앞의 0을 제거할 수 있습니다.
+
+대신 `type="text"`를 사용하세요. 이렇게 하면 모바일 키보드가 숫자로만 바뀌지는 않지만 `inputmode="numeric"` 사용에 대한 다음 팁이 해당 작업을 수행하기 때문에 괜찮습니다.
+
+### `inputmode="numeric"`
+
+모바일 키보드를 숫자로만 변경 [`inputmode="numeric"`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode)을 사용하세요.
+
+일부 웹사이트는 초점을 맞출 때 모바일 키보드를 숫자(`*` 및 `#`)로만 전환하므로 OTP 입력 필드에 `type="tel"`를 사용합니다. 이 해킹 방법은 과거에 `inputmode="numeric"`이 널리 지원되지 않았을 때 사용되었습니다. <a href="https://github.com/mdn/browser-compat-data/pull/6782" data-md-type="link">Firefox에서 `inputmode="numeric"`</a>을 지원하기 시작했으므로 의미론적으로 부정확한 `type="tel"` 해킹 방법을 사용할 필요가 없습니다.
+
+### `autocomplete="one-time-code"`
+
+개발자는 [`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) 속성을 사용하여 브라우저가 자동 완성 지원을 제공할 수 있도록 권한을 지정할 수 있고 브라우저에 필드에서 예상되는 정보 유형을 알릴 수 있습니다.
+
+`autocomplete="one-time-code"`를 사용하면 양식이 열려 있는 동안 사용자가 SMS 메시지를 수신할 때마다 운영 체제가 SMS의 OTP를 경험적으로 구문 분석하고 키보드는 사용자가 입력할 수 있도록 OTP를 제안합니다. iOS, iPadOS 및 macOS의 Safari 12 이상에서만 사용할 수 있지만 해당 플랫폼에서 SMS OTP 환경을 개선하는 쉬운 방법이므로 이러한 기능을 사용하는 것이 좋습니다.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>실행 중인 `autocomplete="one-time-code"`</figcaption></figure>
+
+`autocomplete="one-time-code"`[는 사용자 경험을 개선하지만 SMS 메시지가 원본 바인딩 메시지 형식을 준수하도록](#format) 하면 더 많은 작업을 수행할 수 있습니다.
+
+{% Aside %} 선택적 속성:
+
+- [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern)은 입력된 OTP가 일치해야 하는 형식을 지정합니다. 정규식을 사용하여 일치하는 패턴을 지정합니다. 예를 들어, `\d{6}`는 OTP를 6자리 문자열로 제한합니다. [더 복잡한 실시간 유효성 검사를 위해JavaScript 사용] (https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)에서 `pattern` 속성에 대해 더 자세히 알아보세요.
+
+- [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)는 필드가 필수임을 나타냅니다.
+
+보다 일반적인 양식 모범 사례는 [Sam Dutton](/authors/samdutton/)의 [로그인 양식 모범 사례](/sign-in-form-best-practices/)를 참조하는 것이 좋습니다. {% endAside %}
+
+## SMS 텍스트 형식 {: #format }
+
+[SMS 사양을 통해 제공되는 원본 바인딩 일회성 코드](https://wicg.github.io/sms-one-time-codes/)를 정렬하여 OTP 입력에 대한 사용자 환경을 개선합니다.
+
+형식 규칙은 간단합니다. `@`가 앞에 오는 수신자 도메인과 `#`이 앞에 오는 OTP로 SMS 메시지를 마칩니다.
+
+예를 들어:
+
+```text
+Your OTP is 123456
+
+@web-otp.glitch.me #123456
+```
+
+OTP 메시지에 표준 형식을 사용하면 OTP 메시지에서 코드를 더 쉽고 안정적으로 추출할 수 있습니다. OTP 코드를 웹사이트와 연결하면 사용자가 악성 사이트에 코드를 제공하도록 속이기가 더 어려워집니다.
+
+{% Aside %} 정확한 규칙은 다음과 같습니다.
+
+- 메시지는 사람이 읽을 수 있는 문자로 시작(선택 사항)하며 하나 이상의 숫자를 사용하고 4~10자의 영숫자 문자열을 포함하되 마지막 줄은 URL 및 OTP를 위해 남겨두어야 합니다.
+- API를 호출한 웹사이트 URL의 도메인 부분 앞에는 `@`이 있어야 합니다.
+- URL에는 OTP가 다음에 오는 파운드 기호("`#`")를 포함해야 합니다.
+
+총 글자 수는 140자를 초과하지 않아야 합니다.
+
+Chrome 관련 규칙에 대한 자세한 내용은 [WebOTP API 게시물의 SMS 메시지 형식](/web-otp/#format) 지정 섹션을 참조하세요. {% endAside %}
+
+이 형식을 사용하면 다음과 같은 몇 가지 이점이 있습니다.
+
+- OTP는 도메인에 바인딩됩니다. 사용자가 SMS 메시지에 지정된 도메인 이외의 도메인에 있는 경우 OTP 제안이 나타나지 않습니다. 이는 또한 피싱 공격 및 잠재적인 계정 도용의 위험을 완화합니다.
+- 브라우저는 이제 미스터리하고 이상한 휴리스틱에 의존하지 않고 OTP를 안정적으로 추출할 수 있습니다.
+
+웹 사이트에서 `autocomplete="one-time-code"` 를 사용하는 경우 iOS 14 이상이 설치된 Safari는 위의 규칙에 따라 OTP를 제안합니다.
+
+{% Aside %} 사용자가 iOS에서와 동일한 iCloud 계정이 설정된 MacOS Big Sur를 사용하는 데스크톱에 있는 경우, iOS 기기에서 수신된 OTP는 데스크톱 Safari에서도 사용할 수 있습니다.
+
+Apple 플랫폼 가용성에 대한 다른 이점과 미묘한 차이를 자세히 알아보려면 [도메인 바운드 코드로 SMS 전달 코드 보안 강화](https://developer.apple.com/news/?id=z0i801mg)를 읽어보세요. {% endAside %}
+
+이 SMS 메시지 형식은 Safari 이외의 브라우저에도 유용합니다. Android의 Chrome, Opera 및 Vivaldi도 WebOTP API를 사용하여 원본 바인딩 일회성 코드 규칙을 지원하지만 `autocomplete="one-time-code"`를 통해서는 지원하지 않습니다.
+
+## WebOTP API 사용
+
+[WebOTP API](https://wicg.github.io/web-otp/)는 SMS 메시지로 수신된 OTP에 대한 액세스를 제공합니다. `transport`에 `sms`가 포함된 `otp` 유형과 함께 [`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get)을 호출하면  웹사이트는 원본 바운딩 일회성 코드를 준수하는 SMS가 전달되고 사용자가 액세스 권한을 부여할 때까지 대기합니다. OTP가 JavaScript로 전달되면 웹 사이트는 이를 양식으로 사용하거나 서버에 직접 게시(POST)할 수 있습니다.
+
+{% Aside 'caution' %} WebOTP API에는 보안 출처(HTTPS)가 필요합니다. {% endAside %}
+
+```js
+navigator.credentials.get({
+  otp: {transport:['sms']}
+})
+.then(otp => input.value = otp.code);
+```
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>실행 중인 WebOTP API.</figcaption></figure>
+
+[WebOTP API로 웹에서 전화번호 인증하기](/web-otp/)에서 WebOTP API 사용 방법을 자세히 알아보거나 다음 스니펫을 복사하여 붙여넣으세요. `<form>` 요소에 `action` 및 `method` 속성이 제대로 설정되어 있는지 확인하세요.)
+
+```js
+// Feature detection
+if ('OTPCredential' in window) {
+  window.addEventListener('DOMContentLoaded', e => {
+    const input = document.querySelector('input[autocomplete="one-time-code"]');
+    if (!input) return;
+    // Cancel the WebOTP API if the form is submitted manually.
+    const ac = new AbortController();
+    const form = input.closest('form');
+    if (form) {
+      form.addEventListener('submit', e => {
+        // Cancel the WebOTP API.
+        ac.abort();
+      });
+    }
+    // Invoke the WebOTP API
+    navigator.credentials.get({
+      otp: { transport:['sms'] },
+      signal: ac.signal
+    }).then(otp => {
+      input.value = otp.code;
+      // Automatically submit the form when an OTP is obtained.
+      if (form) form.submit();
+    }).catch(err => {
+      console.log(err);
+    });
+  });
+}
+```
+
+사진 제공: [Unsplash](https://unsplash.com/photos/mZNRsYE9Qi4)에서 [Jason Leung](https://unsplash.com)
diff --git a/src/site/content/ko/index.11tydata.js b/src/site/content/ko/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/ko/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/ko/index.md b/src/site/content/ko/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/ko/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/ko/ko.11tydata.js b/src/site/content/ko/ko.11tydata.js
new file mode 100644
index 00000000000..888b758a7af
--- /dev/null
+++ b/src/site/content/ko/ko.11tydata.js
@@ -0,0 +1,31 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/ko/lang.js b/src/site/content/ko/lang.js
new file mode 100644
index 00000000000..bd37652e11e
--- /dev/null
+++ b/src/site/content/ko/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'ko',
+  locale: 'ko_KR',
+};
diff --git a/src/site/content/ko/learn-core-web-vitals/index.md b/src/site/content/ko/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/ko/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/ko/learn/css/box-model/box-model.assess.yml b/src/site/content/ko/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/ko/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/ko/learn/css/box-model/index.md b/src/site/content/ko/learn/css/box-model/index.md
new file mode 100644
index 00000000000..4c6427b9d8a
--- /dev/null
+++ b/src/site/content/ko/learn/css/box-model/index.md
@@ -0,0 +1,163 @@
+---
+title: 박스(box) 모델
+description: |2-
+
+  CSS가 표시하는 모든 것은 박스입니다.
+  따라서 CSS Box Model이 작동하는 방식을 이해하는 것은 CSS의 핵심 기반입니다.
+audio:
+  title: 'CSS 팟캐스트   - 001: 박스 모델'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/forR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+다음과 같은 HTML이 있다고 가정해 보겠습니다.
+
+```html
+<p>I am a paragraph of text that has a few words in it.</p>
+```
+
+그런 다음 이에 대해 이 CSS를 작성합니다.
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+콘텐츠가 여러분의 요소에서 벗어나게 되고 너비는 100px이 아닌 142px이 될 것입니다. 왜 그럴까요? 박스 모델은 CSS의 핵심 기반이며, CSS의 작동 방식, CSS의 다른 측면에 의해 CSS가 영향을 받는 방식, 그리고 이를 제어하는 방법(중요함)을 이해하면 보다 예측 가능한 CSS를 작성하는 데 도움이 됩니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRemxN', height: 300 } %}</figure>
+
+CSS를 작성하거나 웹에서 통으로 작업할 때 기억해야 할 정말 중요한 점은 CSS로 표시하는 모든 것이 박스라는 것입니다. `border-radius`을 사용하여 원처럼 보이는 박스이든, 그저 텍스트만 있더라도 모든 것이 박스로 되어 있다는 것을 기억하는 게 중요합니다.
+
+## 콘텐츠 및 크기
+
+박스는 `display` 값, 설정된 치수 및 박스 안에 있는 내용에 따라 다르게 동작합니다. 이러한 콘텐츠는 자식 요소에 의해 생성된 더 많은 수의 박스 또는 일반 텍스트 콘텐츠일 수 있습니다. 어느 쪽이든, 이러한 콘텐츠는 기본적으로 박스의 크기에 영향을 미칩니다.
+
+**외부 크기 조정**을 사용하여 이를 제어하거나 **내부 크기 조정**을 사용하여 콘텐츠 크기를 기반으로 브라우저가 계속 결정하도록 할 수 있습니다.
+
+데모를 사용하여 차이점을 빠르게 살펴보겠습니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' } %} <figcaption> 박스가 외부 크기 조정을 사용하는 경우 박스의 경계를 오버플로하기 전까지 추가할 수 있는 콘텐츠의 양에 제한이 있습니다. 이것은 "awesome"이라는 단어가 오버플로되게 만듭니다.</figcaption></figure>
+
+데모에는 고정된 치수와 두꺼운 테두리가 있는 박스에 "CSS is awesome"라는 단어가 있습니다. 박스에는 너비가 있으며 이는 외부 크기입니다. 이것이 자식 콘텐츠의 크기를 제어합니다. 그런데 이것의 문제는 "awesome"이라는 단어가 박스에 비해 너무 커서 부모 박스의 **테두리 박스** 밖으로 오버플로된다는 것입니다(이에 대한 자세한 내용은 나중에 학습 예정). 이렇게 오버플로되는 현상을 방지하는 한 가지 방법은 `width`를 `min-content`로 설정하여 박스의 크기를 내부 크기로 설정하는 것입니다. `min-content` 키워드는 박스가 콘텐츠(단어 "awesome")의 최소 내부 너비만큼만 넓어지도록 지시합니다. 이렇게 하면 박스가 "CSS is awesome"에 완벽하게 맞게 됩니다.
+
+실제 콘텐츠에 대한 다양한 크기 조정의 영향을 확인하기 위해 더 복잡한 내용을 살펴보겠습니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+내부 크기 조정 토글을 켜고 끄면 외부 크기 조정으로 여러분이 더 많은 제어 권한을 얻을 수 있게 하는 방법과 내부 크기 조정으로 콘텐츠가 더 많은 제어 권한을 갖게 하는 방법을 확인할 수 있습니다. 내부 및 외부 크기 조정의 효과를 확인하려면 카드에 여러 문장의 콘텐츠를 추가합니다. 이 요소가 외부 크기 조정을 사용하는 경우 요소의 경계를 오버플로하기 전까지 추가할 수 있는 콘텐츠의 양에 제한이 있지만 내부 크기 조정토글이 켜져 있는 경우에는 그렇지 않습니다.
+
+기본적으로 이 요소에는 `width`와 `height`가 모두 `400px`로 설정되어 있습니다. 이러한 수치는 요소 내부의 모든 것에 엄격한 경계를 부여하며, 콘텐츠가 박스에 비해 너무 커서 가시적으로 오버플로하는 상황이 발생하지 않는 한 그대로 적용됩니다. 꽃 그림 아래에 여러 줄로 되어 있는 캡션 내용이 박스 높이를 초과하도록 변경하면 이것이 실제로 작동하는 것을 볼 수 있습니다.
+
+{% Aside "key-term" %} 콘텐츠가 박스에 비해 너무 크면 이를 오버플로라고 합니다. `overflow` 속성을 사용하여 요소가 오버플로 콘텐츠를 처리하는 방법을 관리할 수 있습니다. {% endAside %}
+
+기본적으로 이 요소에는 <code>width</code>와 <code>height</code>가 모두 <code>400px</code>로 설정되어 있습니다. 이러한 수치는 요소 내부의 모든 것에 엄격한 경계를 부여하며, 콘텐츠가 박스에 비해 너무 커서 가시적으로 오버플로하는 상황이 발생하지 않는 한 그대로 적용됩니다. 꽃 그림 아래에 여러 줄로 되어 있는 캡션 내용이 박스 높이를 초과하도록 변경하면 이것이 실제로 작동하는 것을 볼 수 있습니다.
+
+## 박스 모델의 영역
+
+박스는 모두 특정 작업을 수행하는 별개의 박스 모델 영역으로 구성되어 있습니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="박스 모델의 네 가지 주요 영역을 보여주는 다이어그램 - 콘텐츠 박스, 패딩 박스, 테두리 박스 및 여백 박스", width="800", height="547" %} <figcaption>박스 모델의 네 가지 주요 영역: 콘텐츠 박스, 패딩 박스, 테두리 박스 및 여백 박스</figcaption></figure>
+
+콘텐츠가 있는 영역인 **콘텐츠 박스**부터 시작합니다. 이전에 배웠듯이 이 콘텐츠는 부모 콘텐츠의 크기를 제어할 수 있으며, 그렇기에 일반적으로 가장 다양한 크기의 영역도 제어합니다.
+
+**패딩 박스**는 콘텐츠 박스를 둘러싸고 있으며 [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding) 속성에 의해 생성된 공간입니다. 패딩이 박스 안에 있기 때문에 박스의 배경을 박스가 만드는 공간에서 볼 수 있습니다. 박스에 `overflow: auto` 또는 `overflow: scroll`과 같은 오버플로 규칙이 설정되어 있으면 스크롤바도 이 공간을 차지하게 됩니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+**테두리 박스**는 패딩 박스를 둘러싸고 있으며 그 공간은 `border` 값으로 채워집니다. 테두리 박스는 박스의 경계이며 **테두리 가장자리**는 시각적으로 볼 수 있는 영역의 한계입니다. <a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a> 속성은 요소를 시각적으로 프레임하는 데 사용됩니다.
+
+마지막 영역인 **여백 박스**는 박스의 `margin` 규칙에 의해 정의된 여러분의 박스 주변의 공간입니다. [`outline`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) 및 [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow)와 같은 속성이 페인트처럼 상단을 칠하며 이 공간을 차지하기에 우리 박스의 크기에 영향을 미치지 않습니다. 박스의 `outline-width`가 `200px`일 수 있으며 테두리 박스를 포함하여 내부의 모든 것이 정확히 같은 크기일 수 있습니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea' } %}</figure>
+
+## 유용한 비유
+
+박스 모델은 이해하기 복잡하므로 배운 내용을 유추를 사용하여 요약해 보겠습니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="Three photo frames", width="800", height="562" %}</figure>
+
+이 다이어그램에는 3개의 사진 프레임이 벽에 나란히 걸려 있습니다. 다이어그램에는 프레임의 요소를 박스 모델과 연결하는 레이블이 있습니다.
+
+이 비유를 나누어 분석하면:
+
+- 콘텐츠 박스는 작품입니다.
+- 패딩 박스는 프레임과 작품 사이에 있는 흰색 매트입니다.
+- 테두리 박스는 작품에 기본적인 테두리를 제공하는 프레임입니다.
+- 여백 박스는 각 프레임 사이의 공간입니다.
+- 그림자는 여백 박스와 같이 공간을 차지합니다.
+
+## 박스 모델 디버깅
+
+브라우저 DevTools는 선택한 박스의 박스 모델 계산에 대한 시각화를 제공하여 박스 모델이 작동하는 방식과 작업 중인 웹 사이트에 미치는 영향(중요함)을 이해하는 데 도움이 됩니다.
+
+계속해서 여러분의 브라우저에서 다음을 시도합니다.
+
+1. [개발자 도구 열기](https://developer.chrome.com/docs/devtools/open/)
+2. [요소 선택](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. 박스 모델 디버거 표시
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## 박스 모델 제어
+
+박스 모델을 제어하는 방법을 이해하려면 먼저 브라우저에서 어떤 일이 발생하는지 이해해야 합니다.
+
+모든 브라우저는 HTML 문서에 사용자 에이전트 스타일시트를 적용합니다. 사용되는 CSS는 브라우저마다 다르지만 콘텐츠를 더 쉽게 읽을 수 있도록 합리적인 기본값을 제공합니다. CSS가 정의되지 않은 경우 요소의 모양과 동작을 정의합니다. `display`가 설정되는 곳도 사용자 에이전트 스타일입니다. 예를 들어 일반적인 상황에서 `<div>` 요소의 기본 `display` 값은 `block`이고, `<li>`의 기본 `display` 값은 `list-item`이며, `<span>`의 기본 `display` 값은 `inline` 입니다.
+
+`inline` 요소에는 블록 여백이 있지만, 다른 요소는 이를 따르지 않습니다. `inline-block`을 사용하면 해당 요소는 블록 여백을 따르지만 요소는 `inline` 요소와 동일한 동작을 대부분 유지합니다. `block` 항목은 기본적으로 사용 가능한 **inline space**를 채우는 반면 `inline` 및 `inline-block` 요소는 콘텐츠만큼만 커집니다.
+
+사용자 에이전트 스타일이 각 박스에 미치는 영향에 대한 이해와 함께 박스 크기 계산 방법을 알려주는 `box-sizing`도 이해해야 합니다. 기본적으로 모든 요소에는 `box-sizing: content-box;`와 같은 사용자 에이전트 스타일이 있습니다.
+
+`content-box`를 `box-sizing`의 값으로 갖는 것은 `width` 및 `height`와 같은 치수를 설정할 때 이러한 설정이 **content box**에 적용된다는 것을 의미합니다. 그런 다음 `padding` 및 `border`를 설정하면 이러한 값이 콘텐츠 박스의 크기에 추가됩니다.
+
+{% Assessment 'box-model' %}
+
+이 박스의 실제 너비는 260px입니다. CSS는 기본 `box-sizing: content-box`를 사용하기 때문에 적용되는 너비는 콘텐츠의 너비이며 `padding`과 `border`가 양쪽에 추가됩니다. 따라서 콘텐츠 200px + 패딩 40px + 테두리 20px로 총 260px의 가시 너비를 만듭니다.
+
+하지만 대체 박스 모델인 `border-box`를 사용하도록 다음과 같이 수정하면 이를 제어하는 것이 *가능*합니다.
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+다음 대화식 데모에서 이것이 어떻게 작동하는지 확인하십시오. `box-sizing` 값을 토글하면 우리의 박스 <em>내부</em>에서 적용되는 CSS가 파란색 배경으로 표시됩니다.
+
+다음 대화식 데모에서 이것이 어떻게 작동하는지 확인하십시오. `box-sizing` 값을 토글하면 우리의 박스 *내부*에서 적용되는 CSS가 파란색 배경으로 표시됩니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+이 CSS 규칙은 문서와 모든 `::before` 및 `::after` 의사 요소에서 모든 요소를 선택하고 `box-sizing: border-box`를 적용합니다. 이것은 이제 모든 요소가 이 대체 박스 모델을 갖게 됨을 의미합니다.
+
+대체 박스 모델이 더 예측 가능하기 때문에 개발자는 종종 이 규칙을 [이와 같은](https://piccalil.li/blog/a-modern-css-reset) 재설정 및 노멀라이저에 추가합니다.
+
+## 리소스
+
+- [박스 모델 소개](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [브라우저 개발자 도구란 무엇입니까?](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### 사용자 에이전트 스타일시트
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/ko/learn/css/css.11tydata.js b/src/site/content/ko/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/ko/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/ko/learn/css/flexbox/conclusion.assess.yml b/src/site/content/ko/learn/css/flexbox/conclusion.assess.yml
new file mode 100644
index 00000000000..77e1b54b62a
--- /dev/null
+++ b/src/site/content/ko/learn/css/flexbox/conclusion.assess.yml
@@ -0,0 +1,61 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To vertically align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Nice"
+      - content: "justify keywords"
+        rationale: "Sorry"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: To horizonally align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Sorry"
+      - content: "justify keywords"
+        rationale: "Nice"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: |
+      By default, flex items are aligned to `stretch`. If you want content
+      size used for child items, which of the following styles would you use?
+    options:
+      - content: "`justify-content: flex-start`"
+        rationale: "The justify property is for horizontal alignment, not
+        vertical."
+      - content: "`align-content: start`"
+        rationale: "`content` aligns flex lines, not child item alignment."
+      - content: "`height: auto`"
+        rationale: "This will have no effect."
+      - content: "`align-items: flex-start`"
+        rationale: "Yes, we want to vertically align them to the 'top' or start,
+        which removes the default stretch value and instead uses the content
+        height."
diff --git a/src/site/content/ko/learn/css/flexbox/flex.assess.yml b/src/site/content/ko/learn/css/flexbox/flex.assess.yml
new file mode 100644
index 00000000000..a264d9e9016
--- /dev/null
+++ b/src/site/content/ko/learn/css/flexbox/flex.assess.yml
@@ -0,0 +1,40 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The default `flex-direction` is
+    options:
+      - content: "`row`"
+        rationale: "By default, flexbox will fit items into a row, lining them
+        up at the start. With wrapping turned on, it will continue creating rows
+        for children to flow within."
+      - content: "`column`"
+        rationale: "Setting flex-direction to column is a great way to stack
+        elements, but it is not the default value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default, a flex container wraps children.
+    options:
+      - content: "true"
+        rationale: "Wrapping must be enabled."
+      - content: "false"
+        rationale: "Use `flex-wrap: wrap` with `display: flex` to wrap children"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: A flex child item appears squished, which flex property helps mitigate this?
+    options:
+      - content: "`flex-grow`"
+        rationale: "This property describes if elements can grow beyond a basis
+        size, not how it should behave under a basis."
+      - content: "`flex-shrink`"
+        rationale: "Yes, this property describes how to handle sizing if the
+        width is going below the basis."
+      - content: "`flex-basis`"
+        rationale: "This provides the starting point of sizing, but not how to
+        handle sizing scenarios where width goes below basis, like in a squished
+        scenario."
diff --git a/src/site/content/ko/learn/css/flexbox/index.md b/src/site/content/ko/learn/css/flexbox/index.md
new file mode 100644
index 00000000000..3d7854a251e
--- /dev/null
+++ b/src/site/content/ko/learn/css/flexbox/index.md
@@ -0,0 +1,374 @@
+---
+title: Flexbox
+description: Flexbox는 1차원으로 항목 그룹을 배치하도록 설계된 레이아웃 메커니즘입니다. 이 모듈에서 사용 방법을 알아보세요.
+audio:
+  title: 'CSS 팟캐스트   - 010: Flexbox'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-21
+---
+
+반응형 디자인에서 까다로울 수 있는 디자인 패턴은 일부 콘텐츠와 함께 인라인으로 배치되는 사이드바입니다. 뷰포트 공간이 있는 곳에서 이 패턴은 훌륭하게 작동하지만 좁은 공간에서는 고정 레이아웃이 문제가 될 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'poRENWv', height: 420 } %}
+
+플렉서블 박스 레이아웃 모델(Flexbox)은 1차원 콘텐츠용으로 설계된 레이아웃 모델입니다. 크기가 다른 여러 항목을 가져와서 해당 항목에 가장 적합한 레이아웃을 반환하는 데 탁월합니다.
+
+Flexbox는 이 사이드바 패턴에 대한 이상적인 레이아웃 모델입니다. Flexbox는 사이드바와 콘텐츠를 인라인으로 배치하는 데 도움이 될 뿐만 아니라 남은 공간이 충분하지 않은 경우 사이드바가 새 줄로 나뉩니다. Flexbox를 사용하면 브라우저가 따라야 하는 고정 치수를 설정하는 대신 콘텐츠가 표시되는 방식을 조언하는 유연한 경계를 제공할 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'xxgERMp', height: 400 } %}
+
+## 플렉스 레이아웃으로 무엇을 할 수 있나요?
+
+플렉스 레이아웃에는 이 가이드에서 탐색할 수 있는 다음과 같은 기능이 있습니다.
+
+- 행 또는 열로 표시할 수 있습니다.
+- 문서의 쓰기 모드를 존중합니다.
+- 기본적으로 한 줄이지만 여러 줄로 줄 바꿈하도록 요청할 수 있습니다.
+- 레이아웃의 항목이 DOM의 순서와 다르게 시각적으로 재정렬될 수 있습니다.
+- 공간이 항목 내부에 분산될 수 있으므로 상위 항목의 사용 가능한 공간에 따라 더 커지고 작아집니다.
+- 상자 정렬 속성을 사용하여 래핑된 레이아웃의 항목 및 플렉스 라인 주위에 공간을 분배할 수 있습니다.
+- 항목 자체를 교차 축에 정렬할 수 있습니다.
+
+## 주축과 교차 축
+
+Flexbox를 이해하려면 주 축과 교차 축의 개념을 이해해야 합니다. 주 축은 `flex-direction` 속성으로 설정한 축입니다. `row`인 경우 여러분의 주 축은 행을 따르며, `column`인 경우 여러분의 주 축은 열을 따릅니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/xKtf0cHRw0xQyiyYuuyz.svg", alt="나란히 있는 세 개의 상자, 왼쪽에서 오른쪽으로 가리키는 화살표가 존재하며 화살표에는 '주 축'이라는 표시가 있음.", width="800", height="320" %}</figure>
+
+플렉스 항목은 주 축에서 그룹으로 이동합니다. 기억하기: 우리는 많은 것을 가지고 있으며 우리는 그것들을 위한 최상의 레이아웃을 그룹으로 얻으려고 노력하고 있습니다.
+
+교차 축은 주 축과 다른 방향으로 실행되므로 `flex-direction`이 `row`인 경우 교차 축은 열을 따라 실행됩니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/5wCsZcBmK5L33LS7nOmP.svg", alt="나란히 있는 세 개의 상자, 왼쪽에서 오른쪽으로 가리키는 화살표가 존재하며 화살표에는 '주 축'이라는 표시가 있음. 위에서 아래로 향하고 있는 화살표가 하나 더 있으며 이것에는 '교차 축'이라는 표시가 있음.", width="800", height="320" %}</figure>
+
+교차 축에서는 두 가지 작업을 수행할 수 있습니다. 항목을 개별적으로 또는 그룹으로 이동하여 서로 및 플렉스 컨테이너에 대해 정렬할 수 있습니다. 또한 플렉스 라인을 래핑한 경우 해당 라인에 공간을 할당하는 방식을 제어하기 위해 이러한 라인을 그룹으로 처리할 수 있습니다. 이 가이드 전체를 통해 이 모든 것이 실제로 어떻게 작동하는지 볼 수 있습니다. 지금은 주 축이 `flex-direction`을 따른다는 점을 명심하세요.
+
+## 플렉스 컨테이너 만들기
+
+크기가 다른 항목 그룹을 가져오고 Flexbox를 사용하여 이를 배치하여 Flexbox가 어떻게 작동하는지 알아봅니다.
+
+```html
+<div class="container" id="container">
+  <div>One</div>
+  <div>Item two</div>
+  <div>The item we will refer to as three</div>
+</div>
+```
+
+Flexbox를 사용하려면 일반 블록 및 인라인 레이아웃이 아닌 플렉스 서식 컨텍스트를 사용할 것을 선언해야 합니다. 이렇게 하려면 `display` 속성을 `flex`로 변경합니다.
+
+```css
+.container {
+  display: flex;
+}
+```
+
+[레이아웃 가이드](/learn/css/layout)에서 배웠듯이 이것은 플렉스 항목의 하위 항목이 있는 블록 수준 상자를 제공합니다. 플렉스 항목은 **초기 값**을 사용하여 일부 Flexbox 동작을 즉시 나타내기 시작합니다.
+
+{% Aside %} 모든 CSS 속성에는 초기 동작을 변경하기 위해 CSS를 적용하지 않았을 때 "즉시" 동작하는 방식을 제어하는 초기 값이 있습니다. 플렉스 컨테이너의 하위 항목은 상위 항목이 `display: flex`를 가져오는 즉시 플렉스 항목이 되므로 이러한 초기 값은 일부 Flexbox 동작을 보기 시작한다는 것을 의미합니다. {% endAside %}
+
+초기 값은 다음을 의미합니다.
+
+- 항목이 행으로 표시됩니다.
+- 래핑하지 않습니다.
+- 컨테이너를 채우기 위해 크기가 확대되지 않습니다.
+- 컨테이너의 시작 부분에 줄을 맞춥니다.
+
+## 항목의 방향 제어
+
+아직 `flex-direction` 속성을 추가하지 않았지만 `flex-direction`의 초기 값이 `row`이므로 항목이 행으로 표시됩니다. 여러분이 원하는 것이 행이라면 속성을 추가할 필요가 없습니다. 방향을 변경하려면 속성과 다음 네 가지 값 중 하나를 추가합니다.
+
+- `row` : 항목이 행으로 배치됩니다.
+- `row-reverse:` 항목이 플렉스 컨테이너의 끝에서 행으로 배치됩니다.
+- `column` : 항목이 열로 배치됩니다.
+- `column-reverse` : 항목이 플렉스 컨테이너의 끝에서 열로 배치됩니다.
+
+아래 데모에서 우리의 항목 그룹을 사용하여 모든 값을 시험해 볼 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgKNXq' } %}
+
+### 항목 및 접근성의 흐름 리버싱
+
+접근성에 부정적인 영향을 줄 수 있으므로 HTML 문서의 순서와 다르게 시각적 표시를 재정렬하는 속성을 사용할 때는 주의해야 합니다. `row-reverse`와 `column-reverse` 값은 이에 대한 좋은 예시입니다. 재정렬은 논리적 순서가 아닌 시각적 순서에 대해서만 발생합니다. 논리적인 순서는 화면 읽기 프로그램이 내용을 읽고 키보드를 사용하여 탐색하는 모든 사람이 따르는 순서이기에 이를 이해하는 것이 중요합니다.
+
+다음 동영상에서 반전된 열 레이아웃에서 키보드 탐색이 시각적 표시가 아닌 DOM을 따라갈 때 링크 간의 탭 이동이 어떻게 끊어지는지 확인할 수 있습니다.
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4", autoplay=true, controls=true %}
+
+Flexbox 또는 그리드의 항목 순서를 변경할 수 있는 모든 것이 이러한 문제를 일으킬 수 있습니다. 따라서 모든 재정렬에는 일부 사람들이 재정렬로 인해 여러분의 사이트를 사용하기 어렵게 되지 않는지 확인하는 철저한 테스트가 포함되어야 합니다.
+
+자세한 내용은 다음을 참조합니다.
+
+- [콘텐츠 재정렬](/content-reordering/)
+- [Flexbox 및 키보드 탐색 연결 끊김](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+
+### 쓰기 모드 및 방향
+
+Flex 항목은 기본적으로 행으로 배치됩니다. 여러분의 쓰기 모드와 스크립트 방향에서 문장이 진행되는 방향으로 행이 실행됩니다. 즉, 오른쪽에서 왼쪽(rtl) 스크립트 방향을 가진 아랍어로 작업하는 경우 항목이 오른쪽에 정렬됩니다. 탭 순서도 아랍어로 문장을 읽는 방식을 따르므로 오른쪽에서 시작됩니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZgwWN' } %}
+
+일부 일본어 서체와 같은 세로 쓰기 모드로 작업하는 경우 행은 위에서 아래로 세로로 실행됩니다. 세로 쓰기 모드를 사용하는 이 데모에서 `flex-direction`을 변경해보세요.
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRaPXX', height: 600 } %}
+
+따라서 플렉스 항목이 기본적으로 동작하는 방식은 문서의 쓰기 모드와 연결되어 있습니다. 대부분의 튜토리얼은 영어, 또는 가로로 왼쪽에서 오른쪽 쓰기 모드를 사용하여 작성됩니다. 이렇게 하면 플렉스 항목이 **왼쪽에** 정렬되고 **가로로** 실행된다고 쉽게 가정할 수 있습니다.
+
+주 축과 교차 축에 더해 쓰기 모드 사용을 고려하면 우리가 Flexbox에서 위, 아래, 왼쪽, 오른쪽보다 **시작**과 **끝**을 이야기한다는 사실이 더 이해하기 쉬울 것입니다. 각 축에는 시작과 끝이 있습니다. 주 축의 시작은 **main-start**로 참조됩니다. 따라서 우리의 플렉스 항목은 처음에 main-start부터 정렬됩니다. 해당 축의 끝은 **main-end**입니다. 교차 축의 시작은 **cross-start**이며 끝은 **cross-end**입니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg", alt="위 용어의 레이블이 지정된 다이어그램", width="800", height="382" %}
+
+## 플렉스 항목 래핑
+
+`flex-wrap` 속성의 초기 값은 `nowrap`입니다. 즉, 컨테이너에 공간이 충분하지 않으면 항목이 오버플로됩니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/VTUdLS9PeBziBvbOSc4q.jpg", alt="내부에 9개의 항목이 있는 플렉스 컨테이너. 항목이 축소되어 한 단어가 줄에 표시되지만 나란히 표시할 공간이 충분하지 않아 플렉스 항목이 컨테이너 상자 밖으로 확장됨.", width="800", height="282" %} <figcaption> 최소 콘텐츠 크기에 도달하면 플렉스 항목이 컨테이너를 오버플로하기 시작합니다. </figcaption></figure>
+
+초기 값을 사용하여 표시되는 항목은 오버플로가 발생하기 전에 `min-content` 크기까지 최대한 작게 축소됩니다.
+
+항목이 래핑되도록 하려면 플렉스 컨테이너에 `flex-wrap: wrap`을 추가합니다.
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'WNRGdNZ', height: 601 } %}
+
+플렉스 컨테이너가 래핑되면 여러 **플렉스 라인**이 생성됩니다. 공간 분배 측면에서 각 라인은 새로운 플렉스 컨테이너처럼 작동합니다. 따라서 행을 래핑하는 경우 행 2의 항목을 행 1의 상위 항목과 정렬할 수 없습니다. 이것이 Flexbox가 1차원이라고 하는 의미입니다. 하나의 축, 행 또는 열에서 정렬을 제어할 수 있으며 그리드에서 할 수 있는 것처럼 둘 다 함께 제어할 수는 없습니다.
+
+### 플렉스 플로우 줄임 속성
+
+`flex-flow` 줄임 속성을 사용하여 `flex-direction` 및 `flex-wrap` 속성을 설정할 수 있습니다. 예를 들어 `flex-direction`을 `column`으로 설정하고 항목이 래핑되도록 하려면 다음을 수행합니다.
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+## 플렉스 항목 내부 공간 제어하기
+
+우리 컨테이너에 항목을 표시하는 데 필요한 공간보다 더 많은 공간이 있다고 가정할 경우 항목이 처음에 정렬된 후 공간을 채우기 위해 확대되지 않습니다. 최대 콘텐츠 크기에서 항목의 확대가 멈춥니다. 이는 `flex-` 속성의 초기 값이 다음과 같기 때문입니다.
+
+- `flex-grow: 0`: 아이템이 확대되지 않습니다.
+- `flex-shrink: 1`: 항목이 `flex-basis`보다 작게 축소될 수 있습니다.
+- `flex-basis: auto`: 항목의 기본 크기는 `auto`입니다.
+
+이는 `flex: initial`의 키워드 값으로 나타낼 수 있습니다. `flex` 줄임 속성 또는 `flex-grow`, `flex-shrink` 및 `flex-basis`의 보통 속성이 플렉스 컨테이너의 하위 항목에 적용됩니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'LYxRebE' } %}
+
+큰 항목이 작은 항목보다 더 많은 공간을 갖도록 허용하면서 항목이 확대되도록 하려면 `flex:auto`를 사용합니다. 위의 데모를 사용하여 시도해 볼 수 있습니다. 이렇게 하면 속성이 다음과 같이 설정됩니다.
+
+- `flex-grow: 1`: 항목이 `flex-basis`보다 확대될 수 있습니다.
+- `flex-shrink: 1`: 항목이 `flex-basis`보다 작게 축소될 수 있습니다.
+- `flex-basis: auto`: 항목의 기본 크기는 `auto`입니다.
+
+`flex: auto`를 사용하면 각 항목이 최대 콘텐츠 크기로 배치된 *후에* 항목 간에 공유되는 공간이 공유되므로 항목의 크기가 서로 달라집니다. 따라서 큰 항목은 더 많은 공간을 갖습니다. 모든 항목을 일관된 크기로 만들고 콘텐츠 크기를 무시하려면 데모에서 `flex:auto`를 `flex: 1`로 변경합니다.
+
+이것은 다음 기능을 해제합니다.
+
+- `flex-grow: 1`: 항목이 `flex-basis`보다 확대될 수 있습니다.
+- `flex-shrink: 1`: 항목이 `flex-basis`보다 작게 축소될 수 있습니다.
+- `flex-basis: 0`: 항목의 기본 크기는 `0`입니다.
+
+`flex: 1`을 사용하면 모든 항목의 크기가 0이므로 플렉스 컨테이너의 모든 공간을 분배할 수 있습니다. 모든 항목의 `flex-grow` 인자가 `1`이므로 모두 동일한 크기로 확대되고 공간을 동일하게 공유합니다.
+
+{% Aside %} 여기에는 `flex: none` 값도 있으며 이는 확대되거나 축소되지 않아 유연하지 않은 항목을 제공합니다. 이는 여러분이 Flexbox만 사용하여 정렬 속성에 액세스하지만 유연한 동작을 원하지 않는 경우에 유용할 수 있습니다. {% endAside %}
+
+### 항목이 다른 비율로 확대되도록 허용하기
+
+모든 항목에 `flex-grow` 인자를 `1`로 지정할 필요는 없습니다. 여러분의 플렉스 항목에 다른 `flex-grow` 인자를 부여할 수도 있습니다. 아래 데모에서 첫 번째 항목에는 `flex: 1`, 두 번째 항목에는 `flex: 2`, 세 번째 항목에는 `flex: 3`이 있습니다. 이러한 항목이 `0`에서부터 확대됨에 따라 플렉스 컨테이너의 사용 가능한 공간은 6개로 공유됩니다. 첫 번째 항목에 한 부분, 두 번째 항목에 두 부분, 세 번째 항목에 세 부분이 제공됩니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWRzEz' } %}
+
+세 개의 값을 지정해야 하지만 `auto`의 `flex-basis`부터 시작하며 동일한 작업을 수행할 수 있습니다. 첫 번째 값은 `flex-grow`, 두 번째 값은 `flex-shrink`, 세 번째 값은 `flex-basis`입니다.
+
+```css
+.item1 {
+  flex: 1 1 auto;
+}
+
+.item2 {
+  flex: 2 1 auto;
+}
+```
+
+`auto`의 `flex-basis`를 사용하는 이유는 브라우저가 공간 분배를 파악할 수 있도록 하기 위함이기 때문에 이는 덜 일반적인 사용 사례입니다. 여러분이 알고리즘이 결정하는 것보다 항목을 조금 더 확대하고 싶다면 이러한 설정이 유용할 수 있습니다.
+
+## 플렉스 항목 재정렬
+
+플렉스 컨테이너의 항목을 `order` 속성을 사용하여 재정렬할 수 있습니다. 이 속성을 사용하면 **서수 그룹**의 항목 순서를 지정할 수 있습니다. 항목은 `flex-direction`이 지시하는 방향으로 가장 낮은 값부터 먼저 배치됩니다. 둘 이상의 항목에 동일한 값이 있는 경우 해당 값을 가진 다른 항목과 함께 표시됩니다.
+
+아래 예시는 이 순서를 보여줍니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdRXoL' } %}
+
+{% Aside 'warning' %} `order`를 사용하면 `flex-direction`의 `row-reverse` 및 `column-reverse` 값과 동일한 문제가 발생합니다. 일부 사용자를 위해 연결이 해제된 경험을 만드는 것은 매우 쉬울 것입니다. 여러분은 문서에서 순서가 잘못된 것을 수정하고 있으므로 `order`를 사용하지 않아야 합니다. 항목이 논리적으로 다른 순서로 있어야 하는 경우 HTML을 변경하세요! {% endAside %}
+
+{% Assessment 'flex' %}
+
+## Flexbox 정렬 개요
+
+Flexbox는 항목을 정렬하고 항목 사이에 공간을 분배하기 위해 속성 세트를 가져왔습니다. 이러한 속성은 매우 유용하여 이후 자체 사양으로 이동되었으며 그리드 레이아웃에서도 이러한 속성을 볼 수 있습니다. 여기에서 Flexbox를 사용할 때 작동 방식을 확인할 수 있습니다.
+
+속성 집합은 공간 분배 속성 및 정렬 속성의 두 그룹으로 나눌 수 있습니다. 공간을 분배하는 속성은 다음과 같습니다.
+
+- `justify-content`: 주 축의 공간 분배.
+- `align-content`: 교차 축의 공간 분배.
+- `place-content`: 위의 두 속성을 모두 설정하기 위한 줄임 속성.
+
+Flexbox에서 정렬에 사용되는 속성:
+
+- `align-self`: 교차 축에 단일 항목을 정렬.
+- `align-items`: 모든 항목을 교차 축에 그룹으로 정렬.
+
+주 축에서 작업하는 경우 속성은 `justify-`로 시작합니다. 교차 축에서는 `align-`으로 시작합니다.
+
+## 주 축에 공간 분배하기
+
+앞에서 사용한 HTML을 사용할 경우 플렉스 항목이 행으로 배치되며 주 축에 공간이 생깁니다. 항목은 플렉스 컨테이너를 완전히 채울 만큼 크지 않습니다. `justify-content`의 초기 값이 `flex-start`이기 때문에 항목이 플렉스 컨테이너의 시작 부분에 정렬됩니다. 항목은 시작 부분에 정렬되며 추가 공간은 끝부분에 정렬됩니다.
+
+`justify-content` 속성을 플렉스 컨테이너에 추가하고 여기에 `flex-end` 값을 지정하면 항목이 컨테이너 끝에 정렬되고 여유 공간은 시작 부분에 배치됩니다.
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+
+`justify-content: space-between`을 사용하여 항목 사이의 공간을 분배할 수도 있습니다.
+
+데모의 값 중 일부를 시험해보고, 가능한 값의 전체 집합은 [MDN을 참조](https://developer.mozilla.org/docs/Web/CSS/justify-content)하세요.
+
+{% Codepen { user: 'web-dot-dev', id: 'JjERpGb' } %}
+
+{% Aside %} `justify-content` 속성이 모든 작업을 수행하려면 주 축의 컨테이너에 여유 공간이 있어야 합니다. 여러분의 항목이 축을 채우면 공유할 공간이 없으므로 속성이 아무 작업도 수행하지 않습니다. {% endAside %}
+
+### `flex-direction: column` 사용하기
+
+`flex-direction`을 `column`으로 변경한 경우 `justify-content`가 해당 열에서 작동합니다. 열로 작업할 때 컨테이너에서 여유 공간을 확보하려면 여러분의 컨테이너에 `height` 또는 `block-size`를 지정해야 합니다. 그렇지 않으면 배포할 여유 공간이 없게 됩니다.
+
+이번에는 Flexbox 열 레이아웃으로 다른 값을 시도해보세요.
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgwLgz', height: 600 } %}
+
+## 플렉스 라인 사이의 공간 분배
+
+래핑된 플렉스 컨테이너를 사용하면 교차 축에 분배할 공간을 가질 수 있습니다. 이 경우 `justify-content`와 동일한 값으로 `align-content` 속성을 사용할 수 있습니다. 기본적으로 항목을 `flex-start`에 정렬하는 `justify-content`와 달리 `align-content`의 초기 값은 `stretch`입니다. 기본 동작을 변경하려면 `align-content` 속성을 플렉스 컨테이너에 추가합니다.
+
+```css
+.container {
+  align-content: center;
+}
+```
+
+데모에서 이것을 시도해봅니다. 이 예시에서는 플렉스 항목의 줄이 래핑되어 있으며 컨테이너에는 여유 공간을 확보하기 위한 `block-size`가 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'poREawo' } %}
+
+### `place-content` 줄임 속성
+
+`justify-content`와 `align-content`를 모두 설정하려면 하나 또는 두 개의 값과 함께 `place-content`를 사용할 수 있습니다. 첫 번째 값은 `align-content`에 사용되고 두 번째 값은 `justify-content`에 사용되도록 지정하면 두 축 모두에 단일 값이 사용됩니다.
+
+```css
+.container {
+  place-content: space-between;
+  /* sets both to space-between */
+}
+
+.container {
+  place-content: center flex-end;
+  /* wrapped lines on the cross axis are centered,
+  on the main axis items are aligned to the end of the flex container */
+}
+```
+
+## 교차 축에 항목 정렬하기
+
+교차 축에서 여러분은 `align-items`와 `align-self`를 사용하여 플렉스 라인 내에서 항목을 정렬할 수도 있습니다. 이 정렬에 사용할 수 있는 공간은 플렉스 컨테이너의 높이에 따라 다르며 래핑된 항목 집합의 경우에는 플렉스 라인에 따라 다릅니다.
+
+`align-self`의 초기 값은 `stretch`이며, 이것이 한 행의 플렉스 항목이 기본적으로 가장 높은 항목의 높이까지 늘어나는 이유가 됩니다. 이를 변경하려면 여러분의 플렉스 항목에 `align-self` 속성을 추가합니다.
+
+```css
+.container {
+  display: flex;
+}
+
+.item1 {
+  align-self: flex-start;
+}
+```
+
+다음 값 중 하나를 사용하여 항목을 정렬합니다.
+
+- `flex-start`
+- `flex-end`
+- `center`
+- `stretch`
+- `baseline`
+
+[MDN의 전체 값 목록](https://developer.mozilla.org/docs/Web/CSS/align-self)을 참조하세요.
+
+다음 데모에는 `flex-direction: row`가 있는 단일 라인의 플렉스 항목이 있습니다. 마지막 항목은 플렉스 컨테이너의 높이를 정의합니다. 첫 번째 항목에는 값이 `flex-start`인 `align-self` 속성이 있습니다. 해당 속성의 값을 변경하여 교차 축의 공간 내에서 속성이 어떻게 움직이는지 확인합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'RwKGQee', height: 600 } %}
+
+`align-self` 속성이 개별 항목에 적용됩니다. `align-items` 속성을 플렉스 컨테이너에 적용하여 모든 개별 `align-self` 속성을 그룹으로 설정할 수 있습니다.
+
+```css
+.container {
+  display: flex;
+  align-items: flex-start;
+}
+```
+
+다음 데모에서는 `align-items` 값을 변경하여 교차 축의 모든 항목을 그룹으로 정렬해 봅니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdKmby', height: 600 } %}
+
+## Flexbox에 justify-self가 없는 이유는 무엇인가요?
+
+Flex 항목은 주 축에서 그룹으로 작동합니다. 따라서 해당 그룹에서 개별 항목을 분리하는 개념이 없습니다.
+
+그리드 레이아웃에서 `justify-self` 및 `justify-items` 속성은 인라인 축에서 작동하여 그리드 영역 내의 해당 축에 항목을 정렬하는 작업을 수행합니다. 플렉스 레이아웃이 항목을 그룹으로 취급하는 방식으로 인해 이러한 속성은 플렉스 컨텍스트에서 구현되지 않습니다.
+
+Flexbox가 자동 여백과 매우 잘 작동한다는 것을 아는 것은 가치가 있습니다. 그룹에서 한 항목을 분리하거나 그룹을 두 그룹으로 분리해야 하는 경우 여백을 적용하여 이를 수행할 수 있습니다. 아래 예시에서 마지막 항목의 왼쪽 여백은 `auto`입니다. 자동 여백은 적용된 방향의 모든 공간을 흡수합니다. 즉, 항목을 오른쪽으로 밀어 그룹을 분할합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'poRELbR' } %}
+
+## 항목을 세로와 가로 가운데에 정렬하는 방법
+
+정렬 속성을 사용하여 다른 상자 안의 가운데에 항목을 배치할 수 있습니다. `justify-content` 속성은 주 축에 항목을 행으로 정렬합니다. 교차 축은 `align-items` 속성을 사용합니다.
+
+```css
+.container {
+  width: 400px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+{% Aside %} 미래에는 상위 항목을 플렉스 컨테이너로 만들 필요 없이 이 정렬을 수행할 수 있을 것입니다. 블록 및 인라인 레이아웃에 대해 정렬 속성이 지정됩니다. 현재 어떤 브라우저도 이를 구현하지 않았습니다. 그러나 플렉스 서식 컨텍스트로 전환하면 속성에 액세스할 수 있습니다. 무언가를 정렬해야 하는 경우 이를 수행하는 것이 좋습니다. {% endAside %}
+
+{% Assessment 'conclusion' %}
+
+## 참고 자료
+
+- [MDN CSS Flexible Box Layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)에는 예시와 함께 일련의 자세한 가이드가 포함되어 있습니다.
+- [Flexbox를 위한 CSS 트릭 가이드](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Flexbox Flex 컨테이너를 생성하면 어떻게 되나요?](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [Flexbox의 정렬에 대해 알아야 할 모든 것](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [저 Flexible Box는 얼마나 큰가요?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [Flexbox 사용 사례](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
diff --git a/src/site/content/ko/learn/css/grid/grid.assess.yml b/src/site/content/ko/learn/css/grid/grid.assess.yml
new file mode 100644
index 00000000000..95fff379b88
--- /dev/null
+++ b/src/site/content/ko/learn/css/grid/grid.assess.yml
@@ -0,0 +1,95 @@
+setLeader: Test your knowledge of grid
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,5,6"
+    stem: Which of the following are CSS grid terms?
+    options:
+      - content: "lines"
+        rationale: "The grid is divided by these horizontal and vertically
+        running separators."
+      - content: "circles"
+        rationale: "Sorry, no concepts of circles in CSS grid."
+      - content: "cells"
+        rationale: "A single intersection of a row and a column creates a grid cell."
+      - content: "areas"
+        rationale: "Multiple cells together."
+      - content: "trains"
+        rationale: "Sorry, no concepts of trains in CSS grid."
+      - content: "gaps"
+        rationale: "The space between cells."
+      - content: "tracks"
+        rationale: "A single row or a column is a track in the grid."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      main {
+        display: grid;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the default layout direction of a grid?
+    options:
+      - content: Rows
+        rationale: "Without any columns defined, grid children lay out in the
+        block direction as they normally would."
+      - content: Columns
+        rationale: "If `grid-auto-flow: column` was present, than a grid would
+        layout as columns."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the difference between `auto-fit` and `auto-fill`?
+    options:
+      - content: "`auto-fit` will stretch cells to fit the container, where
+      `auto-fill` won't."
+        rationale: "`auto-fill` places as many items into the template as
+        possible, without stretching. Fit **makes** them fit."
+      - content: "`auto-fit` will stretch a container to fit the children, where
+      `auto-fill` makes the children fit to the container."
+        rationale: "This is not how these properties behave."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is `min-content`?
+    options:
+      - content: "Same as 0%"
+        rationale: "0% is a relative value of the parent box, while
+        `min-content` is relative to the words and images in the box."
+      - content: "The smallest letter"
+        rationale: "While there is a smallest letter, letters are not what
+        `min-content` is refering to."
+      - content: "The longest word or image."
+        rationale: "In the phrase 'CSS is awesome', the word awesome would be
+        the `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is `max-content`?
+    options:
+      - content: "The longest sentence or biggest image."
+        rationale: "This is the maximum size the content of the box is asking
+        for or has specified. It's a sentence as it's widest or an image at it's
+        widest."
+      - content: "The longest letter."
+        rationale: "While there is a longest letter, letters are not what
+        `max-content` is refering to."
+      - content: "The longest word."
+        rationale: "The longest word is `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is auto-placement?
+    options:
+      - content: "When grid takes the child items and places them in the best
+      order based on browser heuristics."
+        rationale: "No browser will change your content order, only your own
+        styles will do that."
+      - content: "When grid child items have been given a `grid-area` and are
+      placed on that cell."
+        rationale: "That's explicit placement not auto placement."
+      - content: "When unassigned grid items are placed next in a layout
+      template."
+        rationale: "Grid items without an explicit area will be placed in the next available grid cell"
diff --git a/src/site/content/ko/learn/css/grid/index.md b/src/site/content/ko/learn/css/grid/index.md
new file mode 100644
index 00000000000..fab00505085
--- /dev/null
+++ b/src/site/content/ko/learn/css/grid/index.md
@@ -0,0 +1,512 @@
+---
+title: 그리드
+description: CSS 그리드 레이아웃은 행과 열의 레이아웃을 제어하는 2차원 레이아웃 시스템을 제공합니다. 이 모듈에서는 그리드에 관한 모든 것을 알아봅니다.
+audio:
+  title: 'CSS 팟캐스트   - 011: 그리드'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_011_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/forR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-29
+---
+
+웹 디자인에서 정말 일반적인 레이아웃은 머리글, 사이드바, 본문 및 바닥글 레이아웃입니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/tj7KmP72RKkffGQRswpA.svg", alt="로고가 포함된 헤더, 사이드바가 있는 탐색 및 기사가 실린 콘텐츠 영역", width="800", height="531" %}
+
+수년에 걸쳐 이 레이아웃을 해결하기 위한 많은 방법이 있었지만 CSS 그리드를 사용하면 문제를 해결하기가 비교적 간단할 뿐만 아니라 많은 옵션이 제공됩니다. 그리드는 외부 크기 조정이 제공하는 컨트롤과 내부 크기 조정의 유연성을 결합하는 데 매우 유용하므로 이러한 종류의 레이아웃에 이상적입니다. 그리드는 2차원 콘텐츠용으로 설계된 레이아웃 방식이기 때문입니다. 즉, 행과 열에 동시에 내용을 배치합니다.
+
+그리드 레이아웃을 생성할 때는 행과 열이 있는 그리드를 정의합니다. 그런 다음 해당 그리드에 항목을 배치하거나 브라우저가 생성된 셀에 항목을 자동으로 배치하도록 합니다. 그리드에 대해 이야기할 것들이 많지만 사용 가능한 것들에 대한 개요를 살펴보면 그리드 레이아웃을 빠르게 만들어 볼 수 있습니다.
+
+## 개요
+
+그리드로 무엇을 할 수 있을까요? 그리드 레이아웃에는 다음과 같은 기능이 있습니다. 이 가이드에서 이들 모두 배울 것입니다.
+
+1. 그리드는 행과 열로 정의할 수 있습니다. 사용자가 이러한 행 및 열 트랙의 크기를 지정하는 방법을 선택하거나 자체적으로 콘텐츠 크기에 반응하도록 할 수 있습니다.
+2. 그리드 컨테이너의 바로 아래 하위 요소는 자동으로 이 그리드에 배치됩니다.
+3. 또는 원하는 정확한 위치에 항목을 배치할 수 있습니다.
+4. 배치를 쉽게 하기 위해 그리드의 라인과 영역에 이름을 지정할 수 있습니다.
+5. 그리드 컨테이너의 여유 공간을 트랙 사이에 분배할 수 있습니다.
+6. 그리드 항목은 해당 영역 내에서 정렬할 수 있습니다.
+
+## 그리드 용어
+
+그리드에는 많은 새로운 용어가 제공되는데, CSS에 실제 레이아웃 시스템을 갖는 것이 처음이기 때문입니다.
+
+### 그리드 라인
+
+그리드는 가로 및 세로로 이어지는 라인으로 구성됩니다. 그리드에 네 개의 열이 있는 경우, 마지막 열 다음을 포함하여 5개의 열 라인이 있습니다.
+
+라인은 1부터 시작하여 번호가 매겨지며 구성 요소의 쓰기 모드와 스크립트 방향을 따릅니다. 즉, 열 라인 1은 영어와 같은 왼쪽에서 오른쪽으로 쓰는 언어의 경우 왼쪽에 놓여지고 아랍어와 같은 오른쪽에서 왼쪽으로 쓰는 언어의 경우 오른쪽에 놓여집니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg", alt="그리드 라인의 다이어그램 표현", width="800", height="434" %}
+
+### 그리드 트랙
+
+트랙은 두 그리드 라인 사이의 공간입니다. 행 트랙은 두 행 라인 사이에 있고 열 트랙은 두 열 라인 사이에 있습니다. 그리드를 생성할 때는 여기에 크기를 할당하여 이러한 트랙을 생성합니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg", alt="그리드 트랙의 다이어그램 표현", width="800", height="434" %}
+
+### 그리드 셀
+
+그리드 셀은 행 트랙과 열 트랙의 교차점으로 정의되는 그리드의 가장 작은 공간입니다. 표 셀이나 스프레드시트의 셀과 같습니다. 그리드를 정의하고 어떤 항목도 배치하지 않으면 정의된 각 그리드 셀에 하나의 항목이 자동으로 배치됩니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg", alt="그리드 셀의 다이어그램 표현", width="800", height="434" %}
+
+### 그리드 영역
+
+여러 그리드 셀이 함께 있습니다. 그리드 영역은 항목이 여러 트랙에 걸쳐지도록 하여 생성됩니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg", alt="그리드 영역의 다이어그램 표현", width="800", height="434" %}
+
+### 갭
+
+트랙 사이의 여백 또는 골입니다. 이들은 일반 트랙처럼 작동하여 크기 조정에 이용됩니다. 갭에 콘텐츠를 배치할 수는 없지만 그리드 항목이 갭에 걸쳐지게 할 수는 있습니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg", alt="갭이 있는 그리드의 다이어그램 표현", width="800", height="434" %}
+
+### 그리드 컨테이너
+
+`display: grid`가 적용된 HTML 요소로, 직속 하위 요소에 대한 새 그리드 서식 컨텍스트를 만듭니다.
+
+```css
+.container {
+  display: grid;
+}
+```
+
+### 그리드 항목
+
+그리드 항목은 그리드 컨테이너의 직계 하위 요소인 항목입니다.
+
+```html/1-3
+<div class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+```
+
+## 행과 열
+
+기본 그리드를 생성하기 위해 다음과 같이 3개의 열 트랙, 2개의 행 트랙 및 트랙 사이에 10픽셀 갭으로 구성된 그리드를 정의할 수 있습니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 5em 100px 30%;
+    grid-template-rows: 200px auto;
+    gap: 10px;
+}
+```
+
+이 그리드는 용어 섹션에 설명한 많은 내용을 보여줍니다. 여기에는 3개의 열 트랙이 있습니다. 각 트랙은 서로 다른 길이 단위를 사용합니다. 두 개의 행 트랙이 있는데, 하나는 길이 단위를 사용하고 다른 하나는 자동입니다. 자동 크기 조정 트랙으로 사용하면 콘텐츠만큼 크다고 생각할 수 있습니다. 트랙은 기본적으로 크기가 자동으로 조정됩니다.
+
+`.container` 클래스가 있는 요소에 하위 항목이 있는 경우, 해당 항목은 즉시 이 그리드에 배치됩니다. 아래 데모에서 실제로 작동하는 것을 볼 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdbrzr' } %}
+
+Chrome Grid 개발 도구는 그리드의 다양한 부분을 이해하는 데 도움이 될 수 있습니다.
+
+Chrome에서 [데모](https://codepen.io/web-dot-dev/full/NWdbrzr)를 엽니다. ID가 `container`인 회색 배경의 요소를 검사합니다. `.container` 요소 옆에서 DOM의 그리드 배지를 선택하여 그리드를 강조 표시합니다. 레이아웃 탭 내의 드롭다운에서 **라인 번호 표시**를 선택하여 그리드의 라인 번호를 확인합니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/YxpjWBUDsqQB2fr6rzU3.jpg", alt="캡션 및 지침에 설명된 대로", width="800", height="449" %}<figcaption> 라인 번호, 셀 및 트랙을 표시하는 Chrome DevTools에서 강조 표시된 그리드.</figcaption></figure>
+
+### 고유 크기 조정 키워드
+
+[크기 조정 단위](/learn/css/sizing) 섹션에 설명된 길이 및 백분율 치수 외에도 그리드 트랙은 고유 크기 조정 키워드를 사용할 수 있습니다. 이러한 키워드는 상자 크기 조정 사양에 정의되어 있으며 그리드 트랙뿐만 아니라 CSS에서 상자 크기를 조정하는 추가적인 방법을 더해줍니다.
+
+- `min-content`
+- `max-content`
+- `fit-content()`
+
+[`min-content`](https://developer.mozilla.org/docs/Web/CSS/min-content) 키워드는 트랙 콘텐츠가 넘치지 않게 하면서 가능한 한 트랙을 작게 만듭니다. 모두 `min-content` 크기로 세 개의 열 트랙을 갖도록 예제 그리드 레이아웃을 변경하면 트랙에서 가장 긴 단어만큼 좁아집니다.
+
+[`max-content`](https://developer.mozilla.org/docs/Web/CSS/max-content) 키워드는 반대 효과가 있습니다. 트랙은 모든 콘텐츠가 끊어지지 않은 하나의 긴 문자열에 표시될 만큼 충분히 넓어집니다. 문자열이 줄바꿈되지 않으므로 오버플로가 발생할 수 있습니다.
+
+[`fit-content()`](https://developer.mozilla.org/docs/Web/CSS/fit-content()) 함수는 처음에는 `max-content` 처럼 작동합니다. 그러나 사용자가 함수에 전달하는 크기에 트랙이 도달하면 콘텐츠가 줄바꿈되기 시작합니다. 따라서 `fit-content(10em)`는 `max-content` 크기가 10em 미만이지만 10em보다 크지 않은 경우 10em 미만의 트랙을 생성합니다.
+
+다음 데모에서 그리드 트랙의 크기를 변경하여 다양한 고유 크기 조정 키워드를 사용해 보십시오.
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRqNgL', height: 600 } %}
+
+{% Aside %} 이 데모에서 자동이 사용될 때 그리드 열이 컨테이너를 채우기 위해 늘어난다는 사실을 알아챘을 수 있습니다. 그리드 컨테이너에 추가 공간이 있으면 자동 크기 조정된 트랙이 기본적으로 늘어납니다. {% endAside %}
+
+### `fr` 단위
+
+우리는 기존 길이 치수, 백분율, 그리고 이러한 새 키워드를 가지고 있습니다. 그리드 레이아웃에서만 작동하는 특별한 크기 조정 방법도 있습니다. 이것은 그리드 컨테이너에서 사용 가능한 공간의 공유를 설명하는 유연한 길이인 `fr` 단위입니다.
+
+`fr` 단위는 flexbox에서 `flex: auto`를 사용하는 것과 유사한 방식으로 작동합니다. 항목이 배치된 후에 공간을 분배합니다. 따라서 사용 가능한 공간을 모두 동일하게 공유하는 세 개의 열을 가지려면 다음과 같아야 합니다.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+```
+
+fr 단위는 사용 가능한 공간을 공유하므로 고정 크기 갭 또는 고정 크기 트랙과 결합될 수 있습니다. 고정 크기 요소가 있는 구성 요소와 남은 공간을 차지하는 두 번째 트랙을 가지려면 `grid-template-columns: 200px 1fr`의 트랙 목록으로 사용할 수 있습니다.
+
+fr 단위에 다른 값을 사용하면 공간이 비례하여 공유됩니다. 값이 클수록 예비 공간이 더 많이 확보됩니다. 아래 데모에서는 세 번째 트랙의 값을 변경합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'vYgyXNE', height: 600 } %}
+
+### `minmax()` 함수
+
+이 함수는 트랙의 최소 및 최대 크기를 설정할 수 있음을 의미합니다. 이것은 꽤 유용할 수 있습니다. 나머지 공간을 분배하는 상한인 `fr` 단위를 예로 들어 들면 [`minmax()`](https://developer.mozilla.org/docs/Web/CSS/minmax())를 `minmax(auto, 1fr)`로 사용하여 이를 작성할 수 있습니다. 그리드는 콘텐츠의 고유 크기를 확인한 다음 콘텐츠에 충분한 공간을 제공한 후 사용 가능한 공간을 분배합니다. 즉, 그리드 컨테이너에서 사용 가능한 모든 공간이 각각 동일한 공유를 갖는 트랙을 얻지 못할 수도 있습니다.
+
+트랙이 그리드 컨테이너에서 갭을 뺀 공간을 동일하게 공유하도록 하려면 minmax를 사용합니다. 트랙 크기로 `1fr`을 `minmax(0, 1fr)`로 대체하세요. 그러면 트랙의 최소 크기가 최소 콘텐츠 크기가 아니라 0이 됩니다. 그런 다음 그리드는 컨테이너에서 사용 가능한 모든 크기를 가져오고 갭에 필요한 크기를 뺀 다음 fr 단위에 따라 나머지를 분배합니다.
+
+### `repeat()` 표기법
+
+동일한 열로 12 열 트랙 그리드를 생성하려면 다음 CSS를 사용할 수 있습니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr);
+}
+```
+
+또는 [`repeat()`](https://developer.mozilla.org/docs/Web/CSS/repeat())를 사용하여 작성할 수 있습니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0,1fr));
+}
+```
+
+`repeat()` 함수는 트랙 목록의 모든 섹션을 반복하는 데 사용할 수 있습니다. 예를 들어 트랙 패턴을 반복할 수 있습니다. 일반 트랙과 반복 섹션을 가질 수도 있습니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
+}
+```
+
+### `auto-fill` 및 `auto-fit`
+
+트랙 크기 지정, `minmax()` 및 반복에 대해 배운 모든 내용을 결합하여 그리드 레이아웃으로 유용한 패턴을 만들 수 있습니다. 열 트랙의 수를 지정하지 않고 대신 컨테이너에 맞는 만큼 많이 만들고 싶을 수도 있을 것입니다.
+
+이를 위해 `repeat()` 및 `auto-fill` 또는 `auto-fit` 키워드를 사용할 수 있습니다. 아래의 데모에서 그리드는 컨테이너에 맞는 만큼 200픽셀 트랙을 생성합니다. 새 창에서 데모를 열고 뷰포트의 크기를 변경함에 따라 그리드가 어떻게 변하는지 확인하세요.
+
+{% Codepen { user: 'web-dot-dev', id: 'XWpNjgO' } %}
+
+데모에서는 최대한 많은 트랙을 얻을 수 있습니다. 그러나 트랙이 유연하지 않습니다. 또 다른 200픽셀 트랙을 위한 충분한 공간이 생길 때까지 끝에 갭이 생깁니다. `minmax()` 함수를 추가하면 최소 200픽셀, 최대 1fr 크기에 맞는 만큼의 트랙을 요청할 수 있습니다. 그러면 그리드가 200픽셀 트랙을 배치하고 남은 공간은 모두 균등하게 분배됩니다.
+
+그러면 미디어 쿼리가 필요 없는 2차원 반응형 레이아웃이 만들어집니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWbRax' } %}
+
+`auto-fill`와 `auto-fit` 사이에는 미묘한 차이가 있습니다. 다음 데모에서는 위에서 설명한 구문을 사용하여 그리드 레이아웃으로 처리하지만 그리드 컨테이너에는 두 개의 그리드 항목만 있습니다. `auto-fill` 키워드를 사용하면 빈 트랙이 생성되었음을 알 수 있습니다. 키워드를 `auto-fit`으로 변경하면 트랙이 0 크기로 축소됩니다. 이는 유연한 트랙이 이제 공간을 차지할 만큼 커짐을 의미합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'MWJbbNe' } %}
+
+`auto-fill` 및 `auto-fit` 키워드는 그렇지 않으면 정확히 동일한 방식으로 작동합니다. 첫 번째 트랙이 채워지면 둘 사이에는 차이가 없습니다.
+
+## 자동 배치
+
+지금까지 데모에서 그리드 자동 배치가 작동하는 것을 이미 보았습니다. 항목은 소스에 나타나는 순서대로 셀당 하나씩 그리드에 배치됩니다. 많은 레이아웃의 경우에 더 이상 필요한 것은 없을 것입니다. 더 많은 제어가 필요한 경우 몇 가지 작업을 수행할 수 있습니다. 첫 번째는 자동 배치 레이아웃을 조정하는 것입니다.
+
+### 열에 항목 배치
+
+그리드 레이아웃의 기본 동작은 행을 따라 항목을 배치하는 것입니다. 대신, `grid-auto-flow: column`을 사용하여 항목을 열에 배치할 수 있습니다. 행 트랙을 정의해야 하며, 그렇지 않으면 항목이 고유한 열 트랙을 만들고 하나의 긴 행에 모두 배치하게 됩니다.
+
+이러한 값은 문서의 쓰기 모드와 관련이 있습니다. 행은 항상 문서 또는 구성 요소의 쓰기 모드에서 문장이 실행되는 방향으로 실행됩니다. `grid-auto-flow` 및 `writing-mode` 속성의 값을 모드로 변경할 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'PoWbWbr', height: 600 } %}
+
+### 여러 트랙에 걸쳐지게 하기
+
+자동 배치 레이아웃의 일부 또는 모든 항목이 둘 이상의 트랙에 걸쳐지도록 할 수 있습니다. `span` 키워드와 걸쳐지게 할 라인 수를 더한 결과를 `grid-column-end` 또는 `grid-row-end`에 대한 값으로 사용하세요.
+
+```css
+.item {
+    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
+}
+```
+
+`grid-column-start`를 지정하지 않았기 때문에 이는 초기 값 `auto`를 사용하고 자동 배치 규칙에 따라 배치됩니다. 단축형인 `grid-column`을 사용하여 동일한 내용을 지정할 수도 있습니다.
+
+```css
+.item {
+    grid-column: auto / span 2;
+}
+```
+
+### 갭 채우기
+
+일부 항목이 여러 트랙에 걸쳐진 자동 배치 레이아웃의 경우, 그리드에 일부 채워지지 않은 셀이 생길 수 있습니다. 레이아웃이 완전히 자동 배치된 그리드 레이아웃의 기본 동작은 항상 앞으로 진행하는 것입니다. 항목은 소스의 순서, 또는 `order` 속성을 사용하여 수정된 순서에 따라 배치됩니다. 항목을 넣을 공간이 충분하지 않으면 그리드가 갭을 남기고 다음 트랙으로 이동합니다.
+
+다음 데모에서 이 동작을 보여줍니다. 확인란은 조밀한 패킹 모드를 적용합니다. 이것은 `grid-auto-flow`에 `dense`의 값을 제공하여 활성화됩니다. 이 값을 사용하면 그리드가 나중에 레이아웃에서 항목을 가져와 갭을 채우는 데 사용합니다. 이것은 디스플레이가 논리적 순서에서 분리된다는 것을 의미할 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'ZELBLrJ', height: 600 } %}
+
+## 항목 배치하기
+
+CSS 그리드에는 이미 많은 기능이 있습니다. 이제 그리드에 우리가 만든 항목을 배치하는 방법을 살펴보겠습니다.
+
+기억해야 할 첫 번째 사항은 CSS 그리드 레이아웃이 번호가 매겨진 라인의 그리드를 기반으로 한다는 것입니다. 그리드에 내용을 배치하는 가장 간단한 방법은 한 라인에서 다른 라인으로 옮겨가며 배치하는 것입니다. 이 안내서에서 항목을 배치하는 다른 방법도 볼 수 있지만 항상 이러한 번호가 매겨진 라인에 액세스할 수 있습니다.
+
+라인 번호로 항목을 배치하는 데 사용할 수 있는 속성은 다음과 같습니다.
+
+- [`grid-column-start`](https://developer.mozilla.org/docs/Web/CSS/grid-column-start)
+- [`grid-column-end`](https://developer.mozilla.org/docs/Web/CSS/grid-column-end)
+- [`grid-row-start`](https://developer.mozilla.org/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](https://developer.mozilla.org/docs/Web/CSS/grid-row-end)
+
+한 번에 시작 라인과 끝 라인을 모두 설정할 수 있는 짧은 표기가 있습니다.
+
+- [`grid-column`](https://developer.mozilla.org/docs/Web/CSS/grid-column)
+- [`grid-row`](https://developer.mozilla.org/docs/Web/CSS/grid-row)
+
+항목을 배치하려면 배치해야 하는 그리드 영역의 시작 및 끝 라인을 설정합니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 200px 100px);
+}
+
+.item {
+    grid-column-start: 1; /* start at column line 1 */
+    grid-column-end: 4; /* end at column line 4 */
+    grid-row-start: 2; /*start at row line 2 */
+    grid-row-end: 4; /* end at row line 4 */
+}
+```
+
+Chrome DevTools는 항목이 배치된 위치를 확인하도록 라인에 대한 시각적 가이드를 제공할 수 있습니다.
+
+라인 번호 지정은 구성 요소의 쓰기 모드와 방향을 따릅니다. 다음 데모에서는 쓰기 모드 또는 방향을 변경하여 항목 배치가 텍스트 흐름 방식과 얼마나 잘 일관성을 유지하는지 확인합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdGdzd', height: 600 } %}
+
+### 항목 적층시키기
+
+라인 기반 위치 지정을 사용하여 그리드의 동일한 셀에 항목을 배치할 수 있습니다. 즉, 항목을 적층시키거나 한 항목이 다른 항목과 부분적으로 겹치도록 할 수 있습니다. 소스에서 나중에 들어오는 항목은 먼저 들어오는 항목 위에 표시됩니다. 배치된 항목과 마찬가지로 `z-index`를 사용하여 이 적층 순서를 변경할 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'BapQWQW', height: 600 } %}
+
+### 음수 라인 번호
+
+`grid-template-rows` 및 `grid-template-columns`를 사용하여 그리드를 생성할 때는 **명시적 그리드**라고 하는 것을 생성하게 됩니다. 이것은 사용자가 정의하고 트랙에 크기를 지정한 그리드입니다.
+
+때로 이 명시적 그리드 외부에 표시되는 항목이 있습니다. 예를 들어, 열 트랙을 정의한 다음 행 트랙을 정의하지 않고 그리드 항목의 여러 행을 추가할 수 있습니다. 트랙은 기본적으로 자동으로 크기가 조정됩니다. 정의된 명시적 그리드 외부에 있는 `grid-column-end`를 사용하여 항목을 배치할 수도 있습니다. 이 두 경우 모두 그리드는 레이아웃이 작동하도록 트랙을 생성하며 이러한 트랙을 **암시적 그리드**라고 합니다.
+
+암시적 또는 명시적 그리드로 작업하는 경우 대부분 차이가 없습니다. 그러나 라인 기반 배치를 사용하면 둘 사이의 주된 차이점에 직면할 수 있습니다.
+
+음수 라인 번호를 사용하여 명시적 그리드의 끝 라인에서 항목을 배치할 수 있습니다. 이것은 항목이 첫 번째 열 라인에서 마지막 열 라인까지 확장되도록 하려는 경우에 유용할 수 있습니다. 이 경우에 `grid-column: 1 / -1`을 사용할 수 있습니다. 항목이 명시적 그리드를 가로질러 바로 늘어납니다.
+
+그러나 이것은 명시적 그리드에서만 작동합니다. 첫 번째 항목이 그리드의 끝 라인까지 확장되도록 하려는 자동 배치된 항목의 세 행 레이아웃을 가져옵니다.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Dt8yG376MqSyWJJ8KqPr.svg", alt="8개의 형제 그리드 항목이 있는 사이드바", width="800", height="359" %}
+
+이 항목에 `grid-row: 1 / -1`을 부여할 수 있다고 생각할 수도 있습니다. 아래 데모에서 이것이 작동하지 않는다는 것을 알 수 있습니다. 트랙은 암시적 그리드에서 생성되며 `-1`을 사용하여 그리드 끝에 도달할 수 있는 방법은 없습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'YzNpZeq' } %}
+
+#### 암시적 트랙 크기 지정
+
+암시적 그리드에서 생성된 트랙은 기본적으로 크기가 자동 조정됩니다. 그러나 행의 크기를 제어하려면 [`grid-auto-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows) 속성을 사용하고, 열의 경우 [`grid-auto-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns)를 사용합니다.
+
+`10em`의 최소 크기와 `auto`의 최대 크기로 모든 암시적 행을 만들려면 다음을 수행합니다.
+
+```css
+.container {
+    display: grid;
+    grid-auto-rows: minmax(10em, auto);
+}
+```
+
+100px 및 200px 너비 트랙의 패턴으로 암시적 열을 생성합니다. 이 경우에 첫 번째 암시적 열은 100px, 두 번째는 200px, 세 번째는 100px 등입니다.
+
+```css
+.container {
+    display: grid;
+    grid-auto-columns: 100px 200px;
+}
+```
+
+## 명명된 그리드 라인
+
+라인에 번호가 아닌 이름이 있는 경우 레이아웃에 항목을 배치하기가 더 쉬워질 수 있습니다. 대괄호 사이에 원하는 이름을 추가하여 그리드의 어떤 라인에든 이름을 지정할 수 있습니다. 동일한 대괄호 내에서 공백으로 구분하여 여러 이름을 추가할 수 있습니다. 이름이 지정된 라인에는 숫자 대신 그 이름을 사용할 수 있습니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      [main-start aside-start] 1fr
+      [aside-end content-start] 2fr
+      [content-end main-end]; /* a two column layout */
+}
+
+.sidebar {
+    grid-column: aside-start / aside-end;
+    /* placed between line 1 and 2*/
+}
+
+footer {
+    grid-column: main-start / main-end;
+    /* right across the layout from line 1 to line 3*/
+}
+```
+
+## 그리드 템플릿 영역
+
+그리드 영역에 이름을 지정하고 명명된 영역에 항목을 배치할 수도 있습니다. 이것은 CSS에서 구성 요소가 어떻게 보이는지 볼 수 있게 해주므로 멋진 기술이라고 할 수 있습니다.
+
+우선, [`grid-area`](https://developer.mozilla.org/docs/Web/CSS/grid-area) 속성을 사용하여 그리드 컨테이너의 바로 아래 하위 항목에 이름을 지정합니다.
+
+```css
+header {
+    grid-area: header;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.content {
+    grid-area: content;
+}
+
+footer {
+    grid-area: footer;
+}
+```
+
+`auto` 및 `span` 키워드 외에 원하는 대로 이름을 지정할 수 있습니다. 모든 항목의 이름을 지정했으면 [`grid-template-areas`](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas) 속성을 사용하여 각 항목이 확장될 그리드 셀을 정의합니다. 각 행은 따옴표로 정의됩니다.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "header header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+`grid-template-areas`를 사용할 때 몇 가지 규칙이 있습니다.
+
+- 값은 빈 셀이 없는 완전한 그리드여야 합니다.
+- 트랙을 확장하려면 이름을 반복합니다.
+- 이름을 반복하여 생성된 영역은 직사각형이어야 하며 연결을 끊을 수 없습니다.
+
+위의 규칙 중 하나라도 위반하면 값이 유효하지 않은 것으로 처리되어 폐기됩니다.
+
+그리드에 화이트 공백을 남기려면 `.` 또는 사이에 화이트 공백 없이 이 코드를 여러 번 사용합니다. 예를 들어 그리드의 맨 처음 셀을 비워 두려면 일련의 `.` 문자를 추가할 수 있습니다:
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "....... header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+전체 레이아웃이 한 곳에서 정의되므로 미디어 쿼리를 사용하여 레이아웃을 간단하게 재정의할 수 있습니다. 다음 예제에서는 `grid-template-columns` 및 `grid-template-areas` 값을 재정의하여 3개의 열로 이동하는 2개의 열 레이아웃을 만들었습니다. 뷰포트 크기를 조정하고 레이아웃 변경을 보려면 새 창에서 예제를 엽니다.
+
+다른 그리드 방법과 마찬가지로 `grid-template-areas` 속성이 `writing-mode` 및 방향과 어떻게 관련되는지 확인할 수도 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'oNBYepg', height: 600 } %}
+
+## 짧은 표기 속성
+
+한 번에 많은 그리드 속성을 설정할 수 있는 두 가지 약식 속성이 있습니다. 이것들이 어떻게 서로 어우러지는지 정확히 분석할 때까지는 약간 혼란스러워 보일 수 있습니다. 이 약식 속성을 사용할지, 아니면 더 긴 속성을 사용할지는 여러분에게 달려 있습니다.
+
+### `grid-template`
+
+[`grid-template`](https://developer.mozilla.org/docs/Web/CSS/grid-template) 속성은 `grid-template-rows`, `grid-template-columns` 및 `grid-template-areas`에 대한 약식 표기입니다. `grid-template-areas` 값과 함께 먼저 행이 정의됩니다. 열 크기 조정은 `/` 뒤에 추가됩니다.
+
+```css
+.container {
+    display: grid;
+    grid-template:
+      "head head head" minmax(150px, auto)
+      "sidebar content content" auto
+      "sidebar footer footer" auto / 1fr 1fr 1fr;
+}
+```
+
+### `grid` 속성
+
+[`grid`](https://developer.mozilla.org/docs/Web/CSS/grid) 약식 표기는 `grid-template`과 정확히 같은 방식으로 사용할 수 있습니다. 이런 식으로 사용하면 받아들이는 다른 그리드 속성을 해당하는 초기값으로 재설정합니다. 전체 세트는 다음과 같습니다.
+
+- `grid-template-rows`
+- `grid-template-columns`
+- `grid-template-areas`
+- `grid-auto-rows`
+- `grid-auto-columns`
+- `grid-auto-flow`
+
+이 약식 표기를 사용하여 암시적 그리드가 작동하는 방식을 정의할 수 있습니다. 예를 들면 다음과 같습니다.
+
+```css
+.container {
+    display: grid;
+    grid: repeat(2, 80px) / auto-flow  120px;
+}
+```
+
+## 정렬
+
+그리드 레이아웃은 [flexbox](/learn/css/flexbox) 가이드에서 배운 것과 동일한 정렬 속성을 사용합니다. 그리드에서 `justify-`로 시작하는 속성은 항상 인라인 축에서 사용되고, 쓰기 모드에서 문장이 실행되는 방향입니다.
+
+`align-`으로 시작하는 속성은 블록 축에서 사용되며, 쓰기 모드에서 블록이 배치되는 방향입니다.
+
+- [`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content) 및 [`align-content`](https://developer.mozilla.org/docs/Web/CSS/align-content): 트랙 주변이나 트랙 사이에 그리드 컨테이너에 추가 공간을 분배합니다.
+- [`justify-self`](https://developer.mozilla.org/docs/Web/CSS/justify-self) 및 [`align-self`](https://developer.mozilla.org/docs/Web/CSS/align-self): 그리드 항목에 적용되어 해당 항목이 배치된 그리드 영역 내에서 이동합니다.
+- [`justify-items`](https://developer.mozilla.org/docs/Web/CSS/justify-items) 및 [`align-items`](https://developer.mozilla.org/docs/Web/CSS/align-items): 항목의 모든 `justify-self` 속성을 설정하기 위해 그리드 컨테이너에 적용됩니다.
+
+### 추가 공간 분배
+
+이 데모에서 그리드는 고정 너비 트랙을 배치하는 데 필요한 공간보다 큽니다. 이는 그리드의 인라인 및 블록 차원 모두에 공간이 있음을 의미합니다. `align-content` 및 `justify-content`에 다른 값을 시도하여 트랙이 어떻게 작동하는지 확인해 보세요.
+
+{% Codepen { user: 'web-dot-dev', id: 'rNjjMVd', height: 650 } %}
+
+`space-between`과 같은 값을 사용할 때 갭이 어떻게 더 커지는지 확인하고, 두 트랙에 걸쳐 있는 그리드 항목도 갭에 더해진 추가 공간을 흡수하기 위해 커집니다.
+
+{% Aside %} flexbox와 마찬가지로 이러한 속성은 배포할 추가 공간이 있는 경우에만 작동합니다. 그리드 트랙이 컨테이너를 깔끔하게 채우면 균등 분배할 공간이 없습니다. {% endAside %}
+
+### 콘텐츠 이동
+
+`justify-self` 및 `align-self`의 초기값이 `stretch`이기 때문에 배경색이 있는 항목은 배치된 그리드 영역을 완전히 채우는 것처럼 보입니다.
+
+{% Aside %} 해당 항목이 이미지 또는 고유 종횡비를 갖는 다른 무엇인 경우 초기값은 모양이 늘어나는 것을 방지하기 위해 `stretch`가 아니라 `start`가 됩니다. {% endAside %}
+
+데모에서 `justify-items` 및 `align-items` 값을 변경하여 이로 인해 레이아웃이 어떻게 변하는지 확인하세요. 그리드 영역은 크기가 변경되지 않고 대신 정의된 영역 내에서 항목이 이동됩니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'YzZOOXB', height: 650 } %}
+
+{% Assessment 'grid' %}
+
+## 리소스
+
+이 가이드는 그리드 레이아웃 사양의 여러 부분에 대한 개요를 제공했습니다. 자세히 알아보려면 다음 리소스를 살펴보세요.
+
+- [MDN CSS 그리드 레이아웃](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+- [그리드 완전 가이드](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [그리드 컨테이너 생성](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)
+- [그리드 종합 학습 자료](https://gridbyexample.com/)
diff --git a/src/site/content/ko/learn/css/index.md b/src/site/content/ko/learn/css/index.md
new file mode 100644
index 00000000000..97b27600da5
--- /dev/null
+++ b/src/site/content/ko/learn/css/index.md
@@ -0,0 +1,28 @@
+---
+title: CSS 학습
+authors:
+  - andybell
+description: 웹 스타일링 전문 지식을 한 단계 끌어올릴 수 있는 상시 CSS 과정 및 참고 자료.
+date: 2021-05-04
+tags:
+  - css
+  - layout
+---
+
+## CSS 학습에 오신 것을 환영합니다!
+
+이 과정은 CSS의 기초 내용을 소화 가능하고 이해하기 쉬운 부분들로 세분합니다. 다음 몇 개의 모듈을 통해 CSS의 핵심 측면이 어떻게 작동하고 프로젝트에서 이를 효과적으로 사용하는 방법은 무엇인지 배우게 될 것입니다. 모듈을 탐색하려면 "CSS 학습" 로고 옆에 있는 메뉴 창을 사용하세요.
+
+상자 모델, 캐스케이드 및 특수성, 플렉스박스, 그리드 및 z-인덱스와 같은 CSS 기본 사항을 배웁니다. 또한 이러한 기본 사항과 함께 함수, 색상 유형, 그래디언트, 논리적 속성 및 상속에 대해 학습하여 모든 사용자 인터페이스를 사용할 준비를 마친 유능한 실무 개발자의 자질을 부여합니다.
+
+각 모듈에는 지식을 테스트할 수 있는 대화형 데모와 자체 평가가 풍부하게 포함되어 있습니다. 읽기와 데모를 통한 학습 외에도 지식을 익히고 계속 확장하는 또 다른 방법으로 각 주제에 대한 팟캐스트 에피소드가 함께 제공됩니다.
+
+이 과정은 초급 및 고급 CSS 개발자를 위해 만들어졌습니다. 시리즈를 처음부터 끝까지 거치면서 CSS에 대한 전반적인 내용을 습득하거나 특정 스타일링 주제에 대한 참조로 사용할 수 있습니다. 웹 개발을 처음 접하는 분들은 MDN의 [HTML 소개](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) 과정을 통해  마크업을 작성하고 스타일시트를 연결하는 방법을 모두 배울 수 있습니다.
+
+학습할 내용은 다음과 같습니다.
+
+{% include 'partials/course-index.njk' %}
+
+CSS를 배울 준비가 되셨나요? [그럼 시작하겠습니다](/learn/css/box-model/).
+
+{% Aside %} 이 과정은 CSS 커뮤니티 전문가인 <a href="https://twitter.com/piccalilli_">Andy Bell</a>, <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>, <a href="https://twitter.com/Una">Una Kravets</a>, <a href="https://twitter.com/argyleink">Adam Argyle</a>이 작성하고 편집했습니다. [Rob Dodson](https://twitter.com/twerske)과 [Jiwoong Lee](https://twitter.com/camdenbickel)는 [Ewa Gasperowicz](https://twitter.com/KevinLozandier) 및 <a href="https://twitter.com/rob_dodson">Kayce Basques</a>의 도움을 받아 UX 및 프로덕션 빌드를 총괄했습니다. {% endAside %}
diff --git a/src/site/content/ko/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/ko/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/ko/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/ko/learn/css/selectors/index.md b/src/site/content/ko/learn/css/selectors/index.md
new file mode 100644
index 00000000000..67647cfec04
--- /dev/null
+++ b/src/site/content/ko/learn/css/selectors/index.md
@@ -0,0 +1,357 @@
+---
+title: 선택기
+description: |2
+
+  요소에 CSS를 적용하려면 선택해야 합니다.
+  CSS는 이를 수행하는 다양한 방법을 제공합니다.
+  이 모듈에서 탐색할 수 있습니다.
+audio:
+  title: 'CSS 팟캐스트   - 002: 선택기'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/forR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+기사의 첫 번째 단락인 경우에만 더 크게 빨간색으로 표시하고 싶은 텍스트가 있는 경우 어떻게 합니까?
+
+```html
+<article>
+  <p>I want to be red and larger than the other text.</p>
+  <p>I want to be normal sized and the default color.</p>
+</article>
+```
+
+CSS 선택기를 사용하여 특정 요소를 찾고 다음과 같이 CSS 규칙을 적용합니다.
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+CSS는 이와 같은 상황을 해결하는 데 도움이 되는 매우 단순한 것부터 매우 복잡한 것까지 요소를 선택하고 요소에 규칙을 적용할 수 있는 많은 옵션을 제공합니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'XWprGYz', height: 250 } %}
+
+## CSS 규칙의 일부
+
+선택기의 작동 방식과 CSS에서의 역할을 이해하려면 CSS 규칙의 일부를 아는 것이 중요합니다. CSS 규칙은 하나 이상의 선택자와 하나 이상의 선언을 포함하는 코드 블록입니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="선택기가 있는 CSS 규칙의 이미지 .my-css-rule", width="800", height="427" %}</figure>
+
+이 CSS 규칙에서 **선택기**는 페이지에서 `my-css-rule` 클래스가 있는 모든 요소를 찾는 `.my-css-rule` 중괄호 안에 세 개의 선언이 있습니다. 선언은 선택자와 일치하는 요소에 스타일을 적용하는 속성 및 값 쌍입니다. CSS 규칙은 원하는 만큼 많은 선언과 선택기를 가질 수 있습니다.
+
+## 단순 선택기
+
+가장 간단한 선택기 그룹은 HTML 요소와 HTML 태그에 추가할 수 있는 클래스, ID 및 기타 속성을 대상으로 합니다.
+
+### 범용 선택기
+
+와일드카드라고도 하는 [범용 선택기](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors)는 모든 요소와 일치합니다.
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+이 규칙은 페이지의 모든 HTML 요소가 핫핑크 텍스트를 갖도록 합니다.
+
+### 유형 선택기
+
+[유형 선택기](https://developer.mozilla.org/docs/Web/CSS/Type_selectors)는 HTML 요소와 직접 일치합니다.
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+이 규칙은 모든 `<section>` 요소가 모든 면에 `padding`의 `2em`을 갖게 합니다.
+
+### 클래스 선택기
+
+HTML은 `class` 속성에 정의된 하나 이상의 항목을 가질 수 있습니다. [클래스 선택기](https://developer.mozilla.org/docs/Web/CSS/Class_selectors)는 해당 클래스가 적용된 모든 요소와 일치합니다.
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+클래스가 적용된 모든 요소는 빨간색으로 표시됩니다.
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+`.`이 HTML이 **아닌** CSS에만 있는 방법을 알아두십시오. `.` 문자는 클래스 속성 멤버와 일치하도록 CSS 언어를 지시하기 때문입니다. 이는 특수 문자 또는 문자 집합이 선택기 유형을 정의하는 데 사용되는 CSS의 일반적인 패턴입니다.
+
+`.my-class`의 클래스가 있는 HTML 요소는 다음과 같이 다른 클래스가 여러 개 있더라도 여전히 위의 CSS 규칙과 일치합니다.
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+이는 CSS가 해당 클래스를 정확히 일치시키는 것이 아니라 정의된 클래스를 *포함*하는 `class` 속성을 찾기 때문입니다.
+
+{% Aside %} 클래스 속성의 값은 원하는 거의 모든 것이 될 수 있습니다. 한 가지 알아두어야 할 사항은 `.1element`와 같은 숫자로 클래스(또는 ID)를 시작할 수 없다는 것입니다. [사양](https://www.w3.org/TR/CSS21/syndata.html#characters)에서 더 많은 내용을 읽을 수 있습니다. {% endAside %}
+
+### ID 선택기
+
+`id` 속성이 있는 HTML 요소는 해당 ID 값을 가진 페이지의 유일한 요소여야 합니다. 다음과 같이 [ID 선택기](https://developer.mozilla.org/docs/Web/CSS/ID_selectors)로 요소를 선택합니다.
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+이 CSS는 다음과 같이 `id`가 `rad`인 HTML 요소에 파란색 테두리를 적용합니다.
+
+```html
+<div id="rad"></div>
+```
+
+클래스 선택기 `.`과 와 유사합니다. `#` 문자를 사용하여 CSS가 뒤에 `id`와 일치하는 요소를 찾도록 지시합니다.
+
+{% Aside %} `id` 인스턴스를 두 개 이상 발견하면 선택기와 일치하는 CSS 규칙을 계속 적용합니다. `id` 속성이 있는 모든 요소에는 고유한 값이 있어야 하므로 단일 요소에 대해 매우 구체적인 CSS를 작성하지 않는 한 `id` 선택기로 스타일을 적용하는 것은 재사용할 수 없음을 의미하므로 피하십시오. 다른 곳에서는 다시 사용할 수 없다는 뜻입니다. {% endAside %}
+
+### 속성 선택기
+
+[속성 선택기](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors)를 사용하여 특정 HTML 속성이 있거나 HTML 속성에 대한 특정 값이 있는 요소를 찾을 수 있습니다. 대괄호 (`[ ]`)로 묶어 CSS가 속성을 찾도록 지시합니다.
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+이 CSS는 다음과 같이 `primary` 값을 가진 `data-type` 속성이 있는 모든 요소를 찾습니다.
+
+```html
+<div data-type="primary"></div>
+```
+
+`data-type`의 특정 값을 찾는 대신 값에 관계없이 속성이 있는 요소를 찾을 수도 있습니다.
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+이 `<div>` 요소는 모두 빨간색 텍스트를 갖습니다.
+
+`s` 연산자를 추가하여 대소문자를 구분하는 속성 선택기를 사용할 수 있습니다.
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+HTML 요소에 `primary` 대신 `Primary`의 `data-type`가 있던 경우, 빨간색 텍스트를 얻지 않습니다. `i` 연산자를 사용하여 반대(대소문자 구분 안함)를 수행할 수 있습니다.
+
+대소문자 연산자와 함께 속성 값 내의 문자열 부분과 일치하는 연산자에 액세스할 수 있습니다.
+
+```css
+/* A href that contains "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* A href that starts with https */
+[href^='https'] {
+  color: green;
+}
+
+/* A href that ends with .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbOy' } %}<figcaption>이 데모에서 속성 선택기의 '$' 연산자는 'href' 속성에서 파일 유형을 가져옵니다. 이렇게 하면 의사 요소를 사용하여 해당 파일 유형에 따라 레이블에 접두사를 붙일 수 있습니다.</figcaption></figure>
+
+### 그룹화 선택기
+
+선택기는 하나의 요소만 일치시킬 필요는 없습니다. 여러 선택기를 쉼표로 구분하여 그룹화할 수 있습니다.
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+이 예는 색상 변경을 `<strong>` 요소와 `<em>` 요소 모두로 확장합니다. `.my-class`라는 크래스와 `lang` 속성이 있는 요소로 확장됩니다.
+
+{% Assessment 'simple-selectors' %}
+
+## 가짜 클래스 및 가짜 요소
+
+CSS는 요소를 가리켰을 때, 요소 *내부*의 구조 또는 요소의 일부와 같은 특정 플랫폼 상태에 초점을 맞춘 유용한 선택기 유형을 제공합니다.
+
+### 가짜 클래스
+
+HTML 요소는 상호 작용하거나 자식 요소 중 하나가 특정 상태에 있기 때문에 다양한 상태에 있습니다.
+
+예를 들어 사용자가 HTML 요소를 마우스 포인터로 가리킬 *수 있거나* 하위 요소를 사용자가 가리킬 수도 있습니다. 이러한 상황에서는 `:hover` 가짜 클래스를 사용하십시오.
+
+```css
+/* Our link is hovered */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Sets all even paragraphs to have a different background */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+[가짜 클래스 모듈](/learn/css/pseudo-classes)에서 자세히 알아보십시오.
+
+### 가짜 요소
+
+의사 요소는 플랫폼 상태에 응답하는 대신 CSS로 새 요소를 삽입하는 것처럼 작동하기 때문에 의사 클래스와 다릅니다. 콜론(`:`)을 사용하는 대신 이중 콜론(`::`)을 사용하기 때문에 가짜 클래스와 구문적으로 다릅니다.
+
+{% Aside %} 이중 콜론(`::`)은 유사 요소를 유사 클래스와 구별하지만 이러한 구분이 CSS 사양의 이전 버전에는 없었기 때문에 브라우저는 IE8과 같은 이전 브라우저와의 이전 버전 호환성을 돕기 위해 `:before` 및 `:after` 이후와 같은 원래 유사 요소에 대한 단일 콜론을 지원합니다. {% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+링크 레이블에 파일 유형을 접두사로 붙인 위의 데모에서와 같이 `::before` 가짜 요소를 사용하여 **요소 시작 부분**에 내용을 삽입하거나 `::after` 가짜 요소를 사용하여 내용을 **요소의 끝**에 삽입합니다.
+
+가짜 요소는 콘텐츠 삽입에만 국한되지 않습니다. 요소의 특정 부분을 대상으로 지정하는 데 사용할 수도 있습니다. 예를 들어 목록이 있다고 가정합니다. `::marker`를 사용하여 목록의 각 글머리 기호(또는 번호)의 스타일을 지정합니다.
+
+```css
+/* Your list will now either have red dots, or red numbers */
+li::marker {
+  color: red;
+}
+```
+
+또한, `::selection`을 사용하여 사용자가 강조 표시한 콘텐츠의 스타일을 지정할 수도 있습니다.
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+[가짜 요소에 대한 모듈](/learn/css/pseudo-elements)에서 자세히 알아보십시오.
+
+{% Assessment 'pseudo-selectors' %}
+
+## 복잡한 선택기
+
+이미 방대한 선택기를 보았지만 때로는 CSS를 사용하여 *보다 세밀한 제어가 필요할 것입니다.* 여기에서 복잡한 선택기가 도움을 주기 위해 개입합니다.
+
+이 시점에서 다음 선택자가 더 많은 권한을 제공하지만 하위 요소를 선택하여 **아래쪽으로만 계단식으로 이동**할 수 있다는 점을 기억할 가치가 있습니다. 위쪽을 대상으로 하고 상위 요소를 선택할 수 없습니다. 캐스케이드가 무엇이며 어떻게 작동하는지 [이후 강의](/learn/css/the-cascade)에서 다룹니다.
+
+### 결합기
+
+결합자는 두 선택기 사이에 있는 것입니다. 예를 들어 선택기가 `p > strong`이면 결합기는 `>` 문자입니다. 이러한 결합기를 사용하는 선택기는 문서에서의 위치에 따라 항목을 선택하는 데 도움이 됩니다.
+
+#### 하위 결합기
+
+하위 결합기를 이해하려면 먼저 상위 요소와 하위 요소를 이해해야 합니다.
+
+```html
+<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
+```
+
+상위 요소는 텍스트를 포함하는 `<p>`입니다. `<p>` 요소 내부는 `<strong>` 요소이며, 내용을 굵게 만듭니다. `<p>` 안에 있기 때문에 하위 요소입니다.
+
+하위 결합기를 사용하면 자식 요소를 대상으로 지정할 수 있습니다. 이것은 공백(` `) 브라우저가 하위 요소를 찾도록 지시합니다.
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+이 스니펫은 `<p>` 요소의 하위 요소인 모든 `<strong>` 요소만 선택하여 반복해서 파란색으로 만듭니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbGN' } %}<figcaption>하위 결합기는 반복적이기 때문에 각 하위 요소에 추가된 패딩이 적용되어 결과적으로 시차 효과가 발생합니다.</figcaption></figure>
+
+이 효과는 위의 예에서 결합 선택기 `.top div`를 사용하여 더 잘 시각화됩니다. 해당 CSS 규칙은 해당 `<div>` 요소에 왼쪽 패딩을 추가합니다. 결합기는 반복적이기 때문에 `.top`에 있는 `<div>` 요소에는 동일한 패딩이 적용됩니다.
+
+이 데모의 HTML 패널을 보면 `.top` 요소 자체에 `<div>` 하위 요소가 있는 여러 `<div>` 하위 요소가 어떻게 있는지 알 수 있습니다.
+
+#### 다음 형제 결합기
+
+선택기에서 `+` 문자를 사용하여 다른 요소 바로 다음에 오는 요소를 찾을 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'JjEPzwB' } %}
+
+`.top`의 하위 요소의 **다음 형제**인 *경우에만* 다음 형제 결합기를 사용하여 공간을 추가하십시오.
+
+다음 선택기를 사용하여 `.top`의 모든 하위 요소에 여백을 추가할 수 있습니다.
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+`.top`의 모든 하위 요소를 선택하기 때문에 이 규칙이 잠재적으로 불필요한 추가 공간을 생성한다는 것입니다. **범용 선택기**와 혼합된 **다음 형제 결합기**는 공간을 확보하는 요소를 제어할 수 있을 뿐만 아니라 **모든 요소**에 공간을 적용할 수 있습니다. `.top`에 어떤 HTML 요소가 표시되는지에 관계없이 장기적인 유연성을 제공합니다.
+
+#### 후속 형제 결합기
+
+후속 결합기는 다음 형제 선택기와 매우 유사합니다. `+` 문자 대신 `~` 문자를 사용하십시오. 이것이 다른 점은 요소가 동일한 부모를 가진 다음 요소가 아니라 동일한 부모를 가진 다른 요소를 따라야 한다는 것입니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELzPPX', height: 400 } %}<figcaption>후속 선택기를 `:checked` 가짜 클래스와 함께 사용하여 순수 CSS 스위치 요소를 만듭니다.</figcaption></figure>
+
+이 후속 결합기는 강성이 약간 낮아 위의 샘플과 같은 상황에서 유용하며, 관련 확인란이 `:checked` 상태일 때 사용자 지정 스위치의 색상을 변경합니다.
+
+#### 하위 결합기…
+
+하위 결합기(직계 하위 항목이라고도 함)를 사용하면 결합기 선택기와 함께 제공되는 반복에 대한 제어 능력을 높일 수 있습니다. `>` 문자를 사용하면 결합기 선택기가 직계 하위 항목**에만** 적용되도록 제한할 수 있습니다.
+
+이전의 다음 형제 선택기 예를 고려하십시오. **공백은 다음 형제** 각각에 추가되지만 해당 요소 중 하나에 **다음 형제 요소**도 하위로 있으면 바람직하지 않은 추가 공백이 발생할 수 있습니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZYMJL' } %}
+
+이 문제를 완화하려면 하위 결합기를 통합하도록 **다음 형제 선택기**를 `> * + *`로 바꾸십시오. 이제 이 규칙은 `.top`의 직계 하위**에만** 적용됩니다.
+
+{% Codepen { user: 'web-dot-dev', id: 'dyNbrEr' } %}
+
+### 복합 선택기
+
+선택기를 결합하여 특이성과 가독성을 높일 수 있습니다. 예를 들어, `.my-class` 클래스도 포함하는 `<a>` 요소를 대상으로 하려면 다음을 작성하십시오.
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+이것은 모든 링크에 빨간색이 적용되는 것은 아니며 `<a>` 요소일 **경우** `.my-class`에만 빨간색이 적용됩니다. 자세한 내용은 [사양 모듈](/learn/css/specificity)을 참조하십시오.
+
+{% Assessment 'complex-selectors' %}
+
+## 참고 자료
+
+- [CSS 선택기 참조](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [대화형 선택기 게임](https://flukeout.github.io/)
+- [가짜 클래스 및 가짜 요소 참조](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [CSS 선택기를 일반 영어 설명자로 변환하는 도구](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/ko/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/ko/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/ko/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/ko/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/ko/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/ko/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/ko/learn/css/the-cascade/conclusion.assess.yml b/src/site/content/ko/learn/css/the-cascade/conclusion.assess.yml
new file mode 100644
index 00000000000..8ed8ba41df4
--- /dev/null
+++ b/src/site/content/ko/learn/css/the-cascade/conclusion.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: The Cascade can be used for...
+    options:
+      - content: "Resolving conflicts when multiple styles apply to an element."
+        rationale: "This is one of its primary goals, conflict resolution."
+      - content: "Ensuring there's only one style value for each property at draw time."
+        rationale: "The text can only be one color, and The Cascade is a way of
+        determining which it should be."
+      - content: "Scoring and weighting style rules."
+        rationale: "Scoring and weighting are part of the sorting phase of The
+        Cascade."
+      - content: "Sorting and filtering style attributes."
+        rationale: "Sorting and filtering are phases of The Cascade to help
+        understand aspects of conflict resolution."
diff --git a/src/site/content/ko/learn/css/the-cascade/index.md b/src/site/content/ko/learn/css/the-cascade/index.md
new file mode 100644
index 00000000000..49d1bebc32e
--- /dev/null
+++ b/src/site/content/ko/learn/css/the-cascade/index.md
@@ -0,0 +1,152 @@
+---
+title: 캐스케이드
+description: |2
+
+  때로는 두 개 이상의 경쟁 CSS 규칙이 요소에 적용될 수 있습니다.
+  이 모듈에서는 브라우저가 사용할 것을 선택하는 방법과 이 선택을 제어하는 방법을 알아봅니다.
+audio:
+  title: 'CSS 팟캐스트   - 004: 캐스케이드'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/forR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+tags:
+  - css
+---
+
+CSS는 Cascading Stylesheets의 약자입니다. 캐스케이드는 여러 CSS 규칙이 HTML 요소에 적용되는 충돌을 해결하기 위한 알고리즘입니다. 다음 CSS로 스타일이 지정된 버튼의 텍스트가 파란색이 되는 이유입니다.
+
+```css
+button {
+  color: red;
+}
+
+button {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'GRrgMOm', height: 200 } %}</figure>
+
+캐스케이드 알고리즘을 이해하면 브라우저가 이와 같은 충돌을 해결하는 방법을 이해하는 데 도움이 됩니다. 캐스케이드 알고리즘은 4단계로 나뉩니다.
+
+1. **위치 및 표시 순서**: CSS 규칙이 표시되는 순서
+2. **특이성**: 가장 일치하는 CSS 선택자를 결정하는 알고리즘
+3. **오리진**: CSS가 나타나는 순서와 출처, 브라우저 스타일인지, 브라우저 확장 프로그램의 CSS인지, 작성한 CSS인지 여부
+4. **중요도**: 몇몇 CSS 규칙은 특히 `!important` 규칙 유형의 경우 다른 규칙보다 가중치가 더 높습니다.
+
+## 등장의 위치와 순서
+
+CSS 규칙이 표시되는 순서와 표시 방법은 충돌 해결을 계산하는 동안 캐스케이드에서 고려됩니다.
+
+이 강의 시작 부분에 있는 데모는 위치의 가장 간단한 예입니다. 동일한 특이성의 선택자를 갖는 두 가지 규칙이 있으므로 선언된 마지막 규칙이 이깁니다.
+
+`<link>` 태그, 임베드된 `<style>` 태그, `style` 속성에 정의된 인라인 CSS와 같은 HTML 페이지의 다양한 소스에서 가져올 수 있습니다.
+
+HTML 페이지 상단에 CSS를 포함하는 `<link>`가 있는 경우 페이지 하단에 CSS를 포함하는 다른 `<link>`: 하위 `<link>`가 가장 구체적입니다. 임베드된 ` {style}` 요소에서도 동일한 현상이 발생합니다. 페이지 아래쪽으로 갈수록 구체화됩니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'NWdPaWv' } %}<figcaption> 버튼의 배경은 <code>&lt;link /&gt;</code> 요소에 의해 포함된 CSS에서 정의된 파란색입니다. 어둡게 설정하는 CSS 규칙은 두 번째 연결된 스타일시트에 있으며 이후 위치 때문에 적용됩니다.</figcaption></figure>
+
+이 순서는 포함된 `<style>` 요소에도 적용됩니다. `<link>` 전에 선언된 경우 연결된 스타일시트의 CSS가 가장 구체적입니다.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbLoB' } %}<figcaption> <code>&lt;style&gt;</code> 요소는 <code>&lt;head&gt;</code>에 선언되고 <code> 요소는 &lt;code&gt;&amp;lt;body&amp;gt;</code>에 선언됩니다. <code>&lt;style&gt;</code> 요소보다 더 구체적임을 의미합니다.</figcaption></figure>
+
+CSS가 선언된 인라인 `style` 속성은 선언에 `!important`가 정의되어 있지 않은 한 위치에 관계없이 다른 모든 CSS를 재정의합니다.
+
+위치는 CSS 규칙의 순서로도 적용됩니다. `background: purple`이 마지막으로 선언되었기 때문에 요소의 배경이 보라색입니다. 녹색 배경은 보라색 배경보다 먼저 선언되었으므로 이제 브라우저에서 무시됩니다.
+
+```css
+.my-element {
+  background: green;
+  background: purple;
+}
+```
+
+동일한 속성에 대해 두 개의 값을 지정할 수 있다는 것은 특정 값을 지원하지 않는 브라우저에 대한 대체를 생성하는 간단한 방법이 될 수 있습니다. 다음 예에서는 `font-size`가 두 번 선언됩니다. `clamp()`가 지원되면 이전 `font-size` 선언이 삭제됩니다. `clamp()`를 지원하지 않으면 초기 선언이 적용되고 font-size는 1.5rem이 됩니다.
+
+```css
+.my-element {
+  font-size: 1.5rem;
+  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbPMP' } %}</figure>
+
+{% Aside %} 동일한 속성을 두 번 선언하는 이 접근 방식은 브라우저가 이해하지 못하는 값을 무시하기 때문에 작동합니다. 일부 다른 프로그래밍 언어와 달리 CSS는 구문 분석할 수 없는 행을 감지할 때 오류를 발생시키거나 프로그램을 중단하지 않습니다. 구문 분석할 수 없는 값은 유효하지 않으므로 무시됩니다. 그런 다음 브라우저는 이미 이해하고 있는 내용을 깨뜨리지 않고 나머지 CSS를 계속 처리합니다. {% endAside %}
+
+{% Assessment 'position' %}
+
+## 특이성
+
+특정성은 가중치 또는 점수 시스템을 사용하여 계산을 수행하여 어떤 CSS 선택기가 가장 구체적인지를 결정하는 알고리즘입니다. 규칙을 보다 구체적으로 만들면 선택자와 일치하는 다른 CSS가 나중에 CSS에 나타나는 경우에도 규칙이 적용되도록 할 수 있습니다.
+
+[다음 레슨](/learn/css/specificity)에서는 특이성이 계산되는 방법에 대한 세부 정보를 배울 수 있지만 몇 가지 사항을 염두에 두면 너무 많은 특이성 문제를 방지하는 데 도움이 됩니다.
+
+요소의 클래스를 대상으로 하는 CSS는 해당 규칙을 보다 구체적으로 만들므로 요소만 대상으로 하는 CSS보다 적용하는 것이 더 중요합니다. 즉, 다음 CSS에서는 두 규칙이 모두 일치하고 `h1` 선택자에 대한 규칙이 스타일시트의 뒷부분에 나타나더라도 `h1`이 빨간색으로 바뀝니다.
+
+```html
+<h1 class="my-element">Heading</h1>
+```
+
+```css
+.my-element {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}
+```
+
+`id`는 CSS를 더욱 구체적으로 만들므로 ID에 적용된 스타일은 다른 많은 방법으로 적용된 스타일을 재정의합니다. `id`에 스타일을 추가하는 것이 좋지 않은 이유 중 하나입니다. 해당 스타일을 다른 것으로 덮어쓰기가 어려울 수 있습니다.
+
+### 특이성은 누적됨
+
+다음 강의에서 알 수 있듯이 각 선택기 유형에는 특정 요소를 대상으로 하는 데 사용한 모든 선택기에 대한 점수가 함께 추가되어 구체적인 정도를 나타내는 점수가 부여됩니다. `a.my-class.another-class[href]:hover`와 같은 선택기 목록이 있는 요소를 대상으로 지정하면 다른 CSS로 덮어쓰기가 상당히 어려운 항목을 얻게 됩니다. 이러한 이유로 CSS를 보다 쉽게 재사용할 수 있도록 선택기를 가능한 한 단순하게 유지하는 것이 좋습니다. 필요할 때 요소를 가져오기 위한 도구로 특이성을 사용하지만 가능하면 항상 길고 구체적인 선택기 목록을 리팩토링하는 것을 고려하십시오.
+
+## 오리진
+
+작성한 CSS가 페이지에 적용된 유일한 CSS는 아닙니다. 캐스케이드는 CSS의 출처를 고려합니다. 이 출처에는 브라우저의 내부 스타일시트, 브라우저 확장 또는 운영 체제에 의해 추가된 스타일, 작성한 CSS가 포함됩니다. **이러한 기원의 특이성 순서**는 가장 덜 구체적인 것에서 가장 구체적인 것 순으로 다음과 같습니다.
+
+1. **사용자 에이전트 기본 스타일**. 브라우저가 기본적으로 HTML 요소에 적용하는 스타일입니다.
+2. **로컬 사용자 스타일**. 이는 기본 글꼴 크기 또는 감소된 동작 기본 설정과 같은 운영 체제 수준에서 올 수 있습니다. 또한 사용자가 웹 페이지에 대한 사용자 정의 CSS를 작성할 수 있도록 하는 브라우저 확장과 같은 브라우저 확장에서 가져올 수도 있습니다.
+3. **작성된 CSS**. 작성하는 CSS입니다.
+4. **작성된 `!important`**. 작성한 선언에 추가하는 모든 `!important`.
+5. **로컬 사용자 스타일 `!important`**. 운영 체제 수준 또는 브라우저 확장 수준 CSS에서 가져온 모든 `!important`.
+6. **사용자 에이전트 `!important`**. 브라우저에서 제공하는 기본 CSS에 정의된 모든 `!important`.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/zPdaZ6G11oYrgJ78EfF7.svg", alt="목록에 설명된 원점 순서를 시각적으로 보여줍니다.", width="800", height="347" %}</figure>
+
+사용자가 작성한 CSS에 `!important` 규칙 유형이 있고 사용자가 사용자 지정 CSS에 `!important` 규칙 유형이 있는 경우 누구의 CSS가 승리합니까?
+
+{% Assessment 'origin' %}
+
+## 중요성
+
+모든 CSS 규칙이 서로 동일하게 계산되거나 서로 동일한 특이성이 부여되는 것은 아닙니다.
+
+**중요성의 순서**는 가장 덜 중요한 것부터 가장 중요한 것 순으로 다음과 같습니다.
+
+1. `font-size` , `background` 또는 `color`와 같은 일반 규칙 유형
+2. `animation` 규칙 유형
+3. `!important` 규칙 유형(원점과 동일한 순서를 따름)
+4. `transition` 규칙 유형
+
+활성 애니메이션 및 전환 규칙 유형은 일반 규칙보다 중요합니다. 전환의 경우 `!important` 규칙 유형보다 중요합니다. 애니메이션이나 전환이 활성화되면 예상되는 동작이 시각적 상태를 변경하기 때문입니다.
+
+## DevTools를 사용하여 일부 CSS가 적용되지 않는 이유 알아보기
+
+브라우저 DevTools는 일반적으로 요소와 일치할 수 있는 모든 CSS를 표시하고 사용되지 않는 CSS는 긋습니다.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Z6aLsqcqjGAUsWzq7DZs.png", alt="덮어쓴 CSS가 지워진 브라우저 DevTools의 이미지", width="800", height="446" %}</figure>
+
+적용할 것으로 예상한 CSS가 전혀 나타나지 않으면 요소와 일치하지 않는 것입니다. 이 경우 클래스나 요소 이름의 오타나 잘못된 CSS 등 다른 곳을 찾아야 합니다.
+
+{% Assessment 'conclusion' %}
+
+## 참고자료
+
+- [캐스케이드에 대한 고도로 상호 작용하는 설명자](https://wattenberger.com/blog/css-cascade)
+- [MDN 캐스케이드 참조](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
diff --git a/src/site/content/ko/learn/css/the-cascade/origin.assess.yml b/src/site/content/ko/learn/css/the-cascade/origin.assess.yml
new file mode 100644
index 00000000000..98fd0ca2f80
--- /dev/null
+++ b/src/site/content/ko/learn/css/the-cascade/origin.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of cascade origins
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      **Test your knowledge of cascade origins**, consider the following style
+      rules from various origins:
+
+      #### User-agent style
+      ```css
+      h1 { margin-block-start: 0.83em; }
+      ```
+
+      #### Bootstrap
+      ```css
+      h1 { margin-block-start: 20px; }
+      ```
+
+      #### Page Author styles
+      ```css
+      h1 { margin-block-start: 2ch; }
+
+      @media (max-width: 480px) {
+        h1 { margin-block-start: 1ch; }
+      }
+      ```
+
+      #### User custom style
+      ```css
+      h1 { margin-block-start: 2rem !important; }
+      ```
+
+      Then, given the following HTML:
+      ```html
+      <h1>Lorem ipsum</h1>
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What is the final `margin-block-start` of the `h1`?"
+    options:
+      - content: 20px
+        rationale: "Bootstrap is part of the authored origin, which loses to the
+        important local user style."
+      - content: 0.83em
+        rationale: "The user agent style origin loses to the important local
+        user style."
+      - content: 2rem
+        rationale: "This `!important` user custom style has the most specific
+        origin."
+      - content: 2ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
+      - content: 1ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
diff --git a/src/site/content/ko/learn/css/the-cascade/position.assess.yml b/src/site/content/ko/learn/css/the-cascade/position.assess.yml
new file mode 100644
index 00000000000..cd4560468b1
--- /dev/null
+++ b/src/site/content/ko/learn/css/the-cascade/position.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      If you have the following HTML on your page:
+
+      ```html
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <link rel="stylesheet" href="styles.css" />
+        </head>
+        <body>
+          <button>I am a button</button>
+          <style>
+            button {
+              background: pink;
+            }
+          </style>
+        </body>
+      </html>
+      ```
+
+      Inside `styles.css`, is the following CSS rule:
+
+      ```css
+      button {
+        background: yellow;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What color is the button's background?
+    options:
+      - content: pink
+        rationale: | 
+          The embedded `<style>` origin is further down the page than the
+          `<link>` tag, so while the specificity of `button` is the same, the
+          **position** of the style rule makes it win.
+      - content: yellow
+        rationale: | 
+          To the HTML document, the yellow button background may have been read
+          first, but a newer rule of the same specificity was discovered later,
+          making this rule not apply to the button.
\ No newline at end of file
diff --git a/src/site/content/ko/learn/index.md b/src/site/content/ko/learn/index.md
new file mode 100644
index 00000000000..8f7bf496258
--- /dev/null
+++ b/src/site/content/ko/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: 배우다
+---
diff --git a/src/site/content/ko/learn/learn.11tydata.js b/src/site/content/ko/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/ko/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ko/media/index.md b/src/site/content/ko/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/ko/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/ko/media/video-and-source-tags/index.md b/src/site/content/ko/media/video-and-source-tags/index.md
new file mode 100644
index 00000000000..a4d1480e4b1
--- /dev/null
+++ b/src/site/content/ko/media/video-and-source-tags/index.md
@@ -0,0 +1,227 @@
+---
+layout: post
+title: "<video> 및 <source> 태그"
+authors:
+  - samdutton
+  - joemedley
+  - derekherman
+description: 웹용 비디오 파일을 제대로 준비하고, 정확한 치수와 해상도를 주고, 다양한 브라우저를 위해 별도의 WebM 및 MP4 파일도 생성하셨네요. 그렇지만 모두가 보려면 웹 페이지에 추가해야 합니다.
+date: 2014-02-15
+updated: 2021-07-05
+tags:
+  - media
+---
+
+웹용 [비디오 파일을 제대로 준비](/prepare-media/)하고, 정확한 치수와 해상도를 주고, 다양한 브라우저를 위해 별도의 WebM 및 MP4 파일도 생성하셨네요. 그렇지만 모두가 보려면 웹 페이지에 추가해야 합니다.
+
+다른 사람이 비디오를 보려면 웹 페이지에 추가해야 합니다. [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video)와 [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source)라는 두 개의 HTML 요소를 추가해야 합니다. 이러한 태그의 기본 사항 외에도 이 문서에서는 우수한 사용자 경험을 만들기 위해 해당 태그에 추가해야 하는 속성에 대해 설명합니다.
+
+{% Aside %} 언제든지 [YouTube](https://www.youtube.com/) 또는 [Vimeo](https://vimeo.com)에 파일을 업로드할 수 있습니다. 대부분의 경우 여기에 설명된 절차보다 이 방법이 더 좋습니다. 이러한 서비스는 형식 지정 및 파일 형식 변환을 처리할 뿐만 아니라 웹 페이지에 비디오를 포함할 수 있는 수단을 제공합니다. 직접 관리해야 하는 경우 계속 읽으십시오. {% endAside %}
+
+## 단일 파일 지정
+
+권장되지는 않지만 비디오 요소를 단독으로 사용할 수 있습니다. 항상 아래와 같이 `type` 속성을 사용하십시오. 브라우저는 이를 사용하여 제공된 비디오 파일을 재생할 수 있는지 확인합니다. 그렇지 않은 경우 동봉된 텍스트가 표시됩니다.
+
+```html
+<video src="chrome.webm" type="video/webm">
+    <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+### 여러 파일 형식 지정
+
+모든 브라우저가 동일한 비디오 형식을 지원하지 않는다는 것을 [미디어 파일 기본 사항](/media-file-basics/)에서 상기하십시오. `<source>` 요소를 사용하면 사용자의 브라우저가 그 중 하나를 지원하지 않는 경우를 대비하여 여러 형식을 대체 형식으로 지정할 수 있습니다.
+
+아래 예제에서는 이 문서의 뒷부분에서 예제로 사용되는 포함된 비디오를 생성합니다.
+
+```html
+<video controls>
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
+  <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+[Glitch에서 사용해 보세요](https://track-demonstration.glitch.me)([소스](https://glitch.com/edit/#!/track-demonstration))
+
+{% Aside %} 이전 예에서 `controls` 속성이 도입되었음을 알 수 있습니다. 이것은 사용자가 볼륨, 탐색, 캡션 선택, 재생 일시 중지/재개를 비롯한 비디오 재생을 제어할 수 있도록 브라우저에 지시합니다. {% endAside %}
+
+선택 사항이지만 `<source>` 태그에 `type` 속성을 항상 추가해야 합니다. 이렇게 하면 브라우저가 재생할 수 있는 파일만 다운로드합니다.
+
+이 접근 방식은 특히 모바일에서 다양한 HTML 또는 서버 측 스크립팅을 제공하는 것보다 몇 가지 이점이 있습니다.
+
+- 선호하는 순서대로 형식을 나열할 수 있습니다.
+- 클라이언트 측 스위칭은 대기 시간을 줄입니다. 콘텐츠를 가져오기 위해 한 번만 요청됩니다.
+- 브라우저가 형식을 선택하도록 하는 것이 사용자 에이전트 감지와 함께 서버 측 지원 데이터베이스를 사용하는 것보다 더 간단하고 빠르며 잠재적으로 더 안정적입니다.
+- 각 파일 소스의 유형을 지정하면 네트워크 성능이 향상됩니다. 브라우저는 형식을 "스니핑"하기 위해 비디오의 일부를 다운로드하지 않고도 비디오 소스를 선택할 수 있습니다.
+
+이러한 문제는 대역폭과 대기 시간이 중요하고 사용자의 인내심이 제한될 가능성이 있는 모바일 컨텍스트에서 특히 중요합니다. `type` 속성을 생략하면 지원되지 않는 유형의 소스가 여러 개 있는 경우 성능에 영향을 줄 수 있습니다.
+
+세부 정보를 자세히 알아 볼 수 있는 몇 가지 방법이 있습니다. 비디오와 오디오가 웹에서 어떻게 작동하는지 자세히 알아보려면 [괴짜를 위한 디지털 미디어 입문서](https://www.xiph.org/video/vid1.shtml)를 확인하십시오. 또한 DevTools에서 [원격 디버깅](https://developer.chrome.com/docs/devtools/remote-debugging/)을 사용하여 [유형 속성이 있는](https://googlesamples.github.io/web-fundamentals/fundamentals/media/video-main.html) 네트워크 활동과 [유형 속성이 없는](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/notype.html) 네트워크 활동을 비교할 수 있습니다.
+
+{% Aside 'caution' %} 브라우저 개발자 도구에서 응답 헤더를 확인하여 서버가 [올바른 MIME 유형을 보고하는지 확인하십시오](https://developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types). 그렇지 않으면 비디오 소스 유형 검사가 작동하지 않습니다. {% endAside %}
+
+### 시작 및 종료 시간 지정
+
+대역폭을 절약하고 사이트의 반응성을 높이십시오. 미디어 조각을 사용하여 비디오 요소에 시작 및 종료 시간을 추가하십시오.
+
+<figure>
+  <video controls width="100%">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm#t=5,10" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4#t=5,10" type="video/mp4">
+    <p>이 브라우저는 비디오 요소를 지원하지 않습니다.</p>
+  </source></source></video></figure>
+
+미디어 조각을 사용하려면 `#t=[start_time][,end_time]`을 추가합니다. 예를 들어, 5초에서 10초 사이의 비디오를 재생하려면 다음을 지정합니다.
+
+```html
+<source src="video/chrome.webm#t=5,10" type="video/webm">
+```
+
+`<hours>:<minutes>:<seconds>`으로 시간을 지정할 수도 있습니다. 예를 들어 `#t=00:01:05`는 1분 5초에서 동영상을 시작합니다. 비디오의 처음 1분만 재생하려면 `#t=,00:01:00`으로 지정하세요.
+
+이 기능을 사용하면 여러 파일을 인코딩하고 제공할 필요 없이 DVD의 큐 포인트와 같이 동일한 비디오에서 여러 보기를 제공할 수 있습니다.
+
+이 기능이 작동하려면 서버가 범위 요청을 지원해야 하고 해당 기능을 활성화해야 합니다. 대부분의 서버는 기본적으로 범위 요청을 활성화합니다. 일부 호스팅 서비스는 이 기능을 끄므로 사이트에서 조각을 사용하기 위해 범위 요청을 사용할 수 있는지 확인해야 합니다.
+
+다행히 브라우저 개발자 도구에서 이 작업을 수행할 수 있습니다. 예를 들어 Chrome에서는 [네트워크 패널에](https://developer.chrome.com/docs/devtools/#network) 있습니다. `Accept-Ranges` `bytes` 라고 표시되어 있는지 확인합니다. 이미지에서 이 헤더 주위에 빨간색 상자를 그렸습니다. `bytes` 가 표시되지 않으면 호스팅 제공업체에 문의해야 합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/20DlLyicG5PAo6TXBKh3.png", alt="Chrome DevTools 스크린샷. Accept-Ranges: 바이트.", width="800", height="480" %} <figcaption> Chrome DevTools 스크린샷. Accept-Ranges: 바이트.</figcaption></figure>
+
+### 포스터 이미지 포함
+
+`video`를 다운로드하거나 재생을 시작할 필요 없이 요소가 로드되는 즉시 시청자가 어떤 콘텐츠인지 알 수 있도록 비디오 요소에 포스터 속성을 추가하십시오.
+
+```html
+<video poster="poster.jpg" ...>
+  …
+</video>
+```
+
+`src`가 손상되었거나 제공된 비디오 형식이 지원되지 않는 경우 포스터가 대체될 수도 있습니다. 포스터 이미지의 유일한 단점은 일부 대역폭을 소비하고 렌더링이 필요한 추가 파일 요청입니다. 자세한 내용은 [이미지를 효율적으로 인코딩](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)을 참조하십시오.
+
+<div class="switcher">{% Compare 'worse' %}<figure data-float="left"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/R8VNeplKwajJhOuVkPDT.png", alt="대체 포스터가 없으면 동영상이 깨져 보입니다.", width="360", height="600" %}</figure>
+</div>
+<p data-md-type="paragraph">{% CompareCaption %} 대체 포스터가 없으면 동영상이 깨져 보입니다. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html"><figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rNhydHVGeL2P0sQ0je5k.png", alt="대체 포스터는 첫 번째 프레임이 캡처된 것처럼 보이게 합니다.", width="360", height="600" %}</figure></div>
+<p data-md-type="paragraph">{% CompareCaption %} 대체 포스터는 첫 번째 프레임이 캡처된 것처럼 보이게 합니다. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+### 동영상이 컨테이너를 넘지 않도록 합니다
+
+비디오 요소가 뷰포트에 비해 너무 크면 컨테이너가 오버플로되어 사용자가 콘텐츠를 보거나 컨트롤을 사용할 수 없게 될 수 있습니다.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cDl2OfCE3hQivhaNvMUh.png", alt="Android Chrome 스크린샷, 세로: 스타일이 지정되지 않은 동영상 요소가 뷰포트를 초과합니다.", width="338", height="600" %}<figcaption> Android Chrome 스크린샷, 세로: 스타일이 지정되지 않은 동영상 요소가 표시 영역을 넘습니다.</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCiZsNkZNsAhWbOBsLCs.png", alt="Android Chrome 스크린샷, 가로: 스타일이 지정되지 않은 동영상 요소가 뷰포트를 초과합니다.", width="800", height="450" %}<figcaption> Android Chrome 스크린샷, 가로: 스타일이 지정되지 않은 동영상 요소가 뷰포트를 넘습니다.</figcaption></figure>
+</div>
+
+CSS를 사용하여 비디오 크기를 제어할 수 있습니다. CSS가 모든 요구 사항을 충족하지 못하는 경우 YouTube 및 기타 소스의 비디오에 대해서도 [FitVids](http://fitvidsjs.com/)(이 기사의 범위를 벗어남)와 같은 JavaScript 라이브러리 및 플러그인이 도움이 될 수 있습니다. 불행히도 이러한 리소스는 [네트워크 페이로드 크기](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)를 증가시켜 수익과 부정적인 결과를 초래하고 사용자에게는 많은 비용이 발생할 수 있습니다.
+
+여기에서 설명하는 것과 같은 간단한 용도의 경우 [CSS 미디어 쿼리](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#css-media-queries)를 사용하여 뷰포트 크기에 따라 요소의 크기를 지정합니다. `max-width: 100%`를 사용하세요.
+
+iframe의 미디어 콘텐츠(예: YouTube 동영상)의 경우 반응형 접근 방식(예: [John Surdakowski가 제안한](http://avexdesigns.com/responsive-youtube-embed/) 방식)을 시도해 보세요.
+
+{% Aside 'caution' %} 원본 동영상과 [가로 세로 비율](https://www.google.com/search?q=aspect+ratio&oq=aspect+ratio&aqs=chrome..69i57j35i39j0l6.1896j0j7&sourceid=chrome&ie=UTF-8)이 다른 요소 크기를 강제로 조정하지 마세요. 찌그러지거나 늘어진 비디오는 끔찍해 보입니다. {% endAside %}
+
+#### CSS
+
+```css
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+```
+
+#### HTML
+
+```html
+<div class="video-container">
+  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
+          frameborder="0" width="560" height="315">
+  </iframe>
+</div>
+```
+
+[사용해 보기](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html)
+
+[반응형 샘플](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html)을 [비 반응형 버전](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/unyt.html)과 비교해 보세요. 보시다시피 응답이 없는 버전은 훌륭한 사용자 경험이 아닙니다.
+
+### 장치 방향
+
+장치 방향은 데스크톱 모니터나 랩톱에서 문제가 되지 않지만 모바일 장치 및 태블릿용 웹 페이지 디자인을 고려할 때 매우 중요합니다.
+
+iPhone의 Safari는 세로 방향과 가로 방향 사이를 잘 전환합니다.
+
+<div class="switcher">
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AmHneDShMOioWZwYG2kF.png", alt="iPhone의 Safari에서 재생되는 비디오 스크린샷(세로).", width="338", height="600" %}<figcaption> iPhone의 Safari에서 재생 중인 비디오의 스크린샷(세로).</figcaption></figure><figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MZwkLJaXVk4g8lruhiKZ.png", alt="iPhone의 Safari에서 재생되는 비디오의 스크린샷(가로).", width="600", height="338" %} <figcaption> iPhone의 Safari에서 재생 중인 비디오의 스크린샷(가로).</figcaption></figure>
+</div>
+
+iPad 및 Android Chrome에서 기기 방향은 문제가 될 수 있습니다. 예를 들어, 사용자 정의 없이 iPad에서 가로 방향으로 재생되는 비디오는 다음과 같은 모습입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9FsExgY6cJFfMkxOPNkl.png", alt="iPad의 Safari에서 재생되는 비디오의 스크린샷(가로)",  width="600", height="450" %}<figcaption> iPad의 Safari에서 재생 중인 비디오의 스크린샷(가로).</figcaption></figure>
+
+CSS를 사용하여 비디오를 `width: 100%` 혹은 `max-width: 100%`로 설정하면 많은 장치 방향 레이아웃 문제를 해결할 수 있습니다.
+
+### 자동 재생
+
+`autoplay` 속성은 브라우저가 비디오를 즉시 다운로드하고 재생할지 여부를 제어합니다. 정확한 작동 방식은 플랫폼과 브라우저에 따라 다릅니다.
+
+- Chrome: 보기가 데스크톱인지, 모바일 사용자가 홈 화면에 사이트 또는 앱을 추가했는지 여부를 포함하되 이에 국한되지 않는 여러 요인에 따라 달라집니다. 자세한 내용은 [자동 재생 모범 사례](/autoplay-best-practices/)를 참조하세요.
+
+- Firefox: 모든 비디오 및 사운드를 차단하지만 사용자에게 모든 사이트 또는 특정 사이트에 대한 이러한 제한을 완화할 수 있는 기능을 제공합니다. 자세한 내용은 [Firefox에서 미디어 자동 재생 허용 또는 차단](https://support.mozilla.org/en-US/kb/block-autoplay)을 참조하세요.
+
+- Safari: 역사적으로 사용자 제스처가 필요했지만 최근 버전에서는 이 요구 사항을 완화했습니다. 자세한 내용은 [iOS용 새 &lt;video&gt; 정책](https://webkit.org/blog/6784/new-video-policies-for-ios/)을 참조하십시오.
+
+자동 재생이 가능한 플랫폼에서도 자동 재생을 활성화하는 것이 좋은지 고려해야 합니다.
+
+- 데이터 요금이 비쌀 수 있습니다.
+- 사용자가 원하기 전에 미디어를 재생하면 대역폭과 CPU가 소모되어 페이지 렌더링이 지연될 수 있습니다.
+- 사용자가 비디오 또는 오디오 재생이 방해가 되는 상황에 있을 수 있습니다.
+
+### 사전 로드
+
+`preload` 속성은 브라우저에 미리 로드할 정보나 콘텐츠의 양에 대한 힌트를 제공합니다.
+
+<table class="responsive">
+  <thead>
+    <tr>
+      <th>값</th>
+      <th>설명</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Value"><code>none</code></td>
+      <td data-th="Description">사용자가 비디오를 보지 않기로 선택할 수 있으므로 아무 것도 미리 로드하지 않습니다.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>metadata</code></td>
+      <td data-th="Description">메타데이터(시간, 크기, 텍스트 트랙)는 미리 로드하지만 최소한의 동영상만 로드 됩니다.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>auto</code></td>
+      <td data-th="Description">전체 비디오를 즉시 다운로드하는 것이 바람직한 것으로 간주됩니다. 빈 문자열은 동일한 결과를 생성합니다.</td>
+    </tr>
+  </tbody>
+</table>
+
+`preload` 속성은 플랫폼마다 다른 영향을 미칩니다. 예를 들어 Chrome은 데스크톱에서 25초 분량의 비디오를 버퍼링하지만 iOS 또는 Android에서는 버퍼링하지 않습니다. 즉, 모바일에서는 데스크톱에서는 발생하지 않는 재생 시작 지연이 있을 수 있습니다. 자세한 내용은 [오디오 및 비디오 사전 로드로 빠른 재생](/fast-playback-with-preload/) 또는 [Steve Souders의 블로그](https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/)를 참조하십시오.
+
+이제 웹 페이지에 미디어를 추가하는 방법을 알았으므로 청각 장애인을 위해 비디오에 캡션을 추가하거나 오디오를 재생할 수 없는 경우를 위한 [미디어 접근성](/media-accessibility/)에 대해 알아볼 차례입니다.
diff --git a/src/site/content/ko/metrics/cls/index.md b/src/site/content/ko/metrics/cls/index.md
new file mode 100644
index 00000000000..df117799338
--- /dev/null
+++ b/src/site/content/ko/metrics/cls/index.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Cumulative Layout Shift(누적 레이아웃 이동, CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-13
+description: 이 게시물에서는 누적 레이아웃 이동(CLS) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %} **2021년 6월 1일:** CLS 구현이 변경되었습니다. 변경 이유에 대해 자세히 알아보려면 [진화하는 CLS 메트릭](/evolving-cls)을 확인하시기 바랍니다. {% endAside %}
+
+{% Aside 'key-term' %} 누적 레이아웃 이동(CLS)은 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화하므로 [시각적 안정성](/user-centric-performance-metrics/#types-of-metrics)을 측정할 때 중요한 사용자 중심 메트릭입니다. CLS가 낮으면 [우수](/user-centric-performance-metrics/#questions)한 사용자 경험을 보장하는 데 도움이 됩니다. {% endAside %}
+
+페이지에 갑자기 바뀌는 부분이 생기는 온라인 기사를 읽으신 경험이 있으신가요? 아무런 경고 없이 텍스트가 움직이며 읽던 부분을 놓치게 되거나, 더 심한 경우 링크나 버튼을 탭하기 직전 갑작스레 링크가 움직이는 바람에 다른 걸 클릭할 수도 있습니다.
+
+대부분의 경우 이러한 경험은 짜증스러운 정도에서 그치지만, 경우에 따라 실제 피해를 겪게 될 수 있습니다.
+
+<figure>
+  <video autoplay controls loop muted poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png" width="658" height="510">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>불안정한 레이아웃이 사용자에게 어떻게 부정적인 영향을 미칠 수 있는지 보여주는 스크린캐스트.</figcaption></figure>
+
+페이지 콘텐츠의 예기치 않은 이동은 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠 위의 페이지에 동적으로 추가되기 때문에 발생합니다. 원인은 알 수 없는 크기의 이미지나 동영상, 대체 크기보다 크거나 작게 렌더링되는 글꼴, 동적으로 크기가 조정되는 타사 광고 또는 위젯일 수 있습니다.
+
+이것이 더욱 큰 문제가 되는 이유는 개발 중인 사이트가 기능하는 방식이 종종 사용자가 경험하는 방식과 상당히 다르다는 것입니다. 대부분 개인화된 콘텐츠나 타사 콘텐츠는 프로덕션 환경에서는 개발 환경과 동일하게 작동하지 않고, 테스트 이미지는 이미 개발자의 브라우저 캐시에 존재하며, 로컬에서 실행되는 API 호출이 너무 빨라 지연이 눈에 띄지 않는 경우가 많기 때문입니다.
+
+누적 레이아웃 이동(CLS) 메트릭은 실제 사용자에게 이러한 일이 발생하는 빈도를 측정하여 이 문제를 해결하는 데 도움을 줍니다.
+
+## CLS란 무엇인가요?
+
+CLS는 페이지의 전체 수명 동안 발생하는 모든 [예기치 않은](/cls/#expected-vs-unexpected-layout-shifts) 레이아웃 이동에 대해 가장 큰 *레이아웃 이동 점수* 버스트를 뜻합니다.
+
+*레이아웃 이동*은 시각적 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때마다 발생합니다. 개별 [레이아웃 이동 점수](#layout-shift-score) 계산 방법에 대한 자세한 내용은 아래를 참조하세요.
+
+[*세션 기간*](evolving-cls/#why-a-session-window)으로 알려진 레이아웃 이동 버스트는 하나 이상의 개별 레이아웃 이동이 빠르게 연속해서 이루어지는 경우를 뜻합니다. 이때 각 레이아웃 사이 간격은 1초 미만이며, 총 기간은 최대 5초입니다.
+
+가장 큰 버스트는 해당 기간 내 모든 레이아웃 이동에 대해 누적 점수가 최대인 세션 기간입니다.
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>세션 기간의 예시입니다. 파란색 막대는 개별 레이아웃 이동의 점수를 나타냅니다.</figcaption></figure>
+
+{% Aside 'caution' %} 이전 CLS는 페이지의 전체 수명 동안 발생한 *모든 개별 레이아웃 이동 점수*의 합계를 측정했습니다. 원래 구현과 비교하여 벤치마킹할 수 있는 기능을 제공하는 도구가 무엇인지 확인하려면 [웹 도구에서 진화하는 누적 레이아웃 이동](/cls-web-tooling)을 참조하세요. {% endAside %}
+
+### 좋은 CLS 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하려면 사이트의 CLS 점수가 **0.1** 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 **75번째 백분위수**를 측정하는 것이 바람직한 임계값입니다.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="양호한 CLS 값은 0.1 미만이고 불량한 값은 0.25보다 크며 그 사이에는 개선이 필요합니다", width="400", height="300" %}
+</picture>
+
+{% Aside %} 이러한 권장 사항의 기반이 되는 연구 및 방법론에 대해 자세히 알아보려면 [Core Web Vitals 메트릭 임계값 정의](/defining-core-web-vitals-thresholds/)를 참조하시기 바랍니다. {% endAside %}
+
+## 레이아웃 이동 상세 정보
+
+레이아웃 이동은 [Layout Instability API](https://github.com/WICG/layout-instability)가 정의하는 것으로, 뷰포트 내의 가시적 요소가 두 프레임 사이에서 시작 위치가 변경될 때마다(예: 기본 [쓰기 모드](https://developer.mozilla.org/docs/Web/CSS/writing-mode) 의 상단 및 왼쪽 위치) `layout-shift` 항목을 보고합니다. 그리고 이러한 요소는 *불안정 요소*로 간주됩니다.
+
+레이아웃 이동은 기존 요소가 시작 위치를 변경할 때만 발생합니다. 새 요소가 DOM에 추가되거나 기존 요소의 크기가 변경되면 변경으로 인해 다른 가시적 요소의 시작 위치가 변경되지 않는 한 레이아웃 이동으로 간주되지 않습니다.
+
+### 레이아웃 이동 점수
+
+*레이아웃 이동 점수*를 계산하기 위해 브라우저는 렌더링된 두 개의 프레임 사이 뷰포트의 크기와 뷰포트 내 *불안정 요소*의 움직임을 살핍니다. 레이아웃 이동 점수는 해당 움직임에 대한 *impact fraction*(영향분율)과 *distacne fraction*(거리분율)이라는 두 가지 측정값을 사용해 계산합니다.
+
+```text
+layout shift score = impact fraction * distance fraction
+```
+
+### 영향분율
+
+[영향분율](https://github.com/WICG/layout-instability#Impact-Fraction)은 *불안정 요소*가 두 프레임 사이 뷰포트 영역에 미치는 영향을 측정합니다.
+
+이전 프레임과 현재 프레임 *모두*에서 *불안정 요소* 가시 영역의 합집함은 뷰포트 총 영역의 일부로서 현재 프레임에 대한 *영향분율*입니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt=" *불안정 요소*가 하나 있는 영향분율 예시", width="800", height="600", linkTo=true %}
+
+위 이미지에는 한 프레임에서 뷰포트의 절반을 차지하는 요소가 있습니다. 다음 프레임에서는 요소가 뷰포트 높이의 25%만큼 아래로 이동합니다. 빨간색 점선 직사각형은 두 프레임 모두에서 요소의 가시 영역을 합한 것입니다. 이 경우 전체 뷰포트의 75%이므로 *영향분율*은 `0.75`입니다.
+
+### 거리분율
+
+레이아웃 이동 점수 방정식의 또 다른 부분은 뷰포트를 기준으로 불안정 요소가 이동한 거리를 측정합니다. *거리분율*은 프레임에서 *불안정 요소*가 수평 또는 수직으로 이동한 최대 거리를 뷰포트의 가장 큰 치수(너비 또는 높이 중 더 큰 것)로 나눈 값입니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="*불안정 요소*가 하나 있는 거리분율 예시", width="800", height="600", linkTo=true %}
+
+위의 예에서 가장 큰 뷰포트 치수는 높이이고 불안정한 요소는 뷰포트 높이의 25%만큼 이동하였으므로 *거리분율*은 0.25가 됩니다.
+
+따라서 이 예에서 *영향분율*은 `0.75`이고 *거리분율*은 `0.25`이므로 *레이아웃 이동 점수* 는 `0.75 * 0.25 = 0.1875` 입니다.
+
+{% Aside %} 처음에 레이아웃 이동 점수는 *영향분율*만을 기준으로 계산되었습니다. 그러다가 크기가 큰 요소가 소량으로 이동하는 경우에 과도한 페널티를 주는 것을 피하기 위해 *거리분율*이 도입되었습니다. {% endAside %}
+
+다음 예는 기존 요소에 콘텐츠를 추가하면 레이아웃 이동 점수에 어떤 영향을 미치는지 보여줍니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="안정적 요소, *불안정 요소*, 뷰포트 클리핑이 있는 레이아웃 이동 예시", width="800", height="600", linkTo=true %}
+
+"Click Me!" 버튼이 검은색 텍스트가 있는 회색 상자의 맨 아래에 추가되어 흰색 텍스트가 있는 녹색 상자를 아래로(그리고 부분적으로 뷰포트 밖으로) 밀어냅니다.
+
+이 예에서 회색 상자는 크기가 변경되지만 시작 위치는 변경되지 않으므로 *불안정 요소* 가 아닙니다.
+
+"Click Me!" 버튼은 이전에 DOM에 없었으므로 시작 위치도 변경되지 않습니다.
+
+그러나 녹색 상자의 경우 시작 위치는 변경되었지만 부분적으로 뷰포트 밖으로 이동되었으며 *영향분율*을 계산할 때 보이지 않는 영역은 고려되지 않습니다. 두 프레임(빨간색 점선 직사각형으로 표시)에서 녹색 상자의 가시 영역 합은 첫 번째 프레임의 녹색 상자 영역(뷰포트의 50%)과 동일합니다. 그러므로 *영향분율*은 `0.5`입니다.
+
+*거리분율*은 보라색 화살표로 표시되어 있습니다. 녹색 상자는 뷰포트의 약 14%만큼 아래로 이동하였으므로 *거리분율*은 `0.14`입니다.
+
+레이아웃 이동 점수는 `0.5 x 0.14 = 0.07`입니다.
+
+마지막 예시에는 *불안정 요소*가 여러 개 있습니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="안정적 요소, *불안정 요소*가 여러 개 있는 레이아웃 이동 예시", width="800", height="600", linkTo=true %}
+
+위의 첫 번째 프레임에는 동물에 대한 API 요청의 네 가지 결과가 알파벳순으로 정렬되어 있습니다. 두 번째 프레임에서는 정렬된 목록에 더 많은 결과가 추가됩니다.
+
+목록의 첫 번째 항목("Cat")은 프레임 간에 시작 위치를 변경하지 않으므로 안정적입니다. 마찬가지로 목록에 추가된 새 항목은 이전에 DOM에 없었으므로 시작 위치가 변경되지 않았습니다. 그러나 "Dog", "Horse", "Zebra"라고 표시된 항목은 모두 시작 위치가 변경되었으므로 *불안정 요소*입니다.
+
+다시 말하지만, 빨간색 점선 직사각형은 이 세 가지 *불안정 요소*에 대한 전후 영역의 합을 나타내며, 이 경우 뷰포트 영역의 약 38%라고 볼 수 있습니다(*영향분율*: `0.38`).
+
+화살표는 *불안정 요소*가 시작 위치에서 이동한 거리를 나타냅니다. 파란색 화살표로 표시된 "Zebra" 요소가 뷰포트 높이의 30% 정도로 가장 많이 이동했습니다. 따라서 이 예에서 *거리분율*은 `0.3`입니다.
+
+레이아웃 전환 점수는 `0.38 x 0.3 = 0.1172`입니다.
+
+### 예상한 레이아웃 이동 vs. 예상치 못한 레이아웃 이동
+
+모든 레이아웃 변경이 나쁜 것은 아닙니다. 실제로 많은 동적 웹 응용 프로그램은 페이지에서 요소의 시작 위치를 자주 변경합니다.
+
+#### 사용자 개시 레이아웃 이동
+
+레이아웃 이동은 사용자가 예상하지 않은 경우에만 나쁩니다. 반면에 사용자 상호 작용(링크 클릭, 버튼 누르기, 검색 상자 입력 등)에 대한 응답으로 발생하는 레이아웃 이동은 사용자에게 그 관계가 명확하게 보이는 한 괜찮습니다.
+
+예를 들어, 사용자 상호 작용이 완료하는 데 시간이 걸릴 수 있는 네트워크 요청을 트리거하는 경우 요청이 완료될 때 사용자에게 불편한 레이아웃 이동을 피하기 위해 즉시 공간을 만들고 로딩 표시기를 표시하는 것이 가장 좋습니다. 사용자가 무언가가 로드되고 있다는 사실을 깨닫지 못하거나 리소스가 언제 준비될지 알지 못하는 경우 대기 시간에 뭔가 다른 것을 클릭하게 될 수도 있습니다.
+
+사용자 입력 후 500밀리초 이내에 발생하는 레이아웃 이동에는 [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput) 플래그가 설정되어 계산에서 제외됩니다.
+
+{% Aside 'caution' %} `hadRecentInput` 플래그는 탭, 클릭 또는 키 누르기와 같은 개별 입력 이벤트에 대해서만 true가 됩니다. 스크롤, 드래그, 핀치 및 줌 제스처와 같은 지속적인 상호 작용은 "최근 입력"으로 간주되지 않습니다. 자세한 내용은 [레이아웃 불안정 요소 사양](https://github.com/WICG/layout-instability#recent-input-exclusion) 을 참조하세요. {% endAside %}
+
+#### 애니메이션 및 전환
+
+제대로 된 애니메이션 및 전환은 사용자를 놀라게 하지 않고서도 페이지의 콘텐츠를 업데이트할 수 있는 좋은 방법입니다. 페이지에서 갑자기 예기치 않게 콘텐츠가 이동하는 경우는 거의 항상 좋지 않은 사용자 경험으로 이어집니다 그러나 한 위치에서 다음 위치로 점진적이고 자연스럽게 이동하는 콘텐츠는 사용자가 상황을 더 잘 이해하고, 사용자에게 상태의 변경을 안내하는 데 도움이 됩니다.
+
+CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) 속성을 사용하면 레이아웃 이동을 트리거하지 않고 요소에 애니메이션을 적용할 수 있습니다.
+
+- `height` 및 `width` 속성을 변경하는 대신 `transform: scale()`을 사용하세요.
+- 요소를 이동하려면 `top` , `right` , `bottom` 또는 `left` 속성을 변경하는 것은 피하고, 대신 `transform: translate()`를 사용하세요.
+
+## CLS 측정 방법
+
+CLS는 [실험실](/user-centric-performance-metrics/#in-the-lab)이나 [현장](/user-centric-performance-metrics/#in-the-field)에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.
+
+{% Aside 'caution' %} 실험실 도구는 일반적으로 인공적인 환경에서 페이지를 로드하므로 페이지 로드 중에 발생하는 레이아웃 이동만 측정할 수 있습니다. 결과적으로 주어진 페이지에 대해 랩 도구에서 보고한 CLS 값은 실제 사용자가 실제로 경험하는 것보다 작을 수 있습니다. {% endAside %}
+
+### 현장 도구
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console(Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)
+
+### 실험실 도구
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### JavaScript에서 CLS 측정
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+JavaScript에서 CLS를 측정하려면 [Layout Instability API를](https://github.com/WICG/layout-instability) 사용할 수 있습니다. 다음 예시에서는 예기치 않은 `layout-shift` 항목을 수신 대기하고, 세션으로 그룹화하고, 변경될 때마다 최대 세션 값을 기록하는 [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) 를 생성하는 방법을 보여줍니다.
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // Only count layout shifts without recent user input.
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // Log the updated value (and its entries) to the console.
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+이 코드는 CLS를 계산하고 기록하는 기본적인 방법을 보여줍니다. 그러나 [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)(CrUX)에서 측정된 것과 일치하는 방식으로 CLS를 정확하게 측정하는 것은 보다 복잡한 문제입니다. 자세한 내용은 아래를 참조하세요.
+
+{% endAside %}
+
+대부분의 경우 페이지가 언로드되는 시점의 현재 CLS 값이 해당 페이지의 최종 CLS 값이지만 몇 가지 중요한 예외 사항이 있습니다.
+
+다음 섹션에는 API가 보고하는 내용과 메트릭이 계산되는 방법 사이의 차이점이 나열되어 있습니다.
+
+#### 메트릭과 API의 차이점
+
+- 페이지가 백그라운드에서 로드되거나 브라우저가 콘텐츠를 페인팅하기 전에 백그라운드화된 경우 CLS 값을 보고하지 않습니다.
+- 페이지가 [백/포워드 캐시](/bfcache/#impact-on-core-web-vitals)에서 복원될 때 사용자는 이를 별개의 페이지 방문으로 경험하므로 해당 CLS 값을 0으로 재설정해야 합니다.
+- API는 iframe 내에서 발생하는 이동에 대한 `layout-shift` 항목을 보고하지 않지만 CLS를 적절하게 측정하려면 이를 고려해야 합니다. 하위 프레임은 [집계](https://github.com/WICG/layout-instability#cumulative-scores)를 위해 API를 사용하여 상위 프레임에 `layout-shift` 항목을 보고할 수 있습니다.
+
+이러한 예외 외에도 CLS는 페이지의 전체 수명을 측정하기 때문에 조금 더 복잡해집니다.
+
+- 사용자는 며칠, 몇 주, 몇 달 등 *매우* 오랫동안 탭을 열어 둘 수 있습니다. 실제로 사용자는 탭을 닫지 않을 수도 있습니다.
+- 모바일 운영 체제에서 브라우저는 일반적으로 백그라운드 탭에 대해 페이지 언로드 콜백을 실행하지 않으므로 "최종" 값을 보고하기 어렵습니다.
+
+이러한 경우를 처리하려면 페이지가 언로드될 때뿐 아니라 페이지가 백그라운드일 때마다 CLS를 보고해야 합니다([`visibilitychange` 이벤트](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange)는 이 두 시나리오 모두에 적용됨). 그리고 이 데이터를 수신하는 분석 시스템은 백엔드에서 최종 CLS 값을 계산해야 합니다.
+
+개발자는 이러한 모든 경우를 직접 암기하고 고심하지 않아도, [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)를 사용해 위에서 언급한 모든 것을 처리하는 CLS를 측정할 수 있습니다.
+
+```js
+import {onCLS} from 'web-vitals';
+
+// Measure and log CLS in all situations
+// where it needs to be reported.
+onCLS(console.log);
+```
+
+JavaScript에서 CLS를 측정하는 방법에 대한 전체 예제는 [`onCLS)` 의 소스 코드](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts)를 참조하세요.
+
+{% Aside %} 일부 경우(예: 교차 원본 iframe) JavaScript에서 CLS를 측정할 수 없습니다. 자세한 내용은 `web-vitals` 라이브러리의 [제한 사항](https://github.com/GoogleChrome/web-vitals#limitations) 섹션을 참조하세요. {% endAside %}
+
+## CLS를 개선하는 방법
+
+대부분의 웹사이트에서 다음과 같은 몇 가지 기본 원칙을 준수하면 예기치 않은 레이아웃 이동을 모두 방지할 수 있습니다.
+
+- **이미지 및 비디오 요소에 항상 크기 속성을 포함하거나 [CSS 가로 세로 비율 상자](https://css-tricks.com/aspect-ratio-boxes/)와 같은 방식으로 필요한 공간을 미리 확보하세요.** 이러한 접근 방식을 사용하면 이미지가 로드되는 동안 브라우저가 문서에 올바른 양의 공간을 할당할 수 있습니다. [unsized-media 기능 정책](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md)을 사용하여 기능 정책을 지원하는 브라우저에서 이 동작을 강제할 수도 있습니다.
+- **사용자 상호 작용에 대한 응답을 제외하고는 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.** 이렇게 하면 레이아웃 이동이 발생하기 때문입니다.
+- **레이아웃 변경을 트리거하는 속성의 애니메이션보다 전환 애니메이션을 사용하세요.** 상태에서 상태로 컨텍스트와 연속성을 제공하는 방식으로 애니메이션 전환을 수행하는 것이 좋습니다.
+
+CLS를 개선하는 방법에 대한 자세한 내용은 [CLS 최적화](/optimize-cls/) 및 [레이아웃 이동 디버그](/debug-layout-shifts)를 참조하세요.
+
+## 추가 리소스
+
+- [레이아웃 이동 최소화](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)에 대한 Google Publisher Tag 지침
+- [#PerfMatters](https://youtu.be/zIJuY-JCjqw)(2020년), [Annie Sullivan](https://anniesullie.com/)과 [Steve Kobes](https://kobes.ca/)의 [누적 레이아웃 이동 이해](https://perfmattersconf.com/) 동영상
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ko/metrics/custom-metrics/index.md b/src/site/content/ko/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..e1b3b9cb6e6
--- /dev/null
+++ b/src/site/content/ko/metrics/custom-metrics/index.md
@@ -0,0 +1,346 @@
+---
+layout: post
+title: 사용자 지정 메트릭
+authors:
+  - philipwalton
+date: 2019-11-08
+description: 사용자 지정 메트릭을 사용하면 사이트 고유의 사이트 경험 측면을 측정하고 최적화할 수 있습니다.
+tags:
+  - performance
+  - metrics
+---
+
+주어진 웹 사이트에서 보편적으로 측정할 수 있는 [사용자 중심 메트릭](/user-centric-performance-metrics/)을 확보하면 많은 가치를 누릴 수 있습니다. 이러한 메트릭을 통해 다음을 수행할 수 있습니다.
+
+- 실제 사용자가 웹을 전반적으로 어떻게 경험하는지 이해
+- 해당 사이트를 경쟁업체 사이트와 쉽게 비교
+- 사용자 지정 코드를 작성할 필요없이 분석 도구에서 유용하고 실행 가능한 데이터 추적
+
+범용 메트릭이 좋은 기준을 제공하기는 하지만, 많은 경우에 특정 사이트에 대한 전반적인 경험을 파악하려면 이러한 메트릭 이외에 *더 많은* 메트릭을 측정할 필요가 있습니다.
+
+사용자 지정 메트릭을 사용하면 다음과 같이 해당 사이트에만 적용될 수 있는 사이트 경험 측면을 측정할 수 있습니다.
+
+- 단일 페이지 앱(SPA)이 한 "페이지"에서 다른 "페이지"로 전환되는 데 걸리는 시간
+- 로그인한 사용자를 위해 데이터베이스에서 가져온 데이터를 페이지에 표시하는 데 걸리는 시간
+- 서버 측 렌더링(SSR) 앱이 [수화](https://addyosmani.com/blog/rehydration/)되는 데 걸리는 시간
+- 재방문자가 로드한 리소스의 캐시 적중률
+- 게임에서 클릭 또는 키보드 이벤트의 이벤트 지연 시간
+
+## 사용자 지정 메트릭을 측정하는 API
+
+지금까지 웹 개발자들은 성능을 측정할 수 있는 저수준 API를 많이 이용할 수 없었고, 이 때문에 사이트의 성능을 측정하기 위해 해킹에 의존해야 했습니다.
+
+예를 들어, `requestAnimationFrame` 루프를 실행하고 각 프레임 간의 델타를 계산하는 식으로 장기 실행되는 JavaScript 작업으로 인해 메인 스레드가 차단되는지 여부를 확인할 수 있습니다. 델타가 디스플레이의 프레임 속도보다 훨씬 길면 이를 긴 작업으로 보고할 수 있습니다. 그러나 이러한 해킹은 실제로 성능 자체에 영향을 미치므로 권장되지 않습니다(예: 배터리 소모).
+
+효과적인 성능 측정을 위한 첫 번째 규칙은 성능 측정 기술 자체가 성능 문제를 일으키지 않는지 확인하는 것입니다. 따라서 사이트에서 측정하는 모든 사용자 지정 메트릭에 대해 가능한 경우 다음 API 중 하나를 사용하는 것이 가장 좋습니다.
+
+### 성능 관찰자
+
+PerformanceObserver API를 이해하는 것은 사용자 지정 성능 메트릭을 만드는 데 매우 중요합니다. 이 문서에서 논의된 다른 모든 성능 API에서 데이터를 가져오는 메커니즘이기 때문입니다.
+
+`PerformanceObserver`를 사용하면 성능 관련 이벤트를 수동적으로 구독할 수 있습니다. 즉, 이러한 API는 일반적으로 페이지 성능을 방해하지 않는데, 일반적으로 [유휴 기간](https://w3c.github.io/requestidlecallback/#idle-periods) 동안 콜백이 실행되기 때문입니다.
+
+새로운 성능 항목이 보내질 때마다 실행할 콜백을 전달하여 `PerformanceObserver`를 생성합니다. 그런 다음 [`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe) 메서드를 통해 어떤 유형의 항목에 수신 대기할지 관찰자에게 알려줍니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+아래 섹션에는 관찰에 사용할 수 있는 다양한 항목 유형이 모두 나열되어 있지만 최신 브라우저에서는 정적 [`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute) 속성을 통해 사용 가능한 항목 유형을 검사할 수 있습니다.
+
+{% Aside %} `observe()` 메서드에 전달된 개체는 `entryTypes` 배열을 지정할 수도 있습니다(동일한 관찰자를 통해 둘 이상의 항목 유형을 관찰하기 위해). `entryTypes`를 지정하는 것이 더 광범위한 브라우저 지원을 제공하는 지금까지의 선택이지만, 이제는 `type`을 사용하는 것이 더 권장됩니다. 추가적인 항목별 관찰 구성을 지정할 수 있게 해주기 때문입니다(다음으로 논의하는 `buffered` 플래그 등). {% endAside %}
+
+#### 이미 발생한 항목 관찰
+
+기본적으로, `PerformanceObserver` 개체는 항목이 발생할 때에만 이를 관찰할 수 있습니다. 성능 분석 코드를 느리게 로드하려는 경우(우선순위가 높은 리소스를 차단하지 않기 위해)에는 이것이 문제가 될 수 있습니다.
+
+항목 내역을 가져오려면(발생한 후) `observe()`를 호출할 때 `buffered` 플래그를 `true`로 설정합니다. 그러면 브라우저가 `PerformanceObserver` 콜백이 처음 호출될 때 [성능 항목 버퍼](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer)의 항목 내역을 포함시킵니다.
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %} 메모리 문제를 피하기 위해 성능 항목 버퍼는 무제한이 아닙니다. 대부분의 일반적인 페이지 로드의 경우 버퍼가 가득 차고 항목이 누락될 가능성은 거의 없습니다. {% endAside %}
+
+#### 피해야 할 레거시 성능 API
+
+Performance Observer API 이전에 개발자들은 [`performance`](https://w3c.github.io/performance-timeline/) 개체에 정의된 다음 세 가지 메서드를 사용하여 성능 항목에 액세스할 수 있었습니다.
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+이러한 API는 계속 지원되지만 새 항목이 방출될 때 이를 수신 대기할 수 없기 때문에 사용을 권장하지 않습니다. 또한 많은 새로운 API(예: Long Tasks)가 `performance`를 통해서는  노출되지 않고, `PerformanceObserver`를 통해서만 노출됩니다.
+
+Internet Explorer 호환성이 특별히 필요한 경우가 아니면 코드에서 이러한 메서드를 피하고 앞으로 `PerformanceObserver`를 사용하는 것이 가장 좋습니다.
+
+### 사용자 타이밍 API
+
+[사용자 타이밍 API](https://w3c.github.io/user-timing/)는 시간 기반 메트릭을 위한 범용 측정 API입니다. 이를 통해 임의의 시점을 표시한 다음 나중에 해당 표시 사이의 기간을 측정할 수 있습니다.
+
+```js
+// Record the time immediately before running a task.
+performance.mark('myTask:start');
+await doMyTask();
+// Record the time immediately after running a task.
+performance.mark('myTask:end');
+
+// Measure the delta between the start and end of the task
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+`Date.now()` 또는 `performance.now()`와 같은 API가 유사한 기능을 제공하지만 사용자 타이밍 API를 사용하면 성능 도구와 잘 통합된다는 이점이 있습니다. 예를 들어 Chrome DevTools는 [성능 패널에서 사용자 타이밍 측정](https://developers.google.com/web/updates/2018/04/devtools#tabs)을 시각화하고, 많은 분석 제공자가 사용자가 수행하는 모든 측정을 자동으로 추적하고 기간 데이터를 분석 백엔드로 보냅니다.
+
+사용자 타이밍 측정을 보고하려면 [PerformanceObserver](#performance-observer)를 사용하고 `measure` 유형의 항목을 관찰하도록 등록할 수 있습니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `measure` entries to be dispatched.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### 긴 작업 API
+
+[긴 작업 API](https://w3c.github.io/longtasks/)는 브라우저의 메인 스레드가 프레임 속도나 입력 대기 시간에 영향을 줄 만큼 충분히 오랫동안 차단되는 경우 이를 파악하는 데 유용합니다. 현재, 이 API는 50밀리초(ms) 이상 실행되는 모든 작업을 보고합니다.
+
+값비싼 코드를 실행해야 할 때(또는 대용량 스크립트를 로드하고 실행해야 할 때) 해당 코드가 메인 스레드를 차단했는지 여부를 추적하는 것이 유용합니다. 실제로 많은 상위 수준의 메트릭이 긴 작업 API 자체를 기반으로 구축됩니다(예: [상호 작용까지의 시간(TTI)](/tti/) 및 [전체 차단 시간(TBT)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)).
+
+긴 작업이 언제 발생하는지 확인하려면 [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)를 사용하고 `longtask` 유형의 항목을 관찰하도록 등록할 수 있습니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `longtask` entries to be dispatched.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### 요소 타이밍 API
+
+[최대 콘텐츠풀 페인트(LCP)](/lcp/) 메트릭은 가장 큰 이미지 또는 텍스트 블록이 화면에 그려진 시점을 파악하는 데 유용하지만 경우에 따라 다른 요소의 렌더링 시간을 측정해야 합니다.
+
+이러한 경우 [요소 타이밍 API](https://wicg.github.io/element-timing/)를 사용할 수 있습니다. 가장 큰 콘텐츠풀 페인트 API는 실제로 요소 타이밍 API를 기반으로 구축되고 가장 큰 콘텐츠풀 요소에 대한 자동 보고를 추가하지만 `elementtiming` 속성을 명시적으로 추가하고 요소 항목 유형을 관찰하도록 PerformanceObserver를 등록하여 추가 요소에 대해 보고할 수 있습니다.
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">This is text I care about.</p>
+...
+<script>
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `element` entries to be dispatched.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} 최대 콘텐츠풀 페인트에 대해 고려되는 요소 유형은 요소 타이밍 API를 통해 관찰할 수 있는 유형과 동일합니다. 이러한 유형 중 하나가 아닌 요소에 `elementtiming` 속성을 추가하면 속성이 무시됩니다. {% endAside %}
+
+### 이벤트 타이밍 API
+
+[최초 입력 지연(FID)](/fid/) 메트릭은 사용자가 페이지와 처음 상호 작용할 때부터 브라우저가 실제로 해당 상호 작용에 대한 응답으로 이벤트 핸들러 처리를 시작할 수 있는 시간까지의 시간을 측정합니다. 그러나 경우에 따라 이벤트 처리 시간 자체와 다음 프레임을 렌더링할 수 있을 때까지의 시간을 측정하는 것도 유용할 수 있습니다.
+
+이것은 FID를 측정하는 데 사용되는 [이벤트 타이밍 API](https://wicg.github.io/event-timing/)로 가능한데, 다음을 포함한 이벤트 수명 주기의 여러 타임스탬프를 노출할 수 있기 때문입니다.
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime): 브라우저가 이벤트를 수신하는 시간입니다.
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): 브라우저가 이벤트에 대한 이벤트 핸들러 처리를 시작할 수 있는 시간입니다.
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend): 브라우저가 이 이벤트에 대한 이벤트 핸들러에서 시작된 모든 동기 코드 실행을 완료하는 시간입니다.
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): 브라우저가 이벤트를 수신한 때부터 이벤트 핸들러에서 시작된 모든 동기 코드 실행을 완료한 후 다음 프레임을 그릴 수 있을 때까지의 시간(보안상의 이유로 8ms로 반올림됨)입니다.
+
+다음 예는 이러한 값을 사용하여 사용자 지정 측정을 만드는 방법을 보여줍니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Measure First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Measure the time it takes to run all event handlers
+    // Note: this does not include work scheduled asynchronously using
+    // methods like `requestAnimationFrame()` or `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Measure the entire duration of the event, from when input is received by
+    // the browser until the next frame can be painted after processing all
+    // event handlers.
+    // Note: similar to above, this value does not include work scheduled
+    // asynchronously using `requestAnimationFrame()` or `setTimeout()`.
+    // And for security reasons, this value is rounded to the nearest 8ms.
+    const firstInputDuration = firstInput.duration;
+
+    // Log these values the console.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### 리소스 타이밍 API
+
+[리소스 타이밍 API](https://w3c.github.io/resource-timing/)는 개발자에게 특정 페이지의 리소스가 로드되는 방식에 대한 상세한 통찰력을 제공합니다. 이 API의 이름에도 불구하고, 제공되는 정보는 타이밍 데이터로 제한되지 않습니다([타이밍 데이터가 많기는 하지만](https://w3c.github.io/resource-timing/#processing-model)). 액세스할 수 있는 다른 데이터는 다음과 같습니다.
+
+- [initiatorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype): 리소스를 가져온 방식(예: `<script>` 또는 `<link>` 태그 또는 `fetch()` 이용)
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol): 리소스를 가져오는 데 사용되는 프로토콜(예: `h2` 또는 `quic`)
+- [encodingBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize)/[decodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize): 각각 인코딩 또는 디코딩된 형식의 리소스 크기
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize): 실제로 네트워크를 통해 전송된 리소스의 크기입니다. 리소스가 캐시를 통해 처리되면 이 값은 `encodedBodySize`보다 훨씬 작을 수 있으며 경우에 따라 0이 될 수 있습니다(캐시 재검증이 필요하지 않은 경우).
+
+리소스 타이밍 항목의 `transferSize` 속성을 사용하여 *캐시 적중률* 메트릭, 또는 경우에 따라 *전체 캐시된 리소스 크기* 메트릭까지도 측정할 수 있습니다. 이는 해당 리소스 캐싱 전략이 반복 방문자가 경험하는 성능에 미치는 영향을 이해하는 데 유용할 수 있습니다.
+
+다음 예는 페이지에서 요청한 모든 리소스를 기록하고 각 리소스가 캐시를 통해 처리되었는지 여부를 나타냅니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Start listening for `resource` entries to be dispatched.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### 탐색 타이밍 API
+
+[탐색 타이밍 API](https://w3c.github.io/navigation-timing/)는 리소스 타이밍 API와 유사하지만 [탐색 요청](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests)만 보고합니다. `navigation` 항목 유형은 `resource` 항목 유형과도 유사하지만 탐색 요청에만 해당하는 몇 가지 [추가 정보](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming)(`DOMContentLoaded` 및 `load` 이벤트가 발생하는 시기 등)를 포함합니다.
+
+많은 개발자가 서버 응답 시간([첫 바이트까지의 시간](https://en.wikipedia.org/wiki/Time_to_first_byte))을 이해하기 위해 추적하는 한 가지 메트릭을 탐색 타이밍 API를 통해 사용할 수 있습니다. 구체적으로, 항목의 `responseStart` 타임스탬프가 이용됩니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+서비스 작업자를 사용하는 개발자가 관심을 가질 수 있는 또 다른 메트릭은 탐색 요청에 대한 서비스 작업자 시작 시간입니다. 이는 브라우저가 가져오기 이벤트를 가로채기 시작하기 전에 서비스 작업자 스레드를 시작하는 데 걸리는 시간입니다.
+
+특정 탐색 요청에 대한 서비스 작업자 시작 시간은 `entry.responseStart`와 `entry.workerStart` 사이의 델타로부터 결정할 수 있습니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### 서버 타이밍 API
+
+[서버 타이밍 API](https://w3c.github.io/server-timing/)를 사용하면 응답 헤더를 통해 서버에서 브라우저로 요청별 타이밍 데이터를 전달할 수 있습니다. 예를 들어, 특정 요청에 대해 데이터베이스에서 데이터를 조회하는 데 걸린 시간을 나타낼 수 있습니다. 이는 서버의 속도 저하로 인한 성능 문제를 디버깅하는 데 유용할 수 있습니다.
+
+타사 분석 제공자를 사용하는 개발자의 경우, 서버 타이밍 API는 서버 성능 데이터를 이러한 분석 도구가 측정할 수 있는 다른 비즈니스 메트릭과 상관시킬 수 있는 유일한 방법입니다.
+
+응답에 서버 타이밍 데이터를 지정하려면 `Server-Timing` 응답 헤더를 사용할 수 있습니다. 예를 들면 다음과 같습니다.
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+그런 다음, 페이지에서 리소스 타이밍 및 탐색 타이밍 API를 통해 `resource` 또는 `navigation` 항목 모두에서 이 데이터를 읽을 수 있습니다.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Logs all server timing data for this response
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
diff --git a/src/site/content/ko/metrics/fcp/index.md b/src/site/content/ko/metrics/fcp/index.md
new file mode 100644
index 00000000000..0d7f2a9d484
--- /dev/null
+++ b/src/site/content/ko/metrics/fcp/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: First Contentful Paint(최초 콘텐츠풀 페인트, FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-13
+description: 이 게시물에서는 최초 콘텐츠풀 페인트(FCP) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} 최초 콘텐츠풀 페인트(FCP)는 사용자가 화면에서 콘텐츠를 볼 수 있는 페이지 로드 타임라인의 첫 번째 지점을 표시하기 때문에 사용자가 [감지하는 로드 속도](/user-centric-performance-metrics/#types-of-metrics)를 측정할 수 있는 중요한 사용자 중심 메트릭입니다. FCP가 빠르면 사용자가 페이지에서 뭔가가 [진행되고 있음](/user-centric-performance-metrics/#questions)을 인지해 안심할 수 있습니다. {% endAside %}
+
+## FCP란 무엇인가요?
+
+최초 콘텐츠풀 페인트(FCP) 메트릭은 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다. 이 메트릭에서 "콘텐츠"란 텍스트, 이미지(배경 이미지 포함), `<svg>` 요소 또는 흰색이 아닌 `<canvas>` 요소를 뜻합니다.
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="google.com의 FCP 타임라인", width="800", height="311", linkTo=true %}
+
+위의 로드 타임라인에서 FCP는 첫 번째 텍스트와 이미지 요소가 화면에 렌더링되는 두 번째 프레임에서 발생합니다.
+
+전체가 아닌 일부 콘텐츠만 렌더링되었음을 확인하실 수 있습니다. 이는 *최초* 콘텐츠풀 페인트(FCP)와 페이지의 주요 콘텐츠 로딩이 완료된 시점을 측정하는 것을 목표로 하는 *[Large Contentful Paint(최대 콘텐츠풀 페인트, LCP)](/lcp/)*를 구분하는 중요한 차이점입니다.
+
+  <picture>
+    <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+    {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="좋은 FCP 값은 1.8초 이하이고 나쁜 값은 3.0초보다 크며 그 사이에는 개선이 필요합니다", width="400", height="300" %}
+  </picture>
+
+### 좋은 FCP 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하려면 사이트의 최초 콘텐츠풀 페인트가 **1.8초** 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 **75번째 백분위수**를 측정하는 것이 바람직한 임계값입니다.
+
+## FCP 측정 방법
+
+FCP는 [실험실](/user-centric-performance-metrics/#in-the-lab)이나 [현장](/user-centric-performance-metrics/#in-the-field)에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.
+
+### 현장 도구
+
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [Search Console(Speed Report)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)
+
+### 실험실 도구
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+
+### JavaScript에서 FCP 측정
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+JavaScript에서 FCP를 측정하려면 [Paint Timing API를](https://w3c.github.io/paint-timing/) 사용할 수 있습니다. 다음 예시에서는 이름이 `first-contentful-paint`인 `paint` 항목을 수신 대기하고 콘솔에 기록하는 [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)를 작성하는 방법을 확인하실 수 있습니다.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+이 코드에서는 `first-contentful-paint` 항목을 콘솔에 기록하는 방법을 보여주지만 JavaScript에서 FCP를 측정하는 것은 보다 복잡합니다. 자세한 내용은 아래를 참조하세요.
+
+{% endAside %}
+
+위의 예에서 기록된 `first-contentful-paint` 항목은 최초 콘텐츠풀 요소가 언제 화면에 그려졌는지 알려줍니다. 그러나 이 항목이 FCP 측정에 유효하지 않은 경우도 일부 있습니다.
+
+다음 섹션에는 API가 보고하는 내용과 메트릭이 계산되는 방법 사이의 차이점이 나열되어 있습니다.
+
+#### 메트릭과 API의 차이점
+
+- API는 백그라운드 탭에 로드된 페이지에 대해 `first-contentful-paint` 항목을 전달하지만 FCP를 계산할 때는 해당 페이지를 무시해야 합니다. 최초 페인트 타이밍은 전체 시간 내내 전경에 있던 페이지만 고려하기 때문입니다.
+- 페이지가 [백/포워드 캐시](/bfcache/#impact-on-core-web-vitals)에서 복원될 때 API는 `first-contentful-paint` 항목을 보고하지 않지만, 사용자는 이를 고유한 페이지 방문으로 경험하므로 FCP는 측정되어야 합니다.
+- API는 [교차 원본 iframe의 페인트 타이밍을 보고하지 않을 수 있지만](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes) FCP를 올바르게 측정하려면 모든 프레임을 고려해야 합니다. 하위 프레임은 API를 사용하여 집계를 위해 상위 프레임에 이러한 페인트 타이밍을 보고할 수 있습니다.
+
+개발자는 이러한 미묘한 차이점을 모두 기억하는 대신 가능한 경우 다음과 같은 차이점을 대신 처리해주는 [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)를 사용하여 FCP를 측정할 수 있습니다.
+
+```js
+import {onFCP} from 'web-vitals';
+
+// FCP를 이용 가능하게 되면 바로 측정 및 기록합니다.
+onFCP(console.log);
+```
+
+JavaScript에서 FCP를 측정하는 방법에 대한 전체 예제는 [`onFCP()`의 소스 코드](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts)를 참조하세요.
+
+{% Aside %} 일부 경우(예: 교차 원본 iframe) JavaScript에서 FCP를 측정할 수 없습니다. 자세한 내용은 `web-vitals` 라이브러리의 [제한 사항](https://github.com/GoogleChrome/web-vitals#limitations) 섹션을 참조하세요. {% endAside %}
+
+## FCP를 개선하는 방법
+
+특정 사이트에 대한 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정한 [기회](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) 또는 [진단](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics)을 주의 깊게 살펴보시기 바랍니다.
+
+모든 사이트에서 일반적으로 FCP를 개선하는 방법을 알아보려면 다음 성능 가이드를 참조하세요.
+
+- [렌더링 차단 리소스 제거](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [CSS 축소](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [사용하지 않는 CSS 제거](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [필요한 원본에 사전 연결](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [서버 응답 시간 단축(TTFB)](/ttfb/)
+- [여러 페이지 리디렉션 방지](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [핵심 요청 사전 로드](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [막대한 네트워크 페이로드 방지](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [효율적인 캐시 정책으로 정적 자산 제공](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [과도한 DOM 크기 방지](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [크리티컬 요청 깊이 최소화](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [웹폰트 로드 중에 텍스트가 계속 표시되는지 확인](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [요청 수를 낮게 유지하고 전송 크기를 작게 유지](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ko/metrics/fid/index.md b/src/site/content/ko/metrics/fid/index.md
new file mode 100644
index 00000000000..d3747bfc78b
--- /dev/null
+++ b/src/site/content/ko/metrics/fid/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: First Input Delay(최초 입력 지연, FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: 이 게시물에서는 최초 입력 지연(FID) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} 최초 입력 지연(FID)은 사용자가 응답하지 않는 페이지와 상호 작용할 때 느끼는 경험을 수량화하기 때문에 [로드 반응성](/user-centric-performance-metrics/#types-of-metrics)을 측정하기 위한 중요한 사용자 중심 메트릭입니다. FID가 낮아야 해당 페이지를 [사용할 수 있다](/user-centric-performance-metrics/#questions)는 의미입니다. {% endAside %}
+
+좋은 첫인상을 남기는 것이 얼마나 중요한지 우리는 모두 알고 있습니다. 새로운 사람들을 만날 때도 그렇지만, 웹 경험을 구축할 때도 중요한 부분입니다.
+
+웹의 첫인상은 사용자가 충성도 높은 사용자로 남을지, 해당 웹을 떠나 다시 돌아오지 않을지를 판가름하는 부분입니다. 그렇다면 무엇이 좋은 인상을 주는지, 그리고 사용자에게 어떤 인상을 줄 가능성이 있는지 측정하는 방법은 무엇일까요?
+
+웹에서 첫인상은 매우 다양한 형태를 취할 수 있습니다. 사이트의 디자인과 매력적인 시각적 요소는 물론, 속도와 응답성에 대한 첫인상도 있습니다.
+
+웹 API로 사용자가 사이트 디자인을 얼마나 좋아하는지 측정하는 것은 어렵지만, 속도와 응답성을 측정하는 것은 어렵지 않습니다.
+
+사용자의 사이트 로드에 대한 첫인상은 [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/)를 통해 측정할 수 있습니다. 그러나 사이트가 화면에 픽셀을 얼마나 빨리 칠할 수 있는지는 일부일 뿐이며, 사용자가 해당 픽셀과 상호 작용하려고 할 때 사이트의 반응 속도 역시 중요하게 살펴야 할 부분입니다.
+
+최초 입력 지연(FID) 메트릭은 사이트의 상호 작용성과 반응성에 대한 사용자의 첫인상을 측정하는 데 도움이 됩니다.
+
+## FID란 무엇인가요?
+
+FID는 사용자가 페이지와 처음 상호 작용할 때(예: 링크를 클릭하거나 버튼을 탭하거나 사용자 지정 JavaScript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정합니다.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="좋은 fid 값은 2.5초, 나쁜 값은 4.0초보다 크며 그 사이에 개선이 필요함", width="400", height="300" %}
+</picture>
+
+### 좋은 FID 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하려면 사이트의 최초 입력 지연 값이 **100밀리초** 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 **75번째 백분위수**를 측정하는 것이 바람직한 임계값입니다.
+
+{% Aside %} 이러한 권장 사항의 기반이 되는 연구 및 방법론에 대해 자세히 알아보려면 [Core Web Vitals 메트릭 임계값 정의](/defining-core-web-vitals-thresholds/)를 참조하시기 바랍니다. {% endAside %}
+
+## FID 상세 정보
+
+이벤트에 응답하는 코드를 작성하는 개발자로서 우리는 종종 이벤트가 발생하는 즉시 코드가 실행될 것이라고 가정합니다. 그러나 사용자로서는 자주 반대의 경험을 하곤 하죠. 전화기에 로드된 웹페이지에 상호 작용을 시도했을 때 아무 일도 일어나지 않아 좌절을 겪곤 합니다.
+
+일반적으로 입력 지연(입력 대기 시간이라고도 함)은 브라우저의 메인 스레드가 다른 작업을 하고 있어 사용자에게 아직은 응답할 수 없기 때문에 발생합니다. 이러한 일이 발생하는 일반적인 이유로는 브라우저가 앱에서 로드한 대규모 JavaScript 파일을 구문 분석하고 실행하기 때문입니다. 그렇게 하는 동안에는 로드 중인 JavaScript가 다른 작업을 수행하도록 지시할 수 있기 때문에 이벤트 리스너를 실행할 수 없습니다.
+
+{% Aside 'gotchas' %} FID는 이벤트 처리에서 "지연" 부분만 측정하며 이벤트 처리 시간 자체나 브라우저에서 이벤트 핸들러를 실행한 후 UI를 업데이트하는 데 걸리는 시간은 측정하지 않습니다. 이 시간은 사용자 경험에 영향을 미치지만 이를 FID의 일부로 포함하는 경우 개발자는 이벤트에 비동기적으로 응답하는 방향으로 유도됩니다. 이러한 방식은 메트릭 자체는 개선하지만 경험은 악화시킬 수 있습니다. 자세한 내용은 아래에서 [입력 지연만 고려하는 이유](#why-only-consider-the-input-delay)를 참조하십시오. {% endAside %}
+
+다음과 같이 일반적인 웹 페이지 로드와 관련한 타임라인을 고려하시기 바랍니다.
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="페이지 로드 추적 예시", width="800", height="260", linkTo=true %}
+
+위의 시각화는 리소스(CSS 및 JS 파일일 확률이 큼)에 대한 몇 가지 네트워크 요청을 수행하고 해당 리소스에서 다운로드를 완료한 후 메인 스레드에서 처리되는 페이지를 보여줍니다.
+
+이로 인해 메인 스레드는 일시적으로 사용 중인 상태가 되며 베이지색 [작업](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task) 블록으로 표시됩니다.
+
+페이지에서 일부 콘텐츠를 렌더링했지만 아직 안정적으로 상호 작용할 수 없는 상태이므로 일반적으로 긴 최초 입력 지연은 [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/)와 [Time to Interactive(상호 작용까지의 시간, TTI)](/tti/) 사이에 발생합니다. 어떻게 이러한 일이 발생하는지 설명하기 위해 FCP와 TTI가 타임라인에 추가되었습니다.
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="FCP 및 TTI가 있는 페이지 로드 추적의 예시", width="800", height="340", linkTo=true %}
+
+FCP와 TTI 사이에 상당한 시간이 소요(3개의 [긴 작업](/custom-metrics/#long-tasks-api) 포함)되었다는 것을 확인하실 수 있습니다. 사용자가 해당 시간에 페이지와 상호 작용을 시도하면(예: 링크 클릭), 클릭이 수신되는 시기와 메인 스레드가 응답할 수 있는 시기 사이에 지연이 발생합니다.
+
+사용자가 가장 긴 작업이 시작될 때 상호 작용을 시도하는 경우 어떤 일이 일어날지 생각해 봅시다.
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="FCP, TTI, FID가 있는 페이지 로드 추적의 예시", width="800", height="380", linkTo=true %}
+
+브라우저가 작업을 실행하는 동안 입력이 발생하기 때문에 입력에 응답하려면 작업이 완료될 때까지 기다려야 합니다. 이러한 대기 시간이 바로 이 페이지에서 이 사용자에 대한 FID 값입니다.
+
+{% Aside %} 이 예에서 사용자는 메인 스레드가 가장 바쁘게 작업하는 기간이 시작될 때 페이지와 상호 작용했습니다. 사용자가 조금 더 일찍(유휴 기간 동안) 페이지와 상호 작용했다면 브라우저가 즉시 응답했을 수 있습니다. 입력 지연의 이러한 차이는 메트릭을 보고할 때 FID 값의 분포를 살펴보는 것이 왜 중요한지를 분명히 보여줍니다. FID 데이터 분석 및 보고에 대한 내용은 아래 섹션에서 자세히 알아볼 수 있습니다. {% endAside %}
+
+### 상호 작용에 이벤트 리스너가 없으면 어떻게 되나요?
+
+FID는 입력 이벤트가 수신된 시점과 메인 스레드가 다음 유휴 상태에 들어간 시점 사이의 델타를 측정합니다. 즉 **이벤트 리스너가 등록되지 않은 경우에도** FID가 측정된다는 의미입니다. 이는 대다수의 사용자 상호 작용에 이벤트 리스너는 필요하지 않지만, 실행을 위해서는 메인 스레드가 유휴 상태가 될 *필요가 있기* 때문입니다.
+
+예를 들어 다음 HTML 요소는 모두 사용자 상호 작용에 응답하려면 메인 스레드에서 진행 중인 작업이 완료될 때까지 대기해야 합니다.
+
+- 텍스트 필드, 체크박스, 라디오 버튼( `<input>` , `<textarea>` )
+- 선택 드롭다운( `<select>` )
+- 링크( `<a>` )
+
+### 최초 입력만 고려하는 이유는 무엇인가요?
+
+입력 지연으로 인해 사용자 경험이 좋지 않을 수 있지만 주로 다음과 같은 몇 가지 이유로 첫 번째 입력 지연을 측정하는 것이 좋습니다.
+
+- 최초 입력 지연은 사이트의 응답성에 대한 사용자의 첫인상이 될 것이며, 사이트의 품질과 신뢰성에 대한 전반적인 인상을 형성하는 데 중요합니다.
+- 오늘날 웹에서 볼 수 있는 가장 큰 상호 작용 문제는 페이지 로드 중에 발생합니다. 따라서 처음에는 사이트의 최초 사용자 상호 작용을 개선하는 데 중점을 두는 것이 웹의 전반적인 상호 작용을 개선하는 데 가장 큰 영향을 미치게 될 것입니다.
+- 사이트의 긴 최초 입력 지연을 수정하는 방법에 대한 권장 솔루션(코드 분할, 더 작은 JavaScript부터 먼저 로드하기 등)과 페이지 로드 후 느린 입력 지연 수정 솔루션이 반드시 같은 것은 아닙니다. 이러한 메트릭을 분리해 웹 개발자에게 보다 특정한 성능 가이드라인을 제시할 수 있습니다.
+
+### 최초 입력으로 간주되는 것은 무엇인가요?
+
+FID는 로드 중 페이지의 응답성을 측정하는 메트릭입니다. 따라서 클릭, 탭 및 키 누름과 같은 개별 작업의 입력 이벤트에만 초점을 맞춥니다.
+
+스크롤 및 확대/축소와 같은 다른 상호 작용은 연속 작업이며 완전히 다른 성능 제약 조건을 갖습니다. 또한 브라우저에서는 보통 이를 별도의 스레드에서 실행하여 대기 시간을 숨길 수 있습니다.
+
+즉, FID는 [RAIL 성능 모델](/rail/) 중 R(반응성)에 중점을 두는 반면, 스크롤 및 확대/축소는 A(애니메이션)에 가깝기 때문에 성능 품질도 개별적으로 평가되어야 합니다.
+
+### 사용자가 사이트와 상호 작용하지 않으면 어떻게 되나요?
+
+모든 사용자가 방문할 때마다 사이트와 상호 작용하는 것은 아닙니다. 그리고 이전 섹션에서 언급한 바와 같이 모든 상호 작용이 FID와 관련이 있는 것도 아닙니다. 또한 첫 번째 상호 작용이 좋지 않은 타이밍(메인 스레드가 오랫동안 바쁘게 작업 중일 때)에 이루어진 사용자도, 원활한 타이밍(메인 스레드가 완전히 유휴 상태일 때)에 이루어진 사용자도 있습니다.
+
+즉 사용자마다 FID 값이 없거나, 낮거나, 높을 수 있다는 것입니다.
+
+FID를 추적, 보고 및 분석하는 방법은 기존에 사용하던 다른 메트릭과는 상당히 다를 수 있습니다. 다음 섹션에서는 이를 수행하는 가장 좋은 방법을 설명합니다.
+
+### 입력 지연만 고려하는 이유는 무엇인가요?
+
+위에서 언급했듯 FID는 이벤트 처리의 "지연"만 측정합니다. 이벤트 처리 시간 자체나 브라우저에서 이벤트 핸들러를 실행한 후 UI를 업데이트하는 데 걸리는 시간은 측정하지 않습니다.
+
+이 시간은 사용자에게 중요한 요소이며 사용자 경험에도 *확실히* 영향을 미치지만, 이 메트릭에는 포함되지 않습니다. 이 시간을 메트릭에 포함한다면 개발자가 실제적으로 경험에 악영향을 미칠 워크로드를 추가할 가능성이 높아지기 때문입니다. 예를 들면 이벤트 핸들러 로직을 비동기화 콜백(`setTimeout()` 또는 `requestAnimationFrame()` 사용)으로 감싸 이벤트와 관련된 작업으로부터 이를 분리하는 방법을 선택하게 될 수 있습니다. 그 결과 메트릭 점수는 좋아지지만, 사용자가 인지하는 응답 시간은 더 느려지게 됩니다.
+
+그러나 FID는 이벤트 대기 시간의 '지연' 부분만 측정하지만 더 많은 이벤트 수명 주기를 추적하려는 개발자는 [Event Timing API](https://wicg.github.io/event-timing/)를 사용하여 추적할 수 있습니다. 자세한 내용은 [커스텀 메트릭](/custom-metrics/#event-timing-api)에 대한 가이드를 참조하시기 바랍니다.
+
+## FID 측정 방법
+
+FID는 실제 사용자가 페이지와 상호 작용해야 하므로 [사이트](/user-centric-performance-metrics/#in-the-field)에서만 측정할 수 있는 메트릭입니다. 다음 도구를 사용하여 FID를 측정할 수 있습니다.
+
+{% Aside %} FID는 실제 사용자가 필요하므로 실험실에서 측정할 수 없습니다. 그러나 [Total Blocking Time(총 차단 시간, TBT)](/tbt/) 메트릭은 실험실에서 측정할 수 있고 사이트의 FID와 상관관계가 있으며 상호 작용에 영향을 미치는 문제도 포착합니다. 즉, 실험실에서 TBT를 개선하는 최적화는 사용자를 위한 FID 또한 개선합니다. {% endAside %}
+
+### 현장 도구
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console(Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)
+
+### JavaScript에서 FID 측정
+
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
+JavaScript에서 FID를 측정하려면 [Event Timing API](https://wicg.github.io/event-timing)를 사용할 수 있습니다. 다음 예시에서는 [`PerformanceObserver`](https://wicg.github.io/event-timing/#sec-performance-event-timing)를 작성해 [`first-input`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) 항목을 수신 대기하고 콘솔에 기록하는 방법을 확인하실 수 있습니다.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %} 이 코드는 `first-input` 항목을 기록하고 지연을 계산하는 방법을 보여줍니다. 그러나 JavaScript에서 FID를 측정하는 것은 이보다 복잡합니다. 자세한 내용은 아래를 참조하세요. {% endAside %}
+
+위의 예에서 `first-input` 항목의 지연 값은 항목의 `startTime` 과 `processingStart` 타임스탬프 간의 델타를 취하여 측정됩니다. 대부분의 경우 이러한 측정 값은 FID 값이 됩니다. 그러나 모든 `first-input` 항목이 FID 측정에 유효한 것은 아닙니다.
+
+다음 섹션에는 API가 보고하는 내용과 메트릭이 계산되는 방법 사이의 차이점이 나열되어 있습니다.
+
+#### 메트릭과 API의 차이점
+
+- API는 백그라운드에 로드되는 페이지에 대한 `first-input` 항목을 발송하지만 이러한 페이지는 FID를 계산할 때 무시됩니다.
+- 페이지가 최초 입력이 발생하기 전 백그라운드에 있었다면 API도 `first-input` 항목을 발송하지만 FID를 계산할 때는 해당 페이지를 무시해야 합니다. 입력은 전체 시간 내내 전경에 있던 페이지만 고려하기 때문입니다.
+- 페이지가 [백/포워드 캐시](/bfcache/#impact-on-core-web-vitals)에서 복원될 때 API는 `first-input` 항목을 보고하지 않지만, 사용자는 이를 고유한 페이지 방문으로 경험하므로 FID는 측정되어야 합니다.
+- API는 iframe 내에서 발생하는 입력을 보고하지 않지만 FID를 적절하게 측정하려면 이를 고려해야 합니다. 하위 프레임은 집계를 위해 API를 사용하여 상위 프레임에 `first-input` 항목을 보고합니다.
+
+개발자는 이러한 미묘한 차이점을 모두 기억하는 대신 가능한 경우 다음과 같은 차이점을 처리해주는 [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)를 사용하여 FID를 측정할 수 있습니다.
+
+```js
+import {onFID} from 'web-vitals';
+
+// FID를 이용 가능하게 되면 바로 측정 및 기록합니다.
+onFID(console.log);
+```
+
+JavaScript에서 FID를 측정하는 방법에 대한 전체 예제는 [`onFID)`의 소스 코드](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts)를 참조하세요.
+
+{% Aside %} 일부 경우(예: 교차 원본 iframe) JavaScript에서 FID를 측정할 수 없습니다. 자세한 내용은 `web-vitals` 라이브러리의 [제한 사항](https://github.com/GoogleChrome/web-vitals#limitations) 섹션을 참조하세요. {% endAside %}
+
+### FID 데이터 분석 및 보고
+
+FID 값에는 변동이 예상되므로, FID를 보고할 때는 값 분포를 살펴보고 더 높은 백분위수에 초점을 맞추는 것이 중요합니다.
+
+모든 Core Web Vitals 임계값에 대해 [선택된 백분위수](/defining-core-web-vitals-thresholds/#choice-of-percentile)는 75번째이지만, FID는 특별히 95~99번째 백분위수를 확인하는 것이 좋습니다. 이는 사용자가 사이트에서 특별히 좋지 않다고 느끼는 첫 번째 경험에 해당하기 때문입니다. 또한, 이는 개선이 가장 크게 필요한 부분을 보여줍니다.
+
+보고서를 장치 범주 또는 유형별로 분류하는 경우에도 마찬가지입니다. 예를 들어 데스크톱과 모바일에 대해 별도의 보고서를 실행하는 경우 데스크톱에서 가장 중요하게 생각하는 FID 값은 데스크톱 사용자의 95~99번째 백분위수여야 하고 모바일에서 가장 중요하게 여기는 FID 값은 모바일 사용자의 95~99번째 백분위수여야 합니다.
+
+## FID를 개선하는 방법
+
+특정 사이트에 대한 FID를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정한 [기회](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)를 주의 깊게 살펴보시기 바랍니다.
+
+FID는 필드 메트릭(Lighthouse는 실험실 메트릭 도구임)이지만 FID 개선 지침은 [총 차단 시간(TBT)](/tbt/)을 개선하는 지침과 동일합니다.
+
+FID를 개선하는 방법에 대한 자세한 내용은 [FID 최적화](/optimize-fid/)를 참조하시기 바랍니다. FID를 개선할 수 있는 개별 성능 기술에 대한 추가 지침은 다음을 참조하세요.
+
+- [타사 코드의 영향 줄이기](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [JavaScript 실행 시간 단축](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [메인 스레드 작업 최소화](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [요청 수를 낮게 유지하고 전송 크기를 작게 유지](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ko/metrics/index.md b/src/site/content/ko/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/ko/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/ko/metrics/lcp/index.md b/src/site/content/ko/metrics/lcp/index.md
new file mode 100644
index 00000000000..e9af7169689
--- /dev/null
+++ b/src/site/content/ko/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-13
+description: 이 게시물에서는 최대 콘텐츠풀 페인트(LCP) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} 최대 콘텐츠풀 페인트(LCP)는 페이지의 메인 콘텐츠가 로드되었을 가능성이 있을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 [감지하는 로드 속도](/user-centric-performance-metrics/#types-of-metrics)를 측정할 수 있는 중요한 사용자 중심 메트릭입니다. LCP가 빠르면 사용자가 해당 페이지를 [사용할 수 있다](/user-centric-performance-metrics/#questions)고 인지하는 데 도움이 됩니다. {% endAside %}
+
+일반적으로 웹 개발자가 웹 페이지의 메인 콘텐츠가 얼마나 빨리 로드되어 사용자에게 표시되는지 측정하는 것은 어려운 일입니다.
+
+[load](https://developer.mozilla.org/docs/Web/Events/load) 또는 [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded)와 같은 오래된 메트릭은 사용자가 화면에서 보는 것과 반드시 일치하지는 않기 때문에 적절하다고 볼 수 없습니다. 또한, [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/) 와 같은 새로운 사용자 중심 성능 메트릭은 로딩 경험의 시작 부분만을 포착합니다. 페이지에 시작 화면이 표시되거나 로딩 표시기를 표시되는 순간은 사용자와 큰 관련이 있다고 볼 수 없습니다.
+
+이전에는 초기 페인트 후의 더 많은 로딩 경험을 포착할 수 있도록 Lighthouse에서 사용 가능한 [First Meaningful Paint(유의미한 최초 페인트, FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) 및 [Speed Index(속도 인덱스, SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)와 같은 성능 메트릭을 권장했지만 이러한 메트릭은 복잡하고 설명하기 어려우며, 잘못된 경우도 많습니다. 즉 페이지의 메인 콘텐츠가 로드된 시점을 식별하지 못한다는 것입니다.
+
+때로는 단순한 방법이 가장 효과적입니다. [W3C Web Performance Working Group](https://www.w3.org/webperf/)의 토론과 Google에서 수행한 연구에 따르면, 페이지의 메인 콘텐츠가 로드되는 시기를 측정하는 보다 정확한 방법은 가장 큰 요소가 렌더링된 시기를 확인하는 것입니다.
+
+## LCP란 무엇인가요?
+
+최대 콘텐츠풀 페인트(LCP) 메트릭은 페이지가 [처음으로 로드를 시작한 시점](#what-elements-are-considered)을 기준으로 뷰포트 내에 있는 가장 큰 [이미지 또는 텍스트 블록](https://w3c.github.io/hr-time/#timeorigin-attribute)의 렌더링 시간을 보고합니다.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="좋은 LCP 값은 2.5초이고 나쁜 값은 4.0초보다 크며 그 사이인 경우 개선이 필요함", width="400", height="300" %}
+</picture>
+
+### 좋은 LCP 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하려면 사이트의 최대 콘텐츠풀 페인트가 **2.5초** 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 **75번째 백분위수**를 측정하는 것이 바람직한 임계값입니다.
+
+{% Aside %} 이러한 권장 사항의 기반이 되는 연구 및 방법론에 대해 자세히 알아보려면 [Core Web Vitals 메트릭 임계값 정의](/defining-core-web-vitals-thresholds/)를 참조하시기 바랍니다. {% endAside %}
+
+### 어떤 요소를 고려하나요?
+
+현재 [Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/)에 지정된 대로, 최대 콘텐츠풀 페인트에 대해 고려되는 요소 유형은 다음과 같습니다.
+
+- `<img>` 요소
+- `<svg>` 요소 내부의 `<image>`
+- `<video>` 요소(포스터 이미지 사용)
+- [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) 함수를 통해 로드된 배경 이미지가 있는 요소[(CSS 그라데이션](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients)과는 대조적임)
+- 텍스트 노드 또는 기타 인라인 수준 텍스트 하위 요소를 포함하는 [블록 수준](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements) 요소
+
+요소를 이렇게 제한한 이유는 처음부터 단순하게 작업을 진행하기 위한 의도적인 선택입니다. 이후 더 많은 연구가 수행되면 추가 요소(예: `<svg>`, `<video>`)가 추가될 수도 있습니다.
+
+### 요소의 크기는 어떻게 결정되나요?
+
+최대 콘텐츠풀 페인트에 대해 보고된 요소의 크기는 일반적으로 뷰포트 내에서 사용자에게 표시되는 크기입니다. 요소가 뷰포트 외부로 확장되거나, 요소가 잘리거나, 보이지 않는 [오버플로](https://developer.mozilla.org/docs/Web/CSS/overflow)가 있는 경우 해당 부분은 요소 크기에 포함되지 않습니다.
+
+[기본 크기](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)에서 크기가 조정된 이미지 요소의 경우 가시적 크기 또는 기본 크기 중 더 작은 것이 보고됩니다. 예를 들어 기본 크기보다 훨씬 작게 축소된 이미지는 표시된 만큼의 크기가, 더 크게 늘어나거나 확장된 경우에는 기본 크기만 보고됩니다.
+
+텍스트 요소의 경우 텍스트 노드의 크기만 고려됩니다(모든 텍스트 노드를 포함하는 가장 작은 직사각형).
+
+모든 요소에 대해 CSS를 통해 적용된 여백, 안쪽 여백, 테두리는 고려되지 않습니다.
+
+{% Aside %} 어떤 텍스트 노드가 어떤 요소에 속하는지 결정하는 건 꽤 까다로울 수 있습니다. 특히 하위 요소가 인라인 요소와 일반 텍스트 노드를 포함하면서 블록 수준 요소까지 포함하는 경우에는 더욱 그렇습니다. 여기서 요점은 모든 텍스트 노드가 가장 가까운 블록 수준 상위 요소에만 속한다는 것입니다. [사양 측면](https://wicg.github.io/element-timing/#set-of-owned-text-nodes)에서 각 텍스트 노드는 [포함하는 블록](https://developer.mozilla.org/docs/Web/CSS/Containing_block)을 생성하는 요소에 속합니다. {% endAside %}
+
+### 최대 콘텐츠풀 페인트는 언제 보고되나요?
+
+웹 페이지는 단계적으로 로드되는 경우가 많으며, 그 결과 페이지의 최대 요소가 변경될 수 있습니다.
+
+이러한 변경 가능성을 처리하기 위해 브라우저는 브라우저가 첫 번째 프레임을 그리는 즉시 최대 콘텐츠 요소를 식별하는 `largest-contentful-paint` 유형의 [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)를 디스패치합니다. 그러나 이후 프레임이 렌더링된 후에는 최대 콘텐츠풀 요소가 변경될 때마다 또 다른 [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)를 디스패치합니다.
+
+예를 들어, 텍스트와 대표 이미지가 있는 페이지인 경우 브라우저는 처음에는 텍스트만 렌더링할 수 있습니다. 이 시점에서 브라우저는 `element` 속성이 `<p>` 또는 `<h1>`를 참조할 가능성이 있는 `largest-contentful-paint` 항목을 디스패치합니다. 이후 대표 이미지 로드가 완료되면 두 번째 `largest-contentful-paint` 항목이 디스패치되고 `element` 속성은 `<img>`를 참조하게 됩니다.
+
+요소는 렌더링된 후 사용자에게 표시되고 나서야 최대 콘텐츠풀 요소로 간주될 수 있다는 점에 유의해야 합니다. 아직 로드되지 않은 이미지는 "렌더링"된 것으로 간주되지 않습니다. [글꼴 차단 기간](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline) 동안 웹 글꼴을 사용하는 텍스트 노드도 마찬가지입니다. 이러한 경우 더 작은 요소가 최대 콘텐츠풀 요소로 보고될 수 있지만 더 큰 요소가 렌더링을 완료하는 즉시 다른 `PerformanceEntry` 오브젝트를 통해 보고됩니다.
+
+이미지와 글꼴을 늦게 로드하는 것 외에도, 페이지는 새 콘텐츠를 사용할 수 있게 되면 DOM에 새 요소를 추가할 수 있습니다. 이러한 새 요소 중 하나가 이전의 최대 콘텐츠풀 요소보다 큰 경우에도 새 `PerformanceEntry`가 보고됩니다.
+
+현재 최대 콘텐츠풀 요소가 뷰포트에서 제거(또는 DOM에서 제거)되더라도 이보다 더 큰 요소가 렌더링되지 않는 이상, 해당 요소가 최대 콘텐츠풀 요소로 유지됩니다.
+
+{% Aside %} Chrome 88 이전에는 제거된 요소가 최대 콘텐츠풀 요소로 간주되지 않았으며, 현재 후보를 제거하면 새로운 `largest-contentful-paint` 항목의 디스패치가 트리거되곤 했습니다. 그러나 DOM 요소를 제거하는 경우가 많은 이미지 캐러셀 같은 인기 UI 패턴으로 인해 이러한 메트릭은 사용자가 경험하는 것을 더욱 정확히 반영할 수 있도록 업데이트되었습니다. 자세한 내용은 [변경 기록](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md)을 참조하세요. {% endAside %}
+
+브라우저는 사용자가 페이지와 상호작용(탭, 스크롤 또는 키 누르기를 통해)하는 즉시 새 항목 보고를 중지합니다. 사용자 상호작용, 특히 스크롤은 사용자에게 표시되는 내용을 변경하기 떄문입니다.
+
+분석을 위해서는 가장 최근에 디스패치된 `PerformanceEntry`만 분석 서비스에 보고해야 합니다.
+
+{% Aside 'caution' %} 사용자는 백그라운드 탭에서 페이지를 열 수 있으므로 최대 콘텐츠풀 페인트는 사용자가 탭에 집중할 때까지 발생하지 않을 수도 있으며, 이럴 경우 최초 로드보다 훨씬 뒤에 이루어집니다. {% endAside %}
+
+#### 로드 시간 vs. 렌더링 시간
+
+[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) 헤더가 없는 교차 출처 이미지의 경우 이미지의 렌더링 타임스탬프가 노출되지 않고 대신 로드 시간만 노출됩니다. 이는 다른 여러 가지 API에 이미 노출되어 있는 부분이기 때문입니다.
+
+[아래 사용 예시](#measure-lcp-in-javascript)에서는 렌더링 시간을 사용할 수 없는 요소를 처리하는 방법을 보여줍니다. 하지만 가능하다면 언제나 [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) 헤더를 설정하는 것이 좋습니다. 그래야 메트릭이 더욱 정확해지기 때문입니다.
+
+### 요소 레이아웃 및 크기 변경은 어떻게 처리되나요?
+
+새 성능 항목을 계산하고 디스패치하는 성능 오버헤드를 낮게 유지하기 위해 요소의 크기나 위치를 변경해도 새 LCP 후보가 생성되지 않으며 오직 뷰포트에서 요소의 처음 크기와 위치만 고려합니다.
+
+즉, 처음에 화면 밖에서 렌더링된 후 다음 화면으로 전환되는 이미지는 보고되지 않을 수 있습니다. 또한, 처음에 뷰포트에서 렌더링된 요소가 아래로 밀려 뷰에서 벗어나도 초기 뷰포트 내에서의 크기를 보고합니다.
+
+### 예시
+
+다음은 인기 웹사이트에서 최대 콘텐츠풀 페인트가 발생하는 경우의 예시입니다.
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="cnn.com의 최대 콘텐츠풀 페인트 타임라인", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="techcrunch.com의 최대 콘텐츠풀 페인트 타임라인", width="800", height="311" %}
+
+위의 두 타임라인에서는 콘텐츠가 로드되면 최대 요소가 변경됩니다. 첫 번째 예에서는 새 콘텐츠가 DOM에 추가되었기 때문에 최대 요소가 변경됩니다. 두 번째 예에서는 레이아웃이 변경되고 이전의 최대 콘텐츠가 뷰포트에서 제거됩니다.
+
+늦게 로드하는 콘텐츠가 페이지에 이미 있는 콘텐츠보다 큰 경우가 많지만 반드시 그런 것은 아닙니다. 다음 두 예는 페이지가 완전히 로드되기 전에 발생하는 가장 큰 콘텐츠가 포함된 페인트를 보여줍니다.
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="instagram.com의 최대 콘텐츠풀 페인트 타임라인", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="google.com의 최대 콘텐츠풀 페인트 타임라인", width="800", height="311" %}
+
+첫 번째 예에서는 Instagram 로고가 비교적 일찍 로드되어 다른 콘텐츠가 점진적으로 표시된 후에도 최대 요소로 남아 있습니다. Google 검색 결과 페이지 예에서 최대 요소는 이미지 또는 로고 로드가 완료되기 전에 표시되는 텍스트 단락입니다. 개별 이미지가 모두 이 단락보다 작기 때문에 텍스트 단락이 로드 프로세스 전체에서 최대 요소로 유지됩니다.
+
+{% Aside %} Instagram 타임라인의 첫 번째 프레임에서 카메라 로고 주위에 녹색 상자가 없음을 알 수 있습니다. 이는 `<svg>` 요소이고 `<svg>` 요소는 현재 LCP 후보로 간주되지 않기 때문입니다. 첫 번째 LCP 후보는 두 번째 프레임의 텍스트입니다. {% endAside %}
+
+## LCP 측정 방법
+
+LCP는 [실험실](/user-centric-performance-metrics/#in-the-lab)이나 [현장](/user-centric-performance-metrics/#in-the-field)에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.
+
+### 현장 도구
+
+- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console(Core Web Vitals Report)](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)
+
+### 실험실 도구
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### JavaScript에서 LCP 측정
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+JavaScript에서 LCP를 측정하려면 [Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/)를 사용할 수 있습니다. 다음 예시에서는 `largest-contentful-paint` 항목을 수신 대기하고 콘솔에 기록하는 [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)를 작성하는 방법을 확인하실 수 있습니다.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+이 코드에서는 `largest-contentful-paint` 항목을 콘솔에 기록하는 방법을 보여주지만 JavaScript에서 LCP를 측정하는 것은 보다 복잡합니다. 자세한 내용은 아래를 참조하세요.
+
+{% endAside %}
+
+위의 예에서 기록된 각각의 `largest-contentful-paint` 항목은 현재 LCP 후보를 나타냅니다. 일반적으로 마지막 항목이 내보낸 `startTime` 값이 LCP 값이지만 항상 그런 것은 아닙니다. 모든 `largest-contentful-paint` 항목이 LCP 측정에 유효한 것은 아닙니다.
+
+다음 섹션에는 API가 보고하는 내용과 메트릭이 계산되는 방법 사이의 차이점이 나열되어 있습니다.
+
+#### 메트릭과 API의 차이점
+
+- API는 백그라운드 탭에 로드되는 페이지에 대한 `largest-contentful-paint` 항목을 디스패치하지만 이러한 페이지는 LCP를 계산할 때 무시됩니다.
+- API는 `largest-contentful-paint` 항목을 계속 디스패치하지만 LCP를 계산할 때는 해당 항목을 무시해야 합니다. 요소는 페이지가 계속 전경에 있어야 유효한 것으로 간주되기 때문입니다.
+- 페이지가 [백/포워드 캐시](/bfcache/#impact-on-core-web-vitals)에서 복원될 때 API는 `largest-contentful-paint` 항목을 보고하지 않지만, 사용자는 이를 고유한 페이지 방문으로 경험하므로 LCP는 측정되어야 합니다.
+- API는 iframe 내의 요소를 고려하지 않지만 LCP를 올바르게 측정하려면 이를 고려해야 합니다. 하위 프레임은 API를 사용하여 집계를 위해 상위 프레임에 `largest-contentful-paint` 항목을 보고할 수 있습니다.
+
+개발자는 이러한 미묘한 차이점을 모두 기억하는 대신 가능한 경우 다음과 같은 차이점을 대신 처리해주는 [`web-vitals` JavaScript 라이브러리](https://github.com/GoogleChrome/web-vitals)를 사용하여 LCP를 측정할 수 있습니다.
+
+```js
+import {onLCP} from 'web-vitals';
+
+// LCP를 이용 가능하게 되면 바로 측정 및 기록합니다.
+onFCP(console.log);
+```
+
+JavaScript에서 LCP를 측정하는 방법에 대한 전체 예제는 [`onLCP()`의 소스 코드](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts)를 참조하세요.
+
+{% Aside %} 일부 경우(예: 교차 원본 iframe) JavaScript에서 LCP를 측정할 수 없습니다. 자세한 내용은 `web-vitals` 라이브러리의 [제한 사항](https://github.com/GoogleChrome/web-vitals#limitations) 섹션을 참조하세요. {% endAside %}
+
+### 최대 요소가 가장 중요한 요소가 아닐 때는 어떻게 하나요?
+
+페이지에서 가장 중요한 요소가 최대 요소와 같지 않은 경우가 있으며, 개발자는 이 대신 다른 요소의 렌더링 시간을 측정하는 데 더 관심이 있을 수 있습니다. 이런 경우에는 [사용자 지정 메트릭](https://wicg.github.io/element-timing/)에 대한 문서에 설명되어 있는 것처럼 [Element Timing API](/custom-metrics/#element-timing-api)를 사용합니다.
+
+## LCP를 개선하는 방법
+
+LCP는 주로 4가지 요인에 의해 영향을 받습니다.
+
+- 느린 서버 응답 시간
+- 렌더링 차단 JavaScript 및 CSS
+- 리소스 로드 시간
+- 클라이언트 측 렌더링
+
+LCP를 개선하는 방법에 대한 자세한 내용은 [LCP 최적화](/optimize-lcp/)를 참조하시기 바랍니다. LCP를 개선할 수 있는 개별 성능 기술에 대한 추가 지침은 다음을 참조하세요.
+
+- [PRPL 패턴으로 즉각적 로딩 적용](/apply-instant-loading-with-prpl)
+- [중요 렌더링 경로 최적화](/critical-rendering-path/)
+- [CSS 최적화](/fast#optimize-your-css)
+- [이미지 최적화](/fast#optimize-your-images)
+- [웹 글꼴 최적화](/fast#optimize-web-fonts)
+- [JavaScript 최적화](/fast#optimize-your-javascript)(클라이언트 렌더링 사이트용)
+
+## 추가 리소스
+
+- [performance.now()](https://perfnow.nl/) (2019)에서 [Annie Sullivan](https://anniesullie.com/)이 발표한 [Chrome의 성능 모니터링에서 알게 된 내용](https://youtu.be/ctavZT87syI)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ko/metrics/tbt/index.md b/src/site/content/ko/metrics/tbt/index.md
new file mode 100644
index 00000000000..0c25bac346d
--- /dev/null
+++ b/src/site/content/ko/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Total Blocking Time(총 차단 시간, TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: 이 게시물에서는 총 차단 시간(TBT) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+총 차단 시간(TBT)은 페이지가 안정적인 상호 작용 환경이 되기 전, 상호 작용이 불가능했을 때의 심각성을 수량화하는 데 도움이 되기 때문에 [로드 응답성](/user-centric-performance-metrics/#in-the-lab)을 측정하기에 중요한 [실험실 메트릭](/user-centric-performance-metrics/#types-of-metrics)입니다. TBT가 낮으면 해당 페이지의 [사용 가능성](/user-centric-performance-metrics/#questions)을 보장하는 데 도움이 됩니다.
+
+{% endAside %}
+
+## TBT란 무엇인가요?
+
+총 차단 시간(TBT) 메트릭은 메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/)와 [Time to Interactive(상호 작용까지의 시간, TTI)](/tti/) 사이 총 시간을 측정합니다.
+
+메인 스레드에서 50밀리초(ms) 이상 실행되는 작업, 즉 [긴 작업](/custom-metrics/#long-tasks-api)이 있을 때마다 메인 스레드는 "차단"된 것으로 간주됩니다. 메인 스레드가 "차단"되었다고 하는 이유는 브라우저가 진행 중인 작업을 중단할 수 없기 때문입니다. 따라서 사용자가 긴 작업 중 페이지와 *상호 작용한 경우* 브라우저는 일단 해당 작업이 끝나기까지 기다린 후에야 응답할 수 있습니다.
+
+작업이 길어지는 경우(예: 50ms 이상) 사용자는 지연을 알아차리고 페이지가 느리거나 버벅거리는 것으로 인지하게 됩니다.
+
+주어진 긴 작업의 *차단 시간*은 50ms를 초과해 지속됩니다. 또한 페이지의 *총 차단 시간*은 FCP와 TTI 사이에서 발생하는 각각의 긴 작업에 대한 *차단 시간*을 합한 것입니다.
+
+페이지 로드 중 브라우저의 메인 스레드에 대한 다음 다이어그램을 예시로 들어보겠습니다.
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="메인 스레드의 작업 타임라인", width="800", height="156", linkTo=true %}
+
+위의 타임라인에는 5개의 작업이 있으며 그 중 3개는 지속 시간이 50ms를 초과하기 때문에 긴 작업으로 간주됩니다. 다음 다이어그램은 각각의 긴 작업에 대한 차단 시간을 보여줍니다.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="차단 시간을 보여주는 메인 스레드의 작업 타임라인", width="800", height="156", linkTo=true %}
+
+따라서 메인 스레드에서 작업을 실행하는 데 소요된 총 시간은 560ms이지만 차단 시간으로 간주되는 것은 345ms뿐입니다.
+
+<table>
+  <tr>
+    <th></th>
+    <th>작업 기간</th>
+    <th>작업 차단 시간</th>
+  </tr>
+  <tr>
+    <td>작업 1</td>
+    <td>250ms</td>
+    <td>200ms</td>
+  </tr>
+  <tr>
+    <td>작업 2</td>
+    <td>90ms</td>
+    <td>40ms</td>
+  </tr>
+  <tr>
+    <td>작업 3</td>
+    <td>35ms</td>
+    <td>0ms</td>
+  </tr>
+  <tr>
+    <td>작업 4</td>
+    <td>30ms</td>
+    <td>0ms</td>
+  </tr>
+  <tr>
+    <td>작업 5</td>
+    <td>155ms</td>
+    <td>105ms</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>총 차단 시간</strong></td>
+    <td><strong>345ms</strong></td>
+  </tr>
+</table>
+
+### TBT는 TTI와 어떤 관련이 있나요?
+
+TBT는 페이지가 안정적인 상호 작용 환경이 되기 전, 상호 작용이 불가능했을 때의 심각성을 수량화하는 데 도움이 되기 때문에 TTI와 함께 보기에 가장 좋은 메트릭입니다.
+
+TTI는 메인 스레드에 최소 5초 동안 긴 작업이 없는 경우 페이지를 "안정적 상호 작용 가능" 환경으로 간주합니다. 이는 10초에 걸쳐 3개의 51ms 작업이 분산되어 TTI가 10초 길이의 단일 작업만큼 밀려날 수 있음을 의미합니다. 그러나 이 두 시나리오는 페이지와 상호 작용하려는 사용자에게는 매우 다르게 느껴질 것입니다.
+
+첫 번쨰 상황에서 3개의 51ms 작업에 대한 TBT는 **3ms**일 것입니다. 반면 10초 길이의 단일 작업은 TBT가 **9950ms** 입니다. 두 번째 상황의 큰 TBT 값은 사용자 경험이 얼마나 열악한지 수량화해서 보여주는 것입니다.
+
+## TBT 측정 방법
+
+TBT는 [실험실에서](/user-centric-performance-metrics/#in-the-lab) 측정해야 하는메트릭입니다. TBT를 측정하는 가장 좋은 방법은 사이트에서 Lighthouse 성능 감사를 실행하는 것입니다. 사용법에 대한 자세한 내용은 [TBT에 대한 Lighthouse 문서](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)를 참조하세요.
+
+### 실험실 도구
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} TBT는 현장에서 측정하는 것도 가능하지만, 사용자 상호 작용이 보고서에서 많은 편차를 일으키는 방식으로 페이지의 TBT에 영향을 줄 수 있으므로 권장하지 않습니다. 현장에서 페이지의 상호 작용을 이해하려면 [First Input Delay(최초 입력 지연, FID)](/fid/)를 측정해야 합니다. {% endAside %}
+
+## 좋은 TBT 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하기 위해 사이트는 **평균 모바일 하드웨어**에서 테스트할 때 총 차당 시간이 **300밀리초** 미만이 될 수 있도록 해야 합니다.
+
+페이지의 TBT가 Lighthouse 성능 점수에 미치는 영향에 대한 자세한 내용은 [Lighthouse가 TBT 점수를 결정하는 방법](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)을 참조하세요.
+
+## TBT를 개선하는 방법
+
+특정 사이트에 대한 TBT를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정한 [기회](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)를 주의 깊게 살펴보시기 바랍니다.
+
+모든 사이트에 대해 일반적으로 TBT를 개선하는 방법을 알아보려면 다음 성능 가이드를 참조하세요.
+
+- [타사 코드의 영향 줄이기](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [JavaScript 실행 시간 단축](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [메인 스레드 작업 최소화](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [요청 수를 낮게 유지하고 전송 크기를 작게 유지](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ko/metrics/tti/index.md b/src/site/content/ko/metrics/tti/index.md
new file mode 100644
index 00000000000..ea0d27c3445
--- /dev/null
+++ b/src/site/content/ko/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Time to Interactive(상호 작용까지의 시간, TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: 이 게시물에서는 상호 작용까지의 시간(TTI) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} 상호 작용까지의 시간(TTI)은 [로드 응답성](/user-centric-performance-metrics/#types-of-metrics)을 측정하기 위한 중요한 [실험실 메트릭](/user-centric-performance-metrics/#in-the-lab)입니다. 페이지가 상호 작용하는 것처럼 *보이지만* 실제로는 그렇지 않은 경우를 식별하는 데 도움이 됩니다. 빠른 TTI로 해당 페이지가 [사용 가능](/user-centric-performance-metrics/#questions)하다는 것을 확인할 수 있습니다. {% endAside %}
+
+## TTI는 무엇인가요?
+
+TTI 메트릭은 페이지가 로드되기 시작한 시점부터 주요 하위 리소스가 로드되고 사용자 입력에 신속하게 안정적으로 응답할 수 있는 시점까지의 시간을 측정합니다.
+
+[웹 페이지의 성능 추적](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/)을 기반으로 TTI를 계산하려면 다음 단계를 따르세요.
+
+1. [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/)에서 시작합니다.
+2. 이 시점 이후부터 최소 5초 정도의 조용한 기간을 검색합니다. 여기서 *조용한 기간*이란 [긴 작업](/custom-metrics/#long-tasks-api)이 없고 전송 중 네트워크 GET 요청이 2개 미만인 기간을 뜻합니다.
+3. 긴 작업이 발견되지 않으면 조용한 기간 이전의 마지막 긴 작업을 역방향으로 검색하며 FCP에서 종료합니다.
+4. TTI는 조용한 기간이 발생하기 이전 마지막 긴 작업의 종료 시간이거나, 긴 작업이 발견되지 않았을 경우에는 FCP와 동일한 값입니다.
+
+다음 다이어그램은 위의 단계를 시각화하는 데 도움이 됩니다.
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="TTI 계산 방법을 보여주는 페이지 로드 타임라인", width="800", height="473", linkTo=true %}
+
+일반적으로 개발자는 빠른 렌더링 시간을 위해 페이지를 최적화해 왔으며 때로는 TTI를 희생하는 경우도 있었습니다.
+
+SSR(서버 측 렌더링)과 같은 기술로 인해 페이지가 상호 작용 환경으로 *보이는* 시나리오(즉, 링크와 버튼이 화면에 표시됨)로 이어질 수 있지만, 메인 스레드가 차단되었거나 이러한 요소를 제어하는 JavaScript 코드가 로드되지 않았기 때문에 *실제로는 그렇지 않습니다*.
+
+사용자가 상호 작용 환경처럼 보이지만 실제로는 그렇지 않은 페이지와 상호 작용하려고 하는 경우 다음 두 가지 반응을 보일 가능성이 큽니다.
+
+- 가장 좋은 시나리오라고 해도, 페이지의 응답 속도가 느리다며 짜증스러워할 것입니다.
+- 최악의 시나리오는 해당 페이지에 문제가 있다고 생각하고 아예 떠나버리는 것입니다. 심지어 해당 사용자는 브랜드 가치에 대한 자신 또는 신뢰를 잃어버릴 수도 있습니다.
+
+이런 문제를 피하기 위해서는 FCP와 TTI 사이 차이를 최소화하기 위해 최대한의 노력을 기울여야 합니다. 차이가 있지만 가시적이지 않은 경우, 페이지의 구성 요소가 아직 상호 작용하지 않는다는 것을 시각적 표시를 통해 분명히 알려주어야 합니다.
+
+## TTI 측정 방법
+
+TTI는 [실험실에서](/user-centric-performance-metrics/#in-the-lab) 가장 측정하기 좋은 메트릭입니다. TTI를 측정하는 가장 좋은 방법은 사이트에서 Lighthouse 성능 감사를 실행하는 것입니다. 사용법에 대한 자세한 내용은 [TTI에 대한 Lighthouse 문서](/tti/)를 참조하세요.
+
+### 실험실 도구
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} TTI는 현장에서 측정하는 것도 가능하지만, 사용자 상호 작용이 보고서에서 많은 편차를 일으키는 방식으로 페이지의 TTI에 영향을 줄 수 있으므로 권장하지 않습니다. 현장에서 페이지의 상호 작용을 이해하려면 [First Input Delay(최초 입력 지연, FID)](/fid/)를 측정해야 합니다. {% endAside %}
+
+## 좋은 TTI 점수는 무엇인가요?
+
+우수한 사용자 경험을 제공하기 위해 사이트는 **평균 모바일 하드웨어**에서 테스트할 때 상호 작용까지의 시간이 **5초** 미만이 될 수 있도록 해야 합니다.
+
+페이지의 TTI가 Lighthouse 성능 점수에 미치는 영향에 대한 자세한 내용은 [Lighthouse가 TTI 점수를 결정하는 방법](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score)을 참조하세요.
+
+## TTI를 개선하는 방법
+
+특정 사이트에 대한 TTI를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정한 [기회](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)를 주의 깊게 살펴보시기 바랍니다.
+
+모든 사이트에 대해 일반적으로 TTI를 개선하는 방법을 알아보려면 다음 성능 가이드를 참조하세요.
+
+- [JavaScript 축소](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [필요한 원본에 사전 연결](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [핵심 요청 사전 로드](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [타사 코드의 영향 줄이기](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [크리티컬 요청 깊이 최소화](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [JavaScript 실행 시간 단축](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [메인 스레드 작업 최소화](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [요청 수를 낮게 유지하고 전송 크기를 작게 유지](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ko/metrics/user-centric-performance-metrics/index.md b/src/site/content/ko/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..5634e0690cc
--- /dev/null
+++ b/src/site/content/ko/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: 사용자 중심 성능 메트릭
+authors:
+  - philipwalton
+date: 2019-11-08
+description: 사용자 중심 성능 메트릭은 실제 사용자의 사이트 경험을 이해하고 실제 사용자에게 도움이 되는 방식으로 이러한 경험을 개선하는 데 중요한 도구입니다.
+tags:
+  - performance
+  - metrics
+---
+
+성능이 얼마나 중요한지는 모두가 알고 있습니다. 그러나 성능을 개선하고 웹사이트를 "빠르게" 만든다는 것은 구체적으로 무엇을 의미할까요?
+
+사실 성능은 상대적입니다.
+
+- 동일한 사이트더라도 강력한 장치와 고속 네트워크를 보유한 사용자에게는 빠르고, 하위 장치와 느린 네트워크를 보유한 사용자에게는 느립니다.
+- 두 사이트가 정확히 같은 시간에 로드를 완료하더라도, 하나는 더 빨리 로드되는 것처럼 *보일 수* 있습니다(끝까지 항목을 표시하기를 기다리지 않고 콘텐츠를 점진적으로 로드하는 경우).
+- 사이트가 빠르게 로드되는 것처럼 *보이지만* 사용자 상호 작용에 느리게 응답하거나, 전혀 응답하지 않을 수 있습니다.
+
+따라서 정확하고 정량적으로 측정 가능한 객관적인 기준으로 성능을 이야기하는 것이 중요하며 이러한 기준을 *메트릭*이라고 합니다.
+
+그러나 메트릭이 객관적인 기준을 기반으로 하고 정량적으로 측정할 수 있다고 해서 반드시 유용하다는 의미는 아닙니다.
+
+## 메트릭 정의
+
+일반적으로 웹 성능은 <code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code> 이벤트로 측정되곤 합니다. 그러나 <code>load</code>가 페이지 수명 주기에서 잘 정의된 순간이라고 하더라도, 사용자가 관심을 갖는 부분과 반드시 일치하는 것은 아닙니다.
+
+예를 들어 한 서버가 즉시 "로드"되는 최소 페이지로 응답한 다음, `load` 이벤트가 발생한 후 몇 초가 지날 때까지 페이지에 콘텐츠를 가져오고 표시하는 것을 지연시킬 수 있습니다. 이러한 페이지는 기술적으로는 로드 시간이 빨라지지만, 사용자가 실제로 페이지 로드를 경험하는 방식과는 일치하지 않습니다.
+
+지난 몇 년 동안 Chrome 팀원들은 [W3C Web Performance Working Group](https://www.w3.org/webperf/)과 협력하여 사용자가 웹 페이지 성능을 경험하는 방식을 보다 정확하게 측정하는 일련의 새로운 API 및 메트릭을 표준화하기 위해 노력해 왔습니다.
+
+메트릭이 사용자에게 유의미할 수 있도록, 다음과 같은 몇 가지 주요 질문을 중심으로 메트릭을 구성했습니다.
+
+<table id="questions">
+  <tr>
+    <td><strong>진행 여부</strong></td>
+    <td>탐색이 성공적으로 시작되었습니까? 서버에서 응답이 있었습니까?</td>
+  </tr>
+  <tr>
+    <td><strong>유용성</strong></td>
+    <td>사용자가 참여할 수 있는 충분한 콘텐츠가 렌더링되었습니까?</td>
+  </tr>
+  <tr>
+    <td><strong>사용 가능 여부</strong></td>
+    <td>사용자가 페이지와 상호 작용할 수 있습니까, 아니면 페이지에서 다른 작업이 진행되고 있습니까?</td>
+  </tr>
+  <tr>
+    <td><strong>쾌적함</strong></td>
+    <td>상호 작용이 부드럽고 자연스러우며 지연과 버벅거림이 없습니까?</td>
+  </tr>
+</table>
+
+## 메트릭 측정 방법
+
+성능 메트릭은 일반적으로 다음과 같은 두 가지 방법으로 측정됩니다.
+
+- **실험실:** 일관되고 통제된 환경에서 페이지 로드를 시뮬레이션하는 도구 사용
+- **현장** : 실제 사용자가 실제로 페이지를 로드하고 페이지와 상호 작용하는 경우
+
+둘 다 다른 것보다 좋거나 나쁘다고 말할 수는 없습니다. 사실 일반적으로 좋은 성능을 보장하기 위해서는 둘 다 활용하는 것이 좋습니다.
+
+### 실험실
+
+새로운 기능을 개발할 때는 실험실에서 성능을 테스트하는 것이 필수적입니다. 기능이 프로덕션에 출시되기 전에는 실제 사용자의 성능 특성을 측정할 수 없으므로 성능 회귀를 방지하기 위해서는 출시 전 실험실에서 테스트해보는 것이 가장 좋습니다.
+
+### 현장
+
+실험실 테스트는 성능에 대한 합리적인 대용물이지만, 모든 사용자가 사이트를 실제로 경험하는 방식을 반드시 반영한다고 볼 수는 없습니다.
+
+사이트의 성능은 사용자의 장치 및 네트워크 상태는 물론, 사용자가 페이지와 상호 작용하는지 여부(또는 방법)에 따라 달라질 수 있습니다.
+
+또한 페이지 로드가 결정적이지 않을 수도 있습니다. 예를 들어 맞춤형 콘텐츠나 광고를 로드하는 사이트는 사용자마다 성능 특성이 크게 달라지지만, 실험실 테스트로는 이러한 차이점을 포착하지 못합니다.
+
+사이트가 사용자를 위해 어떻게 작동하는지 제대로 알 수 있는 유일한 방법은 해당 사용자가 사이트를 로드하고 상호 작용할 때 사이트의 성능을 실제로 측정하는 것입니다. 이러한 측정 유형을 일반적으로 [실제 사용자 모니터링](https://en.wikipedia.org/wiki/Real_user_monitoring)(Real User Monitoring, RUM)이라고 합니다.
+
+## 메트릭 유형
+
+사용자가 성능을 인식하는 방식과 관련해 몇 가지 다른 메트릭 유형이 있습니다.
+
+- **인지 로드 속도:** 페이지가 얼마나 빠르게 모든 시각적 요소를 화면에 로드하고 렌더링할 수 있는지 확인합니다.
+- **로드 응답성:** 구성 요소가 사용자 상호 작용에 빠르게 응답하기 위해 페이지에서 필요한 JavaScript 코드를 얼마나 빠르게 로드하고 실행할 수 있는지를 확인합니다.
+- **런타임 응답성:** 페이지 로드 후 페이지가 사용자 상호 작용에 얼마나 빨리 응답할 수 있는지 확인합니다.
+- **시각적 안정성:** 페이지의 요소가 사용자가 예상하지 못한 방식으로 이동해 잠재적으로 상호 작용을 방해하는지를 확인합니다.
+- **원활함:** 전환 및 애니메이션이 일관된 프레임 속도로 렌더링되고 다음 상태로 유동적으로 흐르는지 확인합니다.
+
+위와 같이 모든 유형의 성능 메트릭을 보면, 하나의 메트릭만으로는 페이지의 모든 성능 특성을 캡처하기에 충분하지 않다는 것을 알 수 있습니다.
+
+## 측정할 중요 메트릭
+
+- **[First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/) :** 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다. *([실험실](#in-the-lab), [현장](#in-the-field))*
+- **[Largest contentful paint(최대 콘텐츠풀 페인트, LCP)](/lcp/):** 페이지가 로드되기 시작한 시점부터 가장 큰 텍스트 블록 또는 이미지 요소가 화면에 렌더링될 때까지의 시간을 측정합니다. *([실험실](#in-the-lab), [현장](#in-the-field))*
+- **[First input delay(최초 입력 지연, FID)](/fid/):** 사용자가 링크를 클릭하거나, 버튼을 탭하거나, 사용자 지정 JavaScript 기반 컨트롤을 사용하는 등 처음으로 상호 작용할 때부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정합니다. *([현장](#in-the-field))*
+- **[Time to Interactive(상호 작용까지의 시간, TTI)](/tti/):** 페이지가 로드되기 시작한 시점부터 시각적으로 렌더링되고, 있는 경우 초기 스크립트가 로드되고, 사용자 입력에 신속하게 안정적으로 응답할 수 있는 시점까지의 시간을 측정합니다. *([실험실](#in-the-lab))*
+- **[Total blocking time(총 차단 시간, TBT)](/tbt/):** 메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 FCP와 TTI 사이 총 시간을 측정합니다. *([실험실](#in-the-lab))*
+- **[Cumulative layout shift(누적 레이아웃 이동, CLS)](/cls/):** 페이지 로드가 시작될 때와 해당 [수명 주기 상태](https://developer.chrome.com/blog/page-lifecycle-api/)가 숨김으로 변경될 때 사이에 발생하는 모든 예기치 않은 레이아웃 이동의 누적 점수를 측정합니다. *([실험실](#in-the-lab), [현장](#in-the-field))*
+
+이 목록에는 사용자와 관련된 성능의 다양한 측면을 측정하는 메트릭이 포함되어 있지만 모든 것이 포함되어 있지는 않습니다(예: 런타임 응답성과 원활함은 현재 다루지 않음).
+
+누락된 부분을 다루기 위해 새로운 메트릭이 도입되는 경우도 있지만, 사이트에 맞춤화된 메트릭이 최적일 경우도 있습니다.
+
+## 사용자 지정 메트릭
+
+위에 나열된 성능 메트릭은 웹에 있는 대부분의 사이트의 성능 특성을 전반적으로 이해하는 데 유용합니다. 또한 경쟁 상대와의 성능을 비교하기 위한 일반적인 메트릭으로서의 기능도 합니다.
+
+그러나 고유한 특정 사이트의 경우 전체 성능을 전반적으로 포착하기 위해서 추가 메트릭이 필요한 경우도 있습니다. 예를 들어, LCP 메트릭은 페이지의 기본 콘텐츠 로드가 완료된 시점을 측정하기 위한 것이지만 가장 큰 요소가 페이지의 메인 콘텐츠에 속하지 않는다면 LCP는 이 상황에서 관련성이 없습니다.
+
+이러한 경우를 해결하기 위해 Web Performance Working Group은 자체 사용자 지정 메트릭을 구현하는 데 유용한 하위 수준의 API도 표준화했습니다.
+
+- [User Timing API](https://w3c.github.io/user-timing/)
+- [Long Tasks API](https://w3c.github.io/longtasks/)
+- [Element Timing API](https://wicg.github.io/element-timing/)
+- [Navigation Timing API](https://w3c.github.io/navigation-timing/)
+- [Resource Timing API](https://w3c.github.io/resource-timing/)
+- [Server timing](https://w3c.github.io/server-timing/)
+
+이러한 API를 사용하여 사이트에 특정한 성능 특성을 측정하는 방법을 알아보려면 [사용자 지정 메트릭](/custom-metrics/)에 대한 가이드를 참조하세요.
diff --git a/src/site/content/ko/mini-apps/index.njk b/src/site/content/ko/mini-apps/index.njk
new file mode 100644
index 00000000000..c7134c1dae5
--- /dev/null
+++ b/src/site/content/ko/mini-apps/index.njk
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+date: 2021-03-03
+# updated: 2021-03-03
+pathName: mini-apps
+---
diff --git a/src/site/content/ko/mini-apps/mini-app-about/index.md b/src/site/content/ko/mini-apps/mini-app-about/index.md
new file mode 100644
index 00000000000..97bb5c182d4
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-about/index.md
@@ -0,0 +1,171 @@
+---
+layout: post
+title: 미니앱은 무엇인가요?
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-10-28
+description: |
+  미니앱이 무엇인지 개념을 알아보고 예시를 통해 어떤 모습과 느낌을 제공하는지 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 구성 요소와 호환성
+
+미니앱은 아주 작으며 (주로 [2-4&nbsp;MB](https://www.w3.org/2021/10/MiniApp-Overview-breakout.pdf)) 구동되기 위해 [슈퍼앱](/mini-app-super-apps/#-2)이 필요해요.
+대부분의 미니앱은 HTML, CSS, 그리고 JavaScript를 포함한 웹 기술들(혹은 그 "방언"들)로 만들어진다는 점이 비슷해요.
+미니앱의 구동 런타임은 슈퍼앱의 [웹뷰](https://research.google/pubs/pub46739/) 화면이기에 크로스플랫폼하게 구동돼요.
+그래서 똑같은 미니앱은 똑같은 슈퍼앱 안에서 그게 안드로이드든, iOS든, 또 다른 OS이든 동일하게 동작할 수 있어요.
+하지만 모든 미니앱이 모든 슈퍼앱에서 동작할 수 있는 것은 아니에요.
+이에 대해서는 [나중에](/mini-app-standardization/) 살펴봐요.
+
+## 미니앱의 발견
+
+미니앱은 어떤 중요한 일을 하는 과정에서 브랜딩된 2D 바코드 등으로 _우연히_ 발견돼요.
+예를 들어 식당에 가서 메뉴를 보며 결제 미니앱을 열거나, 전동 킥보드를 빌리기 위해 킥보드 대여 미니앱을 여는 것처럼요.
+아래 사진은 [WeChat의 데모 미니앱](https://github.com/wechat-miniprogram/miniprogram-demo)을 여는 2D 바코드의 예시예요.
+WeChat 슈퍼앱으로 바코드를 스캔하면, 미니앱이 바로 실행돼요.
+다른 슈퍼앱들은 대부분 이 바코드를 인식하지 못할 거예요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SOisfOqKQWr0GZZvUaqn.jpg", alt="WeChat-branded 2d barcode.", width="250", height="250" %}
+  <figcaption>
+    WeChat 앱으로 이 2D 바코드를 스캔하면 데모 미니앱이 실행돼요.
+  </figcaption>
+</figure>
+
+또한 미니앱은 슈퍼앱 내에서 채팅 메시지나 뉴스 피드 등에서도 발견될 수 있어요.
+어떤 슈퍼앱들은 공인 계정들이 미니앱을 자신들의 프로필에 포함할 수 있도록 허용하기도 해요.
+미니앱들은 사용자들이 물리적으로 가까이 있을 때나 (매장 앞에 서있는 등) 사실상 가까이 있을 때 (그 매장으로 가는 길을 찾고 있을 때 등) 사용자에게 추천되어 발견될 수도 있어요.
+자주 사용되는 미니앱들은 주로 슈퍼앱을 스와이프-다운해서 나오거나 별도의 영역에 있는 앱 서랍에 고정되어 접근할 수도 있어요.
+
+## 사용자 경험
+
+모든 슈퍼앱은 미니앱을 위해 사실상 똑같은 사용자 경험을 제공해요.
+상단바의 테마는 커스터마이징이 가능하며 미니앱의 이름을 나타내고, 상단 오른쪽 구석에는 닫기 버튼과 액션 버튼(주로 공유, 즐겨찾기, 신고, 피드백, 설정 등)이 존재해요.
+아래 스크린샷은 Alipay 슈퍼앱에서 동작하는 쇼핑 미니앱과 액션 버튼의 메뉴들을 보여줘요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PkjzF8AyxDVIAMZmhVrr.jpg", alt="The Alipay super app running a shopping mini app with highlighted top bar, action menu button, and close button. The action menu is opened.", width="300", height="649" %}
+  <figcaption>
+    Alipay 슈퍼앱 안에서 열린 쇼핑 미니앱의 액션 메뉴
+  </figcaption>
+</figure>
+
+## UI 패러다임
+
+미니앱의 하단에는 주 내비게이션을 위한 하단바가 주로 존재해요.
+대부분의 슈퍼앱들은 미니앱들의 빠른 개발 구현을 위해 주로 사용되는 캐러셀, 아코디언, 프로그레스 바, 스피너, 스위치, 지도, 등의 공용 UI 패러다임 [컴포넌트를 제공해요](/mini-app-components/).
+이런 공용 컴포넌트는 서로 다른 미니앱들의 일관된 사용자 경험을 만드는 것에도 매우 좋고, 이는 [WeChat의 미니앱 디자인 가이드라인](https://developers.weixin.qq.com/miniprogram/en/design/)에도 권장돼요.
+[Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/)과 Google의 [Design for Android](https://developer.android.com/design) 권장 사항과 달성하려는 목표가 비슷해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nFVCU3HqKERzl7Lops6Q.png", alt="The Douyin demo mini app showcasing the Douyin slider (carousel) component with toggles for auto-advance, dot indicators, etc.", width="300", height="617" %}
+  <figcaption>
+    Douyin 앱의 슬라이더 (캐러셀) 컴포넌트와 다양한 옵션들.
+  </figcaption>
+</figure>
+
+## 서빙
+
+미니앱은 조각 조각 별도의 리소스로 서빙되지 않고, 모든 정보를 포함하는 하나의 암호화된 패키지로 서빙돼요.
+일반적인 웹앱과 달리 미니앱 개발자의 서버(origin)에서 서빙되는 것이 아니라 슈퍼앱 제공자로부터 직접 제공돼요.
+물론 미니앱 개발자들의 서버 등과 API를 통해서 통신을 할 수는 있지만, 핵심 자원(주로 App Shell이라고 불러요)들은 슈퍼앱 제공자를 통해서 전달돼야 해요.
+또한 미니앱은 자신들이 정보를 요청할 서버(origin) 주소들 미리 명시적으로 작성해야 해요.
+
+## 캐싱, 업데이트, 그리고 딥 링킹
+
+미니앱은 슈퍼앱 내에 캐시 형태로 저장되어 사용자가 다음 번에 미니앱을 재실행하면 거의 즉시 실행돼요.
+만약 업데이트 사항이 있다면 새로운 앱 패키지가 실행돼요.
+버전 번호는 실행 URI의 일부가 될 수도 있어요 ([미니앱의 발견](/mini-app-about/#-2) 참고).
+이렇게 되면 슈퍼앱이 로컬 캐싱된 미니앱이 최신 버전인지 아닌지 빠르게 판별할 수 있다는 장점이 있어요.
+실행 URI는 또한 미니앱 내의 특정 페이지에 대한 정보를 마치 딥 링크처럼 담고 있을 수도 있어요.
+사이트맵을 통해 미니앱의 어느 페이지가 슈퍼앱의 크롤러에 의해 발견될 수 있는지 명시할 수도 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZKLNvNnm3Rr6aBmYbons.png", alt="macOS Finder showing a folder containing cached WeChat mini app `.wxapkg` files.", width="800", height="465" %}
+  <figcaption>
+    미니앱이 암호화된 패키지 앱으로 캐시된 모습이에요.
+  </figcaption>
+</figure>
+
+## 저장 공간과 권한
+
+미니앱은 슈퍼앱 제공자에 의해서 리뷰되기에 사용자들은 일반적인 웹앱보다 미니앱을 더 안전하다고 인식하게 돼요.
+미니앱들은 Manifest 파일이나 별도의 설정 파일을 통해서 미니앱이 사용할 권한들과, 경우에 따라 그 권한이 필요한 이유까지 명시해야 해요.
+물론 이 정보들을 허위로 작성할 수도 있겠지만, 사용자들이 납득할 만한 이유 없이 권한을 접근하는데 어려움을 겪을거예요.
+마치 정당한 이유 없이 [모션 센서에 접근](https://twitter.com/search?q=why%20website%20access%20%22motion%20sensors%22%20&src=typed_query&f=live)하는 것처럼요.
+또한 웹앱과 비해 미니앱 제공자들은 굳이 사용자를 식별(fingerprinting)하기 위해 노력할 이유가 없어요.
+사용자들은 대부분 슈퍼앱을 통해 이미 로그인된 상태이기 때문이에요. ([신원, 결제 정보, 소셜 그래프](/mini-app-about/#-9) 참고)
+
+미니앱이 특별한 권한을 요청할 때는 권한 요구 창이 사용자에게 제시돼요.
+플랫폼 제공자가 의무화할 경우 개발자는 권한 요구 이유까지 포함하여 작성하게 돼요.
+아래 스크린샷은 [Douyin 데모 미니앱](https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/example/)이 위치 확인 권한을 사용자에게 묻는 장면이에요.
+어떤 슈퍼앱에서는 미니앱들이 특정 권한이 허용되었는지 확인하거나 권한을 미리 요청하는 Imperative API 등을 제공하기도 해요.
+심지어 어떤 슈퍼앱들은 슈퍼앱의 권한 설정 페이지를 여는 API를 제공하기도 해요 (마치 Chrome의 *[페이지 설정](about://settings/content/siteDetails?site=https%3A%2F%2Fexample.com%2F)*처럼요.
+미니앱은 또한 자신들이 통신하는 모든 서버(Origin)들을 미리 명시해야 해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8To8DiUqnP4qqFfpPNqk.png", alt="The Douyin demo mini app showing a geolocation prompt with two options: 'Not Allowed' and 'Allowed'.", width="300", height="617" %}
+  <figcaption>
+    Douyin 데모 미니앱이 지리적 위치 정보를 요청하는 모습.
+  </figcaption>
+</figure>
+
+## 강력한 기능 접근
+
+미니앱을 호스팅하는 슈퍼앱은 JavaScript 브릿지를 통해 강력한 API 등을 미니앱에 제공해요.
+이 JavaScript 브릿지는 운영 체제의 API에 접근하는 다양한 Hook을 제공해요.
+예를 들어, 미니앱은 현재 연결된 활성 Wi-Fi 정보를 반환하는 `getConnectedWifi()` 같은 JavaScript 함수를 제공할 수 있어요.
+그 구현은 안드로이드의 경우 [`getConnectionInfo()`](<https://developer.android.com/reference/android/net/wifi/WifiManager#getConnectionInfo()>)로,
+iOS의 경우 [`CNCopyCurrentNetworkInfo()`](https://developer.apple.com/documentation/systemconfiguration/1614126-cncopycurrentnetworkinfo)로 구현되고요.
+슈퍼앱은 이 뿐만 아니라 더 다양한 기기 API들을 제공할 수 있어요 (예: 블루투스, NFC, iBeacon, GPS, 시스템 클립보드, 방향 센서, 배터리 정보, 캘린더 접근, 전화번호부 접근, 화면 밝기 조절, 파일 시스템 접근, 물리적 피드백을 위한 진동 하드웨어 접근, 카메라와 마이크 접근, 화면 녹화와 스크린샷 생성, 네트워크 상태, UDP 소켓, 바코드 인식, 기기 메모리 정보 등)
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNEKyoLVeq3IUKGXEZEZ.png", alt="The WeChat demo mini app showing a slider that controls the screen brightness of the device moved all the way to the maximum.", width="300", height="649" %}
+  <figcaption>
+    WeChat 데모 미니앱이 기기의 화면 밝기를 최대로 설정하는 모습.
+  </figcaption>
+</figure>
+
+## 클라우드 서비스 접근
+
+여러 슈퍼앱들은 텍스트 번역, 사물 인식, 이미지 분류, 음성 인식, 또는 다양한 머신러닝 작업 등의 고차원 작업들을 돕기 위해 주 컴퓨팅 자원과 별도로 서버리스한 클라우드 서비스를 운영해요.
+미니앱은 또한 슈퍼앱 제공자들이 제공하는 광고를 통해 수익을 창출할 수도 있어요.
+슈퍼앱 제공자들은 미니앱 개발자들이 미니앱 사용 패턴을 이해할 수 있도록 사용자 지표를 제공하기도 해요.
+
+## 신원, 결제 정보, 소셜 그래프
+
+미니앱의 아주 중요한 기능은 슈퍼앱을 통해서 제공되는 신원과 소셜 그래프 정보예요.
+Douyin과 WeChat 같은 슈퍼앱들은 소셜 네트워킹 사이트로 시작했기 때문에, 대부분의 사용자들은 온라인 신원(identity)과 친구 관계, 그리고 개인 정보를 가지고 있어요.
+어떤 사용자들은 정부로부터 공인(verified)되기도 했고요.
+예를 들어, 어떤 쇼핑 미니앱은 사용자의 동의 아래 사용자의 집 주소와 전화번호, 실명 등을 사용자들이 하나하나 힘들게 입력하지 않도록 슈퍼앱으로부터 직접 받을 수 있어요.
+아래 사진은 WeChat 안에서 구동되는 Walmart 미니앱이 첫 실행에 개인화된 화면과 어디서 많이 본 사용자 사진을 보여주는 모습이에요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HzPx6ZSqQWvsUDT04ex2.png", alt="The Walmart mini app showing the author's face and name on the 'Me' tab.", width="300", height="649" %}
+  <figcaption>
+    첫 구동에 개인화된 Me 페이지를 보여주는 Walmart 미니앱의 모습.
+  </figcaption>
+</figure>
+
+미니앱은 게임 내에서 자신의 최고 기록 같은 업적이나 연락처의 친구에게 도전하는 등이 방식으로 엄청난 인기를 얻을 수도 있어요.
+그 경우 미니앱은 딱 한 번의 탭으로 열 수 있기 때문에, 사용자들은 어떤 불편함이나 방해 요소 없이 미니앱에 도달할 수 있어요.
+
+{% Aside 'success' %}
+다음으로 [미니앱들이 H5 앱들과 QuickApp과 다른 점들](/mini-app-what-are-h5-and-quickapp)을 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-alternative-runtime-environments/index.md b/src/site/content/ko/mini-apps/mini-app-alternative-runtime-environments/index.md
new file mode 100644
index 00000000000..b9972aa9d61
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-alternative-runtime-environments/index.md
@@ -0,0 +1,249 @@
+---
+layout: post
+title: 다른 미니앱 구동 환경
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-09-07
+description: |
+  모바일 외에 미니앱의 다른 구동 환경에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 모바일 그 이상의
+
+중국과 같은 나라에서는 미니앱은 시장에 돌풍을 불러왔어요.
+모바일 기기 같이 미니앱이 넘쳐나는 환경 외에도, 미니앱은 자동차나 컴퓨터 같은 환경에도 진출하기 시작했어요.
+
+## 자동차의 미니앱
+
+2020년 7월 독일의 자동차 회사 BMW 그룹은 Tencent의 WeScenario와 협업한다는 사실을 [발표했어요](https://www.press.bmwgroup.com/china/article/detail/T0313254ZH_CN/%E2%80%9C2020-%E5%AE%9D%E9%A9%AC%E7%A7%91%E6%8A%80%E6%97%A5%E2%80%9D%E5%9C%A8%E7%BA%BF%E5%8F%91%E5%B8%83%E5%A4%9A%E6%AC%BE%E8%BD%A6%E5%86%85%E6%95%B0%E5%AD%97%E4%BA%A7%E5%93%81).
+[Tencent에 따르자면](https://www.tencent.com/en-us/articles/2201068.html), 이 협업을 통해 "30개 이상의 자동차 브랜드에 탑재되며 [WeScenario의] 소셜, 콘텐츠, 서비스 생태계를 110가지 이상의 주류 자동차 모델들에 설치될 것"이라고 밝혔어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AX07xQlEHL7MDjPo1U1H.jpg", alt="Dashboard of a Tencent car showing two rows of mini app icons.", width="800", height="533" %}
+  <figcaption>
+    Tencent WeScenario의 랜딩 페이지 (출처: <a href="https://www.press.bmwgroup.com/china/article/detail/T0313254ZH_CN/%E2%80%9C2020-%E5%AE%9D%E9%A9%AC%E7%A7%91%E6%8A%80%E6%97%A5%E2%80%9D%E5%9C%A8%E7%BA%BF%E5%8F%91%E5%B8%83%E5%A4%9A%E6%AC%BE%E8%BD%A6%E5%86%85%E6%95%B0%E5%AD%97%E4%BA%A7%E5%93%81">BMW</a>).
+  </figcaption>
+</figure>
+
+## 데스크톱의 미니앱
+
+### WeChat 데스크톱의 미니앱
+
+[macOS](https://dldir1.qq.com/weixin/mac/WeChatMac.dmg)와 [Windows](https://dldir1.qq.com/weixin/Windows/WeChatSetup.exe))의 WeChat 클라이언트를 통해서 데스크톱에서도 미니앱을 구동할 수 있어요.
+(만약 macOS에서 연구 중이며 더 많은 기능들을 시도해보고 싶다면 [앱스토어 버전](https://itunes.apple.com/cn/app/id836500024) 대신 웹사이트 버전을 사용하세요.)
+
+macOS에서 실험해보고 싶다면, File Transfer 계정을 통해서 스스로에게 미니앱을 공유하세요.
+이를 통해서 데스크톱에서도 미니앱을 열 수 있어요. 대부분의 경우 미니앱을 바로 클릭하여 실행할 수 있을 거예요. 일부 경우는 채팅 기록 자체를 모바일에서 복사해야하는 경우도 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qLbYBpAoSvbc1Qjc9Ub0.png", alt="The WeChat macOS desktop client showing a chat with oneself with a shared mini app and a chat history as the two visible messages.", width="800", height="602" %}
+  <figcaption>
+    WeChat macOS 데스크톱 앱에서 미니앱을 공유하는 모습.
+  </figcaption>
+</figure>
+
+Windows에서는 미니앱을 공유해서 열 필요가 없어요. 기본적으로 미니앱 패널이 존재해서 최근 사용된 미니앱과 미니앱 검색 페이지를 볼 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NQCoGaAWcbuiO37dCNY5.png", alt="The mini app panel in the WeChat Windows client showing the user's recently used mini apps.", width="800", height="531" %}
+  <figcaption>
+    WeChat Windows 클라이언트의 미니앱 패널.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/H5nqmnoK9JjLcu8mWDSH.png", alt="The mini app search in the WeChat Windows client showing mini apps listed in various categories like games, business, education, etc.", width="800", height="576" %}
+  <figcaption>
+    WeChat Windows Client의 미니앱 검색 페이지.
+  </figcaption>
+</figure>
+
+데스크톱에서 사용하는 WeChat의 미니앱은 OS와 긴밀하게 통합돼요.
+macOS와 Windows 모두 독에 하나의 앱 아이콘을 가지게 돼요.
+macOS에서는 독에서 보관하는 기능이 존재하기는 하지만 WeChat 클라이언트가 종료되면 동시에 미니앱도 종료돼요.
+또한 Windows에서는 미니앱의 이름이 정확하게 보이지만 macOS에서는 미니앱의 이름 대신 WeChat의 이름이 나타나요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nrvwtwOWot6eZI40evfp.png", alt="The macOS multitask switcher includes mini apps alongside regular macOS app.", width="800", height="79" %}
+  <figcaption>
+    스타벅스 미니앱도 일반적인 macOS 앱처럼 멀티태스킹할 수 있어요.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fG4cpJgpyXeqvjn4lF3v.png", alt="The Starbucks mini app icon on the macOS Dock with a WeChat title.", width="646", height="412" %}
+  <figcaption>
+    macOS에서의 미니앱은 이름으로 WeChat이 나타나요.
+  </figcaption>
+</figure>
+
+대부분의 미니앱은 데스크톱에 최적화되지 않아 모바일 인터페이스로 고정된 크기로만 사용할 수 있어요. ([사용자 경험](/mini-app-about/#-3) 참고).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uorcciuZIL8sadxTjXbv.png", alt="The Starbucks mini app running on macOS asking for the user profile permission which the user can grant via a prompt shown at the bottom.", width="300", height="484" %}
+  <figcaption>
+    macOS에서 실행되는 스타벅스 미니앱이 신원 정보 권한을 요청하는 모습.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UGufvRnoaAGm8A3qQG4a.png", alt="The Starbucks mini app running on macOS showing the home screen of the app.", width="300", height="484" %}
+  <figcaption>
+    스타벅스 미니앱이 macOS에서 고정된 크기로만 동작하는 모습.
+  </figcaption>
+</figure>
+
+반응형 미니앱은 데스크톱에 최적화되어 있어요. macOS에서는 여전히 고정된 크기로 동작하지만 Windows에서는 유연하게 크기를 변경할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cUMqQ75zPeCDNTcCWF5D.png", alt="The WeChat components demo app in a responsive app window that can be resized and that by default is wider than the usual mobile screen.", width="800", height="620" %}
+  <figcaption>
+    WeChat 컴포넌트 데모 앱이 반응형으로 동작하는 모습.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rPbojIjBGKbNtDviB0MJ.png", alt="The WeChat components demo app in a narrow window showing three boxes A, B, and C stacked on top of each other.", width="300", height="614" %}
+  <figcaption>
+    WeChat 컴포넌트 데모 앱을 좁게 연 모습.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xnlacc8Xm1eNMCuajYYL.png", alt="The WeChat components demo app in a wide window showing three boxes A, B, and C with A stacked on top of B and C on the side.", width="600", height="565" %}
+  <figcaption>
+    WeChat 컴포넌트 데모 앱을 넓게 연 모습.
+  </figcaption>
+</figure>
+
+macOS에서 미니앱의 권한은 컨텍스트 메뉴를 통해서 변경할 수 있어요.
+Windows에서는 권한을 설정하는 것은 불가능한 것 같고, 위치 또한 권한 없이 접근 가능한 대략적인 위치만 읽을 수 있는 것 같았어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rHyiTGbMauqbSFWBFlMW.png", alt="The WeChat components demo app running on macOS showing two checkboxes for the location and user info permission.", width="500", height="384" %}
+  <figcaption>
+    macOS에서 위챗 미니앱의 설정.
+  </figcaption>
+</figure>
+
+### 360 Secure Browser에서의 미니앱
+
+360 Secure Browser(360 安全浏览器)는 Qihoo 사에서 개발한 웹브라우저예요.
+[iOS와 Android](https://mse.360.cn/)뿐만 아니라, [Windows](https://browser.360.cn/se/), [macOS](https://browser.360.cn/ee/mac/index.html), [Linux](https://browser.360.cn/se/linux/index.html)에서도 사용할 수 있어요.
+Windows에서는 특별한 [360 mini apps](https://mp.360.cn/#/)를 구동할 수 있어요.
+[개발자 문서](https://mp.360.cn/doc/miniprogram/dev/)와 [API](https://mp.360.cn/doc/miniprogram/dev/#/e1487ee88399013ec06eff05007391fc)는 타사와 비슷하지만 개발자 도구는 제공하지 않아요.
+대신 개발자들은 자신의 IDE에서 앱을 개발한 뒤 브라우저에서 개발 모드를 활성화해서 테스트해야 해요.
+디버깅은 Chrome 개발자 도구로 진행해요.
+[데모 앱](https://mp.360.cn/examples/appdemo.zip)으로 개발을 시작할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IdHpN4GhVWDZ5gmSZ4Jb.png", alt="A 360 mini app running in 360 Secure Browser being debugged with Chrome Dev Tools.", width="800", height="402" %}
+  <figcaption>
+    Chrome 개발자 도구로 360 미니앱을 디버깅하는 모습
+  </figcaption>
+</figure>
+
+360 미니앱은 전체화면으로 동작할 수 있고 하단 멀티태스킹 바에도 하나의 앱으로 나타나요.
+컨텍스트 메뉴에서, 데스크톱에서 실행할 수 있는 미니앱 바로가기 버튼을 생성할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M4MPV6TXwsLC6lFn9Jgi.png", alt="A 360 video mini app running in fullscreen mode showing various thumbnails of videos to watch.", width="800", height="402" %}
+  <figcaption>
+    360 미니앱이 전체화면으로 열린 모습.
+  </figcaption>
+</figure>
+
+## 웹 기반 미니앱
+
+어떤 미니앱들은 웹에 기반하고 있어요. 하지만 그 미니앱들은 더 많은 것을 하기 위해 특별한 WebView를 사용하기도 해요.
+
+### LINE
+
+[LINE](https://line.me/)은 스마트폰, 태블릿, 컴퓨터 등 전자기기에서 사용할 수 있는 인스턴트 메신저예요.
+LINE은 뿐만 아니라 디지털 지갑, 뉴스 스트림, 비디오 스트리밍, 웹툰 서비스도 하고 있어요.
+이 서비스는 대한민국 인터넷 검색 엔진 회사 [Naver Corporation](http://www.navercorp.com/)의 자회사예요.
+LINE의 [미니앱](https://developers.line.biz/en/docs/line-mini-app/quickstart/)은
+[본질적으로 일반 웹앱이에요](https://developers.line.biz/en/docs/line-mini-app/discover/specifications/#supported-platforms-and-versions)
+([샘플 앱](https://github.com/line/line-liff-v2-starter) 참고).
+[LINE Front-end Framework](https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app) (LIFF)에 기반하고 있어요.
+[퍼머링크](https://developers.line.biz/en/docs/line-mini-app/develop/permanent-links/)를 활용해서 LINE 앱 바깥에서도 접근할 수 있어요.
+([예시](https://liff.line.me/1653544369-LP5XbPYw)).
+하지만, 그 경우 모든 API가 동작하지는 않아요.
+예시로, QR 코드를 읽는데 사용되는 [`liff.scanCode()`](https://developers.line.biz/en/reference/liff/#scan-code) 또는 블루투스 관련 기능인 [`liff.bluetooth.getAvailability()`](https://developers.line.biz/en/reference/liff/#bluetooth-get-availability) 같은 기능들은 broswer API로는 사용할 수 없어요.
+플랫폼에 대한 느낌을 잡아보려면 [LINE Playground app](https://liff.line.me/1653544369-LP5XbPYw)를 브라우저에서 실행해보거나, LINE 계정이 있으시다면 LINE 앱에서 실행해보세요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YIlFjXgZhq8ROMrPA1BO.png", alt="The LINE Playground demo app running on an iOS device showing `liff.getOS()` returning 'ios'.", width="300", height="649" %}
+  <figcaption>
+    iOS 기기에서 LINE Playground 데모 앱을 실행한 모습.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UPwJbVhssGfA4IQ89kEo.png", alt="The LINE Playground demo app running in the web browser showing `liff.getOS()` returning 'web'.", width="800", height="510" %}
+  <figcaption>
+    브라우저에서 LINE Playground 데모 앱을 실행한 모습.
+  </figcaption>
+</figure>
+
+### Google Spot
+
+[Google Spot 플랫폼](https://developers.google.com/pay/spot)는 개발자들이 [Google Pay](https://pay.google.com/)로 개발자들이 생성하고, 브랜딩하고, 호스팅할 수 있는 디지털 스토어프론트인 "스폿"을 만들 수 있도록 해요.
+온라인에서 발견하거나, 오프라인 매장에서도 물리적 바코드를 통해서 발견할 수 있어요.
+사용자들은 Spot을 공유하거나, Google Pay 앱에서 발견할 수 있어요.
+Spot은 HTML과 JavaScript로 만들어져 있기에 존재하는 PWA나 모바일 웹사이트에 "단 몇줄의 JavaScript"를 추가하면 Spot으로 만들 수 있어요.
+공식 발표 자료에 따르면요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/T4OLZX8PIFjFq3gVzUmo.png", alt="The Eat.fit mini app running in the Google Pay super app showing the sign-in bottom sheet.", width="300", height="637" %}
+  <figcaption>
+    Eat.fit 미니앱이 Google Pay 슈퍼앱에서 구동되는 모습 (출처: <a href="https://developers.google.com/pay/spot">Google</a>).
+  </figcaption>
+</figure>
+
+### Snap Mini
+
+[Snap Inc.](https://snap.com/)은 [Snapchat](https://www.snapchat.com/)으로 잘 알려진 미국의 카메라 및 소셜 미디어 회사예요.
+Snap은 최근 친구들과 사용할 수 있는 작은 도구인 [Snap Minis](https://minis.snapchat.com/)를 발표했어요.
+HTML5로 만들어져 쉽게 개발할 수 있어요.
+또한, 모든 Snapchat 유저에게 기종에 불문하고 설치 없이 사용할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vM5d0wK5fCQSV0VyP7HA.png", alt="The Atom Tickets mini app running in Snapchat showing three snapchat users reserving their seats in a movie theater.", width="320", height="470" %}
+  <figcaption>
+   Atom Tickets 미니앱이 Snapchat에서 구동되는 모습 (출처: <a href="https://minis.snapchat.com/">Snap</a>).
+  </figcaption>
+</figure>
+
+### VK 미니앱
+
+러시아의 소셜 네트워킹 플랫폼 [VK](https://vk.com/mini-apps) 또한 개발자들이 자사의 소셜 네트워크와 연동하여 [개발할 수 있는](https://vk.com/dev/vk_apps_docs) [미니앱](https://vk.com/mini-apps) 플랫폼을 운영해요.
+VK mini apps 또한 VK의 플랫폼별 모바일 앱 또는 데스크톱 웹사이트에서 사용할 수 있어요.
+[Mail.ru](https://mail.ru/) 같은 자사의 서비스를 제외하고는 VK mini apps은 [Atom browser](https://browser.ru/)에도 깊게 통합되어 있어요.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/tZJgYpdjurBVfhInqWRo.webp", alt="The Все аптеки mini app running in VK.", width="460", height="948" %}
+  <figcaption>
+    VK에서 구동되는 Все аптеки 미니앱 (출처: <a href="https://vk.com/mini-apps">VK</a>).
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+다음으로는 [미니앱 오픈소스 프로젝트](/mini-app-open-source-projects/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-components/index.md b/src/site/content/ko/mini-apps/mini-app-components/index.md
new file mode 100644
index 00000000000..b9d26e14afd
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-components/index.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: 미니앱 컴포넌트
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-03-17
+description: |
+  모든 미니앱 플랫폼에서 제공되는 컴포넌트들의 정보에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 웹 컴포넌트
+
+[웹 컴포넌트](https://developer.mozilla.org/docs/Web/Web_Components/)는 개발자들이 조각들을 조립하여 멋진 앱을 만들 수 있다는 약속에서 시작됐어요.
+그런 Atomic Component의 예시로 GitHub의 [time-elements](https://github.com/github/time-elements), Stefan
+Judis의 [web-vitals-element](https://github.com/stefanjudis/web-vitals-element) 그리고 Google의 [dark mode toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle/) 등이 있어요.
+하지만 어떤 온전한 디자인 시스템의 경우 사람들은 하나의 제조사의 일관적인 세트에 더 의존해요.
+몇몇 예시로 SAP의
+[UI5 Web Components](https://sap.github.io/ui5-webcomponents/),
+[Polymer Elements](https://www.webcomponents.org/author/PolymerElements),
+[Vaadin's elements](https://www.webcomponents.org/author/vaadin), 마이크로소프트의
+[FAST](https://github.com/microsoft/fast),
+[Material Web Components](https://github.com/material-components/material-components-web-components),
+[AMP components](https://amp.dev/documentation/components/)를 비롯해 수많은 제조사들의 디자인이 있어요.
+
+이 글에서 다루기엔 너무 복잡한 수많은 이유로, 개발자들은 [React](https://reactjs.org/), [Vue.js](https://vuejs.org/),
+[Ember.js](https://emberjs.com/)등으로 완전히 이주하기도 했어요.
+
+개발자들에게 이런 선택지를 주는 대신 (또는, 관점에 따라 특정한 기술적 결정을 내려야만 하도록 강요하는 대신) 슈퍼앱 제조사들은 개발자들이 반드시 사용해야하는 통일된 컴포넌트 세트를 제공해요.
+
+## 미니앱의 컴포넌트
+
+이 컴포넌트들은 위에 언급한 컴포넌트 라이브러리와 비슷하다고 생각하면 돼요.
+컴포넌트에 어떤 것들이 있는지 확인하려면
+[WeChat의 컴포넌트 라이브러리](https://developers.weixin.qq.com/miniprogram/en/dev/component/),
+[ByteDance의 컴포넌트](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/component/all),
+[Alipay의 컴포넌트](https://opendocs.alipay.com/mini/component),
+[Baidu의 컴포넌트](https://smartprogram.baidu.com/docs/develop/component/component/), 또는
+[QuickApp 컴포넌트를](https://doc.quickapp.cn/widgets/common-events.html) 확인해보세요.
+
+앞서 몇몇 컴포넌트들은 [기반 레벨에서 웹 기술로 동작한다](/mini-app-devtools/#-7)는 것을 보여드렸어요.
+예를 들어, WeChat의 `<image>`는 웹 기술로 구현되어 있어요.
+하지만 모든 컴포넌트가 웹 기술로 구현된 것은 아니에요.
+`<map>` 또는 `<video>` 등의 태그들은 [OS에 내장된 컴포넌트](https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000caab39b88b06b00863ab085b80a)로
+웹뷰 위에서 렌더링돼요.
+어떤 식으로 구현되었는지 자세하게 공개된 바는 없지만, 다른 컴포넌트처럼 프로그램되어 있어요.
+
+여느 때와 같이, 사소한 디테일은 다르지만 모든 슈퍼앱들은 공통된 프로그래밍 철학을 가지고 있어요.
+가장 중요한 것은 [마크업 언어](/mini-app-markup-styling-and-scripting/#)에서 설명한 것처럼 데이터 바인딩이에요.
+컴포넌트들은 주로 기능 단위로 구분되어 있으므로 필요한 컴포넌트를 찾는 것은 어렵지 않아요.
+아래는 Alipay의 분류이지만 다른 제조사들도 비슷해요.
+
+- View 컨테이너
+  - `view`
+  - `swiper`
+  - `scroll-view`
+  - `cover-view`
+  - `cover-image`
+  - `movable-view`
+  - `movable-area`
+- 기본 콘텐츠
+  - `text`
+  - `icon`
+  - `progress`
+  - `rich-text`
+- Form 요소
+  - `button`
+  - `form`
+  - `label`
+  - `input`
+  - `textarea`
+  - `radio`
+  - `radio-group`
+  - `checkbox`
+  - `checkbox-group`
+  - `switch`
+  - `slider`
+  - `picker-view`
+  - `picker`
+- 내비게이션
+  - `navigator`
+- 미디어 컴포넌트
+  - `image`
+  - `video`
+- 캔버스
+  - `canvas`
+- 지도
+  - `map`
+- 오픈 컴포넌트
+  - `web-view`
+  - `lifestyle`
+  - `contact-button`
+- 접근성
+  - `aria-component`
+
+아래는 Alipay의 [`<image>`](https://opendocs.alipay.com/mini/component/image)로`a:for` directive([리스트 렌더링](/mini-app-markup-styling-and-scripting/#-3) 참고)를 사용하는 예시예요.
+`index.js`에서 이미지 데이터 배열을 받아서 배열을 순회해요.
+
+```js
+/* index.js */
+Page({
+  data: {
+    array: [
+      {
+        mode: 'scaleToFill',
+        text: 'scaleToFill',
+      },
+      {
+        mode: 'aspectFit',
+        text: 'aspectFit',
+      },
+    ],
+    src: 'https://images.example.com/sample.png',
+  },
+  imageError(e) {
+    console.log('image', e.detail.errMsg);
+  },
+  onTap(e) {
+    console.log('image tap', e);
+  },
+  imageLoad(e) {
+    console.log('image', e);
+  },
+});
+```
+
+```html
+<!-- index.axml -->
+<view class="page">
+  <view
+    class="page-section"
+    a:for="{% raw %}{{array}}{% endraw %}"
+    a:for-item="item"
+  >
+    <view class="page-section-demo" onTap="onTap">
+      <image
+        class="image"
+        mode="{% raw %}{{item.mode}}{% endraw %}"
+        onTap="onTap"
+        onError="imageError"
+        onLoad="imageLoad"
+        src="{% raw %}{{src}}{% endraw %}"
+        lazy-load="true"
+        default-source="https://images.example.com/loading.png"
+      />
+    </view>
+  </view>
+</view>
+```
+
+`item.mode`는 `mode` 속성으로, `src`는 `src` 속성으로, 그리고 3개의 이벤트 핸들러 `onTap`, `onError`, 그리고 `onLoad`는 동명의 함수로 데이터 바인딩이 된다는 점을 참고하세요.
+[이전](/mini-app-devtools/#custom-elements-under-the-hood)에 보았듯이, `<image>` 태그는 내부적으로 `<div>`로 변환되며
+이미지의 해상도, (선택) Lazy Loading, 기본 소스 등의 정보를 가지고 있어요.
+
+가능한 세부 옵션들은 [문서](https://opendocs.alipay.com/mini/component/image)에 나와있어요.
+문서에 내장된 [컴포넌트 미리보기 시뮬레이터](https://herbox-embed.alipay.com/s/doc-image?chInfo=openhome-doc&theme=light)를 통해 코드를 보다 쉽게 이해할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/t2Y6WWsRhp6LjThxROUo.png", alt="Alipay component documentation with embedded component preview, showing a code editor with simulator that shows the component rendered on a simulated iPhone 6.", width="800", height="510" %}
+  <figcaption>
+    Alipay 컴포넌트 문서와 포함된 컴포넌트 미리보기 시뮬레이터.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xu2F51XL9Z0M3Z9n6n2O.png", alt="Alipay component preview running in a separate browser tab showing a code editor with simulator that shows the component rendered on a simulated iPhone 6.", width="800", height="514" %}
+  <figcaption>
+    Alipay 컴포넌트 미리보기 창이 새로운 탭으로 분리된 모습.
+  </figcaption>
+</figure>
+
+각각의 컴포넌트는 독자적인 QR 코드를 가지고 있어서 Alipay 앱으로 스캔하여 컴포넌트를 예시를 통해 확인할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gaWqLG5GqeqqfbhWz8D1.png", alt="Alipay's `image` component previewed on a real device after scanning a QR code in the documentation.", width="300", height="649" %}
+  <figcaption>
+    Alipay <code>&lt;image&gt;</code> 컴포넌트를 <a href="https://qr.alipay.com/s6x01278ucjhjyknjd5ow53">QR 코드 링크</a>를 통해 미리보는 모습.
+  </figcaption>
+</figure>
+
+개발자들은 문서에서 URI scheme `antdevtool-tiny://`를 통해 Alipay 개발자 도구 IDE로 바로 건너갈 수 있어요.
+개발자들은 이를 통해 자신의 프로젝트로 컴포넌트를 바로 불러올 수 있어요.
+
+## 커스텀 컴포넌트
+
+제조사에서 제공하는 컴포넌트 외에도 다양한 커스텀 컴포넌트를 만들 수 있어요.
+이런 개념은
+[WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/framework/custom-component/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/custom-component/custom-component),
+[Alipay](https://opendocs.alipay.com/mini/framework/component_configuration),
+[Baidu](https://smartprogram.baidu.com/docs/develop/framework/custom-component/), 그리고
+[QuickApp](https://doc.quickapp.cn/tutorial/framework/parent-child-component-communication.html#%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89)에도 존재해요.
+
+예를 들어, Baidu의 커스텀 컴포넌트는 `custom.swan`, `custom.css`, `custom.js`, 그리고 `custom.json` 4개의 파일을 동일한 폴더에 작성함으로써 만들 수 있어요.
+
+`custom.json` 파일은 폴더에 있는 자료들이 커스텀 컴포넌트임을 나타내요.
+
+```json
+{
+  "component": true
+}
+```
+
+`custom.swan`은 마크업을, `custom.css`는 CSS를 나타내요.
+
+```html
+<view class="name" bindtap="tap"
+  >{% raw %}{{name}}{% endraw %} {% raw %}{{age}}{% endraw %}</view
+>
+```
+
+```css
+.name {
+  color: red;
+}
+```
+
+그리고 `custom.js`는 로직을 담당해요. 컴포넌트의 라이프사이클 함수로는 `attached()`, `detached()`, `created()`, 그리고 `ready()` 등이 있어요.
+컴포넌트는 또한 `show()` 그리고 `hide()` 등의 [페이지 라이프 사이클](/mini-app-project-structure-lifecycle-and-bundling/#-2) 이벤트에도 반응할 수 있어요.
+
+```js
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: 'swan',
+    },
+  },
+  data: {
+    age: 1,
+  },
+  methods: {
+    tap: function () {},
+  },
+  lifetimes: {
+    attached: function () {},
+    detached: function () {},
+    created: function () {},
+    ready: function () {},
+  },
+  pageLifetimes: {
+    show: function () {},
+    hide: function () {},
+  },
+});
+```
+
+커스텀 컴포넌트는 `index.json`으로 불러올 수 있어요.그리고 `import`의 `key`로 `index.swan`에서 사용할 컴포넌트의 이름을 지정할 수 있어요.
+여기에서는 이름은 `"custom"`이에요.
+
+```json
+{
+  "usingComponents": {
+    "custom": "/components/custom/custom"
+  }
+}
+```
+
+```html
+<view>
+  <custom name="swanapp"></custom>
+</view>
+```
+
+{% Aside 'success' %}
+다음으로 미니앱의 [프로젝트 구조, 라이프 사이클, 그리고 번들링](/mini-app-project-structure-lifecycle-and-bundling/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-conclusion/index.md b/src/site/content/ko/mini-apps/mini-app-conclusion/index.md
new file mode 100644
index 00000000000..f0ae1f45a3c
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-conclusion/index.md
@@ -0,0 +1,67 @@
+---
+layout: post
+title: 미니앱에 대한 웹 개발자의 결론
+authors:
+  - thomassteiner
+date: 2021-03-03
+updated: 2021-06-12
+description: |
+  틀에서 벗어난 사고와 또다른 곳에서의 영감을 수용하는 것은 웹의 더 나은 미래를 위해서 반드시 도움이 된다는 관찰과 함께 미니앱에 대한 글타래를 마무리해요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 그래서 어떻게 되는건가요?
+
+미니앱에 대해서 조사하고 글을 작성하는 것은 상당히 힘들었지만, 후회하진 않아요.
+한편으로는 미니앱의 성공은 그 창조자들의 접근 방식이 옳았음을 증명해요.
+또다른 한편으로 그들의 성공은 슈퍼앱이 성공한 아주 일부 지역에서만 성공했어요.
+분명한 사실은, 이 생태계가 엄청나게 흥미로우며 알아볼 가치가 있다는 점이에요.
+이 글타래는 미니앱을 사용하고 만드는 다양한 면에 대해서 깊이 알아봤어요.
+[개발자 도구](/mini-app-devtools/) 경험부터
+[마크업](/mini-app-markup-styling-and-scripting/#),
+[스타일링](/mini-app-markup-styling-and-scripting/#-6), 그리고
+[스크립팅](/mini-app-markup-styling-and-scripting/#-7)에 대한 접근, 그리고
+[컴포넌트 모델](/mini-app-components/), 그리고 마지막으로 전체적인
+[아키텍처](/mini-app-project-structure-lifecycle-and-bundling/)에 대해서 다뤘어요.
+미니앱은 앱과 웹 개발자들에게 영감과 가르침을 줄 기회를 제공해요.
+
+[웹 앱을 미니앱 방식으로 만드는](/mini-app-example-project/) 제 첫 실험은 성공적이었어요.
+향후 연구 과제로 이 모델이 얼마나 성능을 내는지, 그리고 웹앱의 다양한 형태를 수용할만큼 유연한지 알아봐야 해요.
+제 현재 임시방편 접근은 각종 코드를 `mini-app.js`라는 전용 라이브러리로 묶는 방식이라 할 수 있겠네요.
+흥미로운 점으로, 이런 방식의 프로그래밍은 `frameset`이라는 과거 프로그래밍 방식과 유사하다는거예요.
+그게 단지 오늘날에는 문서가 아니라 앱에 대한 것일 뿐이고요.
+
+저는 미니앱 개발자 도구에서 배우는 것으로 전체 웹 개발 경험을 향상 시킬 수 있는 대담한 가능성을 확인했어요.
+
+간단한 [(원격) 기기 상 테스트 기능](/mini-app-devtools/#-4)과
+패키징, [빌딩](/mini-app-project-structure-lifecycle-and-bundling/#-4) 경험,
+[IDE](/mini-app-devtools/#ide)와 개발자 도구의 결합 등은 개발자의 삶을 편하게 할만한 많은 환경을 제공해요.
+
+## 마무리하며
+
+기능 관점으로 볼때, 웹은 브라우저를 막론하고 릴리즈를 거듭하며 점점 더 강력해지고 있어요.
+계속해서 자라나는 [기능들의 목록](https://developer.chrome.com/blog/fugu-status/)은 우리가 수년 전 상상하지 못했던 가능성들을 열고 있어요.
+동시에, [미니앱 표준화](/mini-app-standardization/)의 필요성은 미니앱 개발자들이 동일한 미니앱을
+여러 슈퍼앱에 걸쳐 재개발할 여력이나 의사가 없다는 것을 보여줘요.
+웹은 특히나 브라우저 간의 구현 차이로 인해 파편화로부터 자유롭지 않지만,
+머지 않은 미래에 브라우저 단에서 미니앱을 웹에서 구동할 수 있는 추상화를 제공할지도 모르고요.
+결론적ㅇ으로, 이 모든 것들이 어디로 나아갈지 궁금해요.
+틀에서 벗어난 사고와 또다른 곳에서의 영감을 수용하는 것은 웹의 더 나은 미래를 위해서 반드시 도움이 된다는 관찰과 함께 미니앱에 대한 글타래를 마무리할게요.
+
+{% Aside 'success' %}
+축하해요. [미니앱 모음집](/mini-apps/)의 마지막에 이르렀어요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-devtools/index.md b/src/site/content/ko/mini-apps/mini-app-devtools/index.md
new file mode 100644
index 00000000000..2d31614f1fe
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-devtools/index.md
@@ -0,0 +1,224 @@
+---
+layout: post
+title: 미니앱의 개발자 도구
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  여러 미니앱 플랫폼들의 개발자 도구 경험에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 개발자 경험
+
+이제 미니앱 자체에 대해서 이해했으니, 여러 슈퍼앱 플랫폼들의 개발자 경험에 대해서 집중해봐요.
+미니앱 개발은 슈퍼앱 플랫폼에 의해서 무료로 제공되는 IDE 위에서 개발돼요.
+여러 플랫폼이 존재하지만, 여기에서는 가장 유명한 4사의 개발 경험과, 비교를 위해 QuickApp의 개발 경험에 대해서 이야기해볼게요.
+
+## 미니앱 IDE들
+
+슈퍼앱들이 그런 것처럼 대부분의 IDE 또한 중국어로만 제공돼요.
+영문 버전은 최신 버전이 아닐 수도 있으니 중국어 버전을 설치하는 것을 권장해요.
+macOS 개발자라면 어떤 앱들은 디지털 서명이 되어있지 않아 운영 체제에서 실행을 거부할 수도 있어요.
+**본인의 책임 아래**, [Apple의 도움말](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac)을 따라 이를 묵인하고 실행할 수 있어요.
+
+- [WeChat DevTools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
+- [Alipay DevTools](https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html)
+- [Baidu DevTools](https://smartprogram.baidu.com/docs/develop/devtools/history/)
+- [ByteDance DevTools](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/developer-instrument-update-and-download)
+- [Quick App DevTools](https://www.quickapp.cn/docCenter/IDEPublicity)
+
+## 미니앱 시작 프로젝트
+
+모든 슈퍼앱 제공자들은 다운로드하고 테스트해볼 수 있는 데모 앱들을 제공해요.
+어떤 데모 앱들은 IDE의 New Project 생성 기능과 연동되어 있기도 해요.
+
+- [WeChat demo](https://github.com/wechat-miniprogram/miniprogram-demo)
+- [Alipay demo](https://opendocs.alipay.com/mini/introduce/demo)
+- [Baidu demo](https://smartprogram.baidu.com/docs/develop/tutorial/demo/)
+- [ByteDance demo](https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/example)
+- [Quick App demo](https://github.com/quickappcn/sample)
+
+## 개발 과정
+
+IDE와 (데모) 미니앱을 불러오거나 생성한 이후에는 대부분 로그인하는 것으로 시작해요.
+이를 위해서는 로그인된 슈퍼 앱으로 IDE에서 생성해주는 QR 코드를 스캔하면 돼요.
+아주 드물게 비밀번호를 입력해야할 수도 있어요.
+로그인이 되고 나면 IDE에서 개인 정보를 인식해서 프로그래밍, 디버깅, 테스팅을 하거나 앱을 제출하고 리뷰를 받을 수 있어요.
+다음 스크린샷으로 5개의 IDE에서 이를 하는 과정을 알아볼 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YvjvlB82SfPqHBl56Rz4.png", alt="WeChat DevTools application window showing simulator, code editor, and debugger.", width="800", height="463" %}
+  <figcaption>
+    WeChat 개발자 도구의 시뮬레이터, 에디터, 그리고 디버거.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iLbYZFZ9ec245segsIKk.png", alt="Alipay DevTools application window showing code editor, simulator, and debugger.", width="800", height="454" %}
+  <figcaption>
+    Alipay 개발자 도구의 에디터, 시뮬레이터, 그리고 디버거.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/svoq0p6GO1PCT0k0bdba.png", alt="Baidu DevTools application window showing simulator, code editor, and debugger.", width="800", height="540" %}
+  <figcaption>
+    Baidu 개발자 도구의 시뮬레이터, 에디터, 그리고 디버거.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/myapOcgYOwsEumeFbL3A.png", alt="ByteDance DevTools application window showing simulator, code editor, and debugger.", width="800", height="561" %}
+  <figcaption>
+    ByteDance 개발자 도구의 시뮬레이터, 에디터, 디버거.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dUsfozY82E2YhtlxNJz9.png", alt="Quick App DevTools application window showing code editor, simulator, and debugger.", width="800", height="485" %}
+  <figcaption>
+    QuickApp 개발자 도구의 에디터, 시뮬레이터, 그리고 디버거.
+  </figcaption>
+</figure>
+
+위에서 확인할 수 있듯 모든 IDE들의 기본 요소들은 비슷해요.
+거의 항상 [VS Code](https://github.com/Microsoft/vscode)에서도 사용하는 [Monaco Editor](https://microsoft.github.io/monaco-editor/) 기반의 코드 에디터가 있고,
+[Chrome DevTools frontend](https://github.com/ChromeDevTools/devtools-frontend)에 기반한 디버거가 있어요.
+IDE 자체는 [NW.js](https://nwjs.io/)나 [Electron](https://www.electronjs.org/) 앱으로 만들어져 있어요.
+시뮬레이터는 [Chromium `<webview>` tag](https://www.electronjs.org/docs/api/webview-tag)에 기반한 [NW.js `<webview>` tag](https://docs.nwjs.io/en/latest/References/webview%20Tag/)나 [Electron `<webview>` tag](https://www.electronjs.org/docs/api/webview-tag)으로 만들어져 있어요.
+IDE의 내부 구조에 대해서 궁금하다면, Chrome 개발자 도구를 여는 단축키인 <kbd>Control</kbd>+<kbd>Alt</kbd>+<kbd>I</kbd> (Mac의 경우 <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>I</kbd>)로 간단하게 확인해볼 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yXcGmOhbi3xrcMIDhw1t.png", alt="Chrome DevTools used to inspect Baidu's DevTools showing the simulator's webview tag in the Chrome DevTools' Elements panel.", width="800", height="504" %}
+  <figcaption>
+    Baidu 개발자 도구를 Chrome 개발자 도구로 분석해보면 Electron <code>&lt;webview&gt;</code> 태그라는 것을 알 수 있어요.
+  </figcaption>
+</figure>
+
+## 시뮬레이터, 실제 기기 테스팅, 그리고 디버깅
+
+시뮬레이터는 우리가 알고 있는 Chrome 개발자 도구의 [Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)와 비슷해요.
+서로 다른 안드로이드나 iOS 기기에서 테스트하고, 크기나 기기 방향을 바꿔보고, 다양한 네트워크 환경과 메모리 압축, 바코드 인식 이벤트, 예상치 못한 강제 종료, 그리고 다크 모드 등을 테스트할 수 있어요.
+
+내장된 시뮬레이터만으로 앱이 어떤 느낌으로 동작할지 확인할 수 있지만, 실제 웹앱처럼 실 기기 테스팅 또한 필요해요.
+개발 중인 미니앱은 QR 코드를 인식하는 것만으로 간단하게 테스트할 수 있어요.
+예를 들어, ByteDance의 개발자 도구는 실시간으로 생성된 미니앱의 QR 코드를 스캔하는 것만으로 클라우드에서 미니앱을 다운 받아 테스트할 수 있게 해줘요.
+ByteDance가 이를 구현한 방식은, QR 코드 자체의 URL([예시](https://t.zijieimg.com/JMvE5kM/?a=b))이 앱 호스팅 페이지로 리다이렉트되며 ([예시](https://s.pstatp.com/toutiao/resource/tma_c_reveal_fe/static/redirect.html?version=v2&app_id=ttb3d2c56f2ce8e78c&scene=0&version_type=preview&token=3605997583095982&start_page=pages%2Fcomponent%2Findex&url=%7B%22id%22%3A%22ttb3d2c56f2ce8e78c%22%2C%22name%22%3A%22%E5%90%8D%E7%A7%B0%E9%87%8D%E7%BD%AEttb3d2c56f2ce8e78c%22%2C%22icon%22%3A%22%22%2C%22url%22%3A%22https%3A%2F%2Fsf1-ttcdn-tos.pstatp.com%2Fobj%2Fdeveloper%2Fapp%2Fttb3d2c56f2ce8e78c%2Fpreview%2F%22%2C%22orientation%22%3A0%2C%22ttid%22%3A%226857810517176942605%22%2C%22state%22%3A1%2C%22type%22%3A1%2C%22tech_type%22%3A1%2C%22version%22%3A%22undefined%22%7D&tech_type=1&bdpsum=281c864)),
+리다이렉트된 페이지에서 특정한 URI Scheme을 가지고 있는 방식이에요 (위의 예시의 경우 `snssdk1128://`).
+이 URI Scheme으로 ByteDance의 슈퍼앱인 Douyin이나 Toutiao 같은 앱에서 즉시 미니앱을 실행할 수 있어요 ([예시](snssdk1128://microapp?version=v2&app_id=ttb3d2c56f2ce8e78c&scene=0&version_type=preview&token=3605997583095982&start_page=pages%2Fcomponent%2Findex&url=%7B%22id%22%3A%22ttb3d2c56f2ce8e78c%22%2C%22name%22%3A%22%E5%90%8D%E7%A7%B0%E9%87%8D%E7%BD%AEttb3d2c56f2ce8e78c%22%2C%22icon%22%3A%22%22%2C%22url%22%3A%22https%3A%2F%2Fsf1-ttcdn-tos.pstatp.com%2Fobj%2Fdeveloper%2Fapp%2Fttb3d2c56f2ce8e78c%2Fpreview%2F%22%2C%22orientation%22%3A0%2C%22ttid%22%3A%226857810517176942605%22%2C%22state%22%3A1%2C%22type%22%3A1%2C%22tech_type%22%3A1%2C%22version%22%3A%22undefined%22%7D&tech_type=1&bdpsum=281c864)).
+다른 슈퍼앱 제공자는 미니앱 페이지로 가는 것이 아니라, 미리보기 화면을 바로 열어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/p0CrYvh00oAV9AUzeoU6.png", alt="ByteDance DevTools showing a QR code that the user can scan with the Douyin app to see the current mini app on their device.", width="800", height="551" %}
+  <figcaption>
+    ByteDance 개발자 도구에서 실 기기 테스팅을 위해 Douyin 앱으로 열 수 있는 QR 코드를 보여주는 모습
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LNOqaa8z2Oo4CZPa48Bw.png", alt="Intermediate landing page for previewing a ByteDance mini app in various of the company's super apps, opened on a regular desktop browser for reverse-engineering the process.", width="800", height="433" %}
+  <figcaption>
+     미니앱을 미리보기로 보여주는 ByteDance 랜딩 페이지 (플로우를 보여주기 위해 데스크톱 브라우저로 확인함).
+  </figcaption>
+</figure>
+
+더 강력한 기능은 클라우드 기반의 미리보기 원격 디버깅이에요.
+IDE에서 생성된 QR 코드를 스캔하고 나면 미니앱이 실 기기에서 구동되고, 컴퓨터에서는 Chrome 개발자도구가 열려 원격으로 디버깅을 할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/N5Crv3ryZ3bCNFMv7Lir.png", alt="A mobile phone running a mini app with parts of the UI highlighted by the ByteDance DevTools debugger running on a laptop inspecting it.", width="800", height="600" %}
+  <figcaption>
+    ByteDance 개발자 도구를 이용해 무선으로 미니앱을 디버이하는 모습
+  </figcaption>
+</figure>
+
+## 디버거
+
+### 요소 디버깅
+
+미니앱의 디버깅 경험은 Chrome 개발자 도구로 디버깅을 해본 사람이라면 익숙한 경험이에요.
+하지만 미니앱 개발의 워크플로우를 위해 변경된 아주 중요한 몇 가지 차이점들이 있어요.
+Chrome 개발자 도구의 [Elements panel](https://developer.chrome.com/docs/devtools/#elements) 대신,
+미니앱들은 자신들의 고유 HTML 방언을 사용하는 커스텀 패널이 존재해요.
+예를 들어, WeChat의 경우 그 방언을 [Wxml](https://developers.weixin.qq.com/miniprogram/en/dev/framework/view/wxml/)(WeiXin Markup Language)이라고 불러요.
+Baidu의 경우 [Swan Element](https://smartprogram.baidu.com/docs/develop/framework/dev/)라고 하며, ByteDance의 경우
+[Bxml](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttml)이라고 해요.
+Alipay는 [AXML](https://opendocs.alipay.com/mini/framework/axml)라고 하고, QuickApp의 경우는 그 패널을 단순히 [UX](https://doc.quickapp.cn/tutorial/framework/for.html)라고 해줘요
+이 마크업 언어들에 대해서는 [추후에](/mini-app-markup-styling-and-scripting/#) 다룰게요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/k1FO68wZhzpRNvQl2bN3.png", alt="Inspecting an image with WeChat DevTools' 'Wxml' panel. It shows that the tag in use is an `image` tag.", width="800", height="572" %}
+  <figcaption>
+    <code>&lt;image&gt;</code>를 WeChat 개발자 도구로 분석하는 모습
+  </figcaption>
+</figure>
+
+### 커스텀 요소들의 기반
+
+WebView를 [about://inspect/#devices](about://inspect/#devices) 페이지를 통해 실 기기로 분석해보면 WeChat 개발자 도구의 숨겨진 비밀을 알 수 있어요.
+WeChat 개발자 도구에서 `<image>`라고 나온 엘리먼트가 사실은 `<wx-image>`라는 커스텀 요소이고 그 요소는 `<div>`를 유일한 자식 요소로 가지고 있어요.
+신기하게도, 이 요소들은 [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)을 사용하지 않아요. 이 컴포넌트들에 대해서는 [추후에](/mini-app-components/) 더 다룰게요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/on9Ty46RyteTI6QTc2vk.png", alt="Inspecting a WeChat mini app running on a real device with Chrome DevTools. Where WeChat DevTools reported I am looking at an `image` tag, Chrome DevTools reveals I am actually dealing with a `wx-image` custom element.", width="800", height="385" %}
+  <figcaption>
+    <code>&lt;image&gt;</code> 요소를 WeChat 개발자 도구로 분석해보면 사실은 <code>&lt;wx-image&gt;</code> 요소라는 것을 알 수 있어요.
+  </figcaption>
+</figure>
+
+### CSS 디버깅
+
+또 다른 차이점은, CSS의 여러 방언에 새로운 길이 단위인 `rpx`(반응형 픽셀; Responsive Pixel)가 존재한다는 점이에요.
+WeChat 개발자 도구는 기기에 영향을 받지 않는 CSS 길이 단위를 이용해 서로 다른 기기에서 개발을 해도 직관적인 개발 경험을 줘요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bf4YBcscBzbmQtJig7Ij.png", alt="Inspecting a view with a specified top and bottom padding of `200rpx` in WeChat DevTools.", width="800", height="486" %}
+  <figcaption>
+    반응형 픽셀 (<code>200rpx 0</code>)의 패딩을 WeChat DevTools로 분석하는 모습.
+  </figcaption>
+</figure>
+
+## 퍼포먼스 분석
+
+퍼포먼스는 미니앱의 최전방이자 중심이에요. 때문에 WeChat 개발자 도구를 비롯한 여러 개발자 도구들은 Lighthouse와 유사한 성능 측정 도구를 제공해요.
+주 관심 분야는 Total, Performance, Experience, 그리고 Best Practice예요.
+IDE 내 모습은 조금씩 다를 수 있어요.
+아래 스크린샷에서는 코드 에디터를 잠시 가려서 분석 도구가 크게 보일 수 있도록 했어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q8Rze6pR9mpDXw9VCaEs.png", alt="Running a performance audit with the built-in audit tool. The scores show Total, Performance, Experience, and Best Practice, each 100 out of 100 points.", width="800", height="485" %}
+  <figcaption>
+    WeChat 개발자 도구에 내장되어 Total, Performance, Experience, 그리고 Best Practice를 보여주는 분석 도구
+  </figcaption>
+</figure>
+
+## 가상 API
+
+별도의 서비스를 설정하지 않고 WeChat 개발자 도구 안에서 API 응답을 가상으로 구성할 수 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/olJmRvdl0zkoWZiiOkiP.png", alt="Setting up a mock response for an API endpoint in WeChat DevTools.", width="800", height="485" %}
+  <figcaption>
+    WeChat 개발자 도구의 가상 API 도구
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+다음으로 [미니앱의 마크업, 스타일링, 그리고 스크립팅](/mini-app-markup-styling-and-scripting/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-example-project/index.md b/src/site/content/ko/mini-apps/mini-app-example-project/index.md
new file mode 100644
index 00000000000..19b3330aeda
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-example-project/index.md
@@ -0,0 +1,253 @@
+---
+layout: post
+title: 예시 프로젝트에 미니앱 프로그래밍 방법론 적용하기
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  "미니앱 방식으로 프로그래밍하는 방법"을 따르는 예시 프로젝트에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 앱 도메인
+
+[미니앱 방식으로 프로그래밍](/mini-app-programming-way/)을 웹앱에서 확인하기 위해 단순하지만 완전한 앱 아이디어가 생각났어요.
+
+[고강도 인터벌 트레이닝](https://en.wikipedia.org/wiki/High-intensity_interval_training) (HIIT)은 고강도 무산소 운동과 휴식 운동이 짧게 반복되는 심폐 운동 전략이에요.
+[The Body Coach TV](https://www.youtube.com/user/thebodycoach1)의 이 [30분 온라인 세션](https://www.youtube.com/watch?v=tXOZS3AKKOw)처럼 많은 HIIT 운동이 HIIT 타이머를 이용해요.
+
+<div class="w-columns">
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tUl2jNm2bFqGBAFF5s63.png", alt="HIIT training online session with green high intensity timer.", width="800", height="450" %}
+    <figcaption>
+      운동기.
+    </figcaption>
+  </figure>
+  <figure>
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMUgX3WJ4ZfQX38zHP75.png", alt="HIIT training online session with red low intensity timer.", width="800", height="450" %}
+    <figcaption>
+      휴식기.
+    </figcaption>
+  </figure>
+</div>
+
+## HIIT 타이머 예제 앱
+
+이 챕터를 위해 다양한 타이머를 관리하고 고강도와 저강도 운동 간격을 조정하고 하나의 운동 세션을 선택할 수 있는 간단한 HIIT 운동 타이머 앱을 만들었어요.
+반응형 앱이며 내비게이션 바, 탭 바, 그리고 3개의 페이지로 이루어져 있어요.
+
+- **운동:** 운동할 때 메인 페이지. 사용자가 타이머를 고를 수 있고, 운동 세트, 운동 시간, 휴식 시간 3개의 진척도 링을 확인할 수 있어요.
+- **타이머:** 이미 존재하는 타이머를 관리하고 새 타이머를 만들 수 있어요.
+- **설정:** 소리 효과나 음성 안내를 켜고 끄거나 언어와 테마를 설정할 수 있어요.
+
+아래 스크린샷들로 앱의 느낌을 확인해보세요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9RYkQ17tlEy79NlAIFfP.svg", alt="HIIT Time example app in portrait mode.", width="800", height="450" %}
+  <figcaption>
+    세로 모드에서 HIIT Time의 운동 탭.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SNHMWFvHtCYHEfC9SHPl.svg", alt="HIIT Time example app in landscape mode.", width="800", height="450" %}
+  <figcaption>
+    가로 모드에서 HIIT Time의 운동 탭.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/f7uqTk1PNMVaHob7FDzA.svg", alt="HIIT Time example app showing management of a timer.", width="800", height="450" %}
+  <figcaption>
+    HIIT Time의 타이머 관리.
+  </figcaption>
+</figure>
+
+## 앱 구조
+
+위에서 언급되었듯이, 앱은 내비게이션 바, 탭 바, 그리고 3개의 페이지로 구성되어 있고 그리드 구조로 배치되어 있어요.
+내비게이션 바와 탭 바는 iframe이며, 그 사이에 `<div>` 컨테이너가 있어요.
+3개의 페이지 또한 iframe으로 구성되어 있어요.
+3개의 페이지 중 하나는 항상 화면에 나타나며, 탭 바의 선택에 따라 달라져요.
+마지막 iframe은 `about:blank`를 포인팅하고 있는데, 이는 동적으로 생성되는 인앱 페이지를 서빙하는 용도로 활용돼요.
+이는 이미 존재하는 타이머를 변경하거나 새로운 타이머를 생성하기 위해 필요해요.
+저는 이 패턴을 멀티페이지 싱글페이지 애플리케이션이라고 불러요 (Multi-Page Single-Page App, MPSPA).
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rv14TNs1kU0bpW5kv5bq.png", alt="Chrome DevTools view of the HTML structure of the app showing that it consists of six iframes: one for the navbar, one for the tabbar, and three grouped ones for each page of the app, with a final placeholder iframe for dynamic pages.", width="800", height="244" %}
+  <figcaption>
+    앱은 6개의 iframe으로 이루어져 있어요.
+  </figcaption>
+</figure>
+
+## 컴포넌트 기반 lit-html 마크업
+
+각 페이지의 구조는 런타임에 동적으로 연산되는 [lit-html](https://lit-html.polymer-project.org/) 스캐폴드로 구성돼요.
+lit-html은 JavaScript를 위한 효율적이고, 표현력 있고, 확장성 있는 HTML 템플리팅 라이브러리에요.
+HTML 파일 안에 바로 사용할 수 있어 결과 중심적으로 프로그래밍할 수 있어요.
+최종 결과물이 어떻게 생겼을지 생각하며 템플릿을 작성하면,
+lit-html이 데이터와 뷰의 간극을 메꾸고 이벤트 리스너들을 연결해줘요.
+이 앱은 [Shoelace](https://shoelace.style/)의 [`<sl-progress-ring>`](https://shoelace.style/components/progress-ring)나
+직접 구현한 `<human-duration>` 같은 커스텀 엘리먼트 등의 써드파티 요소를 차용했어요.
+커스텀 엘리먼트는 선언적 API를 가지고 있기에 (예를 들어, 진척도 링의 `percentage` 속성처럼요),
+아래에서 확인할 수 있듯이 lit-html과 함께 잘 동작해요.
+
+```html
+<div>
+  <button class="start" @click="${eventHandlers.start}" type="button">
+    ${strings.START}
+  </button>
+  <button class="pause" @click="${eventHandlers.pause}" type="button">
+    ${strings.PAUSE}
+  </button>
+  <button class="reset" @click="${eventHandlers.reset}" type="button">
+    ${strings.RESET}
+  </button>
+</div>
+
+<div class="progress-rings">
+  <sl-progress-ring
+    class="sets"
+    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
+  >
+    <div class="progress-ring-caption">
+      <span>${strings.SETS}</span>
+      <span>${data.sets}</span>
+    </div>
+  </sl-progress-ring>
+</div>
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Toz6JmkCQVt7WLscSnlP.png", alt="Three buttons and a progress ring.", width="300", height="244" %}
+  <figcaption>
+    위의 마크업 페이지가 렌더된 모습.
+  </figcaption>
+</figure>
+
+## 프로그래밍 모델
+
+모든 페이지는 상응하는 `Page` 클래스가 있어 lit-html 마크업에 데이터와 이벤트 핸들러를 제공해서 페이지를 동작하도록 만들어요.
+이 클래스는 `onShow()`, `onHide()`, `onLoad()`, 그리고 `onUnload()`와 같은 라이프사이클 메소드도 제공해요.
+페이지는 또한 선택적인 페이지별 상태와 전역 상태를 공유하기 위한 데이터 저장소에 대한 접근 권한도 가지고 있어요.
+모든 문자열은 중앙에서 관리되어 국제화 또한 내장되어 있어요.
+라우팅은 iframe의 visibility를 변경하고 동적으로 생성되는 페이지는 placeholder iframe의 `src` 속성값을 변경하는 것이 전부라, 브라우저에 의해서 관리돼요.
+아래 예시는 동적으로 생성된 페이지를 닫는 예시예요.
+
+```js
+import Page from '../page.js';
+
+const page = new Page({
+  eventHandlers: {
+    back: (e) => {
+      e.preventDefault();
+      window.top.history.back();
+    },
+  },
+});
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/y82LVHSxUVAehgQlDbsb.png", alt="In-app page realized as an iframe.", width="500", height="272" %}
+  <figcaption>
+    내비게이션은 iframe에서 iframe으로 일어나요.
+  </figcaption>
+</figure>
+
+## 스타일링
+
+페이지의 스타일링은 각 페이지마다 개별 CSS로 이루어져요.
+즉, 이는 화면 요소들을 직접적으로 요소 이름을 통해서 접근할 수 있으며,
+다른 페이지들과 충돌이 일어나지 않는다는 것을 뜻해요.
+글로벌 스타일 또한 페이지에 추가되어 `font-family`나 `box-sizing` 같은 요소들을 중복할 필요가 없어요.
+여기에 테마와 다크모드 옵션 또한 지정할 수 있어요.
+아래 리스트로 설정 페이지와 그리드의 다양한 형태 요소를 정의하고 있어요.
+
+```css
+main {
+  max-width: 600px;
+}
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 0.5rem;
+  margin-block-end: 1rem;
+}
+
+label {
+  text-align: end;
+  grid-column: 1 / 2;
+}
+
+input,
+select {
+  grid-column: 2 / 3;
+}
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/z3Op4O7OM5NQ1zz8Uah8.png", alt="HIIT Time app preferences page showing a form in grid layout.", width="500", height="312" %}
+  <figcaption>
+    각 페이지는 그 단독 세상이에요. 스타일링은 요소 이름으로 직접 할 수 있어요.
+  </figcaption>
+</figure>
+
+## 스크린 켜짐 잠금
+
+운동 도중에 화면이 꺼지면 안돼요.
+지원되는 브라우저에서 HIIT Time은 [Screen Wake Lock](/wake-lock/) 기능을 통해 화면이 켜진 상태를 유지해요.
+아래 코드를 통해 어떻게 이루어지는지 확인해보세요.
+
+```js
+if ('wakeLock' in navigator) {
+  const requestWakeLock = async () => {
+    try {
+      page.shared.wakeLock = await navigator.wakeLock.request('screen');
+      page.shared.wakeLock.addEventListener('release', () => {
+        // Nothing.
+      });
+    } catch (err) {
+      console.error(`${err.name}, ${err.message}`);
+    }
+  };
+  // Request a screen wake lock…
+  await requestWakeLock();
+  // …and re-request it when the page becomes visible.
+  document.addEventListener('visibilitychange', async () => {
+    if (
+      page.shared.wakeLock !== null &&
+      document.visibilityState === 'visible'
+    ) {
+      await requestWakeLock();
+    }
+  });
+}
+```
+
+## 어플리케이션 테스트
+
+HIIT Time 어플리케이션은 [GitHub](https://github.com/tomayac/hiit-time)에서 확인하실 수 있어요.
+[데모](https://tomayac.github.io/hiit-time/)를 새 창에서 확인해보거나,
+아래 모바일 기기를 모방하는 iframe에서 직접 확인해보세요.
+
+<iframe src="https://tomayac.github.io/hiit-time/#workout" width="411" height="731" loading="lazy" frameborder="0" allow="screen-wake-lock"></iframe>
+
+{% Aside 'success' %}
+마지막으로 미니앱에 대한 [결론](/mini-app-conclusion)을 살펴볼거예요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-markup-styling-and-scripting/index.md b/src/site/content/ko/mini-apps/mini-app-markup-styling-and-scripting/index.md
new file mode 100644
index 00000000000..16a3987184b
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-markup-styling-and-scripting/index.md
@@ -0,0 +1,254 @@
+---
+layout: post
+title: 미니앱 마크업, 스타일링, 그리고 스크립팅
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  다양한 미니앱 플랫폼에서 마크업, 스타일링, 그리고 스크립팅 옵션들을 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 마크업 언어
+
+전에 이야기한 것처럼 미니앱은 순수 HTML이 아닌 HTML의 방언을 사용해요.
+[Vue.js](https://vuejs.org/)의 Text Interpolation과 Directive를 사용해본 경험이 있다면 익숙하겠지만,
+비슷한 개념들이 XML Transformations ([XSLT](https://www.w3.org/TR/xslt-30/)) 등의 형태로 존재했었어요.
+아래는 WeChat의 [WXML](https://developers.weixin.qq.com/miniprogram/en/dev/framework/view/wxml/)의 코드 예제들이에요.
+하지만 개념 자체는 Alipay의 [AXML](https://opendocs.alipay.com/mini/framework/axml), Baidu의 [Swan Element](https://smartprogram.baidu.com/docs/develop/framework/dev/), ByteDance의 [TTML](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttml), (개발자 도구에서는 Bxml이라고 불리지만요), 그리고 QuickApp의 [HTML](https://doc.quickapp.cn/tutorial/framework/for.html) 등 모든 미니앱 플랫폼들이 비슷해요.
+Vue.js처럼, 미니앱의 기반 프로그래밍 콘셉트는 [model-view-viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) (MVVM)이에요.
+
+### 데이터 바인딩
+
+데이터 바인딩은 Vue.js의 [Text Interpolation](https://vuejs.org/v2/guide/syntax.html#Text)과 비슷해요.
+
+```html
+<!-- wxml -->
+<view>{% raw %}{{message}}{% endraw %}</view>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    message: 'Hello World!',
+  },
+});
+```
+
+### 리스트 렌더링
+
+리스트 렌더링은 Vue.js의 [`v-for` directive](https://vuejs.org/v2/guide/list.html)와 비슷해요.
+
+```html
+<!-- wxml -->
+<view wx:for="{% raw %}{{array}}{% endraw %}"
+  >{% raw %}{{item}}{% endraw %}</view
+>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    array: [1, 2, 3, 4, 5],
+  },
+});
+```
+
+### 조건부 렌더링
+
+조건부 렌더링은 Vue.js의 [`v-if` directive](https://vuejs.org/v2/guide/conditional.html)와 비슷해요.
+
+```html
+<!-- wxml -->
+<view wx:if="{% raw %}{{view == 'one'}}{% endraw %}">One</view>
+<view wx:elif="{% raw %}{{view == 'two'}}{% endraw %}">Two</view>
+<view wx:else="{% raw %}{{view == 'three'}}{% endraw %}">Three</view>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    view: 'three',
+  },
+});
+```
+
+### 템플릿
+
+[HTML 템플릿의 `content` 복제](https://developer.mozilla.org/docs/Web/API/HTMLTemplateElement/content)를 의무화하는 것이 아니라, WXML 템플릿들은 템플릿 정의와 링크된 `is` 속성을 통해 선언적으로 사용될 수 있어요.
+
+```html
+<!-- wxml -->
+<template name="person">
+  <view>
+    First Name: {% raw %}{{firstName}}{% endraw %}, Last Name: {% raw
+    %}{{lastName}}{% endraw %}
+  </view>
+</template>
+```
+
+```html
+<template is="person" data="{% raw %}{{...personA}}{% endraw %}"></template>
+<template is="person" data="{% raw %}{{...personB}}{% endraw %}"></template>
+<template is="person" data="{% raw %}{{...personC}}{% endraw %}"></template>
+```
+
+```js
+// page.js
+Page({
+  data: {
+    personA: {firstName: 'Alice', lastName: 'Foo'},
+    personB: {firstName: 'Bob', lastName: 'Bar'},
+    personC: {firstName: 'Charly', lastName: 'Baz'},
+  },
+});
+```
+
+## 스타일링
+
+스타일링도 CSS의 방언으로 할 수 있어요. WeChat은 이름을 [WXSS](https://developers.weixin.qq.com/miniprogram/en/dev/framework/quickstart/code.html#WXSS-Style)라고 해요.
+Alipay의 경우 [ACSS](https://opendocs.alipay.com/mini/framework/acss)라고 하고, Baidu는 직관적으로 [CSS](https://smartprogram.baidu.com/docs/develop/framework/view_css/)라고 하고 ByteDance 방언은 [TTSS](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/mini-app-framework/view/ttss)라고 해요.
+이들의 공통점은 CSS를 반응형 픽셀 단위로 확장한다는거예요.
+일반적인 CSS로 작성할 경우, 개발자는 모든 픽셀 단위를 서로 다른 화면 비율과 픽셀 비율에 맞춰 변환해야 해요.
+TTSS의 경우 `rpx` 단위를 지원해, 화면 크기를 `750rpx`로 잡아서 미니앱에서 그 모든 변환을 담당해요.
+예를 들어, Pixel 3a 휴대전화의 경우는 화면 폭이 `393px`이며, 화면비는 `2.75`예요.
+즉, 반응형 `200rpx`는 `104px`이 돼요. 개발자 도구를 통해서 393px / 750rpx \* 200rpx ≈ 104px임을 확인할 수 있어요.
+안드로이드에서는 동일한 개념을 [density-independent pixel](https://developer.android.com/training/multiscreen/screendensities#TaskUseDP)이라고 해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/n26ptkMoSfiTDanfFh5F.png", alt="Inspecting a view with Chrome DevTools whose responsive pixel padding was specified with `200rpx` shows that it is actually `104px` on a Pixel 3a device.", width="800", height="385" %}
+  <figcaption>
+    Pixel 3a 기기에서 실제 패딩 크기를 개발자 도구로 분석하는 모습.
+  </figcaption>
+</figure>
+
+```css
+/* app.wxss */
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0; /* ← responsive pixels */
+  box-sizing: border-box;
+}
+```
+
+컴포넌트들이 Shadow DOM을 사용하기 않기 때문에, 한 페이지 내에서 선언된 스타일은 모든 컴포넌트에 적용돼요.
+대부분 글로벌 스타일을 담당하는 Root Stylesheet이 하나 존재하고, 각 페이지마다 Stylesheet가 별도로 존재해요.
+스타일은 `@import` 구문을 통해서 불러올 수 있어요 (마치 웹 CSS의 [`@import`](https://developer.mozilla.org/docs/Web/CSS/@import)처럼요).
+HTML처럼 스타일은 in-line으로 선언될 수도 있고, 데이터 바인딩을 통한 동적 Text Interpolation으로도 적용할 수 있어요.
+
+```html
+<view style="color:{% raw %}{{color}}{% endraw %};" />
+```
+
+## 스크립팅
+
+미니앱은 JavaScript의 "안전한 부분집합"과 [CommonJS](http://www.commonjs.org/) 또는 [RequireJS](https://requirejs.org/)와 유사한 모듈 시스템을 지원해요.
+JavaScript 코드는 `eval()` 등으로 실행될 수 없고 어떤 함수도 `new Function()`을 통해서 생성될 수 없어요.
+실행 환경은 기기에서는 [V8](https://v8.dev/)이나 [JavaScriptCore](https://developer.apple.com/documentation/javascriptcore)이고,
+시뮬레이터에서는 V8 또는 [NW.js](https://nwjs.io/)이에요
+대부분 IDE에서 트랜스파일링을 지원하기 때문에 빌드 타겟이 오래된 WebView 구현일지라도 ES6 등의 새로운 문법을 사용하는 것도 가능해요. ([추가 정보](/mini-app-project-structure-lifecycle-and-bundling/#-4))
+슈퍼앱의 개발자 문서에는 스크립팅 언어들이 JavaScript가 아니라고 명시하고 있어요.
+하지만 이 이야기는 거의 모듈 시스템에 대해서만 해당되는 이야기예요.
+그 말은, 미니앱은 아직 표준 [ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)을 지원하지 않아요.
+
+[이전에](/mini-app-markup-styling-and-scripting/#) 언급한 것처럼 미니앱의 프로그래밍 콘셉트는
+[model-view-viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) (MVVM)이에요.
+논리 계층(Logic Layer)과 화면 계층(View Layer)는 서로 다른 쓰레드에서 동작해요.
+덕분에 계산에 오래 걸리는 작업 중에서 사용자 화면은 멈추지 않아요.
+웹으로 비유하자면, 스크립트들이 [Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers) 상에서 돌아가는거예요.
+
+WeChat의 스크립팅 언어는
+[WXS](https://developers.weixin.qq.com/miniprogram/en/dev/reference/wxs/)라고 하고, Alipay는
+[SJS](https://opendocs.alipay.com/mini/framework/sjs), ByteDance 또한
+[SJS](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/sjs-syntax-reference/sjs-introduction/)이라고 해요.
+
+Baidu는 자신의 언어를 [JS](https://smartprogram.baidu.com/docs/develop/framework/devjs/)라고 해요.
+이 스크립트들은 실행되기 위해서는 특수한 태그가 포함되어야 해요. 예를 들어 WeChat의 경우는 `<wxs>`가 포함되어야 해요.
+이에 대비해서 QuickApp은 표준 `<script>` 태그와 ES6 [JS](https://doc.quickapp.cn/framework/script.html) 문법을 사용해요.
+
+```html
+<wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs>
+
+<view>{% raw %}{{m1.message}}{% endraw %}</view>
+```
+
+모듈은 `src` 요소나 `require()`을 통해서도 불러올 수 있어요.
+
+```js
+// /pages/tools.wxs
+var foo = "'hello world' from tools.wxs";
+var bar = function (d) {
+  return d;
+};
+module.exports = {
+  FOO: foo,
+  bar: bar,
+};
+module.exports.msg = 'some msg';
+```
+
+```html
+<!-- page/index/index.wxml -->
+<wxs src="./../tools.wxs" module="tools" />
+<view>{% raw %}{{tools.msg}}{% endraw %}</view>
+<view>{% raw %}{{tools.bar(tools.FOO)}}{% endraw %}</view>
+```
+
+```js
+// /pages/logic.wxs
+var tools = require('./tools.wxs');
+
+console.log(tools.FOO);
+console.log(tools.bar('logic.wxs'));
+console.log(tools.msg);
+```
+
+### JavaScript 브릿지 API
+
+JavaScript 브릿지는 미니앱들을 강력한 기기 기능들을 사용할 수 있도록 해요. ([강력한 기능에 접근](/mini-app-about/#-7) 참고)
+그 외에도 여러 편리한 기능들을 제공해요.
+이에 대한 개략적인 이해를 위해
+[WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/api/),
+[Alipay](https://opendocs.alipay.com/mini/api),
+[Baidu](https://smartprogram.baidu.com/docs/develop/api/apilist/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/foundation/tt-can-i-use),
+그리고 [Quick App](https://doc.quickapp.cn/features/) 등
+서로 다른 API들을 확인해보세요.
+
+기능 감지 또한 아주 직관적이에요. 모든 플랫폼에서 말 그대로 `canIUse()` 함수를 지원하기 때문이에요.
+아마도 웹사이트 [caniuse.com](https://caniuse.com/)에서 영감을 받은 것 같아요.
+예를 들어, ByteDance의 [`tt.canIUse()`](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/foundation/tt-can-i-use)
+은 API, 함수, 인자, 옵션, 컴포넌트, 그리고 속성 등을 검사할 수 있도록 해요.
+
+```js
+// Testing if the `<swiper>` component is supported.
+tt.canIUse('swiper');
+// Testing if a particular field is supported.
+tt.canIUse('request.success.data');
+```
+
+{% Aside 'success' %}
+다음으로 [미니 앱 컴포넌트](/mini-app-components/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-open-source-projects/index.md b/src/site/content/ko/mini-apps/mini-app-open-source-projects/index.md
new file mode 100644
index 00000000000..4bc4d8de576
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-open-source-projects/index.md
@@ -0,0 +1,293 @@
+---
+layout: post
+title: 미니앱 오픈소스 프로젝트
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  흥미로운 미니앱 오픈소스 프로젝트에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## kbone
+
+[kbone](https://wechat-miniprogram.github.io/kbone/docs/) 프로젝트 ([GitHub 오픈소스](https://github.com/Tencent/kbone))는
+미니앱을 위한 브라우저 호환 레이어를 만들어서 웹을 위해 작성된 코드가 변경 없이 미니앱으로 동작하는 것을 목표로 해요.
+[Vue](https://github.com/wechat-miniprogram/kbone-template-vue),
+[React](https://github.com/wechat-miniprogram/kbone-template-react), 그리고
+[Preact](https://github.com/wechat-miniprogram/kbone-template-preact)) 등의 템플릿으로 쉽게 시작할 수 있어요.
+
+새 프로젝트는 `kbone-cli` 도구로 시작해요. 생성 마법사가 어떤 프레임워크를 사용할 것인지 물어봐요. 아래는 Preact 데모예요. 아래 코드에서, `mp`
+명령어로 미니앱을 빌드하고, `web` 명령어로 웹앱을 빌드하고, `build` 명령어로 Production 웹앱을 빌드할 수 있어요.
+
+```bash
+npx kbone-cli init my-app
+cd my-app
+npm run mp
+npm run web
+npm run build
+```
+
+아래 코드로 간단한 카운터 컴포넌트를 만들어서 동일한 형태로 미니앱과 웹앱으로 만들 수 있어요.
+DOM의 구조로 파악할 때, 미니앱의 오버헤드가 상당해요.
+
+```js
+import {h, Component} from 'preact';
+import './index.css';
+
+class Counter extends Component {
+  state = {count: 1};
+
+  sub = () => {
+    this.setState((prevState) => {
+      return {count: --prevState.count};
+    });
+  };
+
+  add = () => {
+    this.setState((prevState) => {
+      return {count: ++prevState.count};
+    });
+  };
+
+  clickHandle = () => {
+    if ('undefined' != typeof wx && wx.getSystemInfoSync) {
+      wx.navigateTo({
+        url: '../log/index?id=1',
+      });
+    } else {
+      location.href = 'log.html';
+    }
+  };
+
+  render({}, {count}) {
+    return (
+      <div>
+        <button onClick={this.sub}>-</button>
+        <span>{count}</span>
+        <button onClick={this.add}>+</button>
+        <div onClick={this.clickHandle}>跳转</div>
+      </div>
+    );
+  }
+}
+
+export default Counter;
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DDreycxzclMP8IiUplyO.png", alt="The Preact kbone template demo app opened in WeChat DevTools. Inspecting the DOM structure shows a significant overhead compared to the web app.", width="800", height="664" %}
+  <figcaption>
+   The Preact kbone template demo app opened in WeChat DevTools. Note the complex DOM structure and how the plus and minus buttons are actually not <code>&lt;button&gt;</code> elements.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rerYiCnwc92DP7pM7WPc.png", alt="The Preact kbone template demo app opened in the web browser. Inspecting the DOM structure shows the to-be-expected markup based on the Preact component code.", width="800", height="496" %}
+  <figcaption>
+   The Preact kbone template demo app opened in the web browser. Note the DOM structure.
+  </figcaption>
+</figure>
+
+## kbone-ui
+
+[kbone-ui](https://wechat-miniprogram.github.io/kbone/docs/ui/intro/) 프로젝트 ([GitHub 오픈소스](https://github.com/wechat-miniprogram/kbone-ui))
+는 Vue.js와 미니앱으로 동시에 개발할 수 있는 UI 프레임워크예요.
+kbone-ui 컴포넌트는 [WeChat의 내장 미니앱 컴포넌트](https://developers.weixin.qq.com/miniprogram/dev/component/)
+([Components](/mini-app-components/) 참고)와 유사해요.
+[데모](https://wechat-miniprogram.github.io/kboneui/ui/#/)를 확인해서 사용할 수 있는 컴포넌트를 확인해보세요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wEA4Hr2JyVfKgdHnpb5o.png", alt="Demo of the kbone-ui framework showing form-related components like radio buttons, switches, inputs, and labels.", width="320", height="438" %}
+  <figcaption>
+   The kbone-ui demo showing form-related components.
+  </figcaption>
+</figure>
+
+## WeUI
+
+[WeUI](https://github.com/Tencent/weui)는 WeChat의 시각적 경험과 동일하게 구성된 기본적인 스타일 라이브러리예요.
+WeChat 공식 팀에서 WeChat의 웹페이지와 미니앱의 경험을 동일하게 만들기 위해 디자인을 다듬었어요.
+`button`, `cell`, `dialog`, `progress`, `toast`, `article`, `actionsheet`, 그리고 `icon` 등의 컴포넌트를 제공해요.
+
+또한 서로 다른 WeUI 버번들이 존재해요.
+
+WXSS로 스타일링되는 WeChat 미니앱을 위한 [weui-wxss](https://github.com/Tencent/weui-wxss/)도 있고
+([스타일링](/mini-app-markup-styling-and-scripting/#-6) 참고),
+
+웹앱을 위한 [weui.js](https://github.com/weui/weui.js/),
+WeChat 리액트 컴포넌트를 위한 [react-weui](https://github.com/weui/react-weui/)도 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/V0xswCD3MJltrxALmy8n.png", alt="Demo of the WeUI framework showing form-related components, namely switches.", width="450", height="395" %}
+  <figcaption>
+    스위치를 보여주는 WeChat 데모 앱
+  </figcaption>
+</figure>
+
+## Omi
+
+[Omi](https://tencent.github.io/omi/)는 크로스 프레임워크를 지향하는 프론트엔드 프레임워크예요.
+([GitHub 오픈소스](https://github.com/Tencent/omi).
+웹 컴포넌트, JSX, 버추얼 돔, 함수형 수타일, 옵저버와 프록시를 하나의 프레임워크로 모아 적은 용량으로 고성능을 내요.
+이 프레임워크의 목표는 개발자들이 하나의 컴포넌트를 Omi, React, Preact,
+Vue.js, Angular 같은 여러 플랫폼에서 사용할 수 있게 하는거예요.
+Omi 컴포넌트를 작성하는 것은 직관적이고 어떤 보일러플레이트도 필요 없어요.
+
+```js
+import {render, WeElement, define} from 'omi';
+
+define(
+  'my-counter',
+  class extends WeElement {
+    data = {
+      count: 1,
+    };
+
+    static css = `
+    span{
+        color: red;
+    }`;
+
+    sub = () => {
+      this.data.count--;
+      this.update();
+    };
+
+    add = () => {
+      this.data.count++;
+      this.update();
+    };
+
+    render() {
+      return (
+        <div>
+          <button onClick={this.sub}>-</button>
+          <span>{this.data.count}</span>
+          <button onClick={this.add}>+</button>
+        </div>
+      );
+    }
+  },
+);
+
+render(<my-counter />, 'body');
+```
+
+## Omiu
+
+[Omiu](https://tencent.github.io/omi/components/docs/)는 Omi에 기반한 크로스 프레임워크 UI 컴포넌트 라이브러리예요.
+([GitHub 오픈소스](https://github.com/Tencent/omi#omiu)). 일반적인 웹 컴포넌트의 커스텀된 엘리먼트들을 생성해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eoNhik827CE4TfaT9ZaV.png", alt="Demo of the Omiu framework showing form-related components, namely switches.", width="800", height="939" %}
+  <figcaption>
+   Omiu 데모 앱의 스위치.
+  </figcaption>
+</figure>
+
+## WePY
+
+[WePY](https://wepyjs.github.io/wepy-docs/)는 미니앱들을 컴포넌트로 분리하여 개발할 수 있는 프레임워크예요.
+선-컴파일(Pre-compilation)을 통해 개발자들은 자신이 선호하는 개발 스타일로 미니앱을 개발할 수 있어요.
+WePY 프레임워크의 구체적인 최적화와 Promise와 비동기 함수들의 도입은 미니앱 개발을 훨씬 쉽고 효율적으로 만들었어요.
+동시에, WePY는 성장하고 있는 프레임워크로, Vue.js를 비롯한 최적화된 프론트엔드 도구에서 디자인 콘셉트 등을 차용했어요.
+
+```html
+<style lang="less">
+  @color: #4d926f;
+  .num {
+    color: @color;
+  }
+</style>
+
+<template>
+  <div class="container">
+    <div class="num" @tap="num++">{% raw %}{{num}}{% endraw %}</div>
+    <custom-component></custom-component>
+    <vendor-component></vendor-component>
+    <div>{% raw %}{{text}}{% endraw %}</div>
+    <input v-model="text" />
+  </div>
+</template>
+
+<config>
+  { usingComponents: { customComponent: '@/components/customComponent',
+  vendorComponent: 'module:vendorComponent' } }
+</config>
+
+<script>
+  import wepy from '@wepy/core';
+
+  wepy.page({
+    data: {
+      num: 0,
+      text: 'Hello World',
+    },
+  });
+</script>
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ooxZuXzVY9aHXmha36vM.png", alt="WePY 'getting started' documentation page showing the first steps to get going.", width="800", height="505" %}
+  <figcaption>
+   WePY "getting started" documentation.
+  </figcaption>
+</figure>
+
+## vConsole
+
+[vConsole](https://github.com/Tencent/vConsole) 프로젝트는 모바일 웹페이지를 위한 가볍고 확장성 있는 프론트엔드 개발자 도구예요.
+디버거와 같은 개발자 도구를 미니앱에 곧바로 주입할 수 있어요.
+[데모](http://wechatfe.github.io/vconsole/demo.html)를 통해 가능성을 확인하세요.
+vConsole은 로그, 시스템, 네트워크, 구성 요소, 그리고 저장소 등의 탭을 제공해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ow6FfaoI7fMCJDN1819t.png", alt="vConsole demo app. The vConsole opens at the bottom and has tabs for logs, system, network, elements, and storage.", width="800", height="505" %}
+  <figcaption>
+  구성 요소 익스플로러를 보여주는 vConsole 데모 앱.
+  </figcaption>
+</figure>
+
+## weweb
+
+[weweb](https://weidian-inc.github.io/hera/#/) 프로젝트([GitHub 오픈소스](https://github.com/wdfe/weweb))는
+"WeChat와 호환 가능하다"는 [Hera](https://weidian-inc.github.io/hera/#/) 미니앱 프레임워크의 프론트엔드 프레임워크예요.
+이를 통해 미니앱의 방식으로 웹앱을 프로그래밍할 수 있어요.
+문서에서 언급된 바에 따르면, 미니앱이 있을 경우 이를 곧바로 브라우저에서 실행할 수 있다고 해요.
+제 실험에 따르면 현재 존재하는 미니앱들에는 안정적으로 동작하지 않았는데, 아마도 프로젝트가 최근의 WeChat 업데이트를 반영하지 않아서 그런 듯 해요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jU9Od9IDqFlmuYzAtirn.png", alt="Documentation of the Hera mini app framework listing the WeChat APIs that it supports like `wx.request`, `wx.uploadFile`, etc.", width="800", height="505" %}
+  <figcaption>
+
+지원되는 WeChat API를 보여주는 Hera 미니앱 프레임워크 문서.
+
+  </figcaption>
+</figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/C7ZpPrFE4geW0dylRpZ2.png", alt="The weweb demo mini app compiled with weweb to run in the browser showing form elements.", width="300", height="429" %}
+  <figcaption>
+    브라우저에서 구동되기 위해 weweb으로 컴파일된 weweb 데모 미니앱의 모습.
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+다음으로 [미니앱처럼 프로그래밍하는 방법](/mini-app-programming-way/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-programming-way/index.md b/src/site/content/ko/mini-apps/mini-app-programming-way/index.md
new file mode 100644
index 00000000000..66718078290
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-programming-way/index.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: 미니앱처럼 프로그래밍하기
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  미니앱처럼 프로그래밍하는 방법을 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 미니앱에서 잘 됐던 것들
+
+이 글에서는 제가 웹프로그래머의 관점에서 미니앱에 대해서 조사하면서 배웠던 점들을 돌아보고,
+미니앱처럼 프로그래밍하는 방법에 대해서 이야기해보려고 해요.
+
+## 컴포넌트
+
+개발자들이 "바퀴를 재창조"하고, 탭과 같은 일반적인 UI 패러다임의 또 다른 구현을 구축하도록 만드는 대신,
+미니 앱은 아코디언, 캐러셀 등 기본 선택 구성 요소를 함께 제공해요. 이 구성 요소는 더 필요할 때 확장할 수 있어요.
+웹에서는, 비슷한 여러가지 옵션들이 있어요. 몇몇 것들은 [미니앱 컴포넌트의 한 챕터](/mini-app-components/#)에 나열해두었어요.
+이상적인 경우에서는 웹 컴포넌트는 서로 자유롭게 섞어서 사용할 수 있도록 제작되었겠죠.
+하지만 현실에서는 대부분의 경우 하나의 컴포넌트를 추가할 때 특정한 락인 효과가 발생하거나, 단일한 컴포넌트를 사용하는 것이 아니라 컴포넌트 라이브러리를 통째로 사용해야하는 문제가 발생해요.
+하지만 작은 규모로 사용할 수 있는 아토믹 컴포넌트 또한 존재해요.
+또는 [generic-components](https://github.com/thepassle/generic-components) 라이브러리 같이 의도적으로 스타일되지 않은 라이브러리도 있어요.
+이들을 적절히 사용하는 것이 좋을 것 같아요.
+
+## 모델-뷰-뷰모델
+
+[모델-뷰-뷰모델](/mini-app-markup-styling-and-scripting/#) (MVVM) 개발 패턴은 마크업 언어를 이용한 GUI(뷰)의 개발과
+백엔드 로직(모델)을 분리시켜요. 그 말은, 뷰가 하나의 모델 플랫폼에 종속되지 않는다는 말을 뜻해요.
+몇몇 [불이익](https://docs.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm)이
+존재하긴 하지만, 전반적으로 미니앱의 복잡도 상에서는 잘 작동해요.
+특히나 Rich Templating Libraries에서 빛을 발해요 ([다음 챕터](/mini-app-example-project/) 참고).
+
+## 페이지 단위 사고
+
+미니앱을 디버깅하면 본질적으로 멀티 페이지 애플리케이션(MPA)임을 알 수 있어요.
+이는 Trivial Routing, 충돌 없는 페이지별 스타일링 등의 장점을 가져요.
+PWA에 [성공적으로 MPA 적용한 사례](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509)도 많고요.
+이렇게 페이지 단위로 사고하는 것은 페이지 단위의 CSS와 JavaScript, 그리고 이미지나 비디오 같은 리소스를 관리하는데 도움이 돼요.
+무엇보다도, 이를 통해 아무것도 하지 않고 페이지 단위 코드스플리팅을 하는 효과를 얻을 수 있어요.
+이 경우, 각 페이지는 동작해야할 시점에만 로딩된다는 것을 뜻해요.
+
+## 빌드 과정
+
+미니앱은 별도의 [빌드 프로세스가 없어요](/mini-app-project-structure-lifecycle-and-bundling/#-4).
+웹에서는, [Snowpack](https://www.snowpack.dev/) 같은 빌드 도구를 이용해 ESM으로 알려진 JavaScript의 내장된 Module System을 이용해
+프로젝트가 거대해져도 중복된 작업을 제거할 수 있어요.
+아직은 [Web Bundles](/web-bundles/)의 초기 단계이지만, 위와 같이 빌드 과정에 손쉽게 추가할 수 있어요.
+
+## 강력한 기능들
+
+웹 플랫폼은 최근 여러 [새로운 기능들](/tags/capabilities/)을 얻었어요.
+[블루투스](/bluetooth/), [USB](/usb/), [HID](/hid/), [시리얼](/serial/),
+그리고 [NFC](/nfc/)를 통한 [기기](/tags/devices/) 접근이 이제 모두 가능해요.
+미니앱들은 [JavaScript bridge](/mini-app-markup-styling-and-scripting/#javascript-api)를 통해서 기능들에 접근했지만,
+웹에서는 이런 기능들에 바로 접근할 수 있어요.
+JavaScript Bridge를 통한 API에 접근하는 것이 아니라, 브라우저 API로 바로 프로그래밍할 수 있어요.
+
+{% Aside 'success' %}
+다음으로 [예시 프로젝트](/mini-app-example-project/)를 통해 이 프로젝트의 실무 적용에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md b/src/site/content/ko/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md
new file mode 100644
index 00000000000..e0715447261
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-project-structure-lifecycle-and-bundling/index.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: 프로젝트 구조, 라이프사이클, 그리고 번들링
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  미니앱의 프로젝트 구조, 라이프사이클,  그리고 번들링에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 미니앱의 프로젝트 구조
+
+이전에 살펴본 마크업 언어, 스타일링 언어, 그리고 컴포넌트처럼 프로젝트 구조들은 슈퍼앱에 따라 조금씩 다를 수 있어요.
+하지만 전체적인 아이디어는 비슷해요. 프로젝트 구조는 다음의 형태를 하고 있어요.
+
+- 루트에서 미니앱을 시작하는 `app.js` 파일.
+- [Web App Manifest](https://developer.mozilla.org/docs/Web/Manifest)와 비슷한 역할을 하는 `app.json` 설정 파일.
+- (선택) 글로벌 스타일을 담당하는 `app.css` 스타일시트 파일.
+- 빌드 정보를 담고 있는 `project.config.json` 파일.
+
+모든 페이지들은 `pages`의 하위 폴더에 개별적으로 저장돼요.
+각각의 페이지들은 하나의 CSS 파일, JS 파일, HTML 파일, 그리고 선택적인 JSON 설정 파일을 가지고 있어요.
+이처럼, 처음에 구동될 `app.json` 파일 하나만 필요하고 나머지 파일들은 동적으로 찾아낼 수 있어요.
+웹 개발자의 관점에서 보자면 미니앱은 멀티 페이지 앱과 유사해요.
+
+```bash
+├── app.js               # Initialization logic
+├── app.json             # Common configuration
+├── app.css              # Common style sheet
+├── project.config.json  # Project configuration
+└── pages                # List of pages
+   ├── index               # Home page
+   │   ├── index.css         # Page style sheet
+   │   ├── index.js          # Page logic
+   │   ├── index.json        # Page configuration
+   │   └── index.html        # Page markup
+   └── other               # Other page
+       ├── other.css         # Page style sheet
+       ├── other.js          # Page logic
+       ├── other.json        # Page configuration
+       └── other.html        # Page markup
+```
+
+## 미니앱 라이프사이클
+
+미니앱은 `App()` 함수를 선언해 반드시 슈퍼앱에 등록되어야 해요.
+위에서 살펴본 프로젝트 구조를 참고하면, 이 과정은 `app.js`에서 일어나요.
+미니앱의 라이프사이클은 `launch`, `show`, `hide`, 그리고 `error` 이렇게 크게 4개의 이벤트로 나타나요.
+이 이벤트의 핸들러들은 `App()` 함수에 Configuration Object 형태로 전달될 수 있어요.
+이 객체에는 모든 페이지에 전역적으로 제공될 `globalData`를 포함할 수 있어요.
+
+```js
+/* app.js */
+App({
+  onLaunch(options) {
+    // Do something when the app is launched initially.
+  },
+  onShow(options) {
+    // Do something when the app is shown.
+  },
+  onHide() {
+    // Do something when the app is hidden.
+  },
+  onError(msg) {
+    console.log(msg);
+  },
+  globalData: 'I am global data',
+});
+```
+
+평소와 같이, 세부 사항은 다르지만, 개념 자체는
+[WeChat](https://developers.weixin.qq.com/miniprogram/en/dev/reference/api/App.html),
+[Alipay](https://opendocs.alipay.com/mini/framework/app-detail),
+[Baidu](https://smartprogram.baidu.com/docs/develop/framework/app_service_register/),
+[ByteDance](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/logic-layer/start-app/),
+그리고
+[Quick App](https://doc.quickapp.cn/tutorial/framework/lifecycle.html#app-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F) 모두 동일해요.
+
+## 페이지 라이프 사이클
+
+앱 라이프 사이클처럼, 페이지 라이프 사이클도 개발자들이 `listen`하고 반응할 수 있는 이벤트들로 구성되어 있어요.
+핵심 이벤트들은 `load`, `show`, `ready`, `hide`, 그리고 `unload`예요.
+어떤 페이지들은 `pulldownrefresh` 같은 추가적인 이벤트들을 제공하기도 해요.
+이런 이벤트 핸들러를 설정하는 것은 각 페이지마다 존재하는 `Page()` 함수를 통해 이루어져요.
+위의 프로젝트 구조에서 `index`와 `other` 페이지의 경우 `index.js` 그리고 `other.js`에서 이 과정이 이루어져요.
+
+```js
+/* index.js */
+Page({
+  data: {
+    text: 'This is page data.',
+  },
+  onLoad: function (options) {
+    // Do something when the page is initially loaded.
+  },
+  onShow: function () {
+    // Do something when the page is shown.
+  },
+  onReady: function () {
+    // Do something when the page is ready.
+  },
+  onHide: function () {
+    // Do something when the page is hidden.
+  },
+  onUnload: function () {
+    // Do something when the page is closed.
+  },
+  onPullDownRefresh: function () {
+    // Do something when the user pulls down to refresh.
+  },
+  onReachBottom: function () {
+    // Do something when the user scrolls to the bottom.
+  },
+  onShareAppMessage: function () {
+    // Do something when the user shares the page.
+  },
+  onPageScroll: function () {
+    // Do something when the user scrolls the page.
+  },
+  onResize: function () {
+    // Do something when the user resizes the page.
+  },
+  onTabItemTap(item) {
+    // Do something when the user taps the page's tab.
+  },
+  customData: {
+    foo: 'bar',
+  },
+});
+```
+
+## 빌드 과정
+
+빌드 과정은 개발자들이 몰라도 되도록 추상화되어 있어요.
+내부적으로는 업계 도구인 [Babel](https://babeljs.io/) 컴파일러를 통해 트랜스파일링 후 압축(Minify)하고, [postcss](https://postcss.org/) CSS 변환기를 통해 앱을 변환해요.
+빌드 경험 자체는 개발자들이 (원한다면) 전혀 몰라도 된다는 점에서, [Next.js](https://nextjs.org/)나 [`create-react-app`](https://reactjs.org/docs/create-a-new-react-app.html)와 비슷해요.
+결과적으로 생성되는 파일들은 디지털 서명되고 암호화되어 하나의 온전한 패키지(혹은 여러 개의 하위 패키지로 구성된 하나의 패키지)로 빌드되어 슈퍼앱 제공자들의 서버로 전송돼요.
+하위 패키지들은 처음부터 모든 패키지를 다운 받지 않아도 되도록 Lazy Loading을 위해서 사용돼요.
+패키지에 대한 자세한 내용은 비공개 상태로 자세한 내용은 찾아볼 수 없지만,
+WeChat의 `wxapkg` 포맷 등 몇몇 포맷은 [리버스 엔지니어링](https://github.com/sjatsh/unwxapkg)되었어요.
+
+{% Aside 'success' %}
+다음으로 [미니앱의 표준화를 위한 노력](/mini-app-standardization/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-standardization/index.md b/src/site/content/ko/mini-apps/mini-app-standardization/index.md
new file mode 100644
index 00000000000..1af9f377792
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-standardization/index.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: 미니앱 표준화
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  미니앱의 표준화를 위한 노력들을 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 미니앱의 인기
+
+미니앱은 엄청난 성장을 하고 있어요. WeChat의 미니앱은 2020년 6월에 [8억 3000만 활성 사용자](https://www.questmobile.com.cn/research/report-new/122)를 달성했어요.
+Alipay 미니앱은 2019년 4월 [4억 100만 활성 사용자](https://kr-asia.com/the-mau-of-wechat-alipay-and-baidus-mini-programs-now-add-up-to-more-than-1-billion)를 달성했고,
+Baidu 미니앱은 같은 달 [1억 1500만 활성 사용자](https://kr-asia.com/the-mau-of-wechat-alipay-and-baidus-mini-programs-now-add-up-to-more-than-1-billion)를 달성했어요.
+본질적으로, 기업체들은 iOS와 Android, 그리고 Web 플랫폼에서 앱을 개발하는 대신 위 3사의 (혹은 더 많은) [슈퍼앱 플랫폼](/mini-app-super-apps/)에서 개발하기를 선택한거예요.
+이 슈퍼앱 플랫폼들은 안드로이드, iOS 그리고 Web만큼 서로 다르지 않지만, 그래도 파편화되어있기는 해요.
+안드로이드, iOS, 그리고 Web을 하나의 소스에서 빌드하는
+
+[Flutter](https://flutter.dev/), [Ionic](https://ionicframework.com/), 그리고
+[React Native](https://reactnative.dev/) ([웹](https://github.com/necolas/react-native-web))
+등의 도전이 인기를 얻었지만, 미니앱의 생태계에서는 [미니앱 생태계 커뮤니티 그룹](https://www.w3.org/community/miniapps/)
+과 Alibaba, Baidu, ByteDance, Huawei, Intel, Xiaomi, China Mobile, Facebook, 그리고 Google 등의 [멤버들](https://www.w3.org/community/miniapps/participants)이 표준을 주도하고 있어요.
+
+## 출판
+
+이 그룹의 대표적인 출판 사항으로는
+[백서](https://w3c.github.io/miniapp/white-paper/), a
+[미니앱, W3C 스펙, 그리고 PWA의 API 차이 비교](https://www.w3.org/TR/mini-app-white-paper/comparison.html),
+그리고 여러 설명서와 세부사항들이 있어요.
+
+- URI 구조: [spec](https://w3c.github.io/miniapp/specs/uri/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/uri/docs/explainer.md)
+- 라이프 사이클: [spec](https://w3c.github.io/miniapp/specs/lifecycle/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/lifecycle/docs/explainer.md)
+- 매니페스트: [spec](https://w3c.github.io/miniapp/specs/manifest/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/manifest/docs/explainer.md)
+- 패키징: [spec](https://w3c.github.io/miniapp/specs/packaging/),
+  [explainer](https://github.com/w3c/miniapp/blob/gh-pages/specs/packaging/docs/explainer.md)
+- [위젯 요구 사항](https://w3c.github.io/miniapp/specs/widget-req/)
+
+W3C 멤버이자 그룹 참여자인 Fuqiao Xue (W3C)는 [미니앱과 웹앱의 비교](https://xfq.github.io/miniapp-comparison/)를 혼자 작성했어요.
+그룹 공식 사항은 아니지만, 읽을 가치가 있어요.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NW2O3YZ3kxJPPeFr4Jw6.png", alt="The header of the MiniApp Standardization White Paper in a browser window.", width="800", height="540" %}
+  <figcaption>
+    미니앱 표준 백서.
+  </figcaption>
+</figure>
+
+## W3C 미니앱 워킹 그룹의 공식 출범
+
+2021년 1월 19일에
+
+[미니앱 워킹 그룹](https://www.w3.org/2021/miniapps/)이 W3C에서 [공식 출범](https://www.w3.org/blog/2021/01/w3c-launches-the-miniapps-working-group/)했어요.
+이 그룹은 철자 "MiniApps"를 사용하여 그 기반 기술과 표준 기술을 구별할 예정이에요.
+그룹의 [헌장](https://www.w3.org/2021/01/miniapps-wg-charter.html)을 읽어봄으로써 앞으로 어떤 일을 하게될 지 감을 잡을 수 있어요.
+그룹 리더들은 이런 노력을 다음과 같이 말했어요.
+
+> Currently, there are many variants of MiniApps developed by different vendors with different APIs.
+> To enhance the interoperability between MiniApp platforms, mainstream MiniApp vendors including
+> Alibaba, Baidu, Huawei, and Xiaomi have been working together in the [W3C Chinese Web Interest Group](https://www.w3.org/2018/chinese-web-ig/index.html)
+> since May 2019 and published a [MiniApp Standardization White Paper](https://www.w3.org/TR/mini-app-white-paper/) in September 2019 as the initial standardization exploration for MiniApp technologies. As more global companies get interested in joining the MiniApp related discussion, the MiniApps Ecosystem Community Group launched during TPAC 2019 so that the global Web community can join the discussion.
+
+> Based on extensive standardization requirements, W3C today announced the formal establishment of the MiniApps Working Group,
+> dedicated to in-depth exploration and coordination of the diverse MiniApp ecosystem with W3C members and the public,
+> and enhancing the interoperability of different MiniApp platforms, thereby maximizing the integration of MiniApps and the Web,
+> reducing technical fragmentation and the learning cost of developers.
+
+"MiniApps와 웹의 결합을 최대화한다" (_"Maximizing the integration of MiniApps and the Web"_)는 내용이 특히 흥미로워요.
+이 그룹의 호기심 많은 멤버로써 앞으로 어떤 여정을 하게 될지 기대돼요.
+
+{% Aside 'success' %}
+다음으로 모바일 기기가 아닌 [대안 미니앱 구동 환경](/mini-app-alternative-runtime-environments/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-super-apps/index.md b/src/site/content/ko/mini-apps/mini-app-super-apps/index.md
new file mode 100644
index 00000000000..d2348c04fb2
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-super-apps/index.md
@@ -0,0 +1,83 @@
+---
+layout: post
+title: 미니앱과 슈퍼앱
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  슈퍼앱의 개념과 주요 슈퍼앱 제공자들에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+## 미니앱의 세계에 오신 것을 환영해요
+
+휴대전화의 애플리케이션을 보면 아마 특정한 목표를 위해 특정한 앱을 가지고 계실거예요.
+아마 은행 앱도 있고, 대중교통 앱도 있고, 길찾기 앱도 있으실거예요.
+이 글은 미니 프로그램, 혹은 애플릿이라고 불리는 특별한 형태의 앱인 미니앱에 대해서 소개할거예요.
+먼저 다양한 미니앱 플랫폼의 배경과 개발자 경험, 그리고 웹이 미니앱에서 무엇을 배울 수 있는지에 대해서 알아볼거예요.
+미니앱에 대해서 배우기 전에 먼저 슈퍼앱에 대해서 알아봐요.
+
+## 슈퍼앱은 무엇인가요?
+
+슈퍼앱은 **미니앱**이라고 불리는 다른 앱들을 구동할 수 있어요.
+유명한 슈퍼앱들에는 Tencent의 [WeChat](https://weixin.qq.com/), Ant Group(중국 Alibaba의 자회사)의 [Alipay](https://www.alipay.com/), 검색 엔진 [Baidu](https://baidu.com/)의 앱,
+ByteDance의 [Douyin](https://www.douyin.com/) (TikTok)이 있어요.
+첫 3개의 회사는 주로 **B**(aidu) **A**(libaba) **T**(encent) 에서 따와 BAT라고 불려요.
+슈퍼앱들은 중국 시장을 매섭게 장악했고, 그 때문에 이 앱의 여러 예시들은 중국의 예시예요.
+
+<figure>
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/UKmUgG231MtQ2nEo1P0K.PNG", alt="List of recently launched mini apps in the WeChat super app.", width=300, height=649 %}
+  <figcaption>WeChat 슈퍼앱이 최근에 실행된 미니앱을 보여주는 모습</figcaption>
+</figure>
+
+### 슈퍼앱 플랫폼에 대하여
+
+WeChat은 자신의 서비스를 사용자들이 살아가는 데 있어 필요한 모든 제품이 판매하는 만물상을 목표로 해요.
+Alipay는 자신의 플랫폼을 신용, 대금, 보험, 할부, 생활 서비스 등의 금융 시스템 위에 건설하고 있어요.
+Baidu는 자신의 검색 엔진을 미니앱들에 information-as-a-service로 제공하여 여행, 쇼핑, 광고, 결제 등으로 사람, 서비스, 그리고 정보를 결합하고 있어요.
+Douyin 또한 자신의 소셜커머스 플랫폼을 엔터테인먼트와 쇼핑 플랫폼으로 확장하고 있어요.
+
+### 슈퍼앱의 설치
+
+슈퍼앱은 여러 운영 체제에서 제공돼요.
+물론 공식 앱스토어에서 제공되는 여러 버전의 슈퍼앱들은 지역에 따라 일부 기능이 비활성화되어 있을 수도 있어요.
+아래 링크들은 세상 어디에서나 작동하지만, 신뢰할 수 없는 출처와 통신하게 될 수도 있어요.
+이에 대한 위험 부담을 확인하고 **본인의 책임 하에** 아래 앱들을 설치하세요.
+대부분 전화번호를 통해 계정을 생성해야하기에 일회용 전화번호를 사용하는 것도 고려해보세요.
+많은 슈퍼앱들은 외국인들에겐 **해외 계정**만 생성할 수 있도록 하기에, 국내 계정의 몇몇 기능들을 사용하지 못할 수도 있어요.
+
+- **WeChat:** [iOS](https://apps.apple.com/us/app/wechat/id414478124),
+  [Android](https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&t=weixin_download_method&sys=android&loc=weixin,android,web,0),
+  [macOS](https://mac.weixin.qq.com/), [Windows](https://pc.weixin.qq.com/)
+- **Baidu:** [iOS](https://apps.apple.com/us/app/%E7%99%BE%E5%BA%A6/id382201985),
+  [Android](https://play.google.com/store/apps/details?id=com.baidu.searchbox&hl=en)
+- **Alipay:** [iOS](https://itunes.apple.com/app/id333206289?mt=8),
+  [Android](https://t.alipayobjects.com/L1/71/100/and/alipay_wap_main.apk)
+- **Douyin:**
+  [iOS](https://itunes.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1&mt=8)
+  (CN-only), [Android](http://s.toutiao.com/UsMYE/)
+
+{% Aside %}
+이 앱들은 대부분 중국어로만 제공되니, 중국어를 하지 못한다면 다른 휴대전화로 [Google 번역 앱](https://translate.google.com/intl/en/about/#!#speak-with-the-world)의 카메라 모드를 사용해보세요.
+{% endAside %}
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSLjHjkFgscBC2j2d6j9.png", alt="A secondary phone running Google Translate in camera mode live-translating the user interface of a Chinese mini app running on the primary phone.", width="300", height="520" %}
+  <figcaption>
+    Google 번역 앱을 통해 중국 미니앱을 실시간 번역하는 모습.
+  </figcaption>
+</figure>
+
+{% Aside 'success' %}
+다음으로 [미니앱에 대해](/mini-app-about/) 더 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/mini-apps/mini-app-what-are-h5-and-quickapp/index.md b/src/site/content/ko/mini-apps/mini-app-what-are-h5-and-quickapp/index.md
new file mode 100644
index 00000000000..ddc0f733a6b
--- /dev/null
+++ b/src/site/content/ko/mini-apps/mini-app-what-are-h5-and-quickapp/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: H5와 QuickApp은 무엇인가요?
+authors:
+  - thomassteiner
+date: 2021-03-03
+# updated: 2021-03-03
+description: |
+  미니앱과는 다른 H5 앱과 QuickApp에 대해서 알아봐요.
+tags:
+  - mini-apps
+---
+
+{% Aside %}
+이 포스트는 글타래의 일부이며, 이전 글들에서 언급한 내용 위에 새로운 내용을 다루는 글이에요.
+만약 이 페이지에 막 이르렀다면, [처음](/mini-app-super-apps/)부터 읽어보는 것을 추천해요.
+{% endAside %}
+
+## 미니앱이 아닌 것들
+
+미니앱에 대한 개발자 경험에 대해 더 이야기하기 전에, 미니앱이 아닌 2가지 기술에 대해서 이야기할게요.
+바로 H5 앱과 QuickApp이에요.
+
+## H5
+
+H5 앱은, 또는 H5 페이지는, 미니앱의 전신이에요.
+주로 H5는 채팅으로 쉽게 공유할 수 있는 잘 디자인된 웹앱이나 웹페이지를 의미해요.
+H5는 반응형 디자인과 빠른 CSS 애니메이션, 멀티미디어 콘텐츠 등의 HTML5와 그 관련 기술을 의미해요.
+중국어 위키피디아는 아예 H5를 HTML5로 [리다이렉트](https://zh.wikipedia.org/wiki/H5)해요.
+H5의 대표적 예시는 WeChat의 [H5 boilerplate](https://panteng.github.io/wechat-h5-boilerplate/) 데모가 있어요.
+
+## QuickApp
+
+[QuickApp](https://www.quickapp.cn/)은 다음 회원사들이 가입되어 있는 업계 연합이에요.
+
+- [vivo open platform](https://dev.vivo.com.cn/)
+- [Huawei Developer Alliance](http://developer.huawei.com/cn/consumer)
+- [OPPO open platform](https://open.oppomobile.com/)
+- [Xiaomi Open Platform](https://dev.mi.com/console/app/newapp.html)
+- [Lenovo Open Platform](http://open.lenovo.com/developer/)
+- [Gionee Open Platform](http://devquickapp.gionee.com/)
+- [Meizu Open Platform](http://open.flyme.cn/)
+- [ZTE Developer Platform](https://dev.ztems.com/)
+- [Nubian Open Platform](http://developer.nubia.com/developer/view/index.html)
+- [OnePlus Open Platform](http://www.oneplus.cn/)
+- [Hisense Open Platform](http://dev.hismarttv.com/)
+- [China Mobile Terminal Corporation](https://www.chinamobileltd.com/tc/global/home.php)
+
+QuickApp의 기반 기술은 일반적인 미니앱과 비슷하지만 ([구성 요소와 호환성](/mini-app-about/#-2) 참고) 발견 방법은 달라요.
+QuickApp은 스토어에 등재되고 회원사의 어떤 기기들에는 선탑재되며 딥링크를 통해 공유할 수 있는 서비스들이에요. ([Quick App showcase](https://www.quickapp.cn/quickAppShow) 참고)
+QuickApp은 슈퍼앱 안에서 구동되는 것이 아니고, 기기와 강하게 연동된 하나의 온전한 애플리케이션으로 동작해요.
+운영 체제에서 제공되는 JavaScript 브릿지를 통해서 전체화면 애플리케이션으로 렌더링되는거예요.
+
+{% Aside 'success' %}
+다음으로 [미니앱의 개발자 경험](/mini-app-devtools/)에 대해서 알아봐요.
+{% endAside %}
+
+## 감사의 말
+
+이 글은 [Joe Medley](https://github.com/jpmedley),
+[Kayce Basques](https://github.com/kaycebasques),
+[Milica Mihajlija](https://github.com/mihajlija),
+[Alan Kent](https://github.com/alankent),
+그리고 Keith Gu에 의해 리뷰되었어요.
diff --git a/src/site/content/ko/offline.md b/src/site/content/ko/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/ko/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/ko/payments/android-payment-apps-developers-guide/index.md b/src/site/content/ko/payments/android-payment-apps-developers-guide/index.md
new file mode 100644
index 00000000000..d471529179b
--- /dev/null
+++ b/src/site/content/ko/payments/android-payment-apps-developers-guide/index.md
@@ -0,0 +1,409 @@
+---
+layout: post
+title: Android 결제 앱 개발자 가이드
+subhead: 웹 결제가 가능하도록 Android 결제 앱을 변경하여 고객에게 더 나은 사용자 경험을 제공하는 방법을 알아보세요.
+authors:
+  - yaraki
+  - agektmr
+date: 2020-05-25
+description: 웹 결제가 가능하도록 Android 결제 앱을 변경하여 고객에게 더 나은 사용자 경험을 제공하는 방법을 알아보세요.
+tags:
+  - blog
+  - payments
+feedback:
+  - api
+---
+
+[지불 요청 API](https://www.w3.org/TR/payment-request/)는 사용자가 그 어느 때보다 쉽게 필요한 지불 정보를 입력할 수 있도록 하는 내장 브라우저 기반 인터페이스를 웹에 제공합니다. API는 플랫폼 종속 결제 앱을 호출할 수도 있습니다.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>웹 결제를 사용하는 플랫폼 종속 구글 페이 앱의 결제 흐름.</figcaption></figure>
+
+Android 인텐트만 사용할 때와 비교해, 웹 결제 사용 시 사용 브라우저, 보안 및 사용자 경험을 더 잘 통합할 수 있습니다.
+
+- 결제 앱은 판매자 웹사이트 환경에서 모달로 출시되었습니다.
+- API의 구현은 기존 결제 앱을 보완하여 사용자 기반을 활용할 수 있게 해줍니다.
+- [사이드로딩](https://en.wikipedia.org/wiki/Sideloading)을 방지하기 위해 결제 앱의 서명이 확인됩니다.
+- 결제 앱은 다양한 결제 방식을 지원할 수 있습니다.
+- 암호화폐, 은행 송금 등 모든 결제 수단을 통합할 수 있습니다. Android 기기의 결제 앱은 기기의 하드웨어 칩에 액세스해야 하는 방법을 통합할 수도 있습니다.
+
+{% Aside %} 판매자가 결제 앱과 통합하는 방식을 이해하려면 [지불 거래의 수명](/life-of-a-payment-transaction/)을 확인하세요. {% endAside%}
+
+Android 결제 앱에서 웹 결제를 구현하려면 4단계를 거쳐야 합니다.
+
+1. 판매자가 귀하의 결제 앱을 찾도록 만듭니다.
+2. 고객에게 결제할 준비가 된 등록된 수단(예: 신용 카드)이 있는지 판매자에게 알립니다.
+3. 고객이 결제하도록 합니다.
+4. 발신자의 서명 인증서를 확인합니다.
+
+웹 결제가 실행되는 모습을 보려면 [안드로이드-웹-결제](https://github.com/GoogleChromeLabs/android-web-payment/) 데모를 확인하세요.
+
+## 1단계: 판매자가 결제 앱을 찾도록 만들기
+
+판매자가 결제 앱을 사용하려면 [결제 요청 API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API)를 사용해야 하며, [결제 수단 식별자](https://www.w3.org/TR/payment-method-id/)를 사용하여 지원하는 결제 수단을 지정해야 합니다.
+
+결제 앱에 고유한 결제 방법 식별자가 있는 경우 브라우저에서 앱을 검색할 수 있도록 자체적인 [결제 방식 매니페스트](https://w3c.github.io/payment-method-manifest/)를 설정할 수 있습니다.
+
+{% Aside %} 검색 과정이 어떻게 작동하는지를 자세히 알고 새 결제 방식을 어떻게 설정하는지를 알려면 [결제 방식 설정하기](/setting-up-a-payment-method)를 확인해 보세요. {% endAside %}
+
+## 2단계: 고객에게 결제할 준비가 된 등록된 수단이 있는지 판매자에게 알리기
+
+판매자는 `hasEnrolledInstrument()`를 호출하여 [고객의 결제 가능 여부를 쿼리](/life-of-a-payment-transaction#ready-to-pay)할 수 있습니다. 이 쿼리에 답하기 위해 Android 서비스로 `IS_READY_TO_PAY`를 구현할 수 있습니다.
+
+### `AndroidManifest.xml`
+
+`org.chromium.intent.action.IS_READY_TO_PAY` 액션으로 인텐트 필터를 사용하여 서비스를 선언합니다.
+
+```xml
+<service
+  android:name=".SampleIsReadyToPayService"
+  android:exported="true">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" />
+  </intent-filter>
+</service>
+```
+
+`IS_READY_TO_PAY` 서비스는 선택 사항입니다. 결제 앱에 이러한 인텐트 핸들러가 없으면 웹 브라우저는 앱이 항상 결제할 수 있다고 가정합니다.
+
+### AIDL
+
+`IS_READY_TO_PAY` 서비스를 위한 API는 AIDL에 정의되어 있습니다. 다음 내용으로 두 개의 AIDL 파일을 생성하십시오.
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayServiceCallback.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+interface IsReadyToPayServiceCallback {
+    oneway void handleIsReadyToPay(boolean isReadyToPay);
+}
+```
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayService.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+import org.chromium.IsReadyToPayServiceCallback;
+
+interface IsReadyToPayService {
+    oneway void isReadyToPay(IsReadyToPayServiceCallback callback);
+}
+```
+
+### `IsReadyToPayService` 구현하기
+
+`IsReadyToPayService` 의 가장 간단한 구현은 다음 예시에 나타나 있습니다.
+
+```kotlin
+class SampleIsReadyToPayService : Service() {
+  private val binder = object : IsReadyToPayService.Stub() {
+    override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+      callback?.handleIsReadyToPay(true)
+    }
+  }
+
+  override fun onBind(intent: Intent?): IBinder? {
+    return binder
+  }
+}
+```
+
+### 매개변수
+
+다음 매개변수를 인텐트 엑스트라로 `onBind`에 전달:
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+
+```kotlin
+override fun onBind(intent: Intent?): IBinder? {
+  val extras: Bundle? = intent?.extras
+  // …
+}
+```
+
+#### `methodNames`
+
+쿼리 중인 메서드의 이름. 그 요소는 `methodData` 사전의 키이며 결제 앱이 지원하는 방식을 나타냅니다.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+`methodNames`의 각 항목에서 [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying)로 매핑.
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### `topLevelOrigin`
+
+체계 없는 판매자의 출처(최상위 브라우징 컨텍스트의 체계 없는 출처). 예를 들어 `https://mystore.com/checkout`은 `mystore.com`으로 전달됩니다.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+판매자의 인증서 체인(최상위 검색 컨텍스트의 인증서 체인). SSL 인증서 없이 안전한 컨텍스트인 로컬 호스트와 디스크에 있는 파일의 경우 null. 인증서 체인이 필요한 이유는 결제 앱이 웹사이트마다 다른 신뢰 요건을 가지고 있을 수 있기 때문입니다.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+```
+
+각 `Parcelable`은 `"certificate"` 키와 바이트 배열 값이 있는 `Bundle`입니다.
+
+```kotlin
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+JavaScript의 `new PaymentRequest(methodData, details, options)` 생성자를 호출한 iframe 브라우징 컨텍스트의 체계 없는 출처. 만일 해당 생성자가 최상위 컨텍스트에서 호출되었다면, 이 매개 변수의 값은 `topLevelOrigin` 매개 변수의 값과 동일합니다.
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+### 응답
+
+서비스는 `handleIsReadyToPay(Boolean)` 메서드를 통해 응답을 보낼 수 있습니다.
+
+```kotlin
+callback?.handleIsReadyToPay(true)
+```
+
+### 승인
+
+`Binder.getCallingUid()`를 사용하여 호출자가 누구인지 확인할 수 있습니다. `onBind` 메서드가 아니라 `isReadyToPay` 메서드에서 이 작업을 수행해야 한다는 점에 유의하십시오.
+
+```kotlin
+override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+  try {
+    val callingPackage = packageManager.getNameForUid(Binder.getCallingUid())
+    // …
+```
+
+호출 패키지에 올바른 서명이 있는지 확인하는 방법에 대해서는 [호출자의 서명 인증서 확인](#heading=h.czr8ye23zg2e)을 참조하십시오.
+
+## 3단계: 고객이 결제하도록 하기
+
+판매자는 `show()`를 호출하여 고객이 결제할 수 있도록 [결제 앱을 시작](/life-of-a-payment-transaction#launch)합니다. 결제 앱은 인텐트 매개 변수에 있는 거래 정보와 함께 Android 인텐트 `PAY`를 통해 호출됩니다.
+
+결제 앱은 결제 앱에 종속되어 있고 브라우저에 노출되지 않는 `methodName` 및 `details`로 응답합니다. 브라우저는 `details` 문자열을 JSON 역직렬화를 통해 판매자의 JavaScript 개체로 변환하지만, 그 이상의 유효성은 적용하지 않습니다. 브라우저는 `details` 수정하지 않으며 해당 매개변수의 값은 판매자에게 직접 전달됩니다.
+
+### `AndroidManifest.xml`
+
+`PAY` 인텐트 필터가 있는 액티비티에는 [앱 용 디폴트 결제 방식 식별기를 확인](/setting-up-a-payment-method)하는 `<meta-data>` 태그가 있습니다.
+
+다양한 지불 방식을 지원하려면 `<string-array>` 리소스와 함께 `<meta-data>` 태그를 추가하십시오.
+
+```xml
+<activity
+  android:name=".PaymentActivity"
+  android:theme="@style/Theme.SamplePay.Dialog">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.PAY" />
+  </intent-filter>
+
+  <meta-data
+    android:name="org.chromium.default_payment_method_name"
+    android:value="https://bobpay.xyz/pay" />
+  <meta-data
+    android:name="org.chromium.payment_method_names"
+    android:resource="@array/method_names" />
+</activity>
+```
+
+`resource`는 문자열 목록이어야 하며, 각 문자열은 여기에 표시된 것처럼 HTTPS 체계를 사용하는 유효하고 완전한 URL이어야 합니다.
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string-array name="method_names">
+        <item>https://alicepay.com/put/optional/path/here</item>
+        <item>https://charliepay.com/put/optional/path/here</item>
+    </string-array>
+</resources>
+```
+
+### 매개 변수
+
+다음 매개 변수는 인텐트 엑스트라로 액티비티에 전달됩니다.
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+- `total`
+- `modifiers`
+- `paymentRequestId`
+
+```kotlin
+val extras: Bundle? = intent?.extras
+```
+
+#### 메서드 이름
+
+사용 중인 메서드의 이름. 그 요소는 `methodData` 사전의 키입니다. 결제 앱이 지원하는 메서드입니다.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+각 `methodNames`에서 [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying)로 매핑.
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### 판매자 이름
+
+판매자 결제 페이지의 `<title>` HTML 태그의 내용(브라우저의 최상위 브라우징 컨텍스트).
+
+```kotlin
+val merchantName: String? = extras.getString("merchantName")
+```
+
+#### `topLevelOrigin`
+
+체계가 없는 판매자의 출처(최상위 브라우징 컨텍스트의 체계 없는 출처). 예를 들어 `https://mystore.com/checkout`은 `mystore.com`으로 전달됩니다.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+판매자의 인증서 체인(최상위 검색 컨텍스트의 인증서 체인). SSL 인증서가 없는 보안 컨텍스트인 localhost 및 디스크의 파일의 경우 Null. 각 `Parcelable`은  `certificate` 키와 바이트 배열 값을 가진 Bundle입니다.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+JavaScript에서 `new PaymentRequest(methodData, details, options)` 생성자를 호출한 iframe 브라우징 컨텍스트의 체계 없는 출처입니다. 생성자가 최상위 컨텍스트에서 호출된 경우 이 매개변수의 값은 `topLevelOrigin` 매개변수의 값과 같습니다.
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+#### `total`
+
+총 거래 금액을 나타내는 JSON 문자열.
+
+```kotlin
+val total: String? = extras.getString("total")
+```
+
+다음은 문자열 내용의 예시입니다.
+
+```kotlin
+{"currency":"USD","value":"25.00"}
+```
+
+#### `modifiers`
+
+`JSON.stringify(details.modifiers)`의 출력, 여기서 `details.modifiers`에는 오직 `supportedMethods` 및 `total`만 포함됩니다.
+
+#### `paymentRequestId`
+
+'푸시 결제' 앱이 거래 상태와 연계되는 `PaymentRequest.id` 필드. 판매자 웹사이트는 대역 외 거래 상태를 위해 이 필드를 사용하여 '푸시 지불' 앱을 쿼리합니다.
+
+```kotlin
+val paymentRequestId: String? = extras.getString("paymentRequestId")
+```
+
+### 응답
+
+이 액티비티는 `RESULT_OK`와 함께 `setResult`를 통해 응답을 다시 보낼 수 있습니다.
+
+```kotlin
+setResult(Activity.RESULT_OK, Intent().apply {
+  putExtra("methodName", "https://bobpay.xyz/pay")
+  putExtra("details", "{\"token\": \"put-some-data-here\"}")
+})
+finish()
+```
+
+인텐트 엑스트라로 두 개의 매개변수를 지정해야 합니다.
+
+- `methodName` : 사용 중인 메서드의 이름.
+- `details` : 판매자가 거래를 완료하는 데 필요한 정보가 포함된 JSON 문자열. 성공이 `true`라면, `JSON.parse(details)`가 성공하는 방식으로 `details`를 구성해야 합니다.
+
+사용자가 결제 앱에서 계정에 대한 올바른 PIN 코드를 입력하지 못한 경우처럼 결제 앱에서 거래가 완료되지 않은 경우, `RESULT_CANCELED`를 전달할 수 있습니다. 브라우저는 사용자에게 다른 결제 앱을 고르도록 할 것입니다.
+
+```kotlin
+setResult(RESULT_CANCELED)
+finish()
+```
+
+호출된 결제 앱에서 수신된 결제 응답의 액티비티 결과가 `RESULT_OK`로 설정된 경우, Chrome은 비어 있지 않은 `methodName` 및 `details`를 엑스트라에서 확인합니다. 유효성 검사가 실패하면 Chrome은 `request.show()`에서 개발자에게 출력되는 다음 오류 메시지 중 하나와 함께 거부된 프로미스를 반환합니다.
+
+```js
+'Payment app returned invalid response. Missing field "details".'
+'Payment app returned invalid response. Missing field "methodName".'
+```
+
+### 승인
+
+이 액티비티는 `getCallingPackage()` 메서드를 사용하여 호출자를 확인할 수 있습니다.
+
+```kotlin
+val caller: String? = callingPackage
+```
+
+마지막 단계는 호출자의 서명 인증서를 확인하여 호출 패키지에 올바른 서명이 있는지 확인하는 것입니다.
+
+## 4단계: 호출자의 서명 인증서 확인하기
+
+`IS_READY_TO_PAY`의  `Binder.getCallingUid()`와 `PAY`의 `Activity.getCallingPackage()`로 호출자의 패키지 이름을 확인할 수 있습니다. 호출자가 생각하는 그 브라우저가 맞는지 실제로 확인하려면 브라우저의 서명 인증서를 확인하고 올바른 값과 일치하는지 확인해야 합니다.
+
+API level 28 이상을 대상으로 하고 단일 서명 인증서가 있는 브라우저와 통합하는 경우 `PackageManager.hasSigningCertificate()`을 사용할 수 있습니다.
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificate: ByteArray = … // The correct signing certificate.
+val verified = packageManager.hasSigningCertificate(
+  callingPackage,
+  certificate,
+  PackageManager.CERT_INPUT_SHA256
+)
+```
+
+`PackageManager.hasSigningCertificate()`는 인증서 로테이션을 올바르게 처리하기 때문에 단일 인증서 브라우저에 선호됩니다. (Chrome에는 단일 서명 인증서가 있습니다.) 여러 서명 인증서가 있는 앱은 인증서를 로테이션할 수 없습니다.
+
+API level 27 이하를 지원해야 하거나 여러 서명 인증서가 있는 브라우저를 처리해야 한다면, `PackageManager.GET_SIGNATURES`를 사용할 수 있습니다.
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificates: Set<ByteArray> = … // The correct set of signing certificates
+
+val packageInfo = getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
+val sha256 = MessageDigest.getInstance("SHA-256")
+val signatures = packageInfo.signatures.map { sha256.digest(it.toByteArray()) }
+val verified = signatures.size == certificates.size &&
+    signatures.all { s -> certificates.any { it.contentEquals(s) } }
+```
diff --git a/src/site/content/ko/payments/index.md b/src/site/content/ko/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/ko/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/ko/progressive-web-apps/app-like-pwas/index.md b/src/site/content/ko/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..f1693e15891
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,405 @@
+---
+layout: post
+title: PWA를 앱처럼 느껴지도록 만드십시오.
+subhead: 귀하의 프로그레시브 웹 앱을 웹사이트가 아닌 "실제" 앱처럼 제작해 보십시오.
+authors:
+  - thomassteiner
+description: |2-
+
+  웹 기술로 플랫폼별 앱 패턴을 구현하는 방법을 이해하여 Progressive Web App을 "실제" 앱처럼 느껴지게 만드는 방법을 배우십시오.
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+Progressive Web App 버즈워드 빙고를 플레이할 때 "PWA는 웹사이트일 뿐입니다"로 설정하는 것이 안전합니다. Microsoft의 PWA 문서는 [동의하고](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), 우리는 바로 이 사이트에서 [말하고](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites) 있으며, 심지어 PWA 후보인 Frances Berriman과 Alex Russell도 [그렇게 씁니다](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites). PWA는 단순한 웹사이트 그 이상을 의미합니다. 제대로 수행되면 PWA는 웹사이트가 아니라 "실제" 앱처럼 느껴질 것입니다. 그렇다면 실제 앱처럼 느껴진다는 것은 무엇을 의미할까요?
+
+이 질문에 답하기 위해 Apple [Podcasts](https://support.apple.com/en-us/HT201859) 앱을 예로 들어 보겠습니다. 데스크톱의 macOS와 모바일의 iOS(각각 iPadOS)에서 사용할 수 있습니다. Podcasts는 미디어 응용 프로그램이지만 도움말과 함께 설명하는 핵심 아이디어는 다른 범주의 응용 프로그램에도 적용됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="iPhone과 MacBook이 나란히 Podcast 응용 프로그램을 실행하고 있습니다.", width="800", height="617" %}<figcaption> iPhone 및 macOS의 Apple 팟캐스트( <a href="https://support.apple.com/en-us/HT201859">출처</a> ).</figcaption></figure>
+
+{% Aside 'caution' %} 아래 나열된 각 iOS/Android/데스크톱 앱 기능에는 **웹 구성요소에서 이 작업을 수행하는 방법**이 있으며 열면 자세한 내용을 볼 수 있습니다. 다양한 운영 체제의 모든 브라우저가 나열된 API 또는 기능을 모두 지원하는 것은 아닙니다. 링크된 문서에서 호환성 정보를 주의 깊게 검토하십시오. {% endAside %}
+
+## 오프라인 실행 가능
+
+한 걸음 물러서서 휴대 전화나 데스크톱 컴퓨터에 있을 수 있는 플랫폼별 응용 프로그램을 생각해 보면 한 가지 분명한 사실이 있습니다. 팟캐스트 앱에는 사용자가 오프라인일 때도 항상 무언가가 있습니다. 네트워크 연결이 없을 때 앱은 자연스럽게 계속 열립니다. **상위 차트** 섹션에는 콘텐츠가 표시되지 않지만 대신 **다시 시도** 버튼과 연결된 **지금 연결할 수 없음** 메시지로 돌아갑니다. 가장 환영할 만한 경험은 아닐지 모르지만 뭔가를 얻었습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="팟캐스트 앱에 '지금 연결할 수 없습니다.'가 표시됩니다. 네트워크 연결을 사용할 수 없는 경우 정보 메시지입니다.", width="800", height="440" %}<figcaption> 네트워크 연결이 없는 팟캐스트 앱.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 팟캐스트 앱은 소위 앱 셸 모델을 따릅니다. 왼쪽 메뉴 아이콘 및 핵심 플레이어 UI 아이콘과 같은 장식 이미지를 포함하여 핵심 앱을 표시하는 데 필요한 모든 정적 콘텐츠는 로컬로 캐시됩니다. <b>상위 차트</b> 데이터와 같은 동적 콘텐츠는 요청 시에만 로드되며, 로드에 실패할 경우 로컬에 캐시된 대체 콘텐츠를 사용할 수 있습니다. <a href="https://developers.google.com/web/fundamentals/architecture/app-shell">앱 셸 모델</a> 문서를 읽고 이 아키텍처 모델을 웹 앱에 적용하는 방법을 알아보세요. {% endDetails %}
+
+## 오프라인 콘텐츠 사용 가능 및 미디어 재생 가능
+
+오프라인 상태에서도 왼쪽 서랍을 통해 **다운로드됨** 섹션으로 이동하여 다운로드한 팟캐스트 에피소드를 즐길 수 있습니다. 이 에피소드는 재생 준비가 되어 있고 삽화 및 설명과 같은 모든 메타데이터와 함께 표시됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="재생 중인 팟캐스트의 다운로드 에피소드가 있는 팟캐스트 앱.", width="800", height="440" %}<figcaption> 다운로드한 팟캐스트 에피소드는 네트워크 없이도 재생할 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 이전에 다운로드한 미디어 콘텐츠는 예를 들어 <a href="https://developer.chrome.com/docs/workbox/">Workbox</a> 라이브러리에서 <a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">캐시된 오디오 및 비디오 제공</a> 레시피를 사용하여 캐시에서 제공할 수 있습니다. 다른 콘텐츠는 항상 캐시나 IndexedDB에 저장할 수 있습니다. 모든 세부 정보와 언제 어떤 스토리지 기술을 사용해야 하는지 알아보려면 <a href="/storage-for-the-web/">웹용 스토리지</a> 기사를 읽으십시오. 사용 가능한 메모리 양이 줄어들 때 제거될 위험 없이 지속적으로 저장해야 하는 데이터가 있는 경우 <a href="/persistent-storage/">Persistent Storage API</a>를 사용할 수 있습니다. {% endDetails %}
+
+## 사전 백그라운드 다운로드
+
+`http 203`과 같은 쿼리로 콘텐츠를 검색할 수 있으며 검색 결과인 [HTTP 203 팟캐스트](/podcasts/)를 구독하기로 결정하면 시리즈의 최신 에피소드가 질문 없이 즉시 다운로드됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="구독 직후 팟캐스트의 최신 에피소드를 다운로드하는 팟캐스트 앱입니다.", width="800", height="658" %}<figcaption> 팟캐스트를 구독하면 최신 에피소드가 즉시 다운로드됩니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 팟캐스트 에피소드를 다운로드하는 작업은 시간이 더 오래 걸릴 수 있습니다. <a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a>를 사용하면 백그라운드에서 처리하는 브라우저에 다운로드를 위임할 수 있습니다. Android에서는 브라우저가 이러한 다운로드를 운영 체제에 더 위임할 수도 있으므로 브라우저를 계속 실행할 필요가 없습니다. 다운로드가 완료되면 앱의 서비스 워커가 깨어나고 응답으로 무엇을 할지 결정할 수 있습니다. {% endDetails %}
+
+## 다른 응용 프로그램과 공유 및 상호 작용
+
+팟캐스트 앱은 다른 애플리케이션과 자연스럽게 통합됩니다. 예를 들어 내가 좋아하는 에피소드를 마우스 오른쪽 버튼으로 클릭하면 메시지 앱과 같은 내 기기의 다른 앱과 공유할 수 있습니다. 또한 자연스럽게 시스템 클립보드와 통합됩니다. 에피소드를 마우스 오른쪽 버튼으로 클릭하고 링크를 복사할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="'에피소드 공유 &gt; 메시지' 옵션이 선택된 팟캐스트 에피소드에서 팟캐스트 앱의 컨텍스트 메뉴가 호출되었습니다.", width="800", height="392" %}<figcaption> 메시지 앱에 팟캐스트 에피소드 공유하기.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/web-share/">Web Share API</a>와 <a href="/web-share-target/">Web Share Target API</a>를 사용하면 앱이 기기의 다른 애플리케이션과 텍스트, 파일 및 링크를 공유하고 받을 수 있습니다. 웹 앱이 운영 체제의 기본 제공 오른쪽 클릭 메뉴에 메뉴 항목을 추가하는 것은 아직 가능하지 않지만 장치의 다른 앱과 연결하거나 연결하는 다른 방법이 많이 있습니다. <a href="/image-support-for-async-clipboard/">Async Clipboard API</a>를 사용하면 프로그래밍 방식으로 시스템 클립보드에서 텍스트 및 이미지 데이터(PNG 이미지)를 읽고 쓸 수 있습니다. Android에서는 <a href="/contact-picker/">Contact Picker API</a>를 사용하여 기기의 연락처 관리자에서 항목을 선택할 수 있습니다. 플랫폼별 앱과 PWA를 모두 제공하는 경우 <a href="/get-installed-related-apps/">Get Installed Related Apps API</a>를 사용하여 플랫폼별 앱이 설치되어 있는지 확인할 수 있습니다. 설치된 경우, 사용자가 PWA를 설치하도록 권장하거나 웹 푸시 알림을 수락할 필요가 없습니다. {% endDetails %}
+
+## 백그라운드 앱 새로고침
+
+팟캐스트 앱 설정에서 새 에피소드를 자동으로 다운로드하도록 앱을 구성할 수 있습니다. 그런 식으로 생각하지 않아도 업데이트된 콘텐츠는 항상 거기에 있습니다. 아주 멋진 기능입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="'팟캐스트 새로 고침' 옵션이 '매시간'으로 설정된 '일반' 섹션의 팟캐스트 앱 설정 메뉴입니다.", width="800", height="465" %}<figcaption>매시간 새로운 팟캐스트 에피소드를 확인하도록 구성된 팟캐스트.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/periodic-background-sync/">Periodic Background Sync API</a>를 사용하면 앱을 실행할 필요 없이 백그라운드에서 콘텐츠를 정기적으로 새로 고칠 수 있습니다. 즉, 새로운 콘텐츠를 사전에 사용할 수 있으므로 사용자가 결정할 때마다 즉시 탐색을 시작할 수 있습니다. {% endDetails %}
+
+## 클라우드를 통해 동기화된 상태
+
+동시에 내 구독은 내가 소유한 모든 장치에서 동기화됩니다. 원활한 세상에서는 팟캐스트 구독을 수동으로 동기화하는 것에 대해 걱정할 필요가 없습니다. 마찬가지로, 모바일 장치의 메모리가 데스크탑에서 이미 들은 에피소드에 의해 소모되거나 그 반대의 경우도 마찬가지입니다. 재생 상태는 동기화 상태로 유지되며 청취한 에피소드는 자동으로 삭제됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="'기기 간 구독 동기화' 옵션이 활성화된 '고급' 섹션의 팟캐스트 앱 설정 메뉴입니다.", width="800", height="525" %}<figcaption> 상태는 클라우드를 통해 동기화됩니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 앱 상태 데이터 동기화는 <a href="https://developers.google.com/web/updates/2015/12/background-sync">백그라운드 동기화 API</a>에 위임할 수 있는 작업입니다. 동기화 작업 자체는 즉시 발생하지 않아도 되며 <em>결국</em>에는 사용자가 이미 앱을 다시 닫은 경우일 수도 있습니다. {% endDetails %}
+
+## 하드웨어 미디어 키 컨트롤
+
+Chrome 브라우저에서 뉴스 페이지를 읽는 것과 같이 다른 애플리케이션으로 바쁠 때에도 랩톱의 미디어 키로 Podcast 앱을 제어할 수 있습니다. 앞으로 또는 뒤로 건너뛰기 위해 앱으로 전환할 필요가 없습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="주석이 있는 미디어 키가 있는 Apple MacBook Pro Magic Keyboard.", width="800", height="406" %}<figcaption> 미디어 키를 사용하여 Podcast 앱(<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">Source</a>)을 제어할 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 미디어 키는 <a href="/media-session/">미디어 세션 API</a>에서 지원됩니다. 이와 같이 사용자는 실제 키보드, 헤드폰의 하드웨어 미디어 키를 사용하거나 스마트워치의 소프트웨어 미디어 키에서 웹 앱을 제어할 수도 있습니다. 탐색 작업을 원활하게 하기 위한 추가 아이디어는 사용자가 콘텐츠의 상당 부분(예: 오프닝 크레딧 또는 챕터 경계 통과)을 탐색할 때 <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">진동 패턴</a>을 보내는 것입니다. {% endDetails %}
+
+## 멀티태스킹 및 앱 바로 가기
+
+물론 언제 어디서나 팟캐스트 앱으로 멀티태스킹을 할 수 있습니다. 앱에는 명확하게 구별되는 아이콘이 있어 데스크탑이나 애플리케이션 도크에 놓을 수도 있으므로 원할 때 팟캐스트를 즉시 실행할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="선택할 수 있는 앱 아이콘이 많은 macOS 작업 전환기, 그 중 하나는 팟캐스트 앱입니다.", width="800", height="630" %}<figcaption> Podcast 앱으로 다시 멀티태스킹.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 데스크톱과 모바일 모두에서 Progressive Web Apps를 홈 화면, 시작 메뉴 또는 애플리케이션 독에 설치할 수 있습니다. 사전 프롬프트에 따라 설치하거나 앱 개발자가 완전히 제어할 수 있습니다. <a href="/install-criteria/">설치하려면 무엇이 필요합니까?</a> 기사는 알아야 할 모든 내용을 다룹니다. 멀티태스킹 시 PWA는 브라우저와 독립적으로 나타납니다. {% endDetails %}
+
+## 상황에 맞는 메뉴의 빠른 작업
+
+가장 일반적인 앱 작업인 새 콘텐츠 **검색** 및 **새 에피소드 확인**은 Dock에 있는 앱의 컨텍스트 메뉴에서 바로 사용할 수 있습니다. **옵션** 메뉴를 통해 로그인할 때 앱을 열도록 결정할 수도 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="'검색' 및 '새 에피소드 확인' 옵션을 보여주는 팟캐스트 앱 아이콘 컨텍스트 메뉴.", width="534", height="736" %}<figcaption> 빠른 작업은 앱 아이콘에서 바로 사용할 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} PWA의 웹 앱 매니페스트에서 <a href="/app-shortcuts/">앱 아이콘 바로 가기</a>를 지정하면 사용자가 앱 아이콘에서 직접 연결할 수 있는 일반적인 작업에 대한 빠른 경로를 등록할 수 있습니다. macOS와 같은 운영 체제에서 사용자는 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하고 로그인 시 앱이 실행되도록 설정할 수도 있습니다. <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">로그인 시 실행</a>에 대한 제안에 대한 작업이 진행 중입니다. {% endDetails %}
+
+## 기본 앱으로 작동
+
+다른 iOS 응용 프로그램과 웹 사이트 또는 이메일도 `podcasts://` URL 체계를 활용하여 Podcasts 앱과 통합할 수 있습니다. [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903)과 같은 링크를 따라가면 Podcast 앱으로 바로 이동하여 Podcast를 구독하거나 들을지 결정할 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="사용자에게 팟캐스트 앱을 열 것인지 묻는 확인 대화상자를 표시하는 Chrome 브라우저.", width="800", height="492" %}<figcaption> 팟캐스트 앱은 브라우저에서 바로 열 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 완전 사용자 지정 URL 체계를 처리하는 것은 아직 가능하지 않지만 PWA에 대한 <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URL 프로토콜 처리</a>에 대한 제안에 대한 작업이 진행 중입니다. 현재, <code>web+</code> 구성표 접두사가 있는 <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>가 최상의 대안입니다. {% endDetails %}
+
+## 로컬 파일 시스템 통합
+
+당장 생각이 나지 않을 수도 있지만 팟캐스트 앱은 자연스럽게 로컬 파일 시스템과 통합됩니다. 팟캐스트 에피소드를 다운로드하면 내 랩탑에서 `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`에 저장됩니다. `~/Documents`와 달리 이 디렉토리는 물론 일반 사용자가 직접 액세스할 수는 없지만 존재합니다. 파일 이외의 다른 저장 메커니즘은 [오프라인 콘텐츠](#offline-content-available-and-media-playable) 섹션에서 참조됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="macOS Finder가 팟캐스트 앱의 시스템 디렉토리로 이동했습니다.", width="800", height="337" %}<figcaption> 팟캐스트 에피소드는 특별한 시스템 앱 폴더에 저장됩니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 개발자는 <a href="/file-system-access/">파일 시스템 액세스 API</a>를 사용하여 기기의 로컬 파일 시스템에 액세스할 수 있습니다. API를 지원하지 않는 브라우저에 대한 대체를 투명하게 제공하는 <a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access</a> 지원 라이브러리를 통해 또는 직접 사용할 수 있습니다. 보안상의 이유로 시스템 디렉토리는 웹에서 액세스할 수 없습니다. {% endDetails %}
+
+## 플랫폼 모양과 느낌
+
+Podcast와 같은 iOS 응용 프로그램에 대해 자명한 더 미묘한 것이 있습니다. 텍스트 레이블을 선택할 수 없고 모든 텍스트가 시스템의 시스템 글꼴과 혼합됩니다. 또한 내가 선택한 시스템 색상 테마(다크 모드)도 존중됩니다.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="팟캐스트 앱이 어두운 모드입니다.", width="800", height="463" %}<figcaption> 팟캐스트 앱은 라이트 모드와 다크 모드를 지원합니다.</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="라이트 모드의 팟캐스트 앱입니다.", width="800", height="463" %}<figcaption> 앱은 기본 시스템 글꼴을 사용합니다.</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a> <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a> CSS 속성을 활용하면 실수로 UI 요소가 선택되는 것을 방지할 수 있습니다. 그러나 <em>앱 콘텐츠</em>를 선택할 수 없도록 만들기 위해 이 속성을 남용하지 않도록 하십시오. 버튼 텍스트 등과 같은 UI 요소에만 사용해야 합니다. <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> CCS 속성에 대한 <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#&lt;generic-name&gt;:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a> 값을 사용하면 앱에 사용할 시스템의 기본 UI 글꼴을 지정할 수 있습니다. 마지막으로, 응용 프로그램은 <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a> 옵션을 따라 사용자의 색상표 선호도를 준수할 수 있고, 선택적으로 <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">다크 모드</a>를 사용해 재정의할 수 있습니다. 결정해야 할 또 다른 사항은 스크롤 영역의 경계에 도달할 때 브라우저가 수행해야 하는 작업입니다(예: <em>새로 고침</em>에 대한 사용자 지정 끌어오기 구현). 이것은 <a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> CSS 속성으로 가능합니다. {% endDetails %}
+
+## 맞춤형 제목 표시줄
+
+Podcasts 앱 창을 보면 Safari 브라우저 창과 같은 클래식 통합 제목 표시줄 및 도구 모음이 없지만 기본 플레이어 창에 도킹된 사이드바처럼 보이는 사용자 지정 환경이 있다는 것을 알 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="Safari 브라우저의 통합 타일 막대 및 도구 모음입니다.", width="800", height="40" %}<figcaption></figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="팟캐스트 앱의 맞춤 분할 맞춤 제목 표시줄입니다.", width="800", height="43" %}<figcaption> Safari 및 Podcast의 사용자 정의된 제목 표시줄.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} 현재 불가능하지만 <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">제목 표시줄 사용자 정의</a> 작업이 현재 진행 중입니다. 그러나 <a href="/add-manifest/#display"><code>display</code></a> 및 <a href="/add-manifest/#theme-color"><code>theme-color</code></a> 속성을 지정하여 애플리케이션 창의 모양과 느낌을 결정하고 표시할 기본 브라우저 컨트롤(어느 것도 표시되지 않을 수도 있음)을 결정할 수 있습니다. {% endDetails %}
+
+## 날렵한 애니메이션
+
+팟캐스트에서 인앱 애니메이션은 빠르고 부드럽습니다. 예를 들어, 오른쪽에 있는 **에피소드 노트** 서랍을 열면 우아하게 들어옵니다. 다운로드에서 한 에피소드를 제거하면 나머지 에피소드가 뜨고 삭제된 에피소드로 인해 비워진 화면 공간을 소비합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="'Episode Notes' 서랍이 확장된 팟캐스트 앱입니다.", width="800", height="463" %}<figcaption> 서랍을 열 때와 같은 인앱 애니메이션은 신속합니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">애니메이션 및 성능</a> 문서에 요약된 여러 모범 사례를 고려하면 웹에서 성능이 뛰어난 애니메이션을 만들 수 있습니다. 페이지가 매겨진 콘텐츠 또는 미디어 캐러셀에서 일반적으로 볼 수 있는 스크롤 애니메이션은 <a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS 스크롤 스냅</a> 기능을 사용하여 크게 개선할 수 있습니다. 완전한 제어를 위해 <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a>를 사용할 수 있습니다. {% endDetails %}
+
+## 앱 외부에 노출된 콘텐츠
+
+iOS의 팟캐스트 앱은 실제 애플리케이션이 아닌 다른 위치의 콘텐츠를 표시할 수 있습니다(예: 시스템의 위젯 보기 또는 Siri 제안 형식). 탭하기만 하면 되는 사전 예방적 사용 기반 클릭 유도문안을 사용하면 팟캐스트와 같은 앱의 재참여율을 크게 높일 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="팟캐스트의 새 에피소드를 제안하는 팟캐스트 앱을 보여주는 iOS 위젯 보기.", width="751", height="1511" %}<figcaption> 앱 콘텐츠는 기본 팟캐스트 앱 외부에 표시됩니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/content-indexing-api/">Content Index API</a>를 사용하면 애플리케이션이 오프라인에서 사용할 수 있는 PWA 콘텐츠를 브라우저에 알릴 수 있습니다. 이를 통해 브라우저는 기본 앱 외부에 이 콘텐츠를 표시할 수 있습니다. 앱에서 흥미로운 콘텐츠를 <a href="https://developers.google.com/search/docs/data-types/speakable">읽기 가능</a>한 오디오 재생으로 마크업하고 일반적으로 <a href="https://developers.google.com/search/docs/guides/search-gallery">구조화된 마크업</a>을 사용해, 검색 엔진과 Google 어시스턴트와 같은 가상 도우미를 사용해 이상적으로 제공 솔루션을 선보일 수 있습니다. {% endDetails %}
+
+## 잠금 화면 미디어 제어 위젯
+
+팟캐스트 에피소드가 재생 중일 때 팟캐스트 앱은 에피소드 아트워크, 에피소드 제목 및 팟캐스트 이름과 같은 메타데이터가 포함된 아름다운 제어 위젯을 잠금 화면에 표시합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="리치 메타데이터가 포함된 팟캐스트 에피소드를 표시하는 잠금 화면의 iOS 미디어 재생 위젯.", width="751", height="1511" %}<figcaption> 앱에서 재생 중인 미디어는 잠금 화면에서 제어할 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/media-session/">미디어 세션 API</a>를 사용하면 아트워크, 트랙 제목 등과 같은 메타데이터를 지정할 수 있으며, 이 메타데이터는 브라우저의 잠금 화면, 스마트워치 또는 기타 미디어 위젯에 표시됩니다. {% endDetails %}
+
+## 푸시 알림
+
+([알림 프롬프트가 훨씬 조용해](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html)졌지만) 푸시 알림은 웹에서 약간의 성가신 일이 되었습니다. 그러나 적절하게 사용하면 많은 가치를 추가할 수 있습니다. 예를 들어 iOS 팟캐스트 앱은 내가 구독 중인 팟캐스트의 새로운 에피소드를 선택적으로 알려주거나 새로운 에피소드를 추천할 수 있을 뿐만 아니라 새로운 앱 기능에 대해 알려줄 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="'새로운 에피소드' 알림 토글이 활성화된 것을 보여주는 '알림' 설정 화면의 iOS 팟캐스트 앱.", width="1511", height=" " %}<figcaption> 앱은 사용자에게 새로운 콘텐츠를 알리기 위해 푸시 알림을 보낼 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="https://developers.google.com/web/fundamentals/push-notifications">푸시 API</a>를 사용하면 앱에서 푸시 알림을 받을 수 있으므로 PWA와 관련된 주목할만한 이벤트에 대해 사용자에게 알릴 수 있습니다. 미래의 알려진 시간에 실행되어야 하고 네트워크 연결이 필요하지 않은 알림의 경우 <a href="/notification-triggers/">알림 트리거 API</a>를 사용할 수 있습니다. {% endDetails %}
+
+## 앱 아이콘 배지
+
+내가 구독하는 팟캐스트 중 하나에 사용할 수 있는 새 에피소드가 있을 때마다 팟캐스트 홈 화면 아이콘에 앱 아이콘 배지가 나타나 방해가 되지 않는 방식으로 앱에 다시 참여하도록 권장합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="'배지' 토글이 활성화된 것을 보여주는 iOS 설정 화면입니다.", width="751", height="1511" %}<figcaption> 배지는 응용 프로그램이 사용자에게 새 콘텐츠를 알리는 미묘한 방법입니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/badging-api/">Badging API</a>를 사용하여 앱 아이콘 배지를 설정할 수 있습니다. 이것은 PWA에 "읽지 않은" 항목에 대한 개념이 있거나 사용자의 주의를 앱으로 눈에 띄지 않게 되돌릴 수 있는 수단이 필요할 때 특히 유용합니다. {% endDetails %}
+
+## 미디어 재생이 에너지 절약 설정보다 우선
+
+팟캐스트 미디어가 재생 중일 때 화면이 꺼질 수 있지만 시스템은 대기 모드로 들어가지 않습니다. 앱은 예를 들어 가사나 캡션을 표시하기 위해 선택적으로 화면을 계속 깨울 수도 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="macOS 환경설정은 '절전' 섹션에 있습니다.", width="800", height="573" %}<figcaption> 앱은 화면을 깨운 상태로 유지할 수 있습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} <a href="/wakelock/">Screen Wake Lock API</a>를 사용하면 화면이 꺼지는 것을 방지할 수 있습니다. 웹에서의 미디어 재생은 시스템이 대기 모드로 들어가는 것을 자동으로 방지합니다. {% endDetails %}
+
+## 앱 스토어를 통한 앱 검색
+
+팟캐스트 앱은 macOS 데스크탑 경험의 일부이지만 iOS에서는 App Store에서 설치해야 합니다. `podcast` , `podcasts` 또는 `apple podcasts`를 빠르게 검색하면 App Store에 즉시 앱이 표시됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="iOS App Store에서 '팟캐스트'를 검색하면 팟캐스트 앱이 표시됩니다.", width="751", height="1511" %}<figcaption> 사용자는 앱 스토어에서 앱을 발견하는 방법을 배웠습니다.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 웹에서 이 작업을 수행하는 방법 {% endDetailsSummary %} Apple은 App Store에서 PWA를 허용하지 않지만 Android에서는 <a href="/using-a-pwa-in-your-android-app/">신뢰할 수 있는 웹 활동으로 래핑된</a> PWA를 제출할 수 있습니다. <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> 스크립트를 사용하면 이 작업을 쉽게 수행할 수 있습니다. 이 스크립트는 또한 명령줄을 건드리지 않고도 사용할 수 있는 <a href="https://www.pwabuilder.com/">PWABuilder</a>의 Android 앱 내보내기 기능을 내부적으로 지원합니다. {% endDetails %}
+
+## 기능 요약
+
+아래 표는 모든 기능에 대한 간략한 개요를 보여주고 웹에서 구현하는 데 유용한 리소스 목록을 제공합니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>특징</th>
+        <th>웹에서 이 작업을 수행하는 데 유용한 리소스</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">오프라인 실행 가능</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/architecture/app-shell">앱 셸 모델</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#offline-content-available-and-media-playable">오프라인 콘텐츠 사용 가능 및 미디어 재생 가능</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">캐시된 오디오 및 비디오 제공</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">워크박스 라이브러리</a></li>
+            <li><a href="/storage-for-the-web/">스토리지 API</a></li>
+            <li><a href="/persistent-storage/">영구 저장소 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">사전 백그라운드 다운로드</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">백그라운드 가져오기 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">다른 응용 프로그램과 공유 및 상호 작용</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">웹 공유 API</a></li>
+            <li><a href="/web-share-target/">웹 공유 대상 API</a></li>
+            <li><a href="/image-support-for-async-clipboard/">비동기 클립보드 API</a></li>
+            <li><a href="/contact-picker/">연락처 선택기 API</a></li>
+            <li><a href="/get-installed-related-apps/">설치된 관련 앱 API 가져오기</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">백그라운드 앱 새로고침</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">주기적 백그라운드 동기화 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">클라우드를 통해 동기화된 상태</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">백그라운드 동기화 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">하드웨어 미디어 키 컨트롤</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">미디어 세션 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">멀티태스킹 및 앱 바로 가기</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">설치성 기준</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">상황에 맞는 메뉴의 빠른 작업</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">앱 아이콘 바로 가기</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">로그인 시 실행</a> (초기 단계)</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">기본 앱으로 작동</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URL 프로토콜 처리</a> (초기 단계)</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">로컬 파일 시스템 통합</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">파일 시스템 액세스 API</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">브라우저 fs 액세스 라이브러리</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">플랫폼 모양과 느낌</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">다크 모드 토글</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">맞춤형 제목 표시줄</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">제목 표시줄 사용자 지정</a> (초기 단계)</li>
+            <li><a href="/add-manifest/#display">디스플레이 모드</a></li>
+            <li><a href="/add-manifest/#theme-color">테마 색상</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">날렵한 애니메이션</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">애니메이션 및 성능 팁</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS 스크롤 스냅</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">웹 애니메이션 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">앱 외부에 노출된 콘텐츠</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">콘텐츠 색인 API</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">말할 수 있는 콘텐츠</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">구조화된 마크업</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">잠금 화면 미디어 제어 위젯</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">미디어 세션 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">푸시 알림</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">푸시 API</a></li>
+            <li><a href="/notification-triggers/">알림 트리거 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">앱 아이콘 배지</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">배지 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">미디어 재생이 에너지 절약 설정보다 우선합니다.</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">화면 깨우기 잠금 API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">앱 스토어를 통한 앱 검색</a></td>
+        <td>
+          <ul>
+            <li><a href="/using-a-pwa-in-your-android-app/">신뢰할 수 있는 웹 활동</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code> 라이브러리</a></li>
+            <li><a href="https://www.pwabuilder.com/">PWABuilder 도구</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 결론
+
+PWA는 2015년에 도입된 이후로 먼 길을 왔습니다. [Project Fugu 🐡](https://developer.chrome.com/blog/fugu-status)의 맥락에서 회사 간 Chromium 팀이 마지막 남은 공백을 메우기 위해 노력하고 있습니다. 이 기사의 조언 중 일부만 따르면 앱과 같은 느낌에 조금씩 더 다가갈 수 있으며 사용자가 "단지 웹사이트"를 다루고 있다는 사실을 잊게 만들 수 있습니다. *실제* 앱처럼 느껴지기만 하면 앱이 어떻게 구축되는지(왜 그래야 하는지?) 신경 쓰지 마세요.
+
+## 감사의 말
+
+이 기사는 [Kayce Basques](/authors/kaycebasques/) , [Joe Medley](/authors/joemedley/) , [Joshua Bell](https://github.com/inexorabletash) , [Dion Almaer](https://blog.almaer.com/) , [Ade Oshineye](https://blog.oshineye.com/) , [Pete LePage](/authors/petelepage/) , [Sam Thorogood](/authors/samthor/) , [Reilly Grant](https://github.com/reillyeon) 및 [Jeffrey Yasskin](https://github.com/jyasskin)이 검수하였습니다.
diff --git a/src/site/content/ko/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/ko/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..23cc2e46d62
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,98 @@
+---
+layout: codelab
+title: 설치 가능하게 만들기
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description: 이 코드랩에서는 beforeinstallprompt 이벤트를 사용하여 사이트를 설치 가능하게 만드는 방법을 알아봅니다.
+glitch: make-it-installable?경로=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+이 결함에는 [매우 간단한 서비스 작업자](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js)와 [웹 앱 매니페스트](https://glitch.com/edit/#!/make-it-installable?path=manifest.json)를 포함하여 프로그레시브 웹 앱을 설치 가능하게 만드는 데 필요한 중요한 구성 요소가 이미 포함되어 있습니다. 또한 기본적으로 숨겨져 있는 설치 버튼도 있습니다.
+
+## beforeinstallprompt 이벤트 수신 대기
+
+브라우저가 `beforeinstallprompt` 이벤트를 발생시키면, 이는 프로그레시브 웹 앱을 설치할 수 있고 설치 버튼이 사용자에게 표시될 수 있다는 것을 나타냅니다. `beforeinstallprompt` 이벤트는 PWA가 [설치 가능성 기준](/install-criteria/)을 충족할 때 발생합니다.
+
+{% Instruction 'remix', 'ol' %}
+
+1. `window` 객체에 `beforeinstallprompt` 이벤트 핸들러를 추가합니다.
+2. `event`를 전역 변수로 저장합니다. 프롬프트를 표시하려면 나중에 필요합니다.
+3. 설치 버튼을 숨김 해제합니다.
+
+암호:
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // Prevent the mini-infobar from appearing on mobile.
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // Stash the event so it can be triggered later.
+  window.deferredPrompt = event;
+  // Remove the 'hidden' class from the install button container.
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## 설치 버튼 클릭 처리
+
+설치 프롬프트를 표시하려면 저장된 `beforeinstallprompt` 이벤트에서 `prompt()`를 호출합니다. `prompt()`는 사용자 제스처에서 호출해야 하기 때문에 `prompt()` 호출은 설치 버튼 클릭 핸들러에서 수행됩니다.
+
+1. 설치 버튼에 대한 클릭 이벤트 핸들러를 추가합니다.
+2. 저장된 `beforeinstallprompt` 이벤트에서 `prompt()`를 호출합니다.
+3. 프롬프트 결과를 기록합니다.
+4. 저장된 `beforeinstallprompt` 이벤트를 null로 설정합니다.
+5. 설치 버튼을 숨깁니다.
+
+코드:
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // The deferred prompt isn't available.
+    return;
+  }
+  // Show the install prompt.
+  promptEvent.prompt();
+  // Log the result
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // Reset the deferred prompt variable, since
+  // prompt() can only be called once.
+  window.deferredPrompt = null;
+  // Hide the install button.
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## 설치 이벤트 추적
+
+설치 버튼을 통해 프로그레시브 웹 앱을 설치하는 것은 사용자가 PWA를 설치할 수 있는 한 가지 방법일 뿐입니다. 그 외에 Chrome 메뉴, 미니 정보 표시줄, [검색 주소창의 아이콘](/promote-install/#browser-promotion)을 통해서도 가능합니다. `appinstalled` 이벤트에 수신 대기하여 이러한 모든 설치 방법을 추적할 수 있습니다.
+
+1. `window` 객체에 `appinstalled` 이벤트 핸들러를 추가합니다.
+2. 분석 또는 기타 메커니즘에 설치 이벤트를 기록합니다.
+
+코드:
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // Clear the deferredPrompt so it can be garbage collected
+  window.deferredPrompt = null;
+});
+```
+
+## 추가 참고 자료
+
+축하합니다. 이제 앱을 설치할 수 있게 되었습니다!
+
+다음은 몇 가지 추가적으로 수행할 수 있는 작업들입니다.
+
+- [앱이 홈 화면에서 실행되었는지 감지](/customize-install/#detect-mode)
+- [대신 운영 체제의 앱 설치 프롬프트 표시](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/ko/progressive-web-apps/customize-install/index.md b/src/site/content/ko/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..725d99c23af
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: 자신만의 인앱 설치 경험을 제공하는 방법
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2-
+
+  beforeinstallprompt 이벤트를 사용하여 사용자에게 원활한 맞춤형 인앱 설치 환경을 제공하십시오.
+tags:
+  - progressive-web-apps
+---
+
+여러 브라우저를 사용하면 PWA의 사용자 인터페이스 내에서 직접 프로그레시브 웹 앱(PWA) 설치를 활성화하고 승격할 수 있습니다. 설치(이전에는 '홈 화면에 추가'라고도 함)를 사용하면 사용자가 모바일 또는 데스크톱 장치에 PWA를 쉽게 설치할 수 있습니다. PWA를 설치하면 사용자의 시작 프로그램에 PWA를 추가하여 설치된 다른 앱처럼 실행할 수 있습니다.
+
+[브라우저에서 제공하는 설치 환경](/promote-install/#browser-promotion) 외에도 앱 내에서 직접 사용자 지정 설치 흐름을 제공할 수 있습니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Spotify PWA에 제공되어 있는 앱 설치 버튼", width="491", height="550" %}<figcaption> Spotify PWA에 제공되어 있는 "앱 설치" 버튼</figcaption></figure>
+
+설치를 승격할지 여부를 고려할 때 사용자가 일반적으로 PWA를 사용하는 방법에 대해 생각하는 것이 가장 좋습니다. 예를 들어, 일주일에 여러 번 PWA를 사용하는 사용자 집합이 있는 경우 이러한 사용자들은 스마트폰 홈 화면이나 데스크톱 운영 체제의 시작 메뉴에서 앱을 시작하는 추가 편의성 이점을 누릴 수 있습니다. 일부 생산성 및 엔터테인먼트 애플리케이션도 설치된 `독립 실행형` 또는 `minimal-ui` 모드에서 창에서 브라우저 도구 모음을 제거하여 생성된 추가 화면 실물의 이점을 누릴 수 있습니다.
+
+## 설치 승격 {: #promote-installation }
+
+프로그레시브 웹 앱(PWA)을 설치할 수 있음을 표시하고 사용자 지정 인앱 설치 흐름을 제공하는 방법:
+
+1. `beforeinstallprompt` 이벤트를 실행합니다.
+2. 나중에 설치 흐름을 트리거하는 데 사용할 수 있도록 `beforeinstallprompt` 이벤트를 저장합니다.
+3. PWA를 설치할 수 있음을 사용자에게 알리고 인앱 설치 흐름을 시작하는 버튼 또는 기타 요소를 제공합니다.
+
+{% Aside %} `beforeinstallprompt` 이벤트 및 `appinstalled` 이벤트가 웹 앱 매니페스트 사양에서 자체 [인큐베이터](https://github.com/WICG/beforeinstallprompt)로 이동되었습니다. Chrome 팀은 이를 계속 지원하기 위해 최선을 다하고 있으며 지원을 제거하거나 중단할 계획이 없습니다. Google의 Web DevRel 팀은 사용자 지정 설치 환경을 제공하기 위해 이를 지속적으로 사용하도록 권장합니다. {% endAside %}
+
+### `beforeinstallprompt` 이벤트 {: #beforeinstallprompt } 수신
+
+프로그레시브 웹 앱(PWA)이 필수 [설치 기준](/install-criteria/)을 충족하는 경우 브라우저는 `beforeinstallprompt` 이벤트를 실행합니다. 이벤트에 대한 참조 정보를 저장하고 사용자가 PWA를 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트합니다. 이는 아래에 강조 표시되어 있습니다.
+
+```js
+// Initialize deferredPrompt for use later to show browser install prompt.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent the mini-infobar from appearing on mobile
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI notify the user they can install the PWA
+  showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %} 사용자에게 앱을 설치할 수 있음을 알리고 인앱 설치 흐름을 제공하는 데 사용할 수 있는 다양한 [패턴](/promote-install/)이 있습니다(예: 헤더의 버튼, 탐색 메뉴의 항목 또는 콘텐츠 피드의 항목). {% endAside %}
+
+### 인앱 설치 흐름 {: #in-app-flow }
+
+인앱 설치를 제공하려면 사용자가 앱을 설치하기 위해 클릭할 수 있는 버튼 또는 기타 인터페이스 요소를 제공하십시오. 요소를 클릭하면 저장된 `beforeinstallprompt` 이벤트(`deferredPrompt` 변수에 저장됨)에서 `prompt()`를 호출합니다. 사용자에게 PWA를 설치할지 확인하라는 모달 설치 대화상자를 표시합니다.
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Hide the app provided install promotion
+  hideInstallPromotion();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.userChoice;
+  // Optionally, send analytics event with outcome of user choice
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null;
+});
+```
+
+`userChoice` 속성은 사용자의 선택으로 해결되는 약속입니다. 지연된 이벤트에 대해 한 번만 `prompt()`를 호출할 수 있습니다. 일반적으로 `userChoice` 속성이 해결된 직후에 `beforeinstallprompt` 이벤트가 다시 실행될 때까지 기다려야 합니다.
+
+{% Aside 'codelab' %} [beforeinstallprompt 이벤트를 사용하여 사이트를 설치 가능하게 만드세요](/codelab-make-installable) . {% endAside %}
+
+## PWA가 성공적으로 설치되었을 때 감지 {: #detect-install }
+
+`userChoice` 속성을 사용하여 사용자가 사용자 인터페이스 내에서 앱을 설치했는지 판별할 수 있습니다. 그러나 사용자가 주소 표시줄이나 다른 브라우저 구성 요소에서 PWA를 설치하면 `userChoice`가 도움이 되지 않습니다. 대신, `appinstalled` 이벤트를 실행해야 합니다. PWA를 설치하는 데 사용되는 메커니즘에 관계없이 PWA가 설치될 때마다 실행됩니다.
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Hide the app-provided install promotion
+  hideInstallPromotion();
+  // Clear the deferredPrompt so it can be garbage collected
+  deferredPrompt = null;
+  // Optionally, send analytics event to indicate successful install
+  console.log('PWA was installed');
+});
+```
+
+## PWA 시작 방법 감지 {: #detect-launch-type }
+
+CSS `display-mode` 미디어 쿼리는 브라우저 탭에서 또는 설치된 PWA로 PWA가 시작된 방법을 나타냅니다. 이를 통해 앱 시작 방법에 따라 다양한 스타일을 적용할 수 있습니다. 예를 들어, 설치된 PWA로 시작할 때 항상 설치 버튼을 숨기고 뒤로 이동 버튼을 제공합니다.
+
+### PWA 시작 방법 추적
+
+사용자가 PWA 시작 방법을 추적하려면 `matchMedia()`를 사용하여 `display-mode` 미디어 쿼리를 테스트해야 합니다. iOS의 Safari는 이 기능을 아직 지원하지 않으므로 `navigator.standalone`을 확인해야 합니다. 이 기능은 브라우저가 독립 실행형 모드에서 실행 중인지 여부를 나타내는 부울 값을 반환합니다.
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### 디스플레이 모드 변경 시 추적
+
+`standalone`과 `browser tab` 사이에서 사용자 변경 사항을 추적하려면 `display-mode` 미디어 쿼리에 대한 변경 사항을 실행합니다.
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### 현재 디스플레이 모드를 기반으로 UI 업데이트
+
+설치된 PWA로 시작할 때 PWA에 다른 배경색을 적용하려면 다음과 같은 조건부 CSS를 사용하십시오.
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## 앱 아이콘 및 이름 업데이트
+
+앱 이름을 업데이트하거나 새 아이콘을 제공해야 하는 경우 어떻게 하시겠습니까? [Chrome에서 웹 앱 매니페스트에 대한 업데이트를 처리하는 방법](/manifest-updates/)을 확인하여 이러한 변경 사항이 Chrome에 언제 어떻게 반영되는지 확인하세요.
diff --git a/src/site/content/ko/progressive-web-apps/define-install-strategy/index.md b/src/site/content/ko/progressive-web-apps/define-install-strategy/index.md
new file mode 100644
index 00000000000..a6370187ed7
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/define-install-strategy/index.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: 설치 전략을 정의하는 방법
+authors:
+  - demianrenzulli
+  - petelepage
+date: 2020-05-12
+updated: 2020-08-20
+description: |2
+
+  다양한 설치 제품을 결합하여 설치 속도를 높이고 플랫폼 경쟁 및 자기잠식을 방지하기 위한 모범 사례입니다.
+tags:
+  - progressive-web-apps
+---
+
+{% YouTube '6R9pupbDXYw' %}
+
+과거에는 앱 설치가 플랫폼별 애플리케이션 컨텍스트에서만 가능했습니다. 오늘날 최신 웹 앱은 플랫폼별 앱과 동일한 수준의 통합 및 안정성을 제공하는 설치 가능한 환경을 제공합니다.
+
+다음과 같은 다양한 방법으로 이를 달성할 수 있습니다.
+
+- [브라우저](/customize-install/)에서 PWA 설치.
+- [앱 스토어](https://developer.chrome.com/docs/android/trusted-web-activity/)에서 PWA 설치.
+
+다양한 유통 채널을 보유하는 것은 광범위한 사용자에게 다가갈 수 있는 강력한 방법이지만 사용자를 홍보할 올바른 전략을 선택하는 것은 어려울 수 있습니다.
+
+이 가이드에서는 설치 속도를 높이고 플랫폼 경쟁 및 자기잠식을 피하기 위해 다양한 설치 제품을 결합하는 모범 사례를 살펴봅니다. 적용되는 설치 오퍼링에는 브라우저와 App Store 모두에서 설치된 PWA와 플랫폼별 앱이 포함됩니다.
+
+## 웹 앱을 설치 가능하게 만드는 이유는 무엇입니까?
+
+설치된 Progressive Web Apps는 브라우저 탭 대신 독립 실행형 창에서 실행됩니다. 사용자의 홈 화면, 독, 작업 표시줄 또는 선반에서 실행할 수 있습니다. 기기에서 검색하고 앱 전환기로 전환하여 해당 기기가 설치된 기기의 일부인 것처럼 느낄 수 있습니다.
+
+그러나 설치 가능한 웹 앱과 플랫폼별 앱을 모두 사용하는 것은 사용자에게 혼란을 줄 수 있습니다. 일부 사용자에게는 플랫폼별 앱이 최선의 선택일 수 있지만 다른 사용자에게는 다음과 같은 몇 가지 단점이 있을 수 있습니다.
+
+- **저장 공간 제약:** 새 앱을 설치하면 다른 앱을 삭제하거나 중요한 콘텐츠를 제거하여 공간을 정리할 수 있습니다. 이것은 저사양 기기 사용자에게 특히 불리합니다.
+- **사용 가능한 대역폭:** 앱 다운로드는 비용이 많이 들고 느린 프로세스가 될 수 있으며 느린 연결과 값비싼 데이터 요금제를 사용하는 사용자에게는 더욱 그렇습니다.
+- **마찰:** 웹 사이트를 떠나 앱을 다운로드하기 위해 스토어로 이동하면 추가적인 마찰이 발생하고 웹에서 직접 수행할 수 있는 사용자 작업이 지연됩니다.
+- **업데이트 주기:** 플랫폼별 앱을 변경하려면 앱 검토 프로세스를 거쳐야 할 수 있으며, 이로 인해 변경 및 실험(예: A/B 테스트)이 느려질 수 있습니다.
+
+어떤 경우에는 플랫폼별 앱을 다운로드하지 않는 사용자의 비율이 클 수 있습니다. 예를 들어 앱을 자주 사용하지 않을 것이라고 생각하거나 몇 메가바이트의 데이터. 예를 들어 분석 설정을 사용하여 "모바일 웹 전용" 사용자의 비율을 추적하는 등 여러 가지 방법으로 이 세그먼트의 크기를 결정할 수 있습니다.
+
+이 세그먼트의 크기가 상당한 경우 경험을 설치하는 대체 방법을 제공해야 한다는 좋은 표시입니다.
+
+## 브라우저를 통해 PWA 설치 촉진
+
+고품질 PWA가 있는 경우 플랫폼별 앱보다 설치를 홍보하는 것이 더 나을 수 있습니다. 예를 들어 플랫폼별 앱에 PWA에서 제공하는 기능이 없거나 한동안 업데이트되지 않은 경우입니다. 플랫폼별 앱이 ChromeOS와 같이 더 큰 화면에 최적화되지 않은 경우 PWA 설치를 홍보하는 것도 도움이 될 수 있습니다.
+
+일부 앱의 경우 플랫폼별 앱 설치를 유도하는 것이 비즈니스 모델의 핵심 부분입니다. 이 경우 플랫폼별 앱 설치 프로모션을 표시하는 것이 비즈니스에 합리적입니다. 그러나 일부 사용자는 웹에 머무르는 것이 더 편할 수 있습니다. 해당 세그먼트를 식별할 수 있는 경우 PWA 프롬프트는 해당 세그먼트에만 표시될 수 있습니다("폴백으로서의 PWA"라고 함).
+
+이 섹션에서는 브라우저를 통해 설치된 PWA의 설치 속도를 최대화하는 다양한 방법을 탐색합니다.
+
+### 기본 설치 가능한 환경으로서의 PWA
+
+PWA가 [설치 가능성 기준](/install-criteria/)을 충족하면 대부분의 브라우저에 PWA를 설치할 수 있다는 표시가 표시됩니다. 예를 들어 데스크톱 Chrome은 주소 표시줄에 설치 가능한 아이콘을 표시하고 모바일에서는 미니 정보 표시줄을 표시합니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1VOvbQjeenZOBAmzjVN5.png", alt="미니 정보 표시줄이라는 표준 Chrome 설치 프롬프트", width="800", height="417" %}<figcaption> 미니 정보 표시줄</figcaption></figure>
+
+일부 경험에는 충분할 수 있지만 목표가 PWA 설치를 유도하는 것이라면 [`BeforeInstallPromptEvent`](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent)를 듣고 PWA [설치를 승격하기 위한 패턴](/promote-install/)을 따르는 것이 좋습니다.
+
+## PWA가 플랫폼별 앱 설치율을 잠식하지 못하도록 방지
+
+경우에 따라 PWA를 통해 플랫폼별 앱 설치를 홍보하도록 선택할 수 있지만 이 경우에도 사용자가 PWA를 설치할 수 있도록 하는 메커니즘을 제공하는 것이 좋습니다. 이 대체 옵션을 사용하면 플랫폼별 앱을 설치할 수 없거나 설치하지 않으려는 사용자가 유사한 설치 환경을 얻을 수 있습니다.
+
+이 전략을 구현하는 첫 번째 단계는 사용자에게 PWA에 대한 설치 프로모션을 표시할 시기에 대한 경험적 방법을 정의하는 것입니다. 예를 들면 다음과 같습니다.
+
+**PWA 사용자는 플랫폼별 앱 설치 프롬프트를 보고 플랫폼별 앱을 설치하지 않은 사용자입니다. 이들은 최소 5번 이상 사이트에 돌아왔거나, 앱 배너를 클릭했지만, 대신 웹사이트를 계속 사용하고 있습니다.**
+
+그런 다음 휴리스틱을 다음과 같이 구현할 수 있습니다.
+
+1. 플랫폼별 앱 설치 배너를 표시합니다.
+2. 사용자가 배너를 닫으면 해당 정보로 쿠키를 설정합니다(예: `document.cookie = "app-install-banner=dismissed"`).
+3. 다른 쿠키를 사용하여 사이트에 대한 사용자 방문 수를 추적합니다(예: `document.cookie = "user-visits=1"`).
+4. 사용자가 "PWA 사용자"로 간주되는지 확인하기 위해 [`getInstalledRelatedApps()`](/get-installed-related-apps/) API와 함께 쿠키에 이전에 저장된 정보를 사용하는 `isPWAUser()`와 같은 함수를 작성하십시오.
+5. 사용자가 의미 있는 작업을 수행하는 순간 `isPWAUser()`를 호출합니다. 함수가 true를 반환하고 PWA 설치 프롬프트가 이전에 저장된 경우 PWA 설치 버튼을 표시할 수 있습니다.
+
+## 앱 스토어를 통해 PWA 설치 촉진
+
+앱 스토어에서 사용할 수 있는 앱은 PWA 기술을 비롯한 다양한 기술로 구축할 수 있습니다. [PWA를 기본 환경에 혼합](https://youtu.be/V7YX4cZ_Cto)에서 해당 목적에 사용할 수 있는 기술 요약을 찾을 수 있습니다.
+
+이 섹션에서는 스토어의 앱을 두 그룹으로 분류합니다.
+
+- **플랫폼별 앱:** 이러한 앱은 대부분 플랫폼별 코드로 빌드됩니다. 크기는 플랫폼에 따라 다르지만 일반적으로 Android에서는 10MB 이상, iOS에서는 30MB 이상입니다. PWA가 없거나 플랫폼별 앱이 더 완전한 기능 세트를 제공하는 경우 플랫폼별 앱을 홍보할 수 있습니다.
+- **경량 앱:** 이러한 앱은 플랫폼별 코드로도 빌드할 수 있지만 일반적으로 플랫폼별 래퍼에 패키지된 웹 기술로 빌드됩니다. 전체 PWA도 상점에 업로드할 수 있습니다. 일부 회사는 이를 "라이트" 경험으로 제공하기로 선택하고 다른 회사는 주력(핵심) 앱에도 이 접근 방식을 사용했습니다.
+
+### 가벼운 앱 홍보
+
+[Google Play 연구](https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2)에 따르면 APK 크기가 6MB 증가할 때마다 설치 전환율은 1%씩 감소합니다. 즉, 10MB 앱의 다운로드 완료율은 **100MB 앱보다 약 30% 더 높을 수 있습니다!**
+
+이 문제를 해결하기 위해 일부 회사에서는 PWA를 활용하여 신뢰할 수 있는 웹 활동을 사용하여 Play 스토어에서 앱의 경량 버전을 제공하고 있습니다. [신뢰할 수 있는 웹 활동](https://developer.chrome.com/docs/android/trusted-web-activity/)을 통해 Play 스토어에서 PWA를 제공할 수 있으며 웹을 사용하여 구축되기 때문에 앱 크기는 일반적으로 몇 메가바이트에 불과합니다.
+
+인도의 가장 큰 환대 회사 중 하나인 Oyo는 [앱의 Lite 버전](/oyo-lite-twa/)을 만들고 TWA를 사용하여 Play 스토어에서 사용할 수 있도록 했습니다. Android 앱 크기의 7%에 불과한 850KB에 불과합니다. 그리고 일단 설치되면 Android 앱과 구별할 수 없습니다.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>작동 중인 OYO Lite.</figcaption></figure>
+
+Oyo는 플래그십 및 "lite" 앱 버전을 모두 스토어에 보관했으며 최종 결정은 사용자에게 맡겼습니다.
+
+#### 가벼운 웹 경험 제공
+
+직관적으로 저가형 기기의 사용자는 고급형 기기의 사용자보다 경량 버전의 앱을 다운로드하는 경향이 더 높을 수 있습니다. 따라서 사용자의 기기를 식별할 수 있다면 플랫폼별 앱 버전보다 가벼운 앱 설치 배너를 우선시할 수 있습니다.
+
+웹에서는 장치 신호를 가져와 장치 범주(예: "높음", "중간" 또는 "낮음")에 대략적으로 매핑할 수 있습니다. JavaScript API 또는 클라이언트 힌트를 사용하여 다양한 방법으로 이 정보를 얻을 수 있습니다.
+
+#### JavaScript API 사용
+
+[navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency), [navigator.deviceMemory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) 및 [navigator.connection](https://developer.mozilla.org/docs/Web/API/Navigator/connection)과 같은 JavaScript API를 사용하여 각각 장치 CPU, 메모리 및 네트워크 상태에 대한 정보를 얻을 수 있습니다. 예시:
+
+```javascript
+const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
+```
+
+#### 클라이언트 힌트 사용
+
+장치 신호는 [클라이언트 힌트](https://developer.mozilla.org/docs/Glossary/Client_hints)를 통해 HTTP 요청 헤더에서 유추할 수도 있습니다. 클라이언트 힌트를 사용하여 장치 메모리에 대한 이전 코드를 구현하는 방법은 다음과 같습니다.
+
+먼저, 모든 자사 요청에 대한 HTTP 응답 헤더에서 장치 메모리 힌트를 수신하는 데 관심이 있다고 브라우저에 알립니다.
+
+```html
+HTTP/1.1 200 OK
+Content-Type: text/html
+Accept-CH: Device-Memory
+```
+
+그런 다음 HTTP 요청의 요청 헤더에서 Device-Memory 정보를 수신하기 시작합니다.
+
+```html
+GET /main.js HTTP/1.1
+Device-Memory: 0.5
+```
+
+백엔드에서 이 정보를 사용하여 사용자 기기 카테고리와 함께 쿠키를 저장할 수 있습니다.
+
+```javascript
+app.get('/route', (req, res) => {
+  // Determine device category
+
+ const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
+
+  // Set cookie
+  res.setCookie('Device-Category', deviceCategory);
+  …
+});
+```
+
+마지막으로 이 정보를 장치 범주에 매핑하는 고유한 논리를 만들고 각 경우에 해당하는 앱 설치 프롬프트를 표시합니다.
+
+```javascript
+if (isDeviceMidOrLowEnd()) {
+   // show "Lite app" install banner or PWA A2HS prompt
+} else {
+  // show "Core app" install banner
+}
+```
+
+{% Aside %} 기기 신호를 기기 카테고리에 매핑하는 방법에 대한 심층적인 기술은 이 가이드의 범위를 벗어나지만 Addy Osmani의 [적응형 로딩 가이드](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69), Philip Walton의 [The Device Memory API](https://developer.chrome.com/blog/device-memory/) 및 Jeremy Wagner의 [Adapting to Users with Client](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/)를 확인할 수 있습니다. 이에 대한 모범 사례에 대한 자세한 정보는 힌트입니다. {% endAside %}
+
+## 결론
+
+사용자의 홈 화면에 아이콘을 표시하는 기능은 응용 프로그램의 가장 매력적인 기능 중 하나입니다. 역사적으로 이것은 앱 스토어에서 설치된 앱에서만 가능했다는 점을 감안할 때 기업은 앱 스토어 설치 배너를 표시하는 것으로 사용자가 경험을 설치하도록 설득하기에 충분하다고 생각할 수 있습니다. 현재 상점에서 가벼운 앱 경험을 제공하고 사용자가 웹사이트에서 직접 PWA를 추가하도록 하여 PWA를 홈 화면에 추가할 수 있도록 하는 등 사용자가 앱을 설치하도록 하는 더 많은 옵션이 있습니다.
diff --git a/src/site/content/ko/progressive-web-apps/drive-business-success/index.md b/src/site/content/ko/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..23e0e0bc706
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: 프로그레시브 웹 앱이 비즈니스 성공을 주도하는 방법
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: PWA를 위한 견고한 비즈니스 사례를 구축하십시오. 언제 투자해야 하는지, 그리고 그 성공을 어떻게 측정할 수 있는지 알아보십시오.
+tags:
+  - progressive-web-apps
+---
+
+Progressive Web Apps는 웹 사이트를 현대화하고 사용자의 새로운 기대에 적응하기 위한 많은 회사의 로드맵에 있습니다. 모든 새로운 개념 및 기술 기능과 마찬가지로, 그들은 다음과 같은 질문을 제기합니다. 고객이 원하는 것, 이것이 내 비즈니스를 얼마나 성장시킬 것인지, 기술적으로 실현 가능한 것은 무엇입니까?
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="이해관계자 식별", width="800", height="254" %}
+
+디지털 전략을 수립하기 위해 여러 이해 관계자가 참여하는 경우가 많습니다. 제품 관리자와 CMO는 각 기능의 비즈니스 영향에 대한 공동 소유자이고, CTO는 기술의 실현 가능성과 신뢰성을 평가하고, UX 연구원은 기능이 실제 응답하는지 확인합니다. 고객 문제.
+
+이 기사는 이 세 가지 질문에 답하고 PWA 프로젝트를 구성하는 데 도움이 되는 것을 목표로 합니다. 고객 요구 사항에서 시작하여 이를 PWA 기능으로 변환하고 각 기능이 테이블에 가져오는 비즈니스 영향을 측정하는 데 중점을 둡니다.
+
+## 고객의 요구사항을 해결하는 PWA {: #solve-customer-needs }
+
+제품을 만들 때 Google에서 따르고 싶은 한 가지 규칙은 "[사용자에게 초점을 맞추면 나머지는 모두 따를 것](https://www.google.com/about/philosophy.html)"입니다. *사용자 우선* 생각: 고객의 요구 사항은 무엇이며 PWA는 어떻게 제공합니까?
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="고객 요구 사항 파악", width="800", height="262" %}
+
+사용자 조사를 수행할 때 몇 가지 흥미로운 패턴을 찾습니다.
+
+- 사용자는 모바일에서 지연과 불안정성을 싫어합니다. 모바일 지연으로 인한 스트레스 수준은 [공포 영화를 보는 것과 비슷합니다](https://blog.hubspot.com/marketing/mobile-website-load-faster).
+- [스마트폰 사용자의 50%는 앱 다운로드를 원하지](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/) 않기 때문에 검색하거나 쇼핑할 때 회사의 모바일 사이트를 사용할 가능성이 더 큽니다.
+- 앱을 제거하는 가장 큰 이유 중 하나는[제한된 저장 공간입니다](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/) (설치된 PWA는 일반적으로 1MB 미만 사용).
+- [스마트폰 사용자는 제품에 대한 관련 추천](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/)을 제공하는 모바일 사이트에서 구매할 가능성이 더 높으며 스마트폰 사용자의 85%는 [모바일 알림이 유용](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/)하다고 말합니다.
+
+이러한 관찰에 따르면 고객은 빠르고 설치 가능하며 신뢰할 수 있고 매력적인(FIRE) 경험을 선호한다는 사실을 알게 되었습니다!
+
+## 최신 웹 기능을 활용하는 PWA {: #modern-capabilities }
+
+PWA는 사이트를 빠르고 설치 가능하며 안정적이고 매력적으로 만들어 고객의 요구 사항을 충족하는 것을 목표로 하는 일련의 모범 사례 및 최신 웹 API를 제공합니다.
+
+예를 들어 서비스 워커를 [사용하여 리소스](/service-workers-cache-storage/)를 캐시하고 [예측 프리페치](/precache-with-workbox/)를 수행하면 사이트가 더 빠르고 안정적으로 만들어집니다. 사이트를 설치 가능하게 만들면 고객이 홈 화면이나 앱 실행기에서 직접 액세스할 수 있는 쉬운 방법을 제공합니다. 그리고 [웹 푸시 알림](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices)과 같은 새로운 API를 사용하면 충성도를 생성하기 위해 개인화된 콘텐츠로 사용자를 쉽게 다시 참여시킬 수 있습니다.
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="새로운 기능으로 사용자 경험 개선", width="800", height="393" %}
+
+## 비즈니스 영향 이해 {: #business-impact }
+
+비즈니스 성공의 정의는 귀하의 활동에 따라 여러 가지가 될 수 있습니다.
+
+- 서비스에 더 많은 시간을 보내는 사용자
+- 리드의 이탈률 감소
+- 개선된 전환율
+- 재방문자 증가
+
+대부분의 PWA 프로젝트는 더 높은 모바일 전환율로 이어지며 수많은 [PWA 사례 연구](https://www.pwastats.com/)에서 더 많은 것을 배울 수 있습니다. 목표에 따라 비즈니스에 더 적합한 PWA의 일부 측면에 우선 순위를 지정할 수 있으며 완전히 문제가 없습니다. PWA 기능은 선별하여 별도로 실행할 수 있습니다.
+
+이러한 각각의 뛰어난 F.I.R.E 기능이 비즈니스에 미치는 영향을 측정해 보겠습니다.
+
+### 빠른 웹사이트의 비즈니스 영향 {: #impact-fast }
+
+[Deloitte Digital](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html)의 최근 연구에 따르면 페이지 속도는 비즈니스 지표에 상당한 영향을 미칩니다.
+
+모든 사용자의 중요한 사용자 여정을 최적화하기 위해 사이트 속도를 최적화하기 위해 할 수 있는 일은 많습니다. 어디서부터 시작해야 할지 모르겠다면 [빠른](/fast/) 섹션을 살펴보고 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)를 사용하여 가장 중요한 수정 사항의 우선 순위를 지정하십시오.
+
+속도 최적화 작업을 할 때 진행 상황을 모니터링하기 위해 적절한 도구와 측정항목을 사용하여 사이트 속도를 자주 측정하십시오. 예를 들어 [Lighthouse를](https://developer.chrome.com/docs/lighthouse/overview/) 사용하여 측정항목을 측정하고 ["좋은" 핵심 Web Vitals 점수](/vitals/#core-web-vitals)를 갖는 것과 같은 명확한 목표를 수정하고 [성능 예산을 빌드 프로세스에 통합](/incorporate-performance-budgets-into-your-build-tools/)합니다. 일일 측정값과 ["속도의 가치" 방법론](/value-of-speed/) 덕분에 증분 속도 변경의 영향을 분리하고 작업으로 생성된 추가 수익을 계산할 수 있습니다.
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="속도의 가치를 측정하고 이를 전환과 연관시키십시오", width="800", height="306" %}
+
+Ebay는 [속도를 2019년 회사 목표](/shopping-for-speed-on-ebay/)로 삼았습니다. 그들은 성능 예산, 임계 경로 최적화, 예측 프리페칭과 같은 기술을 사용했습니다. 그들은 검색 페이지 로딩 시간이 100밀리초 개선될 때마다 카드에 추가 횟수가 0.5% 증가한다는 결론을 내렸습니다.
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="로드 시간이 100ms 개선되어 eBay의 장바구니에 담기 수가 0.5% 증가했습니다.", width="800", height="184" %}
+
+### 설치 가능한 웹사이트의 비즈니스 영향 {: #impact-installable }
+
+사용자가 PWA를 설치하기를 원하는 이유는 무엇입니까? 귀하의 사이트를 더 쉽게 방문할 수 있도록 합니다. Android 앱 설치가 최소 3단계(Play 스토어로 리디렉션, 다운로드, 깔때기 상단에서 Android 앱 다시 실행)를 추가하는 경우 PWA 설치는 클릭 한 번으로 원활하게 완료되며 사용자가 다른 곳으로 이동하지 않습니다. 현재 전환 유입경로
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="설치 환경이 원활해야 합니다", width="800", height="239" %}
+
+일단 설치되면 사용자는 홈 화면의 아이콘에서 한 번의 클릭으로 실행하거나 앱 간에 전환할 때 앱 트레이에서 보거나 앱 검색 결과를 통해 찾을 수 있습니다. 우리는 이 앱을 동적 Discover-Launch-Switch라고 부르며 PWA를 설치 가능하게 만드는 것이 액세스 잠금을 해제하는 열쇠입니다.
+
+PWA는 장치의 친숙한 검색 및 실행 표면에서 액세스할 수 있을 뿐만 아니라 브라우저와 별도의 독립 실행형 환경에서 플랫폼별 앱과 똑같이 실행됩니다. 또한 앱 전환기 및 설정과 같은 OS 수준 장치 서비스의 이점을 누릴 수 있습니다.
+
+PWA를 설치한 사용자는 가장 참여도가 높은 사용자일 가능성이 높으며, 재방문 횟수가 많고 사이트에 머문 시간이 길며 전환율이 더 높으며 종종 모바일 장치의 플랫폼별 앱 사용자와 동등하게 일반 방문자보다 더 나은 참여 지표가 있습니다.
+
+PWA를 설치 가능하게 하려면 [기본 기준](/install-criteria/)을 충족해야 합니다. 이러한 기준을 충족하면 iOS를 포함한 [데스크톱 및 모바일 사용자 환경 내에서 설치](/promote-install/)를 홍보할 수 있습니다.
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="PWA는 어디에나 설치할 수 있습니다.", width="800", height="227" %}
+
+PWA 설치를 홍보하기 시작했다면 PWA를 설치하는 사용자 수와 PWA 사용 방법을 측정해야 합니다.
+
+사이트를 설치하는 사용자 수를 최대화하려면 [다양한](https://pwa-book.awwwards.com/chapter-4) 프로모션 메시지(예: "1초 안에 설치" 또는 "주문을 따르기 위한 바로 가기 추가"), 다양한 게재위치(헤더 배너, 인피드)를 테스트할 수 있습니다. , 유입경로의 다른 단계(방문한 두 번째 페이지 또는 예약 후)에서 제안해 보세요.
+
+사용자가 떠나는 위치와 유지율을 높이는 방법을 이해하기 위해 설치 유입경로를 4가지 방법으로 [측정](https://pwa-book.awwwards.com/chapter-8)할 수 있습니다.
+
+- 설치할 수 있는 사용자 수
+- UI 설치 프롬프트를 클릭한 사용자 수
+- 설치를 수락 및 거부한 사용자 수
+- 성공적으로 설치한 사용자 수
+
+모든 사용자에게 PWA 설치를 홍보하거나 소수의 사용자에게만 실험하여 보다 신중한 접근 방식을 사용할 수 있습니다.
+
+며칠 또는 몇 주가 지나면 비즈니스에 미치는 영향을 측정할 데이터가 이미 확보되어 있을 것입니다. 설치된 바로가기에서 오는 사람들의 행동은 무엇입니까? 그들은 더 많이 참여하고 더 많이 전환합니까?
+
+PWA를 설치한 사용자를 분류하려면 [`appinstalled` 이벤트를](/customize-install/#detect-install) 추적하고 JavaScript를 사용하여 [사용자가 독립 실행형 모드](/customize-install/#detect-launch-type)(설치된 PWA 사용을 나타냄)인지 확인하십시오. 그런 다음 이를 분석 추적을 위한 변수 또는 차원으로 사용합니다.
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="설치 가치 측정", width="800", height="253" %}
+
+Weekendesk의 [사례 연구](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf)는 흥미롭습니다. 그들은 설치율을 최대화하기 위해 방문한 두 번째 페이지에 설치를 제안하고 홈 화면의 아이콘을 통해 다시 오는 고객이 숙박을 예약할 가능성이 두 배 이상 높다는 것을 관찰했습니다.
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="설치된 사용자의 전환율이 2.5배 더 높았습니다.", width="800", height="201" %}
+
+설치는 사람들이 사이트를 다시 방문하게 하고 고객 충성도를 높이는 좋은 방법입니다. 프리미엄 사용자를 위한 경험을 개인화할 수도 있습니다.
+
+플랫폼별 앱이 이미 있더라도 먼저 테스트하여 앱을 제안한 다음 앱 설치 배너를 거부하거나 참여하지 않은 사람들을 위해 나중에 PWA를 푸시할 수 있습니다. "반 참여" 사용자 중 일부는 앱 스토어 기반 설치 임계값을 충족하지 못할 수 있습니다. 이 집단은 종종 더 가볍고 마찰이 적은 것으로 인식되는 PWA 설치 가능성으로 해결할 수 있습니다.
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="PWA는 반 참여 사용자에게 도달할 수 있습니다", width="800", height="229" %}
+
+### 신뢰할 수 있는 웹사이트의 비즈니스 영향 {: #impact-reliable }
+
+사용자가 오프라인일 때 제공되는 크롬 다이노 게임은 한 달에 [2억 7천만 번](https://www.blog.google/products/chrome/chrome-dino/) 이상 플레이됩니다. 이 인상적인 수치는 네트워크 안정성이 특히 인도, 브라질, 멕시코 또는 인도네시아와 같이 신뢰할 수 없거나 값비싼 모바일 데이터가 있는 시장에서 상당한 기회임을 보여줍니다.
+
+앱 스토어에서 설치된 앱이 실행되면 사용자는 인터넷 연결 여부에 관계없이 앱이 열리길 기대합니다. 프로그레시브 웹 앱도 다르지 않아야 합니다.
+
+최소한 네트워크 연결 없이는 앱을 사용할 수 없음을 사용자에게 알리는 간단한 오프라인 페이지가 제공되어야 합니다. [그런 다음 오프라인 상태에서 의미가 있는 몇 가지 기능](https://pwa-book.awwwards.com/chapter-6)을 제공하여 경험을 한 단계 더 발전시키는 것을 고려해 보세요. 예를 들어 티켓이나 탑승권, 오프라인 위시리스트, 콜센터 연락처 정보, 사용자가 최근에 본 기사 또는 레시피 등에 대한 액세스를 제공할 수 있습니다.
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="오프라인에서도 도움이 됩니다", width="800", height="243" %}
+
+[신뢰할 수 있는 사용자 경험](https://pwa-book.awwwards.com/chapter-6)을 구현했다면 이를 측정할 수 있습니다. 얼마나 많은 사용자가 어느 지역에서 오프라인으로 전환하고 있으며 네트워크가 복구되었을 때 웹사이트에 남아 있습니까?
+
+[오프라인 사용량은 사용자가 오프라인 또는 온라인 상태](https://pwa-book.awwwards.com/chapter-8)가 될 때 분석 핑을 기록하여 측정할 수 있습니다. 네트워크가 복구된 후 얼마나 많은 사용자가 웹사이트를 계속 탐색하는지 알려줍니다.
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivago는 온라인으로 돌아온 사용자의 67%가 탐색을 계속하는 것으로 확인했습니다", width="800", height="272" %}
+
+[Trivago 사례 연구](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)는 이것이 비즈니스 목표에 어떤 영향을 미칠 수 있는지 보여줍니다. 오프라인 기간에 세션이 중단된 사용자의 경우(사용자의 약 3%), 온라인으로 돌아온 사용자의 67%가 사이트를 계속 탐색했습니다.
+
+### 매력적인 웹사이트의 비즈니스 영향 {: #impact-engaging }
+
+웹 푸시 알림을 통해 사용자는 자신이 좋아하는 사이트에서 시기적절한 업데이트를 선택하고 관련성 있는 맞춤형 콘텐츠로 사용자를 효과적으로 재참여시킬 수 있습니다.
+
+하지만 조심하세요. 혜택을 노출하지 않고 처음 도착했을 때 웹 알림에 등록하도록 사용자에게 요청하면 스팸으로 인식되어 경험에 부정적인 영향을 미칠 수 있습니다. [알림을 요청할 때 모범 사례](https://developers.google.com/web/fundamentals/push-notifications/permission-ux)를 따르고 기차 지연, 가격 추적, 품절 제품 등과 같은 관련 사용을 통해 수락을 유도하십시오.
+
+기술적으로 [웹상의 푸시 알림](https://developers.google.com/web/fundamentals/push-notifications/)은 서비스 워커 덕분에 백그라운드에서 실행되며 캠페인 관리를 위해 구축된 시스템(예: Firebase)에서 전송되는 경우가 많습니다. 이 기능은 모바일(Android) 및 데스크톱 사용자에게 큰 비즈니스 가치를 제공합니다. 즉, 반복 방문을 증가시키고 결과적으로 판매 및 전환을 증가시킵니다.
+
+푸시 캠페인의 효과를 측정하려면 전체 유입경로를 측정해야 합니다.
+
+- 푸시 알림을 받을 수 있는 사용자 수
+- 맞춤 알림 UI 프롬프트를 클릭한 사용자 수
+- 푸시 알림 권한을 부여한 사용자 수
+- 푸시 알림을 받는 사용자 수
+- 알림에 참여하는 사용자 수
+- 알림에서 오는 사용자의 전환 및 참여
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="웹 푸시 알림 값 측정", width="800", height="255" %}
+
+웹 푸시 알림에 대한 훌륭한 사례 연구가 많이 있습니다. Carrefour는 버려진 카트로 사용자를 다시 참여시켜 [전환율을 4.5배로 늘렸습니다.](https://useinsider.com/case-studies/carrefour/)
+
+## PWA의 P: 점진적 출시, 기능별 기능 {: #feature-by-feature }
+
+PWA는 사용자가 Android/iOS/데스크톱 앱에서 좋아하는 모든 사용자 친화적인 기능과 결합된 방대한 웹 도달 범위의 이점을 누리는 최신 웹사이트입니다. 비즈니스 특성 및 우선 순위에 따라 독립적으로 구현할 수 있는 일련의 모범 사례 및 최신 웹 API를 활용합니다.
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="PWA를 점진적으로 실행", width="800", height="253" %}
+
+웹사이트의 현대화를 가속화하고 실제 PWA로 만들려면 민첩하게 기능별로 시작하는 것이 좋습니다. 먼저 사용자와 함께 어떤 기능이 가장 큰 가치를 제공하는지 조사한 다음 디자이너와 개발자에게 제공하고 마지막으로 PWA가 생성한 추가 비용을 정확히 측정하는 것을 잊지 마십시오.
diff --git a/src/site/content/ko/progressive-web-apps/index.md b/src/site/content/ko/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/ko/progressive-web-apps/install-criteria/index.md b/src/site/content/ko/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..44246c15dfe
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,49 @@
+---
+layout: post
+title: 설치가 가능하려면 무엇이 필요합니까?
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2
+
+  프로그레시브 웹 앱 설치 가능성 기준.
+tags:
+  - progressive-web-apps
+---
+
+프로그레시브 웹 앱(PWA)은 웹 기술을 사용하여 구축된 최신 고품질 애플리케이션입니다. PWA는 iOS/Android/데스크톱 앱과 유사한 기능을 제공하며 불안정한 네트워크 조건에서도 안정적이며 설치가 가능하여 사용자가 쉽게 찾고 사용할 수 있습니다.
+
+대부분의 사용자는 응용 프로그램 설치와 설치된 경험의 이점에 익숙합니다. 설치된 애플리케이션은 Mac OS X의 애플리케이션 폴더, Windows의 시작 메뉴, Android 및 iOS의 홈 화면과 같은 운영 체제 시작 화면에 나타납니다. 설치된 응용 프로그램은 활동 전환기, Spotlight와 같은 장치 검색 엔진 및 콘텐츠 공유 시트에도 표시됩니다.
+
+대부분의 브라우저는 PWA(Progressive Web App)가 특정 기준을 충족할 때 설치할 수 있음을 사용자에게 나타냅니다. 표시기의 예로는 주소 표시줄의 설치 버튼이나 오버플로 메뉴의 설치 메뉴 항목이 있습니다.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="설치 표시기가 표시된 검색주소창의 스크린샷.", width="800", height="307" %}<figcaption> 브라우저 제공 설치 프로모션(데스크톱)</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="브라우저 제공 설치 프로모션 스크린샷", width="800", height="307" %}<figcaption> 브라우저 제공 설치 프로모션(모바일)</figcaption></figure>
+</div>
+
+또한 기준이 충족되면 많은 브라우저에서 `beforeinstallprompt` 이벤트를 실행하여 앱 내에서 설치 흐름을 트리거하는 사용자 지정 인앱 UX를 제공할 수 있습니다.
+
+## 설치 기준 {: #criteria }
+
+`beforeinstallprompt` 이벤트를 실행하고 브라우저 내 설치 프로모션을 표시하기 전에 다음 기준을 충족해야 합니다.
+
+- 웹 앱이 아직 설치되지 않음
+- 사용자 참여 휴리스틱 충족
+- HTTPS를 통해 제공
+- 다음을 포함하는 [웹 앱 매니페스트](/add-manifest/)를 포함합니다.
+    - `short_name` 또는 `name`
+    - `icons` - 192px 및 512px 아이콘을 포함해야 합니다.
+    - `start_url`
+    - `display` `fullscreen` , `standalone` 또는 `minimal-ui` 중 하나여야 합니다.
+    - `prefer_related_applications`이 존재하거나 `false`여서는 안 됩니다.
+- `fetch` 핸들러에 서비스 워커를 등록합니다.
+
+다른 브라우저는 설치 기준이 비슷하지만 약간의 차이가 있을 수 있습니다. 자세한 내용은 해당 사이트를 확인하십시오.
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/progressive-web-apps#requirements)
+- [파이어폭스](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
+- [오페라](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} Android에서 웹 앱 매니페스트에 `related_applications` 및 `"prefer_related_applications": true` 포함되어 있으면 사용자는 Google Play 스토어로 이동하고 [대신 지정된 Android 앱을 설치하라는 메시지가 표시](https://developer.chrome.com/blog/app-install-banners-native/)됩니다. {% endAside %}
diff --git a/src/site/content/ko/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/ko/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..f2e8d05cc07
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: 오프라인 대체 페이지 만들기
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: 앱을 위한 간단한 오프라인 환경을 만드는 방법을 알아보세요.
+tags:
+  - progressive-web-apps
+---
+
+Google Assistant 앱, Slack 앱, Zoom 앱 및 휴대전화나 컴퓨터에 있는 거의 모든 플랫폼별 앱의 공통점은 무엇입니까? 맞습니다. 그들은 항상 적어도 당신에게 *무언가*를 줍니다. 네트워크에 연결되어 있지 않아도 어시스턴트 앱을 열거나 Slack에 들어가거나 Zoom을 실행할 수 있습니다. 특히 의미 있는 것을 얻지 못하거나 달성하고자 하는 것을 달성하지 못할 수도 있지만 적어도 *무언가*를 얻고 앱이 제어할 수 있습니다.
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="오프라인 시 Google Assistant 모바일 앱.", width="621", height="1344" %}<figcaption id="fig-assistant"> Google Assistant.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="오프라인 시 Slack 모바일 앱.", width="621", height="1344" %}<figcaption id="fig-slack"> Slack.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="오프라인 시 Zoom 모바일 앱.", width="621", height="1344" %}<figcaption id="fig-zoom"> Zoom.</figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">플랫폼별 앱을 사용하면 네트워크에 연결되어 있지 않아도 아무것도 얻을 수 없습니다.</figcaption>
+
+
+
+대조적으로, 웹에서는 전통적으로 오프라인일 때 아무것도 얻지 못합니다. Chrome은 [오프라인 공룡 게임](https://www.blog.google/products/chrome/chrome-dino/)을 제공하지만 그게 전부입니다.
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="오프라인 공룡 게임을 보여주는 Google Chrome모바일 앱.", width="800", height="1731" %}<figcaption id="fig-chrome-ios"> Google Chrome for iOS.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="오프라인 공룡 게임을 보여주는 Google Chrome 데스크톱 앱.", width="800", height="607" %}<figcaption id="fig-chrome"> Google Chrome for macOS.</figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">웹에서 네트워크 연결이 없으면 기본적으로 아무 것도 얻지 못합니다.</figcaption>
+
+
+
+## 커스텀 서비스 워커가 있는 오프라인 대체 페이지
+
+하지만 반드시 그래야 하는 것은 아닙니다. [서비스 워커와 Cache Storage API](/service-workers-cache-storage/) 덕분에 사용자에게 맞춤형 오프라인 경험을 제공할 수 있습니다. 이것은 사용자가 현재 오프라인 상태라는 정보가 포함된 단순한 브랜드 페이지일 수 있지만, 예를 들어 수동 **재연결** 버튼과 자동 재연결 시도 카운트다운이 있는 유명한 [trivago 오프라인 미로 게임](https://www.trivago.com/offline)과 같은 보다 창의적인 솔루션일 수도 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="trivago 오프라인 미로가 있는 trivago 오프라인 페이지.", width="800", height="616" %}<figcaption> trivago 오프라인 미로.</figcaption></figure>
+
+### 서비스 워커 등록
+
+이를 가능하게 하는 방법은 서비스 워커를 통하는 것입니다. 아래 코드 샘플과 같이 메인 페이지에서 서비스 워커를 등록할 수 있습니다. 일반적으로 앱이 로드되면 이 작업을 수행합니다.
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### 서비스 워커 코드
+
+실제 서비스 워커 파일의 내용은 언뜻 보기에는 다소 복잡해 보일 수 있지만 아래 샘플의 주석을 보면 문제가 해결될 것입니다. *핵심 아이디어는 실패한* 탐색 요청에만 제공되는 `offline.html`이라는 파일을 미리 캐시하고 브라우저가 다른 모든 경우를 처리하도록 하는 것입니다.
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+// This variable is intentionally declared and unused.
+// Add a comment for your linter if you want:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
+```
+
+### 오프라인 폴백 페이지
+
+`offline.html` 파일은 창의력을 발휘하고 필요에 맞게 조정하고 브랜딩을 추가할 수 있는 곳입니다. 아래의 예는 가능한 최소한의 것을 보여줍니다. [`online` 이벤트](https://developer.mozilla.org/docs/Web/API/Window/online_event) 및 일반 서버 폴링을 기반으로 한 자동 재로드를 모두 보여줍니다.
+
+{% Aside 'gotchas' %} 오프라인 페이지에 필요한 모든 리소스를 캐시해야 합니다. 이를 처리하는 한 가지 방법은 모든 것을 인라인하는 것이므로 오프라인 페이지는 독립적입니다. 이것이 내가 아래의 예에서 하는 일입니다. {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>You are offline</h1>
+
+    <p>Click the button below to try reloading.</p>
+    <button type="button">⤾ Reload</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // Manual reload feature.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Listen to changes in the network state, reload when online.
+      // This handles the case when the device is completely offline.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Check if the server is responding and reload the page if it is.
+      // This handles the case when the device is online, but the server
+      // is offline or misbehaving.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Verify we get a valid response from the server
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // Unable to connect to the server, ignore.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## 데모
+
+아래에 포함된 [데모](https://offline-fallback-demo.glitch.me/index.html)에서 오프라인 폴백 페이지가 작동하는 것을 볼 수 있습니다. 관심이 있는 경우 Glitch에서 [소스 코드](https://glitch.com/edit/#!/offline-fallback-demo)를 탐색할 수 있습니다.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 앱을 설치 가능하게 만드는 방법에 대한 참고 사항
+
+사이트에 오프라인 폴백 페이지가 있으므로 다음 단계에 대해 궁금해할 수 있습니다. 앱을 설치 가능하게 만들려면 [웹 앱 매니페스트](/add-manifest/)를 추가하고 선택적으로 [설치 전략](/define-install-strategy/)을 제시해야 합니다.
+
+### Workbox.js로 오프라인 폴백 페이지 제공에 대한 참고 사항
+
+[Workbox.js](https://developer.chrome.com/docs/workbox/)에 대해 들어본 적이 있을 것입니다. Workbox.js는 웹 앱에 오프라인 지원을 추가하기 위한 JavaScript 라이브러리 세트입니다. 더 적은 서비스 워커 코드를 직접 작성하려는 경우 [오프라인 페이지](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only)에만 Workbox.js 레시피를 사용할 수 있습니다.
+
+다음으로 [앱의 설치 전략을 정의하는 방법](/define-install-strategy/)을 알아보세요.
diff --git a/src/site/content/ko/progressive-web-apps/promote-install/index.md b/src/site/content/ko/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..46056d40de6
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,192 @@
+---
+layout: post
+title: PWA 설치 촉진 패턴
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: PWA 설치를 촉진하고 모범 사례를 홍보하는 방법.
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+PWA(Progressive Web App)를 설치하면 사용자가 더 쉽게 찾고 사용할 수 있습니다. 브라우저 홍보를 사용하더라도 일부 사용자는 자신이 PWA를 설치할 수 있다는 사실을 인식하지 못하므로 PWA를 홍보하고 설치를 활성화하는 데 사용할 수 있는 인앱 경험을 제공하는 것이 도움이 될 수 있습니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="PWA의 간단한 설치 버튼 스크린샷", width="800", height="368" %}<figcaption> PWA 내에서 제공되는 간단한 설치 버튼입니다.</figcaption></figure>
+
+이 목록이 완전한 것은 아니지만 PWA 설치를 촉진하는 다양한 방법을 위한 출발점을 제공합니다. 사용하는 *패턴*에 관계 없이 [나만의 인앱 설치 경험을 제공하는 방법](/customize-install/)에 나온 대로 설치 흐름을 트리거하는 같은 코드로 이어집니다.
+
+<div class="w-clearfix"> </div>
+
+## PWA 설치 홍보 모범 사례 {: #best-practices }
+
+사이트에서 사용하는 홍보 패턴에 관계없이 적용되는 몇 가지 모범 사례가 있습니다.
+
+- 사용자 여정의 흐름을 벗어나 프로모션을 유지하세요. 예를 들어, PWA 로그인 페이지에서 클릭 유도문안을 로그인 양식과 제출 버튼 아래에 두십시오. 홍보 패턴이 사용자에게 방해가 되도록 사용하면 PWA의 사용성을 감소시키고 참여 지표에 부정적인 영향을 미칩니다.
+- 홍보를 취소하거나 거부할 수 있는 기능을 포함합니다. 사용자가 이 작업을 수행하는 경우 사용자의 기본 설정을 기억하고 로그인하거나 구매를 완료한 경우와 같이 콘텐츠와 사용자의 관계에 변경 사항이 있는 경우에만 다시 확인하십시오.
+- PWA의 다른 부분에서 이러한 기술 중 하나 이상을 결합하되 설치 홍보로 사용자를 압도하거나 짜증나게 하지 않도록 주의하십시오.
+- [`beforeinstallprompt` 이벤트](/customize-install/#beforeinstallprompt)가 발생한 **후**에 만 프로모션을 표시합니다.
+
+## 자동 브라우저 홍보 {: #browser-promotion }
+
+[특정 기준](/install-criteria/) 이 충족되면 대부분의 브라우저에서 사용자에게 PWA를 설치할 수 있음을 자동으로 표시합니다. 예를 들어 데스크톱 Chrome은 검색주소창에 설치 버튼을 표시합니다.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="설치 표시기가 표시된 검색주소창의 스크린샷.", width="800", height="307" %}<figcaption> 브라우저 제공 설치 홍보(데스크톱)</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="브라우저 제공 설치 홍보 스크린샷", width="800", height="307" %}<figcaption> 브라우저 제공 설치 홍보(모바일)</figcaption></figure>
+</div>
+
+<div class="w-clearfix"> </div>
+
+Android용 Chrome은 사용자에게 미니 정보 표시줄을 표시하지만 이는 `beforeinstallprompt` 이벤트에서 `preventDefault()`을 호출하면 막을 수 있습니다. `preventDefault()`를 호출하지 않으면 사용자가 사이트를 처음 방문할 때 배너가 표시되고 Android에서 설치 가능성 기준을 충족한 다음 약 90일 후에 다시 표시됩니다.
+
+## 애플리케이션 UI 홍보 패턴 {: #app-ui-patterns }
+
+애플리케이션 UI 홍보 패턴은 거의 모든 종류의 PWA에 사용할 수 있으며 사이트 탐색 및 배너와 같은 애플리케이션 UI에 표시됩니다. 다른 유형의 홍보 패턴과 마찬가지로 사용자 여정의 중단을 최소화하려면 사용자의 컨텍스트를 인식하는 것이 중요합니다.
+
+홍보 UI를 실행할 때를 고려한 사이트는 더 많은 설치를 달성하고 설치에 관심이 없는 사용자의 여정을 방해하지 않습니다.
+
+<div class="w-clearfix"> </div>
+
+### 간단한 설치 버튼 {: #simple-button }
+
+가장 간단한 UX는 웹 콘텐츠의 적절한 위치에 '설치' 또는 '앱 가져오기' 버튼을 포함하는 것입니다. 버튼이 다른 중요한 기능을 차단하지 않고 애플리케이션을 통해 사용자의 여정을 방해하지 않는지 확인합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="사용자 지정 설치 버튼", width="800", height="448" %} <figcaption> 간단한 설치 버튼 </figcaption></figure>
+
+<div class="w-clearfix"> </div>
+
+### 고정 헤더 {: #header }
+
+이것은 사이트 헤더의 일부인 설치 버튼입니다. 다른 헤더 콘텐츠에는 종종 로고 및 햄버거 메뉴와 같은 사이트 브랜딩이 포함됩니다. 헤더는 사이트의 기능과 사용자 요구에 따라 `position:fixed`이거나 아닐 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="헤더의 사용자 지정 설치 버튼", width="800", height="448" %}<figcaption> 헤더의 사용자 정의 설치 버튼</figcaption></figure>
+
+적절하게 사용할 경우 사이트 헤더에서 PWA 설치를 홍보하는 것은 가장 충성도가 높은 고객이 귀하의 경험으로 더 쉽게 돌아올 수 있도록 하는 좋은 방법입니다. PWA 헤더의 픽셀은 소중하므로 설치 클릭 유도문안의 크기가 적절하고 다른 가능한 헤더 콘텐츠보다 중요하며 방해가 되지 않는지 확인하십시오.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="헤더의 사용자 지정 설치 버튼", width="800", height="430" %} <figcaption> 헤더의 사용자 정의 설치 버튼</figcaption></figure>
+
+다음을 확인하십시오.
+
+- `beforeinstallprompt`가 실행되지 않는 한 설치 버튼을 표시하지 마십시오.
+- 사용자를 위해 설치된 사용 사례의 가치를 평가하십시오. 혜택을 받을 가능성이 있는 사용자에게만 프로모션을 제공하려면 선택적 타겟팅을 고려하십시오.
+- 소중한 헤더 공간을 효율적으로 사용하십시오. 헤더에서 사용자에게 제공하는 데 도움이 될 다른 것이 무엇인지 고려하고 다른 옵션에 비해 설치 프로모션의 우선 순위를 평가하십시오.
+
+<div class="w-clearfix"> </div>
+
+### 탐색 메뉴 {: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="탐색 메뉴의 사용자 지정 설치 버튼", width="800", height="1117" %}<figcaption> 슬라이드 아웃 탐색 메뉴에 설치 버튼/프로모션을 추가합니다.</figcaption></figure>
+
+탐색 메뉴는 메뉴를 여는 사용자가 경험에 대한 참여를 표시하기 때문에 앱 설치를 홍보하기에 좋은 장소입니다.
+
+다음을 확인하십시오.
+
+- 중요한 탐색 콘텐츠를 방해하지 마십시오. PWA 설치 홍보를 다른 메뉴 항목 아래에 두십시오.
+- 사용자가 PWA를 설치하면 이점을 얻을 수 있는 이유에 대한 관련성 있는 짧은 프레젠테이션을 제공합니다.
+
+<div class="w-clearfix"> </div>
+
+### 방문 페이지 {: #landing }
+
+랜딩 페이지의 목적은 제품과 서비스를 홍보하는 것이므로 PWA 설치의 이점을 홍보하는 데 적합합니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="방문 페이지의 사용자 지정 설치 프롬프트", width="800", height="1117" %}<figcaption> 방문 페이지의 사용자 지정 설치 프롬프트</figcaption></figure>
+
+먼저 사이트의 가치 제안을 설명한 다음 방문자에게 설치를 통해 얻을 수 있는 이점을 알립니다.
+
+다음을 확인하십시오.
+
+- 방문자에게 가장 중요한 기능을 홍보하고 방문자를 방문 페이지로 유도했을 수 있는 키워드를 강조합니다.
+- 눈길을 사로잡는 설치 홍보와 클릭 유도문안을 만들되 가치 제안을 명확하게 한 후에만 하십시오. 이것은 결국 귀하의 방문 페이지입니다.
+- 사용자가 대부분의 시간을 보내는 앱 부분에 설치 홍보를 추가하는 것이 좋습니다.
+
+<div class="w-clearfix"> </div>
+
+### 배너 설치 {: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="페이지 상단에 배너를 맞춤 설치합니다.", width="800", height="1000" %}<figcaption> 페이지 상단의 닫을 수 있는 배너입니다.</figcaption></figure>
+
+대부분의 사용자는 모바일 환경에서 설치 배너를 접하고 배너가 제공하는 상호 작용에 익숙합니다. 배너는 사용자에게 방해가 될 수 있으므로 신중하게 사용해야 합니다.
+
+다음을 확인하십시오.
+
+- 배너를 표시하기 전에 사용자가 귀하의 사이트에 관심을 보일 때까지 기다리십시오. 사용자가 배너를 닫은 경우 사용자가 전자 상거래 사이트에서 구매하거나 계정에 가입하는 것과 같이 콘텐츠에 대한 더 높은 참여 수준을 나타내는 전환 이벤트를 트리거하지 않는 한 배너를 다시 표시하지 마십시오.
+- 배너에 PWA를 설치하는 것의 가치에 대한 간략한 설명을 제공하십시오. 예를 들어 PWA 설치는 사용자 장치의 저장소를 거의 사용하지 않거나 스토어 리디렉션 없이 즉시 설치된다는 점을 언급하여 iOS/Android 앱과 구별할 수 있습니다.
+
+<div class="w-clearfix"> </div>
+
+### 임시 UI {: #temporary-ui }
+
+[스낵바](https://material.io/components/snackbars/) 디자인 패턴과 같은 임시 UI는 사용자에게 알리고 쉽게 작업을 완료할 수 있도록 합니다. 이 경우 앱을 설치하십시오. 이러한 종류의 UI 패턴은 적절하게 사용하면 사용자 흐름을 방해하지 않으며 일반적으로 사용자가 무시하면 자동으로 해제됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="스낵바로 배너를 맞춤 설치합니다.", width="800", height="448" %}<figcaption> PWA를 설치할 수 있음을 나타내는 닫을 수 있는 스낵바입니다.</figcaption></figure>
+
+몇 번의 참여, 앱과의 상호 작용 후에 스낵바를 표시합니다. 페이지 로드 시 또는 컨텍스트 외부에 나타나면 쉽게 놓치거나 인지 과부하로 이어질 수 있습니다. 이런 일이 발생하면 사용자는 단순히 보이는 모든 것을 무시할 것입니다. 그리고 사이트의 신규 사용자가 PWA를 설치할 준비가 되지 않았을 수 있음을 기억하십시오. 따라서 이 패턴을 사용하기 전에 사용자로부터 강력한 관심 신호(예: 반복 방문, 사용자 로그인 또는 유사한 전환 이벤트)가 있을 때까지 기다리는 것이 가장 좋습니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="배너를 스낵바로 맞춤 설치합니다.", width="800", height="424" %}<figcaption> PWA를 설치할 수 있음을 나타내는 닫을 수 있는 스낵바입니다.</figcaption></figure>
+
+다음을 확인하십시오.
+
+- 사용자가 보고 반응할 수 있는 충분한 시간을 주고 방해가 되지 않도록 4~7초 동안 스낵바를 표시합니다.
+- 배너 등과 같은 다른 임시 UI 위에 표시되지 않도록 합니다.
+- 이 패턴을 사용하기 전에 사용자로부터 강력한 관심 신호(예: 반복 방문, 사용자 로그인 또는 유사한 전환 이벤트)가 나타날 때까지 기다리세요.
+
+<div class="w-clearfix"> </div>
+
+## 전환 후
+
+사용자 전환 이벤트 직후(예: 전자 상거래 사이트에서 구매한 후)는 PWA 설치를 홍보할 수 있는 좋은 기회입니다. 사용자는 분명히 귀하의 콘텐츠에 참여하고 있으며 전환은 종종 사용자가 귀하의 서비스에 다시 참여할 것이라는 신호입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="전환 후 설치 홍보 스크린샷", width="800", height="448" %}<figcaption> 사용자가 구매를 완료한 후 프로모션을 설치합니다.</figcaption></figure>
+
+### 여행 예약 또는 체크아웃 {: #journey }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="사용자 여정 후 홍보를 설치하세요.", width="800", height="1419" %}<figcaption> 사용자 여정 후 홍보를 설치하세요.</figcaption></figure>
+
+일반적인 예약 또는 결제 흐름과 같이 순차적인 여정 중 또는 이후에 설치 홍보를 표시합니다. 사용자가 여정을 완료한 후 홍보를 표시하는 경우 여정이 완료된 후 홍보를 더 눈에 띄게 만들 수 있습니다.
+
+다음을 확인하십시오.
+
+- 관련 클릭 유도문안을 포함합니다. 앱을 설치하면 어떤 사용자가 혜택을 볼 수 있으며 그 이유는 무엇입니까? 현재 진행 중인 여정과 어떤 관련이 있습니까?
+- 브랜드에 설치된 앱 사용자를 위한 고유한 제안이 있는 경우 여기에 언급해야 합니다.
+- 홍보가 여정의 다음 단계에 방해가 되지 않도록 하십시오. 그렇지 않으면 여정 완료율에 부정적인 영향을 미칠 수 있습니다. 위의 전자 상거래 예에서 체크아웃에 대한 주요 클릭 유도문안이 앱 설치 홍보 위에 있는 방법을 확인하십시오.
+
+<div class="w-clearfix"> </div>
+
+### 가입, 로그인 또는 로그아웃 흐름 {: #sign-up}
+
+이 프로모션은 프로모션 카드가 더 눈에 띄게 될 수 있는 [여행](#journey) 프로모션 패턴의 특별한 경우입니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="가입 페이지의 사용자 지정 설치 버튼입니다.", width="800", height="1117" %}<figcaption> 가입 페이지의 사용자 지정 설치 버튼.</figcaption></figure>
+
+이러한 페이지는 일반적으로 PWA의 가치 제안이 이미 확립된 참여 사용자만 볼 수 있습니다. 또한 이러한 페이지에 배치할 다른 유용한 콘텐츠가 많지 않은 경우가 많습니다. 결과적으로 방해가 되지 않는 한 더 큰 클릭 유도문안을 만드는 것이 덜 방해가 됩니다.
+
+다음을 확인하십시오.
+
+- 가입 양식 내에서 사용자의 여정을 방해하지 마십시오. 다단계 프로세스인 경우 사용자가 여정을 완료할 때까지 기다리는 것이 좋습니다.
+- 가입한 사용자와 가장 관련성이 높은 기능을 홍보합니다.
+- 앱의 로그인 영역 내에 추가 설치 홍보를 추가하는 것을 고려하십시오.
+
+<div class="w-clearfix"> </div>
+
+## 인라인 프로모션 패턴
+
+인라인 홍보 기술은 홍보와 사이트 콘텐츠를 결합합니다. 이것은 종종 절충점이 있는 애플리케이션 UI 내에서의 홍보보다 더 섬세합니다. 관심 있는 사용자가 알 수 있을 만큼 홍보가 눈에 띄기를 원하지만 사용자 경험의 품질을 떨어뜨리는 정도는 아닙니다.
+
+### 인피드 {: #in-feed }
+
+인피드 설치 프로모션은 PWA의 뉴스 기사 또는 기타 정보 카드 목록 사이에 나타납니다.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="콘텐츠 피드 내 홍보 설치", width="800", height="1000" %}<figcaption> 콘텐츠 피드 내에 홍보를 설치합니다.</figcaption></figure>
+
+여러분의 목표는 사용자이 즐기는 콘텐츠에 더 편리하게 액세스하는 방법을 보여주는 것입니다. 사용자에게 도움이 될 기능을 홍보하는 데 중점을 둡니다.
+
+다음을 확인하십시오.
+
+- 사용자들이 짜증내지 않도록 위해 홍보의 빈도를 제한하십시오.
+- 사용자에게 홍보를 취소할 수 있는 기능을 제공합니다.
+- 사용자가 닫기로 한 경우 선택을 기억하십시오.
diff --git a/src/site/content/ko/progressive-web-apps/pwa-checklist/index.md b/src/site/content/ko/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..cc3bb7ecc89
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,268 @@
+---
+layout: post
+title: 무엇이 좋은 프로그레시브 웹 앱을 만드는가?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: |2
+
+  무엇이 좋은 또는 훌륭한 프로그레시브 웹 앱을 만드는가?
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+프로그레시브 웹 앱(PWA)은 최신 API로 구축 및 향상되어 단일 코드베이스로 *누구에게나 어디서나 모든 장치에 도달하면서 향상된 기능, 안정성 및 설치 가능성을 제공합니다.* 최상의 경험을 만드는 데 도움이 되도록 [핵심](#core) 및 [최적](#optimal)의 체크리스트와 권장 사항을 사용하여 안내하십시오.
+
+## 핵심 프로그레시브 웹 앱 체크리스트 {: #core }
+
+프로그레시브 웹 앱 체크리스트는 크기나 입력 유형에 관계없이 모든 사용자가 앱을 설치하고 사용할 수 있도록 하는 요소를 설명합니다.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+빠르게 시작하고 빠르게 유지
+
+성능이 좋은 사이트는 성능이 떨어지는 사이트보다 사용자를 더 잘 참여시키고 유지하기 때문에 성능은 모든 온라인 경험의 성공에 중요한 역할을 합니다. 사이트는 사용자 중심의 성능 측정항목을 최적화하는 데 중점을 두어야 합니다.
+
+{% endDetailsSummary %}
+
+성능이 좋은 사이트는 성능이 저조한 사이트보다 사용자를 더 잘 참여시키고 유지하기 때문에 성능은 모든 온라인 경험의 성공에 중요한 역할을 합니다. 사이트는 사용자 중심의 성능 측정항목을 최적화하는 데 중점을 두어야 합니다.
+
+#### 이유
+
+사용자가 앱을 *사용*하도록 하려면 속도가 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 늘어나면 사용자가 이탈할 확률은 123% 증가합니다. 성능은 `load` 이벤트에서 그치지 않습니다. 사용자는 버튼 클릭과 같은 상호 작용이 입력되었는지 여부를 궁금해해서는 안 됩니다. 스크롤과 애니메이션이 부드럽게 느껴져야 합니다. 성능은 사용자가 애플리케이션을 인식하는 방식에서 실질적인 성능에 이르기까지 전체 경험에 영향을 줍니다.
+
+모든 응용 프로그램의 요구 사항은 다르지만 Lighthouse의 성능 감사는 [RAIL 사용자 중심 성능 모델을](/rail/) 기반으로 하며 이러한 감사에서 높은 점수를 받으면 사용자가 즐거운 경험을 할 가능성이 높아집니다. [PageSpeed Insights](https://pagespeed.web.dev/) 또는 [Chrome 사용자 경험 보고서](https://developer.chrome.com/docs/crux/)를 사용하여 웹 앱에 대한 실제 성능 데이터를 얻을 수도 있습니다.
+
+#### 방법
+
+[빠른 로드 시간](/fast/)에 대한 가이드를 따라 PWA를 빠르게 시작하고 빠르게 유지하는 방법을 알아보세요.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+모든 브라우저에서 작동
+
+사용자는 웹 앱을 설치하기 전에 선택한 모든 브라우저를 사용하여 웹 앱에 액세스할 수 있습니다.
+
+{% endDetailsSummary%}
+
+사용자는 웹 앱을 설치하기 전에 선택한 모든 브라우저를 사용하여 웹 앱에 액세스할 수 있습니다.
+
+#### 이유
+
+프로그레시브 웹 앱은 먼저 웹 앱이며, 이는 브라우저 중 하나에서가 아니라 여러 브라우저에서 작동해야 함을 의미합니다.
+
+[탄력적인 웹 디자인](https://resilientwebdesign.com/)에서 Jeremy Keith이 한 말에 따르면 이를 수행하는 효과적인 방법은 핵심 기능을 식별하고 가능한 가장 간단한 기술을 사용하여 해당 기능을 사용할 수 있도록 한 다음 가능한 경우 경험을 향상시키는 것입니다. 대부분의 경우 이는 핵심 기능을 만들기 위해 HTML로 시작하고 CSS 및 JavaScript로 사용자 경험을 향상하여 보다 매력적인 경험을 만드는 것을 의미합니다.
+
+양식 제출의 예를 보겠습니다. 이를 구현하는 가장 간단한 방법은 `POST` 요청을 제출하는 HTML 양식입니다. 이를 빌드한 후 JavaScript로 경험을 향상하여 양식 유효성 검사를 수행하고 AJAX를 통해 양식을 제출하여 이를 지원할 수 있는 사용자의 경험을 개선할 수 있습니다.
+
+사용자가 다양한 장치와 브라우저에서 귀하의 사이트를 경험하게 될 것임을 고려하십시오. 스펙트럼의 상단을 단순히 타겟팅할 수는 없습니다. 기능 감지를 사용하면 현재 존재하지 않을 수 있는 브라우저 및 장치를 사용하는 사용자를 포함하여 가장 광범위한 잠재 사용자에게 유용한 경험을 제공할 수 있습니다.
+
+#### 방법
+
+Jeremy Keith의 [탄력적인 웹 디자인](https://resilientwebdesign.com/)은 이 크로스 브라우저, 진보적 방법론에서 웹 디자인에 대해 생각하는 방법을 설명하는 훌륭한 리소스입니다.
+
+#### 추가 읽기
+
+- A List Apart의 [점진적 개선의 이해](https://alistapart.com/article/understandingprogressiveenhancement/)는 이 주제에 대한 좋은 입문서입니다.
+- Smashing Magazine의 [점진적 개선: 그것이 무엇이며 어떻게 사용합니까?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) 실용적인 소개와 고급 주제에 대한 링크를 제공합니다.
+- MDN에는 기능을 직접 쿼리하여 기능을 감지하는 방법에 대해 설명하는 [기능 감지 구현](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)이라는 기사가 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+모든 화면 크기에 대응
+
+사용자는 모든 화면 크기에서 PWA를 사용할 수 있으며 모든 콘텐츠는 모든 뷰포트 크기에서 사용할 수 있습니다.
+
+{% endDetailsSummary %}
+
+사용자는 모든 화면 크기에서 PWA를 사용할 수 있으며 모든 콘텐츠는 모든 뷰포트 크기에서 사용할 수 있습니다.
+
+#### 이유
+
+장치는 다양한 크기로 제공되며 사용자는 동일한 장치에서도 다양한 크기로 응용 프로그램을 사용할 수 있습니다. 따라서 콘텐츠가 표시 영역 내에 들어갈 뿐만 아니라 사이트의 모든 기능과 콘텐츠를 표시 영역 크기에 관계없이 사용할 수 있도록 하는 것이 중요합니다.
+
+사용자가 완료하려는 작업과 액세스하려는 콘텐츠는 뷰포트 크기에 따라 변경되지 않습니다. 콘텐츠는 다양한 뷰포트 크기로 재배열될 수 있으며 모든 것이 어떤 식으로든 있어야 합니다. 사실, Luke Wroblewski가 그의 책 Mobile First에서 말했듯이, 크게 시작한 다음 축소하는 것이 아니라 작게 시작하여 확장하는 방식이 실제로 사이트 디자인을 개선할 수 있습니다.
+
+> 모바일 장치를 사용하려면 소프트웨어 개발 팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중해야 합니다. 320 x 480 픽셀 화면에는 불필요한 불필요한 요소를 위한 공간이 없습니다. 우선순위를 두어야 합니다.
+
+#### 방법
+
+[Ethan Marcotte의 글](https://alistapart.com/article/responsive-web-design/), 이와 관련된 [중요한 개념 모음](https://snugug.com/musings/principles-responsive-web-design/), 다양한 책 및 대화를 포함하여 반응형 디자인에 대한 많은 리소스가 있습니다. 이 논의를 반응형 디자인의 콘텐츠 측면으로 좁히기 위해 [콘텐츠 우선 디자인](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c)과 [콘텐츠 출력형 반응형 레이아웃](https://alistapart.com/article/content-out-layout/)에 대해 알아볼 수 있습니다. 마지막으로 모바일에 중점을 두고 는 강의이지만 [Josh Clark의 모바일과 관련된 7가지 치명적인 미신](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca)은 모바일과 마찬가지로 반응형 사이트의 소규모 보기와 관련성이 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+맞춤형 오프라인 페이지 제공
+
+사용자가 오프라인일 때 PWA에 유지하면 기본 브라우저 오프라인 페이지로 돌아가는 것보다 더 원활한 환경을 제공합니다.
+
+{% endDetailsSummary %}
+
+사용자가 오프라인일 때 PWA에 유지하면 기본 브라우저 오프라인 페이지로 돌아가는 것보다 더 원활한 환경을 제공합니다.
+
+#### 이유
+
+사용자는 설치된 앱이 연결 상태에 관계없이 작동하기를 기대합니다. 플랫폼전용 앱은 오프라인일 때 빈 페이지를 표시하지 않으며 프로그레시브 웹 앱은 브라우저 기본 오프라인 페이지를 표시하지 않아야 합니다. 사용자가 캐시되지 않은 URL로 이동할 때와 사용자가 연결이 필요한 기능을 사용하려고 할 때 사용자 지정된 오프라인 경험을 제공하면 웹 경험이 실행 중인 장치의 일부인 것처럼 느낄 수 있습니다.
+
+#### 방법
+
+서비스 워커의 `install` 이벤트 중에 나중에 사용할 수 있도록 사용자 지정 오프라인 페이지를 미리 캐시할 수 있습니다. 사용자가 오프라인 상태가 되면 미리 캐시된 사용자 지정 오프라인 페이지로 응답할 수 있습니다. 맞춤형 [오프라인 페이지 샘플](https://googlechrome.github.io/samples/service-worker/custom-offline-page/)을 따라 실제 사례를 보고 직접 구현하는 방법을 배울 수 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+설치 가능
+
+기기에 앱을 설치하거나 추가하는 사용자는 해당 앱에 더 많이 참여하는 경향이 있습니다.
+
+{% endDetailsSummary %}
+
+기기에 앱을 설치하거나 추가하는 사용자는 해당 앱에 더 많이 참여하는 경향이 있습니다.
+
+#### 이유
+
+프로그레시브 웹 앱을 설치하면 설치된 다른 모든 앱처럼 보이고 느끼고 작동할 수 있습니다. 사용자가 다른 앱을 실행하는 동일한 위치에서 실행됩니다. 브라우저와 별도로 자체 앱 창에서 실행되며 다른 앱과 마찬가지로 작업 목록에 나타납니다.
+
+사용자가 PWA를 설치하기를 원하는 이유는 무엇입니까? 사용자가 앱 스토어에서 앱을 설치하기를 원하는 것과 같은 이유입니다. 앱을 설치하는 사용자는 가장 참여도가 높은 잠재고객이며 일반 방문자보다 참여 측정항목이 더 우수하며 종종 휴대기기의 앱 사용자와 동등합니다. 이러한 측정항목에는 더 많은 반복 방문, 더 긴 시간 동안 사이트 및 더 높은 전환율이 포함됩니다.
+
+#### 방법
+
+[설치 가능 가이드](/customize-install/)를 따라 PWA를 설치 가능하게 만드는 방법, 설치 가능 여부를 테스트하는 방법, 직접 수행하는 방법을 배울 수 있습니다.
+
+{% endDetails %}
+
+## 최적의 프로그레시브 웹 앱 체크리스트 {: #optimal }
+
+동급 최고의 앱처럼 느껴지는 진정으로 훌륭한 프로그레시브 웹 앱을 만들려면 핵심 체크리스트 그 이상이 필요합니다. 최적의 프로그레시브 웹 앱 체크리스트는 웹을 강력하게 만드는 요소를 활용하면서 PWA가 실행 중인 장치의 일부인 것처럼 느끼게 하는 것입니다.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+오프라인 경험 제공
+
+연결이 엄격하게 필요하지 않은 경우 앱은 온라인과 동일하게 오프라인에서 작동합니다.
+
+{% endDetailsSummary %}
+
+연결이 엄격하게 필요하지 않은 경우 앱은 온라인과 동일하게 오프라인에서 작동합니다.
+
+#### 이유
+
+사용자 지정 오프라인 페이지를 제공하는 것 외에도 사용자는 PWA를 오프라인에서 사용할 수 있기를 기대합니다. 예를 들어 여행 및 항공사 앱에는 오프라인일 때 쉽게 사용할 수 있는 여행 세부정보와 탑승권이 있어야 합니다. 음악, 비디오 및 팟캐스팅 앱은 오프라인 재생을 허용해야 합니다. 소셜 및 뉴스 앱은 사용자가 오프라인일 때 읽을 수 있도록 최근 콘텐츠를 캐시해야 합니다. 사용자는 또한 오프라인 상태에서도 인증 상태를 유지하기를 기대하므로 오프라인 인증을 위해 설계하십시오. 오프라인 PWA는 사용자에게 진정한 앱과 같은 경험을 제공합니다.
+
+#### 방법
+
+사용자가 오프라인에서 작동할 것으로 기대하는 기능을 결정한 후에는 콘텐츠를 사용할 수 있고 오프라인 컨텍스트에 적용할 수 있도록 해야 합니다. 또한 브라우저 내 NoSQL 스토리지 시스템인 [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb)를 사용하여 데이터를 저장 및 검색하고 사용자가 오프라인 상태에서 작업을 수행하고 사용자가 다시 안정적인 연결을 가질 때까지 서버 통신을 연기할 수 있도록 [백그라운드 동기화](https://developer.chrome.com/blog/background-sync/)를 사용할 수 있습니다. 서비스 워커를 사용하여 오프라인 사용을 위한 이미지, 비디오 파일 및 오디오 파일과 같은 다른 종류의 콘텐츠를 저장하고 사용자 인증을 유지하기 위해 [안전하고 수명이 긴 세션](https://developer.chrome.com/blog/2-cookie-handoff/)을 구현하는 데 사용할 수도 있습니다. 사용자 경험 관점에서 로드하는 동안 사용자에게 속도와 콘텐츠에 대한 인식을 제공한 다음 필요에 따라 캐시된 콘텐츠 또는 오프라인 표시기로 대체할 수 있는 [스켈레톤 화면](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)을 사용할 수 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+완전히 접근 가능
+
+모든 사용자 상호 작용은 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 접근성 요구 사항을 통과합니다.
+
+{% endDetailsSummary %}
+
+모든 사용자 상호 작용은 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 접근성 요구 사항을 통과합니다.
+
+#### 이유
+
+대부분의 사람들은 인생의 어느 시점에서 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 접근성 요구 사항에서 다루는 방식으로 PWA를 활용하기를 원하게 될 것입니다. PWA와 상호 작용하고 이해하는 인간의 능력은 스펙트럼 형태로 존재하며 요구사항은 일시적이거나 영구적일 수 있습니다. PWA에 액세스할 수 있게 하면 모든 사람이 사용할 수 있습니다.
+
+#### 방법
+
+W3C의 [웹 접근성 개론](https://www.w3.org/WAI/fundamentals/accessibility-intro/)은 시작하기에 좋은 곳입니다. 접근성 테스트의 대부분은 수동으로 수행해야 합니다. Lighthouse의 [접근성](https://github.com/dequelabs/axe-core) 감사, [axe](https://accessibilityinsights.io/) 및 [Accessibility Insights](https://developer.chrome.com/docs/lighthouse/accessibility/)와 같은 도구를 사용하면 일부 접근성 테스트를 자동화할 수 있습니다.  `a`나 `button`과 같은 요소를 스스로 재창조하는 대신 의미적으로 올바른 요소를 사용하는 것도 중요합니다. 이렇게 하면 더 고급 기능을 구축해야 할 때 접근성 기대치를 충족할 수 있습니다(예: 화살표와 탭을 사용해야 하는 경우). [A11Y 영양 카드](https://accessibilityinsights.io/)에는 몇 가지 일반적인 구성 요소에 대한 훌륭한 조언이 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+검색을 통해 찾을 수 있음
+
+귀하의 PWA는 [검색을 통해 쉽게 찾을 수 있습니다](/discoverable/).
+
+{% endDetailsSummary %}
+
+귀하의 PWA는 [검색을 통해 쉽게 찾을 수 있습니다](/discoverable/).
+
+#### 이유
+
+웹의 가장 큰 장점 중 하나는 검색을 통해 사이트와 앱을 찾을 수 있다는 것입니다. 실제로 모든 웹사이트 트래픽의 [절반 이상](https://www.brightedge.com/resources/research-reports/channel_share)이 자연 검색에서 발생합니다. 콘텐츠에 대한 표준 URL이 존재하고 검색 엔진이 사이트를 색인화할 수 있는지 확인하는 것은 사용자가 PWA를 찾을 수 있도록 하는 데 중요합니다. 이것은 클라이언트 사이드 렌더링을 채택할 때 특히 그렇습니다.
+
+#### 방법
+
+각 URL에 고유하고 설명적인 제목과 메타 설명이 있는지 확인하는 것부터 시작하세요. 그런 다음 [Google Search Console](https://search.google.com/search-console/about) 및 Lighthouse의 [검색 엔진 최적화 감사](https://developer.chrome.com/docs/lighthouse/seo/)를 사용하여 PWA의 검색 가능성 문제를 디버깅하고 수정할 수 있습니다. 또한 [Bing](https://www.bing.com/toolbox/webmaster) 또는 [Yandex](https://webmaster.yandex.com/welcome/)의 웹마스터 도구를 사용하고 PWA에서 [Schema.org](https://goo.gle/search-gallery)의 스키마를 통해 [구조화된 데이터](https://schema.org/)를 포함하는 것을 고려할 수 있습니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+모든 입력 유형에서 작동
+
+PWA는 마우스, 키보드, 스타일러스 또는 터치로 동일하게 사용할 수 있습니다.
+
+{% endDetailsSummary %}
+
+PWA는 마우스, 키보드, 스타일러스 또는 터치로 동일하게 사용할 수 있습니다.
+
+#### 이유
+
+장치는 다양한 입력 방법을 제공하며 사용자는 응용 프로그램을 사용하는 동안 원활하게 전환할 수 있어야 합니다. 마찬가지로 중요한 것은 입력 방법이 화면 크기에 의존해서는 안 된다는 것입니다. 즉, 큰 표시 영역은 터치를 지원해야 하고 작은 표시 영역은 키보드와 마우스를 지원해야 합니다. 최선을 다해 애플리케이션과 모든 기능이 사용자가 선택할 수 있는 모든 입력 방법을 지원하는지 확인하십시오. 적절한 경우 입력별 컨트롤(예: 끌어서 새로 고침)을 허용하도록 경험도 향상해야 합니다.
+
+#### 방법
+
+[포인터 이벤트 API](https://developer.chrome.com/blog/pointer-events/)는 다양한 입력 옵션 작업을 위한 통합 인터페이스를 제공하며 특히 스타일러스 지원을 추가하는 데 유용합니다. 터치와 키보드를 모두 지원하려면 올바른 의미 요소(앵커, 버튼, 양식 컨트롤 등)를 사용하고 있는지 확인하고 이러한 요소를 의미 없는 HTML(접근성에 좋음)로 다시 작성하지 마세요. 호버링 시 활성화되는 상호작용을 포함할 때 클릭 또는 탭 시에도 활성화될 수 있는지 확인하십시오.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+권한 요청에 대한 컨텍스트 제공
+
+강력한 API 사용 권한을 요청할 때 컨텍스트를 제공하고 API가 필요할 때만 요청하십시오.
+
+{% endDetailsSummary %}
+
+강력한 API 사용 권한을 요청할 때 컨텍스트를 제공하고 API가 필요할 때만 요청하십시오.
+
+#### 이유
+
+알림, 지리적 위치 및 자격 증명과 같은 권한 프롬프트를 트리거하는 API는 옵트인이 필요한 강력한 기능과 관련되는 경향이 있기 때문에 의도적으로 사용자에게 방해가 되도록 설계되었습니다. 페이지 로드와 같이 추가 컨텍스트 없이 이러한 프롬프트를 트리거하면 사용자가 해당 권한을 수락할 가능성이 줄어들고 나중에 이를 불신할 가능성이 높아집니다. 대신 해당 권한이 필요한 이유에 대해 사용자에게 상황에 맞는 근거를 제공한 후에만 해당 프롬프트를 트리거하십시오.
+
+#### 방법
+
+[권한 UX](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) 기사와 UX Planet의 [사용자에게 권한을 요청하는 올바른 방법](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27)은 모바일에 초점을 맞추면서 모든 PWA에 적용되는 권한 프롬프트를 디자인하는 방법을 이해하는 데 좋은 리소스입니다.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+건전한 코드를 위한 모범 사례를 따릅니다
+
+코드베이스를 건전하게 유지하면 목표를 달성하고 새로운 기능을 제공하기가 더 쉬워집니다.
+
+{% endDetailsSummary %}
+
+코드베이스를 건전하게 유지하면 목표를 달성하고 새로운 기능을 제공하기가 더 쉬워집니다.
+
+#### 이유
+
+현대적인 웹 애플리케이션을 구축하는 데 필요한 것이 많습니다. 애플리케이션을 최신 상태로 유지하고 코드베이스를 건전하게 유지하면 이 체크리스트에 나와 있는 다른 목표를 충족하는 새로운 기능을 더 쉽게 제공할 수 있습니다.
+
+#### 방법
+
+건전한 코드베이스를 보장하기 위한 우선순위가 높은 여러 검사가 있습니다. 알려진 취약점이 있는 라이브러리 사용 방지, 사용되지 않는 API를 사용하지 않는지 확인, 코드베이스에서 웹 안티 패턴 제거(예: `document.write()` 또는 논패시브 스크롤 이벤트 리스너), 분석 또는 기타 타사 라이브러리가 로드되지 않는 경우 PWA가 중단되지 않도록 방어적으로 코딩합니다. 여러 브라우저 및 릴리스 채널에서 린팅과 같은 정적 코드 분석과 자동화된 테스트를 요구하는 것을 고려하십시오. 이러한 기술은 오류가 프로덕션에 적용되기 전에 오류를 포착하는 데 도움이 될 수 있습니다.
+
+{% endDetails %}
diff --git a/src/site/content/ko/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/ko/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
new file mode 100644
index 00000000000..998eb30e08c
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: Android 앱에서 PWA 사용
+authors:
+  - andreban
+date: 2020-03-19
+updated: 2021-12-06
+description: Android 앱에서 프로그레시브 웹 앱을 여는 방법.
+tags:
+  - progressive-web-apps
+---
+
+## Android 앱에서 PWA 시작
+
+[PWA(프로그레시브 웹 앱](/progressive-web-apps/))은 앱과 유사한 기능을 사용하여 빠르고 안정적이며 매력적인 고품질 환경을 만드는 웹 애플리케이션입니다.
+
+웹은 놀라운 도달 범위를 가지고 있으며 사용자가 새로운 경험을 발견할 수 있는 강력한 방법을 제공합니다. 그러나 사용자는 OS 스토어에서 애플리케이션을 검색하는 데도 익숙합니다. 이러한 사용자는 많은 경우에 이미 자신이 찾고 있는 브랜드 또는 서비스에 익숙하며 평균 이상의 참여 메트릭으로 이어지는 높은 수준의 의도를 가지고 있습니다.
+
+Play Store는 Android 앱을 위한 스토어이며 개발자는 종종 Android 앱에서 Progressive Web Apps를 열고 싶어 합니다.
+
+신뢰할 수 있는 웹 활동은 브라우저가 Android 앱 내에서 PWA를 렌더링하는 완전한 웹 플랫폼 호환 컨테이너를 제공할 수 있도록 하는 개방형 표준입니다. 이 기능은 [Chrome](https://play.google.com/store/apps/details?id=com.android.chrome)에서 사용할 수 있으며 [Firefox Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix)에서 개발 중입니다.
+
+### 기존 솔루션은 제한적
+
+[Android WebView](https://developer.android.com/reference/android/webkit/WebView)와 같은 기술 또는 [Cordova](https://cordova.apache.org/)와 같은 프레임워크를 사용하여 Android 앱에 웹 경험을 포함하는 것은 항상 가능했습니다.
+
+Android WebView의 한계점은 브라우저 대체품을 의도한 것이 아니라는 것입니다. Android WebView는 Android 앱에서 웹 UI를 사용하기 위한 개발자 도구이며 [contact picker](/contact-picker/), 또는 [filesystem](/file-system-access/), [among others](https://developer.chrome.com/blog/fugu-status/)와 같은 최신 웹 플랫폼 기능에 대한 완전한 액세스 기능을 제공하지 않습니다.
+
+Cordova는 WebView의 단점을 보완하도록 설계되었지만 API는 Cordova 환경으로 제한됩니다. 즉, 개방형 웹의 PWA와 별도로 Android 앱용 Cordova API를 사용하기 위한 추가 코드베이스를 유지해야 합니다.
+
+또한 기능 검색 기능이 항상 예상대로 작동하지 않는 경우가 많으며 Android 버전과 OEM 간의 호환성 문제도 문제가 될 수 있습니다. 이러한 솔루션 중 하나를 사용할 때 개발자는 추가 품질 보증 프로세스가 필요하고 대안을 감지하고 생성하기 위한 추가 개발 비용이 발생합니다.
+
+### 신뢰할 수 있는 웹 활동은 Android의 웹 앱을 위한 새로운 컨테이너입니다
+
+이제 개발자는 [신뢰할 수 있는 웹 활동](https://developer.chrome.com/docs/android/trusted-web-activity/)을 컨테이너로 사용하여 Android 앱의 시작 활동으로 PWA를 포함할 수 있습니다. 이 기술은 브라우저를 활용하여 PWA를 전체 화면으로 렌더링 하여 신뢰할 수 있는 웹 활동이 기본 브라우저와 동일한 웹 플랫폼 기능 및 API와 호환되도록 합니다. 신뢰할 수 있는 웹 활동을 사용하여 Android 앱을 훨씬 쉽게 구현할 수 있는 오픈 소스 유틸리티도 있습니다.
+
+다른 솔루션에서는 사용할 수 없는 또 다른 이점은 컨테이너가 브라우저와 스토리지를 공유한다는 것입니다. 로그인 상태와 사용자 기본 설정은 여러 경험에서 원활하게 공유됩니다.
+
+#### 브라우저 호환성
+
+이 기능은 버전 75부터 Chrome에서 사용할 수 있으며 Firefox는 야간 버전에서 이를 구현합니다.
+
+### 품질 기준
+
+웹 개발자는 Android 앱에 웹 콘텐츠를 포함하려는 경우 신뢰할 수 있는 웹 활동을 사용해야 합니다.
+
+신뢰할 수 있는 웹 활동의 웹 콘텐츠는 PWA 설치 가능성 기준을 충족해야 합니다.
+
+또한 사용자가 Android 애플리케이션에서 기대하는 동작과 일치시키기 위해 다음과 같은 시나리오를 처리하지 못하는 것이 충돌로 간주되는 [변경 사항이 Chrome 86에 도입됐습니다.](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html)
+
+- 애플리케이션 실행 시 디지털 애셋 링크 확인 실패.
+- 오프라인 네트워크 리소스 요청에 대해 HTTP 200 반환 실패.
+- HTTP 404 또는 5xx 오류를 반환하는 탐색 요청.
+
+신뢰할 수 있는 웹 활동에서 이러한 시나리오 중 하나가 발생하면 사용자가 Android 애플리케이션에서 볼 수 있는 충돌이 발생합니다. 서비스 워커에서 이러한 시나리오를 처리하는 방법에 대한 [지침](https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria)을 확인하세요.
+
+또한 애플리케이션은 [정책 준수](https://play.google.com/about/developer-content-policy/)와 같은 추가적인 Android 관련 기준을 충족해야 합니다.
+
+{% Aside 'caution' %} 앱이 주로 13세 미만의 어린이를 위해 설계된 경우 신뢰할 수 있는 웹 활동 사용과 호환되지 않을 수 있는 추가적인 [Play 가족 정책](https://play.google.com/about/families/)이 적용됩니다. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="PWA 배지가 있고 성능 점수가 100인 AirHorn의 Lighthouse 점수를 보여주는 스크린샷.", width="840", height="141 " %}<figcaption> Lighthouse의 PWA 배지는 PWA가 설치 가능성 기준을 통과하는지 여부를 보여줍니다.</figcaption></figure>
+
+## 도구
+
+신뢰할 수 있는 웹 활동을 활용하려는 웹 개발자는 PWA를 Android 애플리케이션으로 변환하기 위해 새로운 기술이나 API를 배울 필요가 없습니다. Bubblewrap과 PWABuilder는 함께 라이브러리, 명령줄 인터페이스(CLI) 및 그래픽 사용자 인터페이스(GUI) 형태로 개발자 도구를 제공합니다.
+
+### Bubblewrap
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) 프로젝트는 NodeJS 라이브러리 및 CLI(명령줄 인터페이스) 형식으로 Android 앱을 생성합니다.
+
+새 프로젝트를 부트스트래핑하려면 도구를 실행하고 다음과 같은 Web Manifest의 URL을 전달합니다.
+
+```shell
+npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
+```
+
+이 도구는 프로젝트를 구축할 수도 있으며 아래 명령을 실행하면 Play 스토어에 업로드할 준비가 된 Android 애플리케이션이 출력됩니다.
+
+```shell
+npx @bubblewrap/cli build
+```
+
+이 명령을 실행하면 프로젝트의 루트 디렉터리에서 `app-release-signed.apk` 파일을 사용할 수 있습니다. 이 파일이 [Play 스토어에 업로드](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) 될 파일입니다.
+
+### PWABuilder
+
+[PWABuilder는](https://pwabuilder.com/) 개발자가 기존 웹 사이트를 프로그레시브 웹 앱으로 변환하는 데 도움이 됩니다. 또한 Bubblewrap과 통합되어 해당 PWA를 Android 앱으로 래핑하는 GUI 인터페이스를 제공합니다. PWABuilder 팀은 도구를 사용하여 Android 애플리케이션을 생성하는 방법에 대한 [훌륭한 블로그 게시물](https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/)을 작성했습니다.
+
+## Android 앱에서 PWA 소유권 확인
+
+훌륭한 프로그레시브 웹 앱을 구축하는 개발자는 다른 개발자가 허락 없이 Android 앱을 구축하는 것을 원하지 않을 것입니다. 이러한 일이 발생하지 않도록 하려면 [Digital Asset Links](https://developers.google.com/digital-asset-links/v1/getting-started)라는 도구를 사용하여 Android 애플리케이션을 프로그레시브 웹 앱과 페어링해야 합니다.
+
+Bubblewrap 및 PWABuilder는 Android 애플리케이션에서 필요한 구성을 처리하지만, PWA에 `assetlinks.json` 파일을 추가하는 마지막 단계가 남아있습니다.
+
+이 파일을 생성하려면 개발자는 사용자가 다운로드하는 APK에 서명하는 데 사용되는 키의 SHA-256 서명이 필요합니다.
+
+키는 여러 방법으로 생성할 수 있으며 최종 사용자에게 제공되는 APK에 서명한 키를 찾는 가장 쉬운 방법은 Play 스토어 자체에서 다운로드하는 것입니다.
+
+손상된 애플리케이션이 사용자에게 표시되지 않도록 하려면 애플리케이션을 [비공개 테스트 채널](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB)에 배포하고 테스트 장치에 설치한 다음 [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool)을 사용하여 앱에 대한 `assetlinks.json` 파일을 생성하세요. 생성된 `assetlinks.json` 파일을 검증 중인 도메인의 `/.well-known/assetlinks.json`에서 사용할 수 있습니다.
+
+## 다음으로 갈 곳
+
+프로그레시브 웹 앱은 고품질 웹 경험입니다. 신뢰할 수 있는 웹 활동은 Android 앱이 최소 품질 기준을 충족할 때 이러한 고품질 경험을 여는 새로운 방법입니다.
+
+Progressive Web Apps를 시작하는 경우 [훌륭한 PWA를 구축하는 방법에 대한 지침](/progressive-web-apps/)을 읽어보세요. 이미 PWA가 있는 개발자의 경우 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)를 사용하여 품질 기준을 충족하는지 확인하세요.
+
+그런 다음, [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) 또는 [PWABuilder](https://pwabuilder.com/)를 사용하여 Android 애플리케이션을 생성하고 [애플리케이션을 Play 스토어의 비공개 테스트 채널에 업로드](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB)하고 [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool)을 사용하여 PWA와 페어링 합니다.
+
+마지막으로 비공개 테스트 채널에서 프로덕션으로 애플리케이션을 옮기세요!
diff --git a/src/site/content/ko/progressive-web-apps/what-are-pwas/index.md b/src/site/content/ko/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..6088f0a7938
--- /dev/null
+++ b/src/site/content/ko/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: 프로그레시브 웹 앱이란?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: 프로그레시브 웹 앱(PWA) 및 이를 다른 웹 앱과 차별화하는 세 가지 주요 개념에 대해 소개합니다.
+tags:
+  - progressive-web-apps
+---
+
+웹은 놀라운 플랫폼입니다. 장치와 운영 체제 전반에 걸친 넓은 저변, 사용자 중심의 보안 모델, 그리고 단일 회사에서 사양이나 구현을 제어하지 않는다는 사실 등이 웹을 소프트웨어 개발을 위한 고유한 플랫폼으로 만들어줍니다. 고유한 연결 가능성과 결합하면 검색하고 찾은 내용을 어디서나 누구와도 공유할 수 있습니다. 웹 사이트를 방문할 때마다 최신 정보가 제공되며 해당 사이트에 대한 경험은 원하는 만큼 일시적이거나 영구적일 수 있습니다. 웹 애플리케이션은 단일 코드베이스를 사용하여 *모든 장치에서 모든 사람에게* 연결될 수 있습니다.
+
+플랫폼별 애플리케이션은 믿을 수 없을 정도로 풍부하고 안정적인 것으로 알려져 있습니다. 홈 화면, 도크 및 작업 표시줄에 항상 존재합니다. 네트워크 연결에 관계없이 작동하며 자체 독립 실행형 환경에서 실행됩니다. 로컬 파일 시스템에서 파일을 읽고 쓸 수 있고 USB, 직렬 또는 블루투스를 통해 연결된 하드웨어에 액세스할 수 있으며 연락처 및 일정 이벤트와 같이 장치에 저장된 데이터와 상호 작용할 수도 있습니다. 이러한 애플리케이션에서 사진을 찍거나 홈 화면에 나열된 노래 재생을 확인하거나 다른 앱에 있는 동안 노래 재생을 제어하는 등의 작업을 수행할 수 있습니다. 플랫폼별 애플리케이션은 기반이 되는 장치의 *일부*인 것처럼 느껴집니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="높은 기능성, 웹 앱, 넓은 도달 범위 및 프로그레시브 웹 앱을 포함하는 플랫폼별 앱의 상대적 기능과 도달 범위를 보여주는 그래프.", width="370", height="367" %}<figcaption> 플랫폼별 앱, 웹 앱 및 프로그레시브 웹 앱의 기능과 도달 범위 비교.</figcaption></figure>
+
+플랫폼별 앱과 웹 앱을 기능 및 도달 범위 측면에서 생각해 보면 플랫폼별 앱은 최고의 기능을 보여주는 반면, 웹 앱은 최고의 도달 범위를 보여줍니다. 그렇다면 프로그레시브 웹 앱은 어느 위치에 있을까요?
+
+프로그레시브 웹 앱(PWA)은 최신 API로 구축 및 강화되어 뛰어난 기능, 신뢰성 및 설치 용이성을 제공하는 동시에 단일 코드베이스로 *누구에게나 어디서나 모든 장치에서* 도달할 수 있습니다.
+
+## 앱의 세 가지 주요 개념
+
+프로그레시브 웹 앱은 기능, 안정성 및 설치 용이성이 보장되도록 설계된 웹 애플리케이션입니다. 이 세 가지 주요 개념은 플랫폼별 애플리케이션처럼 느껴지는 경험을 만들어줍니다.
+
+### 기능성
+
+웹은 오늘날 그 자체로 매우 유능합니다. 예를 들어 WebRTC, 지리 위치 및 푸시 알림을 사용하여 하이퍼로컬 화상 채팅 앱을 구축할 수 있습니다. 해당 앱을 설치 가능한 형태로 만들고 WebGL 및 WebVR을 사용하여 이러한 대화를 가상으로 가져올 수 있습니다. 웹 어셈블리의 도입으로 개발자는 C, C++ 및 Rust와 같은 다른 에코시스템을 활용하고 수십 년의 작업 결과물과 기능을 웹에서도 구현할 수 있습니다. 예를 들어 [Squoosh.app](https://squoosh.app/)은 고급 이미지 압축에 이를 활용합니다.
+
+최근까지 플랫폼별 앱만이 이러한 기능을 실제로 제공할 수 있었습니다. 일부 기능은 아직 웹에서 접근할 수 없지만 새로운 API와 향후 출시될 API에 힘 입어 파일 시스템 액세스, 미디어 제어, 앱 배지 및 완전한 클립보드 지원과 같은 기능을 웹에서도 이용할 수 있게 될 것입니다. 이러한 모든 기능은 웹의 안전한 사용자 중심 권한 모델로 구축되어 웹 사이트가 사용자에게 두려운 환경으로 제기되지 않을 것입니다.
+
+최신 API, 웹 어셈블리, 새로운 API와 향후 출시될 API를 배경으로 웹 애플리케이션은 그 어느 때보다 많은 기능을 제공하며 이러한 기능은 계속해서 증가하고 있습니다.
+
+### 신뢰성
+
+안정적인 프로그레시브 웹 앱은 네트워크에 관계없이 빠르고 신뢰할 수 있습니다.
+
+속도는 해당 환경으로 사용자를 *끌어들이기* 위해 매우 중요한 부분입니다. 실제로 페이지 로드 시간이 1초에서 10초로 늘어나면 사용자가 이탈할 확률은 [123% 증가합니다](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/). `onload` 이벤트 후에도 성능의 중요성은 끝나지 않습니다. 사용자는 버튼 클릭과 같은 상호 작용이 등록되었는지 여부를 궁금해하지 않아야 합니다. 스크롤과 애니메이션은 부드럽게 느껴져야 합니다. 성능은 사용자가 애플리케이션을 인식하는 방식부터 실제 성능에 이르기까지 전체적인 경험에 영향을 줍니다.
+
+마지막으로, 네트워크 연결에 관계없이 안정적인 애플리케이션을 사용할 수 있어야 합니다. 사용자는 앱이 느리거나 불안정한 네트워크 연결 또는 오프라인 상태에서도 시작되기를 기대합니다. 그들은 서버에서 요청을 받는 것이 어려운 경우에도 미디어 트랙, 티켓 및 여행 일정과 같이 최근에 상호 작용한 콘텐츠를 사용할 수 있기를 기대합니다. 요청이 불가능할 때라도 그저 장애를 일으키거나 충돌하는 대신 문제에 대해 안내를 받기를 기대합니다.
+
+사용자들은 눈 깜짝할 사이에 요청에 반응하는 앱과 신뢰할 수 있는 경험을 좋아합니다.
+
+### 설치 가능성
+
+설치된 프로그레시브 웹 앱은 브라우저 탭 대신 독립 실행형 창에서 실행됩니다. 이러한 앱은 사용자의 홈 화면, 도크, 작업 표시줄 또는 쉘프에서 실행할 수 있습니다. 기기에서 검색하고 앱 전환기로 전환할 수 있어 앱이 설치된 기기의 일부처럼 느껴지도록 할 수 있습니다.
+
+웹 앱을 설치하고 나면 새로운 기능이 열립니다. 일반적으로 브라우저에서 실행할 때 예약되어 있던 바로가기 키를 사용할 수 있게 됩니다. 프로그레시브 웹 앱은 다른 애플리케이션의 콘텐츠를 수락하도록 등록하거나 다른 유형의 파일을 처리하기 위한 기본 애플리케이션으로 등록할 수 있습니다.
+
+프로그레시브 웹 앱이 탭을 벗어나 독립 실행형 앱 창으로 이동하면 사용자가 생각하고 상호 작용하는 방식 대로 환경이 바뀝니다.
+
+## 두 세계의 장점만 결합
+
+기본적으로 프로그레시브 웹 앱은 웹 애플리케이션에 불과합니다. 점진적 향상을 통해 최신 브라우저에서 새로운 기능을 사용할 수 있습니다. 서비스 워커와 웹 앱 매니페스트를 사용하면 웹 애플리케이션이 안정적이 되고 설치가 가능해집니다. 새 기능을 사용할 수 없는 경우에도 사용자는 핵심 환경을 계속 사용할 수 있습니다.
+
+숫자는 거짓말을 하지 않습니다! 프로그레시브 웹 앱을 출시한 회사는 인상적인 결과를 얻게 됩니다. 예를 들어 Twitter는 세션당 페이지 수가 65% 증가하고 트윗이 75% 증가했으며 이탈률은 20% 감소하는 동시에 앱 크기는 97% 이상 줄었습니다. PWA로 전환한 후 Nikkei는 유기적 트래픽이 2.3배, 구독이 58%, 일일 활성 사용자가 49% 증가했습니다. Hulu는 플랫폼별 데스크톱 경험을 프로그레시브 웹 앱으로 교체한 후, 재방문 횟수가 27% 증가하는 결과를 거두었습니다.
+
+프로그레시브 웹 앱은 사용자가 좋아할 웹 경험을 제공할 수 있는 독특한 기회를 제공합니다. 최신 웹 기능을 사용하여 향상된 기능과 안정성을 제공하는 프로그레시브 웹 앱을 사용하면 구축한 앱을 *단일 코드베이스*로 누구나, 어디서나, 모든 장치에 설치할 수 있습니다.
diff --git a/src/site/content/ko/react/code-splitting-suspense/index.md b/src/site/content/ko/react/code-splitting-suspense/index.md
new file mode 100644
index 00000000000..d858da92298
--- /dev/null
+++ b/src/site/content/ko/react/code-splitting-suspense/index.md
@@ -0,0 +1,171 @@
+---
+layout: post
+title: React.lazy 및 Suspense를 사용한 코드 분할
+subhead: |2
+
+  사용자에게 필요한 것보다 더 많은 코드를 제공할 필요가 없으므로 번들을 분할하여 이러한 일이 발생하지 않도록 하십시오!
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
+date: 2019-04-29
+description: React.lazy 메서드를 사용하면 구성요소 수준에서 동적 가져오기를 사용하여 React 애플리케이션을 쉽게 코드 분할할 수 있습니다. Suspense와 함께 사용하여 사용자에게 적절한 로드 상태 보여주세요.
+authors:
+  - houssein
+  - jeffposnick
+feedback:
+  - api
+---
+
+{% Aside %} 코드 분할의 기본 개념을 아직 이해하지 못한다면 [먼저 코드 분할로 자바스크립트 페이로드 줄이기](/reduce-javascript-payloads-with-code-splitting) 가이드를 참조하세요. {% endAside %}
+
+**`React.lazy`** 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다.
+
+```jsx
+import React, { lazy } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const DetailsComponent = () => (
+  <div>
+    <AvatarComponent />
+  </div>
+)
+```
+
+## 이것이 왜 유용한가요?
+
+큰 React 애플리케이션은 일반적으로 많은 구성 요소, 유틸리티 메서드 및 타사 라이브러리로 구성됩니다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송됩니다. 이는 페이지 성능에 상당한 영향을 줄 수 있습니다.
+
+`React.lazy` 함수는 응용 프로그램의 구성 요소를 손쉽게  개별 JavaScript 청크로 분리하는 기본 제공 방법을 제공합니다. `Suspense` 구성 요소와 결합할 때 로드 상태를 처리할 수 있습니다.
+
+## Suspense
+
+사용자에게 큰 JavaScript 페이로드를 전송할 때의 문제는 특히 저사양 장치와 저속 네트워크 연결에서 페이지 로드를 완료하는 데 걸리는 시간입니다. 이것이 코드 분할 및 지연 로딩이 매우 유용한 이유입니다.
+
+그러나 네트워크를 통해 코드 분할 구성 요소를 가져올 때 사용자가 경험해야 하는 약간의 지연이 항상 있으므로 유용한 로드 상태를 표시하는 것이 중요합니다. **`Suspense`** 구성 요소와 함께 `React.lazy`를 사용하면 이 문제를 해결하는 데 도움이 됩니다.
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+  </Suspense>
+)
+```
+
+`Suspense` 는 모든 React 구성 요소를 로드 상태로 표시할 수 `fallback` 다음 예는 이것이 어떻게 작동하는지 보여줍니다. 아바타는 버튼을 클릭할 때만 렌더링되며 일시 중단된 `AvatarComponent` 필요한 코드를 검색하라는 요청이 생성됩니다. 그 동안 폴백 로드 구성 요소가 표시됩니다.
+
+{% Glitch {
+  id: 'react-lazy-suspense',
+  path: 'src/index.css',
+  height: 480
+} %}
+
+`AvatarComponent` 를 구성하는 코드가 작기 때문에 로딩 스피너가 짧은 시간 동안만 표시됩니다. 더 큰 구성 요소는 특히 약한 네트워크 연결에서 로드하는 데 훨씬 더 오래 걸릴 수 있습니다.
+
+이것이 어떻게 작동하는지 더 잘 보여주는 예시:
+
+{% Instruction 'preview' %} {% Instruction 'devtools-network' %}
+
+- 기본적 으로 **No throttling**으로 설정되어 있는 **Throttling** 드롭다운을 클릭합니다. **고속 3G**를 선택합니다.
+- 앱에서 **Click Me** 버튼을 클릭합니다.
+
+이제 로딩 표시기가 더 오래 표시됩니다. `AvatarComponent`를 구성하는 모든 코드를 별도의 청크로 가져오는 방법에 주목하십시오.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt="다운로드 중인 하나의 chunk.js 파일을 보여주는 DevTools 네트워크 패널", width="800", height="478" %}</figure>
+
+{% Aside %} React는 현재 구성 요소가 서버 측에서 렌더링될 때 Suspense를 지원하지 않습니다. 서버에서 렌더링하는 경우 React 문서에서 권장하는 [`loadable-components`](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/)와 같은 다른 라이브러리를 사용하는 것이 좋습니다. {% endAside %}
+
+## 여러 구성 요소 일시 중단
+
+`Suspense`의 또 다른 기능은 **여러 구성 요소가 모두 지연 로드된 경우에도** 로드에서 여러 구성 요소를 일시 중단할 수 있다는 것입니다.
+
+예시:
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+    <InfoComponent />
+    <MoreInfoComponent />
+  </Suspense>
+)
+```
+
+이것은 단일 로드 상태만 표시하면서 여러 구성 요소의 렌더링을 지연시키는 매우 유용한 방법입니다. 모든 구성 요소 가져오기가 완료되면 사용자는 동시에 표시되는 모든 구성 요소를 보게 됩니다.
+
+다음 삽입을 통해 이를 확인할 수 있습니다.
+
+{% Glitch { id: 'react-lazy-suspense-multiple', path: 'src/index.css', height: 480 } %}
+
+{% Aside %} 로딩 표시기가 너무 빨리 표시됩니까? DevTools에서 조절된 연결을 다시 시뮬레이션해 보십시오. {% endAside %}
+
+이것이 없으면  각각 고유한 로딩 표시기가 있는 UI의 다른 부분이 차례로 로딩되는 문제인 *엇갈린 로딩*이 발생하기 쉽습니다. 이로 인해 사용자 경험이 더 거슬리게 느껴질 수 있습니다.
+
+{% Aside %} Suspense를 사용하여 구성요소를 분할하는 것이 이미 가능하고 번들 크기를 쉽게 줄일 수 있지만 React 팀은 이를 더욱 확장할 수 있는 더 많은 기능을 계속 작업하고 있습니다. [React 16.x 로드맵](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html)에서 이에 대해 자세히 설명합니다. {% endAside %}
+
+## 로딩 실패 처리
+
+`Suspense` 사용하면 네트워크 요청이 내부적으로 이루어지는 동안 임시 로드 상태를 표시할 수 있습니다. 그러나 이러한 네트워크 요청이 어떤 이유로 실패하면 어떻게 될까요? 오프라인 상태이거나 웹 앱이 오래되어 서버 재배포 후 더 이상 사용할 수 없는 [버전이 지정된](/http-cache/#long-lived-caching-for-versioned-urls) URL을 지연 로드하려고 할 수 있습니다.
+
+React에는 오류 경계를 사용하여 이러한 유형의 로드 실패를 정상적으로 처리하기 위한 표준 패턴이 있습니다. [문서에](https://reactjs.org/docs/error-boundaries.html) 설명되어 있듯이 `static getDerivedStateFromError()` 또는 `componentDidCatch()` 중 하나(또는 둘 다)를 구현하는 경우 오류 경계 역할을 할 수 있습니다.
+
+지연 로딩 오류를 감지하고 처리하기 위해 `Suspense` 구성 요소를 오류 경계 역할을 하는 상위 구성 요소로 래핑할 수 있습니다. 오류 경계의 `render()` 메서드 내에서 오류가 없으면 자식을 있는 그대로 렌더링하거나 문제가 발생하면 사용자 지정 오류 메시지를 렌더링할 수 있습니다.
+
+```js
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Loading failed! Please reload.</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DetailsComponent = () => (
+  <ErrorBoundary>
+    <Suspense fallback={renderLoader()}>
+      <AvatarComponent />
+      <InfoComponent />
+      <MoreInfoComponent />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+## 결론
+
+React 애플리케이션에 코드 분할을 적용할 위치가 확실하지 않은 경우 다음 단계를 따르세요.
+
+1. 경로 수준에서 시작합니다. 경로는 분할할 수 있는 애플리케이션의 지점을 식별하는 가장 간단한 방법입니다. [React 문서](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting)에 `Suspense`를 [`react-router`](https://github.com/ReactTraining/react-router)와 함께 사용하는 방법이 설명되어 있습니다.
+2. 특정 사용자 상호작용(예: 버튼 클릭)에서만 렌더링되는 사이트 페이지의 큰 구성요소를 식별합니다. 이러한 구성 요소를 분할하면 JavaScript 페이로드가 최소화됩니다.
+3. 화면 밖에 있고 사용자에게 중요하지 않은 것은 모두 분할하는 것을 고려하십시오.
diff --git a/src/site/content/ko/react/code-splitting-with-dynamic-imports-in-nextjs/index.md b/src/site/content/ko/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
new file mode 100644
index 00000000000..9663289445d
--- /dev/null
+++ b/src/site/content/ko/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
@@ -0,0 +1,127 @@
+---
+layout: post
+title: Next.js에서 동적 가져오기를 사용한 코드 분할
+authors:
+  - mihajlija
+subhead: |2-
+
+  코드 분할 및 스마트 로딩 전략으로 Next.js 앱 속도를 높이는 방법.
+date: 2019-11-08
+feedback:
+  - api
+---
+
+## 학습 내용
+
+이 게시물은 다양한 유형의 [코드 분할](/reduce-javascript-payloads-with-code-splitting/)과 동적 가져오기를 사용하여 Next.js 앱 속도를 높이는 방법을 설명합니다.
+
+## 경로 기반 및 구성 요소 기반 코드 분할
+
+기본적으로 Next.js는 JavaScript를 각 경로에 대해 별도의 청크로 분할합니다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로에 필요한 코드만 전송합니다. 사용자가 애플리케이션을 탐색할 때 다른 경로와 연결된 청크를 가져옵니다. 경로 기반 코드 분할 기능은 한 번에 구문을 분석하고 컴파일해야 하는 스크립트의 양을 최소화하므로 페이지 로드 시간이 훨씬 빨라집니다.
+
+경로 기반 코드 분할이 좋은 기본값이지만 구성 요소 수준에서 코드 분할을 사용하여 로드 프로세스를 추가로 최적화할 수 있습니다. 앱에 큰 구성 요소가 있는 경우 별도의 청크로 분할하는 것이 좋습니다. 이렇게 하면 중요하지 않거나 특정 사용자 상호 작용(예: 버튼 클릭)에서만 렌더링되는 큰 구성 요소는 지연 로드될 수 있습니다.
+
+Next.js는 JavaScript 모듈(React 구성 요소 포함)을 동적으로 가져오고 각 가져오기를 별도의 청크로 로드할 수 있는 [동적 `import()`](https://v8.dev/features/dynamic-import) 기능을 지원합니다. 이렇게 하면 구성 요소 수준의 코드 분할이 가능하고 사용자가 보고 있는 사이트 부분에 필요한 코드만 다운로드하도록 리소스 로드를 제어할 수 있습니다. Next.js에서 이러한 구성 요소는 기본적으로 [SSR(서버 측 렌더링)](/rendering-on-the-web/)입니다.
+
+## 동적 가져오기 실행
+
+이 게시물에는 하나의 버튼이 있는 간단한 페이지로 구성된 샘플 앱의 여러 버전이 포함되어 있습니다. 버튼을 클릭하면 귀여운 강아지가 화면에 표시됩니다. 앱의 각 버전을 살펴보면서 동적 가져오기가 [정적 가져오기](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)와 어떻게 다른지 그리고 이를 사용하는 방법에 대해 알 수 있습니다.
+
+앱의 첫 번째 버전에서 강아지는 `components/Puppy.js`에 있습니다. 앱은 페이지에 강아지를 표시하기 위해 정적 가져오기 설명문을 사용하여 `index.js`에서 `Puppy` 구성 요소를 가져옵니다.
+
+```js
+import Puppy from "../components/Puppy";
+```
+
+{% Glitch { id: 'static-import', path: 'index.js', previewSize: 0, height: 480 } %}
+
+Next.js가 앱을 번들로 묶는 방법을 살펴보려면 DevTools에서 네트워크 추적을 검사하세요.
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+{% Instruction 'reload-page', 'ol' %}
+
+페이지 로드 시 `Puppy.js` 구성 요소를 포함하여 필요한 모든 코드는 `index.js`로 번들로 묶입니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6KWlTYFhoIEIGqnuMwlh.png", alt="index.js, app.js, webpack.js, main.js, 0.js 6가지 JavaScript 파일 및 dll(동적 링크 라이브러리) 파일을 표시하는 DevTools 네트워크 탭.", width="800", height="665" %}</figure>
+
+**Click me** 버튼을 누르면 강아지 JPEG에 대한 요청만 **네트워크** 탭에 추가됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7MkXVqnqfIbW74VV48kB.png", alt="6가지 JavaScript 파일과 이미지 하나를 표시하는 버튼 클릭 이후에 표시되는 DevTools 네트워크 탭.", width="800", height="665" %}</figure>
+
+이러한 접근 방식의 단점은 사용자가 강아지를 보기 위해 버튼을 클릭하지 않더라도 `index.js`에 포함되어 있기 때문에 `Puppy` 구성 요소를 로드해야 한다는 것입니다. 이 간단한 예에서는 문제가 되지 않지만 실제 적용 시 필요할 경우에만 중요한 구성 요소를 로드하는 것이 상당한 개선으로 이어지는 경우가 종종 있습니다.
+
+이제 정적 가져오기가 동적 가져오기로 대체된 두 번째 앱 버전을 살펴보도록 하겠습니다. Next.js에는 Next의 모든 구성 요소에 대해 동적 가져오기를 사용할 수 있는 `next/dynamic`이 포함되어 있습니다.
+
+```js/1,5/0
+import Puppy from "../components/Puppy";
+import dynamic from "next/dynamic";
+
+// ...
+
+const Puppy = dynamic(import("../components/Puppy"));
+```
+
+{% Glitch { id: 'dynamic-import-nextjs', path: 'pages/index.js:29:10', height: 480 } %}
+
+첫 번째 예의 단계에 따라 네트워크 추적을 검사합니다.
+
+앱을 처음 로드하면 `index.js`만 다운로드됩니다. `Puppy` 구성 요소에 대한 코드가 포함되어 있지 않기 때문에 0.5KB 더 작습니다(37.9KB에서 37.4KB로 감소).
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K7Ii3bxUkb37LrZjjWT1.png", alt="동일한 6가지 JavaScript 파일을 표시하는 DevTools 네트워크, 예외적으로 index.js는 현재 0.5KB 더 작음.", width="800", height="665" %}</figure>
+
+`Puppy` 구성 요소는 이제 버튼을 누를 때만 로드되는 별도의 청크 `1.js`에 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DfVDv5poQmwXwOKmnvd.png", alt="추가적인 1.js 파일과 파일 목록 하단에 추가된 이미를 표시하는 버튼 클릭 이후에 표시되는 DevTools 네트워크 탭.", width="800", height="665" %}</figure>
+
+{% Aside %} 기본적으로, Next.js는 이러한 동적 청크 *number*.js에 이름을 지정합니다. 여기에서 *number*는 1부터 시작합니다. {% endAside %}
+
+실제 적용 시, 구성 요소가 [훨씬 더 큰](https://bundlephobia.com/result?p=moment@2.24.0) 경우가 많으며, 구성 요소를 지연 로드하면 초기 JavaScript 페이로드를 수백 킬로바이트까지 줄일 수 있습니다.
+
+## 사용자 지정 로딩 표시기로 동적 가져오기
+
+리소스를 지연 로드할 때 지연이 있는 경우에 대비하여 로드 표시기를 제공하는 것이 좋습니다. Next.js에서, `dynamic()` 함수에 추가 인수를 제공하여 이러한 작업을 수행할 수 있습니다.
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  loading: () => <p>Loading...</p>
+});
+```
+
+{% Glitch { id: 'dynamic-import-loading', path: 'pages/index.js:7:27', height: 480 } %}
+
+로딩 표시기가 실행 중인지 확인하려면 DevTools에서 느린 네트워크 연결을 시뮬레이션하요.
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+1. **Throttling(스로틀링)** 드롭다운 목록에서 **Fast 3G(고속 3G)**를 선택합니다.
+
+2. **클릭 미** 버튼을 누릅니다.
+
+이제 버튼을 클릭하면 구성 요소를 로드하는 데 시간이 걸리고 그 동안 앱이 "로드 중…" 메시지를 표시합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tjlpmwolBVp1jh948Fln.png", alt="\"로드 중...\" 텍스트가 있는 어두운 화면.", width="800", height="663" %}</figure>
+
+## SSR 없이 동적 가져오기
+
+클라이언트 측에서만 구성 요소를 렌더링해야 하는 경우(예: 채팅 위젯) `ssr` 옵션을 `false`로 설정하여 이러한 작업을 수행할 수 있습니다.
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  ssr: false,
+});
+```
+
+{% Glitch { id: 'dynamic-import-no-ssr', path: 'pages/index.js:5:0', height: 480 } %}
+
+## 결론
+
+동적 가져오기를 지원하는 Next.js는 JavaScript 페이로드를 최소화하고 애플리케이션 로드 시간을 개선할 수 있는 구성 요소 수준 코드 분할 기능을 제공합니다. 모든 구성 요소는 기본적으로 서버 측에서 렌더링되며 필요할 때마다 이 옵션을 비활성화할 수 있습니다.
diff --git a/src/site/content/ko/react/index.md b/src/site/content/ko/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/ko/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/ko/react/virtualize-long-lists-react-window/index.md b/src/site/content/ko/react/virtualize-long-lists-react-window/index.md
new file mode 100644
index 00000000000..a0593cd3b73
--- /dev/null
+++ b/src/site/content/ko/react/virtualize-long-lists-react-window/index.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: react-window로 대형 리스트 가상화
+subhead: 초대형 테이블과 리스트는 사이트 성능을 현저히 저하시킬 수 있습니다. 가상화가 도움이 될 수 있습니다!
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
+date: 2019-04-29
+description: react-window는 대형 리스트를 효율적으로 렌더링할 수 있는 라이브러리입니다.
+authors:
+  - houssein
+  - developit
+feedback:
+  - api
+---
+
+[`react-window`](https://react-window.now.sh/#/examples/list/fixed-size)는 대형 리스트를 효율적으로 렌더링할 수 있는 라이브러리입니다.
+
+`react-window`로 렌더링되는 1000개의 행을 포함하는 리스트의 예입니다. 최대한 빠르게 스크롤하세요.
+
+{% Glitch { id: 'react-window-fixed', path: 'src/App.js', height: 750 } %}
+
+## 이것이 왜 유용한가요?
+
+많은 행이 포함된 큰 테이블이나 리스트를 표시해야 하는 경우가 있습니다. 이러한 리스트의 모든 단일 항목을 로드하면 성능에 상당한 영향을 미칠 수 있습니다.
+
+**목록 가상화** 또는 "윈도잉"은 사용자에게 보이는 것만 렌더링하는 개념입니다. 먼저 렌더링되는 요소의 수는 전체 목록의 아주 작은 부분 집합이며 사용자가 스크롤을 계속하는 경우 보이는 콘텐츠의 "창"이 *움직입니다*. 이렇게 하면 리스트의 렌더링 및 스크롤 성능이 모두 향상됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="가상화된 리스트의 콘텐츠 창", width="578", height="525" %}<figcaption> 가상화된 리스트에서 콘텐츠 "창" 이동</figcaption></figure>
+
+"창"을 종료하는 DOM 노드는 재활용되거나 사용자가 목록을 아래로 스크롤할 때 새로운 요소로 즉시 교체됩니다. 이렇게 하면 창 크기에 따라 렌더링된 모든 요소의 수가 유지됩니다.
+
+## react-window
+
+`react-window`는 애플리케이션에서 가상화된 목록을 쉽게 생성할 수 있게 해주는 작은 서드 파티 라이브러리입니다. 다양한 유형의 목록 및 테이블에 사용할 수 있는 여러 기본 API를 제공합니다.
+
+### 고정 크기 리스트를 사용하는 경우
+
+동일한 크기의 항목으로 구성된 긴 1차원 리스트가 있는 경우 `FixedSizeList` 구성 요소를 사용하세요.
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+const items = [...] // 일부 항목 리스트
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const ListComponent = () => (
+  <FixedSizeList
+    height={500}
+    width={500}
+    itemSize={120}
+    itemCount={items.length}
+  >
+    {Row}
+  </FixedSizeList>
+);
+
+export default ListComponent;
+```
+
+- `FixedSizeList` 구성 요소는 `height` , `width` 및 `itemSize` 속성을 사용하여 리스트 내의 항목 크기를 제어합니다.
+- 행을 렌더링하는 함수는 자식으로 `FixedSizeList`에 전달됩니다. 특정 항목에 대한 세부 정보는 `index` 인수(`items[index]`)를 사용하여 액세스할 수 있습니다.
+- `style` 매개변수는 행 요소에 첨부**되어야** 하는 행 렌더링 메서드에도 전달됩니다. 리스트 항목은 인라인으로 할당된 높이 및 너비 값으로 절대적으로 배치되며 `style` 매개변수가 이를 담당합니다.
+
+{% Aside 'caution' %} 외부 CSS 파일이 있는 리스트 또는 리스트 항목에 `height` 및 `width` 속성을 할당하지 마세요. 이러한 스타일 속성은 인라인으로 적용된다는 사실 때문에 무시됩니다. {% endAside %}
+
+이 문서의 앞부분에 나와 있는 Glitch 예는  `FixedSizeList` 구성 요소의 예를 보여줍니다.
+
+### 가변 크기 리스트를 사용해야 하는 경우
+
+`VariableSizeList` 구성 요소를 사용하여 크기가 다른 항목 리스트를 렌더링합니다. 이 구성 요소는 고정 크기 리스트와 같은 방식으로 작동하지만 대신 특정 값 대신 `itemSize` 속성에 대한 기능을 요구합니다.
+
+```jsx
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+
+const items = [...] // 일부 항목 리스트
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const getItemSize = index => {
+  // 아이템 크기 반환[지수]
+}
+
+const ListComponent = () => (
+  <VariableSizeList
+    height={500}
+    width={500}
+    itemCount={items.length}
+    itemSize={getItemSize}
+  >
+    {Row}
+  </VariableSizeList>
+);
+
+export default ListComponent;
+```
+
+다음 삽입된 예는 이 구성요소의 예를 보여줍니다.
+
+{% Glitch { id: 'react-window-variable', path: 'src/ListComponent.js', height: 750 } %}
+
+`itemSize` 속성에 전달된 항목 크기 함수는 이 예제에서 행 높이를 무작위로 지정합니다. 그러나 실제 애플리케이션에는 각 항목의 크기를 정의하는 실제 논리가 있어야 합니다. 이상적으로는 이러한 크기는 데이터를 기반으로 계산하거나 API에서 가져와야 합니다.
+
+{% Aside %} `FixedSizeList` 및 `VariableSizeList` 구성요소 모두 `layout="horizontal"` 속성을 사용하여 수평 리스트를 지원합니다. 예제를 보려면 [설명서](https://react-window.now.sh/#/examples/list/fixed-size)를 살펴보세요. {% endAside %}
+
+### 그리드
+
+`react-window` 는 또한 다차원 리스트 또는 그리드 가상화를 지원합니다. 이 컨텍스트에서 표시되는 콘텐츠의 "창"은 사용자가 가로 **및** 세로로 스크롤할 때 변경됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="가상화된 그리드에서 콘텐츠 이동 창은 2차원적입니다.", width="739", height="516" %}<figcaption> 가상화된 그리드에서 콘텐츠의 "창" 이동은 2차원적입니다.</figcaption></figure>
+
+마찬가지로, 특정 리스트 항목의 크기가 다양할 수 있는지 여부에 따라 `FixedSizeGrid` 및 `VariableSizeGrid` 구성 요소 모두 사용될 수 있습니다.
+
+- `FixedSizeGrid`의 경우 API는 거의 동일하지만 열과 행 모두에 대해 높이, 너비 및 항목 수를 표시해야 합니다.
+- `VariableSizeGrid`의 경우 각각의 속성에 값 대신 함수를 전달하여 열 너비와 행 높이를 모두 변경할 수 있습니다.
+
+가상화된 그리드의 예를 보려면 [설명서](https://react-window.now.sh/#/examples/grid/fixed-size)를 살펴보세요.
+
+{% Aside %} 효율적인 리스트와 그리드를 만들기 위한 기본 구성요소를 제공하는 것 외에도 `react-window`는 특정 항목으로 스크롤하거나 사용자가 스크롤할 때 표시기를 제공하는 것과 같은 다른 기능도 제공합니다. [설명서](https://react-window.now.sh/#/examples/list/scrolling-indicators)는 이에 대한 예를 제공합니다. {% endAside %}
+
+## 스크롤 시 지연 로딩
+
+많은 웹 사이트는 사용자가 아래로 스크롤할 때까지 긴 리스트의 항목을 로드하고 렌더링하기를 대기하여 성능을 향상시킵니다. 일반적으로 "무한 로드"라고 하는 이 기술은 사용자가 끝 부분에 가까운 특정 임계값을 지나 스크롤할 때 새 DOM 노드를 목록에 추가합니다. 이것이 목록의 모든 항목을 한 번에 로드하는 것보다 낫지만 사용자가 그 이상의 행 항목을 스크롤한 경우 여전히 수천 개의 행 항목으로 DOM을 채우게 됩니다. 이로 인해 DOM 크기가 지나치게 커져 스타일 계산 및 DOM 변형을 느리게 만들어 성능에 영향을 미치기 시작할 수 있습니다.
+
+다음 다이어그램은 이를 요약하는 데 도움이 될 수 있습니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="일반 리스트와 가상화 리스트의 스크롤 차이", width="800", height="531" %}<figcaption> 일반 리스트와 가상화 리스트 간의 스크롤 차이</figcaption></figure>
+
+이 문제를 해결하는 가장 좋은 방법은 `react-window` 와 같은 라이브러리를 계속 사용하여 페이지에 있는 요소의 "창"을 작게 유지하고 사용자가 아래로 스크롤할 때 최신 항목을 지연 로드하는 것입니다. 별도의 패키지인 `react-window-infinite-loader`은 `react-window`로 이를 가능하게 합니다.
+
+`App` 구성 요소에서 관리되는 상태의 예를 보여주는 다음 코드를 고려하세요.
+
+```jsx
+import React, { Component } from 'react';
+
+import ListComponent from './ListComponent';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [], // 여기에 초기 리스트 인스턴트화
+      moreItemsLoading: false,
+      hasNextPage: true
+    };
+
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  loadMore() {
+   // 리스트에 대한 새로운 엔트리를 가져오기 위한 메서드
+  }
+
+  render() {
+    const { items, moreItemsLoading, hasNextPage } = this.state;
+
+    return (
+      <ListComponent
+        items={items}
+        moreItemsLoading={moreItemsLoading}
+        loadMore={this.loadMore}
+        hasNextPage={hasNextPage}
+      />
+    );
+  }
+}
+
+export default App;
+```
+
+`loadMore` 메서드는 무한 로더 리스트를 포함하는 자식인 `ListComponent`로 이를 전달합니다. 무한 로더는 사용자가 특정 지점을 스크롤한 후 더 많은 항목을 로드하기 위해 콜백을 실행해야 하기 때문에 중요합니다.
+
+목록을 렌더링하는 `ListComponent` 모양은 다음과 같습니다.
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import InfiniteLoader from "react-window-infinite-loader";
+
+const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
+  const Row = ({ index, style }) => (
+     {/* define the row component using items[index] */}
+  );
+
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={index => index < items.length}
+      itemCount={itemCount}
+      loadMoreItems={loadMore}
+    >
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList
+          height={500}
+          width={500}
+          itemCount={itemCount}
+          itemSize={120}
+          onItemsRendered={onItemsRendered}
+          ref={ref}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+  </InfiniteLoader>
+  )
+};
+
+export default ListComponent;
+```
+
+여기에서 `FixedSizeList` 구성 요소는 `InfiniteLoader` 내에 래핑됩니다. 로더에 할당된 속성은 다음과 같습니다.
+
+- `isItemLoaded` : 특정 항목이 로드되었는지 확인하는 메서드
+- `itemCount` : 리스트(또는 예상)의 항목 수
+- `loadMoreItems` : 리스트에 대한 추가 데이터로 resolve 하는 약속을 반환하는 콜백
+
+[렌더링 속성](https://reactjs.org/docs/render-props.html#using-props-other-than-render)은 리스트 구성 요소가 렌더링하기 위해 사용하는 함수를 반환하는 데 사용됩니다. `onItemsRendered` 및 `ref` 속성은 모두 전달해야 하는 속성입니다.
+
+다음은 가상화된 리스트에서 무한 로딩이 작동하는 방법의 예입니다.
+
+{% Glitch { id: 'react-window-infinite', path: 'src/ListComponent.js', height: 750 } %}
+
+리스트를 아래로 스크롤해도 같은 느낌이 들 수 있지만 이제 리스트의 끝까지 스크롤할 때마다 [임의의 사용자 API](https://randomuser.me/)에서 10명의 사용자를 검색하라는 요청이 만들어집니다. 한 번에 하나의 결과 "창"만 렌더링하는 동안 이 모든 작업이 수행됩니다.
+
+특정 항목의 `index`를 확인하면 최신 항목에 대한 요청이 있었고 항목이 아직 로드 중인지 여부에 따라 항목에 대해 다른 로드 상태가 표시될 수 있습니다.
+
+예를 들면 다음과 같습니다.
+
+```js
+const Row = ({ index, style }) => {
+  const itemLoading = index === items.length;
+
+  if (itemLoading) {
+      // 로드 상태 반환
+  } else {
+      // 항목 반환
+  }
+};
+```
+
+## 오버스캔
+
+가상화된 리스트의 항목은 사용자가 스크롤할 때만 변경되기 때문에 새 항목이 표시될 때 빈 공간이 잠시 깜박일 수 있습니다. 이 가이드의 이전 예제를 빠르게 스크롤하여 이를 확인할 수 있습니다.
+
+가상화된 리스트의 사용자 경험을 개선하기 위해 `react-window`로 `overscanCount` 속성을 사용해 항목을 오버스캔할 수 있습니다. 이를 통해 표시되는 "창" 외부에 항상 렌더링할 항목 수를 정의할 수 있습니다.
+
+```jsx
+<FixedSizeList
+  //...
+  overscanCount={4}
+>
+  {...}
+</FixedSizeList>
+```
+
+`overscanCount`는 `FixedSizeList` 및 `VariableSizeList` 구성 요소 모두에서 작동하며 기본값은 1입니다. 리스트의 크기와 각 항목의 크기에 따라 둘 이상의 항목을 오버스캔하면 사용자가 스크롤 할 때 빈 공간이 눈에 띄게 깜박이는 것을 방지할 수 있습니다. 그러나 너무 많은 항목을 오버스캔하면 성능에 부정적인 영향을 줄 수 있습니다. 가상화된 리스트을 사용하는 목적은 주어진 순간에 사용자가 볼 수 있는 항목 수를 최소화하는 것이므로 오버스캔된 항목의 수를 가능한 한 적게 유지하기 위해 노력합니다.
+
+`FixedSizeGrid` 및 `VariableSizeGrid`의 경우, `overscanColumnsCount` 및 `overscanRowsCount` 속성을 사용하여 각각 오버스캔할 열과 행 수를 제어합니다.
+
+## 결론
+
+애플리케이션에서 리스트 및 테이블 가상화를 어디서 시작해야 할지 잘 모르겠다면 다음 단계를 따르세요.
+
+1. 렌더링 및 스크롤링 성능을 측정합니다. 이 [문서](https://addyosmani.com/blog/react-window/)에서는 Chrome DevTools의 [FPS meter](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second)를 사용하여 항목이 리스트에서 얼마나 효율적으로 렌더링되는지 탐색하는 방법을 보여줍니다.
+2. 성능에 영향을 미치는 긴 리스트 또는 그리드에 대한`react-window`를 포함합니다.
+3. `react-window`에서 지원하지 않는 특정 기능이 있는 경우 이 기능을 직접 추가할 수 없다면 [`react-virtualized`](https://github.com/bvaughn/react-virtualized) 사용을 고려하세요.
+4. 사용자가 스크롤할 때 항목을 지연 로드해야 하는 경우 가상화된 리스트를 `react-window-infinite-loader`로 래핑하세요.
+5. 리스트에 `overscanCount` 속성을 사용하고 그리드에 `overscanColumnsCount` 및 `overscanRowsCount` 속성을 사용하여 빈 콘텐츠가 깜박이는 것을 방지합니다. 너무 많은 항목을 오버스캔하면 성능에 부정적인 영향을 미치므로 너무 많이 오버스캔하지 마세요.
diff --git a/src/site/content/ko/reliable/http-cache/index.md b/src/site/content/ko/reliable/http-cache/index.md
new file mode 100644
index 00000000000..9f10bc3ce48
--- /dev/null
+++ b/src/site/content/ko/reliable/http-cache/index.md
@@ -0,0 +1,175 @@
+---
+layout: post
+title: HTTP Cache로 불필요한 네트워크 요청 방지
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-17
+description: |-
+  불필요한 네트워크 요청을 어떻게 피할 수 있습니까? 브라우저의 HTTP 캐시는
+  첫 번째 방어선입니다. 이 방법이 반드시 가장 강력하고 유연한 방법은 아니며 캐시된 응답의 수명을 제한적으로 제어할 수는 있지만 효과적이며 모든 브라우저에서 지원되며 작업이 많이 필요하지 않습니다.
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+네트워크를 통해 리소스를 가져오는 것은 느리고 비용이 많이 듭니다.
+
+- 빠른 응답을 위해서는 브라우저와 서버 간에 많은 왕복이 필요합니다.
+- [중요한 리소스](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)가 모두 완전히 다운로드될 때까지 페이지가 로드되지 않습니다.
+- 한 개인이 제한된 모바일 데이터 요금제로 사이트에 액세스하는 경우 불필요한 모든 네트워크 요청은 비용 낭비입니다.
+
+불필요한 네트워크 요청을 어떻게 피할 수 있습니까? 브라우저의 HTTP 캐시는<br>첫 번째 방어선입니다. 이 방법이 반드시 가장 강력하고 유연한 방법은 아니며 캐시된 응답의 수명을 제한적으로 제어할 수는 있지만 효과적이며 모든 브라우저에서 지원되며 작업이 많이 필요하지 않습니다.
+
+이 가이드는 효과적인 HTTP 캐싱 구현의 기본 사항을 보여줍니다.
+
+## 브라우저 호환성 {: #browser-compatibility }
+
+실제로 HTTP 캐시라는 단일 API는 존재하지 않습니다. 웹 플랫폼 API 집합에 대한 일반적인 이름입니다. 이러한 API는 모든 브라우저에서 지원됩니다.
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## HTTP 캐시 작동 방식 {: #overview }
+
+브라우저가 제공하는 모든 HTTP 요청은 먼저 브라우저 캐시로 라우팅되어 요청을 수행하는 데 사용할 수 있는 유효한 캐시 응답이 있는지 확인합니다. 일치하는 항목이 있으면 캐시에서 응답을 읽어 네트워크 대기 시간과 전송으로 인해 발생하는 데이터 비용을 모두 제거합니다.
+
+HTTP 캐시의 동작은 [요청 헤더](https://developer.mozilla.org/docs/Glossary/Request_header)와 [응답 헤더](https://developer.mozilla.org/docs/Glossary/Response_header)의 조합에 의해 제어됩니다. 이상적인 시나리오에서는 웹 애플리케이션의 코드(요청 헤더를 결정함)와 웹 서버의 구성(응답 헤더를 결정함)을 모두 제어할 수 있습니다.
+
+보다 심층적인 개념 개요는 MDN의 [HTTP 캐싱](https://developer.mozilla.org/docs/Web/HTTP/Caching) 기사를 확인하십시오.
+
+## 요청 헤더: 기본값 유지(일반) {: #request-headers }
+
+웹 앱의 송신 요청에 포함되어야 하는 중요한 헤더가 많지만, 브라우저는 요청을 할 때 거의 항상 사용자 대신 헤더를 설정합니다. [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) 및 [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since)처럼 새로 고침 검사에 영향을 미치는 요청 헤더는 HTTP 캐시의 현재 값에 대한 브라우저의 이해를 기반으로 표시됩니다.
+
+이는 좋은 소식입니다. HTML에 `<img src="my-image.png">`과 같은 태그를 계속 포함할 수 있다는 의미이며, 브라우저는 별도의 작업 없이 사용자를 위해 자동으로  HTTP 캐시를 처리합니다.
+
+{% Aside %} 웹 애플리케이션에서 HTTP 캐시를 더 많이 제어해야 하는 개발자에게는 대안이 있습니다. 수준을 "드롭다운"하고 수동으로 [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API)를 사용하고, 특정한 [`cache`](https://developer.mozilla.org/docs/Web/API/Request) 오버라이드 세트와 함께 [`Request`](https://developer.mozilla.org/docs/Web/API/Request/cache) 개체를 전달할 수 있습니다. 이는 본 가이드의 범위를 벗어납니다! {% endAside %}
+
+## 응답 헤더: 웹 서버 구성 {: #response-headers }
+
+HTTP 캐싱 설정에서 가장 중요한 부분은 웹 서버가 각 발신 응답에 추가하는 헤더입니다. 다음 헤더는 모두 효과적인 캐싱 동작에 영향을 미칩니다.
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control). 서버는 `Cache-Control` 지시문을 반환하여 브라우저 및 기타 중간 캐시가 개별 응답을 캐시하는 방법과 기간을 지정할 수 있습니다.
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag). 브라우저가 만료된 캐시 응답을 찾으면 작은 토큰(일반적으로 파일 내용의 해시)을 서버로 보내 파일이 변경되었는지 확인할 수 있습니다. 서버가 동일한 토큰을 반환하면 파일이 동일하므로 다시 다운로드할 필요가 없습니다.
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). 이 헤더는 `ETag`와 동일한 목적을 위해 사용되지만 시간 기반 전략을 사용하여 `ETag`의 콘텐츠 기반 전략과 반대로 리소스가 변경되었는지 여부를 판단합니다.
+
+일부 웹 서버는 기본적으로 해당 헤더를 설정할 수 있도록 지원하는 기능이 내장되어 있는 반면, 다른 웹 서버는 헤더를 명시적으로 구성하지 않는 한 헤더를 완전히 생략합니다. 헤더를 구성하는 *방법*에 대한 구체적인 세부 정보는 사용하는 웹 서버에 따라 상당히 달라지며 가장 정확한 세부 정보를 얻으려면 서버 설명서를 참조해야 합니다.
+
+검색 시간을 절약하기 위해 자주 사용하는 웹 서버를 구성하는 방법은 다음과 같습니다.
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+`Cache-Control` 응답 헤더를 생략하더라도 HTTP 캐싱이 비활성화되지 않습니다! 대신, 브라우저는 어떤 유형의 캐싱 동작이 주어진 유형의 내용에 가장 적합한지 [효과적으로 추측](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness)합니다. 응답 헤더를 구성하는 것보다 더 많은 제어 권한을 원할 수 있으므로 시간을 들여 응답 헤더를 구성하십시오.
+
+## 어떤 응답 헤더 값을 사용해야 할까요? {: #response-header-strategies }
+
+웹 서버의 응답 헤더를 구성할 때 다루어야 하는 두 가지 중요한 시나리오가 있습니다.
+
+### 버전 지정된 URL {: #versioned-urls }에 대한 장기 캐싱
+
+{% Details %} {% DetailsSummary 'h4' %} 버전 지정된 URL이 버전 지정된 URL 캐싱 전략에 도움이 되는 방법은 캐싱된 응답을 더 쉽게 무효화하므로 좋은 방법입니다. {% endDetailsSummary %} 서버가 브라우저에 CSS 파일을 1년 동안 캐시하도록 지시(<code>Cache-Control: max-age=31536000</code>)했지만 디자이너가 즉시 출시해야 하는 긴급 업데이트를 방금 수행했다고 가정하도록 하겠습니다. 파일의 "stale" 캐시 사본을 업데이트하도록 브라우저에 알리려면 어떻게 해야 합니까? 적어도 리소스의 URL을 변경하지 않고는 불가능합니다. 브라우저가 응답을 캐시한 후 캐싱된 버전은 <code>max-age</code> 또는 <code>expires</code>에 의해 더 이상 최신 상태가 아닐 때까지 사용되거나 예를 들어 사용자가 브라우저 캐시를 삭제하는 것과 같은 다른 이유로 캐시에서 제거될 때까지 사용됩니다. 따라서 페이지가 구성될 때 서로 다른 사용자가 다른 버전의 파일을 사용하게 될 수 있습니다. 리소스를 방금 가져온 사용자는 새 버전을 사용하는 반면, 이전(그러나 여전히 유효한) 복사본을 캐시한 사용자는 이전 버전의 응답을 사용합니다. 클라이언트 측 캐싱과 빠른 업데이트의 두 가지 장점을 모두 활용하려면 어떻게 해야 합니까? 리소스 URL을 변경하고 사용자가 콘텐츠가 변경될 때마다 새로운 응답을 다운로드하도록 강요합니다. 일반적으로 파일 이름 예를 들어 <code>style.x234dff.css</code>에서 파일 지문 또는 버전 번호를 내장하여 이를 수행합니다.{% endDetails %}
+
+["지문](https://en.wikipedia.org/wiki/Fingerprint_(computing))" 또는 버전 정보가 포함되어 있고 내용이 변경되지 않는 URL에 대한 요청에 응답할 때 응답에 `Cache-Control: max-age=31536000`을 추가하십시오.
+
+이 값을 설정하면 향후 1년(31,536,000초, 지원되는 최대값) 동안 동일한 URL을 로드해야 할 때 웹 서버에 네트워크를 요청할 필요 없이 HTTP 캐시의 값을 즉시 사용할 수 있습니다. 네트워크를 피함으로써 얻을 수 있는 신뢰성과 속도를 즉시 얻을 수 있습니다!
+
+webpack과 같은 빌드 도구는 자산 URL에 해시 지문을 할당하는 [프로세스를 자동화](https://webpack.js.org/guides/caching/#output-filenames)할 수 있습니다.
+
+{% Aside %} 비록 일부 브라우저에서 [무시](https://www.keycdn.com/blog/cache-control-immutable#browser-support)되더라도 [`immutable` 속성](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading)을 추가 최적화로 `Cache-Control` 헤더에 추가할 수도 있습니다. {% endAside %}
+
+### 버전 없는 URL {: #unversioned-urls }에 대한 서버 재검증
+
+불행히도 로드하는 모든 URL의 버전이 지정되는 것은 아닙니다. 웹 앱을 배포하기 전에 빌드 단계를 포함할 수 없으므로 자산 URL에 해시를 추가할 수 없습니다. 그리고 모든 웹 애플리케이션에는 HTML 파일이 필요합니다. 이 파일에는 (거의!) 버전 정보가 포함되어 있지 않습니다. 방문할 URL이 `https://example.com/index.34def12.html`임을 기억해야 하는 경우 어느 누구도 웹 앱을 사용하지 않기 때문입니다. 그렇다면 해당 URL에 대해 무엇을 할 수 있습니까?
+
+이것은 패배를 인정해야 하는 시나리오 중 하나입니다. HTTP 캐싱만으로는 네트워크를 완전히 피할 수 있을 만큼 강력하지 않습니다. (걱정하지 마세요. 곧 [서비스 워커](/service-workers-cache-storage/)에 대해 배우게 될 것입니다. 이 서비스 워커는 전투를 유리하게 되돌리는 데 필요한 지원을 제공할 것입니다.) 그러나 네트워크 요청이 최대한 빨리 가능한 효율적으로 이루어지도록 하기 위해 취할 수 있는 몇 가지 단계가 있습니다.
+
+다음 `Cache-Control` 값은 버전이 지정되지 않은 URL이 캐시되는 위치와 방법을 미세 조정하는 데 도움이 될 수 있습니다.
+
+- `no-cache`. 이는 캐시된 URL 버전을 사용하기 전에 매번 서버에서 유효성을 다시 확인해야 한다고 브라우저에 지시합니다.
+- `no-store`. 이는 브라우저와 다른 중간 캐시(예: CDN)가 파일의 어떤 버전도 저장하지 않도록 지시합니다.
+- `private`. 브라우저는 파일을 캐시할 수 있지만 중간 캐시는 캐시할 수 없습니다.
+- `public`. 응답은 모든 캐시에 의해 저장될 수 있습니다.
+
+[부록: `Cache-Control` 순서도](#flowchart)를 확인하여 어떠한 `Cache-Control` 값을 사용할지 결정하는 프로세스를 시각화하십시오. 또한 `Cache-Control`은 쉼표로 구분된 지시문 목록을 허용할 수 있습니다. <a href="#examples" data-md-type="link">부록: `Cache-Control` 예제</a>를 참조하십시오.
+
+이와 함께 [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) 또는 [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified) 두 개의 추가 응답 헤더 중 하나를 설정하는 것도 도움이 될 수 있습니다. [응답 헤더](#response-headers)에서 언급했듯이 `ETag`와 `Last-Modified` 모두 브라우저가 만료된 캐시된 파일을 다시 다운로드해야 하는지 여부를 결정하는 동일한 목적을 수행합니다. `ETag`가 더 정확하기 때문에 권장되는 접근 방식입니다.
+
+{% Details %} {% DetailsSummary 'h4' %} ETag 예시 {% endDetailsSummary %} 처음 가져온 후 120초가 경과했고 브라우저가 동일한 리소스에 대한 새 요청을 시작했다고 가정하겠습니다. 먼저 브라우저는 HTTP 캐시를 확인하고 이전 응답을 찾습니다. 불행하게도 응답이 이제 만료되었기 때문에 브라우저가 이전 응답을 사용할 수 없습니다. 이 시점에서 브라우저는 새 요청을 전달하고 새로운 전체 응답을 가져올 수 있습니다. 그러나 리소스가 변경되지 않은 경우 이미 캐시에 있는 동일한 정보를 다운로드할 이유가 없기 때문에 비효율적입니다! <code>ETag</code> 헤더에 지정된 검증 토큰이 해결하도록 설계된 문제입니다. 서버는 일반적으로 파일 내용의 해시 또는 기타 지문인 임의의 토큰을 생성하고 반환합니다. 브라우저는 지문이 어떻게 생성되는지 알 필요가 없습니다. 다음 요청 시에만 서버로 보내면 됩니다. 지문이 여전히 동일하면 리소스가 변경되지 않았으며 브라우저는 다운로드를 건너뛸 수 있습니다. {% endDetails %}
+
+`ETag` 또는 `Last-Modified`를 설정하면 재검증 요청을 훨씬 더 효율적으로 만들 수 있습니다.  [요청 헤더](#request-headers)에 언급되어 있는 [`If-Modified-Since`](#request-headers) 또는 [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) 요청 헤더를 트리거할 수 있습니다.
+
+적절하게 구성된 웹 서버가 수신 요청 헤더를 볼 때, 브라우저가 HTTP 캐시에 이미 가지고 있는 리소스의 버전이 웹 서버의 최신 버전과 일치하는지 확인할 수 있습니다. 일치하는 항목이 있는 경우 서버는 [`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304) HTTP 응답으로 응답할 수 있습니다. 이는 "이미 가지고 있는 것을 계속 사용하라는" 것과 동일합니다. 이러한 유형의 응답을 보낼 때 전송할 데이터가 거의 없으므로 요청되는 실제 리소스의 복사본을 실제로 다시 보내는 것보다 훨씬 빠릅니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="304 헤더로 리소스 및 서버 응답을 요청하는 클라이언트 다이어그램.", width="474", height="215" %} <figcaption> 브라우저는 서버에서 <code>/file</code>을 요청하고 서버의 파일에 대한 <code>ETag</code>가 브라우저의 <code>If-None-Match</code> 값과 동일하지 않을 경우 전체 파일만 반환하도록 서버에 지시하는 <code>If-None-Match</code> 헤더를 포함합니다. 이 경우, 2 값이 일치하지 않으므로 서버는 파일이 얼마나 오래 캐싱(<code>Cache-Control: max-age=120</code>)되어야 하는지에 대한 지시를 받아 <code>304 Not Modified</code> 응답을 반환합니다. </figcaption></figure>
+
+## 요약 {: #summary }
+
+HTTP 캐시는 불필요한 네트워크 요청을 줄이기 때문에 로드 성능을 향상시키는 효과적인 방법입니다. 모든 브라우저에서 지원되며 설정하는 데 그리 많은 작업이 필요하지 않습니다.
+
+다음 `Cache-Control` 구성을 시작하는 것이 좋습니다.
+
+- 사용하기 전에 서버에서 재검증해야 하는 리소스의 경우 `Cache-Control: no-cache`.
+- 캐싱되지 않아야 하는 리소스의 경우 `Cache-Control: no-store`.
+- 버전 지정된 리소스의 경우 `Cache-Control: max-age=31536000`.
+
+그리고 `ETag` 또는 `Last-Modified` 헤더를 사용하면 만료된 캐시 리소스를 보다 효율적으로 재검증할 수 있습니다.
+
+{% Aside 'codelab' %} [HTTP 캐시 코드랩](/codelab-http-cache)을 사용하여 Express에서 `Cache-Control` 및 `ETag`에 대한 실습 경험을 얻으십시오. {% endAside %}
+
+## 자세히 알아보기 {: #learn-more }
+
+`Cache-Control` 헤더 사용에 대해 더 자세히 알고 싶은 경우 Jake Archibald의 [캐싱 모범 사례 및 최대 연령 문제](https://jakearchibald.com/2016/caching-best-practices/) 가이드를 확인하세요.
+
+방문자를 위한 캐시 사용 최적화 방법에 대한 지침은 [Love your cache](/love-your-cache)를 참조하십시오.
+
+## 부록: 추가 팁 {: #tips }
+
+시간이 더 있을 경우 여기에 제공되어 있는 HTTP 캐시 사용을 최적화할 수 있는 방법을 살펴보세요.
+
+- 일관된 URL을 사용하세요. 다른 URL에서 동일한 콘텐츠를 제공하는 경우 해당 콘텐츠를 여러 번 가져와서 저장합니다.
+- 이탈을 최소화합니다. 리소스(예: CSS 파일)의 일부가 자주 업데이트되는 반면 나머지 파일(예: 라이브러리 코드)은 그렇지 않은 경우 자주 업데이트되는 코드를 별도의 파일로 분할하고 자주 업데이트되는 코드는 짧은 기간 캐싱 전략을 사용하고 자주 변경되지 않는 코드는 긴 캐시 지속 시간 전략을 사용하는 것이 좋습니다.
+- `Cache-Control` 정책에서 약간의 부실한 정도가 허용될 경우 새로운 [`stale-while-revalidate`](/stale-while-revalidate/) 지시 사항을 확인하십시오.
+
+## 부록: `Cache-Control` 흐름도 {: #flowchart }
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="흐름도", width="595", height="600" %}
+
+## 부록: `Cache-Control` 예제 {: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<code>Cache-Control</code> 값</th>
+        <th>설명</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>응답은 최대 1일(60초 x 60분 x 24시간) 동안 브라우저 및 중간 캐시가 캐싱할 수 있습니다.</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>응답은 최대 10분(60초 x 10분) 동안 (중간 캐시가 아닌) 브라우저가 캐싱할 수 있습니다.</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>응답은 1년 동안 모든 캐시가 저장할 수 있습니다.</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>응답은 캐시할 수 없으며 모든 요청에서 전체를 가져와야 합니다.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/ko/reliable/index.md b/src/site/content/ko/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/ko/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/ko/reliable/offline-cookbook/index.md b/src/site/content/ko/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..f070e6a4059
--- /dev/null
+++ b/src/site/content/ko/reliable/offline-cookbook/index.md
@@ -0,0 +1,616 @@
+---
+layout: post
+title: 오프라인 요리책
+description: 앱이 오프라인에서 작동하도록 하기 위한 몇 가지 일반적인 레시피.
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+[Service Worker](/service-workers-cache-storage/)를 사용하여 오프라인으로 해결하려는 시도를 포기하고 개발자가 스스로 해결하도록 움직일 수 있는 부분을 제공했습니다. 캐싱 및 요청 처리 방법을 제어할 수 있습니다. 즉, 자신만의 패턴을 만들 수 있습니다. 몇 가지 가능한 패턴을 개별적으로 살펴보겠습니다. 하지만 실제로는 URL과 컨텍스트에 따라 많은 패턴을 함께 사용할 것입니다.
+
+이러한 패턴 중 일부의 작동 데모는 [스킬 훈련](https://jakearchibald.github.io/trained-to-thrill/) 및 성능 영향을 보여주는 [이 비디오](https://www.youtube.com/watch?v=px-J9Ghvcx4)를 참조하십시오.
+
+## 캐시 머신 - 리소스 저장 시기
+
+[Service Worker](/service-workers-cache-storage/)를 사용하면 캐싱과 별개로 요청을 처리할 수 있으므로, 따로 설명하겠습니다. 먼저 캐싱을 언제 수행해야 할까요?
+
+### 설치 시 - 종속성 {: #on-install-as-dependency }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="설치 시 - 종속성.", width="800", height="498" %}<figcaption> 설치 시 - 종속성.</figcaption></figure>
+
+Service Worker는 `install` 이벤트를 제공합니다. 이를 사용하여 다른 이벤트를 처리하기 전에 준비해야 하는 항목을 준비할 수 있습니다. 이 문제가 발생하는 동안 Service Worker의 이전 버전은 여전히 실행 중이고 페이지를 제공하므로, 여기에서 수행하는 작업이 중단되어서는 안 됩니다.
+
+**이상적인 대상:** CSS, 이미지, 글꼴, JS, 템플릿… 기본적으로 사이트의 해당 "버전"에 대해 정적이라고 생각하는 모든 것.
+
+가져오지 못한 경우, 사이트를 완전히 작동하지 않게 만드는 요소이며, 동등한 플랫폼별 앱이 초기 다운로드의 일부로 만드는 요소입니다.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil`은 설치의 길이와 성공을 정의하는 약속을 받습니다. 약속이 거부되면 설치가 실패한 것으로 간주되고 이 서비스 워커는 중단됩니다(이전 버전이 실행 중인 경우 그대로 유지됨). `caches.open()` 및 `cache.addAll()` 약속을 반환합니다. 리소스를 가져오는 데 실패하면 `cache.addAll()` 호출이 거부됩니다.
+
+[스킬 훈련](https://jakearchibald.github.io/trained-to-thrill/)에서 [정적 자산](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3)을 캐시하는 데 이것을 사용합니다.
+
+### 설치 시 - 종속성이 아님 {: #on-install-not }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="설치 시 - 종속성이 아님.", width="800", height="500" %}<figcaption> 설치 시 - 종속성이 아님.</figcaption></figure>
+
+위와 비슷하지만 설치 완료를 지연시키지 않으며 캐싱이 실패해도 설치가 실패하지 않습니다.
+
+**이상적인 대상:** 게임의 나중 레벨을 위한 자산과 같이 당장 필요하지 않은 더 큰 리소스.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+위의 예는 `cache.addAll` 11~20레벨 약속을 `event.waitUntil`(으)로 다시 전달하지 못하므로 실패하더라도 게임은 오프라인에서 계속 사용할 수 있습니다. 물론 해당 레벨이 없을 가능성에 대비하고 누락된 경우 캐싱을 다시 시도해야 합니다.
+
+Service Worker는 이벤트 처리가 완료되었기 때문에 레벨 11–20이 다운로드되는 동안 종료될 수 있습니다. 즉, 캐시되지 않습니다. 미래에는 [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API)가 이와 같은 경우와 영화와 같은 대용량 다운로드를 처리할 것입니다. 해당 API는 현재 Chromium 제품군에서만 지원됩니다.
+
+### 활성화 시 {: #on-activate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="활성화 시.", width="800", height="500" %} <figcaption>활성화 시.</figcaption></figure>
+
+**이상적인 대상:** 정리 및 마이그레이션.
+
+새 Service Worker가 설치되고 이전 버전이 사용되지 않으면 새 Service Worker가 활성화되고 `activate` 이벤트가 발생합니다. 이전 버전이 방해가 되기 때문에 [IndexedDB에서 스키마 마이그레이션](/indexeddb-best-practices/)을 처리하고 사용하지 않는 캐시도 삭제하는 것이 좋습니다.
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+`fetch`와 같은 다른 이벤트가 대기열에 들어가므로 긴 활성화는 잠재적으로 페이지 로드를 차단할 수 있습니다. 활성화를 가능한 한 적게 유지하고 이전 버전이 활성화된 동안에는 *할 수 없었던* 작업에만 사용하십시오.
+
+[스릴 훈련](https://jakearchibald.github.io/trained-to-thrill/)에서 이것을 사용하여 [오래된 캐시](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17)를 제거합니다.
+
+### 사용자 상호작용 시 {: #on-user-interaction }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="사용자 상호작용 시On user interaction.", width="800", height="222" %} <figcaption>사용자 상호작용 시.</figcaption></figure>
+
+**이상적인 대상:** 전체 사이트를 오프라인으로 전환할 수 없고 사용자가 오프라인에서 사용할 수 있는 콘텐츠를 선택할 수 있도록 선택한 경우. 예를 들어 YouTube와 같은 동영상, Wikipedia의 글, Flickr의 특정 갤러리.
+
+사용자에게 "나중에 읽기" 또는 "오프라인용으로 저장" 버튼을 제공합니다. 클릭하면 네트워크에서 필요한 것을 가져와 캐시에 넣습니다.
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+[캐시 API](https://developer.mozilla.org/docs/Web/API/Cache)는 페이지와 Service Worker에서 사용할 수 있습니다. 즉, 캐시에 항목을 추가하기 위해 Service Worker를 포함할 필요가 없습니다.
+
+### 네트워크 응답 시 {: #on-network-response }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="네트워크 응답 시.", width="800", height="390" %} <figcaption>네트워크 응답 시.</figcaption></figure>
+
+**이상적인 대상:** 자주 업데이트하는 사용자의 받은 편지함 또는 기사 콘텐츠와 같은 리소스. 아바타와 같은 비필수적인 콘텐츠에도 유용하지만 주의가 필요합니다.
+
+요청이 캐시의 어떤 것과도 일치하지 않으면 네트워크에서 요청을 가져와 페이지로 보내고 동시에 캐시에 추가합니다.
+
+아바타와 같은 URL 범위에 대해 이 작업을 수행하는 경우 원본 저장소가 부풀려지지 않도록 주의해야 합니다. 사용자가 디스크 공간을 회수해야 하는 경우 주요 후보가 되고 싶지 않습니다. 더 이상 필요하지 않은 항목은 캐시에서 제거하십시오.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+효율적인 메모리 사용을 위해 응답/요청 본문을 한 번만 읽을 수 있습니다. 위의 코드는 [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone)을 사용하여 별도로 읽을 수 있는 추가 복사본을 만듭니다.
+
+[스릴 훈련](https://jakearchibald.github.io/trained-to-thrill/)에서 [Flickr 이미지](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109)를 캐시할 때 사용합니다.
+
+### 오래된 재검증 {: #stale-while-revalidate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="오래된 재검증.", width="800", height="388" %} <figcaption>오래된 재검증.</figcaption></figure>
+
+**이상적인 대상:** 최신 버전이 필수적이지 않은 자주 업데이트하는 리소스. 아바타는 이 범주에 속할 수 있습니다.
+
+사용 가능한 캐시된 버전이 있는 경우 사용하되 다음 업데이트를 위해 가져옵니다.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+HTTP의 [오래된 재검증](https://www.mnot.net/blog/2007/12/12/stale)과 매우 유사합니다.
+
+### 푸시 메시지 {: #on-push-message }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="푸시 메시지.", width="800", height="498" %}<figcaption> 푸시 메시지.</figcaption></figure>
+
+[푸시 API](/push-notifications/)는 Service Worker 위에 구축된 또 다른 기능입니다. 이를 통해 OS의 메시징 서비스에서 메시지에 대한 응답으로 Service Worker를 깨울 수 있습니다. 이는 사용자가 사이트에 열려 있는 탭이 없는 경우에도 발생합니다. 오직 Service Worker만 깨어납니다. 페이지에서 이 작업을 수행할 수 있는 권한을 요청하면 사용자에게 메시지가 표시됩니다.
+
+**이상적인 대상:** 채팅 메시지, 속보 또는 이메일과 같은 알림과 관련된 콘텐츠. 또한 할 일 목록 업데이트 또는 캘린더 변경과 같이 즉각적인 동기화의 이점을 제공하는 자주 변경하는 콘텐츠.
+
+{% YouTube '0i7YdSEQI1w' %}
+
+일반적인 최종 결과는 알림을 탭하면 관련 페이지가 열리고/포커스되지만 이러한 일이 발생하기 전에 캐시를 업데이트하는 것이 *매우* 중요합니다. 사용자는 푸시 메시지를 수신할 때 분명히 온라인 상태이지만 알림과 최종적으로 상호 작용할 때는 그렇지 않을 수 있으므로 이 콘텐츠를 오프라인에서 사용할 수 있도록 하는 것이 중요합니다.
+
+이 코드는 알림을 표시하기 전에 캐시를 업데이트합니다.
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### 백그라운드 동기화 시 {: #on-background-sync }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="백그라운드 동기화 시.", width="800", height="219" %} <figcaption>백그라운드 동기화 시.</figcaption></figure>
+
+[백그라운드 동기화](https://developer.chrome.com/blog/background-sync/)는 Service Worker를 기반으로 구축된 또 다른 기능입니다. 이를 통해 일회성 또는 (매우 경험적) 간격으로 백그라운드 데이터 동기화를 요청할 수 있습니다. 이는 사용자가 사이트에 열려 있는 탭이 없는 경우에도 발생합니다. 오직 Service Worker만 깨어납니다. 페이지에서 이 작업을 수행할 수 있는 권한을 요청하면 사용자에게 메시지가 표시됩니다.
+
+**이상적인 대상:** 긴급하지 않은 업데이트, 특히 소셜 타임라인 또는 뉴스 기사와 같이 업데이트당 푸시 메시지가 너무 자주 발생하여 사용자에게 너무 자주 발생하는 업데이트.
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## 캐시 지속성 {: #cache-persistence }
+
+원본에는 원하는 작업을 수행할 수 있는 특정 양의 여유 공간이 제공됩니다. 그 여유 공간은 [(로컬) 저장소](https://developer.mozilla.org/docs/Web/API/Storage), [IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB), [파일 시스템 액세스](/file-system-access/)는 물론 [캐시](https://developer.mozilla.org/docs/Web/API/Cache) 와 같은 모든 원본 저장소 간에 공유됩니다.
+
+얻는 공간은 정해지지 않습니다. 기기 및 저장소 조건에 따라 다릅니다. 다음을 통해 얼마나 보유하는지 확인할 수 있습니다.
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+그러나 모든 브라우저 저장소와 마찬가지로 브라우저는 장치에 저장소 압력이 가해지면 데이터를 자유롭게 버릴 수 있습니다. 불행히도 브라우저는 어떻게 해서든 유지하고 싶은 영화와 별로 신경 쓰지 않는 게임을 구분할 수 없습니다.
+
+이 문제를 해결하려면 [StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager) 인터페이스를 사용하십시오.
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+물론 사용자가 권한을 부여해야 합니다. 이를 위해 권한 API를 사용합니다.
+
+사용자를 이 흐름의 일부로 만드는 것이 중요합니다. 이제 사용자가 삭제를 제어할 수 있을 것으로 기대할 수 있기 때문입니다. 기기의 저장소가 부족하고 중요하지 않은 데이터를 지워도 문제가 해결되지 않으면 사용자는 어떤 항목을 보관하고 제거할지 판단하게 됩니다.
+
+이것이 작동하려면 운영 체제가 브라우저를 단일 항목으로 보고하는 대신 저장소 사용량 분석에서 "영구적" 출처를 플랫폼별 앱과 동등하게 취급해야 합니다.
+
+## 제안 제공 - 요청에 응답하기 {: #serving-suggestions }
+
+얼마나 많은 캐싱을 하는지는 중요하지 않습니다. Service Worker는 시간과 방법을 알려주지 않는 한 캐시를 사용하지 않을 것입니다. 다음은 요청 처리를 위한 몇 가지 패턴입니다.
+
+### 캐시 전용 {: #cache-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="캐시 전용.", width="800", height="272" %} <figcaption>캐시 전용.</figcaption></figure>
+
+**이상적인 대상:** 사이트의 특정 "버전"에 대해 정적인 것으로 간주되는 모든 것. 설치 이벤트에서 이러한 항목을 캐시해야 하므로 해당 항목에 의존할 수 있습니다.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+…이 경우를 특별히 처리할 필요는 없지만 [캐시, 네트워크로 폴백](#cache-falling-back-to-network)이 이를 처리합니다.
+
+### 네트워크 전용 {: #network-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="네트워크 전용.", width="800", height="272" %} <figcaption>네트워크 전용.</figcaption></figure>
+
+**이상적인 대상:** 분석 핑, GET이 아닌 요청과 같이 오프라인에 상응하는 항목이 없는 것.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+…이 경우를 특별히 처리할 필요는 없지만 [캐시, 네트워크로 폴백](#cache-falling-back-to-network)이 이를 처리합니다.
+
+### 캐시, 네트워크로 폴백 {: #cache-falling-back-to-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="캐시, 네트워크로 폴백.", width="800", height="395" %} <figcaption>캐시, 네트워크로 폴백.</figcaption></figure>
+
+**이상적인 대상:** 오프라인 우선 구축. 이러한 경우 대부분의 요청을 처리하는 방법입니다. 다른 패턴은 들어오는 요청에 따라 예외가 됩니다.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+이렇게 하면 캐시에 있는 항목에 대한 "캐시 전용" 동작과 캐시되지 않은 항목에 대한 "네트워크 전용" 동작이 제공됩니다(캐시할 수 없기 때문에 모든 GET이 아닌 요청 포함).
+
+### 캐시 및 네트워크 경쟁 {: #cache-and-network-race }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="캐시 및 네트워크 경쟁.", width="800", height="427" %} <figcaption>캐시 및 네트워크 경쟁.</figcaption></figure>
+
+**이상적인 대상:** 디스크 액세스가 느린 장치에서 성능을 추구하는 소규모 애셋.
+
+구형 하드 드라이브, 바이러스 스캐너 및 더 빠른 인터넷 연결의 일부 조합을 사용하면 네트워크에서 리소스를 가져오는 것이 디스크로 이동하는 것보다 빠를 수 있습니다. 그러나 사용자가 기기에 콘텐츠를 가지고 있을 때 네트워크에 접속하는 것은 데이터 낭비일 수 있습니다.
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### 캐시로 네트워크 폴백 {: #network-falling-back-to-cache }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="캐시로 네트워크 폴백.", width="800", height="388" %} <figcaption>캐시로 네트워크 폴백.</figcaption></figure>
+
+**이상적인 대상:** 사이트의 "버전" 외부에서 자주 업데이트되는 리소스의 빠른 수정. 예: 글, 아바타, 소셜 미디어 타임라인 및 게임 리더보드.
+
+즉, 온라인 사용자에게는 최신 콘텐츠를 제공하지만 오프라인 사용자에게는 캐시된 이전 버전을 제공합니다. 네트워크 요청이 성공하면 [캐시 항목](#on-network-response)을 업데이트할 가능성이 큽니다.
+
+그러나 이 방법에는 결함이 있습니다. 사용자가 연결이 간헐적이거나 느린 경우 기기에 이미 완벽하게 수용 가능한 콘텐츠를 가져오기 전에 네트워크가 실패할 때까지 기다려야 합니다. 이것은 매우 오랜 시간이 걸릴 수 있으며 실망스러운 사용자 경험입니다. 더 나은 솔루션을 보려면 다음 패턴인 [캐시 후 네트워크](#cache-then-network)를 참조하세요.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### 캐시 후 네트워크 {: #cache-then-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="캐시 후 네트워크.", width="800", height="478" %} <figcaption>캐시 후 네트워크.</figcaption></figure>
+
+**이상적인 대상:** 자주 업데이트되는 콘텐츠. 예: 글, 소셜 미디어 타임라인 및 게임. 리더보드.
+
+이렇게 하려면 페이지에서 캐시에 하나, 네트워크에 하나로 두 가지 요청을 해야 합니다. 아이디어는 캐시된 데이터를 먼저 표시한 다음 네트워크 데이터가 도착할 때 페이지를 업데이트하는 것입니다.
+
+때때로 새로운 데이터가 도착하면(예: 게임 리더보드) 현재 데이터를 교체할 수 있지만, 이는 더 큰 콘텐츠 조각으로 인해 방해가 될 수 있습니다. 기본적으로 사용자가 읽거나 상호 작용할 수 있는 항목을 "사라지게" 하지마십시오.
+
+Twitter는 이전 콘텐츠 위에 새 콘텐츠를 추가하고 사용자가 중단되지 않도록 스크롤 위치를 조정합니다. 이는 Twitter가 대부분 콘텐츠에 대해 선형적인 순서를 유지하기 때문에 가능합니다. 저는 가능한 한 빨리 콘텐츠를 화면에 표시하면서 최신 콘텐츠가 도착하는 즉시 표시하기 위해 [스킬 훈련](https://jakearchibald.github.io/trained-to-thrill/)을 받은 이 패턴을 복사했습니다.
+
+**페이지의 코드:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**Service Worker의 코드:**
+
+항상 네트워크로 이동하고 이동하면서 캐시를 업데이트해야 합니다.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+[스킬 훈련](https://jakearchibald.github.io/trained-to-thrill/)에서 [fetch 대신 XHR](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3)을 사용하고 Accept 헤더를 남용하여 Service Worker에 결과를 가져올 위치([페이지 코드](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70), [Service Worker 코드](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61))를 알려줌으로써 이 문제를 해결했습니다.
+
+### 일반 폴백 {: #generic-fallback }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="일반 폴백.", width="800", height="389" %} <figcaption>일반 폴백.</figcaption></figure>
+
+캐시 및/또는 네트워크에서 무언가를 제공하는 데 실패하면 일반 폴백을 제공할 수 있습니다.
+
+**이상적인 대상:** 아바타, 실패한 POST 요청, "오프라인에서는 사용할 수 없음"과 같은 2차 이미지. 페이지.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+대체할 항목은 [설치 종속성](#on-install-as-dependency)일 가능성이 높습니다.
+
+페이지에서 이메일을 게시하는 경우 서비스 작업자는 이메일을 IndexedDB '발신함'에 저장하는 것으로 대체하고 페이지에 전송에 실패했지만 데이터는 성공적으로 보관되었음을 알려 응답할 수 있습니다.
+
+### Service Worker 측 템플릿 {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="Service Worker 측 템플릿.", width="800", height="463" %} <figcaption>Service Worker 측 템플릿.</figcaption></figure>
+
+**이상적인 대상:** 서버 응답을 캐시할 수 없는 페이지.
+
+[서버에서 페이지를 렌더링하면 속도가 빨라지지만](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), "다음으로 로그인"과 같이 캐시에 의미가 없을 수 있는 상태 데이터를 포함할 수 있습니다. 페이지가 Service Worker에 의해 제어되는 경우 대신 템플릿과 함께 JSON 데이터를 요청하고 대신 렌더링하도록 선택할 수 있습니다.
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## 정리
+
+이러한 방법 중 하나로만 제한되지 않습니다. 실제로 요청 URL에 따라 여러 개를 사용하게 될 것입니다. 예를 들어, [스킬 훈련](https://jakearchibald.github.io/trained-to-thrill/)은 다음을 사용합니다.
+
+- 정적 UI 및 동작에 대한 [설치 시 캐시](#on-install-as-dependency)
+- Flickr 이미지 및 데이터에 대한 [네트워크 응답 캐시](#on-network-response)
+- 대부분의 요청에 대해 [캐시에서 가져오기, 네트워크로 폴백](#cache-falling-back-to-network)
+- Flickr 검색 결과에 대해 [캐시에서 가져온 후 네트워크](#cache-then-network)
+
+요청을 보고 수행할 작업을 결정하십시오.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+…그림을 얻습니다.
+
+### 크레딧
+
+…사랑스러운 아이콘:
+
+- Buzzyrobot의 [코드](http://thenounproject.com/term/code/17547/)
+- Scott Lewis의 [캘린더](http://thenounproject.com/term/calendar/4672/)
+- Ben Rizzo의 [네트워크](http://thenounproject.com/term/network/12676/)
+- Thomas Le Bas의 [SD](http://thenounproject.com/term/sd-card/6185/)
+- iconsmind.com의 [CPU](http://thenounproject.com/term/cpu/72043/)
+- trasnik의 [휴지통](http://thenounproject.com/term/trash/20538/)
+- @daosme의 [알림](http://thenounproject.com/term/notification/32514/)
+- Mister Pixel의 [레이아웃](http://thenounproject.com/term/layout/36872/)
+- P.J. Onori의 [클라우드](http://thenounproject.com/term/cloud/2788/)
+
+"게시"를 누르기 전에 많은 하울링 오류를 잡아준 [}Jeff Posnick](https://twitter.com/jeffposnick)에게 감사드립니다.
+
+### 추가 참고 자료
+
+- [Service Workers—소개](/service-workers-cache-storage/)
+- [Service Worker가 준비되었습니까?](https://jakearchibald.github.io/isserviceworkerready/) —기본 브라우저에서 구현 상태 추적
+- [JavaScript 약속 - 소개](/promises) - 약속 안내
diff --git a/src/site/content/ko/reliable/service-worker-caching-and-http-caching/index.md b/src/site/content/ko/reliable/service-worker-caching-and-http-caching/index.md
new file mode 100644
index 00000000000..8c9473e8e0a
--- /dev/null
+++ b/src/site/content/ko/reliable/service-worker-caching-and-http-caching/index.md
@@ -0,0 +1,272 @@
+---
+layout: post
+title: 서비스 워커 캐싱 및 HTTP 캐싱
+subhead: 서비스 워커 캐시 및 HTTP 캐시 계층 전반에 걸쳐 일관되거나 다른 만료 논리를 사용할 경우의 장단점.
+authors:
+  - jonchen
+date: 2020-07-17
+description: 서비스 워커 캐시 및 HTTP 캐시 계층 전반에 걸쳐 일관되거나 다른 만료 논리를 사용할 경우의 장단점.
+tags:
+  - blog
+  - network
+  - service-worker
+  - offline
+---
+
+서비스 워커와 PWA가 최신 웹 애플리케이션의 표준이 되는 동안 리소스 캐싱은 그 어느 때보다 복잡해졌습니다. 이 기사에서는 다음을 포함하여 브라우저 캐싱의 큰 그림을 다룹니다.
+
+- 서비스 워커 캐싱과 HTTP 캐싱의 사용 사례와 차이점.
+- 일반 HTTP 캐싱 전략과 비교하여 다양한 서비스 워커 캐싱 만료 전략의 장단점.
+
+## 캐싱 흐름 개요
+
+상위 수준에서 브라우저는 리소스를 요청할 때 아래의 캐싱 순서를 따릅니다.
+
+1. **서비스 워커 캐시** : 서비스 워커는 리소스가 캐시에 있는지 확인하고 프로그래밍된 캐싱 전략에 따라 리소스 자체를 반환할지 여부를 결정합니다. 이것은 자동으로 발생하지 않습니다. 서비스 워커에서 fetch 이벤트 핸들러를 만들고 네트워크 요청을 가로채서 네트워크가 아닌 서비스 워커의 캐시에서 요청이 제공되도록 해야 합니다.
+2. **HTTP 캐시(브라우저 캐시라고도 함)**: 리소스가 [HTTP 캐시](/http-cache)에 있고 아직 만료되지 않은 경우 브라우저는 자동으로 HTTP 캐시의 리소스를 사용합니다.
+3. **서버 측:** 서비스 워커 캐시 또는 HTTP 캐시에 아무것도 없으면 브라우저는 네트워크로 이동하여 리소스를 요청합니다. 리소스가 CDN에 캐시되지 않은 경우 요청은 원본 서버로 다시 돌아가야 합니다.
+
+{% Img src="image/admin/vtKWC9Bg9dAMzoFKTeAM.png", alt="캐싱 흐름", width="800", height="585" %}
+
+{% Aside %}Chrome과 같은 일부 브라우저에는 서비스 워커 캐시 앞에 **메모리 캐시** 레이어가 있습니다. 메모리 캐시의 세부 사항은 각 브라우저의 구현에 따라 다릅니다. 유감스럽게도 아직 이 부분에 대한 명확한 사양이 없습니다.{% endAside %}
+
+## 캐싱 레이어
+
+### 서비스 워커 캐싱
+
+서비스 워커는 네트워크 유형의 HTTP 요청을 가로채고 [캐싱 전략](/offline-cookbook/#serving-suggestions)을 사용하여 브라우저에 반환되어야 하는 리소스를 결정합니다. 서비스 워커 캐시와 HTTP 캐시는 동일한 일반 용도로 사용되지만 서비스 워커 캐시는 정확히 무엇을 캐시하고 어떻게 캐싱을 수행하는지에 대한 세분화된 제어와 같은 더 많은 캐싱 기능을 제공합니다.
+
+#### 서비스 워커 캐시 제어
+
+[서비스 워커는 이벤트 리스너](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19)(일반적으로 `fetch` 이벤트)로 HTTP 요청을 가로챕니다. 이 [코드 조각](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19)은 [Cache-First](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network) 캐싱 전략의 논리를 보여줍니다.
+
+{% Img src="image/admin/INLfnhEpmL4KpMmFXnTL.png", alt="서비스 워커가 HTTP 요청을 가로채는 방법을 보여주는 다이어그램", width="800", height="516" %}
+
+바퀴를 재발명하지 않으려면 [Workbox](https://developer.chrome.com/docs/workbox/)를 사용하는 것이 좋습니다. 예를 들어 [한 줄의 정규식 코드로 리소스 URL 경로를 등록](https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-regular-expression-route)할 수 있습니다.
+
+```js
+import {registerRoute} from 'workbox-routing';
+
+registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);
+```
+
+#### 서비스 워커 캐싱 전략 및 사용 사례
+
+다음 표에서는 일반적인 서비스 워커 캐싱 전략과 각 전략이 유용한 경우에 대해 간략하게 설명합니다.
+
+<table>
+<thead><tr>
+<th><strong>전략</strong></th>
+<th><strong>새로움 이유</strong></th>
+<th><strong>사용 사례</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-only">네트워크만</a></p></strong></td>
+<td>콘텐츠는 항상 최신 상태여야 합니다.</td>
+<td><ul>
+<li>결제 및 체크아웃</li>
+<li>잔액 명세서</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-falling-back-to-cache">네트워크가 캐시로 폴백</a></p></strong></td>
+<td>신선한 콘텐츠를 제공하는 것이 바람직합니다. 그러나 네트워크가 실패하거나 불안정한 경우 약간 오래된 콘텐츠를 제공하는 것이 허용됩니다.</td>
+<td><ul>
+<li>적시 데이터</li>
+<li>가격 및 요금(면책 조항 필요)</li>
+<li>주문 상태</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="/stale-while-revalidate/">부실 재검증</a></p></strong></td>
+<td>캐시된 콘텐츠를 바로 제공하는 것도 좋지만 향후에는 업데이트된 캐시된 콘텐츠를 사용해야 합니다.</td>
+<td><ul>
+<li>뉴스 피드</li>
+<li>제품 목록 페이지</li>
+<li>메시지</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-then-network">먼저 캐시하고 네트워크로 대체</a></p></strong></td>
+<td>콘텐츠는 중요하지 않으며 성능 향상을 위해 캐시에서 제공할 수 있지만 서비스 워커는 때때로 업데이트를 확인해야 합니다.</td>
+<td><ul>
+<li>앱 셸</li>
+<li>공통 리소스</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-only">캐시만</a></p></strong></td>
+<td>내용은 거의 변경되지 않습니다.</td>
+<td><ul><li>정적 콘텐츠</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+#### 서비스 워커 캐싱의 추가 이점
+
+캐싱 로직의 세분화된 제어 외에도 서비스 워커 캐싱은 다음을 제공합니다.
+
+- **오리진을 위한 더 많은 메모리 및 저장 공간:** 브라우저는 [오리진](/same-site-same-origin/#origin) 별로 HTTP 캐시 리소스를 할당합니다. 즉, 여러 하위 도메인이 있는 경우 모두 동일한 HTTP 캐시를 공유합니다. 오리진/도메인의 콘텐츠가 오랫동안 HTTP 캐시에 유지된다는 보장은 없습니다. 예를 들어 사용자는 브라우저의 설정 UI에서 수동으로 정리하거나 페이지에서 강제로 다시 로드하여 캐시를 제거할 수 있습니다. 서비스 워커 캐시를 사용하면 캐시된 콘텐츠가 캐시된 상태로 유지될 가능성이 훨씬 높아집니다. 자세한 내용은 [영구 스토리지](/persistent-storage/)를 참조하세요.
+- **불안정한 네트워크 또는 오프라인 경험을 통한 더 높은 유연성:** HTTP 캐시를 사용하면 리소스를 캐시할지 여부를 바이너리 선택만 할 수 있습니다. 서비스 워커 캐싱을 사용하면 약간의 "딸꾹질"을 훨씬 쉽게 완화할 수 있고("stale-while-revalidate" 전략 사용), 완전한 오프라인 경험("캐시 전용" 전략 사용) 또는 그 사이에 있는 사용자 지정 UI 서비스 워커 캐시에서 가져온 페이지의 일부와 해당되는 경우 일부 부분은 제외됩니다("캐치 핸들러 설정" 전략 사용).
+
+### HTTP 캐싱
+
+브라우저는 웹 페이지 및 관련 리소스를 처음 로드할 때 이러한 리소스를 HTTP 캐시에 저장합니다. HTTP 캐시는 최종 사용자가 명시적으로 비활성화하지 않는 한 일반적으로 브라우저에서 자동으로 활성화됩니다.
+
+HTTP 캐싱을 사용한다는 것은 서버에 의존하여 리소스를 캐시할 시기와 기간을 결정하는 것을 의미합니다.
+
+#### HTTP 응답 헤더로 HTTP 캐시 만료 제어
+
+서버가 리소스에 대한 브라우저 요청에 응답하면 서버는 HTTP 응답 헤더를 사용하여 리소스를 캐시해야 하는 기간을 브라우저에 알려줍니다. 자세한 내용은 [응답 헤더: 웹 서버 구성](/http-cache/#response-headers)을 참조하세요.
+
+#### HTTP 캐싱 전략 및 사용 사례
+
+HTTP 캐싱은 서비스 워커 캐싱보다 훨씬 간단합니다. HTTP 캐싱은 TTL(시간 기반) 리소스 만료 논리만 처리하기 때문입니다. [어떤 응답 헤더 값을 사용해야 합니까?](/http-cache/#response-header-strategies)를 참조하십시오. HTTP 캐싱 전략에 대해 자세히 알아보려면 [요약](/http-cache/#summary)을 참조하세요.
+
+## 캐시 만료 논리 설계
+
+이 섹션에서는 서비스 워커 캐시 및 HTTP 캐시 계층에서 일관된 만료 논리를 사용할 때의 장단점과 이러한 계층에서 별도의 만료 논리를 사용할 때의 장단점을 설명합니다.
+
+아래의 결함은 서비스 워커 캐싱과 HTTP 캐싱이 다양한 시나리오에서 작동하는 방식을 보여줍니다.
+
+{% Glitch { id: 'compare-sw-and-http-caching', height: 480 } %}
+
+### 모든 캐시 계층에 대한 일관된 만료 논리
+
+장단점을 설명하기 위해 장기, 중기 및 단기의 3가지 시나리오를 살펴보겠습니다.
+
+<table>
+<thead><tr>
+<th>시나리오</th>
+<th>장기 캐싱</th>
+<th>중기 캐싱</th>
+<th>단기 캐싱</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>서비스 워커 캐싱 전략</td>
+<td>캐시, 네트워크로 폴백</td>
+<td>부실 재검증</td>
+<td>네트워크가 캐시로 폴백</td>
+</tr>
+<tr>
+<td>서비스 워커 캐시 TTL</td>
+<td><strong>30일</strong></td>
+<td><strong>1일</strong></td>
+<td><strong>10분</strong></td>
+</tr>
+<tr>
+<td>HTTP 캐시 최대 사용 기간</td>
+<td><strong>30일</strong></td>
+<td><strong>1일</strong></td>
+<td><strong>10분</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### 시나리오: 장기 캐싱(캐시, 네트워크로 폴백)
+
+- 캐시된 리소스가 유효한 경우(&lt;= 30일): 서비스 워커는 네트워크에 가지 않고 캐시된 리소스를 즉시 반환합니다.
+- 캐시된 리소스가 만료된 경우(&gt; 30일): 서비스 워커는 리소스를 가져오기 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시에 리소스 복사본이 없으므로 리소스에 대해 서버 측으로 이동합니다.
+
+단점: 이 시나리오에서 HTTP 캐싱은 서비스 워커에서 캐시가 만료될 때 브라우저가 항상 서버 측으로 요청을 전달하기 때문에 더 적은 가치를 제공합니다.
+
+#### 시나리오: 중기 캐싱(Stale-while-revalidate)
+
+- 캐시된 리소스가 유효한 경우(&lt;= 1일): 서비스 워커는 캐시된 리소스를 즉시 반환하고 네트워크로 이동하여 리소스를 가져옵니다. 브라우저의 HTTP 캐시에 리소스 복사본이 있으므로 해당 복사본을 서비스 워커에게 반환합니다.
+- 캐시된 리소스가 만료된 경우(&gt; 1일): 서비스 워커는 캐시된 리소스를 즉시 반환하고 네트워크로 이동하여 리소스를 가져옵니다. 브라우저는 HTTP 캐시에 리소스 복사본이 없으므로 리소스를 가져오기 위해 서버 측으로 이동합니다.
+
+단점: 서비스 워커는 "재검증" 단계를 최대한 활용하기 위해 HTTP 캐시를 재정의하기 위해 추가 캐시 버스팅이 필요합니다.
+
+#### 시나리오: 단기 캐싱(네트워크가 캐시로 폴백)
+
+- 캐시된 리소스가 유효한 경우(&lt;= 10분): 서비스 워커는 리소스를 가져오기 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시에 리소스 복사본이 있으므로 서버 측으로 이동하지 않고 서비스 워커에게 반환합니다.
+- 캐시된 리소스가 만료된 경우(&gt; 10분): 서비스 워커는 캐시된 리소스를 즉시 반환하고 네트워크로 이동하여 리소스를 가져옵니다. 브라우저는 HTTP 캐시에 리소스 복사본이 없으므로 리소스를 가져오기 위해 서버 측으로 이동합니다.
+
+단점: 중기 캐싱 시나리오와 유사하게 서비스 워커는 서버 측에서 최신 리소스를 가져오기 위해 HTTP 캐시를 재정의하는 추가 캐시 무효화 논리가 필요합니다.
+
+#### 모든 시나리오의 서비스 워커
+
+모든 시나리오에서 서비스 워커 캐시는 네트워크가 불안정할 때 캐시된 리소스를 계속 반환할 수 있습니다. 반면에 HTTP 캐시는 네트워크가 불안정하거나 다운된 경우 신뢰할 수 없습니다.
+
+### 서비스 워커 캐시 및 HTTP 계층에서 다른 캐시 만료 논리
+
+장단점을 설명하기 위해 장기, 중기 및 단기 시나리오를 다시 살펴보겠습니다.
+
+<table>
+<thead><tr>
+<th>시나리오</th>
+<th>장기 캐싱</th>
+<th>중기 캐싱</th>
+<th>단기 캐싱</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>서비스 워커 캐싱 전략</td>
+<td>캐시, 네트워크로 폴백</td>
+<td>부실 재검증</td>
+<td>네트워크가 캐시로 폴백</td>
+</tr>
+<tr>
+<td>서비스 워커 캐시 TTL</td>
+<td><strong>90일</strong></td>
+<td><strong>30일</strong></td>
+<td><strong>1일</strong></td>
+</tr>
+<tr>
+<td>HTTP 캐시 최대 사용 기간</td>
+<td><strong>30일</strong></td>
+<td><strong>1일</strong></td>
+<td><strong>10분</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### 시나리오: 장기 캐싱(캐시, 네트워크로 폴백)
+
+- 서비스 워커 캐시에서 캐시된 리소스가 유효한 경우(&lt;= 90일): 서비스 워커는 캐시된 리소스를 즉시 반환합니다.
+- 서비스 워커 캐시에서 캐시된 리소스가 만료된 경우(&gt; 90일): 서비스 워커는 리소스를 가져오기 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시에 리소스 복사본이 없으므로 서버 측으로 이동합니다.
+
+장점과 단점:
+
+- 장점: 서비스 워커가 캐시된 리소스를 즉시 반환하므로 사용자는 즉각적인 응답을 경험합니다.
+- 장점: 서비스 워커가 캐시를 사용할 때와 새 버전의 리소스를 요청할 때를 보다 세밀하게 제어할 수 있습니다.
+- 단점: 잘 정의된 서비스 워커 캐싱 전략이 필요합니다.
+
+#### 시나리오: 중간 캐싱(Stale-while-revalidate)
+
+- 캐시된 리소스가 서비스 워커 캐시에서 유효한 경우(&lt;= 30일): 서비스 워커는 캐시된 리소스를 즉시 반환합니다.
+- 서비스 워커 캐시에서 캐시된 리소스가 만료된 경우(&gt; 30일): 서비스 워커는 리소스를 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시에 리소스 복사본이 없으므로 서버 측으로 이동합니다.
+
+장점과 단점:
+
+- 장점: 서비스 워커가 캐시된 리소스를 즉시 반환하므로 사용자는 즉각적인 응답을 경험합니다.
+- 장점: 서비스 워커는 "백그라운드에서" 발생하는 재검증 덕분에 주어진 URL에 대한 **다음 요청이 네트워크의 새로운 응답을 사용하도록 할 수 있습니다.**
+- 단점: 잘 정의된 서비스 워커 캐싱 전략이 필요합니다.
+
+#### 시나리오: 단기 캐싱(네트워크가 캐시로 폴백)
+
+- 캐시된 리소스가 서비스 워커 캐시에서 유효한 경우(&lt;= 1일): 서비스 워커는 리소스를 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시가 있는 경우 해당 리소스를 반환합니다. 네트워크가 다운되면 서비스 워커는 서비스 워커 캐시에서 리소스를 반환합니다.
+- 서비스 워커 캐시에서 캐시된 리소스가 만료된 경우(&gt; 1일): 서비스 워커는 리소스를 가져오기 위해 네트워크로 이동합니다. 브라우저는 HTTP 캐시의 캐시된 버전이 만료되면 네트워크를 통해 리소스를 가져옵니다.
+
+장점과 단점:
+
+- 장점: 네트워크가 불안정하거나 다운될 때 서비스 워커는 캐시된 리소스를 즉시 반환합니다.
+- 단점: 서비스 워커는 HTTP 캐시를 재정의하고 "네트워크 우선" 요청을 만들기 위해 추가 캐시 버스팅이 필요합니다.
+
+## 결론
+
+캐싱 시나리오 조합의 복잡성을 감안할 때 모든 경우를 포괄하는 하나의 규칙을 설계하는 것은 불가능합니다. 그러나 이전 섹션의 결과를 기반으로 캐시 전략을 설계할 때 살펴봐야 할 몇 가지 제안 사항이 있습니다.
+
+- 서비스 워커 캐싱 논리는 HTTP 캐싱 만료 논리와 일치할 필요가 없습니다. 가능하면 서비스 워커에서 더 긴 만료 논리를 사용하여 서비스 워커에 더 많은 제어 권한을 부여합니다.
+- HTTP 캐싱은 여전히 중요한 역할을 하지만 네트워크가 불안정하거나 다운된 경우에는 안정적이지 않습니다.
+- 각 리소스에 대한 캐싱 전략을 다시 검토하여 HTTP 캐시와 충돌하지 않고 서비스 워커 캐싱 전략이 값을 제공하는지 확인하십시오.
+
+## 더 알아보기
+
+- [네트워크 안정성](/reliable/)
+- [HTTP Cache로 불필요한 네트워크 요청 방지](/http-cache)
+- [HTTP 캐시 코드랩](/codelab-http-cache/)
+- [서비스 워커의 실제 성능 영향 측정](https://developers.google.com/web/showcase/2016/service-worker-perf)
+- [캐시 제어와 만료](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
diff --git a/src/site/content/ko/reliable/service-workers-cache-storage/index.md b/src/site/content/ko/reliable/service-workers-cache-storage/index.md
new file mode 100644
index 00000000000..bb4b895b435
--- /dev/null
+++ b/src/site/content/ko/reliable/service-workers-cache-storage/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: 서비스 워커와 Cache Storage API
+authors:
+  - jeffposnick
+date: 2018-11-05
+updated: 2020-02-27
+description: 브라우저의 HTTP 캐시는 첫 번째 방어선입니다. 이것은 반드시 가장 강력하거나 유연한 접근 방식이 아니며, 캐시 된 응답의 수명을 제한적으로 통제할 수 있습니다. 하지만 많은 작업 없이 합리적인 캐싱을 구현하는 여러 가지 경험에 바탕을 둔 법칙이 있으므로, 이를 항상 따라야 합니다.
+---
+
+네트워크 안정성을 갖추는 것은 어렵습니다. 브라우저의 HTTP 캐시는 첫 번째 방어선이지만 이미 배웠듯이 이전에 방문한 적이 있는 버전이 지정된 URL을 로드할 때만 실제로 효과적입니다. HTTP 캐시만으로는 충분하지 않습니다.
+
+다행스럽게도 [서비스 워커](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) 와 [Cache Storage API](https://developer.mozilla.org/docs/Web/API/CacheStorage) 라는 두 가지 새로운 도구를 사용하여 상황을 쉽게 바꿀 수 있습니다. 함께 사용되는 경우가 많아서 두 가지를 동시에 배울 가치가 있습니다.
+
+## 서비스 워커
+
+서비스 워커는 브라우저에 내장되어 있으며 생성을 담당하는 약간의 추가 JavaScript 코드가 이를 제어합니다. 실제 웹 애플리케이션을 구성하는 다른 파일과 함께 이를 배포합니다.
+
+서비스 워커에게는 몇 가지 특별한 권한이 있습니다. 다른 임무 도중 웹 앱이 외부로 나가는 요청 할 때까지 참을성 있게 기다린 다음 이를 가로채서 조치를 취합니다. 이 가로채어진 요청으로 서비스 워커가 수행하는 작업은 사용자에게 달려 있습니다.
+
+일부 요청의 경우 서비스 작업자가 전혀 없는 경우와 마찬가지로 네트워크에서 요청을 계속하도록 허용하는 것이 최선의 조치일 수 있습니다.
+
+그러나 다른 요청의 경우 브라우저의 HTTP 캐시보다 유연한 것을 활용하고 네트워크에 대해 걱정할 필요 없이 안정적으로 빠른 응답을 반환할 수 있습니다. 여기에는 퍼즐의 다른 부분인 Cache Storage API를 사용해야 합니다.
+
+## Cache Storage API
+
+Cache Storage API는 개발자가 캐시 내용을 완벽하게 제어할 수 있도록 하여 완전히 새로운 가능성을 열어줍니다. Cache Storage API는 HTTP 헤더와 브라우저의 기본 제공 [휴리스틱](https://httpwg.org/specs/rfc7234.html#heuristic.freshness)의 조합에 의존하는 대신 캐싱에 대한 코드 기반 접근 방식을 제공합니다. Cache Storage API는 서비스 워커의 JavaScript에서 호출할 때 특히 유용합니다.
+
+### 잠깐… 지금 생각할 다른 캐시가 있습니까?
+
+"아직도 HTTP 헤더를 구성해야 합니까?"와 같은 질문을 스스로에게 하고 있을 것입니다. "HTTP 캐시로는 불가능했던 이 새로운 캐시로 무엇을 할 수 있습니까?" 걱정하지 마세요. 자연스러운 반응입니다.
+
+Cache Storage API를 사용하고 있다는 것을 알고 있더라도 웹 서버 `Cache-Control` 헤더를 구성하는 것이 좋습니다. 일반적으로 버전이 지정되지 않은 URL의 경우 `Cache-Control: no-cache`를 설정하고, 해시와 같은 버전 정보가 포함된 URL의 경우 `Cache-Control: max-age=31536000`를 설정합니다.
+
+Cache Storage API 캐시를 채울 때 브라우저는 [기본적으로 HTTP 캐시의 기존 항목을 확인하고](https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-fight) 발견된 경우 이를 사용합니다. 버전이 지정된 URL을 Cache Storage API 캐시에 추가하는 경우 브라우저는 추가 네트워크 요청을 방지합니다. 반대로 버전이 지정되지 않은 URL에 대해 수명이 긴 캐시 수명을 지정하는 것과 같이 `Cache-Control` 헤더를 사용하는 경우 해당 오래된 콘텐츠를 Cache Storage API에 추가하여 [상황을 악화시킬 수 있습니다.](https://jakearchibald.com/2016/caching-best-practices/#a-service-worker-can-extend-the-life-of-these-bugs) HTTP 캐시 동작을 정렬하는 것은 Cache Storage API를 효과적으로 사용하기 위한 전제 조건입니다.
+
+이 새로운 API로 현재 가능한 일은 많습니다. HTTP 캐시만으로는 어렵거나 불가능한 몇 가지 일반적인 용도는 다음과 같습니다.
+
+- stale-while-revalidate라고 하는 캐시 된 콘텐츠에 "백그라운드에서 새로 고침" 접근 방식을 사용합니다.
+- 캐시 할 자산의 최대 수에 상한선을 설정하고 해당 제한에 도달하면 항목을 제거하는 사용자 지정 만료 정책을 구현합니다.
+- 이전에 캐시 된 네트워크 응답과 최신 네트워크 응답을 비교하여 변경된 사항이 있는지 확인하고 데이터가 실제로 업데이트되었을 때 사용자가 콘텐츠(예: 버튼 사용)를 업데이트할 수 있도록 합니다.
+
+[Cache API: 빠른 가이드](/cache-api-quick-guide/)에서 자세한 내용을 확인하세요.
+
+### API 너트 및 볼트
+
+API 설계에 대해 염두에 두어야 할 몇 가지 사항이 있습니다.
+
+- [`Request`](https://developer.mozilla.org/docs/Web/API/Request) 개체는 이러한 캐시를 읽고 쓸 때 고유 키로 사용됩니다. 편의상 실제 `Request` `'https://example.com/index.html'`과 같은 URL 문자열을 키로 전달할 수 있으며 API가 자동으로 이를 처리합니다.
+- [`Response`](https://developer.mozilla.org/docs/Web/API/Response) 개체는 이러한 캐시의 값으로 사용됩니다.
+- 주어진 `Response`의 `Cache-Control` 헤더는 데이터를 캐싱할 때 효과적으로 무시됩니다. 자동 만료, 빌트인 만료 또는 새로고침 검사가 없으며 캐시에 항목을 저장하면 코드에서 명시적으로 제거할 때까지 유지됩니다. (사용자를 대신하여 캐시 유지 관리를 단순화하는 라이브러리가 있습니다. 이 시리즈의 뒷부분에서 다룰 것입니다.)
+- [`LocalStorage`](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage)와 같은 이전의 동기 API와 달리 모든 Cache Storage API 작업은 비동기입니다.
+
+## 빠른 우회: promise 및 async/await
+
+서비스 워커와 Cache Storage API는 [비동기 프로그래밍 개념](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming))을 사용합니다. 특히 비동기 작업의 미래 결과를 나타내기 위해 promise에 크게 의존합니다. 들어가기 전에 [promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) 및 관련 [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await) 문법에 익숙해져야 합니다.
+
+{% Aside 'codelab' %} [서비스 워커를 등록하여 애플리케이션을 안정적으로 만드세요](/codelab-service-workers). {% endAside %}
+
+## 아직… 해당 코드를 배포하지 마세요
+
+서비스 워커와 Cache Storage API는 중요한 기반을 제공하고, 있는 그대로 사용할 수 있지만, 여러 가지 경우와 "문제가 있는 부분"이 있는 사실상 낮은 수준의 빌딩 블록입니다. 이러한 API의 어려운 부분을 매끄럽게 하고 프로덕션 준비 서비스 작업자를 구축하는 데 필요한 모든 것을 제공할 수 있는 몇 가지 상위 수준 도구가 있습니다. 다음 가이드에서는 이러한 도구 중 하나인 [Workbox](https://developer.chrome.com/docs/workbox/)에 대해 설명합니다.
+
+{% Aside 'success' %} 즐기면서 배우세요. [새로운 Service Workies 게임](https://serviceworkies.com/)을 확인하세요!{% endAside %}
diff --git a/src/site/content/ko/secure/cross-origin-isolation-guide/index.md b/src/site/content/ko/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..b979b1d4bd7
--- /dev/null
+++ b/src/site/content/ko/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: 출처 간 격리를 이용하기 위한 가이드
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: 출처 간 격리를 이용하면 웹 페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 문서에서는 웹사이트에서 출처 간 격리를 이용하는 방법을 설명합니다.
+description: 출처 간 격리를 이용하면 웹 페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 문서에서는 웹사이트에서 출처 간 격리를 이용하는 방법을 설명합니다.
+tags:
+  - security
+---
+
+이 가이드에서는 출처 간 격리를 이용하는 방법을 보여줍니다. [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/) 또는 [높은 정밀도의 고해상도 타이머](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/)를 사용하려면 출처 간 격리가 필요합니다.
+
+출처 간 격리를 이용하려는 경우, 이것이 광고 배치와 같은 웹사이트의 다른 출처 간 리소스에 미치는 영향을 평가하세요.
+
+{% Details %} {% DetailsSummary %} 웹사이트에서 `SharedArrayBuffer`가 사용되는 위치를 결정하세요.
+
+Chrome 92부터 출처 간 격리 없이는 `SharedArrayBuffer`를 사용하는 기능이 더 이상 작동하지 않습니다. `SharedArrayBuffer` 사용 중단 메시지 때문에 이 페이지에 오게 되었다면 웹사이트 또는 여기에 내장된 리소스 중 하나가 `SharedArrayBuffer`를 사용하고 있을 가능성이 높습니다. 사용 중단으로 인해 웹사이트에서 아무 문제도 생기지 않도록 우선 이것이 사용되는 위치를 확인하세요.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- `SharedArrayBuffer`를 계속 사용하려면 출처 간 격리를 활성화하세요.
+- `SharedArrayBuffer`를 사용하는 제3자 코드에 의존하는 경우, 제3자 공급자에게 조치를 취하도록 알리세요. {% endAside %}
+
+사이트에서 `SharedArrayBuffer`가 사용되는 위치를 확실히 모르는 경우, 두 가지 방법으로 알아낼 수 있습니다.
+
+- Chrome DevTools 사용
+- (고급) 사용 중단 보고 사용
+
+`SharedArrayBuffer` 사용 위치를 이미 알고 있다면 [출처 간 격리의 영향 분석](#analysis)으로 건너뛰세요.
+
+### Chrome DevTools 사용
+
+개발자는 [Chrome DevTools](https://developer.chrome.com/docs/devtools/open/)를 사용하여 웹사이트를 검사할 수 있습니다.
+
+1. `SharedArrayBuffer`를 사용하고 있다고 의심되는 페이지에서 [Chrome DevTools를 엽니다](https://developer.chrome.com/docs/devtools/open/).
+2. **콘솔** 패널을 선택합니다.
+3. 페이지가 `SharedArrayBuffer`를 사용하는 경우 다음 메시지가 표시됩니다.
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. 메시지 끝에 있는 파일 이름과 줄 번호(예: `common-bundle.js:535`)는 `SharedArrayBuffer`가 어디서 출처했는지를 나타냅니다. 제3자 라이브러리인 경우 개발자에게 연락해 문제를 해결하세요. 웹사이트의 일부로 구현된 경우라면 아래 가이드에 따라 출처 간 격리를 활성화하세요.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="출처 간 격리 없이 SharedArrayBuffer를 사용할 때 DevTools 콘솔 경고", width="800", height="163" %} <figcaption>출처 간 격리 없이 SharedArrayBuffer를 사용할 때 DevTools 콘솔 경고</figcaption></figure>
+
+### (고급) 사용 중단 보고 사용
+
+일부 브라우저에는 지정된 엔드포인트에 [API 사용 중단을 보고하는 기능이 있습니다.](https://wicg.github.io/deprecation-reporting/)
+
+1. [사용 중단 보고서 서버를 설정하고 보고 URL을 가져옵니다](/coop-coep/#set-up-reporting-endpoint). 공공 서비스를 사용하거나 직접 구축하여 이를 수행할 수 있습니다.
+2. URL을 사용하여 잠재적으로 `SharedArrayBuffer`를 제공할 페이지로 다음 HTTP 헤더를 설정합니다.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. 헤더가 전파되기 시작하면 등록한 엔드포인트에서 사용 중단 보고서 수집을 시작합니다.
+
+여기에서 예제 구현을 참조하세요: [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me) .
+
+{% endDetails %}
+
+## 출처 간 격리의 영향 분석 {: #analysis}
+
+실제로 어떤 부분도 건드리지 않고 출처 간 격리를 활성화했을 때 사이트에 미치는 영향을 평가할 수 있다면 좋지 않을까요? [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) 및 [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) HTTP 헤더를 사용하면 그렇게 할 수 있습니다.
+
+1. 최상위 문서에서 [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document)을 설정합니다. 이름에서 알 수 있듯이 이 헤더는 `COOP: same-origin`이 사이트에 **잠재적으로 미칠** 영향에 대한 보고서만 보냅니다. 실제로 팝업 창과의 통신을 중단시키지 않습니다.
+2. 보고를 설정하고 보고서를 수신하고 저장하도록 웹 서버를 구성합니다.
+3. 최상위 문서에서 [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources)를 설정합니다. 다시 말하지만, 이 헤더를 사용하면 아직 사이트 기능에 실제로 영향을 주지 않으면서 `COEP: require-corp`을 활성화할 때의 영향을 확인할 수 있습니다. 이전 단계에서 설정한 동일한 보고 서버로 보고서를 보내도록 이 헤더를 구성할 수 있습니다.
+
+{% Aside %} Chrome DevTools **네트워크** 패널에서 [**도메인** 컬럼을 활성화](https://developer.chrome.com/docs/devtools/network/#information)하여 어떤 리소스가 영향을 받는지 전반적으로 파악할 수도 있습니다. {% endAside %}
+
+{% Aside 'caution' %}
+
+출처 간 격리를 활성화하면 명시적으로 선택하지 않은 출처 간 리소스의 로딩이 차단되고 최상위 문서가 팝업 창과 통신할 수 없게 됩니다.
+
+출처 간 격리를 위해서는 모든 하위 리소스를 명시적으로 선택해야 하므로 `Cross-Origin-Resource-Policy`를 대규모로 배포할 방법을 모색했습니다. 그리고 그 반대로 향하는 아이디어를 생각해 냈습니다. 바로, 모든 자격 증명을 제거하여 CORP 헤더 없이 리소스를 로드할 수 있는 [새로운 COEP "자격 증명 없는" 모드](https://github.com/mikewest/credentiallessness/)입니다. 작동 방식에 대한 세부 사항은 고려 중이지만 하위 리소스가 `Cross-Origin-Resource-Policy` 헤더를 보내도록 해야 하는 부담이 덜어지를 바랍니다.
+
+또한, `Cross-Origin-Opener-Policy: same-origin` 헤더는 OAuth 및 결제와 같은 출처 간 창 상호 작용이 필요한 통합을 중단시키는 것으로 알려져 있습니다. 이 문제를 완화하기 위해 `Cross-Origin-Opener-Policy: same-origin-allow-popups`에 대한 출처 간 격리를 활성화하는 [조건을 덜 엄격하게 하는](https://github.com/whatwg/html/issues/6364) 방법을 모색하고 있습니다. 그러면 자체적으로 열리는 창과의 통신이 가능해질 것입니다.
+
+출처 간 격리를 사용하고 싶지만 이러한 문제로 인해 차단된 경우, [최초 평가판에 등록](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)하고 새 모드를 사용할 수 있을 때까지 기다릴 것을 권장합니다. 이러한 새로운 모드를 사용할 수 있을 때까지 최초 평가판을 종료할 계획이 없습니다.
+
+{% endAside %}
+
+## 출처 간 격리의 영향 완화
+
+출처 간 격리의 영향을 받을 리소스를 결정했으면 이러한 출처 간 리소스를 실제로 선택하는 방법에 대한 다음의 일반 지침을 따르세요.
+
+1. 이미지, 스크립트, 스타일시트, iframe 등과 같은 출처 간 리소스에서 [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin) 헤더를 설정합니다. Same-site 리소스에서는 [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin) 헤더를 설정합니다.
+2. 리소스가 [CORS](/cross-origin-resource-sharing/)와 함께 제공되는 경우 최상위 문서의 HTML 태그에 `crossorigin` 특성을 설정합니다(예: `<img src="example.jpg" crossorigin>`).
+3. iframe에 로드된 출처 간 리소스에 다른 iframe 레이어가 포함된 경우, 계속 진행하기 전에 이 섹션에 설명된 단계를 재귀적으로 적용하세요.
+4. 모든 출처 간 리소스가 선택된 것을 확인한 후, iframe에 로드된 출처 간 리소스에서 `Cross-Origin-Embedder-Policy: require-corp` 헤더를 설정합니다.
+5. `postMessage()`를 통한 통신이 필요한 출처 간 팝업 창이 없도록 하세요. 출처 간 격리가 활성화된 경우 이 창이 계속 작동하도록 할 방법이 없습니다. 출처 간에 격리되지 않은 다른 문서로 통신을 이동하거나 다른 통신 방법(예: HTTP 요청)을 사용할 수 있습니다.
+
+## 출처 간 격리 사용하기
+
+출처 간 격리로 인한 영향을 완화한 후에는 출처 간 격리를 활성화하기 위한 다음 일반적 지침을 따르세요.
+
+1. 최상위 문서에서 `Cross-Origin-Opener-Policy: same-origin` 헤더를 설정합니다. `Cross-Origin-Opener-Policy-Report-Only: same-origin`을 설정했다면 대체하세요. 이렇게 하면 최상위 문서와 해당 팝업 창 간의 통신이 차단됩니다.
+2. 최상위 문서에서 `Cross-Origin-Embedder-Policy: require-corp` 헤더를 설정합니다. `Cross-Origin-Embedder-Policy-Report-Only: require-corp`를 설정했다면 대체하세요. 이렇게 하면 선택되지 않은 출처 간 리소스의 로드가 차단됩니다.
+3. `self.crossOriginIsolated`가 콘솔에서 `true`를 반환하는지 확인하여 페이지가 출처 간에 격리되었는지 검증하세요.
+
+{% Aside 'gotchas' %}
+
+단순한 서버는 헤더 전송을 지원하지 않기 때문에 로컬 서버에서 출처 간 격리를 활성화하는 일은 어려울 수 있습니다. 명령줄 플래그 `--enable-features=SharedArrayBuffer`와 함께 Chrome을 시작하여 출처 간 격리를 사용하지 않고 `SharedArrayBuffer`를 활성화할 수 있습니다. [각 플랫폼에서 명령줄 플래그로 Chrome을 실행하는 방법](https://www.chromium.org/developers/how-tos/run-chromium-with-flags)을 알아보세요.
+
+{% endAside %}
+
+## 리소스
+
+- [COOP 및 COEP를 사용하여 웹사이트를 "출처 간 격리"로 만들기](/coop-coep/)
+- [Android Chrome 88 및 Desktop Chrome 92에서 SharedArrayBuffer 업데이트](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/ko/secure/cross-origin-resource-sharing/index.md b/src/site/content/ko/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..f157facebd3
--- /dev/null
+++ b/src/site/content/ko/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: 교차 출처 리소스 공유(CORS)
+subhead: 교차 출처 리소스를 안전하게 공유
+authors:
+  - kosamari
+date: 2018-11-05
+description: 브라우저의 동일 출처 정책은 다른 출처에서 리소스를 읽는 것을 차단합니다. 이 메커니즘은 악의적인 사이트가 다른 사이트의 데이터를 읽는 것을 방지하지만 합법적인 사용도 방지합니다. 다른 나라의 날씨 데이터를 얻고 싶다면 어떨까요? CORS를 활성화하면 서버가 브라우저에 추가 출처를 사용할 수 있음을 알릴 수 있습니다.
+tags:
+  - security
+---
+
+브라우저의 동일 출처 정책은 다른 출처에서 리소스를 읽는 것을 차단합니다. 이 메커니즘은 악의적인 사이트가 다른 사이트의 데이터를 읽는 것을 방지하지만 합법적인 사용도 방지합니다. 다른 나라의 날씨 데이터를 얻고 싶다면 어떨까요?
+
+최신 웹 애플리케이션에서 애플리케이션은 종종 다른 출처에서 리소스를 가져오려고 합니다. 예를 들어 다른 도메인에서 JSON 데이터를 검색하거나 다른 사이트에서 `<canvas>` 요소로 이미지를 로드하려고 할 수 있습니다.
+
+즉, 누구나 읽을 수 있어야 하는 **공개 리소스**가 있지만 동일 출처 정책이 이를 차단합니다. 개발자는 [JSONP](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about)과 같은 해결 방법을 사용하고 있지만 **교차 출처 리소스 공유(CORS)**는 이 문제를 표준화된 방식으로 해결합니다.
+
+**CORS**를 활성화하면 서버가 브라우저에 추가 출처를 사용할 수 있음을 알릴 수 있습니다.
+
+## 리소스 요청은 웹에서 어떻게 작동합니까?
+
+<figure data-float="right">   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="요청 및 응답", width="668", height="327" %}   <figcaption>     그림: 클라이언트 요청과 서버 응답의 예시   </figcaption></figure>
+
+브라우저와 서버는 **Hypertext Transfer Protocol**(HTTP)를 사용하여 네트워크를 통해 데이터를 교환할 수 있습니다. HTTP는 리소스를 가져오는 데 필요한 정보를 포함하여 요청자와 응답자 간의 통신 규칙을 정의합니다.
+
+HTTP 헤더는 클라이언트와 서버 간의 메시지 교환 유형을 협상하는 데 사용되며 액세스를 결정하는 데 사용됩니다. 브라우저의 요청과 서버의 응답 메시지는 모두 **헤더**와 **본문**의 두 부분으로 나뉩니다.
+
+### 헤더
+
+메시지 유형 또는 메시지 인코딩과 같은 메시지에 대한 정보입니다. 헤더에는 키-값 쌍으로 표현되는 [다양한 정보](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)가 포함될 수 있습니다. 요청 헤더와 응답 헤더에는 서로 다른 정보가 포함되어 있습니다.
+
+{% Aside %} 헤더에는 주석이 포함될 수 없습니다. {% endAside %}
+
+**샘플 요청 헤더**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+위의 내용은 "응답으로 HTML을 수신하고 싶습니다. 여기에 내가 사용하는 쿠키가 있습니다."라고 말하는 것과 같습니다.
+
+**샘플 응답 헤더**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+위의 내용은 "데이터가 gzip으로 인코딩되었습니다. 캐시하지 마십시오."라고 말하는 것과 같습니다.
+
+### 본문
+
+메시지 자체입니다. 이것은 일반 텍스트, 이미지 바이너리, JSON, HTML 등이 될 수 있습니다.
+
+## CORS는 어떻게 작동합니까?
+
+동일 출처 정책은 브라우저에 교차 출처 요청을 차단하도록 지시합니다. 다른 출처에서 공개 리소스를 얻으려면 리소스 제공 서버가 브라우저에 "요청이 들어오는 이 출처가 내 리소스에 액세스할 수 있습니다"라고 알려야 합니다. 브라우저는 이를 기억하고 교차 출처 리소스 공유를 허용합니다.
+
+### 1단계: 클라이언트(브라우저) 요청
+
+브라우저가 교차 출처 요청을 할 때 브라우저는 현재 출처(scheme, host, port)와 함께 `Origin` 헤더를 추가합니다.
+
+### 2단계: 서버 응답
+
+서버 측에서 서버가 이 헤더를 보고 액세스를 허용하려면 요청한 출처를 지정하는 응답에 `Access-Control-Allow-Origin` 헤더를 추가해야 합니다(또는 모든 출처를 허용하려면 `*`).
+
+### 3단계: 브라우저에서 응답 수신
+
+브라우저가 해당 `Access-Control-Allow-Origin` 헤더와 함께 이 응답을 볼 때 브라우저는 응답 데이터가 클라이언트 사이트와 공유되도록 허용합니다.
+
+## 실제 CORS 작동 보기
+
+다음은 Express를 사용하는 작은 웹 서버입니다.
+
+{% Glitch { id: 'cors-demo', path: 'server.js', height: 480 } %}
+
+첫 번째 끝점(라인 8)에는 응답 헤더 세트가 없으며 단순히 응답으로 파일을 보냅니다.
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- 다음 명령을 시도합니다.
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+다음과 같은 오류가 표시됩니다.
+
+```bash
+request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource.
+```
+
+두 번째 끝점(라인 13)은 응답으로 동일한 파일을 보내지만 헤더에 `Access-Control-Allow-Origin: *`를 추가합니다. 콘솔에서 다음을 시도합니다.
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+이번에는 요청이 차단되지 않습니다.
+
+## CORS와 자격 증명 공유
+
+개인 정보 보호를 위해 CORS는 일반적으로 요청이 요청자를 식별하지 못하는 "익명 요청"에 사용됩니다. CORS(발신자를 식별할 수 있음)를 사용할 때 쿠키를 보내려면 요청과 응답에 추가 헤더를 덧붙여야 합니다.
+
+### 요청
+
+아래와 같이 가져오기 옵션에 `credentials: 'include'`를 추가합니다. 여기에는 요청과 함께 쿠키가 포함됩니다.
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### 응답
+
+`Access-Control-Allow-Origin`은 특정 출처로 설정되어야 하며(`*`를 사용하는 와일드 카드 없음) `Access-Control-Allow-Credentials`를 `true`로 설정해야 합니다.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## 복잡한 HTTP 호출에 대한 실행 전 요청
+
+웹 앱에 복잡한 HTTP 요청이 필요한 경우 브라우저는 요청 체인의 앞에 **[실행 전 요청](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)**을 추가합니다.
+
+CORS 사양은 **복잡한 요청**을 다음과 같이 정의합니다.
+
+- GET, POST 또는 HEAD 이외의 메서드를 사용하는 요청
+- `Accept`, `Accept-Language` 또는 `Content-Language` 이외의 헤더를 포함하는 요청
+- `application/x-www-form-urlencoded`, `multipart/form-data` 또는 `text/plain` 이외에 `Content-Type` 헤더가 있는 요청
+
+브라우저는 필요한 경우 실행 전 요청을 생성합니다. 이는 아래와 같은 `OPTIONS` 요청으로, 실제 요청 메시지보다 먼저 전송됩니다.
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+서버 측에서 애플리케이션은 이 출처에서 애플리케이션이 수락하는 메서드에 대한 정보로 실행 전 요청에 응답해야 합니다.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+서버 응답에는 실행 전 결과를 캐시하는 지속 시간(초)을 지정하기 위한 `Access-Control-Max-Age` 헤더도 포함될 수 있으므로 클라이언트가 복잡한 요청을 보낼 때마다 실행 전 요청을 할 필요가 없습니다.
diff --git a/src/site/content/ko/secure/fixing-mixed-content/index.md b/src/site/content/ko/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..3a5cfb51a7e
--- /dev/null
+++ b/src/site/content/ko/secure/fixing-mixed-content/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: 혼합 콘텐츠 수정
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: 사용자를 보호하고 모든 콘텐츠가 로드되도록 하기 위해 웹사이트에서 혼합 콘텐츠 오류를 수정하는 방법을 알아봅니다.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+웹사이트에 HTTPS를 지원하는 것은 사이트와 사용자를 공격으로부터 보호하는 중요한 단계이지만 혼합 콘텐츠는 이러한 보호를 무용지물로 만들 수 있습니다. [혼합 콘텐츠란?](/what-is-mixed-content)에 설명된 대로 안전하지 않은 혼합 콘텐츠가 브라우저에 의해 차단되는 경우가 더 많아질 것입니다.
+
+이 가이드에서는 기존 혼합 콘텐츠 문제를 수정하고 새로운 문제가 발생하지 않도록 방지하는 기술과 도구를 소개합니다.
+
+## 사이트를 방문하여 혼합 콘텐츠 찾기
+
+Google Chrome에서 HTTPS 페이지를 방문할 때 브라우저는 혼합 콘텐츠를 JavaScript 콘솔에 오류 및 경고로 나타내줍니다.
+
+[혼합 콘텐츠란?](/what-is-mixed-content)에서 여러 가지 예를 찾아보고 Chrome DevTools에서 문제가 보고되는 방식을 확인할 수 있습니다.
+
+[패시브 혼합 콘텐츠](https://passive-mixed-content.glitch.me/)의 경우, 다음과 같은 경고가 제공됩니다. `https` URL에서 콘텐츠가 발견되면 브라우저가 이를 자동으로 업그레이드한 다음 메시지를 표시합니다.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="혼합 콘텐츠가 감지되고 업그레이드될 때 표시되는 경고를 보여주는 Chrome DevTools", width="800", height="294" %}</figure>
+
+[액티브 혼합 콘텐츠](https://active-mixed-content.glitch.me/)는 차단되고 경고가 표시됩니다.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="액티브 혼합 콘텐츠가 차단될 때 표시되는 경고를 보여주는 Chrome DevTools", width="800", height="304" %}</figure>
+
+해당 사이트에서 `http://` URL에 대해 이와 같은 경고를 보게 되면 사이트 소스에서 이를 수정해야 합니다. 이러한 URL을 발견한 페이지와 함께 이러한 URL의 목록을 만들어 수정할 때 사용하는 것이 좋습니다.
+
+{% Aside %} 혼합 콘텐츠 오류 및 경고는 현재 보고 있는 페이지에 대해서만 표시되며 JavaScript 콘솔은 새 페이지로 이동할 때마다 지워집니다. 즉, 이러한 오류를 찾으려면 사이트의 모든 페이지를 개별적으로 확인해야 합니다. {% endAside %}
+
+### 사이트에서 혼합 콘텐츠 찾기
+
+소스 코드에서 직접 혼합 콘텐츠를 검색할 수 있습니다. `http://`를 검색하고 HTTP URL 속성을 포함하는 태그를 찾아보세요. 앵커 태그(`<a>`)의 `href` 속성에 `http://`가 있는 것은 혼합 콘텐츠 문제가 아닌 경우가 많습니다. 이에 대한 몇 가지 주목할 만한 예외에 대해서는 나중에 논의하겠습니다.
+
+해당 사이트가 콘텐츠 관리 시스템을 사용하여 게시되는 경우, 페이지가 게시될 때 안전하지 않은 URL에 대한 링크가 삽입될 수 있습니다. 예를 들어 이미지는 상대 경로가 아닌 전체 URL과 함께 포함될 수 있습니다. CMS 콘텐츠 내에서 이러한 부분을 찾아서 수정해야 합니다.
+
+### 혼합 콘텐츠 수정하기
+
+사이트 소스에서 혼합 콘텐츠를 찾았으면 다음 단계에 따라 수정할 수 있습니다.
+
+리소스 요청이 HTTP에서 HTTPS로 자동 업그레이드되었다는 콘솔 메시지가 표시되면 코드의 리소스에 대한 `http://` URL을 `https://`로 안전하게 변경할 수 있습니다. 또한, 브라우저 URL 표시줄에서 `http://`를 `https://`로 변경하고 브라우저 탭에서 이 URL을 열어 리소스를 안전하게 이용할 수 있는지 여부를 확인할 수도 있습니다.
+
+`https://`를 통해 리소스를 사용할 수 없다면 다음 옵션 중 하나를 고려해야 합니다.
+
+- 사용 가능한 경우 다른 호스트의 리소스를 포함합니다.
+- 법적으로 허용된 경우 사이트에서 콘텐츠를 직접 다운로드하고 호스팅합니다.
+- 사이트에서 리소스를 완전히 제외시킵니다.
+
+문제를 해결했으면 원래 오류를 발견한 페이지를 열어보고 오류가 더 이상 나타나지 않는지 확인합니다.
+
+### 비표준 태그 사용에 주의
+
+사이트에서 비표준 태그 사용에 주의하세요. 예를 들어, 앵커(`<a>`) 태그 URL은 혼합 콘텐츠 오류를 일으키지 않는데, 브라우저가 새 페이지로 이동하게 만들기 때문입니다. 즉, 일반적으로 수정할 필요가 없습니다. 그러나 일부 이미지 갤러리 스크립트는 `<a>` 태그의 기능을 재정의하고 `href` 속성으로 지정된 HTTP 리소스를 페이지의 라이트박스 디스플레이에 로드하므로 혼합 콘텐츠 문제를 일으킵니다.
+
+## 대규모 혼합 콘텐츠 처리
+
+위의 수동 조치는 소규모 웹사이트에 적합합니다. 그러나 대규모 웹사이트 또는 여러 개발 팀이 있는 사이트의 경우 로드되는 모든 콘텐츠를 추적하기가 어려울 수 있습니다. 이 부분에서 도움을 받으려면 콘텐츠 보안 정책을 사용하여 혼합 콘텐츠에 대해 알림을 제공하도록 브라우저에 지시하고 페이지에 안전하지 않은 리소스가 예기치 않게 로드하지 않도록 할 수 있습니다.
+
+### 콘텐츠 보안 정책
+
+[콘텐츠 보안 정책](/csp/)(CSP)은 혼합 콘텐츠를 대규모로 관리하는 데 사용할 수 있는 다목적 브라우저 기능입니다. CSP 보고 메커니즘을 사용하여 사이트의 혼합 콘텐츠를 추적하고, 혼합 콘텐츠를 업그레이드 또는 차단하여 사용자를 보호하기 위한 시행 정책을 제공할 수 있습니다.
+
+서버에서 보낸 응답에 `Content-Security-Policy` 또는 `Content-Security-Policy-Report-Only` 헤더를 포함시켜 페이지에 대해 이러한 기능을 적용할 수 있습니다. 또한 페이지의 `<head>` 섹션에서 `<meta>` 태그를 사용하여 `Content-Security-Policy`(`Content-Security-Policy-Report-Only`는 **아니지만**)를 설정할 수 있습니다.
+
+{% Aside %} 최신 브라우저는 수신하는 모든 콘텐츠 보안 정책을 시행합니다. 브라우저가 응답 헤더 또는 `<meta>` 요소에서 여러 CSP 헤더 값을 수신하면 이를 결합하고 단일 정책으로 실행합니다. 보고 정책도 마찬가지로 결합됩니다. 정책은 정책의 교차점을 취하여 결합됩니다. 즉, 첫 번째 정책 이후의 각 정책은 허용된 콘텐츠를 더 제한할 수 있을 뿐 확장할 수는 없습니다. {% endAside %}
+
+### 콘텐츠 보안 정책으로 혼합 콘텐츠 찾기
+
+콘텐츠 보안 정책을 사용하여 사이트의 혼합 콘텐츠 보고서를 수집할 수 있습니다. 이 기능을 이용하려면 `Content-Security-Policy-Report-Only` 지시문을 사이트에 대한 응답 헤더로 추가하여 설정합니다.
+
+응답 헤더:
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %} [report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) 응답 헤더는 [report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to)를 위해 더 이상 사용되지 않습니다. `report-to`에 대한 브라우저 지원은 현재 Chrome 및 Edge로 제한됩니다. 두 헤더를 모두 제공할 수 있으며, 이 경우 브라우저가 `report-uri`를 지원하면 `report-to`는 무시됩니다. {% endAside %}
+
+사용자가 사이트의 페이지를 방문할 때마다 브라우저는 콘텐츠 보안 정책을 위반하는 모든 항목에 대한 JSON 형식 보고서를 `https://example.com/reportingEndpoint`로 보냅니다. 이 경우 HTTP를 통해 하위 리소스가 로드될 때마다 보고서가 전송됩니다. 이러한 보고서에는 정책 위반이 발생한 페이지 URL과 정책을 위반한 하위 리소스 URL이 포함됩니다. 이러한 보고서를 기록하도록 보고 엔드포인트를 구성하면 각 페이지를 직접 방문하지 않고도 사이트의 혼합 콘텐츠를 추적할 수 있습니다.
+
+이에 대한 두 가지 주의 사항은 다음과 같습니다.
+
+- 사용자는 CSP 헤더를 이해하는 브라우저에서 페이지를 방문해야 합니다. 이는 대부분의 최신 브라우저에 해당됩니다.
+- 사용자가 방문한 페이지에 대한 보고서만 받습니다. 따라서 트래픽이 많지 않은 페이지가 있는 경우 전체 사이트에 대한 보고서를 받기까지 시간이 걸릴 수 있습니다.
+
+[콘텐츠 보안 정책](/csp/) 가이드에 더 많은 정보와 예시 엔드포인트가 나와 있습니다.
+
+### CSP를 사용한 또 다른 보고 방법
+
+사이트가 Blogger와 같은 플랫폼에서 호스팅되는 경우 헤더를 수정하고 CSP를 추가할 수 있는 액세스 권한이 없을 수 있습니다. 이에 대한 대안으로, [HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker) 또는 [Mixed Content Scan](https://github.com/bramus/mixed-content-scan)과 같은 웹사이트 크롤러를 사용하여 사이트 전체의 문제를 찾을 수 있습니다.
+
+### 안전하지 않은 요청 업그레이드
+
+여러 브라우저에서 안전하지 않은 요청을 업그레이드 및 차단하고 있습니다. CSP 지시문을 사용하여 이러한 자산을 자동으로 업그레이드하거나 차단할 수 있습니다.
+
+[`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) CSP 지시문은 네트워크 요청을 하기 전에 안전하지 않은 URL을 업그레이드하도록 브라우저에 지시합니다.
+
+페이지에 `<img src="http://example.com/image.jpg">`와 같은 HTTP URL이 있는 이미지 태그가 포함된 경우를 예로 들어 보겠습니다.
+
+브라우저는 대신 `https://example.com/image.jpg`에 대한 보안 요청을 하여 혼합 콘텐츠로부터 사용자를 보호합니다.
+
+다음 지시문과 함께 `Content-Security-Policy` 헤더를 전송하여 이 동작을 활성화할 수 있습니다.
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+또는 `<meta>` 요소를 사용하여 문서의 `<head>` 섹션에 동일한 지시문을 인라인으로 포함시킵니다.
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+브라우저 자동 업그레이드와 마찬가지로 HTTPS를 통해 리소스를 사용할 수 없으면 업그레이드된 요청이 실패하고 리소스가 로드되지 않습니다. 그러면 페이지의 보안이 유지됩니다. `upgrade-insecure-requests` 지시문은 자동 브라우저 업그레이드에서 더 나아가 브라우저가 현재 적용하지 않는 요청까지 업그레이드합니다.
+
+`upgrade-insecure-requests` 지시문은 `<iframe>` 문서로 캐스케이딩되어 전체 페이지가 보호되도록 합니다.
+
+### 모든 혼합 콘텐츠 차단
+
+사용자를 보호하기 위한 대체 옵션은 [`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking) CSP 지시문입니다. 이 지시문은 브라우저에 혼합 콘텐츠를 로드하지 않도록 지시합니다. 활성 및 수동 혼합 콘텐츠를 포함하여 모든 혼합 콘텐츠 리소스 요청이 차단됩니다. 이 옵션은 또한 `<iframe>` 문서로 캐스케이딩되어 전체 페이지에 혼합 콘텐츠가 없도록 합니다.
+
+페이지는 다음 지시문과 함께 `Content-Security-Policy` 헤더를 전송하여 이 동작을 선택할 수 있습니다.
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+또는 `<meta>` 요소를 사용하여 문서의 `<head>` 섹션에 동일한 지시문을 인라인으로 포함시킵니다.
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %} `upgrade-insecure-requests`와 `block-all-mixed-content`를 모두 설정하면 `upgrade-insecure-requests`가 평가되고 먼저 사용됩니다. 브라우저는 더 진행하여 요청을 차단하지 않습니다. 따라서 둘 중 하나를 사용해야 합니다. {% endAside %}
diff --git a/src/site/content/ko/secure/index.md b/src/site/content/ko/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/ko/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/ko/secure/same-site-same-origin/index.md b/src/site/content/ko/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..e1dd804df8a
--- /dev/null
+++ b/src/site/content/ko/secure/same-site-same-origin/index.md
@@ -0,0 +1,185 @@
+---
+layout: post
+title: '"동일 사이트" 및 "동일 출처" 이해하기'
+authors:
+  - agektmr
+date: 2020-04-15
+updated: 2020-06-10
+description: '"동일 사이트"와 "동일 출처"는 자주 인용되지만 종종 오해됩니다. 이 기사는 이 둘이 무엇이며 어떻게 다른지 이해하는 데 도움이 됩니다.'
+tags:
+  - security
+---
+
+"동일 사이트"와 "동일 출처"는 자주 인용되지만 종종 오해되는 용어입니다. 예를 들어 페이지 전환, `fetch()` 요청, 쿠키, 팝업 열기, 포함된 리소스 및 iframe과 관련하여 언급됩니다.
+
+## 출처
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="출처", width="680", height="100" %}
+
+"출처"은 [체계](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol) [(프로토콜](https://developer.mozilla.org/docs/Glossary/Protocol) 이라고도 하는 [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) 또는 [HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS) ), [호스트 이름](https://en.wikipedia.org/wiki/Hostname) 및 [포트](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port) (지정된 경우)의 조합입니다. 예를 들어, URL이 `https://www.example.com:443/foo` 인 경우 "출처"는 `https://www.example.com:443` 입니다.
+
+### "동일 출처"와 "교차 출처" {: #same-origin-and-cross-origin }
+
+동일한 구성표, 호스트 이름 및 포트가 조합된 웹 사이트는 "동일 출처"로 간주됩니다. 다른 모든 것은 "교차 출처"로 간주됩니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>출처 A</th>
+        <th>출처 B</th>
+        <th>출처 A와 B가 "동일 출처"인지 "교차 출처"인지에 대한 설명</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>
+<strong>https://www.evil.com</strong> :443</td>
+        <td>교차 출처: 다른 도메인</td>
+      </tr>
+      <tr>
+        <td>https://<strong>example.com</strong>:443</td>
+        <td>교차 출처: 다른 하위 도메인</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td>교차 출처: 다른 하위 도메인</td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>교차 출처: 다른 체계</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td>교차 출처: 다른 포트</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>동일 출처: 정확히 일치</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>동일 출처: 암시적 포트 번호(443) 일치</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 사이트
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="사이트", width="680", height="142" %}
+
+`.com` 및 `.org`와 같은 최상위 도메인(TLD)은 [루트 영역 데이터베이스](https://www.iana.org/domains/root/db)에 나열됩니다. 위의 예에서 "사이트"는 TLD와 그 바로 앞의 도메인 부분의 조합입니다. 예를 들어 URL이 `https://www.example.com:443/foo` 인 경우 "사이트"는 `example.com` 입니다.
+
+`.co.jp` 또는 `.github.io` 와 같은 `.jp` 또는 `.io` 의 TLD를 사용하는 것만으로는 "사이트"를 식별할 수 있을 만큼 세분화되지 않습니다. 또한 특정 TLD에 대해 등록 가능한 도메인 수준을 알고리즘 방식으로 결정할 수 있는 방법이 없습니다. 이것이 "유효 TLD"(eTLD) 목록이 생성된 이유입니다. 이것들은 [공개 접미사 목록](https://wiki.mozilla.org/Public_Suffix_List)에 정의되어 있습니다. eTLDs의 목록은 유지됩니다 [publicsuffix.org/list](https://publicsuffix.org/list/).
+
+전체 사이트 이름은 eTLD+1로 알려져 있습니다. 예를 들어 URL이 `https://my-project.github.io`인 경우 eTLD는 `.github.io`이고 eTLD+1은 `my-project.github.io`이며 "사이트"로 간주됩니다. 즉, eTLD+1은 유효 TLD이며 바로 앞의 도메인 부분입니다.
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### "same-site"와 "cross-site" {: #same-site-cross-site }
+
+동일한 eTLD+1이 있는 웹사이트는 "same-site"로 간주됩니다. 다른 eTLD+1이 있는 웹사이트는 "cross-site"입니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>출처 A</th>
+        <th>출처 B</th>
+        <th>출처 A와 B가 "동일 사이트"인지 "교차 사이트"인지에 대한 설명</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>교차 사이트: 다른 도메인</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>동일 사이트: 다른 하위 도메인은 중요하지 않습니다.</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td><strong>동일 사이트: 다른 체계는 중요하지 않습니다.</strong></td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>동일 사이트: 다른 포트는 중요하지 않습니다.</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>동일 사이트: 정확히 일치</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>동일 사이트: 포트는 중요하지 않습니다.</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### "schemeful 동일 사이트"
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+"동일 사이트"의 정의는 HTTP가 [약한 채널](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8)로 사용되는 것을 방지하기 위해 URL 체계를 사이트의 일부로 간주하도록 진화하고 있습니다. 브라우저가 이 해석으로 이동함에 따라 이전 정의를 참조할 때 "scheme-less 동일 사이트"에 대한 참조와 더 엄격한 정의를 참조하는 "[schemeful 동일 사이트](/schemeful-samesite/)"에 대한 참조를 볼 수 있습니다. 이 경우 `http://www.example.com` 및 `https://www.example.com`이 교차 사이트로 간주됩니다.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>출처 A</th>
+        <th>Origin B</th>
+        <th>출처 A와 B가 "schemeful 동일 사이트"인지 여부에 대한 설명</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>
+<strong>https://www.evil.com</strong> :443</td>
+        <td>cross-site: 다른 도메인</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>schemeful 동일 사이트: 다른 하위 도메인은 중요하지 않습니다.</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>교차 출처: 다른 체계</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>schemeful 동일 사이트: 다른 포트는 중요하지 않습니다.</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>schemeful 동일 사이트: 정확히 일치</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>schemeful 동일 사이트: 포트는 중요하지 않습니다.</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 요청이 "동일 사이트", "동일 출처" 또는 "교차 사이트"인지 확인하는 방법
+
+`Sec-Fetch-Site` HTTP 헤더와 함께 요청을 보냅니다. 다른 브라우저는 2020년 4월 현재 `Sec-Fetch-Site` 를 지원하지 않습니다. 이것은 더 큰 [Fetch Metadata Request Headers](https://www.w3.org/TR/fetch-metadata/) 제안의 일부입니다. 헤더에는 다음 값 중 하나가 있습니다.
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+`Sec-Fetch-Site`의 값을 검사하여 요청이 "동일 사이트", "동일 출처" 혹은 "교차 사이트"인지 확인할 수 있습니다("schemeful-same-site는 `Sec-Fetch-Site`에서 포착되지 않습니다).
diff --git a/src/site/content/ko/secure/what-is-mixed-content/index.md b/src/site/content/ko/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..9417f0e9288
--- /dev/null
+++ b/src/site/content/ko/secure/what-is-mixed-content/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: 혼합 콘텐츠란 무엇입니까?
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: |2
+
+  보안 HTTPS 연결을 통해 초기 HTML이 로드될 때 혼합 콘텐츠가 발생합니다.
+  그러나 다른 리소스는 안전하지 않은 HTTP 연결을 통해 로드됩니다.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+**혼합 콘텐츠**는 초기 HTML이 보안 [HTTPS](/why-https-matters/) 연결을 통해 로드되지만 다른 리소스(예: 이미지, 비디오, 스타일시트, 스크립트)는 비보안 HTTP 연결을 통해 로드될 때 발생합니다. HTTP 및 HTTPS 콘텐츠가 모두 동일한 페이지를 표시하기 위해 로드되고 초기 요청이 HTTPS를 통해 안전했기 때문에 이를 혼합 콘텐츠라고 합니다.
+
+안전하지 않은 HTTP 프로토콜을 사용하여 하위 리소스를 요청하면 전체 페이지의 보안이 약화됩니다. 이러한 요청은 공격자가 네트워크 연결을 도청하고 두 당사자 간의 통신을 보거나 수정하는 [**경로 내 공격**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1)에 취약하기 때문입니다. 이러한 리소스를 사용하여 공격자는 웹 사이트의 사용자를 추적하고 콘텐츠를 교체할 수 있으며 활성 혼합 콘텐츠의 경우 안전하지 않은 리소스뿐만 아니라 페이지를 완전히 제어할 수 있습니다.
+
+많은 브라우저가 사용자에게 혼합 콘텐츠 경고를 보고하지만 이러한 일이 발생했을 때는 너무 늦었습니다. 안전하지 않은 요청이 이미 수행되었고 페이지의 보안이 손상되었습니다.
+
+이것이 브라우저가 혼합 콘텐츠를 점점 더 차단하는 이유입니다. 사이트에 혼합 콘텐츠가 있는 경우 이를 수정하면 브라우저가 더욱 엄격해짐에 따라 콘텐츠가 계속 로드됩니다.
+
+## 두 가지 유형의 혼합 콘텐츠
+
+혼합 콘텐츠에는 능동 및 수동의 두 가지 유형이 있습니다.
+
+**수동 혼합 콘텐츠**는 페이지의 나머지 부분과 상호 작용하지 않는 콘텐츠를 말하므로 메시지 가로채기 공격은 해당 콘텐츠를 가로채거나 변경할 경우 수행할 수 있는 작업으로 제한됩니다. 수동 혼합 콘텐츠는 이미지, 비디오 및 오디오 콘텐츠로 정의됩니다.
+
+**활성 혼합 콘텐츠**는 페이지 전체와 상호 작용하며 공격자가 페이지에서 거의 모든 작업을 수행할 수 있도록 합니다. 활성 혼합 콘텐츠에는 브라우저에서 다운로드하고 실행할 수 있는 스크립트, 스타일시트, iframe 및 기타 코드가 포함됩니다.
+
+### 수동 혼합 콘텐츠
+
+수동 혼합 콘텐츠는 덜 문제가 있는 것으로 보이지만 여전히 사이트와 사용자에게 보안 위협이 됩니다. 예를 들어, 공격자는 사이트의 이미지에 대한 HTTP 요청을 가로채 이러한 이미지를 교환하거나 교체할 수 있습니다. 공격자는 *저장* 및 *삭제* 버튼 이미지를 교환하여 사용자가 의도하지 않은 콘텐츠를 삭제하도록 할 수 있습니다. 제품 다이어그램을 외설적이거나 음란한 콘텐츠로 교체하여 사이트를 손상시킵니다. 또는 제품 사진을 다른 사이트 또는 제품에 대한 광고로 교체하십시오.
+
+공격자가 사이트의 콘텐츠를 변경하지 않더라도 공격자는 혼합 콘텐츠 요청을 통해 사용자를 추적할 수 있습니다. 공격자는 브라우저가 로드하는 이미지 또는 기타 리소스를 기반으로 사용자가 방문하는 페이지와 사용자가 보는 제품을 알 수 있습니다.
+
+수동 혼합 콘텐츠가 있는 경우 페이지 자체가 HTTPS를 통해 로드된 경우에도 대부분의 브라우저는 URL 표시줄에 페이지가 안전하지 않다고 표시합니다. 수동 혼합 콘텐츠의 예가 포함된 이 [데모](https://passive-mixed-content.glitch.me/)에서 이 동작을 관찰할 수 있습니다.
+
+최근까지 수동적인 혼합 콘텐츠가 모든 브라우저에 로드되어 차단하면 많은 웹사이트가 손상되었을 것입니다. 이것은 이제 변경되기 시작하므로 사이트의 혼합 콘텐츠 인스턴스를 업데이트하는 것이 중요합니다.
+
+[Chrome은 현재](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) 가능한 경우 수동 혼합 콘텐츠의 자동 업그레이드를 출시하고 있습니다. 자동 업그레이드는 자산이 HTTPS를 통해 사용 가능하지만 HTTP로 하드코딩된 경우 브라우저가 HTTPS 버전을 로드함을 의미합니다. 보안 버전을 찾을 수 없으면 자산이 로드되지 않습니다.
+
+혼합 콘텐츠를 감지하거나 수동 혼합 콘텐츠를 자동 업그레이드할 때마다 Chrome은 DevTools의 **문제** 탭에 자세한 메시지를 기록하여 특정 문제를 해결하는 방법을 안내합니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="Chrome DevTools의 문제 탭은 특정 혼합 콘텐츠 문제 및 해결 방법에 대한 자세한 정보를 보여줍니다.", width="800", height="310 " %}</figure>
+
+### 활성 혼합 콘텐츠
+
+능동 혼합 콘텐츠는 수동 혼합 콘텐츠보다 더 큰 위협이 됩니다. 공격자는 활성 콘텐츠를 가로채서 다시 작성하여 페이지 또는 전체 웹 사이트를 완전히 제어할 수 있습니다. 이를 통해 공격자는 완전히 다른 콘텐츠 표시, 사용자 암호 또는 기타 로그인 자격 증명 도용, 사용자 세션 쿠키 도용 또는 사용자를 완전히 다른 사이트로 리디렉션하는 등 페이지에 대한 모든 것을 변경할 수 있습니다.
+
+이 위협의 심각성으로 인해 대부분의 브라우저는 기본적으로 이러한 유형의 콘텐츠를 차단하여 사용자를 보호하지만 기능은 브라우저 공급업체와 버전에 따라 다릅니다.
+
+이 다른 [데모](https://active-mixed-content.glitch.me/)에는 활성 혼합 콘텐츠의 예가 포함되어 있습니다. [HTTPS를 통해 예제를 로드](https://active-mixed-content.glitch.me/)할 때 차단되는 콘텐츠를 보려면 [HTTP를 통해 예제를 로드](http://active-mixed-content.glitch.me/)하십시오. 차단된 콘텐츠는 **문제** 탭에서도 자세히 설명됩니다.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="Chrome DevTools의 Issues 탭은 특정 혼합 콘텐츠 문제와 해결 방법에 대한 자세한 정보를 보여줍니다.", width="800", height="361 " %}</figure>
+
+{% Aside %} 브라우저는 DevTools에서 차단된 콘텐츠도 강조표시합니다. 차단된 콘텐츠 문제는 Chromium 기반 브라우저의 **문제** 탭에 자세히 설명되어 있습니다. Firefox 및 Safari는 콘솔에 메시지를 기록합니다. {% endAside %}
+
+## 혼합 콘텐츠 사양
+
+브라우저는 [**선택적으로 차단할 수 있는 콘텐츠**](https://w3c.github.io/webappsec-mixed-content/#category-blockable)와 [**차단할 수 있는 콘텐츠**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content) 범주를 정의하는 [혼합 콘텐츠 사양](https://w3c.github.io/webappsec-mixed-content/#category-blockable)을 따릅니다.
+
+사양에서 리소스는 "혼합 콘텐츠로 사용을 허용할 위험이 웹의 상당 부분을 손상시킬 위험보다 클 때" 선택적으로 차단 가능한 콘텐츠로 간주됩니다. 이것은 위에서 설명한 수동 혼합 콘텐츠 범주의 하위 집합입니다.
+
+**선택적으로 차단 가능하지** 않습니다 모든 콘텐츠 **차단 가능** 간주되며, 브라우저에 의해 차단되어야한다.
+
+{% Aside %} [혼합 콘텐츠 사양의 레벨 2](https://w3c.github.io/webappsec-mixed-content/level2.html)가 진행 중이며 사양에 자동 업그레이드가 추가됩니다. {% endAside %}
+
+최근 몇 년 동안 [HTTPS 사용이 급격히 증가](https://transparencyreport.google.com/https/overview)했으며 웹에서 명백한 기본값이 되었습니다. 이를 통해 브라우저는 [혼합 콘텐츠 사양](https://w3c.github.io/webappsec/specs/mixedcontent/)에서 **선택적으로 차단 가능**으로 정의된 하위 리소스 유형을 포함하여 모든 혼합 콘텐츠 차단을 고려할 수 있습니다. 이것이 바로 Chrome이 이러한 하위 리소스에 대해 더 엄격한 접근 방식을 취하는 이유입니다.
+
+### 이전 브라우저
+
+귀하의 웹사이트를 방문하는 모든 방문자가 최신 브라우저를 사용하는 것은 아니라는 점을 기억하는 것이 중요합니다. 다른 브라우저 공급업체의 다른 버전은 각각 혼합 콘텐츠를 다르게 취급합니다. 최악의 경우 이전 브라우저와 버전은 혼합 콘텐츠를 전혀 차단하지 않으므로 사용자에게 매우 안전하지 않습니다.
+
+혼합 콘텐츠 문제를 수정하면 콘텐츠가 새 브라우저에서 표시되도록 할 수 있습니다. 또한 이전 브라우저에서 차단하지 않는 위험한 콘텐츠로부터 사용자를 보호할 수 있습니다.
diff --git a/src/site/content/ko/secure/why-https-matters/index.md b/src/site/content/ko/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..a618899dc15
--- /dev/null
+++ b/src/site/content/ko/secure/why-https-matters/index.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: HTTPS가 중요한 이유
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: |2-
+
+  HTTPS는 웹사이트의 무결성을 보호하고, 사용자의 개인 정보 및 보안을 보호합니다. HTTPS는 새롭고 강력한 웹 플랫폼 API의 전제 조건입니다.
+tags:
+  - security
+---
+
+민감한 통신을 처리하지 않더라도 항상 HTTPS로 모든 웹사이트를 보호해야 합니다. HTTPS는 웹사이트와 사용자 개인 정보 모두에 중요한 보안 및 데이터 무결성을 제공하지만, 그 외의 많은 새로운 브라우저 기능에도 필수적이며, 특히 [프로그레시브 웹 앱](/progressive-web-apps)에 필요한 기능에도 필수적입니다.
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## 요약 {: #summary }
+
+- 악성 및 무해한 침입자 모두는 웹사이트와 사용자 간의 보호되지 않은 모든 리소스를 부당하게 이용합니다.
+- 많은 침입자가 사용자를 식별하기 위해 종합적인 동작을 확인합니다.
+- HTTPS는 단순히 웹사이트의 오용만 막지 않습니다. HTTPS는 많은 첨단 기능과 서비스 작업자와 같은 앱과 유사한 기능을 구현하는 기술의 요구 사항이기도 합니다.
+
+## HTTPS는 웹사이트의 무결성을 보호합니다. {: #integrity }
+
+HTTPS는 침입자가 웹사이트와 사용자 브라우저 간의 통신을 변조하는 것을 방지하는 데 도움이 됩니다. 침입자로는 의도적이며 악의적인 공격자와 페이지에 광고를 삽입하는 ISP 또는 호텔과 같이 합법적이지만 침입적인 회사 등이 있습니다.
+
+침입자는 보호되지 않은 통신을 이용하여 사용자가 민감한 정보를 포기하거나 맬웨어를 설치하도록 속이거나, 리소스에 자신의 광고를 삽입하도록 합니다. 예를 들어, 일부 제3자는 잠재적으로 사용자 경험을 손상하고 보안 취약성을 생성하는 광고를 웹사이트에 삽입합니다.
+
+침입자는 웹사이트와 사용자 간에 이동하는 모든 보호되지 않은 리소스를 악용합니다. 이미지, 쿠키, 스크립트, HTML 등이 모두 악용될 수 있습니다. 침입은 사용자의 컴퓨터, Wi-Fi 핫스팟 또는 손상된 ISP 등 네트워크의 어느 지점에서나 발생할 수 있습니다.
+
+## HTTPS는 사용자의 개인 정보와 보안을 보호합니다. {: #privacy }
+
+HTTPS는 침입자가 웹사이트와 사용자 간의 통신을 소극적으로 들을 수 없도록 합니다.
+
+HTTPS에 대한 일반적인 오해 중 하나는 민감한 통신을 처리하는 웹사이트만 HTTPS가 필요하다는 것입니다. 보호되지 않은 모든 HTTP 요청은 잠재적으로 사용자의 동작 및 ID 정보를 공개할 수 있습니다. 보호되지 않는 웹사이트 중 하나를 한 번만 방문하는 행동은 문제가 없어 보일 수 있지만, 일부 침입자는 사용자의 행동과 의도를 추론하고 이들의 신원을 [반익명화](https://en.wikipedia.org/wiki/De-anonymization)하기 위해 사용자의 종합적인 브라우징 활동을 살펴봅니다. 예를 들어, 직원은 보호되지 않은 의료 기사를 읽는 것만으로도 민감한 건강 상태를 고용주에게 무심코 공개할 수 있습니다.
+
+## HTTPS는 웹의 미래입니다 {: #capabilities }
+
+`getUserMedia()`를 사용한 사진 촬영 또는 오디오 녹음, [서비스 작업자](/service-workers-cache-storage/)를 사용한 오프라인 앱 경험 활성화, [프로그레시브 웹 앱](/progressive-web-apps)의 구축과 같은 강력하고 새로운 웹 플랫폼 기능은 사용자의 명시적인 허가가 있어야 실행할 수 있습니다. [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation)와 같은 이전의 많은 API도 실행 권한을 요구하도록 업데이트되고 있습니다. HTTPS는 이러한 새로운 기능과 업데이트된 API 모두에 대한 권한 워크플로의 핵심 구성 요소입니다.
diff --git a/src/site/content/ko/vitals/index.md b/src/site/content/ko/vitals/index.md
new file mode 100644
index 00000000000..86e1c26fc6e
--- /dev/null
+++ b/src/site/content/ko/vitals/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: Web Vitals
+description: 정상적인 사이트를 위한 필수 메트릭
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+사용자 경험의 품질을 최적화하는 것은 웹 사이트의 장기적인 성공의 핵심입니다. 비즈니스 소유자, 마케팅 담당자 또는 개발자에 관계없이 Web Vitals는 사이트 경험을 수량화하고 개선할 기회를 식별하는 데 도움이 될 수 있습니다.
+
+## 개요
+
+Web Vitals는 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google의 이니셔티브입니다.
+
+Google은 성능을 측정하고 보고하기 위해 수년 동안 다양한 도구를 제공해 왔습니다. 이러한 도구를 사용하는 데 전문가가 된 일부 개발자도 존재하지만, 너무나 풍부한 도구와 메트릭에 버거워하는 이들도 있습니다.
+
+사이트 소유자의 경우 사용자에게 제공하는 경험의 품질을 이해하고자 성능에 관한 모든 것을 알고 있을 필요는 없습니다. Web Vitals 이니셔티브는 전망을 단순화하고, 사이트에서 가장 중요한 메트릭인 **Core Web Vitals**에 초점을 맞추도록 지원합니다.
+
+## Core Web Vitals
+
+Core Web Vitals는 모든 웹페이지에 적용되는 Web Vitals의 하위 집합으로 모든 사이트 소유자가 측정해야 하며 모든 Google 도구의 표면에 위치합니다. 각각의 Core Web Vitals는 사용자 경험의 고유한 측면을 나타내고, [필드에서](/user-centric-performance-metrics/#how-metrics-are-measured) 측정 가능하며, 필수적인 [사용자 중심](/user-centric-performance-metrics/#how-metrics-are-measured) 결과에 대한 현실의 경험을 반영합니다.
+
+Core Web Vitals를 구성하는 메트릭은 시간이 지남에 따라 [진화](#evolving-web-vitals)합니다. 2020년 현재 세트는 사용자 경험의 세 가지 측면인 *로딩*, *상호 작용*, *시각적 안정성*에 중점을 두고 있으며 다음 메트릭(및 각각의 임계값)을 포함합니다.
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="최대 콘텐츠풀 페인트 권장 임계값", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="최초 입력 지연 권장 임계값", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="누적 레이아웃 이동 권장 임계값", width="400", height="350" %}</div>
+
+- **[Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)](/lcp/)**: *로딩* 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 **2.5초** 이내에 LCP가 발생해야 합니다.
+- **[First Input Delay(최초 입력 지연, FID)](/fid/)**: *상호 작용*을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 **100밀리초** 이하여야 합니다.
+- **[Cumulative Layout Shift(누적 레이아웃 시프트, CLS)](/cls/)**: *시각적 안정성*을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지에서 **0.1** 이하의 CLS를 유지해야 합니다.
+
+위의 각 메트릭이 대부분의 사용자를 위해 권장되는 목표에 도달했는지 확인하기 위해 측정하기 좋은 임계값은 모바일 및 데스크톱 장치 전반을 세분화했을 때 페이지 로드의 **75번째 백분위수**입니다.
+
+Core Web Vitals 규정 준수를 평가하는 도구는 페이지가 위의 세 가지 메트릭 모두에 대해 75번째 백분위수에서 권장 목표를 충족한다면 통과한다고 간주해야 합니다.
+
+{% Aside %} 이러한 권장 사항의 기반이 되는 연구 및 방법론에 대해 자세히 알아보려면 [Core Web Vitals 메트릭 임계값](/defining-core-web-vitals-thresholds/)을 참조하시기 바랍니다. {% endAside %}
+
+### Core Web Vitals를 측정하고 보고하는 도구
+
+Google은 Core Web Vitals가 모든 웹 경험에 필수적이라고 생각하며, [사용자에게 널리 사용되는 도구](/vitals-tools/)의 표면에 이러한 메트릭을 표시하도록 최선을 다하고 있습니다. 다음 섹션에서는 Core Web Vitals를 지원하는 도구가 무엇인지에 대한 상세한 정보를 확인하실 수 있습니다.
+
+#### Core Web Vitals를 측정하기 위한 필드 도구
+
+[Chrome User Experience Report](https://developer.chrome.com/docs/crux/)는 각 Core Web Vital에 대해 익명으로 실제 사용자 측정 데이터를 수집합니다. 사이트 소유자는 페이지에 대해 분석 도구를 사용할 필요 없이, 이 데이터를 활용해 신속하게 성능을 평가하고 [PageSpeed Insights](https://pagespeed.web.dev/) 및 Search Console의 [Core Web Vitals Report](https://support.google.com/webmasters/answer/9205520) 같은 도구를 지원할 수 있습니다.
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Chrome User Experience Report</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">Search Console(Core Web Vitals Report)</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} 이러한 도구를 사용하는 방법과 자신의 사용 사례에 알맞은 도구를 알아보려면 [Web Vitals로 측정 시작하기](/vitals-measurement-getting-started/)를 참조하시기 바랍니다. {% endAside %}
+
+Chrome User Experience Report의 데이터는 사이트의 성능을 빠르게 평가할 수 있게 해주지만 정확한 진단이나 모니터링, 회귀에 대한 신속한 대응에 필수적인 상세한 페이지 뷰당 원격 분석은 제공하지 않습니다. 그러므로 필드에서 자체적으로 실제 사용자 모니터링을 진행하길 강력하게 추천합니다.
+
+#### JavaScript에서 Core Web Vitals 측정
+
+표준 웹 API를 사용하여 JavaScript에서 각 Core Web Vitals를 측정할 수 있습니다.
+
+모든 Core Web Vitals를 가장 쉽게 측정할 수 있는 방법은 [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 라이브러리를 사용하는 것입니다. 이러한 라이브러리는 위에 나열된 모든 Google 도구가 보고하는 것과 정확히 일치하는 방식으로 각 메트릭을 측정하는 기본 웹 API 주변에 위치한 소규모의 프로덕션 래퍼입니다.
+
+[web-vitals](https://github.com/GoogleChrome/web-vitals) 라이브러리를 사용하면 각 메트릭을 측정하는 것이 단일 함수를 호출하는 것만큼 간단해집니다(완전한 [사용 방법](https://github.com/GoogleChrome/web-vitals#usage) 및 [API](https://github.com/GoogleChrome/web-vitals#api) 세부 정보는 해당 문서 참조).
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+[web-vitals](https://github.com/GoogleChrome/web-vitals) 라이브러리를 사용하여 Core Web Vitals 데이터를 측정하고 분석 엔드포인트로 전송하도록 사이트를 구성했다면, 다음 단계는 해당 데이터를 집계하고 보고하여 페이지가 페이지 방문의 최소 75%에 대해 권장 임계값을 충족하는지 확인하는 것입니다.
+
+일부 분석 제공업체에서는 Core Web Vitals 메트릭에 대한 지원을 기본적으로 제공합니다. 그렇지 않은 곳이더라도, 자신의 도구에 Core Web Vitals를 측정하도록 허용하는 기본 커스텀 메트릭 기능은 포함해야 합니다.
+
+[Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report)를 이에 대한 예시로 들 수 있습니다. 이 보고서를 통해 사이트 소유자는 Google Analytics를 사용하여 Core Web Vitals를 측정할 수 있습니다. 다른 분석 도구를 사용하여 Core Web Vitals를 측정하는 방법에 대한 지침은 [필드에서 Web Vitals를 측정하기 위한 모범 사례](/vitals-field-measurement-best-practices/)를 참조하시기 바랍니다.
+
+또한 [Web Vitals Chrome 확장 프로그램](https://github.com/GoogleChrome/web-vitals-extension)을 사용해 코드를 작성하지 않고도 각 Core Web Vitals에 대해 보고할 수 있습니다. 이러한 확장 프로그램은 [web-vitals](https://github.com/GoogleChrome/web-vitals) 라이브러리를 사용하여 각 메트릭을 측정하고 사용자가 웹을 탐색할 때 표시합니다.
+
+이 확장 프로그램은 귀하의 사이트, 경쟁업체 사이트는 물론 전반적인 웹의 성능을 이해하는 데 도움이 될 수 있습니다.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Web Vitals 확장 프로그램</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+기본 웹 API를 통해 이러한 메트릭을 직접 측정하는 것을 선호하는 개발자는 구현 세부 정보에 대해 다음과 같은 메트릭 가이드를 참조할 수 있습니다.
+
+- [JavaScript에서 LCP 측정](/lcp/#measure-lcp-in-javascript)
+- [JavaScript에서 FID 측정](/fid/#measure-fid-in-javascript)
+- [JavaScript에서 CLS 측정](/cls/#measure-cls-in-javascript)
+
+{% Aside %} 인기 분석 서비스(또는 자체적인 인하우스 분석 툴)를 사용해 이러한 메트릭을 측정하는 법에 대한 자세한 내용은 [필드 Web Vitals 측정 모범 사례](/vitals-field-measurement-best-practices/)를 참조하시기 바랍니다. {% endAside %}
+
+#### Core Web Vitals를 측정하기 위한 실험실 도구
+
+모든 Core Web Vitals는 기본적으로 필드용 메트릭이지만, 대부분은 실험실에서도 측정할 수 있습니다.
+
+실험실 측정은 기능을 사용자에게 출시하기 전에 개발 중 기능의 성능을 테스트하고, 성능 회귀가 발생하기 전에 이를 포착해낼 수 있는 가장 좋은 방법입니다.
+
+다음 도구를 사용하여 실험실 환경에서 Core Web Vitals를 측정할 수 있습니다.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">Chrome DevTools</a></td>
+        <td>✔</td>
+        <td>✘ (대신 <a href="/tbt/">TBT</a> 사용)</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>
+        <td>✔</td>
+        <td>✘ (대신 <a href="/tbt/">TBT</a> 사용)</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} 사용자 없이 시뮬레이션된 환경에서 페이지를 로드하는 Lighthouse와 같은 도구로는 FID를 측정할 수 없습니다(사용자 입력이 없음). 그러나 Total Blocking Time(총 차단 시간, TBT) 메트릭은 실험실에서 측정할 수 있으며 FID를 충분히 대체할 수 있습니다. 실험실에서 TBT를 개선하는 성능 최적화는 필드에서 FID를 개선합니다(아래 성능 권장 사항 참조). {% endAside %}
+
+실험실 측정은 훌륭한 경험을 제공하는 데 필수적인 부분이지만 필드 측정을 대신할 수는 없습니다.
+
+사이트의 성능은 사용자의 장치 기능, 네트워크 조건, 장치에서 실행 중인 다른 프로세스, 페이지와 상호 작용하는 방식에 따라 크게 달라질 수 있습니다. 사실, 각 Core Web Vitals 메트릭의 점수는 사용자 상호 작용에 영향을 받을 수 있습니다. 그러므로 필드 측정만이 전체 그림을 정확하게 포착할 수 있는 방법입니다.
+
+### 점수 향상을 위한 권장 사항
+
+Core Web Vitals를 측정하고 개선할 영역을 식별한 후 다음 단계는 최적화입니다. 다음 가이드는 각 Core Web Vitals에 대해 페이지를 최적화하는 방법에 대한 구체적인 권장 사항을 제공합니다.
+
+- [LCP 최적화](/optimize-lcp/)
+- [FID 최적화](/optimize-fid/)
+- [CLS 최적화](/optimize-cls/)
+
+## 기타 Web Vitals
+
+Core Web Vitals는 우수한 사용자 경험을 이해하고 제공하는 데 중요한 메트릭이지만 다른 중요 메트릭 또한 존재합니다.
+
+이러한 기타 Web Vitals 메트릭은 경험의 더 큰 부분을 포착하고, 특정 문제의 진단을 지원하는 등 주로 Core Web Vitals를 대체하거나 보완하는 역할을 합니다.
+
+예를 들어, [Time to First Byte(최초 바이트까지의 시간, TTFB)](/ttfb/) 및 [First Contentful Paint(최초 콘텐츠풀 페인트, FCP)](/fcp/) 메트릭은 모두 *로딩* 경험에 중요한 요소이며 LCP와 함께 문제(각각 느린 [서버 응답 시간](/overloaded-server/) 또는 [렌더링 차단 리소스](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/) 문제)를 진단하는 데 유용합니다.
+
+마찬가지로, [총 차단 시간(TBT)](/tbt/) 및 [Time to Interactive(상호 작용까지의 시간, TTI)](/tti/)와 같은 메트릭은 FID에 영향을 줄 잠재적인 *상호 작용* 문제를 파악하고 진단하는 데 필수적인 실험실 메트릭입니다. 그러나 필드에서 측정할 수 없고 [사용자 중심](/user-centric-performance-metrics/#how-metrics-are-measured) 결과를 반영하지도 않기 때문에 Core Web Vitals 세트에 속하지는 않습니다.
+
+## 진화하는 Web Vitals
+
+Web Vitals 및 Core Web Vitals는 개발자가 웹 전반에 대한 경험의 품질을 측정하기 위해 현재 사용할 수 있는 최상의 신호를 나타내지만 이러한 신호는 완벽하지 않으며 향후 개선 또는 추가가 이루어질 수 있습니다.
+
+**Core Web Vitals**는 모든 웹페이지와 관련이 있으며 관련 Google 도구 전반에서 제공됩니다. 이러한 메트릭이 변경되는 경우 광범위한 영향을 미치기 때문에 개발자는 Core Web Vitals의 정의 및 임계값이 안정적이고, 사전 통지 및 예측 가능한 연간 주기로 업데이트가 이루어질 것임을 기대합니다.
+
+다른 Web Vitals는 컨텍스트 또는 도구별로 달라지며 Core Web Vitals보다 더 실험적일 수 있습니다. 따라서 정의와 임계값이 더 자주 변경될 수 있습니다.
+
+Web Vitals에 대한 모든 변경 사항은 공개된 이 [변경 로그](http://bit.ly/chrome-speed-metrics-changelog)에 명확하게 문서화됩니다.
diff --git a/src/site/content/pages.njk b/src/site/content/pages.njk
new file mode 100644
index 00000000000..dedcfcf07da
--- /dev/null
+++ b/src/site/content/pages.njk
@@ -0,0 +1,16 @@
+---
+noindex: true
+permalink: "/pages.json"
+---
+{% if site.env === 'prod' %}
+  {% set posts = collections.all | livePosts | algoliaIndexable %}
+{% else %}
+  {% set posts = [] %}
+{% endif %}
+
+[
+  {% for post in posts %}
+    {{ post | algoliaItem | dump | safe }}
+    {{ "" if loop.last else "," }}
+  {% endfor %}
+]
diff --git a/src/site/content/pl/404.md b/src/site/content/pl/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/pl/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/pl/404.njk b/src/site/content/pl/404.njk
deleted file mode 100644
index 0633aa62ade..00000000000
--- a/src/site/content/pl/404.njk
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: layout
-title: 404
-description: |
-  Page Not Found
-noindex: true
----
-
-<div class="w-layout-container--large">
-  <header class="w-page-header">
-    <h1 class="w-page-header__headline w-code">{{ title }}</h1>
-    <p class="w-page-header__copy">
-      Sorry, we couldn't find that page.
-    </p>
-  </header>
-</div>
diff --git a/src/site/content/pl/accessible/accessible.11tydata.js b/src/site/content/pl/accessible/accessible.11tydata.js
deleted file mode 100644
index 0f33144a5a3..00000000000
--- a/src/site/content/pl/accessible/accessible.11tydata.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  // Tags are inherited by all posts.
-  tags: ['accessible'],
-};
diff --git a/src/site/content/pl/accessible/control-focus-with-tabindex/index.md b/src/site/content/pl/accessible/control-focus-with-tabindex/index.md
deleted file mode 100644
index ed3d48563ad..00000000000
--- a/src/site/content/pl/accessible/control-focus-with-tabindex/index.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-layout: post
-title: Control focus with tabindex
-authors:
-  - robdodson
-date: 2018-11-18
-description: |
-  Native HTML elements such as <button> or <input> have keyboard accessibility
-  built-in for free. If you're building custom interactive components, use
-  tabindex to ensure that they're keyboard accessible.
-translation: none
----
-
-Native HTML elements such as `<button>` or `<input>` have keyboard accessibility
-built in for free. If you're building _custom_ interactive components, however,
-use the `tabindex` attribute to ensure that they're keyboard accessible.
-
-{% Aside %}
-Whenever possible, use a native HTML element rather than building your
-own custom version. `<button>`, for example, is very easy to style and
-already has full keyboard support. This will save you from needing to manage
-`tabindex` or add semantics with ARIA.
-{% endAside %}
-
-## Check if your controls are keyboard accessible
-
-A tool like Lighthouse is great at detecting certain accessibility issues, but
-some things can only be tested by a human.
-
-Try pressing the `Tab` key to navigate through your site. Are you able to reach
-all the interactive controls on the page? If not, you may need to use
-[`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
-to improve the focusability of those controls.
-
-{% Aside 'warning' %}
-If you don't see a focus indicator at all, it may be hidden by your
-CSS. Check for any styles that mention `:focus { outline: none; }`.
-You can learn how to fix this in our guide on
-[styling focus](/style-focus).
-{% endAside %}
-
-## Insert an element into the tab order
-
-Insert an element into the natural tab order using `tabindex="0"`. For example:
-
-```html
-<div tabindex="0">Focus me with the TAB key</div>
-```
-
-To focus an element, press the `Tab` key or call the element's `focus()` method.
-
-{% Glitch {
-  id: 'tabindex-zero',
-  path: 'index.html',
-  height: 346
-} %}
-
-## Remove an element from the tab order
-
-Remove an element using `tabindex="-1"`. For example:
-
-```html
-<button tabindex="-1">Can't reach me with the TAB key!</button>
-```
-
-This removes an element from the natural tab order, but the element can still be
-focused by calling its `focus()` method.
-
-{% Glitch {
-  id: 'tabindex-negative-one',
-  path: 'index.html',
-  height: 346
-} %}
-
-Note that applying `tabindex="-1"` to an element doesn't affect its children;
-if they're in the tab order naturally or because of a `tabindex` value,
-they'll remain in the tab order.
-To remove an element and all its children from the tab order, consider using
-[the WICG's `inert` polyfill](https://github.com/WICG/inert).
-The polyfill emulates the behavior of a proposed `inert` attribute,
-which prevents elements from being selected or read by assistive technologies.
-
-{% Aside 'caution' %}
-The `inert` polyfill is experimental and may not work as expected in all cases.
-Test carefully before using in production.
-{% endAside %}
-
-## Avoid `tabindex > 0`
-
-Any `tabindex` greater than 0 jumps the element to the front of the natural tab
-order. If there are multiple elements with a `tabindex` greater than 0, the tab
-order starts from the lowest value greater than zero and works its way up.
-
-Using a `tabindex` greater than 0 is considered an **anti-pattern** because
-screen readers navigate the page in DOM order, not tab order. If you need an
-element to come sooner in the tab order, it should be moved to an earlier spot
-in the DOM.
-
-Lighthouse makes it easy to identify elements with a `tabindex` > 0. Run the
-Accessibility Audit (Lighthouse > Options > Accessibility) and look for the
-results of the "No element has a [tabindex] value greater than 0" audit.
-
-## Create accessible components with "roving `tabindex`"
-
-If you're building a complex component, you may need to add additional keyboard
-support beyond focus. Consider the native `select` element. It is focusable and
-you can use the arrow keys to expose additional functionality (the selectable
-options).
-
-To implement similar functionality in your own components, use a technique known
-as "roving `tabindex`". Roving tabindex works by setting `tabindex` to -1 for
-all children except the currently-active one. The component then uses a keyboard
-event listener to determine which key the user has pressed.
-
-When this happens, the component sets the previously focused child's `tabindex`
-to -1, sets the to-be-focused child's `tabindex` to 0, and calls the `focus()`
-method on it.
-
-**Before**
-
-```html/2-3
-<div role="toolbar">
-  <button tabindex="-1">Undo</div>
-  <button tabindex="0">Redo</div>
-  <button tabindex="-1">Cut</div>
-</div>
-```
-
-**After**
-
-```html/2-3
-<div role="toolbar">
-  <button tabindex="-1">Undo</div>
-  <button tabindex="-1">Redo</div>
-  <button tabindex="0">Cut</div>
-</div>
-```
-
-{% Glitch {
-  id: 'roving-tabindex',
-  path: 'index.html',
-  height: 346
-} %}
-
-{% Aside %}
-Curious what those `role=""` attributes are for? They let you change the
-semantics of an element so it will be announced properly by a screen reader.
-You can learn more about them in our guide on
-[screen reader basics](/semantics-and-screen-readers).
-{% endAside %}
-
-{% Assessment page, 'self-assessment' %}
-
-## Keyboard access recipes
-
-If you're unsure what level of keyboard support your custom components might
-need, you can refer to the
-[ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/).
-This handy guide lists common UI patterns and identifies which keys your
-components should support.
diff --git a/src/site/content/pl/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/pl/accessible/control-focus-with-tabindex/self-assessment.assess.yml
deleted file mode 100644
index 03449e88b14..00000000000
--- a/src/site/content/pl/accessible/control-focus-with-tabindex/self-assessment.assess.yml
+++ /dev/null
@@ -1,102 +0,0 @@
-setLeader: |
-  Test your knowledge of tab order
-height: unset
-tabLabel: sample
-questions:
-  - stimulus: |
-      This HTML renders a modal dialog:
-
-      ```html
-      <div role="dialog" aria-labelledby="dialog-header">
-        <button aria-label="Close"></button>
-        <h2 id="dialog-header">
-          Do you want to allow notifications from this website?
-        </h2>
-        <button>No</button>
-        <button>Yes</button>
-      </div>
-      ```
-    type: think-and-check
-    stem: What is the tab order for the elements in the sample?
-    options:
-      - rationale: |
-          1. The **Close** button
-          1. The **No** button
-          1. The **Yes** button
-
-          Only the `<button>` elements are included in the tab order
-          because they're the only native HTML form elements.
-          To insert other elements into the tab order, you would add a `tabindex` attribute.
-  - stimulus: |
-      ```html
-      <section tabindex="-1">
-        <h2>Cat facts</h2>
-        <ul>
-          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
-          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
-        </ul>
-      </section>
-      ```
-    type: think-and-check
-    stem: Which elements from the sample are included in the tab order?
-    options:
-      - rationale: |
-          Only the `<a>` elements are included in the tab order.
-
-          The `<section>` element is not in the tab order
-          because it has a negative `tabindex` value.
-          (It can, however, be focused using the `focus()` method.)
-          The `tabindex` value for the `<section>` element doesn't affect its children.
-  - stimulus: |
-      This HTML renders a popup menu followed by a search input:
-
-      ```html
-      <div role="menu" tabindex="0">
-        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
-        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
-        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
-        <a role="menuitem" href="/about/" tabindex="-1">About</a>
-      </div>
-      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
-      ```
-    type: think-and-check
-    stem: Which element in the sample comes first in the tab order?
-    options:
-      - rationale: |
-          The **Search** text input comes first in the tab order.
-          Because it has a `tabindex` greater than 1, it jumps to the front of the tab order.
-
-          (This behavior is likely to cause confusion
-          if the menu is positioned on the page before the search input.
-          This is an example of why having a `tabindex` value greater than zero
-          is considered an anti-pattern.)
-  - stimulus: |
-      This HTML renders a custom radio group, which should have a
-      [roving `tabindex`](#create-accessible-components-with-"roving-tabindex").
-      (To keep things simpler, ignore the
-      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
-
-      ```html
-      <div role="radiogroup" aria-labelledby="breed-header">
-        <h3 id="breed-header">Your cat's breed</h3>
-        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
-        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
-        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
-      </div>
-      ```
-    type: think-and-check
-    stem: |
-      When a `role="radio"` element is focused,
-      what should happen when a user presses the `Right` arrow key?
-    options:
-      - rationale: |
-          - Change the `tabindex` values for all radio elements in the group to -1.
-          - If there's a radio element after the one that's focused,
-          set its `tabindex` value to 0.
-          - If there's no radio element after the one that's focused,
-          set the `tabindex` value of the first radio element in the group to 0.
-          - Focus the radio element that now has a `tabindex` of 0.
-
-          That's a lot—and it doesn't even include ARIA attributes!
-          This is an example of why it's easier to use native elements
-          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/pl/accessible/index.md b/src/site/content/pl/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/pl/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/pl/accessible/index.njk b/src/site/content/pl/accessible/index.njk
deleted file mode 100644
index 7a7941b5c0c..00000000000
--- a/src/site/content/pl/accessible/index.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: path
-override:tags: []
-date: 2018-11-05
-pathName: accessible
----
\ No newline at end of file
diff --git a/src/site/content/pl/angular/index.md b/src/site/content/pl/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/pl/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/pl/animations/index.md b/src/site/content/pl/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/pl/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/pl/devices/index.md b/src/site/content/pl/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/pl/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/pl/discoverable/index.md b/src/site/content/pl/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/pl/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/pl/explore/explore.11tydata.js b/src/site/content/pl/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/pl/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/pl/explore/index.md b/src/site/content/pl/explore/index.md
new file mode 100644
index 00000000000..1ccb74a31f6
--- /dev/null
+++ b/src/site/content/pl/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: Eksploruj
+date: 2022-12-10
+---
diff --git a/src/site/content/pl/fast/index.md b/src/site/content/pl/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/pl/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/pl/feed.njk b/src/site/content/pl/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/pl/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/pl/identity/index.md b/src/site/content/pl/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/pl/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/pl/index.11tydata.js b/src/site/content/pl/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/pl/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/pl/index.md b/src/site/content/pl/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/pl/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/pl/index.njk b/src/site/content/pl/index.njk
deleted file mode 100644
index 780a5d0b7e3..00000000000
--- a/src/site/content/pl/index.njk
+++ /dev/null
@@ -1,147 +0,0 @@
----
-layout: layout
-title: web.dev
-description: |
-  Get the web's modern capabilities on your own sites and apps with useful
-  guidance and analysis from web.dev.
-date: 2018-11-05
----
-
-{# *-landing-page classes are a holdover from devsite. #}
-{# It would be great to remove them as part of the v1 migration. #}
-
-<div class="home-landing-page">
-  <header class="w-masthead-home">
-    <div class="w-masthead-home__container">
-      <div class="w-masthead-home__left">
-        <h1 class="w-headline--two w-font-weight--medium">
-          Let's build the future of the web
-        </h1>
-        <p>
-          Get the web's modern capabilities on your own sites and apps with useful
-          guidance and analysis from web.dev.
-        </p>
-        <div class="w-masthead-home__buttons">
-          <a
-            class="w-button w-button--primary w-masthead-home__button--primary gc-analytics-event"
-            data-category="web.dev"
-            data-label="home, test site"
-            data-action="click"
-            href="/measure"
-          >
-            Test my site
-          </a>
-          <a
-            class="w-button w-button--secondary gc-analytics-event"
-            data-category="web.dev"
-            data-label="home, start learning"
-            data-action="click"
-            href="/learn"
-          >
-            Explore topics
-          </a>
-        </div>
-      </div>
-    </div>
-  </header>
-
-  <section class="w-layout-container w-text--center">
-    <p class="w-headline--two-small">
-      As the web advances, users' expectations grow. With web.dev's guidance, you
-      can give your users the best experience, wherever they are.
-    </p>
-    <a
-      class="w-button gc-analytics-event"
-      data-category="web.dev"
-      data-label="home, learn about"
-      data-action="click"
-      href="/about"
-    >
-      About web.dev
-    </a>
-  </section>
-
-  <section>
-    <div class="w-layout-container w-pb--non">
-      <header class="w-text--center">
-        <h2 class="w-headline--two-faded">
-          Latest stories
-        </h2>
-        <p>
-          See our latest news, updates, and stories for developers.
-        </p>
-      </header>
-    </div>
-    <div class="w-grid w-pb--std">
-      <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-        {% for post in collections.recentBlogPosts %}
-          {% PostCard post %}
-        {% endfor %}
-      </div>
-    </div>
-    <div class="w-layout-container w-pt--non w-pb--xl">
-      <div class="w-text--center">
-        <a class="w-button" href="/blog">
-          See all articles
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <section>
-    <div class="w-layout-container w-pb--non">
-      <header class="w-text--center">
-        <h2 class="w-headline--two-faded">
-          Explore topics
-        </h2>
-        <p>
-          Learn more about a topic, and practice your skills with a hands-on
-          codelab.
-        </p>
-      </header>
-    </div>
-    <div class="w-grid w-pb--std">
-      <div class="w-grid__columns w-grid__columns--gapless w-grid__columns--three" role="list">
-        {% for path in home.paths %}
-          {% PathCard path, lang %}
-        {% endfor %}
-      </div>
-    </div>
-    <div class="w-layout-container w-pt--non w-pb--xl">
-      <div class="w-text--center">
-        <a
-          class="w-button gc-analytics-event"
-          data-category="web.dev"
-          data-label="home, all paths"
-          data-action="click"
-          href="/learn"
-        >
-          See all topics
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <hr>
-
-  <section class="w-layout-container w-text--center">
-    <h2 class="w-headline--two-faded">
-      Save your progress
-    </h2>
-    <p>
-      See how your website performs over time, and keep track as you learn on
-      your own schedule.
-    </p>
-    <div>
-      <a
-        class="w-button w-button--primary gc-analytics-event"
-        data-category="web.dev"
-        data-label="home, create profile"
-        data-action="click"
-        href="/measure"
-      >
-        Test my site
-      </a>
-    </div>
-  </section>
-</div>
diff --git a/src/site/content/pl/lang.js b/src/site/content/pl/lang.js
new file mode 100644
index 00000000000..d6ce4e560a6
--- /dev/null
+++ b/src/site/content/pl/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'pl',
+  locale: 'pl_PL',
+};
diff --git a/src/site/content/pl/learn-core-web-vitals/index.md b/src/site/content/pl/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/pl/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/pl/learn/index.md b/src/site/content/pl/learn/index.md
new file mode 100644
index 00000000000..8897fa20c2a
--- /dev/null
+++ b/src/site/content/pl/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: Uczyć się
+---
diff --git a/src/site/content/pl/learn/learn.11tydata.js b/src/site/content/pl/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/pl/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/pl/media/index.md b/src/site/content/pl/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/pl/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/pl/metrics/index.md b/src/site/content/pl/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/pl/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/pl/mini-apps/index.md b/src/site/content/pl/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/pl/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/pl/offline.md b/src/site/content/pl/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/pl/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/pl/payments/index.md b/src/site/content/pl/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/pl/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/pl/pl.11tydata.js b/src/site/content/pl/pl.11tydata.js
index 08232005f26..46f40a871ba 100644
--- a/src/site/content/pl/pl.11tydata.js
+++ b/src/site/content/pl/pl.11tydata.js
@@ -1,3 +1,7 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
 // =============================================================================
 // HOME OVERVIEW
 //
@@ -7,13 +11,22 @@
 // =============================================================================
 
 module.exports = function () {
-  const lang = 'pl';
-  const translation = 'none'; // Default translation status.
-  const locale = 'pl_PL';
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
 
   return {
-    lang,
-    locale,
-    translation,
+    lang: lang.lang,
+    locale: lang.locale,
+    translated: 'none',
+    home: {
+      paths,
+    },
   };
 };
diff --git a/src/site/content/pl/progressive-web-apps/index.md b/src/site/content/pl/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/pl/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/pl/react/index.md b/src/site/content/pl/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/pl/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/pl/reliable/index.md b/src/site/content/pl/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/pl/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/pl/secure/index.md b/src/site/content/pl/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/pl/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/pt/404.md b/src/site/content/pt/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/pt/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/pt/accessible/accessible-tap-targets/index.md b/src/site/content/pt/accessible/accessible-tap-targets/index.md
new file mode 100644
index 00000000000..95e1e297c4e
--- /dev/null
+++ b/src/site/content/pt/accessible/accessible-tap-targets/index.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Pontos de toque acessíveis
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: |2-
+
+  É importante que os elementos interativos tenham espaço suficiente ao seu redor, quando usados em um dispositivo móvel ou em touchscreen. Isso ajudará a todos, mas especialmente aqueles com deficiência motora.
+tags:
+  - accessibility
+---
+
+Quando seu design é exibido em um dispositivo móvel, você deve garantir que os elementos interativos, como botões ou links, sejam grandes o bastante e tenham espaço suficiente ao redor deles, para torná-los fáceis de pressionar sem se sobrepor acidentalmente a outros elementos. Isso beneficia todos os usuários, mas é especialmente útil para qualquer pessoa com deficiência motora.
+
+O tamanho mínimo recomendado do alvo de toque é de cerca de 48 pixels independentes de dispositivo em um site com uma janela de visualização móvel devidamente configurada. Por exemplo, embora um ícone possa ter apenas uma largura e altura de 24 px, você pode usar preenchimento adicional para aumentar o tamanho do ponto de toque para 48 px. A área de 48x48 pixels corresponde a cerca de 9 mm, que é aproximadamente o tamanho da área da almofada do dedo de uma pessoa.
+
+Na demonstração, adicionei preenchimento a todos os links para garantir que eles atendam ao tamanho mínimo.
+
+{% Glitch {id: 'tap-targets', path: 'index.html'}%}
+
+Os alvos de toque também devem ter um espaçamento de cerca de 8 pixels, tanto horizontal quanto verticalmente, para que o dedo do usuário, ao pressionar um alvo, não toque inadvertidamente em outro alvo.
+
+## Testando seus alvos de toque
+
+Se seu destino for texto e você tiver usado valores relativos como `em` ou `rem` para dimensionar o texto e qualquer preenchimento, você pode usar DevTools para verificar se o valor calculado dessa área é grande o suficiente. No exemplo abaixo, estou usando `em` para meu texto e preenchimento.
+
+{% Glitch {id: 'tap-targets-2', path: 'style.css'}%}
+
+Inspecione o `a` do link e, no Chrome DevTools, mude para o [painel Computado,](https://developer.chrome.com/docs/devtools/css/overrides/#computed) onde você pode inspecionar as várias partes da caixa e ver para qual tamanho de pixel elas resolvem. No Firefox DevTools existe um painel de layout. Nesse painel você obtém o tamanho real do elemento inspecionado.
+
+<figure style="max-width: 500px">{% Img src="image/admin/vmFzREveRttHVDfLqqCx.jpg", alt="O painel de layout no Firefox DevTools mostrando o tamanho de um elemento", width="800", height="565" %}</figure>
+
+## Usando consultas de mídia para detectar o uso da tela sensível ao toque
+
+Um dos recursos de mídia que agora podemos testar com consultas de mídia é se a entrada principal do usuário é uma tela sensível ao toque. O recurso de `pointer` `fine` ou `coarse`. Um apontador fino será alguém usando um mouse ou trackpad, mesmo se esse mouse estiver conectado via Bluetooth a um telefone. Um `coarse` indica uma tela sensível ao toque, que pode ser um dispositivo móvel, mas também pode ser uma tela de laptop ou tablet grande.
+
+Se você estiver ajustando seu CSS em uma consulta de mídia para aumentar o alvo de toque, o teste de um ponteiro grosso permite aumentar os alvos de toque para todos os usuários de touchscreen. Isso fornece uma área de toque maior, seja o dispositivo um telefone ou um dispositivo maior, enquanto o teste de largura fornece apenas usuários móveis.
+
+```css
+.container a {
+  padding: .2em;
+}
+
+@media (pointer: coarse) {
+  .container a {
+    padding: .8em;
+  }
+}
+```
+
+Você pode descobrir mais sobre os recursos de mídia de interação, como ponteiro, no artigo [Noções básicas sobre design da web responsivo.](/responsive-web-design-basics/)
diff --git a/src/site/content/pt/accessible/color-and-contrast-accessibility/index.md b/src/site/content/pt/accessible/color-and-contrast-accessibility/index.md
new file mode 100644
index 00000000000..edf865cf40d
--- /dev/null
+++ b/src/site/content/pt/accessible/color-and-contrast-accessibility/index.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: Acessibilidade de cor e contraste
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: |2-
+
+  Se você tiver uma boa visão, é fácil presumir que todos percebem as cores ou a legibilidade do texto da mesma forma que você, mas é claro que não é o caso.
+tags:
+  - accessibility
+---
+
+Se você tiver uma boa visão, é fácil presumir que todos percebem as cores ou a legibilidade do texto da mesma forma que você, mas é claro que não é o caso.
+
+Como você pode imaginar, algumas combinações de cores fáceis de ler para algumas pessoas são difíceis ou impossíveis para outras. Isso geralmente se resume ao contraste de cores, a relação entre a luminância das cores do primeiro plano e do plano de fundo. Quando as cores são semelhantes, a taxa de contraste é baixa. Caso contrário, a relação de contraste é alta.
+
+As [diretrizes do WebAIM](https://webaim.org/standards/wcag/) recomendam uma taxa de contraste AA (mínima) de 4,5:1 para todo o texto. Uma exceção é feita para texto muito grande (120-150% maior do que o texto do corpo padrão), para o qual a proporção pode cair para 3:1. Observe a diferença nas taxas de contraste mostradas abaixo.
+
+<figure>{% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="Uma imagem mostrando as diferentes taxas de contraste", width="800", height="328" %}</figure>
+
+A relação de contraste de 4,5:1 foi escolhida para o nível AA porque compensa a perda de sensibilidade de contraste normalmente experimentada por usuários com perda de visão equivalente a aproximadamente 20/40 de visão. A relação 20/40 é geralmente relatada como acuidade visual típica de pessoas por volta dos 80 anos. Para usuários com deficiência visual ou deficiência de cor, podemos aumentar o contraste até 7:1 para o texto do corpo.
+
+Você pode usar a auditoria de acessibilidade no Lighthouse para verificar o contraste de cor. Abra DevTools, clique em Auditorias e selecione Acessibilidade para executar o relatório.
+
+<figure>{% Img src="image/admin/vSFzNOurQO6z2xV6qWuW.png", alt="Uma captura de tela da saída de uma auditoria de contraste de cor.", width="800", height="218" %}</figure>
+
+O Chrome também inclui um recurso experimental para ajudá-lo a [detectar todos os textos de baixo contraste de sua página](https://developers.google.com/web/updates/2020/10/devtools#css-overview). Você também pode usar a [sugestão de cor acessível](https://developers.google.com/web/updates/2020/08/devtools#accessible-color) para corrigir o texto de baixo contraste.
+
+<figure>{% Img src="image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt = "Uma captura de tela da saída do recurso experimental de texto de baixo contraste do Chrome.", width="800", height="521", class="w -screenshot" %}</figure>
+
+Para um relatório mais completo, instale o [Accessibility Insights Extension](https://accessibilityinsights.io/). Uma das verificações no relatório Fastpass é o contraste de cores. Você receberá um relatório detalhado de todos os elementos com falha.
+
+<figure>{% Img src="image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt="O relatório em Acessibilidade Insights", width="800", height="473" %}</figure>
+
+## Algoritmo de contraste perceptual avançado (APCA)
+
+O [Advanced Perceptual Contrast Algorithm (APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) é uma nova maneira de calcular o contraste com base em pesquisas modernas sobre percepção de cores.
+
+Em comparação com as [diretrizes AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced), a APCA é mais dependente do contexto.
+
+O contraste é calculado com base nos seguintes recursos:
+
+- Propriedades espaciais (peso da fonte e tamanho do texto)
+- Cor do texto (diferença de claridade percebida entre o texto e o fundo)
+- Contexto (luz ambiente, ambiente e finalidade do texto)
+
+O Chrome inclui um [recurso experimental para substituir as diretrizes de relação de contraste AA/AAA por APCA](https://developers.google.com/web/updates/2021/01/devtools#apca).
+
+<figure>{% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="Uma captura de tela da saída do recurso APCA no Chrome.", width="800", height="543" %}</figure>
+
+## Não transmita informações apenas com cores
+
+Existem cerca de 320 milhões de pessoas em todo o mundo com deficiência visual em cores. Cerca de 1 em 12 homens e 1 em 200 mulheres têm alguma forma de "daltonismo". Isso significa que cerca de 1/20, ou 5%, dos seus usuários não experimentarão o seu site da maneira desejada. Quando dependemos da cor para transmitir informações, elevamos esse número a níveis inaceitáveis.
+
+{% Aside %} Observação: o termo "daltonismo" costuma ser usado para descrever uma condição visual em que uma pessoa tem dificuldade em distinguir as cores, mas na verdade muito poucas pessoas são realmente daltônicas. A maioria das pessoas com deficiências de cor pode ver algumas ou a maioria das cores, mas tem dificuldade em diferenciar certas cores, como vermelhos e verdes (mais comuns), marrons e laranjas e azuis e roxos. {% endAside %}
+
+Por exemplo, em um formulário de entrada, um número de telefone pode ser sublinhado em vermelho para mostrar que é inválido. Mas para um usuário com deficiência de cor ou leitor de tela, essa informação não é transmitida bem, se é que é transmitida. Portanto, você deve sempre tentar fornecer vários caminhos para o usuário acessar informações críticas.
+
+<figure style="width: 200px">{% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="Uma imagem de um formulário de entrada com um número de telefone incorreto destacado apenas com a cor vermelha.", width="293", height="323" %}</figure>
+
+A [lista de verificação do WebAIM afirma na seção 1.4.1](https://webaim.org/standards/wcag/checklist#sc1.4.1) que "a cor não deve ser usada como o único método de transmissão de conteúdo ou distinção de elementos visuais." Além disso, destaca que "a cor por si só não deve ser usada para distinguir os links do texto ao redor", a menos que eles atendam a certos requisitos de contraste. Em vez disso, a lista de verificação recomenda adicionar um indicador adicional, como um sublinhado (usando a propriedade CSS `text-decoration`) para indicar quando o link está ativo.
+
+Uma maneira fácil de corrigir o exemplo anterior é adicionar uma mensagem adicional ao campo, anunciando que é inválido e por quê.
+
+<figure style="width: 200px">{% Img src="image/admin/FLQPcG16akNRoElx3pnz.png", alt="O mesmo formulário de entrada do último exemplo, desta vez com um rótulo de texto indicando o problema com o campo.", width="292", height= "343" %}</figure>
+
+Ao criar um aplicativo, mantenha esse tipo de coisa em mente e preste atenção nas áreas em que você pode depender demais da cor para transmitir informações importantes.
+
+Se você está curioso sobre a aparência do seu site para diferentes pessoas, ou se você depende muito do uso de cores em sua IU, você pode usar DevTools para simular várias formas de deficiência visual, incluindo diferentes tipos de daltonismo. O Chrome inclui um [recurso de emular deficiências de visão](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies). Para acessá-lo, abra o DevTools e a **guia Rendering** no Drawer. Você pode emular as seguintes deficiências de cores.
+
+- Protanopia: incapacidade de perceber qualquer luz vermelha.
+- Deuteranopia: a incapacidade de perceber qualquer luz verde.
+- Tritanopia: a incapacidade de perceber qualquer luz azul.
+- Achromatopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente raro).
+
+<figure>{% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="Emular a visão de uma pessoa com acromatopsia mostra nossa página em escala de cinza.", width="800", height="393", class="w -screenshot - preenchido" %}</figure>
+
+## Modo de alto contraste
+
+O modo de alto contraste permite ao usuário inverter as cores do primeiro plano e do plano de fundo, o que geralmente ajuda o texto a se destacar melhor. Para alguém com deficiência visual, o modo de alto contraste pode tornar muito mais fácil navegar pelo conteúdo da página. Existem algumas maneiras de obter uma configuração de alto contraste em sua máquina.
+
+Sistemas operacionais como Mac OSX e Windows oferecem modos de alto contraste que podem ser ativados para tudo no nível do sistema.
+
+Um exercício útil é ativar as configurações de alto contraste e verificar se toda a IU em seu aplicativo ainda está visível e utilizável.
+
+Por exemplo, uma barra de navegação pode usar uma cor de fundo sutil para indicar qual página está selecionada no momento. Se você vê-lo em uma extensão de alto contraste, essa sutileza desaparece completamente, e com ela vai a compreensão do leitor de qual página está ativa.
+
+<figure style="width: 500px">{% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="Captura de tela de uma barra de navegação em modo de alto contraste em que a guia ativa é difícil de ler", width="640", height="57" %}</figure>
+
+Da mesma forma, se você considerar o exemplo da lição anterior, o sublinhado vermelho no campo de número de telefone inválido pode ser exibido em uma cor azul esverdeada difícil de distinguir.
+
+<figure>{% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="Captura de tela do formulário de endereço usado anteriormente, desta vez em modo de alto contraste. A mudança de cor do elemento inválido é difícil de ler.", width="700", height="328" %}</figure>
+
+Se você estiver atendendo às taxas de contraste abordadas anteriormente, não terá problemas com o suporte ao modo de alto contraste. Mas, para maior tranquilidade, considere instalar a [extensão de alto contraste do Chrome](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph) e dar uma olhada em sua página apenas para verificar se tudo funciona e está como esperado.
diff --git a/src/site/content/pt/accessible/color-and-contrast-accessibility/self-assessment.assess.yml b/src/site/content/pt/accessible/color-and-contrast-accessibility/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/pt/accessible/color-and-contrast-accessibility/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/pt/accessible/control-focus-with-tabindex/index.md b/src/site/content/pt/accessible/control-focus-with-tabindex/index.md
new file mode 100644
index 00000000000..d451a6dfa2b
--- /dev/null
+++ b/src/site/content/pt/accessible/control-focus-with-tabindex/index.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: Controle o foco com tabindex
+authors:
+  - robdodson
+date: 2018-11-18
+description: Elementos HTML padrão como <button> ou <input> têm acessibilidade de teclado integrada gratuitamente. Se você estiver construindo componentes interativos personalizados, use tabindex para garantir que eles sejam acessíveis pelo teclado.
+---
+
+Os elementos HTML padrão, como `<button>` ou `<input>` possuem acessibilidade de teclado integrada gratuitamente. No entanto, se você estiver construindo *componentes interativos personalizados*, use o `tabindex` para garantir que eles sejam acessíveis pelo teclado.
+
+{% Aside %} Sempre que possível, use um elemento HTML integrado em vez de construir sua própria versão personalizada. `<button>`. Por exemplo, é muito fácil de estilizar e ele já tem suporte completo para teclado. Isso evitará que você precise gerenciar `tabindex` ou adicionar semântica com ARIA. {% endAside %}
+
+## Verifique se seus controles são acessíveis pelo teclado
+
+Uma ferramenta como o Lighthouse é ótima para detectar certos problemas de acessibilidade, mas algumas coisas só podem ser testadas por um ser humano.
+
+Tente pressionar a `Tab` para navegar pelo seu site. Você consegue acessar todos os controles interativos da página? Caso contrário, pode ser necessário usar [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex) para melhorar a focalização desses controles.
+
+{% Aside 'warning' %} Se você não vir um indicador de foco, ele pode estar oculto pelo seu CSS. Verifique se há estilos que mencionam `:focus { outline: none; }`. Você pode aprender como consertar isso em nosso guia sobre o [foco do estilo](/style-focus). {% endAside %}
+
+## Insira um elemento na ordem das guias
+
+Insira um elemento na ordem natural das guias usando `tabindex="0"` . Por exemplo:
+
+```html
+<div tabindex="0">Focus me with the TAB key</div>
+```
+
+Para focar um elemento, pressione a `Tab` ou chame o método `focus()`
+
+{% Glitch { id: 'tabindex-zero', path: 'index.html', height: 346 } %}
+
+## Remova um elemento da ordem de tabulação
+
+Remova um elemento usando `tabindex="-1"` . Por exemplo:
+
+```html
+<button tabindex="-1">Você não consegue me alcançar com a tecla TAB!</button>
+```
+
+Isso remove um elemento da ordem natural de tabulação, mas o elemento ainda pode ser focalizado chamando seu método `focus()`
+
+{% Glitch { id: 'tabindex-negative-one', path: 'index.html', height: 346 } %}
+
+Observe que aplicar `tabindex="-1"` a um elemento não afeta os filhos dele; se eles estiverem na ordem das guias naturalmente ou por causa de um `tabindex`, eles permanecerão na ordem das guias. Para remover um elemento e todos os seus filhos da ordem de tabulação, considere o uso o [polyfill `inert` WICG](https://github.com/WICG/inert). O polyfill emula o comportamento de um `inert` proposto, o que evita que os elementos sejam selecionados ou lidos por tecnologias assistivas.
+
+{% Aside 'caution' %} O `inert` é experimental e pode não funcionar como esperado em todos os casos. Teste cuidadosamente antes de usar na produção. {% endAside %}
+
+## Evite `tabindex > 0`
+
+Qualquer `tabindex` maior que 0 salta o elemento para a frente da ordem natural das guias. Se houver vários elementos com um `tabindex` de tabulação maior que 0, a ordem das guias começa a partir do valor mais baixo maior que zero e segue seu caminho para cima.
+
+Usar um `tabindex` maior que 0 é considerado um **antipadrão** porque os leitores de tela navegam na página na ordem do DOM, não na ordem das guias. Se você precisar que um elemento venha antes da ordem de tabulação, ele deve ser movido para um ponto anterior no DOM.
+
+O Lighthouse facilita a identificação de elementos com `tabindex` &gt; 0. Execute a Auditoria de Acessibilidade (Lighthouse &gt; Opções &gt; Acessibilidade) e procure os resultados da auditoria "Nenhum elemento tem um valor [tabindex] maior que 0".
+
+## Crie componentes acessíveis com "roving `tabindex`"
+
+Se você estiver construindo um componente complexo, pode ser necessário adicionar suporte de teclado adicional além do foco. Considere o elemento de `select` É focalizável e você pode usar as teclas de seta para expor funcionalidades adicionais (as opções selecionáveis).
+
+Para implementar uma funcionalidade semelhante em seus próprios componentes, use uma técnica conhecida como "`tabindex`". A movimentação do tabindex funciona definindo `tabindex` como -1 para todos os filhos, exceto o atualmente ativo. O componente então usa um ouvinte de evento de teclado para determinar qual tecla o usuário pressionou.
+
+Quando isso acontece, o componente define o `tabindex` do filho focado anteriormente como -1, define o `tabindex` do filho a ser focado como 0 e chama o `focus()` nele.
+
+**Antes**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Desfazer</div>
+  <button tabindex="0">Refazer</div>
+  <button tabindex="-1">Cortar</div>
+</div>
+```
+
+**Depois**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Desfazer</div>
+  <button tabindex="-1">Refazer</div>
+  <button tabindex="0">Cortar</div>
+</div>
+```
+
+{% Glitch { id: 'roving-tabindex', path: 'index.html', height: 346 } %}
+
+{% Aside %} Tem a curiosidade de saber para que servem esses atributos `role=""`? Eles permitem que você altere a semântica de um elemento para que seja anunciado corretamente por um leitor de tela. Você pode aprender mais sobre eles em nosso guia [noções básicas do leitor de tela](/semantics-and-screen-readers). {% endAside %}
+
+{% Assessment 'self-assessment' %}
+
+## Receitas de acesso ao teclado
+
+Se você não tiver certeza de qual nível de suporte de teclado seus componentes personalizados podem precisar, consulte [ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/) . Este guia prático lista padrões comuns de IU e identifica para quais teclas seus componentes devem ter suporte.
diff --git a/src/site/content/pt/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/pt/accessible/control-focus-with-tabindex/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/pt/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/pt/accessible/headings-and-landmarks/index.md b/src/site/content/pt/accessible/headings-and-landmarks/index.md
new file mode 100644
index 00000000000..84f4e22c8a7
--- /dev/null
+++ b/src/site/content/pt/accessible/headings-and-landmarks/index.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Títulos e pontos de referência
+authors:
+  - robdodson
+date: 2018-11-18
+description: |2-
+  Usando os elementos corretos para títulos e pontos de referência, você pode
+  melhorar expressivamente a experiência de navegação para usuários de tecnologia assistiva.
+---
+
+{% include 'content/why-headings.njk' %}
+
+## Use títulos para delinear a página
+
+Use os `h1` - `h6` para criar um esboço *estrutural* para sua página. O objetivo é criar um esqueleto ou estrutura da página de forma que qualquer pessoa que navegue pelos títulos possa formar uma imagem mental.
+
+Uma prática comum é usar um único `h1` para o título principal ou logotipo em uma página, `h2` s para designar as seções principais e `h3` 's nas subseções de apoio:
+
+```html
+<h1>Company name</h1>
+<section>
+  <h2>Section Heading</h2>
+  …
+  <h3>Sub-section Heading</h3>
+</section>
+```
+
+## Não ignore níveis de títulos
+
+Os desenvolvedores costumam ignorar níveis de título para usar os estilos padrão do navegador que correspondem ao seu design. Isso é considerado um anti-padrão porque quebra o modelo de contorno.
+
+Em vez de depender do tamanho de fonte padrão do navegador para títulos, use seu próprio CSS e não pule níveis.
+
+Por exemplo, este site tem uma seção chamada "NAS NOTÍCIAS", seguida por duas manchetes:
+
+{% Img src="image/admin/CdBjBuUo2yVVHWVFnQzx.png", alt="Um site de notícias com título, imagem principal e subseções.", width="800", height="414" %}
+
+O título da seção, "NAS NOTÍCIAS", pode ser `h2`, e as manchetes de apoio podem ser `h3`.
+
+Como o `font-size` "NA NOTÍCIA" é *menor* do que o título, pode ser tentador transformar o título da primeira história em `h2` e fazer "NAS NOTÍCIAS" em `h3`. Embora isso possa corresponder ao estilo padrão do navegador, quebraria o contorno transmitido a um usuário de leitor de tela!
+
+{% Aside %} Embora possa parecer contra-intuitivo, não importa se *visualmente* `h3` 's e `h4` 's são maiores do que seus equivalentes `h2` ou `h1` O que importa é o contorno transmitido pelos elementos e a ordenação dos elementos. {% endAside %}
+
+Você pode usar o Lighthouse para verificar se sua página pula algum nível de título. Execute a auditoria de acessibilidade (**Lighthouse &gt; Opções &gt; Acessibilidade**) e procure os resultados da auditoria de **títulos não ignore níveis**.
+
+## Use pontos de referência para auxiliar a navegação
+
+Os elementos HTML5, como `main`, `nav` e `aside` agem como **pontos de referência** ou regiões especiais na página para as quais um leitor de tela pode ignorar.
+
+Use tags de pontos de referência para definir as seções principais de sua página, em vez de depender de `div`s. Tenha cuidado para não exagerar, pois ter *muitos* pontos de referência pode ser opressor. Por exemplo, concentre-se em apenas um `main`, em vez de 3 ou 4.
+
+A Lighthouse recomenda auditar manualmente seu site para verificar se "os elementos de referência HTML5 são usados para melhorar a navegação". Você pode usar esta [lista de elementos de referência](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html) para verificar sua página.
+
+## Ignore o conteúdo repetitivo com links para pular
+
+Muitos sites contêm navegação repetitiva em seus cabeçalhos, o que pode ser irritante para navegar com tecnologia de assistência. Use um **link** para ignorar para permitir que os usuários ignorem esse conteúdo.
+
+Um link de pular é uma âncora fora da tela que é sempre o primeiro item focalizável no DOM. Normalmente, ele contém um link in-page para o conteúdo principal da página. Por ser o primeiro elemento no DOM, basta uma única ação da tecnologia assistiva para focalizá-lo e contornar a navegação repetitiva.
+
+```html
+<!-- index.html -->
+<a class="skip-link" href="#main">Skip to main</a>
+…
+<main id="main">
+  [Main content]
+</main>
+```
+
+```css
+/* style.css */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000000;
+  color: white;
+  padding: 8px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+{% Aside 'codelab' %} [Exemplo de pular link ao vivo.](https://skip-link.glitch.me/) {% endAside %}
+
+Muitos sites populares, como [GitHub](https://github.com/), [The NY Times](https://www.nytimes.com/) e [Wikipédia,](https://wikipedia.org/) contêm links para ignorar. Experimente visitá-los e pressionar a `TAB` teclado algumas vezes.
+
+O Lighthouse pode ajudá-lo a verificar se sua página contém um link para ignorar. Execute a auditoria de acessibilidade novamente e procure os resultados da auditoria **A página contém um título, link para ignorar ou região de referência**.
+
+{% Aside %} Tecnicamente, este teste também será aprovado se o seu site contiver qualquer `h1` - `h6` ou qualquer um dos elementos de referência HTML5. Mas embora o teste seja vago em seus requisitos, ainda é bom passá-lo, se você puder! {% endAside %}
diff --git a/src/site/content/pt/accessible/index.md b/src/site/content/pt/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/pt/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/pt/accessible/labels-and-text-alternatives/index.md b/src/site/content/pt/accessible/labels-and-text-alternatives/index.md
new file mode 100644
index 00000000000..a84e7e1777c
--- /dev/null
+++ b/src/site/content/pt/accessible/labels-and-text-alternatives/index.md
@@ -0,0 +1,228 @@
+---
+layout: post
+title: Rótulos e alternativas de texto
+authors:
+  - robdodson
+date: 2018-11-18
+description: |2-
+  Para que um leitor de tela apresente uma IU falada ao usuário,
+  os elementos devem ter rótulos adequados ou alternativas de texto. Um rótulo ou texto
+  alternativa proporciona a um elemento seu nome acessível, uma das propriedades-chave
+  para expressar a semântica do elemento na árvore de acessibilidade.
+---
+
+Para que um leitor de tela apresente uma IU falada ao usuário, os elementos significativos devem ter rótulos adequados ou alternativas de texto. Um rótulo ou texto alternativo fornece a um elemento seu **nome** acessível, uma das principais propriedades para [expressar a semântica do elemento na árvore de acessibilidade](/semantics-and-screen-readers/#semantic-properties-and-the-accessibility-tree).
+
+Quando o nome de um elemento é combinado com a **função** do elemento, ele fornece o contexto do usuário para que ele possa entender com qual tipo de elemento está interagindo e como é representado na página. Se um nome não estiver presente, um leitor de tela apenas anunciará a função do elemento. Imagine tentar navegar em uma página e ouvir "botão", "caixa de seleção", "imagem" sem qualquer contexto adicional. É por isso que a rotulagem e as alternativas de texto são cruciais para uma experiência boa e acessível.
+
+## Inspecionar o nome de um elemento
+
+É fácil verificar o nome acessível de um elemento usando o Chrome DevTools:
+
+1. Clique com o botão direito em um elemento e escolha **Inspecionar**. Isso abre o painel DevTools Elements.
+2. No painel Elementos, procure o painel **Acessibilidade.** Ele pode estar oculto por trás de um símbolo `»`.
+3. No menu suspenso **Propriedades computadas**, procure a propriedade **Nome**.
+
+<figure>{% Img src="image/admin/38c68DmamTCqt2LFxTmu.png", alt="", width="800", height="471" %} <figcaption> Painel de acessibilidade do DevTools mostrando o nome calculado para um botão.</figcaption></figure>
+
+{% Aside %} Para saber mais, consulte a [Referência de acessibilidade](https://developer.chrome.com/docs/devtools/accessibility/reference/) do DevTools. {% endAside %}
+
+Quer você esteja olhando para um `img` com `alt` ou uma `input` com um `label`, todos esses cenários resultam no mesmo resultado: dar a um elemento seu nome acessível.
+
+## Verificar se faltam nomes
+
+Há diferentes maneiras de adicionar um nome acessível a um elemento, dependendo de seu tipo. A tabela a seguir lista os tipos de elemento mais comuns que precisam de nomes e links acessíveis para explicações sobre como adicioná-los.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Tipo de elemento</th>
+        <th>Como adicionar um nome</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Documento HTML</td>
+        <td><a href="#label-documents-and-frames">Rotular documentos e frames</a></td>
+      </tr>
+      <tr>
+        <td>Elementos <code>&lt;frame&gt;</code> ou <code>&lt;iframe&gt;</code>
+</td>
+        <td><a href="#label-documents-and-frames">Rotular documentos e frames</a></td>
+      </tr>
+      <tr>
+        <td>Elementos de imagem</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir alternativas de texto para imagens e objetos</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;input type="image"&gt;</code> elementos</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir alternativas de texto para imagens e objetos</a></td>
+      </tr>
+      <tr>
+        <td>elementos <code>&lt;object&gt;</code>
+</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">Incluir alternativas de texto para imagens e objetos</a></td>
+      </tr>
+      <tr>
+        <td>Botões</td>
+        <td><a href="#label-buttons-and-links">Botões e links de rótulos</a></td>
+      </tr>
+      <tr>
+        <td>Links</td>
+        <td><a href="#label-buttons-and-links">Botões e links de rótulos</a></td>
+      </tr>
+      <tr>
+        <td>Elementos de formulário</td>
+        <td><a href="#label-form-elements">Rotular os elementos do formulário</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Rotular documentos e frames
+
+Cada página deve ter um [`title`](https://developer.mozilla.org/docs/Web/HTML/Element/title) que explica resumidamente do que trata a página. O `title` dá à página seu nome acessível. Quando um leitor de tela entra na página, este é o primeiro texto anunciado.
+
+Por exemplo, a página abaixo tem o título "Mary's Maple Bar Fast-Baking Recipe":
+
+```html/3
+<!doctype html>
+  <html lang="en">
+    <head>
+      <title>Mary's Maple Bar Fast-Baking Recipe</title>
+    </head>
+  <body>
+    …
+  </body>
+</html>
+```
+
+{% Aside %} Para dicas sobre como escrever títulos eficazes, consulte o [guia Escrever títulos descritivos](/write-descriptive-text). {% endAside %}
+
+Da mesma forma, qualquer `frame` ou `iframe` deve ter atributos de `title`:
+
+```html
+<iframe title="An interactive map of San Francisco" src="…"></iframe>
+```
+
+Embora o `iframe` possa conter seu próprio `title` interno, um leitor de tela geralmente para no limite do quadro e anuncia a função do elemento - "frame" - e seu nome acessível, fornecido pelo atributo `title` Isso permite que o usuário decida se deseja entrar no frame ou ignorá-lo.
+
+## Incluir alternativas de texto para imagens e objetos
+
+Um `img` deve sempre ser acompanhado por um [`alt`](https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes) para dar à imagem seu nome acessível. Se a imagem não carregar, o `alt` é usado como um espaço reservado para que os usuários tenham uma ideia do que a imagem estava tentando transmitir.
+
+Escrever um bom `alt` é um pouco uma arte, mas existem algumas diretrizes que você pode seguir:
+
+1. Determine se a imagem fornece conteúdo que, de outra forma, seria difícil de obter com a leitura do texto ao redor.
+2. Em caso afirmativo, transmita o conteúdo da forma mais sucinta possível.
+
+Se a imagem atuar como decoração e não fornecer nenhum conteúdo útil, você pode atribuir a ela um `alt=""` vazio para removê-la da árvore de acessibilidade.
+
+{% Aside %} Saiba mais sobre como escrever um `alt` eficaz, verificando [o guia de texto alternativo do WebAIM](https://webaim.org/techniques/alttext/). {% endAside %}
+
+### Imagens como links e entradas
+
+Uma imagem envolvida em um link deve usar o `alt` da `img` para descrever para onde o usuário será direcionado se clicar no link:
+
+```html
+<a href="https://en.wikipedia.org/wiki/Google">
+  <img alt="Google's wikipedia page" src="google-logo.jpg">
+</a>
+```
+
+Da mesma forma, se um elemento `<input type="image">` for usado para criar um botão de imagem, ele deve conter um `alt` que descreve a ação que ocorre quando o usuário clica no botão:
+
+```html/5
+<form>
+  <label>
+    Username:
+    <input type="text">
+  </label>
+  <input type="image" alt="Sign in" src="./sign-in-button.png">
+</form>
+```
+
+### Objetos integrados
+
+Elementos `<object>`, que normalmente são usados para integrações como Flash, PDFs ou ActiveX, também devem conter texto alternativo. Semelhante às imagens, este texto é exibido se o elemento falhar na renderização. O texto alternativo vai dentro do `object` como texto normal, como "Relatório anual" abaixo:
+
+```html
+<object type="application/pdf" data="/report.pdf">
+Annual report.
+</object>
+```
+
+## Botões e links de rótulos
+
+Botões e links costumam ser cruciais para a experiência de um site, e é importante que ambos tenham nomes acessíveis.
+
+### Botões
+
+Um `button` sempre tenta calcular seu nome acessível usando seu conteúdo de texto. Para botões que não fazem parte de um `form`, escrever uma ação clara como o conteúdo do texto pode ser tudo de que você precisa para criar um bom nome acessível.
+
+```html
+<button>Book Room</button>
+```
+
+{% Img src="image/admin/tcIDzNpCHS9AlfwflQjI.png", alt="Um formulário móvel com um botão 'Reservar sala'.", width="800", height="269" %}
+
+Uma exceção comum a essa regra são os botões de ícone. Um botão de ícone pode usar uma imagem ou uma fonte de ícone para fornecer o conteúdo de texto para o botão. Por exemplo, os botões usados em um editor O que você vê é o que você obtém (WYSIWYG) para formatar texto são normalmente apenas símbolos gráficos:
+
+{% Img src="image/admin/ZmQ77kLPbqd5iFOmn4SU.png", alt="Um botão de ícone de alinhamento à esquerda.", width="800", height="269" %}
+
+Ao trabalhar com botões de ícone, pode ser útil dar a eles um nome acessível explícito usando o atributo `aria-label`. O atributo `aria-label` substitui qualquer conteúdo de texto dentro do botão, permitindo que você descreva claramente a ação para qualquer pessoa que use um leitor de tela.
+
+```html
+<button aria-label="Left align"></button>
+```
+
+### Links
+
+Semelhante aos botões, os links recebem seu nome acessível principalmente de seu conteúdo de texto. Um bom truque ao criar um link é colocar a parte mais significativa do texto no próprio link, em vez de palavras de preenchimento como "Aqui" ou "Leia mais".
+
+{% Compare 'worse', 'Not descriptive enough' %}
+
+```html
+Check out our guide to web performance <a href="/guide">here</a>.
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'Useful content!' %}
+
+```html
+Check out <a href="/guide">our guide to web performance</a>.
+```
+
+{% endCompare %}
+
+Isso é especialmente útil para leitores de tela que oferecem atalhos para listar todos os links na página. Se os links estiverem cheios de textos de preenchimento repetitivos, esses atalhos se tornam muito menos úteis:
+
+<figure>{% Img src="image/admin/IPxS2dwHMyGRvGxGi5n2.jpg", alt="Menu de links de narração preenchida com a palavra 'Aqui'.", width="519", height="469" %} <figcaption>  Exemplo de narração, um leitor de tela para macOS, mostrando o menu navegar por links.</figcaption></figure>
+
+## Rotular os elementos do formulário
+
+Existem duas maneiras de associar um rótulo a um elemento de formulário, como uma caixa de seleção. Qualquer um dos métodos faz com que o texto do rótulo também se torne um alvo de clique para a caixa de seleção, o que também é útil para usuários de mouse ou touchscreen. Para associar um rótulo a um elemento:
+
+- Coloque o elemento de entrada dentro de um elemento de rótulo
+
+```html
+<label>
+  <input type="checkbox">Receive promotional offers?</input>
+</label>
+```
+
+- Ou use o rótulo `for` atributo e consulte o `id`
+
+```html
+<input id="promo" type="checkbox"></input>
+<label for="promo">Receive promotional offers?</label>
+```
+
+Quando a caixa de seleção está marcada corretamente, o leitor de tela pode relatar que o elemento tem uma função de caixa de seleção, está em um estado marcado e é denominado "Receber ofertas promocionais?" como no exemplo do VoiceOver abaixo:
+
+<figure>{% Img src="image/admin/WklT2ymrCmceyrGUNizF.png", alt="Saída de texto de narração mostrando 'Receber ofertas promocionais?'", width="640", height="174" %}<br>{% Assessment 'self-assessment' %}</figure>
+
+{% Assessment 'self-assessment' %}
diff --git a/src/site/content/pt/accessible/labels-and-text-alternatives/self-assessment.assess.yml b/src/site/content/pt/accessible/labels-and-text-alternatives/self-assessment.assess.yml
new file mode 100644
index 00000000000..7a074e4e939
--- /dev/null
+++ b/src/site/content/pt/accessible/labels-and-text-alternatives/self-assessment.assess.yml
@@ -0,0 +1,89 @@
+setLeader: |
+  Check whether sample HTML elements have accessible names
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: "![temp](image/user/temp.svg)"
+    type: think-and-check
+    stem: Does this image have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Give an image an accessible name by adding an `alt` attribute.
+  - stimulus: |
+      ```html
+      <object type="application/pdf" data="/report.pdf" alt="Annual report"></object>
+      ```
+    type: think-and-check
+    stem: Does this object have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give an `<object>` element a name by providing text content.
+          (An `alt` attribute on an object will not be read by assistive technologies.)
+  - stimulus: |
+      This sample renders an icon button:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give a button an accessible name by providing text content,
+          an `aria-label` attribute, or an `aria-labelledby` attribute.
+  - stimulus: |
+      This sample renders an icon button with a tooltip that appears on hover and focus:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+        <span class="tooltip hidden">Open menu</span>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Even if the button's tooltip is visually hidden using CSS,
+          assistive technologies can still read its text content.
+
+          **Caution:** When visually hiding button text,
+          use CSS rather than the `hidden` attribute.
+          The `hidden` attribute removes the element
+          from the accessibility tree.
+  - stimulus: |
+      ```html
+      <label>
+        <input type="checkbox" value="subscribe"></input>
+        Subscribe to the newsletter?
+      </label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. The label is associated with the checkbox
+          because the label is the checkbox's parent.
+          So, assistive technologies treat the label's
+          text content as the input's name.
+  - stimulus: |
+      ```html
+      <input type="checkbox" value="subscribe"></input>
+      <label for="subscribe">Subscribe to the newsletter?</label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **No**. The checkbox's `value` attribute indicates
+          what text will be saved when the form is submitted,
+          but assistive technologies don't read it.
+          To provide an accessible name,
+          add an `id` attribute with the value `subscribe`
+          to associate the checkbox with the label.
diff --git a/src/site/content/pt/angular/index.md b/src/site/content/pt/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/pt/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/pt/angular/route-level-code-splitting-in-angular/index.md b/src/site/content/pt/angular/route-level-code-splitting-in-angular/index.md
new file mode 100644
index 00000000000..ca630497605
--- /dev/null
+++ b/src/site/content/pt/angular/route-level-code-splitting-in-angular/index.md
@@ -0,0 +1,197 @@
+---
+layout: post
+title: Divisão de código de nível de rota no Angular
+subhead: |2
+
+  Melhore o desempenho do seu aplicativo usando a divisão de código no nível da rota!
+hero: image/admin/WVwZbWEEXUfXzVTtAlha.jpg
+date: 2019-06-24
+description: |2
+
+  Aprenda como tornar o pacote de aplicativos inicial menor usando a divisão de código no nível da rota.
+authors:
+  - mgechev
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Esta postagem explica como configurar a [divisão de código](/reduce-javascript-payloads-with-code-splitting/) no nível da rota em um aplicativo Angular, o que pode reduzir o tamanho do pacote JavaScript e melhorar drasticamente o [tempo de interação](/tti/).
+
+*Você pode encontrar os exemplos de código deste artigo no [GitHub](https://github.com/mgechev/code-splitting-web-dev). O exemplo de roteamento ansioso está disponível no [branch adiantado](https://github.com/mgechev/code-splitting-web-dev/tree/eager). O exemplo de divisão de código no nível da rota está no [branch lento](https://github.com/mgechev/code-splitting-web-dev/tree/lazy).*
+
+{% Aside %} Esta publicação pressupõe que você conheça o roteador Angular. Para obter um guia sobre como usá-lo, visite a [documentação oficial](https://angular.io/guide/router) do Angular. {% endAside %}
+
+## Por que a divisão de código é importante
+
+A complexidade cada vez maior dos aplicativos da web levou a um aumento significativo na quantidade de JavaScript enviada aos usuários. Arquivos JavaScript grandes podem atrasar visivelmente a interatividade, portanto, pode ser um recurso caro, especialmente em dispositivos móveis.
+
+A maneira mais eficiente de reduzir os pacotes JavaScript sem sacrificar os recursos de seus aplicativos é introduzir uma divisão de código agressiva.
+
+A **[divisão de código](/reduce-javascript-payloads-with-code-splitting/)** permite dividir o JavaScript de seu aplicativo em vários blocos associados a diferentes rotas ou recursos. Essa abordagem apenas envia aos usuários o JavaScript de que precisam durante o carregamento inicial do aplicativo, mantendo o tempo de carregamento baixo.
+
+{% Aside 'note' %}
+
+Usando a divisão de código, o [Twitter e o Tinder](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) observaram melhorias de até 50% em seu [tempo até ficar interativo](/tti/).
+
+{% endAside %}
+
+## Técnicas de divisão de código
+
+A divisão de código pode ser feita em dois níveis: o **nível** do componente e o **nível** da rota.
+
+- Na divisão de código em nível de componente, você move os componentes para seus próprios fragmentos de JavaScript e os carrega lentamente quando são necessários.
+- Na divisão de código no nível da rota, você encapsula a funcionalidade de cada rota em um bloco separado. Quando os usuários navegam em seu aplicativo, eles buscam os blocos associados às rotas individuais e obtêm a funcionalidade associada quando precisam.
+
+Esta publicação se concentra na configuração da divisão de nível de rota no Angular.
+
+### Aplicativo de amostra
+
+Antes de nos aprofundarmos em como usar a divisão de código de nível de rota no Angular, vamos dar uma olhada em um aplicativo de amostra:
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">{% IFrame { src: 'https://stackblitz.com/github/mgechev/code-splitting-web-dev/tree/eager?embed=1&amp;file=src/app/app.component.ts&amp;view=preview' } %}</div>
+
+Confira a implementação dos módulos do app. Dentro do `AppModule` duas rotas são definidas: a rota padrão associada a `HomeComponent` e uma `nyan` associada a `NyanComponent`:
+
+```javascript
+@NgModule({
+  ...
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: '',
+        component: HomeComponent,
+        pathMatch: 'full'
+      },
+      {
+        path: 'nyan',
+        component: NyanComponent
+      }
+    ])
+  ],
+  ...
+})
+export class AppModule {}
+```
+
+### Divisão de código no nível da rota
+
+Para configurar a divisão de código, a `nyan` adiantada precisa ser refatorada.
+
+A versão 8.1.0 do Angular CLI pode fazer tudo por você com este comando:
+
+```bash
+ng g module nyan --module app --route nyan
+```
+
+Isso irá gerar:
+
+- Um novo módulo de roteamento chamado `NyanModule`
+- Uma rota em `AppModule` chamada `nyan` que irá carregar dinamicamente o `NyanModule`
+- Uma rota padrão no `NyanModule`
+- Um componente chamado `NyanComponent` que será renderizado quando o usuário atingir a rota padrão
+
+Vamos estudar essas etapas manualmente para entender melhor a implementação da divisão de código com o Angular!
+
+Quando o usuário navegar para a `nyan` , o roteador renderizará o `NyanComponent` na saída do roteador.
+
+Para usar a divisão de código no nível da rota em Angular, defina a `loadChildren` da declaração de rota e combine-a com uma importação dinâmica:
+
+```javascript/2
+{
+  path: 'nyan',
+  loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
+}
+```
+
+Existem duas diferenças principais em relação à rota adiantada:
+
+1. Você define `loadChildren` vez de `component` . Ao usar a divisão de código de nível de rota, você precisa apontar para módulos carregados dinamicamente, em vez de componentes.
+2. Em `loadChildren` , assim que a promessa for resolvida, você retorna o `NyanModule` vez de apontar para o `NyanComponent`.
+
+O snippet acima especifica que quando o usuário navega para `nyan`, o Angular deve carregar dinamicamente `nyan.module` do `nyan` e renderizar o componente associado à rota padrão declarada no módulo.
+
+Você pode associar a rota padrão a um componente usando esta declaração:
+
+```javascript
+import { NgModule } from '@angular/core';
+import { NyanComponent } from './nyan.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [NyanComponent],
+  imports: [
+    RouterModule.forChild([{
+      path: '',
+      pathMatch: 'full',
+      component: NyanComponent
+    }])
+  ]
+})
+export class NyanModule {}
+```
+
+Este código renderiza `NyanComponent` quando o usuário navega para `https://example.com/nyan`.
+
+Para verificar se o roteador Angular baixa o `nyan.module` em seu ambiente local:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. Clique **em NYAN** no aplicativo de amostra.
+2. Observe que o `nyan-nyan-module.js` aparece na guia de rede.
+
+{% Img src="image/admin/wT4xLV2OkrZ2b7QaQz8L.png", alt="Carregamento lento de pacotes JavaScript com divisão de código em nível de rota", width="800", height="524" %}
+
+*Encontre este exemplo [no GitHub](https://github.com/mgechev/code-splitting-web-dev/tree/lazy/src) .*
+
+### Mostrar um spinner
+
+Agora, quando o usuário clica no **botão NYAN** , o aplicativo não indica que está carregando o JavaScript em segundo plano. Para dar feedback ao usuário enquanto carrega o script, você provavelmente vai querer adicionar um spinner.
+
+Para fazer isso, comece adicionando marcação para o indicador dentro do elemento `router-outlet` no `app.component.html`:
+
+```html
+<router-outlet>
+  <span class="loader" *ngIf="loading"></span>
+</router-outlet>
+```
+
+Em seguida, adicione uma `AppComponent` para lidar com eventos de roteamento. Esta classe definirá o sinalizador de `loading` `true` quando ouvir o `RouteConfigLoadStart` e definirá o sinalizador como `false` quando ouvir o evento `RouteConfigLoadEnd`.
+
+```javascript
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  loading: boolean;
+  constructor(router: Router) {
+    this.loading = false;
+    router.events.subscribe(
+      (event: RouterEvent): void => {
+        if (event instanceof NavigationStart) {
+          this.loading = true;
+        } else if (event instanceof NavigationEnd) {
+          this.loading = false;
+        }
+      }
+    );
+  }
+}
+```
+
+No exemplo abaixo, introduzimos uma latência artificial de 500 ms para que você possa ver o botão giratório em ação.
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">{% IFrame { src: 'https://stackblitz.com/github/mgechev/code-splitting-web-dev/tree/lazy?embed=1&amp;file=src/app/app.component.ts&amp;view=preview' } %}</div>
+
+{% Aside 'warning' %} A divisão de código pode melhorar significativamente o tempo de carregamento inicial de um aplicativo, mas vem ao custo de desacelerar a navegação subsequente. No [próximo post](/route-preloading-in-angular) sobre pré-carregamento de rota, você verá como contornar este problema! {% endAside %}
+
+## Conclusão
+
+Você pode reduzir o tamanho do pacote de seus aplicativos angulares aplicando a divisão de código no nível da rota:
+
+1. Use o gerador de módulo de carregamento lento de CLI Angular para criar um andaime automático de uma rota carregada dinamicamente.
+2. Adicione um indicador de carregamento quando o usuário navegar para uma rota preguiçosa para mostrar que há uma ação em andamento.
diff --git a/src/site/content/pt/angular/route-preloading-in-angular/index.md b/src/site/content/pt/angular/route-preloading-in-angular/index.md
new file mode 100644
index 00000000000..9712584cbd3
--- /dev/null
+++ b/src/site/content/pt/angular/route-preloading-in-angular/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Estratégias de pré-carregamento de rota no Angular
+subhead: |2
+
+  Pré-carregue as rotas com antecedência para acelerar a navegação dos usuários.
+hero: image/admin/q4b86k6REnNHkpjQnsLK.jpg
+hero_position: bottom
+alt: Bola de cristal de vidro
+date: 2019-07-09
+description: |2
+
+  Aprenda a usar as estratégias de pré-carregamento do Angular para aplicativos mais rápidos.
+authors:
+  - mgechev
+tags:
+  - performance
+feedback:
+  - api
+---
+
+[A divisão de código no nível da rota](/route-level-code-splitting-in-angular) pode ajudar a reduzir o tempo de carregamento inicial de um aplicativo, atrasando o JavaScript associado a rotas que não sejam inicialmente necessárias. Dessa forma, o roteador Angular espera até que um usuário navegue para uma determinada rota antes de acionar uma solicitação de rede para baixar o JavaScript associado.
+
+Embora essa técnica seja ótima para o carregamento inicial da página, ela pode tornar a navegação mais lenta, dependendo da latência da rede e da largura de banda dos usuários. Uma maneira de resolver esse problema é o **pré-carregamento da rota**. Usando o pré-carregamento, quando o usuário está em uma determinada rota, você pode baixar e armazenar em cache o JavaScript associado às rotas que provavelmente serão necessárias em seguida. O roteador Angular fornece essa funcionalidade pronta para uso.
+
+Nesta postagem, você aprenderá como acelerar a navegação ao usar a divisão de código no nível da rota, aproveitando o pré-carregamento do JavaScript no Angular.
+
+## Estratégias de pré-carregamento de rota no Angular
+
+O roteador Angular fornece uma propriedade de configuração chamada `preloadingStrategy`, que define a lógica para pré-carregamento e processamento de módulos Angular carregados lentamente. Abordaremos duas estratégias possíveis:
+
+- `PreloadAllModules`, que pré-carrega todas as rotas com carregamento lento, como o nome indica
+- `QuicklinkStrategy`, que pré-carrega apenas as rotas associadas aos links na página atual.
+
+*O restante desta postagem se refere a um exemplo de aplicativo Angular. Você pode encontrar o código-fonte [no GitHub](https://github.com/mgechev/route-preloading-web-dev).*
+
+### Usando a estratégia `PreloadAllModules`
+
+O aplicativo de amostra tem várias rotas de carregamento lento. Para pré-carregar todos eles usando a estratégia `PreloadAllModules` - que é integrada ao Angular - especifique-a como o valor da `preloadingStrategy` na configuração do roteador:
+
+```js
+import { RouterModule, PreloadAllModules } from '@angular/router';
+// …
+
+RouterModule.forRoot([
+  …
+], {
+  preloadingStrategy: PreloadAllModules
+})
+// …
+```
+
+Agora sirva o aplicativo e observe o painel **Rede** no Chrome DevTools:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+Você deve ver que o roteador baixou `nyan-nyan-module.js` e `about-about-module.js` em segundo plano ao abrir o aplicativo:
+
+<figure data-size="full">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/TVi6LCasiwZI1hxJrBOL.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/e9h6JBVl8TUGMWOSAWyC.mp4"], controls="true", loop="true", muted="true" %} <figcaption> A estratégia PreloadAllModules em ação. </figcaption></figure>
+
+O roteador também registrou as declarações de rota dos módulos para que, quando você navegar para um URL associado a qualquer um dos módulos pré-carregados, a transição seja instantânea.
+
+### Usando a estratégia de pré-carregamento Quicklink
+
+`PreloadAllModules` é útil em muitos casos. Quando você tem dezenas de módulos, no entanto, seu pré-carregamento agressivo pode realmente aumentar o uso da rede. Além disso, como o roteador precisa registrar as rotas em todos os módulos pré-carregados, isso pode causar cálculos intensivos no thread de IU e levar a uma experiência do usuário lenta.
+
+A [biblioteca de link rápido](https://github.com/GoogleChromeLabs/quicklink) oferece uma estratégia melhor para aplicativos maiores. Ele usa a [API IntersectionObserver](/intersectionobserver-v2/) para pré-carregar apenas módulos associados a links que estiverem atualmente visíveis na página.
+
+Você pode adicionar um link rápido para um aplicativo Angular usando o pacote [ngx-quicklink.](https://www.npmjs.com/package/ngx-quicklink) Comece instalando o pacote do npm:
+
+```bash
+npm install --save ngx-quicklink
+```
+
+Assim que estiver disponível em seu projeto, você pode usar `QuicklinkStrategy` especificando o roteador `preloadingStrategy` e importando o `QuicklinkModule` :
+
+```js
+import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
+…
+
+@NgModule({
+  …
+  imports: [
+    …
+    QuicklinkModule,
+    RouterModule.forRoot([…], {
+      preloadingStrategy: QuicklinkStrategy
+    })
+  ],
+  …
+})
+export class AppModule {}
+```
+
+Agora, ao abrir o aplicativo novamente, você notará que o roteador pré-carrega apenas `nyan-nyan-module.js`, pois o botão no centro da página tem um link de roteador para ele. E ao abrir a navegação lateral, você perceberá que o roteador pré-carrega a rota "Sobre":
+
+<figure data-size="full">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/dfZkoiQyNh4fUj4DJjrc.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/SkNp99W1Bv2tsaRgOwoe.mp4"], controls="true", loop="true", muted="true" %} <figcaption> Uma demonstração da estratégia de pré-carregamento quicklink. </figcaption></figure>
+
+### Usando a estratégia de pré-carregamento Quicklink em vários módulos de carregamento lento
+
+O exemplo acima funcionará para um aplicativo básico, mas se o seu aplicativo contiver vários módulos de carregamento lento, você precisará importar o `QuicklinkModule` para um módulo compartilhado, exportá-lo e depois importar o módulo compartilhado para os módulos de carregamento lento.
+
+Primeiro importe o `QuicklinkModule` do `ngx-quicklink` para o seu módulo compartilhado e exporte-o:
+
+```js
+import { QuicklinkModule } from 'ngx-quicklink';
+…
+
+@NgModule({
+  …
+  imports: [
+    QuicklinkModule
+  ],
+  exports: [
+    QuicklinkModule
+  ],
+  …
+})
+export class SharedModule {}
+```
+
+Em seguida, importe seu `SharedModule` para todos os seus módulos carregados lentamente:
+
+```js
+import { SharedModule } from '@app/shared/shared.module';
+…
+
+@NgModule({
+  …
+  imports: [
+      SharedModule
+  ],
+  …
+});
+```
+
+Os `Quicklinks` agora estarão disponíveis em seus módulos carregados lentamente.
+
+## Indo além do pré-carregamento básico
+
+Embora o pré-carregamento seletivo via link rápido possa acelerar significativamente a navegação, você pode tornar sua estratégia de pré-carregamento ainda mais eficiente em rede usando o pré-carregamento preditivo, que é implementado por [Guess.js](https://github.com/guess-js/guess). Ao analisar um relatório do Google Analytics ou outro provedor de análise, Guess.js pode prever a jornada de navegação de um usuário e pré-carregar apenas os blocos de JavaScript que provavelmente serão necessários a seguir.
+
+Você pode aprender como usar Guess.js com Angular [nesta página do site Guess.js](https://guess-js.github.io/docs/angular).
+
+## Conclusão
+
+Para acelerar a navegação ao usar a divisão de código no nível da rota:
+
+1. Escolha a estratégia de pré-carregamento certa, dependendo do tamanho do seu aplicativo:
+    - Aplicativos com poucos módulos podem usar a estratégia `PreloadAllModules`
+    - Aplicativos com muitos módulos devem usar uma estratégia de pré-carregamento customizada, como o quicklink do Angular, ou pré-carregamento preditivo, conforme implementado no Guess.js.
+2. Configure a estratégia de pré-carregamento definindo a `preloadStrategy` do roteador Angular.
diff --git a/src/site/content/pt/animations/index.md b/src/site/content/pt/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/pt/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/pt/blog/accent-color/index.md b/src/site/content/pt/blog/accent-color/index.md
new file mode 100644
index 00000000000..c7163497f7a
--- /dev/null
+++ b/src/site/content/pt/blog/accent-color/index.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: CSS `accent-color`
+subhead: Traga a cor da sua marca para as entradas de formulário HTML integradas com uma linha de código.
+authors:
+  - adamargyle
+  - jarhar
+description: Traga a cor da sua marca para as entradas de formulário HTML integradas com uma linha de código.
+date: 2021-08-11
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WOcuCLCwMr0M2lF17bmm.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/huEpiCoJQ6dAo8rHGsZT.png
+tags:
+  - blog
+  - css
+---
+
+Os elementos de formulário HTML de hoje são [difíceis de personalizar](https://codepen.io/GeoffreyCrofte/pen/BiHzp). Parece que é uma escolha entre poucos ou nenhum estilo personalizado, ou redefinir estilos de entrada e construí-los do zero. Construir do zero acaba sendo muito mais trabalhoso do que o previsto. Também pode levar a estilos esquecidos de estados de elemento ( [indeterminado](https://developer.mozilla.org/docs/Web/CSS/:indeterminate), estou olhando para você) e à perda de recursos de acessibilidade integrados. Recriar totalmente o que o navegador oferece pode ser mais trabalhoso do que você está procurando.
+
+```css
+accent-color: hotpink;
+```
+
+A `accent-color` de [destaque CSS da especificação da interface do usuário CSS](https://www.w3.org/TR/css-ui-4/#widget-accent) está aqui para tingir os elementos com uma linha de CSS, poupando você dos esforços de personalização ao fornecer uma maneira de trazer sua marca para os elementos.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CfSS3F1XUsfCHIB86xeE.png", alt="Uma captura de tela de tema leve de uma demonstração de cores de destaque em que caixa de seleção, botões de opção, um controle deslizante de intervalo e elemento de progresso são todos na cor rosa choque.", width="800", height="548" %} <figcaption> <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demo</a> </figcaption></figure>
+
+O `accent-color` também funciona com o [`color-scheme`](/color-scheme/), permitindo aos autores colorir os elementos claros e escuros. No exemplo a seguir, o usuário tem um tema escuro ativo, a página usa `color-scheme:light dark` e usa a mesma `accent-color:hotpink` para controles rosa choque com tema escuro.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3gxeeZoSLY34tsMxkyt9.png", alt="Uma captura de tela de tema escuro de uma demo accent-color onde caixa de seleção, botões de seleção, um controle deslizante de intervalo e um elemento de progresso estão na cor rosa choque.", width="800", height="548" %} <figcaption> <a href="https://codepen.io/web-dot-dev/pen/PomBZdy">Demo</a> </figcaption></figure>
+
+### Suporte para navegador
+
+No momento da elaboração deste artigo, o Chromium (a partir da versão 93) e o Firefox (a partir da versão 92) suportavam o recurso `accent-color`.
+
+## Elementos suportados
+
+Atualmente, apenas quatro elementos serão tingidos por meio da propriedade `accent-color`: [caixa de seleção](#checkbox), [botão de seleção](#radio), [intervalo](#range) e [progresso](#progress). Cada um pode ser visualizado aqui [https://accent-color.glitch.me](https://accent-color.glitch.me) em esquemas de cores claras e escuras.
+
+{% Aside "warning" %} Se os seguintes elementos de demonstração forem todos da mesma cor, então seu navegador ainda não oferece suporte para `accent-color`. {% endAside %}
+
+### Caixa de seleção
+
+{% Codepen { user: 'web-dot-dev', id: 'dyWjGqZ' } %}
+
+### Botão de seleção
+
+{% Codepen { user: 'web-dot-dev', id: 'dyWjGqZ' } %}
+
+### Intervalo
+
+{% Codepen { user: 'web-dot-dev', id: 'yLbqeRy'}%}
+
+### Progresso
+
+{% Codepen { user: 'web-dot-dev', id: 'dyWjGqZ' } %}
+
+## Garantindo contraste
+
+Para evitar a existência de elementos inacessíveis, os navegadores com `accent-color` precisam determinar uma [cor de contraste compatível](https://webaim.org/articles/contrast/) a ser usada junto com o destaque personalizado. Abaixo está uma captura de tela que demonstra como o Chrome 94 (esquerda) e o Firefox 92 Noturno (direita) diferem em seus algoritmos:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DJhB56n10Eh8O29RsRdE.png", alt="Uma captura de tela do Firefox e Chromium lado a lado, renderizando um espectro completo de caixas de seleção em vários tons e sombras.", width="800", height="832" %}
+
+O mais importante a tirar disso é **confiar no navegador**. Forneça a cor da marca e confie que ela tomará decisões inteligentes para você.
+
+{% Aside %} O navegador não mudará sua cor em um tema escuro. {% endAside %}
+
+## Extra: Mais cores
+
+Você pode estar se perguntando como tingir mais do que esses quatro elementos do formulário? Aqui está uma sandbox mínimo que tinge:
+
+- o anel de foco
+- destaques da seleção de texto
+- [marcadores](/css-marker-pseudo-element/) de lista
+- indicadores de seta (apenas Webkit)
+- miniatura da barra de rolagem (apenas Firefox)
+
+```css
+html {
+  --brand: hotpink;
+  scrollbar-color: hotpink Canvas;
+}
+
+:root { accent-color: var(--brand); }
+:focus-visible { outline-color: var(--brand); }
+::selection { background-color: var(--brand); }
+::marker { color: var(--brand); }
+
+:is(
+  ::-webkit-calendar-picker-indicator,
+  ::-webkit-clear-button,
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button
+) {
+  color: var(--brand);
+}
+```
+
+{% Codepen {user: 'web-dot-dev', id: 'RwVBreJ'}%}
+
+### Futuro potencial
+
+A especificação não limita a aplicação da propriedade `accent-color` aos quatro elementos mostrados neste artigo; mais suporte pode ser adicionado posteriormente. Elementos como a `<option>` selecionada em uma `<select>` podem ser destacados com a `accent-color` destaque.
+
+O que mais você gostaria de colorir na Web? Tuíte marcando [@argyleink](https://twitter.com/argyleink) com seu seletor e ele pode ser adicionado a este artigo!
diff --git a/src/site/content/pt/blog/app-shortcuts/index.md b/src/site/content/pt/blog/app-shortcuts/index.md
new file mode 100644
index 00000000000..b86af7e647c
--- /dev/null
+++ b/src/site/content/pt/blog/app-shortcuts/index.md
@@ -0,0 +1,158 @@
+---
+title: Faça tudo rapidamente com os atalhos de aplicativo
+subhead: Os atalhos de aplicativos fornecem acesso rápido a várias ações comuns que os usuários necessitam com frequência.
+authors:
+  - beaufortfrancois
+  - jungkees
+date: 2020-05-20
+updated: 2020-10-12
+hero: image/admin/1ekafMZjtzcd0G3TLQJ4.jpg
+alt: Uma foto de um telefone Android mostrando um menu de atalhos de aplicativo
+description: Os atalhos de aplicativos fornecem acesso rápido a várias ações comuns que os usuários necessitam com frequência.
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+Para melhorar a produtividade dos usuários e facilitar o reengajamento com as principais tarefas, a plataforma da web agora oferece suporte para atalhos de aplicativos. Eles permitem que os desenvolvedores da web forneçam acesso rápido a várias ações comuns que os usuários precisam com frequência.
+
+Este artigo irá ensiná-lo a definir esses atalhos de aplicativos. Além disso, você aprenderá algumas das melhores práticas associadas.
+
+## Sobre atalhos de aplicativos
+
+Os atalhos de aplicativos ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em seu aplicativo da web. O fácil acesso a essas tarefas de qualquer lugar em que o ícone do aplicativo seja exibido aumentará a produtividade dos usuários e também aumentará seu envolvimento com o aplicativo da web.
+
+O menu de atalhos do aplicativo é invocado clicando com o botão direito no ícone do aplicativo na barra de tarefas (Windows) ou dock (macOS) na área de trabalho do usuário, ou mantendo pressionado o ícone do iniciador do aplicativo no Android.
+
+<figure>{% Img src = "image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt = "Captura de tela de um menu de atalhos de aplicativo aberto no Android", width = "800", height = "420"%}<figcaption> Menu de atalhos do aplicativo aberto no Android</figcaption></figure>
+
+<figure>{% Img src = "image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt = "Captura de tela de um menu de atalhos de aplicativo aberto no Windows", width = "800", height = "420"%}<figcaption> Menu de atalhos do aplicativo aberto no Windows</figcaption></figure>
+
+O menu de atalhos do aplicativo é mostrado apenas para [Progressive Web Apps](/progressive-web-apps/) instalados na área de trabalho ou dispositivo móvel do usuário. Confira [O que é necessário para ser instalável?](/install-criteria/) para aprender sobre os requisitos de instalabilidade.
+
+Cada atalho de aplicativo expressa uma intenção do usuário, cada uma delas associada a um URL dentro do [escopo](/add-manifest/#scope) de seu aplicativo da web. O URL é aberto quando os usuários ativam o atalho do aplicativo. Exemplos de atalhos de aplicativos incluem o seguinte:
+
+- Itens de navegação de nível superior (por exemplo, home, linha do tempo, pedidos recentes)
+- Procurar
+- Tarefas de entrada de dados (por exemplo, redigir um e-mail ou tweet, adicionar um recibo)
+- Atividades (por exemplo, iniciar um bate-papo com os contatos mais populares)
+
+{% Aside %} Muito obrigado ao pessoal do Microsoft Edge e da Intel por projetar e padronizar os atalhos de aplicativos. O Chrome depende de uma comunidade de parceiros trabalhando juntos para levar o projeto Chromium adiante. Nem todo parceiro do Chromium é um Googler, e esses colaboradores merecem um reconhecimento especial! {% endAside %}
+
+## Defina os atalhos do aplicativo no manifesto do aplicativo da web
+
+Os atalhos do aplicativo são definidos opcionalmente no [manifesto do aplicativo](/add-manifest) da web, um arquivo JSON que informa o navegador sobre o seu Progressive Web App e como ele deve se comportar quando instalado na área de trabalho ou dispositivo móvel do usuário. Mais especificamente, eles são declarados no membro da matriz de `shortcuts`. Abaixo está um exemplo de um manifesto de aplicativo da web potencial.
+
+```json
+{
+  "name": "Player FM",
+  "start_url": "https://player.fm?utm_source=homescreen",
+  …
+  "shortcuts": [
+    {
+      "name": "Open Play Later",
+      "short_name": "Play Later",
+      "description": "View the list of podcasts you saved for later",
+      "url": "/play-later?utm_source=homescreen",
+      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "View Subscriptions",
+      "short_name": "Subscriptions",
+      "description": "View the list of podcasts you listen to",
+      "url": "/subscriptions?utm_source=homescreen",
+      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
+    }
+  ]
+}
+```
+
+Cada membro da `shortcuts` é um dicionário que contém pelo menos um `name` e um `url` . Outros membros são opcionais.
+
+### nome
+
+O rótulo legível para o atalho do aplicativo quando exibido para o usuário.
+
+### short_name (opcional)
+
+O rótulo legível por humanos usado onde o espaço é limitado. É recomendável fornecê-lo, embora seja opcional.
+
+### Descrição (opcional)
+
+A finalidade legível para o atalho do aplicativo. Não é usado no momento da redação, mas pode ser exposta à tecnologia assistiva no futuro.
+
+### url
+
+O URL aberto quando um usuário ativa o atalho do aplicativo. Este URL deve existir dentro do escopo do manifesto do aplicativo da web. Se for um URL relativo, o URL base será o URL do manifesto do aplicativo da web.
+
+### ícones (opcional)
+
+Uma matriz de objetos de recursos de imagem. Cada objeto deve incluir o `src` e uma propriedade `sizes`. Ao contrário [dos ícones de manifesto do aplicativo da web](/add-manifest/#icons) , o `type` de imagem é opcional.
+
+Arquivos SVG não são suportados no momento da escrita, use PNG em seu lugar.
+
+Se desejar ícones perfeitos em pixels, forneça-os em incrementos de 48 dp (ou seja, ícones de 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 pixels). Caso contrário, é recomendável usar um único ícone de 192x192 pixels.
+
+Como medida de qualidade, os ícones devem ter pelo menos metade do tamanho ideal do dispositivo no Android, que é 48 dp. Por exemplo, para exibir em uma [tela xxhdpi](https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp) , o ícone deve ter pelo menos 72 por 72 pixels. (Isso é derivado da [fórmula para converter](https://developer.android.com/training/multiscreen/screendensities#dips-pels) unidades dp em unidades de pixel.)
+
+## Teste os atalhos do seu aplicativo
+
+Para verificar se os atalhos do seu aplicativo estão configurados corretamente, use o **painel Manifesto** no painel **Aplicativo** do DevTools.
+
+<figure>{% Img src = "image/admin/rEL0r8lEfYHlsj0ylLSL.png", alt = "Captura de tela dos atalhos do aplicativo no DevTools", width = "800", height = "534"%}<figcaption> Atalhos de aplicativos mostrados no DevTools</figcaption></figure>
+
+Este painel fornece uma versão legível, por humanos, de muitas das propriedades do seu manifesto, incluindo atalhos de aplicativos. Isso torna mais fácil verificar se todos os ícones de atalho, se fornecidos, estão carregando corretamente.
+
+Os atalhos do aplicativo podem não estar disponíveis imediatamente para todos os usuários porque as atualizações do Progressive Web App são limitadas a uma vez por dia. Saiba mais sobre [como o Chrome lida com as atualizações do manifesto do aplicativo da web](/manifest-updates) .
+
+## Melhores Práticas
+
+### Ordenar atalhos de aplicativos por prioridade
+
+Recomendamos que você ordene os atalhos de aplicativos por prioridade, com os atalhos de aplicativos mais críticos aparecendo primeiro na `shortcuts` pois o limite do número de atalhos de aplicativos exibidos varia de acordo com a plataforma. O Chrome e o Edge no Windows, por exemplo, limitam o número de atalhos de aplicativos a 10, enquanto o Chrome para Android leva apenas os primeiros 4 atalhos de aplicativos em consideração.
+
+{% Aside %} Chrome 92 para Android 7 agora permite apenas 3 atalhos de aplicativos. Um atalho para as configurações do site foi adicionado, tomando um dos slots de atalho disponíveis para o aplicativo. {% endAside %}
+
+### Use nomes de atalhos de aplicativos distintos
+
+Você não deve confiar em ícones para diferenciar os atalhos de aplicativos, pois eles nem sempre estão visíveis. Por exemplo, o macOS não oferece suporte a ícones no menu de atalhos do dock. Use nomes distintos para cada atalho de aplicativo.
+
+### Medir o uso de atalhos de aplicativos
+
+Você deve anotar as `url` de atalhos do aplicativo como faria com `start_url` para fins analíticos (por exemplo, `url: "/my-shortcut?utm_source=homescreen"` ).
+
+## Suporte de navegador
+
+Os atalhos de aplicativos estão disponíveis no Android (Chrome 84), Windows (Chrome 85 e Edge 85), ChromeOS (Chrome 92), macOS e Linux (Chrome 96 e Edge 96).
+
+<figure>{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/6KgvySxUcryuD0gwXa0u.png", alt="Captura de tela de um menu de atalhos de aplicativo aberto no ChromeOS", width="800", height="450" %}<figcaption> Menu de atalhos do aplicativo aberto no ChromeOS</figcaption></figure>
+
+## Suporte para atividades confiáveis na web
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) , a ferramenta recomendada para construir aplicativos Android que usam [Atividade da Web confiável](/using-a-pwa-in-your-android-app/) , lê os atalhos do aplicativo a partir do manifesto do aplicativo da web e gera automaticamente a configuração correspondente para o aplicativo Android. Observe que os ícones para atalhos de aplicativos são [obrigatórios](https://github.com/GoogleChromeLabs/bubblewrap/issues/116) e devem ter pelo menos 96 por 96 pixels no Bubblewrap.
+
+[O PWABuilder](https://www.pwabuilder.com/) , uma ótima ferramenta para transformar facilmente um Progressive Web App em uma Atividade da Web Confiável, oferece suporte a atalhos de aplicativos com algumas [ressalvas](https://github.com/pwa-builder/CloudAPK/issues/25) .
+
+Para os desenvolvedores que integram a Atividade da Web confiável manualmente em seu aplicativo [Android, os atalhos do aplicativo Android](https://developer.android.com/guide/topics/ui/shortcuts) podem ser usados para implementar os mesmos comportamentos.
+
+## Amostra
+
+<figure>
+  <video controls autoplay loop muted src="https://storage.googleapis.com/web-dev-assets/app-shortcuts/app-shortcuts-recording.mp4">
+  </video></figure>
+
+Confira o [exemplo de atalhos](https://app-shortcuts.glitch.me) do aplicativo e sua [fonte](https://glitch.com/edit/#!/app-shortcuts) .
+
+{% Glitch { id: 'app-shortcuts', path: 'public/manifest.json', height: 480 } %}
+
+## Links úteis
+
+- [Explicador](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Shortcuts/explainer.md)
+- [Spec](https://w3c.github.io/manifest/#shortcuts-member)
+- [Amostra de atalhos do aplicativo](https://app-shortcuts.glitch.me) | [Fonte de amostra de atalhos de aplicativos](https://glitch.com/edit/#!/app-shortcuts)
+- [Bug de rastreamento](https://bugs.chromium.org/p/chromium/issues/detail?id=955497)
+- [Entrada ChromeStatus.com](https://chromestatus.com/feature/5706099464339456)
+- Componente Blink: [`UI>Browser>WebAppInstalls`](https://crbug.com/?q=component:UI%3EBrowser%3EWebAppInstalls)
diff --git a/src/site/content/pt/blog/async-clipboard/index.md b/src/site/content/pt/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..d1535d70186
--- /dev/null
+++ b/src/site/content/pt/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: Desbloqueando o acesso à área de transferência
+subhead: Acesso mais seguro e desbloqueado à área de transferência para textos e imagens
+authors:
+  - developit
+  - thomassteiner
+description: A API Async Clipboard simplifica copiar e colar com permissões.
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: Área de transferência com lista de compras
+feedback:
+  - api
+---
+
+Nos últimos anos, os navegadores têm usado [`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands) para interações com a área de transferência. Embora amplamente suportado, esse método de recortar e colar tinha um custo: o acesso à área de transferência era síncrono e só podia ler e gravar no DOM.
+
+Isso não é problema para pequenos trechos de texto, mas há muitas situações em que bloquear a página durante a transferência é uma experiência ruim. Pode ser necessária uma higienização ou decodificação de imagem demorada antes que o conteúdo possa ser colado com segurança. O navegador pode precisar carregar ou embutir recursos vinculados de um documento colado. Isto bloquearia a página enquanto espera no disco ou na rede. Imagine adicionar permissões à combinação, exigindo que o navegador bloqueie a página enquanto solicita acesso à área de transferência. Além disso, as permissões implementadas em torno de `document.execCommand()` para a interação com área de transferência são definidas vagamente e variam entre os navegadores.
+
+A [API Async Clipboard](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api) resolve esses problemas, fornecendo um modelo de permissões bem definido que não bloqueia a página. O Safari anunciou recentemente o [suporte para ela na versão 13.1](https://webkit.org/blog/10855/). Com isso, os principais navegadores recebem um nível básico de suporte. No momento em que este livro foi escrito, o Firefox só oferecia suporte a texto; e o suporte a imagens é limitado ao formato PNG em alguns navegadores. Se você estiver interessado em usar a API, [consulte uma tabela que mostra o suporte em navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility) antes de continuar.
+
+{% Aside %} A API Async Clipboard é limitada ao tratamento de texto e imagens. O Chrome 84 apresenta um recurso experimental que permite à área de transferência lidar com qualquer tipo de dados arbitrário. {% endAside %}
+
+## Copiar: gravando dados na área de transferência
+
+### writeText()
+
+Para copiar texto para a área de transferência, chame `writeText()`. Como esta API é assíncrona, a `writeText()` retorna uma promessa que resolve ou rejeita dependendo se o texto passado foi copiado com sucesso:
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+### write()
+
+Na verdade, `writeText()` nada mais é que que um método de conveniência para o método `write()` genérico, que também permite copiar imagens para a área de transferência. Como `writeText()`, ele é assíncrono e retorna uma promessa.
+
+Para gravar uma imagem na área de transferência, você precisa da imagem como um [`blob`](https://developer.mozilla.org/docs/Web/API/blob). Uma maneira de fazer isso é solicitando a imagem de um servidor usando `fetch()` e, em seguida, chamando [`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob) na resposta.
+
+Solicitar uma imagem do servidor pode não ser desejável ou possível por vários motivos. Felizmente, você também pode desenhar a imagem numa canvas e chamar o método [`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)
+
+Em seguida, passe um array de objetos `ClipboardItem` como parâmetro para o método `write()`. Atualmente, você só pode passar uma imagem de cada vez, mas esperamos adicionar suporte para múltiplas imagens no futuro. `ClipboardItem` recebe um objeto com o tipo MIME da imagem como chave e o blob como valor. Nos objetos Blob obtidos de `fetch()` ou `canvas.toBlob()`, a propriedade `blob.type` contém automaticamente o tipo MIME correto para uma imagem.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} O Safari (WebKit) trata a ativação do usuário de maneira diferente do Chromium (Blink) (veja o [bug # 222262 do WebKit](https://bugs.webkit.org/show_bug.cgi?id=222262)). Para o Safari, rode todas as operações assíncronas numa promessa cujo resultado você atribui ao `ClipboardItem`:
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### O evento copy
+
+No caso em que um usuário inicia uma cópia da área de transferência, os dados não textuais são fornecidos como um Blob para você. O [evento `copy`](https://developer.mozilla.org/docs/Web/API/Document/copy_event) inclui uma propriedade `clipboardData` com os itens já no formato correto, eliminando a necessidade de criar manualmente um Blob. Chame `preventDefault()` para evitar o comportamento default em favor de sua própria lógica e, em seguida, copie o conteúdo para a área de transferência. O que não é abordado neste exemplo é o fallback para APIs anteriores quando a API Clipboard não é suportada. Abordarei isto em [Detecção de recursos](#feature-detection), mais adiante neste artigo.
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Image copied.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## Colar: lendo dados da área de transferência
+
+### readText()
+
+Para ler o texto da área de transferência, chame `navigator.clipboard.readText()` e aguarde a promessa retornada para resolver:
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+### read()
+
+O método `navigator.clipboard.read()` também é assíncrono e retorna uma promessa. Para ler uma imagem da área de transferência, obtenha uma lista de objetos [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem) e itere sobre eles.
+
+Cada `ClipboardItem` pode manter seu conteúdo em diferentes tipos, então você precisará iterar sobre a lista de tipos, novamente usando um loop `for...of`. Para cada tipo, chame o `getType()` com o tipo atual como um argumento para obter o Blob correspondente. Como antes, esse código não está vinculado a imagens e funcionará com outros tipos de arquivo futuros.
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### Trabalhando com arquivos colados
+
+É útil para os usuários poderem usar os atalhos do teclado da área de transferência, como <kbd>ctrl</kbd> + <kbd>c</kbd> e <kbd>ctrl</kbd> + <kbd>v</kbd>. O Chromium expõe *arquivos somente leitura* na área de transferência, conforme descrito abaixo. Isto é acionado quando o usuário acessa o atalho de colar default do sistema operacional ou quando clica em **Editar** e depois em **Colar** na barra de menu do navegador. Nenhum código adicional é necessário.
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Leia conteúdo do arquivo, assumindo ser texto.
+  // Não há como gravar nele de volta.
+  console.log(await file.text());
+});
+```
+
+### O evento paste
+
+Conforme observado antes, existem planos para introduzir eventos para trabalhar com a API Clipboard, mas por enquanto você pode usar o evento `paste`. Ele funciona bem com os novos métodos assíncronos de leitura de texto da área de transferência. Tal como acontece com o `copy`, não se esqueça de chamar `preventDefault()`.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+Tal como acontece com o evento `copy`, o fallback para APIs anteriores quando a API Clipboard não é suportada será tratada em [Detecção de recursos](#feature-detection).
+
+## Lidando com múltiplos tipos de arquivo
+
+A maioria das implementações coloca múltiplos formatos de dados na área de transferência para uma única operação corte ou cópia. Há dois motivos para isso: como desenvolvedor de aplicações, você não tem como saber os recursos da aplicação para os quais um usuário deseja copiar texto ou imagens, e muitas aplicações suportam a colagem de dados estruturados como texto simples. Isto é apresentado aos usuários com um item de menu **Editar** com um nome como **Colar e combinar estilo** ou **Colar sem formatação**.
+
+O exemplo a seguir mostra como fazer isso. Este exemplo usa `fetch()` para obter dados de imagem, mas esses dados também poderiam vir de um [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas) ou da [API File System Access](/file-system-access/).
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png').then(response => response.blob());
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## Segurança e permissões
+
+O acesso à área de transferência sempre representou uma preocupação de segurança para os navegadores. Sem as permissões adequadas, uma página poderia copiar silenciosamente todo tipo de conteúdo malicioso para a área de transferência de um usuário, o que produziria resultados catastróficos quando colado. Imagine uma página da web que copia silenciosamente `rm -rf /` ou uma [imagem de bomba de descompressão](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html) para sua área de transferência.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="Prompt do navegador pedindo permissão ao usuário para a área de transferência.", width="800", height="338" %}   <figcaption>O prompt de permissão para a API Clipboard. </figcaption></figure>
+
+Dar às páginas web acesso irrestrito de leitura à área de transferência é ainda mais problemático. Os usuários copiam rotineiramente informações confidenciais, como senhas e detalhes pessoais, para a área de transferência, que poderia então ser lida por qualquer página sem o conhecimento do usuário.
+
+Tal como acontece com muitas novas APIs, a Clipboard API só é suportada em páginas servidas por HTTPS. Para ajudar a prevenir abusos, o acesso à área de transferência só é permitido quando uma página é a aba ativa. As páginas nas abas ativas podem gravar na área de transferência sem solicitar permissão, mas a leitura da área de transferência sempre requer permissão.
+
+Permissões para copiar e colar foram adicionadas à [Permissions API](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web). A permissão `clipboard-write` é concedida automaticamente às páginas quando elas estão na aba ativa. A permissão `clipboard-read` precisa ser solicitada, o que você pode fazer ao tentar ler dados da área de transferência. O código abaixo mostra o último:
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Será 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Escuta mudanças ao estado de permissão
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+Você também pode controlar se um gesto do usuário é necessário para chamar a ação de cortar ou colar usando a opção `allowWithoutGesture`. O default para este valor varia de acordo com o navegador, portanto, você deve sempre incluí-lo.
+
+É aqui que a natureza assíncrona da API da área de transferência é realmente útil: a tentativa de ler ou gravar dados da área de transferência automaticamente solicita permissão ao usuário, caso ainda não tenha sido concedida. Como a API é baseada em promessas, isto é completamente transparente e um usuário negando a permissão à área de transferência faz com que a promessa seja rejeitada para que a página possa responder apropriadamente.
+
+Como o Chrome só permite acesso à área de transferência quando uma página é a aba ativa, você descobrirá que alguns dos exemplos aqui não rodam se colados diretamente no DevTools, já que o próprio DevTools é a aba ativa. Há um truque: adie o acesso à área de transferência usando `setTimeout()` e clique rapidamente dentro da página para obter seu foco antes que as funções sejam chamadas:
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## Integração de políticas de permissões
+
+Para usar a API em iframes, você precisa habilitá-la com a [Política de Permissões](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/), que define um mecanismo que permite ativar e desativar seletivamente diversos recursos do navegador e APIs. Concretamente, você precisa passar ou `clipboard-read` ou `clipboard-write`, dependendo das necessidades da sua aplicação.
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## Detecção de recursos
+
+Para usar a API Async Clipboard e oferecer suporte a todos os navegadores, teste o `navigator.clipboard` e substitua por métodos anteriores. Por exemplo, veja um exemplo de como você pode implementar a colagem para incluir outros navegadores.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+Essa não é toda a história. Antes da API Async Clipboard, havia uma mistura de diferentes implementações da técnica de copiar e colar em diferentes navegadores web. Na maioria dos navegadores, a o recurso copiar/colar do próprio navegador pode ser acionado usando `document.execCommand('copy')` e `document.execCommand('paste')`. Se o texto a ser copiado for uma string que não está presente no DOM, ela deve ser injetada no DOM e selecionada:
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+});
+```
+
+No Internet Explorer, você também pode acessar a área de transferência por meio de `window.clipboardData`. Se acessado por meio de um gesto do usuário, como um evento de clique - parte do ato de pedir permissão com responsabilidade - nenhum prompt de permissão será mostrado.
+
+## Demos
+
+Você pode experimentar com a API Async Clipboard nas demos abaixo ou [diretamente no Glitch](https://async-clipboard-api.glitch.me/) .
+
+O primeiro exemplo demonstra como mover o texto para dentro e para fora da área de transferência.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Para experimentar a API com imagens, use esta demonstração. Lembre-se de que apenas PNGs são suportados e apenas em [alguns navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility).
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Próximos passos
+
+O Chrome está trabalhando ativamente na expansão da API Asynchronous Clipboard com eventos simplificados alinhados com a [API Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Por causa dos riscos potenciais, o Chrome está trilhando com cuidado. Para se manter atualizado sobre o progresso do Chrome, acompanhe este artigo e nosso [blog](/blog/) para atualizações.
+
+No momento, o suporte para a API Clipboard está disponível em [vários navegadores](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility) .
+
+Boas cópias e colagens!
+
+## Links relacionados
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## Agradecimentos
+
+A API Asynchronous Clipboard foi implementada por [Darwin Huang](https://www.linkedin.com/in/darwinhuang/) e [Gary Kačmarčík](https://www.linkedin.com/in/garykac/). Darwin também forneceu a demonstração. Obrigado a [Kyarik](https://github.com/kyarik) e novamente a Gary Kačmarčík por revisar partes deste artigo.
+
+Imagem herói por [Markus Winkler](https://unsplash.com/@markuswinkler) no [Unsplash](https://unsplash.com/photos/7iSEHWsxPLw).
diff --git a/src/site/content/pt/blog/better-layout-shift-metric/index.md b/src/site/content/pt/blog/better-layout-shift-metric/index.md
new file mode 100644
index 00000000000..29320ba1bdc
--- /dev/null
+++ b/src/site/content/pt/blog/better-layout-shift-metric/index.md
@@ -0,0 +1,200 @@
+---
+title: 'Procura-se comentários: o caminho para uma melhor métrica de mudança de layout para páginas de longa duração'
+subhead: Saiba mais sobre nossos planos para melhorar a métrica de Mudança Cumulativa de Layout e envie-nos seus comentários.
+description: |2
+
+  Saiba mais sobre nossos planos para melhorar a métrica de Mudança Cumulativa de Layout e envie-nos seus comentários.
+authors:
+  - anniesullie
+  - mmocny
+date: 2021-01-25
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: Um exemplo de abordagem de janelamento para medir a mudança de layout.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[O Cumulative Layout Shigt - mudança cumulativa de layout](/cls) (CLS) é uma métrica que mede a estabilidade visual de uma página da web. A métrica é chamada de mudança cumulativa de layout  porque a pontuação de cada mudança individual é somada ao longo da vida útil da página.
+
+Embora todas as mudanças de layout sejam experiências do usuário ruins, elas agregam mais em páginas que ficam abertas por mais tempo. É por isso que a equipe de métricas de velocidade do Chrome decidiu melhorar a métrica CLS para ser mais neutra em relação ao tempo gasto em uma página.
+
+É importante que a métrica se concentre na experiência do usuário durante todo o tempo de vida da página, pois descobrimos que os usuários costumam ter experiências negativas após o carregamento, ao rolar ou navegar pelas páginas. Mas ouvimos preocupações sobre como isso afeta as páginas de longa duração: páginas que o usuário geralmente mantém abertas por um longo tempo. Existem vários tipos diferentes de páginas que tendem a permanecer abertas por mais tempo; alguns dos mais comuns são aplicativos de mídia social com rolagem infinita e aplicativos de página única.
+
+Uma análise interna de páginas de longa duração com pontuações CLS altas descobriu que a maioria dos problemas era causada pelos seguintes padrões:
+
+- [Os scrollers infinitos mudam o conteúdo](https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/) conforme o usuário rola.
+- Manipuladores de entrada que levam mais de 500 ms para atualizar a IU em resposta a uma interação do usuário, sem qualquer tipo de marcador de posição ou padrão de esqueleto.
+
+Embora incentivemos os desenvolvedores a melhorar essas experiências do usuário, também estamos trabalhando para melhorar a métrica e procurando feedback sobre as possíveis abordagens.
+
+## Como decidiríamos se uma nova métrica é melhor?
+
+Antes de mergulhar no design de métricas, queríamos garantir que avaliássemos nossas ideias em uma ampla variedade de páginas da web e casos de uso do mundo real. Para começar, projetamos um pequeno estudo dos usuários.
+
+Primeiro, gravamos vídeos e [rastros do Chrome](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool) de 34 jornadas de usuários por meio de vários sites. Ao selecionar as jornadas do usuário, buscamos algumas coisas:
+
+- Uma variedade de diferentes tipos de sites, como sites de notícias e de compras.
+- Uma variedade de jornadas do usuário, como carregamento inicial da página, rolagem, navegações em uma única página no aplicativo e interações do usuário.
+- Uma variedade de número e intensidade de mudanças de layout individuais nos sites.
+- Poucas experiências negativas nos sites além de mudanças de layout.
+
+Pedimos a 41 de nossos colegas que assistissem a dois vídeos por vez, avaliando qual dos dois era melhor em termos de mudança de layout. A partir dessas classificações, criamos uma ordem de classificação idealizada dos sites. Os resultados da classificação do usuário confirmaram nossas suspeitas de que nossos colegas, como a maioria dos usuários, ficam realmente frustrados com as mudanças de layout após o carregamento, especialmente durante a rolagem e navegações de aplicativos em uma única página. Vimos que alguns sites têm experiências de usuário muito melhores durante essas atividades do que outros.
+
+Como gravamos os rastros do Chrome junto com os vídeos, tínhamos todos os detalhes das mudanças de layout individuais em cada jornada do usuário. Nós os usamos para calcular os valores métricos de cada ideia para cada jornada do usuário. Isso nos permitiu ver como cada variante da métrica classificou as jornadas do usuário e quão diferente cada uma era da classificação ideal.
+
+## Quais ideias de métricas testamos?
+
+### Estratégias de janelamento
+
+Frequentemente as páginas têm várias mudanças de layout agrupadas, porque os elementos podem mudar várias vezes conforme o novo conteúdo surge peça por peça. Isso nos levou a experimentar técnicas para agrupamento de mudanças. Para isso, examinamos três abordagens de janelas:
+
+- Janelas caindo
+- Janelas deslizantes
+- Janelas de sessão
+
+Em cada um desses exemplos, a página tem mudanças de layout de gravidade variável ao longo do tempo. Cada barra azul representa uma única mudança de layout e o comprimento representa a [pontuação](/cls/#layout-shift-score) dessa mudança. As imagens ilustram as maneiras como diferentes estratégias de janelamento agrupam as mudanças de layout ao longo do tempo.
+
+#### Janelas caindo
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/tumbling-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Exemplo de uma janela tombada.</figcaption></figure>
+
+A abordagem mais simples é dividir a página em janelas de blocos de tamanhos iguais. Estas são chamadas de janelas caindo. Você notará acima que a quarta barra realmente parece que deveria ser agrupada na segunda janela pendente, mas como todas as janelas têm um tamanho fixo, ela está na primeira janela. Se houver pequenas diferenças no tempo de carregamento ou nas interações do usuário na página, as mesmas mudanças de layout podem ocorrer em lados diferentes dos limites da janela caindo.
+
+#### Janelas deslizantes
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/sliding-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Exemplo de janela deslizante.</figcaption></figure>
+
+Uma abordagem que nos permite ver mais agrupamentos possíveis do mesmo comprimento é atualizar continuamente a janela potencial ao longo do tempo. A imagem acima mostra uma janela deslizante de cada vez, mas poderíamos olhar todas as janelas deslizantes possíveis ou um subconjunto delas para criar uma métrica.
+
+#### Janelas de sessão
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Exemplo de uma janela de sessão.</figcaption></figure>
+
+Se quiséssemos nos concentrar na identificação de áreas da página com rajadas de mudanças de layout, poderíamos iniciar cada janela em uma mudança e continuar crescendo até encontrar um intervalo de um determinado tamanho entre as mudanças de layout. Essa abordagem agrupa as mudanças de layout e ignora a maior parte da experiência do usuário sem mudanças. Um problema potencial é que, se não houver lacunas nas mudanças de layout, uma métrica baseada em janelas de sessão pode crescer sem limites, assim como a métrica CLS atual. Então, também tentamos fazer isso com um tamanho máximo de janela.
+
+### Tamanhos de janela
+
+A métrica pode fornecer resultados muito diferentes, dependendo do tamanho real das janelas, então tentamos vários tamanhos de janela diferentes:
+
+- Cada mudança como sua própria janela (sem janelas)
+- 100 ms
+- 300 ms
+- 1 segundo
+- 5 segundos
+
+### Processo de resumo
+
+Tentamos várias maneiras de resumir as diferentes janelas.
+
+#### Percentis
+
+Observamos o valor máximo da janela, bem como o percentil 95, o percentil 75 e a mediana.
+
+#### Média
+
+Observamos o valor médio da janela.
+
+#### Orçamentos
+
+Ficamos imaginando se talvez houvesse alguma pontuação mínima de mudança de layout que os usuários não notariam, e poderíamos apenas contar as mudanças de layout acima desse "orçamento" na pontuação. Portanto, para vários valores de "orçamento" em potencial, observamos a porcentagem de turnos acima do orçamento e a pontuação total de turnos acima do orçamento.
+
+### Outras estratégias
+
+Também examinamos muitas estratégias que não envolviam janelas, como a mudança total de layout dividido por tempo na página e a média das piores N mudanças individuais.
+
+## Os resultados iniciais
+
+No geral, testamos **145 definições de métricas diferentes com** base em permutações das ideias acima. Para cada métrica, classificamos todas as jornadas do usuário de acordo com sua pontuação na métrica e, em seguida, classificamos as métricas de acordo com a proximidade da classificação ideal.
+
+Para obter uma linha de base, também classificamos todos os sites de acordo com sua pontuação CLS atual. CLS ficou em 32º lugar, empatado com 13 outras estratégias, por isso foi melhor do que a maioria das permutações das estratégias acima. Para garantir que os resultados fossem significativos, também adicionamos três ordenações aleatórias. Como esperado, as ordenações aleatórias foram piores do que todas as estratégias testadas.
+
+Para entender se poderíamos estar sobreajustando para o conjunto de dados, após nossa análise, gravamos alguns novos vídeos de mudança de layout e rastros, classificamos manualmente e vimos que as classificações de métricas eram muito semelhantes para o novo conjunto de dados e o original.
+
+Algumas estratégias diferentes se destacaram nas classificações.
+
+### Melhores estratégias
+
+Quando classificamos as estratégias, descobrimos que três tipos de estratégias encabeçam a lista. Cada um teve aproximadamente o mesmo desempenho, então planejamos avançar com uma análise mais profunda em todos os três. Também gostaríamos de ouvir o feedback do desenvolvedor para entender se existem fatores fora da experiência do usuário que devemos considerar ao decidir entre eles. (Veja abaixo como deixar seus comentários.)
+
+#### Altos percentis de janelas longas
+
+Algumas estratégias de janelamento funcionaram bem com janelas grandes:
+
+- Janelas deslizantes de 1 segundo
+- As janelas de sessão são limitadas a 5 segundos com intervalo de 1 segundo
+- Janelas de sessão sem limite com intervalo de 1 segundo
+
+Todos eles se classificaram muito bem no 95º percentil e no máximo.
+
+Mas, para tamanhos de janela tão grandes, estávamos preocupados em usar o percentil 95 - frequentemente, olhávamos apenas 4 a 6 janelas e pegar o percentil 95 disso seria muita interpolação. Não está claro o que a interpolação faz em termos de valor métrico. O valor máximo é muito mais claro, então decidimos seguir em frente com a verificação do máximo.
+
+#### Média de janelas de sessão com intervalos longos
+
+A média das pontuações de todas as janelas de sessão sem limite com intervalos de 5 segundos entre elas teve um desempenho muito bom. Essa estratégia tem algumas características interessantes:
+
+- Se a página não tiver lacunas entre as mudanças de layout, ela acabará sendo uma janela de sessão longa com exatamente a mesma pontuação do CLS atual.
+- Essa métrica não levou em consideração o tempo ocioso diretamente; ela apenas considerou as mudanças que ocorreram na página, e não em pontos no tempo em que a página não estava mudando.
+
+#### Altos percentis de janelas curtas
+
+A janela deslizante máxima de 300 ms teve uma classificação muito alta, assim como o 95º percentil. Para o tamanho de janela menor, há menos interpolação de percentil do que tamanhos de janela maiores, mas também estávamos preocupados em "repetir" janelas deslizantes: se um conjunto de mudanças de layout ocorrer em dois quadros, haverá várias janelas de 300 ms que as incluem. Tirar o máximo é muito mais claro e simples do que tirar o 95º percentil. Então, mais uma vez, decidimos seguir em frente com a verificação do máximo.
+
+### Estratégias que não deram certo
+
+As estratégias que tentaram considerar a experiência "média" de tempo gasto sem mudanças de layout e com mudanças de layout se saíram muito mal. Nenhum dos resumos da mediana ou do 75º percentil de qualquer estratégia de janelamento classificou bem os sites. Nem a soma das mudanças de layout ao longo do tempo.
+
+Avaliamos uma série de "orçamentos" diferentes para mudanças de layout aceitáveis:
+
+- A porcentagem do layout muda acima de algum orçamento. Para vários orçamentos, todos eles tiveram uma classificação muito ruim.
+- Mudança de layout média acima de algum excesso. A maioria das variações dessa estratégia teve um desempenho ruim, mas o excesso médio em uma sessão longa com um grande intervalo teve um desempenho quase tão bom quanto a média das janelas de sessão com intervalos longos. Decidimos seguir em frente apenas com o último por ser mais simples.
+
+## Próximos passos
+
+### Análise em grande escala
+
+Implementamos as principais estratégias listadas acima no Chrome para que possamos obter dados sobre o uso no mundo real para um conjunto muito maior de sites. Planejamos usar uma abordagem semelhante de sites de classificação com base em suas pontuações métricas para fazer a análise em larga escala:
+
+- Classificar todos os sites por CLS e por cada novo candidato a métrica.
+    - Quais sites são classificados de maneira mais diferente pelo CLS e por cada candidato? Encontramos algo inesperado quando observamos para esses sites?
+    - Quais são as maiores diferenças entre os novos candidatos à métrica? Alguma das diferenças se destaca como vantagens ou desvantagens de um candidato específico?
+- Repetir a análise acima, mas classificando por tempo gasto em cada carregamento de página. Vemos uma melhoria esperada nos carregamentos de página de longa duração com mudança de layout aceitável? Vemos algum resultado inesperado em páginas de curta duração?
+
+### Comentários sobre nossa abordagem
+
+Adoraríamos ouvir os comentários de desenvolvedores da web sobre essas abordagens. Algumas coisas a se ter em mente ao considerar as novas abordagens:
+
+#### O que não está mudando
+
+Queremos esclarecer que muitas coisas não mudarão com uma nova abordagem:
+
+- Nenhuma de nossas ideias de métricas muda a maneira como as pontuações de mudança de layout para [frames individuais são calculadas](/cls/#layout-shift-score), apenas a maneira como resumimos vários frames. Isso significa que a [API JavaScript](/cls/#measure-cls-in-javascript) para mudanças de layout permanecerá a mesma e os eventos subjacentes nos traços do Chrome que as ferramentas de desenvolvedor usam também permanecerão os mesmos, portanto, retificações de mudança de layout em ferramentas como WebPageTest e Chrome DevTools continuarão a funcionar da mesma maneira.
+- Continuaremos a trabalhar duro para tornar as métricas fáceis de serem adotadas pelos desenvolvedores, incluindo-as na [biblioteca web-vitals](https://github.com/GoogleChrome/web-vitals) , documentando no [web.dev](/metrics) e relatando-as em nossas ferramentas de desenvolvedor como o Lighthouse.
+
+#### Compromissos entre métricas
+
+Uma das principais estratégias resume as janelas de mudança de layout como uma média e as demais relatam a janela máxima. Em páginas que ficam abertas por muito tempo, a média provavelmente relatará um valor mais representativo, mas em geral será mais fácil para os desenvolvedores agirem em uma única janela: eles podem registrar quando isso ocorreu, os elementos que mudaram e em breve. Adoraríamos ouvir os comentários sobre o que é mais importante para os desenvolvedores.
+
+Você acha que as janelas deslizantes ou de sessão são mais fáceis de entender? As diferenças são importantes para você?
+
+#### Como deixar seus comentários
+
+Você pode experimentar as novas métricas de mudança de layout em qualquer site usando nossas [implementações de exemplo de JavaScript](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) ou nosso [fork da extensão Core Web Vitals](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Envie feedback por e-mail para nosso grupo **[web-vitals-feedback](https://groups.google.com/g/web-vitals-feedback)**  do Google, com "[Layout Shift Metrics]" na linha de assunto. Estamos ansiosos para ouvir sua opinião!
diff --git a/src/site/content/pt/blog/blog.11tydata.js b/src/site/content/pt/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/pt/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/pt/blog/bluetooth/index.md b/src/site/content/pt/blog/bluetooth/index.md
new file mode 100644
index 00000000000..c7bc195a4dc
--- /dev/null
+++ b/src/site/content/pt/blog/bluetooth/index.md
@@ -0,0 +1,415 @@
+---
+title: Comunicação com dispositivos Bluetooth por JavaScript
+subhead: |2
+
+  A API Web Bluetooth permite que sites se comuniquem com dispositivos Bluetooth.
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: Um chip Bluetooth em uma moeda
+description: |2
+
+  A API Web Bluetooth permite que sites se comuniquem com dispositivos Bluetooth.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+E se eu dissesse que os sites podem se comunicar com dispositivos Bluetooth próximos de maneira segura e com privacidade? Dessa forma, monitores de frequência cardíaca, lâmpadas de som e até [tartarugas](https://www.youtube.com/watch?v=1LV1Fk5ZXwA) podem interagir diretamente com um site.
+
+Até agora, a capacidade de interagir com dispositivos Bluetooth era possível apenas para aplicativos específicos da plataforma. A API Web Bluetooth tem como objetivo mudar essa situação e possibilitar que navegadores da web também façam isso.
+
+## Antes de começarmos
+
+Este artigo pressupõe que você tenha algum conhecimento básico de como o Bluetooth Low Energy (BLE) e o [Generic Attribute Profile](https://www.bluetooth.com/specifications/gatt/) (GATT) funcionam.
+
+Mesmo que a [especificação da API Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/) ainda não esteja finalizada, os autores das especificações estão procurando ativamente por desenvolvedores entusiasmados para experimentar essa API e fornecer [feedback sobre as especificações](https://github.com/WebBluetoothCG/web-bluetooth/issues) e [comentários sobre a implementação](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth).
+
+Um subconjunto da API Web Bluetooth está disponível no ChromeOS, Chrome para Android 6.0, Mac (Chrome 56) e Windows 10 (Chrome 70). Isso significa que você deve ser capaz de [solicitar](#request) e se [conectar a](#connect) dispositivos Bluetooth Low Energy próximos, [ler](#read)/[gravar](#write) características do Bluetooth, [receber notificações GATT](#notifications), saber quando um [dispositivo Bluetooth é desconectado](#disconnect) e até [ler e gravar descritores Bluetooth](#descriptors). Consulte a tabela de [compatibilidade com navegador](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility) do MDN para obter mais informações.
+
+Para Linux e versões anteriores do Windows, habilite o sinalizador `#experimental-web-platform-features` `about://flags`.
+
+### Disponível para testes de origem
+
+Para obter o máximo de feedback possível dos desenvolvedores que usam a API Web Bluetooth no campo, o Chrome já adicionou esse recurso no Chrome 53 como uma [versão de teste original](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) para o ChromeOS, Android e Mac.
+
+O teste foi finalizado com êxito em janeiro de 2017.
+
+## Requisitos de segurança
+
+Para entender as vantagens e desvantagens da segurança, recomendo a [publicação do modelo de segurança do Web Bluetooth](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2) de Jeffrey Yasskin, engenheiro de software da equipe do Chrome, que trabalha na especificação da API Web Bluetooth.
+
+### Apenas HTTPS
+
+Como essa API experimental é um recurso novo e poderoso adicionado à web, está disponível apenas para [contextos seguros](https://w3c.github.io/webappsec-secure-contexts/#intro). Isso significa que você precisará construir com o [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) em mente.
+
+### Gesto do usuário necessário
+
+Como recurso de segurança, a descoberta de dispositivos Bluetooth com `navigator.bluetooth.requestDevice` deve ser acionada por [um gesto do usuário](https://html.spec.whatwg.org/multipage/interaction.html#activation), como toque ou clique do mouse. Estamos falando sobre ouvir eventos de [`pointerup`](https://developer.chrome.com/blog/pointer-events/), `click` e `touchend`.
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // Call navigator.bluetooth.requestDevice
+});
+```
+
+## Entre no código
+
+A API Web Bluetooth depende muito das [Promessas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) do JavaScript. Se você não estiver familiarizado com elas, confira este incrível [tutorial sobre Promessas](/promises). Além disso, `() => {}` são simplesmente [funções de seta](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) do ECMAScript 2015.
+
+### Solicite dispositivos Bluetooth {: #request}
+
+Esta versão da especificação da API Web Bluetooth permite que sites, executando na função Central, se conectem a servidores GATT remotos por meio de uma conexão BLE. É compatível com comunicação entre dispositivos que implementam Bluetooth 4.0 ou mais recente.
+
+Quando um site solicita acesso a dispositivos próximos usando `navigator.bluetooth.requestDevice`, o navegador exibe ao usuário um seletor de dispositivos no qual é possível escolher um dispositivo ou simplesmente cancelar a solicitação.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">Prompt do usuário de dispositivo Bluetooth.</a></p>
+  </figcaption></figure>
+
+O `navigator.bluetooth.requestDevice()` obtém um objeto obrigatório que define os filtros. Esses filtros são usados para retornar apenas dispositivos que correspondam a alguns serviços GATT Bluetooth anunciados e/ou o nome do dispositivo.
+
+#### Filtro de serviços
+
+Por exemplo, para solicitar dispositivos Bluetooth que anunciam o [serviço de bateria Bluetooth GATT](https://www.bluetooth.com/specifications/gatt/):
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+Se o seu serviço Bluetooth GATT não estiver na lista de [serviços Bluetooth GATT padronizados](https://www.bluetooth.com/specifications/assigned-numbers/), você poderá inserir o UUID Bluetooth completo ou um formato curto de 16 ou 32 bits.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Filtro de nome
+
+Você também pode solicitar dispositivos Bluetooth com base no nome do dispositivo anunciado com a chave de filtros `name` ou até um prefixo desse nome com a chave de filtros `namePrefix`. Observe que, nesse caso, você também precisará definir a chave `optionalServices` para poder acessar serviços não incluídos em um filtro de serviço. Do contrário, você obterá um erro mais tarde ao tentar acessá-los.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Filtro de dados do fabricante
+
+Também é possível solicitar dispositivos Bluetooth com base nos dados específicos do fabricante anunciados com a chave de filtros `manufacturerData`. Essa chave é uma matriz de objetos com uma chave obrigatória de [identificação de empresa Bluetooth](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/), com o nome `companyIdentifier`. Você também pode fornecer um prefixo de dados que filtra os dados do fabricante de dispositivos Bluetooth que iniciam com ele. Observe que você também precisará definir a chave `optionalServices` para poder acessar serviços não incluídos em um filtro de serviço. Do contrário, você obterá um erro mais tarde ao tentar acessá-los.
+
+```js
+// Filter Bluetooth devices from Google company with manufacturer data bytes
+// that start with [0x01, 0x02].
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+Uma máscara também pode ser usada com um prefixo de dados para corresponder a alguns padrões nos dados do fabricante. Confira o [explicador de filtros de dados Bluetooth](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md) para saber mais.
+
+{% Aside %} No momento em que este artigo foi escrito, a chave de filtro `manufacturerData` está disponível no Chrome 92. Se deseja compatibilidade com navegadores mais antigos, é necessário fornecer uma opção de fallback, pois o filtro de dados do fabricante é considerado vazio. Veja um [exemplo](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ). {% endAside %}
+
+#### Sem filtros
+
+Por fim, em vez de `filters`, você pode usar a chave `acceptAllDevices` para mostrar todos os dispositivos Bluetooth próximos. Também será necessário definir a chave `optionalServices` para poder acessar alguns serviços. Do contrário, um erro ocorrerá mais tarde ao tentar acessá-los.
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %} Isso pode resultar na exibição de vários dispositivos não relacionados mostrados no seletor, além de desperdício de energia, pois não há filtros. Use com cuidado. {% endAside %}
+
+### Conecte-se a um dispositivo Bluetooth {: #connect }
+
+Então, o que fazer agora que você tem um `BluetoothDevice`? Vamos nos conectar ao servidor GATT remoto Bluetooth que contém as definições de serviço e características.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // Human-readable name of the device.
+  console.log(device.name);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### Leia uma característica do Bluetooth {: #read }
+
+Estamos conectados ao servidor GATT do dispositivo Bluetooth remoto. Agora queremos obter um Serviço GATT Primário e ler uma característica que pertence a esse serviço. Vamos tentar, por exemplo, ler o nível de carga atual da bateria do dispositivo.
+
+No exemplo abaixo, `battery_level` é a [Característica Nível de Bateria padronizada](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Getting Battery Service…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Getting Battery Level Characteristic…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Battery percentage is ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Se você usar uma característica GATT Bluetooth personalizada, é possível inserir o UUID Bluetooth completo ou um formulário curto de 16 ou 32 bits para `service.getCharacteristic`.
+
+Note que você também pode adicionar um ouvinte de evento `characteristicvaluechanged` em uma característica para ler seu valor. Verifique a [Amostra alterada de leitura de valor de característica](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) para ver como tratar as próximas notificações do GATT opcionalmente.
+
+```js
+…
+.then(characteristic => {
+  // Set up event listener for when characteristic value changes.
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Battery percentage is ' + batteryLevel);
+}
+```
+
+### Grave em uma característica Bluetooth {: #write }
+
+Gravar em uma característica GATT Bluetooth é tão fácil quanto ler. Desta vez, vamos usar o Ponto de Controle da Freqüência Cardíaca para redefinir o valor do campo Energia Despendida para 0 em um dispositivo de monitoramento de freqüência cardíaca.
+
+Eu prometo que não há mágica aqui. Tudo está explicado na [página Característica Ponto de Controle da Freqüência Cardíaca](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // Writing 1 is the signal to reset energy expended.
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Energy expended has been reset.');
+})
+.catch(error => { console.error(error); });
+```
+
+### Receba notificações GATT {: #notifications }
+
+Agora veremos como receber notificações quando a característica [Medição de Frequência Cardíaca](https://www.bluetooth.com/specifications/gatt/) for alterada no dispositivo:
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Notifications have been started.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Received ' + value);
+  // TODO: Parse Heart Rate Measurement value.
+  // See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
+}
+```
+
+A [Amostra de Notificações](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) mostra como parar notificações com `stopNotifications()` e remover corretamente o ouvinte de evento `characteristicvaluechanged` adicionado.
+
+### Desconecte-se de um dispositivo Bluetooth {: #disconnect }
+
+Para proporcionar uma experiência melhor ao usuário, você pode ouvir eventos de desconexão e convidar o usuário a se reconectar:
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // Set up event listener for when device gets disconnected.
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Device ${device.name} is disconnected.`);
+}
+```
+
+Você também pode chamar `device.gatt.disconnect()` para desconectar seu aplicativo da web do dispositivo Bluetooth. Isso acionará os ouvintes de eventos exisentes do `gattserverdisconnected`. Observe que a comunicação do dispositivo Bluetooth NÃO será interrompida se outro aplicativo já estiver se comunicando com o dispositivo Bluetooth. Verifique a [Amostra de Desconexão de Dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) e a [Amostra de Reconexão Automática](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) para saber mais.
+
+{% Aside 'caution' %} Atributos, serviços, características, entre outros, do Bluetooth GATT são invalidados quando um dispositivo é desconectado. Isso significa que seu código deve sempre recuperar (por meio de `getPrimaryService(s)` , `getCharacteristic(s)`, etc.) esses atributos após a reconexão. {% endAside %}
+
+### Leia e grave em descritores Bluetooth {: #descriptors }
+
+Os descritores GATT do Bluetooth são atributos que descrevem um valor característico. Você pode lê-los e gravá-los de maneira semelhante às características do Bluetooth GATT.
+
+Vamos ver, por exemplo, como ler a descrição do usuário do intervalo de medição do termômetro de integridade do dispositivo.
+
+No exemplo abaixo, `health_thermometer` é o [Serviço de Termômetro de Integridade](https://www.bluetooth.com/specifications/gatt/), `measurement_interval`  é a [característica Intervalo de Medição](https://www.bluetooth.com/specifications/gatt/) e `gatt.characteristic_user_description` é o [descritor Descrição de Usuário Característico](https://www.bluetooth.com/specifications/assigned-numbers/).
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`User Description: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Agora que lemos a descrição do usuário do intervalo de medição do termômetro de integridade do dispositivo, vamos ver como atualizá-lo e gravar um valor personalizado.
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Defines the time between measurements.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## Amostras, demonstrações e codelabs
+
+Todos [os exemplos da Web Bluetooth](https://googlechrome.github.io/samples/web-bluetooth/index.html) abaixo foram testados com êxito. Para aproveitar essas amostras ao máximo, recomendo que você instale o [aplicativo BLE Peripheral Simulator Android,](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral) que simula um periférico BLE com um serviço de bateria, um serviço de frequência cardíaca ou um serviço de termômetro de integridade.
+
+### Principiante
+
+- [Informações do dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-info.html) - recupera informações básicas do dispositivo em um dispositivo BLE.
+- [Nível da bateria](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html) - recupera as informações da bateria em um dispositivo BLE que anuncia as informações da bateria.
+- [Redefinir energia](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html) - redefine a energia despendida em um dispositivo BLE que anuncia a frequência cardíaca.
+- [Propriedades da característica](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html) - exibe todas as propriedades de uma característica específica de um dispositivo BLE.
+- [Notificações](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) - inicie e pare notificações de características em um dispositivo BLE.
+- [Desconexão do dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) - desconecte e seja notificado de uma desconexão de um dispositivo BLE após conectar-se.
+- [Obtenha características](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html) - obtenha todas as características de um serviço anunciado em um dispositivo BLE.
+- [Obtenha descritores](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html) - obtenha todos os descritores das características de um serviço anunciado em um dispositivo BLE.
+- [Filtro de dados do fabricante](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html) - recupera informações básicas do dispositivo em um dispositivo BLE que correspondem aos dados do fabricante.
+
+### Combinando múltiplas operações
+
+- [Características GAP](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html) - obtenha todas as características GAP de um dispositivo BLE.
+- [Características de informações do dispositivo](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html) - obtenha todas as características de informações do dispositivo de um dispositivo BLE.
+- [Perda de link](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html) - defina a característica do nível de alerta de um dispositivo BLE (readValue e writeValue).
+- [Descubra serviços e características](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html) - descubra todos os serviços primários acessíveis e suas características em um dispositivo BLE.
+- [Reconexão automática](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) - reconecte-se a um dispositivo BLE desconectado usando um algoritmo de backoff exponencial.
+- [Read Characteristic Value Changed](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) - leia o nível da bateria e seja notificado sobre as alterações em um dispositivo BLE.
+- [Ler descritores](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html) - leia todos os descritores de características de um serviço em um dispositivo BLE.
+- [Write Descriptor](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html) - grave no descritor "Descrição de Usuário Característico" em um dispositivo BLE.
+
+Confira também nossas [Demos da Web Bluetooth coletadas](https://github.com/WebBluetoothCG/demos) e [Codelabs oficiais da Web Bluetooth](https://github.com/search?q=org%3Agooglecodelabs+bluetooth).
+
+## Bibliotecas
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils) é um módulo npm que adiciona algumas funções convenientes à API.
+- Um shim de API Web Bluetooth está disponível no [noble](https://github.com/sandeepmistry/noble), o módulo central Node.js BLE mais popular. Isso permite que você empacote/navegue na web noble sem a necessidade de um servidor WebSocket ou outros plug-ins.
+- [angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) é um módulo para [Angular](https://angularjs.org) que abstrai todo o clichê necessário para configurar a API Web Bluetooth.
+
+## Ferramentas
+
+- [Introdução à Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator) é um aplicativo da web simples que irá gerar todo o código padrão do JavaScript para começar a interagir com um dispositivo Bluetooth. Insira um nome de dispositivo, um serviço, uma característica, defina suas propriedades e pronto.
+- Se você já for um desenvolvedor Bluetooth, o [Web Bluetooth Developer Studio Plugin](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin) também gerará o código do Web Bluetooth JavaScript para o seu dispositivo Bluetooth.
+
+## Dicas
+
+Uma **página Bluetooth Internals** está disponível no Chrome em `about://bluetooth-internals` para que você possa inspecionar tudo sobre dispositivos Bluetooth próximos: status, serviços, características e descritores.
+
+<figure>{% Img src="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt="Captura de tela da página interna para depurar Bluetooth no Chrome", width="800", height="572" %}<figcaption> Página interna no Chrome para depurar dispositivos Bluetooth.</figcaption></figure>
+
+Também recomendo verificar a página oficial [Como arquivar bugs do Web Bluetooth](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs), pois às vezes pode ser difícil depurar o Bluetooth.
+
+{% Aside 'caution' %} Ler e gravar nas características do Bluetooth em paralelo pode gerar erros, dependendo da plataforma. Eu sugiro fortemente que você enfileire manualmente as solicitações de operação do GATT quando apropriado. Consulte ["Operação GATT em andamento - como lidar com isso?"](https://github.com/WebBluetoothCG/web-bluetooth/issues/188). {% endAside %}
+
+## Próximos passos
+
+Verifique o [status de implementação do navegador e da plataforma](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md) primeiro para saber quais partes da API Web Bluetooth estão sendo implementadas no momento.
+
+Embora ainda esteja incompleta, aqui está uma prévia do que esperar no futuro próximo:
+
+- A [varredura de anúncios BLE próximos](https://github.com/WebBluetoothCG/web-bluetooth/pull/239) acontecerá com `navigator.bluetooth.requestLEScan()` .
+- Um novo `serviceadded` rastreará os serviços Bluetooth GATT recém-descobertos, enquanto o `serviceremoved` rastreará os removidos. Um novo `servicechanged` será disparado quando qualquer característica e/ou descritor for adicionado ou removido de um serviço GATT Bluetooth.
+
+### Mostre seu apoio à API
+
+Você está planejando usar a API Web Bluetooth? Seu apoio público ajuda a equipe do Chrome a priorizar os recursos e mostra a outros fornecedores de navegadores como o apoio é fundamental.
+
+Envie um tweet para [@ChromiumDev](https://twitter.com/ChromiumDev) usando a hashtag [`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live) e diga-nos onde e como você está usando a API.
+
+## Recursos
+
+- Stack Overflow: [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Status do recurso do Chrome: [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Erros de implementação do Chrome: [https://crbug.com/?q=component:Blink&gt;Bluetooth](https://crbug.com/?q=component:Blink%3EBluetooth)
+- Especificação de Bluetooth da web: [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- Problemas de especificações: [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- Aplicativo BLE Peripheral Simulator: [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ'%}
+
+## Reconhecimentos
+
+Agradecimentos a [Kayce Basques](https://github.com/kaycebasques) por revisar este artigo. Imagem do herói elaborada por [SparkFun Electronics de Boulder, EUA](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg).
diff --git a/src/site/content/pt/blog/building-a-pwa-at-google-part-1/index.md b/src/site/content/pt/blog/building-a-pwa-at-google-part-1/index.md
new file mode 100644
index 00000000000..997eaa038b0
--- /dev/null
+++ b/src/site/content/pt/blog/building-a-pwa-at-google-part-1/index.md
@@ -0,0 +1,137 @@
+---
+title: |2-
+
+  Construindo um PWA no Google, parte 1
+subhead: |2-
+
+  O que a equipe Bulletin aprendeu sobre os service workers durante o desenvolvimento de um PWA.
+date: 2020-07-29
+authors:
+  - joelriley
+  - douglasparker
+  - msdikla
+hero: image/admin/mgB3j6NZa6F1CkoD9YI4.jpg
+alt: Um grupo de pessoas trabalhando em seus computadores em uma mesa.
+description: |2-
+
+  O que a equipe Bulletin aprendeu sobre os service workers durante o desenvolvimento de um PWA.
+tags:
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - performance
+  - storage
+  - testing
+---
+
+Esta é a primeira de uma série de postagens de blog sobre as lições que a equipe do Google Bulletin aprendeu ao construir um PWA externo. Nessas postagens, compartilharemos alguns dos desafios que enfrentamos, as abordagens que adotamos para superá-los e conselhos gerais para evitar armadilhas. Esta não é, de forma alguma, uma visão geral completa dos PWAs. O objetivo é compartilhar aprendizados com a experiência de nossa equipe.
+
+Nesta primeira postagem, cobriremos primeiro algumas informações básicas e, em seguida, nos aprofundaremos em todas as coisas que aprendemos sobre os service workers.
+
+{% Aside %} O Bulletin foi encerrado em 2019 devido à falta de adequação do produto/mercado. Mesmo assim, aprendemos muito sobre PWAs ao longo do caminho! {% endAside %}
+
+## Histórico {: #background }
+
+O Bulletin esteve em desenvolvimento ativo de meados de 2017 a meados de 2019.
+
+### Por que escolhemos construir um PWA {: #why-pwa }
+
+Antes de nos aprofundarmos no processo de desenvolvimento, vamos examinar por que construir um PWA foi uma opção atraente para este projeto:
+
+- **Capacidade de iterar rapidamente**. Especialmente valioso porque o Bulletin seria testado em vários mercados.
+- **Base de código única**. Nossos usuários estavam divididos quase uniformemente entre Android e iOS. Um PWA significava que poderíamos construir um único aplicativo da web que funcionasse em ambas as plataformas. Isso aumentou a velocidade e o impacto da equipe.
+- **Atualizado rapidamente e independente do comportamento do usuário**. Os PWAs podem ser atualizados automaticamente, o que reduz a quantidade de clientes desatualizados. Conseguimos realizar alterações de back-end com um tempo de migração muito curto para os clientes.
+- **Facilmente integrado com aplicativos próprios e de terceiros.** Essas integrações eram um requisito para o aplicativo. Com um PWA, muitas vezes significava simplesmente abrir um URL.
+- **Sem o atrito de instalação de um aplicativo.**
+
+### Nossa estrutura {: #framework}
+
+Para o Bulletin, usamos o [Polymer](https://www.polymer-project.org/), mas qualquer estrutura moderna e bem suportada funciona.
+
+## O que aprendemos sobre os service-workers {: #lessons-learned }
+
+Você não pode ter um PWA sem um [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/). Os service workers oferecem muito poder, como estratégias avançadas de cache, recursos offline, sincronização em segundo plano etc. Embora os service workers tragam alguma complexidade, descobrimos que seus benefícios superam a complexidade adicionada.
+
+### Gere-o se puder {: #generate }
+
+Evite escrever um script de service worker manualmente. Escrever service workers manualmente requer o gerenciamento manual de recursos em cache e reescrever a lógica que é comum à maioria das bibliotecas de service workers, como o [Workbox](https://developer.chrome.com/docs/workbox/).
+
+Dito isso, devido à nossa pilha de tecnologia interna, não podíamos usar uma biblioteca para gerar e gerenciar nosso service worker. Nossos aprendizados abaixo às vezes refletem isso. Acesse [Armadilhas para service workers não gerados](#pitfalls) para ler mais.
+
+### Nem todas as bibliotecas são compatíveis com service-workers {: #libraries }
+
+Algumas bibliotecas JS fazem suposições que não funcionam conforme o esperado quando executadas por um service worker. Por exemplo, supondo que `window` ou `document` estejam disponíveis, ou usando uma API não disponível para service workers ( `XMLHttpRequest` , armazenamento local, etc). Certifique-se de que todas as bibliotecas críticas de que você precisa para o seu aplicativo sejam compatíveis com o service worker. Para este PWA específico, queríamos usar [gapi.js](https://github.com/google/google-api-javascript-client) na autenticação, mas não foi possível porque ele não tinha suporte a service workers. Os autores da biblioteca também devem reduzir ou remover suposições desnecessárias sobre o contexto do JavaScript, sempre que possível, para dar suporte aos casos de uso do service worker, como evitar APIs incompatíveis com o service worker e [evitar o estado global](#global-state).
+
+### Evite acessar a IndexedDB durante a inicialização {: #idb }
+
+Não leia a [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ao inicializar seu script de service worker, ou então você pode entrar nesta situação indesejada:
+
+1. O usuário possui aplicativo da web com IndexedDB (IDB) versão N
+2. Novo aplicativo da web lançado com versão N+1 do BID
+3. O usuário visita o PWA, que aciona o download de um novo service worker
+4. Novo service worker lê do BID antes de registrar o `install`, acionando um ciclo de atualização do BID para ir de N para N+1.
+5. Como o usuário tem um cliente antigo com a versão N, o processo de atualização do service worker trava, pois as conexões ativas ainda estão abertas para a versão antiga do banco de dados
+6. O service worker trava e nunca instala
+
+Em nosso caso, o cache foi invalidado na instalação do service worker, portanto, se o service worker nunca foi instalado, os usuários jamais receberam o aplicativo atualizado.
+
+### Torne-o resiliente {: #resilient }
+
+Embora os scripts do service worker sejam executados em segundo plano, eles também podem ser encerrados a qualquer momento, mesmo quando no meio de operações de E/S (rede, BID etc.). Qualquer processo de longa execução deve ser recuperável a qualquer instante.
+
+No caso de um processo de sincronização que carregava arquivos grandes no servidor e salvos no BID, nossa solução para carregamentos parciais interrompidos era aproveitar as vantagens do sistema recuperável de nossa biblioteca interna de upload, salvando o URL de upload recuperável para o BID antes do upload e usando esse URL para retomar um upload, caso não tenha sido concluído da primeira vez. Além disso, antes de qualquer operação de E/S de longa duração, o estado foi salvo no IDB para indicar em que parte do processo estávamos para cada registro.
+
+### Não dependa do estado global {: #global-state }
+
+Como os service workers existem em um contexto diferente, muitos símbolos que você espera que existam não estão presentes. Muito do nosso código foi executado em um `window`, bem como um contexto de service-worker (como registro, sinalizadores, sincronização etc.). O código precisa ser defensivo sobre os serviços que usa, como armazenamento local ou cookies. Você pode usar [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis) para se referir ao objeto global de uma maneira que funcione em todos os contextos. Use também os dados armazenados em variáveis globais com moderação, pois não há garantia de quando o script será encerrado e o estado despejado.
+
+### Desenvolvimento local {: #local-development }
+
+Um dos principais componentes dos service workers é o armazenamento em cache de recursos localmente. No entanto, durante o desenvolvimento, isso é exatamente o *oposto* do que você deseja, principalmente quando as atualizações são feitas lentamente. Você ainda deseja que o servidor de trabalho seja instalado para poder depurar problemas com ele ou trabalhar com outras APIs, como sincronização em segundo plano ou notificações. No Chrome, você pode fazer isso por meio do Chrome DevTools habilitando a caixa de seleção **Ignorar para rede**, **(painel Aplicativo** &gt; painel **Service workers** ), além de habilitar a caixa de seleção **Desabilitar cache** no painel **Rede** para desabilitar também o cache de memória. A fim de abranger mais navegadores, optamos por uma solução diferente, incluindo um sinalizador para desativar o cache em nosso service worker, que é ativado por padrão em compilações de desenvolvedor. Isso garante que os desenvolvedores sempre obtenham as alterações mais recentes sem problemas de cache. Também é importante incluir o `Cache-Control: no-cache` para [evitar que o navegador armazene quaisquer ativos em cache](/http-cache/#unversioned-urls).
+
+### Lighthouse {: #lighthouse }
+
+O [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) fornece várias ferramentas de depuração úteis para PWAs. Ele verifica um site e gera relatórios que abrangem PWAs, desempenho, acessibilidade, SEO e outras práticas recomendadas. Recomendamos [executar o Lighthouse em integração contínua](https://github.com/GoogleChrome/lighthouse-ci) para alertá-lo se você quebrar um dos critérios para ser um PWA. Na verdade, isso aconteceu conosco uma vez em que o service worker não estava instalando e não percebemos antes de um impulso para produção. Ter o Lighthouse como parte da nossa CI teria evitado isso.
+
+### Adote a entrega contínua {: #continuous-delivery }
+
+Como os service workers podem atualizar automaticamente, os usuários não conseguem limitar as atualizações. Isso reduz significativamente a quantidade de clientes desatualizados já publicados. Quando o usuário abrisse nosso aplicativo, o service worker serviria o cliente antigo enquanto baixava o novo cliente vagarosamente. Após o download do novo cliente, ele solicitaria que o usuário atualizasse a página para acessar os novos recursos. Mesmo se o usuário ignorasse essa solicitação, na próxima vez que atualizasse a página, receberia a nova versão do cliente. Como resultado, é muito difícil para um usuário recusar atualizações da mesma forma que pode para aplicativos iOS/Android.
+
+Conseguimos realizar alterações de back-end com um tempo de migração muito curto para os clientes. Normalmente, daríamos um mês para que os usuários atualizassem para clientes mais novos antes de fazer alterações significativas. Como o aplicativo seria disponibilizado enquanto estava desatualizado, era de fato possível que clientes mais antigos existissem se o usuário não abrisse o aplicativo por muito tempo. No iOS, os service workers são [despejados após algumas semanas](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/#post-10218:~:text=7%2DDay%20Cap%20on%20All%20Script%2DWriteable%20Storage), portanto, esse caso não acontece. Para o Android, esse problema pode ser atenuado não disponibilizando enquanto estiver desatualizado ou expirando manualmente o conteúdo após algumas semanas. Na prática, nunca encontramos problemas com clientes obsoletos. O grau de rigidez de uma determinada equipe depende de seu caso de uso específico, mas os PWAs oferecem muito mais flexibilidade do que os aplicativos iOS/Android.
+
+### Obtendo valores de cookie em um service worker {: #cookies }
+
+Às vezes, é necessário acessar os valores dos cookies em um contexto de service worker. Em nosso caso, precisávamos acessar os valores do cookie para gerar um token para autenticar as solicitações de API primárias. Em um service worker, APIs síncronas, como `document.cookies` não estão disponíveis. Você sempre pode enviar uma mensagem para clientes ativos (em janela) do service worker para solicitar os valores do cookie, embora seja possível para o service worker ser executado em segundo plano sem nenhum cliente em janela disponível, como durante uma sincronização em segundo plano. Para contornar isso, criamos um endpoint em nosso servidor front-end que simplesmente ecoava o valor do cookie de volta para o cliente. O service worker fazia uma solicitação de rede para este endpoint e lia a resposta para obter os valores do cookie.
+
+Com o lançamento da [API de armazenamento de cookies](https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies), essa solução alternativa não deve mais ser necessária para navegadores que a suportam, pois oferece acesso assíncrono aos cookies do navegador e pode ser usada diretamente pelo service worker.
+
+## Armadilhas para service workers não gerados {: #pitfalls}
+
+### Certifique-se de que o script do service worker mude se algum arquivo estático em cache for alterado {: #regeneration}
+
+Um padrão PWA comum é um service worker instalar todos os arquivos de aplicativos estáticos durante sua `install`, o que permite que os clientes acessem o cache da API de armazenamento em cache diretamente para todas as visitas subsequentes. Os service workers são instalados apenas quando o navegador detecta que o script do service worker mudou de alguma forma, portanto, tínhamos que garantir que o próprio arquivo de script do service worker mudasse de alguma forma quando um arquivo em cache fosse alterado. Fizemos isso manualmente incorporando um hash do conjunto de arquivos de recursos estáticos em nosso script do service worker, de forma que cada versão produzisse um arquivo JavaScript distinto do service worker. As bibliotecas de service workers, como [Workbox,](https://developer.chrome.com/docs/workbox/) automatizam esse processo para você.
+
+### Teste de unidades {: #unit-testing}
+
+As APIs de service workers funcionam adicionando ouvintes de eventos ao objeto global. Por exemplo:
+
+```js
+self.addEventListener('fetch', (evt) => evt.respondWith(fetch('/foo')));
+```
+
+Pode ser difícil testar isso porque você precisa simular o gatilho do evento, o objeto do evento, aguardar o `respondWith()` e, em seguida, aguardar a promise antes de finalmente afirmar o resultado. Uma maneira mais fácil de estruturar isso é delegar toda a implementação a outro arquivo, que é testado com mais facilidade.
+
+```js
+import fetchHandler from './fetch_handler.js';
+self.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));
+```
+
+Devido às dificuldades de testar a unidade de um script de service worker, mantivemos o script do service worker core o mais básico possível, dividindo a maior parte da implementação em outros módulos. Como esses arquivos eram apenas módulos JS padrão, eles poderiam ser mais facilmente testados em unidades com bibliotecas de teste padrão.
+
+## Fique ligado nas partes 2 e 3 {: #stay-tuned }
+
+Nas partes 2 e 3 desta série, falaremos sobre gerenciamento de mídia e problemas específicos do iOS. Se você quiser nos perguntar mais sobre a construção de um PWA no Google, visite nossos perfis de autor para saber como entrar em contato conosco:
+
+- [Joel](/authors/joelriley)
+- [Douglas](/authors/douglasparker)
+- [Dikla](/authors/msdikla)
diff --git a/src/site/content/pt/blog/building-a-settings-component/index.md b/src/site/content/pt/blog/building-a-settings-component/index.md
new file mode 100644
index 00000000000..e7055cee028
--- /dev/null
+++ b/src/site/content/pt/blog/building-a-settings-component/index.md
@@ -0,0 +1,688 @@
+---
+layout: post
+title: Como criar um componente de Configurações
+subhead: Uma visão geral básica de como construir um componente de configurações de controles deslizantes e caixas de seleção.
+authors:
+  - adamargyle
+description: Uma visão geral básica de como criar um componente de configurações de controles deslizantes e caixas de seleção.
+date: 2021-03-17
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/SUaxDTgOYvv2JXxaErBP.png
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zkv1FlI6dn82rJ104yBV.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+Nesta postagem, quero compartilhar o pensamento sobre a construção de um componente de configurações para a web que seja responsivo, ofereça suporte a várias entradas de dispositivo e funcione em vários navegadores. Experimente a [demonstração](https://gui-challenges.web.app/settings/dist/).
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/WuIwd9jPb30KmmnjJn75.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> <a href="https://gui-challenges.web.app/settings/dist/">Demonstração</a> </figcaption></figure>
+
+Se você preferir vídeo ou quiser uma prévia da IU/UX do que estamos criaindo, aqui está um passo a passo mais curto no YouTube:
+
+{% YouTube 'dm7gnp6eh3Q' %}
+
+## Visão geral
+
+Eu dividi os aspectos desse componente nas seguintes seções:
+
+1. [Layouts](#layouts)
+2. [Cor](#color)
+3. [Entrada de faixa personalizada](#custom-range)
+4. [Entrada de caixa de seleção personalizada](#custom-checkbox)
+5. [Considerações de acessibilidade](#accessibility)
+6. [JavaScript](#javascript)
+
+{% Aside 'gotchas' %} Os snippets CSS abaixo pressupõem PostCSS com [PostCSS Preset Env](https://preset-env.cssdb.org/features). A intenção é praticar desde o início e frequentemente com sintaxe nos primeiros rascunhos ou disponível experimentalmente em navegadores. Ou como o plugin gosta de dizer, "Use CSS de amanhã hoje". {% endAside %}
+
+## Layouts
+
+Esta é a primeira demonstração do Desafio de GUI **totalmente CSS Grid** ! Aqui está cada grade destacada com o [Chrome DevTools para grade](https://goo.gle/devtools-grid):
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/h6LZhScslprBcFol4gGp.png", alt="Contornos coloridos e sobreposições de espaçamento de lacunas que ajudam a mostrar todas as caixas que compõem o layout de configurações", width="800", height="563" %}
+
+{% Aside %} Para destacar seus layouts de grade:
+
+1. Abra o Chrome DevTools com `cmd+opt+i` ou `ctrl+alt+i`.
+2. Selecione a guia Layout ao lado da guia Estilos.
+3. Na seção Layouts de grade, verifique todos os layouts.
+4. Altere as cores de todos os layouts. {% endAside %}
+
+### Apenas para lacuna
+
+O layout mais comum:
+
+```css
+foo {
+  display: grid;
+  gap: var(--something);
+}
+```
+
+Eu chamo esse layout de "apenas para lacunas" porque ele só usa grade para adicionar lacunas entre os blocos.
+
+Cinco layouts usam essa estratégia, aqui estão todos eles exibidos:
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/zYWSVLzdtrh1K8p8yUuA.png", alt="Layouts de grade vertical destacados com contornos e preenchidos em lacunas", width="800", height="568" %}
+
+O `fieldset`, que contém cada grupo de entrada (`.fieldset-item`), está usando `gap: 1px` para criar as bordas finas entre os elementos. Nenhuma solução de borda complicada!
+
+<div class="switcher">
+{% Compare 'better', 'Filled gap' %}
+
+```css
+.grid {
+  display: grid;
+  gap: 1px;
+  background: var(--bg-surface-1);
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+  }
+}
+```
+
+{% endCompare %}
+
+{% Compare 'worse', 'Border trick' %}
+
+```css
+.grid {
+  display: grid;
+
+  & > .fieldset-item {
+    background: var(--bg-surface-2);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--bg-surface-1);
+    }
+  }
+}
+```
+{% endCompare %}
+</div>
+
+### Envolvimento de grade natural
+
+O layout mais complexo acabou sendo o layout de macro, o sistema lógico de layout entre `<main>` e `<form>`.
+
+#### Centrando o conteúdo da embalagem
+
+Flexbox e grade fornecem habilidades para `align-items` ou `align-content` e, ao lidar com elementos de empacotamento, os `content` distribuirão o espaço entre as crianças como um grupo.
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+}
+```
+
+O elemento principal é usar `place-content: center` [alinhamento atalho](https://developer.mozilla.org/docs/Web/CSS/place-content) para que os filhos sejam centralizados verticalmente e horizontalmente em layouts de uma e duas colunas.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IQI2PofA6gpNFUkDrvKo.mp4", autoplay="true", loop="true", muted="true" %}
+
+Assista no vídeo acima como o "conteúdo" permanece centralizado, mesmo que o empacotamento tenha ocorrido.
+
+#### Repetir ajuste automático mín. Máx
+
+O `<form>` usa um layout de grade adaptável para cada seção. Este layout muda de uma para duas colunas com base no espaço disponível.
+
+```css
+form {
+  display: grid;
+  gap: var(--space-xl) var(--space-xxl);
+  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
+  align-items: flex-start;
+  max-width: 89vw;
+}
+```
+
+Esta grade tem um valor diferente para `row-gap` (--space-xl) do que `column-gap` de coluna (--space-xxl) para colocar aquele toque personalizado no layout responsivo. Quando as colunas se empilham, queremos uma grande lacuna, mas não tão grande como se estivéssemos em uma tela ampla.
+
+A propriedade `grid-template-columns` usa 3 funções CSS: `repeat()`, `minmax()` e `min()`. [Una Kravets](#) tem um [ótimo post de layout](/one-line-layouts/) sobre isso, chamando-o de [RAM](/one-line-layouts/#07-ram-repeat,-auto,-minmax-grid-template-columnsauto-fit,-minmaxlessbasegreater,-1fr).
+
+Existem 3 adições especiais em nosso layout, se você compará-lo com o de Una:
+
+- Passamos uma função `min()`
+- Especificamos `align-items: flex-start`.
+- Há uma `max-width: 89vw` estilo 89vw.
+
+A função extra `min()` é bem descrita por Evan Minto em seu blog na postagem [Grade CSS com resposta intrínseca com minmax () e min ()](https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/). Eu recomendo dar uma olhada nisso. A `flex-start` é para remover o efeito de alongamento padrão, de forma que os filhos deste layout não precisem ter alturas iguais, eles podem ter alturas naturais intrínsecas. O vídeo do YouTube apresenta uma análise rápida dessa adição de alinhamento.
+
+`max-width: 89vw` vale uma pequena análise neste post. Deixe-me mostrar o layout com e sem o estilo aplicado:
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/gdldf7hyaBrHWwxQbSaT.mp4", autoplay="true", loop="true", muted="true" %}
+
+O que está acontecendo? Quando `max-width` é especificado, está fornecendo contexto, dimensionamento explícito ou [dimensionamento definitivo](https://drafts.csswg.org/css-sizing-3/#definite) para o [algoritmo de layout `auto-fit`](https://drafts.csswg.org/css-grid/#auto-repeat) para saber quantas repetições ele pode caber no espaço. Embora pareça óbvio que o espaço é "largura total", de acordo com as especificações da grade CSS, um tamanho definido ou tamanho máximo deve ser fornecido. Eu forneci um tamanho máximo.
+
+Então, por que `89vw`? Porque "funcionou" para o meu layout. Eu e algumas outras pessoas do Chrome estamos investigando por que um valor mais razoável, como `100vw` não é suficiente e se isso é de fato um bug.
+
+### Espaçamento
+
+A maior parte da harmonia desse layout vem de uma paleta limitada de espaçamentos, 7 para ser exato.
+
+```css
+:root {
+  --space-xxs: .25rem;
+  --space-xs:  .5rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-xxl: 6rem;
+}
+```
+
+O uso desses fluxos realmente bem com grade, [CSS @nest](https://drafts.csswg.org/css-nesting-1/) e [sintaxe de nível 5 de @media](https://drafts.csswg.org/mediaqueries-5/) . Aqui está um exemplo, o conjunto de estilos de layout `<main>`
+
+```css
+main {
+  display: grid;
+  gap: var(--space-xl);
+  place-content: center;
+  padding: var(--space-sm);
+
+  @media (width >= 540px) {
+    & {
+      padding: var(--space-lg);
+    }
+  }
+
+  @media (width >= 800px) {
+    & {
+      padding: var(--space-xl);
+    }
+  }
+}
+```
+
+Uma grade com conteúdo centralizado, moderadamente preenchido por padrão (como no celular). Porém, à medida que mais espaço na janela de visualização se torna disponível, ele se espalha aumentando o preenchimento. 2021 CSS está muito bom!
+
+Lembra-se do layout anterior, "apenas para lacuna"? Esta é uma versão mais completa de como eles se parecem neste componente:
+
+```css
+header {
+  display: grid;
+  gap: var(--space-xxs);
+}
+
+section {
+  display: grid;
+  gap: var(--space-md);
+}
+```
+
+## Cor
+
+O uso controlado de cores ajudou este design a se destacar como expressivo, mas mínimo. Eu faço assim:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --surface2: lch(15 0 0);
+  --surface3: lch(20 0 0);
+  --surface4: lch(25 0 0);
+
+  --text1: lch(95 0 0);
+  --text2: lch(75 0 0);
+}
+```
+
+{% Aside 'key-term' %} O [plugin PostCSS `lab()` e `lch()`](https://github.com/csstools/postcss-lab-function) faz parte do [PostCSS Preset Env](https://preset-env.cssdb.org/features#lch-function) e produzirá cores `rgb()` {% endAside %}
+
+Eu nomeio minhas cores de superfície e de texto com números em vez de nomes como `surface-dark` e `surface-darker` porque em uma consulta de mídia, estarei invertendo-as, e claro e escuro não serão significativos.
+
+Eu os lanço em uma consulta de mídia preferencial como esta:
+
+```css
+:root {
+  ...
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --surface2: lch(100 0 0);
+      --surface3: lch(98 0 0);
+      --surface4: lch(85 0 0);
+
+      --text1: lch(20 0 0);
+      --text2: lch(40 0 0);
+    }
+  }
+}
+```
+
+{% Aside 'key-term' %} [O plug `@nest`](https://github.com/csstools/postcss-nesting) faz parte do [PostCSS Preset Env](https://preset-env.cssdb.org/features) e irá expandir os seletores para uma sintaxe compatível com os navegadores atualmente. {% endAside %}
+
+É importante ter uma visão rápida do quadro geral e da estratégia antes de mergulhar nos detalhes da sintaxe de cores. Mas, como me adiantei um pouco, deixe-me recuar um pouco.
+
+### LCH?
+
+Sem se aprofundar muito na teoria da cor, o LCH é uma sintaxe orientada para o ser humano, que define como percebemos a cor, não como medimos a cor com matemática (como 255). Isso dá a ele uma vantagem distinta, pois os humanos podem escrever mais facilmente e outros humanos estarão em sintonia com esses ajustes.
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/160dWLSrMhFISwWMVd4w.png", alt="Uma captura de tela da página da web pod.link/csspodcast, com cor 2: episódio de percepção aumentado", width="800", height="329" %} <figcaption> Saiba mais sobre cores perceptuais (e muito mais!) No <a href="https://pod.link/thecsspodcast">Podcast CSS</a> </figcaption></figure>
+
+Por hoje, nesta demonstração, vamos nos concentrar na sintaxe e nos valores que estou mudando para tornar claro e escuro. Vejamos 1 superfície e 1 cor de texto:
+
+```css
+:root {
+  --surface1: lch(10 0 0);
+  --text1:    lch(95 0 0);
+
+  @media (prefers-color-scheme: light) {
+    & {
+      --surface1: lch(90 0 0);
+      --text1:    lch(40 0 0);
+    }
+  }
+}
+```
+
+`--surface1: lch(10 0 0)` traduz em `10%` luminosidade, 0 croma e 0 matiz: um cinza incolor muito escuro. Então, na consulta de mídia para o modo de luz, a luminosidade é invertida para `90%` com `--surface1: lch(90 0 0);`. E essa é a essência da estratégia. Comece mudando apenas a leveza entre os 2 temas, mantendo as taxas de contraste que o design exige ou o que pode manter a acessibilidade.
+
+O bônus com `lch()` aqui é que a leveza é orientada para o ser humano, e podemos nos sentir bem com uma `%` mudança nela, que será perceptiva e consistentemente essa `%` diferente. `hsl()` por exemplo [não é tão confiável](https://twitter.com/argyleink/status/1201908189257555968) .
+
+Há [mais para aprender](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) sobre espaços de cores e `lch()` se você estiver interessado. Está chegando!
+
+{% Blockquote 'Lea Verou' %} CSS no momento **não pode acessar essas cores**. Vou repetir: **não temos acesso a um terço das cores na maioria dos monitores modernos.** E não são quaisquer cores, mas as **cores mais vivas que a tela pode exibir**. Nossos sites foram destruídos porque o hardware do monitor evoluiu mais rápido do que as especificações CSS e as implementações de navegador. {% endBlockquote %}
+
+### Controles de forma adaptáveis com esquema de cores
+
+Muitos navegadores fornecem controles de tema escuro, atualmente Safari e Chromium, mas você deve especificar em CSS ou HTML que seu design os utiliza.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/0VVtEAWM6jHeIxahqnFy.mp4", autoplay="true", loop="true", muted="true" %}
+
+O exemplo acima está demonstrando o efeito da propriedade do painel Estilos do DevTools. A demonstração usa a tag HTML, que, em minha opinião, geralmente é um local melhor:
+
+```html
+<meta name="color-scheme" content="dark light">
+```
+
+Saiba tudo sobre isso neste [artigo sobre `color-scheme`](/color-scheme/) [Thomas Steiner](/authors/thomassteiner/). Há muito mais a ganhar do que entradas de caixa de seleção escura!
+
+### `accent-color` CSS
+
+Tem havido [atividade recente em](https://twitter.com/argyleink/status/1360022120810483715?s=20) torno `accent-color` em elementos de formulário, sendo um único estilo CSS que pode alterar a cor da tonalidade usada no elemento de entrada do navegador. Leia mais sobre isso [aqui no GitHub](https://github.com/w3c/csswg-drafts/issues/5187). Eu o incluí em meus estilos para este componente. Como os navegadores o suportam, minhas caixas de seleção estarão mais focadas no tema com os pop-ups de cor rosa e roxo.
+
+```css
+input[type="checkbox"] {
+  accent-color: var(--brand);
+}
+```
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J9pbhB0ImoDzbsXkBGtG.png", alt="Uma captura de tela do Chromium no Linux de caixas de seleção rosa", width="800", height="406" %}
+
+### A cor se destaca com gradientes fixos e foco interno
+
+As cores aparecem mais quando usadas com moderação, e uma das maneiras que gosto de conseguir isso é por meio de interações coloridas da interface do usuário.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pm75QwVToKkiqedqPtmm.mp4", autoplay="true", loop="true", muted="true", width="480px" %}
+
+Existem muitas camadas de feedback e interação da IU no vídeo acima, que ajudam a dar personalidade à interação ao:
+
+- Destacando o contexto.
+- Fornecer feedback da IU sobre "quão cheio" o valor está no intervalo.
+- Fornecer feedback da IU de que um campo está aceitando entrada.
+
+Para fornecer feedback quando um elemento está sendo interagido, CSS está usando a [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within) para alterar a aparência de vários elementos, vamos detalhar `.fieldset-item`, é muito interessante:
+
+```css
+.fieldset-item {
+  ...
+
+  &:focus-within {
+    background: var(--surface2);
+
+    & svg {
+      fill: white;
+    }
+
+    & picture {
+      clip-path: circle(50%);
+      background: var(--brand-bg-gradient) fixed;
+    }
+  }
+}
+```
+
+Quando um dos filhos deste elemento tem foco em:
+
+1. O `.fieldset-item` é atribuído a uma cor de superfície de maior contraste.
+2. O `svg` aninhado é preenchido com branco para maior contraste.
+3. `clip-path` `<picture>` aninhado se expande para um círculo completo e o fundo é preenchido com o gradiente fixo brilhante.
+
+## Intervalo personalizado
+
+Dado o seguinte elemento de entrada HTML, mostrarei como personalize sua aparência:
+
+```html
+<input type="range">
+```
+
+Existem 3 partes neste elemento que precisamos personalizar:
+
+1. [Elemento / recipiente de intervalo](#range-element-styles)
+2. [Acompanhar](#track-styles)
+3. [Polegar](#thumb-styles)
+
+### Estilos de elemento de intervalo
+
+```css
+input[type="range"] {
+  /* style setting variables */
+  --track-height: .5ex;
+  --track-fill: 0%;
+  --thumb-size: 3ex;
+  --thumb-offset: -1.25ex;
+  --thumb-highlight-size: 0px;
+
+  appearance: none;         /* clear styles, make way for mine */
+  display: block;
+  inline-size: 100%;        /* fill container */
+  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
+  background: transparent;  /* bg is in the track */
+  outline-offset: 5px;      /* focus styles have space */
+}
+```
+
+As primeiras linhas do CSS são as partes personalizadas dos estilos e espero que rotulá-las claramente ajude. O restante dos estilos são, em sua maioria, estilos de redefinição, para fornecer uma base consistente para a construção das partes complicadas do componente.
+
+### Estilos de trilha
+
+```css
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none; /* clear styles, make way for mine */
+  block-size: var(--track-height);
+  border-radius: 5ex;
+  background:
+    /* hard stop gradient:
+        - half transparent (where colorful fill we be)
+        - half dark track fill
+        - 1st background image is on top
+    */
+    linear-gradient(
+      to right,
+      transparent var(--track-fill),
+      var(--surface1) 0%
+    ),
+    /* colorful fill effect, behind track surface fill */
+    var(--brand-bg-gradient) fixed;
+}
+```
+
+O truque para isso é "revelar" a cor de preenchimento vibrante. Isso é feito com o gradiente de parada rígida no topo. O gradiente é transparente até a porcentagem de preenchimento e, depois disso, usa a cor da superfície da trilha não preenchida. Por trás dessa superfície não preenchida, está uma cor de largura total, esperando pela transparência para revelá-la.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/aiAL28AkDRZvaAZNEbW8.mp4", autoplay="true", loop="true", muted="true" %}
+
+#### Estilo de preenchimento de trilha
+
+Meu design **requer JavaScript** para manter o estilo de preenchimento. Existem apenas estratégias de CSS, mas elas exigem que o elemento thumb tenha a mesma altura da trilha, e não consegui encontrar uma harmonia dentro desses limites.
+
+```js
+/* grab sliders on page */
+const sliders = document.querySelectorAll('input[type="range"]')
+
+/* take a slider element, return a percentage string for use in CSS */
+const rangeToPercent = slider => {
+  const max = slider.getAttribute('max') || 10;
+  const percent = slider.value / max * 100;
+
+  return `${parseInt(percent)}%`;
+};
+
+/* on page load, set the fill amount */
+sliders.forEach(slider => {
+  slider.style.setProperty('--track-fill', rangeToPercent(slider));
+
+  /* when a slider changes, update the fill prop */
+  slider.addEventListener('input', e => {
+    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
+  })
+})
+```
+
+Eu acho que isso é uma boa atualização visual. O controle deslizante funciona muito bem sem JavaScript, o `--track-fill` prop não é necessário, ele simplesmente não terá um estilo de preenchimento se não estiver presente. Se o JavaScript estiver disponível, preencha a propriedade customizada enquanto também observa as alterações do usuário, sincronizando a propriedade customizada com o valor.
+
+[Aqui está um ótimo post](https://css-tricks.com/sliding-nightmare-understanding-range-input/) sobre [CSS-Tricks](https://css-tricks.com/) por [Ana Tudor](https://twitter.com/anatudor), que demonstra uma solução única de CSS para preenchimento de faixas. Também achei este [elemento `range`](https://app.native-elements.dev/editor/elements/range) muito inspirador.
+
+### Estilos de polegar
+
+```css
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none; /* clear styles, make way for mine */
+  cursor: ew-resize; /* cursor style to support drag direction */
+  border: 3px solid var(--surface3);
+  block-size: var(--thumb-size);
+  inline-size: var(--thumb-size);
+  margin-top: var(--thumb-offset);
+  border-radius: 50%;
+  background: var(--brand-bg-gradient) fixed;
+}
+```
+
+A maioria desses estilos são para fazer um bom círculo. Novamente, você vê o gradiente de fundo fixo que unifica as cores dinâmicas dos polegares, trilhas e elementos SVG associados. Separei os estilos para a interação para ajudar a isolar a `box-shadow` que está sendo usada para o destaque flutuante:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+::-webkit-slider-thumb {
+  …
+
+  /* shadow spread is initally 0 */
+  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
+
+  /* if motion is OK, transition the box-shadow change */
+  @media (--motionOK) {
+    & {
+      transition: box-shadow .1s ease;
+    }
+  }
+
+  /* on hover/active state of parent, increase size prop */
+  @nest input[type="range"]:is(:hover,:active) & {
+    --thumb-highlight-size: 10px;
+  }
+}
+```
+
+{% Aside 'key-term' %} [@ custom-media](https://drafts.csswg.org/mediaqueries-5/#custom-mq) é uma adição de especificação de nível 5 que [PostCSS Custom Media](https://github.com/postcss/postcss-custom-media), parte do [PostCSS Preset Env](https://preset-env.cssdb.org/features). {% endAside %}
+
+O objetivo era um destaque visual animado e fácil de gerenciar para o feedback do usuário. Ao usar uma sombra de caixa, posso evitar o [disparo de layout](/animations-guide/#triggers) com o efeito. Eu faço isso criando uma sombra que não é desfocada e corresponde à forma circular do elemento polegar. Então eu mudo e transito seu tamanho de propagação ao pairar.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/s835RbH88L5bxjl5bMFl.mp4", autoplay="true", loop="true", muted="true" %}
+
+Se ao menos o efeito de realce fosse tão fácil nas caixas de seleção…
+
+### Seletores de vários navegadores
+
+Descobri que precisava desses `-webkit-` e `-moz-` para obter consistência entre navegadores:
+
+```css
+input[type="range"] {
+  &::-webkit-slider-runnable-track {}
+  &::-moz-range-track {}
+  &::-webkit-slider-thumb {}
+  &::-moz-range-thumb {}
+}
+```
+
+{% Aside 'gotchas' %} [Josh Comeau](https://twitter.com/JoshWComeau) descreve por que os exemplos acima não usam simplesmente uma vírgula entre os seletores para o estilo do navegador cruzado, consulte o [tópico](https://twitter.com/JoshWComeau/status/1359213591602335752?s=20) do Twitter para obter mais informações. {% endAside %}
+
+## Caixa de seleção personalizada
+
+Dado o seguinte elemento de entrada HTML, mostrarei como personalize sua aparência:
+
+```html
+<input type="checkbox">
+```
+
+Existem 3 partes neste elemento que precisamos personalizar:
+
+1. [Elemento de caixa de seleção](#checkbox-element)
+2. [Rótulos associados](#checkbox-labels)
+3. [Efeito de destaque](#checkbox-highlight)
+
+### Elemento de caixa de seleção
+
+```css
+input[type="checkbox"] {
+  inline-size: var(--space-sm);   /* increase width */
+  block-size: var(--space-sm);    /* increase height */
+  outline-offset: 5px;            /* focus style enhancement */
+  accent-color: var(--brand);     /* tint the input */
+  position: relative;             /* prepare for an absolute pseudo element */
+  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
+  margin: 0;
+  cursor: pointer;
+}
+```
+
+O `transform-style` e os `position` preparam para o pseudo-elemento que apresentaremos mais tarde para estilizar o destaque. Caso contrário, é principalmente algo de estilo opinativo menor de mim. Gosto que o cursor seja um ponteiro, gosto de deslocamentos de contorno, as caixas de seleção padrão são muito pequenas e, se houver [suporte](https://drafts.csswg.org/css-ui-4/#widget-accent) `accent-color` destaque, traga essas caixas de seleção para o esquema de cores da marca.
+
+### Rótulos de caixa de seleção
+
+É importante fornecer rótulos para as caixas de seleção por dois motivos. A primeira é representar para que o valor da caixa de seleção é usado, para responder "ligado ou desligado para quê?" O segundo é para UX, os usuários da web se acostumaram a interagir com as caixas de seleção por meio de seus rótulos associados.
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/7GYIFNjNCBdj13juFO7S.mp4", autoplay="true", loop="true", muted="true" %}
+
+<div class="switcher">{% Compare 'better', 'input' %}</div>
+<pre data-md-type="block_code" data-md-language="html"><code class="language-html">&lt;input
+  type="checkbox"
+  id="text-notifications"
+  name="text-notifications"
+&gt;
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'label' %}</p>
+<pre data-md-type="block_code" data-md-language="html"><code class="language-html">&lt;label for="text-notifications"&gt;
+  &lt;h3&gt;Text Messages&lt;/h3&gt;
+  &lt;small&gt;Get notified about all text messages sent to your device&lt;/small&gt;
+&lt;/label&gt;
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+Em seu rótulo, coloque um `for` que aponta para uma caixa de seleção por ID: `<label for="text-notifications">`. Em sua caixa de seleção, dobre o nome e a id para garantir que sejam encontrados com várias ferramentas e tecnologias, como um mouse ou leitor de tela: `<input type="checkbox" id="text-notifications" name="text-notifications">`. `:hover` `:active` e mais vêm de graça com a conexão, aumentando as formas de interação com o seu formulário.
+
+### Destaque da caixa de seleção
+
+Eu quero manter minhas interfaces consistentes, e o elemento deslizante tem um bom destaque em miniatura que eu gostaria de usar com a caixa de seleção. A miniatura foi capaz de usar `box-shadow` e sua `spread` para escalar uma sombra para cima e para baixo. No entanto, esse efeito não funciona aqui porque nossas caixas de seleção são, [e deveriam ser](https://twitter.com/argyleink/status/1329230409784291328?s=20), quadradas.
+
+Consegui obter o mesmo efeito visual com um pseudoelemento e uma quantidade infeliz de CSS complicado:
+
+```css
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+
+input[type="checkbox"]::before {
+  --thumb-scale: .01;                        /* initial scale of highlight */
+  --thumb-highlight-size: var(--space-xl);
+
+  content: "";
+  inline-size: var(--thumb-highlight-size);
+  block-size: var(--thumb-highlight-size);
+  clip-path: circle(50%);                     /* circle shape */
+  position: absolute;                         /* this is why position relative on parent */
+  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css/#5-pop-and-plop) */
+  left: 50%;
+  background: var(--thumb-highlight-color);
+  transform-origin: center center;            /* goal is a centered scaling circle */
+  transform:                                  /* order here matters!! */
+    translateX(-50%)                          /* counter balances left: 50% */
+    translateY(-50%)                          /* counter balances top: 50% */
+    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
+    scale(var(--thumb-scale))                 /* value we toggle for animation */
+  ;
+  will-change: transform;
+
+  @media (--motionOK) {                       /* transition only if motion is OK */
+    & {
+      transition: transform .2s ease;
+    }
+  }
+}
+
+/* on hover, set scale custom property to "in" state */
+input[type="checkbox"]:hover::before {
+  --thumb-scale: 1;
+}
+```
+
+Criar um círculo psuedo-elemento é um trabalho simples, mas **colocá-lo atrás do elemento ao qual está anexado** foi mais difícil. Aqui está o antes e depois de eu consertar:
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Spdpw5P1MD8ceazneRXo.mp4", autoplay="true", loop="true", muted="true" %}
+
+É definitivamente uma micro interação, mas importante para mim manter a consistência visual. A técnica de dimensionamento da animação é a mesma que temos usado em outros lugares. Definimos uma propriedade personalizada com um novo valor e permitimos a transição do CSS com base nas preferências de movimento. O principal recurso aqui é `translateZ(-1px)`. O pai criou um espaço 3D e este filho de pseudoelemento aproveitou-se dele colocando-se ligeiramente para trás no espaço z.
+
+## Acessibilidade
+
+O vídeo do YouTube é uma ótima demonstração das interações do mouse, teclado e leitor de tela para este componente de configurações. Vou citar alguns dos detalhes aqui.
+
+### Opções de elemento HTML
+
+```html
+<form>
+<header>
+<fieldset>
+<picture>
+<label>
+<input>
+```
+
+Cada um deles contém dicas e sugestões para a ferramenta de navegação do usuário. Alguns elementos fornecem dicas de interação, alguns conectam a interatividade e alguns ajudam a moldar a árvore de acessibilidade em que um leitor de tela navega.
+
+### Atributos HTML
+
+Podemos ocultar elementos que não são necessários aos leitores de tela, neste caso o ícone ao lado do controle deslizante:
+
+```html
+<picture aria-hidden="true">
+```
+
+{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/fVjqHRZHQixAaxjeAvDP.mp4", autoplay="true", loop="true", muted="true", width="480px" %}
+
+O vídeo acima demonstra o fluxo do leitor de tela no Mac OS. Observe como o foco de entrada se move direto de um controle deslizante para o próximo. Isso ocorre porque ocultamos o ícone que pode ter sido uma parada no caminho para o próximo controle deslizante. Sem este atributo, um usuário precisaria parar, ouvir e mover-se além da imagem que ele pode não ser capaz de ver.
+
+{% Aside 'gotchas' %} Lembre-se de fazer o teste cruzado das interações do leitor de tela do navegador. A demonstração original incluía `<label>` na lista de elementos com `aria-hidden="true"`, mas foi removido depois que uma [conversa no Twitter](https://twitter.com/rob_dodson/status/1371859386210029568) revelou diferenças entre navegadores. {% endAside %}
+
+O SVG é um monte de matemática, vamos adicionar um `<title>` para um título de mouse flutuante livre e um comentário legível por humanos sobre o que a matemática está criando:
+
+```html
+<svg viewBox="0 0 24 24">
+  <title>A note icon</title>
+  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+</svg>
+```
+
+Além disso, usamos HTML claramente marcado o suficiente para que o formulário seja testado muito bem em mouse, teclado, controladores de videogame e leitores de tela.
+
+## JavaScript
+
+Já [cobri](#track-styles) como a cor de preenchimento da trilha estava sendo gerenciada a partir de JavaScript, então vamos dar uma olhada no JavaScript relacionado `<form>`
+
+```js
+const form = document.querySelector('form');
+
+form.addEventListener('input', event => {
+  const formData = Object.fromEntries(new FormData(form));
+  console.table(formData);
+})
+```
+
+Sempre que o formulário é interagido e alterado, o console registra o formulário como um objeto em uma tabela para fácil revisão antes de enviá-lo a um servidor.
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hFAyIOpOSdiczdf4AtIj.png", alt="Uma captura de tela dos resultados de console.table (), onde os dados do formulário são mostrados em uma tabela", width="800", height="285" %}
+
+## Conclusão
+
+Agora que você sabe como eu fiz, como você faria?! Isso torna a arquitetura de componentes divertida! Quem vai fazer a 1ª versão com slots em seu framework favorito? 🙂
+
+Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Crie uma demonstração, [envie um tuíte para mim](https://twitter.com/argyleink) e eu irei adicioná-la à seção de [remixes da comunidade](#community-remixes) abaixo!
+
+## Remixes da comunidade
+
+- [@tomayac](https://twitter.com/tomayac) com seu estilo em relação à área de foco para os rótulos das caixas de seleção! Esta versão não tem lacuna entre os elementos: [demonstração](https://tomayac.github.io/gui-challenges/settings/dist/) e [código-fonte](https://github.com/tomayac/gui-challenges).
diff --git a/src/site/content/pt/blog/building-a-tabs-component/index.md b/src/site/content/pt/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..8149f9805fb
--- /dev/null
+++ b/src/site/content/pt/blog/building-a-tabs-component/index.md
@@ -0,0 +1,572 @@
+---
+layout: post
+title: Como construir um componente de abas
+subhead: Uma visão geral básica de como construir um componente de abas semelhante aos encontrados em aplicativos iOS e Android.
+authors:
+  - adamargyle
+description: Uma visão geral básica de como construir um componente de abas semelhante aos encontrados em aplicativos iOS e Android.
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+Nesta postagem, quero compartilhar ideias sobre a construção de um componente de abas para a web que seja responsivo, ofereça suporte a variadas entradas de dispositivo e funcione em múltiplos navegadores. Experimente a [demonstração](https://gui-challenges.web.app/tabs/dist/).
+
+<figure data-size="full">   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4",     autoplay="true",     loop="true",     muted="true"   %}   <figcaption>     <a href="https://gui-challenges.web.app/tabs/dist/">Demo</a>   </figcaption></figure>
+
+Se você preferir vídeo, aqui está uma versão desta postagem no YouTube:
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## Visão geral
+
+As abas são um componente comum dos sistemas de design, mas podem assumir muitas formas e formatos. Primeiro, havia abas de desktop construídas no elemento `<frame>` e agora temos componentes móveis que animam o conteúdo com base em propriedades físicas. Todos estão tentando fazer a mesma coisa: economizar espaço.
+
+Hoje, o essencial da experiência do usuário com abas é uma área de navegação de botão que alterna a visibilidade do conteúdo em um frame de exibição. Muitas áreas de conteúdo diferentes compartilham o mesmo espaço, mas são apresentadas condicionalmente com base no botão selecionado na navegação.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png",     alt="a colagem é bastante caótica devido à grande variedade de estilos que passaram a ser chamados componente pela web",     width="800", height="500"   %}   <figcaption>     Uma colagem de estilos de web design de componentes de aba, dos últimos 10 anos  </figcaption></figure>
+
+## Táticas da Web
+
+Resumindo, achei esse componente muito simples de construir, graças a alguns recursos essenciais da plataforma web:
+
+- `scroll-snap-points` para interações elegantes de deslizamento e teclado com posições de parada de rolagem apropriadas
+- [Links profundos](https://en.wikipedia.org/wiki/Deep_linking) por meio de hashes de URL para suporte de ancoragem e compartilhamento de rolagem in-page manipulada por navegador
+- Suporte para leitor de tela com marcação de elemento `<a>` e `id="#hash"`
+- `prefers-reduced-motion` para permitir transições crossfade e rolagem instantânea na página
+- O recurso da web in-draft `@scroll-timeline` para sublinhar dinamicamente e alterar a cor da aba selecionada
+
+### O HTML {: #markup }
+
+Basicamente, a UX aqui consiste em: clique em um link, faça com que a URL represente o estado da página aninhada e, em seguida, veja a atualização da área de conteúdo conforme o navegador rola para o elemento correspondente.
+
+Lá dentro existem alguns membros de conteúdo estrutural: links e `:target`s. Precisamos de uma lista de links, para os quais um `<nav>` é perfeito, e uma lista de elementos `<article>`, para os quais uma `<section>` é excelente. Cada hash de link corresponderá a uma seção, permitindo que o navegador role as coisas por meio da ancoragem.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4",     autoplay="true",     loop="true",     muted="true"   %}   <figcaption>     Um botão de link é clicado, fazendo o conteúdo em foco ocupar a viewport   </figcaption></figure>
+
+Por exemplo, clicar em um link direciona automaticamente o artigo destino `:target` no Chrome 89, sem necessidade de usar JS. O usuário pode então rolar o conteúdo do artigo com seu dispositivo de entrada como sempre. É um conteúdo complementar, conforme indicado na marcação.
+
+Usei a marcação abaixo para organizar as abas:
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+Posso estabelecer conexões entre os elementos `<a>` e `<article>` com as `href` e `id` assim:
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+Em seguida, preenchi os artigos com quantidades variadas de lorem e os links com um comprimento variado um conjunto de títulos de imagem. Com conteúdo para trabalhar, podemos começar o layout.
+
+### Layouts de rolagem {: #overscroll}
+
+Existem 3 tipos diferentes de áreas de rolagem neste componente:
+
+- A navegação <b style="color: #FF00E2;">(rosa)</b> é rolável horizontalmente
+- A área de conteúdo <b style="color: #008CFF;">(azul)</b> é rolável horizontalmente
+- Cada item de artigo <b style="color: #2FD800;">(verde)</b> pode ser rolado verticalmente.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png",     alt="3 caixas coloridas com setas direcionais, correspondentes a cores, que contornam as áreas de rolagem e mostram a direção em que irão rolar.",     width="800", height="450"   %}</figure>
+
+Existem 2 diferentes tipos de elementos envolvidos na rolagem:
+
+1. **Uma janela**<br> Uma caixa com dimensões definidas que possui a propriedade de estilo `overflow`.
+2. **Uma superfície superdimensionada**<br> Neste layout, são os containers da lista: links nav, artigos (article) de seção (section) e conteúdo do artigo.
+
+#### Layout `<snap-tabs>` {: #tabs-layout }
+
+O layout de nível superior que escolhi foi flex (Flexbox). Eu defino a direction como `column`, de forma que o cabeçalho e a seção são ordenados verticalmente. Esta é a nossa primeira janela de rolagem, e ela esconde tudo com overflow hidden. O cabeçalho (header) e a seção (section) usarão overscroll em breve, como zonas individuais.
+
+{% Compare 'better', 'HTML' %}
+
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* establish primary containing box */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* be pushy about consuming all space */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* defend against <section> needing 100% */
+    flex-shrink: 0;
+    /* fixes cross browser quarks */
+    min-block-size: fit-content;
+  }
+}
+```
+
+{% endCompare %}
+
+Apontando de volta ao diagrama colorido de 3 rolagens:
+
+- O `<header>` agora está preparado para ser o container de rolagem <b style="color: #FF00E2;">(rosa).</b>
+- O `<section>` está preparado para ser o container de rolagem <b style="color: #008CFF;">(azul).</b>
+
+Os frames que destaquei abaixo com [VisBug](https://a.nerdy.dev/gimme-visbug) nos ajudam a ver as **janelas** que foram criadas pelos containers de rolagem.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png",     alt="os elementos header e section têm sobreposições de hotpink, delineando o espaço que ocupam no componente",     width="800", height="620"   %}</figure>
+
+#### Layout de cabeçalho de abas `<header>` {: #tabs-header}
+
+O próximo layout é quase o mesmo: eu uso flex para criar ordenação vertical.
+
+<div class="switcher"> {% Compare 'better', 'HTML' %} ```html/1-4 &lt;snap-tabs&gt;   &lt;header&gt;     &lt;nav&gt;&lt;/nav&gt;     &lt;span class="snap-indicator"&gt;&lt;/span&gt;   &lt;/header&gt;   &lt;section&gt;&lt;/section&gt; &lt;/snap-tabs&gt; ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'CSS' %}</p>
+<pre data-md-type="block_code" data-md-language="css/1-2"><code class="language-css/1-2">header {
+  display: flex;
+  flex-direction: column;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+O `.snap-indicator` deve viajar horizontalmente junto com o grupo de links, e esse layout de cabeçalho ajuda a definir esse estágio. Nenhum elemento é posicionado de forma absoluta aqui!
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png",     alt="os elementos nav e span.indicator têm overlays hotpink, contornando o espaço que ocupam no componente",     width="800", height="368"   %}</figure>
+
+Em seguida, os estilos de rolagem. Acontece que podemos compartilhar os estilos de rolagem entre nossas 2 áreas de rolagem horizontal (header e section), então eu criei uma classe utilitária `.scroll-snap-x`.
+
+```css
+.scroll-snap-x {
+  /* browser decide if x is ok to scroll and show bars on, y hidden */
+  overflow: auto hidden;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  /* scrolling should snap children on x */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+Cada um precisa de overflow no eixo x, contenção de rolagem para travar o overscroll, barras de rolagem ocultas para dispositivos de toque e, por último, scroll-snap para bloquear áreas de apresentação de conteúdo. Nossa ordem de tabulação do teclado é acessível e qualquer aba de interação foca naturalmente. Os containers de snap de rolagem também recebem uma bela interação, no estilo carrossel, de seu teclado.
+
+#### Layout de cabeçalho de abas `<nav>` {: #tabs-header-nav }
+
+Os links nav precisam ser dispostos em uma linha, sem quebras de linha, centralizados verticalmente, e cada item de link deve se encaixar no container scroll-snap. É um trabalho rápido usando o CSS de 2021!
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+Cada link define seu tamanho e estilo, portanto, o layout nav só precisa especificar direção e fluxo. Larguras exclusivas em itens nav deixam a transição entre as abas divertida, já que o indicador ajusta sua largura para o novo destino. Dependendo de quantos elementos estiverem lá, o navegador irá renderizar uma barra de rolagem ou não.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png",     alt="os elementos a do nav têm overlays de hotpink, destacando o espaço que ocupam no componente, bem como onde eles transbordam",     width="800", height="327"   %}</figure>
+
+#### Layout de seção de abas `<section>` {: #tabs-section }
+
+Esta seção é um item flexível e precisa ser o consumidor dominante de espaço. Ele também precisa criar colunas para os artigos serem posicionados. Mais uma vez, um trabalho rápido para CSS de 2021! O `block-size: 100%` estica este elemento para preencher o pai tanto quanto for possível, então para seu próprio layout, ele cria uma série de colunas que são `100%` da largura do pai. As porcentagens funcionam muito bem aqui porque definimos fortes restrições para o pai.
+
+<div class="switcher"> {% Compare 'better', 'HTML' %} ```html/1-4 &lt;section&gt;   &lt;article&gt;&lt;/article&gt;   &lt;article&gt;&lt;/article&gt;   &lt;article&gt;&lt;/article&gt;   &lt;article&gt;&lt;/article&gt; &lt;/section&gt; ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'CSS' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+É como se estivéssemos dizendo "expanda verticalmente o máximo possível, de forma agressiva" (lembre-se do cabeçalho que definimos para `flex-shrink: 0` : é uma defesa contra esse impulso de expansão), que define a altura da linha para um conjunto de colunas de altura total. O estilo `auto-flow` diz à grade para sempre posicionar os filhos numa linha horizontal, sem quebra automática, exatamente o que queremos; para transbordar a janela pai.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png",     alt="os elementos article têm overlays hotpink neles, delineando o espaço que ocupam no componente e onde transbordam",     width="800", height="512"   %}</figure>
+
+Eu acho isso difícil de entender às vezes! Este elemento de seção cabe em uma caixa, mas também criou um conjunto de caixas. Espero que os recursos visuais e as explicações estejam ajudando.
+
+#### Layout de abas `<article>` {: #tabs-article }
+
+O usuário deve ser capaz de rolar o conteúdo do artigo, e as barras de rolagem só devem aparecer se houver overflow. Esses elementos do artigo estão numa posição organizada. Eles são simultaneamente um pai de rolagem e um filho de rolagem. O navegador está lidando aqui com algumas interações bem complicadas de toque, mouse e teclado.
+
+<div class="switcher"> {% Compare 'better', 'HTML' %} ```html &lt;article&gt;   &lt;h2&gt;&lt;/h2&gt;   &lt;p&gt;&lt;/p&gt;   &lt;p&gt;&lt;/p&gt;   &lt;h2&gt;&lt;/h2&gt;   &lt;p&gt;&lt;/p&gt;   &lt;p&gt;&lt;/p&gt;   ... &lt;/article&gt; ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'CSS' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+Eu escolhi fazer com que os artigos se encaixassem no rolador pai. Eu realmente gosto de como os itens do link de navegação e os elementos do artigo se encaixam no início inline de seus respectivos containers de rolagem. Parece um relacionamento harmonioso.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png",     alt="o elemento article e seus elementos filho têm overlays hotpink neles, delineando o espaço que ocupam no componente e a direção em que transbordam",     width="800", height="808"   %}</figure>
+
+O artigo é um filho da grade e seu tamanho é predeterminado para ser a área da janela de visualização para a qual desejamos fornecer a UX de rolagem. Isto significa que não preciso ter estilos de altura ou largura aqui, só preciso definir como ele transborda. Eu defino overflow-y como auto e, em seguida, também intercepto as interações de rolagem com a propriedade overscroll-behaviour.
+
+#### Recapitulação de 3 áreas de rolagem {: #scroll-areas-recap}
+
+Abaixo, escolhi nas configurações do meu sistema como "sempre mostrar as barras de rolagem". Acho que é duplamente importante para o layout funcionar com essa configuração ativada, assim como é para mim revisar o layout e a orquestração da rolagem.
+
+<figure>  {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png",     alt="as 3 barras de rolagem estão configuradas para aparecer, agora consumindo espaço de layout, e nosso componente ainda parece ótimo",     width="500", height="607"   %}</figure>
+
+Acho que ver a medianiz da barra de rolagem neste componente ajuda a mostrar claramente onde estão as áreas de rolagem, a direção que suportam e como elas interagem umas com as outras. Considere como cada uma desses frames de janela de rolagem também são pais flex ou de grid para um layout.
+
+O DevTools pode nos ajudar a visualizar isso:
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png",     alt="as áreas de rolamento têm overlays de ferramentas grid e flexbox overlays, delineando o espaço que ocupam no componente e a direção em que transbordam",     width="800", height="455"   %}   <figcaption>     Chromium Devtools, mostrando o elemento nav flexbox cheio de elementos âncora, o layout da grade criado pelo elemento section cheio de elementos article e os elementos article cheios de parágrafos e um elemento de cabeçalho.   </figcaption></figure>
+
+Os layouts de rolagem são completos, com snapping, links profundos e acessibilidade por teclado. Uma base sólida para aprimoramentos de UX, estilo e prazer.
+
+#### Destaque de recursos
+
+Elementos-filho ajustados com snap de rolagem mantêm sua posição travada durante o redimensionamento. Isto significa que o JavaScript não precisará trazer nada para a viewport ao girar o dispositivo ou redimensionar o navegador. Experimente o [Device Mode](https://developer.chrome.com/docs/devtools/device-mode/) no Chromium DevTools selecionando qualquer modo diferente de **Responsive** e redimensione o frame do dispositivo. Observe que o elemento permanece visível e bloqueado com seu conteúdo. Isto está disponível desde que o Chromium atualizou sua implementação para corresponder às especificações. Aqui está uma [postagem no blog](/snap-after-layout/) sobre isto.
+
+### Animação {: #animation}
+
+O objetivo do trabalho de animação aqui é vincular claramente as interações com o feedback da IU. Isto ajuda a orientar ou auxiliar o usuário em sua (esperada) descoberta perfeita de todo o conteúdo. Estarei adicionando movimento com propósito e de forma condicional. Os usuários agora podem especificar [suas preferências de movimento](/prefers-reduced-motion/) em seus sistemas operacionais, e eu irei ter o prazer de responder às suas preferências em minhas interfaces.
+
+Estarei vinculando um sublinhado de aba com a posição de rolagem do artigo. Snapping não é apenas bom alinhamento, mas também serve para ancorar o início e o fim de uma animação. Isto mantém o `<nav>`, que atua como um [minimapa](https://en.wikipedia.org/wiki/Mini-map), conectado ao conteúdo. Verificaremos a preferência de movimento do usuário em CSS e JS.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+#### Comportamento de rolagem {: #scroll-behavior }
+
+Há uma oportunidade de aprimorar o comportamento de movimento de ambos `:target` e `element.scrollIntoView()`. Por default, é instantâneo. O navegador apenas define a posição da rolagem. Bem, e se quisermos fazer a transição para essa posição de rolagem?
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+Como estamos introduzindo movimento aqui, e movimento que o usuário não controla (como a rolagem), só aplicamos esse estilo se o usuário não tiver preferência em seu sistema operacional em relação a movimento reduzido. Dessa forma, apresentamos o movimento de rolagem apenas para as pessoas que concordarem com ele.
+
+#### Indicador de abas {: #tabs-indicator}
+
+O objetivo desta animação é ajudar a associar o indicador ao estado do conteúdo. Decidi fazer um crossfade colorido em estilos `border-bottom` para usuários que preferem movimento reduzido e um deslizamento vinculado à rolagem + animação de desbotamento de cor para usuários que gostam de movimento.
+
+No Chromium Devtools, posso alternar a preferência e demonstrar os 2 estilos de transição diferentes. Eu me diverti muito construindo isso.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+Eu escondo o `.snap-indicator` quando o usuário prefere movimento reduzido, já que não preciso mais dele. Então eu o substituo por estilos `border-block-end` e uma `transition`. Observe também na interação das abas que o nav ativo não tem apenas um destaque de sublinhado da marca, mas a cor do texto também é mais escura. O elemento ativo tem um contraste de cor de texto mais alto e um realce de sublinhado brilhante.
+
+Apenas algumas linhas extras de CSS farão alguém se sentir visto (no sentido de que estamos respeitando cuidadosamente suas preferências de movimento). Eu adoro.
+
+#### `@scroll-timeline` {: #scroll-timeline }
+
+Na seção acima, mostrei como lido com os estilos de crossfade de movimento reduzido e, nesta seção, mostrarei como vinculei o indicador e uma área de rolagem. Este é um material experimental divertido que mostrarei a seguir. Espero que você esteja tão animado quanto eu.
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+Primeiro verifico a preferência de movimento do usuário no JavaScript. Se o resultado for `false`, o que significa que o usuário prefere movimento reduzido, não executaremos nenhum dos efeitos de movimento do link de rolagem.
+
+```js
+if (motionOK) {
+  // motion based animation code
+}
+```
+
+No momento em que este artigo foi escrito, o [suporte de navegadores para `@scroll-timeline`](https://caniuse.com/css-scroll-timeline) era zero. É uma [especificação draft](https://drafts.csswg.org/scroll-animations-1/) apenas com implementações experimentais, mas tem um polyfill que uso nesta demonstração.
+
+##### ` ScrollTimeline`
+
+Embora CSS e JavaScript possam criar timelines de rolagem, optei pelo JavaScript para poder usar medições de elementos ao vivo durante a animação.
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // scroll in the direction letters flow
+  fill: 'both',              // bi-directional linking
+});
+```
+
+Quero que uma coisa siga a posição de rolagem de outra e, ao criar um `ScrollTimeline`, eu defino o condutor do link de rolagem, que é o `scrollSource`. Normalmente, uma animação na web é executada num intervalo de tempo global, mas com uma `sectionScrollTimeline` personalizada na memória. Eu posso mudar tudo isso.
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+Antes de entrar nos keyframes da animação, acho importante destacar que o seguidor da rolagem, o `tabindicator`, será animado com base numa timeline personalizada, a rolagem da nossa seção. Isto completa a ligação, mas está faltando o ingrediente final: pontos com estado fixo para criar a animação entre eles, também conhecidos como keyframes.
+
+#### Keyframes dinâmicos
+
+Existe uma maneira CSS declarativa e pura bem poderosa para animar com `@scroll-timeline`, mas a animação que escolhi era dinâmica demais. Não há como fazer a transição entre `auto` width e não há como criar dinamicamente uma série de keyframes com base no comprimento dos elementos-filho.
+
+Mas JavaScript sabe como obter essas informações, portanto vamos iterar sobre os elementos filho nós mesmos e obter os valores calculados em tempo de execução:
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+Para cada `tabnavitem`, desestruture a posição `offsetLeft` e retorne uma string que a utilize como um valor `translateX`. Isto cria 4 keyframes transform para a animação. O mesmo é feito para width. É perguntado a cada um qual sua largura dinâmica e então o valor recebido é usado como o valor do keyframe.
+
+Aqui está um exemplo de saída, com base nas minhas fontes e preferências do navegador:
+
+Keyframes translateX:
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+Keyframes de width:
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["121px", "117px", "226px", "67px"]
+```
+
+Para resumir a estratégia, o indicador da aba agora será animado em 4 keyframes, dependendo da posição do snap de rolagem do scroller da seção. Os pontos de ajuste criam um delineamento definido entre nossos keyframes e aumentam a sensação de sincronização da animação.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png",     alt="aba ativa e aba inativa são mostradas com sobreposições VisBug que exibem as pontuações de contraste para ambos que passam na auditoria",     width="540", height="400"   %}</figure>
+
+O usuário conduz a animação com sua interação, vendo a largura e a posição do indicador mudar de uma seção para a seguinte, acompanhando perfeitamente com a rolagem.
+
+Você pode não ter notado, mas estou muito orgulhoso da transição de cores quando o item de navegação destacado é selecionado.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+O cinza mais claro não selecionado aparece ainda mais empurrado para trás quando o item destacado tem mais contraste. É comum fazer a transição de cor para o texto, como ao passar o mouse e quando selecionado, mas o próximo nível faz a transição dessa cor na rolagem, sincronizada com o indicador de sublinhado.
+
+Veja como eu fiz:
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+Cada link nav de aba precisa dessa nova animação colorida, rastreando a mesma timeline de rolagem que o indicador sublinhado. Eu uso a mesma timeline de antes: já que sua função é emitir um tique na rolagem, podemos usar esse tique em qualquer tipo de animação que quisermos. Como fiz antes, crio 4 keyframes no loop e retorno cores.
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+O keyframe com a cor `var(--text-active-color)` destaca o link e, caso contrário, é uma cor de texto padrão. O loop aninhado ali o torna relativamente simples, pois o loop externo é cada item de nav e o loop interno são os keyframes pessoais de cada item nav. Eu verifico se o elemento de loop externo é o mesmo que o de loop interno e uso essa informação para saber quando ele está selecionado.
+
+Eu me diverti muito escrevendo isso. Muito.
+
+### Ainda mais melhorias de JavaScript {: #js}
+
+Vale lembrar que a essência do que estou mostrando aqui funciona sem JavaScript. Dito isso, vamos ver como podemos melhorá-lo quando JS estiver disponível.
+
+#### Links profundos
+
+Links profundos (deep links) são mais um termo relacionado a dispositivos móveis, mas acho que a intenção do link profundo é encontrada aqui com as abas no sentido de que você pode compartilhar uma URL diretamente no conteúdo de uma aba. O navegador navegará internamente na página até o ID que corresponde ao hash da URL. Descobri que este handler de `onload` que obtém esse efeito em qualquer plataforma.
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### Sincronização do final da rolagem
+
+Nossos usuários nem sempre estão clicando ou usando um teclado, às vezes eles estão apenas rolando livremente, como deveriam ser capazes de fazer. Quando o scroller de seção para de rolar, o local onde ele para precisa ser correspondido na barra de navegação superior.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+É assim que espero o final da rolagem:
+
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+Sempre que seções estiverem sendo roladas, limpe o timeout da seção, se houver um, e inicie um novo. Quando as seções param de ser roladas, não limpe o timeout e dispare 100 ms após depois de parar. Ao disparar, chame a função que busca descobrir onde o usuário parou.
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+Assumindo que a rolagem parou em posição ajustada (snapped), dividir a posição atual da rolagem pela largura da área de rolagem deve resultar num número inteiro e não em uma fração. Então, tento pegar um item nav do nosso cache através desse índice calculado e, se encontrar algo, envio a aba correspondente para que seja marcada como ativa.
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+A definição da aba ativa começa ao limpar qualquer aba que esteja atualmente ativa e, em seguida, dando ao novo item nav atributo de estado "active". A chamada para `scrollIntoView()` tem uma interação divertida com CSS que vale a pena observar.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+No CSS do utilitário de snap de rolagem horizontal, nós [aninhamos](https://drafts.csswg.org/css-nesting-1/) uma consulta de mídia (media query) que aplica rolagem suave (`smooth`) se o usuário for tolerante a movimentos. O JavaScript pode fazer chamadas livremente para rolar os elementos para dentro da janela de visualização e o CSS pode gerenciar a UX de forma declarativa.
+
+### Conclusão
+
+Agora que você sabe como eu fiz, como você faria?! Isto deixa a arquitetura de componentes bem divertida! Quem vai fazer a 1ª versão com slots no seu framework favorito? 🙂
+
+Vamos diversificar nossas abordagens e aprender todas as maneiras de desenvolver na Web. Crie um [Glitch](https://glitch.com) e [envie um tweet](https://twitter.com/argyleink) com sua versão para que ela seja adicionada à seção de [Remixes da comunidade](#community-remixes) abaixo.
+
+## Remixes da comunidade
+
+- [@devnook](https://twitter.com/devnook), [@rob_dodson](https://twitter.com/rob_dodson) e [@DasSurma](https://twitter.com/DasSurma) com componentes Web: [artigo](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs).
+- [@jhvanderschee](https://twitter.com/jhvanderschee) com botões: [Codepen](https://codepen.io/joosts/pen/PoKdZYP).
diff --git a/src/site/content/pt/blog/color-scheme/index.md b/src/site/content/pt/blog/color-scheme/index.md
new file mode 100644
index 00000000000..292514d1640
--- /dev/null
+++ b/src/site/content/pt/blog/color-scheme/index.md
@@ -0,0 +1,184 @@
+---
+title: Estilo padrão de modo escuro aprimorado com a propriedade CSS `color-scheme` e a metatag correspondente
+subhead: |2
+
+  A propriedade CSS `color-scheme` e a metatag correspondente
+
+  permitem que os desenvolvedores optem por suas páginas nos padrões específicos do tema da folha de estilo do agente do usuário.
+authors:
+  - thomassteiner
+date: 2020-08-04
+updated: 2021-10-19
+hero: image/admin/rOe3wxcy28m5DCKcHv7E.jpg
+alt: Pombos na parede com um nítido contraste de preto e branco no fundo.
+description: |-
+  A propriedade color-scheme do CSS e a metatag correspondente permitem que os desenvolvedores optem por suas páginas nos padrões específicos do tema da folha de estilo do agente do usuário,
+  como, por exemplo, controles de formulário, barras de rolagem, bem como sistema de cores do CSS.
+  Ao mesmo tempo, esse recurso impede que os navegadores apliquem quaisquer transformações por conta própria.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## Fundamentos
+
+### O recurso de preferência de mídia do usuário com `prefers-color-scheme`
+
+O [`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) preferenciais oferece aos desenvolvedores controle total sobre a aparência de suas páginas. Se você não estiver familiarizado com ele, leia meu artigo [`prefers-color-scheme` : Olá escuridão, minha velha amiga](/prefers-color-scheme/) , onde documentei tudo o que sei sobre a criação de incríveis experiências no modo escuro.
+
+Uma peça do quebra-cabeça que foi mencionada apenas brevemente no artigo é a `color-scheme` e a metatag correspondente com o mesmo nome. Ambos tornam a sua vida como desenvolvedor mais fácil, permitindo que você opte pela sua página em padrões específicos do tema da folha de estilo do agente do usuário, como, por exemplo, controles de formulário, barras de rolagem, bem como sistema de cores do CSS. Ao mesmo tempo, esse recurso impede que os navegadores apliquem quaisquer transformações por conta própria.
+
+### A folha de estilo do agente do usuário
+
+Antes de continuar, deixe-me descrever brevemente o que é uma folha de estilo do agente do usuário. Na maioria das vezes, você pode pensar na palavra *agente do usuário* (UA) como uma forma sofisticada de dizer *navegador* . A folha de estilo UA determina a aparência padrão de uma página. Como o nome sugere, uma folha de estilo do UA é algo que depende do UA em questão. Você pode dar uma olhada na [folha de estilo UA do Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) (e do Chromium) e compará-la com a do [Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) ou [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) (e do WebKit). Normalmente, as folhas de estilo UA concordam com a maioria das coisas. Por exemplo, todos eles tornam os links em azul, o texto geral em preto e a cor de fundo em branco, mas também existem diferenças importantes (e às vezes irritantes), por exemplo, como eles estilizam os controles de formulário.
+
+Dê uma olhada mais de perto na [folha de estilo UA do WebKit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) e o que ela faz em relação ao modo escuro. (Faça uma pesquisa de texto completo por "escuro" na folha de estilo.) O padrão fornecido pela folha de estilo muda com base no modo escuro estar ativado ou desativado. Para ilustrar isso, aqui está uma regra CSS usando a pseudo classe [`:matches`](https://css-tricks.com/almanac/selectors/m/matches/) e as variáveis internas do WebKit como `-apple-system-control-background` , bem como a diretiva do pré-processador interno do WebKit `#if defined`:
+
+```css
+input,
+input:matches([type="password"], [type="search"]) {
+  -webkit-appearance: textfield;
+  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
+      HAVE_OS_DARK_MODE_SUPPORT
+    color: text;
+    background-color: -apple-system-control-background;
+  #else
+    background-color: white;
+  #endif
+  /* corte */
+}
+```
+
+Você notará alguns valores fora do padrão para as propriedades `color` e `background-color` acima. Nem `text` nem `-apple-system-control-background` são cores CSS válidas. São cores *semânticas* internas do WebKit.
+
+Acontece que o CSS padronizou as cores do sistema semântico. Eles são especificados no [módulo de cores CSS nível 4](https://drafts.csswg.org/css-color/#css-system-colors) . Por exemplo, [`Canvas`](https://drafts.csswg.org/css-color/#valdef-system-color-canvas) (não deve ser confundido com a tag `<canvas>` ) é para o fundo do conteúdo do aplicativo ou documentos, enquanto [`CanvasText`](https://drafts.csswg.org/css-color/#valdef-system-color-canvastext) é para texto no conteúdo do aplicativo ou documentos. Os dois andam juntos e não devem ser usados isoladamente.
+
+As folhas de estilo do UA podem usar suas próprias cores proprietárias ou as cores do sistema semântico padronizado para determinar como os elementos HTML devem ser renderizados por padrão. Se o sistema operacional estiver definido para o modo escuro ou usar um tema escuro, `CanvasText` (ou `text` ) seria condicionalmente definido como branco e `Canvas` (ou `-apple-system-control-background` ) seria definido como preto. A folha de estilo UA atribui o seguinte CSS apenas uma vez e cobre os modos claro e escuro.
+
+```css
+/**
+  Não é o código da folha de estilo UA real.
+  Apenas para fins ilustrativos.
+*/
+body {
+  color: CanvasText;
+  background-color: Canvas
+}
+```
+
+## A propriedade `color-scheme` do CSS
+
+A especificação [CSS Módulo do Ajuste de Cores Nível 1](https://drafts.csswg.org/css-color-adjust/) apresenta um modelo e controla o ajuste automático de cores pelo agente do usuário com o objetivo de lidar com as preferências do usuário, como modo escuro, ajuste de contraste ou esquemas específicos de cores desejados.
+
+A [`color-scheme`](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop) definida nele permite que um elemento indique com quais esquemas de cores ele se sente confortável para ser renderizado. Esses valores são negociados com as preferências do usuário, resultando em um esquema de cores escolhido que afeta coisas da interface do usuário (IU), como as cores padrão dos controles de formulário e barras de rolagem, bem como os valores usados das cores do sistema CSS. Os seguintes valores são atualmente suportados:
+
+- *`normal`* Indica que o elemento não tem conhecimento dos esquemas de cores e, portanto, o elemento deve ser renderizado com o esquema de cores padrão do navegador.
+
+- *`[ light | dark ]+`* Indica que o elemento está ciente e pode lidar com os esquemas de cores listados e expressa uma preferência ordenada entre eles.
+
+{% Aside 'note' %} O fornecimento de ambas as palavras-chave indica que o primeiro esquema é o preferido (pelo autor), mas o segundo também é aceitável se o usuário preferir. {% endAside %}
+
+Nesta lista, `light` representa um esquema de cores claras, com cores de fundo claras e cores de primeiro plano escuras, enquanto que `dark` representa o oposto, com cores de fundo escuras e cores de primeiro plano claras.
+
+Para todos os elementos, a renderização com um esquema de cores deve fazer com que as cores usadas em todas as IUs fornecidas pelo navegador para o elemento correspondam à intenção do esquema de cores. Os exemplos são barras de rolagem, sublinhados de verificação ortográfica, controles de formulário, etc.
+
+{% Aside 'note' %} A `color-scheme` pode ser usada no nível `:root` , bem como em um nível individual por elemento. {% endAside %}
+
+No `:root` , a renderização com um esquema de cores deve afetar adicionalmente a cor da superfície da tela (ou seja, a cor de fundo global), o valor inicial da propriedade `color` e os valores usados das cores do sistema, e também deve afetar as barras de rolagem da janela de visualização.
+
+```css
+/*
+  A página suporta tanto esquemas de cores claras como escuras,
+  e o autor da página prefere o escuro.
+*/
+:root {
+  color-scheme: dark light;
+}
+```
+
+## A metatag `color-scheme`
+
+Honrar a `color-scheme` requer que o CSS seja primeiro baixado (se for referenciado por meio de `<link rel="stylesheet">` ) e analisado. Para ajudar os agentes do usuário a renderizar o plano de fundo da página com o esquema de cores desejado *imediatamente*, um valor para `color-scheme` também pode ser fornecido em um elemento [`<meta name="color-scheme">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme) .
+
+```html
+<!--
+  A página suporta tanto esquemas de cores claras como escuras,
+  e o autor da página prefere o escuro.
+-->
+<meta name="color-scheme" content="dark light">
+```
+
+## Combinando `color-scheme` e `prefers-color-scheme`
+
+Como a metatag e a propriedade CSS (se aplicada ao `:root` ) eventualmente resultam no mesmo comportamento, sempre recomendo especificar o esquema de cores por meio da metatag, para que o navegador possa adotar o esquema preferido mais rapidamente.
+
+Embora para páginas de linha de base absolutas nenhuma regra CSS adicional seja necessária, no caso geral você deve sempre combinar o `color-scheme` com `prefers-color-scheme`. Por exemplo, o WebKit CSS color `-webkit-link` proprietário, usado pelo WebKit e Chrome para o link clássico azul `rgb(0,0,238)`, tem uma relação de contraste insuficiente de 2,23:1 em um fundo preto e [falha](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000) tanto no WCAG AA quanto bem como os [requisitos](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels) WCAG AAA.
+
+Eu abri bugs para [Chrome](https://crbug.com/1066811) , [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209851) e [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1626560) , bem como um [meta issue no padrão HTML](https://github.com/whatwg/html/issues/5426) para consertar isso.
+
+## Interação com `prefers-color-scheme`
+
+A interação da `color-scheme` e da metatag correspondente com o recurso de preferência de mídia do usuário `prefers-color-scheme` pode parecer confuso a primeira vista. Na verdade, eles jogam muito bem juntos. A coisa mais importante a entender é que o `color-scheme` determina exclusivamente a aparência padrão, ao passo que o `prefers-color-scheme` determina a aparência estilizável. Para tornar isso mais claro, assuma a seguinte página:
+
+```html
+<head>
+  <meta name="color-scheme" content="dark light">
+  <style>
+    fieldset {
+      background-color: gainsboro;
+    }
+    @media (prefers-color-scheme: dark) {
+      fieldset {
+        background-color: darkslategray;
+      }
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Lorem ipsum dolor sit amet, legere ancillae ne vis.
+  </p>
+  <form>
+    <fieldset>
+      <legend>Lorem ipsum</legend>
+      <button type="button">Lorem ipsum</button>
+    </fieldset>
+  </form>
+</body>
+```
+
+O código CSS embutido na página define o elemento `<fieldset>` de `background-color` para `gainsboro` no caso geral, e `darkslategray` se o usuário prefere um esquema de cores `dark` de acordo com as `prefers-color-scheme` preferências de mídia do usuário.
+
+Por meio do elemento `<meta name="color-scheme" content="dark light">` , a página informa ao navegador que oferece suporte para um tema escuro e um claro, com preferência por um tema escuro.
+
+Dependendo se o sistema operacional está definido para o modo escuro ou claro, a página inteira aparece claro no escuro, ou vice-versa, com base na folha de estilo do agente do usuário. Não *há* CSS adicional fornecido pelo desenvolvedor envolvido para alterar o texto do parágrafo ou a cor de fundo da página.
+
+Observe como a `background-color` de fundo do elemento `<fieldset>` muda com base na habilitação do modo escuro, seguindo as regras da folha de estilo embutida fornecida pelo desenvolvedor na página. Ou é `gainsboro` ou `darkslategray`.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSgOIiGRqjw2PvRlVCaV.png", alt = "Uma página em modo claro.", width = "800", height = "322" %}<figcaption> <strong>Modo claro:</strong> estilos especificados pelo desenvolvedor e pelo agente do usuário. O texto é preto e o fundo é branco de acordo com a folha de estilo do agente do usuário. A <code>background-color</code> de fundo do elemento <code>&lt;fieldset&gt;</code> é <code>gainsboro</code> de acordo com a folha de estilo do desenvolvedor embutida.</figcaption></figure>
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qqkHz83kerktbDIGCJeG.png", alt = "Uma página no modo escuro.", width = "800", height = "322" %}<figcaption> <strong>Modo escuro:</strong> estilos especificados pelo desenvolvedor e pelo agente do usuário. O texto é branco e o fundo é preto de acordo com a folha de estilo do agente do usuário. A <code>background-color</code> de fundo do elemento <code>&lt;fieldset&gt;</code> é <code>darkslategray</code> de acordo com a folha de estilo do desenvolvedor embutida.</figcaption></figure>
+
+A aparência do elemento `<button>` é controlada pela folha de estilo do agente do usuário. Sua `color` é definida para a cor do sistema [`ButtonText`](https://drafts.csswg.org/css-color/#valdef-system-color-buttontext) `background-color` e as quatro `border-color` são definidas para a cor do sistema [`ButtonFace`](https://drafts.csswg.org/css-color/#valdef-system-color-buttonface).
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lSNFROIe1P94DlhoVtoV.png", alt = "Uma página de modo leve que usa a propriedade ButtonFace.", width = "800", height = "322" %}<figcaption> <strong>Modo de luz:</strong> A <code>background-color</code> e as várias <code>border-color</code> são definidas para a cor do sistema <a href="https://drafts.csswg.org/css-color/#valdef-system-color-buttonface">ButtonFace.</a></figcaption></figure>
+
+Agora observe como a `border-color` do elemento `<button>` muda. O *valor calculado* para as `border-top-color` e `border-bottom-color` muda de `rgba(0, 0, 0, 0.847)` (enegrecido) para `rgba(255, 255, 255, 0.847)` (esbranquiçado), desde que o usuário do agente atualiza o `ButtonFace` dinamicamente com base no esquema de cores. O mesmo se aplica à `color` do elemento `<button>` que é definido para a cor do sistema correspondente `ButtonText` .
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IogmyIzUhokJgnnxUkPi.png", alt = "Mostrando que os valores de cor computados correspondem a ButtonFace.", width = "800", height = "322" %}<figcaption> <strong>Modo claro:</strong> Os valores calculados de <code>border-top-color</code> e <code>border-bottom-color</code> que são definidos como <code>ButtonFace</code> na folha de estilo do agente do usuário agora são <code>rgba(0, 0, 0, 0.847)</code>.</figcaption></figure>
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3sU1uZyt3zNhEgw3gpZJ.png", alt = "Mostrando que os valores de cor computados ainda correspondem a ButtonFace enquanto no modo escuro.", width = "800", height = "322" %}<figcaption> <strong>Modo escuro:</strong> Os valores calculados de <code>border-top-color</code> e <code>border-bottom-color</code> que são definidos como <code>ButtonFace</code> na folha de estilo do agente do usuário agora são <code>rgba(255, 255, 255, 0.847)</code>.</figcaption></figure>
+
+## Demo
+
+Você pode ver os efeitos do `color-scheme` de cores aplicado a um grande número de elementos HTML em uma [demonstração no Glitch](https://color-scheme-demo.glitch.me/) . A demonstração *mostra deliberadamente* [a violação](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000) WCAG AA e WCAG AAA com as cores de link mencionadas no [aviso acima](#using-color-scheme-in-practice) .
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqXapQKcNbyE3uwEOELO.png", alt = "A demonstração no modo claro.", width = "800", height = "982" %}<figcaption> A <a href="https://color-scheme-demo.glitch.me/">demonstração</a> mudou para <code>color-scheme: light</code>.</figcaption></figure>
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9G4hFdtSSwPLOm57zedD.png", alt = "A demonstração no modo escuro.", width = "800", height = "982" %}<figcaption> A <a href="https://color-scheme-demo.glitch.me/">demonstração</a> mudou para o <code>color-scheme: dark</code>. <a href="https://webaim.org/resources/contrastchecker/?fcolor=0000EE&amp;bcolor=000000">Observe a violação</a> WCAG AA e WCAG AAA com as cores do link.</figcaption></figure>
+
+## Reconhecimentos
+
+A `color-scheme` e a metatag correspondente foram implementadas por [Rune Lillesveen](https://github.com/lilles) . Rune também é um co-editor da especificação CSS Color Adjustment Module Nível 1. Imagem do herói por [Philippe Leone](https://unsplash.com/@philinit?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) no [Unsplash](https://unsplash.com/photos/dbFfEBOCrkU) .
diff --git a/src/site/content/pt/blog/commonjs-larger-bundles/index.md b/src/site/content/pt/blog/commonjs-larger-bundles/index.md
new file mode 100644
index 00000000000..aa7cdd1748a
--- /dev/null
+++ b/src/site/content/pt/blog/commonjs-larger-bundles/index.md
@@ -0,0 +1,243 @@
+---
+title: Como o CommonJS está tornando seus pacotes maiores
+subhead: Aprenda como os módulos do CommonJS estão afetando a estrutura de seu aplicativo
+authors:
+  - mgechev
+date: 2020-05-08
+updated: 2020-05-26
+hero: image/admin/S5JWmwRRW3rEXKwJR0JA.jpg
+alt: Como o CommonJS está tornando seus pacotes maiores
+description: |-
+  Módulos CommonJS são muito dinâmicos, o que impede JavaScript
+  otimizadores e pacotes realizam otimizações avançadas sobre eles.
+tags:
+  - blog
+  - javascript
+  - modules
+---
+
+Nesta postagem, veremos o que é CommonJS e por que está tornando seus pacotes de JavaScript maiores do que o necessário.
+
+Resumo: **Para garantir que o bundler possa otimizar seu aplicativo com sucesso, evite depender dos módulos CommonJS e use a sintaxe do módulo ECMAScript em todo o aplicativo.**
+
+## O que é CommonJS?
+
+CommonJS é um padrão de 2009 que estabeleceu convenções para módulos JavaScript. Ele foi inicialmente planejado para uso fora do navegador da web, principalmente para aplicativos do lado do servidor.
+
+Com o CommonJS você pode definir módulos, exportar funcionalidades deles e importá-los em outros módulos. Por exemplo, o snippet abaixo define um módulo que exporta cinco funções: `add` , `subtract`, `multiply`, `divide` e `max`:
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+Posteriormente, outro módulo pode importar e usar algumas ou todas estas funções:
+
+```javascript
+// index.js
+const { add } = require('./utils');
+console.log(add(1, 2));
+```
+
+Invocar `index.js` com `node` produzirá o número `3` no console.
+
+Devido à falta de um sistema de módulo padronizado no navegador no início de 2010, o CommonJS também se tornou um formato de módulo popular para bibliotecas do lado do cliente JavaScript.
+
+## Como o CommonJS afeta o tamanho final do pacote?
+
+O tamanho do seu aplicativo JavaScript do lado do servidor não é tão crítico quanto no navegador, é por isso que o CommonJS não foi projetado com a redução do tamanho do pacote de produção em mente. Ao mesmo tempo, a [análise](https://v8.dev/blog/cost-of-javascript-2019) mostra que o tamanho do pacote JavaScript ainda é o principal motivo para tornar os aplicativos de navegador mais lentos.
+
+Os empacotadores e minificadores de JavaScript, como `webpack` e `terser` , executam diferentes otimizações para reduzir o tamanho do seu aplicativo. Analisando seu aplicativo em tempo de construção, eles tentam remover o máximo possível do código-fonte que você não está usando.
+
+Por exemplo, no snippet acima, seu pacote final deve incluir apenas a `add`, pois este é o único símbolo de `utils.js` que você importa em `index.js`.
+
+Vamos construir o aplicativo usando a seguinte configuração de `webpack`
+
+```javascript
+const path = require('path');
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'production',
+};
+```
+
+Aqui, especificamos que queremos usar otimizações de modo de produção e usar `index.js` como um ponto de entrada. Depois de invocar o `webpack` , se explorarmos o [tamanho da saída](https://github.com/mgechev/commonjs-example/blob/master/commonjs/dist/out.js) , veremos algo como isto:
+
+```shell
+$ cd dist && ls -lah
+625K Apr 13 13:04 out.js
+```
+
+Observe que **o pacote tem 625 KB** . Se olharmos para a saída, encontraremos todas as funções de `utils.js` mais vários módulos de [`lodash`](https://lodash.com/) **. Embora não usemos `lodash` em `index.js` ele faz parte da saída**, o que adiciona muito peso extra aos nossos ativos de produção.
+
+Agora, vamos mudar o formato do módulo para [módulos ECMAScript](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) e tentar novamente. Desta vez, `utils.js` ficaria assim:
+
+```javascript
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+export const multiply = (a, b) => a * b;
+export const divide = (a, b) => a / b;
+
+import { maxBy } from 'lodash-es';
+
+export const max = arr => maxBy(arr);
+```
+
+E `index.js` importaria de `utils.js` usando a sintaxe do módulo ECMAScript:
+
+```javascript
+import { add } from './utils';
+
+console.log(add(1, 2));
+```
+
+Usando a mesma `webpack` , podemos construir nosso aplicativo e abrir o arquivo de saída. **Agora tem 40 bytes** com a seguinte [saída](https://github.com/mgechev/commonjs-example/blob/master/esm/dist/out.js) :
+
+```javascript
+(()=>{"use strict";console.log(1+2)})();
+```
+
+Observe que o pacote final não contém nenhuma das funções de `utils.js` que não usamos e não há nenhum vestígio de `lodash`! Além disso, `terser` (o minificador JavaScript que o `webpack` usa) incluiu a função `add` `console.log`.
+
+Uma pergunta justa que você pode fazer é: **por que usar o CommonJS faz com que o pacote de saída seja quase 16.000 vezes maior**? Claro, este é um exemplo de brinquedo; na realidade, a diferença de tamanho pode não ser tão grande, mas as chances são de que o CommonJS adicione um peso significativo à sua construção de produção.
+
+**Os módulos CommonJS são mais difíceis de otimizar no caso geral porque são muito mais dinâmicos do que os módulos ES. Para garantir que seu bundler e minificador possam otimizar com sucesso seu aplicativo, evite depender dos módulos CommonJS e use a sintaxe do módulo ECMAScript em todo o seu aplicativo.**
+
+Observe que, mesmo se você estiver usando módulos ECMAScript em `index.js`, se o módulo que você está consumindo for um módulo CommonJS, o tamanho do pacote do seu aplicativo será afetado.
+
+## Por que o CommonJS torna seu aplicativo maior?
+
+Para responder a essa pergunta, vamos dar uma olhada no comportamento do `ModuleConcatenationPlugin` no `webpack` e, em seguida, discutir a analisabilidade estática. Este plugin concatena o escopo de todos os seus módulos em um encerramento e permite que o seu código tenha um tempo de execução mais rápido no navegador. Vejamos um exemplo:
+
+```javascript
+// utils.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+
+```javascript
+// index.js
+import { add } from './utils';
+const subtract = (a, b) => a - b;
+
+console.log(add(1, 2));
+```
+
+Acima, temos um módulo ECMAScript, que importamos em `index.js` . Também definimos uma função de `subtract` Podemos construir o projeto usando a mesma `webpack` acima, mas desta vez, iremos desativar a minimização:
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: false
+  },
+  mode: 'production',
+};
+```
+
+Vejamos a saída produzida:
+
+```javascript
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+
+// CONCATENATED MODULE: ./utils.js**
+const add = (a, b) => a + b;
+const subtract = (a, b) => a - b;
+
+// CONCATENATED MODULE: ./index.js**
+const index_subtract = (a, b) => a - b;**
+console.log(add(1, 2));**
+
+/******/ })();
+```
+
+Na saída acima, todas as funções estão dentro do mesmo namespace. Para evitar colisões, o webpack renomeou a função `subtract` `index.js` para `index_subtract` .
+
+Se um minificador processar o código-fonte acima, ele vai:
+
+- Remova as funções não utilizadas `subtract` e `index_subtract`
+- Remova todos os comentários e espaços em branco redundantes
+- Colocar em linha o corpo da função `add` na chamada `console.log`
+
+Frequentemente, os desenvolvedores referem-se a essa **remoção de importações não utilizadas como uma confusão**. A agitação da árvore só foi possível porque o webpack foi capaz de compreender estaticamente (em tempo de compilação) quais símbolos estamos importando de `utils.js` e quais símbolos exportamos.
+
+Esse comportamento é ativado por padrão para **módulos ES** porque eles **são mais estaticamente analisáveis**, em comparação com CommonJS.
+
+Vejamos exatamente o mesmo exemplo, mas desta vez altere `utils.js` para usar CommonJS em vez de módulos ES:
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+Esta pequena atualização mudará significativamente a saída. Como é muito longo para incorporar a esta página, compartilhei apenas uma pequena parte dela:
+
+```javascript
+...
+(() => {
+
+"use strict";
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
+const subtract = (a, b) => a - b;
+console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));
+
+})();
+```
+
+Observe que o pacote final contém algum `webpack`: código injetado que é responsável por importar / exportar a funcionalidade dos módulos incluídos. Desta vez, em vez de colocar todos os símbolos de `utils.js` e `index.js` no mesmo namespace, exigimos dinamicamente, em tempo de execução, a função `add` `__webpack_require__`.
+
+Isso é necessário porque com CommonJS podemos obter o nome da exportação de uma expressão arbitrária. Por exemplo, o código abaixo é uma construção absolutamente válida:
+
+```javascript
+module.exports[localStorage.getItem(Math.random())] = () => { … };
+```
+
+Não há como o bundler saber em tempo de construção qual é o nome do símbolo exportado, pois isso requer informações que estão disponíveis apenas em tempo de execução, no contexto do navegador do usuário.
+
+**Dessa forma, o minificador é incapaz de entender o que exatamente `index.js` usa de suas dependências, então ele não pode sacudi-lo em uma árvore.** Observaremos exatamente o mesmo comportamento para módulos de terceiros. **Se importarmos um módulo CommonJS de `node_modules`, seu conjunto de ferramentas de construção não será capaz de otimizá-lo adequadamente.**
+
+## Agitando árvores com CommonJS
+
+É muito mais difícil analisar os módulos CommonJS, pois eles são dinâmicos por definição. Por exemplo, o local de importação em módulos ES é sempre um literal de string, em comparação com CommonJS, onde é uma expressão.
+
+Em alguns casos, se a biblioteca que você está usando segue convenções específicas sobre como usa o CommonJS, é possível remover as exportações não utilizadas no momento da construção usando um [plugin](https://github.com/indutny/webpack-common-shake) `webpack` de terceiros. Embora este plug-in adicione suporte para agitação de árvore, ele não cobre todas as diferentes maneiras como suas dependências podem usar o CommonJS. Isso significa que você não está obtendo as mesmas garantias dos módulos ES. Além disso, ele adiciona um custo extra como parte do seu processo de construção em cima do comportamento do `webpack`.
+
+## Conclusão
+
+**Para garantir que o bundler possa otimizar seu aplicativo com sucesso, evite depender dos módulos CommonJS e use a sintaxe do módulo ECMAScript em todo o aplicativo.**
+
+Aqui estão algumas dicas práticas para verificar se você está no caminho ideal:
+
+- Use o plug[-](https://github.com/rollup/plugins/tree/master/packages/node-resolve)in de resolução de nó de Rollup.js e defina o `modulesOnly` para especificar que você deseja depender apenas de módulos ECMAScript.
+- Use o pacote [`is-esm`](https://github.com/mgechev/is-esm) para verificar se um pacote npm usa módulos ECMAScript.
+- Se você estiver usando Angular, por padrão, você receberá um aviso se depender de módulos que não podem ser abalados por árvores.
diff --git a/src/site/content/pt/blog/compat2021/index.md b/src/site/content/pt/blog/compat2021/index.md
new file mode 100644
index 00000000000..eea57b2c203
--- /dev/null
+++ b/src/site/content/pt/blog/compat2021/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: 'Compat 2021: eliminando os cinco principais pontos fracos de compatibilidade na web'
+subhead: |-
+  O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir o
+  cinco principais pontos problemáticos de compatibilidade de navegador para desenvolvedores da web: CSS flexbox,
+  Grid CSS, `position: sticky`, `aspect-ratio` e transformações CSS.
+description: 'Saiba mais sobre como o Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais pontos problemáticos de compatibilidade do navegador para desenvolvedores da web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio e transformações CSS.'
+authors:
+  - robertnyman
+  - foolip
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/KQ5oNcLGKdBSuUM8pFPx.jpeg
+alt: Um quebra-cabeça sem uma peça.
+date: 2021-03-22
+updated: 2021-11-16
+tags:
+  - blog
+  - css
+---
+
+O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade de navegadores para desenvolvedores da web. As áreas de foco são CSS flexbox, CSS Grid, `position: sticky` , `aspect-ratio` e transformações CSS. Confira [Como você pode contribuir e acompanhar](#contribute) para saber como se envolver.
+
+## Histórico
+
+A compatibilidade na web sempre foi um grande desafio para os desenvolvedores. Nos últimos dois anos, o Google e outros parceiros, incluindo Mozilla e Microsoft, decidiram aprender mais sobre os principais pontos fracos para desenvolvedores da web, para conduzir nosso trabalho e priorização para melhorar a situação. Este projeto está conectado ao trabalho de [Satisfação do Desenvolvedor do Google](/developer-satisfaction) (DevSAT) e começou em uma escala maior com a criação das pesquisas [MDN DNA (Avaliação das Necessidades do Desenvolvedor)](https://insights.developer.mozilla.org/) em 2019 e 2020, e um esforço de pesquisa aprofundado apresentado no [Relatório de compatibilidade de navegador MDN2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html). Pesquisas adicionais foram feitas em vários canais, como as pesquisas [State of CSS](https://stateofcss.com/) e [State of JS](https://stateofjs.com/).
+
+A meta em 2021 é eliminar os problemas de compatibilidade do navegador em cinco áreas de foco principais, para que os desenvolvedores possam construir sobre eles com segurança como bases confiáveis. Esse esforço é denominado [**#Compat 2021**](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live).
+
+## Escolhendo no que focar
+
+Embora existam problemas de compatibilidade do navegador em basicamente toda a plataforma da web, o foco deste projeto está em um pequeno número das áreas mais problemáticas que podem ser significativamente melhoradas, removendo-as assim como os principais problemas para os desenvolvedores.
+
+O projeto de compatibilidade usa vários critérios que influenciam quais áreas priorizar, e alguns deles são:
+
+- Uso de recursos. Por exemplo, o flexbox é usado em [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) de todas as visualizações de página e a adoção está crescendo fortemente no [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout).
+
+- Número de bugs (no [Chromium](https://bugs.chromium.org/p/chromium/issues/list) , [Gecko](https://bugzilla.mozilla.org/describecomponents.cgi) , [WebKit](https://bugs.webkit.org/) ) e, para o Chromium, quantas estrelas esses bugs têm.
+
+- Resultados da pesquisa:
+
+    - [Pesquisas MDN DNA](https://insights.developer.mozilla.org/)
+    - [Relatório de compatibilidade do navegador MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+    - [Estado dos recursos CSS](https://2020.stateofcss.com/en-US/features/) mais conhecidos e usados
+
+- Resultados de teste de testes de [plataforma](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project) da web. Por exemplo, [flexbox em wpt.fyi](https://wpt.fyi/results/css/css-flexbox) .
+
+- Recursos mais procurados [Posso usar](https://caniuse.com/).
+
+## As cinco principais áreas de foco em 2021
+
+Em 2020, o Chromium começou a trabalhar abordando as principais áreas descritas em [Melhorando a compatibilidade do navegador do Chromium em 2020](https://blog.chromium.org/2020/06/improving-chromiums-browser.html). Em 2021, iniciamos0 um esforço dedicado para ir ainda mais longe. O Google e a [Microsoft estão trabalhando juntos para resolver os principais problemas do Chromium](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/) junto com a [Igalia](https://www.igalia.com/). A Igalia, que contribui regularmente com o Chromium e WebKit e também é mantenedora da porta oficial do WebKit para dispositivos embarcados, tem dado muito suporte e se engajado nesses esforços de compatibilidade e ajudará a resolver e acompanhar os problemas identificados.
+
+Aqui estão as áreas a serem consertadas em 2021.
+
+### CSS flexbox
+
+O [CSS flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) é[amplamente utilizado](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) na web e ainda existem alguns desafios importantes para os desenvolvedores. Por exemplo, o [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=721123) e o [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209983) tiveram problemas com o `auto-height`, levando a imagens de tamanho incorreto.
+
+<div class="switcher">
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qmKoKHkZga5hgBeiHuBz.png", alt="Foto esticada de um tabuleiro de xadrez.", width="800", height="400" %} <figcaption style="margin-top: auto"> Imagem de tamanho incorreto devido a bugs. </figcaption></figure>
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/0ruhCiZKRP9jBhnN70Xh.png", alt="Tabuleiro de Xadrez.", width="800", height="800" %} <figcaption style="margin-top: auto"> Imagem de tamanho correto. <br> Foto por <a href="https://unsplash.com/photos/ab5OK9mx8do">Alireza Mahmoudi.</a> </figcaption></figure>
+</div>
+
+[A postagem do blog Cats do flexbox da Igalia](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/) se aprofunda nesses problemas com muitos outros exemplos.
+
+#### Por que ele é priorizado
+
+- Pesquisas: problema principal no [Relatório de compatibilidade de navegadores MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html), mais conhecido e usado no [State of CSS](https://2020.stateofcss.com/en-US/features/)
+- Testes: [85% passam](https://wpt.fyi/results/css/css-flexbox) em todos os navegadores
+- Uso: [75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) das visualizações de página, crescendo fortemente no [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)
+
+### CSS Grid
+
+[CSS Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) é um bloco de construção central para layouts de web modernos, substituindo muitas técnicas e soluções alternativas mais antigas. Como a adoção está crescendo, ela precisa ser sólida como uma rocha, para que as diferenças entre os navegadores nunca sejam um motivo para evitá-la. Uma área que está faltando é a capacidade de animar layouts de grade, com suporte no Gecko, mas não no [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=759665) ou [WebKit](https://bugs.webkit.org/show_bug.cgi?id=204580). Quando suportado, efeitos como este são possíveis:
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Ovs6wg9o5AJUG4IIoVvj.mp4", height="400", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Demonstração de xadrez animada por <a href="https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/">Chen Hui Jing</a>. </figcaption></figure>
+
+#### Por que ele é priorizado
+
+- Pesquisas: segundo colocado no [relatório de compatibilidade de navegadores MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html), bem conhecido, mas menos usado no [State of CSS](https://2020.stateofcss.com/en-US/features/)
+- Testes: [75% passam](https://wpt.fyi/results/css/css-grid) em todos os navegadores
+- Uso:[8% e crescimento constante](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693) , ligeiro crescimento no [Arquivo HTTP](https://almanac.httparchive.org/en/2020/css#layout)
+
+{% Aside %} Embora um recurso mais recente, como o [subgrid,](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid) seja importante para os desenvolvedores, ele não faz parte desse esforço específico. Para acompanhar, consulte [Subgrid compat em MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid#browser_compatibility). {% endAside %}
+
+### Posição CSS: sticky
+
+[O posicionamento sticky](https://developer.mozilla.org/docs/Web/CSS/position#sticky_positioning) permite que o conteúdo fique preso à borda da janela de visualização e é comumente usado para cabeçalhos que estão sempre visíveis na parte superior da janela de visualização. Embora seja compatível com todos os navegadores, há casos de uso comuns em que não funciona conforme o esperado. Por exemplo, [cabeçalhos de tabela fixos](https://bugs.chromium.org/p/chromium/issues/detail?id=702927) não são compatíveis com o Chromium e, embora agora sejam [compatíveis com um sinalizador](https://bugs.chromium.org/p/chromium/issues/detail?id=958381) , os resultados são inconsistentes entre os navegadores:
+
+<div class="switcher">
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/DtNtuWCZUNwi7GGSBPvA.png", alt="", width="250", height="350" %} <figcaption> Chromium com "TablesNG" </figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/hJwLpLeJNfG6kVBUK9Yn.png", alt="", width="250", height="350" %} <figcaption> Gecko </figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/od1YyD2BoBqfrnkzynUK.png", alt="", width="250", height="350" %} <figcaption> WebKit </figcaption></figure>
+</div>
+
+Confira a <a href="https://output.jsbin.com/xunosud">demonstração dos cabeçalhos de tabela sticky</a> de Rob Flack.
+
+#### Por que é priorizado
+
+- Pesquisas: altamente conhecidas/usadas no [CSS State](https://2020.stateofcss.com/en-US/features/) e foram mencionadas várias vezes no [relatório de compatibilidade de navegadores MDN](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+- Testes: [66% passa](https://wpt.fyi/results/css/css-position/sticky?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=%28status%3A%21missing%26status%3A%21pass%26status%3A%21ok%29) em todos os navegadores
+- Uso: [8%](https://www.chromestatus.com/metrics/feature/timeline/popularity/3354)
+
+### Propriedade de proporção de aspecto CSS
+
+A nova propriedade [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) facilita a manutenção de uma proporção consistente de largura e altura para os elementos, eliminando a necessidade do conhecido [hack `padding-top`](/aspect-ratio/#the-old-hack-maintaining-aspect-ratio-with-padding-top) :
+
+<div class="switcher">{% Compare 'worse', 'Usando padding-top' %} ```css .container { width: 100%; padding-top: 56.25%; } ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Usando aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+Por ser um caso de uso tão comum, espera-se que ele se torne amplamente utilizado e queremos ter certeza de que é sólido em todos os cenários comuns e entre navegadores.
+
+#### Por que ele é priorizado
+
+- Pesquisas: já bem conhecidas, mas ainda não amplamente utilizadas no [CSS State](https://2020.stateofcss.com/en-US/features/)
+- Testes: [27% passam](https://wpt.fyi/results/css/css-sizing/aspect-ratio) em todos os navegadores
+- Uso: [3%](https://www.chromestatus.com/metrics/css/timeline/popularity/657) e espera-se que cresça
+
+### Transformações CSS
+
+As [transformações CSS](https://developer.mozilla.org/docs/Web/CSS/transform) são suportadas em todos os navegadores há muitos anos e são amplamente utilizadas na web. No entanto, ainda existem muitas áreas onde eles não funcionam da mesma forma em todos os navegadores, principalmente com animações e transformações 3D. Por exemplo, um efeito de virada de cartão pode ser muito inconsistente entre os navegadores:
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/RhyPpk7dUooEobKZ3VOC.mp4", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Efeito de virada do cartão no Chromium (left), Gecko (middle) e WebKit (right). Demo por David Baron a partir de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1008483#c42">comentário sobre o bug</a>. </figcaption></figure>
+
+#### Por que é priorizado
+
+- Pesquisas: Muito conhecidas e utilizadas no [State of CSS](https://2020.stateofcss.com/en-US/features/)
+- Testes: [55% passam](https://wpt.fyi/results/css/css-transforms) em todos os navegadores
+- Uso: [80%](https://www.chromestatus.com/metrics/css/timeline/popularity/446)
+
+## Como você pode contribuir e acompanhar {: #contribute}
+
+Siga e compartilhe todas as atualizações que [postarmos](https://twitter.com/ChromiumDev) no @ChromiumDev ou na [lista de e-mails pública, Compat 2021](https://groups.google.com/g/compat2021). Certifique-se de que existem bugs ou [registre-os](/how-to-file-a-good-bug/) para os problemas que você está enfrentando e, se houver algo faltando, entre em contato através dos canais acima.
+
+Haverá atualizações regulares sobre o progresso aqui no web.dev e você também pode acompanhar o progresso de cada área de foco no [Compat 2021 Dashboard](https://wpt.fyi/compat2021).
+
+<figure><p data-md-type="paragraph"><a href="https://wpt.fyi/compat2021"> {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/BgX0dnesIhLaFAKyILzk.png", alt="Painel Compat 2021", width="800", height="942" %} </a></p>
+<figcaption>O Painel Compat 2021 (captura de tela tirada em 16 de novembro de 2021).</figcaption></figure>
+
+Esperamos que este esforço conjunto entre os fornecedores de navegadores para melhorar a confiabilidade e a interoperabilidade ajude você a criar coisas incríveis na web!
diff --git a/src/site/content/pt/blog/conversion-measurement/index.md b/src/site/content/pt/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..f3fe1b74c46
--- /dev/null
+++ b/src/site/content/pt/blog/conversion-measurement/index.md
@@ -0,0 +1,512 @@
+---
+layout: post
+title: Uma forma de medir as conversões de anúncios com mais privacidade, a Event Conversion Measurement API
+subhead: Uma nova API web disponível como teste de origem mede quando o clique num anúncio leva a uma conversão, sem usar identificadores entre sites (cross-site).
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %} A Conversion Measurement API será renomeada para *Attribution Reporting API* e oferecerá mais recursos.
+
+- Se você estiver experimentando a [Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md) no [Chrome 91](https://chromestatus.com/features/schedule) ou menos, leia este artigo para encontrar mais detalhes, casos de uso e instruções sobre como usar a API.
+- Se você estiver interessado na próxima iteração desta API (Attribution Reporting), que estará disponível para experimentação no Chrome (ensaio de origem), [participe da lista de e-mail](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev) para ser informado de novidades sobre os experimentos disponíveis.
+
+{% endAside %}
+
+Para medir a eficácia das campanhas publicitárias, os anunciantes e editores precisam saber quando um clique ou visualização no anúncio leva a uma [conversão](/digging-into-the-privacy-sandbox/#conversion), como uma compra ou inscrição. Historicamente, isto é feito com **cookies de terceiros**. Agora, a Event Conversion Measurement API permite a correlação de um evento no site de um editor com uma conversão subsequente no site de um anunciante, sem envolver mecanismos que poderiam ser usados para reconhecer um usuário entre sites.
+
+{% Aside %} **Esta proposta precisa de seu feedback!** Se você quiser enviar comentários, [crie um issue](https://github.com/WICG/conversion-measurement-api/issues/) no repositório da proposta de API. {% endAside %}
+
+{% Aside %} Esta API é parte do Privacy Sandbox, uma série de propostas para satisfazer os casos de uso de terceiros sem cookies de terceiros ou outros mecanismos de rastreamento cross-site. Veja [Explorando a Privacy Sandbox](/digging-into-the-privacy-sandbox) para uma visão geral de todas as propostas. {% endAside %}
+
+## Glossário
+
+- **Plataformas Adtech**: empresas que fornecem software e ferramentas para permitir que marcas ou agências direcionem, entreguem e analisem sua publicidade digital.
+- **Anunciantes**: empresas que pagam por publicidade.
+- **Editores**: empresas que exibem anúncios em seus sites.
+- **Conversão click-through**: conversão que é atribuída a um clique num anúncio.
+- **Conversão view-through**: conversão que é atribuída a uma impressão de anúncio (quando o usuário não interage com o anúncio, mas posteriormente converte).
+
+## Quem precisa saber sobre esta API: plataformas adtech, anunciantes e editores
+
+- **Plataformas Adtech**, tais como as **[plataformas de demanda,](https://en.wikipedia.org/wiki/Demand-side_platform)** provavelmente terão interesse em usar essa API para oferecer suporte à funcionalidade que atualmente depende de cookies de terceiros. Se você estiver trabalhando em sistemas de medição de conversão: [experimente rodar a demonstração](#demo), [experimente com a API](#experiment-with-the-api) e [compartilhe sua experiência](#share-your-feedback).
+- **Anunciantes e editores que dependem de código personalizado para publicidade ou medição de conversão** podem, da mesma forma, estar interessados em usar essa API para substituir as técnicas existentes.
+- **Anunciantes e editores que contam com plataformas adtech para publicidade ou medição de conversão** não precisam usar a API diretamente, mas a [justificativa para esta API](#why-is-this-needed) pode ser de interesse, especialmente se você estiver trabalhando com plataformas adtech que poderão integrar a API.
+
+## Visão geral da API
+
+### Por que ela é necessária?
+
+Hoje, a medição de conversão de anúncios geralmente depende [de cookies de terceiros](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies). **Mas os navegadores estão restringindo o acesso a eles.**
+
+O Chrome planeja [descontinuar o suporte para cookies de terceiros](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html) e [oferece maneiras para que os usuários os bloqueiem, se desejarem](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en). O Safari [bloqueia cookies de terceiros](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/), o Firefox [bloqueia cookies de rastreamento de terceiros conhecidos](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default) e o Edge [oferece prevenção de rastreamento](https://support.microsoft.com/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention).
+
+Os cookies de terceiros estão se tornando uma solução legada. **Novas APIs criadas para fins específicos**, como esta, estão surgindo para lidar com os casos de uso resolvidos por cookies de terceiros de uma forma que preserve a privacidade dos usuários.
+
+**Como a Event Conversion Measurement API se compara aos cookies de terceiros?**
+
+- Ela foi **construída com um propósito** que é medir as conversões, ao contrário dos cookies. Isto, por sua vez, pode permitir que os navegadores apliquem melhores proteções de privacidade.
+- Tem **mais privacidade**: ela dificulta o reconhecimento de um usuário entre dois sites de nível superior diferentes, para por exemplo vincular perfis de usuário do lado do editor e do lado do anunciante. Veja como em [Como esta API preserva a privacidade do usuário](#how-this-api-preserves-user-privacy).
+
+### Uma primeira iteração
+
+Esta API está num **estágio experimental inicial**. O que está disponível como um ensaio de origem é a **primeira iteração** da API. Ela pode mudar substancialmente em [iterações futuras](#use-cases) .
+
+### Apenas cliques
+
+Esta iteração da API só oferece suporte **à medição de conversões click-through**, mas a [medição de conversões view-through](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md) está sob incubação pública.
+
+### Como funciona
+
+<figure>
+  {% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="Diagrama: visão geral das etapas da API de medição de conversão", width="800", height="496" %}
+</figure>
+
+Esta API pode ser usada com dois tipos de links (elementos `<a>`) usados para publicidade:
+
+- Links em um contexto **primário**, como anúncios em uma rede social ou página de resultados de busca;
+- Links em um **iframe de terceiros**, como em um site de editor que usa um provedor adtech de terceiros.
+
+Com esta API, esses links externos podem ser configurados com atributos que são específicos para conversões de anúncios:
+
+- Dados personalizados para anexar a um clique de anúncio no lado do editor, por exemplo, um ID de clique ou ID de campanha.
+- O site para o qual uma conversão é esperada para este anúncio.
+- O endpoint de relatório que deve ser notificado sobre conversões bem-sucedidas.
+- A data e hora de corte para quando as conversões não puderem mais ser contadas para este anúncio.
+
+Quando o usuário clica num anúncio, o navegador - no dispositivo local do usuário - registra esse evento, junto com a configuração de conversão e os dados de clique especificados pelos atributos de Mensuração de Conversão no elemento `<a>`
+
+Posteriormente, o usuário pode visitar o site do anunciante e executar uma ação que o anunciante ou seu provedor de adtech categoriza como uma **conversão**. Se isto acontecer, o clique no anúncio e o evento de conversão serão correspondidos pelo navegador do usuário.
+
+O navegador finalmente programa um **relatório de conversão** a ser enviado ao endpoint especificado nos atributos do elemento `<a>`. Este relatório inclui dados sobre o clique no anúncio que levou a essa conversão, bem como dados sobre a conversão.
+
+Se várias conversões forem registradas para um determinado clique no anúncio, tantos relatórios correspondentes serão programados para serem enviados (até no máximo três por clique no anúncio).
+
+Os relatórios são enviados após um atraso: dias ou às vezes semanas após a conversão (veja o porquê em [Programação de relatórios](#report-timing) ).
+
+## Suporte dos navegadores e APIs semelhantes
+
+### Suporte dos navegadores
+
+A API Event Conversion Measurement pode ser suportada:
+
+- Como [ensaio de origem](/origin-trials/). Os ensaios de origem habilitam a API para **todos os visitantes** de uma determinada [origem](/same-site-same-origin/#origin). **Você precisa registrar sua origem para o ensaio de origem para testar a API com os usuários finais**. Veja [Usando a API de medição de conversão](/using-conversion-measurement) para detalhes sobre o ensaio de origem.
+- Ativando sinalizadores (flags), no Chrome 86 e posterior. Os sinalizadores habilitam a API no navegador de **um único usuário.** **Os sinalizadores são úteis ao desenvolver localmente**.
+
+Veja os detalhes sobre o status atual na [Chrome feature entry](https://chromestatus.com/features/6412002824028160).
+
+### Padronização
+
+Esta API está sendo desenvolvida de forma aberta, no Web Platform Incubator Community Group ([WICG](https://www.w3.org/community/wicg/)). Ela está disponível para experimentação no Chrome.
+
+### APIs semelhantes
+
+O WebKit, mecanismo de navegador usado pelo Safari, tem uma proposta com objetivos semelhantes, a [Private Click Measurement](https://github.com/privacycg/private-click-measurement). Ela está sendo desenvolvida no Privacy Community Group ([PrivacyCG](https://www.w3.org/community/privacycg/)).
+
+## Como esta API preserva a privacidade do usuário
+
+Com esta API, as conversões podem ser medidas ao mesmo tempo em que protege a privacidade dos usuários: os usuários não podem ser reconhecidos nos sites. Isto é possível devido a **limites de dados**, **introdução de ruído em dados de conversão** e mecanismos de **programação de relatórios.**
+
+Vamos dar uma olhada mais de perto em como esses mecanismos funcionam e o que eles significam na prática.
+
+### Limites de dados
+
+A seguir, os dados de **tempo de clique (click-time) ou tempo de visualização (view-time)** são dados disponíveis para `adtech.example` quando o anúncio é servido para o usuário e, em seguida, clicado ou visualizado. Os dados de quando uma conversão aconteceu são **dados do tempo de conversão (conversion-time)**.
+
+Vejamos um **editor** `news.example` e um **anunciante** `shoes.example`. Scripts de terceiros da **plataforma adtech** `adtech.example` estão presentes no site do editor `news.example` para incluir anúncios para o anunciante `shoes.example`. `shoes.example` inclui `adtech.example` também, para detectar conversões.
+
+Quanto `adtech.example` pode aprender sobre os usuários da web?
+
+#### Com cookies de terceiros
+
+<figure>
+  {% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="Diagrama: como cookies de terceiros permitem o reconhecimento de usuário entre sites", width="800", height="860" %}
+</figure>
+
+`adtech.example` depende de um **cookie de terceiros usado como identificador único entre sites** para **reconhecer um usuário entre sites**. Além disso, `adtech.example` pode acessar **ambos** os tipos de dados em detalhes: tempo de clique (click-time) ou de visualização (view-time) e tempo de conversão (conversion-time), e vinculá-los.
+
+Como resultado, `adtech.example` pode rastrear o comportamento de um único usuário nos sites, entre uma exibição do anúncio, clique e conversão.
+
+Como `adtech.example` está provavelmente presente num grande número de sites de editores e anunciantes, e não apenas em `news.example` e `shoes.example`, o comportamento de um  usuário pode ser rastreado por toda a web.
+
+#### Com a API Event Conversion Measurement
+
+<figure>
+  {% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="Diagrama: como a API permite a medição de conversão sem reconhecimento de usuário entre sites", width="800", height="643" %}
+  <figcaption>"Ad ID" no diagrama de cookies e "Click ID" são ambos identificadores que permitem o mapeamento para dados detalhados. Neste diagrama, é chamado de "Click ID" porque ele suporta apenas a medição de conversão do tipo click-through.</figcaption>
+</figure>
+
+`adtech.example` não pode usar um identificador cross-site e, portanto, **não é capaz de reconhecer um usuário entre sites**.
+
+- Um identificador de 64 bits pode ser anexado a um clique no anúncio.
+- Apenas 3 bits de dados de conversão podem ser anexados ao evento de conversão. 3 bits podem ajustar um valor inteiro de 0 a 7. Isto não é muito, mas é o suficiente para que os anunciantes possam aprender como tomar boas decisões sobre onde gastar seu orçamento de publicidade no futuro (por exemplo, treinando modelos de dados).
+
+{% Aside %} Os dados de clique e de conversão nunca são expostos a um ambiente JavaScript no mesmo contexto. {% endAside %}
+
+#### Sem uma alternativa aos cookies de terceiros
+
+Sem uma alternativa para cookies de terceiros, como a Event Conversion Measurement API, as conversões não podem ser atribuídas: se `adtech.example` estiver presente no site do editor e do anunciante, ele pode acessar os dados de tempo de clique (click-time) ou de conversão (conversion-time), mas não pode vinculá-los de forma alguma.
+
+Nesse caso, a privacidade do usuário é preservada, mas os anunciantes não podem otimizar seus gastos com publicidade. É por isso que uma alternativa como a Event Conversion Measurement API é necessária.
+
+### Introdução de ruído em dados de conversão
+
+Os 3 bits coletados no momento da conversão são **ruídos**.
+
+Por exemplo, na implementação do Chrome, o ruído de dados funciona da seguinte maneira: 5% do tempo, a API relata um valor aleatório de 3 bits em vez dos dados de conversão reais.
+
+Isto protege os usuários de ataques de privacidade. Um ator que tenta usar indevidamente os dados de várias conversões para criar um identificador não terá total confiança nos dados que recebe - tornando esses tipos de ataques mais complicados.
+
+Observe que é possível [recuperar a contagem de conversões verdadeira](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count).
+
+A tabela a seguir resume os dados de clique (click-data) e de conversão (conversion-data):
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Dados</th>
+        <th>Tamanho</th>
+        <th>Exemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Dados de clique (atributo <code>impressiondata</code>
+</td>
+        <td>64 bits</td>
+        <td>Um ID de anúncio ou ID de clique</td>
+      </tr>
+      <tr>
+        <td>Dados de conversão</td>
+        <td>3 bits, com ruído</td>
+        <td>Um número inteiro de 0 a 7 que pode ser mapeado para um tipo de conversão: inscrição, checkout completo, etc.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Programação de relatórios
+
+Se várias conversões forem registradas para um determinado clique de anúncio, **um relatório correspondente é enviado para cada conversão, até um máximo de três por clique** .
+
+Para evitar que o tempo de conversão seja usado para obter mais informações do lado da conversão e, portanto, prejudicar a privacidade dos usuários, esta API especifica que os relatórios de conversão não são enviados imediatamente após a ocorrência de uma conversão. Após o clique inicial no anúncio, é iniciada uma programação de **janelas de relatório** associadas a esse clique. Cada janela de relatório tem um prazo, e as conversões registradas antes desse prazo serão enviadas ao final dessa janela.
+
+Os relatórios podem não ser enviados exatamente nessas datas e horários programados: se o navegador não estiver em execução quando um relatório estiver programado para ser enviado, o relatório será enviado na inicialização do navegador - o que pode ocorrer dias ou semanas após o horário programado.
+
+Após a expiração (tempo de clique + `impressionexpiry`), nenhuma conversão é contada`impressionexpiry` é a data e hora de corte depois da qual as conversões não podem mais ser contadas para este anúncio.
+
+No Chrome, a programação de relatórios funciona da seguinte maneira:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>Dependendo do tempo de conversão, um relatório de conversão é enviado (se o navegador estiver aberto) ...</th>
+        <th>Número de janelas de relatórios</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30 dias, o valor default e máximo</td>
+        <td>
+          <ul>
+            <li>2 dias depois que o anúncio foi clicado</li>
+            <li>ou 7 dias após o clique no anúncio</li>
+            <li>ou <code>impressionexpiry</code> = 30 dias após o clique no anúncio.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> é entre 7 e 30 dias</td>
+        <td>
+          <ul>
+            <li>2 dias após o clique no anúncio</li>
+            <li>ou 7 dias após o clique no anúncio</li>
+            <li>ou <code>impressionexpiry</code> após o clique no anúncio.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> é entre 2 e 7 dias</td>
+        <td>
+          <ul>
+            <li>2 dias após o clique no anúncio</li>
+            <li>ou <code>impressionexpiry</code> após o clique no anúncio.</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> é inferior a 2 dias</td>
+        <td>
+          <li>2 dias após o clique no anúncio</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>
+  {% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="Cronologia de quais relatórios são enviados quando", width="800", height="462" %}
+</figure>
+
+Consulte [Envio de relatórios programados](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports) para obter mais detalhes sobre a programação.
+
+## Exemplo
+
+{% Aside %} Para ver este exemplo em ação, experimente a [demo](https://goo.gle/demo-event-level-conversion-measurement-api) ⚡️ e veja o [código](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement) correspondente. {% endAside %}
+
+Veja como a API registra e relata uma conversão. Observe que é dessa forma que um fluxo click-to-convert funcionaria com a API atual. As iterações futuras desta API [podem ser diferentes](#use-cases) .
+
+### Clique no anúncio (etapas 1 a 5)
+
+<figure>{% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="Diagrama: clique no anúncio e armazenamento de cliques", width="800", height="694" %}</figure>
+
+Um elemento `<a>` de anúncio é carregado no site de um editor por `adtech.example` dentro de um iframe.
+
+Os desenvolvedores da plataforma adtech configuraram o elemento `<a>` com atributos de mensuração de conversão:
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+Este código especifica o seguinte:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Atributo</th>
+        <th>Valor padrão, máximo, mínimo</th>
+        <th>Exemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code> (obrigatório): um <b>identificador de 64 bits</b> para anexar a um clique no anúncio.</td>
+        <td>(nenhum padrão)</td>
+        <td>Um ID de clique gerado dinamicamente, como um número inteiro de 64 bits: <code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code> (obrigatório): o <b><a href="/same-site-same-origin/#site" noopener="">eTLD + 1</a></b> onde uma conversão é esperada para este anúncio.</td>
+        <td>(nenhum default)</td>
+        <td>
+<code>https://advertiser.example</code>.<br> Se o <code>conversiondestination</code> for <code>https://advertiser.example</code>, as conversões em <code>https://advertiser.example</code> e <code>https://shop.advertiser.example</code> serão atribuídas.<br> O mesmo acontece se o <code>conversiondestination</code> for <code>https://shop.advertiser.example</code>: serão atribuídas conversões em <code>https://advertiser.example</code> e <code>https://shop.advertiser.example</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> (opcional): em milissegundos, o tempo limite para quando as conversões podem ser atribuídas a este anúncio.</td>
+        <td>
+<code>2592000000</code> = 30 dias (em milissegundos).<br><br> Máximo: 30 dias (em milissegundos).<br><br> Mínimo: 2 dias (em milissegundos).</td>
+        <td>Dez dias após o clique: <code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code> (opcional): o destino para relatórios de conversões confirmadas.</td>
+        <td>Origem de nível superior da página onde o elemento de link é adicionado.</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code> : o destino pretendido do clique no anúncio.</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Algumas observações sobre o exemplo:
+
+- Você encontrará o termo "impression" usado nos atributos da API ou na proposta da API, embora apenas cliques sejam suportados por enquanto. Os nomes podem ser atualizados em iterações futuras da API.
+- O anúncio não precisa estar num iframe, mas é nisto que este exemplo se baseia.
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- Fluxos baseados na navegação por `window.open` ou `window.location` não serão elegíveis para atribuição.
+
+{% endAside %}
+
+Quando o usuário toca ou clica no anúncio, ele navega até o site do anunciante. Depois que a navegação é confirmada, o navegador armazena um objeto que inclui `impressiondata`, `conversiondestination`, `reportingorigin` e `impressionexpiry`:
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### Conversão e programação de relatórios (etapas 6 a 9)
+
+<figure>
+  {% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="Diagrama: conversão e programação de relatório", width="800", height="639" %}
+</figure>
+
+Logo depois de clicar no anúncio ou mais tarde - por exemplo, no dia seguinte - o usuário visita o `advertiser.example`, procura por calçados esportivos, encontra um par que deseja comprar e prossegue com a finalização da compra. O `advertiser.example` incluiu um pixel na página de checkout:
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example` recebe essa solicitação e decide que ela se qualifica como uma conversão. Eles agora precisam solicitar ao navegador para registrar uma conversão. `adtech.example` compacta todos os dados de conversão em 3 bits - um número inteiro entre 0 e 7. Por exemplo, eles podem mapear uma ação de **Checkout** para um valor de conversão de 2.
+
+`adtech.example` então envia um redirecionamento de conversão de registro específico para o navegador:
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %} URLs `.well-known` são URLs especiais. Elas ajudam as ferramentas de software e servidores descobrirem informações ou recursos que são frequentemente necessários para um site, por exemplo, a página na qual um usuário pode [alterar sua senha](/change-password-url/). Aqui, `.well-known` é usado apenas para que o navegador reconheça isso como uma solicitação de conversão especial. Na verdade, essa solicitação é cancelada internamente pelo navegador. {% endAside %}
+
+O navegador recebe esta solicitação. Ao detectar a `.well-known/register-conversion`, o navegador:
+
+- Pesquisa todos os cliques em anúncios no armazenamento que correspondem a este `conversiondestination` (porque está recebendo essa conversão em uma URL que foi registrada como uma `conversiondestination` quando o usuário clicou no anúncio). Ele encontra o clique do anúncio que ocorreu no site do editor um dia antes.
+- Registra uma conversão para este clique no anúncio.
+
+Vários cliques no anúncio podem corresponder a uma conversão: o usuário pode ter clicado num anúncio para `shoes.example` em ambos `news.example` e `weather.example`. Neste caso, várias conversões são registradas.
+
+Agora, o navegador sabe que precisa informar o servidor adtech sobre essa conversão - mais especificamente, o navegador precisa informar a origem do `reportingorigin` que é especificada no elemento `<a>` e na solicitação do pixel (`adtech.example`).
+
+Para isto, o navegador programa o envio de um **relatório de conversão**, um blob de dados contendo os dados de clique (do site do editor) e os dados de conversão (do site do anunciante). Para este exemplo, o usuário converteu um clique no dia seguinte. Portanto, o relatório está programado para ser enviado no dia seguinte, na marca de dois dias após o clique, se o navegador estiver em execução.
+
+### Enviando o relatório (etapas 10 e 11)
+
+<figure>
+  {% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="Diagrama: navegador enviando o relatório", width="800", height="533" %}
+</figure>
+
+Uma vez atingido o horário programado para enviar o relatório, o navegador envia o **relatório de conversão**: ele envia um HTTP POST para a origem do relatório que foi especificada no elemento `<a>` `adtech.example`). Por exemplo:
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+Incluídos como parâmetros estão:
+
+- Os dados associados ao clique no anúncio original ( `impression-data` ).
+- Os dados associados a uma conversão, [potencialmente com ruído](#noising-of-conversion-data) .
+- O crédito de conversão atribuído ao clique. Esta API segue um modelo de atribuição de **último clique**: o clique em anúncio correspondente mais recente recebe um crédito de 100; todos os outros cliques em anúncios correspondentes recebem um crédito de 0.
+
+Conforme o servidor adtech recebe essa solicitação, ele pode extrair os `impression-data` e `conversion-data`, ou seja, o relatório de conversão:
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### Conversões subsequentes e expiração
+
+Mais tarde, o usuário pode converter novamente - por exemplo, comprando uma raquete de tênis no `advertiser.example`. Um fluxo semelhante acontece:
+
+- O servidor adtech envia uma solicitação de conversão ao navegador.
+- O navegador faz a correspondência dessa conversão com o clique no anúncio, programa um relatório e o envia ao servidor adtech posteriormente.
+
+Após a `impressionexpiry`, as conversões para esse clique no anúncio param de ser contadas e o clique no anúncio é excluído do armazenamento do navegador.
+
+## Casos de uso
+
+### O que é atualmente suportado
+
+- Mensuração das conversões de clique: determine quais cliques em anúncios levam a conversões e acesse informações gerais sobre a conversão.
+- Obtenção de dados para otimizar a seleção de anúncios, por exemplo, treinando modelos de aprendizado de máquina.
+
+### O que não é suportado nesta iteração
+
+Os seguintes recursos não são suportados, mas podem estar em iterações futuras desta API ou em relatórios [agregados:](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md)
+
+- Mensuração de conversão do tipo view-through.
+- [Múltiplos endpoints de relatório](https://github.com/WICG/conversion-measurement-api/issues/29).
+- [Conversões web que começam em aplicativo iOS/Android](https://github.com/WICG/conversion-measurement-api/issues/54) .
+- Medição de aumento de conversão / incrementalidade: medição de diferenças causais no comportamento de conversão, medindo a diferença entre um grupo de teste que viu um anúncio e um grupo de controle que não viu.
+- Modelos de atribuição que não são de último clique (last-click).
+- Casos de uso que requerem grandes quantidades de informações sobre o evento de conversão. Por exemplo, valores de compra granulares ou categorias de produtos.
+
+Antes que esses recursos e outros possam ser suportados, **mais proteções de privacidade** (ruído, menos bits ou outras limitações) devem ser adicionadas à API.
+
+A discussão de possíveis recursos adicionais ocorre de forma aberta, no [repositório de propostas de **issues**](https://github.com/WICG/conversion-measurement-api/issues) da API.
+
+{% Aside %} Seu caso de uso está faltando? Você tem comentários sobre a API? [Compartilhe](#share-your-feedback). {% endAside %}
+
+### O que mais pode mudar em iterações futuras
+
+- Esta API está em um estágio experimental inicial. Em iterações futuras, esta API poderá sofrer alterações substanciais, incluindo, mas não se limitando às listadas abaixo. Seu objetivo é medir as conversões e, ao mesmo tempo, preservar a privacidade do usuário, e qualquer mudança que ajude a lidar melhor com esse caso de uso será feita.
+- API e nomenclatura de atributos podem evoluir.
+- Os dados de clique e os dados de conversão podem não exigir codificação.
+- O limite de 3 bits para dados de conversão pode ser aumentado ou diminuído.
+- [Mais recursos podem ser adicionados](#what-is-not-supported-in-this-iteration) e **mais proteções de privacidade** (ruído / menos bits / outras limitações) se forem necessários para oferecer suporte a esses novos recursos.
+
+Para acompanhar e participar de discussões sobre novos recursos, acompanhe o [repositório GitHub](https://github.com/WICG/conversion-measurement-api/issues) da proposta e envie ideias.
+
+## Experimente
+
+### Demo
+
+Experimente a [demo](https://goo.gle/demo-event-level-conversion-measurement-api). Certifique-se de seguir as instruções "Antes de começar".
+
+Envie tweets para [@maudnals](https://twitter.com/maudnals?lang=en) ou [@ChromiumDev](https://twitter.com/ChromiumDev) com qualquer pergunta sobre a demo!
+
+### Experimente a API
+
+Se você planeja experimentar a API (localmente ou com usuários finais), consulte [Usando a API de mensuração de conversão](/using-conversion-measurement).
+
+### Compartilhe seu feedback
+
+**Seu feedback é crucial** para que novas APIs de medição de conversão possam oferecer suporte a seus casos de uso e fornecer uma boa experiência de desenvolvedor.
+
+- Para relatar um bug na implementação do Chrome, [registre um bug](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A) .
+- Para compartilhar feedback e discutir casos de uso na API do Chrome, crie um novo issue ou envolva-se com os issues existentes no [repositório de propostas de API](https://github.com/WICG/conversion-measurement-api/issues). Da mesma forma, você pode discutir a API WebKit/Safari e seus casos de uso no [repositório de propostas de API](https://github.com/privacycg/private-click-measurement/issues) .
+- Para discutir casos de uso de publicidade e discutir visões com especialistas do setor: participe do [Improving Web Advertising Business Group](https://www.w3.org/community/web-adv/). Participe do [Privacy Community Group](https://www.w3.org/community/privacycg/) para discussões sobre a API WebKit/Safari.
+
+### Fique de olho
+
+- À medida em que recebemos feedback dos desenvolvedores e os casos de uso, a API Event Conversion Measurement irá evoluir com o tempo. Acompanhe o [repositório GitHub](https://github.com/WICG/conversion-measurement-api/) da proposta.
+- Acompanhe a evolução da [API Aggregate Conversion Measurement](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md) que complementará esta API.
+
+*Com muitos agradecimentos por contribuições e feedback a todos os revisores - especialmente Charlie Harrison, John Delaney, Michael Kleber e Kayce Basques.*
+
+*Imagem hero por William Warby / @wawarby em [Unsplash](https://unsplash.com/photos/WahfNoqbYnM), editada.*
diff --git a/src/site/content/pt/blog/css-is-and-where/index.md b/src/site/content/pt/blog/css-is-and-where/index.md
new file mode 100644
index 00000000000..42687d1d6f9
--- /dev/null
+++ b/src/site/content/pt/blog/css-is-and-where/index.md
@@ -0,0 +1,129 @@
+---
+title: "Novos seletores de pseudoclasse funcionais de CSS  `:is()` e `:where()`"
+subhead: Essas adições aparentemente pequenas à sintaxe do seletor CSS terão um grande impacto.
+authors:
+  - adamargyle
+description: Essas adições aparentemente pequenas à sintaxe do seletor CSS terão um grande impacto.
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/bFO3SPdt1bPIB8EylsB7.jpg
+alt: Uma biblioteca brilhante e branca, fileiras e mais fileiras de livros, com uma única pessoa no meio tentando pegar um único livro.
+tags:
+  - blog
+  - css
+date: 2021-05-27
+updated: 2021-05-27
+---
+
+Ao escrever CSS, às vezes você pode acabar com longas listas de seletores para direcionar vários elementos com as mesmas regras de estilo. Por exemplo, se você deseja ajustar a cor de quaisquer `<b>` encontradas dentro de um elemento de título, você pode escrever:
+
+```css
+h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
+  color: hotpink;
+}
+```
+
+Em vez disso, você pode usar `:is()` e melhorar a legibilidade, evitando um seletor longo:
+
+```css
+:is(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+```
+
+Legibilidade e conveniências mais curtas do seletor são apenas uma parte do valor que `:is()` e `:where()` trazem para o CSS. Nesta postagem, você descobrirá a sintaxe e o valor desses dois pseudo seletores funcionais.
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/mkyjox1HJNL0AgtX25bi.mp4", autoplay="true", loop="true", muted="true" %} <figcaption> Um visual infinito de antes e depois de usar <code>:is()</code> </figcaption></figure>
+
+### Compatibilidade do navegador
+
+O `:is` e `:where` pseudo classes são suportadas no Chromium (&gt;=88), Firefox (&gt;= 78) e Safari (&gt;=14). Consulte a tabela de [compatibilidade do navegador](https://developer.mozilla.org/docs/Web/CSS/:where#Browser_compatibility) do MDN para obter mais informações. Algumas versões mais antigas do navegador suportam o seletor `:is()` como o `:matches()` ou `-webkit-any()`. Para obter mais informações, consulte a página <a href="https://developer.mozilla.org/docs/Web/CSS/:is" data-md-type="link">`:is()`</a> no MDN.
+
+## Conheça `:is()` e `:where()`
+
+Esses são seletores de pseudo-classe funcionais, observe o `()` no final e a maneira como eles começam com `:`. Pense nisso como chamadas de função dinâmica de tempo de execução que correspondem a elementos. Ao escrever CSS, eles oferecem uma maneira de agrupar elementos no meio, no início ou no final de um seletor. Eles também podem alterar a especificidade, dando a você o poder de anular ou aumentar a especificidade.
+
+### Agrupamento de seletores
+
+Qualquer coisa que `:is()` pode fazer em relação ao agrupamento, também pode `:where()`. Isso inclui ser usado em qualquer lugar do seletor, aninhando-os e empilhando-os. Flexibilidade total de CSS que você conhece e adora. Aqui estão alguns exemplos:
+
+```css
+/* at the beginning */
+:where(h1,h2,h3,h4,h5,h6) > b {
+  color: hotpink;
+}
+
+/* in the middle */
+article :is(header,footer) > p {
+  color: gray;
+}
+
+/* at the end */
+.dark-theme :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* multiple */
+:is(.dark-theme, .dim-theme) :where(button,a) {
+  color: rebeccapurple;
+}
+
+/* stacked */
+:is(h1,h2):where(.hero,.subtitle) {
+  text-transform: uppercase;
+}
+
+/* nested */
+.hero:is(h1,h2,:is(.header,.boldest)) {
+  font-weight: 900;
+}
+```
+
+Cada um dos exemplos de seletores acima demonstra a flexibilidade dessas duas pseudo classes funcionais. Para encontrar áreas de seu código que podem se beneficiar de `:is()` ou `:where()`, procure seletores com várias vírgulas e repetição de seletor.
+
+### Use seletores simples e complexos com `:is()`
+
+Para uma atualização nos seletores, verifique o [módulo de seletores em Aprender CSS](/learn/css/selectors/#complex-selectors). Aqui estão alguns exemplos de seletores simples e complexos para ajudar a ilustrar a capacidade:
+
+```css
+article > :is(p,blockquote) {
+  color: black;
+}
+
+:is(.dark-theme.hero > h1) {
+  font-weight: bold;
+}
+
+article:is(.dark-theme:not(main .hero)) {
+  font-size: 2rem;
+}
+```
+
+{% Aside 'gotchas' %} Normalmente, ao usar uma `,` para criar uma lista de seletores, se algum dos seletores for inválido, todos os seletores serão invalidados e a lista não conseguirá combinar os elementos. Isso quer dizer que eles não perdoam os erros. O `:is()` e `:where()`[embora sejam perdoares](https://developer.mozilla.org/docs/Web/CSS/:is#forgiving_selector_parsing) e podem [tirar você de um aperto](https://css-tricks.com/almanac/selectors/i/is/#forgiving-selector-lists)! {% endAside %}
+
+Até agora, `:is()` e `:where()` são sintaticamente intercambiáveis. É hora de ver como eles são diferentes.
+
+### A diferença entre `:is()` e `:where()`
+
+Quando se trata de especificidade `:is()` e `:where()` divergem fortemente. Para uma atualização sobre a especificidade, consulte o [módulo de especificidade em Aprender CSS](/learn/css/specificity/).
+
+Resumindo
+
+- `:where()` não tem especificidade.<br> `:where()` elimina toda a especificidade na lista do seletor passada como parâmetros funcionais. Este é o primeiro recurso de seletor de seu tipo.
+- `:is()` assume a especificidade de seu seletor mais específico.<br> `:is(a,div,#id)` tem uma pontuação de especificidade de um ID, 100 pontos.
+
+Assumir o seletor de especificidade mais alta da lista só foi um problema para mim quando eu estava ficando muito animado com o agrupamento. Sempre fui capaz de melhorar a legibilidade movendo o seletor de alta especificidade para o seu próprio seletor, onde não teria tanto impacto. Aqui está um exemplo do que quero dizer:
+
+```css
+article > :is(header, #nav) {
+  background: white;
+}
+
+/* better as */
+article > header,
+article > #nav {
+  background: white;
+}
+```
+
+Com `:where()`, estou esperando para ver as bibliotecas oferecerem versões sem especificidade. A competição de especificidade entre estilos de autor e estilos de biblioteca pode chegar ao fim. Não haveria especificidade para competir ao escrever CSS. O CSS vem trabalhado em um recurso de agrupamento como este por algum tempo, ele está aqui e ainda é um território inexplorado. Divirta-se criando folhas de estilo menores e removendo as vírgulas.
+
+*Foto de [Markus Winkler](https://unsplash.com/@markuswinkler) no [Unsplash](https://unsplash.com/photos/afW1hht0NSs)*
diff --git a/src/site/content/pt/blog/css-masking/index.md b/src/site/content/pt/blog/css-masking/index.md
new file mode 100644
index 00000000000..57da13942b3
--- /dev/null
+++ b/src/site/content/pt/blog/css-masking/index.md
@@ -0,0 +1,135 @@
+---
+title: Aplique efeitos às imagens com a propriedade mask-image do CSS
+subhead: |2-
+
+  O mascaramento CSS oferece a opção de usar uma imagem como camada de máscara.
+  Isso significa que você pode usar uma imagem, um SVG ou um gradiente como sua máscara
+  para criar efeitos interessantes sem um editor de imagens.
+description: |2
+
+  O mascaramento CSS oferece a opção de usar uma imagem como camada de máscara.
+  Isso significa que você pode usar uma imagem, um SVG ou um gradiente como sua máscara,
+  para criar efeitos interessantes sem um editor de imagens.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: Um ursinho de pelúcia usando uma máscara.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+Quando você [recorta um elemento](/css-clipping) usando a propriedade `clip-path`, a área recortada se torna invisível. Se, em vez disso, você quiser tornar parte da imagem opaca ou aplicar algum outro efeito a ela, será necessário usar o mascaramento. Esta postagem explica como usar a [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) em CSS, que permite especificar uma imagem para usar como camada de máscara. Ela oferece três opções. Você pode usar um arquivo de imagem como máscara, SVG ou gradiente.
+
+## Compatibilidade do navegador
+
+A maioria dos navegadores tem suporte parcial para a propriedade de mascaramento CSS padrão. Você precisará usar o `-webkit-` além da propriedade padrão para obter a melhor compatibilidade do navegador. Consulte [Posso usar máscaras CSS?](https://caniuse.com/#feat=css-masks) para obter informações completas de suporte do navegador.
+
+Embora o suporte do navegador usando a propriedade prefixada seja bom, ao usar o mascaramento para tornar o texto na parte superior de uma imagem visível, tome cuidado com o que acontecerá se o mascaramento não estiver disponível. Pode valer a pena usar consultas de recursos para detectar suporte para `mask-image` ou `-webkit-mask-image` e fornecer um fallback legível antes de adicionar sua versão mascarada.
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* código que requer mask-image aqui. */
+}
+```
+
+## Mascarando com uma imagem
+
+A `mask-image` funciona de maneira semelhante à propriedade `background-image` Use um `url()` para passar uma imagem. Sua imagem de máscara precisa ter uma área transparente ou semitransparente.
+
+Uma área totalmente transparente fará com que a parte da imagem sob essa área fique invisível. Usar uma área semitransparente, entretanto, permitirá que parte da imagem original apareça. Você pode ver a diferença no Glitch abaixo. A primeira imagem é a imagem original de balões sem máscara. A segunda imagem tem uma máscara aplicada que tem uma estrela branca em um fundo totalmente transparente. A terceira imagem tem uma estrela branca em um fundo com uma transparência gradiente.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Neste exemplo, também estou usando a `mask-size` com um valor de `cover`. Esta propriedade funciona da mesma maneira que o [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size). Você pode usar as palavras-chave `cover` e `contain` ou dar ao fundo um tamanho usando qualquer unidade de comprimento válida ou uma porcentagem.
+
+Você também pode repetir a máscara da mesma forma que faria com uma imagem de fundo para usar uma imagem pequena como padrão de repetição.
+
+## Mascaramento com SVG
+
+Em vez de usar um arquivo de imagem como máscara, você pode usar SVG. Existem algumas maneiras pelas quais isso pode ser alcançado. A primeira é ter um elemento `<mask>` dentro do SVG e fazer referência ao ID desse elemento na propriedade `mask-image`
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balões">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="Um exemplo de uso de máscara SVG", width="699", height="490" %}</figure>
+
+A vantagem dessa abordagem é que a máscara pode ser aplicada a qualquer elemento HTML, não apenas a uma imagem. Infelizmente, o Firefox é o único navegador que oferece suporte a essa abordagem.
+
+No entanto, nem tudo está perdido, pois para o cenário mais comum de mascaramento de uma imagem, podemos incluir a imagem no SVG.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Mascaramento com gradiente
+
+Usar um gradiente CSS como máscara é uma maneira elegante de obter uma área mascarada sem a necessidade de se dar ao trabalho de criar uma imagem ou SVG.
+
+Um gradiente linear simples usado como máscara pode garantir que a parte inferior de uma imagem não fique muito escura sob uma legenda, por exemplo.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Você pode usar qualquer um dos tipos de gradiente suportados e ser o quão criativo quiser. Este próximo exemplo usa um gradiente radial para criar uma máscara circular para iluminar atrás da legenda.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Usando várias máscaras
+
+Tal como acontece com as imagens de fundo, você pode especificar várias fontes de máscara, combinando-as para obter o efeito desejado. Isso é particularmente útil se você deseja usar um padrão gerado com gradientes CSS como sua máscara. Normalmente, eles usam várias imagens de fundo e, portanto, podem ser traduzidos facilmente em uma máscara.
+
+Por exemplo, encontrei um bom padrão xadrez [neste artigo](https://cssgradient.io/blog/gradient-patterns/). O código, usando imagens de fundo, tem a seguinte aparência:
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Para transformar isso, ou qualquer outro padrão projetado para imagens de fundo, em uma máscara, você precisará substituir as propriedades `background-*` `mask` relevantes, incluindo as `-webkit` prefixadas -webkit.
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Existem alguns efeitos realmente interessantes para serem feitos aplicando padrões de gradiente às imagens. Tente remixar o Glitch e testar algumas outras variações.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Junto com o recorte, as máscaras CSS são uma forma de adicionar interesse a imagens e outros elementos HTML sem a necessidade de usar um aplicativo gráfico.
+
+*<span>Foto de <a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a> no Unsplash</span> .*
diff --git a/src/site/content/pt/blog/css-web-vitals/index.md b/src/site/content/pt/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..3e8dd6a103c
--- /dev/null
+++ b/src/site/content/pt/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: CSS para Web Vitals
+subhead: Técnicas relacionadas a CSS para otimizar o Web Vitals
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: Gradiente multicolorido
+description: Este artigo cobre técnicas relacionadas a CSS para otimizar Web Vitals.
+tags:
+  - blog
+  - performance
+  - css
+---
+
+A maneira como você escreve seus estilos e cria layouts pode ter um grande impacto no [Core Web Vitals](/learn-core-web-vitals/). Isso é particularmente verdadeiro para o [Deslocamento cumulativo de layout (CLS)](/cls) e a [Tinta com maior conteúdo (LCP)](/lcp).
+
+Este artigo abrange técnicas relacionadas a CSS para otimizar o Web Vitals. Essas otimizações são divididas por diferentes aspectos de uma página: layout, imagens, fontes, animações e carregamento. Ao longo do artigo, exploraremos como melhorar uma [página de exemplo](https://codepen.io/una/pen/vYyLKvY):
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="Captura de tela do site de exemplo", width="800", height="646" %}
+
+## Layout
+
+### Inserindo conteúdo no DOM
+
+Inserir conteúdo em uma página depois que o conteúdo circundante já foi carregado empurra todo o resto da página para baixo. Isso causa [mudanças de layout](/cls/#layout-shifts-in-detail).
+
+[Avisos de cookies](/cookie-notice-best-practices/), especialmente aqueles colocados no topo da página, são um exemplo comum desse problema. Outros elementos da página que costumam causar esse tipo de mudança de layout quando são carregados incluem anúncios e incorporações.
+
+#### Identificação
+
+A auditoria do Lighthouse "Evite grandes mudanças de layout" identifica os elementos da página que foram alterados. Para esta demonstração, os resultados são os seguintes:
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Auditoria do Lighthouse 'Evitar grandes mudanças de layout'", width="800", height="500" %}
+
+O aviso de cookies não está listado nessas descobertas porque o aviso de cookies em si não muda quando carrega. Em vez disso, faz com que os itens abaixo dele na página (ou seja, `div.hero` e `article`) mudem. Para obter mais informações sobre como identificar e corrigir mudanças de layout, consulte [Depuração de mudanças de layout](/debugging-layout-shifts).
+
+{% Aside %}
+
+O Lighthouse apenas analisa o desempenho de uma página até o evento "carregamento da página". Banners de cookies, anúncios e outros widgets às vezes não carregam até depois do carregamento da página. Essas mudanças de layout ainda afetam os usuários, mesmo se eles não forem sinalizados pelo Lighthouse.
+
+{% endAside %}
+
+#### Solução
+
+Coloque o aviso de cookies na parte inferior da página usando posicionamento absoluto ou fixo.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="Aviso de cookies exibido na parte inferior da página", width="800", height="656" %}
+
+Antes:
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+Depois:
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+Outra maneira de corrigir essa mudança de layout seria reservar espaço para o aviso do cookies na parte superior da tela. Essa abordagem é igualmente eficaz. Para obter mais informações, consulte [Práticas recomendadas de aviso de cookies](/cookie-notice-best-practices/).
+
+{% Aside %}
+
+O aviso de cookies é um dos vários elementos de página que acionam mudanças de layout quando carrega. Para nos ajudar a examinar em detalhes esses elementos da página, as etapas subsequentes de demonstração não incluirão o aviso de cookies.
+
+{% endAside %}
+
+## Imagens
+
+### Imagens e tinta com maior conteúdo (LCP)
+
+As imagens são geralmente o elemento de tinta com maior conteúdo (LCP) em uma página. Outros [elementos da página que podem ser o elemento LCP](/lcp/#what-elements-are-considered) incluem blocos de texto e imagens de pôster de vídeo. O tempo que demora para o elemento LCP carregar determina o LCP.
+
+É importante observar que o elemento LCP de uma página pode variar de carregamento de página para carregamento de página, dependendo do conteúdo que é visível para o usuário quando a página é exibida pela primeira vez. Por exemplo, nesta demonstração, o plano de fundo do aviso de cookies, a imagem principal e o texto do artigo são alguns dos elementos potenciais do LCP.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="Diagrama destacando o elemento LCP da página em diferentes cenários.", width="800", height="498" %}
+
+No site de exemplo, a imagem de fundo do aviso de cookies é, na verdade, uma imagem grande. Para melhorar o LCP, você pode pintar o gradiente em CSS, em vez de carregar uma imagem para criar o efeito.
+
+#### Solução
+
+Altere o CSS `.banner` para usar um gradiente CSS em vez de uma imagem:
+
+Antes:
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+Depois:
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### Imagens e mudanças de layout
+
+Os navegadores só podem determinar o tamanho de uma imagem depois que ela carrega. Se o carregamento da imagem ocorrer após a página ter sido renderizada, mas nenhum espaço foi reservado para a imagem, uma mudança de layout ocorre quando a imagem aparece. Na demonstração, a imagem principal está causando uma mudança de layout ao carregar.
+
+{% Aside %} O fenômeno das imagens que causam mudanças de layout é mais óbvio em situações em que as imagens demoram para carregar - por exemplo, em uma conexão lenta ou ao carregar uma imagem com um tamanho de arquivo particularmente grande. {% endAside %}
+
+#### Identificação
+
+Para identificar imagens sem `width` e `height` explícitas, use a auditoria do Lighthouse "Elementos de imagem têm largura e altura explícitas".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Auditoria do Lighthouse Elementos de imagem têm largura e altura explícitas'", width="800", height="274" %}
+
+Neste exemplo, a imagem principal e a imagem do artigo estão sem os atributos de `width` e `height`.
+
+#### Solução
+
+Defina os `width` e `height` nessas imagens para evitar mudanças de layout.
+
+Antes:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
+```
+
+Depois:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4"%} <figcaption> A imagem agora carrega sem causar uma mudança de layout. </figcaption></figure>
+
+{% Aside %} Outra abordagem para o carregamento de imagens é usar os atributos [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) e [`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) em conjunto com a especificação dos atributos `width` e `height`. Isso tem a vantagem de desempenho adicional de permitir que você veicule imagens de tamanhos diferentes para dispositivos diferentes. Para obter mais informações, consulte [Veicular imagens responsivas](/serve-responsive-images/). {% endAside %}
+
+## Fontes
+
+As fontes podem atrasar a renderização do texto e causar mudanças no layout. Como resultado, é importante fornecer fontes rapidamente.
+
+### Renderização de texto atrasada
+
+Por padrão, um navegador não renderizará imediatamente um elemento de texto se as fontes da web associadas ainda não tiverem sido carregadas. Isso é feito para evitar uma ["piscada de texto sem estilo" (FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). Em muitas situações, isso atrasa a [primeira tinta com conteúdo(FCP)](/fcp). Em algumas, isso atrasa a tinta com maior conteúdo(LCP).
+
+{% Aside %}
+
+Por padrão, os navegadores baseados em Chromium e Firefox [bloquearão a renderização de texto por até 3 segundos](https://developers.google.com/web/updates/2016/02/font-display) se a fonte da web associada não tiver sido carregada. O Safari bloqueará a renderização do texto indefinidamente. O [período de bloqueio](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline) começa quando o navegador solicita uma fonte da web. Se a fonte ainda não tiver sido carregada no final do período de bloco, o navegador renderizará o texto usando uma fonte substituta e trocará pela fonte da web assim que disponível.
+
+{% endAside %}
+
+### Mudanças de layout
+
+A troca de fontes, embora excelente para exibir conteúdo ao usuário rapidamente, tem o potencial de causar mudanças de layout. Essas mudanças de layout ocorrem quando uma fonte da web e sua fonte substituta ocupam diferentes quantidades de espaço na página. O uso de fontes com proporções semelhantes minimizará o tamanho dessas mudanças de layout.
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="Diagrama mostrando uma mudança de layout causada por uma troca de fonte", width="800", height="452" %} <figcaption> Nests exemplo, a troca de fonte fez com que os elementos da página se deslocassem cinco pixels para cima.</figcaption></figure>
+
+#### Identificação
+
+Para ver as fontes que estão sendo carregadas em uma página específica, abra a aba **Rede** no DevTools e filtre por **Fonte**. As fontes podem ser arquivos grandes. Portanto, usar apenas menos fontes geralmente é melhor para o desempenho.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="Captura de tela de uma fonte exibida no DevTools", width="800", height="252" %}
+
+Para ver quanto tempo leva para a fonte ser solicitada, clique na aba **Tempo**. Quanto antes uma fonte for solicitada, mais cedo ela poderá ser carregada e usada.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="Captura de tela da aba 'Tempo' no DevTools", width="800", height="340" %}
+
+Para ver a cadeia de solicitação de uma fonte, clique na aba **Iniciador**. De modo geral, quanto mais curta a cadeia de solicitação, mais cedo a fonte pode ser solicitada.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="Captura de tela da aba 'Iniciador' no DevTools", width="800", height="189" %}
+
+#### Solução
+
+Esta demonstração usa a API Google Fonts. O Google Fonts oferece a opção de carregar fontes por meio de `<link>` ou uma instrução `@import`. O fragmento de código `<link>` inclui uma dica de recurso de `preconnect`. Isso deve resultar em uma entrega mais rápida da folha de estilo do que usar a versão `@import`.
+
+Em um nível muito alto, você pode pensar nas [dicas de recursos](https://www.w3.org/TR/resource-hints/#resource-hints) como uma forma de indicar ao navegador que precisará configurar uma conexão específica ou fazer download de um recurso específico. Como resultado, o navegador priorizará essas ações. Ao usar dicas de recursos, lembre-se de que priorizar uma ação específica tira os recursos do navegador de outras ações. Portanto, as dicas de recursos devem ser usadas com atenção e não para tudo. Para obter mais informações, consulte [Estabelecer conexões de rede antecipadamente para melhorar a velocidade percebida da página](/preconnect-and-dns-prefetch/).
+
+Remova a seguinte declaração `@import` de sua folha de estilo:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+Adicione o seguinte `<link>` ao `<head>` do documento:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+Essas tags de link instruem o navegador a estabelecer uma conexão inicial com as origens usadas pelo Google Fonts e a carregar a folha de estilo que contém a declaração da fonte para Montserrat e Roboto. Estas marcas `<link>` devem ser colocadas o mais cedo possível no `<head>`.
+
+{% Aside %}
+
+Para carregar apenas um subconjunto de uma fonte do Google Fonts, adicione o parâmetro [`?text=`](https://developers.google.com/fonts/docs/getting_started) da API. Por exemplo, `?text=ABC` carrega apenas os caracteres necessários para renderizar "ABC". Essa é uma boa maneira de reduzir o tamanho do arquivo de uma fonte.
+
+{% endAside %}
+
+## Animações
+
+A principal maneira pela qual as animações afetam o Web Vitals é quando causam mudanças de layout. Existem dois tipos de animações que você deve evitar usar: [animações que acionam o layout](/animations-guide/#triggers) e efeitos "semelhantes a animação" que movem os elementos da página. Normalmente, essas animações podem ser substituídas por equivalentes de maior desempenho usando propriedades do CSS, como [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform), [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) e [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter). Para obter mais informações, consulte [Como criar animações CSS de alto desempenho](/animations/).
+
+### Identificação
+
+A auditoria do Lighthouse "Evitar animações não compostas" pode ser útil para identificar animações sem desempenho.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Auditoria do Lighthouse 'Evitar animações não compostas'", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+A auditoria do Lighthouse "Evitar animações não compostas" identifica apenas *animações CSS* sem desempenho. As animações baseadas em JavaScript (por exemplo, usando [`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) para "animar" um elemento) são ruins para o desempenho, mas não serão sinalizadas por esta auditoria.
+
+{% endAside %}
+
+### Solução
+
+Altere a sequência de animação `slideIn` para usar `transform: translateX()` vez de fazer a transição da propriedade `margin-left`.
+
+Antes:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+Depois de:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## CSS crítico
+
+As folhas de estilo bloqueiam a renderização. Isso significa que o navegador encontra uma folha de estilo, ele irá parar de baixar outros recursos até que tenha baixado e analisado a folha de estilo. Isso pode atrasar o LCP. Para melhorar o desempenho, considere [remover o CSS não utilizado](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/), [embutir o CSS crítico embutido](/extract-critical-css/) e [adiar o CSS não crítico](/defer-non-critical-css/#optimize).
+
+## Conclusão
+
+Embora ainda haja espaço para melhorias adicionais (por exemplo, usando [compactação de imagem](/use-imagemin-to-compress-images/) para fornecer imagens mais rapidamente), essas alterações melhoraram significativamente os Web Vitals deste site. Se este fosse um site real, a próxima etapa seria [coletar dados de desempenho de usuários reais](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data) para avaliar se ele está [atendendo aos limites do Web Vitals para a maioria dos usuários](/vitals-measurement-getting-started/#data-interpretation). Para obter mais informações sobre Web Vitals, consulte [Saiba mais  sobre o Web Vitals](/learn-core-web-vitals/).
diff --git a/src/site/content/pt/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/pt/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..6ac94be9191
--- /dev/null
+++ b/src/site/content/pt/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Definindo os limites das métricas Core Web Vitals
+subhead: A pesquisa e a metodologia por trás dos limites das Core Web Vitals
+authors:
+  - bmcquade
+description: A pesquisa e a metodologia por trás dos limites das Core Web Vitals
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: A pesquisa e a metodologia por trás dos limites das Core Web Vitals
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Core Web Vitals](/vitals/#core-web-vitals) são um conjunto de métricas de campo que medem aspectos importantes da experiência do usuário no mundo real na web. Core Web Vitals inclui métricas, bem como limites-alvo para cada métrica, que ajudam os desenvolvedores a compreender qualitativamente se a experiência de seu site é "boa", "precisa melhorar" ou é "ruim". Este artigo irá explicar a abordagem usada para escolher os limites para as métricas do Core Web Vitals em geral, bem como explicar como os limites para cada métrica específica do Core Web Vitals foram escolhidos.
+
+## Atualização: métricas e limites da Core Web Vitals
+
+Em 2020, o Core Web Vitals são três métricas: Largest Contentful Paint - LCP (Maior renderização de conteúdo), First Input Delay - FID (Primeiro atraso de entrada) e Cumulative Layout Shift - CLS (Deslocamento cumulativo de layout). Cada métrica mede um aspecto diferente da experiência do usuário: a LCP mede a velocidade de carregamento percebida e marca o ponto na linha do tempo de carregamento da página quando o conteúdo principal da página provavelmente já foi carregado; A FID mede a responsividade e quantifica a experiência que os usuários sentem ao tentar interagir pela primeira vez com a página; e a CLS mede a estabilidade visual e mede a quantidade de mudanças inesperadas de layout do conteúdo visível da página.
+
+Cada métrica Core Web Vitals tem limites associados, que categorizam o desempenho como "bom", "precisa melhorar" ou "ruim":
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Recomendações de limites para Largest Contentful Paint", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Recomendações de limites para First Input Delay", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Recomendações de limites para Cumulative Layout Shift", width="400", height="350" %}
+</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>Bom</th>
+      <th>Ruim</th>
+      <th>Percentil</th>
+    </tr>
+    <tr>
+      <td>Largest Contentful Paint (LCP)</td>
+      <td>≤2500ms</td>
+      <td>&gt; 4000ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>First Input Delay (FID)</td>
+      <td>≤100ms</td>
+      <td>&gt; 300ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>Cumulative Layout Shift (CLS)</td>
+      <td>≤0,1</td>
+      <td>&gt; 0,25</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">Além disso, para classificar o desempenho geral de uma página ou site, usamos o valor do 75º percentil de todas as visualizações de página dessa página ou site. Em outras palavras, se pelo menos 75 por cento das visualizações de página de um site atingirem o limite "bom", o site será classificado como tendo um desempenho "bom" para essa métrica. Por outro lado, se pelo menos 25% das visualizações de página atingirem o limite "ruim", o site será classificado como tendo desempenho "ruim". Assim, por exemplo, uma LCP do 75º percentil de 2 segundos é classificada como "boa", enquanto uma LCP do 75º percentil de 5 segundos é classificada como "ruim".</p>
+<h2 data-md-type="header" data-md-header-level="2">Critérios para os limites das métricas Core Web Vitals</h2>
+<p data-md-type="paragraph">Ao estabelecer limites para as métricas do Core Web Vitals, primeiro identificamos os critérios que cada limite deve atender. Abaixo, eu explico os critérios que usamos no Google para avaliar os limites de métrica do Core Web Vitals em 2020. As seções subsequentes irão se aprofundar sobre como esses critérios foram aplicados para selecionar os limites para cada métrica em 2020. Nos próximos anos, prevemos fazer melhorias e adições aos critérios e limites para deixar nossa capacidade de medir excelentes experiências do usuário no rede ainda melhor.</p>
+<h3 data-md-type="header" data-md-header-level="3">Alta qualidade da experiência do usuário</h3>
+<p data-md-type="paragraph">Nosso principal objetivo é otimizar para o usuário para a qualidade de sua experiência. Diante disso, nosso objetivo é garantir que as páginas que atendem aos "bons" limites do Core Web Vitals proporcionem uma experiência de usuário de alta qualidade.</p>
+<p data-md-type="paragraph">Para identificar um limite associado à experiência do usuário de alta qualidade, olhamos para a percepção humana e a pesquisa de HCI. Embora essa pesquisa às vezes seja resumida usando um único limite fixo, descobrimos que a pesquisa subjacente é normalmente expressa como uma gama de valores. Por exemplo, a pesquisa sobre a quantidade de tempo que os usuários normalmente esperam antes de perder o foco às vezes é descrita como 1 segundo, enquanto que a pesquisa subjacente é, na verdade, expressa como um intervalo, de centenas de milissegundos a vários segundos. O fato de que os limites de percepção variam dependendo do usuário e do contexto é ainda suportado por dados de métricas agregados e anônimos do Chrome, o que mostra que não há uma quantidade de tempo única que os usuários esperam para uma página web exibir o conteúdo antes de abortar o carregamento. Em vez disso, esses dados mostram uma distribuição uniforme e contínua. Para uma análise mais aprofundada dos limites de percepção humana e pesquisas relevantes de HCI, veja <a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">The Science Behind Web Vitals</a> .</p>
+<p data-md-type="paragraph">Nos casos em que pesquisas relevantes sobre a experiência do usuário estão disponíveis para uma determinada métrica e há um consenso razoável sobre a faixa de valores na literatura, usamos essa faixa como entrada para orientar nosso processo de seleção de limite. Nos casos em que pesquisas relevantes sobre a experiência do usuário não estão disponíveis, o que pode ocorrer com as novas métricas, tais como Cumulative Layout Shift, avaliamos as páginas do mundo real que atendem a diferentes limites de candidatos para uma métrica, para identificar um limite que resulte em uma boa experiência do usuário.</p>
+<h3 data-md-type="header" data-md-header-level="3">Alcançável a partir do conteúdo web existente</h3>
+<p data-md-type="paragraph">Além disso, para garantir que os proprietários de sites possam otimizar seus sites para atender aos "bons" limites, exigimos que esses limites sejam alcançáveis para o conteúdo existente na web. Por exemplo, embora zero milissegundos seja um limite "bom" de LCP ideal, resultando em experiências de carregamento instantâneo, um limite de zero milissegundos não é alcançável na prática na maioria dos casos, devido às latências de processamento de rede e dispositivo. Portanto, zero milissegundos não é um limite razoável de LCP "bom" para Core Web Vitals.</p>
+<p data-md-type="paragraph">Ao avaliar os candidatos a limites "bons" do Core Web Vitals, verificamos se esses limites são alcançáveis, com base nos dados do <a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Relatório de Experiência do Usuário Chrome</a> (CrUX). Para confirmar que um limite é alcançável, exigimos que pelo menos 10% das <a href="/same-site-same-origin/#origin" data-md-type="link">origens</a> atualmente atendam ao limite "bom". Além disso, para garantir que sites bem otimizados não sejam classificados incorretamente devido à variabilidade nos dados de campo, também verificamos se o conteúdo bem otimizado atende consistentemente ao limite "bom".</p>
+<p data-md-type="paragraph">Por outro lado, estabelecemos o limite "ruim" identificando um nível de desempenho que apenas uma minoria das origens não está atingindo atualmente. A menos que haja pesquisas disponíveis relevantes para definir um limite "ruim", por default, 10-30% das origens com pior desempenho são classificadas como "ruim".</p>
+<h3 data-md-type="header" data-md-header-level="3">Considerações finais sobre os critérios</h3>
+<p data-md-type="paragraph">Ao avaliar os limites dos candidatos, descobrimos que os critérios às vezes estavam em conflito uns com os outros. Por exemplo, pode haver uma tensão entre um limite ser consistentemente alcançável e garantir boas experiências do usuário consistentemente. Além disso, dado que a pesquisa de percepção humana normalmente fornece uma gama de valores, e as métricas de comportamento do usuário mostram mudanças graduais no comportamento, descobrimos que muitas vezes não há um único limite "correto" para uma métrica. Portanto, nossa abordagem para o 2020 Core Web Vitals tem sido escolher os limites que melhor atendem aos critérios acima, embora reconhecendo que não há um limite perfeito e que às vezes podemos precisar escolher entre vários candidatos razoáveis a limites. Em vez de perguntar "qual é o limite perfeito?" em vez disso, nos concentramos em perguntar "qual candidato a limite que melhor atende aos nossos critérios?"</p>
+<h2 data-md-type="header" data-md-header-level="2">Escolha de percentil</h2>
+<p data-md-type="paragraph">Conforme observado anteriormente, para classificar o desempenho geral de uma página ou site, usamos o valor do 75º percentil de todas as visitas a essa página ou site. O 75º percentil foi escolhido com base em dois critérios. Primeiro, o percentil deve garantir que a maioria das visitas a uma página ou site tenham o nível de desempenho desejado. Em segundo lugar, o valor no percentil escolhido não deve ser excessivamente impactado por pontos fora da curva.</p>
+<p data-md-type="paragraph">Esses objetivos são um tanto contraditórios. Para satisfazer a primeira meta, um percentil mais alto é normalmente a melhor escolha. No entanto, com percentis mais altos, a probabilidade de o valor resultante ser impactado por pontos fora da curva também aumenta. Se acontecer de algumas visitas a um site ocorrerem em conexões de rede instáveis que resultam em amostras LCP excessivamente grandes, não queremos que nossa classificação de site seja decidida por essas amostras discrepantes. Por exemplo, se estivéssemos avaliando o desempenho de um site com 100 visitas usando um percentil alto, como o 95º, seriam necessárias apenas 5 amostras de valores discrepantes para o valor do 95º percentil ser afetado pelos valores discrepantes.</p>
+<p data-md-type="paragraph">Dado que essas metas são um pouco contraditórias, após a análise, concluímos que o 75º percentil atinge um equilíbrio razoável. Usando o 75º percentil, sabemos que a maioria das visitas ao site (3 de 4) atingiu o nível de desempenho desejado ou melhor. Além disso, o valor do 75º percentil tem menos probabilidade de ser afetado por pontos fora da curva. Voltando ao nosso exemplo, para um site com 100 visitas, 25 dessas visitas precisariam relatar amostras grandes de pontos fora da curva para o valor no 75º percentil a ser afetado por esses pontos. Embora seja possível 25 de 100 amostras serem discrepantes, isso é muito menos provável do que para o caso do 95º percentil.</p>
+<h2 data-md-type="header" data-md-header-level="2">Largest Contentful Paint (LCP)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Qualidade da experiência</h3>
+<p data-md-type="paragraph">Um segundo é frequentemente citado como a quantidade de tempo que um usuário irá esperar antes de começar a perder o foco em uma tarefa. Em uma inspeção mais detalhada de pesquisas relevantes, descobrimos que um segundo é uma aproximação para descrever uma gama de valores, de aproximadamente várias centenas de milissegundos a vários segundos.</p>
+<p data-md-type="paragraph">Duas fontes comumente citadas para o limite de um segundo são <a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">Card et al</a> e <a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">Miller</a>. Card define um limite de "resposta imediata" de um segundo, citando as <a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">Teorias Unificadas de Cognição</a> de Newell. Newell explica as respostas imediatas como "respostas que devem ser feitas a algum estímulo dentro de <em data-md-type="emphasis">aproximadamente um segundo</em> (isto é, aproximadamente de ~ 0,3s a ~ 3s)." Isso segue a discussão de Newell sobre "restrições em tempo real na cognição", onde se observa que "as interações com o ambiente que evocam considerações cognitivas ocorrem na ordem dos segundos", que variam de aproximadamente 0,5 a 2-3 segundos. Miller, outra fonte frequentemente citada para o limite de um segundo, observa que "tarefas que os humanos podem e irão realizar nas comunicações com máquinas terão suas características alteradas consideravelmente se os atrasos de resposta forem maiores que dois segundos ou algo em torno disso."</p>
+<p data-md-type="paragraph">A pesquisa de Miller e Card descreve a quantidade de tempo que um usuário irá esperar, antes de perder o foco, como um intervalo de aproximadamente 0,3 a 3 segundos, o que sugere que nosso limite "bom" de LCP deve estar nesta faixa. Além disso, dado que o limite "bom" da First Contentful Paint existente é de um segundo e que a Largest Contentful Paint normalmente ocorre após a First Contentful Paint, restringimos ainda mais nossa faixa de candidatos a limites de LCP, de 1 segundo a 3 segundos. Para escolher o limite nesta faixa que melhor atende aos nossos critérios, examinamos abaixo a possibilidade de alcançar esses candidatos a limites.</p>
+<h3 data-md-type="header" data-md-header-level="3">Possibilidade de realização</h3>
+<p data-md-type="paragraph">Usando os dados do CrUX, podemos determinar a porcentagem de origens na web que atendem aos limites "bons" de nosso candidato LCP.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de origens CrUX classificadas como "boas" (para candidatos a limites de LCP)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1 segundo</th>
+      <th>1,5 segundos</th>
+      <th>2 segundos</th>
+      <th>2,5 segundos</th>
+      <th>3 segundos</th>
+    </tr>
+    <tr>
+      <td><strong>telefone</strong></td>
+      <td>3,5%</td>
+      <td>13%</td>
+      <td>27%</td>
+      <td>42%</td>
+      <td>55%</td>
+    </tr>
+    <tr>
+      <td><strong>desktop</strong></td>
+      <td>6,9%</td>
+      <td>19%</td>
+      <td>36%</td>
+      <td>51%</td>
+      <td>64%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Embora menos de 10% das origens atendam ao limite de 1 segundo, todos os outros limites de 1,5 a 3 segundos atendem ao nosso requisito de que pelo menos 10% das origens atendam ao limite "bom" e, portanto, ainda são candidatos válidos.</p>
+<p data-md-type="paragraph">Além disso, para garantir que o limite escolhido seja consistentemente atingível para sites bem otimizados, analisamos o desempenho do LCP para sites de alto desempenho em toda a web, para determinar quais limites são consistentemente atingíveis para esses sites. Especificamente, nosso objetivo é identificar um limite que seja consistentemente atingível no 75º percentil para sites de melhor desempenho. Descobrimos que os limites de 1,5 e 2 segundos não são consistentemente alcançáveis, enquanto 2,5 segundos são consistentemente alcançáveis.</p>
+<p data-md-type="paragraph">Para identificar um limite "ruim" para LCP, usamos dados CrUX para identificar um limite atingido pela maioria das origens:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de origens CrUX classificadas como "ruins" (para candidatos a limites de LCP)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3 segundos</th>
+      <th>3,5 segundos</th>
+      <th>4 segundos</th>
+      <th>4,5 segundos</th>
+      <th>5 segundos</th>
+    </tr>
+    <tr>
+      <td><strong>telefone</strong></td>
+      <td>45%</td>
+      <td>35%</td>
+      <td>26%</td>
+      <td>20%</td>
+      <td>15%</td>
+    </tr>
+    <tr>
+      <td><strong>desktop</strong></td>
+      <td>36%</td>
+      <td>26%</td>
+      <td>19%</td>
+      <td>14%</td>
+      <td>10%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Para um limite de 4 segundos, cerca de 26% das origens de telefone e 21% das origens de desktop seriam classificadas como ruins. Isto cai em nossa faixa-alvo de 10-30%, então concluímos que 4 segundos é um limite "ruim" aceitável.</p>
+<p data-md-type="paragraph">Portanto, concluímos que 2,5 segundos é um limite "bom" razoável e 4 segundos é um limite "ruim" razoável para a Largest Contentful Paint.</p>
+<h2 data-md-type="header" data-md-header-level="2">First Input Delay (FID)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Qualidade da experiência</h3>
+<p data-md-type="paragraph">A pesquisa é razoavelmente consistente ao concluir que atrasos no feedback visual de até cerca de 100 ms são percebidos como sendo causados por uma fonte associada, como uma entrada do usuário. Isto sugere que um limite "bom" de 100 ms para First Input Delay é provavelmente apropriado como um valor mínimo: se o atraso para processamento de entrada exceder 100 ms, não há chance de outras etapas de processamento e renderização serem concluídas a tempo.</p>
+<p data-md-type="paragraph">Os tempos de resposta comumente citados por Jakob Nielsen<a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">: Os 3 limites importantes</a> definem 0,1 segundo como o limite para que o usuário sinta que o sistema está reagindo instantaneamente. Nielsen cita Miller e Card, que cita <a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">The Perception of Causality</a>, de Michotte, de 1962. Na pesquisa de Michotte, aos participantes de um experimento são mostrados "dois objetos em uma tela. O objeto A parte e se move em direção a B. Ele para no momento em que entra em contato com B, enquanto este último começa a se mover e se afasta de A." Michotte varia o intervalo de tempo entre o momento em que o objeto A para e o momento em que o objeto B começa a se mover. Michotte descobre que, para atrasos de até cerca de 100 ms, os participantes têm a impressão de que o objeto A causa o movimento do objeto B. Para atrasos de cerca de 100 ms a 200 ms, a percepção de causalidade é mista, e para atrasos de mais de 200 ms, o movimento do objeto B não é mais visto como tendo sido causado pelo Objeto A.</p>
+<p data-md-type="paragraph">Da mesma forma, Miller define um limite de resposta para "Resposta à ativação de controle" como "a indicação de ação dada, normalmente, pelo movimento de uma chave, interruptor ou outro membro de controle que sinaliza que foi fisicamente ativado. Esta resposta deve ser ... percebida como parte da ação mecânica induzida pelo operador. Atraso de tempo: Não mais do que 0,1 segundo "e mais tarde" o atraso entre o pressionamento de uma tecla e o feedback visual não deve ser mais do que 0,1 a 0,2 segundos ".</p>
+<p data-md-type="paragraph">Mais recentemente, em <a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">Towards the Temporally Perfect Virtual Button</a>, Kaaresoja et al investigaram a percepção de simultaneidade entre o toque de um botão virtual numa tela sensível ao toque e o feedback visual subsequente indicando que o botão foi tocado, para vários atrasos. Quando o atraso entre o pressionamento do botão e o feedback visual foi de 85ms ou menos, os participantes relataram que o feedback visual apareceu simultaneamente com o pressionamento do botão 75% das vezes. Além disso, para atrasos de 100ms ou menos, os participantes relataram uma qualidade percebida consistentemente alta do pressionamento do botão, com a qualidade percebida caindo para atrasos de 100ms a 150ms, e atingindo níveis muito baixos para atrasos de 300ms.</p>
+<p data-md-type="paragraph">Diante do exposto, concluímos que a pesquisa aponta para uma faixa de valores em torno de 100 ms como limite apropriado de First Input Delay para Web Vitals. Além disso, como os usuários relataram níveis de qualidade baixos para atrasos de 300 ms ou mais, 300 ms se apresenta como um limite "ruim" razoável.</p>
+<h3 data-md-type="header" data-md-header-level="3">Possibilidade de realização</h3>
+<p data-md-type="paragraph">Usando dados do CrUX, determinamos que a maioria das origens na web atendem ao limite "bom" do FID de 100 ms no 75º percentil:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de origens CrUX classificadas como "boas" para o limite FID de 100 ms</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100ms</th>
+    </tr>
+    <tr>
+      <td><strong>telefone</strong></td>
+      <td>78%</td>
+    </tr>
+    <tr>
+      <td><strong>desktop</strong></td>
+      <td>&gt; 99%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Além disso, observamos que os principais sites da web conseguem atingir esse limite de forma consistente no 75º percentil (e muitas vezes no 95º percentil).</p>
+<p data-md-type="paragraph">Diante do exposto, concluímos que 100 ms é um limite "bom" razoável para a FID.</p>
+<h2 data-md-type="header" data-md-header-level="2">Cumulative Layout Shift (CLS)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Qualidade da experiência</h3>
+<p data-md-type="paragraph">O Cumulative Layout Shift - CLS (deslocamento cumulativo de layout) é uma nova métrica que mede o quanto o conteúdo visível de uma página muda. Como CLS é uma métrica nova, não temos conhecimento de pesquisas que possam informar diretamente os seus limites. Assim, para identificar um limite que esteja alinhado com as expectativas do usuário, avaliamos as páginas do mundo real com diferentes quantidades de mudança de layout, para determinar a quantidade máxima de mudança que é percebida como aceitável antes de causar interrupções significativas ao consumir o conteúdo da página. Em nossos testes internos, descobrimos que os níveis de mudança de 0,15 e acima foram consistentemente percebidos como perturbadores, enquanto as mudanças de 0,1 e abaixo foram perceptíveis, mas não excessivamente perturbadoras. Assim, embora a mudança de layout zero seja ideal, concluímos que valores de até 0,1 são candidatos a limites "bons" de CLS.</p>
+<h3 data-md-type="header" data-md-header-level="3">Possibilidade de realização</h3>
+<p data-md-type="paragraph">Com base nos dados CrUX, podemos ver que quase 50% das origens têm CLS de 0,05 ou menos.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de origens CrUX classificadas como "boas" (para candidatos a limites de CLS)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0,05</th>
+      <th>0,1</th>
+      <th>0,15</th>
+    </tr>
+    <tr>
+      <td><strong>telefone</strong></td>
+      <td>49%</td>
+      <td>60%</td>
+      <td>69%</td>
+    </tr>
+    <tr>
+      <td><strong>desktop</strong></td>
+      <td>42%</td>
+      <td>59%</td>
+      <td>69%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Embora os dados do CrUX sugiram que 0,05 pode ser um limite "bom" razoável para CLS, reconhecemos que existem alguns casos de uso em que é difícil evitar mudanças de layout perturbadoras. Por exemplo, para conteúdo incorporado de terceiros, como incorporações de mídia social, a altura do conteúdo incorporado às vezes não é conhecida até que termine de carregar, o que pode levar a uma mudança de layout maior que 0,05. Assim, concluímos que, embora muitas origens atendam ao limite de 0,05, o limite ligeiramente menos rigoroso do CLS de 0,1 atinge um melhor equilíbrio entre a qualidade da experiência e a capacidade de realização. Esperamos que, daqui para frente, o ecossistema da web identifique soluções para lidar com mudanças de layout causadas por incorporações de terceiros, o que permitiria o uso de um limite CLS "bom" mais rigoroso de 0,05 ou 0 em uma iteração futura dos Core Web Vitals.</p>
+<p data-md-type="paragraph">Além disso, para determinar um limite "ruim" para CLS, usamos dados CrUX para identificar um limite atingido pela maioria das origens:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% de origens CrUX classificadas como "ruins" (para candidatos a limites de CLS)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0,15</th>
+      <th>0,2</th>
+      <th>0,25</th>
+      <th>0,3</th>
+    </tr>
+    <tr>
+      <td><strong>telefone</strong></td>
+      <td>31%</td>
+      <td>25%</td>
+      <td>20%</td>
+      <td>18%</td>
+    </tr>
+    <tr>
+      <td><strong>desktop</strong></td>
+      <td>31%</td>
+      <td>23%</td>
+      <td>18%</td>
+      <td>16%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Para um limite de 0,25, cerca de 20% das origens de telefone e 18% das origens de desktop seriam classificadas como "ruins". Isto cai em nossa faixa-alvo de 10-30%, então concluímos que 0,25 é um limite "ruim" aceitável.</p>
diff --git a/src/site/content/pt/blog/devices-introduction/index.md b/src/site/content/pt/blog/devices-introduction/index.md
new file mode 100644
index 00000000000..a76d3b0565e
--- /dev/null
+++ b/src/site/content/pt/blog/devices-introduction/index.md
@@ -0,0 +1,99 @@
+---
+title: Acessando dispositivos de hardware na web
+subhead: |2
+
+  Escolha a API apropriada para se comunicar com um dispositivo de hardware de sua escolha.
+description: |2
+
+  Este artigo ajuda os desenvolvedores da Web a escolher a API de hardware certa com base em um determinado dispositivo.
+authors:
+  - beaufortfrancois
+date: 2021-02-12
+updated: 2021-11-16
+hero: image/admin/vAnNpGQruw5EUXxob47V.jpg
+alt: Uma mulher sentada em frente a uma foto de mesa de madeira.
+tags:
+  - blog
+  - capabilities
+  - devices
+---
+
+O objetivo deste guia é ajudá-lo a escolher a melhor API para se comunicar com um dispositivo de hardware (por exemplo, webcam, microfone, etc.) na web. Por "melhor", quero dizer que oferece tudo o que você precisa com o mínimo de trabalho. Em outras palavras, você conhece o caso de uso geral que deseja resolver (por exemplo, acessar vídeo), mas não sabe qual API usar ou se pergunta se há outra maneira de fazer isso.
+
+Um problema que normalmente vejo os desenvolvedores da web cairem é pular para APIs de baixo nível sem aprender sobre as APIs de nível superior que são mais fáceis de implementar e fornecem uma UX melhor. Portanto, este guia começa recomendando APIs de nível superior primeiro, mas também menciona APIs de nível inferior caso você tenha determinado que a API de nível superior não atende às suas necessidades.
+
+## 🕹 Receba eventos de entrada deste dispositivo {: #input}
+
+Tente ouvir eventos de [teclado](https://developer.mozilla.org/docs/Web/API/KeyboardEvent) e [ponteiro.](https://developer.mozilla.org/docs/Web/API/Pointer_events) Se este dispositivo for um controlador de jogo, use a [API](/gamepad/) do Gamepad para saber quais botões estão sendo pressionados e quais eixos são movidos.
+
+Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 📸 Acesse áudio e vídeo a partir deste dispositivo {: #audio-video}
+
+Use [MediaDevices.getUserMedia ()](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) para obter fluxos de áudio e vídeo ao vivo a partir deste dispositivo e aprender sobre a [captura de áudio e vídeo](https://www.html5rocks.com/en/tutorials/getusermedia/intro/) . Você também pode [controlar a panorâmica, inclinação e zoom da câmera](/camera-pan-tilt-zoom/) e outras configurações da câmera, como [brilho e contraste](https://developers.google.com/web/updates/2016/12/imagecapture) , e até mesmo [tirar fotos](https://beaufortfrancois.github.io/sandbox/image-capture/playground) . [O Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API) pode ser usado para adicionar efeitos ao áudio, criar visualizações de áudio ou aplicar efeitos espaciais (como panorâmica). Veja [como traçar o perfil de desempenho de aplicativos de áudio da web](/profiling-web-audio-apps-in-chrome/) no Chrome também.
+
+Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🖨 Imprima neste dispositivo {: #print}
+
+Use [window.print ()](https://developer.mozilla.org/docs/Web/API/Window/print) para abrir uma caixa de diálogo do navegador que permite ao usuário escolher este dispositivo como um destino para imprimir o documento atual.
+
+Se isso não funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🔐 Autentique-se com este dispositivo {: #auth}
+
+Use o [WebAuthn](https://webauthn.io/) para criar uma credencial de chave pública forte, atestada e com escopo de origem com este dispositivo de segurança de hardware para autenticar usuários. Ele suporta o uso de Bluetooth, NFC e autenticadores U2F ou FIDO2 em roaming USB - também conhecidos como chaves de segurança - bem como um autenticador de plataforma, que permite aos usuários autenticar com suas impressões digitais ou bloqueios de tela. Confira [Construir seu primeiro aplicativo WebAuthn](https://developers.google.com/codelabs/webauthn-reauth) .
+
+Se este dispositivo for outro tipo de dispositivo de segurança de hardware (por exemplo, uma carteira de criptomoeda), uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🗄 Acesse arquivos neste dispositivo {: #files}
+
+Use a [API de acesso](/file-system-access/) ao sistema de arquivos para ler e salvar alterações diretamente em arquivos e pastas no dispositivo do usuário. Se não estiver disponível, use a [API de arquivo](https://developer.mozilla.org/docs/Web/API/File/Using_files_from_web_applications) para solicitar ao usuário que selecione os arquivos locais em uma caixa de diálogo do navegador e, em seguida, leia o conteúdo desses arquivos.
+
+Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🧲 Acessar sensores neste dispositivo {: #sensors}
+
+Use a [API Generic Sensor](/generic-sensor/) para ler os valores brutos dos sensores de movimento (por exemplo, acelerômetro ou giroscópio) e sensores ambientais (por exemplo, luz ambiente, magnetômetro). Se não estiver disponível, use os eventos [DeviceMotion e DeviceOrientation](/device-orientation/) para obter acesso ao acelerômetro, giroscópio e bússola integrados em dispositivos móveis.
+
+Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🛰 Acesse as coordenadas GPS neste dispositivo {: #gps}
+
+Use a [API de geolocalização](/user-location/) para obter a latitude e longitude da posição atual do usuário neste dispositivo.
+
+Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 🔋 Verifique a bateria deste dispositivo {: #battery}
+
+Use a [API de bateria](https://developer.mozilla.org/docs/Web/API/Battery_Status_API) para obter informações do host sobre o nível de carga da bateria e ser notificado quando o nível da bateria ou o status de carga mudar.
+
+Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira [Descubra como se comunicar com seu dispositivo](#discover) para iniciar sua jornada.
+
+## 📞 Comunique-se com este dispositivo pela rede {: #network}
+
+Na rede local, use a [API de reprodução remota](https://www.chromestatus.com/feature/5778318691401728) para transmitir áudio e/ou vídeo em um dispositivo de reprodução remoto (por exemplo, uma TV inteligente ou um alto-falante sem fio) ou use a [API de apresentação](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays) para renderizar uma página da web em uma segunda tela (por exemplo, uma tela secundária conectada com um cabo HDMI ou uma smart TV com conexão sem fio).
+
+Se este dispositivo expõe um servidor da web, use a [API Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API) e/ou [WebSockets](https://developer.mozilla.org/docs/Web/API/WebSockets_API) para buscar alguns dados deste dispositivo acessando os terminais apropriados. Embora os soquetes TCP e UDP não estejam disponíveis na web, verifique o [WebTransport](/webtransport/) para lidar com conexões de rede interativas, bidirecionais e multiplexadas. Observe que o [WebRTC](/webrtc-standard-announcement/) também pode ser usado para comunicar dados em tempo real com outros navegadores usando um protocolo ponto a ponto.
+
+## 🧱 Descubra como se comunicar com seu dispositivo {: #discover}
+
+A decisão de qual API de baixo nível você deve usar é determinada pela natureza de sua conexão física com o dispositivo. Se for sem fio, verifique o Web NFC para conexões sem fio de curto alcance e Web Bluetooth para dispositivos sem fio próximos.
+
+- Com o [Web NFC](/nfc) , leia e escreva neste dispositivo quando ele estiver próximo ao dispositivo do usuário (geralmente 5–10 cm, 2–4 polegadas). Ferramentas como [NFC TagInfo da NXP](https://play.google.com/store/apps/details?id=com.nxp.taginfolite) permitem que você navegue no conteúdo deste dispositivo para fins de engenharia reversa.
+
+- Com o [Web Bluetooth](/bluetooth/) , conecte-se a este dispositivo por meio de uma conexão Bluetooth Low Energy. Deve ser muito fácil se comunicar com ele quando ele usa serviços Bluetooth GATT padronizados (como o serviço de bateria), pois seu comportamento é [bem documentado](https://www.bluetooth.com/specifications/gatt/) . Caso contrário, neste ponto, você deve encontrar alguma documentação de hardware para este dispositivo ou fazer engenharia reversa nele. Você pode usar ferramentas externas como [nRF Connect for Mobile](https://play.google.com/store/apps/details?id=no.nordicsemi.android.mcp) e ferramentas de navegador integradas, como a página interna `about://bluetooth-internals` em navegadores baseados em Chromium para isso. Confira a [engenharia reversa de uma lâmpada Bluetooth](https://urish.medium.com/reverse-engineering-a-bluetooth-lightbulb-56580fcb7546) da Uri Shaked. Observe que os dispositivos Bluetooth também podem falar o HID ou protocolos seriais.
+
+Se conectado, verifique essas APIs nesta ordem específica:
+
+1. Com o [WebHID](/hid/) , compreender os relatórios e descritores de relatórios da HID por meio de [coleções](https://webhid-collections.glitch.me/) é a chave para a sua compreensão deste dispositivo. Isso pode ser desafiador sem a documentação do fornecedor para este dispositivo. Ferramentas como o [Wireshark](https://gitlab.com/wireshark/wireshark/-/wikis/CaptureSetup/USB) podem ajudá-lo a fazer a engenharia reversa.
+
+2. Com o [Web Serial](/serial/) , sem a documentação do fornecedor para este dispositivo e quais comandos ele suporta, é difícil, mas ainda é possível com adivinhação. A engenharia reversa desse dispositivo pode ser feita capturando o tráfego USB bruto com ferramentas como o [Wireshark](https://gitlab.com/wireshark/wireshark/-/wikis/CaptureSetup/USB) . Você também pode usar o [aplicativo da web Terminal Serial](https://googlechromelabs.github.io/serial-terminal/) para fazer experiências com este dispositivo se ele usar um protocolo legível por humanos.
+
+3. Com o [WebUSB](/usb/) , sem documentação clara para este dispositivo e quais comandos USB este dispositivo suporta, é difícil, mas ainda é possível com adivinhação. Assista [Explorando WebUSB e seu potencial empolgante](https://www.youtube.com/watch?v=IpfZ8Nj3uiE) de Suz Hinton. Você também pode fazer a engenharia reversa deste dispositivo capturando tráfego USB bruto e inspecionando [descritores USB](https://www.beyondlogic.org/usbnutshell/usb5.shtml) com ferramentas externas como Wireshark e ferramentas de navegador integradas, como a página interna `about://usb-internals` em navegadores baseados em Chromium.
+
+## Agradecimentos {: #acknowledgements}
+
+Agradecimentos a [Reilly Grant](https://github.com/reillyeon) , [Thomas Steiner](/authors/thomassteiner/) e [Kayce Basques](/authors/kaycebasques/) pela revisão deste artigo.
+
+Foto de [Darya Tryfanava](https://unsplash.com/@darya_tryfanava) no [Unsplash](https://unsplash.com/photos/uZBGDkYkvhM) .
diff --git a/src/site/content/pt/blog/drag-and-drop/index.md b/src/site/content/pt/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..5e6bfb3013c
--- /dev/null
+++ b/src/site/content/pt/blog/drag-and-drop/index.md
@@ -0,0 +1,260 @@
+---
+title: Usando a API HTML5 Drag and Drop
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: |2-
+
+  A API HTML5 Drag and Drop (DnD) significa que podemos tornar quase qualquer elemento em nossa página arrastável. Nesta postagem, vamos explicar
+  os conceitos básicos de arrastar e soltar.
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+A API HTML5 Drag and Drop (DnD) significa que podemos tornar quase qualquer elemento em nossa página arrastável. Nesta postagem, explicaremos os fundamentos de arrastar e soltar.
+
+## Criação de conteúdo arrastável
+
+É importante notar que, na maioria dos navegadores, as seleções de texto, imagens e links são arrastáveis por padrão. Por exemplo, se arrastar o logotipo do Google na [Pesquisa Google](https://google.com), você verá a imagem fantasma. Em seguida, a imagem pode ser solta na barra de endereço, um elemento `<input type="file" />` ou até mesmo a área de trabalho. Para tornar outros tipos de conteúdo arrastáveis, você precisa usar as APIs DnD HTML5.
+
+Para tornar um objeto arrastável, defina `draggable=true` nesse elemento. Quase tudo pode ser habilitado para arrastar, imagens, arquivos, links, arquivos ou qualquer marcação em sua página.
+
+Em nosso exemplo, estamos criando uma interface para reorganizar algumas colunas, que foram dispostas com CSS Grid. A marcação básica para minhas colunas é semelhante a esta, com cada uma tendo o atributo `draggable` definido como `true` .
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+Aqui está o CSS para meus elementos de contêiner e caixa. Observe que o único CSS relacionado à funcionalidade DnD é a propriedade [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor). O resto do código apenas controla o layout e o estilo dos elementos do contêiner e da caixa.
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+Neste ponto, você descobrirá que pode arrastar os itens, mas nada mais acontecerá. Para adicionar a funcionalidade DnD, precisamos usar a API JavaScript.
+
+## Ouvindo eventos de arrastar
+
+Existem vários eventos diferentes para anexar e monitorar todo o processo de arrastar e soltar.
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+Para lidar com o fluxo DnD, você precisa de algum tipo de elemento de origem (de onde se origina o arraste), a carga útil de dados (o que você está tentando soltar) e um destino (uma área para soltar). O elemento de origem pode ser uma imagem, lista, link, objeto de arquivo, bloco de HTML, etc. O destino é a zona para soltar (ou conjunto de zonas para soltar) que aceita os dados que o usuário está tentando eliminar. Lembre-se de que nem todos os elementos podem ser destino. Por exemplo, uma imagem não pode ser destino.
+
+## Iniciando e terminando uma sequência de arrastar e soltar
+
+Depois de ter os atributos `dragstart` `draggable="true"` definidos em seu conteúdo, anexe um manipulador de evento dragstart para iniciar a sequência DnD para cada coluna.
+
+Este código definirá a opacidade da coluna para 40% quando o usuário começar a arrastá-la e, em seguida, retornará para 100% quando o evento de arrastar terminar.
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+O resultado pode ser visto na demonstração do Glitch abaixo. Arraste um item e ele se tornará opaco. Como o destino do evento `dragstart` é o elemento de origem, definir `this.style.opacity` como 40% fornece ao usuário um feedback visual de que o elemento é a seleção atual que está sendo movida. Depois de soltar o item, embora a funcionalidade de soltar não esteja em vigor, o elemento de origem retorna para 100% de opacidade.
+
+{% Glitch {id: 'simple-drag-and-drop-1', path: 'style.css'}%}
+
+## Adicione pistas visuais adicionais com `dragenter` , `dragover` e `dragleave`
+
+Para ajudar o usuário a entender como interagir com sua interface, use os manipuladores de evento `dragenter`, `dragover` e `dragleave`. Neste exemplo, as colunas são destinos para soltar, além de serem arrastáveis. Ajude o usuário a entender isso fazendo a borda tracejada enquanto segura um item arrastado sobre uma coluna. Por exemplo, em seu CSS, você pode criar uma `over` para representar os elementos que são destinos de soltar:
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+Em seguida, no seu JavaScript, configure os manipuladores de eventos, adicione a classe `over` quando a coluna for arrastada e remova ao sair. No manipulador `dragend`, também removemos as classes no final do arraste.
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch { id: 'simple-drag-drop2', path: 'dnd.js' } %}
+
+Existem alguns pontos que valem a pena cobrir neste código:
+
+- No caso de arrastar algo como um link, você precisa evitar o comportamento padrão do navegador, que é navegar até esse link. Para fazer isso, chame `e.preventDefault()` no evento `dragover`. Outra boa prática é retornar `false` nesse mesmo manipulador.
+- O `dragenter` é usado para ativar ou desativar a classe `over` em vez de `dragover`. Se você usar `dragover`, a classe CSS será alternada várias vezes enquanto o evento `dragover` continua a disparar em um foco de coluna. Em última análise, isso faria com que o renderizador do navegador fizesse uma grande quantidade de trabalho desnecessário. Manter os redesenhos no mínimo é sempre uma boa ideia. Se você precisar usar o evento `dragover` para algo, considere [restringir ou eliminar o ouvinte de evento](https://css-tricks.com/debouncing-throttling-explained-examples/).
+
+## Terminando de soltar
+
+Para processar a ação de soltar, adicione um ouvinte de evento ao evento de `drop`. No manipulador `drop`, você precisará evitar o comportamento padrão do navegador para ações de soltar, que normalmente é algum tipo de redirecionamento irritante. Você pode evitar o surgimento do evento ao chamar `e.stopPropagation()`.
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // stops the browser from redirecting.
+  return false;
+}
+```
+
+Registre o novo manipulador entre os outros manipuladores:
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+Se você executar o código neste ponto, o item não será solto no novo local. Para isso, você precisa usar o objeto [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer).
+
+A propriedade `dataTransfer` é onde toda a mágica da DnD acontece. Contém os dados enviados em uma ação de arraste. `dataTransfer` é definida no `dragstart` e lida/manipulada no evento de soltar. Chamar `e.dataTransfer.setData(mimeType, dataPayload)` permite definir o tipo MIME do objeto e a carga de dados.
+
+Neste exemplo, vamos permitir que os usuários reorganizem a ordem das colunas. Para fazer isso, primeiro você precisa armazenar o HTML do elemento de origem quando o arraste começar:
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+No evento `drop`, você processa a ação de soltar a coluna, configurando o HTML da coluna de origem como o HTML da coluna de destino em que você soltou, primeiro verificando se o usuário não está caindo de volta na mesma coluna da qual foi arrastado.
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+Você pode ver o resultado na demonstração a seguir. Arraste e solte a coluna A no topo da coluna B e observe como mudam de lugar:
+
+{% Glitch { id: 'arrastar e soltar simplificado', path: 'dnd.js' } %}
+
+## Mais propriedades de arraste
+
+O objeto `dataTransfer` expõe propriedades para fornecer feedback visual ao usuário durante o processo de arraste. Essas propriedades também podem ser usadas para controlar como cada destino da ação de soltar responde a um determinado tipo de dados.
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed) restringe o "tipo de arraste" que o usuário pode executar no elemento. Ele é usado no modelo de processamento de arrastar e soltar para inicializar o `dropEffect` durante os eventos `dragenter` e `dragover`. A propriedade pode ser definida com os seguintes valores: `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` e `uninitialized`.
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect) controla o feedback que o usuário recebe durante os eventos `dragenter` e `dragover`. Quando o usuário passa o mouse sobre um elemento de destino, o cursor do navegador indica que tipo de operação ocorrerá (por exemplo, uma cópia, uma movimentação, etc.). O efeito pode assumir um dos seguintes valores: `none`, `copy`, `link`, `move`.
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage) significa que em vez de usar o feedback de "imagem fantasma" padrão do navegador, você pode, opcionalmente, definir um ícone de arrastar.
+
+## Upload de arquivo com arrastar e soltar
+
+Este exemplo simples usa uma coluna como origem e destino do arraste. Isso pode ser visto em uma IU em que o usuário é solicitado a reorganizar os itens. Em algumas situações, o destino e a origem do arraste podem ser diferentes, como uma interface em que o usuário precisa selecionar uma imagem para ser a imagem principal de um produto arrastando a imagem selecionada para um destino.
+
+Arrastar e soltar é usado frequentemente para permitir que os usuários arrastem itens de sua área de trabalho para um aplicativo. A principal diferença está em seu gerenciador de `drop` Em vez de usar `dataTransfer.getData()` para acessar os arquivos, seus dados estarão contidos na propriedade `dataTransfer.files`:
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Stops some browsers from redirecting.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Read the File objects in this FileList.
+  }
+}
+```
+
+Você pode encontrar mais informações sobre isso em [arrastar e soltar personalizado](/read-files/#select-dnd).
+
+## Mais recursos
+
+- [Especificação de arrastar e soltar](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [API de arrastar e soltar HTML MDN](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Como fazer um carregador de arrastar e soltar com o Vanilla JavaScript](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [Como criar um jogo de estacionamento com a API HTML Drag and Drop](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [Como usar a API de arrastar e soltar do HTML no React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/pt/blog/evolving-cls/index.md b/src/site/content/pt/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..2e6836d1125
--- /dev/null
+++ b/src/site/content/pt/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: Evoluindo a métrica CLS
+subhead: Planos para melhorar a métrica CLS para ser mais justa para páginas de longa duração.
+description: Planos para melhorar a métrica CLS para ser mais justa para páginas que ficam abertas por muito tempo.
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: Um exemplo de abordagem de janelamento para medir a mudança de layout.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2 de junho de 2021:** A atualização do CLS descrita nesta postagem já está disponível nas superfícies de ferramentas da web do Chrome. Consulte [Mudança cumulativa de layout em evolução nas ferramentas da Web](/cls-web-tooling/) para obter detalhes. {% endAside %}
+
+Nós (a equipe de métricas de velocidade do Chrome) recentemente delineamos nossa pesquisa inicial sobre [opções para tornar a métrica CLS mais justa para páginas que ficam abertas por um longo tempo](/better-layout-shift-metric/) . Recebemos muitos comentários muito úteis e, depois de concluir a análise em grande escala, finalizamos a mudança que planejamos fazer na métrica: **janela de sessão máxima com intervalo de 1 segundo, limitado a 5 segundos** .
+
+Continue lendo para saber mais detalhes!
+
+## Como avaliamos as opções?
+
+Revisamos todos os comentários recebidos da comunidade de desenvolvedores e os levamos em consideração.
+
+Também implementamos as [opções principais](/better-layout-shift-metric/#best-strategies) no Chrome e fizemos uma análise em grande escala das métricas em milhões de páginas da web. Verificamos quais tipos de sites cada opção melhorou e como as opções foram comparadas, especialmente observando os sites que foram pontuados de forma diferente por opções diferentes. No geral, descobrimos que:
+
+- **Todas** as opções reduziram a correlação entre o tempo gasto na página e a pontuação de mudança de layout.
+- **Nenhuma** das opções resultou em uma pontuação pior para qualquer página. Portanto, não há necessidade de se preocupar com o fato de que essa alteração piorará as pontuações do seu site.
+
+## Pontos de decisão
+
+### Por que uma janela de sessão?
+
+Em nosso [post anterior](/better-layout-shift-metric/), cobrimos [algumas estratégias diferentes de janelas](/better-layout-shift-metric/#windowing-strategies) para agrupar mudanças de layout ao mesmo tempo em que garantimos que a pontuação não cresça ilimitada. O feedback que recebemos dos desenvolvedores favoreceu enormemente a estratégia da janela de sessão porque ela agrupa as mudanças de layout de forma mais intuitiva.
+
+Para revisar as janelas de sessão, aqui está um exemplo:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Exemplo de janela de sessão.</figcaption></figure>
+
+No exemplo acima, muitas mudanças de layout ocorrem ao longo do tempo, conforme o usuário visualiza a página. Cada um é representado por uma barra azul. Você notará acima que as barras azuis têm alturas diferentes; aqueles representam a [pontuação](/cls/#layout-shift-score) de cada mudança de layout individual. Uma janela de sessão começa com a primeira mudança de layout e continua a se expandir até que haja uma lacuna sem mudanças de layout. Quando ocorre a próxima mudança de layout, uma nova janela de sessão é iniciada. Como há três lacunas sem mudanças de layout, há três janelas de sessão no exemplo. Semelhante à definição atual de CLS, as pontuações de cada turno são somadas, de modo que a pontuação de cada janela é a soma de suas alterações de layout individuais.
+
+Com base na [pesquisa inicial](/better-layout-shift-metric/#best-strategies), escolhemos um intervalo de 1 segundo entre as janelas de sessão e esse intervalo funcionou bem em nossa análise em grande escala. Portanto, o "intervalo de sessão" mostrado no exemplo acima é de 1 segundo.
+
+### Por que a janela máxima de sessão?
+
+Reduzimos as [estratégias de resumo](/better-layout-shift-metric/#summarization) a duas opções em nossa pesquisa inicial:
+
+- A **pontuação média** de todas as janelas de sessão, para janelas de sessão muito grandes (janelas sem limite com intervalos de 5 segundos entre elas).
+- A **pontuação máxima** de todas as janelas de sessão, para janelas de sessão menores (limitado a 5 segundos, com intervalos de 1 segundo entre elas).
+
+Após a pesquisa inicial, adicionamos cada métrica ao Chrome para que pudéssemos fazer uma análise em grande escala em milhões de URLs. Na análise em grande escala, encontramos muitos URLs com padrões de mudança de layout como este:
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="Exemplo de uma pequena mudança de layout diminuindo a média", width="800", height="550" %}
+
+No canto inferior direito, você pode ver que há apenas uma pequena mudança de layout na janela de sessão 2, dando a ela uma pontuação muito baixa. Isso significa que a pontuação média é muito baixa. Mas, e se o desenvolvedor corrigir essa pequena mudança de layout? Em seguida, a pontuação é calculada apenas na janela de sessão 1, o que significa que a pontuação da página *quase duplica*. Seria muito confuso e desanimador para os desenvolvedores melhorar suas mudanças de layout para então descobrir que a pontuação piorou. E remover essa pequena mudança de layout é obviamente um pouco melhor para a experiência do usuário, logo, não deve piorar a pontuação.
+
+Por causa desse problema com as médias, decidimos avançar com as janelas menores, limitadas e máximas. Portanto, no exemplo acima, a janela de sessão 2 seria ignorada e apenas a soma das mudanças de layout na janela de sessão 1 seria relatada.
+
+### Por que 5 segundos?
+
+Avaliamos vários tamanhos de janela e descobrimos duas coisas:
+
+- Para janelas curtas, carregamentos de página mais lentos e respostas mais lentas às interações do usuário podem quebrar as mudanças de layout em várias janelas e melhorar a pontuação. Queríamos manter a janela grande o suficiente para não premiar a lentidão!
+- Existem algumas páginas com um fluxo contínuo de pequenas mudanças de layout. Por exemplo, uma página com placares esportivos que muda um pouco a cada atualização de pontuação. Essas mudanças são irritantes, mas não ficam mais irritantes com o passar do tempo. Portanto, queríamos garantir que a janela fosse limitada para esses tipos de mudanças de layout.
+
+Com essas duas coisas em mente, comparando uma variedade de tamanhos de janela em muitas páginas da web do mundo real, concluímos que 5 segundos seria um bom limite para o tamanho da janela.
+
+## Como isso afetará a pontuação CLS da minha página?
+
+Como essa atualização limita o CLS de uma página, **nenhuma página terá uma pontuação pior** como resultado dessa mudança.
+
+Além disso, de acordo com nossa análise, **55% das origens não verão nenhuma mudança no CLS no 75º percentil**. Isso ocorre porque suas páginas não têm atualmente nenhuma mudança de layout ou as mudanças que eles têm já estão confinadas a uma única janela de sessão.
+
+**O resto das origens verão melhores pontuações no 75º percentil com essa mudança.** A maioria verá apenas uma ligeira melhora, mas cerca de 3% verão suas pontuações melhorarem, passando de uma classificação de "precisa melhorar" ou "ruim" para uma classificação "boa". Essas páginas tendem a usar scrollers infinitos ou ter muitas atualizações lentas da interface do usuário, conforme descrito em nosso [post anterior](/better-layout-shift-metric/) .
+
+## Como posso experimentar?
+
+Estaremos atualizando nossas ferramentas para em breve usar a nova definição de métrica! Até então, você pode experimentar a versão atualizada do CLS em qualquer site usando as [implementações de JavaScript de exemplo](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver) ou a [bifurcação da extensão Web Vitals](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Obrigado a todos que reservaram um tempo para ler a postagem anterior e deixar seus comentários!
diff --git a/src/site/content/pt/blog/fetch-metadata/index.md b/src/site/content/pt/blog/fetch-metadata/index.md
new file mode 100644
index 00000000000..218ad74392a
--- /dev/null
+++ b/src/site/content/pt/blog/fetch-metadata/index.md
@@ -0,0 +1,203 @@
+---
+title: Proteja seus recursos de ataques da Web com busca de metadados
+subhead: Evite vazamentos de informações de CSRF, XSSI e entre origens.
+authors:
+  - lwe
+date: 2020-06-04
+updated: 2020-06-10
+hero: image/admin/El8ytnIgMDWVzdsglcfv.jpg
+alt: Uma captura de tela do código Python relacionado à Política de Isolamento de Recursos.
+description: |2-
+
+  A busca de metadados é um novo recurso de plataforma da Web projetado para permitir que os servidores se protejam de ataques entre origens.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## Por que você deve se preocupar em isolar seus recursos da Web?
+
+Muitos aplicativos da wWeb são vulneráveis a ataques [entre origens](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22) [como falsificação de solicitação intersites](https://portswigger.net/web-security/csrf) (CSRF), [inclusão de script intersites](https://portswigger.net/research/json-hijacking-for-the-modern-web) (XSSI), ataques programados, [vazamento de informações entre origens](https://arxiv.org/pdf/1908.02204.pdf) ou ataques de canal lateral de execução especulativa ([Espectro).](https://developer.chrome.com/blog/meltdown-spectre/)
+
+Os cabeçalhos de solicitação de [busca de metadados](https://www.w3.org/TR/fetch-metadata/) (Fetch Metadata) permitem que você implante um forte mecanismo de defesa em profundidade - uma Política de Isolamento de Recursos - para proteger seu aplicativo contra esses ataques comuns entre origens.
+
+É comum que recursos expostos por um determinado aplicativo da Web sejam carregados apenas pelo próprio aplicativo, e não por outros sites. Nesses casos, implantar uma Política de Isolamento de Recursos com base em cabeçalhos de solicitação de busca de metadados exige pouco esforço e, ao mesmo tempo, protege o aplicativo de ataques intersites.
+
+## Compatibilidade do navegador {: #compatibility}
+
+Os cabeçalhos de solicitação de busca de metadados são suportados a partir do Chrome 76 e em outros navegadores baseados em Chromium, e estão em desenvolvimento no Firefox. Consulte [Compatibilidade de navegadores](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site#Browser_compatibility) para obter informações atualizadas sobre o suporte a navegadores.
+
+## Histórico
+
+Muitos ataques intersites são possíveis porque a Web é aberta por padrão e seu servidor de aplicativos não pode se proteger facilmente da comunicação originada de aplicativos externos. Um ataque de origem cruzada típico é a falsificação de solicitação intersites (CSRF), em que um invasor atrai um usuário para um site que ele controla e, em seguida, envia um formulário ao servidor no qual o usuário está conectado. Como o servidor não pode saber se a solicitação foi originada de outro domínio (intersite) e o navegador anexa cookies automaticamente às solicitações intersites, o servidor executará a ação solicitada pelo invasor em nome do usuário.
+
+Outros ataques intersites, como inclusão de script intersites (XSSI) ou vazamentos de informações entre origens, são semelhantes em natureza ao CSRF e dependem do carregamento de recursos de um aplicativo vítima em um documento controlado pelo invasor e do vazamento de informações sobre os aplicativos vítimas. Como os aplicativos não podem distinguir facilmente as solicitações confiáveis das não confiáveis, eles não podem descartar o tráfego malicioso intersites.
+
+{% Aside 'gotchas' %} Além de ataques a recursos conforme descrito acima, as *referências de janela* também podem levar a vazamentos de informações entre origens e ataques de Espectro. Você pode evitá-los definindo o cabeçalho de resposta `Cross-Origin-Opener-Policy` `same-origin`. {% endAside %}
+
+## Apresentando a busca de metadados {: #introduction}
+
+Os cabeçalhos de solicitação de busca de metadados (Fetch Metadata) são um novo recurso de segurança da plataforma da Web projetado para ajudar os servidores a se defenderem contra ataques entre origens. Ao fornecer informações sobre o contexto de uma solicitação HTTP em um conjunto de `Sec-Fetch-*`, eles permitem que o servidor de resposta aplique políticas de segurança antes de processar a solicitação. Isso permite que os desenvolvedores decidam se aceitam ou rejeitam uma solicitação com base na forma como foi feita e no contexto em que será usada, tornando possível responder apenas a solicitações legítimas feitas por seu próprio aplicativo.
+
+{% Compare 'better', 'Same-Origin' %} {% CompareCaption %} As solicitações originadas de sites atendidos por seu próprio servidor (mesma origem) continuarão funcionando. {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/aRsy2xULTR4TM2sMMsbQ.png", alt="Uma solicitação de busca de https://site.example para o recurso https://site.example/foo.json no JavaScript faz com que o navegador envie o cabeçalho de solicitação HTTP 'Sec Fetch-Site: same-origin'.", width="800", height="176" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cross-site' %} {% CompareCaption %} Solicitações maliciosas initersites podem ser rejeitadas pelo servidor devido ao contexto adicional na solicitação HTTP fornecida pelos cabeçalhos `Sec-Fetch-*` {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/xY4yB36JqsVw62wNMIWt.png", alt="Uma imagem em https://evil.example que definiu o atributo src de um elemento img para 'https://site.example/foo. json' faz com que o navegador envie o cabeçalho de solicitação HTTP 'Sec-Fetch-Site: cross-site'.", width="800", height="171" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+### `Sec-Fetch-Site`
+
+`Sec-Fetch-Site` informa ao servidor qual [site](/same-site-same-origin) enviou a solicitação. O navegador define esse valor como uma das seguintes opções:
+
+- `same-origin`, se a solicitação foi feita por seu próprio aplicativo (por exemplo, `site.example`)
+- `same-site`, se a solicitação foi feita por um subdomínio do seu site (por exemplo, `bar.site.example`)
+- `none`, se a solicitação foi explicitamente causada pela interação de um usuário com o agente do usuário (por exemplo, clicar em um favorito)
+- `cross-site`, se a solicitação foi enviada por outro site (por exemplo, `evil.example`)
+
+### `Sec-Fetch-Mode`
+
+`Sec-Fetch-Mode` indica o [modo](https://developer.mozilla.org/docs/Web/API/Request/mode) da solicitação. Isso corresponde aproximadamente ao tipo de solicitação e permite distinguir as cargas de recursos das solicitações de navegação. Por exemplo, um destino de `navigate` indica uma solicitação de navegação de nível superior, enquanto `no-cors` indica solicitações de recursos como o carregamento de uma imagem.
+
+### `Sec-Fetch-Dest`
+
+`Sec-Fetch-Dest` expõe o [destino](https://developer.mozilla.org/docs/Web/API/Request/destination) de uma solicitação (por exemplo, se um `script` ou uma `img` fez com que um recurso fosse solicitado pelo navegador).
+
+## Como usar a busca de metadados para se proteger contra ataques entre origens
+
+As informações extras que esses cabeçalhos de solicitação fornecem são bastante simples, mas o contexto adicional permite que você crie uma lógica de segurança poderosa no lado do servidor, também conhecida como política de isolamento de recursos, com apenas algumas linhas de código.
+
+### Implementar uma política de isolamento de recursos
+
+Uma política de isolamento de recursos evita que seus recursos sejam solicitados por sites externos. O bloqueio desse tráfego atenua vulnerabilidades comuns intersites da Web, como CSRF, XSSI, ataques de temporização e vazamentos de informações entre origens. Esta política pode ser ativada para todos os endpoints de seu aplicativo e permitirá todas as solicitações de recursos provenientes de seu próprio aplicativo, bem como navegações diretas (por meio de uma `GET`). Os endpoints que deveriam ser carregados em um contexto intersites (por exemplo, endpoints carregados usando CORS) podem ser excluídos desta lógica.
+
+#### Etapa 1: permitir solicitações de navegadores que não enviam busca de metadados
+
+Como nem todos os navegadores são compatíveis com o recurso de busca de metadados, você precisa permitir solicitações que não definem `Sec-Fetch-*` verificando a presença de `sec-fetch-site`.
+
+{% Aside %} Todos os exemplos a seguir são no código Python. {% endAside %}
+
+```python
+if not req['sec-fetch-site']:
+  return True  # Allow this request
+```
+
+{% Aside 'caution' %} Como a busca de metadados só é compatível com navegadores baseados em Chromium, ela deve ser usado como uma [proteção de defesa profunda](https://static.googleusercontent.com/media/landing.google.com/en//sre/static/pdf/Building_Secure_and_Reliable_Systems.pdf#page=181) e não como sua linha de defesa principal. {% endAside %}
+
+#### Etapa 2: permitir solicitações iniciadas no mesmo site e no navegador
+
+Qualquer solicitação que não se origine de um contexto de origem cruzada (como `evil.example`) será permitida. Em particular, são solicitações que:
+
+- Têm origem no seu próprio aplicativo (por exemplo, uma solicitação de mesma origem em que as solicitações `site.example` `site.example/foo.json` sempre serão permitidas).
+- Têm origem de seus subdomínios.
+- São explicitamente causadas pela interação do usuário com o agente do usuário (por exemplo, navegação direta ou clicar em um favorito etc.).
+
+```python
+if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+  return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} Caso seus subdomínios não sejam totalmente confiáveis, você pode tornar a política mais rígida bloqueando solicitações de subdomínios removendo o valor `same-site` {% endAside %}
+
+#### Etapa 3: permitir navegação simples de nível superior e iframing
+
+Para garantir que seu site ainda possa ser vinculado a outros sites, você deve permitir a navegação de nível superior `HTTP GET`
+
+```python
+if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+  # <object> and <embed> send navigation requests, which we disallow.
+  and req['sec-fetch-dest'] not in ('object', 'embed'):
+    return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} A lógica acima protege os endpoints de seu aplicativo de serem usados como recursos por outros sites, mas permitirá a navegação de nível superior e incorporação (por exemplo, carregamento em um `<iframe>`). Para melhorar ainda mais a segurança, você pode usar os cabeçalhos Fetch Metadata para restringir as navegações intersites a apenas um conjunto permitido de páginas. {% endAside %}
+
+#### Etapa 4: desative os endpoints destinados a atender ao tráfego intersites (opcional)
+
+Em alguns casos, seu aplicativo pode fornecer recursos que devem ser carregados intersites. Esses recursos precisam ser isentos por caminho ou por endpoint. Exemplos de tais terminais são:
+
+- Endpoints destinados a serem acessados entre origens: se o seu aplicativo está servindo endpoints que são `CORS`, você precisa desativá-los explicitamente do isolamento de recursos para garantir que as solicitações intersites para esses endpoints ainda sejam possíveis.
+- Recursos públicos (por exemplo, imagens, estilos, etc.): Quaisquer recursos públicos e não autenticados que devam ser entre origens carregáveis de outros sites também podem ser isentos.
+
+```python
+if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+  return True
+```
+
+{% Aside 'caution' %} Antes de excluir partes de seu aplicativo dessas restrições de segurança, certifique-se de que sejam estáticas e não contenham informações confidenciais do usuário. {% endAside %}
+
+#### Etapa 5: rejeitar todas as outras solicitações que sejam intersite e não de navegação
+
+Qualquer outra solicitação **intersites** será rejeitada por esta Política de Isolamento de Recursos e, assim, protegerá seu aplicativo de ataques comuns intersites.
+
+{% Aside 'gotchas' %} Por padrão, as solicitações que violam sua política devem ser rejeitadas com uma resposta `HTTP 403` Mas, dependendo do seu caso de uso, você também pode considerar outras ações, como:
+
+- **Apenas registrar violações** . Isso é especialmente útil ao testar a compatibilidade da política e localizar terminais que podem precisar ser excluídos.
+- **Modificando a solicitação**. Em certos cenários, considere realizar outras ações, como redirecionar para sua página de destino e descartar credenciais de autenticação (por exemplo, cookies). No entanto, esteja ciente de que isso pode enfraquecer as proteções de uma política baseada em Fetch Metadata. {% endAside %}
+
+**Exemplo:** o código a seguir demonstra uma implementação completa de uma política de isolamento de recursos robusta no servidor ou como um middleware para negar solicitações de recursos intersites potencialmente maliciosas, enquanto permite solicitações de navegação simples:
+
+```python
+# Reject cross-origin requests to protect from CSRF, XSSI, and other bugs
+def allow_request(req):
+  # Allow requests from browsers which don't send Fetch Metadata
+  if not req['sec-fetch-site']:
+    return True
+
+  # Allow same-site and browser-initiated requests
+  if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+    return True
+
+  # Allow simple top-level navigations except <object> and <embed>
+  if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+    and req['sec-fetch-dest'] not in ('object', 'embed'):
+      return True
+
+  # [OPTIONAL] Exempt paths/endpoints meant to be served cross-origin.
+  if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+    return True
+
+  # Reject all other requests that are cross-site and not navigational
+  return False
+```
+
+### Implementando uma Política de Isolamento de Recursos
+
+1. Instale um módulo como o snippet de código acima para registrar e monitorar como seu site se comporta e certifique-se de que as restrições não afetem o tráfego legítimo.
+2. Corrija possíveis violações, isentando endpoints legítimos entre origens.
+3. Aplique a política descartando solicitações não compatíveis.
+
+### Identificação e correção de violações de política
+
+É recomendável que você teste sua política sem efeitos colaterais, primeiro habilitando-a no modo de relatório em seu código do lado do servidor. Como alternativa, você pode implementar essa lógica em middleware ou em um proxy reverso que registra quaisquer violações que sua política possa produzir quando aplicada ao tráfego de produção.
+
+De acordo com nossa experiência de implementação de uma política de isolamento de recursos de metadados de busca no Google, a maioria dos aplicativos é, por padrão, compatível com essa política e raramente exige endpoints isentos para permitir o tráfego intersites.
+
+### Aplicação de uma política de isolamento de recursos
+
+Depois de verificar se sua política não afeta o tráfego de produção legítimo, você está pronto para aplicar restrições, garantindo que outros sites não possam solicitar seus recursos e protegendo seus usuários de ataques intersites.
+
+{% Aside 'caution' %} Certifique-se de rejeitar solicitações inválidas antes de executar verificações de autenticação ou qualquer outro processamento da solicitação para evitar a revelação de informações confidenciais de tempo. {% endAside %}
+
+## Leitura adicional
+
+- [Especificação W3C Fetch Metadata Request Headers](https://www.w3.org/TR/fetch-metadata/)
+- [Fetch Metadata Playground](https://secmetadata.appspot.com/)
+- [Palestra do Google I / O: Protegendo aplicativos da web com recursos de plataforma modernos](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf) (slides)
+
+{% YouTube id = 'DDtM9caQ97I', startTime = '1856'%}
diff --git a/src/site/content/pt/blog/floc/index.md b/src/site/content/pt/blog/floc/index.md
new file mode 100644
index 00000000000..4a1610f8435
--- /dev/null
+++ b/src/site/content/pt/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: O que é FLoC?
+subhead: FLoC permite a seleção de anúncios sem compartilhar o comportamento de navegação de usuários individuais.
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: Murmuração de estorninhos sobre o cais de Brighton
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} Esta postagem descreve o design da API implementado no Chrome para a primeira versão de teste do FLoC.
+
+Futuras iterações de uma API para permitir publicidade com base em interesses sem cookies de terceiros ou outros mecanismos de rastreamento entre sites estão atualmente em desenvolvimento. {% endAside %}
+
+FLoC fornece um mecanismo de preservação de privacidade para a seleção de anúncios com base em interesses.
+
+Conforme um usuário se move pela web, seu navegador usa o algoritmo FLoC para calcular sua "coorte de interesse", que será a mesma para milhares de navegadores com um histórico de navegação recente semelhante. O navegador recalcula seu coorte periodicamente, no dispositivo do usuário, sem compartilhar dados de navegação individuais com o fornecedor do navegador ou qualquer outra pessoa.
+
+{% Aside %} Durante o teste FLoC inicial, uma visita à página só foi incluída no cálculo do FLoC do navegador por um de dois motivos:
+
+- A API FLoC ( `document.interestCohort()`) é usada na página.
+- O Chrome detecta que a página [carrega anúncios ou recursos relacionados a anúncios](https://github.com/WICG/floc/issues/82) .
+
+Para outros algoritmos de agrupamento, o ensaio pode experimentar diferentes critérios de inclusão: isso faz parte do processo de experimento do ensaio de origem.
+
+O teste de origem para a versão inicial do FLoC, que funcionou do Chrome 89 ao 91, [está encerrado](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+Os anunciantes (sites que pagam por anúncios) podem incluir código em seus próprios sites para coletar e fornecer dados de coorte para suas plataformas adtech (empresas que fornecem software e ferramentas para veicular publicidade). Por exemplo, uma plataforma adtech pode aprender com uma loja de calçados online que os navegadores das coortes 1101 e 1354 parecem interessados nos equipamentos de caminhada da loja. De outros anunciantes, a plataforma adtech aprende sobre outros interesses dessas coortes.
+
+Posteriormente, a plataforma de anúncios pode usar esses dados para selecionar anúncios relevantes (como um anúncio de botas de caminhada da loja de sapatos) quando um navegador de uma dessas coortes solicita uma página de um site que exibe anúncios, como um site de notícias.
+
+O Privacy Sandbox é uma série de propostas para satisfazer os casos de uso de terceiros sem cookies de terceiros ou outros mecanismos de rastreamento. Consulte [Exploração da área de segurança da privacidade](/digging-into-the-privacy-sandbox) para obter uma visão geral de todas as propostas.
+
+**Esta proposta precisa de seu feedback.** Se você tiver comentários, [crie um problema](https://github.com/WICG/floc/issues/new) no repositório [FLoC Explainer.](https://github.com/WICG/floc) Se você tiver comentários sobre o experimento do Chrome com esta proposta, poste uma resposta no [Intent to Experiment](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs).
+
+## Por que precisamos de FLoC?
+
+Muitas empresas dependem da publicidade para direcionar o tráfego para seus sites, e muitos sites de editores financiam o conteúdo com a venda de inventário de publicidade. As pessoas geralmente preferem ver anúncios que sejam relevantes e úteis para elas, e anúncios relevantes também trazem mais negócios para os anunciantes e [mais receita para os sites que os hospedam](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf). Em outras palavras, o espaço do anúncio é mais valioso quando exibe anúncios relevantes. Assim, a seleção de anúncios relevantes aumenta a receita de sites com anúncios. Isso, por sua vez, significa que anúncios relevantes ajudam a financiar a criação de conteúdo que beneficia os usuários.
+
+No entanto, as pessoas estão preocupadas com as implicações de privacidade da publicidade personalizada, que atualmente depende de técnicas como cookies de rastreamento e impressão digital do dispositivo, que podem revelar seu histórico de navegação em sites para anunciantes ou plataformas de anúncios. A proposta do FLoC visa permitir a seleção de anúncios de uma forma que proteja melhor a privacidade.
+
+## Para que o FLoC pode ser usado?
+
+- Mostre anúncios para pessoas cujos navegadores pertencem a um grupo que costuma visitar o site de um anunciante ou mostra interesse em tópicos relevantes.
+- Use modelos de aprendizado de máquina para prever a probabilidade de um usuário realizar uma conversão com base em seu coorte, a fim de informar o comportamento dos lances no leilão de anúncios.
+- Recomendar conteúdo aos usuários. Por exemplo, suponha que um site de notícias observe que sua página de podcast de esportes se tornou especialmente popular entre os visitantes das coortes 1234 e 7. Eles podem recomendar esse conteúdo a outros visitantes dessas coortes.
+
+## Como funciona o FLoC?
+
+O exemplo abaixo descreve as diferentes funções na seleção de um anúncio usando FLoC.
+
+- O **anunciante** (uma empresa que paga pela publicidade) neste exemplo é um varejista de calçados online:<br> **<u>calçados.exemplo</u>**
+
+- O **editor** (um site que vende espaço de anúncio) no exemplo é um site de notícias:<br> **<u>jornal.exemplo</u>**
+
+- A **plataforma adtech** (que fornece software e ferramentas para veicular publicidade) é:<br> **<u>redeanuncio.exemplo</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="Diagrama mostrando, passo a passo, as diferentes funções na seleção e entrega de um anúncio usando FLoC: serviço FLoC, navegador, anunciantes, editor (para observar coortes), Adtech, Editor (para exibir anúncios)", width="800", height="359" %}
+
+Neste exemplo, chamamos os usuários de **Yoshi** e **Alex**. Inicialmente, seus navegadores pertencem à mesma coorte, 1354.
+
+{% Aside %} Chamamos os usuários aqui de Yoshi e Alex, mas isso é apenas para fins de exemplo. Nomes e identidades individuais não são revelados ao anunciante, editor ou plataforma adtech com FLoC.
+
+Não pense em uma coorte como um grupo de pessoas. Em vez disso, pense em um coorte como um agrupamento de atividades de navegação. {% endAside %}
+
+### 1. Serviço FLoC
+
+1. O serviço FLoC usado pelo navegador cria um modelo matemático com milhares de "coortes", cada uma correspondendo a milhares de navegadores com históricos de navegação recentes semelhantes. Mais sobre como isso funciona [abaixo](#floc-server).
+2. Cada coorte recebe um número.
+
+### 2. Navegador
+
+1. Do serviço FLoC, o navegador de Yoshi obtém dados que descrevem o modelo FLoC.
+2. O navegador de Yoshi calcula sua coorte [usando o algoritmo do modelo FLoC](#floc-algorithm) para calcular qual coorte corresponde mais de perto a seu próprio histórico de navegação. Neste exemplo, será a coorte 1354. Observe que o navegador de Yoshi não compartilha nenhum dado com o serviço FLoC.
+3. Da mesma forma, o navegador de Alex calcula seu ID de coorte. O histórico de navegação de Alex é diferente do de Yoshi, mas semelhante o suficiente para que seus navegadores pertençam à coorte 1354.
+
+### 3. Anunciante: <span style="font-weight:normal">calçado.exemplo</span>
+
+1. Yoshi visita a <u>calçado.exemplo</u>.
+2. O site pede ao navegador de Yoshi seu coorte: 1354.
+3. Yoshi olha para as botas de caminhada.
+4. O site registra que um navegador da coorte 1354 mostrou interesse em botas de caminhada.
+5. O site posteriormente registra interesse adicional em seus produtos da coorte 1354, bem como de outras coortes.
+6. O site agrega e compartilha periodicamente informações sobre coortes e interesses de produtos com sua plataforma <u>adtech redeanuncio.exemplo</u>.
+
+Agora é a vez de Alex.
+
+### 4. Editor: <span style="font-weight:normal">jornal.exemplo</span>
+
+1. Alex visita <u>jornal.exemplo</u>.
+2. O site pede ao navegador de Alex seu coorte.
+3. O site então faz uma solicitação de anúncio para sua plataforma <u>adtech</u>, adnetwork.example, incluindo o coorte do navegador de Alex: 1354.
+
+### 5. Plataforma <span style="font-weight:normal">Adtech: redeanuncio.exemplo</span>
+
+1. <u>redeanuncio.exemplo</u> pode selecionar um anúncio adequado para Alex combinando os dados que possui do editor <u>jornal.exemplo</u> e do anunciante <u>calçado.exemplo</u>:
+
+- Coorte do navegador de Alex (1354) fornecida por <u>jornal.exemplo</u>.
+- Dados sobre coortes e interesses de produto da <u>loja</u> de sapatos.exemplo: "Os navegadores da coorte 1354 podem estar interessados em botas de caminhada."
+
+1. <u>redeanuncio.exemplo</u> seleciona um anúncio apropriado para Alex: um anúncio de botas de caminhada em <u>calçado.exemplo</u>.
+2. <u>jornal.exemplo</u> exibe o anúncio 🥾.
+
+{% Aside %} As abordagens atuais para seleção de anúncios dependem de técnicas como cookies de rastreamento e impressão digital do dispositivo, que são usadas por terceiros, como anunciantes, para rastrear o comportamento de navegação individual.
+
+Com o FLoC, o navegador **não compartilha** seu histórico de navegação com o serviço FLoC ou qualquer outra pessoa. O navegador, no dispositivo do usuário, determina a qual coorte ele pertence. O histórico de navegação do usuário nunca sai do dispositivo. {% endAside %}
+
+## Quem executa o serviço de back-end que cria o modelo FLoC?
+
+Cada fornecedor de navegador precisará fazer sua própria escolha de como agrupar os navegadores em grupos. O Chrome está executando seu próprio serviço FLoC; outros navegadores podem escolher implementar FLoC com uma abordagem de clustering diferente e executar seu próprio serviço para fazer isso.
+
+## Como o serviço FLoC permite que o navegador trabalhe com seu coorte? {: #floc-server }
+
+1. O serviço FLoC usado pelo navegador cria uma representação matemática multidimensional de todos os históricos de navegação na web em potencial. Chamaremos esse modelo de "espaço de coorte".
+2. O serviço divide este espaço em milhares de segmentos. Cada segmento representa um grupo de milhares de históricos de navegação semelhantes. Esses agrupamentos não são baseados no conhecimento de qualquer histórico de navegação real; eles simplesmente se baseiam em escolher centros aleatórios no "espaço de coorte" ou cortar o espaço com linhas aleatórias.
+3. Cada segmento recebe um número de coorte.
+4. O navegador da web obtém esses dados que descrevem o "espaço de coorte" de seu serviço FLoC.
+5. Conforme um usuário se move pela web, seu navegador [usa um algoritmo](#floc-algorithm) para calcular periodicamente a região no "espaço de coorte" que corresponde mais de perto ao seu próprio histórico de navegação.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="Diagrama do 'espaço de histórico de navegação' criado por um servidor FLoC, mostrando vários segmentos, cada um com um número de coorte",  width="400", height="359" %} <figcaption>O serviço FLoC divide o "espaço de coorte" em milhares de segmentos (apenas alguns são mostrados aqui).</figcaption></figure>
+
+{% Aside %} Em nenhum momento deste processo o histórico de navegação do usuário é compartilhado com o serviço FLoC ou qualquer terceiro. A coorte do navegador é calculada pelo navegador, no dispositivo do usuário. Nenhum dado do usuário é adquirido ou armazenado pelo serviço FLoC. {% endAside %}
+
+## A coorte de um navegador pode mudar?
+
+*Sim*! O coorte de um navegador definitivamente pode mudar! Você provavelmente não visita os mesmos sites todas as semanas, e o grupo de seu navegador refletirá isso.
+
+Uma coorte representa um cluster de atividade de navegação, não um grupo de pessoas. As características de atividade de uma coorte geralmente são consistentes ao longo do tempo, e as coortes são úteis para a seleção de anúncios porque agrupam comportamentos de navegação recentes semelhantes. Os navegadores de cada pessoa entrarão e sairão de uma coorte conforme seu comportamento de navegação muda. Inicialmente, esperamos que o navegador recalcule sua coorte a cada sete dias.
+
+No exemplo acima, o coorte dos navegadores de Yoshi e Alex é 1354. No futuro, os navegadores de Yoshi e Alex podem mudar para um coorte diferente se seus interesses mudarem. No exemplo abaixo, o navegador de Yoshi muda para a coorte 1101 e o navegador de Alex para a coorte 1378. Os navegadores de outras pessoas entram e saem das coortes conforme seus interesses de navegação mudam.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="Diagrama do 'espaço de histórico de navegação' criado por um servidor FLoC, mostrando vários segmentos, cada um com um número de coorte. O diagrama mostra os navegadores pertencentes aos usuários Yoshi e Alex mudando de uma coorte para outra conforme seus interesses de navegação mudam com o tempo.", width="800", height="533"%}<figcaption> O grupo de navegadores de Yoshi e Alex pode mudar se seus interesses mudarem.</figcaption></figure>
+
+{% Aside %} Um coorte define um agrupamento de atividades de navegação, não um grupo de pessoas. Os navegadores entram e saem de uma coorte conforme sua atividade muda. {% endAside %}
+
+## Como o navegador funciona com seu coorte? {: #floc-algorithm }
+
+Conforme descrito acima, o navegador do usuário obtém dados de seu serviço FLoC que descreve o modelo matemático para coortes: um espaço multidimensional que representa a atividade de navegação de todos os usuários. O navegador então usa um algoritmo para descobrir qual região desse "espaço de coorte" (ou seja, qual coorte) corresponde mais de perto ao seu próprio comportamento de navegação recente.
+
+## Como o FLoC calcula o tamanho certo da coorte?
+
+Haverá milhares de navegadores em cada coorte.
+
+Um tamanho de coorte menor pode ser mais útil para personalizar anúncios, mas é menos provável que interrompa o rastreamento do usuário - e vice-versa. Um mecanismo para atribuir navegadores a coortes precisa fazer uma troca entre privacidade e utilidade. O Privacy Sandbox usa [k-anonimato](https://en.wikipedia.org/wiki/K-anonymity) para permitir que um usuário "se esconda no meio da multidão". Uma coorte é k-anônima se for compartilhada por pelo menos k usuários. Quanto mais alto o número k, maior a preservação da privacidade da coorte.
+
+## O FLoC pode ser usado para agrupar pessoas com base em categorias sensíveis?
+
+O algoritmo de agrupamento usado para construir o modelo de coorte FLoC é projetado para avaliar se uma coorte pode ser correlacionada com categorias sensíveis, sem aprender por que uma categoria é sensível. As coortes que podem revelar categorias sensíveis, como raça, sexualidade ou histórico médico, serão bloqueadas. Em outras palavras, ao trabalhar em sua coorte, um navegador só estará escolhendo entre coortes que não revelarão categorias sensíveis.
+
+## O FLoC é apenas outra maneira de categorizar as pessoas online?
+
+Com o FLoC, o navegador de um usuário pertencerá a uma das milhares de coortes, junto com milhares de navegadores de outros usuários. Ao contrário de cookies de terceiros e outros mecanismos de direcionamento, o FLoC apenas revela a coorte em que o navegador do usuário está, e não um ID de usuário individual. Não permite que outros distingam um indivíduo dentro de uma coorte. Além disso, as informações sobre a atividade de navegação que são usadas para resolver o coorte de um navegador são mantidas locais no navegador ou dispositivo e não são carregadas em outro lugar. O navegador pode aproveitar ainda mais outros métodos de anonimato, como [privacidade diferencial](https://en.wikipedia.org/wiki/Differential_privacy).
+
+## Os sites precisam participar e compartilhar informações?
+
+Os sites terão a capacidade de ativar ou desativar o FLoC, portanto, os sites sobre tópicos sensíveis poderão impedir que as visitas a seus sites sejam incluídas no cálculo do FLoC. Como proteção adicional, a análise do serviço FLoC avaliará se uma coorte pode revelar informações confidenciais sobre os usuários sem saber por que essa coorte é confidencial. Se uma coorte representar um número maior do que o normal de pessoas que visitam sites em uma categoria sensível, toda a coorte será removida. Situação financeira negativa e saúde mental estão entre as categorias sensíveis abrangidas por esta análise.
+
+Os sites [podem excluir uma página do cálculo FLoC](https://github.com/WICG/floc#opting-out-of-computation) definindo um cabeçalho de [políticas de permissões](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) `interest-cohort=()` para essa página. Para páginas que não foram excluídas, uma visita à página será incluída no cálculo FLoC do navegador se `document.interestCohort()` for usado na página. Durante o [teste de origem do FLoC](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561) atual, uma página também será incluída no cálculo se o Chrome detectar que a página [carrega anúncios ou recursos relacionados a anúncios](https://github.com/WICG/floc/issues/82). (A [marcação de anúncios no Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md) explica como funciona o mecanismo de detecção de anúncios do Chrome.)
+
+As páginas servidas a partir de endereços IP privados, como páginas da intranet, não farão parte do cálculo do FLoC.
+
+## Como funciona a API FLoC JavaScript?
+
+{% Aside %} O teste de origem para a versão inicial do FLoC, que funcionava do Chrome 89 ao 91, [foi encerrado](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+A API FLoC é muito simples: apenas um único método que retorna uma promessa que é resolvida para um objeto que fornece o `id` coorte e a `version`:
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+Os dados de coorte disponibilizados são assim:
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+O `version` permite que sites que usam FLoC saibam a qual navegador e a qual modelo FLoC o ID de coorte se refere. Conforme descrito abaixo, a promessa retornada por `document.interestCohort()` será rejeitada para qualquer frame que não tenha a permissão de `interest-cohort`
+
+## Os sites podem optar por não serem incluídos no cálculo do FLoC?
+
+A `interest-cohort` permite que um site declare que não deseja ser incluído na lista de sites do usuário para cálculo de coorte. A política será `allow` por padrão. A promessa retornada por `document.interestCohort()` rejeitará qualquer frame que não tenha permissão `interest-cohort`. Se o frame principal não tiver `interest-cohort`, a visita à página não será incluída no cálculo da coorte de interesse.
+
+Por exemplo, um site pode cancelar todos os cálculos de coorte FLoC enviando o seguinte cabeçalho de resposta HTTP:
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## Um usuário pode impedir que sites obtenham o coorte FLoC de seu navegador?
+
+Se um usuário desativar o Privacy Sandbox em `chrome://settings/privacySandbox`, o navegador não fornecerá a coorte do usuário quando solicitada por JavaScript: a promessa retornada por `document.interestCohort()` será rejeitada.
+
+## Como posso fazer sugestões ou fornecer feedback?
+
+Se você tiver comentários sobre a API, [crie um problema](https://github.com/WICG/floc/issues/new) no repositório [FLoC Explainer.](https://github.com/WICG/floc)
+
+## Descubra mais
+
+- [Exploração da área de segurança da privacidade](/digging-into-the-privacy-sandbox/)
+- [FLoC Explainer](https://github.com/WICG/floc)
+- [FLoC Origin Trial &amp; Clustering](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+- [Avaliação de algoritmos de coorte para a API FLoC](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+Foto de [Rhys Kentish](https://unsplash.com/@rhyskentish) no [Unsplash](https://unsplash.com/photos/I5AYxsxSuVA).
diff --git a/src/site/content/pt/blog/hands-on-portals/index.md b/src/site/content/pt/blog/hands-on-portals/index.md
new file mode 100644
index 00000000000..304586996d8
--- /dev/null
+++ b/src/site/content/pt/blog/hands-on-portals/index.md
@@ -0,0 +1,258 @@
+---
+title: 'Prática com a Portals: navegação perfeita na Web'
+subhead: |2-
+
+  Aprenda como a API Portals proposta pode melhorar sua experiência de navegação.
+date: 2019-05-06
+updated: 2021-02-15
+authors:
+  - uskay
+hero: image/admin/7hJbSWnhhE1lRVHJOWI9.png
+alt: Um logotipo da Portals
+description: |2-
+
+  A recém-proposta API Portals ajuda a manter seu front-end simples, permitindo uma navegação perfeita
+
+  com transições personalizadas. Neste artigo, obtenha experiência prática usando
+
+  Portais para melhorar a experiência do usuário em seu site.
+tags:
+  - blog
+  - ux
+feedback:
+  - api
+---
+
+Garantir que suas páginas carreguem rapidamente é a chave para proporcionar uma boa experiência do usuário. Mas uma área que geralmente esquecemos são as transições de página - o que nossos usuários veem quando se movem entre as páginas.
+
+Uma nova proposta de API de plataforma da Web, chamada [Portals](https://github.com/WICG/portals), visa ajudar nisso, simplificando a experiência conforme os usuários navegam *em* seu site.
+
+Veja a Portals em ação:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_vp9.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/hands-on-portals/portals_h264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Integrações e navegação perfeitas com a Portals. Criado por <a href="https://twitter.com/argyleink">Adam Argyle</a>.</figcaption></figure>
+
+## O que a Portals possibilita fazer
+
+Os aplicativos de página única (SPAs) oferecem ótimas transições, mas têm um custo de construção mais complexo. Aplicativos de várias páginas (MPAs) são muito mais fáceis de construir, mas você acaba com telas em branco entre as páginas.
+
+Os portais oferecem o melhor dos dois mundos: a baixa complexidade de um MPA com as transições perfeitas de um SPA. Pense neles como um `<iframe>`, pois permitem a incorporação, mas, ao contrário de um `<iframe>`, eles também vêm com recursos para navegar até seu conteúdo.
+
+Ver para crer: primeiro confira o que apresentamos no Chrome Dev Summit 2018:
+
+{% YouTube id = 'Ai4aZ9Jbsys', startTime = '1081'%}
+
+Com as navegações clássicas, os usuários precisam esperar com uma tela em branco até que o navegador termine de renderizar o destino. Com a Portals, os usuários podem experimentar uma animação, enquanto o `<portal>` pré-renderiza o conteúdo e cria uma experiência de navegação contínua.
+
+Antes da Portals, poderíamos ter renderizado outra página usando um `<iframe>`. Também poderíamos ter adicionado animações para mover o quadro pela página. Mas um `<iframe>` não permite que você navegue em seu conteúdo. A Portals fecham essa lacuna, permitindo casos de uso interessantes.
+
+## Experimente a Portals
+
+### Ativando por meio de about: // flags {: # enable-flags}
+
+Experimente a Portals no Chrome 85 e versões posteriores lançando um sinalizador experimental:
+
+- Habilite o `about://flags/#enable-portals` para navegações da mesma origem.
+- Para testar navegações entre origens, habilite o `about://flags/#enable-portals-cross-origin` adicionalmente.
+
+Durante essa fase inicial de testes da Portals, também recomendamos o uso de um diretório de dados do usuário completamente separado para seus testes, definindo a sinalização de linha de comando [`--user-data-dir`](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#command-line) Assim que a Portals estiver habilitada, confirme no DevTools se você possui o novo `HTMLPortalElement` brilhante.
+
+{% Img src="image/admin/aUrrqhzMxaEX865Fk5zX.png", alt="Uma captura de tela do console DevTools mostrando o HTMLPortalElement", width="800", height="252" %}
+
+## Implementar a Portals
+
+Vamos examinar um exemplo básico de implementação.
+
+```javascript
+// Create a portal with the wikipedia page, and embed it
+// (like an iframe). You can also use the <portal> tag instead.
+portal = document.createElement('portal');
+portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
+portal.style = '...';
+document.body.appendChild(portal);
+
+// When the user touches the preview (embedded portal):
+// do fancy animation, e.g. expand …
+// and finish by doing the actual transition.
+// For the sake of simplicity, this snippet will navigate
+// on the `onload` event of the Portals element.
+portal.addEventListener('load', (evt) => {
+   portal.activate();
+});
+```
+
+É simples assim. Tente este código no console do DevTools, a página da wikipedia deve abrir.
+
+{% Img src="image/admin/rp6i8ngGJkvooXJ9WmLK.gif", alt="Um gif da demonstração do estilo do portal de prévia", width="800", height="557" %}
+
+Se você quiser construir algo como mostramos no Chrome Dev Summit, que funciona exatamente como a demo acima, o seguinte snippet será de seu interesse.
+
+```javascript
+// Adding some styles with transitions
+const style = document.createElement('style');
+style.innerHTML = `
+  portal {
+    position:fixed;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    box-shadow: 0 0 20px 10px #999;
+    transform: scale(0.4);
+    transform-origin: bottom left;
+    bottom: 20px;
+    left: 20px;
+    animation-name: fade-in;
+    animation-duration: 1s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+  }
+  .portal-transition {
+    transition: transform 0.4s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .portal-transition {
+      transition: transform 0.001s;
+    }
+  }
+  .portal-reveal {
+    transform: scale(1.0) translateX(-20px) translateY(20px);
+  }
+  @keyframes fade-in {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+  }
+`;
+const portal = document.createElement('portal');
+// Let's navigate into the WICG Portals spec page
+portal.src = 'https://wicg.github.io/portals/';
+// Add a class that defines the transition. Consider using
+// `prefers-reduced-motion` media query to control the animation.
+// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
+portal.classList.add('portal-transition');
+portal.addEventListener('click', (evt) => {
+  // Animate the portal once user interacts
+  portal.classList.add('portal-reveal');
+});
+portal.addEventListener('transitionend', (evt) => {
+  if (evt.propertyName == 'transform') {
+    // Activate the portal once the transition has completed
+    portal.activate();
+  }
+});
+document.body.append(style, portal);
+```
+
+Também é fácil fazer a detecção de recursos para aprimorar progressivamente um site usando a Portals.
+
+```javascript
+if ('HTMLPortalElement' in window) {
+  // If this is a platform that have Portals...
+  const portal = document.createElement('portal');
+  ...
+}
+```
+
+Se você quiser experimentar rapidamente como é a Portals, tente usar [uskay-portals-demo.glitch.me](https://uskay-portals-demo.glitch.me). Certifique-se de acessá-lo com o Chrome 85 ou versões posteriores e ative o [sinalizador experimental](#enable-flags)!
+
+1. Insira um URL que deseja visualizar.
+2. A página será então incorporada como um elemento `<portal>`
+3. Clique na visualização.
+4. A visualização será ativada após uma animação.
+
+{% Img src="image/admin/Y4Vv6v3DAAC32IsiWS7g.gif", alt="Um gif do uso da demonstração de falha do uso da Portals", width="800", height="547" %}
+
+## Confira as especificações
+
+Estamos discutindo ativamente [a especificação da Portals](https://wicg.github.io/portals/) no Web Incubation Community Group (WICG). Para começar a trabalhar rapidamente, dê uma olhada em alguns dos [principais cenários](https://github.com/WICG/portals/blob/master/key-scenarios.md). Estes são os três recursos importantes com os quais você deve se familiarizar:
+
+- [O elemento `<portal>`](https://wicg.github.io/portals/#the-portal-element): o próprio elemento HTML. A API é muito simples. Consiste no `src`, a `activate` e uma interface para mensagens (`postMessage`). `activate` recebe um argumento opcional para passar dados para o `<portal>` na ativação.
+- [A interface `portalHost`](https://wicg.github.io/portals/#the-portalhost-interface): Adiciona um objeto `portalHost` ao objeto `window` Isso permite que você verifique se a página está incorporada como um elemento `<portal>` Ele também fornece uma interface para mensagens (`postMessage`) de volta ao host.
+- [A interface PortalActivateEvent:](https://wicg.github.io/portals/#the-portalactivateevent-interface) Um evento que dispara quando o `<portal>` é ativado. Há uma função `adoptPredecessor` chamada adoptPredecessor que você pode usar para recuperar a página anterior como um elemento `<portal>` Isso permite que você crie navegações contínuas e experiências compostas entre duas páginas.
+
+Vamos olhar além do padrão básico de uso. Aqui está uma lista não exaustiva do que você pode conseguir com a Portals, juntamente com o código de amostra.
+
+### Personalize o estilo quando incorporado como um elemento `<portal>`
+
+```javascript
+// Detect whether this page is hosted in a portal
+if (window.portalHost) {
+  // Customize the UI when being embedded as a portal
+}
+```
+
+### Mensagens entre o elemento `<portal>` `portalHost`
+
+```javascript
+// Send message to the portal element
+const portal = document.querySelector('portal');
+portal.postMessage({someKey: someValue}, ORIGIN);
+
+// Receive message via window.portalHost
+window.portalHost.addEventListener('message', (evt) => {
+  const data = evt.data.someKey;
+  // handle the event
+});
+```
+
+### Ativando o `<portal>` e recebendo o evento `portalactivate`
+
+```javascript
+// You can optionally add data to the argument of the activate function
+portal.activate({data: {somekey: 'somevalue'}});
+
+// The portal content will receive the portalactivate event
+// when the activate happens
+window.addEventListener('portalactivate', (evt) => {
+  // Data available as evt.data
+  const data = evt.data;
+});
+```
+
+### Recuperando o predecessor
+
+```javascript
+// Listen to the portalactivate event
+window.addEventListener('portalactivate', (evt) => {
+  // ... and creatively use the predecessor
+  const portal = evt.adoptPredecessor();
+  document.querySelector('someElm').appendChild(portal);
+});
+```
+
+### Saber que sua página foi adotada como predecessora
+
+```javascript
+// The activate function returns a Promise.
+// When the promise resolves, it means that the portal has been activated.
+// If this document was adopted by it, then window.portalHost will exist.
+portal.activate().then(() => {
+  // Check if this document was adopted into a portal element.
+  if (window.portalHost) {
+    // You can start communicating with the portal element
+    // i.e. listen to messages
+    window.portalHost.addEventListener('message', (evt) => {
+      // handle the event
+    });
+  }
+});
+```
+
+Ao combinar todos os recursos suportados pela Portals, você pode criar experiências de usuário realmente fantásticas. Por exemplo, a demonstração abaixo demonstra como os Portais podem permitir uma experiência do usuário perfeita entre um site e o conteúdo incorporado de terceiros.
+
+{% YouTube '4JkipxFVE9k' %}
+
+{% Aside %} Interessado nesta demonstração? [Faça um fork no GitHub](https://github.com/WICG/portals/tree/master/demos/portal-embed-demo) e crie sua própria versão! {% endAside %}
+
+## Casos de uso e planos
+
+Esperamos que você tenha gostado deste breve tour pela Portals! Mal podemos esperar para ver o que você pode fazer. Por exemplo, você pode querer começar a usar a Portals para navegações não triviais, como: pré-renderizar a página de seu produto mais vendido a partir de uma página de lista de categorias de produtos.
+
+Outra coisa importante a saber é que a Portals pode ser usada em navegações de origem cruzada, assim como um `<iframe>`. Portanto, se você tiver vários sites que se cruzam, também pode usar a Portals para criar navegações contínuas entre dois sites diferentes. Este caso de uso de origem cruzada é muito exclusivo para a Portals e pode até melhorar a experiência do usuário de SPAs.
+
+## Compartilhe o seu feedback
+
+Os portais estão prontos para experimentação no Chrome 85 e versões posteriores. O feedback da comunidade é crucial para o design de novas APIs, então experimente e diga-nos o que você acha! Se você tiver solicitações de recursos ou comentários, acesse o [repositório WICG GitHub](https://github.com/WICG/portals/issues).
diff --git a/src/site/content/pt/blog/how-to-file-a-good-bug/index.md b/src/site/content/pt/blog/how-to-file-a-good-bug/index.md
new file mode 100644
index 00000000000..6a6ef49ff40
--- /dev/null
+++ b/src/site/content/pt/blog/how-to-file-a-good-bug/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Como registrar um bom bug de navegador
+subhead: |-
+  Informar os fornecedores de navegadores sobre os problemas encontrados em seus navegadores
+  é parte integrante da melhoria das plataformas da web!
+authors:
+  - robertnyman
+  - petelepage
+date: 2020-06-15
+updated: 2020-06-15
+description: |-
+  Informar os fornecedores de navegadores sobre os problemas encontrados em seus navegadores
+  é parte integrante da melhoria das plataformas da web!
+tags:
+  - blog
+---
+
+Reportar um bom bug não é difícil, mas dá um pouco de trabalho. O objetivo é facilitar encontrar o que está quebrado, chegar à causa raiz e, o mais importante, encontrar uma maneira de corrigi-lo. Os erros que progridem rapidamente tendem a ser fáceis de reproduzir com um comportamento esperado claro.
+
+## Verifique se é um bug
+
+A primeira etapa é descobrir qual deve ser o comportamento "correto".
+
+### Qual é o comportamento correto?
+
+Verifique os documentos API relevantes no [MDN](https://developer.mozilla.org/) ou tente encontrar especificações relacionadas. Essas informações podem ajudá-lo a decidir qual API está de fato quebrada, onde está quebrada e qual é o comportamento esperado.
+
+### Funciona em um navegador diferente?
+
+O comportamento que difere entre os navegadores geralmente é priorizado como um problema de interoperabilidade, especialmente quando o navegador que contém o bug é o único diferente. Tente testar nas versões mais recentes do Chrome, Firefox, Safari e Edge, possivelmente usando uma ferramenta como o [BrowserStack](https://www.browserstack.com/).
+
+Se possível, verifique se a página não está se comportando de maneira diferente intencionalmente devido à detecção do agente do usuário. No Chrome DevTools, tente definir a [`User-Agent` do usuário para outro navegador](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/).
+
+### Quebrou em um lançamento recente?
+
+Isso funcionou como esperado no passado, mas quebrou em um lançamento recente do navegador? Essas "regressões" podem ser executadas muito mais rapidamente, especialmente se você informar um número de versão em que funcionou e uma versão em que falhou. Ferramentas como o [BrowserStack](https://www.browserstack.com/) podem facilitar a verificação de versões antigas do navegador e a [ferramenta bisect-builds](https://www.chromium.org/developers/bisect-builds-py) (para Chromium) permite pesquisar a alteração de forma muito eficiente.
+
+Se um problema for uma regressão e puder ser reproduzido, a causa raiz geralmente pode ser encontrada e corrigida rapidamente.
+
+### Outras pessoas estão vendo o mesmo problema?
+
+Se você estiver tendo problemas, há uma boa chance de que outros desenvolvedores também estejam. Primeiro, tente pesquisar o bug no [Stack Overflow](http://stackoverflow.com/). Isso pode ajudá-lo a traduzir um problema abstrato em uma API específica quebrada e pode ajudá-lo a encontrar uma solução alternativa de curto prazo até que o bug seja corrigido.
+
+## Isso já foi relatado antes?
+
+Depois de ter uma ideia de qual é o bug, é hora de verificar se o bug já foi relatado, pesquisando no banco de dados de bugs do navegador.
+
+- Navegadores baseados em Chromium: [https://crbug.com](https://crbug.com/)
+- Firefox: [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Navegadores baseados em Safari e WebKit: [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+Se você encontrar um bug existente que descreva o problema, dê seu apoio marcando com estrela, adicionando como favorito ou comentando o bug. E, em muitos sites, você pode adicionar a si mesmo à lista CC e obter atualizações quando o bug mudar.
+
+Se você decidir comentar sobre o bug, inclua informações sobre como o bug afeta seu site. Evite adicionar comentários no estilo "+1", pois os acompanhadores de bugs geralmente enviam e-mails para cada comentário.
+
+## Reporte o bug
+
+Se o bug não tiver sido relatado antes, é hora de comunicar ao fornecedor do navegador sobre ele.
+
+### Crie um caso de teste minimizado {: #minified-test-case}
+
+A Mozilla tem um ótimo artigo sobre [como criar um caso de teste minimizado](https://developer.mozilla.org/docs/Mozilla/QA/Reducing_testcases). Para resumir a história, embora uma descrição do problema seja um grande começo, nada se compara a oferecer uma demonstração vinculada no bug que mostra o problema. Para maximizar a chance de progresso rápido, o exemplo deve conter o mínimo possível de  código necessário para demonstrar o problema. Um exemplo mínimo de código é a primeira coisa que você pode fazer para aumentar as chances de seu bug ser corrigido.
+
+Aqui estão algumas dicas para minimizar um caso de teste:
+
+- Baixe a página da web, adicione [`<base href="https://original.url">`](https://developer.mozilla.org/docs/Web/HTML/Element/base) e verifique se o bug existe localmente. Isso pode exigir um servidor HTTPS ativo se o URL usar HTTPS.
+- Teste os arquivos locais nas compilações mais recentes do maior número de navegadores que puder.
+- Tente condensar tudo em um arquivo.
+- Remova o código (começando com coisas que você sabe que são desnecessárias) até que o bug desapareça.
+- Use o controle de versão para salvar seu trabalho e desfazer o que der errado.
+
+#### Hospedar um caso de teste minimizado
+
+Se você está procurando um bom lugar para hospedar seu caso de teste minimizado, existem vários bons lugares disponíveis:
+
+- [Glitch](https://glitch.com)
+- [JSBin](https://jsbin.com)
+- [JSFiddle](https://jsfiddle.net)
+- [CodePen](https://codepen.io)
+
+Esteja ciente de que vários desses sites exibem conteúdo em um iframe, o que pode fazer com que recursos ou bugs se comportem de maneira diferente.
+
+## Registrando seu problema
+
+Depois de ter seu caso de teste minimizado, você está pronto para registrar esse bug. Vá até o site correto de acompanhamento de bugs e crie um novo problema.
+
+- Navegadores baseados em Chromium - [https://crbug.com/new](https://crbug.com/new)
+- Firefox - [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- Navegadores baseados em Safari e WebKit - [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+### Forneça uma descrição clara e as etapas necessárias para reproduzir o problema
+
+Primeiro, forneça uma descrição clara para ajudar os engenheiros a entender rapidamente qual é o problema e ajudar a fazer a triagem do problema.
+
+```text
+When installing a PWA using the `beforeinstallprompt.prompt()`, the
+`appinstalled` event fires before the call to `prompt()` resolves.
+```
+
+Em seguida, forneça as etapas detalhadas necessárias para reproduzir o problema. É aqui que [entra o seu caso de teste reduzido](#minified-test-case).
+
+```text
+What steps will reproduce the problem?
+1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
+   console tab.
+2. Click the Install button in the page, you might need to interact with
+   the page a bit before it becomes enabled.
+3. Click Install on the browser modal install confirmation.
+```
+
+E, finalmente, descreva o resultado *real* e *esperado* .
+
+```text
+What is the actual result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL: Success (logged when `appinstalled` event fired)
+2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+
+What is the expected result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+2. INSTALL: Success (logged when `appinstalled` event fired)
+```
+
+Para obter mais informações, consulte as [diretrizes de redação de relatórios de bug](https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines) no MDN.
+
+#### Bônus: adicione uma captura de tela ou screencast do problema
+
+Embora não seja obrigatório, em alguns casos, pode ser útil adicionar uma captura de tela ou screencast do problema. Isso é especialmente útil nos casos em que os bugs possam exigir algumas etapas estranhas para serem reproduzidos. Poder ver o que acontece em um screencast ou em uma captura de tela frequentemente pode ser útil.
+
+### Inclua os detalhes do ambiente
+
+Alguns bugs são reproduzíveis apenas em determinados sistemas operacionais ou apenas em tipos específicos de monitores (por exemplo, baixo dpi ou alto dpi). Certifique-se de incluir os detalhes de todos os ambientes de teste usados.
+
+### Envie o bug
+
+Finalmente, envie o bug. Então, lembre-se de ficar de olho em seu e-mail para verificar eventuais respostas ao bug. Normalmente, durante a investigação e ao corrigir o bug, os engenheiros podem ter perguntas adicionais ou, se tiverem dificuldade em reproduzir o problema, eles podem entrar em contato.
diff --git a/src/site/content/pt/blog/how-to-use-local-https/index.md b/src/site/content/pt/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..062dc6016ee
--- /dev/null
+++ b/src/site/content/pt/blog/how-to-use-local-https/index.md
@@ -0,0 +1,270 @@
+---
+title: Como usar HTTPS para desenvolvimento local
+subhead: Às vezes, você precisa executar seu site de desenvolvimento local com HTTPS. Ferramentas e dicas para fazer isso com segurança e rapidez.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %} Na maioria das vezes, `http://localhost` faz o que você precisa: em navegadores, ele se comporta principalmente como HTTPS 🔒. É por isso que algumas APIs que não funcionam em um site HTTP implantado funcionarão em `http://localhost` .
+
+Isso significa que você precisa usar HTTPS localmente **apenas em casos especiais** (consulte [Quando usar HTTPS para desenvolvimento local](/when-to-use-local-https) ), como nomes de host personalizados ou cookies seguros em navegadores. Continue lendo se for você! {% endAside %}
+
+*Neste post, as instruções sobre `localhost` são válidas para `127.0.0.1` e `[::1]` também, uma vez que ambas descrevem o endereço do computador local, também chamado de "endereço de loopback". Além disso, para manter as coisas simples, o número da porta não é especificado.**Portanto, quando você vir `http://localhost` , leia-o como `http://localhost:{PORT}` ou `http://127.0.0.1:{PORT}` .*
+
+Se o seu site de produção usa HTTPS, você deseja que seu site de desenvolvimento local se comporte **como um site HTTPS** (se o seu site de produção não usa HTTPS, [priorize a mudança para HTTPS](/why-https-matters/) ). Na maioria das vezes, você pode confiar que `http://localhost` se comportará **como um site HTTPS** . Mas, [em alguns casos](/when-to-use-local-https) , você precisa executar seu site localmente com HTTPS. Vamos dar uma olhada em como fazer isso.
+
+**⏩ Você está procurando instruções rápidas ou já esteve aqui antes? Pule para o [Cheatsheet](#using-mkcert-cheatsheet).**
+
+## Execução local do seu site com HTTPS usando mkcert (recomendado)
+
+Para usar HTTPS com seu site de desenvolvimento local e acessar `https://localhost` ou `https://mysite.example` (nome de host personalizado), você precisa de um [certificado TLS](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate). Mas os navegadores não consideram qualquer certificado válido: seu certificado precisa ser **assinado** por uma entidade confiável para o seu navegador, chamada **[autoridade de certificação](https://en.wikipedia.org/wiki/Certificate_authority)** confiável (CA).
+
+O que você precisa fazer é criar um certificado e assiná-lo com uma CA que seja **confiável localmente** para seu dispositivo e navegador. [mkcert](https://github.com/FiloSottile/mkcert) é uma ferramenta que ajuda você a fazer isso em alguns comandos. Funciona assim:
+
+- Se você abrir seu site em execução localmente em seu navegador usando HTTPS, seu navegador verificará o certificado de seu servidor de desenvolvimento local.
+- Ao ver que o certificado foi assinado pela autoridade de certificação gerada pelo mkcert, o navegador verifica se está registrado como uma autoridade de certificação confiável.
+- mkcert é listado como uma autoridade confiável, portanto, seu navegador confia no certificado e cria uma conexão HTTPS.
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="Um diagrama de como o mkcert funciona.", width="800", height="787" %}<figcaption> Um diagrama de como funciona o mkcert.</figcaption></figure>
+
+mkcert (e ferramentas semelhantes) fornecem vários benefícios:
+
+- mkcert é especializado na criação de certificados que são **compatíveis com o que os navegadores consideram certificados válidos**. Ele permanece atualizado para atender aos requisitos e práticas recomendadas. É por isso que você não terá que executar comandos mkcert com configurações ou argumentos complexos para gerar os certificados corretos!
+- mkcert é uma ferramenta de plataforma cruzada. Qualquer pessoa da sua equipe pode usá-lo.
+
+mkcert é a ferramenta que recomendamos para criar um certificado TLS para desenvolvimento local. Você pode verificar [outras opções](#running-your-site-locally-with-https-other-options) também.
+
+Muitos sistemas operacionais podem incluir bibliotecas para produzir certificados, como o [openssl](https://www.openssl.org/). Ao contrário do mkcert e ferramentas semelhantes, essas bibliotecas podem não produzir certificados corretos de maneira consistente, podem exigir a execução de comandos complexos e não são necessariamente multiplataforma.
+
+{% Aside 'gotchas' %} O mkcert em que estamos interessados nesta postagem é [este](https://github.com/FiloSottile/mkcert), não [este](https://www.npmjs.com/package/mkcert). {% endAside %}
+
+### Cuidado
+
+{% Aside 'caution' %}
+
+- Nunca exporte ou compartilhe o arquivo `rootCA-key.pem` que o mkcert cria automaticamente quando você executa `mkcert -install`. **Um invasor que obtiver esse arquivo pode criar ataques no caminho para qualquer site que você esteja visitando**. Eles podem interceptar solicitações seguras de sua máquina para qualquer site — seu banco, provedor de saúde ou redes sociais. Se você precisa saber onde `rootCA-key.pem` está localizado para ter certeza de que é seguro, execute `mkcert -CAROOT`.
+- Use mkcert apenas para **fins de desenvolvimento** — e, por extensão, nunca peça aos usuários finais para executar comandos mkcert.
+- Equipes de desenvolvimento: todos os membros de sua equipe devem instalar e executar o mkcert **separadamente** (não armazenar e compartilhar a CA e o certificado).
+
+{% endAside %}
+
+### Configuração
+
+1. Instale o mkcert (apenas uma vez).
+
+    Siga as [instruções](https://github.com/FiloSottile/mkcert#installation) para instalar o mkcert em seu sistema operacional. Por exemplo, no macOS:
+
+    ```bash
+    brew install mkcert
+    brew install nss # se usa o Firefox
+    ```
+
+2. Adicione mkcert às suas CAs raiz locais.
+
+    Em seu terminal, execute o seguinte comando:
+
+    ```bash
+    mkcert -install
+    ```
+
+    Isso gera uma autoridade de certificação local (CA). Sua CA local gerada pelo mkcert é confiável apenas **localmente**, no seu dispositivo.
+
+3. Gere um certificado para o seu site, assinado por mkcert.
+
+    Em seu terminal, navegue até o diretório raiz do seu site ou qualquer diretório em que você gostaria que os certificados estivessem localizados.
+
+    Em seguida, execute:
+
+    ```bash
+    mkcert localhost
+    ```
+
+    Se você estiver usando um nome de host personalizado como `mysite.example`, execute:
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    O comando acima faz duas coisas:
+
+    - Gera um certificado para o nome de host que você especificou
+    - Permite que mkcert (que você adicionou como uma CA local na Etapa 2) assine este certificado.
+
+    Agora, seu certificado está pronto e assinado por uma autoridade de certificação em que seu navegador confia localmente. Você está quase terminando, mas seu servidor ainda não sabe sobre o seu certificado!
+
+4. Configure seu servidor.
+
+    Agora você precisa dizer ao seu servidor para usar HTTPS (já que os servidores de desenvolvimento tendem a usar HTTP por padrão) e usar o certificado TLS que você acabou de criar.
+
+    Como fazer isso depende exatamente do seu servidor. Alguns exemplos:
+
+    **👩🏻‍💻 Com nó:**
+
+    `server.js` (substitua `{PATH/TO/CERTIFICATE...}` e `{PORT}`):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻 Com [servidor http](https://www.npmjs.com/package/http-server) :**
+
+    Inicie seu servidor da seguinte maneira (substitua `{PATH/TO/CERTIFICATE...}`):
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S` executa seu servidor com HTTPS, enquanto `-C` define o certificado e `-K` define a chave.
+
+    **👩🏻‍💻 Com um servidor de desenvolvimento React:**
+
+    Edite seu `package.json` seguinte maneira e substitua `{PATH/TO/CERTIFICATE...}`:
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    Por exemplo, se você criou um certificado para `localhost` localizado no diretório raiz do seu site da seguinte maneira:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    Então, seu `start` deve ser parecido com este:
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 Outros exemplos:**
+
+    - [Servidor de desenvolvimento angular](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨ Você está pronto! Abra `https://localhost` ou `https://mysite.example` em seu navegador: você está executando seu site localmente com HTTPS. Você não verá nenhum aviso do navegador, porque seu navegador confia no mkcert como uma autoridade de certificação local.
+
+{% Aside %} Seu servidor pode usar uma porta diferente para HTTPS. {% endAside %}
+
+### Usando mkcert: cheatsheet
+
+{% Details %} {% DetailsSummary %} mkcert em resumo {% endDetailsSummary %}
+
+Para executar seu site de desenvolvimento local com HTTPS:
+
+1. Configure o mkcert.
+
+    Se ainda não o fez, instale o mkcert, por exemplo, no macOS:
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    Verifique as [instruções de instalação do mkcert](https://github.com/FiloSottile/mkcert#installation) para Windows e Linux.
+
+    Em seguida, crie uma autoridade de certificação local:
+
+    ```bash
+    mkcert -install
+    ```
+
+2. Crie um certificado confiável.
+
+    ```bash
+    mkcert {SEU HOSTNAME, por ex., hostlocal ou meusite.exemplo}
+    ```
+
+    Isso cria um certificado válido (que será assinado por `mkcert` automaticamente).
+
+3. Configure seu servidor de desenvolvimento para usar HTTPS e o certificado que você criou na Etapa 2.
+
+4. ✨ Você está pronto! Agora você pode acessar `https://{YOUR HOSTNAME}` em seu navegador, sem avisos
+
+{% Aside 'caution' %}
+
+Faça isso apenas para **fins de desenvolvimento** e **nunca exporte ou compartilhe** o arquivo `rootCA-key.pem` (se você precisa saber onde este arquivo está localizado para ter certeza de que é seguro, execute `mkcert -CAROOT`).
+
+{% endAside %}
+
+{% endDetails %}
+
+## Execução local do seu site com HTTPS: outras opções
+
+### Certificado autoassinado
+
+Você também pode decidir não usar uma autoridade de certificação local como mkcert e, em vez disso, **assinar seu certificado você mesmo**.
+
+Cuidado com algumas armadilhas desta abordagem:
+
+- Os navegadores não confiam em você como autoridade de certificação e mostrarão avisos que você precisará ignorar manualmente. No Chrome, você pode usar o sinalizador `#allow-insecure-localhost` para ignorar esse aviso automaticamente no `localhost`. Se parece um pouco hackeado, é porque é.
+- Isso não é seguro se você estiver trabalhando em uma rede insegura.
+- Os certificados autoassinados não se comportam exatamente da mesma maneira que os certificados confiáveis.
+- Não é necessariamente mais fácil ou mais rápido do que usar uma CA local como o mkcert.
+- Se você não estiver usando esta técnica em um contexto de navegador, pode ser necessário desativar a verificação de certificado para o seu servidor. Omitir a reativação na produção seria perigoso.
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="Screenshots of the warnings browsers show when a self-signed certificate is used.", width="800", height="598" %} <figcaption> Os navegadores de avisos mostram quando um certificado autoassinado é usado.</figcaption></figure>
+
+{% Aside %} Se você não especificar nenhum certificado, as opções HTTPS do servidor de desenvolvimento do [React](https://create-react-app.dev/docs/using-https-in-development/) e do [Vue](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve) criam um certificado autoassinado em segundo plano. Isso é rápido, mas você receberá avisos do navegador e encontrará outras armadilhas relacionadas aos certificados autoassinados listados acima. Felizmente, você pode usar a opção HTTPS integrada dos frameworks front-end **e** especificar um certificado confiável localmente criado via mkcert ou similar. Veja como fazer isso no [exemplo mkcert com React](/#setup:~:text=a%20React%20development%20server). {% endAside %}
+
+{% Details %} {% DetailsSummary %} Por que os navegadores não confiam em certificados autoassinados? {% endDetailsSummary %}
+
+Se você abrir seu site em execução localmente em seu navegador usando HTTPS, seu navegador verificará o certificado de seu servidor de desenvolvimento local. Quando ele vê que o certificado foi assinado por você, ele verifica se você está registrado como uma autoridade de certificação confiável. Porque você não é, seu navegador não pode confiar no certificado; ele exibe um aviso informando que sua conexão não é segura. Você pode prosseguir por sua própria conta e risco — se o fizer, uma conexão HTTPS será criada.
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="Por que os navegadores não confiam em certificados autoassinados: um diagrama.", width="800", height="833" %} <figcaption> Por que os navegadores não confiam em certificados autoassinados.</figcaption></figure>
+
+{% endDetails %}
+
+### Certificado assinado por uma autoridade de certificação regular
+
+Você também pode encontrar técnicas baseadas em fazer com que uma autoridade de certificação real — não local — assine seu certificado.
+
+Algumas coisas para ter em mente se você estiver pensando em usar essas técnicas:
+
+- Você terá mais trabalho de configuração a fazer do que usar uma técnica local de CA como o mkcert.
+- Você precisa usar um nome de domínio que você controle e que seja válido. Isso significa que você **não pode** usar autoridades de certificação reais para:
+    - `localhost` e outros nomes de domínio [reservados](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml), como `example` ou `test`.
+    - Qualquer nome de domínio que você não controla.
+    - Domínios de nível superior que não são válidos. Veja a [lista de domínios de nível superior válidos](https://www.iana.org/domains/root/db).
+
+### Proxy reverso
+
+Outra opção para acessar um site em execução local com HTTPS é usar um [proxy reverso](https://en.wikipedia.org/wiki/Reverse_proxy) como o [ngrok](https://ngrok.com/).
+
+Alguns pontos a considerar:
+
+- Qualquer pessoa pode acessar seu site de desenvolvimento local, uma vez que você compartilhe com eles uma URL criada com um proxy reverso. Isso pode ser muito útil ao demonstrar seu projeto para os clientes! Ou isso pode ser uma desvantagem, se seu projeto for delicado.
+- Você pode precisar considerar o preço.
+- Novas [medidas de segurança](/cors-rfc1918-feedback/) em navegadores podem afetar a maneira como essas ferramentas funcionam.
+
+### Sinalizar (não recomendado)
+
+Se estiver usando um nome de host personalizado como `mysite.example`, você pode usar um sinalizador no Chrome para forçosamente considerar `mysite.example` seguro. **Evite fazer isso**, porque:
+
+- Você precisaria ter 100% de certeza de que `mysite.example` sempre resolve para um endereço local, caso contrário, você poderia vazar credenciais de produção.
+- Você não conseguirá depurar em navegadores com este truque 🙀.
+
+*Com muitos agradecimentos pelas contribuições e feedback a todos os revisores e colaboradores - especialmente Ryan Sleevi, Filippo Valsorda, Milica Mihajlija e Rowan Merewood. 🙌*
+
+*Fundo da imagem do herói por [@anandu](https://unsplash.com/@anandu) no [Unsplash](https://unsplash.com/photos/pbxwxwfI0B4), editado.*
diff --git a/src/site/content/pt/blog/iframe-lazy-loading/index.md b/src/site/content/pt/blog/iframe-lazy-loading/index.md
new file mode 100644
index 00000000000..dfe38cdbbce
--- /dev/null
+++ b/src/site/content/pt/blog/iframe-lazy-loading/index.md
@@ -0,0 +1,227 @@
+---
+layout: post
+title: É hora de carregar de forma lazy iframes offscreen!
+subhead: O carregamento lazy integrado no navegador para iframes já chegou
+authors:
+  - addyosmani
+date: 2020-07-24
+updated: 2022-08-15
+hero: image/admin/dMCW2Qqi5Qp2DB3w4DyE.png
+alt: Contorno de telefone com carregamento de imagem e recursos
+description: Este artigo trata o atributo loading e como ele pode ser usado para controlar o carregamento de iframes.
+tags:
+  - blog
+  - performance
+  - memory
+feedback:
+  - api
+---
+
+[O carregamento lazy padrão para imagens](/browser-level-image-lazy-loading/) foi inicialmente suportado no Chrome 76 através do atributo `loading` e posteriormente chegou no Firefox. Estamos felizes em compartilhar que **o carregamento lazy no nível do navegador para iframes** agora é [padrão](https://github.com/whatwg/html/pull/5579) e também é suportado nos navegadores Chrome e baseados em Chromium.
+
+```html/1
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+```
+
+O carregamento lazy padrão para iframes adia o carregamento de iframes offscreen até que o usuário role para perto deles. Isto preserva dados, acelera o carregamento de outras partes da página e reduz o uso de memória.
+
+Esta [demo](https://lazy-load.netlify.app/iframes/) de `<iframe loading=lazy>` mostra incorporações de vídeo com carregamento lazy:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+### Por que devemos carregar iframes usando lazy loading?
+
+As incorporações de terceiros cobrem uma ampla gama de casos de uso, desde players de vídeo a postagens em mídias sociais e anúncios. Frequentemente, esse conteúdo não fica imediatamente visível na viewport do usuário. Em vez disso, ele só é visto quando o usuário rola mais para baixo na página. Apesar disso, os usuários pagam o custo elevado do download de dados e JavaScript para todos os frames, mesmo que não role até eles.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqZMRuULxbz6DVXNP8ea.png", alt="Economia de dados com o carregamento lazy para um iframe. O carregamento eager baixa 3 MB neste exemplo, enquanto o carregamento lazy não baixa nada neste código até que o usuário role para mais perto do iframe. ", width="800", height="460" %}</figure>
+
+Com base na pesquisa do Chrome sobre [carregamento automático de iframes offscreen usando lazy-loading para usuários Data Saver](https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html), o carregamento lazy de iframes pode levar a uma economia média de dados de 2-3%, reduções de 1-2% na [First Contentful Paint](/fcp/) (FCP) na mediana e uma melhora de 2% da [First Input Delay](/fid/) (FID) no percentil 95.
+
+### Como funciona o carregamento lazy integrado para iframes?
+
+O atributo `loading` permite que um navegador adie o carregamento de iframes e imagens offscreen até que os usuários rolarem para perto deles. O atributo `loading` suporta dois valores:
+
+- `lazy` : é um bom candidato para carregamento lazy.
+- `eager` : não é um bom candidato para carregamento lazy. Carregue imediatamente.
+
+O uso do atributo `loading` em iframes funciona da seguinte maneira:
+
+```html
+<!-- Lazy-load the iframe -->
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+
+<!-- Eagerly load the iframe -->
+<iframe src="https://example.com"
+        width="600"
+        height="400"></iframe>
+
+<!-- or use loading="eager" to opt out of automatic
+lazy-loading in Lite Mode -->
+<iframe src="https://example.com"
+        loading="eager"
+        width="600"
+        height="400"></iframe>
+```
+
+Não especificar o atributo terá o mesmo efeito que carregar o recurso de forma imediata (eager), exceto para usuários do [Lite Mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html), onde o Chrome usará o `auto` para decidir se deve ser carregado de forma adiada (lazy).
+
+Se você precisar criar iframes *dinamicamente* usando JavaScript, definir `iframe.loading = 'lazy'` no elemento também é [suportado](https://bugs.chromium.org/p/chromium/issues/detail?id=993273):
+
+```js/2
+var iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.loading = 'lazy';
+document.body.appendChild(iframe);
+```
+
+#### Comportamento de carregamento lazy específico para iframes
+
+O atributo loading afeta os iframes de maneira diferente das imagens, dependendo se o iframe está oculto ou não. (Os iframes ocultos são frequentemente usados para fins de análises ou de comunicação.) O Chrome usa os seguintes critérios para determinar se um iframe está oculto:
+
+- Os atributos width e height do iframe tem valores de 4 px ou menos.
+- `display: none` ou `visibility: hidden` é aplicado.
+- O iframe é posicionado offscreen usando posicionamento X ou Y negativos.
+- Estes critérios se aplicam a `loading=lazy` e `loading=auto`.
+
+Se um iframe atender a qualquer uma dessas condições, o Chrome vai considerá-lo oculto e não fará o lazy loading na maioria dos casos. Os iframes que não estão ocultos serão carregados apenas quando estiverem dentro dos <a>limites de distância de carregamento</a>. O Chrome mostra um placeholder para iframes carregados de forma lazy que ainda estão sendo baixados.
+
+### Que impacto poderemos ver nas incorporações de iframes populares usando carregamento lazy?
+
+E se pudéssemos mudar a web em geral de forma que o default fosse carregar de forma lazy os iframes offscreen? Seria algo assim:
+
+Incorporações de vídeos do YouTube com lazy-loading (economiza 500KB na carga inicial):
+
+```html/1
+<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
+        loading="lazy"
+        width="560"
+        height="315"
+        frameborder="0"
+        allow="accelerometer; autoplay;
+        encrypted-media; gyroscope;
+        picture-in-picture"
+        allowfullscreen></iframe>
+```
+
+**Anedota:** quando passamos a fazer incorporações do YouTube com lazy-loading para o Chrome.com, economizamos 10 segundos do tempo em que nossas páginas seriam interativas em dispositivos móveis. Abri um bug interno com o YouTube para discutir a adição de `loading=lazy` ao seu código de incorporação.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt = "", width = "800", height = "460"%}<br><br>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt="Chrome.com conseguiu uma redução de 10 segundos no tempo de interação ao carregar de forma lazy iframes offscreen para seu vídeo do YouTube incorporado", width="800", height="460" %}</figure>
+
+{% Aside %} Se você estiver procurando maneiras mais eficientes de carregar incorporações do YouTube, talvez interesse explorar o [componente YouTube Lite](https://github.com/paulirish/lite-youtube-embed). {% endAside %}
+
+**Incorporações do Instagram com lazy-loading (preserva &gt;100 KB compactados em gzip na carga inicial):**
+
+As incorporações do Instagram fornecem um bloco de marcação e um script, que injeta um iframe na sua página. O carregamento lazy desse iframe evitaria ter que carregar todo o script necessário para a incorporação. Como essas incorporações são frequentemente exibidas abaixo da viewport na maioria dos artigos, este parece ser um candidato razoável para o carregamento lazy de seu iframe.
+
+**Incorporações do Spotify com lazy-loading (preserva 514KB em carga inicial):**
+
+```html
+<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
+        loading="lazy"
+        width="300"
+        height="380"
+        frameborder="0"
+        allowtransparency="true"
+        allow="encrypted-media"></iframe>
+```
+
+Embora as incorporações acima ilustrem os benefícios potenciais de iframes de carregamento lazy para conteúdo de mídia, há o potencial de também ver esses benefícios em anúncios.
+
+### Estudo de caso: carregamento lazy dos plug-ins sociais do Facebook
+
+Os *plug-ins sociais* do Facebook permitem que os desenvolvedores incorporem conteúdo do Facebook em suas páginas web. Há vários desses plug-ins oferecidos, como postagens incorporadas, fotos, vídeos, comentários… O mais popular é o [plug-in Like](https://developers.facebook.com/docs/plugins/like-button/): um botão que mostra uma contagem de quem "curtiu" a página. Por default, a incorporação do plugin Like numa página web (usando o FB JSSDK) baixa cerca de 215 KB de recursos, 197 KB dos quais é JavaScript. Em muitos casos, o plug-in pode aparecer no final de um artigo ou próximo ao final de uma página, portanto, carregá-lo de forma imediata quando está offscreen pode não ser o ideal.
+
+<figure>   {% Img src="image/admin/fdy8o61jxPN560IkF2Ne.png", alt="Botão Facebook Like", width="800", height="71" %}</figure>
+
+Graças ao engenheiro Stoyan Stefanov, [todos os plug-ins sociais do Facebook agora suportam carregamento lazy padrão de iframes](https://developers.facebook.com/docs/plugins/like-button#settings). Os desenvolvedores que optarem pelo carregamento lazy por meio da configuração `data-lazy` dos plug-ins agora poderão evitar que ele carregue até que o usuário role nas proximidades. Isto permite que os recursos incorporados funcionem totalmente para os usuários que precisarem deles, ao mesmo tempo que oferece economia de dados para aqueles que não rolarem uma página até o fim. Esperamos que esta seja a primeira de muitas incorporações a explorar o carregamento lazy de iframe padrão em produção.
+
+### Posso carregar iframes de forma lazy em múltiplos navegadores? Sim
+
+Os iframes com carregamento lazy podem ser aplicados como um aprimoramento progressivo. Os navegadores que suportam o `loading=lazy` em iframes farão o carregamento lazy do iframe, enquanto o atributo `loading` será ignorado com segurança em navegadores que ainda não o suportam.
+
+Também é possível fazer o carregamento lazy de iframes offscreen usando a biblioteca JavaScript [lazysizes](/use-lazysizes-to-lazyload-images/). Isto pode ser desejável se você:
+
+- requer mais limites personalizados de carregamento lazy do que o que o carregamento lazy padrão oferece atualmente
+- deseja oferecer aos usuários uma experiência consistente de carregamento lazy de iframes em todos os navegadores
+
+```html/3
+<script src="lazysizes.min.js" async></script>
+
+<iframe frameborder="0"
+	  class="lazyload"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+```
+
+Use o seguinte padrão para detectar o carregamento lento e buscar lazysizes quando não estiver disponível:
+
+```html/2
+<iframe frameborder="0"
+	  class="lazyload"
+    loading="lazy"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+
+<script>
+  if ('loading' in HTMLIFrameElement.prototype) {
+    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
+
+    iframes.forEach(iframe => {
+      iframe.src = iframe.dataset.src;
+    });
+
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+
+</script>
+```
+
+### Uma opção para usuários do WordPress {: #wordpress}
+
+Você pode ter uma grande quantidade de iframes espalhados pelo conteúdo de anos de posts num site WordPress. Opcionalmente, você pode adicionar o seguinte código ao arquivo `functions.php` do tema do WordPress para inserir automaticamente `loading="lazy"` nos seus iframes existentes, sem precisar atualizá-los manualmente cada um por um.
+
+Observe que [o suporte no nível do navegador para iframes com lazy loading também está sendo trabalhado no núcleo do WordPress](https://core.trac.wordpress.org/ticket/50756). O trecho de código a seguir verificará as flags relevantes para que, uma vez que o WordPress tenha a funcionalidade integrada, não acrescente mais manualmente o atributo `loading="lazy"`, garantindo que seja interoperável com essas alterações e não resulte num atributo duplicado.
+
+```php
+// TODO: Remove once https://core.trac.wordpress.org/ticket/50756 lands.
+function wp_lazy_load_iframes_polyfill( $content ) {
+	// If WP core lazy-loads iframes, skip this manual implementation.
+	if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
+		return $content;
+	}
+
+	return str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+}
+add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );
+```
+
+Se o seu site WordPress utiliza cache (dica: deveria), não se esqueça de reconstruir o cache do seu site depois.
+
+### Conclusão
+
+Incluir suporte padrão para carregamento lazy de iframes torna significativamente mais fácil para você melhorar o desempenho de suas páginas web. Se você tiver algum comentário, sinta-se à vontade para enviar um issue para o [Chromium Bug Tracker](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad).
+
+E, caso você não tenha visto, veja a [coleção de  imagens e vídeos com carregamento lazy](/fast/#lazy-load-images-and-video) do web.dev para obter mais ideias de carregamento lazy.
+
+*Com agradecimentos a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley e Stoyan Stefanov por suas críticas.*
diff --git a/src/site/content/pt/blog/javascript-this/index.md b/src/site/content/pt/blog/javascript-this/index.md
new file mode 100644
index 00000000000..80aea6eb0ed
--- /dev/null
+++ b/src/site/content/pt/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: 'JavaScript: Qual é o significado disso?'
+subhead: Descobrir o valor de `this` pode ser complicado em JavaScript. Veja como fazer…
+description: Descobrir o valor de `this` pode ser complicado em JavaScript. Veja como fazer…
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+O `this` do JavaScript é o alvo de muitas piadas, e isso é porque, bem, é bastante complicado. No entanto, tenho visto desenvolvedores fazerem coisas muito mais complicadas e de domínio específico para evitar lidar com esse `this`. Se você não tiver certeza sobre `this`, espero que isto ajude. Este é o meu guia sobre `this`.
+
+Vou começar com a situação mais específica e terminar com a menos específica. Este artigo é meio como um grande `if (…) … else if () … else if (…) …`, então você pode ir direto para a primeira seção que corresponde ao código que você está vendo.
+
+1. [Se a função for definida como uma função de seta](#arrow-functions)
+2. [Caso contrário, se a função/classe for chamada com <code>new</code>](#new)
+3. [Caso contrário, se a função tiver um valor de, <code>this</code> 'vinculado'](#bound)
+4. [Caso contrário, se <code>this</code> for definido no tempo da chamada](#call-apply)
+5. [Caso contrário, se a função for chamada através de um objeto pai (<code>parent.func()</code>)](#object-member)
+6. [Caso contrário, se a função ou escopo pai estiver no modo strict](#strict)
+7. [Caso contrário](#otherwise)
+
+## Se a função for definida como uma função de seta: {: # arrow-functions}
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+Neste caso, o valor de `this` é *sempre* o mesmo que `this` no escopo do bloco pai:
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+As funções de seta são ótimas porque o valor interno de `this` não pode ser alterado e ele é *sempre* igual ao valor do `this` externo.
+
+### Outros exemplos
+
+Com as funções de seta, o valor de `this` *não pode* ser alterado com [`bind`](#bound):
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+Com as funções de seta, o valor de `this` *não pode* ser alterado com [`call` ou `apply`](#call-apply):
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+Com funções de seta, o valor de `this` *não pode* ser alterado chamando a função como membro de outro objeto:
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+Com funções de seta, o valor de `this` *não pode* ser alterado chamando a função como um construtor:
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### Métodos de instância 'vinculados'
+
+Com métodos de instância, se você quiser garantir que `this` sempre se refira à instância da classe, a melhor maneira é usar funções de seta e [campos de classe](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields):
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+Esse padrão é muito útil ao usar métodos de instância como ouvintes de eventos em componentes (como componentes React ou componentes web).
+
+O código acima pode parecer que está quebrando a regra "O `this` será igual ao `this` do escopo pai" mas ele começa a fazer sentido se você pensar nos campos de classe como uma outra maneira de definir coisas no construtor:
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+Os padrões alternativos envolvem vincular uma função existente no construtor ou atribuir a função dentro do construtor. Se você não pode usar campos de classe por algum motivo, atribuir funções dentro do construtor é uma alternativa razoável:
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## Caso contrário, se a função/classe for chamada com `new` : {: #new}
+
+```js
+new Whatever();
+```
+
+O código acima irá chamar `Whatever` (ou seu construtor, se for uma classe) com `this` definido com o resultado de `Object.create(Whatever.prototype)`.
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+O mesmo é verdadeiro para construtores antigos:
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### Outros exemplos
+
+Quando chamado com `new`, o valor de `this` *não pode* ser alterado com [`bind`](#bound):
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+Quando chamado com `new`, o valor `this` *não pode* ser alterado chamando a função como um membro de outro objeto:
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## Caso contrário, se a função tiver um valor de, `this` 'vinculado': {: #bound}
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+Sempre que `boundFunction` for chamada, o valor de `this` será o objeto transmitido a `bind` (`boundObject`).
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %} Evite usar `bind` para vincular uma função ao seu `this` externo. Em vez disso, use [funções de seta](#arrow-functions), pois elas deixam `this` claro na declaração da função, em vez de algo que acontece posteriormente no código.
+
+Não use `bind` para definir o valor de `this` para algum valor não relacionado ao objeto pai. Isto é geralmente inesperado e o motivo pelo qual a reputação de `this` é tão ruim. Em vez disso, considere passar o valor como um argumento. Isto é mais explícito e funciona com funções de seta. {% endAside %}
+
+### Outros exemplos
+
+Ao chamar uma função vinculada (bound), o valor de `this` *não pode* ser alterado com [`call` ou `apply`](#call-apply):
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+Ao chamar uma função vinculada (bound), o valor de `this` *não pode* ser alterado chamando a função como membro de outro objeto:
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## Caso contrário, se `this` for definido no tempo da chamada: {: #call-apply}
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+O valor de `this` é o objeto passado para `call`/`apply`.
+
+{% Aside 'warning' %} Não use `call`/`apply` para definir o valor de `this` para algum valor não relacionado ao objeto pai. Isto é geralmente inesperado e o motivo pelo qual a reputação de `this` é tão ruim. Em vez disso, considere passar o valor como um argumento. Isto é mais explícito e funciona com funções de seta. {% endAside %}
+
+Infelizmente, `this` é definido com algum outro valor por coisas como ouvintes de eventos DOM. Nesses casos, usá-lo pode resultar em código difícil de entender:
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+Evito usar `this` em casos como o acima e, em vez disso faço:
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## Caso contrário, se a função for chamada através de um objeto pai (`parent.func()`): {: #object-member}
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+Neste caso, a função é chamada como um membro de `obj`, então `this` será `obj`. Isto acontece no momento da chamada, então o link é quebrado se a função for chamada sem seu objeto pai ou com um objeto pai diferente:
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod() === obj` é falso porque o método `someMethod` *não é* chamado como membro de `obj`. Você poderá encontrar este problema se tentar algo assim:
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+Isto quebra porque a implementação de `querySelector` olha para o seu próprio valor de `this` e espera que seja algum tipo de nó do DOM e isto quebra a ligação. Para alcançar o resultado desejado acima da forma correta, use:
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+Curiosidade: nem todas as APIs usam `this` internamente. Os métodos do console, como `console.log` foram alterados para evitar referências `this`, portanto, o `log` não precisa ser vinculado ao `console`.
+
+{% Aside 'warning' %} Não transplante uma função para um objeto apenas para definir como valor de `this` algum valor não relacionado ao objeto pai. Isto é geralmente inesperado e o motivo pelo qual a reputação de <code>this</code> é tão ruim. Em vez disso, considere passar o valor como um argumento. Isto é mais explícito e funciona com funções de seta. {% endAside %}
+
+## Caso contrário, se a função ou escopo pai estiver no modo strict: {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+Neste caso, o valor de `this` é undefined. `'use strict'` não é necessário na função se o escopo pai já estiver no [modo strict](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) (e todos os módulos estiverem no modo strict).
+
+{% Aside 'warning' %} Não confie nisso. Quero dizer, existem maneiras mais fáceis de obter um `undefined` 😀. {% endAside %}
+
+## Caso contrário: {: #otherwise}
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+Nesse caso, o valor de `this` é o mesmo que o de `globalThis`.
+
+{% Aside %} A maioria das pessoas (inclusive eu) chama `globalThis` de o objeto global, mas isto não é 100% tecnicamente correto. Aqui está [Mathias Bynens com os detalhes](https://mathiasbynens.be/notes/globalthis#terminology), incluindo por que é chamado `globalThis` vez de simplesmente `global`. {% endAside %}
+
+{% Aside 'warning' %} Evite usar `this` para fazer referência ao objeto global (sim, ainda estou chamando-o assim). Em vez disso, use [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis), que é muito mais explícito. {% endAside %}
+
+## Ufa!
+
+E é isso! Isso é tudo que sei sobre `this`. Alguma pergunta? Algo que perdi? Sinta-se à vontade para [twittar para mim](https://twitter.com/jaffathecake).
+
+Agradecimentos a [Mathias Bynens](https://twitter.com/mathias) , [Ingvar Stepanyan](https://twitter.com/RReverser) e [Thomas Steiner](https://twitter.com/tomayac) pela revisão.
diff --git a/src/site/content/pt/blog/lighthouse-ci/index.md b/src/site/content/pt/blog/lighthouse-ci/index.md
new file mode 100644
index 00000000000..f01439ab813
--- /dev/null
+++ b/src/site/content/pt/blog/lighthouse-ci/index.md
@@ -0,0 +1,352 @@
+---
+title: Monitoramento de desempenho com Lighthouse CI
+subhead: Como adicionar o Lighthouse a um sistema de integração contínua, como o GitHub Actions.
+authors:
+  - katiehempenius
+date: 2020-02-27
+description: |2
+
+  Aprenda como configurar o Lighthouse CI e integrá-lo aos fluxos de trabalho do desenvolvedor.
+hero: image/admin/8q10N5o2xDA7YJKcefm5.png
+alt: O Lighthouse CI exibido sobre uma captura de tela do Lighthouse CI Server
+tags:
+  - blog
+  - performance
+  - lighthouse
+feedback:
+  - api
+---
+
+O [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) é um conjunto de ferramentas para usar o Lighthouse durante a integração contínua. O Lighthouse CI pode ser incorporado aos fluxos de trabalho do desenvolvedor de muitas maneiras diferentes. Este guia aborda os seguintes tópicos:
+
+- Usar o Lighthouse CI CLI.
+- Configurar seu provedor de CI para executar o Lighthouse CI.
+- Configurar um [GitHub Action](https://github.com/features/actions) e [verificação de status](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) para o Lighthouse CI. Isso exibirá automaticamente os resultados do Lighthouse nas solicitações pull do GitHub.
+- Construir um painel de desempenho e armazenamento de dados para relatórios do Lighthouse.
+
+## Visão geral
+
+O Lighthouse CI é um conjunto de ferramentas gratuitas que facilita o uso do Lighthouse para monitoramento de desempenho. Um único relatório do Lighthouse fornece um instantâneo do desempenho de uma página da web no momento em que é executado; o Lighthouse CI mostra como essas descobertas mudaram ao longo do tempo. Isso pode ser usado para identificar o impacto de alterações de códigos específicos ou garantir que os limites de desempenho sejam atendidos durante os processos de integração contínua. Embora o monitoramento de desempenho seja o caso de uso mais comum para o Lighthouse CI, ele pode ser usado para monitorar outros aspectos do relatório do Lighthouse — por exemplo, o SEO ou a acessibilidade.
+
+A funcionalidade principal do Lighthouse CI é fornecida pela interface de linha de comando do Lighthouse CI. (Nota: esta é uma ferramenta separada do [Lighthouse CLI](https://github.com/GoogleChrome/lighthouse#using-the-node-cli).) O Lighthouse CI CLI fornece um conjunto de [comandos](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#commands) para usar o Lighthouse CI. Por exemplo, o `autorun` executa várias execuções do Lighthouse, identifica o relatório do Lighthouse mediano e carrega o relatório para armazenamento. Esse comportamento pode ser bastante personalizado passando sinalizadores adicionais ou personalizando o arquivo de configuração do Lighthouse CI, `lighthouserc.js`.
+
+Embora a funcionalidade principal do Lighthouse CI seja principalmente encapsulada no Lighthouse CI CLI, o Lighthouse CI é normalmente usado por meio de uma das seguintes abordagens:
+
+- Executar o Lighthouse CI como parte da integração contínua
+- Usar a ação Lighthouse CI do GitHub que executa e comenta cada solicitação pull
+- Acompanhar o desempenho ao longo do tempo por meio do painel fornecido pelo Lighthouse Server.
+
+Todas essas abordagens são baseadas no Lighthouse CI CLI.
+
+Alternativas ao Lighthouse CI incluem serviços de monitoramento de desempenho de terceiros ou escrever seu próprio script para coletar dados de desempenho durante o processo de CI. Você deve considerar o uso de um serviço de terceiros se preferir deixar outra pessoa cuidar do gerenciamento de seu servidor de monitoramento de desempenho e dispositivos de teste, ou se desejar recursos de notificação (como e-mail ou integração com Slack) sem ter que construir estes recursos por conta própria.
+
+## Use o Lighthouse CI localmente {: #cli }
+
+Esta seção explica como executar e instalar o Lighthouse CI CLI localmente e como configurar o `lighthouserc.js`. Executar o Lighthouse CI CLI localmente é a maneira mais fácil de garantir que o `lighthouserc.js` esteja configurado corretamente.
+
+1. Instale o Lighthouse CI CLI.
+
+    ```shell
+    npm install -g @lhci/cli
+    ```
+
+    O Lighthouse CI é configurado colocando um `lighthouserc.js` na raiz do repositório do seu projeto. Este arquivo é obrigatório e conterá informações de configuração relacionadas ao Lighthouse CI. Embora o Lighthouse CI possa ser [configurado para ser usado sem um repositório git](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#build-context), as instruções neste artigo presumem que seu repositório de projeto está configurado para usar git.
+
+2. Na raiz do seu repositório, crie um [arquivo de configuração](https://github.com/GoogleChrome/lighthouse-ci/blob/v0.4.1/docs/configuration.md#configuration-file) `lighthouserc.js`.
+
+    ```shell
+    touch lighthouserc.js
+    ```
+
+3. Adicione o seguinte código ao `lighthouserc.js`. Este código é uma configuração do Lighthouse CI vazia. Você adicionará a esta configuração em etapas seguintes.
+
+    ```js
+    module.exports = {
+      ci: {
+        collect: {
+          /* Add configuration here */
+        },
+        upload: {
+          /* Add configuration here */
+        },
+      },
+    };
+    ```
+
+4. Cada vez que o Lighthouse CI é executado, ele inicia um servidor para atender ao seu site. Esse servidor é o que permite que o Lighthouse carregue seu site mesmo quando nenhum outro servidor estiver em execução. Quando o Lighthouse CI terminar de ser executado, ele desligará automaticamente o servidor. Para garantir que o serviço funcione corretamente, você deve configurar as propriedades [`staticDistDir`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#detecting-collectstaticdistdir) ou [`startServerCommand`](https://github.com/GoogleChrome/lighthouse-ci/blob/v0.4.1/docs/configuration.md#startservercommand).
+
+    Se o seu site for estático, adicione a propriedade `staticDistDir` ao objeto `ci.collect` para indicar onde os arquivos estáticos estão localizados. O Lighthouse CI usará seu próprio servidor para atender esses arquivos enquanto testa seu site. Se o seu site não for estático, adicione a propriedade `startServerCommand` ao objeto `ci.collect` para indicar o comando que inicia o seu servidor. O Lighthouse CI iniciará um novo processo de servidor durante o teste e o encerrará depois.
+
+    ```js
+    // Static site example
+    collect: {
+      staticDistDir: './public',
+    }
+    ```
+
+    ```js
+    // Dynamic site example
+    collect: {
+      startServerCommand: 'npm run start',
+    }
+    ```
+
+5. Adicione a propriedade [`url`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#url) ao objeto `ci.collect` para indicar os URLs nos quais o Lighthouse CI deve executar o Lighthouse. O valor do `url` deve ser fornecido como uma matriz de URLs; esta matriz pode conter um ou mais URLs. Por padrão, o Lighthouse CI executará o Lighthouse três vezes em cada URL.
+
+    ```js
+    collect: {
+      // ...
+      url: ['http://localhost:8080']
+    }
+    ```
+
+    Nota: Esses URLs devem ser servidos pelo servidor que você configurou na etapa anterior. Portanto, se você estiver executando o Lighthouse CI localmente, esses URLs provavelmente devem incluir `localhost` em vez de seu host de produção.
+
+6. Adicione a propriedade [`target`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#target) ao objeto `ci.upload` e defina o valor como `'temporary-public-storage'`. Os relatórios do Lighthouse coletados pelo Lighthouse CI serão feitos o upload para o armazenamento público temporário. O relatório permanecerá lá por sete dias e, em seguida, será excluído automaticamente. Este guia de configuração usa a opção de upload "armazenamento público temporário" porque é rápido de configurar. Para obter informações sobre outras maneiras de armazenar relatórios do Lighthouse, consulte a [documentação](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#target).
+
+    ```js
+    upload: {
+      target: 'temporary-public-storage',
+    }
+    ```
+
+    O local de armazenamento do relatório será semelhante a este:
+
+    ```text
+    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
+    ```
+
+    (Este URL não funcionará porque o relatório já foi excluído.)
+
+7. Execute o Lighthouse CI CLI do terminal usando o comando `autorun`. Isso executará o Lighthouse três vezes e fará o upload do relatório do Lighthouse mediano.
+
+    ```shell
+    lhci autorun
+    ```
+
+    Se você configurou o Lighthouse CI corretamente, a execução deste comando deve produzir uma saída semelhante a esta:
+
+    ```shell
+    ✅  .lighthouseci/ directory writable
+    ✅  Configuration file found
+    ✅  Chrome installation found
+    ⚠️   GitHub token not set
+    Healthcheck passed!
+
+    Started a web server on port 65324...
+    Running Lighthouse 3 time(s) on http://localhost:65324/index.html
+    Run #1...done.
+    Run #2...done.
+    Run #3...done.
+    Done running Lighthouse!
+
+    Uploading median LHR of http://localhost:65324/index.html...success!
+    Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
+    No GitHub token set, skipping GitHub status check.
+
+    Done running autorun.
+    ```
+
+    Você pode ignorar o `GitHub token not set` na saída do console. Um token do GitHub é necessário apenas se você quiser usar o Lighthouse CI com uma ação do GitHub. Será explicado mais adiante neste artigo como configurar uma ação do GitHub.
+
+    Clicar no link na saída que começa com `https://storage.googleapis.com...` levará você ao relatório do Lighthouse correspondente à execução do Lighthouse mediana.
+
+    Os padrões usados pelo `autorun` podem ser substituídos por meio da linha de comando ou `lighthouserc.js`. Por exemplo, a configuração `lighthouserc.js` abaixo indica que cinco execuções do Lighthouse devem ser coletadas toda vez que o `autorun` for executado.
+
+8. Atualize o `lighthouserc.js` para usar a propriedade `numberOfRuns`:
+
+    ```js
+    module.exports = {
+        // ...
+        collect: {
+          numberOfRuns: 5
+        },
+      // ...
+      },
+    };
+    ```
+
+9. Execute novamente o comando `autorun`
+
+    ```shell
+    lhci autorun
+    ```
+
+    A saída do terminal deve mostrar que o Lighthouse foi executado cinco vezes, em vez das três por padrão:
+
+    ```shell
+    ✅  .lighthouseci/ directory writable
+    ✅  Configuration file found
+    ✅  Chrome installation found
+    ⚠️   GitHub token not set
+    Healthcheck passed!
+
+    Automatically determined ./dist as `staticDistDir`.
+    Set it explicitly in lighthouserc.json if incorrect.
+
+    Started a web server on port 64444...
+    Running Lighthouse 5 time(s) on http://localhost:64444/index.html
+    Run #1...done.
+    Run #2...done.
+    Run #3...done.
+    Run #4...done.
+    Run #5...done.
+    Done running Lighthouse!
+
+    Uploading median LHR of http://localhost:64444/index.html...success!
+    Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
+    No GitHub token set, skipping GitHub status check.
+
+    Done running autorun.
+    ```
+
+    Para saber mais sobre outras opções de configuração, consulte a [documentação de configuração](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md) do Lighthouse CI.
+
+## Configure seu processo de CI para executar o Lighthouse CI {: #ci-setup }
+
+O Lighthouse CI pode ser usado com sua ferramenta de CI favorita. A seção [Configure seu provedor CI](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#configure-your-ci-provider) da documentação do Lighthouse CI contém exemplos de código que mostram como incorporar o Lighthouse CI aos arquivos de configuração de ferramentas comuns de CI. Especificamente, esses exemplos de código mostram como executar o Lighthouse CI para coletar medições de desempenho durante o processo de CI.
+
+Usar o Lighthouse CI para coletar medições de desempenho é um bom lugar para começar com o monitoramento de desempenho. No entanto, os usuários avançados podem querer ir um passo além e usar o Lighthouse CI para falhar em construções se não atenderem aos critérios predefinidos, como passar em auditorias do Lighthouse específicas ou cumprir todos os orçamentos de desempenho. Esse comportamento é configurado por meio da propriedade [`assert`](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#assert) do arquivo `lighthouserc.js`.
+
+O Lighthouse CI oferece suporte a três níveis de afirmações:
+
+- `off` : ignorar asserções
+- `warn` : falhas de impressão para stderr
+- `error` : falhas de impressão para stderr e sair do Lighthouse CI com um [código de saída](https://www.gnu.org/software/bash/manual/html_node/Exit-Status.html#:~:text=A%20non%2Dzero%20exit%20status,N%20as%20the%20exit%20status.) diferente de zero
+
+Abaixo está um exemplo do `lighthouserc.js` que inclui asserções. Ele define afirmações para as pontuações das categorias de desempenho e acessibilidade do Lighthouse. Para tentar fazer isso, adicione as afirmações mostradas abaixo ao seu arquivo `lighthouserc.js` e execute novamente o Lighthouse CI.
+
+```js
+module.exports = {
+  ci: {
+    collect: {
+      // ...
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['warn', {minScore: 1}],
+        'categories:accessibility': ['error', {minScore: 1}]
+      }
+    },
+    upload: {
+      // ...
+    },
+  },
+};
+```
+
+A saída do console que ele gera é assim:
+
+<figure>{% Img src="image/admin/ti9NuzxPKZCYVIzjjddc.png", alt="Captura de tela de uma mensagem de aviso gerada pelo Lighthouse CI", width="800", height="431" %}</figure>
+
+Para obter mais informações sobre as afirmações do Lighthouse CI, consulte a [documentação](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md#assert).
+
+## Configure um GitHub Action para executar o Lighthouse CI {: #github-actions }
+
+{% Aside %} Esta seção pressupõe que você esteja familiarizado com git, GitHub e solicitações pull do GitHub. {% endAside %}
+
+Um [GitHub Action](https://github.com/features/actions) pode ser usado para executar o Lighthouse CI. Isso gerará um novo relatório do Lighthouse sempre que uma alteração de código for enviada a qualquer branch de um repositório do GitHub. Use isso em conjunto com uma [verificação de status](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) para exibir esses resultados em cada solicitação pull.
+
+<figure>{% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Captura de tela de uma verificação de status do GitHub", width="800", height="297" %}</figure>
+
+1. Na raiz do seu repositório, crie um diretório chamado `.github/workflows`. Os [fluxos de trabalho](https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow#about-workflows) do seu projeto irão para este diretório. Um fluxo de trabalho é um processo executado em um momento predeterminado (por exemplo, quando o código é enviado) e é composto por uma ou mais ações.
+
+    ```shell
+    mkdir .github
+    mkdir .github/workflows
+    ```
+
+2. Em `.github/workflows` crie um arquivo chamado `lighthouse-ci.yaml`. Este arquivo conterá a configuração para um novo fluxo de trabalho.
+
+    ```shell
+    touch lighthouse-ci.yaml
+    ```
+
+3. Adicione o seguinte texto a `lighthouse-ci.yaml`.
+
+    ```yaml
+    name: Build project and run Lighthouse CI
+    on: [push]
+    jobs:
+      lhci:
+        name: Lighthouse CI
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@v1
+          - name: Use Node.js 10.x
+            uses: actions/setup-node@v1
+            with:
+              node-version: 10.x
+          - name: npm install
+            run: |
+              npm install
+          - name: run Lighthouse CI
+            run: |
+              npm install -g @lhci/cli@0.3.x
+              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+    ```
+
+    Essa configuração define um fluxo de trabalho que consiste em um único trabalho que será executado sempre que um novo código for enviado ao repositório. Este trabalho tem quatro etapas:
+
+    - Verifique o repositório no qual o Lighthouse CI será executado
+    - Instale e configure o Nó
+    - Instale os pacotes npm necessários
+    - Execute o Lighthouse CI e carregue os resultados para o armazenamento público temporário.
+
+4. Faça o commit dessas mudanças e envie-as para o GitHub. Se você seguiu corretamente as etapas acima, enviar o código para o GitHub iniciará a execução do fluxo de trabalho que você acabou de adicionar.
+
+5. Para confirmar se o CI do Lighthouse foi acionado e visualizar o relatório gerado, acesse a guia **Ações** de seu projeto. Você deve ver o fluxo de trabalho **Projeto de construção e execução do Lighthouse CI** listados em seu commit mais recente.
+
+    <figure>{% Img src="image/admin/ougavsYk6faiNidNxIGQ.png", alt="Captura de tela da guia 'Configurações' do GitHub", width="800", height="216" %}</figure>
+
+    Você pode navegar até o relatório do Lighthouse correspondente a um commit específico na guia **Actions**. Clique no commit, clique na etapa de fluxo de trabalho **Lighthouse CI** e expanda os resultados da etapa de **execução do Lighthouse CI**.
+
+    <figure>{% Img src="image/admin/aJF6FVHGOPpGNxKB3LjY.png", alt="Captura de tela da guia 'Configurações' do GitHub", width="800", height="366" %}</figure>
+
+    Você acabou de configurar um GitHub Action para executar o Lighthouse CI. Isso será mais útil quando usado em conjunto com uma [verificação de status](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) do GitHub.
+
+### Configure uma verificação de status do GitHub {: #github-status-checks }
+
+Uma verificação de status, se configurada, é uma mensagem que aparece em cada PR e geralmente inclui informações como os resultados de um teste ou o sucesso de uma construção.
+
+<figure>{% Img src="image/admin/RZIfiOAPrst9Cxtxi9AX.png", alt="Captura de tela da guia 'Configurações' do GitHub", width="800", height="297" %}</figure>
+
+As etapas abaixo explicam como configurar uma verificação de status para o Lighthouse CI.
+
+1. Acesse a [página do aplicativo do GitHub Lighthouse CI](https://github.com/apps/lighthouse-ci) e clique em **Configurar**.
+
+2. (Opcional) Se você faz parte de várias organizações no GitHub, escolha a organização que possui o repositório para o qual deseja usar o Lighthouse CI.
+
+3. Selecione **Todos os repositórios** se quiser ativar o Lighthouse CI em todos os repositórios ou selecione **Selecionar apenas repositórios** se quiser usá-lo apenas em repositórios específicos e, em seguida, selecione os repositórios. Depois, clique em **Instalar e autorizar**.
+
+4. Copie o token que for exibido. Você o usará na próxima etapa.
+
+5. Para adicionar o token, navegue até a página **Configurações** do seu repositório do GitHub, clique em **Segredos** e em **Adicionar um novo segredo**.
+
+    <figure>{% Img src="image/admin/ZYH9cOHehImZLI6vov1r.png", alt="Captura de tela da guia 'Configurações' do GitHub", width="800", height="375" %}</figure>
+
+6. Defina o campo **Nome** para `LHCI_GITHUB_APP_TOKEN` e defina o campo **Valor** como o token que você copiou na última etapa e clique no botão **Adicionar segredo**.
+
+7. A verificação de status está pronta para uso. Para testá-lo, [crie uma nova solicitação pull](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) ou envie um commit para uma solicitação pull existente.
+
+## Configure o Lighthouse CI Server {: #server-setup }
+
+O Lighthouse CI Server fornece um painel para explorar os relatórios históricos do Lighthouse. Ele também pode atuar como um armazenamento de dados privado de longo prazo para relatórios do Lighthouse.
+
+<figure>{% Img src="image/admin/4xv6LLe6G48weVNl1CO1.png", alt="Captura de tela do painel do Lighthouse CI Server", width="800", height="581" %}</figure>
+
+<figure>{% Img src="image/admin/vp9hVBQGZk01fUMpIQ1Z.png", alt="Captura de tela da comparação de dois relatórios do Lighthouse no Lighthouse CI Server", width="800", height="556" %}</figure>
+
+1. Escolha quais commits comparar.
+2. A quantidade de alteração da pontuação do Lighthouse entre os dois commits.
+3. Esta seção mostra apenas as métricas que mudaram entre os dois commits.
+4. As regressões são destacadas em rosa.
+5. As melhorias são destacadas em azul.
+
+O Lighthouse CI Server é mais adequado para usuários que se sentem confortáveis com a implantação e gerenciamento de sua própria infraestrutura.
+
+Para obter informações sobre como configurar o Lighthouse CI Server, incluindo receitas para usar o Heroku e Docker para implantação, consulte estas [instruções](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/server.md).
+
+## Descubra mais
+
+- [Repositório do GitHub Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)
diff --git a/src/site/content/pt/blog/lighthouse-whats-new-6.0/index.md b/src/site/content/pt/blog/lighthouse-whats-new-6.0/index.md
new file mode 100644
index 00000000000..2a236bfaab9
--- /dev/null
+++ b/src/site/content/pt/blog/lighthouse-whats-new-6.0/index.md
@@ -0,0 +1,321 @@
+---
+layout: post
+title: O que há de novo no Lighthouse 6.0
+subhead: Novas métricas, atualização de pontuação de desempenho, novas auditorias e muito mais.
+authors:
+  - cjamcl
+date: 2020-05-19
+hero: image/admin/93kZL2w49CLIc514qojJ.svg
+alt: Logotipo do Lighthouse.
+tags:
+  - blog
+  - performance
+  - lighthouse
+---
+
+Hoje estamos lançando o Lighthouse 6.0!
+
+O [Lighthouse](https://github.com/GoogleChrome/lighthouse/) é uma ferramenta automatizada de auditoria de sites que ajuda os desenvolvedores com oportunidades e diagnósticos para melhorar a experiência do usuário em seus sites. Está disponível no Chrome DevTools, npm (como um módulo Node e uma CLI) ou como uma extensão do navegador (no [Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) e [Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)). [Ele possibilita](/measure/) muitos serviços do Google, incluindo web.dev/measure e [PageSpeed Insights](https://pagespeed.web.dev/).
+
+O Lighthouse 6.0 está disponível imediatamente no npm e no [Chrome Canary](https://www.google.com/chrome/canary/). Outros serviços do Google que utilizam o Lighthouse receberão a atualização no final do mês. Ele chegará no Chrome Stable no Chrome 84 (meados de julho).
+
+Para experimentar a CLI Lighthouse Node, use os seguintes comandos:
+
+```bash
+npm install -g lighthouse
+lighthouse https://www.example.com --view
+```
+
+Esta versão do Lighthouse vem com um grande número de mudanças [listadas no changelog 6.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0). Cobriremos os destaques neste artigo.
+
+- [Novas métricas](#new-metrics)
+- [Atualização de pontuação de desempenho](#score)
+- [Novas auditorias](#new-audits)
+- [CI do Lighthouse](#ci)
+- [Painel do Chrome DevTools renomeado](#devtools)
+- [Emulação móvel](#emulation)
+- [Extensão do navegador](#extension)
+- [Orçamentos](#budgets)
+- [Links de localização da fonte](#source-location)
+- [No horizonte](#horizon)
+- [Agradecimentos!](#thanks)
+
+## Novas métricas {: #new-metrics}
+
+<figure>{% Img src="image/admin/Yo1oNtdfEF4PhD7zHDHQ.png", alt="Métricas do Lighthouse 6.0.", width="600", height="251" %}</figure>
+
+O Lighthouse 6.0 apresenta três novas métricas ao relatório. Duas dessas novas métricas - Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) - são implementações de laboratório de [Core Web Vitals](/vitals/).
+
+### Largest Contentful Paint (LCP) {: #lcp }
+
+[Largest Contentful Paint (LCP)](https://www.web.dev/lcp/) é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página quando o conteúdo principal - ou "maior" foi carregado e está visível para o usuário. O LCP é um complemento importante para o First Contentful Paint (FCP), que captura apenas o início da experiência de carregamento. O LCP fornece um sinal aos desenvolvedores sobre a rapidez com que um usuário é realmente capaz de ver o conteúdo de uma página. Uma pontuação de LCP abaixo de 2,5 segundos é considerada 'Boa'.
+
+Para obter mais informações, [assista a este aprofundamento no LCP](https://youtu.be/diAc65p15ag) de Paul Irish.
+
+### Cumulative Layout Shift (CLS) {: #cls }
+
+O [Cumulative Layout Shift (CLS)](https://www.web.dev/cls/) é uma medida de estabilidade visual. Ele quantifica o quanto o conteúdo de uma página muda visualmente. Uma pontuação CLS baixa é um sinal para os desenvolvedores de que seus usuários não estão experimentando mudanças de conteúdo indevidas; uma pontuação CLS abaixo de 0,10 é considerada 'Boa'.
+
+O CLS em um ambiente de laboratório é medido até o final do carregamento da página. Enquanto no campo, você pode medir o CLS até a primeira interação do usuário ou incluindo todas as entradas do usuário.
+
+Para obter mais informações, [assista a este aprofundamento no CLS](https://youtu.be/zIJuY-JCjqw) por Annie Sullivan.
+
+### Total Blocking Time (TBT) {: #tbt }
+
+O [Total Blocking Time (TBT)](https://www.web.dev/tbt/) quantifica a capacidade de resposta da carga, medindo a quantidade total de tempo em que o encadeamento principal ficou bloqueado por tempo suficiente para evitar a capacidade de resposta da entrada. O TBT mede a quantidade total de tempo entre o First Contentful Paint (FCP) e o Time to Interactive (TTI). É uma métrica complementar ao TTI e traz mais nuances para quantificar a atividade do thread principal que bloqueia a capacidade do usuário de interagir com sua página.
+
+Além disso, o TBT se correlaciona bem com a métrica de campo [First Input Delay](/fid/) (FID), que é um Core Web Vital.
+
+## Atualização da pontuação de desempenho {: #score}
+
+A [pontuação de desempenho no Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) é calculada a partir de uma combinação ponderada de várias métricas para resumir a velocidade de uma página. Segue-se a fórmula de pontuação de desempenho 6.0.
+
+&lt;style&gt; .lh-table {min-width: unset; } .lh-table td {min-width: unset; } &lt;/style&gt;
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>Estágio</strong></th>
+<th><strong>Nome da métrica</strong></th>
+<th><strong>Peso</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Antecipado (15%)</td>
+<td>First Contentful Paint (FCP)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td>Médio (40%)</td>
+<td>	Speed Index (SI)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td></td>
+<td>Largest Contentful Paint (LCP)</td>
+<td>25%</td>
+</tr>
+<tr>
+<td>Atrasado (15%)</td>
+<td>Time To Interactive (TTI)</td>
+<td>15%</td>
+</tr>
+<tr>
+<td>Thread principal (25%)</td>
+<td> (25%)	Total Blocking Time (TBT)</td>
+<td>25%</td>
+</tr>
+<tr>
+<td>Previsibilidade (5%)</td>
+<td>Cumulative Layout Shift (CLS)</td>
+<td>5%</td>
+</tr>
+</tbody>
+</table>
+
+Enquanto três novas métricas foram adicionadas, três antigas foram removidas: irst Meaningful Paint, First CPU Idle, and Max Potential FID. Os pesos das métricas restantes foram modificados para enfatizar a interatividade do thread principal e a previsibilidade do layout.
+
+Para efeito de comparação, aqui está a pontuação da versão 5:
+
+<table class="lh-table">
+<thead><tr>
+<th><strong>Estágio</strong></th>
+<th><strong>Nome da métrica</strong></th>
+<th><strong>Peso</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Antecipado (23%)</td>
+<td>Primeira pintura com conteúdo (FCP)</td>
+<td>23%</td>
+</tr>
+<tr>
+<td>Médio (34%)</td>
+<td>Índice de velocidade (SI)</td>
+<td>27%</td>
+</tr>
+<tr>
+<td></td>
+<td>Primeira pintura significativa (FMP)</td>
+<td>7%</td>
+</tr>
+<tr>
+<td>Concluído (46%)</td>
+<td>Tempo de interação (TTI)</td>
+<td>33%</td>
+</tr>
+<tr>
+<td></td>
+<td>Primeira CPU inativa (FCI)</td>
+<td>13%</td>
+</tr>
+<tr>
+<td>Thread principal (25%)</td>
+<td>Max Potencial FID</td>
+<td>0%</td>
+</tr>
+</tbody>
+</table>
+
+{% Img src="image/admin/gJnkac5fOfjOvmeLXdPO.png", alt="A pontuação do Lighthouse muda conforme as versões 5 e 6.", width="800", height="165" %}
+
+Alguns destaques das mudanças de pontuação entre as versões 5 e 6 do Lighthouse:
+
+- **O peso da TTI foi reduzido de 33% para 15%**. Isso foi uma resposta direta ao feedback do usuário sobre a variabilidade do TTI, bem como inconsistências nas otimizações de métricas, levando a melhorias na experiência do usuário. O TTI ainda é um sinal útil para quando uma página é totalmente interativa, no entanto, com o TBT como um complemento - a [variabilidade é reduzida](https://docs.google.com/document/d/1xCERB_X7PiP5RAZDwyIkODnIXoBk-Oo7Mi9266aEdGg/edit#heading=h.vkfjuiyx1s5l). Com essa mudança na pontuação, esperamos que os desenvolvedores sejam mais efetivamente incentivados a otimizar a interatividade do usuário.
+- **O peso do FCP foi reduzido de 23% para 15%.** Medir apenas quando o primeiro pixel é pintado (FCP) não nos deu uma imagem completa. Combiná-lo com a medição de quando os usuários podem ver o que é mais importante para eles (LCP) reflete melhor a experiência de carregamento.
+- **Max Potential FID** **foi descontinuado**. Não é mais mostrado no relatório, mas ainda está disponível no JSON. Agora é recomendado olhar para TBT para quantificar sua interatividade em vez de mpFID.
+- **First Meaningful Paint foi descontinuada.** Essa métrica era muito variante e não tinha um caminho viável para a padronização, pois a implementação é específica para componentes internos de renderização do Chrome. Embora algumas equipes considerem que o tempo do FMP vale a pena em seus sites, a métrica não receberá melhorias adicionais.
+- **First CPU Idle foi descontinuado** porque não é suficientemente distinto do TTI. TBT e TTI são agora as métricas de referência para interatividade.
+- O peso do CLS é relativamente baixo, embora esperemos aumentá-lo em uma versão principal futura.
+
+### Mudanças nas pontuações {: #score-shifts}
+
+Como essas mudanças afetam as pontuações de sites reais? Publicamos uma [análise](https://docs.google.com/spreadsheets/d/1BZFh7AyyaLHCj5LGAbrn3m72ysu4yv8okyHG-f3MoXI/edit?usp=sharing) das mudanças de pontuação usando dois conjuntos de dados: um[conjunto geral de sites](https://gist.github.com/connorjclark/8afe673d4e7c6e17204834a256e7caf1) e um [conjunto de sites estáticos](https://gist.github.com/connorjclark/0be52464887ae3a6f29ad5a798122e0c#file-readme-md) construídos com [Eleventy](https://www.11ty.dev/). Em resumo, ~20% dos sites veem pontuações visivelmente mais altas, ~30% quase não apresentam alterações e ~50% veem uma diminuição de pelo menos cinco pontos.
+
+As alterações de pontuação podem ser divididas em três componentes principais:
+
+- mudanças de peso da pontuação
+- correções de bugs para implementações de métricas subjacentes
+- mudanças na curva de pontuação individual
+
+As alterações no peso da pontuação e a introdução de três novas métricas impulsionaram a maioria das alterações na pontuação geral. Novas métricas que os desenvolvedores ainda precisam otimizar têm peso significativo na pontuação de desempenho da versão 6. Enquanto a pontuação média de desempenho do corpus de teste na versão 5 foi de cerca de 50, as pontuações médias nas novas métricas Total Blocking Time e Largest Contentful Paint foram em torno de 30. Juntas, essas duas métricas respondem por 50% do peso na pontuação de desempenho da versão 6 do Lighthouse, então, naturalmente, uma grande porcentagem de sites notou quedas.
+
+Correções de bugs para o cálculo da métrica subjacente podem resultar em pontuações diferentes. Isso afeta relativamente poucos sites, mas pode ter um impacto considerável em certas situações. No geral, cerca de 8% dos sites experimentaram uma melhoria na pontuação devido às mudanças na implementação da métrica e cerca de 4% dos sites viram uma diminuição na pontuação devido às mudanças na implementação da métrica. Aproximadamente 88% dos sites não foram afetados por essas correções.
+
+As mudanças na curva de pontuação individual também impactaram as mudanças na pontuação geral, embora muito ligeiramente. Nós garantimos periodicamente que a curva de pontuação se alinhe com as métricas observadas no [conjunto de dados HTTPArchive](http://httparchive.org/). Excluindo sites afetados por grandes mudanças de implementação, pequenos ajustes na curva de pontuação para métricas individuais melhoraram as pontuações de cerca de 3% dos sites e diminuíram as pontuações de cerca de 4% dos sites. Aproximadamente 93% dos sites não foram afetados por essa mudança.
+
+### Calculadora de pontuação {: #calculator}
+
+Publicamos uma [calculadora de pontuação](https://googlechrome.github.io/lighthouse/scorecalc/) para ajudá-lo a explorar a pontuação de desempenho. A calculadora também oferece uma comparação entre as pontuações das versões 5 e 6 do Lighthouse. Quando você executa uma auditoria com o Lighthouse 6.0, o relatório vem com um link para a calculadora com seus resultados preenchidos.
+
+<figure>{% Img src="image/admin/N8cRFUnM526m3fB4GQVf.png", alt="Calculadora de pontuação do farol.", width="600", height="319" %} <figcaption>Um grande obrigado a <a href="https://twitter.com/anatudor">Ana Tudor</a> pela atualização do medidor!</figcaption></figure>
+
+## Novas auditorias {: #new-audits}
+
+### JavaScript não usado {: #unused-javascript}
+
+Estamos aproveitando a [cobertura de código do DevTools](https://developer.chrome.com/docs/devtools/coverage/) em uma nova auditoria: [**JavaScript não utilizado**](/remove-unused-code/).
+
+Esta auditoria não é *inteiramente* nova: ela foi [adicionada em meados de 2017](https://github.com/GoogleChrome/lighthouse/issues/1852#issuecomment-306900595), mas devido à sobrecarga de desempenho, foi desabilitada por padrão para manter o Farol o mais rápido possível. Coletar esses dados de cobertura é muito mais eficiente agora, então nos sentimos confortáveis ativando-o por padrão.
+
+### Auditorias de acessibilidade {: #a11y}
+
+A Lighthouse usa a maravilhosa [biblioteca do núcleo do machado](https://github.com/dequelabs/axe-core) para alimentar a categoria de acessibilidade. No Lighthouse 6.0, adicionamos as seguintes auditorias:
+
+- [aria-hidden-body](/aria-hidden-body/)
+- [aria-hidden-focus](/aria-hidden-focus/)
+- [aria-input-field-name](/aria-input-field-name/)
+- [aria-toggle-field-name](/aria-toggle-field-name/)
+- [form-field-multiple-labels](/form-field-multiple-labels/)
+- [heading-order](/heading-order/)
+- [duplicate-id-active](/duplicate-id-active/)
+- [duplicate-id-aria](/duplicate-id-aria/)
+
+### Ícone mascarável {: #maskable-icon}
+
+[Ícones mascaráveis](/maskable-icon/) são um novo formato de ícone que faz com que os ícones do seu PWA tenham uma ótima aparência em todos os tipos de dispositivos. Para ajudar seu PWA a ter a melhor aparência possível, introduzimos uma nova auditoria para verificar se seu manifest.json oferece suporte a esse novo formato.
+
+### Declaração de Charset {: #charset}
+
+O [elemento meta charset](https://developer.chrome.com/docs/lighthouse/best-practices/charset/) declara qual codificação de caracteres deve ser usada para interpretar um documento HTML. Se este elemento estiver faltando, ou se for declarado no final do documento, os navegadores empregam uma série de heurísticas para adivinhar qual codificação deve ser usada. Se um navegador adivinhar incorretamente e um elemento meta charset tardio for encontrado, o analisador geralmente descarta todo o trabalho feito até agora e é reiniciado, levando a experiências ruins para o usuário. Essa nova auditoria verifica se a página possui uma codificação de caracteres válida e se ela está definida antecipadamente.
+
+## CI do Lighthouse {: #ci}
+
+No [CDS em novembro passado](/lighthouse-evolution-cds-2019/#lighthouse-ci-alpha-release), anunciamos o [CI do Lighthouse](https://github.com/GoogleChrome/lighthouse-ci), o Node CLI e servidor de código aberto que rastreia os resultados do Lighthouse em cada commit em seu pipeline de integração contínua, e percorremos um longo caminho desde o lançamento alfa. O CI do Lighthouse agora tem suporte para vários provedores de CI, incluindo Travis, Circle, GitLab e GitHub Actions. As [imagens do docker](https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs/recipes) prontas para implantar tornam a configuração uma brisa, e um redesenho abrangente do painel agora revela tendências em cada categoria e métrica no Lighthouse para análise detalhada.
+
+Comece a usar o CI do Lighthouse em seu projeto hoje, seguindo nosso [guia de primeiros passos](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md).
+
+<figure data-float="left">{% Img src="image/admin/sXnTzewqGuc84MOCzFJe.png", alt="CI do Lighthouse.", width="600", height="413", linkTo=true %}</figure>
+
+<figure data-float="left">{% Img src="image/admin/uGT7AUJEQeqK1vlKySLb.png", alt="CI do Lighthouse.", width="600", height="412", linkTo=true %}</figure>
+
+<figure>{% Img src="image/admin/ZR48KZebW43eyAvB1RkT.png", alt="CI do Lighthouse.", width="600", height="354", linkTo=true %}</figure>
+
+## Painel do Chrome DevTools renomeado {: #devtools}
+
+Renomeamos o painel **Audits** para o painel **Lighthouse.** Já disse o suficiente!
+
+Dependendo do tamanho da janela do DevTools, o painel provavelmente está atrás do botão `»`. Você pode arrastar a guia para alterar a ordem.
+
+Para revelar rapidamente o painel com o [menu Comando](https://developer.chrome.com/docs/devtools/command-menu/):
+
+1. {% Instruction 'devtools', 'none' %}
+2. {% Instruction 'devtools-command', 'none' %}
+3. Comece a digitar "LIghthouse".
+4. Pressione `Enter`.
+
+## Emulação de celular {: #emulation}
+
+O Lighthouse segue uma mentalidade que prioriza os dispositivos móveis. Os problemas de desempenho são mais aparentes em condições móveis típicas, mas os desenvolvedores geralmente não testam nessas condições. É por isso que a configuração padrão no Lighthouse aplica a emulação móvel. A emulação consiste em:
+
+- Simulação de condições lentas de rede e CPU (por meio de um mecanismo de simulação chamado [Lantern](https://github.com/GoogleChrome/lighthouse/blob/master/docs/lantern.md)).
+- Emulação de tela do dispositivo (o mesmo encontrado no Chrome DevTools).
+
+Desde o início, a Lighthouse usou o Nexus 5X como seu dispositivo de referência. Nos últimos anos, a maioria dos engenheiros de desempenho tem usado o Moto G4 para fins de teste. Agora a Lighthouse está seguindo o exemplo e mudou seu dispositivo de referência para Moto G4. Na prática, essa alteração não é muito perceptível, mas aqui estão todas as alterações detectáveis por uma página da web:
+
+- O tamanho da tela foi alterado de 412x660 px para 360x640 px.
+- A string do agente do usuário foi ligeiramente alterada, a parte do dispositivo que era anteriormente `Nexus 5 Build/MRA58N` agora será `Moto G (4)`.
+
+A partir do Chrome 81, o Moto G4 também está disponível na lista de emulação de dispositivos Chrome DevTools.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wMyHDbxs49CTJ831UBp7.png", alt="Lista de emulação de dispositivo Chrome DevTools com Moto G4 incluído.", width="800", height="653" %}</figure>
+
+## Extensão do navegador {: #extension}
+
+A [extensão do Chrome para o Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) é uma maneira conveniente de executar o Lighthouse localmente. Infelizmente, era complicado de suportar. Sentimos que, como o paibnel **Lighthouse** do Chrome DevTools é uma experiência melhor (o relatório se integra a outros painéis), poderíamos reduzir nossa sobrecarga de engenharia simplificando a extensão do Chrome.
+
+Em vez de executar o Lighthouse localmente, a extensão agora usa a [API PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started). Reconhecemos que esta não será uma substituição suficiente para alguns de nossos usuários. Estas são as principais diferenças:
+
+- O PageSpeed Insights não pode auditar sites não públicos, pois ele é executado por meio de um servidor remoto e não da instância local do Chrome. Se você precisar auditar um site não público, use o **painel DevTools Lighthouse** ou a Node CLI.
+- Não é garantido que o PageSpeed Insights use a versão mais recente do Lighthouse. Se você quiser usar a versão mais recente, use o Node CLI. A extensão do navegador receberá a atualização cerca de 1 a 2 semanas após o lançamento.
+- O PageSpeed Insights é uma API do Google, e seu uso implica na aceitação dos Termos de Serviço da API do Google. Se você não deseja ou não pode aceitar os termos de serviço, use o **painel DevTools Lighthouse** ou a Node CLI.
+
+A boa notícia é que simplificar a história do produto nos permitiu focar em outros problemas de engenharia. Como resultado, lançamos a [extensão Lighthouse Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/) !
+
+## Orçamentos {: #budgets}
+
+O Lighthouse 5.0 introduziu [orçamentos de desempenho](/performance-budgets-101/) que suportavam a adição de limites para [quanto de cada tipo de recurso](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#resource-budgets) (como scripts, imagens ou css) uma página pode servir.
+
+O Lighthouse 6.0 adiciona [suporte para métricas de orçamento](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#timing-budgets), então agora você pode definir limites para métricas específicas, como FCP. Por enquanto, os orçamentos estão disponíveis apenas para Node CLI e Lighthouse CI.
+
+## Links de localização da fonte {: #source-location}
+
+Alguns dos problemas que o Lighthouse encontra sobre uma página podem ser rastreados até uma linha específica de código-fonte e o relatório indicará o arquivo e a linha exatos que são relevantes. Para facilitar a exploração no DevTools, clicar nos locais especificados no relatório abrirá os arquivos relevantes no painel **Fontes.**
+
+<figure>
+  <video autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/lighthouse-whats-new-6.0/lighthouse-source-location.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>DevTools revela a linha exata de código que causa o problema.</figcaption></figure>
+
+## No horizonte {: #horizon}
+
+O Lighthouse começou a experimentar a coleta de mapas de origem para potencializar novos recursos, como:
+
+- Detectando módulos duplicados em pacotes JavaScript.
+- Detectando polyfills excessivos ou transformações no código enviado para navegadores modernos.
+- Aumentando a auditoria de JavaScript não utilizado para fornecer granularidade em nível de módulo.
+- Visualizações de mapa de árvore destacando os módulos que requerem ação.
+- Exibindo o código-fonte original para itens de relatório com um "local de origem".
+
+<figure>{% Img src="image/admin/iZPhM3KNQebgwCsgXTuf.png", alt="JavaScript não usado mostrando módulos de mapas de origem.", width="600", height="566" %} <figcaption>A auditoria de JavaScript não usado usando mapas de origem para mostrar o código não usado em módulos agrupados específicos.</figcaption></figure>
+
+Esses recursos serão habilitados por padrão em uma versão futura do Lighthouse. Por enquanto, você pode ver as auditorias experimentais do Lighthouse com a seguinte sinalização CLI:
+
+```bash
+lighthouse https://web.dev --view --preset experimental
+```
+
+## Agradecimentos! {: #thanks }
+
+Agradecemos por usar o Lighthouse e fornecer feedback. Seu feedback nos ajuda a melhorar o Lighthouse e esperamos que o Lighthouse 6.0 torne mais fácil para você melhorar o desempenho de seus sites.
+
+O que você pode fazer a seguir?
+
+- Abra o Chrome Canary e experimente o painel **Lighthouse.**
+- Use a CLI do Node: `npm install -g lighthouse && lighthouse https://yoursite.com --view`.
+- Faça o [CI do Lighthouse](https://github.com/GoogleChrome/lighthouse-ci#lighthouse-ci) funcionar com seu projeto.
+- Revise a [documentação de auditoria](/learn/#lighthouse) do Lighthouse.
+- Divirta-se tornando a web melhor!
+
+Somos apaixonados pela web e adoramos trabalhar com a comunidade de desenvolvedores para criar ferramentas que ajudem a melhorar a web. O Lighthouse é um projeto de código aberto e agradecemos imensamente a todos os contribuidores que nos ajudaram em tudo, desde correções de erros de digitação e refatores de documentação a novas auditorias. [Interessado em contribuir?](https://github.com/GoogleChrome/lighthouse/blob/master/CONTRIBUTING.md) Passe pelo [repositório Lighthouse GitHub](https://github.com/GoogleChrome/lighthouse) .
diff --git a/src/site/content/pt/blog/long-tasks-devtools/index.md b/src/site/content/pt/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..07c429683e6
--- /dev/null
+++ b/src/site/content/pt/blog/long-tasks-devtools/index.md
@@ -0,0 +1,57 @@
+---
+title: As longas tarefas de JavaScript estão atrasando seu Time to Interactive (tempo até interativa)?
+subhead: Aprenda a diagnosticar trabalhos caros que impedem a interação do usuário.
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: Uma ampulheta com areia escorrendo
+description: |2-
+
+  Tarefas longas podem manter o thread principal ocupado, atrasando a interação do usuário. O Chrome DevTools agora pode visualizar tarefas longas, facilitando a visualização das tarefas a serem otimizadas.
+tags:
+  - blog
+  - performance
+---
+
+**Tarefas longas podem manter o thread principal ocupado, atrasando a interação do usuário. O Chrome DevTools agora pode visualizar tarefas longas, facilitando a visualização das tarefas a serem otimizadas.**
+
+Se você usa o Lighthouse para auditar suas páginas, pode estar familiarizado com o [Time to Interactive](/tti/), uma métrica que representa quando os usuários podem interagir com sua página e obter uma resposta. Mas você sabia que Tarefas Longas (JavaScript) podem contribuir muito para um TTI ruim?
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Tempo para interativo exibido no relatório Lighthouse", width="800", height="169" %}
+
+## O que são Tarefas Longas?
+
+Uma [tarefa longa](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API) é um código JavaScript que monopoliza o thread principal por longos períodos de tempo, fazendo com que a IU "congele".
+
+Enquanto uma página da web está sendo carregada, as Tarefas Longas podem bloquear o tópico principal e fazer com que a página não responda às entradas do usuário, mesmo se parecer estar pronta. Cliques e toques geralmente não funcionam porque ouvintes de eventos, manipuladores de cliques etc. ainda não foram anexados.
+
+Tarefas longas com uso intenso de CPU ocorrem devido a um trabalho complexo que leva mais de 50 ms. Por que 50ms? [O modelo RAIL](/rail/) sugere que você processe eventos de entrada do usuário em [50 ms](/rail/#response-process-events-in-under-50ms) para garantir uma resposta visível em 100 ms. Do contrário, a conexão entre ação e reação é rompida.
+
+## Há tarefas longas em minha página que podem atrasar a interatividade?
+
+Até agora, você precisava procurar manualmente "longos blocos amarelos" de script com mais de 50 ms no [Chrome DevTools](https://developer.chrome.com/docs/devtools/) ou usar a [API de tarefas longas](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) para descobrir quais tarefas estavam atrasando a interatividade. Isso pode ser um pouco complicado.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="Uma captura de tela do painel DevTools Performance mostrando as diferenças entre tarefas curtas e longas", width="800", height="450" %}
+
+Para ajudar a facilitar seu fluxo de trabalho de auditoria de desempenho, [DevTools agora visualiza Tarefas Longas](https://developers.google.com/web/updates/2019/03/devtools#longtasks) . As tarefas (mostradas em cinza) têm sinalizadores vermelhos se forem Tarefas Longas.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="DevTools visualizando Tarefas Longas como barras cinza no Painel de Desempenho com uma bandeira vermelha para tarefas longas", width="800", height="450" %}
+
+- Grave um traço no [painel Desempenho](https://developer.chrome.com/docs/devtools/evaluate-performance/) ao carregar uma página da web.
+- Procure uma bandeira vermelha na visualização do tópico principal. Você deve ver que as tarefas agora estão cinza ("Tarefa").
+- Passar o mouse sobre uma barra permitirá que você saiba a duração da tarefa e se ela foi considerada "longa".
+
+## O que está causando minhas Tarefas Longas?
+
+Para descobrir o que está causando uma tarefa longa, selecione a barra de **tarefas cinza.** Na gaveta abaixo, selecione **Bottom-Up** (de baixo para cima) e **Group by Activity** (agrupar por atividade). Isso permite que você veja quais atividades contribuíram mais (no total) para a tarefa que demorou tanto para ser concluída. Abaixo, parece ser um conjunto caro de consultas DOM.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="Selecionar uma tarefa longa (rotulada 'Tarefa') no DevTools nos permite detalhar as atividades que foram responsáveis por ela.", width=" 800", height="450"%}
+
+## Quais são as maneiras comuns de otimizar Tarefas Longas?
+
+Scripts grandes costumam ser uma das principais causas de Tarefas Longas, portanto, considere [dividi-los](/reduce-javascript-payloads-with-code-splitting). Além disso, fique de olho nos scripts de terceiros; as Tarefas Longas podem atrasar o conteúdo principal de se tornar interativo.
+
+Divida todo o seu trabalho em pequenos pedaços (que rodem em &lt;50ms) e execute-os no lugar e na hora certa; o lugar certo pode até ser fora do thread principal, em um worker. [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/), de Phil Walton, é uma boa leitura sobre esse tópico.
+
+Mantenha suas páginas responsivas. Minimizar tarefas longas é uma ótima maneira de garantir que seus usuários tenham uma experiência agradável ao visitar seu site. Para obter mais informações sobre Tarefas longas, consulte [Métricas de desempenho centradas no usuário](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks).
diff --git a/src/site/content/pt/blog/maskable-icon/index.md b/src/site/content/pt/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..4fd49197dd1
--- /dev/null
+++ b/src/site/content/pt/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: Suporte de ícones adaptáveis em PWAs com ícones mascaráveis
+subhead: Um novo formato de ícone para usar ícones adaptáveis em plataformas suportadas.
+description: Os ícones mascaráveis são um novo formato de ícone que oferece mais controle e permite que sua Progressive Web App use ícones adaptáveis. Ao fornecer um ícone mascarável, seu ícone pode ficar ótimo em todos os dispositivos Android.
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: Ícones contidos dentro de círculos brancos em comparação com ícones que cobrem todo o seu círculo
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## O que são ícones mascaráveis? {: #what }
+
+Se você instalou uma Progressive Web App num celular Android recente, pode ter percebido que o ícone é exibido com um fundo branco. O Android Oreo introduziu ícones adaptáveis, que exibem ícones de aplicativos numa variedade de formas em diferentes modelos de dispositivos. Os ícones que não seguem esse novo formato recebem fundos brancos.
+
+<figure>   {% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="Ícones PWA em círculos brancos no Android", width="400", height="100" %}   <figcaption>Ícones transparentes de PWA aparecem dentro de círculos brancos no Android</figcaption></figure>
+
+Os ícones mascaráveis são um novo formato de ícone que oferece mais controle e permite que a Progressive Web App use ícones adaptáveis. Se você fornecer um ícone mascarável, seu ícone pode preencher toda a forma e ter uma ótima aparência em todos os dispositivos Android. O Firefox e o Chrome adicionaram recentemente suporte para esse novo formato e você pode adotá-lo nas suas aplicações.
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="Ícones PWA cobrindo todo o círculo no Android", width="400", height="100" %} <figcaption>Ícones mascaráveis cobrem todo o círculo</figcaption></figure>
+
+## Meus ícones atuais estão prontos?
+
+Uma vez que os ícones mascaráveis precisam suportar uma variedade de formas, você deve fornecer uma imagem opaca com algum padding que o navegador possa posteriormente cortar na forma e no tamanho desejados. É melhor não confiar em nenhuma forma específica, uma vez que a forma escolhida pode variar de acordo com o navegador e a plataforma.
+
+<figure data-float="right">   {% Video     src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"],     autoplay=true,     loop=true,     muted=true,     playsinline=true   %}   <figcaption>     Diferentes formatos específicos de plataforma </figcaption></figure>
+
+Felizmente, existe uma "zona mínima de segurança" bem definida e [padronizada](https://w3c.github.io/manifest/#icon-masks) que todas as plataformas respeitam. As partes importantes de seu ícone, como seu logotipo, devem estar dentro de uma área circular no centro do ícone com um raio igual a 40% da largura do ícone. A borda externa de 10% pode ser cortada.
+
+Você pode verificar quais partes de seus ícones estão dentro da zona de segurança com o Chrome DevTools. Com a sua Progressive Web App aberta, inicie o DevTools e navegue até o painel **Aplicação**. Na seção **Ícones** você pode escolher **Mostrar apenas a área mínima de segurança para ícones mascaráveis**. Seus ícones serão cortados para que apenas a área segura fique visível. Se o seu logotipo estiver visível nesta área segura, seu problema está resolvido.
+
+<figure>   {% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="Painel de aplicativos em DevTools exibindo ícones PWA com bordas cortadas", width="762", height="423" %}   <figcaption>O painel de aplicativos</figcaption></figure>
+
+Para testar seu ícone mascarável com a variedade de formas Android, use a ferramenta [Maskable.app](https://maskable.app/) que criei. Abra um ícone e, em seguida, Maskable.app permitirá que você experimente com várias formas e tamanhos, e você pode compartilhar a visualização com outras pessoas de sua equipe.
+
+## Como adoto ícones mascaráveis?
+
+Se você deseja criar um ícone mascarável com base em seu ícone existente, você pode usar o [Editor Maskable.app](https://maskable.app/editor). Faça upload do seu ícone, ajuste a cor e o tamanho e exporte a imagem.
+
+<figure>   {% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.app Editor screenshot", width="670", height="569" %}   <figcaption>Criação de ícones no Maskable.app Editor</figcaption></figure>
+
+Depois de criar uma imagem de ícone mascarável e testá-la no DevTools, você precisará atualizar o {a0web app manifest  para apontar para os novos ativos. O web app manifest fornece informações sobre sua aplicação web em um arquivo JSON e inclui um [array de `icons`](/add-manifest/#icons).
+
+Com a inclusão de ícones mascaráveis, um novo valor de propriedade foi adicionado para recursos de imagem listados num web app manifest. O campo `purpose` informa ao navegador como seu ícone deve ser usado. Por default, os ícones terão a finalidade `"any"`. Esses ícones serão redimensionados sobre um fundo branco no Android.
+
+Os ícones que podem ser mascarados devem definir uma finalidade diferente: `"maskable"`. Isto indica que uma imagem deve ser usada com máscaras de ícones, dando a você mais controle sobre o resultado. Dessa forma, seus ícones não terão um fundo branco. Você também pode especificar múltiplas finalidades separadas por espaço (por exemplo, `"any maskable"` ), se desejar que o ícone mascarável seja usado sem máscara em outros dispositivos.
+
+{% Aside %} Embora você *possa* especificar múltiplas finalidades separadas por espaço, como `"any maskable"`, na prática você *não deve*. Usar ícones `"maskable"` como ícones `"any"` não é o ideal, pois o ícone será usado como está, resultando em padding excessivo e deixando o conteúdo do ícone principal menor. Idealmente, os ícones para a finalidade `"any"` devem ter regiões transparentes e nenhum preenchimento extra, como os favicons do seu site, já que o navegador não vai adicionar isto neles. {% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- New property value `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+Com isto, você pode seguir em frente e criar seus próprios ícones mascaráveis, garantindo que seu aplicativo tenha uma ótima aparência de ponta a ponta (ou círculo a círculo, oval a oval 😄).
+
+## Agradecimentos
+
+Este artigo foi revisado por [Joe Medley](https://github.com/jpmedley).
diff --git a/src/site/content/pt/blog/migrate-to-ua-ch/index.md b/src/site/content/pt/blog/migrate-to-ua-ch/index.md
new file mode 100644
index 00000000000..1a4325cbe33
--- /dev/null
+++ b/src/site/content/pt/blog/migrate-to-ua-ch/index.md
@@ -0,0 +1,269 @@
+---
+layout: post
+title: Migrar para Dicas de cliente do agente do usuário
+subhead: Estratégias para migrar seu site a partir da dependência da string do agente do usuário para as novas Dicas de cliente do agente do usuário.
+authors:
+  - rowan_m
+date: 2021-05-19
+description: Estratégias para migrar seu site a partir da dependência da string do agente do usuário para as novas Dicas de cliente do agente do usuário.
+hero: image/VWw0b3pM7jdugTkwI6Y81n6f5Yc2/uHTVU6MzCWYVPzLposSy.jpg
+alt: Uma rota iluminada através de uma paisagem sombria e escura. Siga esse caminho!
+tags:
+  - blog
+  - privacy
+---
+
+A [string do agente do usuário](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) é uma [superfície passiva](https://w3c.github.io/fingerprinting-guidance/#passive) significativa de impressão digital em navegadores, além de ser difícil de processar. No entanto, existem todos os tipos de motivos válidos para coletar e processar dados do agente do usuário, então o que é necessário é um caminho para uma solução melhor. As dicas de cliente do agente do usuário fornecem uma maneira explícita de declarar sua necessidade de dados do agente do usuário e métodos para retornar os dados em um formato fácil de usar.
+
+{% Aside %} Para obter mais informações sobre Dicas de cliente e expandi-las com dados de agente do usuário, leia o [artigo introdutório sobre Dicas de cliente do agente do usuário](/user-agent-client-hints). {% endAside %}
+
+Este artigo irá guiá-lo através da auditoria de seu acesso aos dados do agente do usuário e da migração do uso da string do agente do usuário para Dicas de cliente do agente do usuário.
+
+## Coleta de auditoria e uso de dados do agente do usuário
+
+Como acontece com qualquer forma de coleta de dados, você deve sempre entender **por que** está coletando. A primeira etapa, independentemente de você realizar ou não alguma ação, é entender onde e por que você está usando os dados do agente do usuário.
+
+Se você não sabe se ou onde os dados do agente do usuário estão sendo usados, considere pesquisar seu código de front-end para usar `navigator.userAgent` e seu código de back-end para usar o cabeçalho HTTP do `User-Agent`. Você também deve verificar seu código de front-end para o uso de recursos já obsoletos, como `navigator.platform` e `navigator.appVersion`.
+
+De um ponto de vista funcional, pense em qualquer lugar em seu código onde você esteja gravando ou processando:
+
+- Nome ou versão do navegador
+- Nome ou versão do sistema operacional
+- Marca ou modelo do dispositivo
+- Tipo de CPU, arquitetura ou bitness (por exemplo, 64 bits)
+
+Também é provável que você esteja usando uma biblioteca ou serviço de terceiros para processar o agente do usuário. Nesse caso, verifique se eles estão atualizando para oferecer suporte às Dicas de cliente do agente do usuário.
+
+### Você está usando apenas os dados básicos do agente do usuário?
+
+O conjunto padrão de Dicas de cliente do agente do usuário inclui:
+
+- `Sec-CH-UA`: nome do navegador e versão principal/significativa
+- `Sec-CH-UA-Mobile`: valor booleano que indica um dispositivo móvel
+- `Sec-CH-UA-Platform`: nome do sistema operacional
+    - *Observe que isso foi atualizado nas especificações e será [refletido no Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/dafizBGwWMw/m/72l-1zm6AAAJ) e em outros navegadores baseados em Chromium em breve.*
+
+A versão reduzida da string do agente do usuário proposta também reterá essas informações básicas de maneira compatível com versões anteriores. Por exemplo, em vez de `Chrome/90.0.4430.85` a string incluiria `Chrome/90.0.0.0`.
+
+Se você estiver apenas verificando a string do agente do usuário para o nome do navegador, versão principal ou sistema operacional, seu código continuará a funcionar, embora seja provável que você veja avisos de depreciação.
+
+Embora você possa e deva migrar para Dicas de cliente do agente do usuário, pode haver código legado ou restrições de recursos que impedem isso. A redução de informações na string do agente do usuário dessa forma compatível com versões anteriores tem o objetivo de garantir que, embora o código existente receba informações menos detalhadas, ele ainda deve reter a funcionalidade básica.
+
+## Estratégia: a API do JavaScript sob demanda do lado do cliente
+
+Se você estiver usando `navigator.userAgent` deve fazer a transição de preferência `navigator.userAgentData` antes de voltar a analisar a string do agente do usuário.
+
+```javascript
+if (navigator.userAgentData) {
+  // use new hints
+} else {
+  // fall back to user-agent string parsing
+}
+```
+
+Se você estiver verificando para celular ou desktop, use o valor `mobile`:
+
+```javascript
+const isMobile = navigator.userAgentData.mobile;
+```
+
+O `userAgentData.brands` é uma matriz de objetos com `brand` e `version` onde o navegador é capaz de listar sua compatibilidade com essas marcas. Você pode acessá-lo diretamente como uma matriz ou pode usar uma `some()` para verificar se uma entrada específica está presente:
+
+```javascript
+function isCompatible(item) {
+  // In real life you most likely have more complex rules here
+  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
+}
+if (navigator.userAgentData.brands.some(isCompatible)) {
+  // browser reports as compatible
+}
+```
+
+{% Aside 'gotchas' %} O `userAgentData.brands` conterá valores variados em uma ordem variada, portanto, não confie em algo que apareça em um determinado índice. {% endAside %}
+
+Se você precisar de um dos valores do agente do usuário de alta entropia mais detalhados, será necessário especificá-lo e verificar o resultado na `Promise` retornada:
+
+```javascript
+navigator.userAgentData.getHighEntropyValues(['model'])
+  .then(ua => {
+    // requested hints available as attributes
+    const model = ua.model
+  });
+```
+
+Você também pode usar essa estratégia se quiser passar do processamento do lado do servidor para o processamento do lado do cliente. A API do JavaScript não requer acesso aos cabeçalhos de solicitação HTTP, portanto, os valores do agente do usuário podem ser solicitados a qualquer momento.
+
+{% Aside %} Experimente a [demonstração da API do JavaScript das Dicas de cliente do agente do usuário](https://user-agent-client-hints.glitch.me/javascript.html). {% endAside %}
+
+## Estratégia: cabeçalho estático do lado do servidor
+
+Se você estiver usando o cabeçalho de solicitação do `User-Agent` no servidor e suas necessidades para esses dados forem relativamente consistentes em todo o seu site, você pode especificar as dicas de cliente desejadas como um conjunto estático em suas respostas. Esta é uma abordagem relativamente simples, pois geralmente você só precisa configurá-la em um local. Por exemplo, pode ser na configuração do seu servidor web se você já adicionar cabeçalhos lá, sua configuração de hospedagem ou configuração de nível superior da estrutura ou plataforma que você usa para seu site.
+
+Considere esta estratégia se você estiver transformando ou customizando as respostas servidas com base nos dados do agente do usuário.
+
+{% Aside %} Você também pode considerar a migração para a estratégia da [API do JavaScript sob demanda do lado do cliente](#strategy-on-demand-client-side-javascript-api) em vez de enviar cabeçalhos adicionais. {% endAside %}
+
+Navegadores ou outros clientes podem optar por fornecer dicas padrão diferentes, portanto, é uma boa prática especificar tudo o que você precisa, mesmo que geralmente seja fornecido por padrão.
+
+Por exemplo, os padrões atuais do Chrome seriam representados como:
+
+⬇️ Cabeçalhos de resposta
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+Se você também quiser receber o modelo do dispositivo nas respostas, envie:
+
+⬇️ Cabeçalhos de resposta
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+{% Aside 'gotchas' %} A ordem não é importante, o exemplo é listado em ordem alfabética. {% endAside %}
+
+Ao processar isso no lado do servidor, você deve primeiro verificar se o `Sec-CH-UA` desejado foi enviado e, em seguida, retornar para o `User-Agent` se não estiver disponível.
+
+{% Aside %} Experimente a [demonstração da API do JavaScript das Dicas de cliente do agente do usuário](https://user-agent-client-hints.glitch.me/). {% endAside %}
+
+## Estratégia: delegar dicas para solicitações de origem cruzada
+
+Se você estiver solicitando sub-recursos de origem cruzada ou site cruzado que exigem o envio de Dicas de cliente do agente do usuário em suas solicitações, será necessário especificar explicitamente as dicas desejadas usando uma política de permissões.
+
+{% Aside %} [Política de permissões](https://www.w3.org/TR/permissions-policy-1/) é a nova forma de política de recursos {% endAside %}
+
+Por exemplo, digamos que o `https://blog.site` hospede recursos em `https://cdn.site` que podem retornar recursos otimizados para um dispositivo específico. O `https://blog.site` pode solicitar a dica `Sec-CH-UA-Model`, mas precisa delegá-lo explicitamente o `https://cdn.site` usando o cabeçalho `Permissions-Policy`. A lista de dicas controladas por política está disponível no [Rascunho da infraestrutura de dicas do cliente](https://wicg.github.io/client-hints-infrastructure/#policy-controlled-client-hints-features)
+
+⬇️ Resposta de `blog.site` delegando a dica
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Permissions-Policy: ch-ua-model=(self "https://cdn.site")
+```
+
+⬆️ Solicitação de sub-recursos em `cdn.site` incluem a dica delegada
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+Você pode especificar várias dicas para várias origens, e não apenas do intervalo `ch-ua`:
+
+⬇️ Resposta de `blog.site` delegando várias dicas para várias origens
+
+```text
+Accept-CH: Sec-CH-UA-Model, DPR
+Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
+                    ch-dpr=(self "https://cdn.site" "https://img.site")
+```
+
+{% Aside 'gotchas' %} Você **não** precisa incluir cada dica delegada em `Accept-CH`, mas **você** precisa para incluir `self` para cada dica, mesmo se você não estiver usando-o diretamente para o de nível superior. {% endAside %}
+
+## Estratégia: delegar dicas aos iframes
+
+Os iframes de origem cruzada funcionam de maneira semelhante aos recursos de origem cruzada, mas você especifica as dicas que gostaria de delegar no atributo `allow`.
+
+⬇️ Resposta do `blog.site`
+
+```text
+Accept-CH: Sec-CH-UA-Model
+```
+
+↪️ HTML para `blog.site`
+
+```html
+<iframe src="https://widget.site" allow="ch-ua-model"></iframe>
+```
+
+⬆️ Solicitação para `widget.site`
+
+```text
+Sec-CH-UA-Model: "Pixel 5"
+```
+
+O atributo `allow` no iframe substituirá qualquer cabeçalho `Accept-CH` que `widget.site` possa enviar, então certifique-se de ter especificado tudo o que o site do iframe vai precisar.
+
+## Estratégia: dicas dinâmicas do lado do servidor
+
+Se você tiver partes específicas da jornada do usuário em que precisa de uma seleção maior de dicas do que no restante do site, pode optar por solicitar essas dicas sob demanda, em vez de estaticamente em todo o site. Isso é mais complexo de gerenciar, mas se você já definiu cabeçalhos diferentes por rota, pode ser viável.
+
+O importante a lembrar aqui é que cada instância do cabeçalho `Accept-CH` substituirá efetivamente o conjunto existente. Portanto, se você estiver configurando o cabeçalho dinamicamente, cada página deve solicitar o conjunto completo de dicas necessárias.
+
+Por exemplo, você pode ter uma seção em seu site onde deseja fornecer ícones e controles que correspondem ao sistema operacional do usuário. Para isso, você pode desejar exibir adicionalmente `Sec-CH-UA-Platform-Version` para servir aos sub-recursos apropriados.
+
+⬇️ Cabeçalhos de resposta para `/blog`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
+```
+
+⬇️ Cabeçalhos de resposta para `/app`
+
+```text
+Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA
+```
+
+## Estratégia: dicas do lado do servidor necessárias na primeira solicitação
+
+Pode haver casos em que você exija mais do que o conjunto padrão de dicas na primeira solicitação; no entanto, isso provavelmente será raro, portanto, certifique-se de revisar o raciocínio.
+
+A primeira solicitação realmente significa a primeira solicitação de nível superior para aquela origem enviada naquela sessão de navegação. O conjunto padrão de dicas inclui o nome do navegador com a versão principal, a plataforma e o indicador móvel. Portanto, a pergunta a se fazer aqui é: você precisa de dados estendidos no carregamento inicial da página?
+
+{% Aside %} Considere também usar a [estratégia da API do JavaScript sob demanda do lado do cliente](#strategy-on-demand-client-side-javascript-api) para alterar o conteúdo na página, em vez do lado do servidor. {% endAside %}
+
+Para dicas adicionais sobre a primeira solicitação, existem duas opções. Primeiro, você pode usar o cabeçalho `Critical-CH`. Ele assume o mesmo formato que o `Accept-CH`, mas informa ao navegador que ele deve repetir a solicitação imediatamente se a primeira foi enviada sem a dica crítica.
+
+⬆️ Solicitação inicial
+
+```text
+[With default headers]
+```
+
+⬇️ Cabeçalhos de resposta
+
+```text
+Accept-CH: Sec-CH-UA-Model
+Critical-CH: Sec-CH-UA-Model
+```
+
+🔃 O navegador tenta novamente a solicitação inicial com o cabeçalho adicional
+
+```text
+[With default headers + …]
+Sec-CH-UA-Model: Pixel 5
+```
+
+Isso incorrerá na sobrecarga da nova tentativa na primeira solicitação, mas o custo de implementação é relativamente baixo. Envie o cabeçalho adicional e o navegador fará o resto.
+
+{% Aside 'gotchas' %} Qualquer valor `Critical-CH` deve ser um subconjunto dos valores em `Accept-CH`. Os `Accept-CH` são todos os valores que você gostaria para a página, o `Critical-CH` é o subconjunto desses valores que você **deve** ter ou você não poderá carregar a página corretamente. {% endAside %}
+
+Para situações em que você realmente precisa de dicas adicionais no carregamento da primeira página, a [proposta de confiabilidade das dicas do cliente](https://github.com/WICG/client-hints-infrastructure/blob/main/reliability.md#connection-level-settings) está traçando uma rota para especificar dicas nas configurações de nível de conexão. Isso faz uso da extensão [Application-Layer Protocol Settings (ALPS)](https://tools.ietf.org/html/draft-vvv-tls-alps) para TLS 1.3 para permitir essa passagem antecipada de dicas em conexões HTTP/2 e HTTP/3. Isso ainda está em um estágio muito inicial, mas se você gerencia ativamente seu próprio TLS e configurações de conexão, este é o momento ideal para contribuir.
+
+## Estratégia: suporte legado
+
+Você pode ter um código legado ou de terceiros em seu site que depende do `navigator.userAgent`, incluindo partes da string do agente do usuário que serão reduzidas. A longo prazo, você deve planejar a mudança para as `navigator.userAgentData` equivalentes, mas existe uma solução provisória.
+
+{% Aside 'warning' %} Isso não é recomendado e não tem suporte de forma alguma. Esta solução está incluída para ser completa, mas se você gastar algum tempo tentando consertar bugs nela, esse tempo seria melhor gasto na migração real. {% endAside %}
+
+O [retrofill UA-CH](https://github.com/GoogleChromeLabs/uach-retrofill) é uma pequena biblioteca que permite sobrescrever `navigator.userAgent` com uma nova string construída a partir dos valores `navigator.userAgentData` solicitados.
+
+Por exemplo, este código irá gerar uma string de agente do usuário que inclui adicionalmente a dica "modelo":
+
+```javascript
+import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
+overrideUserAgentUsingClientHints(['model'])
+  .then(() => { console.log(navigator.userAgent); });
+```
+
+A string resultante mostraria o `Pixel 5`, mas ainda mostra `92.0.0.0` reduzido, pois a dica `uaFullVersion` não foi solicitada:
+
+```text
+Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36
+```
+
+## Suporte adicional
+
+Se essas estratégias não atenderem ao seu caso de uso, inicie uma [Discussão no repositório de privacidade-sandbox-dev-support](https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/discussions) e assim poderemos explorar seu problema juntos.
+
+*Foto de [Ricardo Rocha](https://unsplash.com/@rcrazy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) no [Unsplash](https://unsplash.com/photos/nj1bqRzClq8).*
diff --git a/src/site/content/pt/blog/min-max-clamp/index.md b/src/site/content/pt/blog/min-max-clamp/index.md
new file mode 100644
index 00000000000..15c8425f30c
--- /dev/null
+++ b/src/site/content/pt/blog/min-max-clamp/index.md
@@ -0,0 +1,154 @@
+---
+title: 'min(), max() e clamp(): três funções CSS lógicas para usar hoje'
+subhead: Aprenda como controlar o tamanho do elemento, manter o espaçamento adequado e implementar tipografia fluida usando essas funções CSS com firme suporte.
+authors:
+  - una
+date: 2020-10-14
+hero: image/admin/aVL3BEXD3AF9fFzPGKMf.jpg
+alt: Conjunto de ferramentas em uma mesa.
+description: Min, max e clamp proporcionam alguns recursos CSS poderosos que permitem um estilo mais responsivo com menos linhas de código. Este artigo aborda como controlar o tamanho do elemento, manter o espaçamento adequado e implementar tipografia fluida usando essas funções matemáticas CSS bem suportadas.
+tags:
+  - blog
+  - css
+  - layout
+feedback:
+  - api
+---
+
+Com a evolução do design responsivo, com cada vez mais nuances, o próprio CSS está em constante evolução e proporciona maior controle aos autores. As funções [`min()`](https://developer.mozilla.org/docs/Web/CSS/min) , [`max()`](https://developer.mozilla.org/docs/Web/CSS/max) e [`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp), agora com suporte em todos os navegadores modernos, estão entre as ferramentas mais recentes para tornar sites e aplicativos de autoria mais dinâmicos e responsivos.
+
+Quando se trata de tipografia flexível e fluida, redimensionamento de elemento controlado e manutenção do espaçamento adequado, `min()` , `max()` e `clamp()` podem ajudar.
+
+## Contexto
+
+<blockquote>
+  <p>As funções matemáticas <code>calc()</code> , <code>min()</code> , <code>max()</code> e <code>clamp()</code> permitem que expressões matemáticas com adição (+), subtração (-), multiplicação (*) e divisão (/) sejam usadas como valores de componentes</p>
+  <cite><p data-md-type="paragraph"><a href="https://www.w3.org/TR/css-values-4/#calc-notation">Valores e unidades CSS nível 4</a></p></cite>
+</blockquote>
+
+O Safari foi o primeiro a [enviar](https://bugs.webkit.org/show_bug.cgi?id=167000) o conjunto completo de funções em abril de 2019, com o Chromium seguindo mais tarde naquele ano na versão 79. Este ano, com o lançamento do Firefox [75](https://bugzilla.mozilla.org/show_bug.cgi?id=1519519), temos agora paridade de navegador para `min()` , `max()` e `clamp()` em todos os navegadores permanentes.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIgePP41Quh7ubYh54vo.png", alt="", width="800", height="246" %}<figcaption> tabela de apoio <a href="https://caniuse.com/css-math-functions">Caniuse</a>. </figcaption></figure>
+
+## Uso
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-demo.mp4">
+  </source></video>
+  <figcaption>Demonstração de como a função min() seleciona um valor com base em uma lista de opções e seu superior. <a href="https://codepen.io/una/pen/rNeGNVL">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+Você pode usar `min()` , `max()` e `clamp()` no lado direito de qualquer expressão CSS onde isso fizer sentido. Para `min()` e `max()` , você fornece uma lista de valores de argumentos e o navegador determina qual deles é o menor ou o maior, respectivamente. Por exemplo, no caso de: `min(1rem, 50%, 10vw)`, o navegador calcula qual dessas unidades relativas é a menor e usa esse valor como o valor real.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-demo.mp4">
+  </source></video>
+  <figcaption>Demonstração de como a função max() seleciona um valor com base em uma lista de opções e seu superior. <a href="https://codepen.io/una/pen/RwaZXqR">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+A função `max()` seleciona o maior valor em uma lista de expressões separadas por vírgulas.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-demo.mp4">
+  </source></video>
+  <figcaption>Mostrando como a função clamp() seleciona um valor com base em uma lista de opções e seu superior. <a href="https://codepen.io/una/pen/bGpoGdJ">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+Para usar `clamp()` insira três valores: um valor mínimo, um valor ideal (a partir do qual calcular) e um valor máximo.
+
+Qualquer uma dessas funções pode ser usada em qualquer lugar que `<length>` , `<frequency>` , `<angle>` , `<time>` , `<percentage>` , `<number>` ou `<integer>` seja permitido. Você pode usá-los por conta própria (ou seja `font-size: max(0.5vw, 50%, 2rem)` ), em conjunto com `calc()` (ou seja `font-size: max(calc(0.5vw - 1em), 2rem)` ), ou de forma composta (ou seja `font-size: max(min(0.5vw, 1em), 2rem)` ).
+
+{% Aside %} Ao usar um cálculo dentro de uma função `min()` , `max()` ou `clamp()` , você pode remover a chamada para `calc()` . Por exemplo, escrever `font-size: max(calc(0.5vw - 1em), 2rem)` seria o mesmo que `font-size: max(0.5vw - 1em, 2rem)` . {% endAside %}
+
+Para recapitular:
+
+- `min(<value-list>)`: seleciona o menor (mais negativo) valor de uma lista de expressões separadas por vírgulas
+- `max(<value-list>)`: seleciona o maior (mais positivo) valor de uma lista de expressões separadas por vírgulas
+- `clamp(<min>, <ideal>, <max>)`: fixa um valor entre um limite superior e inferior, com base em um valor ideal definido
+
+Vamos dar uma olhada em alguns exemplos.
+
+## A largura perfeita
+
+De acordo com [The Elements of Typographic Style](http://webtypography.net/2.1.2#:~:text=%E2%80%9CAnything%20from%2045%20to%2075,is%2040%20to%2050%20characters.%E2%80%9D) de Robert Bringhurst, "qualquer coisa entre 45 e 75 caracteres é amplamente considerada como um comprimento de linha satisfatório para uma página de coluna única definida em uma face de texto serifada em um tamanho de texto."
+
+Para garantir que seus blocos de texto não sejam mais estreitos que 45 caracteres ou mais largos que 75 caracteres, use `clamp()` e a unidade `ch` [(avanço de caractere](https://developer.mozilla.org/docs/Web/CSS/length) de largura 0):
+
+```css
+p {
+  width: clamp(45ch, 50%, 75ch);
+}
+```
+
+Isso permite que o navegador determine a largura do parágrafo. Ele definirá a largura em 50%, a menos que 50% seja menor que `45ch` , ponto em que `45ch` será selecionado, e vice-versa, se 50% for mais largo que `75ch` . Nesta demonstração, o próprio cartão está sendo preso:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-width.mp4">
+  </source></video>
+  <figcaption>Usando a função clamp () para limitar uma largura mínima e máxima. <a href="https://codepen.io/una/pen/QWyLxaL">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+Você pode dividir isso apenas com a função `min()` ou `max()` . Se você deseja que o elemento sempre tenha `50%` largura e não exceda `75ch` de largura (ou seja, em telas maiores), escreva: `width: min(75ch, 50%);`. Isso basicamente define um tamanho "máximo" usando a função `min()`
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-width.mp4">
+  </source></video>
+  <figcaption>Usando a função clamp() para limitar uma largura mínima e máxima.</figcaption></figure>
+
+Da mesma forma, você pode garantir um tamanho mínimo para texto legível usando a função `max()` Esta seria a aparência: `width: max(45ch, 50%);`. Aqui, o navegador seleciona o que for maior, `45ch` ou `50%` , o que significa que o elemento deve ter pelo *menos* `45ch` ou maior.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-width.mp4">
+  </source></video>
+  <figcaption>Usando a função clamp() para limitar uma largura mínima e máxima.</figcaption></figure>
+
+## Gestão de preenchimento
+
+Usando o mesmo conceito acima, onde a função `min()` pode definir um valor "max" e `max()` define um valor "min", você pode usar `max()` para definir um tamanho de preenchimento mínimo. Este exemplo vem do [CSS Tricks](https://css-tricks.com/using-max-for-an-inner-element-max-width/), onde o leitor Caluã de Lacerda Pataca compartilhou esta ideia: A ideia é permitir que um elemento tenha um preenchimento adicional em telas maiores, mas mantenha um preenchimento mínimo em telas menores, principalmente no preenchimento inline. Para conseguir isso, use `calc()` e subtraia o preenchimento mínimo de ambos os lados: `calc((100vw - var(--contentWidth)) / 2)` , *ou* use max: `max(2rem, 50vw - var(--contentWidth) / 2)`. Juntos, ficam:
+
+```css
+footer {
+  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-padding.mp4">
+  </source></video>
+  <figcaption>Definir um preenchimento mínimo para um componente usando a função max(). <a href="https://codepen.io/chriscoyier/pen/qBZqNKa">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+## Tipografia fluida
+
+Para habilitar a [tipografia fluida](https://www.smashingmagazine.com/2016/05/fluid-typography/), [Mike Riethmeuller](https://twitter.com/mikeriethmuller) popularizou uma técnica que usa a função `calc()` para definir um tamanho mínimo e um tamanho máximo de fonte e permitir o dimensionamento do mínimo ao máximo.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/fliud-type.mp4">
+  </source></video>
+  <figcaption>Criação de tipografia fluida com clamp(). <a href="https://codepen.io/una/pen/ExyYXaN">Veja a demonstração no Codepen.</a></figcaption></figure>
+
+Com `clamp()` , você pode escrever isso de forma mais clara. Em vez de exigir uma string complexa, o navegador pode fazer o trabalho por você. Defina o tamanho de fonte mínimo aceitável (por exemplo, `1.5rem` para um título, tamanho máximo (ou seja, 3 `3rem` ) e tamanho ideal de `5vw` .
+
+Agora, temos uma tipografia que se dimensiona com a largura da janela de visualização da página até atingir os valores mínimos e máximos de limitação, em uma linha de código muito mais sucinta:
+
+```css
+p {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+{% Aside 'warning' %} Limitar o tamanho do texto com `max()` ou `clamp()` pode causar uma falha WCAG em [1.4.4 Redimensionar texto (AA)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text) , porque um usuário pode não conseguir dimensionar o texto para 200% de seu tamanho original. Certifique-se de [testar os resultados com zoom](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html) . {% endAside %}
+
+## Conclusão
+
+As funções matemáticas CSS, `min()` , `max()` e `clamp()` são muito poderosas, bem suportadas e podem ser exatamente o que você está procurando para ajudá-lo a construir interfaces de usuário responsivas. Para obter mais recursos, verifique:
+
+- [Valores e unidades CSS no MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Valores CSS e especificações de unidades de nível 4](https://www.w3.org/TR/css-values-4/)
+- [Truques CSS no artigo na largura do elemento interno](https://css-tricks.com/using-max-for-an-inner-element-max-width/)
+- [min (), max (), clamp () Visão geral de Ahmad Shadeed](https://ishadeed.com/article/css-min-max-clamp/)
+
+Imagem da capa de [@yer_a_wizard](https://unsplash.com/@yer_a_wizard) no Unsplash.
diff --git a/src/site/content/pt/blog/off-main-thread/index.md b/src/site/content/pt/blog/off-main-thread/index.md
new file mode 100644
index 00000000000..39f58ad37b9
--- /dev/null
+++ b/src/site/content/pt/blog/off-main-thread/index.md
@@ -0,0 +1,194 @@
+---
+title: Use web workers para executar JavaScript a partir do thread principal do navegador
+subhead: |2-
+
+  Uma arquitetura fora do thread principal
+
+  pode melhorar expressivamente a solidez do seu aplicativo e a experiência do usuário.
+description: |2-
+
+  O thread principal do navegador está incrivelmente sobrecarregado. Ao usar web workers
+
+  para deslocar o código do thread principal, você pode melhorar significativamente
+
+  a confiabilidade e a experiência do usuário do seu aplicativo.
+authors:
+  - surma
+date: 2019-12-05
+tags:
+  - blog
+  - performance
+  - test-post
+---
+
+Nos últimos 20 anos, a Internet evoluiu drasticamente de documentos estáticos com alguns estilos e imagens para aplicativos complexos e dinâmicos. No entanto, uma coisa permaneceu praticamente intocada: temos apenas um thread por guia do navegador (com algumas exceções) para fazer o trabalho de renderizar nossos sites e executar nosso JavaScript.
+
+Como resultado, o thread principal ficou incrivelmente sobrecarregado. E à medida que os aplicativos da Web crescem em complexidade, o segmento principal se torna um gargalo significativo para o desempenho. Para piorar a situação, a quantidade de tempo que leva para executar o código no thread principal para um determinado usuário é **quase completamente imprevisível** porque os recursos do dispositivo têm um efeito enorme no desempenho. Essa imprevisibilidade só vai crescer à medida que os usuários acessam a web a partir de um conjunto cada vez mais diversificado de dispositivos, de telefones com recursos hiper-restritos a máquinas carro-chefe de alta potência e alta taxa de atualização.
+
+Se quisermos aplicativos da web sofisticados que atendam de forma confiável as diretrizes de desempenho como o [modelo RAIL](/rail/) - que é baseado em dados empíricos sobre a percepção humana e psicologia - precisamos de maneiras de executar nosso código **fora do thread principal (OMT)**.
+
+{% Aside %} Se você quiser saber mais sobre o caso de uma arquitetura OMT, assista minha palestra CDS 2019 abaixo. {% endAside %}
+
+{% YouTube '7Rrv9qFMWNM' %}
+
+## Threading com web workers
+
+Outras plataformas normalmente oferecem suporte para trabalho paralelo, permitindo que você atribua uma função a um thread, que é executado em paralelo com o resto do seu programa. Você pode acessar as mesmas variáveis de ambos os threads, e o acesso a esses recursos compartilhados pode ser sincronizado com exclusões mútuas e semáforos para evitar condições de corrida.
+
+Em JavaScript, podemos obter funcionalidade praticamente semelhante de web workers, que existem desde 2007 e são compatíveis com todos os principais navegadores desde 2012. Web workers são executados em paralelo com o thread principal, mas, ao contrário do threading do SO, eles não podem compartilhar variáveis.
+
+{% Aside %} Não confunda web workers com [service workers](/service-workers-cache-storage) ou [worklets](https://developer.mozilla.org/docs/Web/API/Worklet). Embora os nomes sejam semelhantes, a funcionalidade e os usos são diferentes. {% endAside %}
+
+Para criar um web worker, passe um arquivo para o construtor do worker, que começa a executar esse arquivo em uma thread separada:
+
+```js
+const worker = new Worker("./worker.js");
+```
+
+Comunique-se com o web worker enviando mensagens por meio da [API `postMessage`](https://developer.mozilla.org/docs/Web/API/Window/postMessage). Passe o valor da mensagem como um parâmetro na `postMessage` e, em seguida, adicione um ouvinte de evento de mensagem ao worker:
+
+<!--lint disable no-duplicate-headings-in-section-->
+
+### `main.js`
+
+```js/1
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+```
+
+### `worker.js`
+
+```js
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+});
+```
+
+Para enviar uma mensagem de volta ao thread principal, use a mesma `postMessage` no web worker e configure um ouvinte de evento no thread principal:
+
+### `main.js`
+
+```js/2-4
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+worker.addEventListener("message", event => {
+  console.log(event.data);
+});
+```
+
+### `worker.js`
+
+```js/3
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+  postMessage(a+b);
+});
+```
+
+É certo que essa abordagem é um tanto limitada. Historicamente, os web workers têm sido usados principalmente para tirar uma única peça de trabalho pesado do thread principal. Tentar lidar com várias operações com um único web worker torna-se difícil rapidamente: você precisa codificar não apenas os parâmetros, mas também a operação na mensagem, e precisa fazer a contabilidade para corresponder as respostas às solicitações. Essa complexidade é provavelmente o motivo pelo qual os web workers não foram adotados de forma mais ampla.
+
+Mas se pudéssemos remover algumas das dificuldades de comunicação entre o thread principal e os web workers, esse modelo poderia ser uma ótima opção para muitos casos de uso. E, felizmente, existe uma biblioteca que faz exatamente isso!
+
+## Comlink: tornando os web workers menos trabalhos
+
+[Comlink](http://npm.im/comlink) é uma biblioteca cujo objetivo é permitir que você use web workers sem ter que se preocupar com os detalhes do `postMessage`. Comlink permite que você compartilhe variáveis entre web workers e o thread principal quase como outras linguagens de programação compatíveis com threading.
+
+Você configura o Comlink importando-o em um web worker e definindo um conjunto de funções para expor ao thread principal. Em seguida, você importa o Comlink no thread principal, envolve o worker e obtém acesso às funções expostas:
+
+### `worker.js`
+
+```js
+import {expose} from "comlink";
+
+const api = {
+  someMethod() { /* … */ }
+}
+expose(api);
+```
+
+### `main.js`
+
+```js
+import {wrap} from "comlink";
+
+const worker = new Worker("./worker.js");
+const api = wrap(worker);
+```
+
+A `api` no thread principal se comporta da mesma forma que a do web worker, exceto que cada função retorna uma promessa de um valor em vez do valor em si.
+
+## Que código você deve mover para um web worker?
+
+Os web workers não têm acesso ao DOM e a muitas APIs como [WebUSB](https://developer.mozilla.org/docs/Web/API/USB), [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) ou [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API), portanto, você não pode colocar partes do seu aplicativo que dependem desse acesso em um worker. Ainda assim, cada pequena linha de código movida para um worker gera mais espaço no thread principal para coisas que *precisam* estar lá - como atualizar a interface do usuário.
+
+{% Aside %} Restringir o acesso da IU ao thread principal é, na verdade, típico em outras linguagens. Na verdade, tanto o iOS quanto o Android chamam o thread principal de *thread IU*. {% endAside %}
+
+Um problema para os desenvolvedores web é que a maioria dos aplicativos da Web depende de uma estrutura de IU, como Vue ou React, para orquestrar tudo no aplicativo; tudo é um componente da estrutura e, portanto, está inerentemente vinculado ao DOM. Isso parece dificultar a migração para uma arquitetura OMT.
+
+No entanto, se mudarmos para um modelo no qual as questões da IU são separadas de outras questões, como gerenciamento de estado, os web workers podem ser bastante úteis, mesmo com aplicativos baseados em framework. Essa é exatamente a abordagem adotada com PROXX.
+
+## PROXX: um estudo de caso OMT
+
+A equipe do Google Chrome desenvolveu o [PROXX](/load-faster-like-proxx/) como um clone do Campo Minado que atende aos [requisitos do Progressive Web App](https://developers.google.com/web/progressive-web-apps), incluindo trabalhar off-line e ter uma experiência de usuário envolvente. Infelizmente, as primeiras versões do jogo tiveram um desempenho ruim em dispositivos restritos, como feature phones, o que levou a equipe a perceber que o thread principal era um gargalo.
+
+A equipe decidiu usar web workers para separar o estado visual do jogo de sua lógica:
+
+- O thread principal lida com a renderização de animações e transições.
+- Um web worker lida com a lógica do jogo, que é puramente computacional.
+
+{% Aside %} Essa abordagem é semelhante ao [padrão](https://facebook.github.io/flux/) Redux Flux, portanto, muitos aplicativos Flux podem ser capazes de migrar facilmente para uma arquitetura OMT. Dê uma olhada [nesta postagem do blog](http://dassur.ma/things/react-redux-comlink/) para ler mais sobre como aplicar OMT a um aplicativo Redux. {% endAside %}
+
+OMT teve efeitos interessantes no desempenho do telefone de recursos da PROXX. Na versão não OMT, a IU é congelada por seis segundos após o usuário interagir com ela. Não há feedback e o usuário tem que esperar seis segundos inteiros antes de poder fazer outra coisa.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Tempo de resposta da IU na <strong>versão não OMT</strong> do PROXX.</figcaption></figure>
+
+Na versão OMT, no entanto, o jogo leva *doze* segundos para completar uma atualização da IU. Embora pareça uma perda de desempenho, na verdade leva a um maior feedback para o usuário. A desaceleração ocorre porque o aplicativo está enviando mais frames do que a versão não OMT, que não envia frames. O usuário, portanto, sabe que algo está acontecendo e pode continuar jogando conforme a IU é atualizada, tornando o jogo consideravelmente melhor.
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>Tempo de resposta da IU na <strong>versão OMT</strong> do PROXX.</figcaption></figure>
+
+Esta é uma troca consciente: oferecemos aos usuários de dispositivos restritos uma experiência que se *sente* melhor, sem penalizar os usuários de dispositivos de última geração.
+
+## Implicações de uma arquitetura OMT
+
+Como mostra o exemplo PROXX, OMT torna seu aplicativo executado de forma confiável em uma ampla gama de dispositivos, mas não torna seu aplicativo mais rápido:
+
+- Você está apenas movendo o trabalho do thread principal, não reduzindo o trabalho.
+- A sobrecarga de comunicação extra entre o web worker e o thread principal pode às vezes tornar as coisas um pouco mais lentas.
+
+### Considerando as compensações
+
+Como o thread principal está livre para processar as interações do usuário, como rolar enquanto o JavaScript está em execução, há menos frames perdidos, embora o tempo total de espera possa ser um pouco mais longo. Fazer o usuário esperar um pouco é preferível a eliminar um quadro porque a margem de erro é menor para quadros eliminados: a eliminação de um quadro ocorre em milissegundos, enquanto você tem *centenas* de milissegundos antes que o usuário perceba o tempo de espera.
+
+Por causa da imprevisibilidade do desempenho entre os dispositivos, o objetivo da arquitetura OMT é realmente **reduzir o risco -** tornar seu aplicativo mais robusto em face de condições de tempo de execução altamente variáveis - não sobre os benefícios de desempenho da paralelização. O aumento na resiliência e as melhorias na experiência do usuário valem mais do que qualquer pequena compensação em velocidade.
+
+{% Aside %} Os desenvolvedores às vezes se preocupam com o custo de copiar objetos complexos no thread principal e nos web workers. Há mais detalhes na conversa, mas, em geral, você não deve quebrar seu orçamento de desempenho se a representação JSON stringificada do seu objeto for inferior a 10 KB. Se você precisar copiar objetos maiores, considere o uso de [ArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) ou [WebAssembly](https://webassembly.org/). Você pode ler mais sobre esse problema [nesta postagem do blog sobre o desempenho do `postMessage`](https://dassur.ma/things/is-postmessage-slow). {% endAside %}
+
+### Uma nota sobre ferramentas
+
+Os web workers ainda não são tão populares, por isso a maioria das ferramentas de módulo - como [WebPack](https://webpack.js.org/) e [Rollup](https://github.com/rollup/rollup) - não oferece suporte padrão para eles. (Mas o [Parcel](https://parceljs.org/) tem!) Felizmente, há plug-ins para fazer os web workers, bem, *trabalharem* com WebPack e Rollup:
+
+- [plug-in de worker](https://github.com/GoogleChromeLabs/worker-plugin) para WebPack
+- [rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread) para Rollup
+
+## Resumo
+
+Para garantir que nossos aplicativos sejam tão confiáveis e acessíveis quanto possível, especialmente em um mercado cada vez mais globalizado, precisamos oferecer suporte a dispositivos restritos - eles são a forma como a maioria dos usuários acessa a web globalmente. OMT oferece uma maneira promissora de aumentar o desempenho em tais dispositivos sem afetar adversamente os usuários de dispositivos de última geração.
+
+Além disso, OMT tem benefícios secundários:
+
+- Ele move os custos de execução do JavaScript para um thread separado.
+- Ele move os *custos de análise*, o que significa que a IU pode inicializar mais rápido. Isso pode reduzir o [First Contentful Paint](/fcp/) ou mesmo o [Time to Interactive](/tti/), o que pode, por sua vez, aumentar sua pontuação no [Lighthouse.](https://developer.chrome.com/docs/lighthouse/overview/)
+
+Os web workers não precisam ser assustadores. Ferramentas como o Comlink estão tirando o trabalho dos workers e tornando-os uma escolha viável para uma ampla gama de aplicativos da Web.
diff --git a/src/site/content/pt/blog/one-line-layouts/index.md b/src/site/content/pt/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..4501584c3ec
--- /dev/null
+++ b/src/site/content/pt/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: Dez layouts modernos em uma linha de CSS
+subhead: Este post destaca algumas linhas poderosas de CSS que fazem muito trabalho pesado e ajudam você a construir layouts modernos e robustos.
+authors:
+  - una
+description: Este post destaca algumas linhas poderosas de CSS que fazem muito trabalho pesado e ajudam você a construir layouts modernos e robustos.
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: Layout do Santo Graal.
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+Os layouts CSS modernos permitem que os desenvolvedores escrevam regras de estilo realmente significativas e robustas com apenas alguns toques no teclado. A palestra acima e este post subsequente exploram 10 linhas poderosas de CSS que fazem trabalhos pesados e importantes.
+
+{% Glitch { id: '1linelayouts', path: 'README.md', height: 480 } %}
+
+Para acompanhar ou brincar com essas demos por conta própria, veja o embed do Glitch acima ou visite [1linelayouts.glitch.me](https://1linelayouts.glitch.me).
+
+## 01. Supercentrado: `place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+O primeiro layout de 'linha única' é o que resolve o maior mistério de todo o mundo do CSS: como centralizar as coisas. Quero que você saiba que é mais fácil do que você imagina com [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items).
+
+Primeiro especifique a `grid` como o `display` e, a seguir, escreva `place-items: center` no mesmo elemento. `place-items` é um atalho para definir `align-items` `justify-items` de uma só vez. Ao defini-lo como `center`, os `align-items` `justify-items` são definidos como `center`.
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+Isto permite que o conteúdo seja perfeitamente centralizado no pai, independente do tamanho intrínseco.
+
+## 02. A panqueca desconstruída: `flex: <grow> <shrink> <baseWidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+Em seguida, temos a panqueca desconstruída! Este é um layout comum em sites de marketing, por exemplo, que pode ter uma linha de 3 itens, geralmente com uma imagem, título e algum texto, descrevendo algumas características de um produto. No celular, queremos que eles se empilhem bem e se expandam à medida que aumentamos o tamanho da tela.
+
+Ao usar o Flexbox para esse efeito, você não precisará de media queries para ajustar o posicionamento desses elementos quando a tela for redimensionada.
+
+A abreviação [`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) significa `flex: <flex-grow> <flex-shrink> <flex-basis>`.
+
+Por causa disso, se você quiser que suas caixas sejam preenchidas até o `<flex-basis>`, reduzam em tamanhos menores, mas não *estiquem* para preencher nenhum espaço adicional, escreva: `flex: 0 1 <flex-basis>`. Nesse caso, seu `<flex-basis>` tem `150px` e fica assim:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+Mas se você *deseja* que as caixas se alonguem e preencham o espaço à medida em que quebram para a próxima linha, defina o `<flex-grow>` em `1`, da forma abaixo:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+Agora, conforme você aumenta ou diminui o tamanho da tela, esses itens flexíveis encolhem e aumentam.
+
+## 03. Sidebar Says: `grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+Esta demonstração aproveita a função [minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) para layouts de grade. O que estamos fazendo aqui é definir o tamanho mínimo da barra lateral em `150px`, mas em telas maiores, permitindo que isto se estenda até `25%`. A barra lateral sempre ocupará `25%` do espaço horizontal de seu elemento-pai até que `25%` se torne menor que `150px`.
+
+Adicione isto como um valor de grid-template-columns com o seguinte valor: `minmax(150px, 25%) 1fr`. O item na primeira coluna (a barra lateral, neste caso) obtém um `minmax` de `150px` a `25%` e o segundo item (a seção `main` aqui) ocupa o resto do espaço como uma única faixa de `1fr`.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. Pilha de panquecas: `grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+Ao contrário da Panqueca Desconstruída, este exemplo não envolve seus elementos-filho quando o tamanho da tela muda. Normalmente conhecido como [rodapé fixo](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers), este layout é frequentemente usado para sites e aplicativos, em aplicativos móveis (o rodapé geralmente é uma barra de ferramentas) e sites (aplicativos de página única costumam usar este layout global).
+
+Adicionar `display: grid` ao componente fornecerá uma grade de coluna única, porém a área principal terá a altura do conteúdo com o rodapé abaixo dela.
+
+Para fazer o rodapé colar na parte inferior, acrescente:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+Isto configura o conteúdo do cabeçalho e rodapé para assumir automaticamente o tamanho de seus filhos e aplica o espaço restante (`1fr`) à área principal, enquanto a linha dimensionada com `auto` assumirá o tamanho do conteúdo mínimo de seus filhos, de modo que à medida em que esse conteúdo aumenta de tamanho, a própria linha crescerá para se ajustar.
+
+## 05. Clássico layout do Santo Graal: `grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+Para este layout clássico do Santo Graal, há um cabeçalho, rodapé, barra lateral esquerda, barra lateral direita e conteúdo principal. É semelhante ao layout anterior, mas agora com barras laterais!
+
+Para escrever toda essa grade usando uma única linha de código, use a propriedade `grid-template`. Ela permite que você defina as linhas e colunas ao mesmo tempo.
+
+A propriedade e valores são: `grid-template: auto 1fr auto / auto 1fr auto`. A barra entre a primeira e a segunda listas separadas por espaço é a quebra entre linhas e colunas.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+Como no último exemplo, onde o cabeçalho e o rodapé tinham conteúdo dimensionado automaticamente, aqui as barras laterais esquerda e direita são dimensionadas automaticamente com base no tamanho intrínseco de seus filhos. No entanto, desta vez é o tamanho horizontal (largura) em vez de vertical (altura).
+
+## 06. 12-Span Grid: `grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+Em seguida temos outro clássico: a grade de 12 intervalos. Você pode escrever grades em CSS rapidamente com a função `repeat()`. Usando: `repeat(12, 1fr);` para as colunas do modelo da grade, você obtém 12 colunas de `1fr` cada.
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+Agora que você tem uma grade de 12 colunas podemos colocar nossos elementos-filho na grade. Uma maneira de fazer isso seria posicioná-los usando linhas de grade. Por exemplo, `grid-column: 1 / 13` iria se estender desde a primeira linha até a última (13ª) e ocupar 12 colunas. `grid-column: 1 / 5;` abrangeria as primeiras quatro.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+Outra maneira de escrever isso é usando a palavra-chave `span`. Com `span`, você define a linha de partida e, em seguida, quantas colunas devem ser dispostas a partir desse ponto de partida. Neste caso, `grid-column: 1 / span 12` seria equivalente a `grid-column: 1 / 13` e `grid-column: 2 / span 6` seria equivalente a `grid-column: 2 / 8`.
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+Para este sétimo exemplo, combine alguns dos conceitos que você já aprendeu para criar um layout responsivo com elementos-filho flexíveis e posicionados automaticamente. Tudo muito bem arrumado. Os termos-chave a serem lembrados aqui são `repeat`, `auto-(fit|fill)` e `minmax()'`, que você lembra pela sigla RAM.
+
+Tudo junto fica assim:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+Você está usando repeat de novo, mas desta vez, usando a palavra-chave `auto-fit` vez de um valor numérico explícito. Isto permite a colocação automática desses elementos-filho. Esses elementos-filho também têm um valor mínimo inicial de `150px` `1fr` com um valor máximo de 1fr, ou seja, em telas menores, eles ocuparão toda a largura `1fr` e, à medida que atingirem `150px` px de largura cada, começarão a fluir para a mesma linha.
+
+Com o `auto-fit`, as caixas se esticarão conforme seu tamanho horizontal ultrapassar 150 px para preencher todo o espaço restante. No entanto, se você alterar para `auto-fill`, elas não se estenderão quando seu tamanho de base na função minmax for excedido:
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. Line Up: `justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+Para o próximo layout, o ponto principal a demonstrar aqui é `justify-content: space-between`, que coloca o primeiro e o último elemento filho nas bordas de sua caixa delimitadora, com o espaço restante igualmente distribuído entre os elementos. Para esses cartões, eles são colocados em um modo de exibição Flexbox, com a direção sendo definida por coluna usando `flex-direction: column`.
+
+Isto coloca o título, a descrição e o bloco de imagem numa coluna vertical dentro do cartão pai. Em seguida, a aplicação de `justify-content: space-between` ancora o primeiro (título) e o último (bloco de imagem) elementos às bordas do flexbox, e o texto descritivo entre eles é colocado com espaçamento igual para cada endpoint.
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. Clamping My Style: `clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+É aqui que entramos em algumas técnicas com [menos suporte dos navegadores](https://caniuse.com/#feat=css-math-functions), mas que têm algumas implicações realmente interessantes para layouts e design de interfaces responsivas. Nesta demonstração, você define a largura usando clamp da seguinte forma: `width: clamp(<min>, <actual>, <max>)`.
+
+Isto determina um tamanho mínimo e máximo absolutos e um tamanho real. Com valores, isso pode ser algo com:
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+O tamanho mínimo aqui é `23ch` ou 23 unidades de caracteres, e o tamanho máximo é `46ch`, 46 caracteres. [As unidades de largura dos caracteres](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) são baseadas no tamanho da fonte do elemento (especificamente a largura do glifo `0`). O tamanho 'real' é 50%, o que representa 50% da largura do elemento pai deste elemento.
+
+O que a função `clamp()` está fazendo aqui é permitir que este elemento retenha uma largura de 50% *até que* 50% seja maior que `46ch` (em viewports mais largas) ou menor que `23ch` (em viewports menores). Você pode ver que conforme eu estico e encolho o tamanho principal, a largura deste cartão aumenta até o ponto máximo fixado e diminui até o mínimo fixado. Em seguida, ele permanece centralizado no elemento pai, pois aplicamos propriedades adicionais para centralizá-lo. Isto permite layouts mais legíveis, pois o texto nunca será muito largo (acima de `46ch`) nem muito comprimido e estreito (menos de `23ch`).
+
+Esta também é uma ótima maneira de implementar tipografia responsiva. Por exemplo, você pode escrever: `font-size: clamp(1.5rem, 20vw, 3rem)`. Neste caso, o tamanho da fonte de um título sempre ficaria entre `1.5rem` e `3rem` mas aumentaria e diminuiria com base no valor real de `20vw` para se ajustar à largura da viewport.
+
+Esta é uma ótima técnica para garantir a legibilidade com um valor de tamanho mínimo e máximo, mas lembre-se de que não é suportada em todos os navegadores modernos, portanto, certifique-se de ter fallbacks e faça seus testes.
+
+## 10. Respect for Aspect: `aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+E, finalmente, esta última ferramenta de layout é a mais experimental do grupo. Foi recentemente apresentada ao Chrome Canary no Chromium 84, e há um esforço ativo do Firefox para implementá-la, mas atualmente não está em nenhuma versão estável de navegador.
+
+Eu quero mencioná-la, entretanto, porque tem relação com um problema encontrado com frequência, que é simplesmente manter a proporção de uma imagem.
+
+Com a propriedade `aspect-ratio`, à medida em que eu redimensiono o cartão, o bloco visual verde mantém essa proporção de 16 x 9. Estamos respeitando a relação de aspecto com `aspect-ratio: 16 / 9`.
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+Para manter uma proporção de aspecto de 16 x 9 sem essa propriedade, você precisaria usar um [hack](https://css-tricks.com/aspect-ratio-boxes/) com `padding-top` e dar a ele um padding de `56.25%` para definir uma proporção entre o topo e a largura. Em breve teremos uma propriedade para isto, evitando a necessidade do hack e de calcular o percentual. Você pode fazer um quadrado com proporção `1 / 1`, uma proporção de 2 para 1 com `2 / 1`, e realmente qualquer coisa que você precisar para esta imagem redimensionar numa proporção definida.
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+Embora este recurso ainda esteja em desenvolvimento, é bom conhecê-lo, pois resolve muitos conflitos de desenvolvimento que já enfrentei muitas vezes, especialmente quando se trata de vídeo e iframes.
+
+## Conclusão
+
+Obrigado por acompanhar esta jornada através de 10 linhas poderosas de CSS. Para saber mais, assista [ao vídeo completo](https://youtu.be/qm0IfG1GyZU) e experimente [as demos](https://1linelayouts.glitch.me) você mesmo.
diff --git a/src/site/content/pt/blog/open-web-docs/index.md b/src/site/content/pt/blog/open-web-docs/index.md
new file mode 100644
index 00000000000..cc5909a8317
--- /dev/null
+++ b/src/site/content/pt/blog/open-web-docs/index.md
@@ -0,0 +1,16 @@
+---
+title: Introdução ao Open Web Docs
+subhead: Um projeto coletivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung e Igalia para apoiar a criação e manutenção de documentação de plataforma web estratégica.
+description: Um projeto coletivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung e Igalia para apoiar a criação e manutenção de documentação de plataforma web estratégica.
+authors:
+  - robertnyman
+date: 2021-01-25
+tags:
+  - blog
+---
+
+A documentação de alta qualidade para tecnologias de plataforma da web é um componente extremamente importante de nossa infraestrutura digital aberta e compartilhada. Hoje, estou animado para apresentar publicamente o [Open Web Docs](https://opencollective.com/open-web-docs), um projeto coletivo entre Google, Microsoft, Mozilla, Coil, W3C, Samsung e Igalia. Ele foi projetado para apoiar uma comunidade de escritores técnicos em torno da criação estratégica e manutenção de longo prazo da documentação de tecnologia da plataforma da web que é aberta e inclusiva para todos.
+
+Esta não é uma nova plataforma de documentos: o Open Web Docs está trabalhando em estreita colaboração com as plataformas existentes e sua prioridade atual é contribuir para o [MDN Web Docs](https://developer.mozilla.org/). Ele foi criado para garantir a integridade a longo prazo da documentação da plataforma da web em recursos padrão de fato, independentemente de qualquer fornecedor ou organização. Por meio de equipe em tempo integral, gerenciamento de comunidade e rede de organizações parceiras da Open Web Docs, ele permite que esses recursos mantenham e sustentem melhor a documentação das principais tecnologias da plataforma da web. Em vez de criar novos sites de documentação, o Open Web Docs está comprometido em melhorar as plataformas existentes por meio de nossas contribuições.
+
+Vá para o [Open Web Docs,](https://opencollective.com/open-web-docs) a [postagem de lançamento e as Perguntas frequentes](https://opencollective.com/open-web-docs/updates/introducing-open-web-docs) para saber mais!
diff --git a/src/site/content/pt/blog/optimize-cls/index.md b/src/site/content/pt/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..a1cc4cce900
--- /dev/null
+++ b/src/site/content/pt/blog/optimize-cls/index.md
@@ -0,0 +1,352 @@
+---
+title: Otimize a Cumulative Layout Shift
+subhead: Aprenda como evitar mudanças repentinas de layout para melhorar a experiência do usuário
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: Cumulative Layout Shift  (CLS) é uma métrica que quantifica a frequência com que os usuários experimentam mudanças repentinas no conteúdo da página. Neste guia, abordaremos a otimização de causas comuns de CLS, como imagens e iframes sem dimensões ou conteúdo dinâmico.
+alt: Deslocamentos de layout podem empurrar repentinamente o conteúdo que você está lendo ou está prestes a clicar mais para baixo na página, levando a uma experiência do usuário insatisfatória. Reservar espaço para conteúdo dinâmico causando mudanças de layout leva a uma experiência do usuário mais agradável.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='88' %}
+
+"Eu estava prestes a clicar nisso! Por que ele se moveu? 😭"
+
+Os deslocamentos de layout podem distrair os usuários. Imagine que você começou a ler um artigo quando, de repente, os elementos mudam de posição na página, fazendo você perder a posição da leitura e fazendo que você pare para procurar o lugar onde parou. Isto é muito comum na web, inclusive ao ler notícias ou tentar clicar nos botões 'Pesquisar' ou 'Adicionar ao carrinho'. Essas experiências são visualmente chocantes e frustrantes. Freqüentemente, elas são causadas quando elementos visíveis são forçados a se mover porque outro elemento foi adicionado repentinamente à página ou foi redimensionado.
+
+A [Cumulative Layout Shift](/cls) - CLS (deslocamento cumulativo de layout), que é uma métrica [Core Web Vitals](/vitals), mede a instabilidade do conteúdo ao somar pontuações de deslocamentos nas alterações de layout que não ocorrem dentro de 500 ms da interação do usuário. Ela observa quanto conteúdo visível mudou dentro da janela de visualização, bem como a distância em que os elementos impactados foram deslocados.
+
+Neste guia, veremos como otimizar causas comuns de deslocamentos de layout.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Bons valores de CLS estão abaixo de 0,1, valores baixos são maiores que 0,25 e qualquer coisa entre precisa de melhorias", width="384", height="96" %}
+</picture>
+
+As causas mais comuns de uma CLS ruim são:
+
+- Imagens sem dimensões
+- Anúncios, incorporações e iframes sem dimensões
+- Conteúdo injetado dinamicamente
+- Fontes da Web que causam FOIT/FOUT
+- Ações que aguardam uma resposta da rede antes de atualizar o DOM
+
+## Imagens sem dimensões 🌆
+
+**Resumo:** sempre inclua os atributos de tamanho `width` e `height` nas suas imagens e elementos de vídeo. Como alternativa, reserve o espaço necessário com as [caixas de proporção de aspecto do CSS](https://css-tricks.com/aspect-ratio-boxes/). Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem é carregada.
+
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
+      Imagens sem especificação de width e height.
+    </figcaption>
+  </figure>
+
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
+      Imagens com especificação de width e height.
+    </figcaption>
+  </figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift after setting dimensions on images", width="800", height="148" %}
+  <figcaption>
+  Impacto na CLS mostrado pelo Lighthouse 6.0 ao especificar dimensões nas imagens.
+  </figcaption>
+</figure>
+
+### Historia
+
+No início da web, os desenvolvedores adicionavam os atributos `width` e `height` `<img>` para garantir que espaço suficiente fosse alocado na página antes que o navegador começasse a buscar imagens. Isso reduziria a necessidade de refazer o fluxo e o layout.
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+Você deve ter observado que os atributos `width` e a `height` acima não incluem unidades. Essas dimensões em "pixels" garantiriam a reserva de uma área de 640 x 360. A imagem seria esticada para caber neste espaço, independentemente da correspondência ou não de suas verdadeiras dimensões.
+
+Quando o [Web Design Responsivo](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) foi introduzido, os desenvolvedores começaram a omitir `width` e `height` e passaram a usar CSS para redimensionar imagens:
+
+```css
+img {
+  width: 100%; /* or max-width: 100%; */
+  height: auto;
+}
+```
+
+Uma desvantagem dessa abordagem é que o espaço só pode ser alocado para uma imagem depois que ela começar a ser baixada e o navegador tiver condições de determinar suas dimensões. À medida que as imagens são carregadas, a página se recompõe para posicionar cada imagem que aparece na tela. Tornou-se comum o texto de repente rolar para baixo na tela. Isto não trouxe uma boa experiência para o usuário.
+
+É aqui que entra a questão da proporção. A proporção de uma imagem é um valor que representa sua largura em relação à sua altura. É comum ver esse valor expresso como dois números separados por dois pontos (por exemplo 16:9 ou 4:3). Para uma proporção x:y, a imagem tem x unidades de largura e y unidades de altura.
+
+Isso significa que, se conhecermos uma das dimensões, a outra pode ser calculada. Para uma proporção de 16:9:
+
+- Se puppy.jpg tem 360 px de altura, a largura é 360 x (16/9) = 640 px
+- Se puppy.jpg tem uma largura de 640 px, a altura é 640 x (9/16) = 360 px
+
+Conhecer a proporção da imagem permite que o navegador calcule e reserve espaço suficiente para a altura e a área associada.
+
+### Melhores práticas atuais
+
+Os navegadores modernos agora definem a proporção padrão das imagens com base nos atributos de largura e altura de uma imagem, portanto, é importante defini-las para evitar deslocamentos no layout. Graças ao CSS Working Group, os desenvolvedores só precisam definir os atributos `width` e `height` normalmente:
+
+```html
+<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+… que as [folhas de estilo UA](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets) de todos os navegadores adicionam uma [proporção default com](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images) base nos atributos de `width` e `height` já existentes no elemento:
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+Isso calcula uma proporção com base nos atributos `width` e `height` antes que a imagem seja carregada. Essas informações são fornecidas bem no início do cálculo do layout. Assim que o navegador sabe que uma imagem deve ter uma certa largura (por exemplo, `width: 100%`), a proporção da imagem é usada para calcular a altura.
+
+Dica: se você está tendo dificuldades para entender a proporção, temos disponível uma [calculadora](https://aspectratiocalculator.com/16-9.html) útil que pode lhe ajudar.
+
+As alterações na proporção da imagem acima foram implementadas no [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) e [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891) e estão chegando ao [WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari).
+
+Para um aprofundamento fantástico no tópico da proporção de aspecto, com mais detalhes acerca das imagens responsivas, veja [Carregamento de páginas sem interrupções com proporções de mídia](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/).
+
+Se sua imagem estiver em um container, você pode usar CSS para redimensionar a imagem para ocupar a largura desse container. Definimos `height: auto;` para evitar que a altura da imagem seja um valor fixo (por exemplo, `360px`).
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**E as imagens responsivas?**
+
+Ao trabalhar com [imagens responsivas](/serve-responsive-images), `srcset` define quais as imagens que você permite que o navegador selecione e o tamanho de cada imagem. Para garantir que os atributos width e height de `<img>` possam ser definidos, cada imagem deve manter a mesma proporção.
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="Puppy with balloons"
+/>
+```
+
+E a [direção de arte](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)?
+
+As páginas poderão decidir incluir uma foto recortada de uma imagem em janelas de exibição estreitas com a imagem inteira exibida na área de trabalho.
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
+</picture>
+```
+
+É bem possível que essas imagens tenham proporções diferentes e os navegadores ainda estejam avaliando qual deve ser a solução mais eficiente aqui, inclusive se as dimensões devem ser especificadas em todas as fontes. Até que uma solução seja decidida, poderá ainda ser necessária a alteração do layout.
+
+## Anúncios, incorporações e iframes sem dimensões 📢😱
+
+### Anúncios
+
+Os anúncios são um dos maiores contribuintes para as mudanças de layout na web. Redes de anúncios e editores geralmente oferecem suporte a tamanhos de anúncios dinâmicos. Os tamanhos dos anúncios aumentam o desempenho/receita devido a taxas de cliques mais altas e a mais anúncios competindo no leilão. Infelizmente, isto pode levar a uma experiência do usuário abaixo da ideal devido aos anúncios empurrando o conteúdo visível que você está visualizando para baixo na página.
+
+Durante o ciclo de vida do anúncio, diversos pontos podem causar mudanças de layout:
+
+- Quando um site insere o container do anúncio no DOM
+- Quando um site redimensiona o container do anúncio com o código da fonte primária
+- Quando a biblioteca de tags do anúncio carrega (e redimensiona o container do anúncio)
+- Quando o anúncio preenche um container (e é redimensionado se o anúncio final tiver um tamanho diferente)
+
+A boa notícia é que é possível que os sites sigam as práticas recomendadas para reduzir o deslocamento causado pelos anúncios. Os sites podem atenuar essas alterações de layout através das seguintes estratégias:
+
+- Reservar espaço para o local do anúncio estaticamente.
+    - Em outras palavras, aplicar o estilo do elemento antes que a biblioteca de tags do anúncio carregue.
+    - Se anúncios forem inseridos no fluxo do conteúdo, certifique-se de que os deslocamentos sejam eliminados reservando o tamanho do local. Esses anúncios *não devem* causar deslocamentos de layout se carregados fora da tela.
+- Tomar cuidado ao posicionar anúncios que não sejam fixos próximos à parte superior da janela de visualização.
+    - No exemplo abaixo, é recomendado mover o anúncio abaixo do logotipo "world vision" e reservar espaço suficiente para o slot.
+- Evitar recolher o espaço reservado se nenhum anúncio for retornado quando o local do anúncio estiver visível, exibindo um placeholder.
+- Eliminar deslocamentos reservando o maior tamanho possível para o local do anúncio.
+    - Isto funciona, mas corre-se o risco de ter um espaço em branco se um criativo de anúncio menor ocupar o espaço.
+- Escolher o tamanho mais provável para o local do anúncio com base em dados históricos.
+
+Alguns sites podem descobrir que o recolhimento inicial do local pode reduzir deslocamentos de layout, caso seja improvável que o local do anúncio seja preenchido. Não existe uma maneira simples de escolher o tamanho exato a cada vez, a menos que você mesmo tenha controle sobre a veiculação do anúncio.
+
+  <figure>
+    {% Video
+      src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"],
+      poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg",
+      controls=true,
+      loop=true,
+      muted=true %}
+   <figcaption>
+      Anúncios sem espaço suficiente reservado.
+    </figcaption>
+  </figure>
+
+  <figure>
+      {% Video
+        src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"],
+        poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg",
+        controls=true,
+        loop=true,
+        muted=true %}
+   <figcaption>
+      Anúncios com espaço suficiente reservado.
+    </figcaption>
+  </figure>
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift of reserving space for banners like ads", width="800", height="148" %}
+  <figcaption>
+    Impacto Lighthouse 6.0 da reserva de espaço para este banner na CLS
+  </figcaption>
+</figure>
+
+#### Reservar espaço para o local do anúncio estaticamente
+
+Aplicar estilos estaticamente sobre elementos DOM de slot com os mesmos tamanhos passados para sua biblioteca de tags. Isto pode ajudar a garantir que a biblioteca não introduza mudanças de layout ao carregar. Se você não fizer isto, a biblioteca pode alterar o tamanho do elemento do slot após o layout da página.
+
+Considere também os tamanhos de veiculações de anúncios menores. Se um anúncio menor for veiculado, um editor poderá definir o estilo do container (maior) para evitar deslocamentos no layout. A desvantagem dessa abordagem é que ela aumentará a quantidade de espaço em branco, portanto, lembre-se dessa compensação.
+
+#### Evitar colocar anúncios perto do topo da janela de visualização
+
+Anúncios próximos ao topo da janela de visualização podem provocar um deslocamento maior no layout do que aqueles que aparecem no meio. Isto ocorre porque os anúncios na parte superior geralmente fazem com que mais conteúdo desça, o que significa que mais elementos se movem quando o anúncio causa um deslocamento. Por outro lado, os anúncios próximos ao meio da janela de visualização podem não deslocar tantos elementos já que o conteúdo acima dele terá menos probabilidade de se mover.
+
+### Incorporações e iframes
+
+Widgets incorporáveis permitem incluir conteúdo portátil da web na sua página (por exemplo, vídeos do YouTube, mapas do Google Maps, postagens de mídia social e assim por diante). Essas incorporações podem assumir várias formas:
+
+- Fallback de HTML e uma tag JavaScript transformando o substituto numa incorporação sofisticada
+- Trecho de HTML inline
+- Incorporação de iframe
+
+Essas incorporações muitas vezes não sabem com antecedência qual será o tamanho do seu conteúdo (por exemplo, no caso de uma postagem de mídia social - ela vem com uma imagem incorporada? vídeo? múltiplas linhas de texto?). Como resultado, as plataformas que oferecem incorporações nem sempre reservam espaço suficiente para elas e podem causar deslocamentos de layout quando finalmente carregam.
+
+<figure>
+  {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %}
+ <figcaption>
+    Incorporação sem reserva de espaço.
+  </figcaption>
+</figure>
+
+<figure>
+  {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %}
+ <figcaption>
+  Incorporação com reserva de espaço.
+  </figcaption>
+</figure>
+
+<figure>
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="Lighthouse report showing the before/after impact to Cumulative Layout Shift of reserving space for this embed on CLS", width="800", height="148" %}
+<figcaption>
+  Impacto Lighthouse 6.0 na CLS da reserva de espaço para esta incorporação
+</figcaption>
+</figure>
+
+Para contornar isso, você pode minimizar a CLS pré-computando espaço suficiente para incorporações com um placeholder ou fallback. Um workflow que você pode usar para incorporações é o seguinte:
+
+- Obtenha a altura de sua incorporação final inspecionando-a com as ferramentas de desenvolvimento do seu navegador
+- Assim que a incorporação for carregada, o iframe contido será redimensionado para que que seu conteúdo caiba.
+
+Tome nota das dimensões e aplique estilos num placeholder para a incorporação de acordo. Você pode precisar levar em consideração diferenças sutis nos tamanhos dos anúncios / placeholders de posição entre os diferentes formatos usando consultas de mídia (media queries).
+
+### Conteúdo dinâmico 📐
+
+**Resumo:** evite inserir novo conteúdo acima do conteúdo existente, a menos que seja em resposta a uma interação do usuário. Isto garante que quaisquer mudanças de layout que ocorram sejam esperadas.
+
+Você provavelmente já experimentou mudanças de layout devido à IU que surge na parte superior ou inferior da janela de visualização quando você está tentando carregar um site. Semelhante aos anúncios, isto geralmente acontece com banners e formulários que deslocam o restante do conteúdo da página:
+
+- "Inscreva-se no nosso boletim!" (uau, vamos com calma! Acabamos de nos conhecer!)
+
+- "Conteúdo relacionado"
+
+- "Instale nosso aplicativo [iOS/Android]"
+
+- "Ainda estamos recebendo pedidos"
+
+- "Aviso RGPD"
+
+  <figure>
+    {% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %}
+   <figcaption>
+        Conteúdo dinâmico sem reserva de espaço.
+   </figcaption>
+    </figure>
+
+Se você precisar exibir esse tipo de recurso, reserve espaço suficiente na janela de visualização para ele com antecedência (por exemplo, usando um placeholder ou uma interface esqueleto) para que, quando carregar, não faça com que o conteúdo da página se desloque de repente.
+
+Em alguns casos, adicionar conteúdo dinamicamente é uma parte importante da experiência do usuário. Por exemplo, ao carregar mais produtos para uma lista de itens ou ao atualizar o conteúdo do feed ao vivo. Existem várias maneiras de evitar mudanças inesperadas de layout nesses casos:
+
+- Substitua o conteúdo antigo pelo novo conteúdo em um container de tamanho fixo ou use um carrossel e remova o conteúdo antigo após a transição. Lembre-se de desativar todos os links e controles até que a transição seja concluída para evitar cliques ou toques acidentais enquanto o novo conteúdo está chegando.
+- Faça com que o usuário inicie o carregamento do novo conteúdo, para que ele não se surpreenda com a mudança (por exemplo, com um botão "Carregar mais" ou "Atualizar"). É recomendado pré-buscar o conteúdo antes da interação do usuário para que ele apareça imediatamente. Lembre-se que mudanças de layout que ocorrem dentro de 500 ms da entrada do usuário não são contadas para o CLS.
+- Carregue totalmente o conteúdo fora da tela e sobreponha um aviso ao usuário de que as informações estão disponíveis (por exemplo, com um botão "Rolar para cima").
+
+<figure>
+  {% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="Examples of dynamic content loading without causing unexpected layout shifts from Twitter and the Chloé website", width="800", height="458" %}
+  <figcaption>Exemplos de carregamento de conteúdo dinâmico sem causar mudanças inesperadas de layout. Esquerda: Carregamento de conteúdo de feed ao vivo no Twitter. À direita: exemplo "Carregar mais" no site da Chloé. Confira como a equipe YNAP <a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">otimizou para CLS ao carregar mais conteúdo</a>.</figcaption>
+</figure>
+
+### Fontes da Web que causam FOIT/FOUT
+
+Baixar e renderizar fontes da web pode causar mudanças de layout de duas maneiras:
+
+- A fonte de fallback foi trocada por uma nova fonte (FOUT - flash de texto sem estilo)
+- Texto "invisível" é exibido até que uma nova fonte seja renderizada (FOIT - flash de texto invisível)
+
+As seguintes ferramentas podem ajudá-lo a minimizar o problema:
+
+- <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code> permite que você modifique o comportamento da renderização de fontes personalizadas usando valores como <code>auto</code> , <code>swap</code> , <code>block</code> , <code>fallback</code> e <code>optional</code>. Infelizmente, todos esses valores (exceto [opcional](http://crrev.com/749080)) podem causar uma alteração de layout de uma das maneiras acima.
+- A [Font Loading API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) pode reduzir o tempo necessário para obter as fontes necessárias.
+
+Em relação ao Chrome 83, posso recomendar também o seguinte:
+
+- Usar `<link rel=preload>` nas principais fontes da web: uma fonte pré-carregada terá uma chance maior de encontrar a primeira renderização, e nesse caso não haverá mudança de layout.
+- Combinar `<link rel=preload>` e `font-display: optional`
+
+Leia [Impedindo o deslocamento de layout e flashes de texto invisível (FOIT) ao carregar fontes opcionais](/preload-optional-fonts/) para mais detalhes.
+
+### Animações 🏃‍♀️
+
+**Resumo:** Prefira animações com `transform` em vez de animar propriedades que causam alterações de layout.
+
+Mudanças nos valores das propriedades CSS podem exigir que o navegador reaja a essas alterações. Uma série de valores provocam um novo layout, renderização e composições, como `box-shadow` ,`box-sizing`. Diversas propriedades CSS podem ser alteradas de maneira menos onerosa.
+
+Para saber mais sobre quais propriedades CSS causam alterações no layout, veja [Animações de alto desempenho](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/).
+
+### Ferramentas de desenvolvimento 🔧
+
+Há uma série de ferramentas disponíveis para medir e depurar a Cumulative Layout Shift (CLS).
+
+O [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [6.0](https://github.com/GoogleChrome/lighthouse/releases) e superior inclui suporte a medição de CLS em ambiente de laboratório. Esta versão também destaca os nós que causam a maior parte dos deslocamentos no layout.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="O Lighthouse 6.0 inclui suporte à medição de CLS na seção de métricas", width="800", height="309" %}
+
+O painel [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) no DevTools destaca os deslocamentos de layout na seção **Experience** a partir do Chrome 84. A tela **Summary** para um registro de `Layout Shift` inclui a pontuação do deslocamento cumulativo layout cumulativa, bem como uma sobreposição de retângulo mostrando as regiões afetadas.
+
+<figure>{% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Registros de mudança de layout exibidos no painel de desempenho do Chrome DevTools ao expandir a seção Experiência", width="800", height="438" %} <figcaption> Depois de registrar um novo registro no painel Performance, a seção <b>Experience</b> dos resultados é preenchida com uma barra tingida de vermelho exibindo um registro de <code>Layout Shift</code> Clicar no registro permite detalhar os elementos impactados (por exemplo, observe as entradas de movimento de/para).</figcaption></figure>
+
+A medição da CLS no mundo real agregado num nível de origem também é possível usando o [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/blog/chrome-ux-report-bigquery/) (CrUX). Os dados do CrUX para CLS estão disponíveis por meio do BigQuery e um [exemplo de consulta](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql) está disponível para monitorar o desempenho da CLS.
+
+É só isso para este guia. Espero que ele ajude a manter suas páginas um pouco menos evasivas :)
+
+*Com agradecimentos a Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes e Gilberto Cocchi por suas avaliações úteis.*
diff --git a/src/site/content/pt/blog/optimize-fid/index.md b/src/site/content/pt/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..9eb3f20dc98
--- /dev/null
+++ b/src/site/content/pt/blog/optimize-fid/index.md
@@ -0,0 +1,173 @@
+---
+title: Otimize a First Input Delay
+subhead: Como responder mais rápido às interações do usuário.
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: Uma mão tocando a tela de um smartphone
+description: A métrica First Input Delay (FID) mede o tempo a partir do momento em que um usuário interage pela primeira vez com o seu site até o momento em que o navegador é capaz de responder a essa interação. Saiba como otimizar a FID minimizando o JavaScript não utilizado, dividindo tarefas longas e melhorando a interação e prontidão.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>Cliquei, mas não aconteceu nada! Por que não consigo interagir com esta página? 😢</p>
+</blockquote>
+
+A [First Contentful Paint](/fcp/) - FCP (primeira renderização de conteúdo) e a [Largest Contentful Paint](/lcp/) - LCP (maior renderização de conteúdo) são métricas que medem o tempo que leva para o conteúdo ser visualmente renderizado (pintado) numa página. Embora seja importante, o tempo de renderização não captura a *responsividade do carregamento*, ou seja, a rapidez com que uma página responde à interação do usuário.
+
+A [First Input Delay](/fid/) - FID (atraso da primeira entrada) é uma métrica [Core Web Vitals](/vitals/) que captura a primeira impressão de um usuário sobre a interatividade e capacidade de resposta de um site. Ela mede o tempo desde quando um usuário interage pela primeira vez com uma página até o momento em que o navegador é finalmente capaz de responder a essa interação. A FID é uma [métrica de campo](/user-centric-performance-metrics/#in-the-field) e não pode ser simulada em ambiente de laboratório. **É necessária uma interação real do usuário** para medir o atraso da resposta.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Bons valores de fid são 2,5 segundos, valores fracos são maiores que 4,0 segundos e qualquer coisa entre precisa de melhorias", width="384", height="96" %}
+  </picture>
+
+Para ajudar a prever a FID no [laboratório](/how-to-measure-speed/#lab-data-vs-field-data) , recomendamos a métrica [Total Blocking Time - TBT (tempo total de bloqueio)](/tbt/). Elas medem coisas diferentes, mas melhorias na TBT geralmente correspondem a melhorias na FID.
+
+A principal causa de uma FID ruim é **a execução pesada de JavaScript**. Otimizar como o JavaScript processa, compila e executa na sua página web reduzirá diretamente a FID.
+
+## Execução pesada de JavaScript
+
+O navegador não pode responder à maioria das entradas do usuário enquanto executa o JavaScript na thread principal. Em outras palavras, o navegador não pode responder às interações do usuário enquanto a thread principal está ocupada. Para melhorar isto:
+
+- [Divida Tarefas Longas](#long-tasks)
+- [Otimize sua página para a prontidão de interação](#optimize-interaction-readiness)
+- [Use um web worker](#use-a-web-worker)
+- [Reduza o tempo de execução do JavaScript](#reduce-javascript-execution)
+
+## Divida tarefas longas {:#long-tasks}
+
+Se você já tentou reduzir a quantidade de JavaScript que carrega numa única página, pode ser útil dividir o código de longa execução em **tarefas assíncronas menores** .
+
+[**Tarefas Longas**](/custom-metrics/#long-tasks-api) são aqueles períodos de execução de JavaScript onde os usuários podem perceber que sua interface não responde. Qualquer pedaço de código que bloqueie a thread principal por 50 ms ou mais pode ser caracterizado como uma Tarefa Longa. Tarefas Longas são um sinal de potencial inchaço do JavaScript (carregar e executar mais do que o usuário pode precisar naquele instante). A divisão das tarefas longas poderá reduzir o atraso de entrada no seu site.
+
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Tarefas Longas em Chrome DevTools", width="800", height="132" %}
+  <figcaption>Chrome DevTools <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">visualiza tarefas longas</a> no painel Performance</figcaption>
+</figure>
+
+A FID deve melhorar visivelmente à medida que você adota práticas recomendadas, como divisão de código e divisão de tarefas longas. Embora a TBT não seja uma métrica de campo, é útil para verificar o progresso no sentido de melhorar a Time to Interactive - TTI (tempo até interatividade) e a FID.
+
+{% Aside %} Para mais informações, dê uma olhada em [Tarefas longas de JavaScript estão atrasando seu Time to Interactive?](/long-tasks-devtools/). {% endAside %}
+
+## Otimize sua página para a prontidão de interação
+
+Existem várias causas comuns para pontuações baixas de FID e TBT em aplicativos web que dependem fortemente de JavaScript:
+
+### A execução do scripts primários pode atrasar a prontidão para a interação
+
+- O inchaço do tamanho do JavaScript, tempos de execução pesados e fragmentação ineficiente podem atrasar o momento em que uma página esteja pronta a receber à entrada do usuário e impactar a FID, a TBT e a TTI. O carregamento progressivo de código e de recursos pode ajudar a distribuir esse trabalho e melhorar a prontidão para a interação.
+- Aplicações renderizadas do lado do servidor podem parecer que estão renderizando pixels na tela rapidamente, mas preste atenção às interações do usuário que são bloqueadas por demoradas execuções de scripts (por exemplo, a reidratação para conectar listeners de eventos). Isto pode demorar várias centenas de milissegundos e às vezes até segundos, se a divisão de código baseada em rota estiver sendo usada. Considere transferir mais lógica para o lado do servidor ou gerar mais conteúdo estaticamente durante o tempo de build.
+
+Abaixo estão as pontuações de TBT antes e depois de otimizar o carregamento do script original para uma aplicação. Ao transferir o carregamento (e execução) de scripts caros de um componente não essencial para fora do seu caminho crítico, os usuários foram capazes de interagir com a página muito mais cedo.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="Melhorias na pontuação de TBT no Lighthouse depois de otimizar um script primário.", width="800", height="148" %}
+
+### A transferência de dados pode afetar diversos aspectos da prontidão da interação
+
+- Esperar por uma sequência de transferências em cascata (por exemplo, JavaScript e transferências de dados para componentes) pode impactar a latência da interação. Procure depender menos de dados baixados em cascata.
+- Grandes datastores inline podem aumentar o tempo de processamento do HTML e impactar nas métricas de renderização e interação. Procure minimizar a quantidade de dados que precisam ser pós-processados no lado do cliente.
+
+### A execução de scripts de terceiros também pode atrasar a latência de interação
+
+- Muitos sites incluem tags e análises de terceiros que podem manter a rede ocupada e fazer com que a thread principal pare de responder periodicamente, afetando a latência de interação. Experimente o carregamento sob demanda de código de terceiros (por exemplo, talvez você não carregue os anúncios abaixo da dobra até que eles rolem para mais perto da janela de visualização).
+- Em alguns casos, os scripts de terceiros podem se antecipar aos originais em termos de prioridade e largura de banda na thread principal, também atrasando o tempo de prontidão de uma página para interações. Tente priorizar o carregamento do que você acredita que oferece o maior valor para os usuários.
+
+## Use um web worker
+
+Uma thread principal bloqueada é uma das principais causas do atraso de entrada. Os [Web workers](https://developer.mozilla.org/docs/Web/API/Worker) possibilitam a execução de JavaScript numa thread em segundo plano. Mover operações não relacionadas à interface do usuário para uma thread de trabalho separada pode reduzir o tempo de bloqueio da thread principal e, conseqüentemente, melhorar a FID.
+
+Considere o uso das seguintes bibliotecas para facilitar o uso de web workers em seu site:
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink) : uma biblioteca auxiliar que abstrai o `postMessage` e o torna mais fácil de usar
+- [Workway](https://github.com/WebReflection/workway) : Um exportador de web workers de propósito geral
+- [Workerize](https://github.com/developit/workerize) : Mova um módulo para um web worker
+
+{% Aside %} Para saber mais sobre como os web workers podem executar código fora da thread principal, consulte [Use Web Workers para executar JavaScript fora da thread principal do navegador](/off-main-thread/) . {% endAside %}
+
+### Reduza o tempo de execução do JavaScript {:#reduce-javascript-execution}
+
+Limitar a quantidade de JavaScript em sua página reduz a quantidade de tempo que o navegador precisa para executar o código JavaScript. Isto acelera a rapidez com que o navegador pode começar a responder a qualquer interação do usuário.
+
+Para reduzir a quantidade de JavaScript executado em sua página:
+
+- Adie o JavaScript não utilizado
+- Minimize polyfills não utilizados
+
+#### Adie o JavaScript não utilizado
+
+Por default, todo JavaScript bloqueia a renderização. Quando o navegador encontra uma tag de script que vincula a um arquivo JavaScript externo, ele deve pausar o que está fazendo e fazer o download, processar, compilar e executar esse JavaScript. Portanto, você só deve carregar o código necessário para a página ou para responder à entrada do usuário.
+
+A aba [Coverage](https://developer.chrome.com/docs/devtools/coverage/) no Chrome DevTools pode informar quanto JavaScript não está sendo usado na sua página da web.
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="A aba Coverage.", width="800", height="559" %}
+
+Para reduzir o JavaScript não utilizado:
+
+- Divida o código do seu pacote em vários pedaços
+- Adie qualquer JavaScript não crítico, incluindo scripts de terceiros, usando `async` ou `defer`
+
+**A divisão de código** é o conceito de dividir um único grande pacote JavaScript em pedaços menores que possam ser carregados condicionalmente (também conhecido como lazy-loading). [A maioria dos navegadores mais recentes suportam a sintaxe de importação dinâmica](https://caniuse.com/#feat=es6-module-dynamic-import), que permite baixar módulos sob demanda:
+
+```js
+import('module.js').then((module) => {
+  // Do something with the module.
+});
+```
+
+A importação dinâmica de JavaScript em certas interações do usuário (como alterar uma rota ou exibir um modal) garantirá que código que não é usado para o carregamento inicial da página seja baixado apenas quando necessário.
+
+Além do suporte geral do navegador, a sintaxe de importação dinâmica pode ser usada em diversos sistemas de build diferentes.
+
+- Se você usar [webpack](https://webpack.js.org/guides/code-splitting/) , [Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82) ou [Parcel](https://parceljs.org/code_splitting.html) como um empacotador de módulos, aproveite o suporte a importação dinâmica.
+- Frameworks lado-cliente, como [React](https://reactjs.org/docs/code-splitting.html#reactlazy) , [Angular](https://angular.io/guide/lazy-loading-ngmodules) e [Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) fornecem abstrações para facilitar o carregamento lazy no nível do componente.
+
+{% Aside %} Dê uma olhada em [Reduza payloads do JavaScript com divisão de código](/reduce-javascript-payloads-with-code-splitting/) para saber mais sobre divisão de código. {% endAside %}
+
+Além da divisão de código, sempre use [async ou defer](https://javascript.info/script-async-defer) para scripts que não são necessários para conteúdo crítico ou conteúdo acima da dobra.
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+A menos que haja um motivo específico para não fazê-lo, todos os scripts de terceiros devem ser carregados com `defer` ou `async` por default.
+
+#### Minimize polyfills não utilizados
+
+Se você cria seu código usando sintaxe JavaScript moderna e fizer referência a APIs de navegadores modernos, será necessário transpilá-lo e incluir polyfills para que funcione em navegadores mais antigos.
+
+Uma das principais preocupações de desempenho ao incluir polyfills e código transpilado em seu site é que os navegadores mais novos não devem fazer o download se não precisarem. Para reduzir o tamanho do JavaScript do seu aplicativo, minimize os polyfills não usados tanto quanto possível e restrinja seu uso aos ambientes onde são necessários.
+
+Para otimizar o uso de polyfills em seu site:
+
+- Se você usar o [Babel](https://babeljs.io/docs/en/index.html) como um transpilador, use [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) para incluir apenas os polyfills necessários para os navegadores que você planeja suportar. Para o Babel 7.9, ative a opção [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes) para reduzir ainda mais os polyfills desnecessários
+
+- Use o padrão module/nomodule para fornecer dois pacotes separados (`@babel/preset-env` também suporta isso via [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules))
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    Muitos recursos mais recentes do ECMAScript compilados com Babel já são suportados em ambientes que suportam módulos JavaScript. Assim, ao fazer isso, você simplifica o processo de garantir que apenas o código transpilado seja usado para navegadores que realmente precisam dele.
+
+{% Aside %} O guia [Servindo código moderno a navegadores modernos para um carregamento de página mais rápido](/serve-modern-code-to-modern-browsers/) apresente esse tópico em mais detalhes. {% endAside %}
+
+## Ferramentas de desenvolvimento
+
+Uma série de ferramentas estão disponíveis para medir e depurar a FID:
+
+- O [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) não inclui suporte para FID, já que é uma métrica de campo. No entanto, o [Total Blocking Time](/tbt/) (TBT) pode ser usado como proxy. As otimizações que melhoram a TBT também devem melhorar a FID em campo.
+
+    {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0.", width="800", height="309" %}
+
+- O [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/) fornece valores de FID do mundo real agregados no nível de origem
+
+*Com agradecimentos a Philip Walton, Kayce Basques, Ilya Grigorik e Annie Sullivan por suas avaliações.*
diff --git a/src/site/content/pt/blog/optimize-lcp/index.md b/src/site/content/pt/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..a3e28f97f0b
--- /dev/null
+++ b/src/site/content/pt/blog/optimize-lcp/index.md
@@ -0,0 +1,411 @@
+---
+title: Otimização da Largest Contentful Paint
+subhead: Como renderizar seu conteúdo principal mais rápido.
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2020-08-20
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: Otimize o banner LCP
+description: A métrica Largest Contentful Paint (LCP) pode ser usada para determinar quando o conteúdo principal da página terminou a renderização na tela. Aprenda como otimizar a LCP ao melhorar tempos de resposta lentos do servidor, tempos de carregamento de recursos e renderização no lado do cliente.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='1073' %}
+
+<blockquote>
+  <p>Não consigo ver nenhum conteúdo útil! Por que demora tanto para carregar? 😖</p>
+</blockquote>
+
+Um fator que contribui para uma experiência ruim do usuário é quanto tempo leva para um usuário ver qualquer conteúdo renderizado na tela. A métrica [First Contentful Paint](/fcp) - FCP (primeira renderização de conteúdo) mede quanto tempo leva para o conteúdo DOM inicial ser renderizado, mas não captura quanto tempo levou para o conteúdo maior (geralmente mais significativo) na página ser renderizado.
+
+[Largest Contentful Paint](/lcp) - LCP (maior renderização de conteúdo) é uma métrica [Core Web Vitals](/vitals/) e mede quando o maior elemento de conteúdo na janela de visualização se torna visível. Ela pode ser usada para determinar quando o conteúdo principal da página terminou de ser renderizado na tela.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="Bons valores de LCP são 2,5 segundos, valores baixos são maiores que 4,0 segundos e qualquer coisa entre precisa de melhorias", width="384", height="96" %}
+</picture>
+
+
+As causas mais comuns de uma LCP ruim são:
+
+- [Tempos de resposta lentos do servidor](#slow-servers)
+- [JavaScript e CSS que bloqueiam a renderização](#render-blocking-resources)
+- [Tempos lentos de carregamento de recursos](#slow-resource-load-times)
+- [Renderização do lado do cliente](#client-side-rendering)
+
+## Tempos de resposta lentos do servidor {: #slow-servers }
+
+Quanto mais tempo leva para um navegador receber conteúdo do servidor, mais tempo leva para processar qualquer coisa na tela. Um tempo de resposta mais rápido do servidor melhora diretamente cada métrica de carregamento de página, incluindo a LCP.
+
+Antes de mais nada, melhore como e onde seu servidor lida com seu conteúdo. Use a métrica [**Time to First Byte**](/ttfb/) - TTFB (tempo até o primeiro byte) para medir os tempos de resposta do servidor. Você pode melhorar sua TTFB de várias maneiras:
+
+- Otimizando seu servidor
+- Direcionando os usuários para um CDN próximo
+- Usando ativos de cache
+- Servindo páginas HTML usando cache-first
+- Estabelecendo conexões de terceiros antecipadamente
+- Usando trocas assinadas
+
+### Otimizando seu servidor
+
+Você está realizando consultas caras que levam um tempo significativo para que sejam concluídas pelo seu servidor? Ou existem outras operações complexas acontecendo no lado do servidor que atrasam o processo de retorno do conteúdo da página? Analisar e melhorar a eficiência do seu código do lado do servidor irá melhorar diretamente o tempo que leva para o navegador receber os dados.
+
+Em vez de apenas servir imediatamente uma página estática numa solicitação do navegador, muitos frameworks lado-servidor precisam criar a página web dinamicamente. Em outras palavras, em vez de apenas enviar um arquivo HTML completo que já está pronto quando o navegador o solicita, os frameworks precisam executar a lógica para construir a página. Isto pode ser devido a resultados pendentes de uma consulta de banco de dados ou até mesmo porque os componentes precisam ser transformados em marcação HTML por um framework de IU (como o [React](https://reactjs.org/docs/react-dom-server.html)). Muitos frameworks web que rodam no servidor possuem diretrizes de desempenho que você pode aplicar para acelerar esse processo.
+
+{% Aside %} Dê uma olhada em [Conserte um servidor sobrecarregado](/overloaded-server/) para mais dicas. {% endAside %}
+
+### Direcionando os usuários para um CDN próximo
+
+Uma Content Delivery Network (CDN) é uma rede de servidores distribuídos em diversos locais diferentes. Se o conteúdo da sua página da web estiver hospedado num único servidor, o carregamento do seu site será mais lento para os usuários que estão geograficamente mais distantes já que as solicitações do navegador precisam literalmente dar uma volta ao mundo. Considere usar um CDN para garantir que seus usuários nunca tenham que esperar por solicitações de rede realizadas em servidores distantes.
+
+### Usando ativos de cache
+
+Se o seu HTML é estático e não precisa ser alterado a cada solicitação, o armazenamento em cache pode evitar que ele seja recriado desnecessariamente. Ao armazenar uma cópia do HTML gerado no disco, um cache do lado do servidor poderá reduzir a TTFB e minimizar o uso de recursos.
+
+Há muitas alternativas diferentes de usar cache no servidor; a escolha depende do seu toolchain:
+
+- Configuração de proxies reversos ([Varnish](https://varnish-cache.org/), [nginx](https://www.nginx.com/)) para servir conteúdo em cache ou atuar como um servidor de cache quando instalado na frente de um servidor de aplicação
+- Configuração e gerenciamento do comportamento do cache do seu provedor de nuvem ([Firebase](https://firebase.google.com/docs/hosting/manage-cache), [AWS](https://aws.amazon.com/caching/), [Azure)](https://docs.microsoft.com/azure/architecture/best-practices/caching)
+- Uso de um CDN que forneça servidores de edge para que seu conteúdo seja armazenado em cache e fique mais perto de seus usuários
+
+### Servindo páginas HTML usando cache-first
+
+Quando instalado, um [service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) é executado em segundo plano do navegador e pode interceptar solicitações do servidor. Este nível de controle de cache programático permite armazenar em cache parte ou todo o conteúdo de uma página HTML e apenas atualizar o cache quando o conteúdo for alterado.
+
+O gráfico a seguir mostra como as distribuições de LCP foram reduzidas em um site usando este padrão:
+
+<figure>{% Img src="image/admin/uB0Sm56R88MRF16voQ1k.png", alt="Distribuições de Largest Contentful Paint antes e depois do uso de cache HTML", width="800", height="495" %} <figcaption> Distribuição de Largest Contentful Paint para carregamento de páginas com e sem service worker - <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a> </figcaption></figure>
+
+O gráfico mostra a distribuição de LCP de um único site nos últimos 28 dias, segmentado pelo estado do service worker. Observe como aumentou o número de carregamentos de página com LCP mais rápido depois que o serviço de páginas HTML usando a estratégia cache-first foi introduzida no service worker (parte azul do gráfico).
+
+{% Aside %} Para saber mais sobre as técnicas para veicular páginas HTML completas ou parciais usando cache-first, dê uma olhada em [Payloads HTML menores com Service Workers](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/) {% endAside %}
+
+### Estabelecendo conexões de terceiros antecipadamente
+
+As solicitações do servidor para origens de terceiros também podem afetar a LCP, especialmente se forem necessárias para exibir conteúdo crítico na página. Use `rel="preconnect"` para informar ao navegador que sua página pretende estabelecer uma conexão o mais rápido possível.
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+Você também pode usar `dns-prefetch` para resolver consultas DNS mais rapidamente.
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+Embora as duas dicas funcionem de maneira diferente, considere o uso de `dns-prefetch` como um substituto para navegadores que não oferecem suporte à `preconnect`.
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %} Saiba mais lendo [Estabeleça conexões de rede antecipadamente para melhorar a velocidade percebida da página](/preconnect-and-dns-prefetch/) {% endAside %}
+
+### Usando trocas assinadas (SXGs)
+
+As [trocas assinadas (Signed Exchanged - SXG)](/signed-exchanges) são um mecanismo de entrega que permite experiências mais rápidas do usuário ao fornecer conteúdo em um formato facilmente armazenável em cache. Especificamente, uma [Pesquisa Google](https://developers.google.com/search/docs/advanced/experience/signed-exchange) será armazenada em cache e, às vezes, fará uma busca antecipada de SXGs. Para sites que recebem uma grande parte de seu tráfego a partir das Pesquisas Google, os SXGs podem ser uma ferramenta importante para melhorar a LCP. Para mais informações, veja [Trocas Assinadas](/signed-exchanges).
+
+## JavaScript e CSS que bloqueiam a renderização {: #render-blocking-resources }
+
+Antes que um navegador possa renderizar qualquer conteúdo, ele precisa transformar a marcação HTML numa árvore DOM. O parser HTML irá pausar se encontrar alguma folha de estilo externa (`<link rel="stylesheet">`) ou tags JavaScript síncronas (`<script src="main.js">`).
+
+Scripts e folhas de estilo são recursos que realizam bloqueio da renderização, que por sua vez atrasam a FCP e, conseqüentemente, a LCP. Adie qualquer JavaScript e CSS que não seja crítico para acelerar o carregamento do conteúdo principal de sua página web.
+
+### Reduzindo o tempo de bloqueio de CSS
+
+Certifique-se de que apenas a quantidade mínima de CSS necessária esteja bloqueando a renderização em seu site aplicando os procedimentos a seguir:
+
+- Minificação de CSS
+- Adiando o CSS que não for crítico
+- Embutindo na página o CSS crítico
+
+### Minificação de CSS
+
+Para facilitar a legibilidade, os arquivos CSS podem conter caracteres como espaçamento, indentação ou comentários. Todos esses caracteres são desnecessários para o navegador e minimizar esses arquivos garantirá que eles sejam removidos. Em última análise, reduzir a quantidade de CSS de bloqueio sempre melhorará o tempo que leva para renderizar totalmente o conteúdo principal da página (LCP).
+
+Se você usar um empacotador de módulos ou ferramenta de build, inclua um plug-in apropriado para minificar os arquivos CSS em cada build:
+
+- Para webpack: [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
+- Para Gulp: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
+- Para Rollup: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+
+<figure>
+  {% Img
+    src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png",
+    alt="Exemplo de melhoria de LCP: antes e depois de minificar CSS",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Exemplo de melhoria de LCP: antes e depois de minificar CSS
+  </figcaption>
+</figure>
+
+{% Aside %} Para mais detalhes, consulte o guia [Minificação de CSS.](/minify-css/) {% endAside %}
+
+### Adiando o CSS que não for crítico
+
+Use a aba [Coverage](https://developer.chrome.com/docs/devtools/coverage/) no Chrome DevTools para localizar qualquer CSS não utilizado em sua página web.
+
+{% Img src="image/admin/wjS4NrU5EsJeCuvK0zhn.png", alt="Aba Coverage no Chrome DevTools", width="800", height="559" %}
+
+Para otimizar:
+
+- Remova qualquer CSS não utilizado inteiramente ou mova-o para outra folha de estilo, se usado em uma página separada do seu site.
+- Para qualquer CSS não necessário para renderização inicial, use [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) para carregar arquivos de forma assíncrona, o que alavanca `rel="preload"` e `onload`.
+
+```html
+<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
+```
+
+<figure>{% Img src="image/admin/2fcwrkXQRQrM8w1qyy3P.png", alt="Exemplo de melhoria da LCP: antes e depois de adiar CSS não crítico", width="800", height="139" %} <figcaption> Exemplo de melhoria da LCP: antes e depois de adiar CSS não crítico </figcaption></figure>
+
+{% Aside %} Para mais detalhes, consulte o guia [Adiamento de CSS não crítico.](/defer-non-critical-css/) {% endAside %}
+
+### Embutindo na página o CSS crítico
+
+Embuta qualquer CSS essencial que é usado para conteúdo acima da dobra incluindo-o diretamente no `<head>`.
+
+<figure>
+  {% Img
+    src="image/admin/m0n0JsLpH9JsNnXywSwz.png",
+    alt="Critical CSS inlined",
+    width="800", height="325"
+  %}
+  <figcaption>CSS crítico embutido</figcaption>
+</figure>
+
+Embutir estilos importantes elimina a necessidade de fazer uma solicitação de ida e volta para buscar CSS crítico. Adiar o restante minimiza o tempo de bloqueio do CSS.
+
+Se você não pode adicionar manualmente estilos embutidos ao seu site, use uma biblioteca para automatizar o processo. Alguns exemplos:
+
+- [Critical](https://github.com/addyosmani/critical) , [CriticalCSS](https://github.com/filamentgroup/criticalCSS) e [Penthouse](https://github.com/pocketjoso/penthouse) são pacotes que extraem e embutem CSS acima da dobra
+- [Critters](https://github.com/GoogleChromeLabs/critters) é um plugin webpack que embute CSS crítico e carrega o resto de forma lazy
+
+<figure>
+  {% Img
+    src="image/admin/L8sc51bd3ckxwnUfczC4.png",
+    alt="Exemplo de melhoria da LCP: antes e depois de embutir CSS crítico",
+    width="800",
+    height="175"
+  %}
+  <figcaption>
+    Exemplo de melhoria da LCP: antes e depois de embutir CSS crítico
+  </figcaption>
+</figure>
+
+{% Aside %} Dê uma olhada no guia [Extração de CSS crítico](/extract-critical-css/) para saber mais. {% endAside %}
+
+### Reduzindo o tempo de bloqueio de JavaScript
+
+Baixe e forneça a quantidade mínima de JavaScript necessária aos usuários. Reduzir a quantidade de JavaScript bloqueante resulta numa renderização mais rápida e, conseqüentemente, numa LCP melhor.
+
+Isto pode ser feito otimizando seus scripts de maneiras diferentes:
+
+- [Minificando e comprimindo arquivos JavaScript](/reduce-network-payloads-using-text-compression/)
+- [Adiando JavaScript não utilizado](/reduce-javascript-payloads-with-code-splitting/)
+- [Minimizando polyfills não usados](/serve-modern-code-to-modern-browsers/)
+
+{% Aside %} O guia [Otimize a First Input Delay](/optimize-fid/) explora todas as técnicas necessárias para reduzir o tempo de bloqueio do JavaScript em mais detalhes. {% endAside %}
+
+## Tempos de carregamento de recursos lentos {: #slow-resource-load-times }
+
+Embora um aumento no tempo de bloqueio do CSS ou JavaScript resulte diretamente em pior desempenho, o tempo que leva para carregar vários outros tipos de recursos também pode afetar os tempos de renderização. Os tipos de elementos que afetam a LCP são:
+
+- Elementos `<img>`
+- `<image>` dentro de um elemento `<svg>`
+- `<video>` (a imagem [poster](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster) é usada para medir a LCP)
+- Um elemento com uma imagem de plano de fundo carregada por meio da [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (em oposição a um gradiente CSS)
+- [Elementos de nível de bloco](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements) contendo nós de texto ou outros elementos de texto inline
+
+O tempo que leva para carregar esses elementos, se renderizados acima da dobra, terá um efeito direto na LCP. Seguem algumas técnicas para garantir que esses arquivos sejam carregados o mais rápido possível:
+
+- Otimização e compressão de imagens
+- Pré-carregamento de recursos importantes
+- Compactação de arquivos de texto
+- Entrega de diferentes ativos com base na conexão de rede (serviço adaptável)
+- Ativos de cache usando um service worker
+
+### Otimização e compressão de imagens
+
+Para muitos sites, as imagens são o maior elemento visualizado quando a página termina de carregar. Imagens de herói, carrosséis grandes ou imagens de banner são exemplos comuns.
+
+<figure>
+  {% Img
+    src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png",
+    alt="",
+    width="459",
+    height="925"
+  %}
+  <figcaption>Imagem como o maior elemento da página: <a href="https://design.google/">design.google</a></figcaption>
+</figure>
+
+Melhorar o tempo que leva para carregar e renderizar esses tipos de imagens irá acelerar diretamente a LCP. Para isto:
+
+- Considere a possibilidade de não usar uma imagem. Se não for relevante para o conteúdo, remova-a.
+- Comprima imagens (com [Imagemin](/use-imagemin-to-compress-images) por exemplo)
+- Converta imagens em formatos mais recentes (JPEG 2000, JPEG XR ou WebP)
+- Use imagens responsivas
+- Considere usar um CDN de imagens
+
+{% Aside %} Dê uma olhada em [Otimize suas imagens](/fast/#optimize-your-images) para guias e recursos que explicam todas essas técnicas em detalhes. {% endAside %}
+
+### Pré-carregamento de recursos importantes
+
+Às vezes, recursos importantes que são declarados ou usados num determinado arquivo CSS ou JavaScript podem ser baixados mais tarde do que você gostaria, como uma fonte escondida num dos muitos arquivos CSS de uma aplicação.
+
+Se você sabe que um determinado recurso deve ser priorizado, use `<link rel="preload">` para baixá-lo mais cedo. [Muitos tipos de recursos](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded) podem ser pré-carregados, mas primeiro você deve se concentrar no [pré-carregamento de ativos essenciais](/preload-critical-assets/), como fontes, imagens ou vídeos acima da dobra e CSS ou JavaScript de importância crítica.
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+Desde o Chrome 73, o pré-carregamento pode ser usado junto com [imagens responsivas](/preload-responsive-images/) para combinar os dois padrões e obter um carregamento muito mais rápido da imagem.
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### Compactação de arquivos de texto
+
+Algoritmos de compactação, como [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) e [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html), podem reduzir significativamente o tamanho dos arquivos de texto (HTML, CSS, JavaScript) à medida que são transferidos entre o servidor e o navegador. Gzip é efetivamente suportado em todos os navegadores e Brotli, que garante resultados de compressão ainda melhores, [pode ser usado em quase todos os navegadores mais recentes](https://caniuse.com/#feat=brotli).
+
+Comprimir seus recursos minimizará seu tamanho de entrega, melhorando o tempo de carregamento e consequentemente a LCP.
+
+1. Primeiro, verifique se o seu servidor já compacta os arquivos automaticamente. A maioria das plataformas de hospedagem, CDNs e servidores proxy reverso já faz compactação por default ou permite que você os configure facilmente para isto.
+2. Se você precisar modificar seu servidor para compactar arquivos, considere o uso de Brotli em vez de gzip, pois ele pode fornecer melhores taxas de compactação.
+3. Depois de escolher um algoritmo de compactação para usar, compacte os ativos durante o processo de build, em vez de durante o processo em que eles são solicitados pelo navegador. Isto minimiza a sobrecarga do servidor e evita atrasos quando as solicitações forem feitas, especialmente quando estiver usando altas taxas de compactação.
+
+<figure>
+  {% Img
+    src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png",
+    alt="Exemplo de melhoria de LCP: antes e depois da compressão Brotli",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Exemplo de melhoria de LCP: antes e depois da compressão Brotli
+  </figcaption>
+</figure>
+
+{% Aside %} Para mais detalhes, consulte o guia [Minificação e compactação de payloads de rede.](/reduce-network-payloads-using-text-compression/) {% endAside %}
+
+### Serviço adaptável
+
+Ao carregar recursos que constituem o conteúdo principal de uma página, pode ser eficaz buscar condicionalmente diferentes ativos, dependendo do dispositivo do usuário ou das condições da rede. Isto pode ser feito usando as APIs [Network Information](https://wicg.github.io/netinfo/), [Device Memory](https://www.w3.org/TR/device-memory/) e  [HardwareConcurrency](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency).
+
+Se você tiver grandes ativos que são críticos para a renderização inicial, você pode usar diferentes variações do mesmo recurso, dependendo da conexão ou dispositivo do usuário. Por exemplo, você pode exibir uma imagem em vez de um vídeo para qualquer velocidade de conexão inferior a 4G:
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // Load video
+  } else {
+    // Load image
+  }
+}
+```
+
+Uma lista de propriedades úteis que você pode usar:
+
+- `navigator.connection.effectiveType`: tipo de conexão efetiva
+- `navigator.connection.saveData`: salvamento de dados ativado/desativado
+- `navigator.hardwareConcurrency`: contagem de núcleos de CPU
+- `navigator.deviceMemory` : memória do dispositivo
+
+{% Aside %} Para mais informações, consulte o guia [Serviço adaptável com base na qualidade da rede](/adaptive-serving-based-on-network-quality/). {% endAside %}
+
+### Ativos de cache usando um service worker
+
+Os service workers podem ser usados para muitas tarefas úteis, incluindo a entrega de respostas HTML menores, conforme mencionado anteriormente neste artigo. Eles também podem ser usados para armazenar em cache qualquer recurso estático que possa ser servido ao navegador em vez de ser transferido pela rede em solicitações repetidas.
+
+O pré-cache de recursos críticos usando um service worker pode reduzir seus tempos de carregamento significativamente, especialmente para usuários que recarregam a página web com uma conexão mais fraca (ou mesmo a acessam offline). Bibliotecas como a [Workbox](https://developer.chrome.com/docs/workbox/) podem deixar o processo de atualização de ativos pré-armazenados mais fácil do que escrever um service worker personalizado para lidar com isso você mesmo.
+
+{% Aside %} Dê uma olhada em [Confiabilidade da rede](/reliable/) para aprender mais sobre service workers e o Workbox. {% endAside %}
+
+## Renderização lado-cliente {: #client-side-rendering }
+
+Muitos sites usam lógica JavaScript do lado do cliente para renderizar páginas diretamente no navegador. Frameworks e bibliotecas, como [React](https://reactjs.org/), [Angular](https://angular.io/) e [Vue](https://vuejs.org/), facilitaram a construção de aplicações de página única (SLA) que lidam com diferentes facetas de uma página web inteiramente no cliente, e não no servidor.
+
+Se você estiver construindo um site que é renderizado principalmente no cliente, deve ser cauteloso quanto ao efeito que isto pode ter na LCP se for usado um grande pacote JavaScript. Se não houver otimizações para evitá-lo, os usuários poderão não conseguir ver ou interagir com o conteúdo da página até que todo o JavaScript crítico tenha terminado de baixar e tenha executado.
+
+Ao construir um site renderizado do lado do cliente, considere a realização das seguintes otimizações:
+
+- Minimizar o JavaScript crítico
+- Usar renderização lado-servidor
+- Usar pré-renderização
+
+### Minimizar o JavaScript crítico
+
+Se o conteúdo do seu site só se torna visível ou permite interações depois que uma certa quantidade de JavaScript é baixada, torna-se ainda mais importante reduzir o tamanho do seu pacote o máximo possível. Isto pode ser feito através das seguintes estratégias:
+
+- Minificando JavaScript
+- Adiando JavaScript não utilizado
+- Minimizando polyfills não usados
+
+Volte para a seção [Redução do tempo de bloqueio do JavaScript](#reduce-javascript-blocking-time) para ler mais sobre essas otimizações.
+
+### Usar renderização lado-servidor
+
+Minimizar a quantidade de JavaScript deve sempre ser a primeira coisa a se concentrar para sites que são principalmente renderizados pelo cliente. No entanto, você também deve considerar a combinação de uma experiência de renderização no servidor para melhorar a LCP tanto quanto for possível.
+
+Esse conceito funciona usando o servidor para renderizar o aplicativo em HTML, onde o cliente depois "[hidrata](https://www.gatsbyjs.org/docs/react-hydration/)" todo o JavaScript e os dados necessários no mesmo conteúdo DOM. Isto pode melhorar a LCP, garantindo que o conteúdo principal da página seja renderizado primeiro no servidor, e não apenas no cliente, mas existem algumas desvantagens:
+
+- Manter o mesmo aplicativo renderizado por JavaScript no servidor e no cliente pode aumentar a sua complexidade.
+- Executar JavaScript para renderizar um arquivo HTML no servidor sempre aumentará os tempos de resposta do servidor (TTFB) em comparação com apenas servir páginas estáticas do servidor.
+- Uma página renderizada pelo servidor pode parecer que é capaz de interagir, mas não será capaz de responder a nenhuma entrada do usuário até que todo o JavaScript do lado do cliente tenha sido executado. Resumindo, isto pode piorar a métrica [**Time to Interactive**](/tti/) (TTI).
+
+### Usar pré-renderização
+
+A pré-renderização é uma técnica separada que é menos complexa do que a renderização do lado do servidor e também fornece uma maneira de melhorar a LCP na sua aplicação. Um navegador sem cabeça (headless), que é um navegador sem interface de usuário, é usado para gerar arquivos HTML estáticos de cada rota durante o tempo de build. Esses arquivos podem ser enviados junto com os pacotes JavaScript necessários para a aplicação.
+
+Com a pré-renderização, a TTI ainda é impactada negativamente, mas os tempos de resposta do servidor não são tão afetados como seriam com uma solução de renderização lado-servidor que renderiza dinamicamente cada página somente depois de solicitada.
+
+<figure>
+  {% Img
+    src="image/admin/sm9s16UHfh8a5MDEWjxa.png",
+    alt="Exemplo de melhoria de LCP: antes e depois da pré-renderização",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Exemplo de melhoria de LCP: antes e depois da pré-renderização
+  </figcaption>
+</figure>
+
+{% Aside %} Para um mergulho mais profundo em diferentes arquiteturas de renderização de servidor, dê uma olhada em [Renderização na web](/rendering-on-the-web/). {% endAside %}
+
+## Ferramentas de desenvolvimento
+
+Uma série de ferramentas estão disponíveis para medir e depurar LCP:
+
+- O [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) inclui suporte para medição de LCP em ambiente de laboratório.
+
+    {% Img src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg", alt="Lighthouse 6.0", width="800", height="309" %}
+
+- A seção de **intervalos** do painel [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) no Chrome DevTools inclui um marcador de LCP e mostra qual elemento está associado com a LCP quando você passar o mouse sobre o campo **Related Node**.
+
+    {% Img src="image/admin/sxczQPKH0cvMBsNCx5uH.png", alt="LCP no Chrome DevTools", width="800", height="509" %}
+
+- O [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/) fornece valores de LCP do mundo real agregados no nível de origem
+
+*Com agradecimentos a Philip Walton, Katie Hempenius, Kayce Basques e Ilya Grigorik por suas análises.*
diff --git a/src/site/content/pt/blog/optimize-vitals-lighthouse/index.md b/src/site/content/pt/blog/optimize-vitals-lighthouse/index.md
new file mode 100644
index 00000000000..86ea0c87752
--- /dev/null
+++ b/src/site/content/pt/blog/optimize-vitals-lighthouse/index.md
@@ -0,0 +1,198 @@
+---
+layout: post
+title: Otimizando Web Vitals usando o Lighthouse
+subhead: Encontrando oportunidades para melhorar a experiência do usuário com as ferramentas da web do Chrome.
+authors:
+  - addyosmani
+description: |2
+
+  Hoje, abordaremos novos recursos de ferramentas no Lighthouse, PageSpeed e DevTools para ajudar a identificar como seu site pode melhorar no Web Vitals.
+date: 2021-05-11
+hero: image/1L2RBhCLSnXjCnSlevaDjy3vba73/6GPqQDYxZnVq8qF6DJ02.jpeg
+alt: Um farol iluminando o mar
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Hoje, abordaremos novos recursos de ferramentas no Lighthouse, PageSpeed e DevTools para ajudar a identificar como seu site pode melhorar no [Web Vitals](/vitals) .
+
+Para relembrar as ferramentas, o [Lighthouse](https://github.com/GoogleChrome/lighthouse) é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da web. Você pode encontrá-lo no pacote [Chrome DevTools](https://developer.chrome.com/docs/devtools/) de ferramentas de depuração e executá-lo em qualquer página da web, pública ou que exija autenticação. Você também pode encontrar o Lighthouse em [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstore.google.com) , [CI](https://github.com/GoogleChrome/lighthouse-ci) e [WebPageTest](https://www.webpagetest.org/easy) .
+
+O Lighthouse 7.x inclui novos recursos, como capturas de tela do elemento, para facilitar a inspeção visual de partes de sua IU que afetam as métricas de experiência do usuário (por exemplo, quais nós estão contribuindo para a mudança de layout).
+
+<figure><video muted autoplay loop><source type="video/mp4" src="https://storage.googleapis.com/web-dev-uploads/video/1L2RBhCLSnXjCnSlevaDjy3vba73/3G0x4Z1dmOcsusG7j1LE.mp4" width="1920" height="1080"></source></video></figure>
+
+Também fornecemos suporte para capturas de tela de elemento no PageSpeed Insights, permitindo uma maneira de identificar problemas com mais facilidade para execuções únicas de desempenho de páginas.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/mfkWFzyfO9XlJLYS80DE.png", alt = "Capturas de tela do elemento destacando o nó DOM contribuindo para a mudança de layout na página", width="800", height="483" %}</figure>
+
+## Medição das Core Web Vitals
+
+O Lighthouse pode medir [sinteticamente](/vitals-measurement-getting-started/#measuring-web-vitals-using-lab-data) as [métricas do Core Web Vitals,](/vitals/) incluindo [Largest Contentful Paint (LCP), ou Maior Renderização de Conteúdo](/lcp/), [Cumulative Layout Shift (CLS), ou Mudança Cumulativa de Layout](/cls/) e [Total Blocking Time (TBT), ou Tempo Total de Bloqueio](/tbt/) (um proxy de laboratório para o [First Input Delay (FID), ou Atraso da Primeira Entrada](/fid/) ). Essas métricas refletem o carregamento, a estabilidade do layout e a prontidão da interação. Outras métricas, como o [First Contentful Paint (FCP), ou Primeira Renderização de Conteúdo](/fcp/) destacado no [futuro do Core Web Vitals (CWV)](https://developer.chrome.com/devsummit/sessions/future-of-core-web-vitals/), também estão lá.
+
+A seção "Métricas" do relatório Lighthouse inclui versões de laboratório dessas métricas. Você pode usar isso como uma visão resumida de quais aspectos da experiência do usuário requerem sua atenção.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/VkLhdNb3fxtfttFZ1S6E.png", alt = "Métricas de desempenho do Lighthouse", width = "800", height = "485"%}</figure>
+
+{% Aside %} O Lighthouse se concentra em medir a experiência do usuário durante o carregamento da página inicial em um ambiente de laboratório, emulando um telefone lento ou computador desktop. Se houver algum comportamento em sua página que possa causar mudanças de layout ou longas tarefas de JavaScript após o carregamento da página, as métricas do laboratório não refletirão isso. Experimente o painel DevTools Performance, o [Search Console](https://search.google.com/search-console/about) , a [extensão Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en) ou [RUM](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data) para uma visualização pós-carregamento das métricas. {% endAside %}
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/PLMoiQpi12jT7BJUvlOJ.png", alt = "trilha Web Vitals no painel performance do devtools", width = "800", height = "476"%}<figcaption> A nova opção Web Vitals no painel DevTools Performance exibe uma trilha que destaca os momentos métricos, como Layout Shift (LS) mostrado acima.</figcaption></figure>
+
+[As métricas de campo](/vitals-field-measurement-best-practices/) , como as encontradas no [Chrome UX Report](https://developer.chrome.com/docs/crux/) ou [RUM](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic) , não têm essa limitação e são um complemento valioso para os dados de laboratório, pois refletem a experiência dos usuários reais. Os dados de campo não podem oferecer os tipos de informações de diagnóstico que você obtém no laboratório, então os dois andam de mãos dadas.
+
+## Identifique onde você pode melhorar no Web Vitals
+
+### Identifique o elemento Largest Contentful Paint
+
+LCP é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página quando o conteúdo principal - ou "maior" - foi carregado e está visível para o usuário.
+
+O Lighthouse tem uma auditoria de "elemento Largest Contentful Paint" que identifica qual elemento tinha a maior renderização de conteúdo. Passe o mouse sobre o elemento para destacá-lo na janela principal do navegador.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/qeNJwYAVxysRV0okWmf4.png", alt = "elemento Largest Contentful Paint", width="800", height="505" %}</figure>
+
+Se este elemento for uma imagem, esta informação é uma dica útil de que você pode querer otimizar o carregamento desta imagem. O Lighthouse inclui várias auditorias de otimização de imagem para ajudá-lo a entender se suas imagens poderiam ser melhor compactadas, redimensionadas ou entregues em um formato de imagem moderno mais ideal.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/8RVIyj6NiMfx7VDVbQmI.png", alt = "Auditoria do tamanho adequado de imagens", width="800", height="468" %}</figure>
+
+Você também pode achar [LCP Bookmarklet](https://gist.github.com/anniesullie/cf2982342337fd1b2be95c2d5fe5ea06) de Annie Sullivan útil para identificar rapidamente o elemento LCP com um retângulo vermelho com apenas um clique.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/eZJdYsdfsNniDW1KRJkE.png", alt = "Destacando o elemento LCP com um bookmarklet", width = "800", height = "509"%}</figure>
+
+### Pré-carregar imagens descobertas recentemente para melhorar o LCP
+
+Para melhorar o LCP, [pré-carregue](/preload-responsive-images/) suas imagens críticas de herói se elas estão sendo descobertas tardiamente pelo navegador. Uma descoberta tardia pode acontecer se um pacote JavaScript precisar ser carregado antes que a imagem seja detectável.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/K9EPBZdSFoyXVDHoDjTx.png", alt = "Pré-carregue a imagem LCP", width = "800", height = "489"%}</figure>
+
+{% Aside %} O **pré-carregamento deve ser usado com moderação** . A largura de banda inicial da rede é um recurso escasso e o uso da pré-carga pode custar outro recurso. Para usar o pré-carregamento com eficácia, certifique-se de que os recursos estão sendo ordenados corretamente para evitar a regressão de outras métricas quando outros recursos na página também são considerados importantes (por exemplo, CSS, JS, fontes críticas). O [custo da pré-carga](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/edit) cobre isso com mais detalhes. {% endAside %}
+
+O Lighthouse 6.5 e superior agora sugere oportunidades para aplicar essa otimização.
+
+Existem algumas perguntas comuns que nos fazem sobre o pré-carregamento de imagens LCP que também podem valer a pena abordar brevemente.
+
+Você pode pré-carregar imagens responsivas? [Sim](/preload-responsive-images/#imagesrcset-and-imagesizes). Digamos que temos uma imagem de herói responsiva conforme especificado usando `srcset` e `sizes` abaixo:
+
+```html
+<img src="lighthouse.jpg"
+          srcset="lighthouse_400px.jpg 400w,
+                  lighthouse_800px.jpg 800w,
+                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
+Lighthouse">
+```
+
+Graças aos atributos `imagesrcset` e `imagesizes` adicionados ao atributo `link`, podemos pré-carregar uma imagem responsiva usando a mesma lógica de seleção de imagem usada por `srcset` e `sizes`:
+
+```html
+<link rel="preload" as="image" href="lighthouse.jpg"
+           imagesrcset="lighthouse_400px.jpg 400w,
+                        lighthouse_800px.jpg 800w,
+                        lighthouse_1600px.jpg 1600w"
+imagesizes="50vw">
+```
+
+A auditoria também destacará as oportunidades de pré-carregamento se a imagem LCP for definida por meio de um plano de fundo CSS? Sim.
+
+Qualquer imagem sinalizada como a imagem LCP, seja por meio de CSS de fundo ou `<img>` é uma candidata se for descoberta na fase três ou superior no modelo de cascata.
+
+### Identifique as contribuições do CLS
+
+Cumulative Layout Shift (CLS) é uma medida de estabilidade visual. Ela quantifica quanto o conteúdo de uma página muda visualmente. O Lighthouse tem uma auditoria para depurar CLS chamada "Evite grandes mudanças de layout".
+
+Esta auditoria destaca os elementos DOM que mais contribuem para as mudanças da página. Na coluna Elemento à esquerda, você verá a lista desses elementos DOM e, à direita, sua contribuição geral para o CLS.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/X31lkLFtfjDZdO2O7ytV.png", alt = "Evite a auditoria de grandes mudanças de layout no Lighthouse destacando os nós DOM relevantes que contribuem para o CLS", width = "800", height = "525"%}</figure>
+
+Graças ao novo recurso de Capturas de tela de Elementos do Lighthouse, podemos ter uma pré-visualização dos principais elementos observados na auditoria, bem como clicar para ampliar para uma visão mais clara:
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/L9geZVvkATRlAVcZA6dx.png", alt = "Clicar em uma captura de tela de Elemento irá expandi-la", width = "800", height = "525"%}</figure>
+
+Para o CLS pós-carregamento, pode haver valor em visualizar *persistentemente*, com retângulos, quais elementos contribuíram mais para o CLS. Este é um recurso que você encontrará em ferramentas de terceiros, como o [Core Web Vitals dashboard](https://speedcurve.com/blog/web-vitals-user-experience/) da SpeedCurve e o que eu adoro usar: [Defaced's Layout Shift GIF Generator](https://defaced.dev/tools/layout-shift-gif-generator/)
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/ju6XjKBYzF6G537myjUW.gif", alt = "o  layout shift generator destacando mudanças", width="800", height="450" %}</figure>
+
+Para uma visão de todos os problemas de mudança de layout do site, aproveito bastante o [Search Console's Core Web Vitals report](https://support.google.com/webmasters/answer/9205520?hl=en). Isso me permite ver os tipos de páginas em meu site com um alto CLS (neste caso, ajudando-me a identificar em quais modelos parciais preciso gastar meu tempo):
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/2Ihb2GYkbpGzYLYoZEDP.png", alt = "Search Console exibindo problemas CLS", width = "800", height = "506"%}</figure>
+
+{% Aside %} Para reduzir as mudanças de layout causadas por Web Fonts, fique de olho no novo descritor de [ajuste de tamanho](https://groups.google.com/a/chromium.org/g/blink-dev/c/1PVr94hZHjU/m/J0xT8-rlAQAJ) `@font-face` . É possível ajustar o tamanho das fontes substitutas para reduzir o CLS. {% endAside %}
+
+### Identificar CLS a partir de imagens sem dimensões
+
+Para [limitar](/optimize-cls/#images-without-dimensions) o Cumulative Layout Shift causado por imagens sem dimensões, inclua os atributos de largura e altura em suas imagens e elementos de vídeo. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem está sendo carregada.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/fZRkmM18rvfy6y7LB1Qx.png", alt = "Auditoria para elementos de imagem sem largura e altura explícitas", width = "800", height = "489"%}</figure>
+
+Consulte [Definir a altura e a largura nas imagens é importante novamente](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) para um bom artigo sobre a importância de se pensar nas dimensões e proporção da imagem.
+
+### Identificar CLS de anúncios
+
+[O Publisher Ads for Lighthouse](https://developers.google.com/publisher-ads-audits) permite que você encontre oportunidades para melhorar a experiência de carregamento de anúncios em sua página, incluindo contribuições para mudança de layout e tarefas longas que podem atrasar o uso de sua página pelos usuários. No Lighthouse, você pode habilitar isso por meio dos Plug-ins da Comunidade.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/kR3jgctso6Hg0OxD8xwi.png", alt = "Auditorias relacionadas a anúncios destacando oportunidades para reduzir o tempo de solicitação e mudança de layout", width = "800", height = "527"%}</figure>
+
+Lembre-se de que os anúncios são um dos [maiores](/optimize-cls/#ads-embeds-and-iframes-without-dimensions) contribuintes para as mudanças de layout na web. É importante:
+
+- Tomar cuidado ao posicionar anúncios não fixos próximos à parte superior da janela de visualização
+- Eliminar as mudanças reservando o maior tamanho possível para o local do anúncio
+
+### Evite animações não compostas
+
+As animações que não são compostas podem se apresentar com baixa qualidade em dispositivos de baixo custo se tarefas pesadas de JavaScript estão mantendo o thread principal ocupado. Essas animações podem introduzir mudanças de layout.
+
+Se o Chrome descobrir que uma animação não pode ser composta, ele a reporta a uma leitura do Lighthouse DevTools, permitindo listar quais elementos com animações não foram compostos e por qual motivo. Você pode encontrá-los na auditoria [Evitar animações não compostas.](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/heGuYXKeMrUftMvfrDU7.png", alt = "Auditoria para evitar animações não compostas", width = "800", height = "528"%}</figure>
+
+### Depurar First Input Delay / Total Blocking Time / Tarefas longas
+
+A Primeira entrada mede o tempo desde quando um usuário interage pela primeira vez com uma página (por exemplo, quando ele clica em um link, toca em um botão ou usa um controle personalizado baseado em JavaScript) até o momento em que o navegador é realmente capaz de começar a processar os manipuladores de evento em resposta a essa interação. Tarefas JavaScript longas podem impactar esta métrica e o proxy para esta métrica, Total Blocking Time.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/LqBCtAXdByd4fBzoNc1K.png", alt = "Auditoria para evitar longas tarefas no thread principal", width = "800", height = "485"%}</figure>
+
+O Lighthouse inclui uma auditoria para [Evitar tarefas longas do thread principal](/long-tasks-devtools/), que lista as tarefas mais longas do thread principal. Isso pode ser útil para identificar os piores contribuintes para o atraso de entrada. Na coluna da esquerda, podemos ver a URL dos scripts responsáveis por longas tarefas do thread principal.
+
+À direita podemos ver a duração dessas tarefas. Como um lembrete, Tarefas Longas são tarefas executadas por mais de 50 milissegundos. Isso é considerado para bloquear o thread principal por tempo suficiente para impactar a taxa de quadros ou latência de entrada.
+
+Se estiver considerando serviços de terceiros para monitoramento, também gosto bastante do visual da [linha do tempo de execução do thread principal](https://calibreapp.com/docs/features/main-thread-execution-timeline) que o Caliber tem para visualizar esses custos, que destaca as tarefas pai e filho contribuindo para tarefas longas que afetam a interatividade.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/IGENqHBjC97pHslOQYc6.png", alt = "O visual da linha de tempo de execução do thread principal do Calibre", width = "800", height = "155"%}</figure>
+
+### Bloqueie solicitações de rede para ver o impacto antes/depois no Lighthouse
+
+O Chrome DevTools suporta o [bloqueio de solicitações de rede](https://developer.chrome.com/docs/devtools/network/#block) para ver o impacto de recursos individuais sendo removidos ou indisponíveis. Isso pode ser útil para entender o custo de scripts individuais (por exemplo, como incorporadores ou rastreadores de terceiros) em métricas como Total Blocking Time (TBT) e Time to Interactive.
+
+O bloqueio de solicitação de rede também funciona com o Lighthouse! Vamos dar uma olhada rápida no relatório do Lighthouse para um site. A pontuação de desempenho é de 63/100 com um TBT de 400 ms. Explorando o código, descobrimos que este site carrega um Intersection Observer polyfill no Chrome que não é necessário. Vamos bloquear!
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/DPXEXhOZL0Czjm10lBox.png", alt = "Bloqueio de solicitação de rede", width="800", height="508" %}</figure>
+
+Podemos clicar com o botão direito em um script no painel DevTools Network e clicar em `Block Request URL` para bloqueá-lo. Aqui, faremos isso para o Intersection Observer polyfill.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/iWB0jAtL0PKpwkmecOPf.png", alt = "Bloquear solicitação de URLs em DevTools", width = "800", height = "354"%}</figure>
+
+Em seguida, podemos executar o Lighthouse novamente. Desta vez, podemos ver que nossa pontuação de desempenho melhorou (70/100), assim como o Total Blocking Time (400ms =&gt; 300ms).
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/LiaMMxvy4prpFBIuSgfo.png", alt = "A visão posterior do bloqueio de solicitações de rede dispendiosas", width = "800", height = "508"%}</figure>
+
+### Substitua as dispendiosas incorporações de terceiros por uma fachada
+
+É comum usar recursos de terceiros para incorporar vídeos, postagens de mídia social ou widgets em páginas. Por padrão, a maioria das incorporações carrega rapidamente e pode vir com cargas caras que impactam negativamente a experiência do usuário. Isso é um desperdício se o terceiro não for crítico (por exemplo, se o usuário precisar rolar antes de vê-lo).
+
+Um padrão para melhorar o desempenho de tais widgets é [carregá-los lentamente na interação do usuário](https://addyosmani.com/blog/import-on-interaction/). Isso pode ser feito renderizando uma visualização leve do widget (uma fachada) e apenas carregar a versão completa se um usuário interagir com ela. O Lighthouse tem uma auditoria que recomendará recursos de terceiros que podem ser [carregados lentamente com uma fachada](https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/), como incorporações de vídeo do YouTube.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/iciXy3oVlPH7VuwN7toy.png", alt = "Auditoria destacando que alguns recursos caros de terceiros podem ser substituídos", width = "800", height = "483"%}</figure>
+
+Como um lembrete, o Lighthouse [destacará o código de terceiros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/) que bloqueia o thread principal por mais de 250ms. Isso pode revelar todos os tipos de scripts de terceiros (incluindo aqueles criados pelo Google) que podem valer a pena adiar ou carregar lentamente se o que eles renderizam exigir rolagem para visualizá-lo.
+
+<figure>{% Img src = "image/1L2RBhCLSnXjCnSlevaDjy3vba73/K0Oxmu1XEN2P3NQIknyH.png", alt = "Reduza o custo da auditoria de JavaScript de terceiros", width = "800", height = "556"%}</figure>
+
+### Além do Core Web Vitals
+
+Além de destacar o Core Web Vitals, as versões recentes do Lighthouse e do PageSpeed Insights também tentam fornecer uma orientação concreta que você pode seguir para melhorar a rapidez com que os aplicativos da web pesados, em JavaScript, podem ser carregados se os mapas de origem estiverem ativados.
+
+Isso inclui uma coleção crescente de auditorias para reduzir o custo de JavaScript em sua página, bem como reduzir a dependência de polyfills e duplicatas que podem não ser necessários para a experiência do usuário.
+
+Para obter mais informações sobre as ferramentas Core Web Vitals, fique de olho na conta do Twitter da [equipe do Lighthouse](https://twitter.com/____lighthouse) e [No que há de novo no DevTools](https://developers.google.com/web/updates/2020/05/devtools) .
+
+[Imagem de herói](https://unsplash.com/photos/7I9aCavB8RI) por [Mercedes Mehling](https://unsplash.com/@mrs80z) no [Unsplash](https://unsplash.com) .
diff --git a/src/site/content/pt/blog/overloaded-server/index.md b/src/site/content/pt/blog/overloaded-server/index.md
new file mode 100644
index 00000000000..fec227b2638
--- /dev/null
+++ b/src/site/content/pt/blog/overloaded-server/index.md
@@ -0,0 +1,234 @@
+---
+title: Consertar um servidor sobrecarregado
+subhead: |2
+
+  Como determinar o gargalo de um servidor, corrigi-lo rapidamente, melhorar o desempenho do servidor e evitar regressões.
+authors:
+  - katiehempenius
+date: 2020-03-31
+hero: image/admin/5fmiwGShxNngW0sOeKvf.jpg
+description: |2
+
+  Como determinar o gargalo de um servidor, corrigi-lo rapidamente, melhorar o desempenho do servidor e evitar regressões.
+tags:
+  - blog
+  - performance
+---
+
+## Visão geral
+
+Este guia mostra como consertar um servidor sobrecarregado em 4 etapas:
+
+1. [Avaliar](#assess) : Determine o gargalo do servidor.
+2. [Estabilizar](#stabilize) : Implemente soluções rápidas para mitigar o impacto.
+3. [Melhorar](#improve) : Aumente e otimize os recursos do servidor.
+4. [Monitorar](#monitor) : Use ferramentas automatizadas para ajudar a prevenir problemas futuros.
+
+{% Aside %}
+
+Se você tiver perguntas ou comentários sobre este guia, ou se quiser compartilhar suas próprias dicas e truques, deixe um comentário no [PR #2479](https://github.com/GoogleChrome/web.dev/pull/2479).
+
+{% endAside %}
+
+## Avaliar
+
+Quando o tráfego sobrecarrega um servidor, um ou mais dos itens a seguir podem se tornar um gargalo: CPU, rede, memória ou E/S de disco. Identificar qual deles é o gargalo torna possível concentrar os esforços nas mitigações mais impactantes.
+
+- CPU: o uso da CPU que é consistentemente superior a 80% deve ser investigado e corrigido. O desempenho do servidor geralmente diminui quando o uso da CPU atinge cerca de 80-90%, e se torna mais pronunciado à medida que o uso se aproxima de 100%. A utilização da CPU para atender a uma única solicitação é insignificante, mas fazer isso na escala encontrada durante os picos de tráfego às vezes pode sobrecarregar um servidor. Transferir o serviço para outra infraestrutura, reduzindo operações caras e limitando a quantidade de solicitações reduzirá a utilização da CPU.
+- Rede: durante períodos de alto tráfego, a taxa de transferência da rede necessária para atender às solicitações do usuário pode exceder a capacidade. Alguns sites, dependendo do provedor de hospedagem, também podem atingir limites em relação à transferência cumulativa de dados. Reduzir o tamanho e a quantidade de dados transferidos de e para o servidor removerá esse gargalo.
+- Memória: quando um sistema não tem memória suficiente, os dados devem ser transferidos para o disco para armazenamento. O acesso ao disco é consideravelmente mais lento do que à memória, e isso pode tornar o aplicativo inteiro mais lento. Se a memória se esgotar completamente, isso pode resultar em erros de [Memória Insuficiente](https://en.wikipedia.org/wiki/Out_of_memory)  (OOM - Out of Memory). Ajustar a alocação de memória, consertar vazamentos de memória e atualizar a memória pode remover esse gargalo.
+- E/S de disco: a taxa na qual os dados podem ser lidos ou gravados no disco é limitada pelo próprio disco. Se a E/S de disco for um gargalo, aumentar a quantidade de dados em cache na memória pode aliviar esse problema (ao custo de uma maior utilização da memória). Se isso não funcionar, pode ser necessário atualizar seus discos.
+
+As técnicas neste guia enfocam o tratamento de gargalos de CPU e rede. Para a maioria dos sites, a CPU e a rede serão os gargalos mais relevantes durante um pico de tráfego.
+
+A execução [`top`](https://linux.die.net/man/1/top) no servidor afetado é um bom ponto de partida para a investigação de gargalos. Se disponível, complemente com dados históricos de seu provedor de hospedagem ou ferramentas de monitoramento.
+
+## Estabilizar
+
+Um servidor sobrecarregado pode levar rapidamente a [falhas em cascata](https://en.wikipedia.org/wiki/Cascading_failure) em outras partes do sistema. Portanto, é importante estabilizar o servidor antes de tentar fazer alterações mais significativas.
+
+### Limitação de taxa
+
+A limitação de taxa protege a infraestrutura, limitando o número de solicitações de entrada. Isso é cada vez mais importante à medida que o desempenho do servidor diminui: conforme os tempos de resposta aumentam, os usuários tendem a atualizar a página agressivamente - aumentando ainda mais a carga do servidor.
+
+#### Consertar
+
+Embora rejeitar uma solicitação seja relativamente barato, a melhor maneira de proteger seu servidor é lidar com a limitação de taxa em algum ponto anterior - por exemplo, por meio de um balanceador de carga, proxy reverso ou CDN.
+
+Instruções:
+
+- [NGINX](https://www.nginx.com/blog/rate-limiting-nginx/)
+- [HAProxy](https://www.haproxy.com/blog/four-examples-of-haproxy-rate-limiting/)
+- [Microsoft IIS](https://docs.microsoft.com/en-us/iis/configuration/system.applicationhost/sites/site/limits)
+
+Leitura adicional:
+
+- [Estratégias e técnicas de limitação de taxa](https://cloud.google.com/solutions/rate-limiting-strategies-techniques)
+
+### Cache HTTP
+
+Procure maneiras de armazenar conteúdo de forma mais agressiva. Se um recurso pode ser servido a partir de um cache HTTP (seja o cache do navegador ou um CDN), ele não precisa ser solicitado do servidor de origem, o que reduz a carga do servidor.
+
+Cabeçalhos HTTP como [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires) e [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) indicam como um recurso deve ser armazenado em cache por um cache HTTP. Auditar e corrigir esses cabeçalhos melhorará o armazenamento em cache.
+
+Embora os [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) também possam ser usados para armazenamento em cache, eles utilizam um [cache](https://developer.mozilla.org/docs/Web/API/Cache) separado e são um suplemento, e não uma substituição, para o armazenamento em cache HTTP adequado. Por esse motivo, ao lidar com um servidor sobrecarregado, os esforços devem se concentrar na otimização do cache HTTP.
+
+#### Diagnosticar
+
+Execute o [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) e observe [Servir ativos estáticos com uma eficiente](https://developers.google.com/web/tools/lighthouse/audits/cache-policy) auditoria de política de cache para visualizar uma lista de recursos com um [tempo de vida](https://en.wikipedia.org/wiki/Time_to_live) curto a médio (TTL). Para cada recurso listado, considere se o TTL deve ser aumentado. Como uma diretriz aproximada:
+
+- Os recursos estáticos devem ser armazenados em cache com um TTL longo (1 ano).
+- Os recursos dinâmicos devem ser armazenados em cache com um curto TTL (3 horas).
+
+#### Consertar
+
+Defina a `max-age` do cabeçalho [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) para o número apropriado de segundos.
+
+Instruções:
+
+- [NGINX](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Apache](http://httpd.apache.org/docs/current/mod/mod_expires.html)
+- [Microsoft](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache)
+
+Nota: A `max-age` é apenas uma das muitas diretivas de armazenamento em cache. Existem muitas outras diretivas e cabeçalhos que afetarão o comportamento do cache de seu aplicativo. Para uma explicação mais aprofundada da estratégia de cache, é altamente recomendável que você leia [Cache HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) .
+
+### Degradação Elegante
+
+Degradação elegante é a estratégia de reduzir temporariamente a funcionalidade para eliminar o excesso de carga de um sistema. Este conceito pode ser aplicado de muitas maneiras diferentes: por exemplo, servindo uma página de texto estática em vez de um aplicativo completo, desabilitando a pesquisa ou retornando menos resultados da pesquisa, ou desabilitando certos recursos caros ou não essenciais. Deve-se enfatizar a remoção de funcionalidades que podem ser removidas com segurança e facilidade, com impacto mínimo nos negócios.
+
+## Melhorar
+
+### Use uma rede de distribuição de conteúdo (CDN)
+
+Os ativos estáticos de serviço podem ser descarregados de seu servidor para uma rede de distribuição de conteúdo (CDN), reduzindo assim a carga.
+
+A principal função de um CDN é fornecer conteúdo aos usuários rapidamente, fornecendo uma grande rede de servidores localizados próximos aos usuários. No entanto, a maioria dos CDNs também oferece recursos adicionais relacionados ao desempenho, como compactação, balanceamento de carga e otimização de mídia.
+
+#### Configure um CDN
+
+Os CDNs se beneficiam da escala, portanto operar seu próprio CDN raramente faz sentido. Uma configuração básica de CDN é bastante rápida de definir (cerca de 30 minutos) e consiste em atualizar os registros DNS para apontar para o CDN.
+
+#### Otimize o uso de CDN
+
+#### Diagnosticar
+
+Identifique os recursos que não estão sendo servidos por um CDN (mas deveriam ser) executando [WebPageTest](https://webpagetest.org/) . Na página de resultados, clique no quadrado acima de 'Uso efetivo do CDN' para ver a lista de recursos que devem ser servidos por um CDN.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/awCu4XpFI9IQ1bfhIaWJ.jpg", alt = "Seta apontando para o botão 'Uso efetivo do CDN'", width="300", height="109" %} <figcaption> Resultados do WebPageTest</figcaption></figure>
+
+#### Consertar
+
+Se um recurso não estiver sendo armazenado em cache pelo CDN, verifique se as seguintes condições são atendidas:
+
+- Ele tem um [`Cache-Control: public`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Cacheability) cabeçalho público.
+- Ele tem um cabeçalho [`Cache-Control: s-maxage`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration) , [`Cache-Control: max-age`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Expiration) ou [`Expires`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Expires)
+- Ele tem um [`Content-Length`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Length) , [`Content-Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Range) ou[`Transfer-Encoding header`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Transfer-Encoding) .
+
+### Dimensionar recursos de computação
+
+A decisão de dimensionar os recursos de computação deve ser feita com cuidado. Embora seja frequentemente necessário dimensionar os recursos de computação, fazer isso prematuramente pode gerar complexidade arquitetônica e custos financeiros desnecessários.
+
+#### Diagnosticar
+
+Um [tempo alto para o primeiro byte](/ttfb/) (TTFB) pode ser um sinal de que um servidor está se aproximando de sua capacidade. Você pode encontrar essas informações na auditoria de [Redução dos tempos de resposta do servidor Lighthouse(TTFB).](https://developers.google.com/web/tools/lighthouse/audits/ttfb)
+
+Para investigar mais, use uma ferramenta de monitoramento para avaliar o uso da CPU. Se o uso atual ou previsto da CPU exceder 80%, você deve considerar aumentar seus servidores.
+
+#### Consertar
+
+Adicionar um balanceador de carga torna possível distribuir o tráfego em vários servidores. Um balanceador de carga fica na frente de um pool de servidores e roteia o tráfego para o servidor apropriado. Os provedores de nuvem oferecem seus próprios balanceadores de carga ( [GCP](https://cloud.google.com/load-balancing) , [AWS](https://aws.amazon.com/elasticloadbalancing/) , [Azure](https://docs.microsoft.com/en-us/azure/load-balancer/load-balancer-overview) ) ou você pode configurar o seu próprio usando [HAProxy](https://www.digitalocean.com/community/tutorials/an-introduction-to-haproxy-and-load-balancing-concepts) ou [NGINX](http://nginx.org/en/docs/http/load_balancing.html) . Depois que um balanceador de carga estiver no lugar, servidores adicionais podem ser adicionados.
+
+Além do balanceamento de carga, a maioria dos provedores de nuvem oferece escalonamento automático ( [GCP](https://cloud.google.com/compute/docs/load-balancing-and-autoscaling) , [AWS](https://docs.aws.amazon.com/ec2/index.html) , [Azure](https://docs.microsoft.com/en-us/azure/azure-monitor/platform/autoscale-overview) ). O escalonamento automático funciona em conjunto com o balanceamento de carga - o escalonamento automático dimensiona automaticamente os recursos de computação para cima e para baixo, dada a demanda em um determinado momento. Dito isso, o escalonamento automático não é mágico - leva tempo para novas instâncias ficarem online e requer uma configuração significativa. Devido à complexidade adicional que o escalonamento automático acarreta, uma configuração mais simples baseada no balanceador de carga deve ser considerada primeiro.
+
+### Permitir compressão
+
+Recursos baseados em texto devem ser compactados usando gzip ou brotli. O Gzip pode reduzir o tamanho da transferência desses recursos em cerca de 70%.
+
+#### Diagnosticar
+
+Use a [auditoria de compactação de texto](https://developers.google.com/web/tools/lighthouse/audits/text-compression) Lighthouse Enable para identificar recursos que devem ser compactados.
+
+#### Consertar
+
+Ative a compactação atualizando a configuração do servidor. Instruções:
+
+- [NGINX](http://nginx.org/en/docs/http/ngx_http_gzip_module.html)
+- [Apache](https://httpd.apache.org/docs/trunk/mod/mod_deflate.html)
+- [Microsoft](https://docs.microsoft.com/en-us/iis/extensions/iis-compression/iis-compression-overview)
+
+### Otimize imagens e mídia
+
+[As imagens constituem a maior parte de tamanho do arquivo da maioria dos sites](https://images.guide/#introduction); otimizar imagens pode reduzir rápida e significativamente o tamanho de um site.
+
+#### Diagnosticar
+
+O Lighthouse tem uma variedade de auditorias que sinalizam otimizações de imagem em potencial. Como alternativa, outra estratégia é usar DevTools para identificar os maiores arquivos de imagem - essas imagens provavelmente serão boas candidatas para otimização.
+
+Auditorias Farol relevantes:
+
+- [Tamanho adequado das imagens](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)
+- [Adiar imagens fora da tela](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images)
+- [Codifique imagens de forma eficiente](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+- [Veicule imagens em formatos de última geração](https://developers.google.com/web/tools/lighthouse/audits/webp)
+- [Use formatos de vídeo para conteúdo animado](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/)
+
+Fluxo de trabalho do Chrome DevTools:
+
+- [Registrar atividade de rede](https://developer.chrome.com/docs/devtools/network/#load)
+- Clique em **Img** para [filtrar recursos que não sejam de imagem](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-type)
+- Clique na **coluna Tamanho** para classificar os arquivos de imagem por tamanho
+
+#### Consertar
+
+*Se você tem tempo limitado …*
+
+Concentre seu tempo na identificação de imagens grandes e carregadas com frequência e na otimização manual delas com uma ferramenta como o [Squoosh](https://squoosh.app/) . As imagens de herói costumam ser boas candidatas para otimização.
+
+Coisas a ter em mente:
+
+- Tamanho: as imagens não devem ser maiores do que o necessário.
+- Compactação: de modo geral, um nível de qualidade de 80-85 terá um efeito mínimo na qualidade da imagem, enquanto produz uma redução de 30-40% no tamanho do arquivo.
+- Formato: use JPEGs para fotos em vez de PNG; use MP4 para [conteúdo animado](/replace-gifs-with-videos/) em vez de GIF.
+
+*Se você tiver mais tempo …*
+
+Considere configurar um CDN de imagem se as imagens constituírem uma parte substancial do seu site. Os CDNs de imagem são projetados para veicular e otimizar imagens e descarregam a veiculação de imagens do servidor de origem. A configuração de um CDN de imagem é simples, mas requer a atualização de URLs de imagem existentes para apontar para o CDN de imagem.
+
+Leitura adicional:
+
+- [Use CDNs de imagem para otimizar imagens](/image-cdns/#optimize-your-images)
+- [images.guide](https://images.guide/)
+
+### Minimize JS e CSS
+
+A minimização remove caracteres desnecessários de JavaScript e CSS.
+
+#### Diagnosticar
+
+Use as [auditorias Minify CSS](https://developers.google.com/web/tools/lighthouse/audits/minify-css) e [Minify JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/) Lighthouse para identificar recursos que precisam de minimização.
+
+#### Consertar
+
+Se você tem tempo limitado, concentre-se em reduzir seu JavaScript. A maioria dos sites tem mais JavaScript do que CSS, então isso terá mais impacto.
+
+- [Minify JavaScript](/reduce-network-payloads-using-text-compression/)
+- [Minificar CSS](/minify-css/)
+
+## Monitorar
+
+As ferramentas de monitoramento de servidor fornecem coleta de dados, painéis e alertas sobre o desempenho do servidor. Seu uso pode ajudar a prevenir e mitigar futuros problemas de desempenho do servidor.
+
+Uma configuração de monitoramento deve ser mantida o mais simples possível. A coleta e o alerta excessivos de dados têm seus custos: quanto maior o escopo ou a frequência da coleta de dados, mais caro será sua coleta e armazenamento; alertas excessivos levam inevitavelmente a páginas ignoradas.
+
+O alerta deve usar métricas que detectem problemas de forma consistente e precisa. O tempo de resposta do servidor (latência) é uma métrica que funciona particularmente bem para isso: ela identifica uma ampla variedade de problemas e se correlaciona diretamente com a experiência do usuário. O alerta com base em métricas de nível inferior, como o uso da CPU, pode ser um suplemento útil, mas detectará um subconjunto menor de problemas. Além disso, o alerta deve ser baseado no desempenho observado na cauda (em outras palavras, o 95º ou 99º percentuais), em vez de médias. Caso contrário, as médias podem facilmente ocultar problemas que não afetam todos os usuários.
+
+### Consertar
+
+Todos os principais provedores de nuvem oferecem suas próprias ferramentas de monitoramento ( [GCP](https://codelabs.developers.google.com/codelabs/cloud-monitoring-alerting/index.html?index=..%2F..index) , [AWS](https://docs.aws.amazon.com/AWSEC2/latest/WindowsGuide/monitoring-system-instance-status-check.html) , [Azure](https://docs.microsoft.com/en-us/azure/azure-monitor/) ). Além disso, o [Netdata](https://github.com/topics/monitoring) é uma excelente alternativa gratuita e de código aberto. Independentemente da ferramenta escolhida, você precisará instalar o agente de monitoramento da ferramenta em cada servidor que deseja monitorar. Depois de concluído, certifique-se de configurar o alerta.
+
+Instruções:
+
+- [GCP](https://cloud.google.com/monitoring/alerts)
+- [AWS](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/monitoring-system-instance-status-check.html)
+- [Azure](https://docs.microsoft.com/en-us/azure/azure-monitor/app/alerts)
+- [Netdata](https://docs.netdata.cloud/health/)
diff --git a/src/site/content/pt/blog/payment-and-address-form-best-practices/index.md b/src/site/content/pt/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..72da7b8c3a9
--- /dev/null
+++ b/src/site/content/pt/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,503 @@
+---
+title: Práticas recomendadas para formulários de pagamento e endereço
+subhead: Maximize as conversões ajudando seus usuários a preencher o endereço e os formulários de pagamento da maneira mais rápida e fácil possível.
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2021-11-30
+description: Maximize as conversões ajudando seus usuários a preencher o endereço e os formulários de pagamento da maneira mais rápida e fácil possível.
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: Homem de negócios usando um cartão de pagamento para fazer um pagamento em um computador laptop.
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+Formulários bem projetados ajudam os usuários e aumentam as taxas de conversão. Uma pequena correção pode fazer uma grande diferença!
+
+{% Aside 'codelab' %} Se você preferir aprender essas práticas recomendadas com um tutorial prático, confira os dois codelabs desta postagem:
+
+- [Codelab de práticas recomendadas para formas de pagamento](/codelab-payment-form-best-practices)
+- [Codelab de práticas recomendadas do formulário de endereço](/codelab-address-form-best-practices) {% endAside %}
+
+Aqui está um exemplo de um formulário de pagamento simples que demonstra todas as práticas recomendadas:
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+Aqui está um exemplo de um formulário de endereço simples que demonstra todas as práticas recomendadas:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## Lista de controle
+
+- [Use elementos HTML significativos](#meaningful-html) : `<form>` , `<input>` , `<label>` e `<button>` .
+- [Rotule cada campo do formulário com um `<label>`](#html-label) .
+- Use atributos de elemento HTML para [acessar recursos integrados do navegador](#html-attributes) , em particular [`type`](#type-attribute) e [`autocomplete`](#autocomplete-attribute) com os valores apropriados.
+- Evite usar `type="number"` para números que não devem ser incrementados, como números de cartão de pagamento. Em vez disso, use `type="text"` e [`inputmode="numeric"`](#inputmode-attribute) .
+- Se um [valor de preenchimento automático apropriado](#autocomplete-attribute) estiver disponível para uma `input`, `select` ou área de `textarea`, você deve usá-lo.
+- Para ajudar os navegadores a preencher automaticamente os formulários, forneça [valores estáveis aos](#stable-name-id) atributos de `name` e `id` entrada que não mudam entre carregamentos de página ou implantações de site da Web.
+- [Desative os botões de envio](#disable-submit) depois de tocá-los ou clicá-los.
+- [Valide os](#validate) dados durante a entrada, e não apenas no envio do formulário.
+- Torne o [check-out de convidado](#guest-checkout) o padrão e simplifique a criação da conta assim que o check-out for concluído.
+- Mostre o [andamento do processo de checkout](#checkout-progress) em etapas claras com frases chamativas claras.
+- [Limite os potenciais pontos de saída de checkout](#reduce-checkout-exits), removendo a desordem e as distrações.
+- [Mostre todos os detalhes do pedido](#checkout-details) na finalização da compra e facilite os ajustes do pedido.
+- [Não peça dados desnecessários](#unneeded-data).
+- [Peça nomes com uma única entrada, a](#single-name-input) menos que tenha um bom motivo para não fazê-lo.
+- [Não imponha caracteres somente latinos](#unicode-matching) para nomes e nomes de usuário.
+- [Permita uma variedade de formatos de endereço](#address-variety).
+- Considere o uso de uma [única área`textarea` para o endereço](#address-textarea).
+- Use o [preenchimento automático para o endereço de cobrança](#billing-address).
+- [Internacionalize e localize](#internationalization-localization) quando necessário.
+- Considere evitar a [pesquisa de endereço de código postal](#postal-code-address-lookup).
+- Use [valores de preenchimento automático de cartão de pagamento apropriados](#payment-form-autocomplete).
+- Use uma [única entrada para números de cartão de pagamento](#single-number-input).
+- [Evite usar elementos personalizados](#avoid-custom-elements) se eles prejudicarem a experiência de preenchimento automático.
+- [Teste em campo e também no laboratório](#analytics-rum): análise de página, análise de interação e medição de desempenho de usuário real.
+- [Teste em uma variedade de navegadores, dispositivos e plataformas](#test-platforms).
+
+{% Aside %} Este artigo é sobre as práticas recomendadas de front-end para endereços e formulários de pagamento. Ele não explica como implementar transações em seu site. Para saber mais sobre como adicionar a funcionalidade de pagamento ao seu site, consulte [Pagamentos pela web](/payments). {% endAside %}
+
+## Use HTML significativo {: #meaningful-html}
+
+Use os elementos e atributos construídos para o trabalho:
+
+- `<form>`, `<input>`, `<label>` e `<button>`
+- `type` , `autocomplete` e `inputmode`
+
+Isso habilita a funcionalidade do navegador embutido, melhora a acessibilidade e adiciona significado à sua marcação.
+
+### Use elementos HTML conforme pretendido {: #html-elements}
+
+#### Coloque seu formulário em um &lt;form&gt; {: #html-form}
+
+Você pode ficar tentado a não se incomodar em envolver seus `<input>` em um `<form>` e lidar com o envio de dados puramente com JavaScript.
+
+Não faça isso!
+
+Um `<form>` HTML dá acesso a um conjunto poderoso de recursos integrados em todos os navegadores modernos e pode ajudar a tornar seu site acessível para leitores de tela e outros dispositivos de assistência. Um `<form>` também facilita construir funcionalidades básicas para navegadores mais antigos com suporte limitado a JavaScript e para habilitar o envio de formulários mesmo se houver uma falha em seu código e para o pequeno número de usuários que realmente desabilitam o JavaScript.
+
+Se você tiver mais de um componente de página para entrada do usuário, certifique-se de colocar cada um em seu próprio elemento `<form>` Por exemplo, se você tiver busca e inscrição na mesma página, coloque cada um em seu próprio `<form>` .
+
+#### Use `<label>` para rotular os elementos {: #html-label}
+
+Para rotular um `<input>`, `<select>` ou `<textarea>`, use um [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label) .
+
+Associar uma etiqueta com uma entrada, dando ao atributo `for` do rótulo o mesmo valor que o input `id`.
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+Use um único rótulo para uma única entrada: não tente rotular várias entradas com apenas um rótulo. Isso funciona melhor para navegadores e melhor para leitores de tela. Um toque ou clique em um rótulo move o foco para a entrada com a qual está associado e os leitores de tela anunciam o texto do *rótulo* quando o rótulo ou a *entrada* do rótulo obtém o foco.
+
+{% Aside 'caution' %} Não use [marcadores](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) de posição sozinhos em vez de rótulos. Quando você começa a inserir texto em uma entrada, o marcador de posição fica oculto, então pode ser fácil esquecer para que serve a entrada. O mesmo é verdadeiro se você usar o espaço reservado para mostrar o formato correto para valores como datas. Isso pode ser especialmente problemático para usuários de telefones, principalmente se estiverem distraídos ou se sentindo estressados! {% endAside %}
+
+#### Torne os botões úteis {: #html-button}
+
+Use [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) para botões! Você também pode usar `<input type="submit">`, mas não use um `div` ou algum outro elemento aleatório atuando como um botão. Os elementos de botão fornecem comportamento acessível, funcionalidade de envio de formulário integrada e podem ser estilizados facilmente.
+
+Dê a cada botão de envio de formulário um valor que diga o que ele faz. Para cada etapa do checkout, use uma frase chamativa descritiva que mostre o progresso e torne a próxima etapa óbvia. Por exemplo, identifique o botão enviar em seu formulário de endereço de entrega **Prosseguir para o pagamento em** vez de **Continuar** ou **Salvar** .
+
+{: #disable-submit}
+
+Considere desativar um botão de envio depois que o usuário tocar ou clicar nele, especialmente quando o usuário estiver fazendo um pagamento ou fazendo um pedido. Muitos usuários clicam nos botões repetidamente, mesmo quando estão funcionando bem. Isso pode atrapalhar o checkout e aumentar a carga do servidor.
+
+Por outro lado, não desative um botão de envio que aguarda uma entrada completa e válida do usuário. Por exemplo, não deixe um botão **Salvar endereço** desabilitado porque algo está faltando ou é inválido. Isso não ajuda o usuário, pois ele pode continuar a tocar ou clicar no botão e presumir que ele está quebrado. Em vez disso, se os usuários tentarem enviar um formulário com dados inválidos, explique o que está errado e o que fazer para corrigir. Isso é particularmente importante no celular, onde a entrada de dados é mais difícil e os dados do formulário ausentes ou inválidos podem não estar visíveis na tela do usuário no momento em que ele tenta enviar um formulário.
+
+{% Aside 'caution' %} O tipo padrão de botão em um formulário é `submit`. Se você quiser adicionar outro botão em um formulário (para **Mostrar senha** , por exemplo), adicione `type="button"`. Caso contrário, clicar ou tocar no botão enviará o formulário.
+
+Pressionar a `Enter` enquanto qualquer campo do formulário estiver em foco simula um clique no primeiro `submit` do formulário. Se você incluir um botão em seu formulário antes do botão **Enviar** e não especificar o tipo, esse botão terá o tipo padrão para botões em um formulário (`submit` ) e receberá o evento de clique antes do formulário ser enviado. Para ver um exemplo disso, veja nossa [demonstração](https://enter-button.glitch.me/): preencha o formulário e pressione `Enter`. {% endAside %}
+
+### Aproveite ao máximo os atributos HTML {: #html-attribute}
+
+#### Facilite a inserção de dados pelos usuários
+
+{: #type-attribute}
+
+Use o atributo de entrada [`type`](https://developer.mozilla.org/docs/Web/HTML/Element/input/email) apropriado para fornecer o teclado correto no celular e habilitar a validação embutida básica pelo navegador.
+
+Por exemplo, use `type="email"` para endereços de e-mail e `type="tel"` para números de telefone.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="Duas capturas de tela de telefones Android, mostrando um teclado apropriado para inserir um endereço de e-mail (usando type=email) e para inserir um número de telefone (com type=tel).", width="800", height="683" %} <figcaption>Teclados apropriados para e-mail e telefone.</figcaption></figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %} Usar type="number" adiciona uma seta para cima/para baixo para aumentar os números, o que não faz sentido para dados como telefone, cartão de pagamento ou números de conta.
+
+Para números como esses, defina `type="text"` (ou deixe de fora o atributo, já que `text` é o padrão). Para números de telefone, use `type="tel"` para obter o teclado apropriado no celular. Para outros números, use `inputmode="numeric"` para obter um teclado numérico no celular.
+
+Alguns sites ainda usam `type="tel"` para números de cartão de pagamento para garantir que os usuários móveis obtenham o teclado correto. No entanto, `inputmode` é [amplamente suportado agora](https://caniuse.com/input-inputmode) , então você não precisa fazer isso, mas verifique os navegadores de seus usuários. {% endAside %}
+
+{: #avoid-custom-elements}
+
+Para datas, tente evitar o uso de elementos de `select`. Eles interrompem a experiência de preenchimento automático se não forem implementados corretamente e não funcionam em navegadores mais antigos. Para números como o ano de nascimento, considere usar um elemento `input` em vez de `select`, uma vez que inserir dígitos manualmente pode ser mais fácil e menos propenso a erros do que selecionar em uma longa lista suspensa, especialmente no celular. Use `inputmode="numeric"` para garantir o teclado correto no celular e adicione dicas de validação e formato com texto ou um espaço reservado para garantir que o usuário insira os dados no formato apropriado.
+
+{% Aside %} O elemento [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) permite que um usuário selecione em uma lista de opções disponíveis e fornece sugestões correspondentes conforme o usuário insere o texto. Experimente o `datalist` para `text`, `range` e `color` em [simpl.info/datalist](https://simpl.info/datalist). Para a entrada do ano de nascimento, você pode comparar um `select` com um `input` e `datalist` em [datalist-select.glitch.me](https://datalist-select.glitch.me). {% endAside %}
+
+#### Use o preenchimento automático para melhorar a acessibilidade e ajudar os usuários a evitar inserir dados novamente {: #autocomplete-attribute}
+
+O uso de `autocomplete` apropriados permite que os navegadores ajudem os usuários armazenando dados com segurança e preenchendo automaticamente os valores de `input`, `select` e área de `textarea`. Isso é particularmente importante no celular e crucial para evitar [altas taxas de abandono de formulários](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data). O preenchimento automático também oferece [vários benefícios de acessibilidade](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) .
+
+Se um valor de preenchimento automático apropriado estiver disponível para um campo de formulário, você deve usá-lo. [MDN web docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) tem uma lista completa de valores e explicações de como usá-los corretamente.
+
+{: #stable-name-id}
+
+{% Aside %} Além de usar valores de preenchimento automático apropriados, ajude os navegadores a preencher formulários automaticamente, fornecendo aos campos de formulário [valores estáveis](#stable-name-id) de atributos `name` e `id` que não mudam entre carregamentos de página ou implantações de site. {% endAside %}
+
+{: #billing-address}
+
+Por padrão, defina o endereço de cobrança igual ao endereço de entrega. Reduza a confusão visual fornecendo um link para editar o endereço de cobrança (ou use [elementos de `summary` e `details`](https://simpl.info/details/)) em vez de exibir o endereço de cobrança em um formulário.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="Exemplo de página de checkout mostrando o link para alterar o endereço de cobrança.", width="800", height="250" %} <figcaption>Adicione um link para revisar a cobrança.</figcaption></figure>
+
+Use os valores de preenchimento automático apropriados para o endereço de cobrança, assim como você faz para o endereço de entrega, de forma que o usuário não precise inserir os dados mais de uma vez. Adicione uma palavra de prefixo aos atributos de preenchimento automático se você tiver valores diferentes para entradas com o mesmo nome em seções diferentes.
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### Ajude os usuários a inserir os dados corretos {: #validation}
+
+Tente evitar "repreender" os clientes porque eles "fizeram algo errado". Em vez disso, ajude os usuários a preencher formulários com mais rapidez e facilidade, ajudando-os a corrigir os problemas à medida que acontecem. Com o processo de checkout, os clientes estão tentando dar dinheiro à sua empresa por um produto ou serviço, seu trabalho é ajudá-los, não puni-los!
+
+Você pode adicionar [atributos de restrição](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints) aos elementos do formulário para especificar valores aceitáveis, incluindo `min`, `max` e `pattern`. O [estado de validade](https://developer.mozilla.org/docs/Web/API/ValidityState) do elemento é definido automaticamente dependendo se o valor do elemento é válido, como são as pseudoclasses CSS `:valid` e `:invalid` que podem ser usadas para estilizar elementos com valores válidos ou inválidos.
+
+Por exemplo, o seguinte HTML especifica a entrada para um ano de nascimento entre 1900 e 2020. O uso de `type="number"` restringe os valores de entrada a apenas números, dentro do intervalo especificado por `min` e `max`. Se você tentar inserir um número fora do intervalo, a entrada será configurada para ter um estado inválido.
+
+{% Glitch {id: 'constraints', path: 'index.html', height: 170}%}
+
+O exemplo a seguir usa `pattern="[\d ]{10,30}"` para garantir um número de cartão de pagamento válido, permitindo também permite espaços:
+
+{% Glitch {id: 'payment-card-input', path: 'index.html', height: 170}%}
+
+Os navegadores modernos também fazem validação básica para entradas com o tipo `email` ou `url` .
+
+{% Glitch {id: 'type-validation', path: 'index.html', height: 250} %}
+
+{% Aside %} Adicione o `multiple` a uma entrada com `type="email"` para habilitar a validação integrada para vários endereços de e-mail separados por vírgula em uma única entrada. {% endAside %}
+
+No envio do formulário, os navegadores definem automaticamente o foco nos campos com valores obrigatórios problemáticos ou ausentes. Não é necessário JavaScript!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="Captura de tela de um formulário de login no Chrome na área de trabalho mostrando o prompt do navegador e o foco para um valor de e-mail inválido.", width="500", height="483" %} <figcaption>Validação embutida básica pelo navegador.</figcaption></figure>
+
+Valide inline e forneça feedback ao usuário à medida que ele insere os dados, em vez de fornecer uma lista de erros ao clicar no botão de envio. Se você precisar validar os dados em seu servidor após o envio do formulário, liste todos os problemas encontrados e destaque claramente todos os campos do formulário com valores inválidos, além de exibir uma mensagem integrada ao lado de cada campo problemático explicando o que precisa ser corrigido. Verifique os logs do servidor e os dados analíticos em busca de erros comuns. Talvez seja necessário reprojetar seu formulário.
+
+Você também deve usar JavaScript para fazer uma validação mais robusta enquanto os usuários estão inserindo dados e no envio do formulário. Use a [API de validação de restrição](https://html.spec.whatwg.org/multipage/forms.html#constraints) (que é [amplamente suportada](https://caniuse.com/#feat=constraint-validation) ) para adicionar validação personalizada usando a IU do navegador integrada para definir o foco e exibir mensagens.
+
+Saiba mais em [Use JavaScript para validação mais complexa em tempo real](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+{% Aside 'warning' %} Mesmo com a validação do lado do cliente e restrições de entrada de dados, você ainda deve garantir que seu back-end manipule com segurança a entrada e a saída de dados dos usuários. Nunca confie na entrada do usuário: ela pode ser maliciosa. Saiba mais em [OWASP Input Validation Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html). {% endAside %}
+
+#### Ajude os usuários a evitar a perda de dados obrigatórios {: #required}
+
+Use o [atributo `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) nas entradas de valores obrigatórios.
+
+Quando um formulário é enviado, [os navegadores modernos](https://caniuse.com/mdn-api_htmlinputelement_required) automaticamente solicitam e definem o foco nos `required` com dados ausentes, e você pode usar a [pseudo classe `:required`](https://caniuse.com/?search=required) para destacar os campos obrigatórios. Não é necessário JavaScript!
+
+Adicione um asterisco ao rótulo para cada campo obrigatório e adicione uma nota no início do formulário para explicar o que o asterisco significa.
+
+## Simplifique o checkout {: #checkout-forms}
+
+### Cuidado com a lacuna do comércio para celular! {: # m-commerce-gap}
+
+Imagine que seus usuários tenham um *orçamento de fadiga*. Gaste-o e seus usuários irão embora.
+
+Você precisa reduzir o atrito e manter o foco, especialmente no celular. Muitos sites obtêm mais *tráfego* no celular, mas mais *conversões* em computadores: um fenômeno conhecido como [lacuna do comércio para celular](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). Os clientes podem simplesmente preferir concluir uma compra no computador, mas as taxas de conversão em dispositivos móveis mais baixas também são resultado da experiência do usuário insatisfatória. Seu trabalho é *minimizar*  as conversões perdidas no celular e *maximizar*  as conversões em computadores. [A pesquisa mostrou](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs) que há uma grande oportunidade de fornecer uma melhor experiência de formulários para celular.
+
+Acima de tudo, os usuários estão mais propensos a abandonar formulários que parecem longos, complexos e sem um senso de direção. Isso é especialmente verdadeiro quando os usuários estão em telas menores, distraídos ou com pressa. Peça o mínimo de dados possível.
+
+### Tornar o checkout de convidado o padrão {: #guest-checkout}
+
+Para uma loja online, a maneira mais simples de reduzir o atrito com formulários é tornar o pagamento como convidado como padrão. Não force os usuários a criar uma conta antes de fazer uma compra. Não permitir o pagamento como convidado é citado como um dos principais motivos para o abandono do carrinho de compras.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="Motivos para abandono do carrinho de compras durante a finalização da compra.", width="800", height="503" %} <figcaption>De <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a></figcaption></figure>
+
+Você pode oferecer inscrição na conta após a finalização da compra. Nesse ponto, você já tem a maioria dos dados de que precisa para configurar uma conta, portanto, a criação da conta deve ser rápida e fácil para o usuário.
+
+{% Aside 'gotchas' %} Se você oferecer inscrição após a finalização da compra, certifique-se de que a compra que o usuário acabou de fazer está vinculada à conta recém-criada! {% endAside %}
+
+### Mostrar progresso do checkout {: #checkout-progress}
+
+Você pode tornar o processo de checkout menos complexo mostrando o progresso e deixando claro o que precisa ser feito a seguir. O vídeo abaixo mostra como o varejista [johnlewis.com do](https://www.johnlewis.com) Reino Unido consegue isso.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %} <figcaption>Mostre o progresso do checkout.</figcaption></figure>
+
+Você tem que manter o ímpeto! Para cada etapa do pagamento, use títulos de página e valores de botão descritivos que deixem claro o que precisa ser feito naquele instante e qual é a próxima etapa de checkout.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Dê aos botões de formulário nomes significativos que mostrem o que vem a seguir.</figcaption></figure>
+
+Use o `enterkeyhint` nas entradas do formulário para definir o rótulo da tecla enter do teclado móvel. Por exemplo, use `enterkeyhint="previous"` e `enterkeyhint="next"` em um formulário de várias páginas, `enterkeyhint="done"` para a entrada final no formulário e `enterkeyhint="search"` para uma entrada de pesquisa.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Duas capturas de tela de um formulário de endereço no Android mostrando como o atributo de entrada enterkeyhint altera o ícone do botão de tecla Enter.", width="800", height="684" %} <figcaption>Botões de tecla Enter no Android: 'próximo' e 'concluído'.</figcaption></figure>
+
+O atributo `enterkeyhint` [é compatível com Android e iOS](https://caniuse.com/mdn-html_global_attributes_enterkeyhint). Você pode descobrir mais no [enterkeyhint explainer](https://github.com/dtapuska/enterkeyhint).
+
+{: #checkout-details}
+
+Torne mais fácil para os usuários irem e voltarem no processo de finalização da compra para facilmente retificarem seus pedidos, mesmo quando eles estiverem na etapa final de pagamento. Mostre todos os detalhes do pedido, não apenas um resumo limitado. Permita que os usuários ajustem facilmente as quantidades dos itens na página de pagamento. Sua prioridade na finalização da compra é evitar a interrupção do andamento da conversão.
+
+### Remova distrações {: #reduce-checkout-exits}
+
+Limite os pontos de saída potenciais, removendo confusão visual e distrações, como promoções de produtos. Muitos varejistas de sucesso removem até mesmo a navegação e a pesquisa do checkout.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="Duas capturas de tela no celular mostrando o progresso no checkout do johnlewis.com. Pesquisa, navegação e outras distrações são removidas.", width="800", height="683" %} <figcaption>Pesquisa, navegação e outras distrações removidas do checkout.</figcaption></figure>
+
+Mantenha a jornada no foco. Este não é o momento de apresentar tentações para os usuários fazerem outra coisa!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="Captura de tela da página de finalização de compra no celular, mostrando uma promoção de ETIQUETAS GRATUITAS que distrai.", width="350", height="735" %} <figcaption>Não distraia os clientes quando estão concluindo a compra.</figcaption></figure>
+
+Para usuários recorrentes, você pode simplificar ainda mais o fluxo de checkout, ocultando dados que eles não precisam ver. Por exemplo: exiba o endereço de entrega em texto simples (não em um formulário) e permita que os usuários o alterem através de um link.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="Captura de tela da seção 'Revisar pedido' da página de finalização da compra, mostrando texto sem formatação, com links para alterar o endereço de entrega, forma de pagamento e endereço de cobrança, que não são exibidos.", width="450", height="219" %} <figcaption>Oculte dados que os clientes não precisam ver.</figcaption></figure>
+
+## Facilite a inserção de nome e endereço {: #address-forms}
+
+### Peça apenas os dados de que você precisa {: #unneeded-data}
+
+Antes de começar a escrever o código de seus formulários de nome e endereço, certifique-se de entender quais dados são necessários. Não peça dados de que não precisa! A maneira mais simples de reduzir a complexidade do formulário é remover campos desnecessários. Isso também é bom para a privacidade do cliente e pode reduzir custos e a responsabilidade com os dados de back-end.
+
+### Use um único nome de entrada {: #single-name-input}
+
+Permita que seus usuários insiram seus nomes usando uma única entrada, a menos que você tenha um bom motivo para armazenar nomes próprios, sobrenomes, títulos honoríficos ou outras partes de nomes separadamente. Usar uma única entrada de nome torna os formulários menos complexos, permite cortar e colar e simplifica o preenchimento automático.
+
+Em particular, a menos que você tenha um bom motivo para não fazer isso, não se preocupe em adicionar uma entrada separada para um prefixo ou título (como Sra., Dr. ou Lord). Os usuários podem digitar isso com seus nomes, se quiserem. Além disso, o `honorific-prefix` atualmente não funciona na maioria dos navegadores e, portanto, adicionar um campo para prefixo de nome ou título interromperá a experiência de preenchimento automático de formulário de endereço para a maioria dos usuários.
+
+### Habilitar preenchimento automático de nome
+
+Use `name` para um nome completo:
+
+```html
+<input autocomplete="name" ...>
+```
+
+Se você realmente tem um bom motivo para dividir as partes do nome, certifique-se de usar os valores de preenchimento automático apropriados:
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### Permitir nomes internacionais {: #unicode-matching}
+
+Você pode querer validar suas entradas de nome ou restringir os caracteres permitidos para os dados de nome. No entanto, você precisa ser o menos restritivo possível com os alfabetos. É rude ouvir que seu nome é "inválido"!
+
+Para a validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. Somente latino exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Permita, em vez disso, a correspondência de letras Unicode e certifique-se de que seu back-end suporte Unicode com segurança tanto como entrada quanto como saída. O Unicode em expressões regulares é bem suportado por navegadores modernos.
+
+{% Compare 'worse' %}
+
+```html
+<!-- Nomes com caracteres não latinos (como Françoise ou Jörg) são 'inválidos'. -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- Accepts Unicode letters. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Correspondência de letras Unicode comparada à correspondência de letras apenas latinas.</figcaption></figure>
+
+{% Aside %} Você pode descobrir mais sobre [internacionalização e localização](#internationalization-localization) abaixo, mas certifique-se de que seus formulários funcionem com nomes em todas as regiões onde você tem usuários. Por exemplo, para nomes japoneses, você deve considerar ter um campo para nomes fonéticos. Isso ajuda a equipe de suporte ao cliente a dizer o nome do cliente ao telefone. {% endAside %}
+
+### Permitir uma variedade de formatos de endereço {: #address-variety}
+
+Ao projetar um formulário de endereço, tenha em mente a variedade surpreendente de formatos de endereço, mesmo dentro de um único país. Tenha cuidado para não fazer suposições sobre endereços "normais". (Dê uma olhada no [UK Address Oddities!](http://www.paulplowman.com/stuff/uk-address-oddities/) se não estiver convencido!)
+
+#### Flexibilize os formulários de endereço {:flexible-address}
+
+Não force os usuários a tentar espremer seus endereços em campos de formulário onde não cabem.
+
+Por exemplo, não insista em um número de casa e nome de rua em entradas separada visto que muitos endereços não usam esse formato e dados incompletos podem interromper o preenchimento automático do navegador.
+
+Seja especialmente cuidadoso com campos de endereço `required`. Por exemplo, endereços em grandes cidades no Reino Unido não têm um condado, mas muitos sites ainda obrigam os usuários a informar um.
+
+Usar duas linhas de endereço flexíveis pode funcionar bem o suficiente para uma variedade de formatos de endereço.
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Adicione rótulos para corresponder:
+
+```html/0-2,5-7
+<label for="address-line-1">
+Linha de endereço 1 (ou nome da empresa)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Endereço linha 2 (opcional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Você pode experimentar combinar e editar o exemplo incorporado abaixo.
+
+{% Aside 'caution' %} Pesquisas mostram que a [**Linha 2 do endereço** pode ser problemática para os usuários](https://baymard.com/blog/address-line-2). Tenha isso em mente ao projetar formulários de endereço: você deve considerar alternativas, como usar uma única área de `textarea` (veja abaixo) ou outras opções. {% endAside %}
+
+#### Considere usar um único textarea para o endereço {: #address-textarea}
+
+A opção mais flexível para endereços é fornecer um único `textarea`.
+
+O `textarea` se ajusta a qualquer formato de endereço e é ótimo para recortar e colar, mas lembre-se de que pode não atender aos seus requisitos de dados e os usuários podem perder o preenchimento automático se anteriormente tiverem usado apenas formulários com `address-line1` e `address-line2` .
+
+Para um textarea, use `street-address` como o valor de preenchimento automático.
+
+Aqui está um exemplo de um formulário que demonstra o uso de uma única área `textarea` para o endereço:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### Internacionalize e localize seus formulários de endereço {: #internacionalization-localization}
+
+É especialmente importante que os formulários de endereço considerem a [internacionalização e a localização](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/), dependendo de onde seus usuários estiverem localizados.
+
+Esteja ciente de que a nomenclatura das partes do endereço varia, assim como os formatos dos endereços, mesmo dentro do mesmo idioma.
+
+```text
+    ZIP code: EUA
+ Postal code: Canadá
+    Postcode: Reino Unido
+     Eircode: Irlanda
+         PIN: Índia
+```
+
+Pode ser irritante ou confuso receber um formulário que não combina com seu endereço ou que não usa as palavras que você espera.
+
+Personalizar formulários de endereço [para vários locais](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region) pode ser necessário para o seu site, mas o uso de técnicas para maximizar a flexibilidade do formulário (conforme descrito acima) pode ser adequado. Se você não localizar seus formulários de endereço, certifique-se de entender as principais prioridades para lidar com uma variedade de formatos de endereço:
+
+- Evite ser muito específico sobre partes do endereço, como insistir no nome de uma rua ou número de casa.
+- Sempre que possível, evite tornar os campos `required`. Por exemplo, os endereços em muitos países não têm um código postal e endereços rurais podem não ter um nome de rua ou estrada.
+- Use nomenclatura inclusiva: 'País/região' e não 'País'; 'ZIP/código postal' e não 'ZIP'.
+
+Deixe flexível! O [exemplo de formulário de endereço simples acima](#address-textarea) pode ser adaptado para funcionar 'bem o suficiente' para muitos locais.
+
+#### Considere evitar a pesquisa de endereço de código postal {: #postal-code-address-lookup}
+
+Alguns sites usam um serviço para pesquisar endereços com base no código postal ou CEP. Isso pode ser sensato para alguns casos de uso, mas você deve estar ciente das potenciais desvantagens.
+
+A sugestão de endereço de código postal não funciona para todos os países e, em algumas regiões, os códigos postais podem incluir um grande número de endereços potenciais.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>CEPs ou códigos postais podem incluir muitos endereços!</figcaption></figure>
+
+É difícil para os usuários selecionar a partir de uma longa lista de endereços, especialmente no celular se estiverem com pressa ou estressados. Pode ser mais fácil e menos sujeito a erros permitir que os usuários aproveitem o preenchimento automático e insiram seus endereços completos preenchidos com um único toque ou clique.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Uma única entrada de nome permite a entrada de endereço com um toque (um clique).</figcaption></figure>
+
+## Simplifique os formulários de pagamento {: #general-guidelines}
+
+Os formulários de pagamento são a parte mais crítica do processo de checkout. O design inadequado do formulário de pagamento é uma [causa comum de abandono do carrinho de compras](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). O [diabo está nos detalhes](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1): pequenas falhas podem levar os usuários a abandonar uma compra, principalmente no celular. Seu trabalho é projetar formulários para facilitar ao máximo a inserção de dados pelos usuários.
+
+### Ajude os usuários a evitar inserir novamente os dados de pagamento {: #payment-form-autocomplete}
+
+Certifique-se de adicionar os `autocomplete` apropriados nos formulários de cartão de pagamento, incluindo o número do cartão de pagamento, o nome no cartão e o mês e ano de validade:
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+Isso permite que os navegadores ajudem os usuários armazenando com segurança os detalhes do cartão de pagamento e inserindo corretamente os dados do formulário. Sem o preenchimento automático, é mais provável que os usuários mantenham um registro físico dos detalhes do cartão de pagamento ou armazenem dados do cartão de pagamento de maneira insegura em seus dispositivos.
+
+{% Aside 'caution' %} Não adicione um seletor para o tipo de cartão de pagamento, pois isso sempre pode ser inferido a partir do número do cartão de pagamento. {% endAside %}
+
+### Evite usar elementos personalizados para datas de cartão de pagamento
+
+Se não forem projetados corretamente, os [elementos personalizados](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) podem interromper o fluxo de pagamento interrompendo o preenchimento automático e não funcionar em navegadores mais antigos. Se todos os outros detalhes do cartão de pagamento estiverem disponíveis no preenchimento automático, mas um usuário for obrigado a encontrar seu cartão físico de pagamento para procurar uma data de validade porque o preenchimento automático não funcionou para um elemento personalizado, você provavelmente perderá uma venda. Considere usar elementos HTML padrão em vez disso e estilize-os de acordo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="Captura de tela do formulário de pagamento mostrando elementos personalizados para a data de validade do cartão que interrompem o preenchimento automático.", width="800", height="916" %} <figcaption>O preenchimento automático preencheu todos os campos, exceto a data de validade!</figcaption></figure>
+
+### Use uma única entrada para cartão de pagamento e números de telefone {: #single-number-input}
+
+Para cartões de pagamento e números de telefone, use uma única entrada: não divida o número em partes. Isso facilitar para os usuários inserirem dados, torna a validação mais simples e permite que os navegadores sejam preenchidos automaticamente. Considere fazer o mesmo para outros dados numéricos, como PIN e códigos bancários.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="Captura de tela do formulário de pagamento mostrando um campo de cartão de crédito dividido em quatro elementos de entrada.", width="800", height="833" %} <figcaption>Não use várias entradas para um número de cartão de crédito.</figcaption></figure>
+
+### Valide com atenção {: #validate}
+
+Você deve validar a entrada de dados em tempo real e antes do envio do formulário. Uma maneira de fazer isso é adicionando um `pattern` a uma entrada de cartão de pagamento. Se o usuário tentar enviar o formulário de pagamento com um valor inválido, o navegador exibe uma mensagem de aviso e define o foco na entrada. Não é necessário JavaScript!
+
+{% Glitch {id: 'payment-card-input', path: 'index.html', height: 170} %}
+
+No entanto, seu `pattern` deve ser flexível o suficiente para lidar com a [variedade de comprimentos de número de cartão de pagamento](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35): de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Você pode descobrir mais sobre a estruturação do número do cartão de pagamento no [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number) .
+
+Permita que os usuários incluam espaços ao inserir um novo número de cartão de pagamento, pois é assim que os números são exibidos nos cartões físicos. Isso é mais amigável para o usuário (você não terá que dizer a eles "eles fizeram algo errado"), e é menos provável que interrompa o fluxo de conversão, é simples remover espaços nos números antes do processamento.
+
+{% Aside %} Você pode usar uma senha de uso único para verificação de identidade ou pagamento. No entanto, pedir aos usuários para inserir manualmente um código ou copiá-lo de um e-mail ou de um texto SMS está sujeito a erros e é uma fonte de atrito. Aprenda sobre as melhores maneiras de habilitar senhas únicas nas [melhores práticas para formulários SMS OTP](/sms-otp-form) . {% endAside %}
+
+## Teste em uma variedade de dispositivos, plataformas, navegadores e versões {: #test-plataforms}
+
+É particularmente importante testar o endereço e os formulários de pagamento nas plataformas mais comuns para seus usuários, uma vez que a funcionalidade e a aparência do elemento do formulário podem variar, e as diferenças no tamanho da janela de visualização podem levar a um posicionamento problemático. O BrowserStack permite [o teste gratuito para projetos de código aberto](https://www.browserstack.com/open-source) em uma variedade de dispositivos e navegadores.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="Capturas de tela de um formulário de pagamento, payment-form.glitch.me, no iPhone 7 e 11. O botão Concluir pagamento é mostrado no iPhone 11, mas não no 7", width="800", height="707" %} <figcaption>A mesma página no iPhone 7 e no iPhone 11. <br> Reduza o preenchimento para janelas de visualização móveis menores para garantir que o botão <strong>Concluir pagamento</strong> não esteja oculto.</figcaption></figure>
+
+## Implemente análises e RUM {: #analytics-rum}
+
+Testar a usabilidade e o desempenho localmente pode ser útil, mas você precisa de dados do mundo real para entender corretamente como é a experiência dos usuários com seus formulários de pagamento e de endereço.
+
+Para isso, você precisa de análises e monitoramento de usuário real: dados para a experiência de usuários reais, como quanto tempo as páginas de checkout levam para carregar ou quanto tempo o pagamento leva para ser concluído:
+
+- **Análise da página**: visualizações de página, taxas de rejeição e saídas para cada página com um formulário.
+- **Análise da interação** : [funis de objetivos](https://support.google.com/analytics/answer/6180923?hl=en) e [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) indicam onde os usuários abandonam seu fluxo de checkout e quais ações eles realizam ao interagir com seus formulários.
+- **Desempenho do site** : [métricas centradas no usuário](/user-centric-performance-metrics) podem dizer se suas páginas de checkout demoram para carregar e, em caso afirmativo, qual é a causa.
+
+Análise de página, análise de interação e medição de desempenho real do usuário tornam-se especialmente valiosos quando combinados com registros do servidor, dados de conversão e testes A/B, permitindo que você responda a perguntas como se os códigos de desconto aumentam a receita ou se uma mudança no layout do formulário melhora conversões.
+
+Isso, por sua vez, oferece uma base sólida para priorizar esforços, fazer mudanças e recompensar o sucesso.
+
+## Continue aprendendo {: #resources}
+
+- [Práticas recomendadas para formulários de login](/sign-in-form-best-practices)
+- [Práticas recomendadas para formulários de inscrição](/sign-up-form-best-practices)
+- [Verifique os números de telefone na web com a API WebOTP](/web-otp)
+- [Crie formulários incríveis](/learn/forms/)
+- [Melhores práticas para design de formulários para celular](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulário mais capazes](/more-capable-form-controls)
+- [Criação de formulários acessíveis](https://webaim.org/techniques/forms/)
+- [Simplificando o fluxo de inscrição usando a API de gerenciamento de credenciais](https://developer.chrome.com/blog/credential-management-api/)
+- [O Guia compulsivo de endereços postais de Frank](http://www.columbia.edu/~fdc/postal/) fornece links úteis e orientação abrangente para formatos de endereço em mais de 200 países.
+- [Listas de países](http://www.countries-list.info/Download-List) tem uma ferramenta para baixar códigos e nomes de países em vários idiomas, em vários formatos.
+
+Foto de [@rupixen](https://unsplash.com/@rupixen) no [Unsplash](https://unsplash.com/photos/Q59HmzK38eQ) .
diff --git a/src/site/content/pt/blog/periodic-background-sync/index.md b/src/site/content/pt/blog/periodic-background-sync/index.md
new file mode 100644
index 00000000000..3d424a0c8ad
--- /dev/null
+++ b/src/site/content/pt/blog/periodic-background-sync/index.md
@@ -0,0 +1,264 @@
+---
+layout: post
+title: Experiências offline mais ricas com a API Periodic Background Sync
+subhead: Sincronize os dados do seu aplicativo da web em segundo plano para uma experiência mais parecida
+authors:
+  - jeffposnick
+  - joemedley
+date: 2019-11-10
+updated: 2020-08-18
+hero: image/admin/Bz7MndcsUGPLAnQwIMfJ.jpg
+alt: Aviões coloridos voando em sincronia
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/4048736065006075905"
+description: |2
+
+  A sincronização periódica em segundo plano permite que os aplicativos da web periodicamente
+
+  sincronizar dados em segundo plano, aproximando os aplicativos da web do comportamento
+
+  de um aplicativo iOS / Android / desktop.
+tags:
+  - capabilities
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Os aplicativos da web devem ser capazes de fazer tudo que os aplicativos iOS/Android/desktop conseguem. O [projeto Capabilities](https://developer.chrome.com/blog/capabilities/) , do qual Periodic Background Sync é apenas uma parte, visa fazer exatamente isso. Para aprender sobre outros recursos e acompanhar seu progresso, siga [Desbloqueando novos recursos para a web](https://developer.chrome.com/blog/capabilities/) . {% endAside %}
+
+Você já esteve em alguma das seguintes situações?
+
+- Andar de trem ou metrô com conectividade instável ou sem conectividade
+- Foi estrangulado pela sua operadora depois de assistir a muitos vídeos
+- Morar em um país onde a largura de banda apresenta obstáculos para atender à demanda
+
+Se sim, então você certamente sentiu a frustração de fazer certas coisas na web e se perguntou por que aplicativos específicos de plataforma costumam se sair melhor nesses cenários. Aplicativos específicos de plataforma podem buscar conteúdo novo, como artigos de notícias ou informações meteorológicas com antecedência. Mesmo que não haja rede no metrô, você ainda pode ler as notícias.
+
+A Sincronização periódica em segundo plano permite que os aplicativos da web sincronizem periodicamente os dados em segundo plano, aproximando os aplicativos da web do comportamento de um aplicativo específico da plataforma.
+
+## Status atual
+
+A tabela abaixo explica o status atual da API Periodic Background Sync.
+
+<table>
+<tr>
+<th markdown="block">Etapa</th>
+<th markdown="block">Status</th>
+</tr>
+<tr>
+<td markdown="block">1. Crie um explicador</td>
+<td markdown="block"><a href="https://github.com/WICG/BackgroundSync/tree/master/explainers">Completo</a></td>
+</tr>
+<tr>
+<td markdown="block">2. Crie o rascunho inicial das especificações</td>
+<td markdown="block"><a href="https://wicg.github.io/periodic-background-sync/" rel="noopener">Completo</a></td>
+</tr>
+<tr>
+<td markdown="block">3. Reúna feedback e repita o design</td>
+<td markdown="block">Em progresso</td>
+</tr>
+<tr>
+<td markdown="block">4. Teste de origem</td>
+<td markdown="block">Completo</td>
+</tr>
+<tr>
+<td markdown="block"><strong>5. Lançamento</strong></td>
+<td markdown="block"><strong>Chrome 80</strong></td>
+</tr>
+</table>
+
+## Tente
+
+Você pode tentar a sincronização periódica em segundo plano com o [aplicativo de demonstração ao vivo](https://webplatformapis.com/periodic_sync/periodicSync_improved.html). Antes de usá-lo, certifique-se de que:
+
+- Você está usando o Chrome 80 ou posterior.
+- Você [instalou](https://developers.google.com/web/fundamentals/app-install-banners/) o aplicativo da web antes de habilitar a sincronização periódica em segundo plano.
+
+## Conceitos e uso
+
+A sincronização periódica em segundo plano permite que você mostre conteúdo novo quando um aplicativo da web progressivo ou página apoiada pelo service worker é iniciado. Ele faz isso baixando dados em segundo plano quando o aplicativo ou página não está sendo usado. Isso evita que o conteúdo do aplicativo seja atualizado após o lançamento enquanto está sendo visualizado. Melhor ainda, evita que o aplicativo mostre um botão giratório de conteúdo antes de atualizar.
+
+Sem a sincronização periódica em segundo plano, os aplicativos da web devem usar métodos alternativos para baixar dados. Um exemplo comum é usar uma notificação push para despertar um service worker. O usuário é interrompido por uma mensagem como 'novos dados disponíveis'. Atualizar os dados é essencialmente um efeito colateral. Você ainda tem a opção de usar notificações push para atualizações realmente importantes, como notícias de última hora significativas.
+
+A sincronização periódica em segundo plano é facilmente confundida com a sincronização em segundo plano. Embora tenham nomes semelhantes, seus casos de uso são diferentes. Entre outras coisas, a sincronização em segundo plano é mais comumente usada para reenviar dados a um servidor quando uma solicitação anterior falha.
+
+### Conseguir o engajamento do usuário da maneira certa
+
+Feito incorretamente, a sincronização periódica em segundo plano pode ser um desperdício de recursos dos usuários. Antes de lançá-lo, o Chrome o colocou em um período de teste para se certificar de que estava certo. Esta seção explica algumas das decisões de design que o Chrome tomou para tornar esse recurso o mais útil possível.
+
+A primeira decisão de design que o Chrome fez é que um aplicativo da web só pode usar a sincronização periódica em segundo plano depois que uma pessoa o instala em seu dispositivo e o abre como um aplicativo distinto. A sincronização periódica em segundo plano não está disponível no contexto de uma guia normal no Chrome.
+
+Além disso, uma vez que o Chrome não quer que aplicativos da web não usados ou raramente usados consumam gratuitamente bateria ou dados, o Chrome projetou uma sincronização periódica em segundo plano de modo que os desenvolvedores terão que obtê-la fornecendo valor aos seus usuários. Concretamente, o Chrome está usando uma [pontuação de engajamento do site](https://www.chromium.org/developers/design-documents/site-engagement) ( `about://site-engagement/` ) para determinar se e com que frequência as sincronizações periódicas de segundo plano podem acontecer para um determinado aplicativo da web. Em outras palavras, um `periodicsync` não será disparado, a menos que a pontuação de engajamento seja maior que zero e seu valor afete a frequência com que o `periodicsync` disparado. Isso garante que os únicos aplicativos sincronizados em segundo plano sejam aqueles que você está usando ativamente.
+
+A sincronização periódica em segundo plano compartilha algumas semelhanças com APIs e práticas existentes em plataformas populares. Por exemplo, a sincronização única em segundo plano, bem como notificações push, permitem que a lógica de um aplicativo da web viva um pouco mais (por meio de seu service worker) depois que uma pessoa fecha a página. Na maioria das plataformas, é comum que as pessoas instalem aplicativos que acessam periodicamente a rede em segundo plano para fornecer uma melhor experiência do usuário para atualizações críticas, pré-busca de conteúdo, sincronização de dados e assim por diante. Da mesma forma, a sincronização periódica em segundo plano também estende a vida útil da lógica de um aplicativo da web para ser executado em períodos regulares por alguns minutos.
+
+Se o navegador permitir que isso ocorra com frequência e sem restrições, isso pode resultar em algumas questões de privacidade. Veja como o Chrome abordou esse risco de sincronização periódica em segundo plano:
+
+- A atividade de sincronização em segundo plano ocorre apenas em uma rede à qual o dispositivo já se conectou. O Chrome recomenda conectar-se apenas a redes operadas por partes confiáveis.
+- Como acontece com todas as comunicações pela Internet, a sincronização periódica em segundo plano revela os endereços IP do cliente, o servidor com o qual está se comunicando e o nome do servidor. Para reduzir essa exposição a aproximadamente o que seria se o aplicativo sincronizasse apenas quando estivesse em primeiro plano, o navegador limita a frequência das sincronizações de plano de fundo de um aplicativo para se alinhar com a frequência com que a pessoa o usa. Se a pessoa parar de interagir com frequência com o aplicativo, a sincronização periódica em segundo plano deixará de ser acionada. Esta é uma melhoria líquida em relação ao status quo em aplicativos específicos da plataforma.
+
+### Quando pode ser usado?
+
+As regras de uso variam de acordo com o navegador. Resumindo, o Chrome coloca os seguintes requisitos na sincronização periódica em segundo plano:
+
+- Uma pontuação específica de engajamento do usuário.
+- Presença de rede utilizada anteriormente.
+
+O tempo das sincronizações não é controlado pelos desenvolvedores. A frequência de sincronização será alinhada com a frequência com que o aplicativo é usado. (Observe que os aplicativos específicos da plataforma atualmente não fazem isso.) Isso também leva ao estado de energia e conectividade do dispositivo.
+
+### Quando deve ser usado?
+
+Quando seu service worker acorda para lidar com um `periodicsync` , você tem a *oportunidade* de solicitar dados, mas não a *obrigação* de fazê-lo. Ao lidar com o evento, você deve levar em consideração as condições da rede e o armazenamento disponível e fazer o download de diferentes quantidades de dados em resposta. Você pode usar os seguintes recursos para ajudar:
+
+- [API de informações de rede](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+- [Detectando o modo de economia de dados](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#detecting_the_save-data_setting)
+- [Estimando o armazenamento disponível](https://developers.google.com/web/updates/2017/08/estimating-available-storage-space)
+
+### Permissões
+
+Depois que o service worker estiver instalado, use a [API de permissões](https://developer.mozilla.org/docs/Web/API/Permissions_API) para consultar a `periodic-background-sync` . Você pode fazer isso a partir de uma janela ou de um contexto de service worker.
+
+```js
+const status = await navigator.permissions.query({
+  name: 'periodic-background-sync',
+});
+if (status.state === 'granted') {
+  // Periodic background sync can be used.
+} else {
+  // Periodic background sync cannot be used.
+}
+```
+
+### Registrando uma sincronização periódica
+
+Como já declarado, a sincronização periódica em segundo plano requer um service worker. Recupere um `PeriodicSyncManager` usando `ServiceWorkerRegistration.periodicSync` e chame `register()` nele. O registro requer um tag e um intervalo mínimo de sincronização ( `minInterval` ). A tag identifica a sincronização registrada para que várias sincronizações possam ser registradas. No exemplo abaixo, o nome da tag é `'content-sync'` e o `minInterval` é um dia.
+
+```js/3-5
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  try {
+    await registration.periodicSync.register('content-sync', {
+      // An interval of one day.
+      minInterval: 24 * 60 * 60 * 1000,
+    });
+  } catch (error) {
+    // Periodic background sync cannot be used.
+  }
+}
+```
+
+### Verificando um registro
+
+Chame `periodicSync.getTags()` para recuperar uma matriz de marcas de registro. O exemplo abaixo usa nomes de tag para confirmar que a atualização do cache está ativa para evitar a atualização novamente.
+
+```js/2,4
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  const tags = await registration.periodicSync.getTags();
+  // Only update content if sync isn't set up.
+  if (!tags.includes('content-sync')) {
+    updateContentOnPageLoad();
+  }
+} else {
+  // If periodic background sync isn't supported, always update.
+  updateContentOnPageLoad();
+}
+```
+
+Você também pode usar `getTags()` para mostrar uma lista de registros ativos na página de configurações do seu aplicativo da web para que os usuários possam habilitar ou desabilitar tipos específicos de atualizações.
+
+### Respondendo a um evento periódico de sincronização em segundo plano
+
+Para responder a um evento periódico de sincronização em segundo plano, adicione um `periodicsync` ao seu service worker. O `event` passado a ele conterá um `tag` correspondente ao valor usado durante o registro. Por exemplo, se uma sincronização periódica em segundo plano foi registrada com o nome `'content-sync'` , então `event.tag` será `'content-sync'` .
+
+```js
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    // See the "Think before you sync" section for
+    // checks you could perform before syncing.
+    event.waitUntil(syncContent());
+  }
+  // Other logic for different tags as needed.
+});
+```
+
+### Cancelando o registro de uma sincronização
+
+Para encerrar uma sincronização registrada, chame `periodicSync.unregister()` com o nome da sincronização que deseja cancelar.
+
+```js
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  await registration.periodicSync.unregister('content-sync');
+}
+```
+
+## Interfaces
+
+Aqui está um resumo rápido das interfaces fornecidas pela API Periodic Background Sync.
+
+- `PeriodicSyncEvent` . Passado para o `ServiceWorkerGlobalScope.onperiodicsync` em um momento de escolha do navegador.
+- `PeriodicSyncManager` . Registra e cancela o registro de sincronizações periódicas e fornece tags para sincronizações registradas. Recupere uma instância desta classe da propriedade ServiceWorkerRegistration.periodicSync`.
+- `ServiceWorkerGlobalScope.onperiodicsync` . Registra um manipulador para receber o `PeriodicSyncEvent` .
+- `ServiceWorkerRegistration.periodicSync` . Retorna uma referência ao `PeriodicSyncManager` .
+
+## Exemplo
+
+### Atualizando conteúdo
+
+O exemplo a seguir usa sincronização periódica em segundo plano para baixar e armazenar em cache artigos atualizados para um site de notícias ou blog. Observe o nome da tag, que indica o tipo de sincronização ( `'update-articles'` ). A chamada para `updateArticles()` é `event.waitUntil()` para que o service worker não seja encerrado antes que os artigos sejam baixados e armazenados.
+
+```js/7
+async function updateArticles() {
+  const articlesCache = await caches.open('articles');
+  await articlesCache.add('/api/articles');
+}
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'update-articles') {
+    event.waitUntil(updateArticles());
+  }
+});
+```
+
+### Adicionar sincronização periódica em segundo plano a um aplicativo da web existente
+
+[Este conjunto de alterações](https://github.com/GoogleChromeLabs/so-pwa/pull/11) foi necessário para adicionar sincronização periódica em segundo plano a um [PWA existente](https://so-pwa.firebaseapp.com/) . Este exemplo inclui várias declarações de registro úteis que descrevem o estado de sincronização periódica em segundo plano no aplicativo da web.
+
+## Depurando
+
+Pode ser um desafio obter uma visão ponta a ponta da sincronização periódica em segundo plano durante o teste local. Informações sobre registros ativos, intervalos de sincronização aproximados e logs de eventos de sincronização anteriores fornecem um contexto valioso ao depurar o comportamento do seu aplicativo da web. Felizmente, você pode encontrar todas essas informações por meio de um recurso experimental no Chrome DevTools.
+
+{% Aside %} A depuração periódica da sincronização em segundo plano está ativada no Chrome 81 e posterior. {% endAside %}
+
+### Gravando atividade local
+
+A **seção Sincronização periódica em segundo plano** do DevTools é organizada em torno dos principais eventos do ciclo de vida da sincronização periódica em segundo plano: registrar para sincronização, executar uma sincronização em segundo plano e cancelar o registro. Para obter informações sobre esses eventos, clique em **Iniciar gravação** .
+
+<figure>{% Img src = "image/admin/wcl5Bm6Pe9xn5Dps6IN6.png", alt = "O botão de gravação em DevTools", width = "708", height = "90" %}<figcaption> O botão de gravação no DevTools</figcaption></figure>
+
+Durante a gravação, as entradas aparecerão no DevTools correspondentes aos eventos, com contexto e metadados registrados para cada um.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/m92Art0OwiM0VyI7czFB.png", alt = "Um exemplo de dados de sincronização periódica de fundo gravados", width = "800", height = "357", style = "max-width: 75%"%}<figcaption> Um exemplo de dados de sincronização periódica em segundo plano registrados</figcaption></figure>
+
+Depois de habilitar a gravação uma vez, ela permanecerá habilitada por até três dias, permitindo que o DevTools capture informações de depuração local sobre sincronizações em segundo plano que podem ocorrer, mesmo em horas no futuro.
+
+### Simulando eventos
+
+Embora a gravação da atividade em segundo plano possa ser útil, há momentos em que você deseja testar seu `periodicsync` imediatamente, sem esperar que um evento seja disparado em sua cadência normal.
+
+Você pode fazer isso por meio da **seção Service Workers** no painel Application no Chrome DevTools. O **campo Periódica Sincronização** permite fornecer uma tag para o evento usar e acioná-lo quantas vezes desejar.
+
+{% Aside %} O acionamento manual de um `periodicsync` requer o Chrome 81 ou posterior. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BQ5QdjwaRDP42cHqW98W.png", alt="A seção 'Service Workers' do painel Application mostra um campo de texto e botão 'Periodic Sync'.", width="800", height=" 321 ", style="max-width: 75%"%}</figure>
+
+## Usando a interface DevTools
+
+A partir do Chrome 81, você verá uma seção **Periodic Background Sync** no painel do *aplicativo DevTools.*
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eYJtJfZ9Qo145lUQe4Ur.png", alt="O painel do aplicativo mostrando a seção de sincronização periódica de fundo", width="382", height="253", style="max-width: 90%"%}</figure>
diff --git a/src/site/content/pt/blog/preconnect-and-dns-prefetch/index.md b/src/site/content/pt/blog/preconnect-and-dns-prefetch/index.md
new file mode 100644
index 00000000000..f4c032c9ec2
--- /dev/null
+++ b/src/site/content/pt/blog/preconnect-and-dns-prefetch/index.md
@@ -0,0 +1,138 @@
+---
+title: Estabeleça conexões de rede com antecedência para melhorar a velocidade percebida da página
+subhead: |2
+
+  Saiba mais sobre dicas de recursos rel = preconnect e rel = dns-prefetch e como usá-los.
+date: 2019-07-30
+hero: image/admin/Dyccd1RLN0fzhjPXswmL.jpg
+alt: Criação de Adão por Michelangelo no teto da Capela Sistina
+authors:
+  - mihajlija
+description: |2
+
+  Saiba mais sobre dicas de recursos rel = preconnect e rel = dns-prefetch e como usá-los.
+tags:
+  - blog
+  - performance
+---
+
+Antes que o navegador possa solicitar um recurso de um servidor, ele deve estabelecer uma conexão. Estabelecer uma conexão segura envolve três etapas:
+
+- Procurar o nome de domínio e resolvê-lo para um endereço IP.
+
+- Configurar uma conexão com o servidor.
+
+- Criptografar a conexão para ter segurança.
+
+Em cada uma dessas etapas, o navegador envia uma parte dos dados a um servidor e o servidor envia de volta uma resposta. Essa viagem, da origem ao destino e de volta, é chamada de [ida e volta](https://developer.mozilla.org/docs/Glossary/Round_Trip_Time_(RTT)).
+
+Dependendo das condições da rede, uma única viagem de ida e volta pode levar um tempo significativo. O processo de configuração da conexão pode envolver até três viagens de ida e volta, e até mais em casos não otimizados.
+
+Cuidar de tudo isso com antecedência torna os aplicativos muito mais rápidos. Esta postagem explica como conseguir isso com duas dicas de recursos: `<link rel=preconnect>` e `<link rel=dns-prefetch>` .
+
+## Estabeleça conexões iniciais com `rel=preconnect`
+
+Os navegadores modernos [fazem o melhor que podem para prever](https://www.igvita.com/posa/high-performance-networking-in-google-chrome/#tcp-pre-connect) quais conexões uma página precisará, mas não podem prever todas com segurança. A boa notícia é que você pode dar a eles uma dica do (recurso 😉).
+
+Adicionar `rel=preconnect` a um `<link>` informa ao navegador que sua página pretende estabelecer uma conexão com outro domínio e que você gostaria que o processo fosse iniciado o mais rápido possível. Os recursos serão carregados mais rapidamente porque o processo de configuração já foi concluído no momento em que o navegador os solicita.
+
+As dicas de recursos recebem esse nome porque não são instruções obrigatórias. Eles fornecem as informações sobre o que você gostaria que acontecesse, mas, em última análise, cabe ao navegador decidir se deseja executá-los. Configurar e manter uma conexão aberta dá muito trabalho, então o navegador pode escolher ignorar dicas de recursos ou executá-las parcialmente, dependendo da situação.
+
+Informar o navegador da sua intenção é tão simples quanto adicionar uma `<link>` à sua página:
+
+```html
+<link rel="preconnect" href="https://example.com">
+```
+
+{% Img src="image/admin/988BgvmiVEAp2YVKt2jq.png", alt="Um diagrama mostrando como o download não começa por um tempo depois que a conexão é estabelecida.", width="800", height="539" %}
+
+Você pode acelerar o tempo de carregamento em 100–500 ms estabelecendo conexões antecipadas com origens de terceiros importantes. Esses números podem parecer pequenos, mas fazem diferença na forma como os [usuários percebem o desempenho da página web](/rail/#focus-on-the-user).
+
+{% Aside %} chrome.com [melhorou o tempo de interação](https://twitter.com/addyosmani/status/1090874825286000640) em quase 1 s ao conectar-se previamente a origens importantes. {% endAside %}
+
+## Casos de uso para `rel=preconnect`
+
+### Saber de *onde*, mas não o *que* você está buscando
+
+Devido às dependências com versão, às vezes você acaba em uma situação em que sabe que estará solicitando um recurso de um CDN específico, mas não o caminho exato até ele.
+
+<figure>{% Img src="image/admin/PsP4qymb1gIp8Ip2sD9W.png", alt="Um url de um script com o nome da versão.", width="450", height="50" %} <figcaption>Um exemplo de URL com versão.</figcaption></figure>
+
+O outro caso comum é carregar imagens de um [CDN de imagem](/image-cdns), em que o caminho exato para uma imagem depende de consultas de mídia ou verificações de recurso de tempo de execução no navegador do usuário.
+
+<figure>{% Img src="image/admin/Xx4ai7tzSq12DJsQXaL1.png", alt="Um URL de CDN de imagem com os parâmetros size = 300x400 e quality = auto.", width="800", height="52" %} <figcaption>Um exemplo de URL de CDN de imagem.</figcaption></figure>
+
+Nessas situações, se o recurso que você busca for importante, você deseja economizar o máximo de tempo possível conectando-se previamente ao servidor. O navegador não fará o download do arquivo até que sua página o solicite, mas pelo menos pode lidar com os aspectos de conexão com antecedência, evitando que o usuário espere várias viagens de ida e volta.
+
+### Streaming de mídia
+
+Outro exemplo em que você pode querer economizar algum tempo na fase de conexão, mas não necessariamente começar a recuperar o conteúdo imediatamente, é ao fazer streaming de mídia de uma origem diferente.
+
+Dependendo de como sua página lida com o conteúdo transmitido, você pode esperar até que seus scripts sejam carregados e estejam prontos para processar o fluxo. A pré-conexão ajuda a reduzir o tempo de espera para uma única viagem de ida e volta quando você estiver pronto para começar a buscar.
+
+## Como implementar `rel=preconnect`
+
+Uma forma de iniciar uma `preconnect` é adicionar uma tag `<link>` ao `<head>` do documento.
+
+```html
+<head>
+    <link rel="preconnect" href="https://example.com">
+</head>
+```
+
+A pré-conexão só é eficaz para domínios diferentes do domínio de origem, portanto, você não deve usá-la em seu site.
+
+{% Aside 'caution' %} Faça a pré-conexão apenas a domínios críticos que você usará em breve, porque o navegador fecha qualquer conexão que não seja usada em 10 segundos. A pré-conexão desnecessária pode atrasar outros recursos importantes, portanto, limite o número de domínios pré-conectados e [teste o impacto da pré-conexão](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/). {% endAside %}
+
+Você também pode iniciar uma pré-conexão por meio do [cabeçalho HTTP `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link):
+
+`Link: <https://example.com/>; rel=preconnect`
+
+{% Aside %} Um benefício de especificar uma dica de pré-conexão no cabeçalho HTTP é que ele não depende da análise de marcação e pode ser acionado por solicitações de folhas de estilo, scripts e muito mais. Por exemplo, o Google Fonts envia um `Link` na resposta da folha de estilo para se conectar ao domínio que hospeda os arquivos de fontes. {% endAside %}
+
+Alguns tipos de recursos, como fontes, são carregados no [modo anônimo](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements). Para aqueles, você deve definir o `crossorigin` com a dica de `preconnect`
+
+```html
+<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
+```
+
+Se você omitir o `crossorigin`, o navegador executará apenas a consulta DNS.
+
+## Resolva o nome de domínio antecipadamente com `rel=dns-prefetch`
+
+Você se lembra dos sites por seus nomes, mas os servidores se lembram deles por endereços IP. É por isso que existe o sistema de nomes de domínio (DNS). O navegador usa DNS para converter o nome do site em um endereço IP. Esse processo [- resolução de nome de domínio](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/) - é a primeira etapa para estabelecer uma conexão.
+
+Se uma página precisa fazer conexões com muitos domínios de terceiros, pré-conectar todos eles é contraproducente. A dica `preconnect` é melhor usada apenas para as conexões mais críticas. Para todo o resto, use `<link rel=dns-prefetch>` para economizar tempo na primeira etapa, a pesquisa de DNS, que geralmente leva cerca de [20-120 ms](https://www.keycdn.com/support/reduce-dns-lookups).
+
+A resolução de DNS é iniciada de forma semelhante à `preconnect`: adicionando uma tag `<link>` ao `<head>` do documento.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[O suporte do navegador para `dns-prefetch`](https://caniuse.com/#search=dns-prefetch) é um pouco diferente do [suporte](https://caniuse.com/#search=preconnect) [`preconnect`](https://caniuse.com/#search=preconnect), então `dns-prefetch` pode servir como um substituto para navegadores que não oferecem suporte para `preconnect`.
+
+{% Compare 'better' %}
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+{% CompareCaption %} Para implementar com segurança a técnica de fallback, use tags de link separadas. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```html
+<link rel="preconnect dns-prefetch" href="http://example.com">
+```
+
+{% CompareCaption %} Implementar um fallback `dns-prefetch` na mesma `<link>` causa um bug no Safari em que a `preconnect` é cancelada. {% endCompareCaption %}
+
+{% endCompare %}
+
+## Conclusão
+
+Essas duas dicas de recursos são úteis para melhorar a velocidade da página quando você sabe que fará o download de algo de um domínio de terceiros em breve, mas não sabe o URL exato do recurso. Os exemplos incluem CDNs que distribuem bibliotecas, imagens ou fontes JavaScript. Esteja atento às restrições, use a `preconnect` apenas para os recursos mais importantes, conte com `dns-prefetch` para o resto e sempre meça o impacto no mundo real.
diff --git a/src/site/content/pt/blog/prefers-reduced-motion/index.md b/src/site/content/pt/blog/prefers-reduced-motion/index.md
new file mode 100644
index 00000000000..a3c91e8ad8f
--- /dev/null
+++ b/src/site/content/pt/blog/prefers-reduced-motion/index.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: 'prefere movimento reduzido: às vezes, menos movimento é mais'
+subhead: |2
+
+  A consulta de mídia preferencialmente reduzida detecta se o usuário solicitou
+
+  o sistema operacional para minimizar a quantidade de animação ou movimento que usa.
+authors:
+  - thomassteiner
+description: "A consulta de mídia preferencialmente reduzida detecta se o usuário solicitou que o sistema minimizasse a quantidade de animação ou movimento que usa. Isso é para usuários que exigem ou preferem animações minimizadas; por exemplo, pessoas com distúrbios vestibulares geralmente desejam que as animações sejam reduzidas ao mínimo."
+date: 2019-03-11
+updated: 2019-12-10
+tags:
+  - blog
+  - media-queries
+  - css
+hero: image/admin/LI2vYKZwQ98w3MLtUF8V.jpg
+alt: Lapso de tempo da mulher em um trem
+feedback:
+  - api
+---
+
+Nem todo mundo gosta de animações ou transições decorativas, e alguns usuários ficam enjoados quando enfrentam rolagem paralaxe, efeitos de zoom e assim por diante. O Chrome 74 oferece suporte a uma consulta de mídia de preferência do usuário `prefers-reduced-motion` que permite criar uma variante de movimento reduzido de seu site para usuários que expressaram essa preferência.
+
+## Muito movimento na vida real e na web
+
+Outro dia, eu estava patinando no gelo com meus filhos. Estava um dia lindo, o sol estava forte e a pista de gelo estava lotada de gente ⛸. O único problema com isso: eu não lido bem com multidões. Com tantos alvos móveis, não consigo me concentrar em nada, acabo perdido e com uma sensação de total sobrecarga visual, quase como olhar para um formigueiro 🐜.
+
+<figure>{% Img src="image/admin/JA5v1s8gSBk70eJBB8xW.jpg", alt="Multidão de pés de pessoas que patinam no gelo", width="580", height="320" %} <figcaption>Sobrecarga visual na vida real.</figcaption></figure>
+
+Ocasionalmente, o mesmo pode acontecer na web: com anúncios piscando, efeitos extravagantes de paralaxe, animações de revelação surpreendentes, vídeos de reprodução automática e assim por diante, *a web às vezes pode ser bastante opressora* … Felizmente, ao contrário da vida real, há uma solução para isso . A consulta de mídia CSS `prefers-reduced-motion` permite que os desenvolvedores criem uma variante de uma página para usuários que, bem, preferem movimento reduzido. Isso pode incluir qualquer coisa, desde evitar a reprodução automática de vídeos até a desativação de certos efeitos puramente decorativos e até o redesenho completo de uma página para determinados usuários.
+
+Antes de mergulhar no recurso, vamos dar um passo para trás e pensar em como as animações são usadas na web. Se desejar, você também pode pular as informações básicas e [ir direto para os detalhes técnicos](#working-with-the-media-query) abaixo.
+
+## Animação na web
+
+A animação é frequentemente usada para fornecer *feedback* ao usuário, por exemplo, para informá-lo de que uma ação foi recebida e está sendo processada. Por exemplo, em um site de compras, um produto pode ser animado para "voar" em um carrinho de compras virtual, representado como um ícone no canto superior direito do site.
+
+Outro caso de uso envolve o uso de movimento para [hackear a percepção do usuário](https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3) usando uma mistura de telas de esqueleto, metadados contextuais e visualizações de imagem de baixa qualidade para ocupar muito do tempo do usuário e fazer com que toda a experiência *pareça mais rápida*. A ideia é dar contexto ao usuário do que está por vir e, enquanto isso, carregar as coisas o mais rápido possível.
+
+Finalmente, existem *efeitos decorativos* como gradientes animados, rolagem paralaxe, vídeos de fundo e vários outros. Enquanto muitos usuários gostam de tais animações, alguns usuários não gostam delas porque se sentem distraídos ou retardados por elas. No pior dos casos, os usuários podem até sofrer de enjôo como se fosse uma experiência da vida real, portanto, para esses usuários, reduzir as animações é uma *necessidade médica*.
+
+## Desordem do espectro vestibular desencadeada por movimento
+
+Alguns usuários se [distraem ou sentem náusea com o conteúdo animado](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). Por exemplo, as animações de rolagem podem causar distúrbios vestibulares quando outros elementos além do elemento principal associado à rolagem se movem muito. Por exemplo, as animações de rolagem em paralaxe podem causar distúrbios vestibulares porque os elementos do plano de fundo se movem em uma taxa diferente dos elementos do primeiro plano. As reações de distúrbios vestibulares (ouvido interno) incluem tontura, náusea e enxaqueca e, às vezes, é necessário repouso na cama para se recuperar.
+
+## Remover movimento em sistemas operacionais
+
+Muitos sistemas operacionais tiveram configurações de acessibilidade para especificar uma preferência por movimento reduzido por um longo tempo. As capturas de tela abaixo mostram a preferência **Reduzir movimento** do macOS Mojave e a preferência **Remover animações** do Android Pie. Quando marcadas, essas preferências fazem com que o sistema operacional não use efeitos decorativos, como animações de inicialização de aplicativos. Os próprios aplicativos também podem e devem respeitar essa configuração e remover todas as animações desnecessárias.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KwuLNPefeDzUfR17EUtr.png", alt="Uma captura de tela da tela de configurações do macOS com a caixa de seleção 'Reduzir movimento' marcada.", width="398", height="300" %}</figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qed7yE6FKVQ5YXHn0TbJ.png", alt="Uma captura de tela da tela de configurações do Android com a caixa de seleção 'Remover animações' marcada.", width="287", height="300" %}</figure>
+</div>
+
+## Remover movimento na web
+
+[Media Queries Nível 5](https://drafts.csswg.org/mediaqueries-5/) traz a preferência do usuário de movimento reduzido para a web também. As consultas de mídia permitem que os autores testem e consultem valores ou recursos do agente do usuário ou dispositivo de exibição, independentemente do documento que está sendo processado. A consulta de mídia [`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion) é usada para detectar se o usuário definiu uma preferência de sistema operacional para minimizar a quantidade de animação ou movimento que usa. Pode ter dois valores possíveis:
+
+- `no-preference`: indica que o usuário não deu preferência ao sistema operacional subjacente. Este valor de palavra-chave é avaliado como `false` no contexto booleano.
+- `reduce`: indica que o usuário definiu uma preferência de sistema operacional indicando que as interfaces devem minimizar o movimento ou a animação, de preferência até o ponto em que todos os movimentos não essenciais sejam removidos.
+
+## Trabalhando com a consulta de mídia
+
+{% Aside %} Consulte [Posso usar a consulta de mídia preferencial com movimento reduzido?](https://caniuse.com/#feat=prefers-reduced-motion) para descobrir quais navegadores suportam `prefers-reduced-motion`. {% endAside %}
+
+Como acontece com todas as consultas de mídia, o movimento `prefers-reduced-motion` pode ser verificado a partir de um contexto CSS e de um contexto JavaScript.
+
+Para ilustrar ambos, digamos que eu tenha um botão de inscrição importante no qual desejo que o usuário clique. Eu poderia definir uma animação de "vibração" que chamasse a atenção, mas, como um bom cidadão da web, só vou reproduzi-la para os usuários que estão explicitamente bem com animações, mas não para todos os outros, que podem ser usuários que optaram por não receber animações, ou usuários em navegadores que não entendem a consulta de mídia.
+
+```css
+/*
+  If the user has expressed their preference for
+  reduced motion, then don't use animations on buttons.
+*/
+@media (prefers-reduced-motion: reduce) {
+  button {
+    animation: none;
+  }
+}
+
+/*
+  If the browser understands the media query and the user
+  explicitly hasn't set a preference, then use animations on buttons.
+*/
+@media (prefers-reduced-motion: no-preference) {
+  button {
+    /* `vibrate` keyframes are defined elsewhere */
+    animation: vibrate 0.3s linear infinite both;
+  }
+}
+```
+
+{% Aside %}
+Se você tem muito CSS relacionado à animação, pode evitar que os usuários que optaram por não façam o download terceirizando todo o CSS relacionado à animação em uma folha de estilo separada que você carrega apenas condicionalmente por `media` atributo de mídia no elemento de `link`: `<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">`
+{% endAside %}
+
+Para ilustrar como trabalhar com `prefers-reduced-motion` com JavaScript, vamos imaginar que eu tenha definido uma animação complexa com a [API Web Animations](https://developer.mozilla.org/docs/Web/API/Web_Animations_API). Embora as regras CSS sejam acionadas dinamicamente pelo navegador quando a preferência do usuário muda, para animações JavaScript eu mesmo tenho que escutar as mudanças e, em seguida, parar manualmente minhas animações em potencial (ou reiniciá-las se o usuário permitir):
+
+```js
+const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+mediaQuery.addEventListener('change', () => {
+  console.log(mediaQuery.media, mediaQuery.matches);
+  // Stop JavaScript-based animations.
+});
+```
+
+Observe que os parênteses em torno da consulta de mídia real são obrigatórios:
+
+{% Compare 'worse' %}
+
+```js
+window.matchMedia('prefers-reduced-motion: reduce')
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.matchMedia('(prefers-reduced-motion: reduce)')
+```
+
+{% endCompare %}
+
+## Demo
+
+Criei uma pequena demo baseada nos incríveis [gatos de status de HTTP 🐈](https://http.cat/) de Rogério Vicente. Primeiro, pare um pouco para apreciar a piada, é hilária e vou esperar. Agora que você voltou, vou apresentar a [demonstração](https://prefers-reduced-motion.glitch.me). Quando você rola para baixo, cada gato de status HTTP aparece alternadamente do lado direito ou esquerdo. É uma animação de 60 FPS muito suave, mas como descrito acima, alguns usuários podem não gostar ou até ficar enjoados com ela, então a demo está programada para respeitar o movimento `prefers-reduced-motion`. Isso funciona até mesmo dinamicamente, para que os usuários possam alterar suas preferências rapidamente, sem a necessidade de recarregar. Se um usuário preferir movimento reduzido, as animações de revelação não necessárias desaparecem e apenas o movimento de rolagem regular é deixado. O screencast abaixo mostra a demonstração em ação:
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/zWs45QPPI9C8CjF813Zx.mp4", muted=true, playsinline=true, controls=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CQAw3Ee43Dcv0JOsm9fl.png" %} <figcaption>Vídeo do aplicativo de <a href="https://prefers-reduced-motion.glitch.me">demonstração <code>prefers-reduced-motion</code></a></figcaption></figure>
+
+## Conclusões
+
+Respeitar as preferências do usuário é fundamental para sites modernos, e os navegadores estão expondo cada vez mais recursos para permitir que os desenvolvedores da web façam isso. Outro exemplo lançado é [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme), que detecta se o usuário prefere um esquema de cores claras ou escuras. Você pode ler tudo sobre o `prefers-color-scheme` em meu artigo [Hello Darkness, My Old Friend](/prefers-color-scheme) 🌒.
+
+O CSS Working Group está padronizando mais [consultas de mídia de preferência do usuário,](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) como[`prefers-reduced-transparency`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency) (detecta se o usuário prefere transparência reduzida), [`prefers-contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast) (detecta se o usuário solicitou ao sistema para aumentar ou diminuir a quantidade de contraste entre os adjacentes cores) e [`inverted-colors`](https://drafts.csswg.org/mediaqueries-5/#inverted) (detecta se o usuário prefere cores invertidas). 👀 Observe este espaço, com certeza iremos informá-lo assim que forem lançados no Chrome!
+
+## (Bônus) Forçando movimento reduzido em todos os sites
+
+Nem todo site usará `prefers-reduced-motion` ou talvez não o suficiente para o seu gosto. Se você, por algum motivo, quiser interromper o movimento em todos os sites, pode. Uma maneira de fazer isso acontecer é injetar uma folha de estilo com o seguinte CSS em cada página da web que você visitar. Existem várias [extensões de navegador](https://chrome.google.com/webstore/search/user%20stylesheets?_category=extensions) por aí (use por sua própria conta e risco!) Que permitem isso.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+```
+
+A maneira como isso funciona é que o CSS acima substitui as durações de todas as animações e transições para um período tão curto que não são mais perceptíveis. Como alguns sites dependem de uma animação para rodar para funcionar corretamente (talvez porque uma determinada etapa dependa do disparo do [evento de fim de `animationend`](https://developer.mozilla.org/docs/Web/API/HTMLElement/animationend_event)), a `animation: none !important;` abordagem não funcionaria. Mesmo o hack acima não tem garantia de sucesso em todos os sites (por exemplo, ele não pode parar o movimento que foi iniciado por meio da [API do Web Animations](https://developer.mozilla.org/docs/Web/API/Web_Animations_API)), portanto, certifique-se de desativá-lo quando notar uma quebra.
+
+## Links Relacionados
+
+- Mais recente rascunho do editor das especificações de [nível 5 do Media Queries.](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion)
+- `prefers-reduced-motion` no [Chrome Platform Status](https://www.chromestatus.com/feature/5597964353404928).
+- `prefers-reduced-motion` [bug do Chromium de](http://crbug.com/722548) movimento reduzido.
+- Blink [publicação Intent to Implement](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/NZ3c9d4ivA8/BIHFbOj6DAAJ).
+
+## Reconhecimentos
+
+Um grande [elogio a Stephen McGruer,](https://github.com/stephenmcgruer) que implementou o movimento `prefers-reduced-motion` no Chrome e - junto com [Rob Dodson](https://twitter.com/rob_dodson) - também revisou este artigo. [Imagem do herói](https://unsplash.com/photos/im7Tiw1OY7c) por Hannah Cauhepe em Unsplash.
diff --git a/src/site/content/pt/blog/preload-optional-fonts/index.md b/src/site/content/pt/blog/preload-optional-fonts/index.md
new file mode 100644
index 00000000000..a9c08128d9f
--- /dev/null
+++ b/src/site/content/pt/blog/preload-optional-fonts/index.md
@@ -0,0 +1,70 @@
+---
+title: Impedindo o deslocamento de layout e flashes de texto invisível (FOIT) ao carregar fontes opcionais
+subhead: 'A partir do Chrome 83, o link rel="preload" e font-display: optional podem ser combinados para remover completamente o erro do layout'
+authors:
+  - houssein
+date: 2020-03-18
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
+alt: Uma grande letra A de um tipo definido sobre uma mesa branca.
+description: 'Ao otimizar os ciclos de renderização, o Chrome 83 elimina o deslocamento de layout quando pré-carregar fontes opcionais. Combinando <link rel="preload"> com font-display: opcional é o maneira mais eficaz de garantir a renderização livre de falhas de fontes personalizadas.'
+tags:
+  - blog
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+{% Aside %} No Chrome 83, novas melhorias no carregamento de fontes foram feitas para eliminar completamente o deslocamento de layout e flash de texto invisível (FOIT) quando fontes opcionais forem pré-carregadas. {% endAside %}
+
+Ao otimizar os ciclos de renderização, o Chrome 83 elimina o deslocamento de layout ao pré-carregar fontes opcionais. Combinando `<link rel="preload">` com `font-display: optional` é a maneira mais eficaz de garantir que não haja erros de layout ao renderizar fontes personalizadas.
+
+## Compatibilidade do navegador  {: #compatibility }
+
+Verifique os dados do MDN para obter informações atualizadas de suporte para vários navegadores:
+
+- [`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)
+- [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
+
+## Renderização de fonte
+
+O deslocamento de layout, ou re-layout, ocorre quando um recurso em uma página da web muda dinamicamente, resultando em um "deslocamento" de conteúdo. Buscar e renderizar fontes da web pode causar deslocamentos de layout diretamente de duas maneiras:
+
+- Uma fonte de fallback foi trocada por uma nova fonte ("flash de texto sem estilo")
+- O texto "invisível" é mostrado até que uma nova fonte seja renderizada na página ("flash de texto invisível")
+
+A propriedade CSS [`font-display`](https://font-display.glitch.me/) fornece uma maneira de modificar o comportamento de renderização de fontes personalizadas por meio de uma variedade de diferentes valores suportados (`auto`, `block`, `swap`, `fallback`, e `optional`). A escolha de qual valor usar depende do comportamento preferido para fontes carregadas de forma assíncrona. No entanto, cada um desses valores suportados pode acionar o re-layout de uma das duas maneiras listadas acima, até o momento!
+
+{% Aside %} A métrica [Cumulative Layout Shift](/cls/) torna possível medir a instabilidade do layout em uma página da web. {% endAside %}
+
+## Fontes opcionais
+
+A `font-display` usa uma linha do tempo de três períodos para lidar com as fontes que precisam ser baixadas antes de serem renderizadas:
+
+- **Block:** renderiza o texto "invisível", mas muda para a fonte da web assim que terminar de carregar.
+- **Swap:** renderize o texto usando uma fonte de fallback do sistema, mas mude para a fonte da web assim que terminar de carregar.
+- **Fail:** renderiza o texto usando uma fonte do sistema de fallback.
+
+Anteriormente, as fontes designadas com `font-display: optional` tinham um período de block de 100 ms e nenhum período de swap. Isso significa que o texto "invisível" é exibido rapidamente antes de mudar para uma fonte de fallback. Se a fonte não for baixada em 100 ms, a fonte de fallback será usada e nenhuma mudança ocorrerá.
+
+<figure>{% Img src = "image/admin/WHLORYEu864QRRveFQUz.png", alt = "Diagrama mostrando o comportamento da fonte opcional anterior quando a fonte falha no carregamento", width = "800", height = "340"%}<figcaption> <code>font-display: optional</code> anterior: comportamento opcional no Chrome quando a fonte é baixada <b>após</b> o período de block de 100 ms</figcaption></figure>
+
+No entanto, no caso de a fonte ser baixada antes de o período de bloco de 100 ms terminar, a fonte personalizada é renderizada e usada na página.
+
+<figure>{% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="Diagrama mostrando o comportamento da fonte opcional anterior quando a fonte carrega no tempo", width = "800", height = "318"%}<figcaption> <code>font-display: optional</code> anterior: comportamento opcional no Chrome quando a fonte é baixada <b>antes</b> do período de bloco de 100 ms</figcaption></figure>
+
+O Chrome renderiza novamente a página **duas vezes** em ambos os casos, independentemente de a fonte de fallback ser usada ou se a fonte personalizada terminar de carregar a tempo. Isso causa uma leve cintilação do texto invisível e, nos casos em que uma nova fonte é renderizada, um erro de layout que move parte do conteúdo da página. Isso ocorre mesmo se a fonte estiver armazenada no cache de disco do navegador e puder ser carregada bem antes de o período de block terminar.
+
+As [otimizações](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632) chegaram ao Chrome 83 para remover totalmente o primeiro ciclo de renderização para fontes opcionais que são pré-carregadas com [`<link rel="preload'>`](/codelab-preload-web-fonts/). Em vez disso, a renderização é bloqueada até que a fonte personalizada termine de carregar ou um determinado período de tempo tenha passado. Esse período de tempo limite está definido atualmente em 100 ms, mas pode mudar em um futuro próximo para otimizar o desempenho.
+
+<figure>{% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="Diagrama mostrando o comportamento da nova fonte opcional pré-carregada quando a fonte falha ao carregar", width="800", height="353" %} <figcaption>Novo comportamento <code>font-display: optional</code> no Chrome quando as fontes são pré-carregadas e a fonte é baixada <b>após</b> o período de block de 100 ms (sem flash de texto invisível)</figcaption></figure>
+
+<figure>{% Img src="image/admin/OEHClGFMFspaWjb3xXLY.png", alt="Diagrama mostrando o comportamento da nova fonte opcional pré-carregada quando a fonte carrega no tempo", width="800", height="346" %} <figcaption>Novo comportamento <code>font-display: optional</code> no Chrome quando as fontes são pré-carregadas e a fonte é baixada <b>antes</b> do período de block de 100 ms (sem flash de texto invisível)</figcaption></figure>
+
+O pré-carregamento de fontes opcionais no Chrome remove a possibilidade de erros de layout e flashes de texto sem estilo. Isso corresponde ao comportamento necessário, conforme especificado no [Módulo de Fontes CSS Nível 4,](https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional) onde as fontes opcionais nunca devem causar um novo layout e os agentes do usuário podem, em vez disso, atrasar a renderização por um período de tempo adequado.
+
+Embora não seja necessário pré-carregar uma fonte opcional, melhora muito a chance de carregar antes do primeiro ciclo de renderização, especialmente se ainda não estiver armazenada no cache do navegador.
+
+## Conclusão
+
+A equipe do Chrome está interessada em ouvir suas experiências de pré-carregamento de fontes opcionais com essas novas otimizações em vigor! Caso tenha alguma [dúvida](https://bugs.chromium.org/p/chromium/issues/entry) ou se quiser apresentar alguma sugestão de recursos, entre em contato.
diff --git a/src/site/content/pt/blog/promises/index.md b/src/site/content/pt/blog/promises/index.md
new file mode 100644
index 00000000000..904d2d20752
--- /dev/null
+++ b/src/site/content/pt/blog/promises/index.md
@@ -0,0 +1,763 @@
+---
+title: 'Promessas (Promises) em JavaScript: uma introdução'
+subhead: |-
+  As promises (promessas) simplificam as computações adiadas e assíncronas. Uma promessa representa
+  uma operação que ainda não foi concluída.
+description: |-
+  As promises (promessas) simplificam as computações adiadas e assíncronas. Uma promessa representa
+  uma operação que ainda não foi concluída.
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+Desenvolvedores, preparem-se para um momento crucial na história do desenvolvimento web.
+
+<em>[Rufam os tambores]</em>
+
+O JavaScript agora tem promessas!
+
+<em>[Fogos de artifício explodem, chuvas de papel cintilante, a multidão enlouquece]</em>
+
+Nessa hora, você provavelmente se enquadra numa destas categorias:
+
+- As pessoas estão torcendo ao seu redor, mas você não tem ideia da razão de tanto barulho. Talvez você nem tenha ideia do que seja uma "promessa". Você daria de ombros, mas o peso do papel brilhante está pesando sobre seus ombros. Se for assim, não se preocupe, eu mesmo demorei muito para descobrir por que deveria me importar com isso. Você provavelmente vai querer começar do [início](#whats-all-the-fuss-about).
+- Você dá um soco no ar! Viva! Já era hora, hein? Você já usou essas coisas que chamam de Promises antes, mas acha chato porque todas as implementações têm uma API ligeiramente diferente. Qual será a API que foi adotada na versão oficial do JavaScript? Nesse caso, você provavelmente vai querer começar com a [terminologia](#promise-terminology).
+- Você já conhecia tudo sobre isso e zomba daqueles que estão pulando para cima e para baixo como se fosse uma grande novidade. Reserve um momento para se deleitar com sua própria superioridade e, em seguida, vá direto para a [referência](#promise-api-reference) da API.
+
+## Por que tanto barulho? {: #whats-all-the-fuss-about }
+
+JavaScript é uma linguagem de thread único, o que significa que dois bits de script não podem ser executados ao mesmo tempo; eles têm que executar um depois do outro. Nos navegadores, o JavaScript ainda compartilha um mesmo thread com um monte de outras coisas que diferem de navegador para navegador. Mas normalmente o JavaScript está na mesma fila que operações de renderização de tela, atualização de estilos e resposta às ações do usuário (como realce de texto e interação com controles de formulário). Qualquer atividade numa dessas áreas atrasa as outras.
+
+Como ser humano, você é multithreaded. Você pode digitar com vários dedos, pode dirigir e manter uma conversa ao mesmo tempo. A única função de bloqueio com a qual temos de lidar é o espirro, onde toda a atividade atual precisa ser suspensa durante o espirro. Isso é muito chato, especialmente quando você está dirigindo e tentando manter uma conversa. Você não vai querer escrever um código que espirra.
+
+Você provavelmente já usou eventos e callbacks para contornar situações desse tipo. Aqui estão alguns eventos:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // woo yey imagem carregou
+});
+
+img1.addEventListener('error', function() {
+  // argh tudo deu errado
+});
+```
+
+Esse código não causa nenhum espirro. Pegamos a imagem, adicionamos alguns ouvintes e o JavaScript pode parar de executar até que um desses ouvintes seja chamado.
+
+Infelizmente, no exemplo acima, é possível que os eventos tenham acontecido antes de começarmos a dar atenção a eles, então precisamos contornar essa situação usando a propriedade "complete" das imagens:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // woo yey imagem carregou
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // argh tudo deu errado
+});
+```
+
+Isto não captura imagens que deram erro antes de serem ouvidas; infelizmente, o DOM não fornece uma maneira de lidar com esse problema. Além disso, esse código está carregando apenas uma imagem. As coisas ficam ainda mais complexas se quisermos saber quando um conjunto de imagens foi carregado.
+
+## Os eventos nem sempre são a melhor alternativa
+
+Eventos são ótimos para coisas que podem acontecer várias vezes no mesmo objeto: `keyup`, `touchstart`, etc. Com esses eventos você não precisa se preocupar com o que aconteceu antes do ouvinte ser registrado. Mas quando se trata de uma situação de sucesso/falha assíncrona, o ideal é que você tenha algo assim:
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // carregou
+}).orIfFailedCallThis(function() {
+  // falhou
+});
+
+// e…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // tudo carregou
+}).orIfSomeFailedCallThis(function() {
+  // um ou mais falharam
+});
+```
+
+Isso é o que fazem as promessas, mas com uma nomenclatura melhor. Se os elementos de imagem HTML tivessem um método "ready" que retornasse uma promessa, poderíamos fazer o seguinte:
+
+```js
+img1.ready()
+.then(function() {
+  // carregou
+}, function() {
+  // falhou
+});
+
+// e…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // tudo carregou
+}, function() {
+  // um ou mais falharam
+});
+```
+
+Basicamente, as promessas são um pouco como ouvintes de eventos, exceto que:
+
+- Uma promessa só pode ter sucesso ou falhar uma única vez. Ela não pode ter sucesso ou falhar duas vezes, nem pode mudar de sucesso para falha ou vice-versa.
+- Se uma promessa foi bem-sucedida ou falhou e mais tarde você adicionar um callback de sucesso/falha, o callback correto será chamado, mesmo que o evento tenha ocorrido antes.
+
+Isto é extremamente útil para situações de sucesso/falha assíncronas, porque você está menos interessado no momento exato em que algo foi disponibilizado e mais interessado em reagir ao resultado.
+
+## Terminologia das promessas {: #promise-terminology }
+
+[Domenic Denicola](https://twitter.com/domenic) revisou o primeiro rascunho deste artigo e me deu nota "F" pela terminologia. Ele me colocou de castigo, me forçou a copiar [States and Fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) 100 vezes e escreveu uma carta preocupante para meus pais. Apesar disso, ainda confundo muito a terminologia, mas aqui estão seus princípios básicos:
+
+Uma promessa pode ser:
+
+- **cumprida** (fulfilled) - a ação relativa à promessa foi bem-sucedida
+- **rejeitada** (rejected) - a ação relativa à promessa falhou
+- **pendente** (pending) - ainda não cumprida ou rejeitada
+- **resolvida** (settled) - cumpriu ou rejeitou
+
+[A especificação](https://www.ecma-international.org/ecma-262/#sec-promise-objects) também usa o termo **thenable** para descrever um objeto que é semelhante a uma promessa, no sentido que possui um método `then`. Este termo me lembra o ex-técnico da seleção inglesa [Terry Venables](https://en.wikipedia.org/wiki/Terry_Venables), então vou usá-lo o mínimo possível.
+
+## O JavaScript agora tem promessas!
+
+As promessas já existem há bastante tempo na forma de bibliotecas, como:
+
+- [Q](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+As bibliotecas acima e as promessas do JavaScript compartilham um comportamento comum e padronizado chamado [Promises/A+](https://github.com/promises-aplus/promises-spec). Se você é um usuário jQuery, eles têm algo parecido que chamam de [Deferreds](https://api.jquery.com/category/deferred-object/). No entanto, os Deferreds não são compatíveis com Promise/A+, o que os torna [sutilmente diferentes e menos úteis](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/), portanto, tome cuidado. O jQuery também tem [um tipo Promise](https://api.jquery.com/Types/#Promise), mas é apenas um subconjunto de Deferred e tem os mesmos problemas.
+
+Embora as implementações de promessas sigam um comportamento padronizado, suas APIs em geral diferem. As Promises do JavaScript são semelhantes na API ao RSVP.js. Veja como você cria uma promessa usando JavaScript:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // fazer algo, possivelmente async, depois…
+
+  if (/* tudo deu certo */) {
+    resolve("Funcionou!");
+  }
+  else {
+    reject(Error("Deu errado"));
+  }
+});
+```
+
+O construtor Promise recebe um argumento, que é um callback com dois parâmetros, resolve e reject, acima. Faça algo dentro do callback, talvez algo assíncrono, e depois chame resolve() se tudo deu certo; caso contrário, chame reject().
+
+Assim como `throw` no JavaScript clássico, é comum, mas não obrigatório, chamar reject() com um objeto Error. A vantagem dos objetos Error é que eles capturam um rastreamento de pilha, facilitando a vida das ferramentas de depuração.
+
+Eis como você poderia usar essa promessa:
+
+```js
+promise.then(function(result) {
+  console.log(result); // "Funcionou!"
+}, function(err) {
+  console.log(err); // Error: "Deu errado"
+});
+```
+
+O método `then()` recebe dois argumentos, um callback para um caso de sucesso e outro para o caso de falha. Ambos são opcionais, portanto, você pode, se quiser, adicionar um retorno de chamada apenas para o caso de sucesso ou falha.
+
+As promessas JavaScript apareceram inicialmente no DOM como "Futures", depois foram renomeadas para "Promises" e finalmente entraram na linguagem JavaScript. Tê-las na linguagem JavaScript em vez de no DOM é muito bom porque elas também estarão disponíveis nos contextos JS sem navegador, como o Node.js (se eles fazem uso delas em suas APIs principais é outra questão).
+
+Embora sejam um recurso JavaScript, o DOM não tem medo de usá-los. Na verdade, todas as novas APIs DOM com métodos assíncronos de sucesso/falha usarão promessas. Isto já está acontecendo com [Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota), [Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready), [ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17), [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options), [Streams](https://github.com/whatwg/streams#basereadablestream) e muito mais.
+
+## Suporte a navegadores e polyfills
+
+Hoje já existem implementações de promessas em vários navegadores.
+
+No Chrome 32, Opera 19, Firefox 29, Safari 8 e Microsoft Edge, as promessas são ativadas por default.
+
+Para navegadores que não possuem uma implementação completa de promessas em conformidade com as especificações, ou para adicionar o recurso de promessas para outros navegadores e Node.js, dê uma olhada no [polyfill](https://github.com/jakearchibald/ES6-Promises#readme) (2k gzipado).
+
+## Compatibilidade com outras bibliotecas
+
+A API Promises do JavaScript vai tratar qualquer coisa que tenha um `then()` como sendo parecido com promessa, "promise-like" (ou `thenable`, no, *argh*, linguajar de promessa), então se você usar uma biblioteca que retorna uma promessa Q, tudo bem, ela funcionará bem com as novas promessas do JavaScript.
+
+Embora, como mencionei, os Deferreds do jQuery são um tanto … inúteis. Por sorte você pode transformá-los em promessas padrão, o que vale a pena fazer o quanto antes:
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+Aqui, o `$.ajax` do jQuery retorna um Deferred. Já que ele tem um método `then()`, `Promise.resolve()` poderá transformá-lo numa promessa JavaScript. No entanto, às vezes os deferreds passam múltiplos argumentos para seus callbacks, por exemplo:
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+Enquanto que JS promete ignorar todos, exceto o primeiro:
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+Felizmente, isto geralmente é o que você quer ou, pelo menos, dá acesso ao que você quer. Além disso, esteja ciente de que o jQuery não segue a convenção de passar objetos Error para rejeições.
+
+## Código assíncrono complexo facilitado
+
+Certo, vamos então escrever um pouco de código. Digamos que queremos:
+
+1. Iniciar um spinner para indicar o carregamento
+2. Baixar alguns JSON para uma história, de onde obteremos o título e as urls de cada capítulo
+3. Adicionar um título à página
+4. Baixar cada capítulo
+5. Adicionar a história à página
+6. Parar o spinner
+
+… mas também informar ao usuário se algo deu errado ao longo do processo. Também queremos parar o spinner nesse ponto, caso contrário, ele vai continuar girando, ficará tonto e colidirá com alguma outra interface.
+
+Claro que você não usaria JavaScript para entregar uma história. [Servir como HTML é bem mais rápido](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), mas esse padrão é bastante comum ao lidar com APIs: múltiplos acessos para baixar dados e, em seguida, fazer algo quando estiver tudo pronto.
+
+Para começar, vamos lidar com a busca de dados da rede:
+
+## Fazendo XMLHttpRequest cumprir promessas
+
+APIs antigas serão atualizadas para usar promessas, se for possível de uma maneira compatível com versões anteriores. O objeto `XMLHttpRequest` é um candidato importante, mas por enquanto vamos escrever uma função simples para fazer uma solicitação GET:
+
+```js
+function get(url) {
+  // Retorne uma nova promessa.
+  return new Promise(function(resolve, reject) {
+    // Faça o trabalho usual do XHR
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // Chamado em caso de 404 etc
+      // então verifique o status
+      if (req.status == 200) {
+        // resolva a promessa com o texto em response
+        resolve(req.response);
+      }
+      else {
+        // Caso contrário rejeite com o texto do status
+        // que esperamos que seja um erro que possamos entender
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Lide com erros de rede
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Faça a requisição
+    req.send();
+  });
+}
+```
+
+Agora vamos usá-la:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.error("Failed!", error);
+})
+```
+
+Agora podemos fazer solicitações HTTP sem digitar manualmente `XMLHttpRequest`, o que é ótimo, porque quanto menos eu tiver que ver a cara irritante do `XMLHttpRequest`, mais feliz será minha vida.
+
+## Encadeamento
+
+O `then()` não é o fim da história. Você pode encadear vários `then` um no outro para transformar valores ou executar ações assíncronas adicionais uma depois da outra.
+
+### Transformando valores
+
+Você pode transformar valores simplesmente retornando o novo valor:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+Como um exemplo prático, vamos voltar a:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+})
+```
+
+A resposta (response) é JSON, mas ela está aqui sendo recebida como texto simples. Poderíamos alterar nossa função get para usar o [`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType) JSON, mas também podemos deixar para resolver isto na terra das promessas:
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+Como `JSON.parse()` recebe um único argumento e retorna um valor transformado, podemos usar um atalho:
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+Na verdade, poderíamos criar uma função `getJSON()` de forma relativamente simples:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+A função `getJSON()` ainda retorna uma promessa. Uma promessa que busca uma url e depois processa a resposta como JSON.
+
+### Enfileirando ações assíncronas
+
+Você também pode encadear vários `then` para executar ações assíncronas em sequência.
+
+Quando você retorna alguma coisa de um callback `then()`, é meio mágico. Se você retornar um valor, o próximo `then()` será chamado com esse valor. No entanto, se você retornar algo que pareça uma promessa, o próximo `then()` espera por ele e só é chamado quando a promessa for cumprida (sucesso/falha). Por exemplo:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Got chapter 1!", chapter1);
+})
+```
+
+Aqui, fazemos uma solicitação assíncrona para `story.json`, que nos dá um conjunto de URLs a serem solicitadas e, em seguida, solicitamos a primeira delas. É nesse ponto em que promessas realmente começam a ganhar destaque em relação ao uso clássico de callbacks.
+
+Você pode até criar um método de atalho para obter os capítulos:
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// é fácil de usar:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+Nós não baixamos o `story.json` até que `getChapter` seja chamado, mas da próxima vez que `getChapter` for chamado, reutilizamos a promessa de história, portanto, `story.json` é baixado apenas uma vez. Viva as promessas!
+
+## Tratamento de erros
+
+Como vimos anteriormente, `then()` recebe dois argumentos, um para lidar com o sucesso, outro para a falha (ou fulfill e reject, no linguajar das promessas):
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+Você também pode usar `catch()`:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).catch(function(error) {
+  console.log("Failed!", error);
+})
+```
+
+Não há nada de especial em usar `catch()`, é apenas uma alternativa equivalente a `then(undefined, func)`, mas é mais legível. Observe que os dois exemplos de código acima não se comportam da mesma forma, o último é equivalente a:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).then(undefined, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+A diferença é sutil, mas extremamente útil. As rejeições da promessa passam para o próximo `then()` com um callback de rejeição (ou `catch()`, já que é equivalente). Com `then(func1, func2)`, será chamada ou a função `func1` ou `func2`, mas nunca as duas. Mas com `then(func1).catch(func2)`, ambas serão chamadas se `func1` rejeitar, pois são etapas separadas na cadeia. Considere o seguinte:
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Don't worry about it");
+}).then(function() {
+  console.log("All done!");
+})
+```
+
+O fluxo acima é muito parecido com o try/catch típico do JavaScript, os erros que acontecem em um "try" vão imediatamente para o bloco `catch()`. Aqui está o fluxograma do código acima (porque eu amo fluxogramas):
+
+<div style="position: relative; padding-top: 93%;">
+  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
+</div>
+
+Siga as linhas azuis para as promessas que se cumprem, ou as vermelhas para as que são rejeitadas.
+
+### Exceções e promessas em JavaScript
+
+As rejeições acontecem quando uma promessa é rejeitada explicitamente, mas também implicitamente se um erro for lançado no callback do construtor:
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse provoca um erro se você alimentá-lo com
+  // JSON inválido, então isto implicitamente causa rejeição:
+  resolve(JSON.parse("Isto não é JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // Isto nunca acontece:
+  console.log("Funcionou!", data);
+}).catch(function(err) {
+  // Isto acontece:
+  console.log("Falhou!", err);
+})
+```
+
+Isto significa que é útil fazer todo o seu trabalho relacionado à promessa dentro do callback do construtor da promessa, para que os erros sejam detectados automaticamente e se tornem rejeições.
+
+O mesmo vale para erros lançados em callbacks `then()`
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // Isto nunca acontece, '/' é uma página HTML, não JSON
+  // então JSON.parse lança exceção
+  console.log("Funcionou!", data);
+}).catch(function(err) {
+  // Isto aqui acontece:
+  console.log("Falhou!", err);
+})
+```
+
+### Tratamento de erros na prática
+
+Com nossa história e capítulos, podemos usar catch para exibir um erro ao usuário:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Falha ao mostrar o capítulo");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Se a busca de `story.chapterUrls[0]` falhar (por exemplo, http 500 ou se o usuário estiver offline), todos os callbacks de sucesso seguintes serão ignorados. Isto inclui aquele que está no `getJSON()` que tenta processar a resposta como JSON. Também será ignorado o callback que adiciona capítulo1.html à página. Em vez disso, será executado o callback do catch. Como resultado, "Falha ao mostrar o capítulo" será adicionado à página se qualquer uma das ações anteriores falhar.
+
+Assim como o try/catch do JavaScript, o erro é detectado e o código subsequente continua, então o spinner estará sempre oculto, que é o que queremos. O código acima se torna uma versão assíncrona sem bloqueio de:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Falha ao mostrar o capítulo");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+Você talvez queira executar o `catch()` simplesmente para fins de registro, sem se recuperar do erro. Para isto, basta relançar o erro. Podemos fazer isto no nosso método `getJSON()`:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("getJSON failed for", url, err);
+    throw err;
+  });
+}
+```
+
+Dessa forma, conseguimos buscar um capítulo, mas nós queremos todos eles. Vamos fazer isto acontecer agora.
+
+## Paralelismo e sequenciamento: obtendo o melhor dos dois mundos
+
+Pensar de forma assíncrona não é fácil. Se você está tendo dificuldades, tente escrever o código como se fosse síncrono. Nesse caso:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("All done");
+}
+catch (err) {
+  addTextToPage("Argh, broken: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch { id: 'promises-sync-example', height: 480 } %}
+
+Isto funciona! Mas é síncrono e bloqueia o navegador enquanto os dados são baixados. Para deixar essa tarefa assíncrona, usamos `then()` para fazer com que as coisas aconteçam uma depois da outra.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // TODO: para cada url em story.chapterUrls, pegue e mostre
+}).then(function() {
+  // E pronto!
+  addTextToPage("Tudo feito");
+}).catch(function(err) {
+  // Capture qualquer erro que ocorra pelo caminho
+  addTextToPage("Argh, quebrou: " + err.message);
+}).then(function() {
+  // Sempre esconda o spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Mas como podemos percorrer as urls dos capítulos e buscá-los em ordem? Isto **não funciona** :
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Pegar capítulo
+  getJSON(chapterUrl).then(function(chapter) {
+    // e acrescentar na página
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+O `forEach` não foi criado para lidar com código assíncrono, então nossos capítulos iriam aparecer na ordem em que forem baixados, que é basicamente como Pulp Fiction foi escrito. Isto não é Pulp Fiction, então vamos consertar.
+
+### Criando uma sequência
+
+Queremos transformar nosso array `chapterUrls` numa sequência de promessas. Podemos fazer isto usando `then()`:
+
+```js
+// Comece com uma promise que sempre resolve
+var sequence = Promise.resolve();
+
+// Passe pela url de cada capítulo
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Acrescente estas ações ao final da sequence
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+Esta é a primeira vez que vimos um `Promise.resolve()`, que cria uma promessa que é resolvida seja qual for o valor que você passar para ela. Se você passar uma instância de `Promise` ela vai simplesmente retorná-la (**observação:** esta é uma mudança na especificação que algumas implementações ainda não seguem). Se você passar algo parecido com uma promessa (algo que tem um `then()`), ela cria uma `Promise` genuína que cumpre/rejeita da mesma maneira. Se você passar qualquer outro valor, por exemplo, `Promise.resolve('Hello')`, ela cria uma promessa que cumpre com esse valor. Se você chamá-la sem valor algum, como acima, ela será cumprida com o valor "indefinido".
+
+Também existe o `Promise.reject(val)`, que cria uma promessa que rejeita com o valor que você passar para ela (ou undefined).
+
+Podemos organizar o código acima usando [`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce):
+
+```js
+// Passar pelas urls dos capítulos
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Acrescentar estas ações ao final da sequence
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+Isto faz o mesmo que o exemplo anterior, mas não precisa da variável "sequence" separada. Nosso callback reduce é chamado para cada item do array. O "sequence" é `Promise.resolve()` na primeira vez, mas para o restante das chamadas "sequence" é o que foi retornado da chamada anterior. O `array.reduce` é bastante útil para reduzir um array a um valor único, o que, neste caso, é uma promessa.
+
+Vamos juntar tudo:
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Quando a promessa do último capítulo estiver pronta…
+    return sequence.then(function() {
+      // …pegue o próximo capítulo
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // e acrescente na página
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // E estamos feitos!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Pegue qualquer erro que aconteça pelo caminho
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Sempre esconda o spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-example', height: 480 } %}
+
+E aí está, uma versão totalmente assíncrona de um código originalmente sequencial. Mas nós podemos fazer melhor que isso. No momento, nossa página está baixando assim:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Os navegadores são muito bons em baixar várias coisas de uma vez, então estamos desperdiçando desempenho ao baixar os capítulos um após o outro. O que queremos fazer é fazer o download de todos ao mesmo tempo e, em seguida, processá-los à medida em que forem chegando. Felizmente, já existe uma API para isso:
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+O `Promise.all` pega uma série de promessas e cria uma promessa que se cumpre no momento em que todas as outras forem concluídas com sucesso. Você recebe um array de resultados (independente dos resultados de cada promessa) na mesma ordem das promessas que você recebeu.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Pegue um array de promessas e espere por todas
+  return Promise.all(
+    // Mapear nosso array de urls de capítulos a
+    // um array de promessas de capítulo json
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Agora temos os jsons de capítulo em ordem! Loop por eles…
+  chapters.forEach(function(chapter) {
+    // …e acrescente na página
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("All done");
+}).catch(function(err) {
+  // pegue qualquer erro que tenha ocorrido
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-all-example', height: 480 } %}
+
+Dependendo da conexão, isto pode ser alguns segundos mais rápido do que carregar um por um e ainda requer menos código do que nossa primeira tentativa. Os capítulos podem ser baixados em qualquer ordem, mas eles irão aparecer na tela na ordem correta.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+No entanto, ainda podemos melhorar ainda mais o desempenho percebido. Quando o capítulo um chegar, devemos adicioná-lo à página. Isto permite que o usuário comece a ler antes que o restante dos capítulos chegue. Quando o capítulo três chegar, ele não será adicionado à página porque o usuário pode não perceber que o capítulo dois está faltando. Quando o capítulo dois chegar, podemos adicionar os capítulos dois e três, etc, etc.
+
+Para fazer isso, baixamos o JSON para todos os nossos capítulos ao mesmo tempo e, em seguida, criamos uma sequência para adicioná-los ao documento:
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Mapeie nosso array de urls de capítulo para
+  // um array de promessas de capítulo json
+  // Isto garante que são baixadas em paralelo.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Use reduce para encadear as promises,
+      // adicionando conteúdo à página para cada capítulo
+      return sequence
+      .then(function() {
+        // Espere por tudo na sequencia até agora,
+        // depois espere este capítulo chegar.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("Tudo feito");
+}).catch(function(err) {
+  // capture qualquer erro que tenha acontecido no caminho
+  addTextToPage("Argh, quebrou: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-best-example', height: 480 } %}
+
+E pronto, o melhor de ambos os mundos! Leva a mesma quantidade de tempo para entregar todo o conteúdo, mas o usuário recebe a primeira parte do conteúdo mais cedo.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Neste exemplo trivial, todos os capítulos chegam mais ou menos ao mesmo tempo, mas a vantagem de exibir um de cada vez será exagerada com mais capítulos maiores.
+
+Fazer o que mostramos acima com [callbacks ou eventos no estilo Node.js](https://gist.github.com/jakearchibald/0e652d95c07442f205ce) requer quase o dobro do código e fica muito mais difícil de entender. No entanto, este não é o fim da história para as promessas. Quando elas são combinadas com outros recursos do ES6, elas ficam ainda mais fáceis de usar.
+
+## Rodada de bônus: capacidades expandidas
+
+Desde que escrevi este artigo originalmente, a capacidade de usar a API de Promises aumentou muito. Desde o Chrome 55, as funções assíncronas têm permitido que o código baseado em promessas fosse escrito como se fosse um código síncrono, mas sem bloquear o thread principal. Você pode ler mais sobre isto no [meu artigo sobre funções assíncronas](/async-functions). Hoje existe amplo suporte para Promises e funções assíncronas nos principais navegadores. Você pode encontrar os detalhes nas referências do MDN sobre [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) [funções assíncronas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function).
+
+Muito obrigado a Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp, Addy Osmani, Arthur Evans e Yutaka Hirano que revisaram este texto e fizeram correções/recomendações.
+
+Agradeço também a [Mathias Bynens](https://mathiasbynens.be/) por [atualizar várias partes](https://github.com/html5rocks/www.html5rocks.com/pull/921/files) do artigo.
diff --git a/src/site/content/pt/blog/read-files/index.md b/src/site/content/pt/blog/read-files/index.md
new file mode 100644
index 00000000000..6b491a36320
--- /dev/null
+++ b/src/site/content/pt/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: Leia arquivos em JavaScript
+subhead: Como selecionar arquivos, ler metadados e conteúdo de arquivos e monitorar o progresso de leitura.
+description: |2
+
+  Como selecionar arquivos, ler metadados e conteúdo de arquivos e monitorar o progresso de leitura.
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+Poder selecionar e interagir com arquivos no dispositivo local do usuário é um dos recursos mais usados da web. Ele permite que os usuários selecionem arquivos e os enviem para um servidor, por exemplo, transferindo fotos ou documentos fiscais, etc. Mas, também permite que os sites os leiam e manipulem sem nunca ter que transferir os dados pela rede.
+
+## A moderna API File System Access
+
+A API File System Access, que permite o acesso ao sistema de arquivos, fornece uma maneira fácil de ler e gravar em arquivos e diretórios no sistema local do usuário. Atualmente ela está disponível na maioria dos navegadores derivados do Chromium, como Chrome ou Edge. Para saber mais sobre isso, consulte o artigo [API File System Access](/file-system-access/).
+
+Como a API File System Access ainda não é compatível com todos os navegadores, dê uma olhada na biblioteca  [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access), uma biblioteca auxiliar que usa a nova API onde quer que esteja disponível, mas volta para abordagens legadas quando ela não estiver.
+
+## Trabalhando com arquivos, da maneira clássica
+
+Este guia mostra como:
+
+- Selecionar arquivos
+    - [Usando o elemento input do HTML](#select-input)
+    - [Usando uma zona de arrastar e soltar](#select-dnd)
+- [Ler os metadados do arquivo](#read-metadata)
+- [Ler o conteúdo de um arquivo](#read-content)
+
+## Selecionar arquivos {: #select}
+
+### Elemento input do HTML {: #select-input}
+
+A maneira mais fácil de permitir que os usuários selecionem arquivos é usando o elemento [`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file), que é suportado todos os principais navegadores. Quando clicado, ele permite que um usuário selecione um arquivo (ou vários arquivos se o atributo [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) estiver incluído), usando a interface de usuário de seleção de arquivo integrada do sistema operacional. Quando o usuário termina de selecionar um arquivo ou arquivos, o evento `change` do elemento é disparado. Você pode acessar a lista de arquivos através de `event.target.files`, que é um objeto [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Cada item em `FileList` é um objeto [`File`](https://developer.mozilla.org/docs/Web/API/File).
+
+```html
+<!-- The `multiple` attribute lets users select multiple files. -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %} Verifique se o [`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read) é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de arquivo para que você possa, além de ler o arquivo, também escrever de volta nele. Este método pode ser executado via [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files). {% endAside %}
+
+Este exemplo permite que um usuário selecione vários arquivos usando a IU de seleção de arquivo integrada do sistema operacional e, a seguir, registra cada arquivo selecionado no console.
+
+{% Glitch {id: 'arquivo do tipo de entrada', altura: 480}%}
+
+#### Limite os tipos de arquivos que o usuário pode selecionar {: #accept}
+
+Em alguns casos, você pode querer limitar os tipos de arquivos que os usuários podem selecionar. Por exemplo, um aplicativo de edição de imagens deve aceitar apenas imagens, não arquivos de texto. Para fazer isso, você pode adicionar um [`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) ao elemento de entrada para especificar quais arquivos são aceitos.
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### Arrastar e soltar personalizado {: #select-dnd}
+
+Em alguns navegadores, o elemento `<input type="file">` também é um destino para soltar, permitindo que os usuários arrastem e soltem arquivos em seu aplicativo. Mas, o alvo de soltar é pequeno e pode ser difícil de usar. Em vez disso, depois de fornecer a funcionalidade principal usando um elemento `<input type="file">`, você deve fornecer uma grande superfície personalizada de arrastar e soltar.
+
+{% Aside %} Verifique se o [`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration) é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de arquivo para que você possa, além de ler o arquivo, também escrever de volta nele. {% endAside %}
+
+#### Escolha sua zona de soltar {: #choose-drop-zone}
+
+Sua superfície de soltar dependerá do design de sua aplicação. Você pode querer que apenas parte da janela seja uma superfície de soltar ou, potencialmente, a janela inteira.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="Uma captura de tela do Squoosh, um aplicativo da web de compressão de imagem.", width="800", height="589" %}   <figcaption>     Squoosh torna a janela inteira uma zona de soltar.   </figcaption></figure>
+
+O Squoosh permite que o usuário arraste e solte uma imagem em qualquer lugar da janela, e clicar em **selecionar uma imagem** invoca o elemento `<input type="file">`. Independentemente do que você escolher como zona para soltar, certifique-se de que esteja claro para o usuário que ele pode arrastar e soltar arquivos nessa superfície.
+
+#### Defina a zona de soltar {: #define-drop-zone}
+
+Para permitir que um elemento seja uma zona de arrastar e soltar, você precisará escutar dois eventos, [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event) e [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event). O `dragover` atualiza a IU do navegador para indicar visualmente que a ação arrastar e soltar está criando uma cópia do arquivo. O `drop` é disparado depois que o usuário solta os arquivos na superfície. Semelhante ao elemento input, você pode acessar a lista de arquivos em `event.dataTransfer.files`, que é um objeto [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Cada item em `FileList` é um objeto [`File`](https://developer.mozilla.org/docs/Web/API/File).
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // Style the drag-and-drop as a "copy file" operation.
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+[`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) e [`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) impedem que o comportamento default do navegador aconteça e permitem que seu código seja executado. Sem eles, o navegador navegaria para fora da sua página e abriria os arquivos que o usuário colocou na janela do navegador.
+
+{# Este exemplo não funciona como um embed. #}
+
+Confira [Arrastar e soltar personalizado](https://custom-drag-and-drop.glitch.me/) para uma demonstração ao vivo.
+
+### E quanto aos diretórios? {: #diretórios}
+
+Infelizmente, hoje não existe uma boa maneira de obter acesso a um diretório.
+
+O [`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory) no elemento `<input type="file">` permite que o usuário escolha um diretório ou diretórios. É compatível com alguns navegadores baseados em Chromium e possivelmente no Safari para desktop, mas tem relatos [conflitantes](https://caniuse.com/#search=webkitdirectory) quanto à compatibilidade de navegadores.
+
+{% Aside %} Verifique se o [`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents) é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de diretório para que você possa, além de ler o conteúdo do diretório, também gravar de volta nele. Este método pode ser executado via [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories). {% endAside %}
+
+Se o comportamento de arrastar e soltar estiver ativado, um usuário pode tentar arrastar um diretório para a zona de soltar. Quando o evento drop for disparado, ele incluirá um objeto `File` para o diretório, mas não poderá acessar nenhum dos arquivos do diretório.
+
+## Ler os metadados do arquivo {: #read-metadata}
+
+O objeto [`File`](https://developer.mozilla.org/docs/Web/API/File) contém várias propriedades de metadados sobre o arquivo. A maioria dos navegadores fornece o nome do arquivo, o tamanho do arquivo e o tipo MIME, embora dependendo da plataforma, navegadores diferentes possam fornecer informações diferentes ou adicionais.
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // Not supported in Safari for iOS.
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // Not supported in Firefox for Android or Opera for Android.
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // Unknown cross-browser support.
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+Você pode ver isto em ação na demonstração Glitch do [`input-type-file`](https://input-type-file.glitch.me/)
+
+## Ler o conteúdo de um arquivo {: #read-content}
+
+Para ler um arquivo, use [`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader), que permite ler o conteúdo de um objeto `File` na memória. Você pode instruir o `FileReader` a ler um arquivo como um [array buffer](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer), uma [URL de dados](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) ou [texto](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText) .
+
+```js
+function readImage(file) {
+  // Check if the file is an image.
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+O exemplo acima lê um `File` fornecido pelo usuário, depois o converte em uma URL de dados e usa essa URL de dados para exibir a imagem em um elemento `img`. Veja o Glitch [`read-image-file`](https://read-image-file.glitch.me/) para saber como verificar se o usuário selecionou um arquivo de imagem.
+
+{% Glitch {id: 'arquivo de imagem lido', altura: 480}%}
+
+### Monitore o progresso de um arquivo lido {: #monitor-progress}
+
+Ao ler arquivos grandes, pode ser útil fornecer alguma experiência ao usuário para indicar o quanto a leitura progrediu. Para isso, use o evento [`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event) fornecido pelo `FileReader`. O evento `progress` fornece duas propriedades, `loaded`, a quantidade lida e `total`, a quantidade total a ser lida.
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // Do something with result
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+Imagem do herói por Vincent Botta de [Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)
diff --git a/src/site/content/pt/blog/referrer-best-practices/index.md b/src/site/content/pt/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..c16b8f60a6c
--- /dev/null
+++ b/src/site/content/pt/blog/referrer-best-practices/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: Melhores práticas no uso dos cabeçalhos Referer e Referrer-Policy
+subhead: Melhores práticas para definir seu Referrer-Policy e usar o referenciador nas solicitações de entrada.
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: |
+  Considere definir uma política de referenciamento de `strict-origin-when-cross-origin`. Ela retém grande parte da utilidade do referenciador, ao mesmo tempo que reduz o risco de vazamento de dados entre origens.
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## Resumo
+
+- O vazamento inesperado de informações de origem cruzada prejudica a privacidade dos usuários da web. Uma política de referenciamento pode ajudar como forma de proteção.
+- Considere definir uma política de referenciamento `strict-origin-when-cross-origin`. Ela retém grande parte da utilidade do referenciador, ao mesmo tempo que reduz o risco de vazamento de dados entre origens.
+- Não use referenciadores para proteção Cross-Site Request Forgery (CSRF). Em [vez disso, use tokens CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) e outros cabeçalhos como uma camada extra de segurança.
+
+{% Aside %} Antes de começar:
+
+- Se você tiver dúvidas quanto à diferença entre "site" e "origem", consulte [Noções básicas sobre "same-site" e "same-origin"](/same-site-same-origin/) .
+- O cabeçalho `Referer` está sem um R, devido a um erro de ortografia original na especificação. O cabeçalho `Referrer-Policy`, `referrer` em JavaScript e no DOM estão escritos corretamente. {% endAside %}
+
+## Fundamentos de Referer e Referrer-Policy
+
+As solicitações HTTP podem incluir o [cabeçalho `Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer), que indica a origem ou URL da página da web a partir da qual a solicitação foi feita. O [cabeçalho `Referrer-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) define quais dados são disponibilizados no cabeçalho `Referer`
+
+No exemplo abaixo, o cabeçalho `Referer` inclui a URL completa da página no `site-one` partir do qual a solicitação foi feita.
+
+<figure> {% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="Solicitação HTTP incluindo um cabeçalho Referer.", width="800", height="573" %}</figure>
+
+O cabeçalho `Referer` pode estar presente em diferentes tipos de solicitações:
+
+- Solicitações de navegação, quando um usuário clica num link
+- Solicitações de sub-recursos, quando um navegador solicita imagens, iframes, scripts e outros recursos de que uma página precisa.
+
+Para navegações e iframes, esses dados também podem ser acessados via JavaScript usando `document.referrer`.
+
+O `Referer` pode ser esclarecedor. Por exemplo, um serviço analítico pode usar o valor para determinar que 50% dos visitantes no `site-two.example` vieram de `social-network.example`.
+
+Mas quando a URL completa, incluindo o caminho e a string de consulta, é enviada no cabeçalho `Referer` **entre origens**, isto pode **prejudicar a privacidade** e também representar **riscos à segurança**. Dê uma olhada nessas URLs:
+
+<figure> {% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URLs com caminhos, mapeados para diferentes riscos de privacidade e segurança.", width="800", height="370" %}</figure>
+
+As URLs de número 1 a 5 contêm informações privadas, às vezes até com informações de identificação ou confidenciais. Vazá-los silenciosamente entre origens pode comprometer a privacidade dos usuários da web.
+
+A URL número 6 é uma [capability URL](https://www.w3.org/TR/capability-urls/). Você não vai querer que ela seja vista por ninguém além do usuário pretendido. Se isto acontecer, um agente mal-intencionado poderá sequestrar a conta desse usuário.
+
+**Para restringir quais dados de referenciador são disponibilizados para solicitações de seu site, você pode definir uma política de referenciamento.**
+
+## Quais políticas estão disponíveis e como elas diferem?
+
+Você pode selecionar uma dentre oito políticas. Dependendo da política, os dados disponíveis no `Referer` (e `document.referrer`) podem ser:
+
+- Vazios (nenhum cabeçalho `Referer` estará presente)
+- Apenas a [origem](/same-site-same-origin/#origin)
+- A URL completa: origem, caminho e string de consulta (query string)
+
+<figure> {% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Dados que podem estar contidos no cabeçalho Referer e document.referrer.", width="800", height="255" %}</figure>
+
+Algumas políticas são projetadas para se comportar de maneira diferente dependendo do **contexto**: origens cruzadas (cross-origin) ou solicitação da mesma origem (same-origin), segurança (se o destino da solicitação for tão seguro quanto a origem) ou ambos. Isto é útil para limitar a quantidade de informações compartilhadas entre origens ou para origens menos seguras, enquanto mantém a riqueza de informações do referenciador em seu próprio site.
+
+Aqui está uma visão geral que mostra como as políticas de referenciamento restringem os dados de URL disponíveis no cabeçalho Referer e `document.referrer`:
+
+<figure> {% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Políticas de referenciador diferentes e seu comportamento, dependendo da segurança e do contexto de origem cruzada.", width="800", height="537" %}</figure>
+
+O MDN fornece uma [lista completa de políticas e exemplos de comportamento](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives) .
+
+Algumas observações:
+
+- Todas as políticas que levam o esquema (HTTPS vs. HTTP) em consideração (`strict-origin`, `no-referrer-when-downgrade` e `strict-origin-when-cross-origin`) tratam as solicitações de uma origem HTTP para outra origem HTTP da mesma forma como são tratadas as solicitações de uma origem HTTPS para outra origem HTTPS, mesmo sendo o HTTP menos seguro. Isto é porque, para essas políticas, o que importa é se ocorre uma **diminuição** da segurança, ou seja, se a solicitação puder expor dados de uma origem criptografada para uma não criptografada. Uma solicitação HTTP → HTTP não é criptografada o tempo todo, portanto, não há diminuição de segurança. As solicitações HTTPS → HTTP, ao contrário, apresentam essa diminuição.
+- Uma solicitação da **mesma origem** significa que o esquema (HTTPS ou HTTP) é o mesmo; portanto, não há diminuição da segurança.
+
+## Políticas de referenciamento default em navegadores
+
+*Em julho de 2020*
+
+**Se nenhuma política de referenciamento for definida, a política default do navegador será usada.**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Navegador</th>
+        <th>
+<code>Referrer-Policy</code> / comportamento default</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>Planejando mudar para <code>strict-origin-when-cross-origin</code> na <a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">versão 85</a> (anteriormente <code>no-referrer-when-downgrade</code>)</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">ver bug fechado</a>)</li>
+            <li>
+<code>strict-origin-when-cross-origin</code> no modo navegação privada e para rastreadores</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>
+<a href="https://github.com/privacycg/proposals/issues/13">Experimentando</a> com <code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Semelhante a <code>strict-origin-when-cross-origin</code>. Veja <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">Preventing Tracking Prevention Tracking</a> para mais detalhes.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Definindo sua política de referenciamento: práticas recomendadas
+
+{% Aside 'objective' %} Definir explicitamente uma política de melhoria de privacidade, como `strict-origin-when-cross-origin` (ou mais rigorosa). {% endAside %}
+
+Existem diferentes maneiras de definir políticas de referenciamento para seu site:
+
+- Como um cabeçalho HTTP
+- Em seu [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)
+- Em JavaScript, [por solicitação](https://javascript.info/fetch-api#referrer-referrerpolicy)
+
+Você pode definir políticas diferentes para páginas, solicitações ou elementos diferentes.
+
+O cabeçalho HTTP e o elemento meta são ambos elementos de nível de página. A ordem de precedência ao determinar a política efetiva de um elemento é:
+
+1. Política de nível de elemento
+2. Política de nível de página
+3. Default do navegador
+
+**Exemplo:**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+A imagem será solicitada com uma `no-referrer-when-downgrade`, enquanto todas as outras solicitações de sub-recursos desta página seguirão a política de `strict-origin-when-cross-origin`
+
+## Como saber qual a política de referenciamento usada?
+
+O site [securityheaders.com](https://securityheaders.com/) é útil para determinar a política que um site ou página específica está usando.
+
+Você também pode usar as ferramentas de desenvolvedor do Chrome, Edge ou Firefox para saber qual é a política de referenciamento usada para uma solicitação específica. No momento da redação deste artigo, o Safari não mostra o `Referrer-Policy` mas mostra o `Referer` que foi enviado.
+
+<figure> {% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt=" Uma captura de tela do painel Rede do Chrome DevTools, mostrando Referer e Referrer-Policy.", width="800", height="416" %}   <figcaption>  Chrome DevTools, <b>painel de rede</b> com uma solicitação selecionada.   </figcaption></figure>
+
+## Qual política você deve definir para seu site?
+
+Resumo: Defina explicitamente uma política de melhoria da privacidade, como `strict-origin-when-cross-origin` (ou mais rigorosa).
+
+### Por que "explicitamente"?
+
+Se nenhuma política de referência for definida, será usada a política default do navegador. Na verdade, os sites muitas vezes seguem o default do navegador. Mas isto não é o ideal, porque:
+
+- As políticas default do navegador são `no-referrer-when-downgrade`, `strict-origin-when-cross-origin` ou mais rigorosas, dependendo do navegador e do modo (privado/anônimo). Assim, seu site não terá um comportamento previsível em todos os navegadores.
+- Os navegadores estão adotando padrões mais rígidos, como `strict-origin-when-cross-origin` e mecanismos, como [referrer trimming](https://github.com/privacycg/proposals/issues/13) para solicitações de origem cruzada. Optar explicitamente por uma política de aumento de privacidade antes que os defaults do navegador sejam alterados lhe dá controle e ajuda a executar testes conforme achar adequado.
+
+### Por que usar `strict-origin-when-cross-origin` (ou algo mais rigoroso)?
+
+Você precisa de uma política que seja segura, que aprimore a privacidade e seja útil - o que "útil" significa depende do que você deseja do referenciador:
+
+- **Segurança**: se o seu site usa HTTPS ([se não usa, faça disto uma prioridade](/why-https-matters/)), você não vai querer que as URLs do seu site vazem em solicitações não HTTPS. Já que qualquer pessoa na rede poderá vê-las, isto iria expor seus usuários a ataques de intermediários. As políticas `no-referrer-when-downgrade` , `strict-origin-when-cross-origin`, `no-referrer` e `strict-origin` resolvem esse problema.
+- **Melhoria de privacidade**: para uma solicitação de origem cruzada, `no-referrer-when-downgrade` compartilha a URL completa: isto não aumenta a privacidade. `strict-origin-when-cross-origin` e `strict-origin` compartilham apenas a origem, e `no-referrer` não compartilha nada. Com isso você tem `strict-origin-when-cross-origin` `strict-origin` e `no-referrer` como opções para melhorar a privacidade.
+- **Utilidade**: `no-referrer` e `strict-origin` nunca compartilham a URL completa, mesmo para solicitações da mesma origem, portanto, se você precisar disso, `strict-origin-when-cross-origin` é a melhor opção.
+
+Tudo isso significa que **`strict-origin-when-cross-origin`** é geralmente uma escolha sensata.
+
+**Exemplo: definição de uma política `strict-origin-when-cross-origin`**
+
+`index.html` :
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+Ou do lado do servidor, por exemplo, no Express:
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### E se `strict-origin-when-cross-origin` (ou algo mais rigoroso) não acomodar todos os seus casos de uso?
+
+Nesse caso, adote uma **abordagem progressiva**: defina uma política de proteção como `strict-origin-when-cross-origin` para seu site e, se necessário, uma política mais permissiva para solicitações específicas ou elementos HTML.
+
+### Exemplo: política aplicada no nível do elemento
+
+`index.html` :
+
+```html/6
+<head>
+  <!-- política do nível do documento: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- política deste elemento <a>: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Observe que o Safari/WebKit pode limitar `document.referrer` ou o cabeçalho `Referer` para solicitações [cross-site.](/same-site-same-origin/#same-site-cross-site) Veja [detalhes](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) .
+
+### Exemplo: política aplicada no nível da solicitação
+
+`script.js` :
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### O que mais você deve considerar?
+
+Sua política deve depender do seu site e dos casos de uso: isto depende de você, sua equipe e sua empresa. Se algumas URLs contiverem dados de identificação ou confidenciais, defina uma política de proteção.
+
+{% Aside 'warning' %} Dados que podem não parecer confidenciais para você podem ser confidenciais para seus usuários ou simplesmente não são dados que eles desejam ou esperam que vazem silenciosamente entre origens. {% endAside %}
+
+## Usando o referenciador de solicitações recebidas: práticas recomendadas
+
+### O que fazer se a funcionalidade do seu site depende da URL referenciadora das solicitações recebidas?
+
+#### Proteja os dados dos usuários
+
+O `Referer` pode conter dados privados, pessoais ou de identificação, portanto, garanta que você o trate levando isso em consideração.
+
+#### Lembre-se que o `Referer` você recebe pode mudar
+
+Usar referenciadores das solicitações de origem cruzada de entrada tem algumas limitações:
+
+- Se você não tem controle sobre a implementação do emissor da solicitação, não pode fazer suposições sobre o `Referer` (nem `document.referrer` ) que você recebe. O emissor da solicitação pode decidir a qualquer momento mudar para uma política `no-referrer` ou ainda para uma política mais rígida do que a que eles usavam antes. Isto significa que você receberá menos dados por meio do `Referer` do que antes.
+- Os navegadores estão cada vez mais usando a Referrer-Policy `strict-origin-when-cross-origin` por default. Isto significa que agora você pode receber apenas a origem (em vez da URL referenciadora completo) nas solicitações de origem cruzada que chegarem, se o site que as envia não tiver uma política definida.
+- Os navegadores podem mudar a maneira como gerenciam o `Referer`; por exemplo, no futuro, eles podem decidir sempre reduzir os referenciadores de origens em solicitações de sub-recursos de origem cruzada, a fim de proteger a privacidade do usuário.
+- O `Referer` (e `document.referrer`) pode conter mais dados do que você precisa, por exemplo, uma URL completa quando você deseja apenas saber se a solicitação é de origem cruzada.
+
+#### Alternativas ao `Referer`
+
+Você pode precisar considerar alternativas se:
+
+- Uma funcionalidade essencial do seu site usa a URL referenciadora das solicitações de origem cruzada que são recebidas;
+- E/ou se seu site não estiver mais recebendo a parte da URL referenciadora de que precisa em uma solicitação de origem cruzada. Isto acontece quando o emissor da solicitação altera sua política ou quando não há uma política definida e a política padrão do navegador é alterada (como no [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+Para definir alternativas, analise primeiro que parte do referenciador você está usando.
+
+**Se você só precisa da origem (`https://site-one.example`):**
+
+- Se você estiver usando o referenciador em um script que tem acesso de nível superior à página, `window.location.origin` é uma alternativa.
+- Se disponíveis, cabeçalhos como [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) e [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) fornecem a `Origin` ou descrevem se a solicitação é de origem cruzada, que pode ser exatamente o que você precisa.
+
+**Se você precisar de outros elementos da URL (caminho, parâmetros de query…):**
+
+- Os parâmetros de solicitação podem fornecer o que seu caso de uso precisa e isto economiza o trabalho de processar o referenciador.
+- Se você estiver usando o referenciador num script que tem acesso de nível superior à página, `window.location.pathname` pode ser uma alternativa. Extraia apenas a seção da URL que contém o caminho e repasse como argumento, de forma que qualquer informação potencialmente sensível nos parâmetros da URL não seja passada adiante.
+
+**Se você não puder usar essas alternativas:**
+
+- Verifique se seus sistemas podem ser alterados para esperar que o emissor da solicitação (`site-one.example`) defina explicitamente as informações que você precisa em algum tipo de configuração. Vantagens: mais explícito e mais preservador de privacidade para usuários do `site-one.example`. Desvantagens: potencialmente mais trabalho para você ou para os usuários do seu sistema.
+- Verifique se o site que emite as solicitações pode concordar em definir um Referrer-Policy por elemento ou por solicitação de `no-referrer-when-downgrade`. Desvantagem: potencialmente menos preservação da privacidade para usuários do `site-one.example`, potencialmente sem suporte em todos os navegadores.
+
+### Proteção contra Cross-Site Request Forgery (CSRF)
+
+Observe que um emissor de solicitação sempre pode decidir não enviar o referenciador, definindo uma política `no-referrer` (e um agente malicioso pode até mesmo falsificar o referenciador).
+
+Use [tokens CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) como sua proteção primária. Para proteção extra, use [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites) - e em vez de `Referer`, use cabeçalhos como [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (disponível em solicitações POST e CORS) e [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (se disponível).
+
+### Registro em log
+
+Certifique-se de proteger os dados pessoais ou confidenciais dos usuários que possam estar no `Referer`.
+
+Se você estiver usando apenas a origem, verifique se o cabeçalho [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) pode ser uma alternativa. Isto pode fornecer as informações que você precisa para fins de depuração de uma maneira mais simples e sem a necessidade de analisar o referenciador.
+
+### Pagamentos
+
+Os provedores de pagamento podem depender do cabeçalho `Referer` de solicitações que chegam para verificações de segurança.
+
+Por exemplo:
+
+- O usuário clica num botão **Comprar** `online-shop.example/cart/checkout` .
+- `online-shop.example` redireciona para `payment-provider.example` para gerenciar a transação.
+- `payment-provider.example` verifica o `Referer` desta solicitação contra uma lista de valores de `Referer` permitidos configurados pelos comerciantes. Se não corresponder a nenhuma entrada da lista, `payment-provider.example` rejeitará a solicitação. Se corresponder, o usuário pode prosseguir para a transação.
+
+#### Melhores práticas para verificações de segurança do fluxo de pagamento
+
+**Resumo: como provedor de pagamento, você pode usar o `Referer` como uma verificação básica contra ataques ingênuos - mas você deve sempre ter outro método de verificação mais confiável instalado.**
+
+O cabeçalho `Referer` por si só não é base confiável para uma verificação: o site solicitante, seja ele um comerciante legítimo ou não, pode definir uma política `no-referrer` que deixará as informações de `Referer` indisponíveis para o provedor de pagamento. No entanto, como provedor de pagamento, olhar para o `Referer` pode lhe ajudar a detectar invasores ingênuos que não definiram uma política `no-referrer`. Portanto, você pode decidir usar o `Referer` como uma primeira verificação básica. Se você fizer isto, então:
+
+- **Não espere que o `Referer` esteja sempre presente; e, se estiver presente, verifique apenas o mínimo de dados que ele deverá conter: a origem**. Ao definir a lista de valores `Referer` permitidos, certifique-se de que nenhum caminho seja incluído, mas apenas a origem. Exemplo: os valores de `Referer` permitiros para `online-shop.example` devem ser `online-shop.example`, não `online-shop.example/cart/checkout`. Por quê? Porque ao não esperar nenhum `Referer` ou valor de `Referer` que seja a origem do site solicitante, você evita erros inesperados, já que você **não está fazendo suposições sobre a `Referrer-Policy`** que seu comerciante definiu, nem sobre o comportamento do navegador se o comerciante não tiver nenhuma política definida. Tanto o site quanto o navegador poderão retirar o `Referer` enviado na solicitação recebida e limitá-lo a apenas a origem ou simplesmente não enviar o `Referer`.
+- Se o `Referer` estiver ausente ou se estiver presente e sua verificação básica da origem do `Referer` tiver sido bem-sucedida: você pode passar para o outro método de verificação mais confiável (veja abaixo).
+
+**Qual é o método de verificação mais confiável?**
+
+Um método de verificação confiável é permitir que o solicitante faça o **hash dos parâmetros da solicitação** junto com uma chave exclusiva. Como provedor de pagamento, você pode **calcular o mesmo hash do seu lado** e aceitar a solicitação apenas se ela corresponder ao seu cálculo.
+
+**O que acontece com o `Referer` quando um site comercial HTTP sem política de referenciador redireciona para um provedor de pagamento HTTPS?**
+
+Nenhum `Referer` ficará visível na solicitação para o provedor de pagamento HTTPS, porque a [maioria dos navegadores](#default-referrer-policies-in-browsers) usa `strict-origin-when-cross-origin` ou `no-referrer-when-downgrade` por default quando um site não tem política definida. Observe também que [a mudança do Chrome para uma nova política default](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) não mudará esse comportamento.
+
+{% Aside %}
+
+Se o seu site usa HTTP, [migre para HTTPS](/why-https-matters/).
+
+{% endAside %}
+
+## Conclusão
+
+Uma política de referenciamento protetora é uma ótima maneira de garantir mais privacidade aos seus usuários.
+
+Para saber mais sobre diferentes técnicas para proteger seus usuários, consulte a coleção do web.dev [Safe and secure](/secure/)!
+
+*Com muitos agradecimentos por contribuições e feedback a todos os revisores - especialmente Kaustubha Govind, David Van Cleve, Mike West, Sam Dutton, Rowan Merewood, Jxck e Kayce Basques.*
+
+## Recursos
+
+- [Noções básicas sobre "same-site" e "same-origin"](/same-site-same-origin/)
+- [Um novo cabeçalho de segurança: Referrer Policy (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [Referrer-Policy no MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [Cabeçalho Referer: questões de privacidade e segurança no MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Alteração no Chrome: Blink intent to implement](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Alteração do Chrome: Blink intent to send](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Alteração do Chrome: status entry](https://www.chromestatus.com/feature/6251880185331712)
+- [Alteração do Chrome: 85 beta blogpost](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [Thread do GitHub sobre referrer trimming: como se comportam diferentes navegadores](https://github.com/privacycg/proposals/issues/13)
+- [Especificação da Referrer-Policy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/pt/blog/resize-observer/index.md b/src/site/content/pt/blog/resize-observer/index.md
new file mode 100644
index 00000000000..ceb1e9ad6ea
--- /dev/null
+++ b/src/site/content/pt/blog/resize-observer/index.md
@@ -0,0 +1,131 @@
+---
+title: 'ResizeObserver: é como document.onresize para elementos'
+subhead: "`ResizeObserver` permite que você saiba quando o tamanho de um elemento muda."
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: Cultivo de plantas em caixas.
+description: |2
+
+  `ResizeObserver` notifica você quando o retângulo de conteúdo de um elemento muda
+
+  tamanho para que você possa reagir de acordo.
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+Antes de `ResizeObserver`, você tinha que anexar um ouvinte ao `resize` do documento para ser notificado sobre qualquer alteração nas dimensões da janela de visualização. No manipulador de eventos, você teria que descobrir quais elementos foram afetados por aquela mudança e chamar uma rotina específica para reagir apropriadamente. Se você precisava das novas dimensões de um elemento após um redimensionamento, você teve que chamar `getBoundingClientRect()` ou `getComputedStyle()`, que pode causar goleada de layout, se você não cuidar de dosagem *toda* a sua lê e *todas as* suas gravações.
+
+Isso nem mesmo abrange os casos em que os elementos mudam de tamanho sem que a janela principal tenha sido redimensionada. Por exemplo, anexar novos filhos, definir o estilo de `display` `none` ou ações semelhantes podem alterar o tamanho de um elemento, seus irmãos ou ancestrais.
+
+É por isso que `ResizeObserver` é um primitivo útil. Ele reage às mudanças no tamanho de qualquer um dos elementos observados, independentemente do que causou a mudança. Ele também fornece acesso ao novo tamanho dos elementos observados.
+
+## API
+
+Todas as APIs com o `Observer` que mencionamos acima compartilham um design de API simples. `ResizeObserver` não é exceção. Você cria um `ResizeObserver` e passa um retorno de chamada para o construtor. O retorno de chamada é passado para uma matriz de `ResizeObserverEntry` - uma entrada por elemento observado - que contém as novas dimensões para o elemento.
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// Observe one or multiple elements
+ro.observe(someElement);
+```
+
+## Alguns detalhes
+
+### O que está sendo relatado?
+
+Geralmente, um [`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry) relata a caixa de conteúdo de um elemento por meio de uma propriedade chamada `contentRect` , que retorna um objeto [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly). A caixa de conteúdo é a caixa na qual o conteúdo pode ser colocado. É a caixa da borda sem o preenchimento.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="Um diagrama do modelo de caixa CSS.", width="727", height="562" %}</figure>
+
+É importante observar que, embora `ResizeObserver` *relate* as dimensões do `contentRect` e do preenchimento, ele apenas *observa* o `contentRect`. *Não* confunda `contentRect` com a caixa delimitadora do elemento. A caixa delimitadora, conforme relatado por `getBoundingClientRect()`, é a caixa que contém o elemento inteiro e seus descendentes. Os SVGs são uma exceção à regra, em que `ResizeObserver` relatará as dimensões da caixa delimitadora.
+
+A partir do Chrome 84, `ResizeObserverEntry` tem três novas propriedades para fornecer informações mais detalhadas. Cada uma dessas propriedades retorna um `ResizeObserverSize` contendo uma `blockSize` e uma propriedade `inlineSize` Essas informações são sobre o elemento observado no momento em que o retorno de chamada é invocado.
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+Todos esses itens retornam matrizes somente leitura porque, no futuro, espera-se que possam oferecer suporte a elementos com vários fragmentos, que ocorrem em cenários de várias colunas. Por enquanto, essas matrizes conterão apenas um elemento.
+
+O suporte da plataforma para essas propriedades é limitado, mas o [Firefox já oferece suporte](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility) para as duas primeiras.
+
+### Quando está sendo relatado?
+
+A especificação proíbe que `ResizeObserver` deve processar todos os eventos de redimensionamento antes de pintar e depois do layout. Isso torna o retorno de chamada de um `ResizeObserver` o lugar ideal para fazer alterações no layout da sua página. Como o `ResizeObserver` ocorre entre o layout e a pintura, isso apenas invalidará o layout, não a pintura.
+
+### Peguei vocês
+
+Você deve estar se perguntando: o que acontece se eu alterar o tamanho de um elemento observado dentro do retorno de chamada para `ResizeObserver`? A resposta é: você ativará outra chamada para o retorno de chamada imediatamente. Felizmente, `ResizeObserver` tem um mecanismo para evitar loops de retorno de chamada infinitos e dependências cíclicas. As alterações só serão processadas no mesmo quadro se o elemento redimensionado for mais profundo na árvore DOM do que o *elemento mais superficial* processado no retorno de chamada anterior. Caso contrário, eles serão adiados para o próximo quadro.
+
+## Aplicativo
+
+Uma coisa que `ResizeObserver` permite que você faça é implementar consultas de mídia por elemento. Ao observar os elementos, você pode definir imperativamente os pontos de interrupção do projeto e alterar os estilos de um elemento. [No exemplo](https://googlechrome.github.io/samples/resizeobserver/) a seguir, a segunda caixa mudará o raio da borda de acordo com sua largura.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// Only observe the second box
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+Outro exemplo interessante de se ver é uma janela de bate-papo. O problema que surge em um layout típico de conversa de cima para baixo é o posicionamento da rolagem. Para evitar confundir o usuário, é útil se a janela ficar no final da conversa, onde as mensagens mais recentes aparecem. Além disso, qualquer tipo de mudança de layout (pense em um telefone passando de paisagem para retrato ou vice-versa) deve ter o mesmo resultado.
+
+`ResizeObserver` permite que você escreva uma *única* parte do código que cuida de *ambos os* cenários. Redimensionar a janela é um evento que um `ResizeObserver` pode capturar por definição, mas chamar `appendChild()` também redimensiona esse elemento (a menos que `overflow: hidden` esteja definido), porque ele precisa abrir espaço para os novos elementos. Com isso em mente, são necessárias poucas linhas para atingir o efeito desejado:
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// Observe the scrollingElement for when the window gets resized
+ro.observe(document.scrollingElement);
+// Observe the timeline to process new messages
+ro.observe(timeline);
+```
+
+Muito legal, hein?
+
+A partir daqui, eu poderia adicionar mais código para lidar com o caso em que o usuário rolou para cima manualmente e deseja rolar para manter *essa* mensagem quando uma nova mensagem chegar.
+
+Outro caso de uso é para qualquer tipo de elemento personalizado que esteja fazendo seu próprio layout. Até `ResizeObserver`, não havia uma maneira confiável de ser notificado quando suas dimensões mudam para que seus filhos possam ser dispostos novamente.
+
+## Conclusão
+
+`ResizeObserver` está disponível na [maioria dos principais navegadores](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility). Em alguns casos, essa disponibilidade é bastante recente. Existem [alguns polyfills disponíveis,](https://github.com/WICG/ResizeObserver/issues/3) mas não é possível duplicar completamente a funcionalidade do `ResizeObserver`. As implementações atuais dependem da pesquisa ou da adição de elementos sentinela ao DOM. O primeiro irá drenar sua bateria no celular, mantendo a CPU ocupada, enquanto o último modifica seu DOM e pode bagunçar o estilo e outros códigos dependentes de DOM.
+
+Foto de [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) no [Unsplash](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
diff --git a/src/site/content/pt/blog/responsive-web-design-basics/index.md b/src/site/content/pt/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..4eef688dda8
--- /dev/null
+++ b/src/site/content/pt/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,333 @@
+---
+title: Fundamentos de web design responsivo
+subhead: Como criar sites que atendam às necessidades e recursos do dispositivo em que são exibidos.
+description: Como criar sites que atendam às necessidades e recursos do dispositivo em que são exibidos.
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+{# TODO (kayce): Remova este ToC codificado depois que o #1983 chegar. #}
+
+- [Defina a viewport (janela de visualização)](#viewport)
+- [Reimensione o conteúdo para a viewport](#size-content)
+- [Use media queries (consultas de mídia) CSS para responsividade](#media-queries)
+- [Como escolher breakpoints (pontos de interrupção)](#breakpoints)
+- [Visualize breakpoints de media queries no Chrome DevTools](#devtools)
+
+O uso de dispositivos móveis para navegar na web continua a crescer num ritmo astronômico. Mas esses dispositivos costumam ser limitados pelo tamanho da tela e exigem uma abordagem diferente de como o conteúdo é organizado na tela.
+
+O web design responsivo, definido originalmente por [Ethan Marcotte em A List Apart](http://alistapart.com/article/responsive-web-design/), atende às necessidades dos usuários e dos dispositivos que eles estão usando. O layout muda com base no tamanho e nas capacidades do dispositivo. Por exemplo, num telefone, os usuários veriam o conteúdo mostrado numa coluna única; um tablet já poderia mostrar o mesmo conteúdo em duas colunas.
+
+<figure>   {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+Existe uma infinidade de tamanhos de tela diferentes em celulares, "phablets", tablets, desktops, consoles de jogos, TVs e até mesmo wearables. Os tamanhos de tela estão sempre mudando, por isso é importante que seu site possa se adaptar a qualquer tamanho de tela, hoje ou no futuro. Além disso, os dispositivos possuem recursos diferentes com os quais interagimos com eles. Por exemplo, alguns de seus visitantes usarão uma tela sensível ao toque. O design responsivo moderno considera todas essas coisas para otimizar a experiência para todos.
+
+## Defina a viewport {: #viewport }
+
+As páginas otimizadas para uma variedade de dispositivos devem incluir uma meta tag viewport no cabeçalho do documento. Uma meta tag viewport fornece ao navegador instruções sobre como controlar as dimensões e o redimensionamento da página.
+
+Para proporcionar a melhor experiência, os navegadores móveis renderizam a página numa largura de tela de desktop (geralmente cerca de `980px` , embora isso varie entre dispositivos) e, em seguida, tentam fazer o conteúdo parecer melhor aumentando os tamanhos das fontes e redimensionando o conteúdo para caber no tela. Isto significa que os tamanhos das fontes podem parecer inconsistentes para os usuários, que podem ter que dar um duplo-toque ou beliscar para aplicar zoom com a finalidade de ver e interagir com o conteúdo.
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+Usando o valor meta viewport de `width=device-width` instrui a página a corresponder à largura da tela em pixels independentes de dispositivo. Um pixel independente de dispositivo (ou de densidade) é uma representação de um único pixel, que na realizada pode consistir de muitos pixels físicos, numa tela de alta densidade. Isto permite que a página readapte o conteúdo para corresponder a diferentes tamanhos de tela, seja ele renderizado num pequeno telefone celular ou num grande monitor de área de trabalho.
+
+<figure>   {% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="Captura de tela de uma página com o texto difícil de ler porque está muito pequeno", width="500", height="640" %}   <figcaption> Exemplo de como a página é carregada num dispositivo sem a meta tag viewport. <a href="https://without-vp-meta.glitch.me/">Veja este exemplo no Glitch</a>. </figcaption></figure>
+
+<figure>   {% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="Captura de tela da mesma página com o texto em um tamanho que pode ser lido", width="500", height="888" %}   <figcaption>     Um exemplo de como a página é carregada em dispositivo com a meta tag viewport. <a href="https://with-vp-meta.glitch.me/">Veja este exemplo no Glitch</a>.   </figcaption></figure>
+
+[Alguns navegadores](https://css-tricks.com/probably-use-initial-scale1/) mantêm a largura da página constante ao girar para o modo paisagem e fazem zoom em vez de refluir o conteúdo para preencher a tela. Adicionar o valor `initial-scale=1` instrui os navegadores a estabelecer uma relação 1:1 entre pixels CSS e pixels independentes de dispositivo, independentemente da orientação do dispositivo, e permite que a página aproveite a largura total do modo paisagem.
+
+{% Aside 'caution' %} Para garantir que os navegadores mais antigos possam analisar corretamente os atributos, use uma vírgula para separar os atributos. {% endAside %}
+
+A auditoria do Lighthouse [Não tem uma tag `<meta name="viewport">` com `width` ou `initial-scale`](https://developer.chrome.com/docs/lighthouse/pwa/viewport/) pode ajudá-lo a automatizar o processo de certificar-se de que seus documentos HTML estão usando a meta tag viewport corretamente.
+
+### Garanta uma viewport acessível {: #accessible-viewport}
+
+Além de definir uma `initial-scale`, você também pode definir os seguintes atributos na viewport:
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+Quando estabelecidos, eles podem desativar a capacidade do usuário de ampliar a viewport, trazendo causar problemas de acessibilidade. Portanto, não recomendamos o uso desses atributos.
+
+## Reimensione o conteúdo para a viewport {: #size-content }
+
+Tanto em desktops quanto em dispositivos móveis, os usuários estão acostumados a rolar os sites verticalmente, mas não horizontalmente; forçar o usuário a rolar horizontalmente ou diminuir o zoom para ver a página inteira resulta numa experiência do usuário ruim.
+
+Ao desenvolver um site para celular com uma meta tag viewport (que define as dimensões da janela de visualização), é fácil criar acidentalmente conteúdo de página que não cabe na janela de visualização especificada. Por exemplo, uma imagem exibida com uma largura maior do que a viewport pode fazer com que a janela de visualização role horizontalmente. Você deve ajustar esse conteúdo para caber na largura da janela de visualização, de modo que o usuário não precise rolar horizontalmente.
+
+A auditoria do Lighthouse [O conteúdo não está dimensionado corretamente para a viewport](https://developer.chrome.com/docs/lighthouse/pwa/content-width/) pode ajudá-lo a automatizar o processo de detecção de conteúdo que extrapola a janela de visualização.
+
+### Imagens {: #images}
+
+Uma imagem tem dimensões fixas e se for maior do que a janela de visualização ela irá forçar o aparecimento de uma barra de rolagem. Uma maneira comum de lidar com esse problema é dar a todas as imagens uma `max-width` de `100%`. Isto fará com que a imagem encolha para caber no espaço que tem, caso o tamanho da janela de visualização seja menor do que a imagem. No entanto, como a `max-width`, em vez da `width` é de `100%`, a imagem não se estenderá além de seu tamanho natural. Geralmente é seguro adicionar o seguinte à sua folha de estilo para que você nunca tenha problemas com imagens forçando o aparecimento de uma barra de rolagem.
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### Adicione as dimensões da imagem ao elemento img {: #image-responses}
+
+Ao usar `max-width: 100%` você está redefinindo as dimensões naturais da imagem, no entanto, você ainda deve usar os atributos `width` e `height` na sua tag `<img>` pois os navegadores modernos usarão essas informações para reservar espaço para a imagem antes de carregá-la, o que evitará [deslocamentos no layout](/optimize-cls/) à medida em que o conteúdo é carregado.
+
+### Layout {: #layout }
+
+Como as dimensões e largura da tela em pixels CSS variam amplamente entre dispositivos (por exemplo, entre celulares e tablets, e até mesmo entre celulares diferentes), o conteúdo não deve depender de uma largura de viewport específica para renderizar bem.
+
+No passado, isto exigia elementos de configuração para definir o layout em porcentagens. No exemplo abaixo está mostrado um layout de duas colunas com elementos flutuantes, dimensionados usando pixels. Uma vez que a viewport é menor do que a largura total das colunas, somos obrigados a rolar horizontalmente para ver o conteúdo.
+
+<figure>   {% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="Captura de tela de um layout de duas colunas com a maior parte da segunda coluna fora da viewport", width="800", height="504" %}   <figcaption> Um layout flutuante usando pixels. <a href="https://layout-floats-px.glitch.me/">Veja este exemplo no Glitch</a>  </figcaption></figure>
+
+Usando porcentagens para as larguras, as colunas sempre se mantêm proporcionais ao contêiner. Isso significa que as colunas se tornam mais estreitas, em vez de criar uma barra de rolagem.
+
+{% Glitch { id: 'layout-floats-percent', path: 'README.md' } %}
+
+As técnicas modernas de layout CSS, como Flexbox, Grid Layout e Multicol, tornam a criação dessas grades flexíveis muito mais fácil.
+
+#### Flexbox {: #flexbox }
+
+Este método de layout é ideal quando você tem um conjunto de itens de tamanhos diferentes e deseja que eles se encaixem confortavelmente em uma ou mais fileiras, com itens menores ocupando menos espaço e itens maiores ocupando mais espaço.
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+Num design responsivo, você pode usar o Flexbox para exibir itens como uma única linha ou agrupados em várias linhas conforme o espaço disponível diminui.
+
+{% Glitch { id: 'responsive-flexbox', height: 220 } %}
+
+[Leia mais sobre o Flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox).
+
+#### CSS Grid Layout {: #grid }
+
+O CSS Grid Layout (layout de grade) permite a criação direta de grades flexíveis. Se considerarmos o exemplo flutuante anterior, em vez de criar nossas colunas com porcentagens, poderíamos usar o layout de grade e a unidade `fr`, que representa uma parte do espaço disponível no contêiner.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+O CSS Grid Layout também pode ser usada para criar layouts de grade regulares, com tantos itens quantos couberem. O número de faixas disponíveis será reduzido conforme o tamanho da tela diminui. Na demonstração abaixo, temos tantas cartas quantas cabem em cada linha, com um tamanho mínimo de `200px`.
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[Leia mais sobre o CSS Grid Layout](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
+
+#### Layout multicolunas {: #multicol}
+
+Para alguns tipos de layout, você pode usar o Multiple-column Layout (Multicol), que pode criar várias colunas responsivas com a propriedade `column-width` Na demonstração abaixo, você pode ver que colunas são adicionadas se houver espaço para outra coluna de `200px`
+
+{% Glitch { id: 'responsive-multicol', path: 'style.css' } %}
+
+[Leia mais sobre Multicol](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+
+## Use media queries (consultas de mídia) CSS para responsividade {: #media-queries }
+
+Às vezes, você precisará fazer alterações mais abrangentes no seu layout para suportar um determinado tamanho de tela do que as técnicas mostradas acima permitem. É aqui que as media queries se tornam úteis.
+
+Media queries (consultas de mídia) são filtros simples que podem ser aplicados a estilos CSS. Eles facilitam a mudança de estilos com base nos tipos de dispositivo que renderizam o conteúdo ou nos recursos desse dispositivo, por exemplo, largura, altura, orientação, efeito hover e se o dispositivo está sendo usado como uma tela sensível ao toque.
+
+Para fornecer diferentes estilos para impressão, você precisa informar um *tipo* de saída que possa incluir uma folha de estilo com estilos de impressão da seguinte maneira:
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+Como alternativa, você pode incluir estilos de impressão em sua folha de estilo principal usando uma media query:
+
+```css
+@media print {
+  /* print styles go here */
+}
+```
+
+{% Aside 'note' %} Também é possível incluir folhas de estilo separadas no seu arquivo CSS principal usando a sintaxe `@import`, `@import url(print.css) print;`, no entanto, esse uso não é recomendado por motivos de desempenho. Veja [Evite importações de CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports) para mais detalhes. {% endAside %}
+
+Para web design responsivo, estamos basicamente pesquisando os *recursos* do dispositivo a fim de fornecer um layout diferente para telas menores ou quando detectamos que nosso visitante está usando uma tela sensível ao toque.
+
+### Media queries baseadas no tamanho do viewport {: #viewport-media-queries}
+
+As media queries (consultas de mídia) nos permitem criar uma experiência responsiva onde estilos específicos são aplicados a telas pequenas, telas grandes e em qualquer lugar entre os dois. O recurso que estamos detectando aqui é, portanto, o tamanho da tela e podemos testar o seguinte.
+
+- `width` (`min-width`, `max-width`)
+- `height` (`min-height`, `max-height`)
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch { id: 'media-queries-size', path: 'index.html' } %}
+
+Todos esses recursos têm excelente suporte pelo navegador, para obter mais detalhes, incluindo informações de suporte do navegador, veja [width](https://developer.mozilla.org/docs/Web/CSS/@media/width), [height](https://developer.mozilla.org/docs/Web/CSS/@media/height), [orientation](https://developer.mozilla.org/docs/Web/CSS/@media/orientation) e [aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio) no MDN.
+
+{% Aside 'note' %} A especificação chegou a incluir testes para `device-width` e `device-height`. Mas eles foram descontinuados e devem ser evitados. As propriedades `device-width` e `device-height` testavam o tamanho real da janela do dispositivo, o que não era útil na prática já que pode ser diferente da janela de visualização para a qual o usuário está olhando, por exemplo, se o usuário redimensionou a janela do navegador. {% endAside %}
+
+### Media queries baseadas na capacidade do dispositivo {: #capacity-media-queries}
+
+Dada a variedade de dispositivos disponíveis, não podemos presumir que todo dispositivo grande seja um desktop ou notebook comum, ou que as pessoas só usem uma tela sensível ao toque num dispositivo pequeno. Com algumas adições mais recentes à especificação de media queries, podemos testar recursos como o tipo de ponteiro usado para interagir com o dispositivo e se o usuário pode passar o mouse sobre os elementos (efeito hover).
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+Experimente visualizar esta demonstração em diferentes dispositivos, como um computador desktop normal e um telefone ou tablet.
+
+{% Glitch 'media-query-pointer' %}
+
+Esses recursos mais recentes têm um bom suporte em todos os navegadores modernos. Descubra mais nas páginas MDN para [hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover), [any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover), [pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer), [any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer).
+
+#### Usando `any-hover` e `any-pointer`
+
+Os recursos `any-hover` e `any-pointer` testam se o usuário tem a capacidade de passar o mouse sobre um alvo (hover) ou usar esse tipo de ponteiro mesmo que não seja a maneira principal de interagir com o dispositivo. Tenha muito cuidado ao usá-los. Forçar um usuário a mudar para um mouse quando ele estiver usando uma tela sensível ao toque não é uma atitude muito amigável! No entanto, `any-hover` e `any-pointer` podem ser úteis se for importante descobrir que tipo de dispositivo o usuário possui. Por exemplo, um notebook com tela sensível ao toque e um trackpad devem corresponder a ponteiros de baixa e alta precisão, além da capacidade de hover.
+
+## Como escolher breakpoints (pontos de interrupção) {: #breakpoints}
+
+Não defina breakpoints (pontos de interrupção) com base em classes de dispositivos. Definir breakpoints com base em dispositivos, produtos, nomes de marcas ou sistemas operacionais específicos que estão em uso hoje pode resultar em um pesadelo de manutenção. Em vez disso, o próprio conteúdo deve determinar como o layout se ajusta ao seu contêiner.
+
+### Escolha os principais breakpoints, inicialmente aos poucos e ampliando depois {: #major-breakpoints }
+
+Projete o conteúdo para caber numa tela pequena primeiro e, em seguida, expanda a tela até que um breakpoint se torne necessário. Isto permite que você otimize os breakpoints com base no conteúdo e tenha que manter o menor número possível deles.
+
+Vamos explorar o exemplo que vimos no início: a previsão do tempo. O primeiro passo é fazer com que a previsão pareça boa numa tela pequena.
+
+<figure>   {% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="Captura de tela de um aplicativo de previsão do tempo em uma largura móvel", width="400", height="667" %}   <figcaption> O aplicativo tem uma largura estreita.   </figcaption></figure>
+
+Em seguida, redimensione o navegador até que haja excesso de espaço em branco entre os elementos e a previsão simplesmente não pareça tão boa. A decisão é um tanto subjetiva, mas uma dimensão acima de `600px` é sem dúvida larga demais.
+
+<figure>   {% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="Captura de tela de um aplicativo de clima com grandes lacunas entre os itens", width="400", height="240" %}   <figcaption>O aplicativo em um ponto em que sentimos que devemos ajustar o design. </figcaption></figure>
+
+Para inserir um breakpoint em `600px`, crie duas media queries no final de seu CSS para o componente, uma para usar quando o navegador tiver `600px` ou menos e outra para quando ele for mais largo que `600px` .
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+Finalmente, refatore o CSS. Dentro da media query para uma `max-width` de `600px`, adicione o CSS destinado a telas pequenas. Dentro da media query para uma `min-width` de `601px` adicione o CSS para telas maiores.
+
+#### Escolha breakpoints menores quando necessário
+
+Além de escolher os principais breakpoints quando o layout muda significativamente, também é útil fazer ajustes para pequenas alterações. Por exemplo, entre os principais breakpoints, pode ser útil ajustar as margens ou padding de um elemento ou aumentar o tamanho da fonte para deixá-la mais natural no layout.
+
+Vamos começar otimizando o layout da tela pequena. Nesse caso, vamos aumentar a fonte quando a largura da viewport for maior que `360px`. Em segundo lugar, quando houver espaço suficiente, podemos separar as temperaturas altas e baixas para que fiquem na mesma linha, em vez de uma em cima da outra. E também vamos aumentar um pouco os ícones de clima.
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+Da mesma forma, para telas grandes, é melhor limitar a largura máxima do painel de previsão para que não consuma toda a largura da tela.
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch { id: 'responsive-forecast', path: 'style.css' } %}
+
+### Otimize o texto para leitura
+
+A teoria clássica da legibilidade sugere que uma coluna ideal deve conter de 70 a 80 caracteres por linha (cerca de 8 a 10 palavras em inglês). Portanto, cada vez que a largura de um bloco de texto ultrapassar cerca de 10 palavras, considere adicionar um breakpoint.
+
+<figure>   {% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="Captura de tela de uma página de texto em um dispositivo móvel", width="400", height="488" %}   <figcaption>    O texto lido em um dispositivo móvel.</figcaption></figure>
+
+<figure>   {% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="Captura de tela de uma página de texto em um navegador de desktop", width="800", height="377" %}   <figcaption>     O texto lido em um navegador de desktop com um breakpoint adicionado para restringir o comprimento da linha. </figcaption></figure>
+
+Vamos dar uma olhada mais a fundo no exemplo de postagem do blog acima. Em telas menores, a fonte Roboto com `1em` funciona perfeitamente resultando em 10 palavras por linha, mas telas maiores requerem um breakpoint. Nesse caso, se a largura do navegador for maior que `575px`, a largura ideal do conteúdo é `550px` .
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch { id: 'rwd-reading', path: 'index.html' } %}
+
+### Evite simplesmente ocultar o conteúdo
+
+Tenha cuidado ao escolher o conteúdo a ocultar ou mostrar, dependendo do tamanho da tela. Não esconda conteúdo simplesmente porque ele não cabe na tela. O tamanho da tela não é uma indicação definitiva do que o usuário pode desejar. Por exemplo, eliminar a contagem de pólen da previsão do tempo pode ser um problema sério para quem sofre de alergia na primavera, que precisa de informações para determinar se pode sair de casa ou não.
+
+## Visualize breakpoints de media query no Chrome DevTools {: #devtools}
+
+Depois de configurar seus breakpoints de media query, você vai querer ver como seu site se apresenta com eles. Você pode redimensionar a janela do navegador para acionar os breakpoints, mas o Chrome DevTools tem um recurso integrado que facilita a visualização da aparência de uma página em diferentes breakpoints.
+
+<figure>{% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="Captura de tela de DevTools com nosso aplicativo de clima aberto e uma largura de 822 pixels selecionada.", width="800", height="522" %} <figcaption> DevTools mostrando o aplicativo de previsão do tempo enquanto olha para um tamanho de viewport maior. </figcaption></figure>
+
+<figure>   {% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="Captura de tela do DevTools com nosso aplicativo de clima aberto e uma largura de 436 pixels selecionada.", width="800", height="521" %}   <figcaption>     DevTools mostrando o aplicativo de clima enquanto olha para um tamanho de viewport mais estreito.   </figcaption></figure>
+
+Para visualizar sua página em diferentes breakpoints:
+
+[Abra DevTools](https://developer.chrome.com/docs/devtools/open/) e ative o [Modo de Dispositivo](https://developer.chrome.com/docs/devtools/device-mode/#toggle). Isto abre no [modo responsivo](https://developer.chrome.com/docs/devtools/device-mode/#responsive) por default.
+
+Para ver suas media queries, abra o menu Modo de Dispositivo e selecione [Mostrar media queries](https://developer.chrome.com/docs/devtools/device-mode/#queries) para exibir seus breakpoints como barras coloridas acima de sua página.
+
+Clique numa das barras para visualizar sua página enquanto a media query está ativa. Clique com o botão direito numa barra para ir para a definição da media query.
diff --git a/src/site/content/pt/blog/samesite-cookie-recipes/index.md b/src/site/content/pt/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..57c030a83dc
--- /dev/null
+++ b/src/site/content/pt/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,159 @@
+---
+title: Receitas de cookies do SameSite
+subhead: |-
+  Atualize os cookies do seu site para se preparar para as mudanças futuras no SameSite
+  comportamento do atributo.
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: Com a introdução do novo valor de atributo SameSite = None, os sites agora podem marcar explicitamente seus cookies para uso entre sites. Os navegadores estão mudando para fazer cookies sem um atributo SameSite atuarem como primários por padrão, uma opção de preservação de privacidade mais segura e mais do que o comportamento aberto atual. Aprenda como marcar seus cookies para garantir que seus cookies primários e terciários continuem a funcionar assim que essa alteração entrar em vigor.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %} Este artigo faz parte de uma série sobre as alterações de atributo do cookie `SameSite`
+
+- [Cookies SameSite explicados](/samesite-cookies-explained/)
+- [Receitas de cookies SameSite](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+[Chrome](https://www.chromium.org/updates/same-site), [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ), [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) e outros mudarão seu comportamento padrão de acordo com a proposta da IETF, [Cookies Incrementalmente Melhores,](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) para que:
+
+- Cookies sem um atributo `SameSite` sejam tratados como `SameSite=Lax`, ou seja, o comportamento padrão será para restringir cookies para **apenas** contextos primários.
+- Os cookies para uso entre sites **devem** especificar `SameSite=None; Secure` para permitir a inclusão no contexto de terceiros.
+
+Este recurso é o [comportamento padrão do Chrome 84 estável em diante](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html). Se você ainda não o fez, deve atualizar os atributos dos cookies de terceiros para que não sejam bloqueados no futuro.
+
+## Suporte para vários navegadores
+
+Consulte a seção de [compatibilidade](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie#Browser_compatibility) do navegador da página [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie)
+
+## Casos de uso para cookies de sites ou de terceiros
+
+Existem vários casos de uso e padrões comuns em que os cookies precisam ser enviados em um contexto de terceiros. Se você fornecer ou depender de um desses casos de uso, certifique-se de que você ou o provedor atualizem seus cookies para garantir que o serviço continue a funcionar corretamente.
+
+### Conteúdo em um `<iframe>`
+
+O conteúdo de um site diferente exibido em um `<iframe>` está em um contexto de terceiros. Os casos de uso padrão aqui são:
+
+- Conteúdo incorporado compartilhado de outros sites, como vídeos, mapas, exemplos de código e publicações sociais.
+- Widgets de serviços externos, como pagamentos, calendários, reservas e funcionalidade de reserva.
+- Widgets como botões sociais ou serviços antifraude que criam `<iframes>` menos óbvios.
+
+Os cookies podem ser usados aqui para, entre outras coisas, manter o estado da sessão, armazenar preferências gerais, habilitar estatísticas ou personalizar conteúdo para usuários com contas existentes.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="Diagrama de uma janela do navegador em que o URL do conteúdo incorporado não corresponde ao URL da página.", width="468", height="383", style="max-width: 35vw;" %} <figcaption> Se o conteúdo incorporado não vier do mesmo site que o contexto de navegação de nível superior, é conteúdo de terceiros. </figcaption></figure>
+
+Além disso, como a web é inerentemente combinável, `<iframes>` são usados para incorporar conteúdo que também é visualizado em um contexto de nível superior ou próprio. Todos os cookies usados por esse site serão considerados cookies de terceiros quando o site for exibido dentro do quadro. Se você estiver criando sites que pretende incorporar facilmente por outras pessoas, ao mesmo tempo em que também depende de cookies para funcionar, você também precisará garantir que eles sejam marcados para uso entre sites ou que você possa fazer um fallback sem eles.
+
+### Solicitações "inseguras" em diferentes sites
+
+Embora "inseguro" possa soar um pouco preocupante aqui, isso se refere a qualquer solicitação que possa ter a intenção de mudar de estado. Na web, isso é principalmente solicitações POST. Os cookies marcados como `SameSite=Lax` serão enviados em navegações seguras de nível superior, por exemplo, clicar em um link para ir para um site diferente. No entanto, algo como um `<form>` via POST para um site diferente não incluiria cookies.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="Diagrama de uma solicitação passando de uma página para outra.", width="719", height="382", style="max-width: 35vw;" %} <figcaption> Se a solicitação recebida usar um método "seguro", os cookies serão enviados. </figcaption></figure>
+
+Esse padrão é usado em sites que podem redirecionar o usuário para um serviço remoto para realizar alguma operação antes de retornar, por exemplo, redirecionando para um provedor de identidade de terceiros. Antes de o usuário deixar o site, um cookie é definido contendo um token de uso único com a expectativa de que esse token possa ser verificado na solicitação de retorno para mitigar ataques [Cross Site Request Forgery (CSRF).](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) Se essa solicitação de retorno vier via POST, será necessário marcar os cookies como `SameSite=None; Secure`.
+
+### Recursos remotos
+
+Todo recurso remoto em uma página pode depender de cookies a serem enviados com uma solicitação, de tags `<img>`, tags `<script>` e assim por diante. Casos de uso comuns incluem rastreamento de pixels e personalização de conteúdo.
+
+Isso também se aplica a solicitações iniciadas em seu JavaScript por `fetch` ou `XMLHttpRequest` . Se `fetch()` for chamado com as [credenciais: opção `credentials: 'include'`](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included) este é um bom indicativo de que podem ser esperados cookies nessas solicitações. Para `XMLHttpRequest` você deve procurar instâncias da propriedade [`withCredentials`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials) definida como `true`. Este é um bom indicativo de que cookies podem ser esperados nessas solicitações. Esses cookies precisarão ser marcados adequadamente para serem incluídos nas solicitações entre sites.
+
+### Conteúdo em um WebView
+
+Um WebView em um aplicativo específico de plataforma é alimentado por um navegador e você precisará testar se as mesmas restrições ou problemas se aplicam. No Android, se o WebView for baseado no Chrome, os novos padrões **não** serão aplicados imediatamente com o Chrome 84. No entanto, a intenção é aplicá-los no futuro, então você ainda assim deve testar e se preparar para isso. Além disso, o Android permite que seus aplicativos específicos de plataforma definam cookies diretamente por meio da [API CookieManager](https://developer.android.com/reference/android/webkit/CookieManager). Assim como acontece com os cookies definidos por meio de cabeçalhos ou JavaScript, considere incluir `SameSite=None; Secure` se forem destinados ao uso entre sites.
+
+## Como implementar o `SameSite` hoje
+
+Para cookies em que eles são necessários apenas em um contexto original, você deve marcá-los como `SameSite=Lax` ou `SameSite=Strict`, dependendo de suas necessidades. Você também pode optar por não fazer nada e apenas permitir que o navegador imponha seu padrão, mas isso vem junto com o risco de comportamento inconsistente entre os navegadores e possíveis avisos de console para cada cookie.
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+Para cookies necessários em um contexto de terceiros, você precisará garantir que eles sejam marcados como `SameSite=None; Secure`. Observe que você precisa de ambos os atributos juntos. Se você apenas especificar `None` sem `Secure` o cookie será rejeitado. No entanto, existem algumas diferenças mutuamente incompatíveis nas implementações do navegador, portanto, pode ser necessário usar algumas das estratégias de atenuação descritas a seguir em [Tratamento de clientes incompatíveis](#handling-incompatible-clients).
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### Tratamento de clientes incompatíveis
+
+Como essas alterações para incluir `None` e atualizar o comportamento padrão ainda são relativamente novas, há inconsistências entre os navegadores quanto à forma como essas alterações são tratadas. Você pode consultar a [página de atualizações em chromium.org](https://www.chromium.org/updates/same-site/incompatible-clients) para se informar sobre os problemas conhecidos atualmente, no entanto, não é possível dizer se isso é completo. Embora isso não seja o ideal, existem soluções alternativas que você pode empregar durante esta fase de transição. A regra geral, porém, é tratar clientes incompatíveis como o caso especial. Não crie uma exceção para navegadores que implementam as regras mais recentes.
+
+A primeira opção é definir os cookies de estilo novo e antigo:
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+Os navegadores que implementam o comportamento mais recente `SameSite` o cookie com o valor SameSite, enquanto outros navegadores podem ignorá-lo ou defini-lo incorretamente. No entanto, esses mesmos navegadores definirão o cookie `3pcookie-legacy` Ao processar os cookies incluídos, o site deve primeiro verificar a presença do cookie de novo estilo e, se ele não for encontrado, voltar para o cookie legado.
+
+O exemplo abaixo mostra como fazer isso em Node.js, usando a [estrutura Express](https://expressjs.com) e seu middleware [analisador de cookies.](https://www.npmjs.com/package/cookie-parser)
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // Define o novo estilo de cookie
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // E define o mesmo valor no cookie legado
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // verifique o novo cookie de estilo primeiro
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // caso contrário, volte para o cookie legado
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+A desvantagem é que isso envolve a configuração de cookies redundantes para cobrir todos os navegadores e requer alterações tanto no ponto de configuração quanto na leitura do cookie. No entanto, essa abordagem deve abranger todos os navegadores, independentemente de seu comportamento, e garantir que os cookies de terceiros continuem a funcionar como antes.
+
+Como alternativa, no momento de enviar o `Set-Cookie` , você pode escolher detectar o cliente por meio da string do agente do usuário. Consulte a [lista de clientes incompatíveis](https://www.chromium.org/updates/same-site/incompatible-clients) e, a seguir, use uma biblioteca apropriada para sua plataforma, por exemplo, [biblioteca ua-parser-js](https://www.npmjs.com/package/ua-parser-js) em Node.js. É aconselhável encontrar uma biblioteca para lidar com a detecção do agente do usuário, pois provavelmente você não irá querer escrever essas expressões regulares você mesmo.
+
+O benefício dessa abordagem é que ela exige apenas uma alteração no momento da configuração do cookie. No entanto, o aviso necessário aqui é que a detecção do agente do usuário é inerentemente frágil e pode não capturar todos os usuários afetados.
+
+{% Aside %}
+
+Independentemente da opção que você escolher, é aconselhável garantir que você tenha uma maneira de registrar os níveis de tráfego que estiverem passando pela rota legada. Certifique-se de ter um lembrete ou alerta para remover esta solução alternativa assim que os níveis caírem abaixo de um limite aceitável para o seu site.
+
+{% endAside %}
+
+## Suporte para `SameSite=None` em linguagens, bibliotecas e estruturas
+
+A maioria das linguagens e bibliotecas suporta o `SameSite` para cookies, no entanto, a adição de `SameSite=None` ainda é relativamente nova, o que significa que você pode precisar contornar alguns dos comportamentos padrão por enquanto. Eles estão documentados no <a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">repositório exemplos `SameSite` no GitHub</a> .
+
+## Obtendo ajuda
+
+Os cookies estão em todos os lugares e é raro que qualquer site tenha completamente auditado onde eles estão definidos e usados, especialmente quando se incluir casos de uso cross-site entre as combinações. Quando você encontra um problema, pode muito bem ser a primeira vez que alguém o encontra. Então, não hesite em entrar em contato:
+
+- Relate um problema no [repositório de exemplos `SameSite` no GitHub](https://github.com/GoogleChromeLabs/samesite-examples) .
+- faça uma pergunta com a [tag "samesite" no StackOverflow](https://stackoverflow.com/questions/tagged/samesite) .
+- Para problemas com o comportamento do Chromium, relate um bug por meio do [modelo de problema [cookies do SameSite]](https://bit.ly/2lJMd5c) .
+- Siga o progresso do Chrome na [página de atualizações `SameSite`](https://www.chromium.org/updates/same-site) .
+
diff --git a/src/site/content/pt/blog/samesite-cookies-explained/index.md b/src/site/content/pt/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..351983fc7e4
--- /dev/null
+++ b/src/site/content/pt/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,246 @@
+---
+title: Cookies SameSite explicados
+subhead: Proteja seu site aprendendo como marcar explicitamente cookies cross-site.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: Saiba como marcar seus cookies para uso primário e de terceiros com o atributo SameSite. Você pode melhorar a segurança do seu site usando os valores Lax e Strict do SameSite para melhorar a proteção contra ataques CSRF. Especificar o novo atributo None permite que você marque explicitamente seus cookies para uso entre sites (cross-site).
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Este artigo faz parte de uma série sobre alterações em atributos do cookie `SameSite`
+
+- [Cookies SameSite explicados](/samesite-cookies-explained/)
+- [Receitas de cookies SameSite](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+Cookies são um dos métodos disponíveis para adicionar estado persistente a sites. Com o passar dos anos, suas capacidades cresceram e evoluíram, mas deixaram a plataforma com alguns problemas legados problemáticos. Para resolver isso, os navegadores (incluindo Chrome, Firefox e Edge) estão mudando seu comportamento para impor mais padrões de preservação da privacidade.
+
+Cada cookie é um par chave=valor (`key=value`) junto com uma série de atributos que controlam quando e onde o cookie é usado. Você provavelmente já usou esses atributos para definir coisas como datas de expiração ou indicar que o cookie só deve ser enviado por HTTPS. Os servidores definem cookies enviando o cabeçalho `Set-Cookie` na sua resposta. Para saber todos os detalhes, você pode mergulhar no [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1), mas aqui você pode ter uma introdução rápida.
+
+Digamos que você tenha um blog no qual deseja exibir uma promoção "O que há de novo" para seus usuários. Os usuários podem dispensar a promoção e assim eles não irão vê-la novamente por um tempo. Você pode armazenar essa preferência em um cookie, configurá-lo para expirar em um mês (2.600.000 segundos) e enviá-lo apenas por HTTPS. O cabeçalho ficaria assim:
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Três cookies sendo enviados para um navegador por um servidor em uma resposta HTTP", width="800", height="276", style="max-width: 35vw" %}   <figcaption>Servers set cookies using the <code>Set-Cookie</code> header.</figcaption></figure>
+
+Quando o leitor visualizar uma página que atende a esses requisitos, ou seja, quando estiver numa conexão segura e o cookie tenha menos de um mês de vida, o navegador enviará este cabeçalho na sua solicitação HTTP:
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Três cookies sendo enviados de um navegador para um servidor numa solicitação HTTP", width="800", height="165", style="max-width: 35vw" %}   <figcaption>Seu navegador devolve os cookies através do cabeçalho <code>Cookie</code>.</figcaption></figure>
+
+Você também pode adicionar e ler os cookies disponíveis para esse site em JavaScript através de `document.cookie`. Atribuir um par chave=valor a `document.cookie` cria ou substitui um cookie com essa chave. Por exemplo, você pode experimentar o seguinte código no console JavaScript do seu navegador:
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+A leitura de `document.cookie` devolve todos os cookies acessíveis no contexto atual, com cada cookie separado por um ponto e vírgula:
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript acessando cookies no navegador", width="600", height="382", style="max-width: 35vw" %}<figcaption>JavaScript pode accessar cookies usando <code>document.cookie</code>.</figcaption></figure>
+
+Se você tentar isso numa seleção de sites populares, notará que a maioria deles define muito mais do que apenas três cookies. Na maioria dos casos, esses cookies são enviados a cada solicitação para esse domínio, o que tem uma série de implicações. A largura de banda de upload geralmente é mais restrita que o download para seus usuários, de modo que a sobrecarga em todas as solicitações de saída estará adicionando um atraso no seu tempo para o primeiro byte. Seja conservador no número e no tamanho dos cookies que você define. Use o atributo `Max-Age` para ajudar a garantir que os cookies não durem mais do que o necessário.
+
+## O que são cookies primários e de terceiros?
+
+Se você voltar para a mesma seleção de sites que estava olhando antes, deve ter percebido que havia cookies para uma variedade de domínios, não apenas aquele que você estava visitando no momento. Os cookies que correspondem ao domínio do site atual (o domínio exibido na barra de endereços do navegador) são chamados de cookies **primários.** Da mesma forma, os cookies de domínios diferentes do site atual são chamados de cookies de **terceiros.** Isto não é um rótulo absoluto, mas relativo ao contexto do usuário; o mesmo cookie pode ser original ou de terceiros, dependendo do site no qual o usuário se encontra no momento.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Três cookies sendo enviados para um navegador a partir de solicitações diferentes na mesma página", width="800", height="346", style="max-width: 35vw" %}<figcaption>Os cookies podem vir de uma variedade de domínios diferentes em uma página.</figcaption></figure>
+
+Continuando o exemplo acima, vamos supor que uma de suas postagens de blog tenha uma foto de um gato particularmente incrível e está hospedada em `/blog/img/amazing-cat.png`. Por ser uma imagem tão incrível, outra pessoa a usa diretamente em seu site. Se um visitante esteve no seu site e possui o cookie `promo_shown`, quando ele visualizar o `amazing-cat.png` no site da outra pessoa, esse cookie **será enviado** como parte da solicitação de imagem. Isso é completamente inútil, já que `promo_shown` não é usado para nada no site dessa outra pessoa, ele apenas acrescenta uma sobrecarga à solicitação.
+
+Se for um efeito não intencional, por que alguém o faria? É esse mecanismo que permite que os sites mantenham o estado quando estão sendo usados num contexto de terceiros. Por exemplo, se você incorporar um vídeo do YouTube no seu site, os visitantes verão uma opção "Assistir mais tarde" no player. Se o seu visitante já estiver conectado ao YouTube, essa sessão está sendo disponibilizada no player incorporado por um cookie de terceiros, o que significa que o botão "Assistir mais tarde" salvará o vídeo de uma vez ao invés de solicitar que ele faça login ou tenha que navegar para fora de sua página e de volta para o YouTube.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="O mesmo cookie sendo enviado em três contextos diferentes", width="800", height="433", style="max-width: 35vw" %}<figcaption>Um cookie em um contexto de terceiros é enviado ao visitar páginas diferentes.</figcaption></figure>
+
+Uma das propriedades culturais da web é que ela tende a ser aberta por default. Isto é parte do que tem permitido que tantas pessoas criassem seus próprios conteúdos e aplicativos nela. No entanto, isso também trouxe uma série de questões relacionadas a segurança e privacidade. Os ataques de falsificação de solicitação entre sites (CSRF - Cross-Site Request Forgery) baseiam-se no fato de que os cookies são anexados a qualquer solicitação para uma determinada origem, independentemente de quem inicia a solicitação. Por exemplo, se você visitar `evil.example`, ele pode acionar solicitações para `your-blog.example`, e seu navegador anexará imediatamente os cookies associados. Se o seu blog não tiver cuidado com a forma como valida essas solicitações, o site `evil.example` poderá desencadear ações como excluir postagens ou adicionar conteúdo.
+
+Os usuários também estão se conscientizando de como cookies podem ser usados para rastrear as atividades deles através de múltiplos sites. No entanto, até agora não houve uma maneira de declarar explicitamente sua intenção com o cookie. Seu `promo_shown` só pode ser enviado num contexto primário, enquanto um cookie de sessão para um widget que deve ser incorporado em outros sites está intencionalmente lá para fornecer o estado de usuário logado num contexto de terceiros.
+
+## Declare explicitamente o uso de cookies com o atributo `SameSite`
+
+A introdução do `SameSite` (definido em [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00) ) permite que você declare se seu cookie deve ser restrito a um contexto primário ou do mesmo site. É útil entender exatamente o que 'site' significa aqui. O site é a combinação do sufixo do domínio e a parte do domínio imediatamente anterior. Por exemplo, o `www.web.dev` faz parte do site `web.dev`
+
+{% Aside 'key-term' %}
+
+Se o usuário estiver em `www.web.dev` e solicitar uma imagem de `static.web.dev`, isto será considerado uma solicitação do **mesmo site.**
+
+{% endAside %}
+
+Quem define o que é um sufixo de domínio é a [lista de sufixos públicos](https://publicsuffix.org/), portanto, a distinção não se restringe apenas a domínios de nível superior como `.com` mas também inclui serviços como `github.io`. Isto permite que `your-project.github.io` e `my-project.github.io` sejam contados como sites separados.
+
+{% Aside 'key-term' %}
+
+Se o usuário estiver em `your-project.github.io` e solicitar uma imagem de `my-project.github.io`, isto será considerado uma solicitação **entre sites.**
+
+{% endAside %}
+
+A introdução do atributo `SameSite` num cookie fornece três maneiras diferentes de controlar esse comportamento. Você pode optar por não especificar o atributo ou pode usar os valores `Strict` ou `Lax` para restringir o cookie a solicitações do mesmo site.
+
+Se você definir `SameSite` como `Strict`, seu cookie será enviado apenas num contexto primário. Do ponto de vista do usuário, o cookie só será enviado se o site do cookie corresponder ao site atualmente mostrado na barra de URL do navegador. Portanto, se o cookie `promo_shown` for definido da seguinte maneira:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+Quando o usuário estiver no seu site, o cookie será enviado junto com a solicitação como esperado. No entanto, ao seguir um link para o seu site, digamos de outro site ou através do e-mail de um amigo, nessa solicitação inicial o cookie não será enviado. Isto é bom quando você tem cookies relacionados à funcionalidade que sempre deve estar associada a uma navegação inicial, como a alteração de uma senha ou a realização de uma compra, mas é muito restritiva para `promo_shown`. Se o seu leitor seguir o link para o site, ele deseja que o cookie seja enviado para que sua preferência possa ser aplicada.
+
+É aí que entra `SameSite=Lax`, que permite que o cookie seja enviado com essas navegações de nível superior. Vamos revisitar o exemplo do artigo sobre gatos acima, onde outro site está referenciando seu conteúdo. Eles usam sua foto do gato diretamente e fornecem um link para o seu artigo original.
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+E o cookie foi definido como:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+Quando o leitor estiver no blog de outra pessoa, o cookie **não será enviado** quando o navegador solicitar o `amazing-cat.png`. No entanto, quando o leitor seguir o link para `cat.html` no seu blog, essa solicitação **incluirá** o cookie. Isto faz com que o valor `Lax` seja uma boa escolha para cookies que afetam a exibição do site. O valor `Strict` é útil para cookies relacionados às ações que seu usuário está realizando.
+
+{% Aside 'caution' %}
+
+Nem `Strict` nem `Lax` são uma solução completa para a segurança do seu site. Os cookies são enviados como parte da solicitação do usuário e você deve tratá-los da mesma forma que qualquer outra entrada do usuário. Isto significa higienizar e validar a entrada. Nunca use um cookie para armazenar dados que você considera segredo que deveria ficar do lado do servidor.
+
+{% endAside %}
+
+Por último, existe a opção de não especificar o valor. Anteriormente, esta era a forma de indicar implicitamente o desejo de que o cookie fosse enviado em todos os contextos. No último rascunho da [RFC6265bis,](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) isto foi explicitado pela introdução de um novo valor de `SameSite=None`. Isto significa que você pode usar `None` para comunicar claramente seu desejo intencional de que o cookie seja enviado num contexto de terceiros.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Três cookies rotulados como None, Lax ou Strict dependendo do contexto", width="800", height="456", style="max-width: 35vw" %}<figcaption> Marque explicitamente o contexto de um cookie como <code>None</code>, <code>Lax</code> ou <code>Strict</code></figcaption></figure>
+
+{% Aside %}
+
+Se você fornece um serviço que outros sites consomem, como widgets, conteúdo incorporado, programas de afiliados, publicidade ou login em vários sites, você deve usar `None` para garantir que sua intenção seja clara.
+
+{% endAside %}
+
+## Mudanças ao comportamento default sem SameSite
+
+Embora o `SameSite` seja amplamente suportado, infelizmente ele não tem sido amplamente adotado pelos desenvolvedores. O padrão default de envio de cookies para todos os lugares significa que todos os casos de uso funcionam, mas deixa o usuário vulnerável a CSRF e vazamento não intencional de informações. Para encorajar os desenvolvedores a declarar suas intenções e fornecer aos usuários uma experiência mais segura, a proposta da IETF, [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) apresenta duas mudanças principais:
+
+- Cookies sem um `SameSite` serão tratados como `SameSite=Lax`.
+- Cookies com `SameSite=None` também devem especificar `Secure`, o que significa que requerem um contexto seguro.
+
+O Chrome implementa esse comportamento default a partir da versão 84. O [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) suporta experimentalmente a partir do Firefox 69 e será comportamento default no futuro. Para testar esses comportamentos no Firefox, abra [`about:config`](http://kb.mozillazine.org/About:config) e ative `network.cookie.sameSite.laxByDefault`. O [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) também tem planos de mudar seus comportamentos padrão.
+
+{% Aside %}
+
+Este artigo será atualizado à medida que navegadores adicionais anunciarem suporte.
+
+{% endAside %}
+
+### `SameSite=Lax` por default
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+Se você enviar um cookie sem nenhum atributo `SameSite` especificado…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+O navegador tratará esse cookie como se `SameSite=Lax` tivesse sido especificado.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Embora a intenção seja aplicar um padrão mais seguro, o ideal é definir um `SameSite` explícito, em vez de depender do navegador para aplicá-lo para você. Isto deixa sua intenção para o cookie explícita e aumenta as chances de uma experiência consistente em todos os navegadores.
+
+{% Aside 'caution' %}
+
+O comportamento default aplicado pelo Chrome é ligeiramente mais permissivo do que um `SameSite=Lax` explícito, pois permitirá que certos cookies sejam enviados em solicitações POST de nível superior. Você pode ver exatamente com isto funciona no [anúncio blink-dev](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ). Isto foi proposto como uma mitigação temporária: você deve continuar a corrigir seus cookies cross-site para usar `SameSite=None; Secure`.
+
+{% endAside %}
+
+### `SameSite=None` precisa ser seguro
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+A configuração de um cookie sem `Secure` **será rejeitada**.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+Você deve garantir que `SameSite=None` seja emparelhado com o atributo `Secure`
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Você pode testar esse comportamento a partir do Chrome 76 ativando `about://flags/#cookies-without-same-site-must-be-secure` e no Firefox 69 em [`about:config`](http://kb.mozillazine.org/About:config) definindo `network.cookie.sameSite.noneRequiresSecure`.
+
+Você vai querer aplicar esse recurso ao definir novos cookies e atualizar ativamente os cookies existentes, mesmo que eles não estejam se aproximando da data de expiração.
+
+{% Aside 'note' %}
+
+Se você depende de qualquer serviço que forneça conteúdo de terceiros em seu site, verifique também com o provedor se ele está atualizando seus serviços. Poderá ser necessário atualizar suas dependências ou fragmentos de código para garantir que seu site adote o novo comportamento.
+
+{% endAside %}
+
+Ambas as alterações são compatíveis com os navegadores que implementaram corretamente a versão anterior do atributo `SameSite` ou simplesmente não o suportam. Ao aplicar essas alterações aos seus cookies, você torna explícito o uso pretendido, em vez de confiar no comportamento padrão do navegador. Da mesma forma, qualquer cliente que ainda não reconheça `SameSite=None` deve ignorá-lo e continuar como se o atributo não tivesse sido definido.
+
+{% Aside 'warning' %}
+
+Várias versões mais antigas de navegadores, incluindo Chrome, Safari e navegador UC, são incompatíveis com o novo atributo `None` e podem ignorar ou restringir o cookie. Esse comportamento é corrigido nas versões atuais, mas você deve verificar seu tráfego para saber qual a proporção de seus usuários que foram afetados. Você poderá ver a [lista de clientes incompatíveis conhecidos no site do Chromium](https://www.chromium.org/updates/same-site/incompatible-clients).
+
+{% endAside %}
+
+## Receitas de cookies `SameSite`
+
+Para mais detalhes sobre como atualizar seus cookies para lidar com essas mudanças de `SameSite=None` e as diferenças de comportamento em diferentes navegadores, acesse o artigo seguinte, [Receitas de cookies SameSite](/samesite-cookie-recipes).
+
+_Muito obrigado pelas contribuições e feedback de Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner e Vivek Sekhar_
+
+_Imagem do Cookie Hero por [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) no [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/pt/blog/stale-while-revalidate/index.md b/src/site/content/pt/blog/stale-while-revalidate/index.md
new file mode 100644
index 00000000000..4e27147d971
--- /dev/null
+++ b/src/site/content/pt/blog/stale-while-revalidate/index.md
@@ -0,0 +1,95 @@
+---
+title: Manter as coisas atualizadas com stale-while-revalidate
+subhead: Uma ferramenta adicional para ajudar você a equilibrar o imediatismo e a atualização ao veicular seu aplicativo da web.
+authors:
+  - jeffposnick
+date: 2019-07-18
+description: stale-while-revalidate ajuda os desenvolvedores a equilibrar o imediatismo   - carregar imediatamente o conteúdo em cache - e o frescor - garantir que as atualizações do conteúdo em cache sejam usadas no futuro.
+hero: image/admin/skgQgcT3q8fdBGGNL3o1.jpg
+alt: Uma fotografia de uma parede pintada pela metade.
+tags:
+  - blog
+feedback:
+  - api
+---
+
+## O que foi enviado?
+
+[`stale-while-revalidate`](https://tools.ietf.org/html/rfc5861#section-3) ajuda os desenvolvedores a equilibrar o imediatismo - *carregar o conteúdo em cache imediatamente* - e o frescor - *garantir que as atualizações do conteúdo em cache sejam usadas no futuro*. Se você mantém um serviço da web ou biblioteca de terceiros que atualiza em uma programação regular, ou se seus ativos originais tendem a ter uma vida útil curta, então `stale-while-revalidate` pode ser uma adição útil às suas políticas de cache existentes.
+
+O suporte para definir `stale-while-revalidate` junto com `max-age` em seu cabeçalho de resposta `Cache-Control` [está disponível no Chrome 75](https://chromestatus.com/feature/5050913014153216) e [Firefox 68](https://bugzilla.mozilla.org/show_bug.cgi?id=1536511).
+
+Navegadores que não suportam `stale-while-revalidate` irão ignorar silenciosamente esse valor de configuração e usar [`max-age`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#max-age), como explicarei em breve …
+
+## O que isso significa?
+
+Vamos dividir o `stale-while-revalidate` em duas partes: a ideia de que uma resposta em cache pode estar obsoleta e o processo de revalidação.
+
+Primeiro, como o navegador sabe se uma resposta em cache está "obsoleta"? Um cabeçalho de resposta [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) que contém `stale-while-revalidate` também deve conter `max-age`, e o número de segundos especificado por meio de `max-age` é o que determina a obsolescência. Qualquer resposta em cache mais recente que `max-age` é considerada nova e as respostas em cache mais antigas são obsoletas.
+
+Se a resposta armazenada localmente em cache ainda estiver atualizada, ela poderá ser usada no estado em que se encontra para atender à solicitação de um navegador. Do ponto de vista de `stale-while-revalidate`, não há nada a fazer neste cenário.
+
+Mas se a resposta em cache estiver desatualizada, é executada outra verificação com base na idade: a idade da resposta em cache dentro da janela de tempo é coberta pela configuração `stale-while-revalidate`
+
+Se a idade de uma resposta desatualizada cair nessa janela, ela será usada para atender à solicitação do navegador. Ao mesmo tempo, uma solicitação de "revalidação" será feita contra a rede de uma forma que não atrase o uso da resposta em cache. A resposta retornada pode conter as mesmas informações que a resposta armazenada em cache anteriormente ou pode ser diferente. De qualquer maneira, a resposta da rede é armazenada localmente, substituindo tudo o que estava em cache anteriormente e redefinindo o temporizador de "atualização" usado durante todas as comparações `max-age`
+
+No entanto, se a resposta em cache desatualizada for antiga o suficiente para ficar fora da `stale-while-revalidate`, ela não atenderá à solicitação do navegador. Em vez disso, o navegador recuperará uma resposta da rede e a usará para atender à solicitação inicial e também preencher o cache local com uma nova resposta.
+
+## Exemplo ao Vivo
+
+Abaixo está um exemplo simples de uma API HTTP para retornar a hora atual, mais especificamente, o número atual de minutos após a hora.
+
+{% Glitch { id: 's-w-r-demo', path: 'server.js:20:15', height: 346 } %}
+
+Nesse cenário, o servidor da web usa este `Cache-Control` em sua resposta HTTP:
+
+```text
+Cache-Control: max-age=1, stale-while-revalidate=59
+```
+
+Essa configuração significa que, se uma solicitação para o tempo for repetida no próximo segundo, o valor previamente armazenado em cache ainda será atualizado e usado como está, sem qualquer revalidação.
+
+Se uma solicitação for repetida entre 1 e 60 segundos depois, o valor em cache ficará obsoleto, mas será usado para atender à solicitação da API. Ao mesmo tempo, "em segundo plano", uma solicitação de revalidação será feita para preencher o cache com um valor novo para uso futuro.
+
+Se uma solicitação for repetida após mais de 60 segundos, a resposta desatualizada não será usada, e atender à solicitação do navegador e a revalidação do cache dependerá da obtenção de uma resposta da rede.
+
+Aqui está uma análise desses três estados distintos, juntamente com a janela de tempo em que cada um deles se aplica ao nosso exemplo:
+
+{% Img src="image/admin/C8lg2FSEqhTKR6WmYky3.svg", alt="Um diagrama ilustrando as informações da seção anterior.", width="719", height="370" %}
+
+## Quais são os casos de uso comuns?
+
+Embora o exemplo acima para um serviço de API "minutos após a hora" seja inventado, ele ilustra o caso de uso esperado: serviços que fornecem informações que precisam ser atualizadas, mas onde algum grau de desatualização é aceitável.
+
+Exemplos menos planejados podem ser uma API para as condições meteorológicas atuais ou as principais manchetes que foram escritas na última hora.
+
+Geralmente, qualquer resposta que seja atualizada em um intervalo conhecido, provavelmente será solicitada várias vezes e seja estática dentro desse intervalo, é uma boa candidata para armazenamento em cache de curto prazo via `max-age`. Usar `stale-while-revalidate` além de `max-age` aumenta a probabilidade de que solicitações futuras possam ser atendidas do cache com conteúdo mais recente, sem bloquear uma resposta da rede.
+
+## Como ele interage com os service workers?
+
+Se você já ouviu falar de `stale-while-revalidate`, é provável que tenha ocorrido no contexto de [receitas](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate) usadas por um [prestador de serviço](/service-workers-cache-storage/) .
+
+O uso de stale-while-revalidate por meio de um `Cache-Control` compartilha algumas semelhanças com seu uso em um service worker, e muitas das mesmas considerações em torno de compensações de atualização e tempos de vida máximos se aplicam. No entanto, existem algumas considerações que você deve levar em consideração ao decidir se deve implementar uma abordagem baseada no service worker ou apenas contar com a configuração do cabeçalho `Cache-Control`
+
+### Use uma abordagem baseada em service worker se
+
+- Você já estiver usando um service worker em seu aplicativo da web.
+- Você precisar de controle refinado sobre o conteúdo de seus caches e deseja implementar algo como uma política de expiração usada pelo menos recentemente. [O módulo de expiração de cache](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/) do Workbox pode ajudar com isso.
+- Você desejar ser notificado quando uma resposta desatualizada muda em segundo plano durante a etapa de revalidação. [O módulo Broadcast Cache Update](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/) da Workbox pode ajudar com isso.
+- Você precisa desse `stale-while-revalidate` em todos os navegadores modernos.
+
+### Use uma abordagem de controle de cache se
+
+- Você preferir não lidar com a sobrecarga de implantação e manutenção de um service worker para seu aplicativo da web.
+- Não houver problema em permitir que o gerenciamento automático de cache do navegador impeça que seus caches locais fiquem muito grandes.
+- Você estiver satisfeito com uma abordagem que atualmente não é compatível com todos os navegadores modernos (desde julho de 2019; o suporte pode crescer no futuro).
+
+Se você estiver usando um service worker e também tiver `stale-while-revalidate` habilitado para algumas respostas por meio de um `Cache-Control` , então o service worker terá, em geral, o "primeiro crack" ao responder a uma solicitação. Se o service worker decidir não responder ou se, no processo de geração de uma resposta, fizer uma solicitação de rede usando [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API), o comportamento configurado por meio do `Cache-Control` entrará em vigor.
+
+## Saber mais
+
+- [resposta `stale-while-revalidate`](https://fetch.spec.whatwg.org/#concept-stale-while-revalidate-response) na especificação da API Fetch.
+- [RFC 5861](https://tools.ietf.org/html/rfc5861), abordando a especificação `stale-while-revalidate`
+- [O cache HTTP: sua primeira linha de defesa](/http-cache/) do guia "Confiabilidade da rede" deste site.
+
+*Imagem do herói por Samuel Zeller.*
diff --git a/src/site/content/pt/blog/storage-for-the-web/index.md b/src/site/content/pt/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..fffe6089833
--- /dev/null
+++ b/src/site/content/pt/blog/storage-for-the-web/index.md
@@ -0,0 +1,162 @@
+---
+title: Armazenamento para a web
+subhead: Existem muitas opções diferentes para armazenar dados no navegador. Qual é o melhor para suas necessidades?
+authors:
+  - petelepage
+description: Existem muitas opções diferentes para armazenar dados no navegador. Qual delas é a melhor para suas necessidades?
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: Pilha de contêineres
+feedback:
+  - api
+---
+
+As conexões com a Internet podem ser instáveis ou inexistentes em trânsito, e é por isso que o suporte offline e o desempenho confiável são recursos comuns em [aplicativos da web progressivos](/progressive-web-apps/). Mesmo em ambientes sem fio perfeitos, o uso criterioso de cache e outras técnicas de armazenamento pode melhorar substancialmente a experiência do usuário. Existem várias maneiras de armazenar em cache os recursos do aplicativo estático (HTML, JavaScript, CSS, imagens, etc.) e dados (dados do usuário, artigos de notícias, etc.). Mas qual é a melhor solução? Quanto você pode armazenar? Como evitar que ele seja despejado?
+
+## O que devo usar? {: #recommendation }
+
+Aqui está uma recomendação geral para armazenar recursos:
+
+- Para os recursos de rede necessários para carregar seu aplicativo e conteúdo baseado em arquivo, use a [**API Cache Storage**](/cache-api-quick-guide/) (parte dos [service workers](https://developer.chrome.com/docs/workbox/service-worker-overview/) ).
+- Para outros dados, use [**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) (com um [wrapper de promises](https://www.npmjs.com/package/idb) ).
+
+IndexedDB e a API Cache Storage são suportados em todos os navegadores modernos. Ambos são assíncronos e não bloquearão o thread principal. Eles são acessíveis a partir do objeto `window`, web workers e service workers, tornando mais fácil usá-los em qualquer lugar em seu código.
+
+## E quanto a outros mecanismos de armazenamento? {: #other }
+
+Existem vários outros mecanismos de armazenamento disponíveis no navegador, mas eles têm uso limitado e podem causar problemas de desempenho significativos.
+
+[SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) é específico da guia e tem como escopo o tempo de vida da guia. Pode ser útil para armazenar pequenas quantidades de informações específicas da sessão, por exemplo, uma chave IndexedDB. Deve ser usado com cuidado porque é síncrono e bloqueará o thread principal. É limitado a cerca de 5 MB e pode conter apenas strings. Por ser específico da guia, não pode ser acessado por web workers ou service workers.
+
+[LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) deve ser evitado porque é síncrono e bloqueará o thread principal. É limitado a cerca de 5 MB e pode conter apenas strings. LocalStorage não pode ser acessado por web workers ou service workers.
+
+[Os cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) têm seus usos, mas não devem ser usados para armazenamento. Os cookies são enviados com cada solicitação HTTP, portanto, o armazenamento de qualquer coisa além de uma pequena quantidade de dados aumentará significativamente o tamanho de cada solicitação da web. Eles são síncronos e não podem ser acessados por web workers. Como LocalStorage e SessionStorage, os cookies são limitados a apenas strings.
+
+Um [API File System](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction) e a API FileWriter fornecem métodos para ler e gravar arquivos em um sistema de arquivos em área restrita. Embora seja assíncrono, não é recomendado porque está [disponível apenas em navegadores baseados em Chromium](https://caniuse.com/#feat=filesystem) .
+
+A [API File System Access](/file-system-access/) foi projetada para tornar mais fácil para os usuários ler e editar arquivos em seu sistema de arquivos local. O usuário deve conceder permissão antes que uma página possa ler ou gravar em qualquer arquivo local, e as permissões não são mantidas entre sessões.
+
+WebSQL **não** deve ser usado e o uso existente deve ser migrado para IndexedDB. O suporte [foi removido](https://caniuse.com/#feat=sql-storage) de quase todos os principais navegadores. O W3C [parou de manter a especificação Web SQL](https://www.w3.org/TR/webdatabase/) em 2010, sem planos de novas atualizações planejadas.
+
+O cache do aplicativo **não** deve ser usado e o uso existente deve ser migrado para service workers e API do cache. Ele foi [descontinuado](https://developer.mozilla.org/docs/Web/API/Window/applicationCache) e o suporte será removido dos navegadores no futuro.
+
+## Quanto posso armazenar? {: #how-much }
+
+Resumindo, **muito**, pelo menos algumas centenas de megabytes e potencialmente centenas de gigabytes ou mais. As implementações do navegador variam, mas a quantidade de armazenamento disponível geralmente se baseia na quantidade de armazenamento disponível no dispositivo.
+
+- O Chrome permite que o navegador use até 80% do espaço total em disco. Uma origem pode usar até 60% do espaço total em disco. Você pode usar a [API StorageManager](#check) para determinar a cota máxima disponível. Outros navegadores baseados em Chromium podem permitir que o navegador use mais armazenamento. Consulte [PR # 3896](https://github.com/GoogleChrome/web.dev/pull/3896) para obter detalhes sobre a implementação do Chrome.
+- O Internet Explorer 10 e posterior pode armazenar até 250 MB e avisará o usuário quando mais de 10 MB forem usados.
+- O Firefox permite que o navegador use até 50% do espaço livre em disco. Um [grupo eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix) (por exemplo, `example.com`, `www.example.com` e `foo.bar.example.com`) [pode usar até 2 GB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits) . Você pode usar a [API StorageManager](#check-available) para determinar quanto espaço ainda está disponível.
+- O Safari (desktop e celular) parece permitir cerca de 1 GB. Quando o limite é atingido, o Safari pergunta ao usuário, aumentando o limite em incrementos de 200 MB. Não consegui encontrar nenhuma documentação oficial a respeito.
+    - Se um PWA for adicionado à tela inicial no Safari móvel, ele parecerá criar um novo contêiner de armazenamento e nada será compartilhado entre o PWA e o Safari móvel. Depois que a cota for atingida para um PWA instalado, não parece haver nenhuma maneira de solicitar armazenamento adicional.
+
+No passado, se um site excedesse um certo limite de dados armazenados, o navegador pedia ao usuário para conceder permissão para usar mais dados. Por exemplo, se a origem usou mais de 50 MB, o navegador solicitará ao usuário que permita o armazenamento de até 100 MB e, em seguida, solicitará novamente em incrementos de 50 MB.
+
+Hoje, a maioria dos navegadores modernos não solicitará ao usuário e permitirá que um site use até sua cota atribuída. A exceção parece ser o Safari, que solicita a 750 MB, pedindo permissão para armazenar até 1,1 GB. Se uma origem tentar usar mais do que sua cota atribuída, outras tentativas de gravar dados falharão.
+
+## Como posso verificar a quantidade de armazenamento disponível? {: #check }
+
+Em [muitos navegadores](https://caniuse.com/#feat=mdn-api_storagemanager) , você pode usar a [API StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) para determinar a quantidade de armazenamento disponível para a origem e quanto armazenamento está usando. Ele relata o número total de bytes usados por IndexedDB e a API do Cache e torna possível calcular o espaço de armazenamento restante aproximado disponível.
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Número de bytes usados.
+  // quota.quota -> Número máximo de bytes disponível.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`Você usou ${percentageUsed}% do armazenamento disponível.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`Você pode gravar até ${remaining} bytes mais.`);
+}
+```
+
+O StorageManager ainda não foi [implementado](https://caniuse.com/#feat=mdn-api_storagemanager) em todos os navegadores, portanto, você deve detectar o recurso antes de usá-lo. Mesmo quando estiver disponível, você ainda deve detectar erros de excesso de cota (veja abaixo). Em alguns casos, é possível que a cota disponível exceda a quantidade real de armazenamento disponível.
+
+{% Aside %} Outros navegadores baseados em Chromium podem levar em consideração a quantidade de espaço livre ao relatar a cota disponível. O Chrome não informa e sempre relatará 60% do tamanho real do disco. Isso ajuda a reduzir a capacidade de determinar o tamanho dos recursos de origem cruzada armazenados. {% endAside %}
+
+### Inspecionar
+
+Durante o desenvolvimento, você pode usar DevTools do navegador para inspecionar os diferentes tipos de armazenamento e limpar facilmente todos os dados armazenados.
+
+Um novo recurso foi adicionado ao Chrome 88 que permite substituir a cota de armazenamento do site no painel de armazenamento. Este recurso oferece a capacidade de simular diferentes dispositivos e testar o comportamento de seus aplicativos em cenários de baixa disponibilidade de disco. Acesse **Aplicativo** e **, em seguida, Armazenamento**, marque a **caixa de seleção Simular cota de armazenamento customizada** e insira qualquer número válido para simular a cota de armazenamento.
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt = "Painel Armazenamento do DevTools.", width="800", height="567"%}
+
+Enquanto trabalhava neste artigo, escrevi uma [ferramenta simples](https://storage-quota.glitch.me/) para tentar usar rapidamente o máximo de armazenamento possível. É uma maneira rápida e fácil de experimentar diferentes mecanismos de armazenamento e ver o que acontece quando você usa toda a sua cota.
+
+## Como lidar se ultrapassar a cota? {: #over-quota }
+
+O que você deve fazer quando ultrapassar a cota? Mais importante ainda, você deve sempre detectar e tratar erros de gravação, seja um `QuotaExceededError` ou algum outro. Logo, dependendo do design do seu aplicativo, decida como lidar com isso. Por exemplo, exclua o conteúdo que não é acessado há muito tempo, remova os dados com base no tamanho ou forneça uma maneira para os usuários escolherem o que desejam excluir.
+
+Tanto o IndexedDB quanto a API do Cache lançam um `DOMError` chamado `QuotaExceededError` quando você excede a cota disponível.
+
+### IndexedDB
+
+Se a origem tiver excedido sua cota, as tentativas de gravação em IndexedDB falharão. `onabort()` da transação será chamado, passando um evento. O evento incluirá uma `DOMException` na propriedade de erro. Verificar o `name` do erro retornará `QuotaExceededError`.
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // O código de fallback/alternativa vai aqui
+  }
+};
+```
+
+### API de cache
+
+Se a origem excedeu sua cota, as tentativas de gravar na API do Cache serão rejeitadas com uma `QuotaExceededError` `DOMException` .
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // O código de fallback/alternativa vai aqui
+  }
+}
+```
+
+## Como funciona o despejo? {: #eviction }
+
+O armazenamento da Web é categorizado em dois grupos, "Melhor esforço" e "Persistente". Melhor esforço significa que o armazenamento pode ser limpo pelo navegador sem interromper o usuário, mas é menos durável para dados críticos ou de longo prazo. O armazenamento persistente não é apagado automaticamente quando o armazenamento está baixo. O usuário precisa limpar manualmente esse armazenamento (por meio das configurações do navegador).
+
+Por padrão, os dados de um site (incluindo IndexedDB, Cache API, etc) se enquadram na categoria de melhor esforço, o que significa que, a menos que um site tenha [solicitado armazenamento persistente](/persistent-storage/) , o navegador pode despejar os dados do site a seu critério, por exemplo, quando o armazenamento do dispositivo estiver baixo .
+
+A política de despejo para o melhor esforço é:
+
+- Os navegadores baseados em Chromium começarão a despejar dados quando o navegador ficar sem espaço, limpando todos os dados do site da origem menos usada recentemente primeiro, depois a próxima, até que o navegador não ultrapasse o limite.
+- O Internet Explorer 10+ não despejará dados, mas impedirá que a origem grave mais.
+- O Firefox começará a despejar dados quando o espaço em disco disponível for preenchido, limpando todos os dados do site da origem menos usada recentemente primeiro, depois a próxima, até que o navegador não ultrapasse o limite.
+- Anteriormente, o Safari não despejava dados, mas recentemente implementou um novo limite de sete dias em todo o armazenamento gravável (veja abaixo).
+
+A partir do iOS e iPadOS 13.4 e Safari 13.1 no macOS, há um limite de sete dias em todo o armazenamento gravável de script, incluindo IndexedDB, registro de service worker e API de cache. Isso significa que o Safari irá remover todo o conteúdo do cache após sete dias de uso do Safari, se o usuário não interagir com o site. Esta política de despejo **não se aplica a PWAs instalados** que foram adicionados à tela inicial. Consulte [Bloqueio completo de cookies de terceiros e muito mais](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) no blog do WebKit para obter os detalhes completos.
+
+{% Aside %} Você pode solicitar [armazenamento persistente](/persistent-storage/) para seu site para proteger usuários críticos ou dados de aplicativos. {% endAside %}
+
+## Bônus: Por que usar um wrapper para IndexedDB
+
+IndexedDB é uma API de baixo nível que requer configuração significativa antes do uso, o que pode ser particularmente difícil para armazenar dados simples. Ao contrário da maioria das APIs  modernas baseadas em promises, ela é baseada em eventos. Wrappers de promises como [idb](https://www.npmjs.com/package/idb) para IndexedDB ocultam alguns dos recursos poderosos, mas, o que é mais importante, ocultam o maquinário complexo (por exemplo, transações, controle de versão de esquema) que vem com a biblioteca IndexedDB.
+
+## Conclusão
+
+Já se foi o tempo de armazenamento limitado e de solicitação ao usuário para armazenar cada vez mais dados. Os sites podem armazenar com eficácia todos os recursos e dados de que precisam para funcionar. Usando a [API StorageManager,](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) você pode determinar quanto está disponível para você e quanto você usou. E com o [armazenamento persistente](/persistent-storage/) , a menos que o usuário o remova, você pode protegê-lo contra despejo.
+
+### Recursos adicionais
+
+- [Melhores práticas de IndexedDB](/indexeddb-best-practices/)
+- [Conceitos de cota e armazenamento da Web do Chrome](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### Obrigado
+
+Agradecimentos especiais a Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink e Victor Costan pela revisão deste artigo. Agradecimentos a Eiji Kitamura, Addy Osmani e Marc Cohen que escreveram os artigos originais nos quais este artigo se baseia. Eiji escreveu uma ferramenta útil chamada [Browser Storage Abuser](http://demo.agektmr.com/storage/) que foi útil para validar o comportamento atual. Ele permite que você armazene o máximo de dados possível e veja os limites de armazenamento em seu navegador. Obrigado a François Beaufort, que investigou o Safari para descobrir seus limites de armazenamento.
+
+A imagem do herói é de Guillaume Bolduc no [Unsplash](https://unsplash.com/photos/uBe2mknURG4).
diff --git a/src/site/content/pt/blog/streams/index.md b/src/site/content/pt/blog/streams/index.md
new file mode 100644
index 00000000000..a17d588797d
--- /dev/null
+++ b/src/site/content/pt/blog/streams/index.md
@@ -0,0 +1,813 @@
+---
+title: Fluxos   - o guia definitivo
+subhead: Aprenda a usar fluxos legíveis, graváveis e de transformação com a API Streams.
+description: |2
+
+  A API Streams permite que o JavaScript acesse programaticamente fluxos de dados recebidos no
+
+  rede e processá-los conforme desejado.
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2021-02-25
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: Um riacho na floresta com folhas coloridas caídas.
+tags:
+  - blog
+  - capabilities
+---
+
+A API Streams permite que você acesse programaticamente fluxos de dados recebidos pela rede ou criados por qualquer meio localmente e processe-os com JavaScript. O streaming envolve a divisão de um recurso que você deseja receber, enviar ou transformar em pequenos blocos e, em seguida, seu processamento gradual. Embora streaming seja algo que os navegadores fazem de qualquer maneira ao receber ativos como HTML ou vídeos para serem exibidos em páginas da web, esse recurso nunca esteve disponível para JavaScript antes do `fetch` com fluxos ser introduzido em 2015.
+
+{% Aside %} O streaming era tecnicamente possível com `XMLHttpRequest`, mas [não era bonito](https://gist.github.com/igrigorik/5736866). {% endAside %}
+
+Anteriormente, se quisesse processar um recurso de algum tipo (seja um vídeo ou um arquivo de texto, etc.), você teria que baixar o arquivo inteiro, esperar que ele fosse desserializado em um formato adequado e, em seguida, processá-lo. Com os streams disponíveis para JavaScript, tudo isso muda. Agora você pode processar dados brutos com JavaScript progressivamente assim que estiverem disponíveis no cliente, sem a necessidade de gerar um buffer, string ou blob. Isso possibilita uma série de casos de uso, confira alguns abaixo:
+
+- **Efeitos de vídeo:** canalizar um fluxo de vídeo legível por meio de um fluxo de transformação que aplica efeitos em tempo real.
+- **(Des)compactação de dados:** canalizar um fluxo de arquivos por meio de um fluxo de transformação que o (des)compacta seletivamente.
+- **Decodificação de imagem:** canalizar um fluxo de resposta HTTP por meio de um fluxo de transformação que decodifica bytes e os transforma em dados de bitmap e, em seguida, por meio de outro fluxo de transformação que traduz bitmaps em PNGs. Se instalado dentro do `fetch` de um trabalho de serviço, isso permite que você faça um polyfill transparente de novos formatos de imagem, como AVIF.
+
+## Conceitos centrais
+
+Antes de entrar em detalhes sobre os vários tipos de fluxo, vou apresentar alguns conceitos básicos.
+
+### Pedaços
+
+Um bloco é um **único dado** que é gravado ou lido de um fluxo. Pode ser de qualquer tipo. Os fluxos podem até conter pedaços de diferentes tipos. Na maioria das vezes, um bloco não será a unidade de dados mais atômica para um determinado fluxo. Por exemplo, um fluxo de bytes pode conter blocos consistindo em `Uint8Array` de 16 KiB em vez de bytes únicos.
+
+### Fluxos legíveis
+
+Um fluxo legível representa uma fonte de dados da qual você pode ler. Em outras palavras, os dados **vêm** de um fluxo legível. Concretamente, um fluxo legível é uma instância da classe `ReadableStream`.
+
+### Streams graváveis
+
+Um fluxo gravável representa um destino para dados nos quais você pode gravar. Em outras palavras, os dados **vão** para um fluxo gravável. Concretamente, um fluxo gravável é uma instância da classe `WritableStream`.
+
+### Transformar fluxos
+
+Um stream de transformação consiste em um **par de streams**: um stream gravável, conhecido como seu lado gravável, e um stream legível, conhecido como seu lado legível. Uma metáfora do mundo real para isso seria um [intérprete simultâneo](https://en.wikipedia.org/wiki/Simultaneous_interpretation), que traduz de um idioma para outro instantaneamente. De uma maneira específica para o fluxo de transformação, a gravação no lado gravável resulta em novos dados sendo disponibilizados para leitura no lado legível. Concretamente, qualquer objeto com uma propriedade `writable` e uma propriedade `readable` pode servir como um fluxo de transformação. No entanto, a classe `TransformStream` padrão torna mais fácil criar esse par que está devidamente envolvido.
+
+### Cadeia de tubos
+
+Os fluxos são usados principalmente para **canalizá-los** uns para os outros. Um fluxo legível pode ser canalizado diretamente para um fluxo gravável, usando o método `pipeTo()` do fluxo legível, ou pode ser canalizado por meio de um ou mais fluxos de transformação primeiro, usando o método `pipeThrough()`. Um **conjunto de fluxos canalizados** dessa forma é conhecido como uma cadeia de tubos.
+
+### Contrapressão
+
+Uma vez que uma cadeia de tubos é construída, ela propagará sinais sobre quão rápido os pedaços devem fluir por ela. Se alguma etapa na cadeia ainda não puder aceitar os pedaços, ela propaga um sinal de volta através da cadeia de tubos, até que a fonte original seja instruída a parar de produzir pedaços tão rápido. Este processo de **normalização do fluxo** é denominado contrapressão.
+
+### Divisão em T
+
+Um fluxo legível pode ser lido (nomeado após a forma de um "T" maiúsculo) usando seu método `tee()`. Isso **bloqueará** o fluxo, ou seja, não o tornará mais diretamente utilizável. No entanto, ele criará **dois novos fluxos**, chamados ramificações, que podem ser consumidos independentemente. Teeing também é importante porque os fluxos não podem ser retrocedidos ou reiniciados. Veremos mais sobre isso mais tarde.
+
+<figure><comment data-md-type="comment"></comment>{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="Diagrama de uma cadeia de tubos, que consiste em um fluxo legível proveniente de uma chamada para a API fetch, sendo canalizado por meio de um fluxo de transformação com saída dividida em T e depois enviado ao navegador, para o primeiro fluxo legível resultante, e ao cache do trabalho de serviço, para o segundo fluxo legível resultante.", width="800", height="430" %}<figcaption>. Uma cadeia de tubos.</figcaption></figure>
+
+## A mecânica de um fluxo legível
+
+Um fluxo legível é uma fonte de dados representada em JavaScript por um objeto [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) que flui de uma fonte subjacente. O construtor [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) cria e retorna um objeto de fluxo legível dos manipuladores fornecidos. Existem dois tipos de fonte subjacente:
+
+- **As fontes** push enviam constantemente ao acessá-las e dependem de você iniciar, pausar ou cancelar o acesso ao fluxo. Os exemplos incluem fluxos de vídeo ao vivo, eventos enviados pelo servidor ou WebSockets.
+- **As fontes pull** exigem que você solicite explicitamente os dados delas ao se conectar. Os exemplos incluem operações HTTP por meio de chamadas `fetch()` ou `XMLHttpRequest`.
+
+Os dados de fluxo são lidos sequencialmente em pequenos pedaços chamados **blocos** . Diz-se que os pedaços colocados em um riacho estão **enfileirados**. Isso significa que eles estão esperando em uma fila para serem lidos. Uma **fila interna** controla os pedaços que ainda não foram lidos.
+
+Uma **estratégia de enfileiramento** é um objeto que determina como um fluxo deve sinalizar contrapressão com base no estado de sua fila interna. A estratégia de enfileiramento atribui um tamanho a cada pedaço e compara o tamanho total de todos os pedaços na fila a um número especificado, conhecido como **limite superior**.
+
+Os pedaços dentro do fluxo são lidos por um **leitor** . Este leitor recupera os dados um pedaço de cada vez, permitindo que você faça qualquer tipo de operação que desejar. O leitor mais o outro código de processamento que o acompanha é chamado de **consumidor**.
+
+O próximo constructo neste contexto é chamado de **controlador**. Cada fluxo legível tem um controlador associado que, como o nome sugere, permite que você controle o fluxo.
+
+Apenas um leitor pode ler um fluxo de cada vez. Quando um leitor é criado e começa a ler um fluxo (ou seja, torna-se um **leitor ativo**), o fluxo é **bloqueado** para ele. Se quiser um outro leitor para continuar a ler o seu fluxo, normalmente você precisa **liberar** o primeiro leitor antes de fazer qualquer outra coisa (embora você possa dividir os fluxos em **T**).
+
+### Criação de um fluxo legível
+
+Você cria um fluxo legível chamando seu construtor [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream). O construtor tem um argumento opcional `underlyingSource`, que representa um objeto com métodos e propriedades que definem como a instância de fluxo construída se comportará.
+
+#### O `underlyingSource`
+
+Esse argumento pode usar os seguintes métodos opcionais definidos pelo desenvolvedor:
+
+- `start(controller)`: chamado imediatamente quando o objeto é construído. O método pode acessar a fonte do fluxo e fazer qualquer outra coisa necessária para configurar a funcionalidade do fluxo. Se esse processo for feito de forma assíncrona, o método pode retornar uma promessa de sinalizar sucesso ou falha. O parâmetro `controller` passado para este método é um [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController).
+- `pull(controller)`: pode ser usado para controlar o fluxo conforme mais pedaços são buscados. Ele é chamado repetidamente, desde que a fila interna de pedaços do fluxo não esteja cheia, até que a fila alcance seu limite superior. Se o resultado de chamar `pull()` for uma promessa, `pull()` não será chamado novamente até que a promessa seja cumprida. Se a promessa for rejeitada, o fluxo se tornará um erro.
+- `cancel(reason)`: chamado quando o consumidor do fluxo o cancela.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+O `ReadableStreamDefaultController` oferece suporte aos seguintes métodos:
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close) fecha o fluxo associado.
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue) enfileira um determinado pedaço no fluxo associado.
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error) causa erro em qualquer interação futura com o fluxo associado.
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('The first chunk!');
+},
+/* … */
+```
+
+#### O `queuingStrategy`
+
+O segundo argumento, também opcional, do construtor `ReadableStream()` `queuingStrategy`. É um objeto que opcionalmente define uma estratégia de enfileiramento para o fluxo, que leva dois parâmetros:
+
+- `highWaterMark`: um número não negativo que indica a marca d'água alta do fluxo usando esta estratégia de enfileiramento.
+- `size(chunk)`: uma função que calcula e retorna o tamanho não negativo finito do valor do pedaço fornecido. O resultado é usado para determinar a contrapressão, manifestando-se por meio da propriedade `ReadableStreamDefaultController.desiredSize` Ele também controla quando o método `pull()` da origem subjacente é chamado.
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} Você pode definir seu próprio `queuingStrategy` personalizado ou usar uma instância de [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) ou [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) para o valor deste objeto. Se nenhuma `queuingStrategy` for fornecida, o padrão usado é o mesmo que `CountQueuingStrategy` com `highWaterMark` de `1`. {% endAside %}
+
+#### Os métodos `getReader()` e `read()`
+
+Para ler de um fluxo legível, você precisa de um leitor, que será um [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader) . O método `getReader()` do `ReadableStream` cria um leitor e bloqueia o fluxo nele. Enquanto o fluxo está bloqueado, nenhum outro leitor pode ser adquirido até que seja liberado.
+
+O método [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read) da interface `ReadableStreamDefaultReader` retorna uma promessa de acesso ao próximo bloco na fila interna do fluxo. Ele atende ou rejeita um resultado dependendo do estado do fluxo. As diferentes possibilidades são as seguintes:
+
+- Se um pedaço estiver disponível, a promessa será cumprida com um objeto do formulário<br> `{ value: chunk, done: false }`.
+- Se o fluxo for fechado, a promessa será cumprida com um objeto do formulário<br> `{ value: undefined, done: true }`.
+- Se o stream apresentar um erro, a promessa será rejeitada com o erro relevante.
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('The stream is done.');
+    break;
+  }
+  console.log('Just read a chunk:', value);
+}
+```
+
+#### A propriedade `locked`
+
+Você pode verificar se um fluxo legível está bloqueado acessando sua propriedade [`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked).
+
+```js
+const locked = readableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Amostras de código de fluxo legível
+
+O exemplo de código abaixo mostra todas as etapas em ação. Primeiro, você cria um `ReadableStream` que em seu `underlyingSource` (ou seja, a classe `TimestampSource`) define um método `start()`. Este método diz ao `controller` do fluxo para `enqueue()` um timestamp a cada segundo, durante dez segundos. Finalmente, ele diz ao controlador para `close()` o fluxo. Você consome esse fluxo criando um leitor por meio do método `getReader()` e chamando `read()` até que o fluxo seja `done`.
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // Add the string to the stream.
+      controller.enqueue(string);
+      console.log(`Enqueued ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // Close the stream after 10s.
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // This is called if the reader cancels.
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // The `read()` method returns a promise that
+    // resolves when a value has been received.
+    const { done, value } = await reader.read();
+    // Result objects contain two properties:
+    // `done`  - `true` if the stream has already given you all its data.
+    // `value` - Some data. Always `undefined` when `done` is `true`.
+    if (done) return result;
+    result += value;
+    console.log(`Read ${result.length} characters so far`);
+    console.log(`Most recently read chunk: ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('Stream complete', result));
+```
+
+### Iteração assíncrona
+
+Verificar em cada iteração de loop `read()` se o fluxo está `done` pode não ser a API mais conveniente. Felizmente, em breve haverá uma maneira melhor de fazer isso: iteração assíncrona.
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %} A iteração assíncrona ainda não foi implementada em nenhum navegador. {% endAside %}
+
+Uma solução alternativa para usar a iteração assíncrona hoje é implementar o comportamento com uma função auxiliar. Isso permite que você use o recurso em seu código, conforme mostrado no snippet abaixo.
+
+```js
+function streamAsyncIterator(stream) {
+  // Get a lock on the stream:
+  const reader = stream.getReader();
+
+  return {
+    next() {
+      // Stream reads already resolve with {done, value}, so
+      // we can just call read:
+      return reader.read();
+    },
+    return() {
+      // Release the lock if the iterator terminates.
+      reader.releaseLock();
+      return {};
+    },
+    // for-await calls this on whatever it's passed, so
+    // iterators tend to return themselves.
+    [Symbol.asyncIterator]() {
+      return this;
+    },
+  };
+}
+
+async function example() {
+  const response = await fetch(url);
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    console.log(chunk);
+  }
+}
+```
+
+### Divisão em T de um fluxo legível
+
+O método [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) da interface  `ReadableStream` mostra o fluxo legível atual, retornando uma matriz de dois elementos contendo as duas ramificações resultantes como novas instâncias `ReadableStream`. Isso permite que dois leitores leiam um fluxo simultaneamente. Você pode fazer isso, por exemplo, em um trabalho de serviço se quiser buscar uma resposta do servidor e transmiti-la para o navegador, mas também transmiti-la para o cache do trabalho de serviço. Como um corpo de resposta não pode ser consumido mais de uma vez, você precisa de duas cópias para fazer isso. Para cancelar o fluxo, você precisa cancelar as duas ramificações resultantes. Dividir um fluxo em T geralmente irá bloqueá-lo por toda a duração, evitando que outros leitores o bloqueiem.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called `read()` when the controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+// Create two `ReadableStream`s.
+const [streamA, streamB] = readableStream.tee();
+
+// Read streamA iteratively one by one. Typically, you
+// would not do it this way, but you certainly can.
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// Read streamB in a loop. This is the more common way
+// to read data from the stream.
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## Fluxos de bytes legíveis
+
+Para fluxos que representam bytes, uma versão estendida do fluxo legível é fornecida para manipular bytes com eficiência, em particular, minimizando cópias. Os fluxos de bytes permitem a aquisição de leitores traga seu próprio buffer (BYOB). A implementação padrão pode fornecer uma variedade de saídas diferentes, como strings ou buffers de array no caso de WebSockets, enquanto os fluxos de bytes garantem a saída de bytes. Além disso, os leitores BYOB têm benefícios de estabilidade. Isso ocorre porque, se um buffer for desconectado, ele pode garantir que não se grave no mesmo buffer duas vezes, evitando, portanto, condições de corrida. Os leitores BYOB podem reduzir o número de vezes que o navegador precisa executar a coleta de lixo, porque ele pode reutilizar buffers.
+
+### Criação de um fluxo de bytes legível
+
+Você pode criar um fluxo de bytes legível passando um parâmetro `type` adicional para o construtor `ReadableStream()`.
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### O `underlyingSource`
+
+A fonte subjacente de um fluxo de bytes legível recebe um `ReadableByteStreamController` para manipular. Seu método `ReadableByteStreamController.enqueue()` recebe um argumento `chunk` cujo valor é um `ArrayBufferView`. A propriedade `ReadableByteStreamController.byobRequest` retorna a solicitação de pull BYOB atual ou null se não houver nenhuma. Finalmente, a propriedade  `ReadableByteStreamController.desiredSize` retorna o tamanho desejado para preencher a fila interna do fluxo controlado.
+
+### O `queuingStrategy`
+
+O segundo argumento, também opcional, do construtor `ReadableStream()` é o `queuingStrategy` . É um objeto que define opcionalmente uma estratégia de enfileiramento para o fluxo, que leva um parâmetro:
+
+- `highWaterMark`: um número não negativo de bytes indicando a marca d'água alta do fluxo usando esta estratégia de enfileiramento. Isso é usado para determinar a contrapressão, manifestando-se por meio da propriedade `ReadableByteStreamController.desiredSize`. Também controla quando o método `pull()` da origem subjacente é chamado.
+
+{% Aside %} Ao contrário das estratégias de enfileiramento para outros tipos de fluxo, uma estratégia de enfileiramento para um fluxo de bytes legível não tem uma função `size(chunk)`  O tamanho de cada bloco é sempre determinado por sua propriedade `byteLength`. {% endAside %}
+
+{% Aside %} Se nenhuma `queuingStrategy` for fornecida, o padrão usado é aquele com `highWaterMark` de `0`. {% endAside %}
+
+#### Os métodos `getReader()` e `read()`
+
+Você pode então obter acesso a um `ReadableStreamBYOBReader` definindo o parâmetro `mode` apropriadamente: `ReadableStream.getReader({ mode: "byob" })`. Isso permite um controle mais preciso sobre a alocação do buffer para evitar cópias. Para ler o fluxo de bytes, você precisa chamar `ReadableStreamBYOBReader.read(view)`, em que `view` é um [`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView).
+
+#### Amostra de código de fluxo de bytes legível
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("The first 1024 bytes, or less:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+A função a seguir retorna fluxos de bytes legíveis que permitem a leitura eficiente de cópia zero de uma matriz gerada aleatoriamente. Em vez de usar um tamanho de bloco predeterminado de 1.024, ele tenta preencher o buffer fornecido pelo desenvolvedor, permitindo o controle total.
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // Even when the consumer is using the default reader,
+      // the auto-allocation feature allocates a buffer and
+      // passes it to us via `byobRequest`.
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## A mecânica de um fluxo gravável
+
+Um fluxo gravável é um destino no qual você pode gravar dados, representados em JavaScript por um objeto [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream). Isso funciona como uma abstração sobre o **coletor subjacente** - um coletor de E/S de nível inferior no qual os dados brutos são gravados.
+
+Os dados são gravados no stream por meio de um **gravador**, um pedaço de cada vez. Um pedaço pode assumir várias formas, assim como os pedaços em um leitor. Você pode usar qualquer código que desejar para produzir os pedaços prontos para gravação; o gravador mais o código associado é chamado de **produtor**.
+
+Quando um gravador é criado e começa a gravar em um fluxo (um **gravador ativo**), diz-se que está **bloqueado** para ele. Apenas um gravador pode gravar em um fluxo gravável por vez. Se você quiser que outro redator comece a gravar em seu fluxo, normalmente precisará liberá-lo antes de anexar outro redator a ele.
+
+Uma **fila interna** rastreia os blocos que foram gravados no fluxo, mas ainda não foram processados pelo coletor subjacente.
+
+Uma **estratégia de enfileiramento** é um objeto que determina como um fluxo deve sinalizar contrapressão com base no estado de sua fila interna. A estratégia de enfileiramento atribui um tamanho a cada pedaço e compara o tamanho total de todos os pedaços na fila a um número especificado, conhecido como **limite superior**.
+
+A construção final é chamada de **controlador**. Cada fluxo gravável possui um controlador associado que permite controlar o fluxo (por exemplo, para abortá-lo).
+
+### Criação de um fluxo gravável
+
+A interface [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) da API Streams fornece uma abstração padrão para gravar dados de streaming em um destino, conhecido como coletor. Este objeto vem com contrapressão e enfileiramento integrados. Você cria um fluxo gravável chamando seu construtor [`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream). Ele tem um parâmetro `underlyingSink`, que representa um objeto com métodos e propriedades que definem como a instância de fluxo construída se comportará.
+
+#### O `underlyingSink`
+
+O `underlyingSink` pode incluir os seguintes métodos opcionais definidos pelo desenvolvedor. O parâmetro `controller` passado para alguns dos métodos é um [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController).
+
+- `start(controller)`: este método é chamado imediatamente quando o objeto é construído. O conteúdo desse método deve ter como objetivo obter acesso ao coletor subjacente. Se esse processo for feito de forma assíncrona, ele pode retornar uma promessa de sinalizar sucesso ou falha.
+- `write(chunk, controller)`: este método será chamado quando um novo parâmetro chunk de dados (especificado no `chunk`) estiver pronto para ser escrito no coletor subjacente. Ele pode retornar uma promessa de sinalizar o sucesso ou a falha da operação de gravação. Esse método será chamado apenas depois que as gravações anteriores forem bem-sucedidas e nunca depois que o fluxo for fechado ou abortado.
+- `close(controller)`: este método será chamado se o aplicativo sinalizar que concluiu a gravação de blocos no fluxo. O conteúdo deve fazer o que for necessário para finalizar as gravações no coletor subjacente e liberar o acesso a ele. Se esse processo for assíncrono, ele pode retornar uma promessa de sinalizar sucesso ou falha. Este método será chamado somente depois que todas as gravações enfileiradas forem bem-sucedidas.
+- `abort(reason)`: este método será chamado se o app sinalizar que deseja fechar abruptamente o fluxo e colocá-lo em um estado de erro. Ele pode limpar qualquer recurso retido, bem como `close()`, mas `abort()` será chamado mesmo se as gravações estiverem enfileiradas. Esses pedaços serão jogados fora. Se esse processo for assíncrono, ele pode retornar uma promessa de sinalizar sucesso ou falha. O parâmetro `reason` contém um `DOMString` descrevendo por que o fluxo foi abortado.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+A interface [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController) da API Streams representa um controlador que permite o controle do estado de `WritableStream` durante a configuração, conforme mais fragmentos são enviados para gravação ou no final da gravação. Ao construir um `WritableStream`, o coletor subjacente recebe uma instância `WritableStreamDefaultController` correspondente para manipular. O `WritableStreamDefaultController` tem apenas um método: [`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error), que causa erro em qualquer interação futura com o fluxo associado.
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // Try to do something dangerous with `chunk`.
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### The `queuingStrategy`
+
+O segundo argumento, também opcional, do construtor `WritableStream()` é o `queuingStrategy`. É um objeto que opcionalmente define uma estratégia de enfileiramento para o fluxo, que leva dois parâmetros:
+
+- `highWaterMark`: um número não negativo que indica a marca d'água alta do fluxo usando esta estratégia de enfileiramento.
+- `size(chunk)`: uma função que calcula e retorna o tamanho não negativo finito do valor do pedaço fornecido. O resultado é usado para determinar a contrapressão, manifestando-se por meio da propriedade `WritableStreamDefaultWriter.desiredSize`.
+
+{% Aside %} Você pode definir seu próprio `queuingStrategy` personalizado ou usar uma instância de [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) ou [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) para este valor de objeto. Se nenhuma `queuingStrategy` for fornecida, o padrão usado é o mesmo que `CountQueuingStrategy` com `highWaterMark` de `1`. {% endAside %}
+
+#### Os métodos `getWriter()` e `write()`
+
+Para gravar em um fluxo gravável, você precisa de um gravador, que será um `WritableStreamDefaultWriter`. O método `getWriter()` da interface `WritableStream` devolve uma nova instância de `WritableStreamDefaultWriter` e bloqueia o fluxo para essa instância. Enquanto o fluxo está bloqueado, nenhum outro gravador pode ser adquirido até que o atual seja liberado.
+
+O método [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write) da interface [`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) grava um bloco de dados passado em um `WritableStream` e seu coletor subjacente e, em seguida, retorna uma promessa que resolve indicar o sucesso ou falha da operação de gravação. Observe que o que "sucesso" significa depende do coletor subjacente; pode indicar que o trecho foi aceito e não necessariamente que foi salvo com segurança em seu destino final.
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('The first chunk!');
+```
+
+#### A propriedade `locked`
+
+Você pode verificar se um fluxo gravável está bloqueado acessando sua propriedade [`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked).
+
+```js
+const locked = writableStream.locked;
+console.log(`The stream is ${locked ? 'indeed' : 'not'} locked.`);
+```
+
+### Amostra de código de fluxo gravável
+
+O exemplo de código abaixo mostra todas as etapas em ação.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[start]');
+  },
+  async write(chunk, controller) {
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // Wait to add to the write queue.
+  await writer.ready;
+  console.log('[ready]', Date.now() - start, 'ms');
+  // The Promise is resolved after the write finishes.
+  writer.write(char);
+}
+await writer.close();
+```
+
+### Canalização de um fluxo legível para um fluxo gravável
+
+Um fluxo legível pode ser canalizado para um fluxo gravável por meio do método [`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo) do fluxo. `ReadableStream.pipeTo()` canaliza o `ReadableStream` atual para um determinado `WritableStream` e retorna uma promessa que é cumprida quando o processo de canalização é concluído com êxito ou rejeita se algum erro for encontrado.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Called by constructor.
+    console.log('[start readable]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Called when controller's queue is empty.
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Called when the stream is canceled.
+    console.log('[cancel]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // Called by constructor
+    console.log('[start writable]');
+  },
+  async write(chunk, controller) {
+    // Called upon writer.write()
+    console.log('[write]', chunk);
+    // Wait for next write.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[finished]');
+```
+
+## Criação de um fluxo de transformação
+
+A interface `TransformStream` da API Streams representa um conjunto de dados transformáveis. Você cria um fluxo de transformação chamando seu construtor `TransformStream()`, que cria e retorna um objeto de fluxo de transformação dos manipuladores fornecidos. O construtor `TransformStream()` aceita como seu primeiro argumento um objeto JavaScript opcional que representa o `transformer`. Esses objetos podem conter qualquer um dos seguintes métodos:
+
+### O `transformer`
+
+- `start(controller)`: este método é chamado imediatamente quando o objeto é construído. Normalmente, isso é usado para enfileirar blocos de prefixo, usando `controller.enqueue()`. Esses pedaços serão lidos do lado legível, mas não dependem de nenhuma gravação no lado gravável. Se esse processo inicial for assíncrono, por exemplo, porque leva algum esforço para adquirir os blocos de prefixo, a função pode retornar uma promessa de sinalizar sucesso ou falha; uma promessa rejeitada causará um erro no fluxo. Quaisquer exceções lançadas serão lançadas novamente pelo construtor `TransformStream()`.
+- `transform(chunk, controller)`: este método é chamado quando um novo pedaço gravado originalmente no lado gravável está pronto para ser transformado. A implementação do fluxo garante que essa função será chamada somente depois que as transformações anteriores forem bem-sucedidas e nunca antes de `start()` ter sido concluído ou depois de `flush()` ter sido chamado. Esta função executa o trabalho de transformação real do fluxo de transformação. Pode enfileirar os resultados usando `controller.enqueue()`. Isso permite que um único pedaço gravado no lado gravável resulte em zero ou vários pedaços no lado legível, dependendo de quantas vezes o `controller.enqueue()` é chamado. Se o processo de transformação for assíncrono, essa função pode retornar uma promessa de sinalizar o sucesso ou o fracasso da transformação. Uma promessa rejeitada causará um erro nos lados legível e gravável do fluxo de transformação. Se nenhum método `transform()` for fornecido, a transformação de identidade será usada, que enfileira os pedaços inalterados do lado gravável para o legível.
+- `flush(controller)`: este método é chamado depois que todos os pedaços gravados no lado gravável foram transformados passando com sucesso por `transform()` e o lado gravável está prestes a ser fechado. Normalmente, isso é usado para enfileirar pedaços de sufixo no lado legível, antes que ele também seja fechado. Se o processo de liberação for assíncrono, a função pode retornar uma promessa de sinalizar sucesso ou falha. O resultado será comunicado ao chamador de `stream.writable.write()`. Além disso, uma promessa rejeitada causará um erro nos lados legível e gravável do fluxo. Lançar uma exceção é tratado da mesma forma que retornar uma promessa rejeitada.
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### As estratégias de enfileiramento `writableStrategy` e `readableStrategy`
+
+O segundo e o terceiro parâmetros opcionais do construtor `TransformStream()` são as estratégias de enfileiramento `writableStrategy` e `readableStrategy`. Eles são definidos conforme descrito nas seções de fluxo [legível](#the-queuingstrategy) e [gravável, respectivamente.](#the-queuingstrategy-3)
+
+### Amostra de código de fluxo de transformação
+
+O exemplo de código a seguir mostra um fluxo de transformação simples em ação.
+
+```js
+// Note that `TextEncoderStream` and `TextDecoderStream` exist now.
+// This example shows how you would have done it before.
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+### Canalização de um fluxo legível por meio de um fluxo de transformação
+
+O método[`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough) da interface `ReadableStream` fornece uma maneira encadeada de canalizar o fluxo atual através de um fluxo de transformação ou qualquer outro par gravável/legível. A canalização de um fluxo geralmente o bloqueia durante a duração do tubo, evitando que outros leitores o travem.
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // called by constructor
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // called read when controller's queue is empty
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close(); // or controller.error();
+  },
+  cancel(reason) {
+    // called when rs.cancel(reason)
+    console.log('[cancel]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+O próximo exemplo de código (um pouco inventado) mostra como você pode implementar uma versão "gritante" de `fetch()` que coloca todo o texto em letras maiúsculas, consumindo a promessa de resposta retornada [como um fluxo](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream) e colocando em letras maiúsculas, pedaço por pedaço. A vantagem dessa abordagem é que você não precisa esperar o download de todo o documento, o que pode fazer uma grande diferença ao lidar com arquivos grandes.
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## Suporte para navegador e polyfill
+
+O suporte para a API Streams em navegadores varia. Não se esqueça de conferir [Posso usar](https://caniuse.com/streams) para obter informações detalhadas de compatibilidade. Observe que alguns navegadores têm implementações parciais de determinados recursos, portanto, verifique os dados completamente.
+
+A boa notícia é que existe uma [implementação de referência](https://github.com/whatwg/streams/tree/master/reference-implementation) disponível e um [polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) direcionado para uso em produção.
+
+{% Aside 'gotchas' %} Se possível, carregue o polyfill condicionalmente e somente se o recurso integrado não estiver disponível. {% endAside %}
+
+## Demonstração
+
+A demonstração abaixo mostra fluxos legíveis, graváveis e de transformação em ação. Também inclui os exemplos das cadeias de tubos `pipeThrough()` e `pipeTo()`, além de demonstrar o `tee()`. Opcionalmente, você pode executar a [demonstração](https://streams-demo.glitch.me/) em sua própria janela ou visualizar o [código-fonte](https://glitch.com/edit/#!/streams-demo?path=script.js).
+
+{% Glitch 'streams-demo' %}
+
+## Fluxos úteis disponíveis no navegador
+
+Há uma série de fluxos úteis integrados diretamente no navegador. Você pode criar facilmente um `ReadableStream` a partir de um blob. O [método stream ()](https://developer.mozilla.org/docs/Web/API/Blob/stream) da interface [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) retorna um `ReadableStream` que, após a leitura, retorna os dados contidos no blob. Lembre-se também de que um objeto [`File`](https://developer.mozilla.org/docs/Web/API/File) é um tipo específico de `Blob` e pode ser usado em qualquer contexto de uso de um blob.
+
+```js
+const readableStream = new Blob(['hello world'], { type: 'text/plain' }).stream();
+```
+
+As variantes de streaming de `TextDecoder.decode()` e `TextEncoder.encode()` são chamadas de [`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) e [`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream) respectivamente.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+Compactar ou descompactar um arquivo é fácil com os fluxos de transformação [`CompressionStream`](https://wicg.github.io/compression/#compression-stream) e [`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream). O exemplo de código abaixo mostra como você pode baixar a especificação do Streams, compactá-la (gzip) diretamente no navegador e gravar o arquivo compactado diretamente no disco.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+O [`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream) da [API File System Access](/file-system-access/) e os [fluxos de solicitação `fetch()`](/fetch-upload-streaming/#writable-streams) são exemplos de fluxos graváveis em liberdade.
+
+A [API Serial](/serial/) faz uso intenso de fluxos legíveis e graváveis.
+
+```js
+// Prompt user to select any serial port.
+const port = await navigator.serial.requestPort();
+// Wait for the serial port to open.
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// Listen to data coming from the serial device.
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // Allow the serial port to be closed later.
+    reader.releaseLock();
+    break;
+  }
+  // value is a Uint8Array.
+  console.log(value);
+}
+
+// Write to the serial port.
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
+await writer.write(data);
+// Allow the serial port to be closed later.
+writer.releaseLock();
+```
+
+Finalmente, a [`WebSocketStream`](/websocketstream/) integra fluxos com a API WebSocket.
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## Recursos úteis
+
+- [Especificação de fluxos](https://streams.spec.whatwg.org/)
+- [Demonstrações de acompanhamento](https://streams.spec.whatwg.org/demos/)
+- [Polyfill de fluxos](https://github.com/MattiasBuelens/web-streams-polyfill)
+- [2016 - o ano dos fluxos na web](https://jakearchibald.com/2016/streams-ftw/)
+- [Iteradores e geradores assíncronos](https://jakearchibald.com/2017/async-iterators-and-generators/)
+- [Stream Visualizer](https://surma.dev/lab/whatwg-stream-visualizer/lab.html)
+
+## Reconhecimentos
+
+Este artigo foi revisado por [Jake Archibald](https://jakearchibald.com/), [François Beaufort](https://github.com/beaufortfrancois), [Sam Dutton](https://samdutton.com/), [Mattias Buelens](https://github.com/MattiasBuelens), [Surma](https://surma.dev/), [Joe Medley](https://github.com/jpmedley) e [Adam Rice](https://github.com/ricea). [As postagens do blog de Jake Archibald](https://jakearchibald.com/) me ajudaram muito a entender os fluxos. Alguns dos exemplos de código são inspirados [nas explorações do usuário do GitHub @bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac) e partes da prosa construídas pesadamente no [MDN Web Docs on Streams](https://developer.mozilla.org/docs/Web/API/Streams_API). Os [autores do](https://github.com/whatwg/streams/graphs/contributors) [Streams Standard](https://streams.spec.whatwg.org/) fizeram um excelente trabalho ao escrever esta especificação. Imagem do herói por [Ryan Lara](https://unsplash.com/@ryanlara) no [Unsplash](https://unsplash.com/).
diff --git a/src/site/content/pt/blog/text-fragments/index.md b/src/site/content/pt/blog/text-fragments/index.md
new file mode 100644
index 00000000000..1e36ab026b8
--- /dev/null
+++ b/src/site/content/pt/blog/text-fragments/index.md
@@ -0,0 +1,322 @@
+---
+title: |2-
+
+  Vincule com ousadia a onde ninguém vinculou antes: fragmentos de texto
+subhead: |2-
+
+  Fragmentos de texto permitem que você especifique um trecho de texto no fragmento de URL.
+
+  Ao navegar para um URL com tal fragmento de texto, o navegador pode enfatizar e/ou chamar a atenção do usuário.
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: |2-
+
+  Fragmentos de texto permitem que você especifique um trecho de texto no fragmento de URL.
+
+  Ao navegar para um URL com tal fragmento de texto, o navegador pode enfatizar e/ou chamar a atenção do usuário.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## Identificadores de fragmento
+
+O Chrome 80 foi um grande lançamento. Ele continha uma série de recursos altamente esperados, como [Módulos ECMAScript em Web Workers](/module-workers/), [coalescência nula](https://v8.dev/features/nullish-coalescing), [encadeamento opcional](https://v8.dev/features/optional-chaining) e muito mais. O lançamento foi, como de costume, anunciado por meio de uma [postagem](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) no blog do Chromium. Você pode ver um trecho da postagem do blog na imagem abaixo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %} <figcaption>Postagem de blog do Chromium com caixas vermelhas ao redor de elementos com um atributo <code>id</code></figcaption>.</figure>
+
+Você provavelmente está se perguntando o que todas as caixas vermelhas significam. Eles são o resultado da execução do seguinte fragmento no DevTools. Ele destaca todos os elementos que possuem um atributo `id`.
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+Posso colocar um link direto para qualquer elemento destacado com uma caixa vermelha graças ao [identificador de fragmento](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment) que uso no [hash](https://developer.mozilla.org/docs/Web/API/URL/hash) do URL da página. Supondo que eu quisesse criar um link direto para a caixa *Envie-nos seus comentários em nossos [Fóruns de produto](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)* à parte, poderia fazer isso criando manualmente o URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1&lt;/mark&gt;</code></a>. Como você pode ver no painel Elementos das Ferramentas do Desenvolvedor, o elemento em questão possui um `id` com o valor `HTML1`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %} <figcaption>Ferramentas de desenvolvimento mostrando o <code>id</code> de um elemento.</figcaption></figure>
+
+Se eu analisar este URL com o `URL()` do JavaScript, os diferentes componentes serão revelados. Observe a `hash` com o valor `#HTML1` .
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Creates a new `URL` object
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+No entanto, o fato de eu ter que abrir as Ferramentas do desenvolvedor para encontrar o `id` de um elemento diz muito sobre a probabilidade de essa seção específica da página ter um link para o autor da postagem do blog.
+
+E se eu quiser fazer um link para algo sem `id`? Digamos que eu queira criar um link para o título *Módulos ECMAScript em Web Workers*. Como você pode ver na imagem abaixo, o `<h1>` em questão não tem um `id`, o que significa que não há como vincular a este título. Esse é o problema que os fragmentos de texto resolvem.
+
+<figure>% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption>Ferramentas de desenvolvimento mostrando um título sem um <code>id</code>.</figcaption></figure>
+
+## Fragmentos de texto
+
+A proposta de [fragmentos de texto](https://wicg.github.io/ScrollToTextFragment/) adiciona suporte para a especificação de um trecho de texto no hash de URL. Ao navegar para uma URL com tal fragmento de texto, o agente do usuário pode enfatizar e/ou chamar a atenção do usuário.
+
+### Compatibilidade do navegador
+
+O recurso Fragmentos de texto é compatível com a versão 80 e posteriores dos navegadores baseados em Chromium. No momento em que este artigo foi escrito, o Safari e o Firefox não sinalizaram publicamente a intenção de implementar o recurso. Consulte os [links relacionados](#related-links) para obter dicas sobre as discussões do Safari e Firefox.
+
+{% Aside 'success' %} Esses links costumavam não funcionar quando servidos por [redirecionamentos do lado do cliente](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections) usados por alguns serviços comuns, como o Twitter. Esse problema foi rastreado como [crbug.com/1055455](https://crbug.com/1055455) e agora foi corrigido. [Redirecionamentos HTTP](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle) regulares sempre funcionaram bem. {% endAside %}
+
+Por [razões de segurança](#security) , o recurso requer que os links sejam abertos em um contexto [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener). Portanto, certifique-se de incluir [`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel) em sua `<a>` marcação de âncora ou adicione [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener) à sua `Window.open()` de recursos de funcionalidade de janela.
+
+### `textStart`
+
+Em sua forma mais simples, a sintaxe de fragmentos de texto é a seguinte: o símbolo hash `#` seguido por `:~:text=` e finalmente `textStart` , que representa o [texto codificado por cento](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) ao qual desejo um link.
+
+```bash
+#:~:text=textStart
+```
+
+Por exemplo, digamos que eu queira criar um link para o título *Módulos ECMAScript em Web Workers* na [postagem do blog anunciando recursos no Chrome 80](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html), o URL neste caso seria:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers&lt;/mark&gt;</code></a>
+
+O fragmento do texto é enfatizado<mark class="highlight-line highlight-line-active"> assim</mark>. Se você clicar no link em um navegador compatível como o Chrome, o fragmento de texto será destacado e aparecerá na tela:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption>Fragmento de texto rolado para exibição e destacado.</figcaption></figure>
+
+### `textStart` e `textEnd`
+
+Agora, e se eu quiser criar um link para toda a *seção* intitulada *Módulos ECMAScript em Web Workers*, não apenas seu título? A codificação percentual de todo o texto da seção tornaria a URL resultante impraticavelmente longa.
+
+Felizmente, existe uma maneira melhor. Em vez de todo o texto, posso enquadrar o texto desejado usando a sintaxe `textStart,textEnd`. Portanto, eu especificar um par de palavras codificado por cento no início do texto desejado, e um par de palavras codificado por cento no final do texto desejado, separadas por uma vírgula `,`.
+
+Isso se parece com isto:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.&lt;/mark&gt;</code></a>.
+
+Para `textStart`, tenho `ECMAScript%20Modules%20in%20Web%20Workers`, depois uma vírgula `,` seguida por `ES%20Modules%20in%20Web%20Workers.` como `textEnd`. Quando você clica em um navegador compatível como o Chrome, toda a seção é destacada e rolada para a visualização:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption>Fragmento de texto rolado para exibição e destacado.</figcaption></figure>
+
+Agora você pode se perguntar sobre minha escolha de `textStart` e `textEnd`. Na verdade, o URL um pouco mais curto <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules,Web%20Workers.&lt;/mark&gt;</code></a> com apenas duas palavras em cada lado também teria funcionado. Compare `textStart` e `textEnd` com os valores anteriores.
+
+Se eu der um passo adiante e usar apenas uma palavra para `textStart` e `textEnd`, você verá que estou com problemas. O URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript,Workers.&lt;/mark&gt;</code></a> é ainda mais curto agora, mas o fragmento de texto destacado não é mais o originalmente desejado. O destaque para na primeira ocorrência da palavra `Workers.`, o que é correto, mas não o que pretendo destacar. O problema é que a seção desejada não é identificada exclusivamente pelos valores atuais `textStart` e `textEnd` uma palavra:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption>Fragmento de texto não pretendido rolado para exibição e destacado.</figcaption></figure>
+
+### `prefix-` e `-suffix`
+
+Usar valores longos o suficiente para `textStart` e `textEnd` é uma solução para obter um link exclusivo. Em algumas situações, no entanto, isso não é possível. Por outro lado, por que escolhi a postagem do blog sobre o lançamento do Chrome 80 como meu exemplo? A resposta é que nesta versão foram introduzidos fragmentos de texto:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="Texto da postagem do blog: Fragmentos de URL de texto. Os usuários ou autores agora podem criar um link para uma parte específica de uma página usando um fragmento de texto fornecido em um URL. página é carregada, o navegador destaca o texto e rola o fragmento para exibição. Por exemplo, a URL abaixo carrega uma página wiki para 'Cat' e rola para o conteúdo listado no parâmetro `text`.", width="800", height="200" %} <figcaption>Trecho da postagem do blog do anúncio de fragmentos de texto.</figcaption></figure>
+
+Observe como na imagem acima a palavra "texto" aparece quatro vezes. A quarta ocorrência é escrita em uma fonte de código verde. Se eu quisesse criar um link para essa palavra específica, `textStart` como `text` . Visto que a palavra "texto" é, bem, apenas uma palavra, não pode haver um `textEnd`. E agora? O URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=text&lt;/mark&gt;</code></a> corresponde à primeira ocorrência da palavra "Texto" já no cabeçalho:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption>Correspondência de fragmentos de texto na primeira ocorrência de "Texto".</figcaption></figure>
+
+{% Aside 'caution' %} Observe que a correspondência de fragmentos de texto não diferencia maiúsculas de minúsculas. {% endAside %}
+
+Felizmente, existe uma solução. Em casos como este, posso especificar um `prefix​-` e um `-suffix`. A palavra antes da fonte do código verde "texto" é "o" e a palavra depois é "parâmetro". Nenhuma das outras três ocorrências da palavra "texto" tem as mesmas palavras circundantes. Armado com este conhecimento, eu posso ajustar o URL anterior e adicione o `prefix-` e o `-suffix`. Como os outros parâmetros, eles também precisam ser codificados por porcentagem e podem conter mais de uma palavra. <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=the-,text,-parameter&lt;/mark&gt;</code></a>. Para permitir que o analisador para identificar claramente o `prefix-` e o `-suffix`, eles precisam ser separados do `textStart` e o opcional `textEnd` com um hífen `-`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %} <figcaption>Correspondência de fragmentos de texto na ocorrência desejada de "texto".</figcaption></figure>
+
+### A sintaxe completa
+
+A sintaxe completa dos fragmentos de texto é mostrada abaixo. (Os colchetes indicam um parâmetro opcional.) Os valores de todos os parâmetros precisam ser codificados por porcentagem. Isto é especialmente importante para os caracteres hífen `-`, e comercial `&` e vírgula `,` para que eles não estão sendo interpretados como parte da sintaxe diretiva de texto.
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+Cada `prefix-` , `textStart` , `textEnd` e `-suffix` só vai coincidir com o texto dentro de um único [elemento nível de bloco](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements), mas faixas completas `textStart,textEnd` *podem* abranger vários blocos. Por exemplo `:~:text=The quick,lazy dog` não corresponderá ao exemplo a seguir, porque a string inicial "O rápido" não aparece em um único elemento de nível de bloco ininterrupto:
+
+```html
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
+```
+
+No entanto, corresponde a este exemplo:
+
+```html
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
+```
+
+### Criação de URLs de fragmento de texto com uma extensão de navegador
+
+Criar URLs de fragmentos de texto manualmente é entediante, especialmente quando se trata de garantir que sejam exclusivos. Se você realmente quiser, a especificação traz algumas dicas e lista as [etapas exatas para gerar URLs de fragmentos de texto](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives). Fornecemos uma extensão de navegador de código aberto chamada [Link para fragmento de texto](https://github.com/GoogleChromeLabs/link-to-text-fragment), que permite criar um link para qualquer texto selecionando-o e clicando em "Copiar link para texto selecionado" no menu de contexto. Esta extensão está disponível para os seguintes navegadores:
+
+- [Link para fragmento de texto para Google Chrome](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Link para fragmento de texto para Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Link para fragmento de texto para Mozilla Firefox](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Link para fragmento de texto para Apple Safari](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %} <figcaption> Extensão de navegador com <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">Link para fragmento de texto</a>.</figcaption></figure>
+
+### Vários fragmentos de texto em um URL
+
+Observe que vários fragmentos de texto podem aparecer em um URL. Os fragmentos de texto específicos precisam ser separados por um caractere de e comercial `&`. Aqui está um exemplo de link com três fragmentos de texto: <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet&lt;mark class="highlight-line highlight-line-active"&gt;</code></a>.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %} <figcaption>Três fragmentos de texto em um URL.</figcaption></figure>
+
+### Mistura de elementos e fragmentos de texto
+
+Fragmentos de elementos tradicionais podem ser combinados com fragmentos de texto. É perfeitamente normal ter ambos no mesmo URL, por exemplo, para fornecer um fallback significativo no caso de o texto original na página mudar, de modo que o fragmento de texto não corresponda mais. O URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.&lt;/mark&gt;</code></a> vinculado à seção *Dê-nos feedback em nossos [Fóruns de produto](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)* contém um fragmento de elemento (`HTML1`), bem como um fragmento de `text=Give%20us%20feedback%20in%20our%20Product%20Forums.`):
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt = "", width = "237", height = "121"%}<figcaption> Vinculando com fragmento de elemento e fragmento de texto.</figcaption></figure>
+
+### A diretiva do fragmento
+
+Há um elemento da sintaxe que ainda não expliquei: a diretiva fragment `:~:`. Para evitar problemas de compatibilidade com fragmentos de elemento de URL existentes, conforme mostrado acima, a [especificação de Fragmentos de Texto](https://wicg.github.io/ScrollToTextFragment/) apresenta a diretiva de fragmento. A diretiva de fragmento é uma parte do fragmento de URL delimitada pela sequência de código `:~:`. Ele é reservado para instruções do agente do usuário, como `text=` e é retirado do URL durante o carregamento para que os scripts do autor não possam interagir diretamente com ele. As instruções do agente do usuário também são chamadas de *diretivas*. No caso concreto, `text=` é, portanto, chamado de *diretiva de texto*.
+
+### Detecção de recursos
+
+Para detectar o suporte, teste a propriedade `fragmentDirective` `document`. A diretiva de fragmento é um mecanismo para URLs especificarem instruções direcionadas ao navegador ao invés do documento. Destina-se a evitar a interação direta com o script do autor, de forma que futuras instruções do agente do usuário possam ser adicionadas sem medo de introduzir alterações significativas no conteúdo existente. Um exemplo potencial de tais adições futuras poderia ser dicas de tradução.
+
+```js
+if ('fragmentDirective' in document) {
+  // Text Fragments is supported.
+}
+```
+
+{% Aside %} Do Chrome 80 ao Chrome 85, a `fragmentDirective` foi definida em `Location.prototype`. Para obter detalhes sobre essa mudança, consulte [WICG / scroll-to-text-fragment # 130](https://github.com/WICG/scroll-to-text-fragment/issues/130). {% endAside %}
+
+A detecção de recursos destina-se principalmente a casos em que os links são gerados dinamicamente (por exemplo, por mecanismos de pesquisa) para evitar o envio de links de fragmentos de texto para navegadores que não os suportam.
+
+### Estilização de fragmentos de texto
+
+Por padrão, os navegadores estilizam fragmentos de texto da mesma forma que estilizam a [`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) (normalmente preto em amarelo, as [cores do sistema](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors) CSS para `mark`). A folha de estilo do agente do usuário contém CSS parecido com este:
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+Como você pode ver, o navegador expõe um pseudo seletor [`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text) que você pode usar para personalizar o realce aplicado. Por exemplo, você pode projetar seus fragmentos de texto para serem texto preto em um fundo vermelho. Como sempre, certifique-se de [verificar o contraste da cor](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast) para que seu estilo de substituição não cause problemas de acessibilidade e certifique-se de que o realce realmente se destaque visualmente do resto do conteúdo.
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### "Polyfillability"
+
+O recurso Fragmentos de texto pode ser polyfilled até certo ponto. Fornecemos um [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill), que é usado internamente pela [extensão](https://github.com/GoogleChromeLabs/link-to-text-fragment), para navegadores que não oferecem suporte integrado para fragmentos de texto em que a funcionalidade é implementada em JavaScript.
+
+### Geração de link de fragmento de texto programático
+
+O [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill) contém um arquivo `fragment-generation-utils.js` que você pode importar e usar para gerar links de fragmento de texto. Isso é descrito no exemplo de código abaixo:
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### Obtenção de fragmentos de texto para fins analíticos
+
+Muitos sites usam o fragmento para roteamento, e é por isso que os navegadores retiram os fragmentos de texto para não quebrar essas páginas. Há uma [necessidade reconhecida](https://github.com/WICG/scroll-to-text-fragment/issues/128) de expor links de fragmentos de texto para páginas, por exemplo, para fins analíticos, mas a solução proposta ainda não foi implementada. Por enquanto, como solução alternativa, você pode usar o código a seguir para extrair as informações desejadas.
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### Segurança
+
+As diretivas de fragmento de texto são chamadas apenas em navegações completas (não na mesma página) que são o resultado de uma [ativação do usuário](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation). Além disso, as navegações originadas de uma origem diferente do destino exigirão que a navegação ocorra em um [`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener), de forma que a página de destino seja conhecida como suficientemente isolada. As diretivas de fragmento de texto são aplicadas apenas ao quadro principal. Isso significa que o texto não será pesquisado dentro de iframes e a navegação de iframe não invocará um fragmento de texto.
+
+### Privacidade
+
+É importante que as implementações da especificação de fragmentos de texto não vazem se um fragmento de texto foi encontrado em uma página ou não. Embora os fragmentos de elementos estejam totalmente sob o controle do autor da página original, os fragmentos de texto podem ser criados por qualquer pessoa. Lembre-se de como no meu exemplo acima não havia como vincular ao título *Módulos ECMAScript em Web Workers*, uma vez que o `<h1>` não tinha um `id`, mas como qualquer um, inclusive eu, poderia simplesmente vincular a qualquer lugar, elaborando cuidadosamente o fragmento de texto?
+
+Imagine que eu administrasse uma rede de anúncios do mal `evil-ads.example.com`. Além disso, imagine que em um de meus iframes de anúncios eu criei dinamicamente um iframe de origem cruzada oculto para `dating.example.com` com um URL de fragmento de texto <code>dating.example.com&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Log%20Out&lt;/mark&gt;</code> uma vez que o usuário interage com o anúncio. Se o texto "Logout" for encontrado, sei que a vítima está atualmente conectada a `dating.example.com`, que eu poderia usar para criar o perfil do usuário. Como uma implementação ingênua de fragmentos de texto pode decidir que uma correspondência bem-sucedida deve causar uma troca de foco, em `evil-ads.example.com` eu poderia escutar o `blur` e, assim, saber quando uma correspondência ocorreu. No Chrome, implementamos fragmentos de texto de forma que o cenário acima não aconteça.
+
+Outro ataque pode ser explorar o tráfego de rede com base na posição de rolagem. Suponha que eu tivesse acesso aos logs de tráfego de rede da minha vítima, como administrador da intranet de uma empresa. Agora imagine que existisse um longo documento de recursos humanos *O que fazer se você sofrer de …* e uma lista de condições como *esgotamento* , *ansiedade*, etc. Eu poderia colocar um pixel de rastreamento próximo a cada item da lista. Se eu determinar que o carregamento do documento ocorre simultaneamente com o carregamento do pixel de rastreamento ao lado, digamos, do *item queimado* , posso então, como administrador da intranet, determinar que um funcionário clicou em um link de fragmento de texto com `:~:text=burn%20out` que o funcionário pode ter assumido que era confidencial e não estava visível para ninguém. Uma vez que este exemplo é um tanto artificial para começar e como sua exploração requer pré-condições *muito* específicas para serem atendidas, a equipe de segurança do Chrome avaliou o risco de implementar a rolagem na navegação para ser gerenciável. Outros agentes de usuário podem decidir mostrar um elemento de IU de rolagem manual.
+
+Para sites que desejam desistir, o Chromium oferece suporte a um [valor de cabeçalho de Política de Documento](https://wicg.github.io/document-policy/) que eles podem enviar para que os agentes do usuário não processem URLs de Fragmentos de Texto.
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## Desativando fragmentos de texto
+
+A maneira mais fácil de desativar o recurso é usando uma extensão que pode injetar cabeçalhos de resposta HTTP, por exemplo, [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj) (não um produto do Google), para inserir um *cabeçalho de resposta (não* solicitação) da seguinte maneira:
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+Outra forma mais envolvente de cancelar é usando a configuração corporativa [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled). Para fazer isso no macOS, cole o comando abaixo no terminal.
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+No Windows, siga a documentação no site de suporte da [Ajuda do Google Chrome Enterprise.](https://support.google.com/chrome/a/answer/9131254?hl=en)
+
+{% Aside 'warning' %} Só tente fazer isso quando souber o que está fazendo. {% endAside %}
+
+## Fragmentos de texto na pesquisa na web
+
+Para algumas pesquisas, o mecanismo de busca Google fornece uma resposta rápida ou resumo com um snippet de conteúdo de um site relevante. É *mais provável que esses trechos em destaque* apareçam quando uma pesquisa é feita na forma de uma pergunta. Clicar em um snippet em destaque leva o usuário diretamente ao texto do snippet em destaque na página da web de origem. Isso funciona graças aos URLs de fragmentos de texto criados automaticamente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %} <figcaption>Página de resultados do mecanismo de pesquisa do Google mostrando um snippet em destaque. A barra de status mostra o URL de fragmentos de texto.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %}Depois de clicar, a seção relevante da página é exibida na tela.</figure>
+
+## Conclusão
+
+URL de fragmentos de texto é um recurso poderoso para vincular a texto arbitrário em páginas da web. A comunidade acadêmica pode usá-lo para fornecer citações altamente precisas ou links de referência. Os mecanismos de pesquisa podem usá-lo para criar links diretos para resultados de texto nas páginas. Os sites de redes sociais podem usá-lo para permitir que os usuários compartilhem passagens específicas de uma página da web, em vez de capturas de tela inacessíveis. Espero que você comece a [usar URLs de fragmentos de texto](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet) e os ache tão úteis quanto eu. Certifique-se de instalar a extensão do navegador [Link para fragmento de texto.](https://github.com/GoogleChromeLabs/link-to-text-fragment)
+
+## Links Relacionados
+
+- [Rascunho de especificações](https://wicg.github.io/scroll-to-text-fragment/)
+- [Revisão de TAG](https://github.com/w3ctag/design-reviews/issues/392)
+- [Entrada de status da plataforma Chrome](https://chromestatus.com/feature/4733392803332096)
+- [Bug de rastreamento do Chrome](https://crbug.com/919204)
+- [Intenção de enviar fio](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [Tópico WebKit-Dev](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Tópico de posição dos padrões da Mozilla](https://github.com/mozilla/standards-positions/issues/194)
+
+## Reconhecimentos
+
+Fragmentos de texto foi implementado e especificado por [Nick Burris](https://github.com/nickburris) e [David Bokan](https://github.com/bokand), com contribuições de [Grant Wang](https://github.com/grantjwang). Agradecimentos a [Joe Medley](https://github.com/jpmedley) pela revisão completa deste artigo. Imagem do herói por [Greg Rakozy](https://unsplash.com/@grakozy) em [Unsplash](https://unsplash.com/photos/oMpAz-DN-9I).
diff --git a/src/site/content/pt/blog/trusted-types/index.md b/src/site/content/pt/blog/trusted-types/index.md
new file mode 100644
index 00000000000..ce69f62b026
--- /dev/null
+++ b/src/site/content/pt/blog/trusted-types/index.md
@@ -0,0 +1,219 @@
+---
+title: Evite vulnerabilidades de scripting cross-site baseado em DOM com Tipos confiáveis
+subhead: Reduza a superfície de ataque DOM XSS de seu aplicativo.
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: Snippets de código que demonstram vulnerabilidades de scripting cross-site.
+description: |2
+
+  Apresentando Tipos confiáveis: uma API de navegador para evitar cross-site baseado em DOM
+
+  scripts em aplicativos da web modernos.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## Por que você deveria se importar?
+
+Cross-site scripting baseado em DOM (DOM XSS) é uma das vulnerabilidades de segurança da web mais comuns e é muito fácil introduzi-lo em seu aplicativo. Ps [Tipos confiáveis](https://github.com/w3c/webappsec-trusted-types) fornecem as ferramentas para escrever, revisar a segurança e manter aplicativos livres de vulnerabilidades DOM XSS, tornando as funções perigosas da API da web seguras por padrão. Tipos confiáveis são suportados no Chrome 83 e um [polyfill](https://github.com/w3c/webappsec-trusted-types#polyfill) está disponível para outros navegadores. Consulte [Compatibilidade do navegador](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility) para obter informações atualizadas de suporte entre navegadores.
+
+{% Aside 'key-term' %} O script cross-site baseado em DOM acontece quando os dados de uma *fonte* controlada pelo usuário (como nome de usuário ou URL de redirecionamento obtido do fragmento de URL) chegam a um *coletor*, que é uma função como `eval()` ou um definidor de propriedade como `.innerHTML`, que pode executar código JavaScript arbitrário. {% endAside %}
+
+## Histórico
+
+Por muitos anos, o [DOM XSS](https://owasp.org/www-community/attacks/xss/) foi uma das vulnerabilidades de segurança da web mais prevalentes e perigosas.
+
+Existem dois grupos distintos de scripting cross-site. Algumas vulnerabilidades XSS são causadas pelo código do lado do servidor que cria de forma insegura o código HTML que forma o site. Outros têm uma causa raiz no cliente, em que o código JavaScript chama funções perigosas com conteúdo controlado pelo usuário.
+
+Para [evitar o XSS do lado do servidor](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html), não gere HTML concatenando strings e, em vez disso, use bibliotecas de modelos de escape automático contextual. Use uma [Política de Segurança de Conteúdo baseada em nonce](https://csp.withgoogle.com/docs/strict-csp.html) para mitigação adicional contra os bugs conforme eles inevitavelmente acontecerem.
+
+Agora, um navegador também pode ajudar a prevenir os XSSes do lado do cliente (também conhecidos como baseados em DOM) com [Tipos confiáveis](https://bit.ly/trusted-types) .
+
+## Introdução sobre a API
+
+Tipos confiáveis funcionam bloqueando as seguintes funções de coletor de risco. Você já deve reconhecer alguns deles, pois os fornecedores de navegadores e [estruturas da web](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) já afastam você do uso desses recursos por motivos de segurança.
+
+- **Manipulação de script** :<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) e configuração do conteúdo de texto dos elementos [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script)
+
+- **Gerando HTML a partir de uma string** :<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML), [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML),[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML), [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc), [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write), [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) e [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **Executando o conteúdo do plugin** :<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src), [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) e [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **Compilação de código JavaScript em tempo de execução** :<br> `eval` , `setTimeout` , `setInterval` , `new Function()`
+
+Tipos confiáveis exigem que você processe os dados antes de transmiti-los às funções de coletor acima. Apenas usar uma string irá falhar, pois o navegador não sabe se os dados são confiáveis:
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML  = location.href;
+```
+
+{% CompareCaption %} Com Tipos Confiáveis habilitado, o navegador lança um *TypeError* e evita o uso de um coletor DOM XSS com uma string. {% endCompareCaption %}
+
+{% endCompare %}
+
+Para indicar que os dados foram processados com segurança, crie um objeto especial - um tipo confiável.
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %} Com Tipos Confiáveis habilitado, o navegador aceita um `TrustedHTML` para coletores que esperam fragmentos de HTML. Há também objetos `TrustedScript` e `TrustedScriptURL` para outros sinks sensíveis. {% endCompareCaption %}
+
+{% endCompare %}
+
+Tipos confiáveis reduzem fortemente a [superfície de ataque](https://en.wikipedia.org/wiki/Attack_surface) DOM XSS de seu aplicativo. Ele simplifica as revisões de segurança e permite que você aplique as verificações de segurança baseadas em tipo feitas durante a compilação, linting ou agrupamento de seu código em tempo de execução, no navegador.
+
+## Como usar Tipos Confiáveis
+
+### Prepare-se para relatórios de violação da política de segurança de conteúdo
+
+Você pode implantar um coletor de relatórios (como o [go-csp-collector de](https://github.com/jacobbednarz/go-csp-collector) código aberto) ou usar um dos equivalentes comerciais. Você também pode depurar as violações no navegador:
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### Adicione um cabeçalho CSP somente para relatório
+
+Adicione o seguinte cabeçalho de resposta HTTP aos documentos que deseja migrar para tipos confiáveis.
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+Agora todas as violações são relatadas para `//my-csp-endpoint.example` , mas o site continua a funcionar. A próxima seção explica como `//my-csp-endpoint.example` funciona.
+
+{% Aside 'caution' %} Tipos confiáveis estão disponíveis apenas em um [contexto seguro](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) como HTTPS e `localhost`. {% endAside %}
+
+### Identifique violações de tipos confiáveis
+
+A partir de agora, toda vez que os Tipos Confiáveis detectarem uma violação, um relatório será enviado para um `report-uri` configurado. Por exemplo, quando seu aplicativo passa uma string para `innerHTML`, o navegador envia o seguinte relatório:
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+Isso diz que em `https://my.url.example/script.js` na linha 39 `innerHTML` foi chamado com a string começando com `<img src=x` . Essas informações devem ajudá-lo a restringir quais partes do código podem estar introduzindo o DOM XSS e precisam ser alteradas.
+
+{% Aside %} A maioria das violações como essa também podem ser detectadas executando um linter de código ou [verificadores de código estático](https://github.com/mozilla/eslint-plugin-no-unsanitized) em sua base de código. Isso ajuda a identificar rapidamente um grande bloco de violações.
+
+Dito isso, você também deve analisar as violações de CSP, já que elas são acionadas quando o código não conforme é executado. {% endAside %}
+
+### Corrija as violações
+
+Existem algumas opções para corrigir uma violação de tipo confiável. Você pode [remover o código ofensivo](#remove-the-offending-code), [usar uma biblioteca](#use-a-library), [criar uma política de Tipo Confiável](#create-a-trusted-type-policy) ou, como último recurso, [criar uma política padrão](#create-a-default-policy) .
+
+#### Reescreva o código ofensivo
+
+Talvez a funcionalidade não conforme não seja mais necessária ou possa ser reescrita de uma maneira moderna sem usar as funções sujeitas a erros?
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### Use uma biblioteca
+
+Algumas bibliotecas já geram Tipos Confiáveis que você pode passar para as funções de coletor. Por exemplo, você pode usar [DOMPurify](https://github.com/cure53/DOMPurify) para limpar um trecho de HTML, removendo cargas úteis de XSS.
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+DOMPurify [suporta Trusted Tipos](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types) e irá retornar HTML higienizado envolto em um `TrustedHTML` objeto de tal forma que o navegador não gera uma violação. {% Aside 'caution' %} Se a lógica de sanitização em DOMPurify estiver bugada, seu aplicativo ainda pode ter uma vulnerabilidade DOM XSS. Tipos confiáveis forçam você a processar um valor de *alguma forma*, mas ainda não definem quais são as regras de processamento exatas e se elas são seguras. {% endAside %}
+
+#### Crie uma política de Tipo Confiável
+
+Às vezes, não é possível remover a funcionalidade e não há biblioteca para higienizar o valor e criar um tipo confiável para você. Nesses casos, crie você mesmo um objeto Tipo confiável.
+
+Para isso, primeiro crie uma [política](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr). As políticas são fábricas de Tipos Confiáveis que impõem certas regras de segurança em suas entradas:
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '<')
+  });
+}
+```
+
+Este código cria uma política chamada `myEscapePolicy` que pode produzir `TrustedHTML` por meio de sua função `createHTML()`. As regras definidas irão escapar de HTML `<` caracteres para evitar a criação de novos elementos HTML.
+
+Use a política da seguinte forma:
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // true
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Aside %} Enquanto a função JavaScript passada para `trustedTypes.createPolicy()` como `createHTML()` retorna uma string, `createPolicy()` retorna um objeto de política que envolve o valor de retorno em um tipo correto, neste caso `TrustedHTML` . {% endAside %}
+
+#### Use uma política padrão
+
+Às vezes, você não pode alterar o código ofensivo. Por exemplo, esse é o caso se você estiver carregando uma biblioteca de terceiros de um CDN. Nesse caso, use uma [política padrão](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr):
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+A política com um nome `default` é usada sempre que uma string é usada em um coletor que aceita apenas o tipo confiável. {% Aside 'gotchas' %} Use a política padrão com moderação e prefira refatorar o aplicativo para usar políticas regulares. Isso incentiva projetos nos quais as regras de segurança estejam próximas dos dados que elas processam, onde você tem mais contexto para higienizar corretamente o valor. {% endAside %}
+
+### Mude para a aplicação da Política de Segurança de Conteúdo
+
+Quando seu aplicativo não produzir mais violações, você pode começar a aplicar Tipos Confiáveis:
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+Aí está! Agora, não importa o quão complexo seja seu aplicativo da web, a única coisa que pode introduzir uma vulnerabilidade DOM XSS é o código em uma de suas políticas, e você pode bloquear isso ainda mais [limitando a criação de políticas](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive) .
+
+## Leitura adicional
+
+- [Tipos confiáveis do GitHub](https://github.com/w3c/webappsec-trusted-types)
+- [Rascunho de especificação W3C](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [Perguntas frequentes](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [Integrações](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/pt/blog/usb/index.md b/src/site/content/pt/blog/usb/index.md
new file mode 100644
index 00000000000..290a7fa304c
--- /dev/null
+++ b/src/site/content/pt/blog/usb/index.md
@@ -0,0 +1,237 @@
+---
+title: Acesse dispositivos USB na web
+subhead: A API WebUSB torna o USB mais seguro e fácil de usar, trazendo-o para a web.
+authors:
+  - beaufortfrancois
+date: 2016-03-30
+updated: 2021-02-23
+hero: image/admin/hhnhxiNuRWMfGqy4NSaH.jpg
+thumbnail: image/admin/RyaGPB8fHCuuXUc9Wj9Z.jpg
+alt: Foto de uma placa Arduino Micro
+description: A API WebUSB torna o USB mais seguro e fácil de usar, trazendo-o para a web.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webusb
+---
+
+Se eu falasse clara e simplesmente "USB", há uma boa chance de você pensar imediatamente em teclados, mouses, áudio, vídeo e dispositivos de armazenamento. Você está certo, mas você tambémencontrará outros tipos de dispositivos Universal Serial Bus (USB) por aí.
+
+Esses dispositivos USB não padronizados exigem que os fornecedores de hardware escrevam drivers e SDKs específicos para a plataforma para que você (o desenvolvedor) possa tirar proveito deles. Infelizmente, esse código específico de plataforma evitou historicamente que esses dispositivos fossem usados pela web. E essa é uma das razões pelas quais a API WebUSB foi criada: para fornecer uma maneira de expor serviços de dispositivos USB para a web. Com esta API, os fabricantes de hardware serão capazes de construir SDKs JavaScript de multiplataforma para seus dispositivos. Mas o mais importante é que isto **deixará o USB mais seguro e fácil de usar, trazendo-o para a web**.
+
+Vejamos o comportamento que você poderia esperar com a API WebUSB:
+
+1. Compre um dispositivo USB.
+2. Conecte-o ao seu computador. Uma notificação aparece imediatamente, com o site correto a ser acessado para este dispositivo.
+3. Clique na notificação. O site está lá e pronto para usar!
+4. Clique para conectar e um seletor de dispositivo USB aparecerá no Chrome, onde você poderá escolher seu dispositivo.
+
+Pronto!
+
+Como seria esse procedimento sem a API WebUSB?
+
+1. Instale uma aplicação específica da plataforma.
+2. Se ela for suportada no meu sistema operacional, verifique se fiz o download da coisa certa.
+3. Instale a coisa. Se você tiver sorte, não receberá nenhum prompt assustador do SO ou popups avisando sobre a instalação de drivers/aplicativos da Internet. Se você não tiver sorte, os drivers ou aplicativos instalados funcionarão incorretamente e poderão danificar seu computador. (Lembre-se de que a web foi construída para [conter sites com mau funcionamento](https://www.youtube.com/watch?v=29e0CtgXZSI)).
+4. Se você usar o recurso apenas uma vez, o código permanecerá no seu computador até que você pense em removê-lo. (Na Web, o espaço não utilizado é posteriormente recuperado.)
+
+## Antes de começar
+
+Este artigo pressupõe que você tenha algum conhecimento básico sobre o funcionamento do USB. Caso contrário, recomendo a leitura de [USB in a NutShell](http://www.beyondlogic.org/usbnutshell). Para obter informações básicas sobre USB, veja as [especificações oficiais do USB](https://www.usb.org/).
+
+A [API WebUSB](https://wicg.github.io/webusb/) está disponível no Chrome 61.
+
+### Disponível para provas de origem
+
+Para obter o máximo de feedback possível dos desenvolvedores que usam a API WebUSB em campo, adicionamos anteriormente esse recurso no Chrome 54 e no Chrome 57 como uma [prova de origem](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md).
+
+A última prova terminou com sucesso em setembro de 2017.
+
+## Privacidade e segurança
+
+### Apenas HTTPS
+
+Por causa do poder deste recurso, ele só funciona em [contextos seguros](https://w3c.github.io/webappsec/specs/powerfulfeatures/#intro). Isto significa que você precisará construir com a [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) em mente.
+
+### Gesto do usuário necessário
+
+Como medida de segurança, `navigator.usb.requestDevice()` só pode ser chamado por meio de um gesto do usuário, como um toque ou clique do mouse.
+
+### Política de Recursos
+
+Uma [política de recursos](https://developer.mozilla.org/docs/Web/HTTP/Feature_Policy) é um mecanismo que permite aos desenvolvedores ativar e desativar seletivamente vários recursos e APIs do navegador. Ela pode ser definida por meio de um cabeçalho HTTP e/ou um atributo "allow" do iframe.
+
+Você pode definir uma política de recursos que controla se o atributo usb é exposto no objeto Navigator ou, em outras palavras, se você permite WebUSB.
+
+Eis um exemplo de uma política de cabeçalhos em que o WebUSB não é permitido:
+
+```http
+Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com
+```
+
+Abaixo está outro exemplo de política de container onde o USB é permitido:
+
+```html
+<iframe allowpaymentrequest allow="usb; fullscreen"></iframe>
+```
+
+## Vamos começar a programar
+
+A API WebUSB depende muito das [Promessas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) do JavaScript. Se você não estiver familiarizado com elas, confira este incrível [tutorial sobre Promessas](/promises). Além disso, `() => {}` são simplesmente [funções de seta](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) do ECMAScript 2015.
+
+### Obtenha acesso a dispositivos USB
+
+Você pode ou solicitar que o usuário selecione um único dispositivo USB conectado usando `navigator.usb.requestDevice()` ou chamar `navigator.usb.getDevices()` para obter uma lista de todos os dispositivos USB conectados aos quais a origem tem acesso.
+
+A `navigator.usb.requestDevice()` usa um objeto JavaScript obrigatório que define `filters`. Esses filtros são usados para fazer a correspondência de qualquer dispositivo USB com o fornecedor (`vendorId`) e, opcionalmente, identificadores `productId`. As chaves `classCode`, `protocolCode`, `serialNumber` e `subclassCode` também podem ser definidas lá.
+
+<figure>   {% Img src="image/admin/KIbPwUfEqgZZLxugxBOY.png", alt="Captura de tela do prompt do usuário do dispositivo USB no Chrome", width="800", height="533" %}   <figcaption>Solicitação do usuário do dispositivo USB.</figcaption></figure>
+
+Por exemplo, eis como obter acesso a um dispositivo Arduino conectado e configurado para permitir a origem.
+
+```js
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(device => {
+  console.log(device.productName);      // "Arduino Micro"
+  console.log(device.manufacturerName); // "Arduino LLC"
+})
+.catch(error => { console.error(error); });
+```
+
+Antes que você pergunte, eu não consegui magicamente esse número hexadecimal `0x2341` Eu simplesmente procurei a palavra "Arduino" nesta [Lista de IDs USB](http://www.linux-usb.org/usb.ids).
+
+O `device` USB retornado na promessa cumprida acima tem algumas informações básicas mas importantes sobre o dispositivo, como a versão USB suportada, tamanho máximo do pacote, IDs de fornecedor e produto, além do número de configurações possíveis que o dispositivo pode ter. Basicamente, ele contém todos os campos do [Descritor USB do dispositivo](http://www.beyondlogic.org/usbnutshell/usb5.shtml#DeviceDescriptors).
+
+A propósito, se um dispositivo USB anunciar seu [suporte para WebUSB](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor), além de definir uma URL da página de destino, o Chrome mostrará uma notificação persistente quando o dispositivo USB for conectado. Clicar nesta notificação abrirá a página de destino.
+
+<figure>   {% Img src="image/admin/1gRIz2wY4LYofeFq5cc3.png", alt="Captura de tela da notificação WebUSB no Chrome", width="800", height="450" %}   <figcaption>Notificação WebUSB.</figcaption></figure>
+
+A partir daí, você pode simplesmente chamar `navigator.usb.getDevices()` e acessar seu dispositivo Arduino conforme mostrado abaixo.
+
+```js
+navigator.usb.getDevices().then(devices => {
+  devices.forEach(device => {
+    console.log(device.productName);      // "Arduino Micro"
+    console.log(device.manufacturerName); // "Arduino LLC"
+  });
+})
+```
+
+### Fale com uma placa USB Arduino
+
+Ok, agora vamos ver como é fácil se comunicar com uma placa compatível com Arduino usando WebUSB pela porta USB. Veja as instruções em [https://github.com/webusb/arduino](https://github.com/webusb/arduino) para habilitar seus [sketches](http://www.arduino.cc/en/Tutorial/Sketch) para usar WebUSB.
+
+Não se preocupe, abordarei todos os métodos de dispositivo WebUSB mencionados abaixo, posteriormente neste artigo.
+
+```js
+let device;
+
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(selectedDevice => {
+    device = selectedDevice;
+    return device.open(); // Begin a session.
+  })
+.then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
+.then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
+.then(() => device.controlTransferOut({
+    requestType: 'class',
+    recipient: 'interface',
+    request: 0x22,
+    value: 0x01,
+    index: 0x02})) // Ready to receive data
+.then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
+.then(result => {
+  const decoder = new TextDecoder();
+  console.log('Received: ' + decoder.decode(result.data));
+})
+.catch(error => { console.error(error); });
+```
+
+Lembre-se de que a biblioteca WebUSB que estou usando aqui está apenas implementando um protocolo de exemplo (com base no protocolo USB serial padrão) e que os fabricantes podem criar qualquer conjunto e tipo de endpoint que desejarem. As transferências de controle são especialmente adequadas para pequenos comandos de configuração, pois têm prioridade no barramento e têm uma estrutura bem definida.
+
+E aqui está o sketch que foi carregado na placa Arduino.
+
+```arduino
+// Biblioteca WebUSB Arduino de terceiros
+#include <WebUSB.h>
+
+WebUSB WebUSBSerial (1 / * https: // * /, "webusb.github.io/arduino/demos");
+
+#define Serial WebUSBSerial
+
+void setup () {
+Serial.begin (9600);
+while (! Serial) {
+; // Aguarde a conexão da porta serial.
+}
+Serial.write ("WebUSB FTW!");
+Serial.flush ();
+}
+
+void loop () {
+// Nada aqui por enquanto.
+}
+```
+
+A [biblioteca WebUSB Arduino de](https://github.com/webusb/arduino/tree/gh-pages/library/WebUSB) terceiros usada no código do exemplo acima faz basicamente duas coisas:
+
+- O dispositivo atua como um dispositivo WebUSB, permitindo que o Chrome leia a [URL da página de destino](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor).
+- Ela expõe uma API Serial WebUSB que você pode usar para substituir a default.
+
+Dê uma olhada mais uma vez no código JavaScript. Assim que obtenho o `device` escolhido pelo usuário, `device.open()` executa todas as etapas específicas da plataforma para iniciar uma sessão com o dispositivo USB. Então, tenho que selecionar uma configuração USB disponível com `device.selectConfiguration()`. Lembre-se de que uma configuração especifica como o dispositivo é alimentado, seu consumo máximo de energia e seu número de interfaces. Por falar em interfaces, também preciso solicitar acesso exclusivo com `device.claimInterface()` uma vez que os dados só podem ser transferidos para uma interface ou endpoints associados quando a interface é solicitada. Finalmente, chamar `device.controlTransferOut()` é necessário para configurar o dispositivo Arduino com os comandos apropriados para se comunicar por meio da API Serial WebUSB.
+
+A partir daí, `device.transferIn()` executa uma transferência em massa (bulk) para o dispositivo para informá-lo de que o host está pronto para receber dados em massa. Então, a promessa é cumprida com um objeto `result` contendo um <code>data</code> <a>DataView</a> que precisam ser processado de forma apropriada.
+
+Se você tem familiaridade com USB, tudo isso deve parecer bastante familiar.
+
+### Quero mais
+
+A API WebUSB permite que você interaja com todos os tipos de transferência/endpoint USB:
+
+- As transferências CONTROL, usadas para enviar ou receber parâmetros de configuração ou comando para um dispositivo USB, são tratadas com `controlTransferIn(setup, length)` e `controlTransferOut(setup, data)`.
+- As transferências INTERRUPT, usadas para uma pequena quantidade de dados sensíveis ao tempo, são tratadas com os mesmos métodos das transferências BULK com `transferIn(endpointNumber, length)` e `transferOut(endpointNumber, data)`.
+- As transferências ISOCHRONOUS, usadas para streams de dados como vídeo e som, são tratadas com `isochronousTransferIn(endpointNumber, packetLengths)` e `isochronousTransferOut(endpointNumber, data, packetLengths)`.
+- As transferências BULK, usadas para transferir uma grande quantidade de dados não sensíveis ao tempo de maneira confiável, são tratadas com `transferIn(endpointNumber, length)` e `transferOut(endpointNumber, data)`.
+
+Você também pode querer dar uma olhada no [projeto WebLight](https://github.com/sowbug/weblight) de Mike Tsao, que fornece um exemplo básico de construção de um dispositivo LED controlado por USB projetado para a API WebUSB (sem usar um Arduino aqui). Você encontrará hardware, software e firmware.
+
+## Dicas
+
+Depurar USB no Chrome é mais fácil com a página interna `about://device-log` onde você pode ver todos os eventos relacionados a dispositivos USB num só lugar.
+
+<figure>   {% Img src="image/admin/ssq2mMZmxpWtALortfZx.png", alt="Captura de tela da página de registro do dispositivo para depurar WebUSB no Chrome", width="800", height="442" %}   <figcaption>Página de log do dispositivo no Chrome para depurar a API WebUSB.</figcaption></figure>
+
+A página interna `about://usb-internals` também é útil e permite simular a conexão e a desconexão de dispositivos virtuais WebUSB. Isto é útil para fazer testes de IU sem hardware real.
+
+<figure>   {% Img src="image/admin/KB5z4p7fZRsvkfhVTNkb.png", alt="Captura de tela da página interna para depurar WebUSB no Chrome", width="800", height="294" %}   <figcaption>Página interna no Chrome para depurar a API WebUSB.</figcaption></figure>
+
+Na maioria dos sistemas Linux, os dispositivos USB são mapeados com permissões somente leitura por default. Para permitir que o Chrome abra um dispositivo USB, você precisará adicionar uma nova [regra udev](https://www.freedesktop.org/software/systemd/man/udev.html). Crie um arquivo em `/etc/udev/rules.d/50-yourdevicename.rules` com o seguinte conteúdo:
+
+```vim
+SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
+```
+
+onde `[yourdevicevendor]` é `2341` se o seu dispositivo for um Arduino, por exemplo. `ATTR{idProduct}` também pode ser adicionado para uma regra mais específica. Certifique-se de que seu `user` seja [membro](https://wiki.debian.org/SystemGroups) do grupo `plugdev` Em seguida, basta reconectar o dispositivo.
+
+{% Aside  %} Descritores do Microsoft OS 2.0 usados pelos exemplos do Arduino funcionam apenas no Windows 8.1 e posterior. Sem esse suporte o Windows ainda requer a instalação manual de um arquivo INF. {% endAside %}
+
+## Recursos
+
+- Stack Overflow: [https://stackoverflow.com/questions/tagged/webusb](https://stackoverflow.com/questions/tagged/webusb)
+- Especificação da API WebUSB: [http://wicg.github.io/webusb/](https://wicg.github.io/webusb/)
+- Status do recurso no Chrome: [https://www.chromestatus.com/feature/5651917954875392](https://www.chromestatus.com/feature/5651917954875392)
+- Problemas de especificação: [https://github.com/WICG/webusb/issues](https://github.com/WICG/webusb/issues)
+- Bugs de implementação: [http://crbug.com?q=component:Blink&gt;USB](http://crbug.com?q=component:Blink%3EUSB)
+- WebUSB ❤ ️Arduino: [https://github.com/webusb/arduino](https://github.com/webusb/arduino)
+- IRC: [#webusb](irc://irc.w3.org:6665/#webusb) no IRC do W3C
+- Lista de correspondência do WICG: [https://lists.w3.org/Archives/Public/public-wicg/](https://lists.w3.org/Archives/Public/public-wicg/)
+- Projeto WebLight: [https://github.com/sowbug/weblight](https://github.com/sowbug/weblight)
+
+Envie um tweet para [@ChromiumDev] [cr-dev-twitter] usando a hashtag [`#WebUSB`](https://twitter.com/search?q=%23WebUSB&src=typed_query&f=live) e diga-nos onde e como você está usando a API.
+
+## Agradecimentos
+
+Agradecimentos a [Joe Medley](https://github.com/jpmedley) por revisar este artigo.
diff --git a/src/site/content/pt/blog/variable-fonts/index.md b/src/site/content/pt/blog/variable-fonts/index.md
new file mode 100644
index 00000000000..477b1ff84c7
--- /dev/null
+++ b/src/site/content/pt/blog/variable-fonts/index.md
@@ -0,0 +1,472 @@
+---
+layout: post
+title: Introdução às fontes variáveis na web
+subhead: Uma nova especificação de fontes que pode reduzir significativamente o tamanho dos arquivos de fontes
+description: |-
+  Como funcionam as fontes variáveis, como os tipógrafos implementam fontes variáveis e
+  como trabalhar com fontes variáveis em CSS.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+  - dcrossland
+  - roeln
+date: 2018-02-19
+updated: 2020-08-17
+hero: image/admin/SHy7jOlEVPU1lsyfgvlG.jpg
+tags:
+  - blog
+  - fonts
+  - performance
+  - ux
+feedback:
+  - api
+---
+
+Neste artigo, veremos o que são fontes variáveis, os benefícios que oferecem e como podemos usá-las em nosso trabalho. Primeiro, vamos revisar como a tipografia funciona na web e quais inovações as fontes variáveis trazem.
+
+## Compatibilidade dos navegadores
+
+Em maio de 2020, as fontes variáveis eram suportadas na maioria dos navegadores. Veja [Posso usar fontes variáveis?](https://caniuse.com/#feat=variable-fonts) e [Fallbacks](#fallbacks).
+
+## Introdução
+
+Os termos fonte e tipo são frequentemente usados de forma intercambiável pelos desenvolvedores. No entanto, há uma diferença: um tipo é o design visual subjacente que pode existir em diferentes tecnologias de tipografia, e uma fonte é uma dessas implementações, no formato de um arquivo digital. Em outras palavras, um tipo é o que você *vê* e a fonte é o que você *usa*.
+
+Outro conceito que muitas vezes é deixado em segundo plano é a distinção entre um estilo e uma família. Um estilo é um tipo único e específico, como Bold Italic, e uma família é o conjunto completo de estilos.
+
+Antes das fontes variáveis, cada estilo era implementado como um arquivo de fonte separado. Com fontes variáveis, todos os estilos podem estar contidos num único arquivo.
+
+<figure>{% Img src="image/admin/RbhgXwS81Y9PVRJnTjPX.png", alt="Uma composição e lista de estilos diferentes da família Roboto", width="800", height="600" %}   <figcaption>     À esquerda: uma amostra da família de tipos Roboto. À direita: estilos nomeados dentro da família.   </figcaption></figure>
+
+## Desafios para designers e desenvolvedores
+
+Quando um designer cria um projeto de impressão, ele enfrenta algumas restrições, como o tamanho físico do layout da página, o número de cores que pode usar (que é determinado pelo tipo de impressora que será usada) e assim por diante. Mas eles podem usar quantos estilos de tipos quiserem. Isto significa que a tipografia da mídia impressa costuma ser rica e sofisticada, de modo que a experiência de leitura é verdadeiramente agradável. Pense na última vez em que você gostou de folhear uma excelente revista.
+
+Os web designers e desenvolvedores têm restrições diferentes das dos designers de impressão, e uma que é importante são os custos de largura de banda associados aos nossos designs. Este tem sido um obstáculo para experiências tipográficas mais ricas, pois elas têm um custo. Com as fontes tradicionais da web, cada estilo usado em nossos designs exige que os usuários baixem um arquivo de fonte separado, o que aumenta a latência e o tempo de renderização da página. Incluir apenas os estilos Regular e Negrito, além de suas contrapartes em itálico, pode implicar em 500 KB ou mais de dados de fonte. Isto antes mesmo de levarmos em conta a maneira como as fontes serão renderizadas, os padrões de fallback que terão que ser usados ou efeitos colaterais indesejáveis, como [FOIT e FOUT](https://www.zachleat.com/web/fout-vs-foit/).
+
+Muitas famílias de fontes oferecem uma gama muito mais ampla de estilos, de espessuras finas a grossas, larguras estreitas e largas, uma variedade de detalhes estilísticos e até designs de tamanhos específicos (otimizados para tamanhos de texto grandes ou pequenos). Como você teria que carregar um novo arquivo de fonte para cada estilo (ou combinações de estilos), muitos desenvolvedores web optam por não usar esses recursos, reduzindo a experiência de leitura de seus usuários.
+
+## Anatomia de uma fonte variável
+
+As fontes variáveis lidam com esses desafios, agrupando vários estilos num único arquivo.
+
+Isto funciona partindo de um estilo central ou 'default', geralmente o 'Regular' - um design romano vertical com peso e largura mais típicos que é mais adequado para texto comum. Em seguida, isto é conectado a outros estilos num intervalo contínuo, chamado de 'eixo'. O eixo mais comum é o **Peso** (Weight), que pode conectar o estilo default a um estilo Negrito (Bold). Qualquer estilo individual pode ser localizado ao longo de um eixo e é chamado de 'instância' da fonte variável. Algumas instâncias são nomeadas pelo desenvolvedor da fonte, por exemplo, a localização do eixo de Peso 600 é chamada de SemiBold.
+
+A fonte variável [Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) possui três estilos para seu eixo **Peso**. O estilo Regular está no centro e existem dois estilos nas extremidades opostas do eixo, um mais leve e outro mais pesado. Entre eles, você pode escolher dentre 900 instâncias:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ecr5godvTKunVXP7W8aU.png", alt="A letra 'A' mostrada em pesos diferentes", width="800", height="218" %}   <figcaption>    Acima: Anatomia ilustrada do eixo Weight (Peso) para a fonte Roboto.   </figcaption></figure>
+
+O desenvolvedor da fonte pode oferecer um conjunto de eixos diferentes. Você pode combiná-los porque todos compartilham os mesmos estilos padrão. Roboto tem três estilos no eixo Largura (Width): o Regular está no centro do eixo e dois estilos, Narrower (mais estreito) e Wider (mais largo), estão em cada extremidade. Eles fornecem todas as larguras possíveis para o estilo Regular e se combinam com o eixo Peso (Weight) para fornecer todas as larguras para cada peso.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Roboto Flex em combinações aleatórias de largura e peso</figcaption></figure>
+
+Isto significa que existem milhares de estilos! Pode parecer exagero, mas a qualidade da experiência de leitura pode ser bastante aprimorada por essa diversidade de estilos de tipos. E, se não houver prejuízo no desempenho, os desenvolvedores web podem usar alguns poucos ou quantos estilos desejarem, dependendo do seu design.
+
+### Itálico
+
+A forma como o estilo itálico é tratado em fontes variáveis é interessante, pois existem duas abordagens diferentes. Fontes como Helvetica ou Roboto têm contornos compatíveis com a interpolação, portanto, seus estilos romano e itálico podem ser interpolados. Assim, para variar entre o estilo romano (vertical) e itálico (inclinado) pode-se usar o eixo **Inclinação** (Slant).
+
+Outros tipos (como Garamond, Baskerville ou Bodoni) têm contornos de glifo romano e itálico que não são compatíveis com interpolação. Por exemplo, os contornos normalmente usados para desenhar um "n" minúsculo no estilo Roman não correspondem aos mesmos contornos usados para desenhar um "n" minúsculo no estilo Italic. Em vez de interpolar um contorno ao outro, o eixo **Itálico** (Italic) alterna entre os dois contornos romano e itálico.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EySl1LIfX1QIrGq654PO.png", alt="Exemplo de eixos Weight para a fonte Amstelvar", width="800", height="520" %}   <figcaption>     Contornos do "n" do tipo Amstelvar em itálico (12 pontos, peso regular, largura normal) e romano. Imagem fornecida por David Berlow, designer de tipos e tipógrafo na Font Bureau.  </figcaption></figure>
+
+Após a mudança para Itálico, os eixos disponíveis ao usuário devem ser os mesmos disponíveis ao estilo Romano, assim como o conjunto de caracteres deve ser o mesmo.
+
+A capacidade de substituição de glifos também pode ser aplicada a glifos individuais e usada em qualquer lugar no espaço de design de uma fonte variável. Por exemplo, um desenho de cifrão com duas barras verticais funciona melhor em tamanhos de pontos maiores, mas em tamanhos de pontos menores, um desenho com apenas uma barra é melhor. Quando temos menos pixels para renderizar o glifo, um desenho de duas barras pode se tornar ilegível. Para evitar isso, assim como ocorre com o eixo Itálico, uma substituição de um glifo por outro pode ocorrer ao longo do eixo **Tamanho Ótico** (Optical Size) num ponto decidido pelo designer de tipo.
+
+Em suma, onde os contornos permitem, os designers de texto podem criar fontes que interpolam entre vários estilos num espaço de design multidimensional. Isto lhe dá controle granular sobre sua tipografia e bastante poder.
+
+## Definições dos eixos
+
+Existem cinco [eixos registrados](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags), que controlam características conhecidas e previsíveis da fonte: peso (weight), largura (width), tamanho óptico (optical size), inclinação (slant) e itálico (italics). Além disso, uma fonte pode conter eixos personalizados. Estes podem controlar qualquer aspecto de design da fonte que o designer de tipo desejar: o tamanho das serifas, o comprimento dos traços, a altura dos ascendentes ou o tamanho do ponto no i.
+
+Mesmo que os eixos possam controlar o mesmo recurso, eles talvez usem valores diferentes. Por exemplo, nas fontes variáveis Oswald e Hepta Slab, há apenas um eixo disponível, Peso, mas os intervalos são diferentes: Oswald tem o mesmo intervalo de antes de ser atualizada para ser variável, 200 a 700, mas Hepta Slab começa com um peso extremo de fio do cabelo em 1 que pode variar até 900.
+
+Os cinco eixos registrados têm tags em letras minúsculas de 4 caracteres que são usadas para definir seus valores em CSS:
+
+<table>
+	<tbody>
+		<tr>
+			<th colspan="2">Nomes de eixo e valores CSS</th>
+		</tr>
+		<tr>
+			<td> 				Weight 			(Peso)</td>
+			<td>
+				<code>wght</code>
+			</td>
+		</tr>
+		<tr>
+			<td> 				Width 			(Largura)</td>
+			<td>
+				<code>wdth</code>
+			</td>
+		</tr>
+		<tr>
+			<td> 				Slant 			(Inclinação)</td>
+			<td>
+				<code>slnt</code>
+			</td>
+		</tr>
+		<tr>
+			<td> 				Optical Size 			(Tamanho ótico)</td>
+			<td>
+				<code>opsz</code>
+			</td>
+		</tr>
+		<tr>
+			<td> 				Italics 			(Itálico)</td>
+			<td>
+				<code>ital</code>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+Como o desenvolvedor da fonte determina quais eixos estarão disponíveis numa fonte variável e quais valores eles poderão ter, é essencial descobrir o que cada fonte oferece. A documentação da fonte deve fornecer essas informações ou você pode inspecionar a fonte usando uma ferramenta como o [Wakamai Fondue](https://wakamaifondue.com).
+
+## Casos de uso e benefícios
+
+Definir os valores dos eixos depende do gosto pessoal e da aplicação das melhores práticas tipográficas. O perigo de qualquer nova tecnologia é o possível uso indevido, e as configurações que são excessivamente artísticas ou exploratórias também podem diminuir a legibilidade do texto final. Para os títulos, explorar diferentes eixos para criar grandes designs artísticos é empolgante, mas para o corpo, isto pode deixar o texto ilegível.
+
+### Expressão interessante
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rh7wLaBLauEF02D2dqMC.png", alt="Exemplo de grama por Mandy Michael", width="495", height="174" %}</figure>
+
+Um ótimo exemplo de expressão artística está mostrado acima: uma exploração do tipo de letra [Decovar](https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow) por Mandy Michael.
+
+Você pode ver o exemplo em funcionamento e seu código-fonte [aqui](https://codepen.io/mandymichael/pen/YYaWop) .
+
+### Animação
+
+<figure>   {% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2Du2L0Ii5nUqz8n6S3Vz.mp4", controls=false,   autoplay=true,   loop=true,   muted=true,   playsinline=true   %}   <figcaption>     O tipo Zycon, projetado para animação por David Berlow, designer de tipos e tipógrafo do Font Bureau.  </figcaption></figure>
+
+Também existe a possibilidade de explorar caracteres animados com fontes variáveis. Acima está um exemplo de diferentes eixos sendo usados com a fonte Zycon. Veja o [exemplo de animação](https://www.axis-praxis.org/specimens/zycon) ao vivo no Axis Praxis.
+
+[Anicons](https://typogram.github.io/Anicons) é a primeira fonte de ícones coloridos animados do mundo, baseadas no Material Design Icons. Anicons é um experimento que combina duas tecnologias de ponta para fontes: fontes variáveis e fontes coloridas.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/anicons-animation.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Alguns exemplos de animações com a fonte de ícones colorida Anicons</figcaption></figure>
+
+### Finesse
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/larger-widths.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Amstelvar, usando pequenas quantidades de XTRA em direções opostas para que as larguras das palavras sejam uniformizadas</figcaption></figure>
+
+[Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) e [Amstelvar](https://github.com/TypeNetwork/Amstelvar) oferecem um conjunto de "Eixos paramétricos". Nesses eixos, as letras são desconstruídas em 4 aspectos fundamentais da forma: formas pretas ou positivas, formas brancas ou negativas e as dimensões x e y. Da mesma forma que as cores primárias podem ser combinadas com qualquer outra cor para ajustá-la, esses 4 aspectos podem ser combinados para ajustar qualquer outro eixo.
+
+O eixo XTRA em Amstelvar permite ajustar o valor "branco" com precisão de milésimos, conforme mostrado acima. Usando pequenas quantidades de XTRA em direções opostas, as larguras das palavras são uniformizadas.
+
+## Fontes variáveis em CSS
+
+### Carregando arquivos de fonte variável
+
+As fontes variáveis são carregadas por meio do mesmo `@font-face` que as fontes estáticas tradicionais da web, mas com dois novos aprimoramentos:
+
+```css
+@font-face {
+	font-family: 'Roboto Flex';
+	src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+       url('RobotoFlex-VF.woff2') format('woff2-variations');
+	font-weight: 100 1000;
+	font-stretch: 25% 151%;
+}
+```
+
+**1. Formatos de origem:** não queremos que o navegador baixe a fonte se ele não suportar fontes variáveis, então adicionamos uma descrição de formato (`format`): uma vez no [formato futuro](https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types) ( `woff2 supports variations`), uma vez no formato atual, mas que em breve será deprecado (`woff2-variations`). Se o navegador suportar fontes variáveis e a sintaxe futura, ele usará a primeira declaração. Se ele suportar fontes variáveis e a sintaxe atual, ele usará a segunda declaração. Ambos apontam para o mesmo arquivo de fonte.
+
+<!-- TODO 2021 Q1 revisit this, based on progress in
+     https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types
+     to allow removing the 2nd src -->
+
+**2. Intervalos de estilo:** você perceberá que estamos fornecendo dois valores para `font-weight` e `font-stretch`. Em vez de informar ao navegador qual peso específico fornecido por esta fonte (por exemplo `font-weight: 500;`), agora fornecemos um **intervalo** de pesos suportados pela fonte. Para Roboto Flex, o eixo Peso varia de 100 a 1000, e o CSS mapeia o intervalo do eixo diretamente à propriedade de estilo `font-weight`. Ao especificar o intervalo em `@font-face`, qualquer valor fora desse intervalo será "truncado" ao valor válido mais próximo. O intervalo do eixo Largura é mapeado da mesma maneira para a propriedade `font-stretch`.
+
+Se você estiver usando a API do Google Fonts, tudo isso será resolvido automaticamente. O CSS irá conter não apenas os formatos e intervalos de origem adequados, como o Google Fonts também enviará fontes de fallback estático caso as fontes variáveis não sejam suportadas.
+
+### Usando pesos e larguras
+
+Atualmente, os eixos que você pode definir com segurança no CSS são o eixo `wght` através de `font-weight` e o eixo `wdth` através de `font-stretch`.
+
+Tradicionalmente, você definiria a `font-weight` como uma palavra-chave (`light`, `bold`) ou como um valor numérico entre 100 e 900, em etapas de 100. Com fontes variáveis, você pode definir qualquer valor dentro do intervalo de largura da fonte:
+
+```css
+.kinda-light {
+  font-weight: 125;
+}
+
+.super-heavy {
+  font-weight: 1000;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-weight.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Eixo Weight do Roboto Flex sendo alterado do mínimo para o máximo.</figcaption></figure>
+
+De forma similar, podemos definir `font-stretch` com as palavras-chave `condensed`, `ultra-expanded`) ou com valores percentuais:
+
+```css
+.kinda-narrow {
+  font-stretch: 33.3%;
+}
+
+.super-wide {
+  font-stretch: 151%;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-width.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Eixo Width do Roboto Flex sendo alterado do mínimo para o máximo.</figcaption></figure>
+
+### Usando os formatos itálico e inclinado
+
+O eixo `ital` se destina a fontes que contêm um estilo regular e um estilo itálico. O eixo funciona como uma chave liga/desliga: o valor `0` é o valor desligado e mostrará o estilo regular, enquanto que o valor `1` mostrará o itálico. Ao contrário de outros eixos, não há transição. Um valor de `0.5` não resultará em "meio itálico".
+
+O `slnt` difere do itálico porque não é um *estilo* novo, mas apenas inclina o estilo regular. Por default, seu valor é `0`, o que significa que as letras serão o default vertical. O Roboto Flex tem uma inclinação máxima de -10 graus, o que significa que as letras irão inclinar-se para a direita ao variar de 0 a -10.
+
+Seria intuitivo definir esses eixos por meio da `font-style`, mas até abril de 2020, exatamente como fazer isto [ainda não tinha sido decidido](https://github.com/w3c/csswg-drafts/issues/3125). Portanto, por enquanto, você deve tratá-los como eixos personalizados e defini-los por meio de `font-variation-settings`:
+
+```css
+i, em, .italic {
+	/* Should be font-style: italic; */
+	font-variation-settings: 'ital' 1;
+}
+
+.slanted {
+	/* Should be font-style: oblique 10deg; */
+	font-variation-settings: 'slnt' 10;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-slant.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Eixo Slant do Roboto Flex sendo alterado do mínimo para o máximo.</figcaption></figure>
+
+### Usando tamanhos ópticos
+
+Um tipo de letra pode ser renderizado numa dimensão muito pequena (uma nota de rodapé de 12 px) ou muito grande (um título de 80 px). As fontes podem responder a essas mudanças de tamanho, alterando o formato das letras para que sejam melhor adequadas ao seu tamanho. Um tamanho pequeno pode ficar melhor sem detalhes finos, enquanto um tamanho grande pode se beneficiar de mais detalhes e traços mais finos.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wrVCGSQNaGWhNp97BoRS.png", alt="A letra 'a' mostrada em diferentes tamanhos ópticos", width="800", height="147" %}   <figcaption>     A letra 'a' no Roboto Flex em diferentes tamanhos de pixel, depois dimensionada para ter o mesmo tamanho, mostrando as diferenças no design. <a href="https://codepen.io/RoelN/pen/PoPvdeV">Experimente você mesmo no Codepen</a>   </figcaption></figure>
+
+Uma nova propriedade CSS foi introduzida para este eixo: `font-optical-sizing`. Por default, é definida como `auto`, o que faz com que o navegador defina o valor do eixo com base no `font-size` da fonte. Isto significa que o navegador escolherá o melhor tamanho ótico automaticamente, mas se você desejar desligar esse recurso, você pode definir `font-optical-sizing` como `none`.
+
+Você também pode definir um valor personalizado para o eixo `opsz` se desejar deliberadamente um tamanho ótico que não corresponda ao tamanho da fonte. O seguinte CSS faria com que o texto fosse mostrado em tamanho grande, mas num tamanho ótico como se fosse impresso em `8pt`:
+
+```css
+.small-yet-large {
+  font-size: 100px;
+  font-variation-settings: 'opsz' 8;
+}
+```
+
+### Usando eixos personalizados
+
+Diferentemente dos eixos registrados, os eixos personalizados não serão mapeados a uma propriedade CSS existente, portanto, você sempre terá que defini-los através de `font-variation-settings`. Tags para eixos personalizados estão sempre em maiúsculas, para distingui-los dos eixos registrados.
+
+O Roboto Flex oferece alguns eixos personalizados, e o mais importante é o Grade (`GRAD`). Um eixo de graduação é interessante já que altera o peso da fonte sem alterar as larguras, de forma que não mudam as quebras de linha. Ao brincar com um eixo de graduação, você pode evitar ser forçado a fazer alterações no eixo Peso, que afeta a largura geral e, em seguida, alterações no eixo Largura que afeta o peso geral.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-grade.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Eixo Grade do Roboto Flex sendo alterado do mínimo para o máximo.</figcaption></figure>
+
+Como `GRAD` é um eixo personalizado, com um intervalo de -200 a 150, precisamos usá-lo com `font-variation-settings`:
+
+```css
+.grade-light {
+	font-variation-settings: `GRAD` -200;
+}
+
+.grade-normal {
+	font-variation-settings: `GRAD` 0;
+}
+
+.grade-heavy {
+	font-variation-settings: `GRAD` 150;
+}
+```
+
+### Fontes variáveis no Google Fonts
+
+O Google Fonts ampliou seu catálogo com [fontes variáveis](https://fonts.google.com/?vfonly=true) e adiciona novas fontes regularmente. A interface atualmente tem como objetivo escolher instâncias individuais da fonte: você seleciona a variação desejada, clica em "Selecionar este estilo" e ela será adicionada ao `<link>` que busca o CSS e as fontes do Google Fonts.
+
+Para usar todos os eixos disponíveis, ou intervalos de valores, você terá que [compor manualmente](https://developers.google.com/fonts/docs/css2) a URL para a API do Google Fonts. Veja [Visão geral das fontes variáveis](https://fonts.google.com/variablefonts), que lista todos os eixos e valores.
+
+A ferramenta [Google Variable Fonts Links](https://github.com/RoelN/google-variable-fonts-links) também pode fornecer as URLs mais recentes para as fontes variáveis completas.
+
+## Herança de font-variation-settings
+
+Embora todos os eixos registrados em breve serão suportados através das propriedades CSS existentes, por enquanto você talvez precise confiar em `font-variation-settings` como um fallback. Você também vai precisar de `font-variation-settings` se sua fonte tiver eixos personalizados.
+
+No entanto, existe um pequeno problema em usar `font-variation-settings`. Cada propriedade que você *não definir explicitamente* será redefinida automaticamente para o default. Os valores definidos anteriormente não são herdados! Isto significa que o código a seguir não irá funcionar como esperado:
+
+```html
+<span class="slanted grade-light">
+	I should be slanted and have a light grade
+</span>
+```
+
+Primeiro, o navegador aplicará `font-variation-settings: 'slnt' 10` da classe `.slanted`. Em seguida, aplicará `font-variation-settings: 'GRAD' -200` da classe `.grade-light`. Mas isto vai redefinir o `slnt` de volta ao seu default, que é 0! O resultado será um texto com uma graduação leve, mas que não será inclinado.
+
+Por sorte, podemos contornar isso usando variáveis CSS:
+
+```css
+/* Defina valores default */
+:root {
+	--slnt: 0;
+	--GRAD: 0;
+}
+
+/* Mude valor para estes elementos e seus filhos */
+.slanted {
+	--slnt: 10;
+}
+
+.grade-light {
+	--grad: -200;
+}
+
+.grade-normal {
+	--grad: 0;
+}
+
+.grade-heavy {
+	--grad: 150;
+}
+
+/* Aplique quaisquer valores armazenados nas variaveis CSS */
+.slanted,
+.grade-light,
+.grade-normal,
+.grade-heavy {
+	font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
+}
+```
+
+Variáveis CSS serão afetadas pelo efeito cascata, portanto, se um elemento (ou um de seus pais) tiver definido o `slnt` a `10`, ele manterá esse valor mesmo que você defina `GRAD` para outra coisa. Veja [Corrigindo herança de fontes variáveis](https://pixelambacht.nl/2019/fixing-variable-font-inheritance/) para uma explicação detalhada dessa técnica.
+
+Observe que animar variáveis CSS não funciona (por design), então algo desse tipo não vai funcionar:
+
+```css
+@keyframes width-animation {
+   from { --wdth: 25; }
+   to   { --wdth: 151; }
+}
+```
+
+Essas animações terão que acontecer diretamente em `font-variation-settings`.
+
+## Performance gains
+
+As fontes variáveis OpenType permitem armazenar diversas variações de uma família de tipos num único arquivo de fonte. [Monotype](https://medium.com/@monotype/part-2-from-truetype-gx-to-variable-fonts-4c28b16997c3) executou um experimento combinando 12 fontes de entrada para gerar oito pesos, em três larguras, nos estilos itálico e romano. O armazenamento de 48 fontes individuais num único arquivo de fonte variável significou uma *redução de 88% no tamanho do arquivo*.
+
+No entanto, se você estiver usando uma única fonte, como Roboto Regular e nada mais, poderá não perceber um ganho líquido no tamanho da fonte se mudasse para uma fonte variável com vários eixos. Como sempre, isto vai depender do seu caso de uso.
+
+Por outro lado, animar a fonte entre as configurações pode causar problemas de desempenho. Embora isto vá melhorar quando o suporte a fontes variáveis nos navegadores ficar mais maduro, o problema pode ser reduzido um pouco animando apenas as fontes que estão na tela. Este trecho do [Dinamo](https://abcdinamo.com/news/using-variable-fonts-on-the-web) pausa animações em elementos com a classe `vf-animation`, quando eles não estão na tela:
+
+```javascript
+var observer = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(function(entry) {
+    // Pause/Play the animation
+    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
+    else entry.target.style.animationPlayState = "paused"
+  });
+});
+
+var variableTexts = document.querySelectorAll(".vf-animation");
+variableTexts.forEach(function(el) { observer.observe(el); });
+```
+
+Se sua fonte responde à interação do usuário, é uma boa ideia limitar a execução das chamadas usando [throttle ou debounce](https://css-tricks.com/debouncing-throttling-explained-examples/) em eventos de input. Isto impedirá que o navegador renderize instâncias da fonte variável que mudou tão pouco em relação à instância anterior que o olho humano não perceberia a diferença.
+
+Se você estiver usando o Google Fonts, é uma boa ideia usar [preconnect](/preconnect-and-dns-prefetch/) com `https://fonts.gstatic.com`, o domínio onde as fontes do Google estão hospedadas. Isto vai garantir que o navegador saiba desde o início onde obter as fontes ao encontrá-las no CSS:
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+```
+
+Essa dica também funciona para outros CDNs: quanto antes você permitir que o navegador estabeleça uma conexão de rede, mais cedo ele poderá baixar suas fontes.
+
+Encontre mais dicas de desempenho para carregar Google Fonts no artigo [The Fastest Google Fonts](https://csswizardry.com/2020/05/the-fastest-google-fonts/).
+
+## Substitutos e suporte ao navegador {: #fallbacks}
+
+Todos os navegadores modernos [suportam fontes variáveis](https://caniuse.com/#feat=variable-fonts). Caso precise suportar navegadores mais antigos, você pode optar por construir seu site com fontes estáticas e usar fontes variáveis como aprimoramento progressivo:
+
+```css
+/* Configurar Roboto para navegadores antigos, apenas regular + bold */
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Regular.woff2');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Bold.woff2');
+  font-weight: bold;
+}
+
+body {
+  font-family: Roboto;
+}
+
+.super-bold {
+  font-weight: bold;
+}
+
+/* Configurar Roboto para navegadores modernos, todos os weights */
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Roboto';
+    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+         url('RobotoFlex-VF.woff2') format('woff2-variations');
+    font-weight: 100 1000;
+    font-stretch: 25% 151%;
+  }
+
+  .super-bold {
+    font-weight: 1000;
+  }
+}
+```
+
+Para navegadores mais antigos, o texto com a classe `.super-bold` será renderizado em negrito normal, pois essa é a única fonte em negrito que temos disponível. Somente quando fontes variáveis forem suportadas é que poderemos usar o peso máximo de 1000.
+
+Se você estiver usando a API Google Fonts, ela cuidará de carregar as fontes adequadas aos navegadores do seu visitante. Digamos que você solicite a fonte Oswald no intervalo de peso de 200 a 700, assim:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
+```
+
+Navegadores modernos que podem lidar com fontes variáveis irão obter a fonte variável e terão disponíveis todos os pesos entre 200 e 700. Os navegadores mais antigos receberão fontes estáticas individuais para cada peso. Nesse caso, isto significa que eles farão o download de 6 arquivos de fontes: um para peso 200, um para peso 300 e assim por diante.
+
+## Obrigado
+
+Este artigo só teria sido possível com a ajuda das seguintes pessoas:
+
+- [Mustafa Kurtuldu](https://twitter.com/mustafa_x), designer de UX e design advocate no Google
+- [Roel Nieskens](https://twitter.com/PixelAmbacht), designer/desenvolvedor de UX e especialista em tipografia na [Kabisa](https://kabisa.nl)
+- [Dave Crossland](https://twitter.com/davelab6), gerente de programa, Google Fonts
+- [David Berlow](https://twitter.com/dberlow), designer de tipos e tipógrafo do [Font Bureau](https://fontbureau.typenetwork.com/)
+- [Laurence Penney](https://twitter.com/lorp), desenvolvedor do [axis-praxis.org](https://axis-praxis.org)
+- [Mandy Michael](https://twitter.com/Mandy_Kerr), desenvolvedora do [variablefonts.dev](https://variablefonts.dev)
+
+Imagem herói por [Bruno Martins](https://unsplash.com/@brunus) no [Unsplash](https://unsplash.com/photos/OhJmwB4XWLE).
diff --git a/src/site/content/pt/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/pt/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..e102ad52658
--- /dev/null
+++ b/src/site/content/pt/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,138 @@
+---
+title: Melhores práticas para medir as Web Vitals em campo
+subhead: Como medir Web Vitals com sua ferramenta de análise atual
+authors:
+  - philipwalton
+description: Como medir Web Vitals com sua ferramenta de análise atual
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Como medir Web Vitals com sua ferramenta de análise atual
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Ter a capacidade de medir e relatar o desempenho de suas páginas no mundo real é fundamental para diagnosticar e melhorar o desempenho ao longo do tempo. Sem [dados de campo](/user-centric-performance-metrics/#in-the-field), é impossível saber com certeza se as alterações que você está fazendo ao seu site estão realmente alcançando os resultados desejados.
+
+Muitos provedores de análises populares de [Real User Monitoring (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) já oferecem suporte às [métricas Core Web Vitals](/vitals/#core-web-vitals) em suas ferramentas (assim como muitos [outros Web Vitals](/vitals/#other-web-vitals)). Se você está usando atualmente uma dessas ferramentas de análise RUM, está em ótima forma para avaliar como as páginas do seu site atendem aos [limites recomendados das métricas Core Web Vitals](/vitals/#core-web-vitals) e evitar regressões no futuro.
+
+Embora recomendemos o uso de uma ferramenta de análises que ofereça suporte às métricas Core Web Vitals, se a ferramenta de análises que você está usando atualmente não oferece esse suporte, você não precisa necessariamente mudar. Quase todas as ferramentas de análises oferecem alguma maneira de definir e medir [métricas](https://support.google.com/analytics/answer/2709828) ou [eventos](https://support.google.com/analytics/answer/1033068) personalizados, o que significa que você provavelmente poderá usar seu provedor de análises atual para medir as métricas Core Web Vitals e adicioná-las aos seus relatórios e painéis de análise existentes.
+
+Este guia discute as melhores práticas para medir as métricas Core Web Vitals (ou qualquer métrica personalizada) com uma ferramenta de análise nativa ou de terceiros. Ele também pode servir como um guia para fornecedores de análise que desejam adicionar suporte Core Web Vitals a seus serviços.
+
+## Use métricas ou eventos personalizados
+
+Conforme mencionado acima, a maioria das ferramentas de análise permite medir dados personalizados. Se sua ferramenta de análise suportar isso, você deverá ser capaz de medir cada uma das métricas Core Web Vitals usando este mecanismo.
+
+Medir métricas ou eventos personalizados em uma ferramenta de análise geralmente é um processo de três etapas:
+
+1. [Defina ou registre](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827) a métrica personalizada na administração da ferramenta (se necessário). *(Observação: nem todos os provedores de análise exigem que as métricas personalizadas sejam definidas com antecedência.)*
+2. Calcule o valor da métrica em seu código JavaScript de front-end.
+3. Envie o valor da métrica para o back-end de análise, garantindo que o nome ou ID corresponda ao que foi definido na etapa 1 *(novamente, se necessário)*.
+
+Para as etapas 1 e 3, você pode consultar a documentação da ferramenta de análise para obter instruções. Para a etapa 2, você pode usar a [biblioteca JavaScript web-vitals](https://github.com/GoogleChrome/web-vitals) para calcular o valor de cada uma das métricas Core Web Vitals.
+
+O trecho de código a seguir mostra como é fácil rastrear essas métricas no código e enviá-las a um serviço de análise.
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // Use `navigator.sendBeacon()` se disponível, usando `fetch()` como fallback.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## Garanta que você possa relatar uma distribuição
+
+Depois de calcular os valores de cada métrica Core Web Vitals e enviá-los ao seu serviço de análise usando uma métrica ou evento customizado, o próximo passo é construir um relatório ou painel exibindo os valores que foram coletados.
+
+Para garantir que você esteja atendendo aos [limites recomendados para as métricas Core Web Vitals](/vitals/#core-web-vitals), você precisará que seu relatório exiba o valor de cada métrica no 75º percentil.
+
+Se sua ferramenta de análise não oferece relatórios de percentis como um recurso integrado, você provavelmente ainda poderá obter esses dados manualmente, gerando um relatório que lista cada valor de métrica classificado em ordem crescente. Depois de gerar esse relatório, o resultado que é 75% do caminho através da lista completa e classificada de todos os valores naquele relatório será o 75º percentil para essa métrica, e este será o caso, não importa como você segmente seus dados (por tipo de dispositivo, tipo de conexão, país, etc.).
+
+Se sua ferramenta de análise não fornecer granularidade de relatório em nível de métrica por default, você provavelmente conseguirá o mesmo resultado se sua ferramenta analítica suportar [dimensões personalizadas](https://support.google.com/analytics/answer/2709828). Ao definir um valor de dimensão personalizado único para cada instância de métrica individual que você estiver rastreando, você deverá ser capaz de gerar um relatório, dividido por instâncias de métrica individuais, se incluir a dimensão personalizada na configuração do relatório. Já que cada instância terá um valor de dimensão único, não haverá agrupamento.
+
+O [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) é um exemplo dessa técnica que usa o Google Analytics. O código do relatório é [open source](https://github.com/GoogleChromeLabs/web-vitals-report), portanto, os desenvolvedores podem fazer referência a ele como um exemplo das técnicas descritas nesta seção.
+
+![Capturas de tela do Web Vitals Report](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)
+
+{% Aside %} Dica: a biblioteca JavaScript [`web-vitals`](https://github.com/GoogleChrome/web-vitals) fornece um ID para cada instância de métrica relatada, permitindo a construção de distribuições na maioria das ferramentas de análise. Consulte a documentação da interface [`Metric`](https://github.com/GoogleChrome/web-vitals#metric) para mais detalhes. {% endAside %}
+
+## Envie seus dados na hora certa
+
+Algumas métricas de desempenho podem ser calculadas quando a página termina de carregar, enquanto outras (como CLS) consideram toda a vida útil da página e só produzem um resultado final quando a página começa a ser descarregada.
+
+Isto pode ser problemático, já que os eventos `beforeunload` e `unload` não são confiáveis (especialmente em dispositivos móveis) e seu uso [não](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid) é recomendado (pois podem impedir que uma página seja elegível para o [Cache Back-Forward](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache) ).
+
+Para métricas que rastreiam toda a vida útil de uma página, é melhor enviar qualquer que seja o valor atual da métrica durante o evento `visibilitychange`, sempre que o estado de visibilidade da página mudar para `hidden`. Isto ocorre porque, tão logo o estado de visibilidade da página mudar para `hidden`, não haverá garantia de que qualquer script nessa página poderá ser executado novamente. Isto é particularmente verdadeiro em sistemas operacionais móveis em que o próprio aplicativo do navegador pode ser fechado sem que nenhum callback de página seja disparado.
+
+Observe que os sistemas operacionais móveis geralmente disparam o evento `visibilitychange` ao alternar entre abas, entre aplicações ou ao fechar o próprio aplicativo do navegador. Eles também disparam o evento `visibilitychange` ao fechar uma aba ou navegar para uma nova página. Isto deixa o evento `visibilitychange` muito mais confiável que os eventos `unload` ou `beforeunload`
+
+{% Aside 'gotchas' %} Devido a [alguns bugs de navegador](https://github.com/w3c/page-visibility/issues/59#issue-554880545), existem algumas situações onde o evento `visibilitychange` não dispara. Se você estiver construindo sua própria biblioteca de análise, é importante estar ciente desses bugs. Observe que a biblioteca JavaScript [web-vitals](https://github.com/GoogleChrome/web-vitals) é responsável por todos esses bugs. {% endAside %}
+
+## Monitore o desempenho ao longo do tempo
+
+Depois de atualizar sua implementação de análise para rastrear e relatar as métricas Core Web Vitals, a próxima etapa é rastrear como as mudanças no seu site afetam o desempenho ao longo do tempo.
+
+### Faça versionamento das suas alterações
+
+Uma abordagem ingênua (e, em última análise, não confiável) para rastrear mudanças é implantar as alterações na produção e depois assumir que todas as métricas recebidas após a data de implantação correspondem ao novo site e todas as métricas recebidas antes da data de implantação correspondem ao site antigo. No entanto, vários fatores (incluindo cache de HTTP, service workers ou uma camada CDN) podem impedir que isto funcione.
+
+Uma abordagem muito melhor é criar uma versão exclusiva para cada mudança implementada e, em seguida, rastrear essa versão na sua ferramenta de análise. A maioria das ferramentas de análise oferece suporte à configuração de uma versão. Se a sua não tiver esse recurso, você pode criar uma dimensão personalizada e definir essa dimensão como sendo sua versão implementada.
+
+### Faça experimentos
+
+Você pode levar o controle de versão um passo adiante, rastreando várias versões (ou experimentos) ao mesmo tempo.
+
+Se sua ferramenta de análise permite definir grupos de experimentos, use esse recurso. Caso contrário, você pode usar dimensões personalizadas para garantir que cada um de seus valores de métrica possa ser associado a um grupo de experimentos específico em seus relatórios.
+
+Com a experimentação implementada em suas análises, você pode implementar uma mudança experimental num subconjunto de seus usuários e comparar o desempenho dessa mudança com o desempenho dos usuários no grupo de controle. Depois de ter certeza de que uma mudança realmente melhora o desempenho, você pode então implementá-la para todos os usuários.
+
+{% Aside %} Os grupos de experimentos devem sempre ser definidos no servidor. Evite realizar qualquer experimento ou qualquer ferramenta de teste A/B que rode no cliente. Essas ferramentas normalmente bloquearão a renderização até que o grupo de experimentos de um usuário seja determinado, o que pode prejudicar seus tempos de LCP. {% endAside %}
+
+## Certifique-se de que a medição não afete o desempenho
+
+Ao medir o desempenho em usuários reais, é absolutamente crítico que qualquer código de medição de desempenho que você esteja executando não afete negativamente o desempenho de sua página. Se isto acontecer, quaisquer conclusões que você tente obter sobre como seu desempenho afeta seus negócios não serão confiáveis, pois você nunca saberá se a presença do código de análise em si está causando o maior impacto negativo.
+
+Sempre siga estes princípios ao implantar código de análise RUM em seu site de produção:
+
+### Adie suas análises
+
+O código analítico deve sempre ser carregado de forma assíncrona e sem bloqueio e, geralmente, deve ser carregado por último. Se você carregar seu código analítico de forma que cause bloqueio, ele poderá afetar negativamente a LCP.
+
+Todas as APIs usadas para medir as métricas Core Web Vitals foram projetadas especificamente para suportar carregamento de scripts de forma assíncrona e adiada (por meio da flag [`buffered`](https://www.chromestatus.com/feature/5118272741572608)), portanto, não há necessidade de pressa para carregar seus scripts antecipadamente.
+
+No caso de estar medindo uma métrica que não possa ser calculada posteriormente no cronograma de carregamento da página, você deve embutir *apenas* o código que precisa ser executado no início no bloco `<head>` do seu documento (para que não seja uma [solicitação que bloqueie a renderização](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)) e adiar todo o resto. Não carregue todas as suas análises antecipadamente apenas porque uma única métrica exige.
+
+### Não crie tarefas longas
+
+O código de análise geralmente é executado em resposta à entrada do usuário, mas se seu código de análise está conduzindo muitas medições DOM ou usando outras APIs que demandam uso intensivo do processador, o próprio código de análise pode causar uma resposta de entrada insatisfatória. Além disso, se o arquivo JavaScript que contém o código analítico for grande, a execução desse arquivo pode bloquear o thread principal e afetar negativamente a FID.
+
+### Use APIs não-bloqueantes
+
+APIs como <code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code>
+e
+<code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code> são especificamente projetadas para executar tarefas não críticas de uma forma a não bloquear tarefas críticas para o usuário.
+
+Essas APIs são ótimas ferramentas para usar numa biblioteca de análise RUM.
+
+Em geral, todos os sinalizadores de análise devem ser enviados usando a API `sendBeacon()` (se disponível), e todos os códigos de medição analíticos passivos devem ser executados durante períodos ociosos.
+
+{% Aside %} Para obter orientação sobre como maximizar o uso do tempo ocioso, garantindo ao mesmo tempo que o código possa ser executado com urgência quando necessário (como quando um usuário está descarregando a página), consulte o padrão [idle-until-urgent.](https://philipwalton.com/articles/idle-until-urgent/) {% endAside %}
+
+### Não rastreie mais do que você precisa
+
+O navegador expõe muitos dados de desempenho, mas só porque os dados estão disponíveis não significa necessariamente que você deve registrá-los e enviá-los aos seus servidores analíticos.
+
+Por exemplo, a [Resource Timing API](https://w3c.github.io/resource-timing/) fornece dados de tempo detalhados para cada recurso carregado em sua página. No entanto, é improvável que todos esses dados sejam necessários ou úteis para melhorar o desempenho do carregamento de recursos.
+
+Resumindo, não apenas rastreie os dados porque eles estão lá, certifique-se de que os dados serão usados antes de consumir recursos para rastreá-los.
diff --git a/src/site/content/pt/blog/vitals-measurement-getting-started/index.md b/src/site/content/pt/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..d7c6cfb013f
--- /dev/null
+++ b/src/site/content/pt/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: Introdução à medição de Web Vitals
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: Gráfico mensal sobreposto com cronômetros identificados como LCP, FID e CLS.
+description: Aprenda como medir as Web Vitals do seu site em ambientes de mundo real e de laboratório.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Coletar dados sobre as Web Vitals do seu site é o primeiro passo para melhorá-las. Uma análise completa coletará dados de desempenho tanto de ambientes do mundo real como do ambiente de laboratório. A medição das Web Vitals requer mudanças mínimas de código e pode ser realizada usando ferramentas gratuitas.
+
+## Medição de Web Vitals usando dados RUM
+
+Os dados do [Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring) - RUM (monitoração de usuários reais), também conhecidos como dados de campo, capturam o desempenho experimentado pelos usuários reais de um site. Os dados RUM são os que o Google usa para determinar se um site atende aos [limites recomendados do Core Web Vitals.](/vitals/)
+
+### Introdução
+
+Se você não tiver uma configuração RUM, as ferramentas a seguir irão lhe fornecer dados sobre o desempenho do seu site no mundo real. Todas essas ferramentas são baseadas no mesmo conjunto de dados subjacente (o [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/)), mas têm casos de uso ligeiramente diferentes:
+
+- **PageSpeed Insights (PSI)**: o [PageSpeed Insights](https://pagespeed.web.dev/) produz relatórios sobre o desempenho agregado no nível da página e no nível da origem nos últimos 28 dias. Além disso, fornece sugestões sobre como melhorar o desempenho. Se você está procurando uma única ferramenta para começar a medir e melhorar os Web Vitals do seu site, recomendamos auditá-lo com o PSI. O PSI está disponível na [web](https://pagespeed.web.dev/) e como [API](https://developers.google.com/speed/docs/insights/v5/get-started).
+- **Console de Busca**: o [Console de Busca](https://search.google.com/search-console/welcome) gera relatórios de dados de desempenho por página. Isso o torna adequado para identificar páginas específicas que precisam de melhorias. Ao contrário do PageSpeed Insights, os relatórios do Console de Busca incluem dados históricos de desempenho. O Console de Busca só pode ser usado com sites de sua propriedade e cuja propriedade possa ser verificada.
+- **Painel CrUX** : o [painel CrUX](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard) é um painel pré-construído que apresenta dados CrUX para uma origem de sua escolha. Ele é baseado no Data Studio e o processo de configuração leva cerca de um minuto. Em comparação com o PageSpeed Insights e o Console de Busca, os relatórios do painel CrUX incluem mais dimensões, por exemplo, os dados podem ser divididos por dispositivo e tipo de conexão.
+
+É importante notar que, embora as ferramentas listadas acima sejam adequadas para "começar" a medir as Web Vitals, elas também podem ser úteis em outros contextos. Em particular, tanto CrUX e como o PSI estão disponíveis como API e podem ser usados para [construir painéis](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o) e outros relatórios.
+
+### Coletando dados RUM
+
+Embora as ferramentas baseadas em CrUX sejam um bom ponto de partida para investigar o desempenho das Web Vitals, é altamente recomendável complementá-las com seus próprios dados RUM. Os dados RUM que você mesmo coleta podem fornecer feedback mais detalhado e imediato sobre o desempenho do seu site. Isso facilita a identificação de problemas e o teste de possíveis soluções.
+
+{% Aside %} Fontes de dados baseadas em CrUX relatam dados usando uma granularidade de aproximadamente um mês, no entanto, os detalhes variam ligeiramente dependendo da ferramenta. Por exemplo, o PSI e o Console de Busca relatam o desempenho observado nos últimos 28 dias, enquanto o dataset CrUX e o painel fazem a divisão por mês. {% endAside %}
+
+Você pode coletar seus próprios dados RUM usando um provedor RUM dedicado ou configurando suas próprias ferramentas.
+
+Provedores RUM dedicados se especializam em coletar e relatar dados RUM. Para usar o Core Web Vitals com esses serviços, pergunte ao seu provedor RUM sobre a ativação do monitoramento do Core Web Vitals para o seu site.
+
+Se você não tiver um provedor RUM, poderá aumentar sua configuração de análise existente para coletar e relatar essas métricas usando a [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals). Este método é explicado em mais detalhes abaixo.
+
+### A biblioteca JavaScript web-vitals
+
+Se você estiver implementando sua própria configuração RUM para Web Vitals, a maneira mais fácil de coletar medições do Web Vitals é usar a biblioteca JavaScript [`web-vitals`](https://github.com/GoogleChrome/web-vitals). A `web-vitals` é uma pequena biblioteca modular (~1 KB) que fornece uma API conveniente para coletar e relatar cada uma das métricas das Web Vitals [mensuráveis em campo.](/user-centric-performance-metrics/#in-the-field)
+
+As métricas que compõem as Web Vitals não são todas expostas diretamente pelas APIs de desempenho integradas do navegador, mas sim construídas sobre elas. Por exemplo, a métrica [Cumulative Layout Shift (CLS)](/cls/) é implementada usando a [Layout Instability API](https://wicg.github.io/layout-instability/). Ao usar a biblioteca `web-vitals`, você não precisa se preocupar em implementar essas métricas por conta própria; ela também garante que os dados coletados correspondam à metodologia e às práticas recomendadas para cada métrica.
+
+Para mais informações sobre a implementação da biblioteca `web-vitals`, consulte a [documentação](https://github.com/GoogleChrome/web-vitals) e o guia [Práticas recomendadas para medir as métricas Web Vitals em campo](/vitals-field-measurement-best-practices/).
+
+### Agregação de dados
+
+É essencial que você relate as medições coletadas pela biblioteca `web-vitals`. Se esses dados forem medidos, mas não relatados, você nunca vai vê-los. A documentação da `web-vitals` inclui exemplos que mostram como enviar os dados para [um endpoint de API genérico](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint), [Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics) ou [Google Tag Manager](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager).
+
+Se você já tem uma ferramenta de relatórios favorita, considere usá-la. Caso contrário, o Google Analytics é gratuito e pode ser usado para essa finalidade.
+
+Ao considerar qual ferramenta usar, é importante pensar sobre quem precisará ter acesso aos dados. Normalmente, as empresas obtêm os maiores ganhos de desempenho quando toda a empresa, em vez de um único departamento, tem interesse em melhorar o desempenho. Consulte [Corrigindo a velocidade multifuncional de um site](/fixing-website-speed-cross-functionally/) para saber como conseguir a adesão de diferentes departamentos.
+
+### Interpretação dos dados
+
+Ao analisar os dados de desempenho, é importante prestar atenção às caudas da distribuição. Os dados RUM geralmente revelam que o desempenho varia bastante: alguns usuários têm experiências rápidas enquanto outros têm experiências lentas. No entanto, usar a mediana para resumir os dados pode mascarar facilmente esse comportamento.
+
+Com relação às métricas Web Vitals, o Google usa a porcentagem de experiências "boas", em vez de estatísticas como medianas ou médias, para determinar se um site ou página atende aos limites recomendados. Especificamente, para considerar que um site ou página atingiu os limites das métricas Core Web Vitals, 75% das visitas à página devem atender ao limite "bom" para cada métrica.
+
+## Medição de Web Vitals usando dados de laboratório
+
+[Os dados de laboratório](/user-centric-performance-metrics/#in-the-lab) , também conhecidos como dados sintéticos, são coletados de um ambiente controlado, em vez de usuários reais. Ao contrário dos dados RUM, os dados de laboratório podem ser coletados de ambientes de pré-produção e, portanto, incorporados aos workflows do desenvolvedor e processos de integração contínua. Exemplos de ferramentas que coletam dados sintéticos são Lighthouse e WebPageTest.
+
+### Considerações
+
+Sempre haverá discrepâncias entre os dados RUM e os dados do laboratório, principalmente se as condições da rede, o tipo de dispositivo ou a localização do ambiente do laboratório forem significativamente diferentes daqueles usados pelos usuários. No entanto, quando se trata de coletar dados de laboratório sobre métricas Web Vitals em particular, há algumas considerações específicas importantes que devem ser observadas:
+
+- **Cumulative Layout Shift - CLS (deslocamento cumulativo de layout):** A métrica [Cumulative Layout Shift](/cls/) medida em ambientes de laboratório pode ser artificialmente menor do que a CLS observada nos dados RUM. A CLS é definida como a "soma total de todas as pontuações de deslocamento de layout individual para cada deslocamento de layout inesperado que ocorre *durante toda a vida útil da página*". No entanto, a vida útil de uma página normalmente é muito diferente, dependendo se ela está sendo carregada por um usuário real ou por uma ferramenta de medição de desempenho sintética. Muitas ferramentas de laboratório apenas carregam a página: elas não interagem com ela. Como resultado, elas apenas capturam deslocamentos de layout que ocorrem durante o carregamento inicial da página. Em contraste, a CLS medida pelas ferramentas RUM captura [deslocamentos inesperados de layout](/cls/#expected-vs-unexpected-layout-shifts) que ocorrem durante toda a vida útil da página.
+- **First Input Delay - FID (atraso da primeira entrada):** A métrica [First Input Delay](/fid/) não pode ser medida em ambientes de laboratório porque requer interações do usuário com a página. Como resultado, a métrica [Total Blocking Time](/tbt/) (TBT) é o proxy de laboratório recomendado para o FID. A TBT mede a "quantidade total de tempo entre a Primeira renderização de conteúdo e o Tempo até a interação, durante a qual a página é bloqueada, ou seja, impedida de responder à entrada do usuário". Embora a FID e a TBT sejam calculados de forma diferente, ambas são reflexos de um thread principal bloqueado durante o processo de bootstrap. Quando o thread principal é bloqueado, o navegador demora para responder às interações do usuário. A FID mede o atraso, se houver, que ocorre na primeira vez que um usuário tenta interagir com uma página.
+
+### Ferramental
+
+Essas ferramentas podem ser usadas para coletar medições de laboratório de Web Vitals:
+
+- **Web Vitals Chrome Extension:** O [Web Vitals Chrome Extension](https://github.com/GoogleChrome/web-vitals-extension) mede e reporta as Core Web Vitals (LCP, FID, e CLS) para uma determinada página. Esta ferramenta se destina a fornecer aos desenvolvedores feedback de desempenho em tempo real conforme eles fazem alterações no código.
+- **Lighthouse:** O Lighthouse relata sobre LCP, CLS e TBT e também destaca possíveis melhorias de desempenho. O Lighthouse está disponível no Chrome DevTools, como uma extensão do Chrome e como um pacote npm. O Lighthouse também pode ser incorporado a workflows de integração contínua por meio do [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci).
+- **WebPageTest:** O [WebPageTest](https://webpagetest.org/) inclui Web Vitals como parte de seu relatório padrão. O WebPageTest é útil para coletar informações sobre Web Vitals sob condições específicas de dispositivo e rede.
diff --git a/src/site/content/pt/blog/vitals-tools/index.md b/src/site/content/pt/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..d637560e638
--- /dev/null
+++ b/src/site/content/pt/blog/vitals-tools/index.md
@@ -0,0 +1,157 @@
+---
+title: Ferramentas para medir as Core Web Vitals
+subhead: Suas ferramentas de desenvolvimento favoritas agora podem medir as Core Web Vitals.
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: Leia sobre o recém-anunciado suporte à medição das Core Web Vitals em ferramentas populares de desenvolvimento web, como Lighthouse, PageSpeed Insights, Chrome UX Report e muitos outros.
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Logotipo da Chrome User Experience, logotipo do PageSpeed Insights, logotipo do Lighthouse, logotipo do Console de Busca, logotipo do Chrome DevTools, logotipo da extensão Web Vitals.
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+A recém anunciada iniciativa [Web Vitals](/vitals/) fornece orientação unificada sobre sinais de qualidade essenciais para que todos os sites possam oferecer uma excelente experiência ao usuário na web. Estamos felizes em anunciar que **todas as ferramentas populares do Google para desenvolvedores web agora oferecem suporte à medição das Core Web Vitals**, ajudando você a diagnosticar e corrigir problemas relacionados à experiência do usuário com mais facilidade. Isto inclui [Lighthouse](https://github.com/GoogleChrome/lighthouse), [PageSpeed Insights](https://pagespeed.web.dev/), [Chrome DevTools](https://developer.chrome.com/docs/devtools/), [Console de Busca](https://search.google.com/search-console/about), [ferramenta de medição web.dev](/measure/), a [extensão Web Vitals Chrome](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) e uma nova API (!) [Chrome UX Report](https://developer.chrome.com/docs/crux/).
+
+Com a Pesquisa do Google agora incluindo Core Web Vitals como a base para avaliar a [experiência da página](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html), é importante que essas métricas estejam tão disponíveis e acionáveis quanto possível.
+
+<figure>   {% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Resumo das ferramentas de pesquisa e do Chrome que oferecem suporte às métricas Core Web Vitals", width="800", height="509" %}</figure>
+
+{% Aside 'key-term' %} **Ferramentas de laboratório** fornecem informações sobre a provável experiência de um *usuário em potencial* no seu site e oferecem resultados reproduzíveis para depuração. As **ferramentas de campo** fornecem insight sobre a experiência de *usuários reais* com o seu site; este tipo de medição é freqüentemente chamado de Monitoramento Real do Usuário (RUM). Cada [ferramenta de laboratório ou de campo](/how-to-measure-speed/#lab-data-vs-field-data) oferece um valor distinto para otimizar a experiência do usuário. {% endAside %}
+
+Para começar sua jornada otimizando a experiência do usuário com Core Web Vitals, experimente o seguinte fluxo de trabalho:
+
+- Use o novo relatório Core Web Vitals do Console de Busca para identificar grupos de páginas que requerem atenção (com base nos dados de campo).
+- Depois de identificar as páginas que precisam ser trabalhadas, use o PageSpeed Insights (implementado pelo Lighthouse e Chrome UX Report) para diagnosticar problemas de laboratório e de campo numa página. O PageSpeed Insights (PSI) está disponível por meio do Console de Busca mas você também pode inserir uma URL diretamente no PSI.
+- Pronto para otimizar seu site localmente no laboratório? Use o Lighthouse e o Chrome DevTools para medir as Core Web Vitals e obtenha orientações práticas sobre exatamente o que corrigir. A extensão Web Vitals do Chrome pode fornecer uma visão em tempo real das métricas no desktop.
+- Precisa de um painel personalizado das Core Web Vitals? Use a última versão do CrUX Dashboard ou a nova Chrome UX Report API para dados de campo ou a PageSpeed Insights API para dados de laboratório.
+- Procurando orientação? O serviço web.dev/measure pode realizar medições na sua página e mostrar a você um conjunto priorizado de guias e codelabs para otimização, usando dados PSI.
+- Por fim, use o Lighthouse CI em solicitações pull para garantir que não haja regressões nas Core Web Vitals antes de implantar uma mudança em produção.
+
+Com esta introdução, vamos mergulhar nas atualizações específicas para cada ferramenta!
+
+### Lighthouse
+
+O Lighthouse é uma ferramenta automatizada de auditoria de sites que ajuda os desenvolvedores a diagnosticar problemas e identificar oportunidades para melhorar a experiência do usuário em seus sites. Ele mede várias dimensões da qualidade da experiência do usuário num ambiente de laboratório, incluindo desempenho e acessibilidade. A versão mais recente do Lighthouse ([6.0](/lighthouse-whats-new-6.0/), lançada em meados de maio de 2020) inclui auditorias adicionais, novas métricas e pontuação de desempenho.
+
+<figure>   {% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="Lighthouse 6.0 mostrando as métricas mais recentes das Core Web Vitals", width="800", height="527" %}</figure>
+
+O Lighthouse 6.0 apresenta três novas métricas para o relatório. Duas dessas novas métricas - [Largest Contentful Paint](/lcp/) (LCP) e [Cumulative Layout Shift](/cls/) (CLS) - são implementações de laboratório das Core Web Vitals e fornecem importantes informações de diagnóstico para otimizar a experiência do usuário. Dada a sua importância para avaliar a experiência do usuário, as novas métricas não são apenas medidas e incluídas no relatório, mas também são levadas em consideração no cálculo da pontuação de desempenho.
+
+A terceira nova métrica incluída no Lighthouse - [Total Blocking Time](/tbt/) (TBT) - se correlaciona bem com a métrica de campo [First Input Delay](/fid/) (FID), outra métrica Core Web Vitals. Seguir as recomendações fornecidas no relatório Lighthouse e otimizar com base nas suas pontuações permite que você forneça a melhor experiência possível aos seus usuários.
+
+Todos os produtos que o Lighthouse oferece são atualizados para refletir a versão mais recente, incluindo o [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci), que permite medir facilmente seus Core Web Vitals em solicitações pull antes de realizar merge e da implantação.
+
+<figure>   {% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="Lighthouse CI exibindo uma visualização de diff com a Largest Contentful Paint", width="800", height="498" %}</figure>
+
+Para saber mais sobre as últimas atualizações do Lighthouse, confira nosso artigo do blog [Novidades do Lighthouse 6.0.](/lighthouse-whats-new-6.0/)
+
+### PageSpeed Insights
+
+Relatórios do [PageSpeed Insights](https://pagespeed.web.dev/) (PSI) sobre o desempenho de laboratório e de campo de uma página em dispositivos móveis e desktop. A ferramenta fornece uma visão geral sobre a experiência na página por usuários do mundo real (fornecida pelo Chrome UX Report) e um conjunto de recomendações acionáveis sobre como o proprietário de um site pode melhorar a experiência da página (fornecidas pelo Lighthouse).
+
+O PageSpeed Insights e a [API PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) também foram atualizados para usar o Lighthouse 6.0 internamente e agora suportam a medição das Core Web Vitals tanto nas seções de laboratório como de campo do relatório! As Core Web Vitals são anotadas com uma fita azul, conforme mostrado abaixo.
+
+<figure>   {% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="PageSpeed Insights com dados da Core Web Vitals exibidos para campo e laboratório", width="800", height="873" %}</figure>
+
+Embora o [Console de Busca](https://search.google.com/search-console/) proporcione aos proprietários de sites uma excelente visão geral dos grupos de páginas que precisam de atenção, o PSI ajuda a identificar oportunidades por página para melhorar a experiência de cada página. No PSI, você é capaz de ver claramente se sua página alcança ou não os limites que garantem uma boa experiência em todas as Core Web Vitals na parte superior do relatório, indicados por **passa na avaliação das Core Web Vitals** ou **não passa na avaliação das Core Web Vitals**.
+
+### CrUX
+
+O [Chrome UX Report](https://developer.chrome.com/docs/crux/) (CrUX) é um dataset público composto de dados reais da experiência do usuário em milhões de sites. Ele mede as versões de campo de todas as Core Web Vitals. Ao contrário dos dados de laboratório, os dados do CrUX vêm de [usuários](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) autorizados em campo. Usando esses dados, os desenvolvedores são capazes de compreender a distribuição de experiências do usuário do mundo real em seus próprios sites ou até mesmo em sites de concorrentes. Mesmo se você não tiver RUM no seu site, o CrUX pode lhe fornecer uma maneira rápida e fácil de avaliar suas Core Web Vitals. O [dataset CrUX no BigQuery](https://developer.chrome.com/docs/crux/bigquery/) inclui dados de desempenho refinados para todos os Core Web Vitals e está disponível em snapshots mensais no nível de origem.
+
+A única maneira de conhecer o desempenho real do seu site para os usuários é medindo seu desempenho no campo à medida que esses usuários carregam suas páginas e interagem com elas. Esse tipo de medição é geralmente chamado de Monitoramento Real do Usuário - ou RUM (abreviação de Real User Monitoring). Mesmo se você não tiver RUM no seu site, o CrUX pode lhe fornecer uma maneira rápida e fácil de avaliar suas Core Web Vitals.
+
+**Apresentando a API CrUX**
+
+Hoje temos o prazer de anunciar a [API CrUX](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/), uma solução rápida e gratuita para integrar facilmente seus workflows de desenvolvimento com medições de qualidade a nível de URL e origem para as seguintes métricas de campo:
+
+- Largest Contentful Paint
+- Cumulative Layout Shift
+- First Input Delay
+- First Contentful Paint
+
+Os desenvolvedores podem fazer uma pesquisa para localizar uma origem ou URL e segmentar os resultados por diferentes fatores de forma. A API é atualizada diariamente e resume os dados dos 28 dias anteriores (diferentemente do conjunto de dados do BigQuery, que é agregado mensalmente). A API também tem as mesmas cotas de API públicas relaxadas que aplicamos na nossa outra API, a PageSpeed Insights API (25.000 solicitações por dia).
+
+Abaixo está uma [demonstração](https://developer.chrome.com/blog/chrome-ux-report-api/) usando a API CrUX para visualizar as métricas Core Web Vitals com distribuições **boa**, **precisa melhorar** e **ruim** :
+
+<figure>   {% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Demonstração da Chrome User Experience Report API demo mostrando métricas Core Web Vitals", width="800", height="523" %}</figure>
+
+Em versões futuras, planejamos expandir a API para permitir o acesso a dimensões e métricas adicionais do dataset CrUX.
+
+**Painel CrUX reformulado**
+
+O novo [Painel CrUX](http://g.co/chromeuxdash) permite que você acompanhe facilmente o desempenho de uma origem ao longo do tempo, Agora você também pode usá-lo para monitorar as distribuições de todas as métricas Core Web Vitals. Para começar a usar o painel, veja nosso [tutorial](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) em web.dev.
+
+<figure>   {% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="Painel do Chrome UX Report exibindo as métricas Core Web Vitals numa nova página de destino", width="800", height="497" %}</figure>
+
+Introduzimos uma nova página de destino Core Web Vitals para tornar ainda mais fácil o acompanhamento do desempenho do seu site. Agradecemos seus comentários sobre todas as ferramentas CrUX; para compartilhar suas ideias e perguntas, entre em contato conosco através da conta Twitter [@ChromeUXReport](https://twitter.com/chromeuxreport) ou no [Google Group](https://groups.google.com/a/chromium.org/g/chrome-ux-report).
+
+### Painel de desempenho do Chrome DevTools
+
+**Depuração de eventos de mudança de layout na seção Experience**
+
+O painel Chrome DevTools **Performance** tem uma nova seção **[Experience](https://developers.google.com/web/updates/2020/05/devtools#cls)** que pode ajudá-lo a detectar mudanças inesperadas de layout. Isto é útil para localizar e corrigir problemas de instabilidade visual na sua página que contribuem para a Cumulative Layout Shift.
+
+<figure>   {% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="Cumulative Layout Shift exibida com registros vermelhos no painel Performance", width="800", height="517" %}</figure>
+
+Selecione um deslocamento de layout para visualizar seus detalhes na aba **Resumo**. Para visualizar onde ocorreu a mudança, passe o mouse sobre os campos **Movido de** e **Movido para**.
+
+**Depuração da prontidão para interação com o Total Blocking Time no rodapé**
+
+A métrica Total Blocking Time (TBT) pode ser medida em ferramentas de laboratório e é um excelente proxy para a First Input Delay. A TBT mede a quantidade total de tempo entre a [First Contentful Paint (FCP)](/fcp/) e a [Time to Interactive (TTI)](/tti/) onde a thread principal foi bloqueada por tempo suficiente para evitar a responsividade da entrada. As otimizações de desempenho que melhoram a TBT no laboratório devem melhorar a FID em campo.
+
+<figure>   {% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="Total Blocking Time exibido no rodapé do painel de desempenho do DevTools", width="800", height="517" %}</figure>
+
+A TBT agora é mostrada no rodapé do painel **Chrome DevTools Performance** quando você mede o desempenho da página:
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. Clique em **Gravar**.
+2. Recarregue a página manualmente.
+3. Espere a página carregar e pare a gravação.
+
+Para obter mais informações, veja [Novidades do DevTools (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls).
+
+### Console de Busca
+
+O novo [relatório Core Web Vitals](https://support.google.com/webmasters/answer/9205520) no Console de Busca ajuda a identificar grupos de páginas no seu site que requerem atenção, com base em dados do mundo real (campo) do CrUX. O desempenho da URL é agrupado por status, tipo de métrica e grupo de URL (grupos de páginas web semelhantes).
+
+<figure>   {% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Novo relatório do Core Web Vitals do Console de Busca", width="800", height="1000" %}</figure>
+
+O relatório é baseado nas três métricas Core Web Vitals: LCP, FID e CLS. Se uma URL não possuir uma quantidade mínima de dados de relatório para essas métricas, ela será omitida do relatório. Experimente o novo relatório para obter uma visão holística do desempenho de sua origem.
+
+Depois de identificar um tipo de página com problemas relacionados às Core Web Vitals, você pode usar o PageSpeed Insights para obter sugestões de otimização específicas para páginas representativas.
+
+#### web.dev
+
+[web.dev/measure](/measure/) permite medir o desempenho de sua página ao longo do tempo, fornecendo uma lista priorizada de guias e codelabs sobre como melhorar. A medição é fornecida pelo PageSpeed Insights. A ferramenta measure agora também oferece suporte às métricas Core Web Vitals, conforme mostrado abaixo:
+
+<figure>   {% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="Meça as Core Web Vitals ao longo do tempo e obtenha orientação priorizada com a ferramenta web.dev measure", width="800", height="459" %}</figure>
+
+### Extensão Web Vitals
+
+A extensão Web Vitals mede as três métricas Core Web Vitals em tempo real para o Google Chrome (desktop). Isto é útil para detectar problemas no início do workflow de desenvolvimento e como uma ferramenta de diagnóstico para avaliar o desempenho das Core Web Vitals enquanto você navega na web.
+
+A extensão agora está disponível para instalação na [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)! Esperamos que você ache ela útil. Agradecemos quaisquer contribuições para melhorá-la, bem como feedback sobre o repositório [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) do projeto.
+
+<figure>   {% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Core Web Vitals exibidas em tempo real com a extensão Web Vitals Chrome", width="800", height="459" %}</figure>
+
+#### Destaques rápidos
+
+Isto é um resumo! O que você pode fazer em seguida:
+
+- Use o **Lighthouse** no DevTools para otimizar sua experiência do usuário e garantir que você esteja se preparando para o sucesso com as Core Web Vitals em campo.
+- Use o **PageSpeed Insights** para comparar o desempenho das suas Core Web Vitals no laboratório e em campo.
+- Experimente a nova **Chrome User Experience Report API** para avaliar com facilidade o desempenho de sua origem e URL em relação às Core Web Vitals nos últimos 28 dias.
+- Use a seção **Experience** e o rodapé no painel **Performance** do DevTools para mergulhar fundo e depurar em relação a Core Web Vitals específicas.
+- Use **o relatório Core Web Vitals do Console de Busca** para obter um resumo do desempenho de suas origens em campo.
+- Use a **Extensão Web Vitals** para rastrear o desempenho de uma página em relação às métricas Core Web Vitals em tempo real.
+
+Falaremos mais sobre nossas ferramentas Core Web Vitals na [web.dev Live](/live/) em junho. Inscreva-se para ficar por dentro do evento!
+
+~ por Elizabeth e Addy, WebPerf Janitors
diff --git a/src/site/content/pt/blog/wake-lock/index.md b/src/site/content/pt/blog/wake-lock/index.md
new file mode 100644
index 00000000000..f955eae965f
--- /dev/null
+++ b/src/site/content/pt/blog/wake-lock/index.md
@@ -0,0 +1,211 @@
+---
+title: Fique acordado com a API Screen Wake Lock
+subhead: A API Screen Wake Lock fornece uma maneira de evitar que os dispositivos escurecem ou bloqueiem a tela quando um aplicativo precisa continuar em execução.
+authors:
+  - petelepage
+  - thomassteiner
+description: Para evitar esgotar da bateria, a maioria dos dispositivos entra em descanso rapidamente quando fica ociosa. Embora isso seja normal na maioria das vezes, alguns aplicativos precisam manter a tela ativada para concluir algum trabalho. A API Screen Wake Lock fornece uma maneira de evitar que o dispositivo escureça ou bloqueie a tela quando um aplicativo precisa continuar em execução.
+date: 2018-12-18
+updated: 2021-02-23
+hero: image/admin/zMncl9cgWdAc8W24yav3.jpg
+hero_position: Centro
+alt: |2
+
+  Gato dormindo. Foto de Kate Stone Matheson no Unsplash.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+{% Aside 'success' %} A API Screen Wake Lock, parte do [projeto de recursos](https://developer.chrome.com/blog/capabilities/) do Google, lançada no Chrome 84. {% endAside %}
+
+## O que é a API Screen Wake Lock? {: #what }
+
+Para evitar esgotar a bateria, a maioria dos dispositivos adormece rapidamente quando fica ociosa. Embora isso seja normal na maioria das vezes, alguns aplicativos precisam manter a tela ativada para concluir seu trabalho. Os exemplos incluem aplicativos de culinária que mostram as etapas de uma receita ou um jogo como o [Ball Puzzle](https://ball-puzzle.appspot.com/), que usa as APIs de movimento do dispositivo para entrada.
+
+A [API Screen Wake Lock](https://w3c.github.io/wake-lock/) fornece uma maneira de evitar que o dispositivo escureça e bloqueie a tela. Esse recurso permite novas experiências que, até agora, exigiam um aplicativo específico da plataforma.
+
+A API Screen Wake Lock reduz a necessidade de soluções alternativas que consomem muita energia. Ele aborda as deficiências de uma API mais antiga que se limitava a simplesmente manter a tela ligada e tinha uma série de problemas de segurança e privacidade.
+
+## Casos de uso sugeridos para a API Screen Wake Lock {: #use-cases}
+
+O [RioRun](https://www.theguardian.com/sport/2016/aug/06/rio-running-app-marathon-course-riorun), um aplicativo da web desenvolvido pelo [The Guardian](https://www.theguardian.com/), era um caso de uso perfeito (embora não esteja mais disponível). O aplicativo leva você por um áudio tour virtual pelo Rio de Janeiro, acompanhando o percurso da maratona olímpica de 2016. Sem os wake locks, as telas dos usuários desligariam com frequência durante o tour, tornando-o difícil de usar.
+
+Claro, há muitos outros casos de uso:
+
+- Um aplicativo de receitas que mantém a tela ligada enquanto você assa um bolo ou prepara o jantar
+- Um aplicativo de cartão de embarque ou bilhete que mantém a tela ligada até que o código de barras seja lido
+- Um aplicativo estilo quiosque que mantém a tela continuamente
+- Um aplicativo de apresentação baseado na web que mantém a tela ligada durante uma apresentação
+
+{% Aside 'success' %} Depois de implementar a API Screen Wake Lock, *Betty Crocker*, um grande site de culinária dos EUA, observou um aumento de 300% nos indicadores de intenção de compra de seus usuários. Leia mais no [estudo de caso 🍰 Betty Crocker](/betty-crocker/). {% endAside %}
+
+## Status atual {: #status}
+
+<div></div>
+<table data-md-type="table">
+<thead data-md-table-header><tr data-md-type="table_row">
+<th data-md-type="table_cell">Degrau</th>
+<th data-md-type="table_cell">Status</th>
+</tr></thead>
+<tbody data-md-table-body>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">1. Crie um explicador</td>
+<td data-md-type="table_cell">N / D</td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">2. Crie o rascunho inicial das especificações</td>
+<td data-md-type="table_cell"><a href="https://w3c.github.io/wake-lock/" data-md-type="link">Completo</a></td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">3. Reúna feedback e repita o design</td>
+<td data-md-type="table_cell"><a href="#feedback" data-md-type="link">Completo</a></td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell">4. Teste de origem</td>
+<td data-md-type="table_cell">Completo</td>
+</tr>
+<tr data-md-type="table_row">
+<td data-md-type="table_cell"><strong data-md-type="double_emphasis">5. Lançamento</strong></td>
+<td data-md-type="table_cell"><strong data-md-type="double_emphasis">Completo</strong></td>
+</tr>
+</tbody>
+</table>
+<div data-md-type="block_html"></div>
+
+{% Aside %} Muito obrigado ao pessoal da Intel, especificamente Mrunal Kapade e Raphael Kubo da Costa, por implementar esta API. O Chrome depende de uma comunidade de committers trabalhando juntos para levar o projeto Chromium adiante. Nem todo committer do Chromium é um Googler, e esses colaboradores merecem um reconhecimento especial! {% endAside %}
+
+## Usando a API Screen Wake Lock {: #use}
+
+### Tipos de wake lock {: #wake-lock-types}
+
+A API Screen Wake Lock fornece atualmente apenas um tipo de wake lock: a `screen`.
+
+#### `screen` wake lock
+
+Um `screen` evita que a tela do dispositivo desligue para que o usuário possa ver as informações que são exibidas na tela.
+
+{% Aside 'caution' %} Uma versão anterior da especificação permitia um `system` que evita que a CPU do dispositivo entre no modo de espera para que seu aplicativo possa continuar em execução. Decidimos não prosseguir com esse tipo no momento. {% endAside %}
+
+### Detecção de recursos
+
+O suporte do navegador para a API Screen Wake Lock pode ser testado da seguinte forma:
+
+```js
+if ('wakeLock' in navigator) {
+  // Screen Wake Lock API supported 🎉
+}
+```
+
+### Como obter um wake lock da tela {: #get-wake-lock}
+
+Para solicitar um bloqueio de ativação da tela, você precisa chamar o `navigator.wakeLock.request()` que retorna um objeto `WakeLockSentinel` Você passa este método o tipo de wake lock desejado como um parâmetro, que *atualmente* é limitado apenas a `'screen'` e, portanto, é *opcional*. O navegador pode recusar a solicitação por vários motivos (por exemplo, porque o nível de carga da bateria está muito baixo), portanto, é uma boa prática encerrar a chamada em uma instrução `try…catch`. A mensagem de exceção conterá mais detalhes em caso de falha.
+
+### Liberando um wake lock da tela {: #release-wake-lock}
+
+Você também precisa de uma maneira de liberar o bloqueio de ativação da tela, que é obtido chamando o método `release()` do objeto `WakeLockSentinel`. Se você não armazenar uma referência ao `WakeLockSentinel`, não há como liberar o bloqueio manualmente, mas ele será liberado assim que a guia atual ficar invisível.
+
+Se desejar liberar automaticamente o bloqueio de ativação da tela após um certo período de tempo, você pode usar `window.setTimeout()` para chamar `release()`, conforme mostrado no exemplo abaixo.
+
+```js
+// The wake lock sentinel.
+let wakeLock = null;
+
+// Function that attempts to request a screen wake lock.
+const requestWakeLock = async () => {
+  try {
+    wakeLock = await navigator.wakeLock.request();
+    wakeLock.addEventListener('release', () => {
+      console.log('Screen Wake Lock released:', wakeLock.released);
+    });
+    console.log('Screen Wake Lock released:', wakeLock.released);
+  } catch (err) {
+    console.error(`${err.name}, ${err.message}`);
+  }
+};
+
+// Request a screen wake lock…
+await requestWakeLock();
+// …and release it again after 5s.
+window.setTimeout(() => {
+  wakeLock.release();
+  wakeLock = null;
+}, 5000);
+```
+
+O `WakeLockSentinel` tem uma propriedade chamada `released` que indica se uma sentinela já foi liberada. Seu valor é inicialmente `false` e muda para `true` assim que um `"release"` é despachado. Esta propriedade ajuda os desenvolvedores da web a saber quando um bloqueio foi liberado, para que não precisem controlar isso manualmente. Ele está disponível a partir do Chrome 87.
+
+### O ciclo de vida do wake lock da tela {: #wake-lock-lifecycle}
+
+Ao jogar com a [demonstração do bloqueio de ativação](https://wake-lock-demo.glitch.me/) da tela, você notará que os bloqueios de ativação da tela são sensíveis à [visibilidade da página](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API). Isso significa que o bloqueio de ativação da tela será liberado automaticamente quando você minimizar uma guia ou janela ou sair de uma guia ou janela onde um bloqueio de ativação da tela está ativo.
+
+Para readquirir o bloqueio de ativação da tela, ouça o [`visibilitychange`](https://developer.mozilla.org/docs/Web/API/Document/visibilitychange_event) e solicite um novo bloqueio de ativação da tela quando eles ocorrerem:
+
+```js
+const handleVisibilityChange = async () => {
+  if (wakeLock !== null && document.visibilityState === 'visible') {
+    await requestWakeLock();
+  }
+};
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+```
+
+## Minimize o seu impacto nos recursos do sistema {: #melhores práticas}
+
+Você deve usar um bloqueio de ativação de tela em seu aplicativo? A abordagem que você adota depende das necessidades do seu aplicativo. Independentemente disso, você deve usar a abordagem mais leve possível para seu aplicativo para minimizar seu impacto nos recursos do sistema.
+
+Antes de adicionar um wake lock de tela ao seu aplicativo, considere se seus casos de uso podem ser resolvidos com uma das seguintes soluções alternativas:
+
+- Se seu aplicativo estiver realizando downloads de longa duração, considere o uso de [busca em segundo plano](https://developer.chrome.com/blog/background-fetch/).
+- Se seu aplicativo estiver sincronizando dados de um servidor externo, considere o uso de [sincronização em segundo plano](https://developer.chrome.com/blog/background-sync/).
+
+{% Aside %} Como a maioria das outras APIs da web poderosas, a API Screen Wake Lock está disponível apenas quando servida por **HTTPS**. {% endAside %}
+
+### Demo
+
+Confira a [demonstração do Screen Wake Lock](https://wake-lock-demo.glitch.me/) e o [código-fonte da demonstração](https://wake-lock-demo.glitch.me/). Observe como o bloqueio de ativação da tela é liberado automaticamente quando você alterna entre guias ou aplicativos.
+
+### Screen Wake Locks no gerenciador de tarefas do sistema operacional
+
+Você pode usar o gerenciador de tarefas do sistema operacional para ver se um aplicativo está impedindo o computador de hibernar. O vídeo abaixo mostra o macOS [Activity Monitor](https://support.apple.com/guide/activity-monitor/welcome/mac) indicando que o Chrome tem um wake lock de tela ativo que mantém o sistema ativo.
+
+{% Video src="video/8WbTDNrhLsU0El80frMBGE4eMCD3/YDlxREcGrnBUGC8plN15.mp4", autplay="true", loop="true", width="800" %}
+
+## Feedback {: #feedback}
+
+O [Web Platform Incubator Community Group (WICG)](https://www.w3.org/community/wicg/) e a equipe do Chrome desejam saber mais sobre seus pensamentos e experiências com a API Screen Wake Lock.
+
+### Conte-nos sobre o design da API
+
+Existe algo na API que não funciona conforme o esperado? Ou faltam métodos ou propriedades de que você precisa para implementar sua ideia?
+
+- Registre um problema de especificação no [repositório GitHub da API Screen Wake Lock](https://github.com/w3c/wake-lock/issues) ou adicione suas ideias a um problema existente.
+
+### Comunicar um problema com a implementação
+
+Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação?
+
+- Registre um bug em [https://new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EWakeLock). Certifique-se de incluir o máximo de detalhes possível, fornecer instruções simples para reproduzir o bug e definir *Componentes* como `Blink>WakeLock`. O [Glitch](https://glitch.com) funciona muito bem para compartilhar reproduções rápidas e fáceis.
+
+### Mostrar suporte para a API
+
+Você está planejando usar a API Screen Wake Lock? Seu apoio público ajuda a equipe do Chrome a priorizar os recursos e mostra a outros fornecedores de navegadores como é fundamental apoiá-los.
+
+- Compartilhe como você planeja usar a API no [thread do WICG Discourse](https://discourse.wicg.io/t/wake-lock-api-suppressing-power-management-screensavers/769).
+- Envie um tweet para [@ChromiumDev](https://twitter.com/chromiumdev) usando a hashtag [`#WakeLock`](https://twitter.com/search?q=%23WakeLock&src=typed_query&f=live) e diga-nos onde e como você está usando a API.
+
+## Links úteis {: #helpful}
+
+- Especificação da [recomendação do candidato](https://www.w3.org/TR/wake-lock/) | [Rascunho do Editor](https://w3c.github.io/wake-lock/)
+- [Demonstração do Screen Wake Lock](https://wake-lock-demo.glitch.me/) | [Código-fonte da demonstração do Screen Wake Lock](https://glitch.com/edit/#!/wake-lock-demo?path=script.js:1:0)
+- [Bug de rastreamento](https://bugs.chromium.org/p/chromium/issues/detail?id=257511)
+- [Entrada ChromeStatus.com](https://www.chromestatus.com/feature/4636879949398016)
+- [Experimentando a API Wake Lock](https://medium.com/dev-channel/experimenting-with-the-wake-lock-api-b6f42e0a089f)
+- Componente Blink: [`Blink>WakeLock`](https://chromestatus.com/features#component%3ABlink%3EWakeLock)
+
+## Reconhecimentos
+
+[Imagem do herói](https://unsplash.com/photos/uy5t-CJuIK4) por [Kate Stone Matheson](https://unsplash.com/@kstonematheson) no Unsplash. Vídeo do gerenciador de tarefas cortesia de [Henry Lim](https://twitter.com/henrylim96/status/1359914993399959559).
diff --git a/src/site/content/pt/blog/web-share/index.md b/src/site/content/pt/blog/web-share/index.md
new file mode 100644
index 00000000000..1940d1c5ea1
--- /dev/null
+++ b/src/site/content/pt/blog/web-share/index.md
@@ -0,0 +1,118 @@
+---
+title: Integre com a IU de compartilhamento do sistema operacional através da API Web Share
+subhead: Aplicações Web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que as aplicações específicas da plataforma.
+authors:
+  - joemedley
+date: 2019-11-08
+updated: 2021-07-09
+hero: image/admin/ruvEms3AeSZvlEI01DKo.png
+alt: Uma ilustração que demonstra que aplicações web podem usar a IU de compartilhamento fornecida pelo sistema.
+description: Com a API Web Share, as aplicações web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que aqueles usados pelas aplicações específicas da plataforma. A API Web Share torna possível para aplicações web compartilharem links, texto e arquivos com outras aplicações instaladas no dispositivo da mesma forma que aplicações específicas da plataforma.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+stack_overflow_tag: web-share
+---
+
+Com a API Web Share, as aplicações web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que aqueles usados pelas aplicações específicas da plataforma. A API Web Share torna possível para aplicações web compartilharem links, texto e arquivos com outras aplicações instaladas no dispositivo da mesma forma que aplicações específicas da plataforma.
+
+{% Aside %} Compartilhar é apenas metade da mágica. As aplicações web também podem ser alvos de compartilhamento, o que significa que podem receber dados, links, texto e arquivos de aplicações web ou específicas da plataforma. Veja o post [Receber dados compartilhados](/web-share-target/) para detalhes sobre como registrar sua aplicação como alvo de compartilhamento. {% endAside %}
+
+## Conceitos e uso
+
+<figure data-float="right">   {% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="Selecionador de compartilhamento de nível de sistema com um PWA instalado como opção.", width="370", height="349" %}   <figcaption>  Selecionador de compartilhamento de nível de sistema com um PWA instalado como uma opção.  </figcaption></figure>
+
+### Capacidades e limitações
+
+A Web Share tem os seguintes recursos e limitações:
+
+- Só pode ser usado em um site [acessado via HTTPS](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
+- Precisa ser invocado em resposta a uma ação do usuário, como um clique. Invocá-lo por meio do `onload` é impossível.
+- Pode compartilhar, URLs, texto ou arquivos.
+- Em janeiro de 2021, ele estava disponível nos forks do Safari, Android em Chromium, ChromeOS e Chrome no Windows. O Chrome no MacOS ainda está em desenvolvimento. Consulte [MDN](https://developer.mozilla.org/docs/Web/API/Navigator/share#Browser_compatibility) para obter detalhes.
+
+### Compartilhando links e texto
+
+Para compartilhar links e texto, use o método `share()`, que é um método baseado em promessa com um objeto properties obrigatório. Para evitar que o navegador lance um `TypeError`, o objeto deve conter pelo menos uma das seguintes propriedades: `title`, `text`, `url` ou `files`. Você pode, por exemplo, compartilhar texto sem uma URL ou vice-versa. Permitir todos os três membros aumenta a flexibilidade dos casos de uso. Imagine se depois de executar o código abaixo, o usuário escolhesse um aplicativo de e-mail como destino. O `title` poderia ser o assunto do email, o `text`, o corpo da mensagem e os arquivos, os anexos.
+
+```js
+if (navigator.share) {
+  navigator.share({
+    title: 'web.dev',
+    text: 'Check out web.dev.',
+    url: 'https://web.dev/',
+  })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error));
+}
+```
+
+Se o seu site tiver múltiplas URLs para o mesmo conteúdo, compartilhe a URL canônica da página em vez da URL atual. Em vez de compartilhar `document.location.href` , você deve verificar se há uma tag `<meta>` `<head>` e compartilhá-la. Isto proporcionará uma melhor experiência ao usuário. Não apenas evita redirecionamentos, mas também garante que uma URL compartilhada forneça a experiência de usuário correta para um cliente específico. Por exemplo, se um amigo compartilha uma URL móvel e você a visualiza num computador desktop, você verá uma versão desktop:
+
+```js
+let url = document.location.href;
+const canonicalElement = document.querySelector('link[rel=canonical]');
+if (canonicalElement !== null) {
+    url = canonicalElement.href;
+}
+navigator.share({url});
+```
+
+### Compartilhando arquivos
+
+Para compartilhar arquivos, primeiro teste e chame `navigator.canShare()`. Em seguida, inclua um array de arquivos na chamada a `navigator.share()`:
+
+```js/0-5
+if (navigator.canShare && navigator.canShare({ files: filesArray })) {
+  navigator.share({
+    files: filesArray,
+    title: 'Vacation Pictures',
+    text: 'Photos from September 27 to October 14.',
+  })
+  .then(() => console.log('Share was successful.'))
+  .catch((error) => console.log('Sharing failed', error));
+} else {
+  console.log(`Your system doesn't support sharing files.`);
+}
+```
+
+Observe que o exemplo lida com a detecção de recursos testando `navigator.canShare()` em vez de `navigator.share()`. O objeto de dados passado para `canShare()` suporta apenas a propriedade de `files`. Arquivos de imagem, vídeo, áudio e texto podem ser compartilhados. (VEJA [Extensões de arquivo permitidas no Chromium](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing).) Mais tipos de arquivo podem ser adicionados no futuro.
+
+## Estudo de caso do Santa Tracker (Siga o Papai Noel)
+
+<figure data-float="right">   {% Img src="image/admin/2I5iOXaOpzEJlEbM694n.png", alt="O aplicativo Santa Tracker mostrando um botão de compartilhamento.", width="343", height="600" %}   <figcaption>    Botão de compartilhamento do Santa Tracker  </figcaption></figure>
+
+O  [Santa Tracker](https://santatracker.google.com/), um projeto de código aberto, é uma tradição de férias no Google. Todo mês de dezembro, você pode comemorar a temporada com jogos e experiências educacionais.
+
+Em 2016, a equipe do Santa Tracker usou a API Web Share no Android. Esta API foi uma solução perfeita para dispositivos móveis. Em anos anteriores, a equipe removeu os botões de compartilhamento no celular porque o espaço é reduzido e eles não podiam justificar ter vários alvos de compartilhamento.
+
+Mas com a API Web Share, eles puderam apresentar um botão, economizando pixels preciosos. Eles também descobriram que os usuários compartilhavam com o Web Share cerca de 20% a mais do que os usuários sem a API habilitada. Acesse o [Santa Tracker](https://santatracker.google.com/) para ver o Web Share em ação.
+
+## Suporte dos navegadores
+
+O suporte do navegador para a API Web Share tem nuances e é recomendável usar a detecção de recursos (conforme descrito nos exemplos de código anteriores) em vez de presumir que um método específico seja totalmente suportado.
+
+Desde o início de 2021, o uso da API para compartilhar títulos, textos e URLs é suportado por:
+
+- Safari 12 ou posterior no macOS e iOS.
+- Chrome 75 ou posterior no Android e 89 ou posterior no ChromeOS e Windows.
+
+O uso da API para compartilhar arquivos é compatível com:
+
+- Safari 15 ou posterior no macOS e iOS.
+- Chrome 75 ou posterior no Android e 89 ou posterior no ChromeOS e Windows.
+
+(A maioria dos navegadores baseados em Chromium, como o Edge, tem o mesmo suporte para esse recurso que a versão correspondente do Chrome.)
+
+### Mostre seu apoio à API
+
+Você está planejando usar a API Web Share? Seu apoio público ajuda a equipe do Chromium a priorizar os recursos e mostra a outros fornecedores de navegadores como o apoio é fundamental.
+
+Envie um tweet para [@ChromiumDev](https://twitter.com/ChromiumDev) usando a hashtag [`#WebShare`](https://twitter.com/search?q=%23WebShare&src=recent_search_click&f=live) e diga-nos onde e como você está usando a API.
+
+## Links úteis
+
+- [Demos do Web Share](https://w3c.github.io/web-share/demos/share-files.html)
+- [Scrapbook PWA](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/README.md#web-share-demo)
diff --git a/src/site/content/pt/blog/webrtc-standard-announcement/index.md b/src/site/content/pt/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..ac7dd37b7ef
--- /dev/null
+++ b/src/site/content/pt/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,36 @@
+---
+title: Agora WebRTC é um padrão W3C e IETF
+subhead: Uma breve visão geral da história, arquitetura, casos de uso e futuro do WebRTC.
+description: Uma breve visão geral da história, arquitetura, casos de uso e futuro do WebRTC.
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+O processo de definição de um padrão web é um processo demorado que garante utilidade, consistência e compatibilidade entre navegadores. Hoje, o [W3C e o IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en) marcam a conclusão de talvez um dos padrões mais importantes durante a pandemia: o WebRTC.
+
+{% Aside %} Veja o codelab [Comunicação em tempo real com o WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web) para instruções hands-on para a implementação do WebRTC. {% endAside %}
+
+## História {: #history}
+
+WebRTC é uma plataforma que dá a navegadores, aplicativos móveis e aplicativos de desktop recursos de comunicação em tempo real, normalmente usados para chamadas de vídeo. A plataforma consiste de um conjunto abrangente de tecnologias e padrões. O Google iniciou a ideia de criar o WebRTC em 2009, como uma alternativa ao Adobe Flash e aplicativos de desktop que não podiam ser executados no navegador. A geração anterior de produtos baseados em navegador foi desenvolvida com base em tecnologia proprietária licenciada. Vários produtos foram desenvolvidos com essa tecnologia, incluindo Hangouts. O Google então adquiriu as empresas das quais vinha licenciando a tecnologia e a disponibilizou como o projeto WebRTC de código aberto. Esta base de código é integrada no Chrome e usada pela maioria dos aplicativos que usam WebRTC. Junto com outros fornecedores de navegadores e líderes do setor, como Mozilla, Microsoft, Cisco e Ericsson, a padronização do WebRTC foi iniciada no W3C e no IETF. Em 2013, a Mozilla e o Google [demonstraram](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html) chamadas de vídeo entre seus navegadores. Com a evolução do padrão, muitas discussões arquitetônicas levaram a diferenças de implementação entre navegadores e desafiaram a compatibilidade e a interoperabilidade. A maioria dessas divergências foi finalmente resolvida quando o padrão foi finalizado nos últimos anos. A especificação WebRTC agora é acompanhada com um [conjunto completo de testes de plataforma](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned) e ferramentas para lidar com a compatibilidade e os navegadores têm adaptado amplamente suas implementações de acordo. Isto põe fim a um período desafiador em que os desenvolvedores web tiveram que adotar continuamente seus serviços em diferentes implementações de navegador e mudanças nas especificações.
+
+## Arquitetura e funcionalidade {: #architecture}
+
+A [API `RTCPeerConnection`](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection) é a parte central da especificação WebRTC. A `RTCPeerConnection` trata da conexão de dois aplicativos em endpoints diferentes para se comunicarem usando um protocolo ponto a ponto. A API `PeerConnection` interage intimamente com [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) para acessar a câmera e o microfone, e com [`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) para capturar o conteúdo da tela. O WebRTC permite enviar e receber streams que incluem conteúdo de áudio e/ou vídeo, bem como dados binários arbitrários através do `DataChannel`. A funcionalidade de mídia para processar, codificar e decodificar áudio e vídeo é o núcleo de qualquer implementação WebRTC. O WebRTC suporta vários codecs de áudio, sendo o Opus o mais usado e versátil. As implementações WebRTC precisam suportar o codec de vídeo VP8 gratuito do Google e ao H.264 para processamento de vídeo. As conexões WebRTC são sempre criptografadas, o que é alcançado por meio de dois protocolos existentes: DTLS e SRTP. O WebRTC depende fortemente dos padrões e tecnologias existentes, desde codecs de vídeo (VP8, H264), travessia de rede (ICE), transporte (RTP, SCTP) e protocolos de descrição de mídia (SDP). Isso tudo está documentado em mais de 50 RFCs.
+
+## Casos de uso: quando é uma questão de milissegundos {: #use-cases }
+
+O WebRTC é amplamente usado em aplicativos de tempo crítico, como cirurgias remotas, monitoramento de sistemas e controle remoto de carros autônomos, além de chamadas de voz ou vídeo criadas em UDP onde o armazenamento em buffer não é possível. Quase todos os serviços de chamadas de vídeo baseados em navegador de empresas como Google, Facebook, Cisco, RingCentral e Jitsi usam WebRTC. Google Stadia e NVIDIA GeForce NOW usam WebRTC para obter o stream de jogo da nuvem para um navegador sem atraso perceptível.
+
+## A pandemia coloca o foco no desempenho das videochamadas {: #performance}
+
+No ano passado, o WebRTC observou um aumento de 100 vezes no seu uso no Chrome devido ao aumento das chamadas de vídeo de dentro do navegador. Reconhecendo que a videochamada se tornou uma parte fundamental da vida de muitas pessoas durante a pandemia, os fornecedores de navegadores começaram a otimizar as tecnologias das quais a videochamada depende. Isto foi particularmente importante porque reuniões grandes que demandavam recursos e efeitos de vídeo se tornaram mais comuns quando funcionários e alunos começaram a trabalhar e estudar em casa. No ano passado, o Chrome se tornou até 30% mais econômico em relação ao consumo de bateria para videochamadas, com mais otimizações para cenários de uso intenso. Mozilla, Apple e Microsoft [fizeram melhorias significativas](https://www.youtube.com/watch?v=YZROn-WsyO4) em sua implementação do WebRTC durante a pandemia, principalmente garantindo que aderem ao padrão agora formalizado.
+
+## O futuro do WebRTC {: # future}
+
+Embora o WebRTC agora esteja concluído como um padrão W3C, as melhorias continuam. O novo codec de vídeo AV1, que [economiza até 50% da largura de banda](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/), está se tornando disponível em WebRTC e navegadores web. As melhorias contínuas na base do código-fonte aberto devem reduzir ainda mais o atraso e melhorar a qualidade do vídeo que pode ser transmitido. O [WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/) reúne a iniciativa de criar APIs complementares para permitir novos casos de uso. Estes consistem em extensões para APIs existentes para dar mais controle sobre a funcionalidade existente, como [codificação de vídeo escalável](https://www.w3.org/TR/webrtc-svc/), bem como APIs que dão acesso a [componentes de nível inferior](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md). O último oferece mais flexibilidade para os desenvolvedores web inovarem, integrando componentes WebAssembly personalizados de alto desempenho. Com as redes 5G emergentes e a demanda por serviços mais interativos, esperamos ver um aumento contínuo de serviços baseados em WebRTC no próximo ano.
diff --git a/src/site/content/pt/blog/why-coop-coep/index.md b/src/site/content/pt/blog/why-coop-coep/index.md
new file mode 100644
index 00000000000..c31b8d53406
--- /dev/null
+++ b/src/site/content/pt/blog/why-coop-coep/index.md
@@ -0,0 +1,165 @@
+---
+title: Por que você precisa de "origem cruzada isolada" para recursos eficientes
+subhead: |2-
+
+  Aprenda por que o isolamento de origem cruzada é necessário para usar recursos eficientes, como
+  `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory ()` e alto
+  timer de resolução com melhor precisão.
+description: |2-
+
+  Algumas APIs da Web aumentam o risco de ataques de canal lateral, como o Spectre. Para
+  diminuir esse risco, os navegadores oferecem um ambiente isolado baseado em opt-in chamado
+  origem cruzada isolada. Aprenda por que o isolamento de origem cruzada é necessário para usar
+  recursos eficientes como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory ()`
+  e timer de alta resolução com melhor precisão.
+authors:
+  - agektmr
+  - domenic
+hero: image/admin/h8g1TQjkfkJSpWJrPakB.jpg
+date: 2020-05-04
+updated: 2021-08-05
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## Introdução
+
+Em [Como deixar seu site "isolado de origem cruzada" usando COOP e COEP](/coop-coep/), explicamos como adotar o estado de "origem cruzada isolada" usando COOP e COEP. Este é um artigo complementar que explica por que o isolamento de origem cruzada é necessário para habilitar recursos eficientes no navegador.
+
+{% Aside 'key-term' %} Este artigo usa muitas terminologias que parecem semelhantes. Para tornar as coisas mais claras, vamos defini-las:
+
+- [COEP: Política de integrador de origem cruzada](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP: Política de abertura de origem cruzada](https://github.com/whatwg/html/pull/5334/files)
+- [CORP: Política de recursos de origem cruzada](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS: Compartilhamento de recursos de origem cruzada](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB: Bloqueio de leitura de origem cruzada](https://www.chromium.org/Home/chromium-security/corb-for-developers) {% endAside %}
+
+## Histórico
+
+A Internet é construída com base na [política de mesma origem](/same-origin-policy/): um recurso de segurança que restringe como documentos e scripts podem interagir com recursos de outra origem. Este princípio restringe as maneiras como os sites podem acessar recursos de origem cruzada. Por exemplo: um documento de `https://a.example` é impedido de acessar dados hospedados em `https://b.example`.
+
+No entanto, a política de mesma origem teve algumas exceções históricas. Qualquer site pode:
+
+- Incorporar iframes de origem cruzada
+- Inclui recursos de origem cruzada, como imagens ou scripts
+- Abra janelas pop-up de origem cruzada com uma referência DOM
+
+Se a Internet pudesse ser projetada do zero, essas exceções não existiriam. Infelizmente, quando a comunidade da Web percebeu os principais benefícios de uma política estrita de mesma origem, ela já estava contando com essas exceções.
+
+Os efeitos colaterais de segurança de uma política de mesma origem tão insegura foram corrigidos de duas maneiras. Uma das formas foi a introdução de um novo protocolo denominado [Cross Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), ou compartilhamento de recursos de origem cruzada, cuja finalidade é garantir que o servidor permita compartilhar um recurso com uma determinada origem. A outra maneira é removendo implicitamente o acesso direto do script a recursos de origem cruzada, preservando a compatibilidade com versões anteriores. Esses recursos de origem cruzada são chamados de recursos "opacos". Por exemplo, é por isso que a manipulação dos pixels de uma imagem de origem cruzada por meio do `CanvasRenderingContext2D` falha, a menos que o CORS seja aplicado à imagem.
+
+Todas essas decisões de política estão acontecendo dentro de um grupo de contexto de navegação.
+
+{% Img src="image/admin/z1Gr4mmJMo383dR9FQUk.png", alt="Grupo de contexto de navegação", width="800", height="469" %}
+
+Por muito tempo, a combinação de CORS e recursos opacos foi suficiente para tornar os navegadores seguros. Às vezes, casos extremos (como [vulnerabilidades de JSON](https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/)) eram descobertos e precisavam ser corrigidos, mas no geral o princípio de não permitir acesso de leitura direto aos bytes brutos de recursos de origem cruzada foi bem-sucedido.
+
+Tudo isso mudou com o [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)), que torna potencialmente legíveis quaisquer dados carregados no mesmo grupo de contexto de navegação que seu código. Ao medir o tempo que certas operações levam, os invasores podem adivinhar o conteúdo dos caches da CPU e, por meio disso, o conteúdo da memória do processo. Esses ataques de tempo são possíveis com timers de baixa granularidade que existem na plataforma, mas podem ser acelerados com timers de alta granularidade, tanto explícitos (como `performance.now()`) e implícitos (como `SharedArrayBuffer`s). Se o `evil.com` incorpora uma imagem de origem cruzada, eles podem usar um ataque Spectre para ler seus dados de pixel, o que torna as proteções baseadas em "opacidade" ineficazes.
+
+{% Img src="image/admin/wN636enwMtBrrOfhzEoq.png", alt="Spectr", width="800", height="500" %}
+
+O ideal é que todas as solicitações de origem cruzada sejam examinadas explicitamente pelo servidor que possui o recurso. Se a verificação não for fornecida pelo servidor proprietário do recurso, os dados nunca chegarão ao grupo de contexto de navegação de um agente maligno e, portanto, ficarão fora do alcance de qualquer ataque de Espectro que uma página da web possa realizar. Nós o chamamos de estado isolado de origem cruzada. É exatamente disso que trata o COOP + COEP.
+
+Em um estado isolado de origem cruzada, o site solicitante é considerado menos perigoso e isso desbloqueia recursos poderosos, como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` e [timers de alta resolução](https://www.w3.org/TR/hr-time/) com melhor precisão que poderiam ser usados para ataques do tipo Espectro. Também evita a modificação de `document.domain`.
+
+### Política de incorporação de origens cruzadas {: #coep}
+
+A [Política de integração de origem cruzada (COEP)](https://wicg.github.io/cross-origin-embedder-policy/) evita que um documento carregue quaisquer recursos de origem cruzada que não concedam explicitamente a permissão do documento (usando CORP ou CORS). Com este recurso, você pode declarar que um documento não pode carregar tais recursos.
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="Como a COEP funciona", width="800", height="410" %}
+
+Para ativar esta política, anexe o seguinte cabeçalho HTTP ao documento:
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+A `require-corp` é o único valor aceito para COEP. Isso impõe a política de que o documento só pode carregar recursos da mesma origem ou recursos marcados explicitamente como carregáveis de outra origem.
+
+Para que os recursos possam ser carregados de outra origem, eles precisam suportar o Compartilhamento de recursos de origem cruzada (CORS) ou a Política de recursos de origem cruzada (CORP).
+
+### Compartilhamento de recursos de origem cruzada {: #cors}
+
+Se um recurso de origem cruzada suportar [Compartilhamento de recursos de origem cruzada (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), você pode usar o [atributo `crossorigin`](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin) para carregá-lo em sua página da web sem ser bloqueado pelo COEP.
+
+```html
+<img src="https://third-party.example.com/image.jpg" crossorigin>
+```
+
+Por exemplo, se este recurso de imagem for servido com cabeçalhos CORS, use o `crossorigin` para que a solicitação para buscar o recurso use o [modo CORS](https://developer.mozilla.org/docs/Web/API/Request/mode). Isso também evita que a imagem seja carregada, a menos que defina os cabeçalhos CORS.
+
+Da mesma forma, você pode buscar dados de origem cruzada por meio de `fetch()`, que não requer tratamento especial, desde que o servidor responda com [os cabeçalhos HTTP corretos](https://developer.mozilla.org/docs/Web/HTTP/CORS#The_HTTP_response_headers).
+
+### Política de recursos de origem cruzada {: #corp}
+
+A [Política de Recursos de Origem Cruzada (CORP)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)) foi originalmente introduzida como uma opção para proteger seus recursos de serem carregados por outra origem. No contexto do COEP, o CORP pode especificar a política do proprietário do recurso para quem pode carregar um recurso.
+
+O cabeçalho `Cross-Origin-Resource-Policy` recebe três valores possíveis:
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+Os recursos marcados como `same-site` só podem ser carregados do mesmo site.
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+Os recursos marcados com a `same-origin` só podem ser carregados da mesma origem.
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+Os recursos marcados `cross-origin` podem ser carregados por qualquer site. ([Este valor](https://mikewest.github.io/corpp/#integration-fetch) foi adicionado à especificação CORP junto com COEP.)
+
+{% Aside %} Depois de adicionar o cabeçalho COEP, não será possível contornar a restrição usando service workers. Se o documento for protegido por um cabeçalho COEP, a política será respeitada antes que a resposta entre no processo do documento ou antes de entrar no service worker que está controlando o documento. {% endAside %}
+
+### Política de abertura de origem cruzada {: #coop}
+
+A [Política de abertura de origem cruzada (COOP)](https://github.com/whatwg/html/pull/5334/files) permite que você garanta que uma janela de nível superior seja isolada de outros documentos, colocando-os em um grupo de contexto de navegação diferente, de forma que não possam interagir diretamente com a janela de nível superior. Por exemplo, se um documento com COOP abrir um pop-up, sua propriedade `window.opener` `null`. Além disso, a `.closed` da referência do abridor a ela retornará `true`.
+
+{% Img src="image/admin/eUu74n3GIlK1fj9ACxF8.png", alt="COOP", width="800", height="452" %}
+
+O cabeçalho `Cross-Origin-Opener-Policy` recebe três valores possíveis:
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+Os documentos marcados com a `same-origin` podem compartilhar o mesmo grupo de contexto de navegação com documentos com a mesma origem que também são marcados explicitamente com a `same-origin`.
+
+{% Img src="image/admin/he8FaRE2ef67lamrFG60.png", alt="COOP", width="800", height="507" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+Um documento de nível superior com `same-origin-allow-popups` retém referências a qualquer um de seus pop-ups que não definem COOP ou que optam pelo isolamento definindo um COOP de `unsafe-none`.
+
+{% Img src="image/admin/AJdm6vFq4fQXUWOTFeFa.png", alt="COOP", width="800", height="537" %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+`unsafe-none` é o padrão e permite que o documento seja adicionado ao grupo de contexto de navegação de seu abridor, a menos que o próprio abridor tenha um COOP da `same-origin`.
+
+{% Aside %} O [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#Window_features) tem um efeito semelhante ao que você esperaria do COOP, exceto que funciona apenas no lado do abridor. (Você não pode desassociar sua janela quando ela é aberta por terceiros.) Quando você anexa `noopener` fazendo algo como `window.open(url, '_blank', 'noopener')` ou `<a target="_blank" rel="noopener">`, você pode desassociar deliberadamente sua janela da janela aberta.
+
+Embora `noopener` possa ser substituído por COOP, ele ainda é útil quando você deseja proteger seu site em navegadores que não oferecem suporte a COOP. {% endAside %}
+
+## Resumo {: #summary}
+
+Se você quiser garantia de acesso a recursos poderosos como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` ou [timers de alta resolução](https://www.w3.org/TR/hr-time/) com melhor precisão, basta lembrar que seu documento precisa usar COEP com o valor de `require-corp` e COOP com o valor de `same-origin`. Na ausência de qualquer um deles, o navegador não garantirá isolamento suficiente para ativar com segurança esses recursos poderosos. Você pode determinar a situação da sua página verificando se [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated) retorna `true`.
+
+Aprenda as etapas para implementar isso em [Como deixar seu site "isolado de origem cruzada" usando COOP e COEP](/coop-coep/).
+
+## Recursos
+
+- [COOP e COEP explicados](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)
+- [Mudanças planejadas na memória compartilhada - JavaScript | MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes)
diff --git a/src/site/content/pt/devices/index.md b/src/site/content/pt/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/pt/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/pt/discoverable/index.md b/src/site/content/pt/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/pt/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/pt/explore/explore.11tydata.js b/src/site/content/pt/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/pt/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/pt/explore/index.md b/src/site/content/pt/explore/index.md
new file mode 100644
index 00000000000..f866c7dfeef
--- /dev/null
+++ b/src/site/content/pt/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: Explorar
+date: 2022-12-10
+---
diff --git a/src/site/content/pt/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/pt/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..0b921a38891
--- /dev/null
+++ b/src/site/content/pt/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: Aplique carregamento instantâneo com o padrão PRPL
+authors:
+  - houssein
+description: O PRPL é um acrônimo que descreve um padrão usado para carregar as páginas da web deixá-las mais interativas e mais rápidas. Neste guia, aprenda como cada uma dessas técnicas trabalham juntas, mas ainda podem ser usadas independentemente para alcançar resultados de desempenho.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+O PRPL é um acrônimo que descreve um padrão usado para fazer as páginas da web carregarem e se tornarem interativas com mais rapidez:
+
+- Carregue os recursos mais importantes via **push** (ou **préload**.
+- **Renderize** a rota inicial o mais rápido possível.
+- Faça um **cache prévio** dos ativos restantes.
+- Use **lazy loading** para as outras rotas e ativos menos críticos.
+
+Neste guia, aprenda como cada uma dessas técnicas trabalham juntas, mas ainda podem ser usadas independentemente para alcançar resultados de desempenho.
+
+## Audite sua página com o Lighthouse
+
+Execute o Lighthouse para identificar oportunidades de melhoria alinhadas com as técnicas PRPL:
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. Marque as caixas de seleção **Desempenho** e **Progressive Web App**.
+2. Clique em **Executar auditorias** para gerar um relatório.
+
+Para mais informações, veja [Descubra oportunidades de desempenho com o Lighthouse](/discover-performance-opportunities-with-lighthouse).
+
+## Pré-carga de ativos críticos
+
+O Lighthouse mostra a seguinte auditoria com falha se um determinado recurso for processado e baixado posteriormente:
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Auditoria Lighthouse: Pré-carregue requisições importantes", width="745", height="97" %}
+
+O [**preload**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) (pré-carregamento) é uma solicitação de busca declarativa que informa ao navegador para solicitar um recurso o mais rápido possível. Pré-carregue recursos críticos adicionando uma tag `<link>` com `rel="preload"` no cabeçalho do seu documento HTML:
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+O navegador define um nível de prioridade mais apropriado para o recurso, a fim de tentar baixá-lo antes, sem atrasar o evento `window.onload`.
+
+Para mais informações sobre o pré-carregamento de recursos críticos, veja o guia [Pré-carregue ativos críticos](/preload-critical-assets).
+
+## Renderize a rota inicial o mais rápido possível
+
+O Lighthouse avisa se há recursos que atrasam o [**First Paint**](/user-centric-performance-metrics/#important-metrics-to-measure) (primeira renderização), o momento em que seu site renderiza pixels na tela:
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Auditoria Lighthouse: Elimine recursos bloqueantes", width="800", height="111" %}
+
+Para melhorar a métrica First Paint, o Lighthouse recomenda integrar na página o JavaScript crítico e adiar o resto usando [`async`](/critical-rendering-path-adding-interactivity-with-javascript/), bem como também integrar o CSS crítico usado acima da dobra. Isso tudo melhora o desempenho, eliminando viagens de ida e volta ao servidor para buscar ativos de renderização bloqueantes. No entanto, o código inline é mais difícil de manter do ponto de vista do desenvolvimento e não pode ser armazenado em cache separadamente pelo navegador.
+
+Outra abordagem para melhorar o First Paint é **renderizar do lado do servidor** o HTML inicial da sua página. Isto permite mostrar o conteúdo imediatamente para o usuário enquanto os scripts ainda estão sendo buscados, processados e executados. No entanto, isto pode aumentar a carga útil do arquivo HTML significativamente, o que pode prejudicar a métrica [**Time to Interactive**](/tti/) ou seja, o tempo que leva para seu aplicativo se tornar interativo e responder à entrada do usuário.
+
+Não existe uma única solução perfeita para reduzir a métrica First Paint na sua aplicação e você só deve considerar os estilos inline e a renderização lado-servidor se as vantagens compensarem as desvantagens para sua aplicação. Você pode aprender mais sobre esses dois conceitos com os recursos a seguir.
+
+- [Otimize a entrega de CSS](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [O que é renderização do lado do servidor?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">   {% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="Solicitações/respostas com o service worker", width="800", height="1224" %}</figure>
+
+## Faça cache prévio de ativos
+
+Atuando como um proxy, os **service workers** podem buscar ativos diretamente do cache, em vez de fazer acessos repetidos ao servidor. Isto não apenas permite que os usuários usem seu aplicativo quando estão offline, mas também resulta em tempos de carregamento de página mais rápidos em visitas repetidas.
+
+Use uma biblioteca de terceiros para simplificar o processo de geração de um service worker, a menos que você tenha requisitos de cache muito complexos que as bibliotecas disponíveis não conseguem fornecer. Por exemplo, o [Workbox](/workbox) fornece uma coleção de ferramentas que permitem criar e manter um service worker para armazenar ativos em cache. Para mais informações sobre service workers e confiabilidade offline, veja o [guia do service worker](/service-workers-cache-storage) no programa de aprendizado de confiabilidade.
+
+## Carregamento lazy
+
+O Lighthouse exibirá uma auditoria com falha se você enviar um excesso de dados pela rede.
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Auditoria Lighthouse: Tem payloads de rede muito grandes", width="800", height="99" %}
+
+Isto inclui todos os tipos de ativos, mas grandes payloads de JavaScript são especialmente caras devido ao tempo que o navegador leva para processá-las e compilá-las. O Lighthouse também fornece um aviso sobre isto, quando apropriado.
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Auditoria Lighthouse: Tempo de inicialização do JavaScript", width="797", height="100" %}
+
+Para enviar uma payload de JavaScript menor que contenha apenas o código necessário quando um usuário carrega inicialmente sua aplicação, divida o pacote inteiro e os blocos de [carregamento lazy](/reduce-javascript-payloads-with-code-splitting) sob demanda.
+
+Uma vez que você conseguiu dividir seu pacote, pré-carregue os pedaços que são mais importantes (consulte o guia [Pré-carregue de ativos críticos](/preload-critical-assets)). O pré-carregamento garante que os recursos mais importantes sejam buscados e baixados mais cedo pelo navegador.
+
+Além de dividir e carregar diferentes blocos de JavaScript sob demanda, o Lighthouse também fornece uma auditoria para carregar de forma lazy imagens não críticas.
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Auditoria Lighthouse: Adie a carga de imagens offscreen", width="800", height="90" %}
+
+Se você carrega muitas imagens em sua página da web, adie todas as que estiverem abaixo da dobra ou fora da janela de visualização do dispositivo quando uma página for carregada (veja [Usar lazysizes para carregar imagens de forma lazy](/use-lazysizes-to-lazyload-images)).
+
+## Próximos passos
+
+Agora que você entende alguns dos conceitos básicos por trás do padrão PRPL, continue no próximo guia desta seção para aprender mais. É importante lembrar que nem todas as técnicas precisam ser aplicadas em conjunto. Quaisquer esforços feitos com qualquer um dos itens a seguir vão trazer melhorias de desempenho perceptíveis.
+
+- Use **push** ou **preload** para carregar recursos críticos.
+- **Renderize** a rota inicial o mais rápido possível.
+- Faça um **cache prévio** dos ativos restantes.
+- Use **lazy loading** para as outras rotas e ativos menos críticos.
diff --git a/src/site/content/pt/fast/avoid-invisible-text/index.md b/src/site/content/pt/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..95323fa2035
--- /dev/null
+++ b/src/site/content/pt/fast/avoid-invisible-text/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Evite texto invisível durante o carregamento da fonte
+authors:
+  - katiehempenius
+description: As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Para lidar com isto, alguns navegadores ocultam o texto até que a fonte carregue (o "flash de texto invisível"). Se você está otimizando para melhorar o desempenho, o ideal é evitar o "flash de texto invisível" e mostrar o conteúdo aos usuários imediatamente usando uma fonte do sistema.
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## Por que você deveria se importar?
+
+As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Para lidar com isto, alguns navegadores ocultam o texto até que a fonte carregue (o "flash de texto invisível"). Se você está otimizando para melhorar o desempenho, o ideal é evitar o "flash de texto invisível" e mostrar o conteúdo aos usuários imediatamente usando uma fonte do sistema (o "flash de texto não estilizado").
+
+## Exiba o texto imediatamente
+
+Este guia descreve duas maneiras de fazer isto: a primeira abordagem é muito simples, mas não é [suportado](https://caniuse.com/#search=font-display) por todos os navegadores; a segunda abordagem é mais trabalhosa, mas tem suporte em todos os navegadores. A melhor escolha para você é aquela que você irá implementar e manter.
+
+## Opção 1: usar font-display
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Antes</th>
+        <th>Depois</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+}
+</code>
+        </td>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+  &lt;strong&gt;font-display: swap;&lt;/strong&gt;
+}
+</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) é uma API para especificar a estratégia de exibição de fontes. A opção `swap` informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema. Assim que a fonte personalizada estiver pronta, a fonte do sistema será trocada.
+
+Se um navegador não suporta `font-display`, ele continuará a seguir seu comportamento default para carregar fontes. Verifique quais navegadores suportam `font-display` [aqui](https://caniuse.com/#search=font-display).
+
+Estes são os comportamentos default de carregamento de fonte para navegadores comuns:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Navegador</strong></th>
+        <th><strong>Comportamento default se a fonte não estiver pronta...</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>Usa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Esconde o texto até que a fonte esteja pronta.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Opção 2: Antes de usar fontes personalizadas espere até que sejam carregadas
+
+Com um pouco mais de trabalho, o mesmo comportamento pode ser implementado para funcionar em todos os navegadores.
+
+Esta abordagem tem três partes:
+
+- Não use uma fonte personalizada no carregamento da página inicial. Isto garante que o navegador exiba o texto imediatamente usando uma fonte do sistema.
+- Detecte quando sua fonte personalizada for carregada. Isto pode ser feito com algumas linhas de código JavaScript, graças à biblioteca [FontFaceObserver.](https://github.com/bramstein/fontfaceobserver)
+- Atualize o estilo da página para usar a fonte personalizada.
+
+Aqui estão as mudanças que você precisa realizar para implementar isto:
+
+- Refatore seu CSS para não usar uma fonte personalizada no carregamento inicial da página.
+- Adicione um script à sua página. Este script detecta quando a fonte personalizada é carregada e, em seguida, atualiza o estilo da página.
+
+{% Aside 'codelab' %} [Use o Font Face Observer para exibir o texto imediatamente](/codelab-avoid-invisible-text). {% endAside %}
+
+## Verificação
+
+Execute o Lighthouse para verificar se o site está usando `font-display: swap` para exibir texto:
+
+{% Instruction 'audit-performance', 'ol' %}
+
+Confirme que a verificação passa na auditoria **Assegure que o texto permanece visível durante a carga de fontes web**.
diff --git a/src/site/content/pt/fast/browser-level-image-lazy-loading/index.md b/src/site/content/pt/fast/browser-level-image-lazy-loading/index.md
new file mode 100644
index 00000000000..08c6c39e3e1
--- /dev/null
+++ b/src/site/content/pt/fast/browser-level-image-lazy-loading/index.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: Lazy loading de imagens em navegadores
+subhead: O lazy loading integrado nos navegadores finalmente chegou!
+authors:
+  - houssein
+  - addyosmani
+  - mathiasbynens
+date: 2019-08-06
+updated: 2020-07-16
+hero: image/admin/F6VE4QkpCsomiJilTFNG.png
+alt: Contorno de celular com carregamento de imagem e recursos
+description: Este artigo trata do atributo "loading" e como ele pode ser usado para controlar o carregamento de imagens.
+tags:
+  - blog
+  - performance
+feedback:
+  - api
+---
+
+O suporte, a nível de navegador, para ao lazy loading de imagens (carregamento assíncrono lento) já é suportado na web! Este vídeo mostra uma [demonstração](https://mathiasbynens.be/demo/img-loading-lazy) do recurso:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+Do Chrome 76 em diante, você pode usar o atributo `loading` para carregar imagens usando a técnica de otimização lazy loading sem a necessidade de escrever código personalizado com essa finalidade ou usar uma biblioteca JavaScript separada. Vamos nos aprofundar nos detalhes.
+
+## Compatibilidade dos navegadores
+
+`<img loading=lazy>` é suportado pelos navegadores mais populares do Chromium (Chrome, Edge, Opera) e [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/75#HTML). A implementação no WebKit (Safari) [está em andamento](https://bugs.webkit.org/show_bug.cgi?id=200764). O site [caniuse.com](https://caniuse.com/#feat=loading-lazy-attr) tem informações detalhadas sobre o suporte para vários navegadores. Os navegadores que não oferecem suporte ao `loading` simplesmente o ignoram sem efeitos colaterais.
+
+## Por que lazy-loading no nível do navegador?
+
+De acordo com o [HTTPArchive](https://httparchive.org/reports/page-weight), as imagens são o tipo de ativo mais solicitado para a maioria dos sites e geralmente ocupam mais largura de banda do que qualquer outro recurso. No 90º percentil, os sites enviam cerca de 4,7 MB de imagens em computadores e dispositivos móveis. Isso são muitas [fotos de gatos](https://en.wikipedia.org/wiki/Cats_and_the_Internet).
+
+Atualmente, há duas maneiras de adiar o carregamento de imagens fora da tela:
+
+- Usando a [API Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/)
+- Usando `scroll`, `resize` ou handlers para o evento `orientationchange` [](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way)
+
+Qualquer uma das opções permite que os desenvolvedores incluam a funcionalidade lazy-loading, e muitos desenvolvedores têm criado bibliotecas de terceiros para fornecer abstrações que são ainda mais fáceis de usar. Com o lazy-loading suportado diretamente pelo navegador, no entanto, não há necessidade de uma biblioteca externa. O lazy-loading no nível do navegador também garante que o carregamento adiado de imagens ainda funcione, mesmo se o JavaScript estiver desabilitado no cliente.
+
+## O atributo `loading`
+
+Hoje, o Chrome já carrega imagens com prioridades diferentes, dependendo de onde elas estão localizadas em relação à janela de visualização (viewport) do dispositivo. As imagens abaixo da viewport são carregadas com uma prioridade mais baixa, mas ainda são buscadas o mais rápido possível.
+
+A partir do Chrome 76, você pode usar o atributo `loading` para adiar completamente o carregamento de imagens offscreen (as que só podem ser acessadas ao rolar):
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Aqui estão os valores suportados para o atributo `loading`
+
+- `auto`: comportamento lazy-loading default, que é o mesmo que não incluir o atributo.
+- `lazy`: adia o carregamento do recurso até que ele alcance uma [distância calculada](#distance-from-viewport-thresholds) da viewport.
+- `eager` : carrega o recurso imediatamente, independentemente de onde ele esteja localizado na página.
+
+{% Aside 'caution' %} Embora disponível no Chromium, o `auto` não é mencionado na [especificação](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes). Uma vez que pode estar sujeito a alterações, recomendamos não usá-lo até que seja incluído. {% endAside %}
+
+### Limites de distância da viewport (distance-from-viewport)
+
+Todas as imagens acima da dobra, ou seja, imediatamente visíveis sem rolagem, são carregadas normalmente. Aquelas que estão muito abaixo da janela de visualização do dispositivo são buscadas apenas quando o usuário rola para perto delas.
+
+A implementação de lazy-loading do Chromium tenta garantir que as imagens fora da tela sejam carregadas com antecedência suficiente para que tenham terminado de carregar no momento em que o usuário rolar para perto delas. Ao baixar imagens próximas antes que se tornem visíveis na janela de visualização, maximizamos a chance de elas já estarem carregadas no momento em que se tornarem visíveis.
+
+Em comparação com as bibliotecas de lazy-loading do JavaScript, os limites para a obtenção de imagens que rolam para dentro da área de exibição podem ser considerados conservadores. O Chromium está procurando alinhar melhor esses limites com as expectativas do desenvolvedor.
+
+{% Aside %} Experimentos realizados com o Chrome no Android sugerem que no 4G, 97,5% das imagens abaixo da dobra que são carregadas usando lazy-loading foram totalmente carregadas dentro de 10 ms do momento em que se tornam visíveis. Mesmo em redes 2G lentas, 92,6% das imagens abaixo da dobra foram totalmente carregadas em 10 ms. Isto significa que o lazy-loading no nível do navegador oferece uma experiência estável em relação à visibilidade dos elementos que são exibidos na tela. {% endAside %}
+
+O limite de distância não é fixo e varia dependendo de vários fatores:
+
+- O tipo de recurso de imagem que está sendo baixado
+- Se o [modo Lite](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) está ativado no Chrome para Android
+- O [tipo de conexão efetiva](https://googlechrome.github.io/samples/network-information/)
+
+Você pode encontrar os valores default para os diferentes tipos de conexão efetiva na [fonte do Chromium](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad). Esses números, e até mesmo a abordagem de buscar apenas quando uma certa distância da viewport é alcançada, podem mudar num futuro próximo, conforme a equipe do Chrome aprimora a heurística para determinar quando começar o carregamento.
+
+{% Aside %} A partir do Chrome 77, você pode experimentar esses diferentes limites [limitando a rede](https://developer.chrome.com/docs/devtools/network/#throttle) no DevTools. Nesse ínterim, você precisará substituir o tipo de conexão efetiva do navegador usando a flag `about://flags/#force-effective-connection-type`. {% endAside %}
+
+## Melhoria nos limites de economia de dados e distance-from-viewport
+
+Em julho de 2020, o Chrome fez melhorias significativas para alinhar os limites de distance-from-viewport (distância da janela de visualização) para lazy-loading da imagem visando melhor atender às expectativas do desenvolvedor.
+
+Em conexões rápidas (por exemplo, 4G), reduzimos os limites distance-from-viewport de `3000px` para `1250px` e em conexões mais lentas (por exemplo, 3G), alteramos o limite de `4000px` para `2500px`. Essa mudança afeta dois aspectos:
+
+- `<img loading=lazy>` se comporta de maneira mais próxima da experiência oferecida pelas bibliotecas de lazy loading do JavaScript.
+- Os novos limites para distance-from-viewport ainda nos permitem garantir que as imagens provavelmente tenham sido carregadas no momento em que o usuário rolar até elas.
+
+Você encontrará uma comparação entre o antigo e o novo limite de distance-from-viewport para uma de nossas demonstrações em conexão rápida (4G) abaixo:
+
+Limites antigos vs. novos:
+
+<figure>   {% Img src="image/admin/xSZMqpbioBRwRTnenK8f.png", alt="Os novos e aprimorados limites para lazy loading de imagens, reduzindo os limites de distance-from-viewport para conexões rápidas de 3000px até 1250px", width="800", height="460" %}</figure>
+
+e os novos limites versus LazySizes (uma biblioteca JS de lazy loading):
+
+<figure>   {% Img src="image/admin/oHMFvflk9aesT7r0iJbx.png", alt="Os novos limites de distance-from-viewport no Chrome carregando 90 KB de imagens em comparação com LazySizes carregando em 70 KB nas mesmas condições de rede", width="800", height="355" %}</figure>
+
+{% Aside %} Para garantir que os usuários do Chrome em versões recentes também se beneficiem dos novos limites, fizemos um backport dessas alterações para que o Chrome 79-85, inclusive, também os use. Lembre-se disso se tentar comparar a economia de dados de versões mais antigas do Chrome com as mais recentes. {% endAside %}
+
+Estamos empenhados em trabalhar junto com a comunidade de padrões da web para explorar melhor o alinhamento em como os limites distance-from-viewport são abordados em diferentes navegadores.
+
+### As imagens devem incluir atributos de dimensão
+
+Quando o navegador carrega uma imagem, ele não sabe imediatamente as dimensões da imagem a menos que elas sejam explicitamente especificadas. Para permitir que o navegador reserve espaço suficiente numa página para imagens, é recomendável que todas as tags `<img>` incluam atributos `width` e `height`. Sem as dimensões especificadas, [podem ocorrer deslocamentos de layout](/cls), que são mais perceptíveis nas páginas que demoram para carregar.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Como alternativa, pode-se especificar esses valores diretamente num estilo inline:
+
+```html
+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+```
+
+As melhores práticas de definir dimensões se aplicam a `<img>` independentemente de estarem ou não sendo carregados com lazy loading. Com o lazy loading, isto se torna ainda mais relevante. Definir `width` e `height` em imagens em navegadores modernos também permite que os navegadores deduzam seu tamanho intrínseco.
+
+Na maioria dos cenários, as imagens ainda carregam via lazy loading se as dimensões não forem incluídas, mas existem alguns casos extremos que você deve conhecer. Se `width` e `height` não forem especificadas, as dimensões da imagem são 0×0 pixels no início. Se você tiver uma galeria de imagens assim, o navegador pode concluir que todas elas cabem dentro da viewport no início, já que cada uma delas praticamente não ocupa espaço e nenhuma imagem é empurrada para fora da tela. Nesse caso, o navegador determina que todas estão visíveis para o usuário e decide carregar tudo.
+
+Além disso, [especificar as dimensões da imagem diminui as chances de ocorrerem deslocamentos de layout](https://www.youtube.com/watch?v=4-d_SoCHeWE). Se você não puder incluir dimensões para suas imagens, carregá-las lentamente pode ser uma compensação entre economizar recursos de rede e, potencialmente, correr mais risco de sofrer deslocamentos de layout.
+
+Embora o lazy loading no Chromium seja implementado de forma que as imagens provavelmente serão carregadas assim que estiverem visíveis, ainda existe uma pequena chance de que elas ainda não tenham sido carregadas. Nesse caso, os atributos `width` e `height` ausentes nessas imagens aumentam seu impacto no Deslocamento Cumulativo de Layout.
+
+{% Aside %} Dê uma olhada nesta [demonstração](https://mathiasbynens.be/demo/img-loading-lazy) para ver como o atributo `loading` funciona com 100 imagens. {% endAside %}
+
+Imagens que são definidas usando o elemento `<picture>` também podem ser carregadas com lazy loading:
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
+  <img src="photo.jpg" loading="lazy">
+</picture>
+```
+
+Embora um navegador possa decidir qual imagem carregar de qualquer um dos elementos `<source>`, o atributo `loading` só precisa ser incluído no elemento `<img>`
+
+## Evite usar lazy-loading em imagens que estão na primeira viewport visível
+
+Você deve evitar definir `loading=lazy` para quaisquer imagens que estejam na primeira viewport visível.
+
+Recomenda-se adicionar `loading=lazy` às imagens que estão posicionadas abaixo da dobra, se possível. Imagens que são carregadas imediatamente (eager) podem ser baixadas imediatamente, enquanto que para imagens que são carregadas de forma lazy o navegador precisará esperar até saber onde a imagem está posicionada na página, que depende do IntersectionObserver para estar disponível.
+
+{% Aside %} No Chromium, o impacto das imagens na viewport inicial marcadas com `loading=lazy` no Largest Contentful Paint é bastante pequeno, com uma regressão de &lt;1% nos percentis 75 e 99 em comparação com as imagens carregadas imediatamente (eager). {% endAside %}
+
+Geralmente, qualquer imagem na viewport deve ser carregada de forma imediata (eager) usando os defaults do navegador. Você não precisa especificar `loading=eager` para que este seja o caso para imagens em viewport.
+
+```html
+<!-- visible in the viewport -->
+<img src="product-1.jpg" alt="..." width="200" height="200">
+<img src="product-2.jpg" alt="..." width="200" height="200">
+<img src="product-3.jpg" alt="..." width="200" height="200">
+
+<!-- offscreen images -->
+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
+```
+
+## Degradação graciosa
+
+Os navegadores que ainda não oferecem suporte ao atributo `loading` irão ignorar sua presença. Embora esses navegadores obviamente não obtenham os benefícios do lazy loading, incluir o atributo não tem impacto negativo sobre eles.
+
+## Perguntas frequentes
+
+### Existem planos para implementar o lazy-loading de imagens automaticamente no Chrome?
+
+O Chromium já carrega automaticamente de forma lazy quaisquer imagens que sejam adequadas para serem adiadas se o [modo Lite](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) estiver ativado no Chrome para Android. Isto se destina principalmente a usuários conscientes em relação a economia de dados (data-savings).
+
+### Posso alterar o quão perto uma imagem precisa estar antes que um carregamento seja disparado?
+
+Esses valores são hardcoded e não podem ser alterados por meio da API. No entanto, eles podem mudar no futuro, à medida que os navegadores experimentam diferentes limites de distâncias e variáveis.
+
+### Imagens de background CSS podem aproveitar o atributo `loading`?
+
+Não, ele atualmente só pode ser usado com tags `<img>`
+
+### Existe alguma desvantagem em usar lazy-loading com imagens que estão dentro da viewport do dispositivo?
+
+É mais seguro evitar colocar `loading=lazy` em imagens acima da dobra, pois o Chrome não vai pré-carregar as imagens com `loading=lazy`.
+
+### Como o atributo `loading` funciona com imagens que estão na viewport, mas que não estão imediatamente visíveis (por exemplo: atrás de um carrossel ou ocultas por CSS para determinados tamanhos de tela)?
+
+Apenas as imagens que estão abaixo da viewport do dispositivo pela [distância calculada](#distance-from-viewport-thresholds) carregam de forma lazy. Todas as imagens acima da viewport, independentemente de serem imediatamente visíveis, são carregadas normalmente.
+
+### E se eu já estiver usando uma biblioteca de terceiros ou um script para carregar imagens com lazy-loading?
+
+O atributo `loading` não deve, de forma alguma, afetar o código que atualmente carrega de forma lazy seus ativos, mas existem algumas coisas importantes a serem consideradas:
+
+1. Se o seu lazy-loader personalizado tentar carregar imagens ou frames antes do momento em que o Chrome os carrega normalmente, ou seja, a uma distância maior do que os [limites de distance-from-viewport](#distance-from-viewport-thresholds), eles ainda são adiados e carregados com base no comportamento normal do navegador.
+2. Se o seu lazy-loader personalizado usa uma distância menor para determinar quando carregar uma imagem específica, do que o navegador, então o comportamento estaria de acordo com suas configurações personalizadas.
+
+Um dos motivos importantes para continuar a usar uma biblioteca de terceiros junto com `loading="lazy"` é fornecer um polyfill para navegadores que ainda não suportam o atributo.
+
+### Como faço para lidar com navegadores que ainda não oferecem suporte ao lazy-loading?
+
+Crie um polyfill ou use uma biblioteca de terceiros para carregar imagens de forma lazy no seu site. A propriedade `loading` pode ser usada para detectar se o recurso é compatível com o navegador:
+
+```js
+if ('loading' in HTMLImageElement.prototype) {
+  // supported in browser
+} else {
+  // fetch polyfill/third-party library
+}
+```
+
+Por exemplo, [lazysizes](https://github.com/aFarkas/lazysizes) é uma biblioteca JavaScript popular de carregamento lazy. Você pode detectar o suporte para o atributo `loading` para carregar lazysizes como uma biblioteca fallback somente quando `loading` não for suportado. Isto funciona da seguinte maneira:
+
+- Substitua `<img src>` por `<img data-src>` para evitar um carregamento imediato em navegadores não suportados. Se o atributo `loading` for suportado, troque `data-src` por `src`.
+- Se o atributo `loading` não for suportado, carregue um fallback (lazysizes) e inicie-o. De acordo com a documentação do lazysizes, você usa a classe `lazyload` como uma forma de indicar aos lazysizes quais imagens devem ser carregadas de forma lazy.
+
+```html
+<!-- Let's load this in-viewport image normally -->
+<img src="hero.jpg" alt="…">
+
+<!-- Let's lazy-load the rest of these images -->
+<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
+
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+</script>
+```
+
+Aqui está uma [demonstração](https://lazy-loading.firebaseapp.com/lazy_loading_lib.html) desse padrão. Experimente em um navegador como Firefox ou Safari para ver o fallback em ação.
+
+{% Aside %} A biblioteca lazysizes também fornece um [plug-in de carregamento](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading) que usa o lazy loading no nível do navegador quando disponível, mas retorna à funcionalidade personalizada da biblioteca quando necessário. {% endAside %}
+
+### O lazy-loading para iframes também é suportado no Chrome?
+
+`<iframe loading=lazy>` foi padronizado recentemente e já está implementado no Chromium. Isto permite que você carregue de forma lazy um iframe usando o atributo de `loading`. Um artigo dedicado sobre iframe lazy-loading será publicado na web.dev em breve.
+
+O atributo `loading` afeta os iframes de maneira diferente das imagens, dependendo se o iframe está oculto ou não. (Iframes ocultos são frequentemente usados para fins analíticos ou de comunicação.) O Chrome usa os seguintes critérios para determinar se um iframe está oculto:
+
+- Os atributos width e height do iframe tem valores de 4 px ou menos.
+- `display: none` ou `visibility: hidden` é aplicado.
+- O iframe é posicionado offscreen usando posicionamento X ou Y negativos.
+
+Se um iframe atender a qualquer uma dessas condições, o Chrome vai considerá-lo oculto e não fará o lazy loading na maioria dos casos. Iframes que *não estão* ocultos são carregados apenas quando estiverem dentro dos limites de [distância da viewport](#distance-from-viewport-thresholds). Um espaço reservado é mostrado para iframes carregados de forma lazy que ainda estão sendo baixados.
+
+### Como o lazy-loading no nível do navegador afeta os anúncios em uma página da web?
+
+Todos os anúncios exibidos ao usuário na forma de uma imagem ou iframe carregam via lazy loading, como qualquer outra imagem ou iframe.
+
+### Como as imagens são tratadas quando uma página web é impressa?
+
+Embora a funcionalidade não esteja no Chrome atualmente, há um [issue aberto](https://bugs.chromium.org/p/chromium/issues/detail?id=875403) para garantir que todas as imagens e iframes sejam carregados imediatamente se uma página for impressa.
+
+### O Lighthouse reconhece o lazy-loading no nível do navegador?
+
+As versões anteriores do Lighthouse ainda destacavam que páginas que usam `loading=lazy` nas imagens precisavam ter uma estratégia para carregar imagens fora da tela. [O Lighthouse 6.0](/lighthouse-whats-new-6.0/) e acima são melhores nas abordagens para lidar com lazy loading de imagens fora da tela que podem usar limites diferentes, permitindo que eles sejam aprovados na auditoria [Adiar imagens fora da tela.](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)
+
+## Conclusão
+
+O suporte para lazy-loading de imagens pode tornar muito mais fácil para você melhorar o desempenho de suas páginas web.
+
+Você está percebendo algum comportamento incomum com esse recurso ativado no Chrome? [Registre um bug](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C) !
diff --git a/src/site/content/pt/fast/choose-the-right-image-format/index.md b/src/site/content/pt/fast/choose-the-right-image-format/index.md
new file mode 100644
index 00000000000..1e3fe1bb58b
--- /dev/null
+++ b/src/site/content/pt/fast/choose-the-right-image-format/index.md
@@ -0,0 +1,135 @@
+---
+layout: post
+title: Escolha o formato de imagem certo
+authors:
+  - ilyagrigorik
+description: |2
+
+  Selecionar o formato de imagem correto é o primeiro passo para fornecer imagens otimizadas em seu site. Esta postagem ajuda você a fazer a escolha certa.
+date: 2018-08-30
+updated: 2020-06-18
+tags:
+  - performance
+  - images
+---
+
+A primeira pergunta que você deve fazer é se uma imagem é, de fato, necessária para alcançar o efeito que você deseja. Um bom design é simples e sempre produzirá o melhor desempenho. Se você puder eliminar um recurso de imagem, que geralmente requer um grande número de bytes em relação a HTML, CSS, JavaScript e outros ativos na página, essa é sempre a melhor estratégia de otimização. Dito isso, uma imagem bem posicionada também pode comunicar mais informações do que mil palavras, portanto, cabe a você encontrar esse equilíbrio.
+
+Em seguida, você deve considerar se existe uma tecnologia alternativa que possa fornecer os resultados desejados, mas de uma maneira mais eficiente:
+
+- **Efeitos CSS** (como sombras ou gradientes) e animações CSS podem ser usados para produzir ativos independentes de resolução que sempre parecem nítidos em cada resolução e nível de zoom, geralmente em uma fração dos bytes exigidos por um arquivo de imagem.
+- **Fontes da Web** permitem o uso de belos tipos de fontes, preservando a capacidade de selecionar, pesquisar e redimensionar o texto - uma melhoria significativa na usabilidade.
+
+Se você alguma vez codificar texto em um recurso de imagem, pare e reconsidere. Uma boa tipografia é crítica para um bom design, branding e legibilidade, mas o texto em imagens oferece uma experiência do usuário ruim: o texto não é selecionável, não pesquisável, não pode ser ampliado, não acessível e não é amigável para dispositivos de alto DPI. O uso de fontes da web requer seu [próprio conjunto de otimizações](https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/), mas atende a todas essas questões e é sempre a melhor opção para exibir texto.
+
+## Escolha o formato de imagem certo
+
+Se você tiver certeza de que uma imagem é a opção correta, você deve selecionar cuidadosamente o tipo certo de imagem para o trabalho.
+
+<figure>{% Img src="image/admin/dJuB2DQcbhtwD5VdPVlR.png", alt="Imagens vetoriais e raster ampliadas", width="585", height="313" %} <figcaption>Imagem vetorial ampliada (L) imagem raster (R)</figcaption></figure>
+
+- [Gráficos vetoriais](https://en.wikipedia.org/wiki/Vector_graphics) usam linhas, pontos e polígonos para representar uma imagem.
+- [Gráficos raster](https://en.wikipedia.org/wiki/Raster_graphics) representam uma imagem codificando os valores individuais de cada pixel em uma grade retangular.
+
+Cada formato tem seu próprio conjunto de prós e contras. Os formatos vetoriais são ideais para imagens que consistem em formas geométricas simples, como logotipos, texto ou ícones. Eles fornecem resultados nítidos em todas as configurações de resolução e zoom, o que os torna o formato ideal para telas e recursos de alta resolução que precisam ser exibidos em tamanhos variados.
+
+No entanto, os formatos de vetor ficam aquém quando a cena é complicada (por exemplo, uma foto): a quantidade de marcação SVG para descrever todas as formas pode ser proibitivamente alta e a saída pode ainda não parecer "fotorrealística". Quando for esse o caso, é quando você deve usar um formato de imagem raster como PNG, JPEG ou WebP.
+
+As imagens raster não têm as mesmas propriedades de serem independentes de resolução ou zoom - ao aumentar a escala de uma imagem raster, você verá gráficos irregulares e borrados. Como resultado, pode ser necessário salvar várias versões de uma imagem rasterizada em várias resoluções para fornecer a experiência ideal aos usuários.
+
+## Implicações de telas de alta resolução
+
+Existem dois tipos diferentes de pixels: pixels CSS e pixels de dispositivo. Um único pixel CSS pode corresponder diretamente a um único pixel de dispositivo ou pode ser apoiado por vários pixels de dispositivo. Qual é o ponto? Bem, quanto mais pixels de dispositivo houver, mais precisos serão os detalhes do conteúdo exibido na tela.
+
+<figure>{% Img src="image/admin/oQV7qJ9fUMkYsKlUMrL4.png", alt="Três imagens mostrando a diferença entre pixels CSS e pixels do dispositivo.", width="470", height="205" %} <figcaption>A diferença entre pixels CSS e pixels do dispositivo.</figcaption></figure>
+
+Telas de alto DPI (HiDPI) produzem resultados bonitos, mas há uma desvantagem óbvia: os ativos de imagem requerem mais detalhes para aproveitar as vantagens das contagens de pixels mais altas do dispositivo. A boa notícia é que as imagens vetoriais são ideais para essa tarefa, pois podem ser renderizadas em qualquer resolução com resultados nítidos - você pode incorrer em um custo de processamento mais alto para renderizar os detalhes mais finos, mas o ativo subjacente é o mesmo e não depende da resolução.
+
+Por outro lado, as imagens raster representam um desafio muito maior porque codificam os dados da imagem por pixel. Portanto, quanto maior o número de pixels, maior será o tamanho do arquivo de uma imagem raster. Como exemplo, vamos considerar a diferença entre um recurso de foto exibido em pixels de 100 x 100 (CSS):
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>Resolução da tela</th>
+    <th>Pixels totais</th>
+    <th>Tamanho do arquivo não compactado (4 bytes por pixel)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="resolution">1x</td>
+  <td data-th="total pixels">100 x 100 = 10.000</td>
+  <td data-th="filesize">40.000 bytes</td>
+</tr>
+<tr>
+  <td data-th="resolution">2x</td>
+  <td data-th="total pixels">100 x 100 x 4 = 40.000</td>
+  <td data-th="filesize">160.000 bytes</td>
+</tr>
+<tr>
+  <td data-th="resolution">3x</td>
+  <td data-th="total pixels">100 x 100 x 9 = 90.000</td>
+  <td data-th="filesize">360.000 bytes</td>
+</tr>
+</tbody>
+</table></div>
+
+Quando duplicamos a resolução da tela física, o número total de pixels aumenta por um fator de quatro: o dobro do número de pixels horizontais, vezes o dobro do número de pixels verticais. Conseqüentemente, uma tela "2x" não apenas dobra, mas quadruplica o número de pixels necessários!
+
+Então, o que isso significa na prática? Telas de alta resolução permitem que você exiba belas imagens, o que pode ser um ótimo recurso do produto. No entanto, telas de alta resolução também requerem imagens de alta resolução, portanto:
+
+- Prefira imagens vetoriais sempre que possível, pois elas são independentes da resolução e sempre fornecem resultados nítidos.
+- Se uma imagem raster for necessária, exiba [imagens responsivas](/serve-responsive-images/).
+
+## Recursos de diferentes formatos de imagem raster
+
+Além de diferentes algoritmos de compactação com e sem perdas, diferentes formatos de imagem oferecem suporte a diferentes recursos, como canais de animação e transparência (alfa). Como resultado, a escolha do "formato certo" para uma determinada imagem é uma combinação dos resultados visuais desejados e dos requisitos funcionais.
+
+<div class="table-wrapper scrollbar"><table>
+<thead>
+  <tr>
+    <th>Formato</th>
+    <th>Transparência</th>
+    <th>Animação</th>
+    <th>Navegador</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></td>
+  <td data-th="transparency">sim</td>
+  <td data-th="animation">Não</td>
+  <td data-th="browser">Tudo</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></td>
+  <td data-th="transparency">Não</td>
+  <td data-th="animation">Não</td>
+  <td data-th="browser">Tudo</td>
+</tr>
+<tr>
+  <td data-th="format"><a href="http://en.wikipedia.org/wiki/WebP">WebP</a></td>
+  <td data-th="transparency">sim</td>
+  <td data-th="animation">sim</td>
+  <td data-th="browser">Todos os navegadores modernos. Veja <a href="https://caniuse.com/#feat=webp">Posso usar?</a>
+</td>
+</tr>
+</tbody>
+</table></div>
+
+Existem dois formatos de imagem raster com suporte universal: PNG e JPEG. Além desses formatos, os navegadores modernos suportam o formato mais recente WebP, que oferece melhor compactação geral e mais recursos. Então, qual formato você deve usar?
+
+O formato WebP geralmente fornece melhor compactação do que os formatos mais antigos e deve ser usado sempre que possível. Você pode usar o WebP junto com outro formato de imagem como um substituto. Consulte [Usar imagens WebP](/serve-images-webp/) para obter mais detalhes.
+
+Em termos de formatos de imagem mais antigos, considere o seguinte:
+
+1. **Você precisa de animação? Use elementos `<video>`**
+    - E quanto ao GIF? O GIF limita a paleta de cores a no máximo 256 cores e cria tamanhos de arquivo significativamente maiores do que os elementos `<video>` Consulte [Substituir GIFs animados por vídeo](/replace-gifs-with-videos/).
+2. **Você precisa preservar os detalhes finos com a resolução mais alta? Use PNG.**
+    - PNG não aplica nenhum algoritmo de compressão com perdas além da escolha do tamanho da paleta de cores. Como resultado, ele produzirá imagem da mais alta qualidade, mas a um custo de tamanho de arquivo significativamente maior do que outros formatos. Use criteriosamente.
+    - Se o ativo de imagem contiver imagens compostas de formas geométricas, considere convertê-lo em um formato vetorial (SVG)!
+    - Se o ativo de imagem contiver texto, pare e reconsidere. O texto nas imagens não pode ser selecionado, pesquisado ou "ampliado". Se você precisar transmitir uma aparência personalizada (por motivos de marca ou outros), use uma fonte da web.
+3. **Você está otimizando uma foto, captura de tela ou recurso de imagem semelhante? Use JPEG.**
+    - JPEG usa uma combinação de otimização com e sem perdas para reduzir o tamanho do arquivo do ativo de imagem. Experimente vários níveis de qualidade JPEG para encontrar a melhor relação entre qualidade e tamanho de arquivo para o seu ativo.
+
+Por fim, observe que se você estiver usando um WebView para renderizar conteúdo em seu aplicativo específico da plataforma, terá controle total do cliente e poderá usar o WebP exclusivamente! O Facebook e muitos outros usam o WebP para fornecer todas as suas imagens em seus aplicativos - a economia definitivamente vale a pena.
diff --git a/src/site/content/pt/fast/codelab-preload-web-fonts/index.md b/src/site/content/pt/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..2c75061937d
--- /dev/null
+++ b/src/site/content/pt/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,61 @@
+---
+layout: codelab
+title: Pré-carregar fontes da web para melhorar a velocidade de carregamento
+authors:
+  - gmimani
+description: |2
+
+  Neste codelab, aprenda como melhorar o desempenho de uma página pré-carregando
+
+  fontes da web.
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: pré-carregar-ativos-críticos
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+Este codelab mostra como pré-carregar fontes da web usando `rel="preload"` para remover qualquer flash de texto não estilizado (FOUT).
+
+## Medir
+
+Avalie primeiro o desempenho do site antes de adicionar qualquer otimização. {% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+O relatório Lighthouse gerado mostrará a sequência de busca de recursos em **Latência máxima do caminho crítico**.
+
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="Fontes da web estão presentes na cadeia de solicitação crítica.", width="704", height="198" %}
+
+Na auditoria acima, as fontes da web fazem parte da cadeia de solicitação crítica e são buscadas por último. A [**cadeia de solicitação crítica**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/) representa a ordem dos recursos que são priorizados e buscados pelo navegador. Neste aplicativo, as fontes da web (Pacfico e Pacifico-Bold) são definidas usando a regra [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) e são o último recurso buscado pelo navegador na cadeia de solicitação crítica. Normalmente, as fontes da web são carregadas lentamente, o que significa que não são carregadas até que os recursos críticos sejam baixados (CSS, JS).
+
+Aqui está a sequência dos recursos buscados no aplicativo:
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="Webfonts carregados lentamente.", width="583", height="256" %}
+
+## Pré-carregamento de fontes da web
+
+Para evitar FOUT, você pode pré-carregar fontes da web que são necessárias imediatamente. Adicione o `Link` para este aplicativo no cabeçalho do documento:
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+Os `as="font" type="font/woff2"` dizem ao navegador para baixar este recurso como uma fonte e ajuda na priorização da fila de recursos.
+
+O `crossorigin` indica se o recurso deve ser buscado com uma solicitação CORS, pois a fonte pode vir de um domínio diferente. Sem este atributo, a fonte pré-carregada é ignorada pelo navegador.
+
+Como a Pacifico-Bold é usada no cabeçalho da página, adicionamos uma tag de pré-carregamento para buscá-la ainda mais cedo. Não é importante pré-carregar a fonte Pacifico.woff2 porque ela estiliza o texto que está abaixo da dobra.
+
+Recarregue o aplicativo e execute o lighthouse novamente. Verifique a seção **Latência máxima do caminho crítico.**
+
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="Pacifico-Bold webfont é pré-carregada e removida da cadeia de solicitação crítica", width="645", height="166" %}
+
+Observe como a `Pacifico-Bold.woff2` é removida da cadeia de solicitação crítica. Ela é obtida anteriormente no aplicativo.
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="A fonte da web Pacifico-Bold está pré-carregada", width="553", height="254" %}
+
+Com o pré-carregamento, o navegador sabe que precisa fazer o download desse arquivo mais cedo. É importante observar que, se não for usado corretamente, o pré-carregamento pode prejudicar o desempenho, fazendo solicitações desnecessárias de recursos que não são usados.
diff --git a/src/site/content/pt/fast/codelab-serve-images-webp/index.md b/src/site/content/pt/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..214181caac9
--- /dev/null
+++ b/src/site/content/pt/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,128 @@
+---
+layout: codelab
+title: Criação de imagens WebP com a linha de comando
+authors:
+  - katiehempenius
+description: |2
+
+  Neste codelab, aprenda como exibir imagens otimizadas usando WebP.
+date: 2018-11-05
+glitch: webp-cli
+related_post: serve-images-webp
+tags:
+  - performance
+---
+
+A <a href="https://developers.google.com/speed/webp/docs/precompiled">ferramenta de linha de comando</a> webp já foi instalada para você, então você está pronto para começar. Esta ferramenta converte imagens JPG, PNG e TIFF em WebP.
+
+## Converta imagens para WebP
+
+{% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+1. Digite o seguinte comando:
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+Este comando converte, com uma qualidade de `50` ( `0` é a pior; `100` é a melhor), o arquivo `images/flower1.jpg` e o salva como `images/flower1.webp` .
+
+{% Aside %} Você está se perguntando por que digitar `cwebp` vez de `webp`? WebP tem dois comandos separados para codificar e decodificar imagens WebP. `cwebp` codifica imagens para WebP, enquanto `dwebp` decodifica imagens de WebP. {% endAside %}
+
+Depois de fazer isso, você deve ver algo assim no console:
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+Você acabou de converter com sucesso a imagem para WebP.
+
+No entanto, executar o `cwebp` uma imagem por vez como este demoraria muito para converter muitas imagens. Se precisar fazer isso, você pode usar um script.
+
+- Execute este script no console (não se esqueça dos crases):
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+Este script converte, com uma qualidade de `50` todos os arquivos no `images/` e os salva como um novo arquivo (mesmo nome de arquivo, mas com uma `.webp`) no mesmo diretório.
+
+### ✔︎ Check-in
+
+Agora você deve ter 6 arquivos em seu diretório `images/`:
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+Em seguida, atualize este Glitch para servir imagens WebP aos navegadores que o suportam.
+
+## Adicione imagens WebP usando a tag `<picture>`
+
+Uma tag `<picture>` permite que você veicule WebP para navegadores mais novos ao mesmo tempo em que mantém o suporte para navegadores mais antigos.
+
+- Em `index.html` substitua `<img src="images/flower1.jpg"/>` pelo seguinte HTML:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- Em seguida, substitua as tags `<img>` para `flower2.jpg` e `flower3.png` pelas tags `<picture>`
+
+### ✔︎ Check-in
+
+Depois de concluídas, as tags `<picture>` em <br>`index.html` devem ter a seguinte aparência:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+Em seguida, use o Lighthouse para verificar se você implementou corretamente as imagens WebP no site.
+
+## Verifique o uso do WebP com o Lighthouse
+
+A auditoria de desempenho do Lighthouse **Servir imagens em formatos de última geração** permite que você saiba se todas as imagens em seu site estão usando formatos de próxima geração, como o WebP.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. Verifique se a auditoria **Servir imagens em formatos de próxima geração** foi aprovada.
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Aprovação da auditoria 'Servir imagens em formatos de última geração' no Lighthouse", width="701", height="651" %}
+
+Sucesso! Agora você está servindo imagens WebP em seu site.
diff --git a/src/site/content/pt/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/pt/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..a1dcb76c071
--- /dev/null
+++ b/src/site/content/pt/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,75 @@
+---
+layout: codelab
+title: Carregamento lento de imagens fora da tela com lazysizes
+authors:
+  - katiehempenius
+description: Neste codelab, aprenda a usar lazysizes para carregar apenas imagens que estejam na janela de visualização atual.
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+O carregamento lento é a abordagem que espera para carregar os recursos até que sejam necessários em vez de carregá-los antecipadamente. Isso pode melhorar o desempenho, reduzindo a quantidade de recursos que precisam ser carregados e analisados no carregamento inicial da página.
+
+Imagens que estiverem fora da tela durante o carregamento de página inicial são candidatas ideais para essa técnica. E o melhor de tudo: [lazysizes](https://github.com/aFarkas/lazysizes) torna essa estratégia muito simples de implementar.
+
+## Adicione o script lazysizes à página
+
+{% Instruction 'remix' %}
+
+`lazysizes.min.js` já foi baixado e adicionado a este Glitch. Para incluí-lo na página:
+
+- Adicione a seguinte tag `<script>` ao `index.html` :
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Fim da imagem -->
+</body>
+```
+
+{% Aside %} O [arquivo lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js) já foi adicionado a este projeto, portanto, não há necessidade de adicioná-lo separadamente. O script que você acabou de adicionar pode usar este script. {% endAside %}
+
+O lazysizes carrega imagens de forma inteligente conforme o usuário rola a página e prioriza as imagens que o usuário encontrará em breve.
+
+## Indique as imagens para carregamento lento
+
+- Adicione a classe `lazyload` às imagens que devem ser carregadas lentamente. Além disso, altere o atributo `src` `data-src` .
+
+Por exemplo, as alterações para `flower3.png` ficariam assim:
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+Para este exemplo, tente fazer o carregamento lento de `flower3.png` , `flower4.jpg` e `flower5.jpg` .
+
+{% Aside %} Você pode estar se perguntando por que é necessário alterar o atributo `src` `data-src`. Se este atributo não for alterado, todas as imagens serão carregadas imediatamente em vez de serem carregadas lentamente. `data-src` não é um atributo que o navegador reconhece, portanto, quando ele encontra uma tag de imagem com esse atributo, ele não carrega a imagem. Nesse caso, isso é bom, porque permite que o script lazysizes decida quando a imagem deve ser carregada, em vez de o navegador ter que fazer isso. {% endAside %}
+
+## Veja em ação
+
+É isso! Para ver essas mudanças em ação, siga estas etapas:
+
+{% Instruction 'preview' %}
+
+- Abra o console e encontre as imagens que acabaram de ser adicionadas. Suas classes devem mudar de `lazyload` para `lazyloaded` conforme você rola a página para baixo.
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="Imagens durante o carregamento lento", width="428", height="252" %}
+
+- Observe o painel de rede para ver os arquivos de imagem carregados individualmente conforme você rola a página para baixo.
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="Imagens durante o carregamento lento", width="418", height="233" %}
+
+## Verifique usando o Lighthouse
+
+Por último, é uma boa ideia usar o Lighthouse para verificar essas alterações. A auditoria de desempenho "Adiar imagens fora da tela" do Lighthouse indicará se você se esqueceu de adicionar carregamento lento a qualquer imagem fora da tela.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. Verifique se a auditoria **Adiar imagens fora da tela** foi aprovada.
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Auditoria 'Codificar imagens de forma eficiente' aprovada no Lighthouse", width="800", height="774" %}
+
+Sucesso! Você usou lazysizes para carregar lentamente as imagens em sua página.
diff --git a/src/site/content/pt/fast/content-delivery-networks/index.md b/src/site/content/pt/fast/content-delivery-networks/index.md
new file mode 100644
index 00000000000..45c3c7742b1
--- /dev/null
+++ b/src/site/content/pt/fast/content-delivery-networks/index.md
@@ -0,0 +1,252 @@
+---
+layout: post
+title: Redes de distribuição de conteúdo (CDNs)
+authors:
+  - katiehempenius
+description: |2-
+
+  Este artigo fornece uma visão geral abrangente das redes de distribuição de conteúdo (CDNs). Além disso, explica como escolher, configurar e otimizar uma configuração de CDN.
+subhead: |2
+
+  Melhore o desempenho usando uma rede de distribuição de conteúdo.
+date: 2020-09-22
+hero: image/admin/22YYRBuQy8gvQhgllLKq.jpg
+tags:
+  - blog
+  - performance
+  - network
+---
+
+As redes de distribuição de conteúdo (CDNs) melhoram o desempenho do site usando uma rede distribuída de servidores para fornecer recursos aos usuários. Como os CDNs reduzem a carga do servidor, eles reduzem os custos do servidor e são adequados para lidar com picos de tráfego. Este artigo aborda como os CDNs funcionam e fornecem orientação agnóstica independente de plataforma sobre a escolha, configuração e otimização de uma instalação de CDN.
+
+## Visão geral
+
+Uma rede de distribuição de conteúdo consiste em uma rede de servidores que são otimizados para entregar conteúdo rapidamente aos usuários. Embora os CDNs sejam indiscutivelmente mais conhecidos por servirem conteúdo em cache, os CDNs também podem melhorar a entrega de conteúdo não armazenável em cache. De modo geral, quanto mais do seu site for entregue pelo seu CDN, melhor.
+
+Em um alto nível, os benefícios de desempenho dos CDNs derivam de um punhado de princípios: os servidores CDN estão localizados mais perto dos usuários do que os [servidores de origem](https://en.wikipedia.org/wiki/Upstream_server) e, portanto, têm uma latência de [tempo de ida e volta (RTT)](https://en.wikipedia.org/wiki/Round-trip_delay) mais curta; as otimizações de rede permitem que os CDNs forneçam conteúdo mais rapidamente do que se o conteúdo fosse carregado "diretamente" do servidor de origem; por último, os caches CDN eliminam a necessidade de uma solicitação para viajar para o servidor de origem.
+
+{% Aside 'key-term' %} O **servidor de origem** refere-se ao servidor do qual um CDN recupera o conteúdo. {% endAside %}
+
+### Distribuição de recursos
+
+Embora possa parecer não intuitivo, usar um CDN para fornecer recursos (mesmo os que não podem ser armazenados em cache) normalmente será mais rápido do que fazer com que o usuário carregue o recurso "diretamente" de seus servidores.
+
+Quando um CDN é usado para fornecer recursos da origem, uma nova conexão é estabelecida entre o cliente e um servidor CDN próximo. O restante da jornada (em outras palavras, a transferência de dados entre o servidor CDN e a origem) ocorre pela rede do CDN — que geralmente inclui conexões existentes e persistentes com a origem. Os benefícios são duplos: encerrar a nova conexão o mais próximo possível do usuário elimina custos de configuração de conexão desnecessários (estabelecer uma nova conexão é caro e requer várias viagens de ida e volta); o uso de uma conexão pré-aquecida permite que os dados sejam transferidos imediatamente com a máxima produtividade possível.
+
+<figure>{% Img src="image/admin/M9kzM7J7FenUyO7E9MF0.png", alt="Comparação da configuração da conexão com e sem CDN", width="800", height="512" %}</figure>
+
+Alguns CDNs melhoram isso ainda mais, roteando o tráfego para a origem por meio de vários servidores CDN espalhados pela Internet. As conexões entre os servidores CDN ocorrem por meio de rotas confiáveis e altamente otimizadas, em vez de rotas determinadas pelo [Border Gateway Protocol (BGP)](https://en.wikipedia.org/wiki/Border_Gateway_Protocol). Embora o BGP seja o protocolo de roteamento de fato da Internet, suas decisões de roteamento nem sempre são voltadas para o desempenho. Portanto, as rotas determinadas pelo BGP provavelmente têm menos desempenho do que as rotas ajustadas entre os servidores CDN.
+
+<figure>{% Img src="image/admin/ZLMPFySQgBkpWvgujuJP.png", alt="Comparação da configuração da conexão com e sem CDN", width="800", height="449" %}</figure>
+
+### Cache
+
+O cache de recursos nos servidores de um CDN elimina a necessidade de uma solicitação percorrer todo o caminho até a origem para ser atendida. Como resultado, o recurso é entregue mais rapidamente; isso também reduz a carga no servidor de origem.
+
+#### Adicionar recursos ao cache
+
+O método mais frequentemente usado para preencher os caches de CDN é fazer com que os recursos "pull" de CDN conforme eles são necessários — isso é conhecido como "pull de origem". Na primeira vez que um determinado recurso é solicitado do cache, o CDN o solicita do servidor de origem e armazena em cache a resposta. Dessa maneira, o conteúdo do cache é construído ao longo do tempo à medida que recursos adicionais não armazenados em cache são solicitados.
+
+#### Remover recursos do cache
+
+Os CDNs usam o despejo de cache para remover periodicamente recursos não tão úteis do cache. Além disso, os proprietários de sites podem usar a purga para remover recursos explicitamente.
+
+- **Despejo de cache**
+
+    Os caches têm uma capacidade de armazenamento finita. Quando um cache se aproxima de sua capacidade, ele abre espaço para novos recursos removendo recursos que não foram acessados recentemente ou que ocupam muito espaço. Este processo é conhecido como despejo de cache. O despejo de um recurso de um cache não significa necessariamente que ele foi despejado de todos os caches em uma rede CDN.
+
+- **Purga**
+
+    A purga (também conhecido como "invalidação de cache") é um mecanismo para remover um recurso dos caches de um CDN sem ter que esperar que ele expire ou seja despejado. Normalmente é executado por meio de uma API. A purga é crítica em situações em que o conteúdo precisa ser recolhido (por exemplo, corrigir erros de digitação, erros de preços ou artigos de notícias incorretos). Além disso, ela também pode desempenhar um papel crucial na estratégia de cache de um site.
+
+    Se um CDN oferece suporte para purga quase instantânea, a purga pode ser usada como um mecanismo para gerenciar o cache de conteúdo dinâmico: armazene em cache o conteúdo dinâmico usando um TTL longo e, em seguida, purga o recurso sempre que ele for atualizado. Desta forma, é possível maximizar a duração do cache de um recurso dinâmico, apesar de não saber com antecedência quando o recurso será alterado. Essa técnica às vezes é chamada de "cache de espera até que seja informado".
+
+    Quando a purga é usada em escala, normalmente é usada em conjunto com um conceito conhecido como "tags de cache" ou "chaves de cache substitutas". Esse mecanismo permite que os proprietários de sites associem um ou mais identificadores adicionais (às vezes chamados de "tags") a um recurso armazenado em cache. Essas etiquetas podem então ser usadas para realizar uma purga altamente granular. Por exemplo, você pode adicionar uma tag "rodapé" a todos os recursos (por exemplo, `/about`, `/blog` ) que contêm o rodapé do seu site. Quando o rodapé for atualizado, instrua seu CDN para purgar todos os recursos associados à tag "rodapé".
+
+#### Recursos armazenáveis em cache
+
+Se e como um recurso deve ser armazenado em cache depende se ele é público ou privado; estático ou dinâmico.
+
+##### Recursos privados e públicos
+
+- **Recursos privados**
+
+    Os recursos privados contêm dados destinados a um único usuário e, portanto, não devem ser armazenados em cache por um CDN. Os recursos privados são indicados pelo cabeçalho `Cache-Control: private` privado.
+
+- **Recursos públicos**
+
+    Os recursos públicos não contêm informações específicas do usuário e, portanto, podem ser armazenados em cache por um CDN. Um recurso pode ser considerado armazenável em cache por um CDN se não tiver um cabeçalho `Cache-Control: no-store` ou `Cache-Control: private` privado. O período de tempo que um recurso público pode ser armazenado em cache depende da frequência com que o ativo muda.
+
+##### Conteúdo dinâmico e estático
+
+- **Conteúdo dinâmico**
+
+    Conteúdo dinâmico é aquele que muda com frequência. Uma resposta da API e uma página inicial da loja são exemplos desse tipo de conteúdo. No entanto, o fato de que esse conteúdo muda com frequência não impede necessariamente que seja armazenado em cache. Durante períodos de tráfego intenso, o armazenamento em cache dessas respostas por períodos muito curtos (por exemplo, 5 segundos) pode reduzir significativamente a carga no servidor de origem, ao mesmo tempo em que tem impacto mínimo na atualização dos dados.
+
+- **Conteúdo estático**
+
+    O conteúdo estático muda raramente, ou nunca. Imagens, vídeos e bibliotecas com controle de versão são normalmente exemplos desse tipo de conteúdo. Como o conteúdo estático não muda, ele deve ser armazenado em cache com um longo Time to Live (TTL) — por exemplo, 6 meses ou 1 ano.
+
+## Escolher um CDN
+
+O desempenho é normalmente uma consideração importante ao escolher um CDN. No entanto, os outros recursos que um CDN oferece (por exemplo, recursos de segurança e analíticos), bem como os preços, suporte e integração de um CDN, são importantes a serem considerados ao escolher um CDN.
+
+### Desempenho
+
+Em um nível superior, a estratégia de desempenho de um CDN pode ser pensada em termos de compensação entre minimizar a latência e maximizar a taxa de acertos do cache. Os CDNs com muitos pontos de presença (PoPs) podem fornecer latência mais baixa, mas podem apresentar taxas de acerto de cache mais baixas como resultado da divisão do tráfego em mais caches. Por outro lado, os CDNs com menos PoPs podem estar localizados geograficamente mais longe dos usuários, mas podem atingir taxas de acerto de cache mais altas.
+
+Como resultado dessa troca, alguns CDNs usam uma abordagem em camadas para armazenamento em cache: os PoPs localizados próximos aos usuários (também conhecidos como "caches de borda") são complementados com PoPs centrais que têm taxas de acerto de cache mais altas. Quando um cache de borda não consegue encontrar um recurso, ele procura um PoP central para o recurso. Essa abordagem troca uma latência um pouco maior por uma probabilidade maior de que o recurso possa ser servido a partir de um cache CDN — embora não necessariamente um cache de borda.
+
+A compensação entre minimizar a latência e minimizar a taxa de acertos do cache é um espectro. Nenhuma abordagem particular é universalmente melhor; no entanto, dependendo da natureza do seu site e de sua base de usuários, você pode descobrir que uma dessas abordagens oferece um desempenho significativamente melhor do que a outra.
+
+Também é importante notar que o desempenho do CDN pode variar significativamente dependendo da geografia, da hora do dia e até dos eventos atuais. Embora seja sempre uma boa ideia fazer sua própria pesquisa sobre o desempenho de um CDN, pode ser difícil prever o desempenho exato que você obterá de um CDN.
+
+### Características adicionais
+
+Os CDNs geralmente oferecem uma ampla variedade de recursos além de sua oferta principal de CDN. Os recursos normalmente oferecidos incluem: balanceamento de carga, otimização de imagem, streaming de vídeo, computação e borda e produtos de segurança.
+
+## Como instalar e configurar um CDN
+
+O ideal é usar um CDN para atender todo o seu site. Em um alto nível, o processo de configuração para isso consiste em se inscrever em um provedor de CDN e, em seguida, atualizar seu registro DNS CNAME para apontar para o provedor de CDN. Por exemplo, o registro CNAME para `www.example.com` pode apontar para `example.my-cdn.com`. Como resultado dessa alteração de DNS, o tráfego para seu site será roteado por meio do CDN.
+
+Se usar um CDN para servir todos os recursos não for uma opção, você pode configurar um CDN para servir apenas um subconjunto de recursos — por exemplo, apenas recursos estáticos. Você pode fazer isso criando um registro CNAME separado que só será usado para recursos que devem ser servidos pelo CDN. Por exemplo, você pode criar um registro CNAME `static.example.com` que aponte para `example.my-cdn.com`. Você também precisaria reescrever as URLs dos recursos servidos pelo CDN para apontar para o subdomínio `static.example.com` que você criou.
+
+Embora seu CDN seja configurado neste ponto, provavelmente haverá ineficiências em sua configuração. As próximas duas seções deste artigo explicarão como obter o máximo do seu CDN aumentando a taxa de acertos do cache e ativando recursos de desempenho.
+
+## Melhorar a taxa de acertos do cache
+
+Uma configuração de CDN eficaz fornecerá o maior número possível de recursos do cache. Geralmente, é medido pela taxa de acertos do cache (CHR). A taxa de acertos do cache é definida como o número de acertos do cache dividido pelo número total de solicitações durante um determinado intervalo de tempo.
+
+Um cache recém-inicializado terá um CHR de 0, mas isso aumenta à medida que o cache for preenchido com recursos. Um CHR de 90% é uma boa meta para a maioria dos sites. Seu provedor de CDN deve fornecer análises e relatórios sobre seu CHR.
+
+Ao otimizar o CHR, a primeira coisa a verificar é se todos os recursos armazenáveis em cache estão sendo armazenados em cache pelo período de tempo correto. Esta é uma avaliação simples que deve ser realizada por todos os sites.
+
+O próximo nível de otimização de CHR, em termos gerais, é ajustar as configurações de CDN para garantir que as respostas do servidor logicamente equivalentes não sejam armazenadas em cache separadamente. Esta é uma ineficiência comum que ocorre devido ao impacto de fatores como parâmetros de consulta, cookies e cabeçalhos de solicitação no armazenamento em cache.
+
+### Auditoria inicial
+
+A maioria dos CDNs fornecerá análises de cache. Além disso, ferramentas como [WebPageTest](https://webpagetest.org/) e [Lighthouse](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/) também podem ser usadas para verificar rapidamente se todos os recursos estáticos de uma página estão sendo armazenados em cache pelo período de tempo correto. Isso é feito verificando os cabeçalhos do cache HTTP de cada recurso. O armazenamento em cache de um recurso usando o Time To Live (TTL) máximo apropriado evitará buscas de origem desnecessárias no futuro e, portanto, aumentará o CHR.
+
+No mínimo, um desses cabeçalhos normalmente precisa ser definido para que um recurso seja armazenado em cache por um CDN:
+
+- `Cache-Control: max-age=`
+- `Cache-Control: s-maxage=`
+- `Expires`
+
+Além disso, embora não haja impacto sobre se ou como um recurso é armazenado em cache por um CDN, é uma boa prática definir também a diretiva [`Cache-Control: immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading). O `Cache-Control: immutable` indica que um recurso "não será atualizado durante seu tempo de vida de atualização". Como resultado, o navegador não irá revalidar o recurso ao servi-lo a partir do cache do navegador, eliminando assim uma solicitação desnecessária do servidor. Infelizmente, esta diretiva só é [compatível](https://caniuse.com/#feat=mdn-http_headers_cache-control_immutable) com Firefox e Safari — não é compatível com navegadores baseados em Chromium. Este [problema](https://bugs.chromium.org/p/chromium/issues/detail?id=611416) rastreia o suporte do Chromium para `Cache-Control: immutable`. Marcar este problema pode ajudar a incentivar o suporte a esse recurso.
+
+Para obter uma explicação mais detalhada sobre o cache HTTP, consulte [Impedir solicitações de rede desnecessárias com o cache HTTP](/http-cache/).
+
+### Afinação
+
+Uma explicação um pouco simplificada de como funcionam os caches CDN é que o URL de um recurso é usado como a chave para armazenar em cache e recuperar o recurso do cache. Na prática, isso ainda é extremamente verdadeiro, mas é um pouco complicada pelo impacto de coisas como cabeçalhos de solicitação e parâmetros de consulta. Como resultado, reescrever URLs de solicitação é uma técnica importante para maximizar o CHR e garantir que o conteúdo correto seja servido aos usuários. Uma instância de CDN configurada corretamente atinge o equilíbrio correto entre o cache excessivamente granular (o que prejudica o CHR) e o cache insuficientemente granular (o que resulta em respostas incorretas servidas aos usuários).
+
+#### Parâmetros de consulta
+
+Por padrão, os CDNs levam em consideração os parâmetros de consulta ao armazenar em cache um recurso. No entanto, pequenos ajustes no manuseio de parâmetros de consulta podem ter um impacto significativo no CHR. Por exemplo:
+
+- **Parâmetros de consulta desnecessários**
+
+    Por padrão, um CDN armazenaria em cache `example.com/blog` e `example.com/blog?referral_id=2zjk` separadamente, embora eles provavelmente sejam o mesmo recurso subjacente. Isso é corrigido ajustando a configuração de um CDN para ignorar o parâmetro de consulta de `referral\_id`.
+
+- **Ordem dos parâmetros de consulta**
+
+    Um CDN armazenará em cache `example.com/blog?id=123&query=dogs` separadamente de `example.com/blog?query=dogs&id=123`. Para a maioria dos sites, a ordem dos parâmetros de consulta não importa, portanto, configurar o CDN para classificar os parâmetros de consulta (normalizando assim a URL usada para armazenar em cache a resposta do servidor) aumentará o CHR.
+
+#### Vary
+
+O cabeçalho de resposta [Vary](https://developer.mozilla.org/docs/Web/HTTP/Headers/Vary) informa aos caches que a resposta do servidor correspondente a um URL específico pode variar dependendo dos cabeçalhos definidos na solicitação (por exemplo, os cabeçalhos de solicitação [Accept-Language](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) ou [Accept-Encoding](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Encoding)). Como resultado, ele instrui um CDN a armazenar em cache essas respostas separadamente. O cabeçalho Vary não é amplamente suportado por CDNs e pode fazer com que um recurso armazenável em cache não seja servido a partir de um cache.
+
+Embora o cabeçalho Vary possa ser uma ferramenta útil, o uso inadequado prejudica o CHR. Além disso, se você usar `Vary`, normalizar os cabeçalhos de solicitação ajudará a melhorar o CHR. Por exemplo, sem normalização, os cabeçalhos de solicitação `Accept-Language: en-US` e `Accept-Language: en-US,en;q=0.9` resultariam em duas entradas de cache separadas, embora seu conteúdo provavelmente fosse idêntico.
+
+#### Cookies
+
+Os cookies são definidos em solicitações por meio do cabeçalho [`Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cookie), eles são definidos nas respostas por meio do cabeçalho `Set-Cookie`. O uso desnecessário do <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie" data-md-type="link">`Set-Cookie`</a> deve ser evitado, visto que os caches normalmente não armazenam em cache as respostas do servidor que contêm esse cabeçalho.
+
+## Recursos de desempenho
+
+Esta seção aborda os recursos de desempenho que são muitas vezes oferecidos pelos CDNs como parte de sua oferta de produto principal. Muitos sites esquecem de ativar esses recursos, perdendo assim vitórias fáceis de desempenho.
+
+### Compressão
+
+Todas as respostas baseadas em texto devem ser [comprimidos](/reduce-network-payloads-using-text-compression/#data-compression) com gzip ou Brotli. Se você puder, escolha Brotli em vez de gzip. O Brotli é um algoritmo de compressão mais recente e, em comparação com o gzip, pode atingir taxas de compressão mais altas.
+
+Existem dois tipos de suporte de CDN para compressão do Brotli: "Brotli da origem" e "compressão de Brotli automática".
+
+#### Brotli de origem
+
+O Brotli de origem é quando um CDN atende recursos que foram comprimidas do Brotli pela origem. Embora isso possa parecer um recurso que todos os CDNs devem ser capazes de suportar fora da caixa, requer que um CDN que seja capaz de armazenar em cache várias versões (em outras palavras, versões comprimidas com gzip e versões comprimidas com Brotli) do recurso correspondente a um determinado URL.
+
+#### Compressão de Brotli automática
+
+A compressão de Brotli automática ocorre quando os recursos são comprimidos do Brotli pelo CDN. Os CDNs podem comprimir recursos armazenáveis e não armazenados em cache.
+
+Na primeira vez que um recurso é solicitado, ele é servido usando compressão "boa o suficiente" — por exemplo, o Brotli-5. Esse tipo de compressão é aplicável a recursos armazenáveis e não armazenados em cache.
+
+Enquanto isso, se um recurso puder ser armazenado em cache, o CDN usará o processamento offline para comprimir o recurso em um nível de compressão mais poderoso, mas muito mais lento — por exemplo, o Brotli-11. Assim que a compressão for concluída, a versão mais comprimida será armazenada em cache e usada para solicitações subsequentes.
+
+#### Melhores práticas de compressão
+
+Os sites que desejam maximizar o desempenho devem aplicar a compressão de Brotli em seu servidor de origem e no CDN. A compressão de Brotli na origem minimiza o tamanho da transferência de recursos que não podem ser servidos a partir do cache. Para evitar atrasos no atendimento de solicitações, a origem deve comprimir recursos dinâmicos usando um nível de compressão bastante conservador — por exemplo, o Brotli-4; recursos estáticos podem ser comprimidos usando o Brotli-11. Se uma origem não suportar o Brotli, o gzip-6 pode ser usado para comprimir recursos dinâmicos; o gzip-9 pode ser usado para comprimir recursos estáticos.
+
+### TLS 1.3
+
+O TLS 1.3 é a versão mais recente do [Transport Layer Security (TLS)](https://en.wikipedia.org/wiki/Transport_Layer_Security), o protocolo criptográfico usado pelo [HTTPS](https://en.wikipedia.org/wiki/HTTPS). O TLS 1.3 oferece melhor privacidade e desempenho em comparação com o TLS 1.2.
+
+O TLS 1.3 encurta o aperto de mão do TLS de duas viagens de ida e volta para uma. Para conexões usando HTTP/1 ou HTTP/2, encurtar o aperto de mão do TLS para uma viagem de ida e volta reduz efetivamente o tempo de configuração da conexão em 33%.
+
+<figure>{% Img src="image/admin/FnCSj1W23jXaiOWCp0Bw.png", alt="Comparação dos apertos de mão do TLS 1.2 e TLS 1.3", width="800", height="448" %}</figure>
+
+### HTTP/2 e HTTP/3
+
+O HTTP/2 e HTTP/3 fornecem benefícios de desempenho em relação ao HTTP/1. Dos dois, o HTTP/3 oferece maiores benefícios *potenciais* de desempenho. O HTTP/3 ainda não está totalmente padronizado, mas terá amplo [suporte](https://caniuse.com/#feat=http3) quando isso ocorrer.
+
+#### HTTP/2
+
+Se o seu CDN ainda não ativou o [HTTP/2](https://almanac.httparchive.org/en/2019/http2) por padrão, você deve considerar ligá-lo. O HTTP/2 oferece vários [benefícios de desempenho](https://hpbn.co/http2) em relação ao HTTP/1 e é [compatível](https://caniuse.com/#feat=http2) com todos os principais navegadores. Os recursos de desempenho do HTTP/2 incluem: [multiplexação](https://hpbn.co/http2/#request-and-response-multiplexing), [priorização de stream](https://hpbn.co/http2/#stream-prioritization), [push de servidor](https://almanac.httparchive.org/en/2019/http2#http2-push) e [compressão de cabeçalho](https://tools.ietf.org/html/rfc7541/).
+
+- **Multiplexação**
+
+    A multiplexação é indiscutivelmente o recurso mais importante do HTTP/2. A multiplexação permite que uma única conexão TCP atenda a vários pares de resposta de solicitação ao mesmo tempo. Isso elimina a sobrecarga de configurações de conexão desnecessárias; considerando que o número de conexões que um navegador pode abrir em um determinado momento é limitado, isso também implica que o navegador agora pode solicitar mais recursos de uma página em paralelo. A multiplexação teoricamente remove a necessidade de otimizações HTTP/1 como concatenação e folhas de sprite — no entanto, na prática, essas técnicas permanecerão relevantes, uma vez que arquivos maiores comprimem melhor.
+
+- **Priorização de fluxo**
+
+    A multiplexação permite vários fluxos simultâneos; a [priorização de fluxo](https://httpwg.org/specs/rfc7540.html#StreamPriority) fornece uma interface para comunicar a prioridade relativa de cada um desses fluxos. Isso ajuda o servidor a enviar os recursos mais importantes primeiro — mesmo que eles não tenham sido solicitados primeiro.
+
+A priorização do fluxo é expressa pelo navegador por meio de uma árvore de dependências e é apenas uma declaração de *preferência*: em outras palavras, o servidor não é obrigado a atender (ou mesmo considerar) as prioridades fornecidas pelo navegador. A priorização de fluxo torna-se mais eficaz quando mais de um site é servido por meio de um CDN.
+
+As implementações de CDN de priorização de recursos HTTP/2 variam enormemente. Para identificar se o seu CDN oferece suporte total e adequado à priorização de recursos HTTP/2, consulte o artigo [O HTTP/2 ainda é rápido?](https://ishttp2fastyet.com/).
+
+Embora mudar sua instância de CDN para HTTP/2 seja basicamente uma questão de ativar um botão, é importante testar completamente essa mudança antes de ativá-la na produção. HTTP/1 e HTTP/2 usam as mesmas convenções para cabeçalhos de solicitação e resposta — mas o HTTP/2 é muito menos tolerante quando essas convenções não são seguidas. Como resultado, práticas não especificadas, como incluir caracteres não ASCII ou maiúsculos em cabeçalhos, podem começar a causar erros quando o HTTP/2 for ativado. Se isso ocorrer, as tentativas do navegador de baixar o recurso falharão. A tentativa de download com falha ficará visível na guia "Rede" do DevTools. Além disso, a mensagem de erro "ERR_HTTP2_PROTOCOL_ERROR" será exibida no console.
+
+#### HTTP/3
+
+O [HTTP/3](https://en.wikipedia.org/wiki/HTTP/3) é o sucessor do [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2). Em setembro de 2020, todos os principais navegadores têm [suporte](https://caniuse.com/#feat=http3) experimental para HTTP/3 e alguns CDNs o suportam. O desempenho é o principal benefício do HTTP/3 sobre o HTTP/2. Especificamente, o HTTP/3 elimina o bloqueio frontal no nível da conexão e reduz o tempo de configuração da conexão.
+
+- **Eliminação do bloqueio frontal**
+
+    O HTTP/2 introduziu a multiplexação, um recurso que permite que uma única conexão seja usada para transmitir vários fluxos de dados simultaneamente. No entanto, com o HTTP/2, um único pacote descartado bloqueia todos os fluxos em uma conexão (um fenômeno conhecido como bloqueio frontal). Com o HTTP/3, um pacote descartado bloqueia apenas um único fluxo. Essa melhoria é em grande parte o resultado de HTTP/3 usando [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol) (o HTTP/3 usa UDP via [QUIC](https://en.wikipedia.org/wiki/QUIC) ) em vez de [TCP](https://en.wikipedia.org/wiki/Transmission_Control_Protocol). Isso torna o HTTP/3 particularmente útil para transferência de dados em redes congestionadas ou com perdas.
+
+<figure>{% Img src="image/admin/B7YKfqGG4eS2toSoTDdS.png", alt="Diagrama mostrando as diferenças na transmissão de dados entre HTTP/1, HTTP/2, e HTTP/3", width="800", height="449" %}</figure>
+
+- **Tempo de configuração de conexão reduzido**
+
+    O HTTP/3 usa TLS 1.3 e, portanto, compartilha seus benefícios de desempenho: estabelecer uma nova conexão requer apenas uma única viagem de ida e volta e retomar uma conexão existente não requer nenhuma viagem de ida e volta.
+
+<figure>{% Img src="image/admin/7ffDEjblsisTNsfkynt6.png", alt="Comparação da retomada da conexão entre TLS 1.2, TLS 1.3, TLS 1.3 0-RTT e HTTP/3", width="800", height="400" %}</figure>
+
+O HTTP/3 terá o maior impacto sobre os usuários em conexões de rede ruins: não apenas porque HTTP/3 lida com a perda de pacotes melhor do que seus predecessores, mas também porque a economia de tempo absoluta resultante de uma configuração de conexão 0-RTT ou 1-RTT será maior em redes com alta latência.
+
+### Otimização de imagem
+
+Os serviços de otimização de imagem CDN normalmente se concentram em otimizações de imagem que podem ser aplicadas automaticamente para reduzir o tamanho de transferência da imagem. Por exemplo: remoção de dados [EXIF](https://en.wikipedia.org/wiki/Exif), aplicação de compressão sem perdas e conversão de imagens em formatos de arquivo mais recentes (por exemplo, WebP). As imagens constituem cerca de 50% dos bytes de transferência na página média da web, portanto, a otimização de imagens pode reduzir significativamente o tamanho da página.
+
+### Minificação
+
+A [minimização](/reduce-network-payloads-using-text-compression/#minification) remove caracteres desnecessários de JavaScript, CSS e HTML. É preferível fazer a minificação no servidor de origem, em vez do CDN. Os proprietários do site têm mais contexto sobre o código a ser minimizado e, portanto, muitas vezes podem usar técnicas de minimização mais agressivas do que as empregadas pelos CDNs. No entanto, se a minimização do código na origem não for uma opção, a minimização pelo CDN será uma boa alternativa.
+
+## Conclusão
+
+- **Use um CDN:** os CDNs fornecem recursos rapidamente, reduzem a carga no servidor de origem e são úteis para lidar com picos de tráfego.
+- **O conteúdo do cache é o mais agressivo possível:** tanto o conteúdo estático quanto o dinâmico podem e devem ser armazenados em cache — embora por durações variáveis. Faça uma auditoria periódica em seu site para garantir que está armazenando o conteúdo em cache da maneira ideal.
+- **Ative os recursos de desempenho do CDN:** recursos como Brotli, TLS 1.3, HTTP/2 e HTTP/3 melhoram ainda mais o desempenho.
diff --git a/src/site/content/pt/fast/cookie-notice-best-practices/index.md b/src/site/content/pt/fast/cookie-notice-best-practices/index.md
new file mode 100644
index 00000000000..f3d41c70eab
--- /dev/null
+++ b/src/site/content/pt/fast/cookie-notice-best-practices/index.md
@@ -0,0 +1,239 @@
+---
+layout: post
+title: Melhores práticas para avisos de cookies
+subhead: |2
+
+  Otimize os avisos de cookies para desempenho e usabilidade.
+authors:
+  - katiehempenius
+date: 2021-03-30
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/V8rNgYUkkAWET3EkBL6H.png
+alt: Imagem de avisos de cookies.
+description: |2
+
+  Aprenda como os avisos de cookies afetam o desempenho, a medição do desempenho e a experiência do usuário.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Este artigo discute como os avisos de cookies podem afetar o desempenho, a medição do desempenho e a experiência do usuário.
+
+## Desempenho
+
+Avisos de cookies podem ter um impacto significativo no desempenho da página devido ao fato de que normalmente são carregados no início do seu processo de carregamento, além de serem exibidos para todos os usuários e possivelmente influenciarem o carregamento de anúncios e outro conteúdo da página.
+
+Veja como os avisos de cookies podem impactar as métricas Web Vitals:
+
+- **Largest Contentful Paint (LCP): a** maioria dos avisos de consentimento de cookies são bastante pequenos e, portanto, normalmente não contêm um elemento LCP da página. No entanto, isso pode acontecer - principalmente em dispositivos móveis. Em dispositivos móveis, um aviso de cookie normalmente ocupa uma parte maior da tela. Isso geralmente ocorre quando um aviso de cookie contém um grande bloco de texto (blocos de texto também podem ser elementos LCP).
+
+- **First Input Delay (FID):** De modo geral, sua solução de consentimento de cookie por si só deve ter um impacto mínimo no FID - o consentimento de cookie requer pouca execução de JavaScript. No entanto, as tecnologias que esses cookies permitem - a saber, scripts de publicidade e rastreamento - podem ter um impacto significativo na interatividade da página. Atrasar esses scripts até a aceitação do cookie pode servir como uma técnica para diminuir o First Input Delay (FID).
+
+- **Cumulative Layout Shift (CLS):** Avisos de consentimento de cookies são uma fonte muito comum de mudanças de layout.
+
+De um modo geral, você pode esperar que um aviso de cookie de fornecedores terceirizados tenha um impacto maior no desempenho do que um aviso de cookie criado por você. Este não é um problema exclusivo de avisos de cookies - mas sim a natureza dos scripts de terceiros em geral.
+
+### Melhores Práticas
+
+As melhores práticas nesta seção se concentram em avisos de cookies de terceiros. Algumas dessas práticas recomendadas, embora não todas, também se aplicam a avisos de cookies primários.
+
+#### Carregar scripts de avisos de cookies de forma assíncrona
+
+Os scripts de aviso de cookie devem ser carregados de forma assíncrona. Para fazer isso, adicione o atributo [`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) à tag de script.
+
+```html
+<script src="https://cookie-notice.com/script.js" async>
+```
+
+Os scripts que não são assíncronos bloqueiam o analisador do navegador. Isso atrasa o carregamento da página e o LCP. Para obter mais informações, consulte [Carregar JavaScript de terceiros com eficiência](/efficiently-load-third-party-javascript/).
+
+{% Aside %} Se você precisa usar scripts síncronos (por exemplo, alguns avisos de cookies dependem de scripts síncronos para implementar o bloqueio de cookies), garanta de que essa solicitação carregue o mais rápido possível. Uma maneira de fazer isso é [usar dicas de recursos](/preconnect-and-dns-prefetch/). {% endAside %}
+
+#### Carregar scripts de aviso de cookies diretamente
+
+Os scripts de aviso de cookie devem ser carregados "diretamente" colocando a tag do script no HTML do documento principal - em vez de carregados por um gerenciador de tags ou outro script. Usar um gerenciador de tags ou script secundário para injetar o script de aviso de cookie atrasa o carregamento do script de aviso de cookie: ele obscurece o script do analisador de lookahead do navegador e evita que o script carregue antes da execução do JavaScript.
+
+#### Estabeleça uma conexão antecipada com a origem do aviso de cookie
+
+Todos os sites que carregam seus scripts de aviso de cookie a partir de um local de terceiros devem usar os indicadores de recursos `dns-prefetch` ou `preconnect` para ajudar a estabelecer uma conexão antecipada com a origem que hospeda recursos de aviso de cookie. Para obter mais informações, consulte [Estabelecer conexões de rede antecipadamente para melhorar a velocidade percebida da página](/preconnect-and-dns-prefetch/) .
+
+```html
+<link rel="preconnect" href="https://cdn.cookie-notice.com/">
+```
+
+{% Aside %} É comum que os avisos de cookies carreguem recursos de várias origens - por exemplo, recursos de carregamento de `www.cookie-notice.com` e `cdn.cookie-notice.com` . Origens separadas requerem conexões separadas e, portanto, dicas de recursos separadas. {% endAside %}
+
+#### Avisos de cookies pré-carregados conforme apropriado
+
+Alguns sites se beneficiariam com o uso da indicação de recurso [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) para carregar seu script de aviso de cookie. A indicação de recurso `preload` informa ao navegador que inicie uma solicitação antecipada do recurso especificado.
+
+```html
+<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
+```
+
+`preload` é mais eficiente quando seu uso é limitado a buscar alguns recursos chave por página. Portanto, a utilidade de pré-carregar o script de aviso de cookie irá variar dependendo da situação.
+
+#### Esteja ciente das desvantagens de desempenho ao definir o estilo dos avisos de cookies
+
+Personalizar a aparência de um aviso de cookie de terceiros pode incorrer em custos de desempenho adicionais. Por exemplo, avisos de cookies de terceiros nem sempre são capazes de reutilizar os mesmos recursos (por exemplo, fontes da web) que são usados em outras partes da página. Além disso, os avisos de cookies de terceiros tendem a carregar estilo no final de longas cadeias de solicitações. Para evitar surpresas, esteja ciente de como o aviso de cookie carrega e aplica estilo e recursos relacionados.
+
+#### Evite mudanças de layout
+
+Estes são alguns dos problemas de mudança de layout mais comuns associados a avisos de cookies:
+
+- **Avisos de cookies na parte superior da tela:** os avisos de cookies na parte superior da tela são uma fonte muito comum de mudança de layout. Se um aviso de cookie for inserido no DOM após a página ao redor já ter sido renderizada, ele empurrará os elementos da página abaixo dele ainda mais para baixo na página. Esse tipo de mudança de layout pode ser eliminado reservando espaço no DOM para o aviso de consentimento. Se essa não for uma solução viável - por exemplo, se as dimensões de seu aviso de cookie variam de acordo com a localização geográfica, considere usar um rodapé ou modal para exibir o aviso de cookie. Como essas duas abordagens alternativas exibem o aviso de cookie como uma "sobreposição" no topo do restante da página, o aviso de cookie não deve causar alterações no conteúdo ao carregar.
+- **Animações**: muitos avisos de cookies usam animações - por exemplo, "deslizar" um aviso de cookies é um padrão de design comum. Dependendo de como esses efeitos são implementados, eles podem causar mudanças de layout. Para obter mais informações, consulte [Depurando mudanças de layout](/debugging-layout-shifts/).
+- **Fontes**: fontes de carregamento tardio podem bloquear a renderização e/ou causar mudanças de layout. Este fenômeno é mais aparente em conexões lentas.
+
+#### Otimizações de carregamento avançadas
+
+Essas técnicas exigem mais trabalho para serem implementadas, mas podem otimizar ainda mais o carregamento de scripts de aviso de cookie:
+
+- Armazenar em cache e servir scripts de aviso de cookie de terceiros a partir de seus próprios servidores pode melhorar a velocidade de entrega desses recursos.
+- O uso de [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers) pode permitir mais controle sobre a [busca e o armazenamento em cache de scripts de terceiros](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations) , como scripts de aviso de cookie.
+
+## Medição de desempenho
+
+Avisos de cookies podem afetar as medições de desempenho. Esta seção discute algumas dessas implicações e técnicas para mitigá-las.
+
+### Monitoramento de usuário real (RUM)
+
+Algumas ferramentas analíticas e RUM usam cookies para coletar dados de desempenho. No caso de um usuário recusar o uso de cookies, essas ferramentas não podem capturar dados de desempenho.
+
+Os sites devem estar cientes desse fenômeno; também vale a pena entender os mecanismos que seu ferramental RUM usa para coletar seus dados. No entanto, para o site típico, essa discrepância provavelmente não é causa de alarme, dada a direção e magnitude da distorção dos dados. O uso de cookies não é um requisito técnico para medição de desempenho. A [biblioteca JavaScript web-vitals](https://github.com/GoogleChrome/web-vitals) é um exemplo de biblioteca que não usa cookies.
+
+Dependendo de como seu site usa cookies para coletar dados de desempenho (ou seja, se os cookies contêm informações pessoais), bem como a legislação em questão, o uso de cookies para medição de desempenho pode não estar sujeito aos mesmos requisitos legais que alguns de os cookies usados em seu site para outros fins - por exemplo, cookies de publicidade. Alguns sites optam por separar os cookies de desempenho como uma categoria separada de cookies ao solicitar o consentimento do usuário.
+
+### Monitoramento sintético
+
+Sem configuração personalizada, a maioria das ferramentas sintéticas (como Lighthouse e WebPageTest) medirá apenas a experiência de um usuário iniciante que não respondeu a um aviso de consentimento de cookie. No entanto, não só as variações no estado do cache (por exemplo, uma visita inicial versus uma visita repetida) precisam ser consideradas ao coletar dados de desempenho, mas também as variações no estado de aceitação do cookie - aceito, rejeitado ou não respondido.
+
+As seções a seguir discutem as configurações de WebPageTest e Lighthouse que podem ser úteis para incorporar avisos de cookies em fluxos de trabalho de medição de desempenho. No entanto, cookies e avisos de cookies são apenas um dos muitos fatores que podem ser difíceis de simular perfeitamente em ambientes de laboratório. Por esse motivo, é importante fazer dos [dados RUM](/user-centric-performance-metrics/#how-metrics-are-measured) a base de seu benchmarking de desempenho, em vez de ferramentas sintéticas.
+
+### Testando avisos de cookies com WebPageTest
+
+#### Scripting
+
+Você pode usar o script para que um [WebPageTest](https://webpagetest.org/) "clique" no banner de consentimento do cookie enquanto coleta um rastreamento.
+
+Adicione um script acessando a guia **Script.** O script abaixo navega até o URL a ser testado e clica no elemento DOM com o id `cookieButton` .
+
+{% Aside 'caution' %} Scripts WebPageTest são [delimitados por tabulação](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#scripting). {% endAside %}
+
+```shell
+combineSteps
+navigate    %URL%
+clickAndWait    id=cookieButton
+```
+
+Ao usar este script, esteja ciente de que:
+
+- `combineSteps` informa ao WebPageTest para "combinar" os resultados das etapas de script que se seguem em um único conjunto de rastreios e medidas. Executar esse script sem `combineSteps` também pode ser útil - rastros separados facilitam visualizar se os recursos foram carregados antes ou depois da aceitação do cookie.
+- `%URL%` é uma convenção WebPageTest que se refere ao URL que está sendo testado.
+- `clickAndWait` informa ao WebPageTest para clicar no elemento indicado por `attribute=value` e aguardar a conclusão da atividade subsequente do navegador. Ele segue o formato `clickAndWait attribute=Value` .
+
+Se você configurou este script corretamente, a captura de tela tirada pelo WebPageTest não deve mostrar um aviso de cookie (o aviso de cookie foi aceito).
+
+Para obter mais informações sobre scripts WebPageTest, verifique a [documentação do WebPageTest](https://docs.webpagetest.org/scripting/) .
+
+#### Definir cookies
+
+Para executar o WebPageTest com um conjunto de cookies, vá para a guia **Avançado** e adicione o cabeçalho do cookie ao campo **Cabeçalhos personalizados:**
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/qSccrAxF0H4yoSzYRYdh.png", alt="Captura de tela mostrando o campo 'Cabeçalhos personalizados' em WebPageTest", width="800", height="181" %}
+
+#### Mude o local do teste
+
+Para alterar o local de teste usado pelo WebPageTest, clique no menu suspenso **Local de teste** localizado na guia **Teste avançado.**
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/J27NcDQ5LTtXYloaA1DN.png", alt="Captura de tela da lista suspensa 'Localização de teste' em WebPageTest", width="800", height="267" %}
+
+### Testando avisos de cookies com o Lighthouse
+
+Definir cookies em uma execução do Lighthouse pode servir como um mecanismo para colocar uma página em um determinado estado para teste pelo Lighthouse. O comportamento do cookie do Lighthouse varia ligeiramente de acordo com o contexto (DevTools, CLI ou PageSpeed Insights).
+
+#### DevTools
+
+Os cookies não são apagados quando o Lighthouse é executado no DevTools. No entanto, outros tipos de armazenamento são limpos por padrão. Esse comportamento pode ser alterado usando a opção **Limpar armazenamento** no painel de configurações do **Lighthouse**.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/nmNDeSoGEQUVKeTP7q7R.png", alt="Captura de tela destacando a opção 'Limpar armazenamento' do Lighthouse", width="800", height="304" %}
+
+#### CLI
+
+A execução do Lighthouse a partir da CLI usa uma nova instância do Chrome, portanto, nenhum cookie é definido por padrão. Para executar o Lighthouse a partir da CLI com um conjunto de cookies específico, use o seguinte [comando](https://github.com/GoogleChrome/lighthouse#cli-options) :
+
+```shell
+lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
+```
+
+Para obter mais informações sobre a configuração de cabeçalhos de solicitação personalizados no Lighthouse CLI, consulte [Executando o Lighthouse em páginas autenticadas](https://github.com/GoogleChrome/lighthouse/blob/master/docs/authenticated-pages.md) .
+
+#### PageSpeed Insights
+
+Executar o Lighthouse a partir do PageSpeed Insights usa uma nova instância do Chrome e não define nenhum cookie. O PageSeed Insights não pode ser configurado para definir cookies específicos.
+
+## Experiência de usuário
+
+A experiência do usuário (UX) de diferentes avisos de consentimento de cookie é principalmente o resultado de duas decisões: a localização do aviso de cookie na página e até que ponto o usuário pode personalizar o uso de cookies de um site. Esta seção discute abordagens potenciais para essas duas decisões.
+
+{% Aside 'caution' %} A UX de notificação de cookies muitas vezes sofre forte influência da legislação, que pode variar muito de acordo com a localização geográfica. Portanto, alguns dos padrões de design discutidos nesta seção podem não ser relevantes para a sua situação específica. Este artigo não deve ser considerado como um substituto para orientações jurídicas. {% endAside %}
+
+Ao considerar possíveis designs para seu aviso de cookie, aqui estão algumas coisas a serem consideradas:
+
+- UX: esta é uma boa experiência do usuário? Como esse design específico afetará os elementos da página e os fluxos do usuário existentes?
+- Negócios: qual é a estratégia de cookies do seu site? Quais são seus objetivos para o aviso de cookie?
+- Legal: está em conformidade com os requisitos legais?
+- Engenharia: quanto trabalho seria necessário para implementar e manter? Seria difícil mudar?
+
+### Posicionamento
+
+Os avisos de cookies podem ser exibidos como um cabeçalho, elemento embutido ou rodapé. Eles também podem ser exibidos no topo do conteúdo da página usando um modal ou veiculados como um [intersticial](https://en.wikipedia.org/wiki/Interstitial_webpage) .
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/LLqHAhp7W6x4E3rZh0Oc.png", alt="Diagrama mostrando exemplos de diferentes opções de posicionamento para avisos de cookies", width="800", height="345"%}
+
+#### Avisos de cookies de cabeçalho, rodapé e embutidos
+
+Avisos de cookies são geralmente posicionados no cabeçalho ou rodapé. Dessas duas opções, o posicionamento do rodapé é geralmente preferível porque é discreto, não concorre por atenção com anúncios em banner ou notificações e normalmente não causa CLS. Além disso, é um local comum para o posicionamento de políticas de privacidade e termos de uso.
+
+Embora os avisos de cookies embutidos sejam uma opção, eles podem ser difíceis de integrar nas interfaces de usuário existentes e, portanto, são incomuns.
+
+#### Modais
+
+Modais são avisos de consentimento de cookies exibidos na parte superior do conteúdo da página. Os modais podem ter uma aparência e um desempenho bastante diferentes, dependendo de seu tamanho.
+
+Modais menores de tela parcial podem ser uma boa alternativa para sites com obstáculos para implementar avisos de cookies de uma maneira que não cause [mudanças de layout](/cls/).
+
+Por outro lado, grandes modais que obscurecem a maior parte do conteúdo da página devem ser usados com cuidado. Em particular, sites menores podem descobrir que os usuários rejeitam em vez de aceitam o aviso de cookie de um site desconhecido com conteúdo obscurecido. Embora não sejam conceitos necessariamente sinônimos, se você está pensando em usar um modal de consentimento de cookies de tela inteira, deve estar ciente da legislação relativa às [paredes de cookies](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/).
+
+{% Aside %} Modais grandes podem ser considerados um tipo de intersticial. A Pesquisa Google [não penaliza](https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on) o uso de intersticiais quando eles são usados para cumprir regulamentos legais, como no caso de banners de cookies. No entanto, o uso de intersticiais em outros contextos, especialmente se eles forem intrusivos ou criarem uma experiência ruim para o usuário, pode ser penalizado. {% endAside %}
+
+### Configurabilidade
+
+As interfaces de notificação de cookies fornecem aos usuários vários níveis de controle sobre quais cookies eles aceitam.
+
+#### Sem configurabilidade
+
+Esses banners de cookies com estilo de aviso não proporcionam aos usuários controles diretos de experiência do usuário para excluir cookies. Em vez disso, eles normalmente incluem um link para a política de cookies do site que pode fornecer aos usuários informações sobre como gerenciar cookies usando o navegador da web. Esses avisos geralmente incluem um botão "Ignorar" e/ou "Aceitar".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/RlAg8DCjBC0bX7Ki5MuE.png", alt="Diagrama mostrando exemplos de avisos de cookies sem configurabilidade de cookies", width="800", height="518"%}
+
+#### Alguma capacidade de configuração
+
+Esses avisos de cookies fornecem ao usuário a opção de recusar cookies, mas não oferecem suporte a controles mais granulares. Essa abordagem para avisos de cookies é menos comum.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/MOl8u9NcnyjCWogxzjdz.png", alt="Diagrama mostrando exemplos de avisos de cookies com alguma configurabilidade de cookies", width="800", height="508"%}
+
+#### Configurabilidade total
+
+Esses avisos de cookies fornecem aos usuários controles mais refinados para configurar o uso de cookies que eles aceitam.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QfFoqkkmdKHAYlftIH0n.png", alt="Diagrama mostrando exemplos de avisos cookie com configurabilidade total do cookie", width="800", height="467"%}
+
+- **UX:** os controles para configurar o uso de cookies são geralmente exibidos usando um modal separado que é iniciado quando o usuário responde ao aviso de consentimento de cookie inicial. No entanto, se o espaço permitir, alguns sites exibirão esses controles embutidos no aviso de consentimento de cookie inicial.
+
+- **Granularidade:** a abordagem mais comum para a configuração de cookies é permitir que os usuários optem por cookies por "categoria" de cookie. Exemplos de categorias de cookies comuns incluem cookies funcionais, de segmentação e de mídia social.
+
+    No entanto, alguns sites dão um passo além e permitem que os usuários optem pelos cookies individualmente. Como alternativa, outra maneira de fornecer aos usuários controles mais específicos é dividir as categorias de cookies como "publicidade" em casos de uso específicos - por exemplo, permitindo que os usuários optem separadamente por "anúncios básicos" e "anúncios personalizados".
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/z7zFPtCkFi8GEpkfubek.png", alt="Diagrama mostrando exemplos de avisos de cookies com configurabilidade total de cookies", width="800", height="372"%}
diff --git a/src/site/content/pt/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/pt/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..fe56ae1fca7
--- /dev/null
+++ b/src/site/content/pt/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,152 @@
+---
+layout: post
+title: Carregar JavaScript de terceiros com eficiência
+subhead: Evite as armadilhas comuns de usar scripts de terceiros para melhorar o tempo de carregamento e a experiência do usuário.
+authors:
+  - mihajlija
+date: 2019-08-14
+description: |2
+
+  Aprenda como evitar as armadilhas comuns do uso de scripts de terceiros para melhorar o tempo de carregamento e a experiência do usuário.
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: Vista aérea de contêineres.
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+Se um script de terceiros está [retardando](/third-party-javascript/) o carregamento da página, você tem duas opções para melhorar o desempenho:
+
+- Remova-o se não agregar valor ao seu site.
+
+- Otimize o processo de carregamento.
+
+Esta postagem explica como otimizar o processo de carregamento de scripts de terceiros com as seguintes técnicas:
+
+1. Uso do atributo `async` ou `defer` nas tags `<script>`
+
+2. Estabelecimento de conexões iniciais com as origens necessárias
+
+3. Carregamento lento
+
+4. Otimização de como você veicula scripts de terceiros
+
+## Use `async` ou `defer`
+
+Como os [scripts síncronos](/third-party-javascript/) atrasam a construção e a renderização do DOM, você sempre deve carregar scripts de terceiros de forma assíncrona, a menos que o script precise ser executado antes que a página possa ser renderizada.
+
+Os atributos `async` e `defer` informam ao navegador que ele pode continuar analisando o HTML ao carregar o script em segundo plano e, em seguida, executar o script após o carregamento. Dessa forma, os downloads de script não bloqueiam a construção do DOM e a renderização da página. O resultado é que o usuário pode ver a página antes que todos os scripts tenham terminado de carregar.
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+A diferença entre `async` e `defer` é quando eles começam a executar os scripts.
+
+### `async`
+
+Scripts com o atributo `async` são executados na primeira oportunidade depois de concluírem o download e antes do evento de [carregamento da janela.](https://developer.mozilla.org/docs/Web/Events/load) Isso significa que é possível (e provável) que os scripts com `async` não sejam executados na ordem em que aparecem no HTML. Isso também significa que eles podem interromper a construção do DOM se concluírem o download enquanto o analisador ainda está em funcionamento.
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="Diagrama do script de bloqueio do analisador com atributo assíncrono", width="800", height="252" %}
+
+### `defer`
+
+Scripts com o atributo `defer` são executados depois que a análise de HTML é completamente concluída, mas antes do evento [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded). `defer` garante que os scripts serão executados na ordem em que aparecem no HTML e não bloquearão o analisador.
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="Diagrama de fluxo do analisador com um script com atributo defer", width="800", height="253" %}
+
+- Use `async` se for importante que o script seja executado no início do processo de carregamento.
+
+- Use `defer` para recursos menos críticos. Um reprodutor de vídeo na metade inferior da página, por exemplo.
+
+Usar esses atributos pode acelerar significativamente o carregamento da página. Por exemplo, o [Telegraph adiou recentemente todos os seus scripts](https://medium.com/p/a0a1000be5#4123), incluindo anúncios e análises, e melhorou o tempo de carregamento do anúncio em uma média de quatro segundos.
+
+{% Aside %} Os scripts de análise geralmente são carregados cedo para que você não perca nenhum dado valioso de análise. Felizmente, existem [padrões para inicializar a análise lentamente,](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/) enquanto retém os dados de carregamento de página iniciais. {% endAside %}
+
+## Estabeleça conexões iniciais com as origens necessárias
+
+Você pode economizar 100–500 ms [estabelecendo conexões antecipadas](/preconnect-and-dns-prefetch/) com origens importantes de terceiros.
+
+Dois tipos de [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) podem ser úteis aqui:
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+`<link rel="preconnect">` informa ao navegador que sua página pretende estabelecer uma conexão com outra origem e que deseja que o processo seja iniciado o mais rápido possível. Quando a solicitação de um recurso da origem pré-conectada é feita, o download é iniciado imediatamente.
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %} Faça a pré-conexão apenas a domínios críticos que você usará em breve, porque o navegador fecha qualquer conexão que não seja usada em 10 segundos. A pré-conexão desnecessária pode atrasar outros recursos importantes, portanto, limite o número de domínios pré-conectados e [teste o impacto da pré-conexão](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/). {% endAside %}
+
+### `dns-prefetch`
+
+`<link rel="dns-prefetch>` lida com um pequeno subconjunto do que é tratado por `<link rel="preconnect">`. Estabelecer uma conexão envolve a pesquisa de DNS, o aperto de mãos de TCP e, para origens seguras, negociações de TLS. `dns-prefetch` instrui o navegador a resolver apenas o DNS de um domínio específico antes de ser explicitamente chamado.
+
+A dica `preconnect` é melhor usada apenas para as conexões mais críticas. Para domínios de terceiros menos críticos, use `<link rel=dns-prefetch>`.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+O [suporte do navegador para `dns-prefetch`](https://caniuse.com/#search=dns-prefetch) é um pouco diferente do suporte para [`preconnect`](https://caniuse.com/#search=preconnect), então `dns-prefetch` pode servir como um substituto para navegadores que não oferecem suporte para `preconnect`. Use tags de link separadas para implementar isso com segurança:
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## Recursos de terceiros de carregamento lento
+
+Recursos de terceiros incorporados podem ser um grande contribuidor para diminuir a velocidade da página quando são mal construídos. Se não forem essenciais ou estiverem na parte inferior da página (ou seja, se os usuários tiverem que rolar para visualizá-los), o carregamento lento é uma boa maneira de melhorar a velocidade da página e as métricas de pintura. Dessa forma, os usuários obterão o conteúdo da página principal com mais rapidez e terão uma experiência melhor.
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="Um diagrama de uma página da web mostrado em um dispositivo móvel com conteúdo rolável que se estende além da tela. O conteúdo na parte inferior está dessaturado porque não foi carregado ainda.", width="366", height="438" %}</figure>
+
+Uma abordagem eficaz é carregar lentamente o conteúdo de terceiros após o carregamento do conteúdo da página principal. Os anúncios são um bom candidato para essa abordagem.
+
+Os anúncios são uma importante fonte de renda para muitos sites, mas os usuários vêm pelo conteúdo. Ao carregar lentamente os anúncios e entregar o conteúdo principal com mais rapidez, você pode aumentar a porcentagem geral de visibilidade de um anúncio. Por exemplo, o MediaVine mudou para [anúncios de carregamento lento](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/) e observou uma melhoria de 200% na velocidade de carregamento da página. A DoubleClick tem orientações sobre como fazer o carregamento lento de anúncios em sua [documentação oficial](https://support.google.com/dfp_premium/answer/4578089#lazyloading).
+
+Uma abordagem alternativa é carregar conteúdo de terceiros apenas quando os usuários rolar para baixo até essa seção da página.
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/) é uma API do navegador que detecta com eficiência quando um elemento entra ou sai da janela de visualização e pode ser usada para implementar essa técnica. [lazysizes](/use-lazysizes-to-lazyload-images/) é uma biblioteca de JavaScript famosa para imagens de carregamento lento e [`iframes`](http://afarkas.github.io/lazysizes/#examples). Suporta incorporações do YouTube e [widgets](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks). Também tem [suporte opcional](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js) para IntersectionObserver.
+
+{% Aside 'caution' %} Tenha cuidado ao carregar lentamente recursos com JavaScript. Se o JavaScript falhar ao carregar, talvez devido a condições de rede instáveis, seus recursos não serão carregados. {% endAside %}
+
+Usar o atributo [`loading` para imagens de carregamento lento e iframes](/browser-level-image-lazy-loading/) é uma ótima alternativa às técnicas de JavaScript e recentemente se tornou disponível no Chrome 76!
+
+## Otimize a forma como você veicula scripts de terceiros
+
+### Hospedagem de CDN de terceiros
+
+É comum que fornecedores terceirizados forneçam URLs de arquivos JavaScript que eles hospedam, geralmente em uma [rede de distribuição de conteúdo (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network). Os benefícios dessa abordagem são que você pode começar rapidamente. Basta copiar e colar a URL, não há sobrecarga de manutenção. O fornecedor terceirizado cuida da configuração do servidor e das atualizações de script.
+
+Mas, como eles não são da mesma origem do restante de seus recursos, o carregamento de arquivos de um CDN público tem um custo de rede. O navegador precisa realizar uma pesquisa de DNS, estabelecer uma nova conexão HTTP e, em origens seguras, realizar um aperto de mãos de SSL com o servidor do fornecedor.
+
+Quando você usa arquivos de servidores de terceiros, raramente tem controle sobre o cache. Depender da estratégia de cache de outra pessoa pode fazer com que os scripts sejam recuperados desnecessariamente na rede com muita frequência.
+
+### Scripts de terceiros para hospedagem própria
+
+A auto-hospedagem de scripts de terceiros é uma opção que oferece mais controle sobre o processo de carregamento de um script. Ao hospedar por conta própria, você pode:
+
+- Reduzir a consulta de DNS e os tempos de ida e volta.
+- Melhorar os cabeçalhos de [cache HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching).
+- Aproveitar as vantagens do [push de servidor HTTP/2](/performance-http2/).
+
+Por exemplo, Casper conseguiu [reduzir em 1,7 segundo o tempo de carregamento](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) ao hospedar por conta própria um script de teste A/B.
+
+A auto-hospedagem vem com uma grande desvantagem: os scripts podem ficar desatualizados e não receberão atualizações automáticas quando houver uma alteração de API ou uma correção de segurança.
+
+{% Aside 'caution' %}
+
+Atualizar scripts manualmente pode adicionar muita sobrecarga ao seu processo de desenvolvimento e você pode perder atualizações importantes. Se não estiver usando a hospedagem de CDN para atender a todos os recursos, você também estará perdendo o [cache de borda](https://www.cloudflare.com/learning/cdn/glossary/edge-server/) e terá que otimizar a compactação do seu servidor. {% endAside%}
+
+### Use trabalhos de serviço para armazenar scripts de servidores de terceiros
+
+Uma alternativa à auto-hospedagem que permite maior controle sobre o armazenamento em cache e, ao mesmo tempo, obtém os benefícios de CDN de terceiros é [usar trabalhos de serviço para armazenar scripts de servidores de terceiros](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations). Isso dá a você controle sobre a frequência com que os scripts são buscados novamente na rede e torna possível criar uma estratégia de carregamento que limita as solicitações de recursos não essenciais de terceiros, até que a página alcance um momento-chave do usuário. Usar a `preconnect`, conexão para estabelecer conexões antecipadas, neste caso, também pode reduzir os custos de rede até certo ponto.
diff --git a/src/site/content/pt/fast/extract-critical-css/index.md b/src/site/content/pt/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..ec49d1501f3
--- /dev/null
+++ b/src/site/content/pt/fast/extract-critical-css/index.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Extraia CSS crítico
+subhead: Aprenda como melhorar os tempos de renderização com técnicas críticas de CSS.
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: Uma foto plana de chaves e chaves de fendas.
+description: |2
+
+  Aprenda como melhorar os tempos de renderização com técnicas críticas de CSS e como escolher a melhor ferramenta para seu projeto.
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+O navegador deve baixar e analisar os arquivos CSS antes de mostrar a página, o que torna o CSS um recurso de bloqueio de renderização. Se os arquivos CSS forem grandes ou as condições da rede forem ruins, as solicitações de arquivos CSS podem aumentar significativamente o tempo de renderização de uma página da web.
+
+{% Aside 'key-term' %} CSS crítico é uma técnica que extrai o CSS para conteúdo acima da dobra, a fim de renderizar o conteúdo para o usuário o mais rápido possível. {% endAside %}
+
+<figure>{% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="Uma ilustração de um laptop e um dispositivo móvel com páginas da web ultrapassando as bordas das telas", width="800", height="469", class="" %}</figure>
+
+{% Aside 'note' %} Acima da dobra está todo o conteúdo que um visualizador vê no carregamento da página antes de rolar. Não existe uma altura de pixel definida universalmente do que é considerado conteúdo acima da dobra, pois há uma infinidade de dispositivos e tamanhos de tela. {% endAside %}
+
+Colocar inline estilos extraídos no `<head>` do documento HTML elimina a necessidade de fazer uma solicitação adicional para buscar esses estilos. O restante do CSS pode ser carregado de forma assíncrona.
+
+<figure>{% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="arquivo HTML com CSS crítico inline (embutido) no cabeçalho", width="800", height="325" %} <figcaption> CSS crítico inline </figcaption></figure>
+
+Melhorar os tempos de renderização pode fazer uma grande diferença no [desempenho percebido](/rail/#focus-on-the-user) , especialmente em caso más condições de rede. Em redes móveis, a alta latência é um problema, independentemente da largura de banda.
+
+<figure>{% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="Comparação da visualização da película de filme do carregamento de uma página com CSS de bloqueio de renderização (parte superior) e a mesma página com CSS crítico inline (parte inferior) em uma conexão 3G. tira de filme mostra seis quadros em branco antes de finalmente exibir o conteúdo. Tira de filme inferior exibe conteúdo significativo no primeiro quadro.", width="800", height="363" %} <figcaption> Comparação do carregamento de uma página com CSS de bloqueio de renderização (parte superior) e a mesma página com CSS crítico inline (parte inferior) em uma conexão 3G </figcaption></figure>
+
+Se você tem um [First Contentful Paint (FCP)](/fcp/) ruim e vê a oportunidade "Eliminar recurso de bloqueio de renderização" nas auditorias do Lighthouse, é uma boa ideia dar uma chance ao CSS crítico.
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="Auditoria do Lighthouse com 'Eliminar recurso de bloqueio de renderização' ou oportunidades de 'Adiar CSS não utilizado'", width="743", height="449" %}
+
+{% Aside 'gotchas' %} Lembre-se de que se você colocar uma grande quantidade de CSS inline, isso atrasará a transmissão do restante do documento HTML. Se tudo for priorizado, nada será. Colocar como inline também tem algumas desvantagens, pois evita que o navegador armazene o CSS em cache para reutilização em carregamentos de página subsequentes, portanto, é melhor usá-lo com moderação. {% endAside %}
+
+<p id="14KB">Para minimizar o número de idas e voltas para a primeira renderização, tente manter o conteúdo acima da dobra abaixo de <strong>14 KB</strong> (compactado).</p>
+
+{% Aside 'note' %} Novas conexões [TCP](https://hpbn.co/building-blocks-of-tcp/) não podem usar imediatamente toda a largura de banda disponível entre o cliente e o servidor, todas elas passam por [uma inicialização lenta](https://hpbn.co/building-blocks-of-tcp/#slow-start) para evitar sobrecarregar a conexão com mais dados do que ela pode transportar. Nesse processo, o servidor inicia a transferência com uma pequena quantidade de dados e se chegar ao cliente em perfeitas condições, dobra a quantidade na próxima ida e volta. Para a maioria dos servidores, 10 pacotes ou aproximadamente 14 KB é o máximo que pode ser transferido na primeira viagem de ida e volta. {% endAside %}
+
+O impacto no desempenho que você pode obter com essa técnica depende do tipo de seu site. De modo geral, quanto mais CSS um site tiver, maior será o impacto possível do CSS inline.
+
+## Visão geral das ferramentas
+
+Existem várias ferramentas excelentes que podem determinar automaticamente o CSS essencial para uma página. Esta é uma boa notícia porque fazer isso manualmente seria um processo tedioso. Requer análise de todo o DOM para determinar os estilos que são aplicados a cada elemento na janela de visualização.
+
+### Critical
+
+O [Critical](https://github.com/addyosmani/critical) extrai, minimiza e alinha CSS acima da dobra e está disponível como [módulo npm](https://www.npmjs.com/package/critical) . Ele pode ser usado com Gulp (diretamente) ou com Grunt (como um [plugin](https://github.com/bezoerb/grunt-critical) ) e há também um [plugin webpack](https://github.com/anthonygore/html-critical-webpack-plugin).
+
+É uma ferramenta simples que exige muito raciocínio durante o processo. Você nem mesmo precisa especificar as folhas de estilo, o Critical as detecta automaticamente. Ele também suporta a extração de CSS crítico para várias resoluções de tela.
+
+### criticalCSS
+
+O [CriticalCSS](https://github.com/filamentgroup/criticalCSS) é outro [módulo npm](https://www.npmjs.com/package/criticalcss) que extrai CSS acima da dobra. Também está disponível como CLI.
+
+Ele não tem opções para embutir e minimizar CSS crítico, mas permite que você force a inclusão de regras que não pertencem realmente ao CSS crítico e dá a você um controle mais granular sobre a inclusão de declarações `@font-face`
+
+### Penthouse
+
+[Penthouse](https://github.com/pocketjoso/penthouse) é uma boa escolha se seu site ou aplicativo tem um grande número de estilos ou estilos que estão sendo injetados dinamicamente no DOM (comum em aplicativos Angular). Ele usa o [Puppeteer](https://github.com/GoogleChrome/puppeteer) nos bastidores e ainda apresenta também uma [versão hospedada online](https://jonassebastianohlsson.com/criticalpathcssgenerator/).
+
+O Penthouse não detecta folhas de estilo automaticamente. Você precisa especificar os arquivos HTML e CSS para os quais deseja gerar CSS crítico. A vantagem é que ele é bom para executar muitos jobs em paralelo.
diff --git a/src/site/content/pt/fast/image-cdns/index.md b/src/site/content/pt/fast/image-cdns/index.md
new file mode 100644
index 00000000000..b93a8f8a84e
--- /dev/null
+++ b/src/site/content/pt/fast/image-cdns/index.md
@@ -0,0 +1,82 @@
+---
+layout: post
+title: Use CDNs de imagem para otimizar imagens
+authors:
+  - katiehempenius
+description: |-
+  Os CDNs de imagem são excelentes para otimizar imagens.
+
+  Mudar para um CDN de imagem pode gerar uma economia de 40 a 80% em bytes de imagens.
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## Por que usar um CDN de imagem?
+
+As redes de entrega de conteúdo de imagem (CDNs) são excelentes na otimização de imagens. Mudar para um CDN de imagem pode [resultar em uma economia de 40 a 80%](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s) no tamanho do arquivo de imagem. Em teoria, é possível obter os mesmos resultados usando apenas scripts de construção, mas isso é raro na prática.
+
+## O que é um CDN de imagem?
+
+Os CDNs de imagens são especializados na transformação, otimização e entrega de imagens. Você também pode pensar neles como APIs para acessar e manipular as imagens usadas em seu site. Para imagens carregadas de um CDN de imagem, um URL de imagem indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso facilita a criação de variações de uma imagem para diferentes casos de uso.
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="Mostra o fluxo de solicitação / resposta entre o CDN da imagem e o cliente. Parâmetros como tamanho e formato são usados para solicitar variações da mesma imagem.", width="800", height="408" %} <figcaption> Exemplos de transformações de CDNs de imagem podem ser executados com base em parâmetros em URLs de imagem.</figcaption></figure>
+
+Os CDNs de imagem são diferentes dos scripts de otimização de imagem em tempo de criação, pois eles criam novas versões de imagens conforme necessário. Como resultado, os CDNs geralmente são mais adequados para criar imagens altamente customizadas para cada cliente individual do que os scripts de construção.
+
+## Como os CDNs de imagem usam URLs para indicar opções de otimização
+
+Os URLs de imagem usados por CDNs de imagem transmitem informações importantes sobre uma imagem e as transformações e otimizações que devem ser aplicadas a ela. Os formatos de URL variam de acordo com o CDN da imagem, mas, em geral, todos têm recursos semelhantes. Vamos examinar alguns dos recursos mais comuns.
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="URLs de imagem normalmente consistem nos seguintes componentes: origem, imagem, chave de segurança e transformações.", width="800", height="127" %}</figure>
+
+### Origem
+
+Um CDN de imagem pode residir em seu próprio domínio ou no domínio de seu CDN de imagem. Os CDNs de imagens de terceiros geralmente oferecem a opção de usar um domínio personalizado mediante o pagamento de uma taxa. Usar seu próprio domínio facilita a troca de CDNs de imagem posteriormente, porque nenhuma alteração de URL será necessária.
+
+O exemplo acima usa o domínio do CDN de imagem ("example-cdn.com") com um subdomínio personalizado em vez de um domínio personalizado.
+
+### Imagem
+
+Os CDNs de imagem geralmente podem ser configurados para recuperar automaticamente imagens de seus locais existentes quando necessário. Esse recurso geralmente é obtido incluindo o URL completo da *imagem existente* dentro do URL para a imagem gerada pelo CDN de imagem. Por exemplo, você pode ver um URL parecido com este: `https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto` . Este URL recuperaria e otimizaria a imagem em `https://flowers.com/daisy.jpg`.
+
+Outra forma amplamente aceita de enviar imagens para um CDN de imagem é enviá-las por meio de uma solicitação HTTP POST para a API do CDN de imagem.
+
+### Chave de segurança
+
+Uma chave de segurança impede que outras pessoas criem novas versões de suas imagens. Se esse recurso estiver ativado, cada nova versão de uma imagem exigirá uma chave de segurança exclusiva. Se alguém tentar alterar os parâmetros do URL da imagem mas não fornecer uma chave de segurança válida, não será possível criar uma nova versão. Seu CDN de imagem cuidará dos detalhes de geração e rastreamento das chaves de segurança para você.
+
+### Transformações
+
+Os CDNs de imagem oferecem dezenas, e em alguns casos centenas de diferentes transformações de imagem. Essas transformações são especificadas por meio da string de URL e não há restrições sobre o uso de várias transformações ao mesmo tempo. No contexto de desempenho na web, as transformações de imagem mais importantes são tamanho, densidade de pixels, formato e compactação. Essas transformações são o motivo pelo qual alternar para um CDN de imagem normalmente resulta em uma redução significativa no tamanho da imagem.
+
+Tende a ser uma configuração objetivamente melhor para transformações de desempenho, portanto, alguns CDNs de imagem suportam um modo "automático" para essas transformações. Por exemplo, em vez de especificar que as imagens sejam transformadas no formato WebP, você pode permitir que o CDN selecione automaticamente e forneça o formato ideal. Os sinais que um CDN de imagem pode usar para determinar a melhor maneira de transformar uma imagem incluem:
+
+- [Dicas do cliente](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/) (por exemplo, largura da janela de visualização, DPR e largura da imagem)
+- O cabeçalho [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data)
+- O cabeçalho da solicitação [User-Agent](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent)
+- A [API de informações de rede](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+
+Por exemplo, a imagem CDN pode servir JPEG XR para um navegador Edge, WebP para um navegador Chrome e JPEG para um navegador muito antigo. As configurações automáticas são populares porque permitem que você aproveite a experiência significativa dos CDNs de imagem na otimização de imagens sem a necessidade de alterações de código para adotar novas tecnologias, uma vez que são suportadas pelo CDN de imagem.
+
+## Tipos de CDNs de imagem
+
+Os CDNs de imagem podem ser divididos em duas categorias: autogerenciados e gerenciados por terceiros.
+
+### CDNs de imagem autogerenciados
+
+Os CDNs autogerenciados podem ser uma boa escolha para sites com uma equipe de engenharia que se sente confortável em manter sua própria infraestrutura.
+
+[Thumbor](https://github.com/thumbor/thumbor) é o único CDN de imagem autogerenciado disponível atualmente. Embora seja de código aberto e de uso gratuito, geralmente tem menos recursos do que a maioria dos CDNs comerciais e sua documentação é um tanto limitada. [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor) , [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87) e [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/) são três sites que usam o Thumbor. Consulte o artigo [Como instalar o CDN da imagem Thumbor](/install-thumbor) para obter instruções sobre como configurá-lo.
+
+### CDNs de imagem de terceiros
+
+Os CDNs de imagem de terceiros fornecem CDNs de imagem como um serviço. Assim como os provedores de nuvem fornecem servidores e outras infraestruturas mediante uma taxa. Os CDNs de imagens fornecem otimização e entrega de imagens mediante o pagamento de uma taxa. Como os CDNs de imagem de terceiros mantêm a tecnologia subjacente, o início é bastante simples e geralmente pode ser realizado em 10 a 15 minutos, embora uma migração completa para um site grande possa demorar muito mais. Os CDNs de imagem de terceiros são normalmente cobrados com base nas camadas de uso, com a maioria dos CDNs de imagem fornecendo uma camada gratuita ou uma avaliação gratuita para dar a você a oportunidade de experimentar seu produto.
+
+## Escolhendo um CDN de imagem
+
+Existem muitas opções boas para CDNs de imagem. Alguns contam com mais recursos do que outros, mas todos provavelmente irão ajudar você a economizar bytes em suas imagens e, portanto, carregar suas páginas mais rápido. Além dos conjuntos de recursos, outros fatores a serem considerados ao escolher um CDN de imagem são custo, suporte, documentação e facilidade de configuração ou migração.
+
+Experimentá-los antes de tomar uma decisão também pode ser útil. Abaixo você pode encontrar codelabs com instruções sobre como começar rapidamente com vários CDNs de imagem.
diff --git a/src/site/content/pt/fast/index.md b/src/site/content/pt/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/pt/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/pt/fast/lazy-loading-images/index.md b/src/site/content/pt/fast/lazy-loading-images/index.md
new file mode 100644
index 00000000000..24d395b5a77
--- /dev/null
+++ b/src/site/content/pt/fast/lazy-loading-images/index.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Imagens de carregamento lento
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2022-08-11
+description: |2-
+
+  Esta publicação explica o carregamento lento e as opções disponíveis para você ao fazer o carregamento lento.
+tags:
+  - performance
+  - images
+feedback:
+  - api
+---
+
+As imagens podem aparecer em uma página da web por estarem embutidas no HTML como `<img>` ou como imagens de fundo CSS. Nesta publicação, você descobrirá como fazer o carregamento lento de ambos os tipos de imagem.
+
+## Imagens inline {: #images-inline }
+
+Os candidatos de carregamento lento mais comuns são as imagens usadas nos elementos `<img>`. Com imagens embutidas, temos três opções para carregamento lento, que podem ser usadas em combinação para a melhor compatibilidade entre os navegadores:
+
+- [Usando o carregamento lento no nível do navegador](#images-inline-browser-level)
+- [Usando o observador de interseção](#images-inline-intersection-observer)
+- [Usando manipuladores de eventos de rolagem e redimensionamento](#images-inline-event-handlers)
+
+### Usando carregamento lento no nível do navegador {: #images-inline-browser-level }
+
+O Chrome e o Firefox oferecem suporte ao carregamento lento com o atributo de `loading`. Este atributo pode ser adicionado aos `<img>` e também aos elementos `<iframe>`. Um valor `lazy` informa ao navegador para carregar a imagem imediatamente se ela estiver na janela de visualização e para buscar outras imagens quando o usuário rolar próximo a elas.
+
+{% Aside %} Observe que `<iframe loading="lazy">` atualmente não é padrão. Embora implementado no Chromium, ele ainda não possui uma especificação e está sujeito a alterações futuras quando isso acontecer. Sugerimos não fazer o carregamento lento de iframes usando o `loading` até que ele se torne parte da especificação. {% endAside %}
+
+Consulte o campo de `loading` da tabela de [compatibilidade do navegador](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility) do MDN para obter detalhes sobre o suporte do navegador. Se o navegador não suportar o carregamento lento, o atributo será ignorado e as imagens serão carregadas imediatamente, normalmente.
+
+Para a maioria dos sites, adicionar este atributo a imagens embutidas aumentará o desempenho e salvará os usuários de imagens para as quais eles podem nunca rolar. Se você tiver um grande número de imagens e quiser ter certeza de que os usuários de navegadores sem suporte para o benefício de carregamento lento, você precisará combinar isso com um dos métodos explicados a seguir.
+
+Para saber mais, verifique o [carregamento lento no nível do navegador para a web](/browser-level-image-lazy-loading/).
+
+### Usando o observador de intersecção {: #images-inline-intersection-observer }
+
+Para preencher o carregamento lento de `<img>`, usamos JavaScript para verificar se eles estão na janela de visualização. Se estiverem, seus `src` (e às vezes `srcset` ) são preenchidos com URLs para o conteúdo de imagem desejado.
+
+Se você já escreveu código de carregamento lento antes, pode ter realizado sua tarefa usando manipuladores de eventos, como `scroll` ou `resize`. Embora essa abordagem seja a mais compatível entre os navegadores, os navegadores modernos oferecem uma maneira mais eficiente e performante de fazer o trabalho de verificação da visibilidade do elemento por meio da [API Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/).
+
+O Intersection Observer é mais fácil de usar e ler do que o código que depende de vários manipuladores de eventos, porque você só precisa registrar um observador para observar os elementos, em vez de escrever um tedioso código de detecção de visibilidade do elemento. Tudo o que resta fazer é decidir o que fazer quando um elemento estiver visível. Vamos supor este padrão de marcação básico para seus elementos `<img>`
+
+```html
+<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="Sou uma imagem!">
+```
+
+Existem três partes relevantes dessa marcação nas quais você deve se concentrar:
+
+1. O `class`, com o qual você selecionará o elemento em JavaScript.
+2. O `src`, que faz referência a uma imagem de espaço reservado que aparecerá quando a página for carregada pela primeira vez.
+3. Os `data-src` e `data-srcset`, que são atributos de espaço reservado contendo a URL para a imagem que você carregará assim que o elemento estiver na janela de visualização.
+
+Agora vamos ver como usar o Intersection Observer em JavaScript para carregar lentamente imagens usando este padrão de marcação:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.srcset = lazyImage.dataset.srcset;
+          lazyImage.classList.remove("lazy");
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+});
+```
+
+No `DOMContentLoaded` do documento, este script consulta o DOM para todos os `<img>` com uma classe de `lazy`. Se o observador de intersecção estiver disponível, crie um novo observador que execute um retorno de chamada quando os `img.lazy` entrarem na janela de visualização.
+
+{% Glitch {id: 'lazy-intersection-observer', path: 'index.html', previewSize: 0}%}
+
+O Intersection Observer está disponível em todos os navegadores modernos. Portanto, usá-lo como um polyfill para o `loading="lazy"` garantirá que o carregamento lento esteja disponível para a maioria dos visitantes.
+
+## Imagens em CSS {: #images-css }
+
+Embora as `<img>` sejam a maneira mais comum de usar imagens em páginas da web, as imagens também podem ser chamadas por meio da propriedade CSS [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) (e outras propriedades). O carregamento lento no nível do navegador não se aplica às imagens de fundo CSS, portanto, você precisa considerar outros métodos se tiver imagens de fundo para carregar lentamente.
+
+Ao contrário dos `<img>` que carregam independentemente de sua visibilidade, o comportamento de carregamento de imagens em CSS é feito com mais especulação. Quando [o documento e os modelos de objeto CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model) e [a árvore de renderização](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) são construídos, o navegador examina como o CSS é aplicado a um documento antes de solicitar recursos externos. Se o navegador determinou que uma regra CSS envolvendo um recurso externo não se aplica ao documento como ele está construído no momento, o navegador não a solicita.
+
+Esse comportamento especulativo pode ser usado para adiar o carregamento de imagens em CSS usando JavaScript para determinar quando um elemento está na janela de visualização e, subsequentemente, aplicando uma classe a esse elemento que aplica um estilo que invoca uma imagem de fundo. Isso faz com que o download da imagem seja feito no momento necessário, em vez de no carregamento inicial. Por exemplo, vamos pegar um elemento que contém uma grande imagem de fundo de herói:
+
+```html
+<div class="lazy-background">
+  <h1>Here's a hero heading to get your attention!</h1>
+  <p>Here's hero copy to convince you to buy a thing!</p>
+  <a href="/buy-a-thing">Buy a thing!</a>
+</div>
+```
+
+O `div.lazy-background` normalmente conteria a imagem de fundo do herói invocada por algum CSS. Neste exemplo de carregamento lento, no entanto, você pode isolar a `background-image` do elemento `div.lazy-background` por meio de uma `visible` adicionada ao elemento quando ele está na janela de visualização:
+
+```css
+.lazy-background {
+  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
+}
+
+.lazy-background.visible {
+  background-image: url("hero.jpg"); /* The final image */
+}
+```
+
+A partir daqui, use JavaScript para verificar se o elemento está na janela de visualização (com Intersection Observer!) E adicione a classe `visible` `div.lazy-background` naquele momento, que carrega a imagem:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          lazyBackgroundObserver.unobserve(entry.target);
+        }
+      });
+    });
+
+    lazyBackgrounds.forEach(function(lazyBackground) {
+      lazyBackgroundObserver.observe(lazyBackground);
+    });
+  }
+});
+```
+
+{% Glitch {id: 'lazy-background', caminho: 'index.html', previewSize: 0}%}
+
+## Bibliotecas de carregamento lento {: #libraries }
+
+As seguintes bibliotecas podem ser usadas para imagens de carregamento lento.
+
+- [lazysizes](https://github.com/aFarkas/lazysizes) é uma biblioteca de carregamento lento com todos os recursos que carrega lentamente imagens e iframes. O padrão que ele usa é bastante semelhante aos exemplos de código mostrados aqui, pois se liga automaticamente a uma classe `lazyload` `<img>` e requer que você especifique URLs de imagem nos `data-src` e/ou `data-srcset` , o conteúdo de que são trocados em `src` e/ou `srcset`, respectivamente. Ele usa o Intersection Observer (que você pode preencher com polyfill) e pode ser estendido com [vários plug](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo) -ins para fazer coisas como carregamento lento de vídeo. [Saiba mais sobre como usar lazysizes](/use-lazysizes-to-lazyload-images/).
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) é uma opção leve para imagens de carregamento lento, imagens de fundo, vídeos, iframes e scripts. Aproveita o Intersection Observer, oferece suporte a imagens responsivas e permite o carregamento lento no nível do navegador.
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) é uma outra opção leve que usa apenas observador de intersecção. Como tal, tem alto desempenho, mas precisará ser polyfilled antes de poder ser usado em navegadores mais antigos.
+- Se você precisar de uma biblioteca de carregamento lento específico do React, considere o [react-lazyload](https://github.com/jasonslyvia/react-lazyload). Enquanto ele não usa Intersection Observer, *ele* fornece um método familiar de imagens carregamento lento para aqueles acostumados a desenvolver aplicações com React.
diff --git a/src/site/content/pt/fast/lazy-loading-video/index.md b/src/site/content/pt/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..591c424dbab
--- /dev/null
+++ b/src/site/content/pt/fast/lazy-loading-video/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Vídeo de carregamento lento
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: |2
+
+  Esta postagem explica o carregamento lento e as opções disponíveis para você durante o carregamento lento.
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Assim como acontece com os [elementos de imagem](/lazy-loading-images), você também pode carregar o vídeo lentamente. Os vídeos são comumente carregados com o `<video>` (embora [um método alternativo usando `<img>`](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/) tenha surgido com implementação limitada). *Porém, como* fazer o lazy-load `<video>` depende do caso de uso. Vamos discutir alguns cenários em que cada um exige uma solução diferente.
+
+## Para vídeo que não é reproduzido automaticamente {: #video-no-autoplay}
+
+Para vídeos em que a reprodução é iniciada pelo usuário (ou seja, vídeos que *não são* reproduzidos automaticamente), pode ser desejável [especificar o atributo `preload`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload) no `<video>`
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+O exemplo acima usa um `preload` com um valor `none` para evitar que os navegadores pré-carreguem *quaisquer* dados de vídeo. O `poster` fornece ao `<video>` um espaço reservado que ocupará o espaço enquanto o vídeo carrega. A razão para isso é que os comportamentos padrão de carregamento de vídeo podem variar de navegador para navegador:
+
+- No Chrome, o padrão para `preload` costumava ser `auto`, mas a partir do Chrome 64, agora o padrão é `metadata` . Mesmo assim, na versão desktop do Chrome, uma parte do vídeo pode ser pré-carregada usando o cabeçalho `Content-Range` Firefox, Edge e Internet Explorer 11 se comportam de maneira semelhante.
+- Tal como acontece com o Chrome no desktop, as versões 11.0 do Safari para desktop vão pré-carregar uma série de vídeos. A partir da versão 11.2, apenas os metadados do vídeo são pré-carregados. [No Safari no iOS, os vídeos nunca são pré-carregados](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9).
+- Quando o [modo Economia de dados](https://support.google.com/chrome/answer/2392284) está ativado, o `preload` padronizado como `none`.
+
+Como os comportamentos padrão do navegador em relação ao `preload` não são gravados em pedra, ser explícito é provavelmente sua melhor aposta. Nestes casos em que o usuário inicia a reprodução, usar `preload="none"` é a maneira mais fácil de adiar o carregamento do vídeo em todas as plataformas. O `preload` não é a única maneira de adiar o carregamento do conteúdo de vídeo. [*A reprodução rápida com pré-carregamento de vídeo*](/fast-playback-with-preload/) pode lhe dar algumas ideias e insights sobre como trabalhar com a reprodução de vídeo em JavaScript.
+
+Infelizmente, isso não é útil quando você deseja usar vídeo no lugar de GIFs animados, o que é abordado a seguir.
+
+## Para vídeo que atua como um substituto de GIF animado {: #video-gif-replacement}
+
+Embora os GIFs animados sejam amplamente utilizados, eles são inferiores aos equivalentes de vídeo de várias maneiras, principalmente no tamanho do arquivo. Os GIFs animados podem atingir a faixa de vários megabytes de dados. Vídeos com qualidade visual semelhante tendem a ser bem menores.
+
+Usar o `<video>` como um substituto para GIF animado não é tão simples quanto o elemento `<img>`. Os GIFs animados têm três características:
+
+1. Eles tocam automaticamente quando carregados.
+2. Eles fazem loop continuamente ([embora nem sempre seja o caso](https://davidwalsh.name/prevent-gif-loop)).
+3. Eles não têm uma faixa de áudio.
+
+Conseguir isso com o `<video>` é mais ou menos assim:
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Os `autoplay` , `muted` e `loop` são autoexplicativos. [`playsinline` é necessário para que a reprodução automática ocorra no iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/). Agora você tem uma substituição de vídeo como GIF que pode ser usada em todas as plataformas. Mas como fazer o carregamento lento? Para começar, modifique sua `<video>` acordo:
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Você notará a adição do[atributo `poster`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster), que permite especificar um espaço reservado para ocupar o `<video>` até que o vídeo seja carregado lentamente. Tal como acontece com os [exemplos de carregamento lento `<img>`](/lazy-loading-images/), armazene a URL do vídeo no `data-src` em cada elemento `<source>`. A partir daí, use o código JavaScript semelhante aos exemplos de carregamento lento de imagem baseada no observador de intersecção:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+Quando você carrega lentamente um `<video>`, precisa iterar por todos os `<source>` filhos e transformar seus atributos `data-src` `src`. Depois de fazer isso, você precisa acionar o carregamento do vídeo chamando o `load` do elemento, após o qual a mídia começará a ser reproduzida automaticamente de acordo com o atributo `autoplay`
+
+Usando esse método, você tem uma solução de vídeo que emula o comportamento do GIF animado, mas não incorre no mesmo uso intensivo de dados que os GIFs animados e pode carregar esse conteúdo lentamente.
+
+## Bibliotecas de carregamento lento {: #libraries}
+
+As seguintes bibliotecas podem ajudá-lo a carregar vídeos lentamente:
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) e [lozad.js](https://github.com/ApoorvSaxena/lozad.js) são opções superleves que usam apenas o Intersection Observer. Como tal, eles têm alto desempenho, mas precisarão ser polyfilled antes de serem usados em navegadores mais antigos.
+- [yall.js](https://github.com/malchata/yall.js) é uma biblioteca que usa o Intersection Observer e usa manipuladores de eventos. É compatível com o IE11 e os principais navegadores.
+- Se você precisar de uma biblioteca de carregamento lento específico do React, pode considerar o [recurso react-lazyload](https://github.com/jasonslyvia/react-lazyload). Enquanto ele não usa Intersection Observer, *ele* fornece um método familiar de imagens carregamento lento para aqueles acostumados a desenvolver aplicações com Reagir.
+
+Cada uma dessas bibliotecas de carregamento lento é bem documentada, com muitos padrões de marcação para seus vários esforços de carregamento lento.
diff --git a/src/site/content/pt/fast/lazy-loading/index.md b/src/site/content/pt/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..d6956a999c6
--- /dev/null
+++ b/src/site/content/pt/fast/lazy-loading/index.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: Use lazy-loading para melhorar a velocidade de carregamento
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: Esta postagem explica o lazy-loading  e por que você pode querer carregar  elementos no seu site usando lazy-loading.
+tags:
+  - performance
+  - images
+---
+
+A porção de [imagens](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest) e [vídeo](http://beta.httparchive.org/reports/page-weight#bytesVideo) na carga útil típica de um site pode ser significativa. Infelizmente, as partes interessadas do projeto podem não querer cortar quaisquer recursos de mídia de seus aplicativos existentes. Esses impasses são frustrantes, especialmente quando todas as partes envolvidas querem melhorar o desempenho do site, mas não conseguem chegar a um acordo sobre como chegar lá. Felizmente, o carregamento lazy é uma solução que reduz a carga útil da página inicial *e* o tempo de carregamento, sem economizar no conteúdo.
+
+## O que é lazy-loading? {: #what }
+
+O lazy-loading, ou carregamento adiado, é uma técnica que não carrega recursos não críticos no momento que a página é carregada. Em vez disso, esses recursos não críticos são carregados no momento em que são necessários. No que diz respeito às imagens, "não crítico" costuma ser sinônimo de "fora da tela". Se você usou o Lighthouse e examinou algumas oportunidades para melhoria, pode ter visto alguma orientação neste domínio na forma da [auditoria para adiar imagens fora da tela](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/):
+
+<figure>   {% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Uma captura de tela da auditoria Adiar imagens fora da tela, do Lighthouse.", width="800", height="102" %}   <figcaption>Uma das auditorias de desempenho do Lighthouse é identificar imagens fora da tela, que são candidatas ao carregamento lazy.</figcaption></figure>
+
+Você provavelmente já viu o carregamento lazy em ação, e é mais ou menos assim:
+
+- Você chega numa página e começa a rolar à medida que lê o conteúdo.
+- Em algum ponto, você rola uma imagem de placeholder para a viewport.
+- A imagem de placeholder é repentinamente substituída pela imagem final.
+
+Um exemplo de carregamento lazy de imagem pode ser encontrado na popular plataforma de publicação [Medium](https://medium.com/), que carrega imagens de placeholder leves no carregamento da página e as substitui por imagens carregadas de forma lazy à medida que são roladas para dentro da viewport.
+
+<figure>   {% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="Uma captura de tela do site Medium na navegação, demonstrando o carregamento lazy em ação. O placeholder desfocado está à esquerda e o recurso carregado está à direita.", width="800", height="493" %}   <figcaption>Um exemplo de carregamento lazy de imagem em ação. Uma imagem de placeholder é carregada junto com a página (à esquerda) e, quando rolada para a viewport, a imagem final é carregada no momento necessário.</figcaption></figure>
+
+Se você não está familiarizado com o carregamento lazy, pode estar se perguntando qual a utilidade dessa técnica e quais são seus benefícios. Leia mais para descobrir!
+
+## Por que carregar imagens e video usando lazy-loading em vez de simplesmente *carregá-los*? {: #why }
+
+Porque é possível que você esteja carregando coisas que o usuário talvez nunca veja. Isto é problemático por vários motivos:
+
+- Desperdiça dados. Em conexões ilimitadas, isto não é a pior coisa que poderia acontecer (embora você poderia estar usando aquela largura de banda preciosa para baixar outros recursos que de fato serão vistos pelo usuário). Em planos de dados limitados, no entanto, carregar coisas que o usuário nunca vê pode ser efetivamente uma perda de dinheiro.
+- Desperdiça tempo de processamento, bateria e outros recursos do sistema. Depois que um recurso de mídia é baixado, o navegador precisa decodificá-lo e renderizar seu conteúdo na viewport.
+
+O carregamento lazy de imagens e vídeos reduz o tempo de carregamento da página inicial, o peso da página inicial e o uso de recursos do sistema, tudo isso tendo impactos positivos no desempenho.
+
+## Implementando lazy-loading {: #implementing }
+
+Existem diversas maneiras de implementar o carregamento lazy. Sua escolha de solução deve levar em consideração os navegadores que você suporta e também o que você está tentando carregar de forma lazy.
+
+Navegadores modernos implementam o [carregamento lazy no nível do navegador](/browser-level-image-lazy-loading/), que pode ser ativado usando o atributo `loading` em imagens e iframes. Para garantir a compatibilidade com navegadores mais antigos ou para realizar o carregamento lazy em elementos sem o carregamento lazy integrado, você pode implementar uma solução com seu próprio JavaScript. Existem também várias bibliotecas para ajudá-lo a fazer isso. Veja as postagens neste site para detalhes completos de todas essas abordagens:
+
+- [Lazy-loading de imagens](/lazy-loading-images/)
+- [Lazy-loading de vídeos](/lazy-loading-video/)
+
+Além disso, compilamos uma lista de [possíveis problemas com o carregamento lazy](/lazy-loading-best-practices) e itens a serem observados em sua implementação.
+
+## Conclusão
+
+Se usado com cuidado, o carregamento lazy de imagens e vídeos pode reduzir significativamente o tempo de carregamento inicial e a carga útil da página em seu site. Os usuários não incorrerão em atividades de rede desnecessárias nem custos de processamento de recursos de mídia que talvez nunca vejam, mas ainda podem ver esses recursos, se quiserem.
+
+No que diz respeito às técnicas de melhoria de desempenho, o carregamento lazy é razoavelmente incontroverso. Se você tiver muitas imagens embutidas no seu site, é uma maneira bastante eficaz de reduzir os downloads desnecessários. Os usuários do seu site e as partes interessadas no projeto irão apreciar isso!
diff --git a/src/site/content/pt/fast/minify-css/index.md b/src/site/content/pt/fast/minify-css/index.md
new file mode 100644
index 00000000000..39a8b0cb80d
--- /dev/null
+++ b/src/site/content/pt/fast/minify-css/index.md
@@ -0,0 +1,167 @@
+---
+layout: post
+title: Minificar CSS
+authors:
+  - demianrenzulli
+description: Saiba como minificar arquivos CSS para melhorar o desempenho, sem afetar a forma como o navegador processa os estilos.
+date: 2019-05-02
+tags:
+  - performance
+---
+
+Os arquivos CSS podem conter caracteres desnecessários, como comentários, espaços em branco e recuos. Na produção, é possível remover esses caracteres com segurança, para reduzir o tamanho do arquivo sem afetar a forma como o navegador processa os estilos. Essa técnica é chamada de **minificação**.
+
+## Carregando CSS não minificado
+
+Confira o seguinte bloco CSS:
+
+```css
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+}
+
+/* todos os títulos precisam ter o mesmo plano de fundo, fonte e cor */
+h1 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+
+h2 {
+  font-style: italic;
+  color: #373fff;
+  background-color: #000000;
+}
+```
+
+Esse conteúdo é fácil de ler, mas produz um arquivo maior do que o necessário:
+
+- Ele usa espaços para fins de recuo e contém comentários, que são ignorados pelo navegador, então podem ser removidos.
+- Os elementos `<h1>` e `<h2>` têm os mesmos estilos: em vez de declará-los separadamente, "`h1 {...} h2 {...}`", eles podem ser expressos como "`h1, h2{...}`".
+- A **cor de plano de fundo** `#000000` pode ser expressa apenas como `#000`.
+
+Depois de fazer essas alterações, você obtém uma versão mais compacta dos mesmos estilos:
+
+```css
+body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
+```
+
+Você provavelmente não quer escrever CSS assim. Em vez disso, pode escrever normalmente e adicionar uma etapa de minificação ao processo de desenvolvimento. Neste guia, você aprenderá a fazer isso usando uma ferramenta conhecida de desenvolvimento: o [webpack](https://webpack.js.org/).
+
+## Medição
+
+Você aplicará a minificação de CSS a um site que foi usado em outros guias: o [Fav Kitties](https://fav-kitties-animated.glitch.me/). Essa versão do site usa uma boa biblioteca CSS ([animate.css](https://github.com/daneden/animate.css)) para animar diferentes elementos da página quando um usuário vota em um gato 😺.
+
+Primeiro, você precisa entender qual é a oportunidade de minificação desse arquivo:
+
+1. Abra a [página de medição](/measure).
+2. Digite o URL `https://fav-kitties-animated.glitch.me` e clique em **Run Audit** (Executar auditoria).
+3. Clique em **View report** (Exibir relatório).
+4. Clique em **Performance** (Desempenho) e acesse a seção **Opportunities** (Oportunidades).
+
+O relatório resultante mostra que até **16 KB** podem ser poupados no arquivo **animate.css**:
+
+{% Img src="image/admin/RFMk5OMAIvOlkUZJTsh4.png", alt="Lighthouse: oportunidade de minificação de CSS.", width="800", height="172", class="screenshot" %}
+
+Agora inspecione o conteúdo do CSS:
+
+1. Abra o [site Fav Kitties](https://fav-kitties-animated.glitch.me/) no Chrome. Pode demorar um pouco para que os servidores do Glitch respondam pela primeira vez. {% Instruction 'devtools-network', 'ol' %}
+2. Clique no filtro **CSS.**
+3. Marque a caixa de seleção **Disable cache** (Desativar cache). {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/WgneNAyftk8jneyXxMih.png", alt="Rastreamento não otimizado de CSS do DevTools", width="800", height="138" %}
+
+A página está solicitando dois arquivos CSS, de **1,9 KB** e **76,2 KB,** respectivamente.
+
+1. Clique em **animate.css**.
+2. Clique na guia **Response** (Resposta) para ver o conteúdo do arquivo.
+
+Observe que a folha de estilo contém caracteres de espaços em branco e recuos:
+
+{% Img src="image/admin/UEB5Xxe5IHhGtMx3XfKD.png", alt="Resposta não otimizada de CSS do DevTools", width="800", height="286" %}
+
+A seguir, você adicionará alguns plug-ins do webpack ao processo de desenvolvimento para minificar esses arquivos.
+
+{% Aside 'note' %} **Observação:** o relatório do Lighthouse anterior lista apenas `animate.css` como uma oportunidade de minificação. A minificação de `style.css` também poupa alguns bytes, mas não o suficiente para o Lighthouse considerar uma economia significativa. No entanto, minificar o CSS é uma prática recomendada geral. Portanto, faz sentido minificar todos os seus arquivos CSS. {% endAside %}
+
+## Minificação de CSS com webpack
+
+Antes de pular para as otimizações, dedique algum tempo para entender como funciona o processo de desenvolvimento do [site Fav Kitties](https://glitch.com/edit/#!/fav-kitties-animated?path=webpack.config.js:1:0%5D):
+
+{% Glitch { id: 'fav-kitties-animated', path: 'webpack.config.js', previewSize: 0 } %}
+
+Por padrão, o pacote JS produzido pelo webpack contém o conteúdo dos arquivos CSS embutidos. Como queremos manter arquivos CSS separados, estamos usando dois plug-ins complementares:
+
+- O [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) extrai cada folha de estilo para um arquivo próprio, como uma das etapas do processo de desenvolvimento.
+- O [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) é usado para corrigir um problema no wepback 4, evitando a geração de um arquivo JS extra para cada arquivo CSS listado em **webpack-config.js**.
+
+Agora você fará algumas alterações no projeto:
+
+1. Abra [o projeto Fav Kitties no Glitch](https://glitch.com/~fav-kitties-animated). {% Instruction 'source', 'ol' %} {% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+Para minificar o CSS resultante, você usará o [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):
+
+1. No console do Glitch, execute `npm install --save-dev optimize-css-assets-webpack-plugin`.
+2. Execute `refresh` para sincronizar as alterações com o editor do Glitch.
+
+Em seguida, volte ao editor do Glitch, abra o arquivo **webpack.config.js** e faça as seguintes modificações:
+
+Carregue o módulo no início do arquivo:
+
+```js
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+```
+
+Em seguida, transmita uma instância do plug-in para a matriz  **plugins**:
+
+```js
+  plugins: [
+    new HtmlWebpackPlugin({template: "./src/index.html"}),
+    new MiniCssExtractPlugin({filename: "[name].css"}),
+    new FixStyleOnlyEntriesPlugin(),
+    new OptimizeCSSAssetsPlugin({})
+  ]
+```
+
+Depois de fazer as alterações, será acionada uma recriação do projeto. Esta é a aparência do **webpack.config.js** resultante:
+
+{% Glitch { id: 'fav-kitties-animated-min', path: 'webpack.config.js', previewSize: 0 } %}
+
+A seguir, você verificará o resultado dessa otimização com as ferramentas de desempenho.
+
+## Verificação
+
+{% Instruction 'preview' %}
+
+Se você se perdeu em alguma das etapas anteriores, clique [aqui](https://fav-kitties-animated-min.glitch.me/) para abrir uma versão otimizada do site.
+
+Para inspecionar o tamanho e o conteúdo dos arquivos, faça o seguinte:
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. Clique no filtro **CSS.**
+2. Marque a caixa de seleção **Disable cache** (Desativar cache) se ainda não tiver feito isso. {% Instruction 'reload-app', 'ol' %}
+
+{% Img src="image/admin/id5kWwB3NilmVPWPTM59.png", alt="Resposta não otimizada de CSS do DevTools", width="800", height="130" %}
+
+É possível inspecionar esses arquivos e ver se as novas versões não contêm nenhum espaço em branco. Ambos os arquivos são muito menores, principalmente o [animate.css](http://fav-kitties-animated-min.glitch.me/animate.css), que foi reduzido em **aproximadamente 26%**, poupando **cerca de 20 KB**!
+
+Siga esta última etapa:
+
+1. Abra a [página de medição](/measure).
+2. Insira a URL do site otimizado.
+3. Clique em **View report** (Exibir relatório).
+4. Clique em **Performance** (Desempenho) e encontre a seção **Opportunities** (Oportunidades).
+
+O relatório não mostra mais "Minify CSS" (Minificar CSS) como uma oportunidade e foi movido para a seção "Passed Audits" (Auditorias aprovadas):
+
+{% Img src="image/admin/zegn2qIHYYK58w1GhgYd.png", alt="Auditorias do Lighthouse de otimização da página aprovadas.", width="800", height="163" %}
+
+Como os arquivos CSS são [recursos de bloqueio de renderização](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources), se você aplicar a minificação em sites que usam arquivos CSS grandes, poderá ver melhorias nas métricas, como a [First Contentful Paint](/fcp/) (FCP), ou primeira exibição de conteúdo.
+
+## Próximas etapas e recursos
+
+Neste guia, discutimos a minificação de CSS com o webpack, mas a mesma abordagem pode ser seguida com outras ferramentas de desenvolvimento, como [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css) para o [Gulp](https://gulpjs.com/) ou [grunt-contrib-cssmin](https://www.npmjs.com/package/grunt-contrib-cssmin) para o [Grunt](https://gruntjs.com/).
+
+A minificação também pode ser aplicada a outros tipos de arquivos. Confira o [guia Minificar e compactar cargas de rede](/fast/reduce-network-payloads-using-text-compression) para saber mais sobre as ferramentas de minificação de JS e algumas técnicas complementares, como a compactação.
diff --git a/src/site/content/pt/fast/optimize-css-background-images-with-media-queries/index.md b/src/site/content/pt/fast/optimize-css-background-images-with-media-queries/index.md
new file mode 100644
index 00000000000..8a0fa3087d1
--- /dev/null
+++ b/src/site/content/pt/fast/optimize-css-background-images-with-media-queries/index.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: Otimizar imagens de fundo CSS com consultas de mídia
+authors:
+  - demianrenzulli
+description: |2-
+
+  Use consultas de mídia para enviar imagens com o tamanho necessário,
+
+  uma técnica comumente conhecida como imagens responsivas.
+date: 2020-03-05
+updated: 2020-03-05
+tags:
+  - performance
+---
+
+Muitos sites solicitam recursos pesados, como imagens, que não são otimizados para determinadas telas, e enviam grandes arquivos CSS contendo estilos que alguns dispositivos jamais usarão. O uso de consultas de mídia é uma técnica popular para fornecer folhas de estilo e ativos personalizados para diferentes telas para reduzir a quantidade de dados transferidos para os usuários e melhorar o desempenho do carregamento da página. Este guia mostra como usar consultas de mídia para enviar imagens que têm o tamanho necessário, uma técnica comumente conhecida como **imagens responsivas**.
+
+## Pré-requisitos
+
+Este guia pressupõe que você esteja familiarizado com o [Chrome DevTools](https://developer.chrome.com/docs/devtools/). Você pode usar DevTools de outro navegador, se preferir. Você só precisa mapear as capturas de tela do Chrome DevTools neste guia de volta aos recursos relevantes no navegador de sua escolha.
+
+## Compreenda as imagens de fundo responsivas
+
+Primeiro, analise o tráfego de rede da demonstração não otimizada:
+
+1. Abra a [demonstração não otimizada](https://use-media-queries-unoptimized.glitch.me/) em uma nova guia do Chrome. {% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Aside %} Confira [Inspecionar atividade de rede com Chrome DevTools](https://developer.chrome.com/docs/devtools/network/) se precisar de mais ajuda com DevTools. {% endAside %}
+
+Você verá que a única imagem solicitada é `background-desktop.jpg`, que tem um tamanho de **1006 KB**:
+
+<figure>{% Img src="image/admin/K8P4MHp2FSnZYTw3ZVkG.png", alt="Rastreamento de rede DevTools para a imagem de fundo não otimizada.", width="800", height="126" %}</figure>
+
+Redimensione a janela do navegador e observe que o log de rede não está mostrando nenhuma nova solicitação feita pela página. Isso significa que a mesma imagem de fundo está sendo usada para todos os tamanhos de tela.
+
+Você pode ver os estilos que controlam a imagem de fundo em [style.css](https://use-media-queries-unoptimized.glitch.me/style.css):
+
+```css
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+Aqui está o significado de cada uma das propriedades usadas:
+
+- `background-position: center center`: Centralize a imagem verticalmente e horizontalmente.
+- `background-repeat: no-repeat`: Mostrar a imagem apenas uma vez.
+- `background-attachment: fixed`: Evite fazer a rolagem da imagem de fundo.
+- `background-size: cover`: redimensione a imagem para cobrir todo o contêiner.
+- `background-image: url(images/background-desktop.jpg)`: O URL da imagem.
+
+Quando combinados, esses estilos instruem o navegador a adaptar a imagem de fundo a diferentes alturas e larguras de tela. Este é o primeiro passo para obter um background responsivo.
+
+Usar uma única imagem de plano de fundo para todos os tamanhos de tela tem algumas limitações:
+
+- A mesma quantidade de bytes é enviada, independentemente do tamanho da tela, mesmo quando, para alguns dispositivos, como telefones, uma imagem de fundo menor e mais leve pareceria igualmente boa. Em geral, você deseja enviar a menor imagem possível que ainda pareça boa na tela do usuário para melhorar o desempenho e salvar os dados do usuário.
+- Em dispositivos menores, a imagem será esticada ou cortada para cobrir a tela inteira, potencialmente escondendo partes relevantes do plano de fundo para os usuários.
+
+Na próxima seção, você aprenderá como aplicar uma otimização para carregar diferentes imagens de fundo, de acordo com o dispositivo do usuário.
+
+## Usar consultas de mídia
+
+O uso de consultas de mídia é uma técnica comum para declarar folhas de estilo que se aplicam apenas a determinados tipos de mídia ou dispositivo. Eles são implementados usando [@media rules](https://developer.mozilla.org/docs/Web/CSS/@media), que permitem definir um conjunto de pontos de interrupção, onde estilos específicos são definidos. Quando as condições definidas pela `@media` são atendidas (por exemplo, uma certa largura de tela), o grupo de estilos definido dentro do breakpoint será aplicado.
+
+As etapas a seguir podem ser usadas para aplicar consultas de mídia ao [site](https://use-media-queries-unoptimized.glitch.me/) para que diferentes imagens sejam usadas, dependendo da largura máxima do dispositivo que está solicitando a página.
+
+- Em `style.css` remova a linha que contém o URL da imagem de plano de fundo:
+
+```css//4
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+- Em seguida, crie um ponto de interrupção para cada largura de tela, com base nas dimensões comuns em pixels que as telas de celulares, tablets e desktops geralmente têm:
+
+Para celular:
+
+```css
+@media (max-width: 480px) {
+    body {
+        background-image: url(images/background-mobile.jpg);
+    }
+}
+```
+
+Para tablets:
+
+```css
+@media (min-width: 481px) and (max-width: 1024px) {
+    body {
+        background-image: url(images/background-tablet.jpg);
+    }
+}
+```
+
+Para desktops:
+
+```css
+@media (min-width: 1025px) {
+    body {
+	    background-image: url(images/background-desktop.jpg);
+   }
+}
+```
+
+Abra a versão otimizada de [style.css](https://use-media-queries-optimized.glitch.me/style.css) em seu navegador para ver as alterações feitas.
+
+{% Aside %} As imagens usadas na demonstração otimizada já foram redimensionadas para caber em diferentes tamanhos de tela. Mostrar como redimensionar imagens está fora do escopo deste guia, mas se você quiser saber mais sobre isso, o [guia veicular imagens responsivas](/serve-responsive-images/) cobre algumas ferramentas úteis, como o [pacote npm sharp](https://www.npmjs.com/package/sharp) e o [ImageMagick CLI](https://www.imagemagick.org/script/index.php). {% endAside %}
+
+## Medida para diferentes dispositivos
+
+Em seguida, visualize o site resultante em diferentes tamanhos de tela e em dispositivos móveis simulados:
+
+1. Abra o [site otimizado](https://use-media-queries-optimized.glitch.me/) em uma nova guia do Chrome.
+2. Torne sua janela de visualização estreita (menos de `480px`). {% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %} Observe como a imagem `background-mobile.jpg` foi solicitada.
+3. Aumente a sua janela de visualização. Quando for maior que `480px` observe como `background-tablet.jpg` é solicitado. Quando for maior que `1025px` observe como `background-desktop.jpg` é solicitado.
+
+Quando a largura da tela do navegador é alterada, novas imagens são solicitadas.
+
+Em particular, quando a largura está abaixo do valor definido no ponto de interrupção móvel (480px), você vê o seguinte Log de rede:
+
+<figure>{% Img src="image/admin/jd2kHIefYf91udpFEmvx.png", alt="Rastreamento de rede DevTools para a imagem de fundo otimizada.", width="800", height="125" %}</figure>
+
+O tamanho do novo plano de fundo do celular é **67% menor do** que o do desktop.
+
+## Resumo
+
+Neste guia, você aprendeu a aplicar consultas de mídia para solicitar imagens de fundo personalizadas para tamanhos de tela específicos e economizar bytes ao acessar o site em dispositivos menores, como telefones celulares. Você usou a `@media` para implementar um plano de fundo responsivo. Esta técnica é amplamente suportada por todos os navegadores. Um novo recurso CSS: [image-set ()](https://www.w3.org/TR/css-images-4/#image-set-notation), pode ser usado para o mesmo propósito com menos linhas de código. No momento em que este artigo foi escrito, esse recurso não era compatível com todos os navegadores, mas você pode querer ficar de olho em como a adoção evolui, pois pode representar uma alternativa interessante a essa técnica.
diff --git a/src/site/content/pt/fast/optimize-webfont-loading/index.md b/src/site/content/pt/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..50bb3830737
--- /dev/null
+++ b/src/site/content/pt/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: Otimize o carregamento e a renderização do WebFont
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2
+
+  Esta postagem explica como carregar WebFonts para evitar mudanças de layout e páginas em branco quando WebFonts não estão disponíveis quando a página é carregada.
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+Um WebFont "completo" que inclui todas as variantes estilísticas, das quais você pode não precisar, além de todos os glifos, que podem não ser usados, pode facilmente resultar em um download de vários megabytes. Neste artigo, você descobrirá como otimizar o carregamento de WebFonts para que os visitantes baixem apenas o que usarão.
+
+Para resolver o problema de arquivos grandes contendo todas as variantes, a `@font-face` foi projetada especificamente para permitir que você divida a família de fontes em uma coleção de recursos. Por exemplo, subconjuntos Unicode e variantes de estilo distintas.
+
+Dadas essas declarações, o navegador descobre os subconjuntos e variantes necessários e baixa o conjunto mínimo necessário para renderizar o texto, o que é muito conveniente. No entanto, se você não tiver cuidado, isso também pode criar um gargalo de desempenho no caminho de renderização crítica e atrasar a renderização do texto.
+
+### O comportamento padrão
+
+O carregamento lento de fontes carrega uma implicação oculta importante que pode atrasar a renderização do texto: o navegador deve [construir a árvore de renderização](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction), que depende das árvores DOM e CSSOM, antes de saber quais recursos de fonte precisa para renderizar o texto. Como resultado, as solicitações de fonte são atrasadas muito depois de outros recursos críticos e o navegador pode ser impedido de renderizar o texto até que o recurso seja obtido.
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="Caminho de renderização crítica da fonte", width="800", height="303" %}
+
+1. O navegador solicita o documento HTML.
+2. O navegador começa a analisar a resposta HTML e a construir o DOM.
+3. O navegador descobre CSS, JS e outros recursos e despacha solicitações.
+4. O navegador constrói o CSSOM depois que todo o conteúdo CSS é recebido e o combina com a árvore DOM para construir a árvore de renderização.
+    - As solicitações de fonte são despachadas depois que a árvore de renderização indica quais variantes de fonte são necessárias para renderizar o texto especificado na página.
+5. O navegador executa o layout e pinta o conteúdo na tela.
+    - Se a fonte ainda não estiver disponível, o navegador pode não renderizar nenhum pixel de texto.
+    - Depois que a fonte está disponível, o navegador pinta os pixels do texto.
+
+A "corrida" entre a primeira pintura do conteúdo da página, que pode ser feita logo após a construção da árvore de renderização, e a solicitação do recurso de fonte é o que cria o "problema de texto em branco" em que o navegador pode renderizar o layout da página, mas omite qualquer texto.
+
+Pré-carregando WebFonts e usando `font-display` para controlar como os navegadores se comportam com fontes indisponíveis, você pode evitar páginas em branco e mudanças de layout devido ao carregamento de fontes.
+
+### Pré-carregue seus recursos WebFont
+
+Se houver grande probabilidade de sua página precisar de um WebFont específico hospedado em um URL que você conhece com antecedência, você pode aproveitar a [priorização](https://developers.google.com/web/fundamentals/performance/resource-prioritization) de recursos. O uso de `<link rel="preload">` acionará uma solicitação para o WebFont no início do caminho de renderização crítica, sem ter que esperar a criação do CSSOM.
+
+### Personalize o atraso de renderização do texto
+
+Embora o pré-carregamento torne mais provável que um WebFont esteja disponível quando o conteúdo de uma página for renderizado, ele não oferece garantias. Você ainda precisa considerar como os navegadores se comportam ao renderizar texto que usa uma `font-family` que ainda não está disponível.
+
+Na postagem [Evite texto invisível durante o carregamento da fonte,](/avoid-invisible-text/) você pode ver que o comportamento padrão do navegador não é consistente. No entanto, você pode dizer aos navegadores modernos como deseja que eles se comportem usando [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) .
+
+Semelhante aos comportamentos de tempo limite de fonte existentes que alguns navegadores implementam, `font-display` segmenta a vida útil do download de uma fonte em três períodos principais:
+
+1. O primeiro período é o **período do bloco** da fonte. Durante este período, se a face da fonte não for carregada, qualquer elemento que tentar usá-la deverá renderizar com uma face de fonte fallback invisível. Se a face da fonte for carregada com sucesso durante o período do bloco, a face da fonte será então usada normalmente.
+2. O **período de troca de fonte** ocorre imediatamente após o período de bloco de fonte. Durante este período, se a face da fonte não for carregada, qualquer elemento que tentar usá-la deverá renderizar com uma face da fonte substituta. Se a face da fonte for carregada com sucesso durante o período de troca, a face da fonte será então usada normalmente.
+3. O **período de falha de fonte** ocorre imediatamente após o período de troca de fonte. Se a face da fonte ainda não tiver sido carregada quando este período começar, ela será marcada como um carregamento com falha, causando o fallback normal da fonte. Caso contrário, a face da fonte é usada normalmente.
+
+Compreender esses períodos significa que você pode usar `font-display` para decidir como sua fonte deve ser renderizada, dependendo de quando foi baixada ou não.
+
+Para trabalhar com a `font-display`, adicione-a às suas regras `@font-face`
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* or block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+`font-display` atualmente suporta o seguinte intervalo de valores:
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+Para obter mais informações sobre o pré-carregamento de fontes e a `font-display`, consulte as seguintes postagens:
+
+- [Evite texto invisível durante o carregamento da fonte](/avoid-invisible-text/)
+- [Controle do desempenho da fonte usando a exibição de fontes](https://developers.google.com/web/updates/2016/02/font-display)
+- [Evite mudanças de layout e flashes de texto invisível (FOIT) pré-carregando fontes opcionais](/preload-optional-fonts/)
+
+### A API de carregamento de fontes
+
+Usados juntos, `<link rel="preload">` e o CSS `font-display` oferecem um grande controle sobre o carregamento e a renderização de fontes, sem adicionar muito overhead. Mas se você precisar de personalizações adicionais e estiver disposto a incorrer na sobrecarga introduzida pela execução de JavaScript, há outra opção.
+
+A [API Font Loading](https://www.w3.org/TR/css-font-loading/) fornece uma interface de script para definir e manipular as faces das fontes CSS, rastrear o andamento do download e substituir o comportamento padrão do lazyload. Por exemplo, se você tiver certeza de que uma determinada variante de fonte é necessária, você pode defini-la e dizer ao navegador para iniciar uma busca imediata do recurso de fonte:
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// don't wait for the render tree, initiate an immediate fetch!
+font.load().then(function() {
+  // apply the font (which may re-render text and cause a page reflow)
+  // after the font has finished downloading
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // OR... by default the content is hidden,
+  // and it's rendered after the font is available
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // OR... apply your own render strategy here...
+});
+```
+
+Além disso, como você pode verificar o status da fonte (por meio do [`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check)) e acompanhar o andamento do download, você também pode definir uma estratégia personalizada para renderizar texto em suas páginas:
+
+- Você pode manter a renderização de todo o texto até que a fonte esteja disponível.
+- Você pode implementar um tempo limite personalizado para cada fonte.
+- Você pode usar a fonte substituta para desbloquear a renderização e injetar um novo estilo que use a fonte desejada depois que a fonte estiver disponível.
+
+O melhor de tudo é que você também pode misturar e combinar as estratégias acima para diferentes conteúdos na página. Por exemplo, você pode atrasar a renderização do texto em algumas seções até que a fonte esteja disponível, usar uma fonte reserva e, a seguir, renderizar novamente após o término do download da fonte.
+
+{% Aside %} A API de carregamento de fonte [não está disponível em navegadores mais antigos](http://caniuse.com/#feat=font-loading). Considere usar o [polyfill FontLoader](https://github.com/bramstein/fontloader) ou a [biblioteca WebFontloader](https://github.com/typekit/webfontloader) para fornecer funcionalidade semelhante, embora com ainda mais sobrecarga de uma dependência JavaScript adicional. {% endAside %}
+
+### O armazenamento em cache adequado é obrigatório
+
+Os recursos de fonte são, normalmente, recursos estáticos que não veem atualizações frequentes. Como resultado, eles são ideais para uma expiração de idade máxima longa - certifique-se de especificar um [cabeçalho ETag condicional](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags) e uma [política de controle de cache ideal](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control) para todos os recursos de fonte.
+
+Se o seu aplicativo da web usa um [service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/), disponibilizar recursos de fonte com uma [estratégia de cache primeiro](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network) é apropriado para a maioria dos casos de uso.
+
+Você não deve armazenar fontes usando [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ou [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API); cada um deles tem seu próprio conjunto de problemas de desempenho. O cache HTTP do navegador oferece o melhor e mais robusto mecanismo para fornecer recursos de fonte ao navegador.
+
+## Lista de verificação de carregamento da WebFont
+
+- **Personalize o carregamento e a renderização de fontes usando `<link rel="preload">`, `font-display` ou a API de carregamento de fontes:** o comportamento de carregamento lento padrão pode resultar em atrasos na renderização de texto. Esses recursos da plataforma da web permitem que você substitua esse comportamento para fontes específicas e especifique a renderização customizada e as estratégias de tempo limite para diferentes conteúdos na página.
+- **Especifique a revalidação e as políticas de cache ideais**: as fontes são recursos estáticos que raramente são atualizados. Certifique-se de que seus servidores forneçam um timestamp de idade máxima de longa duração e um token de revalidação para permitir a reutilização eficiente de fontes entre páginas diferentes. Se estiver usando um service worker, uma estratégia de primeiro cache é apropriada.
+
+## Teste automatizado para comportamento de carregamento de WebFont com Lighthouse
+
+O [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) pode ajudar a automatizar o processo de garantir que você esteja seguindo as melhores práticas de otimização de fontes da web.
+
+As auditorias a seguir podem ajudá-lo a garantir que suas páginas continuem a seguir as práticas recomendadas de otimização de fontes da web ao longo do tempo:
+
+- [Solicitações de chave de pré-carregamento](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Usa política de cache ineficiente em ativos estáticos](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Todo o texto permanece visível durante o carregamento do WebFont](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/pt/fast/performance-budgets-101/index.md b/src/site/content/pt/fast/performance-budgets-101/index.md
new file mode 100644
index 00000000000..91aeddf01ad
--- /dev/null
+++ b/src/site/content/pt/fast/performance-budgets-101/index.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Orçamentos de desempenho 101
+authors:
+  - mihajlija
+description: |2
+
+  O bom desempenho raramente é um efeito colateral. Saiba mais sobre orçamentos de desempenho e
+
+  como eles podem colocá-lo no caminho do sucesso.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+O desempenho é uma parte importante da experiência do usuário e [afeta as métricas de negócios](https://wpostats.com/). É tentador pensar que, se você for um bom desenvolvedor, terá um site de alto desempenho, mas a verdade é que o bom desempenho raramente é um efeito colateral. Como acontece com a maioria das outras coisas, para atingir uma meta, você deve defini-la com clareza. Comece a jornada definindo um **orçamento de desempenho**.
+
+## Definição
+
+Um orçamento de desempenho é um conjunto de limites impostos às métricas que afetam o desempenho do site. Pode ser o tamanho total de uma página, o tempo que leva para carregar em uma rede móvel ou até mesmo o número de solicitações HTTP enviadas. Definir um orçamento ajuda a iniciar a conversa sobre desempenho na web. Ele serve como um ponto de referência para a tomada de decisões sobre design, tecnologia e adição de recursos.
+
+Ter um orçamento permite que os designers pensem nos efeitos das imagens de alta resolução e no número de fontes da web que eles escolhem. Também ajuda os desenvolvedores a comparar diferentes abordagens para um problema e avaliar estruturas e bibliotecas com base em seu tamanho e [custo de análise](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4).
+
+## Escolha as métricas
+
+### Métricas baseadas em quantidade ⚖️
+
+Essas métricas são úteis nos estágios iniciais de desenvolvimento porque destacam o impacto da inclusão de imagens e scripts pesados. Eles também são fáceis de serem comunicados a designers e desenvolvedores.
+
+Já mencionamos algumas coisas que você pode incluir em um orçamento de desempenho, como o peso da página e o número de solicitações HTTP, mas você pode dividi-los em limites mais granulares, como:
+
+- Tamanho máximo das imagens
+- Número máximo de fontes da web
+- Tamanho máximo de scripts, incluindo estruturas
+- Número total de recursos externos, como scripts de terceiros
+
+No entanto, esses números não dizem muito sobre a experiência do usuário. Duas páginas com o mesmo número de solicitações ou mesmo peso podem ser renderizadas de maneira diferente dependendo da ordem em que os recursos são solicitados. Se um [recurso crítico,](/critical-rendering-path/) como uma imagem principal ou uma folha de estilo em uma das páginas, for carregado no final do processo, os usuários irão esperar mais para ver algo útil e perceber a página como mais lenta. Se na outra página as partes mais importantes carregarem rapidamente, eles podem nem perceber se o resto da página carregou ou não.
+
+<figure>{% Img src="image/admin/U0QhA82KFyED4r1y3tAq.png", alt="Imagem de renderização progressiva de página com base no caminho crítico", width="611", height="300" %}</figure>
+
+É por isso que é importante controlar outro tipo de métrica.
+
+### Cronometragem dos marcos ⏱️
+
+Os tempos de marcos marcam eventos que acontecem durante o carregamento da página, como [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) ou evento de [carregamento.](https://developer.mozilla.org/docs/Web/Events/load) Os tempos mais úteis são [métricas de desempenho centradas no usuário](/user-centric-performance-metrics/) que informam algo sobre a experiência de carregar uma página. Essas métricas estão disponíveis por meio de [APIs de navegador](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#measuring_these_metrics_on_real_users_devices) e como parte dos relatórios do [Lighthouse.](https://developer.chrome.com/docs/lighthouse/overview/)
+
+[First Contentful Paint (FCP)](/fcp/) mede quando o navegador exibe o primeiro bit de conteúdo do DOM, como texto ou imagens.
+
+[O Time to Interactive (TTI)](/tti/) mede quanto tempo leva para uma página se tornar totalmente interativa e responder de forma confiável à entrada do usuário. É uma métrica muito importante a ser acompanhada se você espera qualquer tipo de interação do usuário na página, como clicar em links, botões, digitar ou usar elementos de formulário.
+
+### Métricas baseadas em regras 💯
+
+O [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) e o [WebPageTest](https://www.webpagetest.org/) calculam [as pontuações de desempenho](https://developers.google.com/web/tools/lighthouse/scoring#perf-scoring) com base nas regras de melhores práticas gerais, que podem ser usadas como diretrizes. Como bônus, o Lighthouse também oferece dicas para otimizações simples.
+
+Você obterá os melhores resultados se acompanhar uma combinação de métricas de desempenho baseadas em quantidade e centradas no usuário. Concentre-se nos tamanhos dos ativos nas fases iniciais de um projeto e comece a acompanhar o FCP e o TTI o mais rápido possível.
+
+## Estabeleça uma linha de base
+
+A única maneira de saber realmente o que funciona melhor para o seu site é experimentando: pesquise e teste suas descobertas. Analise a competição para ver como você se sai. 🕵️
+
+Se você não tem tempo para isso, aqui estão alguns bons números padrão para você começar:
+
+- Menos de **5 segundos** de Time to Interactive
+- Menos de **170 KB** de [recursos de caminho crítico](/critical-rendering-path/) (compactado/reduzido)
+
+Esses [números](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) são calculados com base em dispositivos de linha de base do mundo real e na **velocidade da rede 3G** . [Mais da metade do tráfego da Internet](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/) hoje acontece em redes móveis, então você deve usar a velocidade da rede 3G como ponto de partida.
+
+### Exemplos de orçamentos
+
+Você deve ter um orçamento adequado para diferentes tipos de páginas em seu site, pois o conteúdo pode variar. Por exemplo:
+
+- Nossa página de produto deve ser enviada com menos de 170 KB de JavaScript para redes celulares
+- Nossa página de pesquisa deve incluir menos de 2 MB de imagens para computadores desktop
+- Nossa página inicial deve carregar e estar interativa em &lt; 5 s em 3G lento em um telefone Moto G4
+- Nosso blog deve ter uma pontuação &gt; 80 em auditorias de desempenho do Lighthouse
+
+## Adicione orçamentos de desempenho ao seu processo de construção
+
+{% Img src="image/admin/YKJcgI9Yd8qEZM0nzPuv.png", alt="Logotipos Webpack, bundlesize e Lighthouse", width="800", height="267" %}
+
+A escolha de uma ferramenta para isso dependerá muito da escala do seu projeto e dos recursos que você pode dedicar à tarefa. Existem algumas ferramentas de código aberto que podem ajudá-lo a adicionar orçamento ao seu processo de criação:
+
+- [Recursos de desempenho do Webpack](https://webpack.js.org/configuration/performance/)
+- [bundlesize](https://github.com/siddharthkp/bundlesize)
+- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci)
+
+Se algo ultrapassar um limite definido, você pode:
+
+- Otimizar um recurso ou ativo existente 🛠️
+- Remover um recurso ou ativo existente 🗑️
+- Não adicionar o novo recurso ou ativo ✋⛔
+
+## Acompanhe o desempenho
+
+Garantir que seu site seja rápido o suficiente significa que você deve continuar avaliando após o lançamento inicial. O monitoramento dessas métricas ao longo do tempo e a [obtenção de dados de usuários reais](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/) mostrarão como as mudanças no desempenho afetam as principais métricas para os negócios.
+
+## Para finalizar
+
+O objetivo de um orçamento de desempenho é garantir que você se concentre no desempenho ao longo de um projeto e defini-lo no início ajudará a evitar retrocessos mais tarde. Ele deve ser o ponto de referência para ajudá-lo a descobrir o que incluir em seu site. A ideia principal é definir metas para que você possa equilibrar melhor o desempenho sem prejudicar a funcionalidade ou a experiência do usuário.🎯
+
+O próximo guia orientará você na definição de seu primeiro orçamento de desempenho em algumas simples etapas.
diff --git a/src/site/content/pt/fast/preload-critical-assets/index.md b/src/site/content/pt/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..4e3526b5900
--- /dev/null
+++ b/src/site/content/pt/fast/preload-critical-assets/index.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: Pré-carregue ativos críticos para melhorar a velocidade de carregamento
+authors:
+  - houssein
+  - mihajlija
+description: |2
+
+  Assim que você abre qualquer página da web, o navegador solicita um documento HTML de um
+
+  servidor, analisa o conteúdo do arquivo HTML e envia solicitações separadas
+
+  para quaisquer outras referências externas. A cadeia de solicitação crítica representa o
+
+  ordem dos recursos que são priorizados e buscados pelo navegador.
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Quando você abre uma página da web, o navegador solicita o documento HTML de um servidor, analisa seu conteúdo e envia solicitações separadas para quaisquer recursos referenciados. Como desenvolvedor, você já conhece todos os recursos de que sua página precisa e quais deles são os mais importantes. Você pode usar esse conhecimento para solicitar os recursos críticos com antecedência e acelerar o processo de carregamento. Esta postagem explica como fazer isso com `<link rel="preload">`.
+
+## Como funciona o pré-carregamento
+
+O pré-carregamento é mais adequado para recursos normalmente descobertos mais tarde pelo navegador.
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Captura de tela do painel Chrome DevTools Network.", width="701", height="509" %}<figcaption> Neste exemplo, a fonte Pacifico é definida na folha de estilo com uma regra <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a>. O navegador carrega o arquivo de fonte somente após concluir o download e a análise da folha de estilo.</figcaption></figure>
+
+Ao pré-carregar um determinado recurso, você está dizendo ao navegador que gostaria de buscá-lo antes do que o navegador iria descobri-lo, porque você tem certeza de que é importante para a página atual.
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="Captura de tela do painel Chrome DevTools Network após aplicar o pré-carregamento.", width="701", height="509" %} <figcaption> Neste exemplo, a fonte Pacifico é pré-carregada, portanto, o download ocorre em paralelo com a folha de estilo.</figcaption></figure>
+
+A cadeia de solicitação crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. O Lighthouse identifica os ativos que estão no terceiro nível dessa cadeia como descobertos posteriormente. Você pode usar a [**auditoria de solicitações de chave**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/) de pré-carregamento para identificar quais recursos pré-carregar.
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="A chave de pré-carregamento do farol solicita auditoria.", width="745", height="97" %}
+
+Você pode pré-carregar recursos adicionando uma tag `<link>` `rel="preload"` ao cabeçalho do seu documento HTML:
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+O navegador armazena em cache os recursos pré-carregados para que estejam disponíveis imediatamente quando necessário. Ele não executa os scripts nem aplica as folhas de estilo.
+
+{% Aside %} Depois de implementar o pré-carregamento, muitos sites, incluindo [Shopify, Financial Times e Treebo, viram melhorias de 1 segundo](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) em métricas centradas no usuário, como [Time to Interactive](/tti/) e [First Contentful Paint](/fcp/). {% endAside %}
+
+Dicas de recursos, por exemplo, [`preconnect`](/preconnect-and-dns-prefetch) - [`prefetch`](/link-prefetch), são executadas conforme o navegador achar adequado. A `preload`, por outro lado, é obrigatória para o navegador. Os navegadores modernos já são muito bons em priorizar recursos, por isso é importante usar o `preload` com moderação e pré-carregar apenas os recursos mais críticos.
+
+Pré-carregamentos não utilizados disparam um alerta de Console no Chrome, aproximadamente 3 segundos depois do evento `load`.
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="Aviso do Chrome DevTools Console sobre recursos pré-carregados não utilizados.", width="800", height="228" %}
+
+{% Aside %} O [`preload` é suportado](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility) em todos os navegadores modernos. {% endAside %}
+
+## Casos de uso
+
+{% Aside 'caution' %} No momento da escrita, o Chrome tinha um [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=788757) aberto para solicitações pré-carregadas que são buscadas antes de outros recursos de prioridade mais alta. Até que isso seja resolvido, desconfie de como os recursos pré-carregados podem "pular a fila" e ser solicitados mais cedo do que deveriam. {% endAside %}
+
+### Recursos de pré-carregamento definidos em CSS
+
+Fontes definidas com [`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face) ou imagens de fundo definidas em arquivos CSS não são descobertas até que o navegador baixe e analise esses arquivos CSS. O pré-carregamento desses recursos garante que eles sejam buscados antes do download dos arquivos CSS.
+
+### Pré-carregando arquivos CSS
+
+Se estiver usando a [abordagem crítica de CSS{/a0 , você dividirá seu CSS em duas partes. O CSS crítico necessário para renderizar o conteúdo acima da dobra é embutido no `<head>` do documento e o CSS não crítico geralmente é carregado lentamente com JavaScript. Esperar que o JavaScript seja executado antes de carregar o CSS não crítico pode causar atrasos na renderização quando os usuários fazem a rolagem, então é uma boa ideia usar `<link rel="preload">` para iniciar o download mais cedo.](/extract-critical-css)
+
+### Pré-carregando arquivos JavaScript
+
+Como os navegadores não executam arquivos pré-carregados, o pré-carregamento é útil para separar a busca da [execuçãoo](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/), o que pode melhorar as métricas, como o tempo de interação. O pré-carregamento funciona melhor se você [dividir](/reduce-javascript-payloads-with-code-splitting) seus pacotes de JavaScript e pré-carregar apenas os blocos críticos.
+
+## Como implementar rel=preload
+
+A maneira mais simples de implementar o `preload` é adicionar uma tag `<link>` `<head>` do documento:
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+Fornecendo o `as` atributo ajuda o navegador definir a prioridade do recurso prefetched acordo com seu tipo, definir os cabeçalhos certas, e determinar se o recurso já existe no cache. Os valores aceitos para este atributo incluem: `script` , `style` , `font` , `image` e [outros](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes) .
+
+{% Aside %} Dê uma olhada no [documento de Agendamento e Prioridades de Recursos](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) do Chrome para saber mais sobre como o navegador prioriza diferentes tipos de recursos. {% endAside %}
+
+{% Aside 'caution' %} Omitir o atributo `as` ou ter um valor inválido é equivalente a uma [solicitação XHR](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest), onde o navegador não sabe o que está buscando por isso não pode determinar a prioridade correta. Também pode fazer com que alguns recursos, como scripts, sejam buscados duas vezes. {% endAside %}
+
+Alguns tipos de recursos, como fontes, são carregados no [modo anônimo](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements). Para aqueles, você deve definir o atributo `crossorigin` `preload`:
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} Fontes pré-carregadas sem o `crossorigin` serão buscadas duas vezes! {% endAside %}
+
+Elementos `<link>` também aceitam um atributo [`type`](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-type), que contém o [tipo MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) do recurso vinculado. Os navegadores usam o valor do `type` para garantir que os recursos sejam pré-carregados apenas se seu tipo de arquivo for compatível. Se um navegador não suportar o tipo de recurso especificado, ele ignorará o `<link rel="preload">`.
+
+{% Aside 'codelab' %} [Melhore o desempenho de uma página pré-carregando fontes da web](/codelab-preload-web-fonts). {% endAside %}
+
+Você também pode pré-carregar qualquer tipo de recurso por meio do [cabeçalho `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link) HTTP:
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+Um benefício de especificar o `preload` no cabeçalho HTTP é que o navegador não precisa analisar o documento para descobri-lo, o que pode oferecer pequenas melhorias em alguns casos.
+
+### Pré-carregando módulos JavaScript com webpack
+
+Se você estiver usando um empacotador de módulo que cria arquivos de construção de seu aplicativo, você precisa verificar se ele suporta a injeção de tags de pré-carregamento. Com o [webpack](https://webpack.js.org/) versão 4.6.0 ou posterior, o pré-carregamento é suportado através do uso de [comentários mágicos](https://webpack.js.org/api/module-methods/#magic-comments) dentro de `import()`:
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+Se você estiver usando uma versão mais antiga do webpack, use um plug-in de terceiros, como [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin).
+
+## Conclusão
+
+Para melhorar a velocidade da página, pré-carregue recursos importantes que são descobertos posteriormente pelo navegador. Pré-carregar tudo seria contraproducente, portanto, use a `preload` com moderação e [meça o impacto no mundo real](/fast#measure-performance-in-the-field).
diff --git a/src/site/content/pt/fast/publish-modern-javascript/index.md b/src/site/content/pt/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..82f899be0f6
--- /dev/null
+++ b/src/site/content/pt/fast/publish-modern-javascript/index.md
@@ -0,0 +1,306 @@
+---
+layout: post
+title: Publique, envie e instale o JavaScript moderno para aplicativos mais rápidos
+subhead: Melhore o desempenho ativando as dependências e a saída do JavaScript moderno.
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: |2-
+
+  O JavaScript moderno oferece melhorias de tamanho e desempenho em relação ao ES5 transpilado, e é compatível com 95% dos navegadores da web. Ativar a saída JavaScript moderna traz esses benefícios para o seu aplicativo, mas o impacto é limitado por dependências que já estão transpilados para ES5. Este guia demonstra como publicar pacotes modernos ao npm e como instalar e agrupar pacotes JavaScript modernos da maneira ideal.
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - codelab-serve-modern-code
+tags:
+  - performance
+  - blog
+---
+
+Mais de 90% dos navegadores são capazes de executar o JavaScript moderno, mas a prevalência do JavaScript legado continua sendo um dos maiores contribuintes para os problemas de desempenho na web hoje. [EStimator.dev](http://estimator.dev/) é uma ferramenta simples baseada na web que calcula o tamanho e a melhoria de desempenho que um site pode alcançar fornecendo uma sintaxe do JavaScript moderna.
+
+<figure data-size="full">{% Img src="image/admin/FHHnXqdjdsC6PNSSnnC4.png", alt="A análise do EStimator.dev mostrando um site poderia ser 9% mais rápida com JavaScript moderno.", width="800", height="785" %} <figcaption> EStimator.dev </figcaption></figure>
+
+A web hoje é limitada por JavaScript legado e nenhuma otimização melhorará o desempenho tanto quanto escrever, publicar e enviar sua página da web ou pacote usando a sintaxe **ES2017**.
+
+## JavaScript moderno
+
+O JavaScript moderno não é caracterizado como um código escrito em uma versão de especificação ECMAScript específica, mas sim na sintaxe que é suportada por todos os navegadores modernos. Navegadores modernos como Chrome, Edge, Firefox e Safari representam mais de [90% do mercado de navegadores](https://www.caniuse.com/usage-table), e navegadores diferentes que contam com os mesmos mecanismos de renderização subjacentes representam 5% adicionais. Isso significa que 95% do tráfego global da web vem de navegadores que suportam os recursos de linguagem do JavaScript mais amplamente usados nos últimos 10 anos, incluindo:
+
+- Classes (ES2015)
+- Funções das setas (ES2015)
+- Geradores (ES2015)
+- Escopo do bloco (ES2015)
+- Destruição (ES2015)
+- Parâmetros de repouso e propagação (ES2015)
+- Abreviação do objeto (ES2015)
+- Assíncrono/aguardar (ES2017)
+
+Recursos em versões mais recentes da especificação de idioma geralmente têm suporte menos consistente em navegadores modernos. Por exemplo, muitos recursos do ES2020 e ES2021 são suportados apenas em 70% do mercado de navegadores — ainda que a maioria dos navegadores, mas não o suficiente para que seja seguro confiar diretamente nesses recursos. Isso significa que, embora o JavaScript "moderno" seja um alvo móvel, o ES2017 tem a mais ampla variedade de compatibilidade do navegador, [enquanto inclui a maioria dos recursos de sintaxe modernos comumente usados](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c). Em outras palavras, **ES2017 é a sintaxe mais próxima da moderna hoje**.
+
+## JavaScript legado
+
+O JavaScript legado é um código que evita especificamente o uso de todos os recursos de linguagem mencionados acima. A maioria dos desenvolvedores escreve seu código-fonte usando uma sintaxe moderna, mas compila tudo para a sintaxe legada para aumentar o suporte do navegador. Compilar a sintaxe legada aumenta o suporte do navegador, no entanto, o efeito costuma ser menor do que imaginamos. Em muitos casos, o suporte aumenta de cerca de 95% para 98% enquanto que o custo é significativo:
+
+- O JavaScript legado é normalmente cerca de 20% maior e mais lento do que o código moderno equivalente. Deficiências de ferramentas e configurações incorretas muitas vezes ampliam ainda mais esta falha.
+
+- As bibliotecas instaladas representam até 90% da produção convencional do código do JavaScript. O código da biblioteca incorre em uma sobrecarga do JavaScript legado ainda maior devido ao polyfill e à duplicação do auxiliar que poderia ser evitada com a publicação de código moderno.
+
+## JavaScript moderno em npm
+
+Recentemente, o Node.js padronizou um campo de `"exports"` para definir [pontos de entrada para um pacote](https://nodejs.org/api/packages.html#packages_package_entry_points):
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+Módulos referenciados pelo campo `"exports"` implicam em uma versão do Nó de pelo menos 12.8, que suporta ES2019. Isso significa que qualquer módulo referenciado usando o `"exports"` pode ser *escrito em JavaScript moderno*. Os consumidores do pacote devem assumir que os módulos com um `"exports"` contêm código moderno e transpilar, caso seja necessário.
+
+### Apenas moderno
+
+Caso você deseje publicar um pacote com código moderno e deixar ao consumidor a responsabilidade de transportá-lo quando for usado como uma dependência, use apenas o campo `"exports"`.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %} Esta abordagem *não é recomendada*. Em um mundo perfeito, cada desenvolvedor já teria configurado seu sistema de compilação para transpilar todas as dependências (`node_modules`) para sua sintaxe necessária. No entanto, esse não é o caso atualmente, e publicar seu pacote usando apenas sintaxe moderna impediria seu uso em aplicativos que seriam acessados por navegadores legados. {% endAside %}
+
+### Moderno com fallback legado
+
+Use o campo `"exports"` junto com `"main"` para publicar seu pacote usando código moderno, mas também inclua um fallback ES5 + CommonJS para navegadores legados.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### Moderno com fallback legado e otimizações de empacotadores ESM
+
+Além de definir um ponto de entrada CommonJS de fallback, o `"module"` pode ser usado para apontar para um pacote de fallback legado semelhante, mas que usa sintaxe de módulo do JavaScript (`import` e `export`).
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+Muitos empacotadores, como webpack e Rollup, contam com esse campo para aproveitar as vantagens dos recursos do módulo e permitir a [tree shaking](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size). Este ainda é um pacote legado que não contém nenhum código moderno além da `import`/`export`, portanto, use essa abordagem para enviar código moderno com um fallback legado que ainda é otimizado para empacotamento.
+
+## JavaScript moderno em aplicativos
+
+Dependências de terceiros constituem a grande maioria do código do JavaScript de produção típico em aplicativos da web. Embora as dependências do npm tenham sido publicadas historicamente como sintaxe ES5 legada, essa não é mais uma suposição segura e corre o risco de atualizações de dependência quebrarem o suporte do navegador em seu aplicativo.
+
+Com um número cada vez maior de pacotes npm migrando para o JavaScript moderno, é importante garantir que as ferramentas de construção estejam configuradas para lidar com eles. Há uma boa chance de alguns dos pacotes npm dos quais você depende já estarem usando recursos de linguagem modernos. Existem várias opções disponíveis para usar o código moderno do npm sem quebrar seu aplicativo em navegadores mais antigos, mas a ideia geral é fazer com que o sistema de compilação transpondo as dependências para o mesmo destino de sintaxe do código-fonte.
+
+## webpack
+
+A partir do webpack 5, agora é possível configurar a sintaxe que o webpack usará ao gerar o código para pacotes e módulos. Isso não transpila seu código ou dependências, apenas afeta o código "glue" gerado pelo webpack. Para especificar o destino de suporte do navegador, adicione uma [configuração de lista de navegadores](https://github.com/browserslist/browserslist#readme) ao seu projeto ou faça isso diretamente na configuração do webpack:
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+Também é possível configurar o webpack para gerar pacotes otimizados que omitem funções do invólucro desnecessárias ao se direcionar a um ambiente moderno de Módulos ES. Isto também configura o webpack para carregar pacotes de divisão de código usando `<script type="module">`.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+Existem vários plug-ins de webpack disponíveis que tornam possível compilar e distribuir o JavaScript moderno, ao mesmo tempo que oferece suporte a navegadores legados, como Optimize Plugin e BabelEsmPlugin.
+
+### Optimize Plugin
+
+O [Optimize Plugin](https://github.com/developit/optimize-plugin) é um plugin webpack que transforma o código final do pacote de JavaScript moderno para legado, em vez de cada arquivo de fonte individual. É uma configuração independente que permite que a configuração do seu webpack assuma que tudo seja JavaScript moderno, sem ramificações especiais para várias saídas ou sintaxes.
+
+Como o Optimize Plugin opera em pacotes em vez de módulos individuais, ele processa o código do seu aplicativo e suas dependências igualmente. Isso torna seguro o uso de dependências do JavaScript modernos do npm, porque seu código será empacotado e transpilado para a sintaxe correta. Também pode ser mais rápido do que as soluções tradicionais envolvendo duas etapas de compilação, enquanto ainda gera pacotes separados para navegadores modernos e legados. Os dois conjuntos de pacotes são projetados para serem carregados usando o [module/nomodule pattern](/serve-modern-code-to-modern-browsers/).
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+O `Optimize Plugin` pode ser mais rápido e eficiente do que configurações de webpack personalizadas, que normalmente agrupam código moderno e legado separadamente. Ele também lida com a execução do [Babel](https://babeljs.io/) para você e minimiza os pacotes usando o [Terser](https://terser.org/) com configurações ideais separadas para as saídas modernas e legadas. Por último, polyfills necessários para os pacotes legados gerados são extraídos em um script dedicado para que nunca sejam duplicados ou carregados desnecessariamente em navegadores mais novos.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Comparação: transpilar módulos de fonte duas vezes versus transpilar pacotes gerados.</figcaption></figure>
+
+### BabelEsmPlugin
+
+O [BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin) é um plugin webpack que funciona junto com [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) para gerar versões modernas de pacotes existentes para enviar menos código transpilado para navegadores modernos. É a solução de prateleira mais popular para module/nomodule, usada por [Next.js](https://nextjs.org/) e [Preact CLI](https://preactjs.com/cli/).
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // your existing babel-loader configuration:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+O `BabelEsmPlugin` suporta a uma ampla variedade de configurações de webpack, porque executa duas compilações amplamente separadas de seu aplicativo. Compilar duas vezes pode levar um pouco mais de tempo para aplicativos grandes, no entanto, essa técnica permite que o `BabelEsmPlugin` se integre perfeitamente às configurações do webpack existentes e o torna uma das opções mais convenientes disponíveis.
+
+### Configure o babel-loader para transpilar node_modules
+
+Caso esteja usando o `babel-loader` sem um dos dois plug-ins anteriores, há uma etapa importante necessária para consumir módulos npm do JavaScript moderno. A definição de duas configurações separadas `babel-loader` torna possível compilar automaticamente recursos de linguagem modernos encontrados em `node_modules` para ES2017, enquanto ainda transpila seu próprio código fonte com os plug-ins Babel e predefinições definidas na configuração do seu projeto. Isso não gera pacotes legados e modernos para uma configuração do module/nomodule, mas torna possível instalar e usar pacotes npm que contêm JavaScript moderno sem quebrar navegadores mais antigos.
+
+O [webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm) usa essa técnica para compilar dependências npm que têm um `"exports"` em seu `package.json`, já que estas podem conter a sintaxe moderna:
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // auto-transpile modern stuff found in node_modules
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+Como alternativa, você pode implementar a técnica manualmente na configuração do seu webpack, verificando se há um campo `"exports"` `package.json` dos módulos conforme eles são resolvidos. Omitindo o armazenamento em cache por questões de brevidade, uma implementação personalizada pode ter a seguinte aparência:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Transpile for your own first-party code:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // Transpile modern dependencies:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+Ao usar essa abordagem, você precisará garantir que a sintaxe moderna seja compatível com seu minificador. Tanto o [Terser](https://github.com/terser/terser#minify-options) quanto o [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options) têm a opção de especificar `{ecma: 2017}` a fim de preservar e, em alguns casos, gerar a sintaxe ES2017 durante a compactação e a formatação.
+
+## Rollup
+
+O Rollup tem suporte integrado para gerar vários conjuntos de pacotes como parte de uma única construção e gera código moderno por padrão. Como resultado, o Rollup pode ser configurado para gerar pacotes modernos e legados com os plug-ins oficiais que você provavelmente já esteja usando.
+
+### @rollup/plugin-babel
+
+Caso use o Rollup, o [`getBabelOutputPlugin()` method](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code) (fornecido pelo [official Babel plugin](https://github.com/rollup/plugins/tree/master/packages/babel) do Rollup) transforma o código em pacotes gerados em vez de módulos de fonte individuais. O Rollup tem suporte integrado para gerar vários conjuntos de pacotes como parte de uma única construção, cada um com seus próprios plug-ins. É possível usar isso para produzir pacotes diferentes para o moderno e o legado, passando cada um por uma configuração diferente de plug-in de saída do Babel:
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // modern bundles:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // legacy (ES5) bundles:
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## Ferramentas de compilação adicionais
+
+O Rollup e webpack são altamente configuráveis, o que geralmente significa que cada projeto deve atualizar sua configuração para permitir a sintaxe do JavaScript moderna nas dependências. Existem também ferramentas de construção de alto nível que favorecem a convenção e os padrões em relação à configuração, como [Parcel](https://parceljs.org/), [Snowpack](https://www.snowpack.dev/), [Vite](https://github.com/vitejs/vite) and [WMR](https://github.com/preactjs/wmr). A maioria dessas ferramentas assume que as dependências do npm podem conter sintaxe moderna e as transpilarão para o(s) nível(is) de sintaxe apropriado(s) ao construir para produção.
+
+Além de plug-ins dedicados para o webpack e Rollup, pacotes do JavaScript modernos com fallbacks legados podem ser adicionados a qualquer projeto usando [devolution](https://github.com/theKashey/devolution). O Devolution é uma ferramenta autônoma que transforma a saída de um sistema de construção para produzir variantes do JavaScript legadas, permitindo que o empacotamento e as transformações assumam um destino de saída moderno.
+
+## Conclusão
+
+O [EStimator.dev](http://estimator.dev/) foi desenvolvido para fornecer uma maneira fácil de avaliar o impacto que pode causar o deslocamento para o código JavaScript moderno para a maioria dos usuários. Hoje, ES2017 é o mais próximo da sintaxe moderna e ferramentas como npm, Babel, webpack e Rollup tornaram possível configurar seu sistema de construção e escrever seus pacotes usando esta sintaxe. Esta postagem aborda várias abordagens, e você deve usar a opção mais fácil que funcione para o seu caso de uso.
+
+{% YouTube 'cLxNdLK--yI' %}
+
+<br>
diff --git a/src/site/content/pt/fast/rail/index.md b/src/site/content/pt/fast/rail/index.md
new file mode 100644
index 00000000000..640e1ef60c5
--- /dev/null
+++ b/src/site/content/pt/fast/rail/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Meça o desempenho com o modelo RAIL
+description: |2
+
+  O modelo RAIL permite que designers e desenvolvedores direcionem de forma confiável o trabalho de otimização de desempenho que tem o maior impacto na experiência do usuário. Aprenda quais objetivos e diretrizes o modelo RAIL estabelece e quais ferramentas você pode usar para alcançá-los.
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL** é um **modelo de desempenho centrado no usuário** que fornece uma estrutura para analisar o desempenho. O modelo divide a experiência do usuário em ações-chave (por exemplo, tocar, rolar, carregar) e ajuda a definir metas de desempenho para cada uma delas.
+
+RAIL representa quatro aspectos distintos do ciclo de vida do aplicativo da web: resposta, animação, inatividade e carregamento. Os usuários têm expectativas de desempenho diferentes para cada um desses contextos. Portanto, as metas de desempenho são definidas com base no contexto e [na pesquisa de UX sobre como os usuários percebem os atrasos](https://www.nngroup.com/articles/response-times-3-important-limits/).
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="As quatro partes do modelo de desempenho RAIL: resposta, animação, ocioso e carga.", width = "800", height="290" %}<figcaption> As quatro partes do modelo de desempenho RAIL</figcaption></figure>
+
+## Foco no usuário
+
+Faça dos usuários o ponto central de seu esforço de desempenho. A tabela abaixo descreve as principais métricas de como os usuários percebem atrasos no desempenho:
+
+<table class="table-wrapper scrollbar">
+  <thead>Percepção do usuário sobre atrasos de desempenho</thead>
+  <tr>
+    <td>0 a 16 ms</td>
+    <td>Os usuários são excepcionalmente bons em rastrear movimentos e não gostam quando as animações não são suaves. Eles percebem as animações como suaves, desde que 60 novos quadros sejam renderizados a cada segundo. São 16 ms por quadro, incluindo o tempo que leva para o navegador pintar o novo quadro na tela, deixando um aplicativo de cerca de 10 ms para produzir um quadro.</td>
+  </tr>
+  <tr>
+    <td>0 a 100 ms</td>
+    <td>Responda às ações do usuário dentro dessa janela de tempo e eles sentirão que o resultado é imediato. Se levar mais tempo, a conexão entre ação e reação é quebrada.</td>
+  </tr>
+  <tr>
+    <td>100 a 1000 ms</td>
+    <td>Dentro desta janela, as coisas parecem ser parte de uma progressão natural e contínua de tarefas. Para a maioria dos usuários da web, carregar páginas ou alterar visualizações representa uma tarefa.</td>
+  </tr>
+  <tr>
+    <td>1000 ms ou mais</td>
+    <td>Além de 1000 milissegundos (1 segundo), os usuários perdem o foco na tarefa que estão executando.</td>
+  </tr>
+  <tr>
+    <td>10.000 ms ou mais</td>
+    <td>Além de 10.000 milissegundos (10 segundos), os usuários ficam frustrados e tendem a abandonar as tarefas. Eles podem ou não voltar mais tarde.</td>
+  </tr>
+</table>
+
+{% Aside %} Os usuários percebem atrasos de desempenho de maneira diferente, dependendo das condições da rede e do hardware. Por exemplo, carregar sites em uma máquina de desktop poderosa com uma conexão Wi-Fi rápida geralmente ocorre em menos de 1 s e os usuários se acostumaram com isso. Carregar sites em dispositivos móveis com conexões 3G lentas leva mais tempo, então os usuários de celular geralmente são mais pacientes, sendo que carregar em 5 s no celular é uma meta mais realista. {% endAside %}
+
+## Metas e diretrizes
+
+No contexto do RAIL, os termos **objetivos** e **diretrizes** têm significados específicos:
+
+- **Objetivos**. Principais métricas de desempenho relacionadas à experiência do usuário. Por exemplo, toque para pintar em menos de 100 milissegundos. Como a percepção humana é relativamente constante, é improvável que esses objetivos mudem tão cedo.
+
+- **Diretrizes**. Recomendações que ajudam o usuário a atingir objetivos. Podem ser específicas para o hardware atual e as condições de conexão de rede e, portanto, mudar com o tempo.
+
+## Resposta: processar eventos em menos de 50 ms
+
+**Objetivo** : concluir uma transição iniciada pela entrada do usuário em 100 ms, para que sintam que as interações são instantâneas.
+
+**Diretrizes**:
+
+- Para garantir uma resposta visível em 100 ms, processe os eventos de entrada do usuário em 50 ms. Isso se aplica à maioria das entradas, como clicar em botões, alternar controles de formulário ou iniciar animações. Isso não se aplica a arrastar ou rolar por toque.
+
+- Embora possa parecer contra-intuitivo, nem sempre é a chamada certa para responder à entrada do usuário imediatamente. Você pode usar essa janela de 100 ms para fazer outro trabalho caro, mas tome cuidado para não bloquear o usuário. Se possível, trabalhe em segundo plano.
+
+- Para ações que levam mais de 50 ms para serem concluídas, sempre forneça feedback.
+
+### 50 ms ou 100 ms?
+
+O objetivo é responder à entrada em menos de 100 ms, então por que a nossa reserva é de apenas 50 ms? Isso ocorre porque geralmente há outro trabalho sendo feito, além do tratamento de entrada, e ele ocupa parte do tempo disponível para obter uma resposta de entrada aceitável. Se um aplicativo estiver executando o trabalho nos blocos recomendados de 50 ms durante o tempo ocioso, isso significa que a entrada pode ser enfileirada por até 50 ms se ocorrer durante um desses blocos de trabalho. Levando em conta isso, é seguro presumir que apenas os 50 ms restantes estão disponíveis para o tratamento de entrada real. Este efeito é visualizado no diagrama abaixo que mostra como a entrada recebida durante uma tarefa ociosa é enfileirada, reduzindo o tempo de processamento disponível:
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="Diagrama mostrando como a entrada recebida durante uma tarefa ociosa é enfileirada, reduzindo o tempo de processamento de entrada disponível para 50 ms", width="800", height="400" %}<figcaption> Como as tarefas ociosas afetam a reserva de resposta de entrada.</figcaption></figure>
+
+## Animação: produzir um quadro em 10 ms
+
+**Objetivos** :
+
+- Produza cada quadro de uma animação em 10 ms ou menos. Tecnicamente, a reserva máxima para cada quadro é de 16 ms (1000 ms/60 quadros por segundo ≈ 16 ms), mas os navegadores precisam de cerca de 6 ms para renderizar cada quadro, por isso a diretriz de 10 ms por quadro.
+
+- Procure suavidade visual. Os usuários percebem quando as taxas de quadros variam.
+
+**Diretrizes** :
+
+- Em pontos de alta pressão, como animações, a chave é não fazer nada em que você pode e o mínimo absoluto em que você não pode. Sempre que possível, use a resposta de 100 ms para pré-calcular o trabalho caro, de modo que você maximize suas chances de atingir 60 fps.
+
+- Consulte [Desempenho de renderização](/rendering-performance/) para obter várias estratégias de otimização de animação.
+
+{% Aside %} Reconheça todos os tipos de animações. As animações não são apenas efeitos de interface do usuário sofisticados. Cada uma dessas interações são consideradas animações:
+
+- Animações visuais: como entradas e saídas, [interpolações](https://www.webopedia.com/TERM/T/tweening.html) e indicadores de carregamento.
+- Rolagem: inclui arremessar, que é quando o usuário começa a rolar e depois solta, e a página continua rolando.
+- Arraste: as animações geralmente seguem as interações do usuário, como movimentar um mapa ou pinçar para aumentar o zoom. {% endAside %}
+
+## Inativo: maximizar o tempo ocioso
+
+**Objetivo**: maximizar o tempo ocioso para aumentar as chances de que a página responda à entrada do usuário em 50 ms.
+
+**Diretrizes**:
+
+- Use o tempo ocioso para concluir o trabalho adiado. Por exemplo, para o carregamento inicial da página, carregue o mínimo de dados possível e, em seguida, use o [tempo ocioso](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback) para carregar o restante.
+
+- Execute o trabalho durante o tempo ocioso em 50 ms ou menos. Ao demorar mais, você corre o risco de interferir na capacidade do aplicativo de responder à entrada do usuário em 50 ms.
+
+- Se um usuário interagir com uma página durante o trabalho em tempo ocioso, a interação do usuário deve sempre ter a prioridade mais alta e interromper o trabalho em tempo ocioso.
+
+## Carregar: entregue conteúdo e torne-se interativo em menos de 5 segundos
+
+Quando as páginas carregam lentamente, a atenção do usuário se dispersa e os usuários percebem a tarefa como interrompida. Sites que carregam rapidamente têm [sessões médias mais longas, taxas de rejeição mais baixas e maior visibilidade do anúncio](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/).
+
+**Objetivos**:
+
+- Otimize para obter desempenho de carregamento rápido em relação aos recursos do dispositivo e da rede de seus usuários. Atualmente, um bom objetivo para os primeiros carregamentos é carregar a página e ser [interativo](/tti/) em [5 segundos ou menos a partir de dispositivos móveis de médio alcance com conexões 3G lentas](/performance-budgets-101/#establish-a-baseline).
+
+- Para os próximos carregamentos, uma boa meta é carregar a página em menos de 2 segundos.
+
+{% Aside %}
+
+Saiba que essas metas podem mudar com o tempo.
+
+{% endAside %}
+
+**Diretrizes**:
+
+- Teste seu desempenho de carregamento nos dispositivos móveis e conexões de rede comuns entre seus usuários. Você pode usar o [Relatório de experiência do usuário do Chrome](/chrome-ux-report/) para descobrir a [distribuição](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard) de conexão de seus usuários. Se os dados não estiverem disponíveis para seu site, [The Mobile Economy 2019](https://www.gsma.com/mobileeconomy/) sugere que uma boa linha de base global é um telefone Android de médio alcance, como um Moto G4 e uma rede 3G lenta (definida como 400 ms RTT e velocidade de transferência de 400 kbps). Essa combinação está disponível em [WebPageTest](https://www.webpagetest.org/easy).
+
+- Lembre-se de que, embora o dispositivo de um usuário móvel típico possa alegar que está em uma conexão 2G, 3G ou 4G, na realidade a [velocidade efetiva da conexão](/adaptive-serving-based-on-network-quality/#how-it-works) costuma ser significativamente mais lenta, devido à perda de pacotes e à variação da rede.
+
+- [Elimine recursos de bloqueio de renderização](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
+
+- Você não precisa carregar tudo em menos de 5 segundos para causar a impressão de um carregamento completo. Considere [imagens de carregamento lento](/browser-level-image-lazy-loading/), [pacotes JavaScript de divisão de código](/reduce-javascript-payloads-with-code-splitting/) e outras [otimizações sugeridas em web.dev](/fast/).
+
+{% Aside %} Reconheça os fatores que afetam o desempenho do carregamento da página:
+
+- Velocidade e latência da rede
+- Hardware (CPUs mais lentas, por exemplo)
+- Remoção de cache
+- Diferenças no cache L2/L3
+- Analisando JavaScript {% endAside %}
+
+## Ferramentas para medir RAIL
+
+Existem algumas ferramentas para ajudá-lo a automatizar as medições do RAIL. Qual você usa depende do tipo de informação de que você precisa e de qual tipo de fluxo de trabalho você prefere.
+
+### Chrome DevTools
+
+O [Chrome DevTools](https://developer.chrome.com/docs/devtools/) fornece análises detalhadas sobre tudo o que acontece enquanto sua página é carregada ou executada. Consulte [Introdução à análise do desempenho do tempo de execução](https://developer.chrome.com/docs/devtools/evaluate-performance/) para se familiarizar com a IU do painel **Desempenho**.
+
+Os seguintes recursos do DevTools são especialmente relevantes:
+
+- [Acelere sua CPU](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle) para simular um dispositivo menos potente.
+
+- [Acelere a rede](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle) para simular conexões mais lentas.
+
+- [Visualize a atividade da thread principal](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main) para ver todos os eventos que ocorreram na thread principal enquanto você estava gravando.
+
+- [Visualize as principais atividades da thread em uma tabela](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities) para classificar as atividades com base naquelas que ocupam mais tempo.
+
+- [Analise quadros por segundo (FPS)](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps) para medir se suas animações realmente funcionam sem problemas.
+
+- [Monitore o uso da CPU, tamanho de heap JS, nós DOM, layouts por segundo e muito mais](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor) em tempo real com o **Monitor de Desempenho**.
+
+- [Visualize solicitações de rede](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network) que ocorreram enquanto você estava gravando com a seção **Rede.**
+
+- [Capture screenshots durante a gravação](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots) para reproduzir exatamente como a página parecia enquanto a página era carregada ou uma animação era disparada e assim por diante.
+
+- [Visualize as interações](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions) para identificar rapidamente o que aconteceu em uma página depois que um usuário interagiu com ela.
+
+- [Encontre problemas de desempenho de rolagem em tempo real](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues) destacando a página sempre que um ouvinte potencialmente problemático for acionado.
+
+- [Visualize eventos de pintura em tempo real](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing) para identificar eventos de pintura custosos que podem prejudicar o desempenho de suas animações.
+
+### Lighthouse
+
+O [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) está disponível no Chrome DevTools, em [web.dev/measure](/measure/), como uma extensão do Chrome, como um módulo Node.js e dentro do WebPageTest. Você fornece uma URL, ele simula um dispositivo de médio alcance com uma conexão 3G lenta, executa uma série de auditorias na página e, em seguida, fornece um relatório sobre o desempenho de carregamento, além de sugestões de como melhorar.
+
+As seguintes auditorias são especialmente relevantes:
+
+**Resposta**
+
+- [Atraso de entrada com potencial máximo](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/). Estima quanto tempo seu aplicativo levará para responder à entrada do usuário, com base no tempo ocioso da thread principal.
+
+- [Não usa ouvintes passivos para melhorar o desempenho de rolagem](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/).
+
+- [Tempo total de bloqueio](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/). Mede a quantidade total de tempo que uma página fica bloqueada para responder à entrada do usuário, como cliques do mouse, toques na tela ou pressionamentos de teclado.
+
+- [Tempo para interação](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive). Mede quando um usuário pode interagir de forma consistente com todos os elementos da página.
+
+**Carregamento**
+
+- [Não registra um trabalho de serviço que controla a página e start_url](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/). Um trabalho de serviço pode armazenar em cache recursos comuns no dispositivo de um usuário, reduzindo o tempo gasto na busca de recursos na rede.
+
+- [O carregamento da página não é rápido o suficiente em redes móveis](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/).
+
+- [Elimine recursos de bloqueio de renderização](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
+
+- [Adie imagens fora da tela](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/). Adie o carregamento de imagens fora da tela até que sejam necessárias.
+
+- [Tamanho adequado das imagens](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/). Não exiba imagens significativamente maiores do que o tamanho renderizado na janela de visualização móvel.
+
+- [Evite encadear solicitações críticas](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).
+
+- [Não usa HTTP/2 para todos os seus recursos](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).
+
+- [Codifique imagens de forma eficiente](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
+
+- [Ative a compactação de texto](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
+
+- [Evite enormes cargas de rede](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).
+
+- [Evite um tamanho excessivo de DOM](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). Reduza os bytes da rede enviando apenas nós DOM necessários para renderizar a página.
+
+### WebPageTest
+
+O WebPageTest é uma ferramenta de desempenho da web que usa navegadores reais para acessar páginas e coletar métricas de tempo. Insira uma URL em [webpagetest.org/easy](https://webpagetest.org/easy) para obter um relatório detalhado sobre o desempenho de carregamento da página em um dispositivo Moto G4 real com uma conexão 3G lenta. Você também pode configurar para incluir uma auditoria do Lighthouse.
+
+## Resumo
+
+RAIL é uma lente para olhar a experiência do usuário de um site como uma jornada composta de interações distintas. Entenda como os usuários percebem seu site para definir metas de desempenho com maior impacto na experiência do usuário.
+
+- Concentre-se no usuário.
+
+- Responda à entrada do usuário em menos de 100 ms.
+
+- Produza um quadro em menos de 10 ms ao animar ou rolar.
+
+- Maximize o tempo ocioso da thread principal.
+
+- Carregue conteúdo interativo em menos de 5000 ms.
diff --git a/src/site/content/pt/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/pt/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..1ed5351d50f
--- /dev/null
+++ b/src/site/content/pt/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: Reduza os payloads do JavaScript com divisão de código
+authors:
+  - houssein
+description: |2-
+
+  O envio de grandes cargas úteis de JavaScript afeta a velocidade do seu site significativamente. Em vez de enviar todo o JavaScript para o seu usuário assim que a primeira página do seu aplicativo for carregada, divida o pacote em vários pedaços e envie apenas o necessário no início.
+date: 2018-11-05
+codelabs:
+  - codelab-code-splitting
+tags:
+  - performance
+---
+
+Ninguém gosta de esperar. **[Mais de 50% dos usuários abandonam um site se ele demorar mais de 3 segundos para carregar](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)**.
+
+O envio de grandes cargas úteis de JavaScript afeta significativamente a velocidade do seu site. Em vez de enviar todo o JavaScript para o seu usuário assim que a primeira página do seu aplicativo for carregada, divida o pacote em várias partes e envie apenas o necessário no início.
+
+## Medir
+
+O Lighthouse exibe uma auditoria com falha quando uma quantidade significativa de tempo é levada para executar todo o JavaScript em uma página.
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="Uma auditoria do Lighthouse com falha mostrando os scripts que demoram muito para serem executados.", width="797", height="100" %}
+
+Divida o pacote JavaScript para enviar apenas o código necessário para a rota inicial quando o usuário carregar um aplicativo. Isso minimiza a quantidade de script que precisa ser analisado e compilado, o que resulta em tempos de carregamento de página mais rápidos.
+
+Empacotadores de módulos populares como [webpack](https://webpack.js.org/guides/code-splitting/), [Parcel](https://parceljs.org/code_splitting.html) e [Rollup](https://rollupjs.org/guide/en#dynamic-import) permitem que você divida seus pacotes usando [importações dinâmicas](https://v8.dev/features/dynamic-import). Por exemplo, considere o seguinte fragmento de código que mostra um exemplo de um `someFunction` que é acionado quando um formulário é enviado.
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // usa moduleA
+}
+```
+
+Aqui, `someFunction` usa um módulo importado de uma biblioteca particular. Se este módulo não estiver sendo usado em outro lugar, o bloco de código pode ser modificado para usar uma importação dinâmica para buscá-lo apenas quando o formulário for enviado pelo usuário.
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // usando a exportação padrão
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // usa o moduleA
+}
+```
+
+O código que compõe o módulo não é incluído no pacote inicial e agora é **carregado lentamente** ou fornecido ao usuário apenas quando necessário após o envio do formulário. Para melhorar ainda mais o desempenho da página, [pré-carregue os blocos críticos para priorizá-los e buscá-los mais cedo](/preload-critical-assets) .
+
+Embora o fragmento de código anterior seja um exemplo simples, o carregamento lento de dependências de terceiros não é um padrão comum em aplicativos maiores. Normalmente, as dependências de terceiros são divididas em um pacote de fornecedor separado que pode ser armazenado em cache, uma vez que não são atualizados com tanta frequência. Você pode ler mais sobre como o [**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/) pode ajudar você a fazer isso.
+
+A divisão na rota ou no nível do componente ao usar uma estrutura do lado do cliente é uma abordagem mais simples para o carregamento lento de diferentes partes de seu aplicativo. Muitos frameworks populares que usam webpack fornecem abstrações para tornar o carregamento lento mais fácil do que você mesmo mergulhar nas configurações.
diff --git a/src/site/content/pt/fast/reduce-network-payloads-using-text-compression/index.md b/src/site/content/pt/fast/reduce-network-payloads-using-text-compression/index.md
new file mode 100644
index 00000000000..573cb77917d
--- /dev/null
+++ b/src/site/content/pt/fast/reduce-network-payloads-using-text-compression/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Minifique e comprima payloads de rede
+authors:
+  - houssein
+date: 2018-11-05
+description: |2-
+
+  Existem duas técnicas úteis que podem ser usadas para melhorar o desempenho de
+
+  sua página da web, minificação e compactação de dados. Incorporar ambas as técnicas reduz os tamanhos da payload e, por sua vez, melhoram os tempos de carregamento da página.
+codelabs:
+  - codelab-text-compression
+  - codelab-text-compression-brotli
+tags:
+  - performance
+---
+
+Existem duas técnicas úteis que podem ser usadas para melhorar o desempenho de sua página da web:
+
+- Minificação
+- Compactação de dados
+
+A incorporação de ambas as técnicas reduz o tamanho do payload e, por sua vez, melhora o tempo de carregamento da página.
+
+## A medida
+
+O Lighthouse exibirá uma auditoria com falha se detectar quaisquer recursos CSS ou JS em sua página que possam ser minificados.
+
+{% Img src="image/admin/ZT9ESeCStegt0SklYbni.png", alt="Auditoria Lighthouse minifica CSS", width="800", height="90" %}
+
+{% Img src="image/admin/vDaAnUSvQxmGcoasQj1k.png", alt="Auditoria Lighthouse minifica JS", width="800", height="112" %}
+
+Ele também audita todos os ativos não compactados.
+
+{% Img src="image/admin/xfqzdLuu3w3lanxo5Ggc.png", alt="Lighthouse: ativar compactação de texto", width="800", height="123" %}
+
+## Minificação
+
+**Minificação** é o processo de remover espaços em branco e qualquer código que não seja necessário para criar um arquivo de código menor, mas perfeitamente válido. [Terser](https://github.com/terser-js/terser) é uma ferramenta de compressão de JavaScript popular e [webpack](https://webpack.js.org/) v4 inclui um plugin para esta biblioteca por padrão para criar arquivos de compilação minificados.
+
+- Se você estiver usando o webpack v4 ou superior, não deverá fazer nenhum trabalho adicional. 👍
+- Se você estiver usando uma versão mais antiga do webpack, instale e inclua `TerserWebpackPlugin` nas definições de configuração do webpack. Siga a [documentação](https://webpack.js.org/plugins/terser-webpack-plugin/) para saber como.
+- Se você não estiver usando um módulo `Terser`, use o Terser como uma ferramenta CLI ou inclua-o diretamente como uma dependência de seu aplicativo. A [documentação](https://github.com/terser-js/terser) do projeto fornece instruções.
+
+## Compressão de dados
+
+A **compactação** é o processo de modificação de dados usando um algoritmo de compactação. [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) é o formato de compactação mais amplamente usado para interações de servidor e cliente. [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) é um algoritmo de compactação mais recente que pode fornecer resultados de compactação ainda melhores do que o Gzip.
+
+{% Aside %} Compactar arquivos pode melhorar significativamente o desempenho de uma página da web, mas raramente você precisa fazer isso sozinho. Muitas plataformas de hospedagem, CDNs e servidores proxy reverso codificam ativos com compactação por padrão ou permitem que você os configure facilmente. Leia a documentação da ferramenta que você está usando para ver se a compactação já é suportada antes de tentar implementar sua própria solução. {% endAside %}
+
+Existem duas maneiras diferentes de compactar arquivos enviados para um navegador:
+
+- Dinamicamente
+- Estatisticamente
+
+Ambas as abordagens têm suas próprias vantagens e desvantagens, que são abordadas na próxima seção. Use o que funcionar melhor para o seu aplicativo.
+
+## Compactação dinâmica
+
+Esse processo envolve a compactação de ativos em tempo real à medida que são solicitados pelo navegador. Isso pode ser mais simples do que compactar arquivos manualmente ou com um processo de construção, mas pode causar atrasos se níveis de compactação altos forem usados.
+
+[Express](https://expressjs.com/) é uma estrutura da web popular para Node e fornece uma biblioteca de middleware de [compactação.](https://github.com/expressjs/compression) Use-o para compactar qualquer ativo conforme solicitado. Aqui está um exemplo de um arquivo de servidor inteiro que o usa corretamente:
+
+```js/5
+const express = require('express');
+const compression = require('compression');
+
+const app = express();
+
+app.use(compression());
+
+app.use(express.static('public'));
+
+const listener = app.listen(process.env.PORT, function() {
+	console.log('Your app is listening on port ' + listener.address().port);
+});
+```
+
+Isso compacta seus ativos usando `gzip` . Se o seu servidor da web oferecer suporte, considere o uso de um módulo separado, como o [shrink-ray,](https://github.com/aickin/shrink-ray#readme) para compactar via Brotli para obter melhores taxas de compactação.
+
+{% Aside 'codelab' %} Use express.js para compactar ativos com [gzip](/codelab-text-compression) e [Brotli](/codelab-text-compression-brotli) . {% endAside %}
+
+## Compactação estática
+
+A compactação estática envolve compactar e salvar ativos antecipadamente. Isso pode fazer com que o processo de construção demore mais, especialmente se forem usados altos níveis de compactação, mas garante que nenhum atraso aconteça quando o navegador buscar o recurso compactado.
+
+Se o seu servidor da web suportar Brotli, use um plugin como o [BrotliWebpackPlugin](https://github.com/mynameiswhm/brotli-webpack-plugin) com webpack para compactar seus ativos como parte de sua etapa de construção. Caso contrário, use o [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin) para compactar seus recursos com gzip. Ele pode ser incluído como qualquer outro plug-in no arquivo de configurações do webpack:
+
+```js/4
+module.exports = {
+	//...
+	plugins: [
+		//...
+		new CompressionPlugin()
+	]
+}
+```
+
+Depois que os arquivos compactados fizerem parte da pasta de construção, crie uma rota em seu servidor para lidar com todos os endpoints JS para servir os arquivos compactados. Aqui está um exemplo de como isso pode ser feito com Node e Express para ativos compactados com gzip.
+
+<pre>const express = require('express');
+const app = express();
+
+&lt;strong&gt;app.get('*.js', (req, res, next) =&gt; {
+	req.url = req.url + '.gz';
+	res.set('Content-Encoding', 'gzip');
+	next();
+});&lt;/strong&gt;
+
+app.use(express.static('public'));
+</pre>
diff --git a/src/site/content/pt/fast/reduce-webfont-size/index.md b/src/site/content/pt/fast/reduce-webfont-size/index.md
new file mode 100644
index 00000000000..4a64dd7a064
--- /dev/null
+++ b/src/site/content/pt/fast/reduce-webfont-size/index.md
@@ -0,0 +1,226 @@
+---
+layout: post
+title: Reduzir o tamanho do WebFont
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: Este post explica como reduzir o tamanho das WebFonts que você usa em seu site, para que uma boa tipografia não signifique um site lento.
+tags:
+  - performance
+  - fonts
+---
+
+A tipografia é fundamental para um bom design, identidade visual, legibilidade e acessibilidade. WebFonts permite tudo isso acima e muito mais: o texto é selecionável, pesquisável, com zoom e compatível com alto DPI, fornecendo renderização de texto consistente e nítida, independentemente do tamanho da tela e da resolução. WebFonts são essenciais para um bom design, UX e desempenho.
+
+A otimização WebFont é uma peça crítica da estratégia de desempenho geral. Cada fonte é um recurso adicional e algumas fontes podem bloquear a renderização do texto, mas só porque a página está usando WebFonts não significa que ela tenha que renderizar mais lentamente. Ao contrário, as fontes otimizadas, combinadas com uma estratégia criteriosa de como são carregadas e aplicadas na página, podem ajudar a reduzir o tamanho total da página e melhorar o tempo de renderização da página.
+
+## Anatomia de uma WebFont
+
+Uma *WebFont* é uma coleção de glifos e cada glifo é uma forma vetorial que descreve uma letra ou símbolo. Como resultado, duas variáveis simples determinam o tamanho de um arquivo de fonte específico: a complexidade dos caminhos vetoriais de cada glifo e o número de glifos em uma fonte específica. Por exemplo, Open Sans, que é uma das WebFonts mais populares, contém 897 glifos, que incluem caracteres latinos, gregos e cirílicos.
+
+{% Img src="image/admin/B92rhiBJD9sx88a5CvVy.png", alt="Tabela de glifo de fonte", width="800", height="309" %}
+
+Ao escolher uma fonte, é importante considerar quais conjuntos de caracteres são suportados. Se você precisar localizar o conteúdo da sua página para vários idiomas, deve usar uma fonte que possa fornecer uma aparência e uma experiência consistentes aos seus usuários. Por exemplo, [a família de fontes Noto do Google](https://www.google.com/get/noto/) visa oferecer suporte a todos os idiomas do mundo. Observe, no entanto, que o tamanho total do Noto, com todos os idiomas incluídos, resulta em um download de 1,1 GB+ ZIP.
+
+Nesta postagem, você descobrirá como reduzir o tamanho do arquivo entregue de suas WebFonts.
+
+### Formatos WebFont
+
+Hoje, existem quatro formatos de contêiner de fonte em uso na web:
+
+- [EOT](https://en.wikipedia.org/wiki/Embedded_OpenType)
+- [TTF](https://en.wikipedia.org/wiki/TrueType)
+- [WOFF](https://en.wikipedia.org/wiki/Web_Open_Font_Format)
+- [WOFF2](https://www.w3.org/TR/WOFF2/) .
+
+[WOFF](http://caniuse.com/#feat=woff) e [WOFF 2.0](http://caniuse.com/#feat=woff2) têm o mais amplo suporte, no entanto, para compatibilidade com navegadores mais antigos, você pode precisar incluir outros formatos:
+
+- Veicula a variante WOFF 2.0 para navegadores que a suportam.
+- Veicula a variante WOFF para a maioria dos navegadores.
+- Veicule a variante TTF para navegadores Android antigos (abaixo de 4.4).
+- Servir a variante EOT para navegadores IE antigos (abaixo do IE9).
+
+{% Aside %} Tecnicamente, há outro formato de contêiner, o [contêiner de fonte SVG](http://caniuse.com/svg-fonts) , mas o IE e o Firefox nunca o suportaram e agora está obsoleto no Chrome. Como tal, é de uso limitado e foi omitido intencionalmente neste guia. {% endAside %}
+
+### Reduza o tamanho da fonte com compressão
+
+Uma fonte é uma coleção de glifos, cada um dos quais sendo um conjunto de caminhos que descrevem a forma da letra. Os glifos individuais são diferentes, mas contêm muitas informações semelhantes que podem ser compactadas com GZIP ou um compressor compatível:
+
+- Os formatos EOT e TTF não são compactados por padrão. Certifique-se de que seus servidores estejam configurados para aplicar [compactação GZIP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip) ao entregar esses formatos.
+- WOFF tem compressão embutida. Certifique-se de que seu compressor WOFF está usando as configurações de compressão ideais.
+- O WOFF2 usa algoritmos de pré-processamento e compressão personalizados para oferecer uma redução de tamanho de arquivo de aproximadamente 30% em relação a outros formatos. Para obter mais informações, consulte [o relatório de avaliação do WOFF 2.0](http://www.w3.org/TR/WOFF20ER/) .
+
+Finalmente, é importante notar que alguns formatos de fonte contêm metadados adicionais, como [dicas de fonte](https://en.wikipedia.org/wiki/Font_hinting) e [informações de kerning](https://en.wikipedia.org/wiki/Kerning) que podem não ser necessários em algumas plataformas, o que permite uma otimização adicional do tamanho do arquivo. Consulte o seu compressor de fontes para obter as opções de otimização disponíveis e, se você seguir esse caminho, certifique-se de ter a infraestrutura apropriada para testar e entregar essas fontes otimizadas para cada navegador. Por exemplo, o [Google Fonts](https://fonts.google.com/) mantém mais de 30 variantes otimizadas para cada fonte e detecta e fornece automaticamente a variante ideal para cada plataforma e navegador.
+
+{% Aside %} Considere o uso da [compactação Zopfli](http://en.wikipedia.org/wiki/Zopfli) para os formatos EOT, TTF e WOFF. Zopfli é um compressor compatível com zlib que oferece redução de tamanho de arquivo de aproximadamente 5% em relação ao gzip. {% endAside %}
+
+## Defina uma família de fontes com @font-face
+
+A `@font-face` permite definir a localização de um recurso de fonte específico, suas características de estilo e os pontos de código Unicode para os quais deve ser usado. Uma combinação dessas `@font-face` pode ser usada para construir uma "família de fontes", que o navegador usará para avaliar quais recursos de fontes precisam ser baixados e aplicados à página atual.
+
+### Considere uma fonte variável
+
+Fontes variáveis podem reduzir significativamente o tamanho do arquivo de suas fontes nos casos em que você precisa de várias variantes de uma fonte. Em vez de precisar carregar os estilos regular e em negrito mais suas versões em itálico, você pode carregar um único arquivo que contém todas as informações.
+
+Fontes variáveis agora são suportadas por todos os navegadores modernos, descubra mais na [Introdução às fontes variáveis na web](/variable-fonts/) .
+
+### Selecione o formato certo
+
+Cada `@font-face` fornece o nome da família da fonte, que atua como um grupo lógico de várias declarações, [propriedades da fonte](http://www.w3.org/TR/css3-fonts/#font-prop-desc) , como estilo, peso e extensão, e o [descritor src](http://www.w3.org/TR/css3-fonts/#src-desc) , que especifica uma lista priorizada de locais para a fonte recurso.
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome.woff2') format('woff2'),
+        url('/fonts/awesome.woff') format('woff'),
+        url('/fonts/awesome.ttf') format('truetype'),
+        url('/fonts/awesome.eot') format('embedded-opentype');
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Awesome Font Italic'),
+        url('/fonts/awesome-i.woff2') format('woff2'),
+        url('/fonts/awesome-i.woff') format('woff'),
+        url('/fonts/awesome-i.ttf') format('truetype'),
+        url('/fonts/awesome-i.eot') format('embedded-opentype');
+}
+```
+
+Primeiro, observe que os exemplos acima definem uma única *família Awesome Font* com dois estilos (normal e *itálico* ), cada um apontando para um conjunto diferente de recursos de fonte. Por sua vez, cada `src` contém uma lista priorizada e separada por vírgulas de variantes de recursos:
+
+- A `local()` permite que você faça referência, carregue e use fontes instaladas localmente.
+- A `url()` permite que você carregue fontes externas e pode conter uma `format()` indicando o formato da fonte referenciada pelo URL fornecido.
+
+{% Aside %} A menos que você esteja fazendo referência a uma das fontes padrão do sistema, é raro o usuário tê-la instalada localmente, especialmente em dispositivos móveis, onde é efetivamente impossível "instalar" fontes adicionais. Você deve sempre começar com uma `local()` "por precaução" e, em seguida, fornecer uma lista de entradas `url()` {% endAside %}
+
+Quando o navegador determina que a fonte é necessária, ele itera através da lista de recursos fornecida na ordem especificada e tenta carregar o recurso apropriado. Por exemplo, seguindo o exemplo acima:
+
+1. O navegador executa o layout da página e determina quais variantes de fonte são necessárias para processar o texto especificado na página.
+2. Para cada fonte necessária, o navegador verifica se a fonte está disponível localmente.
+3. Se a fonte não estiver disponível localmente, o navegador itera sobre as definições externas:
+    - Se uma dica de formato estiver presente, o navegador verifica se ele suporta a dica antes de iniciar o download. Se o navegador não suportar a dica, o navegador avança para a próxima.
+    - Se nenhuma dica de formato estiver presente, o navegador fará o download do recurso.
+
+A combinação de diretivas locais e externas com dicas de formato apropriadas permite que você especifique todos os formatos de fonte disponíveis e deixe o navegador cuidar do resto. O navegador determina quais recursos são necessários e seleciona o formato ideal.
+
+{% Aside %} A ordem em que as variantes de fonte são especificadas é importante. O navegador escolhe o primeiro formato compatível. Portanto, se você deseja que os navegadores mais novos usem WOFF 2.0, você deve colocar a declaração WOFF 2.0 acima de WOFF. {% endAside %}
+
+### Subconjunto de intervalo Unicode
+
+Além das propriedades da fonte, como estilo, peso e extensão, a `@font-face` permite definir um conjunto de pontos de código Unicode com suporte para cada recurso. Isso permite que você divida uma fonte Unicode grande em subconjuntos menores (por exemplo, subconjuntos latinos, cirílicos e gregos) e baixe apenas os glifos necessários para renderizar o texto em uma página específica.
+
+O [descritor de intervalo Unicode](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range) permite que você especifique uma lista delimitada por vírgulas de intervalo de valores, cada um dos quais podendo estar em uma de três formas diferentes:
+
+- Ponto de código único (por exemplo, `U+416` )
+- Intervalo de intervalo (por exemplo, `U+400-4ff` ): indica os pontos de código inicial e final de um intervalo
+- Intervalo de curingas (por exemplo, `U+4??` ) `?` caracteres indicam qualquer dígito hexadecimal
+
+Por exemplo, você pode dividir sua *família Awesome Font* em subconjuntos latinos e japoneses, cada um dos quais o navegador baixa conforme necessário:
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* glifos latinos */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-jp.woff2') format('woff2'),
+        url('/fonts/awesome-jp.woff') format('woff'),
+        url('/fonts/awesome-jp.ttf') format('truetype'),
+        url('/fonts/awesome-jp.eot') format('embedded-opentype');
+  unicode-range: U+3000-9FFF, U+ff??; /* glifos japoneses */
+}
+```
+
+{% Aside %} O subconjunto do intervalo Unicode é particularmente importante para os idiomas asiáticos, onde o número de glifos é muito maior do que nos idiomas ocidentais e uma fonte "completa" típica geralmente é medida em megabytes em vez de dezenas de kilobytes. {% endAside %}
+
+O uso de subconjuntos de faixas Unicode e arquivos separados para cada variante estilística da fonte permite definir uma família de fontes composta que é mais rápida e eficiente para fazer download. Os visitantes apenas baixam as variantes e subconjuntos de que precisam e não são forçados a baixar subconjuntos que talvez nunca vejam ou usem na página.
+
+A maioria dos navegadores [agora oferece suporte a intervalo Unicode](http://caniuse.com/#feat=font-unicode-range) . Para compatibilidade com navegadores mais antigos, você pode precisar voltar para "subconjunto manual". Nesse caso, você deve voltar a fornecer um único recurso de fonte que contenha todos os subconjuntos necessários e ocultar o restante do navegador. Por exemplo, se a página estiver usando apenas caracteres latinos, você pode remover outros glifos e servir esse subconjunto específico como um recurso autônomo.
+
+1. **Determine quais subconjuntos são necessários:**
+    - Se o navegador suportar subconjunto de intervalo de Unicode, ele selecionará automaticamente o subconjunto correto. A página só precisa fornecer os arquivos de subconjunto e especificar os intervalos de unicode apropriados nas regras `@font-face`
+    - Se o navegador não suportar subconjuntos de intervalo de Unicode, a página precisará ocultar todos os subconjuntos desnecessários; ou seja, o desenvolvedor deve especificar os subconjuntos necessários.
+2. **Gerar subconjuntos de fontes:**
+    - Use a [ferramenta pyftsubset de](https://github.com/behdad/fonttools/) código aberto para criar um subconjunto e otimizar suas fontes.
+    - Alguns serviços de fonte permitem subconjunto manual por meio de parâmetros de consulta personalizados, que você pode usar para especificar manualmente o subconjunto necessário para sua página. Consulte a documentação do seu provedor de fontes.
+
+### Seleção e síntese de fontes
+
+Cada família de fontes é composta de múltiplas variantes estilísticas (regular, negrito, itálico) e vários pesos para cada estilo, cada um dos quais, por sua vez, pode conter formas de glifo muito diferentes - por exemplo, espaçamento, tamanho ou uma forma completamente diferente.
+
+{% Img src="image/admin/FNtAc2xRmx2MuUt2MADj.png", alt="Pesos da Fonte", width="697", height="127" %}
+
+Por exemplo, o diagrama acima ilustra uma família de fontes que oferece três pesos de negrito diferentes: 400 (normal), 700 (negrito) e 900 (negrito extra). Todas as outras variantes intermediárias (indicadas em cinza) são mapeadas automaticamente para a variante mais próxima pelo navegador.
+
+<blockquote>
+  <p>Quando um peso é especificado para o qual não existe face, uma face com um peso próximo é usado. Em geral, os pesos em negrito são mapeados para faces com pesos mais pesados e os pesos leves são mapeados para faces com pesos mais leves.</p>
+<cite><p data-md-type="paragraph"><a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm">Algoritmo de correspondência de fonte CSS</a></p></cite>
+</blockquote>
+
+Lógica semelhante se aplica a variantes em *itálico.* O designer de fonte controla quais variantes eles produzirão e você controla quais variantes usará na página. Como cada variante é um download separado, é uma boa ideia manter o número de variantes pequeno. Por exemplo, você pode definir duas variantes em negrito para a família *Awesome Font:*
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Glifos latinos */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l-700.woff2') format('woff2'),
+        url('/fonts/awesome-l-700.woff') format('woff'),
+        url('/fonts/awesome-l-700.ttf') format('truetype'),
+        url('/fonts/awesome-l-700.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Glifos latinos */
+}
+```
+
+O exemplo acima declara a *família Awesome Font* que é composta por dois recursos que cobrem o mesmo conjunto de glifos latinos ( `U+000-5FF` ), mas oferecem dois "pesos" diferentes: normal (400) e negrito (700). No entanto, o que acontece se uma de suas regras CSS especificar uma espessura de fonte diferente ou definir a propriedade de estilo de fonte como itálico?
+
+- Se uma correspondência de fonte exata não estiver disponível, o navegador substitui a correspondência mais próxima.
+- Se nenhuma correspondência estilística for encontrada (por exemplo, nenhuma variante em itálico foi declarada no exemplo acima), o navegador sintetiza sua própria variante de fonte.
+
+{% Img src="image/admin/a8Jo2cIO1tPsj71AzftS.png", alt="Síntese de fontes", width="800", height="356" %}
+
+{% Aside 'warning' %} Esteja ciente de que as abordagens sintetizadas podem não ser adequadas para scripts como o cirílico, onde as formas em itálico são muito diferentes. Para fidelidade adequada nesses scripts, use uma fonte real em itálico. {% endAside %}
+
+O exemplo acima ilustra a diferença entre os resultados de fontes reais e sintetizadas para Open Sans. Todas as variantes sintetizadas são geradas a partir de uma única fonte de peso 400. Como você pode ver, há uma diferença notável nos resultados. Os detalhes de como gerar as variantes em negrito e oblíquas não são especificados. Portanto, os resultados variam de navegador para navegador e são altamente dependentes da fonte.
+
+{% Aside %} Para obter melhor consistência e resultados visuais, não confie na síntese de fontes. Em vez disso, minimize o número de variantes de fonte usadas e especifique seus locais, de forma que o navegador possa baixá-las quando forem usadas na página. Ou opte por usar uma fonte variável. Dito isso, em alguns casos, uma variante sintetizada [pode ser uma opção viável](https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/), mas seja cauteloso ao usar variantes sintetizadas. {% endAside %}
+
+## Lista de verificação de otimização de tamanho WebFont
+
+- **Audite e monitore o uso de fontes:** não use muitas fontes em suas páginas e, para cada fonte, minimize o número de variantes usadas. Isso ajuda a produzir uma experiência mais consistente e rápida para seus usuários.
+- **Subconjunto de seus recursos de fonte:** muitas fontes podem ser subdivididas em vários intervalos de Unicode para fornecer apenas os glifos que uma página específica requer. Isso reduz o tamanho do arquivo e melhora a velocidade de download do recurso. No entanto, ao definir os subconjuntos, tome cuidado para otimizar a reutilização de fontes. Por exemplo, não baixe um conjunto diferente, mas sobreposto de caracteres em cada página. Uma boa prática é criar subconjuntos com base no script: por exemplo, latim e cirílico.
+- **Forneça formatos de fonte otimizados para cada navegador:** forneça cada fonte nos formatos WOFF 2.0, WOFF, EOT e TTF. Certifique-se de aplicar a compactação GZIP aos formatos EOT e TTF, porque eles não são compactados por padrão.
+- **Dê preferência a `local()` em sua lista `src`** : listar `local('Font Name')` primeiro em sua `src` garante que solicitações HTTP não sejam feitas para fontes já instaladas.
+- **Use o [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)** para testar a [compactação de texto](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/) .
diff --git a/src/site/content/pt/fast/remove-unused-code/index.md b/src/site/content/pt/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..dcae39e9537
--- /dev/null
+++ b/src/site/content/pt/fast/remove-unused-code/index.md
@@ -0,0 +1,75 @@
+---
+layout: post
+title: Remova o código não utilizado
+subhead: |2
+
+  O npm facilita a adição de código ao seu projeto. Mas você está realmente usando todos
+
+  esses bytes extras?
+authors:
+  - houssein
+date: 2018-11-05
+description: Registros como o npm transformaram o mundo JavaScript para melhor ao permitir que qualquer pessoa baixe e use facilmente mais de meio milhão de pacotes públicos. Mas muitas vezes incluímos bibliotecas que não estamos utilizando por completo. Para solucionar esse problema, analise seu pacote para detectar códigos não utilizados.
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+Registros como o [npm](https://docs.npmjs.com/getting-started/what-is-npm) transformaram o mundo do JavaScript para melhor, permitindo que qualquer pessoa baixe e use facilmente mais de *meio milhão* de pacotes públicos. Mas muitas vezes incluímos bibliotecas que não estamos utilizando totalmente. Para corrigir esse problema, **analise seu pacote** para detectar código não utilizado. Em seguida, remova as bibliotecas **não utilizadas** e **desnecessárias.**
+
+## Analise seu pacote
+
+DevTools torna mais fácil ver o tamanho de todas as solicitações de rede: {% Instruction 'devtools-network', 'ol' %} {% Instruction 'disable-cache', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="Painel de rede com solicitação de pacote", width="800", height="169" %}
+
+A guia [Cobertura](https://developer.chrome.com/docs/devtools/coverage/) em DevTools também informará quanto código CSS e JS em seu aplicativo não está sendo usado.
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="Abrangência de códigos no DevTools", width="800", height="562"%}
+
+Ao especificar uma configuração completa do Lighthouse por meio de seu Node CLI, uma auditoria de "JavaScript não usado" também pode ser usada para rastrear quanto código não usado está sendo enviado com seu aplicativo.
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Auditoria do Lighthouse de JS não usado", width="800", height="347" %}
+
+Se você estiver usando o [webpack](https://webpack.js.org/) como seu empacotador, o [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) ajudará a investigar o que constitui o bundle. Inclua o plug-in em seu arquivo de configurações do webpack como qualquer outro plug-in:
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+Embora o webpack seja geralmente usado para construir aplicativos de página única, outros empacotadores, como [Parcel](https://parceljs.org/) e [Rollup](https://rollupjs.org/guide/en), também têm ferramentas de visualização que você pode usar para analisar seu pacote.
+
+Recarregar o aplicativo com este plugin incluído mostra um mapa de árvore com zoom de todo o seu pacote.
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468"%}
+
+Usar esta visualização permite que você inspecione quais partes de seu pacote são maiores do que outras, bem como ter uma ideia melhor de todas as bibliotecas que você está importando. Isso pode ajudar a identificar se você está usando alguma biblioteca não utilizada ou desnecessária.
+
+## Remover bibliotecas não utilizadas
+
+Na imagem anterior do mapa de árvore, existem alguns pacotes dentro de um único domínio `@firebase`. Se seu site precisa apenas do componente de banco de dados firebase, atualize as importações para buscar essa biblioteca:
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+É importante enfatizar que este processo é significativamente mais complexo para aplicações maiores.
+
+Para o pacote de aparência misteriosa que você tem certeza de que não está sendo usado em lugar nenhum, dê um passo para trás e veja em quais de suas dependências de nível superior está sendo usado. Tente encontrar uma maneira de importar apenas os componentes de que você precisa. Se você não estiver usando uma biblioteca, remova-a. Se a biblioteca não for necessária para o carregamento da página inicial, considere se ela pode ser [carregada lentamente](/reduce-javascript-payloads-with-code-splitting).
+
+Caso você esteja usando o webpack, verifique [a lista de plug-ins que removem automaticamente o código não utilizado das bibliotecas mais usadas](https://github.com/GoogleChromeLabs/webpack-libs-optimizations).
+
+{% Aside 'codelab' %} [Remova o código não utilizado.](/codelab-remove-unused-code) {% endAside %}
+
+## Remover bibliotecas desnecessárias
+
+Nem todas as bibliotecas podem ser facilmente divididas em partes e importadas seletivamente. Nesses cenários, verifique se biblioteca pode ser removida completamente. Construir uma solução personalizada ou aproveitar uma alternativa mais leve devem sempre ser opções que valem a pena considerar. No entanto, é importante pesar na complexidade e o esforço necessários para qualquer um desses esforços antes de remover uma biblioteca inteiramente de um aplicativo.
diff --git a/src/site/content/pt/fast/replace-gifs-with-videos/index.md b/src/site/content/pt/fast/replace-gifs-with-videos/index.md
new file mode 100644
index 00000000000..48d325e436e
--- /dev/null
+++ b/src/site/content/pt/fast/replace-gifs-with-videos/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: Substitua GIFs animados por vídeos para carregar as páginas mais rapidamente
+authors:
+  - houssein
+description: Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat, fez a inspeção nas ferramentas de desenvolvedor e descobriu que, na verdade, era um vídeo? Há um bom motivo para isso. Os GIFs animados podem ser enormes! Ao converter GIFs grandes em vídeos, é possível economizar muito na largura de banda dos usuários.
+date: 2018-11-05
+updated: 2019-08-29
+codelabs:
+  - codelab-replace-gifs-with-video
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat, fez a inspeção nas ferramentas de desenvolvedor e descobriu que, na verdade, era um vídeo? Há um bom motivo para isso. Os GIFs animados podem ser *enormes*.
+
+{% Img src="image/admin/3UZ0b9dDotVIXWQT5Auk.png", alt="Painel de rede do DevTools mostrando um GIF de 13,7 MB.", width="800", height="155" %}
+
+Felizmente, fazendo muito pouco você pode melhorar muito o desempenho do carregamento. **Ao converter GIFs grandes em vídeos, é possível economizar muito na largura de banda dos usuários**.
+
+## Meça primeiro
+
+Use o Lighthouse para verificar se há GIFs no seu site que podem ser convertidos em vídeos. No DevTools, clique na guia "Audits" (Auditorias) e marque a caixa de seleção "Performance" (Desempenho). Em seguida, execute o Lighthouse e verifique o relatório. Se tiver GIFs que possam ser convertidos, você verá uma sugestão para "Usar formatos de vídeo para conteúdo animado":
+
+{% Img src="image/admin/KOSr9IivnkyaFk6RJ5u1.png", alt="Uma auditoria do Lighthouse reprovada, use formatos de vídeo para conteúdo animado.", width="800", height="173" %}
+
+## Crie vídeos MPEG
+
+Há várias maneiras de converter GIFs em vídeos. Neste guia, é usada a ferramenta **[FFmpeg](https://www.ffmpeg.org/)**. Para usar o FFmpeg para converter o GIF `my-animation.gif` em um vídeo MP4, execute o seguinte comando no seu console:
+
+```bash
+ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+Isso informa ao FFmpeg para considerar `my-animation.gif` como a **entrada**, representada pela sinalização `-i`, e fazer a conversão para um vídeo chamado `my-animation.mp4`.
+
+O codificador libx264 funciona apenas com arquivos de dimensões pares, como 320 px por 240 px. Se o GIF de entrada tiver dimensões ímpares, é possível incluir um filtro de corte para evitar que o FFmpeg lance um erro de 'altura/largura não divisível por 2':
+
+```bash
+ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
+```
+
+## Crie vídeos WebM
+
+Enquanto o MP4 existe desde 1999, o WebM é um formato de arquivo relativamente novo, lançado em 2010. Os vídeos WebM são muito menores do que os vídeos MP4, mas nem todos os navegadores são compatíveis com o WebM, portanto, faz sentido gerar os dois.
+
+Para usar o FFmpeg para converter `my-animation.gif` em um vídeo WebM, execute o seguinte comando no seu console:
+
+```bash
+ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
+```
+
+## Compare a diferença
+
+A economia de custos entre um GIF e um vídeo pode ser bastante significativa.
+
+{% Img src="image/admin/LWzvOWaOdMnNLTPWjayt.png", alt="Comparação de tamanho dos arquivos mostrando 3,7 MB para o GIF, 551 KB para o MP4 e 341 KB para o WebM.", width="800", height="188" %}
+
+Nesse exemplo, o GIF inicial tem 3,7 MB, em comparação com a versão MP4, que tem 551 KB, e a versão WebM, que tem apenas 341 KB!
+
+## Substitua a imagem do GIF por um vídeo
+
+Os GIFs animados têm três características principais que precisam ser replicadas no vídeo:
+
+- Eles são reproduzidos automaticamente.
+- Eles repetem em loop (geralmente, mas é possível evitar o loop).
+- Eles não têm áudio.
+
+Felizmente, é possível recriar esses comportamentos usando o elemento `<video>`.
+
+```bash
+<video autoplay loop muted playsinline></video>
+```
+
+Um elemento `<video>` com esses atributos é reproduzido automaticamente, fica em loop infinito, não têm áudio e é exibido inline (e não em tela cheia): todos os comportamentos característicos esperados dos GIFs animados! 🎉
+
+Por fim, o elemento `<video>` requer um ou mais elementos filhos `<source>` apontando para diferentes arquivos de vídeo que podem ser escolhidos pelo navegador, dependendo da compatibilidade com os formatos. Forneça ambos os vídeos WebM e MP4, de modo que, se um navegador não for compatível com WebM, ele pode usar o MP4.
+
+```html
+<video autoplay loop muted playsinline>
+  <source src="my-animation.webm" type="video/webm">
+  <source src="my-animation.mp4" type="video/mp4">
+</video>
+```
+
+{% Aside 'codelab' %} [Substitua um GIF animado por um vídeo](/codelab-replace-gifs-with-video). {% endAside %}
+
+{% Aside %} Os navegadores não conseguem definir qual `<source>` é ideal, então a ordem das tags `<source>` é importante. Por exemplo, se você especificar um vídeo MP4 primeiro e o navegador for compatível com WebM, ele ignorará o `<source>` do WebM e usará o MPEG-4 em vez disso. Se você preferir que o `<source>` do WebM seja usado primeiro, especifique-o primeiro! {% endAside %}
diff --git a/src/site/content/pt/fast/serve-images-webp/index.md b/src/site/content/pt/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..b0a19532f3c
--- /dev/null
+++ b/src/site/content/pt/fast/serve-images-webp/index.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: Use imagens WebP
+authors:
+  - katiehempenius
+description: |-
+  As imagens WebP são menores do que seus similares JPEG e PNG, geralmente na
+  magnitude de uma redução de 25–35% no tamanho do arquivo. Isso diminui o tamanho da página e melhora o desempenho.
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - codelab-serve-images-webp
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## Por que você deveria se importar?
+
+As imagens WebP são menores do que suas similares JPEG e PNG, geralmente na magnitude de uma redução de 25 a 35% no tamanho do arquivo. Isso diminui o tamanho da página e melhora o desempenho.
+
+- O YouTube descobriu que mudar para miniaturas WebP resultou em [carregamentos de página 10% mais rápidos](https://www.youtube.com/watch?v=rqXMwLbYEE4).
+- O Facebook [experimentou](https://code.fb.com/android/improving-facebook-on-android/) economias de tamanho do arquivo de 25 a 35% para JPEGs e 80% de economia de tamanho de arquivos PNGs quando passou a usar WebP.
+
+WebP é um excelente substituto para imagens JPEG, PNG e GIF. Além disso, o WebP oferece compactação com e sem perdas. Na compactação sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas possivelmente reduz a qualidade da imagem.
+
+## Converta imagens para WebP
+
+As pessoas geralmente usam uma das seguintes abordagens para converter suas imagens em WebP: a [ferramenta de linha de comando cwebp](https://developers.google.com/speed/webp/docs/using) ou o [plugin Imagemin WebP](https://github.com/imagemin/imagemin-webp) (pacote npm). O plugin Imagemin WebP é geralmente a melhor escolha se seu projeto usa scripts de construção ou ferramentas de construção (por exemplo, Webpack ou Gulp), enquanto o CLI é uma boa escolha para projetos simples ou se você só precisa converter imagens uma vez.
+
+Ao converter imagens para WebP, você tem a opção de definir uma ampla variedade de configurações de compactação. No entanto, para a maioria das pessoas, a única coisa com a qual você precisa se preocupar é a configuração de qualidade. Você pode especificar um nível de qualidade de 0 (pior) a 100 (melhor). Vale a pena tentar descobrir qual nível é a compensação certa entre a qualidade da imagem e o tamanho do arquivo para suas necessidades.
+
+### Use o cwebp
+
+Converta um único arquivo, usando as configurações de compactação padrão do cwebp:
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+Converta um único arquivo, usando um nível de qualidade de `50` :
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+Converta todos os arquivos em um diretório:
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### Use o Imagemin
+
+O plugin Imagemin WebP pode ser usado sozinho ou com sua ferramenta de construção favorita (Webpack/Gulp/Grunt/etc.). Ele geralmente envolve adicionar cerca de 10 linhas de código a um script de construção ou ao arquivo de configuração para sua ferramenta de construção. Aqui estão alguns exemplos de como fazer isso para [Webpack](https://glitch.com/~webp-webpack), [Gulp](https://glitch.com/~webp-gulp) e [Grunt](https://glitch.com/~webp-grunt).
+
+Se você não estiver usando uma dessas ferramentas de construção, pode usar a própria Imagemin como um script do Node. Este script irá converter os arquivos no `images` e salvá-los no diretório `compressed_images`
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## Forneça imagens WebP
+
+Se o seu site oferece suporte apenas a [navegadores](https://caniuse.com/#search=webp) compatíveis com WebP, você pode parar de ler. Caso contrário, forneça WebP para navegadores mais recentes e uma imagem substituta para navegadores mais antigos:
+
+**Antes:**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**Depois:**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+As etiquetas [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) , [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) e `<img>`, incluindo como são ordenadas em relação umas às outras, interagem para atingir este resultado final.
+
+### picture
+
+A `<picture>` fornece um wrapper para zero ou mais `<source>` tag e uma tag `<img>`
+
+### source
+
+Uma etiqueta `<source>` especifica um recurso de mídia.
+
+O navegador usa a primeira fonte listada em um formato compatível. Se o navegador não suportar nenhum dos formatos listados nas tags `<source>`, ele voltará a carregar a imagem especificada pela tag `<img>`
+
+{% Aside 'gotchas' %}
+
+- Uma tag `<source>` para o formato de imagem "preferencial" (neste caso, WebP) deve ser listada primeiro, antes de outras tags `<source>`
+
+- O valor do atributo `type` deve ser o tipo MIME correspondente ao formato da imagem. [O tipo MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) de uma imagem e sua extensão de arquivo costumam ser semelhantes, mas não são necessariamente a mesma coisa (por exemplo, `.jpg` x `image/jpeg` ).
+
+{% endAside %}
+
+### img
+
+A tag `<img>` é o que faz este código funcionar em navegadores que não suportam a tag `<picture>`. Se um navegador não suportar a tag `<picture>`, ele irá ignorar as tags que não suporta. Portanto, ele apenas "vê" a tag `<img src="flower.jpg" alt="">` e carrega essa imagem.
+
+{% Aside 'gotchas' %}
+
+- A `<img>` sempre deve ser incluída e sempre deve ser listada por último, depois de todas as tags `<source>`
+- O recurso especificado pela `<img>` deve estar em um formato com suporte universal (por exemplo, JPEG), para que possa ser usado como fallback. {% endAside %}
+
+## Verifique o uso do WebP
+
+O Lighthouse pode ser usado para verificar se todas as imagens em seu site estão sendo fornecidas através de WebP. Execute a Auditoria de Desempenho do Farol ( **Lighthouse &gt; Opções &gt; Desempenho** ) e procure os resultados das imagens da auditoria **Servir imagens em formatos de próxima geração.** O Lighthouse listará todas as imagens que não estão sendo servidas em WebP.
diff --git a/src/site/content/pt/fast/serve-images-with-correct-dimensions/index.md b/src/site/content/pt/fast/serve-images-with-correct-dimensions/index.md
new file mode 100644
index 00000000000..4ce9653b2c2
--- /dev/null
+++ b/src/site/content/pt/fast/serve-images-with-correct-dimensions/index.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: Veicule imagens com dimensões corretas
+authors:
+  - katiehempenius
+description: |2
+
+  Todos nós já passamos por isso   - você se esqueceu de diminuir a escala de uma imagem antes de adicioná-la ao
+
+  página. A imagem parece boa, mas está desperdiçando dados dos usuários e prejudicando a página
+
+  atuação.
+date: 2018-11-05
+wf_blink_components: N / D
+codelabs:
+  - codelab-serve-images-correct-dimensions
+tags:
+  - performance
+---
+
+Todos nós já passamos por isso: você se esqueceu de diminuir a escala de uma imagem antes de adicioná-la à página. A imagem parece boa, mas está desperdiçando dados dos usuários e prejudicando o desempenho da página.
+
+## Identifique imagens de tamanho incorreto
+
+O Lighthouse facilita a identificação de imagens de tamanhos incorretos. Execute a Auditoria de Desempenho (**Lighthouse &gt; Opções &gt; Desempenho**) e procure os resultados da auditoria de **imagens de tamanho adequado.** A auditoria lista todas as imagens que precisam ser redimensionadas.
+
+## Determine o tamanho correto da imagem
+
+O dimensionamento da imagem pode ser extremamente complicado. Por esse motivo, fornecemos duas abordagens: a "boa" e a "melhor". Ambas vão melhorar o desempenho, mas a abordagem "melhor" pode demorar um pouco mais para ser entendida e implementada. No entanto, também o recompensará com melhorias de desempenho maiores. A melhor escolha para você é aquela que você se sente confortável em implementar.
+
+### Uma nota rápida sobre unidades CSS
+
+Existem dois tipos de unidades CSS para especificar o tamanho dos elementos HTML, incluindo imagens:
+
+- Unidades absolutas: os elementos estilizados com unidades absolutas sempre serão exibidos no mesmo tamanho, independentemente do dispositivo. Exemplos de unidades CSS absolutas e válidas: px, cm, mm, pol.
+- Unidades relativas: os elementos estilizados com unidades relativas serão exibidos em tamanhos variados, dependendo do comprimento relativo especificado. Exemplos de unidades CSS relativas válidas: %, vw (1vw = 1% da largura da janela de visualização), em (1,5 em = 1,5 vezes o tamanho da fonte).
+
+### A abordagem "boa"
+
+Para imagens com dimensionamento baseado em …
+
+- **Unidades relativas**: redimensione a imagem para um tamanho que funcione em todos os dispositivos.
+
+Pode ser útil verificar seus dados analíticos (por exemplo, Google Analytics) para ver quais tamanhos de tela são comumente usados por seus usuários. Como alternativa, [screensiz.es](http://screensiz.es/) fornece informações sobre as telas de muitos dispositivos comuns.
+
+- **Unidades absolutas**: redimensione a imagem para corresponder ao tamanho em que ela é exibida.
+
+O painel DevTools Elements pode ser usado para determinar o tamanho de exibição de uma imagem.
+
+{% Img src="image/admin/pKQa0Huu0KGInOekdz6M.png", alt="Painel do elemento DevTools", width="800", height="364" %}
+
+### A abordagem "melhor"
+
+Para imagens com dimensionamento baseado em…
+
+- **Unidades absolutas:** use os atributos [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset) e [sizes](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes) para servir diferentes imagens para diferentes densidades de exibição. (Leia o guia sobre imagens responsivas [aqui](/serve-responsive-images).)
+
+"Densidade de exibição" refere-se ao fato de que diferentes exibições têm diferentes densidades de pixels. Todas as outras coisas sendo iguais, uma tela de alta densidade de pixels parecerá mais nítida do que uma tela de baixa densidade de pixels.
+
+Como resultado, várias versões de imagem são necessárias se você deseja que os usuários experimentem as imagens mais nítidas possíveis, independentemente da densidade de pixels do dispositivo.
+
+{% Aside %} Alguns sites acham que essa diferença na qualidade da imagem é importante, outros acham que não. {% endAside %}
+
+Técnicas de imagem responsiva tornam isso possível, permitindo que você liste várias versões de imagem e para o dispositivo escolher a imagem que funciona melhor para ele.
+
+- **Unidades relativas:** use imagens responsivas para exibir imagens diferentes em tamanhos de exibição. (Leia o guia [aqui](/serve-responsive-images).)
+
+Uma imagem que funciona em todos os dispositivos será desnecessariamente grande para dispositivos menores. Técnicas de imagem responsiva, especificamente [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-srcset%22) e [sizes](https://developer.mozilla.org/docs/Web/HTML/Element/source#attr-sizes), permitem que você especifique várias versões de imagem e que o dispositivo escolha o tamanho que funciona melhor para ela.
+
+## Redimensionar imagens
+
+Independentemente da abordagem que você escolher, pode ser útil usar o ImageMagick para redimensionar suas imagens. [ImageMagick](https://www.imagemagick.org/script/index.php) é a ferramenta de linha de comando mais popular para criar e editar imagens. A maioria das pessoas pode redimensionar imagens muito mais rapidamente ao usar a CLI do que um editor de imagens baseado em GUI.
+
+Redimensione a imagem para 25% do tamanho do original:
+
+```bash
+convert flower.jpg -resize 25% flower_small.jpg
+```
+
+Dimensione a imagem para caber em "200 px de largura por 100 px de altura":
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 200x100 flower_small.jpg
+
+# Windows
+magick convert flower.jpg -resize 200x100 flower_small.jpg
+```
+
+Se for redimensionar muitas imagens, talvez seja mais conveniente usar um script ou serviço para automatizar o processo. Você pode aprender mais sobre isso no guia de Imagens responsivas.
+
+## Verificar
+
+Depois de redimensionar todas as suas imagens, execute novamente o Lighthouse para verificar se você não perdeu nada.
diff --git a/src/site/content/pt/fast/serve-responsive-images/index.md b/src/site/content/pt/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..128a5f2f6b2
--- /dev/null
+++ b/src/site/content/pt/fast/serve-responsive-images/index.md
@@ -0,0 +1,141 @@
+---
+layout: post
+title: Exiba imagens responsivas
+authors:
+  - katiehempenius
+description: Exibir em dispositivos móveis imagens com tamanho para desktop pode usar de 2 a 4x mais dados do que o necessário. Em vez de usar uma abordagem generalizada para as imagens, exiba tamanhos de imagem para dispositivos diferentes.
+date: 2018-11-05
+updated: 2021-06-05
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+Exibir em dispositivos móveis imagens com tamanho para desktop pode usar de 2 a 4x mais dados do que o necessário. Em vez de uma abordagem generalizada para imagens, exiba tamanhos de imagem diferentes para dispositivos diferentes.
+
+## Redimensione imagens
+
+Duas das ferramentas mais populares de redimensionamento de imagens são o [pacote npm sharp](https://www.npmjs.com/package/sharp) e a [ferramenta ImageMagick CLI](https://www.imagemagick.org/script/index.php) .
+
+O pacote sharp é uma boa escolha para automatizar o redimensionamento de imagens (por exemplo, gerando vários tamanhos de miniaturas para todos os vídeos em seu site). Ele é rápido e facilmente integrado com ferramentas e build scripts. Por outro lado, o ImageMagick é conveniente para o redimensionamento de imagem único pois é usado totalmente através de linha de comando.
+
+### sharp
+
+Para usar o sharp como um script Node, salve este código como um script separado em seu projeto e execute-o para converter suas imagens:
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+Para redimensionar uma imagem para 33% de seu tamanho original, execute o seguinte comando em seu terminal:
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+Para redimensionar uma imagem para caber em 300px de largura por 200px de altura, execute o seguinte comando:
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### Quantas versões de imagem você deve criar?
+
+Não há uma única resposta "certa" para essa pergunta. No entanto, é comum exibir de 3 a 5 tamanhos diferentes de uma imagem. Exibir mais tamanhos de imagem é melhor para o desempenho, mas ocupará mais espaço em seus servidores e exigirá a escrita de um pouco mais de HTML.
+
+### Outras opções
+
+Serviços de imagem como [Thumbor](https://github.com/thumbor/thumbor) (open-source) e [Cloudinary](https://cloudinary.com/) também valem a pena conferir. Os serviços de imagem fornecem imagens responsivas (e manipulação de imagens) sob demanda. O Thumbor é configurado instalando-o em um servidor; o Cloudinary cuida desses detalhes para você e não requer configuração de servidor. as duas alternativas são maneiras fáceis de criar imagens responsivas.
+
+## Exibir várias versões de imagem
+
+Especifique várias versões da imagem e o navegador escolherá a melhor para usar:
+
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Antes</strong></th>
+        <th><strong>Depois</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+O `<img>` tag de [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src) , [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) e [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) todos os atributos interagem para atingir este resultado final.
+
+### O atributo "src"
+
+O atributo src faz esse código funcionar para navegadores que não [oferecem suporte](https://caniuse.com/#search=srcset) aos atributos `srcset` e `sizes` Se um navegador não suportar esses atributos, ele voltará a carregar o recurso especificado pelo atributo `src`
+
+{% Aside 'gotchas' %} O recurso especificado por `src` deve ser grande o suficiente para funcionar bem em todos os tamanhos de dispositivo. {% endAside %}
+
+### O atributo "srcset"
+
+O `srcset` é uma lista separada por vírgulas de nomes de arquivos de imagem e seus descritores de largura ou densidade.
+
+Este exemplo usa [descritores de largura](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor) . `480w` é um descritor de largura que informa ao navegador que `flower-small.jpg` tem 480px de largura; `1080w` é um descritor de largura que informa ao navegador que `flower-large.jpg` tem 1080px de largura.
+
+"Descritor de largura" parece sofisticado, mas é apenas uma maneira de informar ao navegador a largura de uma imagem. Isso evita que o navegador precise fazer o download da imagem para determinar seu tamanho.
+
+{% Aside 'gotchas' %} Use a `w` (em vez de `px` ) para escrever descritores de largura. Por exemplo, uma imagem de 1024 px de largura seria escrita como `1024w` . {% endAside %}
+
+**Crédito extra:** você não precisa saber sobre descritores de densidade para exibir diferentes tamanhos de imagem. No entanto, se você estiver curioso sobre como funcionam os descritores de densidade, confira o [laboratório de código de Alternância de Resolução](/codelab-density-descriptors). Descritores de densidade são usados para exibir imagens diferentes com base na [densidade de pixels](https://en.wikipedia.org/wiki/Pixel_density) do dispositivo.
+
+### O atributo "sizes"
+
+O atributo sizes - tamanhos - informa ao navegador a largura da imagem quando ela é exibida. No entanto, o atributo de tamanhos não tem efeito no tamanho da tela; você ainda precisa de CSS para fazer isso.
+
+O navegador usa essas informações, junto com o que sabe sobre o dispositivo do usuário (ou seja, suas dimensões e densidade de pixels), para determinar qual imagem carregar.
+
+Se um navegador não reconhecer o "`sizes`", ele voltará a carregar a imagem especificada pelo atributo "`src`". (Os navegadores proveram suporte para os atributos "`sizes`" e "`srcset`" simultaneamente, então um navegador suportará ambos os atributos ou nenhum.)
+
+{% Aside 'gotchas' %} A largura do slot pode ser especificada usando uma variedade de unidades. A seguir estão todos os tamanhos válidos:
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+O seguinte não é um tamanho válido:
+
+- `25%` (as porcentagens não podem ser usadas com o atributo de tamanhos) {% endAside %}
+
+**Crédito extra:** se você quiser sofisticar, também pode usar o atributo tamanhos para especificar vários tamanhos de slot. Ele atende a sites que usam layouts diferentes para tamanhos de janela de visualização diferentes. Confira este [exemplo de código de vários slots](/codelab-specifying-multiple-slot-widths) para aprender como fazer isso.
+
+### (Ainda mais) Crédito Extra
+
+Além de todos os créditos extras já listados (as imagens são complexas!), Você também pode usar esses mesmos conceitos para [direção de arte](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). A direção de arte é a prática de exibir imagens de aparência completamente diferente (em vez de versões diferentes da mesma imagem) para janelas de exibição diferentes. Você pode aprender mais no [laboratório de código de Direção de Arte](/codelab-art-direction) .
+
+## Verificar
+
+Depois de implementar as imagens responsivas, você pode usar o Lighthouse para se certificar de que não tenha perdido nenhuma imagem. Execute a Auditoria de desempenho do Lighthouse (**Lighthouse > Opções > Desempenho** ) e procure os resultados da auditoria de **imagens do tamanho adequado.** Esses resultados listarão as imagens que precisam ser redimensionadas.
diff --git a/src/site/content/pt/fast/signed-exchanges/index.md b/src/site/content/pt/fast/signed-exchanges/index.md
new file mode 100644
index 00000000000..adbff96fba4
--- /dev/null
+++ b/src/site/content/pt/fast/signed-exchanges/index.md
@@ -0,0 +1,267 @@
+---
+layout: post
+title: Trocas assinadas (SXGs)
+subhead: |2-
+
+  Uma SXG é um mecanismo de entrega que torna possível autenticar o
+
+  origem de um recurso, independentemente de como ele foi entregue.
+authors:
+  - katiehempenius
+date: 2020-10-14
+updated: 2021-04-21
+hero: image/admin/6ll3P8MYWxvtb1ZjXIzb.jpg
+alt: Uma pilha de envelopes.
+description: |2-
+
+  Uma SXG é um mecanismo de entrega que torna possível autenticar o
+
+  origem de um recurso, independentemente de como ele foi entregue.
+tags:
+  - blog
+  - performance
+---
+
+Uma troca assinada (SXG) é um mecanismo de entrega que permite autenticar a origem de um recurso independentemente de como foi entregue. Essa dissociação avança uma variedade de casos de uso, como pré-busca para preservação de privacidade, experiências de internet offline e serviço de caches de terceiros. Além disso, a implementação de SXGs pode melhorar o Largest Contentful Paint (LCP) para alguns sites.
+
+Este artigo fornece uma visão geral abrangente das SXGs: como funcionam, casos de uso e ferramentas.
+
+## Compatibilidade do navegador {: #browser-compatibility }
+
+SXGs são [suportados](https://caniuse.com/#feat=sxg) por navegadores baseados em Chromium (começando com as versões: Chrome 73, Edge 79 e Opera 64).
+
+## Visão geral
+
+As trocas assinadas (SXGs) permitem que um site assine com criptografia um par de solicitação/resposta (uma "troca HTTP") de forma que possibilite ao navegador verificar a origem e integridade do conteúdo, independentemente de como o conteúdo foi distribuído. Como resultado, o navegador pode exibir o URL do site de origem na barra de endereço, em vez do URL do servidor que entregou o conteúdo.
+
+A implicação mais ampla das SXGs é que elas tornam o conteúdo portátil: o conteúdo entregue por meio de uma SXG pode ser facilmente distribuído por terceiros, mantendo total garantia e atribuição de sua origem. Historicamente, a única maneira de um site usar terceiros para distribuir seu conteúdo, mantendo a atribuição, é o site compartilhar seus certificados SSL com o distribuidor. Isso tem desvantagens de segurança; além disso, está muito longe de tornar o conteúdo verdadeiramente portátil.
+
+No longo prazo, o conteúdo verdadeiramente portátil pode ser utilizado para alcançar casos de uso como experiências totalmente offline. No prazo imediato, o principal caso de uso de SXGs é a entrega de experiências de usuário mais rápidas, fornecendo conteúdo em um formato facilmente armazenável em cache. Especificamente, a [Pesquisa Google](#google-search) armazenará em cache e, às vezes, pré-buscará SXGs. Para sites que recebem uma grande parte do tráfego da Pesquisa Google, as SXGs podem ser uma ferramenta importante para fornecer carregamentos de página mais rápidos aos usuários.
+
+### O formato SXG
+
+Uma SXG é encapsulada em um [arquivo codificado](https://cbor.io/) em binário que possui dois componentes principais: uma troca HTTP e uma [assinatura](https://developer.mozilla.org/docs/Glossary/Signature/Security). A troca HTTP consiste em um URL de solicitação, informações de negociação de conteúdo e uma resposta HTTP.
+
+Aqui está um exemplo de arquivo SXG decodificado:
+
+```html
+format version: 1b3
+request:
+  method: GET
+  uri: https://example.org/
+  headers:
+response:
+  status: 200
+  headers:
+    Cache-Control: max-age=604800
+    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
+    Expires: Mon, 24 Aug 2020 16:08:24 GMT
+    Content-Type: text/html; charset=UTF-8
+    Content-Encoding: mi-sha256-03
+    Date: Mon, 17 Aug 2020 16:08:24 GMT
+    Vary: Accept-Encoding
+signature:
+    label;cert-sha256=*ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=*;
+    cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
+    date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=*MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=*;
+    validity-url="https://example.org/webpkg/validity"
+header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=
+
+The exchange has a valid signature.
+payload [1256 bytes]:
+<!doctype html>
+<html>
+<head>
+    <title>SXG example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+<div>
+    <h1>Hello</h1>
+</div>
+</body>
+</html>
+```
+
+O `expires` na assinatura indica a data de expiração de uma SXG. Uma SXG pode ser válida por no máximo 7 dias. Se a data de validade de uma SXG for mais de 7 dias, o navegador irá rejeitá-la. Leia mais informações sobre o cabeçalho da assinatura nas [especificações de Trocas HTTP assinadas](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-3.1).
+
+### Empacotamento da Web
+
+As SXGs fazem parte de uma família mais ampla de propostas de especificações de [empacotamento da Web.](https://github.com/WICG/webpackage) Além das SXGs, o outro componente principal da especificação do empacotamento da Web são os [pacotes da Web](/web-bundles/) ("trocas HTTP agrupadas"). Pacotes da Web são uma coleção de recursos HTTP e os metadados necessários para interpretar o pacote.
+
+A relação entre SXGs e pacotes da Web é um ponto comum de confusão. SXGs e pacotes da Web são duas tecnologias distintas que não dependem uma da outra — pacotes da Web podem ser usados com trocas assinadas e não assinadas. O objetivo comum avançado por SXGs e pacotes da Web é a criação de um formato de "pacote da web" que permite que os sites sejam compartilhados em sua totalidade para consumo off-line.
+
+As SXGs são a primeira parte da especificação do empacotamento da Web que os navegadores baseados em Chromium irão implementar.
+
+## Carregar as SXGs
+
+Inicialmente, o principal caso de uso de SXGs provavelmente será como um mecanismo de entrega para o documento principal de uma página. Para este caso de uso, uma SXG poderia ser referenciada usando as `<link>` ou `<a>`, bem como o [cabeçalho `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link). Como outros recursos, uma SXG pode ser carregada inserindo seu URL na barra de endereços do navegador.
+
+```html
+<a href="https://example.com/article.html.sxg">
+```
+
+```html
+<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
+```
+
+As SXGs também podem ser usadas para fornecer sub-recursos. Para obter mais informações, consulte [Substituição de sub-recursos da troca assinada](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md).
+
+## Servir as SXGs
+
+### Negociação de conteúdo
+
+A [negociação de conteúdo](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) é um mecanismo para servir diferentes representações do mesmo recurso no mesmo URL, dependendo dos recursos e preferências de um cliente - por exemplo, servir a versão gzip de um recurso para alguns clientes, mas a versão Brotli para outros. A negociação de conteúdo torna possível servir representações SXG e não SXG do mesmo conteúdo, dependendo dos recursos do navegador.
+
+Os navegadores da Web usam o cabeçalho da solicitação [`Accept` para comunicar os](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept)[tipos de MIME](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) que eles suportam. Se um navegador oferecer suporte a SXGs, o `application/signed-exchange` tipo MIME será incluído automaticamente nesta lista de valores.
+
+Por exemplo, este é o `Accept` enviado pelo Chrome 84:
+
+```json
+accept:
+text/html,
+application/xhtml+xml,
+application/xml;q=0.9,
+image/webp,image/apng,
+\*/\*;q=0.8,
+application/signed-exchange;v=b3;q=0.9
+```
+
+O `application/signed-exchange;v=b3;q=0.9` parte dessa string informa ao servidor da Web que o Chrome oferece suporte a SXGs - especificamente, a versão `b3`. A última parte `q=0.9` indica o [valor q](https://developer.mozilla.org/docs/Glossary/Quality_values).
+
+O `q-value` expressa a preferência relativa de um navegador por um formato específico usando uma escala decimal de `0` a `1`, com `1` representando a prioridade mais alta. Quando um `q-value` não é fornecido para um formato, `1` é o valor implícito.
+
+### Melhores práticas
+
+Os servidores devem servir SXGs quando o `Accept` indica que o `q-value` para `application/signed-exchange` é maior ou igual ao `q-value` para `text/html`. Na prática, isso significa que um servidor de origem servirá SXGs aos rastreadores, mas não aos navegadores.
+
+As SXGs podem oferecer desempenho superior quando usados com cache ou pré-busca. No entanto, para conteúdo que é carregado diretamente do servidor de origem sem o benefício dessas otimizações, `text/html` oferece melhor desempenho do que SXGs. Servir conteúdo como SXG permite que os rastreadores e outros intermediários armazenem SXGs em cache para entrega mais rápida aos usuários.
+
+A seguinte expressão regular pode ser usada para corresponder ao `Accept` de solicitações que devem ser atendidas como SXG:
+
+```regex
+Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
+```
+
+Observe que a subexpressão `(,|$)` corresponde aos cabeçalhos onde o `q-value` para SXG foi omitido; esta omissão implica um `q-value` de `1` para SXG. Embora um `Accept` possa teoricamente conter a substring `q=1`, [na prática](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) os navegadores não listam explicitamente o `q-value` um formato quando ele tem o valor padrão `1`.
+
+## Depurar SXGs com Chrome DevTools {: #debugging}
+
+As trocas assinadas podem ser identificadas procurando por `signed-exchange` na coluna **Tipo** do painel **Rede** no Chrome DevTools.
+
+<figure>{% Img src="image/admin/cNdohSaeXqGHFBwD7L3B.png", alt="Captura de tela mostrando uma solicitação de SXG dentro do painel 'Rede' em DevTools", width="696", height="201" %} <figcaption>O painel <b>Rede</b> no DevTools</figcaption></figure>
+
+A guia **Visualização** fornece mais informações sobre o conteúdo de uma SXG.
+
+<figure>{% Img src="image/admin/E0rBwuxk4BxFmLJ3gXhP.png", alt="Captura de tela da guia 'Visualização' para uma SXG", width="800", height="561" %} <figcaption>A guia <b>Visualização</b> no DevTools</figcaption></figure>
+
+Para ver uma SXG em primeira mão, visite esta [demonstração](https://signed-exchange-testing.dev/) em [um dos navegadores compatíveis com SXGs](#browser-compatibility)
+
+## Casos de uso
+
+As SXGs podem ser usadas para entregar conteúdo diretamente de um servidor de origem para um usuário - mas isso iria contra a finalidade das SXGs. Em vez disso, o uso pretendido e os benefícios das SXGs são alcançados principalmente quando as SXGs geradas por um servidor de origem são armazenadas em cache e servidas aos usuários por um intermediário.
+
+Embora esta seção discuta principalmente o armazenamento em cache e a exibição de SXGs pela Pesquisa Google, é uma técnica válida para qualquer site que deseja fornecer seus links externos com uma experiência de usuário mais rápida ou maior resiliência ao acesso limitado à rede. Isso não inclui apenas mecanismos de pesquisa e plataformas de mídia social, mas também portais de informações que fornecem conteúdo para consumo off-line.
+
+### Pesquisa do Google
+
+{% Img src = "image/j2RDdG43oidUy6AL6LovThjeX9c2/oMtUUAVj5hAGwBZMDwct.png", alt = "Diagrama mostrando um SXG pré-buscado sendo servido de um cache.", width="800", height="396" %}
+
+A Pesquisa Google usa SXGs para fornecer aos usuários uma experiência de carregamento de página mais rápida para páginas carregadas da página de resultados de pesquisa. Os sites que recebem tráfego significativo da Pesquisa Google podem ter melhorias de desempenho significativas ao fornecer conteúdo como SXG.
+
+A Pesquisa Google agora rastreará, armazenará em cache e pré-buscará SXGs quando aplicável. O Google e outros mecanismos de pesquisa às vezes buscam [previamente](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ) o conteúdo que o usuário provavelmente visitará - por exemplo, a página correspondente ao primeiro resultado da pesquisa. As SXGs são particularmente adequadas para pré-busca por causa de seus benefícios de privacidade em relação aos formatos não SXG.
+
+{% Aside %} Há uma certa quantidade de informações do usuário inerentes a todas as solicitações de rede, independentemente de como ou por que foram feitas: isso inclui informações como endereço IP, a presença ou ausência de cookies e o valor de cabeçalhos como `Accept-Language`. Essas informações são "divulgadas" ao servidor de destino quando uma solicitação é feita. Como as SXGs são pré-buscadas de um cache, em vez do servidor de origem, o interesse de um usuário em um site só será divulgado ao servidor de origem quando o usuário navegar até o site, e não no momento da pré-busca. Além disso, o conteúdo pré-buscado via SXG não define cookies ou acessa `localStorage`, a menos que o conteúdo seja carregado pelo usuário. Além disso, isso não revela nenhuma nova informação do usuário ao referenciador de SXG. O uso de SXGs para pré-busca é um exemplo do conceito de pré-busca para preservação de privacidade. {% endAside %}
+
+#### Rastreamento
+
+O [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) enviado pelo rastreador da Pesquisa Google expressa uma preferência igual por `text/html` e `application/signed-exchange`. Conforme descrito na [seção anterior](#best-practices), os sites que desejam usar SXGs devem servi-los quando o `Accept` de uma solicitação expressa uma preferência igual ou maior por SXGs em vez de `text/html`. Na prática, apenas os rastreadores expressarão preferência por SXGs em vez de `text/html`.
+
+#### Indexação
+
+As representações SXG e não SXG de uma página não são classificadas ou indexadas separadamente pela Pesquisa Google. A SXG é, em última análise, um mecanismo de entrega - ela não altera o conteúdo subjacente. Diante disso, não faria sentido para a Pesquisa Google indexar ou classificar separadamente o mesmo conteúdo fornecido de maneiras diferentes.
+
+#### Web Vitals
+
+Para sites que recebem uma parte significativa de seu tráfego da Pesquisa Google, os SXGs podem ser usados para melhorar o [Web Vitals](/vitals/) - como a [LCP](/lcp/). As SXGs em cache e pré-estendidos podem ser entregues aos usuários de forma incrivelmente rápida e isso produz uma LCP mais rápida. Embora as SXGs possam ser uma ferramenta poderosa, elas funcionam melhor quando combinados com outras otimizações de desempenho, como o uso de CDNs e a redução de sub-recursos de bloco de renderização.
+
+### AMP
+
+O conteúdo AMP pode ser entregue usando SXG. A SXG permite que o conteúdo AMP seja pré-buscado e exibido usando seu URL canônico, em vez de seu URL deAMP.
+
+Todos os conceitos descritos neste documento ainda se aplicam ao caso de uso de AMP, no entanto, AMP tem suas próprias [ferramentas](https://github.com/ampproject/amppackager) separadas para gerar SXGs.
+
+{% Aside%} Saiba como veicular AMP usando trocas assinadas em [amp.dev](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/). {% endAside %}
+
+## Ferramental
+
+A implementação de SXGs consiste em gerar a SXG correspondente a um determinado URL e, em seguida, servir essa SXG aos solicitantes (geralmente rastreadores). Para gerar uma SXG, você precisará de um certificado que possa assinar as SXGs.
+
+### Certificados
+
+O uso de produção de SXGs exige um certificado com suporte para a extensão `CanSignHttpExchanges`. De acordo com as [especificações](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-4.2), os certificados com esta extensão devem ter um período de validade não superior a 90 dias e exigem que o domínio solicitante tenha um [registro CAA de DNS](https://en.wikipedia.org/wiki/DNS_Certification_Authority_Authorization) configurado.
+
+[Esta página](https://github.com/google/webpackager/wiki/Certificate-Authorities) lista as autoridades de certificação que podem emitir esse tipo de certificado. Os certificados para SXGs estão disponíveis apenas por meio de uma autoridade de certificação comercial.
+
+### Ferramentas SXG específicas da plataforma
+
+Essas ferramentas oferecem suporte a pilhas de tecnologia específicas. Se você já estiver usando uma plataforma com suporte por uma dessas ferramentas, pode achar mais fácil de configurar do que uma ferramenta de uso geral.
+
+- [`sxg-rs/cloudflare_worker`](https://github.com/google/sxg-rs/tree/main/cloudflare_worker) é executado em [Cloudflare Workers](https://workers.cloudflare.com/).
+
+- [`sxg-rs/fastly_compute`](https://github.com/google/sxg-rs/tree/main/fastly_compute) é executado em [Fastly Compute @ Edge](https://www.fastly.com/products/edge-compute/serverless).
+
+- [Trocas assinadas automáticas](https://blog.cloudflare.com/automatic-signed-exchanges/) são um recurso do Cloudflare que adquire certificados automaticamente e gera trocas assinadas.
+
+- [O módulo NGINX SXG](https://github.com/google/nginx-sxg-module) gera e atende SXGs para sites que usam [nginx](https://nginx.org/). As instruções de configuração podem ser encontradas [aqui](/how-to-set-up-signed-http-exchanges/).
+
+- [O Envoy SXG Filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/sxg_filter) gera e fornece SXGs para sites que usam o [Envoy](https://www.envoyproxy.io/).
+
+### Ferramentas SXG de uso geral
+
+#### CLI do Web Packager
+
+A [CLI do Web Packager](https://github.com/google/webpackager) gera uma SXG correspondente a um determinado URL.
+
+```shell
+webpackager \
+    --private\_key=private.key \
+    --cert\_url=https://example.com/certificate.cbor \
+    --url=https://example.com
+```
+
+Uma vez que o arquivo SXG foi gerado, carregue-o em seu servidor e sirva-o com o tipo MIME `application/signed-exchange;v=b3`. Além disso, você precisará fornecer o certificado SXG como `application/cert-chain+cbor`.
+
+#### Servidor Web Packager
+
+O [servidor Web Packager](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md), `webpkgserver`, atua como um [proxy reverso](https://en.wikipedia.org/wiki/Reverse_proxy) para servir SXGs. Dado um URL, o `webpkgserver` buscará o conteúdo do URL, empacotá-lo como uma SXG e servir a SXG em resposta. Para obter instruções sobre como configurar o servidor do Web Packager, consulte [Como configurar trocas assinadas usando o Web Packager](/signed-exchanges-webpackager).
+
+### Bibliotecas SXG
+
+Essas bibliotecas podem ser usadas para construir seu próprio gerador SXG:
+
+- A [`sxg_rs`](https://github.com/google/sxg-rs/tree/main/sxg_rs) é uma biblioteca Rust para gerar SXGs. É a biblioteca SXG com mais recursos e é usada como base para as ferramentas `cloudflare_worker` e `fastly_compute`.
+
+- A [`libsxg`](https://github.com/google/libsxg) é uma biblioteca C mínima para gerar as SXGs. É usado como base para o módulo NGINX SXG e o filtro Envoy SXG.
+
+- A [`go/signed-exchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) é uma biblioteca Go mínima fornecida pela especificação do pacote da Web como uma [implementação](https://en.wikipedia.org/wiki/Reference_implementation) de referência da geração de SXGs. É usado como base para sua ferramenta CLI de referência, [`gen-signedexchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) e as ferramentas de Web Packager com mais recursos.
+
+## Conclusão
+
+As trocas assinadas são um mecanismo de entrega que permite verificar a origem e validade de um recurso independentemente de como o recurso foi entregue. Como resultado, as SXGs podem ser distribuídas por terceiros, mantendo a atribuição total do editor.
+
+## Leitura adicional
+
+- [Rascunho da especificação para trocas de HTTP assinadas](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html)
+- [Explicadores de empacotamento da Web](https://github.com/WICG/webpackage/tree/main/explainers)
+- [Comece com trocas assinadas na Pesquisa Google](https://developers.google.com/search/docs/advanced/experience/signed-exchange)
+- [Como configurar as trocas assinadas usando o Web Packager](/signed-exchanges-webpackager)
+- [Demonstração de trocas assinadas](https://signed-exchange-testing.dev/)
diff --git a/src/site/content/pt/fast/third-party-javascript/index.md b/src/site/content/pt/fast/third-party-javascript/index.md
new file mode 100644
index 00000000000..ae22ac12e8f
--- /dev/null
+++ b/src/site/content/pt/fast/third-party-javascript/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: Desempenho do JavaScript de terceiros
+subhead: Descubra como o JavaScript de terceiros pode afetar o desempenho e o que você pode fazer para evitar que ele diminua a velocidade de seus sites.
+authors:
+  - mihajlija
+date: 2019-08-13
+description: |2-
+
+  Esta postagem descreve os tipos comuns do JavaScript de terceiros e os problemas de desempenho que eles podem causar. Ele também fornece orientação geral sobre como otimizar scripts de terceiros.
+alt: Um diagrama de uma página da web com texto, um vídeo, um mapa, um widget de bate-papo e botões de compartilhamento de mídia social.
+tags:
+  - blog
+  - performance
+---
+
+O JavaScript de terceiros geralmente se refere a scripts incorporados em seu site que são:
+
+- Não é de sua autoria
+- Servido a partir de servidores de terceiros
+
+Os sites usam esses scripts para vários fins, incluindo:
+
+- Botões de compartilhamento social
+- Incorporação do reprodutor de vídeo
+- Serviços de bate-papo
+- Iframes de publicidade
+- Scripts de análise e métricas
+- Scripts de teste A/B para experimentos
+- Bibliotecas auxiliares (como formatação de data, animação e bibliotecas funcionais)
+
+<figure data-size="full"> {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/uLXJ72jZAlzK56ctPwXd.mp4", autoplay=true, loop=true, muted=true, playsinline=true %}</figure>
+
+Os scripts de terceiros podem fornecer funcionalidade poderosa, mas essa não é toda a história. Eles também afetam a privacidade, a segurança e o comportamento da página⁠ — e podem ser particularmente problemáticos para o desempenho.
+
+## Desempenho
+
+Qualquer quantidade significativa de [JavaScript pode diminuir o desempenho](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/). Mas como o JavaScript de terceiros geralmente está fora do seu controle, ele pode trazer problemas adicionais.
+
+### Rede
+
+Configurar conexões leva tempo e enviar muitas solicitações a vários servidores causa lentidão. Esse tempo é ainda mais longo para conexões seguras, o que pode envolver pesquisas de DNS, redirecionamentos e várias viagens de ida e volta para o servidor final que lida com a solicitação do usuário.
+
+Os scripts de terceiros costumam aumentar a sobrecarga da rede com coisas como:
+
+- Disparo de solicitações de rede adicionais
+- Exibição de imagens e vídeos não otimizados
+- [Cache de HTTP](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) insuficiente, o que força a busca frequente de recursos de rede
+- Recursos de [Compressão do servidor](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer) insuficiente
+- Várias instâncias de estruturas e bibliotecas exibidas por diferentes incorporações de terceiros
+
+### Renderização
+
+A maneira como o JavaScript de terceiros é carregado é muito importante. Se for feito de forma sincronizada no caminho de renderização crítico, ele atrasa a análise do resto do documento.
+
+{% Aside 'key-term' %} O **caminho de renderização crítico** inclui todos os recursos de que o navegador precisa para exibir o conteúdo da primeira tela. {% endAside %}
+
+Caso um terceiro tiver problemas no servidor e não conseguir entregar um recurso, a renderização será bloqueada até que a solicitação expire, o que pode ser de 10 a 80 segundos. Você pode testar e simular esse problema com os [testes de ponto único de falha do WebPageTest](https://css-tricks.com/use-webpagetest-api/#single-point-of-failure).
+
+{% Aside %} [Os scripts de teste A/B](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/#ab_test_smaller_samples_of_users) também podem atrasar a renderização. A maioria deles bloqueia a exibição de conteúdo até que concluam o processamento — o que pode ser verdadeiro até mesmo para scripts de teste A/B assíncronos. {% endAside %}
+
+## O que fazer sobre isso
+
+Usar o JavaScript de terceiros geralmente é inevitável, mas há coisas que você pode fazer para minimizar os efeitos adversos:
+
+- Ao escolher recursos de terceiros, dê preferência aos que enviam a menor quantidade de código e, ao mesmo tempo, fornecem a funcionalidade de que você precisa.
+- Use os [orçamentos de desempenho](/use-lighthouse-for-performance-budgets/) para conteúdo de terceiros para manter seus custos sob controle.
+- Não use a mesma funcionalidade de dois fornecedores diferentes. Você provavelmente não precisa de dois gerenciadores de tags ou duas plataformas analíticas.
+- Audite e limpe rotineiramente scripts redundantes de terceiros.
+
+Para aprender como auditar o conteúdo de terceiros e carregá-lo com eficiência para melhor desempenho e experiência do usuário, verifique as outras postagens na seção [Otimize seus recursos de terceiros](/fast/#optimize-your-third-party-resources).
diff --git a/src/site/content/pt/fast/use-imagemin-to-compress-images/index.md b/src/site/content/pt/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..0f463471412
--- /dev/null
+++ b/src/site/content/pt/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,126 @@
+---
+layout: post
+title: Use Imagemin para comprimir imagens
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: |2-
+
+  Imagens não compactadas incham suas páginas com bytes desnecessários. Execute o Lighthouse para verificar se há oportunidades de melhorar o carregamento da página compactando imagens.
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## Por que você deveria se importar?
+
+Imagens não compactadas incham suas páginas com bytes desnecessários. A foto à direita é 40% menor do que a da esquerda, mas provavelmente seria idêntica à do usuário comum.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 KB</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 KB</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## Medir
+
+Execute o Lighthouse para verificar se há oportunidades de melhorar o carregamento da página compactando imagens. Essas oportunidades estão listadas em "Codificar imagens com eficiência":
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="image", width="800", height="552" %}
+
+{% Aside %} O Lighthouse atualmente relata sobre oportunidades de compactar imagens apenas no formato JPEG. {% endAside %}
+
+## Imagemin
+
+Imagemin é uma excelente escolha para compressão de imagem porque suporta uma ampla variedade de formatos de imagem e é facilmente integrado com scripts de construção e ferramentas de construção. Imagemin está disponível como [módulo CLI](https://www.npmjs.com/package/imagemin) e [npm](https://github.com/imagemin/imagemin-cli). Geralmente, o módulo npm é a melhor escolha porque oferece mais opções de configuração, mas o CLI pode ser uma alternativa decente se você quiser experimentar o Imagemin sem mexer em nenhum código.
+
+### Plugins
+
+Imagemin é construída em torno de "plugins". Um plugin é um pacote npm que compacta um formato de imagem específico (por exemplo, "mozjpeg" compacta JPEGs). Os formatos de imagem populares podem ter vários plug-ins para escolher.
+
+A coisa mais importante a se considerar ao escolher um plug-in é se ele é "com perdas" ou "sem perdas". Na compactação sem perdas, nenhum dado é perdido. A compactação com perdas reduz o tamanho do arquivo, mas possivelmente reduza a qualidade da imagem. Se um plugin não menciona se é "com perdas" ou "sem perdas", você pode dizer por sua API: se você pode especificar a qualidade da imagem de saída, então é "com perdas".
+
+Para a maioria das pessoas, plug-ins com perdas são a melhor escolha. Eles oferecem uma economia de tamanho de arquivo significativamente maior e você pode personalizar os níveis de compactação para atender às suas necessidades. A tabela abaixo lista os plug-ins populares da Imagemin. Esses não são os únicos plug-ins disponíveis, mas todos são boas opções para o seu projeto.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Formato de imagem</th>
+        <th>Plugin (s) com perdas</th>
+        <th>Plugin(s) sem perdas</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Imagemin CLI
+
+O Imagemin CLI funciona com 5 plugins diferentes: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin usa o plugin apropriado baseado no formato de imagem da entrada.
+
+Para compactar as imagens no diretório "images/" e salvá-las no mesmo diretório, execute o seguinte comando (sobrescreve os arquivos originais):
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Módulo npm imagemin
+
+Se você usar uma dessas ferramentas de construção, verifique os codelabs para Imaginemin com [webpack](/codelab-imagemin-webpack) , [gulp](/codelab-imagemin-gulp) ou [grunt](/codelab-imagemin-grunt).
+
+Você também pode usar Imagemin por si só como um script de Node. Este código usa o plugin "imagemin-mozjpeg" para comprimir arquivos JPEG para uma qualidade de 50 ('0' sendo o pior; '100' sendo o melhor):
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/pt/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/pt/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..b2f9c56cce1
--- /dev/null
+++ b/src/site/content/pt/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Use o Lighthouse para orçamentos de desempenho
+authors:
+  - katiehempenius
+description: |2-
+
+  O Lighthouse agora oferece suporte a orçamentos de desempenho. Esse recurso, LightWallet, pode ser configurado em menos de cinco minutos e fornece feedback sobre o tamanho e a quantidade de recursos da página.
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+O [Lighthouse](https://github.com/GoogleChrome/lighthouse) agora oferece suporte a orçamentos de desempenho. Esse recurso, [LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets), pode ser configurado em menos de cinco minutos e fornece feedback sobre as métricas de desempenho e o tamanho e a quantidade de recursos da página.
+
+## Instale o Lighthouse
+
+O LightWallet está disponível na versão de linha de comando do Lighthouse v5+.
+
+Para começar, instale o Lighthouse:
+
+```bash
+npm install -g lighthouse
+```
+
+## Crie um orçamento
+
+Crie um arquivo chamado `budget.json` e adicione o seguinte JSON:
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+Esse exemplo de `budget.json` define cinco orçamentos separados:
+
+- Um orçamento de 3000 ms para Time to Interactive (TTI), ou  tempo até interatividade
+- Um orçamento de 1000 ms para First Meaningful Paint (FMP), ou primeira exibição importante
+- Um orçamento de 125 KB para a quantidade total de JavaScript na página
+- Um orçamento de 300 KB para o tamanho geral da página
+- Um orçamento de 10 solicitações feitas a origens de terceiros
+
+Para ver uma lista completa de métricas de desempenho e tipos de recursos compatíveis, consulte a seção [Orçamentos de desempenho](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md) na documentação do Lighthouse.
+
+## Execute o Lighthouse
+
+Execute o Lighthouse usando a flag `--budget-path` , que informa a localização do seu arquivo de orçamento à ferramenta.
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %} **Observação**: um arquivo de orçamento não precisa ser nomeado `budget.json`. {% endAside %}
+
+## Veja os resultados
+
+Se o LightWallet tiver sido configurado corretamente, o relatório do Lighthouse conterá uma seção de **Orçamentos** na categoria **Desempenho.**
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="Seção 'Orçamentos' no relatório do Lighthouse", width="800", height="289" %}
+
+Na versão JSON do relatório do Lighthouse, é possível encontrar os resultados do LightWallet nos achados da auditoria de `performance-budget`.
diff --git a/src/site/content/pt/fast/why-speed-matters/index.md b/src/site/content/pt/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..7f0f83f3ed1
--- /dev/null
+++ b/src/site/content/pt/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: Por que a velocidade é importante?
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: Quando se fala em experiência do usuário, a velocidade importa. E atrasos causados pela velocidade em dispositivos móveis não apenas são frustrantes, mas também podem ter um impacto negativo nos resultados dos negócios.
+web_lighthouse: N/D
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+Os consumidores dependem cada vez mais do celular para acessar conteúdos e serviços digitais, e se você olhar a análise do seu site, provavelmente verá essa história se confirmando com seus próprios dados. Os consumidores também estão mais exigentes do que nunca e, ao avaliar a experiência em seu site, não estão apenas comparando você com seus concorrentes, mas também estão classificando você em relação aos melhores serviços da classe que usam todos os dias.
+
+Esta postagem resume algumas das pesquisas feitas sobre a relação entre desempenho e o sucesso nos negócios.
+
+## Desempenho envolve reter usuários
+
+<figure data-float="right">
+  <blockquote>
+    <p>O desempenho impactou diretamente os resultados financeiros da empresa.</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">Pinterest</a></p>
+    </cite>
+  </blockquote></figure>
+
+O desempenho representa um papel importante no sucesso de qualquer empreendimento online. Sites de alto desempenho envolvem e retêm os usuários melhor do que os de baixo desempenho.
+
+O Pinterest reduziu os tempos de espera percebidos em 40% e isso [aumentou o tráfego do mecanismo de pesquisa e as inscrições em 15%](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7) .
+
+O COOK reduziu o tempo médio de carregamento da página em 850 milissegundos, o que [aumentou as conversões em 7%, diminuiu as taxas de rejeição em 7% e aumentou as páginas por sessão em 10%](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf) .
+
+Os estudos também mostraram o impacto negativo que o baixo desempenho pode ter nas metas de negócios. Por exemplo, [a BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale) descobriu que perdia mais 10% de usuários para cada segundo adicional que o site deles levava para carregar.
+
+## Desempenho envolve melhorar as conversões
+
+Reter usuários é crucial para melhorar as conversões. Os sites lentos têm um impacto negativo na receita e os sites rápidos aumentam as taxas de conversão.
+
+Para o [Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html), cada redução de 100 ms na velocidade de carregamento da página inicial resultou em um aumento de 1,11% na conversão baseada em sessão, gerando um aumento médio de receita anual de quase US$ 380.000. Além disso, uma redução de 100 ms na velocidade de carregamento da página de checkout totalizou um aumento de 1,55% na conversão baseada em sessão, que por sua vez gerou um aumento médio de receita anual de quase US$ 530.000.
+
+Quando o [AutoAnything reduziu o tempo de carregamento da página pela metade](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/), observou um aumento de 12% a 13% nas vendas.
+
+O varejista [Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/) auditou a velocidade do site e desenvolveu um plano para resolver os problemas encontrados, resultando em uma redução de 20% no tempo de carregamento da página e um aumento de 10% na taxa de conversão.
+
+## Desempenho envolve experiência do usuário
+
+Quando se trata de experiência do usuário, a velocidade é importante. Um [estudo com consumidores](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report) mostra que a resposta ao estresse aos atrasos na velocidade dos celulares é semelhante à de assistir a um filme de terror ou resolver um problema matemático, e maior do que esperar na fila do caixa em uma loja varejista.
+
+Conforme um site começa a carregar, há um período de tempo em que os usuários esperam que o conteúdo apareça. Até que isso aconteça, sequer há experiência do usuário para se falar. Essa falta de experiência é passageira em conexões rápidas. Em conexões mais lentas, no entanto, os usuários são forçados a esperar. Os usuários podem ter mais problemas à medida que os recursos da página lentamente chegam.
+
+<figure>{% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="Uma comparação de dois rolos de película de uma página carregando. O primeiro mostra uma página carregando em uma conexão lenta, enquanto o segundo mostra a mesma página carregando em um conexão rápida.", width="800", height="264" %}<figcaption>Uma comparação entre o carregamento da página em uma conexão muito lenta (parte superior) e uma conexão mais rápida (parte inferior).</figcaption></figure>
+
+O desempenho é um aspecto fundamental das boas experiências do usuário. Quando os sites enviam muitos códigos, os navegadores devem usar megabytes do plano de dados do usuário para fazer o download do código. Os dispositivos móveis têm capacidade de CPU e memória limitadas. Frequentemente, esses aparelhos ficam sobrecarregados com o que podemos considerar uma pequena quantidade de código não otimizado. Isso cria um desempenho ruim que leva à falta de resposta. Sabendo o que sabemos sobre o comportamento humano, os usuários só irão tolerar aplicativos de baixo desempenho por um certo tempo até abandoná-los.
+
+## Desempenho envolve pessoas
+
+Sites e aplicativos com baixo desempenho também podem representar custos reais para as pessoas que os utilizam.
+
+[Como os usuários móveis continuam a representar uma parcela maior dos usuários da Internet em todo o mundo](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet), é importante ter em mente que muitos desses usuários acessam a web por meio de redes móveis LTE, 4G, 3G e até 2G. Como aponta Ben Schwarz da Caliber [neste estudo de desempenho no mundo real](https://calibreapp.com/blog/beyond-the-bubble), o custo dos planos de dados pré-pagos está diminuindo, o que por sua vez está tornando o acesso à internet mais acessível em lugares onde antes não era. Dispositivos móveis e acesso à Internet não são mais itens de luxo. Eles são ferramentas comuns necessárias para navegar e funcionar em um mundo cada vez mais interconectado.
+
+[O tamanho total da página tem aumentado constantemente desde pelo menos 2011](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal), e a tendência parece continuar. Como a página típica envia mais dados, os usuários precisam fazer recargas em seus planos de dados com limites de dados com mais frequência, o que lhes custa dinheiro.
+
+Além de economizar o dinheiro dos usuários, experiências de usuário rápidas e leves também podem ser cruciais para usuários em crise. Recursos públicos, como hospitais, clínicas e centros de crise têm recursos online que disponibilizam aos usuários informações importantes e específicas de que precisam durante uma crise. [Embora o design seja fundamental para apresentar informações importantes de maneira eficiente em momentos estressantes](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis), a importância de fornecer essas informações rapidamente não pode ser subestimada. Faz parte do nosso trabalho.
+
+## Comece a melhorar a velocidade do seu site {: #get-started }
+
+Leia o [Core Web Vitals](/vitals/#core-web-vitals) para saber mais sobre as métricas nas quais o Google acredita que todos os sites devem se concentrar.
+
+<blockquote>
+  <p>Hoje, estamos desenvolvendo esse trabalho e fornecendo uma visão antecipada de uma futura mudança na classificação da Pesquisa que incorpora essas métricas de experiência da página. Apresentaremos um novo sinal que combina Core Web Vitals com nossos sinais existentes para a experiência da página para fornecer uma imagem holística da qualidade da experiência do usuário em uma página da web.</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">Avaliando a experiência da página para uma web melhor</a> , Blog oficial Google Webmaster Central</cite>
+</blockquote>
+
+Em seguida, verifique os [tempos de carregamento rápido](/fast/) para ver muitas dicas e truques relacionados a ficar rápido e permanecer rápido.
diff --git a/src/site/content/pt/feed.njk b/src/site/content/pt/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/pt/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/pt/identity/index.md b/src/site/content/pt/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/pt/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/pt/identity/sign-in-form-best-practices/index.md b/src/site/content/pt/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..44e9356a561
--- /dev/null
+++ b/src/site/content/pt/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: Práticas recomendadas do formulário de login
+subhead: Use recursos de navegador de plataforma cruzada para criar formulários de login que sejam seguros, acessíveis e fáceis de usar.
+authors:
+  - samdutton
+scheduled: verdadeiro
+date: 2020-06-29
+updated: 2021-09-27
+description: Use recursos de navegador de plataforma cruzada para criar formulários de login que sejam seguros, acessíveis e fáceis de usar.
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: Uma pessoa segurando um telefone.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+Se os usuários precisarem fazer login em seu site, um bom design de formulário de login é essencial. Isso é especialmente verdadeiro para pessoas com conexões ruins, no celular, com pressa ou sob estresse. Formulários de login mal projetados obtêm altas taxas de rejeição. Cada rejeição pode significar um usuário perdido e insatisfeito - não apenas uma oportunidade perdida de login.
+
+{% Aside 'codelab' %} Se você preferir aprender essas práticas recomendadas com um tutorial prático, verifique o [codelab de práticas recomendadas do formulário de login](/codelab-sign-in-form-best-practices/) . {% endAside %}
+
+Aqui está um exemplo de um formulário de login simples que demonstra todas as práticas recomendadas:
+
+{% Glitch {id: 'sign-in-form', caminho: 'index.html', altura: 480}%}
+
+## Lista de controle
+
+- [Use elementos HTML significativos](#meaningful-html): `<form>`, `<input>`, `<label>` e `<button>`.
+- [Rotule cada entrada com um `<label>`](#label).
+- Use atributos de elemento para [acessar os recursos integrados do navegador](#element-attributes) : `type`, `name`, `autocomplete`, `required`.
+- Dê ao `name` entrada e aos `id` valores estáveis que não mudam entre carregamentos de página ou implantações de site.
+- Coloque o login [em seu próprio elemento &lt;form&gt;](#form).
+- [Garanta o envio bem-sucedido do formulário](#submission).
+- Use [`autocomplete="new-password"`](#new-password) e [`id="new-password"`](#new-password) para a entrada de senha em um formulário de inscrição e para a nova senha em um formulário de redefinição de senha.
+- Use [`autocomplete="current-password"`](#current-password) e [`id="current-password"`](#current-password) para inserir a senha de login.
+- Fornece a funcionalidade [Mostrar senha.](#show-password)
+- [Use `aria-label` e `aria-describedby`](#accessible-password-inputs) para entradas de senha.
+- [Não duplique as entradas](#no-double-inputs).
+- Projete formulários para que o [teclado móvel não oculte entradas ou botões](#keyboard-obstruction).
+- Certifique-se de que os formulários possam ser usados no celular: use [texto legível](#size-text-correctly) e certifique-se de que as entradas e os botões sejam [grandes o suficiente para funcionar como alvos de toque](#tap-targets).
+- [Mantenha a marca e o estilo](#general-guidelines) em suas páginas de inscrição e login.
+- [Teste em campo e também no laboratório](#analytics): crie análises de página, análises de interação e medição de desempenho centrada no usuário em seu fluxo de inscrição e inscrição.
+- [Teste em navegadores e dispositivos](#devices): o comportamento do formulário varia significativamente entre as plataformas.
+
+{% Aside %} Este artigo é sobre as práticas recomendadas de front-end. Não explica como construir serviços de back-end para autenticar usuários, armazenar suas credenciais ou gerenciar suas contas. [12 melhores práticas para contas de usuário, autorização e gerenciamento de senhas](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) descrevem os princípios básicos para executar seu próprio back-end. Se você tem usuários em diferentes partes do mundo, deve considerar a localização do uso de serviços de identidade de terceiros em seu site, bem como seu conteúdo.
+
+Existem também duas APIs relativamente novas não abordadas neste artigo que podem ajudá-lo a construir uma melhor experiência de login:
+
+- [**WebOTP**](/web-otp/): para fornecer senhas únicas ou números PIN via SMS para telefones celulares. Isso pode permitir que os usuários selecionem um número de telefone como identificador (não é necessário inserir um endereço de e-mail!). Também permite a verificação em duas etapas para login e códigos únicos para confirmação de pagamento.
+- [**Gerenciamento de credenciais**](https://developer.chrome.com/blog/credential-management-api/): para permitir que os desenvolvedores armazenem e recuperem credenciais de senha e credenciais federadas de maneira programática. {% endAside %}
+
+## Use HTML significativo {: #meaningful-html}
+
+Use elementos construídos para o trabalho: `<form>`, `<label>` e `<button>`. Isso habilita a funcionalidade do navegador embutido, melhora a acessibilidade e adiciona significado à sua marcação.
+
+### Use `<form>` {: #form}
+
+Você pode ficar tentado a envolver as entradas em um `<div>` e lidar com o envio de dados de entrada puramente com JavaScript. Geralmente é melhor usar um elemento [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form). Isso torna seu site acessível para leitores de tela e outros dispositivos de assistência, permite uma variedade de recursos integrados do navegador, torna mais simples construir login funcional básico para navegadores mais antigos e ainda pode funcionar mesmo se o JavaScript falhar.
+
+{% Aside 'gotchas' %} Um erro comum é embrulhar uma página da web inteira em um único formulário, mas isso pode causar problemas para gerenciadores de senhas do navegador e preenchimento automático. Use um &lt;form&gt; diferente para cada componente de IU que precisa de um formulário. Por exemplo, se você fizer login e pesquisar na mesma página, deverá usar dois elementos de formulário. {% endAside %}
+
+### Use `<label>` {: #label}
+
+Para rotular uma entrada, use um [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label)!
+
+```html
+<label for="email">Email</label>
+<input id="email" …>
+```
+
+Duas razões:
+
+- Um toque ou clique em um rótulo move o foco para sua entrada. Associe um rótulo a uma entrada usando o `for` com o `name` ou `id` da entrada.
+- Os leitores de tela anunciam o texto do rótulo quando o rótulo ou a entrada do rótulo obtém o foco.
+
+Não use marcadores de posição como rótulos de entrada. As pessoas podem esquecer para que serve a entrada depois de começarem a digitar o texto, especialmente se ficarem distraídas ("Eu estava digitando um endereço de e-mail, um número de telefone ou um ID de conta?"). Existem muitos outros problemas potenciais com espaços reservados: consulte [Não use o atributo](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) Placeholder e [Placeholders em campos de formulário são prejudiciais,](https://www.nngroup.com/articles/form-design-placeholders/) se você não estiver convencido.
+
+Provavelmente, é melhor colocar seus rótulos acima de suas entradas. Isso permite um design consistente em dispositivos móveis e desktops e, de acordo com a [pesquisa de IA do Google](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html), permite uma digitalização mais rápida pelos usuários. Você obtém rótulos e entradas de largura total e não precisa ajustar o rótulo e a largura de entrada para caber no texto do rótulo.
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="Captura de tela mostrando a posição do rótulo de entrada do formulário no celular: próximo à entrada e acima da entrada.", width="500", height="253" %} <figcaption> O rótulo e a largura de entrada são limitados quando ambos estão na mesma linha.</figcaption></figure>
+
+Abra o [Glitch de posição de rótulo](https://label-position.glitch.me) em um dispositivo móvel para ver por si mesmo.
+
+### Use `<button>` {: #button}
+
+Use [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) para botões! Os elementos de botão fornecem comportamento acessível e funcionalidade de envio de formulário integrada e podem ser facilmente estilizados. Não faz sentido usar um `<div>` ou algum outro elemento fingindo ser um botão.
+
+Certifique-se de que o botão enviar diz o que faz. Os exemplos incluem **Criar conta** ou **Entrar**, não **Enviar** ou **Iniciar**.
+
+### Garanta o envio bem-sucedido do formulário {: #submission}
+
+Ajude os gerentes de senha a entender que um formulário foi enviado. Existem duas maneiras de fazer isso:
+
+- Navegue para uma página diferente.
+- Emule a navegação com `History.pushState()` ou `History.replaceState()` e remova o formulário de senha.
+
+Com um `XMLHttpRequest` ou `fetch`, certifique-se de que o sucesso do login seja relatado na resposta e tratado retirando o formulário do DOM e também indicando o sucesso para o usuário.
+
+Considere desativar o **botão Sign in** depois que o usuário tocar ou clicar nele. [Muitos usuários clicam nos botões várias vezes,](https://baymard.com/blog/users-double-click-online) mesmo em sites rápidos e responsivos. Isso retarda as interações e aumenta a carga do servidor.
+
+Por outro lado, não desative o envio de formulário que aguarda a entrada do usuário. Por exemplo, não desative o **botão Sign in** se os usuários não tiverem inserido o PIN do cliente. Os usuários podem perder algo no formulário e, em seguida, tentar tocar repetidamente **no botão Sign in** (desabilitado) e pensar que não está funcionando. No mínimo, se você deve desabilitar o envio de formulário, explique ao usuário o que está faltando quando ele clicar no botão desabilitado.
+
+{% Aside 'caution' %} O tipo padrão de botão em um formulário é `submit` . Se você quiser adicionar outro botão em um formulário (para **Mostrar senha**, por exemplo), adicione `type="button"`. Caso contrário, clicar ou tocar no botão enviará o formulário.
+
+Pressionar a `Enter` enquanto qualquer campo do formulário estiver em foco simula um clique no primeiro `submit` do formulário. Se você incluir um botão em seu formulário antes do **botão Enviar** e não especificar o tipo, esse botão terá o tipo padrão para botões em um formulário ( `submit` ) e receberá o evento de clique antes do formulário ser enviado. Para ver um exemplo disso, veja nossa [demonstração](https://enter-button.glitch.me/): preencha o formulário e pressione `Enter`. {% endAside %}
+
+### Não duplique as entradas {: #no-double-inputs}
+
+Alguns sites forçam os usuários a inserir e-mails ou senhas duas vezes. Isso pode reduzir erros para alguns usuários, mas causa trabalho extra para *todos* os usuários e [aumenta as taxas de abandono](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/). Perguntar duas vezes também não faz sentido quando os navegadores preenchem automaticamente endereços de e-mail ou sugerem senhas fortes. É melhor permitir que os usuários confirmem seus endereços de e-mail (você precisará fazer isso de qualquer maneira) e facilitar a redefinição de suas senhas, se necessário.
+
+## Aproveite ao máximo os atributos do elemento {: #element-attribute}
+
+É aqui que a mágica realmente acontece! Os navegadores têm vários recursos integrados úteis que usam atributos de elemento de entrada.
+
+## Mantenha as senhas privadas, mas permita que os usuários as vejam se quiserem {: #show-password}
+
+As entradas de senhas devem ter `type="password"` para ocultar o texto da senha e ajudar o navegador a entender que a entrada é para senhas. Observe que os navegadores usam [uma variedade de técnicas](#autofill) para entender as funções de entrada e decidir se devem ou não se oferecer para salvar as senhas.
+
+Você deve adicionar um **ícone ou botão Mostrar senha** para permitir que os usuários verifiquem o texto que inseriram - e não se esqueça de adicionar um link **Esqueci a senha.** Consulte [Habilitar exibição de senha](#password-display).
+
+<figure> {% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="Formulário de login do Google mostrando o ícone de senha.", width="300", height="107" %} <figcaption> Entrada de senha a partir do formulário de login do Google: com <strong>Mostrar</strong> ícone de senha e link <strong>Esqueci minha senha.</strong></figcaption></figure>
+
+## Dê aos usuários de celular o teclado certo {: #mobile-keyboards}
+
+Use `<input type="email">` para dar aos usuários móveis um teclado apropriado e habilitar a validação de endereço de e-mail embutida básica pelo navegador … sem necessidade de JavaScript!
+
+Se você precisar usar um número de telefone em vez de um endereço de e-mail, `<input type="tel">` habilita um teclado de telefone no celular. Você também pode usar o `inputmode` onde necessário: `inputmode="numeric"` é ideal para números PIN. [Tudo o que você sempre quis saber sobre o modo de entrada](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/) tem mais detalhes.
+
+{% Aside 'caution' %} `type="number"` adiciona uma seta para cima/para baixo para aumentar os números, portanto, não use para números que não devem ser aumentados, como IDs e números de contas. {% endAside %}
+
+### Impedir que o teclado móvel obstrua o **botão Login** {: #keyboard-obstruction}
+
+Infelizmente, se você não tiver cuidado, os teclados móveis podem cobrir seu formulário ou, pior, obstruir parcialmente o botão **Login.** Os usuários podem desistir antes de perceber o que aconteceu.
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Duas capturas de tela de um formulário de login em um telefone Android: uma mostrando como o botão Enviar é obscurecido pelo teclado do telefone.", width="400", height="360" %}<figcaption> O <b>botão Sign in</b>: agora você o vê, agora não.</figcaption></figure>
+
+Sempre que possível, evite isso exibindo apenas as entradas de e-mail / telefone e senha e o **botão Sign in** na parte superior de sua página de login. Coloque outro conteúdo abaixo.
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Captura de tela de um formulário de login em um telefone Android: o botão Sign in não é obscurecido pelo teclado do telefone.", width="200", height="342" %} <figcaption><figcaption> O teclado não obstrui o botão <b>Sign in.</b></figcaption></figcaption></figure>
+
+#### Teste em uma variedade de dispositivos {: #devices}
+
+Você precisará testar em uma variedade de dispositivos para seu público-alvo e ajustar de acordo. O BrowserStack permite [o teste gratuito de projetos de código aberto](https://www.browserstack.com/open-source) em uma variedade de dispositivos e navegadores reais.
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="Capturas de tela de um formulário de login no iPhone 7, 8 e 11. No iPhone 7 e 8, o botão Sign in é obscurecido pelo teclado do telefone, mas não no iPhone 11 ", width="800", height="522" %} <figcaption> O <b>botão Sign in</b>: obscurecido no iPhone 7 e 8, mas não no iPhone 11.</figcaption></figure>
+
+#### Considere o uso de duas páginas {: #two-pages}
+
+Alguns sites (incluindo Amazon e eBay) evitam o problema pedindo e-mail/telefone e senha em duas páginas. Essa abordagem também simplifica a experiência: o usuário recebe apenas uma tarefa de cada vez.
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Captura de tela de um formulário de login no site da Amazon: e-mail / telefone e senha em duas 'páginas' separadas.", width="400", height="385" %} <figcaption> Login em duas etapas: e-mail ou telefone e senha.</figcaption></figure>
+
+Idealmente, isso deve ser implementado com um único &lt;form&gt;. Use JavaScript para exibir inicialmente apenas a entrada de e-mail, depois oculte-o e mostre a entrada de senha. Se você precisar forçar o usuário a navegar para uma nova página entre inserir seu e-mail e senha, o formulário na segunda página deve ter um elemento de entrada oculto com o valor de e-mail, para ajudar a permitir que os gerenciadores de senha armazenem o valor correto. [Estilos de formulário de senha que o Chromium entende](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands) fornece um exemplo de código.
+
+### Ajude os usuários a evitar inserir dados novamente {: #autofill}
+
+Você pode ajudar os navegadores a armazenar dados corretamente e preencher automaticamente as entradas, para que os usuários não tenham que se lembrar de inserir os valores de e-mail e senha. Isso é particularmente importante no celular e crucial para entradas de e-mail, que obtêm [altas taxas de abandono](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/).
+
+Existem duas partes para isso:
+
+1. Os `autocomplete` , `name` , `id` e `type` ajudam os navegadores a entender a função das entradas para armazenar dados que podem ser usados posteriormente para o preenchimento automático. Para permitir que os dados sejam armazenados para preenchimento automático, os navegadores modernos também exigem que as entradas tenham um `name` estável ou `id` (não gerado aleatoriamente em cada carregamento de página ou implantação de site) e que estejam em um &lt;form&gt; com um botão de `submit`
+
+2. O `autocomplete` entradas automaticamente usando os dados armazenados.
+
+Para entradas de e-mail, use `autocomplete="username"`, já que o `username` é reconhecido pelos gerenciadores de senha em navegadores modernos - mesmo que você deva usar `type="email"` e talvez queira usar `id="email"` e `name="email"`.
+
+Para entradas de senha, use os `autocomplete` e `id` apropriados para ajudar os navegadores a diferenciar entre as senhas novas e atuais.
+
+### Use `autocomplete="new-password"` e `id="new-password"` para uma nova senha {: #new-password}
+
+- Use `autocomplete="new-password"` e `id="new-password"` para inserir a senha em um formulário de inscrição ou a nova senha em um formulário de alteração de senha.
+
+### Use `autocomplete="current-password"` e `id="current-password"` para uma senha existente {: #current-password}
+
+- Use `autocomplete="current-password"` e `id="current-password"` para inserir a senha em um formulário de login ou inserir a senha antiga do usuário em um formulário de alteração de senha. Isso informa ao navegador que você deseja usar a senha atual armazenada para o site.
+
+Para um formulário de inscrição:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+Para fazer login:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %} Navegadores como o Chrome podem usar o gerenciador de senhas do navegador para preencher campos automaticamente no processo de login para usuários recorrentes. Para que esses recursos funcionem, o navegador precisa ser capaz de distinguir quando um usuário altera sua senha.
+
+Especificamente, o formulário para alterar a senha do usuário deve ser apagado ou ocultado da página após a configuração da nova senha. Se o formulário para alteração da senha do usuário permanecer preenchido na página após a alteração da senha, o navegador pode não conseguir registrar a atualização. {% endAside %}
+
+### Suporte a gerenciadores de senhas {: #password-managers}
+
+Navegadores diferentes lidam com o preenchimento automático de e-mail e a sugestão de senha de maneira um pouco diferente, mas os efeitos são os mesmos. No Safari 11 e superior na área de trabalho, por exemplo, o gerenciador de senha é exibido e, em seguida, a autenticação biométrica (impressão digital ou reconhecimento facial) é usada, se disponível.
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="Capturas de tela de três estágios do processo de login no Safari no desktop: gerenciador de senha, autenticação biométrica, preenchimento automático.", width="800", height="234" %} <figcaption>Faça login com preenchimento automático - nenhuma entrada de texto necessária!</figcaption></figure>
+
+O Chrome na área de trabalho exibe sugestões de e-mail, mostra o gerenciador de senhas e preenche automaticamente a senha.
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="Capturas de tela de quatro estágios do processo de login no Chrome na área de trabalho: conclusão de e-mail, sugestão de e-mail, gerenciador de senha, preenchimento automático na seleção.", width="800", height="232" %} <figcaption>Fluxo de login de preenchimento automático no Chrome 84.</figcaption></figure>
+
+A senha do navegador e os sistemas de preenchimento automático não são simples. Os algoritmos para adivinhar, armazenar e exibir valores não são padronizados e variam de plataforma para plataforma. Por exemplo, como apontado por [Hidde de Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form): "O gerenciador de senhas do Firefox complementa sua heurística com um [sistema de receita](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)."
+
+[Preenchimento automático: o que os desenvolvedores da web devem saber, mas não](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont) tem muito mais informações sobre como usar o `name` e o `autocomplete`. A [especificação HTML](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control) lista todos os 59 valores possíveis.
+
+{% Aside %} Você pode ajudar os gerenciadores de senha usando diferentes `name` e `id` em formulários de inscrição e login, para o `form` , bem como qualquer elemento `input`, `select` e `textarea`. {% endAside %}
+
+### Ative o navegador para sugerir uma senha forte {: #password-suggestions}
+
+Os navegadores modernos usam heurísticas para decidir quando mostrar a IU do gerenciador de senhas e sugerir uma senha forte.
+
+Veja como o Safari faz isso no desktop.
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="Captura de tela do gerenciador de senhas do Firefox na área de trabalho.", width="800", height="229" %} <figcaption>Fluxo de sugestão de senha no Safari.</figcaption></figure>
+
+(A sugestão de senha única forte está disponível no Safari desde a versão 12.0.)
+
+Geradores de senha de navegador integrados significam que usuários e desenvolvedores não precisam descobrir o que é uma "senha forte". Como os navegadores podem armazenar senhas com segurança e preenchê-las automaticamente conforme necessário, não há necessidade de os usuários se lembrarem ou inserirem as senhas. Incentivar os usuários a aproveitar as vantagens dos geradores de senha do navegador integrados também significa que eles têm mais probabilidade de usar uma senha única e forte em seu site e menos probabilidade de reutilizar uma senha que poderia estar comprometida em outro lugar.
+
+{% Aside %} A desvantagem dessa abordagem é que não há como compartilhar senhas entre plataformas. Por exemplo, um usuário pode usar o Safari em seu iPhone e o Chrome em seu laptop Windows. {% endAside %}
+
+### Ajude a proteger os usuários de entradas perdidas acidentalmente {: #required-fields}
+
+Adicione o `required` aos campos de e-mail e senha. Os navegadores modernos solicitam e definem o foco automaticamente para os dados ausentes. Não requer JavaScript!
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="Captura de tela do desktop Firefox e Chrome para Android mostrando o prompt 'Preencha este campo' para dados ausentes.", width="600", height="392" %} <figcaption> Avisar e focar em dados ausentes no Firefox para desktop (versão 76) e Chrome para Android (versão 83).</figcaption></figure>
+
+## Design para dedos e polegares {: #mobile-design}
+
+O tamanho padrão do navegador para quase tudo relacionado a elementos de entrada e botões é muito pequeno, especialmente em dispositivos móveis. Isso pode parecer óbvio, mas é um problema comum com formulários de login em muitos sites.
+
+### Certifique-se de que as entradas e os botões sejam grandes o suficiente {: #tap-targets}
+
+O tamanho e o preenchimento padrão para entradas e botões são muito pequenos na área de trabalho e ainda pior no celular.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="Captura de tela do formulário sem estilo no Chrome para desktop e Chrome para Android.", width="800", height="434" %}</figure>
+
+De acordo com as [orientações de acessibilidade do Android,](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB) o tamanho alvo recomendado para objetos touchscreen é de 7 a 10 mm. As diretrizes de interface da Apple sugerem 48x48 px, e o W3C sugere [pelo menos 44x44 pixels CSS](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html). Com base nisso, adicione (pelo menos) cerca de 15 px de preenchimento para inserir elementos e botões para dispositivos móveis e cerca de 10 px para desktop. Experimente fazer isso com um dispositivo móvel real e um dedo ou polegar real. Você deve ser capaz de tocar confortavelmente em cada uma de suas entradas e botões.
+
+Os [pontos de toque não são dimensionados de forma adequada](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/). A auditoria do Lighthouse pode ajudá-lo a automatizar o processo de detecção de elementos de entrada que são muito pequenos.
+
+#### Design para polegares {: #design-for-thumbs}
+
+Pesquise o [alvo de toque](https://www.google.com/search?q=touch+target) e você verá muitas fotos de indicadores. No entanto, no mundo real, muitas pessoas usam os polegares para interagir com os telefones. Os polegares são maiores do que os indicadores e o controle é menos preciso. Mais uma razão para alvos de toque de tamanho adequado.
+
+### Torne o texto grande o suficiente {: #size-text-correctly}
+
+Assim como acontece com o tamanho e o preenchimento, o tamanho da fonte do navegador padrão para elementos de entrada e botões é muito pequeno, principalmente em dispositivos móveis.
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="Captura de tela do formulário não estilizado no Chrome no desktop e no Android.", width="800", height="494" %} <figcaption>Estilo padrão no desktop e no celular: o texto de entrada é muito pequeno para ser legível para muitos usuários.</figcaption></figure>
+
+Navegadores em diferentes plataformas têm tamanhos de fontes diferentes, então é difícil especificar um tamanho de fonte específico que funcione bem em qualquer lugar. Uma rápida pesquisa de sites populares mostra tamanhos de 13 a 16 pixels no desktop: corresponder a esse tamanho físico é um bom mínimo para texto no celular.
+
+Isso significa que você precisa usar um tamanho de pixel maior no celular: `16px` no Chrome para desktop é bastante legível, mas mesmo com uma boa visão é difícil ler `16px` no Chrome para Android. Você pode definir diferentes tamanhos de pixel de fonte para diferentes tamanhos de viewport usando [consultas de mídia](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size). `20px` para dispositivos móveis, mas você deve testar isso com amigos ou colegas que têm visão reduzida.
+
+O [documento não usa tamanhos de fonte legíveis](https://developer.chrome.com/docs/lighthouse/seo/font-size/). A auditoria do Lighthouse pode ajudá-lo a automatizar o processo de detecção de texto muito pequeno.
+
+### Forneça espaço suficiente entre as entradas {: #size-margins-correctly}
+
+Adicione margem suficiente para fazer as entradas funcionarem bem como alvos de toque. Em outras palavras, almeje a largura de um dedo de margem.
+
+### Certifique-se de que suas entradas estejam claramente visíveis {: #visible-inputs}
+
+O estilo de borda padrão para entradas torna-as difíceis de ver. Eles são quase invisíveis em algumas plataformas como o Chrome para Android.
+
+Além do preenchimento, adicione uma borda: em um fundo branco, uma boa regra geral é usar `#ccc` ou mais escuro.
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Captura de tela da forma estilizada no Chrome no Android.", width="250", height="525" %} <figcaption>Texto legível, bordas de entrada visíveis, preenchimento e margens adequados.</figcaption></figure>
+
+### Use recursos integrados do navegador para avisar sobre valores de entrada inválidos {: #built-in-validation}
+
+Os navegadores possuem recursos integrados para fazer a validação básica de formulários para entradas com um atributo `type`. Os navegadores avisam quando você envia um formulário com um valor inválido e definem o foco na entrada problemática.
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="Captura de tela de um formulário de login no Chrome na área de trabalho mostrando o prompt do navegador e o foco para um valor de e-mail inválido.", width="300", height="290" %} <figcaption>Validação embutida básica pelo navegador.</figcaption></figure>
+
+Você pode usar o `:invalid` seletor CSS inválido para destacar dados inválidos. Use `:not(:placeholder-shown)` para evitar a seleção de entradas sem conteúdo.
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+Experimente maneiras diferentes de destacar entradas com valores inválidos.
+
+## Use JavaScript onde necessário {: #javascript}
+
+### Alternar exibição de senha {: #password-display}
+
+Você deve adicionar um **ícone ou botão Mostrar senha** para permitir que os usuários verifiquem o texto que inseriram. [A usabilidade é prejudicada](https://www.nngroup.com/articles/stop-password-masking/) quando os usuários não conseguem ver o texto que inseriram. Atualmente não há uma maneira integrada de fazer isso, embora [haja planos para implementação](https://twitter.com/sw12/status/1251191795377156099). Você precisará usar JavaScript em vez disso.
+
+<figure><img src="./show-password-google.png" width="350" alt="Formulário de login do Google com o ícone Mostrar ísenha."><figcaption> Formulário de login do Google: com o ícone <strong>Mostrar senha</strong> e link <strong>Esqueci a senha.</strong></figcaption></figure>
+
+O código a seguir usa um botão de texto para adicionar a funcionalidade **Mostrar senha.**
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+Aqui está o CSS para fazer o botão parecer texto simples:
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+E o JavaScript para mostrar a senha:
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Hide password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Hide password.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Show password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Show password as plain text. ' +
+      'Warning: this will display your password on the screen.');
+  }
+}
+```
+
+Aqui está o resultado final:
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Capturas de tela do formulário de login com Mostrar texto de senha 'botão', no Safari no Mac e no iPhone 7.", width="800", height="468" %} <figcaption>Formulário de login com o "botão" de texto <strong>{nbsp}Mostrar senha</strong>, no Safari no Mac e iPhone 7.</figcaption></figure>
+
+### Torne as entradas de senha acessíveis {: #accessible-password-inputs}
+
+Use `aria-describedby` para delinear regras de senha, fornecendo a ID do elemento que descreve as restrições. Os leitores de tela fornecem o texto do rótulo, o tipo de entrada (senha) e a descrição.
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
+```
+
+Ao adicionar a funcionalidade **Mostrar senha**, certifique-se de incluir um `aria-label` para avisar que a senha será exibida. Caso contrário, os usuários podem revelar inadvertidamente as senhas.
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Show password as plain text.
+                    Warning: this will display your password on the screen.">
+  Show password
+</button>
+```
+
+Você pode ver os dois recursos ARIA em ação na seguinte falha:
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+[Criar formulários acessíveis](https://webaim.org/techniques/forms/) tem mais dicas para ajudar a tornar os formulários acessíveis.
+
+### Valide em tempo real e antes do envio {: #validation}
+
+Os elementos e atributos do formulário HTML têm recursos integrados para validação básica, mas você também deve usar JavaScript para fazer uma validação mais robusta enquanto os usuários estão inserindo dados e quando tentam enviar o formulário.
+
+{% Aside 'warning' %} A validação do lado do cliente ajuda os usuários a inserir dados e pode evitar a carga desnecessária do servidor, mas você deve sempre validar e higienizar os dados em seu back-end. {% endAside %}
+
+A [etapa 5](https://glitch.com/edit/#!/sign-in-form-codelab-5) do codelab do formulário de login usa a [API de validação de restrição](https://html.spec.whatwg.org/multipage/forms.html#constraints) (que é [amplamente suportada](https://caniuse.com/#feat=constraint-validation)) para adicionar validação personalizada usando a IU do navegador integrada para definir o foco e exibir prompts.
+
+Saiba mais: [Use JavaScript para uma validação mais complexa em tempo real](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+### Analytics e RUM {: #analytics}
+
+"O que você não pode medir, você não pode melhorar" é particularmente verdadeiro para formulários de inscrição e inscrição. Você precisa definir metas, medir o sucesso, melhorar seu site - e repetir.
+
+O [teste de usabilidade com desconto](https://www.nngroup.com/articles/discount-usability-20-years/) pode ser útil para experimentar mudanças, mas você precisará de dados do mundo real para realmente entender como seus usuários experimentam seus formulários de inscrição e login:
+
+- **Análise de página** : visualizações de página de inscrição e login, taxas de rejeição e saídas.
+- **Análise de interação**: [funis de meta](https://support.google.com/analytics/answer/6180923?hl=en) (onde os usuários abandonam seu login ou fluxo de login?) E [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) (quais ações os usuários realizam ao interagir com seus formulários?)
+- **Desempenho do site**: [métricas centradas no usuário](/user-centric-performance-metrics) (seus formulários de inscrição e login estão lentos por algum motivo e, em caso afirmativo, qual é a causa?).
+
+Você também pode considerar a implementação de testes A/B para experimentar diferentes abordagens de inscrição e login, além de implementações graduais para validar as alterações em um subconjunto de usuários antes de liberar as alterações para todos os usuários.
+
+## Diretrizes gerais {: #general-guidelines}
+
+IU e UX bem projetadas podem reduzir o abandono do formulário de login:
+
+- Não faça os usuários procurarem por login! Coloque um link para o formulário de login na parte superior da página, usando palavras bem conhecidas, como **Login** , **Criar conta** ou **Registrar**.
+- Mantenha o foco! Os formulários de inscrição não são o lugar para distrair as pessoas com ofertas e outros recursos do site.
+- Minimize a complexidade da inscrição. Colete outros dados do usuário (como endereços ou detalhes de cartão de crédito) apenas quando os usuários perceberem um benefício claro em fornecer esses dados.
+- Antes que os usuários comecem em seu formulário de inscrição, deixe claro qual é a proposta de valor. Como eles se beneficiam com o login? Dê aos usuários incentivos concretos para concluir a inscrição.
+- Se possível, permita que os usuários se identifiquem com um número de telefone celular em vez de um endereço de e-mail, já que alguns usuários podem não usar o e-mail.
+- Torne mais fácil para os usuários redefinir suas senhas e faça o **link Esqueceu sua senha?** link óbvio.
+- Link para seus termos de serviço e documentos de política de privacidade: deixe claro para os usuários desde o início como você protege seus dados.
+- Inclua o logotipo e o nome de sua empresa ou organização em suas páginas de inscrição e login e certifique-se de que o idioma, as fontes e os estilos correspondam ao restante do seu site. Alguns formulários não parecem pertencer ao mesmo site de outro conteúdo, especialmente se tiverem um URL significativamente diferente.
+
+## Continue aprendendo {: #resources}
+
+- [Crie formulários incríveis](/learn/forms/)
+- [Melhores práticas para design de formulários para celular](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulário mais capazes](/more-capable-form-controls)
+- [Criação de formulários acessíveis](https://webaim.org/techniques/forms/)
+- [Simplificação do fluxo de login usando a API de gerenciamento de credenciais](https://developer.chrome.com/blog/credential-management-api/)
+- [Verifique os números de telefone na web com a API WebOTP](/web-otp/)
+
+Foto de [Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU) no [Unsplash](https://unsplash.com).
diff --git a/src/site/content/pt/identity/sign-up-form-best-practices/index.md b/src/site/content/pt/identity/sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..d6493aaac92
--- /dev/null
+++ b/src/site/content/pt/identity/sign-up-form-best-practices/index.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: Práticas recomendadas para formulários de inscrição
+subhead: Ajude seus usuários a se inscrever, fazer login e gerenciar os detalhes de suas contas com o mínimo de confusão.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2020-12-11
+description: Ajude seus usuários a se inscrever, fazer login e gerenciar os detalhes de suas contas com o mínimo de confusão.
+hero: image/admin/YfAltWqxvie1SP19BxBj.jpg
+thumbnail: image/admin/7bDPvFWBMFIMynoqDpMc.jpg
+alt: Área de transferência com uma página manuscrita, mostrando a lista de vegetais semeados.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-up-form-best-practices
+---
+
+{% YouTube 'Ev2mCzJZLtY' %}
+
+Se os usuários precisarem fazer login em seu site, um bom design do formulário de inscrição é algo essencial. Isso é especialmente verdadeiro para pessoas com conexões ruins, no celular, com pressa ou sob estresse. Formulários de inscrição mal projetados obtêm altas taxas de rejeição. Cada rejeição pode significar um usuário perdido e insatisfeito, e não apenas uma oportunidade de inscrição perdida.
+
+{% Aside 'codelab' %} Se você preferir aprender essas práticas recomendadas com um tutorial prático, verifique o [codelab de práticas recomendadas para formulários de inscrição](/codelab-sign-up-form-best-practices). {% endAside %}
+
+Aqui está um exemplo de um formulário de inscrição muito simples que demonstra todas as práticas recomendadas:
+
+{% Glitch { id: 'signup-form', path: 'index.html', height: 700 } %}
+
+{% Aside 'caution' %} Esta postagem é sobre as melhores práticas sobre formulários.
+
+Ele não explica como implementar a inscrição por meio de um provedor de identidade de terceiros (login federado) ou mostra como construir serviços de back-end para autenticar usuários, armazenar credenciais e gerenciar contas.
+
+[A integração do login com o Google em seu aplicativo da web](https://developers.google.com/identity/sign-in/web/sign-in) explica como adicionar o login federado às suas opções de inscrição.
+
+As [12 melhores práticas para contas de usuários, autorização e gerenciamento de senhas](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) descrevem os princípios básicos para o back-end ao gerenciar contas de usuários. {% endAside %}
+
+## Lista de verificação
+
+- [Evite fazer login, se puder](#no-forced-sign-in).
+- [Deixe claro como criar uma conta](#obvious-account-creation).
+- [Deixe claro como acessar os detalhes da conta](#obvious-account-details).
+- [Elimine a desordem dos formulários](#cut-clutter).
+- [Considere a duração da sessão](#session-length).
+- [Ajude os gerenciadores de senha a sugerir e armazenar senhas com segurança](#help-password-managers).
+- [Não permita senhas comprometidas](#no-compromised-passwords).
+- [Permita a colagem da senha](#allow-password-pasting).
+- [Nunca armazene ou transmita senhas em texto simples](#salt-and-hash).
+- [Não force atualizações de senha](#no-forced-password-updates).
+- [Simplifique a alteração ou redefinição de senhas](#password-change).
+- [Habilite o login federado](#federated-login).
+- [Facilite a troca de contas](#account-switching).
+- [Considere oferecer autenticação multifator](#multi-factor-authentication).
+- [Cuidado com os nomes de usuário](#username).
+- [Teste em campo e também no laboratório](#analytics-rum).
+- [Teste em uma variedade de navegadores, dispositivos e plataformas](#test-platforms).
+
+## Evite fazer login se puder {: #no-forced-sign-in}
+
+Antes de implementar um formulário de inscrição e pedir aos usuários que criem uma conta em seu site, considere se você realmente precisa disso. Sempre que possível, você deve evitar bloquear recursos por trás do login.
+
+O melhor formulário de inscrição é nenhum formulário de inscrição!
+
+Ao pedir a um usuário para criar uma conta, você se interpõe entre eles e o que estão tentando alcançar. Você está pedindo um favor e pedindo ao usuário que lhe confie dados pessoais. Cada senha e dado que você armazena acarreta uma "dívida de dados" de privacidade e segurança, tornando-se um custo e uma responsabilidade para o seu site.
+
+Se o principal motivo pelo qual você pede aos usuários para criar uma conta é para salvar informações entre navegações ou sessões de navegação, [considere usar o armazenamento do lado do cliente](/storage-for-the-web). Para sites de compras, forçar os usuários a criar uma conta para fazer uma compra é citado como um dos principais motivos para o abandono do carrinho de compras. Você deve [tornar padrão o check-out como convidado](/payment-and-address-form-best-practices#guest-checkout).
+
+## Torne o login óbvio {: #obvious-account-creation}
+
+Deixe claro como criar uma conta em seu site, por exemplo, com um botão **Login** ou **Inscrever-se** no canto superior direito da página. Evite usar um ícone ambíguo ou palavras vagas ("Suba a bordo!", "Junte-se a nós") e não oculte o login em um menu de navegação. O especialista em usabilidade Steve Krug resumiu esta abordagem para a usabilidade de sites: [Não me faça pensar!](https://uxplanet.org/dont-make-me-think-20-wise-thoughts-about-usability-from-steve-krug-876b563f1d63) Se você precisar convencer outras pessoas em sua equipe da web, use [análises](#analytics-rum) para mostrar o impacto das diferentes opções.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KeztoU8KgAqrQ5CKBSWw.jpg", alt="Duas capturas de tela de um site de comércio eletrônico de modelo visualizado em um telefone Android. O da esquerda usa um ícone para o link de login que é um tanto ambíguo; o da direita simplesmente diz 'Fazer login'", width="800", height="737" %} <figcaption>Torne o login óbvio. Um ícone pode ser ambíguo, mas um botão ou link <b>Fazer login</b> é óbvio.</figcaption></figure>
+
+{% Aside %} Você pode estar se perguntando se deseja adicionar um botão (ou link) para criar uma conta e outra para que os usuários existentes façam login. Muitos sites famosos agora simplesmente exibem um único botão de **Login.** Quando o usuário toca ou clica nele, ele também obtém um link para criar uma conta, se necessário. Esse é um padrão comum agora e seus usuários provavelmente o entenderão, mas você pode usar a [análise de interação](#analytics-rum) para monitorar se um único botão funciona melhor ou não. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WUgCNqhEgvoWEVwGjfrA.jpg", alt="Capturas de tela de login para Gmail: uma página, mostrando o botão Sign in, que quando clicado leva a um formulário que também tem um link Criar conta.", width="800", height="545" %} <figcaption>A página de login do Gmail tem um link para criar uma conta.<br> Em tamanhos de janela maiores do que os mostrados aqui, o Gmail exibe um link <b>Login</b> e um botão <b>Criar uma conta.</b></figcaption></figure>
+
+Certifique-se de vincular contas de usuários que se inscreverem por meio de um provedor de identidade como o Google e que também tiverem se inscrito usando e-mail e senha. Isso é fácil de fazer se você puder acessar o endereço de e-mail de um usuário a partir dos dados de perfil do provedor de identidade e combinar as duas contas. O código a seguir mostra como acessar os dados de e-mail de um usuário do Google Sign-in.
+
+```js
+// auth2 é inicializado com gapi.auth2.init()
+if (auth2.isSignedIn.get()) {
+  var profile = auth2.currentUser.get().getBasicProfile();
+  console.log(`Email: ${profile.getEmail()}`);
+}
+```
+
+{: #obvious-account-details}
+
+Depois que o usuário fizer login, deixe claro como acessar os detalhes da conta. Em particular, deixe claro como [alterar ou redefinir as senhas](#password-change).
+
+## Elimine a desordem do formulário {: #cut-clutter}
+
+No fluxo de inscrição, seu trabalho é minimizar a complexidade e manter o foco do usuário. Elimine a desordem. Este não é o momento para distrações e tentações!
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/avoid-distractions.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Não distraia os usuários quando eles estiverem para concluir a inscrição.</figcaption></figure>
+
+Ao inscrever-se, peça o mínimo possível. Colete dados adicionais do usuário (como nome e endereço) apenas quando for necessário e quando o usuário perceber um benefício claro em fornecer esses dados. Lembre-se de que cada dado que você comunica e armazena incorre em custos e responsabilidades.
+
+Não duplique suas entradas apenas para garantir que os usuários acertem seus dados de contato. Isso retarda o preenchimento do formulário e não faz sentido se os campos do formulário forem preenchidos automaticamente. Em vez disso, envie um código de confirmação para o usuário assim que ele inserir seus detalhes de contato e continue com a criação da conta assim que ele responder. Este é um padrão de inscrição comum: os usuários estão acostumados.
+
+Você pode considerar o login sem senha, enviando um código aos usuários sempre que eles se conectarem em um novo dispositivo ou navegador. Sites como Slack e Medium usam uma versão disso.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/medium-sign-in.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Login sem senha em medium.com.</figcaption></figure>
+
+Assim como acontece com o login federado, ele tem a vantagem de não precisar gerenciar senhas de usuários.
+
+## Considere a duração da sessão {: #session-length}
+
+Qualquer que seja a abordagem que você adotar para a identidade do usuário, você precisará tomar uma decisão cuidadosa sobre a duração da sessão: por quanto tempo o usuário permanecerá conectado e o que pode fazer com que você o desconecte.
+
+Considere se seus usuários estão no celular ou desktop, e se eles estão compartilhando no desktop ou compartilhando dispositivos.
+
+{% Aside %} Você pode contornar alguns dos problemas de dispositivos compartilhados impondo a reautenticação para recursos confidenciais, por exemplo, quando uma compra é feita ou uma conta atualizada. Você pode descobrir mais sobre as maneiras de implementar a reautenticação no codelab [Seu primeiro aplicativo WebAuthn](https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0). {% endAside %}
+
+## Ajude os gerentes de senha a sugerir e armazenar senhas com segurança {: #help-password-managers}
+
+Você pode ajudar os gerenciadores de senhas de terceiros e integrados no navegador a sugerir e armazenar senhas para que os usuários não precisem escolher, lembrar ou digitar as senhas eles próprios. Os gerenciadores de senhas funcionam bem em navegadores modernos, sincronizando contas em dispositivos, em aplicativos específicos de plataforma e da web, e para novos dispositivos.
+
+Isso torna extremamente importante codificar os formulários de inscrição corretamente, em particular para usar os valores de preenchimento automático corretos. Para formulários de inscrição, use `autocomplete="new-password"` para novas senhas e adicione valores de autocomplete corretos a outros campos do formulário sempre que possível, como `autocomplete="email"` e `autocomplete="tel"` . Você também pode ajudar os gerenciadores de senha usando diferentes `name` e `id` em formulários de inscrição e inscrição, para o `form` , bem como quaisquer elementos de `input` , `select` e `textarea` .
+
+Você também deve usar o [atributo `type`](https://developer.mozilla.org/docs/Web/HTML/Element/input/email) apropriado para fornecer o teclado certo no celular e habilitar a validação integrada básica pelo navegador. Você pode descobrir mais em [Práticas recomendadas sobre formulários de pagamento e endereço](/payment-and-address-form-best-practices#type).
+
+{% Aside %} [As práticas recomendadas para formulários de login](/sign-in-form-best-practices) têm muito mais dicas sobre como melhorar o design, o layout e a acessibilidade dos formulários, e como codificar os formulários corretamente para aproveitar as vantagens dos recursos integrados do navegador. {% endAside %}
+
+## Certifique-se de que os usuários insiram senhas seguras {: #secure-passwords}
+
+Permitir que os gerenciadores de senhas sugiram senhas é a melhor opção, e você deve encorajar os usuários a aceitar as senhas fortes sugeridas por navegadores e gerenciadores de navegador de terceiros.
+
+No entanto, muitos usuários desejam inserir suas próprias senhas, portanto, é necessário implementar regras para garantir a força da senha. O Instituto Nacional de Padrões e Tecnologia dos EUA explica [como evitar senhas inseguras](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements).
+
+{% Aside 'warning' %} Os formulários de inscrição em alguns sites têm regras de validação de senha que não permitem as senhas fortes geradas por navegadores e gerenciadores de senhas de terceiros. Certifique-se de que seu site não faça isso, pois isso interrompe o preenchimento do formulário, incomoda os usuários e exige que eles criem suas próprias senhas, que podem ser menos seguras do que as geradas pelos gerenciadores de senhas. {% endAside %}
+
+## Não permitir senhas comprometidas {: #no-compromised-passwords}
+
+Quaisquer que sejam as regras que você escolher para as senhas, nunca deve permitir senhas que tenham sido [expostas em violações de segurança](https://haveibeenpwned.com/PwnedWebsites) .
+
+Depois que um usuário inserir uma senha, você precisa verificar se não é uma senha que já tenha sido comprometida. O site [Have I Been Pwned](https://haveibeenpwned.com/Passwords) oferece uma API para verificação de senha, ou você mesmo pode executá-la como um serviço.
+
+O Gerenciador de Senhas do Google também permite que você [verifique se alguma de suas senhas existentes foi comprometida](https://passwords.google.com/checkup).
+
+Se você rejeitar a senha proposta por um usuário, diga a ele especificamente por que ela foi rejeitada. [Mostre os problemas em linha e explique como corrigi-los](https://baymard.com/blog/inline-form-validation) assim que o usuário inserir um valor, e não depois de enviar o formulário de inscrição e ter que esperar por uma resposta do seu servidor.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/password-validation.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Seja claro por que uma senha foi rejeitada.</figcaption></figure>
+
+## Não proíba a colagem de senha {: #allow-password-pasting}
+
+Alguns sites não permitem que o texto seja colado nas entradas de senha.
+
+Não permitir a colagem de senhas irrita os usuários, incentiva as senhas que são memoráveis (e, portanto, podem ser mais fáceis de comprometer) e, de acordo com organizações como o UK National Cyber Security Center, pode na verdade [reduzir a segurança](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords). Os usuários só ficam sabendo que colar não é permitido *depois* de tentarem colar a senha, portanto, [não permitir a colagem de senha não evita vulnerabilidades da área de transferência](https://github.com/OWASP/owasp-masvs/issues/106).
+
+## Nunca armazene ou transmita senhas em texto simples {: #salt-and-hash}
+
+Certifique-se de adicionar senhas [salt and hash](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt) às senhas, [e não tente inventar seu próprio algoritmo de hash](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html)!
+
+## Não force as atualizações de senha {: #no-force-password-updates}
+
+[Não force os usuários a atualizar suas senhas arbitrariamente.](https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers:~:text=Verifiers%20SHOULD%20NOT%20require%20memorized%20secrets%20to%20be%20changed%20arbitrarily%20(e.g.%2C%20periodically).)
+
+Forçar atualizações de senha pode ser caro para os departamentos de TI, irritante para os usuários e [não tem muito impacto na segurança](https://pages.nist.gov/800-63-FAQ/#q-b05). Também é provável que encoraje as pessoas a usarem senhas não seguras e fáceis de memorizar ou a manter um registro físico das senhas.
+
+Em vez de forçar atualizações de senha, você deve monitorar a atividade incomum da conta e avisar os usuários. Se possível, você também deve monitorar as senhas que tenham sido comprometidas devido a violações de dados.
+
+Você também deve oferecer aos seus usuários acesso ao histórico de login da conta, mostrando onde e quando o login ocorreu.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zZXmhWc9bZ1GtvrE5Ooq.jpg", alt="Página de atividade da conta do Gmail", width="800", height="469" %} <figcaption><a href="https://support.google.com/mail/answer/45938?hl=en-GB" title="Descubra como visualizar a atividade da conta do Gmail.">Página de atividade da conta do Gmail</a>.</figcaption></figure>
+
+## Simplifique a alteração ou redefinição de senhas {: #password-change}
+
+Deixe claro para os usuários onde e como **atualizar** a senha da conta. Em alguns sites, isso é surpreendentemente difícil.
+
+Obviamente, você também deve tornar mais simples para os usuários **redefinir** suas senhas caso a esqueçam. O Open Web Application Security Project fornece orientação detalhada sobre [como lidar com senhas perdidas](https://cheatsheetseries.owasp.org/cheatsheets/Forgot_Password_Cheat_Sheet.html).
+
+Para manter sua empresa e seus usuários seguros, é especialmente importante ajudar os usuários a alterar suas senhas se descobrirem que ela foi comprometida. Para tornar isso mais fácil, você deve adicionar um URL [`/.well-known/change-password`](https://w3c.github.io/webappsec-change-password-url/) ao seu site que redireciona para a página de gerenciamento de senha. Isso permite que os gerenciadores de senha levem seus usuários diretamente para a página onde eles poderão alterar suas senhas para o seu site. Este recurso agora está implementado no Safari, Chrome e está chegando a outros navegadores. [Ajude os usuários a alterar as senhas com facilidade adicionando um URL conhecido para alterar as senhas](/change-password-url) explica como implementar isso.
+
+Você também deve simplificar para os usuários a exclusão de suas contas, se assim o desejarem.
+
+## Oferecer login por meio de provedores de identidade terceirizados {: #federated-login}
+
+Muitos usuários preferem fazer login em sites usando um endereço de e-mail e um formulário de inscrição com senha. No entanto, você também deve permitir que os usuários façam login por meio de um provedor de identidade de terceiros, também conhecido como login federado.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jubgwX1shLB7qAIiioTU.jpg", alt="Página de login do WordPress", width="800", height="513" %} <figcaption>Página de login do WordPress, com opções de login do Google e Apple.</figcaption></figure>
+
+Esta abordagem tem várias vantagens. Para usuários que criarem uma conta usando login federado, você não precisa pedir, comunicar ou armazenar senhas.
+
+Você também pode acessar informações adicionais do perfil verificado a partir do login federado, como um endereço de e-mail, o que significa que o usuário não precisa inserir esses dados e você não precisa fazer a verificação sozinho. O login federado também pode facilitar muito para os usuários quando eles tiverem um novo dispositivo.
+
+[A integração do Google Sign-In em seu aplicativo da web](https://developers.google.com/identity/sign-in/web/sign-in) explica como adicionar o login federado às suas opções de inscrição. Há [muitas outras](https://en.wikipedia.org/wiki/Federated_identity#Examples) plataformas de identidade disponíveis.
+
+{% Aside %} A "experiência do primeiro dia" ao adquirir um novo dispositivo é cada vez mais importante. Os usuários esperam fazer login de vários dispositivos, incluindo telefone, laptop, desktop, tablet, TV ou de um carro. Se seus formulários de inscrição e login não forem perfeitos, este é um momento em que você corre o risco de perder usuários, ou pelo menos de perder contato com eles até que sejam configurados novamente. Você precisa agilizar a simplificar o máximo possível para os usuários em novos dispositivos começarem a trabalhar em seu site. Esta é outra área em que o login federado pode ajudar. {% endAside %}
+
+## Torne a troca de contas simples {: #account-switching}
+
+Muitos usuários compartilham dispositivos e trocam de contas usando o mesmo navegador. Quer os usuários acessem o login federado ou não, você deve simplificar essa troca de contas.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sPDZJIY5Vo2ijqyuofCy.jpg", alt="Gmail, mostrando troca de contas", width="800", height="494" %} <figcaption>Troca de conta no Gmail.</figcaption></figure>
+
+## Considere oferecer autenticação multifator {: #autenticação multifator}
+
+A autenticação multifator significa garantir que os usuários forneçam autenticação em mais de uma maneira. Por exemplo, além de exigir que o usuário defina uma senha, você também pode aplicar a verificação usando uma senha única enviada por e-mail ou mensagem de texto SMS ou usando um código único baseado em aplicativo, chave de segurança ou sensor de impressão digital. [Práticas recomendadas de SMS OTP](/sms-otp-form) e [Habilitando autenticação forte com WebAuthn](https://developer.chrome.com/blog/webauthn/) explicam como implementar a autenticação multifator.
+
+Você certamente deve oferecer (ou aplicar) autenticação multifator se seu site lida com informações pessoais ou confidenciais.
+
+## Tome cuidado com os nomes de usuário {: #username}
+
+Não insista em um nome de usuário, a menos (ou até) que você precise de um. Permita que os usuários se inscrevam e façam login apenas com um endereço de e-mail (ou número de telefone) e senha, ou [login federado,](#federated-login) se preferirem. Não os force a escolher e lembrar um nome de usuário.
+
+Se o seu site exige nomes de usuário, não imponha regras irracionais a eles e não impeça os usuários de atualizarem seus nomes de usuário. Em seu back-end, você deve gerar um ID exclusivo para cada conta de usuário, não um identificador baseado em dados pessoais, como nome de usuário.
+
+Certifique-se também de usar `autocomplete="username"` para os nomes de usuário.
+
+{% Aside 'caution' %} Tal como acontece com os nomes pessoais, certifique-se de que os nomes de usuário não estejam restritos a caracteres do [alfabeto latino](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes#Types:~:text=Latin%20alphabet). [As melhores práticas de pagamento e formulário de endereço](/payment-and-address-form-best-practices#unicode-matching) explicam como e por que validar usando correspondência de letras Unicode. {% endAside %}
+
+## Teste em uma variedade de dispositivos, plataformas, navegadores e versões {: #test-plataforms}
+
+Teste os formulários de inscrição nas plataformas mais comuns para seus usuários. A funcionalidade do elemento do formulário pode variar e as diferenças no tamanho da janela de visualização podem causar problemas de layout. O BrowserStack possibilita o [teste gratuito para projetos de código aberto](https://www.browserstack.com/open-source) em uma variedade de dispositivos e navegadores.
+
+## Implemente análises e monitoramento de usuário real {: #analytics-rum}
+
+Você precisa de [dados de campo e também de dados de laboratório](/how-to-measure-speed/#lab-data-vs-field-data) para entender como os usuários experimentam seus formulários de inscrição. Analytics e [Real User Monitoring](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic#Real_User_Monitoring) (RUM) fornecem dados para a experiência real de seus usuários, como quanto tempo as páginas de inscrição levam para carregar, com quais componentes de IU os usuários interagem (ou não) e quanto tempo leva para os usuários concluírem a assinatura acima.
+
+- **Página de análise**: [visualizações de página, taxas de rejeição e saídas](https://analytics.google.com/analytics/academy/course/6) para cada página em seu fluxo de inscrição.
+- **Análise de interação**: [funis de meta](https://support.google.com/analytics/answer/6180923?hl=en) e [eventos](https://developers.google.com/analytics/devguides/collection/gtagjs/events) indicam onde os usuários abandonam o fluxo de inscrição e a proporção de usuários que clicam em botões, links e outros componentes de suas páginas de inscrição.
+- **Desempenho do site**: as [métricas centradas no usuário](/user-centric-performance-metrics) podem dizer se o fluxo de inscrição está lento para carregar ou [visualmente instável](/cls) .
+
+Pequenas mudanças podem fazer uma grande diferença nas taxas de conclusão dos formulários de inscrição. Analytics e RUM permitem que você otimize e priorize mudanças e monitore seu site quanto a problemas que não tenham sido expostos por testes locais.
+
+## Continue aprendendo {: #resources}
+
+- [Práticas recomendadas para formulários de login](/sign-in-form-best-practices)
+- [Práticas recomendadas para formulários de pagamento e endereço](/payment-and-address-form-best-practices)
+- [Crie formulários incríveis](/learn/forms/)
+- [Melhores práticas para design de formulários para celular](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Controles de formulário mais capazes](/more-capable-form-controls)
+- [Criação de formulários acessíveis](https://webaim.org/techniques/forms/)
+- [Simplificando o fluxo de inscrição usando a API de gerenciamento de credenciais](https://developer.chrome.com/blog/credential-management-api/)
+- [Verifique os números de telefone na web com a API WebOTP](/web-otp)
+
+Foto de [@ecowarriorprincess](https://unsplash.com/@ecowarriorprincess) no [Unsplash](https://unsplash.com/photos/lUShu7PHIGA).
diff --git a/src/site/content/pt/identity/sms-otp-form/index.md b/src/site/content/pt/identity/sms-otp-form/index.md
new file mode 100644
index 00000000000..d67daef1517
--- /dev/null
+++ b/src/site/content/pt/identity/sms-otp-form/index.md
@@ -0,0 +1,192 @@
+---
+layout: post
+title: Práticas recomendadas de formulário OTP de SMS
+subhead: Aprenda como otimizar seu formulário OTP de SMS e melhorar a experiência do usuário.
+authors:
+  - agektmr
+date: 2020-12-09
+updated: 2020-12-09
+hero: image/admin/J3XT84NDBPLlsRN0PhLl.jpg
+alt: Um sinal de bolha de néon de chat.
+description: |2-
+
+  Pedir a um usuário para fornecer uma OTP (senha de uso único) entregue via SMS é uma
+
+  maneira comum de confirmar o número de telefone de um usuário. Esta publicação fornece a você o
+
+  práticas recomendadas para construir um formulário SMS OTP com ótima experiência do usuário.
+tags:
+  - identity
+  - security
+  - forms
+---
+
+{% YouTube 'sU4MpWYrGSI' %}
+
+Solicitar a um usuário que forneça a OTP (senha descartável) fornecida por SMS é uma forma comum de confirmar o número de telefone de um usuário. Existem alguns casos de uso para SMS OTP:
+
+- **Autenticação de dois fatores.** Além do nome de usuário e da senha, o SMS OTP pode ser usado como um forte sinal de que a conta pertence à pessoa que recebeu o SMS OTP.
+- **Verificação do número de telefone.** Alguns serviços usam um número de telefone como o identificador principal do usuário. Nesses serviços, o usuário pode inserir seu número de telefone e a OTP recebida por SMS para comprovar sua identidade. Às vezes, ele é combinado com um PIN para constituir uma autenticação de dois fatores.
+- **Recuperação de conta.** Quando um usuário perde o acesso à sua conta, deve haver uma maneira de recuperá-la. Enviar um e-mail para o endereço de e-mail registrado ou um SMS OTP para o número de telefone são métodos comuns de recuperação de conta.
+- **Confirmação de** pagamento Em sistemas de pagamento, alguns bancos ou emissores de cartão de crédito solicitam autenticação adicional do pagador por motivos de segurança. O SMS OTP é comumente usado para esse fim.
+
+Esta postagem explica as práticas recomendadas para construir um formulário SMS OTP para os casos de uso acima.
+
+{% Aside 'caution' %} Embora esta postagem discuta as práticas recomendadas do formulário SMS OTP, esteja ciente de que o SMS OTP não é o método mais seguro de autenticação por si só, porque os números de telefone podem ser reciclados e, às vezes, sequestrados. E [o próprio conceito de OTP não é resistente a phishing](https://youtu.be/kGGMgEfSzMw?t=1133).
+
+Se você está procurando melhor segurança, considere usar o [WebAuthn](https://www.w3.org/TR/webauthn-2/). Saiba mais na palestra "[Quais as novidades em cadastro e login](https://goo.gle/webauthn-video)" da Chrome Dev Summit 2019 e crie uma experiência de reautenticação usando um sensor biométrico com o codelab ["Desenvolver seu primeiro aplicativo WebAuthn"](https://goo.gle/WebAuthnReauthCodelab). {% endAside %}
+
+## Lista de controle
+
+Para fornecer a melhor experiência do usuário com o SMS OTP, siga estas etapas:
+
+- Use o `<input>` com:
+    - `type="text"`
+    - `inputmode="numeric"`
+    - `autocomplete="one-time-code"`
+- Use `@BOUND_DOMAIN #OTP_CODE` como a última linha da mensagem SMS OTP.
+- Use a [API WebOTP](/web-otp/).
+
+## Use o elemento `<input>`
+
+Usar um formulário com um `<input>` é a prática recomendada mais importante que você pode seguir porque funciona em todos os navegadores. Mesmo que outras sugestões desta postagem não funcionem em algum navegador, o usuário ainda poderá inserir e enviar o OTP manualmente.
+
+```html
+<form action="/verify-otp" method="POST">
+  <input type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         pattern="\d{6}"
+         required>
+</form>
+```
+
+A seguir estão algumas idéias para garantir que um campo de entrada obtenha o melhor da funcionalidade do navegador.
+
+### `type="text"`
+
+Como os OTPs são geralmente números de cinco ou seis dígitos, usar `type="number"` para um campo de entrada pode parecer intuitivo porque altera o teclado móvel para apenas números. Isso não é recomendado porque o navegador espera que um campo de entrada seja um número contável em vez de uma sequência de vários números, o que pode causar um comportamento inesperado. Usar `type="number"` faz com que os botões para cima e para baixo sejam exibidos ao lado do campo de entrada; pressionar esses botões aumenta ou diminui o número e pode remover os zeros anteriores.
+
+Em vez disso, use `type="text"`. Isso não transformará o teclado móvel em apenas números, mas não há problemas já que a próxima dica para usar `inputmode="numeric"` faz esse trabalho.
+
+### `inputmode="numeric"`
+
+Use [`inputmode="numeric"`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) para alterar o teclado do celular apenas para números.
+
+Alguns sites usam `type="tel"` para campos de entrada OTP, uma vez que também transforma o teclado do celular apenas em números (incluindo `*` e `#`) quando focado. Este hack foi usado no passado quando `inputmode="numeric"` não era amplamente compatível. Uma vez que o <a href="https://github.com/mdn/browser-compat-data/pull/6782" data-md-type="link">Firefox começou a oferecer suporte para `inputmode="numeric"`</a>, não é necessário usar o hack `type="tel"`
+
+### `autocomplete="one-time-code"`
+
+[`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) atributo autocomplete permite que os desenvolvedores especifiquem qual permissão o navegador tem para fornecer assistência ao autocomplete e informa o navegador sobre o tipo de informação esperada no campo.
+
+Com `autocomplete="one-time-code"` sempre que um usuário recebe uma mensagem SMS enquanto um formulário está aberto, o sistema operacional irá analisar o OTP no SMS heuristicamente e o teclado irá sugerir o OTP para o usuário inserir. Funciona apenas no Safari 12 e posterior no iOS, iPadOS e macOS, mas é altamente recomendável usá-lo, porque é uma maneira fácil de melhorar a experiência de SMS OTP nessas plataformas.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>`autocomplete ="one-time-code"` em ação.</figcaption></figure>
+
+O `autocomplete="one-time-code"` melhora a experiência do usuário, mas você pode fazer mais [garantindo que a mensagem SMS está em conformidade com o formato de mensagem vinculado à origem](#format).
+
+{% Aside %} Atributos opcionais:
+
+- [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern) especifica o formato que o OTP inserido deve corresponder. Use expressões regulares para especificar o padrão de correspondência, por exemplo, `\d{6}` restringe o OTP a uma string de seis dígitos. Saiba mais sobre o `pattern` em [Use JavaScript para validação mais complexa em tempo real] (https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)
+
+- [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) indica que um campo é obrigatório.
+
+Para melhores práticas de formulário mais gerais, as melhores práticas de formulário de [login de](/sign-in-form-best-practices/) [Sam Dutton](/authors/samdutton/) são um excelente ponto de partida. {% endAside %}
+
+## Formate o texto SMS {: #format}
+
+Aprimore a experiência do usuário ao entrar em uma OTP alinhando-se aos [códigos únicos vinculados à origem entregues por meio de especificação de SMS](https://wicg.github.io/sms-one-time-codes/).
+
+A regra de formatação é simples: termine a mensagem SMS com o domínio do destinatário precedido de `@` e o OTP precedido de `#`.
+
+Por exemplo:
+
+```text
+Your OTP is 123456
+
+@web-otp.glitch.me #123456
+```
+
+Usar um formato padrão para mensagens OTP torna a extração de códigos delas mais fácil e confiável. A associação de códigos OTP a sites torna mais difícil enganar os usuários para que forneçam um código a sites maliciosos.
+
+{% Aside %} As regras precisas são:
+
+- A mensagem começa com um texto legível (opcional) que contém uma sequência alfanumérica de quatro a dez caracteres com pelo menos um número, deixando a última linha para o URL e o OTP.
+- A parte do domínio do URL do site que invocou a API deve ser precedida por `@`.
+- O URL deve conter um sinal de libra (" `#` ") seguido pelo OTP.
+
+Certifique-se de que o número de caracteres não exceda 140 no total.
+
+Para saber mais sobre as regras específicas do Chrome, leia [a seção Formatar a mensagem SMS da postagem da API WebOTP](/web-otp/#format). {% endAside %}
+
+Usar este formato oferece alguns benefícios:
+
+- O OTP será vinculado ao domínio. Se o usuário estiver em domínios diferentes do especificado na mensagem SMS, a sugestão de OTP não aparecerá. Isso também reduz o risco de ataques de phishing e possíveis sequestros de contas.
+- O navegador agora será capaz de extrair o OTP de maneira confiável, sem depender de heurísticas misteriosas e instáveis.
+
+Quando um site usa `autocomplete="one-time-code"`, o Safari com iOS 14 ou posterior irá sugerir o OTP seguindo as regras acima.
+
+{% Aside %} Se o usuário estiver em um desktop com macOS Big Sur com a mesma conta iCloud configurada no iOS, o OTP recebido no dispositivo iOS também estará disponível no Safari para desktop.
+
+Para saber mais sobre outros benefícios e nuances da disponibilidade nas plataformas Apple, leia [Aprimore a segurança do código fornecido por SMS com códigos vinculados ao domínio](https://developer.apple.com/news/?id=z0i801mg). {% endAside %}
+
+Este formato de mensagem SMS também beneficia outros navegadores além do Safari. Chrome, Opera e Vivaldi no Android também oferecem suporte para a regra de códigos únicos vinculados à origem com a API WebOTP, embora não por meio de `autocomplete="one-time-code"`.
+
+## Use a API WebOTP
+
+[A API WebOTP](https://wicg.github.io/web-otp/) fornece acesso ao OTP recebido em uma mensagem SMS. Ao chamar [`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get) com o tipo `otp` `OTPCredential`) onde o `transport` inclui `sms`, o site aguardará que um SMS que está em conformidade com os códigos únicos vinculados à origem seja entregue e tenha acesso concedido pelo usuário. Depois que o OTP é passado para o JavaScript, o site pode usá-lo em um formulário ou POST diretamente no servidor.
+
+{% Aside 'caution' %} A API WebOTP exige uma origem segura (HTTPS). {% endAside %}
+
+```js
+navigator.credentials.get({
+  otp: {transport:['sms']}
+})
+.then(otp => input.value = otp.code);
+```
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>API WebOTP em ação.</figcaption></figure>
+
+Aprenda a usar a API WebOTP detalhadamente em [Verificar números de telefone na web com a API WebOTP](/web-otp/) ou copie e cole o seguinte snippet. (Certifique-se de que o `<form>` tenha um `action` e `method` devidamente definido.)
+
+```js
+// Feature detection
+if ('OTPCredential' in window) {
+  window.addEventListener('DOMContentLoaded', e => {
+    const input = document.querySelector('input[autocomplete="one-time-code"]');
+    if (!input) return;
+    // Cancel the WebOTP API if the form is submitted manually.
+    const ac = new AbortController();
+    const form = input.closest('form');
+    if (form) {
+      form.addEventListener('submit', e => {
+        // Cancel the WebOTP API.
+        ac.abort();
+      });
+    }
+    // Invoke the WebOTP API
+    navigator.credentials.get({
+      otp: { transport:['sms'] },
+      signal: ac.signal
+    }).then(otp => {
+      input.value = otp.code;
+      // Automatically submit the form when an OTP is obtained.
+      if (form) form.submit();
+    }).catch(err => {
+      console.log(err);
+    });
+  });
+}
+```
+
+Foto de [Jason Leung](https://unsplash.com/photos/mZNRsYE9Qi4) no [Unsplash](https://unsplash.com).
diff --git a/src/site/content/pt/index.11tydata.js b/src/site/content/pt/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/pt/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/pt/index.md b/src/site/content/pt/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/pt/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/pt/lang.js b/src/site/content/pt/lang.js
new file mode 100644
index 00000000000..de4ff82dcd8
--- /dev/null
+++ b/src/site/content/pt/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'pt',
+  locale: 'pt_BR',
+};
diff --git a/src/site/content/pt/learn-core-web-vitals/index.md b/src/site/content/pt/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/pt/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/pt/learn/css/box-model/box-model.assess.yml b/src/site/content/pt/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/pt/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/pt/learn/css/box-model/index.md b/src/site/content/pt/learn/css/box-model/index.md
new file mode 100644
index 00000000000..ee49f1e13cc
--- /dev/null
+++ b/src/site/content/pt/learn/css/box-model/index.md
@@ -0,0 +1,163 @@
+---
+title: Modelo de caixa
+description: |2-
+
+  Tudo o que é exibido pelo CSS é uma caixa.
+  Entender como funciona o CSS Box Model é, portanto, a base principal do CSS.
+audio:
+  title: 'The CSS Podcast   - 001: The Box Model'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Digamos que você tenha este trecho de HTML:
+
+```html
+<p>I am a paragraph of text that has a few words in it.</p>
+```
+
+Então você escreve este CSS para ele:
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+O conteúdo sairia do seu elemento e teria 142 pixels de largura, em vez de 100 pixels. Por quê? O modelo de caixa é a base central do CSS, e entender como ele funciona, como é afetado por outros aspectos do CSS e, o mais importante, como você pode controlá-lo ajudará a escrever um CSS mais previsível.
+
+<figure>{% Codepen {user: 'web-dot-dev', id: 'WNRemxN', height: 300}%}</figure>
+
+Uma coisa muito importante para lembrar ao escrever o CSS, ou trabalhar na web como um todo, é que tudo que será exibido pelo CSS é uma caixa. Seja uma caixa que usa `border-radius` para se parecer com um círculo, seja apenas um texto: o mais importante a considerar é que tudo são caixas.
+
+## Conteúdo e dimensionamento
+
+As caixas têm comportamentos diferentes com base em seu valor de `display`, suas dimensões definidas e o conteúdo que elas contêm. Esse conteúdo pode ser ainda mais caixas - geradas por elementos filho - ou conteúdo de texto simples. De qualquer forma, afetará o tamanho da caixa por padrão.
+
+Você pode controlar isso usando o **dimensionamento extrínseco** ou continuar a permitir que o navegador tome decisões por você com base no tamanho do conteúdo, usando o **dimensionamento intrínseco**.
+
+Vamos ver rapidamente a diferença, usando uma demonstração para nos ajudar.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' }%}<figcaption> Observe que, quando a caixa está usando dimensionamento extrínseco, há um limite de quanto conteúdo você pode adicionar antes que ultrapasse os limites da caixa. Isso faz com que a palavra "incrível" cause um estouro.</figcaption></figure>
+
+A demonstração traz as palavras, "CSS é incrível" em uma caixa com dimensões fixas e uma borda grossa. A caixa tem uma largura, portanto é extrinsecamente dimensionada. Ela controla o dimensionamento de seu conteúdo filho. Porém, o problema disso é que a palavra "incrível" é muito grande para a caixa, causando estouro na **borda** da caixa pai (mais sobre isso mais tarde na lição). Uma maneira de evitar esse estouro é permitir que a caixa seja intrinsecamente dimensionada ao remover a largura ou, neste caso, definir `width` para `min-content`. `min-content` diz à caixa que seja tão larga quanto a largura mínima intrínseca de seu conteúdo (a palavra "incrível"). Isso permite que a caixa se encaixe perfeitamente na mensagem "CSS é incrível".
+
+Vejamos algo mais complexo para ver o impacto de diferentes tamanhos no conteúdo real:
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+Ative e desative o dimensionamento intrínseco para ver como você pode obter mais controle com o dimensionamento extrínseco e permitir que o conteúdo tenha mais controle com o dimensionamento intrínseco. Para ver o efeito dos dimensionamentos intrínseco e extrínseco, adicione algumas frases de conteúdo ao cartão. Quando esse elemento está usando dimensionamento extrínseco, há um limite de quanto conteúdo você pode adicionar antes que ultrapasse os limites do elemento, mas esse não é o caso quando o dimensionamento intrínseco é ativado.
+
+Por padrão, este elemento tem `width` e `height` e `400px` definidos. Essas dimensões fornecem limites estritos para tudo dentro do elemento, o que será respeitado, a menos que o conteúdo seja muito grande para a caixa, caso em que ocorrerá uma sobrecarga visível. Você pode ver isso em ação alterando o conteúdo da legenda, sob a imagem da flor, para algo que exceda a altura da caixa, que são algumas linhas de conteúdo.
+
+{% Aside "key-term" %} Quando o conteúdo é muito grande para a caixa em que se encontra, chamamos isso de estouro. Você pode gerenciar como um elemento lida com o conteúdo de estouro, usando a propriedade `overflow` {% endAside %}
+
+Quando você muda para o tamanho intrínseco, permite que o navegador tome decisões por você, com base no tamanho do conteúdo da caixa. É muito mais difícil haver estouro de dimensionamento intrínseco porque nossa caixa será redimensionada com seu conteúdo, em vez de tentar dimensionar o conteúdo. É importante lembrar que esse é o comportamento padrão e flexível de um navegador. Embora o dimensionamento extrínseco forneça mais controle na superfície, o dimensionamento intrínseco fornece a maior flexibilidade, na maioria das vezes.
+
+## As áreas do modelo de caixa
+
+As caixas são compostas por áreas de modelo de caixa distintas que fazem um trabalho específico.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="Um diagrama que mostra as quatro áreas principais do modelo de caixa: caixa de conteúdo, caixa de preenchimento, caixa de borda e caixa de margem", width="800", height="547" %}<figcaption>As quatro áreas principais do modelo de caixa: caixa de conteúdo, caixa de preenchimento, caixa de borda e caixa de margem.</figcaption></figure>
+
+Você começa com a **caixa de conteúdo**, que é a área em que o conteúdo está localizado. Como você já aprendeu, esse conteúdo pode controlar o tamanho de seu pai, então geralmente é a área de tamanho mais variável.
+
+A **caixa de preenchimento** envolve a caixa de conteúdo e é o espaço criado pela propriedade [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding). Como o preenchimento está dentro da caixa, o plano de fundo da caixa ficará visível no espaço que ela cria. Se nossa caixa tiver regras de estouro definidas, como `overflow: auto` ou `overflow: scroll`, as barras de rolagem também ocuparão esse espaço.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+A **caixa de borda** envolve a caixa de preenchimento e seu espaço é ocupado pelo valor de `border`. A caixa de borda são os limites de sua caixa e a **borda da borda** é o limite do que você pode ver visualmente. <a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a> é usada para enquadrar visualmente um elemento.
+
+A área final, a **caixa de margem**, é o espaço ao redor de sua caixa, definido pela regra `margin` em sua caixa. Propriedades como [`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) e [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) ocupam esse espaço porque são pintadas na parte superior, de modo que não afetam o tamanho da caixa. Você poderia ter uma `outline-width` de `200px` em nossa caixa e tudo dentro dela, incluindo a caixa de borda, teria exatamente o mesmo tamanho.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea'} %}</figure>
+
+## Uma analogia útil
+
+O modelo de caixa é complexo de entender, então vamos recapitular o que você aprendeu com uma analogia.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="Três molduras de foto", width = "800", height ="562" %}</figure>
+
+Neste diagrama, você tem três molduras de fotos, montadas em uma parede, uma ao lado da outra. O diagrama possui rótulos que associam elementos da moldura ao modelo da caixa.
+
+Para decompor essa analogia:
+
+- A caixa de conteúdo é a obra de arte.
+- A caixa de preenchimento é o fosco branco, entre a moldura e a arte.
+- A caixa de borda é a moldura, fornecendo uma borda literal para a obra de arte.
+- A caixa de margem é o espaço entre cada quadro.
+- A sombra ocupa o mesmo espaço que a caixa de margem.
+
+## Depurando o modelo de caixa
+
+O navegador DevTools fornece uma visualização dos cálculos do modelo de caixa de uma caixa selecionada, o que pode ajudar a entender como o modelo de caixa funciona e, o mais importante, como está afetando o site em que você está trabalhando.
+
+Vá em frente e tente isso em seu próprio navegador:
+
+1. [Abra o DevTools](https://developer.chrome.com/docs/devtools/open/)
+2. [Selecione um elemento](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. Exiba o depurador de modelo de caixa
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## Controlando o modelo de caixa
+
+Para entender como controlar o modelo de caixa, primeiro você precisa entender o que acontece no seu navegador.
+
+Cada navegador aplica uma folha de estilo de agente do usuário a documentos HTML. O CSS usado varia entre cada navegador, mas eles fornecem padrões razoáveis para tornar o conteúdo mais fácil de ler. Eles definem como os elementos devem se parecer e se comportar se não houver CSS definido. É nos estilos de agente do usuário que a `display` padrão de uma caixa também é definida. Por exemplo, se estivermos em um fluxo normal, o valor de `display` padrão de um elemento `<div>` `block` , a `<li>` tem um valor de `display` `list-item` e um `<span>` tem um valor de `display` `inline`.
+
+Uma `inline` tem margem de bloco, mas outros elementos não o respeitarão. Use o `inline-block` e esses elementos respeitarão a margem do bloco, enquanto o elemento mantém a maioria dos mesmos comportamentos que tinha como um elemento `inline` Um `block` irá, por padrão, preencher o **espaço embutido** disponível, enquanto os elementos `inline-block` e `inline` serão tão grandes quanto seu conteúdo.
+
+Além de compreender como os estilos de agente do usuário afetam cada caixa, você também precisa entender a `box-sizing`, que informa à nossa caixa como calcular o tamanho da caixa. Por padrão, todos os elementos têm o seguinte estilo de agente do usuário: `box-sizing: content-box;`.
+
+Ter `content-box` como o valor de `box-sizing` significa que, quando você definir dimensões, como `width` e `height`, serão aplicadas à **caixa de conteúdo**. Se você definir a `padding` e a `border`, esses valores serão adicionados ao tamanho da caixa de conteúdo.
+
+{% Assessment 'box-model' %}
+
+A largura real desta caixa será 260px. Como o CSS usa a `box-sizing: content-box` padrão, a largura aplicada é a largura do conteúdo, `padding` e `border` em ambos os lados são adicionados. Portanto, 200px para o conteúdo + 40px de preenchimento + 20px de borda perfaz uma largura visível total de 260px.
+
+Contudo, você *pode* controlar isso, fazendo a seguinte modificação para usar o modelo de caixa alternativo, `border-box`:
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+Este modelo de caixa alternativa diz ao CSS que aplique a `width` na caixa de borda em vez de na caixa de conteúdo. Isso significa que nossa `border` e `padding` são *forçados*. Como resultado, quando você define `.my-box` para ter `200px` de largura: na verdade, ele é renderizado com `200px` de largura.
+
+Veja como isso funciona na demonstração interativa a seguir. Observe que, quando você ativa ou desativa a `box-sizing`, é exibido - por meio de um fundo azul - qual CSS está sendo aplicado *dentro* da nossa caixa.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+Esta regra CSS seleciona todos os elementos no documento e todos os pseudo elementos `::before` e `::after` `box-sizing: border-box` . Isso significa que cada elemento agora terá esse modelo de caixa alternativo.
+
+Como o modelo de caixa alternativo pode ser mais previsível, os desenvolvedores geralmente adicionam essa regra a redefinições e normalizadores, [como neste caso](https://piccalil.li/blog/a-modern-css-reset).
+
+## Recursos
+
+- [Introdução ao modelo de caixa](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [O que são ferramentas de desenvolvedor de navegador?](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### Folhas de estilo de agente do usuário
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/pt/learn/css/css.11tydata.js b/src/site/content/pt/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/pt/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/pt/learn/css/flexbox/conclusion.assess.yml b/src/site/content/pt/learn/css/flexbox/conclusion.assess.yml
new file mode 100644
index 00000000000..77e1b54b62a
--- /dev/null
+++ b/src/site/content/pt/learn/css/flexbox/conclusion.assess.yml
@@ -0,0 +1,61 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To vertically align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Nice"
+      - content: "justify keywords"
+        rationale: "Sorry"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: To horizonally align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Sorry"
+      - content: "justify keywords"
+        rationale: "Nice"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: |
+      By default, flex items are aligned to `stretch`. If you want content
+      size used for child items, which of the following styles would you use?
+    options:
+      - content: "`justify-content: flex-start`"
+        rationale: "The justify property is for horizontal alignment, not
+        vertical."
+      - content: "`align-content: start`"
+        rationale: "`content` aligns flex lines, not child item alignment."
+      - content: "`height: auto`"
+        rationale: "This will have no effect."
+      - content: "`align-items: flex-start`"
+        rationale: "Yes, we want to vertically align them to the 'top' or start,
+        which removes the default stretch value and instead uses the content
+        height."
diff --git a/src/site/content/pt/learn/css/flexbox/flex.assess.yml b/src/site/content/pt/learn/css/flexbox/flex.assess.yml
new file mode 100644
index 00000000000..a264d9e9016
--- /dev/null
+++ b/src/site/content/pt/learn/css/flexbox/flex.assess.yml
@@ -0,0 +1,40 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The default `flex-direction` is
+    options:
+      - content: "`row`"
+        rationale: "By default, flexbox will fit items into a row, lining them
+        up at the start. With wrapping turned on, it will continue creating rows
+        for children to flow within."
+      - content: "`column`"
+        rationale: "Setting flex-direction to column is a great way to stack
+        elements, but it is not the default value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default, a flex container wraps children.
+    options:
+      - content: "true"
+        rationale: "Wrapping must be enabled."
+      - content: "false"
+        rationale: "Use `flex-wrap: wrap` with `display: flex` to wrap children"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: A flex child item appears squished, which flex property helps mitigate this?
+    options:
+      - content: "`flex-grow`"
+        rationale: "This property describes if elements can grow beyond a basis
+        size, not how it should behave under a basis."
+      - content: "`flex-shrink`"
+        rationale: "Yes, this property describes how to handle sizing if the
+        width is going below the basis."
+      - content: "`flex-basis`"
+        rationale: "This provides the starting point of sizing, but not how to
+        handle sizing scenarios where width goes below basis, like in a squished
+        scenario."
diff --git a/src/site/content/pt/learn/css/flexbox/index.md b/src/site/content/pt/learn/css/flexbox/index.md
new file mode 100644
index 00000000000..654ba16a17c
--- /dev/null
+++ b/src/site/content/pt/learn/css/flexbox/index.md
@@ -0,0 +1,377 @@
+---
+title: Flexbox
+description: |2
+
+  Flexbox é um mecanismo de layout projetado para organizar grupos de itens em uma dimensão.
+  Aprenda como usá-lo neste módulo.
+audio:
+  title: 'O CSS Podcast   - 010: Flexbox'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-21
+---
+
+Um padrão de design que pode ser complicado em design responsivo é uma barra lateral que fica alinhada com algum conteúdo. Onde há espaço de janela de visualização, esse padrão funciona muito bem, mas onde o espaço é condensado, esse layout rígido pode se tornar problemático.
+
+{% Codepen { user: 'web-dot-dev', id: 'poRENWv', height: 420 } %}
+
+O modelo de layout de caixa flexível (flexbox) é um modelo de layout projetado para conteúdo unidimensional. Ele se destaca em pegar vários itens de tamanhos diferentes e retornar o melhor layout para esses itens.
+
+Este é o modelo de layout ideal para este padrão de barra lateral. O Flexbox não apenas ajuda a colocar a barra lateral e o conteúdo em linha, mas onde não há espaço suficiente restante, a barra lateral se quebra em uma nova linha. Em vez de definir dimensões rígidas para o navegador seguir, com o flexbox, você pode fornecer limites flexíveis para sugerir como o conteúdo pode ser exibido.
+
+{% Codepen {user: 'web-dot-dev', id: 'xxgERMp', height: 400}%}
+
+## O que você pode fazer com um layout flexível?
+
+Os layouts flexíveis possuem os seguintes recursos, que você poderá explorar neste guia.
+
+- Eles podem ser exibidos como uma linha ou coluna.
+- Eles respeitam o modo de escrita do documento.
+- Eles são uma linha por padrão, mas podem ser solicitados a quebrar em várias linhas.
+- Os itens no layout podem ser reordenados visualmente, longe de sua ordem no DOM.
+- O espaço pode ser distribuído dentro dos itens, de forma que eles fiquem maiores e menores de acordo com o espaço disponível em seus pais.
+- O espaço pode ser distribuído ao redor dos itens e linhas flexíveis em um layout encapsulado, usando as propriedades do Alinhamento de caixa.
+- Os próprios itens podem ser alinhados no eixo transversal.
+
+## O eixo principal e o eixo transversal
+
+A chave para entender o flexbox é entender o conceito de eixo principal e eixo transversal. O eixo principal é aquele definido por sua propriedade `flex-direction` Se for `row` seu eixo principal está ao longo da linha, se for `column` seu eixo principal está ao longo da coluna.
+
+<figure>{% Img src = "image/VbAJIREinuYvovrBzzvEyZOpw5w1/xKtf0cHRw0xQyiyYuuyz.svg", alt = "Três caixas próximas umas das outras com uma seta apontando da esquerda para a direita. A seta é rotulada como Eixo principal", width = "800", height = " 320 "%}</figure>
+
+Os itens flexíveis se movem como um grupo no eixo principal. Lembre-se: temos um monte de coisas e estamos tentando obter o melhor layout para eles como um grupo.
+
+O eixo cruzado corre na direção oposta ao eixo principal, portanto, se `flex-direction` for `row` o eixo cruzado corre ao longo da coluna.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/5wCsZcBmK5L33LS7nOmP.svg", alt="Três caixas de alturas diferentes, uma ao lado da outra com uma seta apontando da esquerda para a direita. A seta está rotulada como Eixo principal. inferior. Este é rotulado como eixo cruzado", width="800", height="320" %}</figure>
+
+Você pode fazer duas coisas no eixo transversal. Você pode mover os itens individualmente ou como um grupo para que eles se alinhem uns com os outros e com o contêiner flexível. Além disso, se você encapsulou as linhas flexíveis, pode tratar essas linhas como um grupo para controlar como o espaço é atribuído a essas linhas. Você verá como tudo isso funciona na prática ao longo deste guia, por enquanto, apenas tenha em mente que o eixo principal segue sua `flex-direction`.
+
+## Criação de um contêiner flexível
+
+Vamos ver como o flexbox se comporta pegando um grupo de itens de diferentes tamanhos e usando o flexbox para distribuí-los.
+
+```html
+<div class="container" id="container">
+  <div>One</div>
+  <div>Item two</div>
+  <div>The item we will refer to as three</div>
+</div>
+```
+
+Para usar o flexbox, você precisa declarar que deseja usar um contexto de formatação flexível e não bloco regular e layout embutido. Faça isso alterando o valor da propriedade `display` `flex` .
+
+```css
+.container {
+  display: flex;
+}
+```
+
+Como você aprendeu no [guia de layout,](/learn/css/layout) isso lhe dará uma caixa em nível de bloco, com filhos de itens flexíveis. Os itens flex imediatamente começam a exibir algum comportamento do flexbox, usando seus **valores iniciais**.
+
+{% Aside %} Todas as propriedades CSS têm valores iniciais que controlam como se comportam "fora da caixa" quando você não aplicou nenhum CSS para alterar esse comportamento inicial. Os filhos de nosso contêiner flexível tornam-se itens flex assim que seu pai recebe `display: flex`, então esses valores iniciais significam que começamos a ver algum comportamento do flexbox. {% endAside %}
+
+Os valores iniciais significam que:
+
+- Os itens são exibidos como uma linha.
+- Eles não se enrolam.
+- Eles não crescem para encher o recipiente.
+- Eles se alinham no início do contêiner.
+
+## Controlando a direção dos itens
+
+Mesmo que você não tenha adicionado uma `flex-direction` ainda, os itens são exibidos como uma linha porque o valor inicial de `flex-direction` é `row`. Se você quiser uma linha, não precisa adicionar a propriedade. Para alterar a direção, adicione a propriedade e um dos quatro valores:
+
+- `row` : os itens são dispostos como uma fileira.
+- `row-reverse:` os itens são dispostos como uma linha a partir do final do contêiner flexível.
+- `column` : os itens são dispostos como uma coluna.
+- `column-reverse` : os itens são dispostos como uma coluna a partir do final do contêiner flexível.
+
+Você pode experimentar todos os valores usando nosso grupo de itens na demonstração abaixo.
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgKNXq' } %}
+
+### Reverter o fluxo de itens e acessibilidade
+
+Você deve ter cuidado ao usar quaisquer propriedades que reordenem a exibição visual de como as coisas estão ordenadas no documento HTML, pois isso pode afetar negativamente a acessibilidade. Os `column-reverse` `row-reverse` coluna são um bom exemplo disso. O reordenamento só acontece para a ordem visual, não para a ordem lógica. É importante entender isso porque a ordem lógica é a ordem em que um leitor de tela lerá o conteúdo e qualquer pessoa que navegue usando o teclado a seguirá.
+
+Você pode ver no vídeo a seguir como, em um layout de coluna invertido, a tabulação entre os links se desconecta, pois a navegação do teclado segue o DOM e não a exibição visual.
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4", autoplay=true, controls=true %}
+
+Qualquer coisa que possa alterar a ordem dos itens no flexbox ou na grade pode causar esse problema. Portanto, qualquer reordenamento deve incluir testes completos para verificar se isso não tornará o seu site difícil de usar para algumas pessoas.
+
+Para mais informações, veja:
+
+- [Reordenação de conteúdo](/content-reordering/)
+- [O Flexbox e a navegação do teclado se desconectam](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+
+### Modos e direção de escrita
+
+Os itens flexíveis são dispostos como uma linha por padrão. Uma linha segue na direção em que as frases fluem em seu modo de escrita e na direção do script. Isso significa que se você estiver trabalhando em árabe, que tem uma direção de script da direita para a esquerda (rtl), os itens serão alinhados à direita. A ordem das tabulações também começa à direita, pois é assim que as frases são lidas em árabe.
+
+{% Codepen {user: 'web-dot-dev', id: 'ExZgwWN'}%}
+
+Se você estiver trabalhando com um modo de escrita vertical, como algumas fontes japonesas, uma linha será exibida verticalmente, de cima para baixo. Tente mudar a `flex-direction` neste demo que está usando um modo de escrita vertical.
+
+{% Codepen {user: 'web-dot-dev', id: 'qBRaPXX', height: 600}%}
+
+Portanto, a maneira como os flex items se comportam por padrão está vinculada ao modo de escrita do documento. A maioria dos tutoriais é escrita em inglês ou outro modo de escrita horizontal, da esquerda para a direita. Isso tornaria mais fácil presumir que os itens flexíveis se alinham **à esquerda** e rodam **horizontalmente**.
+
+Com o eixo principal e cruzado mais o modo de escrita a ser considerado, o fato de falarmos sobre **início** e **fim em** vez de topo, base, esquerda e direita no flexbox pode ser mais fácil de entender. Cada eixo tem um início e um fim. O início do eixo principal é conhecido como **início principal**. Portanto, nossos itens flexíveis inicialmente se alinham do main-start. O fim desse eixo é o **fim principal**. O início do eixo cruzado é um **início cruzado** e o final um **final cruzado**.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg", alt="Um diagrama rotulado dos termos acima", width="800", height="382" %}
+
+## Envolvendo itens flexíveis
+
+O valor inicial da propriedade `flex-wrap` `nowrap`. Isso significa que, se não houver espaço suficiente no contêiner, os itens transbordarão.
+
+<figure>{% Img src = "image/VbAJIREinuYvovrBzzvEyZOpw5w1/VTUdLS9PeBziBvbOSc4q.jpg", alt = "Um contêiner flexível com nove itens dentro, os itens diminuíram de modo que uma palavra está em uma linha, mas não há espaço suficiente para mostrá-los lado a lado para que os itens flexíveis tenham se estendido para fora da caixa do contêiner. ", width =" 800 ", height =" 282 "%}<figcaption> Assim que atingirem o tamanho mínimo do conteúdo, os itens flexíveis começarão a estourar seu contêiner</figcaption></figure>
+
+Os itens exibidos com os valores iniciais serão reduzidos o máximo possível, até o `min-content` antes que ocorra o estouro.
+
+Para fazer com que os itens embrulhem, adicione `flex-wrap: wrap` ao contêiner flexível.
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+{% Codepen {user: 'web-dot-dev', id: 'WNRGdNZ', height: 601}%}
+
+Quando um contêiner flexível é enrolado, ele cria várias **linhas flexíveis**. Em termos de distribuição de espaço, cada linha atua como um novo contêiner flexível. Portanto, se você estiver agrupando linhas, não é possível fazer com que algo na linha 2 se alinhe com algo acima dela na linha 1. Isso é o que significa que o flexbox é unidimensional. Você pode controlar o alinhamento em um eixo, uma linha ou uma coluna, não os dois juntos como podemos fazer na grade.
+
+### A abreviação do flex-flow
+
+Você pode definir as propriedades `flex-direction` e `flex-wrap` usando a abreviação `flex-flow`. Por exemplo, para definir `flex-direction` para `column` e permitir que os itens sejam agrupados:
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+## Controlando o espaço dentro dos itens flexíveis
+
+Supondo que nosso contêiner tenha mais espaço do que o necessário para exibir os itens, os itens se alinham no início e não crescem para preencher o espaço. Eles param de crescer em seu tamanho máximo de conteúdo. Isso ocorre porque o valor inicial das `flex-` é:
+
+- `flex-grow: 0` : os itens não crescem.
+- `flex-shrink: 1` : os itens podem encolher até menos do que sua `flex-basis`.
+- `flex-basis: auto` : os itens têm um tamanho base de `auto`.
+
+Isso pode ser representado por um valor de palavra-chave `flex:initial`. A `flex` shorthand, ou as longhands de `flex-grow`, `flex-shrink` e `flex-basis` são aplicadas aos filhos do contêiner flexível.
+
+{% Codepen {user: 'web-dot-dev', id: 'LYxRebE'}%}
+
+Para fazer com que os itens cresçam, enquanto permite que itens grandes tenham mais espaço do que os pequenos, use `flex:auto`. Você pode tentar fazer isso usando a demonstração acima. Isso define as propriedades para:
+
+- `flex-grow: 1` : os itens podem crescer mais do que sua `flex-basis`.
+- `flex-shrink: 1` : os itens podem encolher até menos do que sua `flex-basis`.
+- `flex-basis: auto` : os itens têm um tamanho base de `auto`.
+
+Usar `flex: auto` significará que os itens terão tamanhos diferentes, já que o espaço que é compartilhado entre os itens é compartilhado *depois que* cada item é disposto como tamanho máximo do conteúdo. Portanto, um item grande ganhará mais espaço. Para forçar todos os itens a terem um tamanho consistente e ignorar o tamanho do conteúdo, altere `flex:auto` para `flex: 1` na demonstração.
+
+Isso descompacta para:
+
+- `flex-grow: 1` : os itens podem crescer mais do que sua `flex-basis`.
+- `flex-shrink: 1` : os itens podem encolher até menos do que sua `flex-basis`.
+- `flex-basis: 0` : os itens têm um tamanho base de `0`.
+
+Usando `flex: 1` diz que todos os itens têm tamanho zero, portanto, todo o espaço no contêiner flexível está disponível para ser distribuído. Como todos os itens têm um fator de `flex-grow` `1`, todos eles crescem igualmente e o espaço é compartilhado igualmente.
+
+{% Aside %} Também existe um valor de `flex: none`, o que lhe dará itens flex inflexíveis que não aumentam ou diminuem. Isso pode ser útil se você estiver usando apenas o flexbox para acessar as propriedades de alinhamento, mas não quiser nenhum comportamento flexível. {% endAside %}
+
+### Permitindo que os itens cresçam em taxas diferentes
+
+Você não precisa dar a todos os itens um fator de `flex-grow` `1`. Você pode dar aos seus itens flexíveis diferentes fatores de `flex-grow`. Na demonstração abaixo, o primeiro item tem `flex: 1`, o segundo `flex: 2` e o terceiro `flex: 3`. Conforme esses itens crescem de `0` o espaço disponível no contêiner flexível é dividido em seis. Uma parte é dada ao primeiro item, duas partes ao segundo, três partes ao terceiro.
+
+{% Codepen {user: 'web-dot-dev', id: 'OJWRzEz'}%}
+
+Você pode fazer a mesma coisa em uma `flex-basis` de `auto`, embora seja necessário especificar os três valores. O primeiro valor sendo `flex-grow`, o segundo `flex-shrink` e o terceiro `flex-basis`.
+
+```css
+.item1 {
+  flex: 1 1 auto;
+}
+
+.item2 {
+  flex: 2 1 auto;
+}
+```
+
+Este é um caso de uso menos comum, pois a razão para usar uma `flex-basis` do `auto` é permitir que o navegador descubra a distribuição do espaço. Se você quiser que um item cresça um pouco mais do que o algoritmo decide, pode ser útil.
+
+## Reordenando itens flexíveis
+
+Os itens em seu contêiner flexível podem ser reordenados usando a propriedade `order` Esta propriedade permite a ordenação de itens em **grupos ordinais**. Os itens são dispostos na direção ditada pela `flex-direction`, os valores mais baixos primeiro. Se mais de um item tiver o mesmo valor, ele será exibido com os outros itens com esse valor.
+
+O exemplo abaixo demonstra essa ordem.
+
+{% Codepen {user: 'web-dot-dev', id: 'NWdRXoL'}%}
+
+{% Aside 'warning' %} Usar a `order` tem os mesmos problemas que os valores `column-reverse` `row-reverse` `flex-direction`. Seria muito fácil criar uma experiência desconectada para alguns usuários. Não use a `order` porque você está consertando coisas que estão fora de ordem no documento. Se os itens logicamente deveriam estar em uma ordem diferente, altere seu HTML! {% endAside %}
+
+{% Assessment 'flex' %}
+
+## Visão geral do alinhamento Flexbox
+
+O Flexbox trouxe consigo um conjunto de propriedades para alinhar itens e distribuir espaço entre os itens. Essas propriedades foram tão úteis que, desde então, foram movidas para suas próprias especificações, você também as encontrará no Layout de grade. Aqui você pode descobrir como eles funcionam quando você está usando o flexbox.
+
+O conjunto de propriedades pode ser colocado em dois grupos. Propriedades para distribuição espacial e propriedades para alinhamento. As propriedades que distribuem o espaço são:
+
+- `justify-content`: distribuição do espaço no eixo principal.
+- `align-content`: distribuição de espaço no eixo transversal.
+- `place-content`: uma abreviação para definir as duas propriedades acima.
+
+As propriedades usadas para alinhamento no flexbox:
+
+- `align-self`: alinha um único item no eixo cruzado
+- `align-items`: alinha todos os itens como um grupo no eixo cruzado
+
+Se você estiver trabalhando no eixo principal, as propriedades começam com `justify-`. No eixo transversal, eles começam com `align-`.
+
+## Distribuindo espaço no eixo principal
+
+Com o HTML usado anteriormente, os itens flexíveis dispostos como uma linha, há espaço no eixo principal. Os itens não são grandes o suficiente para encher completamente o recipiente flexível. Os itens se alinham no início do contêiner flexível porque o valor inicial de `justify-content` é `flex-start`. Os itens se alinham no início e qualquer espaço extra fica no final.
+
+Adicione a `justify-content` ao contêiner flexível, atribua a ele um valor `flex-end` e os itens se alinham no final do container e o espaço livre é colocado no início.
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+
+Você também pode distribuir o espaço entre os itens com `justify-content: space-between`.
+
+Experimente alguns dos valores da demonstração e [consulte o MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content) para obter o conjunto completo de valores possíveis.
+
+{% Codepen { user: 'web-dot-dev', id: 'JjERpGb'}%}
+
+{% Aside %} Para que a `justify-content` faça qualquer coisa, você precisa ter espaço livre em seu contêiner no eixo principal. Se seus itens preencherem o eixo, não haverá espaço para compartilhar, então a propriedade não fará nada. {% endAside %}
+
+### Com `flex-direction: column`
+
+Se você alterou sua `flex-direction` para `column`, `justify-content` funcionará na coluna. Para ter espaço livre em seu contêiner ao trabalhar como uma coluna, você precisa dar a ele uma `height` ou `block-size`. Caso contrário, você não terá espaço livre para distribuir.
+
+Experimente os diferentes valores, desta vez com um layout de coluna flexbox.
+
+{% Codepen {user: 'web-dot-dev', id: 'bGgwLgz', height: 600}%}
+
+## Distribuindo espaço entre as linhas flexíveis
+
+Com um contêiner flexível encapsulado, você pode ter espaço para distribuir no eixo transversal. Nesse caso, você pode usar a `align-content` com os mesmos valores que `justify-content`. Ao contrário de `justify-content` que alinha itens para `flex-start` por padrão, o valor inicial de `align-content` é `stretch`. Adicione a propriedade `align-content` ao contêiner flexível para alterar esse comportamento padrão.
+
+```css
+.container {
+  align-content: center;
+}
+```
+
+Experimente na demonstração. O exemplo tem linhas quebradas de itens flexíveis e o contêiner tem um `block-size` para que tenhamos algum espaço livre.
+
+{% Codepen {user: 'web-dot-dev', id: 'poREawo'}%}
+
+### A abreviatura de `place-content`
+
+Para definir `justify-content` e `align-content` você pode usar `place-content` com um ou dois valores. Um único valor será usado para ambos os eixos, se você especificar que o primeiro é usado para `align-content` e o segundo para `justify-content`.
+
+```css
+.container {
+  place-content: space-between;
+  /* sets both to space-between */
+}
+
+.container {
+  place-content: center flex-end;
+  /* wrapped lines on the cross axis are centered,
+  on the main axis items are aligned to the end of the flex container */
+}
+```
+
+## Alinhando itens no eixo cruzado
+
+No eixo cruzado, você também pode alinhar seus itens dentro da linha flexível usando `align-items` e `align-self`. O espaço disponível para este alinhamento dependerá da altura do contêiner flexível, ou linha flexível no caso de um conjunto de itens envolvidos.
+
+O valor inicial de `align-self` é `stretch`, que é o motivo pelo qual os itens flexíveis em uma linha se estendem até a altura do item mais alto por padrão. Para mudar isso, adicione a `align-self` a qualquer um dos seus itens flex.
+
+```css
+.container {
+  display: flex;
+}
+
+.item1 {
+  align-self: flex-start;
+}
+```
+
+Use qualquer um dos seguintes valores para alinhar o item:
+
+- `flex-start`
+- `flex-end`
+- `center`
+- `stretch`
+- `baseline`
+
+Veja [a lista completa de valores no MDN](https://developer.mozilla.org/docs/Web/CSS/align-self).
+
+A próxima demonstração tem uma única linha de flex items com `flex-direction: row`. O último item define a altura do contêiner flexível. O primeiro item possui a `align-self` com um valor de `flex-start`. Tente alterar o valor dessa propriedade para ver como ela se move dentro do seu espaço no eixo cruzado.
+
+{% Codepen {user: 'web-dot-dev', id: 'RwKGQee', height: 600}%}
+
+A `align-self` é aplicada a itens individuais. A `align-items` pode ser aplicada ao contêiner flexível para definir todas as propriedades individuais do `align-self` como um grupo.
+
+```css
+.container {
+  display: flex;
+  align-items: flex-start;
+}
+```
+
+Na próxima demonstração, tente alterar o valor de `align-items` para alinhar todos os itens no eixo cruzado como um grupo.
+
+{% Codepen {user: 'web-dot-dev', id: 'QWdKmby', height: 600}%}
+
+## Por que não há justify-self no flexbox?
+
+Os itens flexíveis atuam como um grupo no eixo principal. Portanto, não existe o conceito de separar um item individual desse grupo.
+
+No layout de grade, as propriedades `justify-self` e `justify-items` funcionam no eixo em linha para fazer o alinhamento dos itens naquele eixo dentro de sua área de grade. Devido à maneira como os layouts flexíveis tratam os itens como um grupo, essas propriedades não são implementadas em um contexto flexível.
+
+Vale a pena saber que o flexbox funciona muito bem com margens automáticas. Se você encontrar a necessidade de separar um item de um grupo, ou separar o grupo em dois grupos, pode aplicar uma margem para fazer isso. No exemplo abaixo, o último item tem uma margem esquerda `auto`. A margem automática absorve todo o espaço na direção em que é aplicada. Isso significa que ele empurra o item para a direita, dividindo os grupos.
+
+{% Codepen {user: 'web-dot-dev', id: 'poRELbR'}%}
+
+## Como centralizar um item vertical e horizontalmente
+
+As propriedades de alinhamento podem ser usadas para centralizar um item dentro de outra caixa. A `justify-content` alinha o item no eixo principal, que é a linha. A `align-items` no eixo cruzado.
+
+```css
+.container {
+  width: 400px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+{% Aside %} No futuro, poderemos fazer esse alinhamento sem precisar tornar o pai um contêiner flexível. As propriedades de alinhamento são especificadas para blocos e layout embutido. No momento, nenhum navegador os implementou. No entanto, mudar para um contexto de formatação flexível fornece acesso às propriedades. Se você precisa alinhar algo, é uma ótima maneira de fazer isso. {% endAside %}
+
+{% Assessment 'conclusion' %}
+
+## Recursos
+
+- [Layout de caixa flexível CSS do MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) inclui uma série de guias detalhados com exemplos.
+- [Guia de dicas de CSS para Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [O que acontece quando você cria um contêiner Flexbox Flex](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [Tudo o que você precisa saber sobre alinhamento no Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [Qual é o tamanho dessa caixa flexível?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [Casos de uso para Flexbox](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
diff --git a/src/site/content/pt/learn/css/grid/grid.assess.yml b/src/site/content/pt/learn/css/grid/grid.assess.yml
new file mode 100644
index 00000000000..95fff379b88
--- /dev/null
+++ b/src/site/content/pt/learn/css/grid/grid.assess.yml
@@ -0,0 +1,95 @@
+setLeader: Test your knowledge of grid
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2,3,5,6"
+    stem: Which of the following are CSS grid terms?
+    options:
+      - content: "lines"
+        rationale: "The grid is divided by these horizontal and vertically
+        running separators."
+      - content: "circles"
+        rationale: "Sorry, no concepts of circles in CSS grid."
+      - content: "cells"
+        rationale: "A single intersection of a row and a column creates a grid cell."
+      - content: "areas"
+        rationale: "Multiple cells together."
+      - content: "trains"
+        rationale: "Sorry, no concepts of trains in CSS grid."
+      - content: "gaps"
+        rationale: "The space between cells."
+      - content: "tracks"
+        rationale: "A single row or a column is a track in the grid."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      main {
+        display: grid;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the default layout direction of a grid?
+    options:
+      - content: Rows
+        rationale: "Without any columns defined, grid children lay out in the
+        block direction as they normally would."
+      - content: Columns
+        rationale: "If `grid-auto-flow: column` was present, than a grid would
+        layout as columns."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is the difference between `auto-fit` and `auto-fill`?
+    options:
+      - content: "`auto-fit` will stretch cells to fit the container, where
+      `auto-fill` won't."
+        rationale: "`auto-fill` places as many items into the template as
+        possible, without stretching. Fit **makes** them fit."
+      - content: "`auto-fit` will stretch a container to fit the children, where
+      `auto-fill` makes the children fit to the container."
+        rationale: "This is not how these properties behave."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is `min-content`?
+    options:
+      - content: "Same as 0%"
+        rationale: "0% is a relative value of the parent box, while
+        `min-content` is relative to the words and images in the box."
+      - content: "The smallest letter"
+        rationale: "While there is a smallest letter, letters are not what
+        `min-content` is refering to."
+      - content: "The longest word or image."
+        rationale: "In the phrase 'CSS is awesome', the word awesome would be
+        the `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What is `max-content`?
+    options:
+      - content: "The longest sentence or biggest image."
+        rationale: "This is the maximum size the content of the box is asking
+        for or has specified. It's a sentence as it's widest or an image at it's
+        widest."
+      - content: "The longest letter."
+        rationale: "While there is a longest letter, letters are not what
+        `max-content` is refering to."
+      - content: "The longest word."
+        rationale: "The longest word is `min-content`."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is auto-placement?
+    options:
+      - content: "When grid takes the child items and places them in the best
+      order based on browser heuristics."
+        rationale: "No browser will change your content order, only your own
+        styles will do that."
+      - content: "When grid child items have been given a `grid-area` and are
+      placed on that cell."
+        rationale: "That's explicit placement not auto placement."
+      - content: "When unassigned grid items are placed next in a layout
+      template."
+        rationale: "Grid items without an explicit area will be placed in the next available grid cell"
diff --git a/src/site/content/pt/learn/css/grid/index.md b/src/site/content/pt/learn/css/grid/index.md
new file mode 100644
index 00000000000..874e020c07a
--- /dev/null
+++ b/src/site/content/pt/learn/css/grid/index.md
@@ -0,0 +1,512 @@
+---
+title: Grade
+description: A grade CSS fornece um sistema de layout bidimensional, com controle de linhas e colunas. Neste módulo, descubra tudo o que ela tem a oferecer.
+audio:
+  title: 'The CSS Podcast   - 011: Grid'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_011_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-29
+---
+
+Um layout bastante comum no design da Web tem cabeçalho, barra lateral, corpo e rodapé.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/tj7KmP72RKkffGQRswpA.svg", alt="Um cabeçalho com logotipo e navegação, uma barra lateral e uma área de conteúdo com um artigo", width="800", height="531" %}
+
+Ao longo dos anos, foram criados vários métodos para resolver esse layout. No entanto, com a grade CSS (grid), ele é relativamente simples e oferece muitas opções. A grade é incrivelmente útil ao combinar o controle do dimensionamento extrínseco com a flexibilidade do dimensionamento intrínseco, o que a torna ideal para esse tipo de layout. Isso ocorre porque a grade é um método de layout projetado para conteúdo bidimensional, ou seja, organizado em linhas e colunas ao mesmo tempo.
+
+Ao criar um layout de grade, escolha a opção com linhas e colunas. Em seguida, adicione itens à grade ou permita que o navegador preencha automaticamente as células criadas. É bastante coisa, mas uma visão geral dos recursos disponíveis ajudará você a criar layouts de grade.
+
+## Visão geral
+
+Então, o que é possível fazer com a grade? Veja abaixo os recursos dos layouts de grade. Você aprenderá sobre todos eles neste guia.
+
+1. Uma grade pode ter linhas e colunas. Você pode escolher a dimensão das trilhas de linhas e de colunas ou ativar o dimensionamento com base no tamanho do conteúdo.
+2. Os filhos diretos do contêiner da grade serão adicionados a ela automaticamente.
+3. Como alternativa, você pode posicionar os itens de acordo com sua preferência.
+4. As linhas e áreas na grade podem ser nomeadas para facilitar o posicionamento.
+5. O espaço livre no contêiner da grade pode ser distribuído entre as trilhas.
+6. Os itens da grade podem ser alinhados dentro da área.
+
+## Terminologia relacionada à grade
+
+Como é o primeiro sistema de layout real do CSS, vários novos termos foram acrescentados com a grade.
+
+### Linhas da grade
+
+Uma grade é composta de linhas, que correm na horizontal e vertical. Se sua grade tiver quatro colunas, ela terá cinco linhas de coluna, incluindo a que sucede a última.
+
+A numeração das linhas começa em 1 e segue o modo de escrita e a direção do script do componente. Isso significa que a linha da coluna 1 estará à esquerda em um idioma da esquerda para a direita, como o inglês, e à direita, em um idioma da direita para a esquerda, como o árabe.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg", alt="Uma representação de diagrama das linhas da grade", width="800", height="434" %}
+
+### Trilhas da grade
+
+Uma trilha é o espaço entre duas linhas de grade. Uma trilha de linha está entre duas linhas horizontais e uma trilha de coluna está entre duas linhas verticais. Ao criar a grade, essas trilhas são criadas ao atribuir um tamanho a elas.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg", alt="Uma representação de diagrama da trilha de grade", width="800", height="434" %}
+
+### Célula da grade
+
+Uma célula da grade é o menor espaço definido pela intersecção de trilhas de linha e coluna. É como a célula de uma tabela ou em uma planilha. Se você definir uma grade e não adicionar os itens, cada um será disposto automaticamente em cada célula.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg", alt="Uma representação de diagrama da célula de uma grade", width="800", height="434" %}
+
+### Área da grade
+
+A área, uma junção de várias células da grade, é criada ao fazer com que um item ocupe diversas trilhas.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg", alt="Uma representação de diagrama da área de grade", width="800", height="434" %}
+
+### Lacunas
+
+São os espaçamentos ou separadores entre as trilhas. Para fins de dimensionamento, eles atuam como uma trilha normal. Você não pode colocar conteúdo em uma lacuna, mas pode estender os itens da grade através dela.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg", alt="Uma representação de diagrama de uma grade com lacunas", width="800", height="434" %}
+
+### Contêiner da grade
+
+É o elemento HTML com `display: grid` aplicado e, portanto, cria um novo contexto de formatação de grade para os filhos diretos.
+
+```css
+.container {
+  display: grid;
+}
+```
+
+### Item da grade
+
+Um item de grade é um filho direto do contêiner de grade.
+
+```html/1-3
+<div class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+```
+
+## Linhas e colunas
+
+Para criar uma grade básica, é possível definir uma grade com três trilhas de coluna, duas trilhas de linha e uma lacuna de 10 pixels entre as trilhas, conforme a seguir.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 5em 100px 30%;
+    grid-template-rows: 200px auto;
+    gap: 10px;
+}
+```
+
+Essa grade demonstra vários dos aspectos descritos na seção de terminologia. Ela possui três trilhas de coluna, cada uma com uma unidade de comprimento diferente. Ela possui duas trilhas de linha, uma que usa uma unidade de comprimento e outra automática. Quando usado para o dimensionamento da trilha, o modo automático é do tamanho conteúdo. As trilhas são dimensionadas automaticamente por padrão.
+
+Se o elemento com uma classe `.container` tiver itens filhos, eles serão imediatamente dispostos nessa grade. Você pode ver isso em ação na demonstração abaixo.
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdbrzr' } %}
+
+As ferramentas do desenvolvedor do Chrome para a grade podem ajudá-lo a entender as diversas partes dela.
+
+Abra a [demonstração](https://codepen.io/web-dot-dev/full/NWdbrzr) no Chrome. Inspecione o elemento com o plano de fundo cinza, que possui um ID de `container`. Destaque a grade selecionando o selo dela no DOM, ao lado do elemento `.container`. Na guia "Layout", selecione **Display Line Numbers** (Exibir números das linhas) na lista suspensa para ver os números na grade.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/YxpjWBUDsqQB2fr6rzU3.jpg", alt="Conforme descrito nas legendas e instruções", width="800", height="449" %}<br>Uma grade destacada no Chrome DevTools mostrando números de linha, células e trilhas.</figure>
+
+### Palavras-chave de dimensionamento intrínseco
+
+Além das dimensões de comprimento e porcentagem descritas na seção sobre [unidades de dimensionamento](/learn/css/sizing), as trilhas de grade podem usar palavras-chave de dimensionamento intrínseco. Essas palavras-chave são definidas na especificação do Dimensionamento de caixa e adicionam outros métodos de dimensionamento de caixas ao CSS, e não apenas trilhas de grade.
+
+- `min-content`
+- `max-content`
+- `fit-content()`
+
+A palavra-chave [`min-content`](https://developer.mozilla.org/docs/Web/CSS/min-content) fará com que o tamanho da trilha seja o menor possível, sem que o conteúdo transborde. Ao alterar o layout da grade de exemplo para três trilhas de coluna, todas com o tamanho `min-content`, significa que elas se tornarão tão estreitas quanto a palavra mais longa da trilha.
+
+A palavra-chave [`max-content`](https://developer.mozilla.org/docs/Web/CSS/max-content) tem o efeito oposto. A trilha se tornará larga o suficiente para que todo o conteúdo seja exibido em uma longa sequência ininterrupta. Isso pode causar transbordamentos, pois a string não será quebrada.
+
+A função [`fit-content()`](https://developer.mozilla.org/docs/Web/CSS/fit-content()) atua inicialmente como `max-content`. No entanto, uma vez que a trilha atinge o tamanho transmitido na função, o conteúdo começa a ser quebrado. Portanto, `fit-content(10em)` criará uma trilha menor que 10em, se o tamanho `max-content` for menor que 10em, mas não maior que 10em.
+
+Na próxima demonstração, teste as diferentes palavras-chave de dimensionamento intrínseco, alterando o dimensionamento das trilhas da grade.
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRqNgL', height: 600 } %}
+
+{% Aside %} Talvez você observe que, nessa demonstração, quando a opção automática é usada, as colunas da grade se esticam para preencher o contêiner. As trilhas dimensionadas automaticamente serão esticadas por padrão se houver espaço adicional no contêiner da grade. {% endAside %}
+
+### A unidade `fr`
+
+Além das dimensões de comprimento, porcentagens e palavras-chave, há um método de dimensionamento especial que só funciona no layout de grade. Esse método é a unidade `fr`, um comprimento flexível que descreve uma parte do espaço disponível no contêiner da grade.
+
+A unidade `fr` funciona de maneira semelhante ao uso do `flex: auto` no flexbox. Ela distribui o espaço depois que os itens foram dispostos. Portanto, para ter três colunas com a mesma divisão do espaço disponível, faça desta forma:
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+```
+
+Como a unidade fr divide o espaço disponível, ela pode ser combinada com uma lacuna ou trilha de tamanho fixo. Para ter um componente com um elemento de tamanho fixo e a segunda trilha ocupar todo o espaço restante, use como uma lista de trilhas de `grid-template-columns: 200px 1fr`.
+
+Ao usar valores diferentes para a unidade fr, o espaço será dividido proporcionalmente. Os valores maiores ocuparão uma parte maior do espaço livre. Na demonstração abaixo, altere o valor da terceira trilha.
+
+{% Codepen { user: 'web-dot-dev', id: 'vYgyXNE', height: 600 } %}
+
+### A função `minmax()`
+
+Com essa função, é possível definir um tamanho mínimo e máximo para uma trilha. Isso pode ser bastante útil. Por exemplo, a unidade `fr` acima, que distribui o espaço restante, poderia ser escrita usando [`minmax()`](https://developer.mozilla.org/docs/Web/CSS/minmax()) como `minmax(auto, 1fr)`. A grade analisa o tamanho intrínseco do conteúdo e distribui o espaço disponível depois de fornecer espaço suficiente ao conteúdo. Isso significa que talvez as trilhas não tenham uma parcela igual do espaço disponível no contêiner da grade.
+
+Para forçar uma trilha a ocupar uma parcela igual do espaço no contêiner da grade, excluindo as lacunas, use minmax. Substitua `1fr` como um tamanho de trilha por `minmax(0, 1fr)`. Isso define o tamanho mínimo da trilha como 0, e não o tamanho mínimo do conteúdo. A partir do tamanho total disponível no contêiner da grade, o tamanho necessário para as lacunas é subtraído e o resto é dividido conforme as unidades fr.
+
+### Notação `repeat()`
+
+Se você quiser criar uma grade com 12 trilhas de colunas iguais, use o seguinte CSS.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr),
+      minmax(0,1fr);
+}
+```
+
+Como alternativa, é possível usar [`repeat()`](https://developer.mozilla.org/docs/Web/CSS/repeat()):
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0,1fr));
+}
+```
+
+A função `repeat()` pode ser usada para repetir qualquer seção da lista de trilhas. Por exemplo, é possível repetir um padrão de trilhas. Você também pode ter algumas trilhas regulares e uma seção de repetição.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*cria seis trilhas*/
+}
+```
+
+### `auto-fill` e `auto-fit`
+
+É possível combinar tudo o que você aprendeu sobre o dimensionamento de trilhas, a função `minmax()` e a repetição para criar um padrão útil com layout de grade. Talvez você não queira especificar o número de trilhas de coluna, mas, em vez disso, deseje criar o máximo de trilhas possível no contêiner.
+
+Você pode fazer isso com `repeat()` e a palavra-chave `auto-fill` ou `auto-fit`. Na demonstração abaixo, a grade criará o máximo de trilhas de 200 pixels possível no contêiner. Abra a demonstração em uma nova janela e veja como a grade muda conforme você altera o tamanho da janela de visualização (viewport).
+
+{% Codepen { user: 'web-dot-dev', id: 'XWpNjgO' } %}
+
+Na demonstração, obtemos o número máximo de trilhas possível. No entanto, as trilhas não são flexíveis. Haverá uma lacuna no final até que haja espaço suficiente para outra trilha de 200 pixels. Se você adicionar a função `minmax()`, poderá solicitar o máximo de trilhas que couber em um tamanho mínimo de 200 pixels e máximo de 1fr. A grade dispõe as trilhas de 200 pixels e qualquer espaço restante é distribuído igualmente entre elas.
+
+Isso cria um layout responsivo bidimensional sem a necessidade de consultas de mídia.
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWbRax' } %}
+
+Há uma diferença sutil entre `auto-fill` e `auto-fit`. Na próxima demonstração, teste a sintaxe explicada acima em um layout de grade, mas com apenas dois itens no contêiner. Usando a palavra-chave `auto-fill`, é possível ver que trilhas vazias foram criadas. Altere a palavra-chave para `auto-fit` e o tamanho das trilhas diminui para zero. Isso significa que as trilhas flexíveis agora se expandem para consumir o espaço.
+
+{% Codepen { user: 'web-dot-dev', id: 'MWJbbNe' } %}
+
+Fora essa exceção, as palavras-chave `auto-fill` e `auto-fit` agem exatamente da mesma maneira. Não há diferença entre elas uma vez que a primeira trilha é preenchida.
+
+## Posicionamento automático
+
+Você já viu como o posicionamento automático da grade funciona nas demonstrações até agora. Os itens são colocados na grade, um em cada célula, na ordem em que aparecem na origem. Para vários layouts, isso talvez seja tudo o que você precise. Se você precisar de mais controle, há algumas coisas que pode fazer. A primeira é ajustar o layout de posicionamento automático.
+
+### Colocar itens nas colunas
+
+O comportamento padrão do layout de grade é colocar os itens ao longo das linhas. Em vez disso, você pode fazer com que os itens sejam colocados nas colunas usando `grid-auto-flow: column`. É necessário definir as trilhas de linha, caso contrário, os itens criarão trilhas de coluna intrínsecas e tudo será disposto em uma longa linha.
+
+Esses valores estão relacionados ao modo de escrita do documento. Uma linha sempre segue na direção de uma frase no modo de escrita do documento ou do componente. Na próxima demonstração, você poderá alterar o modo, o valor de `grid-auto-flow` e a propriedade `writing-mode`.
+
+{% Codepen { user: 'web-dot-dev', id: 'PoWbWbr', height: 600 } %}
+
+### Estender trilhas
+
+Você pode fazer com que alguns ou todos os itens em um layout de posicionamento automático ocupem mais de uma trilha. Use a palavra-chave `span` e mais o número de linhas a serem ocupadas como o valor de `grid-column-end` ou `grid-row-end`.
+
+```css
+.item {
+    grid-column-end: span 2; /* ocupará duas linhas, cobrindo duas trilhas */
+}
+```
+
+Como você não especificou `grid-column-start`, ele usa o valor inicial de `auto` e é colocado de acordo com as regras de posicionamento automático. Você também pode especificar usando a abreviação `grid-column`:
+
+```css
+.item {
+    grid-column: auto / span 2;
+}
+```
+
+### Preencher lacunas
+
+Um layout de posicionamento automático com alguns itens ocupando várias trilhas pode resultar em uma grade com algumas células não preenchidas. O comportamento padrão do layout de grade com um posicionamento totalmente automático é sempre avançar para frente. Os itens serão colocados de acordo com a ordem em que estão na origem ou qualquer alteração com a propriedade `order`. Se não houver espaço suficiente para um item, a grade deixará uma lacuna e avançará para a próxima trilha.
+
+A próxima demonstração mostra esse comportamento. A caixa de seleção aplicará o modo de empacotamento "dense" (denso). Ele é habilitado ao definir `grid-auto-flow` com um valor `dense`. Com esse valor definido, a grade usará os itens para preencher as lacunas depois. Talvez o display fique desconectado da ordem lógica.
+
+{% Codepen { user: 'web-dot-dev', id: 'ZELBLrJ', height: 600 } %}
+
+## Colocar itens
+
+Você já conhece várias funcionalidades da grade CSS. Vamos agora dar uma olhada em como posicionamos os itens na grade criada.
+
+A primeira coisa de que você precisa lembrar é que o layout de grade CSS é baseado em uma grade de linhas numeradas. A maneira mais simples de colocar os itens na grade é movê-los de uma linha para outra. Você descobrirá outras maneiras de colocar os itens neste guia, mas sempre terá acesso a essas linhas numeradas.
+
+As propriedades que você pode usar para posicionar os itens pelo número de linha são estas:
+
+- [`grid-column-start`](https://developer.mozilla.org/docs/Web/CSS/grid-column-start)
+- [`grid-column-end`](https://developer.mozilla.org/docs/Web/CSS/grid-column-end)
+- [`grid-row-start`](https://developer.mozilla.org/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](https://developer.mozilla.org/docs/Web/CSS/grid-row-end)
+
+Elas têm abreviações que permitem definir as linhas inicial e final ao mesmo tempo:
+
+- [`grid-column`](https://developer.mozilla.org/docs/Web/CSS/grid-column)
+- [`grid-row`](https://developer.mozilla.org/docs/Web/CSS/grid-row)
+
+Para colocar o item, defina as linhas inicial e final da área da grade em que ele deve ser posicionado.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 200px 100px);
+}
+
+.item {
+    grid-column-start: 1; /* start at column line 1 */
+    grid-column-end: 4; /* end at column line 4 */
+    grid-row-start: 2; /*start at row line 2 */
+    grid-row-end: 4; /* end at row line 4 */
+}
+```
+
+Para verificar onde o item é colocado, o Chrome DevTools pode fornecer um guia visual para as linhas.
+
+A numeração das linhas segue o modo de escrita e a direção do componente. Na próxima demonstração, altere o modo ou a direção de escrita para ver como o posicionamento dos itens permanece consistente com a forma como o texto flui.
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdGdzd', height: 600 } %}
+
+### Empilhar itens
+
+Usando o posicionamento baseado em linhas, é possível colocar itens na mesma célula de grade. Isso significa que você pode empilhar itens ou fazer com que um item se sobreponha parcialmente a outro. Os itens que vêm depois na origem serão exibidos em cima dos itens que vêm antes. Você pode alterar essa ordem de empilhamento usando `z-index`, assim como com os itens posicionados.
+
+{% Codepen { user: 'web-dot-dev', id: 'BapQWQW', height: 600 } %}
+
+### Números de linha negativos
+
+Ao usar `grid-template-rows` e `grid-template-columns`, você cria uma **grade explícita**. É uma grade que você definiu e forneceu o tamanho das trilhas.
+
+Às vezes, você verá itens exibidos fora dessa grade explícita. Por exemplo, talvez você defina trilhas de coluna e, em seguida, adicione várias linhas de itens sem definir as trilhas de linha. As trilhas seriam dimensionadas automaticamente por padrão. Você também pode colocar um item usando `grid-column-end`, que está fora da grade explícita definida. Em ambos os casos, a grade criará trilhas para fazer com que o layout funcione, e essas trilhas são chamadas de **grade implícita**.
+
+Na maioria das vezes, não fará diferença se você estiver trabalhando com uma grade implícita ou explícita. No entanto, com o posicionamento baseado em linhas, talvez você descubra a principal diferença entre os dois.
+
+Usando números de linha negativos, você pode posicionar itens da linha final da grade explícita. Isso pode ser útil se quiser que um item ocupe da primeira à última linha de coluna. Nesse caso, use `grid-column: 1 / -1`. O item se estenderá ao longo da grade explícita.
+
+No entanto, isso só funciona para a grade explícita. Tome como exemplo um layout de três linhas de itens posicionados automaticamente em que gostaria de estender o primeiro item até a linha final da grade.
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Dt8yG376MqSyWJJ8KqPr.svg", alt="Uma barra lateral com oito itens de grade irmãos", width="800", height="359" %}
+
+Talvez você ache que consegue usar `grid-row: 1 / -1` para esse item. Na demonstração abaixo, é possível ver que isso não funciona. As trilhas são criadas na grade implícita e não há como chegar ao final da grade usando `-1`.
+
+{% Codepen {user: 'web-dot-dev', id: 'YzNpZeq'}%}
+
+#### Dimensionamento de trilhas implícitas
+
+As trilhas criadas na grade implícita serão dimensionadas automaticamente por padrão. No entanto, se você quiser controlar o tamanho das linhas, use a propriedade [`grid-auto-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows). Para as colunas, use [`grid-auto-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns).
+
+Para criar todas as linhas implícitas com um tamanho mínimo de `10em` e um tamanho máximo de `auto`:
+
+```css
+.container {
+    display: grid;
+    grid-auto-rows: minmax(10em, auto);
+}
+```
+
+Para criar colunas implícitas com um padrão de trilhas largas de 100 px e 200 px (nesse caso, a primeira coluna implícita terá 100 px, a segunda 200 px, a terceira 100 px e assim por diante):
+
+```css
+.container {
+    display: grid;
+    grid-auto-columns: 100px 200px;
+}
+```
+
+## Linhas de grade nomeadas
+
+Pode ser mais fácil colocar itens em um layout se as linhas tiverem um nome em vez de um número. É possível nomear qualquer linha da grade ao adicionar um nome de sua escolha entre colchetes. Vários nomes podem ser adicionados, separados por um espaço dentro dos colchetes. Depois de nomear as linhas, elas podem ser usadas no lugar dos números.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns:
+      [main-start aside-start] 1fr
+      [aside-end content-start] 2fr
+      [content-end main-end]; /* layout de duas colunas */
+}
+
+.sidebar {
+    grid-column: aside-start / aside-end;
+    /* posicionado entre a linha 1 e 2*/
+}
+
+footer {
+    grid-column: main-start / main-end;
+    /* através do layout da linha 1 a 3*/
+}
+```
+
+## Áreas de modelo da grade
+
+Também é possível nomear áreas da grade e colocar itens nelas. Essa é uma ótima técnica, pois permite ver a aparência do componente ali mesmo no CSS.
+
+Para começar, nomeie os filhos diretos do contêiner da grade usando a propriedade [`grid-area`](https://developer.mozilla.org/docs/Web/CSS/grid-area):
+
+```css
+header {
+    grid-area: header;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.content {
+    grid-area: content;
+}
+
+footer {
+    grid-area: footer;
+}
+```
+
+Escolha o nome que quiser, exceto as palavras-chave `auto` e `span`. Depois que todos os itens forem nomeados, use a propriedade [`grid-template-areas`](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas) para definir quais células da grade cada item ocupará. Cada linha é definida entre aspas.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "header header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+Há algumas regras ao usar `grid-template-areas`.
+
+- O valor precisa ser uma grade completa sem células vazias.
+- Para estender as trilhas, repita o nome.
+- As áreas criadas pela repetição do nome precisam ser retangulares e não podem ser desconectadas.
+
+Se você violar qualquer uma das regras acima, o valor será considerado inválido e descartado.
+
+Para deixar um espaço em branco na grade, use um `.` ou uma série sem espaços entre os caracteres. Por exemplo, para deixar a primeira célula da grade vazia, é possível adicionar uma série de caracteres `.`:
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas:
+        "....... header header header"
+        "sidebar content content content"
+        "sidebar footer footer footer";
+}
+```
+
+Como o layout inteiro é definido em um só lugar, é fácil fazer a redefinição dele usando consultas de mídia. No próximo exemplo, veja um layout de duas colunas que muda para três com a redefinição do valor de `grid-template-columns` e `grid-template-areas`. Abra o exemplo em uma nova janela para testar o tamanho da janela de visualização e ver a mudança de layout.
+
+Você também pode ver como a propriedade `grid-template-areas` se relaciona ao `writing-mode` e à direção, bem como com os outros métodos de grade.
+
+{% Codepen { user: 'web-dot-dev', id: 'oNBYepg', height: 600 } %}
+
+## Propriedades abreviadas
+
+Há duas propriedades abreviadas que permitem definir muitas das propriedades da grade de uma só vez. Elas podem parecer um pouco confusas até você entender exatamente como elas funcionam. Você decide se prefere usar a forma abreviada ou não.
+
+### `grid-template`
+
+A propriedade [`grid-template`](https://developer.mozilla.org/docs/Web/CSS/grid-template) é uma abreviação de `grid-template-rows`, `grid-template-columns` e `grid-template-areas`. As linhas são definidas primeiro, junto com o valor de `grid-template-areas`. O dimensionamento da coluna é adicionado após uma `/`.
+
+```css
+.container {
+    display: grid;
+    grid-template:
+      "head head head" minmax(150px, auto)
+      "sidebar content content" auto
+      "sidebar footer footer" auto / 1fr 1fr 1fr;
+}
+```
+
+### Propriedade `grid`
+
+A abreviação [`grid`](https://developer.mozilla.org/docs/Web/CSS/grid) pode ser usada exatamente da mesma maneira que a `grid-template`. Quando usada dessa forma, ela redefinirá as outras propriedades da grade que aceita para os valores iniciais. O conjunto completo é este:
+
+- `grid-template-rows`
+- `grid-template-columns`
+- `grid-template-areas`
+- `grid-auto-rows`
+- `grid-auto-columns`
+- `grid-auto-flow`
+
+Como alternativa, você pode usar esta abreviação para definir o comportamento da grade implícita, por exemplo:
+
+```css
+.container {
+    display: grid;
+    grid: repeat(2, 80px) / auto-flow  120px;
+}
+```
+
+## Alinhamento
+
+O layout de grade usa as mesmas propriedades de alinhamento aprendidas no guia do [flexbox](/learn/css/flexbox). Na grade, as propriedades que começam com `justify-` são sempre usadas no eixo inline, que é a direção em que as frases são executadas no modo de escrita.
+
+As propriedades que começam com `align-` são usadas no eixo block, que é a direção em que os blocos são dispostos no modo de escrita.
+
+- [`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content) e [`align-content`](https://developer.mozilla.org/docs/Web/CSS/align-content): distribuem espaço adicional no contêiner da grade ao redor ou entre as trilhas.
+- [`justify-self`](https://developer.mozilla.org/docs/Web/CSS/justify-self) e [`align-self`](https://developer.mozilla.org/docs/Web/CSS/align-self): são aplicados a um item da grade para movê-lo dentro da área em que está posicionado.
+- [`justify-items`](https://developer.mozilla.org/docs/Web/CSS/justify-items) e [`align-items`](https://developer.mozilla.org/docs/Web/CSS/align-items): são aplicados ao contêiner da grade para definir todas as propriedades `justify-self` nos itens.
+
+### Distribuir espaço extra
+
+Nesta demonstração, a grade é maior do que o espaço necessário para dispor as trilhas de largura fixa. Isso significa que temos espaço nas dimensões inline e block da grade. Experimente valores diferentes de `align-content` e `justify-content` para ver como as trilhas se comportam.
+
+{% Codepen { user: 'web-dot-dev', id: 'rNjjMVd', height: 650 } %}
+
+Observe como as lacunas aumentam ao usar valores como `space-between`, e qualquer item de grade que ocupa duas trilhas também se expande para absorver o espaço extra adicionado à lacuna.
+
+{% Aside %} Como ocorre com o flexbox, essas propriedades só funcionarão se houver espaço adicional para distribuição. Se as trilhas da grade preencherem perfeitamente o contêiner, não haverá espaço para repartir. {% endAside %}
+
+### Mover conteúdo
+
+Os itens com uma cor de fundo parecem preencher completamente a área da grade em que são colocados, porque o valor inicial para `justify-self` e `align-self` é `stretch`.
+
+{% Aside %} Se o item for uma imagem ou algo com proporção intrínseca, o valor inicial será `start`, em vez de `stretch`, para evitar esticar até ficar deformado. {% endAside %}
+
+Na demonstração, altere os valores de `justify-items` e `align-items` para ver como isso muda o layout. A área da grade não muda de tamanho, em vez disso, os itens são movimentados dentro da área definida.
+
+{% Codepen { user: 'web-dot-dev', id: 'YzZOOXB', height: 650 } %}
+
+{% Assessment 'grid' %}
+
+## Recursos
+
+Este guia ofereceu uma visão geral das diferentes partes da especificação do layout da grade. Para saber mais, dê uma olhada nos seguintes recursos.
+
+- [Layout de grade CSS do MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
+- [Um guia completo sobre a grade](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [Como criar um contêiner de grade](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)
+- [Uma coleção abrangente de material de aprendizagem sobre a grade](https://gridbyexample.com/)
diff --git a/src/site/content/pt/learn/css/index.md b/src/site/content/pt/learn/css/index.md
new file mode 100644
index 00000000000..431fdda497e
--- /dev/null
+++ b/src/site/content/pt/learn/css/index.md
@@ -0,0 +1,28 @@
+---
+title: Aprenda CSS
+authors:
+  - andybell
+description: Um curso de CSS permanente e referência para aumentar o nível de sua experiência nos estilos da web.
+date: 2021-05-04
+tags:
+  - css
+  - layout
+---
+
+## Bem-vindo ao Aprenda CSS!
+
+Este curso divide os fundamentos do CSS em partes digeríveis e fáceis de entender. Nos próximos módulos, você aprenderá como os principais aspectos do CSS funcionam e como usá-los de maneira eficaz em seus projetos. Use o painel de menu ao lado do logotipo "Aprenda CSS" para navegar pelos módulos.
+
+Você aprenderá os fundamentos do CSS como o modelo de caixa, cascata e especificidade, flexbox, grade e z-index. E, junto com esses fundamentos, você aprenderá sobre funções, tipos de cores, gradientes, propriedades lógicas e herança. Assim você poderá tornar-se um desenvolvedor front-end completo, pronto para criar qualquer interface de usuário.
+
+Cada módulo vem repleto de demonstrações interativas e autoavaliações para você testar seus conhecimentos. Além de aprender por meio de leituras e demos, o módulo acompanha um episódio de podcast para cada tópico, que é mais uma forma de aprender e continuar expandindo seus conhecimentos.
+
+Este curso foi criado para desenvolvedores CSS iniciantes e avançados. Você pode percorrer a série do início ao fim para obter uma compreensão geral do CSS de cima a baixo, ou pode usá-lo como uma referência para assuntos específicos. Para aqueles que são novos no desenvolvimento da web em geral, confira o curso [introdução ao HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) do MDN para aprender tudo sobre como escrever marcações e vincular suas folhas de estilo.
+
+Aqui está o que você vai aprender:
+
+{% include 'partials/course-index.njk' %}
+
+Então, você está pronto para aprender CSS? [Vamos começar](/learn/css/box-model/) .
+
+{% Aside %} Este curso foi escrito e editado por especialistas da comunidade CSS:  <a href="https://twitter.com/piccalilli_">Andy Bell</a>, <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>, <a href="https://twitter.com/Una">Una Kravets</a> e <a href="https://twitter.com/argyleink">Adam Argyle</a>. [Rob Dodson](https://twitter.com/twerske) e [Jiwoong Lee](https://twitter.com/camdenbickel) conduziram a construção de UX e produção, junto com a ajuda de [Ewa Gasperowicz](https://twitter.com/KevinLozandier) e <a href="https://twitter.com/rob_dodson">Kayce Basques</a>. {% endAside %}
diff --git a/src/site/content/pt/learn/css/inheritance/conclusion.assess.yml b/src/site/content/pt/learn/css/inheritance/conclusion.assess.yml
new file mode 100644
index 00000000000..72f239bb884
--- /dev/null
+++ b/src/site/content/pt/learn/css/inheritance/conclusion.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Teste seu conhecimento sobre herança
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: '1+'
+    correctAnswers: '1,2,3,4'
+    stem: Quais das seguintes propriedades são herdáveis?
+    options:
+      - content: '`animation`'
+        rationale: 'Animações não passam para os filhos.'
+      - content: '`font-size`'
+        rationale: '🎉'
+      - content: '`color`'
+        rationale: '🎉'
+      - content: '`text-align`'
+        rationale: '🎉'
+      - content: '`line-height`'
+        rationale: '🎉'
+  - type: multiple-choice
+    cardinality: '1'
+    correctAnswers: '1'
+    stem: |
+      Qual valor se comporta como `inherit` e quando não há nada para herdar se comporta como `initial`?
+    options:
+      - content: '`reset`'
+        rationale: 'incorreto, tente novamente!'
+      - content: '`unset`'
+        rationale: '🎉'
+      - content: '`superset`'
+        rationale: 'incorreto, tente novamente!'
diff --git a/src/site/content/pt/learn/css/inheritance/index.md b/src/site/content/pt/learn/css/inheritance/index.md
new file mode 100644
index 00000000000..272729c6230
--- /dev/null
+++ b/src/site/content/pt/learn/css/inheritance/index.md
@@ -0,0 +1,355 @@
+---
+title: Herança
+description: >
+  Algumas propriedades CSS são herdadas se você não especificar um valor para elas.
+  Descubra como isso funciona e como usar a seu favor neste módulo.
+audio:
+  title: 'The CSS Podcast - 005: Inheritance'
+  src: 'https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_005_v1.2.mp3?dest-id=1891556'
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Digamos que você acabou de escrever algum CSS para fazer com que os elementos pareçam um botão.
+
+```html
+<a href="http://example.com" class="my-button">Eu sou um link botão</a>
+```
+
+```css
+.my-button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  text-decoration: none;
+  background: pink;
+  font: inherit;
+  text-align: center;
+}
+```
+
+Então você adiciona um link em um `article`,
+com uma classe `.my-button`. No entanto, há um problema,
+o texto não tem a cor que você esperava. Como isso aconteceu?
+
+Algumas propriedades CSS são herdadas se você não especificar um valor para elas.
+No caso desse botão, ele **herdou** a `color` deste CSS:
+
+```css
+article a {
+  color: maroon;
+}
+```
+
+Nesta lição, você aprenderá por que isso acontece e
+como a herança é um recurso poderoso para ajudá-lo a escrever menos CSS.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'zYNGEbg',
+  height: 400
+} %}
+</figure>
+
+## Fluxo da Herança
+
+Vamos dar uma olhada em como a herança funciona,
+usando este trecho de HTML:
+
+```html
+<html>
+  <body>
+    <article>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </article>
+  </body>
+</html>
+```
+
+O elemento raiz (`<html>`) não herdará nada porque é o primeiro elemento do documento.
+Adicione um pouco de CSS no elemento HTML,
+e ele começará a se propagar pelo documento.
+
+```css
+html {
+  color: lightslategray;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEKgBX',
+  height: 200
+} %}
+</figure>
+
+A propriedade `color` é herdada por outros elementos.
+O elemento `html` tem `color: lightslategray`,
+portanto, todos os elementos que podem herdar cores agora terão a cor `lightslategray`.
+
+```css
+body {
+  font-size: 1.2em;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'VwPLrLP',
+  height: 200
+} %}
+</figure>
+
+{% Aside %}
+Como essa demonstração define o tamanho da fonte no elemento `body`,
+o elemento `html` ainda terá o tamanho da fonte inicial definido pelo navegador (user agent stylesheet),
+mas o `article` e `p` herdarão o tamanho da fonte declarado no `body`.
+Isso ocorre porque a herança propaga apenas para baixo.
+{% endAside %}
+
+```css
+p {
+  font-style: italic;
+}
+```
+
+Apenas o `<p>` terá texto em itálico porque é o elemento aninhado mais profundo.
+A herança propaga apenas para baixo, e não para cima, para os elementos pai.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEKgmK',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+## Quais propriedades são herdáveis?
+
+Nem todas as propriedades CSS são herdáveis,
+mas há muitas que são.
+Para referência, aqui está a lista completa de propriedades herdáveis,
+retirado da referência W3 de todas as propriedades CSS:
+
+- [azimuth](https://developer.mozilla.org/docs/Web/SVG/Attribute/azimuth)
+- [border-collapse](https://developer.mozilla.org/docs/Web/CSS/border-collapse)
+- [border-spacing](https://developer.mozilla.org/docs/Web/CSS/border-spacing)
+- [caption-side](https://developer.mozilla.org/docs/Web/CSS/caption-side)
+- [color](https://developer.mozilla.org/docs/Web/CSS/color)
+- [cursor](https://developer.mozilla.org/docs/Web/CSS/cursor)
+- [direction](https://developer.mozilla.org/docs/Web/CSS/direction)
+- [empty-cells](https://developer.mozilla.org/docs/Web/CSS/empty-cells)
+- [font-family](https://developer.mozilla.org/docs/Web/CSS/font-family)
+- [font-size](https://developer.mozilla.org/docs/Web/CSS/font-size)
+- [font-style](https://developer.mozilla.org/docs/Web/CSS/font-style)
+- [font-variant](https://developer.mozilla.org/docs/Web/CSS/font-variant)
+- [font-weight](https://developer.mozilla.org/docs/Web/CSS/font-weight)
+- [font](https://developer.mozilla.org/docs/Web/CSS/font)
+- [letter-spacing](https://developer.mozilla.org/docs/Web/CSS/letter-spacing)
+- [line-height](https://developer.mozilla.org/docs/Web/CSS/line-height)
+- [list-style-image](https://developer.mozilla.org/docs/Web/CSS/list-style-image)
+- [list-style-position](https://developer.mozilla.org/docs/Web/CSS/list-style-position)
+- [list-style-type](https://developer.mozilla.org/docs/Web/CSS/list-style-type)
+- [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style)
+- [orphans](https://developer.mozilla.org/docs/Web/CSS/orphans)
+- [quotes](https://developer.mozilla.org/docs/Web/CSS/quotes)
+- [text-align](https://developer.mozilla.org/docs/Web/CSS/text-align)
+- [text-indent](https://developer.mozilla.org/docs/Web/CSS/text-indent)
+- [text-transform](https://developer.mozilla.org/docs/Web/CSS/text-transform)
+- [visibility](https://developer.mozilla.org/docs/Web/CSS/visibility)
+- [white-space](https://developer.mozilla.org/docs/Web/CSS/white-space)
+- [widows](https://developer.mozilla.org/docs/Web/CSS/widows)
+- [word-spacing](https://developer.mozilla.org/docs/Web/CSS/word-spacing)
+
+## Como a herença funciona
+
+Cada elemento HTML tem propriedades CSS definidas com um valor inicial por padrão.
+Um valor inicial é uma propriedade que não é herdada e aparece como padrão
+caso a cascata não compute um valor para esse elemento.
+
+<figure>
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/OvoYqOMcdFZL7wJQIL2C.mp4" %}
+</figure>
+
+Propriedades podem ser herdadas em sua propagação para baixo,
+e os elementos filho obterão um valor computado que representa o valor de seu pai.
+Isso significa que, se um pai tiver `font-weight` definido como `bold`, todos os elementos filho estarão em negrito,
+a menos que o `font-weight` seja definido com um valor diferente,
+ou o `user agent stylesheet` tenha um valor de `font-weight` para esse elemento.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'xxgGPOZ'
+} %}
+</figure>
+
+## Como herdar e controlar explicitamente a herança
+
+A herança pode afetar os elementos de maneiras inesperadas, então o CSS tem ferramentas para ajudar nisso.
+
+### A palavra-chave `inherit`
+
+Você pode fazer qualquer propriedade herdar o valor computado de seu pai com a palavra-chave `inherit`.
+Uma maneira útil de usar essa palavra-chave é criar exceções.
+
+```css
+strong {
+  font-weight: 900;
+}
+```
+
+Esse trecho CSS define para todos os elementos `<strong>` ter um `font-weight` de `900`,
+em vez do valor padrão `bold`, que seria o equivalente a `font-weight: 700`.
+
+```css
+.my-component {
+  font-weight: 500;
+}
+```
+
+A classe `.my-component` define o `font-weight` como 500.
+Para definir os elementos `<strong>` dentro de `.my-component` como `font-weight: 500`, adicione:
+
+```css
+.my-component strong {
+  font-weight: inherit;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'eYgNedO',
+  height: 400
+} %}
+</figure>
+
+Agora, os elementos `<strong>` dentro de `.my-component` terão um `font-weight` de `500`.
+
+Você pode definir explicitamente esse valor,
+mas se você usar `inherit` e o CSS de `.my-component` mudar futuramente,
+você pode garantir que seu `<strong>` automaticamente se manterá atualizado.
+
+### A palavra-chave `initial`
+
+A herança pode causar problemas com seus elementos e `initial` fornece uma poderosa opção de reset.
+
+Você aprendeu anteriormente que toda propriedade CSS tem um valor padrão.
+A palavra-chave `initial` define o valor inicial padrão de uma propriedade.
+
+```css
+aside strong {
+  font-weight: initial;
+}
+```
+
+Esse trecho removerá o negrito de todos os elementos `<strong>` dentro de um elemento `<aside>` e, em vez disso,
+tornará todos em normal, que é o valor inicial.
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'OJWVORZ',
+  tab: 'css,result',
+  height: 300
+} %}
+</figure>
+
+### A palavra-chave `unset`
+
+A propriedade `unset` se comporta de forma diferente se uma propriedade é herdável ou não.
+Se uma propriedade é herdável,
+a palavra-chave `unset` será a mesma que `inherit`.
+Se a propriedade não for herdável, `unset` será igual a `initial`.
+
+Lembrar quais propriedades CSS são herdáveis pode ser difícil,
+`unset` pode ser útil nesse contexto.
+Por exemplo, `color` é herdável,
+mas `margin` não é, então você pode escrever isso:
+
+```css
+/* Estilos de cores globais para parágrafo em CSS autoral */
+p {
+  margin-top: 2em;
+  color: goldenrod;
+}
+
+/* O p precisa ser resetado nos asides, então você pode usar unset */
+aside p {
+  margin: unset;
+  color: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'JjEdpjw',
+  tab: 'css,result',
+  height: 400
+} %}
+</figure>
+
+Agora, o `margin` é removido e a `color` volta a ser o valor computado herdado.
+
+Você também pode usar o valor `unset` com a propriedade `all`.
+Voltando ao exemplo acima,
+o que acontece se os estilos globais `p` obtiverem algumas propriedades adicionais?
+Apenas a regra que foi definida para `margin` e `color` será aplicada.
+
+```css/5-6
+/* Estilos de cores globais para parágrafo em CSS autoral */
+p {
+	margin-top: 2em;
+	color: goldenrod;
+	padding: 2em;
+	border: 1px solid;
+}
+
+/* Nem todas as propriedades são computadas */
+aside p {
+	margin: unset;
+	color: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'bGgdLNB',
+  tab: 'css,result'
+} %}
+</figure>
+
+Se você alterar a regra `aside p` para `all: unset`,
+não importa quais estilos globais serão aplicados a `p` no futuro,
+eles sempre serão unset.
+
+```css/2-3
+aside p {
+	margin: unset;
+	color: unset;
+	all: unset;
+}
+```
+
+<figure>
+{% Codepen {
+  user: 'web-dot-dev',
+  id: 'XWpbZbB',
+  tab: 'css,result'
+} %}
+</figure>
+
+{% Assessment 'conclusion' %}
+
+## Referências
+
+- [Referência MDN para valores computados](https://developer.mozilla.org/docs/Web/CSS/computed_value)
+- [Um artigo sobre como a herança pode ser útil em front-ends modulares](https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/)
diff --git a/src/site/content/pt/learn/css/layout/index.md b/src/site/content/pt/learn/css/layout/index.md
new file mode 100644
index 00000000000..0e7917a8439
--- /dev/null
+++ b/src/site/content/pt/learn/css/layout/index.md
@@ -0,0 +1,227 @@
+---
+title: Layout
+description: |2
+
+  Uma visão geral dos vários métodos de layout que você deve escolher ao construir um componente ou layout de página.
+audio:
+  title: 'O CSS Podcast   - 009: Layout'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_009_v1.1.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-20
+tags:
+  - css
+---
+
+Imagine que você está trabalhando como desenvolvedor e um colega designer lhe entrega um design para um novo site. O design tem todos os tipos de layouts e composições interessantes: layouts bidimensionais que levam em consideração a largura e altura da janela de visualização, bem como layouts que precisam ser fluidos e flexíveis. Como você decide a melhor maneira de estilizá-los com CSS?
+
+O CSS nos oferece várias maneiras de resolver problemas de layout, em um eixo horizontal, eixo vertical ou até mesmo ambos. Escolher o método de layout correto para um contexto pode ser difícil e, frequentemente, você pode precisar de mais de um método de layout para resolver seu problema. Para ajudar com isso, nos módulos a seguir, você aprenderá sobre os recursos exclusivos de cada mecanismo de layout CSS para informar essas decisões.
+
+## Layout: uma breve história
+
+Nos primórdios da web, designs mais complexos do que um simples documento eram dispostos com elementos `<table>`. Separar o HTML dos estilos visuais ficou mais fácil quando o CSS foi amplamente adotado pelos navegadores no final dos anos 90. O CSS abriu a porta para os desenvolvedores poderem mudar completamente a aparência de um site sem jamais tocar no HTML. Esse novo recurso inspirou projetos como [The CSS Zen Garden](http://www.csszengarden.com), criado para demonstrar o poder do CSS e encorajar mais desenvolvedores a aprendê-lo. O CSS  também evoluiu conforme nossas necessidades de web design e tecnologia dos navegadores. Você pode ler como o layout CSS e nossa abordagem ao layout evoluíram ao longo do tempo[neste artigo de Rachel Andrew](https://24ways.org/2019/a-history-of-css-through-15-years-of-24-ways/) . {% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/vDDoFFoPVgJEuEaqcP4H.svg", alt="Uma linha do tempo mostrando como o CSS evoluiu ao longo dos anos, do começo em 1996 até 2021", width="760", height="270" %}
+
+## Layout: o presente e o futuro
+
+O CSS moderno tem ferramentas de layout excepcionalmente poderosas. Temos sistemas dedicados para layout e vamos dar uma olhada de alto nível no que temos à nossa disposição antes de nos aprofundarmos em mais detalhes nos próximos módulos sobre o Flexbox e o Grid.
+
+## Compreendendo a propriedade `display`
+
+A propriedade `display` faz duas coisas. A primeira coisa que ela faz é determinar se a caixa à qual se aplica atua como embutida ou em bloco.
+
+```css
+.my-element {
+  display: inline;
+}
+```
+
+Os elementos embutidos se comportam como palavras em uma frase. Eles ficam lado a lado na direção inline. Elementos como `<span>` e `<strong>`, que normalmente são usados para estilizar pedaços de texto dentro de elementos como `<p>` (parágrafo), são embutidos por padrão. Eles também preservam os espaços em branco circundantes. {% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/GezxDZXkJgkMevkKg39M.png", alt="Um diagrama mostrando todos os diferentes tamanhos de uma caixa e onde cada seção de dimensionamento começa e termina", width="800", height="559" %} Você não pode definir uma largura e altura explícitas em elementos embutidos. Qualquer margem de nível de bloco e preenchimento serão ignorados pelos elementos circundantes.
+
+```css
+.my-element {
+	display: block;
+}
+```
+
+Os elementos de bloco não ficam lado a lado. Eles criam uma nova linha para si próprios. A menos que seja alterado por outro código CSS, um elemento de bloco se expandirá para o tamanho da dimensão embutida, portanto, abrangendo toda a largura em um modo de escrita horizontal. A margem em todos os lados de um elemento de bloco é respeitada.
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+A propriedade `display` também determina como os filhos de um elemento devem se comportar. Por exemplo, definir a propriedade `display` para `display: flex` torna a caixa uma caixa em nível de bloco e também converte seus filhos em itens flexíveis. Isso habilita as propriedades flex que controlam o alinhamento, a ordem e o fluxo.
+
+## Flexbox e Grid
+
+Existem dois mecanismos principais de layout que criam regras de layout para vários elementos, *[flexbox](/learn/css/flexbox)* e *[grid](/learn/css/grid)*. Eles compartilham semelhanças, mas são projetados para resolver diferentes problemas de layout. {% Aside %} Entraremos em muito mais detalhes sobre ambos em módulos futuros, mas aqui está uma visão geral de alto nível do que são e para que servem. {% endAside %}
+
+### Flexbox
+
+```css
+.my-element {
+	display: flex;
+}
+```
+
+O Flexbox é um mecanismo de layout para layouts unidimensionais. Layout em um único eixo, horizontal ou verticalmente. Por padrão, o Flexbox irá alinhar os filhos do elemento um ao lado do outro, na direção inline, e esticá-los na direção do bloco, de forma que todos tenham a mesma altura. {% Codepen { user: 'web-dot-dev', id: 'rNjxmor', tab: 'css,result', height: 300 } %} Os itens permanecerão no mesmo eixo e não serão quebrados quando ficarem sem espaço . Em vez disso, eles tentarão se espremer na mesma linha que os outros. Esse comportamento pode ser alterado usando as propriedades `align-items`, `justify-content` e `flex-wrap`. {% Codepen {user: 'web-dot-dev', id: 'jOyWLmg'}%} O Flexbox também converte os elementos filhos em **flex items**, o que significa que você pode escrever regras sobre como eles se comportam dentro de um flex container. Você pode alterar o alinhamento, a ordem e a justificação de um item individual. Você também pode alterar como ele diminui ou aumenta usando a propriedade `flex`
+
+```css
+.my-element div {
+ 	flex: 1 0 auto;
+}
+```
+
+A propriedade `flex` é uma abreviação de `flex-grow`, `flex-shrink` e `flex-basis`. Você pode expandir o exemplo acima assim:
+
+```css
+.my-element div {
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-basis: auto;
+}
+```
+
+Os desenvolvedores fornecem essas regras de baixo nível para sugerir ao navegador como o layout deve se comportar quando for desafiado pelo conteúdo e pelas dimensões da janela de visualização. Isso o torna um mecanismo muito útil para o web design responsivo.
+
+### Grid
+
+```css
+.my-element {
+	display: grid;
+}
+```
+
+Grid é semelhante em muitas maneiras ao **flexbox**, mas é projetado para controlar layouts de múltiplos eixos em vez de layouts de eixo único (espaço vertical ou horizontal). O Grid permite que você escreva regras de layout em um elemento que tenha `display: grid` e apresente alguns novos primitivos para estilo de layout, como as funções `repeat()` e `minmax()`. Uma unidade de grade útil é a `fr` - que é uma fração do espaço restante - você pode construir grades tradicionais de 12 colunas, com uma lacuna entre cada item, com 3 propriedades CSS:
+
+```css
+.my-element {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+```
+
+{% Codepen {user: 'web-dot-dev', id: 'rNjxGVz'}%} Este exemplo acima mostra um layout de eixo único. Enquanto o flexbox trata principalmente os itens como um grupo, a grade oferece controle preciso sobre sua colocação em duas dimensões. Podemos definir que o primeiro item nesta grade ocupa 2 linhas e 3 colunas:
+
+```css
+.my-element :first-child {
+  grid-row: 1/3;
+  grid-column: 1/4;
+}
+```
+
+As propriedades `grid-row` `grid-column` instruem o primeiro elemento na grade a se estender até o início da quarta coluna, a partir da primeira coluna e, em seguida, se estender até a terceira linha, a partir da primeira linha. {% Codepen { user: 'web-dot-dev', id: 'YzNwrwB', height: 650 } %}
+
+## Layout de fluxo
+
+Se não estiver usando grade ou flexbox, seus elementos serão exibidos em fluxo normal. Existem vários métodos de layout que você pode usar para ajustar o comportamento e a posição dos itens quando em fluxo normal.
+
+### Bloco inline
+
+Lembra-se de como os elementos ao redor não respeitam a margem do bloco e o preenchimento em um elemento inline? Com o `inline-block`, você *pode* fazer com que isso aconteça.
+
+```css
+p span {
+	display: inline-block;
+}
+```
+
+Usar `inline-block` fornece a você uma caixa que possui algumas das características de um elemento de nível de bloco, mas ainda flui embutido com o texto.
+
+```css
+p span {
+	margin-top: 0.5rem;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'PoWZJKw', height: 300, tab: 'css,result' } %}
+
+### Flutuadores
+
+Se você tem uma imagem dentro de um parágrafo de texto, não seria útil que o texto envolvesse a imagem como você vê nos jornais? Você pode fazer isso com flutuadores.
+
+```css
+img {
+	float: left;
+	margin-right: 1em;
+}
+```
+
+A propriedade `float` instrui um elemento a "flutuar" na direção especificada. A imagem neste exemplo é instruída a flutuar para a esquerda, o que permite que os elementos irmãos se "embrulhem" em torno dela. Você pode instruir um elemento a flutuar para a `left`, `right` ou `inherit`. {% Codepen {user: 'web-dot-dev', id: 'VwPaLMg', height: 300}%} {% Aside 'warning' %} Ao usar `float`, lembre-se de que qualquer elemento após o elemento flutuado pode ter seu layout ajustado. Para evitar isso, você pode limpar o float, usando `clear: both` em um elemento que segue seu elemento flutuado *ou* com `display: flow-root` no pai de seus elementos flutuantes. Saiba mais no artigo [O fim do hack do clearfix](https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/). {% endAside %}
+
+### Layout de várias colunas
+
+Se você tem uma lista muito longa de elementos, como uma lista de todos os países do mundo, isso pode resultar em *muita* rolagem e perda de tempo para o usuário. Ele também pode criar espaços em branco excessivos na página. Com o CSS multicolunas, você pode dividir essa lista em várias colunas para ajudar com esses dois problemas.
+
+```html
+<h1>Todos os países</h1>
+<ul class="countries">
+  <li>Argentina</li>
+  <li>Ilhas Aland</li>
+  <li>Albânia</li>
+  <li>Argélia</li>
+  <li>Samoa Americana</li>
+  <li>Andorra</li>
+  …
+</ul>
+```
+
+```css
+.countries {
+	column-count: 2;
+	column-gap: 1em;
+}
+```
+
+Isso divide automaticamente essa longa lista em duas colunas e adiciona uma lacuna entre as duas colunas. {% Codepen { user: 'web-dot-dev', id: 'gOgrpzO' } %}
+
+```css
+.countries {
+	width: 100%;
+	column-width: 260px;
+	column-gap: 1em;
+}
+```
+
+{% Codepen {user: 'web-dot-dev', id: 'jOyqPvB'}%} Em vez de definir o número de colunas em que o conteúdo é dividido, você também pode definir uma largura mínima desejada, usando `column-width`. À medida que mais espaço é disponibilizado na janela de visualização, mais colunas serão criadas automaticamente e, à medida que o espaço é reduzido, as colunas também reduzem. Isso é muito útil em contextos de web design responsivo.
+
+### Posicionamento
+
+Por último nesta visão geral dos mecanismos de layout está o posicionamento. A propriedade `position` muda como um elemento se comporta no fluxo normal do documento e como ele se relaciona com outros elementos. As opções disponíveis são `relative`, `absolute`, `fixed` e `sticky` com o valor padrão sendo `static` .
+
+```css
+.my-element {
+  position: relative;
+  top: 10px;
+}
+```
+
+Este elemento é deslocado 10 px para baixo com base em sua posição atual no documento, visto que está posicionado em relação a si mesmo. Adicionar `position: relative` a um elemento também o torna o bloco que contém qualquer elemento filho com `position: absolute`. Isso significa que seu filho agora será reposicionado para este elemento específico, em vez do pai relativo superior, quando ele tiver uma posição absoluta aplicada a ele.
+
+```css
+.my-element {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.another-element {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 50px;
+	height: 50px;
+}
+```
+
+Quando você define a `position` como `absolute` , ele quebra o elemento do fluxo de documento atual. Isso significa duas coisas:
+
+1. Você pode posicionar este elemento onde quiser, usando `top`, `right`, `bottom` e `left` em seu pai relativo mais próximo.
+2. Todo o conteúdo em torno de um elemento absoluto reflui para preencher o espaço restante deixado por esse elemento. Um elemento com um valor de `position` `fixed` se comporta de maneira semelhante ao `absolute` , com seu pai sendo o elemento raiz `<html>` . Os elementos de posição fixa permanecem ancorados no canto superior esquerdo com base nos valores `top` , `right` , `bottom` e `left` que você definir. Você pode obter os aspectos `fixed` e ancorados de aspectos fixos e os aspectos mais previsíveis de homenagem ao fluxo de documentos `relative` usando `sticky` . Com esse valor, conforme a janela de visualização rola além do elemento, ela permanece ancorada nos valores `top` , `right` , `bottom` e `left` que você definiu. {% Codepen {user: 'web-dot-dev', id: 'NWdNGZB', height: 600}%}
+
+## Para finalizar
+
+Há muitas opções e flexibilidade no layout CSS. Para se aprofundar ainda mais no poder do CSS [Flexbox](/learn/css/flexbox) e [Grid](/learn/css/grid), continue nos próximos módulos. {% Assessment 'layout' %}
diff --git a/src/site/content/pt/learn/css/layout/layout.assess.yml b/src/site/content/pt/learn/css/layout/layout.assess.yml
new file mode 100644
index 00000000000..dcf44657d0b
--- /dev/null
+++ b/src/site/content/pt/learn/css/layout/layout.assess.yml
@@ -0,0 +1,63 @@
+setLeader: Test your knowledge of layout
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,2"
+    stem: "What 2 things does the `display` property do?"
+    options:
+      - content: "Determines `inline` or `block` or `none`."
+        rationale: "The layout engine needs to know if this box be full width or
+        not and does it need a new line."
+      - content: "Determines the grid layout frame."
+        rationale: "The display property can set display to grid but it doesn't
+        have anything to do with a layout frame."
+      - content: "Determines how the children should behave."
+        rationale: "Flexbox and grid have opinions and new features for their
+        children."
+      - content: "Determines if the box should scroll."
+        rationale: "That's the `overflow` property."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: |
+      To flow multiple paragraphs into columns, which CSS property is best for
+      this task?
+    options:
+      - content: "`display: grid`"
+        rationale: "While grid could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next."
+      - content: "`column-count`"
+        rationale: "Paragraphs will flow from the end of one column into the
+        start of the next, like a magazine or newspaper will do."
+      - content: "`display: flex`"
+        rationale: "While flex could put multiple paragraphs into columns, those
+        columns would be their own columns, not flowing together from one to the
+        next like is needed."
+      - content: "`float`"
+        rationale: "Try again!"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What does it mean if a block is out of flow?"
+    options:
+      - content: "It's stuck on the side of the river."
+        rationale: "Context is CSS here, not geography."
+      - content: "It's been given a `top` or `left` position value."
+        rationale: "Having these properties alone do not pull a box out of flow."
+      - content: "It's no longer positioned based on its siblings positions."
+        rationale: "A box with `position: absolute` for example, is now
+        positioned with x and y coordinates based on the containing block, and
+        not its order with other sibling elements."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: "Flexbox and Grid wrap their children by default?"
+    options:
+      - content: "True"
+        rationale: "It must be opted into with `flex-wrap: wrap` or
+        `repeat(auto-fit, 30ch)`."
+      - content: "False"
+        rationale: "Flexbox and Grid have special wrapping features that
+        need additional styles to apply."
diff --git a/src/site/content/pt/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/pt/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/pt/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/pt/learn/css/selectors/index.md b/src/site/content/pt/learn/css/selectors/index.md
new file mode 100644
index 00000000000..b1d432884ba
--- /dev/null
+++ b/src/site/content/pt/learn/css/selectors/index.md
@@ -0,0 +1,357 @@
+---
+title: Seletores
+description: |2
+
+  Para aplicar CSS a um elemento, você precisa selecioná-lo.
+  CSS oferece várias maneiras diferentes de fazer isso,
+  e você pode explorá-los neste módulo.
+audio:
+  title: 'O CSS Podcast   - 002: Seletores'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Se você tem algum texto que só deseja que fique maior e vermelho se for o primeiro parágrafo de um artigo, como fazer isso?
+
+```html
+<article>
+  <p>I want to be red and larger than the other text.</p>
+  <p>I want to be normal sized and the default color.</p>
+</article>
+```
+
+Você usa um seletor CSS para encontrar aquele elemento específico e aplicar uma regra CSS, como esta.
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+O CSS fornece muitas opções para selecionar elementos e aplicar regras a eles, que variam de muito simples a muito complexas, para ajudar a resolver situações como essa.
+
+{% Codepen {user: 'web-dot-dev', id: 'XWprGYz', height: 250}%}
+
+## As partes de uma regra de CSS
+
+Para entender como os seletores funcionam e sua função no CSS, é importante conhecer as partes de uma regra CSS. Uma regra CSS é um bloco de código, contendo um ou mais seletores e uma ou mais declarações.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="Uma imagem de uma regra de CSS com o seletor .my-css-rule", width="800", height="427" %}</figure>
+
+Nesta regra de CSS, o **seletor** é `.my-css-rule` que encontra todos os elementos com uma classe de `my-css-rule` na página. Existem três declarações dentro das chaves. Uma declaração é um par de propriedade e valor que aplica estilos aos elementos correspondidos pelos seletores. Uma regra de CSS pode ter quantas declarações e seletores você desejar.
+
+## Seletores simples
+
+O grupo mais direto de seletores tem como alvo elementos HTML mais classes, IDs e outros atributos que podem ser adicionados a uma tag HTML.
+
+### Seletor universal
+
+Um [seletor universal](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) - também conhecido como curinga - corresponde a qualquer elemento.
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+Esta regra faz com que cada elemento HTML na página tenha texto hotpink.
+
+### Seletor de tipo
+
+Um [seletor de tipo](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) corresponde diretamente a um elemento HTML.
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+Esta regra faz com que cada elemento `<section>` tenha `2em` de `padding` em todos os lados.
+
+### Seletor de classe
+
+Um elemento HTML pode ter um ou mais itens definidos em seu atributo de `class`. O [seletor de classe](https://developer.mozilla.org/docs/Web/CSS/Class_selectors) corresponde a qualquer elemento que tenha essa classe aplicada a ele.
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+Qualquer elemento que tenha a classe aplicada a ele terá a cor vermelha:
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+Observe como o `.` só está presente em CSS e **não em** HTML. Isso ocorre porque o `.` caractere instrui a linguagem CSS para corresponder aos membros do atributo de classe. Este é um padrão comum em CSS, onde um caractere especial, ou conjunto de caracteres, é usado para definir os tipos de seletor.
+
+Um elemento HTML que possui uma classe de `.my-class` ainda corresponderá à regra CSS acima, mesmo se eles tiverem várias outras classes, como esta:
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+Isso ocorre porque o CSS procura por um atributo de `class` que *contém* a classe definida, em vez de corresponder exatamente a essa classe.
+
+{% Aside %} O valor de um atributo de classe pode ser quase qualquer coisa que você quiser. `.1element` é que você não pode começar uma aula (ou um ID) com um número, como .1elemento. Você pode ler mais [nas especificações](https://www.w3.org/TR/CSS21/syndata.html#characters) . {% endAside %}
+
+### Seletor de ID
+
+Um elemento HTML com um `id` deve ser o único elemento em uma página com esse valor de ID. Você seleciona elementos com um [seletor de ID](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) como este:
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+Este CSS aplicaria uma borda azul ao elemento HTML que possui um `id` de `rad` , como este:
+
+```html
+<div id="rad"></div>
+```
+
+Da mesma forma que o seletor de classes `.`, use um `#` para instruir o CSS a procurar um elemento que corresponda ao `id` que o segue.
+
+{% Aside %} Se o navegador encontrar mais de uma instância de um `id` ele ainda aplicará quaisquer regras CSS que correspondam ao seu seletor. No entanto, qualquer elemento que tenha um `id` deve ter um valor único para ele, então, a menos que você esteja escrevendo CSS muito específico para um único elemento, evite aplicar estilos com o `id`, pois isso significa que você não pode reutilizar esses estilos em outros lugares. {% endAside %}
+
+### Seletor de atributo
+
+Você pode procurar por elementos que possuem um determinado atributo HTML, ou um determinado valor para um atributo HTML, usando o [seletor de atributos](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors). Instrua o CSS a procurar atributos envolvendo o seletor com colchetes (`[ ]`).
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+Este CSS procura todos os elementos que possuem um atributo de `data-type` de dados com um valor `primary`, como este:
+
+```html
+<div data-type="primary"></div>
+```
+
+Em vez de procurar um valor específico de `data-type` de dados, você também pode procurar elementos com o atributo presente, independentemente de seu valor.
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+Ambos os `<div>` terão texto em vermelho.
+
+Você pode usar seletores de atributo com distinção entre maiúsculas e minúsculas adicionando um `s` ao seu seletor de atributo.
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+Isso significa que se um elemento HTML tivesse um `data-type` de `Primary`, em vez de `primary` , ele não obteria texto em vermelho. Você pode fazer o oposto - não diferenciação de maiúsculas e minúsculas - usando um operador `i`
+
+Junto com os operadores de caso, você tem acesso a operadores que combinam partes de strings dentro de valores de atributo.
+
+```css
+/* A href that contains "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* A href that starts with https */
+[href^='https'] {
+  color: green;
+}
+
+/* A href that ends with .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen {user: 'web-dot-dev', id: 'BapBbOy'}%}<figcaption> Neste demo, o operador `$` em nosso seletor de atributo obtém o tipo de arquivo do atributo `href`. Isso torna possível prefixar o rótulo - com base nesse tipo de arquivo - usando um pseudoelemento.</figcaption></figure>
+
+### Seletores de agrupamento
+
+Um seletor não precisa corresponder a apenas um único elemento. Você pode agrupar vários seletores, separando-os com vírgulas:
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+Este exemplo estende a mudança de cor para os elementos `<strong>` `<em>`. Ele também é estendido para uma classe chamada `.my-class` e um elemento que possui um atributo `lang`
+
+{% Assessment 'simple-selectors' %}
+
+## Pseudo-classes e pseudo-elementos
+
+O CSS fornece tipos de seletores úteis que se concentram no estado específico da plataforma, como quando um elemento é passado, estruturas *dentro de* um elemento ou partes de um elemento.
+
+### Pseudo-classes
+
+Os elementos HTML encontram-se em vários estados, seja porque interagem com eles ou porque um de seus elementos filhos está em um determinado estado.
+
+Por exemplo, um elemento HTML pode ser passado com o ponteiro do mouse por um usuário *ou* um elemento filho também pode ser passado pelo usuário. Para essas situações, use a `:hover`.
+
+```css
+/* Our link is hovered */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Sets all even paragraphs to have a different background */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+Saiba mais no [módulo de pseudo-classes](/learn/css/pseudo-classes).
+
+### Pseudo-elemento
+
+Os pseudo-elementos diferem das pseudo-classes porque em vez de responder ao estado da plataforma, eles agem como se estivessem inserindo um novo elemento com CSS. Pseudo-elementos também são sintacticamente diferente da pseudo-classes, porque em vez de usar um único sinal dois pontos (`:`), usamos dois pontos duplos (`::`).
+
+{% Aside %} Dois-pontos duplos (`::`) é o que distingue um pseudo-elemento de uma pseudo-classe, mas como essa distinção não estava presente em versões anteriores das especificações CSS, os navegadores suportam um único dois-pontos para os pseudo-elementos originais, como `:before` e `:after` para ajudar na compatibilidade com navegadores mais antigos, como o IE8. {% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+Como na demonstração acima, onde você prefixou o rótulo de um link com o tipo de arquivo, você pode usar o pseudo-elemento `::before` **para inserir conteúdo no início de um elemento**, ou o pseudo-elemento `::after` no **final de um elemento**.
+
+Pseudo-elementos não se limitam a inserir conteúdo, no entanto. Você também pode usá-los para direcionar partes específicas de um elemento. Por exemplo, suponha que você tenha uma lista. Use `::marker` para definir o estilo de cada marcador (ou número) na lista
+
+```css
+/* Your list will now either have red dots, or red numbers */
+li::marker {
+  color: red;
+}
+```
+
+Você também pode usar `::selection` para aplicar estio ao conteúdo que foi destacado por um usuário.
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+Saiba mais no [módulo sobre pseudoelementos](/learn/css/pseudo-elements).
+
+{% Assessment 'pseudo-selectors' %}
+
+## Seletores complexos
+
+Você já viu uma vasta gama de seletores, mas às vezes, você precisará de um *controle* mais refinado com seu CSS. É aqui que os seletores complexos entram em cena para ajudar.
+
+Vale a pena lembrar que, embora os seletores a seguir nos deem mais poder, podemos apenas **cascatear para baixo**, selecionando os elementos filhos. Não podemos direcionar para cima e selecionar um elemento pai. Abordaremos o que é a cascata e como ela funciona [em uma lição posterior](/learn/css/the-cascade).
+
+### Combinadores
+
+Um combinador é o que fica entre dois seletores. Por exemplo, se o seletor foi `p > strong`, o combinador é o caractere `>`. Os seletores que usam esses combinadores ajudam a selecionar itens com base em suas posições no documento.
+
+#### Combinador descendente
+
+Para entender os combinadores descendentes, você precisa primeiro entender os elementos pai e filho.
+
+```html
+<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
+```
+
+O elemento pai é o `<p>` que contém o texto. Dentro desse `<p>` está um elemento `<strong>`, tornando seu conteúdo em negrito. Por estar dentro do `<p>`, é um elemento filho.
+
+Um combinador descendente nos permite almejar um elemento filho. Isso usa um espaço (` `) para instruir o navegador a procurar elementos filho:
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+Este snippet seleciona todos os `<strong>` elementos que são elementos filho dos elementos `<p>` apenas, tornando-os azuis recursivamente.
+
+<figure>{% Codepen {user: 'web-dot-dev', id: 'BapBbGN'}%}<figcaption> Como o combinador descendente é recursivo, o preenchimento adicionado a cada elemento filho se aplica, resultando em um efeito escalonado.</figcaption></figure>
+
+Este efeito é melhor visualizado no exemplo acima, usando o seletor combinador, `.top div`. Essa regra CSS adiciona preenchimento esquerdo a esses elementos `<div>` Como o combinador é recursivo, todos os `<div>` que estão em `.top` terão o mesmo preenchimento aplicado a eles.
+
+Dê uma olhada no painel HTML nesta demonstração para ver como o `.top` tem vários `<div>` que, eles próprios, têm elementos filhos `<div>`
+
+#### Próximo irmão combinador
+
+Você pode procurar um elemento que segue imediatamente outro elemento usando um `+` em seu seletor.
+
+{% Codepen {user: 'web-dot-dev', id: 'JjEPzwB'}%}
+
+Para adicionar espaço entre os elementos empilhados, use o próximo irmão combinador para adicionar espaço *apenas* se um elemento for o **próximo irmão** de um elemento filho de `.top`.
+
+Você pode adicionar margem a todos os elementos filho de `.top`, usando o seguinte seletor:
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+O problema com isso é que, como você está selecionando cada elemento filho de `.top`, essa regra potencialmente cria espaço extra desnecessário. O **próximo combinador irmão**, misturado com um **seletor universal,** permite não apenas controlar quais elementos recebem espaço, mas também aplicar espaço a **qualquer elemento**. Isso fornece alguma flexibilidade de longo prazo, independentemente de quais elementos HTML aparecem em `.top`.
+
+#### Subsequente - irmão combinador
+
+Um combinador subsequente é muito semelhante a um seletor irmão seguinte. No entanto, em vez de um `+`, use um caractere `~`. A diferença é que um elemento precisa apenas seguir outro elemento com o mesmo pai, em vez de ser o próximo elemento com o mesmo pai.
+
+<figure>{% Codepen {user: 'web-dot-dev', id: 'ZELzPPX', height: 400}%}<figcaption> Use um seletor subsequente junto com uma pseudo classe `: check` para criar um elemento switch CSS puro.</figcaption></figure>
+
+Este combinador subsequente fornece um pouco menos de rigidez, o que é útil em contextos como o exemplo acima, onde alteramos a cor de um switch personalizado quando sua caixa de seleção associada tem o estado `:checked`
+
+#### Combinador filho
+
+Um combinador filho (também conhecido como descendente direto) permite mais controle sobre a recursão que vem com os seletores do combinador. Ao usar o `>`, você limita o seletor de combinador para aplicar **apenas** aos filhos diretos.
+
+Considere o exemplo anterior do seletor irmão seguinte. O espaço é adicionado a cada **irmão seguinte** , mas se um desses elementos também tiver **elementos do próximo irmão** como filhos, isso pode resultar em espaçamento extra indesejável.
+
+{% Codepen {user: 'web-dot-dev', id: 'ExZYMJL'}%}
+
+Para aliviar esse problema, altere o **próximo seletor irmão** para incorporar um combinador filho: `> * + *`. A regra agora **só se** aplica a filhos diretos de `.top` .
+
+{% Codepen {user: 'web-dot-dev', id: 'dyNbrEr'}%}
+
+### Seletores compostos
+
+Você pode combinar seletores para aumentar a especificidade e a legibilidade. Por exemplo, para direcionar `<a>`, que também têm uma classe de `.my-class`, escreva o seguinte:
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+Isso não aplicaria uma cor vermelha a todos os links e também aplicaria apenas a cor vermelha a `.my-class` **se** estivesse em um elemento `<a>`. Para saber mais sobre isso, consulte o [módulo de especificidade](/learn/css/specificity).
+
+{% Assessment 'complex-selectors' %}
+
+## Recursos
+
+- [Referência de seletores CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [Jogo de seletores interativo](https://flukeout.github.io/)
+- [Referência de pseudoclasse e pseudoelementos](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [Uma ferramenta que traduz seletores de CSS em explicadores em inglês simples](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/pt/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/pt/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/pt/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/pt/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/pt/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/pt/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/pt/learn/css/specificity/index.md b/src/site/content/pt/learn/css/specificity/index.md
new file mode 100644
index 00000000000..4e7f8d0ab5f
--- /dev/null
+++ b/src/site/content/pt/learn/css/specificity/index.md
@@ -0,0 +1,298 @@
+---
+title: Especificidade
+description: Este módulo traz mais detalhes de uma parte fundamental da cascata.
+audio:
+  title: 'O CSS Podcast   - 003: Especificidade'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-04-02
+---
+
+Suponha que você esteja trabalhando com o seguinte HTML e CSS:
+
+```html
+<button class="branding">Hello, Specificity!</button>
+```
+
+```css
+button {
+  color: red;
+}
+
+.branding {
+  color: blue;
+}
+```
+
+Existem duas regras concorrentes aqui. Uma colorirá o botão de vermelho e a outra de azul. Qual regra é aplicada ao elemento? Compreender o algoritmo da especificação CSS sobre a especificidade é fundamental para entender como o CSS decide entre regras concorrentes.
+
+A especificidade é um dos quatro estágios distintos da cascata, que foi abordada no último módulo, na [cascata](/learn/css/the-cascade/).
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'YzNKMXm', height: 200 } %}</figure>
+
+## Pontuação de especificidade
+
+Cada regra do seletor obtém uma pontuação. Você pode pensar sobre a especificidade como uma pontuação total e cada tipo de seletor ganha pontos para essa pontuação. O seletor com a maior pontuação vence.
+
+Com a especificidade em um projeto real, o ato de equilíbrio é garantir que as regras CSS que você espera aplicar realmente se *apliquem,* enquanto geralmente mantém as pontuações baixas para evitar a complexidade. A pontuação deve ser tão alta quanto precisamos, ao invés de almejar a pontuação mais alta possível. No futuro, alguns CSS genuinamente mais importantes podem precisar ser aplicados. Se você tentar a pontuação mais alta, dificultará esse trabalho.
+
+## Pontuação de cada tipo de seletor
+
+Cada tipo de seletor ganha pontos. Você adiciona todos esses pontos para calcular a especificidade geral de um seletor.
+
+### Seletor universal
+
+Um [seletor universal](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) ( `*` ) **não** tem especificidade e recebe **0 pontos** . Isso significa que qualquer regra com 1 ou mais pontos irá substituí-la
+
+```css
+* {
+  color: red;
+}
+```
+
+### Seletor de elemento ou pseudoelemento
+
+Um [elemento](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) (tipo) ou [pseudo-elemento](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) selector recebe **um ponto de especificidade.**
+
+#### Seletor de tipo
+
+```css
+div {
+  color: red;
+}
+```
+
+#### Seletor de pseudoelemento
+
+```css
+::selection {
+  color: red;
+}
+```
+
+### Classe, pseudoclasse ou seletor de atributo
+
+Uma [classe](https://developer.mozilla.org/docs/Web/CSS/Class_selectors), [pseudoclasse](https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes) ou seletor de [atributo](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) **obtém 10 pontos de especificidade**.
+
+#### Seletor de classe
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+#### Seletor de pseudoclasse
+
+```css
+:hover {
+  color: red;
+}
+```
+
+#### Seletor de atributo
+
+```css
+[href='#'] {
+  color: red;
+}
+```
+
+A pseudoclasse [`:not()`](https://developer.mozilla.org/docs/Web/CSS/:not) em si não adiciona nada ao cálculo de especificidade. No entanto, os seletores passados como argumentos são incluídos no cálculo da especificidade.
+
+```css
+div:not(.my-class) {
+  color: red;
+}
+```
+
+Esta amostra teria **11 pontos** de especificidade porque tem um seletor de tipo ( `div` ) e uma classe *dentro de* `:not()`.
+
+### Seletor de ID
+
+Um seletor de [ID](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) **obtém 100 pontos de especificidade**, contanto que você use um seletor de ID ( `#myID` ) e não um seletor de atributo ( `[id="myID"]` ).
+
+```css
+#myID {
+  color: red;
+}
+```
+
+### Atributo de estilo inline
+
+CSS aplicado diretamente ao `style` do elemento HTML, obtém uma **pontuação de especificidade de 1.000 pontos**. Isso significa que, para substituí-lo no CSS, você deve escrever um seletor extremamente específico.
+
+```html
+<div style="color: red"></div>
+```
+
+### Regra `!important`
+
+Por último, um `!important` no final de um valor CSS obtém uma pontuação de especificidade de **10.000 pontos**. Esta é a especificidade mais alta que um item individual pode obter.
+
+Uma `!important` é aplicada a uma propriedade CSS, de forma que tudo na regra geral (seletor e propriedades) não obtenha a mesma pontuação de especificidade.
+
+```css
+.my-class {
+  color: red !important; /* 10,000 pontos */
+  background: white; /* 10 pontos */
+}
+```
+
+{% Assessment 'scoring-beginner' %}
+
+## Especificidade no contexto
+
+A especificidade de cada seletor que corresponde a um elemento é adicionada. Considere este exemplo de HTML:
+
+```html
+<a class="my-class another-class" href="#">A link</a>
+```
+
+Este link contém duas classes. Adicione o seguinte CSS e ele obtém **1 ponto de especificidade** :
+
+```css
+a {
+  color: red;
+}
+```
+
+Faça referência a uma das classes nesta regra, agora ela tem **11 pontos de especificidade** :
+
+```css
+a.my-class {
+  color: green;
+}
+```
+
+Adicione a outra classe ao seletor, agora ela tem **21 pontos de especificidade** :
+
+```css
+a.my-class.another-class {
+  color: rebeccapurple;
+}
+```
+
+Adicione o atributo `href` ao seletor, agora ele tem **31 pontos de especificidade** :
+
+```css
+a.my-class.another-class[href] {
+  color: goldenrod;
+}
+```
+
+Finalmente, adicione uma `:hover` a tudo isso, o seletor termina com **41 pontos de especificidade** :
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'scoring-advanced' %}
+
+## Visualizando a especificidade
+
+Em diagramas e calculadoras de especificidade, a especificidade é frequentemente assim visualizada:
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/McrFhjqHXMznUzXbRuJ6.svg", alt="Um diagrama que demonstra dos seletores mais específicos aos menos específicos", width="800", height="474" %}
+
+O grupo esquerdo são os seletores de `id`. O segundo grupo é composto por seletores de classe, atributo e pseudoclasse. O grupo final são os seletores de elemento e pseudoelemento.
+
+Para referência, o seguinte seletor é `0-4-1` :
+
+```css
+a.my-class.another-class[href]:hover {
+  color: lightgrey;
+}
+```
+
+{% Assessment 'visualizing' %}
+
+## Aumentando a especificidade pragmaticamente
+
+Digamos que temos algum CSS parecido com este:
+
+```css
+.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+Com um HTML semelhante a este:
+
+```html
+<button class="my-button" onclick="alert('hello')">Click me</button>
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoxdR', tab: 'css,result' } %}</figure>
+
+O botão tem fundo cinza, pois o segundo seletor ganha **11 pontos de especificidade** (`0-1-1`). Isso porque ele possui um seletor de tipo (`button`), que é de **1 ponto** e um seletor de atributo (`[onclick]`), que é de **10 pontos** .
+
+A regra anterior `.my-button` ganha **10 pontos** (`0-1-0`), porque tem um seletor de classe.
+
+Se você quiser dar um impulso a esta regra, repita o seletor de classe desta forma:
+
+```css
+.my-button.my-button {
+  background: blue;
+}
+
+button[onclick] {
+  background: grey;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'zYNOXBJ', tab: 'css,result' } %}</figure>
+
+Agora, o botão terá um fundo azul, pois o novo seletor obtém uma pontuação de especificidade de **20 pontos** (`0-2-0`).
+
+{% Aside 'caution' %} Se você achar que precisa aumentar a especificidade com frequência, isso pode indicar que você está escrevendo seletores excessivamente específicos. Considere se você pode refatorar seu CSS para reduzir a especificidade de outros seletores para evitar esse problema. {% endAside %}
+
+## Uma pontuação de especificidade correspondente faz com que a instância mais recente ganhe
+
+Vamos ficar com o exemplo de botão por enquanto e mudar o CSS para este:
+
+```css
+.my-button {
+  background: blue;
+}
+
+[onclick] {
+  background: grey;
+}
+```
+
+O botão tem um fundo cinza, porque os **dois seletores têm pontuação de especificidade idêntica** (`0-1-0`).
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'zYNOXKJ', tab: 'css,result' } %}</figure>
+
+Se você mudar as regras na ordem de origem, o botão ficará azul.
+
+```css
+[onclick] {
+  background: grey;
+}
+
+.my-button {
+  background: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNReWRO', tab: 'css,result' } %}</figure>
+
+Esta é a única instância em que o CSS mais recente vence. Para fazer isso, ele deve corresponder à especificidade de outro seletor que visa o mesmo elemento.
+
+## Recursos
+
+- [Especificidade CSS](http://specifishity.com)
+- [Calculadora de Especificidade](https://specificity.keegan.st)
+- [Especificidade MDN](https://developer.mozilla.org/docs/Web/CSS/Specificity)
+- [Especificidades sobre a especificidade CSS](https://css-tricks.com/specifics-on-css-specificity/)
+- [Outra Calculadora de Especificidade](https://polypane.app/css-specificity-calculator)
diff --git a/src/site/content/pt/learn/css/specificity/scoring-advanced.assess.yml b/src/site/content/pt/learn/css/specificity/scoring-advanced.assess.yml
new file mode 100644
index 00000000000..5134be26d83
--- /dev/null
+++ b/src/site/content/pt/learn/css/specificity/scoring-advanced.assess.yml
@@ -0,0 +1,21 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is worth **21 points**?
+    options:
+      - content: "`article > section`"
+        rationale: "Elements are worth 1 point, there are 2 elements in the
+        selector, making this worth **2 points**."
+      - content: "`article.card.dark`"
+        rationale: "Elements are worth 1 point, classes are worth 10 points, and
+        with 2 classes and 1 element, that makes this selector worth **21
+        points**."
+      - content: "`article:hover a[href]`"
+        rationale: "Elements are worth 1 point, pseudo-classes and attributes
+        are worth 10 points, there are 2 points for the elements, and 20 points
+        for the attributes and classes, makes this selector worth **22
+        points**."
\ No newline at end of file
diff --git a/src/site/content/pt/learn/css/specificity/scoring-beginner.assess.yml b/src/site/content/pt/learn/css/specificity/scoring-beginner.assess.yml
new file mode 100644
index 00000000000..035104bf71e
--- /dev/null
+++ b/src/site/content/pt/learn/css/specificity/scoring-beginner.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity scoring
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What is the specificity score of `a[href="#"]`?
+    options:
+      - content: "1"
+        rationale: 'The `a` is worth 1 point, but the `[href="#"]` is worth 10
+        points.'
+      - content: "5"
+        rationale: "Try again!"
+      - content: "11"
+        rationale: 'The `a` is worth 1 point and the `[href="#"]` is worth 10
+        points, making a total score of **11 points**.'
diff --git a/src/site/content/pt/learn/css/specificity/visualizing.assess.yml b/src/site/content/pt/learn/css/specificity/visualizing.assess.yml
new file mode 100644
index 00000000000..dd5cd715169
--- /dev/null
+++ b/src/site/content/pt/learn/css/specificity/visualizing.assess.yml
@@ -0,0 +1,17 @@
+setLeader: Test your knowledge of specificity visualizing
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Which of the following selectors is `1-2-1`?
+    options:
+      - content: "`section#specialty.dark`"
+        rationale: 'This selector is visualized as `1-1-1`.'
+      - content: "`#specialty:hover li.dark`"
+        rationale: "🎉"
+      - content: "`[data-state-rad].dark#specialty:hover`"
+        rationale: 'This selector is visualized as `1-3-0`.'
+      - content: "`li#specialty section.dark`"
+        rationale: 'This selector is visualized as `1-1-2`.'
diff --git a/src/site/content/pt/learn/css/the-cascade/conclusion.assess.yml b/src/site/content/pt/learn/css/the-cascade/conclusion.assess.yml
new file mode 100644
index 00000000000..8ed8ba41df4
--- /dev/null
+++ b/src/site/content/pt/learn/css/the-cascade/conclusion.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: The Cascade can be used for...
+    options:
+      - content: "Resolving conflicts when multiple styles apply to an element."
+        rationale: "This is one of its primary goals, conflict resolution."
+      - content: "Ensuring there's only one style value for each property at draw time."
+        rationale: "The text can only be one color, and The Cascade is a way of
+        determining which it should be."
+      - content: "Scoring and weighting style rules."
+        rationale: "Scoring and weighting are part of the sorting phase of The
+        Cascade."
+      - content: "Sorting and filtering style attributes."
+        rationale: "Sorting and filtering are phases of The Cascade to help
+        understand aspects of conflict resolution."
diff --git a/src/site/content/pt/learn/css/the-cascade/index.md b/src/site/content/pt/learn/css/the-cascade/index.md
new file mode 100644
index 00000000000..273df275b6d
--- /dev/null
+++ b/src/site/content/pt/learn/css/the-cascade/index.md
@@ -0,0 +1,152 @@
+---
+title: A cascata
+description: |2
+
+  Às vezes, duas ou mais regras CSS concorrentes podem se aplicar a um elemento.
+  Neste módulo, descubra como o navegador escolhe qual usar e como controlar essa seleção.
+audio:
+  title: 'O CSS Podcast   - 004: The Cascade'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+tags:
+  - css
+---
+
+CSS significa Cascading Stylesheets (Folhas de Estilo em Cascata). A cascata é o algoritmo para resolver conflitos em que várias regras CSS se aplicam a um elemento HTML. É por isso que o texto do botão estilizado com o seguinte CSS será azul.
+
+```css
+button {
+  color: red;
+}
+
+button {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'GRrgMOm', height: 200 } %}</figure>
+
+Compreender o algoritmo em cascata ajuda a entender como o navegador resolve conflitos como este. O algoritmo em cascata é dividido em 4 estágios distintos.
+
+1. **Posição e ordem de aparência** : a ordem em que suas regras CSS aparecem
+2. **Especificidade** : um algoritmo que determina qual seletor CSS tem a correspondência mais forte
+3. **Origem** : a ordem de quando o CSS aparece e de onde vem, seja um estilo de navegador, CSS de uma extensão do navegador ou seu CSS de autoria
+4. **Importância** : algumas regras CSS são mais pesadas do que outras, especialmente com o tipo de regra `!important`
+
+## Posição e ordem de aparecimento
+
+A ordem em que suas regras CSS aparecem e como elas aparecem é levada em consideração pela cascata enquanto ela calcula a resolução de conflitos.
+
+A demonstração logo no início desta lição é o exemplo mais direto de posição. Existem duas regras que possuem seletores de especificidade idêntica, portanto, o último a ser declarado venceu.
+
+Os estilos podem vir de várias fontes em uma página HTML, como uma tag `<link>`, uma tag incorporada `<style>` e CSS embutido conforme definido no atributo `style`
+
+Se você tiver um `<link>` que inclui CSS no topo de sua página HTML, então outro `<link>` que inclui CSS na parte inferior de sua página: o `<link>` inferior terá mais especificidade. A mesma coisa acontece com `<style>` incorporados também. Eles ficam mais específicos à medida que avançam na página.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'NWdPaWv' } %}<br><figcaption> O botão tem um fundo azul, conforme definido pelo CSS, que é incluído por um elemento <code>&lt;link /&gt;</code> . Uma regra CSS que define como escuro está em uma segunda folha de estilo vinculada e é aplicada por causa de sua posição posterior.</figcaption></figure>
+
+Essa ordem também se aplica a elementos `<style>`. Se forem declarados antes de um `<link>`, o CSS da folha de estilo vinculada terá a maior especificidade.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbLoB' } %}<figcaption> O <code>&lt;style&gt;</code> é declarado no <code>&lt;head&gt;</code>, enquanto o elemento <code>&lt;link /&gt;</code> é declarado no <code>&lt;body&gt;</code>. Isso significa que ele obtém mais especificidade do que o elemento <code>&lt;style&gt;</code>.</figcaption></figure>
+
+Um `style` inline com CSS declarado nele substituirá todos os outros CSS, independentemente de sua posição, a menos que uma declaração tenha `!important` definido.
+
+A posição também se aplica na ordem de sua regra CSS. Neste exemplo, o elemento terá um fundo roxo porque `background: purple` foi declarado por último. Como o fundo verde foi declarado antes do fundo roxo, agora ele é ignorado pelo navegador.
+
+```css
+.my-element {
+  background: green;
+  background: purple;
+}
+```
+
+Ser capaz de especificar dois valores para a mesma propriedade pode ser uma maneira simples de criar substitutos para navegadores que não oferecem suporte a um determinado valor. Neste próximo exemplo, `font-size` é declarado duas vezes. Se `clamp()` for compatível com o navegador, a `font-size` será descartada. Se `clamp()` não for compatível com o navegador, a declaração inicial será respeitada e o tamanho da fonte será 1.5rem
+
+```css
+.my-element {
+  font-size: 1.5rem;
+  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbPMP' } %}</figure>
+
+{% Aside %} Esta abordagem de declarar a mesma propriedade duas vezes funciona porque os navegadores ignoram valores que não entendem. Ao contrário de algumas outras linguagens de programação, o CSS não gerará um erro ou interromperá seu programa ao detectar uma linha que não pode ser analisada - o valor que não pode ser analisado é inválido e, portanto, ignorado. O navegador continua a processar o resto do CSS sem quebrar o que já entende. {% endAside %}
+
+{% Assessment 'position' %}
+
+## Especificidade
+
+A especificidade é um algoritmo que determina qual seletor CSS é o mais específico, usando um sistema de ponderação ou pontuação para fazer esses cálculos. Ao tornar uma regra mais específica, você pode fazer com que ela seja aplicada mesmo que algum outro CSS que corresponda ao seletor apareça posteriormente no CSS.
+
+Na [próxima lição,](/learn/css/specificity) você pode aprender os detalhes de como a especificidade é calculada; no entanto, manter algumas coisas em mente o ajudará a evitar muitos problemas de especificidade.
+
+O CSS almejando uma classe em um elemento tornará essa regra mais específica e, portanto, vista como mais importante de ser aplicada do que o CSS almejando apenas o elemento. Isso significa que, com o seguinte CSS, o `h1` será colorido em vermelho, embora ambas as regras correspondam e a regra para o `h1` venha posteriormente na folha de estilo.
+
+```html
+<h1 class="my-element">Heading</h1>
+```
+
+```css
+.my-element {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}
+```
+
+Um `id` torna o CSS ainda mais específico, então os estilos aplicados a um ID substituirão aqueles aplicados de muitas outras maneiras. Esse é um dos motivos pelos quais geralmente não é uma boa ideia anexar estilos a um `id` . Isso pode dificultar a substituição desse estilo por outro.
+
+### A especificidade é cumulativa
+
+Como você pode descobrir na próxima lição, cada tipo de seletor recebe pontos que indicam quão específico ele é, os pontos para todos os seletores que você usou para direcionar um elemento são somados. Isso significa que se você direcionar um elemento com uma lista de seletores, como `a.my-class.another-class[href]:hover` você obterá algo bastante difícil de sobrescrever por outro CSS. Por esse motivo, e para ajudar a tornar seu CSS mais reutilizável, é uma boa ideia manter seus seletores o mais simples possível. Use a especificidade como uma ferramenta para obter os elementos quando precisar, mas sempre considere refatorar listas de seletor longas e específicas, se puder.
+
+## Origem
+
+O CSS que você escreve não é o único CSS aplicado a uma página. A cascata leva em consideração a origem do CSS. Esta origem inclui a folha de estilo interna do navegador, estilos adicionados por extensões do navegador ou sistema operacional e seu CSS de autoria. A **ordem de especificidade dessas origens**, da menos específica para a mais específica, é a seguinte:
+
+1. **Estilos básicos do agente do usuário**. Esses são os estilos que seu navegador aplica aos elementos HTML por padrão.
+2. **Estilos de usuário local**. Eles podem vir do nível do sistema operacional, como um tamanho de fonte básico ou uma preferência de movimento reduzido. Eles também podem vir de extensões de navegador, como uma extensão que permite ao usuário escrever seu próprio CSS personalizado para uma página da web.
+3. **CSS de autoria**. O CSS de sua autoria.
+4. **Autoria `!important`**. Qualquer coisa `!important` que você adicionar às suas declarações de autoria.
+5. **Estilos de usuários locais `!important`**. Qualquer coisa `!important` que venha do nível do sistema operacional ou CSS do nível de extensão do navegador.
+6. **Agente do usuário `!important`**. Qualquer `!important` que seja definido no CSS padrão, fornecido pelo navegador.
+
+<figure>{% Img src = "image/VbAJIREinuYvovrBzzvEyZOpw5w1/zPdaZ6G11oYrgJ78EfF7.svg", alt = "Uma demonstração visual da ordem das origens, conforme também explicado na lista.", width = "800", height = "347"%}</figure>
+
+Se você tiver um `!important` no CSS de sua autoria e o usuário tiver um `!important` no CSS personalizado, qual CSS vence?
+
+{% Assessment 'origin' %}
+
+## Importância
+
+Nem todas as regras CSS são calculadas da mesma forma ou recebem a mesma especificidade umas das outras.
+
+A **ordem de importância**, do menos importante para o mais importante, é a seguinte:
+
+1. tipo de regra normal, como `font-size` , `background` ou `color`
+2. tipo de regra de `animation`
+3. `!important` tipo de regra importante (seguindo a mesma ordem da origem)
+4. tipo de regra de `transition`
+
+Os tipos de regras de transição e animação ativas têm maior importância do que as regras normais. No caso de transições, a importância é maior do que os tipos de regras `!important`. Isso ocorre porque quando uma animação ou transição se torna ativa, seu comportamento esperado é mudar o estado visual.
+
+## Usando DevTools para descobrir por que alguns CSS não estão sendo aplicados
+
+As ferramentas de desenvolvimento do navegador geralmente mostram todos os CSS que podem corresponder a um elemento, com aqueles que não estão sendo usados riscados.
+
+<figure>{% Img src = "image/VbAJIREinuYvovrBzzvEyZOpw5w1/Z6aLsqcqjGAUsWzq7DZs.png", alt = "Uma imagem do navegador DevTools com CSS substituído riscado", width = "800", height = "446"%}</figure>
+
+Se o CSS que você esperava aplicar não aparecer, então ele não corresponde ao elemento. Nesse caso, você precisa procurar em outro lugar, talvez por um erro de digitação em uma classe ou nome de elemento ou algum CSS inválido.
+
+{% Assessment 'conclusion' %}
+
+## Recursos
+
+- [Uma explicação altamente interativa da cascata](https://wattenberger.com/blog/css-cascade)
+- [Referência de cascata MDN](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
diff --git a/src/site/content/pt/learn/css/the-cascade/origin.assess.yml b/src/site/content/pt/learn/css/the-cascade/origin.assess.yml
new file mode 100644
index 00000000000..98fd0ca2f80
--- /dev/null
+++ b/src/site/content/pt/learn/css/the-cascade/origin.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of cascade origins
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      **Test your knowledge of cascade origins**, consider the following style
+      rules from various origins:
+
+      #### User-agent style
+      ```css
+      h1 { margin-block-start: 0.83em; }
+      ```
+
+      #### Bootstrap
+      ```css
+      h1 { margin-block-start: 20px; }
+      ```
+
+      #### Page Author styles
+      ```css
+      h1 { margin-block-start: 2ch; }
+
+      @media (max-width: 480px) {
+        h1 { margin-block-start: 1ch; }
+      }
+      ```
+
+      #### User custom style
+      ```css
+      h1 { margin-block-start: 2rem !important; }
+      ```
+
+      Then, given the following HTML:
+      ```html
+      <h1>Lorem ipsum</h1>
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What is the final `margin-block-start` of the `h1`?"
+    options:
+      - content: 20px
+        rationale: "Bootstrap is part of the authored origin, which loses to the
+        important local user style."
+      - content: 0.83em
+        rationale: "The user agent style origin loses to the important local
+        user style."
+      - content: 2rem
+        rationale: "This `!important` user custom style has the most specific
+        origin."
+      - content: 2ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
+      - content: 1ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
diff --git a/src/site/content/pt/learn/css/the-cascade/position.assess.yml b/src/site/content/pt/learn/css/the-cascade/position.assess.yml
new file mode 100644
index 00000000000..cd4560468b1
--- /dev/null
+++ b/src/site/content/pt/learn/css/the-cascade/position.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      If you have the following HTML on your page:
+
+      ```html
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <link rel="stylesheet" href="styles.css" />
+        </head>
+        <body>
+          <button>I am a button</button>
+          <style>
+            button {
+              background: pink;
+            }
+          </style>
+        </body>
+      </html>
+      ```
+
+      Inside `styles.css`, is the following CSS rule:
+
+      ```css
+      button {
+        background: yellow;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What color is the button's background?
+    options:
+      - content: pink
+        rationale: | 
+          The embedded `<style>` origin is further down the page than the
+          `<link>` tag, so while the specificity of `button` is the same, the
+          **position** of the style rule makes it win.
+      - content: yellow
+        rationale: | 
+          To the HTML document, the yellow button background may have been read
+          first, but a newer rule of the same specificity was discovered later,
+          making this rule not apply to the button.
\ No newline at end of file
diff --git a/src/site/content/pt/learn/index.md b/src/site/content/pt/learn/index.md
new file mode 100644
index 00000000000..e18d8e0745a
--- /dev/null
+++ b/src/site/content/pt/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: Aprender
+---
diff --git a/src/site/content/pt/learn/learn.11tydata.js b/src/site/content/pt/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/pt/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/pt/media/index.md b/src/site/content/pt/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/pt/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/pt/media/video-and-source-tags/index.md b/src/site/content/pt/media/video-and-source-tags/index.md
new file mode 100644
index 00000000000..ae1a94055e4
--- /dev/null
+++ b/src/site/content/pt/media/video-and-source-tags/index.md
@@ -0,0 +1,229 @@
+---
+layout: post
+title: As tags <video> e <source>
+authors:
+  - samdutton
+  - joemedley
+  - derekherman
+description: |2-
+
+  Você preparou adequadamente um arquivo de vídeo para a web. Você lhe atribuiu as dimensões e a resolução corretas. Você até criou arquivos WebM e MP4 separados para navegadores diferentes. Para que qualquer um possa vê-lo, você ainda precisa adicioná-lo a uma página da web.
+date: 2014-02-15
+updated: 2021-07-05
+tags:
+  - media
+---
+
+Você [preparou adequadamente um arquivo de vídeo](/prepare-media/) para a web. Você lhe atribuiu as dimensões e a resolução corretas. Você até criou arquivos WebM e MP4 separados para navegadores diferentes.
+
+Para que qualquer um consiga ver seu vídeo, você ainda precisa adicioná-lo a uma página da web. Fazer isso corretamente requer a adição de dois elementos HTML: o elemento [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video) e o elemento [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) . Além das noções básicas sobre essas tags, este artigo explica os atributos que você deve adicionar a elas para criar uma boa experiência do usuário.
+
+{% Aside %} Você tem sempre a opção de enviar seu arquivo para o [YouTube](https://www.youtube.com/) ou o [Vimeo](https://vimeo.com). Em muitos casos, isso é melhor que o procedimento aqui descrito. Esses serviços cuidam da formatação e da conversão de tipo de arquivo para você, além de fornecer os meios para inserir um vídeo em sua página da web. Se você precisa gerenciar isso sozinho, continue lendo. {% endAside %}
+
+## Especifique um único arquivo
+
+Embora não seja recomendado, você pode usar o elemento de vídeo sozinho. Sempre use o atributo `type` conforme mostrado abaixo. O navegador usa isso para determinar se pode reproduzir o arquivo de vídeo fornecido. Se não puder, o texto incluído será exibido.
+
+```html
+<video src="chrome.webm" tipo="video/webm">
+    <p>Seu navegador não pode reproduzir o arquivo de vídeo fornecido.</p>
+</video>
+```
+
+### Especifique vários formatos de arquivo
+
+Lembre-se das [noções básicas de arquivos de mídia](/media-file-basics/), de que nem todos os navegadores suportam os mesmos formatos de vídeo. O elemento `<source>` permite que você especifique vários formatos como substituto, caso o navegador do usuário não ofereça suporte a algum deles.
+
+O exemplo abaixo produz o vídeo incorporado que é usado posteriormente como exemplo neste artigo.
+
+```html
+<video controls>
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
+  <p>Seu navegador não pode reproduzir o arquivo de vídeo fornecido.</p>
+</video>
+```
+
+[Experimente no Glitch](https://track-demonstration.glitch.me) ([fonte](https://glitch.com/edit/#!/track-demonstration))
+
+{% Aside %} Observe no exemplo anterior que o atributo `controls` foi introduzido. Isso instrui os navegadores a permitir que o usuário controle a reprodução do vídeo, incluindo volume, busca, seleção de legendas e pausar / retomar a reprodução, entre outros. {% endAside %}
+
+Você sempre deve adicionar um atributo de `type` ao `<source>` , embora ele seja opcional. Isso garante que o navegador baixe apenas o arquivo que é capaz de reproduzir.
+
+Essa abordagem possui várias vantagens em relação à exibição de HTML diferente ou script do lado do servidor, especialmente em dispositivos móveis:
+
+- Você pode listar os formatos em ordem de preferência.
+- A comutação do lado do cliente reduz a latência; apenas uma solicitação é feita para obter conteúdo.
+- Deixar o navegador escolher um formato é mais simples, rápido e potencialmente mais confiável do que usar um banco de dados de suporte do lado do servidor com detecção de agente de usuário.
+- Especificar o tipo de cada fonte de arquivo melhora o desempenho da rede; o navegador pode selecionar uma fonte de vídeo sem ter que baixar parte do vídeo para "farejar" o formato.
+
+Esses problemas são especialmente importantes em contextos móveis, onde a largura de banda e a latência são precárias e a paciência do usuário provavelmente é limitada. A omissão do `type` pode afetar o desempenho quando há várias fontes com tipos não suportados.
+
+Existem algumas maneiras de se aprofundar nos detalhes. Confira [A Digital Media Primer for Geeks](https://www.xiph.org/video/vid1.shtml) para saber mais sobre como o vídeo e o áudio funcionam na web. Você também pode usar [a depuração remota](https://developer.chrome.com/docs/devtools/remote-debugging/) em DevTools para comparar a atividade de rede [com atributos de tipo](https://googlesamples.github.io/web-fundamentals/fundamentals/media/video-main.html) e [sem atributos de tipo](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/notype.html) .
+
+{% Aside 'caution' %} Certifique-se de verificar os cabeçalhos de resposta nas ferramentas de desenvolvedor de seu navegador para [garantir que seu servidor informe o tipo MIME correto](https://developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types) ; caso contrário, as verificações do tipo de fonte de vídeo não funcionarão. {% endAside %}
+
+### Especifique os horários de início e término
+
+Economize largura de banda e torne seu site mais responsivo: use fragmentos de mídia para adicionar horários de início e término ao elemento de vídeo.
+
+<figure>
+  <video controls width="100%">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm#t=5,10" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4#t=5,10" type="video/mp4">
+    <p>Este navegador não oferece suporte ao elemento de vídeo.</p>
+  </source></source></video></figure>
+
+Para usar um fragmento de mídia, adicione `#t=[start_time][,end_time]` ao URL da mídia. Por exemplo, para reproduzir o vídeo dos segundos 5 a 10, especifique:
+
+```html
+<source src="video/chrome.webm#t=5,10" type="video/webm">
+```
+
+Você também pode especificar os tempos em `<hours>:<minutes>:<seconds>` . Por exemplo, `#t=00:01:05` inicia o vídeo em um minuto e cinco segundos. Para reproduzir apenas o primeiro minuto do vídeo, especifique `#t=,00:01:00` .
+
+Você pode usar esse recurso para fornecer várias visualizações no mesmo vídeo - como pontos de sinalização em um DVD - sem ter que codificar e servir vários arquivos.
+
+Para que esse recurso funcione, seu servidor deve oferecer suporte a solicitações de intervalo e esse recurso deve ser ativado. A maioria dos servidores habilita solicitações de intervalo por padrão. Como alguns serviços de hospedagem os desativam, você deve confirmar se as solicitações de intervalo estão disponíveis para o uso de fragmentos em seu site.
+
+Felizmente, você pode fazer isso nas ferramentas de desenvolvedor do seu navegador. No Chrome, por exemplo, está no [painel Rede](https://developer.chrome.com/docs/devtools/#network) . Procure o `Accept-Ranges` e verifique se ele diz `bytes` . Na imagem, desenhei uma caixa vermelha ao redor deste cabeçalho. Se você não vir `bytes` como o valor, entre em contato com seu provedor de hospedagem.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/20DlLyicG5PAo6TXBKh3.png", alt = "Captura de tela do Chrome DevTools: Intervalos de aceitação: bytes.", width = "800", height = "480"%}<figcaption> Captura de tela do Chrome DevTools: Intervalos de aceitação: bytes.</figcaption></figure>
+
+### Incluir uma imagem de pôster
+
+Adicione um atributo pôster ao `video` para que os espectadores tenham uma ideia do conteúdo assim que o elemento for carregado, sem a necessidade de baixar o vídeo ou iniciar a reprodução.
+
+```html
+<video poster="poster.jpg" ...>
+  …
+</video>
+```
+
+Um pôster também pode ser um substituto se o `src` do vídeo estiver quebrado ou se nenhum dos formatos de vídeo fornecidos for compatível. A única desvantagem das imagens de pôster é uma solicitação de arquivo adicional, que consome parte da largura de banda e requer renderização. Para obter mais informações, consulte [Codificar imagens com eficiência](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/) .
+
+<div class="switcher">{% Compare 'worse' %}<figure> {% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/R8VNeplKwajJhOuVkPDT.png", alt = "Sem um pôster substituto, o vídeo parece quebrado.", width = "360", height = "600"%}</figure>
+</div>
+<p data-md-type="paragraph">{% CompareCaption %} Sem um pôster substituto, o vídeo parece quebrado. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html"><figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rNhydHVGeL2P0sQ0je5k.png", alt = "Um pôster substituto faz parecer que o primeiro quadro foi capturado.", width = "360", height = "600"%}</figure></div>
+<p data-md-type="paragraph">{% CompareCaption %} Um pôster substituto faz parecer que o primeiro quadro foi capturado. {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+### Certifique-se de que os vídeos não transbordem de contêineres
+
+Quando os elementos de vídeo são muito grandes para a janela de visualização, eles podem estourar seu contêiner, tornando impossível para o usuário ver o conteúdo ou usar os controles.
+
+<div class="switcher">
+  <figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cDl2OfCE3hQivhaNvMUh.png", alt = "Captura de tela do Android Chrome, retrato: elemento de vídeo sem estilo transborda janela de visualização.", width = "338", height = "600"%}<figcaption> Captura de tela do Android Chrome, retrato: o elemento de vídeo sem estilo ultrapassa a janela de visualização.</figcaption></figure>
+  <figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCiZsNkZNsAhWbOBsLCs.png", alt = "Captura de tela do Android Chrome, paisagem: elemento de vídeo sem estilo estourou janela de visualização.", width = "800", height = "450"%}<figcaption> Captura de tela do Android Chrome, paisagem: o elemento de vídeo sem estilo ultrapassa a janela de visualização.</figcaption></figure>
+</div>
+
+Você pode controlar as dimensões do vídeo usando CSS. Se o CSS não atender a todas as suas necessidades, bibliotecas e plug-ins JavaScript como o [FitVids](http://fitvidsjs.com/) (fora do escopo deste artigo) podem ajudar, mesmo para vídeos do YouTube e outras fontes. Infelizmente, esses recursos podem aumentar o [tamanho da carga útil da rede,](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/) com consequências negativas para suas receitas e carteiras de usuários.
+
+Para usos simples como os que estou descrevendo aqui, use [consultas de mídia CSS](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#css-media-queries) para especificar o tamanho dos elementos dependendo das dimensões da janela de visualização; `max-width: 100%` é seu amigo.
+
+Para conteúdo de mídia em iframes (como vídeos do YouTube), tente uma abordagem responsiva (como a [proposta por John Surdakowski](http://avexdesigns.com/responsive-youtube-embed/) ).
+
+{% Aside 'caution' %} Não force o tamanho do elemento que resulta em uma [proporção](https://www.google.com/search?q=aspect+ratio&oq=aspect+ratio&aqs=chrome..69i57j35i39j0l6.1896j0j7&sourceid=chrome&ie=UTF-8) diferente do vídeo original. Vídeos comprimidos ou esticados parecem horríveis. {% endAside %}
+
+#### CSS
+
+```css
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+```
+
+#### HTML
+
+```html
+<div class="video-container">
+  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
+          frameborder="0" width="560" height="315">
+  </iframe>
+</div>
+```
+
+[Tente](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html)
+
+Compare a [amostra responsiva](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html) com a [versão que não responde](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/unyt.html) . Como você pode ver, a versão que não responde não é uma ótima experiência para o usuário.
+
+### Orientação do dispositivo
+
+A orientação do dispositivo não é um problema para monitores de desktop ou laptops, mas é extremamente importante ao considerar o design da página da web para dispositivos móveis e tablets.
+
+O Safari no iPhone faz um bom trabalho ao alternar entre a orientação retrato e paisagem:
+
+<div class="switcher">
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AmHneDShMOioWZwYG2kF.png", alt = "Captura de tela do vídeo reproduzindo no Safari no iPhone, retrato.", width = "338", height = "600" %}<figcaption> Captura de tela do vídeo sendo reproduzido no Safari no iPhone, retrato.</figcaption></figure><figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MZwkLJaXVk4g8lruhiKZ.png", alt = "Captura de tela do vídeo reproduzido no Safari no iPhone, paisagem.", width = "600", height = "338" %}<figcaption> Captura de tela do vídeo reproduzido no Safari no iPhone, paisagem.</figcaption></figure>
+</div>
+
+A orientação do dispositivo em um iPad e Chrome no Android pode ser problemática. Por exemplo, sem qualquer personalização, um vídeo reproduzido em um iPad na orientação paisagem fica assim:
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9FsExgY6cJFfMkxOPNkl.png", alt = "Captura de tela do vídeo reproduzido no Safari no iPad, paisagem.", width = "600", height = "450" %}<figcaption> Captura de tela do vídeo reproduzido no Safari no iPad, paisagem.</figcaption></figure>
+
+Definir a `width: 100%` ou `max-width: 100%` com CSS pode resolver muitos problemas de layout de orientação do dispositivo.
+
+### Reprodução automática
+
+O `autoplay` controla se o navegador baixa e reproduz um vídeo imediatamente. A maneira precisa como funciona depende da plataforma e do navegador.
+
+- Chrome: depende de vários fatores, incluindo, sem limitação, se a visualização é no desktop e se o usuário móvel adicionou seu site ou aplicativo à tela inicial. Para obter detalhes, consulte [Práticas recomendadas de reprodução automática](/autoplay-best-practices/) .
+
+- Firefox: bloqueia todos os vídeos e sons, mas dá aos usuários a capacidade de relaxar essas restrições para todos os sites ou sites específicos. Para obter detalhes, consulte [Permitir ou bloquear a reprodução automática de mídia no Firefox](https://support.mozilla.org/en-US/kb/block-autoplay)
+
+- Safari: historicamente exige um gesto do usuário, mas tem relaxado esse requisito nas versões recentes. Para obter detalhes, consulte [Novas políticas de &lt;vídeo&gt; para iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) .
+
+Mesmo em plataformas onde a reprodução automática é possível, você precisa considerar se é uma boa ideia habilitá-la:
+
+- O uso de dados pode ser caro.
+- A reprodução de mídia antes que o usuário deseje pode consumir largura de banda e CPU e, portanto, atrasar a renderização da página.
+- Os usuários podem estar em um contexto em que a reprodução de vídeo ou áudio é invasiva.
+
+### Pré-carga
+
+O `preload` fornece uma dica ao navegador quanto à quantidade de informações ou conteúdo a ser pré-carregado.
+
+<table class="responsive">
+  <thead>
+    <tr>
+      <th>Valor</th>
+      <th>Descrição</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Value"><code>none</code></td>
+      <td data-th="Description">O usuário pode optar por não assistir ao vídeo, portanto, não pré-carregue nada.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>metadata</code></td>
+      <td data-th="Description">Os metadados (duração, dimensões, trilhas de texto) devem ser pré-carregados, mas com o mínimo de vídeo.</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>auto</code></td>
+      <td data-th="Description">Baixar o vídeo inteiro imediatamente é considerado desejável. Uma string vazia produz o mesmo resultado.</td>
+    </tr>
+  </tbody>
+</table>
+
+O `preload` tem efeitos diferentes em plataformas diferentes. Por exemplo, o Chrome armazena 25 segundos de vídeo no desktop, mas nenhum no iOS ou Android. Isso significa que no celular, pode haver atrasos na inicialização da reprodução que não acontecem no desktop. Consulte Reprodução rápida com pré- [carregamento de áudio e vídeo](/fast-playback-with-preload/) [ou o blog de Steve Souders](https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/) para obter mais detalhes.
+
+Agora que você sabe como adicionar mídia à sua página da web, é hora de aprender sobre [Acessibilidade de mídia,](/media-accessibility/) onde você adicionará legendas ao seu vídeo para deficientes auditivos ou quando reproduzir o áudio não for uma opção viável.
diff --git a/src/site/content/pt/metrics/cls/index.md b/src/site/content/pt/metrics/cls/index.md
new file mode 100644
index 00000000000..0ad45276b98
--- /dev/null
+++ b/src/site/content/pt/metrics/cls/index.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Cumulative Layout Shift (CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-19
+description: Este artigo apresenta a métrica Cumulative Layout Shift (CLS) e explica como medi-la.
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %} **1º de junho de 2021:** A implementação da CLS mudou. Para saber mais sobre os motivos por trás da mudança, veja [Evoluindo a métrica CLS](/evolving-cls). {% endAside %}
+
+{% Aside 'key-term' %} Cumulative Layout Shift (CLS), ou Mudança Cumulativa de Layout, é uma métrica importante e centrada no usuário para medir a [estabilidade visual](/user-centric-performance-metrics/#types-of-metrics) porque ajuda a quantificar a frequência com que os usuários experimentam mudanças inesperadas de layout: uma CLS baixa ajuda a garantir que a página seja [agradável](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Já aconteceu de você estar lendo um artigo online quando algo muda repentinamente na página? Sem aviso, o texto se move e você perdeu o seu lugar. Ou ainda pior: você está prestes a tocar num link ou botão, mas um instante antes do seu dedo pousar - BOOM - o link se move e você acaba clicando noutra coisa!
+
+Na maioria das vezes, esse tipo de experiência é apenas irritante, mas, em alguns casos, pode causar danos reais.
+
+<figure>
+  <video autoplay controls loop muted poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png" width="658" height="510">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Um screencast ilustrando como a instabilidade do layout pode afetar negativamente os usuários.</figcaption></figure>
+
+O movimento inesperado do conteúdo da página geralmente ocorre porque os recursos são carregados de forma assíncrona ou os elementos do DOM são adicionados dinamicamente à página acima do conteúdo existente. O culpado pode ser uma imagem ou vídeo com dimensões desconhecidas, uma fonte que fica maior ou menor que sua substituta ou um anúncio ou widget de terceiros que se redimensiona dinamicamente.
+
+O que torna esse problema ainda mais problemático é que o modo como um site funciona no desenvolvimento é geralmente muito diferente de como os usuários o experimentam. O conteúdo personalizado ou de terceiros geralmente não se comporta da mesma forma no desenvolvimento e na produção, as imagens de teste geralmente já estão no cache do navegador do desenvolvedor e as chamadas de API executadas localmente costumam ser tão rápidas que o atraso não é perceptível.
+
+A métrica Cumulative Layout Shift (CLS) ajuda a resolver esse problema medindo a frequência com que ele ocorre para usuários reais.
+
+## O que é CLS?
+
+CLS é uma medida da maior explosão de ocorrências de *mudança de layout* para cada mudança de layout [inesperada](/cls/#expected-vs-unexpected-layout-shifts) que ocorre durante toda a existência de uma página.
+
+Uma *mudança de layout* ocorre sempre que um elemento visível muda sua posição de um quadro renderizado para o próximo. (Veja abaixo os detalhes sobre como as [pontuações de mudança de layout](#layout-shift-score) individuais são calculadas.)
+
+Uma explosão de mudanças de layout, conhecida como [*janela de sessão*](evolving-cls/#why-a-session-window) (session window), ocorre quando uma ou mais mudanças de layout individuais acontecem em rápida sucessão com menos de 1 segundo entre cada mudança e um máximo de 5 segundos para a duração total da janela.
+
+A maior explosão é a janela da sessão com a pontuação cumulativa máxima de todas as mudanças de layout dentro dessa janela.
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Exemplo de janelas de sessão. As barras azuis representam as pontuações de cada mudança de layout individual.</figcaption></figure>
+
+{% Aside 'caution' %} Anteriormente, a CLS media a soma total de *todas as pontuações de mudança de layout individuais* que ocorriam durante a existência da página. Para ver quais ferramentas ainda fornecem a capacidade de fazer benchmarks em relação à implementação original, dê uma olhada em [Evolução da Cumulative Layout Shift em ferramentas da web](/cls-web-tooling). {% endAside %}
+
+### O que é uma boa pontuação CLS?
+
+Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma pontuação CLS de **0,1** ou menos. Para garantir que você esteja atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o **75º percentil** de carregamentos de página, segmentado através de dispositivos móveis e desktop.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Bons valores de CLS estão abaixo de 0,1, valores baixos são maiores que 0,25 e qualquer coisa entre precisa de melhorias", width="400", height="300" %}
+</picture>
+
+{% Aside %} Para saber mais sobre a pesquisa e a metodologia por trás dessa recomendação, veja: [Definindo os limites das Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## Mudanças de layout em detalhes
+
+As mudanças de layout são definidas pela [API de instabilidade de layout](https://github.com/WICG/layout-instability), que relata entradas `layout-shift` sempre que um elemento visível na viewport muda sua posição inicial (por exemplo, sua posição superior e esquerda no [modo de escrita](https://developer.mozilla.org/docs/Web/CSS/writing-mode) default) entre dois quadros. Esses elementos são considerados *elementos instáveis*.
+
+Observe que as mudanças de layout ocorrem apenas quando os elementos existentes mudam sua posição inicial. Se um novo elemento for adicionado ao DOM ou um elemento existente mudar de tamanho, isto não conta como uma mudança de layout - desde que a mudança não faça com que outros elementos visíveis mudem sua posição inicial.
+
+### Pontuação de mudança de layout
+
+Para calcular a *pontuação de mudança de layout* , o navegador observa o tamanho do viewport e o movimento dos *elementos instáveis* no viewport entre dois quadros renderizados. A pontuação de mudança de layout é um produto de duas medidas desse movimento: a *fração de impacto* e a *fração de distância* (ambas definidas abaixo).
+
+```text
+layout shift score = impact fraction * distance fraction
+```
+
+### Fração de impacto
+
+A [fração de impacto](https://github.com/WICG/layout-instability#Impact-Fraction) mede como os *elementos instáveis* afetam a área da janela de visualização (viewport) entre dois quadros.
+
+A união das áreas visíveis de todos os *elementos instáveis* do quadro anterior *e* do quadro atual - como uma fração da área total da janela de visualização - é a *fração de impacto* do quadro atual.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="Exemplo de fração de impacto com um *elemento instável*", width="800", height="600", linkTo=true %}
+
+Na imagem acima, há um elemento que ocupa metade da janela de visualização em um quadro. Depois, no quadro seguinte, o elemento é deslocado para baixo em 25% da altura da janela de visualização. O retângulo pontilhado vermelho indica a união da área visível do elemento em ambos os quadros, que, neste caso, é 75% da janela de visualização total, portanto, sua *fração de impacto* é de `0.75`.
+
+### Fração de distância
+
+A outra parte da equação de pontuação de mudança de layout mede a distância que os elementos instáveis se moveram em relação à janela de visualização. A *fração de distância* é a maior distância que qualquer *elemento instável* moveu no quadro (horizontal ou verticalmente) dividida pela maior dimensão da janela de visualização (largura ou altura, o que for maior).
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="Exemplo de fração de distância com um *elemento instável*", width="800", height="600", linkTo=true %}
+
+No exemplo acima, a maior dimensão da janela de visualização é a altura, e o elemento instável foi movido em 25% da altura da janela de visualização, o que faz com que a *fração de distância* seja de 0,25.
+
+Portanto, neste exemplo, a *fração de impacto* é `0.75` e a *fração de distância* é `0.25`, portanto, a *pontuação de mudança de layout* é `0.75 * 0.25 = 0.1875`.
+
+{% Aside %} Inicialmente, a pontuação de mudança de layout era calculada com base apenas na *fração de impacto*. A *fração de distância* foi introduzida para evitar penalizar excessivamente os casos em que grandes elementos se deslocam por uma pequena distância. {% endAside %}
+
+O próximo exemplo mostra como a adição de conteúdo a um elemento existente afeta a pontuação de mudança de layout:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="Exemplo de mudança de layout com *elementos* estáveis e instáveis e recorte da janela de visualização", width="800", height="600", linkTo=true %}
+
+O botão "Click Me!" é anexado à parte inferior da caixa cinza com texto preto, o que empurra a caixa verde com texto branco para baixo (e parcialmente para fora da janela de visualização).
+
+Neste exemplo, a caixa cinza muda de tamanho, mas sua posição inicial não muda, portanto não é um *elemento instável*.
+
+O botão "Click Me!" não estava anteriormente no DOM, portanto, sua posição inicial também não muda.
+
+A posição inicial da caixa verde, entretanto, muda, mas como ela foi movida parcialmente para fora da janela de visualização, a área invisível não é considerada ao calcular a *fração de impacto*. A união das áreas visíveis para a caixa verde em ambos os quadros (ilustrada pelo retângulo pontilhado vermelho) é a mesma que a área da caixa verde no primeiro quadro: 50% da janela de visualização. A *fração de impacto* é `0.5`.
+
+A *fração de distância* é ilustrada com a seta roxa. A caixa verde foi movida para baixo em cerca de 14% da janela de visualização, então a *fração de distância* é `0.14`.
+
+A pontuação de mudança de layout é `0.5 x 0.14 = 0.07`.
+
+Este último exemplo ilustra vários *elementos instáveis* :
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="Exemplo de mudança de layout com vários *elementos* estáveis e instáveis", width="800", height="600", linkTo=true %}
+
+No primeiro quadro acima, há quatro resultados de uma solicitação de API para animais, classificados em ordem alfabética. No segundo quadro, mais resultados são adicionados à lista ordenada.
+
+O primeiro item da lista ("Cat") não altera sua posição inicial entre os quadros, portanto, é estável. Da mesma forma, os novos itens adicionados à lista não estavam anteriormente no DOM, portanto, suas posições iniciais também não mudam. Mas os itens rotulados como "Dog", "Horse" e "Zebra" mudam suas posições iniciais, fazendo com que sejam *elementos instáveis*.
+
+Novamente, os retângulos pontilhados vermelhos representam a união dessas três áreas *instáveis* antes e depois das áreas, que neste caso é cerca de 38% da área da janela de visualização (*fração* de `0.38`).
+
+As setas representam as distâncias que os *elementos instáveis* se moveram desde suas posições iniciais. O elemento "Zebra", representado pela seta azul, foi o que mais se moveu, cerca de 30% da altura da janela de visualização. Isto faz com que a *fração de distância* neste exemplo seja `0.3`.
+
+A pontuação de mudança de layout é `0.38 x 0.3 = 0.1172`.
+
+### Mudanças de layout esperadas vs. inesperadas
+
+Nem todas as mudanças de layout são ruins. Na verdade, muitos aplicativos dinâmicos da Web frequentemente mudam a posição inicial dos elementos na página.
+
+#### Mudanças de layout iniciadas pelo usuário
+
+Uma mudança de layout só é ruim se o usuário não a espera. Por outro lado, as mudanças de layout que ocorrem em resposta às interações do usuário (clicar num link, pressionar um botão, digitar numa caixa de pesquisa e similares) geralmente são aceitáveis, contanto que a mudança ocorra perto o suficiente da interação que o relacionamento esteja claro para o usuário.
+
+Por exemplo, se uma interação do usuário disparar uma solicitação de rede que pode demorar um pouco para ser concluída, é melhor imediatamente alocar algum espaço e mostrar um indicador de carregamento para evitar uma mudança desagradável de layout quando a solicitação for concluída. Se o usuário não perceber que algo está sendo carregado ou não tiver noção de quando o recurso estará pronto, ele pode tentar clicar em outra coisa enquanto espera, algo que pode sair do lugar na hora do clique.
+
+As mudanças de layout que ocorrem dentro de 500 milissegundos da entrada do usuário terão o [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput) definido, para que possam ser excluídas dos cálculos.
+
+{% Aside 'caution' %} O `hadRecentInput` só será verdadeiro para eventos de entrada discretos, como toque, clique ou pressionamento de tecla. Interações contínuas como rolar, arrastar ou gestos de pinça e zoom não são consideradas "entrada recente". Consulte a [Especificação de Instabilidade de Layout](https://github.com/WICG/layout-instability#recent-input-exclusion) para mais detalhes. {% endAside %}
+
+#### Animações e transições
+
+Animações e transições, quando bem feitas, são uma ótima maneira de atualizar o conteúdo da página sem surpreender o usuário. O conteúdo que muda abrupta e inesperadamente na página quase sempre cria uma experiência ruim para o usuário. Mas o conteúdo que se move de forma gradual e natural de uma posição para a seguinte pode, muitas vezes, ajudar o usuário a entender melhor o que está acontecendo e guiá-lo entre as mudanças de estado.
+
+A propriedade [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) do CSS permite animar elementos sem acionar mudanças de layout:
+
+- Em vez de alterar as propriedades `height` e `width`, use `transform: scale()`.
+- Para mover os elementos, evite alterar as propriedades `top` , `right` , `bottom` ou `left` e, em vez disso, use `transform: translate()`.
+
+## Como medir a CLS
+
+A CLS pode ser medida [em laboratório](/user-centric-performance-metrics/#in-the-lab) ou [em campo](/user-centric-performance-metrics/#in-the-field) e está disponível nas seguintes ferramentas:
+
+{% Aside 'caution' %} As ferramentas de laboratório normalmente carregam páginas em um ambiente sintético e, portanto, só podem medir as mudanças de layout que ocorrem durante o carregamento da página. Como resultado, os valores CLS relatados por ferramentas de laboratório para uma determinada página podem ser menores do que os usuários reais experimentam no campo. {% endAside %}
+
+### Ferramentas de campo
+
+- [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Console de Busca (relatório Core Web Vitals)](https://support.google.com/webmasters/answer/9205520)
+- [Biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Ferramentas de laboratório
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Medição da CLS em JavaScript
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+Para medir a CLS em JavaScript, você pode usar a [API Layout Instability](https://github.com/WICG/layout-instability). O exemplo a seguir mostra como criar um [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que escuta as entradas `layout-shift`, as agrupa em sessões registra o valor máximo da sessão sempre que ela mudar.
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // Only count layout shifts without recent user input.
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // Log the updated value (and its entries) to the console.
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Este código mostra a forma básica de calcular e registrar a CLS. No entanto, medir com precisão a CLS de uma forma que corresponda ao que é medido no [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/) (CrUX) é mais complicado. Veja mais detalhes abaixo:
+
+{% endAside %}
+
+Na maioria dos casos, o valor CLS no momento em que a página está sendo descarregada é o valor CLS final para essa página, mas existem algumas exceções importantes:
+
+A seção a seguir lista as diferenças entre o que a API informa e como a métrica é calculada.
+
+#### Diferenças entre a métrica e a API
+
+- Se uma página for carregada em segundo plano, ou se estiver em segundo plano antes do navegador renderizar qualquer conteúdo, ela não deve relatar nenhum valor CLS.
+- Se uma página for restaurada do cache [back/forward](/bfcache/#impact-on-core-web-vitals), seu valor CLS deve ser zerado, pois os usuários percebem isto como uma visita de página distinta.
+- A API não relata entradas `layout-shift` para mudanças que ocorrem dentro de iframes, mas para medir corretamente a CLS, você deve considerá-las. Subquadros podem usar a API para relatar suas entradas `layout-shift` para o quadro pai para [agregação](https://github.com/WICG/layout-instability#cumulative-scores).
+
+Além dessas exceções, a CLS introduz uma complexidade adicional devido ao fato de que mede toda a vida útil de uma página:
+
+- Os usuários podem manter uma aba aberta por *muito* tempo: dias, semanas, meses. Na verdade, um usuário pode nunca fechar uma aba.
+- Em sistemas operacionais móveis, os navegadores normalmente não executam callbacks de descarregamento de página para abas em segundo plano, dificultando o relato do valor "final".
+
+Para lidar com esses casos, a CLS deve ser relatada sempre que uma página entrar em segundo plano, além de quando for descarregada (o [evento `visibilitychange`](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange) cobre os dois cenários). E sistemas de análise que recebem esses dados precisarão calcular o valor da CLS final no back-end.
+
+Em vez de memorizar e lidar com todos esses casos você mesmo, os desenvolvedores podem usar a [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir a CLS, que é responsável por tudo o que foi mencionado acima:
+
+```js
+import {onCLS} from 'web-vitals';
+
+// Measure and log CLS in all situations
+// where it needs to be reported.
+onCLS(console.log);
+```
+
+Para um exemplo completo de como medir a CLS em JavaScript, consulte [o código-fonte de `onCLS()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts).
+
+{% Aside %} Em alguns casos (como iframes de origem cruzada), não é possível medir a CLS em JavaScript. Consulte a seção de [limitações](https://github.com/GoogleChrome/web-vitals#limitations) da biblioteca `web-vitals` para mais detalhes. {% endAside %}
+
+## Como melhorar a CLS
+
+Para a maioria dos sites, você pode evitar todas as mudanças inesperadas de layout, aderindo a alguns princípios orientadores:
+
+- **Sempre inclua atributos de tamanho em suas imagens e elementos de vídeo ou reserve o espaço necessário usando algo como [caixas de proporção de aspecto do CSS](https://css-tricks.com/aspect-ratio-boxes/).** Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem é carregada. Observe que você também pode usar a [política de recursos de mídia não dimensionada](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md) para forçar esse comportamento em navegadores que oferecem suporte a políticas de recursos.
+- **Nunca insira conteúdo acima do conteúdo existente, exceto em resposta a uma interação do usuário.** Isso garante que quaisquer mudanças de layout que ocorram sejam esperadas.
+- **Prefira animações de transformação a animações de propriedades que acionam mudanças de layout.** Anime as transições de uma forma que forneça contexto e continuidade de um estado para outro.
+
+Para obter informações detalhadas sobre como melhorar a CLS, veja [Otimize a CLS](/optimize-cls/) e [Depuração de mudanças de layout](/debug-layout-shifts).
+
+## Recursos adicionais
+
+- Orientação do Google para tags sobre como [minimizar a mudança de layout](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)
+- [Understanding Cumulative Layout Shift (Compreendendo a mudança cumulativa de layout)](https://youtu.be/zIJuY-JCjqw) por [Annie Sullivan](https://anniesullie.com/) e [Steve Kobes](https://kobes.ca/) em [#PerfMatters](https://perfmattersconf.com/) (2020)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/pt/metrics/custom-metrics/index.md b/src/site/content/pt/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..3e4d152a0a0
--- /dev/null
+++ b/src/site/content/pt/metrics/custom-metrics/index.md
@@ -0,0 +1,346 @@
+---
+layout: post
+title: Métricas personalizadas
+authors:
+  - philipwalton
+date: 2019-11-08
+description: As métricas personalizadas permitem medir e otimizar aspectos da experiência do seu site que são características exclusivas dele.
+tags:
+  - performance
+  - metrics
+---
+
+É muito valioso ter [métricas centradas](/user-centric-performance-metrics/) no usuário que você pode medir, universalmente, em qualquer site. Essas métricas permitem que você:
+
+- Entenda como os usuários de verdade experimentam a web como um todo
+- Comparar facilmente o seu site com o de um concorrente
+- Rastrear dados úteis e acionáveis em suas ferramentas de análise sem a necessidade de escrever um código personalizado
+
+As métricas universais oferecem uma boa base, mas em muitos casos você precisa medir *mais* do que apenas essas métricas para capturar a experiência completa do seu site específico.
+
+As métricas personalizadas permitem que você avalie aspectos da experiência de seu site que podem se aplicar apenas a ele, como:
+
+- Quanto tempo leva para um aplicativo de página única (SPA) fazer a transição de uma "página" para outra
+- Quanto tempo leva para uma página exibir dados buscados em um banco de dados para usuários conectados
+- Quanto tempo leva para um aplicativo renderizado do lado do servidor (SSR) [hidratar](https://addyosmani.com/blog/rehydration/) seus componentes
+- A taxa de uso de cache para recursos carregados por visitantes recorrentes
+- A latência de eventos de clique ou eventos de teclado em um jogo
+
+## APIs para medir métricas personalizadas
+
+Historicamente, os desenvolvedores web não tinham muitas APIs de baixo nível para medir o desempenho e, como resultado, eles tinham que recorrer a hacks para medir se um site estava tendo um bom desempenho.
+
+Por exemplo, é possível determinar se o thread principal está bloqueado devido a tarefas JavaScript de longa execução, executando um `requestAnimationFrame` e calculando o delta entre cada quadro. Se o delta for significativamente maior do que a taxa de quadros da tela, você pode relatá-la como uma tarefa longa. No entanto, esses hacks não são recomendados porque eles afetam o desempenho por si próprios (esgotando a bateria, por exemplo).
+
+A primeira regra da medição de desempenho eficaz é garantir que suas técnicas de medição de desempenho não estejam causando problemas de desempenho por si mesmas. Portanto, para quaisquer métricas personalizadas que você medir em seu site, é melhor usar uma das seguintes APIs, se possível.
+
+### Performance Observer
+
+Entender a API PerformanceObserver é fundamental para a criação de métricas de desempenho customizadas porque é o mecanismo pelo qual você obtém dados de todas as outras APIs de desempenho discutidas neste artigo.
+
+Com o `PerformanceObserver` você pode se inscrever passivamente em eventos relacionados ao desempenho, o que significa que essas APIs geralmente não interferem no desempenho da página, já que seus callbacks geralmente são disparados durante [períodos ociosos](https://w3c.github.io/requestidlecallback/#idle-periods).
+
+Você cria um `PerformanceObserver` passando a ele um callback a ser executado sempre que novas entradas de desempenho forem despachadas. Em seguida, você diz ao observador quais tipos de entradas escutar por meio do método [`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe):
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+As seções abaixo listam todos os vários tipos de entrada disponíveis para observação, mas em navegadores mais recentes você pode inspecionar quais tipos de entrada estão disponíveis por meio da propriedade estática [`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute)
+
+{% Aside %} O objeto passado para o método `observe()` também pode especificar um array `entryTypes` (para observar mais de um tipo de entrada através do mesmo observador). Embora especificar `entryTypes` seja uma alternativa mais antiga com suporte mais amplo por navegadores, atualmente recomenda-se o uso de `type`, já que ele permite especificar configurações de observação adicionais para entradas específicas (como a flag `buffered`, discutido a seguir). {% endAside %}
+
+#### Observando entradas que já aconteceram
+
+Por default, os objetos `PerformanceObserver` só podem observar as entradas conforme elas forem ocorrendo. Isso pode ser problemático se você deseja carregar seu código de análise de desempenho lentamente (para não bloquear recursos de prioridade mais alta).
+
+Para obter entradas históricas (depois de terem ocorrido), defina a flag `buffered` com o valor `true` ao chamar `observe()`. O navegador incluirá entradas históricas de seu [buffer de entradas de desempenho](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer) na primeira vez que o callback de `PerformanceObserver` for chamado.
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %} Para evitar problemas de memória, o buffer de entrada de desempenho não é ilimitado. Para a maioria dos carregamentos de página típicos, é improvável que o buffer fique cheio e as entradas sejam perdidas. {% endAside %}
+
+#### APIs de desempenho legadas para evitar
+
+Antes da API Performance Observer, os desenvolvedores podiam acessar entradas de desempenho usando os três métodos a seguir, que faziam parte do objeto [`performance`](https://w3c.github.io/performance-timeline/)
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+Embora essas APIs ainda sejam suportadas, seu uso não é recomendado porque elas não permitem que você monitore quando novas entradas são emitidas. Além disso, muitas novas APIs (como Long Tasks) não são expostas por meio do objeto `performance`; elas são expostas apenas por meio do `PerformanceObserver`.
+
+A menos que você precise especificamente da compatibilidade com o Internet Explorer, é melhor evitar esses métodos em seu código e usar o `PerformanceObserver` daqui em diante.
+
+### API User Timing
+
+A [API User Timing](https://w3c.github.io/user-timing/) é a sua API de medição de propósito geral para métricas baseadas no tempo. Ela permite que você marque pontos no tempo arbitrariamente e depois meça a duração entre essas marcas.
+
+```js
+// Record the time immediately before running a task.
+performance.mark('myTask:start');
+await doMyTask();
+// Record the time immediately after running a task.
+performance.mark('myTask:end');
+
+// Measure the delta between the start and end of the task
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+Embora APIs como `Date.now()` ou `performance.now()` forneçam habilidades semelhantes, a vantagem de usar a API User Timing é que ela se integra bem às ferramentas de desempenho. Por exemplo, o Chrome DevTools visualiza [medições do User Timing no painel Desempenho](https://developers.google.com/web/updates/2018/04/devtools#tabs), e muitos provedores de análise também irão rastrear automaticamente quaisquer medições que você fizer e enviarão os dados de duração para seu back end de análise.
+
+Para relatar as medidas do User Timing, você pode usar o [PerformanceObserver](#performance-observer) e se registrar para observar as entradas do tipo de `measure`:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `measure` entries to be dispatched.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API Long Tasks
+
+A [API Long Tasks](https://w3c.github.io/longtasks/) é útil para saber quando o thread principal do navegador está bloqueado por tempo suficiente para afetar a taxa de quadros ou a latência de entrada. Atualmente, a API relatará todas as tarefas executadas por mais de 50 milissegundos (ms).
+
+Sempre que você precisar executar um código caro (ou carregar e executar scripts grandes), é útil rastrear se o código bloqueou ou não o thread principal. Na verdade, muitas métricas de nível superior são construídas sobre a API Long Tasks (como [Time to Interactive - TTI (tempo até a interatividade)](/tti/) e [Total Blocking Time - TBT (tempo total de bloqueio)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)).
+
+Para determinar quando as tarefas longas acontecem, você pode usar o [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) e se registrar para observar as entradas do tipo `longtask`:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `longtask` entries to be dispatched.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API Element Timing
+
+A métrica [Largest Contentful Paint - LCP (maior renderização de conteúdo)](/lcp/) é útil para saber quando a maior imagem ou bloco de texto foi pintado na tela, mas em alguns casos você deseja medir o tempo de renderização de um elemento diferente.
+
+Para esses casos, você pode usar a [API Element Timing](https://wicg.github.io/element-timing/). Na verdade, a API Largest Contentful Paint é construída sobre a API Element Timing e adiciona relatórios automáticos do maior elemento de conteúdo, mas você pode relatar sobre elementos adicionais acrescentando explicitamente o atributo `elementtiming` a eles e registrando um PerformanceObserver para observar o tipo de entrada do elemento.
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">This is text I care about.</p>
+...
+<script>
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `element` entries to be dispatched.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} Os tipos de elementos considerados para a Largest Contentful Paint são os mesmos que podem ser observados por meio da API Element Timing. Se você adicionar o atributo `elementtiming` a um elemento que não seja um desses tipos, o atributo será ignorado. {% endAside %}
+
+### API Event Timing
+
+A métrica [First Input Delay - FID (atraso da primeira entrada)](/fid/) mede o tempo desde o momento em que um usuário interage pela primeira vez com uma página até o momento em que o navegador é finalmente capaz de começar a processar os handlers de eventos em resposta a essa interação. No entanto, em alguns casos, também pode ser útil medir o próprio tempo de processamento do evento, bem como o tempo até que o próximo quadro possa ser renderizado.
+
+Isto é possível com a [API Event Timing](https://wicg.github.io/event-timing/) (que é usada para medir o FID), já que expõe uma série de timestamps no ciclo de vida do evento, incluindo:
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime) : a hora em que o navegador recebe o evento.
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart) : o momento em que o navegador pode começar a processar os handlers de eventos, para o evento em questão.
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend) : hora em que o navegador termina de executar todo o código síncrono iniciado a partir de handlers de eventos, para o evento em questão.
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart) : o tempo (arredondado para 8 ms por motivos de segurança) entre o momento em que o navegador recebe o evento até que seja capaz de pintar o próximo quadro depois de terminar de executar todo o código síncrono iniciado a partir dos handlers de eventos.
+
+O exemplo a seguir mostra como usar esses valores para criar medições personalizadas:
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Measure First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Measure the time it takes to run all event handlers
+    // Note: this does not include work scheduled asynchronously using
+    // methods like `requestAnimationFrame()` or `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Measure the entire duration of the event, from when input is received by
+    // the browser until the next frame can be painted after processing all
+    // event handlers.
+    // Note: similar to above, this value does not include work scheduled
+    // asynchronously using `requestAnimationFrame()` or `setTimeout()`.
+    // And for security reasons, this value is rounded to the nearest 8ms.
+    const firstInputDuration = firstInput.duration;
+
+    // Log these values the console.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API Resource Timing
+
+A [API Resource Timing](https://w3c.github.io/resource-timing/) oferece aos desenvolvedores uma visão detalhada sobre como os recursos de uma página específica foram carregados. Apesar do nome da API, as informações que ela fornece não se limitam apenas aos dados de tempo (embora haja [bastante disso](https://w3c.github.io/resource-timing/#processing-model)). Outros dados que você pode acessar incluem:
+
+- [InittorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype) : como o recurso foi obtido: por exemplo, através de uma `<script>` ou `<link>` ou de `fetch()`
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol) : o protocolo usado para buscar o recurso, como `h2` ou `quic`
+- [encodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize) / [decodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize) ]: o tamanho do recurso em sua forma codificada ou decodificada (respectivamente)
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize) : o tamanho do recurso que foi finalmente transferido pela rede. Quando os recursos são resolvidos através do cache, esse valor pode ser muito menor do que `encodedBodySize` e, em alguns casos, pode ser zero (se nenhuma revalidação do cache for necessária).
+
+Observe, você pode usar a propriedade `transferSize` das entradas de tempo de recursos para medir uma métrica de *taxa de acerto de cache* ou talvez até mesmo uma métrica de *tamanho total de recurso em cache*, que pode ser útil para entender como sua estratégia de armazenamento em cache de recursos afeta o desempenho para visitantes repetidos.
+
+O exemplo a seguir registra todos os recursos solicitados pela página e indica se cada recurso foi ou não preenchido por meio do cache.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Start listening for `resource` entries to be dispatched.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API Navigation Timing
+
+A [API Navigation Timing](https://w3c.github.io/navigation-timing/) é semelhante à API Resource Timing, mas relata apenas [solicitações de navegação](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests). O tipo de entrada `navigation` também é semelhante ao tipo de entrada `resource`[, mas contém algumas informações adicionais](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming) específicas para solicitações de navegação (como quando os eventos `DOMContentLoaded` e `load` são acionados).
+
+Uma métrica que muitos desenvolvedores rastreiam para entender o tempo de resposta do servidor ([Time to First Byte](https://en.wikipedia.org/wiki/Time_to_first_byte)) está disponível através da API Navigation Timing - especificamente, é o timestamp `responseStart` da entrada.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+Outra métrica que pode interessar aos desenvolvedores que usam o service worker é o tempo de inicialização do service worker para solicitações de navegação. Esta é a quantidade de tempo que leva para o navegador iniciar o thread do service worker antes de começar a interceptar eventos de transferência de dados.
+
+O tempo de inicialização do service worker para uma solicitação de navegação específica pode ser determinado a partir do delta entre `entry.responseStart` e `entry.workerStart` .
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### API Server Timing
+
+A [API Server Timing](https://w3c.github.io/server-timing/) permite que você passe dados de temporização específicos da solicitação de seu servidor para o navegador por meio de cabeçalhos de resposta. Por exemplo, você pode indicar quanto tempo levou para pesquisar dados em um banco de dados para uma solicitação específica - o que pode ser útil na depuração de problemas de desempenho causados por lentidão no servidor.
+
+Para desenvolvedores que usam provedores de análise terceirizados, a API Server Timing é a única maneira de correlacionar os dados de desempenho do servidor com outras métricas de negócios que essas ferramentas analíticas podem estar medindo.
+
+Para especificar os dados de tempo do servidor em suas respostas, você pode usar o cabeçalho de resposta `Server-Timing`. Aqui está um exemplo.
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+Então, a partir de suas páginas, você pode ler estes dados em ambos as entradas `resource` ou `navigation` das APIs Resource Timing e Navigation Timing.
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Logs all server timing data for this response
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
diff --git a/src/site/content/pt/metrics/fcp/index.md b/src/site/content/pt/metrics/fcp/index.md
new file mode 100644
index 00000000000..30c9e367ed1
--- /dev/null
+++ b/src/site/content/pt/metrics/fcp/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: First Contentful Paint (FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-19
+description: Este artigo apresenta a métrica First Contentful Paint (FCP) e explica como medi-la
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}A First Contentful Paint (FCP), ou primeira renderização de conteúdo, é uma métrica importante e centrada no usuário para medir [a velocidade de carregamento percebida](/user-centric-performance-metrics/#types-of-metrics) porque marca o primeiro ponto na linha do tempo de carregamento da página onde o usuário pode ver alguma coisa na tela: uma FCP rápida ajuda a tranquilizar o usuário que algo está [acontecendo](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## O que é FCP?
+
+A métrica First Contentful Paint (FCP) mede o tempo desde o início do carregamento da página até o momento em que qualquer parte do conteúdo da página é renderizada na tela. Para esta métrica, "conteúdo" se refere a texto, imagens (incluindo imagens de fundo), `<svg>` ou elementos `<canvas>` não-vazios.
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="Timeline FCP do google.com", width="800", height="311", linkTo=true %}
+
+Na linha do tempo de carregamento acima, a FCP acontece no segundo quadro, pois é quando os primeiros elementos de texto e imagem são renderizados na tela.
+
+Você notará que embora parte do conteúdo tenha sido renderizado, nem todo ele foi renderizado. Esta é uma distinção importante a ser feita entre a *First Contentful Paint (FCP)* e a *[Largest Contentful Paint (LCP)](/lcp/)*, que tem como objetivo medir quando o conteúdo principal da página terminou de carregar.
+
+<picture>
+  <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="Bons valores de FCP são 1,8 segundos ou menos, valores baixos são maiores que 3,0 segundos e qualquer coisa entre as necessidades de melhoria", width="400", height="300" %}
+</picture>
+
+### O que é uma boa pontuação de FCP?
+
+Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma First Contentful Paint de **1,8 segundos** ou menos. Para garantir que você esteja atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o **75º percentil** de carregamentos de página, segmentado através de dispositivos móveis e desktop.
+
+## Como medir a FCP
+
+A FCP pode ser medida [em laboratório](/user-centric-performance-metrics/#in-the-lab) ou [em campo](/user-centric-performance-metrics/#in-the-field) e está disponível nas seguintes ferramentas:
+
+### Ferramentas de campo
+
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Relatório de experiência do usuário Chrome](https://developer.chrome.com/docs/crux/)
+- [Console de Busca (relatório de velocidade)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [Biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Ferramentas de laboratório
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+
+### Medição da FCP em JavaScript
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+Para medir a FCP em JavaScript, você pode usar a [API Paint Timing](https://w3c.github.io/paint-timing/). O exemplo a seguir mostra como criar um [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que escuta uma entrada `paint` com o nome `first-contentful-paint` e a registra no console.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Este código mostra como registrar a entrada `first-contentful-paint` no console, mas medir a FCP em JavaScript é mais complicado. Veja os detalhes abaixo :
+
+{% endAside %}
+
+No exemplo acima, a entrada registrada `first-contentful-paint` informará quando o primeiro elemento de conteúdo foi renderizado. No entanto, em alguns casos, essa entrada não é válida para medir a FCP.
+
+A seção a seguir lista as diferenças entre o que a API informa e como a métrica é calculada.
+
+#### Diferenças entre a métrica e a API
+
+- A API enviará uma entrada de `first-contentful-paint` para páginas carregadas numa aba em segundo plano, mas essas páginas devem ser ignoradas ao calcular a FCP (os tempos de primeira renderização só devem ser considerados se a página estiver em primeiro plano o tempo todo).
+- A API não relata `first-contentful-paint` quando a página é restaurada do [cache back/forward](/bfcache/#impact-on-core-web-vitals), mas a FCP deve ser medida nesses casos, pois os usuários as experimentam como visitas de página distintas.
+- A API [pode não relatar tempos de pintura de iframes de origem cruzada](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes) , mas para medir corretamente a FCP, você deve considerar todos os quadros. Subquadros podem usar a API para relatar seus tempos de pintura ao quadro pai para agregação.
+
+Em vez de memorizar todas essas diferenças sutis, os desenvolvedores podem usar a [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir a FCP, que já lida com essas diferenças (onde for possível):
+
+```js
+import {onFCP} from 'web-vitals';
+
+// Measure and log FCP as soon as it's available.
+onFCP(console.log);
+```
+
+Para um exemplo completo de como medir a FCP em JavaScript, consulte [o código-fonte de `onFCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts).
+
+{% Aside %} Em alguns casos (como iframes de origem cruzada), não é possível medir a FCP em JavaScript. Consulte a seção de [limitações](https://github.com/GoogleChrome/web-vitals#limitations) da biblioteca `web-vitals` para mais detalhes. {% endAside %}
+
+## Como melhorar a FCP
+
+Para aprender como melhorar a FCP para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer [oportunidades](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específicas ou [diagnósticos](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics) que a auditoria sugerir.
+
+Para saber como melhorar a FCP em geral (para qualquer site), consulte os seguintes guias de desempenho:
+
+- [Elimine recursos que causam bloqueio de renderização](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [Minifique o CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [Remova o CSS não utilizado](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [Pré-conecte a origens necessárias](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Reduza os tempos de resposta do servidor (TTFB)](/ttfb/)
+- [Evite múltiplos redirecionamentos de página](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [Pré-carregue solicitações importantes](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Evite enormes cargas de rede](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [Sirva ativos estáticos com uma política de cache eficiente](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Evite um tamanho excessivo do DOM](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [Minimize a profundidade de solicitações críticas](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Certifique-se que o texto permanece visível durante o carregamento de webfonts](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/pt/metrics/fid/index.md b/src/site/content/pt/metrics/fid/index.md
new file mode 100644
index 00000000000..08e7bda4a31
--- /dev/null
+++ b/src/site/content/pt/metrics/fid/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: First Input Delay (FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: Este artigo apresenta a métrica First Input Delay (FID) e explica como medi-la
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} First Input Delay (FID), ou Atraso da Primeira Entrada, é uma métrica importante e centrada no usuário para medir a [responsividade do carregamento](/user-centric-performance-metrics/#types-of-metrics) porque quantifica a experiência que os usuários sentem ao tentar interagir com páginas que não respondem: uma FID baixa ajuda a garantir que a página seja [utilizável](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Todos nós sabemos como é importante causar uma boa primeira impressão. É importante ao conhecer novas pessoas e também ao construir experiências na web.
+
+Na web, uma boa primeira impressão pode fazer a diferença entre alguém se tornar um usuário fiel ou sair e nunca mais voltar. A questão é: o que causa uma boa impressão e como você mede o tipo de impressão que provavelmente está causando nos usuários?
+
+Na web, as primeiras impressões podem assumir muitas formas diferentes: temos as primeiras impressões sobre o design e o apelo visual de um site, bem como as primeiras impressões sobre sua velocidade e capacidade de resposta.
+
+Embora seja difícil medir o quanto os usuários gostam do design de um site com APIs da web, medir sua velocidade e capacidade de resposta não é!
+
+A primeira impressão que os usuários têm de quão rápido seu site carrega pode ser medida com a [First Contentful Paint (FCP)](/fcp/). Mas a rapidez com que seu site pode renderizar pixels na tela é apenas parte da história. Igualmente importante é a capacidade de resposta do seu site quando os usuários tentam interagir com esses pixels!
+
+A métrica First Input Delay (FID) ajuda a medir a primeira impressão do usuário sobre a interatividade e capacidade de resposta do seu site.
+
+## O que é FID?
+
+A FID mede o tempo desde quando um usuário interage pela primeira vez com uma página (ou seja, quando clica num link, toca num botão ou usa um controle personalizado baseado em JavaScript) até o momento em que o navegador é realmente capaz de começar a processar manipuladores de eventos em resposta a essa interação.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Bons valores fid são 2,5 segundos, valores fracos são maiores que 4,0 segundos e qualquer coisa entre precisa de melhorias", width="400", height="300" %}
+</picture>
+
+### O que é uma boa pontuação da FID?
+
+Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma First Input Delay de **100 milissegundos** ou menos. Para garantir que você está atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o **75º percentil** de carregamentos de página, segmentado em dispositivos móveis e desktop.
+
+{% Aside %} Para saber mais sobre a pesquisa e a metodologia por trás dessa recomendação, veja: [Definindo os limites das Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## FID em detalhes
+
+Como desenvolvedores que escrevem código que responde a eventos, geralmente presumimos que nosso código será executado imediatamente - assim que o evento acontecer. Mas, como usuários, todos nós frequentemente experimentamos o oposto - carregamos uma página web em nosso telefone, tentamos interagir com ela e ficamos frustrados quando nada acontece.
+
+Em geral, o atraso de entrada (também conhecido como latência de entrada) acontece porque o thread principal do navegador está ocupado fazendo outra coisa, então ele não pode (ainda) responder ao usuário. Um motivo comum para isto é o navegador estar ocupado analisando e executando um grande arquivo JavaScript carregado pelo seu aplicativo. Enquanto está ocupado com isso, ele não pode executar nenhum ouvinte de evento porque o JavaScript que está carregando pode instruí-lo a fazer outra coisa.
+
+{% Aside 'gotchas' %} A FID mede apenas o "atraso" no processamento do evento. Ela não mede o tempo de processamento do evento em si, nem o tempo que o navegador leva para atualizar a IU após a execução dos manipuladores de eventos. Embora esse tempo afete a experiência do usuário, incluí-lo como parte da FID incentivaria os desenvolvedores a responder aos eventos de forma assíncrona, o que melhoraria a métrica, mas provavelmente tornaria a experiência pior. Veja [por que considerar apenas o atraso de entrada](#why-only-consider-the-input-delay) abaixo, para mais detalhes. {% endAside %}
+
+Considere a seguinte linha do tempo de um carregamento de página web típico:
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="Exemplo de rastreamento de carregamento de página", width="800", height="260", linkTo=true %}
+
+A visualização acima mostra uma página que está fazendo algumas solicitações de rede para recursos (provavelmente arquivos CSS e JS) e, depois que o download desses recursos termina, eles são processados no thread principal.
+
+Isso resulta em períodos em que o thread principal fica momentaneamente ocupado, o que é indicado pelos blocos de [tarefas](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task) de cor bege.
+
+Atrasos longos na primeira entrada normalmente ocorrem entre a [First Contentful Paint (FCP)](/fcp/) e a [Time to Interactive (TTI)](/tti/) porque a página renderizou parte de seu conteúdo, mas ainda não é interativa de forma confiável. Para ilustrar como isso pode acontecer, FCP e TTI foram adicionadas à linha do tempo:
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="Exemplo de rastreamento de carregamento de página com FCP e TTI", width="800", height="340", linkTo=true %}
+
+Você deve ter notado que há uma boa quantidade de tempo (incluindo três [tarefas longas](/custom-metrics/#long-tasks-api)) entre a FCP e a TTI. Se um usuário tentar interagir com a página durante esse tempo (por exemplo, clicar num link), haverá um atraso entre quando o clique é recebido e quando o thread principal será capaz de responder.
+
+Considere o que aconteceria se um usuário tentasse interagir com a página próximo ao início da tarefa mais longa:
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="Exemplo de rastreamento de carregamento de página com FCP, TTI e FID", width="800", height="380", linkTo=true %}
+
+Como a entrada ocorre enquanto o navegador está no meio da execução de uma tarefa, ele precisa esperar até que a tarefa seja concluída para poder responder à entrada. O tempo de espera é o valor FID para este usuário nesta página.
+
+{% Aside %} Neste exemplo, o usuário acabou de interagir com a página no início do período mais ocupado da thread principal. Se o usuário tivesse interagido com a página apenas um momento antes (durante o período ocioso), o navegador poderia ter respondido imediatamente. Essa variação no atraso de entrada ressalta a importância de olhar para a distribuição dos valores FID ao relatar a métrica. Você pode ler mais sobre isto na seção abaixo sobre como analisar e relatar os dados da FID. {% endAside %}
+
+### E se uma interação não tiver um ouvinte de eventos?
+
+O FID mede o delta entre o momento em que um evento de entrada é recebido e a próxima vez que o thread principal fica ocioso. Isto significa que a FID é medida **mesmo nos casos em que um ouvinte de evento não foi registrado.** A razão é porque muitas interações do usuário não requerem um ouvinte de evento, mas *exigem* que o thread principal esteja ocioso, para que possa executar.
+
+Por exemplo, todos os elementos HTML a seguir precisam aguardar a conclusão das tarefas em andamento no thread principal antes de responder às interações do usuário:
+
+- Campos de texto, caixas de seleção e botões de opção ( `<input>`, `<textarea>` )
+- Menus dropdown com Select ( `<select>` )
+- Links ( `<a>` )
+
+### Por que considerar apenas a primeira entrada?
+
+Embora um atraso de qualquer entrada possa levar a uma experiência ruim do usuário, recomendamos medir o primeiro atraso de entrada por alguns motivos:
+
+- O primeiro atraso de entrada será a primeira impressão do usuário sobre a capacidade de resposta do seu site, e as primeiras impressões são críticas para moldar nossa impressão geral da qualidade e confiabilidade de um site.
+- Os maiores problemas de interatividade que vemos na web hoje ocorrem durante o carregamento da página. Portanto, acreditamos que o foco inicial em melhorar a primeira interação do usuário com o site terá o maior impacto na melhoria da interatividade geral da web.
+- As soluções recomendadas sobre como sites devem corrigir grandes atrasos na primeira entrada (dividir o código, carregar menos JavaScript no início, etc.) não são necessariamente as mesmas soluções para corrigir atrasos de entrada lentos após o carregamento da página. Separando essas métricas, poderemos fornecer diretrizes de desempenho mais específicas para os desenvolvedores web.
+
+### O que conta como uma primeira entrada?
+
+A FID é uma métrica que mede a capacidade de resposta de uma página durante o carregamento. Como tal, ela se concentra apenas nos eventos de entrada causados por ações discretas como cliques, toques e pressionamentos de tecla.
+
+Outras interações, como rolagem e zoom, são ações contínuas e têm restrições de desempenho completamente diferentes (além disso, os navegadores são geralmente capazes de ocultar sua latência executando-as em um thread separado).
+
+Em outras palavras, a FID se concentra no R (responsividade) do [modelo de desempenho RAIL](/rail/) , enquanto que a rolagem e o zoom estão mais relacionados ao A (animação), e suas qualidades de desempenho devem ser avaliadas separadamente.
+
+### E se um usuário nunca interagir com seu site?
+
+Nem todos os usuários irão interagir com o seu site sempre que o visitarem. E nem todas as interações são relevantes para a FID (conforme mencionamos na seção anterior). Além disso, as primeiras interações de alguns usuários serão em momentos ruins (quando o thread principal está ocupado por um longo período de tempo), e as primeiras interações de outros usuários serão em momentos bons (quando o thread principal está completamente ocioso).
+
+Isto significa que alguns usuários não terão valores FID, alguns usuários terão valores FID baixos e alguns usuários provavelmente terão valores FID altos.
+
+A maneira como você rastreia, relata e analisa o FID provavelmente será um pouco diferente de outras métricas com as quais você pode estar acostumado. A próxima seção explica a melhor maneira de fazer isso.
+
+### Por que considerar apenas o atraso de entrada?
+
+Conforme mencionado acima, o FID mede apenas o "atraso" durante o processamento de eventos. Ele não mede o tempo de processamento do evento em si, nem o tempo que o navegador leva para atualizar a IU após a execução dos manipuladores de eventos.
+
+Mesmo que esse tempo seja importante para o usuário e *afete* sua experiência, ele não está incluído nesta métrica, pois isto poderia incentivar os desenvolvedores a adicionar soluções que realmente poderiam tornar a experiência pior, ou seja, eles poderiam encapsular a lógica de manipulação de eventos num callback assíncrono (via `setTimeout()` ou `requestAnimationFrame()`) para separá-lo da tarefa associada ao evento. O resultado seria uma melhoria na pontuação da métrica, mas a resposta percebida pelo usuário seria mais lenta.
+
+No entanto, enquanto a FID mede apenas a parte do "atraso" da latência do evento, os desenvolvedores que desejam controlar mais o ciclo de vida do evento podem fazer isso usando a [API de temporização de eventos](https://wicg.github.io/event-timing/). Consulte o guia sobre [métricas personalizadas](/custom-metrics/#event-timing-api) para mais detalhes.
+
+## Como medir a FID
+
+A FID é uma métrica que só pode ser medida [em campo](/user-centric-performance-metrics/#in-the-field), pois exige que um usuário real interaja com sua página. Você pode medir a FID com as seguintes ferramentas.
+
+{% Aside %} A FID requer um usuário real e, portanto, não pode ser medida no laboratório. No entanto, a métrica [Total Blocking Time (TBT)](/tbt/) é mensurável em laboratório, se correlaciona bem com a FID em campo e também captura problemas que afetam a interatividade. As otimizações que melhoram a TBT no laboratório também devem melhorar a FID para seus usuários. {% endAside %}
+
+### Ferramentas de campo
+
+- [Relatório de experiência do usuário Chrome](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Console de Busca (relatório Core Web Vitals)](https://support.google.com/webmasters/answer/9205520)
+- [Biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Medição da FID em JavaScript
+
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
+Para medir a FID em JavaScript, você pode usar a [API Event Timing](https://wicg.github.io/event-timing). O exemplo a seguir mostra como criar um [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que escuta as entradas [`first-input`](https://wicg.github.io/event-timing/#sec-performance-event-timing) e as registra no console:
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %} Este código mostra como registrar as entradas `first-input` no console e calcular seu atraso. No entanto, medir a FID em JavaScript é mais complicado. Veja detalhes abaixo: {% endAside %}
+
+No exemplo acima, o valor do atraso `first-input` é medido tomando o delta entre os timestamps `startTime` e `processingStart` da entrada. Na maioria dos casos, esse será o valor FID; entretanto, nem todas as entradas `first-input` são válidas para medir a FID.
+
+A seção a seguir lista as diferenças entre o que a API informa e como a métrica é calculada.
+
+#### Diferenças entre a métrica e a API
+
+- A API despachará `first-input` para páginas carregadas numa aba de plano de fundo, mas essas páginas devem ser ignoradas ao calcular a FID.
+- A API também despachará as entradas `first-input` se a página estiver em segundo plano antes da ocorrência da primeira entrada, mas essas páginas também devem ser ignoradas ao calcular a FID (entradas são consideradas apenas se a página estava em primeiro plano o tempo todo).
+- A API não relata `first-input` quando a página é restaurada do [cache back/forward](/bfcache/#impact-on-core-web-vitals), mas a FID deve ser medida nesses casos, pois os usuários as experimentam como visitas de página distintas.
+- A API não considera elementos dentro de iframes, mas para medir corretamente a FID, você deve considerá-los. Os subquadros podem usar a API para relatar suas entradas `first-input` ao quadro pai para agregação.
+
+Em vez de memorizar todas essas diferenças sutis, os desenvolvedores podem usar a [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir a FID, que já lida com essas diferenças (onde for possível):
+
+```js
+import {onFID} from 'web-vitals';
+
+// Measure and log FID as soon as it's available.
+onFID(console.log);
+```
+
+Para um exemplo completo de como medir a FID em JavaScript, consulte [o código-fonte de `onFID()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts).
+
+{% Aside %} Em alguns casos (como iframes de origem cruzada), não é possível medir a FID em JavaScript. Consulte a seção de [limitações](https://github.com/GoogleChrome/web-vitals#limitations) da biblioteca `web-vitals` para mais detalhes. {% endAside %}
+
+### Analisando e relatando dados da FID
+
+Devido à variação esperada nos valores da FID, é fundamental que, ao relatar a FID, você observe a distribuição dos valores e se concentre nos percentis mais altos.
+
+Embora a [escolha do percentil](/defining-core-web-vitals-thresholds/#choice-of-percentile) para todos os limites do Core Web Vitals seja o 75º, para a FID em particular, ainda recomendamos olhar para os percentis 95 a 99, pois eles corresponderão às primeiras experiências particularmente ruins que os usuários estão tendo com o seu site. E isto irá revelar as áreas que mais precisam de melhorias.
+
+Isto vale mesmo se você segmentar seus relatórios por categoria ou tipo de dispositivo. Por exemplo, se você executa relatórios separados para desktop e celular, o valor de FID que deve lhe interessar em desktops deve ser o percentil 95 a 99 dos usuários de desktop, e o valor FID com que deve lhe interessar em dispositivos móveis deve ser o percentil 95 a 99 dos usuários móveis.
+
+## Como melhorar a FID
+
+Para aprender como melhorar a FID para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer [oportunidades](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específicas que a auditoria sugerir.
+
+Embora o FID seja uma métrica de campo (e o Lighthouse seja uma ferramenta de métrica de laboratório), a orientação para melhorar a FID é a mesma indicada para melhorar a métrica de laboratório [Total Blocking Time (TBT)](/tbt/).
+
+Para saber como melhorar a FID, veja [Otimize a FID](/optimize-fid/). Para obter orientações adicionais sobre técnicas de desempenho individual que também podem melhorar a FID, consulte:
+
+- [Reduza o impacto do código de terceiros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Reduza o tempo de execução do JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimize o trabalho da thread principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/pt/metrics/index.md b/src/site/content/pt/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/pt/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/pt/metrics/lcp/index.md b/src/site/content/pt/metrics/lcp/index.md
new file mode 100644
index 00000000000..48309904392
--- /dev/null
+++ b/src/site/content/pt/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Largest Contentful Paint (LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-19
+description: Este artigo apresenta a métrica Largest Contentful Paint (LCP) e explica como medi-la
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Largest Contentful Paint (LCP), ou Maior Renderização de Conteúdo, é uma métrica importante e centrada no usuário para medir [a velocidade de carregamento percebida](/user-centric-performance-metrics/#types-of-metrics) porque marca o ponto na linha do tempo de carregamento da página quando o conteúdo principal da página provavelmente já foi carregado. Uma LCP rápida ajuda a assegurar ao usuário que o página é [útil](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Historicamente, tem sido um desafio para os desenvolvedores web medir a rapidez com que o conteúdo principal de uma página web carrega e torna-se visível aos usuários.
+
+Métricas mais antigas, como [load](https://developer.mozilla.org/docs/Web/Events/load) ou [DOMContentLoaded,](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) não são boas porque não correspondem necessariamente ao que o usuário vê na tela. E as métricas de desempenho mais novas e centradas no usuário, como a [First Contentful Paint (FCP),](/fcp/) capturam apenas o início da experiência de carregamento. Se uma página mostra uma tela inicial ou exibe um indicador de carregamento, este momento não é muito relevante para o usuário.
+
+No passado, recomendamos métricas de desempenho como [First Meaningful Paint (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) e [Speed Index (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) (ambas disponíveis no Lighthouse) para ajudar a capturar mais aspectos da experiência de carregamento após a renderização inicial, mas essas métricas são complexas, difíceis de explicar e muitas vezes incorretas, o que significa que ainda não identificam quando o conteúdo principal da página foi carregado.
+
+Às vezes, o mais simples é o melhor. Com base em discussões no [W3C Web Performance Working Group](https://www.w3.org/webperf/) e em pesquisas feitas no Google, descobrimos que uma maneira mais precisa de medir quando o conteúdo principal de uma página é carregado é verificar quando o maior elemento foi renderizado.
+
+## O que é LCP?
+
+A métrica Largest Contentful Paint (LCP) informa o tempo de renderização da maior [imagem ou bloco de texto](#what-elements-are-considered) visível na janela de visualização (viewport), em relação a quando a página [começou a carregar pela primeira vez](https://w3c.github.io/hr-time/#timeorigin-attribute).
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="Bons valores de LCP são 2,5 segundos, valores fracos são maiores que 4,0 segundos e qualquer coisa entre precisa de melhorias", width="400", height="300" %}
+</picture>
+
+### O que é uma boa pontuação de LCP?
+
+Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma Largest Contentful Paint de **2,5 segundos** ou menos. Para garantir que você esteja atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o **75º percentil** de carregamentos de página, segmentado através de dispositivos móveis e desktop.
+
+{% Aside %} Para saber mais sobre a pesquisa e a metodologia por trás dessa recomendação, veja: [Definindo os limites das Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### Que elementos são considerados?
+
+Conforme especificado atualmente na [API da Largest Contentful Paint](https://wicg.github.io/largest-contentful-paint/), os tipos de elementos considerados para a Largest Contentful Paint são:
+
+- Elementos `<img>`
+- `<image>` dentro de um elemento `<svg>`
+- `<video>` (a imagem do pôster é usada)
+- Um elemento com uma imagem de plano de fundo carregada por meio da [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (em oposição a um [gradiente CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients) )
+- [Elementos de bloco](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements) contendo nós de texto ou outros elementos-filho de texto inline.
+
+Observe que restringir os elementos a este conjunto limitado foi intencional para manter as coisas simples no início. Elementos adicionais (por exemplo, `<svg>`, `<video>` ) podem ser adicionados no futuro, à medida em que mais pesquisas são realizadas.
+
+### Como o tamanho de um elemento é determinado?
+
+O tamanho do elemento relatado para a métrica Largest Contentful Paint é normalmente o tamanho que é visível para o usuário dentro da janela de visualização (viewport). Se o elemento se estender para fora da janela de visualização, ou se algum dos elementos for cortado ou tiver um [overflow](https://developer.mozilla.org/docs/Web/CSS/overflow) invisível, essas partes não serão contadas para o tamanho do elemento.
+
+Para elementos de imagem que foram redimensionados de seu [tamanho intrínseco](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size), o tamanho relatado é o tamanho visível ou o tamanho intrínseco, o que for menor. Por exemplo, imagens que são reduzidas a um tamanho muito menor do que seu tamanho intrínseco apenas relatam o tamanho em que são exibidas, enquanto imagens que são esticadas ou expandidas para um tamanho maior relatam apenas seus tamanhos intrínsecos.
+
+Para elementos de texto, apenas o tamanho de seus nós de texto é considerado (o menor retângulo que abrange todos os nós de texto).
+
+Para todos os elementos, qualquer margem externa (margin), margem interna (padding) ou borda (border) aplicada via CSS não é considerada.
+
+{% Aside %} Determinar quais nós de texto pertencem a quais elementos às vezes pode ser complicado, especialmente para elementos cujos filhos incluem não apenas elementos inline e nós de texto simples, mas também elementos de bloco. A questão principal é que cada nó de texto pertence apenas ao seu elemento ancestral de bloco mais próximo. Nos [termos da especificação](https://wicg.github.io/element-timing/#set-of-owned-text-nodes): cada nó de texto pertence ao elemento que gera o [bloco que o contém](https://developer.mozilla.org/docs/Web/CSS/Containing_block). {% endAside %}
+
+### Quando é relatada a renderização de maior conteúdo?
+
+As páginas Web geralmente são carregadas em estágios e, como resultado, é possível que o maior elemento da página mude.
+
+Para lidar com esse potencial de mudança, o navegador despacha um [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) do tipo `largest-contentful-paint` identificando o elemento de maior conteúdo assim que o navegador renderizar o primeiro quadro. Mas depois, após a renderização dos quadros subsequentes, ele despachará outro [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) sempre que o elemento de maior conteúdo mudar.
+
+Por exemplo, numa página com texto e uma imagem principal, o navegador pode inicialmente apenas renderizar o texto, momento em que o navegador enviaria uma entrada de `largest-contentful-paint` cuja propriedade `element` provavelmente faria referência a um `<p>` ou `<h1>`. Posteriormente, quando a imagem herói terminar de carregar, uma segunda entrada `largest-contentful-paint` seria despachada e sua propriedade `element` faria referência ao elemento `<img>`.
+
+É importante observar que um elemento só pode ser considerado o maior elemento com conteúdo depois de renderizado e estar visível para o usuário. Imagens que ainda não foram carregadas não são consideradas "renderizadas". Nem nós de texto que usam fontes da web durante o [período de bloqueio de fontes](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline). Nesses casos, um elemento menor pode ser relatado como o maior elemento de conteúdo, mas assim que o elemento maior terminar sua renderização, ele será relatado por meio de outro objeto `PerformanceEntry`
+
+Além de imagens e fontes de carregamento tardio, uma página pode adicionar novos elementos ao DOM conforme novo conteúdo se torna disponível. Se algum desses novos elementos for maior do que o maior elemento de conteúdo anterior, um novo `PerformanceEntry` também será relatado.
+
+Se um elemento que atualmente é o maior elemento de conteúdo for removido da janela de visualização (ou mesmo removido do DOM), ele permanecerá sendo o maior elemento de conteúdo, a menos que um elemento maior seja renderizado.
+
+{% Aside %} Antes do Chrome 88, os elementos removidos não eram considerados elementos de maior conteúdo e a remoção do candidato atual acionaria uma nova entrada de `largest-contentful-paint` a ser despachada. No entanto, devido a padrões populares de IU, como carrosséis de imagens que frequentemente removiam elementos DOM, a métrica foi atualizada para refletir com mais precisão a experiência do usuário. Veja o [CHANGELOG](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md) para mais detalhes. {% endAside %}
+
+O navegador irá parar de relatar novas entradas assim que o usuário interagir com a página (por meio de um toque, rolagem de tela ou pressionamento de tecla), já que a interação do usuário frequentemente altera o que é visível para o usuário (principalmente com a rolagem).
+
+Para fins de análise, você deve relatar apenas o `PerformanceEntry` despachado mais recentemente para seu serviço de análise.
+
+{% Aside 'caution' %} Como os usuários podem abrir páginas numa aba de fundo, é possível que a renderização com maior conteúdo não aconteça até que o usuário focalize a aba, o que pode ocorrer muito depois do instante em que a página foi carregada pela primeira vez. {% endAside %}
+
+#### Tempo de carregamento vs. tempo de renderização
+
+Por questões de segurança, o timestamp de renderização das imagens não é exposto para imagens de origem cruzada que não possuem o cabeçalho [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin) Em vez disso, apenas seu tempo de carregamento é exposto (uma vez que já é exposto via várias outras APIs da web).
+
+O [exemplo de uso](#measure-lcp-in-javascript) abaixo mostra como lidar com elementos cujo tempo de renderização não está disponível. Mas, quando possível, é sempre recomendável definir o [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin), para que suas métricas sejam mais precisas.
+
+### Como são tratadas as alterações de layout e tamanho do elemento?
+
+Para manter baixo o overhead de calcular e despachar novas entradas de desempenho, alterações no tamanho ou na posição de um elemento não geram novos candidatos a LCP. Apenas o tamanho inicial do elemento e a posição na janela de visualização (viewport) são considerados.
+
+Isto significa que as imagens que são inicialmente renderizadas off-screen e, em seguida, fazem a transição para on-screen podem não ser relatadas. Também significa que os elementos inicialmente renderizados no viewport que, em seguida, são empurrados para baixo, para fora do viewport, ainda relatam seu tamanho inicial dentro do viewport.
+
+### Exemplos
+
+Aqui estão alguns exemplos de quando a Largest Contentful Paint ocorre em alguns sites populares:
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="Linha do tempo da Largest Contentful Paint de cnn.com", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="Linha do tempo da Largest Contentful Paint de techcrunch.com", width="800", height="311" %}
+
+Em ambas as linhas do tempo acima, o maior elemento muda conforme o conteúdo é carregado. No primeiro exemplo, novo conteúdo é adicionado ao DOM e isto muda o elemento que é o maior. No segundo exemplo, o layout muda e o conteúdo que era anteriormente o maior é removido do viewport.
+
+Embora seja comum o conteúdo de carregamento tardio ser maior que o conteúdo que já está na página, esse não é necessariamente o caso. Os próximos dois exemplos mostram a Largest Contentful Paint ocorrendo antes da página carregar totalmente.
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="Linha do tempo da Largest Contentful Paint do instagram.com", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="Linha do tempo da Largest Contentful Paint do google.com", width="800", height="311" %}
+
+No primeiro exemplo, o logotipo do Instagram é carregado relativamente cedo e continua sendo o maior elemento, mesmo quando outro conteúdo é mostrado progressivamente. No exemplo da página de resultados de pesquisa do Google, o maior elemento é um parágrafo de texto que é exibido antes que qualquer uma das imagens ou logotipo termine de carregar. Como todas as imagens individuais são menores do que este parágrafo, ele continua sendo o maior elemento em todo o processo de carregamento.
+
+{% Aside %} No primeiro quadro da linha do tempo do Instagram, você pode perceber que o logotipo da câmera não tem uma caixa verde ao redor. Isto é porque é um elemento `<svg>` e elementos `<svg>` não são considerados candidatos LCP. O primeiro candidato LCP é o texto no segundo quadro. {% endAside %}
+
+## Como medir a LCP
+
+A LCP pode ser medida [em laboratório](/user-centric-performance-metrics/#in-the-lab) ou [em campo](/user-centric-performance-metrics/#in-the-field) e está disponível nas seguintes ferramentas:
+
+### Ferramentas de campo
+
+- [Relatório de Experiência do Usuário Chrome](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Console de Busca (relatório Core Web Vitals)](https://support.google.com/webmasters/answer/9205520)
+- [Biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Ferramentas de laboratório
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Medição da LCP em JavaScript
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+Para medir o LCP em JavaScript, você pode usar a [API Largest Contentful Paint](https://wicg.github.io/largest-contentful-paint/). O exemplo a seguir mostra como criar um [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) que escuta as `largest-contentful-paint` e as registra no console.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Este código mostra como registrar `largest-contentful-paint` no console, mas medir a LCP em JavaScript é mais complicado. Veja detalhes abaixo:
+
+{% endAside %}
+
+No exemplo acima, cada `largest-contentful-paint` registrada representa o candidato LCP atual. Em geral, o `startTime` da última entrada emitida é o valor LCP. No entanto, nem sempre é esse o caso. Nem todas as `largest-contentful-paint` são válidas para medir a LCP.
+
+A seção a seguir lista as diferenças entre o que a API informa e como a métrica é calculada.
+
+#### Diferenças entre a métrica e a API
+
+- A API despachará `largest-contentful-paint` para páginas carregadas numa aba de plano de fundo, mas essas páginas devem ser ignoradas ao calcular o LCP.
+- A API continuará a despachar `largest-contentful-paint` depois que uma página for colocada em segundo plano, mas essas entradas devem ser ignoradas ao calcular a LCP (elementos só podem ser considerados se a página estiver em primeiro plano o tempo todo).
+- A API não relata `largest-contentful-paint` quando a página é restaurada do [cache back/forward](/bfcache/#impact-on-core-web-vitals), mas a LCP deve ser medida nesses casos, pois os usuários as experimentam como visitas de página distintas.
+- A API não considera elementos dentro de iframes, mas para medir corretamente a LCP, você deve considerá-los. Os subquadros podem usar a API para relatar suas `largest-contentful-paint` ao quadro pai para agregação.
+
+Em vez de memorizar todas essas diferenças sutis, os desenvolvedores podem usar a [biblioteca JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals) para medir a LCP, que já lida com essas diferenças (onde for possível):
+
+```js
+import {onLCP} from 'web-vitals';
+
+// Measure and log LCP as soon as it's available.
+onLCP(console.log);
+```
+
+Para um exemplo completo de como medir a LCP em JavaScript, consulte [o código-fonte de `onLCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts).
+
+{% Aside %} Em alguns casos (como iframes de origem cruzada), não é possível medir a LCP em JavaScript. Consulte a seção de [limitações](https://github.com/GoogleChrome/web-vitals#limitations) da biblioteca `web-vitals` para mais detalhes. {% endAside %}
+
+### E se o maior elemento não for o mais importante?
+
+Em alguns casos, o elemento (ou elementos) mais importante na página não é o maior, e os desenvolvedores podem estar mais interessados em medir os tempos de renderização desses outros elementos. Isto é possível usando a [API Element Timing](https://wicg.github.io/element-timing/), da forma detalhada no artigo sobre [métricas personalizadas](/custom-metrics/#element-timing-api).
+
+## Como melhorar a LCP
+
+A LCP é afetada principalmente por quatro fatores:
+
+- Tempos de resposta lentos do servidor
+- JavaScript e CSS que bloqueiam a renderização
+- Tempos de carregamento de recursos
+- Renderização do lado do cliente
+
+Para saber como melhorar a LCP, veja [Otimize a LCP](/optimize-lcp/). Para obter orientações adicionais sobre técnicas de desempenho individual que também podem melhorar a LCP, consulte:
+
+- [Aplique carregamento instantâneo com o padrão PRPL](/apply-instant-loading-with-prpl)
+- [Otimizando o Caminho de Renderização Crítico](/critical-rendering-path/)
+- [Otimize seu CSS](/fast#optimize-your-css)
+- [Otimize suas imagens](/fast#optimize-your-images)
+- [Otimize fontes da web](/fast#optimize-web-fonts)
+- [Otimize seu JavaScript](/fast#optimize-your-javascript) (para sites renderizados pelo cliente)
+
+## Recursos adicionais
+
+- [Lessons learned from performance monitoring in Chrome (Lições aprendidas com o monitoramento de desempenho no Chrome)](https://youtu.be/ctavZT87syI) por [Annie Sullivan](https://anniesullie.com/) em [performance.now()](https://perfnow.nl/) (2019)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/pt/metrics/tbt/index.md b/src/site/content/pt/metrics/tbt/index.md
new file mode 100644
index 00000000000..27568806763
--- /dev/null
+++ b/src/site/content/pt/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Total Blocking Time (TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: Este artigo apresenta a métrica Total Blocking Time (TBT) e explica como medi-la.
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+O Total Blocking Time (TBT), ou tempo total de bloqueio, é uma [métrica de laboratório](/user-centric-performance-metrics/#in-the-lab) importante para medir a [responsividade da carga](/user-centric-performance-metrics/#types-of-metrics) porque ajuda a quantificar o nível de não-interatividade de uma página antes que ela se torne interativa de forma confiável. Um baixo valor de TBT ajuda a garantir que a página seja [utilizável](/user-centric-performance-metrics/#questions).
+
+{% endAside %}
+
+## O que é TBT?
+
+A métrica Total Blocking Time (TBT) mede a quantidade total de tempo entre a [First Contentful Paint (FCP)](/fcp/) e a [Time to Interactive (TTI)](/tti/) em que a thread principal foi bloqueado por tempo suficiente para evitar a responsividade da entrada.
+
+A thread principal é considerada "bloqueada" sempre que houver uma [tarefa longa](/custom-metrics/#long-tasks-api) rodando, ou seja, uma tarefa que é executada na thread principal por mais de 50 milissegundos (ms). Dizemos que a thread principal está "bloqueada" porque o navegador não pode interromper uma tarefa em andamento. Assim, no caso em que um usuário *interage* com a página no meio de uma tarefa longa, o navegador precisa aguardar que a tarefa termine antes que ele possa responder.
+
+Se a tarefa for longa o suficiente (por exemplo, qualquer coisa acima de 50 ms), é provável que o usuário sinta o atraso e perceba a página como lenta ou instável.
+
+O *tempo* de bloqueio de uma determinada tarefa longa é sua duração superior a 50 ms. E o *tempo total de bloqueio* de uma página é a soma dos *tempos de bloqueio* de cada tarefa longa que ocorre entre a FCP e a TTI.
+
+Por exemplo, considere o seguinte diagrama da thread principal do navegador durante o carregamento da página:
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="Uma linha do tempo de tarefas na thread principal", width="800", height="156", linkTo=true %}
+
+A linha do tempo acima possui cinco tarefas, três das quais são Tarefas Longas porque sua duração excede 50 ms. O diagrama a seguir mostra o tempo de bloqueio para cada uma das tarefas longas:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="Um cronograma de tarefas no thread principal mostrando o tempo de bloqueio", width="800", height="156", linkTo=true %}
+
+Portanto, embora o tempo total gasto na execução de tarefas na thread principal seja de 560 ms, apenas 345 ms desse tempo são considerados tempo de bloqueio.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Duração da tarefa</th>
+    <th>Tempo de bloqueio da tarefa</th>
+  </tr>
+  <tr>
+    <td>Tarefa um</td>
+    <td>250 ms</td>
+    <td>200 ms</td>
+  </tr>
+  <tr>
+    <td>Tarefa dois</td>
+    <td>90 ms</td>
+    <td>40 ms</td>
+  </tr>
+  <tr>
+    <td>Tarefa três</td>
+    <td>35 ms</td>
+    <td>0 ms</td>
+  </tr>
+  <tr>
+    <td>Tarefa quatro</td>
+    <td>30 ms</td>
+    <td>0 ms</td>
+  </tr>
+  <tr>
+    <td>Tarefa cinco</td>
+    <td>155 ms</td>
+    <td>105 ms</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>Tempo Total de Bloqueio</strong></td>
+    <td><strong>345 ms</strong></td>
+  </tr>
+</table>
+
+### Como a TBT se relaciona com a TTI?
+
+A TBT é uma ótima métrica complementar para a TTI porque ajuda a quantificar o nível de não-interatividade de uma página antes que ela se torne interativa de forma confiável.
+
+A TTI considera uma página "confiavelmente interativa" se a thread principal estiver livre de tarefas longas por pelo menos cinco segundos. Isto significa que três tarefas de 51 ms espalhadas por 10 segundos podem atrasar a TTI em até uma única tarefa de 10 segundosmas esses dois cenários seriam percebidos de forma muito diferente para um usuário tentando interagir com a página.
+
+No primeiro caso, três tarefas de 51 ms teriam uma TBT de **3 ms**. Enquanto uma tarefa única de 10 segundos de duração teria uma TBT de **9.950 ms**. O maior valor da TBT no segundo caso quantifica a experiência pior.
+
+## Como medir a TBT
+
+TBT é uma métrica que deve ser medida [em laboratório](/user-centric-performance-metrics/#in-the-lab). A melhor maneira de medir a TBT é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a [documentação do Lighthouse sobre TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/) para obter detalhes de uso.
+
+### Ferramentas de laboratório
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Embora seja possível medir o TBT em campo, isto não é recomendado, pois a interação com o usuário pode afetar a TBT da sua página de maneiras que podem levar a muitas variações nos seus relatórios. Para entender a interatividade de uma página em campo, você deve medir a [First Input Delay (FID)](/fid/). {% endAside %}
+
+## O que é uma boa pontuação TBT?
+
+Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma Total Blocking Time de menos de **300 milissegundos** quando testados em **um hardware móvel típico**.
+
+Para obter detalhes sobre como a TBT da sua página afeta sua pontuação de desempenho no Lighthouse, consulte [Como o Lighthouse determina sua pontuação TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)
+
+## Como melhorar a TBT
+
+Para aprender como melhorar a TBT para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer [oportunidades](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específicas que a auditoria sugerir.
+
+Para aprender como melhorar a TBT em geral (para qualquer site), consulte os seguintes guias de desempenho:
+
+- [Reduza o impacto do código de terceiros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Reduza o tempo de execução do JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimize o trabalho da thread principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/pt/metrics/tti/index.md b/src/site/content/pt/metrics/tti/index.md
new file mode 100644
index 00000000000..563c510b6f3
--- /dev/null
+++ b/src/site/content/pt/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Time to Interactive (TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: Este artigo apresenta a métrica Time to Interactive (TTI) e explica como medi-la
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} A Time to Interactive (TTI), ou tempo até interatividade, é uma importante [métrica de laboratório](/user-centric-performance-metrics/#in-the-lab) para medir a [responsividade da carga](/user-centric-performance-metrics/#types-of-metrics). Ela ajuda a identificar casos em que uma página *parece* interativa, mas na verdade não é. Uma TTI rápida ajuda a garantir que a página seja [utilizável](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## O que é TTI?
+
+A métrica TTI mede o tempo desde o início do carregamento da página até o carregamento de seus principais sub-recursos e é capaz de responder de forma confiável e rápida à entrada do usuário.
+
+Para calcular a TTI com base num [rastreamento de desempenho](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) de uma página da web, siga as etapas a seguir:
+
+1. Comece com a [First Contentful Paint (FCP)](/fcp/).
+2. Pesquise para frente no tempo por uma janela silenciosa de pelo menos cinco segundos, onde a *janela silenciosa* é definida como: nenhuma [tarefa longa](/custom-metrics/#long-tasks-api) e não mais do que duas solicitações GET de rede durante a carga.
+3. Pesquise para trás pela última tarefa longa antes da janela silenciosa, parando na FCP se nenhuma tarefa longa for encontrada.
+4. A TTI é o tempo de término da última tarefa longa antes da janela silenciosa (ou o mesmo valor que a FCP se nenhuma tarefa longa for encontrada).
+
+O diagrama a seguir deve ajudar a visualizar as etapas acima:
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="Uma linha do tempo de carregamento da página mostrando como calcular a TTI", width="800", height="473", linkTo=true %}
+
+Historicamente, os desenvolvedores otimizavam as páginas para tempos de renderização rápidos, muitas vezes às custas da TTI.
+
+Técnicas como a renderização lado-servidor (SSR) podem levar a cenários em que uma página *parece* interativa (ou seja, links e botões são visíveis na tela), mas não é *de fato* interativa porque a thread principal está bloqueado ou porque o código JavaScript que controla esses elementos ainda não foi carregado.
+
+Quando os usuários tentam interagir com uma página que parece interativa, mas na verdade não é, eles provavelmente responderão de uma destas duas maneiras:
+
+- Na melhor das hipóteses, ficarão incomodados porque a página demora para responder.
+- Na pior das hipóteses, eles presumirão que a página está quebrada e provavelmente irão embora. Eles podem até perder a confiança no valor da sua marca.
+
+Para evitar esse problema, faça todos os esforços para minimizar a diferença entre a FCP e a TTI. E nos casos em que exista uma diferença perceptível, deixe claro por meio de indicadores visuais que os componentes de sua página ainda não são interativos.
+
+## Como medir TTI
+
+A TTI é uma métrica que é idealmente medida [em laboratório](/user-centric-performance-metrics/#in-the-lab). A melhor maneira de medir a TTI é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a [documentação do Lighthouse sobre TTI](/tti/) para obter detalhes de uso.
+
+### Ferramentas de laboratório
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Embora seja possível medir a TTI em campo, isto não é recomendado, pois a interação com o usuário pode afetar a TTI de sua página de maneiras que podem levar a muitas variações em seus relatórios. Para entender a interatividade de uma página em campo, você deve medir a [First Input Delay (FID)](/fid/). {% endAside %}
+
+## O que é uma boa pontuação de TTI?
+
+Para garantir uma boa experiência ao usuário, os sites devem se esforçar para ter um tempo de interação de menos de **5 segundos** quando testados num **hardware móvel típico**.
+
+Para obter detalhes sobre como a TTI da sua página afeta sua pontuação de desempenho no Lighthouse, consulte [Como o Lighthouse determina sua pontuação TTI](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score)
+
+## Como melhorar a TTI
+
+Para aprender como melhorar a TTI para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer [oportunidades](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) específicas que a auditoria sugerir.
+
+Para saber como melhorar a TTI em geral (para qualquer site), consulte os seguintes guias de desempenho:
+
+- [Minifique o JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [Pré-conecte a origens necessárias](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Pré-carregue solicitações importantes](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Reduza o impacto do código de terceiros](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Minimize a profundidade de solicitações críticas](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Reduza o tempo de execução do JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Minimize o trabalho da thread principal](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/pt/metrics/user-centric-performance-metrics/index.md b/src/site/content/pt/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..38f9487a3f8
--- /dev/null
+++ b/src/site/content/pt/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: Métricas de desempenho centradas no usuário
+authors:
+  - philipwalton
+date: 2019-11-08
+description: As métricas de desempenho centradas no usuário são uma ferramenta crítica para a compreensão e melhoria da experiência do seu site de uma forma que beneficie usuários reais.
+tags:
+  - performance
+  - metrics
+---
+
+Todos nós já ouvimos como o desempenho é importante. Mas quando falamos sobre desempenhoe sobre como tornar os sites "rápidos"o que queremos dizer exatamente?
+
+A verdade é que o desempenho é relativo:
+
+- Um site pode ser rápido para um usuário (em uma rede rápida com um dispositivo poderoso), mas lento para outro usuário (em uma rede lenta com um dispositivo low-end).
+- Dois sites podem terminar de carregar exatamente na mesma quantidade de tempo, mas um pode *parecer* carregar mais rápido (se carregar o conteúdo progressivamente, em vez de esperar até o final para exibir qualquer coisa).
+- Um site pode *parecer* carregar rapidamente, mas depois responder lentamente (ou não responder) à interação do usuário.
+
+Portanto, ao falar sobre desempenho, é importante ser preciso e se referir ao desempenho em termos de critérios objetivos que possam ser medidos quantitativamente. Esses critérios são conhecidos como *métricas*.
+
+Mas só porque uma métrica é baseada em critérios objetivos e pode ser medida quantitativamente, não significa necessariamente que essas medidas sejam úteis.
+
+## Definindo métricas
+
+Historicamente, o desempenho da web tem sido medido com o evento <code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code>. No entanto, embora o <code>load</code> seja um momento bem definido no ciclo de vida de uma página, esse momento não corresponde necessariamente a algo com que o usuário se importe.
+
+Por exemplo, um servidor pode responder com uma página mínima que "carrega" imediatamente, mas adia a busca de conteúdo e a exibição de qualquer coisa na página até vários segundos após o evento `load`. Embora tal página possa tecnicamente ter um tempo de carregamento rápido, esse tempo não corresponderia à forma como o usuário realmente percebe o carregamento da página.
+
+Nos últimos anos, membros da equipe do Chromeem colaboração com o [W3C Web Performance Working Group](https://www.w3.org/webperf/)têm trabalhado para padronizar um conjunto de novas APIs e métricas que medem com mais precisão como os usuários experimentam o desempenho de uma página web.
+
+Para ajudar a garantir que as métricas sejam relevantes para os usuários, nós as organizamos em torno de algumas questões-chave:
+
+<table id="questions">
+  <tr>
+    <td><strong>Isto está acontecendo?</strong></td>
+    <td>A navegação começou com sucesso? O servidor respondeu?</td>
+  </tr>
+  <tr>
+    <td><strong>É útil?</strong></td>
+    <td>O conteúdo renderizado foi suficiente para que os usuários possam interagir com ele?</td>
+  </tr>
+  <tr>
+    <td><strong>É utilizável?</strong></td>
+    <td>Os usuários podem interagir com a página ou ela está ocupada?</td>
+  </tr>
+  <tr>
+    <td><strong>É agradável?</strong></td>
+    <td>As interações são suaves e naturais, livres de atrasos e interrupções?</td>
+  </tr>
+</table>
+
+## Como as métricas são medidas
+
+As métricas de desempenho geralmente são medidas de duas maneiras:
+
+- **No laboratório:** usando ferramentas para simular o carregamento de uma página em um ambiente consistente e controlado
+- **No campo** : em usuários reais carregando e interagindo com uma página no mundo real
+
+Nenhuma dessas opções é necessariamente melhor ou pior do que a outrana verdade, geralmente o ideal é usar as duas para garantir um bom desempenho.
+
+### Em laboratório
+
+O desempenho do teste em laboratório é essencial ao desenvolver novos recursos. Antes dos recursos serem lançados em produção, é impossível medir suas características de desempenho em usuários reais, portanto, testá-los no laboratório antes do lançamento do recurso é a melhor maneira de evitar regressões de desempenho.
+
+### Em campo
+
+Por outro lado, embora o teste em laboratório seja um proxy razoável para o desempenho, não é necessariamente o reflexo de como todos os usuários experimentam seu site no mundo real.
+
+O desempenho de um site pode variar drasticamente com base nos recursos do dispositivo do usuário e nas condições da rede. Também pode variar com base em se (ou como) um usuário está interagindo com a página.
+
+Além disso, os carregamentos de página podem não ser determinísticos. Por exemplo, sites que carregam conteúdo ou anúncios personalizados podem apresentar características de desempenho muito diferentes de usuário para usuário. Um teste de laboratório não irá capturar essas diferenças.
+
+A única maneira de realmente conhecer o desempenho do seu site para os usuários é medir seu desempenho à medida que esses usuários o carregam e interagem com ele. Este tipo de medição é frequentemente chamada de [Real User Monitoring](https://en.wikipedia.org/wiki/Real_user_monitoring) (monitoramento do usuário real) ou RUM.
+
+## Tipos de métricas
+
+Existem vários outros tipos de métricas que são relevantes para a forma como os usuários percebem o desempenho.
+
+- **Velocidade de carregamento percebida:** a rapidez com que uma página pode carregar e renderizar todos os seus elementos visuais na tela.
+- **Responsividade de carga:** a rapidez com que uma página pode carregar e executar qualquer código JavaScript necessário para que os componentes respondam rapidamente à interação do usuário
+- **Responsividade do tempo de execução:** após o carregamento da página, com que rapidez a página pode responder à interação do usuário.
+- **Estabilidade visual:** os elementos na página mudam de maneiras que os usuários não esperam e potencialmente interferem em suas interações?
+- **Suavidade:** as transições e animações são renderizadas numa taxa de quadros consistente e fluem com fluidez de um estado para o outro?
+
+Dados todos os tipos de métricas de desempenho acima, esperamos ter ficado claro que nenhuma métrica única é suficiente para capturar todas as características de desempenho de uma página.
+
+## Métricas importantes para medir
+
+- **[First contentful paint (FCP)](/fcp/)**, ou primeira renderização de conteúdo, mede o tempo desde o início do carregamento da página até o momento em que qualquer parte do conteúdo da página é renderizada na tela. *([laboratório](#in-the-lab), [campo](#in-the-field))*
+- **[Largest contentful paint (LCP)](/lcp/)**, ou maior renderização de conteúdo mede o tempo desde o início do carregamento da página até o momento em que o maior bloco de texto ou elemento de imagem é renderizado na tela. *([laboratório](#in-the-lab), [campo](#in-the-field))*
+- **[First input delay (FID)](/fid/)**, ou atraso na primeira entrada, mede o tempo desde quando um usuário interage pela primeira vez com seu site (ou seja, quando ele clica num link, toca num botão ou usa um controle personalizado em JavaScript) até o momento em que o navegador seja capaz de responder a essa interação. *([campo](#in-the-field))*
+- **[Time to Interactive (TTI)](/tti/)**, ou tempo até interatividade, mede o tempo desde o início do carregamento da página até o momento em que é renderizada visualmente, seus scripts iniciais (se houver) tenham sido totalmente carregados e que seja capaz de responder de forma confiável e rápida à entrada do usuário. *([laboratório](#in-the-lab))*
+- **[Total blocking time (TBT)](/tbt/)**, ou tempo total de bloqueio mede a quantidade total de tempo entre a FCP e a TTI onde a thread principal foi bloqueada por tempo suficiente para evitar a responsividade de entrada. *([laboratório](#in-the-lab))*
+- **[Cumulative layout shift (CLS)](/cls/)**, ou mudança de layout cumulativa, mede a pontuação cumulativa de todas as mudanças de layout inesperadas que ocorrem entre quando a página começa a ser carregada e quando seu [estado de ciclo de vida](https://developer.chrome.com/blog/page-lifecycle-api/) muda para "oculta". *([laboratório](#in-the-lab), [campo](#in-the-field))*
+
+Embora esta lista inclua métricas que medem muitos dos vários aspectos de desempenho relevantes para os usuários, ela não inclui tudo (por exemplo, a responsividade e suavidade durante a execução não são cobertas atualmente).
+
+Em alguns casos, novas métricas serão introduzidas para cobrir áreas ausentes, mas em outros casos, as melhores métricas são aquelas especificamente adaptadas ao seu site.
+
+## Métricas personalizadas
+
+As métricas de desempenho listadas acima são boas para obter uma compreensão geral das características de desempenho da maioria dos sites na web. Elas também são boas por terem um conjunto comum de métricas que os sites podem usar para comparar seu desempenho com o de seus concorrentes.
+
+No entanto, pode haver momentos em que um site específico é único de alguma maneira que requer métricas adicionais para capturar uma medida do seu desempenho total. Por exemplo, a métrica LCP se destina a medir quando o conteúdo principal de uma página terminou de carregar, mas pode haver casos em que o maior elemento não faz parte do conteúdo principal da página e, portanto, a LCP pode não ser relevante.
+
+Para resolver esses casos, o Web Performance Working Group também padronizou APIs de nível inferior que podem ser úteis para implementar suas próprias métricas personalizadas:
+
+- [API User Timing](https://w3c.github.io/user-timing/) (tempo do usuário)
+- [API Long Tasks](https://w3c.github.io/longtasks/) (tarefa longas)
+- [API Element Timing](https://wicg.github.io/element-timing/) (tempo de elementos)
+- [API Navigation Timing](https://w3c.github.io/navigation-timing/) (tempo de navegação)
+- [API Resource Timing](https://w3c.github.io/resource-timing/) (tempo de recursos)
+- [Tempo do servidor](https://w3c.github.io/server-timing/)
+
+Consulte o guia sobre [métricas personalizadas](/custom-metrics/) para aprender como usar essas APIs para medir as características de desempenho específicas do seu site.
diff --git a/src/site/content/pt/mini-apps/index.md b/src/site/content/pt/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/pt/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/pt/offline.md b/src/site/content/pt/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/pt/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/pt/payments/android-payment-apps-developers-guide/index.md b/src/site/content/pt/payments/android-payment-apps-developers-guide/index.md
new file mode 100644
index 00000000000..4a5efb63f92
--- /dev/null
+++ b/src/site/content/pt/payments/android-payment-apps-developers-guide/index.md
@@ -0,0 +1,413 @@
+---
+layout: post
+title: Guia para desenvolvedores de aplicativos de pagamento Android
+subhead: |2-
+
+  Aprenda como adaptar seu aplicativo de pagamento Android para funcionar com o Web Payments e oferecer uma melhor experiência de usuário aos clientes.
+authors:
+  - yaraki
+  - agektmr
+date: 2020-05-25
+description: |2-
+
+  Aprenda como adaptar seu aplicativo de pagamento Android para funcionar com o Web Payments e oferecer uma melhor experiência de usuário aos clientes.
+tags:
+  - blog
+  - payments
+feedback:
+  - api
+---
+
+A [API Payment Request](https://www.w3.org/TR/payment-request/) traz para a web uma interface baseada em navegador embutida que permite aos usuários inserir as informações de pagamento necessárias de um jeito mais fácil do que nunca. A API também pode invocar aplicativos de pagamento específicos da plataforma.
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Fluxo de checkout com o aplicativo Google Pay específico da plataforma que usa Web Payments.</figcaption></figure>
+
+Comparado ao uso apenas de Android Intents, o Web Payments permite uma melhor integração com o navegador, segurança e experiência do usuário:
+
+- O aplicativo de pagamento é lançado como modal, no contexto do site do comerciante.
+- A implementação é complementar ao seu aplicativo de pagamento existente, permitindo que você tire proveito de sua base de usuários.
+- A assinatura do aplicativo de pagamento é verificada para evitar o [sideload](https://en.wikipedia.org/wiki/Sideloading).
+- Os aplicativos de pagamento podem oferecer suporte a vários métodos de pagamento.
+- É possível integrar qualquer método de pagamento, como criptomoeda, transferências bancárias e muito mais. Os aplicativos de pagamento em dispositivos Android podem até mesmo integrar métodos que requerem acesso ao chip de hardware do dispositivo.
+
+{% Aside %} Para entender como os comerciantes se integram aos aplicativos de pagamento, consulte [Vida de uma transação de pagamento](/life-of-a-payment-transaction/). {% endAside%}
+
+São quatro etapas para implementar o Web Payments em um aplicativo de pagamento Android:
+
+1. Deixe os comerciantes descobrirem seu aplicativo de pagamento.
+2. Informe um comerciante se um cliente possui um instrumento inscrito (como um cartão de crédito) que está pronto para pagar.
+3. Permita que um cliente faça o pagamento.
+4. Verifique o certificado de assinatura do chamador.
+
+Para ver o Web Payments em ação, confira a demonstração do [android-web-payment](https://github.com/GoogleChromeLabs/android-web-payment/).
+
+## Etapa 1: Deixe que os comerciantes descubram seu aplicativo de pagamento
+
+Para que um comerciante use seu aplicativo de pagamento, ele precisa usar a [API Payment Request](https://developer.mozilla.org/docs/Web/API/Payment_Request_API) e especificar a forma de pagamento que você aceita usando o [identificador da forma de pagamento](https://www.w3.org/TR/payment-method-id/).
+
+Se você tiver um identificador de método de pagamento exclusivo para seu aplicativo de pagamento, poderá configurar seu próprio [manifesto de método de pagamento](https://w3c.github.io/payment-method-manifest/) para que os navegadores possam descobrir seu aplicativo.
+
+{% Aside %} Para saber como funciona o processo de descoberta em detalhes e como configurar uma nova forma de pagamento, consulte [Configurando uma forma de pagamento](/setting-up-a-payment-method). {% endAside %}
+
+## Etapa 2: Informe um comerciante se um cliente possui um instrumento inscrito que está pronto para pagar
+
+O comerciante pode chamar `hasEnrolledInstrument()` para [perguntar se o cliente pode fazer um pagamento](/life-of-a-payment-transaction#ready-to-pay). Você pode implementar `IS_READY_TO_PAY` como um serviço Android para responder a esta consulta.
+
+### `AndroidManifest.xml`
+
+Declare seu serviço com um filtro de intent com a ação `org.chromium.intent.action.IS_READY_TO_PAY` .
+
+```xml
+<service
+  android:name=".SampleIsReadyToPayService"
+  android:exported="true">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" />
+  </intent-filter>
+</service>
+```
+
+O `IS_READY_TO_PAY` é opcional. Se não houver um gerenciador de intent no aplicativo de pagamento, o navegador da Web pressupõe que o aplicativo sempre pode fazer pagamentos.
+
+### AIDL
+
+A API para o `IS_READY_TO_PAY` é definida em AIDL. Crie dois arquivos AIDL com o seguinte conteúdo:
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayServiceCallback.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+interface IsReadyToPayServiceCallback {
+    oneway void handleIsReadyToPay(boolean isReadyToPay);
+}
+```
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayService.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+import org.chromium.IsReadyToPayServiceCallback;
+
+interface IsReadyToPayService {
+    oneway void isReadyToPay(IsReadyToPayServiceCallback callback);
+}
+```
+
+### Implementando `IsReadyToPayService`
+
+A implementação mais simples de `IsReadyToPayService` é mostrada no exemplo a seguir:
+
+```kotlin
+class SampleIsReadyToPayService : Service() {
+  private val binder = object : IsReadyToPayService.Stub() {
+    override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+      callback?.handleIsReadyToPay(true)
+    }
+  }
+
+  override fun onBind(intent: Intent?): IBinder? {
+    return binder
+  }
+}
+```
+
+### Parâmetros
+
+Passe os seguintes parâmetros para `onBind` como extras de Intent:
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+
+```kotlin
+override fun onBind(intent: Intent?): IBinder? {
+  val extras: Bundle? = intent?.extras
+  // …
+}
+```
+
+#### `methodNames`
+
+Os nomes dos métodos que estão sendo consultados. Os elementos são as chaves no `methodData` e indicam os métodos que o aplicativo de pagamento suporta.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+Um mapeamento de cada entrada de `methodNames` ao [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying).
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### `topLevelOrigin`
+
+A origem do comerciante sem o esquema (a origem sem esquema do contexto de navegação de nível superior). Por exemplo, `https://mystore.com/checkout` será passado como `mystore.com`.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+A cadeia de certificados do comerciante (a cadeia de certificados do contexto de navegação de nível superior). Nulo para localhost e arquivo em disco, que são contextos seguros sem certificados SSL. A cadeia de certificação é necessária porque um aplicativo de pagamento pode ter diferentes requisitos de confiança para sites.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+```
+
+Cada `Parcelable` é um `Bundle` com uma `"certificate"` e um valor de matriz de bytes.
+
+```kotlin
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+A origem sem esquema do contexto de navegação do iframe que invocou o `new PaymentRequest(methodData, details, options)` em JavaScript. Se o construtor foi chamado a partir do contexto de nível superior, o valor desse parâmetro é igual ao valor do parâmetro `topLevelOrigin`
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+### Resposta
+
+O serviço pode enviar sua resposta por meio do método `handleIsReadyToPay(Boolean)`
+
+```kotlin
+callback?.handleIsReadyToPay(true)
+```
+
+### Permissão
+
+Você pode usar `Binder.getCallingUid()` para verificar quem é o chamador. Observe que você deve fazer isso no método `isReadyToPay`, não no método `onBind`
+
+```kotlin
+override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+  try {
+    val callingPackage = packageManager.getNameForUid(Binder.getCallingUid())
+    // …
+```
+
+Consulte [Verificar o certificado de assinatura do chamador](#heading=h.czr8ye23zg2e) para saber como verificar se o pacote de chamada tem a assinatura correta.
+
+## Etapa 3: Permita que um cliente faça o pagamento
+
+O comerciante chama `show()` para [iniciar o aplicativo de pagamento](/life-of-a-payment-transaction#launch) para que o cliente possa fazer um pagamento. Invoca-se o aplicativo de pagamento por meio de uma intenção Android `PAY` com informações de transação nos parâmetros de intenção.
+
+O aplicativo de pagamento responde com `methodName` e `details`, que são específicos do aplicativo de pagamento e invisíveis ao navegador. O navegador converte a string `details` em um objeto JavaScript para o comerciante por meio da desserialização JSON, mas não impõe nenhuma validade além disso. O navegador não modifica os `details`; o valor desse parâmetro passa diretamente para o comerciante.
+
+### `AndroidManifest.xml`
+
+A atividade com o filtro de intenção `PAY` deve ter uma tag `<meta-data>` [que identifica o identificador da forma de pagamento padrão do aplicativo](/setting-up-a-payment-method).
+
+Para oferecer suporte a vários métodos de pagamento, adicione uma `<meta-data>` com um recurso `<string-array>`.
+
+```xml
+<activity
+  android:name=".PaymentActivity"
+  android:theme="@style/Theme.SamplePay.Dialog">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.PAY" />
+  </intent-filter>
+
+  <meta-data
+    android:name="org.chromium.default_payment_method_name"
+    android:value="https://bobpay.xyz/pay" />
+  <meta-data
+    android:name="org.chromium.payment_method_names"
+    android:resource="@array/method_names" />
+</activity>
+```
+
+O `resource` deve ser uma lista de strings, cada uma das quais deve ser um URL válido e absoluto com um esquema HTTPS, conforme aqui mostrado.
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string-array name="method_names">
+        <item>https://alicepay.com/put/optional/path/here</item>
+        <item>https://charliepay.com/put/optional/path/here</item>
+    </string-array>
+</resources>
+```
+
+### Parâmetros
+
+Os seguintes parâmetros são passados para a atividade como extras de Intent:
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+- `total`
+- `modifiers`
+- `paymentRequestId`
+
+```kotlin
+val extras: Bundle? = intent?.extras
+```
+
+#### methodNames
+
+Os nomes dos métodos usados. Os elementos são as chaves no dicionário `methodData` Esses são os métodos que o aplicativo de pagamento suporta.
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+Um mapeamento a partir de cada um dos `methodNames` para o [`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying) .
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### merchantName
+
+O conteúdo da `<title>` da página de checkout do comerciante (o contexto de navegação de nível superior do navegador).
+
+```kotlin
+val merchantName: String? = extras.getString("merchantName")
+```
+
+#### `topLevelOrigin`
+
+A origem do comerciante sem o esquema (A origem sem esquema do contexto de navegação de nível superior). Por exemplo, `https://mystore.com/checkout` é passado como `mystore.com`.
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+A cadeia de certificados do comerciante (a cadeia de certificados do contexto de navegação de nível superior). Nulo para localhost e arquivo em disco, que são contextos seguros sem certificados SSL. Cada `Parcelable` é um Bundle com uma `certificate` e um valor de matriz de bytes.
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+A origem sem esquema do contexto de navegação do iframe que invocou o `new PaymentRequest(methodData, details, options)` em JavaScript. Se o construtor foi chamado a partir do contexto de nível superior, o valor desse parâmetro é igual ao valor do parâmetro `topLevelOrigin`.
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+#### `total`
+
+A string JSON que representa o valor total da transação.
+
+```kotlin
+val total: String? = extras.getString("total")
+```
+
+Aqui está um exemplo de conteúdo da string:
+
+```kotlin
+{"currency":"USD","value":"25.00"}
+```
+
+#### `modifiers`
+
+A saída de `JSON.stringify(details.modifiers)` , em que `details.modifiers` contém apenas `supportedMethods` e `total`.
+
+#### `paymentRequestId`
+
+O `PaymentRequest.id` que os aplicativos de "pagamento push" devem associar ao estado da transação. Os sites de comerciantes usarão este campo para consultar os aplicativos de "pagamento automático" para o estado da transação fora da banda.
+
+```kotlin
+val paymentRequestId: String? = extras.getString("paymentRequestId")
+```
+
+### Resposta
+
+A atividade pode enviar sua resposta de volta por `setResult` com `RESULT_OK`.
+
+```kotlin
+setResult(Activity.RESULT_OK, Intent().apply {
+  putExtra("methodName", "https://bobpay.xyz/pay")
+  putExtra("details", "{\"token\": \"put-some-data-here\"}")
+})
+finish()
+```
+
+Você deve especificar dois parâmetros como extras de Intent:
+
+- `methodName`: o nome do método usado.
+- `details`: string JSON contendo as informações necessárias para o comerciante concluir a transação. Se o sucesso for `true`, os `details` devem ser construídos de forma que `JSON.parse(details)` seja bem-sucedido.
+
+Você pode passar `RESULT_CANCELED` se a transação não foi concluída no aplicativo de pagamento, por exemplo, se o usuário não conseguiu digitar o código PIN correto para sua conta no aplicativo de pagamento. O navegador pode permitir que o usuário escolha um aplicativo de pagamento diferente.
+
+```kotlin
+setResult(RESULT_CANCELED)
+finish()
+```
+
+Se o resultado da atividade de uma resposta a pagamento recebida do aplicativo de pagamento for definida como `RESULT_OK`, então o Chrome irá verificar se há `methodName` e `details` não vazios em seus extras. Se a validação falhar, o Chrome retornará uma promessa rejeitada de `request.show()` com uma das seguintes mensagens de erro para o desenvolvedor:
+
+```js
+'Payment app returned invalid response. Missing field "details".'
+'Payment app returned invalid response. Missing field "methodName".'
+```
+
+### Permissão
+
+A atividade pode verificar o chamador com seu método `getCallingPackage()`
+
+```kotlin
+val caller: String? = callingPackage
+```
+
+A etapa final é verificar o certificado de assinatura do chamador para confirmar se o pacote de chamada tem a assinatura correta.
+
+## Etapa 4: verificar o certificado de assinatura do autor da chamada
+
+Você pode verificar o nome do pacote do chamador com `Binder.getCallingUid()` em `IS_READY_TO_PAY` e com `Activity.getCallingPackage()` em `PAY`. Para realmente verificar se o chamador é o navegador que você tem em mente, verifique o certificado de assinatura e certifique-se de que corresponde ao valor correto.
+
+Se você tem como objetivo a API de nível 28 e superior e está se integrando a um navegador que tem um único certificado de assinatura, você pode usar `PackageManager.hasSigningCertificate()` .
+
+```kotlin
+val packageName: String = … // O nome do pacote do chamador
+val certificate: ByteArray = … // O certificado de assinatura correto.
+val verified = packageManager.hasSigningCertificate(
+  callingPackage,
+  certificate,
+  PackageManager.CERT_INPUT_SHA256
+)
+```
+
+`PackageManager.hasSigningCertificate()` é o preferido para navegadores de certificado único, porque lida corretamente com a rotação de certificados. (O Chrome tem um único certificado de assinatura.) Aplicativos que possuem vários certificados de assinatura não podem girá-los.
+
+Se você precisar oferecer suporte a níveis de API mais antigos 27 e abaixo, ou se precisar lidar com navegadores com vários certificados de assinatura, você pode usar `PackageManager.GET_SIGNATURES`.
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificates: Set<ByteArray> = … // The correct set of signing certificates
+
+val packageInfo = getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
+val sha256 = MessageDigest.getInstance("SHA-256")
+val signatures = packageInfo.signatures.map { sha256.digest(it.toByteArray()) }
+val verified = signatures.size == certificates.size &&
+    signatures.all { s -> certificates.any { it.contentEquals(s) } }
+```
diff --git a/src/site/content/pt/payments/index.md b/src/site/content/pt/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/pt/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/pt/progressive-web-apps/app-like-pwas/index.md b/src/site/content/pt/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..3e537231c5e
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,407 @@
+---
+layout: post
+title: Faça seu PWA parecer mais um aplicativo
+subhead: Faça com que seu Progressive Web App não pareça um site, mas sim um aplicativo "real"
+authors:
+  - thomassteiner
+description: |2
+
+  Aprenda como fazer seu Progressive Web App parecer um aplicativo "real" compreendendo
+
+  como implementar padrões de aplicativos específicos da plataforma com tecnologias da web.
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+Quando você joga o buzzword bingo Progressive Web App, é uma aposta segura marcar como "PWAs são apenas sites". A documentação do PWA da Microsoft [concorda](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), [dizemos isso](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites) neste mesmo site, e até mesmo os indicados pelo PWA, Frances Berriman e Alex Russell, também assim o [escrevem.](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites) Sim, os PWAs são apenas sites, mas também são muito mais do que isso. Se feitos da maneira certa, um PWA não se parecerá com um site, mas como aplicativo "real". Então, o que significa parecer um aplicativo de verdade?
+
+Para responder a essa pergunta, deixe-me usar o [aplicativo Apple Podcasts](https://support.apple.com/HT201859) como exemplo. Ele está disponível no macOS para desktop e no iOS (e iPadOS, respectivamente) no celular. Embora o Podcasts seja um aplicativo de mídia, as ideias centrais que ilustro com sua ajuda se aplicam também a outras categorias de aplicativos.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="Um iPhone e um MacBook lado a lado, ambos executando o aplicativo Podcasts.", width="800", height="617" %} <figcaption>Apple Podcasts no iPhone e no macOS (<a href="https://support.apple.com/HT201859">Fonte</a>).</figcaption></figure>
+
+{% Aside 'caution' %} Cada recurso de aplicativo iOS/Android/computador listado abaixo tem um componente <br> **Como fazer isso na web** que você pode abrir para obter mais detalhes. Observe que nem todos os navegadores nos vários sistemas operacionais oferecem suporte a todas as APIs ou funcionalidades listadas. Certifique-se de revisar cuidadosamente as notas de compatibilidade nos artigos associados.{% endAside %}
+
+## Capaz de funcionar offline
+
+Se você der um passo para trás e pensar em alguns dos aplicativos específicos da plataforma que você pode ter em seu telefone celular ou computador desktop, uma coisa se destaca: você nunca ganha nada. No aplicativo Podcasts, mesmo se eu estiver offline, sempre há algo. Quando não há conexão de rede, o aplicativo ainda abre naturalmente. A seção **Top Charts** não mostra nenhum conteúdo, mas em vez disso mostra alternativamente uma mensagem **Não é possível conectar agora** emparelhada com um botão **Tentar novamente.** Pode não ser a experiência mais acolhedora, mas a menos recebo algo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="O aplicativo Podcasts mostrando um 'Não é possível conectar agora.' mensagem informativa quando nenhuma conexão de rede estiver disponível.", width="800", height="440" %} <figcaption>Aplicativo Podcasts sem conexão de rede.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} O aplicativo Podcasts segue o chamado modelo de shell de aplicativo. Todo o conteúdo estático necessário para mostrar o aplicativo principal é armazenado em cache localmente, incluindo imagens decorativas como os ícones de menu à esquerda e os ícones da interface do usuário do player principal. O conteúdo dinâmico, como os dados do <b>Top Charts</b> só é carregado sob demanda, com conteúdo alternativo em cache local disponível caso o carregamento falhe. Leia o artigo <a href="https://developers.google.com/web/fundamentals/architecture/app-shell">The App Shell Model</a> para aprender como aplicar este modelo de arquitetura ao seu aplicativo da web. {% endDetails %}
+
+## Conteúdo offline disponível e reproduzível em mídia
+
+Quando offline, através da gaveta do lado esquerdo, eu ainda consigo navegar até a seção **Baixados** e curtir episódios de podcast transferidos que estão prontos para ser tocados e exibidos com todos os metadados como capas e descrições.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="Aplicativo Podcasts com um episódio baixado de um podcast em execução.", width="800", height="440" %} <figcaption>Os episódios de podcast baixados podem ser reproduzidos mesmo sem rede.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} O conteúdo de mídia baixado anteriormente pode ser servido a partir do cache, por exemplo, usando a receita <a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Servir áudio e vídeo em cache</a> da biblioteca <a href="https://developer.chrome.com/docs/workbox/">Workbox.</a> Outro conteúdo sempre pode ser armazenado no cache ou em IndexedDB. Leia o artigo <a href="/storage-for-the-web/">Armazenamento para a web</a> para saber todos os detalhes e para saber quando usar qual tecnologia de armazenamento. Se você tiver dados que devem ser armazenados de forma persistente sem o risco de serem eliminados quando a quantidade de memória disponível ficar baixa, você pode usar a <a href="/persistent-storage/">API de armazenamento persistente</a>. {% endDetails %}
+
+## Download proativo em segundo plano
+
+Quando estiver on-line novamente, posso pesquisar conteúdo com uma consulta como `http 203` , e quando decidir assinar o resultado da pesquisa, o [podcast HTTP 203](/podcasts/), o último episódio da série é baixado imediatamente, sem mais perguntas.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="O aplicativo Podcasts baixando o último episódio de um podcast imediatamente após a assinatura.", width="800", height="658" %}<br><figcaption> Depois de assinar um podcast, o último episódio é baixado imediatamente.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Baixar um episódio de podcast é uma operação que pode levar mais tempo. A <a href="https://developers.google.com/web/updates/2018/12/background-fetch">API Background Fetch</a> permite delegar downloads ao navegador, que cuida deles em segundo plano. No Android, o navegador, por sua vez, pode até mesmo delegar esses downloads ao sistema operacional para que o navegador não precise estar em execução contínua. Assim que o download for concluído, o service worker do seu aplicativo é ativado e você pode decidir o que fazer com a resposta. {% endDetails %}
+
+## Compartilhando e interagindo com outros aplicativos
+
+O aplicativo Podcasts se integra naturalmente a outros aplicativos. Por exemplo, quando clico com o botão direito em um episódio de que gosto, posso compartilhá-lo com outros aplicativos do meu dispositivo, como o aplicativo Mensagens. Ele também se integra naturalmente à área de transferência do sistema. Posso clicar com o botão direito em qualquer episódio e copiar um link nela.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="O menu de contexto do aplicativo Podcasts invocado em um episódio de podcast com a opção 'Compartilhar Episódio &gt; Mensagens' selecionada.", width="800", height="392" %} <figcaption>Compartilhando um episódio de podcast com o aplicativo Mensagens.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/web-share/">API Web Share</a> e a <a href="/web-share-target/">API Web Share Target</a> permitem que seu aplicativo compartilhe e receba textos, arquivos e links de e para outros aplicativos no dispositivo. Embora ainda não seja possível para um aplicativo da web adicionar itens de menu ao menu de atalho embutido do sistema operacional, há muitas outras maneiras de se conectar a outros aplicativos no dispositivo. Com a <a href="/image-support-for-async-clipboard/">API Async Clipboard</a> , você pode ler e gravar texto e dados de imagem (imagens PNG) programaticamente de e para a área de transferência do sistema. No Android, você pode usar a <a href="/contact-picker/">API Contact Picker</a> para selecionar entradas do gerenciador de contatos do dispositivo. Se você oferece um aplicativo específico da plataforma e um PWA, pode usar a <a href="/get-installed-related-apps/">API Get Installed Related Apps</a> para verificar se o aplicativo específico da plataforma está instalado; nesse caso, você não precisa encorajar o usuário a instalar o PWA ou aceitar notificações push da web. {% endDetails %}
+
+## Atualização do app em segundo plano
+
+Nas configurações do aplicativo Podcasts, posso configurar o aplicativo para baixar novos episódios automaticamente. Assim, não preciso nem pensar nisso, sempre haverá conteúdo atualizado. É mágica.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="O menu de configurações do aplicativo Podcasts na seção 'Geral' onde a opção 'Atualizar Podcasts' está definida como 'A cada hora'.", width="800", height="465" %} <figcaption>Podcasts configurado para verificar novos episódios de podcast a cada hora.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/periodic-background-sync/">API Periodic Background Sync</a> permite que seu aplicativo atualize seu conteúdo regularmente em segundo plano, sem a necessidade de estar em execução. Isso significa que o novo conteúdo está disponível de forma proativa, para que seus usuários possam começar a mergulhar nele imediatamente, quando quiserem. {% endDetails %}
+
+## Estado sincronizado na nuvem
+
+Ao mesmo tempo, minhas assinaturas são sincronizadas em todos os dispositivos que possuo. Em um mundo perfeito, não preciso me preocupar em manter sincronizadas as assinaturas de podcast manualmente. Da mesma forma, não preciso ter medo de que a memória do meu dispositivo móvel seja consumida por episódios que já ouvi em meu desktop e vice-versa. O estado de reprodução é mantido em sincronia e os episódios ouvidos são excluídos automaticamente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="O menu de configurações do aplicativo Podcasts na seção 'Avançado', onde a opção 'Sincronizar assinaturas entre dispositivos' está ativada.", width="800", height="525" %} <figcaption>O estado é sincronizado na nuvem.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Sincronizar dados de estado do aplicativo é uma tarefa que você pode delegar à <a href="https://developers.google.com/web/updates/2015/12/background-sync">API Background Sync</a>. A operação de sincronização em si não precisa acontecer imediatamente, apenas <em>eventualmente</em>, e talvez até mesmo quando o usuário já tiver fechado o aplicativo novamente. {% endDetails %}
+
+## Principais controles de mídia de hardware
+
+Quando estou ocupado com outro aplicativo, digamos, lendo uma página de notícias no navegador Chrome, ainda posso controlar o aplicativo Podcasts com as teclas de mídia do meu laptop. Não há necessidade de alternar para o aplicativo apenas para avançar ou retroceder.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="Magic Keyboard do Apple MacBook Pro com teclas de mídia anotadas.", width="800", height="406" %} <figcaption>As teclas de mídia permitem controlar o aplicativo Podcasts (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">Fonte</a>).</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} As teclas de mídia são suportadas pela <a href="/media-session/">API de sessão de mídia</a>. Assim, os usuários podem usar as teclas de mídia de hardware em seus teclados físicos, fones de ouvido ou até mesmo controlar o aplicativo da web a com as teclas de mídia de software em seus smartwatches. Uma ideia adicional para suavizar as operações de busca é enviar um <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">padrão de vibração</a> quando o usuário estiver buscando uma parte significativa do conteúdo, por exemplo, passando os créditos de abertura ou o limite de um capítulo. {% endDetails %}
+
+## Multitarefa e atalho de aplicativo
+
+É claro que sempre posso executar várias tarefas ao mesmo tempo no aplicativo Podcasts de qualquer lugar. O aplicativo tem um ícone claramente distinguível que também posso colocar na minha Mesa ou Dock de aplicativos para que os podcasts possam ser iniciados imediatamente, quando eu quiser.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="O alternador de tarefas do macOS com vários ícones de aplicativos para escolher, um deles o aplicativo Podcasts.", width="800", height="630" %} <figcaption>Multitarefa de volta ao aplicativo Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Os Progressive Web Apps no desktop e no celular podem ser instalados na tela inicial, menu iniciar ou dock de aplicativo. A instalação pode acontecer com base em uma solicitação proativa ou totalmente controlada pelo desenvolvedor do aplicativo. O artigo <a href="/install-criteria/">O que é necessário para ser instalável?</a> cobre tudo que você precisa saber. Durante a multitarefa, os PWAs aparecem independentemente do navegador. {% endDetails %}
+
+## Ações rápidas no menu de contexto
+
+As ações mais comuns do aplicativo, **Pesquisar** por novo conteúdo e **Verificar novos episódios** , estão disponíveis diretamente no menu de contexto do aplicativo no Dock. Através do **menu Opções** , também posso decidir abrir o aplicativo no momento do login.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="Menu de contexto do ícone do aplicativo Podcasts mostrando as opções 'Pesquisar' e 'Verificar novos episódios'.", width="534", height="736" %} <figcaption>As ações rápidas estão imediatamente disponíveis diretamente no ícone do aplicativo.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Ao especificar os <a href="/app-shortcuts/">atalhos do ícone do aplicativo</a> no manifesto do aplicativo da web do PWA, você pode registrar rotas rápidas para tarefas comuns que os usuários podem acessar diretamente com o ícone do aplicativo. Em sistemas operacionais como o macOS, os usuários também podem clicar com o botão direito do mouse no ícone do aplicativo e configurá-lo para iniciar no momento do login. Há um trabalho em andamento em uma proposta para <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">executar no login</a>. {% endDetails %}
+
+## Atuar como aplicativo padrão
+
+Outros aplicativos iOS e até mesmo sites ou e-mails podem se integrar ao aplicativo Podcasts, aproveitando o esquema de URL `podcasts://` Se eu seguir um link como [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903) enquanto estiver no navegador, sou levado diretamente para o aplicativo Podcasts e posso decidir se quero assinar ou ouvir o podcast.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="O navegador Chrome mostra uma caixa de diálogo de confirmação perguntando ao usuário se deseja abrir o aplicativo Podcasts.", width="800", height="492" %} <figcaption>O aplicativo Podcasts pode ser aberto diretamente no navegador.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Lidar com esquemas de URL totalmente personalizados ainda não é possível, mas há um trabalho em andamento em uma proposta para <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">Manipulação de protocolo de URL</a> para PWAs. Atualmente, <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> com um <code>web+</code> é a melhor alternativa. {% endDetails %}
+
+## Integração do sistema de arquivos local
+
+Você pode não pensar nisso imediatamente, mas o aplicativo Podcasts se integra naturalmente ao sistema de arquivos local. Quando eu faço download de um episódio de podcast, no meu laptop ele é armazenado em `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`. Ao contrário de, digamos, `~/Documents`, esse diretório obviamente não deve ser acessado diretamente por usuários regulares, mas está lá. Outros mecanismos de armazenamento além dos arquivos são mencionados na seção de [conteúdo offline.](#offline-content-available-and-media-playable)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="O macOS Finder acessou o diretório do sistema do aplicativo Podcasts.", width="800", height="337" %} <figcaption>Os episódios de podcast são armazenados em uma pasta especial do aplicativo do sistema.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/file-system-access/">API</a> de acesso ao sistema de arquivos permite que os desenvolvedores tenham acesso ao sistema de arquivos local do dispositivo. Você pode usá-lo diretamente ou por meio da <a href="https://github.com/GoogleChromeLabs/browser-fs-access">biblioteca de suporte browser-fs-access,</a> que fornece uma alternativa transparente para navegadores que não oferecem suporte à API. Por motivos de segurança, os diretórios do sistema não são acessíveis pela web. {% endDetails %}
+
+## Aparência e comportamento da plataforma
+
+Existe uma coisa mais sutil que é evidente para um aplicativo iOS como Podcasts: nenhum dos rótulos de texto é selecionável e todo o texto se mistura com a fonte do sistema da máquina. Além disso, minha opção para o tema de cores do sistema (modo escuro) é respeitada.
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="O aplicativo Podcasts no modo escuro.", width="800", height="463" %} <figcaption>O aplicativo Podcasts oferece suporte aos modos claro e escuro.</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="O aplicativo Podcasts em modo claro.", width="800", height="463" %} <figcaption>O aplicativo usa a fonte padrão do sistema.</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Aproveitando a <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a> pelo usuário com o valor <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a> , você pode proteger os elementos da IU de serem selecionados acidentalmente. No entanto, certifique-se de não abusar dessa propriedade para tornar o <em>conteúdo do aplicativo</em> não selecionável. Isso deve ser usado apenas para elementos da IU, como textos de botão etc. O <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#&lt;generic-name&gt;:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a> para a <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> permite que você especifique a fonte da IU padrão do sistema a ser usada para seu aplicativo. Finalmente, seu aplicativo pode obedecer à preferência de esquema de cores do usuário, respeitando a preferência<a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a> com uma <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">chave alternante para modo escuro</a> opcional para substituí-la. Outra coisa a se decidir pode ser o que o navegador deve fazer ao atingir o limite de uma área de rolagem, por exemplo, para implementar <em>puxar personalizado para atualizar</em>. Isso é possível com a propriedade CSS de <a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> {% endDetails %}
+
+## Barra de título personalizada
+
+Ao olhar para a janela do aplicativo Podcasts, você percebe que ela não possui uma barra de título e uma barra de ferramentas integradas clássicas, como, por exemplo, a janela do navegador Safari, mas sim uma experiência personalizada que se parece com uma barra lateral encaixada na janela do player principal.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="A barra de blocos e a barra de ferramentas integradas do navegador Safari.", width="800", height="40" %} <figcaption></figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="A barra de título dividida personalizada do aplicativo Podcasts.", width="800", height="43" %} <figcaption>Barras de título personalizadas do Safari e Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Embora não seja possível no momento, a <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">personalização da barra de título</a> está sendo trabalhada no momento. Você pode (e deve), no entanto, especificar a <a href="/add-manifest/#display"><code>display</code></a> e as <a href="/add-manifest/#theme-color"><code>theme-color</code></a> do tema do manifesto do aplicativo da web para determinar a aparência e comportamento da janela do seu aplicativo e para decidir quais controles padrão do navegador - potencialmente nenhum deles - devem ser mostrados. {% endDetails %}
+
+## Animações rápidas
+
+As animações no aplicativo são rápidas e suaves em podcasts. Por exemplo, quando abro a gaveta **Notas de Episódio** à direita, ela desliza elegantemente para dentro. Quando eu removo um episódio de meus downloads, os episódios restantes flutuam e consomem o espaço da tela que foi liberado pelo episódio excluído.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="O aplicativo Podcasts com a gaveta 'Notas do Episódio' foi expandida.", width="800", height="463" %} <figcaption>As animações no aplicativo, como ao abrir uma gaveta, são rápidas.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Animações performáticas na web certamente são possíveis se você levar em consideração uma série de práticas recomendadas descritas no artigo <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Animações e desempenho</a>. As animações de rolagem normalmente vistas em conteúdo paginado ou carrosséis de mídia podem ser bastante aprimoradas usando o recurso<a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a>. Para ter controle total, você pode usar a <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">API Web Animations</a>. {% endDetails %}
+
+## Conteúdo que aparece fora do aplicativo
+
+O aplicativo Podcasts no iOS pode exibir conteúdo em outros locais que não o aplicativo real, por exemplo, na exibição de Widgets do sistema ou na forma de uma sugestão de Siri. Ter chamadas à ação proativas baseadas no uso que requerem apenas um toque para interagir pode aumentar muito a taxa de novos engajamentos de um aplicativo como o Podcasts.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="Visualização do widget iOS mostrando o aplicativo Podcasts, sugerindo um novo episódio de um podcast.", width="751", height="1511" %} <figcaption>O conteúdo do aplicativo é exibido fora do aplicativo Podcasts principal.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/content-indexing-api/">API de índice de conteúdo</a> permite que seu aplicativo informe ao navegador qual conteúdo do PWA está disponível offline. Isso permite que o navegador exiba esse conteúdo fora do aplicativo principal. Marcando conteúdo interessante em seu aplicativo como adequado para reprodução de áudio <a href="https://developers.google.com/search/docs/data-types/speakable">falável</a> e usando marcação <a href="https://developers.google.com/search/docs/guides/search-gallery">estruturada</a> em geral, você pode ajudar mecanismos de pesquisa e assistentes virtuais como o Google Assistant a apresentar suas ofertas em uma apresentação ideal. {% endDetails %}
+
+## Widget de controle de mídia da tela de bloqueio
+
+Quando um episódio de podcast está sendo reproduzido, o aplicativo Podcasts mostra um belo widget de controle na tela de bloqueio que apresenta metadados como a capa do episódio, o título do episódio e o nome do podcast.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="Widget de reprodução de mídia do iOS na tela de bloqueio mostrando um episódio de podcast com metadados avançados.", width="751", height="1511" %} <figcaption>A reprodução de mídia no aplicativo pode ser controlada a partir da tela de bloqueio.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/media-session/">API de sessão de mídia</a> permite que você especifique metadados como arte, títulos de faixas etc. que são exibidos na tela de bloqueio, smartwatches ou outros widgets de mídia no navegador. {% endDetails %}
+
+## Notificações via push
+
+As notificações push se tornaram um pouco incômodas na web (embora os [prompts de notificação estejam muito mais silenciosos](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html) agora). Mas, se usados corretamente, eles podem agregar muito valor. Por exemplo, o aplicativo iOS Podcasts pode, opcionalmente, me notificar sobre novos episódios de podcasts nos quais estou inscrito ou recomendar novos, bem como me alertar sobre novos recursos do aplicativo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="Aplicativo iOS Podcasts na tela de configurações de 'Notificações' mostrando a alternância de notificações de 'Novos episódios' ativada.", width="751", height="1511" %} <figcaption>Os aplicativos podem enviar notificações push para informar o usuário sobre novos conteúdos.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="https://developers.google.com/web/fundamentals/push-notifications">API Push</a> permite que seu aplicativo receba notificações push para que você possa notificar seus usuários sobre eventos importantes sobre seu PWA. Para notificações que devem ser disparadas em um momento conhecido no futuro e que não requerem uma conexão de rede, você pode usar a <a href="/notification-triggers/">API Notification Triggers</a>. {% endDetails %}
+
+## Emblema do ícone do app
+
+Sempre que houver novos episódios disponíveis de um dos podcasts em que estiver inscrito, um emblema do ícone do aplicativo no ícone da tela inicial do Podcasts aparece, mais uma vez me encorajando a voltar a interagir com o aplicativo de uma forma que não seja intrusiva.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="Tela de configurações do iOS mostrando o botão 'Emblemas' ativado.", width="751", height="1511" %} <figcaption>Os emblemas são uma forma sutil de os aplicativos informarem os usuários sobre o novo conteúdo.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Você pode definir emblemas de ícones de aplicativos com a <a href="/badging-api/">Badging API</a>. Isso é especialmente útil quando seu PWA tem alguma noção de itens "não lidos" ou quando você precisa de um meio para chamar discretamente a atenção do usuário de volta para o aplicativo. {% endDetails %}
+
+## A reprodução de mídia tem precedência sobre as configurações de economia de energia
+
+Quando a mídia de podcast está sendo reproduzida, a tela pode desligar, mas o sistema não entrará no modo de espera. Os aplicativos também podem manter a tela ativada, por exemplo, para exibir letras ou legendas.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="Preferências do macOS na seção 'Economizador de energia'.", width="800", height="573" %} <figcaption>Os aplicativos podem manter a tela ativa.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} A <a href="/wakelock/">API Screen Wake Lock</a> permite evitar que a tela desligue. A reprodução de mídia na web impede automaticamente que o sistema entre no modo de espera. {% endDetails %}
+
+## Descoberta de aplicativos em uma loja de aplicativos
+
+Embora o aplicativo Podcasts faça parte da experiência de desktop do macOS, no iOS ele precisa ser instalado a partir da App Store. Uma busca rápida por `podcast` , `podcasts` ou `apple podcasts` transforma imediatamente o aplicativo na App Store.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="A pesquisa da iOS App Store por 'podcasts' revela o aplicativo Podcasts.", width="751", height="1511" %} <figcaption>Os usuários aprenderam a descobrir aplicativos em lojas de aplicativos.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Como fazer isso na web {% endDetailsSummary %} Embora a Apple não permita PWAs na App Store, no Android, você pode enviar seu PWA <a href="/using-a-pwa-in-your-android-app/">como um wrap de uma Atividade da Web confiável</a>. O <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> amacia essa operação. Este script também é o que alimenta internamente o <a href="https://www.pwabuilder.com/">recurso de exportação de aplicativos Android do PWABuilder</a>, que você pode usar sem mexer na linha de comando. {% endDetails %}
+
+## Resumo sobre os recursos
+
+A tabela abaixo mostra uma visão geral compacta de todos os recursos e fornece uma lista de recursos úteis para realizá-los na web.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Recurso</th>
+        <th>Recursos úteis para fazer isso na web</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">Capacidade de funcionar offline</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/architecture/app-shell">Modelo de shell de aplicativo</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#offline-content-available-and-media-playable">Conteúdo offline disponível e reproduzível em mídia</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Exibir áudio e vídeo em cache</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">Biblioteca Workbox</a></li>
+            <li><a href="/storage-for-the-web/">API de armazenamento</a></li>
+            <li><a href="/persistent-storage/">API de armazenamento persistente</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">Download proativo em segundo plano</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">API Background Fetch</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">Compartilhamento e interação com outros aplicativos</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">API Web Share</a></li>
+            <li><a href="/web-share-target/">API Web Share Target</a></li>
+            <li><a href="/image-support-for-async-clipboard/">API Async Clipboard</a></li>
+            <li><a href="/contact-picker/">API Contact Picker</a></li>
+            <li><a href="/get-installed-related-apps/">API para obtenção de aplicativos relacionados instalados</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">Atualização do app em segundo plano</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">API de sincronização periódica em segundo plano</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">Estado sincronizado na nuvem</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">API de sincronização de segundo plano</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">Principais controles de mídia de hardware</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">API de sessão de mídia</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">Multitarefa e atalhos de aplicativo</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">Critérios de instalabilidade</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">Ações rápidas no menu de contexto</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">Atalhos do ícone do aplicativo</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">Executar no login</a> (estágio inicial)</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">Atuar como aplicativo padrão</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">Tratamento do protocolo de URL</a> (estágio inicial)</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">Integração do sistema de arquivos local</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">API de acesso ao sistema de arquivos</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">biblioteca browser-fs-access</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">Aparência e comportamento da plataforma</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">Alternar para modo escuro</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">Barra de título personalizada</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">Personalização da barra de título</a> (estágio inicial)</li>
+            <li><a href="/add-manifest/#display">Modo de exibição</a></li>
+            <li><a href="/add-manifest/#theme-color">Cor do tema</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">Animações rápidas</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Animações e dicas de desempenho</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">API de animações da web</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">Conteúdo que aparece fora do aplicativo</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">API de índice de conteúdo</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">Conteúdo falável</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">Marcação estruturada</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">Widget de controle de mídia da tela de bloqueio</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">API de sessão de mídia</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">Notificações via push</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">API push</a></li>
+            <li><a href="/notification-triggers/">API Notification Triggers</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">Selo do ícone do app</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">API Badging</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">A reprodução de mídia tem precedência sobre as configurações de economia de energia</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">API Screen Wake Lock</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">Descoberta de aplicativos em uma loja de aplicativos</a></td>
+        <td>
+          <ul>
+            <li><a href="/using-a-pwa-in-your-android-app/">Atividade confiável na web</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap">biblioteca <code>bubblewrap</code></a></li>
+            <li><a href="https://www.pwabuilder.com/">Ferramenta PWABuilder</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Conclusão
+
+Os PWAs já percorreram um longo caminho desde sua introdução em 2015. No contexto do [Projeto Fugu 🐡](https://developer.chrome.com/blog/fugu-status), a equipe multiempresarial do Chromium está trabalhando para preencher as últimas lacunas restantes. Seguindo apenas alguns dos conselhos deste artigo, você pode chegar mais perto de oferecer uma sensação de app e fazer com que seus usuários esqueçam que estão lidando com "apenas um site", porque, sinceramente, a maioria deles não se preocupe como seu aplicativo é construído (e por que deveria?), contanto que pareça um aplicativo *de verdade.*
+
+## Agradecimentos
+
+Este artigo foi revisado por [Kayce Basques](/authors/kaycebasques/) , [Joe Medley](/authors/joemedley/) , [Joshua Bell](https://github.com/inexorabletash) , [Dion Almaer](https://blog.almaer.com/) , [Ade Oshineye](https://blog.oshineye.com/) , [Pete LePage](/authors/petelepage/) , [Sam Thorogood](/authors/samthor/) , [Reilly Grant](https://github.com/reillyeon) e [Jeffrey Yasskin.](https://github.com/jyasskin)
diff --git a/src/site/content/pt/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/pt/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..21cc056b2a1
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,102 @@
+---
+layout: codelab
+title: Torne-o instalável
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description: |2
+
+  Neste codelab, aprenda como tornar um site instalável usando o
+
+  evento beforeinstallprompt.
+glitch: make-it-installable?path=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+Esse glitch já contém os componentes críticos necessários para tornar instalável um Progressive Web App, incluindo um [service worker muito simples](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js) e um [manifesto de aplicativo web](https://glitch.com/edit/#!/make-it-installable?path=manifest.json). Ele também possui um botão de instalação que está oculto por padrão.
+
+## Fique à escuta do evento beforeinstallprompt
+
+Quando o navegador dispara o `beforeinstallprompt`, é a indicação de que o Progressive Web App pode ser instalado e um botão de instalação pode ser mostrado ao usuário. O `beforeinstallprompt` é disparado quando o PWA atender [aos critérios de](/install-criteria/) instalabilidade.
+
+{% Instruction 'remix', 'ol' %}
+
+1. Adicione um manipulador de eventos `beforeinstallprompt` ao objeto `window`
+2. Salve o `event` como uma variável global; vamos precisar dele mais tarde para mostrar o prompt.
+3. Exiba o botão de instalação.
+
+Código:
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // Impedir que o mini-infobar apareça no celular.
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // Esconder o evento para que possa ser acionado mais tarde.
+  window.deferredPrompt = event;
+  // Remover a classe 'oculta' do contêiner do botão de instalação.
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## Tratar o clique do botão de instalação
+
+Para mostrar o prompt de instalação, chame `prompt()` no evento `beforeinstallprompt` Chamar `prompt()` é feito no manipulador de clique do botão de instalação porque `prompt()` deve ser chamado a partir de um gesto do usuário.
+
+1. Adicione um manipulador de eventos de clique para o botão de instalação.
+2. Call `prompt()` no evento `beforeinstallprompt`
+3. Registre os resultados do prompt.
+4. Defina o `beforeinstallprompt` salvo como null.
+5. Oculte o botão de instalação.
+
+Código:
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // The deferred prompt isn't available.
+    return;
+  }
+  // Show the install prompt.
+  promptEvent.prompt();
+  // Log the result
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // Reset the deferred prompt variable, since
+  // prompt() can only be called once.
+  window.deferredPrompt = null;
+  // Hide the install button.
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## Acompanhe o evento de instalação
+
+Instalar um Progressive Web App por meio de um botão de instalação é apenas uma maneira de os usuários instalarem um PWA. Eles também podem usar o menu do Chrome, a minibarra de informações e através de [um ícone na caixa geral](/promote-install/#browser-promotion) . Você pode acompanhar todas essas formas de instalação escutando o evento `appinstalled`
+
+1. Adicione um manipulador de eventos `appinstalled` ao objeto de `window`
+2. Registre o evento de instalação em análises ou outro mecanismo.
+
+Código:
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // Limpa o deferredPrompt para que possa ser coletado como lixo
+  window.deferredPrompt = null;
+});
+```
+
+## Leitura adicional
+
+Parabéns, seu aplicativo agora pode ser instalado!
+
+Aqui estão mais coisas que você pode fazer:
+
+- [Detecte se seu aplicativo é iniciado na tela inicial](/customize-install/#detect-mode)
+- [Mostrar em vez disso o prompt de instalação do aplicativo do sistema operacional](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/pt/progressive-web-apps/customize-install/index.md b/src/site/content/pt/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..14a79c77495
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Como fornecer sua própria experiência de instalação in-app
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: Use o evento beforeinstallprompt para fornecer uma experiência de instalação in-app personalizada, simples e eficiente para seus usuários.
+tags:
+  - progressive-web-apps
+---
+
+Muitos navegadores possibilitam que você ative e promova a instalação do seu Progressive Web App (PWA) diretamente a partir da própria interface do usuário do seu PWA. A instalação (às vezes conhecida como "Adicionar à tela inicial") torna mais fácil para os usuários instalarem seu PWA em seus dispositivos móveis ou desktop. A instalação de um PWA adiciona-o ao inicializador do usuário, permitindo que seja executado como qualquer outra aplicação instalada.
+
+Além da [experiência de instalação proporcionada pelo navegador](/promote-install/#browser-promotion), é possível fornecer seu próprio processo de instalação personalizado, diretamente a partir da sua aplicação.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Botão Instalar aplicativo fornecido no Spotify PWA", width="491", height="550" %} <figcaption> Botão "Instalar aplicativo" fornecido no Spotify PWA </figcaption></figure>
+
+Ao considerar se deve ou não promover a instalação, é melhor pensar em como os usuários normalmente usam seu PWA. Por exemplo, se houver um conjunto de usuários que usam seu PWA muitas vezes por semana, esses usuários poderão se beneficiar com a conveniência adicional de iniciar seu aplicativo a partir da tela inicial de um smartphone ou do menu Iniciar de um sistema operacional de desktop. Alguns aplicativos de produtividade e entretenimento também se beneficiam do espaço extra da tela criado pela remoção das barras de ferramentas do navegador da janela nos modos `standalone` ou `minimal-ui`
+
+## Promovendo a instalação {: #promote-installation}
+
+Para indicar que seu Progressive Web App é instalável e para fornecer um processo de instalação in-app personalizado:
+
+1. Escute o evento `beforeinstallprompt`
+2. Salve o evento `beforeinstallprompt`, para que ele possa ser usado para disparar o processo de instalação posteriormente.
+3. Avise ao usuário de que seu PWA pode ser instalado e forneça um botão ou outro elemento para iniciar o processo de instalação no aplicativo.
+
+{% Aside %} O evento `beforeinstallprompt` e o evento `appinstalled` foram transferidos da especificação do manifesto web app para sua própria [incubadora](https://github.com/WICG/beforeinstallprompt). A equipe do Chrome continua comprometida em apoiá-los e não tem planos de remover ou suspender seu uso. A equipe Web DevRel do Google continua recomendando seu uso para proporcionar uma experiência de instalação personalizada. {% endAside %}
+
+### Escute o `beforeinstallprompt` {: #beforeinstallprompt}
+
+Se seu Progressive Web App atender aos [critérios de instalação](/install-criteria/) necessários, o navegador disparará um evento `beforeinstallprompt`. Salve uma referência ao evento e atualize sua interface de usuário para indicar que o usuário pode instalar seu PWA. Isso está destacado abaixo.
+
+```js
+// Inicialize o deferredPrompt para posteriormente mostrar o prompt de instalação do navegador.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Impede que o mini-infobar apareça em mobile
+  e.preventDefault();
+  // Guarda evento para que possa ser disparado depois.
+  deferredPrompt = e;
+  // Atualiza UI notifica usuário que pode instalar PWA
+  showInstallPromotion();
+  // Opcionalmente, enviar eventos de analytics que promo de instalação PWA foi mostrado.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %} Existem diversos [padrões](/promote-install/) diferentes que você pode usar para notificar o usuário de que sua aplicação pode ser instalada e fornecer um processo de instalação na aplicação, por exemplo, um botão no cabeçalho, um item no menu de navegação ou um item em seu feed de conteúdo. {% endAside %}
+
+### Processo de instalação in-app {: #in-app-flow}
+
+Para fornecer uma instalação in-app, forneça um botão ou outro elemento de interface no qual um usuário possa clicar para instalar sua aplicação. Quando o elemento for clicado, chame `prompt()` no evento `beforeinstallprompt` salvo (armazenado na `deferredPrompt`). Ele mostra ao usuário uma caixa de diálogo de instalação modal, solicitando a confirmação de que deseja instalar o PWA.
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Esconde a promoção de instalação fornecida pelo app
+  hideInstallPromotion();
+  // Mostra prompt de instalação
+  deferredPrompt.prompt();
+  // Espera usuário responder ao prompt
+  const { outcome } = await deferredPrompt.userChoice;
+  // Opcionalmente, enviar evento analytics com resultado da escolha do usuário
+  console.log(`User response to the install prompt: ${outcome}`);
+  // Usamos o prompt e não podemos usar de novo; jogue fora
+  deferredPrompt = null;
+});
+```
+
+A propriedade `userChoice` é uma promessa que se resolve com a escolha do usuário. Você só pode chamar `prompt()` no evento adiado uma única vez. Se o usuário dispensá-lo, você precisará esperar até que o `beforeinstallprompt` seja disparado novamente. Isto ocorre geralmente logo após a resolução da propriedade `userChoice`.
+
+{% Aside 'codelab' %} [Torne um site instalável usando o evento beforeinstallprompt](/codelab-make-installable). {% endAside %}
+
+## Detecte quando o PWA foi instalado com sucesso {: #detect-install }
+
+Você pode usar a propriedade `userChoice` para determinar se o usuário instalou sua aplicação a partir da sua interface de usuário. Mas, se o usuário instalar seu PWA a partir da barra de endereços ou outro componente do navegador, a propriedade `userChoice` não ajudará. Em vez disso, você precisa escutar o evento `appinstalled`. Ele é disparado sempre que o PWA é instalado, independentemente do mecanismo usado para instalá-lo.
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Esconder a promoção de instalação fornecida pela app
+  hideInstallPromotion();
+  // Limpar o deferredPrompt para que seja coletado
+  deferredPrompt = null;
+  // Opcionalmente, enviar evento de analytics para indicar instalação com sucesso
+  console.log('PWA was installed');
+});
+```
+
+## Detecte como o PWA foi iniciado {: #detect-launch-type }
+
+A media query CSS `display-mode` indica como o PWA foi iniciado, em uma aba do navegador ou como um PWA instalado. Isto permite aplicar estilos diferentes, dependendo de como o aplicativo foi iniciado. Por exemplo, sempre oculte o botão de instalação e forneça um botão Voltar quando iniciado como um PWA instalado.
+
+### Monitore como o PWA foi lançado
+
+Para rastrear como os usuários iniciam seu PWA, use `matchMedia()` para testar a media query `display-mode`. O Safari no iOS ainda não suporta esse recurso, então você precisa verificar `navigator.standalone`: ele retorna um valor booleano indicando se o navegador está sendo executado no modo independente.
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### Monitore quando o modo de exibição mudar
+
+Para rastrear se o usuário muda entre `standalone` e `browser tab`, escute as mudanças na media query `display-mode`
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### Atualize a IU com base no modo de exibição atual
+
+Para aplicar uma cor de fundo diferente para um PWA quando iniciado como um PWA instalado, use CSS condicional:
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## Atualizando o ícone e o nome da sua aplicação
+
+E se você precisar modificar o nome da sua aplicação ou fornecer novos ícones? Confira [Como o Chrome lida com as atualizações do manifesto web app](/manifest-updates/) para saber quando e como essas mudanças são refletidas no Chrome.
diff --git a/src/site/content/pt/progressive-web-apps/define-install-strategy/index.md b/src/site/content/pt/progressive-web-apps/define-install-strategy/index.md
new file mode 100644
index 00000000000..d3e60dd7063
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/define-install-strategy/index.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: Como definir sua estratégia de instalação
+authors:
+  - demianrenzulli
+  - petelepage
+date: 2020-05-12
+updated: 2020-08-20
+description: |2-
+
+  Melhores práticas para combinar diferentes ofertas de instalação para aumentar as taxas de instalação e evitar competição e canibalização da plataforma.
+tags:
+  - progressive-web-apps
+---
+
+{% YouTube '6R9pupbDXYw' %}
+
+No passado, as instalações de aplicativos só eram possíveis no contexto de aplicativos específicos da plataforma. Hoje, os aplicativos da web modernos oferecem experiências instaláveis que fornecem o mesmo nível de integração e confiabilidade que os aplicativos específicos da plataforma.
+
+Você pode conseguir isso de diferentes maneiras:
+
+- Instalando o PWA a [partir do navegador](/customize-install/) .
+- Instalando o PWA [da app store](https://developer.chrome.com/docs/android/trusted-web-activity/) .
+
+Ter diferentes canais de distribuição é uma maneira poderosa de alcançar um grande número de usuários, mas escolher a estratégia certa para promovê-los pode ser um desafio.
+
+Este guia explora as práticas recomendadas para combinar diferentes ofertas de instalação para aumentar as taxas de instalação e evitar a competição de plataforma e a canibalização. As ofertas de instalação cobertas incluem PWAs instalados do navegador e da App Store, bem como aplicativos específicos da plataforma.
+
+## Por que tornar seu aplicativo da web instalável?
+
+Progressive Web Apps instaladas são executados numa janela independente em vez de numa aba do navegador. Elas podem ser iniciadas na tela inicial do usuário, no dock, na barra de tarefas ou na prateleira. É possível procurá-las num dispositivo e alternar entre elas com o alternador de aplicações, fazendo com que pareçam parte do dispositivo em que estão instaladas.
+
+Mas ter um aplicativo da web instalável e um aplicativo específico da plataforma pode ser confuso para os usuários. Para alguns usuários, os aplicativos específicos da plataforma podem ser a melhor escolha, mas para outros eles podem apresentar algumas desvantagens:
+
+- **Restrições de armazenamento:** Instalar um novo aplicativo pode significar excluir outros ou limpar espaço, removendo conteúdo valioso. Isso é especialmente desvantajoso para usuários em dispositivos de baixo custo.
+- **Largura de banda disponível:** Baixar um aplicativo pode ser um processo caro e lento, ainda mais para usuários com conexões lentas e planos de dados caros.
+- **Atrito:** sair de um site e ir para uma loja para baixar um aplicativo cria atrito adicional e atrasa uma ação do usuário que poderia ser realizada diretamente na web.
+- **Ciclo de atualização:** fazer alterações em aplicativos específicos da plataforma pode exigir a passagem por um processo de revisão de aplicativo, o que pode desacelerar as alterações e os experimentos (por exemplo, testes A / B).
+
+Em alguns casos, a porcentagem de usuários que não irão baixar seu aplicativo específico da plataforma pode ser grande, por exemplo: aqueles que pensam que não usarão o aplicativo com muita frequência ou não podem justificar o gasto de vários megabytes de armazenamento ou dados. Você pode determinar o tamanho desse segmento de várias maneiras, por exemplo, usando uma configuração de análise para rastrear a porcentagem de usuários "apenas da web móvel".
+
+Se o tamanho desse segmento for considerável, é uma boa indicação de que você precisa fornecer maneiras alternativas de instalar suas experiências.
+
+## Promover a instalação do seu PWA através do navegador
+
+Se você tiver um PWA de alta qualidade, pode ser melhor promover sua instalação em relação ao aplicativo específico de sua plataforma. Por exemplo, se o aplicativo específico da plataforma não tiver a funcionalidade oferecida pelo seu PWA ou se não tiver sido atualizado há algum tempo. Também pode ser útil promover a instalação de seu PWA se o aplicativo específico da plataforma não foi otimizado para telas maiores, como no ChromeOS.
+
+Para alguns aplicativos, a condução de instalações de aplicativos específicos da plataforma é uma parte fundamental do modelo de negócios; nesse caso, faz sentido para os negócios promover a instalação de aplicativos específicos da plataforma. Porém, alguns usuários podem se sentir mais confortáveis permanecendo na web. Se esse segmento puder ser identificado, o prompt do PWA pode ser mostrado apenas para eles (o que chamamos de "PWA como fallback").
+
+Nesta seção, exploraremos diferentes maneiras de maximizar a taxa de instalação de PWAs instalados por meio do navegador.
+
+### PWA como experiência instalável primária
+
+Quando um PWA atende aos [critérios de instalabilidade](/install-criteria/) , a maioria dos navegadores mostra uma indicação de que o PWA pode ser instalado. Por exemplo, Desktop Chrome mostrará um ícone instalável na barra de endereço e, no celular, mostrará uma mini-barra de informações:
+
+<figure data-float="right">{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1VOvbQjeenZOBAmzjVN5.png", alt = "Solicitação de instalação padrão do Chrome chamada mini-infobar", width = "800", height = "417"%}<figcaption> O mini-infobar</figcaption></figure>
+
+Embora isso possa ser suficiente para algumas experiências, se seu objetivo é conduzir as instalações do seu PWA, é altamente recomendável ouvir [`BeforeInstallPromptEvent`](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent) e seguir os [padrões para promover a instalação](/promote-install/) do seu PWA.
+
+## Evite que seu PWA canibalize sua taxa de instalação de aplicativo específico da plataforma
+
+Em alguns casos, você pode optar por promover a instalação de seu aplicativo específico de plataforma em vez de seu PWA, mas, neste caso, ainda recomendamos que você forneça um mecanismo para permitir que os usuários instalem seu PWA. Essa opção de fallback possibilita que usuários que não podem ou não querem instalar seu aplicativo específico da plataforma tenham uma experiência de instalação semelhante.
+
+A primeira etapa para implementar essa estratégia é definir uma heurística para quando você mostrará ao usuário uma promoção de instalação para seu PWA, por exemplo:
+
+**"Um usuário PWA é aquele que viu o prompt de instalação do aplicativo específico da plataforma e não instalou o aplicativo específico da plataforma. Eles retornaram ao site pelo menos cinco vezes ou clicaram no banner do aplicativo, mas continuaram usando o site em vez disso. "**
+
+Então, a heurística pode ser implementada da seguinte maneira:
+
+1. Mostre o banner de instalação de aplicativo específico da plataforma.
+2. Se um usuário dispensar o banner, defina um cookie com essas informações (por exemplo, `document.cookie = "app-install-banner=dismissed"` ).
+3. Use outro cookie para rastrear o número de visitas do usuário ao site (por exemplo, `document.cookie = "user-visits=1"` ).
+4. Escreva uma função, como `isPWAUser()` , que usa as informações previamente armazenadas nos cookies junto com a [`getInstalledRelatedApps()`](/get-installed-related-apps/) para determinar se um usuário é considerado um "usuário PWA".
+5. No momento em que o usuário executa uma ação significativa, chame `isPWAUser()` . Se a função retornar true e o prompt de instalação do PWA tiver sido salvo anteriormente, você pode mostrar o botão de instalação do PWA.
+
+## Promover a instalação do seu PWA através de uma app store
+
+Os aplicativos disponíveis nas lojas de aplicativos podem ser desenvolvidos com diferentes tecnologias, incluindo técnicas de PWA. Em [Combinando PWA em ambientes nativos,](https://youtu.be/V7YX4cZ_Cto) você pode encontrar um resumo das tecnologias que podem ser usadas para esse fim.
+
+Nesta seção, classificaremos os aplicativos da loja em dois grupos:
+
+- **Aplicativos específicos da plataforma:** esses aplicativos são desenvolvidos principalmente com código específico da plataforma. Seu tamanho depende da plataforma, mas geralmente é superior a 10 MB no Android e 30 MB no iOS. Você pode querer promover seu aplicativo específico da plataforma se não tiver um PWA ou se o aplicativo específico da plataforma apresentar um conjunto de recursos mais completo.
+- **Aplicativos leves:** esses aplicativos também podem ser desenvolvidos com código específico da plataforma, mas geralmente são criados com tecnologia da web, empacotados em um invólucro específico da plataforma. PWAs completos também podem ser carregados nas lojas. Algumas empresas optam por fornecê-las como experiências "leves" e outras também usam essa abordagem para seus aplicativos principais (núcleo).
+
+### Promoção de aplicativos leves
+
+De acordo com um [estudo do Google Play](https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2) , para cada 6 MB de aumento no tamanho de um APK, a taxa de conversão de instalação diminui em 1%. Isso significa que a taxa de conclusão do download de um aplicativo de 10 MB pode ser aproximadamente **30% maior do que um aplicativo de 100 MB!**
+
+Para resolver isso, algumas empresas estão aproveitando seu PWA para fornecer uma versão leve de seu aplicativo na Play Store usando Trusted Web Activities. [As atividades da Web confiáveis](https://developer.chrome.com/docs/android/trusted-web-activity/) possibilitam a entrega de seu PWA na Play Store e, como ele é criado na web, o tamanho do aplicativo geralmente é de apenas alguns megabytes.
+
+A Oyo, uma das maiores empresas de hospedagem da Índia, criou uma [versão Lite de seu aplicativo](/oyo-lite-twa/) e a disponibilizou na Play Store usando PWA. Tem apenas 850 KB, apenas 7% do tamanho de seu aplicativo Android. E uma vez instalado, é indistinguível de seu aplicativo Android:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>OYO Lite em ação.</figcaption></figure>
+
+A Oyo manteve as versões do aplicativo carro-chefe e "leve" na loja, deixando a decisão final para os usuários.
+
+#### Oferecendo uma experiência web leve
+
+Intuitivamente, os usuários de dispositivos de baixo custo, podem estar mais inclinados a baixar versões leves de aplicativos do que os usuários de telefones de ponta. Portanto, se for possível identificar o dispositivo de um usuário, pode-se priorizar o banner de instalação do aplicativo leve sobre a versão do aplicativo específico da plataforma mais pesada.
+
+Na web, é possível obter sinais de dispositivos e mapeá-los aproximadamente para categorias de dispositivos (por exemplo, "alto", "médio" ou "baixo"). Você pode obter essas informações de diferentes maneiras, usando APIs JavaScript ou dicas de cliente.
+
+#### Usando APIs de JavaScript
+
+Usando APIs JavaScript como [navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency) , [navigator.deviceMemory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) e [navigator.connection,](https://developer.mozilla.org/docs/Web/API/Navigator/connection) você pode obter informações sobre a CPU do dispositivo, memória e status da rede, respectivamente. Por exemplo:
+
+```javascript
+const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
+```
+
+#### Usando dicas do cliente
+
+Os sinais do dispositivo também podem ser inferidos em cabeçalhos de solicitação HTTP, por meio de [dicas do cliente](https://developer.mozilla.org/docs/Glossary/Client_hints) . Veja como você pode implementar o código anterior para a memória do dispositivo com dicas de cliente:
+
+Primeiro, diga ao navegador que você está interessado em receber dicas de memória do dispositivo no cabeçalho da resposta HTTP para qualquer solicitação primária:
+
+```html
+HTTP/1.1 200 OK
+Content-Type: text/html
+Accept-CH: Device-Memory
+```
+
+Em seguida, você começará a receber informações de memória do dispositivo no cabeçalho da solicitação de HTTP:
+
+```html
+GET /main.js HTTP/1.1
+Device-Memory: 0.5
+```
+
+Você pode usar essas informações em seus backends para armazenar um cookie com a categoria do dispositivo do usuário:
+
+```javascript
+app.get('/route', (req, res) => {
+  // Determine a category do dispositivo
+
+ const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
+
+  // Defina um cookie
+  res.setCookie('Device-Category', deviceCategory);
+  …
+});
+```
+
+Por fim, crie sua própria lógica para mapear essas informações para categorias de dispositivos e mostre o prompt de instalação do aplicativo correspondente em cada caso:
+
+```javascript
+if (isDeviceMidOrLowEnd()) {
+   // show "Lite app" install banner or PWA A2HS prompt
+} else {
+  // show "Core app" install banner
+}
+```
+
+{% Aside %} Cobrir em profundidade técnicas sobre como mapear sinais de dispositivos para categorias de dispositivos está fora do escopo deste guia, mas você pode verificar o [adaptive loading guide](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69) de Addy Osmani, [The Device Memory API](https://developer.chrome.com/blog/device-memory/) de Philip Walton e [Adapting to Users with Client Hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/) de Jeremy Wagner para obter mais informações sobre as melhores práticas a respeito disto. {% endAside %}
+
+## Conclusão
+
+A capacidade de ter um ícone na tela inicial do usuário é um dos recursos mais envolventes dos aplicativos. Dado que, historicamente, isso só era possível para aplicativos instalados de lojas de aplicativos, as empresas podem pensar que mostrar um banner de instalação da loja de aplicativos seria o suficiente para convencer os usuários a instalar suas experiências. Atualmente, existem mais opções para que o usuário instale um aplicativo, incluindo oferecer experiências de aplicativos leves nas lojas e permitir que os usuários adicionem PWAs à tela inicial, solicitando que façam isso diretamente do site.
diff --git a/src/site/content/pt/progressive-web-apps/drive-business-success/index.md b/src/site/content/pt/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..86775e815e0
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: Como os Progressive Web Apps podem impulsionar o sucesso dos negócios
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: Crie um caso de negócios sólido para seu PWA. Saiba quando você deve investir e como pode medir seu sucesso.
+tags:
+  - progressive-web-apps
+---
+
+Os Progressive Web Apps estão no roteiro de muitas empresas para modernizar seus sites e se adaptar às novas expectativas dos usuários. Como todos os novos conceitos e capacidades técnicas, eles levantam questões: é isso que meus clientes querem, quanto vai crescer meu negócio, o que é tecnicamente viável?
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="Identifique seus participantes", width="800", height="254" %}
+
+Para moldar sua estratégia digital, geralmente há vários participantes envolvidos: o gerente de produto e o CMO são coproprietários do impacto comercial de cada recurso, o CTO avalia a viabilidade e a confiabilidade de uma tecnologia, os pesquisadores de experiência do usuário confirmam que um recurso responde a um problema real do cliente.
+
+Este artigo tem como objetivo ajudá-lo a responder a essas três perguntas e a moldar seu projeto de PWA. Você começará a partir das necessidades do cliente, traduzirá isso em recursos de PWA e se concentrará em medir o impacto comercial que cada recurso proporciona.
+
+## Os PWAs resolvem as necessidades do cliente {: #solução-necessidades-cliente }
+
+Uma regra que adoramos seguir no Google ao criar produtos é "[concentre-se no usuário e todo o resto vai dar certo](https://www.google.com/about/philosophy.html)". Pense *primeiro no usuário* : quais são as necessidades dos meus clientes e como um PWA as fornece?
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="Identificar as necessidades do cliente", width="800", height="262" %}
+
+Ao fazer a pesquisa do usuário, encontramos alguns padrões interessantes:
+
+- Os usuários odeiam atrasos e falta de confiabilidade em dispositivos móveis: o nível de estresse causado por atrasos em dispositivos móveis é [comparável a assistir a um filme de terror](https://blog.hubspot.com/marketing/mobile-website-load-faster).
+- Cinquenta por cento dos usuários de smartphones são mais propensos a usar a versão móvel do site de uma empresa ao navegar ou fazer compras porque [não desejam baixar um aplicativo](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/).
+- Um dos principais motivos para desinstalar um aplicativo é o [armazenamento limitado](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/) (enquanto um PWA instalado geralmente ocupa menos de 1 MB).
+- Os usuários de smartphones são mais propensos a comprar em sites móveis que [oferecem recomendações relevantes](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/) sobre produtos, e 85% dos usuários de smartphones dizem que [as notificações móveis são úteis](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/).
+
+De acordo com essas observações, descobrimos que os clientes preferem experiências que sejam rápidas, instaláveis, confiáveis e envolventes (F.I.R.E)!
+
+## Os PWAs aproveitam os recursos modernos da web {: #capacidades-modernas }
+
+Os PWAs fornecem um conjunto de práticas recomendadas e APIs da web modernas que visam atender às necessidades de seus clientes, tornando seu site rápido, instalável, confiável e envolvente.
+
+Por exemplo, usar um trabalho de serviço para [armazenar seus recursos em cache](/service-workers-cache-storage/) e fazer uma [pré-busca preditiva](/precache-with-workbox/) torna seu site mais rápido e confiável. Tornar seu site instalável fornece uma maneira fácil para seus clientes acessarem diretamente na sua tela inicial ou inicializador de aplicativo. E novas APIs, como [Web Push Notifications,](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices) tornam mais fácil envolver novamente seus usuários com conteúdo personalizado para gerar fidelidade.
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="Melhorando a experiência do usuário com novos recursos", width="800", height="393" %}
+
+## Entenda o impacto nos negócios {: #impacto-negócios }
+
+A definição de sucesso do negócio pode ser uma série de coisas, dependendo da sua atividade:
+
+- Usuários que passam mais tempo em seu serviço
+- Taxas de rejeição reduzidas para seus clientes potenciais
+- Taxas de conversão aprimoradas
+- Mais visitantes recorrentes
+
+A maioria dos projetos de PWA resulta em uma taxa de conversão móvel mais alta e você pode aprender mais com os diversos [estudos de caso de PWA](https://www.pwastats.com/). Dependendo dos seus objetivos, você pode priorizar alguns aspectos do PWA que façam mais sentido para o seu negócio, e está tudo bem. Os recursos do PWA podem ser escolhidos a dedo e iniciados separadamente.
+
+Vamos medir o impacto comercial de cada um desses excelentes recursos do F.I.R.E.
+
+### O impacto comercial de um site rápido {: # impact-fast}
+
+Um [estudo recente da Deloitte Digital](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html) mostra que a velocidade da página tem um impacto significativo nas métricas de negócios.
+
+Há muito que você pode fazer para otimizar a velocidade do seu site e otimizar as jornadas críticas para todos os seus usuários. Se você não sabe por onde começar, dê uma olhada em nossa [seção Rápido](/fast/) e use o [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) para priorizar as coisas mais importantes a serem consertadas.
+
+Ao trabalhar em suas otimizações de velocidade, comece a medir a velocidade de seu site frequentemente com ferramentas e métricas apropriadas para monitorar seu progresso. Por exemplo, meça suas métricas com o [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), fixe metas claras, como ter [pontuações "Boas" no Core Web Vitals](/vitals/#core-web-vitals), e incorpore um [orçamento de desempenho em seu processo de construção](/incorporate-performance-budgets-into-your-build-tools/). Graças às suas medições diárias e [à metodologia do "valor da velocidade"](/value-of-speed/), você pode isolar o impacto de suas mudanças incrementais de velocidade e calcular quanta receita extra seu trabalho gerou.
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="Meça o valor da velocidade e correlacione-o com as conversões", width="800", height="306" %}
+
+O Ebay tornou a [velocidade um objetivo da empresa](/shopping-for-speed-on-ebay/) para 2019. Eles usaram técnicas como orçamento de desempenho, otimização de caminho crítico e pré-busca preditiva. Concluíram que, para cada 100 milissegundos de melhoria no tempo de carregamento da página de pesquisa, a contagem de adicionar ao cartão aumentava 0,5%.
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="Uma melhoria de 100 ms no tempo de carregamento resultou em um aumento de 0,5% na contagem de adicionar ao carrinho para o eBay", width="800", height="184" %}
+
+### O impacto comercial de um site instalável {: #impacto-instalável }
+
+Por que você deseja que um usuário instale seu PWA? Para facilitar o retorno ao seu site, em que a instalação de um aplicativo Android adicionaria pelo menos três etapas (redirecionamento para Play Store, download, relançamento do aplicativo Android na parte superior do funil). A instalação do PWA é feita perfeitamente com um clique e não afasta o usuário o funil de conversão atual.
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="A experiência de instalação deve ser perfeita", width="800", height="239" %}
+
+Depois de instalado, os usuários podem iniciá-lo com um clique no ícone em sua tela inicial, vê-lo na bandeja de aplicativos quando alternam entre os aplicativos, ou encontrá-lo por meio de um resultado de pesquisa de aplicativo. Chamamos esse aplicativo dinâmico de Discover-Launch-Switch, e tornar seu PWA instalável é a chave para desbloquear o acesso.
+
+Além de ser acessível a partir de superfícies de descoberta e inicialização familiares em seus dispositivos, um PWA é iniciado exatamente como um aplicativo específico de plataforma: em uma experiência autônoma, separada do navegador. Além disso, se beneficia de serviços de dispositivo de nível de sistema operacional, como o alternador de aplicativos e configurações.
+
+Os usuários que instalam seu PWA são provavelmente os usuários mais engajados, com melhores métricas de engajamento do que visitantes casuais, incluindo mais visitas repetidas, mais tempo no site e taxas de conversão mais altas, muitas vezes em paridade com usuários de aplicativos específicos da plataforma em dispositivos móveis.
+
+Para tornar seu PWA instalável, ele precisa atender aos [critérios básicos](/install-criteria/). Assim que atender a esses critérios, você pode [promover a instalação](/promote-install/) em sua experiência de usuário em desktops e dispositivos móveis, incluindo iOS.
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="PWAs são instaláveis em qualquer lugar", width="800", height="227" %}
+
+Depois de começar a promover a instalação de seu PWA, você deve medir quantos usuários estão instalando seu PWA e como eles usam seu PWA.
+
+Para maximizar o número de usuários que instalam seu site, você pode querer [testar diferentes](https://pwa-book.awwwards.com/chapter-4) mensagens de promoção ("instale em um segundo" ou "adicione nosso atalho para acompanhar seu pedido", por exemplo), diferentes canais (faixa de cabeçalho, no feed) e tentar oferecê-lo em diferentes etapas do funil (na segunda página visitada ou após uma reserva).
+
+Para entender de onde seus usuários estão saindo e como melhorar a retenção, o funil de instalação pode ser [medido](https://pwa-book.awwwards.com/chapter-8) de quatro maneiras:
+
+- Número de usuários qualificados para instalar
+- Número de usuários que clicaram no prompt de instalação da IU
+- Número de usuários que aceitaram e recusaram a instalação
+- Número de usuários que instalaram com sucesso
+
+Você pode começar a promover a instalação do PWA para todos os usuários ou usar uma abordagem mais cautelosa, experimentando apenas com um pequeno grupo de usuários.
+
+Depois de alguns dias ou semanas, você já deve ter alguns dados para medir o impacto em seu negócio. Qual é o comportamento das pessoas provenientes do atalho instalado? Elas se envolvem mais, convertem mais?
+
+Para segmentar os usuários que instalaram seu PWA, rastreie o evento [`appinstalled`](/customize-install/#detect-install) e use o JavaScript para [verificar se os usuários estão no modo autônomo](/customize-install/#detect-launch-type) (indicando o uso do PWA instalado). Em seguida, use-os como variáveis ou dimensões para seu rastreamento analítico.
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="Meça o valor da instalação", width="800", height="253" %}
+
+O [estudo de caso da Weekendesk](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf) é interessante: eles propõem a instalação na segunda página visitada para maximizar a taxa de instalação e observam que os clientes que voltam por meio do ícone na tela inicial têm duas vezes mais chances de reservar uma estadia com eles.
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="Os usuários instalados tiveram uma taxa de conversão 2,5x maior", width="800", height="201" %}
+
+A instalação é uma ótima maneira de fazer as pessoas retornarem ao seu site e aumentar a fidelidade do cliente. Você também pode pensar em personalizar a experiência para esses usuários premium.
+
+Mesmo se você já tiver um aplicativo específico de plataforma, você pode testar para oferecer seu aplicativo primeiro e, em seguida, enviar o PWA mais tarde para aqueles que recusaram ou não se envolveram com a faixa de instalação do aplicativo. Alguns de seus usuários que estão "semiengajados" podem não atingir o limite para uma instalação baseada na loja de aplicativos. Esse coorte pode ser resolvido com a instalabilidade do PWA, que geralmente é percebida como mais leve e com menos atrito.
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="PWAs podem alcançar usuários semiengajados", width="800", height="229" %}
+
+### O impacto comercial de um site confiável {: #impacto-confiável }
+
+O jogo Chrome Dino, oferecido quando o usuário está off-line, é jogado mais de [270 milhões de vezes](https://www.blog.google/products/chrome/chrome-dino/) por mês. Este número impressionante mostra que a confiabilidade da rede é uma oportunidade considerável, especialmente em mercados com dados móveis não confiáveis ou caros, como Índia, Brasil, México ou Indonésia.
+
+Quando um aplicativo instalado de uma loja de aplicativos é iniciado, os usuários esperam que ele seja aberto, independentemente de estarem conectados à nternet. Os Progressive Web Apps não devem ser diferentes.
+
+No mínimo, uma página off-line simples que informa ao usuário que o aplicativo não está disponível sem uma conexão de rede deve ser proporcionada. Em seguida, considere levar a experiência um passo adiante, fornecendo algumas [funcionalidades que fazem sentido enquanto você estiver off-line](https://pwa-book.awwwards.com/chapter-6). Por exemplo, fornecer acesso a bilhetes ou cartões de embarque, listas de desejos off-line, informações de contato da central de atendimento, artigos ou receitas que o usuário viu recentemente, etc.
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="Seja útil, mesmo quando off-line", width="800", height="243" %}
+
+Depois de implementar uma [experiência de usuário confiável](https://pwa-book.awwwards.com/chapter-6), você pode querer medi-la. Quantos usuários ficam off-line, em quais locais geográficos, eles permanecem no site quando a rede está de volta?
+
+O uso off-line pode ser medido gravando pings analíticos quando o usuário fica [off-line ou on-line](https://pwa-book.awwwards.com/chapter-8). Informa quantos usuários continuam navegando no seu site depois que a rede volta.
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivago viu que 67% dos usuários que voltaram a ficar on-line continuaram navegando", width="800", height="272" %}
+
+O [estudo de caso do Trivago](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/) ilustra como isso pode impactar seus objetivos de negócio: para os usuários cujas sessões foram interrompidas por um período off-line (cerca de três por cento dos usuários), 67% dos que voltaram a ficar on-line continuaram navegando no site.
+
+### O impacto comercial de um site envolvente {: #impacto-envolvente }
+
+As notificações por push da web permitem que os usuários optem por atualizações oportunas de sites que amam e permitem que você os reconecte efetivamente com conteúdo personalizado e relevante.
+
+Mas tenha cuidado. Pedir aos usuários que se inscrevam para receber notificações da web assim que chegarem e sem expor os benefícios pode ser considerado spam e afetar negativamente sua experiência. Certifique-se de seguir as [práticas recomendadas](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) ao solicitar notificações e inspirar aceitação por meio de usos relevantes, como atrasos de trens, rastreamento de preços, produtos fora de estoque, etc.
+
+Tecnicamente, as [notificações por push](https://developers.google.com/web/fundamentals/push-notifications/) na web são executadas em segundo plano graças a um trabalho de serviço e costumam ser enviadas por um sistema criado para gerenciar campanhas (por exemplo, Firebase). Esse recurso traz grande valor de negócios para usuários de celular (Android) e desktop: aumenta as visitas repetidas e, consequentemente, as vendas e conversões.
+
+Para medir a eficácia de suas campanhas por push, você precisa medir todo o funil:
+
+- Número de usuários qualificados para notificações por push
+- Número de usuários que clicam em um prompt de IU de notificação personalizada
+- Número de usuários que concedem permissão de notificação por push
+- Número de usuários que recebem notificações por push
+- Número de usuários que se envolvem com notificações
+- Conversão e engajamento de usuários provenientes de uma notificação
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="Medir o valor das notificações por push da web", width="800", height="255" %}
+
+Existem muitos estudos de caso excelentes sobre notificações por push na web, como o [Carrefour, que multiplicou sua taxa de conversão por 4,5](https://useinsider.com/case-studies/carrefour/) ao envolver novamente os usuários com carrinhos abandonados.
+
+## O P no PWA: um lançamento progressivo, recurso por recurso {: #recurso-por-recurso }
+
+Os PWAs são sites modernos que se beneficiam do enorme alcance da web, combinado com todos os recursos amigáveis que os usuários adoram em aplicativos para Android/iOS/desktop. Eles alavancam um conjunto de melhores práticas e APIs da web modernas, que podem ser implementadas de forma independente, dependendo das especificidades e prioridades de seus negócios.
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="Inicie progressivamente seu PWA", width="800", height="253" %}
+
+Para acelerar a modernização do seu site e torná-lo um verdadeiro PWA, incentivamos que você seja ágil: lance recurso por recurso. Primeiro, pesquise com seus usuários quais recursos trariam mais valor para eles, depois entregue isso aos designers e desenvolvedores e, por fim, não se esqueça de medir com precisão quanto dinheiro extra seu PWA gerou.
diff --git a/src/site/content/pt/progressive-web-apps/index.md b/src/site/content/pt/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/pt/progressive-web-apps/install-criteria/index.md b/src/site/content/pt/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..da30d359afd
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,49 @@
+---
+layout: post
+title: O que é necessário para ser instalável?
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2-
+
+  Critérios de instalabilidade dos Progressive Web Apps.
+tags:
+  - progressive-web-apps
+---
+
+Os Progressive Web Apps (PWAs) são aplicativos modernos e de alta qualidade desenvolvidos com tecnologia da web. Os PWAs oferecem recursos semelhantes aos dos aplicativos para iOS/Android/desktop, são confiáveis mesmo em condições de rede instáveis e são instaláveis, tornando mais fácil para os usuários localizá-los e usá-los.
+
+A maioria dos usuários está familiarizada com a instalação de aplicativos e com os benefícios de uma experiência de instalação. Os aplicativos instalados aparecem nas áreas de inicialização do sistema operacional, como a pasta Aplicativos no Mac OS X, o menu Iniciar no Windows e a tela inicial no Android e iOS. Os aplicativos instalados também aparecem no seletor de atividades, nos mecanismos de pesquisa do dispositivo, como o Spotlight, e nas planilhas de compartilhamento de conteúdo.
+
+A maioria dos navegadores indica ao usuário que seu Progressive Web App (PWA) pode ser instalado quando atende a determinados critérios. Entre exemplos de indicadores, temos o botão Instalar na barra de endereço ou o item de menu Instalar no menu suspenso.
+
+<div class="switcher">
+  <figure id="browser-install-promo"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="Captura de tela do omnibox com indicador de instalação visível.", width="800", height="307" %} <figcaption> Divulgação de instalação fornecida pelo navegador (desktop) </figcaption></figure>
+  <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="Captura de tela da divulgação de instalação fornecida pelo navegador.", width="800", height="307" %} <figcaption> Divulgação de instalação fornecida pelo navegador (dispositivos móveis) </figcaption></figure>
+</div>
+
+Além disso, quando os critérios são atendidos, muitos navegadores disparam um evento `beforeinstallprompt`, permitindo que você forneça uma experiência de usuário personalizada dentro do aplicativo que acionará o fluxo de instalação no aplicativo.
+
+## Critérios de instalação {: #criteria}
+
+No Chrome, seu Progressive Web App deve atender aos seguintes critérios antes de disparar o evento `beforeinstallprompt` e mostrar a divulgação de instalação no navegador:
+
+- O aplicativo da web ainda não está instalado
+- Atende a uma heurística de engajamento do usuário
+- É fornecido por HTTPS
+- Inclui um [manifesto de aplicativo da web](/add-manifest/) que tenha:
+    - `short_name` ou `name`
+    - `icons` – deve incluir um ícone de 192 e de 512 pixels
+    - `start_url`
+    - `display` – deve ser `fullscreen` , `standalone` ou `minimal-ui`
+    - `prefer_related_applications` não deve estar presente ou ser `false`
+- Registra um trabalho de serviço com um manipulador `fetch`
+
+Outros navegadores têm critérios de instalação semelhantes, embora possa haver pequenas diferenças. Verifique os respectivos sites para conferir todos os detalhes:
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/progressive-web-apps#requirements)
+- [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
+- [Opera](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} No Android, se o manifesto do aplicativo da web incluir `related_applications` e `"prefer_related_applications": true` , o usuário será direcionado para a Google Play Store e [solicitado a instalar o aplicativo Android especificado](https://developer.chrome.com/blog/app-install-banners-native/). {% endAside %}
diff --git a/src/site/content/pt/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/pt/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..cea117bb91d
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Crie uma página substituta off-line
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: Aprenda a criar uma experiência off-line simples para seu aplicativo.
+tags:
+  - progressive-web-apps
+---
+
+O que os apps Google Assistant, Slack, Zoom e quase todos os outros apps específicos de plataforma em seu telefone ou computador têm em comum? Certo, eles sempre dão pelo menos *alguma coisa*. Mesmo quando você não tem uma conexão de rede, ainda pode abrir o app Assistant, entrar no Slack ou iniciar o Zoom. Você pode não conseguir nada particularmente significativo ou até não conseguir obter o que queria, mas pelo menos obtém *algo* e o aplicativo está no controle.
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="Aplicativo Google Assistant para celular off-line.", width="621", height="1344" %}<figcaption id="fig-assistant"> Google Assistant.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="App móvel Slack off-line.", width="621", height="1344" %}<figcaption id="fig-slack"> Slack.</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="Aplicativo móvel Zoom off-line.", width="621", height="1344" %}<figcaption id="fig-zoom"> Zoom. </figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">Com aplicativos específicos de plataforma, mesmo sem ter conexão de rede, você nunca recebe nada.</figcaption>
+
+
+
+Por outro lado, na web, via de regra você não obtém nada quando está off-line. O Chrome oferece o [jogo do dinossauro off-line](https://www.blog.google/products/chrome/chrome-dino/), mas é só isso.
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="Aplicativo Google Chrome para celular mostrando o jogo do dinossauro  off-line.", width="800", height="1731" %}<figcaption id="fig-chrome-ios"> Google Chrome para iOS. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="Aplicativo Google Chrome para desktop mostrando o jogo do dinossauro off-line.", width="800", height="607" %}<figcaption id="fig-chrome"> Google Chrome para macOS. </figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">Na web, sem ter uma conexão de rede, por padrão, você não recebe nada.</figcaption>
+
+
+
+## Uma página alternativa off-line com um trabalho de serviço personalizado
+
+Mas não tem que ser assim. Graças aos [trabalhos de serviço e à API Cache Storage](/service-workers-cache-storage/), você pode fornecer uma experiência off-line personalizada para seus usuários. Pode ser uma página de marca simples com a informação de que o usuário está off-line no momento, mas também pode ser uma solução mais criativa, como, por exemplo, o famoso [jogo do labirinto off-line do trivago](https://www.trivago.com/offline), com um **botão manual de reconexão** e uma contagem regressiva para a tentativa de reconexão automática.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="A página off-line do trivago com o seu labirinto off-line.", width="800", height="616" %} <figcaption> O labirinto off-line do trivago. </figcaption></figure>
+
+### Registrando o trabalho de serviço
+
+A maneira de fazer isso acontecer é por meio de um trabalho de serviço. Você pode registrar um trabalho de serviço na sua página principal, como no exemplo de código abaixo. Normalmente isso é feito depois que o aplicativo é carregado.
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### O código do trabalho de serviço
+
+O conteúdo do arquivo do trabalho de serviço real pode parecer um pouco complicado à primeira vista, mas os comentários no exemplo abaixo devem esclarecer as coisas. A ideia central é pré-armazenar em cache um arquivo denominado `offline.html` que só é veiculado em *solicitações de navegação com falha* e permitir que o navegador cuide de todos os outros casos:
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+// This variable is intentionally declared and unused.
+// Add a comment for your linter if you want:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
+```
+
+### A página de fallback off-line
+
+O arquivo `offline.html` é onde você pode ser criativo, adaptá-lo às suas necessidades e adicionar sua marca. O exemplo abaixo mostra o mínimo possível. Demonstra a recarga manual ao pressionar um botão, bem como a recarga automática com base no [evento `online`](https://developer.mozilla.org/docs/Web/API/Window/online_event) e na pesquisa regular do servidor.
+
+{% Aside 'gotchas' %} Você precisa armazenar em cache todos os recursos exigidos por sua página off-line. Uma maneira de lidar com isso é embutir tudo, de forma que a página off-line seja independente. Isso é o que eu faço no exemplo abaixo. {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>You are offline</h1>
+
+    <p>Click the button below to try reloading.</p>
+    <button type="button">⤾ Reload</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // Manual reload feature.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Listen to changes in the network state, reload when online.
+      // This handles the case when the device is completely offline.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Check if the server is responding and reload the page if it is.
+      // This handles the case when the device is online, but the server
+      // is offline or misbehaving.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Verify we get a valid response from the server
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // Unable to connect to the server, ignore.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## Demonstração
+
+Você pode ver a página de fallback off-line em ação na [demonstração](https://offline-fallback-demo.glitch.me/index.html) incorporada abaixo. Se tiver interesse, explore o [código-fonte](https://glitch.com/edit/#!/offline-fallback-demo) no Glitch.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### Observação na lateral sobre como tornar seu aplicativo instalável
+
+Agora que seu site tem uma página de fallback off-line, você pode estar se perguntando sobre as próximas etapas. Para tornar seu aplicativo instalável, você precisa adicionar um [manifesto de aplicativo da web](/add-manifest/) e, opcionalmente, criar uma [estratégia de instalação](/define-install-strategy/).
+
+### Observação na lateral sobre a exibição de uma página substituta off-line com o Workbox.js
+
+Você deve ter ouvido falar do [Workbox.js](https://developer.chrome.com/docs/workbox/). Workbox.js é um conjunto de bibliotecas de JavaScript para adicionar suporte off-line a aplicativos da web. Se você preferir escrever menos código de trabalho de serviço, pode usar a receita do Workbox.js apenas para uma [página off-line](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only).
+
+A seguir, aprenda [a definir uma estratégia de instalação](/define-install-strategy/) para seu aplicativo.
diff --git a/src/site/content/pt/progressive-web-apps/promote-install/index.md b/src/site/content/pt/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..2f271bb42eb
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Padrões para promover a instalação de PWAs
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: |2-
+
+  Como promover a instalação de Progressive Web Apps e as práticas recomendadas.
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+A instalação do Progressive Web App (PWA) pode facilitar a descoberta e o uso pelos usuários. Mesmo com a promoção no navegador, alguns usuários não percebem que podem instalar um PWA, então pode ser útil fornecer uma experiência no app para promover e habilitar a instalação do seu PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="Captura de tela de um botão de instação simples no PWA.", width="800", height="368" %} <figcaption> Um botão de instalação simples fornecido no seu PWA.</figcaption></figure>
+
+Esta lista não é exaustiva, mas oferece um ponto de partida para as diversas maneiras de promover a instalação do seu PWA. Independentemente do padrão, *ou padrões*, que você usa, todos eles levam ao mesmo código que aciona o fluxo de instalação, documentado em [Como fornecer sua própria experiência de instalação no app](/customize-install/).
+
+## Práticas recomendadas para promover a instalação do PWA {: #best-practices }
+
+Algumas práticas recomendadas são aplicáveis independentemente dos padrões promocionais usados no seu site.
+
+- Mantenha as promoções fora do fluxo das jornadas do usuário. Por exemplo, em uma página de login do PWA, coloque a call to action (chamada para ação) abaixo do formulário de login e do botão de envio. O uso intrusivo de padrões promocionais reduz a usabilidade do PWA e afeta negativamente as métricas de engajamento.
+- Inclua a capacidade de dispensar ou recusar a promoção. Lembre-se dessa preferência do usuário e apenas exiba a promoção novamente se houver uma mudança na relação do usuário com seu conteúdo, como o login ou a finalização de uma compra.
+- Combine mais de uma dessas técnicas em diferentes partes do PWA, mas tome cuidado para não sobrecarregar ou irritar seu usuário com a promoção da instalação.
+- Mostre a promoção somente **depois** que o [evento `beforeinstallprompt`](/customize-install/#beforeinstallprompt) for disparado.
+
+## Promoção automática no navegador {: #browser-promotion }
+
+Quando [determinados critérios](/install-criteria/) são atendidos, a maioria dos navegadores indica automaticamente ao usuário que o Progressive Web App pode ser instalado. Por exemplo, o Chrome para desktop mostra um botão de instalação na omnibox.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="Captura de tela da omnibox com o indicador de instalação visível.", width="800", height="307" %} <figcaption> Promoção de instalação fornecida pelo navegador (desktop)</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="Captura de tela da promoção de instalação fornecida pelo navegador.", width="800", height="307" %} <figcaption> Promoção de instalação fornecida pelo navegador (dispositivos móveis)</figcaption></figure>
+</div>
+
+O Chrome para Android mostrará uma minibarra de informações ao usuário. Isso possa ser evitado ao chamar `preventDefault()` no evento `beforeinstallprompt`. Se você não chamar `preventDefault()`, o banner será mostrado na primeira vez que um usuário acessar seu site quando atender aos critérios de instalação no Android e, depois, novamente após cerca de 90 dias.
+
+## Padrões promocionais da IU do app {: #app-ui-patterns }
+
+Os padrões promocionais da IU (interface do usuário) do app podem ser usados para quase qualquer tipo de PWA e aparecem na IU do app, como na navegação do site e nos banners. Como acontece com qualquer outro tipo de padrão promocional, é importante estar ciente do contexto do usuário para minimizar a interrupção da jornada do usuário.
+
+Os sites que consideram o momento em que acionam a IU da promoção alcançam um número maior de instalações e evitam as interferências nas jornadas dos usuários que não estão interessados.
+
+### Botão de instalação simples {: #simple-button }
+
+A experiência do usuário mais simples possível é incluir um botão "Instalar" ou "Fazer download do app" em um local apropriado no conteúdo da Web. Verifique se o botão não bloqueia outras funcionalidades importantes e não atrapalha a jornada do usuário no app.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="Botão de instalação personalizado", width="800", height="448" %} <figcaption> Botão de instalação simples </figcaption></figure>
+
+### Cabeçalho fixo {: #header }
+
+Esse botão de instalação faz parte do cabeçalho do seu site. O conteúdo do cabeçalho geralmente inclui também a marca do site, como um logotipo, e o menu hambúrguer. Os cabeçalhos podem ser `position:fixed` ou não, dependendo da funcionalidade do seu site e das necessidades do usuário.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="Botão de instalação personalizado no cabeçalho", width="800", height="448" %} <figcaption> Botão de instalação personalizado no cabeçalho </figcaption></figure>
+
+Quando usado de maneira apropriada, a promoção da instalação do PWA no cabeçalho do site é uma ótima maneira de facilitar o retorno dos clientes fiéis à experiência. Os pixels no cabeçalho do PWA são preciosos. Portanto, confira se a call to action tem o tamanho adequado, apresenta maior importância que os outros conteúdos possíveis no cabeçalho e não é intrusiva.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="Botão de instalação personalizado no cabeçalho", width="800", height="430" %} <figcaption> Botão de instalação personalizado no cabeçalho </figcaption></figure>
+
+Faça o seguinte:
+
+- Não mostre o botão de instalação, a menos que `beforeinstallprompt` tenha sido disparado.
+- Avalie o valor do caso de uso instalado para seus usuários. Considere a segmentação seletiva para apresentar sua promoção apenas para os usuários que provavelmente se beneficiarão com ela.
+- Use o espaço precioso do cabeçalho de forma eficiente. Considere o que mais seria útil oferecer ao usuário no cabeçalho e avalie a prioridade da promoção da instalação em relação a outras opções.
+
+### Menu de navegação {: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="Botão de instalação personalizado no menu de navegação", width="800", height="1117" %} <figcaption> Adicione uma promoção ou um botão de instalação em um menu de navegação retrátil. </figcaption></figure>
+
+O menu de navegação é um ótimo lugar para promover a instalação do seu app, pois a abertura do menu pelos usuários sinaliza o engajamento com a experiência.
+
+Faça o seguinte:
+
+- Evite interferir em conteúdo de navegação importante. Coloque a promoção da instalação do PWA abaixo dos outros itens no menu.
+- Ofereça um argumento curto e relevante sobre o motivo pelo qual o usuário se beneficiaria com a instalação do PWA.
+
+### Página de destino {: #landing }
+
+O objetivo de uma página de destino é promover seus produtos e serviços. Por isso, é um lugar onde é apropriado promover os benefícios da instalação do seu PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="Solicitação de instalação personalizada na página de destino", width="800", height="1117" %} <figcaption> Solicitação de instalação personalizada na página de destino </figcaption></figure>
+
+Primeiro, explique a proposta de valor do seu site e, em seguida, informe aos visitantes as vantagens da instalação.
+
+Faça o seguinte:
+
+- Apele para os recursos que mais importam para seus visitantes e enfatize as palavras-chave que talvez os tenham levado à página de destino.
+- Inclua uma promoção de instalação e call to action atrativas, mas somente depois de deixar clara a proposta de valor. Afinal, essa é sua página de destino.
+- Considere adicionar uma promoção de instalação na parte do app em que os usuários passam a maior parte do tempo.
+
+### Banner de instalação {: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="Banner de instalação personalizado no topo da página.", width="800", height="1000" %} <figcaption> Um banner dispensável no topo da página. </figcaption></figure>
+
+A maioria dos usuários já se deparou com banners de instalação em experiências de dispositivos móveis e está familiarizada com as interações oferecidas por um banner. Os banners devem ser usados com cuidado porque podem incomodar o usuário.
+
+Faça o seguinte:
+
+- Espere o usuário demonstrar interesse no seu site antes de exibir um banner. Se o usuário dispensar o banner, não o exiba novamente, a menos que o usuário acione um evento de conversão que indique um nível mais alto de engajamento com o conteúdo, como uma compra em um site de e-commerce ou a inscrição em uma conta.
+- Explique brevemente o valor da instalação do PWA no banner. Por exemplo, você pode distinguir a instalação do PWA de um app iOS/Android ao mencionar que ele quase não usa o armazenamento no dispositivo do usuário ou que será instalado instantaneamente sem o redirecionamento para a loja.
+
+### IU temporária {: #temporary-ui }
+
+A IU temporária, como o padrão de design [Snackbar](https://material.io/components/snackbars/), notifica o usuário e permite que ele conclua uma ação com facilidade. Nesse caso, instalar o app. Quando usados de maneira adequada, esses tipos de padrões de IU não interrompem o fluxo do usuário e, em geral, são dispensados automaticamente quando ignorados pelo usuário.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="Banner de instalação personalizado como snackbar.", width="800", height="448" %} <figcaption> Snackbar dispensável indicando que é possível instalar o PWA. </figcaption></figure>
+
+Mostre o snackbar depois de alguns engajamentos e interações com seu app. Se ele aparecer no carregamento da página ou fora de contexto, pode não ser notado ou causar sobrecarga cognitiva. Quando isso acontece, os usuários simplesmente ignoram tudo o que veem. Além disso, lembre-se de que os novos usuários no seu site podem não estar prontos para instalar o PWA. Portanto, é melhor esperar até que você tenha fortes sinais de interesse do usuário antes de usar esse padrão, como visitas repetidas, o login ou um evento de conversão semelhante.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="Banner de instalação personalizado como snackbar.", width="800", height="424" %} <figcaption> Um snackbar dispensável indicando que é possível instalar o PWA. </figcaption></figure>
+
+Faça o seguinte:
+
+- Mostre o snackbar de 4 a 7 segundos para dar aos usuários tempo suficiente para ver e reagir, sem causar interrupções.
+- Evite a exibição em cima de outra IU temporária, como banners.
+- Aguarde até que você tenha fortes sinais de interesse do usuário antes de usar esse padrão, como visitas repetidas, o login ou um evento de conversão semelhante.
+
+## Depois da conversão
+
+Imediatamente após um evento de conversão do usuário, como uma compra em um site de e-commerce, é uma excelente oportunidade para promover a instalação do seu PWA. O usuário está claramente engajado com o conteúdo e uma conversão geralmente indica que ele retornará para interagir com seus serviços.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="Captura de tela da promoção da instalação após a conversão.", width="800", height="448" %} <figcaption> Promoção da instalação depois que o usuário concluiu uma compra. </figcaption></figure>
+
+### Jornada de reserva ou finalização da compra {: #journey }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="Promoção da instalação após a jornada do usuário.", width="800", height="1419" %} <figcaption> Promoção da instalação após a jornada do usuário. </figcaption></figure>
+
+Mostre uma promoção de instalação durante ou após uma jornada sequencial, como aquelas que são típicas de reservas ou fluxos de finalização da compra. Ao mostrar a promoção depois que o usuário tiver concluído a jornada, isso pode fazer com que ela ganhe mais destaque.
+
+Faça o seguinte:
+
+- Inclua uma call-to-action relevante. Quais usuários se beneficiarão com a instalação do seu app e por quê? Como isso é relevante para a jornada que estão empreendendo atualmente?
+- Caso sua marca tenha ofertas exclusivas para usuários de apps instalados, mencione aqui.
+- Mantenha a promoção fora do caminho nas próximas etapas ou você pode afetar negativamente as taxas de conclusão das jornadas. No exemplo de e-commerce acima, observe como a call to action principal para finalizar a compra está acima da promoção de instalação do app.
+
+### Fluxo de inscrição, login ou logout {: #sign-up}
+
+Essa promoção é um caso especial de padrão promocional de [jornada](#journey) em que o cartão da promoção pode ganhar mais destaque.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="Botão de instalação personalizado na página de inscrição.", width="800", height="1117" %} <figcaption> Botão de instalação personalizado na página de inscrição. </figcaption></figure>
+
+Essas páginas geralmente são visualizadas apenas por usuários engajados, onde a proposta de valor do PWA já foi estabelecida. Com frequência, também não há outros conteúdos úteis para colocar nessas páginas. Como resultado, é menos intrusivo adicionar uma call to action maior, desde que não atrapalhe.
+
+Faça o seguinte:
+
+- Evite interromper a jornada do usuário dentro do formulário de inscrição. Se for um processo de várias etapas, convém esperar até que o usuário conclua a jornada.
+- Promova os recursos mais relevantes para um usuário inscrito.
+- Considere adicionar uma promoção de instalação adicional nas áreas de usuários logados do seu app.
+
+## Padrões promocionais inline
+
+As técnicas promocionais inline combinam as promoções com o conteúdo do site. Geralmente, elas são mais sutis do que a promoção na IU do app, que tem vantagens e desvantagens. A promoção deve se destacar o suficiente para que seja notada pelos usuários interessados, mas não a ponto de prejudicar a qualidade da experiência.
+
+### In-feed {: #in-feed }
+
+Uma promoção de instalação in-feed aparece entre notícias ou outras listas de cartões de informações no PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="Promoção de instalação no feed do conteúdo.", width="800", height="1000" %} <figcaption> Promoção de instalação no feed do conteúdo. </figcaption></figure>
+
+O objetivo é mostrar aos usuários como acessar o conteúdo que estão apreciando de uma forma mais conveniente. Concentre-se em promover recursos e funcionalidades que serão úteis para os usuários.
+
+Faça o seguinte:
+
+- Limite a frequência das promoções para evitar incomodar os usuários.
+- Forneça aos usuários a capacidade de dispensar as promoções.
+- Lembre-se da preferência do usuário quando ele escolher dispensar.
diff --git a/src/site/content/pt/progressive-web-apps/pwa-checklist/index.md b/src/site/content/pt/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..cd2f58cf700
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,268 @@
+---
+layout: post
+title: O que torna um Progressive Web App bom?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: |2
+
+  O que torna um Progressive Web App bom ou ótimo?
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+Os Progressive Web Apps (PWA) são desenvolvidos e aprimorados com APIs modernas para fornecer recursos aprimorados, confiabilidade e capacidade de instalação, ao mesmo tempo em que alcançam *qualquer pessoa, em qualquer lugar, em qualquer dispositivo* com uma única base de código. Para ajudar você a criar a melhor experiência possível, use as listas de verificação e recomendações [básicas](#core) e [ideais](#optimal).
+
+## Lista de verificação do Core Progressive Web App {: #core}
+
+A lista de verificação principal do Progressive Web App descreve o que torna um aplicativo instalável e utilizável por todos os usuários, independentemente do tamanho ou tipo de entrada.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Começa rápido, permanece rápido
+
+O desempenho tem um papel significativo no sucesso de qualquer experiência online, pois os sites de alto desempenho envolvem e retêm os usuários melhor do que os de baixo desempenho. Os sites devem se concentrar na otimização de métricas de desempenho centradas no usuário.
+
+{% endDetailsSummary %}
+
+O desempenho tem um papel significativo no sucesso de qualquer experiência online, pois os sites de alto desempenho envolvem e retêm os usuários melhor do que os de baixo desempenho. Os sites devem se concentrar na otimização de métricas de desempenho centradas no usuário.
+
+#### Por quê
+
+A velocidade é crítica para fazer os usuários *usarem* seu aplicativo. Na verdade, à medida que o tempo de carregamento da página vai de um a dez segundos, a probabilidade de um usuário sair aumenta em 123%. O evento `load` não é o único aspecto importante para um bom desempenho. Os usuários nunca devem se perguntar se a interação (por exemplo, clicar em um botão) foi registrada ou não. A rolagem e a animação devem ser fluidas. O desempenho afeta toda a sua experiência, desde como os usuários percebem seu aplicativo até como ele realmente funciona.
+
+Embora todos os aplicativos tenham necessidades diferentes, as auditorias de desempenho no Lighthouse são baseadas no [modelo de desempenho centrado no usuário RAIL](/rail/), e uma pontuação alta nessas auditorias aumentará a chance de que seus usuários tenham uma experiência agradável. Você também pode usar o [PageSpeed Insights](https://pagespeed.web.dev/) ou o [Relatório de experiência do usuário do Chrome](https://developer.chrome.com/docs/crux/) para obter dados de desempenho do mundo real para seu aplicativo da web.
+
+#### Como
+
+Siga nosso [guia sobre tempos de carregamento curtos](/fast/) para aprender como fazer seu PWA começar rápido e permanecer rápido.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Funciona em qualquer navegador
+
+Os usuários podem usar qualquer navegador que escolherem para acessar seu aplicativo da web antes de instalá-lo.
+
+{% endDetailsSummary%}
+
+Os usuários podem usar qualquer navegador que escolherem para acessar seu aplicativo da web antes de instalá-lo.
+
+#### Por quê
+
+Os Progressive Web Apps são, em primeiro lugar, aplicativos da web e, portanto, eles precisam funcionar em vários navegadores, não apenas em um.
+
+Uma maneira eficaz de fazer isso é, nas palavras de Jeremy Keith em [Resilient Web Design](https://resilientwebdesign.com/) (Design web resiliente), identificar a funcionalidade central, disponibilizar essa funcionalidade usando a tecnologia mais simples possível e, em seguida, aprimorar a experiência quando possível. Em muitos casos, isso significa começar apenas com HTML para criar a funcionalidade principal e aprimorar a experiência do usuário com CSS e JavaScript para criar uma experiência mais envolvente.
+
+Vejamos o envio de formulário, por exemplo. A maneira mais simples de implementar é um formulário HTML que envia uma solicitação `POST`. Depois de criar isso, você pode aprimorar a experiência com JavaScript para fazer a validação do formulário e enviá-lo via AJAX, melhorando a experiência para os usuários que podem usar essa tecnologia.
+
+Considere que seus usuários usarão o site em uma variedade de dispositivos e navegadores. Você não pode simplesmente visar a extremidade superior do espectro. Ao usar a detecção de recursos, você poderá fornecer uma experiência utilizável para a mais ampla gama de possíveis usuários, incluindo aqueles que usam navegadores e dispositivos que podem não existir hoje.
+
+#### Como
+
+O [Resilient Web Design](https://resilientwebdesign.com/) de Jeremy Keith é um excelente recurso que descreve como pensar sobre web design nesta metodologia progressiva para vários navegadores.
+
+#### Leitura adicional
+
+- [Understanding Progressive Enhancement](https://alistapart.com/article/understandingprogressiveenhancement/) (Entendendo a melhoria progressiva) de A List Apart (Uma lista à parte) é uma boa introdução ao tópico.
+- [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) (Aprimoramento progressivo: o que é e como usar?) da Smashing Magazine oferece uma introdução prática e links para tópicos mais avançados.
+- O MDN tem um artigo intitulado [Implementing feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) (Implementação de detecção de recursos) que fala sobre como detectar um recurso fazendo uma consulta direta a ele.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Responsivo em qualquer tamanho de tela
+
+Os usuários podem usar seu PWA em tela de qualquer tamanho, e todo o conteúdo fica disponível em qualquer tamanho de visor.
+
+{% endDetailsSummary %}
+
+Os usuários podem usar seu PWA em tela de qualquer tamanho, e todo o conteúdo fica disponível em qualquer tamanho de visor.
+
+#### Por quê
+
+Os dispositivos têm diversos tamanhos diferentes, e os usuários podem usar seu aplicativo em uma variedade de tamanhos, até no mesmo dispositivo. Portanto, é fundamental garantir que seu conteúdo não apenas se encaixe no visor, mas que todos os recursos e conteúdo do site possam ser usados em todos os tamanhos de visor.
+
+As tarefas que os usuários desejam concluir e o conteúdo que desejam acessar não mudam com o tamanho do visor. O conteúdo pode ser reorganizado em diferentes tamanhos de visor, e tudo deve estar lá, de uma forma ou de outra. Na verdade, como Luke Wroblewski afirma em seu livro Mobile First (Mobilidade em primeiro lugar), começar pequeno e ir crescendo, em vez do contrário, pode melhorar muito o design de um site:
+
+> Os dispositivos móveis exigem que as equipes de desenvolvimento de software se concentrem apenas nos dados e ações mais importantes de um aplicativo. Simplesmente não há espaço em uma tela de 320 por 480 pixels para elementos extras e desnecessários. É preciso priorizar.
+
+#### Como
+
+Existem muitos recursos sobre design responsivo, incluindo o [artigo original de Ethan Marcotte](https://alistapart.com/article/responsive-web-design/), uma [coleção de conceitos importantes](https://snugug.com/musings/principles-responsive-web-design/) relacionados a ele, bem como livros e palestras em abundância. Para restringir essa discussão aos aspectos de conteúdo do design responsivo, você pode mergulhar no [design que prioriza o conteúdo](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c) e nos [layouts responsivos começando primeiro pelo conteúdo](https://alistapart.com/article/content-out-layout/). Por fim, embora seja voltado para dispositivos móveis, as lições em [Seven Deadly Mobile Myths](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca) (Sete mitos mortais sobre mobilidade), de Josh Clark, são tão relevantes para visualizações de sites responsivos de pequeno porte quanto para mobilidade.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Fornece uma página offline personalizada
+
+Quando os usuários estão offline, mantê-los em seu PWA oferece uma experiência mais transparente do que voltar para a página offline padrão do navegador.
+
+{% endDetailsSummary %}
+
+Quando os usuários estão offline, mantê-los em seu PWA oferece uma experiência mais transparente do que voltar para a página offline padrão do navegador.
+
+#### Por quê
+
+Os usuários esperam que os aplicativos instalados funcionem independentemente de seu status de conexão. O aplicativo de uma plataforma específica nunca mostra uma página em branco quando está offline, e um Progressive Web App nunca deve mostrar a página offline padrão do navegador. Fornecer uma experiência offline personalizada, tanto quando um usuário navega para uma URL que não foi armazenada em cache quanto quando um usuário tenta usar um recurso que requer conexão, ajuda a sentir que sua experiência na web faz parte do dispositivo no qual ela está sendo executada.
+
+#### Como
+
+Durante o evento `install` de um trabalho de serviço, você pode pré-armazenar em cache uma página offline personalizada para uso posterior. Se um usuário ficar offline, você pode responder com a página offline personalizada pré-armazenada em cache. Acompanhe nosso [exemplo de página offline](https://googlechrome.github.io/samples/service-worker/custom-offline-page/) personalizada para ver um exemplo disso em ação e aprender como implementar por contra própria.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+É instalável
+
+Os usuários que instalam ou adicionam aplicativos aos seus dispositivos tendem a se envolver mais com esses aplicativos.
+
+{% endDetailsSummary %}
+
+Os usuários que instalam ou adicionam aplicativos aos seus dispositivos tendem a se envolver mais com esses aplicativos.
+
+#### Por quê
+
+Instalar um Progressive Web App permite que ele se pareça e se comporte como todos os outros aplicativos instalados. Ele é iniciado do mesmo lugar em que os usuários iniciam outros aplicativos. Ele é executado em sua própria janela de aplicativo, separada do navegador, e aparece na lista de tarefas, assim como outros aplicativos.
+
+Por que você deseja que um usuário instale seu PWA? Pelo mesmo motivo que você deseja que um usuário instale seu aplicativo de uma loja de aplicativos. Os usuários que instalam seus aplicativos são seu público mais engajado e têm melhores métricas de engajamento do que os visitantes típicos, geralmente em paridade com os usuários de aplicativos em dispositivos móveis. Essas métricas incluem mais visitas recorrentes, tempos mais longos em seu site e taxas de conversão mais altas.
+
+#### Como
+
+Você pode seguir nosso [guia de capacidade de instalação](/customize-install/) para aprender como tornar seu PWA instalável, como testar para ver se ele pode ser instalado e tentar fazer por conta própria.
+
+{% endDetails %}
+
+## Lista de verificação do Progressive Web App ideal {: #optimal}
+
+Para criar um Progressive Web App verdadeiramente excelente, que pareça o melhor da categoria, você precisa de mais do que apenas a lista de verificação básica. A lista de verificação do Progressive Web App ideal serve para fazer com que seu PWA pareça parte do dispositivo no qual está sendo executado, aproveitando as vantagens do que torna a web poderosa.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Oferece uma experiência offline
+
+Quando a conectividade não é estritamente necessária, seu aplicativo funciona tanto offline quanto online.
+
+{% endDetailsSummary %}
+
+Quando a conectividade não é estritamente necessária, seu aplicativo funciona tanto offline quanto online.
+
+#### Por quê
+
+Além de fornecer uma página offline personalizada, os usuários esperam que os Progressive Web Apps possam ser usados offline. Por exemplo, aplicativos de viagens e companhias aéreas devem ter detalhes da viagem e cartões de embarque facilmente disponíveis quando offline. Aplicativos de música, vídeo e podcast devem permitir a reprodução offline. Aplicativos de notícias e redes sociais devem armazenar em cache o conteúdo recente para que os usuários possam lê-lo quando estiverem offline. Os usuários também esperam permanecer autenticados quando estiverem offline, então projete o PWA para autenticação offline. Um PWA offline oferece aos usuários uma verdadeira experiência semelhante à de um aplicativo.
+
+#### Como
+
+Após determinar quais recursos seus usuários esperam que funcionem offline, você precisará tornar seu conteúdo disponível e adaptável a contextos offline. Além disso, você pode usar [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb), um sistema de armazenamento NoSQL no navegador, para armazenar e recuperar dados, e a [sincronização em segundo plano](https://developer.chrome.com/blog/background-sync/) para permitir que os usuários realizem ações enquanto estiverem offline e para adiar as comunicações do servidor até que o usuário volte a ter uma conexão estável. Você também pode usar trabalhos de serviço para armazenar outros tipos de conteúdo, como imagens, arquivos de vídeo e arquivos de áudio para uso offline, bem como usá-los para implementar [sessões seguras e de longa duração](https://developer.chrome.com/blog/2-cookie-handoff/) para manter os usuários autenticados. Da perspectiva de experiência do usuário, você pode usar [telas esqueleto](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a), que dão aos usuários uma percepção de velocidade e conteúdo durante o carregamento, que pode então voltar para o conteúdo em cache ou um indicador offline, conforme necessário.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+É totalmente acessível
+
+Todas as interações do usuário atendem aos requisitos de acessibilidade do [WCAG 2.0.](https://www.w3.org/TR/WCAG20/)
+
+{% endDetailsSummary %}
+
+Todas as interações do usuário atendem aos requisitos de acessibilidade do [WCAG 2.0.](https://www.w3.org/TR/WCAG20/)
+
+#### Por quê
+
+A maioria das pessoas, em algum momento da vida, desejará aproveitar as vantagens do seu PWA de uma forma que seja coberta pelos requisitos de acessibilidade do [WCAG 2.0.](https://www.w3.org/TR/WCAG20/) Existe um amplo espectro da capacidade dos humanos de interagir e compreender seu PWA, e as necessidades podem ser temporárias ou permanentes. Ao tornar seu PWA acessível, você garante que ele possa ser usado por todos.
+
+#### Como
+
+A [Introdução à Acessibilidade Web](https://www.w3.org/WAI/fundamentals/accessibility-intro/) do W3C é um bom lugar para começar. A maioria dos testes de acessibilidade deve ser feita manualmente. Ferramentas como as auditorias de [Acessibilidade](https://developer.chrome.com/docs/lighthouse/accessibility/) do Lighthouse, [axe](https://github.com/dequelabs/axe-core) e [Accessibility Insights](https://accessibilityinsights.io/) podem ajudar a automatizar alguns testes de acessibilidade. Também é importante usar elementos semanticamente corretos em vez de recriar esses elementos por conta própria, por exemplo, os elementos `a` e `button`. Isso garante que, quando você precisar criar uma funcionalidade mais avançada, as expectativas de acessibilidade sejam atendidas (como quando usar setas em vez de tab). A [A11Y Nutrition Cards](https://accessibilityinsights.io/) tem excelentes conselhos sobre isso para alguns componentes comuns.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Pode ser descoberto por meio de pesquisa
+
+Seu PWA pode ser facilmente [descoberto por meio de pesquisa](/discoverable/).
+
+{% endDetailsSummary %}
+
+Seu PWA pode ser facilmente [descoberto por meio de pesquisa](/discoverable/).
+
+#### Por quê
+
+Uma das maiores vantagens da web é a capacidade de descobrir sites e aplicativos por meio de pesquisa. Na verdade, [mais da metade](https://www.brightedge.com/resources/research-reports/channel_share) de todo o tráfego do site vem da pesquisa orgânica. Certificar-se de que existem URLs canônicos para o conteúdo e de que os mecanismos de pesquisa consigam indexar seu site é fundamental para que os usuários encontrem seu PWA. Isso é especialmente verdadeiro ao adotar a renderização no cliente.
+
+#### Como
+
+Comece garantindo que cada URL tenha um título descritivo exclusivo e uma descrição meta. Em seguida, você pode usar o [Google Search Console](https://search.google.com/search-console/about) e as [auditorias de otimização de mecanismo de pesquisa](https://developer.chrome.com/docs/lighthouse/seo/) do Lighthouse para ajudar a depurar e corrigir problemas de descoberta em seu PWA. Você também pode usar as ferramentas para webmasters do [Bing](https://www.bing.com/toolbox/webmaster) ou [Yandex](https://webmaster.yandex.com/welcome/) e considerar a inclusão de [dados estruturados](https://goo.gle/search-gallery) por meio de esquemas do [Schema.org](https://schema.org/) em seu PWA.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Funciona com qualquer tipo de entrada
+
+Seu PWA pode ser usado da mesma forma com um mouse, teclado, caneta ou toque.
+
+{% endDetailsSummary %}
+
+Seu PWA pode ser usado da mesma forma com um mouse, teclado, caneta ou toque.
+
+#### Por quê
+
+Os dispositivos oferecem vários métodos de entrada, e os usuários devem ser capazes de alternar facilmente entre eles enquanto usam seu aplicativo. Outro aspecto tão importante quanto é que os métodos de entrada não devem depender do tamanho da tela, ou seja, visores grandes precisam oferecer suporte ao toque, e visores pequenos precisam oferecer suporte a teclados e mouses. Garanta da melhor forma possível que seu aplicativo e todos os recursos ofereçam suporte ao uso de qualquer método de entrada que o usuário decida usar. Quando apropriado, você também deve aprimorar as experiências para permitir controles específicos de entrada (como puxar para atualizar).
+
+#### Como
+
+A [API Pointer Events](https://developer.chrome.com/blog/pointer-events/) fornece uma interface unificada para trabalhar com várias opções de entrada e é especialmente boa para adicionar suporte à caneta. Para oferecer suporte ao toque e teclado, você deve usar os elementos semânticos corretos (âncoras, botões, controles de formulário, etc.), e não reconstruí-los com HTML não semântico (o que é bom para acessibilidade). Ao incluir interações que são ativadas ao passar o mouse, garanta que elas também possam ser ativadas ao clicar ou tocar.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Fornece contexto para solicitações de permissão
+
+Ao pedir permissão para usar APIs avançadas, forneça contexto e peça permissão somente quando a API for necessária.
+
+{% endDetailsSummary %}
+
+Ao pedir permissão para usar APIs avançadas, forneça contexto e peça permissão somente quando a API for necessária.
+
+#### Por quê
+
+As APIs que acionam uma janela de permissão, como notificações, geolocalização e credenciais, são projetadas intencionalmente para perturbar o usuário porque tendem a estar relacionadas a uma funcionalidade avançada que requer aceitação. Acionar essas janelas sem contexto adicional, como no carregamento da página, deixa os usuários menos propensos a aceitar essas permissões e mais propensos a desconfiar delas no futuro. Em vez disso, só acione essas janelas após fornecer ao usuário uma justificativa contextualizada do motivo pelo qual você precisa dessa permissão.
+
+#### Como
+
+Os artigos [Permission UX](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) (Experiência de usuário com permissões) e [The Right Ways to Ask Users for Permissions](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27) (As maneiras certas de solicitar permissões aos usuários) do UX Planet são bons recursos para entender como criar janelas de permissão que, embora focadas em dispositivos móveis, se aplicam a todos os PWAs.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Segue as melhores práticas para códigos íntegros
+
+Manter sua base de código íntegra torna mais fácil cumprir seus objetivos e fornecer novos recursos.
+
+{% endDetailsSummary %}
+
+Manter sua base de código íntegra torna mais fácil cumprir seus objetivos e fornecer novos recursos.
+
+#### Por quê
+
+A construção de um aplicativo da web moderno envolve muita coisa. Manter seu aplicativo atualizado e sua base de código íntegra facilita o fornecimento de novos recursos que atendam às outras metas estabelecidas na lista de verificação.
+
+#### Como
+
+Há uma série de verificações de alta prioridade para garantir uma base de código íntegra: evitar o uso de bibliotecas com vulnerabilidades conhecidas, garantir que você não esteja usando APIs obsoletas, remover antipadrões da web de sua base de código (como usar `document.write()` ou ter ouvintes de eventos de rolagem não passivos) e até mesmo programar defensivamente para garantir que seu PWA não fique inutilizável se as análises ou outras bibliotecas de terceiros não forem carregadas. Considere exigir análise de código estático, como lint, bem como testes automatizados, em vários navegadores e canais de lançamento. Essas técnicas podem ajudar a detectar erros antes da entrada em produção.
+
+{% endDetails %}
diff --git a/src/site/content/pt/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/pt/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
new file mode 100644
index 00000000000..8363281e990
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -0,0 +1,111 @@
+---
+layout: post
+title: Como usar um PWA em seu aplicativo Android
+authors:
+  - andreban
+date: 2020-03-19
+updated: 2021-12-06
+description: |2-
+
+  Como abrir um Progressive Web App em um aplicativo Android.
+tags:
+  - progressive-web-apps
+---
+
+## Inicie um PWA em um aplicativo Android
+
+Os [Progressive Web Apps](/progressive-web-apps/) (PWA) são aplicativos da web que usam recursos semelhantes aos de aplicativos para criar experiências de alta qualidade que são rápidas, confiáveis e atraentes.
+
+A web tem um alcance incrível e oferece maneiras poderosas para os usuários descobrirem novas experiências. Mas os usuários também estão acostumados a pesquisar aplicativos em sua loja de sistema operacional. Em muitos casos, esses usuários já estão familiarizados com a marca ou serviço que procuram e têm um alto nível de intencionalidade que resulta em métricas de engajamento superiores à média.
+
+A Play Store é uma loja de aplicativos Android, e os desenvolvedores muitas vezes querem abrir seus Progressive Web Apps a partir de seus aplicativos Android.
+
+A Atividade da Web Confiável é um padrão aberto que permite aos navegadores fornecer um contêiner totalmente compatível com a plataforma da web que renderiza PWAs dentro de um aplicativo Android. O recurso está disponível no [Chrome](https://play.google.com/store/apps/details?id=com.android.chrome) e em desenvolvimento no [Firefox Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) .
+
+### As soluções existentes eram limitadas
+
+Sempre foi possível incluir experiências da web em um aplicativo Android, usando tecnologias como o [Android WebView](https://developer.android.com/reference/android/webkit/WebView) ou estruturas como [Cordova](https://cordova.apache.org/) .
+
+A limitação do Android WebView é que ele não pretende ser um substituto do navegador. O Android WebView é uma ferramenta de desenvolvedor para usar a interface do usuário da web em um aplicativo Android e não fornece acesso completo aos recursos da plataforma web moderna, como [seletor de contatos](/contact-picker/) ou [sistema de arquivos](/file-system-access/) , [entre outros](https://developer.chrome.com/blog/fugu-status/) .
+
+Cordova foi projetado para aumentar as deficiências do WebView, mas as APIs são então limitadas ao ambiente Cordova. Isso significa que você precisa manter uma base de código adicional para usar as APIs do Cordova para seu aplicativo Android, separada de seu PWA na web aberta.
+
+Além disso, a descoberta de recursos nem sempre funciona conforme o esperado e os problemas de compatibilidade entre as versões do Android e OEMs também podem ser um problema. Ao utilizar uma dessas soluções, os desenvolvedores precisam de processos adicionais de garantia de qualidade e incorrem em um custo extra de desenvolvimento para detectar e criar soluções alternativas.
+
+### A Atividade da Web Confiável é um novo contêiner para aplicativos da Web no Android
+
+Os desenvolvedores agora podem usar uma [Atividade da Web Confiável](https://developer.chrome.com/docs/android/trusted-web-activity/) como um contêiner para incluir um PWA como uma atividade de inicialização para um aplicativo Android. A tecnologia aproveita o navegador para renderizar o PWA em tela cheia, garantindo que a Atividade da Web Confiável tenha a mesma compatibilidade com os recursos da plataforma da Web e APIs que o navegador subjacente tem. Existem também utilitários de código aberto para tornar a implementação de um aplicativo Android usando uma Atividade da Web Confiável ainda mais fácil.
+
+Outra vantagem não disponível em outras soluções é que o contêiner compartilha armazenamento com o navegador. Os estados de login e as preferências dos usuários são compartilhados perfeitamente entre as experiências.
+
+#### Compatibilidade do navegador
+
+O recurso está disponível no Chrome desde a versão 75, com o Firefox implementando-o em sua versão noturna.
+
+### Critérios de qualidade
+
+Os desenvolvedores da Web devem usar uma Atividade da Web Confiável quando desejam incluir conteúdo da Web em um aplicativo Android.
+
+O conteúdo da Web em uma Atividade da Web Confiável deve atender aos critérios de instalabilidade do PWA.
+
+Além disso, para corresponder ao comportamento que os usuários esperam dos aplicativos Android, o [Chrome 86 apresentou uma mudança em](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html) que a falha em lidar com os seguintes cenários é considerada uma falha:
+
+- Falha ao verificar links de ativos digitais no lançamento do aplicativo.
+- Falha ao retornar HTTP 200 para uma solicitação de recurso de rede offline.
+- Uma solicitação de navegação que retorna um erro HTTP 404 ou 5xx".
+
+Quando um desses cenários acontece na Atividade da Web Confiável, causa uma falha visível do usuário no aplicativo Android. Confira a [orientação](https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria) sobre como lidar com esses cenários em seu prestador de serviços.
+
+O aplicativo também deve atender a critérios adicionais específicos do Android, como [conformidade com as políticas](https://play.google.com/about/developer-content-policy/) .
+
+{% Aside 'caution' %} Quando seu app é projetado principalmente para crianças menores de 13 anos, [são aplicadas políticas adicionais para a família do Play](https://play.google.com/about/families/) , que podem ser incompatíveis com o uso de Atividade da Web Confiável. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="Uma captura de tela mostrando a pontuação do Lighthouse para AirHorn, com o emblema PWA e uma pontuação de desempenho de 100.", width="800", height="141" %} <figcaption> O emblema do PWA no Lighthouse mostra se o seu PWA passa nos critérios de instalabilidade.</figcaption></figure>
+
+## Ferramentas
+
+Os desenvolvedores Web que desejam aproveitar as vantagens da Atividade da Web Confiável não precisam aprender novas tecnologias ou APIs para transformar seu PWA em um aplicativo Android. Juntos, Bubblewrap e PWABuilder fornecem ferramentas de desenvolvedor na forma de uma biblioteca, Interface de Linha de Comando (CLI) e Interface Gráfica do Usuário (GUI).
+
+### Plástico bolha
+
+O projeto [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) gera aplicativos Android na forma de uma biblioteca NodeJS e uma Interface de Linha de Comando (CLI).
+
+A inicialização de um novo projeto é realizada executando a ferramenta e passando a URL do Manifesto da Web:
+
+```shell
+npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
+```
+
+A ferramenta também pode construir o projeto, e executar o comando abaixo produzirá um aplicativo Android pronto para ser carregado na Play Store:
+
+```shell
+npx @bubblewrap/cli build
+```
+
+Depois de executar este comando, um arquivo chamado `app-release-signed.apk` estará disponível no diretório raiz do projeto. Este é o arquivo que será [carregado na Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) .
+
+### PWABuilder
+
+O [PWABuilder](https://pwabuilder.com/) ajuda os desenvolvedores a transformar sites existentes em Progressive Web Apps. Também se integra ao Bubblewrap para fornecer uma interface GUI para envolver esses PWAs em um aplicativo Android. A equipe PWABuilder elaborou uma [ótima postagem no blog](https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/)  sobre como gerar um aplicativo Android usando a ferramenta.
+
+## Verificação da propriedade do AWP no aplicativo Android
+
+Um desenvolvedor que constrói um ótimo Progressive Web App não gostaria que outro desenvolvedor construísse um aplicativo Android com ele sem sua permissão. Para garantir que isso não aconteça, o aplicativo Android deve ser emparelhado com o Progressive Web App usando uma ferramenta chamada [Digital Asset Links](https://developers.google.com/digital-asset-links/v1/getting-started).
+
+O Bubblewrap e PWABuilder cuidam da configuração necessária no aplicativo Android, mas resta uma última etapa, que é adicionar o arquivo `assetlinks.json` ao PWA.
+
+Para gerar esse arquivo, os desenvolvedores precisam da assinatura SHA-256 da chave usada para assinar o APK que está sendo baixado pelos usuários.
+
+A chave pode ser gerada de várias maneiras, e a maneira mais fácil de descobrir qual chave assinou o APK sendo servida aos usuários finais é baixá-la da própria Play Store.
+
+Para evitar mostrar um aplicativo quebrado aos usuários, implante o aplicativo em um [canal de teste fechado](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) , instale-o em um dispositivo de teste e use [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool) para gerar o arquivo `assetlinks.json` correto para o aplicativo. Disponibilize o arquivo `assetlinks.json` `/.well-known/assetlinks.json`, no domínio que está sendo validado.
+
+## Para onde ir a seguir
+
+Um Progressive Web App é uma experiência da web de alta qualidade. A Atividade da Web Confiável é uma nova maneira de abrir experiências de alta qualidade de um aplicativo Android quando atendem aos critérios mínimos de qualidade.
+
+Se estiver começando a usar Progressive Web Apps, leia [nossa orientação sobre como criar um ótimo PWA](/progressive-web-apps/). Para desenvolvedores que já têm um PWA, use o [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) para verificar se ele atende aos critérios de qualidade.
+
+Em seguida, use [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) ou [PWABuilder](https://pwabuilder.com/) para gerar o aplicativo Android, [carregue o aplicativo em um canal de teste fechado na Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) e emparelhe-o com o PWA usando [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool).
+
+Por último, passe seu aplicativo do canal de teste fechado para a produção!
diff --git a/src/site/content/pt/progressive-web-apps/what-are-pwas/index.md b/src/site/content/pt/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..d9dd1f6c09f
--- /dev/null
+++ b/src/site/content/pt/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: O que são Progressive Web Apps?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: Uma introdução às Progressive Web Apps (PWAs) e os três pilares que as separam de outras aplicações web.
+tags:
+  - progressive-web-apps
+---
+
+A web é uma plataforma incrível. Sua combinação de onipresença entre dispositivos e sistemas operacionais, seu modelo de segurança centrado no usuário e o fato de que nem sua especificação nem sua implementação são controladas por uma única empresa tornam a web uma plataforma única para o desenvolvimento de software. Combinado com sua capacidade de link inerente, é possível pesquisar e compartilhar o que você encontrou com qualquer pessoa, em qualquer lugar. Sempre que você acessa um site, ele está atualizado e sua experiência com esse site pode ser tão efêmera ou permanente quanto você desejar. Os aplicativos Web podem alcançar *qualquer pessoa, em qualquer lugar, em qualquer dispositivo* com uma única base de código.
+
+As aplicações criadas para plataformas específicas são conhecidas por serem incrivelmente ricas e confiáveis. Elas estão sempre presentes, nas telas iniciais, nos docks e nas barras de tarefas. Elas funcionam independentemente da conexão de rede. Elas são lançadas em seu próprio ambiente local. Elas podem ler e gravar arquivos do sistema de arquivos local, acessar hardware conectado via USB, serial ou bluetooth e até mesmo interagir com dados armazenados em seu dispositivo, como contatos e eventos de calendário. Nessas aplicações, você pode fazer coisas como tirar fotos, ver a reprodução de músicas listadas na tela inicial ou controlar a reprodução de músicas em outro aplicativo. As aplicações criadas para plataformas específicas parecem *parte* do dispositivo em que são executadas.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="Um gráfico que ilustra as capacidades relativas e alcance de aplicações de uma plataforma específica, com alta capacidade, aplicações web, com alto alcance e aplicações web progressivas, que têm alta capacidade e alto alcance.", width="370", height="367" %}   <figcaption> Capacidades versus alcance de aplicações de plataformas específicas, aplicações web e aplicações web progressivas.</figcaption></figure>
+
+Se você pensar em aplicações de plataformas específicas e aplicações web em termos de recursos e alcance, as aplicações de plataformas específicas representam o melhor em termos de capacidades, enquanto as aplicações web representam o melhor em termos de alcance. Então, onde se encaixam as Progressive Web Apps?
+
+Progressive Web Apps - PWA (aplicações web progressivas)  são desenvolvidas e aprimoradas com APIs modernas para fornecer recursos aprimorados, confiabilidade e capacidade de instalação, ao mesmo tempo que alcançam *qualquer pessoa, em qualquer lugar, em qualquer dispositivo* com uma única base de código.
+
+## Os três pilares de uma aplicação
+
+As Progressive Web Apps são aplicações web que foram projetadas para serem capazes, confiáveis e instaláveis. Esses três pilares as transformam em uma experiência que parece uma aplicação de plataforma específica.
+
+### Capazes
+
+A web, por si só, já é bastante capaz. Por exemplo, você pode construir um aplicativo de chat de vídeo hiper-local usando WebRTC, geolocalização e notificações push. Você pode tornar esse aplicativo instalável e permitir conversas virtuais com WebGL e WebVR. Com a introdução do Web Assembly, os desenvolvedores podem explorar outros ecossistemas, como C, C++ e Rust, e trazer décadas de trabalho e recursos para a web também. O [Squoosh.app](https://squoosh.app/), por exemplo, aproveita tudo isso para sua compressão de imagem avançada.
+
+Até recentemente, apenas aplicações de plataformas específicas tinham essas capacidades. Embora alguns recursos ainda estejam fora do alcance da web, APIs novas e futuras estão procurando mudar isso, expandindo o que a web pode fazer com recursos como acesso ao sistema de arquivos, controles de mídia, emblemas de aplicativos e suporte total à área de transferência. Todos esses recursos são desenvolvidos com o modelo de permissão seguro e centrado no usuário da web, de forma a garantir que entrar num site jamais seja uma proposta assustadora para os usuários.
+
+Dentre as APIs modernas, Web Assembly e novas e futuras APIs, as aplicações web são mais capazes do que nunca, e esses recursos não param de crescer.
+
+### Confiáveis
+
+Uma Progressive Web App confiável parece rápida e confiável, independentemente da rede.
+
+A velocidade é fundamental para fazer com que os usuários *usufruam* da sua experiência. Na verdade, conforme o tempo de carregamento da página vai de 1 segundo a dez segundos, a probabilidade de um usuário saltar fora [aumenta em 123%](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/). O desempenho não para depois do evento `onload`. Os usuários nunca devem se perguntar se sua interação - por exemplo, ao clicar em um botão - foi registrada ou não. A rolagem e a animação devem ser suaves. O desempenho afeta toda a sua experiência, desde como os usuários percebem sua aplicação até a forma como ela realmente funciona.
+
+Finalmente, aplicações confiáveis precisam ser utilizáveis independentemente da conexão de rede. Os usuários esperam que as aplicações sejam capazes de iniciar em conexões de rede lentas ou instáveis ou mesmo quando estão offline. Eles esperam que o conteúdo mais recente com o qual interagiram, como faixas de mídia ou ingressos e itinerários, esteja disponível e seja utilizável, mesmo que seja difícil obter uma solicitação para o seu servidor. Quando uma solicitação não é possível, eles esperam ser informados de que há problemas em vez de assistir à aplicação falhar ou travar silenciosamente.
+
+Os usuários adoram aplicações que respondem à interação num piscar de olhos e em experiências nas quais podem confiar.
+
+### Instaláveis
+
+Progressive Web Apps instaladas são executadas numa janela independente em vez de numa aba do navegador. Elas podem ser iniciadas na tela inicial do usuário, no dock, na barra de tarefas ou na prateleira. É possível procurá-las num dispositivo e alternar entre elas com o alternador de aplicações, fazendo com que pareçam parte do dispositivo em que estão instaladas.
+
+Novas capacidades são abertas depois da instalação de uma aplicação web. Os atalhos de teclado normalmente reservados durante a execução no navegador tornam-se disponíveis. As Progressive Web Apps podem se registrar para aceitar conteúdo de outras aplicações ou para ser a aplicação default para lidar com diferentes tipos de arquivos.
+
+Quando uma Progressive Web App sai de uma aba e vai para uma janela de aplicação standalone, ela transforma a maneira como os usuários pensam sobre ela e como interagem com ela.
+
+## O melhor de dois mundos
+
+Em sua essência, as Progressive Web Apps são apenas aplicações web. Através de um aprimoramento progressivo, novos recursos são ativados em navegadores modernos. Usando service workers e um manifesto de web app, sua aplicação web torna-se confiável e instalável. Se os novos recursos não estiverem disponíveis, os usuários ainda terão a experiência essencial.
+
+Os números não mentem! As empresas que lançaram Progressive Web Apps obtiveram resultados impressionantes. Por exemplo, o Twitter teve um aumento de 65% nas páginas por sessão, 75% mais Tweets e uma redução de 20% na taxa de rejeição, tudo isso enquanto reduzia o tamanho do aplicativo em mais de 97%. Depois de mudar para uma PWA, a Nikkei recebeu 2,3 vezes mais tráfego orgânico, 58% mais assinaturas e 49% mais usuários ativos diários. O Hulu substituiu sua experiência desktop de plataforma específica por uma Progressive Web App e viu um aumento de 27% nas visitas de retorno.
+
+As Progressive Web Apps fornecem a você uma oportunidade única de oferecer uma experiência na web que seus usuários irão adorar. Usando os mais recentes recursos da web para trazer recursos aprimorados e confiabilidade, as Progressive Web Apps permitem que o que você constrói seja instalado por *qualquer pessoa, em qualquer lugar, em qualquer dispositivo* com uma única base de código.
diff --git a/src/site/content/pt/pt.11tydata.js b/src/site/content/pt/pt.11tydata.js
new file mode 100644
index 00000000000..888b758a7af
--- /dev/null
+++ b/src/site/content/pt/pt.11tydata.js
@@ -0,0 +1,31 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/pt/react/add-manifest-react/index.md b/src/site/content/pt/react/add-manifest-react/index.md
new file mode 100644
index 00000000000..52d1e2dddfb
--- /dev/null
+++ b/src/site/content/pt/react/add-manifest-react/index.md
@@ -0,0 +1,91 @@
+---
+layout: post
+title: Adicionar um manifesto de aplicativo da web com Create React App
+subhead: |2
+
+  Um manifesto de aplicativo da web está incluído em Create React App por padrão e permite que qualquer pessoa instale seu aplicativo React em seu dispositivo.
+hero: image/admin/pOjpReVK54kUJP6nZMwn.jpg
+date: 2019-04-29
+updated: 2021-05-19
+description: |2
+
+  Criar aplicativo React inclui um manifesto de aplicativo da web por padrão. Modificando este arquivo
+
+  permitirá que você altere a forma como seu aplicativo é exibido quando instalado em
+
+  dispositivo do usuário.
+authors:
+  - houssein
+---
+
+{% Aside %} Se você não sabe como os arquivos de manifesto do aplicativo da web funcionam, consulte o primeiro o guia [Adicionar um manifesto do aplicativo da web](/add-manifest). {% endAside %}
+
+Criar Aplicativo React (CRA) inclui um manifesto de aplicativo da web por padrão. A modificação deste arquivo permitirá que você altere a forma como seu aplicativo é exibido quando instalado no dispositivo do usuário.
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yra3Y2jPf2tS5ELxJdAK.png", alt = "Um ícone de progressive web app na tela inicial de um telefone celular", width = "317", height = "640"%}</figure>
+
+## Por que isso é útil?
+
+Os arquivos de manifesto do aplicativo da Web fornecem a capacidade de alterar a aparência de um aplicativo instalado na área de trabalho ou dispositivo móvel do usuário. Ao modificar as propriedades no arquivo JSON, você pode modificar uma série de detalhes em seu aplicativo, incluindo:
+
+- Nome
+- Descrição
+- Ícone do aplicativo
+- Cor do tema
+
+A [documentação do MDN](https://developer.mozilla.org/docs/Web/Manifest) cobre todas as propriedades que podem ser alteradas em detalhes.
+
+## Modifique o manifesto padrão
+
+No CRA, um arquivo de manifesto padrão, `/public/manifest.json`, é incluído automaticamente quando um novo aplicativo é criado:
+
+```json
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
+```
+
+Isso permite que qualquer pessoa instale o aplicativo em seu dispositivo e veja alguns detalhes padrão do aplicativo. O arquivo HTML, `public/index.html` , também inclui um `<link>` para carregar o manifesto.
+
+```html
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+```
+
+Aqui está um exemplo de um aplicativo desenvolvido com CRA que possui um arquivo de manifesto modificado:
+
+{% Glitch { id: 'cra-web-app-manifest-defaut', path: 'public/manifest.json', previewSize: 0, height: 480 } %}
+
+Para descobrir se todas as propriedades estão funcionando corretamente neste exemplo:
+
+{% Instruction 'preview' %} {% Instruction 'devtools-application' %}
+
+- No painel do **Aplicativo**, clique na guia **Manifesto.**
+
+{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IpK9fr3O0zEX1GJXq9mw.png", alt = "A guia Manifesto do DevTools mostra as propriedades do arquivo de manifesto do aplicativo.", width = "800", height = "695" %}
+
+## Conclusão
+
+1. Se você estiver construindo um site que você acha que não precisa ser instalado em um dispositivo, remova o manifesto e o `<link>` no arquivo HTML que aponta para ele.
+2. Se desejar que os usuários instalem o aplicativo em seus dispositivos, modifique o arquivo de manifesto (ou crie um se não estiver usando o CRA) com as propriedades de sua preferência. A [documentação MDN](https://developer.mozilla.org/docs/Web/Manifest) explica todos os atributos obrigatórios e opcionais.
diff --git a/src/site/content/pt/react/code-splitting-suspense/index.md b/src/site/content/pt/react/code-splitting-suspense/index.md
new file mode 100644
index 00000000000..4a7265e2602
--- /dev/null
+++ b/src/site/content/pt/react/code-splitting-suspense/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Divisão de código com React.lazy e Suspense
+subhead: |2
+
+  Você nunca precisa enviar mais código do que o necessário para seus usuários, então divida seus pacotes para garantir que isso nunca aconteça!
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
+date: 2019-04-29
+description: |2-
+
+  O método React.lazy facilita a divisão de código de um aplicativo React em um
+
+  nível de componente usando importações dinâmicas. Use-o junto com o Suspense para mostrar
+
+  estados de carregamento apropriados aos seus usuários.
+authors:
+  - houssein
+  - jeffposnick
+feedback:
+  - api
+---
+
+{% Aside %} Se você ainda não entende a ideia básica por trás da divisão de código, consulte primeiro o guia [Reduzir cargas úteis de JavaScript com divisão de código](/reduce-javascript-payloads-with-code-splitting). {% endAside %}
+
+O **`React.lazy`** facilita a divisão de código de um aplicativo React em um nível de componente usando importações dinâmicas.
+
+```jsx
+import React, { lazy } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const DetailsComponent = () => (
+  <div>
+    <AvatarComponent />
+  </div>
+)
+```
+
+## Por que isso é útil?
+
+Um grande aplicativo React geralmente consiste em muitos componentes, métodos utilitários e bibliotecas de terceiros. Se não for feito nenhum esforço para tentar carregar diferentes partes de um aplicativo apenas quando forem necessárias, um único pacote grande de JavaScript será enviado para seus usuários assim que carregarem a primeira página. Isso pode afetar significativamente o desempenho da página.
+
+O `React.lazy` fornece uma maneira integrada de separar componentes em um aplicativo em partes separadas de JavaScript com muito pouco trabalho braçal. Então você pode cuidar dos estados de carregamento ao acoplá-lo ao componente `Suspense`.
+
+## Suspense
+
+O problema de enviar uma grande carga útil de JavaScript para os usuários é o tempo que levaria para a página terminar de carregar, especialmente em dispositivos e conexões de rede mais fracos. É por isso que a divisão de código e o carregamento lento são extremamente úteis.
+
+No entanto, sempre haverá um pequeno atraso pelo qual os usuários terão que passar quando um componente de divisão de código estiver sendo buscado pela rede, por isso é importante exibir um estado de carregamento útil. Usar `React.lazy` com o **`Suspense`** ajuda a resolver esse problema.
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+  </Suspense>
+)
+```
+
+`Suspense` aceita um `fallback` que permite exibir qualquer componente React como um estado de carregamento. O exemplo a seguir mostra como isso funciona. O avatar só é renderizado ao clicar no botão, no qual uma solicitação é feita para recuperar o código necessário para o `AvatarComponent` suspenso. Nesse ínterim, o componente de carregamento de fallback é mostrado.
+
+{% Glitch { id: 'react-lazy-suspense', path: 'src/index.css', height: 480} %}
+
+Aqui, o código que compõe o `AvatarComponent` é pequeno, por isso o botão giratório de carregamento só é exibido por um curto período de tempo. Componentes maiores podem demorar muito mais para carregar, especialmente em conexões de rede fracas.
+
+Para demonstrar melhor como isso funciona:
+
+{% Instruction 'preview' %} {% Instruction 'devtools-network' %}
+
+- Clique na lista suspensa **Limitação** que é definida como **Sem limitação** por padrão. Selecione **3G rápido**.
+- Clique no botão **Clique em mim** no aplicativo.
+
+O indicador de carregamento será mostrado por mais tempo agora. Observe como todo o código que compõe o `AvatarComponent` é obtido como um bloco separado.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt="Painel de rede DevTools mostrando um arquivo chunk.js sendo baixado", width="800", height="478" %}</figure>
+
+{% Aside %} Atualmente, o React não oferece suporte ao Suspense quando os componentes estão sendo renderizados do lado do servidor. Se você estiver renderizando no servidor, considere o uso de outra biblioteca, como [`loadable-components`](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/), recomendada na documentação do React. {% endAside %}
+
+## Suspensão de vários componentes
+
+Outro recurso do `Suspense` é que ele permite suspender o carregamento de vários componentes, **mesmo que sejam carregados lentamente**.
+
+Por exemplo:
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+    <InfoComponent />
+    <MoreInfoComponent />
+  </Suspense>
+)
+```
+
+Esta é uma maneira extremamente útil de atrasar a renderização de vários componentes enquanto mostra apenas um único estado de carregamento. Uma vez que todos os componentes tenham terminado de buscar, o usuário pode ver todos eles exibidos ao mesmo tempo.
+
+Você pode ver isso com a seguinte inserção:
+
+{% Glitch { id: 'react-lazy-suspense-multiple', path: 'src/index.css', height: 480 } %}
+
+{% Aside %} Indicador de carregamento mostrando um pouco rápido demais? Tente simular uma conexão limitada no DevTools novamente. {% endAside %}
+
+Sem isso, é fácil enfrentar o problema de *carregamento escalonado* ou diferentes partes de uma IU sendo carregada uma após a outra, com cada uma tendo seu próprio indicador de carregamento. Isso pode tornar a experiência do usuário mais chocante.
+
+{% Aside %} Embora o uso do Suspense para dividir componentes já seja possível e facilite a redução dos tamanhos dos pacotes, a equipe do React continua a trabalhar em mais recursos que expandiriam essa possibilidade ainda mais. O [roteiro do React 16.x](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html) explica isso com mais detalhes. {% endAside %}
+
+## Lidar com falhas de carregamento
+
+`Suspense` permite que você exiba um estado de carregamento temporário enquanto as solicitações de rede são feitas nos bastidores. Mas e se essas solicitações de rede falharem por algum motivo? Você pode estar off-line ou talvez seu aplicativo da web esteja tentando carregar lentamente uma [URL com controle de versão](/http-cache/#long-lived-caching-for-versioned-urls) desatualizada e indisponível após uma reimplantação do servidor.
+
+O React tem um modelo padrão para lidar com esses tipos de falhas de carregamento: usar um limite de erro. Conforme descrito [na documentação](https://reactjs.org/docs/error-boundaries.html), qualquer componente do React pode servir como um limite de erro se implementar um (ou ambos) dos métodos de ciclo de vida: `static getDerivedStateFromError()` ou `componentDidCatch()`.
+
+Para detectar e lidar com falhas de carregamento lento, você pode encapsular seu `Suspense` em um componente pai que serve como um limite de erro. Dentro do método `render()` do limite de erro, você pode renderizar os filhos como estão, se não houver erro, ou renderizar uma mensagem de erro personalizada, se algo der errado:
+
+```js
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Loading failed! Please reload.</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DetailsComponent = () => (
+  <ErrorBoundary>
+    <Suspense fallback={renderLoader()}>
+      <AvatarComponent />
+      <InfoComponent />
+      <MoreInfoComponent />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+## Conclusão
+
+Se você não tiver certeza de onde começar a aplicar a divisão de código ao aplicativo React, siga estas etapas:
+
+1. Comece no nível da rota. As rotas são a maneira mais simples de identificar pontos de sua aplicação que podem ser divididos. Os [documentos do React](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting) mostram como o `Suspense` pode ser usado junto com o [`react-router`](https://github.com/ReactTraining/react-router).
+2. Identifique quaisquer componentes grandes em uma página de seu site que são processados apenas em certas interações do usuário (como clicar em um botão). A divisão desses componentes minimizará suas cargas de JavaScript.
+3. Considere dividir qualquer coisa que esteja fora da tela e não seja crítica para o usuário.
diff --git a/src/site/content/pt/react/code-splitting-with-dynamic-imports-in-nextjs/index.md b/src/site/content/pt/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
new file mode 100644
index 00000000000..82d58400649
--- /dev/null
+++ b/src/site/content/pt/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
@@ -0,0 +1,127 @@
+---
+layout: post
+title: Divisão de código com importações dinâmicas em Next.js
+authors:
+  - mihajlija
+subhead: |2
+
+  Como acelerar seu aplicativo Next.js com divisão de código e estratégias de carregamento inteligente.
+date: 2019-11-08
+feedback:
+  - api
+---
+
+## O que você vai aprender?
+
+Esta publicação explica diferentes tipos de [divisão](/reduce-javascript-payloads-with-code-splitting/) de código e como usar importações dinâmicas para acelerar seus aplicativos Next.js.
+
+## Divisão de código baseada em rota e baseada em componente
+
+Por padrão, o Next.js divide seu JavaScript em partes separadas para cada rota. Quando os usuários carregam seu aplicativo, o Next.js envia apenas o código necessário para a rota inicial. Quando os usuários navegam pelo aplicativo, eles buscam os pedaços associados a outras rotas. A divisão de código baseada em rota minimiza a quantidade de script que precisa ser analisada e compilada de uma vez, o que resulta em tempos de carregamento de página mais rápidos.
+
+Embora a divisão de código baseada em rota seja um bom padrão, você pode otimizar ainda mais o processo de carregamento com a divisão de código no nível do componente. Se você tiver componentes grandes em seu aplicativo, é uma ótima ideia dividi-los em partes separadas. Dessa forma, qualquer componente grande que não seja crítico ou apenas renderize em certas interações do usuário (como clicar em um botão) pode ser carregado lentamente.
+
+Next.js suporta o elemento [`import()` dinâmico](https://v8.dev/features/dynamic-import), que permite importar módulos JavaScript (incluindo componentes React) dinamicamente e carregar cada importação como um pedaço separado. Isso oferece divisão de código em nível de componente e permite controlar o carregamento de recursos para que os usuários baixem apenas o código de que precisam para a parte do site que estão visualizando. No Next.js, esses componentes são [renderizados do lado do servidor (SSR)](/rendering-on-the-web/) por padrão.
+
+## Importações dinâmicas em ação
+
+Esta postagem inclui várias versões de um aplicativo de amostra que consiste em uma página simples com um botão. Ao clicar no botão, você verá um cachorrinho fofo. Conforme você avança em cada versão do aplicativo, verá como as importações dinâmicas são diferentes das [importações estáticas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) e como trabalhar com elas.
+
+Na primeira versão do aplicativo, o cachorro mora em `components/Puppy.js`. Para exibir o cachorro na página, o aplicativo importa o componente `Puppy` `index.js` com uma declaração de importação estática:
+
+```js
+import Puppy from "../components/Puppy";
+```
+
+{% Glitch { id: 'static-import', path: 'index.js', previewSize: 0, height: 480 } %}
+
+Para ver como Next.js agrupa o aplicativo, inspecione o rastreamento de rede no DevTools:
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+{% Instruction 'reload-page', 'ol' %}
+
+Quando você carrega a página, todo o código necessário, incluindo o `Puppy.js`, é empacotado em `index.js` :
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6KWlTYFhoIEIGqnuMwlh.png", alt="Guia Rede DevTools mostrando seis arquivos JavaScript: index.js, app.js, webpack.js, main.js, 0.js e o dll (arquivo de biblioteca de link dinâmico).", width="800", height="665" %}</figure>
+
+Quando você pressiona o botão **Clique aqui**, apenas a solicitação do filhote de cachorro JPEG é adicionada à guia **Rede:**
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7MkXVqnqfIbW74VV48kB.png", alt="Guia Rede DevTools após o clique do botão, mostrando os mesmos seis arquivos JavaScript e uma imagem.", width="800", height="665" %}</figure>
+
+A desvantagem dessa abordagem é que, mesmo que os usuários não cliquem no botão para ver o cachorro, eles precisam carregar o `Puppy` porque ele está incluído no `index.js`. Neste pequeno exemplo, isso não é grande coisa, mas em aplicações reais geralmente é uma grande melhoria carregar componentes grandes apenas quando necessário.
+
+Agora verifique uma segunda versão do aplicativo, em que a importação estática é substituída por uma importação dinâmica. Next.js inclui `next/dynamic`, o que possibilita usar importações dinâmicas para qualquer componente em Next:
+
+```js/1,5/0
+import Puppy from "../components/Puppy";
+import dynamic from "next/dynamic";
+
+// ...
+
+const Puppy = dynamic(import("../components/Puppy"));
+```
+
+{% Glitch { id: 'dynamic-import-nextjs', path: 'pages/index.js:29:10', height: 480 } %}
+
+Siga as etapas do primeiro exemplo para inspecionar o rastreamento da rede.
+
+Quando você carrega o aplicativo pela primeira vez, apenas o `index.js` é baixado. Desta vez, é 0,5 KB menor (diminuiu de 37,9 KB para 37,4 KB) porque não inclui o código do componente `Puppy`:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K7Ii3bxUkb37LrZjjWT1.png", alt="Rede DevTools mostrando os mesmos seis arquivos JavaScript, exceto index.js agora é 0,5 KB menor.", width="800", height="665" %}</figure>
+
+O `Puppy` agora está em um bloco separado, `1.js`, que é carregado apenas quando você pressiona o botão:
+
+<figure>{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DfVDv5poQmwXwOKmnvd.png", alt = "Guia Rede DevTools após o clique do botão, mostrando o arquivo 1.js adicional e a imagem adicionada ao final da lista de arquivos.", width = " 800 ", height =" 665 "%}</figure>
+
+{% Aside %} Por padrão, Next.js nomeia esses blocos dinâmicos como *número* .js, em que *número* começa em 1. {% endAside %}
+
+Em aplicações reais, os componentes costumam ser [muito maiores](https://bundlephobia.com/result?p=moment@2.24.0) e o carregamento lento pode reduzir a carga útil inicial do JavaScript em centenas de kilobytes.
+
+## Importações dinâmicas com indicador de carregamento personalizado
+
+Quando você carrega lentamente os recursos, é uma boa prática fornecer um indicador de carregamento no caso de haver atrasos. Em Next.js, você pode fazer isso fornecendo um argumento adicional para a função `dynamic()`:
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  loading: () => <p>Loading...</p>
+});
+```
+
+{% Glitch { id: 'dynamic-import-loading', path: 'pages/index.js:7:27', height: 480 } %}
+
+Para ver o indicador de carregamento em ação, simule uma conexão de rede lenta no DevTools:
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+1. Na lista suspensa **Aceleração**, selecione **3G rápido**.
+
+2. Pressione o botão **Clique aqui**
+
+Agora, quando você clica no botão, leva um tempo para carregar o componente e o aplicativo exibe a mensagem "Carregando…" nesse meio tempo.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tjlpmwolBVp1jh948Fln.png", alt="Uma tela escura com a mensagem \"Carregando...\".", width="800", height="663" %}</figure>
+
+## Importações dinâmicas sem SSR
+
+Se precisar renderizar um componente apenas no lado do cliente (por exemplo, um widget de chat), você pode fazer isso configurando a opção `ssr` `false` :
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  ssr: false,
+});
+```
+
+{% Glitch { id: 'dynamic-import-no-ssr', path: 'pages/index.js:5:0', height: 480 } %}
+
+## Conclusão
+
+Com suporte para importações dinâmicas, o Next.js oferece divisão de código em nível de componente, o que pode minimizar suas cargas de JavaScript e melhorar o tempo de carregamento do aplicativo. Todos os componentes são renderizados do lado do servidor por padrão e você pode desabilitar esta opção sempre que necessário.
diff --git a/src/site/content/pt/react/index.md b/src/site/content/pt/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/pt/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/pt/react/virtualize-long-lists-react-window/index.md b/src/site/content/pt/react/virtualize-long-lists-react-window/index.md
new file mode 100644
index 00000000000..cafcad55dbd
--- /dev/null
+++ b/src/site/content/pt/react/virtualize-long-lists-react-window/index.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: Virtualize grandes listas com janela de reação
+subhead: |2
+
+  Tabelas e listas muito grandes podem reduzir significativamente o desempenho do seu site. A virtualização pode ajudar!
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
+date: 2019-04-29
+description: |2
+
+  react-window é uma biblioteca que permite que grandes listas sejam renderizadas com eficiência.
+authors:
+  - houssein
+  - developit
+feedback:
+  - api
+---
+
+O [`react-window`](https://react-window.now.sh/#/examples/list/fixed-size) é uma biblioteca que permite que grandes listas sejam renderizadas com eficiência.
+
+Aqui está um exemplo de uma lista que contém 1000 linhas sendo renderizadas com `react-window`. Tente rolar o mais rápido que puder.
+
+{% Glitch { id: 'react-window-fixed', path: 'src/App.js', height: 750 } %}
+
+## Por que isto é útil?
+
+Pode haver momentos em que você precise exibir uma grande tabela ou lista que contém muitas linhas. Carregar todos os itens dessa lista pode afetar o desempenho de maneira significativa.
+
+A**virtualização de lista**, ou "janelamento", é o conceito de apenas renderizar o que é visível para o usuário. O número de elementos renderizados a princípio é um subconjunto muito pequeno de toda a lista e a "janela" de conteúdo visível *se move* quando o usuário continua a rolar. Isso melhora o desempenho de renderização e rolagem da lista.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="Janela de conteúdo em uma lista virtualizada", width="578", height="525" %} <figcaption> Mover "janela" de conteúdo em uma lista virtualizada </figcaption></figure>
+
+Os nós DOM que saem da "janela" são reciclados ou imediatamente substituídos por elementos mais novos conforme o usuário rola a lista para baixo. Isso mantém o número de todos os elementos renderizados específicos para o tamanho da janela.
+
+## react-window
+
+O `react-window` é uma pequena biblioteca de terceiros que torna mais fácil criar listas virtualizadas em seu aplicativo. Ele fornece várias APIs básicas que podem ser usadas para diferentes tipos de listas e tabelas.
+
+### Quando usar listas de tamanho fixo
+
+Use o `FixedSizeList` se você tiver uma lista longa e unidimensional de itens de tamanhos iguais.
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const ListComponent = () => (
+  <FixedSizeList
+    height={500}
+    width={500}
+    itemSize={120}
+    itemCount={items.length}
+  >
+    {Row}
+  </FixedSizeList>
+);
+
+export default ListComponent;
+```
+
+- O componente `FixedSizeList` aceita uma propriedade `height`, `width` e `itemSize` para controlar o tamanho dos itens na lista.
+- Uma função que renderiza as linhas é passada como filho para `FixedSizeList`. Detalhes sobre o item específico podem ser acessados com o argumento de `index` (`items[index]`).
+- Um `style` também é passado para o método de renderização de linha que **deve** ser anexado ao elemento da linha. Os itens da lista são absolutamente posicionados com seus valores de altura e largura atribuídos sequencialmente, e o parâmetro `style` é responsável por isso.
+
+{% Aside 'caution' %} Não atribua propriedades `height` e `width` à lista ou ao item da lista com um arquivo CSS externo. Eles seriam ignorados devido ao fato de que esses atributos de estilo são aplicados em linha. {% endAside %}
+
+O exemplo de Glitch mostrado anteriormente neste artigo mostra um exemplo de um componente `FixedSizeList`
+
+### Quando usar listas de tamanhos variáveis
+
+Use o `VariableSizeList` para renderizar uma lista de itens que possuem tamanhos diferentes. Este componente funciona da mesma maneira que uma lista de tamanho fixo, mas em vez disso espera uma função para a propriedade `itemSize` vez de um valor específico.
+
+```jsx
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const getItemSize = index => {
+  // return a size for items[index]
+}
+
+const ListComponent = () => (
+  <VariableSizeList
+    height={500}
+    width={500}
+    itemCount={items.length}
+    itemSize={getItemSize}
+  >
+    {Row}
+  </VariableSizeList>
+);
+
+export default ListComponent;
+```
+
+A incorporação a seguir mostra um exemplo desse componente.
+
+{% Glitch { id: 'react-window-variable', path: 'src/ListComponent.js', height: 750 } %}
+
+A função de tamanho do item passada para a propriedade `itemSize` randomiza as alturas das linhas neste exemplo. Em um aplicativo real, entretanto, deve haver uma lógica real definindo os tamanhos de cada item. Idealmente, esses tamanhos devem ser calculados com base em dados ou obtidos de uma API.
+
+{% Aside %} Ambos os `FixedSizeList` e `VariableSizeList` suportam listas horizontais usando uma propriedade `layout="horizontal"`. Dê uma olhada na [documentação](https://react-window.now.sh/#/examples/list/fixed-size) para ver um exemplo. {% endAside %}
+
+### Grades
+
+O `react-window` também fornece suporte para virtualizar listas multidimensionais ou grades. Nesse contexto, a "janela" de conteúdo visível muda conforme o usuário rola horizontal **e** verticalmente.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="Mover janela de conteúdo em uma grade virtualizada é bidimensional", width="739", height="516" %} <figcaption> Mover "janela" de conteúdo em uma grade virtualizada é bidimensional </figcaption></figure>
+
+Da mesma forma, os `FixedSizeGrid` e `VariableSizeGrid` podem ser usados dependendo se o tamanho de itens de lista específicos pode variar.
+
+- Para `FixedSizeGrid`, a API é quase a mesma, mas com o fato de que alturas, larguras e contagens de itens precisam ser representadas para colunas e linhas.
+- Para `VariableSizeGrid`, as larguras das colunas e as alturas das linhas podem ser alteradas passando funções em vez de valores para suas respectivas propriedades.
+
+Dê uma olhada na [documentação](https://react-window.now.sh/#/examples/grid/fixed-size) para ver exemplos de grades virtualizadas.
+
+{% Aside %} Além de fornecer os componentes básicos para criar listas e grades eficientes, a `react-window` também fornece outros recursos, como rolar para um item específico ou fornecer um indicador quando o usuário está rolando. A [documentação](https://react-window.now.sh/#/examples/list/scrolling-indicators) fornece exemplos para isso. {% endAside %}
+
+## Carregamento lento na rolagem
+
+Muitos sites melhoram o desempenho esperando para carregar e renderizar itens em uma longa lista até que o usuário role para baixo. Essa técnica, geralmente conhecida como "carregamento infinito", adiciona novos nós DOM à lista conforme o usuário rola para além de um determinado limite próximo ao final. Embora isso seja melhor do que carregar todos os itens em uma lista de uma vez, ele ainda acaba preenchendo o DOM com milhares de entradas de linha se o usuário tiver passado dessa quantidade. Isso pode levar a um tamanho de DOM excessivamente grande, que começa a afetar o desempenho ao fazer cálculos de estilo e mutações de DOM mais lentos.
+
+O diagrama a seguir pode ajudar a resumir isso:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="Diferença na rolagem entre uma lista normal e virtualizada", width="800", height="531" %} <figcaption> Diferença na rolagem entre uma lista normal e virtualizada </figcaption></figure>
+
+A melhor abordagem para resolver esse problema é continuar a usar uma biblioteca como a `react-window` para manter uma pequena "janela" de elementos em uma página, mas também para carregar lentamente as entradas mais recentes conforme o usuário rola para baixo. Um pacote separado, `react-window-infinite-loader`, torna isso possível com `react-window`.
+
+Considere o seguinte trecho de código, que mostra um exemplo de estado gerenciado em um componente de `App`
+
+```jsx
+import React, { Component } from 'react';
+
+import ListComponent from './ListComponent';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [], // instantiate initial list here
+      moreItemsLoading: false,
+      hasNextPage: true
+    };
+
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  loadMore() {
+   // method to fetch newer entries for the list
+  }
+
+  render() {
+    const { items, moreItemsLoading, hasNextPage } = this.state;
+
+    return (
+      <ListComponent
+        items={items}
+        moreItemsLoading={moreItemsLoading}
+        loadMore={this.loadMore}
+        hasNextPage={hasNextPage}
+      />
+    );
+  }
+}
+
+export default App;
+```
+
+Um método `loadMore` é passado para um `ListComponent` filho que contém a lista de carregadores infinita. Isso é importante porque o carregador infinito precisa disparar um retorno de chamada para carregar mais itens, uma vez que o usuário tenha passado de um determinado ponto.
+
+Veja aqui como o `ListComponent` que renderiza a lista pode se parecer:
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import InfiniteLoader from "react-window-infinite-loader";
+
+const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
+  const Row = ({ index, style }) => (
+     {/* define the row component using items[index] */}
+  );
+
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={index => index < items.length}
+      itemCount={itemCount}
+      loadMoreItems={loadMore}
+    >
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList
+          height={500}
+          width={500}
+          itemCount={itemCount}
+          itemSize={120}
+          onItemsRendered={onItemsRendered}
+          ref={ref}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+  </InfiniteLoader>
+  )
+};
+
+export default ListComponent;
+```
+
+Aqui, o componente `FixedSizeList` está envolto no `InfiniteLoader`. As propriedades atribuídas ao carregador são:
+
+- `isItemLoaded` : método que verifica se um determinado item foi carregado
+- `itemCount` : número de itens na lista (ou esperado)
+- `loadMoreItems` : retorno de chamada que retorna uma promessa que resolve dados adicionais para a lista
+
+Uma [propriedade de renderização](https://reactjs.org/docs/render-props.html#using-props-other-than-render) é usada para retornar uma função que o componente de lista usa para renderizar. Tanto os atributos `onItemsRendered` como `ref` são atributos que precisam ser transmitidos.
+
+A seguir está um exemplo de como o carregamento infinito pode funcionar com uma lista virtualizada.
+
+{% Glitch { id: 'react-window-infinite', path: 'src/ListComponent.js', height: 750 } %}
+
+Rolar para baixo na lista pode parecer o mesmo, mas agora é feita uma solicitação para recuperar 10 usuários de uma [API de usuário aleatório](https://randomuser.me/) toda vez que você rola para perto do final da lista. Isso tudo é feito enquanto apenas renderiza uma única "janela" de resultados de cada vez.
+
+Ao verificar o `index` de um determinado item, um estado de carregamento diferente pode ser mostrado para um item, dependendo se uma solicitação foi feita para entradas mais recentes e o item ainda está sendo carregado.
+
+Por exemplo:
+
+```js
+const Row = ({ index, style }) => {
+  const itemLoading = index === items.length;
+
+  if (itemLoading) {
+      // return loading state
+  } else {
+      // return item
+  }
+};
+```
+
+## Varreduras em excesso
+
+Como os itens em uma lista virtualizada só mudam quando o usuário faz a rolagem, o espaço em branco pode piscar brevemente à medida que novas entradas estão prestes a serem exibidas. Você pode tentar rolar rapidamente qualquer um dos exemplos anteriores neste guia para perceber isso.
+
+Para melhorar a experiência do usuário em listas virtualizadas, o `react-window` permite que você faça uma varredura excessiva de itens com a propriedade `overscanCount`. Isso permite que você defina quantos itens fora da "janela" visível para renderizar a todo momento.
+
+```jsx
+<FixedSizeList
+  //...
+  overscanCount={4}
+>
+  {...}
+</FixedSizeList>
+```
+
+O `overscanCount` funciona tanto para os `FixedSizeList` como `VariableSizeList` e tem um valor padrão de 1. Dependendo do tamanho de uma lista e do tamanho de cada item, a varredura excessiva de mais de uma entrada pode ajudar a evitar um flash perceptível de espaço vazio quando o o usuário rola. No entanto, a varredura excessiva de muitas entradas pode afetar negativamente o desempenho. O objetivo de usar uma lista virtualizada é minimizar o número de entradas para o que o usuário possa ver a qualquer momento, então tente manter o número de itens varridos em excesso o mais baixo possível.
+
+Para `FixedSizeGrid` e `VariableSizeGrid`, utilize o `overscanColumnsCount` e propriedades `overscanRowsCount` para controlar o número de colunas e linhas para a varredura excessiva respectivamente.
+
+## Conclusão
+
+Se você não tiver certeza de onde começar a virtualizar listas e tabelas em seu aplicativo, siga estas etapas:
+
+1. Avalie o desempenho de renderização e rolagem. Este [artigo](https://addyosmani.com/blog/react-window/) mostra como o [medidor FPS](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second) no Chrome DevTools pode ser usado para explorar a eficiência com que os itens são renderizados em uma lista.
+2. Inclua `react-window` para quaisquer listas longas ou grades que estão afetando o desempenho.
+3. Se houver certos recursos não suportados na `react-window`, considere usar o [`react-virtualized`](https://github.com/bvaughn/react-virtualized) se você não puder adicionar essa funcionalidade sozinho.
+4. Faça sua lista virtualizada com `react-window-infinite-loader` se você precisar carregar itens lentamente enquanto o usuário rola a tela.
+5. Use a propriedade `overscanCount` para suas listas e as propriedades `overscanColumnsCount` e `overscanRowsCount` para suas grades para evitar um flash de conteúdo vazio. Não explore muitas entradas, pois isso afetará negativamente o desempenho.
diff --git a/src/site/content/pt/reliable/http-cache/index.md b/src/site/content/pt/reliable/http-cache/index.md
new file mode 100644
index 00000000000..b39d5700aa4
--- /dev/null
+++ b/src/site/content/pt/reliable/http-cache/index.md
@@ -0,0 +1,178 @@
+---
+layout: post
+title: Evite solicitações de rede desnecessárias com o Cache HTTP
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-17
+description: |2-
+
+  Como você pode evitar solicitações de rede desnecessárias? O Cache HTTP do navegador é a sua
+  primeira linha de defesa. Não é necessariamente a abordagem mais poderosa ou flexível, e você tem controle limitado sobre o tempo de vida das respostas em cache,
+  mas é eficaz e compatível com todos os navegadores, além de não exigir muito
+  esforço.
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+Buscar recursos na rede é lento e caro:
+
+- Respostas grandes requerem muitas transações entre o navegador e o servidor.
+- Sua página não carregará até que todos os seus [recursos críticos](https://developers.google.com/web/fundamentals/performance/critical-rendering-path) tenham sido completamente baixados.
+- Se uma pessoa está acessando seu site com um plano de dados móvel limitado, cada solicitação de rede desnecessária é um desperdício de dinheiro.
+
+Como você pode evitar solicitações de rede desnecessárias? O Cache HTTP do navegador é sua primeira linha de defesa. Não é necessariamente a abordagem mais poderosa ou flexível, e você tem controle limitado sobre o tempo de vida das respostas em cache, mas é eficaz e compatível com todos os navegadores, além de não exigir muito esforço.
+
+Este guia mostra os fundamentos de uma implementação eficaz do Cache HTTP.
+
+## Compatibilidade do navegador {: #browser-compatibility }
+
+Na verdade, não existe uma única API chamada Cache HTTP. É o nome geral para uma coleção de APIs para plataformas da web. Essas APIs são compatíveis com todos os navegadores:
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## Como funciona o Cache HTTP {: #overview }
+
+Todas as solicitações HTTP que o navegador faz são primeiro roteadas para o cache do navegador para verificar se há uma resposta válida em cache que pode ser usada para atender à solicitação. Se houver uma correspondência, a resposta é lida no cache, o que elimina a latência da rede e os custos de dados incorridos pela transferência.
+
+O comportamento do Cache HTTP é controlado por uma combinação de [cabeçalhos de solicitação](https://developer.mozilla.org/docs/Glossary/Request_header) e [cabeçalhos de resposta](https://developer.mozilla.org/docs/Glossary/Response_header). Em um cenário ideal, você terá controle sobre o código do seu aplicativo da web (que determinará os cabeçalhos da solicitação) e a configuração do servidor da web (que determinará os cabeçalhos de resposta).
+
+Confira o [artigo sobre cache de HTTP](https://developer.mozilla.org/docs/Web/HTTP/Caching) da MDN para obter uma visão geral mais aprofundada sobre o conceito.
+
+## Solicite cabeçalhos: mantenha os padrões (em geral) {: #request-headers }
+
+Embora haja uma série de cabeçalhos importantes que devam ser incluídos nas solicitações de saída de seu aplicativo da web, o navegador quase sempre se encarrega de defini-los em seu nome quando faz solicitações. Os cabeçalhos de solicitação que afetam a verificação de atualização, como [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) e[`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since), aparecem apenas com base no entendimento do navegador dos valores atuais no cache HTTP.
+
+Isso é uma boa notícia. Significa que você pode continuar incluindo tags como `<img src="my-image.png">` em seu HTML, e o navegador cuidará automaticamente do cache HTTP para você, sem esforço extra.
+
+{% Aside %} Os desenvolvedores que precisam de mais controle sobre o Cache HTTP em seu aplicativo da web têm uma alternativa: é possível "descer" um nível e usar manualmente a [API Fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API), passando para ela objetos [`Request`](https://developer.mozilla.org/docs/Web/API/Request) com conjunto de substituições de [`cache`](https://developer.mozilla.org/docs/Web/API/Request/cache). Porém, isso está além do escopo deste guia! {% endAside %}
+
+## Cabeçalhos de resposta: configure seu servidor da web {: #response-headers }
+
+A parte da configuração do Cache HTTP que mais importa são os cabeçalhos que seu servidor da web adiciona a cada resposta de saída. Todos os cabeçalhos a seguir influenciam no comportamento eficaz do armazenamento em cache:
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control)  O servidor pode retornar um `Cache-Control` para especificar como e por quanto tempo o navegador e outros caches intermediários devem armazenar em cache a resposta individual.
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag). Quando o navegador encontra uma resposta expirada em cache, ele pode enviar um pequeno token (geralmente um hash do conteúdo do arquivo) para o servidor e verificar se o arquivo foi alterado. Se o servidor retornar o mesmo token, o arquivo é o mesmo e não há necessidade de baixá-lo novamente.
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Este cabeçalho tem a mesma finalidade que `ETag`, mas usa uma estratégia baseada em tempo para determinar se um recurso foi alterado, em oposição à estratégia baseada em conteúdo de `ETag` .
+
+Alguns servidores da web têm suporte integrado para definir esses cabeçalhos por padrão, enquanto outros deixam os cabeçalhos totalmente de fora, a menos que sejam configurados explicitamente. Os detalhes específicos de *como* configurar cabeçalhos variam muito, dependendo do servidor web utilizado. Você deve consultar a documentação do servidor para obter informações mais precisas.
+
+Para evitar pesquisas, confira abaixo as instruções de como configurar alguns servidores da web mais conhecidos:
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+Deixar de fora o cabeçalho de resposta `Cache-Control` não desabilita o Cache HTTP! Em vez disso, os navegadores [adivinham efetivamente](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness) que tipo de comportamento de cache faz mais sentido para um determinado tipo de conteúdo. Talvez você deseje mais controle do que isso oferece, então reserve um tempo para configurar seus cabeçalhos de resposta.
+
+## Quais valores de cabeçalho de resposta você deve usar? {: #response-header-strategies }
+
+Existem dois cenários importantes que você deve analisar ao configurar os cabeçalhos de resposta do seu servidor da web.
+
+### Cache de longa duração para URLs com controle de versão {: #versioned-urls }
+
+{% Details %} {% DetailsSummary 'h4' %} Como URLs com controle de versão podem ajudar na sua estratégia de armazenamento em cache? URLs com controle de versão são uma boa prática porque facilitam a invalidação de respostas em cache. {% endDetailsSummary %} Suponha que seu servidor instrua os navegadores a armazenar em cache um arquivo CSS por um ano ( <code>Cache-Control: max-age=31536000</code> ), mas seu designer acabou de fazer uma atualização de emergência que precisa ser implementada imediatamente. Como você notifica os navegadores para atualizar a cópia em cache "desatualizada" do arquivo? É impossível, pelo menos não sem alterar a URL do recurso. Depois que o navegador armazena a resposta em cache, a versão nele é usada até que não seja mais atualizada, conforme determinado por <code>max-age</code> ou <code>expires</code>, ou até que seja removida dele por algum outro motivo (por exemplo: o usuário limpar o cache do navegador). Como resultado, usuários diferentes podem acabar usando versões distintas do arquivo quando a página é construída: os usuários que acabaram de buscar o recurso usam a nova versão, enquanto os usuários que armazenaram em cache uma cópia anterior (mas ainda válida) usam uma versão mais antiga de seu resposta. Como obter o melhor dos dois mundos: cache do lado do cliente e atualizações rápidas? Você altera a URL do recurso e obriga o usuário a baixar a nova resposta sempre que seu conteúdo é alterado. Normalmente, isso é feito incorporando uma impressão digital, ou um número de versão, no nome do seu arquivo (por exemplo: <code>style.x234dff.css</code>. {% endDetails %}
+
+Ao responder a solicitações de URLs que contêm "[impressão digital](https://en.wikipedia.org/wiki/Fingerprint_(computing))" ou informações de versão e cujo conteúdo nunca deve ser alterado, adicione `Cache-Control: max-age=31536000` às suas respostas.
+
+Definir este valor informa ao navegador que, quando for necessário carregar a mesma URL a qualquer momento durante o próximo ano (31.536.000 segundos; o valor máximo suportado), é possível usar imediatamente o valor no Cache HTTP, sem precisar fazer uma solicitação de rede para seu servidor da web. Isso é ótimo, você ganhou imediatamente a confiabilidade e a velocidade ao evitar a rede!
+
+Ferramentas de construção como o webpack podem [automatizar o processo](https://webpack.js.org/guides/caching/#output-filenames) de atribuição de impressões digitais de hash às URLs dos seus ativos.
+
+{% Aside %} Você também pode adicionar a [propriedade `immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading) ao seu `Cache-Control` como uma otimização adicional, embora [seja ignorada](https://www.keycdn.com/blog/cache-control-immutable#browser-support) em alguns navegadores. {% endAside %}
+
+### Revalidação de servidor para URLs sem controle de versão {: #unversioned-urls }
+
+Infelizmente, nem todos as URLs carregadas têm controle de versão. Talvez você não consiga incluir uma etapa de compilação antes de implantar seu aplicativo da web, por isso não é possível adicionar hashes às URLs de ativos. Todo aplicativo da web precisa de arquivos HTML, sendo que esses arquivos (quase!) nunca incluirão informações de controle de versão, já que ninguém se preocupará em usá-lo se precisar lembrar que a URL a ser acessada é `https://example.com/index.34def12.html`. Então, o que você pode fazer por essas URLs?
+
+Esse é um cenário em que você precisa admitir a derrota. Apenas o Cache HTTP não é poderoso o suficiente para evitar totalmente a rede. (Não se preocupe, em breve você aprenderá sobre [trabalhos de serviço](/service-workers-cache-storage/), que fornecerão o suporte necessário para reverter a batalha a seu favor.) Mas existem algumas etapas que você pode seguir para garantir que as solicitações de rede serão tão rápidas e eficientes quanto possível.
+
+Os seguintes valores `Cache-Control` podem ajudar a ajustar onde e como as URLs sem controle de versão são armazenadas em cache:
+
+- `no-cache`. Isso instrui o navegador que é preciso revalidar com o servidor sempre antes de usar uma versão em cache da URL.
+- `no-store`. Isso instrui o navegador e outros caches intermediários (como CDNs) a nunca armazenar nenhuma versão do arquivo.
+- `private`. Os navegadores podem armazenar o arquivo em cache, mas os caches intermediários não.
+- `public`. A resposta pode ser armazenada por qualquer cache.
+
+Verifique o [Apêndice: Fluxograma de `Cache-Control`](#flowchart) para visualizar o processo de decisão de qual(is) valor(es) de `Cache-Control` serão utilizados. Observe também que o `Cache-Control` pode aceitar uma lista de diretivas separadas por vírgulas. Consulte o <a href="#examples" data-md-type="link">Apêndice: exemplos de `Cache-Control`</a> .
+
+Junto com isso, definir um dos dois cabeçalhos de resposta adicionais também pode ajudar o [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) ou [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Conforme mencionado nos [cabeçalhos de resposta](#response-headers), `ETag` e `Last-Modified` têm a mesma finalidade: determinar se o navegador precisa baixar novamente um arquivo em cache que expirou. `ETag` é a abordagem recomendada porque é mais precisa.
+
+{% Details %} {% DetailsSummary 'h4' %} Exemplo de ETag {% endDetailsSummary %} Suponha que 120 segundos tenham se passado desde a busca inicial e que o navegador tenha iniciado uma nova solicitação para o mesmo recurso. Primeiro o navegador verifica o Cache HTTP e encontra a resposta anterior, mas infelizmente não pode usá-a porque já expirou. Nesse ponto, o navegador pode despachar uma nova solicitação e buscar a nova resposta completa. No entanto, isso não é eficiente porque, se o recurso não tiver sido alterado, não há razão para baixar as mesmas informações que já estão no cache! Conforme especificado no <code>ETag</code>, os tokens de validação foram projetados para resolver esse problema. O servidor gera e retorna um token arbitrário, que normalmente é um hash ou alguma outra impressão digital do conteúdo do arquivo. O navegador não precisa saber como a impressão digital é gerada, basta enviá-la ao servidor na próxima solicitação. Se a impressão digital ainda for a mesma, o recurso não foi alterado e o navegador pode ignorar o download. {% endDetails %}
+
+Ao definir `ETag` ou `Last-Modified` , você acabará tornando a solicitação de revalidação muito mais eficiente, que acabam acionando os [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since) ou [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) mencionados nos [cabeçalhos de solicitação](#request-headers) .
+
+Quando um servidor da web configurado corretamente detectar esses cabeçalhos de solicitação de entrada, será possível confirmar se a versão do recurso que o navegador já possui em seu Cache HTTP corresponde à versão mais recente no servidor da web. Se houver uma correspondência, o servidor pode responder com um [`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304), que equivale a dizer "Ei, continue usando o que você já tem!". Há muito poucos dados a serem transferidos ao enviar esse tipo de resposta, então geralmente isso é bem mais rápido do que ter que retornar uma cópia do recurso real que está sendo solicitado.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="Diagrama de um cliente solicitando um recurso e o servidor respondendo com um cabeçalho 304.", width="474", height="215" %} <figcaption> O navegador solicita <code>/file</code> do servidor e inclui o <code>If-None-Match</code> para instrui-lo a retornar apenas o arquivo completo se a <code>ETag</code> do arquivo no servidor não corresponder ao valor <code>If-None-Match</code> nele. Nesse caso, ambos os valores coincidiram, por isso o servidor retorna um <code>304 Not Modified</code> com instruções sobre a quantidade de tempo pelo qual o arquivo deve ser armazenado no cache (<code>Cache-Control: max-age=120</code> ). </figcaption></figure>
+
+## Resumo {: #summary }
+
+O Cache HTTP é uma forma eficaz de melhorar o desempenho de carregamento, pois reduz as solicitações de rede desnecessárias. É compatível com todos os navegadores e não requer muito trabalho para configurar.
+
+Os `Cache-Control` a seguir são um bom começo:
+
+- `Cache-Control: no-cache` para recursos que devem ser revalidados com o servidor antes de cada uso.
+- `Cache-Control: no-store` recursos que nunca devem ser armazenados em cache.
+- `Cache-Control: max-age=31536000` para recursos com controle de versão.
+
+Além disso, o `ETag` ou `Last-Modified` pode ajudar a revalidar recursos expirados do cache com mais eficiência.
+
+{% Aside 'codelab' %} Experimente o [codelab HTTP Cache](/codelab-http-cache) para obter experiência prática com `Cache-Control` e `ETag` no Express. {% endAside %}
+
+## Saiba mais {: #learn-more }
+
+Se você quiser saber ainda mais sobre o uso do `Cache-Control`, confira o guia de [práticas recomendadas de cache e dicas de max-age](https://jakearchibald.com/2016/caching-best-practices/), de Jake Archibald.
+
+Consulte [Ame seu cache](/love-your-cache) para obter orientações de como otimizar o uso do cache para visitantes recorrentes.
+
+## Apêndice: Mais dicas {: #tips }
+
+Se você tiver mais tempo, confira abaixo outras maneiras de otimizar o uso do Cache HTTP:
+
+- Use URLs consistentes. Se você veicular o mesmo conteúdo em URLs diferentes, esse conteúdo será buscado e armazenado várias vezes.
+- Minimize a rotatividade. Se parte de um recurso (como um arquivo CSS) for atualizado com frequência, enquanto o resto do arquivo não (como o código da biblioteca), considere dividir o código atualizado com frequência em um arquivo separado e usar uma estratégia de armazenamento em cache de curta duração para ele e uma de longa duração para o código que não é alterado com frequência.
+- Confira a nova diretriz [`stale-while-revalidate`](/stale-while-revalidate/) se algum grau de desatualização for aceitável em sua política de `Cache-Control`
+
+## Apêndice: `Cache-Control` {: #flowchart }
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="Fluxograma", width="595", height="600"%}
+
+## Apêndice: `Cache-Control` {: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Valor de <code>Cache-Control</code>
+</th>
+        <th>Explicação</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>A resposta pode ser armazenada em cache por navegadores e caches intermediários durante até um dia (60 segundos x 60 minutos x 24 horas).</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>A resposta pode ser armazenada em cache pelo navegador (mas não caches intermediários) durante até 10 minutos (60 segundos x 10 minutos).</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>A resposta pode ser armazenada por qualquer cache durante um ano.</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>A resposta não pode ser armazenada em cache e deve ser buscada na íntegra em cada solicitação.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/pt/reliable/index.md b/src/site/content/pt/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/pt/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/pt/reliable/offline-cookbook/index.md b/src/site/content/pt/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..8f1bbc50e9f
--- /dev/null
+++ b/src/site/content/pt/reliable/offline-cookbook/index.md
@@ -0,0 +1,616 @@
+---
+layout: post
+title: O guia off-line
+description: Algumas receitas comuns para fazer seu aplicativo funcionar off-line.
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+Com o [Trabalho de Serviço](/service-workers-cache-storage/), desistimos de tentar resolver problemas off-line e demos aos desenvolvedores os componentes móveis para que resolvessem por conta própria. Você obtém controle do armazenamento em cache e de como as solicitações são tratadas. Isso significa que é possível criar seus próprios padrões. Vamos dar uma olhada em alguns padrões possíveis de forma isolada. Mas, na prática, provavelmente você usará muitos deles em conjunto, dependendo da URL e do contexto.
+
+Para obter uma demonstração do trabalho de alguns desses padrões, consulte [Treinamento para surpreender](https://jakearchibald.github.io/trained-to-thrill/) e [este vídeo](https://www.youtube.com/watch?v=px-J9Ghvcx4) que mostra o impacto no desempenho.
+
+## A máquina de cache — quando armazenar recursos
+
+O [Trabalho de Serviço](/service-workers-cache-storage/) permite que você lide com solicitações independentemente do armazenamento em cache. Portanto, irei demonstrá-los separadamente. Em primeiro lugar, o armazenamento em cache, quando deve ser feito?
+
+### Na instalação — como uma dependência {: #on-install-as-dependency }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="Na instalação — como uma dependência.", width="800", height="498" %}<figcaption>Na instalação — como uma dependência.</figcaption></figure>
+
+O Trabalho de Serviço oferece um evento `install` Você pode usar isso para preparar as coisas, coisas que devem estar prontas antes de lidar com outros eventos. Enquanto isso acontece, qualquer versão anterior do seu Trabalho de Serviço ainda está em execução e atendendo páginas, então as coisas que você faz aqui não devem atrapalhar.
+
+**Ideal para:** CSS, imagens, fontes, JS, templates… basicamente tudo que você consideraria estático para essa "versão" do seu site.
+
+São elementos que tornariam seu site totalmente não funcional se não fossem buscadas, coisas que um aplicativo específico de plataforma equivalente tornaria parte do download inicial.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil` assume a promessa de definir a duração e o sucesso da instalação. Se a promessa for rejeitada, a instalação será considerada uma falha e este Trabalho de Serviço será abandonado (se uma versão mais antiga estiver em execução, será deixada intacta). `caches.open()` e `cache.addAll()` retornam promessas. Se algum dos recursos falhar ao ser buscado, a `cache.addAll()` rejeitada.
+
+No [treinamento para surpreender,](https://jakearchibald.github.io/trained-to-thrill/) eu uso isso para [armazenar ativos estáticos em cache](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3).
+
+### Na instalação — não como uma dependência {: #on-install-not }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt = "Na instalação — não como uma dependência.", width="800", height="500" %}<figcaption> Na instalação — não como uma dependência.</figcaption></figure>
+
+Isso é semelhante ao anterior, mas não atrasará a conclusão da instalação e não fará com que a instalação falhe se o cache falhar.
+
+**Ideal para:** recursos maiores que não são necessários imediatamente, como ativos para níveis posteriores de um jogo.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+O exemplo acima não passa a promessa `cache.addAll` para os níveis 11–20 de volta para `event.waitUntil`. Então, mesmo se falhar, o jogo ainda estará disponível off-line. Claro, você terá que cuidar da possível ausência desses níveis e tentar armazená-los novamente em cache, se estiverem ausentes.
+
+O Trabalho de Serviço pode ser eliminado durante o download dos níveis 11–20, uma vez que concluiu o tratamento de eventos, o que significa que eles não serão armazenados em cache. No futuro, a [API Web Periodic Background Synchronization](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API) tratará casos como este e de downloads maiores, como filmes. Essa API atualmente é compatível apenas com bifurcações Chromium.
+
+### Na ativaçao {: #on-activate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt = "Ativado.", width="800", height="500" %}<figcaption>Ativado.</figcaption></figure>
+
+**Ideal para:** limpeza e migração.
+
+Depois que um novo Trabalho de Serviço é instalado e uma versão anterior não está sendo usada, a nova é ativada e você obtém um evento `activate`. Como a versão antiga não está atrapalhando, é um bom momento para lidar com [migrações de esquema no IndexedDB](/indexeddb-best-practices/) e também excluir caches não utilizados.
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+Durante a ativação, outros eventos, como `fetch` são colocados em uma fila. Portanto, uma ativação longa pode bloquear potencialmente os carregamentos de página. Mantenha sua ativação o mais enxuta possível e use-a apenas para coisas que você *não poderia* fazer enquanto a versão antiga estava ativa.
+
+No [treinamento para surpreender,](https://jakearchibald.github.io/trained-to-thrill/) eu uso isso para [remover caches antigos](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17).
+
+### Na interação do usuário {: #on-user-interaction }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="Na interação do usuário.", width="800", height="222" %}<figcaption> Na interação do usuário.</figcaption></figure>
+
+**Ideal para:** quando o site inteiro não pode ser colocado off-line e você opta por permitir que o usuário selecione o conteúdo que deseja disponibilizar off-line. Por exemplo, um vídeo em algo como o YouTube, um artigo na Wikipedia, uma galeria particular no Flickr.
+
+Dê ao usuário um botão "Ler mais tarde" ou "Salvar para offline". Quando for clicado, busque o que você precisa da rede e coloque-o no cache.
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+A [API de caches](https://developer.mozilla.org/docs/Web/API/Cache) está disponível nas páginas e também nos trabalhos de serviço, o que significa que você não precisa envolvê-lo para adicionar coisas ao cache.
+
+### Na resposta da rede {: #on-network-response }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="Na resposta da rede.", width="800", height="390" %}<figcaption>Na resposta da rede.</figcaption></figure>
+
+**Ideal para:** atualizar recursos com frequência, como a caixa de entrada de um usuário ou conteúdo de artigo. Também é útil para conteúdo não essencial, como avatares, mas é preciso ter cuidado.
+
+Se uma solicitação não corresponder a nada no cache, obtenha-a na rede, envie-a para a página e adicione-a ao cache ao mesmo tempo.
+
+Se fizer isso para uma variedade de URLs, como avatares, você precisará ter cuidado para não sobrecarregar o armazenamento de sua origem. Se o usuário precisa recuperar espaço em disco, você não quer ser o principal candidato. Não se esqueça de eliminar os itens do cache de que não precisa mais.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+Para permitir o uso eficiente da memória, você só pode ler o corpo de uma resposta/solicitação uma vez. O código acima usa [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) para criar cópias adicionais que podem ser lidas separadamente.
+
+No [treinamento para surpreender,](https://jakearchibald.github.io/trained-to-thrill/) eu uso isso para [armazenar imagens do Flickr em cache](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109).
+
+### Obsoleto na revalidação {: #stale-while-revalidate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="Obsoleto na revalidação.", width="800", height="388" %}<figcaption>Obsoleto na revalidação.</figcaption></figure>
+
+**Ideal para:** atualização frequente de recursos em que não é necessário ter a versão mais recente. Os avatares podem se enquadrar nesta categoria.
+
+Se houver uma versão em cache disponível, use-a, mas busque uma atualização para a próxima vez.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+Isso é muito semelhante ao [obsoleto na revalidação](https://www.mnot.net/blog/2007/12/12/stale) do HTTP.
+
+### Na mensagem por push {: #on-push-message }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="Na mensagem por push.", width="800", height="498" %}<figcaption>Na mensagem por push.</figcaption></figure>
+
+A [API Push](/push-notifications/) é outro recurso criado com base no Trabalho de Serviço. Isso permite que o Trabalho de Serviço seja despertado em resposta a uma mensagem do serviço de mensagens do sistema operacional. Isso acontece mesmo quando o usuário não tem uma guia aberta no seu site. Apenas o Trabalho de Serviço é despertado. Você solicita permissão para fazer isso a partir de uma página e o usuário será solicitado.
+
+**Ideal para:** conteúdo relacionado a uma notificação, como uma mensagem de bate-papo, uma notícia de última hora ou um e-mail. Também não muda com frequência o conteúdo que se beneficia da sincronização imediata, como uma atualização da lista de tarefas ou uma alteração do calendário.
+
+{% YouTube '0i7YdSEQI1w' %}
+
+O resultado final comum é uma notificação que, ao tocar nela, abre/focaliza uma página relevante, mas para a qual a atualização dos caches é *extremamente* importante antes que isso aconteça. O usuário está obviamente on-line no momento que receber a mensagem por push, mas pode não estar quando finalmente interagir com a notificação. Portanto, disponibilizar esse conteúdo off-line é importante.
+
+Este código atualiza os caches antes de mostrar uma notificação:
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### Na sincronização em segundo plano {: #on-background-sync }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="Na sincronização em segundo plano.", width="800", height="219" %}<figcaption>Na sincronização em segundo plano.</figcaption></figure>
+
+A [sincronização em segundo plano](https://developer.chrome.com/blog/background-sync/) é outro recurso criado com base no Trabalho de Serviço. Ele permite que você solicite a sincronização de dados em segundo plano como um intervalo único ou em um intervalo (extremamente heurístico). Isso acontece mesmo quando o usuário não tenha uma guia aberta no seu site. Apenas o Trabalho de Serviço é despertado. Você solicita permissão para fazer isso a partir de uma página e o usuário será solicitado.
+
+**Ideal para:** atualizações não urgentes, especialmente aquelas que acontecem tão regularmente que uma mensagem por push a cada atualização seria muito frequente para os usuários, como cronogramas sociais ou artigos de notícias.
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## Persistência de cache {: #cache-persistence }
+
+Sua origem recebe uma certa quantidade de espaço livre para fazer o que quiser. Esse espaço livre é compartilhado entre todo o armazenamento de origem: [(local) Storage](https://developer.mozilla.org/docs/Web/API/Storage), [IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB), [File System Access](/file-system-access/) e, obviamente [Caches](https://developer.mozilla.org/docs/Web/API/Cache).
+
+O valor que você recebe não é especificado. Vai ser diferente dependendo do dispositivo e das condições de armazenamento. Você pode descobrir quanto você tem via:
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+No entanto, como todo armazenamento de navegador, o navegador está livre para jogar fora seus dados se o dispositivo estiver sob pressão de armazenamento. Infelizmente, o navegador não consegue diferenciar os filmes que você deseja manter a todo custo e o jogo com o qual você realmente não se importa.
+
+Para contornar isso, use a interface [StorageManager:](https://developer.mozilla.org/docs/Web/API/StorageManager)
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+Claro que o usuário deve conceder permissão. Para isso, use a API de permissões.
+
+Tornar o usuário parte desse fluxo é importante, pois agora podemos esperar que ele esteja no controle da exclusão. Se o dispositivo ficar sob pressão de armazenamento e a limpeza de dados não essenciais não resolver o problema, o usuário poderá avaliar quais itens manter e remover.
+
+Para que isso funcione, é necessário que os sistemas operacionais tratem as origens "duráveis" como equivalentes aos aplicativos específicos da plataforma em suas análises de uso de armazenamento, em vez de relatar o navegador como um único item.
+
+## Atendendo sugestões — respondendo a solicitações {: #serving-suggestions }
+
+Não importa quanto cache você faça, o trabalho de serviço não usará o cache, a menos que você diga quando e como. Aqui estão alguns padrões para lidar com solicitações:
+
+### Apenas cache {: #cache-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="Apenas cache.", width="800", height="272" %}<figcaption>Apenas cache.</figcaption></figure>
+
+**Ideal para:** qualquer coisa que você considere estática para uma "versão" específica de seu site. Você deve ter armazenado em cache no evento de instalação, para que possa contar com sua presença.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+… Embora você não precise lidar com esse caso especificamente, [Cache, fazendo fallback para a rede](#cache-falling-back-to-network) aborda esse assunto.
+
+### Apenas rede {: #network-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="Apenas rede.", width="800", height="272" %}<figcaption>Apenas rede.</figcaption></figure>
+
+**Ideal para:** coisas que não têm equivalente off-line, como pings analíticos, solicitações não GET.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+… Embora você não precise lidar com esse caso especificamente, [Cache, fazendo fallback para a rede](#cache-falling-back-to-network) aborda esse assunto.
+
+### Cache, fazendo fallback para a rede{: #cache-falling-back-to-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="Cache, fazendo fallback para a rede.", width="800", height="395"%}<figcaption>Cache, fazendo fallback para a rede.</figcaption></figure>
+
+**Ideal para:** construir o primeiro projeto off-line. Nesses casos, é assim que você lidará com a maioria das solicitações. Outros padrões serão exceções com base na solicitação recebida.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+Isso fornece o comportamento "somente cache" para itens no cache e o comportamento "somente rede" para qualquer coisa não armazenada em cache (o que inclui todas as solicitações não GET, já que não podem ser armazenadas em cache).
+
+### Cache e corrida de rede {: #cache-and-network-race }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="Cache e corrida de rede.", width="800", height="427 "%}<figcaption>Cache e corrida de rede.</figcaption></figure>
+
+**Ideal para:** pequenos ativos em que você busca desempenho em dispositivos com acesso lento ao disco.
+
+Com algumas combinações de discos rígidos mais antigos, antivírus e conexões de internet mais rápidas, obter recursos da rede pode ser mais rápido do que ir para o disco. No entanto, ir para a rede quando o usuário tem o conteúdo em seu dispositivo pode ser um desperdício de dados. Portanto, tenha isso em mente.
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### Rede fazendo fallback para o cache {: #network-falling-back-to-cache }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="Rede fazendo fallback para o cache.", width="800", height="388" %}<figcaption>Rede fazendo fallback para o cache.</figcaption></figure>
+
+**Ideal para:** uma solução rápida para recursos que se atualizam com frequência, fora da "versão" do site. Por exemplo, artigos, avatares, cronogramas de mídia social e placares de jogos.
+
+Isso significa que você fornece aos usuários online o conteúdo mais atualizado, mas os usuários offline obtêm uma versão em cache mais antiga. Se a solicitação de rede for bem-sucedida, provavelmente você desejará [atualizar a entrada do cache](#on-network-response).
+
+No entanto, esse método tem falhas. Se o usuário tiver uma conexão intermitente ou lenta, terá que esperar que a rede falhe antes de obter o conteúdo perfeitamente aceitável já em seu dispositivo. Isso pode levar muito tempo e é uma experiência frustrante para o usuário. Consulte o próximo padrão, [Cache e rede](#cache-then-network), para obter uma solução melhor.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### Cache e rede {: #cache-then-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="Cache e rede.", width="800", height="478" %}<figcaption> Cache e rede.</figcaption></figure>
+
+**Ideal para:** conteúdo que é atualizado com frequência. Por exemplo, artigos, cronogramas de mídia social e jogos, além de placares.
+
+Isso exige que a página faça duas solicitações, uma para o cache e outra para a rede. A ideia é mostrar primeiro os dados armazenados em cache e, em seguida, atualizar a página quando/se os dados da rede chegarem.
+
+Às vezes, você pode simplesmente substituir os dados atuais quando novos dados chegarem (por exemplo, placar do jogo), mas isso pode gerar falhas com partes maiores de conteúdo. Basicamente, não "desapareça" algo que o usuário possa estar lendo ou interagindo.
+
+O Twitter adiciona o novo conteúdo acima do conteúdo antigo e ajusta a posição de rolagem para que o usuário não seja interrompido. Isso é possível porque o Twitter retém principalmente uma ordem linear para o conteúdo. Copiei esse padrão para que o [Treinamento para supreender](https://jakearchibald.github.io/trained-to-thrill/) coloque conteúdo na tela o mais rápido possível, enquanto exibe o conteúdo atualizado assim que chega.
+
+**Código na página:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**Código no Trabalho de Serviço:**
+
+Você deve sempre acessar a rede e atualizar o cache durante o processo.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+No [Treinamento para supreender](https://jakearchibald.github.io/trained-to-thrill/), contornei isso usando [XHR em vez de buscar](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3) e abusando do cabeçalho Aceitar para informar ao Trabalho de Serviço onde obter o resultado do [código da página](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70), [código do Trabalho de Serviço](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)).
+
+### Fallback genérico {: #generic-fallback}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="Fallback genérico.", width="800", height="389" %}<figcaption>Substituto genérico.</figcaption></figure>
+
+Se você falhar em atender algo do cache e/ou rede, você pode querer fornecer um fallback genérico.
+
+**Ideal para:** imagens secundárias, como avatares, solicitações POST com falha e "Indisponível enquanto off-line", página.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+O item para o qual você faz fallback provavelmente é uma [dependência de instalação](#on-install-as-dependency).
+
+Se sua página estiver postando um e-mail, seu trabalho de serviço pode voltar a armazenar o e-mail em uma "caixa de saída" do IndexedDB e responder informando à página que o envio falhou, mas os dados foram retidos com sucesso.
+
+### Templates no trabalho de serviço {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="Template no trabalho de serviço.", width="800", height="463"%}<figcaption>Template no trabalho de serviço.</figcaption></figure>
+
+**Ideal para:** páginas que não podem ter a resposta do servidor em cache.
+
+[Renderizar páginas no servidor torna as coisas mais rápidas](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), mas isso pode significar incluir dados de estado que podem não fazer sentido em um cache, por exemplo, "Conectado como…". Se sua página for controlada por um trabalho de serviço, você pode optar por solicitar dados JSON junto com um template e renderizar.
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## Conclusão
+
+Você não está limitado a um desses métodos. Na verdade, você provavelmente usará muitos deles, dependendo da URL de solicitação. Por exemplo, [Treinamento para surpreender](https://jakearchibald.github.io/trained-to-thrill/) usa:
+
+- [cache na instalação](#on-install-as-dependency), para a interface do usuário estática e comportamento
+- [cache na resposta da rede](#on-network-response), para as imagens e dados do Flickr
+- [buscar do cache, fazendo fallback para a rede](#cache-falling-back-to-network), na maioria das solicitações
+- [buscar do cache e rede](#cache-then-network), para os resultados de pesquisa do Flickr
+
+Basta olhar para a solicitação e decidir o que fazer:
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+… Você entendeu.
+
+### Créditos
+
+… Para os ícones adoráveis:
+
+- [Código](http://thenounproject.com/term/code/17547/), de buzzyrobot
+- [Calendário](http://thenounproject.com/term/calendar/4672/), de Scott Lewis
+- [Rede](http://thenounproject.com/term/network/12676/), de Ben Rizzo
+- [SD](http://thenounproject.com/term/sd-card/6185/), de Thomas Le Bas
+- [CPU](http://thenounproject.com/term/cpu/72043/) por iconsmind.com
+- [Lixo](http://thenounproject.com/term/trash/20538/), de trasnik
+- [Notificação](http://thenounproject.com/term/notification/32514/), de @daosme
+- [Layout](http://thenounproject.com/term/layout/36872/), de Mister Pixel
+- [Nuvem](http://thenounproject.com/term/cloud/2788/), de PJ Onori
+
+E obrigado a [Jeff Posnick](https://twitter.com/jeffposnick) por detectar muitos erros gritantes antes que eu clicasse em "publicar".
+
+### Leitura adicional
+
+- [Trabalhos de serviço — uma introdução](/service-workers-cache-storage/)
+- [O trabalho de serviço está pronto?](https://jakearchibald.github.io/isserviceworkerready/) — monitore o status de implementação nos navegadores principais
+- [Promessas do JavaScript — uma introdução](/promises), guia para promessas
diff --git a/src/site/content/pt/reliable/offline-ux-design-guidelines/index.md b/src/site/content/pt/reliable/offline-ux-design-guidelines/index.md
new file mode 100644
index 00000000000..bf364e35a0e
--- /dev/null
+++ b/src/site/content/pt/reliable/offline-ux-design-guidelines/index.md
@@ -0,0 +1,202 @@
+---
+layout: post
+title: Diretrizes de design UX offline
+subhead: Um guia para projetar experiências da web para redes lentas e offline.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+date: 2016-11-10
+updated: 2021-05-28
+tags:
+  - progressive-web-apps
+  - ux
+  - network
+  - offline
+---
+
+Este artigo contém diretrizes de design sobre como criar uma ótima experiência em redes lentas e off-line.
+
+A qualidade de uma conexão de rede é influenciada por uma série de fatores, como:
+
+- Má cobertura de um provedor.
+- Condições climáticas extremas.
+- Quedas de energia.
+- Entrar em "zonas mortas" permanentes, como edifícios com paredes que bloqueiam as conexões de rede.
+- Entrar em "zonas mortas" temporárias, como quando se viaja em um trem e atravessa um túnel.
+- Conexões de Internet com tempo limitado, como aquelas em aeroportos ou hotéis.
+- Práticas culturais que exigem acesso limitado ou nenhum acesso à Internet em horários ou dias específicos.
+
+Seu objetivo é fornecer uma boa experiência que reduza o impacto das mudanças na conectividade.
+
+## Decida o que mostrar aos seus usuários quando eles tiverem uma conexão de rede ruim
+
+A primeira pergunta que deve ser feita é como é o sucesso e a falha de uma conexão de rede? Uma conexão bem-sucedida é a experiência online normal do seu aplicativo. A falha de uma conexão, no entanto, pode ser tanto o estado offline do seu aplicativo quanto a forma como o aplicativo se comporta quando há uma rede lenta.
+
+Ao pensar sobre o sucesso ou falha de uma conexão de rede, você precisa se perguntar estas importantes questões de UX:
+
+- Quanto tempo você espera para determinar o sucesso ou a falha de uma conexão?
+- O que você pode fazer enquanto o sucesso ou o fracasso estão sendo determinados?
+- O que você deve fazer em caso de falha?
+- Como você informa o usuário sobre o acima?
+
+### Informar aos usuários sobre seu estado atual e mudança de estado
+
+Informe o usuário sobre as ações que ele ainda pode realizar quando houver uma falha de rede e o estado atual do aplicativo. Por exemplo, uma notificação poderia dizer:
+
+> Você parece ter uma conexão de rede ruim. Não se preocupe! As mensagens serão enviadas quando a rede for restaurada.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/roxoXuJ9x7qUHFVWMgXZ.png", alt="O aplicativo de mensagens emoji Emojoy informa ao usuário quando ocorre uma mudança de estado.", width="335", height="601" %} <figcaption> Informe claramente o usuário quando uma mudança de estado ocorrer o mais rápido possível. </figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GvE07BeSsnTyxnRbkZhz.png", alt="O aplicativo E/S 2016 informa ao usuário quando ocorre uma mudança de estado", width="335", height="601" %} <figcaption> O aplicativo Google E/S usou um "brinde" do Material Design para permitir que o usuário soubesse quando estava off-line.</figcaption></figure>
+
+### Informe os usuários quando a conexão de rede melhorar ou for restaurada
+
+A maneira como você informa ao usuário que a conexão de rede dele melhorou depende do seu aplicativo. Aplicativos como um aplicativo de mercado de ações que priorizam as informações atuais devem se atualizar automaticamente e notificar o usuário o mais rápido possível.
+
+É recomendável que você informe ao usuário que seu aplicativo da web foi atualizado "em segundo plano" usando uma dica visual como, por exemplo, um elemento de brinde de material design. Isso envolve a detecção da presença de um service worker e uma atualização de seu conteúdo gerenciado. Você pode ver um exemplo de código dessa <a href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">função em operação aqui</a>.
+
+Um exemplo disso seria o [Chrome Platform Status,](https://chromestatus.com) que posta uma nota para o usuário quando o aplicativo é atualizado.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ikam7evJEVSicAnVxvWA.png", alt="Um exemplo de aplicativo de previsão do tempo.", width="324", height="598" %} <figcaption> Alguns aplicativos, como o aplicativo de clima, precisam ser atualizados automaticamente, pois os dados antigos não são úteis.</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5TtIkRCPsuxAOajX8LPF.png", alt="Status do Chrome usa um brinde", width="336", height="598" %} <figcaption> Aplicativos como o Chrome Status permitem que o usuário saiba quando o conteúdo foi atualizado por meio de uma notificação do sistema.</figcaption></figure>
+
+Você também pode mostrar a última vez que o aplicativo foi atualizado em todos os momentos em um espaço de destaque. Isso seria útil para um aplicativo de conversor de moeda, por exemplo.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nK4V7aUvmLvaNJgF1S2I.png", alt="O aplicativo Material Money está desatualizado.", width = "324", height = "598"%}<figcaption> Material Money armazena taxas em cache...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wqaFuHzeAC2wR0D3pt7R.png", alt="Material Money foi atualizado", width="324", height="598" %} <figcaption> …e notifica o usuário quando o aplicativo é atualizado.</figcaption></figure>
+
+Aplicativos, como de notícias, podem mostrar uma notificação simples toque para atualizar informando o usuário sobre o novo conteúdo. A atualização automática faria com que os usuários perdessem seus lugares.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="Um exemplo de aplicativo de notícias, Tailpiece, em seu estado normal", width="360", height="665" %} <figcaption> Tailpiece, um jornal online, fará o download automático das últimas notícias...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WNIMNF14cSF29fntl1Lc.png", alt="Exemplo de aplicativo de notícias, Tailpiece quando estiver pronto para ser atualizado", width="360", height="665" %} <figcaption> …mas permite que os usuários atualizem manualmente para que não percam seu lugar em um artigo.</figcaption></figure>
+
+### Atualize a IU para refletir o estado contextual atual
+
+Cada bit de IU pode ter seu próprio contexto e funcionalidade, que mudarão dependendo se for necessária uma conexão bem-sucedida. Um exemplo seria um site de comércio eletrônico que pode ser navegado offline. O botão Comprar e o preço seriam desativados até que a conexão fosse restabelecida.
+
+Outras formas de estados contextuais podem incluir dados. Por exemplo, o aplicativo financeiro Robinhood permite que os usuários comprem ações e usa cores e gráficos para notificar o usuário quando o mercado está aberto. Toda a interface fica branca e depois acinzentada quando o mercado fecha. Quando o valor do estoque aumenta ou diminui, cada widget de estoque individual fica verde ou vermelho, dependendo de seu estado.
+
+### Eduque o usuário para que ele entenda o que é o modelo off-line
+
+Off-line é um novo modelo mental para todos. Você precisa instruir seus usuários sobre quais mudanças ocorrerão quando eles não tiverem uma conexão. Informe-os sobre onde os dados grandes são salvos e forneça configurações para alterar o comportamento padrão. Certifique-se de usar vários componentes de design de IU, como linguagem informativa, ícones, notificações, cores e imagens para transmitir essas ideias coletivamente, em vez de depender de uma única escolha de design, como um ícone próprio, para contar a história toda.
+
+## Fornece uma experiência offline por padrão
+
+Se seu aplicativo não requer muitos dados, armazene esses dados em cache por padrão. Os usuários podem ficar cada vez mais frustrados se só puderem acessar seus dados com uma conexão de rede. Tente tornar a experiência o mais estável possível. Uma conexão instável fará com que seu aplicativo pareça não confiável, enquanto um aplicativo que diminui o impacto de uma falha de rede parecerá mágico para o usuário.
+
+Os sites de notícias podem se beneficiar com o download e salvamento automáticos das notícias mais recentes, para que o usuário possa ler as notícias de hoje sem uma conexão, talvez baixando o texto sem as imagens do artigo. Além disso, adapte-se ao comportamento do usuário. Por exemplo, se a seção de esportes é o que eles costumam ver, faça disso o download prioritário.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M39yiHQYpXacVII6d7zX.png", alt="Tailpiece informa o usuário que está offline com vários widgets de design", width="360", height="665" %} <figcaption> Se o dispositivo estiver off-line, Tailpiece irá notificar o usuário com uma mensagem de status...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KpkzjYNoCWquWKXTvM28.png", alt="O Tailpiece tem um indicador visual que mostra quais seções estão prontas para uso off-line..", width="360", height="665" %} <figcaption> Informando que eles podem, pelo menos parcialmente, ainda usar o aplicativo.</figcaption></figure>
+
+{% Aside %} Quando se trata de comunicar o status de um aplicativo, dizer "A rede está fora do ar" envia a mensagem de que a rede do aplicativo está com problemas, enquanto "Você está desconectado" deixa claro para o usuário que o problema está no lado dele. {% endAside %}
+
+## Informe o usuário quando o aplicativo estiver pronto para consumo offline
+
+Quando um aplicativo da web é carregado pela primeira vez, você precisa indicar ao usuário se ele está pronto para uso offline. Faça isso com um [widget que fornece um breve feedback](https://material.io/components/snackbars) sobre uma operação por meio de uma mensagem na parte inferior da tela, como, por exemplo, quando uma seção foi sincronizada ou um arquivo de dados foi baixado.
+
+Pense novamente na linguagem que está usando para ter certeza de que é adequada para o seu público. Certifique-se de que a mensagem seja fornecida da mesma forma em todas as instâncias em que é usada. O termo offline geralmente é mal interpretado por um público não técnico, então use uma linguagem baseada em ação com a qual seu público possa se identificar.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fNOute6xBzFcDUNMeXDe.png", alt="Aplicativo de E/S off-line", width="360", height="664" %} <figcaption> O aplicativo Google E/S 2016 notifica o usuário quando o aplicativo está pronto para uso off-line...</figcaption></figure>
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Od6jUnazP8n7CMe18G2C.png", alt="Site de status do Chrome está off-line", width="360", height="664" %} <figcaption>...e também o site Chrome Platform Status, que inclui informações sobre o armazenamento ocupado.</figcaption></figure>
+
+### Torne a função 'salvar para off-line' uma parte óbvia da interface para aplicativos com muitos dados
+
+Se um aplicativo usar grandes quantidades de dados, certifique-se de que haja uma chave ou pino para adicionar um item para uso off-line em vez de download automático, a menos que um usuário tenha solicitado especificamente esse comportamento por meio de um menu de configurações. Certifique-se de que o pino ou a IU de download não sejam obscurecidos por outros elementos da IU e que o recurso seja óbvio para o usuário.
+
+Um exemplo seria um reprodutor de música que requer grandes arquivos de dados. O usuário está ciente do custo de dados associado, mas também pode querer usar o player offline. Baixar música para uso posterior requer que o usuário planeje com antecedência, portanto, pode ser necessária educação sobre isso durante a integração.
+
+### Esclareça o que está disponível offline
+
+Seja claro quanto à opção que você está fornecendo. Pode ser necessário mostrar uma guia ou configuração que mostra uma "biblioteca offline" ou [índice de conteúdo](/content-indexing-api/), para que o usuário possa ver facilmente o que armazenou em seu telefone e o que precisa ser salvo. Certifique-se de que as configurações sejam concisas e deixe claro onde os dados serão armazenados e quem tem acesso a eles.
+
+### Mostra o custo real de uma ação
+
+Muitos usuários equiparam a capacidade offline com 'download'. Os usuários em países onde as conexões de rede falham regularmente ou não estão disponíveis geralmente compartilham conteúdo com outros usuários ou salvam conteúdo para uso offline quando têm conectividade.
+
+Os usuários em planos de dados podem evitar o download de arquivos grandes por medo do custo, portanto, você também pode desejar exibir um custo associado para que os usuários possam fazer uma comparação ativa para um arquivo ou tarefa específica. Por exemplo, se o aplicativo de música acima puder detectar se o usuário está em um plano de dados e mostrar o tamanho do arquivo para que os usuários possam ver o custo de um arquivo.
+
+### Ajude a prevenir experiências hackeadas
+
+Freqüentemente, os usuários invadem uma experiência sem perceber que estão fazendo isso. Por exemplo, antes dos aplicativos da web de compartilhamento de arquivos baseados em nuvem, era comum os usuários salvarem arquivos grandes e anexá-los a e-mails para que pudessem continuar editando em um dispositivo diferente. É importante não ser puxado para a experiência de hackeado, mas sim olhar para o que eles estão tentando alcançar. Em outras palavras, em vez de pensar em como você pode tornar a anexação de um arquivo grande mais amigável, resolva o problema de compartilhamento de arquivos grandes em vários dispositivos.
+
+## Torne as experiências transferíveis de um dispositivo para outro
+
+Ao construir para redes instáveis, tente sincronizar assim que a conexão melhorar para que a experiência seja transferível. Por exemplo, imagine um aplicativo de viagens perdendo uma conexão de rede no meio de uma reserva. Quando a conexão é restabelecida, o aplicativo sincroniza com a conta do usuário, permitindo que ele continue sua reserva em seu dispositivo desktop. Não poder transferir experiências pode ser incrivelmente chocante para os usuários.
+
+Informa o usuário sobre o estado atual de seus dados. Por exemplo, você pode mostrar se o aplicativo foi sincronizado. Eduque-os sempre que possível, mas tente não sobrecarregá-los com mensagens.
+
+## Crie experiências de design inclusivas
+
+Ao projetar, procure ser inclusivo, fornecendo dispositivos de design significativos, linguagem simples, iconografia padrão e imagens significativas que guiarão o usuário para concluir a ação ou tarefa em vez de impedir seu progresso.
+
+### Use uma linguagem simples e concisa
+
+Uma boa UX não se trata apenas de uma interface bem projetada. Inclui o caminho que o usuário segue, bem como as palavras usadas no aplicativo. Evite jargões técnicos ao explicar o estado do aplicativo ou de componentes individuais da IU. Considere que a frase "aplicativo offline" pode não transmitir ao usuário o estado atual do aplicativo.
+
+<div class="switcher">{% Compare 'worse' %} <figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MaYiuInHsZ2mbPQcbD4l.png", alt="Um ícone de service worker é um mau exemplo", width="350", height="149" %} <figcaption> Evite termos que não sejam inteligíveis para usuários sem conhecimento técnico.</figcaption></figure> {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html">
+<figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIjYKLFK5DbrDJDJeDqu.png", alt="Um ícone de download é um bom exemplo", width="350", height="149" %} <figcaption> Use uma linguagem e imagens que descrevam a ação.</figcaption> </figure> {% endCompare %}</div>
+
+### Use vários dispositivos de design para criar experiências de usuário acessíveis
+
+Use linguagem, cor e componentes visuais para demonstrar uma mudança de estado ou status atual. O uso exclusivo de cores para demonstrar o estado pode não ser percebido pelo usuário e pode estar inacessível para usuários com deficiência visual. Além disso, o instinto dos designers é usar a IU acinzentada para representar off-line, mas isso pode ter um significado carregado na web. A IU acinzentada, como elementos de entrada em um formulário, também significa que um elemento está desabilitado. Isso pode causar confusão se você usar *apenas* cores para representar o estado.
+
+Para evitar mal-entendidos, expresse diferentes estados para o usuário de várias maneiras, por exemplo, com cores, rótulos e componentes de IU.
+
+<div class="switcher">{% Compare 'worse' %} <figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uj28SN1ZepiIvya4YTe1.png", alt="Um exemplo ruim apenas usando cores.", width="720", height="368" %} <figcaption>  Use a cor como único meio de descrever o que está acontecendo. </figcaption> </figure> {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html">
+<figure style="display: inline-block; max-width: 45%;"> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/s78eC2GBEkDQouqhBYMO.png", alt="Um bom exemplo que usa cor e texto para mostrar um erro.", width="720", height="368" %} <figcaption> Use uma mistura de elementos de design para transmitir significado </figcaption> </figure> {% endCompare %}</div>
+
+### Use ícones que transmitam significado
+
+Certifique-se de que as informações sejam transmitidas corretamente com rótulos de texto significativos, bem como ícones. Ícones por si só podem ser problemáticos, uma vez que o conceito de off-line na web é relativamente novo. Os usuários podem interpretar mal os ícones usados por conta própria. Por exemplo, usar um disquete para salvar faz sentido para uma geração mais velha, mas os usuários mais jovens que nunca viram um disquete podem ficar confusos com a metáfora. Da mesma forma, o ícone do menu 'hambúrguer' costuma confundir os usuários quando apresentado sem um rótulo.
+
+Ao introduzir um ícone off-line, tente permanecer consistente com os visuais padrão da indústria (quando existirem), além de fornecer um rótulo de texto e uma descrição. Por exemplo, salvar para offline pode ser um ícone de download típico ou, se a ação envolver a sincronização, pode ser um ícone de sincronização. Algumas ações podem ser interpretadas como salvamento para offline em vez de demonstrar o status de uma rede. Pense na ação que você está tentando transmitir, em vez de apresentar ao usuário um conceito abstrato. Por exemplo, salvar ou baixar dados seria baseado em ações.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/h2FFD3nLIOdSzWg5H5kO.png", alt="Diversos exemplos de ícones que transmitem a ideia de conteúdo off-line", width="700", height="299" %}
+
+Off-line pode significar uma série de coisas, dependendo do contexto, como baixar, exportar, fixar, etc. Para obter mais inspiração, verifique o [conjunto de ícones do Material Design](https://material.io/resources/icons/).
+
+### Use layouts de esqueleto com outros mecanismos de feedback
+
+Um layout de esqueleto é essencialmente uma versão wireframe de seu aplicativo que é exibida enquanto o conteúdo está sendo carregado. Isso ajuda a demonstrar ao usuário que o conteúdo está prestes a ser carregado. Considere também o uso de uma IU do pré-carregador, com um rótulo de texto informando ao usuário que o aplicativo está sendo carregado. Um exemplo seria pulsar o conteúdo do wireframe, dando ao aplicativo a sensação de que está vivo e carregando. Isso garante ao usuário que algo está acontecendo e ajuda a evitar reenvios ou atualizações de seu aplicativo.
+
+<figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUIrcbblhHe5YPSrrwRy.png", alt="Um exemplo de layout de esqueleto", width="360", height="665" %} <figcaption> O esqueleto do layout do espaço reservado é mostrado durante o download do artigo...</figcaption></figure><figure style="display: inline-block; max-width: 45%;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rRLScscdU9BE9Wt4RYAx.png", alt="Um exemplo de artigo carregado", width="360", height="665" %} <figcaption>...que é substituído pelo conteúdo real assim que o download termina.</figcaption></figure>
+
+### Não bloqueie o conteúdo
+
+Em alguns aplicativos, um usuário pode acionar uma ação, como a criação de um novo documento. Alguns aplicativos tentarão se conectar a um servidor para sincronizar o novo documento e para demonstrar isso, eles exibem uma caixa de diálogo modal de carregamento intrusiva que cobre toda a tela. Isso pode funcionar bem se o usuário tiver uma conexão de rede estável, mas se a rede estiver instável, ele não conseguirá escapar dessa ação e a IU efetivamente os impede de fazer qualquer outra coisa. As solicitações de rede que bloqueiam o conteúdo devem ser evitadas. Permita que o usuário continue a navegar em seu aplicativo e a enfileirar tarefas que serão realizadas e sincronizadas assim que a conexão for aprimorada.
+
+Demonstre o estado de uma ação fornecendo feedback aos usuários. Por exemplo, se um usuário estiver editando um documento, considere alterar o design do feedback para que fique visivelmente diferente de quando eles estão online, mas ainda mostre que o arquivo foi "salvo" e será sincronizado quando eles tiverem uma conexão de rede. Isso instruirá o usuário sobre os diferentes estados disponíveis e garantirá que sua tarefa ou ação foi armazenada. Isso tem o benefício adicional de o usuário ficar mais confiante no uso de seu aplicativo.
+
+## Projete para o próximo bilhão
+
+Em muitas regiões, dispositivos de baixo custo são comuns, a conectividade não é confiável e, para muitos usuários, os dados são inacessíveis. Você precisará conquistar a confiança do usuário sendo transparente e frugal com os dados. Pense em maneiras de ajudar os usuários com conexões ruins e simplificar a interface para ajudar a acelerar as tarefas. Sempre tente perguntar aos usuários antes de baixar conteúdo com muitos dados.
+
+Oferece opções de baixa largura de banda para usuários em conexões lentas. Portanto, se a conexão de rede for lenta, forneça pequenos recursos. Oferece a opção de escolher ativos de alta ou baixa qualidade.
+
+## Conclusão
+
+A educação é fundamental para a experiência do usuário offline, pois os usuários não estão familiarizados com esses conceitos. Tente criar associações com coisas que são familiares, por exemplo, baixar para uso posterior é o mesmo que colocar dados off-line.
+
+Ao projetar para conexões de rede instáveis, lembre-se destas diretrizes:
+
+- Pense em como você projeta para o sucesso, o fracasso e a instabilidade de uma conexão de rede.
+- Os dados podem ser caros, portanto, seja atencioso com o usuário.
+- Para a maioria dos usuários globalmente, o ambiente de tecnologia é quase exclusivamente móvel.
+- Dispositivos de baixo custo são comuns, com armazenamento, memória e poder de processamento limitados, telas pequenas e menor qualidade de tela sensível ao toque. Certifique-se de que o desempenho faça parte do seu processo de design.
+- Permita que os usuários naveguem em seu aplicativo quando estiverem offline.
+- Informe os usuários sobre seu estado atual e sobre as mudanças nos estados.
+- Tente fornecer offline por padrão se seu aplicativo não requer muitos dados.
+- Se o aplicativo tiver muitos dados, instrua os usuários sobre como eles podem fazer o download para uso off-line.
+- Torne as experiências transferíveis entre dispositivos.
+- Utilize linguagem, ícones, imagens, tipografia e cores para expressar ideias ao usuário coletivamente.
+- Assegure confiança e feedback para ajudar o usuário.
diff --git a/src/site/content/pt/reliable/service-worker-caching-and-http-caching/index.md b/src/site/content/pt/reliable/service-worker-caching-and-http-caching/index.md
new file mode 100644
index 00000000000..39db141fd82
--- /dev/null
+++ b/src/site/content/pt/reliable/service-worker-caching-and-http-caching/index.md
@@ -0,0 +1,272 @@
+---
+layout: post
+title: Cache do Service Worker e cache HTTP
+subhead: Os prós e contras de usar lógica de expiração consistente ou diferente em todo o cache do service worker e camadas de cache HTTP.
+authors:
+  - jonchen
+date: 2020-07-17
+description: Os prós e contras de usar lógica de expiração consistente ou diferente em todo o cache do service worker e camadas de cache HTTP.
+tags:
+  - blog
+  - network
+  - service-worker
+  - offline
+---
+
+Enquanto os service workers e PWAs estão se tornando padrões de aplicativos da web modernos, o cache de recursos se tornou mais complexo do que nunca. Este artigo cobre o panorama geral do cache do navegador, incluindo:
+
+- Os casos de uso e as diferenças entre o armazenamento em cache do service worker e o cache HTTP.
+- Os prós e contras de diferentes estratégias de expiração de armazenamento em cache do service worker em comparação com as estratégias regulares de armazenamento em cache HTTP.
+
+## Visão geral do fluxo de cache
+
+Em um nível superior, um navegador segue a ordem de cache abaixo ao solicitar um recurso:
+
+1. **Cache do Service Worker** : O Service Worker verifica se o recurso está em seu cache e decide se deve retornar o próprio recurso com base em suas estratégias de cache programadas. Observe que isso não acontece automaticamente. Você precisa criar um manipulador de eventos fetch em seu service worker e interceptar as solicitações de rede para que as solicitações sejam atendidas a partir do cache do service worker em vez da rede.
+2. **Cache HTTP (também conhecido como cache do navegador)** : se o recurso for encontrado no [cache HTTP](/http-cache) e ainda não tiver expirado, o navegador usará automaticamente o recurso do cache HTTP.
+3. **Lado do servidor:** se nada for encontrado no cache do service worker ou no cache HTTP, o navegador vai para a rede para solicitar o recurso. Se o recurso não estiver armazenado em cache em um CDN, a solicitação deve voltar ao servidor de origem.
+
+{% Img src="image/admin/vtKWC9Bg9dAMzoFKTeAM.png", alt="Fluxo de cache", width="800", height="585" %}
+
+{% Aside %} Observe que alguns navegadores como o Chrome têm uma **camada de cache de memória** na frente do cache do service worker. Os detalhes do cache de memória dependem da implementação de cada navegador. Infelizmente, ainda não há especificações claras para esta parte. {% endAside %}
+
+## Camadas de cache
+
+### Cache do Service Worker
+
+Um service worker intercepta solicitações HTTP do tipo de rede e usa uma [estratégia de cache](/offline-cookbook/#serving-suggestions) para determinar quais recursos devem ser retornados ao navegador. O cache do service worker e o cache HTTP têm a mesma finalidade geral, mas o cache do service worker oferece mais recursos de cache, como controle refinado sobre exatamente o que é armazenado em cache e como o cache é feito.
+
+#### Controlar o cache do service worker
+
+Um service worker intercepta solicitações HTTP com [ouvintes de eventos](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) (geralmente o `fetch` ). Este [trecho de código](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19) demonstra a lógica de uma estratégia de cache [Cache-First.](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network)
+
+{% Img src="image/admin/INLfnhEpmL4KpMmFXnTL.png", alt="Um diagrama que mostra como os service workers interceptam solicitações HTTP", width="800", height="516" %}
+
+É altamente recomendável usar o [Workbox](https://developer.chrome.com/docs/workbox/) para evitar reinventar a roda. Por exemplo, você pode [registrar caminhos de URL de recurso com uma única linha de código regex](https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-regular-expression-route) .
+
+```js
+import {registerRoute} from 'workbox-routing';
+
+registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);
+```
+
+#### Estratégias de armazenamento em cache do Service Worker e casos de uso
+
+A próxima tabela descreve as estratégias comuns de armazenamento em cache do service worker e quando cada estratégia é útil.
+
+<table>
+<thead><tr>
+<th><strong>Estratégias</strong></th>
+<th><strong>Motivo para atualização</strong></th>
+<th><strong>Casos de uso</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-only">Apenas rede</a></p></strong></td>
+<td>O conteúdo deve estar sempre atualizado.</td>
+<td><ul>
+<li>Pagamentos e checkouts</li>
+<li>Balanço</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="/stale-while-revalidate/" class="">Rede voltando para o cache</a></p></strong></td>
+<td>É preferível servir o conteúdo novo. No entanto, se a rede falhar ou for instável, é aceitável veicular conteúdo um pouco antigo.</td>
+<td><ul>
+<li>Dados oportunos</li>
+<li>Preços e taxas (requer isenções de responsabilidade)</li>
+<li>Status do pedido</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="/stale-while-revalidate/" class="">Desatualizar durante a revalidação</a></p></strong></td>
+<td>Não há problema em servir conteúdo em cache imediatamente, mas o conteúdo em cache atualizado deve ser usado no futuro.</td>
+<td><ul>
+<li>Feed de notícias</li>
+<li>Páginas de lista de produtos</li>
+<li>Mensagens</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-then-network">Cache primeiro, volte para a rede</a></p></strong></td>
+<td>O conteúdo não é crítico e pode ser servido do cache para ganhos de desempenho, mas o service worker deve ocasionalmente verificar se há atualizações.</td>
+<td><ul>
+<li>Conchas de aplicativos</li>
+<li>Recursos comuns</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-only">Somente cache</a></p></strong></td>
+<td>O conteúdo raramente muda.</td>
+<td><ul><li>Conteúdo estático</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+#### Benefícios adicionais do cache do service worker
+
+Além do controle refinado da lógica de armazenamento em cache, o armazenamento em cache do service worker também fornece:
+
+- **Mais memória e espaço de armazenamento para sua origem:** O navegador aloca recursos de cache HTTP por [origem](/same-site-same-origin/#origin) . Em outras palavras, se você tiver vários subdomínios, todos eles compartilham o mesmo cache HTTP. Não há garantia de que o conteúdo de sua origem / domínio permaneça no cache HTTP por muito tempo. Por exemplo, um usuário pode limpar o cache limpando manualmente da IU de configurações do navegador ou acionando um recarregamento físico em uma página. Com um cache de service worker, você tem uma probabilidade muito maior de que seu conteúdo em cache permaneça armazenado em cache. Consulte [Armazenamento persistente](/persistent-storage/) para saber mais.
+- **Maior flexibilidade com redes fragmentadas ou experiências offline:** com o cache HTTP, você só tem uma escolha binária: o recurso é armazenado em cache ou não. Com o cache do service worker, você pode mitigar pequenos "soluços" com muito mais facilidade (com a estratégia "desatualizar durante a revalidação"), oferecer uma experiência offline completa (com a estratégia "Somente cache") ou até mesmo algo intermediário, como interfaces de usuário personalizadas com partes da página provenientes do cache do service worker e algumas partes excluídas (com a estratégia "Set catch handler") quando apropriado.
+
+### Cache HTTP
+
+Na primeira vez que um navegador carrega uma página da web e recursos relacionados, ele armazena esses recursos em seu cache HTTP. O cache HTTP geralmente é ativado automaticamente pelos navegadores, a menos que tenha sido desativado explicitamente pelo usuário final.
+
+Usar o cache HTTP significa confiar no servidor para determinar quando armazenar em cache um recurso e por quanto tempo.
+
+#### Controle a expiração do cache HTTP com cabeçalhos de resposta HTTP
+
+Quando um servidor responde a uma solicitação do navegador para um recurso, o servidor usa cabeçalhos de resposta HTTP para informar ao navegador por quanto tempo ele deve armazenar o recurso em cache. Consulte [Cabeçalhos de resposta: configure seu servidor da web](/http-cache/#response-headers) para saber mais.
+
+#### Estratégias de armazenamento em cache HTTP e casos de uso
+
+O cache HTTP é muito mais simples do que o cache do service worker, porque o cache HTTP lida apenas com a lógica de expiração de recurso baseada em tempo (TTL). Consulte [Quais valores de cabeçalho de resposta você deve usar?](/http-cache/#response-header-strategies) e [Resumo](/http-cache/#summary) para aprender mais sobre estratégias de cache HTTP.
+
+## Projetando sua lógica de expiração de cache
+
+Esta seção explica os prós e contras do uso de lógica de expiração consistente nas camadas de cache do service worker e HTTP, bem como os prós e contras da lógica de expiração separada nessas camadas.
+
+A falha abaixo demonstra como o cache do service worker e o cache HTTP funcionam em diferentes cenários:
+
+{% Glitch { id: 'compare-sw-and-http-caching', height: 480 } %}
+
+### Lógica de expiração consistente para todas as camadas de cache
+
+Para demonstrar os prós e os contras, examinaremos três cenários: longo, médio e curto prazo.
+
+<table>
+<thead><tr>
+<th>Cenários</th>
+<th>Cache de longo prazo</th>
+<th>Cache de médio prazo</th>
+<th>Cache de curto prazo</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Estratégia de cache do Service Worker</td>
+<td>Cache, voltando para a rede</td>
+<td>Desatualizado durante a revalidação</td>
+<td>Rede, voltando para o cache</td>
+</tr>
+<tr>
+<td>TTL do cache do Service Worker</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 dia</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+<tr>
+<td>Idade máxima do cache HTTP</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 dia</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### Cenário: cache de longo prazo (cache, retornando à rede)
+
+- Quando um recurso em cache é válido (&lt;= 30 dias): O service worker retorna o recurso em cache imediatamente, sem ir para a rede.
+- Quando um recurso em cache expira (&gt; 30 dias): O service worker vai para a rede para buscar o recurso. O navegador não tem uma cópia do recurso em seu cache HTTP, então ele vai do lado do servidor para o recurso.
+
+Contra: neste cenário, o cache HTTP fornece menos valor porque o navegador sempre passará a solicitação para o lado do servidor quando o cache expira no service worker.
+
+#### Cenário: cache de médio prazo (desatualizado durante a revalidação)
+
+- Quando um recurso em cache é válido (&lt;= 1 dia): O service worker retorna o recurso em cache imediatamente e vai para a rede para buscar o recurso. O navegador tem uma cópia do recurso em seu cache HTTP, portanto, ele retorna essa cópia ao service worker.
+- Quando um recurso em cache expira (&gt; 1 dia): O service worker retorna o recurso em cache imediatamente e vai para a rede para buscar o recurso. O navegador não tem uma cópia do recurso em seu cache HTTP, então ele vai do lado do servidor para buscar o recurso.
+
+Contra: o service worker requer impedimento de cache adicional para substituir o cache HTTP a fim de aproveitar ao máximo a etapa de "revalidação".
+
+#### Cenário: cache de curto prazo (rede voltando para o cache)
+
+- Quando um recurso em cache é válido (&lt;= 10 minutos): O service worker vai para a rede para buscar o recurso. O navegador tem uma cópia do recurso em seu cache HTTP para que ele retorne ao service worker sem passar do lado do servidor.
+- Quando um recurso em cache expira (&gt; 10 minutos): O service worker retorna o recurso em cache imediatamente e vai para a rede para buscar o recurso. O navegador não tem uma cópia do recurso em seu cache HTTP, então ele vai do lado do servidor para buscar o recurso.
+
+Contra: semelhante ao cenário de armazenamento em cache de médio prazo, o service worker requer lógica de bloqueio de cache adicional para substituir o cache HTTP a fim de buscar o recurso mais recente do lado do servidor.
+
+#### Service worker em todos os cenários
+
+Em todos os cenários, o cache do service worker ainda pode retornar recursos em cache quando a rede está instável. Por outro lado, o cache HTTP não é confiável quando a rede está instável ou inativa.
+
+### Lógica de expiração de cache diferente no cache do service worker e camadas HTTP
+
+Para demonstrar os prós e os contras, examinaremos novamente os cenários de longo, médio e curto prazo.
+
+<table>
+<thead><tr>
+<th>Cenários</th>
+<th>Cache de longo prazo</th>
+<th>Cache de médio prazo</th>
+<th>Cache de curto prazo</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Estratégia de cache do Service Worker</td>
+<td>Cache, voltando para a rede</td>
+<td>Desatualizado durante a revalidação</td>
+<td>Rede voltando para o cache</td>
+</tr>
+<tr>
+<td>TTL do cache do Service Worker</td>
+<td><strong>90 dias</strong></td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 dia</strong></td>
+</tr>
+<tr>
+<td>Idade máxima do cache HTTP</td>
+<td><strong>30 dias</strong></td>
+<td><strong>1 dia</strong></td>
+<td><strong>10 minutos</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### Cenário: cache de longo prazo (cache, retornando à rede)
+
+- Quando um recurso armazenado em cache é válido no cache do service worker (&lt;= 90 dias): O service worker retorna o recurso armazenado em cache imediatamente.
+- Quando um recurso em cache expira no cache do service worker (&gt; 90 dias): O service worker vai para a rede para buscar o recurso. O navegador não tem uma cópia do recurso em seu cache HTTP, então ele vai para o lado do servidor.
+
+Prós e contras:
+
+- Pro: os usuários experimentam uma resposta instantânea à medida que o service worker retorna imediatamente os recursos armazenados em cache.
+- Pro: o service worker tem um controle mais refinado de quando usar seu cache e quando solicitar novas versões de recursos.
+- Contra: é necessária uma estratégia de cache do service worker bem definida.
+
+#### Cenário: cache de médio prazo (desatualizado durante a revalidação)
+
+- Quando um recurso armazenado em cache é válido no cache do Service Worker (&lt;= 30 dias): O Service Worker retorna o recurso em cache imediatamente.
+- Quando um recurso armazenado em cache expira no cache do service worker (&gt; 30 dias): O service worker vai para a rede em busca do recurso. O navegador não tem uma cópia do recurso em seu cache HTTP, então ele vai para o lado do servidor.
+
+Prós e contras:
+
+- Pro: os usuários experimentam uma resposta instantânea à medida que o service worker retorna imediatamente os recursos armazenados em cache.
+- Prós: o service worker pode garantir que a **próxima** solicitação de um determinado URL use uma nova resposta da rede, graças à revalidação que acontece "em segundo plano".
+- Contra: é necessária uma estratégia de cache do service worker bem definida.
+
+#### Cenário: cache de curto prazo (rede voltando para o cache)
+
+- Quando um recurso armazenado em cache é válido no cache do Service Worker (&lt;= 1 dia): O Service Worker vai até a rede em busca do recurso. O navegador retorna o recurso do cache HTTP, se estiver lá. Se a rede estiver inativa, o service worker retorna o recurso do cache do service worker
+- Quando um recurso em cache expira no cache do service worker (&gt; 1 dia): O service worker vai para a rede para buscar o recurso. O navegador busca os recursos na rede conforme a versão em cache em seu cache HTTP expira.
+
+Prós e contras:
+
+- Pro: quando a rede está instável ou inativa, o service worker retorna os recursos armazenados em cache imediatamente.
+- Contra: o service worker requer bloqueio de cache adicional para substituir o cache HTTP e fazer solicitações de "Rede primeiro".
+
+## Conclusão
+
+Dada a complexidade da combinação de cenários de cache, não é possível projetar uma regra que cubra todos os casos. No entanto, com base nas descobertas nas seções anteriores, existem algumas sugestões a serem observadas ao projetar suas estratégias de cache:
+
+- A lógica de cache do Service Worker não precisa ser consistente com a lógica de expiração do cache HTTP. Se possível, use uma lógica de expiração mais longa no service worker para conceder ao service worker mais controle.
+- O cache HTTP ainda desempenha um papel importante, mas não é confiável quando a rede está instável ou inativa.
+- Revisite suas estratégias de cache para cada recurso para garantir que a estratégia de cache do service worker forneça seu valor, sem entrar em conflito com o cache HTTP.
+
+## Saber mais
+
+- [Confiabilidade da rede](/reliable/)
+- [Evite solicitações de rede desnecessárias com o cache HTTP](/http-cache)
+- [Codelab de cache HTTP](/codelab-http-cache/)
+- [Medir o impacto do desempenho no mundo real dos prestadores de serviço](https://developers.google.com/web/showcase/2016/service-worker-perf)
+- [Cache-Control vs. Expira](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
diff --git a/src/site/content/pt/reliable/service-workers-cache-storage/index.md b/src/site/content/pt/reliable/service-workers-cache-storage/index.md
new file mode 100644
index 00000000000..1f5d762bcec
--- /dev/null
+++ b/src/site/content/pt/reliable/service-workers-cache-storage/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: Service workers e a API Cache Storage
+authors:
+  - jeffposnick
+date: 2018-11-05
+updated: 2020-02-27
+description: O cache HTTP do navegador é sua primeira linha de defesa. Não é necessariamente a abordagem mais poderosa ou flexível, e você tem controle limitado sobre o tempo de vida das respostas em cache. Mas existem várias regras básicas que oferecem uma implementação de cache sensata sem muito trabalho, então você deveria sempre tentar segui-las.
+---
+
+Você está em uma luta pela confiabilidade da rede. O cache HTTP do navegador é sua primeira linha de defesa, mas como você aprendeu, ele só é eficaz de fato ao carregar URLs versionados que você já tenha visitado. Por si só, o cache HTTP não é suficiente.
+
+Felizmente, duas ferramentas mais recentes estão disponíveis para ajudar a fazer a maré virar a seu favor: [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) e a [API Cache Storage](https://developer.mozilla.org/docs/Web/API/CacheStorage). Pelo fato de os dois serem frequentemente usados juntos, vale a pena aprender sobre os dois ao mesmo tempo.
+
+## Service workers
+
+Um service worker é integrado ao navegador e controlado por um pouco de código JavaScript extra que você é responsável por criar. Você implementa isso junto com os outros arquivos que constituem o seu aplicativo da web real.
+
+Um service worker tem alguns poderes especiais. Entre outras funções, ele espera pacientemente que seu aplicativo da web faça uma solicitação de saída e, em seguida, entra em ação interceptando-o. O que o service worker faz com essa solicitação interceptada é você quem decide.
+
+Para algumas solicitações, o melhor curso de ação pode ser apenas permitir que a solicitação continue na rede, da mesma forma que aconteceria se não houvesse nenhum service worker.
+
+Para outras solicitações, no entanto, você pode tirar proveito de algo mais flexível do que o cache HTTP do navegador e retornar uma resposta rápida e confiável sem ter que se preocupar com a rede. Isso envolve o uso de outra peça do quebra-cabeça: a API Cache Storage.
+
+## A API Cache Storage
+
+A API Cache Storage abre toda uma nova gama de possibilidades, dando aos desenvolvedores controle completo sobre o conteúdo do cache. Em vez de depender de uma combinação de cabeçalhos HTTP e [heurísticas](https://httpwg.org/specs/rfc7234.html#heuristic.freshness) integradas do navegador, a API de armazenamento em cache expõe uma abordagem baseada em código para o armazenamento em cache. A API de armazenamento em cache é particularmente útil quando chamada a partir do JavaScript do seu prestador de serviço.
+
+### Espere aí… agora há outro cache para considerar?
+
+Você provavelmente está se perguntando coisas como "Ainda preciso configurar meus cabeçalhos HTTP?" e "O que posso fazer com este novo cache que não foi possível com o cache HTTP?" Não se preocupe, essas são reações naturais.
+
+Ainda é recomendado que você configure os `Cache-Control` em seu servidor web, mesmo quando você sabe que está usando a API Cache Storage. Normalmente, você pode se safar configurando `Cache-Control: no-cache` para URLs não versionados e/ou `Cache-Control: max-age=31536000` para URLs que contêm informações de versionamento, como hashes.
+
+Ao preencher o cache da API de armazenamento em cache, o [padrão do navegador é verificar as entradas existentes](https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-fight) no cache HTTP e usá-las, se encontradas. Se estiver adicionando URLs com versão ao cache da API de armazenamento em cache, o navegador evita novas solicitações de rede. O outro lado disso é que se você estiver usando `Cache-Control` configurados incorretamente, como especificar uma vida útil de cache de longa duração para uma URL não versionada, você pode acabar [piorando as coisas](https://jakearchibald.com/2016/caching-best-practices/#a-service-worker-can-extend-the-life-of-these-bugs) adicionando esse conteúdo obsoleto à API Cache Storage. Classificar o comportamento do cache HTTP é um pré-requisito para o uso eficaz da API Cache Storage.
+
+Quanto ao que agora é possível com esta nova API, a resposta é: muita coisa. Alguns usos comuns que seriam difíceis ou impossíveis apenas com o cache HTTP incluem:
+
+- Usar uma abordagem de "atualização em segundo plano" para o conteúdo em cache, conhecida como stale-while revalidate (obsoleto durante a revalidação).
+- Impor um limite ao número máximo de ativos para armazenar em cache e implemente uma política de expiração personalizada para remover itens assim que esse limite for atingido.
+- Comparar as respostas da rede armazenadas em cache anteriormente para ver se algo mudou e permitir que o usuário atualize o conteúdo (com um botão, por exemplo) quando os dados forem realmente atualizados.
+
+Confira [A API Cache: um guia rápido](/cache-api-quick-guide/) para saber mais.
+
+### Porcas e parafusos da API
+
+Há algumas coisas a se ter em mente sobre o design da API:
+
+- Objetos [`Request`](https://developer.mozilla.org/docs/Web/API/Request) são usados como chaves exclusivas ao ler e gravar nesses caches. Para sua conveniência, você pode passar uma string de URL como `'https://example.com/index.html'` como a chave em vez de um `Request` real, e a API cuidará disso automaticamente para você.
+- Objetos [`Response`](https://developer.mozilla.org/docs/Web/API/Response) são usados como valores nesses caches.
+- O `Cache-Control` em uma determinada `Response` é efetivamente ignorado ao armazenar dados em cache. Não há verificações automáticas de expiração ou atualização e, ao armazenar um item no cache, ele persistirá até que seu código o remova explicitamente. (Existem bibliotecas para simplificar a manutenção do cache em seu nome. Elas serão abordadas posteriormente nesta série.)
+- Ao contrário de APIs síncronas mais antigas, como[`LocalStorage`](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage), todas as operações da API Cache Storage são assíncronas.
+
+## Um desvio rápido: promises e async/wait
+
+Os service workers e a API Cache Storage usam [conceitos de programação assíncrona](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming)). Em particular, eles dependem muito de promises para representar o resultado futuro das operações async. Você deve se familiarizar com [promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) e as sintaxes [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await) relacionadas antes de se aprofundar.
+
+{% Aside 'codelab' %} [Torne um aplicativo confiável registrando um service worker](/codelab-service-workers) . {% endAside %}
+
+## Não implante esse código… ainda
+
+Embora forneçam uma base importante e possam ser usados no estado em que se encontram, os service workers e a API Cache Storage são blocos de construção de nível inferior, com vários casos extremos e "pegadinhas". Existem algumas ferramentas de nível superior que podem ajudar a suavizar as partes difíceis dessas APIs e fornecer tudo que você precisa para construir um service worker pronto para produção. O próximo guia cobre uma dessas ferramentas: [Workbox](https://developer.chrome.com/docs/workbox/) .
+
+{% Aside 'success' %} Aprenda ao mesmo tempo em que se diverte. Confira o novo [jogo Service Workies!](https://serviceworkies.com/) . {% endAside %}
diff --git a/src/site/content/pt/secure/cross-origin-isolation-guide/index.md b/src/site/content/pt/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..c87a67aab7f
--- /dev/null
+++ b/src/site/content/pt/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Um guia para permitir o isolamento da origem cruzada
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: O isolamento da origem cruzada permite que uma página web use recursos poderosos, como SharedArrayBuffer. Este artigo explica como habilitar o isolamento da origem cruzada no seu site.
+description: O isolamento da origem cruzada permite que uma página web use recursos poderosos, como SharedArrayBuffer. Este artigo explica como habilitar o isolamento da origem cruzada no seu site.
+tags:
+  - security
+---
+
+Este guia mostra como habilitar o isolamento de origem cruzada. O isolamento de origem cruzada é necessário se você deseja usar [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/) ou [cronômetro de alta resolução com melhor precisão](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/).
+
+Se você pretende ativar o isolamento de origem cruzada, avalie o impacto que isso terá em outros recursos de origem cruzada em seu site, como canais de anúncios.
+
+{% Details %} {% DetailsSummary %} Determine onde o `SharedArrayBuffer` é usado em seu site
+
+A partir do Chrome 92, as funcionalidades que usam `SharedArrayBuffer` não funcionarão mais sem o isolamento de origem cruzada. Se você acessou esta página devido a uma `SharedArrayBuffer`, é provável que seu site ou um dos recursos incorporados a ele esteja usando `SharedArrayBuffer`. Para garantir que nada seja interrompido em seu site devido à suspensão do uso, comece identificando onde ele é usado.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- Ative o isolamento de origem cruzada para continuar usando `SharedArrayBuffer`.
+- Se você depende de código de terceiros que usa `SharedArrayBuffer`, notifique o provedor de terceiros para tomar providências. {% endAside %}
+
+Se você não tiver certeza de onde em seu site um `SharedArrayBuffer` é usado, há duas maneiras de descobrir:
+
+- Usando Chrome DevTools
+- (Avançado) Usando Deprecation Reporting
+
+Se você já sabe onde está usando `SharedArrayBuffer`, vá para [Analisar o impacto do isolamento de origem cruzada](#analysis) .
+
+### Usando Chrome DevTools
+
+[O Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) permite que os desenvolvedores inspecionem sites.
+
+1. [Abra o Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) na página que você suspeita estar usando `SharedArrayBuffer`.
+2. Selecione o painel **Console.**
+3. Se a página estiver usando `SharedArrayBuffer`, a seguinte mensagem será exibida:
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. O nome do arquivo e o número da linha no final da mensagem (por exemplo, `common-bundle.js:535`) indicam de onde o `SharedArrayBuffer` está vindo. Se for uma biblioteca de terceiros, entre em contato com o desenvolvedor para corrigir o problema. Se for implementado como parte do seu site, siga o guia abaixo para habilitar o isolamento de origem cruzada.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="Aviso do console DevToools quando SharedArrayBuffer é usado sem isolamento de origem cruzada", width="800", height="163" %}<figcaption> Aviso do console DevToools quando SharedArrayBuffer é usado sem isolamento de origem cruzada.</figcaption></figure>
+
+### (Avançado) Usando Deprecation Reporting
+
+Alguns navegadores têm [uma funcionalidade que relata APIs deprecadas](https://wicg.github.io/deprecation-reporting/) para um determinado endpoint.
+
+1. [Configure um servidor de relatório de deprecação e obtenha a URL do relatório](/coop-coep/#set-up-reporting-endpoint). Você pode conseguir isto usando um serviço público ou instalando um você mesmo.
+2. Usando a URL, defina o seguinte cabeçalho HTTP para páginas que estão potencialmente servindo `SharedArrayBuffer`.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. Assim que o cabeçalho começar a se propagar, o endpoint no qual você se registrou deve começar a coletar relatórios de deprecação.
+
+Veja um exemplo de implementação aqui: [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me) .
+
+{% endDetails %}
+
+## Analise o impacto do isolamento de origem cruzada {: #analysis }
+
+Não seria ótimo se você pudesse avaliar o impacto que a ativação do isolamento de origem cruzada teria em seu site sem realmente quebrar nada? Os cabeçalhos HTTP [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) e [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) permitem que você faça exatamente isso.
+
+1. Defina [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) em seu documento de nível superior. Como o nome indica, este cabeçalho apenas envia relatórios sobre o impacto que `COOP: same-origin` **teria** em seu site - ele não desabilitará a comunicação com janelas pop-up.
+2. Configure relatórios e configure um servidor web para receber e salvar os relatórios.
+3. Defina [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources) em seu documento de nível superior. Novamente, este cabeçalho permite que você veja o impacto de habilitar `COEP: require-corp` sem realmente afetar o funcionamento do seu site ainda. Você pode configurar este cabeçalho para enviar relatórios ao mesmo servidor de relatórios que configurou na etapa anterior.
+
+{% Aside %} Você também pode [ativar a coluna **Domínio**](https://developer.chrome.com/docs/devtools/network/#information) **no painel Rede do** Chrome DevTools para obter uma visão geral de quais recursos seriam afetados. {% endAside %}
+
+{% Aside 'caution' %}
+
+Habilitar o isolamento de origem cruzada bloqueará o carregamento de recursos de origem cruzada que você não ativou explicitamente e impedirá que seu documento de nível superior seja capaz de se comunicar com janelas pop-up.
+
+Temos explorado maneiras de implantar a `Cross-Origin-Resource-Policy` em escala, já que o isolamento de origem cruzada requer que todos os sub-recursos optem por isso explicitamente. Então tivemos a ideia de ir na direção oposta: [um novo modo COEP "credentialess"](https://github.com/mikewest/credentiallessness/) que permite carregar recursos sem o cabeçalho CORP removendo todas as suas credenciais. Estamos descobrindo os detalhes de como isso deve funcionar, mas esperamos que isto alivie seu fardo de garantir que os sub-recursos estejam enviando o cabeçalho `Cross-Origin-Resource-Policy`
+
+Além disso, sabe-se que o cabeçalho `Cross-Origin-Opener-Policy: same-origin` quebrará integrações que requerem interações de janela de origem cruzada, como OAuth e pagamentos. Para atenuar esse problema, estamos explorando o [relaxamento da condição](https://github.com/whatwg/html/issues/6364) para permitir o isolamento de origem `Cross-Origin-Opener-Policy: same-origin-allow-popups`. Desta forma, a comunicação com a janela aberta por ela mesma será possível.
+
+Se você deseja habilitar o isolamento de origem cruzada, mas está impedido por esses desafios, recomendamos [registrar-se para um teste de origem](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) e aguardar até que os novos modos estejam disponíveis. Não planejamos encerrar o teste de origem até que esses novos modos estejam disponíveis.
+
+{% endAside %}
+
+## Mitigação do impacto do isolamento de origem cruzada
+
+Depois de determinar quais recursos serão afetados pelo isolamento de origem cruzada, aqui estão as diretrizes gerais de como você ativa esses recursos de origem cruzada:
+
+1. Em recursos de origem cruzada, como imagens, scripts, folhas de estilo, iframes e outros, defina o cabeçalho [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin) Em recursos do mesmo site, defina o cabeçalho [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin).
+2. Defina o atributo `crossorigin` na tag HTML no documento de nível superior se o recurso for servido com [CORS](/cross-origin-resource-sharing/) (por exemplo, `<img src="example.jpg" crossorigin>` ).
+3. Se os recursos de origem cruzada carregados em iframes envolverem outra camada de iframes, aplique recursivamente as etapas descritas nesta seção antes de prosseguir.
+4. Depois de confirmar que todos os recursos de origem cruzada estão incluídos, defina o cabeçalho `Cross-Origin-Embedder-Policy: require-corp` nos recursos de origem cruzada carregados em iframes.
+5. Certifique-se de que não haja janelas pop-up de origem cruzada que exijam comunicação por meio de `postMessage()`. Não há como mantê-los funcionando quando o isolamento de origem cruzada está habilitado. Você pode mover a comunicação para outro documento que não tenha isolamento de origem cruzada ou usar um método de comunicação diferente (por exemplo, solicitações HTTP).
+
+## Ativação do isolamento de origem cruzada
+
+Depois de ter mitigado o impacto através do isolamento de origem cruzada, aqui estão as diretrizes gerais para permitir o isolamento de origem cruzada:
+
+1. Defina o cabeçalho `Cross-Origin-Opener-Policy: same-origin` em seu documento de nível superior. Se você configurou `Cross-Origin-Opener-Policy-Report-Only: same-origin`, substitua-o. Isto bloqueia a comunicação entre o documento de nível superior e suas janelas pop-up.
+2. Defina o cabeçalho `Cross-Origin-Embedder-Policy: require-corp` em seu documento de nível superior. Se você configurou `Cross-Origin-Embedder-Policy-Report-Only: require-corp` , substitua-o. Isto bloqueará o carregamento de recursos de origem cruzada que não estejam ativados.
+3. Verifique se `self.crossOriginIsolated` retorna `true` no console para verificar se sua página tem isolamento de origem cruzada.
+
+{% Aside 'gotchas' %}
+
+Habilitar o isolamento de origem cruzada em um servidor local pode ser doloroso, pois servidores simples não suportam o envio de cabeçalhos. Você pode iniciar o Chrome com um sinalizador de linha de comando `--enable-features=SharedArrayBuffer` para habilitar `SharedArrayBuffer` sem habilitar o isolamento de origem cruzada. Aprenda [a executar o Chrome com um sinalizador de linha de comando nas respectivas plataformas](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+{% endAside %}
+
+## Recursos
+
+- [Deixando seu site com "isolamento de origem cruzada" usando COOP e COEP](/coop-coep/)
+- [Atualizações de SharedArrayBuffer no Android Chrome 88 e Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/pt/secure/cross-origin-resource-sharing/index.md b/src/site/content/pt/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..810f51ab7b3
--- /dev/null
+++ b/src/site/content/pt/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Cross-Origin Resource Sharing   - CORS (compartilhamento de recursos de origem cruzada)
+subhead: Compartilhe recursos de origem cruzada com segurança
+authors:
+  - kosamari
+date: 2018-11-05
+description: A política de mesma origem (same-origin) do navegador bloqueia a leitura de um recurso de uma origem diferente. Esse mecanismo impede que um site malicioso leia os dados de outro site, mas também impede usos legítimos. E se você quisesse obter dados meteorológicos de outro país? A ativação do CORS permite que o servidor diga ao navegador que está permitido usar uma origem adicional.
+tags:
+  - security
+---
+
+A política de mesma origem (same-origin) do navegador bloqueia a leitura de um recurso de uma origem diferente. Esse mecanismo impede que um site malicioso leia os dados de outro site, mas também impede usos legítimos. E se você quisesse obter dados meteorológicos de outro país?
+
+Numa aplicação web moderna, é comum desejar obter recursos de uma origem diferente. Por exemplo, você pode desejar recuperar dados JSON de um outro domínio ou carregar imagens de um site para um elemento `<canvas>`.
+
+Em outras palavras, existem **recursos públicos** que deveriam estar disponíveis para qualquer pessoa ler, mas a política de mesma origem bloqueia isso. Os desenvolvedores têm usado soluções [alternativas](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about) como JSONP, mas o **Cross-Origin Resource Sharing (CORS)** corrige isso de uma forma padrão.
+
+A ativação do **CORS** permite que o servidor informe ao navegador que é permitido usar uma origem adicional.
+
+## Como funciona uma solicitação de recurso na web?
+
+<figure data-float="right">   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="solicitação e resposta", width="668", height="327" %}   <figcaption>     Figura: solicitação ilustrada do cliente e resposta do servidor </figcaption></figure>
+
+Um navegador e um servidor podem trocar dados pela rede usando o protocolo HTTP (**Hypertext Transfer Protocol**). O HTTP define as regras de comunicação entre o solicitante e o respondente, incluindo quais informações são necessárias para obter um recurso.
+
+O cabeçalho HTTP é usado para negociar o tipo de troca de mensagens entre o cliente e o servidor e é usado para determinar o acesso. Tanto a solicitação do navegador quanto a mensagem de resposta do servidor são divididas em duas partes: **cabeçalho** e **corpo** :
+
+### cabeçalho
+
+Informações sobre a mensagem, como o tipo de mensagem ou a codificação da mensagem. Um cabeçalho pode incluir uma [variedade de informações](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) expressas como pares chave-valor. O cabeçalho da solicitação e o cabeçalho da resposta contêm informações diferentes.
+
+{% Aside %} É importante observar que os cabeçalhos não podem conter comentários. {% endAside %}
+
+**Exemplo de cabeçalho de solicitação**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+O cabeçalho acima é equivalente a dizer "Desejo receber HTML como resposta. Aqui está um cookie que possuo."
+
+**Exemplo de cabeçalho de resposta**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+O texto acima é equivalente a dizer "Os dados estão codificados com gzip. Não armazene isso em cache, por favor."
+
+### corpo
+
+A própria mensagem. Pode ser texto simples, um binário de imagem, JSON, HTML e assim por diante.
+
+## Como funciona o CORS?
+
+Lembre-se de que a política de mesma origem informa ao navegador para bloquear solicitações de origem cruzada. Quando você deseja obter um recurso público de uma origem diferente, o servidor provedor de recursos precisa informar ao navegador "Esta origem de onde a solicitação está vindo pode acessar meu recurso". O navegador lembra disso e permite o compartilhamento de recursos de origem cruzada.
+
+### Passo 1: solicitação do cliente (navegador)
+
+Quando o navegador está fazendo uma solicitação de origem cruzada, o navegador adiciona um cabeçalho `Origin` com a origem atual (esquema, host e porta).
+
+### Passo 2: resposta do servidor
+
+Do lado do servidor, quando um servidor vê este cabeçalho e deseja permitir o acesso, ele precisa adicionar um cabeçalho `Access-Control-Allow-Origin` à resposta especificando a origem da solicitação (ou `*` para permitir qualquer origem).
+
+### Passo 3: o navegador recebe a resposta
+
+Quando o navegador vê essa resposta com um `Access-Control-Allow-Origin`, ele permite que os dados de resposta sejam compartilhados com o site do cliente.
+
+## Veja o CORS em ação
+
+Aqui está um pequeno servidor web usando o Express.
+
+{% Glitch { id: 'cors-demo', path: 'server.js', height: 480 } %}
+
+O primeiro endpoint (linha 8) não tem nenhum cabeçalho de resposta definido, ele apenas envia um arquivo em resposta.
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- Experimente o comando a seguir:
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+Você deverá ver uma mensagem de erro dizendo:
+
+```bash
+request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource.
+```
+
+O segundo endpoint (linha 13) envia o mesmo arquivo em resposta, mas adiciona `Access-Control-Allow-Origin: *` no cabeçalho. A partir do console, tente
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+Desta vez, sua solicitação não deve ser bloqueada.
+
+## Compartilhe credenciais com CORS
+
+Por motivos de privacidade, o CORS é normalmente usado para "solicitações anônimas" - aquelas em que a solicitação não identifica o solicitante. Se quiser enviar cookies ao usar CORS (que podem identificar o remetente), você precisa adicionar cabeçalhos adicionais à solicitação e resposta.
+
+### Solicitação
+
+Adicione `credentials: 'include'` nas opções de requisição como mostrado abaixo. Isto incluirá o cookie com a solicitação.
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### Resposta
+
+`Access-Control-Allow-Origin` deve ser definido como uma origem específica (sem curinga usando `*`) e deve definir `Access-Control-Allow-Credentials` como `true`.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## Solicitações de comprovação para chamadas HTTP complexas
+
+Se um aplicativo da web precisa de uma solicitação HTTP complexa, o navegador adiciona uma **[solicitação de comprovação](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests) (preflight request)** na frente da cadeia de solicitação.
+
+A especificação CORS define uma **solicitação complexa** como
+
+- Uma solicitação que usa métodos diferentes de GET, POST ou HEAD
+- Uma solicitação que inclui cabeçalhos diferentes de `Accept` , `Accept-Language` ou `Content-Language`
+- Uma solicitação que tem um `Content-Type` diferente de `application/x-www-form-urlencoded`, `multipart/form-data` ou `text/plain`
+
+Os navegadores criam uma solicitação de comprovação, se necessário. É uma solicitação `OPTIONS`, como mostrada abaixo, e é enviada antes da mensagem de solicitação real.
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+Do lado do servidor, uma aplicação precisa responder à solicitação de comprovação com informações sobre os métodos que o aplicativo aceita dessa origem.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+A resposta do servidor também pode incluir um cabeçalho `Access-Control-Max-Age` para especificar a duração (em segundos) que devem ser armazenados em cache os resultados da comprovação, para que o cliente não precise fazer uma solicitação de comprovação sempre que enviar uma solicitação complexa.
diff --git a/src/site/content/pt/secure/fixing-mixed-content/index.md b/src/site/content/pt/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..2b3baba3011
--- /dev/null
+++ b/src/site/content/pt/secure/fixing-mixed-content/index.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: Corrigindo conteúdo misto
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: |2-
+
+  Descubra como corrigir erros de conteúdo misto em seu site para proteger os usuários e garantir que todo o seu conteúdo seja carregado.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+O suporte a HTTPS para seu site é uma etapa importante para proteger seu site e seus usuários contra ataques, mas o conteúdo misto pode tornar essa proteção inútil. O conteúdo misto cada vez mais inseguro será bloqueado pelos navegadores, conforme explicado em [O que é conteúdo misto?](/what-is-mixed-content)
+
+Neste guia, demonstraremos técnicas e ferramentas para corrigir problemas de conteúdo misto existentes e evitar que novos aconteçam.
+
+## Encontrar conteúdo misto visitando seu site
+
+Ao visitar uma página HTTPS no Google Chrome, o navegador o alerta sobre o conteúdo misturado como erros e avisos no console JavaScript.
+
+Em [O que é conteúdo misto?](/what-is-mixed-content), você pode encontrar vários exemplos e ver como os problemas são relatados no Chrome DevTools.
+
+O exemplo de [conteúdo misto passivo](https://passive-mixed-content.glitch.me/) fornecerá os seguintes avisos. Se o navegador conseguir encontrar o conteúdo em um `https` ele o atualizará automaticamente e exibirá uma mensagem.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="Chrome DevTools mostrando os avisos exibidos quando conteúdo misto é detectado e atualizado", width="800", height="294" %}</figure>
+
+[O conteúdo misto ativo](https://active-mixed-content.glitch.me/) é bloqueado e exibe um aviso.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="Chrome DevTools mostrando os avisos exibidos quando o conteúdo misto ativo é bloqueado", width="800", height="304" %}</figure>
+
+Se você encontrar avisos como esses para `http://` em seu site, será necessário corrigi-los na fonte do site. É útil fazer uma lista desses URLs, junto com a página em que os encontrou para usar ao corrigi-los.
+
+{% Aside %} Erros e avisos de conteúdo misto são mostrados apenas para a página que você está visualizando no momento, e o console JavaScript é limpo sempre que você navegar para uma nova página. Isso significa que você terá que visualizar cada página do seu site individualmente para encontrar esses erros. {% endAside %}
+
+### Encontrar conteúdo misto em seu site
+
+Você pode pesquisar conteúdo misto diretamente em seu código-fonte. Pesquise por `http://` em sua fonte e procure por tags que incluem atributos de URL HTTP. Observe que ter `http://` no `href` das tags âncora (`<a>`) geralmente não é um problema de conteúdo misto, com algumas exceções notáveis discutidas posteriormente.
+
+Se o seu site for publicado usando um sistema de gerenciamento de conteúdo, é possível que links para URLs não seguros sejam inseridos quando as páginas são publicadas. Por exemplo, as imagens podem ser incluídas com um URL completo em vez de um caminho relativo. Você precisará localizar e corrigir esses problemas no conteúdo do CMS.
+
+### Corrigindo conteúdo misto
+
+Depois de encontrar o conteúdo misto na fonte do seu site, você pode seguir estas etapas para corrigi-lo.
+
+Se receber uma mensagem do console informando que uma solicitação de recurso foi atualizada automaticamente de HTTP para HTTPS, você pode alterar com segurança o URL `http://` do recurso em seu código para `https://`. Você também pode verificar se um recurso está disponível com segurança alterando `http://` para `https://` na barra de URL do navegador e tentar abrir o URL em uma guia do navegador.
+
+Se o recurso não estiver disponível via `https://` , você deve considerar uma das seguintes opções:
+
+- Incluir o recurso de um host diferente, se houver um disponível.
+- Baixar e hospedar o conteúdo do seu site diretamente, se você tiver permissão legal para fazê-lo.
+- Excluir o recurso de seu site completamente.
+
+Tendo corrigido o problema, visualize a página onde você encontrou o erro originalmente e verifique se o erro não aparece mais.
+
+### Cuidado com o uso de tag fora do padrão
+
+Cuidado com o uso de tags fora do padrão em seu site. Por exemplo, `<a>` ) não resultam em erros de conteúdo misto, pois fazem com que o navegador acesse uma nova página. Isso significa que eles geralmente não precisam ser consertados. No entanto, alguns scripts de galeria de imagens substituem a funcionalidade da `<a>` e carregam o recurso HTTP especificado pelo `href` em uma exibição lightbox na página, causando um problema de conteúdo misto.
+
+## Lidar com conteúdo misto em grande escala
+
+As etapas manuais acima funcionam bem para sites menores; mas, para grandes sites ou sites com muitas equipes de desenvolvimento separadas, pode ser difícil controlar todo o conteúdo sendo carregado. Para ajudar nesta tarefa, você pode usar a política de segurança de conteúdo para instruir o navegador a notificá-lo sobre o conteúdo misturado e garantir que suas páginas nunca carreguem recursos inseguros inesperadamente.
+
+### Política de segurança de conteúdo
+
+[A política de segurança de conteúdo](/csp/) (CSP) é um recurso de navegador multifuncional que você pode usar para gerenciar conteúdo misto em escala. O mecanismo de relatório CSP pode ser usado para rastrear o conteúdo misto em seu site e oferecer políticas de aplicação para proteger os usuários através de atualização ou bloqueio de conteúdo misto.
+
+Você pode habilitar esses recursos para uma página incluindo o `Content-Security-Policy` ou `Content-Security-Policy-Report-Only` na resposta enviada de seu servidor. Além disso, você pode definir `Content-Security-Policy` (embora **não** `Content-Security-Policy-Report-Only` ) usando uma `<meta>` na seção `<head>` de sua página.
+
+{% Aside %} Navegadores modernos aplicam todas as políticas de segurança de conteúdo que recebem. Vários valores de cabeçalho CSP recebidos pelo navegador no cabeçalho de resposta ou `<meta>` são combinados e aplicados como uma única política; as políticas de relatórios são combinadas da mesma forma. As políticas são combinadas tomando a interseção das políticas; ou seja, cada política após a primeira só pode restringir ainda mais o conteúdo permitido, e não ampliá-lo. {% endAside %}
+
+### Encontrar conteúdo misto com política de segurança de conteúdo
+
+Você pode usar a política de segurança de conteúdo para coletar relatórios de conteúdo misto em seu site. Para habilitar esse recurso, defina a `Content-Security-Policy-Report-Only` adicionando-a como um cabeçalho de resposta para o seu site.
+
+Cabeçalho de resposta:
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %} O [cabeçalho de resposta report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) está sendo substituído por [report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to). O suporte do navegador para `report-to` está atualmente limitado ao Chrome e ao Edge. Você pode fornecer os dois cabeçalhos; nesse caso, `report-uri` será ignorado se o navegador suportar `report-to`. {% endAside %}
+
+Sempre que um usuário visita uma página em seu site, o navegador envia relatórios formatados em JSON sobre qualquer coisa que viole a política de segurança de conteúdo para `https://example.com/reportingEndpoint` . Nesse caso, sempre que um sub-recurso é carregado por HTTP, um relatório é enviado. Esses relatórios incluem o URL da página onde ocorreu a violação da política e o URL do sub-recurso que violou a política. Se você configurar seu endpoint de relatório para registrar esses relatórios, poderá rastrear o conteúdo misto em seu site sem ter que você mesmo visitar cada página.
+
+As duas ressalvas são:
+
+- Os usuários devem visitar sua página em um navegador que entenda o cabeçalho CSP. Isso é verdade para a maioria dos navegadores modernos.
+- Você só obtém relatórios para páginas visitadas por seus usuários. Portanto, se você tiver páginas que não recebam muito tráfego, pode levar algum tempo até que você obtenha relatórios para todo o site.
+
+O [guia de política de segurança de conteúdo](/csp/) contém mais informações e um exemplo de terminal.
+
+### Alternativas para relatar com CSP
+
+Se o seu site for hospedado por uma plataforma como o Blogger, você não terá acesso para modificar cabeçalhos e adicionar um CSP. Em vez disso, uma alternativa viável poderia ser usar um rastreador de site da Web para encontrar problemas em seu site para você, como [HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker) ou [Mixed Content Scan](https://github.com/bramus/mixed-content-scan).
+
+### Atualizando solicitações inseguras
+
+Os navegadores estão começando a atualizar e bloquear solicitações inseguras. Você pode usar as diretivas CSP para forçar a atualização automática ou o bloqueio desses ativos.
+
+A [`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) instrui o navegador a atualizar URLs inseguros antes de fazer solicitações de rede.
+
+Por exemplo, se uma página contém uma tag de imagem com um URL HTTP, como `<img src="http://example.com/image.jpg">`
+
+Em vez disso, o navegador faz uma solicitação segura para `https://example.com/image.jpg` , salvando assim o usuário de conteúdo misto.
+
+Você pode ativar esse comportamento enviando um `Content-Security-Policy` com esta diretiva:
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+Ou incorporando a mesma diretiva in-line na `<head>` do documento usando um elemento `<meta>`
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+Tal como acontece com a atualização automática do navegador, se o recurso não estiver disponível em HTTPS, a solicitação atualizada falhará e o recurso não será carregado. Isso mantém a segurança de sua página. A `upgrade-insecure-requests` irá além da atualização automática do navegador, tentando atualizar as solicitações que o navegador atualmente não faz.
+
+A `upgrade-insecure-requests` desdobra-se em `<iframe>`, garantindo que a página inteira seja protegida.
+
+### Bloqueando todo o conteúdo misto
+
+Uma opção alternativa para proteger os usuários é a diretiva CSP [`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking). Esta diretiva instrui o navegador a nunca carregar conteúdo misto; todas as solicitações de recursos de conteúdo misto são bloqueadas, incluindo conteúdo misto ativo e passivo. Essa opção também se desdobra em `<iframe>` , garantindo que toda a página tenha conteúdo misto livre.
+
+Uma página pode optar por esse comportamento enviando um `Content-Security-Policy` com esta diretiva:
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+Ou incorporando a mesma diretiva in-line na `<head>` do documento usando um elemento `<meta>`
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %} Se você definir `upgrade-insecure-requests` e `block-all-mixed-content`, `upgrade-insecure-requests` será avaliada e usada primeiro. O navegador não bloqueará solicitações. Portanto, você deve usar uma ou outra. {% endAside %}
diff --git a/src/site/content/pt/secure/index.md b/src/site/content/pt/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/pt/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/pt/secure/same-site-same-origin/index.md b/src/site/content/pt/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..d87fa87f223
--- /dev/null
+++ b/src/site/content/pt/secure/same-site-same-origin/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Entenda os termos "mesmo site" e "mesma origem"
+authors:
+  - agektmr
+date: 2020-04-14
+updated: 2020-06-10
+description: Os termos "mesmo site" e "mesma origem" são citados com frequência, mas muitas vezes mal interpretados. Este artigo ajuda você a entender o que eles significam e como diferem.
+tags:
+  - security
+---
+
+Os termos "mesmo site" (same-site) e "mesma origem" (same-origin) são citados com frequência, mas muitas vezes mal interpretados. Por exemplo, eles são mencionados no contexto de transições de página, solicitações de `fetch()`, cookies, abertura de pop-ups, recursos incorporados e iframes.
+
+## Origem
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="Origem", width="680", height="100" %}
+
+A "origem" é a combinação de um [esquema](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol) (também conhecido como [protocolo](https://developer.mozilla.org/docs/Glossary/Protocol), por exemplo, [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) ou [HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)), um [nome de host](https://en.wikipedia.org/wiki/Hostname) e uma [porta](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port) (se especificada). Por exemplo, no URL `https://www.example.com:443/foo`, a "origem" é `https://www.example.com:443`.
+
+### "mesma origem" e "origem cruzada" {: #same-origin-and-cross-origin }
+
+Os sites que possuem a mesma combinação de esquema, nome de host e porta são considerados de "mesma origem". Todos os outros são considerados de "origem cruzada" (cross-origin).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origem A</th>
+        <th>Origem B</th>
+        <th>Classificação da Origem A e B em "mesma origem" ou "origem cruzada" e justificativa</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>https: // <strong>www.evil.com</strong> : 443</td>
+        <td>origem cruzada: domínios diferentes</td>
+      </tr>
+      <tr>
+        <td>https://<strong>example.com</strong>:443</td>
+        <td>origem cruzada: subdomínios diferentes</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong> .example.com:443</td>
+        <td>origem cruzada: subdomínios diferentes</td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>origem cruzada: esquemas diferentes</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td>origem cruzada: portas diferentes</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>mesma origem: correspondência exata</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>mesma origem: correspondência do número de porta implícito (443)</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Site
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="Site", width="680", height="142" %}
+
+Os domínios de nível superior (TLDs), como `.com` e `.org`, estão listados em [Root Zone Database](https://www.iana.org/domains/root/db). No exemplo acima, "site" é a combinação do TLD e da parte do domínio que o precede. Por exemplo, no URL `https://www.example.com:443/foo`, o "site" é `example.com`.
+
+No entanto, para domínios como `.co.jp` ou `.github.io`, usar apenas o TLD de `.jp` ou `.io` não é detalhado o suficiente para identificar o "site". Além disso, não há como determinar algoritmicamente o nível de domínios registráveis para um determinado TLD. É por isso que uma lista de "TLDs efetivos" (eTLDs) foi criada. Eles são definidos na [Public Suffix List](https://wiki.mozilla.org/Public_Suffix_List) (Lista Pública de Sufixos). A lista de eTLDs está disponível em [publicsuffix.org/list](https://publicsuffix.org/list/).
+
+O nome completo do site é o eTLD+1. Por exemplo, no URL `https://my-project.github.io`, o eTLD é `.github.io` e o eTLD+1 é `my-project.github.io`, que é considerado um "site". Em outras palavras, o eTLD+1 é o TLD efetivo e a parte do domínio que o precede.
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### "mesmo site" e "vários sites" {: #same-site-cross-site }
+
+Os sites com o mesmo eTLD+1 são considerados o "mesmo site", enquanto aqueles com eTLD+1 diferentes são "vários sites" (cross-site).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origem A</th>
+        <th>Origem B</th>
+        <th>Classificação da Origem A e B em "mesmo site" ou "vários sites" e justificativa</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>vários sites: domínios diferentes</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>mesmo site: os subdomínios diferentes não importam</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td><strong>mesmo site: os esquemas diferentes não importam</strong></td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<br><strong>80</strong>
+</td>
+        <td><strong>mesmo site: as portas diferentes não importam</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>mesmo site: correspondência exata</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>mesmo site: as portas não importam</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### "schemeful same-site"
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+A definição de "mesmo site" está evoluindo ao considerar o esquema de URL como parte do site, a fim de evitar que o HTTP seja usado como um [canal fraco](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8). À medida que os navegadores mudam para essa interpretação, talvez você veja referências a "scheme-less same-site", relacionadas à definição mais antiga, e "[schemeful same-site](/schemeful-samesite/)", relacionadas à definição mais estrita. Nesse caso, `http://www.example.com` e `https://www.example.com` são considerados vários sites porque os esquemas não correspondem.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Origem A</th>
+        <th>Origem B</th>
+        <th>Classificação da Origem A e B em "schemeful same-site" ou "vários sites" e justificativa</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>vários sites: domínios diferentes</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>schemeful same-site: os subdomínios diferentes não importam</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>vários sites: esquemas diferentes</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>schemeful same-site: as portas diferentes não importam</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>schemeful same-site: correspondência exata</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>schemeful same-site: as portas não importam</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Como verificar se uma solicitação é de "mesmo site", "mesma origem" ou "vários sites"
+
+O Chrome envia solicitações junto com um cabeçalho HTTP `Sec-Fetch-Site`. Nenhum outro navegador é compatível com `Sec-Fetch-Site` desde abril de 2020. Isso faz parte de uma proposta mais ampla de [Cabeçalhos de Solicitação de Metadados Fetch](https://www.w3.org/TR/fetch-metadata/) (Fetch Metadata Request Headers). O cabeçalho terá um dos seguintes valores:
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+Ao examinar o valor de `Sec-Fetch-Site`, é possível determinar se a solicitação é de "mesmo site", "mesma origem" ou "vários sites" ("schemeful-same-site" não é capturado em `Sec-Fetch-Site`).
diff --git a/src/site/content/pt/secure/security-headers/index.md b/src/site/content/pt/secure/security-headers/index.md
new file mode 100644
index 00000000000..8db4a4f3abe
--- /dev/null
+++ b/src/site/content/pt/secure/security-headers/index.md
@@ -0,0 +1,808 @@
+---
+layout: post
+title: Referência rápida de cabeçalhos de segurança
+subhead: Saiba mais sobre cabeçalhos que podem manter seu site seguro e procure rapidamente os detalhes mais importantes.
+authors:
+  - agektmr
+  - maudn
+  - arturjanc
+date: 2021-05-18
+hero: image/YLflGBAPWecgtKJLqCJHSzHqe2J2/E3BVnrBFNV6w2Uqxn3bQ.jpg
+alt: Um bloqueio na frente do código compactado
+description: |2
+
+  Este artigo lista os cabeçalhos de segurança mais importantes que você pode usar para proteger
+
+  seu site. Use-o para entender os recursos de segurança baseados na web, aprender como
+
+  implemente-os em seu site e como referência para quando precisar de um lembrete.
+tags:
+  - blog
+  - security
+---
+
+Este artigo lista os cabeçalhos de segurança mais importantes que você pode usar para proteger seu site. Use-o para entender os recursos de segurança baseados na web, aprender como implementá-los em seu site e como referência para quando precisar de um lembrete.
+
+Cabeçalhos de segurança recomendados para sites que lidam com dados confidenciais do usuário:: [Política de segurança de conteúdo (CSP)](#csp) : [Tipos confiáveis](#tt)
+
+Cabeçalhos de segurança recomendados para todos os sites: : [X-Content-Type-Options](#xcto) : [X-Frame-Options](#xfo) : [Cross-Origin Resource Policy (CORP)](#corp) : [Cross-Origin Opener Policy (COOP)](#coop) : [HTTP Strict Transport Security (HSTS)](#hsts)
+
+Cabeçalhos de segurança para sites com recursos avançados: : [Compartilhamento de recursos de origem cruzada (CORS)](#cors): [Política de incorporação de origem cruzada (COEP)](#coep)
+
+{% Details %} {% DetailsSummary %}
+
+Ameaças conhecidas na Web
+
+Antes de mergulhar nos cabeçalhos de segurança, aprenda sobre ameaças conhecidas na web e por que você deseja usar esses cabeçalhos de segurança.
+
+{% endDetailsSummary %}
+
+Antes de mergulhar nos cabeçalhos de segurança, aprenda sobre ameaças conhecidas na web e por que você deseja usar esses cabeçalhos de segurança.
+
+### Proteja seu site contra vulnerabilidades de injeção
+
+As vulnerabilidades de injeção surgem quando dados não confiáveis processados por seu aplicativo podem afetar seu comportamento e, comumente, levar à execução de scripts controlados pelo invasor. A vulnerabilidade mais comum causada por bugs de injeção é [cross-site scripting](https://portswigger.net/web-security/cross-site-scripting) (XSS) em suas várias formas, incluindo [XSS refletido](https://portswigger.net/web-security/cross-site-scripting/reflected), [XSS armazenado](https://portswigger.net/web-security/cross-site-scripting/stored), [XSS baseado em DOM](https://portswigger.net/web-security/cross-site-scripting/dom-based) e outras variantes.
+
+Uma vulnerabilidade de XSS geralmente pode dar a um invasor acesso completo aos dados do usuário processados pelo aplicativo e a qualquer outra informação hospedada na mesma [origem da Web](/same-site-same-origin/#origin).
+
+As defesas tradicionais contra injeções incluem o uso consistente de sistemas de modelo HTML com escape automático, evitando o uso de [APIs JavaScript perigosas](https://domgo.at/cxss/sinks) e processando adequadamente os dados do usuário hospedando uploads de arquivos em um domínio separado e higienizando o HTML controlado pelo usuário.
+
+- Use [a Política de Segurança de Conteúdo (CSP)](#csp) para controlar quais scripts podem ser executados por seu aplicativo para reduzir o risco de injeções.
+- Use [Tipos confiáveis](#tt) para impor a higienização dos dados passados para APIs JavaScript perigosas.
+- Use [X-Content-Type-Options](#xcto) para evitar que o navegador interprete mal os tipos MIME dos recursos do seu site, o que pode levar à execução do script.
+
+### Isole seu site de outros sites
+
+A abertura da web permite que os sites interajam entre si de maneiras que podem violar as expectativas de segurança de um aplicativo. Isso inclui fazer solicitações autenticadas inesperadamente ou incorporar dados de outro aplicativo ao documento do invasor, permitindo que o invasor modifique ou leia os dados do aplicativo.
+
+As vulnerabilidades comuns que prejudicam o isolamento da web incluem [clickjacking](https://portswigger.net/web-security/clickjacking), [falsificação de solicitação entre sites](https://portswigger.net/web-security/csrf) (CSRF), [inclusão de script intersites](https://www.scip.ch/en/?labs.20160414) (XSSI) e vários [vazamentos entre sites](https://xsleaks.dev).
+
+- Use [X-Frame-Options](#xfo) para evitar que seus documentos sejam incorporados por um site malicioso.
+- Use a [Política de Recursos de Origem Cruzada (CORP)](#corp) para evitar que os recursos do seu site sejam incluídos por um site de origem cruzada.
+- Use a [Política de abertura de origem cruzada (COOP)](#coop) para proteger as janelas do seu site de interações de sites maliciosos.
+- Use o [Compartilhamento de recursos de origem cruzada (CORS)](#cors) para controlar o acesso aos recursos do seu site a partir de documentos de origem cruzada.
+
+[Post-Specter Web Development](https://www.w3.org/TR/post-spectre-webdev/) é uma ótima leitura se você estiver interessado nesses cabeçalhos.
+
+### Crie um site poderoso com segurança
+
+[Spectre](https://ieeexplore.ieee.org/document/8835233) coloca todos os dados carregados no mesmo [grupo de contexto de navegação](/why-coop-coep/) potencialmente legíveis, apesar [da política de mesma origem](/same-origin-policy/). Os navegadores restringem recursos que podem explorar a vulnerabilidade por trás de um ambiente especial denominado "[isolamento de origem cruzada](/coop-coep/)". Com o isolamento de origem cruzada, você pode usar recursos poderosos, como `SharedArrayBuffer`.
+
+- Use a [Política de Embedder de Origem Cruzada (COEP)](#coep) junto com [COOP](#coop) para permitir o isolamento de origem cruzada.
+
+### Criptografar o tráfego para seu site
+
+Os problemas de criptografia aparecem quando um aplicativo não criptografa totalmente os dados em trânsito, permitindo que invasores interceptadores aprendam sobre as interações do usuário com o aplicativo.
+
+A criptografia insuficiente pode surgir nos seguintes casos: não usar HTTPS, [conteúdo misto](/what-is-mixed-content/), configuração de cookies sem o [atributo `Secure`](https://developer.mozilla.org/docs/Web/HTTP/Cookies#restrict_access_to_cookies) (ou [prefixo `__Secure`](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Cookie_prefixes)) ou [lógica de validação CORS pouco segura](https://blog.detectify.com/2018/04/26/cors-misconfigurations-explained/).
+
+- Use [HTTP Strict Transport Security (HSTS)](#hsts) para servir seu conteúdo de maneira consistente por meio de HTTPS.
+
+{% endDetails %}
+
+## Política de segurança de conteúdo (CSP) {: #csp}
+
+[Cross-Site Scripting (XSS)](https://www.google.com/about/appsecurity/learning/xss/) é um ataque em que uma vulnerabilidade em um site permite que um script malicioso seja injetado e executado.
+
+`Content-Security-Policy` fornece uma camada adicional para mitigar ataques XSS, restringindo quais scripts podem ser executados pela página.
+
+É recomendável que você habilite o CSP estrito usando uma das seguintes abordagens:
+
+- Se você renderizar suas páginas HTML no servidor, use **um CSP estrito baseado em nonce** .
+- Se o seu HTML tiver que ser servido estaticamente ou em cache, por exemplo, se for um aplicativo de página única, use **um CSP estrito baseado em hash** .
+
+{% Label %} Exemplo de uso: um CSP baseado em nonce {% endLabel%}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar CSP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+{% Aside %}
+
+Um CSP pode ser uma *proteção extra* contra ataques XSS; você ainda deve se certificar de escapar (e higienizar) a entrada do usuário.
+
+{% endAside %}
+
+#### 1. Use um CSP estrito baseado em nonce {: #nonce-based-csp}
+
+Se você renderizar suas páginas HTML no servidor, use **um CSP estrito baseado em nonce**.
+
+{% Aside 'caution' %}
+
+Um nonce é um número aleatório usado apenas uma vez. Um CSP baseado em nonce só é seguro se você puder gerar um nonce diferente para cada resposta. Se você não puder fazer isso, use [um CSP baseado](#hash-based-csp) em hash.
+
+{% endAside %}
+
+Gere um novo valor nonce de script para cada solicitação no lado do servidor e defina o seguinte cabeçalho:
+
+{% Label %} arquivo de configuração do servidor {% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+Em HTML, para carregar os scripts, defina o `nonce` de todas as `<script>` para a mesma string `{RANDOM1}`
+
+{% Label %} index.html {% endLabel %}
+
+```html
+<script nonce="{RANDOM1}" src="https://example.com/script1.js"></script>
+<script nonce="{RANDOM1}">
+  // Inline scripts can be used with the `nonce` attribute.
+</script>
+```
+
+[O Google Fotos](https://photos.google.com/) é um bom exemplo de CSP estrito baseado em nonce. Use DevTools para ver como ele é usado.
+
+#### 2. Use um CSP estrito baseado em hash {: #hash-based-csp }
+
+Se o seu HTML tiver que ser servido estaticamente ou em cache, por exemplo, se você estiver construindo um aplicativo de página única, use **um CSP estrito baseado em hash**.
+
+{% Label %} arquivo de configuração do servidor {% endLabel %}
+
+```http
+Content-Security-Policy:
+  script-src 'sha256-{HASH1}' 'sha256-{HASH2}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+Em HTML, você precisará embutir seus scripts para aplicar uma política baseada em hash, porque a [maioria dos navegadores não oferece suporte para scripts externos de hash](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned).
+
+{% Label %} index.html {% endLabel %}
+
+```html
+<script>
+...// your script1, inlined
+</script>
+<script>
+...// your script2, inlined
+</script>
+```
+
+Para carregar scripts externos, leia "Carregar scripts de origem dinamicamente" na opção B: seção [Cabeçalho de resposta de CSP baseado em hash.](/strict-csp/#hash-based-csp)
+
+[O CSP Evaluator](https://csp-evaluator.withgoogle.com/) é uma boa ferramenta para avaliar seu CSP, mas ao mesmo tempo um bom exemplo de CSP estrito baseado em nonce. Use DevTools para ver como ele é usado.
+
+### Navegadores com suporte
+
+Chrome, Firefox, Edge, Safari
+
+{% Aside 'gotchas' %}
+
+- `https:` é um substituto para o Safari e `unsafe-inline` é um substituto para versões de navegador muito antigas. `https:` e `unsafe-inline` não tornam sua política menos segura porque serão ignorados por navegadores que oferecem suporte a `strict-dynamic`. Leia mais em [Adicionar substitutos para oferecer suporte ao Safari e navegadores mais antigos](/strict-csp/#step-4-add-fallbacks-to-support-safari-and-older-browsers).
+- O Safari ainda *não* suporta `strict-dynamic`. Mas um CSP estrito como nos exemplos acima é mais seguro do que um CSP de lista de permissões (e muito mais seguro do que nenhum CSP) para todos os seus usuários. Mesmo no Safari, um CSP estrito protege seu site de alguns tipos de ataques XSS, porque a presença do CSP não permite certos padrões inseguros.
+
+{% endAside %}
+
+Veja[mais compatibilidades](https://developer.mozilla.org/docs/Web/HTTP/CSP#browser_compatibility).
+
+### Outras coisas a serem observadas sobre CSP
+
+- [`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) protege seu site contra clickjacking - um risco que surge se você permitir que sites não confiáveis incorporem o seu. Se você preferir uma solução mais simples, pode usar [`X-Frame-Options`](#xfo) para bloquear o carregamento, mas `frame-ancestors` oferecem uma configuração avançada para permitir apenas origens específicas como incorporadores.
+- Você pode ter usado [um CSP para garantir que todos os recursos do seu site sejam carregados por HTTPS](/fixing-mixed-content/#content-security-policy). Isso se tornou menos relevante: hoje em dia, a maioria dos navegadores bloqueia [conteúdo misto](/what-is-mixed-content/).
+- Você também pode definir um CSP no [modo somente relatório](/strict-csp/#step-2-set-a-strict-csp-and-prepare-your-scripts).
+- Se você não pode definir um CSP como um cabeçalho do lado do servidor, você também pode defini-lo como uma metatag. Observe que você não pode usar o **modo somente relatório** para metatags (embora [isso possa mudar](https://github.com/w3c/webappsec-csp/issues/277)).
+
+### Saber mais
+
+- [Mitigar XSS com uma Política de Segurança de Conteúdo Estrita (CSP)](/strict-csp)
+- [Folha de referências da política de segurança de conteúdo](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
+
+{% endDetails %}
+
+## Tipos confiáveis {: #tt}
+
+[O XSS baseado em DOM](https://portswigger.net/web-security/cross-site-scripting/dom-based) é um ataque em que dados maliciosos são passados para um coletor que oferece suporte à execução de código dinâmico, como `eval()` ou `.innerHTML`.
+
+Tipos confiáveis fornecem as ferramentas para escrever, revisar a segurança e manter aplicativos livres de DOM XSS. Eles podem ser ativados via [CSP](#csp) e tornar o código JavaScript seguro por padrão, limitando APIs da web perigosas para aceitar apenas um objeto especial - um tipo confiável.
+
+Para criar esses objetos, você pode definir políticas de segurança nas quais pode garantir que as regras de segurança (como escape ou sanitização) sejam aplicadas de forma consistente antes que os dados sejam gravados no DOM. Essas políticas são, então, os únicos lugares no código que podem potencialmente introduzir o DOM XSS.
+
+{% Label %} Exemplos de uso {% endLabel %}
+
+```http
+Content-Security-Policy: require-trusted-types-for 'script'
+```
+
+```javascript
+// Feature detection
+if (window.trustedTypes && trustedTypes.createPolicy) {
+  // Name and create a policy
+  const policy = trustedTypes.createPolicy('escapePolicy', {
+    createHTML: str => {
+      return str.replace(/\</g, '<').replace(/>/g, '>');
+    }
+  });
+}
+```
+
+```javascript
+// Assignment of raw strings is blocked by Trusted Types.
+el.innerHTML = 'some string'; // This throws an exception.
+
+// Assignment of Trusted Types is accepted safely.
+const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar tipos confiáveis
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+1. Aplicar tipos confiáveis para coletores DOM perigosos {% Label %} CSP e cabeçalho de tipos confiáveis: {% endLabel %}
+
+    ```http
+    Content-Security-Policy: require-trusted-types-for 'script'
+    ```
+
+    Atualmente, `'script'` é o único valor aceitável para a diretiva `require-trusted-types-for`
+
+    Claro, você pode combinar Tipos confiáveis com outras diretivas CSP:
+
+    {% Label %} Mesclando um CSP baseado em nonce de cima com tipos confiáveis: {% endLabel %}
+
+    ```http
+    Content-Security-Policy:
+      script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
+      object-src 'none';
+      base-uri 'none';
+      require-trusted-types-for 'script';
+    ```
+
+    {% Aside %}
+
+    Você pode limitar os nomes de política de Tipos confiáveis permitidos definindo uma `trusted-types` (por exemplo, `trusted-types myPolicy`). No entanto, isso não é um requisito.
+
+    {% endAside %}
+
+2. Defina uma política
+
+    Política do {% Label %}: {% endLabel %}
+
+    ```javascript
+    // Feature detection
+    if (window.trustedTypes && trustedTypes.createPolicy) {
+      // Name and create a policy
+      const policy = trustedTypes.createPolicy('escapePolicy', {
+        createHTML: str => {
+          return str.replace(/\</g, '&lt;').replace(/>/g, '&gt;');
+        }
+      });
+    }
+    ```
+
+    {% Aside %}
+
+    Você pode definir políticas com nomes arbitrários, a menos que limite os nomes das políticas de Tipos confiáveis permitidos definindo a diretiva de `trusted-types`
+
+    {% endAside %}
+
+3. Aplicar a política
+
+    {% Label %} Use a política ao gravar dados no DOM: {% endLabel %}
+
+    ```javascript
+    // Assignment of raw strings are blocked by Trusted Types.
+    el.innerHTML = 'some string'; // This throws an exception.
+
+    // Assignment of Trusted Types is accepted safely.
+    const escaped = policy.createHTML('<img src=x onerror=alert(1)>');
+    el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)&gt;'
+    ```
+
+    Com `require-trusted-types-for 'script'`, usar um tipo confiável é um requisito. Usar qualquer API DOM perigosa com uma string resultará em um erro.
+
+### Navegadores com suporte
+
+Chrome, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/?search=trusted%20types).
+
+### Saber mais
+
+- [Evite vulnerabilidades de cross-site scripting baseadas em DOM com Tipos confiáveis](/trusted-types/)
+- [CSP: requerem tipos confiáveis para - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for)
+- [CSP: tipos confiáveis - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
+- [Demonstração de Tipos confiáveis -](https://www.compass-demo.com/trusted-types/) abra o DevTools Inspector e veja o que está acontecendo
+
+{% endDetails %}
+
+## X-Content-Type-Options {: #xcto}
+
+Quando um documento HTML malicioso é veiculado em seu domínio (por exemplo, se uma imagem carregada em um serviço de fotos contém marcação HTML válida), alguns navegadores o tratam como um documento ativo e permitem que ele execute scripts no contexto do aplicativo, levando a um [bug de script entre sites](https://www.google.com/about/appsecurity/learning/xss/).
+
+`X-Content-Type-Options: nosniff` evita isso instruindo o navegador de que o [tipo MIME](https://mimesniff.spec.whatwg.org/#introduction) definido no `Content-Type` para uma determinada resposta está correto. Este cabeçalho é recomendado para **todos os seus recursos**.
+
+{% Label %} Exemplo de uso {% endLabel%}
+
+```http
+X-Content-Type-Options: nosniff
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar X-Content-Type-Options
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+`X-Content-Type-Options: nosniff` é recomendado para todos os recursos servidos pelo seu servidor junto com o cabeçalho `Content-Type`
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/IWqRWe9R1mOJImmMbLoM.png", alt="X-Content-Type-Options: nosniff", width="800", height="237" %}
+
+{% Label %} Cabeçalhos de exemplo enviados com um documento HTML {% endLabel %}
+
+```http
+X-Content-Type-Options: nosniff
+Content-Type: text/html; charset=utf-8
+```
+
+### Navegadores com suporte
+
+Chrome, Firefox, Safari, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/mdn-http_headers_x-content-type-options).
+
+### Saber mais
+
+- [X-Content-Type-Options - HTTP MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options)
+
+{% endDetails %}
+
+## Opções de X-Frame {: #xfo}
+
+Se um site malicioso puder incorporar seu site como um iframe, isso pode permitir que os invasores invoquem ações não intencionais do usuário com [clickjacking](https://portswigger.net/web-security/clickjacking). Além disso, em alguns casos, os [ataques do tipo Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) dão a sites mal-intencionados a chance de aprender sobre o conteúdo de um documento incorporado.
+
+`X-Frame-Options` indica se um navegador deve ter ou não permissão para renderizar uma página em um `<frame>`, `<iframe>`, `<embed>` ou `<object>`. **Todos os documentos** são recomendados para enviar este cabeçalho para indicar se eles permitem ser incorporados por outros documentos.
+
+{% Aside %}
+
+Se você precisar de um controle mais granular, como permitir que apenas uma origem específica incorpore o documento, use a diretiva de [`frame-ancestors`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) [CSP.](#csp)
+
+{% endAside %}
+
+{% Label %} Exemplo de uso {% endLabel%}
+
+```http
+X-Frame-Options: DENY
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar as opções do X-Frame
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Todos os documentos que não foram projetados para serem incorporados devem usar o cabeçalho `X-Frame-Options`
+
+Você pode experimentar como as configurações a seguir afetam o carregamento de um iframe [nesta demonstração](https://cross-origin-isolation.glitch.me/). Altere o `X-Frame-Options` e clique no botão **Recarregar o iframe**.
+
+#### Protege o seu site de ser incorporado por qualquer outro site
+
+Negar ser incorporado por qualquer outro documento.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2ZM5obgGK38CMcZ75PkH.png", alt="X-Frame-Options: DENY", width="800", height="237" %}
+
+```http
+X-Frame-Options: DENY
+```
+
+#### Protege seu site de ser incorporado por qualquer site de origem cruzada
+
+Permitir a incorporação apenas por documentos da mesma origem.
+
+```http
+X-Frame-Options: SAMEORIGIN
+```
+
+{% Aside 'gotchas' %}
+
+Documentos sendo incorporados por padrão significa que os desenvolvedores da web precisam enviar explicitamente `DENY` ou `SAMEORIGIN` para parar de serem incorporados e se protegerem de ataques de canal lateral. A equipe do Chrome está considerando a possibilidade de bloquear a incorporação de documentos por padrão, para que os sites sejam seguros, mesmo que não definam explicitamente o cabeçalho. Nesse novo mundo, os documentos precisariam optar explicitamente por serem incorporados.
+
+{% endAside %}
+
+### Navegadores com suporte
+
+Chrome, Firefox, Safari, Edge
+
+Veja [mais compatibilidades](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options#browser_compatibility).
+
+### Saber mais
+
+- [Opções de X-Frame - HTTP](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options)
+
+{% endDetails %}
+
+## Política de recursos de origem cruzada (CORP) {: #corp}
+
+Um invasor pode incorporar recursos de outra origem, por exemplo, do seu site, para obter informações sobre eles, explorando [vazamentos entre sites](https://xsleaks.dev/) baseados na web.
+
+`Cross-Origin-Resource-Policy` mitiga esse risco, indicando o conjunto de sites pelos quais ele pode ser carregado. O cabeçalho assume um de três valores: `same-origin`, `same-site` e `cross-origin`. **Todos os recursos** são recomendados para enviar este cabeçalho para indicar se eles permitem ser carregados por outros sites.
+
+{% Label %} Exemplo de uso {% endLabel%}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar o CORP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+É recomendável que **todos os** recursos sejam servidos com um dos três cabeçalhos a seguir.
+
+Você pode experimentar como as configurações a seguir afetam o carregamento de recursos em um ambiente [`Cross-Origin-Embedder-Policy: require-corp`](#coep) [nesta demonstração](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Altere o **menu suspenso Cross-Origin-Resource-Policy** e clique no botão **Recarregar o iframe** ou **Recarregar a imagem** para ver o efeito.
+
+#### Permitir que recursos sejam carregados `cross-origin`
+
+Recomenda-se que os serviços do tipo CDN apliquem `cross-origin` aos recursos (uma vez que geralmente são carregados por páginas de origem cruzada), a menos que já sejam servidos por meio do [CORS,](#cors) que tem um efeito semelhante.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/qP2mspVMC6RazxDjWUrL.png", alt="Cross-Origin-Resource-Policy: cross-origin", width="800", height="234" %}
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+#### Limite os recursos a serem carregados da `same-origin`
+
+`same-origin` deve ser aplicada a recursos que devem ser carregados apenas por páginas da mesma origem. Você deve aplicar isso a recursos que incluem informações confidenciais sobre o usuário ou respostas de uma API que se destina a ser chamada apenas da mesma origem.
+
+Lembre-se de que os recursos com este cabeçalho ainda podem ser carregados diretamente, por exemplo, navegando para o URL em uma nova janela do navegador. A Política de Recursos de Origem Cruzada protege apenas o recurso de ser incorporado por outros sites.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/7UzYMWsbKkh89m5ZImvj.png", alt="Cross-Origin-Resource-Policy: same-origin", width="800", height="238" %}
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+#### Limite os recursos a serem carregados do `same-site`
+
+`same-site` é recomendado para ser aplicado a recursos semelhantes aos anteriores, mas que devem ser carregados por outros subdomínios de seu site.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/R9yNRGSJ4xABc560WRJI.png", alt="Cross-Origin-Resource-Policy: same-site", width="800", height="233" %}
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+{% Aside %}
+
+Para saber mais sobre a diferença entre mesma origem e mesmo site, consulte [Noções básicas sobre "mesmo site" e "mesma origem"](/same-site-same-origin/).
+
+{% endAside %}
+
+### Navegadores compatíveis
+
+Chrome, Firefox, Safari, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-resource-policy).
+
+### Saber mais
+
+- [Considere a implantação de política de recursos de origem cruzada](https://resourcepolicy.fyi/)
+- [Tornar seu site "de origem cruzada isolado" usando COOP e COEP](/coop-coep/)
+- [Por que você precisa de "origem cruzada isolada" para recursos poderosos](/why-coop-coep/)
+
+{% endDetails %}
+
+## Política de abertura de origem cruzada (COOP) {: #coop}
+
+O site de um invasor pode abrir outro site em uma janela pop-up para obter informações sobre ele, explorando [vazamentos entre sites](https://xsleaks.dev/) baseados na web. Em alguns casos, isso também pode permitir a exploração de ataques de canal lateral baseados em [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)).
+
+O `Cross-Origin-Opener-Policy` fornece uma maneira para um documento se isolar de janelas de origem cruzada abertas por `window.open()` ou um link com `target="_blank"` sem `rel="noopener"`. Como resultado, qualquer recursos de abertura de origem cruzada do documento não terá nenhuma referência a ele e não será capaz de interagir com ele.
+
+{% Label %} Exemplo de uso {% endLabel%}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar o COOP
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Você pode tentar como as configurações a seguir afetam a comunicação com uma janela pop-up de origem cruzada [nesta demonstração](https://cross-origin-isolation.glitch.me/). Altere o **menu suspenso Cross-Origin-Opener-Policy** para o documento e a janela pop-up, clique no botão **Abrir um pop-up** e, em seguida, clique em **Enviar uma postMessage** para confirmar se a mensagem foi realmente entregue.
+
+#### Isole um documento de janelas de origem cruzada
+
+Definir a `same-origin` isola o documento das janelas de documentos de origem cruzada.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/mSDG9auD7r5asxGJvJjg.png", alt="Cross-Origin-Opener-Policy: same-origin", width="800", height="235" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Isola um documento de janelas de origem cruzada, mas permite pop-ups
+
+Definir `same-origin-allow-popups` permite que um documento retenha uma referência a suas janelas pop-up, a menos que eles definam COOP como `same-origin` ou `same-origin-allow-popups`. Isso significa que `same-origin-allow-popups` ainda pode proteger o documento de ser referenciado quando aberto como uma janela pop-up, mas permite que ele se comunique com seus próprios pop-ups.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/2uJZ0s2VnjxJUcBI2Ol9.png", alt="Cross-Origin-Opener-Policy: same-origin-allow-popups", width="800", height="233" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+#### Permitir que um documento seja referenciado por janelas de origem cruzada
+
+`unsafe-none` é o valor padrão, mas você pode indicar explicitamente que este documento pode ser aberto por uma janela de origem cruzada e manter o acesso mútuo.
+
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/oSco89ZT3RP7gZzNKDjY.png", alt="Cross-Origin-Opener-Policy: unsafe-none", width="800", height="233" %}
+
+{% Aside 'gotchas' %}
+
+`unsafe-none` sendo o padrão significa que os desenvolvedores da web precisam enviar `same-origin-allow-popups` `same-origin` ou mesma origem explicitamente para proteger seu site de ataques de canal lateral.
+
+{% endAside %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+{% Aside %}
+
+Recursos como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` ou [JS Self Profiling API](https://wicg.github.io/js-self-profiling/) são desabilitados por padrão. Alguns navegadores permitem que você os use em contextos de "origem cruzada isolada", que exigem que você defina os cabeçalhos [COOP](#coop) e [COEP.](#coep)
+
+Para saber mais, leia [Como deixar seu site "isolado de origem cruzada" usando COOP e COEP](/coop-coep/).
+
+{% endAside %}
+
+#### Padrões de relatório incompatíveis com COOP
+
+Você pode receber relatórios quando o COOP impede interações entre janelas com a API de relatórios.
+
+```http
+Cross-Origin-Opener-Policy: same-origin; report-to="coop"
+```
+
+O COOP também oferece suporte a um modo somente relatório para que você possa receber relatórios sem realmente bloquear a comunicação entre documentos de origem cruzada.
+
+```http
+Cross-Origin-Opener-Policy-Report-Only: same-origin; report-to="coop"
+```
+
+### Navegadores compatíveis
+
+Chrome, Firefox, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-opener-policy).
+
+### Saber mais
+
+- [Por que você precisa de "origem cruzada isolada" para recursos poderosos](/why-coop-coep/)
+
+{% endDetails %}
+
+## Compartilhamento de recursos de origem cruzada (CORS) {: #cors}
+
+Ao contrário de outros itens neste artigo, Cross-Origin Resource Sharing (CORS) não é um cabeçalho, mas um mecanismo de navegador que solicita e permite o acesso a recursos de origem cruzada.
+
+Por padrão, os navegadores impõem [a política de mesma origem](/same-origin-policy/) para evitar que uma página da web acesse recursos de origem cruzada. Por exemplo, quando uma imagem de origem cruzada é carregada, mesmo que seja exibida na página da web visualmente, o JavaScript na página não tem acesso aos dados da imagem. O provedor de recursos pode relaxar as restrições e permitir que outros sites leiam o recurso optando pelo CORS.
+
+{% Label %} Exemplo de uso {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar o CORS
+
+{% endDetailsSummary %}
+
+Antes de examinar como configurar o CORS, é útil entender a distinção entre os tipos de solicitação. Dependendo dos detalhes do pedido, um pedido será classificado como um **pedido simples** ou um **pedido preflight**.
+
+Critérios para um pedido simples:
+
+- O método é `GET`, `HEAD` ou `POST`.
+- Os cabeçalhos personalizados incluem apenas `Accept`, `Accept-Language`, `Content-Language` e `Content-Type`.
+- O `Content-Type` é `application/x-www-form-urlencoded`, `multipart/form-data` ou `text/plain`.
+
+Todo o resto é classificado como uma solicitação preflight. Para obter mais detalhes, consulte [Compartilhamento de recursos entre origens (CORS) - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS#simple_requests).
+
+### Usos recomendados
+
+#### Solicitação simples
+
+Quando uma solicitação atende aos critérios de solicitação simples, o navegador envia uma solicitação de origem cruzada com um `Origin` que indica a origem da solicitação.
+
+{% Label %} Exemplo de cabeçalho de solicitação {% endLabel %}
+
+```http
+Get / HTTP/1.1
+Origin: https://example.com
+```
+
+{% Label %} Exemplo de cabeçalho de resposta {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+- `Access-Control-Allow-Origin: https://example.com` indica que `https://example.com` pode acessar o conteúdo da resposta. Os recursos que devem ser lidos por qualquer site podem definir esse cabeçalho como `*`, caso em que o navegador exigirá apenas que a solicitação seja feita [sem credenciais](https://developer.mozilla.org/docs/Web/API/Request/credentials#value).
+- `Access-Control-Allow-Credentials: true` indica que as solicitações que carregam credenciais (cookies) têm permissão para carregar o recurso. Caso contrário, as solicitações autenticadas serão rejeitadas mesmo se a origem da solicitação estiver presente no cabeçalho `Access-Control-Allow-Origin`
+
+Você pode experimentar como a solicitação simples afeta o carregamento de recursos em um ambiente [`Cross-Origin-Embedder-Policy: require-corp`](#coep) [nesta demonstração](https://cross-origin-isolation.glitch.me/?coep=require-corp&). Clique na **caixa de seleção Compartilhamento de recursos de origem cruzada** e clique no botão **Recarregar a imagem** para ver o efeito.
+
+#### Solicitações comprovadas
+
+Uma solicitação preflight é precedida de uma `OPTIONS` para verificar se a solicitação subsequente pode ser enviada.
+
+{% Label %} Exemplo de cabeçalho de solicitação {% endLabel %}
+
+```http
+OPTIONS / HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+```
+
+- `Access-Control-Request-Method: POST` permite que a seguinte solicitação seja feita com o método `POST`
+- `Access-Control-Request-Headers: X-PINGOTHER, Content-Type` permite que o solicitante defina os `X-PINGOTHER` e `Content-Type` na solicitação subsequente.
+
+{% Label %} Cabeçalhos de resposta de exemplo {% endLabel %}
+
+```http
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+```
+
+- `Access-Control-Allow-Methods: POST, GET, OPTIONS` indica que as solicitações subsequentes podem ser feitas com os métodos `POST`, `GET` e `OPTIONS`
+- `Access-Control-Allow-Headers: X-PINGOTHER, Content-Type` indica que as solicitações subsequentes podem incluir os cabeçalhos `X-PINGOTHER` e `Content-Type`
+- `Access-Control-Max-Age: 86400` indica que o resultado da solicitação preflight pode ser armazenado em cache por 86400 segundos.
+
+### Navegadores compatíveis
+
+Chrome, Firefox, Safari, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/mdn-http_headers_content-length_cors_response_safelist).
+
+### Saber mais
+
+- [Compartilhamento de recursos de origem cruzada (CORS)](/cross-origin-resource-sharing/)
+- [Compartilhamento de recursos de origem cruzada (CORS) - HTTP | MDN](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+
+{% endDetails %}
+
+## Política de incorporação de origem cruzada (COEP) {: #coep}
+
+Para reduzir a capacidade dos [ataques baseados em Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) para roubar recursos de origem cruzada, recursos como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` ou [API JS Self Profiling](https://wicg.github.io/js-self-profiling/) são desabilitados por padrão.
+
+`Cross-Origin-Embedder-Policy: require-corp` impede que documentos e workers carreguem recursos de origem cruzada, como imagens, scripts, folhas de estilo, iframes e outros, a menos que esses recursos optem explicitamente por serem carregados por meio de cabeçalhos [CORS](#cors) ou [CORP.](#corp) O COEP pode ser combinado com `Cross-Origin-Opener-Policy` para permitir que um documento seja [isolado de origem cruzada](/cross-origin-isolation-guide/).
+
+Use `Cross-Origin-Embedder-Policy: require-corp` quando quiser habilitar [o isolamento de origem cruzada](/coop-coep/) para o seu documento.
+
+{% Label %} Exemplo de uso {% endLabel %}
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar o COEP
+
+{% endDetailsSummary %}
+
+### Exemplos de uso
+
+COEP assume um único valor de `require-corp`. Ao enviar esse cabeçalho, você pode instruir o navegador a bloquear o carregamento de recursos que não optem por meio de [CORS](#cors) ou [CORP](#corp).
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="Como a COEP funciona", width="800", height="410" %}
+
+Você pode experimentar como as configurações a seguir afetam o carregamento de recursos [nesta demonstração](https://cross-origin-isolation.glitch.me/). Altere o menu suspenso **Cross-Origin-Embedder-Policy**, o menu suspenso **Cross-Origin-Resource-Policy**, a caixa de seleção **Apenas relatório** e afins para ver como eles afetam o carregamento de recursos. Além disso, abra [a demonstração do endpoint de relatório](https://reporting-endpoint.glitch.me/) para ver se os recursos bloqueados são relatados.
+
+#### Ativar isolamento de origem cruzada
+
+Habilite [o isolamento de origem](/coop-coep) cruzada enviando `Cross-Origin-Embedder-Policy: require-corp` junto com `Cross-Origin-Opener-Policy: same-origin`.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+#### Reportar recursos incompatíveis com o COEP
+
+Você pode receber relatórios de recursos bloqueados causados pelo COEP com a API de relatórios.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp; report-to="coep"
+```
+
+O COEP também oferece suporte ao modo somente relatório para que você possa receber relatórios sem realmente bloquear os recursos de carregamento.
+
+```http
+Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="coep"
+```
+
+### Navegadores compatíveis
+
+Chrome, Firefox, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/mdn-http_headers_cross-origin-embedder-policy).
+
+### Saber mais
+
+- [Como deixar seu site "de origem cruzada isolado" usando COOP e COEP](/coop-coep/)
+- [Por que você precisa de "origem cruzada isolada" para recursos poderosos](/why-coop-coep/)
+- [Um guia para permitir o isolamento de origem cruzada](/cross-origin-isolation-guide/)
+
+{% endDetails %}
+
+## Segurança de transporte estrita HTTP (HSTS) {: #hsts}
+
+A comunicação em uma conexão HTTP simples não é criptografada, tornando os dados transferidos acessíveis para bisbilhoteiros no nível da rede.
+
+`Strict-Transport-Security` informa ao navegador que ele nunca deve carregar o site usando HTTP e, em vez disso, usar HTTPS. Depois de definido, o navegador usará HTTPS em vez de HTTP para acessar o domínio sem um redirecionamento por um período definido no cabeçalho.
+
+{% Label %} Exemplo de uso {% endLabel%}
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+{% Details %} {% DetailsSummary %}
+
+Como usar HSTS
+
+{% endDetailsSummary %}
+
+### Usos recomendados
+
+Todos os sites que fazem a transição de HTTP para HTTPS devem responder com um `Strict-Transport-Security` quando uma solicitação com HTTP é recebida.
+
+```http
+Strict-Transport-Security: max-age=31536000
+```
+
+### Navegadores compatíveis
+
+Chrome, Firefox, Safari, Edge
+
+Veja [mais compatibilidades](https://caniuse.com/stricttransportsecurity).
+
+### Saber mais
+
+- [Strict-Transport-Security - HTTP](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security)
+
+{% endDetails %}
+
+## Leitura adicional
+
+- [Desenvolvimento Web Pós-Spectre](https://www.w3.org/TR/post-spectre-webdev/)
diff --git a/src/site/content/pt/secure/what-is-mixed-content/index.md b/src/site/content/pt/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..dd583b8b331
--- /dev/null
+++ b/src/site/content/pt/secure/what-is-mixed-content/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: O que é conteúdo misto?
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: |2-
+
+  O conteúdo misto ocorre quando o HTML inicial é carregado por meio de uma conexão HTTPS segura,
+  mas outros recursos são carregados por meio de uma conexão HTTP insegura.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+O **conteúdo misto** ocorre quando o HTML inicial é carregado por meio de uma conexão [HTTPS](/why-https-matters/) segura, mas outros recursos (como imagens, vídeos, folhas de estilo, scripts) são carregados por meio de uma conexão HTTP insegura. Isso é chamado de conteúdo misto porque os conteúdos HTTP e HTTPS estão sendo carregados para exibir a mesma página, e a solicitação inicial era segura por HTTPS.
+
+Solicitar subrecursos usando o protocolo inseguro HTTP diminui a segurança de toda a página, pois essas solicitações são vulneráveis a [**ataques on-path**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1), em que um invasor escuta uma conexão de rede e visualiza ou modifica a comunicação entre as duas partes. Usando esses recursos, os invasores podem rastrear os usuários e substituir o conteúdo em um site e, no caso de conteúdo misto ativo, assumir o controle total da página, não apenas dos recursos inseguros.
+
+Embora muitos navegadores exibam avisos de conteúdo misto ao usuário, quando isso acontece, é tarde demais: as solicitações inseguras já foram realizadas, e a segurança da página está comprometida.
+
+É por isso que os navegadores estão bloqueando cada vez mais conteúdo misto. Se você misturou conteúdo em seu site, corrigir esse problema garantirá que o conteúdo continue sendo carregado à medida que os navegadores vão ficando mais restritos.
+
+## Os dois tipos de conteúdo misto
+
+Os dois tipos de conteúdo misto são: ativo e passivo.
+
+**Conteúdo misto passivo** refere-se ao conteúdo que não interage com o resto da página e, portanto, os invasores que usam o ataque man-in-the-middle têm restrições quanto ao que podem fazer se interceptarem ou alterarem esse conteúdo. O conteúdo misto passivo é definido como conteúdo de imagens, vídeo e áudio.
+
+O **conteúdo misto ativo** interage com a página como um todo e permite que um invasor faça quase tudo com a página. O conteúdo misto ativo inclui scripts, folhas de estilo, iframes e outros códigos que o navegador pode baixar e executar.
+
+### Conteúdo misto passivo
+
+O conteúdo misto passivo é visto como menos problemático, mas ainda representa uma ameaça à segurança para seu site e usuários. Por exemplo, um invasor pode interceptar solicitações HTTP de imagens em seu site e trocá-las ou substituí-las; o invasor pode trocar as imagens dos botões *salvar* e *excluir*, fazendo com que os usuários excluam conteúdo sem querer; pode substituir os diagramas de produtos por conteúdo obsceno ou pornográfico, desfigurando seu site; ou pode substituir as fotos de produtos por anúncios de um site ou produto diferente.
+
+Mesmo que o invasor não altere o conteúdo do site, ele pode rastrear os usuários por meio de solicitações de conteúdo misto. O invasor pode saber quais páginas um usuário visita e quais produtos ele visualiza com base em imagens ou outros recursos carregados pelo navegador.
+
+Se houver conteúdo misto passivo, a maioria dos navegadores indicará na barra de URL que a página não é segura, mesmo se página tiver sido carregada por HTTPS. Você pode observar esse comportamento com esta [demonstração](https://passive-mixed-content.glitch.me/), que contém exemplos de conteúdo misto passivo.
+
+Até recentemente, o conteúdo misto passivo era carregado em todos os navegadores, pois bloqueá-lo teria deixado muitos sites inutilizáveis. Agora, isso está começando a mudar e, por isso, é essencial atualizar todas as instâncias de conteúdo misto em seu site.
+
+[O Chrome está lançando atualmente](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) uma atualização automática de conteúdo misto passivo, sempre que possível. Com a atualização automática, se o ativo estiver disponível por HTTPS, mas tiver sido fixado no código como HTTP, o navegador carregará a versão HTTPS. Se nenhuma versão segura for encontrada, o ativo não será carregado.
+
+Sempre que detecta conteúdo misto ou atualiza automaticamente conteúdo misto passivo, o Chrome registra mensagens detalhadas na guia **Problemas** das DevTools para orientar você sobre como corrigir o problema específico.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="A guia Problemas no Chrome DevTools mostra informações detalhadas sobre o problema de conteúdo misto específico e como corrigi-lo", width="800", height="310" %}</figure>
+
+### Conteúdo misto ativo
+
+O conteúdo misto ativo representa uma ameaça maior do que o conteúdo misto passivo. Um invasor pode interceptar e reescrever o conteúdo ativo, assumindo assim o controle total de sua página ou mesmo de todo o site. Isso permite que o invasor altere qualquer coisa na página, incluindo a exibição de conteúdo totalmente diferente, roubo de senhas de usuário ou outras credenciais de login, roubo de cookies da sessão dos usuários ou redirecionamento do usuário para um site totalmente diferente.
+
+Devido à gravidade dessa ameaça, a maioria dos navegadores já bloqueia esse tipo de conteúdo por padrão para proteger os usuários, mas a funcionalidade varia entre os fornecedores e versões dos navegadores.
+
+Esta outra [demonstração](https://active-mixed-content.glitch.me/) contém exemplos de conteúdo misto ativo. [Carregue o exemplo por HTTP](http://active-mixed-content.glitch.me/) para ver o conteúdo que é bloqueado quando você [carrega o exemplo por HTTPS](https://active-mixed-content.glitch.me/). O conteúdo bloqueado também será detalhado na guia **Problemas.**
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="A guia Problemas no Chrome DevTools mostra informações detalhadas sobre o problema de conteúdo misto específico e como corrigi-lo", width="800", height="361" %}</figure>
+
+{% Aside %} Os navegadores também destacam o conteúdo bloqueado no DevTools. Problemas de conteúdo bloqueado são detalhados na guia **Problemas** em navegadores baseados no Chromium. O Firefox e o Safari registram mensagens no console. {% endAside %}
+
+## Especificação de conteúdo misto
+
+Os navegadores seguem a [especificação de conteúdo misto](https://w3c.github.io/webappsec-mixed-content/), que define o [**conteúdo opcionalmente bloqueável**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content) e as categorias de [**conteúdo bloqueável.**](https://w3c.github.io/webappsec-mixed-content/#category-blockable)
+
+De acordo com as especificações, um recurso se qualifica como conteúdo opcionalmente bloqueável "quando o risco de permitir seu uso como conteúdo misto é superado pelo risco de inutilizar partes significativas da web"; este é um subconjunto da categoria de conteúdo misto passivo descrita acima.
+
+Todo conteúdo que não seja **opcionalmente bloqueável** é considerado **bloqueável** e deve ser bloqueado pelo navegador.
+
+{% Aside %} Há um [nível 2 da especificação de conteúdo misto](https://w3c.github.io/webappsec-mixed-content/level2.html) em andamento, que adicionará atualização automática à especificação. {% endAside %}
+
+Nos últimos anos, o [uso de HTTPS aumentou dramaticamente](https://transparencyreport.google.com/https/overview) e se tornou o padrão da web. Agora, isso torna mais viável para os navegadores considerarem o bloqueio de todo o conteúdo misto, mesmo aqueles tipos de subrecursos definidos na [especificação de conteúdo misto](https://w3c.github.io/webappsec/specs/mixedcontent/) como **opcionalmente bloqueáveis**. É por isso que agora vemos o Chrome adotando uma abordagem mais rígida quanto a esses subrecursos.
+
+### Navegadores mais antigos
+
+É importante lembrar que nem todos os visitantes do seu site usam os navegadores mais atualizados. Versões diferentes de fornecedores de navegadores diferentes tratam o conteúdo misto de maneira diferente. Na pior das hipóteses, navegadores e versões mais antigos não bloqueiam nenhum conteúdo misto, o que é muito perigoso para o usuário.
+
+Ao corrigir os problemas de conteúdo misto, você garante que o conteúdo fique visível em novos navegadores. Você também ajuda a proteger os usuários contra conteúdo perigoso que não é bloqueado por navegadores mais antigos.
diff --git a/src/site/content/pt/secure/why-https-matters/index.md b/src/site/content/pt/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..b7638bae790
--- /dev/null
+++ b/src/site/content/pt/secure/why-https-matters/index.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: Por que HTTPS é importante
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: |-
+  HTTPS protege a integridade do seu site, protege a privacidade e segurança de
+  seus usuários e é um pré-requisito de novas e poderosas APIs da plataforma web.
+tags:
+  - security
+---
+
+Você deve sempre proteger todos os seus sites com HTTPS, mesmo que eles não lidem com comunicações confidenciais. Além de fornecer segurança crítica e integridade de dados para seus sites e informações pessoais de seus usuários, HTTPS é um requisito obrigatório para muitos novos recursos do navegador, especialmente aqueles necessários para [progressive web apps](/progressive-web-apps).
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## Resumo {: #summary }
+
+- Tanto invasores malignos como benignos exploram todos os recursos desprotegidos entre seus sites e usuários.
+- Muitos invasores analisam comportamentos agregados para identificar seus usuários.
+- HTTPS não apenas protege contra o uso indevido do seu site. Também é um requisito obrigatório para muitos recursos modernos e uma tecnologia que permite recursos semelhantes a aplicações, como os service workers.
+
+## HTTPS protege a integridade do seu site {: #integrity }
+
+HTTPS ajuda a evitar que invasores interfiram nas comunicações entre seus sites e os navegadores de seus usuários. Os invasores incluem tanto aqueles realmente mal-intencionados como também empresas legítimas, mas intrusivas, como ISPs ou hotéis que injetam anúncios nas páginas.
+
+Os invasores exploram comunicações desprotegidas para induzir seus usuários a fornecer informações confidenciais ou instalar malware, ou para inserir seus próprios anúncios usando seus recursos. Por exemplo, alguns terceiros injetam anúncios em sites que podem prejudicar as experiências do usuário e criar vulnerabilidades de segurança.
+
+Os invasores exploram todos os recursos desprotegidos que trafegam entre seus sites e seus usuários. Imagens, cookies, scripts, HTML… Tudo pode ser explorado. As invasões podem ocorrer em qualquer ponto da rede, inclusive na máquina do usuário, um ponto de acesso Wi-Fi ou um ISP comprometido, apenas para citar alguns.
+
+## HTTPS protege a privacidade e segurança de seus usuários {: #privacy }
+
+O HTTPS impede que invasores possam ouvir passivamente as comunicações entre seus sites e seus usuários.
+
+Um equívoco comum sobre HTTPS é que os únicos sites que precisam de HTTPS são aqueles que lidam com comunicações confidenciais. Cada solicitação HTTP desprotegida pode revelar informações sobre os comportamentos e identidades de seus usuários. Embora uma única visita a um de seus sites desprotegidos possa parecer benigna, alguns invasores olham para as atividades de navegação agregadas de seus usuários para fazer inferências sobre seus comportamentos e intenções e para [desanonimizar](https://en.wikipedia.org/wiki/De-anonymization) suas identidades. Por exemplo, funcionários podem divulgar sem querer condições de saúde sensíveis a seus empregadores simplesmente lendo artigos médicos desprotegidos.
+
+## HTTPS é o futuro da web {: #capabilities }
+
+Novos recursos de plataforma da web poderosos, como tirar fotos ou gravar áudio com `getUserMedia()`, ativar experiências de aplicações off-line com [service workers](/service-workers-cache-storage/) ou criar [progressive web apps](/progressive-web-apps), requerem permissão explícita do usuário antes de executar. Muitas APIs mais antigas também estão sendo atualizadas para exigir permissão de execução, como a [API de geolocalização](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation). HTTPS é um componente-chave para os workflows de permissão para esses novos recursos e APIs atualizadas.
diff --git a/src/site/content/pt/vitals/index.md b/src/site/content/pt/vitals/index.md
new file mode 100644
index 00000000000..2bcbe5bf789
--- /dev/null
+++ b/src/site/content/pt/vitals/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: Web Vitals
+description: Métricas essenciais para um site saudável
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+A otimização da qualidade da experiência do usuário é a chave para o sucesso no longo prazo de qualquer site na web. Seja você proprietário de uma empresa, comerciante ou desenvolvedor, as Web Vitals podem ajudá-lo a quantificar a experiência do seu site e identificar oportunidades de melhoria.
+
+## Visão geral
+
+As Web Vitals são uma iniciativa do Google para fornecer orientação unificada em relação a sinais de qualidade essenciais que visam proporcionar uma ótima experiência ao usuário na web.
+
+O Google tem fornecido diversas ferramentas ao longo dos anos para medir e relatar desempenho. Alguns desenvolvedores são especialistas no uso dessas ferramentas, enquanto outros tem considerado um desafio acompanhar a abundância de ferramentas e métricas.
+
+Os proprietários de sites não deveriam ter que ser gurus em desempenho para compreender a qualidade da experiência que estão proporcionando aos usuários. A iniciativa Web Vitals tem como objetivo simplificar esse cenário e ajudar os sites a focarem nas métricas que mais importam, as **Core Web Vitals** .
+
+## Core Web Vitals
+
+As Core Web Vitals são o subconjunto de Web Vitals que se aplica a todas as páginas da web, que devem ser medidos por todos os proprietários de sites e são revisadas por todas as ferramentas do Google. Cada uma das Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável [em campo](/user-centric-performance-metrics/#how-metrics-are-measured) e reflete a experiência de mundo real de um resultado crítico [centrado no usuário](/user-centric-performance-metrics/#how-metrics-are-measured) .
+
+As métricas que constituem as Core Web Vitals irão [evoluir](#evolving-web-vitals) com o tempo. O conjunto atual para 2020 se concentra em três aspectos da experiência do usuário: *carregamento* , *interatividade* e *estabilidade visual* e inclui as seguintes métricas (e seus respectivos limites):
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Recomendações de limites para Largest Contentful Paint", width="400", height="350" %}   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Recomendações de limites para First Input Delay", width="400", height="350" %}   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Recomendações de limites para Cumulative Layout Shift", width="400", height="350" %}</div>
+
+- **[Largest Contentful Paint (LCP)](/lcp/)**, ou Maior renderização de conteúdo, mede o desempenho do *carregamento.* Para fornecer uma boa experiência ao usuário, o LCP deve ocorrer dentro de **2,5 segundos** após o início do carregamento da página.
+- **[First Input Delay (FID)](/fid/)**, ou Atraso da primeira entrada, mede a *interatividade* . Para fornecer uma boa experiência do usuário, as páginas devem ter um FID de **100 milissegundos** ou menos.
+- **[Cumulative Layout Shift (CLS)](/cls/)**, ou Mudança cumulativa de layout: mede *a estabilidade visual* . Para fornecer uma boa experiência do usuário, as páginas devem manter um CLS de **0.1.** ou menos.
+
+Para cada uma das métricas acima, para garantir que você está atingindo a meta recomendada para a maioria dos seus usuários, um bom limite a ser medido é o **75º percentil** de carregamentos de página, segmentado por dispositivos móveis e computadores desktop.
+
+As ferramentas que avaliam a conformidade das Core Web Vitals devem considerar que uma página passa no teste se atender às metas recomendadas no 75º percentil para todas as três métricas acima.
+
+{% Aside %} Para saber mais sobre a pesquisa e a metodologia por trás dessas recomendações, consulte: [Definindo os limites das Core Web Vitals](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### Ferramentas para medir e relatar Core Web Vitals
+
+O Google acredita que as Core Web Vitals são essenciais para todas as experiências na web. Como resultado, está empenhado em disponibilizar essas métricas [em todas as suas ferramentas populares](/vitals-tools/). As seções a seguir detalham quais ferramentas suportam as Core Web Vitals.
+
+#### Ferramentas de campo para medir os Core Web Vitals
+
+O [Relatório de experiência do usuário Chrome](https://developer.chrome.com/docs/crux/) coleta dados anônimos de medição de usuários reais para cada Core Web Vital. Esses dados permitem que os proprietários de sites avaliem rapidamente seu desempenho sem a necessidade de instrumentar manualmente as análises nas suas páginas, além de servir a ferramentas como o [PageSpeed Insights](https://pagespeed.web.dev/) e o [relatório Core Web Vitals do](https://support.google.com/webmasters/answer/9205520) Console de Busca.
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Relatório de experiência do usuário Chrome</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">Console de Busca (relatório Core Web Vitals)</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} Para obter orientação sobre como usar essas ferramentas e qual ferramenta é a ideal para seu caso de uso, consulte: [Primeiros passos com medição de Web Vitals](/vitals-measurement-getting-started/) {% endAside %}
+
+Os dados fornecidos pelo Relatório de experiência do usuário Chrome oferecem uma maneira rápida de avaliar o desempenho dos sites, mas não fornece a telemetria por pageview detalhada, que muitas vezes é necessária para diagnosticar, monitorar e reagir rapidamente a regressões com precisão. Como resultado, é altamente recomendável que os sites configurem seu próprio monitoramento de usuários reais.
+
+#### Medição das Core Web Vitals em JavaScript
+
+Cada uma das Core Web Vitals pode ser medida em JavaScript usando APIs padrão da web.
+
+A maneira mais fácil de medir todas as Core Web Vitals é usar a biblioteca JavaScript [web-vitals](https://github.com/GoogleChrome/web-vitals): um pequeno adaptador, pronto para uso, que encapsula as APIs web subjacentes e que mede cada métrica de maneira a corresponder com precisão à forma como são relatadas por todas as Ferramentas Google listadas acima.
+
+Com a biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals), medir cada métrica é tão simples quanto chamar uma função (consulte a documentação para detalhes completos sobre o [uso](https://github.com/GoogleChrome/web-vitals#usage) e sobre a [API](https://github.com/GoogleChrome/web-vitals#api)):
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+Depois que você configurar seu site para usar a biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals) para medir e enviar seus dados de Core Web Vitals para um endpoint de análises, a próxima etapa é agregar e relatar sobre esses dados para saber se suas páginas estão alcançando os limites recomendados para pelo menos 75% das visitas à página.
+
+Embora alguns provedores de análise tenham suporte integrado para as métricas Core Web Vitals, mesmo aqueles que não têm esse suporte devem incluir recursos básicos de métricas customizadas que permitem medir o Core Web Vitals nas suas ferramentas.
+
+Um exemplo é o [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report), que permite aos proprietários de sites medir seus Core Web Vitals usando o Google Analytics. Para obter orientação sobre como medir os Core Web Vitals usando outras ferramentas analíticas, consulte [Melhores práticas para medir Web Vitals em campo](/vitals-field-measurement-best-practices/) .
+
+Você também pode relatar sobre cada uma das Core Web Vitals sem escrever nenhum código através do uso da [Web Vitals Chrome Extension](https://github.com/GoogleChrome/web-vitals-extension). Esta extensão usa a biblioteca [web-vitals](https://github.com/GoogleChrome/web-vitals) para medir cada uma dessas métricas e mostrá-las aos usuários enquanto navegam na web.
+
+Essa extensão pode ser útil para entender o desempenho de seus próprios sites, dos sites de seus concorrentes e da web em geral.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Extensão Web Vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Como alternativa, os desenvolvedores que preferem medir essas métricas diretamente por meio das APIs da web subjacentes podem consultar os guias de métricas a seguir, para obter detalhes de implementação:
+
+- [Medição da LCP em JavaScript](/lcp/#measure-lcp-in-javascript)
+- [Medição da FID em JavaScript](/fid/#measure-fid-in-javascript)
+- [Medição da CLS em JavaScript](/cls/#measure-cls-in-javascript)
+
+{% Aside %} Para orientações adicionais sobre como medir essas métricas usando serviços populares de análise (ou suas próprias ferramentas internas de análise), consulte: [Práticas recomendadas para medir Web Vitals em campo](/vitals-field-measurement-best-practices/) {% endAside %}
+
+#### Ferramentas de laboratório para medir as Core Web Vitals
+
+Embora todas as Core Web Vitals sejam, antes de mais nada, métricas de campo, muitas delas também podem ser medidas em laboratório.
+
+A medição em laboratório é a melhor maneira de testar o desempenho dos recursos durante o desenvolvimento, antes de serem lançados aos usuários. É também a melhor maneira de detectar regressões de desempenho antes que elas aconteçam.
+
+As seguintes ferramentas podem ser usadas para medir as Core Web Vitals num ambiente de laboratório:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">Chrome DevTools</a></td>
+        <td>✔</td>
+        <td>✘ (use <a href="/tbt/">TBT</a>)</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>
+        <td>✔</td>
+        <td>✘ (use <a href="/tbt/">TBT</a>)</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Ferramentas como o Lighthouse que carregam páginas num ambiente simulado sem um usuário não podem medir a FID (não há entrada do usuário). No entanto, a métrica Total Blocking Time (TBT), ou Tempo total de bloqueio, é mensurável em laboratório e é um excelente proxy para a FID. As otimizações de desempenho que melhoram a TBT no laboratório devem melhorar a FID em campo (veja as recomendações de desempenho abaixo). {% endAside %}
+
+Embora as medições em laboratório sejam uma parte essencial da entrega de ótimas experiências, elas não substituem as medições em campo.
+
+O desempenho de um site pode variar drasticamente com base nos recursos do dispositivo do usuário, suas condições de rede, quais outros processos podem estar em execução no dispositivo e como esses processos estão interagindo com a página. Na verdade, cada uma das métricas das Core Web Vitals pode ter sua pontuação afetada pela interação do usuário. Somente a medição em campo é capaz de capturar com precisão o cenário completo.
+
+### Recomendações para melhorar suas pontuações
+
+Depois de medir as Core Web Vitals e identificar as áreas que podem ser melhoradas, a próxima etapa é otimizar. Os guias a seguir oferecem recomendações específicas sobre como otimizar suas páginas para cada uma das Core Web Vitals:
+
+- [Otimizar a LCP](/optimize-lcp/)
+- [Otimizar a FID](/optimize-fid/)
+- [Otimizar a CLS](/optimize-cls/)
+
+## Outras Web Vitals
+
+Embora as Core Web Vitals sejam as métricas críticas para compreender e proporcionar uma ótima experiência ao usuário, também existem outras métricas vitais.
+
+Essas outras Web Vitals geralmente servem como proxy ou métricas suplementares para as Core Web Vitals, para ajudar a capturar uma parte maior da experiência ou para ajudar no diagnóstico de um problema específico.
+
+Por exemplo, as métricas [Time to First Byte (TTFB)](/ttfb/), ou Tempo até primeiro byte e [First Contentful Paint (FCP)](/fcp/) são ambas aspectos vitais da experiência de *carregamento* e são úteis no diagnóstico de problemas com LCP ([tempos de resposta](/overloaded-server/) lentos do servidor ou [recursos bloqueadores da renderização](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/), respectivamente) .
+
+Da mesma forma, métricas como [Total Blocking Time (TBT)](/tbt/) e [Time to Interactive (TTI)](/tti/), ou Tempo até a interatividade são medidas de laboratório que são vitais para detectar e diagnosticar possíveis *problemas de interatividade* que afetarão a FID. No entanto, elas não fazem parte do conjunto Core Web Vitals porque não são mensuráveis em campo, nem refletem um resultado [centrado no usuário.](/user-centric-performance-metrics/#how-metrics-are-measured)
+
+## Evolução das Web Vitals
+
+As Web Vitals e as Core Web Vitals representam os melhores sinais que os desenvolvedores têm disponíveis hoje para medir a qualidade de uma experiência na web, mas esses sinais não são perfeitos e melhorias ou acréscimos futuros devem ser esperados.
+
+As **Core Web Vitals** são relevantes para todas as páginas da web e presentes em ferramentas Google relevantes. Mudanças nessas métricas terão um impacto de largo alcance; como tal, os desenvolvedores devem esperar que as definições e limites das Core Web Vitals sejam estáveis e que as atualizações tenham um aviso prévio e uma cadência anual previsível.
+
+As outras Web Vitals são frequentemente específicas a um determinado contexto ou ferramenta e podem ser mais experimentais do que as Core Web Vitals. Como tal, suas definições e limites podem mudar com mais frequência.
+
+Para todas as Web Vitals, as alterações serão claramente documentadas neste [CHANGELOG](http://bit.ly/chrome-speed-metrics-changelog) público.
diff --git a/src/site/content/robots.njk b/src/site/content/robots.njk
new file mode 100644
index 00000000000..835c9a08abc
--- /dev/null
+++ b/src/site/content/robots.njk
@@ -0,0 +1,7 @@
+---
+noindex: true
+permalink: "/robots.txt"
+---
+user-agent: *
+disallow: /sandbox/
+sitemap: https://web.dev/sitemap.xml
diff --git a/src/site/content/robots.txt b/src/site/content/robots.txt
deleted file mode 100644
index c74428724e8..00000000000
--- a/src/site/content/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-user-agent: *
-disallow: /sandbox/
-sitemap: https://web.dev/sitemap.xml
\ No newline at end of file
diff --git a/src/site/content/ru/404.md b/src/site/content/ru/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/ru/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/ru/accessible/color-and-contrast-accessibility/index.md b/src/site/content/ru/accessible/color-and-contrast-accessibility/index.md
new file mode 100644
index 00000000000..2b1bec5349f
--- /dev/null
+++ b/src/site/content/ru/accessible/color-and-contrast-accessibility/index.md
@@ -0,0 +1,176 @@
+---
+layout: post
+title: Доступность по цвету и контрастности
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: |
+  Если у вас хорошее зрение, вы вряд ли задумываетесь, что другие могут воспринимать цвета иначе или видеть текст хуже, чем вы, — а ведь это именно так.
+tags:
+  - accessibility
+---
+
+Если у вас хорошее зрение, вы вряд ли задумываетесь, что другие могут
+воспринимать цвета иначе или видеть текст хуже, чем вы, — а ведь это именно так.
+
+Некоторые сочетания цветов
+легко воспринимаются одними людьми, но другие их различают с трудом или не различают вообще.
+Обычно проблема сводится к цветовому контрасту —
+соотношению яркости цветов переднего и заднего плана.
+Если цвета похожи, контрастность низкая;
+если они различаются, контрастность высокая.
+
+В [руководстве WebAIM](https://webaim.org/standards/wcag/) для текста рекомендуется минимальная контрастность уровня AA — 4,5:1.
+Исключение — очень крупный текст (на 120–150 % больше основного текста по умолчанию):
+здесь контрастность может составлять 3:1. Обратите внимание на разницу в контрасте ниже.
+
+<figure>
+  {% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="Изображение, показывающее различную контрастность", width="800", height="328" %}
+</figure>
+
+Контрастность 4,5:1 выбрана для уровня AA, чтобы
+компенсировать потерю контрастной чувствительности,
+которая обычно наблюдается при ухудшении зрения до уровня примерно 0,5,
+который считается типичной остротой зрения для людей в возрасте около 80 лет.
+Для пользователей с ослабленным зрением и недостатком цветового
+зрения контрастность основного текста можно увеличить до 7:1.
+
+Для проверки цветового контраста можно использовать аудит «Специальные возможности» (Accessibility Audit) в Lighthouse.
+Откройте DevTools, щелкните «Аудиты» (Audits или Lighthouse), выберите «Специальные возможности» (Accessibility)
+и создайте отчет.
+
+<figure>
+  {% Img src="image/admin/vSFzNOurQO6z2xV6qWuW.png", alt="Скриншот вывода от аудита по цветовому контрасту.", width="800", height="218" %}
+</figure>
+
+В браузере Chrome также есть экспериментальная функция, которая поможет [обнаружить низкоконтрастный
+текст на странице](https://developers.google.com/web/updates/2020/10/devtools#css-overview). А исправить низкий контраст можно с помощью [подсказки по доступности цветов](https://developers.google.com/web/updates/2020/08/devtools#accessible-color).
+
+<figure>
+  {% Img src="image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt="Скриншот вывода экспериментальной функции Chrome по поиску низкоконтрастного текста.", width="800", height="521" %}
+</figure>
+
+Более подробный отчет можно получить, установив [расширение Accessibility Insights](https://accessibilityinsights.io/).
+Одна из проверок в отчете Fastpass — цветовой контраст.
+Вы получите подробные сведения обо всех элементах, не соответствующих требованиям.
+
+<figure>
+  {% Img src="image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt="Отчет в Accessibility Insights", width="800", height="473" %}
+</figure>
+
+## Расширенный алгоритм восприятия контраста (APCA)
+
+[Расширенный алгоритм восприятия контраста (Advanced Perceptual Contrast Algorithm, APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) — это новый способ вычисления контраста, основанный на современных исследованиях цветового восприятия.
+
+В сравнении с указаниями по уровням [AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)и [AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) этот алгоритм больше зависит от контекста.
+
+Контраст рассчитывается на основе следующих характеристик:
+
+- Пространственные свойства (вес шрифта и размер текста).
+- Цвет текста (воспринимаемая разница в яркости между текстом и фоном).
+- Контекст (окружающий свет, среда и предназначение текста).
+
+В браузере Chrome есть [экспериментальная функция, которая заменяет рекомендации AA/AAA на APCA](https://developers.google.com/web/updates/2021/01/devtools#apca).
+
+<figure>
+  {% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="Скриншот с выводом функции APCA в Chrome.", width="800", height="543" %}
+</figure>
+
+## При передаче информации не полагайтесь только на цвет
+
+В мире около 320 миллионов человек страдают недостатком цветового зрения.
+Примерно 1 из 12 мужчин и 1 из 200 женщин страдают той или иной формой «цветовой слепоты» —
+то есть, около 1/20, или 5 %, ваших пользователей будут видеть ваш сайт не так, как вы задумали.
+Полагаясь на цвет для передачи информации, мы доводим это число до неприемлемого уровня.
+
+{% Aside %}
+Примечание. Термин «цветовая слепота» часто используется для описания недостатка зрения, при котором различение цветов затруднено,
+однако полная цветовая слепота встречается очень редко.
+Большинство людей с недостатком цветового зрения видят цветовой спектр частично или почти полностью,
+но им трудно различать определенные цвета — например, красный и зеленый (наиболее частый случай),
+коричневый и оранжевый, синий и фиолетовый.
+{% endAside %}
+
+Например, недействительный номер телефона в форме ввода
+может подчеркиваться красным.
+Но при недостатке цветового зрения или использовании программы чтения с экрана эта информация будет передана плохо или вообще потеряется.
+Поэтому всегда нужно стараться предоставить несколько способов получения важной информации.
+
+<figure style="width: 200px">
+  {% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="Изображение формы ввода с неверным номером телефона, который выделен только красным цветом.", width="293", height="323" %}
+</figure>
+
+В [разделе 1.4.1 контрольного списка WebAIM](https://webaim.org/standards/wcag/checklist#sc1.4.1) сказано
+не использовать цвет как единственный способ передачи контента или различения визуальных элементов,
+Также там говорится не выделять ссылки на тексте исключительно цветом, если он
+не отвечает определенным требованиям к контрастности.
+При этом для указания на активную ссылку рекомендуется использовать дополнительный индикатор,
+например подчеркивание (с помощью CSS-свойства `text-decoration`).
+
+В предыдущем примере можно просто добавить в поле сообщение, говорящее о том, что
+значение недействительно (и в чем проблема).
+
+<figure style="width: 200px">
+  {% Img src="image/admin/FLQPcG16akNRoElx3pnz.png", alt="Форма ввода из предыдущего примера — на этот раз с текстовой меткой, указывающей на проблему с полем.", width="292", height="343" %}
+</figure>
+
+При создании приложения нужно помнить обо всем этом и следить за тем,
+чтобы не полагаться слишком сильно на цвет для передачи важной информации.
+
+Если вам интересно, как сайт выглядит для людей с нарушениями зрения,
+или если вы сильно полагаетесь на цвет в интерфейсе,
+то можете с помощью DevTools имитировать зрительные нарушения,
+включая цветовую слепоту различных видов.
+В браузере Chrome есть [функция «Эмулировать дефекты зрения»](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies) (Emulate Vision Deficiencies):
+откройте DevTools и перейдите на вкладку **Отрисовка** (Rendering) в нижней панели.
+Здесь можно имитировать следующие недостатки цветового зрения:
+
+- Протанопия — неспособность воспринимать красный цвет.
+- Дейтеранопия — неспособность воспринимать зеленый цвет.
+- Тританопия— неспособность воспринимать синий цвет.
+- Ахроматопсия: неспособность воспринимать цвета вообще, за исключение оттенков серого (встречается крайне редко).
+
+<figure>
+  {% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="Имитация зрения человека с ахроматопсией: наша страница отображается в оттенках серого.", width="800", height="393" %}
+</figure>
+
+## Режим высокой контрастности
+
+Режим высокой контрастности позволяет инвертировать цвета переднего и заднего плана,
+что часто помогает лучше выделить текст.
+Для людей с нарушениями зрения такой режим
+может значительно упростить навигацию по контенту на странице.
+У себя на компьютере настроить высокую контрастность можно несколькими способами.
+
+В операционных системах (например, Mac OSX и Windows) есть режимы высокой контрастности,
+которые включаются на уровне системы для всего интерфейса.
+
+Полезно иногда включать высокую контрастность и проверять,
+как отображается интерфейс приложения и насколько он остается удобным.
+
+Например, в панели навигации для указания на активную страницу может
+использоваться неконтрастный фоновый оттенок.
+Если включить режим высокой контрастности, этот цвет становится незаметным
+и становится непонятно, какая страница активна.
+
+<figure style="width: 500px">
+  {% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="Скриншот панели навигации в режиме высокой контрастности: непонятно, какая вкладка активна", width="640", height="57" %}
+</figure>
+
+А в примере выше красное подчеркивание в поле недействительного
+номера телефона может отображаться трудно различимым
+сине-зеленым цветом.
+
+<figure>
+  {% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="Скриншот использованной ранее адресной формы в режиме высокой контрастности. Изменение цвета недействительного элемента трудно читается.", width="700", height="328" %}
+</figure>
+
+Если обеспечить соответствие упомянутым выше требованиям
+к контрасту, то в режиме высокой контрастности всё будет хорошо.
+Но спокойствия ради можно установить
+[расширение High Contrast для Chrome](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph)
+и проверить страницу на предмет того, правильно ли всё работает и выглядит.
\ No newline at end of file
diff --git a/src/site/content/ru/accessible/control-focus-with-tabindex/index.md b/src/site/content/ru/accessible/control-focus-with-tabindex/index.md
new file mode 100644
index 00000000000..de1fa31c2db
--- /dev/null
+++ b/src/site/content/ru/accessible/control-focus-with-tabindex/index.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: Управление фокусом при помощи tabindex
+authors:
+  - robdodson
+date: 2018-11-18
+description: Стандартные HTML-элементы, такие как <button> или <input>, доступны с клавиатуры по умолчанию. Если вы создаете собственные интерактивные компоненты, используйте tabindex, чтобы они также были доступны с клавиатуры.
+---
+
+Стандартные HTML-элементы, такие как `<button>` или `<input>`, доступны с клавиатуры по умолчанию. Если вы создаете *собственные* интерактивные компоненты, используйте атрибут `tabindex`, чтобы они также были доступны с клавиатуры.
+
+{% Aside %} Когда есть возможность, используйте встроенные HTML-элементы, вместо того того чтобы создавать свою нестандартную версию. Например, элемент `<button>` с легкостью поддается стилизации и уже имеет полную поддержку клавиатуры. Это избавит вас от необходимости управлять атрибутом `tabindex` или добавлять семантическую информацию при помощи ARIA. {% endAside %}
+
+## Проверьте, доступны ли элементы управления с клавиатуры
+
+Некоторые проблемы с доступностью легко выявляются при помощи таких инструментов, как Lighthouse, однако существуют моменты, которые может проверить только человек.
+
+Попробуйте использовать клавишу `Tab` для навигации по вашему сайту. Все ли интерактивные элементы управления удается выбрать? Если ответ отрицательный, возможно, необходимо сделать их фокусируемыми при помощи атрибута [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex).
+
+{% Aside 'warning' %} Если вы вообще не видите индикатор фокуса, возможно, он скрыт при помощи CSS-кода. Проверьте все стили, в которых встречается `:focus { outline: none; }`. О том, как исправить эту проблему, вы можете узнать в нашем руководстве по [стилизации фокуса](/style-focus). {% endAside %}
+
+## Включение элемента в последовательность перехода
+
+Чтобы включить элемент в естественную последовательность перехода по Tab, используйте `tabindex="0"`. Например:
+
+```html
+<div tabindex="0">Focus me with the TAB key</div>
+```
+
+Установить фокус на элементе можно при помощи клавиши `Tab` или метода `focus()`.
+
+{% Glitch { id: 'tabindex-zero', path: 'index.html', height: 346 } %}
+
+## Исключение элемента из последовательности перехода
+
+Исключить элемент можно при помощи `tabindex="-1"`. Например:
+
+```html
+<button tabindex="-1">Can't reach me with the TAB key!</button>
+```
+
+Это позволяет исключить элемент из естественной последовательности перехода по Tab, однако на элементе по-прежнему можно будет установить фокус при помощи метода `focus()`.
+
+{% Glitch { id: 'tabindex-negative-one', path: 'index.html', height: 346 } %}
+
+Обратите внимание, что атрибут `tabindex="-1"` не распространяется на потомки элемента: они продолжат быть частью последовательности перехода вне зависимости от того, находились ли они там изначально или были включены при помощи `tabindex`. Чтобы исключить элемент из последовательности перехода вместе со всеми его потомками, можно воспользоваться [polyfill-библиотекой `inert` из репозитория WICG](https://github.com/WICG/inert). Она имитирует поведение предлагаемого атрибута `inert`, который запрещает выбор элементов или их чтение при помощи вспомогательных технологий.
+
+{% Aside 'caution' %} Polyfill-библиотека `inert` является экспериментальной, и в некоторых случаях ее поведение может отличаться от ожидаемого. Тщательно протестируйте ее, прежде чем использовать ее на реальных сайтах. {% endAside %}
+
+## Избегайте `tabindex > 0`
+
+Значения `tabindex` больше 0 позволяют переместить элемент в начало естественного порядка перехода. Если на странице несколько элементов с `tabindex` больше 0, то самый высокий приоритет имеют элементы с наименьшим значением.
+
+Использование `tabindex` со значениями больше 0 считается **анти-паттерном**, поскольку программы чтения с экрана при перемещении по странице руководствуются порядком DOM, а не порядком перехода по Tab. Для того чтобы изменить порядок следования элементов при переходе по Tab, следует изменить их порядок в DOM.
+
+Lighthouse позволяет с легкостью обнаруживать элементы с `tabindex` > 0. Запустите проверку доступности (Lighthouse > Options > Accessibility) и изучите результаты проверки «No element has a [tabindex] value greater than 0».
+
+## Создавайте доступные компоненты, используя прием «блуждающий `tabindex`»
+
+Если вы разрабатываете сложный компонент, вам может потребоваться дополнительная поддержка клавиатуры помимо фокусировки. Например, рассмотрим встроенный элемент `select`. Он поддерживает фокусировку, однако при помощи клавиш со стрелками можно получить доступ к дополнительным функциям (выбору вариантов).
+
+Чтобы реализовать аналогичную функциональность в нестандартных компонентах, используйте метод под названием «блуждающий `tabindex`». Суть метода заключается в том, что для всех дочерних элементов, кроме активного в данный момент, устанавливается `tabindex` -1. Затем компонент использует слежение за событиями клавиатуры для определения нажатия клавиш.
+
+Когда пользователь нажимает клавишу, компонент присваивает ранее сфокусированному дочернему элементу `tabindex` -1, а элементу, который должен получить фокус, — `tabindex` 0, после чего вызывает для него метод `focus()`.
+
+**Было**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="0">Redo</div>
+  <button tabindex="-1">Cut</div>
+</div>
+```
+
+**Стало**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="-1">Redo</div>
+  <button tabindex="0">Cut</div>
+</div>
+```
+
+{% Glitch { id: 'roving-tabindex', path: 'index.html', height: 346 } %}
+
+{% Aside %} Интересуетесь, зачем нужны атрибуты `role=""`? Они изменяют семантику элемента, для того чтобы он корректно озвучивался программами чтения с экрана. Узнать о них подробнее можно в нашем [базовом руководстве по программам чтения с экрана](/semantics-and-screen-readers). {% endAside %}
+
+{% Assessment 'self-assessment' %}
+
+## Советы по реализации поддержки клавиатуры
+
+Если вы не уверены насчет того, какой уровень поддержки клавиатуры может потребоваться  для ваших нестандартных  компонентов, обратитесь к руководству [ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/). В нем приводятся распространенные паттерны пользовательских интерфейсов и рассказывается о том, какие клавиши должны поддерживаться в ваших компонентах.
diff --git a/src/site/content/ru/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/ru/accessible/control-focus-with-tabindex/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/ru/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/ru/accessible/index.md b/src/site/content/ru/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/ru/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/ru/angular/index.md b/src/site/content/ru/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/ru/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/ru/animations/index.md b/src/site/content/ru/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/ru/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/ru/blog/aspect-ratio/index.md b/src/site/content/ru/blog/aspect-ratio/index.md
new file mode 100644
index 00000000000..5ecd6d2e366
--- /dev/null
+++ b/src/site/content/ru/blog/aspect-ratio/index.md
@@ -0,0 +1,193 @@
+---
+layout: post
+title: Новое свойство CSS aspect-ratio, поддерживаемое в Chromium, Safari Technology Preview и Firefox Nightly.
+subhead: Новое свойство CSS, которое помогает поддерживать постоянные интервалы в адаптивных макетах.
+authors:
+  - una
+date: 2021-01-28
+hero: image/admin/I14dS86oJT2f0uHaDLEM.jpg
+alt: Изображение разноцветных телефонов, измененное с сохранением соотношения сторон.
+description: |-
+  Поддерживать соотношение сторон изображений и элементов теперь
+  легче с помощью нового свойства CSS aspect-ratio.
+tags:
+  - blog
+  - css
+---
+
+{% Aside %}
+
+Резюме: Поддержание постоянного соотношения ширины и высоты, называемого *соотношением сторон* , имеет решающее значение для адаптивного веб-дизайна и предотвращения [совокупного смещения макета](/cls/). Теперь есть простой способ реализовать это с помощью нового свойства `aspect-ratio`, введенного в [Chromium 88](https://www.chromestatus.com/feature/5738050678161408), [Firefox 87](https://developer.mozilla.org/docs/Mozilla/Firefox/Experimental_features#property_aspect-ratio) и [Safari Technology Preview 118](https://developer.apple.com/safari/technology-preview/release-notes/).
+
+{% endAside %}
+
+## Соотношение сторон
+
+Соотношение сторон чаще всего выражается двумя целыми числами и двоеточием в размерности ширина:высота или x:y. Наиболее распространенные соотношения сторон для фотографии — 4:3 и 3:2, в то время как видео и современные потребительские камеры, как правило, имеют соотношение сторон 16:9.
+
+<figure>{% Img src="image/admin/od54hUUe21UABpbWxSFG.jpg", alt="Два изображения с одинаковым соотношением сторон. Одно размером 634 x 951 пиксель, другое — 200 x 300 пикселей. Оба изображения имеют соотношение сторон 2:3.", width="800", height="526" %} <figcaption> Два изображения с одинаковым соотношением сторон. Одно размером 634 x 951 пиксель, другое — 200 x 300 пикселей. Оба изображения имеют соотношение сторон 2:3.</figcaption></figure>
+
+С развитием адаптивного дизайна поддержание соотношения сторон становится все более важным для веб-разработчиков, тем более, что размеры изображений различаются, а размеры элементов меняются в зависимости от доступного пространства.
+
+Вот некоторые примеры того, когда важно поддерживать соотношение сторон:
+
+- Создание адаптивных окон iframe, где они составляют 100% родительской ширины, а высота должна оставаться в определенном соотношении к области просмотра
+- Создание встроенных контейнеров-заполнителей для изображений, [видео](http://fitvidsjs.com/) и встраиваемых материалов для предотвращения повторной компоновки, когда элементы загружаются и занимают место
+- Создание единообразного адаптивного пространства для интерактивной визуализации данных или SVG-анимации
+- Создание единообразного адаптивного пространства для многоэлементных компонентов, таких как карточки или календарные даты
+- Создание единообразного адаптивного пространства для нескольких изображений разного размера (можно использовать вместе с `object-fit`)
+
+## Object-fit
+
+Определение соотношения сторон помогает нам устанавливать размер мультимедиа в адаптивном контексте. Еще один инструмент в этом сегменте — свойство `object-fit`, которое позволяет пользователям описывать, как объект внутри блока (например, изображение) должен заполнять этот блок:
+
+<figure>{% Img src="image/admin/A7uj6u5MULodlw4lVsI2.jpg", alt="Демонстрационная визуализация object-fit", width="800", height="236" %} <figcaption>Примеры различных значений <code>object-fit</code>. См. <a href="https://codepen.io/una/pen/mdrLGjR">демонстрацию на Codepen</a>. </figcaption></figure>
+
+Значения `initial` и `fill` корректируют изображение, чтобы оно заполняло пространство. В нашем примере это приводит к тому, что изображение становится сжатым и размытым из-за повторной калибровки пикселей. Далеко от идеала. `object-fit: cover` использует наименьшее измерение изображения для заполнения пространства и обрезает изображение, чтобы уместить его в блоке на основе этого измерения. Изображение масштабируется по нижней границе. `object-fit: contain` гарантирует, что изображение всегда будет видимым целиком, и, следовательно, является противоположностью `cover`, принимая в качестве значения верхнюю границу размера (в нашем примере выше это ширина) и масштабируя изображение так, что его внутреннее соотношение сторон сохраняется, при этом изображение вписывается в пространство. В случае `object-fit: none` изображение обрезается по центру (положение объекта по умолчанию), сохраняя первичный размер.
+
+`object-fit: cover`, как правило, работает в большинстве ситуаций, обеспечивая аккуратный единообразный интерфейс при работе с изображениями разных размеров, однако при этом вы теряете информацию (изображение обрезается по длинным краям).
+
+Когда эти детали играют роль (например, при работе с плоской укладкой косметических товаров), обрезка важного контента недопустима. Таким образом, идеальным сценарием были бы адаптивные изображения разных размеров, которые соответствовали бы пространству пользовательского интерфейса без обрезки.
+
+## Старый прием: сохранение соотношения сторон с помощью `padding-top`
+
+<figure>{% Img src="image/admin/j3YJicINXjly349uEEUt.jpg", alt="Использование padding-top для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.", width="800", height="296 " %} <figcaption> Использование <code>padding-top</code> для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.</figcaption></figure>
+
+Для улучшения адаптивности мы можем использовать соотношение сторон. Это позволяет нам устанавливать определенный размер соотношения и брать за основу отдельную ось (высоту или ширину) для остальных медиафайлов.
+
+Широко распространенное на данный момент кроссбраузерное решение для поддержания соотношения сторон на основе ширины изображения известно как «Padding-Top Hack». Для этого решения требуется родительский контейнер и дочерний контейнер с абсолютным позиционированием. Затем вычисляется соотношение сторон в процентах, чтобы установить его в качестве значения `padding-top`. Например:
+
+- Соотношение сторон 1:1 = 1/1 = 1 = `padding-top: 100%`
+- Соотношение сторон 4:3 = 3/4 = 0,75 = `padding-top: 75%`
+- Соотношение сторон 3:2 = 2/3 = 0,66666 = `padding-top: 66.67%`
+- Соотношение сторон 16:9 = 9/16 = 0,5625 = `padding-top: 56.25%`
+
+Теперь, когда мы определили значение соотношения сторон, мы можем применить его к нашему родительскому контейнеру. Рассмотрим следующий пример:
+
+```html
+<div class="container">
+  <img class="media" src="..." alt="...">
+</div>
+```
+
+Затем мы можем написать следующий CSS:
+
+```css
+.container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* Соотношение сторон 16:9 */
+}
+
+.media {
+  position: absolute;
+  top: 0;
+}
+```
+
+## Сохранение соотношения сторон с помощью `aspect-ratio`
+
+<figure>{% Img src="image/admin/XT8PbPiYx1IJq3Pvmanz.jpg", alt="Использование aspect-ratio для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.", width="800", height="296 " %} <figcaption> Использование <code>aspect-ratio</code> для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.</figcaption></figure>
+
+К сожалению, вычисление значений `padding-top` не слишком интуитивно понятно и требует дополнительных затрат и позиционирования. Благодаря новому встроенному [свойству CSS](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) `aspect-ratio` язык для поддержания соотношения сторон стал намного более понятным.
+
+Используя ту же разметку, мы можем заменить `padding-top: 56.25%` на `aspect-ratio: 16 / 9`, установив `aspect-ratio` на указанное соотношение `width` / `height`.
+
+<div class="switcher">{% Compare 'worse', 'Использование padding-top' %} ```css .container { width: 100%; padding-top: 56,25%; } `` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Использование aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+Использование `aspect-ratio` вместо `padding-top` гораздо более понятно и не требует пересмотра свойства padding, чтобы реализовать что-то за пределами его обычной области применения.
+
+Это новое свойство также добавляет возможность устанавливать соотношение сторон в `auto`, где «заменяемые элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если оба параметра `auto` и `<ratio>` указаны вместе, предпочтительным соотношением сторон является указанное соотношение `width`, деленное на `height`, если только это не [заменяемый элемент](https://developer.mozilla.org/docs/Web/CSS/Replaced_element) с внутренним соотношением сторон, которое и будет использовано в этом случае.
+
+## Пример: постоянство в сетке
+
+Это очень хорошо работает с механизмами компоновки CSS, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых вы хотите сохранить соотношение сторон 1:1, например сетку со значками спонсоров:
+
+```html
+<ul class="sponsor-grid">
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+  <li class="sponsor">
+    <img src="..." alt="..."/>
+  </li>
+</ul>
+```
+
+```css
+.sponsor-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+.sponsor img {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  object-fit: contain;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/gridimages2.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Изображения в сетке с их родительским элементом при разных соотношением сторон. <a href="https://codepen.io/una/pen/PoGddaw">См. демонстрацию на Codepen</a>.</figcaption></figure>
+
+## Пример: предотвращение смещения макета
+
+Еще одна замечательная особенность `aspect-ratio` заключается в том, что с его помощью можно создавать пространство-заполнитель для предотвращения [совокупного смещения макета](/cls/), обеспечивая лучшие показатели [Web Vitals](/learn-core-web-vitals/). В первом примере загрузка ресурса из API, такого как [Unsplash](https://source.unsplash.com/), провоцирует смещение макета, когда медиафайл загружен.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-missing.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Видео совокупного смещения макета, которое происходит, когда для загруженного ресурса не задано соотношение сторон. Это видео записано с помощью эмулированной сети 3G.</figcaption></figure>
+
+Применение `aspect-ratio` создает заполнитель для предотвращения этого смещения макета:
+
+```css
+img {
+  width: 100%;
+  aspect-ratio: 8 / 6;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/aspect-ratio/aspect-ratio-set.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Видео с заданным соотношением сторон для загружаемого ресурса. Это видео записано с помощью эмулированной сети 3G. <a href="https://codepen.io/una/pen/GRjLZmG">См. демонстрацию на Codepen</a>.</figcaption></figure>
+
+### Бонусный совет: атрибуты изображения для соотношения сторон
+
+Есть и другой способ установить соотношение сторон изображения — использовать [его атрибуты](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). Если вы заранее знаете размеры изображения, [рекомендуется](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/#check-the-images-width-and-height-attributes-in-the-html) установить эти размеры в качестве значений `width` и `height`.
+
+В нашем примере выше мы знаем, что размеры составляют 800 на 600 пикселей, и разметка изображения будет выглядеть так: `<img src="image.jpg" alt="..." width="800" height="600">`. Если отправленное изображение имеет такое же соотношение сторон, но не обязательно с аналогичными значениями в пикселях, мы все равно можем использовать значения атрибутов изображения, чтобы задать соотношение, в сочетании со стилем `width: 100%`. Так изображение займет положенное место. Все вместе будет выглядеть так:
+
+```markup
+<!-- Разметка -->
+<img src="image.jpg" alt="..." width="8" height="6">
+```
+
+```css
+/* CSS */
+img {
+  width: 100%;
+}
+```
+
+В итоге эффект будет аналогичен указанию `aspect-ratio` для изображения с помощью CSS, и совокупного смещения макета не произойдет ([см. демонстрацию на Codepen](https://codepen.io/una/pen/gOwJWoz)).
+
+## Заключение
+
+Благодаря новому свойству `aspect-ratio`, введенному в разных современных браузерах, поддерживать правильные соотношения сторон в контейнерах мультимедиа и макета становится немного проще.
+
+Использованные фотографии [Эми Шамблен](https://unsplash.com/photos/TXg_38oImi0) и [Лайонела Густава](https://unsplash.com/photos/c1rOy44wuts) загружены через Unsplash.
diff --git a/src/site/content/ru/blog/async-clipboard/index.md b/src/site/content/ru/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..b815e0934e6
--- /dev/null
+++ b/src/site/content/ru/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: Доступ к буферу обмена без блокировки
+subhead: Безопасный доступ к буферу обмена для текста и изображений без блокировки страницы
+authors:
+  - developit
+  - thomassteiner
+description: Async Clipboard API упрощает копирование и вставку, рассчитанные на получение разрешения.
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: Буфер обмена со списком покупок
+feedback:
+  - api
+---
+
+В последние годы для взаимодействия с буфером обмена в браузерах использовался метод [`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands). Несмотря на широкую поддержку, цена этого метода вырезания и вставки была высока: доступ к буферу обмена был синхронным и позволял только чтение и запись в DOM.
+
+Это нормально для небольших фрагментов текста, но во многих случаях блокировка страницы для передачи из буфера обмена неэффективна. Прежде чем содержимое можно будет безопасно вставить, может потребоваться длительная очистка или декодирование изображения. Браузеру может потребоваться загрузить или встроить связанные ресурсы из вставленного документа. Это заблокирует страницу во время ожидания диска или сети. Представьте себе добавление разрешений к комбинации, требующей, чтобы браузер блокировал страницу при запросе доступа к буферу обмена. В то же время разрешения, установленные для `document.execCommand()` для взаимодействия с буфером обмена, определены слабо и различаются в зависимости от браузера.
+
+[Async Clipboard API](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api) решает эти проблемы, предоставляя четко определенную модель разрешений, которая не блокирует страницу. Safari недавно объявил о его [поддержке в версии 13.1](https://webkit.org/blog/10855/). При этом основные браузеры имеют базовый уровень поддержки. На момент написания этой статьи Firefox поддерживает только текст, а в некоторых браузерах поддержка изображений ограничена PNG. Если вы собираетесь использовать API, [обратитесь к таблице поддержки браузеров](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility), прежде чем продолжить.
+
+{% Aside %} Async Clipboard API ограничен обработкой текста и изображений. Chrome 84 вводит экспериментальную функцию, которая позволяет буферу обмена обрабатывать данные произвольного типа. {% endAside %}
+
+## Копирование: запись данных в буфер обмена
+
+### writeText ()
+
+Чтобы скопировать текст в буфер обмена, вызовите `writeText()`. Поскольку этот API является асинхронным, функция `writeText()` возвращает обещание, которое разрешается или отклоняется в зависимости от того, успешно ли скопирован переданный текст:
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('URL страницы скопирован в буфер обмена');
+  } catch (err) {
+    console.error('Не удалось скопировать: ', err);
+  }
+}
+```
+
+### write()
+
+На самом деле `writeText()` — это просто удобный вариант универсального метода `write()`, который также позволяет копировать изображения в буфер обмена. Как и `writeText()`, он асинхронный и возвращает обещание.
+
+Чтобы записать изображение в буфер обмена, вам понадобится передать его в виде [`blob`](https://developer.mozilla.org/docs/Web/API/blob). Один из способов это сделать — запросить изображение с сервера с помощью `fetch()`, а затем вызвать [`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob) в ответе.
+
+Запрос изображения с сервера может быть нежелательным или невозможным по ряду причин. К счастью, вы также можете перенести изображение на элемент canvas и вызвать его метод [`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob).
+
+Затем передайте массив объектов `ClipboardItem` в качестве параметра методу `write()`. На данный момент вы можете передавать только одно изображение за раз, но в будущем мы надеемся добавить поддержку нескольких изображений. `ClipboardItem` принимает объект с MIME-типом изображения в качестве ключа и большого двоичного объекта в качестве значения. Для объектов Blob, полученных из `fetch()` или `canvas.toBlob()`, свойство `blob.type` автоматически определяет верный MIME-тип изображения.
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Изображение скопировано.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} Safari (WebKit) обрабатывает активацию пользователя иначе, чем Chromium (Blink) (см. [ошибку WebKit №222262](https://bugs.webkit.org/show_bug.cgi?id=222262)). Для Safari нужно выполнить все асинхронные операции в обещании, результат которого вы присваиваете `ClipboardItem`:
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### Событие копирования
+
+В случае, когда пользователь инициирует копирование в буфер обмена, нетекстовые данные предоставляются в виде Blob-объекта. Событие [`copy`](https://developer.mozilla.org/docs/Web/API/Document/copy_event) включает свойство `clipboardData` с элементами уже в правильном формате, поэтому создавать Blob вручную не нужно. Вызовите `preventDefault()`, чтобы предотвратить поведение по умолчанию, руководствуясь приоритетом вашей собственной логики, затем скопируйте содержимое в буфер обмена. В этом примере не рассматривается, как вернуться к более ранним API, когда Clipboard API не поддерживается. Я расскажу об этом в разделе «[Обнаружение функций](#feature-detection)» далее в этой статье.
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Изображение скопировано.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## Вставка: чтение данных из буфера обмена
+
+### readText ()
+
+Чтобы прочитать текст из буфера обмена, вызовите `navigator.clipboard.readText()` и дождитесь разрешения возвращенного обещания:
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Вставленное содержимое: ', text);
+  } catch (err) {
+    console.error('Не удалось прочитать содержимое буфера обмена: ', err);
+  }
+}
+```
+
+### read()
+
+Метод `navigator.clipboard.read()` также является асинхронным и возвращает обещание. Чтобы прочитать изображение из буфера обмена, получите список объектов [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem), а затем выполните их перебор.
+
+Каждый `ClipboardItem` может хранить свое содержимое в разных типах, поэтому вам придется перебирать список типов, снова используя цикл `for...of`. Для каждого типа вызовите метод `getType()` с текущим типом в качестве аргумента, чтобы получить соответствующий Blob. Аналогично вышеуказанному, этот код не привязан к изображениям и будет работать с другими будущими типами файлов.
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### Работа со вставленными файлами
+
+Пользователям удобно, когда есть возможность использовать сочетания клавиш для буфера обмена, такие как <kbd>ctrl</kbd>+<kbd>c</kbd> и <kbd>ctrl</kbd>+<kbd>v</kbd>. Chromium предоставляет файлы *только для чтения* в буфере обмена, как показано ниже. Это срабатывает, когда пользователь нажимает на ярлык вставки операционной системы по умолчанию или при нажатии «**Правка**», а затем «**Вставить**» в строке меню браузера. Никакого дополнительного связующего кода не требуется.
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Читаем содержимое файла, предполагая, что это текстовый файл.
+  // Запись в файл недоступна.
+  console.log(await file.text());
+});
+```
+
+### Событие вставки
+
+Как отмечено выше, есть планы ввести события для работы с Clipboard API, а пока вы можете использовать существующее событие `paste`. Оно прекрасно работает с новыми асинхронными методами чтения текста из буфера обмена. Как и в случае с событием `copy`, не забудьте вызвать `preventDefault()`.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Вставленный текст: ', text);
+});
+```
+
+Как и для события `copy`, возврат к более ранним API, когда Clipboard API не поддерживается, будет рассмотрен в разделе «[Обнаружение функций](#feature-detection)».
+
+## Работа с несколькими типами файлов
+
+Большинство реализаций помещают в буфер обмена несколько форматов данных для одной операции вырезания или копирования. На это есть две причины: будучи разработчиком приложений, вы никак не можете знать возможности приложения, в которое пользователь хочет скопировать текст или изображения, а многие приложения поддерживают вставку структурированных данных в виде простого текста. Пользователям это доступно в пунктах меню «**Правка**» под названием «**Вставить и согласовать стиль**» или «**Вставить без форматирования**».
+
+В следующем примере показано, как это сделать. В этом примере для получения данных изображения используется `fetch()`, но эти данные также можно получить из [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas) или [File System Access API](/file-system-access/).
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png');
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## Безопасность и разрешения
+
+Доступ к буферу обмена всегда создавал проблемы безопасности в браузерах. Без надлежащих разрешений страница могла незаметно копировать всевозможный вредоносный контент в буфер обмена пользователя, что могло обернуться катастрофой при вставке. Только представьте веб-страницу, которая молча копирует в ваш буфер обмена `rm -rf /` или изображение, являющееся [архивной бомбой](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html).
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="Диалоговое окно браузера, запрашивающее у пользователя разрешение на буфер обмена.", width="800", height="338" %} <figcaption> Запрос разрешения для Clipboard API. </figcaption></figure>
+
+Предоставление веб-страницам неограниченного доступа к буферу обмена для чтения еще более проблематично. Пользователи обычно копируют конфиденциальную информацию, такую как пароли и личные данные, в буфер обмена, который затем может быть прочитан любой страницей без ведома пользователя.
+
+Как и многие новые API, Clipboard API поддерживается только для страниц, обслуживаемых через HTTPS. Чтобы предотвратить нарушения, доступ к буферу обмена разрешается, только когда страница открыта на активной вкладке. Страницы на активных вкладках могут записывать данные в буфер обмена без запроса разрешения, но для чтения из буфера обмена разрешение требуется всегда.
+
+Разрешения на копирование и вставку были добавлены в [Permissions API](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web). Разрешение `clipboard-write` автоматически предоставляется страницам, когда они открыты на активной вкладке. Разрешение `clipboard-read` должно быть запрошено — это можно реализовать при попытке прочитать данные из буфера обмена. Последнее показано в коде ниже::
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Примет значение 'granted', 'denied' или 'prompt':
+console.log(permissionStatus.state);
+
+// Прослушиваем изменения состояния разрешения
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+Вы также можете указать, требуется ли жест пользователя для вызова вырезания или вставки, используя параметр `allowWithoutGesture`. Значение по умолчанию для этого параметра зависит от браузера, поэтому включать его нужно всегда.
+
+Здесь как раз пригодится асинхронный характер Clipboard API буфера обмена: при попытке чтения или записи данных буфера обмена у пользователя автоматически запрашивается разрешение, если оно еще не было предоставлено. Поскольку API основан на обещаниях, такое поведение полностью прозрачно, и отказ пользователя в разрешении буфера обмена приводит к отклонению обещания, так что страница может отреагировать соответствующим образом.
+
+Поскольку Chrome разрешает доступ к буферу обмена, только когда страница открыта на активной вкладке, вы увидите, что некоторые из приведенных здесь примеров не работают, если вставить их непосредственно в DevTools, поскольку сами DevTools являются активной вкладкой. Это можно обойти: отложите доступ к буферу обмена с помощью `setTimeout()`, а затем быстро кликните внутри страницы, чтобы передать ей фокус перед вызовом функций:
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## Интеграция политики разрешений
+
+Чтобы использовать API в элементах iframe, необходимо включить его с помощью [политики разрешений](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/), которая определяет механизм, позволяющий выборочно включать и отключать различные функции браузера и API. Конкретно нужно передать `clipboard-read`, `clipboard-write` или оба значения в зависимости от потребностей вашего приложения.
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## Обнаружение функций
+
+Чтобы использовать Async Clipboard API с поддержкой всех браузеров, проверьте `navigator.clipboard` и вернитесь к более ранним методам. Например, вот как можно реализовать вставку, чтобы включить другие браузеры.
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Получен вставленный текст: ', text);
+});
+```
+
+Это еще не все. До появления Async Clipboard API в браузерах использовалось сочетание различных реализаций копирования и вставки. В большинстве браузеров собственное копирование и вставка браузера могут быть запущены с помощью `document.execCommand('copy')` и `document.execCommand('paste')`. Если копируемый текст представляет собой строку, отсутствующую в DOM, она должна быть вставлена в DOM и выбрана:
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Не удалось скопировать текст.');
+  }
+});
+```
+
+В Internet Explorer также можно получить доступ к буферу обмена через `window.clipboardData`. При доступе в рамках жеста пользователя, такого как событие клика — это часть разумного подхода к запросу разрешения — запрос разрешений не отображается.
+
+## Демонстрации
+
+Вы можете пощупать Async Clipboard API в демонстрациях ниже или [прямо на Glitch](https://async-clipboard-api.glitch.me/).
+
+Первый пример демонстрирует перемещение текста в буфер обмена и из него.
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Чтобы протестировать работу API с изображениями, используйте эту демонстрацию. Напомним, что поддерживаются только PNG и только в [некоторых браузерах](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility).
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Дальнейшие шаги
+
+Chrome активно работает над расширением Asynchronous Clipboard API с помощью упрощенных событий, согласованных с [Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Из-за потенциальных рисков Chrome действует осторожно. Чтобы быть в курсе хода работ, следите за обновлениями этой статьи и нашего [блога](/blog/).
+
+На данный момент поддержка Clipboard API доступна во [многих браузерах](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility).
+
+Удачного копирования и вставки!
+
+## Ссылки по теме
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## Благодарности
+
+Asynchronous Clipboard API был реализован [Дарвином Хуангом](https://www.linkedin.com/in/darwinhuang/) и [Гари Качмарчиком](https://www.linkedin.com/in/garykac/). Дарвин также предоставил демонстрации. Спасибо [Ярославу Кукицяку](https://github.com/kyarik) и еще раз Гари Качмарчику за рецензирование параграфов этой статьи.
+
+Главное изображение взято у [Маркуса Винклера](https://unsplash.com/@markuswinkler) на [Unsplash](https://unsplash.com/photos/7iSEHWsxPLw).
diff --git a/src/site/content/ru/blog/bfcache/index.md b/src/site/content/ru/blog/bfcache/index.md
new file mode 100644
index 00000000000..396b1b19687
--- /dev/null
+++ b/src/site/content/ru/blog/bfcache/index.md
@@ -0,0 +1,345 @@
+---
+layout: post
+title: Кэш для перехода назад и вперед
+subhead: Оптимизируйте страницы, чтобы мгновенно загружать их при нажатии кнопок «Назад» и «Вперед» в браузере.
+description: Узнайте, как оптимизировать страницы, чтобы мгновенно загружать их при нажатии кнопок «Назад» и «Вперед» в браузере.
+authors:
+  - philipwalton
+date: 2020-11-10
+updated: 2021-11-15
+hero: image/admin/Qoeb8x3a11BdGgRzYJbY.png
+alt: Кнопки «Назад» и «Вперед»
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Кэш для перехода назад и вперед (или bfcache) — это функция оптимизации в браузере, которая позволяет мгновенно переходить вперед и назад по страницам. Это значительно повышает удобство просмотра веб-страниц, особенно для пользователей с медленно работающими устройствами или низкоскоростными подключениями к сети.
+
+Веб-разработчики должны понимать, как [оптимизировать страницы для bfcache](#optimize-your-pages-for-bfcache), чтобы пользователям были доступны преимущества, обеспечиваемые этой функцией.
+
+## Совместимость с браузерами
+
+Функция bfcache уже много лет поддерживается в [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching) и в [Safari](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) на компьютерах и мобильных устройствах.
+
+Начиная с версии 86, в Chrome для Android появилась поддержка bfcache для перехода [между сайтами](/same-site-same-origin/) (для небольшого процента пользователей). В последующих выпусках разработчики постепенно дополняли перечень поддерживаемых версий и устройств. Начиная с версии 96, поддержка bfcache стала доступна для всех пользователей Chrome на компьютерах и мобильных устройствах.
+
+## Основные сведения о bfcache
+
+bfcache — это кэш в памяти, в котором сохраняется полный снимок страницы (включая кучу JavaScript), когда пользователь переходит с этой страницы на другую. Так как в памяти хранится вся страница, браузер может быстро и просто восстановить ее, если пользователь решит вернуться.
+
+Сколько раз, посещая веб-сайт, вы переходили по ссылке на другую страницу, понимали, что это не то, что вам нужно, и нажимали кнопку «Назад»? В такие моменты bfcache может существенно уменьшить скорость загрузки предыдущей страницы.
+
+<div class="table-wrapper">
+  <table data-alignment="top">
+    <tr>
+      <td width="30%">
+        <strong><em>С выключенным</em> bfcache</strong>
+      </td>
+      <td>Браузер инициирует новый запрос для загрузки предыдущей страницы, и (в зависимости от того, насколько хорошо эта страница <a href="/reliable/#the-options-in-your-caching-toolbox">оптимизирована</a> для повторных посещений) ему, возможно, придется повторно загрузить, проанализировать и выполнить некоторые (или все) ресурсы, которые он недавно загружал.</td>
+    </tr>
+    <tr>
+      <td><strong>С <em>включенным</em> bfcache</strong></td>
+      <td>Загрузка предыдущей страницы происходит <em>практически мгновенно</em>, потому что всю страницу можно восстановить из памяти без необходимости выходить в сеть.</td>
+    </tr>
+  </table>
+</div>
+
+Посмотрев видеоролик о работе bfcache, вы поймете, насколько эта функция ускоряет переход по страницам:
+
+{% YouTube 'cuPsdRckkF0' %}
+
+В приведенном выше видеоролике браузер с включенным bfcache работает немного быстрее, чем браузер с выключенным bfcache.
+
+bfcache не только ускоряет переход по страницам, но и уменьшает объем используемых данных, так как не нужно повторно загружать ресурсы.
+
+Данные об использовании Chrome показывают, что каждый десятый переход на настольном компьютере и каждый пятый на мобильном устройстве выполняются либо на предыдущую, либо на следующую страницу. С включенным bfcache браузеры могут исключить этап передачи данных и не тратить время на загрузку миллиардов веб-страниц каждый день.
+
+### Как работает «кэш»
+
+«Кэш», используемый в функции bfcache, отличается от [кэша HTTP](/http-cache/) (который также позволяет ускорить повторные переходы). bfcache сохраняет снимок всей страницы (включая кучу JavaScript) в памяти, тогда как в кэше HTTP содержатся только ответы на ранее сделанные запросы. Случаи, когда все запросы, необходимые для загрузки страницы, можно получить из кэша HTTP, довольно редки, поэтому повторные посещения страниц с использованием функции восстановления страниц из bfcache выполняются всегда быстрее, чем при переходах даже по самым оптимизированным веб-страницам без использования bfcache.
+
+Создание снимка страницы в памяти сопровождается некоторыми сложностями, связанными с выбором наиболее подходящего метода сохранения выполняемого кода. Например, как обрабатывать вызовы функции `setTimeout()` по истечении времени ожидания, когда страница находится в bfcache?
+
+Ответ заключается в том, что браузеры приостанавливают выполнение всех ожидающих таймеров или несопоставленных обещаний (по сути, всех ожидающих задач в [очередях задач JavaScript](https://html.spec.whatwg.org/multipage/webappapis.html#task-queue)) и возобновляют обработку задач, когда (или если) они восстанавливают страницу из bfcache.
+
+В некоторых случаях эта операция сопровождается довольно низким риском (например, для времени ожидания или обещаний), но в других случаях это может привести к очень запутанному или непредвиденному поведению. Например, если браузер приостанавливает задачу, которая требуется для выполнения [транзакции IndexedDB](https://developer.mozilla.org/docs/Web/API/IDBTransaction), это может повлиять на другие открытые вкладки в том же источнике (так как к одним и тем же базам данных IndexedDB могут получать доступ несколько вкладок одновременно). В результате браузеры, как правило, не пытаются кэшировать страницы при выполнении транзакций IndexedDB или при использовании API, которые могут повлиять на другие страницы.
+
+Дополнительные сведения о том, как использование различных API влияет на соответствие страниц требованиям bfcache, см. в разделе «[Оптимизация страниц для bfcache](#optimize-your-pages-for-bfcache)» ниже.
+
+### API для наблюдения за bfcache
+
+Несмотря на то что браузеры выполняют операции с bfcache автоматически, разработчикам важно знать, когда происходят такие операции, чтобы [оптимизировать страницы для bfcache](#optimize-your-pages-for-bfcache) и соответствующим образом [скорректировать все метрики или показатели производительности](#implications-for-analytics-and-performance-measurement).
+
+Основные события, используемые для наблюдения за bfcache, — [события перехода со страницы на страницу](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent) (`pageshow` и `pagehide`). Они существуют с тех пор, как появилась функция bfcache, и поддерживаются почти во [всех используемых в настоящее время браузерах](https://caniuse.com/page-transition-events).
+
+Кроме того, при операциях записи или удаления страницы в bfcache, а также в некоторых других ситуациях возникают новые события [Page Lifecycle](https://developer.chrome.com/blog/page-lifecycle-api/) — `freeze` и `resume`. Например, при «заморозке» фоновой вкладки с целью минимизации использования ЦП. Обратите внимание, что в настоящее время события Page Lifecycle поддерживаются только в браузерах на основе Chromium.
+
+#### Наблюдение за восстановлением страниц из bfcache
+
+Событие `pageshow` возникает сразу после события `load` при первоначальной загрузке страницы, а также при каждом восстановлении страницы из bfcache. У события `pageshow` есть свойство <code>[persisted](https://developer.mozilla.org/docs/Web/API/PageTransitionEvent/persisted)</code>, которое имеет значение <code>true</code>, если страница была восстановлена из bfcache (и значение <code>false</code> в противном случае). С помощью свойства <code>persisted</code> можно отличать обычную загрузку страниц от их восстановления из bfcache. Пример:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    console.log('Эта страница была восстановлена из bfcache.');
+  } else {
+    console.log('Эта страница была загружена обычным способом.');
+  }
+});
+```
+
+В браузерах, поддерживающих API Page Lifecycle, событие `resume` возникает при восстановлении страниц из bfcache (непосредственно перед событием `pageshow`). Кроме того, оно возникает, когда пользователь повторно посещает «замороженную» фоновую вкладку. Если нужно восстановить состояние страницы после ее «заморозки» (включая страницы в bfcache), можно использовать событие `resume`, но если вы хотите измерить процент попаданий своего сайта в bfcache, потребуется использовать событие `pageshow`. В некоторых случаях вам может потребоваться использовать оба события.
+
+{% Aside %} Рекомендации по измерению показателей, связанных с bfcache, см. в разделе [Влияние на производительность и аналитику](#how-bfcache-affects-analytics-and-performance-measurement). {% endAside %}
+
+#### Наблюдение за добавлением страниц в bfcache
+
+Событие `pagehide` — аналог события `pageshow`. Событие `pageshow` возникает при обычной загрузке страницы либо ее восстановлении из bfcache. Событие `pagehide` возникает при обычной выгрузке страницы либо когда браузер пытается поместить ее в bfcache.
+
+У события `pagehide` также есть свойство `persisted`; если оно имеет значение `false`, можно с уверенностью сказать, что страница не будет помещена в bfcache. Но если свойство `persisted` имеет значение `true`, это вовсе не гарантирует, что страница будет помещена в кэш. Это означает, что браузер *намеревается* поместить ее в кэш, но могут возникнуть факторы, из-за которых не удастся выполнить кэширование.
+
+```js
+window.addEventListener('pagehide', (event) => {
+  if (event.persisted === true) {
+    console.log('Эта страница *может* попасть в bfcache.');
+  } else {
+    console.log('Эта страница будет выгружена в обычном режиме, а затем будет утеряна.');
+  }
+});
+```
+
+Аналогично, событие `freeze` возникает сразу после события `pagehide` (если свойство `persisted` имеет значение `true`), но, опять же, это означает, что браузер всего лишь *намеревается* кэшировать страницу. Возможно, ему все же придется отказаться от этого намерения по ряду описанных ниже причин.
+
+## Оптимизация страниц для bfcache
+
+Не все страницы сохраняются в bfcache, и даже если страница действительно сохранена в bfcache, она не будет оставаться там бесконечно. Разработчикам очень важно понимать, благодаря чему страницы могут быть пригодными (или непригодными) для помещения в bfcache, чтобы добиться максимального показателя попаданий страниц в кэш.
+
+В следующих разделах приведены рекомендации, следуя которым, можно добиться максимальной вероятности кэширования страниц в браузере.
+
+### Никогда не используйте событие `unload`
+
+Самый важный способ оптимизировать страницы для bfcache во всех браузерах — никогда не использовать событие `unload`. Без каких-либо исключений!
+
+Событие `unload` создает проблемы для браузеров, так как оно возникает до операций с bfcache, и при разработке многих страниц в Интернете предполагается (обоснованно), что после возникновения события `unload` страница перестает существовать. В связи с этим возникает проблема, так как многие из страниц *также* созданы с расчетом на то, что событие `unload` будет срабатывать каждый раз, когда пользователь покидает страницу, а это [уже давно не соответствует действительности](https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event).
+
+Таким образом, для браузеров возникает дилемма: нужно повысить удобство для пользователя, но при этом существует риск нарушить нормальную работу страницы.
+
+В Chrome и Firefox страницы считаются неподходящими для помещения в bfcache, если они добавляют прослушиватель события `unload`. Это не очень рискованный подход, но при его использовании происходит «дисквалификация» *большого количества* страниц. Safari пытается кэшировать некоторые страницы с прослушивателем события `unload`, но для уменьшения риска нарушить работу страницы этот браузер не создает событие `unload`, когда пользователь покидает страницу, и в результате это событие становится очень ненадежным.
+
+Вместо события `unload` используйте событие `pagehide`. В настоящее время событие `pagehide` возникает во всех случаях, когда возникает событие `unload`. *Кроме того*, оно возникает при помещении страницы в bfcache.
+
+В [Lighthouse 6.2.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.2.0) был добавлен аудит <code>[no-unload-listeners audit](https://github.com/GoogleChrome/lighthouse/pull/11085)</code>, который предупреждает разработчиков, если какой-либо код JavaScript на страницах (включая код из сторонних библиотек) добавляет прослушиватель события <code>unload</code>.
+
+{% Aside 'warning' %} Никогда не добавляйте прослушиватель события `unload`. Вместо этого используйте событие `pagehide`. Если вы добавите прослушиватель события `unload`, ваш сайт будет медленнее работать в Firefox, а в Chrome и Safari ваш код большую часть времени даже не будет работать. {% endAside %}
+
+#### Добавляйте прослушиватели события `beforeunload` только при определенных условиях
+
+Событие `beforeunload` не препятствует размещению страниц в bfcache в Chrome или Safari, но делает это невозможным в Firefox, поэтому не используйте его без крайней необходимости.
+
+Тем не менее (в отличие от события `unload`) в некоторых случаях допустимо использовать событие `beforeunload`. Например, если нужно предупредить пользователя о том, что есть несохраненные изменения, который будут утеряны, если пользователь покинет страницу. В этом случае рекомендуется добавлять прослушиватели события `beforeunload` только тогда, когда у пользователя есть несохраненные изменения, а затем удалять их сразу после сохранения изменений.
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('beforeunload', (event) => {
+  if (pageHasUnsavedChanges()) {
+    event.preventDefault();
+    return event.returnValue = 'Вы действительно хотите выйти?';
+  }
+});
+```
+
+{% CompareCaption %} Приведенный выше код добавляет прослушиватель события `beforeunload` без каких-либо условий. {% endCompareCaption %} {% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  return event.returnValue = 'Вы действительно хотите выйти?';
+};
+
+// Функция, которая создает обратный вызов, если на странице есть несохраненные изменения.
+onPageHasUnsavedChanges(() => {
+  window.addEventListener('beforeunload', beforeUnloadListener);
+});
+
+// Функция, которая создает обратный вызов, если вопрос с несохраненными изменениями на странице решен.
+onAllChangesSaved(() => {
+  window.removeEventListener('beforeunload', beforeUnloadListener);
+});
+```
+
+{% CompareCaption %} Приведенный выше код добавляет прослушиватель события `beforeunload`, когда он нужен (и удаляет его, когда он не нужен). {% endCompareCaption %} {% endCompare %}
+
+### Не используйте ссылки на window.opener
+
+В некоторых браузерах (включая браузеры на основе Chromium) происходит следующее: если страница открыта с использованием <code>[window.open()](https://developer.mozilla.org/docs/Web/API/Window/open)</code> или (в [браузерах на основе Chromium до версии 88](https://crbug.com/898942)) по ссылке с <code>[target=_blank](https://developer.mozilla.org/docs/Web/HTML/Element/a#target)</code> без указания <code>[rel="noopener"](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener)</code>, то открывающаяся страница будет иметь ссылку на объект window открытой страницы.
+
+Помимо [угрозы безопасности](https://mathiasbynens.github.io/rel-noopener/) страницу с непустой ссылкой <code>[window.opener](https://developer.mozilla.org/docs/Web/API/Window/opener)</code> невозможно безопасно поместить в bfcache, так как это может нарушить работу всех страниц, пытающихся получить доступ к этой странице.
+
+В результате, если возможно, рекомендуется не создавать ссылки на `window.opener` с использованием атрибута `rel="noopener"`. Если сайту требуется открывать окна и управлять ими с помощью <code>[window.postMessage()](https://developer.mozilla.org/docs/Web/API/Window/postMessage)</code> либо напрямую ссылаться на объект window, ни открытое окно, ни opener не будут пригодны для размещения в bfcache.
+
+### Всегда закрывайте открытые подключения, прежде чем пользователь покинет страницу
+
+Как было сказано выше, когда браузер помещает страницу в bfcache, он приостанавливает все запланированные задачи JavaScript, а при извлечении страницы из кэша возобновляет работу этих задач.
+
+Если запланированные задачи JavaScript обращаются только к DOM API или другим API, изолированным и используемым только для текущей страницы, то приостановка выполнения этих задач, когда страница не видна пользователю, не приводит ни к каким проблемам.
+
+Но если эти задачи связаны с API, которые также доступны с других страниц в том же источнике (например, IndexedDB, Web Locks, WebSockets и т. д.), могут возникать проблемы, так как приостановка таких задач может помешать выполнению кода на других вкладках.
+
+В результате некоторые браузеры не пытаются помещать страницы в bfcache в указанных ниже сценариях.
+
+- Страницы с открытым [подключением к IndexedDB](https://developer.mozilla.org/docs/Web/API/IDBOpenDBRequest)
+- Страницы с выполняющейся функцией [fetch ()](https://developer.mozilla.org/docs/Web/API/Fetch_API) или запросом [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)
+- Страницы с открытым подключением к [WebSocket](https://developer.mozilla.org/docs/Web/API/WebSocket) или [WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API)
+
+Если в странице используется какой-либо из этих API, рекомендуется всегда закрывать подключения и удалять или отключать наблюдателей во время событий `pagehide` или `freeze`. Это позволит браузеру безопасно кэшировать страницу, не затрагивая при этом другие открытые вкладки.
+
+После восстановления страницы из bfcache можно повторно открыть эти API или повторно подключиться к ним (в событии `pageshow` или `resume`).
+
+В примере ниже показано, как сделать страницы пригодными для размещения в bfcache при использовании IndexedDB, закрыв открытое подключение в прослушивателе события `pagehide`:
+
+```js
+let dbPromise;
+function openDB() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open('my-db', 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
+      req.onerror = () => reject(req.error);
+      req.onsuccess = () => resolve(req.result);
+    });
+  }
+  return dbPromise;
+}
+
+// Закрываем подключение к базе данных, когда пользователь покидает страницу.
+window.addEventListener('pagehide', () => {
+  if (dbPromise) {
+    dbPromise.then(db => db.close());
+    dbPromise = null;
+  }
+});
+
+// Открываем подключение при загрузке страницы или ее восстановлении из bfcache.
+window.addEventListener('pageshow', () => openDB());
+```
+
+### Обновляйте устаревшие или конфиденциальные данные после восстановления страницы из bfcache
+
+Если ваш сайт сохраняет сведения о состоянии пользователя (особенно это касается любой конфиденциальной информации пользователя), то после восстановления страницы из bfcache необходимо обновить или удалить эти данные.
+
+Например, если пользователь переходит на страницу оформления заказа, а затем обновляет свою корзину, то при переходе назад и восстановлении устаревшей страницы из bfcache может отображаться устаревшая информация.
+
+Другой, более важный пример, — когда пользователь выходит из системы на сайте на общедоступном компьютере, а следующий пользователь нажимает кнопку «Назад». В этом случае могут быть раскрыты личные данные, которые, как предполагал первый пользователь, были удалены при выходе из системы.
+
+Чтобы не допустить подобных ситуаций, рекомендуется всегда обновлять страницу после события `pageshow`, если атрибут `event.persisted` имеет значение `true`.
+
+Следующий код проверяет, есть ли файл cookie для конкретного сайта в событии `pageshow`, и если такого файла нет, выполняет повторную загрузку:
+
+```js
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted && !document.cookie.match(/my-cookie/)) {
+    // Принудительное выполнение повторной загрузки, если пользователь вышел из системы.
+    location.reload();
+  }
+});
+```
+
+### Выполните тестирование и убедитесь, что страницы пригодны для кэширования
+
+С помощью Chrome DevTools можно тестировать страницы, проверять, оптимизированы ли они для bfcache, и выявлять все проблемы, из-за которых страницы могут быть непригодны для кэширования.
+
+Чтобы протестировать определенную страницу, перейдите на нее в Chrome, а затем в DevTools перейдите в раздел **Application** > **Back-forward Cache** (Приложение > Кэш для перехода назад и вперед). Затем нажмите кнопку **Run Test** (Выполнить тест). DevTools попытается покинуть страницу, а затем вернуться на ее, чтобы определить, можно ли восстановить страницу из bfcache.
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/QafTzULUNflaSh77zBgT.png", alt="Панель Back-forward cache (Кэш перехода назад и вперед) в DevTools", width="800", height="313" %}
+
+{% Aside %} В настоящее время функция Back/forward Cache (Кэш для перехода назад и вперед) в DevTools находится в стадии активной разработки. Мы настоятельно рекомендуем разработчикам тестировать страницы в Chrome Canary. Благодаря этому вы будете использовать последнюю версию DevTools и получать самые свежие рекомендации по bfcache. {% endAside %}
+
+При успешном выполнении операции на панели отобразится сообщение Restored from back-forward cache (Восстановлено из кэша для перехода назад и вперед):
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vPwN0z95ZBTiwZIpdZT4.png", alt="Сообщение DevTools о том, что страница успешно восстановлена из bfcache", width="800", height="313" %}
+
+В случае неудачи на панели отобразится сообщение о том, что страница не была восстановлена, и будет указана причина этого. Если вы, как разработчик, можете устранить причину проблемы, это также будет указано:
+
+{% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/ji3ew4DoP6joKdJvtGwa.png", alt="Сообщение DevTools о том, что не удалось восстановить страницу из bfcache", width="800", height="313" %}
+
+На приведенном выше снимке экрана показано, что из-за применения прослушивателя события `unload` страница [не подходит](/bfcache/#never-use-the-unload-event) для размещения в bfcache. Чтобы решить эту проблему, можно вместо события `unload` использовать событие `pagehide`:
+
+{% Compare 'worse' %}
+
+```js
+window.addEventListener('unload', ...);
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```js
+window.addEventListener('pagehide', ...);
+```
+
+{% endCompare %}
+
+## Как bfcache влияет на аналитику и на измерение производительности
+
+Если вы отслеживаете посещения своего сайта с помощью средства аналитики, вы, вероятно, заметите уменьшение общего количества просмотров страниц, так как Chrome будет использовать bfcache для все большего числа пользователей.
+
+На самом деле у вас, вероятно, *уже* занижены показатели количества просмотров страниц из других браузеров, в которых реализована функция bfcache, так как большинство популярных библиотек аналитики не считают операции восстановления из bfcache новыми просмотрами страниц.
+
+Если вы не хотите, чтобы количество просмотров страниц уменьшалось из-за включения bfcache в Chrome, можно сделать так, чтобы операции восстановления из bfcache считались просмотрами страниц (рекомендуется). Для этого нужно прослушивать событие `pageshow` и проверять свойство `persisted`.
+
+В следующем примере показано, как сделать это с помощью Google Analytics; в других средствах аналитики логика должна быть аналогичной:
+
+```js
+// Отправка события pageview при первой загрузке страницы.
+gtag('event', 'page_view');
+
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted === true) {
+    // Отправка еще одного события pageview при восстановлении страницы из bfcache.
+    gtag('event', 'page_view');
+  }
+});
+```
+
+### Измерение производительности
+
+Использование bfcache также может отрицательно сказаться на показателях производительности, собираемых [«на периферии»](/user-centric-performance-metrics/#in-the-field), в частности на показателях, измеряющих время загрузки страницы.
+
+При переходах со страницы на страницу с использованием bfcache браузер восстанавливает существующую страницу, а не инициирует загрузку новой страницы, поэтому при включении bfcache подсчитываемое общее количество загрузок страниц будет уменьшаться. Тем не менее есть один критически важный момент: если вместо загрузки страниц восстанавливать их из bfcache, это, вероятно, будут самые быстрые операции загрузки в вашем наборе данных. Это связано с тем, что по определению переходы назад и вперед представляют собой повторные посещения, а повторная загрузка страниц обычно выполняются быстрее, чем загрузка страниц для посетителей, впервые посещающих ваш сайт (как упоминалось ранее, из-за [кэширования HTTP](/http-cache/)).
+
+В результате в вашем наборе данных будет меньше быстрых загрузок страниц. Это, вероятно, уменьшит показатель распространения несмотря на то что производительность, наблюдаемая пользователем, вероятно, возрастет.
+
+Эту проблему можно решить несколькими способами, один из которых — аннотировать все метрики загрузки страницы с указанием соответствующего [типа перехода](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types): `navigate`, `reload`, `back_forward` или `prerender`. Благодаря этому вы сможете по-прежнему следить за производительностью страниц при переходах таких типов, даже если общее распределение изменится в отрицательную сторону. Этот подход рекомендуется для метрик загрузки страниц, не ориентированных на пользователей, например для метрики [Time to First Byte (TTFB)](/ttfb/) (Время до первого байта).
+
+Для метрик, ориентированных на пользователей, например [Core Web Vitals](/vitals/), лучший вариант — сообщать значение, которое более точно отражает удобство для пользователя.
+
+{% Aside 'caution' %} Не следует путать тип переходов `back_forward` в [Navigation Timing API](https://www.w3.org/TR/navigation-timing-2/#sec-performance-navigation-types) с операциями восстановления из bfcache. Navigation Timing API всего лишь аннотирует загрузки страниц, а при выполнении операций восстановления из bfcache повторно используются страницы, загруженные при предыдущем переходе. {% endAside %}
+
+### Влияние на метрики Core Web Vitals
+
+Метрики [Core Web Vitals](/vitals/) позволяют измерять, насколько пользователю удобно работать с веб-страницей, по различным параметрам (скорость загрузки, интерактивность, визуальная стабильность). И так как для пользователя восстановление из bfcache выглядит как более быстрый переход по сравнению с традиционной загрузкой страницы, важно, чтобы это было отражено в метриках Core Web Vitals. В конце концов, пользователю все равно, включен ли bfcache; ему просто нужно, чтобы переходы со страницы на страницу выполнялись быстро.
+
+В наборах данных ряда средств (например, отчета [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)), которые собирают метрики Core Web Vitals и формируют отчеты по ним, операции восстановления из bfcache считаются отдельными посещениями страниц.
+
+И хотя (пока еще) нет специализированных API для оценки производительности веб-страниц, позволяющих измерять эти метрики после операций восстановления из bfcache, значения таких метрик можно аппроксимировать с помощью существующих веб-API.
+
+- Для метрики [Largest Contentful Paint (LCP)](/lcp/) (Отображение самого крупного элемента содержимого) можно использовать разницу между меткой времени события `pageshow` и меткой времени следующего отображенного фрейма (так как все элементы во фрейме отображаются одновременно). Обратите внимание, что при выполнении операции восстановления из bfcache значения метрик LCP и FCP будут одинаковыми.
+- Для метрики [First Input Delay (FID)](/fid/) (Задержка до первого ввода данных) можно повторно добавить прослушиватели событий (те же, что используются [полифиллом FID](https://github.com/GoogleChromeLabs/first-input-delay)) в событие `pageshow` и передавать значение FID в качестве показателя задержки до первого ввода данных после операции восстановления из bfcache.
+- Для метрики [Cumulative Layout Shift (CLS)](/cls/) (Совокупное смещение макета) можно продолжать использовать существующий API Performance Observer; все, что вам потребуется сделать, — сбросить текущее значение метрики CLS до нуля.
+
+Дополнительные сведения о том, как bfcache влияет на каждую метрику, см. на [страницах руководств по метрикам](/vitals/#core-web-vitals) Core Web Vitals. Пример реализации версий этих метрик для bfcache в коде см. в [запросе на вытягивание для добавления этих метрик в библиотеку JS web-vitals](https://github.com/GoogleChrome/web-vitals/pull/87).
+
+{% Aside %} Начиная с `версии 1`, библиотека JavaScript [web-vitals](https://github.com/GoogleChrome/web-vitals) [поддерживает операции восстановления из bfcache](https://github.com/GoogleChrome/web-vitals/pull/87) в метриках в отчетах. Разработчикам, использующим `версию 1` или более поздние версии, не нужно обновлять свой код. {% endAside %}
+
+## Дополнительные ресурсы
+
+- [Использование кэширования в Firefox](https://developer.mozilla.org/Firefox/Releases/1.5/Using_Firefox_1.5_caching) *(bfcache в Firefox)*
+- [Page Cache](https://webkit.org/blog/427/webkit-page-cache-i-the-basics/) *(bfcache в Safari)*
+- [Кэш для переходов назад и вперед: действия в Интернете](https://docs.google.com/document/d/1JtDCN9A_1UBlDuwkjn1HWxdhQ1H2un9K4kyPLgBqJUc/edit?usp=sharing) *{nbsp}(различия в bfcache в разных браузерах)*
+- [Средство тестирования bfcache](https://back-forward-cache-tester.glitch.me/?persistent_logs=1) *(проверка того, как различные API и события влияют на bfcache в браузерах)*
diff --git a/src/site/content/ru/blog/blog.11tydata.js b/src/site/content/ru/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/ru/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/ru/blog/bluetooth/index.md b/src/site/content/ru/blog/bluetooth/index.md
new file mode 100644
index 00000000000..4c5858c8456
--- /dev/null
+++ b/src/site/content/ru/blog/bluetooth/index.md
@@ -0,0 +1,415 @@
+---
+title: Связь с Bluetooth-устройствами через JavaScript
+subhead: |2-
+
+  Web Bluetooth API позволяет веб-сайтам связываться с Bluetooth-устройствами.
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: Bluetooth-чип на монете
+description: |2-
+
+  Web Bluetooth API позволяет веб-сайтам связываться с Bluetooth-устройствами.
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+Что если я скажу, что веб-сайты могут связываться с ближайшими Bluetooth-устройствами безопасным способом с сохранением конфиденциальности? Таким образом, пульсометры, поющие лампочки и даже [черепахи](https://www.youtube.com/watch?v=1LV1Fk5ZXwA) могут напрямую взаимодействовать с веб-сайтом.
+
+До сих пор взаимодействовать с  Bluetooth-устройствами могли только платформозависимые приложения. Web Bluetooth API нацелен это изменить, дав такую возможность веб-браузерам.
+
+## Перед началом
+
+В этой статье предполагается, что у вас есть базовые знания о том, как работают технология Bluetooth с низким энергопотреблением (Bluetooth Low Energy, BLE) и [профиль общих атрибутов](https://www.bluetooth.com/specifications/gatt/) (Generic Attribute Profile, GATT).
+
+Несмотря на то, что [спецификация Web Bluetooth API](https://webbluetoothcg.github.io/web-bluetooth/) еще не окончательно доработана, авторы спецификации активно ищут энтузиастов-разработчиков, чтобы опробовать этот API и дать [отзывы о спецификации](https://github.com/WebBluetoothCG/web-bluetooth/issues) и [отзывы о реализации](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth).
+
+Сокращенная версия Web Bluetooth API доступна в ChromeOS, Chrome для Android 6.0, Mac (Chrome 56) и Windows 10 (Chrome 70). Это означает, что вы должны иметь возможность [запрашивать](#request) и [подключаться к](#connect) ближайшим устройствам Bluetooth с низким энергопотреблением, [читать](#read) и [записывать](#write) характеристики Bluetooth, [получать уведомления GATT](#notifications), знать, когда [устройство Bluetooth отключается](#disconnect), а также [читать и записывать дескрипторы Bluetooth](#descriptors). Для получения дополнительной информации см. [таблицу совместимости браузера](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility) в MDN.
+
+Для Linux и более ранних версий Windows включите флаг `#experimental-web-platform-features` в `about://flags`.
+
+### Доступно для испытаний по схеме Origin Trial
+
+Чтобы получить как можно больше отзывов от разработчиков, использующих Web Bluetooth API на практике, Chrome ранее добавил эту функцию в Chrome 53 для [испытаний по схеме Origin Trial](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) на ChromeOS, Android и Mac.
+
+Испытания успешно завершились в январе 2017 года.
+
+## Требования безопасности
+
+Чтобы разобраться в компромиссах безопасности, рекомендую прочесть публикацию о [модели безопасности Web Bluetooth](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2) от Джеффри Яскина, инженера-программиста из команды Chrome, работающего над спецификацией Web Bluetooth API.
+
+### Только HTTPS
+
+Поскольку этот экспериментальный API — новая мощная функция, добавленная в Интернет, он доступен только для [защищенных контекстов](https://w3c.github.io/webappsec-secure-contexts/#intro). Это означает, что организовывать проект нужно исходя из требований протокола [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security).
+
+### Требуется жест пользователя
+
+В целях безопасности обнаружение Bluetooth-устройств с помощью `navigator.bluetooth.requestDevice` должно запускаться [жестом пользователя](https://html.spec.whatwg.org/multipage/interaction.html#activation), например, касанием или щелчком мыши. Речь идет о прослушивании событий [`pointerup`](https://developer.chrome.com/blog/pointer-events/), `click` и `touchend`.
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // Вызываем navigator.bluetooth.requestDevice
+});
+```
+
+## Займемся кодом
+
+Web Bluetooth API в значительной степени полагается на [обещания](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) JavaScript. Если вы не знакомы с ними, прочтите это замечательное [руководство по обещаниям](/promises). И еще: `() => {}` — это просто [стрелочные функции](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ECMAScript 2015.
+
+### Запрос устройств Bluetooth {: #request }
+
+Эта версия спецификации Web Bluetooth API позволяет веб-сайтам, работающим в роли Central, подключаться к удаленным серверам GATT через соединение BLE. Поддерживается связь между устройствами, реализующими Bluetooth 4.0 или более поздней версии.
+
+Когда веб-сайт запрашивает доступ к ближайшим устройствам с помощью `navigator.bluetooth.requestDevice`, браузер вызывает список устройств, где пользователь может выбрать одно устройство или отменить запрос.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">Пользовательское диалоговое окно с устройствами Bluetooth.</a></p>
+  </figcaption></figure>
+
+Функция `navigator.bluetooth.requestDevice()` принимает обязательный объект, определяющий фильтры. Эти фильтры используются для возврата только тех устройств, которые соответствуют некоторым объявленным службам Bluetooth GATT или имени устройства.
+
+#### Фильтр служб
+
+Вот так можно запросить устройства Bluetooth, объявляющие [службу батарей Bluetooth GATT](https://www.bluetooth.com/specifications/gatt/):
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+Если ваша служба Bluetooth GATT не входит в список [стандартизированных служб Bluetooth GATT](https://www.bluetooth.com/specifications/assigned-numbers/), вы можете предоставить либо полный UUID Bluetooth, либо короткую 16- или 32-разрядную форму.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Фильтр имен
+
+Вы также можете запрашивать устройства Bluetooth на основе имени устройства, которое объявляется с помощью ключа фильтров `name`, или даже префикса этого имени с ключом `namePrefix`. Обратите внимание, что в этом случае также необходимо будет определить ключ `optionalServices`, чтобы иметь доступ к любым службам, не включенным в фильтр служб. Если этого не сделать, позже при попытке доступа к ним вы получите сообщение об ошибке.
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // Необходимо для последующего доступа к службе.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### Фильтр данных производителя
+
+Также можно запрашивать устройства Bluetooth на основе данных производителя, объявляемых с помощью ключа фильтров `manufacturerData`. Этот ключ представляет собой массив объектов с обязательным ключом [идентификатора компании Bluetooth](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/) под названием `companyIdentifier`. Также можно указать префикс данных, фильтрующий данные производителя устройств Bluetooth, которые с него начинаются. Обратите внимание, что также необходимо определить ключ `optionalServices`, чтобы иметь возможность доступа к любым службам, не включенным в фильтр служб. Если этого не сделать, позже при попытке доступа к ним вы получите сообщение об ошибке.
+
+```js
+// Фильтруем Bluetooth-устройства от Google с байтами данных производителя
+// которые начинаются с [0x01, 0x02].
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // Необходимо для последующего доступа к службе.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+Маска также может использоваться с префиксом данных, чтобы соответствовать некоторым шаблонам в данных производителя. Чтобы узнать больше, ознакомьтесь с [объяснением фильтров данных Bluetooth](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md).
+
+{% Aside %} На момент написания ключ фильтра `manufacturerData` доступен в Chrome 92. Если требуется обратная совместимость со старыми браузерами, необходимо обеспечить альтернативный вариант, поскольку фильтр данных производителя считается пустым. См. [пример](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ). {% endAside %}
+
+#### Без фильтров
+
+Наконец, вместо `filters` можно использовать ключ `acceptAllDevices` для отображения всех ближайших Bluetooth-устройств. Вам также потребуется определить ключ `optionalServices`, чтобы иметь доступ к некоторым службам. Если этого не сделать, позже при попытке доступа к ним вы получите сообщение об ошибке.
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // Необходимо для последующего доступа к службе.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %} Это может привести к отображению группы несвязанных устройств в списке и потере энергии из-за отсутствия фильтров. Используйте эту опцию с осторожностью. {% endAside %}
+
+### Подключение к устройству Bluetooth {: #connect }
+
+Итак, что делать теперь, когда у вас есть `BluetoothDevice`? Давайте подключимся к удаленному Bluetooth-серверу GATT, который содержит определения служб и характеристик.
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // Читаемое имя устройства.
+  console.log(device.name);
+
+  // Попытка соединиться с удаленным сервером GATT.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### Чтение характеристики Bluetooth {: #read }
+
+Итак, мы подключены к серверу GATT удаленного устройства Bluetooth. Теперь нам нужно получить первичную службу GATT и прочитать характеристику, которая принадлежит этой службе. Попробуем, например, узнать текущий уровень заряда аккумулятора устройства.
+
+В приведенном ниже примере `battery_level` — это [стандартизированная характеристика уровня заряда батареи](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Получаем службу аккумулятора…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Получаем характеристику уровня заряда батареи…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Считываем заряд батареи…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Уровень заряда: ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Если вы используете настраиваемую характеристику Bluetooth GATT, вы можете предоставить либо полный UUID Bluetooth, либо короткую 16- или 32-разрядную форму для `service.getCharacteristic`.
+
+Обратите внимание, что также можно добавить прослушиватель событий `characteristicvaluechanged` к характеристике для обработки считывания значения. Чтобы узнать, как дополнительно обрабатывать предстоящие уведомления GATT, ознакомьтесь с примером «[Как прочитать измененное значение характеристики](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html)».
+
+```js
+…
+.then(characteristic => {
+  // Настраиваем прослушиватель событий для измененного значения характеристики.
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Считываем заряд батареи…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Уровень заряда: ' + batteryLevel);
+}
+```
+
+### Запись в характеристику Bluetooth {: #write }
+
+Записать значение в характеристику Bluetooth GATT так же просто, как ее прочитать. На этот раз давайте воспользуемся точкой контроля частоты пульса, чтобы сбросить значение поля «Расход энергии» на 0 на пульсометре.
+
+Вот увидите, ничего магического здесь нет. Все объясняется на [странице характеристик контрольной точки пульса](https://www.bluetooth.com/specifications/gatt/).
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // Запись 1 сигнализирует о том, что нужно сбросить энергозатраты.
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Расход энергии был сброшен.');
+})
+.catch(error => { console.error(error); });
+```
+
+### Получение уведомлений GATT {: #notifications }
+
+Теперь давайте посмотрим, как получить уведомление при изменении характеристики [измерения пульса](https://www.bluetooth.com/specifications/gatt/) на устройстве:
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Уведомления запущены.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Получено ' + value);
+  // Сделать: парсинг значения пульса.
+  // См. https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
+}
+```
+
+[Пример уведомлений](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) показывает, как отключить уведомления со `stopNotifications()` и правильно удалить добавленный прослушиватель событий `characteristicvaluechanged`.
+
+### Отключение от устройства Bluetooth {: #disconnect }
+
+Чтобы улучшить взаимодействие с пользователем, вы можете прослушивать события отключения и предлагать пользователю повторно подключиться:
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // Настраиваем прослушиватель событий для отключения устройства.
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // Попытка соединения с удаленным сервером GATT.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Устройство ${device.name} отключено.`);
+}
+```
+
+Также можно вызвать `device.gatt.disconnect()`, чтобы отключить веб-приложение от устройства Bluetooth. Это запустит существующие прослушиватели событий `gattserverdisconnected`. Обратите внимание, что связь с Bluetooth-устройством не будет прекращена, если с ним уже взаимодействует другое приложение. Чтобы узнать больше, ознакомьтесь с [примером отключения устройства](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) и [примером автоматического повторного подключения](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html).
+
+{% Aside 'caution' %} Атрибуты Bluetooth GATT, службы, характеристики и т. д. становятся недействительными при отключении устройства. Это означает, что ваш код всегда должен извлекать (с помощью `getPrimaryService(s)`, `getCharacteristic(s)` и т. д.) эти атрибуты после повторного подключения. {% endAside %}
+
+### Чтение и запись дескрипторов Bluetooth {: #descriptors }
+
+Дескрипторы Bluetooth GATT — это атрибуты, которые описывают значение характеристики. Их можно читать и записывать аналогично характеристикам Bluetooth GATT.
+
+Давайте посмотрим, например, как читать пользовательское описание интервала измерения термометра.
+
+В приведенном ниже примере `health_thermometer` является [службой термометра](https://www.bluetooth.com/specifications/gatt/), `measurement_interval` — [характеристикой интервала измерения](https://www.bluetooth.com/specifications/gatt/), а `gatt.characteristic_user_description` — [дескриптором пользовательского описания характеристики](https://www.bluetooth.com/specifications/assigned-numbers/).
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`Пользовательское описание: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+Теперь, когда мы прочитали пользовательское описание интервала измерения термометра, давайте посмотрим, как его обновить и записать пользовательское значение.
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Определяет время между измерениями.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## Примеры, демонстрации и кодовые лаборатории
+
+Все приведенные ниже [примеры Web Bluetooth](https://googlechrome.github.io/samples/web-bluetooth/index.html) были успешно протестированы. Чтобы как следует оценить эти примеры, я рекомендую установить [Android-приложение BLE Peripheral Simulator](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral), которое имитирует периферийное BLE-устройство с помощью службы батареи, службы сердечного ритма или службы термометра.
+
+### Для начинающих
+
+- [Информация об устройстве](https://googlechrome.github.io/samples/web-bluetooth/device-info.html) — получение основной информации об устройстве с BLE-устройства.
+- [Уровень заряда батареи](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html) — получение информации о батарее с BLE-устройства, выдающего соответствующие оповещения.
+- [Сброс энергии](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html) — сброс энергии, израсходованной BLE-устройством, оповещающим о частоте сердечных сокращений.
+- [Свойства характеристики](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html) — отображение всех свойств определенной характеристики с BLE-устройства.
+- [Уведомления](https://googlechrome.github.io/samples/web-bluetooth/notifications.html) — запуск и остановка уведомлений характеристики BLE-устройства.
+- [Отключение устройства](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html) — отключение и получение уведомления об отключении BLE-устройства после подключения к нему.
+- [Получение характеристик](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html) — получение всех характеристик объявляемой службы с BLE-устройства.
+- [Получение дескрипторов](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html) — получение дескрипторов всех характеристик объявляемой службы с BLE-устройства.
+- [Фильтр данных производителя](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html) — получение основной информации об устройстве с BLE-устройства, которое соответствует данным производителя.
+
+### Объединение нескольких операций
+
+- [Характеристики GAP](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html) — получение всех характеристик GAP BLE-устройства.
+- [Характеристики информации об устройстве](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html) — получение всех характеристик информации об устройстве для BLE-устройства.
+- [Потеря соединения (Link Loss)](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html) — установка характеристики уровня оповещений (Alert Level) для BLE-устройства (readValue и writeValue).
+- [Сведения о службах и характеристиках](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html) — получение информации обо всех доступных первичных службах и их характеристиках с BLE-устройства.
+- [Автоматическое повторное подключение](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html) — повторное подключение к отключенному BLE-устройству с использованием алгоритма экспоненциальной задержки.
+- [Чтение измененного значения характеристики](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html) — считывание уровня заряда батареи и получение уведомлений об изменениях с BLE-устройства.
+- [Чтение дескрипторов](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html) — чтение дескрипторов всех характеристик службы с BLE-устройства.
+- [Запись дескриптора](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html) — запись в дескриптор «Пользовательское описание характеристики» на BLE-устройстве.
+
+Также ознакомьтесь с нашими [специально отобранными демонстрациями Web Bluetooth](https://github.com/WebBluetoothCG/demos) и [официальными кодовыми лабораториями Web Bluetooth](https://github.com/search?q=org%3Agooglecodelabs+bluetooth).
+
+## Библиотеки
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils) — это npm-модуль, который добавляет некоторые удобные функции в API.
+- Оболочка Web Bluetooth API доступна в [noble](https://github.com/sandeepmistry/noble), наиболее популярном Node.js-модуле BLE Central. Она позволяет упаковывать и просматривать noble без необходимости использования сервера WebSocket или других плагинов.
+- [angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) — это модуль для [Angular](https://angularjs.org), который абстрагирует весь стереотипный код, необходимый для настройки Web Bluetooth API.
+
+## Инструменты
+
+- [Начало работы с Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator) — простое веб-приложение, которое сгенерирует весь шаблонный код JavaScript для начала взаимодействия с Bluetooth-устройством. Введите имя устройства, службу, характеристику, определите его свойства, и все готово.
+- Если вы уже являетесь разработчиком Bluetooth, [плагин Web Bluetooth Developer Studio](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin) также сгенерирует код JavaScript Web Bluetooth для вашего Bluetooth-устройства.
+
+## Полезные советы
+
+Страница «**Внутренние устройства Bluetooth**» доступна в Chrome по адресу `about://bluetooth-internals`. Здесь вы можете проверить все, что связано с ближайшими Bluetooth-устройствами: состояние, службы, характеристики и дескрипторы.
+
+<figure>{% Img src="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt="Снимок экрана внутренней страницы для отладки Bluetooth в Chrome", width="800", height="572" %} <figcaption>Внутренняя страница в Chrome для отладки Bluetooth-устройств.</figcaption></figure>
+
+Также рекомендую ознакомиться с официальной страницей «[Как зарегистрировать ошибки Web Bluetooth](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs)», поскольку отладка Bluetooth порой может быть сложной.
+
+{% Aside 'caution' %} Параллельное чтение и запись характеристик Bluetooth может вызвать ошибки в зависимости от платформы. Я настоятельно рекомендую вручную ставить в очередь запросы операций GATT, когда это необходимо. См. «[Выполняется операция GATT — как ее обработать?](https://github.com/WebBluetoothCG/web-bluetooth/issues/188)». {% endAside %}
+
+## Что дальше
+
+Сначала проверьте [состояние реализации браузера и платформы](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md), чтобы узнать, какие части интерфейса Web Bluetooth API реализуются на данный момент.
+
+Интерфейс еще не завершен, но вот краткий анонс того, что ожидается в ближайшем будущем:
+
+- [Поиск ближайших объявлений BLE](https://github.com/WebBluetoothCG/web-bluetooth/pull/239) будет выполняться с помощью `navigator.bluetooth.requestLEScan()`.
+- Новое событие `serviceadded` будет отслеживать недавно обнаруженные службы Bluetooth GATT, в то время как событие `serviceremoved` будет отслеживать удаленные. Новое событие `servicechanged` будет срабатывать, когда какая-либо характеристика или дескриптор добавляются или удаляются из службы Bluetooth GATT.
+
+### Поддержите API
+
+Собираетесь использовать Web Bluetooth API? Ваша публичная поддержка помогает команде Chrome расставлять функции в порядке приоритетности и показывает другим поставщикам браузеров, насколько важно их поддерживать.
+
+Отправьте твит на [@ChromiumDev](https://twitter.com/ChromiumDev), используя хэштег [`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live) и расскажите нам, где и как вы его используете.
+
+## Ресурсы
+
+- Stack Overflow: [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Статус функции Chrome: [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Ошибки реализации Chrome: [https://crbug.com/?q=component:Blink&gt;Bluetooth.](https://crbug.com/?q=component:Blink%3EBluetooth)
+- Спецификация Web Bluetooth: [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- Ошибки в спецификации: [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- Приложение BLE Peripheral Simulator: [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ' %}
+
+## Благодарности
+
+Спасибо [Кэйси Баскесу](https://github.com/kaycebasques) за рецензирование этой статьи. Баннер предоставлен [SparkFun Electronics, Боулдер, США](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg).
diff --git a/src/site/content/ru/blog/building-a-sidenav-component/index.md b/src/site/content/ru/blog/building-a-sidenav-component/index.md
new file mode 100644
index 00000000000..a07809a6872
--- /dev/null
+++ b/src/site/content/ru/blog/building-a-sidenav-component/index.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: Создание компонента sidenav
+subhead: Фундаментальный обзор того, как создать адаптивный выдвигающийся компонент sidenav
+authors:
+  - adamargyle
+description: Фундаментальный обзор того, как создать адаптивный выдвигающийся компонент sidenav
+date: 2021-01-21
+hero: image/admin/Zo1KkESK9CfEIYpbWzap.jpg
+thumbnail: image/admin/pVZO6FsC9tF3H6QIWpY2.png
+codelabs: codelab-building-a-sidenav-component
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+В этой статье я хочу поделиться с вами своим способом создания адаптивной боковой панели навигации (sidenav), которая отслеживает состояние, поддерживает управление с клавиатуры, работает с JavaScript и без него и поддерживается разными браузерами. Попробуйте [демонстрацию](https://gui-challenges.web.app/sidenav/dist/).
+
+Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:
+
+{% YouTube 'uiZqDLqjGRY' %}
+
+## Обзор
+
+Создать адаптивную систему навигации непросто. Некоторые пользователи могут работать с помощью клавиатуры, одни при входе на сайт будут использовать мощный компьютер, другие — маленькое мобильное устройство. Но каждый из посетителей должен иметь возможность открыть и закрыть меню.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/desktop-demo-1080p.mp4">
+  </source></video>
+  <figcaption>Демонстрация адаптивности макета на десктопе и мобильных</figcaption></figure>
+
+<figure>
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gui-sidenav/mobile-demo-1080p.mp4">
+  </source></video>
+  <figcaption>Светлая и темная тема на iOS и Android</figcaption></figure>
+
+## Веб-подходы
+
+При исследовании этого компонента я совместил несколько важных концепций веб-разработки:
+
+1. CSS-псевдокласс [`:target`](#target-psuedo-class)
+2. CSS [Grid](#grid-stack)
+3. CSS-[трансформации](#transforms)
+4. CSS-медиазапросы для области просмотра и пользовательских предпочтений
+5. JS для [улучшения удобства использования](#ux-enhancements) `focus`
+
+В моем решении присутствует одна боковая панель, которая выдвигается только в «мобильной» области просмотра шириной `540px` или меньше. Размер `540px` будет нашей контрольной точкой для переключения между интерактивным макетом для мобильных и статическим для десктопов.
+
+### CSS-псевдокласс `:target` {: #target-pseudo-class }
+
+Одна ссылка `<a>` устанавливает в URL-хеш значение `#sidenav-open`, а вторая — пустое значение (`''`). У самого элемента имеется `id`, соответствующий этому хешу:
+
+```html
+<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
+
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<aside id="sidenav-open">
+  …
+</aside>
+```
+
+Нажатие на каждую из этих ссылок изменяет хеш-состояние URL-адреса нашей страницы, а затем с помощью псевдокласса мы показываем и скрываем боковую навигацию:
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+  }
+
+  #sidenav-open:target {
+    visibility: visible;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/hash-change.mp4">
+  </source></video></figure>
+
+### CSS Grid {: #grid-stacks }
+
+Раньше для боковой панели я использовал только макеты и компоненты с абсолютным или фиксированным позиционированием. Технология CSS Grid, однако, с ее синтаксисом `grid-area` позволяет нам назначать несколько элементов одной строке или столбцу.
+
+#### Стопки
+
+Основной элемент макета `#sidenav-container` представляет собой grid-элемент, который создает 1 строку и 2 столбца, 1 из которых получает имя `stack`. Когда пространство ограничено, CSS присваивает всем потомкам элемента `<main>` одно и то же значение grid-области, размещая все элементы в одну и ту же ячейку в виде стопки.
+
+```css
+#sidenav-container {
+  display: grid;
+  grid: [stack] 1fr / min-content [stack] 1fr;
+  min-height: 100vh;
+}
+
+@media (max-width: 540px) {
+  #sidenav-container > * {
+    grid-area: stack;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/responsive-stack-demo-1080p.mp4">
+  </source></video></figure>
+
+#### Фон меню
+
+`<aside>` — это анимированный элемент, содержащий боковую навигацию. У него есть два дочерних элемента: контейнер навигации `<nav>` с именем `[nav]` и фон `<a>` с именем `[escape]`, который используется для закрытия меню.
+
+```css
+#sidenav-open {
+  display: grid;
+  grid-template-columns: [nav] 2fr [escape] 1fr;
+}
+```
+
+Изменяя значения `2fr` и `1fr`, можно найти нужное вам соотношение между панелью и кнопкой закрытия на вспомогательном пространстве при открытом боковом меню.
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/overlay-escape-ratio.mp4">
+  </source></video>
+  <figcaption>Демонстрация того, что происходит при изменении соотношения.</figcaption></figure>
+
+### CSS 3D-преобразования и переходы {: #transforms }
+
+Теперь наш макет умещается и в размер мобильной области просмотра. Пока я не добавлю несколько новых стилей, боковая панель по умолчанию будет накладываться на нашу статью. Вот функционал, к которому я стремлюсь в следующем разделе:
+
+- Анимированное открытие и закрытие
+- Анимация только в том случае, если пользователь ее не отключает
+- Анимирование `visibility`, чтобы фокус клавиатуры не выходил за пределы экрана
+
+Поскольку я приступаю к реализации анимированного движения, в первую очередь давайте начнем с доступности.
+
+#### Доступная анимация
+
+Не всем захочется видеть анимацию выдвигающегося меню. В нашем решении предпочтение пользователя применяется путем настройки CSS-переменной `--duration` внутри медиазапроса. Значение этого медиазапроса представляет предпочтения операционной системы пользователя в отношении анимации (если они доступны).
+
+```css
+#sidenav-open {
+  --duration: .6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidenav-open {
+    --duration: 1ms;
+  }
+}
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/prefers-reduced-motion.mp4">
+  </source></video>
+  <figcaption>Демонстрация работы интерфейса с разными настройками длительности анимации</figcaption></figure>
+
+Теперь, когда наша боковая навигация открывается и закрывается, если пользователь предпочитает ограничить анимацию, я мгновенно перемещаю элемент в область просмотра, поддерживая тем временем состояние без движения.
+
+#### Переход, трансформация, трансляция
+
+##### Боковая панель закрыта (по умолчанию)
+
+Чтобы на мобильных устройствах наша панель боковой навигации по умолчанию находилась за пределами экрана, я позиционирую элемент с помощью `transform: translateX(-110vw)`.
+
+Обратите внимание, я добавил еще `10vw` к типичному закадровому коду `-100vw`, чтобы гарантировать, что тень `box-shadow` блока боковой навигации не видна в основной области просмотра, когда панель скрыта.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open {
+    visibility: hidden;
+    transform: translateX(-110vw);
+    will-change: transform;
+    transition:
+      transform var(--duration) var(--easeOutExpo),
+      visibility 0s linear var(--duration);
+  }
+}
+```
+
+##### Панель открыта
+
+Когда элемент `#sidenav` соответствует псевдоклассу `:target`, установите позиционирование с помощью `translateX()` в стандартное значение `0` и посмотрите, как CSS при изменении URL-хеша сместит элемент с его исходной позиции `-110vw` в позицию «открыто», равную `0`, в течение времени, установленного в переменной `var(--duration)`.
+
+```css
+@media (max-width: 540px) {
+  #sidenav-open:target {
+    visibility: visible;
+    transform: translateX(0);
+    transition:
+      transform var(--duration) var(--easeOutExpo);
+  }
+}
+```
+
+#### Переход свойства visibility
+
+Теперь, когда панель находится за пределами области просмотра, ее нужно скрыть от программ чтения с экрана, чтобы они не переводили фокус на элементы закадрового меню. Я реализовал это с помощью перехода свойства visibility при смене псевдокласса `:target` .
+
+- При открытии применять переход не нужно; сразу видимая панель должна выезжать из-за пределов экрана и получать фокус.
+- При закрытии для свойства visibility нужно применить переход, но с задержкой, чтобы панель стала невидимой (`hidden`) в конце перехода.
+
+### Улучшения доступности {: #ux-enhancements }
+
+#### Ссылки
+
+Это решение основывается на изменении URL-адреса для управления состоянием панели. Естественно, здесь нужно использовать элемент `<a>`, который имеет некоторые преимущества в плане доступности. Давайте дополним наши интерактивные элементы ярлыками, четко отражающими их назначение.
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
+
+<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
+  <svg>...</svg>
+</a>
+```
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/keyboard-voiceover.mp4">
+  </source></video>
+  <figcaption>Демонстрация озвучивания и взаимодействия с клавиатурой.</figcaption></figure>
+
+Теперь наши основные кнопки взаимодействия содержат четкое обозначение для пользователей как мыши, так и клавиатуры.
+
+#### `:is(:hover, :focus)`
+
+Этот удобный функциональный псевдоселектор CSS позволяет нам задать стили одновременно для состояний hover и focus.
+
+```css
+.hamburger:is(:hover, :focus) svg > line {
+  stroke: hsl(var(--brandHSL));
+}
+```
+
+#### Добавление JavaScript
+
+##### `escape` для закрытия
+
+Кнопка `Escape` на клавиатуре должна закрывать меню, верно? Давайте это реализуем.
+
+```js
+const sidenav = document.querySelector('#sidenav-open');
+
+sidenav.addEventListener('keyup', event => {
+  if (event.code === 'Escape') document.location.hash = '';
+});
+```
+
+##### История браузера
+
+Чтобы каждое открытие и закрытие панели не создавало отдельную запись в истории браузера, добавьте следующий встроенный JavaScript-код для кнопки закрытия:
+
+```html
+<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>
+```
+
+Это приведет к удалению записи истории URL-адресов при закрытии панели, как если бы меню никогда не открывалось.
+
+##### Фокус
+
+Следующий фрагмент помогает нам поместить фокус на кнопки открытия и закрытия при соответствующем действии панели. Я хочу упростить переключение.
+
+```js
+sidenav.addEventListener('transitionend', e => {
+  const isOpen = document.location.hash === '#sidenav-open';
+
+  isOpen
+      ? document.querySelector('#sidenav-close').focus()
+      : document.querySelector('#sidenav-button').focus();
+})
+```
+
+Когда боковая панель открывается, фокус попадает на кнопку закрытия. Когда же панель закрывается, фокус попадает на кнопку открытия. Я делаю это с помощью JavaScript, вызывая `focus()` для элемента.
+
+### Заключение
+
+Теперь вы знаете о моем подходе в реализации этого компонента. Как бы его реализовали вы? Тут есть пространство для творчества. Кто же сделает первую версию со слотами? 🙂
+
+Давайте разнообразим наши подходы и найдем все способы создания компонентов. Создайте демонстрацию на [Glitch](https://glitch.com), напишите мне о своей версии в [Твиттере](https://twitter.com/argyleink), и я добавлю ее в раздел [ремиксов сообщества](#community-remixes) ниже.
+
+## Ремиксы сообщества
+
+- [@_developit](https://twitter.com/_developit) с настраиваемыми элементами: [демонстрация и код](https://glitch.com/edit/#!/app-drawer)
+- [@mayeedwin1](https://twitter.com/mayeedwin1) с HTML/CSS/JS: [демонстрация и код](https://glitch.com/edit/#!/maye-gui-challenge)
+- [@a_nurella](https://twitter.com/a_nurella) с ремиксом на Glitch: [демонстрация и код](https://glitch.com/edit/#!/sidenav-with-adam)
+- [@EvroMalarkey](https://twitter.com/EvroMalarkey) с HTML/CSS/JS: [демонстрация и код](https://evromalarkey.github.io/scrollsnap-drawer/index.html)
diff --git a/src/site/content/ru/blog/building-a-tabs-component/index.md b/src/site/content/ru/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..9648acb0ab5
--- /dev/null
+++ b/src/site/content/ru/blog/building-a-tabs-component/index.md
@@ -0,0 +1,633 @@
+---
+layout: post
+title: Создание компонента вкладок
+subhead: Общий обзор подхода к созданию компонента вкладок, аналогичного используемым в приложениях для iOS и Android.
+authors:
+  - adamargyle
+description: Общий обзор подхода к созданию компонента вкладок, аналогичного используемым в приложениях для iOS и Android.
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+В этой статье я хочу поделиться своими мыслями о создании компонента вкладок для веб-сайтов, который будет адаптивным и совместимым с различными устройствами и браузерами. Посмотрите [демопример](https://gui-challenges.web.app/tabs/dist/).
+
+<figure data-size="full">   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4",     autoplay="true",     loop="true",     muted="true"   %}   <figcaption>     <a href="https://gui-challenges.web.app/tabs/dist/">Демопример</a>   </figcaption></figure>
+
+Если вы предпочитаете видео, вот версия этой статьи на YouTube:
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## Обзор
+
+Вкладки — стандартный компонент систем дизайна, но они могут быть разных видов и форм. Первыми были вкладки для ПК, построенные на элементе `<frame>`, теперь же у нас есть красивые мобильные компоненты с анимацией на основе «физических» свойств. Но задача у них всех одна: сэкономить место.
+
+Сегодня основной элемент взаимодействия с вкладками — область навигации с кнопками, которые переключают видимость контента в отображаемом фрейме. Различные области контента занимают одно и то же пространство, но отображаются условно в зависимости от кнопки, выбранной в элементе навигации.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png",     alt="Коллаж довольно хаотичный из-за огромного разнообразия стилей, которые применяются в веб-дизайне к концепции этого компонента",     width="800", height="500"   %}   <figcaption>     Коллаж, представляющий различные стили компонента вкладок в веб-дизайне за последние 10 лет   </figcaption></figure>
+
+## Реализация на веб-платформе
+
+В целом, сделать такой компонент оказалось довольно просто — благодаря нескольким важным функциям веб-платформы:
+
+- `scroll-snap-points` — взаимодействие жестами и с помощью клавиатуры, а также правильные позиции остановки прокрутки;
+- [ссылки на контент](https://en.wikipedia.org/wiki/Deep_linking) посредством URL-хешей — поддержка встроенной прокрутки в браузере и передачи ссылок;
+- поддержка программ чтения с экрана: разметка элементами `<a>` и `id="#hash"`;
+- `prefers-reduced-motion` — плавные переходы и мгновенная прокрутка внутри страницы;
+- предложенная функция `@scroll-timeline` для динамического подчеркивания и изменения цвета выбранной вкладки.
+
+### HTML-код {: #markup }
+
+Принцип работы здесь такой: нажимаем ссылку, в которой URL-адрес представляет состояние вложенной страницы, а затем обновляем область контента, пока браузер прокручивает до соответствующего элемента.
+
+У нас используются элементы структурного контента: ссылки и `:target`. Нам нужен список ссылок (для чего отлично подходит `<nav>`) и список элементов `<article>` (здесь подходит `<section>`). Каждому хешу ссылки будет соответствовать <code>section</code>, поэтому браузер сможет делать прокрутку по ссылке.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4",     autoplay="true",     loop="true",     muted="true"   %}   <figcaption>     При нажатии кнопки с ссылкой меняется контент в фокусе   </figcaption></figure>
+
+Например, в Chrome 89 при нажатии на ссылку фокус автоматически переключается на `article`-элемент <code>:target</code> — и не нужно ничего писать на JS. Пользователь может прокрутить содержимое <code>article</code> обычным образом с помощью имеющегося устройства ввода. Это дополнительный контент, как указано в разметке.
+
+Например, в Chrome 89 при нажатии на ссылку фокус автоматически переключается на <code>article</code>-элемент <code>:target</code> — и не нужно ничего писать на JS. Пользователь может прокрутить содержимое <code>article</code> обычным образом с помощью имеющегося устройства ввода. Это дополнительный контент, как указано в разметке.
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+Установить связь между элементами `<a>` и `<article>` можно с помощью свойств `href`и `id` следующим образом:
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+Затем я заполнил каждый <code>article</code> различным количеством «рыбы», а ссылки — заголовками различной длины с изображениями для заголовков. Контент у нас есть — можно приступать к работе над макетом.
+
+### Макеты с прокруткой {: #overscroll }
+
+В этом компоненте есть области прокрутки трех типов:
+
+- Блок навигации <b style="color: #FF00E2;">(розовый цвет)</b> использует горизонтальную прокрутку.
+- Область контента <b style="color: #008CFF;">(синий цвет)</b> также использует горизонтальную прокрутку.
+- Элементы <code>article</code> <b>(зеленый цвет)</b> используют вертикальную прокрутку.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png",     alt="Три цветных прямоугольника со стрелками соответствующего цвета, которые указывают область и направление прокрутки",     width="800", height="450"   %}</figure>
+
+При прокрутке используются элементы двух типов:
+
+1. **Окно.** <br>Прямоугольник с заданными размерами и стилем свойства `overflow`.
+2. **Безразмерная поверхность.** <br>В этом макете это списочные контейнеры: ссылки <code>nav</code>, элементы <code>article</code> в разделах <code>section</code> и содержимое <code>article</code>.
+
+#### Макет для `<snap-tabs>` {: #tabs-layout }
+
+В качестве макета верхнего уровня я выбрал `flex` (адаптируемый блок) с направлением <code>column</code> — чтобы заголовок и <code>section</code> располагались вертикально. Это первое окно прокрутки; оно скрывает всё с помощью <code>overflow: hidden</code>. Заголовок и и <code>section</code> будут использовать прокрутку за границы в виде отдельных зон.
+
+{% Compare 'better', 'HTML' %}
+
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* устанавливаем первичный контейнер */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* указываем использовать всё место */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* защита от случая, когда <section> требует 100 % */
+    flex-shrink: 0;
+    /* учет особенностей различных браузеров */
+    min-block-size: fit-content;
+  }
+}
+```
+
+{% endCompare %}
+
+Возвращаясь к разноцветной схеме с тремя областями прокрутки:
+
+- Элемент `<header>` теперь готов стать <b style="color: #FF00E2;">розовым</b> контейнером прокрутки.
+- Элемент `<section>` готов стать <b style="color: #008CFF;">синим</b> контейнером прокрутки.
+
+Фреймы, которые я выделил ниже с помощью [VisBug](https://a.nerdy.dev/gimme-visbug), помогают увидеть **окна**, созданные контейнерами прокрутки.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png",     alt="Элементы «header» и «section» помечены ярко-розовыми ярлыками и выделены рамкой, ограничивающей место, которое они занимают в компоненте",     width="800", height="620"   %}</figure>
+
+#### Макет для `<header>` {: #tabs-header }
+
+Следующий макет почти такой же: я создаю вертикальную упорядоченную структуру с помощью <code>flex</code>.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<snap-tabs>
+  <header>
+    <nav></nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css/1-2
+header {
+  display: flex;
+  flex-direction: column;
+}
+```
+{% endCompare %}
+</div>
+
+Элемент `.snap-indicator` должен перемещаться горизонтально вместе с группой ссылок, и такой макет для <code>header</code> позволяет этого добиться. Ни одного элемента с абсолютным размещением!
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png",     alt="Элементы «nav» и «span.indicator» помечены ярко-розовыми ярлыками и выделены рамкой, ограничивающей место, которое они занимают в компоненте",     width="800", height="368"   %}</figure>
+
+Далее — стили прокрутки. Оказывается, один стиль можно использовать в двух областях горизонтальной прокрутки (`header` и <code>section</code>), поэтому я сделал вспомогательный класс: <code>.scroll-snap-x</code>.
+
+```css
+.scroll-snap-x {
+  /* браузер решает, можно ли прокручивать и отображать полосы по X, Y скрыто */
+  overflow: auto hidden;
+  /* не даем создать цепочку прокрутки по X */
+  overscroll-behavior-x: contain;
+  /* прокрутка должна привязываться к дочернему элементу по X */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+В каждом случае нужен <code>overflow</code> по оси x, <code>contain</code> для захвата выхода за границы прокрутки, скрытые полосы прокрутки для сенсорных устройств и, наконец, <code>scroll-snap</code> для фиксации областей показа контента. Удобный порядок вкладок при использовании клавиатуры позволяет переключать фокус естественный образом. У контейнеров <code>scroll-snap</code> красивый «карусельный» стиль взаимодействия при использовании с клавиатуры.
+
+#### Макет для `<nav>` в заголовке {: #tabs-header-nav }
+
+Ссылки <code>nav</code> должны располагаться строкой, без разрывов строк, с центрированием по вертикали, причем каждый элемент ссылки должен привязываться к контейнеру <code>scroll-snap</code>. CSS 2021 отлично с этим справляется!
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+nav {
+  display: flex;
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+```
+{% endCompare %}
+</div>
+
+Стили и размеры ссылок задаются автоматически, поэтому в макете <code>nav</code> нужно указать только направление и структуру наполнения — <code>flow</code>. Благодаря различной ширине элементов <code>nav</code> за переходом между вкладками интересно наблюдать: ширина индикатора подстраивается к новой цели. Отображение полосы прокрутки браузером будет зависеть от количества элементов.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png",     alt="Элементы «nav» помечены ярко-розовыми ярлыками, выделены рамкой, указывающей место, которое они занимают в компоненте, и снабжены стрелкой для направления развертывания",     width="800", height="327"   %}</figure>
+
+#### Макет для `<section>` {: #tabs-section }
+
+Этот раздел представляет собой элемент `flex` и должен быть основным потребителем места. Ему также необходимо создать столбцы для размещения статей. И CSS 2021 снова отлично справляется с задачей! С помощью `block-size: 100%` элемент растягивается на весь родительский объект, а затем для собственного макета создает несколько столбцов с шириной, равной <code>100%</code> родительского объекта. Здесь проценты использовать удобно, поскольку для «родителя» мы указали строгие ограничения.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<section>
+  <article></article>
+  <article></article>
+  <article></article>
+  <article></article>
+</section>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+```
+{% endCompare %}
+</div>
+
+Это можно перевести как «расширять по вертикали, насколько это возможно» (вспомните заголовок, для которого мы установили на `flex-shrink: 0`: это защита от такого принудительного расширения). Так мы устанавливаем высоту строки для столбцов полной высоты. При этом стиль `auto-flow` указывает сетке всегда располагать дочерние элементы в горизонтальную линию, без переноса (как нам и нужно), что позволяет заполнить родительское окно с выходом за его границы.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png",     alt="Элементы «article» помечены ярко-розовыми ярлыками, выделены рамкой, указывающей место, которое они занимают в компоненте, и снабжены стрелкой для направления развертывания",     width="800", height="512"   %}</figure>
+
+Иногда мне бывает трудно понять, что к чему! Этот элемент <code>section</code> вписан в прямоугольник, но при этом также создает набор прямоугольников. Надеюсь, рисунки и текст помогут вам разобраться.
+
+#### Макет для `<article>` {: #tabs-article }
+
+Пользователю необходимо дать возможность прокручивать содержимое <code>article</code>, причем полосы прокрутки должны появляются только при переполнении. Эти элементы <code>article</code> находятся в интересном состоянии: они одновременно являются и родительскими, и дочерними элементами прокрутки. Браузер сам обрабатывает разнообразные взаимодействия с сенсорным экраном, мышью и клавиатурой, так что нам об этом беспокоиться не нужно.
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html
+<article>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  ...
+</article>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+```
+{% endCompare %}
+</div>
+
+Я решил, что <code>article</code> будут привязаны к их родительскому компоненту прокрутки. Мне нравится, что элементы <code>link</code> навигации и элементы <code>article</code> привязываются к началу соответствующих контейнеров прокрутки: создается ощущение гармоничных взаимоотношений.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png",     alt="Элемент «article» и его дочерние элементы помечены ярко-розовыми ярлыками, выделены рамкой, указывающей место, которое они занимают в компоненте, и снабжены стрелкой для направления развертывания",     width="800", height="808"   %}</figure>
+
+Элемент <code>article</code> является дочерней сеткой, причем ее размер предопределен как область просмотра, в которой нам нужна прокрутка. Это означает, что стили высота и ширины здесь не нужны — достаточно определить переполнение. Для <code>overflow-y</code> я задаю <code>auto</code>, а затем захватываю взаимодействие прокрутки с помощью удобного свойства <code>overscroll-behavior</code>.
+
+#### Резюме по трем областям прокрутки {: #scroll-areas-recap }
+
+Ниже в настройках системы у меня выбрано «всегда показывать полосы прокрутки». Мне кажется важным сделать так, что макет работал, когда этот параметр включен: это позволяет проверить макет и оркестровку прокрутки.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png",     alt="Включен показ трех полос прокрутки. Они занимают место в макете, но наш компонент по-прежнему выглядит отлично",     width="500", height="607"   %}</figure>
+
+Я думаю, что наличие контейнера для полос прокрутки в этом компоненте помогает четко показать, где находятся области прокрутки, в каком направлении они работают и как взаимодействуют друг с другом. Каждый из этих фреймов окна прокрутки также является родительским элементом <code>flex</code> или <code>grid</code> по отношению к макету.
+
+DevTools помогают визуализировать структуру и поведение макета:
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png",     alt="Области прокрутки с обозначением инструментов `grid` и `flex`, указывающим место, которое они занимают в компоненте, и направление развертывания",     width="800", height="455"   %}   <figcaption>     Chromium DevTools: макет для элемента `nav` адаптируемого блока, содержащий элементы со ссылками,     макет `section` в виде сетки с элементами `article`, а также элементы `article`     с абзацами и элементами заголовков.   </figcaption></figure>
+
+Макеты прокрутки готовы: с привязкой, ссылками на контент и возможностью использования с клавиатуры. Прочная основа для улучшения удобства использования, стиля и отличная возможность насладиться результатом.
+
+#### О функциях
+
+Дочерние элементы с привязкой к прокрутке сохраняют зафиксированное положение при изменении размера. Это означает, что коду JavaScript не нужно ничего отображать при повороте устройства или изменении размера браузера. Перейдите в [Режим устройства](https://developer.chrome.com/docs/devtools/device-mode/) (Device Mode) в Chromium DevTools и выберите любой режим, кроме **отзывчивого** (Responsive), а затем измените размер фрейма устройства. Элемент остается в поле зрения и фиксируется вместе с содержимым. Эта функция работает так с того момента, как Chromium обновил реализацию в соответствии со спецификацией. Можете почитать [запись в блоге](/snap-after-layout/) об этом.
+
+### Анимация {: #animation }
+
+Цель анимации здесь — четко связать работу ссылок с откликом интерфейса. Так мы поможем пользователю с удобством (надеюсь) просмотреть весь контент. Я буду добавлять анимацию движения с определенной целью и и условиями. Надо помнить, что пользователи могут задавать [предпочтения по движению](/prefers-reduced-motion/) в операционной системе, и я с удовольствием учитываю их в проектируемых мной интерфейсах.
+
+Я свяжу подчеркивание вкладки с положением прокрутки элемента `article`. Привязка обеспечивает не только красивое выравнивание, но и соотнесение с началом и окончанием анимации. Это позволяет элементу <code>&lt;nav&gt;</code>, который действует как <a>мини-карта</a>, не терять связь с контентом. Предпочтения пользователя по движению будем проверять и с помощью CSS, и с помощью JS. В некоторых местах придется проявить особую внимательность!
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+#### Поведение прокрутки {: #scroll-behavior }
+
+Мы можем улучшить поведение `:target` и `element.scrollIntoView()`. По умолчанию переход мгновенный: браузер просто устанавливает положение прокрутки. Допустим, мы хотим сделать переход в положение прокрутки не мгновенным.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+Поскольку у нас здесь появляется движение — причем такое, которое пользователь не контролирует (прокрутка), мы применяем этот стиль, только  если у пользователя в операционной системе не заданы предпочтения по ограничению отображаемого движения. То есть, мы анимируем прокрутку только для тех пользователей, которые не против этого.
+
+#### Индикатор вкладок {: #tabs-indicator }
+
+Цель этой анимации — связать индикатор с состоянием контента. Для пользователей, предпочитающих ограничение движения, я решил делать переход цвета в стилях `border-bottom`, а для остальных — связанный с прокруткой сдвиг и анимацию смены цвета.
+
+Переключая это предпочтение в Chromium DevTools, я демонстрирую оба стиля переходов. Работать над ними было очень интересно!
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+Если пользователь хочет видеть меньше движения, я скрываю `.snap-indicator`, поскольку этот элемент становится не нужен. Вместо него я использую стили `border-block-end` и `transition`. Также обратите внимание на взаимодействие вкладок: активный элемент <code>nav</code> выделяется не только подчеркиванием, но и более тёмным цветом текста. У активного элемента более высокий цветовой контраст текста и яркий акцент подчеркивания.
+
+Всего пара строк CSS-кода — и мы позаботились о каждом (в том смысле, что учитываем предпочтения пользователей по движению на странице). Мне нравится.
+
+#### `@scroll-timeline` {: #scroll-timeline }
+
+Выше я показал, как работаю со стилями плавного перехода, когда нужно ограничить движение. В этом разделе я покажу, как связать индикатор и область прокрутки. Далее будет несколько интересных экспериментов — надеюсь, вы сгораете от нетерпения.
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+Сначала я с помощью JavaScript проверяю предпочтения пользователя по движению. Если результат — `false` (пользователь хочет видеть меньше движения), тогда мы не будем запускать эффекты привязки прокрутки.
+
+```js
+if (motionOK) {
+  // код анимации с использованием движения
+}
+```
+
+На момент написания статьи [поддержки `@scroll-timeline` в браузерах](https://caniuse.com/css-scroll-timeline) нет. Функция пребывает в виде [черновой спецификации](https://drafts.csswg.org/scroll-animations-1/) — есть только экспериментальные реализации. Однако для нее есть полифил, который я и применяю в этой демонстрации.
+
+##### ` ScrollTimeline`
+
+И CSS, и JavaScript позволяют делать <code>ScrollTimeline</code> для прокрутки, однако я выбрал JavaScript — чтобы использовать в анимации актуальные размеры элементов.
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // прокрутка в направлении потока букв
+  fill: 'both',              // двунаправленное связывание
+});
+```
+
+Я хочу, чтобы один элемент следовал за положением прокрутки другого. Создав `ScrollTimeline`, я определяю ведущий элемент для связки с прокруткой — `scrollSource`. Обычно анимация в веб-дизайне запускается в соответствии с глобальным тиком интервала времени, но с помощью `sectionScrollTimeline` это можно изменить.
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+Прежде чем я перейду к ключевым кадрам анимации, думаю, важно упомянуть, что ведомый элемент прокрутки — `tabindicator` — будет анимироваться по специальной временной шкале — прокрутке нашего <code>section</code>. Здесь мы заканчиваем привязку, но у нас отсутствует последний ингредиент — точки с отслеживанием состояния, между которыми происходит анимация. Их еще называют ключевыми кадрами.
+
+#### Динамические ключевые кадры
+
+Есть, конечно, очень мощный чисто декларативный способ делать анимацию в CSS с помощью `@scroll-timeline`, но нужная мне анимация была слишком динамичной. CSS не позволяет делать переход между шириной со значением `auto` и динамически создавать ключевые кадры в зависимости от длины дочерних элементов.
+
+Однако получить эту информацию можно с помощью JavaScript. Поэтому мы будем проходить по дочерним элементам сами и захватывать вычисленные значения во время выполнения кода:
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+Для каждого `tabnavitem` деструктурируем положение `offsetLeft` и возвращаем строку, которая использует его как значение `translateX`. Так мы получаем четыре ключевых кадра преобразования для анимации. То же делаем и с шириной: запрашиваем ее у каждого элемента и используем как значение ключевого кадра.
+
+Вот пример вывода с моими шрифтами и настройками браузера:
+
+Ключевые кадры <code>translateX</code>:
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// возвращает четыре элемента массива, представляющие собой четыре состояния ключевых кадров
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+Ключевые кадры ширины:
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// возвращает четыре элемента массива, представляющие собой четыре состояния ключевых кадров
+// ["121px", "117px", "226px", "67px"]
+```
+
+Стратегия вкратце: индикатор вкладки будет анимироваться по четырем ключевым кадрам в зависимости от положения <code>scroll-snap</code> компонента прокрутки <code>section</code>. Точки привязки задают четкое разграничение между ключевыми кадрами и делают анимацию более синхронной по ощущениям.
+
+<figure>   {% Img     src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png",     alt="Активная и неактивная вкладки с оверлеями VisBug, которые показывают оценку контрастности и соответствие требованиям для них",     width="540", height="400"   %}</figure>
+
+Пользователь управляет анимацией своими действиями и видит, как ширина и положение индикатора меняются от одного <code>section</code> к другому, в точности следуя за прокруткой.
+
+Возможно, вы не заметили, но я очень горжусь тем, как получилось сделать переход цвета при выборе выделенного элемента навигации.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+Невыбранный элемент светло-серого цвета становится еще менее выразительным в сравнении с более контрастным выделенным. Обычно меняют цвет текста — например, при наведении курсора и выделении, — а вот делать переход цвета при прокрутке синхронно с индикатором подчеркивания — это уже следующий уровень.
+
+Как это делается:
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+Для каждой ссылки <code>nav</code> на вкладке нужна новая анимация цвета по той же временно́й шкале, что и у индикатора подчеркивания. Я использую ту же временну́ю шкалу, что и раньше: ее задача — выдавать при прокрутке тик, поэтому мы можем использовать его в анимации любого нужного нам типа. Как и раньше, я создаю четыре ключевых кадра в цикле и получаю цвета.
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// возвращает четыре элемента массива, представляющие собой четыре состояния ключевых кадров
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+Ключевой кадр с цветом `var(--text-active-color)` выделяет ссылку. В остальных случаях это стандартный цвет текста. Вложенный цикл делает процедуру вполне понятной: внешний цикл — это каждый элемент навигации, а внутренний — это их ключевые кадры. Я проверяю, совпадает ли элемент внешнего цикла с элементом внутреннего цикла и таким образом узнаю, когда он выбран.
+
+Писать этот код — одно удовольствие.
+
+### Как еще улучшить наш JavaScript {: #js }
+
+Напомню: то, что я здесь показываю, в основе своей работает и без JavaScript. Однако давайте посмотрим, что можно улучшить, используя JS.
+
+#### Ссылки на контент
+
+Ссылки на контент — это скорее мобильный термин, но, думаю, что их цели вполне соответствует случай, когда URL-адрес передается непосредственно в содержимое вкладки. Браузер будет переходить на странице к идентификатору, совпадающим с хешем URL. Я обнаружил, что этот обработчик `onload` действует на всех платформах.
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### Синхронизация с окончанием прокрутки
+
+Пользователи не всегда будут нажимать на вкладки или использовать клавиатуру — иногда они просто будут использовать прокрутку. Когда компонент прокрутки в <code>section</code> останавливается, его положение должно совпадать с состоянием верхней панели навигации.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+Так мы ожидаем окончания прокрутки:
+
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+Каждый раз при прокрутке элементов <code>section</code> мы сбрасываем время ожидания (если оно есть) и начинаем новый отсчет. Когда прокрутка элемента <code>section</code> останавливается, мы не сбрасываем время ожидания, а запускаем отсчет 100 мс с момента начала бездействия. По окончании отсчета вызываем функцию, которая определяет, где пользователь остановился.
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+Поскольку у нас прокрутка с привязкой, то, разделив текущее положение прокрутки на ширину области прокрутки, мы должны получить целое, а не десятичное число. Затем я пытаюсь взять <code>navitem</code> из кеша с помощью вычисленного здесь индекса, и, если подходящий находится, делаю его активным.
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+Сначала мы деактивируем вкладку, которая является активной сейчас, а затем даем полученному элементу `nav` атрибут активного состояния. Здесь стоит отметить вызов <code>scrollIntoView()</code>, который интересным образом взаимодействует с CSS.
+
+<figure>   {% Video     src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4",     autoplay="true",     loop="true",     muted="true"   %}</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+Во вспомогательном CSS <code>scroll-snap</code> мы <a>вложили</a> запрос медиа, который применяет прокрутку типа <code>smooth</code>, если пользователь разрешает элементы с движением. JavaScript может легко вызывать элементы прокрутки в представление, а CSS может декларативно управлять интерфейсом. Очаровательная парочка.
+
+### Заключение
+
+Я рассказал свое видение решения этой задачи. А как ее решали бы вы? Получилась очень интересная архитектура компонентов! Кто же первый сделает версию с блек-джеком в своем любимом фреймворке? 🙂
+
+Давайте разнообразим наши подходы и рассмотрим самые разные реализации для веб-сайтов. Создайте свою версию [на Glitch](https://glitch.com), [твитните мне](https://twitter.com/argyleink), и я добавлю добавлю ее в раздел [Ремиксы сообщества](#community-remixes) ниже.
+
+## Ремиксы сообщества
+
+- Версия [@devnook](https://twitter.com/devnook), [@rob_dodson](https://twitter.com/rob_dodson) и [@DasSurma](https://twitter.com/DasSurma) с веб-компонентами ([статья](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs)).
+- Версия [@jhvanderschee](https://twitter.com/jhvanderschee) с кнопками: [Codepen](https://codepen.io/joosts/pen/PoKdZYP).
diff --git a/src/site/content/ru/blog/cache-api-quick-guide/index.md b/src/site/content/ru/blog/cache-api-quick-guide/index.md
new file mode 100644
index 00000000000..ad9f4a7c47e
--- /dev/null
+++ b/src/site/content/ru/blog/cache-api-quick-guide/index.md
@@ -0,0 +1,265 @@
+---
+layou: post
+title: 'Cache API: краткое руководство'
+subhead: Узнайте, как сделать данные приложения доступными в офлайн-режиме при помощи Cache API.
+authors:
+  - petelepage
+description: Узнайте, как сделать данные приложения доступными в офлайн-режиме при помощи Cache API.
+date: 2017-10-03
+updated: 2020-04-27
+tags:
+  - blog
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+[Cache API](https://developer.mozilla.org/docs/Web/API/Cache) — это система для хранения и получения доступа к сетевым запросам и соответствующим им ответам. Это могут быть как обычные запросы и ответы, создаваемые в ходе работы приложения, так и специальные запросы и ответы, создаваемые исключительно с целью сохранить данные для дальнейшего использования.
+
+Cache API был создан, чтобы позволить сервис-воркерам кешировать сетевые запросы и тем самым обеспечивать быстрое время ответа вне зависимости от скорости и доступности сетевого подключения. Однако этот API можно использовать в качестве механизма хранения данных общего назначения.
+
+## Где он доступен?
+
+Cache API доступен во [всех современных браузерах](https://caniuse.com/#feat=mdn-api_cache). Доступ к нему осуществляется через глобальное свойство `caches`, поэтому проверить наличие API очень просто:
+
+```js
+const cacheAvailable = 'caches' in self;
+```
+
+Доступ к Cache API можно получить из окна, элемента iframe, веб-воркера или сервис-воркера.
+
+## Какие данные в нем можно хранить
+
+В кеше могут храниться только пары объектов [`Request`](https://developer.mozilla.org/docs/Web/API/Request) и [`Response`](https://developer.mozilla.org/docs/Web/API/Response), представляющих HTTP-запросы и ответы соответственно. Однако запросы и ответы могут содержать любые данные, которые можно передавать по HTTP.
+
+### Какой объем данных можно хранить?
+
+**Большой**: как минимум пару сотен мегабайт, а в теории — сотни гигабайт или больше. Реализации в браузерах различаются, однако объем, доступный для хранения данных, обычно зависит от объема памяти устройства.
+
+## Создание и открытие кеша
+
+Чтобы открыть кеш, используйте метод `caches.open(name)`, указав в качестве единственного параметра название кеша. Если кеша с таким названием не существует, он будет создан. Метод возвращает обещание (`Promise`), которое разрешается в объект `Cache`.
+
+```js
+const cache = await caches.open('my-cache');
+// далее выполняем операции с объектом cache...
+```
+
+## Добавление записи в кеш
+
+Для добавления записи в кеш существуют три метода: `add`, `addAll` и `put`. Все три метода возвращают `Promise`.
+
+### `cache.add`
+
+Первый метод — это `cache.add()`. Он принимает один параметр: либо объект `Request`, либо URL-адрес (в виде строки). Метод инициирует сетевой запрос и сохраняет в кеше ответ на него. Если загрузка завершается неудачно или код ответа лежит за пределами диапазона 200, то ответ не сохраняется, а `Promise` будет отклонен. Обратите внимание, что запросы между различными источниками, выполненные не в режиме CORS, не будут сохранены, поскольку возвращают `status` `0`. Такие запросы можно сохранять только при помощи метода `put`.
+
+```js
+// Загружаем с сервера data.json и сохраняем ответ.
+cache.add(new Request('/data.json'));
+
+// Загружаем с сервера data.json и сохраняем ответ.
+cache.add('/data.json');
+```
+
+### `cache.addAll`
+
+Следующий метод — `cache.addAll()`. Он работает аналогично `add()`, но принимает массив объектов `Request` или URL-адресов (в виде строк). Вызов этого метода идентичен вызову `cache.add` для каждого запроса по отдельности, с тем исключением, что `Promise` будет отклонен в случае неудачного завершения любого из запросов.
+
+```js
+const urls = ['/weather/today.json', '/weather/tomorrow.json'];
+cache.addAll(urls);
+```
+
+В каждом из этих случаев новая запись перезаписывает предыдущую совпадающую с ней запись. Критерии совпадения описываются в разделе об [извлечении записей](#retrieving) ниже.
+
+### `cache.put`
+
+Последний метод — `cache.put()`, при помощи которого можно как сохранить ответ из сети, так и создать и сохранить свой собственный объект `Response`. Метод принимает два параметра. Первый параметр — либо объект `Request`, либо URL-адрес (в виде строки). Второй параметр — объект `Response` (либо полученный из сети, либо сгенерированный вашим собственным кодом).
+
+```js
+// Получаем data.json с сервера и сохраняем ответ.
+cache.put('/data.json');
+
+// Создаем новую запись для test.json и сохраняем свежесозданный ответ.
+cache.put('/test.json', new Response('{"foo": "bar"}'));
+
+// Скачиваем data.json со стороннего сайта и сохраняем ответ.
+cache.put('https://example.com/data.json');
+```
+
+Метод `put()` имеет менее строгие ограничения, чем `add()` или `addAll()`, и позволяет сохранять ответы, полученные не в режиме CORS, а также иные ответы с кодом состояния за пределами диапазона 200. Он перезаписывает любые предыдущие ответы на аналогичный запрос.
+
+#### Создание объектов Request
+
+При создании объекта `Request` в качестве аргумента указывается URL-адрес сохраняемого ресурса:
+
+```js
+const request = new Request('/my-data-store/item-id');
+```
+
+#### Работа с объектами Response
+
+Конструктор объекта `Response` принимает множество типов данных, включая `Blob`, `ArrayBuffer`, `FormData` и строки.
+
+```js
+const imageBlob = new Blob([data], {type: 'image/jpeg'});
+const imageResponse = new Response(imageBlob);
+const stringResponse = new Response('Hello world');
+```
+
+MIME-тип объекта `Response` устанавливается путем установки соответствующего заголовка.
+
+```js
+  const options = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+  const jsonResponse = new Response('{}', options);
+```
+
+Если вы извлекли объект `Response` и хотите получить доступ к его телу, для этого существует ряд вспомогательных методов. Каждый метод возвращает `Promise`, который разрешается в значение соответствующего типа.
+
+<table>
+  <thead>
+    <th>Метод</th>
+    <th>Описание</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>arrayBuffer</code></td>
+      <td>Возвращает объект <code>ArrayBuffer</code> с телом, сериализованным в байты.</td>
+    </tr>
+    <tr>
+      <td><code>blob</code></td>
+      <td>Возвращает объект <code>Blob</code>. Если объект <code>Response</code> был создан с объектом <code>Blob</code>, то новый объект <code>Blob</code> будет иметь тот же тип. В противном случае используется заголовок <code>Content-Type</code> объекта <code>Response</code>.</td>
+    </tr>
+    <tr>
+      <td><code>text</code></td>
+      <td>Интерпретирует байты тела как строку в кодировке UTF-8.</td>
+    </tr>
+    <tr>
+      <td><code>json</code></td>
+      <td>Интерпретирует байты тела как строку в кодировке UTF-8, а затем пытается обработать ее как JSON. Возвращает получившийся в результате объект или выдает ошибку <code>TypeError</code>, если строку не удается обработать как JSON.</td>
+    </tr>
+    <tr>
+      <td><code>formData</code></td>
+      <td>Интерпретирует байты тела как HTML-форму, закодированную в формате <code>multipart/form-data</code> или <code>application/x-www-form-urlencoded</code>. Возвращает объект <a href="https://developer.mozilla.org/docs/Web/API/FormData">FormData</a> или, если данные не удается обработать, выдает ошибку <code>TypeError</code>.</td>
+    </tr>
+    <tr>
+      <td><code>body</code></td>
+      <td>Возвращает объект <a href="https://developer.mozilla.org/docs/Web/API/ReadableStream">ReadableStream</a> для чтения данных тела.</td>
+    </tr>
+  </tbody>
+</table>
+
+Пример:
+
+```js
+const response = new Response('Hello world');
+const buffer = await response.arrayBuffer();
+console.log(new Uint8Array(buffer));
+// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
+```
+
+## Извлечение записей из кеша {: #retrieving }
+
+Для поиска записи в кеше можно использовать метод `match`.
+
+```js
+const response = await cache.match(request);
+console.log(request, response);
+```
+
+Если параметр `request` является строкой, браузер преобразует его в объект `Request` при помощи вызова `new Request(request)`. Функция возвращает `Promise`, который в случае обнаружения подходящей записи разрешается в объект `Response`, а в противном случае — в `undefined`.
+
+При сравнении двух объектов `Request` браузер учитывает не только URL-адрес. Объекты Request считаются несовпадающими, если у них различаются строки запроса, заголовки `Vary` или методы HTTP (`GET`, `POST`, `PUT` и т. д.).
+
+Некоторые из этих параметров можно игнорировать, если передать в качестве второго аргумента объект options с соответствующими опциями.
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const response = await cache.match(request, options);
+// обработка ответа
+```
+
+Если найдено более одного кешированного запроса, то будет возвращен запрос, который был создан раньше всего. Если вам нужно извлечь *все* запросы, соответствующие критериям, используйте метод `cache.matchAll()`.
+
+```js
+const options = {
+  ignoreSearch: true,
+  ignoreMethod: true,
+  ignoreVary: true
+};
+
+const responses = await cache.matchAll(request, options);
+console.log(`There are ${responses.length} matching responses.`);
+```
+
+Чтобы сократить объем кода, для поиска по всем кешам сразу можно использовать `caches.match()`, вместо того чтобы вызывать `cache.match()` для каждого отдельного кеша.
+
+## Поиск
+
+Cache API не позволяет искать запросы или ответы каким-либо образом, кроме сравнения записей с объектом `Response`. Однако возможность поиска можно реализовать самостоятельно, используя фильтрацию или индексирование.
+
+### Фильтрация
+
+Один из способов поиска заключается в обходе всех записей подряд и фильтрации их согласно установленным критериям. Предположим, вам нужно найти все записи, чей URL-адрес заканчивается на `.png`.
+
+```js
+async function findImages() {
+  // Получаем список всех кешей для текущего источника
+  const cacheNames = await caches.keys();
+  const result = [];
+
+  for (const name of cacheNames) {
+    // Открываем кеш
+    const cache = await caches.open(name);
+
+    // Получаем список записей. Каждая запись — объект Request
+    for (const request of await cache.keys()) {
+      // Если URL-адрес запроса совпадает, добавляем ответ к результату
+      if (request.url.endsWith('.png')) {
+        result.push(await cache.match(request));
+      }
+    }
+  }
+
+  return result;
+}
+```
+
+Таким образом вы можете использовать для фильтрации записей любое свойство объектов `Request` и `Response`. Обратите внимание, что на больших массивах данных поиск будет медленным.
+
+### Создание индекса
+
+Еще один способ реализации поиска заключается в том, чтобы создать отдельный индекс с записями, по которым можно выполнять поиск, и использовать IndexedDB для его хранения. Поскольку API IndexedDB предназначен специально для таких целей, этот подход позволяет обеспечить гораздо более высокую производительность при большом количестве записей.
+
+Если URL-адрес объекта `Request` будет храниться вместе со свойствами, используемыми для поиска, вы сможете легко находить нужную запись в кеше и извлекать ее.
+
+## Удаление записи
+
+Удалить запись из кеша можно следующим образом:
+
+```js
+cache.delete(request);
+```
+
+Параметр request — это либо объект `Request`, либо URL-адрес в виде строки. Этот метод также принимает объект option с теми же параметрами, что и для метода `cache.match`, благодаря чему его можно использовать для удаления сразу нескольких пар `Request`/`Response`, соответствующих одному и тому же URL-адресу.
+
+```js
+cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});
+```
+
+## Удаление кеша
+
+Чтобы удалить кеш, используйте `caches.delete(name)`. Функция возвращает `Promise`, который разрешается в `true`, если кеш существовал и был удален, или в `false` в противном случае.
+
+## Благодарности
+
+Спасибо Мэту Скейлсу за написание оригинальной версии этой статьи, впервые опубликованной на WebFundamentals.
diff --git a/src/site/content/ru/blog/carousel-best-practices/index.md b/src/site/content/ru/blog/carousel-best-practices/index.md
new file mode 100644
index 00000000000..584104a11bf
--- /dev/null
+++ b/src/site/content/ru/blog/carousel-best-practices/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: Рекомендации по работе с каруселями
+subhead: Повысьте удобство использования и производительность, оптимизировав карусели.
+authors:
+  - katiehempenius
+description: Узнайте, как повысить удобство использования и производительность, оптимизировав карусели.
+date: 2021-01-26
+hero: image/admin/i7tjE04MYo7xJOZKkyQI.jpg
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Карусель — это компонент пользовательского интерфейса, отображающий контент в виде слайд-шоу. Слайды карусели можно переключать как автоматически, так и вручную. Карусели можно применять и для других целей, но чаще всего их используют для показа изображений, продуктов и рекламных акций на начальных страницах.
+
+В этой статье рассказывается, как повысить производительность каруселей и удобство их использования.
+
+<figure>{% Img src="image/admin/u2FlXalClwBeDOBBiwxu.png", alt="Изображение, на котором показана карусель", width="629", height="420" %}</figure>
+
+## Производительность
+
+Хорошо реализованная карусель должна оказывать минимальное или нулевое влияние на производительность. Но в каруселях часто содержатся медиаресурсы большого размера. Они могут снижать производительность независимо от того, где они отображаются: в карусели или где-то еще.
+
+- **LCP (Largest Contentful Paint, самый крупный отображаемый элемент содержимого)**
+
+    В больших каруселях, расположенных в пределах экрана, часто содержится самый крупный отображаемый элемент содержимого (LCP) страницы. Соответственно, такие карусели могут значительно влиять на метрику LCP. Оптимизировав карусель в подобных случаях, можно значительно улучшить метрику LCP. Подробный рассказ о принципах измерения метрики LCP на страницах с каруселями см. в разделе «[Измерение метрики LCP для каруселей](#lcp-measurement-for-carousels)».
+
+- **FID (First Input Delay, время ожидания до первого взаимодействия с контентом)**
+
+    Карусели предъявляют минимальные требования к JavaScript и поэтому не должны влиять на интерактивность страницы. Если вы обнаружите, что в карусели вашего сайта есть долго работающие скрипты, рекомендуется перейти на другие средства работы с каруселями.
+
+- **CLS (Cumulative Layout Shift, совокупное изменение макета)**
+
+    Неожиданно большое количество каруселей содержит бесполезные несоставные анимации, которые могут увеличивать метрику CLS. Из-за этого на страницах с автоматически воспроизводимыми каруселями метрика CLS может иметь бесконечное значение. В таких случаях совокупное изменение макета обычно незаметно человеческому глазу, поэтому легко пропустить его. Во избежание этой проблемы [не используйте несоставные анимации](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/) в каруселях (например, во время переходов между слайдами).
+
+## Рекомендации по повышению производительности
+
+### Загрузка содержимого карусели с использованием HTML
+
+Содержимое карусели следует загружать, используя HTML-разметку страницы. В этом случае браузер сможет обнаружить его на ранних этапах загрузки страницы. Запускать загрузку содержимого карусели с помощью JavaScript, вероятно, самая большая ошибка, которая снижает производительность и которой следует избегать при использовании карусели. Такой подход замедляет загрузку изображений и может ухудшить метрику LCP.
+
+{% Compare 'better' %}
+
+```html
+<div class="slides">
+  <img src="https://example.com/cat1.jpg">
+  <img src="https://example.com/cat2.jpg">
+  <img src="https://example.com/cat3.jpg">
+</div>
+```
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```javascript
+const slides = document.querySelector(".slides");
+const newSlide = document.createElement("img");
+newSlide.src = "htttp://example.com/cat1.jpg";
+slides.appendChild(newSlide);
+```
+
+{% endCompare %}
+
+Чтобы еще больше оптимизировать карусель, можно загружать первый слайд статически, а затем постепенного добавлять в него элементы управления навигацией и дополнительный контент. Этот метод лучше всего подходит для случаев, когда вы располагаете длительным вниманием пользователя, — вы получаете дополнительное время для загрузки контента. В других случаях, например на начальных страницах, на которых пользователи задерживаются только на секунду-две, аналогичную эффективность дает только загрузка одного изображения.
+
+### Избегайте сдвигов макета
+
+{% Aside %}
+
+В Chrome версий 88–90 [исправлено много ошибок](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md), связанных порядком расчета сдвигов макета. Многие из этих исправлений связаны с каруселями. В результате в последних версиях Chrome показатели сдвигов макета, связанных с каруселями, для сайтов должны уменьшиться.
+
+{% endAside %}
+
+Элементы управления навигацией и переходами между слайдами — самые распространенные причины сдвигов макета в каруселях.
+
+- **Переходы между слайдами:** сдвиги макета, которые происходят во время переходов между слайдами, обычно связаны с обновлением свойств элементов DOM, влияющих на макет. Вот примеры таких свойств: `left`, `top`, `width` и `marginTop`. Чтобы не допустить сдвиги макета, для перехода между этими элементами используйте [свойство `transform`](https://developer.mozilla.org/docs/Web/CSS/transform). В [этой демонстрации](https://glitch.com/~basic-carousel) показано, как создать карусель с базовыми возможностями с использованием свойства `transform`.
+
+- **Элементы управления навигацией:** перемещение, добавление или удаление элементов управления навигацией по карусели из модели DOM может привести к сдвигам макета в зависимости от того, как эти изменения реализованы. В каруселях с такой проблемой это обычно происходит, когда пользователь наводит на них указатель мыши.
+
+Ниже приведено несколько общих моментов, вызывающих путаницу при измерении метрики CLS для каруселей.
+
+- **Карусели с автоматическим воспроизведением:** переходы между слайдами — самая распространенная причина сдвигов макета, связанных с каруселями. В каруселях без автоматического воспроизведения такие сдвиги макета обычно происходят в пределах 500 мс после взаимодействия с пользователем и, [следовательно, не учитываются в метрике Cumulative Layout Shift (CLS)](/cls/#expected-vs-unexpected-layout-shifts). Для каруселей с автоматическим воспроизведением такие сдвиги макета могут не только учитываться в метрике CLS, но и повторяться бесконечно. Таким образом, очень важно убедиться, что карусель с автоматическим воспроизведением не является причиной сдвигов макета.
+
+- **Прокрутка:** в некоторых каруселях пользователи могут переходить по слайдам карусели, используя функцию прокрутки. Если начальная позиция элемента изменяется и при этом смещение элемента при прокрутке (то есть [`scrollLeft`](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) или [`scrollTop`](https://developer.mozilla.org/docs/Web/API/Element/scrollTop)) изменяется на ту же величину, но в противоположном направлении, это не считается сдвигом макета при условии, что это все происходит в одном фрейме.
+
+Дополнительные сведения о сдвигах макета см. в статье «[Отладка при сдвигах макета](/debug-layout-shifts/#identifying-the-cause-of-a-layout-shift)».
+
+### Используйте современные технологии
+
+На многих сайтах карусели реализованы с помощью [сторонних библиотек JavaScript](/third-party-javascript). Если вы используете старые средства для работы с каруселями, можно повысить производительность, перейдя на новые средства. В новых средствах, как правило, используются более эффективные API и меньше вероятность того, что потребуются дополнительные зависимости, например jQuery.
+
+Однако (в зависимости от типа создаваемой карусели) вам может вообще не понадобиться JavaScript. Новый API [Scroll Snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) позволяет реализовать переходы, похожие на переходы в каруселях, используя только HTML и CSS.
+
+Ниже указано несколько ресурсов по использованию `scroll-snap`, которые могут быть вам полезны.
+
+- [Создание компонента Stories (web.dev)](/building-a-stories-component/)
+- [Веб-стиль нового поколения: scroll snap (web.dev)](/next-gen-css-2019/#scroll-snap)
+- [Карусель с использованием только CSS (хитрости CSS)](https://css-tricks.com/css-only-carousel/)
+- [Как создать карусель с использованием только CSS (хитрости CSS)](https://css-tricks.com/how-to-make-a-css-only-carousel/)
+
+### Оптимизируйте контент карусели
+
+В каруселях часто содержатся самые крупные изображения на сайте, поэтому стоит потратить время и проверить, полностью ли оптимизированы эти изображения. Выбор правильного формата изображения и уровня сжатия, [использование CDN изображений](/image-cdns) и [srcset для передачи нескольких версий изображений](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) — методы, с помощью которых можно уменьшить размер передаваемых изображений.
+
+## Измерение производительности
+
+В этом разделе рассказывается об измерении метрики LCP применительно к каруселям. Несмотря на то что во время расчета метрики LCP карусели обрабатываются точно так же, как любые другие элементы пользовательского интерфейса, механизм расчета метрики LCP для каруселей с автоматическим воспроизведением часто приводит к путанице.
+
+### Измерение метрики LCP для каруселей
+
+Ниже изложены ключевые моменты, позволяющие понять принцип расчета метрики LCP для каруселей.
+
+- При расчете метрики LCP элементы страницы учитываются по мере их отображения во фрейме. После того как пользователь начинает взаимодействовать со страницей (касаться ее элементов, прокручивать содержимое или нажимать клавиши), новые элементы не больше не учитываются при расчете метрики LCP. Таким образом, любой слайд в карусели с автоматическим воспроизведением может стать последним самым крупным отображаемым элементом содержимого, тогда как в статической карусели таким элементом может быть только первый слайд.
+- При рендеринге двух изображений одинакового размера самым крупным отображаемым элементом содержимого будет считаться первое изображение. Самый крупный отображаемый элемент содержимого изменяется только тогда, когда появляется новый элемент, который больше текущего самого крупного отображаемого элемента содержимого. Таким образом, если все элементы карусели имеют одинаковый размер, самым крупным отображаемым элементом содержимого должно быть первое отображаемое изображение.
+- В процессе оценки элементов при расчете метрики LCP учитывается «[видимый или внутренний размер в зависимости от того, какой из них меньше](/lcp)». Таким образом, если в карусели с автоматическим воспроизведением отображаются изображения одинакового размера, но с разными [внутренними размерами](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size), которые меньше размера дисплея, то по мере отображения новых слайдов самый крупный отображаемый элемент содержимого может изменяться. В этом случае, если все изображения отображаются с одинаковым размером, изображение с наибольшим внутренним размером будет считаться самым крупным отображаемым элементом содержимого. Чтобы метрика LCP имела малое значение, все элементы в карусели с автоматическим воспроизведением должны иметь одинаковый внутренний размер.
+
+### Изменения порядка расчета метрики LCP для каруселей в Chrome 88
+
+Начиная с [Chrome 88](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md), при определении самого крупного отображаемого элемента содержимого принимаются во внимание изображения, которые позже удаляются из DOM. Ранее такие изображения не учитывались. Для сайтов, на которых используются карусели с автоматическим воспроизведением, изменение этого определения окажет нейтральное или положительное влияние на оценки LCP.
+
+Это изменение было внесено по результатам [наблюдений](https://github.com/anniesullie/LCP_Examples/tree/master/removed_from_dom), согласно которым на многих сайтах переходы по слайдам карусели реализованы путем удаления ранее отображаемого изображения из дерева DOM. До Chrome 88 каждый раз, когда отображался новый слайд, удаление предыдущего элемента приводило к пересчету метрики LCP. Это изменение влияет только на карусели с автоматическим воспроизведением, так как по определению самый крупный отображаемый элемент содержимого может появиться только до первого взаимодействия пользователя со страницей.
+
+## Прочие соображения
+
+В этом разделе изложены рекомендации по пользовательским интерфейсам и продуктам, которые следует учитывать при реализации каруселей. Карусели должны помогать в достижении бизнес-целей и отображать контент в удобной для навигации и чтения форме.
+
+### Рекомендации по навигации
+
+#### Используйте заметные элементы управления навигацией
+
+Элементы управления навигацией по карусели должны быть хорошо заметны и их должно быть удобно нажимать. Это редко удается сделать хорошо — в большинстве каруселей элементы управления навигацией маленькие и тонкие. Имейте в виду, что один и тот же цвет или стиль элементов управления навигацией редко подходит для всех ситуаций. Например, стрелка, которая хорошо видна на темном фоне, может быть незаметна на светлом изображении.
+
+#### Отображайте ход навигации
+
+Элементы управления навигацией по карусели должны давать представление об общем количестве слайдов и о том, в каком месте карусели находится пользователь. Так пользователю будет проще переходить к определенному слайду и понимать, какой контент он уже просмотрел. В некоторых ситуациях возможность предварительно просмотреть последующий контент (например, фрагмент из следующего слайда или список эскизов) может быть полезной и повысить заинтересованность пользователя.
+
+#### Поддержка жестов на мобильных устройствах
+
+На мобильных устройствах помимо традиционных элементов управления навигацией (например, экранных кнопок) следует поддерживать жесты смахивания.
+
+#### Обеспечьте альтернативные пути навигации
+
+Маловероятно, что большинство пользователей будет взаимодействовать со всем контентом карусели, поэтому контент, на который ссылаются слайды карусели, должен быть доступен через другие пути навигации.
+
+### Рекомендации по обеспечению удобочитаемости
+
+#### Не используйте автоматическое воспроизведение
+
+Автоматическое воспроизведение создает две почти парадоксальные проблемы: экранные анимации отвлекают пользователей и уводят взгляд от более важного контента. Кроме того, поскольку пользователи часто связывают анимацию с рекламой, они игнорируют карусели, которые воспроизводятся автоматически.
+
+Таким образом, автоматическое воспроизведение редко бывает полезно. Если важен контент, отказ от автоматического воспроизведения делает его максимально доступным; если контент карусели не важен, то автоматическое воспроизведение отвлечет внимание пользователя от более важного содержимого. Кроме того, содержимое слайдов в каруселях с автоматическим воспроизведением может быть трудно читать (и это тоже раздражает). Люди читают с разной скоростью, поэтому редко бывает, что слайды карусели переключаются в «правильное» время для разных пользователей.
+
+В идеальном случае переходами по слайдам должен управлять пользователь с помощью элементов управления. Если необходимо использовать автоматическое воспроизведение, оно должно отключаться при наведении указателя мыши на карусель. Кроме того, скорость перехода между слайдами должна зависеть от содержимого слайда — чем больше текста на слайде, тем дольше он должен отображаться на экране.
+
+#### Не смешивайте текст и изображения
+
+Часто текстовое содержимое карусели добавляют в соответствующий файл изображения, а не отображают отдельно с помощью разметки HTML. Такой подход плох с точки зрения поддержки специальных возможностей, локализации и степени сжатия. Он также поощряет использовать подход «один размер для всех случаев» при создании ресурсов. Однако один и тот же формат изображения и текста редко бывает одинаково удобно читать на компьютерах и мобильных устройствах.
+
+#### Будьте краткими
+
+У вас есть лишь доля секунды, чтобы привлечь внимание пользователя. Короткий текст по существу увеличивает шансы донести нужное сообщение до пользователя.
+
+### Рекомендации по продуктам
+
+Карусели хороши, когда невозможно использовать дополнительное вертикальное пространство для отображения дополнительного контента. Зачастую карусели на страницах продуктов — хороший пример этого сценария использования.
+
+Тем не менее карусели не всегда используются эффективно.
+
+- Пользователя легко [принимают](https://www.nngroup.com/articles/auto-forwarding/) карусели за рекламу (особенно если в них содержатся рекламные объявления или они автоматически прокручиваются). Пользователи склонны игнорировать рекламу — это явление называют [баннерной слепотой](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/).
+- Карусели часто используются, чтобы «примирить» несколько отделов организации и не принимать решения о бизнес-приоритетах. В результате карусели могут легко превратиться в «свалку» неэффективного контента.
+
+#### Проверяйте свои предположения
+
+Влияние каруселей на бизнес, особенно на домашних страницах, необходимо оценивать и проверять. С помощью показателей CTR карусели можно определить, эффективны ли карусель и ее содержимое.
+
+#### Будьте актуальными
+
+Карусели максимально эффективны, если они содержат интересный и релевантный контент, представленный в понятном контексте. Если контент не привлекает пользователя за пределами карусели, то разместив его в карусели, вы не повысите его эффективность. Если вам необходимо использовать карусель, расставьте приоритеты для контента и сделайте так, чтобы каждый слайд был достаточно релевантным, и пользователь захотел перейти к следующему слайду.
diff --git a/src/site/content/ru/blog/centering-in-css/index.md b/src/site/content/ru/blog/centering-in-css/index.md
new file mode 100644
index 00000000000..c9e5e58895c
--- /dev/null
+++ b/src/site/content/ru/blog/centering-in-css/index.md
@@ -0,0 +1,265 @@
+---
+layout: post
+title: Центрирование в CSS
+subhead: Следуйте 5 методам центрирования, когда они проходят серию тестов, чтобы определить, какой из них наиболее устойчив к изменениям.
+authors:
+  - adamargyle
+description: Следуйте 5 методам центрирования, когда они проходят серию тестов, чтобы определить, какой из них наиболее устойчив к изменениям.
+date: 2020-12-16
+hero: image/admin/uz0bDoJvK4kbtjozekGA.png
+thumbnail: image/admin/4NFENgpVrXHi2O42mv0K.png
+codelabs: codelab-centering-in-css
+tags:
+  - blog
+  - css
+  - layout
+  - intl
+---
+
+Центрирование в CSS — печально известная проблема, обросшая массой шуток. Но к 2020 году CSS уже достаточно развился, и теперь мы можем посмеяться над этими шутками искренне, а не сквозь зубы.
+
+Если вы предпочитаете видео, можете посмотреть видеоверсию этой статьи на YouTube:
+
+{% YouTube 'ncYzTvEMCyE' %}
+
+## Суть проблемы
+
+**Существует множество видов центрирования**. Они различаются в зависимости от вариантов использования, количества элементов, которые нужно центрировать, и т. д. Чтобы обосновать «выигрышную» технику центрирования, я создал The Resilience Ringer. Это серия стресс-тестов, позволяющих сбалансировать каждую стратегию центрирования, наблюдая за их эффективностью. В конце статьи я раскрою наиболее результативную технику, а также «самую ценную». Надеюсь, вы почерпнете из статьи новые методики и решения для центрирования.
+
+### Указание устойчивости
+
+Указание устойчивости (Resilience Ringer) — это проекция моей уверенности в том, что алгоритм центрирования должен быть устойчивым к международным макетам, окнам просмотра переменного размера, редактированию текста и динамическому контенту. Эти принципы помогли сформировать следующие тесты устойчивости для выдержки техник центрирования:
+
+1. **Сжатый:** центрирование должно выдерживать изменения ширины
+2. **Сжатие:** центрирование должно выдерживать изменение высоты
+3. **Дублировать:** центрирование должно быть динамическим по количеству элементов
+4. **Изменить:** центрирование должно быть динамическим по длине и языку контента
+5. **Поток:** центрирование должно быть независимым от направления документа и режима письма
+
+Выигрышное решение должно продемонстрировать свою устойчивость, удерживая содержимое в центре при сжатии, сжатии, дублировании, редактировании и переключении на различные языковые режимы и направления. Надежный и жизнеспособный центр, надежный центр.
+
+#### Легенда
+
+Я предоставил несколько визуальных цветовых подсказок, чтобы помочь вам сохранить некоторую метаинформацию в контексте:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4K35cL1tVpEsGqb4FgKp.png", alt="", width="800", height="438" %} <figcaption></figcaption></figure>
+
+- Розовая рамка указывает на владение стилями центрирования.
+- Серый прямоугольник - это фон на контейнере, на котором необходимо разместить элементы по центру.
+- Каждый ребенок имеет белый цвет фона, поэтому вы можете увидеть любые эффекты, которые техника центрирования оказывает на размеры дочернего блока (если таковые имеются).
+
+## 5 участников
+
+В Звонок стойкости входят 5 техник центрирования, только один получит Корону стойкости 👸.
+
+### 1. Центр содержимого
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/content-center-ringer-cycle.mp4">
+  </source></video>
+  <figcaption>Редактирование и копирование контента с помощью <a href="https://github.com/GoogleChromeLabs/ProjectVisBug#visbug">VisBug</a></figcaption></figure>
+
+1. **Squish** : отлично!
+2. **Сквош** : отлично!
+3. **Дубликат** : отлично!
+4. **Изменить** : отлично!
+5. **Расход** : отличный!
+
+Будет сложно превзойти краткость `display: grid` и сокращение `place-content` Поскольку он центрирует и оправдывает детей коллективно, это надежный метод центрирования для групп элементов, предназначенных для чтения.
+
+```css
+.content-center {
+  display: grid;
+  place-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - Контент центрируется даже в условиях ограниченного пространства и переполнения - Центрирование, редактирование и обслуживание - все в одном месте - Gap гарантирует равное расстояние между _n_ дочерними элементами - Grid создает строки по умолчанию</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">Самый широкий дочерний элемент ( <code data-md-type="codespan">max-content</code> ) устанавливает ширину для всех остальных. Подробнее об этом мы поговорим в <a href="#gentle-flex" data-md-type="link">Gentle Flex</a> .</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+**Отлично** подходит для макетов макросов, содержащих абзацы и заголовки, прототипов или других вещей, требующих четкого центрирования.
+
+`place-content` {% Aside %} не является эксклюзивным для `display: grid` . `display: flex` также может извлечь выгоду из [сокращений](https://codepen.io/argyleink/pen/PoqWOPZ) `place-content` и `place-item` . {% endAside %}
+
+### 2. Нежный изгиб
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/gentle-flex-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish:** отлично!
+2. **Сквош:** отлично!
+3. **Дубликат:** отлично!
+4. **Изменить:** отлично!
+5. **Расход:** отличный!
+
+Gentle Flex - более точная стратегия, *основанная только на центрировании.* Он мягкий и нежный, потому что в отличие от `place-content: center` , при центрировании размеры детской коробки не меняются. По возможности аккуратно складывайте все предметы в стопку, по центру и на расстоянии друг от друга.
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - обрабатывает только выравнивание, направление и распределение - редактирование и обслуживание - все в одном месте - Gap гарантирует равные интервалы между _n_ дочерними элементами</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true"><li data-md-type="list_item" data-md-list-type="unordered">Большинство строк кода</li></ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+**Отлично** подходит как для макро, так и для микро макетов.
+
+{% Aside "key-term" %} Макеты **макросов** похожи на штаты или территории страны: очень высокоуровневые, большие зоны покрытия. Зоны, созданные макетами макросов, обычно содержат больше макетов. Чем меньше площадь покрывает макет, тем меньше он становится макетом макроса. Поскольку макет покрывает меньшую площадь поверхности или содержит меньше макетов, он становится в большей степени микромакетом. {% endAside %}
+
+### 3. Автобот
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/autobot-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish:** отлично
+2. **Сквош:** отличный
+3. **Дубликат:** отлично
+4. **Изменить:** отлично
+5. **Расход:** отличный
+
+Контейнер настроен на гибкость без стилей выравнивания, в то время как прямые дочерние элементы имеют автоматические поля. В марже есть что-то ностальгическое и чудесное `margin: auto` работает со всех сторон элемента.
+
+```css
+.autobot {
+  display: flex;
+}
+.autobot > * {
+  margin: auto;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - Веселые трюки - Быстро и грязно</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">Неудобные результаты при переполнении</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Использование раздачи вместо зазора означает, что при раскладке дети могут касаться сторон.</li>
+<li data-md-type="list_item" data-md-list-type="unordered">"Толкать" в нужное положение не кажется оптимальным и может привести к изменению размера детской коробки.</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+**Отлично** подходит для центрирования значков или псевдоэлементов.
+
+### 4. Пушистый центр
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/fluffy-center-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish:** плохо
+2. **Сквош:** плохо
+3. **Дубликат:** плохо
+4. **Изменить:** отлично!
+5. **Расход:** отличный! (если вы используете логические свойства)
+
+Конкурсный «пушистый центр» - безусловно, наш самый вкусный по звучанию соперник и единственная техника центрирования, полностью принадлежащая элементу / ребенку. Видите нашу внутреннюю розовую границу !?
+
+```css
+.fluffy-center {
+  padding: 10ch;
+}
+```
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - Защищает контент - Атомарно - Каждый тест тайно содержит эту стратегию центрирования - Слово пробел</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">Иллюзия бесполезности</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Между контейнером и предметами возникает противоречие, естественно, поскольку каждый из них очень твердо придерживается своих размеров.</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+**Отлично** подходит для центрирования по словам или фразам, меток, таблеток, кнопок, фишек и многого другого.
+
+### 5. Pop &amp; Plop
+
+<figure data-size="full">
+  <video playsinline controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/popnplop-ringer-cycle.mp4">
+  </source></video></figure>
+
+1. **Squish:** хорошо
+2. **Сквош:** хорошо
+3. **Дубликат:** плохо
+4. **Изменить:** хорошо
+5. **Расход:** отлично
+
+Это "всплывает", потому что абсолютное позиционирование выталкивает элемент из нормального потока. Часть имен "шлепок" происходит от того, когда я считаю его наиболее полезным: шлепать его поверх других вещей. Это классический и удобный метод центрирования наложения, который гибок и динамичен в зависимости от размера содержимого. Иногда вам просто нужно поставить UI поверх другого UI.
+
+<div class="switcher">{% Compare 'better', 'Pros' %} - Полезно - Надежно - Когда вам это нужно, это бесценно</div>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'worse', 'Cons' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">Код с отрицательными процентными значениями</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Требуется <code data-md-type="codespan">position: relative</code> принудительного включения содержащего блока</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Ранние и неудобные разрывы строк</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Без дополнительных усилий может быть только 1 на содержащий блок</li>
+</ul>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+**Отлично** подходит для модальных окон, тостов и сообщений, стеков и эффектов глубины, всплывающих окон.
+
+## Победитель
+
+Если бы я был на острове и мог бы иметь только 1 технику центрирования, это было бы…
+
+[барабанная дробь]
+
+**Нежная** гибкость 🎉
+
+```css
+.gentle-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}
+```
+
+Вы всегда можете найти его в моих таблицах стилей, потому что он полезен как для макро, так и для микро макетов. Это универсальное надежное решение с результатами, соответствующими моим ожиданиям. Кроме того, поскольку я врожденный наркоман по размерам, я склонен переходить к этому решению. Конечно, печатать много, но преимущества, которые он дает, перевешивают дополнительный код.
+
+### MVP
+
+**Пушистый центр**
+
+```css
+.fluffy-center {
+  padding: 2ch;
+}
+```
+
+Пушистый центр настолько микро, что его легко упустить из виду как метод центрирования, но он является основным продуктом моих стратегий центрирования. Он настолько атомарен, что иногда я забываю, что использую его.
+
+### Заключение
+
+Какие вещи нарушают вашу стратегию центрирования? Какие еще проблемы можно добавить к звонку устойчивости? Я рассматривал перевод и автоматический переключатель высоты на контейнере… что еще !?
+
+Теперь, когда вы знаете, как я это сделал, как бы вы ?! Давайте разнообразим наши подходы и изучим все способы создания веб-сайтов. Следуйте кодовой таблице с этим постом, чтобы создать свой собственный пример центрирования, как и в этом посте. [Напишите мне в Твиттере](https://twitter.com/argyleink) свою версию, и я добавлю ее в [раздел ремиксов сообщества](#community-remixes) ниже.
+
+## Ремиксы от сообщества
+
+- [CSS-хитрости](https://css-tricks.com/) с [сообщением в блоге](https://css-tricks.com/centering-in-css/)
diff --git a/src/site/content/ru/blog/conversion-measurement/index.md b/src/site/content/ru/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..c9575419887
--- /dev/null
+++ b/src/site/content/ru/blog/conversion-measurement/index.md
@@ -0,0 +1,498 @@
+---
+layout: post
+title: Event Conversion Measurement API - более конфиденциальный способ измерения конверсии рекламы
+subhead: >
+  Новый веб-API, доступный в виде пробной версии источника, измеряет, когда клик на объявлении приводит к конверсии, без использования межсайтовых идентификаторов.
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %} Conversion Measurement API будет переименован в *Attribution Reporting API* и получит больше функций.
+
+- Если вы экспериментируете с [Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md) в [Chrome 91](https://chromestatus.com/features/schedule) и ниже, то в этой публикации вы найдете более подробную информацию, варианты использования и инструкции к данному API.
+- Если вас интересует следующая версия этого API (Attribution Reporting), которая будет доступна для экспериментов в Chrome (как пробная версия источника), [присоединяйтесь к списку рассылки](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev), чтобы получать новости о доступных экспериментах.
+
+{% endAside %}
+
+Для измерения эффективности рекламных кампаний рекламодатели и издатели должны знать, когда клик на объявлении или просмотр приводит к [конверсии](/digging-into-the-privacy-sandbox/#conversion), например к покупке товара или регистрации аккаунта. Традиционно это выполнялось с помощью **сторонних файлов cookie**. Теперь же Event Conversion Measurement API позволяет сопоставить событие на сайте издателя с последующей конверсией на сайте рекламодателя без использования механизмов узнавания пользователя на разных сайтах.
+
+{% Aside %} **Нам важны отзывы об этом предложении!** Если у вас есть комментарии, [создайте тему](https://github.com/WICG/conversion-measurement-api/issues/) в репозитории предложения API. {% endAside %}
+
+{% Aside %} Этот API входит в тестовую среду конфиденциальности (Privacy Sandbox)—серию предложений для третьих лиц без использования сторонних файлов cookie и других механизмов межсайтового отслеживания. Обзор всех предложений см. в статье [«Углубляемся в тестовую среду конфиденциальности»](/digging-into-the-privacy-sandbox). {% endAside %}
+
+## Глоссарий
+
+- **Adtech-платформы**: компании, которые предоставляют программное обеспечение и инструменты, позволяющие брендам или агентствам таргетировать, доставлять и анализировать свою цифровую рекламу.
+- **Рекламодатели**: компании, которые оплачивают рекламу.
+- **Издатели**: компании, которые размещают рекламу на своих сайтах.
+- **Конверсия по клику**: конверсия, связанная с кликом на объявлении.
+- **Конверсия по показам**: конверсия, связанная с показом объявления (если пользователь не взаимодействует с объявлением, но затем всё же совершает конверсию).
+
+## Кому нужно знать об этом APIadtech-платформам, рекламодателям и издателям
+
+- **Adtech-платформам**, таким как **[автоматизированные платформы покупки рекламы](https://en.wikipedia.org/wiki/Demand-side_platform)**, этот API поможет поддерживать функции, которые сейчас зависят от сторонних файлов cookie. Если вы работаете над системами измерения конверсии, то [попробуйте демоверсию](#demo), [поэкспериментируйте с API](#experiment-with-the-api) и [поделитесь своим мнением](#share-your-feedback).
+- **Рекламодатели и издатели, использующие собственный код для рекламы или измерения конверсии**, могут применять этот API вместо существующих методов.
+- **Рекламодателям и издателям, которые используют adtech-платформы для рекламы или измерения конверсии**, не придется применять этот API напрямую, однако [разъяснение принципов этого API](#why-is-this-needed) может представлять для них интерес, особенно если их adtech-платформы захотят интегрировать этот API.
+
+## Общие сведения об API
+
+### Зачем это нужно?
+
+Сегодня для измерения конверсии рекламы часто используются [сторонние файлы cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies). **Однако браузеры ограничивают доступ к ним.**
+
+Chrome планирует [отказаться от поддержки сторонних файлов cookie](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html) и [предлагает пользователям заблокировать их](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en). Safari [блокирует сторонние файлы cookie](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/), Firefox [блокирует известные сторонние файлы cookie отслеживания](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default), а Edge [предлагает предотвращение отслеживания](https://support.microsoft.com/en-us/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention).
+
+Сторонние файлы cookie становятся устаревшим решением. Взамен появляются **специализированные API** вроде этого, позволяющие выполнять те же задачи, что и сторонние файлы cookie, но с сохранением конфиденциальности.
+
+**В чем отличие Event Conversion Measurement API от сторонних файлов cookie?**
+
+- В отличие от файлов cookie, **он специально создан для измерения конверсий**. Это, в свою очередь, позволит браузерам реализовать усиленную защиту конфиденциальности.
+- Он **более конфиденциальный** и затрудняет узнавание пользователя на двух разных сайтах верхнего уровня, например, для связывания профилей пользователей на стороне издателя и рекламодателя. Посмотрите, как [этот API сохраняет конфиденциальность пользователей](#how-this-api-preserves-user-privacy).
+
+### Первая версия
+
+Этот API находится на **ранней экспериментальной стадии**. В качестве пробной версии источника доступна **первая версия** API. В [будущих версиях](#use-cases) всё может существенно измениться.
+
+### Только клики
+
+Эта версия API поддерживает только **измерение конверсий по кликам**, а [измерение конверсий по показам](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md) находится в стадии общедоступной инкубации.
+
+### Принцип работы
+
+<figure>{% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="Диаграмма: обзор этапов работы API измерения конверсии", width="800", height="496" %}</figure>
+
+Этот API можно использовать с двумя типами ссылок (элементов `<a>`) для рекламы:
+
+- ссылками в контексте **первой стороны**, такими как реклама в социальных сетях или на страницах результатов поиска;
+- ссылками в **стороннем блоке iframe**, например на сайте издателя, который использует стороннего adtech-поставщика.
+
+С помощью этого API такие исходящие ссылки можно настроить со специальными атрибутами для конверсии рекламы:
+
+- пользовательскими данными, которые нужно связать с кликом на объявлении на стороне издателя, например идентификатором клика или идентификатором кампании;
+- сайтом, для которого ожидается конверсия по данному объявлению;
+- конечной отчетной точкой, которая должна получать уведомления об успешных конверсиях;
+- конечной датой и временем, после которых конверсии для этого объявления больше не будут учитываться.
+
+Когда пользователь нажимает на объявление, браузер на локальном устройстве пользователя регистрирует это событие вместе с конфигурацией конверсии и данными о кликах, выбранными в атрибутах измерения конверсии в элементе `<a>`.
+
+Далее пользователь может посетить сайт рекламодателя и выполнить действие, которое рекламодатель или его поставщик рекламных технологий классифицирует как **конверсию**. В этом случае браузер пользователя свяжет клик на объявлении и событие конверсии.
+
+Наконец, браузер планирует **отправку отчета о конверсии** в конечную точку, указанную в атрибутах элемента `<a>`. Этот отчет включает данные о клике на объявлении, который привел к конверсии, а также данные о самой конверсии.
+
+Если для одного клика на объявлении регистрируется несколько конверсий, то планируется отправка соответствующего количества отчетов (до трех на каждый клик на объявлении).
+
+Отчеты отправляются с задержкой: через несколько дней или даже недель после конверсии (о том, почему так происходит, см. в разделе [«Сроки отправки отчетов»](#report-timing)).
+
+## Поддержка браузеров и похожие API
+
+### Поддержка браузеров
+
+Event Conversion Measurement API может поддерживаться:
+
+- Как [пробная версия источника](/origin-trials/). Пробные версии источника позволяют использовать API для **всех посетителей** из определенного [источника](/same-site-same-origin/#origin)**. Чтобы опробовать API на конечных пользователях, необходимо зарегистрировать свой источник для пробной версии источника**. Подробнее о пробной версии источника см. в статье [«Использование API для измерения конверсии»](/using-conversion-measurement).
+- При включении флагов в Chrome 86 и новее. Флаги включают API в браузере **отдельного пользователя**. **Флаги удобны при локальной разработке**.
+
+Подробности о текущем статусе этой функции Chrome смотрите [здесь](https://chromestatus.com/features/6412002824028160).
+
+### Стандартизация
+
+Разработка этого API ведется открыто в группе Web Platform Incubator Community Group ([WICG](https://www.w3.org/community/wicg/)). Он доступен для экспериментов в Chrome.
+
+### Похожие API
+
+WebKit, движок веб-браузера Safari, предлагает похожее решение под названием [Private Click Measurement](https://github.com/privacycg/private-click-measurement). Над ним работает группа Privacy Community Group ([PrivacyCG](https://www.w3.org/community/privacycg/)).
+
+## Как этот API сохраняет конфиденциальность пользователей
+
+С помощью этого API можно измерять конверсии, сохраняя конфиденциальность пользователей, так как их нельзя будет узнать на разных сайтах. Это реализовано благодаря **ограничениям данных**, **зашумлению данных конверсии** и механизмам **управления временем отправки отчетов**.
+
+Давайте рассмотрим подробнее, как работают эти механизмы и что они означают на практике.
+
+### Ограничения данных
+
+Далее под **данными о времени клика или просмотра** понимаются данные, доступные для `adtech.example` в тот момент, когда объявление показывается пользователю, а затем выполняется клик или просмотр. Данные, зарегистрированные во время конверсии, называются **данными времени конверсии**.
+
+Давайте рассмотрим **издателя** `news.example` и **рекламодателя** `shoes.example`. Сторонние скрипты с **adtech-платформы** `adtech.example` работают на сайте издателя `news.example` и показывают объявления рекламодателя `shoes.example`. Кроме того, `shoes.example` включает скрипты `adtech.example` для обнаружения конверсий.
+
+Что `adtech.example` может узнать о пользователях?
+
+#### Со сторонними cookie
+
+<figure>{% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="Диаграмма: как сторонние cookie позволяют узнавать пользователей при их перемещении между сайтами", width="800", height="860" %}</figure>
+
+`adtech.example` использует **сторонний файл cookie в качестве уникального межсайтового идентификатора** для **узнавания пользователя на разных сайтах**. Кроме того, `adtech.example` может получать доступ **одновременно** и к подробным данным о времени кликов или просмотров, и к подробным данным о времени конверсии, а также связывать эти данные между собой.
+
+В результате `adtech.example` может отслеживать поведение пользователя на сайтах между просмотром рекламы, кликом и конверсией.
+
+Поскольку `adtech.example`, вероятно, присутствует на большом количестве сайтов издателей и рекламодателей, а не только на `news.example` и `shoes.example`, поведение пользователя можно отслеживать в интернете.
+
+#### С помощью Event Conversion Measurement API
+
+<figure>{% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="Диаграмма: как API позволяет измерять конверсии без узнавания пользователей при их перемещении между сайтами", width="800", height="643" %}<figcaption> «Идентификатор объявления» на диаграмме файлов cookie и «идентификатор клика»—это идентификаторы для привязки к подробным данным. На этой диаграмме используется название «идентификатор клика», потому что сейчас поддерживается только измерение конверсий по кликам.</figcaption></figure>
+
+`adtech.example` не может использовать межсайтовый идентификатор и, следовательно, **не может узнавать пользователя на разных сайтах**.
+
+- К клику на объявлении можно привязать 64-битный идентификатор.
+- К событию конверсии можно привязать только 3 бита данных конверсии. 3 бита могут соответствовать целочисленному значению от 0 до 7. Это небольшой объем данных, но вполне достаточный для того, чтобы рекламодатели смогли понять, где лучше потратить свой рекламный бюджет в будущем (например, путем обучения моделей данных).
+
+{% Aside %} Данные о кликах и конверсиях никогда не отображаются в среде JavaScript в одном и том же контексте. {% endAside %}
+
+#### Без альтернативы сторонним cookie
+
+Без таких альтернатив сторонним cookie, как Event Conversion Measurement API, конверсии невозможно атрибутировать: если `adtech.example` присутствует как на сайте издателя, так и на сайте рекламодателя, то сможет получить доступ к данным о времени клика или времени конверсии, но не сможет как-либо связать их между собой.
+
+В этом случае конфиденциальность пользователей сохраняется, но рекламодатели не могут оптимизировать свои расходы на рекламу. Именно поэтому требуется такая альтернатива, как Event Conversion Measurement API.
+
+### Зашумление данных конверсии
+
+3 бита, собранные во время конверсии, **зашумляются**.
+
+Например, в реализации Chrome зашумление данных работает так: в 5% случаев API передает случайное 3-битное значение вместо реальных данных конверсии.
+
+Это защищает пользователей от атак на конфиденциальность. Злоумышленник, который попытается использовать данные нескольких конверсий для создания идентификатора, не сможет полностью доверять получаемым данным, что усложнит атаку.
+
+Обратите внимание, что [истинное количество конверсий можно восстановить](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count).
+
+Вот краткий свод данных о кликах и конверсиях:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Данные</th>
+        <th>Размер</th>
+        <th>Пример</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Данные о клике (атрибут <code>impressiondata</code>)</td>
+        <td>64 бит</td>
+        <td>Идентификатор объявления или идентификатор клика</td>
+      </tr>
+      <tr>
+        <td>Данные о конверсии</td>
+        <td>3 бита с зашумлением</td>
+        <td>Целое число от 0 до 7 в зависимости от типа конверсии: создание аккаунта, завершение оплаты и т. д.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Сроки отправки отчета
+
+Если для одного клика на объявлении регистрируется несколько конверсий, то **отправляется соответствующее количество отчетов (до трех на каждый клик на объявлении)**.
+
+Чтобы время конверсии нельзя было использовать для получения дополнительной информации от стороны конверсии и тем самым нарушать конфиденциальность пользователей, этот API не отправляет отчеты о конверсии сразу после конверсии. После первого клика на объявлении создается расписание **окон отправки отчетности** для этого клика. У каждого окна отправки отчетности есть крайний срок, и конверсии, зарегистрированные до этого крайнего срока, будут отправлены в конце этого окна.
+
+Отчеты не обязательно отправляются именно в запланированную дату и время: если в запланированный момент для отправки отчета браузер не будет запущен, то отчет отправится при следующем запуске браузера, то есть иногда через несколько дней или даже недель.
+
+По истечении срока действия (время клика + `impressionexpiry`) конверсии уже не засчитываются: `impressionexpiry` служит датой и временем отсечки, после которой конверсии больше не будут учитываться для данного объявления.
+
+В Chrome планирование отправки отчетов работает так:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>В зависимости от времени конверсии отчет о конверсии (если браузер открыт) отправляется…</th>
+        <th>Количество окон отправки отчетов</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30 дней, значение по умолчанию и максимальное значение</td>
+        <td>
+          <ul>
+            <li>через 2 дня после клика на объявлении</li>
+            <li>или через 7 дней после клика на объявлении</li>
+            <li>или через <code>impressionexpiry</code> = 30 дней после клика на объявлении.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> имеет значение от 7 до 30 дней</td>
+        <td>
+          <ul>
+            <li>через 2 дня после клика на объявлении</li>
+            <li>или через 7 дней после клика на объявлении</li>
+            <li>или через <code>impressionexpiry</code> после клика на объявлении.</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> имеет значение от 2 до 7 дней</td>
+        <td>
+          <ul>
+            <li>через 2 дня после клика на объявлении</li>
+            <li>или через <code>impressionexpiry</code> после клика на объявлении.</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> имеет значение менее 2 дней</td>
+        <td>
+          <li>через 2 дня после клика на объявлении</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>{% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="Хронология и расписание отправки отчетов", width="800", height="462" %}</figure>
+
+Подробнее о расписании см. в разделе документации [«Отправка запланированных отчетов»](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports).
+
+## Пример
+
+{% Aside %} Чтобы увидеть, как всё это работает на практике, запустите [демоверсию](https://goo.gle/demo-event-level-conversion-measurement-api) ⚡️ и изучите соответствующий [код](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement). {% endAside %}
+
+Вот как API регистрирует конверсию и сообщает о ней. Обратите внимание, что поток событий между кликом и конверсией относится только к текущей версии API. Будущие версии этого API [могут отличаться](#use-cases).
+
+### Клик на объявлении (шаги с 1 по 5)
+
+<figure>{% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="Диаграмма: клик на объявлении и хранилище кликов", width="800", height="694" %}</figure>
+
+Элемент `<a>` загружается на сайт издателя в блок iframe с помощью `adtech.example`.
+
+Разработчики adtech-платформы настроили элемент `<a>` с такими атрибутами измерения конверсии:
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+Этот код определяет следующие атрибуты:
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Атрибут</th>
+        <th>Значение по умолчанию, максимум и минимум</th>
+        <th>Пример</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code> (обязательный): <b>64-битный</b> идентификатор, который привязывается к клику на объявлении.</td>
+        <td>(нет значения по умолчанию)</td>
+        <td>Динамически генерируемый идентификатор клика, например 64-битное целое число: <code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code> (обязательный): <b><a href="/same-site-same-origin/#site" noopener="">eTLD + 1</a></b>, где ожидается конверсия для данного объявления.</td>
+        <td>(нет значения по умолчанию)</td>
+        <td>
+<code>https://advertiser.example</code>.<br> Если  <code>conversiondestination</code> имеет значение <code>https://advertiser.example</code>, то атрибуты будут регистрироваться для конверсии как на <code>https://advertiser.example</code>, так и на <code>https://shop.advertiser.example</code>.<br> То же самое происходит, если <code>conversiondestination</code> имеет значение <code>https://shop.advertiser.example</code>: конверсия учитывается как на <code>https://advertiser.example</code>, так и на <code>https://shop.advertiser.example</code>.</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code> (необязательный): время отсечки в миллисекундах, до которого конверсии могут регистрироваться для данного объявления.</td>
+        <td>
+<code>2592000000</code> = 30 дней (в миллисекундах).<br><br> Максимум: 30 дней (в миллисекундах).<br><br> Минимум: 2 дня (в миллисекундах).</td>
+        <td>Через десять дней после клика: <code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code> (необязательный): конечный адрес для отправки отчетов о подтвержденных конверсиях.</td>
+        <td>Источник верхнего уровня страницы, на которую добавлен ссылочный элемент.</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code>: предполагаемый конечный адрес для клика на объявлении.</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Несколько примечаний к примеру:
+
+- В атрибутах API и в предложении API используется термин «показ» (impression), хотя пока что поддерживаются только клики. В будущих версиях API термины могут измениться.
+- Объявление не обязательно должно находиться в блоке iframe, но данный пример строится именно на этом.
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- Для потоков с навигацией через `window.open` или `window.location` атрибуты не регистрируются.
+
+{% endAside %}
+
+Когда пользователь нажимает на объявление, он попадает на сайт рекламодателя. После подтверждения навигации браузер сохраняет объект, включающий в себя `impressiondata`, `conversiondestination`, `reportingorigin` и `impressionexpiry`:
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### Конверсия и планирование отправки отчетов (шаги с 6 по 9)
+
+<figure>{% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="Диаграмма: конверсия и планирование отправки отчетов", width="800", height="639" %}</figure>
+
+Сразу после клика на объявлении или позднее, например на следующий день, пользователь посещает `advertiser.example`, просматривает ассортимент спортивной обуви, выбирает себе пару кроссовок и переходит к оплате. В этом случае `advertiser.example` добавит пиксель на страницу оформления заказа:
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example` получает этот запрос и классифицирует его как конверсию, а затем запрашивает у браузера регистрацию конверсии. Далее `adtech.example` сжимает все данные конверсии в 3 бита, получая целое число от 0 до 7, например число 2, если оно соответствует **действию оплаты**.
+
+После этого `adtech.example` отправляет браузеру определенное перенаправление для регистрации конверсии:
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %}. URL-адреса `.well-known`—это особые URL-адреса, которые позволяют программным средствам и серверам легко находить необходимую информацию или ресурсы для сайта, например, на какой странице пользователь может [изменить свой пароль](/change-password-url/). Здесь `.well-known` используется только для того, чтобы браузер распознал специальный запрос на конверсию. Этот запрос фактически отменяется браузером. {% endAside %}
+
+Браузер получает этот запрос и, обнаружив ссылку `.well-known/register-conversion`, выполняет следующие действия:
+
+- поиск всех кликов на объявлениях в хранилище, которые соответствуют значению `conversiondestination` (так как конверсия получена по URL-адресу, который был зарегистрирован как `conversiondestination`, когда пользователь нажал на объявление), и определение клика на объявлении, который произошел на сайте издателя днем раньше;
+- регистрацию конверсии для этого клика на объявлении.
+
+Одной конверсии могут соответствовать и несколько кликов на объявлении: например, если пользователь нажмет на объявление для `shoes.example` как на `news.example`, так и на `weather.example`. В этом случае регистрируется несколько конверсий.
+
+Теперь браузер знает, что ему необходимо сообщить adtech-серверу об этой конверсии, а именно об источнике `reportingorigin`, который указан как в элементе `<a>`, так и в запросе пикселя (`adtech.example`).
+
+Для этого браузер планирует отправку **отчета** о конверсии—большого массива двоичных данных, содержащего данные о кликах (с сайта издателя) и данные о конверсиях (от рекламодателя). В этом примере пользователь совершил конверсию через день после клика. Таким образом, отправка отчета запланирована на следующий день, то есть через два дня после клика, если браузер запущен.
+
+### Отправка отчета (шаги 10 и 11)
+
+<figure>{% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="Диаграмма: браузер отправляет отчет", width="800", height="533" %}</figure>
+
+По достижении запланированного срока отправки отчета браузер отправляет **отчет** о конверсии, а именно высылает HTTP POST источнику отчета, указанному в элементе `<a>` (`adtech.example`), например:
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+В число параметров входят:
+
+- данные, связанные с исходным кликом на объявлении (`impression-data`);
+- данные, связанные с конверсией, [вероятно зашумленные](#noising-of-conversion-data);
+- ценность конверсии, связанной с кликом: этот API реализует модель **атрибуции по последнему клику**, поэтому самому последнему подходящему клику на объявлении присваивается ценность 100, а всем остальным подходящим кликам на объявлении присваивается ценность 0.
+
+Получив такой запрос, adtech-сервер может извлечь из него `impression-data` и `conversion-data`, то есть отчет о конверсии:
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### Последующие конверсии и истечение срока действия
+
+Далее пользователь может снова совершить конверсию, например купить теннисную ракетку на сайте `advertiser.example` вместе с кроссовками. Тогда будет иметь место аналогичный поток событий:
+
+- adtech-сервер отправит браузеру запрос на конверсию;
+- браузер сопоставит эту конверсию с кликом на объявлении, запланирует отправку отчета и позднее отправит его adtech-серверу.
+
+По истечении времени `impressionexpiry` любые конверсии для этого клика на объявлении перестанут учитываться, а сам клик на объявлении будет удален из хранилища браузера.
+
+## Случаи применения
+
+### Что поддерживается в текущей версии
+
+- измерение конверсий по кликам: можно определять, какие клики на объявлениях приводят к конверсиям, и получать примерную информацию о конверсиях;
+- сбор данных для оптимизации выбора рекламных мест, например с помощью моделей машинного обучения.
+
+### Что не поддерживается в текущей версии
+
+Следующие функции пока что не поддерживаются, но могут появиться в будущих версиях этого API или в [Aggregate](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md):
+
+- измерение конверсий по показам;
+- [несколько конечных точек приема отчетов](https://github.com/WICG/conversion-measurement-api/issues/29);
+- [веб-конверсии, начатые в приложении для iOS/Android](https://github.com/WICG/conversion-measurement-api/issues/54);
+- измерение прироста числа конверсий/инкрементность: измерение причинных различий в поведении конверсий путем измерения разницы между тестовой группой, которая увидела рекламу, и контрольной группой, которая ее не увидела;
+- модели атрибуции, не основанные на последнем клике;
+- варианты использования, требующие большего объема информации о конверсии, например, с детализацией по стоимости покупок или категориям товаров.
+
+Прежде чем эти и другие функции начнут поддерживаться, **в API необходимо добавить дополнительные средства защиты конфиденциальности** (зашумление, уменьшение количества бит или иные ограничения).
+
+Обсуждение дополнительных возможных функций ведется открыто в разделе [**вопросов** в репозитории предложений API](https://github.com/WICG/conversion-measurement-api/issues).
+
+{% Aside %} Не нашли нужный вам вариант использования? Или хотите оставить отзыв об API? [Поделитесь своим мнением](#share-your-feedback). {% endAside %}
+
+### Что еще может измениться в будущих версиях
+
+- Данный API находится на ранней экспериментальной стадии. В будущих версиях API может претерпеть существенные изменения, некоторые из которых перечислены ниже. Так как цель этого API—измерять конверсии при сохранении конфиденциальности пользователей, в него могут вноситься любые изменения, способствующие более эффективному решению этой задачи.
+- Название API и атрибутов могут меняться.
+- Данные о кликах и конверсиях могут не требовать кодирования.
+- Ограничение в 3 бита для данных о конверсии может увеличиться или уменьшиться.
+- [Могут быть добавлены дополнительные функции](#what-is-not-supported-in-this-iteration) и **дополнительные средства защиты конфиденциальности** (зашумление, уменьшение количества бит или иные ограничения), если это потребуется для новых функций.
+
+Чтобы сразу узнавать о новых функциях и участвовать в обсуждениях, изучайте [репозиторий](https://github.com/WICG/conversion-measurement-api/issues) предложения на GitHub и присылайте свои идеи.
+
+## Попробуйте сами
+
+### Запустите демоверсию
+
+Запустите [демоверсию](https://goo.gle/demo-event-level-conversion-measurement-api) и обязательно следуйте инструкциям по началу работы с ней.
+
+Пишите в Твиттер [@maudnals](https://twitter.com/maudnals?lang=en) или [@ChromiumDev](https://twitter.com/ChromiumDev), если у вас возникнут какие-либо вопросы о демоверсии!
+
+### Поэкспериментируйте с API
+
+Если вы планируете поэкспериментировать с API (локально или с конечными пользователями), изучите статью [«Использование API для измерения конверсий»](/using-conversion-measurement).
+
+### Поделитесь своим мнением
+
+**Ваш отзыв очень важен**, так как необходимые вам варианты использования могут быть реализованы в новых API для измерения конверсии, что принесет пользу и другим разработчикам.
+
+- Чтобы сообщить об ошибке в реализации Chrome, [создайте сообщение об ошибке](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A).
+- Чтобы поделиться отзывами и обсудить варианты использования Chrome API, создайте новую задачу или участвуйте в обсуждении уже существующих в [репозитории предложений API](https://github.com/WICG/conversion-measurement-api/issues). Обсудить API WebKit/Safari и варианты его использования тоже можно в [репозитории предложений API](https://github.com/privacycg/private-click-measurement/issues).
+- Чтобы обсудить варианты использования рекламы и обменяться мнениями с отраслевыми экспертами, вступайте в [группу Web Advertising Business Group](https://www.w3.org/community/web-adv/). Для обсуждения API WebKit/Safari присоединяйтесь к [группе Privacy Community Group](https://www.w3.org/community/privacycg/).
+
+### Следите за новостями
+
+- По мере сбора отзывов разработчиков и вариантов использования Event Conversion Measurement API будет развиваться. [Следите за обновлениями в репозитории](https://github.com/WICG/conversion-measurement-api/) предложения на GitHub.
+- Следите также за развитием [Aggregate Conversion Measurement API](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md), который дополнит этот API.
+
+*Большое спасибо за помощь и отзывы всем рецензентам, особенно Чарли Харрисону, Джону Делани, Майклу Клеберу и Кейси Баски.*
+
+*Главное изображение взято у William Warby/@wawarby на [Unsplash](https://unsplash.com/photos/WahfNoqbYnM) и отредактировано.*
diff --git a/src/site/content/ru/blog/coop-coep/index.md b/src/site/content/ru/blog/coop-coep/index.md
new file mode 100644
index 00000000000..46adbc4d3e2
--- /dev/null
+++ b/src/site/content/ru/blog/coop-coep/index.md
@@ -0,0 +1,289 @@
+---
+layout: post
+title: Как настроить межсайтовую изоляцию с помощью COOP и COEP
+subhead: |-
+  Используйте COOP и COEP, чтобы настроить изолированную среду с несколькими источниками и включить мощные функции, такие как SharedArrayBuffer,
+  performance.measureUserAgentSpecificMemory() и таймер высокой точности.
+description: Некоторые веб-API повышают риск атак по сторонним каналам, например, Spectre. Чтобы уменьшить этот риск, браузеры предлагают изолированную среду на основе согласия, называемую межсайтовой изоляцией. Используйте COOP и COEP, чтобы создать такую среду и включить мощные функции, такие как SharedArrayBuffer, performance.measureUserAgentSpecificMemory() или таймер высокой точности.
+authors:
+  - agektmr
+hero: image/admin/Rv8gOTwZwxr2Z7b13Ize.jpg
+alt: Иллюстрация человека, просматривающего веб-сайт со всплывающим окном, встроенным фреймом и изображением.
+date: 2020-04-13
+updated: 2021-11-26
+tags:
+  - blog
+  - security
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/register_trial/2780972769901281281"
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+`SharedArrayBuffer` в десктопной версии Chrome требует межсайтовой изоляции, начиная с Chrome 92. Подробнее [читайте в обновлениях SharedArrayBuffer в Android Chrome 88 и Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/).
+
+{% endAside %}
+
+**Обновления**
+
+- **5 августа 2021 г.**: JS Self-Profiling API был упомянут как один из API-интерфейсов, требующих межсайтовой изоляции, но из-за [недавнего изменения направления](https://github.com/shhnjk/shhnjk.github.io/tree/main/investigations/js-self-profiling#conclusion) он был удален.
+- **6 мая 2021 г.**: Основываясь на отзывах и сообщениях о проблемах, мы решили скорректировать временную шкалу для того, чтобы ограничить использование `SharedArrayBuffer` на сайтах без изоляции между источниками в Chrome M92.
+- **16 апреля 2021 г.**: добавлены примечания о [новом режиме без учетных данных COEP](https://github.com/mikewest/credentiallessness/) и [всплывающих окнах COOP same-origin-allow-popups, которые будут смягченным условием](https://github.com/whatwg/html/issues/6364) для межсайтовой изоляции.
+- **5 марта 2021 г.**: Удалены ограничения для `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` и функций отладки, которые теперь полностью включены в Chrome 89. Добавлены новые возможности, `performance.now()` и `performance.timeOrigin`, которые будут иметь более высокую точность.
+- **19 февраля 2021 г.**: добавлено примечание о политике функций `allow="cross-origin-isolated"` и функциях отладки в DevTools.
+- **15 октября 2020 г.**: Свойство `self.crossOriginIsolated` доступно в Chrome 87. В связи с этим, `document.domain` является неизменным, когда `self.crossOriginIsolated` возвращает `true`. Метод `performance.measureUserAgentSpecificMemory()` завершает испытания Origin Trial и по умолчанию включен в Chrome 89. Shared Array Buffer в Chrome для Android будет доступен начиная с Chrome 88.
+
+{% YouTube 'XLNJYhjA-0c' %}
+
+Некоторые веб-API повышают риск атак по сторонним каналам, например Spectre. Чтобы снизить этот риск, браузеры предлагают изолированную среду на основе согласия, называемую межсайтовой изоляцией. В состоянии межсайтовой изоляции веб-страница сможет использовать привилегированные функции, в том числе:
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>Описание</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">
+          <code>SharedArrayBuffer</code></a>
+        </td>
+        <td>Требуется для потоков WebAssembly. Доступен в Android Chrome 88. Версия для десктопов в настоящее время включена по умолчанию с помощью <a href="https://www.chromium.org/Home/chromium-security/site-isolation">Site Isolation</a>, но для нее требуется состояние межсайтовой изоляции, и она <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/">будет отключена по умолчанию в Chrome 92</a>.</td>
+      </tr>
+      <tr>
+        <td>
+          <a href="/monitor-total-page-memory-usage/">
+          <code>performance.measureUserAgentSpecificMemory()</code></a>
+        </td>
+        <td>Доступно в Chrome 89.</td>
+      </tr>
+      <tr>
+        <td><a href="https://crbug.com/1180178"><code>performance.now()</code>, <code>performance.timeOrigin</code></a></td>
+        <td>В настоящее время доступно во многих браузерах с разрешением до 100 микросекунд или выше. При межсайтовой изоляции разрешение может составлять 5 микросекунд или выше.</td>
+      </tr>
+    </tbody>
+    <caption>Функции, которые будут доступны в состоянии межсайтовой изоляции.</caption>
+  </table>
+</div>
+
+Состояние межсайтовой изоляции также предотвращает модификации `document.domain`. (Возможность изменять `document.domain` позволяет взаимодействовать между документами одного и того же сайта и считается лазейкой в политике одного и того же источника.)
+
+Чтобы выбрать состояние межсайтовой изоляции, необходимо отправить следующие HTTP-заголовки в основной документ:
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+Эти заголовки инструктируют браузер блокировать загрузку ресурсов или фреймов, которые не были загружены документами из разных источников, и предотвращают непосредственное взаимодействие окон из разных источников с вашим документом. Это также означает, что загружаемые ресурсы из разных источников требуют согласия.
+
+Вы можете определить, находится ли веб-страница в состоянии межсайтовой изоляции, проверив значение [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated).
+
+В данной статье показано, как использовать эти новые заголовки. В [следующей статье](/why-coop-coep) я предоставлю больше информации и контекста.
+
+{% Aside %}
+
+Эта статья предназначена для тех, кто хотел бы подготовить свои веб-сайты для использования `SharedArrayBuffer`, потоков WebAssembly, `performance.measureUserAgentSpecificMemory()` или таймера высокой точности на всех браузерных платформах с большей надежностью.
+
+{% endAside %}
+
+{% Aside 'key-term' %} В этой статье используется много похожей терминологии. Чтобы было понятнее, давайте сначала определим эти термины:
+
+- [COEP: Политика встраивания из разных источников (Cross Origin Embedder Policy)](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP: Политика открытия из разных источников (Cross Origin Opener Policy)](https://github.com/whatwg/html/pull/5334/files)
+- [CORP: Политика ресурсов из разных источников (Cross Origin Resource Policy)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS: Совместное использование ресурсов между источниками (Cross Origin Resource Sharing)](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB: Блокировка чтения из разных источников (Cross Origin Read Blocking)](https://www.chromium.org/Home/chromium-security/corb-for-developers) {% endAside %}
+
+## Развертывание COOP и COEP для межсайтовой изоляции
+
+{% Aside %} Изучите практические шаги в [Руководстве по включению межсайтовой изоляции](/cross-origin-isolation-guide/). {% endAside %}
+
+### Интеграция COOP и COEP
+
+#### 1. Задайте заголовок `Cross-Origin-Opener-Policy: same-origin` в документе верхнего уровня
+
+Если включить `COOP: same-origin` в документе верхнего уровня, окна с одинаковым источником и окна, открытые из документа, будут иметь отдельную группу контекста просмотра, если они не находятся в одном источнике с одинаковыми настройками COOP. Таким образом, для открытых окон принудительно включена изоляция, а взаимодействие между обоими окнами отключено.
+
+{% Aside 'caution' %}
+
+Это нарушит те интеграции, которым требуется взаимодействие между окнами из разных источников, например, OAuth и платежные формы. Чтобы хотя бы частично решить эту проблему, мы [изучаем возможность ослабления условия](https://github.com/whatwg/html/issues/6364) включения межсайтовой изоляции для `Cross-Origin-Opener-Policy: same-origin-allow-popups`, что позволит сохранить связь с окном, которое открылось самостоятельно.
+
+Если вам не удается включить межсайтовую изоляцию из-за этой проблемы, рекомендуем [зарегистрироваться для испытаний Origin Trial](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) и подождать, пока не станет доступно новое условие. Мы не планируем завершать испытания до тех пор, пока эта проблема не будет разрешена.
+
+{% endAside %}
+
+Группа контекста просмотра — это группа вкладок, окон или фреймов, которые используют один и тот же контекст. Например, если веб-сайт (`https://a.example`) открывает всплывающее окно (`https://b.example`), открывающее и всплывающее окна используют один и тот же контекст просмотра, и они имеют доступ друг к другу через DOM API, такие как `window.opener`.
+
+{% Img src="image/admin/g42eZMpIKNbUL0cN6yjC.png", alt="Группа контекста просмотра", width="470", height="469" %}
+
+Вы можете проверить, находятся ли открывающее и открытое окна в отдельных группах контекста просмотра [в DevTools](#devtools-coop).
+
+{% Aside 'codelab' %} [Посмотрите эффект различных параметров COOP](https://cross-origin-isolation.glitch.me/coop). {% endAside %}
+
+#### 2. Убедитесь, что для ресурсов включены CORP или CORS
+
+Убедитесь, что все ресурсы на странице загружены с заголовками CORP или CORS HTTP. Этот шаг необходим для [четвертого шага, включающего COEP](#enable-coep).
+
+Вот что нужно сделать в зависимости от характера ресурса:
+
+- Если ожидается, что ресурс будет загружен **только из того же источника**, установите заголовок `Cross-Origin-Resource-Policy: same-origin`.
+- Если ожидается, что ресурс будет загружен **только с того же сайта, но из другого источника**, установите заголовок `Cross-Origin-Resource-Policy: same-site`.
+- Если ресурс **загружается из перекрестных источников под вашим контролем**, установите заголовок `Cross-Origin-Resource-Policy: cross-origin`, если это возможно.
+- Для ресурсов из разных источников, которые вы не контролируете:
+    - Используйте атрибут `crossorigin` в теге загрузки HTML, если ресурс обслуживается с помощью CORS. (Например, `<img src="***" crossorigin>`.)
+    - Попросите владельца ресурса о поддержке CORS или CORP.
+- Для окон iframe используйте заголовки CORP и COEP следующим образом: `Cross-Origin-Resource-Policy: same-origin` (или `same-site`, `cross-origin` в зависимости от контекста) и `Cross-Origin-Embedder-Policy: require-corp`.
+
+{% Aside 'gotchas' %} Вы можете включить межсайтовую изоляцию для документа, встроенного в iframe, применив политику функции `allow="cross-origin-isolated"` к тегу `<iframe>` и соблюдая аналогичные условия, описанные в этом документе. Обратите внимание, что вся цепочка документов, включая родительские фреймы и дочерние фреймы, также должна быть изолирована от разных источников. {% endAside %}
+
+{% Aside 'key-term' %} Важно понимать разницу между «одинаковым сайтом» (same-site) и «одинаковым источником» (same-origin). Узнайте о различиях в разделе «[Понятия same-site и same-origin](/same-site-same-origin)». {% endAside %}
+
+#### 3. Используйте HTTP-заголовок COEP Report-Only для оценки встроенных ресурсов
+
+Перед тем, как полностью включить COEP, вы можете выполнить формальный прогон, используя заголовок `Cross-Origin-Embedder-Policy-Report-Only`, чтобы проверить, действительно ли работает политика. Вы будете получать отчеты без блокировки встроенного контента. Рекурсивно примените это ко всем документам. Информацию о HTTP-заголовке только для отчетов см. в разделе [Наблюдение за проблемами с помощью Reporting API](#observe-issues-using-the-reporting-api).
+
+#### 4. Включите COEP {: #enable-coep }
+
+Убедившись, что все работает и все ресурсы могут быть успешно загружены, примените HTTP-заголовок `Cross-Origin-Embedder-Policy: require-corp` ко всем документам, включая те, которые встроены через iframe.
+
+{% Aside 'codelab' %} [Посмотрите эффект различных параметров COEP/CORP](https://cross-origin-isolation.glitch.me/coep). {% endAside %}
+
+{% Aside %} [Squoosh](https://squoosh.app) (PWA для оптимизации изображений) [теперь использует COOP/COEP](https://github.com/GoogleChromeLabs/squoosh/pull/829/files#diff-316f969413f2d9a065fcc08c7a5589c088dd1e21deebadccfc5a4372ac5e0cbbR22-R23) для получения доступа к потокам Wasm (и Shared Array Buffer), а также в Android Chrome. {% endAside %}
+
+{% Aside 'caution' %}
+
+Мы изучали разные способы масштабирования `Cross-Origin-Resource-Policy`, поскольку межсайтовая изоляция требует явного разрешения на загрузку для всех вспомогательных ресурсов. В итоге было решено пойти от обратного и ввести [новый «безучетный» (credentialless) режим COEP](https://github.com/mikewest/credentiallessness/), который позволяет загружать ресурсы без заголовка CORP, удаляя все их учетные данные. Мы еще окончательно не определились с тем, как это должно работать, но надеемся, что данный режим снизит для вас трудоемкость проверки того, что вспомогательные ресурсы отправляют заголовок `Cross-Origin-Resource-Policy`.
+
+Если вам не удается включить межсайтовую изоляцию из-за этой проблемы, рекомендуем [зарегистрироваться для испытаний Origin Trial](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) и подождать, пока не появится новый режим. Мы не планируем завершать испытания до тех пор, пока новый режим не будет доступен.
+
+{% endAside %}
+
+### Определение, удалась ли изоляция, с помощью `self.crossOriginIsolated`
+
+Свойство `self.crossOriginIsolated` возвращает `true`, когда веб-страница находится в состоянии межсайтовой изоляции и все ресурсы и окна изолированы в одной и той же группе контекста просмотра. Вы можете использовать этот API, чтобы определить, успешно ли вы изолировали группу контекста просмотра и получили ли доступ к мощным функциям, таким как `performance.measureUserAgentSpecificMemory()`.
+
+### Отладка с помощью Chrome DevTools
+
+{% YouTube 'D5DLVo_TlEA'%}
+
+Для ресурсов, которые отображаются на экране, таких как изображения, довольно легко обнаружить проблемы COEP, поскольку запрос будет заблокирован, а на странице будет указано отсутствующее изображение. Однако для ресурсов, которые не обязательно имеют визуальный эффект, например, сценарии или стили, проблемы COEP могут остаться незамеченными. Для них используйте панель «Сеть» в DevTools. Если есть проблема с COEP, вы должны увидеть `(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)` в столбце «**Статус**».
+
+<figure>{% Img src="image/admin/iGwe4M1EgHzKb2Tvt5bl.jpg", alt="Проблемы с COEP в столбце «Статус» на панели «Сеть».", width="800", height="444" %}</figure>
+
+Затем вы можете нажать на запись, чтобы увидеть более подробную информацию.
+
+<figure>{% Img src="image/admin/1oTBjS9q8KGHWsWYGq1N.jpg", alt="Подробная информация о проблеме COEP отображается на вкладке «Заголовки» после щелчка по сетевому ресурсу на панели «Сеть».", width="800", height="241" %}</figure>
+
+Вы также можете определить статус iframe и всплывающих окон через панель «**Приложения**». Перейдите в раздел «Фреймы» слева и разверните «верх», чтобы увидеть разбор структуры ресурсов.
+
+<span id="devtools-coep-iframe">Вы можете проверить статус iframe, например, доступность SharedArrayBuffer и т. д.</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9titfaieIs0gwSKnkL3S.png", alt="Chrome DevTools iframe Inspector", width="800", height="480" %}</figure>
+
+<span id="devtools-coop">Вы также можете проверить статус всплывающих окон, например, изолированы ли они от разных источников.</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kKvPUo2ZODZu8byK7gTB.png", alt="Инспектор всплывающих окон Chrome DevTools", width="800", height="480" %}</figure>
+
+### Наблюдение за проблемами с помощью Reporting API
+
+[Reporting API](/reporting-api) — еще один механизм, с помощью которого вы можете обнаруживать различные проблемы. Вы можете настроить Reporting API так, чтобы браузер ваших пользователей отправлял отчет всякий раз, когда COEP блокирует загрузку ресурса или COOP изолирует всплывающее окно. Chrome поддерживает Reporting API с версии 69 для различных целей, включая COEP и COOP.
+
+{% Aside %}
+
+Уже используете Reporting API с заголовком `Report-To`? Chrome переходит на новую версию Reporting API, которая заменяет `Report-To` на `Reporting-Endpoints`; подумайте о переходе на новую версию. Подробности см. в статье «[Переход на Reporting API v1](/reporting-api-migration)».
+
+{% endAside %}
+
+Чтобы узнать, как настроить Reporting API и сервер для получения отчетов, перейдите в раздел «[Использование Reporting API](/reporting-api/#using-the-reporting-api)».
+
+#### Пример отчета COEP
+
+Пример полезной нагрузки [отчета COEP](https://html.spec.whatwg.org/multipage/origin.html#coep-report-type), когда ресурс из другого источника заблокирован, выглядит следующим образом:
+
+```json
+[{
+  "age": 25101,
+  "body": {
+    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
+    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
+    "destination": "image",
+    "disposition": "enforce",
+    "type": "corp"
+  },
+  "type": "coep",
+  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
+}]
+```
+
+{% Aside 'caution' %} `blocked-url` используется только для обратной совместимости и в [конечном итоге будет удален](https://github.com/whatwg/html/pull/5848). {% endAside %}
+
+#### Пример отчета COOP
+
+Пример полезной нагрузки [отчета COOP](https://html.spec.whatwg.org/multipage/origin.html#reporting) при изолированном открытии всплывающего окна выглядит так:
+
+```json
+[{
+  "age": 7,
+  "body": {
+    "disposition": "enforce",
+    "effectivePolicy": "same-origin",
+    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
+    "type": "navigation-from-response"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+Когда разные группы контекста просмотра пытаются получить доступ друг к другу (в режиме «только отчет»), COOP также отправляет отчет. Например, отчет при `postMessage()` будет выглядеть так:
+
+```json
+[{
+  "age": 51785,
+  "body": {
+    "columnNumber": 18,
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "lineNumber": 83,
+    "property": "postMessage",
+    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
+    "type": "access-from-coop-page-to-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+},
+{
+  "age": 51785,
+  "body": {
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "property": "postMessage",
+    "type": "access-to-coop-page-from-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+## Заключение
+
+Используйте комбинацию заголовков HTTP COOP и COEP, чтобы перевести веб-страницу в особое состояние межсайтовой изоляции. Вы можете проверить значение `self.crossOriginIsolated`, чтобы определить, находится ли веб-страница в состоянии межсайтовой изоляции.
+
+Мы будем обновлять этот пост, поскольку в этом состоянии межсайтовой изоляции будут доступны новые функции, а также будут внесены дальнейшие улучшения в DevTools, связанные с COOP и COEP.
+
+## Ресурсы
+
+- [Зачем вам нужна межсайтовая изоляция для мощных функций](/why-coop-coep/)
+- [Руководство по включению межсайтовой изоляции](/cross-origin-isolation-guide/)
+- [Обновления SharedArrayBuffer в Android Chrome 88 и Desktop Chrome 92](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
+- [Отслеживание общего использования памяти веб-страницей с помощью метода `measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/)
diff --git a/src/site/content/ru/blog/css-marker-pseudo-element/index.md b/src/site/content/ru/blog/css-marker-pseudo-element/index.md
new file mode 100644
index 00000000000..40902881fd1
--- /dev/null
+++ b/src/site/content/ru/blog/css-marker-pseudo-element/index.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: "Пользовательские маркеры с помощью CSS ::marker"
+subhead: Теперь можно легко настроить цвет, размер и тип пункта или маркера при использовании <ul> или <ol>.
+authors:
+  - adamargyle
+  - loirooriol
+description: Теперь можно легко настроить цвет, размер и тип пункта или маркера при использовании <ul> или <ol>.
+tags:
+  - blog
+  - css
+date: 2020-09-02
+updated: 2020-09-02
+scheduled: 'true'
+hero: image/admin/GPGTyXJOh0cH0wa1PvXH.png
+thumbnail: image/admin/jbdOq0tGGzobMtaBsajn.png
+alt: Отображение анатомии одного элемента списка путем помещения отдельных рамок вокруг маркера и текста
+feedback:
+  - api
+---
+
+Благодаря Igalia при поддержке Bloomberg мы наконец-то можем избавиться от костылей для стилей списков. Посмотрите!
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOmqXrog0YoriZqqIzEZ.png", alt="", width="665", height="384" %} <figcaption> <a href="https://glitch.com/edit/#!/marker-fun-example">Посмотреть в источнике</a> </figcaption></figure>
+
+Благодаря селектору [CSS `::marker`](https://www.w3.org/TR/css-lists-3/#marker-pseudo) мы можем изменять содержимое и некоторые стили маркеров и чисел.
+
+## Совместимость с браузерами
+
+`::marker` поддерживается в Firefox для настольных компьютеров и Android, Safari для настольных компьютеров и iOS (только свойства `color` и `font-*`, см. [ошибку 204163](https://bugs.webkit.org/show_bug.cgi?id=204163)), а также в браузерах для настольных компьютеров и Android на базе Chromium. См. обновления в таблице [совместимости с браузерами](https://developer.mozilla.org/docs/Web/CSS/::marker#Browser_compatibility) MDN.
+
+## Псевдоэлементы
+
+Рассмотрим следующий базовый маркированный список HTML:
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
+  <li>Dolores quaerat illo totam porro</li>
+  <li>Quidem aliquid perferendis voluptates</li>
+  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
+  <li>Fuga</li>
+</ul>
+```
+
+В результате получается такой ожидаемый рендеринг:
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-plain-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Точка в начале каждого элемента `<li>` является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.
+
+Сегодня мы рады поговорить о псевдоэлементе `::marker`, который дает возможность стилизовать элемент маркера, который браузер создает за вас.
+
+{% Aside 'key-term' %} Псевдоэлемент представляет элемент в документе, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдоэлемента `p::first-line`, даже если нет HTML-элемента, обертывающего эту строку текста. {% endAside %}
+
+### Создание маркера
+
+Блок псевдоэлемента маркера `::marker` автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдоэлементом `::before`.
+
+```css
+li::before {
+  content: "::before";
+  background: lightgray;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  margin-inline-end: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 340px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-before-example?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Обычно элементы списка являются элементами HTML `<li>`, но другие элементы также могут стать элементами списка с помощью `display: list-item` .
+
+```html
+<dl>
+  <dt>Lorem</dt>
+  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
+  <dd>Dolores quaerat illo totam porro</dd>
+
+  <dt>Ipsum</dt>
+  <dd>Quidem aliquid perferendis voluptates</dd>
+</dl>
+```
+
+```css/1
+dd {
+  display: list-item;
+  list-style-type: "🤯";
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-definition-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### Стилизация маркера
+
+До `::marker` списки можно было стилизовать с помощью `list-style-type` и `list-style-image`, чтобы изменить символ элемента списка с помощью одной строки CSS:
+
+```css
+li {
+  list-style-image: url(/right-arrow.svg);
+  /* ИЛИ */
+  list-style-type: '👉';
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д.?! Вот где на помощь приходит `::marker`. Он позволяет индивидуально и глобально выбирать эти псевдоэлементы из CSS:
+
+```css
+li::marker {
+  color: hotpink;
+}
+
+li:first-child::marker {
+  font-size: 5rem;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-introduction?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'caution' %} Если в приведенном выше списке нет розовых маркеров, значит, `::marker` не поддерживается вашим браузером. {% endAside %}
+
+Свойство `list-style-type` дает очень ограниченные возможности для стилизации. Псевдоэлемент `::marker` означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.
+
+Тем не менее, вы не можете использовать все свойства CSS для `::marker`. Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы экспериментируете с этим псевдоэлементом, а результата нет, ознакомьтесь с приведенным ниже списком — он описывает, что можно и что нельзя сделать с помощью CSS:
+
+#### Допустимые свойства CSS для `::marker`
+
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+Изменение содержимого `::marker` выполняется с помощью `content` вместо `list-style-type`. В следующем примере для первого элемента используется стиль `list-style-type`, а для второго — `::marker`.Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании `::marker` мы можем выбирать только блок маркера, а не текст.
+
+Также обратите внимание на то, что отключенное свойство `background` не действует.
+
+<div class="switcher">{% Compare 'worse', 'Стили списков' %} ```css li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; } ```</div>
+<p data-md-type="paragraph">{% CompareCaption %} Смешанный результат для маркера и элемента списка {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'Стили маркеров' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">li:nth-child(2)::marker {
+  content: '!';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+</code></pre>
+<p data-md-type="paragraph">{% CompareCaption %} Акцентированный результат для маркера и элемента списка {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+<br>
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-vs-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'gotchas' %} В Chromium `white-space` работает только с внутренними маркерами. Для внешних маркеров регулятор стиля всегда принудительно задает `white-space: pre`, чтобы сохранить завершающий пробел. {% endAside %}
+
+#### Изменение содержимого маркера
+
+Вот несколько способов стилизации маркеров.
+
+**Изменение всех пунктов списка**
+
+```css
+li {
+  list-style-type: "😍";
+}
+
+/* ИЛИ */
+
+li::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-all?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**Изменение только одного пункта списка**
+
+```css
+li:last-child::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-one?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**Замена маркера списка на SVG**
+
+```css
+li::marker {
+  content: url(/heart.svg);
+  content: url(#heart);
+  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-inline-svg?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**Изменение нумерованных списков** А что насчет `<ol>`? Маркер в элементе нумерованного списка по умолчанию является числом, а не маркером. В CSS это называется [счетчиками](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters), и у них довольно широкие возможности. У счетчиков даже есть свойства для установки и сброса начала и конца нумерации или переключения цифр на римские. Можем ли мы это стилизовать? Да, и мы можем даже использовать значение содержимого маркера для создания собственного представления нумерации.
+
+```css
+li::marker {
+  content: counter(list-item) "› ";
+  color: hotpink;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-numbered-lists?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### Отладка
+
+Chrome DevTools помогут вам проверить, отладить и изменить стили, применяемые к псевдоэлементам `::marker`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PYKVXEzycrMhQujXsNxQ.png", alt="DevTools открыты и показывают стили из пользовательского агента и пользовательских стилей", width="776", height="574", style="max-inline-size: 480px" %}</figure>
+
+### Будущие стили псевдоэлементов
+
+Вы можете узнать больше о :: marker здесь:
+
+- [Списки, маркеры и счетчики CSS](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/) от [журнала Smashing Magazine](https://www.smashingmagazine.com/)
+- [Подсчет с помощью счетчиков CSS и сетки CSS](https://css-tricks.com/counting-css-counters-css-grid/) от [CSS-Tricks](https://css-tricks.com/)
+- [Использование счетчиков CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) от [MDN](https://developer.mozilla.org/)
+
+Приятно получить контроль над чем-то, что раньше было сложно стилизовать. Возможно, вы захотите стилизовать другие автоматически сгенерированные элементы. Вещи наподобие `<details>` или индикатора автозаполнения поискового ввода, реализация которых различается от браузера к браузеру, могут вас напрягать. Есть способ поделиться тем, что вам нужно — создать желание на [https://webwewant.fyi](https://webwewant.fyi).
diff --git a/src/site/content/ru/blog/css-masking/index.md b/src/site/content/ru/blog/css-masking/index.md
new file mode 100644
index 00000000000..4463beea374
--- /dev/null
+++ b/src/site/content/ru/blog/css-masking/index.md
@@ -0,0 +1,135 @@
+---
+title: Применение эффектов к изображениям с помощью CSS-свойства «mask-image»
+subhead: |2-
+
+  CSS-маски позволяют использовать изображение в качестве слоя маски.
+  Например, можно использовать изображение, SVG или градиент в качестве маски
+  и создать интересный эффект без графического редактора.
+description: |2-
+
+  CSS-маски позволяют использовать изображение в качестве слоя маски.
+  Например, можно использовать изображение, SVG или градиент в качестве маски
+  и создать интересный эффект без графического редактора.
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: A teddy bear wearing a facemask.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+Если [обрезать элемент](/css-clipping) с помощью свойства `clip-path`, то обрезанная область становится невидимой. Чтобы сделать часть изображения непрозрачной или применить к ней другой эффект, нужно использовать маску. В этой статье рассказывается, как использовать свойство [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) в CSS и указать изображение в качестве слоя маски. Есть три варианта: в качестве маски можно использовать файл изображения, SVG или градиент.
+
+## Совместимость с браузерами
+
+Большинство браузеров поддерживают стандартное свойство CSS-маски лишь частично. Для наилучшей совместимости в дополнение к стандартному свойству нужно использовать префикс `-webkit-`. Подробнее о поддержке в браузерах см. страницу [Can I use о CSS-масках](https://caniuse.com/#feat=css-masks).
+
+Поддержка в браузере с использованием префиксного свойства — это, конечно, хорошо, но при использовании маски для показа текста поверх изображения нужно будет позаботиться о случае, если маскирование окажется недоступно. Прежде чем добавлять версию изображения с маской, стоить сделать запросы функций, которые укажут на поддержку `mask-image` или `-webkit-mask-image`, и дать читаемую альтернативу на случай, если маски не поддерживаются.
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* Код, требующий mask-image. */
+}
+```
+
+## Маска с использованием изображения
+
+Свойство `mask-image` работает аналогично `background-image`: для передачи изображения нужно использовать `url()`. На изображении для маски должна быть прозрачная или полупрозрачная область.
+
+Фрагмент исходного изображения под прозрачной областью будет невидим, под полупрозрачной будет видим частично. Разницу можно увидеть во фрагменте на Glitch ниже. Первое фото воздушных шаров — это исходное изображение без маски. Ко второму фото применена маска с белой звездой на полностью прозрачном фоне. Маска на третьем изображении — белая звезда на фоне с градиентом прозрачности.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+В этом примере я также использую свойство `mask-size` со значением `cover`, которое работает так же, как [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size). Вы можете использовать ключевые слова `cover` и `contain` или указать размер фона в единицах длины или в виде процентного значения.
+
+Кроме того, маску, как и фоновое изображение, можно повторять: так из маленькой картинки можно сделать повторяющийся узор.
+
+## Маска с использованием SVG
+
+В качестве маски можно использовать SVG. Здесь есть несколько вариантов. Во-первых, можно вставить элемент `<mask>` в SVG и указать его идентификатор в свойстве `mask-image`.
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Воздушные шары">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="Пример использования маски SVG", width="699", height="490" %}</figure>
+
+Здесь преимущество в том, что маску можно применить к любому элементу HTML, а не только к изображению. К сожалению, такой подход поддерживается только в Firefox.
+
+Однако не всё потеряно: чаще всего нужно применить маску именно к изображению, и в этом случае мы можем включить изображение в SVG.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Маска с использованием градиента
+
+Использование CSS-градиента в качестве маски — это элегантный способ получить замаскированную область, не создавая специальное изображение или SVG.
+
+Используя простой линейный градиент в качестве маски, можно сделать так, чтобы нижняя часть изображения была не слишком тёмной (например, если на ней находится подпись).
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+Использовать можно любой из поддерживаемых типов градиента — есть где развернуться! В следующем примере с помощью радиального градиента формируется круглая маска для выделения подписи.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## Использование нескольких масок
+
+Как и в случае с фоновыми изображениями, для достижения желаемого эффекта можно указать несколько источников макси. Особенно это удобно, если в качестве маски нужно использовать узор, созданный CSS-градиентами. Обычно в них используется несколько фоновых изображений, поэтому из них можно легко сделать маску.
+
+В качестве примера — красивый узор в виде шахматной доски из [этой статьи](https://cssgradient.io/blog/gradient-patterns/). Код с фоновыми изображениями выглядит так:
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Чтобы превратить этот (и любой другой узор для фона) в маску, нужно заменить свойства `background-*` соответствующими свойствами `mask`, включая те, что с префиксом `-webkit`.
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+Используя градиентные узоры на изображениях, можно получить классные эффекты — попробуйте переделать этот код и посмотрите, что получится.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+CSS-маски позволяют сделать изображения и другие элементы HTML более интересными, не используя графический редактор.
+
+*<span>Автор фото — <a href="https://unsplash.com/@juliorionaldo">Хулио Риональдо</a>, платформа Unsplash</span>.*
diff --git a/src/site/content/ru/blog/css-web-vitals/index.md b/src/site/content/ru/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..d5a78260808
--- /dev/null
+++ b/src/site/content/ru/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: CSS для Web Vitals
+subhead: Методы оптимизации Web Vitals, связанные с CSS
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: Многоцветный градиент
+description: В этой статье рассказывается о методах оптимизации Web Vitals, связанных с CSS.
+tags:
+  - blog
+  - performance
+  - css
+---
+
+Приемы, используемые при написании стилей и создании макетов, могут значительно влиять на метрики [Core Web Vitals](/learn-core-web-vitals/). Это особенно справедливо для метрик [Cumulative Layout Shift (CLS)](/cls) (Совокупное смещение макета) и [Largest Contentful Paint (LCP)](/lcp) (Отображение самого крупного элемента содержимого).
+
+В этой статье рассказывается о методах оптимизации Web Vitals, связанных с CSS. Эти методы разделены на группы по различным аспектам страниц: макетам, изображениям, шрифтам, анимации и загрузке. Попутно мы расскажем, как улучшить следующий [пример страницы](https://codepen.io/una/pen/vYyLKvY):
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="Снимок экрана с примером сайта", width="800", height="646" %}
+
+## Макет
+
+### Вставка контента в DOM
+
+При добавлении контента на страницу после того как окружающий контент уже загружен, содержимое страницы сдвигается вниз. Это приводит к [сдвигам макета](/cls/#layout-shifts-in-detail).
+
+Распространенный пример такой проблемы — [уведомления о файлах cookie](/cookie-notice-best-practices/) (особенно размещенные в верхней части страницы). Среди прочих элементов страницы, которые часто приводят к таким сдвигам макета при загрузке, — рекламные объявления и внедренные элементы.
+
+#### Выявление проблемы
+
+С помощью аудита Avoid large layout shifts в в Lighthouse можно выявить сдвинутые элементы страницы. Для нашей демонстрации результаты выглядят следующим образом:
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Аудит Avoid large layout shifts в Lighthouse", width="800", height="500" %}
+
+В этих результатах не указано уведомление о файлах cookie, так как оно не сдвигается при загрузке. Тем не менее при его отображении смещаются расположенные под ним элементы (то есть `div.hero` и `article`) на странице. Дополнительные сведения о выявлении сдвигов макета и их устранении см. в статье «[Устранение сдвигов макета](/debugging-layout-shifts)».
+
+{% Aside %}
+
+Lighthouse анализирует производительность страницы только до события загрузки страницы. Баннеры с уведомлениями о файлах cookie, рекламные объявления и другие виджеты иногда не загружаются до тех пор, пока не будет загружена сама страница. Эти сдвиги макета также доставляют неудобства пользователям, даже если Lighthouse не помечает их.
+
+{% endAside %}
+
+#### Решение проблемы
+
+Разместите уведомление о файлах cookie в нижней части страницы, используя абсолютное или фиксированное позиционирование.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="Уведомление о файлах cookie, отображаемое в нижней части страницы", width="800", height="656" %}
+
+Было:
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+Стало:
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+Другой способ предотвратить смещение макета — зарезервировать место для уведомления о файлах cookie в верхней части экрана. Это тоже эффективный подход. Дополнительные сведения см. в статье «[Рекомендации по уведомлениям о файлах cookie](/cookie-notice-best-practices/)».
+
+{% Aside %}
+
+Уведомление о файлах cookie — это один из нескольких элементов страницы, загрузка которых приводит к сдвигам макета. Чтобы ближе познакомиться с такими элементами, на следующих этапах нашей демонстрации мы не будем использовать уведомление о файлах cookie.
+
+{% endAside %}
+
+## Изображения
+
+### Изображения и метрика Largest Contentful Paint (LCP)
+
+Обычно изображения — самые крупные отображаемые элементы содержимого на странице. Перечень других [элементов страницы, которые могут быть самыми крупными отображаемыми элементами содержимого](/lcp/#what-elements-are-considered), включает блоки текста и изображения элементов poster для видео. Метрика LCP зависит от времени загрузки самого крупного отображаемого элемента содержимого.
+
+Важно отметить, что при каждой загрузке страницы самым крупным отображаемым элементом содержимого могут быть разные элементы в зависимости от того, какое содержимое видит пользователь при первом отображении страницы. Например, в нашей демонстрации потенциальные самые крупные отображаемые элементы содержимого — фон уведомления о файлах cookie, главное изображение и текст статьи.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="Схема, на которой выделен самый крупный отображаемый элемент страницы в различных сценариях.", width="800", height="498" %}
+
+В нашем примере сайта фоновое изображение уведомления о файлах cookie имеет большой размер. Чтобы улучшить метрику LCP и при этом создать нужный эффект, можно нарисовать градиент в CSS, а не загружать изображение.
+
+#### Решение проблемы
+
+Измените элемент CSS `.banner` и используйте градиент CSS, а не изображение.
+
+Было:
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+Стало:
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### Изображения и сдвиги макета
+
+Браузеры могут определять размер изображений только после их загрузки. Если загрузка изображения выполняется после рендеринга страницы и при этом для изображения не зарезервировано место, то при отображении изображения произойдет сдвиг макета. В нашей демонстрации загрузка главного изображения приводит к сдвигу макета.
+
+{% Aside %} Сдвиги макета при отображении изображений особенно заметны, если изображения загружаются медленно, например при низкоскоростном соединении или при загрузке изображения с особенно большим размером файла. {% endAside %}
+
+#### Выявление проблемы
+
+Выявить изображения без явно заданных атрибутов `width` и `height` можно с помощью аудита Image elements have explicit width and height в Lighthouse.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Аудит Image elements have explicit width and height в Lighthouse", width="800", height="274" %}
+
+В этом примере и у главного изображения, и у изображения статьи отсутствуют атрибуты `width` и `height`.
+
+#### Решение проблемы
+
+Чтобы не допустить сдвиги макета, настройте атрибуты `width` и `height` для этих изображений.
+
+Было:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="Изображение, которое необходимо загрузить">
+<img src="https://source.unsplash.com/random/800x600" alt="Изображение, которое необходимо загрузить">
+```
+
+Стало:
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="Изображение, которое необходимо загрузить">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="Изображение, которое необходимо загрузить">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMGOlGhKnNHef2py.mp4" %} <figcaption> Теперь загрузка изображения не приводит к сдвигу макета. </figcaption></figure>
+
+{% Aside %} Другой подход к загрузке изображений — использовать атрибуты [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) и [`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) и указать значения для атрибутов `width` и `height`. Это повысит производительность и позволит передавать изображения разного размера на разные устройства. Дополнительные сведения см. в статье «[Передача адаптивных изображений](/serve-responsive-images/)». {% endAside %}
+
+## Шрифты
+
+Шрифты могут задерживать рендеринг текста и приводить к сдвигам макета. Таким образом, важно быстро доставлять их.
+
+### Отложенный рендеринг текста
+
+По умолчанию браузер не сразу отображает элемент text, если связанные с ним веб-шрифты еще не загружены. Это сделано, чтобы предотвратить [«мигание текста без стиля« (FOUT)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). Во многих ситуациях это приводит к задержке [первого отображения содержимого (First Contentful Paint [FCP])](/fcp), а в некоторых ситуациях — к задержке при отображении самого крупного элемента содержимого (Largest Contentful Paint [LCP]).
+
+{% Aside %}
+
+По умолчанию Firefox и браузеры на основе Chromium [блокируют рендеринг текста на время до 3 секунд](https://developers.google.com/web/updates/2016/02/font-display), если связанный с этим текстом веб-шрифт не загружен; Safari блокирует рендеринг текста на неопределенное время. [Период блокировки](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline) начинается, когда браузер запрашивает веб-шрифт. Если к концу периода блокировки шрифт все еще не загружен, браузер отображает текст с использованием резервного шрифта и заменяет этот шрифт веб-шрифтом, когда последний становится доступным.
+
+{% endAside %}
+
+### Сдвиги макета
+
+Метод с заменой шрифта отлично подходит, если нужно быстро отображать содержимое для пользователя, но может привести к сдвигу макета. Такие сдвиги макета возникают, когда веб-шрифт и используемый вместо него резервный шрифт занимают разное место на странице. Используя шрифты с похожими пропорциями, можно свести к минимуму сдвиги макета.
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="Схема, на которой показан сдвиг макета, вызванный заменой шрифта", width="800", height="452" %} <figcaption> В этом примере замена шрифта привела к сдвигу элементов страницы на пять пикселей вверх. </figcaption></figure>
+
+#### Выявление проблемы
+
+Чтобы посмотреть, какие шрифты загружаются на определенной странице, в Devtools откройте вкладку **Network** (Сеть) и выполните фильтрацию по полю **Font** (Шрифт). Файлы шрифтов могут иметь большой размер, поэтому для повышения производительности, как правило, лучше использовать меньшее количество шрифтов.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="Снимок экрана с шрифтом, отображаемым в DevTools", width="800", height="252" %}
+
+Узнать, сколько времени требуется на запрос шрифта, можно на вкладке **Timing** (Время). Чем раньше будет запрошен шрифт, тем скорее он будет загружен и использован.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="Снимок экрана , на котором показана вкладка Timing (Время) в DevTools", width="800", height="340" %}
+
+Посмотреть цепочку запросов на шрифт можно на вкладке **Initiator** (Инициатор). Вообще говоря, чем короче цепочка запросов, тем быстрее можно запросить шрифт.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="Снимок экрана со вкладкой Initiator (Инициатор) в DevTools", width="800", height="189" %}
+
+#### Решение проблемы
+
+В нашей демонстрации используется API Google Fonts. Google Fonts позволяет загружать шрифты с помощью тегов `<link>` или оператора `@import`. Фрагмент кода тега `<link>` включает подсказку ресурса `preconnect`. Это должно привести к более быстрой доставке таблиц стилей, чем при использовании версии с оператором `@import`.
+
+На очень высоком уровне можно считать [подсказки ресурсов](https://www.w3.org/TR/resource-hints/#resource-hints) способом сообщить браузеру, что ему потребуется настроить определенное соединение или загрузить определенный ресурс. В результате браузер сделает эти действия приоритетными. При использовании подсказок ресурсов имейте в виду, что если сделать определенное действие приоритетным, это отнимет часть ресурсов браузера, которые можно было бы потратить на другие действий. Таким образом, подсказки ресурсов следует использовать вдумчиво и не для всего подряд. Дополнительные сведения см. в статье «[Заблаговременное создание сетевых подключений для повышения воспринимаемой скорости работы страницы](/preconnect-and-dns-prefetch/)».
+
+Удалите из таблицы стилей следующий оператор `@import`:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+В элемент `<head>` документа добавьте следующие теги `<link>`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+Эти теги link сообщают браузеру, что нужно заблаговременно создать подключение к источникам, используемым Google Fonts, и загрузить таблицу стилей, содержащую объявления для шрифтов Montserrat и Roboto. Такие теги `<link>` следует размещать как можно раньше в элементе `<head>`.
+
+{% Aside %}
+
+Чтобы загрузить только подмножество шрифта из Google Fonts, добавьте параметр API [`?text=`](https://developers.google.com/fonts/docs/getting_started). Например, если использовать параметр `?text=ABC`, будут загружены только символы, необходимые для рендеринга текста «ABC». Это хороший способ уменьшить размер файла шрифта.
+
+{% endAside %}
+
+## Анимации
+
+В основном, анимации влияют на метрики Web Vitals, если они приводят к сдвигу макета. Старайтесь не использовать анимации двух типов: [анимации, изменяющие макет](/animations-guide/#triggers), и эффекты, «похожие на анимацию», при которых выполняется перемещение элементов страницы. Обычно такие анимации можно заменить более производительными эквивалентами, используя ряд свойств CSS, например [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform), [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) и [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter). Дополнительные сведения см. в статье «[Как создавать высокопроизводительные CSS-анимации](/animations/)».
+
+### Выявление проблемы
+
+Анимации с низкой производительностью можно выявлять c помощью аудита Avoid non-composited animations в Lighthouse.
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Аудит Avoid non-composited animations в Lighthouse", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+Аудит Avoid non-composited animations в Lighthouse выявляет только *CSS-анимации* с низкой производительностью; анимации на основе JavaScript (например, при использовании функции [`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) для «анимации» элемента) снижают производительность, но они не будут помечены при выполнении этого аудита.
+
+{% endAside %}
+
+### Решение проблемы
+
+Измените последовательность анимации `slideIn` и используйте функцию `transform: translateX()`, а не переход с использованием свойства `margin-left`.
+
+Было:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+Стало:
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## Критически важный код CSS
+
+Таблицы стилей блокируют рендеринг. Это означает, что когда браузер встречает таблицу стилей, он перестает загружать другие ресурсы, пока не загрузит и не проанализирует ее. Это может приводить к задержкам при загрузке самых крупных отображаемых элементов содержимого. Чтобы повысить производительность, можно [удалить неиспользуемый код CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/), [встроить критически важный код CSS](/extract-critical-css/) и [отложить выполнение кода CSS, который не является критически важным](/defer-non-critical-css/#optimize).
+
+## Вывод
+
+Несмотря на то что возможности для дальнейшей оптимизации страницы не исчерпаны (например, можно [сжимать изображения](/use-imagemin-to-compress-images/), чтобы быстрее доставлять их), выполненные изменения значительно улучшили метрики Web Vitals для этого сайта. Если бы это был настоящий сайт, на следующем этапе следовало бы [собрать данные о производительности от реальных пользователей](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data), чтобы оценить, соответствует ли сайт [пороговым значениям метрик Web Vitals для большинства пользователей](/vitals-measurement-getting-started/#data-interpretation). Дополнительные сведения о Web Vitals см. в статье «[Изучение Web Vitals](/learn-core-web-vitals/)».
diff --git a/src/site/content/ru/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/ru/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..7e0793c9649
--- /dev/null
+++ b/src/site/content/ru/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Определение пороговых значений показателей Core Web Vitals
+subhead: Исследование и методология пороговых значений Core Web Vitals
+authors:
+  - bmcquade
+description: Исследование и методология пороговых значений Core Web Vitals
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Исследование и методология пороговых значений Core Web Vitals
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[Core Web Vitals](/vitals/#core-web-vitals)это набор полевых показателей, которые измеряют важные аспекты взаимодействия с реальным пользователем в Интернете. Core Web Vitals включает метрики, а также целевые пороговые значения для каждой метрики, которые помогают разработчикам качественно оценить, какой у них сайт«хороший», «требующий улучшения» или «плохой». В этой статье будет объяснен подход, используемый для выбора пороговых значений показателей Core Web Vitals в целом, а также то, как были выбраны пороговые значения для каждой конкретной метрики Core Web Vitals.
+
+## Напоминание: показатели и пороговые значения Core Web Vitals
+
+В 2020 году в Core Web Vitals входило три метрики: LCP (Скорость загрузки основного контента), FID (Время ожидания до первого взаимодействия с контентом) и CLS (Совокупное смещение макета). Каждая метрика измеряет различные аспекты взаимодействия с пользователем: LCP измеряет воспринимаемую скорость загрузки и отмечает на временной шкале вероятный момент загрузки основного контента; FID измеряет скорость отклика и количественно оценивает впечатления пользователей от первого взаимодействия со страницей; а CLS измеряет визуальную стабильность и количественно определяет величину неожиданного смещения макета видимого содержимого страницы.
+
+Каждая метрика Core Web Vitals имеет свои пороговые значения, которые определяют производительность страницы как «хорошую», «требующую улучшения» или «плохую»:
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Рекомендации по пороговому значению скорости загрузки основного контента", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Рекомендации по пороговому значению времени ожидания до первого взаимодействия с контентом", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Рекомендации по пороговому значению совокупного смещения макета", width="400", height="350" %}
+</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>«Хорошо»</th>
+      <th>«Плохо»</th>
+      <th>Процентиль</th>
+    </tr>
+    <tr>
+      <td>Cкорость загрузки основного контента (LCP)</td>
+      <td>≤2500 мс</td>
+      <td>&gt; 4000 мс</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>Время ожидания до первого взаимодействия с контентом (FID)</td>
+      <td>≤100 мс</td>
+      <td>&gt; 300 мс</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>Совокупное смещение макета (CLS)</td>
+      <td>≤0,1</td>
+      <td>&gt; 0,25</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">Чтобы классифицировать общую производительность страницы или сайта, мы используем значение 75-го процентиля для всех просмотров этой страницы или сайта. Другими словами, если по крайней мере 75% просмотров страниц сайта соответствуют «хорошему» порогу, сайт классифицируется как имеющий «хорошую» производительность по этому показателю. И наоборот, если по крайней мере 25% просмотров страниц соответствуют «плохому» порогу производительности, сайт классифицируется как имеющий «плохую» производительность. Так, например, 75-й процентиль LCP в 2 секунды классифицируется как «хороший», а 75-й процентиль LCP в 5 секунд классифицируется как «плохой».</p>
+<h2 data-md-type="header" data-md-header-level="2">Критерии для пороговых значений показателей Core Web Vitals</h2>
+<p data-md-type="paragraph">При установлении пороговых значений для показателей Core Web Vitals мы сначала определили критерии, которым должен соответствовать каждый порог. Ниже я объясняю критерии, которые мы использовали в Google для оценки пороговых значений метрик Core Web Vitals 2020. В следующих разделах будет более подробно рассказано о том, как эти критерии применялись для выбора пороговых значений для каждой метрики в 2020 году. В будущие годы мы ожидаем внесения улучшений и дополнений в критерии и пороговые значения, чтобы еще больше улучшить нашу способность измерять впечатления пользователей от Интернета.</p>
+<h3 data-md-type="header" data-md-header-level="3">Качественный пользовательский опыт</h3>
+<p data-md-type="paragraph">Наша основная цельоптимизировать взаимодействие с пользователем. Поэтому мы стремимся к тому, чтобы страницы с «хорошими» значениям Core Web Vitals обеспечивали хорошие впечатления от взаимодействия.</p>
+<p data-md-type="paragraph">Чтобы определить порог для качественного пользовательского опыта, мы обращаемся к человеческому восприятию и исследованиям человеко-машинного взаимодействия (ЧМВ). По данным исследования, рекомендуется использовать в качестве порога диапазон значений, а не единое фиксированное значение. Например, усредненное время ожидания пользователем загрузки страницы до потери фокуса1 секунда, при этом фактический диапазон времени ожидания начинается от сотен миллисекунд и заканчивается несколькими секундами. Пороги восприятия различаются в зависимости от пользователя и контекста, и это дополнительно подтверждается агрегированными и анонимными данными метрик Chrome, которые показывают, что не существует единого для всех пользователей правильного времени загрузки контента. Эти данные демонстрируют сглаженное и непрерывное распределение. Более подробную информацию о порогах человеческого восприятия и соответствующих исследованиях ЧМВ см. в статье <a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">«Научные основы Web Vitals»</a>.</p>
+<p data-md-type="paragraph">В случаях, когда для данной метрики доступно соответствующее исследование пользовательского опыта и существует разумный консенсус относительно диапазона значений в литературе, мы используем этот диапазон в качестве входных данных для выбора пороговых значений. Если же соответствующее исследование пользовательского опыта недоступно, например, для новой метрики, такой как совокупное смещение макета, мы оцениваем реальные страницы, соответствующие разным вероятным пороговым значениям этой метрики, чтобы определить диапазон, который приводит к хорошему пользовательскому опыту.</p>
+<h3 data-md-type="header" data-md-header-level="3">Пороговые значения, достижимые для существующего веб-контента</h3>
+<p data-md-type="paragraph">Чтобы владельцы могли успешно оптимизировать свои сайты и достичь «хороших» показателей, нужно, чтобы эти показатели были достижимы для существующего контента в Интернете. Например, ноль миллисекундидеальный «хороший» порог LCP, приводящий к мгновенной загрузке. Но пороговое значение в ноль миллисекунд в большинстве случаев практически недостижимо из-за задержек обработки сети и устройства. Таким образом, ноль миллисекунд не является разумно обоснованным «хорошим» порогом LCP для Core Web Vitals.</p>
+<p data-md-type="paragraph">При оценке возможных «хороших» пороговых значений Core Web Vitals мы проверяем достижимость этих пороговых значений на основе данных из отчета<a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Chrome User Experience Report</a> (CrUX). Чтобы подтвердить, что порог достижим, мы требуем, чтобы по крайней мере 10% <a href="/same-site-same-origin/#origin" data-md-type="link">источников</a> в настоящее время соответствовали «хорошему» порогу. Чтобы гарантировать, что хорошо оптимизированные сайты не будут неправильно классифицированы из-за изменчивости полевых данных, мы также проверяем, чтобы хорошо оптимизированный контент постоянно соответствовал «хорошему» порогу.</p>
+<p data-md-type="paragraph">И наоборот, мы устанавливаем «плохой» порог, определяя уровень производительности, которому в настоящее время не соответствует лишь меньшинство источников. Если нет исследований о «плохом» пороге, то по умолчанию 10–30% источников с наихудшими результатами классифицируются как «плохие».</p>
+<h3 data-md-type="header" data-md-header-level="3">Заключительные мысли о критериях</h3>
+<p data-md-type="paragraph">При оценке вероятных пороговых значений мы обнаружили, что критерии иногда противоречили друг другу. Например, может возникнуть противоречие между стабильно достижимым пороговым значением и обеспечением стабильно хорошего взаимодействия с пользователем. Кроме того, учитывая, что исследование человеческого восприятия обычно предоставляет диапазон значений, а показатели поведения пользователей показывают постепенные изменения в поведении, мы обнаружили, что часто не существует единого «правильного» порога для показателя. Таким образом, наш подход к Core Web Vitals 2020 года заключался в выборе пороговых значений, которые наилучшим образом соответствуют указанным выше критериям, признавая при этом, что не существует единого идеального порогового значения и что иногда нам потребуется выбирать из нескольких приемлемых возможных пороговых значений. Вместо того чтобы задаваться вопросом об идеальном пороге, мы сосредоточились на том, чтобы узнать, какой вероятный порог лучше всего соответствует нашим критериям.</p>
+<h2 data-md-type="header" data-md-header-level="2">Выбор процентиля</h2>
+<p data-md-type="paragraph">Как отмечалось ранее, для классификации общей производительности страницы или сайта мы используем значение 75-го процентиля всех посещений этой страницы или сайта. 75-й процентиль был выбран на основе двух критериев. Во-первых, процентиль должен гарантировать, что большинство посещений страницы или сайта имели целевой уровень эффективности. Во-вторых, выпадающие значения не должны оказывать чрезмерного влияния на значение выбранного процентиля.</p>
+<p data-md-type="paragraph">Эти цели несколько расходятся друг с другом. Для достижения первой цели, как правило, более высокий процентильлучший выбор. Однако с более высокими процентилями вероятность того, что на результирующее значение повлияют выпадающие показатели, также возрастает. Если несколько посещений сайта происходят при нестабильных сетевых подключениях, и это приводит к чрезмерно большим выборкам LCP, мы не хотим, чтобы наша классификация сайтов определялась этими исключениями. Например, если бы мы оценивали эффективность сайта с 100 посещениями, используя высокий процентиль, такой как 95-й, то значение 95-го процентиля подверглось бы влиянию исключений всего при 5 выпадающих значениях.</p>
+<p data-md-type="paragraph">Учитывая, что эти цели немного расходятся, после анализа мы пришли к выводу, что 75-й процентиль обеспечивает разумный баланс. Используя 75-й процентиль, мы знаем, что большинство посещений сайта (3 из 4) имели целевой уровень эффективности или выше. Кроме того, значение 75-го процентиля с меньшей вероятностью будет подвержено влиянию выпадающих значений. Возвращаясь к нашему примеру, для сайта со 100 посещениями, чтобы на значение 75-го процентиля повлияли статистические выбросы, 25 из этих посещений должны были бы дать выпадающие значения. Хотя 25 из 100 выборок могут являться статистическими выбросами, вероятность этого гораздо меньше, чем в случае с 95-м процентилем.</p>
+<h2 data-md-type="header" data-md-header-level="2">Скорость загрузки основного контента (LCP)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Качество опыта</h3>
+<p data-md-type="paragraph">1 секунда часто упоминается как время, в течение которого пользователь будет ждать, прежде чем начнет терять фокус на задаче. При более тщательном изучении соответствующих исследований мы обнаружили, что 1 секундаэто приблизительное значение, описывающее диапазон значений, примерно от нескольких сотен миллисекунд до нескольких секунд.</p>
+<p data-md-type="paragraph">Двумя наиболее часто цитируемыми источниками определения порога в 1 секунду являются <a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">Кард и другие</a> и <a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">Миллер</a>. Кард определяет порог «мгновенной реакции» в 1 секунду, ссылаясь на книгу Ньюэлла <a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">«Объединенные теории познания»</a>. Ньюэлл объясняет мгновенные реакции как «реакции, которые должны быть даны на некоторый стимул в течение <em data-md-type="emphasis">очень приблизительной одной секунды</em> (то есть примерно от ~ 0,3 до ~ 3 секунд)». Это следует из дискуссии Ньюэлла об «ограничениях познания в реальном времени», где отмечается, что «взаимодействия с окружающей средой, вызывающие когнитивные размышления, происходят в течение нескольких секунд», которые варьируются примерно от 0,5 до 2–3 секунд. Миллер, еще один часто цитируемый источник порога в 1 секунду, отмечает, что «задачи, которые люди могут и будут выполнять с помощью машинной связи, серьезно изменят свой характер, если задержка ответа будет превышать две секунды, с возможным увеличением еще на секунду или около того».</p>
+<p data-md-type="paragraph">В исследовании Миллера и Карда количество времени, в течение которого пользователь будет ждать, прежде чем потеряет фокус, описывается как диапазон от примерно 0,3 до 3 секунд, что позволяет предположить, что наш порог «хорошего» показателя LCP должен находиться в этом диапазоне. Кроме того, учитывая, что существующий «хороший» порог для FCP (Первой отрисовки контента) составляет 1 секунду, и что LCP (Скорость загрузки основного контента) обычно случается после FCP, мы дополнительно ограничиваем наш диапазон возможных пороговых значений LCP от 1 до 3 секунд. Чтобы выбрать порог в этом диапазоне, который лучше всего соответствует нашим критериям, мы посмотрим на достижимость этих возможных пороговых значений ниже.</p>
+<h3 data-md-type="header" data-md-header-level="3">Достижимость</h3>
+<p data-md-type="paragraph">Используя данные из CrUX, мы можем определить процент источников в Интернете, которые соответствуют «хорошим» вероятным пороговым значениям LCP.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% источников CrUX, классифицированных как «хорошие» (для возможных пороговых значений LCP)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1 секунда</th>
+      <th>1,5 секунды</th>
+      <th>2 секунды</th>
+      <th>2,5 секунды</th>
+      <th>3 секунды</th>
+    </tr>
+    <tr>
+      <td><strong>Мобильные устройства</strong></td>
+      <td>3,5%</td>
+      <td>13%</td>
+      <td>27%</td>
+      <td>42%</td>
+      <td>55%</td>
+    </tr>
+    <tr>
+      <td><strong>ПК</strong></td>
+      <td>6,9%</td>
+      <td>19%</td>
+      <td>36%</td>
+      <td>51%</td>
+      <td>64%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">В то время как менее 10% источников соответствуют порогу в 1 секунду, все остальные пороговые значения от 1,5 до 3 секунд удовлетворяют нашему требованию о том, чтобы не менее 10% источников соответствовали «хорошему» порогу и, таким образом, выбор этого диапазон более обоснован в качестве вероятного порога.</p>
+<p data-md-type="paragraph">Кроме того, чтобы гарантировать, что выбранный порог постоянно достигается для хорошо оптимизированных сайтов, мы анализируем производительность LCP для наиболее эффективных сайтов в Интернете, чтобы определить, какие пороговые значения стабильно достижимы для этих сайтов. В частности, мы стремимся определить порог, который постоянно достигается на 75-м процентиле для наиболее эффективных сайтов. Мы обнаружили, что пороговые значения 1,5 и 2 секунды не всегда достижимы, в то время как 2,5 секунды достижимы.</p>
+<p data-md-type="paragraph">Для определения «плохого» порога LCP мы использовали данные CrUX, чтобы определить порог, которому соответствует большинство источников:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% источников CrUX, классифицированных как «плохие» (для возможных пороговых значений LCP)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3 секунды</th>
+      <th>3,5 секунды</th>
+      <th>4 секунды</th>
+      <th>4,5 секунды</th>
+      <th>5 секунд</th>
+    </tr>
+    <tr>
+      <td><strong>Мобильные устройства</strong></td>
+      <td>45%</td>
+      <td>35%</td>
+      <td>26%</td>
+      <td>20%</td>
+      <td>15%</td>
+    </tr>
+    <tr>
+      <td><strong>ПК</strong></td>
+      <td>36%</td>
+      <td>26%</td>
+      <td>19%</td>
+      <td>14%</td>
+      <td>10%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">При 4-секундном пороге примерно 26% мобильных устройств и 21% компьютеров будут классифицироваться как «плохие». Это попадает в наш целевой диапазон 10–30%, поэтому мы заключаем, что 4 секундыприемлемый «плохой» порог.</p>
+<p data-md-type="paragraph">Таким образом, мы заключаем, что 2,5 секундыэто разумно обоснованный «хороший» порог, а 4 секундыразумно обоснованный «плохой» порог для метрики LCP.</p>
+<h2 data-md-type="header" data-md-header-level="2">Время ожидания до первого взаимодействия с контентом (FID)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Качество опыта</h3>
+<p data-md-type="paragraph">Исследования достаточно последовательны в выводах о том, что задержки в визуальной обратной связи до 100 мс воспринимаются как вызванные связанным источником, таким как пользовательский ввод. Это говорит о том, что «хороший» порог задержки первого ввода в 100 мс, вероятно, подходит в качестве минимальной планки: если задержка обработки ввода превышает 100 мс, нет никаких шансов, что другие этапы обработки и рендеринга завершатся вовремя.</p>
+<p data-md-type="paragraph">В часто цитируемой работе Якоба Нильсена <a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">«Время отклика: 3 важных предела»</a> 0,1 секунды определяется как предел, при котором пользователь чувствует, что система реагирует мгновенно. Нильсен ссылается на Миллера и Карда, которые цитируют работу Мишотта <a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">«Восприятие причинности»</a> (1962). В исследовании Мишотта участникам эксперимента показывали «два объекта на экране. Объект А начинал движение по направлению к объекту Б. Он останавливался, когда доходил до Б, затем объект Б начинал движение и удалялся от А». Мишотт изменял временной интервал между остановкой объекта А и началом движения объекта Б. Учёный обнаружил, что при задержках примерно до 100 мс у участников создавалось впечатление, что объект А вызывал движение объекта Б. При задержках примерно от 100 до 200 мс восприятие причинности было неоднозначно, а при задержках более 200 мс движение объекта Б уже не воспринималось как вызванное объектом А.</p>
+<p data-md-type="paragraph">Аналогичным образом Миллер определяет порог срабатывания для «реакции на управляющее воздействие» как «указание на действие, обычно вызываемое движением клавиши, переключателя или другого элемента управления, которое сигнализирует о том, что он был физически активирован. Эта реакция должна... восприниматься как часть механического воздействия, вызванного оператором. Временная задержка: не более 0,1 секунды», и далее по тексту «задержка между нажатием клавиши и визуальной обратной связью должна быть не более 0,1–0,2 секунды».</p>
+<p data-md-type="paragraph">Относительно недавно в работе Кааресоя и др. <a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">«На пути к идеальной виртуальной кнопке»</a> исследовалось восприятие одновременности между касанием виртуальной кнопки на сенсорном экране и последующим визуальным откликом, указывающем на то, что кнопка была нажата, при различных задержках. Когда задержка между нажатием кнопки и визуальным откликом составляла 85 мс или меньше, участники сообщали, что визуальный отклик появлялся одновременно с нажатием кнопки в 75% случаев. Кроме того, для задержек в 100 мс или меньше участники сообщали о неизменно высоком воспринимаемом качестве нажатия кнопки, при этом воспринимаемое качество снижалось при задержках от 100 до 150 мс и достигало очень низких уровней при задержке в 300 мс.</p>
+<p data-md-type="paragraph">Учитывая вышеизложенное, мы заключаем, что исследования указывают на диапазон значений около 100 мс в качестве подходящего порога для метрики FID (Время ожидания до первого взаимодействия с контентом) из набора Web Vitals. Кроме того, учитывая, что пользователи сообщили о низком уровне качества для задержек 300 мс или более, 300 мс представляется разумно обоснованным «плохим» порогом.</p>
+<h3 data-md-type="header" data-md-header-level="3">Достижимость</h3>
+<p data-md-type="paragraph">Используя данные CrUX, мы определили, что большинство источников в Интернете соответствуют порогу «хорошего» FID в 100 мс на уровне 75-го процентиля:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% источников CrUX, классифицированных как «хорошие» для порога FID в 100 мс</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100 мс</th>
+    </tr>
+    <tr>
+      <td><strong>Мобильные устройства</strong></td>
+      <td>78%</td>
+    </tr>
+    <tr>
+      <td><strong>ПК</strong></td>
+      <td>&gt; 99%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Кроме того, мы наблюдаем, что ведущие сайты в Интернете могут постоянно соответствовать этому пороговому значению на 75-м процентиле (а часто и на 95-м процентиле).</p>
+<p data-md-type="paragraph">Учитывая вышеизложенное, мы заключаем, что 100 мсразумно обоснованный «хороший» порог для FID.</p>
+<h2 data-md-type="header" data-md-header-level="2">Совокупное смещение макета (CLS)</h2>
+<h3 data-md-type="header" data-md-header-level="3">Качество опыта</h3>
+<p data-md-type="paragraph">CLS (Совокупное смещение макета)это новая метрика, которая измеряет, насколько сильно смещается видимое содержимое страницы. Поскольку CLSновая метрика, мы не знаем об исследованиях, которые могли бы помочь напрямую определить пороговые значения для неё. Поэтому, чтобы определить порог, соответствующий ожиданиям пользователей, мы оценили реальные страницы с разной степенью смещения макета, чтобы определить максимальную величину смещения, которая ещё воспринимается как приемлемая, а не вызывающая значительные сбои при взаимодействии с содержимым страницы. В ходе внутреннего тестирования мы обнаружили, что уровни смещения от 0,15 и выше всегда воспринимались как деструктивные, в то время как смещения от 0,1 и ниже были заметными, но не вызывали чрезмерных сбоев. Таким образом, хотя нулевой сдвиг макетаидеальный вариант, мы пришли к выводу, что значения до 0,1 являются вероятным «хорошим» порогом для CLS.</p>
+<h3 data-md-type="header" data-md-header-level="3">Достижимость</h3>
+<p data-md-type="paragraph">Основываясь на данных CrUX, мы видим, что почти 50% источников имеют CLS 0,05 или ниже.</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% источников CrUX, классифицированных как «хорошие» (для возможных пороговых значений CLS)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0,05</th>
+      <th>0,1</th>
+      <th>0,15</th>
+    </tr>
+    <tr>
+      <td><strong>Мобильные устройства</strong></td>
+      <td>49%</td>
+      <td>60%</td>
+      <td>69%</td>
+    </tr>
+    <tr>
+      <td><strong>ПК</strong></td>
+      <td>42%</td>
+      <td>59%</td>
+      <td>69%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">Хотя данные CrUX свидетельствуют о том, что 0,05 может быть разумным «хорошим» порогом CLS, мы признаем, что есть некоторые варианты использования, где в настоящее время трудно избежать деструктивных смещений макета. Например, для стороннего встраиваемого контента, такого как встраиваемые объекты социальных сетей, высота встраиваемого контента иногда неизвестна до окончания загрузки, что может привести к смещению макета более чем на 0,05. Таким образом, мы пришли к выводу, что, хотя многие источники соответствуют порогу 0,05, чуть менее строгий порог CLS в 0,1 обеспечивает лучший баланс между качеством опыта и достижимостью. Мы надеемся, что в будущем экосистема веб-разработки найдет решения для устранения смещений макета, вызванных сторонними встраиваемыми объектами, что позволит использовать более строгий порог «хорошего» CLS в 0,05 или 0 в одной из будущих итераций Core Web Vitals.</p>
+<p data-md-type="paragraph">Для определения «плохого» порога CLS мы использовали данные CrUX, чтобы определить порог, которому соответствует большинство источников:</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">% источников CrUX, классифицированных как «плохие» (для возможных пороговых значений CLS)</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0,15</th>
+      <th>0,2</th>
+      <th>0,25</th>
+      <th>0,3</th>
+    </tr>
+    <tr>
+      <td><strong>Мобильные устройства</strong></td>
+      <td>31%</td>
+      <td>25%</td>
+      <td>20%</td>
+      <td>18%</td>
+    </tr>
+    <tr>
+      <td><strong>ПК</strong></td>
+      <td>31%</td>
+      <td>23%</td>
+      <td>18%</td>
+      <td>16%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">При пороговом значении 0,25 примерно 20% мобильных устройств и 18% компьютеров будут классифицироваться как «плохие». Это попадает в наш целевой диапазон 10–30%, поэтому мы пришли к выводу, что 0,25приемлемый порог для «плохих» значений.</p>
diff --git a/src/site/content/ru/blog/drag-and-drop/index.md b/src/site/content/ru/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..ce6fbbe2227
--- /dev/null
+++ b/src/site/content/ru/blog/drag-and-drop/index.md
@@ -0,0 +1,257 @@
+---
+title: Использование HTML5 Drag and Drop API
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: "\nHTML5 Drag and Drop API (DnD) дает возможность сделать перетаскиваемым \nпрактически любой элемент на нашей странице. В этом посте мы объясним\nосновы перетаскивания."
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+HTML5 Drag and Drop API (DnD) дает возможность сделать перетаскиваемым практически любой элемент на нашей странице. В этом посте мы объясним основы перетаскивания.
+
+## Создание перетаскиваемого содержимого
+
+Стоит отметить, что в большинстве браузеров выделенный текст, изображения и ссылки по умолчанию перетаскиваются. Например, если вы перетащите логотип Google [в поиске Google](https://google.com), вы увидите фантомное изображение. Это изображение можно поместить в адресную строку, в элемент `<input type="file" />` или даже на рабочий стол. Чтобы сделать перетаскиваемыми другие типы контента, необходимо использовать API-интерфейсы HTML5 DnD.
+
+Чтобы сделать объект перетаскиваемым, установите для этого элемента `draggable=true`. Перетаскивание можно включить практически для чего угодно: изображений, файлов, ссылок или любой разметки на вашей странице.
+
+В нашем примере мы создаем интерфейс для перестановки некоторых столбцов, размещенных с помощью CSS Grid. Базовая разметка для моих столбцов выглядит так: для каждого столбца атрибут `draggable` установлен в значение `true`.
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+Вот CSS для моих элементов container и box. Обратите внимание, что из всего CSS функциональности перетаскивания касается только свойство [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor). Остальная часть кода просто управляет компоновкой и стилем элементов container и box.
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+На этом этапе вы обнаружите, что можете перетаскивать элементы, но больше ничего не произойдет. Чтобы добавить функциональность опускания, придется использовать JavaScript API.
+
+## Прослушивание перетаскивания событий
+
+Существует ряд различных событий, к которым можно присоединиться для отслеживания всего процесса перетаскивания.
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+Чтобы обрабатывать поток операции перетаскивания, нужен какой-то исходный элемент (откуда начинается перетаскивание), полезные данные (то, что вы пытаетесь перетащить) и цель (область, которая принимает перетаскиваемые данные). Исходный элемент может быть изображением, списком, ссылкой, файловым объектом, блоком HTML и т. д. Целью является зона буксировки (или набор зон буксировки), принимающая данные, которые пользователь в нее опускает. Имейте в виду, что не все элементы могут быть целями, например, изображение целью быть не может.
+
+## Начало и завершение последовательности перетаскивания
+
+После того, как вы определите атрибуты `draggable="true"` для своего контента, прикрепите обработчик событий `dragstart`, чтобы запустить последовательность перетаскивания для каждого столбца.
+
+Этот код установит непрозрачность столбца на 40%, когда пользователь начнет его перетаскивать, а затем вернет ее на 100%, когда событие перетаскивания закончится.
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+Результат можно увидеть в демонстрации Glitch ниже. Перетащите элемент, и он станет непрозрачным. Поскольку целью события `dragstart` является исходный элемент, установка `this.style.opacity` на 40% визуально сообщает пользователю, что элемент является текущим перемещаемым выделением. Хотя функция опускания здесь отсутствует, если опустить элемент, исходный элемент вернется к 100% непрозрачности.
+
+{% Glitch { id: 'simple-drag-and-drop-1', path: 'style.css' } %}
+
+## Добавляем дополнительные визуальные подсказки с помощью `dragenter`, `dragover` и `dragleave`
+
+Чтобы пользователь мог понять, как взаимодействовать с вашим интерфейсом, используйте обработчики событий `dragenter`, `dragover` и `dragleave`. В этом примере столбцы не только перетаскиваются, но и являются целями перетаскивания. Дайте пользователю это понять, сделав границу пунктирной, когда он удерживает перетаскиваемый элемент над столбцом. Например, вы можете создать класс `over` в своем CSS для представления элементов, которые являются целями перетаскивания:
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+Затем настройте обработчики событий в своем JavaScript, добавьте класс `over`, когда столбец перетаскивается, и удалите его по окончании. В обработчике `dragend` также уберем классы в конце перетаскивания.
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch { id: 'simple-drag-drop2', path: 'dnd.js' } %}
+
+В этом коде есть пара моментов, на которые стоит обратить внимание:
+
+- При перетаскивании ссылок или похожих объектов необходимо предотвратить поведение браузера по умолчанию, которое заключается в переходе по ссылке. Для этого вызовите `e.preventDefault()` в событии `dragover`. Также рекомендуется вернуть `false` в том же обработчике.
+- Обработчик события `dragenter` используется для переключения класса `over` вместо `dragover`. Если использовать `dragover`, класс CSS будет переключаться постоянно, поскольку событие `dragover` продолжает срабатывать при наведении курсора на столбец. В итоге это заставит модуль визуализации браузера выполнять большой объем ненужной работы. Всегда имеет смысл сводить перерисовки к минимуму. Если для каких-то целей вам нужно использовать событие `dragover`, стоит [регулировать или отключать прослушиватель событий](https://css-tricks.com/debouncing-throttling-explained-examples/).
+
+## Завершение опускания
+
+Чтобы обработать фактическое опускание, добавьте прослушиватель для события `drop`. В обработчике `drop` нужно предотвратить поведение браузера по умолчанию для опускания, которое обычно заключается во всяких надоедливых перенаправлениях. Предотвратить всплытие события в DOM можно с помощью вызова `e.stopPropagation()`.
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // препятствует перенаправлению в браузере.
+  return false;
+}
+```
+
+Обязательно зарегистрируйте новый обработчик среди других обработчиков:
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+Если запустить код на этом этапе, элемент не переместится в новое место. Для этого понадобится использовать объект [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer).
+
+Все чудеса процесса перетаскивания заключены в свойстве `dataTransfer`. Оно содержит фрагмент данных, отправленный при перетаскивании. `dataTransfer` задается в событии `dragstart`, а читается и обрабатывается в событии опускания. Вызов `e.dataTransfer.setData(mimeType, dataPayload)` позволяет установить MIME-тип и полезные данные для объекта.
+
+В этом примере мы позволим пользователям изменять порядок столбцов. Для этого сначала нужно сохранить HTML-код исходного элемента при запуске перетаскивания:
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+В `drop` вы обрабатываете опускание столбца, присваивая HTML-коду исходного столбца HTML целевого столбца, при этом сначала проверяя, не опускает ли пользователь столбец на то же место, из которого он был перетащен.
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+Результат можно увидеть в следующей демонстрации. Перетащите и отпустите столбец A поверх столбца B, и обратите внимание, как они поменяются местами:
+
+{% Glitch { id: 'simple-drag-drop', path: 'dnd.js' } %}
+
+## Дополнительные свойства перетаскивания
+
+Объект `dataTransfer` предоставляет свойства для обеспечения визуального отклика пользователю в процессе перетаскивания. Эти свойства также можно использовать для управления тем, как цели перетаскивания будут реагировать на определенные типы данных.
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed) ограничивает «тип перетаскивания», которое пользователь может выполнять с элементом. Это свойство используется в модели обработки перетаскивания для инициализации `dropEffect` во время событий `dragenter` и `dragover`. Свойству можно задать следующие значения: `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` и `uninitialized`.
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect) управляет откликом, который получает пользователь во время событий `dragenter` и `dragover`. Когда пользователь наводит курсор на целевой элемент, курсор браузера указывает, какой тип операции будет выполняться (например, копирование, перемещение и т. д.). Свойство может принимать одно из следующих значений: `none`, `copy`, `link` и `move`.
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage) означает, что вместо использования отклика браузера по умолчанию в виде фантомного изображения вы можете дополнительно установить значок перетаскивания.
+
+## Загрузка файла с помощью перетаскивания
+
+В этом простом примере столбец используется как в качестве источника, так и цели перетаскивания. Это можно увидеть в пользовательском интерфейсе, где пользователя просят переставить элементы. В некоторых ситуациях цель и источник перетаскивания могут быть разными, например, интерфейс, в котором пользователю нужно выбрать одно изображение для продукта в качестве основного, перетащив выбранное изображение на цель.
+
+Перетаскивание часто используется, чтобы позволить пользователям перетаскивать элементы со своего рабочего стола в приложение. Основное отличие заключается в обработчике `drop`. Для доступа к файлам не будет применяться `dataTransfer.getData()` — вместо этого данные будут содержаться в свойстве `dataTransfer.files`:
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Препятствует перенаправлению в некоторых браузерах.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Читаем объекты File в этом FileList.
+  }
+}
+```
+
+Дополнительную информацию об этом можно найти в разделе [«Пользовательское перетаскивание»](/read-files/#select-dnd).
+
+## Дополнительные ресурсы
+
+- [Спецификация перетаскивания](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [HTML Drag and Drop API в MDN](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Как написать загрузчик файлов перетаскиванием, используя базовый JavaScript](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [Создание игры «Парковка» с помощью HTML Drag and Drop API](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [Как использовать HTML Drag and Drop API в React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/ru/blog/evolving-cls/index.md b/src/site/content/ru/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..f2426371a06
--- /dev/null
+++ b/src/site/content/ru/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: Развитие метрики CLS
+subhead: Планы по улучшению метрики CLS (совокупное смещение макета) таким образом, чтобы она была более справедливой для «долгоживущих» страниц
+description: Планы по улучшению метрики CLS (совокупное смещение макета) таким образом, чтобы она была более справедливой для «долгоживущих» страниц
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: Пример оконного подхода для измерения смещения макета
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2 июня 2021 г.:** изменение в CLS, описанное в этой статье, уже есть на платформах веб-инструментов Chrome. См. [Развитие метрики CLS (совокупного смещения макета) в веб-инструментах](/cls-web-tooling/). {% endAside %}
+
+Мы (разработчики метрик скорости в Chrome) недавно в общих чертах изложили свое исходное исследование различных [вариантов сделать метрику CLS более справедливой для страниц, которые открыты долгое время](/better-layout-shift-metric/). Мы получили много очень полезной обратной связи, и после крупномасштабного анализа пришли к решению о том, какое изменение мы планируем внести в метрику, а именно: **максимальное окно сеанса, промежуток 1 секунда, ограничение 5 секунд**.
+
+Подробности — ниже!
+
+## Как мы оценивали варианты решения этой задачи?
+
+Мы просмотрели все отзывы, полученные от разработчиков, и приняли их к сведению.
+
+Мы также реализовали [основные варианты](/better-layout-shift-metric/#best-strategies) в браузере Chrome и провели крупномасштабный анализ метрик по миллионам веб-страниц. Мы проверили, какие типы сайтов получили улучшение по каждому варианту и какая разница была между вариантами. Особенно мы обращали внимание на сайты, которые получали разную оценку. В целом мы обнаружили следующее:
+
+- **Все** варианты снизили корреляцию между временем, проведенным на странице, и оценкой смещения макета.
+- **Ни один** из вариантов не ухудшил результат ни одной страницы. Так что беспокоиться о том, что это изменение ухудшит оценку конкретного сайта, не нужно.
+
+## Принятие решения
+
+### Почему мы выбрали окно сеанса
+
+В одной из [предыдущих статей](/better-layout-shift-metric/) мы рассмотрели [несколько различных стратегий обработки методом окна](/better-layout-shift-metric/#windowing-strategies) для группировки смещений макета, при которых оценка не растет неограниченно. Разработчики в своих отзывах в подавляющем большинстве склонялись к стратегии окна сеанса, поскольку она группирует смещение макета наиболее интуитивно понятным образом.
+
+В качестве напоминания об окнах сеанса — пример:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>     Пример окна сеанса</figcaption></figure>
+
+В примере выше, пока пользователь просматривает страницу, происходит много смещений макета. Каждое из них представлено синей полосой. Как можно заметить, у синих полос разная высота: она представляет собой [оценку](/cls/#layout-shift-score) каждого отдельного смещения макета. Окно сеанса начинается с первым смещением макета и продолжает расширяться, пока не появится промежуток без смещений. При следующем смещении макета открывается новое окно сеанса. В примере есть три промежутка без смещений — они соответствуют трем окнам сеанса. Как и в случае с текущим определением CLS, оценки за каждое смещение суммируются, поэтому оценка окна — это сумма по отдельным смещениям макета.
+
+Основываясь на [исходном исследовании](/better-layout-shift-metric/#best-strategies), мы выбрали промежуток в 1 секунду между окнами сеанса, и он хорошо себя показал в крупномасштабном анализе. Таким образом, «промежуток сеанса» (Session Gap) в примере выше равен 1 секунде.
+
+### Почему мы выбрали максимальное окно сеанса
+
+В исходном исследовании мы сузили выбор [стратегий обобщения](/better-layout-shift-metric/#summarization) до двух вариантов:
+
+- **Средняя** оценка всех окон сеанса в случае, если они очень длительные (неограниченные, с 5-секундными промежутками).
+- **Максимальная** оценка всех окон сеанса для коротких окон сеанса (ограниченные до 5 секунд, с промежутками в 1 секунду).
+
+После исходного исследования мы добавили каждую метрику в Chrome, чтобы провести анализ по миллионам URL-адресов. В результате анализа мы обнаружили много URL-адресов с таким смещением макета:
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="Пример: небольшое смещение макета понижает среднюю оценку", width="800", height="550" %}
+
+Справа внизу можно увидеть одно крошечное смещение макета в окне сеанса 2, дающее очень низкую оценку этому окну. В результате среднее значение также довольно мало. Но что произойдет, если разработчик исправит это небольшое смещение? Тогда оценка будет учитывать только окно сеанса 1, и значение для страницы *увеличится почти вдвое*. Разработчика это может сбить с толку и обескуражить: смещение макета было исправлено, но оценка ухудшилась. Причем устранение этого небольшого смещения макета, очевидно, сделает пользование страницей более удобным, а значит, оценка ухудшаться не должна.
+
+Из-за этой проблемы со средним мы решили остановиться на максимальных окнах меньшего размера с ограничением. В приведенном выше примере окно сеанса 2 будет проигнорировано, и в итоговой оценке будет учитываться только сумма смещений макета в окне сеанса 1.
+
+### Почему мы выбрали именно 5 секунд
+
+Мы проверили различные размеры окон и обнаружили следующее:
+
+- С одной стороны, для коротких окон медленная загрузка и медленный ответ на действия пользователя может разбить смещения макета на несколько окон и улучшить оценку. Мы же не хотели поощрять замедление — значит, размер окна должен быть достаточно большим.
+- С другой стороны, есть страницы с постоянным потоком небольших смещений макета. Например, страница результатов матчей, которая немного меняется с появлением новых данных. Такие смещения неудобны, но раздражение от них не увеличивается с течением времени. Так что мы хотели сделать так, чтобы окно не учитывало смещения такого типа.
+
+Учитывая оба пункта и сравнивая окна разных размеров на множестве реальных веб-страниц, мы пришли к выводу, что лучше всего подойдет ограничение в 5 секунд.
+
+## Как изменение повлияет на CLS конкретной страницы
+
+Это изменение ограничивает CLS страницы сверху, поэтому **результат не ухудшится** ни у одной страницы.
+
+Согласно нашему анализу, **в 55 % случаев изменений в CLS в 75-м процентиле вообще не будет**: у соответствующих страниц сейчас либо нет смещений макета, либо имеющиеся смещения уже ограничены одним окном сеанса.
+
+**В остальных случаях в 75-м процентиле будет улучшение:** на большинстве страниц оно будет небольшим, но около 3 % оценок улучшатся с уровня «требует улучшения» или «плохо» до уровня «хорошо». Обычно это страницы с бесконечной прокруткой или множеством медленных обновлений интерфейса — см. одну из [предыдущих статей](/better-layout-shift-metric/).
+
+## Как опробовать новый метод измерения
+
+Скоро мы встроим новое определение метрики в наши инструменты! А пока что обновленную версию CLS можно опробовать на любом сайте с помощью [примеров реализации на JavaScript](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver). Кроме того, можно [создать ответвление расширения Web Vitals](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls).
+
+Спасибо всем, кто нашел время на предыдущую статью и дал свои отзывы!
diff --git a/src/site/content/ru/blog/fast-playback-with-preload/index.md b/src/site/content/ru/blog/fast-playback-with-preload/index.md
new file mode 100644
index 00000000000..fd315533726
--- /dev/null
+++ b/src/site/content/ru/blog/fast-playback-with-preload/index.md
@@ -0,0 +1,435 @@
+---
+layout: post
+title: Быстрое воспроизведение с предварительной загрузкой аудио и видео
+subhead: Как ускорить воспроизведение мультимедиа за счет активной предварительной загрузки ресурсов.
+authors:
+  - beaufortfrancois
+description: Чем быстрее начнется воспроизведение, тем больше людей посмотрят ваше видео или послушают аудиофайл. Это известно всем. В этой статье я рассмотрю методы, которые можно применять для ускорения воспроизведения мультимедиа за счет активной предварительной загрузки ресурсов в зависимости от сценария использования.
+date: 2017-08-17
+updated: 2020-11-16
+tags:
+  - media
+  - performance
+  - network
+---
+
+Чем быстрее начнется воспроизведение, тем больше людей посмотрят ваше видео или послушают аудиофайл. [Это известно всем](https://www.digitaltrends.com/web/buffer-rage/). В этой статье я рассмотрю методы, которые можно применять для ускорения воспроизведения мультимедиа за счет активной предварительной загрузки ресурсов в зависимости от сценария использования.
+
+<figure>
+  <video controls muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.webm#t=1.1" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.mp4#t=1.1" type="video/mp4">
+  </source></source></video>
+  <figcaption>
+    <p>Авторские права принадлежат Blender Foundation | <a href="http://www.blender.org">www.blender.org</a>.</p>
+  </figcaption></figure>
+
+Я опишу три метода предварительной загрузки медиафайлов, начиная с их плюсов и минусов.
+
+<table>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>Это прекрасно…</th>
+      <th>Но…</th>
+    </tr>
+    <tr>
+      <td rowspan="3" style="white-space: nowrap"><a href="#video_preload_attribute">Атрибут предварительной загрузки видео</a></td>
+      <td rowspan="3">Легко использовать для уникальных файлов, размещенных на веб-сервере.</td>
+      <td>Браузеры могут полностью игнорировать атрибут.</td>
+    </tr>
+<tr>
+      <td>Получение ресурсов начинается, когда HTML-документ полностью загружен и проанализирован.</td>
+    </tr>
+    <tr>
+      <td>Расширения источников мультимедиа (MSE) игнорируют атрибут <code>preload</code> в элементах мультимедиа, поскольку за предоставление медиафайлов MSE отвечает приложение.</td>
+    </tr>
+    <tr>
+      <td rowspan="2" style="white-space: nowrap"><a href="#link_preload">Предварительная загрузка ссылки</a></td>
+      <td>Заставляет браузер запросить видеоресурс, не блокируя событие документа <code>onload</code>.</td>
+      <td>Несовместима с запросами HTTP Range.</td>
+    </tr>
+<tr>
+      <td>Совместима с MSE и файловыми сегментами.</td>
+      <td>Следует использовать только для небольших медиафайлов (&lt;5 МБ) при извлечении полных ресурсов.</td>
+    </tr>
+    <tr>
+      <td><a href="#manual_buffering">Ручная буферизация</a></td>
+      <td>Полный контроль</td>
+      <td>Ответственность за комплексную обработку ошибок несет сайт.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Атрибут предварительной загрузки видео
+
+Если источником видео является уникальный файл, размещенный на веб-сервере, вы можете использовать атрибут видео `preload`, чтобы указать браузеру, [сколько информации или контента необходимо предварительно загрузить](/video-and-source-tags/#preload). Это означает, что [расширения источников мультимедиа (MSE)](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API) несовместимы с `preload`.
+
+Выборка ресурсов начнется только тогда, когда исходный HTML-документ будет полностью загружен и проанализирован (например, при срабатывании события `DOMContentLoaded`), в то время как совершенно другое событие `load` будет запущено, когда ресурс действительно будет извлечен.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/De8tMHJUn3XyzFfosVLb.svg", alt="", width="800", height="234" %}</figure>
+
+Установка для атрибута `preload` значения `metadata` указывает на то, что пользователю скорее всего не понадобится видео, однако желательно получить его метаданные (размеры, список дорожек, продолжительность и т. д.). Обратите внимание, что начиная с [Chrome 64](https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#media-preload-defaults-metadata) значением `preload` по умолчанию является `metadata`. (Раньше это было `auto`).
+
+```html
+<video id="video" preload="metadata" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`Число секунд видео, готовых к воспроизведению: ${bufferedSeconds}.`);
+  });
+</script>
+```
+
+Установка для атрибута `preload` значения `auto` указывает, что браузер может кэшировать достаточно данных, чтобы было возможно полное воспроизведение без необходимости остановки для дальнейшей буферизации.
+
+```html
+<video id="video" preload="auto" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`Число секунд видео, готовых к воспроизведению: ${bufferedSeconds}.`);
+  });
+</script>
+```
+
+Однако есть некоторые оговорки. Поскольку это всего лишь подсказка, браузер может полностью игнорировать атрибут `preload`. На момент написания в Chrome применялись следующие правила:
+
+- Когда включен [Data Saver](https://support.google.com/chrome/answer/2392284), Chrome принудительно устанавливает для `preload` значение `none`.
+- В Android 4.3 Chrome принудительно устанавливает для `preload` значение `none` из-за [ошибки Android](https://bugs.chromium.org/p/chromium/issues/detail?id=612909).
+- При подключении к сотовой сети (2G, 3G и 4G) Chrome принудительно устанавливает для `preload` значение `metadata`.
+
+### Советы
+
+Если ваш веб-сайт содержит много видеоресурсов в одном домене, я бы порекомендовал вам установить для `preload` значение `metadata` или определить атрибут `poster` и установить для `preload` значение `none`. Таким образом максимальное количество HTTP-соединений с одним и тем же доменом (6 согласно спецификации HTTP 1.1), из-за которого загрузка ресурсов может зависнуть, не будет достигнуто. Обратите внимание, что таким образом можно также улучшить скорость страницы, если видео не лежат в основе вашего взаимодействия с пользователем.
+
+## Предварительная загрузка ссылки
+
+Как [описано](https://developers.google.com/web/updates/2016/03/link-rel-preload) в других [статьях](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/), [предварительная загрузка ссылок](https://w3c.github.io/preload/) — это декларативная выборка, которая позволяет заставить браузер запросить ресурс без блокировки события `load` и во время загрузки страницы. Ресурсы, загруженные через `<link rel="preload">`, хранятся локально в браузере и фактически инертны до тех пор, пока на них не будут явным образом ссылаться в DOM, JavaScript или CSS.
+
+Предварительная загрузка отличается от предварительной выборки тем, что фокусируется на текущей навигации и извлекает ресурсы с приоритетом в зависимости от их типа (сценарий, стиль, шрифт, видео, аудио и т. д.). Ее следует использовать для разогрева кэша браузера для текущих сеансов.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/g5fQKJMivvcsHajmMmi2.svg", alt="", width="800", height="234" %}</figure>
+
+### Предварительная загрузка полного видео
+
+Далее показано, как предварительно загрузить полное видео на ваш веб-сайт, чтобы видеоконтент считывался из кэша, когда JavaScript запросит его получение, поскольку ресурс может быть уже кэширован браузером. Если запрос предварительной загрузки еще не завершен, произойдет обычная выборка из сети.
+
+```js
+<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">
+
+<video id="video" controls></video>
+
+<script>
+  // Позже, после выполнения некоторых условий, устанавливаем в качестве
+  // источника URL-адрес предварительно загруженного видео.
+  video.src = 'https://cdn.com/small-file.mp4';
+  video.play().then(() => {
+    // Если URL предварительно загруженного видео уже кэширован, воспроизведение начинается сразу же.
+  });
+</script>
+```
+
+{% Aside %} Я бы рекомендовал использовать это только для небольших медиафайлов (менее 5 МБ). {% endAside %}
+
+Поскольку в примере предварительно загруженный ресурс используется видеоэлементом, значение `as` предварительно загружаемой ссылки равно `video`. Если бы это был аудиоэлемент, значение было бы `as="audio"`.
+
+### Предварительная загрузка первого сегмента
+
+В приведенном ниже примере показано, как предварительно загрузить первый сегмент видео с помощью `<link rel="preload">` и использовать его с расширениями источников мультимедиа. Если вы не знакомы с MSE JavaScript API, см. [Основы MSE](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API).
+
+Для простоты предположим, что все видео было разделено на файлы меньшего размера, например, `file_1.webm`, `file_2.webm`, `file_3.webm` и т. д.
+
+```html
+<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">
+
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // Если видео уже предварительно загружено, выборка немедленно
+    // вернет ответ из кэша браузера (кэш-память). В противном случае
+    // будет выполнена стандартная выборка из сети.
+    fetch('https://cdn.com/file_1.webm')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      // Добавляем данные к новому объекту sourceBuffer.
+      sourceBuffer.appendBuffer(data);
+      // Сделать: Извлечь file_2.webm, когда пользователь начинает проигрывать видео.
+    })
+    .catch(error => {
+      // Сделать: Показать пользователю сообщение "Видео недоступно".
+    });
+  }
+</script>
+```
+
+{% Aside 'warning' %} Для ресурсов из разных источников убедитесь, что заголовки CORS заданы правильно. Поскольку мы не можем создать буфер массива из непрозрачного ответа, полученного с помощью `fetch(videoFileUrl, { mode: 'no-cors' })`, мы не сможем передать какой-либо видео- или аудиоэлемент. {% endAside %}
+
+### Поддержка
+
+См. [таблицу совместимости браузеров](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility) MDN, чтобы узнать, какие браузеры поддерживают предварительную загрузку. Вы можете определить ее доступность с помощью приведенных ниже фрагментов, чтобы настроить показатели производительности.
+
+```js
+function preloadFullVideoSupported() {
+  const link = document.createElement('link');
+  link.as = 'video';
+  return (link.as === 'video');
+}
+
+function preloadFirstSegmentSupported() {
+  const link = document.createElement('link');
+  link.as = 'fetch';
+  return (link.as === 'fetch');
+}
+```
+
+## Ручная буферизация
+
+Прежде чем мы углубимся в [Cache API](https://developer.mozilla.org/docs/Web/API/Cache) и сервис-воркеры, давайте посмотрим, как вручную буферизовать видео с помощью MSE. В приведенном ниже примере предполагается, что ваш веб-сервер поддерживает запросы HTTP [`Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range), хотя это очень похоже на работу с файловыми сегментами. Обратите внимание, что некоторые библиотеки промежуточного ПО, такие как [Google Shaka Player](https://github.com/google/shaka-player), [JW Player](https://developer.jwplayer.com/) и [Video.js](http://videojs.com/), созданы для того, чтобы выполнить эту работу за вас.
+
+```html
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // Извлекаем начало видео, задавая заголовок Range HTTP-запроса.
+    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
+    });
+  }
+
+  function updateEnd() {
+    // Видео готово к воспроизведению!
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`Число секунд видео, готовых к воспроизведению: ${bufferedSeconds}.`);
+
+    // Извлекаем следующий сегмент видео, когда пользователь начинает воспроизведение.
+    video.addEventListener('playing', fetchNextSegment, { once: true });
+  }
+
+  function fetchNextSegment() {
+    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      const sourceBuffer = mediaSource.sourceBuffers[0];
+      sourceBuffer.appendBuffer(data);
+      // Сделать: Извлечь и присоединить следующий сегмент.
+    });
+  }
+</script>
+```
+
+### Учет особенностей
+
+Поскольку теперь вы целиком управляете процессом буферизации мультимедиа, я рекомендую учитывать уровень заряда батареи устройства, пользовательские настройки режима экономии данных и информацию о сети, когда вы планируете предварительную загрузку.
+
+#### Учет заряда батареи
+
+Прежде чем планировать предварительную загрузку видео, примите во внимание уровень заряда батареи устройства пользователя. Это продлит срок службы батареи при низком уровне заряда.
+
+Отключите предварительную загрузку или хотя бы предварительно загрузите видео с более низким разрешением, когда устройство разряжается.
+
+```js
+if ('getBattery' in navigator) {
+  navigator.getBattery()
+  .then(battery => {
+    // Если батарея заряжается или уровень заряда достаточно высок
+    if (battery.charging || battery.level > 0.15) {
+      // Сделать: Предварительная загрузка первого сегмента видео.
+    }
+  });
+}
+```
+
+#### Обнаружение экономии данных
+
+Используйте подсказку клиента (заголовок запроса) `Save-Data`, чтобы передавать быстрые и легкие приложения пользователям, которые выбрали режим экономии данных в своем браузере. Распознавая этот заголовок, ваше приложение может настроить и обеспечить улучшенное взаимодействие с пользователями, у которых есть ограничения расходов и производительности.
+
+Чтобы узнать больше, см. раздел «[Доставка быстрых и легких приложений с экономией данных](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data)».
+
+#### Умная загрузка на основе сетевой информации
+
+Перед предварительной загрузкой может понадобиться проверка `navigator.connection.type`. Когда значение этого параметра равно `cellular`, вы можете предотвратить предварительную загрузку и сообщить пользователям, что их оператор мобильной сети может взимать дополнительную плату за пропускную способность, и запускать автоматическое воспроизведение только ранее кэшированного контента.
+
+```js
+if ('connection' in navigator) {
+  if (navigator.connection.type == 'cellular') {
+    // Сделать: Спросить пользователя перед предварительной загрузкой видео
+  } else {
+    // Сделать: Предварительная загрузка первого сегмента видео.
+  }
+}
+```
+
+Ознакомьтесь с [образцом сетевой информации](https://googlechrome.github.io/samples/network-information/), чтобы узнать, как реагировать на изменения в сети.
+
+### Предварительное кэширование нескольких первых сегментов
+
+А что, если мне гипотетически нужно предварительно загрузить некоторый медиаконтент, не зная, что именно в конечном итоге выберет пользователь? Если пользователь находится на веб-странице, содержащей 10 видео, у нас, вероятно, достаточно памяти, чтобы получить по одному файлу сегмента из каждого, но определенно не стоит создавать 10 скрытых элементов `<video>` и 10 объектов `MediaSource` и начинать передавать эти данные.
+
+В приведенном ниже примере из двух частей показано, как предварительно кэшировать несколько первых сегментов видео с помощью эффективного и простого в использовании [Cache API](/cache-api-quick-guide/). Обратите внимание, что чего-то похожего можно достичь и с помощью IndexedDB. Мы пока не используем сервис-воркеры, так как Cache API также доступен из объекта `window`.
+
+#### Получение и кэширование
+
+```js
+const videoFileUrls = [
+  'bat_video_file_1.webm',
+  'cow_video_file_1.webm',
+  'dog_video_file_1.webm',
+  'fox_video_file_1.webm',
+];
+
+// Создадим предварительный кэш видео и сохраним в нем все первые сегменты видеофайлов.
+window.caches.open('video-pre-cache')
+.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));
+
+function fetchAndCache(videoFileUrl, cache) {
+  // Сначала проверяем, есть ли видео в кэше.
+  return cache.match(videoFileUrl)
+  .then(cacheResponse => {
+    // Вернем кэшированный ответ, если видео в кэше.
+    if (cacheResponse) {
+      return cacheResponse;
+    }
+    // В противном случае получаем видео из сети.
+    return fetch(videoFileUrl)
+    .then(networkResponse => {
+      // Добавляем ответ в кэш и параллельно возвращаем ответ сети.
+      cache.put(videoFileUrl, networkResponse.clone());
+      return networkResponse;
+    });
+  });
+}
+```
+
+Обратите внимание, что если бы я должен был использовать запросы HTTP `Range`, мне бы пришлось вручную воссоздать объект `Response`, поскольку Cache API не поддерживает ответы `Range` — по крайней мере, [пока что](https://github.com/whatwg/fetch/issues/144). Помните, что вызов `networkResponse.arrayBuffer()` извлекает все содержимое ответа сразу в память средства визуализации, поэтому стоит использовать небольшие диапазоны.
+
+Для справки, я изменил часть приведенного выше примера, чтобы сохранить запросы HTTP Range в предварительном кэше видео.
+
+```js
+    ...
+    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
+    .then(networkResponse => networkResponse.arrayBuffer())
+    .then(data => {
+      const response = new Response(data);
+      // Добавляем ответ в кэш и параллельно возвращаем ответ сети.
+      cache.put(videoFileUrl, response.clone());
+      return response;
+    });
+```
+
+#### Воспроизведение видео
+
+Когда пользователь нажимает кнопку воспроизведения, мы получаем первый сегмент видео, доступный в Cache API, так что воспроизведение начинается немедленно, если оно доступно. В противном случае мы просто получим видео из сети. Имейте в виду, что браузеры и пользователи могут решить очистить [кэш](/storage-for-the-web/#eviction).
+
+Как было показано ранее, мы используем MSE для передачи этого первого сегмента видео в видеоэлемент.
+
+```js
+function onPlayButtonClick(videoFileUrl) {
+  video.load(); // Дает возможность проиграть видео позже.
+
+  window.caches.open('video-pre-cache')
+  .then(cache => fetchAndCache(videoFileUrl, cache)) // Определено выше.
+  .then(response => response.arrayBuffer())
+  .then(data => {
+    const mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+    function sourceOpen() {
+      URL.revokeObjectURL(video.src);
+
+      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+      sourceBuffer.appendBuffer(data);
+
+      video.play().then(() => {
+        // Сделать: Получить остальную часть видео при начале воспроизведения.
+      });
+    }
+  });
+}
+```
+
+{% Aside 'warning' %} Для ресурсов из разных источников убедитесь, что заголовки CORS заданы правильно. Поскольку мы не можем создать буфер массива из непрозрачного ответа, полученного с помощью `fetch(videoFileUrl, { mode: 'no-cors' })`, мы не сможем передать какой-либо видео- или аудиоэлемент. {% endAside %}
+
+### Создание ответов Range с помощью сервис-воркера
+
+Что делать, если вы получили весь видеофайл и сохранили его в Cache API? Когда браузер посылает запрос HTTP `Range`, вам совсем не нужно, чтобы видео целиком загружалось в память визуализатора, поскольку Cache API не поддерживает ответы `Range` — по крайней мере, [пока что](https://github.com/whatwg/fetch/issues/144).
+
+Итак, позвольте мне показать, как перехватывать эти запросы и возвращать настроенный ответ `Range` от сервис-воркера.
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(loadFromCacheOrFetch(event.request));
+});
+
+function loadFromCacheOrFetch(request) {
+  // Выполняем поиск по всем доступным для этого запроса кэшам.
+  return caches.match(request)
+  .then(response => {
+
+    // Если не нашли в кэше, получаем из сети.
+    if (!response) {
+      return fetch(request);
+      // Примечание: возможно, понадобится добавить ответ в кэш и
+      // параллельно вернуть ответ сети.
+    }
+
+    // Браузер посылает запрос HTTP Range. Реконструируем его
+    // вручную из кэша.
+    if (request.headers.has('range')) {
+      return response.blob()
+      .then(data => {
+
+        // Получаем стартовую позицию из заголовка Range запроса.
+        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
+        const options = {
+          status: 206,
+          statusText: 'Partial Content',
+          headers: response.headers
+        }
+        const slicedResponse = new Response(data.slice(pos), options);
+        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
+            (data.size - 1) + '/' + data.size);
+        slicedResponse.setHeaders('X-From-Cache': 'true');
+
+        return slicedResponse;
+      });
+    }
+
+    return response;
+  }
+}
+```
+
+Важно отметить, что для воссоздания этого нарезанного ответа я использовал `response.blob()`, поскольку он просто дает мне дескриптор файла, в то время как `response.arrayBuffer()` переносит весь файл в память визуализатора.
+
+Мой собственный HTTP-заголовок `X-From-Cache` можно использовать, чтобы узнать, пришел ли этот запрос из кэша или из сети. Его может использовать такой плеер, как [ShakaPlayer](https://github.com/google/shaka-player/blob/master/docs/tutorials/service-worker.md), чтобы игнорировать время отклика как индикатор скорости сети.
+
+{% YouTube 'f8EGZa32Mts' %}
+
+В официальном [приложении Sample Media](https://github.com/GoogleChrome/sample-media-pwa) и, в частности, в его файле [ranged-response.js](https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/scripts/ranged-response.js) вы можете найти готовое решение для обработки запросов `Range`.
diff --git a/src/site/content/ru/blog/fetch-upload-streaming/index.md b/src/site/content/ru/blog/fetch-upload-streaming/index.md
new file mode 100644
index 00000000000..1a995165910
--- /dev/null
+++ b/src/site/content/ru/blog/fetch-upload-streaming/index.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: Потоковая передача запросов с помощью Fetch API
+authors:
+  - jakearchibald
+description: В Chrome 95 появилась поддержка потоковой передачи при отправке данных. Это означает, что можно запустить запрос, даже когда еще не получено все его тело.
+date: 2020-07-22
+updated: 2021-09-22
+hero: image/admin/9U7u4C7WCGbrdHm3181W.jpg
+alt: Каноэ, направляющееся вверх по течению.
+tags:
+  - blog
+  - chrome-95
+  - network
+  - service-worker
+feedback:
+  - api
+---
+
+Начиная с Chrome 95, с помощью Streams API можно запускать запрос еще до получения всего его тела.
+
+Эту функцию можно использовать для указанных ниже целей.
+
+- «Разогрев» сервера. Другими словами, можно запустить запрос, как только пользователь переместит фокус на текстовое поле ввода данных, убрать все заголовки, а затем подождать, пока пользователь нажмет кнопку «Отправить», прежде чем отправлять введенные им данные.
+- Постепенная отправка данных, созданных в клиенте, например аудио, видео или вводимых пользователем данных.
+- Повторное создание веб-сокетов по протоколу HTTP.
+
+Так как это низкоуровневая функция веб-платформы, не ограничивайтесь *моими* идеями. Возможно, вы придумаете гораздо более интересный сценарий использования функции потоковой передачи запросов.
+
+## Демонстрация {: #demo }
+
+{% Glitch { id: 'fetch-request-stream', path: 'index.html', height: 480 } %}
+
+Здесь показано, как выполнять потоковую передачу данных от пользователя на сервер и отправлять обратно данные, которые можно обрабатывать в режиме реального времени.
+
+Да, это не самый яркий пример, но я хотел, чтобы он был простым.
+
+И как же это работает?
+
+## Ранее о захватывающих приключениях потоков fetch
+
+С некоторого времени потоки *response* поддерживаются во всех современных браузерах. Они позволяют получать доступ к частям ответов по мере их поступления с сервера:
+
+```js
+const response = await fetch(url);
+const reader = response.body.getReader();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+  console.log('Получено', value);
+}
+
+console.log('Ответ полностью получен');
+```
+
+Каждое значение `value` представляет собой массив байтов `Uint8Array`. Количество и размер получаемых массивов зависят от скорости сети. Если у вас высокоскоростное подключение, вы будете получать небольшое количество крупных «порций» данных. При медленном подключении будет поступать большое количество малых фрагментов.
+
+Если вам нужно преобразовывать байты в текст, можно использовать [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder/decode) или более новый поток преобразования (если [целевые браузеры поддерживают его](https://caniuse.com/#feat=mdn-api_textdecoderstream)):
+
+```js
+const response = await fetch(url);
+const reader = response.body
+  .pipeThrough(new TextDecoderStream())
+  .getReader();
+```
+
+`TextDecoderStream` — это поток преобразования, который захватывает все фрагменты `Uint8Array` и преобразовывает их в строки.
+
+Потоки — отличная вещь, так как позволяют начинать работу с данными по мере их поступления. Например, если вы получаете список из 100 «результатов», можно отобразить первый результат сразу после его получения, а не ждать, пока будут получены все 100 элементов списка.
+
+Мы говорили о потоках ответов. А теперь я хочу поговорить о новой захватывающей возможности — потоках запросов.
+
+## Потоковая передача тел запросов
+
+У запросов могут быть тела:
+
+```js
+await fetch(url, {
+  method: 'POST',
+  body: requestBody,
+});
+```
+
+Раньше, чтобы запустить запрос, требовалось, чтобы все его тело было готово к работе. Но теперь, начиная с Chrome 95, вы можете обеспечить собственный поток данных `ReadableStream`:
+
+```js
+function wait(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+const stream = new ReadableStream({
+  async start(controller) {
+    await wait(1000);
+    controller.enqueue('Это ');
+    await wait(1000);
+    controller.enqueue('отправка ');
+    await wait(1000);
+    controller.enqueue('одного ');
+    await wait(1000);
+    controller.enqueue('медленного ');
+    await wait(1000);
+    controller.enqueue('запроса.');
+    controller.close();
+  },
+}).pipeThrough(new TextEncoderStream());
+
+fetch(url, {
+  method: 'POST',
+  headers: { 'Content-Type': 'text/plain' },
+  body: stream,
+});
+```
+
+Приведенный выше код отправляет на сервер сообщение «Это отправка одного медленного запроса» по одному слову за раз с паузами в одну секунду между словами.
+
+Каждый фрагмент тела запроса должен представлять собой массив байтов `Uint8Array`, поэтому для преобразования данных я использую конструкцию `pipeThrough(new TextEncoderStream())`.
+
+### Потоки, поддерживающие запись
+
+Иногда проще работать с потоками, когда можно применять интерфейс `WritableStream`. Для этого можно использовать «идентификационный» поток, который представляет собой пару, поддерживающую чтение и запись. Она будет принимать все, что передается в ее конец, поддерживающий запись, и отправлять это в конец, поддерживающий чтение. Создать такую пару можно, создав поток `TransformStream` без аргументов:
+
+```js
+const { readable, writable } = new TransformStream();
+
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+Теперь все данные, которые вы будете отправлять в поток, поддерживающий запись, будут входить в запрос. Это позволяет сочетать потоки. Вот нелепый пример, когда код получает данные из одного URL-адреса, сжимает их и отправляет их на другой URL-адрес:
+
+```js
+// Получение данных из URL-адреса url1:
+const response = await fetch(url1);
+const { readable, writable } = new TransformStream();
+
+// Сжатие данных, полученных из URL-адреса url1:
+response.body
+  .pipeThrough(new CompressionStream('gzip'))
+  .pipeTo(writable);
+
+// Публикация данных по URL-адресу url2:
+await fetch(url2, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+В примере выше для сжатия произвольных данных с помощью программы gzip используются [потоки сжатия](https://chromestatus.com/feature/5855937971617792).
+
+### Обнаружение функций
+
+```js
+const supportsRequestStreamsP = (async () => {
+  const supportsStreamsInRequestObjects = !new Request('', {
+    body: new ReadableStream(),
+    method: 'POST',
+  }).headers.has('Content-Type');
+
+  if (!supportsStreamsInRequestObjects) return false;
+
+  return fetch('data:a/a;charset=utf-8,', {
+    method: 'POST',
+    body: new ReadableStream(),
+  }).then(() => true, () => false);
+})();
+
+// Note: supportsRequestStreamsP is a promise.
+if (await supportsRequestStreamsP) {
+  // …
+} else {
+  // …
+}
+```
+
+Если вам интересно, то вот как работает механизм обнаружения функций.
+
+Если браузер не поддерживает тело (`body`) определенного типа, он вызывает функцию `toString()` для объекта и использует результат в качестве тела. Таким образом, если браузер не поддерживает потоки запросов, телом запроса становится строка `"[object ReadableStream]"`. Когда в качестве тела используется строка, эта функция задает для заголовка значение `text/plain;charset=UTF-8` (что удобно). Поэтому если для такого заголовка указано значение, мы будем знать, что браузер *не* поддерживает потоки в объектах запросов, и мы можем выполнить выход раньше.
+
+К сожалению, Safari *поддерживает* потоки в объектах запросов, но *не* позволяет использовать их с операцией `fetch`.
+
+Чтобы проверить это, пробуем выполнить операцию `fetch` для тела потока. Если бы тест зависел от сети, он был бы ненадежным и медленным, но, к счастью, одна из особенностей спецификации позволяет выполнять запросы `POST` к URL-адресам `data:`. Такие запросы выполняются быстро и без подключения. Safari отклонит этот вызов, так как он не поддерживает тело потока.
+
+## Ограничения
+
+Потоковая передача запросов — это новая мощная возможность Интернета, поэтому для нее имеется несколько указанных ниже ограничений.
+
+### Ограниченные перенаправления
+
+При использовании некоторых способов перенаправления HTTP необходимо, чтобы браузер повторно отправлял тело запроса на другой URL-адрес. Для этого браузеру требуется выполнять буферизацию содержимого потока, что бессмысленно, и поэтому он не делает это.
+
+Вместо этого, если запрос имеет тело, передаваемое с помощью потоковой передачи данных, а ответ представляет собой перенаправление HTTP, отличное от 303, операция fetch будет отклонена, а перенаправление *не* будет выполнено.
+
+Перенаправления 303 разрешены, так как они явным образом изменяют метод на `GET` и отклоняют тело запроса.
+
+### Использование только HTTP/2 по умолчанию
+
+Если для подключения используется протокол, отличный от HTTP/2, то по умолчанию операция fetch будет отклонена. Если требуется выполнять потоковые запросы по протоколу HTTP/1.1, необходимо использовать следующий код:
+
+```js/3-3
+await fetch(url, {
+  method: 'POST',
+  body: stream,
+  allowHTTP1ForStreamingUpload: true,
+});
+```
+
+{% Aside 'caution' %} Операция `allowHTTP1ForStreamingUpload` — нестандартная, и ее следует использовать только в рамках экспериментальной реализации в Chrome. {% endAside %}
+
+Согласно правилам протокола HTTP/1.1, тела запросов и ответов должны отправлять заголовок `Content-Length`, чтобы сообщить другой стороне количество данных, которое та получит, либо изменять формат сообщения, чтобы использовать [кодирование для фрагментированной передачи данных](https://en.wikipedia.org/wiki/Chunked_transfer_encoding). При таком кодировании тело разбивают на части, причем у всех частей будет разная длина содержимого.
+
+Кодирование для фрагментированной передачи данных применяется довольно широко, когда дело касается *ответов* по протоколу HTTP/1.1, но очень редко используется для *запросов*. Поэтому разработчики Chrome немного беспокоятся о совместимости и на данный момент эта возможность является опциональной.
+
+{% Aside %} Эта проблема не возникает при использовании HTTP/2, так как данные, передаваемые по этому протоколу, всегда «разбиты на фрагменты» (хотя эти фрагменты и называются [кадрами](https://developers.google.com/web/fundamentals/performance/http2#streams_messages_and_frames)). Кодирование для фрагментированной передачи данных не использовалось до появления протокола HTTP/1.1, поэтому запросы с потоковой передачей тел всегда будут приводить к ошибкам при использовании подключений HTTP/1. {% endAside %}
+
+В зависимости от того, как дальше пойдут дела с этой пробной версией, в спецификации для потоковой передачи ответов будет разрешено использовать только протокол HTTP/2 либо будет всегда разрешено использовать протоколы HTTP/1.1 и HTTP/2.
+
+### Отсутствие дуплексной связи
+
+Малоизвестная особенность протокола HTTP (хотя то, насколько это поведение считается стандартным, зависит от того, кого вы спрашиваете) заключается в том, что вы можете начать получать ответ, когда все еще отправляете запрос. Однако эта возможность настолько малоизвестна, что плохо поддерживается серверами и браузерами.
+
+В текущей реализации Chrome вы не получите ответ, пока не будет полностью отправлено тело. В приведенном ниже примере элемент `responsePromise` не будет сопоставлен, пока не будет закрыт поток, поддерживающий чтение. Все данные, которые сервер отправляет до этого момента, будут помещены в буфер.
+
+```js
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readableStream,
+});
+```
+
+Еще одно преимущество дуплексной связи — возможность выполнить операцию fetch с помощью потокового запроса, а затем выполнить еще одну такую операцию для получения потокового ответа. Серверу потребуется какой-то способ связать эти два запроса, например с помощью идентификаторов в URL-адресе. Вот как работает [демонстрация](#demo).
+
+## Возможные проблемы
+
+Это новая функция, которая сейчас недостаточно широко используется в Интернете. Вот ряд проблем, на которые следует обратить внимание.
+
+### Несовместимость на стороне сервера
+
+Некоторые серверы приложений не поддерживают потоковые запросы и прежде чем предоставить ответ, ждут, пока не будет получен весь запрос, что делает бессмысленным применение этой функции. Поэтому используйте сервер приложений, поддерживающий потоковую передачу, например [NodeJS](https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_class_http_incomingmessage).
+
+Но это еще не все. Сервер приложений, например NodeJS, обычно находится за другим сервером (часто называемым «интерфейсным сервером»), который, в свою очередь, может находиться за CDN. Если кто-либо из них решит буферизировать запрос, прежде чем передать его следующему серверу в цепочке, вы не сможете воспользоваться преимуществами, которые дает потоковая передача запросов.
+
+Кроме того, если вы используете протокол HTTP/1.1, один из серверов может не поддерживать кодирование для фрагментированной передачи данных, и на нем может возникнуть ошибка. Но вы можете выполнить тестирование и при необходимости сменить серверы.
+
+*… Долгий вздох…*
+
+### Несовместимость, с которой невозможно ничего поделать
+
+Если вы используете протокол HTTPS, вам не нужно беспокоиться о прокси-серверах между вами и пользователем, но пользователь может использовать прокси-сервер на своем компьютере. Некоторые программы для защиты в Интернете используют эту функцию, чтобы контролировать трафик между браузером и сетью.
+
+В некоторых случаях такие программы выполняют буферизацию тел запросов или (при использовании протокола HTTP/1.1) не ожидают, что будет использоваться кодирование для фрагментированной передачи данных, и каким-то невероятным образом перестают работать.
+
+В данный момент неясно, как часто это может (если вообще будет) происходить.
+
+Если вы хотите защититься от таких проблем, можно создать «тест для проверки функций», аналогичный [приведенной выше демонстрации](#demo), в котором можно попробовать передать данные, не закрывая поток. Если сервер получит эти данные, он может ответить с использованием другой операции fetch. Как только это произойдет, вы будете знать, что клиент поддерживает сквозные потоковые запросы.
+
+## Обратная связь
+
+Отзывы участников сообщества очень важны для разработки новых API, поэтому попробуйте использовать его и расскажите, что вы о нем думаете. Если вы столкнетесь с какими-либо ошибками, [сообщите о них](https://bugs.chromium.org/p/chromium/issues/list). Если у вас есть отзыв общего характера, отправьте его в [группу Google blink-network-dev](https://groups.google.com/a/chromium.org/forum/#!forum/blink-network-dev).
+
+Фото [Лауры Лефурджи-Смит](https://unsplash.com/@lauralefurgeysmith?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) (Laura Lefurgey-Smith) с [Unsplash](https://unsplash.com/s/photos/canoe-stream?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/ru/blog/floc/index.md b/src/site/content/ru/blog/floc/index.md
new file mode 100644
index 00000000000..3184227e4b3
--- /dev/null
+++ b/src/site/content/ru/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: Что такое FLoC?
+subhead: FLoC позволяет выбирать рекламу, не передавая информацию об истории просмотра отдельных пользователей.
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: Стая скворцов над пирсом Брайтона
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} В этой статье описывается дизайн API, реализованный в Chrome для первоначального испытания FLoC по схеме Origin Trial.
+
+В настоящее время разрабатываются будущие итерации API для включения рекламы на основе интересов без сторонних файлов cookie или других механизмов межсайтового отслеживания. {% endAside %}
+
+FLoC предоставляет механизм подбора рекламы по интересам без ущерба для конфиденциальности.
+
+По мере того как пользователь перемещается по веб-страницам, браузер с помощью алгоритма FLoC вычисляет подходящую «когорту интересов», которая будет одинаковой для тысяч различных браузеров с похожей недавней историей просмотра. Время от времени браузер вычисляет принадлежность к когорте заново; это происходит на устройстве пользователя, и индивидуальные данные о просмотре страниц не передаются разработчику браузера или кому-либо еще.
+
+{% Aside %} Во время первоначального испытания FLoC по схеме Origin Trial посещение страницы включалось в расчет FLoC браузера только по одной из двух причин:
+
+- на странице использовался API FLoC (`document.interestCohort()`);
+- Chrome обнаруживал, что страница [загружает рекламу или связанные с ней ресурсы](https://github.com/WICG/floc/issues/82).
+
+Испытание Origin Trial может экспериментировать с другими критериями включения для других алгоритмов кластеризации: это часть процесса первоначального испытания.
+
+Испытание Origin Trial исходной версии FLoC, которая работала в версиях Chrome с 89 по 91, [теперь закрыто](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+Рекламодатели (сайты, которые платят за рекламу) могут устанавливать у себя на сайтах код, собирающий данные о когортах интересов и передающий его рекламным платформам (компаниям, предоставляющим ПО и инструменты для показа рекламы). Например, интернет-магазин обуви может сообщить рекламной платформе, что посетители из когорт 1101 и 1354 интересовались туристическим снаряжением. От других рекламодателей рекламная платформа узнает о других интересах пользователей из этих когорт.
+
+В дальнейшем рекламная платформа может использовать эти данные для подбора релевантной рекламы (например, рекламы туристических ботинок из обувного магазина), когда браузер, принадлежащий к одной из этих когорт, заходит на сайт, показывающий рекламу, например, на новостной портал.
+
+Privacy Sandbox — это серия предложений для обеспечения межсайтового взаимодействия без использования сторонних файлов cookie и других механизмов отслеживания. См. статью [«Углубление в тему Privacy Sandbox»](/digging-into-the-privacy-sandbox), чтобы ознакомиться со всеми предложениями.
+
+**Примите участие в развитии инициативы: поделитесь отзывами или комментариями.** [Откройте вопрос](https://github.com/WICG/floc/issues/new) в репозитории [FLoC Explainer](https://github.com/WICG/floc) или оставьте отзыв об эксперименте с этой инициативой Chrome в обсуждении [Intent to Experiment](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs).
+
+## Зачем нужен FLoC?
+
+Многие компании полагаются на рекламу для привлечения трафика на свои сайты, и многие сайты издателей финансируют контент, продавая рекламные ресурсы. Люди обычно предпочитают видеть релевантную и полезную для себя рекламу. Кроме того, релевантные объявления приносят [больше прибыли рекламодателям и больший доход сайтам, на которых они размещены](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf). Другими словами, рекламное место более ценно, когда на нем отображается релевантная реклама. Таким образом, выбор релевантных объявлений увеличивает доход сайтов, показывающих рекламу.  Это, в свою очередь, означает, что релевантные объявления помогают финансировать создание полезного для пользователей контента.
+
+Многие люди обеспокоены влиянием персонализированной рекламы на конфиденциальность, поскольку на данный момент она использует следящие файлы cookie, фингерпринтинг устройств и другие технологии, которые могут раскрывать рекламодателям и рекламным платформам историю перемещения пользователей между сайтами. Предложение FLoC преследует цель обеспечить более высокий уровень конфиденциальности при подборе рекламы.
+
+## Для чего можно использовать FLoC?
+
+- Чтобы показывать рекламу пользователям из когорт, представители которых, согласно наблюдениям, часто заходят на сайт рекламодателя или проявляют интерес к релевантным темам.
+- Чтобы с помощью моделей машинного обучения предсказывать вероятность конверсии со стороны пользователя, принадлежащего к определенной когорте, и на основе этой вероятности определять ставку при участии в рекламных аукционах.
+- Чтобы рекомендовать пользователям контент. Например, предположим, что посетители новостного сайта из когорт 1234 и 14159 начинают проявлять повышенный интерес к странице спортивных подкастов. Сайт может порекомендовать этот контент другим посетителям из этих когорт.
+
+## Как работает FLoC?
+
+На диаграмме ниже изображены участники процесса выбора и отображения релевантной рекламы с помощью FLoC.
+
+- **Рекламодатель** (компания, оплачивающая рекламу) в этом примере — это интернет-магазин обуви:<br> **<u>shoestore.example</u>**.
+
+- **Издатель** (сайт, который продает рекламное место). В примере это новостной сайт:<br> **<u>dailynews.example</u>**.
+
+- **Рекламная платформа** (предоставляет программное обеспечение и инструменты для показа рекламы):<br> **<u>adnetwork.example</u>**.
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="Диаграмма с пошаговым объяснением различных ролей  участников процесса выбора и отображения релевантной рекламы с помощью FLoC: служба FLoC, браузер, рекламодатели, издатель (наблюдение за когортами), рекламная платформа, издатель (показ рекламы)", width="800", height="359" %}
+
+Для этого примера возьмем двух гипотетических пользователей **Йоши** и **Алекса**. Изначально их браузеры принадлежали к одной когорте — 1354.
+
+{% Aside %} Имена «Йоши» и «Алекс» выбраны исключительно для примера. Имена и личные данные пользователей не раскрываются рекламодателю, издателю или рекламной платформе с FLoC.
+
+Не воспринимайте когорту как совокупность людей. Вместо этого думайте о когорте как о группе просмотров. {% endAside %}
+
+### 1. Служба FLoC
+
+1. Служба FLoC, используемая браузером, создает математическую модель с тысячами «когорт», каждая из которых будет соответствовать тысячам веб-браузеров с похожей недавней историей просмотра. Подробнее о том, как это работает, [ниже](#floc-server).
+2. Каждой когорте присваивается номер.
+
+### 2. Браузер
+
+1. Из службы FLoC браузер Йоши получает данные, описывающие модель FLoC.
+2. Браузер Йоши [формирует свою когорту, используя алгоритм модели FLoC](#floc-algorithm), чтобы вычислить, какая когорта наиболее точно соответствует истории просмотров. В этом примере это будет когорта 1354. Обратите внимание, что браузер Йоши не передает никаких данных службе FLoC.
+3. Таким же образом браузер Алекса вычисляет идентификатор его когорты. История просмотров Алекса отличается от истории Йоши, но достаточно похожа, чтобы их браузеры были отнесены к когорте 1354.
+
+### 3. Рекламодатель: <span style="font-weight:normal">shoestore.example</span>
+
+1. Йоши заходит на сайт <u>shoestore.example</u>.
+2. Сайт запрашивает у браузера Йоши его когорту: 1354.
+3. Йоши смотрит туристические ботинки.
+4. На сайте отмечается, что браузер из когорты 1354 проявил интерес к туристическим ботинкам.
+5. Позже сайт регистрирует дополнительный интерес к своей продукции со стороны когорты 1354, а также со стороны других когорт.
+6. Сайт периодически собирает и передает информацию о когортах и потребительских интересах рекламной платформе <u>adnetwork.example</u>.
+
+Теперь очередь Алекса.
+
+### 4. Издатель: <span style="font-weight:normal">dailynews.example</span>
+
+1. Алекс заходит на новостной сайт <u>dailynews.example</u>.
+2. Сайт запрашивает у браузера Алекса его когорту.
+3. Затем сайт отправляет запрос на показ объявления в рекламную платформу <u>adnetwork.example</u> и передает номер когорты Алекса: 1354.
+
+### 5. Рекламная платформа <span style="font-weight:normal">adnetwork.example</span>
+
+1. Платформа <u>adnetwork.example</u> может выбрать подходящую для Алекса рекламу, объединив данные, полученные от издателя <u>dailynews.example</u> и от рекламодателя <u>shoestore.example</u>:
+
+- Когорта браузера Алекса (1354) предоставляется новостным сайтом <u>dailynews.example</u>.
+- Данные о когортах и потребительских интересах от сайта <u>shoestore.example</u>: «Пользователи браузеров из когорты 1354 могут заинтересоваться туристическими ботинками».
+
+1. Платформа <u>adnetwork.example</u> выбирает подходящее для Алекса объявление: рекламу туристических ботинок от сайта <u>shoestore.example</u>.
+2. Сайт <u>dailynews.example</u> показывает рекламу 🥾.
+
+{% Aside %} Текущие подходы к выбору рекламы основаны на отслеживании файлов cookie и <br>фингерпринтинге устройств, и используются третьими сторонами (например, рекламодателями) для отслеживания индивидуального поведения пользователей при просмотре веб-страниц.
+
+При использовании FLoC браузер **не передает** историю просмотров службе FLoC или кому-либо еще. Браузер на устройстве пользователя сам определяет когорту. История просмотров пользователя никогда не покидает устройство. {% endAside %}
+
+## Кто управляет серверной службой, которая создает модель FLoC?
+
+Производители браузеров должны будут самостоятельно выбрать способ группировки браузеров в когорты. Chrome использует собственную службу FLoC. Другие браузеры могут выбрать для реализации FLoC другой подход к кластеризации и запустить свою службу.
+
+## Как служба FLoC дает браузеру возможность определять свою когорту? {: #floc-server}
+
+1. Служба FLoC, используемая браузером, создает многомерное математическое представление всех потенциальных историй просмотра веб-страниц. Назовем эту модель «когортным пространством».
+2. Служба делит это пространство на тысячи сегментов. Каждый сегмент представляет собой кластер из тысяч похожих историй просмотра. Эти группировки не основаны на знании реальных историй просмотров; они просто основаны на выборе случайных центров в «пространстве когорты» или на разрезании пространства случайными линиями.
+3. Каждому сегменту присваивается номер когорты.
+4. Веб-браузер получает эти данные, описывающие «пространство когорты», из своей службы FLoC.
+5. Когда пользователь просматривает веб-страницы в сети, его браузер [использует алгоритм](#floc-algorithm) для периодического вычисления области в «пространстве когорты», которая наиболее точно соответствует истории просмотра.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="Диаграмма «пространства истории просмотров», созданная сервером FLoC, со множеством сегментов, каждый из которых имеет номер когорты.", width="400", height="359" %} <figcaption>Служба FLoC делит «когортное пространство» на тысячи сегментов (здесь показана лишь малая часть).</figcaption></figure>
+
+{% Aside %} Ни на каком этапе этого процесса история просмотров пользователя не передается службе FLoC или какой-либо третьей стороне. Когорта браузера рассчитывается браузером на устройстве пользователя. Служба FLoC не собирает и не хранит пользовательские данные. {% endAside %}
+
+## Может ли когорта браузера измениться?
+
+*Да*! Когорта браузера определенно может измениться! Вероятно, вы не посещаете одни и те же веб-сайты каждую неделю, и когорта вашего браузера будет это отражать.
+
+Когорта представляет собой группу просмотров, а не группу людей. Характеристики активности когорты, как правило, неизменны во времени, и когорты полезны для выбора объявлений, поскольку они группируют похожие недавние просмотры. Браузеры отдельных людей будут появляться и исчезать из когорты по мере изменения их поведения при просмотре. Первоначально мы ожидаем, что браузер будет пересчитывать свою когорту каждые семь дней.
+
+В приведенном выше примере у браузеров Йоши и Алекса 1354-я когорта. В будущем браузеры Йоши и Алекса могут перейти в другие когорты, если их интересы изменятся. В приведенном ниже примере браузер Йоши переходит в когорту 1101, а браузер Алекса — в когорту 1378. Браузеры других людей будут переходить в когорты и выходить из них по мере изменения интересов просмотра.
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="Диаграмма «пространства истории просмотров», созданная сервером FLoC, показывает несколько сегментов с номерами когорт. На диаграмме показано, как браузеры пользователей Йоши и Алекса переходят из одной когорты в другую по мере изменения их интересов просмотра с течением времени.", width="800", height="533" %} <figcaption> Когорта браузеров Йоши и Алекса может меняться, если меняются их интересы.</figcaption></figure>
+
+{% Aside %} Когорта определяет группу посещаемых страниц, а не группу людей. Браузеры будут входить в группу и выходить из нее по мере изменения истории просмотра. {% endAside %}
+
+## Как браузер вычисляет свою когорту? {: #floc-algorithm}
+
+Как описано выше, браузер пользователя получает от службы FLoC данные, описывающие математическую модель для когорт. Эта модель представляет собой многомерное пространство, состоящее из интересов просмотра всех пользователей. Затем браузер с помощью алгоритма определяет, какая область этого «когортного пространства» (то есть, какая когорта) наиболее точно соответствует недавнему поведению пользователя в браузере.
+
+## Как FLoC определяет правильный размер когорты?
+
+В каждой когорте будут тысячи браузеров.
+
+Меньший размер когорты может быть более полезен для персонализации рекламы, но с меньшей вероятностью остановит слежку за пользователем, и наоборот. Механизм распределения браузеров по когортам должен обеспечивать компромисс между конфиденциальностью и полезностью. Privacy Sandbox использует [k-анонимность](https://en.wikipedia.org/wiki/K-anonymity), чтобы «спрятать пользователя в толпе». Когорта является k-анонимной, если ее разделяют не менее k пользователей. Чем больше число k, тем лучше сохраняется конфиденциальность когорты.
+
+## Можно ли использовать FLoC для группировки людей на основе деликатных категорий?
+
+Алгоритм кластеризации когортной модели FLoC предназначен для оценки того, возможно ли соотнести когорту с деликатными категориями без выяснения причин, по которым категория является деликатной. Когорты, которые могут раскрывать деликатные категории, такие как раса, сексуальная ориентация или история болезни, будут блокироваться. Другими словами, при определении своей когорты браузер будет выбирать только между когортами, которые не раскрывают конфиденциальные данные.
+
+## Является ли FLoC еще одним способом классификации людей в сети?
+
+Служба FLoC распределит браузер пользователя к одной из тысяч когорт, наряду с тысячами браузеров других пользователей. В отличие от сторонних файлов cookie и других механизмов таргетинга, FLoC показывает только когорту, в которой находится браузер пользователя, а не индивидуальный идентификатор пользователя. Это не позволяет сторонним сервисам выделить отдельного человека в когорте. Кроме того, информация о просмотренных сайтах, которая используется для определения когорты браузера, хранится локально в браузере или устройстве и не загружается куда-либо еще. Браузер может дополнительно использовать другие методы анонимизации, такие как [дифференциальная приватность](https://en.wikipedia.org/wiki/Differential_privacy).
+
+## Должны ли веб-сайты участвовать в инициативе и делиться информацией?
+
+У сайтов будет возможность отказаться от участия в инициативе FLoC. Сайты, посвященные деликатным темам, смогут предотвратить включение их посещений в расчет FLoC. В качестве дополнительной защиты анализ, выполняемый службой FLoC, будет оценивать, может ли когорта раскрывать деликатную информацию о пользователях без выяснения причин, по которым эта когорта является деликатной. Если когорта может представлять большее, чем обычно, число людей, посещающих сайты из деликатной категории, вся когорта удаляется. Тяжелое финансовое положение и психическое здоровье относятся этим анализом к деликатным категориям.
+
+Веб-сайты [могут исключить страницу из расчета FLoC](https://github.com/WICG/floc#opting-out-of-computation), установив для этой страницы заголовок [Permissions-Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) `interest-cohort=()`. Посещения остальных страниц будет включено в расчет FLoC браузера при условии, что на странице используется `document.interestCohort()`. В текущем испытании [FLoC Origin Trial](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561) страница также будет включена в расчет, если Chrome обнаружит, что страница [загружает рекламу или ресурсы, связанные с рекламой](https://github.com/WICG/floc/issues/82). (В статье [«Тегирование рекламы в Chromium»](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md) объясняется, как работает механизм обнаружения рекламы в Chrome.)
+
+Страницы, обслуживаемые с частных IP-адресов (например, страницы внутренней сети), не будут участвовать в вычислениях FLoC.
+
+## Как работает API FLoC JavaScript?
+
+{% Aside %} Испытание Origin Trial исходной версии FLoC, которая работала в версиях Chrome с 89 по 91, [теперь закрыто](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561). {% endAside %}
+
+API FLoC очень прост: всего лишь один метод, возвращающий обещание, которое разрешается в объект, предоставляющий `id` и `version` когорты:
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+Предоставленные данные по когорте выглядят следующим образом:
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+Значение `version` позволяет сайтам, использующим FLoC, узнать, к какому браузеру и к какой модели FLoC относится идентификатор когорты. Как описано ниже, обещание, возвращаемое `document.interestCohort()`, будет отклонено для любого фрейма, для которого не предоставлено разрешение `interest-cohort`.
+
+## Могут ли веб-сайты отказаться от включения в расчет FLoC?
+
+Политика разрешений `interest-cohort` позволяет сайту заявить, что он не хочет быть включенным в список сайтов пользователя для расчета когорты. По умолчанию установлена политика `allow`. Обещание, возвращаемое `document.interestCohort()`, будет отклонено для любого фрейма, которому не предоставлено разрешение `interest-cohort`. Если у главного фрейма нет разрешения `interest-cohort`, то посещение страницы не будет включено в расчет когорты интересов.
+
+Например, сайт может отказаться от всех расчетов когорты FLoC, отправив следующий HTTP-заголовок ответа:
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## Может ли пользователь запретить сайтам получать когорту FLoC его браузера?
+
+Если пользователь отключит Privacy Sandbox в `chrome://settings/privacySandbox`, браузер не предоставит когорту пользователей при запросе через JavaScript: обещание, возвращаемое `document.interestCohort()`, будет отклонено.
+
+## Как я могу внести предложения или оставить отзыв?
+
+Если у вас есть комментарии к API, [откройте вопрос](https://github.com/WICG/floc/issues/new) в репозитории [FLoC Explainer](https://github.com/WICG/floc).
+
+## Дополнительные сведения
+
+- [Подробно о Privacy Sandbox](/digging-into-the-privacy-sandbox/).
+- [FLoC Explainer](https://github.com/WICG/floc).
+- [Испытание FLoC по схеме Origin Trial и кластеризация](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc).
+- [Оценка когортных алгоритмов для API FLoC](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md).
+
+---
+
+Фото [Риса Кентиша](https://unsplash.com/@rhyskentish)(Rhys Kentish) с [Unsplash](https://unsplash.com/photos/I5AYxsxSuVA).
diff --git a/src/site/content/ru/blog/get-installed-related-apps/index.md b/src/site/content/ru/blog/get-installed-related-apps/index.md
new file mode 100644
index 00000000000..694f9b74133
--- /dev/null
+++ b/src/site/content/ru/blog/get-installed-related-apps/index.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: Установлено ли ваше приложение? getInstalledRelatedApps() покажет!
+subhead: Метод getInstalledRelatedApps() позволяет вашему веб-сайту проверять, установлено ли ваше приложение для iOS/Android/десктопа или PWA на устройстве пользователя.
+authors:
+  - petelepage
+description: API getInstalledRelatedApps() — это API веб-платформы, который позволяет проверить, установлено ли ваше приложение для iOS/Android/десктопа или PWA на устройстве пользователя.
+date: 2018-12-20
+updated: 2021-09-16
+tags:
+  - blog
+  - capabilities
+hero: image/admin/v9t93rXITPqFe3L0qlTN.jpg
+alt: мобильное устройство с открытой панелью приложения
+feedback:
+  - api
+---
+
+## Что такое API getInstalledRelatedApps()? {: #what }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486" %} <figcaption> Веб-сайт, использующий <code>getInstalledRelatedApps()</code>, чтобы определить, установлено ли его приложение для Android. </figcaption></figure>
+
+[`getInstalledRelatedApps()`](https://wicg.github.io/get-installed-related-apps/spec/) позволяет *вашей* странице проверять, установлено ли *ваше* мобильное или десктопное приложение или, в некоторых случаях, прогрессивное веб-приложение (PWA) на устройстве пользователя, и позволяет настраивать взаимодействие с пользователем, когда приложение установлено.
+
+Например, если ваше приложение уже установлено:
+
+- Перенаправление пользователя с маркетинговой страницы продукта прямо в ваше приложение.
+- Централизация некоторых функций, например, уведомлений, в другом приложении для предотвращения дублирования.
+- Прекращение [рекламы установки](/customize-install/) PWA, если другое ваше приложение уже установлено.
+
+Чтобы использовать API `getInstalledRelatedApps()`, вам необходимо сообщить своему приложению о своем сайте, а затем сообщить своему сайту о своем приложении. Определив связь между ними, вы можете проверить, установлено ли приложение.
+
+### Поддерживаемые типы приложений, которые можно проверить
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>Тип приложения</th>
+        <th>Проверяется с</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#check-android">Приложение для Android</a></td>
+        <td>Только Android<br> Chrome 80 или новее</td>
+      </tr>
+      <tr>
+        <td><a href="#check-windows">Приложение для Windows (UWP)</a></td>
+        <td>Только Windows<br> Chrome 85 или новее<br> Edge 85 или новее</td>
+      </tr>
+      <tr>
+        <td>Прогрессивное веб-приложение<br> Установлено в <a href="#check-pwa-in-scope">той же</a> или <a href="#check-pwa-out-of-scope">другой области определения</a>.</td>
+        <td>Только Android<br> Chrome 84 или новее</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} API `getInstalledRelatedApps()` позволяет только проверять, установлены ли *ваши* приложения. Вы не можете получить список всех установленных приложений или проверить, установлены ли другие сторонние приложения. {% endAside %}
+
+<!--  Android App -->
+
+## Проверка, установлено ли ваше приложение для Android {: #check-android }
+
+Ваш веб-сайт может проверить, установлено ли ваше приложение для Android.
+
+{% Compare 'better', 'Поддерживается для' %} Android: Chrome 80 или новее {% endCompare %}
+
+### Сообщите своему Android-приложению о своем веб-сайте
+
+Во-первых, необходимо обновить приложение Android, чтобы определить взаимосвязь между вашим веб-сайтом и приложением Android с помощью системы [Digital Asset Links](https://developers.google.com/digital-asset-links/v1/getting-started). Это гарантирует, что только ваш веб-сайт сможет проверить, установлено ли ваше приложение для Android.
+
+В `AndroidManifest.xml` вашего Android-приложения добавьте запись `asset_statements`:
+
+```xml
+<manifest>
+  <application>
+   …
+    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
+   …
+  </application>
+</manifest>
+```
+
+Затем в `strings.xml` добавьте следующую инструкцию ресурса, обновляя `site` со своим доменом. Не забудьте добавить escape-символы.
+
+```xml
+<string name="asset_statements">
+  [{
+    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
+    \"target\": {
+      \"namespace\": \"web\",
+      \"site\": \"https://example.com\"
+    }
+  }]
+</string>
+```
+
+После завершения опубликуйте обновленное приложение для Android в магазине Play.
+
+### Сообщите своему сайту о своем приложении для Android
+
+Затем сообщите своему веб-сайту о своем приложении для Android, добавив на свою страницу [манифест веб-приложения](/add-manifest/). Манифест должен включать свойство `related_applications`, массив, который предоставляет подробную информацию о вашем приложении, в том числе `platform` и `id`.
+
+- Значение `platform` должно быть `play`
+- `id` — это идентификатор приложения GooglePlay для вашего Android-приложения
+
+```json
+{
+  "related_applications": [{
+    "platform": "play",
+    "id": "com.android.chrome",
+  }]
+}
+```
+
+### Проверка, установлено ли ваше приложение
+
+Наконец, вызовите [`navigator.getInstalledRelatedApps()`](#use) чтобы проверить, установлено ли ваше приложение для Android.
+
+Попробуйте [демонстрацию](https://get-installed-apps.glitch.me/)
+
+<!--  Windows App -->
+
+## Проверка, установлено ли ваше приложение для Windows (UWP) {: #check-windows }
+
+Ваш веб-сайт может проверить, установлено ли ваше приложение для Windows (созданное с использованием UWP).
+
+{% Compare 'better', 'Поддерживается для' %} Windows: Chrome 85 или новее, Edge 85 или новее {% endCompare %}
+
+### Сообщите приложению Windows о своем веб-сайте
+
+Необходимо обновить приложение Windows, чтобы определить связь между вашим веб-сайтом и приложением Windows с помощью [обработчиков URI](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking). Это гарантирует, что только ваш веб-сайт сможет проверить, установлено ли ваше приложение для Windows.
+
+Добавьте расширение `Windows.appUriHandler` в файл манифеста вашего приложения `Package.appxmanifest`. Например, если адрес вашего веб-сайта — `example.com`, нужно добавить следующую запись в манифест приложения:
+
+```xml
+<Applications>
+  <Application Id="App" ... >
+      ...
+      <Extensions>
+         <uap3:Extension Category="windows.appUriHandler">
+          <uap3:AppUriHandler>
+            <uap3:Host Name="example.com" />
+          </uap3:AppUriHandler>
+        </uap3:Extension>
+      </Extensions>
+  </Application>
+</Applications>
+```
+
+Обратите внимание, что может потребоваться добавить [пространство имен `uap3`](https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/uapmanifestschema/element-uap3-extension-manual#examples) к атрибуту `<Package>`.
+
+Затем создайте файл JSON (без расширения `.json`) с именем `windows-app-web-link` и укажите имя семейства пакетов вашего приложения. Поместите этот файл либо в корень вашего сервера, либо в каталог `/.well-known/`. Имя семейства пакетов можно найти в разделе «Упаковка» в конструкторе манифеста приложения.
+
+```json
+[{
+  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
+  "paths": [ "*" ]
+}]
+```
+
+См. [Включение приложений для веб-сайтов с помощью обработчиков URI приложений](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking) для получения полной информации о настройке обработчиков URI.
+
+### Сообщите своему сайту о своем приложении для Windows
+
+Затем сообщите своему веб-сайту о своем приложении для Windows, добавив на свою страницу [манифест веб-приложения](/add-manifest/). Манифест должен включать свойство `related_applications`, массив, который предоставляет подробную информацию о вашем приложении, в том числе `platform` и `id`.
+
+- Значение `platform` должно быть `windows`
+- `id` — это имя семейства пакетов вашего приложения, добавленное значением `<Application>` `Id` в файл `Package.appxmanifest`.
+
+```json
+{
+  "related_applications": [{
+    "platform": "windows",
+    "id": "MyApp_9jmtgj1pbbz6e!App",
+  }]
+}
+```
+
+### Проверка, установлено ли ваше приложение
+
+Наконец, вызовите [`navigator.getInstalledRelatedApps()`](#use) чтобы проверить, установлено ли ваше приложение для Windows.
+
+<!--  PWA - in scope -->
+
+## Проверка, установлено ли ваше прогрессивное веб-приложение (в области определения) {: #check-pwa-in-scope }
+
+Ваше PWA может проверить, установлено ли оно. В этом случае страница, отправляющая запрос, должна находиться в том же домене и в [области определения](/add-manifest/#scope) вашего PWA, как обозначено в манифесте веб-приложения.
+
+{% Compare 'better', 'Поддерживается для' %} Android: Chrome 84 или новее {% endCompare %}
+
+### Сообщите своему PWA о нем
+
+Сообщите своему PWA о нем, добавив запись `related_applications` в [манифест веб-приложения](/add-manifest/) PWA.
+
+- Значение `platform` должно быть `webapp`
+- `url` — это полный путь к манифесту веб-приложения вашего PWA
+
+```json
+{
+  …
+  "scope": "/",
+  "start_url": "/",
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://example.com/manifest.json",
+  }],
+  …
+}
+```
+
+### Проверка, установлено ли ваше PWA
+
+Наконец, вызовите [`navigator.getInstalledRelatedApps()`](#use) из [области определения](/add-manifest/#scope) вашего PWA, чтобы проверить, установлено ли оно. Если `getInstalledRelatedApps()` вызывается вне области определения вашего PWA, метод вернет false. См. подробности в следующем разделе.
+
+Попробуйте [демонстрацию](https://gira-same-domain.glitch.me/pwa/)
+
+<!--  PWA - NOT in scope -->
+
+## Проверка, установлено ли ваше прогрессивное веб-приложение (вне области определения) {: #check-pwa-out-of-scope }
+
+Ваш сайт может проверить, установлено ли ваше PWA, даже если страница находится вне [области определения](/add-manifest/#scope) вашего PWA. Например, целевая страница, обслуживаемая с `/landing/`, может проверять, установлено ли PWA, обслуживаемое с `/pwa/`, или же ваша целевая страница обслуживается с `www.example.com`, а PWA — с `app.example.com`.
+
+{% Compare 'better', 'Поддерживается для' %} Android: Chrome 84 или новее {% endCompare %}
+
+### Сообщите своему PWA о своем веб-сайте
+
+Во-первых, нужно добавить ссылки на цифровые ресурсы на сервер, с которого обслуживается ваше PWA. Это поможет определить взаимосвязь между вашим веб-сайтом и вашим PWA и гарантирует, что только ваш веб-сайт сможет проверить, установлено ли ваше PWA.
+
+Добавьте файл `assetlinks.json` в каталог [`/.well-known/`](https://tools.ietf.org/html/rfc5785) домена, где находится PWA, например, `app.example.com`. В свойстве `site` укажите полный путь к манифесту веб-приложения, которое будет выполнять проверку (а не к манифесту веб-приложения вашего PWA).
+
+```json
+// Обслуживается с https://app.example.com/.well-known/assetlinks.json
+[
+  {
+    "relation": ["delegate_permission/common.query_webapk"],
+    "target": {
+      "namespace": "web",
+      "site": "https://www.example.com/manifest.json"
+    }
+  }
+]
+```
+
+{% Aside %} Перепроверьте имя файла при создании `assetlinks.json`. Я потратил много часов на отладку и только потом понял, что добавил лишнюю букву «s» в имя файла. {% endAside %}
+
+### Сообщите своему сайту о своем PWA
+
+Затем сообщите своему веб-сайту о своем PWA, добавив на свою страницу [манифест веб-приложения](/add-manifest/). Манифест должен включать свойство `related_applications`, массив, который предоставляет подробную информацию о вашем PWA, в том числе `platform` и `url`.
+
+- Значение `platform` должно быть `webapp`
+- `url` — это полный путь к манифесту веб-приложения вашего PWA
+
+```json
+{
+  "related_applications": [{
+    "platform": "webapp",
+    "url": "https://app.example.com/manifest.json",
+  }]
+}
+```
+
+### Проверка, установлено ли ваше PWA
+
+Наконец, вызовите [`navigator.getInstalledRelatedApps()`](#use), чтобы проверить, установлено ли ваше PWA.
+
+Попробуйте [демонстрацию](https://gira-same-domain.glitch.me/)
+
+<!--  Use the API-->
+
+## Вызов getInstalledRelatedApps() {: #use }
+
+Вызов `navigator.getInstalledRelatedApps()` возвращает обещание, которое разрешается с массивом ваших приложений, установленных на устройстве пользователя.
+
+```js
+const relatedApps = await navigator.getInstalledRelatedApps();
+relatedApps.forEach((app) => {
+  console.log(app.id, app.platform, app.url);
+});
+```
+
+Чтобы сайты не тестировали слишком широкий набор собственных приложений, во внимание будут приниматься только первые три приложения, объявленные в манифесте веб-приложения.
+
+Как и большинство других мощных веб-API, API `getInstalledRelatedApps()` доступен только при обслуживании по **HTTPS**.
+
+## Остались вопросы? {: #questions }
+
+Остались вопросы? Поищите записи с тегом [`getInstalledRelatedApps` на StackOverflow](https://stackoverflow.com/search?q=getinstalledrelatedapps), чтобы узнать, были ли у кого-нибудь похожие вопросы. Если нет, задайте там свой [вопрос](https://stackoverflow.com/questions/tagged/progressive-web-apps) и обязательно пометьте его тегом [`progressive-web-apps`](https://stackoverflow.com/questions/tagged/progressive-web-apps). Наша команда часто отслеживает этот тег и старается ответить на ваши вопросы.
+
+## Отзывы {: #feedback}
+
+Вы нашли ошибку в реализации Chrome? Реализация отличается от спецификации?
+
+- Сообщите об ошибке на [https://new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Mobile%3EWebAPKs). Обязательно укажите как можно больше подробностей, простые инструкции по воспроизведению ошибки и введите `Mobile>WebAPKs` в поле «**Components**». [Glitch](https://glitch.com) отлично подходит для быстрого и легкого воспроизведения ошибок.
+
+## Поддержите API
+
+Собираетесь использовать API `getInstalledRelatedApps()`? Ваша публичная поддержка помогает команде Chrome расставлять функции в порядке приоритетности и показывает другим поставщикам браузеров, насколько важно их поддерживать.
+
+- Расскажите, как вы планируете использовать API, в [ветке обсуждения WICG](https://discourse.wicg.io/t/proposal-get-installed-related-apps-api/1602) .
+- Отправьте твит на [@ChromiumDev](https://twitter.com/chromiumdev) с хэштегом [`#getInstalledRelatedApps`](https://twitter.com/search?q=%23getInstalledRelatedApps&src=typed_query&f=live) и сообщите нам, где и как вы его используете.
+
+## Полезные ссылки {: #helpful }
+
+- [Общедоступное объяснение API `getInstalledRelatedApps()`](https://github.com/WICG/get-installed-related-apps/blob/main/EXPLAINER.md)
+- [Черновая спецификация](https://wicg.github.io/get-installed-related-apps/spec/)
+- [Отслеживание ошибок](https://bugs.chromium.org/p/chromium/issues/detail?id=895854)
+- [Запись на ChromeStatus.com](https://www.chromestatus.com/feature/5695378309513216)
+- Компонент Blink: [`Mobile>WebAPKs`](https://chromestatus.com/features#component%3A%20Mobile%3EWebAPKs)
+
+## Благодарности
+
+Особая благодарность Сунггуку Чу из Microsoft за помощь с тонкостями тестирования приложений для Windows и Райану Кансо за помощь с тонкостями Chrome.
diff --git a/src/site/content/ru/blog/how-to-use-local-https/index.md b/src/site/content/ru/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..12df312a954
--- /dev/null
+++ b/src/site/content/ru/blog/how-to-use-local-https/index.md
@@ -0,0 +1,269 @@
+---
+title: Использование протокола HTTPS при разработке в локальной среде
+subhead: Иногда может потребоваться использовать протокол HTTPS для локального сайта разработки. Средства и советы, позволяющие сделать это быстро и безопасно.
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %} В большинстве случаев узел `http://localhost` делает то, что вам нужно, — в браузерах он обычно ведет себя как HTTPS 🔒. Именно поэтому некоторые API, которые не работают на развернутом HTTP-сайте, будут работать на узле `http://localhost`.
+
+Это означает, что протокол HTTPS следует применять в локальной среде **только в особых случаях** (см. статью «[Когда использовать протокол HTTPS для разработки в локальной среде](/when-to-use-local-https)»), например при работе с пользовательскими именами хостов или безопасными файлами cookie в браузерах. Если это ваш случай, читайте дальше! {% endAside %}
+
+*Все, что говорится в этой публикации об узле `localhost` справедливо и для узлов `127.0.0.1` и `[::1]`, так как последние означают адрес локального компьютера, также называемый петлевым адресом. Кроме того, для простоты мы не будем указывать номера портов.**Поэтому текст `http://localhost` следует читать как `http://localhost:{ПОРТ}` или `http://127.0.0.1:{ПОРТ}`.*
+
+Если на вашем рабочем веб-сайте используется протокол HTTPS, вам, возможно, потребуется, чтобы локальный сайт разработки вел себя **как HTTPS-сайт** (если на вашем рабочем веб-сайте не используется протокол HTTPS, [включите переход на протокол HTTPS в список своих приоритетных задач](/why-https-matters/)). В большинстве случаев вы можете быть уверены, что узел `http://localhost` будет вести себя **как HTTPS-сайт**. Тем не менее [в некоторых случаях](/when-to-use-local-https) может потребоваться, чтобы ваш сайт работал в локальной среде с использованием протокола HTTPS. Давайте посмотрим, как это сделать.
+
+**⏩ Вам нужны краткие инструкции или вы уже были здесь раньше? Перейти к [шпаргалке](#using-mkcert-cheatsheet).**
+
+## Запуск сайта в локальной среде с поддержкой протокола HTTPS с помощью mkcert (рекомендуемый способ)
+
+Чтобы использовать протокол HTTPS для сайта разработки в локальной среде и получить доступ к узлу `https://localhost` или `https://mysite.example` (пользовательское имя хоста), вам понадобится [сертификат TLS](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate). Однако браузеры не считают любые сертификаты допустимыми: сертификат должен быть **подписан** организацией, которой доверяет браузер и которая называется доверенным **[центром сертификации](https://en.wikipedia.org/wiki/Certificate_authority)**.
+
+Вам потребуется создать сертификат и подписать его в центре сертификации, которому **локально доверяют** ваши устройство и браузер. С помощью средства [mkcert](https://github.com/FiloSottile/mkcert) можно сделать это несколькими командами. Вот как оно работает.
+
+- Если вы откроете свой работающий в локальной среде сайт в браузере с использованием протокола HTTPS, браузер проверит сертификат вашего локального сервера разработки.
+- Определив, что сертификат подписан центром сертификации, созданным средством mkcert, браузер проверит, зарегистрирован ли этот центр в качестве доверенного центра сертификации.
+- Средство mkcert включено в список доверенных центров, поэтому браузер будет доверять сертификату и создаст HTTPS-соединение.
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="Схема, на которой показано, как работает средство mkcert.", width="800", height="787" %} <figcaption>Схема, на которой показано, как работает средство mkcert.</figcaption></figure>
+
+Средство mkcert (и аналогичные инструменты) дает несколько указанных ниже преимуществ.
+
+- Средство mkcert предназначено для создания сертификатов, **которые браузеры считают допустимыми**. Оно постоянно обновляется в соответствии с новыми требованиями и рекомендациями. Поэтому для создания нужных сертификатов вам не придется запускать команды mkcert со сложными конфигурациями или аргументами.
+- Средство mkcert — кроссплатформенное. Его может использовать любой участник вашей команды.
+
+Мы рекомендуем создавать сертификаты TLS для локальной разработки с помощью средства mkcert. Но вы можете изучить и [другие способы](#running-your-site-locally-with-https-other-options).
+
+В состав многих операционных систем входят библиотеки для создания сертификатов, например [openssl](https://www.openssl.org/). В отличие от mkcert и аналогичных средств такие библиотеки не всегда могут создавать правильные сертификаты. Для их использования, возможно, потребуется выполнять сложные команды, а сами они не всегда кроссплатформенные.
+
+{% Aside 'gotchas' %} Средство mkcert, которое мы рассмотрим в данной публикации, — [такое](https://github.com/FiloSottile/mkcert), а не [такое](https://www.npmjs.com/package/mkcert). {% endAside %}
+
+### Предупреждение
+
+{% Aside 'caution' %}
+
+- Никогда не экспортируйте и никому не передавайте файл `rootCA-key.pem`, который средство mkcert автоматически создает при выполнении команды `mkcert -install`. **Злоумышленник, завладевший этим файлом, будет способен организовывать атаки в пути для любого сайта, который вы можете посетить**. Он сможет перехватывать защищенные запросы с вашего компьютера к любым сайтам — банков, поставщиков медицинских услуг или социальных сетей. Если вам нужно узнать, где расположен файл `rootCA-key.pem`, чтобы убедиться, что он хранится в безопасном расположении, выполните команду `mkcert -CAROOT`.
+- Используйте средство mkcert только в **целях разработки** и, соответственно, никогда не просите конечных пользователей выполнять команды mkcert.
+- Команды разработчиков: все участники вашей команды должны установить и запускать средство mkcert **по отдельности** (не хранить и не обмениваться центрами сертификации и сертификатами).
+
+{% endAside %}
+
+### Настройка
+
+1. Установите средство mkcert (это нужно сделать только один раз).
+
+    Следуйте [инструкциям](https://github.com/FiloSottile/mkcert#installation) по установке средства mkcert в используемой вами операционной системе. Пример для macOS:
+
+    ```bash
+    brew install mkcert
+    brew install nss # если вы используете Firefox
+    ```
+
+2. Добавьте средство mkcert в список локальных корневых центров сертификации.
+
+    В терминале выполните следующую команду:
+
+    ```bash
+    mkcert -install
+    ```
+
+    В результате будет создан локальный центр сертификации (ЦС). Локальный ЦС, созданный средством mkcert, будет доверенным только **локально** на вашем устройстве.
+
+3. Создайте сертификат, подписанный средством mkcert, для своего сайта.
+
+    В терминале перейдите в корневой каталог сайта или в любой другой каталог, в котором нужно разместить сертификаты.
+
+    Затем выполните следующую команду:
+
+    ```bash
+    mkcert localhost
+    ```
+
+    Если вы применяете пользовательское имя хоста, например `mysite.example`, выполните следующую команду:
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    Приведенная выше команда выполняет две функции:
+
+    - создает сертификат для указанного вами имени хоста;
+    - позволяет средству mkcert (которое вы добавили в качестве локального центра сертификации в действии 2) подписать этот сертификат.
+
+    Теперь сертификат готов и подписан центром сертификации, которому ваш браузер доверяет в локальной среде. Почти все сделано, но у вашего сервера еще нет информации об этом сертификате.
+
+4. Настройте сервер.
+
+    Теперь нужно сообщить серверу, что следует использовать протокол HTTPS (так как по умолчанию серверы разработки обычно используют протокол HTTP) и только что созданный сертификат TLS.
+
+    То, как сделать это, зависит от вашего сервера. Ниже приведено несколько примеров.
+
+    **👩🏻‍💻 С использованием узла**
+
+    `server.js` (замените выражения `{ПУТЬ/К/ФАЙЛУ...}` и `{ПОРТ}` нужными значениями):
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem'),
+      cert: fs.readFileSync('{ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // код сервера
+      })
+      .listen({ПОРТ});
+    ```
+
+    **👩🏻‍💻 С использованием [HTTP-сервера](https://www.npmjs.com/package/http-server)**
+
+    Запустите сервер следующим образом (замените выражение `{ПУТЬ/К/ФАЙЛУ...}` нужным значением):
+
+    ```bash
+    http-server -S -C {ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem -K {ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem
+    ```
+
+    Параметр `-S` позволяет запустить сервер с использованием протокола HTTPS, параметр `-C` указывает сертификат, а параметр `-K` указывает ключ.
+
+    **👩🏻‍💻 С использованием сервера разработки React**
+
+    Отредактируйте файл `package.json` следующим образом (заменив выражение `{ПУТЬ/К/ФАЙЛУ...}` нужным значением):
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem SSL_KEY_FILE={ПУТЬ/К/ФАЙЛУ-КЛЮЧА-СЕРТИФИКАТА}.pem react-scripts start"
+    ```
+
+    Например, вы создали сертификат для узла `localhost`, который находится в корневом каталоге сайта, как показано ниже:
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    Тогда скрипт `start` должен выглядеть следующим образом:
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 Другие примеры**
+
+    - [Сервер разработки Angular](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨ Готово! Перейдите на узел `https://localhost` или `https://mysite.example` в браузере: ваш сайт работает в локальной среде с использованием протокола HTTPS. В браузере не будут отображаться никакие предупреждения, потому что он доверяет средству mkcert как локальному центру сертификации.
+
+{% Aside %} На вашем сервере может использоваться другой порт для протокола HTTPS. {% endAside %}
+
+### Использование средства mkcert: шпаргалка
+
+{% Details %} {% DetailsSummary %} Кратко о средстве mkcert {% endDetailsSummary %}
+
+Чтобы запустить локальный сайт разработки с использованием протокола HTTPS, выполните указанные ниже действия.
+
+1. Настройте средство mkcert.
+
+    Установите средство mkcert, если вы еще не сделали этого. Пример для macOS:
+
+    ```bash
+    brew install mkcert
+    ```
+
+    Ознакомьтесь с инструкциями [по установке средства mkcert](https://github.com/FiloSottile/mkcert#installation) для ОС Windows и Linux.
+
+    Затем создайте локальный центр сертификации:
+
+    ```bash
+    mkcert -install
+    ```
+
+2. Создайте доверенный сертификат.
+
+    ```bash
+    mkcert {ИМЯ ВАШЕГО УЗЛА, например localhost или mysite.example}
+    ```
+
+    В результате будет создан действующий сертификат (который будет автоматически подписан средством `mkcert`).
+
+3. Настройте сервер разработки для использования протокола HTTPS и сертификата, созданного в действии 2.
+
+4. ✨ Готово! Теперь вы можете открыть сайт `https://{ИМЯ ВАШЕГО УЗЛА}` в браузере и при этом не будут отображаться никакие предупреждения.
+
+{% Aside 'caution' %}
+
+Делайте это только в **целях разработки**. **Никогда не экспортируйте и никому не передавайте** файл `rootCA-key.pem` (если вам нужно узнать, где находится этот файл, чтобы убедиться, что он хранится в безопасном расположении, выполните команду `mkcert -CAROOT`).
+
+{% endAside %}
+
+{% endDetails %}
+
+## Запуск сайта в локальной среде с использованием протокола HTTPS: другие способы
+
+### Самозаверяющий сертификат
+
+Возможно, вы решите не использовать локальный центр сертификации, например mkcert, а вместо этого **самостоятельно подписать сертификат**.
+
+При таком подходе имеется ряд указанных ниже «подводных камней».
+
+- Браузеры не доверяют вам как центру сертификации, и они будут отображать предупреждения, которые вам придется обходить вручную. В Chrome можно использовать флаг `#allow-insecure-localhost`, чтобы автоматически обходить это предупреждение на узле `localhost`. Может показаться, что такой способ не совсем правильный, и это действительно так.
+- Это небезопасно, если вы работаете в небезопасной сети.
+- Самозаверяющие сертификаты ведут себя не совсем так, как доверенные сертификаты.
+- Использовать их не всегда проще или быстрее, чем локальный центр сертификации, например mkcert.
+- Если вы не будете использовать этот метод в контексте браузера, то вам, возможно, потребуется отключить проверку сертификата для сервера. Если затем не включить ее в рабочей среде, это может быть опасно.
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="Снимки экрана с предупреждениями, отображаемыми браузерами, когда используется самозаверяющий сертификат.", width="800", height="598" %} <figcaption>Предупреждения, отображаемые браузерами, когда используется самозаверяющий сертификат.</figcaption></figure>
+
+{% Aside %} Если вы не укажете никакой сертификат, на основании параметров [React](https://create-react-app.dev/docs/using-https-in-development/) и [Vue](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve) протокола HTTPS сервера разработки будет автоматически создан самозаверяющий сертификат. Это быстро, но при этом будут отображаться предупреждения браузеров и возникнут другие  перечисленные выше ошибки, связанные с самозаверяющими сертификатами. К счастью, вы можете использовать встроенную опцию HTTPS в интерфейсной части платформы **и** указать локально доверенный сертификат, созданный с помощью mkcert или аналогичного средства. Сведения о том, как сделать это, см. в статье «[Пример mkcert с использованием React](/#setup:~:text=a%20React%20development%20server)». {% endAside %}
+
+{% Details %} {% DetailsSummary %} Почему браузеры не доверяют самозаверяющим сертификатам? {% endDetailsSummary %}
+
+Если вы откроете свой сайт, работающий в локальной среде, в браузере с использованием протокола HTTPS, браузер проверит сертификат локального сервера разработки. Когда браузер определит, что вы самостоятельно подписали сертификат, он проверит, зарегистрированы ли вы в качестве доверенного центра сертификации. Поскольку это не так, браузер не может доверять сертификату; он будет отображать предупреждение о том, что соединение небезопасно. Вы можете продолжить работу на свой страх и риск, и в этом случае будет создано HTTPS-соединение.
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="Почему браузеры не доверяют самозаверяющим сертификатам: схема.", width="800", height="833" %} <figcaption>Почему браузеры не доверяют самозаверяющим сертификатам.</figcaption></figure>
+
+{% endDetails %}
+
+### Сертификат, подписанный обычным центром сертификации
+
+Вы также можете найти методы, при использовании которого сертификат будет подписан реальным (а не локальным) центром сертификации.
+
+Если вы планируете использовать эти методы, следует помнить о нескольких указанных ниже моментах.
+
+- Вам придется потратить больше усилий на настройку, чем при использовании метода с локальным центром сертификации, например mkcert.
+- Вам потребуется использовать допустимое доменное имя, которым вы управляете. Это означает, что вы **не сможете** использовать реальные центры сертификации для:
+    - `localhost` и других [зарезервированные](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml) доменных имен, например `example` или `test`;
+    - любых доменных имен, которыми вы не управляете;
+    - недопустимых доменов верхнего уровня. См. [список допустимых доменов верхнего уровня](https://www.iana.org/domains/root/db).
+
+### Обратный прокси-сервер
+
+Еще один способ доступа к сайту, работающему в локальной среде, с помощью протокола HTTPS — использовать [обратный прокси-сервер](https://en.wikipedia.org/wiki/Reverse_proxy), например [ngrok](https://ngrok.com/).
+
+Ниже указано несколько моментов, которые следует учитывать.
+
+- К вашему локальному сайту разработки сможет получить доступ любой человек, которому вы предоставите URL-адрес, созданный с помощью обратного прокси. Это может быть очень удобно при демонстрации проекта клиентам. Но это также может быть недостатком, если вы работаете над конфиденциальным проектом.
+- Возможно, вам придется учитывать цены.
+- Новые [меры безопасности](/cors-rfc1918-feedback/), применяемые в браузерах, могут влиять на работу этих средств.
+
+### Использование флагов (нерекомендуемый способ)
+
+Если вы применяете пользовательское имя хоста, например `mysite.example`, с помощью определенного флага в Chrome можно принудительно указать браузеру, чтобы он считал сайт `mysite.example` безопасным. **Старайтесь не делать это** по указанным ниже причинам.
+
+- Вы должны быть полностью уверены, что для сайта `mysite.example` всегда выполняется разрешение в локальный адрес. В противном случае возможна утечка учетных данных рабочей среды.
+- Используя эту хитрость, вы не сможете выполнять отладку в разных браузерах 🙀.
+
+*Выражаю огромную благодарность за вклад и отзывы всем рецензентам и участникам, особенно Райану Сливи (Ryan Sleevi), Филиппо Валсорде (Filippo Valsorda), Милице Михайлии (Milica Mihajlija) и Роуэну Меревуду (Rowan Merewood). 🙌*
+
+*Фоновое изображение Hero от пользователя [@anandu](https://unsplash.com/@anandu) с [Unsplash](https://unsplash.com/photos/pbxwxwfI0B4), отредактированное.*
diff --git a/src/site/content/ru/blog/iframe-lazy-loading/index.md b/src/site/content/ru/blog/iframe-lazy-loading/index.md
new file mode 100644
index 00000000000..f30c9ab14cf
--- /dev/null
+++ b/src/site/content/ru/blog/iframe-lazy-loading/index.md
@@ -0,0 +1,226 @@
+---
+layout: post
+title: Пришло время отложенной загрузки фреймов вне экрана!
+subhead: Встроенная отложенная загрузка для окон iframe на уровне браузера
+authors:
+  - addyosmani
+date: 2020-07-24
+updated: 2022-08-15
+hero: image/admin/dMCW2Qqi5Qp2DB3w4DyE.png
+alt: Схематическое изображение телефона, на котором идет загрузка рисунка и ресурсов
+description: В этой статье рассказывается об атрибуте loading и о том, как его можно использовать, чтобы управлять загрузкой фреймов.
+tags:
+  - blog
+  - performance
+  - memory
+feedback:
+  - api
+---
+
+[Унифицированная отложенная загрузка изображений](/browser-level-image-lazy-loading/) появилась в Chrome 76 благодаря атрибуту `loading`, а затем была реализована и в Firefox. Мы рады сообщить, что **отложенная загрузка iframe на уровне браузера** теперь [унифицирована](https://github.com/whatwg/html/pull/5579) и поддерживается в Chrome и браузерах на основе Chromium.
+
+```html/1
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+```
+
+Реализованный функционал откладывает загрузку внеэкранных iframe до тех пор, пока пользователь не прокрутит страницу до них. Это экономит данные, ускоряет загрузку других частей страницы и снижает использование памяти.
+
+В этой [демонстрации](https://lazy-load.netlify.app/iframes/) `<iframe loading=lazy>` показана отложенная загрузка встраиваемых видео:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+### Зачем нужно использовать отложенную загрузку окон iframe?
+
+Сторонние встраивания охватывают широкий спектр вариантов использования: от видеоплееров до сообщений в социальных сетях и рекламы. Часто это содержимое не сразу видно в окне просмотра пользователя. Скорее, оно отображается, лишь когда пользователи прокручивают страницу дальше. Несмотря на это, пользователи теряют время на загрузку данных и дорогостоящее выполнение JavaScript для каждого фрейма, даже если прокрутка до него не доходит.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqZMRuULxbz6DVXNP8ea.png", alt="Экономия данных за счет использования отложенной загрузки iframe. В этом примере при активной загрузке скачивается 3 МБ, в то время как при отложенной загрузке не скачивается ничего, пока пользователь не переместится ближе к iframe.", width="800", height="460" %}</figure>
+
+Согласно проведенному Chrome исследованию [автоматической отложенной загрузки закадровых iframe для пользователей Data Saver](https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html), отложенная загрузка фреймов может привести к экономии 2-3% данных в срединном значении, сокращению [First Contentful Paint](/fcp/) на 1-2% по медиане и улучшению [First Input Delay](/fid/) (FID) на 2% в 95-м процентиле.
+
+### Как работает встроенная отложенная загрузка для iframe?
+
+Атрибут `loading` позволяет браузеру отложить загрузку окон iframe и изображений за пределами экрана до тех пор, пока пользователи не прокрутят экран до них. `loading` поддерживает два значения:
+
+- `lazy`: подходящее значение для отложенной загрузки.
+- `eager`: неподходящее значение для отложенной загрузки. Загрузка выполняется сразу.
+
+Использование атрибута `loading` в окнах iframe работает следующим образом:
+
+```html
+<!-- Отложенная загрузка iframe -->
+<iframe src="https://example.com"
+        loading="lazy"
+        width="600"
+        height="400"></iframe>
+
+<!-- Немедленная загрузка iframe -->
+<iframe src="https://example.com"
+        width="600"
+        height="400"></iframe>
+
+<!-- или использование loading="eager", чтобы избежать автоматической отложенной загрузки в Lite-режиме -->
+<iframe src="https://example.com"
+        loading="eager"
+        width="600"
+        height="400"></iframe>
+```
+
+Если вовсе не указывать атрибут, эффект будет аналогичным явной немедленной загрузке ресурса, за исключением [пользователей облегченного режима](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html), где Chrome будет использовать значение `auto`, чтобы решить, следует ли выполнять отложенную загрузку.
+
+Если вам нужно *динамически* создавать фреймы с помощью JavaScript, также [поддерживается](https://bugs.chromium.org/p/chromium/issues/detail?id=993273) `iframe.loading = 'lazy'` для элемента:
+
+```js/2
+var iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.loading = 'lazy';
+document.body.appendChild(iframe);
+```
+
+#### Отложенная загрузка в зависимости от iframe
+
+Атрибут loading работает для встроенных фреймов иначе, чем для изображений, так как в учет берется то, является ли iframe скрытым. (Скрытые iframe часто используются для аналитических или коммуникационных целей.) Chrome использует следующие критерии для определения того, является ли iframe скрытым:
+
+- Ширина и высота iframe не более `4px`.
+- Применяются `display: none` или `visibility: hidden`.
+- iframe помещается за пределы экрана с использованием отрицательного позиционирования по оси X или Y.
+- Этот критерий применяется как к `loading=lazy`, так и к `loading=auto`.
+
+Если iframe соответствует любому из этих условий, Chrome считает его скрытым и в большинстве случаев не загружает его в отложенном режиме. Не скрытые окна iframe загружаются только тогда, когда они находятся в пределах [порогового расстояния для загрузки](/browser-level-image-lazy-loading/#load-in-distance-threshold). Для встроенных фреймов, которые всё еще загружаются в режиме отложенной загрузки, отображается плейсхолдер.
+
+### Какой эффект можно наблюдать при отложенной загрузке популярных встраиваемых iframe?
+
+Что, если бы мы могли изменить Интернет в целом так, чтобы по умолчанию использовалась отложенная загрузка фреймов за пределами экрана? Это выглядело бы примерно так:
+
+Отложенная загрузка встроенных видео YouTube (экономия ≈500 КБ при начальной загрузке страницы):
+
+```html/1
+<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
+        loading="lazy"
+        width="560"
+        height="315"
+        frameborder="0"
+        allow="accelerometer; autoplay;
+        encrypted-media; gyroscope;
+        picture-in-picture"
+        allowfullscreen></iframe>
+```
+
+**Случай из практики:** перейдя на отложенную загрузку встраиваемых файлов YouTube для Chrome.com, мы сэкономили 10 секунд для установления интерактивности наших страницы на мобильных устройствах. Я открыл внутренний дефект, чтобы обсудить с YouTube добавление `loading=lazy` в его код для встраивания.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HQkwBgEoyiZsiOaPyz8v.png", alt="Chrome.com добился сокращения TTI на 10 секунд за счет отложенной загрузки фреймов за пределами экрана для встроенного видео YouTube", width="800", height="460" %}</figure>
+
+{% Aside %} Если вы ищете более эффективные способы загрузить вставки YouTube, вас может заинтересовать [компонент YouTube lite](https://github.com/paulirish/lite-youtube-embed). {% endAside %}
+
+**Отложенная загрузка вставок Instagram (экономия &gt;100 КБ в сжатом виде при начальной загрузке):**
+
+Вставки Instagram содержат блок разметки и скрипт, который вставляет iframe на вашу страницу. Отложенная загрузка этого iframe позволяет избежать загрузки всего скрипта, необходимого для встраивания. Учитывая, что такие вставки отображаются под окном просмотра в большинстве статей, такой подход выглядит разумным для отложенной загрузки их iframe.
+
+**Отложенная загрузка вставок Spotify (экономия 514 КБ при начальной загрузке):**
+
+```html
+<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
+        loading="lazy"
+        width="300"
+        height="380"
+        frameborder="0"
+        allowtransparency="true"
+        allow="encrypted-media"></iframe>
+```
+
+Приведенные выше вставки иллюстрируют потенциальные преимущества отложенной загрузки iframe для медиаконтента, однако есть вероятность, что эти преимущества будут справедливы и для рекламы.
+
+### Пример использования: отложенная загрузка социальных плагинов Facebook
+
+*Социальные плагины* Facebook позволяют разработчикам встраивать контент Facebook на свои веб-страницы. Предлагается ряд таких подключаемых модулей, например, встроенные публикации, фотографии, видео, комментарии… Самым популярным является [подключаемый модуль «Нравится»](https://developers.facebook.com/docs/plugins/like-button/) — кнопка, которая показывает количество тех, кому понравилась страница. По умолчанию встраивание плагина «Нравится» на веб-страницу (с использованием FB JSSDK) требует ≈215 КБ ресурсов, из которых 197 КБ составляет JavaScript. Во многих случаях плагин может появляться в конце статьи или ближе к концу страницы, поэтому его активная загрузка за пределами экрана может быть нерациональной.
+
+<figure>{% Img src="image/admin/fdy8o61jxPN560IkF2Ne.png", alt="Кнопка «Нравится» на Facebook", width="800", height="71" %}</figure>
+
+Благодаря инженеру Стояну Стефанову [все социальные плагины Facebook](https://developers.facebook.com/docs/plugins/like-button#settings) теперь поддерживают унифицированную отложенную загрузку iframe. Разработчики, которые выбрали отложенную загрузку с помощью конфигурации плагина `data-lazy`, теперь смогут отложить загрузку контента до тех пор, пока пользователь не прокрутит страницу до нужного места. Это обеспечивает полный функционал встроенных элементов для пользователей, которым они нужны, и экономит данные для тех, кто не прокручивает страницу до конца. Мы надеемся, что это лишь первая из многих вставок, при эксплуатации которых будет применяться унифицированная отложенная загрузка iframe.
+
+### Могу ли я выполнять отложенную загрузку окон iframe кроссбраузерно? Да
+
+Отложенная загрузка iframe может применяться как прогрессивное усовершенствование. Браузеры, которые поддерживают `loading=lazy` для iframe, будут откладывать загрузку iframe, при этом атрибут `loading` будет просто игнорироваться в браузерах, которые его еще не поддерживают.
+
+Также можно отложить загрузку фреймов вне экрана с помощью библиотеки JavaScript [lazysizes](/use-lazysizes-to-lazyload-images/). Это может понадобиться, если вам:
+
+- требуется большее число настраиваемых порогов отложенной загрузки, чем то, что в настоящее время предлагает унифицированная отложенная загрузка
+- нужно обеспечить пользователям единообразную отложенную загрузку iframe во всех браузерах.
+
+```html/3
+<script src="lazysizes.min.js" async></script>
+
+<iframe frameborder="0"
+	  class="lazyload"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+```
+
+Используйте следующий шаблон, чтобы обнаруживать функцию отложенной загрузки и получать lazysizes, когда она недоступна:
+
+```html/2
+<iframe frameborder="0"
+	  class="lazyload"
+    loading="lazy"
+    allowfullscreen=""
+    width="600"
+    height="400"
+    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
+</iframe>
+
+<script>
+  if ('loading' in HTMLIFrameElement.prototype) {
+    const iframes = document.querySelectorAll('iframe[loading="lazy"]');
+
+    iframes.forEach(iframe => {
+      iframe.src = iframe.dataset.src;
+    });
+
+  } else {
+    // Динамический импорт библиотеки LazySizes
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+
+</script>
+```
+
+### Вариант для пользователей WordPress {: #wordpress }
+
+У вас может быть масса фреймов, разбросанных по куче публикаций за разные годы на сайте WordPress. При желании вы можете добавить следующий код в файл `functions.php` своей WordPress-темы, чтобы автоматически вставлять `loading="lazy"` в существующие фреймы без необходимости вручную обновлять каждый из них по отдельности.
+
+Обратите внимание, что [для ядра WordPress также ведутся работы над поддержкой отложенной загрузки iframe на уровне браузера](https://core.trac.wordpress.org/ticket/50756). Следующий фрагмент кода проверит наличие соответствующих флагов, чтобы после того, как WordPress получит встроенную функциональность, он перестал вручную добавлять атрибут `loading="lazy"`. Так будет гарантирована совместимость с этими изменениями и атрибут не будет дублироваться.
+
+```php
+// СДЕЛАТЬ: Удалить, когда появится https://core.trac.wordpress.org/ticket/50756.
+function wp_lazy_load_iframes_polyfill( $content ) {
+	// Если ядро WP загружает iframe отложенно, эту ручную реализацию нужно пропустить.
+	if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
+		return $content;
+	}
+
+	return str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
+}
+add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );
+```
+
+Если ваш сайт WordPress использует кеширование (подсказка: он должен), не забудьте впоследствии перестроить кеш вашего сайта.
+
+### Заключение
+
+Наличие унифицированной поддержки отложенной загрузки iframe значительно упрощает повышение производительности ваших веб-страниц. Если у вас есть какие-либо отзывы, отправьте сообщение в [Chromium Bug Tracker](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad).
+
+И, если вы вдруг пропустили, ознакомьтесь с [коллекцией отложенной загрузки изображений и видео](/fast/#lazy-load-images-and-video) web.dev, чтобы получить больше идей для отложенной загрузки.
+
+*Выражаем благодарность Доминику Фаролино, Скотту Литтлу, Хуссейну Джирде, Саймону Питерсу, Кэйси Баскесу, Джо Медли и Стояну Стефанову за их рецензии.*
diff --git a/src/site/content/ru/blog/javascript-this/index.md b/src/site/content/ru/blog/javascript-this/index.md
new file mode 100644
index 00000000000..cd1e76d3efb
--- /dev/null
+++ b/src/site/content/ru/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: Что означает «this» в JavaScript
+subhead: Рассказываем, как разобраться, что в JavaScript значит `this`…
+description: Рассказываем, как разобраться, что в JavaScript значит `this`…
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+Объект `this` в JavaScript — предмет многих шуток, поскольку разобраться с ним не так просто. Однако я видел, как разработчики прибегали к гораздо более сложным и специфичным для предметной области решениям — только чтобы не использовать `this`. Если вам тоже не всегда понятно, что означает `this`, надеюсь, моя статья прояснит этот вопрос. Будем считать, это мое руководство по `this`.
+
+Начнем с самой конкретной ситуации и постепенно перейдем к менее конкретным. Структура статьи напоминает `if (…) … else if () … else if (…) …`, так что можете переходить к первому разделу, который соответствует нужному вам коду.
+
+1. [Если функция определена как стрелочная функция](#arrow-functions).
+2. [Иначе: если функция или класс вызываются с помощью `new`](#new).
+3. [Иначе: если у функции есть «привязанное» значение `this`](#bound).
+4. [Иначе: если объект `this` задан во время вызова](#call-apply).
+5. [Иначе: если функция вызывается через родительский объект (`parent.func()`)](#object-member).
+6. [Иначе: если область действия функции или родительского объекта находятся в строгом режиме](#strict).
+7. [Иначе](#otherwise).
+
+## Если функция определена как стрелочная функция {: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+В этом случае значение `this` *всегда* такое же, как у `this` в области действия родительского элемента:
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Всегда выводит `true`:
+  console.log(this === outerThis);
+};
+```
+
+Стрелочные функции хороши тем, что внутреннее значение `this` не изменяется: оно *всегда* такое же, как у внешнего `this`.
+
+### Другие примеры
+
+В случае стрелочных функций значение `this` *нельзя* изменить с помощью [`bind`](#bound):
+
+```js
+// Выводит `true`: значение `this` привязки игнорируется:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+В случае стрелочных функций значение `this` *нельзя* изменить с помощью [`call` или `apply`](#call-apply):
+
+```js
+// Выводит `true`: вызванное значение `this` игнорируется:
+arrowFunction.call({foo: 'bar'});
+// Выводит `true`: примененное значение `this` игнорируется:
+arrowFunction.apply({foo: 'bar'});
+```
+
+В случае стрелочных функций значение `this` *нельзя* изменить с помощью вызова функции как элемента другого объекта:
+
+```js
+const obj = {arrowFunction};
+// Выводит `true`: родительский объект игнорируется:
+obj.arrowFunction();
+```
+
+В случае стрелочных функций значение `this` *нельзя* изменить с помощью вызова функции как конструктора:
+
+```js
+// TypeError: arrowFunction не является конструктором (TypeError: arrowFunction is not a constructor)
+new arrowFunction();
+```
+
+### «Привязанные» методы экземпляра
+
+Если нужно, чтобы объект `this` всегда ссылался на экземпляр класса, лучше всего использовать стрелочные функции и [поля класса](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields):
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Всегда экземпляр класса Whatever:
+    console.log(this);
+  };
+}
+```
+
+Такой подход удобен при использовании методов экземпляра в качестве прослушивателей событий в компонентах (например, в компонентах React или веб-компонентах).
+
+Может показаться, что описанное выше нарушает правило «значение `this` всегда такое же, как у `this` в области действия родительского элемента», однако если представить поля класса как синтаксический сахар для подготовки значений в конструкторе, всё становится понятно:
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Всегда выводит `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …примерно соответствует следующему:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Всегда выводит `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+Среди альтернативных вариантов — привязка существующей функции в конструкторе и назначение функции в конструкторе. Если по какой-то причине использовать поля класса нельзя, удобной альтернативой будет назначение функции в конструкторе:
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## Иначе: если функция или класс вызываются с помощью `new` {: #new }
+
+```js
+new Whatever();
+```
+
+В коде выше мы вызываем `Whatever` (или функцию-конструктор, если это класс). В этом случае значение `this` будет равно результату `Object.create(Whatever.prototype)`.
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Выводит `true`:
+new MyClass();
+```
+
+Это же верно и для конструкторов в старом стиле:
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Выводит `true`:
+new MyClass();
+```
+
+### Другие примеры
+
+При вызове через `new` значение `this` *нельзя* изменить с помощью [`bind`](#bound):
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Выводит `true`: значение `this` привязки игнорируется:
+new BoundMyClass();
+```
+
+При вызове через `new` значение `this` *нельзя* изменить с помощью вызова функции как элемента другого объекта:
+
+```js
+const obj = {MyClass};
+// Выводит `true`: родительский объект игнорируется:
+new obj.MyClass();
+```
+
+## Иначе: если у функции есть «привязанное» значение `this` {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+При каждом вызове `boundFunction` значением ее `this` будет объект, переданный в `bind` (`boundObject`).
+
+```js
+// Выводит `false`:
+console.log(someFunction() === boundObject);
+// Выводит `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %} Не стоит с помощью `bind` привязывать функцию к ее внешнему `this` — используйте [стрелочные функции](#arrow-functions): в этом случае значение `this` будет понятно из объявления функции, и не нужно будет смотреть, что же происходит в коде дальше.
+
+Не задавайте с помощью `bind` объекту `this` значение, не связанное с родительским объектом: обычно такое поведение не ожидается. Плохая репутация у `this` именно из-за использования таких решений. Передайте нужное значение в качестве аргумента: это более явное поведение, и оно совместимо со стрелочными функциями. {% endAside %}
+
+### Другие примеры
+
+При вызове привязанной функции значение `this` *нельзя* изменить с помощью [`call` или `apply`](#call-apply):
+
+```js
+// Выводит `true`: вызванное значение `this` игнорируется:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Выводит `true`: примененное значение `this` игнорируется:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+При вызове привязанной функции значение `this` *нельзя* изменить с помощью вызова функции как элемента другого объекта:
+
+```js
+const obj = {boundFunction};
+// Выводит `true`: родительский объект игнорируется:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## Иначе: если объект `this` задан во время вызова {: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Выводит `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Выводит `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+Значение `this` — это объект, переданный в `call` или `apply`.
+
+{% Aside 'warning' %} Не задавайте с помощью `call` или `apply` объекту `this` значение, не связанное с родительским объектом: обычно такое поведение не ожидается. Плохая репутация у `this` именно из-за использования таких решений. Передайте нужное значение в качестве аргумента: это более явное поведение, и оно совместимо со стрелочными функциями. {% endAside %}
+
+К сожалению, иногда другое значение `this` может устанавливаться, например, прослушивателями событий DOM, в результате чего при использовании такого <code>this</code> код становится тяжелым для понимания.
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Выводит `element`, поскольку спецификация DOM устанавливает для `this` значение,
+  // равное элементу, к которому прикреплен обработчик.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+В случаях вроде описанного выше я стараюсь избегать `this` и использую такой подход:
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Лучше всего — получить из родительской области действия:
+  console.log(element);
+  // Если это невозможно — из объекта события:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## Иначе: если функция вызывается через родительский объект (`parent.func()`) {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Выводит `true`:
+console.log(obj.someMethod() === obj);
+```
+
+В этом случае функция вызывается как элемент `obj`, поэтому значение `this` будет `obj`. Это происходит во время вызова, поэтому если функция вызывается без родительского объекта или с другим родительским объектом, связь разрывается:
+
+```js
+const {someMethod} = obj;
+// Выводит `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Выводит `false`:
+console.log(anotherObj.someMethod() === obj);
+// Выводит `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+Значение `someMethod() === obj` — `false`, потому что <code>someMethod</code> <em>не вызывается</em> как элемент <code>obj</code>. На такое можно наткнуться, если попытаться сделать что-то вроде такого:
+
+```js
+const $ = document.querySelector;
+// TypeError: запрещенный вызов (TypeError: Illegal invocation)
+const el = $('.some-element');
+```
+
+Такое не срабатывает, потому что реализация `querySelector` обращается к значению собственного `this` и ожидает, что это будет что-то вроде узла DOM, а код выше разрывает эту связь. Правильный способ добиться желаемого:
+
+```js
+const $ = document.querySelector.bind(document);
+// Или:
+const $ = (...args) => document.querySelector(...args);
+```
+
+Интересный факт: не все API используют `this` во внутренних структурах. Консольные методы (например, `console.log`), были изменены таким образом, чтобы избегать ссылок на `this`, поэтому привязка `log` к `console` необязательна.
+
+{% Aside 'warning' %} Не переносите функцию на объект только для того, чтобы задать для `this` значение, не связанное с родительским объектом: обычно такое поведение не ожидается. Плохая репутация у `this` именно из-за использования таких решений. Передайте нужное значение в качестве аргумента: это более явное поведение, и оно совместимо со со стрелочными функциями. {% endAside %}
+
+## Иначе: если область действия функции или родительского объекта находятся в строгом режиме {: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Выводит `true`:
+console.log(someFunction() === undefined);
+```
+
+В этом случае значение `this` не определено. Выражение `'use strict'` в функции не требуется, если родительская область действия находится в [строгом режиме](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode) (и все модули — тоже).
+
+{% Aside 'warning' %} Не стоит полагаться на этот способ — в смысле, получить значение `undefined` можно намного проще 😀. {% endAside %}
+
+## Иначе {: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Выводит `true`:
+console.log(someFunction() === globalThis);
+```
+
+В этом случае значение `this` такое же, как у `globalThis`.
+
+{% Aside %} Большинство (включая меня) называют `globalThis` глобальным объектом, но, технически говоря, это не всегда так. Подробнее смотрите у [Матиаса Байненса](https://mathiasbynens.be/notes/globalthis#terminology) (он также объясняет, почему именно `globalThis`, а не просто `global`). {% endAside %}
+
+{% Aside 'warning' %} Не стоит с помощью `this` ссылаться на глобальный объект (я же предупреждал, что я его так называю) — лучше используйте [`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis): так намного более очевидно и понятно. {% endAside %}
+
+## Уф!
+
+Ну вот! Это всё, что я знаю об объекте `this`. Есть вопросы? Я что-то пропустил? Смело [пишите мне в Twitter](https://twitter.com/jaffathecake).
+
+Огромное спасибо [Матиасу Байненсу](https://twitter.com/mathias), [Ингвару Степаняну](https://twitter.com/RReverser) и [Томасу Штейнеру](https://twitter.com/tomayac) за проверку статьи.
diff --git a/src/site/content/ru/blog/long-tasks-devtools/index.md b/src/site/content/ru/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..6969da367b3
--- /dev/null
+++ b/src/site/content/ru/blog/long-tasks-devtools/index.md
@@ -0,0 +1,57 @@
+---
+title: Как длительные задачи JavaScript повышают время Time to Interactive
+subhead: Как обнаружить ресурсоемкие задачи, которые блокируют реакцию на действия пользователя
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: Песочные часы, внутри которых пересыпается песок
+description: |2-
+
+  Длительные задачи могут занимать основной поток, задерживая взаимодействие с пользователем. Инструменты Chrome DevTools теперь могут визуализировать длительные задачи, что упрощает поиск целей для оптимизации.
+tags:
+  - blog
+  - performance
+---
+
+**Резюме. Длительные задачи могут занимать основной поток, задерживая взаимодействие с пользователем. Инструменты Chrome DevTools теперь могут визуализировать длительные задачи, что упрощает поиск целей для оптимизации.**
+
+Если вы используете Lighthouse для аудита страниц, возможно, вы уже знакомы с метрикой [Время загрузки для взаимодействия](/tti/) (Time to Interactive, TTI), которая показывает, как скоро пользователи могут начинать взаимодействовать со страницей и получать реакцию. Но знаете ли вы, что длительные задачи (JavaScript) могут серьезно ухудшить TTI?
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Время загрузки для взаимодействия (Time to Interactive) в отчете Lighthouse", width="800", height="169" %}
+
+## Что такое длительные задачи?
+
+[Длительной задачей](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API) называется код на JavaScript, который монополизирует основной поток на продолжительное время, вызывая «зависание» интерфейса.
+
+Во время загрузки страницы длительные задачи могут занять основной поток и сделать страницу невосприимчивой к действиям пользователя, даже если она выглядит готовой к работе: элементы страницы не реагируют на нажатия, потому что прослушиватели событий, обработчики нажатий и т. д. еще не подключены.
+
+Ресурсоемкие длительные задачи — результат сложных действий, занимающих более 50 мс. Почему именно 50 мс? [Модель RAIL](/rail/) рекомендует обрабатывать ввод данных пользователем в течение [50 мс](/rail/#response-process-events-in-under-50ms), чтобы обеспечить скорость визуальной реакции в рамках 100 мс. Если нарушить это правило, связь между действием и реакцией будет разорвана.
+
+## Как понять, есть ли на странице длительные задачи, замедляющие реакцию
+
+До сих пор, чтобы выяснить, какие задачи задерживают реакцию на действия пользователя, приходилось вручную искать в [Chrome DevTools](https://developer.chrome.com/docs/devtools/) «длинные желтые блоки» скриптов длительностью более 50 мс или использовать [Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/), что не очень удобно.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="Скриншот панели «Производительность» (Performance) в DevTools: показана разница между короткими и длительными задачами", width="800", height="450" %}
+
+Теперь [DevTools визуализирует длительные задачи](https://developers.google.com/web/updates/2019/03/devtools#longtasks), что упрощает аудит производительности. Если задача (показаны серым цветом) является длительной, она получает красный флажок.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="Панель «Производительность» (Performance) в DevTools: длительные задачи отображаются в виде серых полос с красным флажком", width="800", height="450" %}
+
+- На [панели «Производительность»](https://developer.chrome.com/docs/devtools/evaluate-performance/) (Performance) запишите трассировку для загрузки веб-страницы.
+- Поищите красные флажки в области основного потока. Задачи показаны серым и помечены как «Задача» (Task).
+- Наведя указатель мыши на полосу, вы увидите, сколько выполнялась задача и считается ли она «длительной».
+
+## Как определить источник длительных задач
+
+Чтобы узнать источник длительной задачи, выберите серую полоску **Задача** (Task). В выдвигающейся панели внизу выберите **Снизу вверх** (Bottom-Up) и вариант **Группировка по действию** (Group by Activity). Вы увидите, какие действия внесли больший (в целом) вклад во время выполнения задачи. В примере ниже это ресурсоемкий набор DOM-запросов.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="Выбрав длительную задачу (помечена как «Задача» (Task)) в DevTools, можно посмотреть, какие действия в ней выполнялись", width="800", height="450" %}
+
+## Стандартные способы оптимизации длительных задач
+
+Часто основной источник длительных задач — большие скрипты. Попробуйте их [разделить](/reduce-javascript-payloads-with-code-splitting). Также следите за сторонними скриптами: их длительные задачи могут задерживать переход основного контента в интерактивное состояние.
+
+Разбивайте всё на небольшие фрагменты (которые выполняются быстрее 50 мс) и выполняйте их в нужном месте и в нужное время — пусть даже вне основного потока, в воркере. Хороший материал по этой теме — [Ждать, пока не понадобится](https://philipwalton.com/articles/idle-until-urgent/) (Idle Until Urgent) Фила Уолтона.
+
+Веб-страницы должны быстро откликаться на действия пользователя. Сведите к минимуму длительные задачи, и пользоваться вашим сайтом станет намного приятнее. Подробнее о длительных задачах см. в статье [Метрики производительности, ориентированные на пользователя](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks).
diff --git a/src/site/content/ru/blog/maskable-icon/index.md b/src/site/content/ru/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..f63de11c100
--- /dev/null
+++ b/src/site/content/ru/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: Поддержка адаптивных иконок в PWA благодаря маскируемым иконкам
+subhead: Новый формат для использования адаптивных иконок на платформах, где есть их поддержка.
+description: Маскируемые иконки — это новый формат, который обеспечивает большую степень контроля, позволяя вашему прогрессивному веб-приложению использовать адаптивные иконки. С маскируемой иконкой ваше приложение будет замечательно смотреться на любых Android-устройствах.
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: Иконки внутри белых кругов в сравнении с иконками, покрывающими весь круг
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## Что такое маскируемые иконки? {: #what }
+
+Установив прогрессивное веб-приложение на свежую модель Android, вы сможете заметить, что его иконка отображается на белом фоне. В Android Oreo были представлены адаптивные иконки приложений, принимающие различные формы на разных моделях устройств. Иконки, не соответствующие этому новому формату, имеют белый фон.
+
+<figure>{% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="Иконки PWA в белых кругах на Android", width="400", height="100" %} <figcaption>Прозрачные иконки PWA отображаются на Android внутри белых кругов</figcaption></figure>
+
+Маскируемые иконки — это новый формат, который обеспечивает большую степень контроля, позволяя вашему прогрессивному веб-приложению использовать адаптивные иконки. Добавленная маскируемая иконка сможет заполнить форму целиком, благодаря чему ваше приложение будет замечательно смотреться на любых Android-устройствах. Firefox и Chrome недавно добавили поддержку этого нового формата, и вы можете использовать его в своих приложениях.
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="Иконки PWA, покрывающие весь круг на Android", width="400", height="100" %} <figcaption>Маскируемые иконки покрывают круг целиком</figcaption></figure>
+
+## Подходят ли мои нынешние иконки?
+
+Поскольку маскируемые иконки рассчитаны на поддержку различных форм, вам нужно предоставить непрозрачное изображение с некоторым отступом, которое браузер сможет позже обрезать до нужной формы и размера. Лучше не полагаться на какую-то конкретную форму, поскольку окончательный вариант может различаться в зависимости от браузера и платформы.
+
+<figure data-float="right">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"], autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Различные формы иконок в зависимости от платформ </figcaption></figure>
+
+К счастью, существует четко определенная и [стандартизированная](https://w3c.github.io/manifest/#icon-masks) «минимальная безопасная зона», соблюдаемая всеми платформами. Важные части вашей иконки, такие как логотип, должны находиться в пределах окружности в центре иконки с радиусом, равным 40% ее ширины. 10% внешнего края можно обрезать.
+
+Вы можете проверить, какие части ваших иконок попадают в безопасную зону, с помощью Chrome DevTools. Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель «**Приложение**». В разделе «**Иконки**» вы можете выбрать «**Показывать только минимальную безопасную область для маскируемых иконок**». Ваши иконки будут обрезаны так, чтобы была видна только безопасная область. Если ваш логотип виден в этой безопасной зоне, все готово.
+
+<figure>{% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="Панель приложений в DevTools, отображающая иконки PWA с обрезанными краями", width="762", height="423" %} <figcaption>Панель приложений</figcaption></figure>
+
+Чтобы протестировать маскируемую иконку на различными формах Android, используйте созданный мной инструмент [Maskable.app](https://maskable.app/). Откройте иконку, затем Maskable.app позволит вам опробовать различные формы и размеры, и вы сможете поделиться предварительным просмотром с другими членами своей команды.
+
+## Как начать пользоваться маскируемыми иконками?
+
+Если вы хотите создать маскируемую иконку на основе существующей иконки, вы можете использовать [редактор Maskable.app](https://maskable.app/editor). Загрузите свою иконку, настройте цвет и размер, затем экспортируйте изображение.
+
+<figure>{% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Снимок экрана редактора Maskable.app", width="670", height="569" %} <figcaption>Создание иконок в редакторе Maskable.app</figcaption></figure>
+
+После того, как вы создали маскируемое изображение иконки и протестировали его в DevTools, необходимо обновить [манифест веб-приложения](/add-manifest/), чтобы он указывал на новые ресурсы. Манифест веб-приложения предоставляет информацию о вашем веб-приложении в файле JSON и включает [массив `icons`](/add-manifest/#icons).
+
+С включением маскируемых иконок было добавлено новое значение свойства для ресурсов изображений, перечисленных в манифесте веб-приложения. Поле `purpose` сообщает браузеру, как следует использовать вашу иконку. По умолчанию для иконок значение этого поля равно `"any"`. На Android такие иконки будут подогнаны под нужный размер и размещены поверх белого фона.
+
+Маскируемые значки должны использовать другое назначение: `"maskable"`. Это значение указывает, что изображение предназначено для использования с масками иконок, что позволяет вам регулировать результат. Таким образом, у ваших иконок не будет белого фона. Вы также можете указать несколько назначений, разделенных пробелами (например, `"any maskable"`), если хотите, чтобы маскируемая иконка использовалась без маски на других устройствах.
+
+{% Aside %} Хотя вы *можете* указать несколько назначений, разделенных пробелами, например `"any maskable"`, на практике так *делать не следует*. Использование `"maskable"`-иконок в качестве `"any"` неоптимально, поскольку иконка будет использоваться как есть, что приведет к избыточным отступам и уменьшению основного содержимого иконки. В идеале у иконок для назначения `"any"` должны быть прозрачные области и не должно быть лишних отступов, как у иконок сайта, поскольку браузер не будет проделывать для иконок эту работу. {% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- Новое значение свойства `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+Теперь вы можете приступить к делу и создать собственные маскируемые иконки, обеспечив своему приложению отличный вид по всем краям (и если уж на то пошло, по всей окружности или по всему овалу 😄).
+
+## Благодарности
+
+Статью рецензировал [Джо Медли](https://github.com/jpmedley).
diff --git a/src/site/content/ru/blog/monitor-total-page-memory-usage/index.md b/src/site/content/ru/blog/monitor-total-page-memory-usage/index.md
new file mode 100644
index 00000000000..c248b38f0f6
--- /dev/null
+++ b/src/site/content/ru/blog/monitor-total-page-memory-usage/index.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: Отслеживание общего использования памяти веб-страницей с помощью функции measureUserAgentSpecificMemory()
+subhead: Узнайте, как измерять использование памяти веб-страницей в рабочей среде, чтобы обнаруживать регрессии.
+description: Узнайте, как измерять использование памяти веб-страницей в рабочей среде, чтобы обнаруживать регрессии.
+updated: 2020-10-19
+date: 2020-04-13
+authors:
+  - ulan
+hero: image/admin/Ne2U4cUtHG6bJ0YeIkt5.jpg
+alt: Зеленый модуль ОЗУ. Фото Харрисона Бродбента (Harrison Broadbent) с Unsplash.
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113"
+tags:
+  - blog
+  - memory
+  - javascript
+feedback:
+  - api
+---
+
+{% Aside 'caution' %}
+
+**Обновления**
+
+**23 апреля 2021 г.**: обновлен статус, уточнена область применения API — добавлено примечание о внепроцессных элементах iframe.
+
+**20 января 2021 г.**: API `performance.measureMemory` переименован и теперь называется `performance.measureUserAgentSpecificMemory`. В Chrome 89 он по умолчанию доступен для [изолированных веб-страниц с разными источниками](/coop-coep). Кроме того, немного [изменился](https://github.com/WICG/performance-measure-memory/blob/master/ORIGIN_TRIAL.md#result-differences) формат результата по сравнению с версией Origin Trials. {% endAside %}
+
+Браузеры автоматически управляют памятью веб-страниц. Когда веб-страница создает какой-либо объект, браузер выделяет фрагмент памяти для хранения этого объекта. Так как память — ограниченный ресурс, браузер выполняет сборку мусора. Это позволяет определить, что тот или иной объект больше не нужен, и можно освободить занимаемый им фрагмент памяти. Тем не менее функция обнаружения работает неидеально, и [было доказано](https://en.wikipedia.org/wiki/Halting_problem), что идеальное обнаружение — невыполнимая задача. Поэтому браузеры аппроксимируют понятие «объект необходим» понятием «объект достижим». Если веб-странице не удается обратиться к объекту через его переменные и поля других достижимых объектов, браузер может безопасно «утилизировать» объект. Разница между этими двумя понятиями приводит к утечкам памяти, как показано в приведенном ниже примере.
+
+```javascript
+const object = {a: new Array(1000), b: new Array(2000)};
+setInterval(() => console.log(object.a), 1000);
+```
+
+Здесь больший массив `b` уже не нужен, но браузер не «утилизирует» его, так как он все еще доступен через свойство `object.b` в обратном вызове. Таким образом, возникает утечка памяти большего массива.
+
+Утечки памяти — [обычное дело в Интернете](https://docs.google.com/presentation/d/14uV5jrJ0aPs0Hd0Ehu3JPV8IBGc3U8gU6daLAqj6NrM/edit#slide=id.p). Утечку памяти легко создать. Для этого достаточно забыть отменить регистрацию прослушивателя событий, случайно записать объекты из элемента iframe, не закрыть рабочий процесс, накапливать объекты в массивах и т. д. Если у веб-страницы имеется утечка памяти, использование памяти этой веб-страницей со временем растет, и веб-страница кажется пользователю медленной и «раздутой».
+
+Первый шаг в решении этой проблемы — измерение. С помощью нового [API `performance.measureUserAgentSpecificMemory()`](https://github.com/WICG/performance-measure-memory) разработчики могут измерять использование памяти веб-страницами в рабочей среде и, соответственно, обнаруживать утечки памяти, не обнаруженные при тестировании в локальной среде.
+
+## Отличия `performance.measureUserAgentSpecificMemory()` от старого API `performance.memory` {: #legacy-api }
+
+Если вы знакомы с существующим нестандартным API `performance.memory`, вам, возможно, интересно, чем новый API отличается от него. Основное отличие состоит в том, что старый API возвращает размер кучи JavaScript, а новый оценивает объем памяти, используемый веб-страницей. Это различие важно, когда Chrome использует одну и ту же кучу для нескольких веб-страниц (или нескольких экземпляров одной и той же веб-страницы). В таких случаях результат старого API может быть случайным образом смещен. Так как старый API определяется терминами, зависящими от реализации, например «куча», попытки стандартизировать его обречены на провал.
+
+Еще одно отличие состоит в том, что новый API выполняет измерение памяти во время сборки мусора. Это уменьшает «шум» в результатах, но для получения результатов может потребоваться некоторое время. Обратите внимание, что разработчики других браузеров могут реализовать новый API, не используя сборку мусора.
+
+## Предлагаемые сценарии использования {: #use-cases }
+
+То, каким образом веб-страница использует память, зависит от временных параметров событий, действий пользователя и операций сборки мусора. Вот почему API измерения памяти предназначен для агрегирования данных об использовании памяти в рабочей среде. Результаты индивидуальных вызовов менее полезны. Ниже приведены возможные сценарии использования такого API.
+
+- Обнаружение регрессий во время развертывания новой версии веб-страницы, что позволяет обнаруживать новые утечки памяти.
+- A/B-тестирование новой функции для оценки ее влияния на память и обнаружения утечек памяти.
+- Корреляция использования памяти с продолжительностью сеанса для проверки наличия или отсутствия утечек памяти.
+- Корреляция использования памяти с пользовательскими метриками, что позволяет понять, какое общее влияние оказывает использование памяти.
+
+## Совместимость с браузерами {: #compatibility }
+
+В настоящее время этот API поддерживается только в Chrome 83 в виде версии Origin Trials. Результаты работы API сильно зависят от его реализации, так как в браузерах применяются разные способы представления объектов в памяти и разные способы оценки использования памяти. Браузеры могут не учитывать некоторые области памяти, если надлежащий учет обходится слишком дорого либо невозможен. Таким образом, нельзя сравнивать результаты, получаемые в разных браузерах. Имеет смысл сравнивать только результаты для одного и того же браузера.
+
+## Текущий статус {: #status }
+
+<div><table>
+    <thead>
+      <tr>
+        <th>Этап</th>
+        <th>Статус</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1. Создание эксплейнера</td>
+        <td><a href="https://github.com/WICG/performance-measure-memory">Выполнен</a></td>
+      </tr>
+      <tr>
+        <td>2. Создание первоначального проекта спецификации</td>
+        <td><a href="https://wicg.github.io/performance-measure-memory/">Выполнен</a></td>
+      </tr>
+      <tr>
+        <td>3. Сбор отзывов и доработка дизайна</td>
+        <td><a href="#feedback">Выполняется</a></td>
+      </tr>
+      <tr>
+        <td>4. Версия Origin Trials</td>
+        <td><a href="https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113">Выполнен</a></td>
+      </tr>
+      <tr>
+        <td>5. Запуск</td>
+        <td>Включено по умолчанию в Chrome 89</td>
+      </tr>
+    </tbody>
+</table></div>
+
+## Использование функции `performance.measureUserAgentSpecificMemory()` {: use }
+
+### Включение на странице about://flags
+
+Чтобы поэкспериментировать с функцией `performance.measureUserAgentSpecificMemory()` без токена Origin Trials, включите флаг `#experimental-web-platform-features` на странице `about://flags`.
+
+### Обнаружение функций
+
+Если среда выполнения не соответствует требованиям безопасности в части предотвращения утечки информации между источниками, работа функции `performance.measureUserAgentSpecificMemory()` может завершиться ошибкой [SecurityError](https://developer.mozilla.org/docs/Web/API/DOMException#exception-SecurityError). На этапе Origin Trials в Chrome для API требуется, чтобы была включена функция [Site Isolation](https://developers.google.com/web/updates/2018/07/site-isolation) (Изоляция сайтов). В окончательной версии API будет использоваться функция [изоляции между источниками](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated). Веб-страница может включить функцию изоляции между источниками, настроив [заголовки COOP и COEP](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit).
+
+```javascript
+if (performance.measureUserAgentSpecificMemory) {
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('Этот контекст небезопасен.');
+    } else {
+      throw error;
+    }
+  }
+  console.log(result);
+}
+```
+
+### Тестирование в локальной среде
+
+Chrome выполняет измерение памяти во время сборки мусора. Это означает, что API не сопоставляет обещание результата немедленно, а вместо этого ожидает следующей сборки мусора. API принудительно выполняет сборку мусора по истечении некоторого времени ожидания, которое на сегодняшний день равно 20 секундам. Запустив Chrome с флагом командной строки `--enable-blink-features='ForceEagerMeasureMemory'`, можно уменьшить время ожидания до нуля, что удобно при отладке и тестировании в локальной среде.
+
+## Пример
+
+Рекомендуемое использование этого API — создание глобального средства мониторинга памяти, которое делает выборки данных об использовании памяти всей веб-страницей и отправляет результаты на сервер для агрегирования и анализа. Самый простой способ — периодически (например, каждые `M` минут) делать выборку. Однако это приводит к появлению ошибок оценки, так как между выборками могут возникать пиковые показатели использования памяти. В приведенном ниже примере показано, как выполнять измерения памяти без ошибок с использованием [пуассоновского процесса](https://en.wikipedia.org/wiki/Poisson_point_process). Это гарантирует, что вероятность создания выборок будет одинакова для любых моментов времени ([демонстрация](https://performance-measure-memory.glitch.me/), [источник](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0)).
+
+Прежде всего определите функцию, которая планирует следующее измерение памяти, используя функцию `setTimeout()` со случайными интервалами. Функцию следует вызывать после загрузки страницы в главном окне.
+
+```javascript
+function scheduleMeasurement() {
+  if (!performance.measureUserAgentSpecificMemory) {
+    console.log(
+      'Функция performance.measureUserAgentSpecificMemory() недоступна.',
+    );
+    return;
+  }
+  const interval = measurementInterval();
+  console.log(
+    'Scheduling memory measurement in ' +
+      Math.round(interval / 1000) +
+      ' с.',
+  );
+  setTimeout(performMeasurement, interval);
+}
+
+// Запуск измерений после загрузки страницы в главном окне.
+window.onload = function () {
+  scheduleMeasurement();
+};
+```
+
+Функция `measurementInterval()` вычисляет случайный интервал в миллисекундах, так что в среднем одно измерение выполняется каждые пять минут. Математические принципы, лежащие в основе этой функции, изложены в разделе «[Экспоненциальное распределение](https://en.wikipedia.org/wiki/Exponential_distribution#Computational_methods)».
+
+```javascript
+function measurementInterval() {
+  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
+  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
+}
+```
+
+И, наконец, асинхронная функция `performMeasurement()` вызывает API, записывает результат и планирует следующее измерение.
+
+```javascript
+async function performMeasurement() {
+  // 1. Вызов функции performance.measureUserAgentSpecificMemory().
+  let result;
+  try {
+    result = await performance.measureUserAgentSpecificMemory();
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+      console.log('Этот контекст небезопасен.');
+      return;
+    }
+    // Повторное создание других ошибок.
+    throw error;
+  }
+  // 2. Запись результата.
+  console.log('Memory usage:', result);
+  // 3. Планирование следующего измерения.
+  scheduleMeasurement();
+}
+```
+
+Результат может выглядеть следующим образом:
+
+```javascript
+// Вывод в консоль:
+{
+  bytes: 60_000_000,
+  breakdown: [
+    {
+      bytes: 40_000_000,
+      attribution: [
+        {
+          url: "https://foo.com",
+          scope: "Window",
+        },
+      ]
+      types: ["JS"]
+    },
+    {
+      bytes: 0,
+      attribution: [],
+      types: []
+    },
+    {
+      bytes: 20_000_000,
+      attribution: [
+        {
+          url: "https://foo.com/iframe",
+          container: {
+            id: "iframe-id-attribute",
+            src: "redirect.html?target=iframe.html",
+          },
+        },
+      ],
+      types: ["JS"]
+    },
+  ]
+}
+```
+
+Для возврата значения оценки общего использования памяти используется поле `bytes`. Для значения количества байтов используется [синтаксис чисел с разделителями](https://v8.dev/features/numeric-separators). Это значение сильно зависит от реализации, и его нельзя сравнивать для разных браузеров. Оно может быть разным даже для различных версий одного и того же браузера. На этапе Origin Trials это значение включает показатель использования памяти JavaScript в главном окне, а также во всех элементах iframe **одного и того же сайта** и в связанных окнах. В окончательной версии API в этом значении будет учитываться память JavaScript и DOM для всех элементов iframe, связанных окон и рабочих веб-процессов в текущем процессе. Обратите внимание, что если включена функция [Site Isolation](https://www.chromium.org/Home/chromium-security/site-isolation) (Изоляция сайтов), API не измеряет память [внепроцессных элементов iframe](https://www.chromium.org/developers/design-documents/oop-iframes) между сайтами.
+
+В списке `breakdown` содержится дополнительная информация об используемой памяти. Каждая запись описывает определенную часть памяти и связывает ее с набором окон, элементов iframe и рабочих процессов, идентифицируемых с помощью URL-адресов. В поле `types` указаны типы памяти, зависящие от реализации и связанные с памятью.
+
+Важно обрабатывать все списки общим способом, а не жестко задавать допущения, основанные на конкретном браузере. Например, одни браузеры могут возвращать пустое поле `breakdown` или `attribution`. Другие браузеры могут возвращать несколько записей в поле `attribution`, тем самым сообщая, что им не удается определить, какой из этих записей принадлежит память.
+
+## Обратная связь {: #feedback }
+
+Группа [Web Performance Community Group](https://www.w3.org/community/webperfs/) и команда разработчиков Chrome будут рады, если вы поделитесь своими мыслями и расскажете об опыте использования функции `performance.measureUserAgentSpecificMemory()`.
+
+### Расскажите, что вы думаете о конструкции API
+
+Есть ли в API элементы, не работающие должным образом? Может в нем нет свойств, необходимых для реализации вашей идеи? Сообщите о проблеме, связанной с техническими характеристиками, в [репозитории performance.measureUserAgentSpecificMemory() на GitHub](https://github.com/WICG/performance-measure-memory/issues) или изложите свои мысли о какой-либо существующей проблеме.
+
+### Сообщите о проблеме, связанной с реализацией
+
+Нашли ошибку в реализации для Chrome? Или реализация отличается от спецификации? Сообщите об ошибке на сайте [new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EPerformanceAPIs). Обязательно укажите как можно больше сведений, предоставьте простые инструкции по воспроизведению ошибки и задайте для параметра **Components** значение `Blink>PerformanceAPIs`. Для быстрого и простого обмена инструкциями по воспроизведению ошибок отлично подходит ресурс [Glitch](https://glitch.com/).
+
+### Продемонстрируйте поддержку
+
+Планируете ли вы использовать функцию `performance.measureUserAgentSpecificMemory()`? Благодаря вашей публичной поддержке команда разработчиков Chrome сможет правильно расставлять приоритеты при работе над функциями и продемонстрирует другим поставщикам браузеров, насколько важна их поддержка. Отправьте твит в аккаунт [@ChromiumDev](https://twitter.com/chromiumdev) и сообщите нам, где и как вы используете эту функцию.
+
+## Полезные ссылки {: #helpful }
+
+- [Эксплейнер](https://github.com/WICG/performance-measure-memory)
+- [Демонстрация](https://performance-measure-memory.glitch.me/) | [Исходный код демонстрации](https://glitch.com/edit/#!/performance-measure-memory?path=script.js:1:0)
+- [Испытания по схеме Origin Trials](https://developers.chrome.com/origintrials/#/view_trial/1281274093986906113)
+- [Отслеживание ошибок](https://bugs.chromium.org/p/chromium/issues/detail?id=1049093)
+- [Запись на сайте ChromeStatus.com](https://www.chromestatus.com/feature/5685965186138112)
+
+## Благодарности
+
+Большое спасибо Доменику Деникола (Domenic Denicola), Йоаву Вайссу (Yoav Weiss) и Матиасу Биненсу (Mathias Bynens) за обзоры структуры API, а также Доминику Инфюру (Dominik Inführ), Ханнесу Пайеру (Hannes Payer), Кентаро Хара (Kentaro Hara) и Майклу Липпауцу (Michael Lippautz) за обзоры кода в Chrome. Я также благодарю Пера Паркера (Per Parker), Филиппа Вайса (Philipp Weis), Ольгу Беломестных, Мэтью Болохана (Matthew Bolohan) и Нила Маккея (Neil Mckay) за ценные отзывы пользователей, которые позволили значительно улучшить этот API.
+
+В качестве [главного изображения](https://unsplash.com/photos/5tLfQGURzHM) использовано фото [Харрисона Бродбента](https://unsplash.com/@harrisonbroadbent) (Harrison Broadbent) с [Unsplash](https://unsplash.com)
diff --git a/src/site/content/ru/blog/new-responsive/index.md b/src/site/content/ru/blog/new-responsive/index.md
new file mode 100644
index 00000000000..6ca6e5bf7e0
--- /dev/null
+++ b/src/site/content/ru/blog/new-responsive/index.md
@@ -0,0 +1,260 @@
+---
+layout: post
+title: 'Новая адаптивность: веб-дизайн в мире компонентов'
+subhead: Управление макетом на макро- и микроуровне в новую эпоху адаптивного веб-дизайна.
+authors:
+  - una
+description: Медиа-характеристики, основанные на предпочтениях пользователя, контейнерные запросы, а также медиа-запросы для новых видов экранов, таких как складные экраны, открывают новую эпоху адаптивного веб-дизайна.
+date: 2021-05-19
+updated: 2021-05-26
+hero: image/HodOHWjMnbNw56hvNASHWSgZyAf2/P5LtV5IubshVuDac8uKO.jpg
+tags:
+  - blog
+  - css
+  - layout
+---
+
+{% YouTube 'jUQ2-C5ZNRc' %}
+
+## Адаптивный дизайн на сегодняшний день
+
+Сегодня, говоря об адаптивном дизайне, мы чаще всего подразумеваем использование медиа-запросов для адаптации макета под экран телефона, планшета или ПК.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/3KENjI9FiNARctTiKDak.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+Но вскоре такое представление об адаптивном дизайне может стать таким же устаревшим, как, например, разметка страницы с использованием таблиц.
+
+Медиа-запросы на основе области просмотра — это мощный инструмент, но их бывает недостаточно. Они не позволяют учитывать потребности пользователей или внедрять адаптивные стили в сами компоненты.
+
+{% Aside %} В рамках данной статьи под «компонентами» подразумеваются элементы страниц, в том числе состоящие из других элементов: карточки, боковые панели и т. д. Именно из этих компонентов и строятся веб-страницы. {% endAside %}
+
+Для стилизации компонентов можно использовать информацию о глобальной области просмотра, но такие стили не являются самодостаточными и поэтому подходят только для дизайна на уровне всей страницы, а не на уровне отдельных компонентов.
+
+К счастью, экосистема довольно быстро меняется. Стандарт CSS развивается, и новая эпоха адаптивного дизайна уже на горизонте.
+
+Такие изменения случаются приблизительно раз в десять лет. Десять лет назад, примерно с 2010 по 2012, произошли серьезные изменения в области мобильного и адаптивного дизайна, а также появился стандарт CSS3.
+
+<figure>{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/IhVNwOMENjOT2eiIXuMg.png", alt="Хронология развития CSS-стилей", width="800", height="211" %} <figcaption> Источник: <a href="https://www.webdesignmuseum.org/web-design-history">Web Design Museum</a>. </figcaption></figure>
+
+И вот экосистема вновь готова к серьезным изменениям, затрагивающим стандарт CSS. Инженеры Chrome и других организаций, участвующих в развитии веб-платформы, работают над прототипами и спецификациями и закладывают реализацию стандартов, которые станут началом новой эпохи адаптивного дизайна.
+
+В число нововведений входят медиа-характеристики, основанные на предпочтениях пользователя, контейнерные запросы, а также медиа-запросы для новых видов экранов, таких как складные экраны.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/3yqBl9BQmGEVzDQU3Ivh.png", alt="Адаптация под пользователя, контейнер и форм-фактор", width="800", height="248" %}
+
+## Адаптация под потребности пользователя
+
+Новые медиа-характеристики, основанные на предпочтениях пользователя, позволяют стилизовать веб-страницы в соответствии с предпочтениями и потребностями конкретного пользователя. С их помощью можно адаптировать страницу для соответствия пользовательским ожиданиям.
+
+Вот список медиа-характеристик, основанных на предпочтениях пользователя:
+
+- `prefers-reduced-motion`
+- `prefers-contrast`
+- `prefers-reduced-transparency`
+- `prefers-color-scheme`
+- `inverted-colors`
+- …и другие.
+
+Характеристики, основанные на предпочтениях, позволяют учитывать настройки операционной системы пользователя, чтобы сделать взаимодействие со страницей более продуманным и персонализированным, особенно для людей с ограниченными возможностями.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/cGWnoAAwMTU7C3HOfYQl.png", alt="Настройки специальных возможностей в операционной системе", width="800", height="428" %}
+
+### `prefers-reduced-motion`
+
+Пользователи, которые включили в операционной системе [уменьшение движения](/prefers-reduced-motion/), хотят видеть при использовании компьютера меньше анимаций. Это значит, что при просмотре страницы их вряд ли обрадует движущаяся заставка, анимированный переворот карточек, вычурный загрузчик и другие бросающиеся в глаза анимации.
+
+С помощью `prefers-reduced-motion` можно создавать страницы с упрощенной анимацией, при этом также показывая расширенные анимации пользователям, у которых этот параметр выключен.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/r4z52PPvElemSUJwUCZp.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+У этой карточки две стороны с информацией. В базовой версии сайта, использующей упрощенную анимацию, при переключении между сторонами происходит плавный переход, тогда как в расширенной версии показывается анимация переворота карточки.
+
+Характеристика prefers-reduced-motion не подразумевает полное отсутствие движения, поскольку движение — это неотъемлемая часть представления информации в Интернете. Вместо этого следует обеспечить базовый уровень анимации, достаточный для восприятия контента пользователями с особыми потребностями или предпочтениями, и предоставить дополнительные анимации для остальных пользователей.
+
+### `prefers-color-scheme`
+
+Еще одна медиа-характеристика, основанная на предпочтениях, — это [`prefers-color-scheme`](/prefers-color-scheme). Она позволяет адаптировать интерфейс с учетом цветовой темы, которую выбрал пользователь. Операционные системы как на ПК, так и на мобильных устройствах позволяют выбрать светлую, темную или автоматическую (подстраивающуюся под время суток) тему оформления.
+
+Если для оформления страницы применяются [пользовательские CSS-свойства](https://developer.mozilla.org/docs/Web/CSS/--*), то подстановка цветовых значений — тривиальная задача. Параметры цветовой темы, такие как `backgroundColor` и `textOnPrimary`, можно с легкостью переписать, чтобы при помощи медиа-запроса динамически подстраивать их под текущую тему оформления.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/j6Ru11BsBzCmINZDXKql.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+Чтобы упростить проверку некоторых запросов, основанных на предпочтениях, вы можете использовать функциональность эмуляции в DevTools, вместо того чтобы каждый раз менять системные настройки.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ol6pVXJLT44wAkRADAcq.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+### Дизайн темной темы оформления
+
+При создании темной темы оформления недостаточно просто инвертировать цвета фона и текста или сделать [темную полосу прокрутки](/color-scheme/). Есть ряд моментов, которые могут быть неочевидными. Например, цвета на темном фоне в некоторых случаях следует делать менее насыщенными, чтобы избежать цветовой вибрации.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/tWxjbJ6yYUauQoCsySSX.png", alt="Не используйте яркие, насыщенные цвета в темных темах оформления", width="698", height="640" %}
+
+Для того чтобы создать эффект глубины и визуально «приподнять» элемент над окружением, не нужно использовать тени, так как их будет плохо видно на темном фоне. Вместо этого следует сделать фон элемента более светлым.
+
+<figure> {% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/ZiasjYiaPFmJJOkxJBce.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption> В рекомендациях <a href="https://material.io">Material Design</a> содержатся отличные советы о том, как создавать темные темы оформления. </figcaption></figure>
+
+Темная тема не только дает пользователям больше возможностей для персонализации, но и может значительно увеличить время автономной работы устройств с AMOLED-экранами. Такие экраны используются в новых флагманских моделях телефонов, и они становятся все более распространенными в мобильных устройствах.
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/ZszEdn43lc4ZmcOaGKy4.webp", alt="скриншот с выступления, где изначально было показано это изображение", width="720", height="407" %}
+
+Согласно [исследованию Android, проведенному в 2018 году](https://www.theverge.com/2018/11/8/18076502/google-dark-mode-android-battery-life), при использовании темной темы снижение энергопотребления может достигать 60%, в зависимости от яркости экрана и особенностей интерфейса. Для сравнения темной и светлой темы, в ходе которого была получена цифра в 60%, использовался экран воспроизведения YouTube с приостановленным видео; яркость экрана была установлена на 100%.
+
+Старайтесь всегда предоставлять пользователям темную тему, когда это возможно.
+
+## Адаптация под размер контейнера
+
+Одно из наиболее важных нововведений CSS — это контейнерные запросы, также известные как элементные запросы. Трудно переоценить то, насколько значимым для развития экосистемы дизайна станет переход от страничного адаптивного дизайна к контейнерному.
+
+Ниже можно ознакомиться с демонстрацией возможностей контейнерных запросов. Вы можете управлять любыми стилями элемента карточки, в том числе видимостью списка ссылок, размерами шрифтов и общей разметкой, на основании параметров родительского контейнера:
+
+<figure> {% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/fvrxk5kXiif6eFX25BH5.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption><a href="https://codepen.io/una/pen/LYbvKpK">Просмотреть демонстрацию на Codepen</a> (необходимо включить флаг в Canary).</figcaption></figure>
+
+В примере показаны два идентичных компонента, имеющих разные размеры контейнера и размещенных внутри макета, созданного при помощи CSS Grid. Каждый компонент подстраивается под отведенное ему пространство и использует соответствующие стили.
+
+Такая гибкость была бы невозможна при использовании только лишь медиа-запросов.
+
+Контейнерные запросы обеспечивают намного более динамичный подход к адаптивному дизайну. Компонент карточки можно разместить в боковой панели, в разделе с hero-изображением или в сетке внутри основной части страницы; поскольку адаптивные стили привязаны к самому компоненту, его размеры определяются исходя из размеров контейнера, а не области просмотра.
+
+Такое поведение достигается благодаря использованию правила `@container`. Оно работает аналогично медиа-запросам `@media`, но вместо параметров браузера и области просмотра позволяет запрашивать параметры родительского контейнера.
+
+```css
+.card {
+  container-type: inline-size;
+}
+
+@container (max-width: 850px) {
+  .links {
+    display: none;
+  }
+
+  .time {
+    font-size: 1.25rem;
+  }
+
+  /* ... */
+}
+```
+
+Сначала установите для родительского элемента атрибут contain. Затем создайте запрос `@container` для стилизации элементов, размещенных внутри контейнера, на основании его размера, используя `min-width` или `max-width`.
+
+Приведенный выше код использует `max-width` и устанавливает для ссылок параметр `display:none`, а также уменьшает размер шрифта элемента «.time», если контейнер имеет ширину менее `850px`.
+
+### Карточки на основе контейнерных запросов
+
+В этом примере интернет-магазина растений все карточки товаров, в том числе в шапке, на боковой панели недавно просмотренных товаров и в сетке со списком товаров, реализованы при помощи одного и того же компонента с идентичной разметкой.
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/D4hBchz6kaPjkgx8BCmU.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption> <a href="https://codepen.io/una/pen/mdOgyVL">Просмотреть демонстрацию на Codepen</a> (необходимо включить флаг в Canary).</figcaption></figure>
+
+Этот макет не содержит *ни одного* медиа-запроса и построен полностью на контейнерных запросах. Благодаря этому карточки товаров переключаются на нужный макет, чтобы заполнить отведенное для них пространство. Например, для размещения элементов в виде сетки используется макет со столбцами на основе minmax; если места становится слишком мало (т. е. достигнут минимальный размер), то происходит перекомпоновка сетки.
+
+```css
+.product {
+  container-type: inline-size;
+}
+
+@container (min-width: 350px) {
+  .card-container {
+    padding: 0.5rem 0 0;
+    display: flex;
+  }
+
+  .card-container button {
+    /* ... */
+  }
+}
+
+```
+
+Если ячейка сетки имеет ширину от `350px` или выше, макет карточки получает параметр `display: flex` и становится горизонтальным, поскольку flex-direction по умолчанию имеет значение «row».
+
+Если ячейка имеет меньшую ширину, карточки товаров отображаются в вертикальном виде. Каждая карточка сама задает свое оформление, что было бы невозможным при использовании только глобальных стилей.
+
+### Совместное использование контейнерных запросов и медиа-запросов
+
+Контейнерные запросы имеют множество возможных применений, и одно из них — компонент календаря. При помощи контейнерных запросов можно изменять макет календарных событий и других сегментов в зависимости от доступной ширины в родительском контейнере.
+
+<figure>{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/hjV6i4PEu8wounYhHsHf.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %} <figcaption><a href="https://codepen.io/una/pen/RwodQZw">Просмотреть демонстрацию на Codepen</a> (необходимо включить флаг в Canary).</figcaption></figure>
+
+В этом примере при помощи контейнерных запросов производится компоновка и стилизация чисел и дней недели, а также задаются размеры шрифта и полей для карточек с запланированными событиями, чтобы обеспечить оптимальное использование пространства.
+
+Затем при помощи медиа-запроса макет адаптируется для экранов небольшого размера. Этот пример демонстрирует мощь *объединения* медиа-запросов (для настройки глобальных стилей, иначе называемых макростилями) и контейнерных запросов (для настройки потомков контейнера и их микростилей).
+
+Теперь макетом одного и того же элемента интерфейса можно управлять одновременно на макро- и микроуровне, что открывает возможности для более изящных дизайнерских решений.
+
+### Использование контейнерных запросов сегодня
+
+Для запуска демонстраций, приведенных выше, необходимо включить флаг в Chrome Canary. Откройте Canary, перейдите по адресу `about://flags` и включите флаг `#enable-container-queries`. Этот флаг активирует поддержку запросов `@container`, значений `inline-size` и `block-size` свойства `contain`, а также реализации Grid из LayoutNG.
+
+### Стили с ограниченной областью действия
+
+В качестве дополнения к контейнерным запросам рабочая группа CSS активно обсуждает реализацию [стилей с ограниченной областью действия](https://css.oddbird.net/scope/), которые позволят обеспечить определение пространств имен и предотвращение конфликтов при работе с компонентами.
+
+<figure> {% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/FCHIEO4IouHOQaOJXrQD.png", alt="стили с ограниченной областью действия", width="759", height="636" %} <figcaption>Автор рисунка — <a href="https://css.oddbird.net/">Мириам Сьюзан</a>. </figcaption></figure>
+
+Ограничение области действия позволяет избегать конфликтов имен при использовании сквозных стилей и стилей компонентов — аналогичная функциональность уже доступна в ряде фреймворков и плагинов, таких как CSS Modules. Описываемая спецификация позволит создавать для компонентов нативные инкапсулируемые стили, используя удобочитаемый CSS-код, без необходимости вносить изменения в разметку.
+
+```css
+/* @scope (<root>#) [to (<boundary>#)]? { … } */
+
+@scope (.tabs) to (.panel) {
+  :scope { /* targeting the scope root */ }
+  .light-theme :scope .tab { /* contextual styles */ }
+}
+```
+
+При помощи ограничения области действия можно создавать селекторы в виде «бублика», указывая условия инкапсуляции стиля, а также условия отмены его действия и возврата к более глобальному стилю.
+
+Пример такого сценария — панель вкладок, где к самим вкладкам применяется стиль с ограниченной областью действия, а к содержимому вкладок — родительский стиль.
+
+## Адаптация под форм-фактор
+
+Рассуждая о новой эпохе адаптивного дизайна, нельзя не упомянуть о появлении новых форм-факторов и видов устройств (таких, как шлемы виртуальной реальности или экраны, меняющие форму), которые вскоре могут стать актуальными для сообщества веб-разработчиков.
+
+<figure> {% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/OeskptFb2djUWWmX7K9y.svg", alt="Разделенные экраны", width="800", height="488" %} <figcaption>Авторы рисунка — <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md">Microsoft Edge Explainers</a>. </figcaption></figure>
+
+Складные или гибкие экраны и дизайн с поддержкой разделенных экранов — один из примеров того, как новый форм-фактор постепенно приходит в нашу жизнь. Разделение экрана — еще одна спецификация, которую мы разрабатываем с целью обеспечить поддержку устройств с таким форм-фактором.
+
+В настоящее время существует экспериментальный [медиа-запрос](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md) для поддержки разделенных экранов. Он используется следующим образом: `@media (spanning: <тип разделения>)`. В демонстрации показан макет в виде сетки с двумя столбцами, один из которых имеет ширину --sidebar-width (по умолчанию — 5rem), а другой — `1fr`. Когда макет просматривается на сдвоенном экране с одним вертикальным сгибом, в переменную `--sidebar-width` подставляется ширина левой части экрана из соответствующей переменной окружения.
+
+```css
+:root {
+  --sidebar-width: 5rem;
+}
+
+@media (spanning: single-fold-vertical) {
+  --sidebar-width: env(fold-left);
+}
+
+main {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+}
+```
+
+В результате получается макет, в котором боковая панель (в данном случае — панель навигации) отображается по одну сторону от сгиба, а интерфейс приложения — по другую. Это позволяет избежать появления видимого шва поверх интерфейса.
+
+{% Video src="video/HodOHWjMnbNw56hvNASHWSgZyAf2/Uf3RL7EhVZGK2ECiD0sT.mp4", autoplay=true, muted=true, playsinline=true, loop=true, controls=true %}
+
+В Chrome DevTools есть функция эмуляции складных экранов, которую можно использовать для отладки и прототипирования поддержки разделенных экранов прямо в браузере.
+
+## Заключение
+
+Дизайн интерфейсов для экранов нестандартного формата — еще одна область применения контейнерных запросов и стилей с ограниченной областью действия: с их помощью можно изолировать стили компонентов как от макета страницы и глобальных стилей, так и от пользовательских стилей, что позволяет сделать адаптивный дизайн более гибким. Теперь вы можете комбинировать страничные медиа-запросы (для дизайна макета на макроуровне, включая поддержку разделенных экранов), контейнерные запросы (для дизайна на микроуровне) и медиа-запросы, основанные на пользовательских предпочтениях (для того, чтобы учитывать уникальные предпочтения и потребности пользователей).
+
+{% Img src="image/HodOHWjMnbNw56hvNASHWSgZyAf2/uAJDDUDLcAsLzBf0a27b.png", alt="Круг новой адаптивности", width="800", height="442" %}
+
+Это и есть новый адаптивный дизайн.
+
+Он позволяет создавать макеты на макро- и микроуровне, а также учитывать пользовательские настройки и форм-фактор.
+
+Каждое из этих изменений само по себе является значимым для веб-дизайна, но в совокупности они позволяют кардинально переосмыслить сам подход к адаптивному дизайну. Теперь адаптивный дизайн не просто позволяет учитывать размер области просмотра, а предоставляет целый набор инструментов для создания компонентов и повышенной персонализации.
+
+Настала новая эпоха адаптивного дизайна, и вы можете сделать шаг ей навстречу.
+
+### web.dev/learnCSS
+
+А пока что наша команда запустила на web.dev новый, абсолютно бесплатный курс и справочник по CSS, который пригодится желающим углубить или освежить свои познания в нем. Курс доступен по ссылке: [web.dev/learnCSS](/learn/css).
+
+Надеюсь, что вам понравился краткий обзор новой эпохи адаптивного дизайна, а также примитивов, которые сделали ее возможной. Хочется верить, что вы не меньше, чем я, воодушевлены перспективами, которые она открывает для веб-дизайна.
+
+Поддержка стилей на основе компонентов, новых форм-факторов, а также страниц, учитывающих предпочтения пользователей, открывает перед UI-сообществом действительно обширные возможности.
diff --git a/src/site/content/ru/blog/nfc/index.md b/src/site/content/ru/blog/nfc/index.md
new file mode 100644
index 00000000000..9b8b071bafb
--- /dev/null
+++ b/src/site/content/ru/blog/nfc/index.md
@@ -0,0 +1,830 @@
+---
+title: Взаимодействие с устройствами NFC в Chrome для Android
+subhead: Chrome для Android теперь может читать и записывать NFC-метки.
+authors:
+  - beaufortfrancois
+date: 2020-02-12
+updated: 2021-02-23
+hero: image/admin/TqG3qb5MiLGNTnAgKtqO.jpg
+thumbnail: image/admin/8tWkeYbKLxSd2YgTUSGv.jpg
+alt: Фото NFC-меток
+description: |
+  В Chrome для Android теперь можно читать и записывать NFC-метки.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webnfc
+---
+
+{% Aside 'success' %}
+Интерфейс Web NFC, часть [проекта по расширению возможностей](https://developer.chrome.com/blog/fugu-status/),
+реализован в Chrome 89 для Android.
+{% endAside %}
+
+## Что такое Web NFC? {: #what }
+
+NFC (Near Field Communications) — это технология беспроводной связи ближнего действия
+на частоте 13,56 МГц, которая обеспечивает передачу данных между устройствами
+на расстоянии до 10 см со скоростью до 424 кбит/с.
+
+Web NFC дает сайтам возможность читать и записывать NFC-метки, находящиеся
+в непосредственной близости от устройства пользователя (обычно это 5-10 см).
+Пока что работает только NDEF (NFC Data Exchange Format) — упрощенный формат
+обмена двоичными сообщениями для меток различных форматов.
+
+<figure>
+  {% Img src="image/admin/jWmCabXZCB6zNwQIR90I.png", alt="Телефон обеспечивает питание NFC-метки для обмена данными", width="800", height="489" %}
+  <figcaption>Схема работы NFC</figcaption>
+</figure>
+
+## Предлагаемые варианты использования {: #use-cases }
+
+В Web NFC используется только NDEF, поскольку свойства системы безопасности
+для чтения и записи данных NDEF легче измерить количественно. Низкоуровневые операции ввода-вывода
+(например, ISO-DEP, NFC-A/B, NFC-F), режим одноранговой связи и эмуляция карт
+на устройстве пользователя (HCE) не поддерживаются.
+
+Примеры сайтов, которые могут использовать Web NFC:
+- Музеи и художественные галереи: отображение дополнительных сведений
+   об экспонате, когда пользователь касается его NFC-карты телефоном.
+- Сайты инвентарного учета: чтение и запись данных в NFC-метку
+   на контейнере для обновления сведений о его содержимом.
+- Сайты конференций: сканирование NFC-бейджиков на мероприятии.
+- Эту функцию можно использовать для обмена исходными секретными ключами,
+   необходимыми для подготовки устройств или сервисов, а также для развертывания
+   данных конфигурации в рабочем режиме.
+
+<figure>
+  {% Img src="image/admin/zTEXhIx9nDWtbKrIPN0x.png", alt="Телефон сканирует несколько NFC-меток", width="800", height="383" %}
+  <figcaption>Иллюстрация инвентарного учета с помощью NFC</figcaption>
+</figure>
+
+## Текущее состояние {: #status }
+
+<div class="table-wrapper scrollbar">
+
+| Этап | Состояние |
+| ------------------------------------------ | ---------------------------- |
+| 1. Написать пояснение | [Готово][explainer] |
+| 2. Создать исходный проект спецификации | [Готово][spec] |
+| 3. Собрать отзывы и уточнить дизайн | [Готово](#feedback) |
+| 4. Испытание в Origin | [Готово][ot] |
+| **5. Запуск** | **Готово** |
+
+</div>
+
+## Использование Web NFC {: #use }
+
+### Обнаружение функции {: #feature-detection }
+
+Обнаружение функций для оборудования отличается от привычного.
+Наличие `NDEFReader` сообщает, что браузер поддерживает Web NFC, но не говорит
+о наличии необходимого оборудования. В частности, если оборудования нет,
+то промис от определенных вызовов будет отклонен. Подробнее —
+ниже, в описании `NDEFReader`.
+
+```js
+if ('NDEFReader' in window) { /* Сканирование и запись NFC-меток */ }
+```
+
+### Терминология {: #terminology }
+
+NFC-метка — это пассивное NFC-устройство: оно получает питание от магнитной
+индукции, когда поблизости находится активное устройство (например, телефон). NFC-метки бывают разных форм и видов: наклейки, пластиковые карты,
+браслеты и т. д.
+
+<figure>
+  {% Img src="image/admin/uUBxSkSc3MJBG8Lw52fV.jpg", alt="Фото прозрачной NFC-метки", width="800", height="450" %}
+  <figcaption>Прозрачная NFC-метка</figcaption>
+</figure>
+
+Объект `NDEFReader` — это точка входа в Web NFC, которая предоставляет
+функции для подготовки действий чтения и (или) записи, выполняемых при появлении
+NDEF-метки поблизости. Аббревиатура `NDEF` в `NDEFReader` означает NFC Data Exchange
+Format — упрощенный формат обмена двоичным сообщениями по стандарту [NFC Forum].
+
+Объект `NDEFReader` предназначен для действий с сообщениями NDEF от NFC-меток
+и для записи сообщений NDEF в NFC-метки в радиусе действия.
+
+NFC-метка с поддержкой NDEF напоминает записку: кто угодно может ее прочитать,
+а также записать (если запись разрешена). В ней содержится одно сообщение NDEF,
+в котором находится одна или несколько NDEF-записей. Каждая NDEF-запись —
+это двоичная структура с полезными данными и сведениями о соответствующем типе.
+Web NFC поддерживает следующие типы записей стандарта NFC Forum: пустая, текст,
+URL-адрес, смарт-плакат, MIME-тип, абсолютный URL-адрес, внешний тип, неизвестный
+и локальный тип.
+
+<figure>
+  {% Img src="image/admin/50clBWSJbKkyumsxrioB.png", alt="Схема NDEF-сообщения", width="800", height="243" %}
+  <figcaption>Схема NDEF-сообщения</figcaption>
+</figure>
+
+### Сканирование NFC-меток {: #scan }
+
+Чтобы сканировать NFC-метки, создайте экземпляр объекта `NDEFReader`. Вызов `scan()`
+возвращает промис. Если ранее доступ не был получен, [пользователю может
+быть отправлен запрос]. Объект Promise будет разрешен, если выполнятся следующие условия:
+
+- Пользователь разрешил веб-сайту использовать NFC-устройства при прикосновении
+   ими к телефону.
+- Телефон поддерживает NFC.
+- Пользователь включил NFC на телефоне.
+
+После разрешения промиса можно подписаться `чтение` входящих
+сообщений NDEF через прослушиватель событий. Также следует подписаться
+на события `readingerror` — чтобы знать, когда поблизости
+оказываются несовместимые NFC-метки.
+
+```js
+const ndef = new NDEFReader();
+ndef.scan().then(() => {
+  console.log("Сканирование запущено.");
+  ndef.onreadingerror = () => {
+    console.log("Не удается прочитать данные из NFC-метки. Попробовать другую?");
+  };
+  ndef.onreading = event => {
+    console.log("NDEF-сообщение прочитано.");
+  };
+}).catch(error => {
+  console.log(`Ошибка! Не удалось запустить сканирование. ${error}.`);
+});
+```
+
+Если поблизости NFC-метка, срабатывает событие `NDEFReadingEvent` с
+двумя уникальными свойствами:
+
+- `serialNumber` — серийный номер устройства (например,
+   00-11-22-33-44-55-66) или пустая строка, если его нет;
+- `message` — NDEF-сообщение, хранящееся в NFC-метке.
+
+Чтобы прочитать содержимое NDEF-сообщения, запустите цикл по `message.records`
+и обработайте члены `data` [согласно] их `recordType` (тип).
+Члены `data` представлены как <code>[DataView]</code> поскольку это позволяет
+обрабатывать случаи с кодировкой UTF-16.
+
+```js
+ndef.onreading = event => {
+  const message = event.message;
+  for (const record of message.records) {
+    console.log("Тип записи:  " + record.recordType);
+    console.log("MIME-тип:    " + record.mediaType);
+    console.log("Идентификатор записи:    " + record.id);
+    switch (record.recordType) {
+      case "text":
+        // TODO. Прочитать текстовую запись согласно данным, языку и кодировке записи.
+        break;
+      case "url":
+        // TODO. Прочитать запись URL согласно данным записи.
+        break;
+      default:
+        // TODO. Обработка других записей согласно данным записи.
+    }
+  }
+};
+```
+
+{% Aside %}
+В [справочнике](#cookbook) есть много примеров чтения NDEF-записей в зависимости
+от типа.
+{% endAside %}
+
+### Запись NFC-меток {: #write }
+
+Чтобы записывать NFC-метки, создайте экземпляр объекта `NDEFReader`. Вызов `write()`
+возвращает промис. Если ранее доступ не был получен, [пользователю может
+быть отправлен запрос]. На этом этапе NDEF-сообщение уже «подготовлено». Объект
+Promise будет разрешен, если выполнятся следующие условия:
+
+- Пользователь разрешил веб-сайту использовать NFC-устройства при прикосновении
+   ими к телефону.
+- Телефон поддерживает NFC.
+- Пользователь включил NFC на телефоне.
+- Пользователь коснулся NFC-метки и NDEF-сообщение было записано.
+
+Чтобы записать в NFC-метку текст, передайте в метод `write()` строку.
+
+```js
+const ndef = new NDEFReader();
+ndef.write(
+  "Hello World"
+).then(() => {
+  console.log("Сообщение записано.");
+}).catch(error => {
+  console.log(`Ошибка записи. Повторите попытку. ${error}.`);
+});
+```
+
+Чтобы записать в NFC-метку URL-адрес, передайте в метод `write()` словарь,
+представляющий NDEF-сообщение. В примере ниже NDEF-сообщение — это словарь с ключом
+`records`, значение которого — массив записей. В этом случае
+запись URL, определенная как объект, у которого ключ `recordType` имеет значение
+`"url"`, а `data` — строка URL-адреса.
+
+```js
+const ndef = new NDEFReader();
+ndef.write({
+  records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }]
+}).then(() => {
+  console.log("Сообщение записано.");
+}).catch(error => {
+  console.log(`Ошибка записи. Повторите попытку. ${error}.`);
+});
+```
+
+В NFC-метки можно заносить и несколько записей.
+
+```js
+const ndef = new NDEFReader();
+ndef.write({ records: [
+    { recordType: "url", data: "https://w3c.github.io/web-nfc/" },
+    { recordType: "url", data: "https://web.dev/nfc/" }
+]}).then(() => {
+  console.log("Сообщение записано.");
+}).catch(error => {
+  console.log(`Ошибка записи. Повторите попытку. ${error}.`);
+});
+```
+
+{% Aside %}
+В [справочнике](#cookbook) есть много примеров с NDEF-записями других
+типов.
+{% endAside %}
+
+Если NFC-метка содержит NDEF-сообщение, не предназначенное для перезаписи,
+то в параметрах для метода `write()` нужно задать свойству `overwrite`
+значение `false`. В этом случае, если в NFC-метке уже сохранено
+NDEF-сообщение, возвращенный промис будет отклонен.
+
+```js
+const ndef = new NDEFReader();
+ndef.write("Круто! Пишем данные в пустую NFC-метку!", { overwrite: false })
+.then(() => {
+  console.log("Сообщение записано.");
+}).catch(_ => {
+  console.log(`Ошибка записи. Повторите попытку. ${error}.`);
+});
+```
+
+### Безопасность и разрешения {: #security-and-permissions }
+
+Команда Chrome разработала и внедрила Web NFC согласно принципам, определенным
+в [Контроле доступа к функциям веб-платформы с широкими
+возможностями][powerful-apis], включая пользовательский контроль, прозрачность и удобство.
+
+NFC расширяет область, в которой информация может быть доступна вредоносным
+сайтам, поэтому использование NFC ограничено, с тем чтобы максимально
+информировать пользователей и дать им контроль над этой функцией.
+
+<figure>
+  {% Img src="image/admin/PjUcOk4zbtOFJLXfSeSD.png", alt="Скриншот запроса Web NFC на сайте", width="800", height="407" %}
+  <figcaption>Запрос Web NFC пользователю</figcaption>
+</figure>
+
+Web NFC используется только во фреймах верхнего уровня и контекстах безопасного
+просмотра веб-страниц (только HTTPS). Источник при обработке жеста пользователя (например, нажатия кнопки) сначала
+запрашивает [разрешение] `"nfc"`. Если ранее доступ не был получен, методы `scan()` и `write()`
+объекта NDEFReader отправляют запрос пользователю.
+
+```js
+  document.querySelector("#scanButton").onclick = async () => {
+    const ndef = new NDEFReader();
+    // Запрос пользователю разрешить сайту взаимодействовать с NFC-устройствами.
+    await ndef.scan();
+    ndef.onreading = event => {
+      // TODO. Обработка входящих NDEF-сообщений.
+    };
+  };
+```
+
+Сочетание инициированного пользователем запроса на разрешение и физического
+перемещения устройства по целевой NFC-метке отражает паттерн выбирающего
+субъекта, который можно найти в других API доступа к файлам и устройствам.
+
+Для сканирования (записи) веб-страница должна быть видимой, когда пользователь
+касается NFC-метки устройством. Касание отражается браузером с помощью тактильной
+обратной связи. Если дисплей выключен или устройство заблокировано, доступ к NFC-передатчику
+блокируется. Если веб-страница невидима, получение и отправка содержимого
+приостанавливается и возобновляется, когда она становится видимой.
+
+Изменение видимости документа можно отслеживать с помощью
+[Page Visibility API].
+
+```js
+document.onvisibilitychange = event => {
+  if (document.hidden) {
+    // Если документ скрыт, все операции NFC автоматически приостанавливаются.
+  } else {
+    // При необходимости все операции NFC возобновляются.
+  }
+};
+```
+
+## Справочник {: #cookbook }
+
+Ниже приведено несколько примеров кода.
+
+### Проверка разрешения
+
+С помощью [Permissions API] можно проверить, было ли получено разрешение
+`"nfc"`. В примере показано, как сканировать NFC-метки без взаимодействия с пользователем,
+если доступ уже есть (и отобразить кнопку, если он еще не был получен). Такой же
+механизм действует и для записи, поскольку используется то же
+разрешение.
+
+```js
+const ndef = new NDEFReader();
+
+async function startScanning() {
+  await ndef.scan();
+  ndef.onreading = event => {
+    /* обработка NDEF-сообщений */
+  };
+}
+
+const nfcPermissionStatus = await navigator.permissions.query({ name: "nfc" });
+if (nfcPermissionStatus.state === "granted") {
+  // Доступ NFC уже был предоставлен — можно начинать сканирование.
+  startScanning();
+} else {
+  // Показать кнопку сканирования.
+  document.querySelector("#scanButton").style.display = "block";
+  document.querySelector("#scanButton").onclick = event => {
+    // Запросить у пользователя разрешение на отправку и получение информации при касании NFC-устройств.
+    startScanning();
+  };
+}
+```
+
+### Прерывание операции с NFC
+
+С помощью примитива <code>[AbortController]</code> можно прервать операции
+с NFC. В примере ниже показано, как передать `signal` из `AbortController`
+через параметры методов `scan()` и `write()` объекта NDEFReader и
+одновременно прервать обе операции с NFC.
+
+```js
+const abortController = new AbortController();
+abortController.signal.onabort = event => {
+  // Все операции с NFC были прерваны.
+};
+
+const ndef = new NDEFReader();
+await ndef.scan({ signal: abortController.signal });
+
+await ndef.write("Hello world", { signal: abortController.signal });
+
+document.querySelector("#abortButton").onclick = event => {
+  abortController.abort();
+};
+```
+
+### Чтение и создание текстовой записи
+
+Данные `data` текстовой записи можно декодировать с помощью экземпляра
+`TextDecoder`, созданного со свойством `encoding` записи. Язык
+текстовой записи хранится в свойстве `lang`.
+
+```js
+function readTextRecord(record) {
+  console.assert(record.recordType === "text");
+  const textDecoder = new TextDecoder(record.encoding);
+  console.log(`Текст: ${textDecoder.decode(record.data)} (${record.lang})`);
+}
+```
+
+Сделать простую текстовую запись можно, передав в метод `write()` объекта NDEFReader строку.
+
+```js
+const ndef = new NDEFReader();
+await ndef.write("Hello World");
+```
+
+Текстовые записи по умолчанию в кодировке UTF-8 и предполагают язык текущего
+документа, однако NDEF-запись можно настроить, используя полный синтаксис и указав
+свойства `encoding` и `lang`.
+
+```js
+function a2utf16(string) {
+  let result = new Uint16Array(string.length);
+  for (let i = 0; i < string.length; i++) {
+    result[i] = string.codePointAt(i);
+  }
+  return result;
+}
+
+const textRecord = {
+  recordType: "text",
+  lang: "fr",
+  encoding: "utf-16",
+  data: a2utf16("Bonjour, François !")
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [textRecord] });
+```
+
+### Чтение и создание записи с URL-адресом
+
+Для декодирования данных `data` записи используйте `TextDecoder`.
+
+```js
+function readUrlRecord(record) {
+  console.assert(record.recordType === "url");
+  const textDecoder = new TextDecoder();
+  console.log(`URL: ${textDecoder.decode(record.data)}`);
+}
+```
+
+Создать запись с URL-адресом можно, передав в метод `write()` объекта NDEFReader
+словарь с NDEF-сообщением. Запись с URL-адресом в NDEF-сообщении определяется как объект, у которого
+ключ `recordType` имеет значение `"url"`, а `data` —
+строка URL.
+
+```js
+const urlRecord = {
+  recordType: "url",
+  data:"https://w3c.github.io/web-nfc/"
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [urlRecord] });
+```
+
+### Чтение и создание записи с MIME-типом
+
+Свойство `mediaType` записи с MIME-типом представляет собой MIME-тип полезной
+нагрузки NDEF-записи, что позволяет декодировать `data`. Например, для декодирования
+JSON-текста используется `JSON.parse`, а для данных изображения — элемент Image.
+
+```js
+function readMimeRecord(record) {
+  console.assert(record.recordType === "mime");
+  if (record.mediaType === "application/json") {
+    const textDecoder = new TextDecoder();
+    console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);
+  }
+  else if (record.mediaType.startsWith('image/')) {
+    const blob = new Blob([record.data], { type: record.mediaType });
+    const img = new Image();
+    img.src = URL.createObjectURL(blob);
+    document.body.appendChild(img);
+  }
+  else {
+    // TODO. Добавить обработку других MIME-типов.
+  }
+}
+```
+
+Создать запись с MIME-типом можно, передав в метод `write()` объекта NDEFReader
+словарь с NDEF-сообщением. Запись с MIME-типом в NDEF-сообщении определяется как объект, у которого
+ключ `recordType` имеет значение `"mime"`, `mediaType` — MIME-тип
+контента, а `data` — либо объект `ArrayBuffer`,
+либо его представление (например,
+`Uint8Array`, `DataView`).
+
+```js
+const encoder = new TextEncoder();
+const data = {
+  firstname: "François",
+  lastname: "Beaufort"
+};
+const jsonRecord = {
+  recordType: "mime",
+  mediaType: "application/json",
+  data: encoder.encode(JSON.stringify(data))
+};
+
+const imageRecord = {
+  recordType: "mime",
+  mediaType: "image/png",
+  data: await (await fetch("icon1.png")).arrayBuffer()
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [jsonRecord, imageRecord] });
+```
+
+### Чтение и создание записи с абсолютным URL-адресом
+
+Данные `data` записи с абсолютным URL-адресом можно декодировать с помощью простого `TextDecoder`.
+
+```js
+function readAbsoluteUrlRecord(record) {
+  console.assert(record.recordType === "absolute-url");
+  const textDecoder = new TextDecoder();
+  console.log(`Абсолютный URL: ${textDecoder.decode(record.data)}`);
+}
+```
+
+Создать запись с абсолютным URL-адресом можно, передав в метод `write()` объекта
+NDEFReader словарь с NDEF-сообщением. Запись с абсолютным URL в NDEF-сообщении определяется как объект,
+у которого ключ `recordType` имеет значение `"absolute-url"`, а `data` —
+строка URL.
+
+```js
+const absoluteUrlRecord = {
+  recordType: "absolute-url",
+  data:"https://w3c.github.io/web-nfc/"
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [absoluteUrlRecord] });
+```
+
+### Чтение и создание записи со смарт-плакатом
+
+Запись со смарт-плакатом (реклама журналов, листовки, рекламные щиты и т. д.)
+описывает определенный веб-контент как NDEF-запись с NDEF-сообщением
+в качестве полезной нагрузки. Чтобы преобразовать `data` в список записей из смарт-плаката,
+нужно вызвать `record.toRecords()`. В нем должна быть запись URL, текстовая
+запись для заголовка, запись с MIME-типом для изображения и [пользовательские
+записи локального типа], например `":t"`, `":act"` и `":s"` для типа,
+действия и размера записи со смарт-плакатом соответственно.
+
+Записи локального типа уникальны в рамках локального контекста содержащей
+их записи NDEF. Они используются, когда смысл типов вне локального контекста содержащей
+их записи не имеет значения и когда размер хранилища является
+существенным ограничением. В Web NFC имена записей локального типа всегда начинаются с `:`
+(например, `":t"`, `":s"`, `":act"`). Это позволяет отличить, например, текстовую запись
+локального типа от обычной текстовой записи.
+
+```js
+function readSmartPosterRecord(smartPosterRecord) {
+  console.assert(record.recordType === "smart-poster");
+  let action, text, url;
+
+  for (const record of smartPosterRecord.toRecords()) {
+    if (record.recordType == "text") {
+      const decoder = new TextDecoder(record.encoding);
+      text = decoder.decode(record.data);
+    } else if (record.recordType == "url") {
+      const decoder = new TextDecoder();
+      url = decoder.decode(record.data);
+    } else if (record.recordType == ":act") {
+      action = record.data.getUint8(0);
+    } else {
+      // TODO. Обработка записей других типов, например `:t`, `:s`.
+    }
+  }
+
+  switch (action) {
+    case 0:
+      // Выполнить действие
+      break;
+    case 1:
+      // Сохранить на потом
+      break;
+    case 2:
+      // Открыть для редактирования
+      break;
+  }
+}
+```
+
+Создать запись со смарт-плакатом можно, передав в метод `write()` объекта NDEFReader
+NDEF-сообщение. Запись со смарт-плакатом в NDEF-сообщении определяется как объект, у которого
+ключ `recordType` имеет значение `"smart-poster"`, а `data` —
+объект, представляющий, опять же, NDEF-сообщение, содержащееся в
+записи смарт-плаката.
+
+```js
+const encoder = new TextEncoder();
+const smartPosterRecord = {
+  recordType: "smart-poster",
+  data: {
+    records: [
+      {
+        recordType: "url", // Запись с URL-адресом для содержимого смарт-плаката
+        data: "https://my.org/content/19911"
+      },
+      {
+        recordType: "text", // Запись с заголовком для содержимого смарт-плаката
+        data: "Забавный танец"
+      },
+      {
+        recordType: ":t", // Запись типа, локальный тип для смарт-плаката
+        data: encoder.encode("image/gif") // MIME-тип смарт-плаката
+      },
+      {
+        recordType: ":s", // Запись размера, локальный тип для смарт-плаката
+        data: new Uint32Array([4096]) // Размер в байтах для смарт-плаката
+      },
+      {
+        recordType: ":act", // Запись действия, локальный тип для смарт-плаката
+        // Выполнить действие, в этом случае — открыть в браузере
+        data: new Uint8Array([0])
+      },
+      {
+        recordType: "mime", // Запись MIME-типа со значком
+        mediaType: "image/png",
+        data: await (await fetch("icon1.png")).arrayBuffer()
+      },
+      {
+        recordType: "mime", // Еще одна запись со значком
+        mediaType: "image/jpg",
+        data: await (await fetch("icon2.jpg")).arrayBuffer()
+      }
+    ]
+  }
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [smartPosterRecord] });
+```
+
+### Чтение и создание записи с внешним типом
+
+Внешний тип нужен для возможности создания записей, определяемых приложением. В них
+в качестве полезной нагрузки может быть NDEF-сообщение, доступное посредством `toRecords()`. В
+имени содержится доменное имя организации-эмитента, двоеточие и имя типа
+длиной не менее одного символа, например `"example.com:foo"`.
+
+```js
+function readExternalTypeRecord(externalTypeRecord) {
+  for (const record of externalTypeRecord.toRecords()) {
+    if (record.recordType == "text") {
+      const decoder = new TextDecoder(record.encoding);
+      console.log(`Текст: ${textDecoder.decode(record.data)} (${record.lang})`);
+    } else if (record.recordType == "url") {
+      const decoder = new TextDecoder();
+      console.log(`URL: ${decoder.decode(record.data)}`);
+    } else {
+      // TODO. Обработка записей других типов.
+    }
+  }
+}
+```
+
+Создать запись с внешним типом можно, передав в метод `write()` объекта
+NDEFReader словарь с NDEF-сообщением. Запись с внешним типом в NDEF-сообщении определяется
+как объект, у которого в ключе `recordType` содержится имя внешнего
+типа, а в `data` — объект, представляющий NDEF-сообщение, содержащееся в записи
+с внешним типом. Ключ `data` также может являться либо объектом
+`ArrayBuffer`, либо его представлением
+(например, `Uint8Array`, `DataView`).
+
+```js
+const externalTypeRecord = {
+  recordType: "example.game:a",
+  data: {
+    records: [
+      {
+        recordType: "url",
+        data: "https://example.game/42"
+      },
+      {
+        recordType: "text",
+        data: "Здесь дается контекст игры"
+      },
+      {
+        recordType: "mime",
+        mediaType: "image/png",
+        data: await (await fetch("image.png")).arrayBuffer()
+      }
+    ]
+  }
+};
+
+const ndef = new NDEFReader();
+ndef.write({ records: [externalTypeRecord] });
+```
+
+### Чтение и создание пустой записи
+
+У пустой записи нет полезной нагрузки.
+
+Создать пустую запись можно, передав в метод `write()` объекта NDEFReader
+словарь с NDEF-сообщением. Пустая запись в NDEF-сообщении определяется как объект, у которого
+ключ `recordType` имеет значение `"empty"`.
+
+```js
+const emptyRecord = {
+  recordType: "empty"
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [emptyRecord] });
+```
+
+## Поддержка в браузере {: #browser-support }
+
+Web NFC поддерживается на Android в Chrome 89.
+
+## Советы разработчикам
+
+Ниже — то, что было бы неплохо знать до начала работы с Web NFC:
+
+- Android обрабатывает NFC-метки на уровне ОС до того, как начинает действовать Web NFC.
+- Значок NFC можно найти на сайте [material.io].
+- Различать NDEF-записи легче всего, используя их `id`.
+- NFC-метка без формата с поддержкой NDEF содержит одну запись пустого типа.
+- [Ссылка на приложение Android] создается легко — см. ниже.
+
+```js
+const encoder = new TextEncoder();
+const aarRecord = {
+  recordType: "android.com:pkg",
+  data: encoder.encode("com.example.myapp")
+};
+
+const ndef = new NDEFReader();
+await ndef.write({ records: [aarRecord] });
+```
+
+## Демонстрация {: #demos }
+
+Попробуйте [официальный пример] и посмотрите пару классных демонстраций Web NFC:
+- [Карточки].
+- [Список продуктов].
+- [Intel RSP Sensor NFC].
+- [Мультимедийная записка].
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/web-nfc-cards-demo.mp4">
+  </video>
+  <figcaption>
+    Демонстрация карточек Web NFC на Chrome Dev Summit 2019
+  </figcaption>
+</figure>
+
+## Отзывы {: #feedback }
+
+[Группа сообщества Web NFC](https://www.w3.org/community/web-nfc/) и команда Chrome
+с радостью выслушает ваше мнение об Web NFC и опыте использования этой функции.
+
+### Ваше мнение о дизайне API
+
+Что-то в API не работает должным образом? Или, может, отсутствуют
+методы или свойства, необходимые для реализации вашей идеи?
+
+Отправьте заявку о проблеме со спецификацией (Spec issue) в [GitHub-репозиторий Web NFC][issues]
+или прокомментируйте существующую.
+
+### Сообщите о проблеме с реализацией
+
+Нашли ошибку в реализации функции в браузере Chrome? Реализация
+отличается от спецификации?
+
+Сообщите об ошибке на странице [https://new.crbug.com][new-bug]. Опишите
+проблему как можно подробнее, дайте простые инструкции по ее воспроизведению
+и для *Components* укажите `Blink>NFC`. Для демонстрации этапов воспроизведения
+ошибки удобно использовать [Glitch](https://glitch.com).
+
+### Окажите поддержку
+
+Планируете использовать Web NFC? Ваша публичная поддержка помогает команде Chrome
+определять приоритет функций и показывает другим поставщикам браузеров,
+насколько важно их поддерживать.
+
+Упомяните в твите [@ChromiumDev][cr-dev-twitter], поставьте хештег
+[`#WebNFC`](https://twitter.com/search?q=%23WebNFC&src=typed_query&f=live)
+и расскажите, как вы используете эту функцию.
+
+## Полезные ссылки {: #helpful }
+
+* [Спецификация][spec].
+* [Демонстрационный пример Web NFC][demo] | [Исходный код демопримера Web NFC][demo-source].
+* [Отслеживание ошибок][cr-bug].
+* [Запись на ChromeStatus.com][cr-status].
+* Компонент Blink: [`Blink>NFC`](https://chromestatus.com/features#component%3ABlink%3ENFC).
+
+## Благодарности
+
+Большое спасибо [ребятам из Intel] за реализацию Web NFC. Google Chrome
+опирается на сообщество разработчиков, вместе продвигающих проект Chromium
+вперед. Не все авторы кода Chromium — сотрудники Google, поэтому
+они заслуживают особой благодарности!
+
+[explainer]: https://github.com/w3c/web-nfc/blob/gh-pages/EXPLAINER.md#web-nfc-explained
+[spec]: https://w3c.github.io/web-nfc/
+[ot]: https://developers.chrome.com/origintrials/#/view_trial/236438980436951041
+[issues]: https://github.com/w3c/web-nfc/issues
+[demo]: https://web-nfc-demo.glitch.me/
+[demo-source]: https://glitch.com/edit/#!/web-nfc-demo?path=script.js:1:0
+[new-bug]: https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ENFC
+[cr-dev-twitter]: https://twitter.com/chromiumdev
+[cr-bug]: https://bugs.chromium.org/p/chromium/issues/detail?id=520391
+[cr-status]: https://www.chromestatus.com/feature/6261030015467520
+[powerful-apis]: https://chromium.googlesource.com/chromium/src/+/master/docs/security/permissions-for-powerful-web-platform-features.md
+[Permissions API]: https://www.w3.org/TR/permissions/
+[AbortController]: https://developer.mozilla.org/docs/Web/API/AbortController
+[Page Visibility API]: https://developer.mozilla.org/docs/Web/API/Page_Visibility_API
+[пользователю может быть отправлен запрос]: #security-and-permissions
+[разрешение]: https://w3c.github.io/permissions/
+[ребятам из Intel]: https://github.com/w3c/web-nfc/graphs/contributors
+[Ссылка на приложение Android]: https://developer.android.com/guide/topics/connectivity/nfc/nfc#aar
+[NFC forum]: https://nfc-forum.org/
+[Ссылка на приложение Android]: https://developer.android.com/guide/topics/connectivity/nfc/nfc#aar
+[официальный пример]: https://googlechrome.github.io/samples/web-nfc/
+[Карточки]: https://web-nfc-demo.glitch.me
+[Список продуктов]: https://kenchris.github.io/webnfc-groceries
+[Мультимедийная записка]: https://webnfc-media-memo.netlify.com/
+[Intel RSP Sensor NFC]: https://kenchris.github.io/webnfc-rsp/
+[material.io]: https://material.io/resources/icons/?icon=nfc&style=baseline
+[согласно]: https://w3c.github.io/web-nfc/#data-mapping
+[custom local type records]: https://w3c.github.io/web-nfc/#smart-poster-record
+[DataView]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView
diff --git a/src/site/content/ru/blog/one-line-layouts/index.md b/src/site/content/ru/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..c4f86581256
--- /dev/null
+++ b/src/site/content/ru/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: Десять современных макетов одной строкой CSS
+subhead: В этом посте освещаются несколько эффективных строк CSS, которые выполняют массу работы и помогают создавать надежные современные макеты.
+authors:
+  - una
+description: В этом посте освещаются несколько эффективных строк CSS, которые выполняют массу работы и помогают создавать надежные современные макеты.
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: Макет Святого Грааля.
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+Современные CSS-макеты позволяют разработчикам писать поистине содержательные и надежные правила стилей всего несколькими нажатиями клавиш. В приведенном выше докладе и этой дополнительной публикации рассмотрены 10 эффективных строк CSS, которые выполняют массу работы.
+
+{% Glitch { id: '1linelayouts', path: 'README.md', height: 480 } %}
+
+Чтобы повторить действия этих демонстраций или самостоятельно попробовать нечто похожее, обратите внимание на блок Glitch выше или посетите [1linelayouts.glitch.me](https://1linelayouts.glitch.me).
+
+## 01. Супер-центрирование: `place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+В первом «однострочном» макете разберемся с самой страшной тайной CSS — центрированием. Знайте: с использованием [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items) все гораздо проще, чем вы думаете.
+
+Сначала укажите `grid` в качестве значения `display`, а затем напишите `place-items: center` в том же элементе. `place-items` — это сокращение для одновременной установки `align-items` и `justify-items`. Если ему присвоить значение `center`, и для `align-items`, и для `justify-items` будет применен `center`.
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+Это позволяет идеально центрировать контент внутри родительского элемента независимо от внутреннего размера.
+
+## 02. Разрезанный блин: `flex: <grow> <shrink> <baseWidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+Дальше у нас разрезанный блин! Это распространенный макет, например, для маркетинговых сайтов, в котором может быть строка из 3 элементов, обычно с изображением, заголовком и каким-либо текстом, описывающим некоторые особенности продукта. Нам нужно, чтобы на мобильных устройствах эти элементы укладывались в пачку и расширялись по мере увеличения размера экрана.
+
+Если задействовать Flexbox для этого эффекта, вам не потребуются медиа-запросы для позиционирования этих элементов при изменении размера экрана.
+
+Сокращение [`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) означает: `flex: <flex-grow> <flex-shrink> <flex-basis>`.
+
+Поэтому если вы хотите, чтобы блоки занимали пространство размером `<flex-basis>`, уменьшались при меньших размерах, но не *растягивались*, заполняя дополнительное пространство, напишите: `flex: 0 1 <flex-basis>`. В этом случае ваш `<flex-basis>` равен `150px`, поэтому код выглядит так:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+Если же вы *хотите*, чтобы блоки растягивались и заполняли пространство так же, как при переносе на следующую строку, установите для `<flex-grow>` значение `1`, чтобы это выглядело так:
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+Теперь, когда вы увеличиваете или уменьшаете размер экрана, эти гибкие элементы как сжимаются, так и увеличиваются.
+
+## 03. Слово боковой панели: `grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+В этой демонстрации используется функция [minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) для макетов с сеткой. Здесь мы устанавливаем минимальный размер боковой панели `150px`, а на больших экранах позволяем ей растягиваться до `25%`. Боковая панель всегда будет занимать `25%` горизонтального пространства своего родителя, пока эти `25%` не станут меньше `150px`.
+
+Добавьте это в качестве значения grid-template-columns: `minmax(150px, 25%) 1fr`. Элемент в первом столбце (боковой панели в данном случае) получает `minmax` из `150px` и `25%`, а второй элемент (здесь это раздел `main`) занимает остальную часть пространства в виде единого `1fr`.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. Стопка блинов: `grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+В отличие от разрезанного блина, в этом примере дочерние элементы не переносятся при изменении размера экрана. Этот макет, обычно называемый [липким нижним колонтитулом](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers), часто используется как для веб-сайтов, так и для приложений, в мобильных приложениях (нижний колонтитул обычно является панелью инструментов) и веб-сайтах (одностраничные приложения часто используют этот глобальный макет).
+
+Добавление к компоненту `display: grid` даст вам сетку с одним столбцом, однако высота основной области будет равна высоте содержимого с нижним колонтитулом под ней.
+
+Чтобы колонтитул прилипал к низу, добавьте:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+Это заставляет содержимое верхнего и нижнего колонтитула автоматически принимать размер дочерних элементов и применяет оставшееся пространство (`1fr`) к основной области, в то время как строка масштабом `auto` будет принимать размер минимального содержимого своих дочерних элементов, так что когда контент будет увеличиваться, для корректировки вместе с ним будет увеличиваться и сама строка.
+
+## 05. Классический макет Святого Грааля: `grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+В классическом макете святого Грааля есть верхний колонтитул, нижний колонтитул, левая боковая панель, правая боковая панель и основной контент. Он похож на предыдущий макет, но теперь в нем есть боковые панели!
+
+Чтобы описать всю эту сетку с помощью одной строки кода, используйте свойство `grid-template`. Оно позволяет одновременно задавать и строки, и столбцы.
+
+Пара свойств-значений выглядит так: `grid-template: auto 1fr auto / auto 1fr auto`. Косая черта между первым и вторым списками, разделенными пробелами, — это разрыв между строками и столбцами.
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+Как и в последнем примере, где у верхнего и нижнего колонтитулов был контент с автоматическим размером, здесь левая и правая боковые панели автоматически масштабируются в зависимости от внутреннего размера своих дочерних элементов. Однако на этот раз это горизонтальный размер (ширина), а не вертикальный (высота).
+
+## 06. 12-интервальная сетка: `grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+Далее по списку у нас еще один классический пример: сетка из 12 интервалов. Вы можете быстро описывать сетки в CSS с помощью функции `repeat()`. Использование `repeat(12, 1fr);` для столбцов шаблона сетки дает вам 12 столбцов по `1fr`.
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+Теперь у вас есть сетка из 12 столбцов, и мы можем разместить в ней наши дочерние элементы. Один из способов это сделать — разместить их с помощью линий сетки. Например, `grid-column: 1 / 13` займет все пространство от первой линии до последней (13-й) и растянется на 12 столбцов. `grid-column: 1 / 5;` охватит первые четыре.
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+Другой способ это описать — использовать ключевое слово `span`. С помощью `span` вы устанавливаете начальную линию, а затем — число столбцов, которое нужно захватить от этой начальной точки. В этом случае `grid-column: 1 / span 12` будет эквивалентно `grid-column: 1 / 13`, а `grid-column: 2 / span 6` будет эквивалентно `grid-column: 2 / 8` .
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+В седьмом примере мы объединим некоторые концепции, о которых вы уже узнали, чтобы создать адаптивный макет с гибкими автоматически позиционируемыми дочерними элементами. Будет круто. Ключевые термины, которые следует запомнить, — это `repeat`, `auto-(fit|fill)` и `minmax()'` — вы их помните по аббревиатуре «RAM».
+
+Все вместе это выглядит так:
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+Вы снова используете repeat, но на этот раз с применением `auto-fit` вместо явного числового значения. Это позволяет автоматически позиционировать дочерние элементы. Потомки также имеют базовое минимальное значение `150px` с максимальным значением `1fr`, то есть на небольших экранах они будут занимать полную ширину `1fr`, и по мере достижения `150px` в ширину они начнут выстраиваться на одной и той же линии.
+
+При `auto-fit` блоки будут растягиваться, если их горизонтальный размер превышает 150 пикселей, чтобы заполнить все оставшееся пространство. Однако, если изменить его на `auto-fill`, они не будут растягиваться при превышении своего базового размера в функции minmax:
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. Линейка: `justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+Основной момент, который нужно продемонстрировать в следующем макете, — это `justify-content: space-between`, который помещает первый и последний дочерние элементы по краям ограничивающего их блока, а оставшееся пространство равномерно распределяется между элементами. В примере карточки помещаются в режим отображения Flexbox с направлением, заданным по столбцу с использованием `flex-direction: column`.
+
+Это помещает заголовок, описание и блок изображения в вертикальный столбец внутри родительской карточки. Затем применение `justify-content: space-between` привязывает первый (заголовок) и последний (блок изображения) элементы к краям флексбокса, а описательный текст между ними размещается с равным интервалом для каждой крайней точки.
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. Захватываем мой стиль: `clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+Здесь мы познакомимся с некоторыми методами с [поддержкой в меньшем количестве браузеров](https://caniuse.com/#feat=css-math-functions), при этом используем впечатляющие возможности для реализации макетов и адаптивного дизайна пользовательского интерфейса. В этой демонстрации вы устанавливаете ширину с помощью clamp следующим образом: `width: clamp(<min>, <actual>, <max>)`.
+
+Это устанавливает абсолютный минимальный и максимальный размер, а также фактический размер. Со значениями это выглядит так:
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+Минимальный размер здесь составляет `23ch` или 23 символа, а максимальный — `46ch`, 46 символов. [Единицы ширины символа](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) основаны на размере шрифта элемента (в частности, на ширине знака `0`). «Фактический» размер составляет 50%, что составляет 50% ширины родительского элемента.
+
+Здесь функция `clamp()` позволяет этому элементу сохранять ширину 50% *до тех пор, пока* 50% не станет больше, чем `46ch` (в более широких областях просмотра), или меньше, чем `23ch` (в меньших областях просмотра). Видно, что по мере того, как я растягиваю и сжимаю родительский элемент, ширина карточки увеличивается до максимальной точки и уменьшается до минимума. Затем она остается в центре родительского элемента, поскольку мы применили дополнительные свойства для ее центрирования. Это обеспечивает более разборчивые макеты, поскольку текст не будет слишком широким (более `46ch`) или слишком сжатым и узким (менее `23ch`).
+
+Также это прекрасный способ реализовать адаптивную типографику. Например, вы можете написать: `font-size: clamp(1.5rem, 20vw, 3rem)`. В этом случае размер шрифта заголовка всегда будет оставаться в пределах от `1.5rem` до `3rem`, но будет увеличиваться и уменьшаться в зависимости от фактического значения `20vw`, чтобы соответствовать ширине области просмотра.
+
+Это замечательный метод для обеспечения удобочитаемости с минимальным и максимальным значением размера, но помните, что он поддерживается не во всех современных браузерах, поэтому убедитесь, что у вас есть запасные варианты, и проведите тестирование.
+
+## 10. Сохраняем масштаб: `aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+И, наконец, последний инструмент компоновки — наиболее экспериментальный. Недавно он был представлен в Chrome Canary версии Chromium 84, плюс Firefox прилагает активные усилия для его реализации, но в настоящее время его нет ни в одной стабильной версии браузера.
+
+И все же я хочу упомянуть о нем, потому что эта проблема встречается очень часто. Речь идет всего лишь о поддержании соотношения сторон изображения.
+
+Благодаря `aspect-ratio`, когда я изменяю размер карточки, зеленый визуальный блок поддерживает соотношение сторон 16 x 9. Мы соблюдаем соотношение сторон с помощью `aspect-ratio: 16 / 9`.
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+Чтобы сохранить соотношение сторон 16 x 9, не используя это свойство, вам нужно будет использовать [прием с `padding-top`](https://css-tricks.com/aspect-ratio-boxes/) и задать padding равным `56.25%`, чтобы установить отношение высоты к ширине. Скоро для этого у нас появится свойство, чтобы не приходилось использовать трюки и вычислять проценты. Вы можете сделать квадрат с соотношением `1 / 1` отношение, прямоугольник `2 / 1` и вообще что угодно для масштабирования изображения с заданным соотношением размеров.
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+Хотя эта функция все еще находится на стадии разработки, о ней стоит знать, поскольку она решает массу трудностей при разработке, с которыми я и сама сталкивалась не раз, особенно когда речь идет о видео и блоках iframe.
+
+## Заключение
+
+Благодарим вас за то, что вы прошлись с нами по 10 эффективным строкам CSS. Чтобы узнать больше, посмотрите [полное видео](https://youtu.be/qm0IfG1GyZU) и попробуйте поработать с [демонстрациями](https://1linelayouts.glitch.me).
diff --git a/src/site/content/ru/blog/optimize-cls/index.md b/src/site/content/ru/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..72299a4ddb2
--- /dev/null
+++ b/src/site/content/ru/blog/optimize-cls/index.md
@@ -0,0 +1,279 @@
+---
+title: Оптимизация совокупного смещения макета
+subhead: Узнайте, как избежать внезапных смещений макета, чтобы улучшить взаимодействие с пользователем
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: Совокупное смещение макета (CLS)это показатель, который количественно определяет, как часто пользователи сталкиваются с внезапными смещения содержимого страницы. В этой статье мы рассмотрим, как оптимизировать распространенные причины плохих значений CLS, такие как изображения и плавающие фреймы без размеров, или динамический контент.
+alt: Смещение макета может внезапно подтолкнуть контент, который вы читаете или собираетесь щелкнуть дальше по странице, что приведет к ухудшению взаимодействия с пользователем. Резервирование места для динамического контента, вызывающего смещения макета, приводит к более приятному опыту использования страницы.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id = 'AQqFZ5t8uNc', startTime = '88 '%}
+
+«Я собирался щелкнуть по нему! Почему он сдвинулся? 😭»
+
+Смещение макета может отвлекать пользователей. Представьте, что вы начали читать статью, как вдруг элементы смещаются по странице, сбивая вас с толку и заставляя снова искать строчку, на который вы остановились. Такое очень часто встречается в Интернете, в том числе при чтении новостей или попытке нажать кнопки «Поиск» или «Добавить в корзину». Такие ситуации с визуальным смещением контента раздражают и расстраивают. Они часто возникают, когда видимые элементы смещаются из-за того, что другой элемент был внезапно добавлен на страницу или изменен в размерах.
+
+[CLS (Совокупное смещение макета)](/cls)[метрика Core Web Vitals](/vitals), которая измеряет нестабильность контента путем суммирования оценок смещения для каждого смещения макета (за исключением периода в 500 миллисекунд после ввода пользователя). Метрика оценивает, насколько видимый контент сместился в области просмотра, а также учитывает расстояние, на которое сдвинулись затронутые элементы.
+
+В этой статье мы рассмотрим, как оптимизировать распространенные причины смещений макета.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Хорошие значения CLS ниже 0,1, плохие значения больше 0,25 и все промежуточные значения требуют улучшения", width="384", height="96" %}
+</picture>
+
+Наиболее частые причины плохого показателя CLS:
+
+- изображения без размеров;
+- рекламные объявления, встраиваемые объекты и плавающие фреймы без размеров;
+- динамически добавляемый контент;
+- веб-шрифты, вызывающие побочные эффекты FOIT или FOUT;
+- действия, ожидающие ответа сети перед обновлением DOM.
+
+## Изображения без размеров 🌆
+
+**Резюме:** всегда включайте атрибуты `width` и `height` для изображений и видеоэлементов. В качестве альтернативы зарезервируйте необходимое пространство с помощью [CSS-свойства aspect-ratio](https://css-tricks.com/aspect-ratio-boxes/). Такой подход гарантирует, что браузер сможет выделить правильный объем места в документе во время загрузки изображения.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg", controls=true, loop=true, muted=true %} <figcaption> Изображения без указания высоты и ширины. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg", controls=true, loop=true, muted=true %} <figcaption> Изображения с указанной шириной и высотой. </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="Отчет Lighthouse, показывающий значения CLS до и после установки размеров для изображений", width="800", height="148" %} <figcaption> Lighthouse 6.0, влияние установки размеров для изображений на CLS. </figcaption></figure>
+
+### Предыстория
+
+На заре Интернета разработчики добавляли атрибуты `width` и `height` к своим тегам `<img>`, чтобы обеспечить достаточное пространство на странице до того, как браузер начнет загружать изображения. Это позволяло свести к минимуму пересчет положения элементов на странице и их перекомпоновку.
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+Вы можете заметить, что в примере выше атрибуты `width` и `height` не содержат единицы измерения. «Пиксельные» размеры обеспечивают резервирование области 640x360. Чтобы вписаться в это пространство, изображение будет растягиваться, независимо от своих истинных размеров.
+
+С появлением [адаптивного веб-дизайна](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) разработчики начали опускать атрибуты `width` и `height`, и вместо этого для изменения размера изображений стали использовать CSS:
+
+```css
+img {
+  width: 100%; /* or max-width: 100%; */
+  height: auto;
+}
+```
+
+Но у такого похода есть недостаток: место под изображение можно выделить только после того, как оно начнет загружаться и браузер сможет определить его размеры. Страница будет перерисовываться по мере загрузки и появления каждого изображения на экране. Часто случалось, что текст появлялся на экране внезапно. Это было не очень удобно для пользователя.
+
+Вот тут и появляется соотношение сторон. Соотношение сторон изображенияэто отношение его ширины к его высоте. Обычно оно выражается в виде двух чисел, разделенных двоеточием (например, 16:9 или 4:3). При соотношении сторон x:y изображение имеет ширину «x» единиц и высоту «y» единиц.
+
+Это означает, что если мы знаем один из линейных размеров, то другой можно определить. Для соотношения сторон 16:9:
+
+- если puppy.jpg имеет высоту 360 пикселей, то ширина изображения составит 360 x (16/9) = 640 пикселей;
+- если puppy.jpg имеет ширину 640 пикселей, то высота изображения составит 640 x (9/16) = 360 пикселей.
+
+Знание соотношения сторон позволяет браузеру рассчитать и зарезервировать достаточное пространство для высоты и соответствующей ширины изображения.
+
+### Современный способ
+
+Современные браузеры устанавливают соотношение сторон изображений по умолчанию на основе атрибутов ширины и высоты изображения, поэтому полезно задать их для предотвращения смещений макета. Благодаря CSS Working Group разработчики могут задать атрибуты `width` и `height` обычным способом:
+
+```html
+<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
+```
+
+… А таблицы стилей [UA stylesheets](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets) всех браузеров добавляют [соотношение сторон по умолчанию](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images) на основании существующих атрибутов `width` и `height`:
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+Здесь соотношение сторон вычисляется на основании атрибутов `width` и `height` до загрузки изображения. Эта информация предоставляется в самом начале расчета макета. Как только изображению задается определенная ширина (например, `width: 100%`), его высота вычисляется с помощью соотношения сторон.
+
+Совет. Если вам трудно представить соотношение сторон, воспользуйтесь удобным [калькулятором.](https://aspectratiocalculator.com/16-9.html)
+
+Вышеупомянутые изменения соотношения сторон изображения были реализованы в [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) и [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891) и будут добавлены в [WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari).
+
+Чтобы фантастически глубоко погрузиться в тему о соотношении сторон и адаптивных изображениях, прочитайте статью [«Загрузка страницы без подвисания с медиавыражением, проверяющим соотношение сторон»](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/).
+
+Если ваше изображение находится в контейнере, вы можете использовать CSS, чтобы изменить размер изображения до ширины этого контейнера. Устанавливаем `height: auto;`, чтобы высота изображения не была фиксированной (например, `360px`).
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**А как насчет адаптивных изображений?**
+
+При работе с [адаптивными изображениями](/serve-responsive-images) атрибут `srcset` определяет изображения, среди которых браузер будет выбирать подходящее, и размер каждого изображения. Чтобы обеспечить возможность установки атрибутов ширины и высоты `<img>`, каждое изображение должно использовать одинаковое соотношение сторон.
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="Puppy with balloons"
+/>
+```
+
+А как насчет метода [художественного направления](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction) ?
+
+Основная идея метода художественного направленияотображать разные изображения в зависимости от размеров экрана устройства, например, обрезанное изображение в узких окнах просмотра и полное изображение на настольных компьютерах.
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
+</picture>
+```
+
+Вероятно, что эти изображения могут иметь разное соотношение сторон, и браузеры всё еще оценивают, каким должно быть наиболее эффективное решение, в том числе следует ли указывать размеры во всех источниках. Пока общее решение не принято, перекомпоновка в этом случае всё ещё возможна.
+
+## Рекламные объявления, встраиваемые объекты и плавающие фреймы без размеров 📢😱
+
+### Рекламные объявления
+
+Рекламаодин из основных факторов, способствующих изменению макета в Интернете. Рекламные сети и веб-мастеры часто поддерживают динамические размеры объявлений. Размеры объявлений увеличивают эффективность/доход за счет более высоких показателей кликов и большего числа объявлений, участвующих в аукционе. К сожалению, это может привести к неоптимальному взаимодействию с пользователем из-за того, что реклама выталкивает видимый контент, который вы просматриваете, вниз по странице.
+
+В течение жизненного цикла объявления многие моменты могут вызвать смещение макета:
+
+- когда сайт вставляет рекламный контейнер в DOM;
+- когда сайт изменяет размер рекламного контейнера с помощью собственного кода;
+- когда библиотека рекламных тегов загружается (и меняет размер рекламного контейнера);
+- когда объявление заполняет контейнер (и меняет размер, если окончательное объявление имеет другой размер).
+
+Хорошая новостьсайты могут применять передовые методы, чтобы уменьшить сдвиг. Смещение в макете можно уменьшить за счет следующих действий:
+
+- Статически зарезервировать место для рекламного блока.
+    - Другими словами, задайте стиль для элемента до загрузки библиотеки тегов объявлений.
+    - При размещении рекламы в потоке контента убедитесь, что сдвиги устранены, зарезервировав место под размер рекламного блока. Эти объявления *не должны* вызывать смещения макета, если загружаются за пределами области просмотра.
+- Будьте осторожны при размещении нелипких баннеров в верхней части области просмотра.
+    - В приведенном ниже примере рекомендуется переместить рекламу под логотип world vision и зарезервировать достаточное место для этого блока.
+- Если под рекламный блок на странице зарезервировано пространство, но само объявление не появилось, не стоит сворачивать это пространство, лучше показать там заполнитель, чтобы не сдвигать контент.
+- Устраните смещения, зарезервировав максимально возможный размер для рекламного блока.
+    - Это работает, но может остаться пустое место, если блок заполнит реклама меньшего размера.
+- Выберите наиболее вероятный размер рекламного блока на основании исторических данных.
+
+На некоторых сайтах уменьшить смещение макета можно за счет первоначального сворачивания места под рекламный блок, если вероятность его заполнения невелика. Не существует простого способа каждый раз выбирать точный размер, если только вы сами не контролируете показ рекламы.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption> Объявления без достаточного зарезервированного места. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %} <figcaption> Объявления с достаточным зарезервированным местом. </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="Отчет Lighthouse, показывающий значения CLS до и после резервирования места для рекламных баннеров", width="800", height="148" %} <figcaption> Lighthouse 6.0, влияние резервирования места для рекламного баннера на CLS </figcaption></figure>
+
+#### Статическое резервирование места для рекламного блока
+
+Статически задавайте стиль для DOM-элементов блока с теми же размерами, которые передаются в вашу библиотеку тегов. Это поможет избежать смещения макета при загрузке библиотеки. Если этого не сделать, библиотека может изменить размер элемента блока после верстки страницы.
+
+Также учитывайте размеры объявлений меньшего размера. Если подается объявление меньшего размера, веб-мастер может сверстать (больший) контейнер, чтобы избежать смещения макета. У такого подхода есть недостатокувеличивается количество пустого пространства, поэтому попытайтесь найти компромиссное решение.
+
+#### Избегайте размещения рекламы в верхней части области просмотра
+
+Объявления в верхней части области просмотра могут вызывать большее смещение макета, чем объявления в середине. Это связано с тем, что под объявлениями в верхней части располагается больше контента, а значит, больше элементов перемещается, когда объявление вызывает сдвиг макета. И наоборот, объявления, расположенные в середине области просмотра, могут смещать не так много элементов, так как контент над ними с меньшей вероятностью будет смещаться.
+
+### Встраиваемые объекты и плавающие фреймы
+
+Встраиваемые виджеты позволяют встраивать переносимый веб-контент на вашу страницу (например, видео с YouTube, карты из Google Карты, публикации в социальных сетях и т. д.). Такие встраиваемые объекты могут иметь несколько форм:
+
+- резервный HTML-код и тег JavaScript, преобразующий резервный вариант в элегантный встраиваемый объект;
+- встроенный фрагмент кода HTML;
+- встроенный плавающий фрейм.
+
+В случае встраиваемых объектов размер встраиваемого контента, как правило, не известен заранее (например, публикация в социальных сетяхбудет ли там встроенное изображение, видео или текст в несколько строк). В результате платформы, предлагающие встраивание, не всегда резервируют достаточно места для встраиваемых объектов, что может привести к смещению макета при их окончательной загрузке.
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %} <figcaption> Встраиваемые объекты без зарезервированного места. </figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %} <figcaption> Встраиваемые объекты с зарезервированным местом. </figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="Отчет Lighthouse, показывающий значения CLS до и после резервирования места для встраиваемого объекта", width="800", height="148" %} <figcaption> Lighthouse 6.0, влияние резервирования места для встраиваемого объекта на CLS </figcaption></figure>
+
+Чтобы обойти эти проблемы, вы можете свести к минимуму CLS, предварительно вычислив размер достаточного места для встраиваемого объекта с заполнителем или резервным вариантом. Вот один из рабочих процессов, который вы можете использовать для встраиваемых объектов:
+
+- Определите окончательную высоту встраиваемого объекта, проверив его с помощью инструментов разработчика в браузере.
+- После загрузки встраиваемого объекта размер плавающего фрейма изменится, и соответственно изменится его содержимое.
+
+Учитывайте размеры, и предусмотрите заполнитель на месте встраиваемого объекта. Возможно, потребуется учесть тонкие различия в размерах объявлений/заполнителей для разных форм-факторов с помощью медиа-запросов.
+
+### Динамический контент 📐
+
+**Резюме:** Избегайте вставлять контент поверх существующего, кроме случаев, когда это требуется в ответ на взаимодействие с пользователем. Это гарантирует, что любые изменения макета будут ожидаемыми.
+
+Вы наверняка сталкивались со смещениями макета из-за пользовательского интерфейса, который появлялся вверху или внизу области просмотра, когда вы пытались загрузить сайт. Как и в случае с рекламой, это часто происходит из-за баннеров и форм, смещающих остальное содержимое страницы:
+
+- «Подпишитесь на наши новости!» (Эй, сбавьте обороты! Мы же только что встретились!)
+
+- «Связанный контент».
+
+- «Установите наше приложение [iOS/Android]».
+
+- «Мы всё ещё принимаем заказы».
+
+- «Уведомление о GDPR».
+
+    <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %} <figcaption> Динамический контент без зарезервированного места. </figcaption></figure>
+
+Если вам нужно отобразить эти типы возможностей пользовательского интерфейса, заранее зарезервируйте для этого достаточное пространство в области просмотра (например, с помощью заполнителя или скелета пользовательского интерфейса), чтобы при загрузке они не вызвали неожиданного смещения содержимого страницы.
+
+В некоторых случаях динамическое добавление контента является важной частью взаимодействия с пользователем. Например, при загрузке дополнительных продуктов в список элементов или при обновлении содержимого прямой трансляции. В таких случаях есть несколько способов избежать неожиданного смещения макета:
+
+- Замените старый контент новым контентом в контейнере фиксированного размера или используйте карусель и удалите старый контент после перехода. Не забудьте отключить любые ссылки и элементы управления до завершения перехода, чтобы предотвратить случайные щелчки или касания при поступлении нового контента.
+- Попросите пользователя инициировать загрузку нового контента, чтобы он не был удивлен сдвигом (например, с помощью кнопки «Загрузить больше» или «Обновить»). Рекомендуется предварительно загрузить контент до взаимодействия с пользователем, чтобы он отображался немедленно. Напоминаем, что смещения макета, которые происходят в течение 500 мс после пользовательского ввода, не учитываются в CLS.
+- Незаметно для пользователя загружайте контент за пределами области просмотра, а затем выводите пользователю уведомление о доступности контента (например, с помощью кнопки «Прокрутить вверх»).
+
+<figure>{% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="Примеры динамической загрузки контента без неожиданного смещения макета из сайта Twitter и сайта Chloé", width="800", height="458" %} <figcaption> Примеры загрузки динамического контента без непредвиденных смещений макета. Слева: загрузка содержимого прямой трансляции в Twitter. Справа: пример «Загрузить больше» на сайте Chloé. Узнайте, как команда YNAP <a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">оптимизировала CLS при загрузке большего количества контента</a>.</figcaption></figure>
+
+### Веб-шрифты, вызывающие побочные эффекты FOIT или FOUT
+
+Загрузка и рендеринг веб-шрифтов может вызвать смещение макета двумя способами:
+
+- резервный шрифт заменяется новым шрифтом (FOUTмигание нестилизованного текста);
+- «невидимый» текст отображается до тех пор, пока не будет отображен новый шрифт (FOITмигание невидимого текста).
+
+Эти побочные эффекты могут помочь минимизировать следующие инструменты:
+
+- свойство <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code> позволяет изменять поведение визуализации пользовательских шрифтов, оно имеет пять значений <code>auto</code>, <code>swap</code>, <code>block</code>, <code>fallback</code> и <code>optional</code>. К сожалению, все эти значения (кроме [optional](http://crrev.com/749080)) могут вызвать перекомпоновку одним из вышеуказанных способов.
+- [Font Loading API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) (API загрузки шрифтов) может сократить время, необходимое для получения необходимых шрифтов.
+
+Что касается Chrome 83, я также могу порекомендовать следующее:
+
+- использовать тег `<link rel=preload>` для загрузки основных веб-шрифтов: у предварительно загруженного шрифта будет больше шансов попасть в первую отрисовку контента, и в этом случае смещения макета не происходит;
+- объединить `<link rel=preload>` и `font-display: optional`.
+
+Более подробную информацию см. в статье [«Предотвращение смещения макета и побочных эффектов FOIT (Мигание невидимого текста) путем предварительной загрузки дополнительных шрифтов»](/preload-optional-fonts/).
+
+### Анимации 🏃‍♀️
+
+**Резюме:** Используйте свойство `transform` вместо анимации свойств, которая запускает смещение макета.
+
+При изменении значений свойств CSS может потребоваться реакция браузера на эти изменения. Ряд значений запускает повторную компоновку, отрисовку и организацию слоев, например, `box-shadow` и `box-sizing`. Некоторые свойства CSS можно изменить менее ресурсоёмким способом.
+
+Дополнительные сведения о том, какие свойства CSS запускают смещение макета, см. в таблице [«Триггеры CSS»](https://csstriggers.com/) и статье [«Высокопроизводительная анимация»](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/).
+
+### Инструменты разработчика 🔧
+
+Я рад сообщить, что существует ряд инструментов для измерения и отладки CLS (Совокупного смещения макета)
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) [6.0](https://github.com/GoogleChrome/lighthouse/releases) и более поздние версии включают поддержку измерения CLS в лабораторных условиях. В этом релизе также будут выделены узлы, вызывающие наибольшее смещение макета.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="Lighthouse 6.0 включает поддержку измерения CLS в разделе метрик", width="800", height="309" %}
+
+Панель [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) в DevTools показывает смещения макета в разделе **Experience** в Chrome 84. Представление **Summary** для `Layout Shift` включает совокупную оценку сдвига макета, а также прямоугольное наложение, показывающее затронутые области.
+
+<figure>{% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="Записи Layout Shift отображаются на панели производительности Chrome DevTools при раскрытии раздела Experience", width="800", height="438" %}<figcaption> После записи новой трассировки на панели Performance в разделе <b>Experience</b> появляется красная полоса, отображающая запись <code>Layout Shift</code> Щелкнув по этой записи, вы сможете просмотреть затронутые элементы (например, увидеть смещенные записи из/в).</figcaption></figure>
+
+Измерить реальные значений CLS, агрегированные на уровне источника, также можно с помощью отчета [Chrome User Experience Report](https://developer.chrome.com/blog/chrome-ux-report-bigquery/). Данные CrUX CLS доступны через BigQuery, а также доступен [образец запроса](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql) для проверки производительности CLS.
+
+Вот и всё. Надеюсь, приведенная информация поможет сделать ваши страницы чуть менее увёртливыми :)
+
+*Выражаем благодарность Филиппу Уолтону, Кенджи Бахе, Уоррену Мареске, Энни Салливан, Стиву Кобесу и Джильберто Кокки за их полезные обзоры.*
diff --git a/src/site/content/ru/blog/optimize-fid/index.md b/src/site/content/ru/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..53c43bf96e0
--- /dev/null
+++ b/src/site/content/ru/blog/optimize-fid/index.md
@@ -0,0 +1,173 @@
+---
+title: Оптимизация времени ожидания до первого взаимодействия с контентом
+subhead: Как быстрее реагировать на взаимодействие с пользователем.
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: Рука, касающаяся экрана смартфона
+description: Метрика FID (Время ожидания до первого взаимодействия с контентом) измеряет время с момента первого взаимодействия пользователя с сайтом до момента, когда браузер фактически способен ответить на это взаимодействие. Узнайте, как оптимизировать FID путем минимизации неиспользуемого JavaScript, разбиения длительных задач и улучшения готовности к взаимодействию.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>Я щелкнул, но ничего не произошло! Почему я не могу взаимодействовать с этой страницей? 😢</p>
+</blockquote>
+
+[FCP (Первая отрисовка контента)](/fcp/) и [LCP (Скорость загрузки основного контента)](/lcp/)это метрики, которые измеряют время, необходимое контенту для визуального отображения (отрисовки) на странице. Время отрисовки важно, но оно не отражает *отзывчивость при загрузке*, то есть то, как быстро страница реагирует на взаимодействие с пользователем.
+
+[FID (Время ожидания до первого взаимодействия с контентом)](/fid/) — это [метрика Core Web Vitals](/vitals/), которая фиксирует первое впечатление пользователя об интерактивности и быстродействии сайта. Она измеряет время от момента, когда пользователь впервые взаимодействует со страницей, до момента, когда браузер действительно может ответить на это взаимодействие. FID — [полевая метрика](/user-centric-performance-metrics/#in-the-field), которую нельзя смоделировать в лабораторных условиях. Для измерения задержки ответа требуется **взаимодействие с реальным пользователем**.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Хорошие значения fid - 2,5 секунды, низкие значения больше 4,0 секунд, и все, что находится между ними, требует улучшения", width="384", height="96" %}
+  </picture>
+
+Чтобы помочь предсказать FID в [лабораторных условиях](/how-to-measure-speed/#lab-data-vs-field-data), мы рекомендуем использовать метрику [TBT (Общее время блокировки)](/tbt/). Хотя эти метрики не идентичны, но улучшение TBT обычно приводит к улучшению FID.
+
+Основная причина плохого значения FID**«тяжелое» выполнение JavaScript**. Оптимизация анализа, компиляции и выполнения JavaScript на странице напрямую снижает FID.
+
+## «Тяжелое» выполнение JavaScript
+
+Браузер не может реагировать на большую часть пользовательского ввода, пока он выполняет JavaScript в основном потоке. Другими словами, браузер не может реагировать на действия пользователя, пока основной поток занят. Чтобы оптимизировать выполнение JavaScript:
+
+- [разделите длительные задачи](#long-tasks);
+- [оптимизируйте свою страницу, чтобы обеспечить готовность к взаимодействию](#optimize-interaction-readiness);
+- [используйте веб-воркер](#use-a-web-worker);
+- [уменьшите время выполнения JavaScript](#reduce-javascript-execution).
+
+## Разделение длительных задач {: #long-tasks}
+
+Если вы уже пытались уменьшить объем JavaScript-кода, загружаемого на одной странице, попробуйте разделить долго выполняющийся код на **более мелкие асинхронные задачи**.
+
+[**Длительные задачи**](/custom-metrics/#long-tasks-api) — это периоды выполнения JavaScript, когда пользователи могут заметить, что пользовательский интерфейс не отвечает. Любой фрагмент кода, который блокирует основной поток на 50 мс или более, можно рассматривать как длительную задачу. Длительные задачи — признак потенциального раздувания JavaScript-кода (загрузка и выполнение большего количества задач, чем может потребоваться пользователю прямо сейчас). Разделение длительных задач может уменьшить задержку ввода на сайте.
+
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Длительные задачи в Chrome DevTools", width="800", height="132" %}
+  <figcaption> Chrome DevTools <a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">визуализирует длительные задачи</a> на панели производительности</figcaption>
+</figure>
+
+Значение FID должно заметно улучшиться при внедрении передовых практик, таких как разделение кода и разделение длительных задач. Хотя TBT — это не полевая метрика, но с ее помощью удобно отслеживать ход оптимизации метрик TTI (Время до интерактивности) и FID.
+
+{% Aside %} Для получения дополнительной информации прочтите статью [«Увеличивают ли длительные задачи JavaScript время до интерактивности (TTI)?»](/long-tasks-devtools/). {% endAside %}
+
+## Оптимизация страницы для готовности к взаимодействию
+
+Существует ряд распространенных причин плохих оценок FID и TBT в веб-приложениях, которые в значительной степени зависят от JavaScript:
+
+### Выполнение основного скрипта может задержать готовность к взаимодействию
+
+- Раздутие размера JavaScript-кода, большое время выполнения и неэффективное разбиение на фрагменты могут замедлить реакцию страницы на ввод пользователя и повлиять на FID, TBT и TTI. Постепенная загрузка кода и функций поможет распределить эту работу и повысить готовность к взаимодействию.
+- Приложения с рендерингом на стороне сервера могут выглядеть так, как будто они быстро рисуют пиксели на экране, но помните о том, что из-за выполнения большого количества скриптов взаимодействие с пользователем будет заблокировано (например, во время регидратации для подключения слушателей событий). Это может занять несколько сотен миллисекунд, или даже секунд, если используется разбиение кода на основе маршрута. Подумайте о том, чтобы перенести больше логики на сторону сервера или генерировать больше статического контента на этапе сборки.
+
+Ниже приведены оценки TBT до и после оптимизации загрузки основных скриптов для приложения. После того как с критического этапа рендеринга была убрана ресурсоёмкая загрузка (и выполнение) скрипта для непервостепенного компонента, пользователи смогли гораздо быстрее взаимодействовать со страницей.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="Улучшение показателя TBT в Lighthouse после оптимизации основного скрипта", width="800", height="148" %}
+
+### Выборка данных может повлиять на многие аспекты готовности к взаимодействию
+
+- Ожидание большого числа каскадных выборок (например, JavaScript и выборки данных для компонентов) может повлиять на задержку взаимодействия. Стремитесь свести к минимуму зависимость от каскадных выборок данных.
+- Большие локальные хранилища данных могут увеличить время синтаксического анализа HTML и повлиять на показатели отрисовки и взаимодействия. Стремитесь минимизировать объем данных, которые необходимо обрабатывать на стороне клиента.
+
+### Выполнение сторонних скриптов также может привести к задержке взаимодействия
+
+- Многие сайты включают сторонние теги и средства аналитики, которые могут загружать сеть и периодически блокировать основной поток, что влияет на задержку взаимодействия. Подумайте о загрузке стороннего кода по запросу (например, не загружайте объявления в нижней части страницы, пока они не будут прокручены ближе к области просмотра).
+- В некоторых случаях сторонние скрипты могут опережать основные скрипты по приоритету и пропускной способности в главном потоке, что также замедляет скорость готовности страницы к взаимодействию. Старайтесь в первую очередь загружать то, что, по вашему мнению, представляет наибольшую ценность для пользователей.
+
+## Использование веб-воркеров
+
+Заблокированный основной поток — одна из главных причин задержки ввода. [Веб-воркеры](https://developer.mozilla.org/docs/Web/API/Worker) позволяют запускать JavaScript в фоновом потоке. Перенос операций, не связанных с пользовательским интерфейсом, в отдельный рабочий поток может сократить время блокировки основного потока и, следовательно, улучшить FID.
+
+Подумайте о применении следующих библиотек, чтобы упростить использование веб-воркеров на сайте:
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink): вспомогательная библиотека, которая абстрагирует `postMessage` и упрощает работу с этим API.
+- [Workway](https://github.com/WebReflection/workway): универсальный экспортер веб-воркеров.
+- [Workerize](https://github.com/developit/workerize): служит для переноса модуля в веб-воркер.
+
+{% Aside %} Чтобы узнать больше о том, как веб-воркеры могут выполнять код вне основного потока, см. статью [«Использование веб-воркеров для запуска JavaScript вне основного потока браузера»](/off-main-thread/). {% endAside %}
+
+### Уменьшение времени выполнения JavaScript {: #reduce-javascript-execution}
+
+Ограничение количества JavaScript-кода на странице сокращает время, которое браузер должен тратить на выполнение этого кода. Это ускоряет реакцию браузера на любые действия пользователя.
+
+Чтобы уменьшить количество JavaScript, выполняемого на странице:
+
+- отложите загрузку неиспользуемого JavaScript;
+- минимизируйте неиспользуемые полифиллы.
+
+#### Отсрочка загрузки неиспользуемого JavaScript
+
+По умолчанию весь JavaScript блокирует рендеринг. Когда браузер встречает тег скрипта, который ссылается на внешний файл JavaScript, он должен приостановить свои действия и загрузить, проанализировать, скомпилировать и выполнить этот JavaScript. Поэтому вам следует загружать только тот код, который необходим для страницы или ответа на ввод пользователя.
+
+На вкладке [Coverage](https://developer.chrome.com/docs/devtools/coverage/) в Chrome DevTools можно узнать, сколько неиспользуемого кода JavaScript находится на вашей странице.
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="Вкладка Coverage.", width="800", height="559" %}
+
+Чтобы сократить неиспользуемый JavaScript:
+
+- разделите пакет на несколько частей;
+- отложите любой некритический JavaScript, включая сторонние скрипты, используя атрибут `async` или `defer`.
+
+**Разделение кода** — это концепция разделения одного большого пакета JavaScript на более мелкие фрагменты кода, которые загружаются по условию (отложенная загрузка). [Большинство новых браузеров поддерживают синтаксис динамического импорта](https://caniuse.com/#feat=es6-module-dynamic-import), который позволяет получать модуль по запросу:
+
+```js
+import('module.js').then((module) => {
+  // Do something with the module.
+});
+```
+
+Динамический импорт JavaScript при определенных взаимодействиях с пользователем (например, при изменении маршрута или отображении модального окна) гарантирует, что код, не используемый для начальной загрузки страницы, будет извлекаться только при необходимости.
+
+Кроме того, что синтаксис динамического импорта поддерживается большинством браузеров, его также можно использоваться во многих различных системах сборки.
+
+- Если вы применяете [webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82) или [Parcel](https://parceljs.org/code_splitting.html) в качестве сборщика модулей, воспользуйтесь их поддержкой динамического импорта.
+- Клиентские фреймворки, такие как [React](https://reactjs.org/docs/code-splitting.html#reactlazy), [Angular](https://angular.io/guide/lazy-loading-ngmodules) и [Vue,](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) предоставляют абстракции, упрощающие отложенную загрузку на уровне компонентов.
+
+{% Aside %} Ознакомьтесь со статьей [«Сокращение полезной нагрузки JavaScript с помощью разделения кода»](/reduce-javascript-payloads-with-code-splitting/), чтобы узнать больше о разделении кода. {% endAside %}
+
+Помимо разделения кода, всегда используйте атрибуты [async или defer](https://javascript.info/script-async-defer) для скриптов, которые не нужны для критического этапа рендеринга или контента, видимого без прокрутки.
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+Если нет особой причины не делать этого, все сторонние скрипты по умолчанию следует загружать с атрибутами `defer` либо `async`.
+
+#### Минимизация неиспользуемых полифиллов
+
+Если вы пишете свой код с использованием современного синтаксиса JavaScript и ссылаетесь на API современных браузеров, вам потребуется транспилировать код и включить полифиллы, чтобы код работал и в старых браузерах.
+
+Одна из основных проблем производительности при включении полифилов и использовании транспилированного кода на сайте заключается в том, что новые браузеры не должны загружать код, если он им не нужен. Чтобы уменьшить размер JavaScript в приложении, максимально сократите количество неиспользуемых полифиллов и ограничьте их применение средами, в которых они действительно необходимы.
+
+Чтобы оптимизировать использование полифиллов на сайте:
+
+- Если в качестве транспилятора вы применяете [Babel](https://babeljs.io/docs/en/index.html), используйте модуль [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env), чтобы включить только полифиллы, необходимые для браузеров, на которые вы планируете настроить таргетинг. Для Babel 7.9 включите опцию [`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes), чтобы ещё больше сократить количество ненужных полифиллов.
+
+- Используйте шаблон module/nomodule для доставки двух отдельных пакетов (модуль `@babel/preset-env` также поддерживает эту функцию через [`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)).
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    Многие новые функции ECMAScript, скомпилированные с помощью Babel, уже поддерживаются в средах, поддерживающих модули JavaScript. Таким образом, теперь проще отследить, чтобы транспилированный код применялся только для браузеров, которые действительно в нём нуждаются.
+
+{% Aside %} В статье [«Современным браузерам — современный код для ускорения загрузки страниц»](/serve-modern-code-to-modern-browsers/) более подробно рассматривается эта тема. {% endAside %}
+
+## Инструменты разработчика
+
+Для измерения и отладки FID доступен ряд инструментов:
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) не поддерживает FID, поскольку это полевой показатель. Однако метрику [TBT (Общее время блокировки)](/tbt/) можно использовать в качестве косвенного показателя. Оптимизация, улучшающая TBT, должна также улучшить FID в полевых условиях.
+
+    {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="Lighthouse 6.0.", width="800", height="309" %}
+
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) предоставляет реальные значения FID, агрегированные на уровне источника.
+
+*Выражаем благодарность Филиппу Уолтону, Кейси Баскесу, Илье Григорику и Энни Салливан за их обзоры.*
diff --git a/src/site/content/ru/blog/optimize-lcp/index.md b/src/site/content/ru/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..39d0cc1ae08
--- /dev/null
+++ b/src/site/content/ru/blog/optimize-lcp/index.md
@@ -0,0 +1,447 @@
+---
+title: Оптимизация скорости загрузки основного контента
+subhead: Как ускорить рендеринг основного контента.
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2020-08-20
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: Оптимизировать баннер LCP
+description: Метрика LCP (Скорость загрузки основного контента) может использоваться, чтобы определить момент завершения рендеринга основного содержимого страницы. Узнайте, как оптимизировать LCP, улучшив медленный отклик сервера, время загрузки ресурсов и рендеринг на стороне клиента.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id = 'AQqFZ5t8uNc', startTime = '1073'%}
+
+<blockquote>
+  <p>Я не вижу полезного контента! Почему так долго загружается? 😖</p>
+</blockquote>
+
+Одним из факторов, ухудшающих пользовательский опыт, является длительное время рендеринга контента. Метрика [FCP (Первая отрисовка контента)](/fcp) измеряет, сколько времени требуется для визуализации исходного содержимого DOM, но не фиксирует, сколько времени потребовалось для визуализации самого большого (обычно более значимого) содержимого на странице.
+
+[LCP (Скорость загрузки основного контента)](/lcp)это метрика [Core Web Vitals](/vitals/), измеряющая время, за которое  становится видимым самый большой элемент контента в области просмотра. Ее можно использовать, чтобы определить, когда основное содержимое страницы завершило рендеринг на экране.
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="Хорошие значения LCP - 2,5 секунды, низкие значения больше 4,0 секунд, и все, что находится между ними, требует улучшения", width="384", height="96" %}
+  </picture>
+
+Наиболее частые причины плохого показателя LCP:
+
+- [медленное время ответа сервера;](#slow-servers)
+- [блокирующие рендеринг JavaScript и CSS;](#render-blocking-resources)
+- [медленное время загрузки ресурсов;](#slow-resource-load-times)
+- [клиентский рендеринг.](#client-side-rendering)
+
+## Медленное время ответа сервера {: #slow-servers}
+
+Чем дольше браузер получает контент с сервера, тем больше времени требуется для отображения чего-либо на экране. Более быстрое время отклика сервера напрямую улучшает каждую метрику загрузки страницы, включая LCP.
+
+Прежде всего, улучшите то, как и где ваш сервер обрабатывает контент. Используйте метрику [TTFB (Время до первого байта)](/ttfb/), чтобы измерить время ответа сервера. Есть несколько способов улучшить TTFB:
+
+- оптимизировать  сервер;
+- направлять пользователей в ближайшую CDN (географически распределённую сетевую инфраструктуру);
+- кешировать активы;
+- применять для HTML-страниц политику выборки cache-first;
+- устанавливать сторонние подключения на раннем этапе;
+- использовать подписанные обмены.
+
+### Оптимизация сервера
+
+Вы запускаете ресурсоёмкие запросы, на выполнение которых у вашего сервера уходит много времени? Или на стороне сервера происходят другие сложные операции, которые задерживают процесс возврата содержимого страницы? Анализ и повышение эффективности вашего серверного кода напрямую улучшит время, необходимое браузеру для получения данных.
+
+Вместо того чтобы сразу же обслуживать статическую страницу по запросу браузера, многим серверным веб-фреймворкам необходимо создавать веб-страницу динамически. Другими словами, вместо отправки готового HTML-файла по запросу браузера, фреймворкам необходимо запускать логику для создания страницы. Это может быть связано с ожиданием результатов запроса к базе данных или даже с тем, что компоненты должны быть сгенерированы с разметкой с помощью платформы пользовательского интерфейса (например, [React](https://reactjs.org/docs/react-dom-server.html)). Многие веб-платформы, работающие на сервере, содержат рекомендации по производительности, которые можно использовать для ускорения этого процесса.
+
+{% Aside %} Дополнительные советы см. в статье [«Исправление перегруженного сервера»](/overloaded-server/). {% endAside %}
+
+### Направление пользователей в ближайшую CDN
+
+Сеть доставки контента (CDN)это географически распределенная сетевая инфраструктура. Если контент на вашей веб-странице размещается на одном сервере, то веб-сайт будет загружаться медленнее для географически удаленных пользователей,  потому что запросы их браузера должны буквально путешествовать по всему миру. Рассмотрите возможность использования CDN, чтобы вашим пользователям никогда не приходилось ждать выполнения сетевых запросов к удаленным серверам.
+
+### Кеширование активов
+
+Если ваш HTML статичен и его не нужно изменять при каждом запросе, кеширование может предотвратить его ненужное воссоздание. Сохраняя копию сгенерированного HTML на диске, кеширование на стороне сервера может уменьшить TTFB и минимизировать использование ресурсов.
+
+В зависимости от вашего пакета инструментальных средств существует множество различных способов применения кеширования на сервере:
+
+- настройте обратные прокси-серверы ([Varnish](https://varnish-cache.org/), [nginx](https://www.nginx.com/)) для обслуживания кешированного содержимого или работы в качестве кеш-сервера при установке перед сервером приложений;
+- настройте режим кеширования на облачном провайдере ([Firebase](https://firebase.google.com/docs/hosting/manage-cache), [AWS](https://aws.amazon.com/caching/), [Azure)](https://docs.microsoft.com/en-us/azure/architecture/best-practices/caching);
+- используйте CDN, которая переадресует запросы пользователя к географически ближайшему кеширующему серверу сети.
+
+### Применение для HTML-страниц политики выборки cache-first
+
+После установки [сервис-воркер](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) работает в фоновом режиме браузера и может перехватывать запросы с сервера. Этот уровень программного управления кешем позволяет кешировать часть или всё содержимое HTML-страницы и обновлять кеш только при изменении контента.
+
+На следующей диаграмме показано, как с помощью этого шаблона было сокращено распределение LCP на сайте:
+
+<figure>
+  {% Img
+    src="image/admin/uB0Sm56R88MRF16voQ1k.png",
+    alt="Распределения LCP до и после кэширования HTML",
+    width="800",
+    height="495"
+  %}
+  <figcaption>
+    Распределение LCP для страниц, загруженных с сервис-воркером и без него<a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a>
+  </figcaption>
+</figure>
+
+На диаграмме показано распределение LCP с одного сайта за последние 28 дней, сегментированное по состоянию сервис-воркера. Обратите внимание, насколько больше загрузок страниц имеют более быстрое значение LCP после того, как в сервис-воркере для HTML-страниц была введена политика выборки cache-first (синяя часть столбцов диаграммы).
+
+{% Aside %} Чтобы узнать больше о методах кеширования страниц HTML целиком или в виде отдельных блоков, ознакомьтесь с разделом «Сокращение времени загрузки [HTML с помощью сервис-воркеров»](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/) {% endAside %}
+
+### Установление сторонних подключений на раннем этапе
+
+Запросы сервера к сторонним источникам также могут повлиять на LCP, особенно если они необходимы для отображения важного содержимого на странице. Используйте `rel="preconnect"`, чтобы сообщить браузеру, что ваша страница намеревается установить соединение как можно скорее.
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+Кроме того, можно использовать `dns-prefetch` для более быстрого поиска DNS.
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+Хотя обе подсказки работают по-разному, рассмотрите возможность использования `dns-prefetch` в качестве запасного варианта для браузеров, которые не поддерживают `preconnect`.
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %} Подробнее см. в статье [«Установление сетевых подключений на раннем этапе для улучшения воспринимаемой скорости страницы»](/preconnect-and-dns-prefetch/) {% endAside %}
+
+### Использование подписанных обменов (SXG)
+
+[Подписанные обмены (SXG)](/signed-exchanges)это механизм доставки, который позволяет ускорить взаимодействие с пользователем, предоставляя контент в легко кешируемом формате. В частности, [Google Поиск](https://developers.google.com/search/docs/advanced/experience/signed-exchange) будет кешировать, а иногда и предварительно загружать файлы SXG. Для сайтов, которые получают большую часть своего трафика от Поиска Google, SXG могут стать важным инструментом улучшения LCP. Более подробно см. в статье [«Подписанные обмены»](/signed-exchanges).
+
+## Блокирующие рендеринг JavaScript и CSS {: #render-blocking-resources}
+
+Прежде чем браузер сможет отобразить какой-либо контент, ему необходимо преобразовать разметку HTML в дерево DOM. Анализатор HTML приостановит работу, если обнаружит какие-либо внешние таблицы стилей (`<link rel="stylesheet">`) или синхронные теги JavaScript (`<script src="main.js">`).
+
+Сценарии и таблицы стилейэто блокирующие рендеринг ресурсы, которые задерживают FCP и, следовательно, LCP. Отложите любой некритический JavaScript и CSS, чтобы ускорить загрузку основного контента веб-страницы.
+
+### Уменьшение времени блокировки CSS
+
+С помощью следующих шагов сведите блокирующий рендеринг CSS к минимально необходимому:
+
+- выполните минификацию CSS-кода;
+- отложите некритический CSS-код;
+- встройте критический CSS-код в HTML.
+
+### Минификация CSS
+
+Для удобочитаемости CSS-файлы могут содержать интервалы, отступы или комментарии. Все эти символы не нужны браузеру, и путём удаления их из исходного кода можно уменьшить его размер. В конечном итоге уменьшение количества блокирующего CSS-кода всегда сокращает время, необходимое для полной отрисовки основного контента страницы (LCP).
+
+Если вы используете сборщик модулей или систему сборки пакетов, включите соответствующий плагин для минификации CSS-кода при каждой сборке:
+
+- для webpack: [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin);
+- для Gulp: [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css);
+- для Rollup: [rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter).
+
+<figure>
+  {% Img
+    src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png",
+    alt="Пример улучшения LCP: до и после минификации CSS",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Пример улучшения LCP: до и после минификации CSS
+  </figcaption>
+</figure>
+
+{% Aside %} Более подробную информацию см. в статье [«Минификация CSS»](/minify-css/). {% endAside %}
+
+### Отложенная загрузка некритичного CSS-кода
+
+Используйте вкладку [Coverage](https://developer.chrome.com/docs/devtools/coverage/) в Chrome DevTools, чтобы найти неиспользуемый CSS-код на своей веб-странице.
+
+{% Img
+  src="image/admin/wjS4NrU5EsJeCuvK0zhn.png",
+  alt="Вкладка Coverage в Chrome DevTools",
+  width="800",
+  height="559"
+%}
+
+Для оптимизации:
+
+- Полностью удалите неиспользуемый CSS или переместите его в другую таблицу стилей, если он используется на отдельной странице вашего сайта.
+- Остальной CSS-код, который не требуется для начального рендеринга страницы, загружайте асинхронно с помощью библиотеки [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md), использующей `rel="preload"` и `onload`.
+
+```html
+<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
+```
+
+<figure>
+  {% Img
+    src="image/admin/2fcwrkXQRQrM8w1qyy3P.png",
+    alt="Пример улучшения LCP: до и после отсрочки загрузки некритичного CSS",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Пример улучшения LCP: до и после отсрочки загрузки некритичного CSS
+  </figcaption>
+</figure>
+
+{% Aside %} Более подробную информацию см. в статье [«Отложенная загрузка некритичного CSS-кода](/defer-non-critical-css/). {% endAside %}
+
+### Встраивание критического CSS-код в HTML
+
+Встройте любой критический CSS-код, используемый для содержимого верхней части страницы, включив его непосредственно в `<head>.`
+
+<figure>
+  {% Img
+    src="image/admin/m0n0JsLpH9JsNnXywSwz.png",
+    alt="Встроенный критический CSS",
+    width="800", height="325"
+  %}
+  <figcaption>Встроенный критический CSS</figcaption>
+</figure>
+
+
+Встраивание важных стилей избавляет от необходимости делать двусторонний запрос для получения критически важного CSS. Отсрочка остального сводит к минимуму время блокировки CSS.
+
+Если вы не можете вручную добавить встроенные стили на свой сайт, используйте библиотеку для автоматизации процесса. Несколько примеров:
+
+- [Critical](https://github.com/addyosmani/critical), [CriticalCSS](https://github.com/filamentgroup/criticalCSS) и [Penthouse](https://github.com/pocketjoso/penthouse)всё это пакеты, которые извлекают и встраивают верхнюю часть CSS.
+- [Critters](https://github.com/GoogleChromeLabs/critters)это плагин для веб-пакетов, который встраивает критический CSS и отлаживает загрузку прочего CSS.
+
+<figure>
+  {% Img
+    src="image/admin/L8sc51bd3ckxwnUfczC4.png",
+    alt="Пример улучшения LCP: до и после встраивания критического CSS",
+    width="800",
+    height="175"
+  %}
+  <figcaption>
+    Пример улучшения LCP: до и после встраивания критического CSS
+  </figcaption>
+</figure>
+
+{% Aside %} Более подробную информацию см. в статье [«Извлечение критического CSS-кода»](/extract-critical-css/). {% endAside %}
+
+### Уменьшение времени блокировки JavaScript
+
+Загрузите и предоставьте пользователям минимальное количество необходимого JavaScript. Уменьшение количества блокирующих рендеринг JavaScript приводит к более быстрой отрисовке и, как следствие, лучшему значению LCP.
+
+Этого можно добиться, оптимизируя скрипты несколькими различными способами:
+
+- [выполняйте минификацию и сжатие файлов JavaScript](/reduce-network-payloads-using-text-compression/);
+- [отложите загрузку неиспользуемого JavaScript](/reduce-javascript-payloads-with-code-splitting/);
+- [минимизируйте неиспользуемые полифиллы](/serve-modern-code-to-modern-browsers/).
+
+{% Aside %} В статье [«Оптимизация времени ожидания до первого взаимодействия с контентом»](/optimize-fid/) более подробно описаны все методы, необходимые для уменьшения времени блокировки JavaScript. {% endAside %}
+
+## Медленное время загрузки ресурсов {: #slow-resource-load-times}
+
+Хотя увеличение времени блокировки CSS или JavaScript напрямую приведет к снижению производительности, время, необходимое для загрузки многих других типов ресурсов, также может повлиять на время отрисовки. Типы элементов, которые влияют на LCP:
+
+- элементы `<img>`;
+- элементы `<image>` внутри элемента `<svg>`;
+- элементы `<video>` (момент отрисовки изображения [poster](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster) используется для измерения LCP);
+- элементы с фоновым изображением, загруженным с помощью функции [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (в отличие от <a>CSS-градиента</a>);
+- [блочные элементы](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements), содержащие текстовые узлы или другие дочерние строковые элементы.
+
+Время, необходимое для загрузки этих элементов при рендеринге в верхней части страницы, будет иметь прямое влияние на LCP. Есть несколько способов обеспечить максимально быструю загрузку этих файлов:
+
+- оптимизировать и сжимать изображения;
+- предварительно загружать важные ресурсы;
+- сжимать текстовые файлы;
+- доставлять различные ресурсы на основании сетевого подключения (адаптивное обслуживание);
+- кешировать активы с помощью сервис-воркера.
+
+### Оптимизация и сжатие изображений
+
+Для многих сайтов изображения—самые крупные элементы, видимые после завершения загрузки страницы. Главные изображения, большие карусели или изображения баннеров—типичные примеры крупных элементов.
+
+<figure>
+  {% Img
+    src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png",
+    alt="",
+    width="459",
+    height="925"
+  %}
+  <figcaption>Изображение как самый большой элемент страницы: <a href="https://design.google/">design.google</a></figcaption>
+</figure>
+
+Улучшение времени загрузки и рендеринга этих типов изображений, напрямую ускорит LCP. Для этого:
+
+- Подумайте о том, чтобы не использовать изображения в первую очередь. Если они не важны для контента, удалите их.
+- Сжимайте изображения (например, с помощью  [Imagemin](/use-imagemin-to-compress-images)).
+- Преобразуйте изображений в новые форматы (JPEG 2000, JPEG XR или WebP).
+- Используйте адаптивные изображения.
+- Рассмотрите возможность использования CDN для обработки изображений.
+
+{% Aside %} Ознакомьтесь со статьей [«Оптимизация изображений»](/fast/#optimize-your-images), где подробно объясняются упомянутые выше методы. {% endAside %}
+
+### Предварительная загрузка важных ресурсов
+
+Иногда важные ресурсы, которые объявлены или используются в определенном файле CSS или JavaScript, могут извлекаться позже, чем требуется (например, шрифт, спрятанный глубоко в одном из многих CSS-файлов приложения).
+
+Если вы знаете, что приоритет должен быть отдан определенному ресурсу, используйте `<link rel="preload">`, чтобы получить его раньше. Можно предварительно загрузить [многие типы ресурсов](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded), но сначала следует сосредоточиться на [предварительной загрузке критически важных ресурсов](/preload-critical-assets/), таких как шрифты, изображения или видео в верхней части страницы, а также CSS или JavaScript для критических этапов рендеринга.
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+Начиная с Chrome 73, предварительную загрузку можно использовать вместе с [адаптивными изображениями](/preload-responsive-images/), чтобы объединить оба шаблона для более быстрой загрузки изображений.
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### Сжатие текстовых файлов
+
+Алгоритмы сжатия, такие как [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) и [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html), могут значительно уменьшить размер текстовых файлов (HTML, CSS, JavaScript) при их передаче между сервером и браузером. Gzip эффективно поддерживается во всех браузерах, а Brotli, обеспечивающий еще лучшие результаты сжатия, и [поддерживается почти всеми новыми браузерами](https://caniuse.com/#feat=brotli).
+
+Сжатие ресурсов минимизирует размер их доставки, сокращая время загрузки и, следовательно, LCP.
+
+1. Сначала проверьте, использует ли уже ваш сервер автоматическое сжатие файлов. Большинство хостинговых платформ, CDN и обратных прокси-серверов либо кодируют ресурсы со сжатием по умолчанию, либо позволяют легко настроить сжатие.
+2. Если вам нужно внедрить сжатие файлов на сервере, рассмотрите возможность использования Brotli вместо Gzip, поскольку Brotli обеспечивает лучшую степень сжатия.
+3. После того как вы выберите алгоритм сжатия, сжимайте ресурсы заранее в процессе сборки, а не на лету, когда они запрашиваются браузером. Это минимизирует потребление ресурсов сервера и предотвратит задержки при выполнении запросов, особенно при использовании высоких степеней сжатия.
+
+<figure>
+  {% Img
+    src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png",
+    alt="Пример улучшения LCP: до и после сжатия с Brotli",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Пример улучшения LCP: до и после сжатия с Brotli
+  </figcaption>
+</figure>
+
+
+{% Aside %}Более подробную информацию см. в статье [«Минификация и сжатие полезных сетевых нагрузок»](/reduce-network-payloads-using-text-compression/). {% endAside %}
+
+### Адаптивное обслуживание
+
+При загрузке ресурсов, составляющих основной контент страницы, эффективным может быть условная выборка различных ресурсов в зависимости от типа устройства или условий сети пользователя. Это можно сделать с помощью API-интерфейсов [Network Information](https://wicg.github.io/netinfo/), [Device Memory](https://www.w3.org/TR/device-memory/) и [HardwareConcurrency.](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency)
+
+Если у вас есть большие ресурсы, критически важные для первоначального рендеринга, вы можете использовать разные варианты одного и того же ресурса в зависимости от скорости подключения или от устройства пользователя. Например, вы можете отображать изображение вместо видео для любых скоростей подключения ниже 4G:
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // Load video
+  } else {
+    // Load image
+  }
+}
+```
+
+Список полезных свойств, которые вы можете использовать:
+
+- `navigator.connection.effectiveType` : эффективный тип подключения;
+- `navigator.connection.saveData` : экономия данных включена/отключена;
+- `navigator.hardwareConcurrency` : количество ядер ЦП;
+- `navigator.deviceMemory` : память устройства.
+
+{% Aside %} Более подробную информацию см. в статье [«Адаптивное обслуживание на основании качества сетевого подключения»](/adaptive-serving-based-on-network-quality/). {% endAside %}
+
+### Кэширование активов с помощью сервис-воркера
+
+Сервис-воркеры могут использоваться для множества полезных задач, в том числе для сокращения ответов на запросы контента HTML, как упоминалось ранее в этой статье. Их также можно использовать для кеширования любого статического ресурса, чтобы затем выдать его браузеру, а не загружать из сети при повторных запросах.
+
+Предварительное кеширование критических ресурсов с помощью сервис-воркера может значительно сократить время их загрузки, особенно для пользователей, которые перезагружают веб-страницу, используя более слабое подключение (или даже получают к ней доступ в автономном режиме). Иногда, чтобы упростить процесс обновления предварительно кешированных ресурсов, проще использовать библиотеку наподобие [Workbox](https://developer.chrome.com/docs/workbox/), чем писать пользовательский сервис-воркер.
+
+{% Aside %} Ознакомьтесь со статьей [«Надежность сети»](/reliable/), чтобы узнать больше о сервис-воркерах и Workbox. {% endAside %}
+
+## Рендеринг на стороне клиента {: #client-side-rendering}
+
+Многие сайты используют клиентскую логику JavaScript для отображения страниц непосредственно в браузере. Фреймворки и библиотеки, такие как [React](https://reactjs.org/) , [Angular](https://angular.io/) и [Vue](https://vuejs.org/), упростили создание одностраничных приложений, которые обрабатывают различные аспекты веб-страницы полностью на стороне клиента, а не на сервере.
+
+Если вы создаете сайт, который в основном отображается на стороне клиента, вам следует опасаться влияния больших пакетов JavaScript на LCP. Если не предусмотреть оптимизацию для предотвращения этого влияния, пользователи могут не видеть контент или не иметь возможности взаимодействовать с ним на странице до тех пор, пока не завершится загрузка и выполнение всего критического JavaScript-кода.
+
+При создании сайта, отображаемого на стороне клиента, подумайте о проведении следующих оптимизаций:
+
+- минимизируйте критический JavaScript;
+- используйте рендеринг на стороне сервера;
+- используйте предварительный рендеринг.
+
+### Минимизация критического JavaScript
+
+Если контент на вашем сайте становится видимым или с ним можно взаимодействовать только после загрузки определенного количества JavaScript, то первоочередной задачей стаёт максимальное уменьшение размера пакета. Для этого:
+
+- выполните минификацию JavaScript;
+- <a>отложите загрузку неиспользуемого JavaScript</a>;
+- <a>минимизируйте неиспользуемые полифиллы</a>.
+
+Вернитесь в раздел [«Уменьшение времени блокировки JavaScript»](#reduce-javascript-blocking-time), чтобы подробнее прочитать об этих оптимизациях.
+
+### Использование рендеринга на стороне сервера
+
+Минимизация количества JavaScriptпервоочередная задача для сайтов, которые в основном отрисовываются на стороне клиента. Кроме того, для максимального улучшения LCP следует рассмотреть возможность сочетания клиентского и серверного рендеринга.
+
+Эта концепция работает с использованием сервера для рендеринга приложения в HTML, где клиент затем [«впитывает»](https://www.gatsbyjs.org/docs/react-hydration/) весь JavaScript и необходимые данные в одно и то же содержимое DOM. Это может улучшить LCP, гарантируя, что основное содержимое страницы сначала отрисовывается на сервере, а не только на клиенте, но есть несколько недостатков:
+
+- сохранение одного и того же приложения, отрисованного с помощью JavaScript, на сервере и на клиенте может увеличить сложность;
+- выполнение JavaScript для рендеринга HTML-файла на сервере всегда увеличивает время ответа сервера (TTFB) по сравнению с простым обслуживанием статических страниц с сервера;
+- страница, отображаемая на сервере, может выглядеть так, как будто с ней можно взаимодействовать, но она не может реагировать на действия пользователя, пока не будет выполнен весь клиентский JavaScript. Проще говоря, это может ухудшить метрику [**TTI (Время до интерактивности)**](/tti/).
+
+### Использование предварительного рендеринга
+
+Предварительный рендерингэто отдельный метод, который менее сложен, чем рендеринг на стороне сервера, но также позволяет улучшить LCP в вашем приложении. Браузер без графического интерфейса используется для создания статических файлов HTML для каждого маршрута во время сборки. Затем эти файлы могут быть отправлены вместе с пакетами JavaScript, необходимыми для приложения.
+
+При предварительном рендеринге TTI по-прежнему подвергается негативному воздействию, но время отклика сервера не так сильно ухудшается, как при рендеринге на стороне сервера, которое динамически отображает каждую страницу только после ее запроса.
+
+<figure>
+  {% Img
+    src="image/admin/sm9s16UHfh8a5MDEWjxa.png",
+    alt="Пример улучшения LCP: до и после предварительного рендеринга",
+    width="800",
+    height="139"
+  %}
+  <figcaption>
+    Пример улучшения LCP: до и после предварительного рендеринга
+  </figcaption>
+</figure>
+
+{% Aside %} Чтобы глубже погрузиться в различные архитектуры серверного рендеринга, ознакомьтесь со статьей [«Рендеринг в Интернете»](/rendering-on-the-web/). {% endAside %}
+
+## Инструменты разработчика
+
+Для измерения и отладки LCP доступен ряд инструментов:
+
+- [Lighthouse 6.0](https://developer.chrome.com/docs/lighthouse/overview/) включает поддержку измерения LCP в лабораторных условиях.
+
+{% Img
+  src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg",
+  alt="Lighthouse 6.0",
+  width="800",
+  height="309"
+%}
+
+- Раздел **Timings** панели [Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/) в Chrome Devtools включает маркер LCP и показывает, какой элемент связан с LCP при наведении мыши на поле **Related Node**.
+
+{% Img
+  src="image/admin/sxczQPKH0cvMBsNCx5uH.png",
+  alt="LCP в Chrome DevTools",
+  width="800",
+  height="509"
+%}
+
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) предоставляет реальные значения LCP, агрегированные на уровне источника.
+
+*Выражаем благодарность Филиппу Уолтону, Кэти Хемпениус, Кейси Баскесу и Илье Григорику за их обзоры.*
diff --git a/src/site/content/ru/blog/payment-and-address-form-best-practices/index.md b/src/site/content/ru/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..478a8503019
--- /dev/null
+++ b/src/site/content/ru/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,503 @@
+---
+title: Рекомендации по использованию форм оплаты и ввода адреса
+subhead: Увеличьте количество конверсий, сделав заполнение форм оплаты и ввода адреса максимально быстрым и легким.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-12-09
+updated: 2021-11-30
+description: Увеличьте количество конверсий, сделав заполнение форм оплаты и ввода адреса максимально быстрым и легким.
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: Бизнесмен оплачивает покупку на ноутбуке при помощи банковской карты.
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+Продуманный дизайн онлайн-форм делает их удобнее и повышает коэффициент конверсии. Одно небольшое изменение может сыграть существенную роль.
+
+{% Aside 'codelab' %} Если вы предпочитаете более практический подход к изучению, ознакомьтесь со следующими интерактивными уроками:
+
+- [Рекомендации по реализации форм оплаты](/codelab-payment-form-best-practices)
+- [Рекомендации по реализации форм ввода адреса](/codelab-address-form-best-practices) {% endAside %}
+
+Вот пример простой формы оплаты, в дизайне которой реализованы все рекомендации:
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+Вот пример простой формы ввода адреса, в дизайне которой реализованы все рекомендации:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## Контрольный список
+
+- [Используйте содержательные элементы HTML](#meaningful-html): `<form>`, `<input>`, `<label>` и `<button>`.
+- [Подписывайте каждое поле формы при помощи `элемента <label>`](#html-label).
+- Используйте атрибуты HTML-элементов для [доступа к встроенным функциям браузера](#html-attributes), например [`type`](#type-attribute) и [`autocomplete`](#autocomplete-attribute) с соответствующими значениями.
+- Избегайте использования `type="number"` для чисел, для которых не требуются стрелки увеличения и уменьшения, таких как номера банковских карт. Вместо этого используйте `type="text"` и [`inputmode="numeric"`](#inputmode-attribute).
+- Если для элемента `input` , `select` или `textarea` доступно [подходящее значение autocomplete](#autocomplete-attribute), используйте это значение.
+- Чтобы позволить браузерам автоматически заполнять формы, указывайте для атрибутов `name` и `id` [стабильные значения](#stable-name-id), которые будут оставаться неизменными с каждой новой загрузкой страницы или развертыванием сайта.
+- [Отключайте кнопки отправки формы](#disable-submit), после того как пользователь коснется или нажмет на них.
+- [Проверяйте](#validate) данные во время ввода, а не только при отправке формы.
+- Используйте [гостевое оформление заказа](#guest-checkout) по умолчанию и упростите создание аккаунта после завершения оформления.
+- Отображайте [ход оформления заказа](#checkout-progress) в виде четких шагов с понятными призывами к действию.
+- [Ограничьте количество потенциальных точек выхода](#reduce-checkout-exits) из процесса оформления заказа, удалив лишний мусор и отвлекающие факторы.
+- Перед завершением оформления заказа [отобразите полную информацию о нем](#checkout-details) и дайте пользователю возможность с легкостью ее исправить.
+- [Не запрашивайте данные, которые вам не нужны](#unneeded-data).
+- [Используйте единое поле ввода имени](#single-name-input), если у вас нет веских причин для его разделения.
+- [Не запрещайте использование нелатинских символов](#unicode-matching) в именах и логинах.
+- [Предусмотрите поддержку различных форматов адресов](#address-variety).
+- Рассмотрите возможность использования [единого элемента `textarea` для ввода адреса](#address-textarea).
+- Используйте [автозаполнение адреса выставления счета](#billing-address).
+- При необходимости [выполняйте интернационализацию и локализацию](#internationalization-localization).
+- Старайтесь избегать [поиска адреса по почтовому индексу](#postal-code-address-lookup).
+- Используйте [соответствующие значения атрибута autocomplete для полей ввода данных банковской карты](#payment-form-autocomplete).
+- Используйте [единое (не разделенное на части) поле ввода номера банковской карты](#single-number-input).
+- [Избегайте использования нестандартных элементов](#avoid-custom-elements), если они мешают работе автозаполнения.
+- [Выполняйте тестирование как в «полевых», так и в лабораторных условиях](#analytics-rum), используя средства аналитики страниц, аналитики взаимодействия и измерения производительности у реальных пользователей.
+- [Выполняйте тестирование на различных браузерах, устройствах и платформах](#test-platforms).
+
+{% Aside %} Эта статья содержит рекомендации по реализации форм оплаты и ввода адреса на стороне фронтенда. Она не затрагивает тему реализации на сайте транзакций. Подробнее о том, как добавить на сайт поддержку платежей, см. в разделе [Веб-платежи](/payments). {% endAside %}
+
+## Используйте содержательный HTML-код {: #meanful-html}
+
+Используйте специализированные элементы и атрибуты:
+
+- `<form>`, `<input>`, `<label>` и `<button>`
+- `type`, `autocomplete` и `inputmode`
+
+Они позволяют использовать встроенную функциональность браузера, повышают доступность и делают разметку более осмысленной.
+
+### Используйте HTML-элементы по назначению {: #html-elements}
+
+#### Размещайте формы внутри элемента <form> {: #html-form}
+
+При создании формы у вас может возникнуть желание не оборачивать элементы `<input>` в `<form>` и обрабатывать отправку данных исключительно с помощью JavaScript.
+
+Не следует так делать.
+
+HTML-элемент `<form>` предоставляет доступ к мощному набору встроенных функций во всех современных браузерах, а также может помочь сделать сайт доступным для программ чтения с экрана и других вспомогательных технологий. Кроме того, элемент `<form>` упрощает реализацию базовой функциональности для старых браузеров с ограниченной поддержкой JavaScript и позволяет отправлять форму даже тогда, когда в коде содержится ошибка или у пользователя отключен JavaScript.
+
+Если у вас на странице больше одного компонента для пользовательского ввода, разместите каждый из них в отдельном элементе `<form>`. Например, если на странице есть формы поиска и регистрации, для каждой из них следует использовать отдельный элемент `<form>`.
+
+#### Используйте `<label>` для отображения подписей к элементам {: #html-label}
+
+Для указания подписей к элементам `<input>`, `<select>` и `<textarea>` используйте элемент [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+
+В атрибуте `for` элемента «label» следует указывать `id` соответствующего элемента ввода, чтобы связать их друг с другом.
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+Каждой подписи должен соответствовать один элемент ввода; не используйте одну подпись для обозначения нескольких элементов. Таким образом вы сможете обеспечить лучшую совместимость с браузерами и программами чтения с экрана, поскольку нажатие или касание подписи перемещает фокус к соответствующему элементу ввода, а программы чтения с экрана зачитывают подпись, когда либо *элемент ввода*, либо сама *подпись* попадает в фокус.
+
+{% Aside 'caution' %} Не используйте [заполнители вместо подписей](https://www.smashingmagazine.com/2018/06/placeholder-attribute/). Как только пользователь начинает вводить в поле ввода текст, заполнитель исчезает, поэтому можно легко забыть, для чего предназначено поле. По той же причине не следует использовать заполнители для отображения формата значений, таких как даты. Особенно неудобным это может быть для пользователей телефонов, в частности если они отвлечены или находятся в состоянии напряжения. {% endAside %}
+
+#### Делайте кнопки удобными {: #html-button}
+
+Используйте для кнопок специализированные элементы, такие как [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) или `<input type="submit">`: они совместимы со вспомогательными технологиями, предоставляют встроенную функциональность отправки формы, а также поддерживают легкую стилизацию. Избегайте использования элементов, не предназначенных для кнопок, таких как `div`.
+
+Кнопки отправки формы должны иметь подписи, отражающие их функцию. В ходе оформления заказа отображайте ясные призывы к действию, дающие пользователю понять, на каком этапе он находится и каким будет следующий этап. Например, для кнопки отправки формы, запрашивающей адрес доставки, используйте подпись **Перейти к оплате**, а не **Продолжить** или **Сохранить**.
+
+{: #disable-submit}
+
+Кнопки отправки формы рекомендуется деактивировать при нажатии или касании, особенно если форма предназначена для выполнения оплаты или размещения заказа. Многие пользователи нажимают на кнопки по несколько раз подряд, даже если кнопка работает нормально. Это может приводить к проблемам при оформлении заказа и увеличивать нагрузку на сервер.
+
+В то же время не отключайте кнопки отправки формы, когда она ожидает верного ввода. Например, кнопку **Сохранить адрес** не следует делать неактивной, даже если некоторые поля не заполнены или заполнены неверно. Это лишь собьет пользователя с толку: после нескольких попыток нажать на кнопку он может прийти к выводу, что она сломана. Вместо этого пользователю, попытавшемуся отправить неверно заполненную форму, следует сообщать, где он ошибся и как это исправить. Это особенно важно на мобильных устройствах, где процесс ввода данных затруднен и к моменту отправки формы неверно заполненное поле уже может находиться за пределами экрана.
+
+{% Aside 'caution' %} По умолчанию кнопки, размещенные внутри формы, имеют тип `submit`. Если нужно добавить кнопку другого типа (например, для команды **Показать пароль**), используйте `type="button"`. В противном случае нажатие на кнопку будет приводить к отправке формы.
+
+Когда фокус находится на любом поле формы, нажатие клавиши `Enter` имитирует щелчок первой кнопки с типом `submit`, являющейся частью этой формы. Если перед **кнопкой отправки** разместить в пределах той же формы другую кнопку с неуказанным типом, то именно она при отправке формы будет получать событие клика, так как по умолчанию ей будет присвоен тип `submit`. Пример смотрите в нашей [демонстрации](https://enter-button.glitch.me/): заполните форму, а затем нажмите `Enter`. {% endAside %}
+
+### Используйте HTML-атрибуты по максимуму {: #html-attributes}
+
+#### Упрощайте ввод данных для пользователей
+
+{: #type-attribute}
+
+Указывайте для полей ввода подходящее значение [атрибута `type`](https://developer.mozilla.org/docs/Web/HTML/Element/input/email), чтобы предоставлять на мобильных устройствах нужный тип клавиатуры, а также активировать базовую функциональность валидации, встроенную в браузер.
+
+Например, для адресов электронной почты используйте `type="email"`, а для номеров телефона — `type="tel"`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IsQLyhbQm.jpg", alt="Скриншоты двух типов клавиатур на Android-телефоне: для ввода электронного адреса (type=email) и для ввода номера телефона (type=tel).", width="800", height="683" %} <figcaption>Клавиатуры для ввода электронного адреса и для ввода телефона.</figcaption></figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %} При использовании type="number" в поле отображаются стрелки для увеличения и уменьшения числа, которые при вводе таких данных, как номера телефонов, платежных карт или банковских счетов, не являются уместными.
+
+Для ввода таких чисел следует использовать `type="text"` (или вообще не указывать этот атрибут, поскольку `text` используется по умолчанию). Для ввода телефонных номеров используйте `type="tel"`, чтобы на мобильных устройствах отображалась соответствующая клавиатура. Для других чисел используйте `inputmode="numeric"`, чтобы на мобильных устройствах отображалась цифровая клавиатура.
+
+На некоторых сайтах для ввода номера банковской карты с цифровой клавиатуры по-прежнему используется `type="tel"`, но в связи с [широким распространением поддержки](https://caniuse.com/input-inputmode) `inputmode` в этом больше нет необходимости (однако не пренебрегайте проверкой браузера пользователя). {% endAside %}
+
+{: #avoid-custom-elements}
+
+Для ввода даты избегайте использования нестандартных элементов `select`: они нарушают работу автозаполнения, если реализованы неправильно, и кроме того не работают в устаревших браузерах. Для ввода чисел, таких как год рождения, рекомендуется использовать `input`, а не `select`, поскольку вводить цифры вручную зачастую проще и надежнее, чем выбирать из длинного списка (особенно на мобильных устройствах). Для отображения на мобильных устройствах подходящего типа клавиатуры используйте `inputmode="numeric"`, а для того, чтобы обеспечить соблюдение формата, используйте валидацию и отображайте подсказки в виде заполнителей или внешнего текста.
+
+{% Aside %} Элемент [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) позволяет пользователю выбирать варианты из списка и отображает подсказки по мере ввода текста. По адресу [simpl.info/datalist](https://simpl.info/datalist) доступна демонстрация `datalist` в сочетании с элементами `text`, `range` и `color`. По адресу [datalist-select.glitch.me](https://datalist-select.glitch.me) можно сравнить реализацию ввода даты рождения на основе `select` и на основе комбинации элементов `input` и `datalist`. {% endAside %}
+
+#### Используйте автозаполнение, чтобы повысить доступность и сократить необходимость в повторном вводе данных {: #autocomplete-attribute}
+
+Указывайте верные значения `autocomplete`, чтобы позволить браузеру безопасно сохранять данные и автоматически заполнять поля `input`, `select` и `textarea` в целях экономии усилий пользователя. Это особенно важно для пользователей мобильных устройств и играет первостепенную роль в снижении [коэффициента незаполненных форм](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data), а также существенно [повышает доступность](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html).
+
+Если для поля формы доступно подходящее значение «autocomplete», используйте это значение. В [веб-документации MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) перечислены все допустимые значения, а также приводятся пояснения об их использовании.
+
+{: #stable-name-id}
+
+{% Aside %} Чтобы автозаполнение форм в браузерах работало еще лучше, в дополнение к атрибуту «autocomplete» следует указывать для полей форм [стабильные значения](#stable-name-id) атрибутов `name` и `id`, остающиеся неизменными с каждой новой загрузкой страницы или развертыванием сайта. {% endAside %}
+
+{: #billing-address}
+
+По умолчанию в качестве адреса выставления счета следует использовать адрес доставки. Чтобы сократить визуальную зашумленность, не отображайте адрес выставления счета в самой форме, а укажите ссылку для его редактирования (или используйте [элементы `summary` и `details`](https://simpl.info/details/)).
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="Пример страницы оформления заказа со ссылкой, позволяющей изменить адрес выставления счета.", width="800", height="250" %} <figcaption>Добавьте ссылку для редактирования платежной информации.</figcaption></figure>
+
+Как и в случае с адресом доставки, для полей адреса выставления счета следует указывать соответствующие значения атрибута «autocomplete», чтобы пользователю не приходилось вводить данные повторно. Если поля ввода в разных разделах имеют одинаковое название, но разные значения, то для их разграничения добавьте в начало атрибута «autocomplete» дополнительное слово.
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### Помогайте пользователям указывать верные данные {: #validation}
+
+Когда клиенты допускают ошибки, старайтесь не отталкивать их замечаниями. Вместо этого помогайте им исправлять ошибки по мере их появления, чтобы сделать процесс заполнения формы быстрым и легким. Оформляя заказ, клиент пытается приобрести у вашей компании продукт или услугу, и ваша задача — помочь ему, а не наказать его.
+
+Элементы формы поддерживают [атрибуты валидации](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints), такие как `min`, `max` и `pattern`, при помощи которых можно указывать допустимые значения. [Состояние валидации](https://developer.mozilla.org/docs/Web/API/ValidityState) элемента устанавливается автоматически в зависимости от того, имеет ли он допустимое значение; то же касается и CSS-псевдоклассов `:valid` и `:invalid`, которые можно использовать для стилизации элементов в зависимости от состояния валидации.
+
+Например, приведенный ниже HTML-код создает элемент ввода, позволяющий указать год рождения от 1900 до 2020. Атрибут `type="number"` разрешает ввод только числовых значений, а `min` и `max` ограничивают их диапазон. Если попытаться ввести число за пределами диапазона, элемент ввода будет помечен как имеющий недопустимое значение.
+
+{% Glitch { id: 'constraints', path: 'index.html', height: 170 } %}
+
+В следующем примере `pattern="[\d ]{10,30}"` используется для проверки правильности номера банковской карты с возможностью использования пробелов:
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+Современные браузеры также выполняют базовую валидацию для элементов ввода с типом `email` или `url`.
+
+{% Glitch { id: 'type-validation', path: 'index.html', height: 250 } %}
+
+{% Aside %} Чтобы выполнять валидацию нескольких электронных адресов, введенных в одном поле через запятые, добавьте к элементу ввода `type="email"` атрибут `multiple`. {% endAside %}
+
+При попытке отправить форму браузер автоматически выделяет поля с отсутствующими или неверно указанными значениями. Использование JavaScript не требуется.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="Скриншот формы входа в Chrome на ПК, отображающий предупреждение и выделение поля в связи с неверно указанным электронным адресом.", width="500", height="483" %} <figcaption>Базовая валидация при помощи встроенных средств браузера.</figcaption></figure>
+
+Проверяйте данные и предоставляйте пользователю отклик непосредственно во время ввода, а не отображайте список ошибок после нажатия кнопки отправки. Если данные необходимо проверять на сервере после отправки формы, то после проверки перечисляйте все обнаруженные ошибки и четко выделяйте все неверно заполненные поля формы, а также отображайте рядом с каждым из них рекомендации по исправлению. Проверяйте журналы сервера и данные аналитики на предмет часто совершаемых ошибок: они могут указывать на необходимость изменения дизайна формы.
+
+Рекомендуется также использовать JavaScript для обеспечения более надежной валидации как во время ввода, так и при отправке формы. Используйте [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) ([широко поддерживающийся](https://caniuse.com/#feat=constraint-validation) в браузерах) для реализации нестандартной валидации с выделением полей и отображением подсказок при помощи встроенных средств браузера.
+
+Дополнительные сведения см. в статье [Использование JavaScript для более сложной проверки в реальном времени](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation).
+
+{% Aside 'warning' %} Даже если вы применяете на стороне клиента валидацию и ограничения на ввод данных, необходимо позаботиться, чтобы обмен данными с пользователями был безопасно реализован на стороне бэкенда. Никогда не доверяйте данным, поступающим от пользователей, так как они могут быть вредоносными. Подробности см. в статье [OWASP Input Validation Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html). {% endAside %}
+
+#### Помогайте пользователям указывать все необходимые данные {: #required}
+
+Чтобы пометить поле ввода как обязательное для заполнения, используйте [атрибут `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required).
+
+При попытке отправки формы [современные браузеры](https://caniuse.com/mdn-api_htmlinputelement_required) автоматически устанавливают фокус на незаполненные поля с атрибутом `required` и показывают сообщения об ошибках. При помощи [псевдокласса `:required`](https://caniuse.com/?search=required) незаполненные поля можно подсвечивать без использования JavaScript.
+
+Пометьте подписи обязательных полей звездочками и разместите пояснение в начале формы.
+
+## Упростите оформление заказа {: #checkout-forms}
+
+### Учитывайте разрыв в мобильной коммерции {: #m-commerce-gap}
+
+Представьте, что у ваших пользователей есть *лимит утомления*. Как только он достигнут, пользователь уходит с сайта.
+
+Старайтесь минимизировать помехи и поддерживать интерес пользователя, особенно на мобильных устройствах. Многие сайты получают больше *трафика* с мобильных устройств, но при этом имеют более высокий *процент конверсии* на ПК — это явление называется [разрывом в мобильной коммерции](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). Некоторые покупатели попросту предпочитают совершать покупки с компьютера, однако низкий процент конверсии с мобильных устройств может также быть обусловлен низким уровнем удобства. Ваша задача — *минимизировать* потерянные конверсии на мобильных устройствах и *максимизировать* конверсии на ПК. [Согласно исследованиям](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs), удобство при заполнении мобильных форм можно значительно повысить.
+
+В первую очередь имейте в виду, что пользователи чаще бросают заполнение форм, если они кажутся длинными, сложными или запутанными, — особенно когда пользователь торопится, отвлекается на что-то или использует устройство с маленьким экраном. Поэтому старайтесь запрашивать как можно меньше данных.
+
+### Используйте гостевое оформление заказа по умолчанию {: #guest-checkout}
+
+Самый простой способ минимизировать помехи при заполнении формы в интернет-магазине — это использовать гостевое оформление заказа по умолчанию. Не заставляйте пользователей создавать аккаунт перед покупкой. Отсутствие возможности оформить заказ от имени гостя считается одной из главных причин возникновения брошенных корзин.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="Причины возникновения брошенных корзин при оформлении заказа.", width="800", height="503" %} <figcaption>Источник: <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a></figcaption></figure>
+
+Предложить пользователю зарегистрировать аккаунт можно после окончания оформления заказа. К этому моменту у вас уже есть большая часть данных, необходимых для создания аккаунта, так что процесс регистрации можно сделать быстрым и легким.
+
+{% Aside 'gotchas' %} Если вы предлагаете пользователю зарегистрироваться после оформления заказа, не забудьте связать с новым аккаунтом только что сделанную покупку. {% endAside %}
+
+### Отображайте ход оформления заказа {: #checkout-progress}
+
+Процесс оформления заказа можно сделать субъективно менее сложным, если отображать ход его оформления и помогать пользователю четкими инструкциями. На видео ниже показано, как это реализовала британская розничная сеть [johnlewis.com](https://www.johnlewis.com).
+
+<figure> {% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %} <figcaption>Отображайте ход оформления заказа.</figcaption></figure>
+
+Старайтесь поддерживать интерес пользователя. На каждом этапе, приближающем пользователя к оплате, используйте четкие заголовки страниц и названия кнопок, дающие понять, что требуется от пользователя и каким будет следующий этап оформления заказа.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Давайте кнопкам формы осмысленные подписи, которые четко обозначают следующий шаг.</figcaption></figure>
+
+Указывайте для элементов ввода атрибут `enterkeyhint`, позволяющий задавать подпись клавиши Enter на мобильной клавиатуре. Например, можно использовать `enterkeyhint="previous"` и `enterkeyhint="next"` в многостраничных формах, `enterkeyhint="done"` — для последнего поля ввода в форме, а `enterkeyhint="search"` — для поля ввода поиска.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Два скриншота формы ввода адреса на Android, иллюстрирующие изменение значка кнопки Enter под влиянием атрибута enterkeyhint.", width="800", height="684" %} <figcaption>Кнопки Enter на Android: «next» и «done».</figcaption></figure>
+
+Атрибут `enterkeyhint` [поддерживается на Android и iOS](https://caniuse.com/mdn-html_global_attributes_enterkeyhint). Подробности см. в [описании enterkeyhint](https://github.com/dtapuska/enterkeyhint).
+
+{: #checkout-details}
+
+Позвольте пользователям с легкостью перемещаться между этапами оформления заказа и изменять его параметры, даже находясь на заключительном этапе оплаты. Отображайте полную информацию о заказе, а не только краткое описание. Дайте пользователям возможность легко изменять со страницы оплаты количество товаров. Ваша задача — сделать так, чтобы во время оформления заказа ничто не помешало достижению конверсии.
+
+### Избавьтесь от отвлекающих факторов {: #reduce-checkout-exits}
+
+Ограничьте потенциальные точки выхода, избавившись от визуального мусора и отвлекающих факторов, таких как реклама продуктов. Многие успешные магазины не отображают при оформлении заказа даже поле поиска и элементы навигации.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="Два скриншота, отображающие ход оформления заказа в мобильной версии johnlewis.com. Поиск, навигация и другие отвлекающие факторы не показываются.", width="800", height="683" %} <figcaption>Поиск, навигация и другие отвлекающие факторы скрыты со страницы оформления заказа.</figcaption></figure>
+
+Не давайте пользователю отклониться от курса. В момент оформления заказа не следует предлагать пользователю что-либо еще.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="Скриншот мобильной страницы оформления заказа, на которой отображается навязчивая реклама с текстом «FREE STICKERS».", width="350", height="735" %} <figcaption>Не отвлекайте клиентов от завершения покупки.</figcaption></figure>
+
+Для пользователей, заходящих повторно, вы можете еще сильнее упростить процесс оформления заказа, сократив объем лишних данных. Например, отображайте адрес доставки в виде обычного текста (а не формы) и укажите ссылку для его изменения.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="Скриншот раздела подтверждения данных на странице оформления заказа. Данные отображаются в виде обычного текста; рядом видны ссылки для изменения адреса доставки, способа оплаты и адреса выставления счета, которые не отображаются на странице.", width="450", height="219" %} <figcaption>Скрывайте данные, которые не требуется отображать клиентам.</figcaption></figure>
+
+## Упростите ввод имени и адреса {: #address-forms}
+
+### Запрашивайте только те данные, которые вам нужны {: #unneeded-data}
+
+Прежде чем приступить к созданию форм ввода имени и адреса, определитесь с тем, какие данные вам нужны. Не запрашивайте ничего лишнего! Самый простой способ сделать форму менее сложной — это избавиться от ненужных полей. Это также повышает конфиденциальность пользователей, снижает расходы на хранение данных на серверах и сокращает объем обязательств.
+
+### Используйте для ввода имени единое поле {: #single-name-input}
+
+Позвольте пользователям указывать имя при помощи единого поля, если у вас нет весомой причины хранить имена, фамилии, отчества и другие части имени по отдельности. Использование единого поля для ввода имени делает форму проще, позволяет вставлять имя из буфера обмена и облегчает автозаполнение.
+
+В особенности избегайте использования отдельного поля для указания приставки к имени, такой как «господин» или «доктор», если у вас нет для этого веской причины. При необходимости пользователи смогут указать приставку вместе с именем. Кроме того, параметр автозаполнения `honorific-prefix` в настоящее время не работает в большинстве браузеров, поэтому для большинства пользователей наличие такого поля приведет к проблемам при автозаполнении формы ввода адреса.
+
+### Используйте автозаполнение имени
+
+Для автозаполнения полного имени используйте `name`:
+
+```html
+<input autocomplete="name" ...>
+```
+
+Если у вас есть весомая причина запрашивать разные части имени по отдельности, используйте соответствующие значения autocomplete:
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### Разрешите ввод имен на любых языках {: #unicode-matching}
+
+При вводе имен есть смысл выполнять их валидацию или ограничивать допустимые символы, однако старайтесь обеспечить поддержку как можно более широкого набора систем письменности. Пользователю будет неприятно услышать, что его имя «неправильное».
+
+При валидации избегайте использования регулярных выражений, рассчитанных только на латиницу, поскольку имя или адрес пользователя может содержать нелатинские символы. Вместо этого используйте определение букв Unicode — и обеспечьте на стороне бэкенда безопасную поддержку как ввода, так и вывода Unicode-строк. Регулярные выражения с Unicode поддерживаются всеми современными браузерами.
+
+{% Compare 'worse' %}
+
+```html
+<!-- Имена с нелатинскими символами (например, «Françoise» или «Jörg») не пройдут валидацию. -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- Поле принимает буквы Unicode. -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Сравнение распознавания букв Unicode с распознаванием только латинских букв.</figcaption></figure>
+
+{% Aside %} Подробнее об [интернационализации и локализации](#internationalization-localization) рассказывается ниже, однако старайтесь проектировать формы ввода с учетом имен, распространенных в регионах проживания всех ваших пользователей. Например, для японских имен есть смысл добавить поле, позволяющее указать фонетическую формы имени. Это поможет сотрудникам службы поддержки правильно произносить имя клиента при разговоре по телефону. {% endAside %}
+
+### Предусмотрите поддержку различных форматов адресов {: #address-variety}
+
+При проектировании формы ввода адреса помните, что форматы адресов могут сильно различаться даже в пределах одной страны. Не делайте предположений о том, как должен выглядеть «обычный» адрес. (Взгляните на статью о [странных адресах в Великобритании](http://www.paulplowman.com/stuff/uk-address-oddities/), если не верите!)
+
+#### Делайте формы ввода адреса гибкими {:flexible-address}
+
+Не заставляйте пользователей пытаться втиснуть адрес в поля формы, которые для него не подходят.
+
+Например, не требуйте указания номера дома и названия улицы в отдельных полях, поскольку многие адреса не используют такой формат и автозаполнение в браузере может не сработать из-за отсутствия нужных данных.
+
+Будьте особенно осторожны при использовании атрибута `required` для полей ввода адреса. Например, в Великобритании крупные города не являются частью графства, однако многие сайты несмотря на это заставляют пользователей его указывать.
+
+Использование двух полей, позволяющих указать адрес в произвольном формате, подойдет для различных видов адресов.
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Добавьте соответствующие ярлыки:
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+Вы можете попробовать такую форму в действии, создав копию демонстрации, приведенной ниже, и отредактировав ее.
+
+{% Aside 'caution' %} Согласно исследованиям, [использование **двух полей для ввода адреса** может сбивать пользователей с толку](https://baymard.com/blog/address-line-2). Помните об этом при проектировании формы ввода адреса — возможно, есть смысл использовать альтернативные варианты, такие как единое поле `textarea` (см. ниже) или иные способы ввода. {% endAside %}
+
+#### Рассмотрите возможность использования единого элемента textarea для ввода адреса {: #address-textarea}
+
+Самый гибкий способ ввода адреса — это единое поле `textarea`.
+
+Поле `textarea` подходит для адресов любого формата и позволяет с легкостью вставлять адрес из буфера обмена — однако имейте в виду, что оно может не подходить под ваши требования к вводимым данным; кроме того, у пользователей может не сработать автозаполнение, если раньше они использовали только формы с полями `address-line1` и `address-line2`.
+
+В качестве значения autocomplete для поля textarea используйте `street-address`.
+
+Вот пример формы, демонстрирующей использование единого поля `textarea` для ввода адреса:
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### Проектируйте формы ввода адреса с учетом интернационализации и локализации {: #internationalization-localization}
+
+В зависимости от того, в каких странах находятся ваши пользователи, при реализации форм ввода адреса особенно важно учитывать [интернационализацию и локализацию](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/).
+
+Имейте в виду, что даже в рамках одного и того же языка могут использоваться не только различные форматы адреса, но и различные названия одних и тех же элементов.
+
+```text
+    ZIP code: США
+ Postal code: Канада
+    Postcode: Великобритания
+     Eircode: Ирландия
+         PIN: Индия
+```
+
+Пользователь может испытывать раздражение или недоумение, сталкиваясь с формой, которая не подходит для его адреса или использует не те слова, к которым он привык.
+
+Формы ввода адреса на сайте могут потребовать адаптации [для различных локализаций](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region), но в некоторых случаях достаточно просто сделать форму как можно более гибкой (как описано выше). Если вы решили обойтись без локализации форм ввода адреса, примите во внимание следующие ключевые принципы, которые позволят обеспечить поддержку различных видов адресов:
+
+- Избегайте излишней конкретики в отношении частей адреса. Например, не следует запрашивать название улицы или номер дома.
+- По возможности старайтесь не помечать поля как `required`. Во многих странах адреса не имеют почтового индекса, а адреса в сельской местности могут не иметь названий улиц.
+- Используйте именование, охватывающее как можно более широкий круг пользователей: «Страна/регион», а не «Страна»; «ZIP-код/почтовый индекс», а не «ZIP-код».
+
+Стремитесь к высокому уровню гибкости. Приведенный выше [пример простой формы ввода адреса](#address-textarea) может быть адаптирован для пользователей из различных регионов.
+
+#### Учитывайте недостатки поиска адреса по почтовому индексу {: #postal-code-address-lookup}
+
+Некоторые сайты используют сервисы поиска адресов по почтовому индексу или ZIP-коду. В некоторых случаях это уместно, однако вам нужно учитывать потенциальные недостатки.
+
+Поиск адреса по индексу работает не во всех странах, а в некоторых регионах к одному почтовому индексу может принадлежать большое количество адресов.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Одному почтовому индексу может соответствовать множество адресов.</figcaption></figure>
+
+Пользователям трудно выбирать адреса из длинного списка, особенно если они просматривают страницу с мобильного устройства, находясь в спешке или в напряженном состоянии. В такой ситуации будет проще и надежнее воспользоваться автозаполнением, чтобы в одно касание или нажатие вставить адрес в форму.
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Единое поле ввода позволяет заполнять адрес в одно касание (или нажатие).</figcaption></figure>
+
+## Упрощайте формы оплаты {: #general-guidelines}
+
+Форма оплаты — это наиболее важная часть процесса оформления заказа. Плохой дизайн формы оплаты — [одна из распространенных причин возникновения брошенных корзин](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs). Необходимо [внимание к мелочам](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1): даже мелкие неполадки могут отбить у пользователя желание совершать покупку, особенно на мобильных устройствах. Ваша задача — проектировать формы таким образом, чтобы процесс ввода данных был максимально легким.
+
+### Не заставляйте пользователей вводить платежную информацию вручную {: #payment-form-autocomplete}
+
+Поля для ввода данных банковской карты, таких как номер, имя держателя и срок действия, должны использовать соответствующие значения атрибута `autocomplete`:
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+Это позволяет браузерам безопасно сохранять данные банковских карт и автоматически вставлять их при заполнении форм. Отсутствие автозаполнения может приводить к тому, что пользователи будут хранить данные карты в физическом виде или в виде небезопасной копии на устройстве.
+
+{% Aside 'caution' %} Не заставляйте пользователя выбирать тип банковской карты, так как его всегда можно определить по ее номеру. {% endAside %}
+
+### Избегайте использования нестандартных элементов для ввода срока действия карты
+
+Неправильно спроектированные [нестандартные элементы](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) могут нарушать работу автозаполнения и тем самым создавать помехи при оплате, а также не поддерживаются устаревшими браузерами. Если автоматическое заполнение данных банковской карты срабатывает для всех полей, но не для поля срока действия, использующего нестандартный элемент, пользователю придется смотреть его на самой карте, что с большой вероятностью отобьет у него желание совершать покупку. Поэтому предпочтительнее использовать стандартные HTML-элементы с соответствующим стилем.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="Скриншот формы оплаты с нестандартными элементами ввода срока действия, мешающими работе автозаполнения.", width="800", height="916" %} <figcaption>Автозаполнение сработало для всех полей — за исключением срока действия карты.</figcaption></figure>
+
+### Используйте единое поле для ввода номеров телефона и банковских карт {: #single-number-input}
+
+Для ввода номеров телефона и банковских карт используйте единое поле; не разбивайте номер на части. Это упрощает процесс ввода данных и их валидацию, а также позволяет использовать автозаполнение в браузере. Это же справедливо и для других числовых данных, таких как PIN-коды и защитные коды карт.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="Скриншот формы оплаты. Поле номера банковской карты разбито на четыре элемента ввода.", width="800", height="833" %} <figcaption>Не используйте раздельные поля для ввода номера банковской карты.</figcaption></figure>
+
+### Будьте аккуратны при валидации ввода {: #validate}
+
+Валидацию вводимых данных необходимо выполнять как в реальном времени, так и перед отправкой формы. Один из способов заключается в том, чтобы указать для поля ввода номера карты атрибут `pattern`. Если пользователь попытается отправить форму оплаты с неверно указанным значением, браузер покажет предупреждение и установит фокус на поле ввода. Использование JavaScript не требуется.
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+Однако регулярное выражение, указанное в атрибуте `pattern`, должно быть достаточно гибким, чтобы обрабатывать [номера банковских карт различной длины](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35): от 14 (или менее) до 20 (или более) цифр. Подробнее о структуре номеров банковских карт можно узнать в [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number).
+
+Разрешите пользователям вводить номера карт через пробелы, поскольку именно в таком виде они указываются на физической карте. Это снизит вероятность оттолкнуть пользователя (вам не придется сообщать ему, что он допустил ошибку) и уменьшает число помех в процессе конверсии; кроме того, удаление пробелов при обработке номера является тривиальной задачей.
+
+{% Aside %} Для подтверждения оплаты или личности пользователя целесообразно использовать одноразовые коды, однако ручной ввод кода из электронного письма или SMS-сообщения — это трудоемкий и ненадежный процесс. О том, как правильно запрашивать одноразовые коды, можно узнать в статье [Рекомендации по использованию форм с SMS OTP](/sms-otp-form). {% endAside %}
+
+## Тестируйте форму на различных версиях устройств, платформ и браузеров {: #test-platform}
+
+Формы оплаты и ввода адреса особенно важно тестировать на платформах, которые чаще всего встречаются у ваших пользователей, поскольку функциональность и внешний вид элементов форм могут различаться, а отличия в размерах области просмотра могут приводить к проблемам с позиционированием. Сервис BrowserStack [бесплатное тестирование на различных устройствах и браузерах](https://www.browserstack.com/open-source) для проектов с открытым исходным кодом.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="Скриншоты формы оплаты с сайта payment-form.glitch.me на iPhone 7 и 11. Кнопка «Завершить оплату» видна на iPhone 11, но не 7", width="800", height="707" %} <figcaption>Отображение одной и той же страницы на iPhone 7 и iPhone 11.<br>Чтобы кнопка <strong>Завершить оплату</strong> оставалась видимой, необходимо уменьшить поля на небольших экранах мобильных устройств.</figcaption></figure>
+
+## Внедрите аналитику и RUM {: #analytics-rum}
+
+Локальное тестирование удобства использования и производительности может быть полезным, но достоверно оценить удобство форм оплаты и ввода адреса можно только в условиях реальной эксплуатации.
+
+Для этого вам понадобится аналитика и Real User Monitoring («мониторинг реальных пользователей») — этот термин обозначает данные об опыте реальных пользователей, такие как время загрузки страниц оформления заказа или время заполнения формы оплаты:
+
+- **Аналитика страниц**: число просмотров, показатели отказов, а также показатели выходов для каждой страницы с формой.
+- **Аналитика взаимодействия**: [последовательности переходов к цели](https://support.google.com/analytics/answer/6180923?hl=en) и [события](https://developers.google.com/analytics/devguides/collection/gtagjs/events) позволяют понять, на каких этапах пользователи прекращают оформление заказа и какие действия они предпринимают при взаимодействии с формами.
+- **Производительность сайта**: [метрики, ориентированные на пользователей](/user-centric-performance-metrics), помогут вам узнать скорость загрузки страниц оформления заказа, а также выявить причины медленной загрузки.
+
+Аналитика страниц, аналитика взаимодействия и измерение производительности на реальных пользователях становятся особенно ценными инструментами, если использовать их в комбинации с журналами сервера, данными о конверсиях и A/B-тестированием. С их помощью можно выяснить, помогают ли скидочные коды повысить доход, повышаются ли конверсии при использовании нового дизайна формы и многое другое.
+
+Это, в свою очередь, дает прочную основу для расстановки приоритетов, внесения изменений и вознаграждения успеха.
+
+## Обучающие ресурсы {: #resources}
+
+- [Рекомендации по формам входа в систему](/sign-in-form-best-practices)
+- [Рекомендации по формам регистрации](/sign-up-form-best-practices)
+- [Подтвердите номера телефонов в Интернете с помощью API WebOTP](/web-otp)
+- [Как создавать потрясающие формы](/learn/forms/)
+- Рекомендации по разработке форм для мобильных устройств
+- Функциональные элементы управления в формах
+- [Создание доступных форм](https://webaim.org/techniques/forms/)
+- [Оптимизация процесса регистрации с помощью API управления учетными данными](https://developer.chrome.com/blog/credential-management-api/)
+- [Руководство Фрэнка по почтовым адресам](http://www.columbia.edu/~fdc/postal/) содержит полезные ссылки и подробные инструкции по форматам адресов в более чем 200 странах.
+- На [Countries Lists](http://www.countries-list.info/Download-List) есть инструмент для скачивания кодов и названий стран на различных языках и в различных форматах.
+
+Автор фото: [@rupixen](https://unsplash.com/@rupixen) с [Unsplash](https://unsplash.com/photos/Q59HmzK38eQ).
diff --git a/src/site/content/ru/blog/prefers-color-scheme/index.md b/src/site/content/ru/blog/prefers-color-scheme/index.md
new file mode 100644
index 00000000000..2096d771248
--- /dev/null
+++ b/src/site/content/ru/blog/prefers-color-scheme/index.md
@@ -0,0 +1,458 @@
+---
+layout: post
+title: "«И опять приходит тьма»: prefers-color-scheme"
+subhead: Переоцененная возможность или необходимость? Всё о тёмном режиме и о том, как обеспечить его поддержку на благо пользователей!
+authors:
+  - thomassteiner
+date: 2019-06-27
+updated: 2020-08-02
+hero: image/admin/dgDcIJUyuWB5xNn9CODd.jpg
+hero_position: bottom
+alt:
+  Фото силуэта горы ночью, автор — Натан Андерсон (Nathan Anderson), платформа Unsplash.
+description:
+  Сегодня во многих устройствах есть тёмный режим в рамках всей ОС или просто тёмные темы.
+  В этой статье рассказывается о поддержке тёмного режима на веб-страницах, приведены соответствующие рекомендации и описывается специальный элемент «dark-mode-toggle», благодаря которому пользователи могут переопределять настройки операционной системы на конкретных веб-страницах.
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## Введение
+
+{% Aside 'note' %} Я много изучал историю и теорию тёмного режима, поэтому если вас интересует только практическая работа с ним, смело [пропускайте введение](#activating-dark-mode-in-the-operating-system). {% endAside %}
+
+### Тёмный режим до появления термина *тёмный режим*
+
+<figure data-float="right">   {% Img src="image/admin/fmdRPm6K5SXiIRLgyz4y.jpg", alt="Компьютерный монитор с зеленым экраном", width="233", height="175" %}   <figcaption>Зеленый экран (<a href="https://commons.wikimedia.org/wiki/File:Compaq_Portable_and_Wordperfect.JPG">источник</a>) </figcaption></figure>
+
+История с тёмным режимом замкнулась. На заре персональных компьютеров «тёмный режим» был не вопросом выбора, а единственной возможностью: монохромные <abbr title="Cathode-Ray Tube">ЭЛТ</abbr> в компьютерных мониторах испускали электронные лучи на фосфоресцирующий экран с зеленым люминофором. Текст отображался зеленым цветом на черном фоне, поэтому такие мониторы часто назывались [зелеными экранами](https://commons.wikimedia.org/wiki/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg).
+
+<figure data-float="left">   {% Img src="image/admin/l9oDlIO59oyJiXVegxIV.jpg", alt="Обработка текста в режиме «тёмный текст на белом фоне»", width="222", height="175" %}   <figcaption>Тёмный текст на белом фоне (<a href="https://www.youtube.com/watch?v=qKkABzt0Zqg">источник</a>)</figcaption></figure>
+
+Появившиеся впоследствии цветные ЭЛТ отображали несколько цветов — за счет использования красного, зеленого и синего люминофоров. Белый цвет формировался при одновременной активации всех трех люминофоров. С появлением более сложных <a>настольных издательских систем</a>, работающих по принципу <abbr>WYSIWYG</abbr>, стала популярной идея делать виртуальный документ похожим на физический лист бумаги.
+
+<figure data-float="right">   {% Img src="image/admin/lnuLLcQzIF7r08lt479k.png", alt="Браузер WorldWideWeb с веб-страницей в режиме «тёмный текст на белом фоне»", width="233", height="175" %}   <figcaption>Браузер WorldWideWeb (<a href="https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png">источник</a>)</figcaption></figure>
+
+Концепция *темный текст на белом фоне* прижилась и была перенесена в [ранний интернет](http://info.cern.ch/hypertext/WWW/TheProject.html), поскольку тогда веб-страницы представляли собой в первую очередь документ. Самый первый браузер — [WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb) (помните: [CSS еще не изобрели](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History)) [отображал веб-страницы](https://commons.wikimedia.org/wiki/File:WorldWideWeb_FSF_GNU.png) именно так. Интересно, что второй браузер — [Line Mode Browser](https://en.wikipedia.org/wiki/Line_Mode_Browser), работавший в терминале — отображал страницы зеленым текстом на тёмном фоне. В наши дни на веб-страницах и в веб-приложениях обычно используется тёмный текст на светлом фоне — это базовое предположение, которое, к тому же, жестко закодировано в таблицах стилей браузеров, включая [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css).
+
+<figure data-float="left">   {% Img src="image/admin/zCdyRdnAnbrB7aAB0TQi.jpg", alt="Человек использует смартфон, лежа в постели", width="262", height="175" %}   <figcaption>Человек использует смартфон, лежа в постели (источник: Unsplash)</figcaption></figure>
+
+Времена ЭЛТ давно прошли. Мы начали потреблять и создавать контент на мобильных устройствах, в которых используются <abbr title="Liquid Crystal Display">ЖК</abbr>-дисплеи с подсветкой и энергоэффективные <abbr title="Active-Matrix Organic Light-Emitting Diode">AMOLED</abbr>-экраны. Уменьшение габаритов компьютеров, появление планшетов и смартфонов привело к новым моделям использования. Мы часто проводим досуг — просматриваем веб-страницы, программируем «для себя», запускаем игры, — после окончания рабочего дня в условиях низкой освещенности и даже в постели ночью. Чем больше людей используют гаджеты в темноте, тем популярней становится идея вернуться к отображению контента в режиме *светлый текст на тёмном фоне*.
+
+### Зачем нужен тёмный режим
+
+#### Использование тёмного режима по эстетическим соображениям
+
+Если поспрашивать, [почему люди предпочитают тёмный режим](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d), самым популярным ответом будет *«меньше нагрузка на глаза»*, а на втором месте — *«это элегантно и красиво»*. Apple в [документации по тёмному режиму для разработчиков](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface) так и пишут: *«Выбор между тёмным и светлым внешним видом для большинства пользователей — вопрос эстетики и может не иметь отношения к условиям освещения».*
+
+{% Aside 'note' %} Можете почитать [исследование о причинах, по которым пользователи выбирают тёмный режим, и вариантах его использования](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d). {% endAside %}
+
+<figure data-float="right">   {% Img src="image/admin/WZ9I5g1YGG6S1TjygEIq.png", alt="CloseView в Mac OS System 7 с режимом «Черный на белом» (Black on White)", width="193", height="225" %}   <figcaption>System 7 CloseView (<a href="https://archive.org/details/mac_Macintosh_System_7_at_your_Fingertips_1992">источник</a>)</figcaption></figure>
+
+#### Тёмный режим как инструмент специальных возможностей
+
+Есть люди (например, пользователи со слабым зрением), которым тёмный режим *нужен* и которые используют его как инструмент специальных возможностей. Самый ранний вариант такого применения, который я смог найти, — это функция <em>CloseView</em> в <a>System 7</a>, в которой был переключатель режимов *Черный на белом* (Black on White) и *Белый на черном* (White on Black). System 7 поддерживала цветной режим, но интерфейс по умолчанию оставался черно-белым.
+
+Недостатки основанных на инверсии вариантов стали очевидны с началом использования цветного режима. Проведенное Szpiro *et al.* исследование аудитории [об использовании вычислительных устройств людьми со слабым зрением](https://dl.acm.org/citation.cfm?id=2982168) показало, что всем опрошенным инвертированные изображения не нравились, но многие предпочитали светлый текст на тёмном фоне. Apple учитывает такое предпочтение пользователем посредством функции [Smart Invert](https://www.apple.com//accessibility/iphone/vision/), которая инвертирует цвета на экране, за исключением изображений, мультимедийных файлов и некоторых приложений, использующих стили с тёмными цветами.
+
+Существует особая форма слабого зрения — «синдром компьютерного зрения», также известный как зрительное утомление от цифровых устройств и [определяемый](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1475-1313.2011.00834.x) как *«сочетание проблем с глазами и зрением, связанных с использованием компьютеров (включая настольные, портативные и планшеты) и других электронных дисплеев (например, смартфонов и электронных устройств для чтения)»*. [Предполагают](https://bmjopen.bmj.com/content/5/1/e006748), что использование электронных устройств подростками, особенно в ночное время, повышает риск снижения продолжительности сна, задержку начала сна и дефицит сна. Кроме того, неоднократно [сообщалось](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4254760/), что воздействие синего света влияет на регуляцию [циркадного ритма](https://en.wikipedia.org/wiki/Circadian_rhythm) и цикла сна, причем нерегулярные условия освещения могут приводить к депривации сна, что будет влиять на настроение и эффективность работы (см. [исследование Розенфилда](https://www.college-optometrists.org/oip-resource/computer-vision-syndrome--a-k-a--digital-eye-strain.html). Снизить эти отрицательные эффекты можно, если уменьшить количество синего цвета посредством настройки цветовой температуры дисплея с помощью таких функций, как [Night Shift](https://support.apple.com/en-us/HT207570) в iOS или [Ночная подсветка](https://support.google.com/pixelphone/answer/7169926?) (Night Light) в Android. Также следует избегать яркого и нерегулярного освещения в целом — с помощью тёмного режима (или темы).
+
+#### Энергосбережение в тёмном режиме на AMOLED-экранах
+
+Наконец, тёмный режим позволяет *существенно* экономить энергию на <abbr title="Active-Matrix Organic Light-Emitting Diode">AMOLED</abbr>-экранах. Практические исследования популярных приложений Google на устройствах Android (например, YouTube) показали, что экономия может достигать 60 %. В видео ниже рассказывается подробнее об этих исследованиях и об экономии энергии для различных приложений.
+
+<figure data-size="full">   {% YouTube id='N_6sPd0Jd3g', startTime='305' %}</figure>
+
+## Активация тёмного режима в операционной системе
+
+Итак, мы рассмотрели предысторию тёмного режима и разобрались, почему его наличие важно для многих пользователей. Теперь давайте посмотрим, как обеспечить его поддержку.
+
+<figure data-float="left">   {% Img src="image/admin/Yh6SEoWDK1SbqcGjlL6d.png", alt="Настройки тёмной темы в Android Q", width="218", height="250" %}   <figcaption>Настройки тёмной темы в Android Q</figcaption></figure>
+
+Если операционная система поддерживает тёмный режим (или тему), обычно где-нибудь в настройках есть соответствующий переключатель. В macOS X он находится в разделе *Основные* системных настроек и называется *Оформление* (<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lUAnDhiGiZxigDbCqfn1.png'%20%7C%20imgix%20%7D%7D">скриншот</a>), а в Windows 10 его можно найти в разделе *Цвета*: пункт *Выберите свой цвет* (<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ahr8nkFttRPCe4RH8IEk.png'%20%7C%20imgix%20%7D%7D">скриншот</a>). В Android Q нужно перейти в раздел *Экран* и активировать переключатель *Тёмная тема* (<a href="%7B%7B%20'image/admin/Yh6SEoWDK1SbqcGjlL6d.png'%20%7C%20imgix%20%7D%7D">скриншот</a>), а на iOS 13 — в *Оформление* в разделе *Экран и яркость* в настройках (<a href="%7B%7B%20'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K0QTu4Elw1ETabtoJjZ1.jpg'%20%7C%20imgix%20%7D%7D">скриншот</a>).
+
+## Запрос медиа `prefers-color-scheme`
+
+Еще немного теории, прежде чем мы двинемся дальше. [Запросы медиа](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries) позволяют тестировать и запрашивать значения и функции агента пользователя или устройства отображения независимо от того, какой документ отрисовывается. Они используются в CSS-правиле `@media` для условного применения стилей к документу, а также в других контекстах и языках (например, HTML и JavaScript). Спецификация [запросов медиа, уровень 5](https://drafts.csswg.org/mediaqueries-5/), вводит так называемые функции медиа для пользовательских предпочтений, которые позволяют сайту определить предпочитаемый пользователем способ отображения контента.
+
+{% Aside 'note' %} ☝️ Среди функций медиа для предпочтений пользователя есть `prefers-reduced-motion`, которая указывает на то, что пользователь хочет видеть на странице меньше движения. Я уже <a href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion" data-md-type="link">писал о `prefers-reduced-motion`</a> раньше. {% endAside %}
+
+Функция медиа [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) позволяет узнать, какую цветовую тему запросил пользователь для страницы: тёмную или светлую. Значения могут быть следующими:
+
+- `light`: пользователь уведомил систему о том, что предпочитает светлую тему на странице (тёмный текст на светлом фоне);
+- `dark`: пользователь уведомил систему о том, что предпочитает тёмную тему на странице (светлый текст на тёмном фоне).
+
+{% Aside 'note' %} В ранней версии спецификации было и третье значение — `no-preference`, означавшее, что системе неизвестно о предпочтениях пользователя. Однако ни один браузер его не реализовал, поэтому оно было [удалено](https://github.com/w3c/csswg-drafts/issues/3857#issuecomment-634779976) из спецификации. {% endAside%}
+
+## Поддержка тёмного режима
+
+### Выясняем, поддерживает ли браузер тёмный режим
+
+Сообщение о поддержке тёмного режима передается через запрос медиа, поэтому можно легко проверить, поддерживает ли текущий браузер тёмный режим: для этого достаточно запросить `prefers-color-scheme`. Обратите внимание: я не указываю значение, а просто проверяю запрос медиа на соответствие.
+
+```js
+if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+  console.log('🎉 Тёмный режим поддерживается');
+}
+```
+
+На момент написания статьи `prefers-color-scheme` поддерживается на настольных ПК и мобильных устройствах (где это возможно) браузерами Chrome и Edge с версии 76, Firefox — с версии 67, Safari — с версии 12.1 для macOS и с версии 13 для iOS. Данные о поддержке в остальных браузерах смотрите в таблицах на [Can I use](https://caniuse.com/#feat=prefers-color-scheme).
+
+{% Aside 'note' %} Есть специальный элемент [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle), который добавляет поддержку тёмного режима в старые браузеры (см. [далее в статье](#the-lessdark-mode-togglegreater-custom-element)). {% endAside%}
+
+### Данные о предпочтениях пользователя в момент запроса
+
+Заголовок состояния клиента [`Sec-CH-Prefers-Color-Scheme`](/user-preference-media-features-headers/) позволяет сайтам получать предпочтения по цветовой схеме в момент запроса, благодаря чему сервер может встроить нужный CSS и, следовательно, избежать неправильной цветовой темы.
+
+### Тёмный режим на практике
+
+Теперь наконец посмотрим, как поддержка тёмного режима обеспечивается на практике. Как и в [Горце](https://en.wikipedia.org/wiki/Highlander_(film)), цветовой режим *должен быть только один*: или тёмный, или светлый! Почему я об этом упоминаю? Потому что это будет влиять на стратегию загрузки. **Браузер в пути критичной отрисовки не должен скачивать CSS для режима, который пользователю сейчас не нужен**. В примере, который на практике демонстрирует следующие рекомендации, я для повышения скорости загрузки разделил CSS на три части — чтобы [отложить некритичные стили](/defer-non-critical-css/):
+
+- `style.css` — общие правила, которые используются на сайте в целом;
+- `dark.css` — правила, необходимые только для тёмного режима;
+- `light.css` — правила, необходимые только для светлого режима.
+
+### Стратегия загрузки
+
+Две последних таблицы стилей — `light.css` и `dark.css` — загружаются условно с помощью запроса `<link media>`. Поначалу [не все браузеры будут поддерживать `prefers-color-scheme`](https://caniuse.com/#feat=prefers-color-scheme) (как определить, есть ли поддержка, [см. выше](#finding-out-if-dark-mode-is-supported-by-the-browser)). Поэтому я загружаю файл по умолчанию `light.css` через условно вставленный элемент `<link rel="stylesheet">` в небольшом встроенном скрипте (резервным вариантом по умолчанию может быть и тёмная тема — это не принципиально). Чтобы избежать [кратковременного показа контента без стилей](https://en.wikipedia.org/wiki/Flash_of_unstyled_content), я скрываю содержимое страницы до тех пор, пока не загрузится `light.css`.
+
+```html
+<script>
+  // Если `prefers-color-scheme` не поддерживается, переходим в светлый режим.
+  // В этом случае `light.css` будет скачан с приоритетом `highest` (самый высокий).
+  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+    document.documentElement.style.display = 'none';
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
+    );
+  }
+</script>
+<!--
+  Условная загрузка светлой или тёмной таблицы стилей. Соответствующий запросу файл
+  будет скачан с приоритетом `highest` (самый высокий), не соответствующий — с приоритетом `lowest`
+  (самый низкий). Если браузер не поддерживает `prefers-color-scheme`, ответ на запрос медиа
+  неизвестен и файлы скачиваются с приоритетом `lowest` (но
+  выше я уже установил `highest` для светлой темы по умолчанию).
+-->
+<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
+<link
+  rel="stylesheet"
+  href="/light.css"
+  media="(prefers-color-scheme: light)"
+/>
+<!-- Основная таблица стилей -->
+<link rel="stylesheet" href="/style.css" />
+```
+
+### Структура таблицы стилей
+
+Я широко использую [переменные CSS](https://developer.mozilla.org/docs/Web/CSS/var): это позволяет моему универсальному `style.css` быть… универсальным. Настройка для светлого и тёмного режимов производится в двух других файлах: `dark.css` и `light.css`. Ниже приведен фрагмент самих стилей — по нему общая идея должна быть понятна. Я объявляю две переменные: `-⁠-⁠color` и `-⁠-⁠background-color`, которые, по сути, задают базовые темы *тёмный на светлом* и *светлый на тёмном*.
+
+```css
+/* light.css: 👉 тёмный на светлом */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+}
+```
+
+```css
+/* dark.css: 👉 светлый на тёмном */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+}
+```
+
+Затем в `style.css` я использую эти переменные в правиле `body { … }`. Они определены в [псевдоклассе CSS `:root`](https://developer.mozilla.org/docs/Web/CSS/:root) — селекторе, который в HTML представляет собой элемент `<html>` и идентичен селектору `html`, за исключением того, что его специфичность выше. Благодаря этому переменные проходят по иерархии вниз, что позволяет объявлять глобальные переменные CSS.
+
+```css
+/* style.css */
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  color: var(--color);
+  background-color: var(--background-color);
+}
+```
+
+В примере кода выше вы наверняка заметили свойство [`color-scheme`](https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme) со значением `light dark` (пробел в качестве разделителя).
+
+Оно сообщает браузеру, какие цветовые темы поддерживает приложение, и позволяет активировать специальные варианты таблицы стилей в агенте пользователя, что полезно, например, чтобы браузер мог отрисовывать поля формы с тёмным фоном и светлым текстом, настроить полосы прокрутки, или использовать цвет выделения с учетом темы. Подробнее свойство `color-scheme` описано в [модуле настройки цвета CSS, уровень 1](https://drafts.csswg.org/css-color-adjust-1/).
+
+{% Aside 'note' %} 🌒 Можете почитать [подробнее о работе `color-scheme`](/color-scheme/). {% endAside %}
+
+Всё остальное — это просто определение переменных CSS для элементов на сайте. При работе с тёмным режимом очень помогает семантическая организация стилей. Например, вместо `-⁠-⁠highlight-yellow` можно использовать переменную `-⁠-⁠accent-color`, поскольку «yellow» (желтый) может и не быть желтым в тёмном режиме. Ниже — еще нескольких переменных, которые я использовал в примере.
+
+```css
+/* dark.css */
+:root {
+  --color: rgb(250, 250, 250);
+  --background-color: rgb(5, 5, 5);
+  --link-color: rgb(0, 188, 212);
+  --main-headline-color: rgb(233, 30, 99);
+  --accent-background-color: rgb(0, 188, 212);
+  --accent-color: rgb(5, 5, 5);
+}
+```
+
+```css
+/* light.css */
+:root {
+  --color: rgb(5, 5, 5);
+  --background-color: rgb(250, 250, 250);
+  --link-color: rgb(0, 0, 238);
+  --main-headline-color: rgb(0, 0, 192);
+  --accent-background-color: rgb(0, 0, 238);
+  --accent-color: rgb(250, 250, 250);
+}
+```
+
+### Полный пример
+
+В следующем [фрагменте на Glitch](https://dark-mode-baseline.glitch.me/) можно ознакомиться с полным примером, реализующим изложенные выше концепции. Попробуйте включить (выключить) тёмный режим в [настройках операционной системы](#activating-dark-mode-in-the-operating-system) и посмотрите, как отреагирует страница.
+
+<div style="height: 900px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-baseline?path=style.css&amp;previewSize=100&amp;attributionHidden=true'   } %}</div>
+
+### Влияние на загрузку
+
+Поиграв с моим примером, вы увидите, почему я загружаю `dark.css` и `light.css` через запросы медиа. Попробуйте переключить цветовой режим и перезагрузить страницу: не соответствующие запросу таблицы стилей будут загружаться, но уже с самым низким приоритетом, и поэтому не будут мешать ресурсам, которые нужны сайту в данный момент.
+
+{% Aside 'note' %} 😲 Можете почитать [о том, почему браузеры загружают таблицы стилей, не соответствующие запросам медиа](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513). {% endAside %}
+
+<figure>   {% Img src="image/admin/flTdLliru6GmqqlOKjNx.png", alt="Диаграмма сетевой загрузки: в светлом режиме CSS-файл тёмного режима загружается с самым низким приоритетом", width="800", height="417" %}   <figcaption>Сайт в светлом режиме загружает CSS для тёмного режима с самым низким приоритетом.</figcaption></figure>
+
+<figure>   {% Img src="image/admin/IDs6Le0VBhHu9QEDdxL6.png", alt="Диаграмма сетевой загрузки: в тёмном режиме CSS-файл светлого режима загружается с самым низким приоритетом", width="800", height="417" %}   <figcaption>Сайт в тёмном режиме загружает CSS для светлого режима с самым низким приоритетом.</figcaption></figure>
+
+<figure>   {% Img src="image/admin/zJqu5k3TIgcZf1OHWWIq.png", alt="Диаграмма сетевой загрузки: в используемом по умолчанию светлом режиме CSS-файл тёмного режима загружается с самым низким приоритетом", width="800", height="417" %}   <figcaption>Сайт в используемом по умолчанию светлом режиме в браузере, который не поддерживает <code>prefers-color-scheme</code>, загружает CSS для тёмного режима с самым низким приоритетом.</figcaption></figure>
+
+### Реакция на включение (выключение) тёмного режима
+
+На изменение состояния тёмного режима можно подписаться через JavaScript, как и на любое другое изменение запроса медиа. Так можно, например, динамически изменять [значок сайта](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#provide_great_icons_tiles) на странице или значение [`<meta name="theme-color">`](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#meta_theme_color_for_chrome_and_opera), которое определяет цвет панели адреса в Chrome. [Полный пример](#full-example) выше показывает эту возможность в действии: чтобы увидеть изменение значка и цвета темы, откройте [демонстрацию в отдельной вкладке](https://dark-mode-baseline.glitch.me/).
+
+```js
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+darkModeMediaQuery.addListener((e) => {
+  const darkModeOn = e.matches;
+  console.log(`Тёмный режим ${darkModeOn ? '🌒 включен' : '☀️ выключен'}.`);
+});
+```
+
+В браузерах Chromium (с версии 93) и Safari (с версии 15) цвет можно настраивать на основе запроса медиа с атрибутом `media` элемента цвета темы `meta`. При этом будет выбрано первое совпадение. Например, у вас может быть один цвет для светлого режима и другой — для тёмного. На момент написания статьи определить это в манифесте нельзя. См. [проблему w3c/manifest № 975 на GitHub](https://github.com/w3c/manifest/issues/975).
+
+```html
+<meta
+  name="theme-color"
+  media="(prefers-color-scheme: light)"
+  content="white"
+/>
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+## Отладка и тестирование тёмного режима
+
+### Эмуляция `prefers-color-scheme` в DevTools
+
+Переключать цветовую схему операционной системы быстро надоедает, поэтому теперь DevTools в Chrome позволяют эмулировать предпочитаемую цветовую схему пользователя так, что это влияет только на текущую вкладку. Откройте [командное меню](https://developer.chrome.com/docs/devtools/command-menu/), начните вводить слово `Отрисовка` (`Rendering`) и запустите команду <code>Показать "Отрисовка"</code> (<code>Show Rendering</code>), а затем измените параметр <strong>Эмулировать медиафункцию CSS prefers-color-scheme</strong> (Emulate CSS media feature prefers-color-scheme).
+
+<figure>   {% Img src="image/admin/RIq2z6Ja1zSzfNTHic5z.png", alt="Скриншот с параметром «Эмулировать медиафункцию CSS prefers-color-scheme» (Emulate CSS media feature prefers-color-scheme) на вкладке «Отрисовка» (Rendering) в DevTools браузера Chrome", width="800", height="552" %}</figure>
+
+### Как делать скриншоты для `prefers-color-scheme` с помощью Puppeteer
+
+[Puppeteer](https://github.com/GoogleChrome/puppeteer/) — это библиотека Node.js, которая дает высокоуровневый API для управления Chrome (Chromium) по [протоколу DevTools](https://chromedevtools.github.io/devtools-protocol/). Пакет [`dark-mode-screenshot`](https://www.npmjs.com/package/dark-mode-screenshot) представляет собой скрипт Puppeteer, позволяющий делать скриншоты страниц в тёмном и светлом режиме. Его можно запускать по необходимости, а можно добавить в набор тестов для непрерывной интеграции (CI).
+
+```bash
+npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
+```
+
+## Советы по реализации тёмного режима
+
+### Избегайте чисто белого цвета
+
+Вы могли заметить, что я использую не чистый белый цвет, а слегка более тёмный оттенок — чтобы не было свечения на фоне тёмного контента. Значение вроде `rgb(250, 250, 250)` отлично подойдет.
+
+### Перекрашивание и затемнение фото
+
+Сравнив скриншоты ниже, вы заметите, что изменилась не только основная тема (от *тёмного на светлом* к *светлому на тёмном*): главное изображение также выглядит иначе. Мое [исследование](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b) показало, что большинство опрошенных, работая в тёмном режиме, предпочитают чуть менее яркие изображения. Именно в этом смысле я использую термин *перекрашивание*.
+
+<div class="switcher">
+  <figure>     {% Img src="image/admin/qzzYCKNSwoJr9BBEQlR7.png", alt="Главное изображение в тёмном режиме слегка затемнено", width="800", height="618" %}     <figcaption>       Главное изображение в тёмном режиме слегка затемнено     </figcaption></figure>
+  <figure>     {% Img src="image/admin/41RbLRZ5wzkoVnIRJkNl.png", alt="Главное изображение в светлом режиме", width="800", height="618" %}     <figcaption>       Главное изображение в светлом режиме     </figcaption></figure>
+</div>
+
+Перекрасить изображения можно с помощью CSS-фильтра. Я использую селектор, выбирающий все изображения, в URL-адресе которых нет `.svg`: векторную графику (значки) можно перекрасить по-другому — подробнее об этом в [следующем абзаце](#vector-graphics-and-icons). Обратите внимание, что я снова использую [переменную CSS](https://developer.mozilla.org/docs/Web/CSS/var) — чтобы позже фильтр можно было легко изменить.
+
+{% Aside 'note' %} 🎨 Можете почитать [исследование аудитории о предпочтениях по «перекрашиванию» в тёмном режиме](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b). {% endAside %}
+
+Перекрашивание нужно только в тёмном режиме, то есть когда активен `dark.css`, поэтому в `light.css` соответствующих правил нет.
+
+```css
+/* dark.css */
+--image-filter: grayscale(50%);
+
+img:not([src*='.svg']) {
+  filter: var(--image-filter);
+}
+```
+
+#### Настройка интенсивности перекрашивания с помощью JavaScript
+
+Все мы разные, и у всех разные требования к тёмному режиму. Используя описанный выше способ перекрашивания, интенсивность оттенков серого можно сделать пользовательской настройкой [и изменять ее через JavaScript](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript). А установив значение `0%`, можно полностью отключить перекрашивание. Помните, что [`document.documentElement`](https://developer.mozilla.org/docs/Web/API/Document/documentElement) дает ссылку на корневой элемент документа — то есть, на тот же элемент, на который я могу ссылаться посредством [псевдокласса CSS `:root`](https://developer.mozilla.org/docs/Web/CSS/:root).
+
+```js
+const filter = 'grayscale(70%)';
+document.documentElement.style.setProperty('--image-filter', value);
+```
+
+### Инверсия векторной графики и значков
+
+Для векторной графики (в моем случае это значки, на которые я ссылаюсь через элементы `<img>`) способ перекрашивания другой. Согласно [исследованию людей со слабым зрением](https://dl.acm.org/citation.cfm?id=2982168), инверсия фото пользователям не нравится, но для большинства значков она работает хорошо. Здесь я также использую переменные CSS для задания степени инверсии в обычном состоянии и при наведении курсора — [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover).
+
+<div class="switcher">
+  <figure>     {% Img src="image/admin/JGYFpAPi4233HrEKTQZp.png", alt="Инвертированные значки в тёмном режиме", width="744", height="48" %}     <figcaption>       Инвертированные значки в тёмном режиме     </figcaption></figure>
+  <figure>     {% Img src="image/admin/W8AWbuqWthI6CfFsYunk.png", alt="Обычные значки в светлом режиме", width="744", height="48" %}     <figcaption>       Обычные значки в светлом режиме     </figcaption></figure>
+</div>
+
+Заметьте, что инвертирую значки я тоже только в `dark.css`, но не в `light.css`. Кроме того, у `:hover` интенсивность инверсии для двух случаев различается: в зависимости от выбранного пользователем режима значок отображается или немного темнее, или немного ярче.
+
+```css
+/* dark.css */
+--icon-filter: invert(100%);
+--icon-filter_hover: invert(40%);
+
+img[src*='.svg'] {
+  filter: var(--icon-filter);
+}
+```
+
+```css
+/* light.css */
+--icon-filter_hover: invert(60%);
+```
+
+```css
+/* style.css */
+img[src*='.svg']:hover {
+  filter: var(--icon-filter_hover);
+}
+```
+
+### Использование `currentColor` для встроенных SVG
+
+Для *встроенных* SVG вместо [фильтров инверсии](#invert-vector-graphics-and-icons) можно использовать ключевое слово CSS [`currentColor`](https://developer.mozilla.org/docs/Web/CSS/color_value#currentColor_keyword), которое представляет значение свойства `color` элемента. Это позволяет применять `color` для свойств, которые не получают это значение по умолчанию. Удобно, что если `currentColor` используется как значение [атрибутов `fill` и `stroke`](https://developer.mozilla.org/docs/Web/SVG/Tutorial/Fills_and_Strokes#Fill_and_Stroke_Attributes), оно берет свое значение из унаследованного значения свойства цвета. А что еще лучше, так это то, что такой подход работает и для [`<svg><use href="…"></svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/use), поэтому даже для отдельных ресурсов `currentColor` может применяться в контексте. Помните, что это работает только для SVG, которые *встроены* или используются через `<use href="…">`, но не для SVG, используемых по ссылке `src` в элементе изображения или иным образом через CSS. Пример смотрите в демонстрации ниже.
+
+```html/2
+<!-- Встроенный SVG -->
+<svg xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+>
+  […]
+</svg>
+```
+
+<div style="height: 950px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-currentcolor?path=light.css&amp;previewSize=100',     title: 'dark-mode-currentcolor на Glitch'   } %}</div>
+
+### Плавные переходы между режимами
+
+Переключение из тёмного режима в светлый и наоборот можно сгладить: у `color` и `background-color` есть [анимируемые CSS-свойства](https://www.quackit.com/css/css3/animations/animatable_properties/). Чтобы создать анимацию, достаточно объявить два перехода (`transition`) для двух свойств. В примере ниже проиллюстрирована общая идея. Как это работает, можно посмотреть [в демонстрации](https://dark-mode-baseline.glitch.me/).
+
+```css
+body {
+  --duration: 0.5s;
+  --timing: ease;
+
+  color: var(--color);
+  background-color: var(--background-color);
+
+  transition: color var(--duration) var(--timing), background-color var(
+        --duration
+      ) var(--timing);
+}
+```
+
+### Выбор художественного оформления в тёмном режиме
+
+В целом из соображений скорости загрузки я рекомендую работать с `prefers-color-scheme` исключительно в атрибуте `media` элементов `<link>` (а не со встроенными элементами в таблицах стилей). Однако бывают случаи, когда `prefers-color-scheme` лучше использовать и во встроенных элементах HTML-кода: например, когда нужно задать художественное оформление — то есть, общий визуальный стиль страницы и ее визуальный «язык», то, как она влияет на настроение, противопоставляет элементы и психологически обращается к целевой аудитории.
+
+В нашем случае дизайнер должен решить, какое изображение лучше всего будет работать в конкретном режиме, и может быть <em>недостаточно</em> просто <a>перекрасить изображения</a>. К счастью, элемент `<source>` показываемого изображения при использовании с `<picture>` может зависеть от атрибута `media`. В примере ниже для тёмного режима показано западное полушарие, а для светлого — восточное. Если предпочтение не указано, в остальных случаях также отображается восточное. Понятно, что это сделано исключительно в иллюстративных целях. Чтобы посмотреть, как меняется изображение, попереключайте тёмный режим на устройстве.
+
+```html
+<picture>
+  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
+  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
+  <img src="eastern.webp" />
+</picture>
+```
+
+<div style="height: 600px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://glitch.com/embed/#!/embed/dark-mode-picture?path=index.html&amp;previewSize=100',     title: 'dark-mode-picture на Glitch'   } %}</div>
+
+### Тёмный режим с возможностью отмены
+
+Как упоминалось выше в разделе [Зачем нужен тёмный режим](#why-dark-mode), основная причина его выбора для большинства пользователей — эстетическая. Поэтому кому-то может быть удобно, чтобы интерфейс операционной системы использовал тёмный режим, а веб-страницы отображались обычным образом. Следовательно, хорошим решением будет учитывать сигнал, отправляемый браузером посредством `prefers-color-scheme`, но давать пользователям возможность переопределить системную настройку.
+
+#### Специальный элемент `<dark-mode-toggle>`
+
+Я не сомневаюсь, что вы можете и сами написать соответствующий код, но проще и быстрее использовать готовый элемент (веб-компонент), который я написал специально для этой цели, — [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle): он добавляет переключатель тёмного режима (вкл./выкл.) или темы (светлая или тёмная) на страницу, и его можно настроить под себя. В примере ниже этот элемент показан в в действии (ой! 🤫 оказывается, я затащил его и во все [остальные](https://dark-mode-baseline.glitch.me/) [примеры](https://dark-mode-currentcolor.glitch.me/) [выше](https://dark-mode-picture.glitch.me/)).
+
+```html
+<dark-mode-toggle
+  legend="Переключатель тем"
+  appearance="switch"
+  dark="Тёмная"
+  light="Светлая"
+  remember="Запомнить"
+></dark-mode-toggle>
+```
+
+<div class="switcher">
+  <figure>     {% Img src="image/admin/Xy3uus69HnrkRPO4EuRu.png", alt="{dark-mode-toggle0} в светлом режиме", width="140", height="76" %}     <figcaption>       <code><dark-mode-toggle></code> в светлом режиме     </figcaption>   {/dark-mode-toggle0}</figure>
+  <figure>     {% Img src="image/admin/glRVRJpQ9hMip6MbqY9N.png", alt="{dark-mode-toggle0} в тёмном режиме", width="140", height="76" %}     <figcaption>       <code><dark-mode-toggle></code> в тёмном режиме     </figcaption>   {/dark-mode-toggle0}</figure>
+</div>
+
+Понажимайте на элементы управления тёмным режимом справа вверху в демонстрации ниже. Если установить флажок в третьем и четвертом элементах, выбранный режим сохранится, даже если перезагрузить страницу. Так посетители сайта смогут использовать интерфейс системы в тёмном режиме, а сайт просматривать в светлом — и наоборот.
+
+<div style="height: 800px; width: 100%;">   {% IFrame {     allow: 'geolocation; microphone; camera; midi; vr; encrypted-media',     src: 'https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html'   } %}</div>
+
+## Заключение
+
+Работать с тёмным режимом и реализовывать его поддержку интересно; это открывает новые дизайнерские возможности. Если раньше кто-то не мог пользоваться вашим сайтом из-за отсутствия тёмного режима, то теперь у вас будет еще один счастливый пользователь. Безусловно, вы обнаружите подводные камни и вам придется тщательно всё протестировать, но в любом случае тёмный режим — это отличная возможность показать, что вы заботитесь обо всех посетителях. Рекомендации в этой статье и удобства вроде специального элемента [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) помогут вам с легкостью реализовать продуманный и удобный тёмный режим. Если статья вам пригодилась, [твитните об этом](https://twitter.com/tomayac) мне. Если если предложения, как ее улучшить, — тоже пишите. Спасибо за то, что уделили внимание! 🌒
+
+## Ссылки по теме
+
+Материалы для запроса медиа `prefers-color-scheme`:
+
+- [Страница состояния платформы Chrome](https://chromestatus.com/feature/5109758977638400).
+- [Ошибка в Chromium](https://crbug.com/889087).
+- [Спецификация запросов медиа, уровень 5](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme).
+
+Материалы для свойства CSS и метатега `color-scheme`:
+
+- [Метатег и свойство CSS `color-scheme`](/color-scheme/).
+- [Страница состояния платформы Chrome](https://chromestatus.com/feature/5330651267989504).
+- [Ошибка в Chromium](http://crbug.com/925935).
+- [Спецификация модуля настройки цвета CSS, уровень 1](https://drafts.csswg.org/css-color-adjust-1/).
+- [Проблема с метатегом и свойством CSS в CSS WG (GitHub)](https://github.com/w3c/csswg-drafts/issues/3299).
+- [Проблема с метатегом в HTML WHATWG (GitHub)](https://github.com/whatwg/html/issues/4504).
+
+Общая информация по тёмному режиму:
+
+- [Тёмная тема в Material Design](https://material.io/design/color/dark-theme.html).
+- [Тёмный режим в Web Inspector](https://webkit.org/blog/8892/dark-mode-in-web-inspector/).
+- [Поддержка тёмного режима в WebKit](https://webkit.org/blog/8840/dark-mode-support-in-webkit/).
+- [Тёмный режим в руководстве Human Interface Guidelines от Apple](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/).
+
+Статьи по истории использования тёмного режима:
+
+- [Что делает "supported-color-schemes"? 🤔](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d)
+- [Да будет тьма! 🌚 Или нет…](https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d)
+- [Перекрашивание для тёмного режима](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b).
+
+## Благодарности
+
+Реализация функции медиа `prefers-color-scheme`, свойства CSS `color-scheme` и соответствующего метатега — это работа 👏 [Руне Лиллесвена](https://twitter.com/runeli). Руне также соредактор спецификации [модуля настройки цвета CSS, уровень 1](https://drafts.csswg.org/css-color-adjust-1/). Мне хотелось бы 🙏 поблагодарить [Лукаша Збылута](https://www.linkedin.com/in/lukasz-zbylut/), [Роуэна Меревуда](https://twitter.com/rowan_m), [Чирага Десаи](https://www.linkedin.com/in/chiragd/), и [Роба Додсона](https://twitter.com/rob_dodson) за детальную проверку этой статьи. [Стратегия загрузки](#loading-strategy) — детище [Джейка Арчибальда](https://twitter.com/jaffathecake). [Эмилио Кобос Альварес](https://twitter.com/ecbos_) указал мне правильный метод обнаружения `prefers-color-scheme`. Подсказку для SVG по ссылкам и `currentColor` я получил от [Тимоти Хэтчера](https://twitter.com/xeenon). Наконец, я благодарю анонимных участников различных исследований аудитории, которые помогли сформировать рекомендации, изложенные в этой статье. Автор главного изображения — [Натан Андерсон](https://unsplash.com/photos/kujXUuh1X0o).
diff --git a/src/site/content/ru/blog/preload-optional-fonts/index.md b/src/site/content/ru/blog/preload-optional-fonts/index.md
new file mode 100644
index 00000000000..1f951bff961
--- /dev/null
+++ b/src/site/content/ru/blog/preload-optional-fonts/index.md
@@ -0,0 +1,70 @@
+---
+title: Предотвращение сдвигов макета и мигания невидимого текста (FOIT) путем предварительной загрузки дополнительных шрифтов
+subhead: 'В Chrome 83 появилась возможность полностью избавиться от искажений макета, используя элементы link rel="preload" и font-display: optional'
+authors:
+  - houssein
+date: 2020-03-18
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
+alt: Прописная буква A из типографского набора, лежащая на белом столе.
+description: 'Благодаря оптимизации циклов рендеринга в Chrome 83 можно предотвратить смещение макета при предварительной загрузке дополнительных шрифтов. Использование элементов <link rel="preload"> и font-display: optional — самый эффективный способ обеспечить безупречный рендеринг пользовательских шрифтов.'
+tags:
+  - blog
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+{% Aside %} В Chrome 83 был усовершенствован процесс загрузки шрифтов, что позволило полностью избавиться от смещений макета и мигания невидимого текста (FOIT) при предварительной загрузке дополнительных шрифтов. {% endAside %}
+
+Благодаря оптимизации циклов рендеринга в Chrome 83 можно предотвратить смещение макета при предварительной загрузке дополнительных шрифтов. Использование элементов &lt;link rel="preload"&gt; и font-display: optional — самый эффективный способ обеспечить безупречный рендеринг пользовательских шрифтов.
+
+## Совместимость с браузерами {: #compatibility }
+
+Актуальные сведения о поддержке в разных браузерах см. в MDN по указанным ниже ссылкам.
+
+- [`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)
+- [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
+
+## Рендеринг шрифтов
+
+При динамическом изменении ресурсов на веб-странице происходит сдвиг или повторное создание макета, что приводит к смещению содержимого. При получении и рендеринге веб-шрифтов могут возникать сдвиги, вызванные выполнением двух указанных ниже операций.
+
+- Замена резервного шрифта новым («мигание текста без стиля»)
+- Отображение «невидимого» текста до тех пор, пока не будет выполнен рендеринг нового шрифта на странице («мигание невидимого текста»)
+
+С помощью свойства CSS [`font-display`](https://font-display.glitch.me/) можно изменить поведение пользовательских шрифтов при их рендеринге, используя для этого поддерживаемые значения (`auto`, `block`, `swap`, `fallback` и `optional`). Выбор используемого значения зависит от того, как должны вести себя асинхронно загружаемые шрифты. Однако до сих пор использование каждого из этих значений может приводить к повторному созданию макета при выполнении двух указанных выше операций.
+
+{% Aside %} Нестабильность макета на веб-странице можно измерить с помощью метрики [Cumulative Layout Shift](/cls/) (Совокупный сдвиг макета). {% endAside %}
+
+## Дополнительные шрифты
+
+Для свойства `font-display` используется временная шкала, состоящая из трех указанных ниже периодов. Она применяется для обработки шрифтов, которые требуется загружать, прежде чем выполнять их рендеринг.
+
+- **Блокирование:** рендеринг «невидимого» текста и переключение на веб-шрифт сразу по окончании его загрузки.
+- **Замена:** рендеринг текста с использованием резервного системного шрифта и переключение на веб-шрифт сразу по окончании его загрузки.
+- **Ошибка:** рендеринг текста с использованием резервного системного шрифта.
+
+Раньше для шрифтов, помеченных элементом `font-display: optional`, использовался период блокирования длительностью 100 мс и не использовался период замены. В этом случае перед переключением на резервный шрифт ненадолго отображается «невидимый» текст. Если не удается загрузить нужный шрифт в течение 100 мс, используется резервный шрифт, и замена шрифта не выполняется.
+
+<figure>{% Img src="image/admin/WHLORYEu864QRRveFQUz.png", alt="Схема, на которой показано, что раньше происходило на странице, если не удавалось загрузить дополнительный шрифт", width="800", height="340" %} <figcaption>Действия, которые раньше выполнял элемент <code>font-display: optional</code> в Chrome в случае загрузки нужного шрифта <b>по истечении</b> периода блокировки длительностью 100 мс</figcaption></figure>
+
+Если удается загрузить нужный шрифт до завершения периода блокирования длительностью 100 мс, браузер выполняет рендеринг пользовательского шрифта, и последний будет использоваться на странице.
+
+<figure>{% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="Схема, на которой показано, что раньше происходило на странице при своевременной загрузке дополнительного шрифта", width="800", height="318" %} <figcaption>Действия, которые раньше выполнял элемент <code>font-display: optional</code> в Chrome в случае загрузки нужного шрифта <b>до истечения</b> периода блокировки длительностью 100 мс</figcaption></figure>
+
+В обоих случаях Chrome **дважды** выполняет рендеринг страницы независимо от того, какой шрифт используется — резервный или загруженный вовремя пользовательский. Это приводит к небольшому мерцанию невидимого текста, а в случаях, когда выполняется рендеринг нового шрифта, возникают искажения макета, из-за которых перемещается часть содержимого страницы. Это происходит, даже если шрифт хранится в кэше браузера на диске, и его можно загрузить задолго до завершения периода блокировки.
+
+Благодаря [оптимизации](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632) в Chrome 83 удалось полностью избавиться от первого цикла рендеринга для дополнительных шрифтов, предварительно загружаемых с использованием элемента [`<link rel="preload'>`](/codelab-preload-web-fonts/). В результате браузер блокирует операцию рендеринга до тех пор, пока не будет загружен пользовательский шрифт либо не пройдет определенный период времени. В настоящее время период ожидания равен 100 мс, но в ближайшем будущем он, возможно, будет изменен для оптимизации производительности.
+
+<figure>{% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="Схема, на которой показано, что теперь происходит на странице, если не удается загрузить предварительно загруженный дополнительный шрифт", width="800", height="353" %} <figcaption>Действия, которые сейчас выполняет элемент <code>font-display: optional</code> в Chrome, если шрифты предварительно загружены, но загрузка нужного шрифта завершается <b>по истечении</b> периода блокировки длительностью 100 мс (отсутствует мигание невидимого текста)</figcaption></figure>
+
+<figure>{% Img src="image/admin/OEHClGFMFspaWjb3xXLY.png", alt="Схема, на которой показано, что теперь происходит на странице, если удается вовремя загрузить предварительно загруженный дополнительный шрифт", width="800", height="346" %} <figcaption>Действия, которые сейчас выполняет элемент <code>font-display: optional</code> в Chrome, если шрифты предварительно загружены и удается загрузить нужный шрифт <b>до истечения</b> периода блокировки длительностью 100 мс (отсутствует мигание невидимого текста)</figcaption></figure>
+
+Выполняя предварительную загрузку дополнительных шрифтов в Chrome, можно избавиться от искажений макета и мигания текста без стиля. Это соответствует требуемому поведению, описанному в документе [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional): использование дополнительных шрифтов никогда не должно приводить к повторному созданию макета, а пользовательские агенты могут приостанавливать рендеринг на соответствующий период времени.
+
+Несмотря на то что необязательно предварительно загружать дополнительный шрифт, такая операция значительно увеличивает вероятность загрузки шрифта до первого цикла рендеринга, особенно если этот шрифт еще не сохранен в кэше браузера.
+
+## Заключение
+
+Разработчики Chrome хотели бы, чтобы вы рассказали о своем опыте использования функции предварительной загрузки дополнительных шрифтов с учетом новых оптимизаций. Создайте [запрос](https://bugs.chromium.org/p/chromium/issues/entry), если у вас возникли какие-либо проблемы или вы хотите предложить новые функции.
diff --git a/src/site/content/ru/blog/preload-responsive-images/index.md b/src/site/content/ru/blog/preload-responsive-images/index.md
new file mode 100644
index 00000000000..71b8a63956f
--- /dev/null
+++ b/src/site/content/ru/blog/preload-responsive-images/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Предварительная загрузка адаптивных изображений
+subhead: Начиная с Chrome 73 адаптивные изображения можно комбинировать с link rel="preload", чтобы ускорить их загрузку.
+authors:
+  - yoavweiss
+description: Узнайте о новых захватывающих возможностях предварительной загрузки адаптивных изображений, позволяющих повысить комфорт пользователей.
+hero: image/admin/QDCTiiyXE11bYSZMP3Yt.jpg
+alt: Стена с висящими на ней фоторамками различных размеров.
+date: 2019-09-30
+tags:
+  - blog
+  - performance
+  - images
+feedback:
+  - api
+---
+
+В этой статье я расскажу сразу про *две* своих любимых темы: адаптивные изображения и предварительную загрузку. Как человек, который участвовал в разработке обеих функций, я очень рад возможности использовать их вместе.
+
+## Краткий обзор адаптивных изображений
+
+Представьте, что вы просматриваете веб-страницу на экране шириной в 300 пикселей и она загружает изображение, имеющее ширину 1500 пикселей. Это приведет к чрезмерному расходу мобильного трафика, поскольку экран устройства не может отобразить изображение с таким разрешением. В идеале браузер должен загрузить версию изображения с шириной *чуть больше* ширины экрана, например 325 пикселей, чтобы обеспечить высокую четкость без избыточного расхода трафика. Кроме того, такое изображение будет быстрее загружаться. [Адаптивные изображения](/serve-responsive-images/#serve-multiple-image-versions) позволяют браузеру загружать различные ресурсы в зависимости от параметров устройства. Если вы не используете [CDN для доставки изображений](/image-cdns/), для каждого изображения необходимо сгенерировать версии разных размеров и указать их в атрибуте `srcset`. Параметр `w` сообщает браузеру ширину каждой версии. В зависимости от параметров устройства браузер выбирает наиболее подходящую версию:
+
+```html
+<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
+```
+
+## Краткий обзор предварительной загрузки
+
+Механизм [предварительной загрузки](/preload-critical-assets) позволяет сообщать браузеру о критически важных ресурсах, которые необходимо загружать в первую очередь, еще до их обнаружения в HTML. Это особенно полезно для ресурсов, обнаружение которых занимает много времени, таких как шрифты в таблицах стилей, фоновые изображения, а также ресурсы, загружаемые из скриптов.
+
+```html
+<link rel="preload" as="image" href="important.png">
+```
+
+## Адаптивные изображения + предварительная загрузка = ускоренная загрузка изображений
+
+Адаптивные изображения и предварительная загрузка были доступны уже несколько лет, но в то же время чего-то не хватало: отсутствовала возможность использовать предварительную загрузку для адаптивных изображений. [Начиная с Chrome 73](https://developers.google.com/web/updates/2019/03/nic73#more) браузер может выполнять предварительную загрузку наиболее подходящего из изображений, указанных в атрибуте `srcset`, еще до обнаружения тега `img`.
+
+В зависимости от структуры сайта это может значительно ускорить отображение изображений. Мы провели тесты на сайте, который использует JavaScript для отложенной загрузки адаптивных изображений. Благодаря предварительной загрузке изображения стали загружаться на 1,2 секунды быстрее.
+
+{% Aside %}
+
+Адаптивные изображения [поддерживаются во всех современных браузерах](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility), в то время как их предварительная загрузка [поддерживается только в браузерах на основе Chromium](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility).
+
+{% endAside %}
+
+## `imagesrcset` и `imagesizes`
+
+Чтобы обеспечить поддержку предварительной загрузки адаптивных изображений, мы добавили новые атрибуты элемента `<link>`: `imagesrcset` и `imagesizes`. Они используются в тегах `<link rel="preload">`, и их синтаксис совпадает с атрибутами `srcset` и `sizes` тега `<img>`.
+
+Например, если необходимо обеспечить предварительную загрузку следующего адаптивного изображения:
+
+```html
+<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
+```
+
+…вы можете добавить в раздел `<head>` следующий HTML-код:
+
+```html
+<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
+```
+
+Это позволяет инициировать запрос с использованием логики выбора ресурсов, соответствующей значениям атрибутов `srcset` и `sizes`.
+
+## Сценарии использования
+
+### Предварительная загрузка динамически подставляемых адаптивных изображений
+
+Предположим, что ваша страница динамически загружает hero-изображения для слайд-шоу и вам известно, какое изображение будет показано в первую очередь. В этом случае будет целесообразным загружать его сразу, не дожидаясь выполнения скрипта, чтобы пользователь увидел изображение как можно быстрее.
+
+Эту проблему можно изучить на примере сайта с динамически загружаемой галереей изображений:
+
+1. Откройте в новой вкладке [сайт с примером](https://responsive-preload.glitch.me/no_preload.html).
+
+{% Instruction 'devtools-network', 'ol' %}
+
+1. В раскрывающемся списке **Ограничение** выберите **3G (высокая скорость)**.
+
+2. Снимите флажок **Отключить кеш**.
+
+3. Обновите страницу.
+
+<figure>{% Img src="image/admin/cyocwRmB3XlfY26vUZ5h.png", alt="Скриншот панели «Сеть» в Chrome DevTools.", width="800", height="481" %} <figcaption>По ступенькам на диаграмме видно, что загрузка изображений начинается только после завершения выполнения скрипта, из-за чего возникает нежелательная задержка, прежде чем пользователь сможет увидеть изображение.</figcaption></figure>
+
+Использование `preload` позволяет избавиться от задержки: изображение начинает загружаться заранее, и к тому моменту, когда браузеру потребуется его отобразить, оно, вероятно, уже будет загружено.
+
+<figure>{% Img src="image/admin/rIRdFypLWf1ljMaXCVCs.png", alt="Скриншот панели «Сеть» в Chrome DevTools.", width="800", height="481" %} <figcaption>На диаграмме видно, что изображение начинает загружаться одновременно со скриптом, что позволяет избежать нежелательной задержки и ускоряет его отображение.</figcaption></figure>
+
+Чтобы увидеть прирост, который дает предварительная загрузка, вы можете ознакомиться с аналогичной динамически загружаемой галереей изображений, но [использующей предварительную загрузку первого изображения](https://responsive-preload.glitch.me/preload.html), выполнив шаги из первого примера.
+
+{% Aside %} Как альтернативный способ решения проблемы, вы можете использовать кольцевую галерею на основе HTML-разметки, чтобы необходимые ресурсы подгружались при помощи [встроенного в браузер средства предварительной загрузки](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/). Однако такой подход может не всегда быть практичным (например, при повторном использовании существующего компонента, который не основан на HTML-разметке). {% endAside %}
+
+### Предварительная загрузка фоновых изображений при помощи image-set
+
+Если на вашей странице в зависимости от плотности пикселей экрана используются различные фоновые изображения, вы можете указать их в CSS, используя синтаксис `image-set`. Тогда браузер сможет выбрать наиболее подходящее изображение исходя из [DPR](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio) экрана.
+
+```css
+background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
+```
+
+{% Aside %}
+
+Приведенный выше синтаксис не учитывает тот факт, что для работы этой функции в браузерах на основе как Chromium, так и WebKit необходимо использовать префиксы поставщиков. Если вы планируете использовать эту функцию, рекомендуем вам инструмент [Autoprefixer](https://github.com/postcss/autoprefixer) для автоматического их добавления.
+
+{% endAside %}
+
+Недостаток фоновых изображений, указываемых при помощи CSS, заключается в том, что браузер обнаруживает их только после загрузки и обработки всего содержащегося в разделе `<head>` CSS-кода, которого может быть очень много.
+
+Эту проблему можно изучить на примере сайта с [адаптивным фоновым изображением](https://responsive-preload.glitch.me/background_no_preload.html).
+
+<figure>{% Img src="image/admin/7sjFt1RsoEOKn5zlS5zb.png", alt="Скриншот панели «Сеть» в Chrome DevTools.", width="800", height="451" %} <figcaption>В этом примере изображение начинает загружаться только после окончания загрузки CSS-кода, что приводит к нежелательной задержке перед его отображением.</figcaption></figure>
+
+Предварительная загрузка адаптивных изображений — это простой и изящный способ ускорить загрузку таких изображений.
+
+```html
+<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
+```
+
+Вы можете изучить, как меняется поведение предыдущего примера при использовании [предварительной загрузки адаптивного фонового изображения](https://responsive-preload.glitch.me/background_preload.html).
+
+<figure> {% Img src="image/admin/dOI6EmChfahBujnZOke7.png", alt="Скриншот панели «Сеть» в Chrome DevTools.", width="800", height="439" %} <figcaption>Как вы видите, загрузка изображения и CSS-кода начинается одновременно, что помогает избежать задержек и ускорить показ изображения.</figcaption></figure>
+
+## Предварительная загрузка адаптивных изображений в действии
+
+В теории предварительная загрузка адаптивных изображений может ускорить их отображение, но что происходит на практике?
+
+Чтобы ответить на этот вопрос, я создал две копии [демонстрационного PWA-приложения магазина](https://github.com/GoogleChromeLabs/sample-pie-shop); [одна из копий](https://20190710t144416-dot-pie-shop-app.appspot.com/apparel) не использует предварительную загрузку изображений, а [другая](https://20190710t132936-dot-pie-shop-app.appspot.com/apparel) использует ее для некоторых изображений. Поскольку на сайте применяется отложенная загрузка изображений при помощи JavaScript, его работу, вероятно, можно ускорить за счет предварительной загрузки изображений, расположенных в исходной области просмотра.
+
+С результатами вы можете ознакомиться [здесь](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/) (без предварительной загрузки) и [здесь](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/) (с предзагрузкой изображений). Глядя на цифры, мы видим, что показатель [Start Render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render) («начало рендеринга») остался прежним, [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) («индекс скорости») слегка улучшился (273 мс, так как изображения загружаются быстрее, но занимают небольшую площадь от общего числа пикселей), но сильнее всего отражает разницу показатель [Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md) («последнее отрисованное hero-изображение»), который улучшился на 1,2 секунды. 🎉🎉
+
+Конечно, ничто не передает разницу так наглядно, как покадровая визуализация:
+
+<figure> {% Img src="image/admin/sXyZOvsNoAY0K2NRqT4U.png", alt="Скриншот покадрового сравнения WebPageTest, показывающего, что благодаря предзагрузке изображения показываются на 1,5 секунды быстрее.", width="800", height="328" %} <figcaption>На этом покадровом сравнении видно, что при использовании предварительной загрузки изображения появляются значительно раньше, что существенно повышает комфорт пользователя.</figcaption></figure>
+
+## Предварительная загрузка и `<picture>`
+
+Если вы знакомы с адаптивными изображениями, у вас может возникнуть вопрос: «А что насчет тега [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture)?».
+
+Рабочая группа Web Performance Working Group рассматривает возможность расширить поддержку предварительной загрузки на атрибуты `srcset` и `sizes`, но не на элемент `<picture>`, который используется для так называемого [«художественного преобразования»](/codelab-art-direction/) .
+
+Почему этим сценарием использования пренебрегают?
+
+Хотя данный сценарий использования также представляет интерес, существует ряд [нерешенных технических проблем](https://calendar.perfplanet.com/2018/how-the-sausage-is-made-webperfwg-meeting-summary/), значительно усложняющих реализацию возможного решения. Кроме того, данный сценарий, по всей видимости, решается существующими средствами, хотя и не очень изящным способом (см. ниже).
+
+На основании этого рабочая группа Web Performance решила сначала реализовать поддержку предзагрузки для атрибута `srcset`, а затем оценить спрос на аналогичную функциональность для элемента `picture`.
+
+Если вам все-таки понадобится предварительная загрузка элемента `<picture>`, в качестве альтернативного решения вы можете использовать метод, описанный ниже.
+
+Рассмотрим следующий пример:
+
+```html
+<picture>
+    <source src="small_cat.jpg" media="(max-width: 400px)">
+    <source src="medium_cat.jpg" media="(max-width: 800px)">
+    <img src="huge_cat.jpg">
+</picture>
+```
+
+Логика работы элемента `<picture>` (или, если точнее, логика выбора источника изображения) такова: элементы `<source>` обходятся по порядку, пока не будет найден первый элемент с подходящим значением атрибута `media`. Именно этот элемент используется в качестве источника ресурса.
+
+Механизм адаптивной предварительной загрузки не учитывает порядок элементов, и критерии необходимо указывать с учетом этого факта:
+
+```html
+<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
+<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
+<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
+```
+
+## Подведение итогов
+
+Механизм предварительной загрузки адаптивных изображений открывает захватывающие возможности для оптимизации, которая ранее требовала нестандартных решений. Он является важным новым инструментом в арсенале разработчика, заботящегося о скорости, и позволяет оперативно доставлять пользователям важные изображения именно тогда, когда это требуется.
diff --git a/src/site/content/ru/blog/promises/index.md b/src/site/content/ru/blog/promises/index.md
new file mode 100644
index 00000000000..ed2dfef56df
--- /dev/null
+++ b/src/site/content/ru/blog/promises/index.md
@@ -0,0 +1,762 @@
+---
+title: 'Обещания JavaScript: введение'
+subhead: |2-
+
+  Обещания упрощают отложенные и асинхронные вычисления. Обещание представляет
+  операцию, которая еще не завершена.
+description: |2-
+
+  Обещания упрощают отложенные и асинхронные вычисления. Обещание представляет
+  операцию, которая еще не завершена.
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+Разработчики, приготовьтесь к поворотному моменту в истории веб-разработки.
+
+<em>[Начинается барабанная дробь]</em>
+
+В JavaScript появились обещания!
+
+<em>[Взрывается фейерверк, блестки осыпаются дождем с небес, толпа сходит с ума]</em>
+
+Здесь вы попадаете в одну из следующих категорий:
+
+- Люди вокруг вас аплодируют, но вы не понимаете, о чем идет речь. Может быть, вы даже не знаете, что такое «обещание». Вы бы пожали плечами, но придавлены грузом блесток. Если я прав, расслабьтесь — лично мне потребовались годы, чтобы понять, зачем мне вообще это надо. Пожалуй, вам стоит начать с [самого начала](#whats-all-the-fuss-about).
+- Вы воздеваете кулаки к небу, торжествуя! Вовремя, правда? Вам уже приходилось пользоваться функцией обещаний, но вас беспокоит, что API для их реализации несколько отличаются друг от друга. Какой API используется в официальной версии JavaScript? Наверное, для начала вам нужно обратиться к [терминологии](#promise-terminology).
+- Вы уже об этом знаете и посмеиваетесь над теми, кто скачет туда-сюда, будто услышав что-то новое. Насладитесь своим превосходством минутку-другую, а затем смело переходите к [справочнику по API](#promise-api-reference).
+
+## Откуда такая суета? {: #whats-all-the-fuss-about }
+
+JavaScript является однопоточным, то есть два фрагмента сценария не могут выполняться одновременно; они должны запускаться последовательно. В браузерах JavaScript разделяет поток со множеством других вещей, которые различаются от браузера к браузеру. Но обычно JavaScript находится в той же очереди, что и отрисовка, обновление стилей и обработка действий пользователя (таких как выделение текста и взаимодействие с элементами управления на формах). Действия, выполняемые с чем-то из перечисленного, задерживают все остальное.
+
+Человек многопоточен. Вы можете печатать несколькими пальцами или одновременно вести машину и разговаривать. Единственная блокирующая функция, с которой нам приходится сталкиваться, — это чихание. Во время чихания все текущие действия вынужденно приостанавливаются. Приятного в этом мало, особенно когда вы ведете машину и пытаетесь поддержать разговор. Вам наверняка не захочется писать чихающий код.
+
+Вероятно, вы использовали события и обратные вызовы, чтобы это обойти. Вот, например, события:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // ура-ура, изображение загрузилось
+});
+
+img1.addEventListener('error', function() {
+  // блин, все сломалось
+});
+```
+
+На чихание не похоже. Мы получаем изображение, добавляем пару прослушивателей, затем JavaScript может прекратить выполнение, пока не будет вызван один из этих прослушивателей.
+
+К сожалению, в приведенном выше примере возможно, что события произошли до того, как мы начали их слушать, поэтому нам нужно это обойти, используя свойство  изображений «complete»:
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // ура-ура, изображение загрузилось
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // блин, все сломалось
+});
+```
+
+Такой подход не позволяет отловить изображения с ошибками до того, как мы получим возможность их прослушать; к сожалению, DOM не дает нам такой возможности. Кроме того, здесь описана загрузка одного изображения. Все становится куда сложнее, если нам нужно отследить загрузку набора изображений.
+
+## События — не всегда лучший подход
+
+События отлично справляются с тем, что может произойти несколько раз с одним и тем же объектом — `keyup`, `touchstart` и т.д. Для таких событий вам не особенно важно знать, что произошло до того, как вы прикрепили прослушиватель. Но когда дойдет до асинхронной обработки успеха/неудачи, в идеале вам понадобится что-то такое:
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // загружено
+}).orIfFailedCallThis(function() {
+  // неудача
+});
+
+// и…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // все загружено
+}).orIfSomeFailedCallThis(function() {
+  // не удалось загрузить 1 или более
+});
+```
+
+Собственно, это и делают обещания, только с более удобным наименованием. Если бы у элементов изображений HTML был «готовый» метод, возвращающий обещание, можно было бы сделать так:
+
+```js
+img1.ready()
+.then(function() {
+  // загружено
+}, function() {
+  // неудача
+});
+
+// и…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // все загружено
+}, function() {
+  // не удалось загрузить 1 или более
+});
+```
+
+По сути, обещания немного похожи на прослушиватели событий, за исключением следующих нюансов:
+
+- Обещание может быть успешным или неудачным только один раз. Оно не может завершиться успехом или неудачей дважды, а также переключиться с успеха на неудачу или наоборот.
+- Если обещание выполнено или не выполнено, и после вы добавите обратный вызов успеха или неудачи, будет запрошен верный обратный вызов, несмотря на то, что событие произошло раньше.
+
+Это чрезвычайно полезно для асинхронной обработки успеха/неудачи, потому что вас интересует не столько точное время, когда что-то становится доступным, сколько реакция на результат.
+
+## Терминология обещаний {: #promise-terminology }
+
+[Доменик Деникола](https://twitter.com/domenic) вычитал черновик этой статьи и поставил мне двойку за терминологию. Он оставил меня после уроков, заставил 100 раз написать [«States and Fates»](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) и написал обеспокоенное письмо родителям. Несмотря на это, я все еще путаюсь в терминологии, но основы таковы:
+
+Обещание может быть:
+
+- **выполнено (fulfilled)** — действие, связанное с обещанием, выполнено успешно
+- **отклонено (rejected)** — действие, связанное с обещанием, не выполнено
+- **на рассмотрении (pending)** — еще не выполнено и не отклонено
+- **урегулировано (settled)** — выполнено или отклонено
+
+[В спецификации](https://www.ecma-international.org/ecma-262/#sec-promise-objects) также используется термин **thenable** для описания объекта, похожего на обещание, в том смысле, что у него есть метод `then`. Этот термин напоминает мне бывшего тренера сборной Англии по футболу [Терри Венейблса](https://en.wikipedia.org/wiki/Terry_Venables), так что я буду использовать его как можно реже.
+
+## Обещания теперь в JavaScript!
+
+Обещания существуют уже некоторое время в виде библиотек, таких как:
+
+- [Q](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+Вышеупомянутые обещания и обещания JavaScript имеют общее стандартизированное поведение, называемое [Promises/A+](https://github.com/promises-aplus/promises-spec). Если вы пользуетесь jQuery, там есть нечто подобное, называемое [Deferreds](https://api.jquery.com/category/deferred-object/). Однако Deferreds не совместимы с Promise/A+, что [создает некоторые отличия и делает их менее полезными](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/), так что будьте осторожны. В jQuery также есть [тип Promise](https://api.jquery.com/Types/#Promise), но это всего лишь подмножество Deferred с теми же проблемами.
+
+Хотя реализации обещаний следуют стандартизированному поведению, их общие API различаются. Обещания JavaScript похожи по API на RSVP.js. Вот как создается обещание:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // выполняем действие, скорее всего, асинхронно, затем…
+
+  if (/* все прошло как должно было */) {
+    resolve("Сработало!");
+  }
+  else {
+    reject(Error("Не вышло"));
+  }
+});
+```
+
+Конструктор обещания принимает один аргумент — обратный вызов с двумя параметрами, resolve (разрешение) и reject (отклонение). Выполните какое-нибудь действие в рамках обратного вызова, возможно, асинхронно, затем вызовите resolve, если все работает, в противном случае вызовите reject.
+
+Аналогично `throw` в старом добром JavaScript, принято, но не обязательно, вызывать reject с объектом Error. Преимущество объектов Error в том, что они захватывают трассировку стека, делая инструменты отладки более удобными.
+
+Вот как используется такое обещание:
+
+```js
+promise.then(function(result) {
+  console.log(result); // "Сработало!"
+}, function(err) {
+  console.log(err); // Error: "Не вышло"
+});
+```
+
+`then()` принимает два аргумента: обратный вызов для успеха и еще один для отказа. Оба являются необязательными, так что можно добавить обратный вызов только для успеха или неудачи.
+
+Обещания JavaScript изначально появились в DOM под названием «Futures», затем были переименованы в «Promises» и, наконец, перешли в JavaScript. Их наличие в JavaScript вместо DOM — это здорово, поскольку они будут доступны в небраузерных JS-контекстах, таких как Node.js (другой вопрос, используют ли они их в своих основных API).
+
+Хоть это и функция JavaScript, DOM вполне себе ее использует. Фактически, все новые API-интерфейсы DOM с асинхронными методами успеха/отказа будут использовать обещания. Это уже происходит с [Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota), [Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready), [ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17), [Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options), [Streams](https://github.com/whatwg/streams#basereadablestream) и т. д.
+
+## Поддержка браузеров и полизаполнение
+
+Реализации обещаний в браузерах уже существуют.
+
+Начиная с Chrome 32, Opera 19, Firefox 29, Safari 8 и Microsoft Edge, обещания включены по умолчанию.
+
+Чтобы довести браузеры, в которых отсутствует полная реализация обещаний, до соответствия спецификации или добавить обещания для других браузеров и Node.js, ознакомьтесь с [полизаполнением](https://github.com/jakearchibald/ES6-Promises#readme) (2k архив gzip).
+
+## Совместимость с другими библиотеками
+
+API обещаний JavaScript будет рассматривать что угодно с методом `then()` как объекты, подобные обещаниям, или, в терминах обещаний, `thenable` (*вздох*). Так что если вы используете библиотеку, которая возвращает обещание Q, все в порядке, они прекрасно поладят с обещаниями JavaScript.
+
+Хотя, как я уже говорил, Deferreds в jQuery немного… бесполезны. К счастью, их можно преобразовать в стандартные обещания, и сделать это стоит как можно скорее:
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+Здесь метод jQuery `$.ajax` возвращает Deferred. Так как у объекта есть метод `then()`, `Promise.resolve()` может превратить его в обещание JavaScript. Однако иногда deferred-объекты передают своим обратным вызовам несколько аргументов, например:
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+В то время как JS-обещания игнорируют все, кроме первого:
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+К счастью, обычно именно это вам и нужно, или, по крайней мере, это дает вам доступ к тому, что вам нужно. Также имейте в виду, что jQuery не следует соглашению о передаче объектов Error в reject.
+
+## Сложный асинхронный код стал проще
+
+Хорошо, давайте кое-что запрограммируем. Скажем, мы хотим:
+
+1. Запустить счетчик, чтобы зарегистрировать загрузку
+2. Получить JSON для истории, который даст нам название и URL-адреса для каждой главы
+3. Добавить заголовок на страницу
+4. Получить каждую главу
+5. Добавить историю на страницу
+6. Остановить счетчик
+
+…при этом нам нужно сообщить пользователю, если что-то пойдет не так. Также на этом этапе нам понадобится остановить счетчик, иначе он продолжит накручиваться, слетит с катушек и упадет, зацепив какой-нибудь еще элемент интерфейса.
+
+Само собой, вы не станете использовать JavaScript для передачи истории, поскольку [HTML работает быстрее](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), но этот шаблон довольно распространен при работе с API-интерфейсами: несколько выборок данных, затем, когда все готово, какие-то действия.
+
+Для начала разберемся с получением данных из сети:
+
+## Использование обещаний в XMLHttpRequest
+
+Старые API-интерфейсы будут обновлены для использования обещаний, если будет возможно реализовать обратную совместимость. `XMLHttpRequest` — главный кандидат, но пока давайте напишем простую функцию для выполнения запроса GET:
+
+```js
+function get(url) {
+  // Возвращаем новое обещание.
+  return new Promise(function(resolve, reject) {
+    // Выполняем обычные действия XHR
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // этот метод вызывается даже для 404 и т.п.
+      // поэтому проверяем статус
+      if (req.status == 200) {
+        // Разрешаем обещание с текстом ответа
+        resolve(req.response);
+      }
+      else {
+        // В остальных случаях отклоняем с текстом статуса
+        // в надежде, что там будет осмысленный текст ошибки
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Обрабатываем ошибки сети
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Выполняем запрос
+    req.send();
+  });
+}
+```
+
+А теперь воспользуемся этой функцией:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Успешно!", response);
+}, function(error) {
+  console.error("Ошибка!", error);
+})
+```
+
+Теперь мы можем делать HTTP-запросы, не набирая вручную `XMLHttpRequest`, и это здорово, потому что чем меньше мне придется видеть отвратительный горбатый регистр `XMLHttpRequest`, тем легче мне будет жить.
+
+## Формирование цепочки
+
+Одним `then()` все не кончается, методы `then` можно связывать друг с другом, чтобы преобразовать значения или последовательно выполнить дополнительные асинхронные действия.
+
+### Преобразование значений
+
+Можно преобразовывать значения, просто возвращая новое значение:
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+В качестве практического примера вернемся к:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Успешно!", response);
+})
+```
+
+Ответ в формате JSON, но сейчас мы получаем его как обычный текст. Можно изменить нашу функцию get, чтобы использовать свойство JSON [`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType), но также можно решить эту проблему при помощи обещаний:
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Ура, JSON!", response);
+})
+```
+
+Поскольку `JSON.parse()` принимает единственный аргумент и возвращает преобразованное значение, можно сократить путь:
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Ура, JSON!", response);
+})
+```
+
+Собственно, мы можем с легкостью написать функцию `getJSON()`:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+`getJSON()` по-прежнему возвращает обещание, которое извлекает URL-адрес, а затем анализирует ответ как JSON.
+
+### Организация очереди асинхронных действий
+
+Также можно связать несколько методов `then` для последовательного выполнения асинхронных действий.
+
+Когда вы возвращаете что-то из обратного вызова `then()`, в этом есть немного волшебства. Если вы возвращаете значение, следующий `then()` вызывается с этим значением. Однако, если вы возвращаете что-то похожее на обещание, следующий `then()` ожидает и вызывается только тогда, когда это обещание будет урегулировано (завершится успехом или неудачей). Например:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Получена глава 1!", chapter1);
+})
+```
+
+Здесь мы делаем асинхронный запрос к `story.json`, который дает нам набор URL-адресов для запроса, а затем запрашиваем первый из них. Именно на этом этапе обещания начинают существенно отличаться от простых паттернов обратного вызова.
+
+Можно даже написать метод быстрого вызова для получения глав:
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// пользоваться им просто:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+Мы не загружаем `story.json` до вызова `getChapter`, но при следующем вызове `getChapter` мы повторно используем обещание истории, так что `story.json` будет получен всего один раз. Обещания рулят!
+
+## Обработка ошибок
+
+Как мы видели ранее, `then()` принимает два аргумента, один для успеха, другой для неудачи (или, выражаясь языком обещаний, выполнения и отклонения):
+
+```js
+get('story.json').then(function(response) {
+  console.log("Успешно!", response);
+}, function(error) {
+  console.log("Ошибка!", error);
+})
+```
+
+Также можно использовать `catch()`:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Успешно!", response);
+}).catch(function(error) {
+  console.log("Ошибка!", error);
+})
+```
+
+В `catch()` нет ничего особенного, это не более чем обертка для `then(undefined, func)`, но более читабельная. Обратите внимание, что два приведенных выше примера кода не ведут себя одинаково — последний эквивалентен:
+
+```js
+get('story.json').then(function(response) {
+  console.log("Успешно!", response);
+}).then(undefined, function(error) {
+  console.log("Ошибка!", error);
+})
+```
+
+Разница небольшая, но чрезвычайно полезная. При отклонении обещаний выполняется переход к следующему `then()` с обратным вызовом отклонения (или `catch()`, поскольку они эквивалентны). С `then(func1, func2)` будет вызван метод `func1` или `func2`, но не оба. Однако с `then(func1).catch(func2)` оба будут вызваны при отклонении `func1`, поскольку они являются отдельными шагами в цепочке. Взгляните на следующий пример:
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Не о чем тут переживать");
+}).then(function() {
+  console.log("Все готово!");
+})
+```
+
+Приведенная выше схема очень похожа на обычную конструкцию try/catch в JavaScript — ошибки, возникающие в «try», немедленно переходят в блок `catch()`. Так это выглядит в виде блок-схемы (я просто люблю блок-схемы):
+
+<div style="position: relative; padding-top: 93%;">   <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden" src="%7B%7B%20" image="" imgix="" frameborder="0" allowtransparency="true"></iframe> </div>
+
+Вдоль синих линий обещания выполняются, вдоль красных — отклоняются.
+
+### Исключения и обещания JavaScript
+
+Отклонения случаются, когда обещание отклоняется явно, а также неявно, если в обратном вызове конструктора возникает ошибка:
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse выдает ошибку, если передать ему некорректный
+  // JSON, так что здесь будет неявное отклонение:
+  resolve(JSON.parse("Это не JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // Этого не произойдет:
+  console.log("Сработало!", data);
+}).catch(function(err) {
+  // Вот что получится на самом деле:
+  console.log("Не вышло!", err);
+})
+```
+
+Это означает, что нужно выполнять всю работу, связанную с обещаниями, внутри обратного вызова конструктора обещаний, чтобы ошибки автоматически перехватывались и становились отклонениями.
+
+То же самое касается ошибок, возникающих в обратных вызовах `then()`.
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // Это не будет работать, '/' - страница HTML, а не JSON
+  // поэтому JSON.parse выдаст ошибку
+  console.log("Сработало!", data);
+}).catch(function(err) {
+  // Вот что получится на самом деле:
+  console.log("Не вышло!", err);
+})
+```
+
+### Обработка ошибок на практике
+
+В нашей истории и главах мы можем использовать catch для отображения ошибки пользователю:
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Не удалось показать главу");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Если получить `story.chapterUrls[0]` не удалось (например, http 500 или пользователь не в сети), метод пропустит все последующие успешные обратные вызовы, включая обратный вызов в `getJSON()`, который пытается проанализировать ответ как JSON, а также обратный вызов, который добавляет на страницу chapter1.html. Вместо этого будет выполнен переход к обратному вызову catch. В результате на страницу будет добавлено сообщение «Не удалось показать главу», если какое-либо из предыдущих действий не удалось.
+
+Как и в случае с try/catch в JavaScript, ошибка перехватывается, и последующий код продолжает работу, поэтому счетчик всегда скрыт, что нам и нужно. Вышеупомянутое становится неблокирующей асинхронной версией:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Не удалось показать главу");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+Возможно, вы решите применить `catch()` только для регистрации, без восстановления после ошибки. Для этого достаточно заново выдать ошибку. Это можно сделать в нашем методе `getJSON()`:
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("не удалось выполнить getJSON для", url, err);
+    throw err;
+  });
+}
+```
+
+Итак, нам удалось получить одну главу, но нам нужны все. Сейчас мы все сделаем.
+
+## Параллелизм и последовательность: лучшее от обоих
+
+Не так-то просто мыслить асинхронно. Если вы буксуете на старте, попробуйте написать код так, как будто он синхронный. В этом случае:
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("Все готово");
+}
+catch (err) {
+  addTextToPage("Блин, сломалось: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch {id: 'promises-sync-example', height: 480}%}
+
+Это работает! Но этот код синхронный и блокирует браузер во время загрузки. Чтобы сделать его асинхронным, используем `then()` и будем выполнять все действия последовательно.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Необходимо: для всех url в story.chapterUrls получить и отобразить
+}).then(function() {
+  // И все готово!
+  addTextToPage("Все готово");
+}).catch(function(err) {
+  // Отлавливаем все ошибки, полученные в процессе
+  addTextToPage("Блин, сломалось: " + err.message);
+}).then(function() {
+  // Всегда скрываем счетчик
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+Но как мы можем просмотреть URL-адреса глав и получить их по порядку? Это **не работает**:
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Получаем главу
+  getJSON(chapterUrl).then(function(chapter) {
+    // и добавляем ее на страницу
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`forEach` не поддерживает асинхронность, поэтому наши главы будут появляться в том порядке, в каком они загружаются, как, в общем-то, было написано «Криминальное чтиво». Впрочем, здесь не криминальное чтиво, так что давайте исправим.
+
+### Создание последовательности
+
+Нам нужно превратить массив `chapterUrls` в последовательность обещаний. Можно это сделать с помощью `then()`:
+
+```js
+// Начинаем с обещания, которое всегда выполняется
+var sequence = Promise.resolve();
+
+// Просматриваем url-адреса наших глав
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Добавляем эти действия в конец последовательности
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+Здесь мы впервые сталкиваемся с методом `Promise.resolve()`, который создает обещание, выполняемое при любом значении, которое вы ему передадите. Если передать ему экземпляр `Promise`, он вернет его как есть (**примечание:** это изменение спецификации применяется еще не во всех реализациях). Если вы передадите ему что-то похожее на обещание (объект с методом `then()`), он создаст подлинное обещание `Promise`, которое будет выполнено или отклонено таким же образом. При передаче любого другого значения, например, `Promise.resolve('Hello')`, метод создаст обещание, которое будет выполнено с этим значением. Если вызвать его с пустым значением, как показано выше, обещание будет выполнено с «undefined».
+
+Также есть метод `Promise.reject(val)`, который создает обещание, отклоняемое с указанным или неопределенным значением.
+
+Мы можем привести в порядок приведенный выше код с помощью [`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce):
+
+```js
+// Просматриваем url-адреса наших глав
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Добавляем эти действия в конец последовательности
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+Этот код делает то же самое, что и в предыдущем примере, но не требует отдельной переменной sequence. Наш обратный вызов reduce выполняется для каждого элемента в массиве. Для первого вызова sequence — это `Promise.resolve()`, но для остальных вызовов это то, что мы вернули из предыдущего вызова. Метод `array.reduce` чрезвычайно полезен для сжатия массива до одного значения, которое в данном случае является обещанием.
+
+Соберем все вместе:
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Как только мы разобрались с обещанием последней главы…
+    return sequence.then(function() {
+      // …получаем следующую главу
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // и добавляем ее на страницу
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // И все готово!
+  addTextToPage("Все готово");
+}).catch(function(err) {
+  // Отлавливаем все ошибки, полученные в процессе
+  addTextToPage("Блин, сломалось: " + err.message);
+}).then(function() {
+  // Всегда скрываем счетчик
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-example', height: 480}%}
+
+И вот она, полностью асинхронная версия синхронного кода. Но мы можем добиться еще большего. На данный момент наша страница скачивается так:
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Браузеры неплохо справляются с параллельной загрузкой нескольких файлов, так что, загружая главы одну за другой, мы теряем производительность. Что нам нужно, так это загрузить их одновременно, а затем обработать их, когда все они будут получены. К счастью, для этого есть API:
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+`Promise.all` принимает массив обещаний и создает обещание, которое выполняется, когда все они успешно выполнены. Вы получаете массив результатов (значений, с которыми были выполнены обещания) в том же порядке, что и переданные вами обещания.
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Принимаем массив обещаний и ожидаем
+  return Promise.all(
+    // Соотносим наш массив url-адресов глав
+    // с массивом обещаний json глав
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Теперь json-ы глав упорядочены! Проходим по ним…
+  chapters.forEach(function(chapter) {
+    // …и добавляем на страницу
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("Все готово");
+}).catch(function(err) {
+  // отлавливаем все ошибки, полученные в процессе
+  addTextToPage("Блин, сломалось: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-all-example', height: 480}%}
+
+В зависимости от соединения такой код может отработать на несколько секунд быстрее, чем загрузка по очереди, к тому же его объем меньше, чем в нашем первом примере. Главы могут загружаться в любом порядке, но на экране они появятся в нужном.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+Однако воспринимаемую производительность все еще можно улучшить. Когда будет получена первая глава, ее нужно добавить на страницу. Это позволит пользователю начать чтение до того, как будут получены остальные главы. Когда придет третья глава, мы не будем добавлять ее на страницу, потому что пользователь может не понять, что вторая глава отсутствует. Когда придет вторая глава, мы сможем добавить вторую и третью главы и т. д.
+
+Для этого мы получаем JSON для всех наших глав одновременно, а затем создаем последовательность, чтобы добавить их в документ:
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Соотносим наш массив url-адресов глав
+  // с массивом обещаний json глав.
+  // Таким образом мы гарантируем параллельную загрузку.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Используем reduce, чтобы выстроить цепочку обещаний,
+      // добавляя на страницу содержимое каждой главы
+      return sequence
+      .then(function() {
+        // Ожидаем, пока завершится вся поледовательность,
+        // затем ожидаем получения этой главы.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("Все готово");
+}).catch(function(err) {
+  // отлавливаем все ошибки, полученные в процессе
+  addTextToPage("Блин, сломалось: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch {id: 'promises-async-best-example', height: 480}%}
+
+Вот и оно — лучшее от обоих подходов! Для доставки всего контента требуется такое же количество времени, но первую часть контента пользователь получает раньше.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+В этом простом примере все главы появляются примерно в одно и то же время, но преимущество отображения по одной за раз будет хорошо заметно, когда глав станет больше и они будут объемнее.
+
+Чтобы выполнить описанное выше при помощи [обратных вызовов или событий в стиле Node.js](https://gist.github.com/jakearchibald/0e652d95c07442f205ce), потребуется примерно вдвое больше кода, но, что более важно, написать его будет вовсе не так просто. Однако и это еще не все: в сочетании с другими функциями ES6 обещания становятся еще проще.
+
+## Бонусный раунд: расширенные возможности
+
+С тех пор, как я написал эту статью, возможности использования обещаний значительно расширились. Начиная с Chrome 55, асинхронные функции позволяют писать код на основе обещаний, как если бы он был синхронным, но без блокировки основного потока. Об этом можно прочесть в [моей статье об асинхронных функциях](/async-functions). В основных браузерах широко поддерживаются как обещания, так и асинхронные функции. Вы можете найти подробности в справочнике MDN по [обещаниям](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) и [асинхронным функциям](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function).
+
+Большое спасибо Анне ван Кестерен, Доменику Дениколе, Тому Эшворту, Реми Шарпу, Адди Османи, Артуру Эвансу и Ютаке Хирано, которые вычитали мою работу и внесли исправления и рекомендации.
+
+Также спасибо [Матиасу Биненсу](https://mathiasbynens.be/) за [обновление различных частей](https://github.com/html5rocks/www.html5rocks.com/pull/921/files) статьи.
diff --git a/src/site/content/ru/blog/read-files/index.md b/src/site/content/ru/blog/read-files/index.md
new file mode 100644
index 00000000000..296d360252f
--- /dev/null
+++ b/src/site/content/ru/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: Чтение файлов средствами JavaScript
+subhead: Как выбирать файлы, читать метаданные и содержимое файлов, а также отслеживать прогресс чтения.
+description: |2
+
+  Как выбирать файлы, читать метаданные и содержимое файлов, а также отслеживать прогресс чтения.
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+Возможность выбирать файлы на локальном устройстве пользователя и взаимодействовать с ними — это одна из наиболее часто используемых функций Интернета. С помощью этой функции пользователи могут выбирать файлы и загружать их на сервер, например, загружать фотографии или подавать налоговую отчетность и т. д. Кроме того, функция также позволяет сайтам читать файлы и управлять ими без необходимости передачи данных по сети.
+
+## Современный API доступа к файловой системе
+
+API доступа к файловой системе обеспечивает простой способ чтения и записи файлов и каталогов в локальной системе пользователя. В настоящее время он доступен в большинстве браузеров на основе Chromium, таких как Chrome или Edge. Чтобы узнать больше об этом, прочитайте статью [«API доступа к файловой системе»](/file-system-access/).
+
+Поскольку API доступа к файловой системе еще не совместим со всеми браузерами, обратите внимание на вспомогательную библиотеку [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access), которая использует новый API везде, где это возможно, но возвращается к устаревшим подходам, если API недоступен.
+
+## Классический способ работы с файлами
+
+В этом руководстве показано, как:
+
+- выбрать файлы
+    - [с использованием элементов ввода HTML](#select-input);
+    - [с использованием области перетаскивания](#select-dnd);
+- [прочитать метаданные файла](#read-metadata);
+- [прочитать содержимое файла](#read-content).
+
+## Выбор файлов {: #select}
+
+### Элемент ввода HTML {: #select-input}
+
+Самый простой способ разрешить пользователям выбирать файлы — это использовать элемент [`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file), который поддерживается во всех основных браузерах. После щелчка он позволяет пользователю выбрать один файл или несколько файлов, если включен атрибут [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes), используя встроенный в операционную систему пользовательский интерфейс выбора файлов. Когда пользователь завершает выбор файла или файлов, срабатывает событие элемента `change`. Вы можете получить доступ к списку файлов из `event.target.files`, который представляет собой объект [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Каждый элемент в `FileList` является объектом [`File`](https://developer.mozilla.org/docs/Web/API/File).
+
+```html
+<!-- The `multiple` attribute lets users select multiple files. -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %} Проверьте, является ли метод [`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read) жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает дескриптор файла, чтобы вы могли записывать обратно в файл, помимо чтения. Для этого метода можно применять [полизаполение](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files). {% endAside %}
+
+В этом примере пользователь может с помощью встроенного в операционную систему пользовательского интерфейса выбора файлов выбрать несколько файлов, которые затем записываются в консоль.
+
+{% Glitch {id: 'input-type-file', height: 480}%}
+
+#### Ограничьте типы файлов, которые пользователь может выбрать {: #accept}
+
+В некоторых случаях вы можете захотеть ограничить типы файлов, которые могут выбирать пользователи. Например, приложение для редактирования изображений должно принимать только изображения, а не текстовые файлы. Для этого вы можете добавить [`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes) к элементу ввода, чтобы указать, какие файлы принимаются.
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### Пользовательское перетаскивание {: #select-dnd}
+
+В некоторых браузерах элемент `<input type="file">` также является объектом-приёмником, что позволяет пользователям перетаскивать файлы в приложение. Но объект-приёмник мал, поэтому это неудобно. Вместо этого, после предоставления базовой функциональности с помощью `<input type="file">`, предоставьте большую настраиваемую область перетаскивания.
+
+{% Aside %} Проверьте, является ли метод [`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration) жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает дескриптор файла, чтобы вы могли записывать обратно в файл, помимо чтения. {% endAside %}
+
+#### Выберите область перетаскивания {: #choose-drop-zone}
+
+Область объекта-приёмника зависит от дизайна вашего приложения. Вы можете захотеть, чтобы только часть окна была областью перетаскивания, или, возможно, всё окно.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="Скриншот Squoosh, веб-приложения для сжатия изображений.", width="800", height="589" %} <figcaption> В Squoosh всё окно стает областью перетаскивания. </figcaption></figure>
+
+Squoosh позволяет пользователю перетаскивать изображение в любом месте окна, а щелчок по значку **выбора изображения** вызывает элемент `<input type="file">`. Что бы вы ни выбрали в качестве объекта-приёмника, убедитесь, что пользователю понятно, что он может перетаскивать файлы в эту область.
+
+#### Определите область перетаскивания {: #define-drop-zone}
+
+Чтобы включить элемент в зону перетаскивания, необходимо прослушать два события, [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event) и [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event). Событие `dragover` обновляет пользовательский интерфейс браузера, чтобы визуально показать, что действие перетаскивания создает копию файла. Событие `drop` запускается после того, как пользователь опускает файлы на область перетаскивания. Аналогично элементу ввода, вы можете получить доступ к списку файлов из `event.dataTransfer.files`, который представляет собой объект [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList). Каждый элемент в `FileList` является объектом [`File`](https://developer.mozilla.org/docs/Web/API/File).
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // Style the drag-and-drop as a "copy file" operation.
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+События [`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) и [`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) останавливают поведение браузера по умолчанию и позволяют вместо этого запускаться вашему коду. Без них браузер ушел бы с вашей страницы и открывал файлы, которые пользователь поместил в окно браузера.
+
+{# Код из примера не работает в качестве встроенного. #}
+
+Посмотрите живую демонстрацию [настраиваемой области перетаскивания](https://custom-drag-and-drop.glitch.me/).
+
+### А как насчет каталогов? {: #directories}
+
+К сожалению, на сегодня нет хорошего способа получить доступ к каталогу.
+
+Атрибут [`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory) элемента `<input type="file">` позволяет пользователю выбрать каталог или каталоги. Он поддерживается некоторыми браузерами на основе Chromium и, возможно, настольной версией Safari, но имеются [противоречивые](https://caniuse.com/#search=webkitdirectory) сведения о совместимости с другими браузерами.
+
+{% Aside %} Проверьте, является ли метод [`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents) жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает дескриптор каталога, чтобы вы могли записывать обратно в каталог, помимо чтения. Для этого метода можно применять [полизаполнение](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories). {% endAside %}
+
+Если перетаскивание включено, пользователь может попытаться перетащить каталог в область перетаскивания. Когда запускается событие drop, оно будет включать `File` для каталога, но не сможет получить доступ ни к одному из файлов в каталоге.
+
+## Чтение метаданных файла {: #read-metadata}
+
+Объект [`File`](https://developer.mozilla.org/docs/Web/API/File) содержит ряд свойств метаданных о файле. Большинство браузеров предоставляют имя файла, размер файла и тип MIME, хотя в зависимости от платформы разные браузеры могут предоставлять различную или дополнительную информацию.
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // Not supported in Safari for iOS.
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // Not supported in Firefox for Android or Opera for Android.
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // Unknown cross-browser support.
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+Вы можете увидеть это в действии в демонстрации Glitch [`input-type-file`](https://input-type-file.glitch.me/).
+
+## Чтение содержимого файла {: #read-content}
+
+Чтобы прочитать файл, используйте объект [`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader), который позволяет читать содержимое `File` в память. Вы можете указать для объекта `FileReader` методы чтения файлов [ArrayBuffer](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer), [dataURL](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) или [text](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText).
+
+```js
+function readImage(file) {
+  // Check if the file is an image.
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+В приведенном выше примере считывается предоставленный пользователем `File`, затем он преобразуется в Data URL, который используется для отображения изображения в элементе `img`. Ознакомьтесь с примером на Glitch [`read-image-file`](https://read-image-file.glitch.me/), чтобы узнать, как проверить, выбрал ли пользователь файл изображения.
+
+{% Glitch {id: 'read-image-file', height: 480}%}
+
+### Отслеживайте процесс чтения файла {: #monitor-progress}
+
+При чтении больших файлов будет целесообразно предоставлять определенный интерфейс UX, показывающий насколько далеко продвинулось чтение. Для этого используйте событие [`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event), предоставляемое `FileReader`. Событие `progress` предоставляет два свойства: количество почитанного `loaded` и общий объем чтения `total`.
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // Do something with result
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+Главное изображение взято у Vincent Botta на [Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)
diff --git a/src/site/content/ru/blog/referrer-best-practices/index.md b/src/site/content/ru/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..a97b3c18e52
--- /dev/null
+++ b/src/site/content/ru/blog/referrer-best-practices/index.md
@@ -0,0 +1,347 @@
+---
+layout: post
+title: "Лучшие практики по настройке заголовков \tReferer и Referrer-Policy"
+subhead: Лучшие практики по настройке заголовка ответа Referrer-Policy и использования реферера во входящих запросах.
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: |
+  Рассмотрите возможность установки политики реферера `strict-origin-when-cross-origin`. Она сохраняет большую часть полезности реферера, одновременно снижая риск утечки данных при запросах на другой источник.
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## Резюме
+
+- Неожиданная утечка информации при запросах на другой источник препятствует конфиденциальности пользователей в Интернете. Здесь может помочь защитная политика реферера.
+- Рассмотрите возможность установки политики реферера `strict-origin-when-cross-origin`. Она сохраняет большую часть полезности реферера, одновременно снижая риск утечки данных при запросах на другой источник.
+- Не используйте рефереры для защиты от подделки межсайтовых запросов (CSRF). Вместо этого используйте [токены CSRF](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) и другие заголовки в качестве дополнительного уровня безопасности.
+
+{% Aside %} Прежде чем мы начнем:
+
+- Если вы не уверены в разнице между «сайтом» и «источником», ознакомьтесь со статьей [«Понимание "same-site" и "same-origin"»](/same-site-same-origin/).
+- В `Referer` отсутствует буква R из-за неправильного написания в спецификации. Заголовок `Referrer-Policy` и `referrer` в JavaScript и DOM написаны правильно. {% endAside %}
+
+## Кратко о заголовках Referer и Referrer-Policy
+
+HTTP-запросы могут включать необязательный [заголовок `Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer), указывающий источник или URL-адрес веб-страницы, с которой был сделан запрос. [Заголовок `Referrer-Policy`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) определяет, какие данные будут доступны в заголовке `Referer`
+
+В приведенном ниже примере заголовок `Referer` включает полный URL-адрес страницы на сайте `site-one`, с которого был сделан запрос.
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="HTTP-запрос, включая заголовок Referer", width="800", height="573" %}</figure>
+
+Заголовок `Referer` может присутствовать в разных типах запросов:
+
+- запросы навигации, когда пользователь нажимает ссылку;
+- запросы подресурсов, когда браузер запрашивает изображения, плавающие фреймы, скрипты и другие ресурсы, которые необходимы странице.
+
+Что касается навигации и плавающих фреймов, к этим данным также можно получить доступ через JavaScript с помощью `document.referrer`.
+
+Значение `Referer` может быть полезным. Например, служба аналитики может использовать это значение, чтобы определить, что 50% посетителей на `site-two.example` пришли из `social-network.example`.
+
+Но когда полный URL-адрес, включая путь и строку запроса, отправляется в `Referer` **при запросах на другие источники**, это может нарушать **конфиденциальность** и создавать **риски для безопасности**. Взгляните на эти URL-адреса:
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="URL-адреса с путями, сопоставленными с различными угрозами конфиденциальности и безопасности.", width="800", height="370" %}</figure>
+
+URL-адреса с №1 по №5 содержат личную информацию, иногда даже идентифицирующую или конфиденциальную. Незаметная утечка данных при запросах на другие источники может поставить под угрозу конфиденциальность пользователей в Интернете.
+
+URL № 6это [возможность URL](https://www.w3.org/TR/capability-urls/). Вы не хотите, чтобы пароль попал в руки кого-либо, кроме предполагаемого пользователя. Если это произойдет, злоумышленник может завладеть учетной записью этого пользователя.
+
+**Чтобы ограничить доступ к данным реферера для запросов с вашего сайта, вы можете установить политику реферера.**
+
+## Какие политики доступны и чем они отличаются?
+
+Вы можете выбрать одну из восьми политик. В зависимости от политики данные, из заголовка `Referer` (и `document.referrer`) могут быть доступны следующие данные:
+
+- нет данных (`Referer` отсутствует);
+- только [источник](/same-site-same-origin/#origin);
+- полный URL-адрес: источник, путь и строка запроса.
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="Данные, которые могут содержаться в заголовке Referer и document.referrer.", width="800", height="255" %}</figure>
+
+Некоторые политики разработаны так, чтобы вести себя по-разному в зависимости от **контекста**: запрос на другой источник или в пределах текущего источника, безопасность, или и то, и другое (независимо от того, отправляется ли запрос из более безопасного протокола в менее безопасный). Это полезно для ограничения объема информации, передаваемой из разных источников, или для менее безопасных источниковпри сохранении разнообразия рефереров на вашем собственном сайте.
+
+Вот обзор, показывающий, как политики реферера ограничивают данные URL, доступные из заголовка Referer и `document.referrer`:
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="Различные политики рефереров и их поведение в зависимости от протокола безопасности и контекста разных источников.", width="800", height="537" %}</figure>
+
+MDN предоставляет [полный список политик и примеров поведения](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives).
+
+На заметку:
+
+- Все политики, которые принимают во внимание схему (HTTPS или HTTP) (`strict-origin`, `no-referrer-when-downgrade` и `strict-origin-when-cross-origin`), обрабатывают запросы от источника HTTP к другому источнику HTTP одинаково как запросы от источника HTTPS к другому источнику HTTPS, даже если HTTP менее безопасен. Это потому, что для этих политик имеет значение, имеет ли место **понижение уровня** безопасности, то есть может ли запрос предоставить данные из зашифрованного источника в незашифрованный. HTTP → HTTP-запрос всё время не зашифрован, поэтому понижения уровня безопасности не происходит. HTTPS → HTTP-запросы, напротив, представляют собой понижение уровня безопасности.
+- При запросе в пределах **одинакового источника** схема (HTTPS или HTTP) не меняется; следовательно, понижения уровня безопасности не происходит.
+
+## Политики реферера по умолчанию в браузерах
+
+*По состоянию на июль 2020 г.*
+
+**Если политика реферера не задана, будет использоваться политика браузера по умолчанию.**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Браузер</th>
+        <th>Политика <code>Referrer-Policy</code> умолчанию / Поведение</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>Планируется переход на <code>strict-origin-when-cross-origin</code> в <a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">версии 85</a> (ранее <code>no-referrer-when-downgrade</code>)</td>
+      </tr>
+      <tr>
+        <td>Fire Fox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">см. закрытую ошибку</a>)</li>
+            <li>
+<code>strict-origin-when-cross-origin</code> в режиме конфиденциального просмотра и для трекеров</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>
+<a href="https://github.com/privacycg/proposals/issues/13">Идут эксперименты</a> со <code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Политика, подобная <code>strict-origin-when-cross-origin</code>. Подробности см. в публикации <a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">«Предотвращение отслеживания»</a>.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Настройка политики реферера: лучшие практики
+
+{% Aside 'objective' %} Явно установите политику для повышения конфиденциальности, например, `strict-origin-when-cross-origin` (или более строгую). {% endAside %}
+
+Есть разные способы установить политики реферера для вашего сайта:
+
+- как заголовок HTTP;
+- в вашем [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML)-коде;
+- из JavaScript по [запросу](https://javascript.info/fetch-api#referrer-referrerpolicy).
+
+Вы можете установить разные политики для разных страниц, запросов или элементов.
+
+HTTP-заголовок и метаданные относятся к уровню страницы. Порядок приоритета при определении эффективной политики элемента:
+
+1. Политика на уровне элементов.
+2. Политика на уровне страницы.
+3. Браузер по умолчанию.
+
+**Пример:**
+
+`index.html`:
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+Изображение будет запрошено с политикой `no-referrer-when-downgrade`, в то время как все остальные запросы подресурсов с этой страницы будут следовать политике `strict-origin-when-cross-origin`.
+
+## Как посмотреть политику реферера?
+
+Сайт [securityheaders.com](https://securityheaders.com/) помогает определить политику, которую использует конкретный сайт или страница.
+
+Вы также можете использовать инструменты разработчика Chrome, Edge или Firefox, чтобы увидеть политику реферера, используемую для конкретного запроса. На момент написания этой статьи Safari не показывает `Referrer-Policy`, но показывает отправленный заголовок `Referer`.
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Скриншот панели Network в Chrome DevTools с заголовками Referer и Referrer-Policy.", width="800", height="416" %} <figcaption> Chrome DevTools, панель <b>Network</b> с выбранным запросом. </figcaption></figure>
+
+## Какую политику вы должны установить для своего веб-сайта?
+
+Резюме: явно установите политику для повышения конфиденциальности, например, `strict-origin-when-cross-origin` (или более строгую).
+
+### Почему «явно»?
+
+Если политика реферера не задана, будет использоваться политика браузера по умолчаниюфактически, веб-сайты часто подчиняются политике браузера по умолчанию. Но это не самый лучший вариант, потому что:
+
+- Политики браузеров по умолчанию либо `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, либо более строгиев зависимости от браузера и режима (конфиденциального просмотра или инкогнито). Таким образом, ваш сайт не будет вести себя предсказуемо в разных браузерах.
+- Браузеры принимают более строгие настройки по умолчанию, такие как `strict-origin-when-cross-origin` и такие механизмы, как [referrer trimming](https://github.com/privacycg/proposals/issues/13) для запросов на другой источник. Явный выбор политики повышения конфиденциальности до изменения стандартных настроек браузера дает вам контроль над ситуацией и помогает проводить тесты по своему усмотрению.
+
+### Почему `strict-origin-when-cross-origin` (или более строгая политика)?
+
+Вам нужна безопасная, обеспечивающая конфиденциальность и полезная политикачто вы подразумеваете под «полезной», зависит от того, что вы хотите от реферера:
+
+- **Безопасность**: если ваш веб-сайт использует HTTPS ([если нет, сделайте эту задачу приоритетной](/why-https-matters/)), вы не хотите, чтобы URL-адреса вашего веб-сайта просачивались в запросы, отличные от HTTPS. Поскольку любой в сети может их видеть, это подвергнет ваших пользователей атакам типа «человек посередине». Политики `no-referrer-when-downgrade`, `strict-origin-when-cross-origin`, `no-referrer` и `strict-origin` решают эту проблему.
+- **Повышение конфиденциальности**: при запросах на другие источники `no-referrer-when-downgrade` передает полный URL-адресэто не способствует повышению конфиденциальности. Политики `strict-origin-when-cross-origin` и `strict-origin` отправляют только источник, а `no-referrer` вообще ничего не отправляет. Это оставляет вам политики `strict-origin-when-cross-origin`, `strict-origin` и `no-referrer` в качестве вариантов повышения конфиденциальности.
+- **Польза**: `no-referrer` и `strict-origin` никогда не отправляют полный URL-адрес, даже для запросов в пределах одного и того же источника, поэтому если вам это нужно, `strict-origin-when-cross-origin`лучший вариант.
+
+Всё это означает, что **`strict-origin-when-cross-origin`**, как правило, является разумным выбором.
+
+**Пример: установка политики `strict-origin-when-cross-origin`**
+
+`index.html`:
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+Или на стороне сервера, например в Express:
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### Что если политика `strict-origin-when-cross-origin` (или более строгая) не подходит для всех ваших вариантов использования?
+
+В этом случае используйте **прогрессивный подход**: установите для вашего веб-сайта политику защиты, такую как `strict-origin-when-cross-origin` и, если необходимо, менее строгую политику для определенных запросов или элементов HTML.
+
+### Пример: политика на уровне элементов
+
+`index.html` :
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+Обратите внимание, что Safari/WebKit может ограничивать заголовок `document.referrer` или `Referer` [для межсайтовых](/same-site-same-origin/#same-site-cross-site) запросов. Смотрите [подробности](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/).
+
+### Пример: политика на уровне запроса
+
+`script.js` :
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### Что ещё нужно учесть?
+
+Выбор политики должен определяться вашим веб-сайтом и вариантами использованиярешаете вы, ваша команда и ваша компания. Если некоторые URL-адреса содержат идентифицирующие или конфиденциальные данные, установите политику защиты.
+
+{% Aside 'warning' %} Данные, которые могут показаться вам не конфиденциальными, могут быть конфиденциальными для ваших пользователей. Другой вариантваши пользователи не ждут, что данные будут незаметно передавать при запросах на другие источники. {% endAside %}
+
+## Использование реферера из входящих запросов: лучшие практики
+
+### Что делать, если функционал вашего сайта использует URL-адрес реферера из входящих запросов?
+
+#### Защитите данные пользователей
+
+Заголовок `Referer` может содержать конфиденциальные, личные или идентифицирующие данные, поэтому убедитесь, что вы относитесь к ним как к таковым.
+
+#### Имейте в виду, что получаемый вами заголовок `Referer` может измениться
+
+Использование реферера из входящих запросов на другие источники имеет ряд ограничений:
+
+- Если у вас нет контроля над реализацией отправителя запросов, вы не можете делать предположения о заголовке `Referer` (и `document.referrer`), который вы получаете. Отправитель запроса может в любой момент решить перейти на политику `no-referrer` или на более строгую политику, чем предыдущая,это означает, что вы получите меньше данных через `Referer`, чем раньше.
+- Браузеры всё чаще используют для Referrer-Policy значение по умолчанию `strict-origin-when-cross-origin`. Это означает, что теперь вы можете получать только источник (вместо полного URL-адреса реферера) во входящих запросах на другие источники, если сайт, который их отправляет, не имеет установленной политики.
+- Браузеры могут изменить способ управления `Referer`; например, в будущем они могут решить всегда обрезать рефереры до источников в запросах подресурсов на другие источники, чтобы защитить конфиденциальность пользователей.
+- `Referer` (и `document.referrer`) может содержать больше данных, чем вам нужно, например полный URL-адрес, когда вы хотите только узнать, поступил ли запрос из другого источника.
+
+#### Альтернативы `Referer`
+
+Возможно, вам придется рассмотреть альтернативы, если:
+
+- Важный функционал вашего сайта использует URL-адрес реферера из входящих запросов на другие источники;
+- И/или если ваш сайт больше не получает ту часть URL-адреса реферера, которая ему нужна в запросе на другой источник. Это происходит, когда отправитель запросов изменил свою политику или когда у них не задана политика, а политика браузера по умолчанию изменилась (как в [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)).
+
+Чтобы определить альтернативы, сначала проанализируйте, какую часть реферера вы используете.
+
+**Если вам нужен только источник ( `https://site-one.example` ):**
+
+- Если вы используете реферер в скрипте, который имеет доступ к странице верхнего уровня, альтернативой является `window.location.origin`.
+- Если возможно, используйте такие заголовки, как [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) и [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site), они дадут `Origin` или ответ, поступил ли запрос из другого источника. Возможно, именно это вам и нужно.
+
+**Если вам нужны другие элементы URL (путь, параметры запроса…):**
+
+- Параметры запроса могут относиться к вашему варианту использования, и это избавляет вас от работы по синтаксическому анализу реферера.
+- Если вы используете реферер в скрипте, который имеет доступ к странице верхнего уровня, альтернативой может быть `window.location.pathname` Извлеките только раздел пути URL-адреса и передайте его в качестве аргумента, чтобы любая потенциально конфиденциальная информация в параметрах URL-адреса не передавалась.
+
+**Если вы не можете использовать эти альтернативы:**
+
+- Проверьте, можно ли изменить ваши системы таким образом, чтобы они ожидали от отправителя запроса (`site-one.example`) явного задания нужной вам информации в какой-либо конфигурации. Плюсы: более явный, более конфиденциальный для пользователей `site-one.example` с ориентацией на будущее. Минусы: потенциально большой объем работы с вашей стороны или со стороны пользователей вашей системы.
+- Проверьте, может ли сайт, который отправляет запросы, согласиться установить политику `no-referrer-when-downgrade`. Минусы: потенциально менее конфиденциальная политика для пользователей `site-one.example`; может поддерживаться не во всех браузерах.
+
+### Защита от подделки межсайтовых запросов (CSRF)
+
+Обратите внимание, что отправитель запроса всегда может решить не отправлять реферер, установив `no-referrer` (а злоумышленник может даже подделать реферер).
+
+Используйте [токены CSRF в](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation) качестве основной защиты. Для дополнительной защиты используйте [SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites), а вместо `Referer`заголовки, такие как [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) (доступно в запросах POST и CORS) и [`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site) (если доступно).
+
+### Логирование
+
+Обязательно защитите личные или конфиденциальные данные пользователей, которые могут находиться в `Referer`.
+
+Если вы используете только источник, проверьте, может ли заголовок [`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin) применяться в качестве альтернативы. Этот заголовок может дать вам информацию для отладки более простым способом и без необходимости синтаксического анализа реферера.
+
+### Платежи
+
+Платежные сервисы могут полагаться на заголовок `Referer` входящих запросов для проверок безопасности.
+
+Например:
+
+- Пользователь нажимает кнопку **Купить** на `online-shop.example/cart/checkout`.
+- `online-shop.example` перенаправляет на `payment-provider.example` для проведения транзакцим.
+- `payment-provider.example` проверяет `Referer` этого запроса на соответствие списку допустимых `Referer`, установленных продавцами. Если заголовок не соответствует ни одной записи в списке, `payment-provider.example` отклоняет запрос. Если соответствует, продолжается обработка транзакции пользователя.
+
+#### Рекомендации по проверке безопасности потока платежей
+
+**Резюме: как платежный сервис вы можете использовать `Referer` в качестве базовой проверки против простых атак, но вам совершенно необходимо иметь другой, более надежный метод проверки.**
+
+Сам по себе заголовок `Referer` не является надежной основой для проверки: запрашивающий сайт, независимо от того, является ли он легитимным продавцом или нет, может установить политику `no-referrer`, которая сделает информацию `Referer` недоступной для платежного сервиса. Но просмотр `Referer` может помочь вам поймать наивных злоумышленников, которые не установили политику `no-referrer`. Поэтому вы можете решить использовать `Referer` в качестве первой базовой проверки. Если вы сделаете это:
+
+- **Не ждите, что `Referer` всегда будет присутствовать; и если он присутствует, проверяйте только те данные, которые он минимально будет включать: источник**. При задании списка разрешенных значений `Referer` убедитесь, что в него не включен путь, а только источник. Пример: допустимые значения `Referer` `online-shop.example` должны быть `online-shop.example`, а не `online-shop.example/cart/checkout`. Почему? Поскольку, ожидая либо отсутствия `Referer` вообще, либо значение `Referer`, которое является источником запрашивающего веб-сайта, вы предотвращаете непредвиденные ошибки, поскольку вы **не делаете предположений о политике `Referrer-Policy`** реферера, установленной вашим продавцом, или о поведении браузера, если у продавца нет установленной политики. И сайт, и браузер могут обрезать `Referer` отправленный во входящем запросе, только до источника или не отправлять `Referer` вообще.
+- Если заголовок `Referer` отсутствует или если он присутствует и ваша базовая проверка заголовка `Referer` прошла успешно: вы можете перейти к другому, более надежному методу проверки (см. ниже).
+
+**Какой метод проверки более надежен?**
+
+Один из надежных методов проверкипозволить **инициатору запроса хешировать параметры запроса** вместе с уникальным ключом. Как платежный сервис, вы можете **рассчитать тот же хеш на своей стороне** и принять запрос только в том случае, если хеш соответствует вашим расчетам.
+
+**Что происходит с `Referer`, когда торговый сайт HTTP без политики реферера перенаправляет на платежный сервис HTTPS?**
+
+Заголовок `Referer` не будет отображаться в запросе к платежному сервису HTTPS, поскольку [большинство браузеров](#default-referrer-policies-in-browsers) по умолчанию используют `strict-origin-when-cross-origin` или `no-referrer-when-downgrade`, если для веб-сайта не задана политика. Также обратите внимание, что [переход Chrome на новую политику по умолчанию](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) не изменит этого поведения.
+
+{% Aside %}
+
+Если ваш веб-сайт использует HTTP, [перейдите на HTTPS](/why-https-matters/).
+
+{% endAside %}
+
+## Заключение
+
+Защитная политика реферераотличный способ предоставить вашим пользователям больше конфиденциальности.
+
+Чтобы узнать больше о различных методах защиты ваших пользователей, ознакомьтесь с коллекцией [Safe and secure](/secure/) от web.dev!
+
+*Большое спасибо за вклад и отзывы всем рецензентам, особенно Каустубхе Говинду, Дэвиду Ван Кливу, Майку Уэсту, Сэму Даттону, Роуэну Меревуду, Джеку Баски и Кейси Баски.*
+
+## Ресурсы
+
+- [Понимание "same-site" и "same-origin"](/same-site-same-origin/).
+- [Новый заголовок безопасности: политика реферера (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/).
+- [Referrer-Policy на MDN](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy).
+- [Заголовок Referer: проблемы конфиденциальности и безопасности в MDN](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns).
+- [Изменение Chrome: намерение реализации на Blink](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ).
+- [Изменение Chrome: намерение о запуске на Blink](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8).
+- [Изменение Chrome: запись статуса](https://www.chromestatus.com/feature/6251880185331712).
+- [Изменение Chrome: сообщение в блоге о бета-версии 85](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html).
+- [Реферер обрезает поток GitHub: что делают разные браузеры](https://github.com/privacycg/proposals/issues/13).
+- [Спецификация Referrer-Policy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery).
diff --git a/src/site/content/ru/blog/resize-observer/index.md b/src/site/content/ru/blog/resize-observer/index.md
new file mode 100644
index 00000000000..3bf54c82164
--- /dev/null
+++ b/src/site/content/ru/blog/resize-observer/index.md
@@ -0,0 +1,127 @@
+---
+title: 'ResizeObserver: аналог document.onresize для элементов'
+subhead: ResizeObserver позволяет узнать, когда изменяется размер элемента.
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: Растения, растущие в коробках.
+description: ResizeObserver уведомляет об изменении размера прямоугольной области с содержимым элемента, чтобы можно было отреагировать соответствующим образом.
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+До появления `ResizeObserver` вам приходилось прикреплять прослушиватель к событию документа `resize`, чтобы получать уведомления обо всех изменениях размеров области просмотра. Затем нужно было понять, какие элементы были затронуты этим изменением, и вызвать конкретную подпрограмму в обработчике событий, чтобы отреагировать соответствующим образом. Если вам требовались новые размеры элемента после изменения размера, нужно было вызвать `getBoundingClientRect()` или `getComputedStyle()`, что могло вызвать сбой макета, если не позаботиться о пакетной обработке *всех* чтений и *всех* записей.
+
+И все это не предусматривало случаи, когда меняется размер элементов без изменения размера главного окна. Например, добавление новых дочерних элементов, установка стиля элемента `display` в значение `none` или аналогичные действия могут изменить размер элемента, его предков или элементов одного с ним уровня.
+
+Поэтому `ResizeObserver` — полезный примитив. Он реагирует на изменение размера любого из наблюдаемых элементов, независимо от того, что вызвало это изменение. Он также обеспечивает доступ к новому размеру наблюдаемых элементов.
+
+## API
+
+У всех API с суффиксом `Observer`, упомянутых выше, простой дизайн интерфейса. `ResizeObserver` — не исключение. Вы создаете объект `ResizeObserver` и передаете обратный вызов конструктору. Обратному вызову передается массив объектов `ResizeObserverEntry` — по одной записи на каждый наблюдаемый элемент — который содержит новые размеры элемента.
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// Наблюдаем один или несколько элементов
+ro.observe(someElement);
+```
+
+## Некоторые подробности
+
+### О чем сообщается?
+
+Как правило, [`ResizeObserverEntry`](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry) сообщает о блоке содержимого элемента через свойство с именем `contentRect`, которое возвращает объект [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly). Блок содержимого — это область внутри рамки с учетом внутреннего отступа.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="Схема блочной модели CSS.", width="727", height="562" %}</figure>
+
+Важно отметить, что, хотя `ResizeObserver` *сообщает* и размеры `contentRect`, и внутренние отступы, он *наблюдает* только `contentRect`. *Не путайте* `contentRect` с ограничивающей рамкой элемента. Ограничивающая рамка, как сообщает `getBoundingClientRect()`, представляет собой прямоугольник, который содержит весь элемент и его потомков. SVG являются исключением из правила, где `ResizeObserver` сообщает размеры ограничивающей рамки.
+
+Начиная с Chrome 84, `ResizeObserverEntry` имеет три новых свойства для предоставления более подробной информации. Каждое из этих свойств возвращает объект `ResizeObserverSize`, содержащий свойства `blockSize` и `inlineSize`. Эта информация касается наблюдаемого элемента во время обратного вызова.
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+Все эти элементы возвращают массивы только для чтения, так как в будущем ожидается, что они смогут поддерживать элементы, имеющие несколько фрагментов, что встречается в сценариях с несколькими столбцами. На данный момент эти массивы будут содержать только один элемент.
+
+Поддержка этих свойств платформой ограничена, но [Firefox уже поддерживает](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility) первые два.
+
+### Когда об этом сообщается?
+
+В спецификации указано, что `ResizeObserver` должен обрабатывать все события изменения размера после макетирования и до отрисовки. Благодаря этому обратный вызов `ResizeObserver` становится идеальным местом для внесения изменений в макет вашей страницы. Поскольку обработка `ResizeObserver` происходит между макетированием и отрисовкой, такой подход аннулирует только макет, но не отрисовку.
+
+### Подводные камни
+
+Вы можете задаться вопросом: что произойдет, если изменить размер наблюдаемого элемента внутри обратного вызова `ResizeObserver`? Ответ такой — сразу же будет инициирован еще один обратный вызов. К счастью, в `ResizeObserver` есть механизм, позволяющий избежать бесконечных циклов обратного вызова и циклических зависимостей. Изменения будут обрабатываться в том же кадре только в том случае, если измененный элемент находится глубже в дереве DOM, чем *наименее глубоко расположенный* элемент, обработанный в предыдущем обратном вызове. В противном случае они будут отложены до следующего кадра.
+
+## Применение
+
+`ResizeObserver` позволяет реализовывать поэлементные медиазапросы. Наблюдая за элементами, вы можете императивно определять контрольные точки своего дизайна и изменять стили элемента. В следующем [примере](https://googlechrome.github.io/samples/resizeobserver/) второй блок изменит радиус границы в соответствии с его шириной.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// Наблюдаем только второй блок
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+Еще один интересный пример — окно чата. Проблема, которая возникает в типичном макете беседы, пролистываемой сверху вниз, заключается в расположении прокрутки. Чтобы не вводить пользователя в заблуждение, полезно оставлять окно остается в нижней части беседы, где появляются новые сообщения. Кроме того, любое изменение макета (представьте, что телефон переходит с альбомной ориентации на портретную или наоборот) должно приводить к тому же результату.
+
+`ResizeObserver` позволяет написать *единственный* фрагмент кода, который обработает *оба* сценария. Изменение размера окна — это событие, которое `ResizeObserver` может захватить по определению, но вызов `appendChild()` также изменяет размер этого элемента (если не установлено `overflow: hidden`), потому что ему нужно освободить место для новых элементов. Учитывая это, для достижения желаемого эффекта потребуется всего несколько строк:
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// Наблюдаем scrollingElement при изменении размеров окна
+ro.observe(document.scrollingElement);
+// Наблюдаем хронологию для обработки новых сообщений
+ro.observe(timeline);
+```
+
+Лаконично, не правда ли?
+
+Далее можно добавить дополнительный код для обработки случая, когда пользователь прокручивает окно вручную и хочет оставить фокус на *этом* сообщении, когда придет новое.
+
+Еще один вариант использования — любой настраиваемый элемент, имеющий собственный макет. До `ResizeObserver` не было надежного способа получать уведомления об изменении его размеров, чтобы его дочерние элементы могли быть снова размещены.
+
+## Вывод
+
+`ResizeObserver` доступен в [большинстве основных браузеров](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility). В некоторых из них такая возможность появилась совсем недавно. Доступно [несколько вариантов полизаполнения](https://github.com/WICG/ResizeObserver/issues/3), но полностью дублировать функциональность `ResizeObserver` невозможно. Текущие реализации полагаются либо на периодическое обновление, либо на добавление контрольных элементов в DOM. Применение первого подхода будет разряжать батарею мобильного телефона, загружая ЦП, а использование второго модифицирует DOM и может испортить стили и другой DOM-зависимый код.
+
+Фото [Маркуса Списке](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) c [Unsplash](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
diff --git a/src/site/content/ru/blog/responsive-web-design-basics/index.md b/src/site/content/ru/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..659d9d8e4b0
--- /dev/null
+++ b/src/site/content/ru/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,335 @@
+---
+title: Основы отзывчивого веб-дизайна
+subhead: Как создавать сайты, отвечающие потребностям и возможностям устройства, на котором они просматриваются.
+description: |2-
+
+  Как создавать сайты, отвечающие потребностям и возможностям устройства, на котором они просматриваются.
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+{# TODO (kayce): Удалите это жестко запрограммированное оглавление, как только появится #1983. #}
+
+- [Установите область просмотра](#viewport).
+- [Масштабируйте контент в соответствии с размером области просмотра](#size-content).
+- [Используйте медиа-запросы CSS для создания отзывчивого макета](#media-queries).
+- [Выбирайте точки останова правильно](#breakpoints).
+- [Просматривайте точки останова медиа-запросов в Chrome DevTools](#devtools).
+
+Всё чаще для просмотра веб-страниц используются мобильные устройства, но часто они ограничены размером дисплея и требуют иного подхода к размещению контента на экране.
+
+[Итан Маркотт в своей статье на сайте «A List Apart»](http://alistapart.com/article/responsive-web-design/) впервые дал определение отзывчивому веб-дизайну как такому, который отвечает потребностям пользователей и используемых ими устройств. Макет страницы меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент в виде одного столбца; а на планшете тот же контент может быть представлен уже в виде двух столбцов.
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+Существует множество различных размеров экранов телефонов, фаблетов, планшетов, настольных компьютеров, игровых приставок, телевизоров и даже носимых устройств. Размеры экранов постоянно меняются, поэтому важно, чтобы ваш сайт мог адаптироваться к любому размеру экрана, как сегодня, так и в будущем. Кроме того, устройства имеют различные функции, с помощью которых мы взаимодействуем с ними. Например, некоторые из ваших посетителей будут использовать сенсорный экран. Современный отзывчивый дизайн учитывает все эти особенности, чтобы сделать сайт удобным для каждого.
+
+## Установите область просмотра {: #viewport}
+
+Страницы, оптимизированные для различных устройств, должны включать метатег viewport в заголовке документа. Метатег viewport дает браузеру инструкции по управлению размерами и масштабированием страницы.
+
+В попытке обеспечить максимальное удобство мобильные браузеры отображают страницу с шириной экрана рабочего стола (обычно около `980 пикселей`, хотя это зависит от устройства), а затем пытаются улучшить внешний вид содержимого, увеличивая размер шрифта и масштабируя контент, чтобы он соответствовал ширине экрана. Это означает, что размер шрифта может казаться непоследовательным для пользователей, которым приходится использовать двойное нажатие или уменьшать масштаб, чтобы увидеть контент и взаимодействовать с ним.
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+Значение метатега viewport `width=device-width` предписывает странице соответствовать ширине экрана в аппаратно-независимых пикселях. Пиксель, независимый от устройства (или плотности), — это представление одного пикселя, который на экране с высоким разрешением может состоять из множества физических пикселей. Это позволяет странице пересчитывать положение элементов контента в соответствии с различными размерами экрана, как на маленьком экране мобильного телефона, так и на большом мониторе.
+
+<figure>{% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="Скриншот страницы, на которой текст трудно прочитать, так как он сильно уменьшен", width="500", height="640" %} <figcaption> Пример загрузки страницы на устройстве без метатега viewport. <a href="https://without-vp-meta.glitch.me/">Посмотрите этот пример на Glitch</a>. </figcaption></figure>
+
+<figure>{% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="Скриншот той же страницы с удобочитаемым размером текста.", width="500", height="888" %} <figcaption> Пример загрузки страницы на устройстве с метатегом viewport. <a href="https://with-vp-meta.glitch.me/">Посмотрите этот пример на Glitch</a>. </figcaption></figure>
+
+[Некоторые браузеры](https://css-tricks.com/probably-use-initial-scale1/) сохраняют ширину страницы постоянной при повороте в альбомный режим и масштабируют страницу, а не разворачивают ее для заполнения экрана. Добавление значения `initial-scale=1` предписывает браузерам устанавливать соотношение 1:1 между пикселями CSS и аппаратно-независимыми пикселями, независимо от ориентации устройства, что позволяет странице использовать всю ширину альбомной ориентации.
+
+{% Aside 'caution' %} Чтобы старые браузеры могли правильно анализировать атрибуты, используйте запятую для разделения атрибутов. {% endAside %}
+
+Чтобы автоматизировать анализ правильности использования метатега viewport в HTML-документах, воспользуйтесь проверкой Lighthouse, которая анализирует, [используются ли в теге `<meta name="viewport">` значения `width` или `initial-scale`](https://developer.chrome.com/docs/lighthouse/pwa/viewport/).
+
+### Обеспечьте доступность области просмотра {: #available-viewport}
+
+Помимо установки `initial-scale` , вы также можете установить следующие атрибуты области просмотра:
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+При установке этих атрибутов пользователь может лишиться возможности изменять масштаб области просмотра, что может вызвать проблемы с доступностью. Поэтому мы не рекомендуем использовать эти атрибуты.
+
+## Масштабируйте контент в соответствии с размером области просмотра {: #size-content}
+
+И на настольных, и на мобильных устройствах пользователи привыкли прокручивать страницы по вертикали, а не по горизонтали; необходимость применять горизонтальную прокрутку или уменьшение масштаба, чтобы увидеть всю страницу, приведет к плохим впечатлениям от сайта.
+
+При разработке мобильного сайта с метатегом viewport можно случайно создать для страницы контент, выходящий за рамки указанной области просмотра. Например, если ширина отображаемого изображение превышает размер области просмотра, это приведет к горизонтальной прокрутке окна просмотра. Настройте контент так, чтобы он помещался в ширину области просмотра, и пользователю не приходилось прокручивать страницу по горизонтали.
+
+Чтобы автоматизировать обнаружение контента, выходящего за рамки области просмотра, воспользуйтесь проверкой Lighthouse [«Размер контента не соответствует размеру области просмотра»](https://developer.chrome.com/docs/lighthouse/pwa/content-width/).
+
+### Изображения {: #images}
+
+Изображение имеет фиксированные размеры, и если они превышают размеры области просмотра, то это приводит к появлению полосы прокрутки. Обычный способ решения этой проблемы — задать свойству `max-width` значение `100%` для всех изображений. Если размер области просмотра будет меньше изображения, изображение уменьшится до размера области просмотра. Однако так как именно свойство `max-width` равно `100%`, а не `width`, изображение не будет растягиваться больше своего естественного размера. Как правило, лучше добавить в таблицу стилей следующий код, чтобы не иметь проблем с полосой прокрутки у неправильно масштабированных изображений.
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### Добавьте размеры изображения в элемент img {: #image-sizes}
+
+При использовании `max-width: 100%` вы переопределяете естественные размеры изображения, однако вам всё равно следует использовать атрибуты `width` и `height` в теге `<img>`. Это связано с тем, что современные браузеры применяют эти сведения, чтобы зарезервировать место для изображения перед его загрузкой, чтобы избежать [смещения макета](/optimize-cls/) при загрузке контента.
+
+### Макет {: #layout}
+
+Так как размеры экрана и ширина в пикселях CSS сильно различаются у разных устройств (например, у телефонов и планшетов, и даже у разных телефонов), правильный рендеринг контента не должен зависеть от определенной ширины области просмотра.
+
+Чтобы добиться этого раньше, требовалось для элементов макета задавать значение в процентах. В приведенном ниже примере показан макет из двух столбцов с плавающими элементами, размер которых задан с помощью пикселей. Как только область просмотра становится меньше общей ширины столбцов, приходится прокручивать страницу по горизонтали, чтобы увидеть содержимое.
+
+<figure>{% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="Скриншот макета из двух столбцов, большая часть второго столбца выходит за пределы области просмотра", width="800", height="504" %} <figcaption> Плавающий макет с использованием пикселей. <a href="https://layout-floats-px.glitch.me/"> Посмотрите этот пример на Glitch</a>. </figcaption></figure>
+
+Используя проценты для ширины, столбцы всегда остаются в определенном процентном соотношении от контейнера. Это означает, что столбцы становятся уже, а не создают полосу прокрутки.
+
+{% Glitch {id: 'layout-floats-percent', путь: 'README.md'}%}
+
+Современные методы CSS-верстки, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.
+
+#### Flexbox {: #flexbox}
+
+Этот метод макета идеален, когда у вас есть набор элементов разного размера, и вы хотите, чтобы они удобно размещались в строке или строках, при этом меньшие элементы занимали меньше места, а большие — больше.
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+В отзывчивом дизайне Flexbox можно использовать для отображения элементов в одну строку или в несколько строк по мере уменьшения доступного пространства.
+
+{% Glitch {id: 'responseive-flexbox', height: 220}%}
+
+[Подробнее о Flexbox](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox).
+
+#### Макет CSS Grid {: #grid}
+
+Макет CSS Grid позволяет легко создавать гибкие сетки. Если рассмотреть предыдущий пример с плавающей точкой, то вместо того, чтобы создавать столбцы с помощью процентов, можно было бы использовать макет сетки и блок `fr`, который представляет собой часть доступного пространства в контейнере сетки.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+Grid также можно использовать для создания обычных макетов сетки с любым количеством элементов. Количество доступных рядов будет уменьшаться по мере уменьшения размера экрана. В приведенной ниже демонстрации в строке будет столько карточек с минимальным размером `200 пикселей`, сколько в эту строку поместится.
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[Подробнее о макете CSS Grid](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids).
+
+#### Макет с несколькими столбцами {: #multicol}
+
+Для некоторых типов макета можно использовать макет с несколькими столбцами (Multicol), который может создавать гибкое количество столбцов с помощью свойства `column-width` В демонстрации ниже видно, что столбцы добавляются, если есть место в `200 пикселей` для еще одного столбца.
+
+{% Glitch {id: 'response-multicol', path: 'style.css'}%}
+
+[Подробнее о Multicol](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout).
+
+## Используйте медиа-запросы CSS для создания отзывчивого макета {: #media-queries}
+
+Иногда для поддержки определенного размера экрана требуется внести в макет более значительные изменения, чем позволяют описанные выше приемы. Именно здесь и пригодятся медиа-запросы.
+
+Медиа-запросы — это простые фильтры, которые можно применять к стилям CSS. Они позволяют легко изменять стили в зависимости от типа устройства, на котором отображается контент, или особенностей этого устройства, например, ширины, высоты, ориентации, возможности наведения курсора или использования устройства в качестве сенсорного экрана.
+
+Для предоставления различных стилей печати, необходимо настроить *тип* вывода, чтобы вы могли добавить таблицу стилей со стилями печати, как показано ниже:
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+В качестве альтернативы можно включить стили печати в основную таблицу стилей с помощью медиа-запроса:
+
+```css
+@media print {
+  /* print styles go here */
+}
+```
+
+{% Aside 'note' %} Кроме того, можно включать отдельные таблицы стилей в основной файл CSS, используя синтаксис `@import`, `@import url(print.css) print;`, однако такой подход не рекомендуется по соображениям производительности. Более подробную информацию см. в разделе [«Избегайте импорта CSS»](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports). {% endAside %}
+
+При отзывчивом веб-дизайне обычно запрашиваются *функции* устройства, например, чтобы предоставлять разные макеты для маленьких экранов и для сенсорных экранов.
+
+### Медиа-запросы на основе размера области просмотра {: #viewport-media-query}
+
+Медиа-запросы позволяют создавать отзывчивую среду, в которой определенные стили применяются ко всему разнообразию экранов, от самых маленьких и до самых больших. В данном случае мы определяем размер экрана, поэтому следует проверять следующие параметры:
+
+- `width` (`min-width`, `max-width`)
+- `height` (`min-height`, `max-height`)
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch {id: 'media-query-size', path: 'index.html'}%}
+
+Все эти функции отлично поддерживаются браузерами, более подробную информацию, включая информацию о поддержке браузерами, смотрите в статьях о медиа-функциях [width](https://developer.mozilla.org/docs/Web/CSS/@media/width), [height](https://developer.mozilla.org/docs/Web/CSS/@media/height), [orientation](https://developer.mozilla.org/docs/Web/CSS/@media/orientation) и [aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio) на MDN.
+
+{% Aside 'note' %} В спецификацию включены тесты на `device-width` и `device-height`. Их следует избегать, так как они устарели. Тесты на `device-width` и `device-height` проверяли фактический размер окна устройства, что на практике было бесполезно, поскольку он может отличаться от области просмотра, например, в случае, когда пользователь изменил размер окна браузера. {% endAside %}
+
+### Медиа-запросы на основе возможностей устройства {: #capacity-media-query}
+
+Учитывая диапазон доступных устройств, нельзя предполагать, что каждое большое устройство — это обычный настольный или портативный компьютер, или что на маленьких устройствах используются только сенсорные экраны. С некоторыми новыми дополнениями к спецификации медиа-запросов появилась возможность проверять такие характеристики, как тип указателя, используемого для взаимодействия с устройством, и возможность наведения курсора на элементы.
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+Попробуйте просмотреть эту демонстрацию на разных устройствах, например на обычном настольном компьютере, телефоне или планшете.
+
+{% Glitch 'media-query-pointer' %}
+
+Эти новые функции хорошо поддерживаются во всех современных браузерах. Подробнее о медиа-функциях [hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover), [any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover), [pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer) и [any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer) читайте на страницах MDN.
+
+#### Использование `any-hover` и `any-pointer`
+
+Функции `any-hover` и `any-pointer` проверяют, есть ли у пользователя возможность навести курсор или использовать этот тип указателя, даже если это не основной способ взаимодействия с устройством. Будьте очень осторожны при их использовании. Принуждать пользователя переключаться на мышь, когда он использует сенсорный экран, не очень дружелюбно! Однако `any-hover` и `any-pointer` могут быть полезны, если важно определить тип устройства пользователя. Например, для ноутбука с сенсорным экраном и трекпадом должна существовать возможность взаимодействия с крупными и мелкими указателями, в дополнение к возможности наведения.
+
+## Выбирайте точки останова правильно {: #breakpoints}
+
+Не определяйте точки останова на основе классов устройств. Определение точек останова на основе конкретных устройств, продуктов, торговых марок или операционных систем, которые используются сегодня, усложнит дальнейшую поддержку сайта или приложения. Вместо этого сам контент должен определять, как макет адаптируется к своему контейнеру.
+
+### Выберите основные точки останова, начав с малых значений, и постепенно увеличивая {: #major-breakpoints}
+
+Создавайте контент так, чтобы он сначала помещался на небольшом экране, а затем расширяйте экран до тех пор, пока не возникнет необходимость в точке останова. Это позволяет оптимизировать точки останова в зависимости от контента и поддерживать минимально возможное количество точек останова.
+
+Рассмотрим пример из начала статьи: прогноз погоды. Первый шаг — сделать так, чтобы прогноз хорошо смотрелся на маленьком экране.
+
+<figure>{% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="Скриншот погодного приложения на узком мобильном экране", width="400", height="667" %} <figcaption> Приложение на узком экране. </figcaption></figure>
+
+Второй шаг — изменять размер браузера до тех пор, пока между элементами не возникнет слишком много белого пространства, и прогноз просто перестанет хорошо смотреться. Решение несколько субъективное, но размер в `600 пикселей` — это определенно слишком широко.
+
+<figure>{% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="Скриншот погодного приложения с большими промежутками между элементами", width="400", height="240" %} <figcaption> Макет приложения достиг той точки, когда нужно подправить дизайн. </figcaption></figure>
+
+Чтобы вставить точку останова при ширине `600 пикселей`, создайте два медиа-запроса в конце CSS-кода для компонента: один запрос при ширине до `600 пикселей`, а другой — более `600 пикселей`.
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+Третий шаг — выполните рефакторинг CSS-кода. В медиа-запрос для `max-width` в `600 пискелей` добавьте CSS-код только для маленьких экранов. В медиа-запрос для `min-width` в `601 пиксель` добавьте CSS-код для больших экранов.
+
+#### При необходимости выберите второстепенные точки останова
+
+Помимо выбора основных точек останова при значительных изменениях макета, полезно также корректировать незначительные изменения. Например, между основными точками останова полезно изменить поля или отступы для элемента или увеличить размер шрифта, чтобы в макете он выглядел более естественно.
+
+Начнем с оптимизации макета для маленьких экранов. Во-первых, увеличим шрифт, если ширина области просмотра больше `360 пикселей`. Во-вторых, при наличии достаточного места можно разместить высокую и низкую температуры на одной строчке, а не друг над другом. В-третьих, можно немного увеличить иконки погоды.
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+Аналогично, для больших экранов лучше ограничить максимальную ширину панели прогноза, чтобы она не занимала всю ширину экрана.
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch {id: 'responseive-прогноз', путь: 'style.css'}%}
+
+### Оптимизируйте текст для чтения
+
+Согласно классической теории удобочитаемости, идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.
+
+<figure>{% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="Скриншот страницы с текстом на мобильном устройстве", width="400", height="488" %} <figcaption> Текст, читаемый на мобильном устройстве. </figcaption></figure>
+
+<figure>{% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="Скриншот страницы текста в браузере настольного компьютера", width="800", height="377" %} <figcaption> Текст, читаемый в браузере настольного компьютера, с добавленной точкой останова для ограничения длины строки. </figcaption></figure>
+
+Давайте подробнее рассмотрим приведенный выше пример сообщения в блоге. На маленьких экранах шрифт Roboto в `1em` отлично работает, давая 10 слов в строке, но на больших экранах требуется точка останова. В этом случае, если ширина браузера больше, чем `575 пикселей`, идеальной шириной контента будет `550 пикселей`.
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch {id: 'rwd-reading', path: 'index.html'}%}
+
+### Избегайте простого скрытия контента
+
+Будьте осторожны, выбирая, какое содержимое скрывать или показывать в зависимости от размера экрана. Не стоит просто скрывать содержимое только потому, что оно не помещается на экране. Размер экрана не является окончательным показателем того, что может понадобиться пользователю. Например, исключение количества пыльцы из прогноза погоды может стать серьезной проблемой для аллергиков, которым эта информация нужна, чтобы определить, безопасно ли им выходить на улицу.
+
+## Просматривайте точки останова медиа-запросов в Chrome DevTools {: #devtools}
+
+После настройки точек останова для медиа-запросов вы захотите посмотреть, как выглядит ваш сайт с ними. Вы можете изменить размер окна браузера, чтобы вызвать точки останова, но в Chrome DevTools есть встроенная функция, которая позволяет легко увидеть, как выглядит страница при различных точках останова.
+
+<figure>{% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="Скриншот DevTools с открытым погодным приложением и выбранной шириной 822 пикселя.", width="800", height="522" %} <figcaption> DevTools показывает, как погодное приложение выглядит при более широкой области просмотра. </figcaption></figure>
+
+<figure>{% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="Скриншот DevTools с открытым погодным приложением и выбранной шириной 436 пикселей.", width="800", height="521" %} <figcaption> DevTools показывает, как погодное приложение выглядит при более узкой области просмотра. </figcaption></figure>
+
+Чтобы просмотреть свою страницу с разными точками останова:
+
+[Откройте DevTools](https://developer.chrome.com/docs/devtools/open/) и включите [Device Mode (Режим устройства)](https://developer.chrome.com/docs/devtools/device-mode/#toggle). По умолчанию он открывается в [отзывчивом режиме.](https://developer.chrome.com/docs/devtools/device-mode/#responsive)
+
+Для просмотра медиа-запросов откройте меню Device Mode и выберите [Show media queries (Показать медиа-запросы)](https://developer.chrome.com/docs/devtools/device-mode/#queries), чтобы отобразить точки останова в виде цветных полос над страницей.
+
+Щелкните одну из полос, чтобы просмотреть страницу при активном медиа-запросе. Щелкните панель правой кнопкой мыши, чтобы перейти к определению медиа-запроса.
diff --git a/src/site/content/ru/blog/samesite-cookie-recipes/index.md b/src/site/content/ru/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..53beb6bd24a
--- /dev/null
+++ b/src/site/content/ru/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,157 @@
+---
+title: Советы по использованию файлов cookie с атрибутом SameSite
+subhead: Обновите файлы cookie своего сайта, чтобы подготовиться к предстоящим изменениям в поведении атрибута SameSite.
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: Теперь, благодаря введению нового значения атрибута SameSite=None, сайты могут явно помечать файлы cookie как предназначенные для межсайтового использования. В ближайшее время браузеры станут блокировать межсайтовое использование файлов cookie без атрибута SameSite, чтобы повысить уровень безопасности и конфиденциальности. Узнайте о том, как помечать файлы cookie, чтобы после вступления изменения в силу ваши внутренние и межсайтовые файлы cookie продолжили работать.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %} Эта статься относится к циклу статей об изменениях в атрибуте `SameSite` файлов cookie:
+
+- [Объяснение SameSite — атрибута файлов cookie](/samesite-cookies-explained/)
+- [Советы по использованию файлов cookie с атрибутом SameSite](/samesite-cookie-recipes/)
+- [Same-Site с учетом схемы](/schemeful-samesite) {% endAside %}
+
+Поведение [Chrome](https://www.chromium.org/updates/same-site), [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ), [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) и других браузеров будет изменено в соответствии с предложением IETF [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00):
+
+- Файлы cookie без атрибута `SameSite` будут обрабатываться так, как будто имеют атрибут `SameSite=Lax`: по умолчанию они будут действовать **исключительно** в рамках собственного контекста.
+- Файлы cookie, предназначенные для межсайтового использования, **должны** включать атрибут `SameSite=None; Secure`, разрешающий использование в сторонних контекстах.
+
+Это поведение является [стандартным начиная со стабильной версии Chrome 84](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html). Если вы еще не обновили атрибуты своих межсайтовых файлов cookie, вам следует это сделать, чтобы избежать их блокировки в будущем.
+
+## Поддержка в браузерах
+
+См. раздел [Совместимость браузеров](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie#Browser_compatibility) на странице о [заголовке `Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) в MDN.
+
+## Примеры использования межсайтовых или сторонних файлов cookie
+
+Существует ряд распространенных случаев и сценариев использования, когда файлы cookie необходимо пересылать в стороннем контексте. Если ваш сайт фигурирует в роли поставщика или потребителя таких файлов cookie, проследите, чтобы либо вы, либо поставщик файлов cookie обновили их для обеспечения правильной работы в будущем.
+
+### Контент внутри элемента `<iframe>`
+
+Контент с другого сайта, отображаемый внутри элемента `<iframe>`, считается находящимся в стороннем контексте. Ниже перечислены стандартные сценарии использования:
+
+- Встраиваемый контент с других сайтов, например видео, карты, фрагменты кода и посты из социальных сетей.
+- Виджеты сторонних сервисов: календари, формы оплаты, бронирования, резервирования столиков и т. д.
+- Виджеты, при использовании которых факт наличия `<iframe>` менее очевиден, например кнопки соцсетей или сервисы защиты от мошенничества.
+
+В таких сценариях файлы cookie могут использоваться, помимо прочего, для сохранения состояния сеанса, хранения настроек, сбора статистики или персонализации контента для пользователей с существующими аккаунтами.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="Изображение окна браузера, в котором URL-адрес встроенного контента не совпадает с URL-адресом страницы.", width="468", height="383", style="max-width: 35vw;" %} <figcaption> Если встроенный контент загружается с сайта, отличного от основного контекста вкладки в браузере, он считается сторонним контентом. </figcaption></figure>
+
+Кроме того, поскольку веб-страницы по своей природе являются встраиваемыми, элементы `<iframe>` используются для встраивания контента, который также может просматриваться в своем родном контексте. Любые файлы cookie, используемые сайтом внутри iframe, будут обрабатываться как сторонние. Если страницы вашего сайта рассчитаны на то, чтобы их можно было легко встраивать на сторонние сайты, и при этом их функциональность зависит от файлов cookie, вам следует пометить файлы cookie как предназначенные для межсайтового использования или обеспечить корректную работу сайта при их отсутствии.
+
+### «Небезопасные» межсайтовые запросы
+
+Не следует пугаться слова «небезопасные»: оно всего лишь обозначает запросы, которые могут приводить к изменению состояния. В контексте веб-страниц это относится главным образом к POST-запросам. При безопасных переходах в главном окне, например в результате нажатия ссылки, ведущей на другой сайт, файлы cookie, помеченные как `SameSite=Lax`, продолжают действовать. Однако небезопасные межсайтовые запросы, такие как отправка формы при помощи POST, не будут включать файлы cookie.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="Изображение запроса при перемещении с одной страницы на другую.", width="719", height="382", style="max-width: 35vw;" %} <figcaption> Если входящий запрос выполняется с использованием «безопасного» метода, он будет включать файлы cookie. </figcaption></figure>
+
+Это поведение используется на сайтах, которые временно перенаправляют пользователя на другой сайт с целью совершения операции (например, входа при помощи стороннего поставщика идентификации). Перед тем как пользователь покидает сайт, в его браузер устанавливается файл cookie с одноразовым токеном, а при возвращении пользователя этот токен проверяется, чтобы предотвратить атаки с [межсайтовой подделкой запросов (CSRF)](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html). Если для возврата пользователя на сайт применяется POST-запрос, файлы cookie необходимо будет пометить как `SameSite=None; Secure`.
+
+### Удаленные ресурсы
+
+Когда страница загружает удаленные ресурсы (теги `<img>`, `<script>` и т. д.), ей может понадобиться передать в запросе файлы cookie. Такая потребность может возникать при использовании отслеживающих пикселей или персонализации контента.
+
+То же самое касается запросов, инициируемых из JavaScript-кода при помощи `fetch` или `XMLHttpRequest`. Если `fetch()` вызывается с [параметром `credentials: 'include'`](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included), то высока вероятность, что в запросе будут фигурировать файлы cookie. Что касается `XMLHttpRequest`, то вам следует обратить внимание на [свойство `withCredentials`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials): если оно установлено в значение `true`, это также говорит о том, что в запросе, скорее всего, используются файлы cookie. Такие файлы cookie необходимо будет пометить как предназначенные для межсайтовых запросов.
+
+### Контент внутри WebView
+
+WebView в платформозависимых приложениях используют в качестве основы браузер; проверьте, распространяются ли на них те же проблемы и ограничения. В Android новое поведение Chrome (по состоянию на версию 84) пока **не распространяется** на WebView, но в будущем это изменится, так что вам по-прежнему следует подготовиться и проверить совместимость с ним. Кроме того, Android позволяет платформозависимым приложениям устанавливать файлы cookie напрямую, используя [CookieManager API](https://developer.android.com/reference/android/webkit/CookieManager). Как и в случае с файлами cookie, устанавливаемыми при помощи заголовков или JavaScript, используйте `SameSite=None; Secure`, если файл предназначен для межсайтового применения.
+
+## Как реализовать `SameSite` уже сегодня
+
+Файлы cookie, используемые только в собственном контексте, в идеале следует помечать как `SameSite=Lax` или `SameSite=Strict` в зависимости от потребностей. Вы также можете не указывать ничего, позволив браузеру использовать политику по умолчанию, однако это чревато риском несогласованного поведения между браузерами и потенциальным появлением в консоли предупреждений о каждом файле cookie.
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+Файлы cookie, используемые в сторонних контекстах, необходимо помечать как `SameSite=None; Secure`. Обратите внимание, что указывать нужно оба атрибута сразу. Если указать только `None` без `Secure`, файл cookie будет отклонен. Однако в реализациях браузеров присутствуют взаимно несовместимые различия, для обхода которых могут понадобиться способы, описанные в разделе [Работа с несовместимыми клиентами](#handling-incompatible-clients).
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### Работа с несовместимыми клиентами
+
+Поскольку решение добавить значение `None` и изменить стандартное поведение было принято относительно недавно, в различных браузерах это изменение реализовано по-разному. Со списком известных проблем можно ознакомиться на chromium.org на [странице об изменениях](https://www.chromium.org/updates/same-site/incompatible-clients), однако список может быть неполным. Хотя такая ситуация не является идеальной, в течение переходного периода можно прибегать к временным решениям. Общее правило заключается в том, чтобы обрабатывать несовместимые клиенты как особый случай, а на создавать исключения для браузеров, следующих новым правилам.
+
+Одно из возможных решений — устанавливать файлы cookie как в новом, так и в старом формате:
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+Браузеры, в которых реализовано новое поведение, будут использовать файлы cookie с указанным `SameSite`. В других браузерах такие файлы могут игнорироваться или устанавливаться некорректно, но при этом будет использоваться файл cookie `3pcookie-legacy`. При обработке файлов cookie, указанных в запросе, сайт должен сначала проверить наличие файла cookie нового образца и только в случае неудачи использовать файл cookie старого формата.
+
+Ниже показан пример реализации такого поведения на Node.js с использованием [фреймворка Express](https://expressjs.com) и его библиотеки [cookie-parser](https://www.npmjs.com/package/cookie-parser).
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // Set the new style cookie
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // And set the same value in the legacy cookie
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // check the new style cookie first
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // otherwise fall back to the legacy cookie
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+Недостаток подхода заключается в том, что для обеспечения поддержки всех браузеров необходимо дублировать файлы cookie, а также вносить изменения в процесс их установки и считывания. Однако такой подход обеспечивает поддержку всех браузеров вне зависимости от их поведения, благодаря чему межсайтовые файлы cookie продолжают работать так же, как и раньше.
+
+В качестве альтернативы можно определять версию клиента по строке User-Agent перед отправкой заголовка `Set-Cookie`. Ознакомьтесь со [списком несовместимых клиентов](https://www.chromium.org/updates/same-site/incompatible-clients), а затем воспользуйтесь подходящей для вашей платформы библиотекой, например [ua-parser-js](https://www.npmjs.com/package/ua-parser-js) для Node.js. Определение User-Agent при помощи сторонней библиотеки позволяет не тратить время на написание регулярных выражений для самостоятельного определения.
+
+Преимущество такого подхода заключается в том, что вносить изменения требуется только в процесс установки файла cookie. Однако имейте в виду, что определение User-Agent по своей природе ненадежно и для части пользователей может давать неверный результат.
+
+{% Aside %}
+
+Независимо от выбранного вами решения позаботьтесь о том, чтобы у вас была возможность следить за уровнем трафика, который приходится на пользователей с файлами cookie старого образца. Установите себе напоминание, чтобы удалить из кода временное решение, как только уровень такого трафика упадет до несущественных для вашего сайта значений.
+
+{% endAside %}
+
+## Поддержка `SameSite=None` в различных языках, библиотеках и фреймворках
+
+Большинство языков и библиотек поддерживают файлы cookie с атрибутом `SameSite`, однако параметр `SameSite=None` появился относительно недавно, поэтому вам потребуются временные решения для обхода стандартного поведения. Они приведены в <a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">репозитории с примерами использования `SameSite` на GitHub</a>.
+
+## Как получить помощь
+
+Файлы cookie применяются повсюду, и мало кто проводит на сайтах полный аудит всех мест, где они устанавливаются и используются, особенно если учитывать межсайтовые сценарии. Столкнувшись с проблемой, имейте в виду, что ваш случай может быть первым в своем роде, и не стесняйтесь обращаться за помощью:
+
+- Сообщите о проблеме в [репозитории с примерами использования `SameSite` на GitHub](https://github.com/GoogleChromeLabs/samesite-examples).
+- Задайте вопрос с [тегом «samesite» на StackOverflow](https://stackoverflow.com/questions/tagged/samesite).
+- Если проблема связана с поведением Chromium, сообщите об ошибке, используя [шаблон [SameSite cookies]](https://bit.ly/2lJMd5c).
+- Следите за ходом разработки Chrome на [странице обновлений `SameSite`](https://www.chromium.org/updates/same-site).
+
diff --git a/src/site/content/ru/blog/samesite-cookies-explained/index.md b/src/site/content/ru/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..e0de34cb745
--- /dev/null
+++ b/src/site/content/ru/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,251 @@
+---
+title: Объяснение SameSiteатрибута файлов cookie
+subhead: Защитите свой сайт, узнав, как явно отмечать межсайтовые файлы cookie.
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: Узнайте, как помечать основные и сторонние файлы cookie с помощью атрибута SameSite. Вы можете повысить безопасность своего сайта и улучшить защиту от атак CSRF, используя значения Lax и Strict для атрибута SameSite. Указание нового значения None позволяет явно пометить файлы cookie для межсайтового использования.
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Эта статья относится к циклу статей об изменениях в атрибуте `SameSite` файлов cookie:
+
+- [Объяснение SameSiteатрибута файлов cookie](/samesite-cookies-explained/)
+- [Рецепты cookie SameSite](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+Файлы cookieэто один из доступных методов добавления постоянного состояния веб-сайтам. С годами возможности cookie росли и развивались, но платформа сохранила часть прежних проблем. Для их решения браузеры (в том числе Chrome, Firefox и Edge) меняют свое поведение, чтобы обеспечить больше устанавливаемых по умолчанию параметров, сохраняющих конфиденциальность.
+
+Каждый файл cookie представляет собой пару `key=value`, дополненную рядом атрибутов, которые определяют, когда и где используется этот файл cookie. Вероятно, вы уже использовали эти атрибуты, чтобы установить дату истечения срока действия или указать, что файл cookie должен отправляться только по HTTPS. Серверы устанавливают файлы cookie, отправляя в своем ответе заголовок `Set-Cookie`. Чтобы узнать обо всех подробностях, вы можете погрузиться в [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1), а пока что краткое напоминание.
+
+Допустим, у вас есть блог, в котором вы хотите показывать своим пользователям рекламу «Что нового». Пользователи могут закрыть рекламу, и не будут видеть ее в течение некоторого времени. Вы можете сохранить это предпочтение в файле cookie, установить для него срок действия в месяц (2600000 секунд) и отправлять  файл cooki ​только по HTTPS. Этот заголовок будет выглядеть так:
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="Три файла cookie отправляются в браузер с сервера в ответе", width="800", height="276", style="max-width: 35vw" %} <figcaption> Серверы устанавливают файлы cookie с помощью заголовка <code>Set-Cookie</code>. </figcaption></figure>
+
+Когда ваш читатель просматривает страницу, которая соответствует этим требованиям, то есть просматривается в безопасном соединении, а возраст cookie не превышает одного месяца, браузер пользователя отправит этот заголовок в своем запросе:
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="Три файла cookie отправляются из браузера на сервер в запросе", width="800", height="165", style="max-width: 35vw" %} <figcaption> Браузер отправляет файл cookie обратно в заголовке <code>Cookie</code>. </figcaption></figure>
+
+Вы также можете добавлять и читать файлы cookie, доступные для этого сайта, в JavaScript, используя `document.cookie`. Запись в `document.cookie` приведет к созданию или переопределению файла cookie с этим ключом. Например, в консоли JavaScript браузера можно попробовать выполнить следующее:
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+При чтении `document.cookie` будут выведены все файлы cookie, доступные в текущем контексте, причем каждый файл cookie разделен точкой с запятой:
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="Доступ к файлам cookie в браузере через JavaScript", width="600", height="382", style="max-width: 35vw" %}
+  <figcaption>
+    JavaScript может получить доступ к файлам cookie с помощью <code>document.cookie</code>.
+  </figcaption>
+</figure>
+
+Если вы попробуете сделать это на нескольких популярных сайтах, вы заметите, что большинство из них устанавливают значительно больше трех файлов cookie. В большинстве случаев эти файлы cookie отправляются при каждом запросе к этому домену, что имеет ряд последствий. Пропускная способность каналов загрузки часто более ограничена, чем каналов скачивания для ваших пользователей, поэтому накладные расходы на все исходящие запросы добавляют задержку к времени до первого байта. Будьте осторожны в выборе количества и размера файлов cookie, которые вы устанавливаете. Используйте атрибут `Max-Age`, чтобы гарантировать, что файлы cookie не будут храниться дольше необходимого.
+
+## Что такое основные и сторонние файлы cookie?
+
+Если вы вернетесь к предыдущей подборке сайтов, то, вероятно, заметите, что присутствуют файлы cookie для различных доменов, а не только для того, который вы посещаете в данный момент. Файлы cookie, соответствующие домену текущего сайта, то есть тому, что отображается в адресной строке браузера, называются **основными** файлами cookie. Аналогично, файлы cookie из доменов, отличных от текущего сайта, называются **сторонними** файлами cookie. Это определение не абсолютное, а зависит от контекста пользователя; один и тот же файл cookie может быть как основным, так и сторонним, в зависимости от того, на каком сайте пользователь находится в данный момент.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="Три файла cookie отправляются в браузер из разных запросов на одной странице", width="800", height="346", style="max-width: 35vw" %} <figcaption> Файлы cookie могут поступать с разных доменов на одной странице. </figcaption></figure>
+
+Продолжая приведенный выше пример, предположим, что в одном из ваших сообщений в блоге есть изображение изумительно чудесного котика, и оно размещено по адресу `/blog/img/amazing-cat.png`. Поскольку это изображение такое изумительное, другой человек использует его прямо на своем сайте. Если посетитель был в вашем блоге и у него файл cookie `promo_shown`, то, когда он просматривает `amazing-cat.png` на сайте другого человека, этот файл cookie **будет отправлен** в этом запросе для изображения. Это никому не нужно, так как `promo_shown` ни для чего не используется на сайте этого человека, он просто добавляет накладные расходы к запросу.
+
+Если это непреднамеренный эффект, то зачем вам это нужно? Именно этот механизм позволяет сайтам сохранять состояние, когда они используются в стороннем контексте. Например, если вы разместите на своем сайте видео с YouTube, посетители увидят в проигрывателе опцию «Посмотреть позже». Если ваш посетитель уже зарегистрирован на YouTube, его сессия будет доступна во встроенном проигрывателе с помощью стороннего cookie, то есть кнопка «Посмотреть позже» просто сохранит видео одним махом, а не предложит ему войти в систему или переместит его с вашей страницы обратно на YouTube.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="Один и тот же файл cookie отправляется в трех разных контекстах<br>", width="800", height="433", style="max-width: 35vw" %} <figcaption><br>Файл cookie в стороннем контексте отправляется при посещении разных страниц. </figcaption></figure>
+
+Одно из культурных свойств Интернета заключается в том, что он по умолчанию считается открытым. Отчасти это позволило многим людям создавать собственный контент и приложения. Однако это также породило ряд проблем, связанных с безопасностью и конфиденциальностью. Атаки с подделкой межсайтовых запросов (CSRF) основываются на том факте, что файлы cookie прикрепляются к любому запросу из заданного источника, независимо от того, кто инициирует запрос. Например, если вы посетите `evil.example`, он может инициировать запросы к `your-blog.example`, и ваш браузер с радостью прикрепит связанные файлы cookie. Если ваш блог не будет внимательно следить за тем, как он проверяет эти запросы, то `evil.example` ​может инициировать такие действия, как удаление сообщений или добавление собственного контента.
+
+Пользователи также становятся более осведомленными о том, как файлы cookie могут использоваться для отслеживания их активности на нескольких сайтах. Однако до сих пор не существовало способа явно заявить о своих намерениях в отношении файла cookie. Ваш файл cookie<br>`promo_shown` должен отправляться только как основной, тогда как сессионный cookie для виджета, предназначенного для встраивания на другие сайты, намеренно предназначен для обеспечения состояния входа в систему в контексте третьей стороны.
+
+## Явно укажите использование файлов cookie с помощью атрибута `SameSite`
+
+Введение атрибута `SameSite` (определенного в [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)) позволяет вам объявить, должен ли ваш файл cookie быть основным или внутрисайтовым. На этом моменте давайте вспомним, что именно означает «сайт». Сайтэто комбинация суффикса домена и части домена непосредственно перед ним. Например, домен `www.web.dev` является частью сайта `web.dev`.
+
+{% Aside 'key-term' %}
+
+Если пользователь находится на `www.web.dev` и запрашивает изображение у `static.web.dev`, то это **внутрисайтовый** запрос.
+
+{% endAside %}
+
+Список публичных суффиксов [public suffix list](https://publicsuffix.org/) определяет это, поэтому речь не только о доменах верхнего уровня, таких как `.com`, но и о сервисах, таких как `github.io`, что позволяет считать `your-project.github.io` и `my-project.github.io` отдельными сайтами.
+
+{% Aside 'key-term' %}
+
+Если пользователь находится на `your-project.github.io` и запрашивает изображение с `my-project.github.io`, это **межсайтовый** запрос.
+
+{% endAside %}
+
+Введение атрибута `SameSite` в файл cookie предоставляет три различных способа управления этим поведением. Вы можете не указывать атрибут или использовать значения атрибута `Strict` или `Lax`, чтобы ограничить файлы cookie внутрисайтовыми запросами.
+
+Если вы установите для атрибута `SameSite` значение `Strict`, ваш файл cookie будет отправляться только для внутрисайтовых запросов. Говоря языком пользователей, файл cookie будет отправлен только в том случае, если сайт для файла cookie совпадает с сайтом, который в данный момент отображается в адресной строке браузера. То есть, если файл cookie `promo_shown` задан следующим образом:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+Когда пользователь находится на вашем сайте, файл cookie будет отправлен вместе с запросом, как и ожидалось. Однако при переходе по ссылке на ваш сайт, например, с другого сайта или по электронной почте от друга, при первом запросе файл cookie не будет отправлен. Это хорошо, если файлы cookie относятся к функциям, стоящим за начальной навигацией, например, сменой пароля или совершением покупки, но слишком ограничивает `promo_shown`. Если ваш пользователь переходит по ссылке на сайт, он хочет, чтобы файл cookie был отправлен, чтобы были применены пользовательские предпочтения.
+
+Именно здесь и приходит на помощь `SameSite=Lax`, который разрешает доступ к навигации верхнего уровня. Давайте вернемся к приведенному выше примеру статьи о котике,  где другой сайт ссылается на ваш контент. Они используют непосредственно вашу фотографию котика и дают ссылку на вашу оригинальную статью.
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+И файл cookie был задан следующим образом:
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+Когда читатель находится в блоге другого человека, файл cookie **не будет отправлен**, если браузер запросит `amazing-cat.png`. Однако когда читатель перейдет по ссылке на `cat.html` в вашем блоге, этот запрос **будет включать** файл cookie. Это делает значение `Lax` хорошим выбором для файлов cookie, влияющих на отображение сайта, а значение `Strict`полезным для файлов cookie, связанных с действиями пользователя.
+
+{% Aside 'caution' %}
+
+Ни `Strict`, ни `Lax` не закрывают полностью проблему с безопасностью.  Файлы cookie отправляются как часть запроса пользователя, и вы должны относиться к ним так же, как и к любому другому пользовательскому вводу. Это означает, что необходимо проверять и подтверждать вводимые данные. Никогда не используйте файлы cookie для безопасного хранения данных на стороне сервера.
+
+{% endAside %}
+
+Наконец, можно не указывать значение, что ранее было способом неявного заявления о том, что вы хотите, чтобы файлы cookie отправлялись во всех контекстах. В последнем проекте [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) это делается явным образом путем введения нового значения `SameSite=None`. Это означает, что вы можете использовать значение `None`, чтобы четко указать, что вы намеренно хотите, чтобы файл cookie был отправлен в стороннем контексте.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="Три файла cookie, помеченных как None, Lax или Strict в зависимости от их контекста", width="800", height="456", style="max-width: 35vw" %} <figcaption> Файлы  cookie с явно указанным контекстом <code>None</code>, <code>Lax</code> или <code>Strict</code>. </figcaption></figure>
+
+{% Aside %}
+
+Если вы предоставляете услугу, которую потребляют другие сайты, например, виджеты, встроенный контент, партнерские программы, рекламу или вход на нескольких сайтах, то вам следует использовать `None`, чтобы убедиться, что ваши намерения передавать cookie ясны.
+
+{% endAside %}
+
+## Изменения поведения по умолчанию без атрибута SameSite
+
+Хотя атрибут `SameSite` широко поддерживается, он, к сожалению, не получил широкого распространения среди разработчиков. Открытая по умолчанию отправка файлов cookies повсюду означает, что все варианты использования работают, но оставляют пользователя уязвимым для CSRF-атак и непреднамеренной утечки информации. Чтобы побудить разработчиков заявить о своих намерениях и предоставить пользователям более безопасный опыт, в проект IETF ([Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00)) внесены два ключевых изменения:
+
+- если у файлов cookie не задан атрибут `SameSite`, будет считаться, что `SameSite=Lax`;
+- для файлов cookie с `SameSite=None` также нужно указывать параметр `Secure`, что означает, что такой запрос должен приходить только по защищённому каналу.
+
+Chrome реализует это поведение по умолчанию, начиная с версии 84. В [Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) эти ключевые изменения доступны для тестирования, начиная с Firefox 69, и в будущем они будут использоваться по умолчанию. Чтобы проверить это поведение в Firefox, откройте [`about:config`](http://kb.mozillazine.org/About:config) и установите `network.cookie.sameSite.laxByDefault`. [Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) также планирует изменить свое поведение по умолчанию.
+
+{% Aside %}
+
+Эта статья будет обновляться по мере того, как дополнительные браузеры объявят о поддержке.
+
+{% endAside %}
+
+### `SameSite=Lax` по умолчанию
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+Если вы отправляете файл cookie без заданного значения для атрибута `SameSite`…
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+Браузер будет обрабатывать этот файл cookie, как если бы было указано `SameSite=Lax`.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Хотя это и задумывалось для применения более безопасного значения по умолчанию, в идеале вам следует явно задать значение атрибута `SameSite`, а не полагаться на то, что браузер применит его за вас. Это делает ваше намерение в отношении файлов cookie явным и повышает шансы на согласованное использование в разных браузерах.
+
+{% Aside 'caution' %}
+
+Поведение по умолчанию, применяемое Chrome, не настолько строгое, чем явное `SameSite=Lax`, поскольку оно позволяет отправлять определенные файлы cookie при POST-запросах верхнего уровня. Точные подробности можно посмотреть в [обсуждениях в группе blink-dev](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ). Это временная мера, вам всё равно следует исправить свои межсайтовые файлы cookie на `SameSite=None; Secure`.
+
+{% endAside %}
+
+### `SameSite=None` должен быть безопасным
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+Установка cookie без `Secure` **будет отклонена**.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+Вы должны убедиться, что для значения атрибута `SameSite=None` задан параметр `Secure`.
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+Вы можете протестировать это поведение в Chrome 76, включив `about://flags/#cookies-without-same-site-must-be-secure` и в Firefox 69, установив в [`about:config`](http://kb.mozillazine.org/About:config) настройку `network.cookie.sameSite.noneRequiresSecure`.
+
+Уверены, вы захотите применить эту настройку для новых файлов cookie и обновить существующие файлы cookie, даже если срок их действия еще не истек.
+
+{% Aside 'note' %}
+
+Если вы полагаетесь на какие-либо службы, которые предоставляют сторонний контент на вашем сайте, вам также следует уточнить у поставщика, обновляют ли они свои службы. Возможно, вам потребуется обновить зависимости или фрагменты кода, чтобы сайт поддерживал новое поведение.
+
+{% endAside %}
+
+Оба эти изменения обратно совместимы с браузерами, которые правильно реализовали предыдущую версию `SameSite` или просто не поддерживают его. Применяя эти изменения к своим файлам cookie, вы явно указываете на их предполагаемое использование, а не полагаетесь на поведение браузера по умолчанию. Точно так же любые клиенты, которые еще не распознают `SameSite=None` должны игнорировать его и продолжать работу, как если бы атрибут не был установлен.
+
+{% Aside 'warning' %}
+
+Ряд старых версий браузеров, включая браузер Chrome, Safari и UC, несовместимы с новым значением `None` и могут игнорировать или ограничивать файлы cookie. Это поведение исправлено в текущих версиях, но вы должны проверить свой трафик, чтобы определить, какая доля ваших пользователей затронута. Вы можете просмотреть [список известных несовместимых клиентов на сайте Chromium](https://www.chromium.org/updates/same-site/incompatible-clients).
+
+{% endAside %}
+
+## <a>Рецепты cookie SameSite</a>
+
+Чтобы прочитать подробнее о том, как именно обновить файлы cookie для успешной обработки изменений `SameSite=None` и о различиях в поведении браузеров, перейдите к следующей статье, [Рецепты cookie SameSite](/samesite-cookie-recipes).
+
+_Благодарим за вклад и отзывы Лили Чен, Мальте Убл, Майка Уэста, Роба Додсона, Тома Штайнера и Вивека Сехара._
+
+_Главное изображения печенья от [Пилле-Рийн Приске](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) на [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/ru/blog/schemeful-samesite/index.md b/src/site/content/ru/blog/schemeful-samesite/index.md
new file mode 100644
index 00000000000..693b6516101
--- /dev/null
+++ b/src/site/content/ru/blog/schemeful-samesite/index.md
@@ -0,0 +1,250 @@
+---
+layout: post
+title: Same-Site с учетом схемы
+subhead: |-
+  Определение «того же сайта» (Same-Site) меняется и будет учитывать схему URL-адреса,
+  поэтому ссылки между HTTP- и HTTPS-версиями теперь считаются
+  межсайтовыми запросами. Перейдя на HTTPS по умолчанию, вы избежите возможных проблем.
+  В статье рассказывается о том, какие значения атрибутов SameSite необходимы.
+description: |-
+  Определение «того же сайта» (Same-Site) меняется и будет учитывать схему URL-адреса,
+  поэтому ссылки между HTTP- и HTTPS-версиями теперь считаются
+  межсайтовыми запросами. Перейдя на HTTPS по умолчанию, вы избежите возможных проблем.
+  В статье рассказывается о том, какие значения атрибутов SameSite необходимы.
+authors:
+  - bingler
+  - rowan_m
+date: 2020-11-20
+hero: image/admin/UMxBPy0AKAfbzxwgTroV.jpg
+thumbnail: image/admin/3J33n1o98vnkO6fdDFwP.jpg
+alt: |-
+  Две отдельные тарелки с печеньем, которые представляют собой разные схемы:
+  HTTP и HTTPS. Печение — файлы cookie.
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} Эта статья входит в серии об изменениях атрибута `SameSite` файлов cookie:
+
+- [Что такое файлы cookie SameSite](/samesite-cookies-explained/).
+- [Примеры использования файлов cookie SameSite](/samesite-cookie-recipes/).
+- [Same-Site с учетом схемы](/schemeful-samesite). {% endAside %}
+
+Спецификация [Same-Site с учетом схемы](https://mikewest.github.io/cookie-incrementalism/draft-west-cookie-incrementalism.html#rfc.section.3.3) определяет (веб-)сайт не как регистрируемый домен, а как схему + регистрируемый домен. Более подробную информацию и примеры см. в статье [Что такое «same-site» и «same-origin»](/same-site-same-origin/#%22schemeful-same-site%22).
+
+{% Aside 'key-term' %} Это означает, что незащищенная HTTP-версия сайта (например, **http**://website.example) и защищенная HTTPS-версия (**https**://website.example) считаются **различными сайтами** друг по отношению к другу. {% endAside %}
+
+Если ваш сайт уже полностью перешел на HTTPS, то вам повезло: волноваться не о чем, для вас ничего не изменится.
+
+Если вы еще не полностью обновили сайт, то это нужно сделать в первую очередь. Однако если в некоторых случаях посетители сайта будут переходить между HTTP и HTTPS, то вам будет полезно знать о приведенных ниже сценариях и поведении соответствующего файла cookie `SameSite`.
+
+{% Aside 'warning' %} Долгосрочная цель — [постепенно прекратить поддержку сторонних файлов cookie полностью](https://blog.chromium.org/2020/10/progress-on-privacy-sandbox-and.html) и заменить их альтернативными решениями, которые сохраняют конфиденциальность. Значение `SameSite=None; Secure` в файле cookie, которое позволяет отправлять его по различным схемам, должно считаться временным решением при переходе на полный HTTPS. {% endAside %}
+
+Включить эти изменения и протестировать их можно и в Chrome, и в Firefox.
+
+- В Chrome 86 включите `about://flags/#schemeful-same-site`. Следить за прогрессом можно на [странице состояния Chrome](https://chromestatus.com/feature/5096179480133632).
+- В Firefox 79 установите для параметра `network.cookie.sameSite.schemeful` значение `true` на странице `about:config`. Следить за прогрессом можно на странице [проблемы в Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1651119).
+
+Одна из основных причин изменений в `SameSite=Lax` по умолчанию для файлов cookie — это защита от [подделки межсайтовых запросов (CSRF)](https://developer.mozilla.org/docs/Glossary/CSRF). Однако незащищенный HTTP-трафик дает возможность злоумышленникам подделать файлы cookie, которые затем будут использованы в защищенной HTTPS-версии сайта. Дополнительное межсайтовое разграничение между схемами позволяет обеспечить бо́льшую защиту от таких атак.
+
+## Распространенные сценарии межсхемных переходов
+
+{% Aside 'key-term' %} В примерах ниже, где у всех URL-адресов одинаковый регистрируемый домен (например site.example), но разные схемы (например,  **http**://site.example и **https**://site.example), они считаются **межсхемными** друг по отношению к другу. {% endAside %}
+
+### Переходы
+
+При переходе между версиями веб-сайта на различных схемах (например, по ссылке с **http**://site.example на **https**://site.example) раньше разрешалось отправлять файлы cookie `SameSite=Strict`. Теперь это рассматривается как межсайтовый переход, поэтому файлы cookie `SameSite=Strict` будут заблокированы.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yDViqKg9eeEeAEiCNqe4.png", alt="Межсхемный переход по ссылке в незащищенной HTTP-версии сайта, ведущей на защищенную HTTPS-версию. Файлы cookie «SameSite=Strict» заблокированы, «SameSite=Lax» и «SameSite=None; Secure» разрешены", width="800", height="342" %}   <figcaption>     Межсхемный переход с HTTP на HTTPS   </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Блокируется</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>✓ Разрешено</td>
+   <td>✓ Разрешено</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Разрешено</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+</table>
+
+### Загрузка подресурсов
+
+{% Aside 'warning' %} Все основные браузеры блокируют [активный смешанный контент](https://developer.mozilla.org/docs/Web/Security/Mixed_content), например скрипты и окна iframe. Кроме того, в браузерах, в том числе в [Chrome](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) и [Firefox](https://groups.google.com/g/mozilla.dev.platform/c/F163Jz32oYY), ведется работа над блокировкой пассивного смешанного контента (и переключением его на HTTPS). {% endAside %}
+
+Вносимые согласно рекомендациям в статье изменения следует рассматривать как заплатку на время, пока вы переходите на полный HTTPS.
+
+Подресурсами могут быть изображения, окна iframe и сетевые запросы, сделанные через XHR или Fetch.
+
+Раньше загрузка межсхемного подресурса на странице позволяла отправлять и устанавливать файлы cookie `SameSite=Strict` и `SameSite=Lax`. Теперь этот случай обрабатывается так же, как любой иной сторонний или межсайтовый подресурс: все файлы cookie `SameSite=Strict` и `SameSite=Lax` блокируются.
+
+Кроме того, даже если браузер разрешает загрузку ресурсов из незащищенных схем на защищенной странице, все файлы cookie по этим запросам будут блокироваться, поскольку сторонние и межсайтовые файлы cookie требуют `Secure`.
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GgR6Yln1f9JGkt04exRC.png", alt="Межсхемный подресурс, полученный в результате включения ресурса из защищенной HTTPS-версии сайта в незащищенную HTTP-версию. Файлы cookie «SameSite=Strict» и «SameSite=Lax» блокируются, «SameSite=None; Secure» разрешены", width="800", height="285" %}   <figcaption>     Страница HTTP, использующая межсхемный подресурс через HTTPS   </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Блокируется</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ Блокируется</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Разрешено</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+</table>
+
+### Отправка формы запросом POST
+
+Отправка запроса POST между версиями веб-сайта с различными схемами раньше позволяла отправлять файлы cookie со значениями `SameSite=Lax` и `SameSite=Strict`. Теперь этот случай обрабатывается как межсайтовый POST: отправлять можно только `SameSite=None`. Примером такого случая могут быть сайты, которые по умолчанию дают незащищенную версию, но переводят пользователей на защищенную при отправке формы входа или оформления заказа.
+
+Как и в случае с подресурсами, если запрос идет из защищенного контекста (например, HTTPS) на незащищенный (например, HTTP), то все файлы cookie в нем будут блокироваться, поскольку сторонние и межсайтовые файлы cookie требуют `Secure`.
+
+{% Aside 'warning' %} Лучшее решение здесь — сделать так, чтобы страница формы и целевой ресурс были на защищенном подключении, например HTTPS. Это особенно важно, если пользователь вводит в форме конфиденциальную информацию. {% endAside %}
+
+<figure>   {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ud9LkDeGJUWHObifD718.png", alt="Межсхемная отправка формы в результате отправки формы из незащищенной HTTP-версии сайта в защищенную HTTPS-версию. Файлы cookie «SameSite=Strict» и «SameSite=Lax» блокируются, «SameSite=None; Secure» разрешены", width="800", height="376" %}   <figcaption>     Межсхемная отправка формы из HTTP в HTTPS   </figcaption></figure>
+
+<table>
+  <tr>
+   <td>
+   </td>
+   <td>
+<strong>HTTP → HTTPS</strong>
+   </td>
+   <td>
+<strong>HTTPS → HTTP</strong>
+   </td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Strict</code>
+   </td>
+   <td>⛔ Блокируется</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=Lax</code>
+   </td>
+   <td>⛔ Блокируется</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+  <tr>
+   <td>
+<code>SameSite=None;Secure</code>
+   </td>
+   <td>✓ Разрешено</td>
+   <td>⛔ Блокируется</td>
+  </tr>
+</table>
+
+## Как проверить свой сайт
+
+В Chrome и Firefox можно использовать инструменты разработчика и передачи сообщений.
+
+В Chrome 86 на [вкладке «Проблемы» (Issues) в DevTools](https://developer.chrome.com/docs/devtools/issues/) будут показаны проблемы, относящиеся к Same-Site с учетом схемы. Возможные проблемы приведены ниже.
+
+Проблемы с переходами:
+
+- «Чтобы файлы cookie в будущем могли отправляться с запросами Same-Site, перейдите полностью на HTTPS» (Migrate entirely to HTTPS to continue having cookies sent on same-site requests) — предупреждение о том, что файл cookie  **будет заблокирован** в будущей версии Chrome.
+- «Чтобы отправлять файлы cookie с запросами Same-Site, перейдите полностью на HTTPS» (Migrate entirely to HTTPS to have cookies sent on same-site requests) — предупреждение о том, что файл cookie **был заблокирован**.
+
+Проблемы с загрузкой подресурсов:
+
+- «Чтобы файлы cookie в будущем могли отправляться на подресурсы Same-Site, перейдите полностью HTTPS» (Migrate entirely to HTTPS to continue having cookies sent to subresources) или «Чтобы файлы cookie в будущем могли устанавливаться подресурсами Same-Site, перейдите полностью HTTPS» (Migrate entirely to HTTPS to continue allowing cookies tobe set by same-site subresources) — предупреждения о том, что файл cookie  **будет заблокирован** в будущей версии Chrome.
+- «Чтобы отправлять файлы cookie на подресурсы Same-Site, перейдите полностью на HTTPS» (Migrate entirely to HTTPS to have cookies sent to same-site subresources) и «Чтобы устанавливать файлы cookie подресурсами Same-Site, перейдите полностью HTTPS» (Migrate entirely to HTTPS to allow cookies to be set by same-site subresources) — предупреждения о том, что файл cookie **был заблокирован**. Последнее предупреждение также может появиться при отправке формы запросом POST.
+
+Подробнее — в статье [Советы по тестированию и отладке Same-Site с учетом схемы](https://www.chromium.org/updates/schemeful-same-site/testing-and-debugging-tips-for-schemeful-same-site).
+
+В Firefox 79 и выше, если для параметра `network.cookie.sameSite.schemeful` установлено `true` (на странице `about:config`), в консоли будет отображаться сообщение о проблемах, относящихся к Same-Site с учетом схемы. Возможные проблемы:
+
+- «Файл cookie `cookie_name` **скоро будет обрабатываться** как межсайтовый по отношению к `http://site.example/`, потому что схемы не совпадают» (Cookie <code>cookie_name</code> <strong>will be soon</strong> treated as cross-site cookie against `http://site.example/` because the scheme does not match).
+- «Файл cookie `cookie_name` **был обработан** как межсайтовый по отношению к `http://site.example/`, потому что схемы не совпадают» (Cookie <code>cookie_name</code> <strong>has been</strong> treated as cross-site cookie against `http://site.example/` because the scheme does not match).
+
+## Часто задаваемые вопросы
+
+### Сайт уже полностью на HTTPS. Почему в инструментах разработчика браузера показаны проблемы?
+
+Возможно, некоторые ссылки и подресурсы по-прежнему ведут на незащищенные URL-адреса.
+
+Один из способов решить эту проблему — использовать [HTTP Strict-Transport-Security](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) (HSTS) и директиву `includeSubDomain`. Если использовать HSTS в сочетании с `includeSubDomain`, то даже если на одной из страниц случайно окажется незащищенная ссылка, браузер будет автоматически использовать ее защищенную версию.
+
+### Что делать, если перейти на HTTPS нет возможности?
+
+Мы настоятельно рекомендуем полностью перевести сайт на HTTPS, поскольку это позволит защитить пользователей. Если вы не можете сделать это сами, рекомендуем обратиться к хостинг-провайдеру: возможно, у него есть такая услуга. Если у вас собственный хостинг, установите и настройте сертификат с помощью инструментов [Let's Encrypt](https://letsencrypt.org/). Также можете изучить вопрос о переносе сайта в CDN или использовании прокси-сервера, который обеспечивает подключение по HTTPS.
+
+Если предложенные варианты не подходят, попробуйте ослабить защиту `SameSite` на соответствующих файлах cookie.
+
+- Если блокируются только файлы cookie `SameSite=Strict`, можно снизить защиту до `Lax`.
+- Если блокируются и `Strict`, и `Lax`, причем эти файлы cookie отправляются на защищенный URL (или устанавливаются с него), можно снизить защиту до `None`.
+    - Такой подход **не сработает**, если URL-адрес, на который файлы cookie отправляются (или с которого устанавливаются), является незащищенным: для `SameSite=None` нужен атрибут `Secure` на файлах cookie, который означает, что их нельзя отправлять и устанавливать по незащищенному подключению. В этом случае вы не сможете получить доступ к такому файлу cookie, пока сайт не перейдет на HTTPS.
+    - Помните, что это временное решение: через некоторое время поддержка сторонних файлов cookie будет прекращена полностью.
+
+### Как это повлияет на файлы cookie, для которых не указан атрибут `SameSite`?
+
+Файлы cookie без атрибута `SameSite` обрабатываются так, как если бы для них было указано `SameSite=Lax`, и к ним применяется тот же межсхемный алгоритм поведения. При этом помните, что для небезопасных методов всё еще действует временное исключение. Подробнее — на странице <a href="https://www.chromium.org/updates/same-site/faq" data-md-type="link">о случае Lax + POST в ответах на вопросы о `SameSite` для Chromium</a>.
+
+### Как это влияет на WebSocket?
+
+Подключения WebSocket будут по-прежнему считаться Same-Site, если у них такой же уровень защищенности, как у страницы.
+
+Same-Site:
+
+- подключение `wss://` с `https://`;
+- подключение `ws://` с `http://`.
+
+Не Same-Site:
+
+- подключение `wss://` с `http://`;
+- подключение `ws://` с `https://`.
+
+*Автор фото — [Джулисса Капдевилла](https://unsplash.com/photos/wNjgWrEXAL0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText), платформа [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*
diff --git a/src/site/content/ru/blog/storage-for-the-web/index.md b/src/site/content/ru/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..00817c43f62
--- /dev/null
+++ b/src/site/content/ru/blog/storage-for-the-web/index.md
@@ -0,0 +1,162 @@
+---
+title: Хранение данных в веб-браузере
+subhead: Существует множество разных механизмов хранения данных в браузере. Какой из них лучше всего подходит для ваших потребностей?
+authors:
+  - petelepage
+description: Существует множество разных механизмов хранения данных в браузере. Какой из них лучше всего подходит для ваших потребностей?
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: Штабель транспортных контейнеров
+feedback:
+  - api
+---
+
+Когда пользователь находится в пути, его интернет-соединение может быть неустойчивым или вовсе отсутствовать; именно поэтому [прогрессивные веб-приложения](/progressive-web-apps/) часто поддерживают офлайн-работу и оптимизированы для устойчивой производительности. Даже в идеальной беспроводной среде разумное использование кеширования и других методов хранения данных может существенно повысить комфорт пользователя. Существует несколько способов кеширования как статических ресурсов приложения (HTML, JavaScript, CSS, изображений и т. д.), так и контента (пользовательских данных, новостных статей и т. д.). Но какое решение лучше? Какой объем данных можно хранить? Как предотвратить их очищение?
+
+## Какой способ следует использовать? {: #recommendation }
+
+Вот общая рекомендация по хранению ресурсов:
+
+- Для сетевых ресурсов, необходимых для загрузки приложения и файлового контента, используйте [**Cache Storage API**](/cache-api-quick-guide/) (часть API [сервис-воркеров](https://developer.chrome.com/docs/workbox/service-worker-overview/)).
+- Для других видов данных используйте [**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) (с [библиотекой-оберткой на основе Promises](https://www.npmjs.com/package/idb)).
+
+IndexedDB и Cache Storage API поддерживаются всеми современными браузерами. Оба API являются асинхронными и не блокируют основной поток. Они доступны из объекта `window`, веб-воркеров и сервисных воркеров, благодаря чему их легко можно использовать в любом месте вашего кода.
+
+## Как насчет других механизмов хранения? {: #other }
+
+Существует ряд других механизмов хранения, доступных в браузере, но они имеют ограниченную область применения и могут вызывать серьезные проблемы с производительностью.
+
+API [SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) имеет привязку к конкретной вкладке и хранит данные только в течение времени ее существования. Его можно использовать для хранения небольших объемов информации о конкретном сеансе, такой как ключ IndexedDB. При его использовании будьте осторожны, поскольку он работает в синхронном режиме и блокирует основной поток. Он поддерживает хранение не больше 5 МБ данных и может хранить только строки. В связи с привязкой к конкретной вкладке его нельзя использовать в веб-воркерах и сервис-воркерах.
+
+API [LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) следует избегать, поскольку он работает в синхронном режиме и блокирует основной поток. Он поддерживает хранение не больше 5 МБ данных и может хранить только строки. LocalStorage нельзя использовать в веб-воркерах и сервис-воркерах.
+
+[Файлы cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies) — полезный инструмент, но их не следует использовать в качестве хранилища. Поскольку они пересылаются на сервер с каждым HTTP-запросом, хранить в них следует только очень небольшие объемы данных, иначе размер каждого веб-запроса существенно увеличится. Они работают в синхронном режиме и недоступны в веб-воркерах. Как и LocalStorage или SessionStorage, файлы cookie могут хранить только строки.
+
+[File System API](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction) и FileWriter API предоставляют методы для чтения и записи файлов в пределах изолированной файловой системы. Хотя они работают в асинхронном режиме, использовать их не рекомендуется, поскольку они [доступны только в браузерах на основе Chromium](https://caniuse.com/#feat=filesystem).
+
+[File System Access API](/file-system-access/) был разработан, чтобы упростить для пользователей чтение и редактирование файлов, расположенных в локальной файловой системе. Прежде чем страница сможет читать или записывать локальные файлы, пользователь должен предоставить ей разрешение, которое не сохраняется между сеансами.
+
+WebSQL **не** рекомендуется к использованию, а существующие сайты на его основе должны быть переведены на IndexedDB. Поддержка WebSQL [была удалена](https://caniuse.com/#feat=sql-storage) практически из всех основных браузеров. Консорциум W3C [прекратил поддержку спецификации Web SQL](https://www.w3.org/TR/webdatabase/) в 2010 году, и дальнейших обновлений не планируется.
+
+Application Cache **не** рекомендуется к использованию, а существующие сайты на его основе должны быть переведены на сервис-воркеры и Cache API. Этот API [устарел](https://developer.mozilla.org/docs/Web/API/Window/applicationCache), и в будущем его поддержка в браузерах будет прекращена.
+
+## Сколько данных можно хранить? {: #how-much }
+
+**Много**: как минимум пару сотен мегабайт, а в теории — сотни гигабайт или больше. Реализации в браузерах различаются, однако объем, доступный для хранения данных, обычно зависит от объема памяти устройства.
+
+- Chrome позволяет браузеру использовать до 80% всего дискового пространства. Один источник может использовать до 60% от общего дискового пространства. Чтобы определить максимально возможную квоту, можно воспользоваться [StorageManager API](#check). В других браузерах на основе Chromium ограничения могут быть более мягкими. Подробнее о реализации в Chrome см. здесь: [PR #3896](https://github.com/GoogleChrome/web.dev/pull/3896).
+- Internet Explorer 10 и более поздних версий позволяет хранить до 250 МБ и будет запрашивать разрешение пользователя, если требуется сохранить более 10 МБ.
+- Firefox позволяет браузеру использовать до 50% свободного дискового пространства. Домены в пределах одной группы [eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix) (например, `example.com`, `www.example.com` и `foo.bar.example.com`) [могут использовать до 2 ГБ](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits). Чтобы узнать оставшийся объем доступного места, используйте [StorageManager API](#check-available).
+- Safari (как для ПК, так и для мобильных устройств) позволяет использовать около 1 ГБ. По достижении лимита Safari предлагает пользователю увеличить его с шагом в 200 МБ. Мне не удалось найти официальной документации, описывающей это поведение.
+    - Если из мобильного Safari добавить PWA-приложение на экран «Домой», для него создается отдельный контейнер с данными, никак не связанный с мобильным Safari. Когда в контейнере установленного PWA-приложения заканчивается место, запросить его увеличение, по всей видимости, нельзя.
+
+В старых версиях браузеров, когда сайт превышал допустимый объем сохраненных данных, пользователю предлагалось предоставить разрешение на увеличение объема. Например, если источник использовал более 50 МБ, браузер предлагал пользователю увеличить объем до 100 МБ, а затем вновь отображал запрос через каждые последующие 50 МБ.
+
+Сегодня большинство браузеров позволяют сайту использовать все пространство в пределах квоты, не спрашивая разрешения пользователя. Исключением является Safari, который по достижении 750 МБ запрашивает разрешение на то, чтобы расширить хранилище до 1,1 ГБ. Если источник попытается выйти за пределы квоты, дальнейшие попытки записи данных будут завершаться ошибкой.
+
+## Как проверить доступный объем для хранения данных? {: #check }
+
+Во [многих браузерах](https://caniuse.com/#feat=mdn-api_storagemanager) можно использовать [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) для определения объема хранилища, доступного источнику, а также объема уже записанных данных. API позволяет узнать общее количество байт, используемых IndexedDB и Cache API, и таким образом рассчитать приблизительное количество оставшегося доступного пространства.
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> Number of bytes used.
+  // quota.quota -> Maximum number of bytes available.
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`You've used ${percentageUsed}% of the available storage.`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`You can write up to ${remaining} more bytes.`);
+}
+```
+
+StorageManager API пока реализован [не во всех браузерах](https://caniuse.com/#feat=mdn-api_storagemanager), поэтому перед использованием необходимо проверить его наличие. Даже если он доступен, вам по-прежнему необходимо будет перехватывать ошибки превышения квоты (см. ниже). В некоторых случаях доступная квота может превышать фактический объем доступного пространства.
+
+{% Aside %} Другие браузеры на основе Chromium могут сообщать доступную квоту с учетом объема свободного пространства. Chrome не учитывает его и всегда сообщает 60% от фактического размера диска, чтобы помешать определению объема ресурсов, сохраненных другими источниками. {% endAside %}
+
+### Инспектирование
+
+Во время разработки вы можете отслеживать состояние всех хранилищ и с легкостью очищать все сохраненные данные, используя DevTools браузера.
+
+В Chrome 88 была добавлена новая функция: теперь на панели «Хранилище» можно изменить размер пространства, отведенного для хранилища сайта. При помощи этой функции можно имитировать различные устройства и тестировать поведение приложений в условиях недостатка места на диске. Перейдите в раздел **Приложение**, затем **Хранилище**, установите флажок **Имитировать настраиваемое место в хранилище** и укажите размер квоты хранилища, который требуется имитировать.
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="Панель «Хранилище» в DevTools.", width="800", height="567" %}
+
+Во время работы над этой статьей я написал [простой инструмент](https://storage-quota.glitch.me/), позволяющий быстро заполнять хранилище настолько, насколько это возможно. Он позволяет быстро и легко экспериментировать с различными механизмами хранения данных и смотреть, что происходит при исчерпании квоты.
+
+## Как реагировать на превышение квоты? {: #over-quota }
+
+Что следует делать, когда происходит превышение квоты? Прежде всего, всегда перехватывайте и обрабатывайте ошибки записи, будь то `QuotaExceededError` или любая другая ошибка. Затем, в зависимости от принципов работы вашего приложения, следует выбрать способ их обработки. Например, можно удалять контент, к которому давно не обращались, или данные, которые занимают больше всего места, либо предлагать пользователю самостоятельно выбрать данные для удаления.
+
+Как IndexedDB, так и Cache API при превышении доступной квоты генерируют ошибку `DOMError` с именем `QuotaExceededError`.
+
+### IndexedDB
+
+Если источник превысил свою квоту, попытка записи в IndexedDB завершится неудачно. Будет вызван метод транзакции `onabort()` с событием в качестве аргумента. Событие будет содержать в свойстве error ошибку `DOMException`, у которой свойство `name` будет равно `QuotaExceededError`.
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+};
+```
+
+### Cache API
+
+Если источник превысил свою квоту, попытки записи с использованием Cache API будут отклонены с ошибкой `DOMException` `QuotaExceededError` .
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // Fallback code goes here
+  }
+}
+```
+
+## Как происходит очистка данных? {: #eviction }
+
+Веб-хранилища делятся на две категории: «негарантированные» и «постоянные». Негарантированные хранилища могут быть очищены браузером без участия пользователя, поэтому плохо подходят для критически важных данных или данных с длительным сроком хранения. Постоянные хранилища не очищаются автоматически даже в случае нехватки места; пользователь должен очищать их вручную (при помощи настроек браузера).
+
+По умолчанию данные сайтов (включая IndexedDB, Cache API и т. д.) хранятся в негарантированном режиме: если сайт не [запросил постоянное хранение данных](/persistent-storage/), браузер может удалить его данные по своему усмотрению, например если на устройстве мало места.
+
+Удаление данных, хранящихся в негарантированном режиме, происходит следующим образом:
+
+- Браузеры на основе Chromium начинают очистку данных, когда у браузера заканчивается место. Сначала браузер удаляет данные, относящиеся к наименее востребованному (на основании давности использования) источнику, затем переходит к следующему — и так до тех пор, пока нехватка места не будет устранена.
+- Internet Explorer 10+ не очищает данные, но при этом не дает источнику записывать данные сверх лимита.
+- Firefox начинают очистку данных, когда заканчивается свободное место на диске. Сначала браузер удаляет данные, относящиеся к наименее востребованному (на основании давности использования) источнику, затем переходит к следующему — и так до тех пор, пока нехватка места не будет устранена.
+- Safari раньше не производил очистку данных, но недавно в нем был реализован новый семидневный лимит на хранение всех записываемых данных (см. ниже).
+
+Начиная с iOS и iPadOS 13.4, а также Safari 13.1 на macOS существует семидневный лимит на хранение всех данных, записываемых скриптами, включая IndexDB, регистрацию сервис-воркеров и Cache API. Это значит, что Safari будет удалять контент из кеша, если пользователь в течение семи дней использования Safari не взаимодействовал с соответствующим сайтом. Эта политика очистки **не распространяется на установленные PWA**, добавленные на экран «Домой». Подробности см. в статье [Full Third-Party Cookie Blocking and More](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) в блоге WebKit.
+
+{% Aside %} Вы можете запросить для своего сайта [постоянное хранение данных](/persistent-storage/), чтобы защитить важные данные пользователя или приложения. {% endAside %}
+
+## Бонус: зачем использовать обертку для IndexedDB
+
+IndexedDB — это низкоуровневый API, требующий сложной настройки перед использованием и поэтому крайне неудобный для хранения простых данных. В отличие от большинства современных API, основанных на Promises, он использует события. Обертки, основанные на Promises, такие как [idb](https://www.npmjs.com/package/idb) для IndexedDB, скрывают некоторые его мощные возможности, но, что более важно, скрывают доступные в IndexedDB сложные внутренние механизмы, такие как транзакции или версионирование схемы.
+
+## Заключение
+
+Прошли времена, когда сайты имели ограниченный объем  хранилища и для его расширения приходилось запрашивать разрешение пользователя. Сайты могут хранить практически любые ресурсы и данные, которые требуются им для работы. При помощи [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) можно узнать, какой объем доступен вашему сайту и сколько он уже израсходовал. А при помощи [постоянного хранилища](/persistent-storage/) вы сможете защитить данные от очистки, если пользователь сам не удалит их.
+
+### Дополнительные ресурсы
+
+- [Рекомендации по использованию IndexedDB](/indexeddb-best-practices/)
+- [Концепции при работе с Chrome Web Storage и квотами](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### Благодарности
+
+Особая благодарность Джарриду Гудману, Филу Уолтону, Эйдзи Китамуре, Дэниелу Мерфи, Дарвину Хуангу, Джошу Беллу, Марейну Круиссельбринку и Виктору Костану за рецензирование этой статьи. Спасибо Эйдзи Китамуре, Адди Османи и Марку Коэну за написание оригинальных статей, на которых основана эта статья. Эйдзи создал полезный инструмент под названием [Browser Storage Abuser](http://demo.agektmr.com/storage/), который пригодился для проверки текущего поведения. Он позволяет сохранить максимально допустимый объем данных и таким образом узнать лимиты хранилища в вашем браузере. Спасибо Франсуа Бофору за то, что он подробно изучил Safari и узнал его лимиты на хранение данных.
+
+Автор изображения в шапке — Гийом Болдюк с [Unsplash](https://unsplash.com/photos/uBe2mknURG4).
diff --git a/src/site/content/ru/blog/streams/index.md b/src/site/content/ru/blog/streams/index.md
new file mode 100644
index 00000000000..415ca5c1be6
--- /dev/null
+++ b/src/site/content/ru/blog/streams/index.md
@@ -0,0 +1,1092 @@
+---
+title: Подробное руководство по Streams API
+subhead: Использование читаемых, записываемых и преобразующих потоков с помощью Streams API.
+description: |
+  Streams API в JavaScript позволяет программно получать доступ к принятым по сети потокам данных и обрабатывать их.
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2021-02-25
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: Лесная река с опавшими разноцветными листьями.
+tags:
+  - blog # blog is a required tag for the article to show up in the blog.
+  - capabilities
+  # - streams
+---
+
+Streams API позволяет программно получать доступ к потокам данных, принятым по сети или
+созданным локально каким-либо способом
+и обрабатывать их, используя JavaScript. Потоковая обработка включает в себя разбиение ресурса, который нужно получить, отправить
+или преобразовать, на небольшие фрагменты и их побитовую обработку. Эту задачу
+обычно решают браузеры при получении ресурсов (например, HTML или видео) для отображения на странице,
+однако в JavaScript такая возможность появилась только с реализацией `fetch` с потоками в 2015 году.
+
+{% Aside %}
+Технически потоковая обработка была возможна через `XMLHttpRequest`, но
+это было [совсем не так элегантно](https://gist.github.com/igrigorik/5736866).
+{% endAside %}
+
+Раньше, чтобы обработать какой-либо ресурс (видео, текстовый файл и т. д.), приходилось
+скачивать весь файл, дожидаться его десериализации в подходящий формат и только потом
+приступать к собственно обработке. Теперь работа с потоками
+реализована JavaScript, и всё стало намного проще. Первичные данные можно обрабатывать постепенно,
+как только они появляются на клиенте, и не нужно создавать буфер, строку или BLOB.
+Это открывает различные возможности, некоторые из которых я перечисляю ниже:
+
+- **Видеоэффекты:** передача читаемого видеопотока через преобразующий поток, который применяет
+   эффекты в реальном времени.
+- **Сжатие (распаковка) данных:** передача файлового потока через преобразующий поток,
+   который выборочно сжимает или распаковывает его.
+- **Декодирование изображений:** передача потока HTTP-ответа последовательно через два преобразующих
+   потока, первый из которых декодирует байты в данные битовой карты, а второй переводит ее в PNG-изображения. При установке
+   внутри обработчика `fetch` сервис-воркера это позволяет прозрачно полифилить новые форматы
+   изображений, например AVIF.
+
+## Основные понятия
+
+Прежде чем подробно разбирать различные типы потоков, познакомимся с основными понятиями.
+
+### Фрагменты
+
+Фрагмент — это **один элемент данных**, который записывается в поток или или читается из него.
+Он может быть любого типа; в потоках могут даже быть фрагменты разных типов. В большинстве случаев фрагмент не будет самой элементарной
+единицей данных для конкретного потока. Например, байтовый поток может содержать фрагменты, состоящие
+из элементов `Uint8Array` по 16 КиБ, а не отдельных байтов.
+
+### Читаемые потоки
+
+Читаемый поток — это источник данных, из которого можно читать. Другими словами, из читаемого потока
+данные **выходят**. Говоря конкретнее, читаемый поток — это экземпляр класса
+`ReadableStream`.
+
+### Записываемые потоки
+
+Записываемый поток — это пункт назначения для данных, в который можно писать. Другими словами, в записываемый поток
+данные **входят**. Записываемый поток — это экземпляр класса
+`WritableStream`.
+
+### Преобразующие потоки
+
+Преобразующий поток состоит из **пары потоков**: записываемого потока («записываемая сторона»)
+и читаемого потока («читаемая сторона»).
+В качестве метафоры можно представить себе
+[синхронного переводчика](https://en.wikipedia.org/wiki/Simultaneous_interpretation),
+который переводит с одного языка на другой на лету.
+Запись на записываемую сторону приводит к тому, что
+с читаемой стороны становятся доступными новые данные — причем сам процесс
+зависит от преобразующего потока. Говоря конкретнее, преобразующим потоком может служить любой объект со свойствами
+`writable` и `readable`. Однако стандартный класс `TransformStream` упрощает создание такой
+надлежащим образом связанной пары.
+
+### Цепочки перенаправления
+
+Потоки обычно используются посредством **перенаправления** друг в друга. Читаемый поток можно с помощью
+метода `pipeTo()` направить непосредственно в записываемый поток или с помощью метода
+`pipeThrough()` сначала пропустить через один или несколько преобразующих потоков. **Набор
+соединенных таким образом потоков** называется цепочкой перенаправления.
+
+### Обратная реакция
+
+Собранная цепочка перенаправления будет распространять сигналы о том, как быстро фрагменты
+должны через нее проходить. Если какой-либо элемент цепочки еще не может принимать фрагменты, она передает сигнал обратно,
+пока в конечном итоге исходный источник не получит указание прекратить такое
+быстрое производство фрагментов. Этот процесс **нормализации потока** называется обратной реакцией.
+
+### Раздвоение
+
+Читаемый поток можно «раздвоить» с помощью метода `tee()` — в результате
+он **заблокируется** и его нельзя будет использовать напрямую, но зато появятся **два новых
+потока** — так называемые «ветви», которые можно использовать самостоятельно.
+Раздвоение — важный процесс, поскольку потоки нельзя перемотать или перезапустить (подробнее об этом позже).
+
+<figure>
+  <!-- Original source file located at https://drive.google.com/file/d/17apgoyo6E5RAA_nwwM5Xg4FGiMr8y3mk/view?usp=sharing -->
+  {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="Схема цепочки перенаправления. Читаемый поток (поступает из вызова метода «fetch» через API) перенаправляется в преобразующий поток, чей выход раздваивается на два читаемых потока: первый отправляются в браузер, а второй — в кеш сервис-воркера.", width="800", height="430" %}
+  <figcaption>Цепочка перенаправления.</figcaption>
+</figure>
+
+## Принцип действия читаемого потока
+
+Читаемый поток — это источник данных, представленный в JavaScript как
+объект [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream), поступающий
+из базового источника. Конструктор
+[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream)
+создает и возвращает объект читаемого потока из указанных обработчиков. Базовые источники
+бывают двух типов:
+
+- **Активные источники** отправляют данные постоянно, когда вы к ним обращаетесь, и вы решаете,
+   запускать, приостанавливать или отменять доступ к потоку. Это может быть потоковое видео, отправленные сервером события или
+   подключения WebSocket.
+- **Пассивные источники** требуют, чтобы после подключения у них явным образом запрашивали
+   данные. Это могут быть операции HTTP-операции через вызовы `fetch()` или `XMLHttpRequest`.
+
+Данные потока читаются последовательно небольшими частями — **фрагментами**.
+Помещенные в поток фрагменты считаются **поставленными в очередь**. Это означает, что они ждут прочтения
+в очереди. Непрочитанные фрагменты отслеживаются во **внутренней очереди**.
+
+**Стратегия организации очереди** — это объект, определяющий, как поток должен давать обратную
+реакцию на основе состояния своей внутренней очереди. Стратегия организации очереди назначает каждому фрагменту размер и сравнивает
+общий размер всех фрагментов в очереди с заданным числом — **максимальным уровнем**.
+
+Фрагменты внутри потока читаются **считывателем**. Он извлекает данные по одному фрагменту за раз,
+что позволяет выполнять с ними любые операции. Считыватель совместно с кодом обработки
+называется **потребителем**.
+
+Следующий объект в этом контексте называется **контроллер**. У каждого читаемого потока есть связанный с ним контроллер,
+который, как следует из названия, позволяет контролировать этот поток.
+
+Одновременно читать поток может только один считыватель; как только считыватель создан и
+начинает читать поток (становится **активным**), он **прикрепляется** к потоку. Чтобы чтением потока
+занялся другой считыватель, обычно необходимо **освободить** первый считыватель (хотя можно
+еще **раздвоить** поток).
+
+### Создание читаемого потока
+
+Чтобы создать читаемый поток, нужно вызвать его конструктор
+[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream).
+У конструктора есть необязательный аргумент `underlyingSource` — объект с методами
+и свойствами, определяющими поведение создаваемого экземпляра потока.
+
+#### Объект `underlyingSource`
+
+Здесь можно использовать необязательные методы, определяемые разработчиком:
+
+- Метод `start(controller)`: вызывается сразу после создания объекта. Может
+   обращаться к источнику потока и делать всё необходимое
+   для настройки функциональности потока. Если этот процесс должен выполняться асинхронно, метод может
+   вернуть промис для сигнализации о завершении операции или сбое. Передаваемый в метод параметр `controller` —
+   это
+   [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController).
+- Метод `pull(controller)`: может использоваться для управления потоком по мере получения фрагментов.
+   Вызывается повторно, пока внутренняя очередь фрагментов потока не заполнится — то есть, пока
+   очередь не достигнет максимального уровня. Если результат вызова `pull()` — промис,
+   то `pull()` не будет вызываться, пока промис не будет выполнен.
+   Если промис отклонен, поток перейдет в состояние ошибки.
+- Метод `cancel(reason)`: вызывается, когда потребитель отменяет поток.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+Контроллер `ReadableStreamDefaultController` поддерживает следующие методы:
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close)
+   закрывает соответствующий поток.
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue)
+   ставит данный фрагмент в очередь соответствующего потока.
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error)
+   вызывает ошибку при любом последующем взаимодействии с соответствующим потоком.
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('Первый фрагмент!');
+},
+/* … */
+```
+
+#### Аргумент `queuingStrategy`
+
+Второй (тоже необязательный) аргумент конструктора `ReadableStream()` — `queuingStrategy`.
+Это объект, дополнительно задающий стратегию организации очереди для потока.
+Принимает два параметра:
+
+- `highWaterMark` — неотрицательное число, указывающее максимальный уровень потока, использующего эту стратегию организации очереди;
+- `size(chunk)` — функция, которая вычисляет и возвращает конечный неотрицательный размер заданного значения фрагмента.
+   Результат используется для определения обратной реакции, отражаемой в соответствующем свойстве `ReadableStreamDefaultController.desiredSize`.
+   Также определяет, когда вызывается метод `pull()` базового источника.
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} Можно определить и собственную стратегию `queuingStrategy` или использовать экземпляр
+[`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy)
+или [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)
+для значения этого объекта. Используемая по умолчанию (если аргумент `queuingStrategy` не получен) стратегия
+соответствует `CountQueuingStrategy` с `highWaterMark`, равным `1`. {% endAside %}
+
+#### Методы `getReader()` и `read()`
+
+Чтобы читать из читаемого потока, нужен считыватель —
+[`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader).
+Метод `getReader()` интерфейса `ReadableStream` создает считыватель и блокирует для него
+поток. Во время блокировки получить еще один считыватель нельзя, пока текущий не будет освобожден.
+
+Метод [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read)
+интерфейса `ReadableStreamDefaultReader` возвращает промис, предоставляющий доступ к следующему
+фрагменту во внутренней очереди потока. Он выполняет или отклоняет результат в зависимости
+от состояния потока. Возможны следующие варианты:
+
+- Если фрагмент доступен, промис будет выполнен с объектом вида<br>
+   `{ value: chunk, done: false }`.
+- Если поток станет закрытым, промис будет выполнен с объектом вида<br>
+   `{ value: undefined, done: true }`.
+- Если поток перейдет в состояние ошибки, промис будет отклонен с соответствующей ошибкой.
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('Поток завершен.');
+    break;
+  }
+  console.log('Прочитан фрагмент:', value);
+}
+```
+
+#### Свойство `locked`
+
+Что проверить, заблокирован ли читаемый поток, используйте
+его свойство
+[`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked).
+
+```js
+const locked = readableStream.locked;
+console.log(`Поток ${locked ? 'indeed' : 'не'} заблокирован.`);
+```
+
+### Примеры кода с читаемым потоком
+
+В примере кода ниже показаны все этапы в действии. Сначала вы создаете `ReadableStream`, который в
+аргументе `underlyingSource` (класс `TimestampSource`) определяет метод `start()`.
+Этот метод указывает контроллеру (`controller`), что каждую секунду
+в течение десяти секунд нужно ставить в очередь (`enqueue()`) метку времени.
+В конце он указывает контроллеру закрыть (`close()`) поток. Чтобы потреблять поток,
+методом `getReader()` создается считыватель, после чего вызывается `read()`, пока поток
+не будет `done` (завершен).
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // Добавить строку в поток.
+      controller.enqueue(string);
+      console.log(`Поставлено в очередь: ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // Закрыть поток через 10 с.
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // Вызывается, когда считыватель выполняет отмену.
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // Метод `read()` возвращает промис, который
+    // разрешается, когда получено значение.
+    const { done, value } = await reader.read();
+    // Объекты результата содержат два свойства:
+    // `done` — `true`, если поток уже выдал все свои данные.
+    // `value` — данные. Всегда `undefined`, если `done` — `true`.
+    if (done) return result;
+    result += value;
+    console.log(`Прочитано символов на данный момент: ${result.length}`);
+    console.log(`Последний прочитанный фрагмент: ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('Поток завершен', result));
+```
+
+### Асинхронное итерирование
+
+Проверять на каждой итерации цикла `read()` значение `done` потока — пожалуй, не самый удобный API.
+К счастью, скоро появится более удобный способ делать это — асинхронное итерирование.
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %}
+Асинхронное итерирование еще не реализовано ни в одном браузере.
+{% endAside %}
+
+А пока что использовать асинхронное итерирование можно с помощью вспомогательной
+функции. Это позволяет использовать эту функцию в коде, как показано ниже.
+
+```js
+function streamAsyncIterator(stream) {
+  // Получаем блокировку на потоке:
+  const reader = stream.getReader();
+
+  return {
+    next() {
+      // Операции чтения потока уже разрешаются с помощью {done, value}, поэтому
+      // можно просто вызвать `read()`:
+      return reader.read();
+    },
+    return() {
+      // Снять блокировку, если итератор прекращает работу.
+      reader.releaseLock();
+      return {};
+    },
+    // Выражение «for await» делает вызов на всём, что было передано, поэтому
+    // итераторы обычно возвращают себя.
+    [Symbol.asyncIterator]() {
+      return this;
+    },
+  };
+}
+
+async function example() {
+  const response = await fetch(url);
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    console.log(chunk);
+  }
+}
+```
+
+### Раздвоение читаемого потока
+
+Метод [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) интерфейса
+`ReadableStream` раздваивает текущий читаемый поток и возвращает двухэлементный массив
+с двумя ветвями — новыми экземплярами `ReadableStream`. Это позволяет
+двум считывателем читать один поток одновременно. Это может пригодиться, например, для сервис-воркера,
+когда нужно получить ответ от сервера, передать его браузеру и одновременно отправить потоком
+в кеш сервис-воркера. Тело ответа нельзя использовать более одного раза, поэтому здесь понадобятся
+две копии. Чтобы отменить поток, нужно отменить обе полученные ветви. При раздвоении потока он
+обычно блокируется, что не дает другим считывателям его заблокировать.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Вызывается конструктором.
+    console.log('[запуск]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Вызываем `read()`, когда очередь контроллера пуста.
+    console.log('[извлечение]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Вызывается при отмене потока.
+    console.log('[отмена]', reason);
+  },
+});
+
+// Создаем два файла `ReadableStream`.
+const [streamA, streamB] = readableStream.tee();
+
+// Читаем streamA итеративно один за другим. Обычно
+// так не делается, но это возможно.
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// Читаем streamB в цикле. Это более привычный способ
+// чтения данных из потока.
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## Читаемые байтовые потоки
+
+Если поток представляет байты, используется расширенная версия читаемого потока, которая
+обеспечивает эффективную обработку байтов, в частности, путем минимизации числа копий. Байтовые потоки позволяют получать считыватели
+собственного буфера (BYOB). Реализация по умолчанию может давать различные данные на выходе, например
+буферы строк и массивов в случае WebSocket, а байтовые потоки всегда дают байтовый вывод.
+Кроме того, у BYOB-считывателей есть преимущество в стабильности.
+Если буфер отключается, запись в один и тот же буфер не будет проводиться дважды, что позволяет
+избежать состояния гонки. BYOB-считыватели могут сократить количество запусков сборки мусора
+браузером, поскольку они умеют использовать буферы повторно.
+
+### Создание читаемого байтового потока
+
+Чтобы создать читаемый байтовый поток, передайте дополнительный параметр `type`
+в конструктор `ReadableStream()`.
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### Объект `underlyingSource`
+
+Базовому источнику читаемого байтового потока для манипуляций дается контроллер
+`ReadableByteStreamController`. Его метод `ReadableByteStreamController.enqueue()` требует аргумент `chunk`, значение которого представляет собой
+`ArrayBufferView`. Свойство `ReadableByteStreamController.byobRequest` возвращает текущий
+запрос BYOB на извлечение или null, если его нет. Наконец, свойство `ReadableByteStreamController.desiredSize`
+возвращает желаемый размер для заполнения внутренней очереди контролируемого потока.
+
+### Аргумент `queuingStrategy`
+
+Второй (тоже необязательный) аргумент конструктора `ReadableStream()` — `queuingStrategy`.
+Это объект, дополнительно задающий стратегию организации очереди для потока.
+Принимает один параметр:
+
+- `highWaterMark` — неотрицательное количество байтов, указывающее максимальный уровень потока, использующего эту стратегию организации очереди.
+   Используется для определения обратной реакции, отражаемой в соответствующем свойстве `ReadableByteStreamController.desiredSize`.
+   Также определяет, когда вызывается метод `pull()` базового источника.
+
+{% Aside %}
+В отличие от стратегий организации очереди для потоков других типов, у стратегии для читаемого
+байтового потока нет функции `size(chunk)`. Размер фрагмента всегда определяется его свойством
+`byteLength`.
+{% endAside %}
+
+{% Aside %}
+Если `queuingStrategy` не задана, используется стандартная с `highWaterMark`, равным `0`.
+{% endAside %}
+
+#### Методы `getReader()` и `read()`
+
+Получить доступ к `ReadableStreamBYOBReader` можно, соответствующим образом задав параметр `mode`:
+`ReadableStream.getReader({ mode: "byob" })`. Это позволяет более точно контролировать выделение
+буфера во избежание копирования. Чтобы читать из байтового потока, нужно вызвать
+`ReadableStreamBYOBReader.read(view)`, где `view` —
+[`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView).
+
+#### Пример кода с читаемым байтовым потоком
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("Первые 1024 байта или меньше:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+Следующая функция возвращает читаемые байтовые потоки, обеспечивающие эффективное чтение
+случайно сгенерированного массива с нулевым копированием. Она не использует предопределенный размер фрагмента (1024),
+а пытается заполнить предоставленный разработчиком буфер и обеспечивает полный контроль.
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // Даже если потребитель использует считыватель по умолчанию,
+      // функция автоматического выделения выделяет буфер и
+      // передает его нам через `byobRequest`.
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## Принцип действия записываемого потока
+
+Записываемый поток — это пункт назначения для данных, в который можно писать. В JavaScript
+он представлен объектом [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream). Он
+служит абстракцией поверх **базового приемника** — низкоуровневого приемника ввода-вывода,
+в который записываются первичные данные.
+
+Данные пишутся в поток **записывателем**, по одному фрагменту за раз. Фрагмент может
+принимать различные формы, как и фрагмент в считывателе. Для создания готовых к записи фрагментов можно использовать
+любой код. Записыватель в сочетании с соответствующим кодом называется **производителем**.
+
+Когда записыватель создан и начинает писать в поток (**активный записыватель**), говорят,
+что он **прикрепляется** к нему. В записываемый поток одномоментно может писать только один записыватель. Чтобы другой записыватель
+мог начать писать в поток, обычно необходимо освободить его и только затем прикреплять
+новый записыватель.
+
+**Внутренняя очередь** отслеживает записанные в поток фрагменты, которые еще не были
+обработаны базовым приемником.
+
+**Стратегия организации очереди** — это объект, определяющий, как поток должен давать обратную
+реакцию на основе состояния своей внутренней очереди. Стратегия организации очереди назначает каждому фрагменту размер и сравнивает
+общий размер всех фрагментов в очереди с заданным числом — **максимальным уровнем**.
+
+Последний нужный нам объект здесь — **контроллер**. У каждого записываемого потока есть связанный с ним контроллер,
+который позволяет контролировать этот поток (например, прерывать).
+
+### Создание записываемого потока
+
+Интерфейс [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) Streams API
+предоставляет стандартную абстракцию для записи потоковых данных в пункт назначения —
+приемник. У этого объекта есть встроенная обратная реакция и организация очереди. Чтобы создать записываемый поток,
+нужно вызвать его конструктор
+[`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream).
+У него есть необязательный параметр `underlyingSink` — объект с методами
+и свойствами, определяющими поведение создаваемого экземпляра потока.
+
+#### Объект `underlyingSink`
+
+В `underlyingSink` могут быть следующие необязательные методы, определяемые разработчиком. Передаваемый в некоторые
+методы параметр `controller` — это
+[`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController).
+
+- Метод `start(controller)`: вызывается сразу после создания объекта. Его
+   код должен обеспечивать доступ к базовому приемнику. Если этот процесс должен выполняться
+   асинхронно, метод может вернуть промис для сигнализации о завершении операции или сбое.
+- Метод `write(chunk, controller)`: вызывается при появлении нового фрагмента данных (указанного
+   в параметре `chunk`), готового к записи в базовый приемник. Может вернуть промис для
+   сигнализации о завершении операции или сбое. Вызывается только после успешного завершения
+   предыдущих операций записи и никогда — после закрытия или прерывания потока.
+- Метод `close(controller)`: вызывается, если приложение сигнализирует о завершении записи
+   фрагментов в поток. Код метода должен сделать всё необходимое для завершения операций записи
+   в базовый приемник и освобождения доступа к нему. Если это асинхронный процесс, метод
+   может вернуть промис для сигнализации о завершении операции или сбое. Вызывается только после успешного завершения всех операций записи
+   в очереди.
+- Метод `abort(reason)`: вызывается, если приложение сигнализирует, что нужно внезапно закрыть
+   поток и перевести его в состояние ошибки. Код метода должен очистить удерживаемые ресурсы, примерно как и
+   `close()`, но `abort()` вызывается, даже если очередь операций записи не пуста. Соответствующие фрагменты будут
+   отброшены. Если это асинхронный процесс, метод может вернуть промис для сигнализации о завершении операции или сбое. Параметр
+   `reason` содержит`DOMString` с описанием причины, по которой поток был прерван.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+Интерфейс
+[`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController)
+в Streams API — это контроллер, позволяющий управлять состоянием `WritableStream`
+во время настройки, когда на запись отправляется больше фрагментов, и в конце записи. При создании
+`WritableStream` базовому приемнику дается соответствующий экземпляр `WritableStreamDefaultController`
+для манипуляций. `WritableStreamDefaultController` содержит только один метод:
+[`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error),
+который вызывает ошибку при любом последующем взаимодействии с соответствующим потоком.
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // Пробуем сделать что-нибудь опасное с `chunk`.
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### Аргумент `queuingStrategy`
+
+Второй (тоже необязательный) аргумент конструктора `WritableStream()` — `queuingStrategy`.
+Это объект, дополнительно задающий стратегию организации очереди для потока.
+Принимает два параметра:
+
+- `highWaterMark` — неотрицательное число, указывающее максимальный уровень потока, использующего эту стратегию организации очереди;
+- `size(chunk)` — функция, которая вычисляет и возвращает конечный неотрицательный размер заданного значения фрагмента.
+   Результат используется для определения обратной реакции, отражаемой в соответствующем свойстве `WritableStreamDefaultWriter.desiredSize`.
+
+{% Aside %} Можно определить и собственную стратегию `queuingStrategy` или использовать экземпляр
+[`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy)
+или [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy)
+для значения этого объекта. Используемая по умолчанию (если аргумент `queuingStrategy` не получен) стратегия
+соответствует `CountQueuingStrategy` с `highWaterMark`, равным `1`. {% endAside %}
+
+#### Методы `getWriter()` и `write()`
+
+Чтобы писать в записываемый поток, нужен записыватель —
+`WritableStreamDefaultWriter`. Метод `getWriter()` интерфейса `WritableStream` возвращает новый экземпляр
+`WritableStreamDefaultWriter` и блокирует поток для этого экземпляра. Во время блокировки
+получить еще один записыватель нельзя, пока текущий не будет освобожден.
+
+Метод [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write)
+интерфейса
+[`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter)
+записывает переданный фрагмент данных в поток `WritableStream` и его базовый приемник, а затем
+возвращает промис, разрешение которого указывает на завершение или сбой операции записи. Здесь
+смысл «завершения» зависит от базового приемника и может указывать на то,
+что фрагмент был принят, но не обязательно надежно сохранен в конечном пункте назначения.
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('Первый фрагмент!');
+```
+
+#### Свойство `locked`
+
+Чтобы проверить, заблокирован ли записываемый поток, используйте
+его свойство
+[`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked).
+
+```js
+const locked = writableStream.locked;
+console.log(`Поток ${locked ? 'indeed' : 'не'} заблокирован.`);
+```
+
+### Пример кода с записываемым потоком
+
+В примере кода ниже показаны все этапы в действии.
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[запуск]');
+  },
+  async write(chunk, controller) {
+    console.log('[запись]', chunk);
+    // Ожидание следующей записи.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[закрытие]');
+  },
+  abort(reason) {
+    console.log('[прерван]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // Ждем, чтобы добавить в очередь записи.
+  await writer.ready;
+  console.log('[готов]', Date.now() - start, 'ms');
+  // Промис разрешается после завершения записи.
+  writer.write(char);
+}
+await writer.close();
+```
+
+### Передача читаемого потока в записываемый поток
+
+Читаемый поток можно с помощью метода [`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo) направить
+в записываемый поток.
+`ReadableStream.pipeTo()` направляет текущий `ReadableStream` в указанный `WritableStream` и возвращает
+промис, который выполняется, когда процесс перенаправления завершается, и отклоняется
+в случае ошибки.
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // Вызывается конструктором.
+    console.log('[запуск читаемого]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // Вызывается, когда очередь контроллера пуста.
+    console.log('[извлечение]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // Вызывается при отмене потока.
+    console.log('[отмена]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // Вызывается конструктором
+    console.log('[запуск записываемого]');
+  },
+  async write(chunk, controller) {
+    // Вызывается после writer.write()
+    console.log('[запись]', chunk);
+    // Ожидание следующей записи.
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[закрытие]');
+  },
+  abort(reason) {
+    console.log('[прерван]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[завершено]');
+```
+
+## Создание преобразующего потока
+
+Интерфейс `TransformStream` в Streams API представляет набор преобразующихся данных. Преобразующий
+поток создается вызовом конструктора `TransformStream()`, который создает и возвращает объект
+преобразующего потока из заданных обработчиков. Первый аргумент конструктора `TransformStream()` —
+необязательный объект JavaScript, представляющий `transformer` (преобразователь). Такие объекты
+могут содержать любой из следующих методов:
+
+### Объект `transformer`
+
+- Метод `start(controller)`: вызывается сразу после создания объекта. Обычно
+   используется для постановки в очередь префиксных фрагментов — с помощью `controller.enqueue()`. Эти фрагменты считываются
+   с читаемой стороны, но не зависят от операций записи на записываемой стороне. Если этот исходный
+   процесс выполняется асинхронно (например, если для получения префиксных фрагментов требуются
+   некоторые действия), функция может вернуть промис для сигнализации о завершении операции или сбое;
+   отклоненный промис переведет поток в состояние ошибки. Все вызванные исключения будут повторно вызваны конструктором `TransformStream()`.
+- Метод `transform(chunk, controller)`: вызывается, когда новый фрагмент, изначально записанный
+   на записываемую сторону, готов к преобразованию. Реализация потока гарантирует, что эта функция будет
+   вызываться только после успешного завершения предыдущих преобразований, но не раньше, чем
+   `start()` завершит работу, и не позже, чем будет вызван `flush()`. Эта функция выполняет фактическую
+   работу по преобразованию в преобразующем потоке. Она может поставить результаты в очередь с помощью `controller.enqueue()`. Благодаря
+   этому один фрагмент, записанный на записываемой стороне, может дать ноль или несколько фрагментов
+   на читаемой стороне, в зависимости от количества вызовов `controller.enqueue()`. В случае
+   асинхронного процесса преобразования эта функция может возвращать промис для сигнализации
+   о завершении или сбое операции. Отклоненный промис переведет в состояние ошибки и читаемую, и записываемую
+   стороны преобразующего потока. Если метод `transform()` не указан, используется преобразование идентичности:
+   в очередь с записываемой стороны на читаемую ставятся неизменные фрагменты.
+- Метод `flush(controller)`: вызывается после того, как все фрагменты, записанные на записываемую
+   сторону, были преобразованы посредством `transform()` и записываемая сторона должна
+   быть закрыта. Обычно используется для постановки суффиксных фрагментов в очередь на читаемую
+   сторону, прежде чем она тоже закроется. Если процесс освобождения (flush) — асинхронный, функция может вернуть промис
+   для сигнализации о завершении или сбое операции; результат будет передан туда,
+   откуда был вызван `stream.writable.write()`. Отклоненный промис переведет в состояние ошибки и читаемую,
+   и записываемую стороны потока. Вызов исключения обрабатывается так же, как возврат отклоненного
+   промиса.
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### Стратегии организации очереди `writableStrategy` и `readableStrategy`
+
+Второй и третий необязательные параметры конструктора `TransformStream()` — стратегии
+организации очереди `writableStrategy` и `readableStrategy`. Их определение описано
+в разделах о [читаемых](#the-queuingstrategy) и [записываемых](#the-queuingstrategy-3)
+потоках соответственно.
+
+### Пример кода с преобразующим потоком
+
+В примере кода ниже показан несложный преобразующий поток в действии.
+
+```js
+// Обратите внимание, что сейчас `TextEncoderStream` и `TextDecoderStream` уже есть.
+// В примере показано, как это делалось бы раньше.
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[преобразование]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[освобождение]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[значение]', result.value);
+  }
+})();
+```
+
+### Передача читаемого потока в преобразующий поток
+
+Метод [`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough)
+интерфейса `ReadableStream` обеспечивает цепное перенаправление текущего потока через преобразующий
+поток или любую другую пару «записываемый — читаемый». При перенаправлении потока он
+обычно блокируется, что не дает другим считывателям его заблокировать.
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[преобразование]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[освобождение]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // вызывается конструктором
+    console.log('[запуск]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // вызываем `read`, когда очередь контроллера пуста
+    console.log('[извлечение]');
+    controller.enqueue('d');
+    controller.close(); // или controller.error();
+  },
+  cancel(reason) {
+    // вызывается при `rs.cancel(reason)`
+    console.log('[отмена]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[значение]', result.value);
+  }
+})();
+```
+
+В следующем примере (немного надуманном) показано, как реализовать «кричащую» версию `fetch()`,
+который переводит текст в верхний регистр, получая возвращенный промис ответа
+[как поток](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream)
+и меняя регистр фрагментом за фрагментом. Преимущество — не нужно ждать загрузки всего документа,
+что может быть очень важно при работе с большими файлами.
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## Поддержка в браузерах и полифил
+
+Поддержка Streams API зависит от браузера. Подробнее о совместимости
+см. на странице [Can I use](https://caniuse.com/streams). В некоторых браузерах определенные
+функции реализованы частично, поэтому обязательно сверяйтесь с этими данными.
+
+Но есть и хорошая новость: доступна
+[эталонная реализация](https://github.com/whatwg/streams/tree/master/reference-implementation)
+и [полифил](https://github.com/MattiasBuelens/web-streams-polyfill), нацеленные на
+использование в реальных проектах.
+
+{% Aside 'gotchas' %}
+По возможности загружайте полифил условно и только в том случае, если встроенной функции нет.
+{% endAside %}
+
+## Демонстрация
+
+В примере ниже — читаемые, записываемые и преобразующие потоки в действии, а также примеры
+конвейеров `pipeThrough()` и `pipeTo()` и раздвоения посредством `tee()`. [Демонстрацию](https://streams-demo.glitch.me/)
+можно запустить в отдельном окне или открыть ее
+[исходный код](https://glitch.com/edit/#!/streams-demo?path=script.js).
+
+{% Glitch 'streams-demo' %}
+
+## Полезные потоки, доступные в браузере
+
+В браузер встроено несколько удобных на практике потоков. Из BLOB можно легко создать
+`ReadableStream`. Метод [stream()](https://developer.mozilla.org/docs/Web/API/Blob/stream)
+интерфейса [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) возвращает
+`ReadableStream`, который после чтения возвращает данные из BLOB. Вспомним также, что объект
+[`File`](https://developer.mozilla.org/docs/Web/API/File) —
+это особый вид `Blob` и может использоваться в том же контексте, что и BLOB.
+
+```js
+const readableStream = new Blob(['hello world'], { type: 'text/plain' }).stream();
+```
+
+Потоковые варианты `TextDecoder.decode()` и `TextEncoder.encode()` называются
+[`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) и
+[`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream) соответственно.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+Сжимать и распаковывать файлы удобно
+преобразующими потоками
+[`CompressionStream`](https://wicg.github.io/compression/#compression-stream) и
+[`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream) соответственно. В примере ниже показано, как загрузить спецификацию Streams, сжать ее (gzip) ее сразу
+в браузере и записать сжатый файл напрямую на диск.
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+Поток [`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream)
+в [File System Access API](/file-system-access/)
+и экспериментальные [потоки запроса `fetch()`](/fetch-upload-streaming/#writable-streams) —
+примеры реального применения записываемых потоков.
+
+В [Serial API](/serial/) широко используются и читаемые, и записываемые потоки.
+
+```js
+// Предложить пользователю выбрать последовательный порт.
+const port = await navigator.serial.requestPort();
+// Дождаться открытия последовательного порта.
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// Слушать данные, поступающие от устройства с последовательным интерфейсом.
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // Разрешить закрытие последовательного порта позже.
+    reader.releaseLock();
+    break;
+  }
+  // значение `value` — Uint8Array.
+  console.log(value);
+}
+
+// Записать в последовательный порт.
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
+await writer.write(data);
+// Разрешить закрытие последовательного порта позже.
+writer.releaseLock();
+```
+
+Наконец, [`WebSocketStream`](/websocketstream/) API встраивает потоки в WebSocket API.
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## Полезные ресурсы
+
+- [Спецификация Streams API](https://streams.spec.whatwg.org/).
+- [Демонстрации](https://streams.spec.whatwg.org/demos/).
+- [Полифил для потоков](https://github.com/MattiasBuelens/web-streams-polyfill).
+- [2016 г. — год веб-потоков](https://jakearchibald.com/2016/streams-ftw/).
+- [Асинхронные итераторы и генераторы](https://jakearchibald.com/2017/async-iterators-and-generators/).
+- [Визуализатор потоков](https://surma.dev/lab/whatwg-stream-visualizer/lab.html).
+
+## Благодарности
+
+Статью просматривали и проверяли:
+[Jake Archibald](https://jakearchibald.com/),
+[François Beaufort](https://github.com/beaufortfrancois),
+[Sam Dutton](https://samdutton.com/),
+[Mattias Buelens](https://github.com/MattiasBuelens),
+[Surma](https://surma.dev/),
+[Joe Medley](https://github.com/jpmedley) и
+[Adam Rice](https://github.com/ricea).
+Публикация [Джейка Арчибальда](https://jakearchibald.com/) в блоге помогла мне разобраться
+в потоках. Идеи для некоторых примеров частично взяты из кода
+пользователя [@bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac) на GitHub.
+Текст частично основан на
+[веб-документации MDN по потокам](https://developer.mozilla.org/docs/Web/API/Streams_API). [Авторы](https://github.com/whatwg/streams/graphs/contributors)
+[стандарта Streams](https://streams.spec.whatwg.org/)
+проделали огромную работу по написанию этой
+спецификации. Главное изображение — [Ryan Lara](https://unsplash.com/@ryanlara)
+([Unsplash](https://unsplash.com/)).
diff --git a/src/site/content/ru/blog/strict-csp/index.md b/src/site/content/ru/blog/strict-csp/index.md
new file mode 100644
index 00000000000..f4c7ea5d829
--- /dev/null
+++ b/src/site/content/ru/blog/strict-csp/index.md
@@ -0,0 +1,405 @@
+---
+layout: post
+title: Предотвращение межсайтового скриптинга (XSS) при помощи строгой политики безопасности контента (CSP)
+subhead: Развертывание CSP-политики на основе одноразовых номеров или хешей скриптов для обеспечения комплексной защиты от межсайтового скриптинга.
+description: Узнайте, как развернуть CSP-политику на основе одноразовых номеров или хешей скриптов, чтобы обеспечить комплексную защиту от межсайтового скриптинга.
+authors:
+  - lwe
+date: 2021-03-15
+hero: image/3lmWcR1VGYVMicNlBh4aZWBTcSg1/mhE0NYvP3JFyvNyiQ1dj.jpg
+alt: Скриншот JavaScript-кода, устанавливающего строгую политику безопасности контента.
+tags:
+  - blog
+  - security
+---
+
+## Зачем нужна строгая политика безопасности контента (CSP)?
+
+[Межсайтовый скриптинг (XSS)](https://www.google.com/about/appsecurity/learning/xss/) — внедрение в веб-приложения вредоносных скриптов — уже более десяти лет является одной из самых серьезных уязвимостей в области веб-безопасности.
+
+[Политика безопасности контента (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) — это дополнительная мера защиты, нацеленная на предотвращение XSS-атак. Для настройки CSP-политики необходимо добавить на веб-страницу HTTP-заголовок Content-Security-Policy и установить значения, чтобы указать, какие ресурсы пользовательскому агенту разрешено загружать в рамках этой страницы. Эта статья рассказывает, как защититься от XSS-атак, используя CSP-политику на основе одноразовых номеров или хешей в противоположность стандартным CSP-политикам на основе белого списка доменов, которые зачастую оставляют страницу уязвимой для XSS-атак, поскольку в большинстве конфигураций [их можно обойти](https://research.google.com/pubs/pub45542.html).
+
+{% Aside 'key-term' %} *Одноразовый номер* — это случайное, используемое только один раз число, при помощи которого можно пометить тег `<script>` как доверенный. {% endAside %}
+
+{% Aside 'key-term' %} Хеш-функция — это математическая функция, преобразующая подаваемое на вход значение в сжатое число — хеш. При помощи *хешей* (таких, как [SHA-256](https://en.wikipedia.org/wiki/SHA-2)) можно помечать встраиваемые теги `<script>` как доверенные. {% endAside %}
+
+Политика безопасности контента, основанная на использовании одноразовых номеров или хешей, часто называется *строгой CSP-политикой*. Если приложение использует строгую CSP-политику, злоумышленники, обнаруживающие неправильно внедренный HTML-код, в большинстве случаев не смогут с его помощью заставить браузер выполнять вредоносные скрипты в контексте уязвимого документа. Это обусловлено тем, что при использовании строгой CSP-политики разрешается выполнение только хешированных скриптов или скриптов с верно указанным одноразовым номером, сгенерированным на сервере, благодаря чему злоумышленник не может выполнить скрипт, так как не имеет одноразового номера, соответствующего ответу.
+
+{% Aside %} Чтобы защитить сайт от XSS-атак, необходимо выполнять санитизацию вводимых пользователем данных и *одновременно* использовать CSP-политику в качестве дополнительной меры защиты. CSP — это метод [комплексной защиты](https://en.wikipedia.org/wiki/Defense_in_depth_(computing)), который может предотвратить выполнение вредоносных скриптов, однако он не избавляет от необходимости предотвращать (и вовремя исправлять) ошибки XSS. {% endAside %}
+
+### Почему строгая CSP-политика предпочтительнее CSP-политики на основе белого списка
+
+Если на вашем сайте применяется CSP-политика с явным указанием домена (`script-src www.googleapis.com`), имейте в виду, что она может не быть эффективным средством защиты от межсайтового скриптинга. Такая CSP-политика называется политикой на основе белого списка, и у нее есть два недостатка:
+
+- Она требует существенного изменения кода.
+- В большинстве вариантов конфигурации [ее можно обойти](https://research.google.com/pubs/pub45542.html).
+
+Эти недостатки делают CSP на основе белого списка неэффективным средством защиты от XSS-атак. Вот почему рекомендуется использовать строгую CSP-политику на основе криптографически сгенерированных одноразовых номеров или хешей, чтобы избежать проблем, описанных выше.
+
+<div class="switcher">{% Compare 'worse', 'CSP-политика на основе белого списка' %} — Не является эффективным средством защиты сайта. ❌ — Требует существенного изменения кода. 😓 {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Строгая CSP-политика' %}</p>
+<ul data-md-type="list" data-md-list-type="unordered" data-md-list-tight="true">
+<li data-md-type="list_item" data-md-list-type="unordered">Эффективно защищает ваш сайт. ✅</li>
+<li data-md-type="list_item" data-md-list-type="unordered">Код всегда имеет одинаковую структуру. 😌 {% endCompare %}</li>
+</ul>
+<div data-md-type="block_html"></div>
+
+## В чем заключается суть строгой политики безопасности контента?
+
+Строгая политика безопасности контента настраивается в соответствии со структурой, показанной ниже, и для ее активации необходимо установить один из следующих заголовков ответа HTTP:
+
+- **Строгая CSP-политика на основе одноразовых номеров**
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/er4BaGCJzBwDaESFKfZd.jpg", alt="", width="800", height="279" %}
+
+- **Строгая CSP-политика на основе хешей**
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+
+```
+
+{% Aside warning %} Здесь показана минимальная версия строгой CSP-политики. Чтобы обеспечить работу во всех браузерах, ее необходимо дополнить; подробности см. в разделе об [указании резервной политики для поддержки Safari и устаревших браузеров](#step-4:-add-fallbacks-to-support-safari-and-older-browsers). {% endAside %}
+
+CSP-политика, приведенная выше, является «строгой» (и, следовательно, безопасной) по следующим причинам:
+
+- Она позволяет разработчику сайта при помощи одноразовых номеров (`'nonce-{RANDOM}'`) или хешей (`'sha256-{HASHED_INLINE_SCRIPT}'`) помечать «доверенные» теги `<script>`, выполнение которых должно быть разрешено в браузере пользователя.
+
+- Она устанавливает параметр [`'strict-dynamic'`](https://www.w3.org/TR/CSP3/#strict-dynamic-usage), автоматически разрешающий выполнение скриптов, создаваемых уже доверенными скриптами, что позволяет упростить внедрение CSP-политики на основе одноразовых номеров или хешей. Это также делает возможным использование большинства сторонних библиотек и виджетов на основе JavaScript.
+
+- Она не основана на списках разрешенных URL-адресов и поэтому не подвержена [стандартным методам обхода CSP](https://speakerdeck.com/lweichselbaum/csp-is-dead-long-live-strict-csp-deepsec-2016?slide=15).
+
+- Она блокирует ненадежные встроенные скрипты, включая встроенные обработчики событий и URI с `javascript:`.
+
+- Она ограничивает использование `object-src` и тем самым блокирует использование небезопасных плагинов, таких как Flash.
+
+- Она ограничивает использование `base-uri`, тем самым запрещая внедрение тегов `<base>`, чтобы не позволить злоумышленникам изменять расположение скриптов, загружаемых при помощи относительных URL-адресов.
+
+{% Aside %} Еще одно преимущество строгой CSP-политики заключается в том, что ее определение всегда имеет одинаковую структуру и его не нужно адаптировать для конкретного приложения. {% endAside %}
+
+## Переход на строгую CSP-политику
+
+Чтобы перейти на использование строгой CSP-политики, вам необходимо:
+
+1. Определиться, какой вид CSP-политики ваше приложение будет использовать: на основе одноразовых номеров или на основе хешей.
+2. Скопировать код CSP-политики из раздела [В чем заключается суть строгой политики безопасности контента](#what-is-a-strict-content-security-policy) и установить его в качестве заголовка ответа на всех страницах вашего приложения.
+3. Провести рефакторинг HTML-шаблонов и кода, выполняемого на стороне клиента, чтобы исключить несовместимые с CSP паттерны.
+4. Добавить резервные политики для поддержки Safari и устаревших браузеров.
+5. Развернуть CSP-политику.
+
+В ходе этого процесса вы можете использовать проверку **Best Practices** в [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (v7.3.0 или выше с флагом `--preset=experimental`) для подтверждения того, что на вашем сайте действует CSP-политика и она является достаточно строгой для предотвращения XSS-атак.
+
+{% Img src="image/9B7J9oWjgsWbuE84mmxDaY37Wpw2/42a4iEEKsD4T3yU47vNQ.png", alt="Предупреждение отчета Lighthouse о том, что CSP-политика, применяемая в режиме исполнения, не обнаружена.", width="730", height="78" %}
+
+### Шаг 1. Определитесь, какой вид CSP использовать: на основе одноразовых номеров или на основе хешей
+
+Существует два вида строгих CSP-политик: на основе одноразовых номеров и на основе хешей. Вот как они работают:
+
+- **CSP-политика на основе одноразовых номеров**: *во время выполнения* генерируется случайное число, которое указывается в коде CSP-политики и связывается с каждым тегом script на странице. Злоумышленник не сможет подключить к странице вредоносный скрипт и выполнить его, поскольку для этого ему пришлось бы угадать случайное число, соответствующее этому скрипту. Этот подход работает только в том случае, если число невозможно угадать и оно заново генерируется для каждого ответа на этапе выполнения.
+- **CSP-политика на основе хешей**: в коде CSP-политики указывается хеш каждого встроенного тега script. Обратите внимание, что каждый скрипт имеет собственный хеш. Злоумышленник не сможет подключить к странице вредоносный скрипт и выполнить его, так как хеш скрипта должен присутствовать в коде CSP-политики.
+
+Ниже приведены критерии для выбора типа строгой CSP-политики:
+
+<div>
+  <table>
+      <caption>Критерии для выбора типа строгой CSP-политики</caption>
+      <thead>
+      <tr>
+        <th>CSP-политика на основе одноразовых номеров</th>
+        <td>Подходит для HTML-страниц, рендеринг которых происходит на сервере, благодаря чему случайный токен (одноразовый номер) можно генерировать заново для каждого ответа.</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>CSP-политика на основе хешей</th>
+        <td>Подходит для HTML-страниц, загружаемых статически или с использованием кеша. Пример — одностраничные веб-приложения, построенные на таких фреймворках, как Angular, React и т. д., использующие статическую загрузку без рендеринга на стороне сервера.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Шаг 2. Установите строгую CSP-политику и подготовьте теги script
+
+При установке CSP-политики необходимо определиться с парой моментов:
+
+- Какой режим использовать: режим отправки отчетов (`Content-Security-Policy-Report-Only`) или режим исполнения (`Content-Security-Policy`). В режиме отправки отчетов CSP-политика не будет использоваться для блокирования ресурсов (т. е. все скрипты продолжат работать), однако вы сможете видеть ошибки и получать отчеты о ресурсах, попадающих под блокировку. Если вы настраиваете CSP-политику локально, между этими режимами нет существенной разницы: в обоих случаях вы будете видеть сообщения об ошибках в консоли браузера. В режиме исполнения выявлять заблокированные ресурсы и корректировать CSP-политику будет даже проще, так как вы сразу увидите, что страница функционирует неправильно. Наиболее полезным режим отправки отчетов становится на более поздних этапах процесса (см. [шаг 5](#step-5:-deploy-your-csp)).
+- Где разместить политику: в заголовке или в HTML-теге `<meta>`. При локальной разработке использование тега `<meta>` может быть более уместным, так как позволяет с легкостью подстраивать CSP-политику и сразу же видеть результат. Однако имейте в виду следующее:
+    - В дальнейшем, при развертывании CSP-политики на реальном сайте, рекомендуется использовать для ее установки HTTP-заголовок.
+    - Если вы хотите использовать CSP-политику в режиме отправки отчетов, ее необходимо устанавливать при помощи заголовка: при установке CSP-политики при помощи тега meta режим отправки отчетов не поддерживается.
+
+<span id="nonce-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} Вариант А. CSP-политика на основе одноразовых номеров {% endDetailsSummary %}
+
+Задайте для своего приложения следующий заголовок HTTP-ответа `Content-Security-Policy`:
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{RANDOM}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside 'caution' %}
+
+Вместо `{RANDOM}` должен указываться *случайный* одноразовый номер, генерируемый заново **при каждом ответе сервера**. {% endAside %}
+
+#### Генерация одноразовых номеров для CSP-политики
+
+Одноразовый номер — это случайное число, меняющееся при каждой загрузке страницы. CSP-политика на основе одноразовых номеров предотвращает XSS-атаки только в том случае, если значение номера **не может быть угадано** злоумышленником. Одноразовые номера, используемые в рамках CSP-политики, должны быть:
+
+- **Криптографически стойкими** случайными числами (в идеале длиной от 128 бит).
+- Генерируемыми **индивидуально для каждого ответа**.
+- Закодированными при помощи Base64.
+
+Вот примеры того, как указывать одноразовые номера для CSP-политики при использовании некоторых серверных фреймворков:
+
+- [Django (Python).](https://django-csp.readthedocs.io/en/latest/nonce.html)
+- Express (JavaScript):
+
+```javascript
+const app = express();
+app.get('/', function(request, response) {
+    // Генерация случайного одноразового числа заново для каждого ответа.
+    const nonce = crypto.randomBytes(16).toString("base64");
+    // Установка строгой CSP-политики на основе одноразовых чисел при помощи заголовка ответа
+    const csp = `script-src 'nonce-${nonce}' 'strict-dynamic' https:; object-src 'none'; base-uri 'none';`;
+    response.set("Content-Security-Policy", csp);
+    // Это значение необходимо присвоить атрибуту `nonce` для каждого тега <script> в вашем приложении.
+    response.render(template, { nonce: nonce });
+  });
+}
+```
+
+#### Добавление атрибута `nonce` к элементам `<script>`
+
+При использовании CSP-политики на основе одноразовых номеров у каждого элемента `<script>` должен быть атрибут `nonce`, значение которого должно совпадать со случайным одноразовым номером, указанным в заголовке CSP-политики (все скрипты могут использовать один и тот же одноразовый номер). Для начала добавьте этот атрибут ко всем тегам script:
+
+{% Compare 'worse', 'Запрещено CSP-политикой'%}
+
+```html
+<script src="/path/to/script.js"></script>
+<script>foo()</script>
+```
+
+{% CompareCaption %} Эти скрипты будут заблокированы CSP-политикой, поскольку не имеют атрибута `nonce`. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Разрешено CSP-политикой' %}
+
+```html
+<script nonce="${NONCE}" src="/path/to/script.js"></script>
+<script nonce="${NONCE}">foo()</script>
+```
+
+{% CompareCaption %} Выполнение этих скриптов будет разрешено CSP-политикой, если заменить `${NONCE}` на значение, совпадающее с одноразовым номером, который указан в CSP-политике в заголовке ответа. Учтите, что некоторые браузеры скрывают атрибут `nonce` при инспектировании исходного кода страницы. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} Если CSP-политика содержит параметр `'strict-dynamic'`, то одноразовые номера необходимо будет указывать только для тегов `<script>`, содержащихся в исходном HTML-ответе. Параметр `'strict-dynamic'` позволяет исполнять скрипты, динамически добавляемые на страницу, при условии, что их загрузка происходит из безопасного, уже одобренного скрипта (подробности см. в [спецификации](https://www.w3.org/TR/CSP3/#strict-dynamic-usage)). {% endAside %}
+
+{% endDetails %}
+
+<span id="hash-based-csp"></span>
+
+{% Details %}
+
+{% DetailsSummary %} Вариант Б. Заголовок ответа для CSP-политики на основе хешей {% endDetailsSummary %}
+
+Задайте для своего приложения следующий заголовок HTTP-ответа `Content-Security-Policy`:
+
+```text
+Content-Security-Policy:
+  script-src 'sha256-{HASHED_INLINE_SCRIPT}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+```
+
+При необходимости указать несколько встроенных скриптов используйте следующий синтаксис: `'sha256-{HASHED_INLINE_SCRIPT_1}' 'sha256-{HASHED_INLINE_SCRIPT_2}'` .
+
+{% Aside 'caution' %} Вместо `{HASHED_INLINE_SCRIPT}` необходимо указать хеш (SHA-256, закодированный в base64) встроенного скрипта, используемого для загрузки остальных скриптов (см. следующий раздел). Для того чтобы вычислить SHA-хеш статического встроенного блока `<script>`, можно воспользоваться [этим инструментом](https://strict-csp-codelab.glitch.me/csp_sha256_util.html). В качестве альтернативного решения вы можете просмотреть в консоли разработчика Chrome предупреждения о нарушении CSP-политики и добавить содержащиеся в них хеши заблокированных скриптов в код политики, дописав к ним приставку «sha256-…».
+
+Скрипты, внедряемые злоумышленниками, будут блокироваться, поскольку браузер будет разрешать выполнение только хешированного встроенного скрипта, а также скриптов, динамически подключаемых с его помощью. {% endAside %}
+
+#### Динамическая загрузка внешних скриптов
+
+Скрипты, подключаемые из внешних источников, необходимо загружать динамически при помощи встроенного скрипта, поскольку использование CSP-политики для проверки хешей внешних скриптов [поддерживается не во всех браузерах](https://wpt.fyi/results/content-security-policy/script-src/script-src-sri_hash.sub.html?label=master&label=experimental&aligned).
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/B2YsfJDYw8PRI6kJI7Bs.jpg", alt="", width="800", height="333" %}
+
+{% Compare 'worse', 'Запрещено CSP-политикой' %}
+
+```html
+<script src="https://example.org/foo.js"></script>
+<script src="https://example.org/bar.js"></script>
+```
+
+{% CompareCaption %} Эти скрипты будут заблокированы  CSP-политикой, поскольку хеширование поддерживается только для встроенных скриптов. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Разрешено CSP-политикой' %}
+
+```html
+<script>
+var scripts = [ 'https://example.org/foo.js', 'https://example.org/bar.js'];
+scripts.forEach(function(scriptUrl) {
+  var s = document.createElement('script');
+  s.src = scriptUrl;
+  s.async = false; // to preserve execution order
+  document.head.appendChild(s);
+});
+</script>
+```
+
+{% CompareCaption %} Чтобы разрешить выполнение этого скрипта, необходимо вычислить его хеш и указать его в CSP-политике в заголовке ответа, заменив строку `{HASHED_INLINE_SCRIPT}`. При желании все встроенные скрипты можно объединить, чтобы сократить количество хешей. Чтобы увидеть, как это работает, вы можете ознакомиться с [примером](https://strict-csp-codelab.glitch.me/solution_hash_csp#) и изучить его [код](https://glitch.com/edit/#!/strict-csp-codelab?path=demo%2Fsolution_hash_csp.html%3A1%3A). {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Aside 'gotchas' %} При вычислении хешей встроенных скриптов, указываемых в CSP-политике, необходимо учитывать символы пробелов между открывающим и закрывающим тегами `<script>`. Рассчитать хеш встроенного скрипта для CSP-политики можно при помощи [этого инструмента](https://strict-csp-codelab.glitch.me/csp_sha256_util.html). {% endAside %}
+
+{% Details %}
+
+{% DetailsSummary %} Примечание об использовании `async = false` при загрузке скриптов: в данном случае `async = false` не блокирует поток, но использовать его следует с осторожностью. {% endDetailsSummary %}
+
+В приведенном выше фрагменте кода использование `s.async = false` гарантирует, что foo выполнится раньше, чем bar (даже если bar загрузится первым). <strong data-md-type="double_emphasis">В данном фрагменте использование `s.async = false` не блокирует парсер во время загрузки скриптов</strong>; это обусловлено тем, что скрипты добавляются динамически. Приостановка парсера будет происходить только во время выполнения скриптов — точно так же, как если бы параметр `async` был включен. Однако при рассмотрении этого фрагмента кода учитывайте следующее:
+
+- Выполнение скриптов может начаться до того, как документ полностью загрузится. Если вы хотите, чтобы к моменту начала выполнения скриптов документ был уже загружен, необходимо дождаться [события `DOMContentLoaded`](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) и уже после этого подключить скрипты. Если это приведет к падению производительности (из-за слишком позднего начала скачивания скриптов), вы можете указать [теги предварительной загрузки](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) ближе к началу страницы.
+- Не используйте параметр `defer = true`, поскольку он не даст нужного эффекта. Вместо этого вручную запускайте выполнение скрипта тогда, когда это требуется. {% endDetails %}
+
+{% endDetails %}
+
+### Шаг 3. Проведите рефакторинг HTML-шаблонов и кода, выполняемого на стороне клиента, чтобы исключить несовместимые с CSP паттерны
+
+Встроенные обработчики событий (такие, как `onclick="…"` или `onerror="…"`) и URI, содержащие JavaScript (`<a href="javascript:…">`), могут использоваться для запуска скриптов. Это означает, что злоумышленник, обнаруживший XSS-уязвимость, сможет внедрить на страницу такой HTML-код и с его помощью выполнить вредоносный код JavaScript. CSP-политики на основе хешей и одноразовых номеров запрещают использование такой разметки. Если на вашем сайте используются описанные выше паттерны, необходимо провести рефакторинг и заменить их на более безопасные альтернативы.
+
+Если в ходе предыдущего шага вы включили CSP, вы сможете видеть в консоли сообщения о нарушении CSP-политики каждый раз, когда происходит блокировка запрещенного паттерна.
+
+{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/mRWfNxAhQXzInOLCgtv8.jpg", alt="Сообщения о нарушении CSP-политики в консоли разработчика Chrome.", width="800", height="235" %}
+
+В большинстве случаев исправление не потребует больших усилий:
+
+#### Перепишите встроенные обработчики JavaScript таким образом, чтобы их добавление происходило из блока JavaScript
+
+{% Compare 'worse', 'Запрещено CSP-политикой' %}
+
+```html
+<span onclick="doThings();">A thing.</span>
+```
+
+{% CompareCaption %} Встроенные обработчики событий будут заблокированы CSP-политикой. {% endCompareCaption%}
+
+{% endCompare %}
+
+{% Compare 'better', 'Разрешено CSP-политикой' %}
+
+```html
+<span id="things">A thing.</span>
+<script nonce="${nonce}">
+  document.getElementById('things')
+          .addEventListener('click', doThings);
+</script>
+```
+
+{% CompareCaption %} Регистрация обработчиков событий с помощью JavaScript разрешена CSP-политикой. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### Для URI с `javascript:` можно использовать аналогичный паттерн
+
+{% Compare 'worse', 'Запрещено CSP-политикой' %}
+
+```html
+<a href="javascript:linkClicked()">foo</a>
+```
+
+{% CompareCaption %} URI с javascript: будут заблокированы CSP-политикой. {% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Разрешено CSP-политикой' %}
+
+```html
+<a id="foo">foo</a>
+<script nonce="${nonce}">
+  document.getElementById('foo')
+          .addEventListener('click', linkClicked);
+</script>
+```
+
+{% CompareCaption %} Регистрация обработчиков событий с помощью JavaScript разрешена CSP-политикой. {% endCompareCaption %}
+
+{% endCompare %}
+
+#### Использование `eval()` в JavaScript-коде
+
+Если ваше приложение использует `eval()` для преобразования данных, сериализованных в виде JSON, в объекты JS, необходимо переписать такой код с использованием `JSON.parse()`: это не только безопаснее, но и [быстрее](https://v8.dev/blog/cost-of-javascript-2019#json).
+
+Если полностью исключить использование `eval()` нет возможности, вы по-прежнему сможете использовать строгую CSP-политику на основе одноразовых номеров, однако вам придется добавить параметр `'unsafe-eval'`, который сделает политику немного менее безопасной.
+
+С примерами такого рефакторинга вы можете ознакомиться в интерактивном уроке, посвященном строгим CSP-политикам: {% Glitch { id: 'strict-csp-codelab', path: 'demo/solution_nonce_csp.html', highlights: '14,20,28,39,40,41,42,43,44,45,54,55,56,57,58,59,60', previewSize: 35, allow: [] } %}
+
+### Шаг 4. Добавьте резервные политики для поддержки Safari и устаревших браузеров
+
+CSP-политики поддерживаются всеми основными браузерами, однако вам понадобится добавить две резервные политики:
+
+- При использовании `'strict-dynamic'` необходимо указать `https:` в качестве резервной политики для поддержки Safari — единственного крупного браузера, не поддерживающего `'strict-dynamic'`. При использовании такой конфигурации:
+
+    - Все браузеры, поддерживающие `'strict-dynamic'`, будут игнорировать `https:`, так что безопасность политики не снизится.
+    - В Safari загрузка скриптов из внешних источников будет разрешена только для источников с протоколом HTTPS. Такая политика менее безопасна, чем строгая CSP-политика (поэтому она и является резервной), однако она по-прежнему защищает от многих распространенных причин XSS-атак, таких как внедрение URI с `javascript:`, поскольку при наличии хеша или одноразового номера параметр `'unsafe-inline'` игнорируется.
+
+- Чтобы обеспечить совместимость с очень старыми версиями браузеров (вышедшими более 4 лет назад), вы можете добавить в качестве резервной политики `'unsafe-inline'`. Во всех современных браузерах при наличии CSP-политики на основе одноразового номера или хеша параметр `'unsafe-inline'` будет игнорироваться.
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-{random}' 'strict-dynamic' https: 'unsafe-inline';
+  object-src 'none';
+  base-uri 'none';
+```
+
+{% Aside %} Параметры `https:` и `unsafe-inline` не делают политику менее безопасной, поскольку будут игнорироваться браузерами, поддерживающими `strict-dynamic`. {% endAside %}
+
+### Шаг 5. Разверните CSP-политику
+
+Протестировав сайт в локальной среде разработки и убедившись, что CSP-политика не блокирует нужные скрипты, вы можете приступить к развертыванию CSP-политики сначала в промежуточной, а затем и в производственной среде:
+
+1. (необязательно) Разверните CSP-политику в режиме отправки отчетов, используя заголовок `Content-Security-Policy-Report-Only` ([статья о Reporting API](/reporting-api/)). Режим отправки отчетов удобен для безопасного тестирования в производственной среде изменений, которые могут потенциально нарушить работу сайта, таких как новая CSP-политика. В режиме отправки отчетов CSP-политика не влияет на поведение приложения: сайт продолжает работать так же, как и до этого. Однако браузер будет отображать в консоли сообщения и отчеты о нарушении CSP-политики, когда встречает несовместимый с ней код (и таким образом позволит диагностировать проблемы, которые возникли бы у конечных пользователей).
+2. Удостоверившись, что CSP-политика не вызовет нарушений в работе сайта у конечных пользователей, вы можете развернуть ее, используя заголовок ответа `Content-Security-Policy`. **Только после выполнения этого шага CSP-политика начнет защищать ваше приложение от XSS-атак**. Установка CSP-политики при помощи серверного HTTP-заголовка является более безопасной, чем использование тега `<meta>`; если у вас есть возможность, используйте заголовок.
+
+{% Aside 'gotchas' %} Убедитесь, что используемая вами CSP-политика является «строгой», проверив ее при помощи [CSP Evaluator](https://csp-evaluator.withgoogle.com) или Lighthouse. Это очень важный шаг, поскольку даже небольшие изменения в политике могут значительно снизить ее безопасность. {% endAside %}
+
+{% Aside 'caution' %} Активировав CSP-политику в производственной среде, вы можете увидеть в отчетах о нарушении CSP-политики некоторое количество шума, генерируемого браузерными расширениями и вредоносным ПО. {% endAside %}
+
+## Ограничения
+
+Как правило, строгая CSP-политика обеспечивает мощный дополнительный уровень защиты от XSS-атак. В большинстве случаев использование CSP-политики значительно снижает число уязвимых мест (полностью исключая использование таких опасных возможностей, как URI с `javascript:`). Однако в зависимости от типа применяемой CSP-политики (на основе одноразовых номеров, хешей, а также с использованием `'strict-dynamic'` или без него) существует ряд случаев, на которые ее действие не распространяется:
+
+- Внедрение кода непосредственно в тело или в параметр `src` элемента `<script>`, защищенного одноразовым номером.
+- Внедрение кода в места расположения динамически создаваемых скриптов (`document.createElement('script')`), включая библиотечные функции, создающие DOM-узлы `script` на основе передаваемых им аргументов. К таким функциям относятся некоторые распространенные API, такие как `.html()` в jQuery, а также `.get()` и `.post()` в jQuery &lt; 3.0.
+- Внедрение шаблонов в старые приложения на AngularJS. Злоумышленник, внедривший шаблон AngularJS, может использовать его для [выполнения произвольного JavaScript-кода](https://sites.google.com/site/bughunteruniversity/nonvuln/angularjs-expression-sandbox-bypass).
+- Внедрение кода в `eval()`, `setTimeout()` и ряд других редко используемых API,  если политика содержит параметр `'unsafe-eval'`.
+
+Разработчикам и инженерам по безопасности следует обращать на такие моменты особое внимание в ходе проверок кода и аудитов безопасности. Подробнее об описанных выше случаях можно узнать в [этой презентации, посвященной CSP](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf#page=27).
+
+{% Aside %} Trusted Types (доверенные типы) — отличное дополнение к строгим CSP-политикам, позволяющее преодолеть некоторые из ограничений, описанных выше. Подробности см. в [статье об использовании Trusted Types на web.dev](/trusted-types). {% endAside %}
+
+## Материалы для дальнейшего чтения
+
+- [CSP Is Dead, Long Live CSP! On the Insecurity of Whitelists and the Future of Content Security Policy](https://research.google/pubs/pub45542/)
+- Инструмент [CSP Evaluator](https://csp-evaluator.withgoogle.com/)
+- [Content Security Policy — A successful mess between hardening and mitigation (конференция LocoMoco)](https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf)
+- [Securing Web Apps with Modern Platform Features (лекция с Google I/O)](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)
diff --git a/src/site/content/ru/blog/text-fragments/index.md b/src/site/content/ru/blog/text-fragments/index.md
new file mode 100644
index 00000000000..4e3bddb2f0e
--- /dev/null
+++ b/src/site/content/ru/blog/text-fragments/index.md
@@ -0,0 +1,316 @@
+---
+title: 'Смело размещайте ссылки на то, на что еще никто не ссылался: текстовые фрагменты'
+subhead: |-
+  Текстовые фрагменты позволяют указать отрывок текста во фрагменте URL-адреса.
+  При переходе по URL-адресу с таким отрывком браузер может выделить его и привлечь к нему внимание пользователя.
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: |-
+  Текстовые фрагменты позволяют указать отрывок текста во фрагменте URL-адреса.
+  При переходе по URL-адресу с таким отрывком браузер может выделить его и привлечь к нему внимание пользователя.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## Идентификаторы фрагментов
+
+Версия Chrome 80 содержала множество важных изменений. Был реализован ряд долгожданных функций, таких как [модули ECMAScript в веб-воркерах](/module-workers/), [нулевое слияние](https://v8.dev/features/nullish-coalescing), [опциональная последовательность](https://v8.dev/features/optional-chaining) и другие. О выпуске, как обычно, было объявлено в [блоге](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) Chromium. Отрывок из публикации в блоге приведен на скриншоте ниже.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %}<figcaption> Публикация в блоге Chromium с красными рамками вокруг элементов с атрибутом <code>id</code>.</figcaption></figure>
+
+Вы, вероятно, задаетесь вопросом, что это за красные прямоугольники. Они являются результатом выполнения следующего фрагмента в DevTools. Он выделяет все элементы, у которых есть атрибут `id`.
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+Я могу разместить внешнюю ссылку на любой элемент, выделенный красной рамкой, благодаря [идентификатору фрагмента](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment), который я затем использую в [хэше](https://developer.mozilla.org/docs/Web/API/URL/hash) URL-адреса страницы. Допустим, я решил добавить внешнюю ссылку на блок «*Оставить отзыв в разделе [Форумы по продукту](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)*» сбоку. Это можно сделать вручную, создав URL-адрес <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1</code></a>. Как видно на панели «Элементы» в инструментах разработчика, рассматриваемый элемент имеет атрибут `id` со значением `HTML1`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %} <figcaption> Отображение <code>id</code> элемента в Dev Tools.</figcaption></figure>
+
+Если проанализировать этот URL-адрес с помощью конструктора JavaScript `URL()`, будут обнаружены различные компоненты. Обратите внимание на свойство `hash` со значением `#HTML1`.
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Создаем новый объект `URL`
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+Впрочем, чтобы найти `id` элемента, мне пришлось открыть инструменты разработчика. Это многое говорит о том, с какой вероятностью автор публикации собирался разместить ссылку конкретно на этот раздел страницы.
+
+А что, если мне нужно опубликовать ссылку на что-то, не имеющее `id`? Скажем, я хочу сделать ссылку на заголовок *ECMAScript Modules in Web Workers*. Как видно на скриншоте ниже, у рассматриваемого элемента `<h1>` нет `id`, а это значит, что я не могу ссылаться на этот заголовок. Как раз эту проблему решают текстовые фрагменты.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption> Заголовок без <code>id</code> в Dev Tools.</figcaption></figure>
+
+## Текстовые фрагменты
+
+Предложение «[Фрагменты текста](https://wicg.github.io/ScrollToTextFragment/)» добавляет поддержку для указания фрагмента текста в хэше URL-адреса. При переходе по URL-адресу с таким фрагментом текста пользовательский агент может выделить его и привлечь внимание пользователя.
+
+### Совместимость с браузерами
+
+Функция текстовых фрагментов поддерживается в браузерах на базе Chromium 80 и более поздних версий. На момент написания этой статьи Safari и Firefox не заявляли публично о намерении реализовать эту функцию. Перейти к обсуждениям Safari и Firefox можно из раздела «[Ссылки по теме](#related-links)».
+
+{% Aside 'success' %} Эти ссылки раньше не работали при [переадресации на стороне клиента](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections), которую используют некоторые распространенные сервисы, например, Twitter. Эта проблема была задокументирована по адресу [crbug.com/1055455](https://crbug.com/1055455) и на данный момент уже исправлена. Обычные [перенаправления HTTP](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle) всегда работали нормально. {% endAside %}
+
+По [соображениям безопасности](#security) функция требует, чтобы ссылки открывались в контексте [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener). Поэтому не забывайте указывать параметр [`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel) для якорей `<a>` и добавлять [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener) к списку функций окна `Window.open()`.
+
+### `textStart`
+
+В простейшей форме синтаксис текстовых фрагментов выглядит следующим образом: символ `#`, за которым следует выражение `:~:text=`, а затем — `textStart`, который представляет собой [закодированный в процентах](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) текст, на который я хочу создать ссылку.
+
+```bash
+#:~:text=textStart
+```
+
+Допустим, я хочу сделать ссылку на заголовок *ECMAScript Modules in Web Workers* [в публикации в блоге, где описаны новые функции Chrome 80](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html). URL-адрес в этом случае будет таким:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers</code></a>
+
+Текстовый фрагмент выделен <mark class="highlight-line highlight-line-active">вот так</mark>. Если вы нажмете на ссылку в браузере с поддержкой этой функции, например, Chrome, фрагмент текста будет выделен, а экран прокрутится до него:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption> Экран прокручен до выделенного фрагмента текста.</figcaption></figure>
+
+### `textStart` и `textEnd`
+
+А что, если я хочу сделать ссылку на весь *раздел* *ECMAScript Modules in Web Workers*, а не только на его заголовок? Процентное кодирование всего текста раздела сделало бы URL-адрес неприменимо длинным.
+
+К счастью, есть способ получше. Вместо того, чтобы передавать весь текст, можно задать его границы, используя синтаксис `textStart,textEnd`. Так что я укажу по несколько слов с процентным кодированием в начале и в конце нужного текста, разделив их запятой `,`.
+
+Это выглядит так:
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.</code></a>.
+
+Значением `textStart` будет `ECMAScript%20Modules%20in%20Web%20Workers`, затем идет запятая `,`, за которой следует `ES%20Modules%20in%20Web%20Workers.` —значение `textEnd`. Когда вы нажмете на такую ссылку в браузере с соответствующей поддержкой, например, Chrome, весь раздел будет выделен, а экран прокрутится до него:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %} <figcaption> Экран прокручен до выделенного фрагмента текста.</figcaption></figure>
+
+Здесь вы можете усомниться в моем выборе значений `textStart` и `textEnd`. На самом деле, чуть более короткий URL-адрес <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.</code></a> с двумя словами с каждой стороны тоже подойдет. Сравните `textStart` и `textEnd` с предыдущими значениями.
+
+Но если я сделаю еще один шаг и использую лишь по одному слову в `textStart` и `textEnd`, вы увидите, что у меня проблемы. URL-адрес <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.</code></a> стал еще короче, но выделенный фрагмент текста уже не соответствует тому, что планировался изначально. Выделение прекращается при первом появлении слова `Workers.`, что технически верно, но это не то, что я собирался выделить. Проблема в том, что нужный раздел не идентифицируется однозначно текущими значениями `textStart` и `textEnd`, содержащими по одному слову:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption> Экран прокручен, но выделенный фрагмент текста не тот, что нужно.</figcaption></figure>
+
+### `prefix-` и `-suffix`
+
+Используя достаточно длинные значения для `textStart` и `textEnd`, можно получить уникальную ссылки. Однако в некоторых ситуациях это невозможно. Кстати, почему я выбрал в качестве примера публикацию в блоге о выпуске Chrome 80? Дело в том, что в этой версии были представлены текстовые фрагменты:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="Текст публикации в блоге: фрагменты текста URL. Пользователи и авторы теперь могут ссылаться на определенную часть страницы, используя фрагмент текста, указанный в URL. При загрузке страницы браузер выделяет текст и прокручивает область просмотра до нужного фрагмента. Например, указанный ниже URL загружает вики-страницу для 'Cat' и прокручивает экран до контента, указанного в параметре `text`.", width="800", height="200" %} <figcaption>Отрывок из публикации в блоге с объявлением о текстовых фрагментах.</figcaption></figure>
+
+Обратите внимание, что на скриншоте выше слово «text» появляется четыре раза. Четвертое вхождение написано зеленым кодовым шрифтом. Если бы я хотел создать ссылку на это конкретное слово, я бы установил для `textStart` значение `text`. Поскольку «text» — это всего лишь одно слово, параметр `textEnd` неприменим. Что же делать? URL-адрес <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text</code></a> совпадает с первым вхождением слова «Text» уже в заголовке:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption> Фрагмент текста соответствует первому вхождению «Text».</figcaption></figure>
+
+{% Aside 'caution' %} Обратите внимание, что при сопоставлении фрагментов текста регистр не учитывается. {% endAside %}
+
+К счастью, решение есть. В подобных случаях можно указать параметры `prefix​-` и `-suffix`. Слово перед написанным зеленым кодовым шрифтом «text» — это «the», а слово после него — «parameter». Ни одно из трех других вхождений слова «text» не окружают те же слова. Вооружившись этими знаниями, я могу настроить предыдущий URL и добавить `prefix-` и `-suffix`. Как и другие параметры, они также должны быть закодированы в процентах и ​​могут содержать более одного слова. <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter</code></a>. Чтобы синтаксический анализатор мог четко распознать `prefix-` и `-suffix`, их необходимо отделять от `textStart` и необязательного `textEnd` при помощи дефиса `-`.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %} <figcaption>Фрагмент текста соответствует желаемому вхождению «text».</figcaption></figure>
+
+### Полный синтаксис
+
+Полный синтаксис текстовых фрагментов показан ниже. (Квадратные скобки указывают на необязательный параметр.) Значения всех параметров должны быть закодированы в процентах. Особенно это касается символов дефиса `-`, амперсанда `&` и запятой `,`, чтобы они не интерпретировались как часть синтаксиса текстовой директивы.
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+Каждый из параметров `prefix-` , `textStart`, `textEnd` и `-suffix` будет соответствовать только тексту в пределах одного [элемента уровня блока](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements), но полные диапазоны `textStart,textEnd` *могут* охватывать несколько блоков. Например, `:~:text=The quick,lazy dog` не найдет соответствия в следующем примере, потому что начальная строка «The quick» не появляется в одном непрерывном элементе уровня блока:
+
+```html
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
+```
+
+Однако в этом примере соответствие будет найдено:
+
+```html
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
+```
+
+### Создание URL-адресов с текстовыми фрагментами с помощью расширений браузера
+
+Создавать URL-адреса с текстовыми фрагментами вручную — утомительный процесс, особенно когда дело доходит до обеспечения их уникальности. Если вы действительно этого хотите — в спецификации есть несколько советов и перечислены точные [шаги для создания URL-адресов с текстовыми фрагментами](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives). Мы предоставляем расширение для браузера с открытым исходным кодом под названием [Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment), которое позволяет создавать ссылки на любой текст, выделяя его, а затем выбирая «Копировать ссылку на выбранный текст» в контекстном меню. Это расширение доступно для следующих браузеров:
+
+- [Link to Text Fragment для Google Chrome](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [Link to Text Fragment для Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [Link to Text Fragment для Mozilla Firefox](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [Link to Text Fragment для Apple Safari](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %} <figcaption> Расширение браузера <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">Link to Text Fragment</a>.</figcaption></figure>
+
+### Несколько фрагментов текста в одном URL
+
+Обратите внимание, что в одном URL-адресе может отображаться несколько фрагментов текста. Отдельные фрагменты текста необходимо разделять символом амперсанда `&`. Вот пример ссылки с тремя текстовыми фрагментами: <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet</code></a>.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %} <figcaption> Три текстовых фрагмента в одном URL.</figcaption></figure>
+
+### Смешивание элемента и текстовых фрагментов
+
+Фрагменты традиционных элементов можно комбинировать с фрагментами текста. Совершенно нормально использовать и то, и другое в одном и том же URL-адресе, например, чтобы обеспечить осмысленный запасной вариант на случай, если исходный текст на странице изменится и текстовый фрагмент перестанет соответствовать параметрам. URL-адрес <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.</code></a>, ведущий к разделу *Give us feedback in our [Product Forums](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)*, содержит как фрагмент элемента (`HTML1`), так и текстовый фрагмент `text=Give%20us%20feedback%20in%20our%20Product%20Forums.`):
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %} <figcaption> Ссылка с фрагментом элемента и текстовым фрагментом.</figcaption></figure>
+
+### Директива фрагмента
+
+Есть элемент синтаксиса, который я еще не объяснил: директива фрагмента `:~:`. Чтобы избежать проблем совместимости с существующими фрагментами элементов URL, как показано выше, в [спецификации текстовых фрагментов](https://wicg.github.io/ScrollToTextFragment/) вводится директива фрагмента. Директива фрагмента — это часть фрагмента URL-адреса, ограниченная кодовой последовательностью `:~:`. Она зарезервирована для инструкций пользовательского агента, таких как `text=`, и удаляется из URL-адреса во время загрузки, чтобы авторские скрипты не могли взаимодействовать с ним напрямую. Инструкции пользовательского агента также называются *директивами*. Поэтому в данном случае `text=` называется *текстовой директивой*.
+
+### Обнаружение функций
+
+Чтобы определить, поддерживается ли функция, проверьте доступное только для чтения свойство `fragmentDirective` на элементе `document`. Директива фрагмента — это механизм, позволяющий URL-адресам указывать инструкции, направленные браузеру, а не документу. Это предназначено для того, чтобы избежать прямого взаимодействия с авторскими скриптами, так что будущие инструкции пользовательского агента могут быть добавлены без опасений, что в существующий контент будут внесены критические изменения. Потенциальный пример таких будущих дополнений — подсказки для перевода.
+
+```js
+if ('fragmentDirective' in document) {
+  // Текстовые фрагменты поддерживаются.
+}
+```
+
+{% Aside %} Начиная с Chrome 80 до Chrome 85 свойство `fragmentDirective` было определено в `Location.prototype`. Подробнее об этом изменении: [WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130). {% endAside %}
+
+Обнаружение функций в основном предназначено для случаев, когда ссылки генерируются динамически (например, поисковыми системами), чтобы избежать передачи ссылок на фрагменты текста браузерам, которые их не поддерживают.
+
+### Стилизация фрагментов текста
+
+По умолчанию браузеры задают стиль фрагментам текста так же, как и [`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) (обычно это черный текст на желтом фоне, [системные цвета](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors) CSS для `mark`). Таблица стилей пользовательского агента содержит CSS, который выглядит следующим образом:
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+Как видите, браузер предоставляет псевдоселектор [`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text), который можно использовать для настройки применяемого выделения. Например, вы можете оформить свои текстовые фрагменты в виде черного текста на красном фоне. Как обычно, не забудьте [проверить цветовой контраст](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast), чтобы ваш переопределенный стиль не вызвал проблем с доступностью, и убедитесь, что выделение действительно визуально отличается от остального контента.
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### Возможность полизаполнения
+
+Функцию текстовых фрагментов можно до некоторой степени полизаполнить. Мы предоставляем [полизаполнение](https://github.com/GoogleChromeLabs/text-fragments-polyfill), которое внутренне используется [расширением](https://github.com/GoogleChromeLabs/link-to-text-fragment), для браузеров без встроенной поддержки текстовых фрагментов, где функциональность реализована на JavaScript.
+
+### Программная генерация ссылки на фрагмент текста
+
+[Полизаполнение](https://github.com/GoogleChromeLabs/text-fragments-polyfill) содержит файл `fragment-generation-utils.js`, который можно импортировать и использовать для создания ссылок на фрагменты текста. Это показано в примере кода ниже:
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### Получение фрагментов текста для аналитических целей
+
+Многие сайты используют фрагменты для роутинга, поэтому браузеры исключают текстовые фрагменты, чтобы не нарушать работу этих страниц. Признана [необходимость](https://github.com/WICG/scroll-to-text-fragment/issues/128) поддержки ссылок на фрагменты текста для страниц, например, для аналитических целей, но предлагаемое решение еще не реализовано. В качестве временного решения вы можете использовать приведенный ниже код для извлечения нужной информации.
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### Безопасность
+
+Директивы текстовых фрагментов вызываются только при полных переходах (не в рамках одной страницы), которые являются результатом [активации пользователя](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation). Кроме того, для переходов из источника, отличного от пункта назначения, потребуется, чтобы переход происходил в контексте [`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener), чтобы целевая страница была достаточно изолирована. Директивы фрагмента текста применяются только к основному фрейму. Это означает, что поиск текста внутри окон iframe не будет выполняться, а переход в iframe не вызовет фрагмент текста.
+
+### Конфиденциальность
+
+Важно, чтобы реализации спецификации текстовых фрагментов не допускали утечек независимо от того, был ли текстовый фрагмент найден на странице или нет. В то время как фрагменты элементов полностью контролируются автором исходной страницы, текстовые фрагменты могут быть созданы кем угодно. Помните, как в моем примере выше не было возможности создать ссылку на заголовок *ECMAScript Modules in Web Workers*, поскольку у элемента `<h1>` не было `id`, но при этом любой, включая меня, мог просто ссылаться на любое место, подобрав подходящий фрагмент текста?
+
+Представьте, что я запустил чудовищную рекламную сеть `evil-ads.example.com`. Далее представьте, что в одном из моих рекламных фреймов при взаимодействии пользователя с объявлением я динамически создаю скрытый iframe с другим источником, ведущий на `dating.example.com` с URL-адресом с текстовым фрагментом <code>dating.example.com#:~:text=Log%20Out</code>. Если обнаружен текст «Log Out», я знаю, что жертва в настоящее время выполнила вход в систему на сайте `dating.example.com`, который я могу использовать для профилирования пользователей. Простая реализация текстовых фрагментов может решить, что успешное совпадение должно вызвать переключение фокуса. Соответственно, на `evil-ads.example.com` я могу прослушивать событие `blur` и благодаря этому знать, когда произойдет совпадение. Мы реализовали фрагменты текста в Chrome таким образом, чтобы описанный выше сценарий не мог произойти.
+
+Другой вариант злого умысла — эксплуатация сетевого трафика на основе положения прокрутки. Предположим, у меня был доступ к журналам сетевого трафика моей жертвы, например, как у администратора внутренней сети компании. А теперь представьте, что существует длинный документ отдела по работе с персоналом под названием «*Что делать, если вы страдаете от…*», в котором перечислен список состояний, таких как *выгорание*, *тревога* и т. д. Я мог бы разместить веб-маяк рядом с каждым пунктом списка. Далее, если я увижу, что загрузка документа совпадает по времени с загрузкой веб-маяка рядом, скажем, с пунктом «*выгорание*», то как администратор интрасети я могу определить, что сотрудник нажал на ссылку на текстовый фрагмент с `:~:text=burn%20out`, полагая, что это конфиденциально и никому не видно. Поскольку этот пример изначально несколько надуманный и его использование требует выполнения *чрезвычайно* специфических предварительных условий, команда безопасности Chrome сочла контролируемым риск реализации прокрутки при навигации. Другие пользовательские агенты могут решить вместо этого показать элемент пользовательского интерфейса с ручной прокруткой.
+
+Для сайтов, где требуется исключить применение этого функционала, Chromium поддерживает значение заголовка [Document Policy](https://wicg.github.io/document-policy/), которое можно отправлять, чтобы пользовательские агенты не обрабатывали URL-адреса с текстовыми фрагментами.
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## Отключение текстовых фрагментов
+
+Проще всего отключить эту функцию, используя расширение, которое может вставлять заголовки HTTP-ответа, например, [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj) (не является продуктом Google), чтобы вставить заголовок ответа (*не* запроса) следующим образом:
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+Еще один способ, посложнее — применить корпоративную настройку [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled). Чтобы сделать это в macOS, вставьте в терминал приведенную ниже команду.
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+В Windows следуйте документации на сайте [справки Google Chrome Enterprise](https://support.google.com/chrome/a/answer/9131254?hl=en).
+
+{% Aside 'warning' %} Пробуйте это, только если знаете, что делаете. {% endAside %}
+
+## Текстовые фрагменты в веб-поиске
+
+Для некоторых запросов поисковая система Google дает быстрый ответ или сводку с фрагментом контента с соответствующего веб-сайта. Эти *избранные фрагменты* чаще всего появляются, когда поиск выполняется в форме вопроса. Нажав на избранный фрагмент, пользователь переходит прямо к его тексту на исходной веб-странице. Это работает благодаря автоматически созданным URL-адресам фрагментов текста.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %}<figcaption> Страница результатов поисковой системы Google с избранным фрагментом. В строке состояния отображается URL-адрес с фрагментом текста.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %} <figcaption> После нажатия экран прокручивается до соответствующего раздела страницы.</figcaption></figure>
+
+## Заключение
+
+URL-адреса с текстовыми фрагментами — это мощное средство для создания ссылок на произвольный текст на веб-страницах. С его помощью научное сообщество может приводить точные цитаты или ссылки на источники, поисковые системы могут создавать внешние ссылки на текстовые результаты на страницах, а социальные сети могут позволить пользователям делиться определенными фрагментами веб-страницы вместо недоступных скриншотов. Надеюсь, что вы начнете [пользоваться URL-адресами с текстовыми фрагментами](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet) и, как и я, сочтете их полезными. Обязательно установите расширение браузера [Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment).
+
+## Ссылки по теме
+
+- [Черновая спецификация](https://wicg.github.io/scroll-to-text-fragment/)
+- [Обзор TAG](https://github.com/w3ctag/design-reviews/issues/392)
+- [Запись состояния платформы Chrome](https://chromestatus.com/feature/4733392803332096)
+- [Отслеживание ошибок Chrome](https://crbug.com/919204)
+- [Ветка обсуждения «Intent to Ship»](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [Ветка обсуждения на WebKit-Dev](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Позиция стандартов Mozilla](https://github.com/mozilla/standards-positions/issues/194)
+
+## Благодарности
+
+Текстовые фрагменты были реализованы и описаны [Ником Беррисом](https://github.com/nickburris) и [Дэвидом Боканом](https://github.com/bokand) при участии [Гранта Вана](https://github.com/grantjwang). Отдельная благодарность [Джо Медли](https://github.com/jpmedley) за тщательное рецензирование этой статьи. Баннер взят у [Грега Ракози](https://unsplash.com/@grakozy) на [Unsplash](https://unsplash.com/photos/oMpAz-DN-9I).
diff --git a/src/site/content/ru/blog/trust-tokens/index.md b/src/site/content/ru/blog/trust-tokens/index.md
new file mode 100644
index 00000000000..605d4020420
--- /dev/null
+++ b/src/site/content/ru/blog/trust-tokens/index.md
@@ -0,0 +1,232 @@
+---
+title: Начало работы с Trust Tokens
+subhead: Trust Tokens (Токены доверия) — это новый API, позволяющий веб-сайту передавать ограниченный объем информации из одного контекста просмотра в другой (например, между сайтами) для борьбы с мошенничеством без использования пассивного отслеживания.
+authors:
+  - samdutton
+date: 2020-06-22
+updated: 2021-12-10
+hero: image/admin/okxi2ttRG3h1Z4F3cylI.jpg
+thumbnail: image/admin/cTo0l2opcfNxg1TEjxSg.jpg
+alt: Черно-белая фотография руки, держащей жетон
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside  'caution' %} **⚠️ Предупреждение: вам может потребоваться обновить приложение!**
+
+**TrustTokenV3** — это набор обратно несовместимых изменений в реализации Trust Tokens в Chromium. Изменения появились в Chrome 92, стабильная версия которого вышла в конце июля 2021 года.
+
+Необходимо обновить существующие приложения, [тестирующие API](https://www.chromestatus.com/feature/5078049450098688), если вы еще этого не сделали.
+
+Узнайте больше: [что такое TrustTokenV3?](https://bit.ly/what-is-trusttokenv3). {% endAside %}
+
+<br><br>
+
+{% YouTube id='bXB1Iwq6Eq4' %}
+
+## Резюме
+
+Токены доверия позволяют источнику выдавать криптографические токены пользователю, которому он доверяет. Токены хранятся в браузере пользователя. В дальнейшем браузер может использовать токены в других контекстах для оценки подлинности пользователя.
+
+Trust Token API позволяет передавать доверие к подлинности пользователя из одного контекста в другой, не прибегая к идентификации пользователя или связыванию двух идентификаторов.
+
+Вы можете опробовать API в нашей [демонстрации](https://trust-token-demo.glitch.me) и [проверить токены](https://developers.google.com/web/updates/2021/01/devtools#trust-token) на вкладках Chrome DevTools **Network** и **Application**.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/krrI292OLd6awb4dxkN0.jpg", alt="Скриншот, показывающий Trust Tokens на вкладке Network в Chrome DevTools.", width="800", height="584" %} <figcaption>Trust Tokens на вкладке <b>Network</b> в Chrome DevTools.</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cwR9JdoVo1M4VDovP2oM.jpg", alt="Скриншот, показывающий Trust Tokens на вкладке Application в Chrome DevTools.", width="800", height="584" %} <figcaption>Trust Tokens на вкладке <b>Application</b> в Chrome DevTools.</figcaption></figure>
+
+{% Aside %} Privacy Sandbox — это ряд предложений, позволяющих удовлетворить запросы сторонних разработчиков без использования сторонних файлов cookie и других механизмов отслеживания. См. статью [«Подробно о Privacy Sandbox»](/digging-into-the-privacy-sandbox), чтобы ознакомиться со всеми предложениями.
+
+**Нам важны отзывы об этом предложении!** Если у вас есть комментарии, [создайте тему](https://github.com/WICG/trust-token-api/issues/new) в репозитории [объяснения токенов доверия](https://github.com/WICG/trust-token-api). {% endAside %}
+
+## Зачем нужны токены доверия?
+
+Интернет нуждается в способах установки и передачи сигналов доверия, показывающих, что пользователь действительно является тем, за кого себя выдает, а не ботом, маскирующимся под человека, или злоумышленником, пытающимся обмануть реального человека или сервис. Защита от мошенничества особенно важна для рекламодателей, поставщиков рекламы и сетей CDN.
+
+К сожалению, многие существующие механизмы оценки и распространения доверия — например, используемые для подтверждения того, что с сайтом взаимодействует реальный человек, — используют технологии, которые также могут применяться для создания цифровых отпечатков.
+
+{% Aside 'key-term' %} **Фингерпринтинг**, или создание цифрового отпечатка, позволяет сайтам идентифицировать и отслеживать отдельных пользователей, получая данные об их устройстве, операционной системе и настройках браузера (например, языковых настройках, строке [user-agent](https://developer.mozilla.org/docs/Web/API/NavigatorID/userAgent) и доступных шрифтах), а также изменениях в состоянии устройства. Это можно делать как на стороне сервера путем проверки заголовков запросов, так и на стороне клиента при помощи JavaScript.
+
+Фингерпринтинг использует механизмы, о которых пользователи не знают и которые не могут контролировать. Такие сайты, как [Panopticlick](https://panopticlick.eff.org/) и [amiunique.org](https://amiunique.org/), показывают, как данные, полученные в результате фингерпринтинга, можно объединить, чтобы идентифицировать вашу личность. {% endAside %}
+
+API должен сохранять конфиденциальность, позволяя распространять доверие между сайтами без отслеживания отдельных пользователей.
+
+## Что содержится в предложении Trust Tokens?
+
+Интернет полагается на построение сигналов доверия для обнаружения мошенничества и спама. Один из способов это реализовать — отслеживать просмотр с помощью глобальных межсайтовых идентификаторов пользователя. Для API, сохраняющего конфиденциальность, это неприемлемо.
+
+Из [**объяснения**](https://github.com/WICG/trust-token-api#overview) предложения:
+
+<blockquote>
+<p>Этот API предлагает новую область хранения для каждого источника для криптографических токенов в стиле «Privacy Pass», которые доступны в сторонних контекстах. Эти токены не персонализированы и не могут использоваться для отслеживания пользователей, но имеют криптографическую подпись, поэтому их нельзя подделать.</p>
+<p>Когда источник находится в контексте, в котором он доверяет пользователю, он может выдать браузеру пакет токенов, который может быть «потрачен» позже в контексте, в котором пользователь в противном случае был бы неизвестен или меньше заслуживал доверия. Важно отметить, что токены неотличимы друг от друга, что не позволяет веб-сайтам отслеживать пользователей через них.</p>
+<p>Мы также предлагаем механизм расширения, позволяющий браузеру подписывать исходящие запросы ключами, привязанными к конкретной активации токена.</p>
+</blockquote>
+
+## Пример использования API
+
+Следующее адаптировано из [примера кода в объяснении API](https://github.com/WICG/trust-token-api#sample-api-usage).
+
+{% Aside %} Код в этой публикации использует обновленный синтаксис, доступный начиная с Chrome 88. {% endAside %}
+
+Представьте, что пользователь посещает новостной веб-сайт (`publisher.example`), на котором размещена реклама из сторонней рекламной сети (`foo.example`). Пользователь ранее посещал сайт социальной сети, который выпускает токены доверия (`issuer.example`).
+
+В приведенной ниже последовательности показано, как работают токены доверия.
+
+**1.** Пользователь заходит на сайт `issuer.example` и выполняет действия, которыми подтверждает для сайта, что он реальный человек, например, проводит операции с учетной записью или проходит тест CAPTCHA.
+
+**2.** `issuer.example` проверяет, является ли пользователь человеком, и запускает следующий код JavaScript для выдачи токена доверия браузеру пользователя:
+
+```js
+fetch('https://issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request',
+    issuer: 'https://issuer.example'
+  }
+}).then(...)
+```
+
+**3.** Браузер пользователя сохраняет токен доверия, связывая его с `issuer.example`.
+
+**4.** Через некоторое время пользователь заходит на сайт `publisher.example`.
+
+**5.** `publisher.example` хочет знать, является ли пользователь реальным человеком. `publisher.example` доверяет сайту `issuer.example`, поэтому он проверяет, есть ли в браузере пользователя действительные токены из этого источника:
+
+```js
+document.hasTrustToken('https://issuer.example');
+```
+
+**6.** Если возвращается обещание, которое разрешается в `true`, это означает, что у пользователя есть токены от `issuer.example`, поэтому `publisher.example` может попытаться активировать токен:
+
+```js
+fetch('https://issuer.example/trust-token', {
+trustToken: {
+  type: 'token-redemption',
+  issuer: 'https://issuer.example',
+  refreshPolicy: {none, refresh}
+}
+}).then(...)
+```
+
+С помощью этого кода:
+
+1. Сайт издателя `publisher.example` запрашивает активацию.
+2. Если активация успешна, сайт-эмитент `issuer.example` возвращает запись об активации, которая указывает, что в какой-то момент эмитент выпустил действительный токен для этого браузера.
+
+**7.** Как только обещание, возвращаемое `fetch()`, будет разрешено, запись об активации может быть использована в последующих запросах ресурсов:
+
+```js
+fetch('https://foo.example/get-content', {
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['https://issuer.example', ...]
+  }
+});
+```
+
+С помощью этого кода:
+
+1. Записи об активации включаются в заголовок запроса `Sec-Redemption-Record`.
+2. `foo.example` получает запись об активации и может ее проанализировать, чтобы определить, считал ли `issuer.example` этого пользователя реальным человеком.
+3. `foo.example` отвечает соответствующим образом.
+
+{% Details %} {% DetailsSummary %} Как веб-сайт может решить, доверять ли вам? {% endDetailsSummary %} У вас может быть история покупок в Интернет-магазине, отметки на платформе определения местоположения или движение по счету в банке. Эмитенты также могут учитывать другие факторы, например, как долго у вас была учетная запись, или другие взаимодействия (например, CAPTCHA или отправка форм), которые повышают доверие эмитента к вероятности того, что вы релаьный человек. {% endDetails %}
+
+### Выпуск токена доверия
+
+Если эмитент токена доверия, такой как `issuer.example`, считает пользователя заслуживающим доверия, эмитент может получить токены доверия для пользователя, выполнив запрос `fetch()` с параметром `trustToken`:
+
+```js
+fetch('issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request'
+  }
+}).then(...)
+```
+
+Это вызывает расширение протокола выдачи [Privacy Pass](https://privacypass.github.io/) с использованием [нового криптографического примитива](https://eprint.iacr.org/2020/072.pdf):
+
+1. Сгенерируйте набор псевдослучайных чисел, известных как *одноразовые номера*.
+
+2. Замаскируйте одноразовые номера (закодируйте их, чтобы эмитент не мог просматривать их содержимое) и прикрепите их к запросу в заголовке `Sec-Trust-Token`.
+
+3. Отправьте запрос POST к предоставленной конечной точке.
+
+Конечная точка отвечает [маскированными токенами](https://en.wikipedia.org/wiki/Blind_signature) (подписями на маскированных одноразовых номерах), затем токены демаскируются и сохраняются внутри браузера вместе со связанными одноразовыми номерами как токены доверия.
+
+### Активация токена доверия
+
+Сайт издателя (в приведенном выше примере это `publisher.example`) может проверить, доступны ли пользователю токены доверия:
+
+```js
+const userHasTokens = await document.hasTrustToken('issuer.example/trust-token');
+```
+
+Если есть доступные токены, сайт издателя может активировать их, чтобы получить запись об активации:
+
+```js
+fetch('issuer.example/trust-token', {
+  ...
+  trustToken: {
+    type: 'token-redemption',
+    refreshPolicy: 'none'
+  }
+  ...
+}).then(...)
+```
+
+Издатель может включать записи об активации в запросы, для которых требуется токен доверия — например, публикация комментария, оценка страницы или голосование в опросе — с помощью вызова `fetch()`, как показано ниже:
+
+```js
+fetch('https://foo.example/post-comment', {
+  ...
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['issuer.example/trust-token', ...]
+  }
+  ...
+}).then(...);
+```
+
+Записи об активации включаются в заголовок запроса `Sec-Redemption-Record`.
+
+{% Aside %} Токены доверия доступны только через параметры Fetch, XHR и HTML-элемента `<iframe>`:<br> получить к ним доступ напрямую нельзя. {% endAside%}
+
+### Соображения конфиденциальности
+
+Токены разработаны таким образом, чтобы их нельзя было связать. Эмитент может узнать совокупную информацию о том, какие сайты посещают его пользователи, но не может связать выдачу с активацией: когда пользователь активирует токен, эмитент не может отличить его от других токенов, которые он создал. Однако токены доверия в настоящее время не существуют в вакууме: есть и другие способы, которыми эмитент в настоящее время может — теоретически — связать идентификаторы пользователя на разных сайтах, например, сторонние файлы cookie и методы скрытого отслеживания. Для сайтов важно понимать такую перестройку экосистемы при планировании их поддержки. Это общий аспект перехода для многих API-интерфейсов Privacy Sandbox, поэтому здесь он не рассматривается.
+
+### Соображения безопасности
+
+**Исчерпание токена доверия:** вредоносный сайт может намеренно исчерпать запас токенов у определенного эмитента. Существует несколько способов предотвращения атак такого типа, например, предоставление эмитентам возможности выдавать множество токенов одновременно. Так у пользователей образуется достаточный их запас, гарантирующий, что браузеры всегда будут активировать только один токен при просмотре страницы верхнего уровня.
+
+**Предотвращение двойного расходования:** вредоносное ПО может попытаться получить доступ ко всем токенам доверия пользователя. Однако токены со временем закончатся, поскольку каждая активация отправляется одному и тому же эмитенту токенов, который может проверить, что каждый токен используется только один раз. Чтобы снизить риск, эмитенты также могут подписывать меньше токенов.
+
+### Механизмы запроса
+
+Возможно разрешить отправку записей об активации вне `fetch()`, например, с помощью запросов навигации. Сайты также могут включать данные об эмитенте в заголовки HTTP-ответов, чтобы включить активацию токенов параллельно загрузке страницы.
+
+**Повторюсь: нам важны отзывы об этом предложении!** Если у вас есть комментарии, [создайте тему](https://github.com/WICG/trust-token-api/issues/new) в [репозитории объяснения](https://github.com/WICG/trust-token-api) токенов доверия.
+
+## Дополнительные сведения
+
+- [Демонстрация Trust Tokens](https://trust-token-demo.glitch.me)
+- [Начало работы с испытаниями Chrome Origin Trial](https://developer.chrome.com/blog/origin-trials/)
+- [Подробно о Privacy Sandbox](/digging-into-the-privacy-sandbox/)
+- [Объяснение Trust Token API](https://github.com/WICG/trust-token-api)
+- [Проекты Chromium: Trust Token API](https://sites.google.com/a/chromium.org/dev/updates/trust-token)
+- [Намерение реализовать: Trust Token API](https://groups.google.com/a/chromium.org/g/blink-dev/c/X9sF2uLe9rA/m/1xV5KEn2DgAJ)
+- [Статус платформы Chrome](https://www.chromestatus.com/feature/5078049450098688)
+- [Privacy Pass](https://privacypass.github.io/)
+- [Расширения Privacy Pass](https://eprint.iacr.org/2020/072.pdf)
+
+---
+
+Спасибо всем, кто помогал писать и рецензировать эту публикацию.
+
+Фото [ZSun Fu](https://unsplash.com/photos/b4D7FKAghoE) c [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
diff --git a/src/site/content/ru/blog/trusted-types/index.md b/src/site/content/ru/blog/trusted-types/index.md
new file mode 100644
index 00000000000..8c2e82e1ab1
--- /dev/null
+++ b/src/site/content/ru/blog/trusted-types/index.md
@@ -0,0 +1,215 @@
+---
+title: Предотвращение DOM XSS-уязвимостей при помощи Trusted Types
+subhead: Уменьшите поверхность для атак DOM XSS в вашем приложении.
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: Фрагменты кода, демонстрирующие уязвимости межсайтового скриптинга.
+description: Знакомство с Trusted Types — браузерным API для предотвращения DOM XSS в современных веб-приложениях.
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## Почему это важно?
+
+Межсайтовый скриптинг на основе DOM (DOM XSS) — одна из наиболее распространенных уязвимостей веб-безопасности, и допустить ее появление в приложении очень легко. API [Trusted Types](https://github.com/w3c/webappsec-trusted-types) («доверенные типы») предоставляет инструменты для разработки, проверки безопасности и сопровождения приложений, свободных от уязвимостей DOM XSS, благодаря тому, что делает «опасные» функции браузерных API безопасными по умолчанию. Доверенные типы поддерживаются в Chrome 83, а для других браузеров доступна [polyfill-библиотека](https://github.com/w3c/webappsec-trusted-types#polyfill). Актуальную информацию о поддержке API в браузерах смотрите в  [соответствующей статье](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility).
+
+{% Aside 'key-term' %} Межсайтовый скриптинг на основе DOM становится возможным тогда, когда данные из *источника*, контролируемого пользователем (такого, как имя пользователя или URL-адрес перенаправления, переданный в качестве фрагмента ссылки), попадают в *приемник*, выполняющий произвольный код JavaScript (это может быть функция наподобие `eval()` или сеттер свойства, такой как `.innerHTML`). {% endAside %}
+
+## Предыстория
+
+Вот уже много лет [DOM XSS](https://owasp.org/www-community/attacks/xss/) является одной из наиболее распространенных и опасных уязвимостей в области веб-безопасности.
+
+Существует два отдельных класса межсайтового скриптинга. Некоторые XSS-уязвимости появляются вследствие того, что код, выполняющийся на стороне сервера, генерирует HTML-код страниц сайта небезопасным способом. Другие уязвимости возникают на стороне клиента, когда JavaScript-код вызывает небезопасные функции и передает им контент, поступивший от пользователя.
+
+Чтобы [предотвратить XSS на стороне сервера](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html), не создавайте HTML путем конкатенации строк; вместо этого используйте безопасные библиотеки-шаблонизаторы с автоматическим контекстным экранированием строк. В качестве дополнительной меры защиты от ошибок (которые будут неизбежно возникать) используйте [CSP-политику на основе одноразовых номеров](https://csp.withgoogle.com/docs/strict-csp.html).
+
+Теперь браузер может также помогать предотвращать XSS-атаки и на стороне клиента (также известные как  атаки на основе DOM) благодаря [доверенным типам](https://bit.ly/trusted-types).
+
+## Введение в API
+
+Доверенные типы ограничивают использование небезопасных функций-приемников, перечисленных ниже. Возможно, вам уже известны некоторые из них, поскольку разработчики браузеров и [веб-фреймворков](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) уже предостерегают веб-разработчиков от использования этих функций из-за их небезопасности.
+
+- **Управление скриптами**:<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) и установка текстового содержимого элементов [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script).
+
+- **Генерация HTML на основе строк**:<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML), [`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML),[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML), [`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc), [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write), [`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) и [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **Выполнение содержимого, использующего плагины**:<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src), [`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) and [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **Компиляция JavaScript-кода во время выполнения**: <br> `eval`, `setTimeout`, `setInterval`, `new Function()`
+
+При использовании доверенных типов данные, передаваемые в перечисленные выше функции-приемники, должны проходить предварительную обработку. Использовать обычную строку не получится, так как браузер не знает, можно ли ей доверять.
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML  = location.href;
+```
+
+{% CompareCaption %} Если доверенные типы активны, браузер выдаст ошибку *TypeError* и не позволит передать строку в приемник, уязвимый для DOM XSS. {% endCompareCaption %}
+
+{% endCompare %}
+
+Чтобы обозначить, что данные были обработаны безопасным путем, создайте специальный объект: доверенный тип.
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %} При использовании доверенных типов браузер принимает объекты `TrustedHTML` в приемники, предназначенные для фрагментов HTML-кода. Существуют также объекты `TrustedScript` и `TrustedScriptURL`, предназначенные для других видов небезопасных приемников. {% endCompareCaption %}
+
+{% endCompare %}
+
+Доверенные типы значительно сокращают [поверхность для атак](https://en.wikipedia.org/wiki/Attack_surface) DOM XSS в вашем приложении. Это упрощает проверку кода на предмет уязвимостей, а также позволяет контролировать соблюдение проверок безопасности типов, выполняемых на этапе компиляции, линтинга или объединения в бандлы, непосредственно во время выполнения кода в браузере.
+
+## Как использовать доверенные типы
+
+### Подготовьтесь к получению отчетов о нарушении CSP-политики
+
+Вы можете развернуть средство сбора отчетов (например, [go-csp-collector](https://github.com/jacobbednarz/go-csp-collector) с открытым исходным кодом) или использовать одно из коммерческих решений. Кроме того, отслеживать нарушения можно в самом браузере:
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### Добавьте заголовок CSP, включающий режим отправки отчетов
+
+Добавьте к документам, для которых хотите использовать доверенные типы, следующий заголовок HTTP-ответа.
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+Теперь отчеты обо всех нарушениях будут отправляться на `//my-csp-endpoint.example`, но это не помешает работе сайта. В следующем разделе рассказывается, как работает `//my-csp-endpoint.example`.
+
+{% Aside 'caution' %} Доверенные типы доступны только в [безопасных контекстах](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts), таких как HTTPS или `localhost`. {% endAside %}
+
+### Идентифицируйте нарушения при использовании доверенных типов
+
+Теперь каждый раз, когда браузер обнаруживает нарушение, связанное с доверенными типам, он будет сообщать об этом по адресу, указанному в качестве `report-uri`. Например, если приложение попытается передать строку в `innerHTML`, то будет отправлен следующий отчет:
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+В отчете говорится, что в строке 39 файла `https://my.url.example/script.js` произошел вызов `innerHTML` со строкой, начинающейся на `<img src=x`. Эта информация должна помочь выявить те части кода, которые потенциально содержат уязвимости DOM XSS и нуждаются в изменении.
+
+{% Aside %} Большинство подобных нарушений также можно выявить, пропустив код вашего приложения через линтер или [статический анализатор кода](https://github.com/mozilla/eslint-plugin-no-unsanitized). Это помогает быстро выявить существенную часть нарушений.
+
+Однако сообщения о нарушении CSP-политики также следует анализировать, поскольку они возникают при выполнении кода, не соответствующего политике. {% endAside %}
+
+### Исправьте нарушения
+
+Исправить нарушение, связанное с доверенными типами, можно различными способами. Вы можете [удалить код, содержащий нарушение](#remove-the-offending-code), [воспользоваться библиотекой](#use-a-library), [создать политику доверенного типа](#create-a-trusted-type-policy) или, в качестве крайней меры, [создать политику по умолчанию](#create-a-default-policy).
+
+#### Переработка кода, содержащего нарушение
+
+Возможно, что функциональность, являющаяся причиной нарушения, больше не нужна или ее можно реализовать более современным способом без использования уязвимых функций.
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### Использование библиотеки
+
+Некоторые библиотеки уже поддерживают генерацию доверенных типов, которые можно передавать функциям-приемникам. Например, при помощи [DOMPurify](https://github.com/cure53/DOMPurify) можно санитизировать фрагменты HTML-кода, удаляя полезные нагрузки для эксплуатации XSS.
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+DOMPurify [поддерживает доверенные типы](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types) и возвращает санитизированный HTML-код в виде объекта `TrustedHTML`, благодаря чему в браузере не будут возникать сообщения о нарушениях. {% Aside 'caution' %} Если логика санитизации в DOMPurify содержит ошибки, появление в приложении уязвимости DOM XSS по-прежнему возможно. Доверенные типы делают обработку значений обязательной, однако не определяют правила такой обработки и не гарантируют ее безопасность. {% endAside %}
+
+#### Создание политики доверенного типа
+
+В некоторых случаях удалить функциональность, являющуюся причиной проблемы, невозможно, а готовой библиотеки для санитизации значения и создания доверенного типа не существует. В таких случаях объект доверенного типа необходимо создать самостоятельно.
+
+Чтобы это сделать, для сначала создайте [политику](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr). Политики — это фабричные методы для доверенных типов, которые применяют к входным данным определенные правила для обеспечения безопасности:
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '<')
+  });
+}
+```
+
+Этот код создает политику под названием `myEscapePolicy` которая может генерировать объекты `TrustedHTML` при помощи функции `createHTML()`. В соответствии с заданными правилами, к символам `<` будет применяться HTML-экранирование, чтобы предотвратить создание новых HTML-элементов.
+
+Используйте политику следующим образом:
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // true
+el.innerHTML = escaped;  // '<img src=x onerror=alert(1)>'
+```
+
+{% Aside %} В то время как функция JavaScript, передаваемая в `trustedTypes.createPolicy()` под именем `createHTML()`, возвращает строку, сама функция `createPolicy()` возвращает объект политики, при помощи которого можно обернуть значение в соответствующий тип — в данном случае `TrustedHTML`. {% endAside %}
+
+#### Использование политики по умолчанию
+
+Иногда невозможно изменить код, являющийся причиной проблемы, например если он относится к сторонней библиотеке, загружаемой из CDN. В этом случае используйте [политику по умолчанию](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr):
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+Политика `default` используется для всех строк, попадающих в приемник, который принимает только доверенные типы. {% Aside 'gotchas' %} Не злоупотребляйте использованием политики по умолчанию; вместо этого старайтесь адаптировать код приложения для использования обычных политик. При таком подходе правила безопасности более тесно связаны с обрабатываемыми данными, благодаря чему вы можете учитывать контекст при санитизации значений. {% endAside %}
+
+### Активируйте политику безопасности контента
+
+Как только сообщения об ошибках в вашем приложении устранены, вы можете включить обязательное использование доверенных типов:
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+Готово! Теперь, каким бы сложным ни было ваше веб-приложение, единственный возможный источник уязвимостей DOM XSS — это код ваших политик (и вы можете еще сильнее ограничить их использование посредством [ограничения создания политик](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive)).
+
+## Материалы для дальнейшего чтения
+
+- [Trusted Types на GitHub](https://github.com/w3c/webappsec-trusted-types)
+- [Черновик спецификации W3C](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [Часто задаваемые вопросы](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [Интеграции](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/ru/blog/variable-fonts/index.md b/src/site/content/ru/blog/variable-fonts/index.md
new file mode 100644
index 00000000000..e219a141c3b
--- /dev/null
+++ b/src/site/content/ru/blog/variable-fonts/index.md
@@ -0,0 +1,472 @@
+---
+layout: post
+title: Введение в вариативные шрифты
+subhead: Новая спецификация шрифта, которая может значительно уменьшить размер файлов шрифтов.
+description: |-
+  Как работают вариативные шрифты, как типографы реализуют вариативные шрифты и
+  как работать с вариативными шрифтами в CSS.
+authors:
+  - mustafakurtuldu
+  - thomassteiner
+  - dcrossland
+  - roeln
+date: 2018-02-19
+updated: 2020-08-17
+hero: image/admin/SHy7jOlEVPU1lsyfgvlG.jpg
+tags:
+  - blog
+  - fonts
+  - performance
+  - ux
+feedback:
+  - api
+---
+
+В этой статье мы рассмотрим, что такое вариативные шрифты, какие преимущества они предлагают, и как мы можем использовать их в своей работе. Во-первых, давайте разберем, как типографика работает в Интернете и какие инновации привносят вариативные шрифты.
+
+## Совместимость с браузером
+
+По состоянию на май 2020 года вариативные шрифты поддерживаются в большинстве браузеров. См. [«Могу ли я использовать вариативные шрифты?»](https://caniuse.com/#feat=variable-fonts) и [«Резервные варианты»](#fallbacks).
+
+## Вступление
+
+Термины «шрифт» и «гарнитура» часто используются разработчиками как взаимозаменяемые. Однако между ними есть разница: гарнитура — это основной визуальный дизайн, который может существовать во многих различных технологиях набора, а шрифт — это одна из этих реализаций в формате цифрового файла. Проще говоря, гарнитура — это то, что вы *видите*, а шрифт — то, что *используете*.
+
+Еще одно понятие, которое часто упускается из виду, — это различие между стилем и семейством. Стиль — это отдельный и конкретный шрифт, например, Bold Italic, а семейство — это полный набор стилей.
+
+До появления вариативных шрифтов каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле.
+
+<figure>{% Img src="image/admin/RbhgXwS81Y9PVRJnTjPX.png", alt="Образец композиции и список различных стилей семейства Roboto", width="800", height="600" %} <figcaption> Слева: образец гарнитур шрифтов Roboto. Справа: именованные стили внутри семейства. </figcaption></figure>
+
+## Вызовы для дизайнера и разработчика
+
+Когда дизайнер создает проект печати, он сталкивается с некоторыми ограничениями, такими как физический размер макета страницы, количество цветов, которые он может использовать (что определяется типом применяемой печатной машины) и так далее. Но он не ограничен в выборе количества применяемых стилей гарнитуры. Это означает, что типографика печатных изданий часто бывает богатой и сложной, так что процесс чтения действительно доставляет удовольствие. Вспомните, когда вы в последний раз листали отличный журнал.
+
+У веб-дизайнеров и разработчиков другие ограничения, чем у дизайнеров полиграфии. Одним из основных ограничений, стоящих на пути более разнообразного типографского оформления, является стоимость полосы пропускания проектов. В случае традиционных веб-шрифтов каждый стиль, используемый в дизайне, требует от пользователей загрузки отдельного файла шрифта, что увеличивает задержку и время рендеринга страницы. Только стили Regular и Bold, а также их курсивные аналоги могут занимать 500 КБ или более данных шрифта. И это не считая способов рендеринга шрифтов, резервных шаблонов, нежелательных побочных эффектов, таких как [FOIT и FOUT](https://www.zachleat.com/web/fout-vs-foit/).
+
+Многие семейства шрифтов предлагают гораздо более широкий спектр стилей: тонкие и жирные, узкие и широкие, разнообразные стилистические детали и даже дизайн с учетом конкретного размера (оптимизированный для больших или маленьких размеров текста). Поскольку для каждого стиля (или комбинации стилей) придется загружать новый файл шрифта, многие веб-разработчики предпочитают не использовать эти возможности, снижая удобство чтения для пользователей.
+
+## Структура вариативного шрифта
+
+Вариативные шрифты решают эти проблемы, упаковывая стили в один файл.
+
+Вначале создается центральный стиль или стиль «по умолчанию», обычно это Regular — вертикальный римский стиль с наиболее типичным весом и шириной, который наиболее подходит для простого текста. Затем этот стиль соединяется с другими стилями в непрерывном диапазоне, называемом «осью». Самая распространенная ось — это **Weight (Вес)**. Двигая центральный стиль по оси веса, можно получать промежуточные состояния, например, стиль Bold для жирного шрифта. Любой отдельный стиль вдоль оси называется «экземпляром» вариативного шрифта. Некоторые экземпляры названы разработчиком шрифта, например, положение 600 по оси веса называется SemiBold.
+
+Вариативный шрифт [Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) имеет три стиля для оси **веса.** В центре находится стиль Regular, а на противоположных концах оси расположены два стиля: более легкий и более тяжелый. Между ними существует 900 экземпляров:
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ecr5godvTKunVXP7W8aU.png", alt="Буква «А» с разным весом", width="800", height="218" %} <figcaption> На рисунке выше: иллюстрированная структура оси веса для гарнитуры Roboto. </figcaption></figure>
+
+Разработчик шрифта может предложить набор различных осей. Их можно комбинировать, потому что они используют одни и те же стили по умолчанию. Roboto имеет три стиля для оси Width (Ширина): Regular находится в центре оси, а два стиля, более узкий и более широкий, находятся на каждом ее конце. Сочетание осей ширины и веса предоставляют для стиля Regular огромный диапазон возможных вариантов.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Roboto Flex в случайных комбинациях ширины и веса</figcaption></figure>
+
+То есть мы получаем тысячи возможных стилей! Это может показаться излишеством, но благодаря такому разнообразию шрифтов можно значительно улучшить процесс чтения. И, если это не приводит к снижению производительности, веб-разработчики могут использовать столько стилей, сколько потребуется для реализации дизайна страницы.
+
+### Курсив
+
+Интересен способ обработки курсива в вариативных шрифтах, поскольку существует два разных подхода. Гарнитуры, такие как Helvetica или Roboto, имеют совместимые с интерполяцией контуры, поэтому их стили Roman и Italic могут быть интерполированы между собой, а ось **Slant** (Наклон) может использоваться для перехода от Roman к Italic.
+
+Другие гарнитуры (например, Garamond, Baskerville или Bodoni) имеют несовместимые с интерполяцией контуры глифов Roman и Italic. Например, контуры, которые обычно определяют строчную латинскую букву «n», не соответствуют контурам, используемым для определения курсивной строчной буквы «n». Вместо интерполяции одного контура в другой ось **Italic** переключается с контура Roman на Italic.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/EySl1LIfX1QIrGq654PO.png", alt="Пример осей веса для гарнитуры Amstelvar", width="800", height="520" %} <figcaption> Контуры «n», шрифт Amstelvar, курсив (Italic) (12 пт, обычный вес, нормальная ширина) и латиница (Roman). Изображение предоставлено Дэвидом Берлоу, шрифтовым дизайнером и типографом в Font Bureau. </figcaption></figure>
+
+Оси, доступные пользователю после переключения на Italic, должны быть такими же, как и для латиницы, так же как и набор символов.
+
+Для отдельных глифов существует возможность замены, которую можно использовать в дизайне вариативного шрифта. Например, дизайн знака доллара с двумя вертикальными полосками лучше всего подходит для больших кеглей, но для меньших кеглей лучше использовать дизайн только с одной полоской. Когда у нас меньше пикселей для отображения глифа, дизайн с двумя полосками может стать нечитаемым. Для борьбы с этим, как и в случае с осью Italic, вдоль оси **Optical Size** (Оптический размер) может происходить замена одного глифа на другой в точке, определяемой дизайнером шрифта.
+
+Таким образом, если контуры позволяют, дизайнеры могут создавать шрифты, которые интерполируют между различными стилями в многомерном пространстве дизайна. Это дает вам полный контроль над своей типографикой и огромные возможности.
+
+## Определение осей
+
+Существует пять [зарегистрированных осей](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags), которые управляют известными предсказуемыми характеристиками шрифта: весом, шириной, оптическим размером, наклоном и курсивом. Помимо этого, шрифт может содержать пользовательские оси, добавленные дизайнером для управления любым аспектом шрифта: размером засечек, длиной штрихов, высотой надстрочных элементов или размером точки над i.
+
+Несмотря на то, что оси могут управлять одним и тем же элементом, они могут использовать разные значения. Например, в вариативных шрифтах Oswald и Hepta Slab доступна только одна ось — Weight (Вес), но диапазоны разные: у Oswald тот же диапазон, что и до модернизации, от 200 до 700, а у Hepta Slab — от супертонкого начертания в 1 до 900.
+
+Для установки значений пяти зарегистрированных осей в CSS используются 4-символьные теги в нижнем регистре:
+
+<table>
+	<tbody>
+		<tr>
+			<th colspan="2">Названия осей и значения CSS</th>
+		</tr>
+		<tr>
+			<td>Weight (Вес)</td>
+			<td>
+				<code>wght</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Width (Ширина)</td>
+			<td>
+				<code>wdth</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Slant (Наклон)</td>
+			<td>
+				<code>slnt</code>
+			</td>
+		</tr>
+		<tr>
+			<td> Optical Size (Оптический размер)</td>
+			<td>
+				<code>opsz</code>
+			</td>
+		</tr>
+		<tr>
+			<td>Italics (Курсив)</td>
+			<td>
+				<code>ital</code>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+Поскольку разработчик шрифта определяет, какие оси доступны в вариативном шрифте, и какие значения они могут иметь, необходимо выяснить, что предлагает каждый шрифт. Как правило, такая информация содержится в документации к шрифту. Альтернативный вариант — проверить шрифт с помощью такого инструмента, как [Wakamai Fondue](https://wakamaifondue.com).
+
+## Примеры использования и преимущества
+
+Установка значений осей зависит от личного вкуса и применения передовых методов типографики. Опасность любой новой технологии заключается в возможном неправильном использовании, ведь чрезмерно художественные или экспериментальные настройки могут ухудшить читаемость текста. Применять различные оси целесообразно для создания великолепных художественных проектов для заголовков, но подобные эксперименты с основным текстом могут сделать его нечитаемым.
+
+### Впечатляющий пример
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rh7wLaBLauEF02D2dqMC.png", alt="Пример слова Grass от Мэнди Майкл", width="495", height="174" %}</figure>
+
+Один из замечательных примеров художественного оформления показан выше — это исследование гарнитуры шрифта [Decovar](https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow), выполненное Мэнди Майкл.
+
+Действующий образец и исходный код для приведенного выше примера можно просмотреть [здесь](https://codepen.io/mandymichael/pen/YYaWop).
+
+### Анимация
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/2Du2L0Ii5nUqz8n6S3Vz.mp4", controls=false, autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> Гарнитура Zycon, разработанная для анимации Дэвидом Берлоу, шрифтовым дизайнером и типографом в Font Bureau. </figcaption></figure>
+
+Благодаря вариативным шрифтам также есть возможность анимировать символы. Выше приведен пример использования различных осей с гарнитурой Zycon. Посмотрите интерактивный [пример анимации на сайте Axis Praxis](https://www.axis-praxis.org/specimens/zycon).
+
+[Anicons](https://typogram.github.io/Anicons) — это первый в мире шрифт с анимированными цветными иконками, основанный на Material Design Icons. Anicons — это эксперимент, в котором сочетаются две передовые технологии шрифтов: вариативные шрифты и цветные шрифты.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/anicons-animation.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Несколько примеров анимации при наведении курсора на цветные иконки шрифта Anicon</figcaption></figure>
+
+### Тонкая настройка
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/larger-widths.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Ширина слов в шрифте Amstelvar выравнивается путем небольшого смещения по оси XTRA в противоположных направлениях</figcaption></figure>
+
+[Roboto Flex](https://github.com/TypeNetwork/Roboto-Flex) и [Amstelvar](https://github.com/TypeNetwork/Amstelvar) предлагают набор «Параметрических осей». На этих осях буквы разбиты на 4 основных аспекта формы: черные или положительные формы, белые или отрицательные формы, а также размеры x и y. Подобно тому, как основные цвета можно смешивать с любым другим цветом для получения оттенка, эти 4 аспекта можно использовать для тонкой настройки любой другой оси.
+
+Ось XTRA в Amstelvar позволяет регулировать значение «белого» в тысячных долях кегля, как показано выше. Ширина слов выравнивается путем небольшого смещения по оси XTRA в противоположных направлениях.
+
+## Вариативные шрифты в CSS
+
+### Загрузка файлов с вариативными шрифтами
+
+Вариативные шрифты загружаются с помощью того же механизма `@font-face`, что и традиционные статические веб-шрифты, но с двумя новыми доработками:
+
+```css
+@font-face {
+	font-family: 'Roboto Flex';
+	src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+       url('RobotoFlex-VF.woff2') format('woff2-variations');
+	font-weight: 100 1000;
+	font-stretch: 25% 151%;
+}
+```
+
+**1. Исходные форматы:** мы не хотим, чтобы браузер загружал вариативный шрифт, если он его не поддерживает, поэтому мы добавляем описание для функции `format`: единожды в [будущем формате](https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types) (`woff2 supports variations`), единожды в текущем, но скоро устаревающем формате (`woff2-variations`). Если браузер поддерживает вариативные шрифты и будущий синтаксис, он будет использовать первое объявление. Если браузер поддерживает вариативные шрифты и текущий синтаксис, он будет использовать второе объявление. Они оба указывают на один и тот же файл шрифта.
+
+<!-- TODO 2021 Q1 revisit this, based on progress in
+     https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types
+     to allow removing the 2nd src -->
+
+**2. Диапазоны стилей:** вы заметите, что мы предоставляем два значения для `font-weight` и `font-stretch`. Вместо того чтобы сообщать браузеру, какой конкретно вес предоставляет этот шрифт (например, `font-weight: 500;`), мы указываем **диапазон** значений веса, поддерживаемых шрифтом. Для Roboto Flex ось Weight находится в диапазоне от 100 до 1000; CSS напрямую сопоставляет диапазон оси со свойством стиля `font-weight`. Если указать диапазон в `@font-face`, любое значение за пределами этого диапазона будет «урезано» до ближайшего допустимого значения. Диапазон оси Width ​таким же образом сопоставляется со свойством `font-stretch`.
+
+Если вы используете API Google Fonts, то вообще не о чем беспокоиться: CSS будет содержать правильные исходные форматы и диапазоны. Google Fonts также будет отправлять статические резервные шрифты в случае, если вариативные шрифты не поддерживаются.
+
+### Использование веса и ширины
+
+В настоящее время в CSS-коде гарантированно можно задать ось `wght` через свойство `font-weight` и ось `wdth` через свойство `font-stretch`.
+
+Раньше для свойства `font-weight` нужно было задавать значение в виде ключевого слова (`light` или `bold`) или в виде числа от 100 до 900 с шагом в 100. При использовании вариативных шрифтов можно задавать любое значение в диапазоне ширины шрифта:
+
+```css
+.kinda-light {
+  font-weight: 125;
+}
+
+.super-heavy {
+  font-weight: 1000;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-weight.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Шрифт Roboto Flex меняется по оси Weight (Вес) от минимального до максимального значения.</figcaption></figure>
+
+Аналогично можно задать свойство `font-stretch` с помощью ключевых слов (`condensed` или `ultra-expanded`) или с помощью процентных значений:
+
+```css
+.kinda-narrow {
+  font-stretch: 33.3%;
+}
+
+.super-wide {
+  font-stretch: 151%;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-width.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Шрифт Roboto Flex меняется по оси Width (Ширина) от минимального до максимального значения.</figcaption></figure>
+
+### Использование курсива и наклона
+
+Ось `ital` (Курсив) предназначена для шрифтов, которые содержат стили для нормального и курсивного начертания. Ось выступает в роли переключателя: значение `0` — «выключено», для шрифта применяется нормальный стиль начертания, значение `1` — «включено», применяется курсивный стиль начертания. В отличие от других осей, возможность плавного перехода отсутствует. Значение `0.5` не даст «полукурсива».
+
+Ось `slnt` (Наклон) отличается от оси курсива тем, что это не новый *стиль*, а просто наклонное начертание нормального стиля. По умолчанию задано значение `0`, что соответствует нормальному начертанию букв. Максимальный наклон шрифта Roboto Flex составляет –10 градусов, то есть буквы наклоняются вправо при изменении угла от 0 до –10.
+
+Проще было бы задавать эти оси через свойство `font-style`, но по состоянию на апрель 2020 года [эта возможность еще находится в разработке](https://github.com/w3c/csswg-drafts/issues/3125). Поэтому пока следует рассматривать эти оси как пользовательские и задавать их с помощью низкоуровневого синтаксиса `font-variation-settings`:
+
+```css
+i, em, .italic {
+	/* Should be font-style: italic; */
+	font-variation-settings: 'ital' 1;
+}
+
+.slanted {
+	/* Should be font-style: oblique 10deg; */
+	font-variation-settings: 'slnt' 10;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-slant.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Шрифт Roboto Flex меняется по оси Slant (Наклон) от минимального до максимального значения.</figcaption></figure>
+
+### Использование оптических размеров
+
+Гарнитура может быть очень маленькой (сноска размером 12 пикселей) или очень большой (заголовок размером 80 пикселей). Шрифт может реагировать на эти изменения размера, изменяя форму букв, чтобы лучше соответствовать размеру. При маленьком размере букв лучше обойтись без мелких деталей, в то время как при большом размере лучше использовать более детальные и тонкие штрихи.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wrVCGSQNaGWhNp97BoRS.png", alt="Буква «a» в разных оптических размерах", width="800", height="147" %} <figcaption> Различия в дизайне показаны на примере буквы «а» из шрифта Roboto Flex. Буква взята в разных размерах пикселей и затем масштабирована до одинакового размера. <a href="https://codepen.io/RoelN/pen/PoPvdeV">Попробуйте сами на Codepen</a> </figcaption></figure>
+
+Для этой оси было введено новое свойство CSS: `font-optical-sizing`. По умолчанию оно установлено на `auto`, и браузер устанавливает значение оси на основе `font-size`. То есть браузер будет автоматически выбирать лучший оптический размер. Если нужно отключить автоматический выбор, установите для `font-optical-sizing` значение `none`.
+
+Вы также можете задать пользовательское значение для оси `opsz`, если намеренно хотите получить оптический размер, не соответствующий размеру шрифта. Следующий CSS-код приведет к тому, что текст будет отображаться в большом размере, но с оптическим размером для шрифта `8 пт`:
+
+```css
+.small-yet-large {
+  font-size: 100px;
+  font-variation-settings: 'opsz' 8;
+}
+```
+
+### Использование пользовательских осей
+
+В отличие от зарегистрированных осей, пользовательские оси не будут сопоставляться с существующими свойствами CSS, поэтому вам придется задавать оси через `font-variation-settings`. Теги для пользовательских осей всегда пишутся заглавными буквами, чтобы отличать их от тегов для зарегистрированных осей.
+
+Шрифт Roboto Flex предлагает несколько пользовательских осей, самая важная из которых — Grade (`GRAD`). Ось Grade (Уклон) интересна тем, что она изменяет вес шрифта без изменения ширины, поэтому межбуквенные интервалы не меняются. Меняя шрифт по оси Grade, можно избежать необходимости возиться с изменениями оси Weight, затрагивающими общую ширину, а затем с изменениями оси Width, затрагивающими общий вес.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-flex-grade.mp4" type="video/mp4">
+  </source></video>
+  <figcaption>Шрифт Roboto Flex меняется по оси Grade от минимального до максимального значения.</figcaption></figure>
+
+Поскольку `GRAD` — это пользовательская ось с диапазоном от –200 до 150, нужно задавать ее через `font-variation-settings`:
+
+```css
+.grade-light {
+	font-variation-settings: `GRAD` -200;
+}
+
+.grade-normal {
+	font-variation-settings: `GRAD` 0;
+}
+
+.grade-heavy {
+	font-variation-settings: `GRAD` 150;
+}
+```
+
+### Вариативные шрифты в Google Fonts
+
+В каталоге Google Fonts уже содержатся [вариативные шрифты](https://fonts.google.com/?vfonly=true) и регулярно добавляются новые. Интерфейс в настоящее время нацелен на выбор отдельных экземпляров шрифта: выбираете нужный вариант, нажимаете Select this style (Выбрать этот стиль), и стиль добавляется в элемент `<link>`, который получает CSS-код и шрифты из Google Fonts.
+
+Чтобы использовать все доступные оси или диапазоны значений, вам придется [вручную составить](https://developers.google.com/fonts/docs/css2) URL-адрес к API Google Fonts. В [обзоре вариативных шрифтов](https://fonts.google.com/variablefonts) перечислены все оси и значения.
+
+Инструмент [Google Variable Fonts Links](https://github.com/RoelN/google-variable-fonts-links) также может предоставить актуальные URL-адреса вариативных шрифтов.
+
+## Наследование в font-variation-settings
+
+Хотя все зарегистрированные оси скоро будут поддерживаться через существующие свойства CSS, пока что вам может понадобиться использовать `font-variation-settings` в качестве запасного варианта. Если ваш шрифт имеет пользовательские оси, вам также понадобится `font-variation-settings`.
+
+Однако существует небольшая проблема с `font-variation-settings`. Каждое свойство, которое *не было задано явно*, будет автоматически сброшено на значение по умолчанию. Ранее установленные значения не наследуются! Это означает, что следующий код не будет работать должным образом:
+
+```html
+<span class="slanted grade-light">
+	I should be slanted and have a light grade
+</span>
+```
+
+Сначала браузер применит `font-variation-settings: 'slnt' 10` из класса `.slanted`. Затем он применит `font-variation-settings: 'GRAD' -200` из класса `.grade-light`. Но это вернет `slnt` к значению по умолчанию 0! В результате текст будет светлым, но не наклонным.
+
+К счастью, это можно обойти, используя переменные CSS:
+
+```css
+/* Set the default values */
+:root {
+	--slnt: 0;
+	--GRAD: 0;
+}
+
+/* Change value for these elements and their children */
+.slanted {
+	--slnt: 10;
+}
+
+.grade-light {
+	--grad: -200;
+}
+
+.grade-normal {
+	--grad: 0;
+}
+
+.grade-heavy {
+	--grad: 150;
+}
+
+/* Apply whatever value is kept in the CSS variables */
+.slanted,
+.grade-light,
+.grade-normal,
+.grade-heavy {
+	font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
+}
+```
+
+Переменные CSS каскадируются, поэтому если в элементе (или в одном из его родителей) значение `slnt` установлено на `10`, это значение сохранится, даже если вы измените значение `GRAD`. Подробное объяснение этой техники см. в разделе [«Исправление наследования вариативных шрифтов»](https://pixelambacht.nl/2019/fixing-variable-font-inheritance/).
+
+Обратите внимание, что CSS-анимация с помощью @keyframes не работает (по замыслу), поэтому примерно такой код не даст желаемого результата:
+
+```css
+@keyframes width-animation {
+   from { --wdth: 25; }
+   to   { --wdth: 151; }
+}
+```
+
+Анимация должна задаваться непосредственно в `font-variation-settings`.
+
+## Прирост производительности
+
+Вариативные шрифты OpenType позволяют хранить несколько вариантов семейства шрифтов в одном файле шрифта. [Компания Monotype](https://medium.com/@monotype/part-2-from-truetype-gx-to-variable-fonts-4c28b16997c3) провела эксперимент, объединив 12 входных шрифтов для создания восьми начертаний с тремя вариантами ширины для стилей Italic и Roman. Хранение 48 отдельных шрифтов в одном файле с вариативными шрифтами позволило *уменьшить размер файла на 88%*.
+
+Однако если вы используете один шрифт, например Roboto Regular, и ничего больше, вы можете не увидеть сокращения размера шрифта, если перейдете на вариативный шрифт с большим количеством осей. Как всегда, всё зависит от конкретного случая использования.
+
+С другой стороны, анимация шрифта через настройки может вызвать проблемы с производительностью. Хотя ситуация улучшится, когда вариативные шрифты будут лучше поддерживаться браузерами, проблему можно несколько уменьшить, если анимировать только те шрифты, которые в данный момент находятся на экране. Этот фрагмент кода от [Dinamo](https://abcdinamo.com/news/using-variable-fonts-on-the-web) приостанавливает анимацию в элементах с классом `vf-animation`, когда их нет на экране:
+
+```javascript
+var observer = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(function(entry) {
+    // Pause/Play the animation
+    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
+    else entry.target.style.animationPlayState = "paused"
+  });
+});
+
+var variableTexts = document.querySelectorAll(".vf-animation");
+variableTexts.forEach(function(el) { observer.observe(el); });
+```
+
+Если ваш шрифт реагирует на взаимодействие с пользователем, рекомендуется [ограничивать или отклонять](https://css-tricks.com/debouncing-throttling-explained-examples/) события ввода. Это предотвратит отображение браузером экземпляров вариативного шрифта, изменение которых по сравнению с предыдущим экземпляром неразличимо для человеческого глаза.
+
+Если вы используете Google Fonts, рекомендуется [предварительно подключиться](/preconnect-and-dns-prefetch/) к домену `https://fonts.gstatic.com`, где размещены шрифты Google. Это гарантирует, что браузер заранее знает, где взять шрифты, когда он встретит их в CSS:
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+```
+
+Этот совет работает и для других CDN: чем раньше вы разрешите браузеру установить сетевое соединение, тем скорее он сможет загрузить шрифты.
+
+Дополнительные советы по повышению производительности при загрузке шрифтов Google приведены в статье [«Самые быстрые шрифты Google Fonts»](https://csswizardry.com/2020/05/the-fastest-google-fonts/).
+
+## Резервные варианты и поддержка в браузерах {: #fallbacks}
+
+Все современные браузеры [поддерживают вариативные шрифты](https://caniuse.com/#feat=variable-fonts). Если вам нужна поддержка в старых браузерах, вы можете создать сайт со статическими шрифтами и использовать вариативные шрифты в качестве прогрессивного улучшения:
+
+```css
+/* Set up Roboto for old browsers, only regular + bold */
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Regular.woff2');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  src: url('Roboto-Bold.woff2');
+  font-weight: bold;
+}
+
+body {
+  font-family: Roboto;
+}
+
+.super-bold {
+  font-weight: bold;
+}
+
+/* Set up Roboto for modern browsers, all weights */
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: 'Roboto';
+    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
+         url('RobotoFlex-VF.woff2') format('woff2-variations');
+    font-weight: 100 1000;
+    font-stretch: 25% 151%;
+  }
+
+  .super-bold {
+    font-weight: 1000;
+  }
+}
+```
+
+Для старых браузеров текст с классом `.super-bold` будет отображаться обычным полужирным шрифтом, поскольку это единственный доступный полужирный шрифт. Когда поддерживаются вариативные шрифты, мы можем использовать самый большой вес, равный 1000.
+
+Если вы используете API Google Fonts, он позаботится о загрузке нужных шрифтов для браузеров ваших посетителей. Скажем, вы запрашиваете шрифт Oswald в диапазоне весов от 200 до 700, например:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
+```
+
+Современные браузеры с поддержкой вариативных шрифтов будут обрабатывать вариативный шрифт, изменяющийся по шкале веса от 200 до 700. Старые браузеры будут обрабатывать отдельные статические шрифты для каждого отдельно взятого веса. В данном случае это означает, что они загрузят 6 файлов шрифтов: один для веса 200, другой для веса 300 и так далее.
+
+## Благодарности
+
+Приносим искреннюю благодарность следующим людям, чей вклад позволил этой статье появится на свет:
+
+- [Мустафе Куртулду](https://twitter.com/mustafa_x), UX-дизайнеру и Design advocate в Google;
+- [Роэлу Нискенсу](https://twitter.com/PixelAmbacht), UX-дизайнеру/разработчику и эксперту по типографике в [Kabisa](https://kabisa.nl);
+- [Дэйву Кроссленду](https://twitter.com/davelab6), руководителю группы проектов в Google Fonts;
+- [Дэвиду Берлоу](https://twitter.com/dberlow), дизайнеру шрифтов и типографу в [Font Bureau](https://fontbureau.typenetwork.com/);
+- [Лоуренсу Пенни](https://twitter.com/lorp), разработчику [axis-praxis.org](https://axis-praxis.org);
+- [Мэнди Майклу](https://twitter.com/Mandy_Kerr), разработчик [variablefonts.dev](https://variablefonts.dev).
+
+Главное изображение взято у [Bruno Martins](https://unsplash.com/@brunus) на [Unsplash](https://unsplash.com/photos/OhJmwB4XWLE).
diff --git a/src/site/content/ru/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/ru/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..c31a82d0e8c
--- /dev/null
+++ b/src/site/content/ru/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,138 @@
+---
+title: Лучшие практики для измерения показателей Web Vitals в полевых условиях
+subhead: Как измерить Web Vitals с помощью текущего инструмента аналитики.
+authors:
+  - philipwalton
+description: Как измерить Web Vitals с помощью текущего инструмента аналитики
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: Как измерить Web Vitals с помощью текущего инструмента аналитики
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Возможность измерять реальную производительность ваших страниц и составлять отчеты по ней имеет решающее значение для диагностики проблем и повышения производительности с течением времени. Без [полевых данных](/user-centric-performance-metrics/#in-the-field) невозможно точно понять, действительно ли изменения, которые вы вносите в свой сайт, приносят желаемые результаты.
+
+Многие популярные поставщики аналитики [мониторинга реальных пользователей (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) уже поддерживают метрики [Core Web Vitals](/vitals/#core-web-vitals) в своих инструментах (а также многие [другие метрики Web Vitals](/vitals/#other-web-vitals)). Если вы сейчас используете один из этих инструментов аналитики RUM, то у вас есть возможность оценить, насколько страницы вашего сайта соответствуют [рекомендуемым пороговым значениям Core Web Vitals](/vitals/#core-web-vitals) и предотвратить регрессию в будущем.
+
+Хотя мы и рекомендуем применять инструменты аналитики, поддерживающие показатели Core Web Vitals, если используемый вами инструмент аналитики не поддерживает их, вовсе не обязательно переходить на другой. Почти все аналитические инструменты предлагают способ определения и измерения [пользовательских метрик](https://support.google.com/analytics/answer/2709828) или [событий](https://support.google.com/analytics/answer/1033068), а это значит, что вы можете использовать своего текущего поставщика аналитики, чтобы измерять метрики Core Web Vitals и добавлять их в существующие аналитические отчеты и панели управления.
+
+В этой статье обсуждаются лучшие практики измерения метрик Core Web Vitals (или любых пользовательских метрик) с помощью сторонних или собственных аналитических инструментов. Статья также может служить руководством для поставщиков аналитики, желающих добавить поддержку Core Web Vitals в свой сервис.
+
+## Применяйте пользовательские метрики или события
+
+Как упоминалось выше, большинство инструментов аналитики позволяют измерять пользовательские данные. Если ваш аналитический инструмент поддерживает такую возможность, вы сможете измерить каждую из метрик Core Web Vitals с помощью этого механизма.
+
+Измерение пользовательских метрик или событий в инструменте аналитики обычно состоит из трех этапов:
+
+1. [Определите или зарегистрируйте](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827) пользовательскую метрику в админке вашего инструмента (при необходимости). *(Примечание: не все поставщики аналитики требуют, чтобы пользовательские метрики определялись заранее.)*
+2. Вычислите значение метрики в своем внешнем JavaScript-коде.
+3. Отправьте значение метрики в серверную аналитику, убедившись, что имя или идентификатор совпадают с тем, что было определено на шаге 1 *(если требуется)*.
+
+Для шагов 1 и 3 вы можете обратиться к документации вашего инструмента аналитики за инструкциями. На шаге 2 для вычисления значения каждой из метрик Core Web Vitals вы можете использовать [JavaScript-библиотеку web-vitals](https://github.com/GoogleChrome/web-vitals).
+
+В следующем примере кода показано, насколько легко можно отслеживать эти метрики в коде и отправлять их в службу аналитики.
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## Убедитесь, что вы можете составить отчет о распределении
+
+После того как вы вычислили значения для каждой из метрик Core Web Vitals и отправили их в свою аналитическую службу с помощью пользовательской метрики или события, следующий шагсоздание отчета или панели мониторинга, отображающих собранные значения.
+
+Чтобы убедиться, что ваш сайт/страница соответствует [рекомендованным пороговым значениям Core Web Vitals](/vitals/#core-web-vitals), вам понадобится отчет, в котором значение каждой метрики будет отображаться на 75-м процентиле.
+
+Если ваш инструмент аналитики не предлагает квантильные отчеты в качестве встроенной функции, вы, вероятно, всё равно можете получить эти данные вручную, создав отчет, в котором перечислены все значения метрики, отсортированные в порядке возрастания. После создания этого отчета результат, который составляет 75% от полного отсортированного списка всех значений в этом отчете, и будет 75-м процентилем для этого показателя. Причем не имеет значения, как вы сегментируете свои данные (по типу устройства, типу подключения, стране и т. д.).
+
+Если ваш аналитический инструмент по умолчанию не обеспечивает детализацию отчетов на уровне метрик, но поддерживает [специальные параметры](https://support.google.com/analytics/answer/2709828), то вы, вероятно, сможете добиться нужного результата. Установив уникальное значение специального параметра для каждого отдельного экземпляра отслеживаемой метрики и включив специальные параметры в конфигурацию отчета, вы сможете создать отчет с разбивкой по отдельным экземплярам метрики. Поскольку каждый экземпляр будет иметь уникальное значение параметра, группировка не произойдет.
+
+Отчет [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report)пример этого метода с использованием Google Analytics. У этого отчета [открытый исходный код](https://github.com/GoogleChromeLabs/web-vitals-report), поэтому разработчики могут ссылаться на него как на пример методов, описанных в этом разделе.
+
+![Скриншоты отчета Web Vitals](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)
+
+{% Aside %} Совет. Библиотека [`web-vitals`](https://github.com/GoogleChrome/web-vitals) предоставляет идентификатор для каждого зарегистрированного экземпляра метрики, что позволяет создавать дистрибутивы в большинстве аналитических инструментов. См. документацию по интерфейсу [`Metric`](https://github.com/GoogleChrome/web-vitals#metric) для более подробной информации. {% endAside %}
+
+## Отправляйте свои данные в нужное время
+
+Некоторые метрики производительности можно рассчитать после завершения загрузки страницы, в то время как другие (например, CLS) учитывают всё время жизни страницы и окончательно вычисляются только после того, как пользователь покидает страницу.
+
+Однако это может быть проблематично, так как события `beforeunload` и `unload` ненадежны (особенно на мобильных устройствах), и мы [не рекомендуем](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid) их использовать (поскольку они могут помешать странице попасть в механизм кеширования страниц [Back-Forward Cache](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache)).
+
+Любые текущие значения метрик, которые отслеживаются на протяжении всего времени жизни страницы, лучше всего отправлять во время `visibilitychange`, когда состояние видимости страницы меняется на `hidden`. Это обусловлено тем,  что после изменения состояния видимости страницы на `hidden`, нет гарантии, что любой сценарий на этой странице сможет снова запуститься. Это особенно актуально для мобильных операционных систем, где само приложение браузера может быть закрыто без использования каких-либо обратных вызовов страницы.
+
+Обратите внимание, что мобильные операционные системы обычно запускают  событие `visibilitychange` при переключении вкладок, переключении приложений, закрытии самого приложения браузера, а также при закрытии вкладки или переходе на новую страницу. Это делает событие `visibilitychange` гораздо более надежным, чем события `unload` или `beforeunload`.
+
+{% Aside 'gotchas' %} Из-за [определённых ошибок браузера](https://github.com/w3c/page-visibility/issues/59#issue-554880545) в некоторых случаях `visibilitychange` не срабатывает. Если вы создаете собственную библиотеку аналитики, важно знать об этих ошибках. Обратите внимание, что в [JavaScript-библиотеке web-vitals](https://github.com/GoogleChrome/web-vitals) все эти ошибки браузеров учтены. {% endAside %}
+
+## Отслеживайте производительность с течением времени
+
+После того как вы обновите свою реализацию аналитики, чтобы отслеживать метрики Core Web Vitals и включать их в отчеты, следующий шаготслеживать, как изменения вашего сайта влияют на производительность в течение длительного периода времени.
+
+### Версия ваших изменений
+
+Наивный (и в конечном итоге ненадежный) подход к отслеживанию изменений заключается в развертывании изменений в производственной среде и последующем предположении, что все метрики, полученные после даты развертывания, соответствуют новому сайту, а все метрики, полученные до даты развертывания, соответствуют старому сайту. Однако любое количество факторов (включая кеширование на уровне HTTP, сервис-воркера или CDN) может помешать этому.
+
+Гораздо лучший подход - создать уникальную версию для каждого развернутого изменения, а затем отслеживать эту версию в вашем инструменте аналитики. Большинство аналитических инструментов поддерживают установку версии. Если ваш инструмент этого не делает, вы можете создать специальный параметр и установить этот параметр на развернутую версию.
+
+### Проведите эксперименты
+
+Вы можете сделать еще один шаг вперед в управлении версиями, отслеживая несколько версий (или экспериментов) одновременно.
+
+Если ваш аналитический инструмент позволяет определять группы экспериментов, используйте эту возможность, если же нетиспользуйте специальные параметры, чтобы связать каждое значение метрики с определенной группой экспериментов в ваших отчетах.
+
+Проведя эксперименты в инструменте аналитики, вы можете развернуть экспериментальное изменение для подгруппы пользователей и сравнить производительность этого изменения с производительностью пользователей в контрольной группе. Как только вы убедитесь, что изменение действительно улучшает производительность, вы можете распространить его на всех пользователей.
+
+{% Aside %} Группы экспериментов всегда должны создаваться на сервере. Избегайте использовать любые инструменты для экспериментов или A/B-тестирование на стороне клиента. Эти инструменты обычно блокируют рендеринг, пока не будет определена экспериментальная группа пользователей, что может негативно сказаться на времени LCP. {% endAside %}
+
+## Убедитесь, что измерения не влияют на производительность
+
+При измерении производительности реальных пользователей очень важно, чтобы используемый для измерения производительности код не оказывал негативного влияния на производительность страницы. Если это происходит, то любые полученные выводы о влиянии производительности на бизнес, будут ненадежными, так как вы не будете знать, оказывает ли негативное влияние присутствие самого кода аналитики.
+
+Всегда следуйте этим принципам при развертывании кода аналитики RUM на рабочем сайте:
+
+### Отложите загрузку своей аналитики
+
+Код аналитики всегда должен загружаться асинхронно и не блокировать основной поток. Как правило, код аналитики загружается в последнюю очередь. Если загрузка кода аналитики блокирует основной поток, это может негативно повлиять на LCP.
+
+Все API-интерфейсы, используемые для измерения показателей Core Web Vitals, были специально разработаны для поддержки асинхронной и отложенной загрузки скриптов (с помощью [`buffered`](https://www.chromestatus.com/feature/5118272741572608)), поэтому нет необходимости загружать скрипты заранее.
+
+Если вы измеряете метрику, которую нельзя вычислить позже на временной шкале загрузки страницы, встройте в `<head>` вашего документа *только* тот код, который должен запускаться на ранней стадии (чтобы это не было [блокирующим рендеринг запросом](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)), а остальное отложите. Не загружайте всю аналитику заранее только потому, что этого требует одна метрика.
+
+### Не создавайте длительных задач
+
+Код аналитики часто запускается в ответ на ввод пользователя, но если ваш аналитический код проводит много измерений DOM или применяет другие API-интерфейсы, интенсивно использующие процессор, сам аналитический код может стать причиной плохой отзывчивости на ввод. Кроме того, если JavaScript-файл с кодом аналитики имеет большой размер, выполнение этого файла может заблокировать основной поток и отрицательно повлиять на FID.
+
+### Используйте неблокирующие API
+
+API, такие как <code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code>
+и
+<code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code> специально разработаны для выполнения некритических задач таким образом, чтобы не блокировать важные для пользователя задачи.
+
+Эти API-интерфейсыотличные инструменты для использования в аналитической библиотеке RUM.
+
+Как правило, все маячки аналитики должны отправляться с помощью `sendBeacon()` (если доступно), а весь код пассивных аналитических измерений должен  запускаться в периоды простоя.
+
+{% Aside %} Рекомендации о том, как максимально использовать время простоя, обеспечивая возможность экстренного запуска кода при необходимости (например, когда пользователь покидает страницу), см. в статье о шаблоне [idle-until-urgent](https://philipwalton.com/articles/idle-until-urgent/). {% endAside %}
+
+### Не отслеживайте больше, чем вам нужно
+
+Браузер предоставляет множество данных о производительности, но наличие этих данных не обязательно означает, что вы должны записывать их и отправлять на свои аналитические серверы.
+
+Например, [Resource Timing API](https://w3c.github.io/resource-timing/) предоставляет подробные данные о времени загрузки каждого ресурса на вашей странице. Однако маловероятно, что все эти данные будут обязательными или полезными для улучшения производительности загрузки ресурсов.
+
+Короче говоря, не отслеживайте данные просто потому, что они есть, убедитесь, что данные будут использоваться, прежде чем тратить ресурсы на их отслеживание.
diff --git a/src/site/content/ru/blog/vitals-measurement-getting-started/index.md b/src/site/content/ru/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..51390eb0251
--- /dev/null
+++ b/src/site/content/ru/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: Как начать измерять Web Vitals
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: Месячный график с наложением секундомеров с ярлыками LCP, FID и CLS.
+description: Узнайте, как измерить Web Vitals вашего сайта в полевых и лабораторных условиях.
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+Сбор данных по метрикам Web Vitals вашего сайтапервый шаг к их улучшению. Хорошо продуманный анализ позволит собрать данные о производительности как в полевых, так и в лабораторных условиях. Измерение Web Vitals требует минимальных изменений кода и может быть выполнено с помощью бесплатных инструментов.
+
+## Измерение Web Vitals с использованием данных RUM
+
+[Данные мониторинга реальных пользователей](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM), также известные как полевые данные, фиксируют производительность, с которой сталкиваются реальные пользователи сайта. Данные RUMэто то, что использует Google, чтобы определить, соответствует ли сайт [рекомендуемым пороговым значениям Core Web Vitals](/vitals/).
+
+### С чего начать измерение
+
+Если у вас нет настройки RUM, следующие инструменты быстро предоставят вам данные о реальной производительности вашего сайта. Все эти инструменты основаны на одном и том же базовом наборе данных ([Chrome User Experience Report (Отчет об удобстве пользования браузером Chrome)](https://developer.chrome.com/docs/crux/)), но имеют несколько разные варианты использования:
+
+- **PageSpeed Insights (PSI)**: [PageSpeed Insights](https://pagespeed.web.dev/) сообщает о сводной производительности на уровне страницы и на уровне источника за последние 28 дней. Кроме того, он содержит предложения по улучшению производительности. Если вы ищете с чего начать измерение и оптимизацию Web Vitals вашего сайта, мы рекомендуем использовать PSI. PSI доступен в виде [веб-инструмента](https://pagespeed.web.dev/) и [API](https://developers.google.com/speed/docs/insights/v5/get-started).
+- **Search Console**: [Search Console](https://search.google.com/search-console/welcome) предоставляет данные о производительности каждой страницы. Это позволяет выявить конкретные страницы, нуждающиеся в улучшении. В отличие от PageSpeed Insights, отчеты Search Console включают исторические данные о производительности. Search Console можно использовать для сайта, только если вы его владелец с подтверждённым правом собственности.
+- **Панель управления CrUX**: [панель управления CrUX](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard)это предварительно созданная панель управления, на которой отображаются данные CrUX для источника по вашему выбору. Она построен на основе Data Studio, процесс установки занимает около минуты. По сравнению с PageSpeed Insights и Search Console, отчеты панели управления CrUX включают больше параметровнапример, данные можно разбить по типу устройства и соединения.
+
+Стоит отметить, что перечисленные выше инструменты хорошо подходят не только для «начала» измерения Web Vitals, они могут быть полезны и в других контекстах. В частности, и CrUX, и PSI доступны как API и могут использоваться для [создания информационных панелей](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o) и других отчетов.
+
+### Сбор данных RUM
+
+Хотя инструменты на основе CrUX являются хорошей отправной точкой для исследования производительности Web Vitals, мы настоятельно рекомендуем дополнить их вашим собственным RUM. Данные RUM, которые вы собираете сами, могут предоставить более подробную и немедленную обратную связь о производительности вашего сайта. Это упрощает выявление проблем и тестирование возможных решений.
+
+{% Aside %} Источники данных на основе CrUX предоставляют данные с детализацией примерно за один месяц, однако детализация отличается в зависимости от инструмента. Например, PSI и Search Console сообщают о производительности за последние 28 дней, тогда как набор данных и панель управления CrUX разбиты по календарным месяцам. {% endAside %}
+
+Вы можете собирать свои данные RUM, используя специального поставщика RUM или настраивая собственные инструменты.
+
+Поставщики RUM специализируются на сборе и представлении данных RUM. Чтобы использовать Core Web Vitals с этими службами, попросите своего поставщика RUM включить мониторинг Core Web Vitals для вашего сайта.
+
+Если у вас нет поставщика RUM, вы можете расширить существующую настройку аналитики для сбора данных и составления отчетов по этим метрикам с помощью [библиотеки JavaScript `web-vitals`](https://github.com/GoogleChrome/web-vitals). Этот метод более подробно описан ниже.
+
+### Библиотека JavaScript web-vitals
+
+Если вы реализуете собственную настройку RUM для Web Vitals, самый простой способ собрать измерения Web Vitalsиспользовать библиотеку JavaScript [`web-vitals`](https://github.com/GoogleChrome/web-vitals). `web-vitals`это небольшая модульная библиотека (~ 1 КБ), которая предоставляет удобный API для сбора данных и создания отчетов по каждой [измеряемой в полевых условиях](/user-centric-performance-metrics/#in-the-field) метрике Web Vitals.
+
+Некоторые метрики Web Vitals не отображаются напрямую встроенными API-интерфейсами производительности браузера, но их измерение построено на основе этих API. Например, [CLS (Совокупное смещение макета)](/cls/) реализуется с помощью [Layout Instability API](https://wicg.github.io/layout-instability/). При использовании `web-vitals` вам не нужно беспокоиться о самостоятельной реализации измерения этих метрик; библиотека также гарантирует, что собранные вами данные соответствуют методологии и лучшим практикам по измерению каждого показателя.
+
+Для получения дополнительной информации о внедрении `web-vitals` см. [документацию библиотеки](https://github.com/GoogleChrome/web-vitals) и статью [«Лучшие практики для измерения показателей Web Vitals в полевых условиях»](/vitals-field-measurement-best-practices/).
+
+### Агрегация данных
+
+Очень важно, чтобы вы составляли отчеты об измерениях, собранных с помощью библиотеки `web-vitals`. Если эти данные измеряются, но не предоставляются в виде отчета, вы их никогда не увидите. Документация `web-vitals` включает примеры, показывающие, как отправлять данные в [общую конечную точку API](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint), [Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics) или [Google Tag Manager](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager).
+
+Если у вас уже есть любимый инструмент отчетности, воспользуйтесь им. Если же нет, то Google Analyticsбесплатный инструмент, который можно использовать для этой цели.
+
+При выборе инструмента подумайте о том, кто должен иметь доступ к данным. Как правило, компании добиваются наибольших успехов, когда в повышении производительности заинтересована вся компания, а не только один отдел. См. статью [«Исправление скорости веб-сайта совместными усилиями»](/fixing-website-speed-cross-functionally/), чтобы узнать, как получить поддержку от разных отделов.
+
+### Интерпретация данных
+
+При анализе данных о производительности важно обращать внимание на хвосты распределения. Данные RUM часто показывают, что производительность сильно различаетсяодни пользователи остались довольны взаимодействием с сайтом, а другиенет. Использование медианы для обобщения данных может привести к тому, что существующие проблемы будут скрыты.
+
+Google, чтобы определить, соответствует ли сайт/страница рекомендуемым пороговым значениям Web Vitals, использует процент «хороших» впечатлений, а не медианы или средние значения. В частности, считается, что сайт/страница соответствует пороговым значениям Core Web Vitals, если 75% посещений страниц соответствуют «хорошему» порогу каждой метрики.
+
+## Измерение Web Vitals с использованием лабораторных данных
+
+[Лабораторные данные](/user-centric-performance-metrics/#in-the-lab), также известные как синтетические, получают от контролируемой среды, а не от реальных пользователей. В отличие от данных RUM, лабораторные данные могут собираться и в предпроизводственных средах, поэтому сбор лабораторных данных можно включить в рабочие процессы разработчика и процессы непрерывной интеграции. Примеры инструментов для сбора синтетических данныхLighthouse и WebPageTest.
+
+### Рекомендации
+
+Всегда будут расхождения между данными RUM и лабораторными данными, особенно если условия сети, тип устройства или расположение лабораторной среды значительно отличаются от пользовательских. Однако, когда речь идет о сборе лабораторных данных по показателям Web Vitals, важно обратить внимание на несколько специфических моментов:
+
+- **Совокупное смещение макета (CLS):** [Совокупное смещение макета](/cls/), измеренное в лабораторных условиях, может быть искусственно ниже, чем наблюдаемое в данных RUM. CLS определяется как «сумма всех индивидуальных оценок смещений макета для каждого неожиданного смещения макета, который происходит *в течение всего времени жизни страницы*». Однако продолжительность жизни страницы обычно сильно различается в зависимости от того, загружается ли она реальным пользователем или синтетическим инструментом измерения производительности. Многие лабораторные инструменты только загружают страницуони не взаимодействуют с ней. В результате они фиксируют только те смещения макета, которые происходят во время начальной загрузки страницы. Напротив, CLS, измеряемый инструментами RUM, фиксирует [неожиданные смещения макета](/cls/#expected-vs-unexpected-layout-shifts), которые происходят на протяжении всего времени жизни страницы.
+- **Время ожидания до первого взаимодействия с контентом (FID):** [FID](/fid/) невозможно измерить в лабораторных условиях, поскольку для этого требуется взаимодействие пользователя со страницей. В качестве косвенного лабораторного показателя для FID используется [TBT (Общее время блокировки)](/tbt/). TBT измеряет «общее количество времени между первой отрисовкой контента (FCP) и временем до интерактивности (TTI), в течение которого страница блокируется и не реагирует на ввод пользователя». Хотя метрики FID и TBT рассчитываются по-разному, они обе отражают блокировку основного потока во время процесса начальной загрузки. Когда основной поток заблокирован, браузер не отвечает на действия пользователя. FID измеряет задержку (при наличии таковой), которая возникает при первой попытке пользователя взаимодействовать со страницей.
+
+### Инструменты
+
+Эти инструменты можно использовать для сбора лабораторных измерений Web Vitals:
+
+- **Расширение Web Vitals для Chrome:** [Расширение](https://github.com/GoogleChrome/web-vitals-extension) Web Vitals для Chrome измеряет и сообщает Core Web Vitals (LCP, FID и CLS) для данной страницы. Этот инструмент предназначен для предоставления разработчикам отзывов о производительности в режиме реального времени, когда они вносят изменения в код.
+- **Lighthouse:** Lighthouse сообщает о LCP, CLS и TBT, а также указывает на возможные улучшения производительности. Lighthouse доступен в Chrome DevTools как расширение Chrome и как пакет npm. Lighthouse также можно включить в рабочие процессы непрерывной интеграции с помощью [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci).
+- **WebPageTest:** Web Vitals входят в стандартную отчетность [WebPageTest](https://webpagetest.org/). WebPageTest полезен для сбора информации о Web Vitals при использовании различных типов подключений и устройств.
diff --git a/src/site/content/ru/blog/vitals-tools/index.md b/src/site/content/ru/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..0f4f162b9ab
--- /dev/null
+++ b/src/site/content/ru/blog/vitals-tools/index.md
@@ -0,0 +1,167 @@
+---
+title: Инструменты для измерения Core Web Vitals
+subhead: Теперь ваши любимые средства разработчика могут измерять показатели Core Web Vitals.
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: Прочтите о недавно объявленной поддержке измерения Core Web Vitals в популярных инструментах веб-разработчиков, таких как Lighthouse, PageSpeed Insights, Chrome UX Report и многих других.
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Логотип Chrome User Experience, логотип PageSpeed Insights, логотип Lighthouse, логотип Search Console, логотип Chrome DevTools, логотип расширения Web Vitals.
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+Недавно объявленная инициатива [Web Vitals](/vitals/) предоставляет единое руководство по сигналам качества, которые необходимы всем сайтам для обеспечения удобного взаимодействия с пользователем в Интернете. Мы рады сообщить, что **все популярные инструменты Google для веб-разработчиков теперь поддерживают измерение Core Web Vitals**, помогая вам более легко диагностировать и устранять проблемы взаимодействия с пользователем. Сюда входят [Lighthouse](https://github.com/GoogleChrome/lighthouse), [PageSpeed Insights](https://pagespeed.web.dev/), [Chrome DevTools](https://developer.chrome.com/docs/devtools/), [Search Console](https://search.google.com/search-console/about), [инструмент измерения web.dev](/measure/), [расширение Web Vitals для Chrome](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) и новый (!)[Chrome UX Report](https://developer.chrome.com/docs/crux/) API.
+
+Поскольку поисковая система Google теперь оценивает [удобство взаимодействия со страницами](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html) на основании Core Web Vitals, важно, чтобы эти метрики были максимально доступными и действенными.
+
+<figure>{% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="Обзор Chrome и инструментов поиска, поддерживающих показатели Core Web Vitals", width="800", height="509" %}</figure>
+
+{% Aside 'key-term' %} **Инструменты для измерения в лабораторных условиях** позволяют понять, как *потенциальный пользователь* будет воспринимать ваш веб-сайт, и предлагают воспроизводимые результаты для отладки. **Инструменты для измерения в полевых условиях** позволяют понять, как *реальные пользователи* воспринимают ваш сайт; этот тип измерения часто называют мониторингом реальных пользователей (RUM). Каждый [лабораторный или полевой инструмент](/how-to-measure-speed/#lab-data-vs-field-data) может быть полезен для оптимизации вашего взаимодействия с пользователем. {% endAside %}
+
+Чтобы начать свой путь к оптимизации взаимодействия с пользователем с помощью Core Web Vitals, попробуйте следующий рабочий процесс:
+
+- Используйте новый отчет Core Web Vitals report в Search Console, чтобы определить группы страниц, требующие внимания (на основе полевых данных).
+- После того как вы определили страницы, которые нуждаются в доработке, используйте PageSpeed Insights (на основе Lighthouse и Chrome UX Report) для диагностики лабораторных и полевых проблем на странице. PageSpeed Insights (PSI) доступен через Search Console, или вы можете ввести URL-адрес напрямую в PSI.
+- Готовы оптимизировать свой сайт локально в лабораторных условиях? Используйте Lighthouse и Chrome DevTools, чтобы измерить Core Web Vitals и получить действенные рекомендации о том, что именно нужно исправить. Расширение Web Vitals для Chrome позволяет просматривать показатели на рабочем столе в режиме реального времени.
+- Нужна настраиваемая панель управления Core Web Vitals? Используйте обновленную панель инструментов CrUX или новый Chrome UX Report API для полевых данных и PageSpeed Insights API для лабораторных данных.
+- Ищете руководство? web.dev/measure может измерить вашу страницу и показать вам приоритетный набор руководств и кодовых таблиц для оптимизации, используя данные PSI.
+- Наконец, перед развертыванием изменений в рабочей среде используйте Lighthouse CI для запросов на включение внесённых изменений, чтобы убедиться в отсутствии регрессий в Core Web Vitals.
+
+После этого введения давайте более подробно рассмотрим конкретные обновления для каждого инструмента!
+
+### Lighthouse
+
+Lighthouseэто автоматизированный инструмент аудита веб-сайтов, который помогает разработчикам диагностировать проблемы и определять возможности для улучшения взаимодействия с пользователями сайтов. Lighthouse измеряет несколько параметров качества взаимодействия с пользователем в лабораторной среде, включая производительность и доступность. Последняя версия Lighthouse ([6.0](/lighthouse-whats-new-6.0/), выпущена в середине мая 2020 г.) включает дополнительные проверки, новые показатели и недавно составленную оценку производительности.
+
+<figure>{% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="Lighthouse 6.0 с актуальными показателями Core Web Vitals", width="800", height="527" %}</figure>
+
+В отчет Lighthouse 6.0 добавлены три новых метрики. Две из нихэто [LCP](/lcp/) (Скорость загрузки основного контента) и [CLS](/cls/) (Совокупное смещение макета), которые представляют собой лабораторные реализации Core Web Vitals и предоставляют важную диагностическую информацию для оптимизации взаимодействия с пользователем, поэтому они включены в отчет и учитываются при расчете оценки производительности.
+
+Третья новая метрика, включенная в Lighthouse,[TBT](/tbt/) (Общее время блокировки)хорошо коррелирует с полевой метрикой [FID](/fid/) (Время ожидания до первого взаимодействия с контентом), также входящей в состав Core Web Vitals. Следуя рекомендациям, представленным в отчете Lighthouse, и оптимизируя свои показатели, вы обеспечите наилучший возможный опыт для своих пользователей.
+
+Обновлены также все связанные Lighthouse продукты, включая [Lighthouse CI,](https://github.com/GoogleChrome/lighthouse-ci) который позволяет легко измерять Core Web Vitals по запросам на включение внесённых изменений до их объединения и развертывания.
+
+<figure>
+  {% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="Lighthouse CI, экран представления различий для LCP", width="800", height="498" %}
+</figure>
+
+Чтобы узнать больше о последних обновлениях в Lighthouse, ознакомьтесь с нашей публикацией в блоге[«Новые возможности Lighthouse 6.0».](/lighthouse-whats-new-6.0/)
+
+### PageSpeed Insights
+
+[PageSpeed Insights](https://pagespeed.web.dev/) (PSI) сообщает о производительности страницы в лабораторных и полевых условиях для мобильных и настольных устройств. Инструмент предоставляет обзор того, как реальные пользователи воспринимают страницу (на основе отчета Chrome UX), и набор действенных рекомендаций для владельца сайта по улучшению восприятия страницы (предоставлено Lighthouse).
+
+PageSpeed Insights и [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) также были обновлены для использования Lighthouse 6.0 и теперь поддерживают измерение Core Web Vitals в разделах отчета по лабораторным и полевым измерениям! Показатели Core Web Vitals помечены синим флажком (см. ниже).
+
+<figure>
+  {% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="Экран PageSpeed Insights с лабораторными и полевыми метриками Core Web Vitals", width="800", height="873" %}
+</figure>
+
+Тогда как [Search Console](https://search.google.com/search-console/) предоставляет владельцам сайтов отличный обзор для проблемных групп страниц, PSI помогает определить возможности каждой страницы по улучшению взаимодействия. В PSI можно наглядно увидеть, соответствует ли ваша страница пороговым значениям всех Core Web Vitalsв верхней части отчета указано, **прошла страница оценку Core Web Vitals** или **не прошла**.
+
+### CrUX
+
+Отчет [Chrome UX](https://developer.chrome.com/docs/crux/) (CrUX)это общедоступный набор данных о реальном пользовательском восприятии миллионов веб-сайтов. Отчет измеряет полевые метрики Core Web Vitals. В отличие от лабораторных данных, данные CrUX поступают от [зарегистрированных пользователей](https://developer.chrome.com/docs/crux/methodology/#user-eligibility) в полевых условиях. Используя эти данные, разработчики могут понять распределение реального пользовательского опыта на собственных сайтах или даже на сайтах конкурентов. Если у вас нет RUM на сайте, CrUX может предоставить быстрый и простой способ оценить ваши Core Web Vitals. [Набор данных CrUX на BigQuery](https://developer.chrome.com/docs/crux/bigquery/) включает в себя подробные данные о производительности для всех Core Web Vitals и доступен в виде ежемесячных снепшотов на уровне источника.
+
+Единственный способ по-настоящему узнать, как сайт работает для пользователей,это реально измерить его производительность в полевых условиях, когда пользователи загружают сайт и взаимодействуют с ним. Этот тип измерения обычно называется мониторингом реальных пользователей или сокращенно RUM. Даже если у вас нет RUM на сайте, CrUX может предоставить быстрый и простой способ оценить Core Web Vitals.
+
+**Представляем CrUX API**
+
+Сегодня мы рады анонсировать [CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/)быстрый и бесплатный способ легко интегрировать рабочие процессы разработки с измерением качества на уровне источника и URL-адреса для следующих полевых показателей:
+
+- скорость загрузки основного контента (LCP);
+- совокупное смещение макета (CLS);
+- время ожидания до первого взаимодействия с контентом (FID);
+- первая отрисовка контента (FCP).
+
+Разработчики могут делать запрос по источнику или URL-адресу и сегментировать результаты по различным форм-факторам. API обновляется ежедневно и суммирует данные за предыдущие 28 дней (в отличие от набора данных BigQuery, который агрегируется ежемесячно). API имеет те же ослабленные квоты на запросы к общедоступным API, которые мы устанавливаем для другого нашего APIAPI PageSpeed Insights (25 000 запросов в день).
+
+Ниже приведена [демонстрация](https://developer.chrome.com/blog/chrome-ux-report-api/) использования CrUX API для визуализации показателей Core Web Vitals с распределением по **«хорошо»**, **«требует улучшения»** и **«плохо»**:
+
+<figure>{% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="Демонстрация Chrome User Experience Report API с метриками Core Web Vitals", width="800", height="523" %}</figure>
+
+В будущих выпусках мы планируем расширить API, чтобы обеспечить доступ к дополнительным параметрам и показателям набора данных CrUX.
+
+**Обновленная панель управления CrUX**
+
+Обновленная [панель CrUX Dashboard](http://g.co/chromeuxdash) позволяет легко отслеживать производительность источника с течением времени, и теперь можно использовать панель для мониторинга распределения всех показателей Core Web Vitals. Чтобы начать работу с панелью, ознакомьтесь с нашим [руководством](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/) на web.dev.
+
+<figure>{% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="Панель инструментов отчета Chrome UX Report с метриками Core Web Vitals на новой целевой странице", width="800", height="497" %}</figure>
+
+Мы сделали новую целевую страницу Core Web Vitals, чтобы можно было с первого взгляда увидеть, как работает ваш сайт. Мы будем рады отзывам обо всех инструментах CrUX; чтобы поделиться своими мыслями и вопросами, напишите нам в Твиттере [@ChromeUXReport](https://twitter.com/chromeuxreport) или в [Google Group](https://groups.google.com/a/chromium.org/g/chrome-ux-report).
+
+### Панель производительности Chrome DevTools
+
+**События Debug Layout Shift в разделе Experience**
+
+На панели **Performance** в Chrome DevTools появился новый раздел **[Experience](https://developers.google.com/web/updates/2020/05/devtools#cls)**, с помощью которого можно обнаруживать неожиданные смещения макета. Это полезно для поиска и устранения проблем визуальной нестабильности на вашей странице, которые учитываются в метрике CLS (Совокупное смещение макета).
+
+<figure>{% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="Совокупное смещение макета отображается в виде красных записей на панели производительности", width="800", height="517" %}</figure>
+
+Выберите Layout Shift, чтобы просмотреть сведения о смещении макета на вкладке **Summary**. Чтобы визуализировать, где произошло смещение, наведите указатель мыши на поля **Moved from** и **Moved to**.
+
+**Готовность к отладке взаимодействия с TBT в нижнем колонтитуле**
+
+Показатель TBT (Общее время блокировки) можно измерить с помощью лабораторных инструментов, это отличный косвенный показатель для FID (Времени ожидания до первого взаимодействия с контентом). TBT измеряет общее количество времени между [FCP (Первой отрисовкой контента)](/fcp/) и [TTI (Временем до интерактивности)](/tti/), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию на ввод. Оптимизация производительности, улучшающая TBT в лабораторных условиях, должна улучшить FID в полевых условиях.
+
+<figure>
+  {% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="Общее время блокировки, отображаемое в нижнем колонтитуле панели производительности DevTools", width="800", height="517" %}
+</figure>
+
+TBT теперь отображается в нижнем колонтитуле панели **Performance** в Chrome DevTools при измерении производительности страницы:
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. Щелкните **Record**.
+2. Обновите страницу вручную.
+3. Дождитесь загрузки страницы, затем остановите запись.
+
+Дополнительные сведения см. в разделе [«Новые возможности DevTools (Chrome 84)»](https://developers.google.com/web/updates/2020/05/devtools#cls).
+
+### Search Console
+
+Новый отчет [Core Web Vitals report](https://support.google.com/webmasters/answer/9205520) в Search Console помогает определить проблемные группы страниц вашего сайта на основании реальных (полевых) данных из CrUX. Производительность URL-адресов сгруппирована по статусу, типу метрики и группе URL-адресов (группы похожих веб-страниц).
+
+<figure>
+  {% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="Новый отчет Core Web Vitals Report в Search Console", width="800", height="1000" %}
+</figure>
+
+Отчет основан на трех показателях Core Web Vitals: LCP, FID и CLS. Если URL-адрес не содержит минимального количества отчетных данных для этих показателей, он не включается в отчет. Ознакомьтесь с новым отчетом, чтобы получить целостное представление о производительности вашего источника.
+
+Как только вы определите тип страницы, на которой есть проблемы, связанные с Core Web Vitals, можно использовать PageSpeed Insights, чтобы узнать о конкретных предложениях по оптимизации для репрезентативных страниц.
+
+#### web.dev
+
+[web.dev/measure](/measure/) позволяет измерять производительность страницы с течением времени, предоставляя приоритетный список руководств об улучшении. Измерения web.dev основаны на PageSpeed Insights. Инструмент измерения теперь также поддерживает показатели Core Web Vitals, как показано ниже:
+
+<figure>
+  {% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="Измеряйте показатели Core Web Vitals с течением времени и получайте приоритетные рекомендации с помощью инструмента измерения web.dev", width="800", height="459" %}
+</figure>
+
+### Расширение Web Vitals
+
+Расширение Web Vitals измеряет три показателя Core Web Vitals в режиме реального времени для (настольного) Google Chrome. Это полезно для выявления проблем на ранних этапах рабочего процесса разработки и в качестве диагностического инструмента для оценки производительности Core Web Vitals при просмотре веб-страниц.
+
+Расширение теперь можно установить из [Интернет-магазина Chrome](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)! Надеемся, вы сочтете это полезным. Мы приветствуем любой вклад в улучшение расширения, а также отзывы в репозитории проекта на [GitHub](https://github.com/GoogleChrome/web-vitals-extension/).
+
+<figure>{% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="Core Web Vitals отображаются в режиме реального времени с помощью расширения Web Vitals для Chrome", width="800", height="459" %}</figure>
+
+#### Краткие итоги
+
+Вот и всё! Следующие шаги:
+
+- Используйте **Lighthouse** в DevTools, чтобы оптимизировать взаимодействие с пользователем и убедиться, что у вас отличные показатели Core Web Vitals в полевых условиях.
+- Используйте **PageSpeed Insights** для сравнения производительности Core Web Vitals в лабораторных и полевых условиях.
+- Попробуйте новый **Chrome User Experience Report API**, чтобы узнать, какие Core Web Vitals были у вашего источника и URL-адрес за последние 28 дней.
+- Используйте раздел **Experience** и нижний колонтитул на панели **Performance** в DevTools, чтобы копнуть глубже и отладить определенные показатели Core Web Vitals.
+- Используйте **отчет Core Web Vitals report в Search Console**, чтобы получить сводку о том, как ваши источники работают в полевых условиях.
+- Используйте **расширение Web Vitals**, чтобы отслеживать производительность страницы по Core Web Vitals в режиме реального времени.
+
+Мы расскажем больше о наших инструментах Core Web Vitals на [web.dev Live](/live/) в июне. Зарегистрируйтесь, чтобы получать новости о мероприятии!
+
+~ Элизабет и Эдди, WebPerf Janitors
diff --git a/src/site/content/ru/blog/web-share/index.md b/src/site/content/ru/blog/web-share/index.md
new file mode 100644
index 00000000000..01f5172cf56
--- /dev/null
+++ b/src/site/content/ru/blog/web-share/index.md
@@ -0,0 +1,118 @@
+---
+title: Интеграция с пользовательским интерфейсом обмена ресурсами ОС с помощью Web Share API
+subhead: Веб-приложения могут использовать те же системные возможности обмена ресурсами, что и нативные приложения.
+authors:
+  - joemedley
+date: 2019-11-08
+updated: 2021-07-09
+hero: image/admin/ruvEms3AeSZvlEI01DKo.png
+alt: Иллюстрация, демонстрирующая, что веб-приложения могут использовать системный пользовательский интерфейс для обмена контентом.
+description: С помощью Web Share API веб-приложения могут использовать те же системные возможности обмена ресурсами, что и нативные приложения. Web Share API позволяет веб-приложениям обмениваться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, так же, как это делают нативные приложения.
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+stack_overflow_tag: web-share
+---
+
+С помощью Web Share API веб-приложения могут использовать те же системные возможности обмена ресурсами, что и нативные приложения. Web Share API позволяет веб-приложениям обмениваться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, так же, как это делают нативные приложения.
+
+{% Aside %} Возможность делиться ресурсами — лишь половина чуда. Когда вы чем-то делитесь, можно сделать веб-приложение целью, то есть направить ему данные, ссылки, текст и файлы из нативных или других веб-приложений. Подробную информацию о том, как зарегистрировать свое приложение в качестве цели для обмена ресурсами см. в публикации «[Получение общих данных](/web-share-target/)». {% endAside %}
+
+## Общее представление и использование
+
+<figure data-float="right">{% Img src="image/admin/cCXNoHbXAfkAQzTTuS0Z.png", alt="Средство выбора целевого ресурса на уровне системы с установленным PWA в качестве опции.", width="370", height="349" %} <figcaption> Средство выбора целевого ресурса на уровне системы с установленным PWA в качестве опции. </figcaption></figure>
+
+### Возможности и ограничения
+
+Web Share API имеет следующие возможности и ограничения:
+
+- Его можно использовать только на сайте, [доступ к которому осуществляется через HTTPS](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features).
+- Он должен вызываться в ответ на действие пользователя, например, клик. Вызвать его через обработчик `onload` невозможно.
+- С его помощью можно делиться URL-адресами, текстом или файлами.
+- С января 2021 года он доступен в Safari, Android в форках Chromium, ChromeOS и Chrome для Windows. Chrome для MacOS все еще находится в разработке. См. подробности в [MDN](https://developer.mozilla.org/docs/Web/API/Navigator/share#Browser_compatibility).
+
+### Обмен ссылками и текстом
+
+Чтобы поделиться ссылками и текстом, используйте метод `share()` на основе обещаний с обязательным объектом свойств. Чтобы браузер не генерировал `TypeError`, объект должен содержать хотя бы одно из следующих свойств: `title`, `text`, `url` или `files`. К примеру, можно поделиться текстом без URL-адреса или наоборот. Разрешение всех трех членов расширяет гибкость вариантов использования. Допустим, после выполнения приведенного ниже кода пользователь выбрал приложение электронной почты в качестве цели. Параметр `title` может стать темой письма, `text` — телом сообщения, а файлы — вложениями.
+
+```js
+if (navigator.share) {
+  navigator.share({
+    title: 'web.dev',
+    text: 'Откройте для себя web.dev.',
+    url: 'https://web.dev/',
+  })
+    .then(() => console.log('Удалось поделиться'))
+    .catch((error) => console.log('Не удалось поделиться', error));
+}
+```
+
+Если на вашем сайте несколько URL-адресов для одного и того же контента, поделитесь каноническим URL-адресом страницы вместо текущего URL-адреса. Вместо того, чтобы делиться `document.location.href`, вам нужно найти тег `<meta>` канонического URL-адреса в `<head>` страницы и поделиться им. Так вы улучшите взаимодействие с пользователем. Этот подход не только предотвращает перенаправления, но также гарантирует, что по URL-адресу, которым вы поделились, пользователю будет показан корректный интерфейс для конкретного клиента. Например, если друг поделился мобильным URL-адресом, а вы просматриваете его на настольном компьютере, вы должны увидеть версию для настольного компьютера:
+
+```js
+let url = document.location.href;
+const canonicalElement = document.querySelector('link[rel=canonical]');
+if (canonicalElement !== null) {
+    url = canonicalElement.href;
+}
+navigator.share({url});
+```
+
+### Обмен файлами
+
+Чтобы поделиться файлами, сначала проверьте и вызовите `navigator.canShare()`. Затем включите массив файлов в вызов `navigator.share()`:
+
+```js/0-5
+if (navigator.canShare && navigator.canShare({ files: filesArray })) {
+  navigator.share({
+    files: filesArray,
+    title: 'Фотографии из отпуска',
+    text: 'Фото с 27 сентября по 14 октября.',
+  })
+  .then(() => console.log('Удалось поделиться.'))
+  .catch((error) => console.log('Не удалось поделиться', error));
+} else {
+  console.log(`Ваша система не поддерживает обмен файлами.`);
+}
+```
+
+Обратите внимание, что в этом примере обнаружение функций реализуется путем проверки `navigator.canShare()`, а не `navigator.share()`. Объект данных, передаваемый в `canShare()`, поддерживает только свойство `files`. Можно делиться изображениями, видео, аудио и текстовыми файлами. (См. [разрешенные расширения файлов в Chromium](https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit?usp=sharing).) В будущем могут быть добавлены другие типы файлов.
+
+## Пример использования Santa Tracker
+
+<figure data-float="right">{% Img src="image/admin/2I5iOXaOpzEJlEbM694n.png", alt="Приложение Santa Tracker показывает кнопку «Поделиться».", width="343", height="600" %} <figcaption> Кнопка «Поделиться» в Santa Tracker. </figcaption></figure>
+
+Проект с открытым исходным кодом [Santa Tracker](https://santatracker.google.com/) стал в Google праздничной традицией. Вы можете отмечать каждый декабрь, принимая участие в играх и образовательных мероприятиях.
+
+В 2016 году команда Santa Tracker использовала Web Share API на Android. Этот API идеально подходил для мобильных устройств. Ранее разработчики удалили кнопки «Поделиться» на мобильных устройствах, потому что не смогли вместить несколько целей для обмена данными в ограниченное пространство.
+
+Однако с помощью Web Share API они смогли представить одну кнопку, сэкономив драгоценные пиксели. Они также обнаружили, что с задействованным Web Share API пользователи делятся ресурсами примерно на 20% чаще, чем без включенного API. Перейдите в [Santa Tracker](https://santatracker.google.com/) и посмотрите, как работает Web Share.
+
+## Поддержка браузера
+
+Поддержка браузером Web Share API имеет нюансы, и рекомендуется использовать обнаружение функций (как описано в предыдущих примерах кода) вместо того, чтобы предполагать, что поддерживается конкретный метод.
+
+По состоянию на начало 2021 года использование API для обмена заголовком, текстом и URL-адресом поддерживается в:
+
+- Safari 12 или новее в macOS и iOS.
+- Chrome 75 или новее для Android и 89 или новее в ChromeOS и Windows.
+
+Использование API для обмена файлами поддерживается в:
+
+- Safari 15 или новее в macOS и iOS.
+- Chrome 75 или новее для Android и 89 или новее в ChromeOS и Windows.
+
+(Большинство браузеров на основе Chromium, например Edge, имеют ту же поддержку этой функции, что и соответствующая версия Chrome.)
+
+### Поддержите API
+
+Собираетесь использовать Web Share API? Ваша публичная поддержка помогает команде Chrome расставлять функции в порядке приоритетности и показывает другим поставщикам браузеров, насколько важно их поддерживать.
+
+Отправьте твит на [@ChromiumDev](https://twitter.com/ChromiumDev), используя хэштег [`#WebShare`](https://twitter.com/search?q=%23WebShare&src=recent_search_click&f=live), и сообщите нам, где и как вы его используете.
+
+## Полезные ссылки
+
+- [Демонстрации Web Share](https://w3c.github.io/web-share/demos/share-files.html)
+- [Библиотека заготовок PWA](https://github.com/GoogleChrome/samples/blob/gh-pages/web-share/README.md#web-share-demo)
diff --git a/src/site/content/ru/blog/webrtc-standard-announcement/index.md b/src/site/content/ru/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..f18099d3236
--- /dev/null
+++ b/src/site/content/ru/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,40 @@
+---
+title: WebRTC — стандарт W3C и IETF
+subhead: |2-
+
+  Краткий обзор истории, архитектуры, примеров использования и будущего WebRTC.
+description: |2-
+
+  Краткий обзор истории, архитектуры, примеров использования и будущего WebRTC.
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+Установление веб-стандарта — это длительный процесс, во время которого определяются и обеспечиваются его полезность, согласованность и совместимость с браузерами. Сегодня [W3C и IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en) отмечают завершение работы над стандартом, который оказался, пожалуй, одним из важнейших во время пандемии: WebRTC.
+
+{% Aside %} Ознакомьтесь с практическим заданием [Взаимодействие в реальном времени с помощью WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web), которое представляет собой руководство по внедрению WebRTC. {% endAside %}
+
+## История {: #history }
+
+WebRTC — это платформа, позволяющая браузерам, мобильным и настольным приложениям взаимодействовать в режиме реального времени. Обычно такие возможности используются для видеозвонков. Платформа WebRTC состоит из набора необходимых технологий и стандартов. Компания Google предложила идею создания WebRTC в 2009 г. в качестве альтернативы Adobe Flash и настольным приложениям, которые не могли работать в браузере. Предыдущее поколение браузерных продуктов было разработано на основе лицензируемой проприетарной технологии. В их число входил и сервис Hangouts. Впоследствии корпорация Google купила компании, которые предоставляли лицензию на эту технологию, и превратила ее в проект с открытым исходным кодом — WebRTC. Соответствующий код был интегрирован в Chrome и используется большинством приложений, применяющих WebRTC. Благодаря совместным усилиям разработчиков других браузеров и лидеров отрасли, таких как Mozilla, Microsoft, Cisco и Ericsson, в W3C и IETF началась работа по стандартизации WebRTC.  В 2013 г. Mozilla и Google [продемонстрировали](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html) видеозвонок между своими браузерами. По мере развития стандарта многие архитектурные обсуждения привели к различиям в реализации WebRTC в разных браузерах и поставили под вопрос совместимость и и возможность взаимодействия. Большинство разногласий были в конечном итоге урегулированы в процессе завершения работы над стандартом в прошедшие годы. Спецификация WebRTC теперь сопровождается [полным набором платформенных тестов](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned) и инструментов для обеспечения совместимости. Браузеры в значительной степени адаптировали собственные реализации соответствующим образом. Это положило конец сложному периоду, когда веб-разработчикам приходилось постоянно адаптировать собственные сервисы к различным браузерам и изменениям в спецификации.
+
+## Архитектура и функциональность {: #architecture }
+
+[`RTCPeerConnection` API](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection) — центральная часть спецификации WebRTC. `RTCPeerConnection` связывает два приложения на разных конечных точках для обмена данными с использованием однорангового протокола. `PeerConnection` API тесно взаимодействует с [`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia) для обеспечения доступа к камере и микрофону, а также с [`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) — для записи содержимого экрана. WebRTC позволяет отправлять и получать потоки, которые включают в себя аудио- и (или) видеоконтент, а также произвольные двоичные данные, — посредством `DataChannel`. Основа любой реализации WebRTC — мультимедийные функции для обработки, кодирования и декодирования аудио и видео. WebRTC поддерживает различные аудиокодеки (самый популярный и универсальный — Opus). Реализации WebRTC должны поддерживать использование для обработки видео как бесплатного видеокодека VP8 от Google, так и H.264. Подключения WebRTC всегда шифруются, что делается с помощью двух существующих протоколов: DTLS и SRTP.  WebRTC в значительной степени опирается на существующие стандарты и технологии, включая видеокодеки (VP8, H264), прохождение по сети (ICE), транспорт (RTP, SCTP) и протоколы описания мультимедиа (SDP). Всё это связано вместе более чем в 50 рабочих предложениях (RFC).
+
+## Примеры использования: когда важна каждая миллисекунда {: #use-cases }
+
+WebRTC широко используется в требовательных ко времени отклика приложениях в таких областях, как удаленная хирургия, системный мониторинг и удаленное управление автономными автомобилями, а также голосовые и видеозвонки на основе UDP, когда буферизация невозможна. Практически все браузерные сервисы видеозвонков от таких компаний, как Google, Facebook, Cisco, RingCentral и Jitsi, используют WebRTC. В сервисах Google Stadia и NVIDIA GeForce NOW с помощью WebRTC видеопоток геймплея из облака передается в веб-браузер без заметных задержек.
+
+## Из-за пандемии повысились требования к качеству видеозвонков {: #performance }
+
+За последний год использование WebRTC в Chrome увеличилось в 100 раз — в результате увеличения количества видеозвонков из браузера. Понимая, что во время пандемии видеозвонки стали фундаментальной частью жизни многих людей, разработчики браузеров начали оптимизировать соответствующие технологии. И это было особенно важно, поскольку по мере перехода сотрудников компаний и учащихся на удаленную работу и учебу ресурсоемкие звонки с больших числом участников и видеоэффектами в видеовстречах стали более распространенным явлением.  За последний год энергоэффективность Chrome в видеозвонках выросла на 30 %, а для случаев интенсивного использования планируются и дальнейшие оптимизации. Во время пандемии Mozilla, Apple и Microsoft [внесли значительные улучшения](https://www.youtube.com/watch?v=YZROn-WsyO4) в собственные реализации WebRTC — в частности, чтобы обеспечить соответствие формальному стандарту.
+
+## Будущее WebRTC {: #future }
+
+WebRTC является стандартом W3C, но процесс совершенствования технологии не остановился. Новый видеокодек AV1, который [снижает сетевую нагрузку на 50 %](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/), становится доступным в WebRTC и веб-браузерах. Ожидается, что последующие улучшения в базе открытого исходного кода еще больше снизят задержку и повысят качество транслируемого видео. [WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/) собирает инициативы по созданию дополнительных API, которые позволяет реализовать новые варианты применения технологии. Сюда входят расширения существующих API, дающие больший контроль над существующими функциями (например, для [масштабируемого кодирования видео](https://www.w3.org/TR/webrtc-svc/)), а также API для доступа к [низкоуровневым компонентам](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md), которые открывают перед веб-разработчикам широкие возможности по внедрению новшеств за счет интеграции специальных высокопроизводительных компонентов WebAssembly. Мы ожидаем, что с развитием 5G-сетей и повышением спроса на интерактивные сервисы в течение следующего года увеличится количество проектов, построенных на базе WebRTC.
diff --git a/src/site/content/ru/devices/index.md b/src/site/content/ru/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/ru/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/ru/discoverable/index.md b/src/site/content/ru/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/ru/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/ru/explore/explore.11tydata.js b/src/site/content/ru/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/ru/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ru/explore/index.md b/src/site/content/ru/explore/index.md
new file mode 100644
index 00000000000..b828c7abccf
--- /dev/null
+++ b/src/site/content/ru/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: Исследовать
+date: 2022-12-10
+---
diff --git a/src/site/content/ru/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/ru/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..8c01e9fdbae
--- /dev/null
+++ b/src/site/content/ru/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: Применение мгновенной загрузки с помощью шаблона PRPL
+authors:
+  - houssein
+description: PRPL — это аббревиатура, описывающая шаблон, который используется для ускорения загрузки и перехода к интерактивности веб-страниц. Из этого руководства вы узнаете, как использовать каждый из этих методов по отдельности и сочетать их друг с другом для улучшения производительности.
+date: 2018-11-05
+tags:
+  - performance
+---
+
+PRPL — это аббревиатура, описывающая шаблон, который используется для ускорения загрузки и перехода к интерактивности веб-страниц:
+
+- **Push** — отправка, или **preload** — предварительная загрузка, наиболее важных ресурсов.
+- **Render** — обработка начального маршрута в кратчайшие сроки.
+- **Pre-cache** — предварительное кеширование оставшихся ресурсов.
+- **Lazy load** — отложенная загрузка других маршрутов и некритических ресурсов.
+
+Из этого руководства вы узнаете, как использовать каждый из этих методов по отдельности и сочетать их друг с другом для улучшения производительности.
+
+## Аудит вашей страницы в Lighthouse
+
+Запустите Lighthouse, чтобы определить возможности для улучшения в соответствии с методами PRPL:
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. Установите метки **«Производительность»** и «**Прогрессивное веб-приложение**».
+2. Щелкните «**Выполнить аудит**», чтобы создать отчет.
+
+Дополнительные сведения см. в разделе «[Откройте для себя возможности повышения производительности с помощью Lighthouse](/discover-performance-opportunities-with-lighthouse)».
+
+## Предварительная загрузка критических ресурсов
+
+Следующий аудит Lighthouse завершается неудачей, если определенный ресурс анализируется и загружается слишком поздно:
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse: аудит ключевых запросов на предварительную загрузку", width="745", height="97" %}
+
+[**Предварительная загрузка**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) — это декларативный запрос на выборку, который сообщает браузеру как можно скорее запросить ресурс. Предварительно загрузите критически важные ресурсы, добавив тег `<link>` с атрибутом `rel="preload"` в заголовок своего HTML-документа:
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+Браузер устанавливает подходящий уровень приоритета для ресурса, чтобы попытаться загрузить его раньше, не задерживая событие `window.onload`.
+
+Дополнительные сведения о предварительной загрузке критических ресурсов см. в руководстве «[Предварительная загрузка критических ресурсов](/preload-critical-assets)».
+
+## Обработка начального маршрута в кратчайшие сроки
+
+Lighthouse выдает предупреждение, если есть ресурсы, которые задерживают [**First Paint**](/user-centric-performance-metrics/#important-metrics-to-measure), момент, когда ваш сайт отображает пиксели на экране:
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Lighthouse: аудит устранения ресурсов, блокирующих рендеринг", width="800", height="111" %}
+
+Чтобы улучшить показатель First Paint, Lighthouse рекомендует встраивать критический JavaScript и откладывать остальное с помощью [`async`](/critical-rendering-path-adding-interactivity-with-javascript/), а также встраивать критический CSS, используемый в верхней части страницы. Это повышает производительность за счет исключения циклических обращений к серверу для получения ресурсов, блокирующих рендеринг. Однако встроенный код сложнее поддерживать с точки зрения разработки, и браузер не может кешировать его отдельно.
+
+Другой подход к улучшению показателя First Paint — это **рендеринг на стороне сервера** исходного HTML-кода вашей страницы. С этим подходом контент будет отображен для пользователя немедленно, пока скрипты все еще выбираются, анализируются и выполняются. Однако это может значительно увеличить полезную нагрузку HTML-файла, что может увеличить [**Time to Interactive**](/tti/), т.е. время, необходимое для того, чтобы ваше приложение стало интерактивным и могло реагировать на ввод пользователя.
+
+Не существует единого правильного решения для уменьшения First Paint в вашем приложении, и следует рассматривать встраивание стилей и рендеринг на стороне сервера только в том случае, если польза перевешивает потенциальный риск для вашего приложения. Вы можете узнать больше об обеих концепциях в следующих ресурсах.
+
+- [Оптимизация доставки CSS](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [Что такое рендеринг на стороне сервера?](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">{% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="Запросы/ответы с сервис-воркером", width="800", height="1224" %}</figure>
+
+## Предварительное кеширование ресурсов
+
+Действуя как прокси, **сервис-воркеры** могут при повторных посещениях извлекать ресурсы непосредственно из кеша, а не с сервера. Это не только позволяет пользователям работать с вашим приложением вне сети, но и сокращает время загрузки страницы при повторных посещениях.
+
+Используйте стороннюю библиотеку, чтобы упростить процесс создания сервис-воркера, если ваши требования к кешированию не выходят за рамки возможностей библиотеки. Например, [Workbox](/workbox) предоставляет набор инструментов, которые позволяют создавать и поддерживать сервис-воркер для кеширования ресурсов. Для получения дополнительной информации о сервис-воркерах и бесперебойной работе вне сети обратитесь к [руководству по сервис-воркерам](/service-workers-cache-storage) в рамках программы обучения надежности.
+
+## Отложенная загрузка
+
+Аудит Lighthouse завершается неудачей, если вы отправляете слишком много данных по сети.
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse: аудит чрезмерной сетевой нагрузки", width="800", height="99" %}
+
+Сюда входят все типы ресурсов, но большие полезные данные JavaScript особенно дороги из-за того, что браузеру требуется время, чтобы проанализировать и скомпилировать их. В соответствующих случаях Lighthouse также предупреждает об этом.
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse: аудит времени загрузки JavaScript", width="797", height="100" %}
+
+Чтобы отправить меньший пакет JavaScript, который содержит только код, необходимый при первоначальной загрузке вашего приложения пользователем, разделите весь пакет и  [загрузите фрагменты](/reduce-javascript-payloads-with-code-splitting) по запросу.
+
+После того, как вам удалось разделить пакет, предварительно загрузите более важные фрагменты (см. руководство по [предварительной загрузке критических ресурсов](/preload-critical-assets)). Предварительная загрузка гарантирует, что более важные ресурсы будут извлечены и загружены браузером раньше.
+
+Помимо разделения и загрузки различных фрагментов JavaScript по запросу, Lighthouse также предоставляет аудит отложенной загрузки некритических изображений.
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse: аудит откладывания закадровых изображений", width="800", height="90" %}
+
+Если вы загружаете много изображений на свою веб-страницу, отложите все, что находится ниже первого экрана или вне области просмотра устройства, когда страница загружается (см. «[Использование lazysizes для отложенной загрузки изображений](/use-lazysizes-to-lazyload-images)»).
+
+## Следующие шаги
+
+Теперь, когда вы понимаете некоторые из основных концепций, лежащих в основе шаблона PRPL, перейдите к следующему руководству в этом разделе, чтобы узнать больше. Важно помнить, что не все техники нужно применять вместе. Использование любой из следующих методик обеспечит заметное улучшение производительности.
+
+- **Push** — отправка, или **preload** — предварительная загрузка, критических ресурсов.
+- **Render** — обработка начального маршрута в кратчайшие сроки.
+- **Pre-cache** — предварительное кеширование оставшихся ресурсов.
+- **Lazy load** — отложенная загрузка других маршрутов и некритических ресурсов.
diff --git a/src/site/content/ru/fast/avoid-invisible-text/index.md b/src/site/content/ru/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..96e6ec938a3
--- /dev/null
+++ b/src/site/content/ru/fast/avoid-invisible-text/index.md
@@ -0,0 +1,120 @@
+---
+layout: post
+title: Как избежать скрытия текста во время загрузки шрифта
+authors:
+  - katiehempenius
+description: |2-
+
+  Часто шрифты — это большие файлы, на загрузку которых требуется время. Поэтому некоторые
+
+  браузеры скрывают текст, пока шрифт не загрузится (что вызывает так называемое «внезапное появление текста»). Если
+
+  вы стремитесь повысить эффективность работы сайта, этого внезапного появления
+
+  текста следует избегать — лучше сразу показывать содержимое страницы с использованием системного шрифта.
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## Суть проблемы
+
+Часто шрифты — это большие файлы, на загрузку которых требуется время. Поэтому некоторые браузеры скрывают текст, пока шрифт не загрузится (что вызывает так называемое «внезапное появление текста»). Если вы стремитесь повысить эффективность работы сайта, этого внезапного появления текста следует избегать — лучше сразу показывать содержимое страницы с использованием системного шрифта (что приведет к «кратковременному показу текста без стилей»).
+
+## Мгновенный показ текста
+
+В этом руководстве описаны два способа мгновенного показа текста. Первый — очень простой, но [поддерживается](https://caniuse.com/#search=font-display) не всеми браузерами. Второй — более сложный, но зато поддерживается всеми браузерами. Выбирайте тот, который вы реализуете и будете поддерживать.
+
+## Вариант № 1: использовать «font-display»
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Было</th>
+        <th>Стало</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+}
+</code>
+        </td>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+  &lt;strong&gt;font-display: swap;&lt;/strong&gt;
+}
+</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+API [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) позволяет указать стратегию отображения шрифтов. Ключевое слово `swap` сообщает браузеру, что текст, использующий этот шрифт, должен выводиться сразу — системным шрифтом. Как только нестандартный шрифт будет загружен, он заменит системный.
+
+Если браузер не поддерживает `font-display`, он следует поведению по умолчанию для загрузки шрифтов. Посмотреть, какие браузеры поддерживают `font-display`, можно [здесь](https://caniuse.com/#search=font-display).
+
+Поведение по умолчанию при загрузке шрифтов для популярных браузеров:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Браузер</strong></th>
+        <th><strong>Поведение по умолчанию, если шрифт не готов…</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>Пока нужный шрифт не готов, используется системный шрифт. Затем шрифт заменяется.</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>           Скрывает текст максимум на три секунды. Если по истечении этого времени шрифт не готов, используется           системный шрифт, пока нужный шрифт не загрузится. Затем шрифт заменяется.</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>           Скрывает текст максимум на три секунды. Если по истечении этого времени шрифт не готов, используется           системный шрифт, пока нужный шрифт не загрузится. Затем шрифт заменяется.</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>Скрывает текст, пока шрифт не будет готов.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Вариант № 2: не использовать нестандартные шрифты, пока они не загрузятся
+
+Приложив немного больше усилий, можно реализовать единообразное поведение во всех браузерах.
+
+Реализацию этого подхода можно разделить на три этапа:
+
+- Не использовать нестандартный шрифт при начальной загрузке страницы. В этом случае браузер сразу выводит текст системным шрифтом.
+- Определить завершение загрузки нестандартного шрифта. Это можно сделать парой строк кода на JavaScript — благодаря библиотеке [FontFaceObserver](https://github.com/bramstein/fontfaceobserver).
+- Обновить стиль страницы с использованием нестандартного шрифта.
+
+Чтобы реализовать такое поведение, понадобится кое-что подправить:
+
+- Изменить CSS-код так, чтобы при начальной загрузке страницы нестандартный шрифт не использовался.
+- Добавить на страницу скрипт, который определяет завершение загрузки нестандартного шрифта, а затем обновляет стиль страницы.
+
+{% Aside 'codelab' %} [Использование Font Face Observer для мгновенного показа текста](/codelab-avoid-invisible-text). {% endAside %}
+
+## Проверка
+
+Запустите Lighthouse, чтобы проверить, использует ли сайт `font-display: swap` для отображения текста:
+
+{% Instruction 'audit-performance', 'ol' %}
+
+Сайт должен проходить аудит **Показ текста во время загрузки веб-шрифтов** (Ensure text remains visible during webfont load).
diff --git a/src/site/content/ru/fast/browser-level-image-lazy-loading/index.md b/src/site/content/ru/fast/browser-level-image-lazy-loading/index.md
new file mode 100644
index 00000000000..c5086f7c8b4
--- /dev/null
+++ b/src/site/content/ru/fast/browser-level-image-lazy-loading/index.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: Отложенная загрузка изображений для веб-сайтов на уровне браузера
+subhead: Наконец-то появилась встроенная отложенная загрузка!
+authors:
+  - houssein
+  - addyosmani
+  - mathiasbynens
+date: 2019-08-06
+updated: 2020-07-16
+hero: image/admin/F6VE4QkpCsomiJilTFNG.png
+alt: Схематическое изображение телефона, на котором идет загрузка рисунка и ресурсов
+description: В этой статье рассказывается об атрибуте загрузки и о том, как его можно использовать, чтобы управлять загрузкой изображений.
+tags:
+  - blog
+  - performance
+feedback:
+  - api
+---
+
+Наконец-то появилась поддержка отложенной загрузки изображений для веб-сайтов на уровне браузера! В этом видео показана [демонстрация](https://mathiasbynens.be/demo/img-loading-lazy) функции:
+
+<figure data-size="full">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4" type="video/mp4">
+  </source></source></video></figure>
+
+Начиная с Chrome 76, можно использовать атрибут `loading` для отложенной загрузки изображений без необходимости писать собственный код отложенной загрузки или использовать отдельную библиотеку JavaScript. Давайте разберем подробнее.
+
+## Совместимость с браузером
+
+`<img loading=lazy>` поддерживается большинством популярных браузеров на базе Chromium (Chrome, Edge, Opera) и [Firefox](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/75#HTML). Реализация для WebKit (Safari) [находится на стадии разработки](https://bugs.webkit.org/show_bug.cgi?id=200764). На сайте [caniuse.com](https://caniuse.com/#feat=loading-lazy-attr) есть подробная информация о кросс-браузерной поддержке. Браузеры, не поддерживающие атрибут `loading`, просто игнорируют его без каких-либо побочных эффектов.
+
+## Зачем нужна отложенная загрузка на уровне браузера?
+
+По данным [Интернет-архива](https://httparchive.org/reports/page-weight), изображения являются наиболее востребованным типом ресурсов для большинства веб-сайтов и обычно занимают большую часть полосы пропускания. В 90-м процентиле сайты отправляют около 4,7 МБ изображений на настольные и мобильные устройства. Это очень много [картинок с котиками](https://en.wikipedia.org/wiki/Cats_and_the_Internet).
+
+В настоящее время есть два способа отложить загрузку скрытых изображений:
+
+- использование [API Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/);
+- использование [обработчиков событий](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way) `scroll`, `resize` или `orientationchange`.
+
+Любой из этих вариантов позволяет разработчикам добавить функциональность отложенной загрузки. Кроме того, многие разработчики создали сторонние библиотеки, предоставляющие слои абстракций, которые еще проще использовать. Однако если отложенная загрузка поддерживается непосредственно браузером, то необходимость во внешней библиотеке отпадает. Отложенная загрузка изображений на уровне браузера гарантирует, что эта функция будет работать, даже если JavaScript отключен на клиенте.
+
+## Атрибут `loading`
+
+Chrome уже умеет загружать изображения с разными приоритетами в зависимости от их расположения относительно области просмотра устройства. Изображения, расположенные ниже области просмотра, имеют более низкий приоритет загрузки, но всё равно загружаются как можно быстрее.
+
+В Chrome 76+ можно использовать атрибут `loading` чтобы полностью отложить загрузку скрытых изображений, которые можно получить с помощью прокрутки:
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+Атрибут `loading` поддерживает следующие значения:
+
+- `auto`: поведение браузера при отложенной загрузке по умолчанию, равносильно отсутствию атрибута;
+- `lazy`: загрузку ресурса отлаживается до тех пор, пока он не достигнет [расчетного расстояния](#distance-from-viewport-thresholds) от области просмотра;
+- `eager` : ресурс загружается немедленно, независимо от его расположения на странице.
+
+{% Aside 'caution' %} Хотя значение `auto` доступно в Chromium, оно не упоминается в [спецификации](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes) и может быть изменено. Мы рекомендуем не использовать его, пока оно не будет включено в спецификацию.{% endAside %}
+
+### Пороговые значения расстояния от области просмотра
+
+Все изображения, которые находятся в верхней части страницы, то есть доступны для немедленного просмотра без прокрутки, загружаются в обычном режиме. Изображения ниже области просмотра устройства подгружаются только тогда, когда пользователь прокручивает страницу почти до них.
+
+Реализация механизма отложенной загрузки в Chromium направлена на то, чтобы скрытые изображения загружались  до того, как пользователь докрутит страницу до них. Подгружая соседние изображения заранее, мы увеличиваем вероятность того, что они уже будут загружены до момента попадания в область просмотра.
+
+Пороговые значения в Chromium заданы более строго, чем в JavaScript-библиотеках  для отложенной загрузки изображений, чтобы соответствовать ожиданиям разработчиков.
+
+{% Aside %} Эксперименты, проведенные с использованием Chrome на Android, показали, что в сетях 4G 97,5% незагруженных изображений, расположенных под областью просмотра, были полностью загружены в течение 10 мс после попадания в область просмотра. Даже в медленных сетях 2G 92,6% изображений, расположенных под областью просмотра, были полностью загружены в течение 10 мс. Это означает, что отложенная загрузка на уровне браузера обеспечивает стабильную видимость элементов, которые попадают в область просмотра в результате прокрутки страницы. {% endAside %}
+
+Пороговое значение расстояния не является фиксированным и зависит от ряда факторов:
+
+- тип получаемого ресурса изображения;
+- использование [упрощенного режима](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) в Chrome для Android;
+- [эффективный тип подключения](https://googlechrome.github.io/samples/network-information/).
+
+Значения по умолчанию для различных типов эффективных соединений можно найти в [исходном коде Chromium](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad). Эти цифры и даже подход, при котором выборка выполняется только при достижении определенного расстояния от области просмотра, могут измениться в ближайшем будущем, поскольку команда Chrome совершенствует эвристику для определения момента начала загрузки.
+
+{% Aside %} В Chrome 77+ вы можете поэкспериментировать с различными пороговыми значениями, [изменяя тип сети](https://developer.chrome.com/docs/devtools/network/#throttle) в DevTools. Переопределите также эффективный тип подключения браузера с помощью флага `about://flags/#force-effective-connection-type`. {% endAside %}
+
+## Улучшенная экономия данных и пороговые значения расстояния от области просмотра
+
+По состоянию на июль 2020 года Chrome внес значительные улучшения в выравнивание пороговых значений расстояния до области просмотра при отложенной загрузке изображений, чтобы больше соответствовать ожиданиям разработчиков.
+
+При быстром подключении (например, 4G) мы уменьшили пороговое значение расстояния от области просмотра с `3000 пикселей` до `1250 пикселей`, а при более медленном подключении (например, 3G) изменили пороговое значение с `4000 пикселей` до `2500 пикселей`. Эти изменения позволяют добиться следующих двух улучшений:
+
+- `<img loading=lazy>` больше соответствует тому, что предлагают библиотеки отложенной загрузки JavaScript;
+- новые пороговые значения расстояния от области просмотра по-прежнему обеспечивают загрузку изображений к тому моменту, когда они попадают в область просмотра в результате прокрутки.
+
+Ниже приведено сравнение между старыми и новыми пороговыми значениями расстояния от области просмотра для одной из наших демонстраций при быстром соединении (4G):
+
+Сравнение старых и новых пороговых значений:
+
+<figure>{% Img src="image/admin/xSZMqpbioBRwRTnenK8f.png", alt="Новые улучшенные пороговые значения для отложенной загрузки изображений; пороговое расстояние от области просмотра для быстрых подключений снижено с 3000 пикселей до 1250 пикселей", width="800", height="460" %}</figure>
+
+Сравнение новых пороговых значений с LazySizes (популярной JavaScript-библиотекой для отложенной загрузки):
+
+<figure>{% Img src="image/admin/oHMFvflk9aesT7r0iJbx.png", alt="Загрузка изображений с новыми пороговыми значениями расстояния от области просмотра в Chrome занимает 90 КБ против 70 КБ с библиотекой  LazySizes  при одинаковых сетевых условиях", width="800", height="355" %}</figure>
+
+{% Aside %} Чтобы пользователи последних версий Chrome также получили преимущества от новых пороговых значений, мы бэкпортировали эти изменения для версий Chrome с 79 по  85 включительно. Учитывайте это, если решите сравнить экономию данных в старых и новых версиях Chrome. {% endAside %}
+
+Мы сотрудничаем с сообществом веб-стандартов, чтобы лучше согласовать подходы к пороговым значениям расстояния от области просмотра в разных браузерах.
+
+### Изображения должны включать атрибуты размеров
+
+Когда браузер загружает изображение, он не сразу узнает его размеры, если они не указаны явно. Чтобы браузер мог зарезервировать достаточно места на странице для изображений, рекомендуется, чтобы все теги `<img>` включали атрибуты `width` и `height`. Без указания размеров могут произойти [смещения макета](/cls), более заметные на страницах, которые загружаются дольше.
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+В качестве альтернативы укажите значения размеров непосредственно во встроенном стиле:
+
+```html
+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+```
+
+Метод установки размеров применяется к тегам `<img>` независимо от того, используется ли отложенная загрузка, но в этом случае полезность данного метода возрастает. Установка `width` и `height` также позволяет современным браузерам определять внутренний размер изображений.
+
+В большинстве сценариев отложенная загрузка изображений применяется, даже если размеры изображений не указаны, но есть несколько нестандартных ситуаций, о которых следует знать. Без задания `width` и `height` размеры изображения сначала равны 0×0 пикселей. Если у вас есть галерея таких изображений, браузер может решить, что все они изначально помещаются в область просмотра, так как практически не занимают места и не вытесняются за пределы экрана. В этом случае браузер определяет, что все они видны пользователю, и решает загрузить эти изображения.
+
+Кроме того, [задание размеров изображения снижает вероятность смещения макета](https://www.youtube.com/watch?v=4-d_SoCHeWE). Если у вас нет возможности указать размеры изображений, их отложенная загрузка может стать компромиссом между экономией сетевых ресурсов и потенциально большим риском смещения макета.
+
+Хотя отложенная загрузка в Chromium реализована таким образом, что изображения, вероятно, будут загружены, как только они станут видимыми, всё же существует небольшая вероятность того, что этого не произойдет. В этом случае отсутствие `width` и `height` на таких изображениях увеличивает их влияние на совокупное смещение макета.
+
+{% Aside %} Посмотрите эту [демонстрацию](https://mathiasbynens.be/demo/img-loading-lazy), чтобы увидеть, как атрибут `loading` работает со 100 изображениями. {% endAside %}
+
+Для изображений, определенных с помощью `<picture>`, также можно применять отложенную загрузку:
+
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
+  <img src="photo.jpg" loading="lazy">
+</picture>
+```
+
+Хотя браузер решает, какое изображение загружать из любого из элементов `<source>`, атрибут `loading` должен быть включен только в резервный элемент `<img>`.
+
+## Избегайте отложенной загрузки изображений, которые находятся в первой видимой области просмотра
+
+Вам следует избегать установки `loading=lazy` для любых изображений, которые находятся в первой видимой области просмотра.
+
+Рекомендуется добавлять `loading=lazy` только к изображениям, расположенным под областью просмотра, если это возможно. При безотложной загрузке изображения могут быть получены сразу, в то время как при отложенной загрузке браузеру необходимо узнать, где именно на странице расположено изображение, что зависит от наличия IntersectionObserver.
+
+{% Aside %} В Chromium влияние изображений в начальной области просмотра с атрибутом `loading=lazy` на метрику LCP (Скорость загрузки основного контента) довольно мало, с регрессией &lt;1% на 75-м и 99-м процентилях по сравнению с изображениями с безотложной загрузкой. {% endAside %}
+
+Как правило, любые изображения в области просмотра должны загружаться безотлагательно, используя настройки браузера по умолчанию. Вам не нужно указывать `loading=eager` для изображений из области просмотра.
+
+```html
+<!-- visible in the viewport -->
+<img src="product-1.jpg" alt="..." width="200" height="200">
+<img src="product-2.jpg" alt="..." width="200" height="200">
+<img src="product-3.jpg" alt="..." width="200" height="200">
+
+<!-- offscreen images -->
+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
+```
+
+## Отказоустойчивость
+
+Браузеры без поддержки атрибута `loading` будут игнорировать его наличие. Хотя эти браузеры не получат преимуществ отложенной загрузки, включение атрибута не окажет на них негативного влияния.
+
+## Часто задаваемые вопросы
+
+### Планируется ли автоматическая отложенная загрузка изображений в Chrome?
+
+Если в Chrome для Android включен [упрощенный режим](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html), то Chromium уже автоматически выполняет отложенную загрузку любых изображений, подпадающих под эту категорию. Это в первую очередь предназначено для пользователей, которые заботятся об экономии данных.
+
+### Можно ли изменить расстояния до изображения, при которых запускается загрузка?
+
+Эти значения жестко запрограммированы и не могут быть изменены через API. Однако они могут измениться в будущем, поскольку браузеры экспериментируют с разными пороговыми расстояниями и переменными.
+
+### Можно ли атрибут `loading` использовать для изображений, заданных через CSS-свойство background?
+
+Нет, в настоящее время его можно использовать только с тегами `<img>`.
+
+### Есть ли негативные аспекты отложенной загрузки изображений, которые находятся в пределах области просмотра устройства?
+
+Безопаснее избегать добавления `loading=lazy` в верхней части страницы, поскольку сканер предварительной загрузки в Chrome не будет предварительно загружать изображения с `loading=lazy`.
+
+### Как атрибут `loading` работает с изображениями, которые находятся в области просмотра, но не видны сразу (например, находятся за каруселью или скрыты для определенных размеров экрана с помощью CSS)?
+
+В отложенном режиме загружаются только изображения, которые находятся на [определенном расстоянии](#distance-from-viewport-thresholds) от нижней границы области просмотра устройства. Все изображения над областью просмотра, независимо от того, видны ли они в данный момент, загружаются в обычном режиме.
+
+### Что делать, если я уже использую стороннюю библиотеку или скрипт для отложенной загрузки изображений?
+
+Атрибут `loading` не должен влиять на код, который в отложенном режиме загружает данные, но важно учитывать некоторые важные моменты:
+
+1. Если сторонний загрузчик пытается загрузить изображения или фреймы раньше, чем их будет загружать Chrome в обычном режиме, то есть, на расстоянии, превышающем [пороговые значения расстояния от области просмотра](#distance-from-viewport-thresholds), их загрузка всё равно будет отсрочена и они загрузятся согласно стандартным правилам браузера.
+2. Если сторонний загрузчик использует меньшее расстояние для определения времени загрузки определенного изображения, чем браузер, то браузер будет загружать изображения в отложенном режиме согласно настройкам загрузчика.
+
+Одна из важных причин продолжить использовать стороннюю библиотеку параллельно с `loading="lazy"`заключается в предоставлении полизаполнения для браузеров, не поддерживающих данный атрибут.
+
+### Как работать с браузерами, которые еще не поддерживают отложенную загрузку?
+
+Создайте полизаполнение или используйте стороннюю библиотеку для отложенной загрузки изображений на сайт. Свойство `loading` можно использовать, чтобы определить, поддерживается ли эта функция в браузере:
+
+```js
+if ('loading' in HTMLImageElement.prototype) {
+  // supported in browser
+} else {
+  // fetch polyfill/third-party library
+}
+```
+
+Например, [lazysizes](https://github.com/aFarkas/lazysizes) — это популярная JavaScript-библиотека отложенной загрузки. Вы можете определить поддержку атрибута `loading`, чтобы загружать lazysizes в качестве резервной библиотеки только тогда, когда `loading` не поддерживается. Это работает следующим образом:
+
+- Замените `<img src>` на `<img data-src>`, чтобы избежать безотложной загрузки в неподдерживаемых браузерах. Если `loading` поддерживается, замените `data-src` на `src`.
+- Если `loading` не поддерживается, загрузите запасной вариант (lazysizes) и инициируйте его. Согласно документации по lazysizes, класс `lazyload` используется как способ указать lazysizes, какие изображения требуют отложенной загрузки.
+
+```html
+<!-- Let's load this in-viewport image normally -->
+<img src="hero.jpg" alt="…">
+
+<!-- Let's lazy-load the rest of these images -->
+<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
+<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
+
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script);
+  }
+</script>
+```
+
+Вот [демонстрация](https://lazy-loading.firebaseapp.com/lazy_loading_lib.html) этого паттерна. Запустите его в Firefox или Safari, чтобы увидеть резервный вариант в действии.
+
+{% Aside %} Библиотека lazysizes также предоставляет [плагин загрузки](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading), который использует отложенную загрузку на уровне браузера, когда она доступна, но при необходимости задействует функционал библиотеки. {% endAside %}
+
+### Поддерживается ли отложенная загрузка для тега iframe в Chrome?
+
+Значение `<iframe loading=lazy>` недавно стандартизировано и уже реализовано в Chromium. Это позволяет настроить отложенную загрузку iframe с помощью атрибута `loading`. Отдельная статья об отложенной загрузке iframe будет вскоре опубликована на web.dev.
+
+Атрибут `loading` работает для встроенных фреймов иначе, чем для изображений, так как в учет берется то, является ли iframe скрытым. (Скрытые iframe часто используются для аналитических или коммуникационных целей.) Chrome использует следующие критерии для определения того, является ли iframe скрытым:
+
+- ширина и высота iframe не более 4 пикселей;
+- применяются `display: none` или `visibility: hidden`;
+- iframe помещается за пределы экрана с использованием отрицательного позиционирования по оси X или Y.
+
+Если iframe соответствует любому из этих условий, Chrome считает его скрытым и в большинстве случаев не загружает его в отложенном режиме. *Не* скрытые iframe загружаются только тогда, когда они находятся в пределах [порогового расстояния от области просмотра](#distance-from-viewport-thresholds). Для встроенных фреймов, которые всё еще загружаются в режиме отложенной загрузки, отображается плейсхолдер.
+
+### Как отложенная загрузка на уровне браузера влияет на рекламу на веб-странице?
+
+Вся реклама, представленная в виде изображений или встроенных фреймов, также загружается в отложенном режиме.
+
+### Как обрабатываются изображения при печати веб-страницы?
+
+Существует [нерешенная проблема](https://bugs.chromium.org/p/chromium/issues/detail?id=875403), связанная с тем, что при печати страницы Chrome должен незамедлительно загрузить все изображения и встроенные фреймы.
+
+### Распознает ли Lighthouse отложенную загрузку на уровне браузера?
+
+В более ранних версиях Lighthouse по-прежнему подчеркивалось, что для страниц, использующих `loading=lazy` для изображений, требуется стратегия загрузки закадровых изображений. [Lighthouse 6.0](/lighthouse-whats-new-6.0/) и более новые версии лучше учитывают подходы к отложенной загрузке закадровых изображений, которые могут использовать разные пороговые значения, что позволяет пройти проверку [Defer offscreen images (Отложите загрузку закадровых изображений)](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/).
+
+## Заключение
+
+Включение поддержки отложенной загрузки изображений может значительно облегчить задачу повышения производительности веб-страниц.
+
+Заметили необычное поведение при включении этой функции в Chrome? [Сообщите об ошибке](https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C)!
diff --git a/src/site/content/ru/fast/codelab-preload-web-fonts/index.md b/src/site/content/ru/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..de7e4666509
--- /dev/null
+++ b/src/site/content/ru/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,57 @@
+---
+layout: codelab
+title: Предварительно загружайте веб-шрифты для повышения скорости загрузки
+authors:
+  - gmimani
+description: В этом codelab вы узнаете, как повысить производительность страницы путем предварительной загрузки веб-шрифтов.
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+Этот codelab демонстрирует, как предварительно загрузить веб-шрифты с помощью `rel="preload"`, чтобы удалить любые мигания нестилизованного текста (FOUT).
+
+## Измерение
+
+Прежде чем добавлять какие-либо оптимизации, сначала измерьте, как работает веб-сайт. {% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+В сгенерированном отчете Lighthouse последовательность выборки ресурсов показана в разделе **Maximum critical path latency (Максимальная задержка критического пути)**.
+
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="Веб-шрифты присутствуют в цепочке критических запросов.", width="704", height="198" %}
+
+В приведенной выше проверке веб-шрифты являются частью цепочки критических запросов и загружаются последними. [**Цепочка критических запросов**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/) представляет собой порядок выборки ресурсов браузером. В данном приложении веб-шрифты (Pacfico и Pacifico-Bold) определены с помощью правила [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) и являются последним ресурсом, получаемым браузером в цепочке критических запросов. Обычно веб-шрифты загружаются в отложенном режиме, а это означает, что они не загрузятся, пока не будут загружены критические ресурсы (CSS, JS).
+
+Вот последовательность ресурсов, загружаемых в приложении:
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="Веб-шрифты загружаются в отложенном режиме.", width="583", height="256" %}.
+
+## Предварительная загрузка веб-шрифтов
+
+Чтобы избежать FOUT, можно предварительно загрузить необходимые веб-шрифты. Добавьте элемент `Link` для этого приложения в начало документа:
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+Атрибуты `as="font" type="font/woff2"` сообщают браузеру, что нужно загрузить этот ресурс как шрифт, и помогают в определении приоритета очереди ресурсов.
+
+Атрибут `crossorigin` указывает, должен ли ресурс быть получен с помощью CORS-запроса, поскольку шрифт может быть из другого домена. Без этого атрибута предварительно загруженный шрифт будет игнорироваться браузером.
+
+Поскольку в заголовке страницы используется шрифт Pacifico-Bold, мы добавили тег предварительной загрузки, чтобы получить его еще быстрее. Предварительная загрузка шрифта Pacifico.woff2 не важна, поскольку он стилизует текст, расположенный ниже области просмотра.
+
+Перезагрузите приложение и снова запустите Lighthouse. Проверьте раздел **Maximum critical path latency (Максимальная задержка критического пути)**.
+
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="Веб-шрифт Pacifico-Bold предварительно загружен и удален из цепочки критических запросов", width="645", height="166" %}
+
+Обратите внимание, как `Pacifico-Bold.woff2` удаляется из цепочки критических запросов. Он загружается ранее в приложении.
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="Веб-шрифт Pacifico-Bold предварительно загружен", width="553", height="254" %}
+
+При предварительной загрузке браузер знает, что ему нужно загрузить этот файл раньше. Важно отметить, что при неправильном использовании предварительная загрузка может нанести вред производительности, делая ненужные запросы к ресурсам, которые не используются.
diff --git a/src/site/content/ru/fast/codelab-serve-images-webp/index.md b/src/site/content/ru/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..c38083494a5
--- /dev/null
+++ b/src/site/content/ru/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,126 @@
+---
+layout: codelab
+title: Создание изображений WebP при помощи командной строки
+authors:
+  - katiehempenius
+description: В этом интерактивном уроке вы узнаете о выдаче оптимизированных изображений с использованием WebP.
+date: 2018-11-05
+glitch: webp-cli
+related_post: serve-images-webp
+tags:
+  - performance
+---
+
+В интерактивном уроке уже установлен инструмент <a href="https://developers.google.com/speed/webp/docs/precompiled">webp</a> для командной строки, поэтому никаких подготовительных действий не требуется. Этот инструмент преобразует изображения из форматов JPG, PNG и TIFF в формат WebP.
+
+## Преобразование изображений в WebP
+
+{% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+1. Введите следующую команду:
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+Эта команда преобразует `images/flower1.jpg` с уровнем качества `50` (`0` — худшее, `100` — лучшее) и сохраняет его под именем `images/flower1.webp`.
+
+{% Aside %} Возможно, вам интересно, почему команда называется `cwebp`, а не `webp`. Дело в том, что для кодирования и декодирования WebP-изображений используются две разные команды: `cwebp` и `dwebp` соответственно. {% endAside %}
+
+После выполнения команды вы увидите в консоли примерно следующее:
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+Это означает, что изображение успешно преобразовано в WebP.
+
+Однако если выполнять команду `cwebp` для каждого изображения по отдельности, то преобразование большого числа изображений займет много времени. В таких случаях можно использовать скрипт.
+
+- Запустите в консоли следующий скрипт (не забудьте обратные кавычки):
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+Скрипт преобразует все файлы в каталоге `images/`, используя уровень качества `50`, и сохраняет их в том же каталоге под тем же именем, но с другим расширением.
+
+### ✔︎ Итог
+
+В результате у вас в каталоге `images/` должно быть 6 файлов:
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+Теперь мы можем обновить код данного Glitch, чтобы загружать WebP-изображения в браузерах, которые их поддерживают.
+
+## Добавление WebP-изображений при помощи тега `<picture>`
+
+Тег `<picture>` позволяет загружать WebP-изображения в новых браузерах, при этом сохраняя поддержку старых браузеров.
+
+- В файле `index.html` замените `<img src="images/flower1.jpg"/>` следующим HTML-кодом:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- Затем замените теги `<img>` на `<picture>` для файлов `flower2.jpg` и `flower3.png`.
+
+### ✔︎ Итог
+
+В результате теги `<picture>` в файле `index.html` должны выглядеть следующим образом:
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+Теперь вы можете воспользоваться Lighthouse, чтобы убедиться, что WebP-изображения добавлены на сайт надлежащим образом.
+
+## Проверка использования WebP при помощи Lighthouse
+
+При помощи проверки производительности **Serve images in next-gen formats** («Выдача изображений в форматах следующего поколения») в Lighthouse вы можете узнать, все ли изображения на вашем сайте используют современные форматы, такие как WebP.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. Убедитесь, что сайт успешно проходит проверку **Serve images in next-gen formats**.
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="Успешное прохождение проверки «Serve images in next-gen formats» в Lighthouse", width="701", height="651" %}
+
+Готово! Теперь ваш сайт использует изображения в формате WebP.
diff --git a/src/site/content/ru/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/ru/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..3b247bee7fa
--- /dev/null
+++ b/src/site/content/ru/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,75 @@
+---
+layout: codelab
+title: Отложенная загрузка изображений за пределами экрана при помощи lazysizes
+authors:
+  - katiehempenius
+description: В этом интерактивном уроке вы узнаете, как при помощи lazysizes загружать только изображения, находящиеся в текущей области просмотра.
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+Отложенная загрузка — это подход, при котором ресурсы загружаются не заранее, а только тогда, когда в них возникает необходимость. Это позволяет повысить производительность за счет уменьшения объема ресурсов, которые необходимо загрузить и обработать во время начальной загрузки страницы.
+
+Изображения, которые во время начальной загрузки страницы находятся за пределами экрана, являются идеальными кандидатами для применения этого метода. А главное, при помощи [lazysizes](https://github.com/aFarkas/lazysizes) реализовать эту стратегию очень просто.
+
+## Добавьте на страницу скрипт lazysizes
+
+{% Instruction 'remix' %}
+
+Файл `lazysizes.min.js` уже скачан и добавлен в данный проект Glitch. Чтобы подключить его к странице:
+
+- Добавьте в `index.html` следующий тег `<script>`:
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Images End -->
+</body>
+```
+
+{% Aside %} Файл [lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js) уже добавлен в проект, так что не нужно добавлять его дополнительно. Скрипт, который вы только что добавили, уже имеет к нему доступ. {% endAside %}
+
+По мере того как пользователь прокручивает страницу, lazysizes интеллектуально загружает изображения, отдавая приоритет тем изображениям, которые пользователь увидит в ближайшее время.
+
+## Укажите изображения для отложенной загрузки
+
+- Добавьте к изображениям, для которых следует использовать отложенную загрузку, класс `lazyload`, а также переименуйте атрибут `src` в `data-src`.
+
+Например, для `flower3.png` изменения будут выглядеть так:
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+В рамках данного примера попробуйте включить отложенную загрузку для `flower3.png`, `flower4.jpg` и `flower5.jpg`.
+
+{% Aside %} Возможно, вам интересно, зачем нужно переименовывать атрибут `src` в `data-src`. Причина в том, что если этого не сделать, то все изображения будут загружаться моментально, а не в режиме отложенной загрузки. Браузер не распознает атрибут `data-src`, поэтому не загружает изображение, встречая тег с таким атрибутом. В нашем случае это полезно, так как позволяет lazysizes управлять загрузкой изображений вместо браузера. {% endAside %}
+
+## Проверьте страницу в действии
+
+Вот и все! Чтобы увидеть эти изменения в действии, выполните следующие шаги:
+
+{% Instruction 'preview' %}
+
+- Откройте консоль и найдите в ней только что добавленные изображения. По мере прокрутки страницы их класс должен меняться с `lazyload` на `lazyloaded`.
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="отложенная загрузка изображений", width="428", height="252" %}
+
+- Следите за сетевой панелью, чтобы видеть, как при прокрутке страницы файлы изображений загружаются один за другим.
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="отложенная загрузка изображений", width="418", height="233" %}
+
+## Подтвердите результат с помощью Lighthouse
+
+Наконец, рекомендуется проверить внесенные изменения при помощи Lighthouse. Если вы забыли добавить отложенную загрузку каких-либо изображений за пределами экрана, проверка производительности Lighthouse «Defer offscreen images» («Откладывание изображений за пределами экрана») выявит такие изображения.
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. Убедитесь, что страница прошла проверку **Defer offscreen images**.
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="Прохождение проверки «Efficiently encode images» в Lighthouse", width="800", height="774" %}
+
+Готово! Вы добавили на свою страницу отложенную загрузку изображений.
diff --git a/src/site/content/ru/fast/defer-non-critical-css/index.md b/src/site/content/ru/fast/defer-non-critical-css/index.md
new file mode 100644
index 00000000000..2fc08eef2c6
--- /dev/null
+++ b/src/site/content/ru/fast/defer-non-critical-css/index.md
@@ -0,0 +1,119 @@
+---
+layout: post
+title: Откладывание некритичных CSS
+authors:
+  - demianrenzulli
+description: |2-
+
+  Как оптимизировать загрузку критичных CSS, откладывая некритичные
+
+  Путь отрисовки и ускорение FCP (First Contentful Paint).
+date: 2019-02-17
+updated: 2020-06-12
+tags:
+  - performance
+---
+
+CSS-файлы [блокируют отрисовку](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources), поскольку эти ресурсы должны загружаться и обрабатываться до того, как браузер отобразит страницу. Поэтому объемные файлы стилей значительно замедляют отрисовку страницы.
+
+В этом руководстве рассказывается, как оптимизировать [Critical Rendering Path](/critical-rendering-path/) (путь критичной отрисовки) и ускорить [First Contentful Paint (FCP)](/fcp/) (первая отрисовка контента), откладывая некритичные CSS.
+
+## Неоптимальная загрузка CSS
+
+В следующем примере показана гармошка с тремя скрытыми абзацами текста, каждый из которых оформлен с применением отдельного класса:
+
+{% Glitch { id: 'defer-css-unoptimized', path: 'index.html' } %}
+
+Страница запрашивает CSS-файл, который содержит восемь классов, но для отображения «видимого» контента нужны только некоторые из них.
+
+В рамках этого руководства мы оптимизируем страницу так, чтобы синхронно загружались только **критичные** стили, а остальные (например, применяемые к абзацам) загружались, не блокируя отрисовку.
+
+## Оценка производительности
+
+Запустите [Lighthouse](/discover-performance-opportunities-with-lighthouse/#run-lighthouse-from-chrome-devtools) для [этой страницы](https://defer-css-unoptimized.glitch.me/) и перейдите в раздел **Performance**.
+
+В отчете у метрики **First Contentful Paint** указано значение «1s» (1 секунда) и приведена рекомендация **Eliminate render-blocking resources** (уберите ресурсы, блокирующие отрисовку) с указанием на файл **style.css**:
+
+<figure>   {% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="Lighthouse report for unoptimized page, showing FCP of '1s' and 'Eliminate blocking resources' under 'Opportunities'", width="800", height="640" %}</figure>
+
+{% Aside %} CSS-файл в рамках этой демонстрации не очень большого размера. Если запросить CSS большего размера (обычное дело на реальных проектах) и Lighthouse обнаружит, что на странице как минимум 2048 байт CSS-правил, не использованных при отрисовке контента **видимой части страницы**, появится также рекомендация **Remove Unused CSS** (удалите неиспользуемые CSS). {% endAside %}
+
+Посмотрим, как именно такой CSS блокирует отрисовку:
+
+1. Откройте [эту страницу](https://defer-css-unoptimized.glitch.me/) в Chrome. {% Instruction 'devtools-performance', 'ol' %}
+2. На панели «Performance» (Производительность) нажмите кнопку **перезагрузки**.
+
+В полученной трассировке метка **FCP** размещена сразу после завершения загрузки CSS:
+
+<figure>{% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="Трассировка производительности в DevTools для неоптимизированной страницы. FCP начинается после загрузки CSS.", width="800", height="352" %}</figure>
+
+Это означает, что браузеру, прежде чем отрисовать первый пиксель на экране, необходимо дождаться загрузки и обработки всех CSS.
+
+## Оптимизация
+
+Чтобы оптимизировать страницу, надо знать, какие классы считаются критичными. Для этого используем [Coverage Tool](https://developer.chrome.com/docs/devtools/css/reference/#coverage) (инструмент «Покрытие»):
+
+1. В DevTools откройте [командное меню](https://developer.chrome.com/docs/devtools/command-menu/), нажав `Control+Shift+P` или `Command+Shift+P` (Mac).
+2. Введите «coverage» (область действия) и выберите **Show Coverage** (Показать область действия).
+3. Нажмите кнопку **перезагрузки** — страница будет обновлена и начнется сбор данных.
+
+<figure>   {% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="Покрытие для CSS-файла. Показано, что не используются 55,9 % байтов.", width="800", height="82" %}</figure>
+
+Дважды щелкните отчет — будут показаны классы, выделенные двумя цветами:
+
+- Зеленый (**критичные**): классы, необходимые браузеру для отрисовки видимого контента (например, заголовка, подзаголовка и кнопок-гармошек).
+- Красный (**некритичные**): стили, применяемые к контенту, который отображается не сразу (например, абзацы внутри гармошек).
+
+Опираясь на эту информацию, оптимизируем CSS так, чтобы браузер начинал обрабатывать критичные стили сразу после загрузки страницы, а некритичные откладывал на потом:
+
+- Извлеките определения «зеленых» классов и поместите их в блок `<style>` в элементе «head» страницы:
+
+```html
+<style type="text/css">
+.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
+</style>
+```
+
+- Затем задайте асинхронную загрузку остальных классов, применив следующий шаблон:
+
+```html
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="styles.css"></noscript>
+```
+
+Это не стандартный способ загрузки CSS, и работает он так:
+
+- `link rel="preload" as="style"` запрашивает таблицу стилей асинхронным образом. Подробнее о `preload` смотрите в [Руководстве по предварительной загрузке критичных объектов](/preload-critical-assets).
+- Атрибут `onload` для `link` позволяет обрабатывать CSS после завершения загрузки.
+- Указывая значение «null» для обработчика <code>onload</code> после его использования, мы позволяем некоторым браузерам избежать его повторного вызова обработчика при переключении атрибута «rel».
+- Ссылка на таблицу стилей внутри элемента `noscript` — резервный вариант для браузеров, которые не выполняют JavaScript.
+
+{% Aside %} Здесь для оптимизации мы используем базовый код. На реальных проектах рекомендуется использовать функции вроде [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md), которые могут инкапсулировать это поведение и учитывать особенности разных браузеров. {% endAside %}
+
+[Полученная страница](https://defer-css-optimized.glitch.me/) выглядит так же, как и предыдущая версия, но при этом большинство стилей на ней загружаются асинхронно. В HTML-файле встроенные стили и асинхронный запрос к CSS-файлу выглядят следующим образом:
+
+<!-- Copy and Paste Me -->
+
+{% Glitch { id: 'defer-css-optimized', path: 'index.html', previewSize: 0 } %}
+
+## Мониторинг
+
+С помощью DevTools запустите трассировку **Performance** (Производительность) на уже [оптимизированной странице](https://defer-css-optimized.glitch.me/).
+
+Теперь метка **FCP** появляется перед тем, как страница запрашивает CSS — то есть, браузеру не приходится ждать загрузки стилей, чтобы начать отрисовку:
+
+<figure>   {% Img src="image/admin/0mVq3q760y37JSn2MmCP.png", alt="Трассировка производительности DevTools для оптимизированной страницы. FCP начинается до загрузки CSS.", width="800", height="389" %}</figure>
+
+Наконец, запустим Lighthouse для оптимизированной страницы.
+
+В отчете видно, что время FCP страницы снизилось на **0,2 с** — то есть, на целых 20 %:
+
+<figure>   {% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="Отчет Lighthouse. Показано значение FCP, равное «0.8 s».", width="800", height="324" %}</figure>
+
+Подсказка **Eliminate render-blocking resources** из раздела **Opportunities** (Варианты оптимизации) перешла в **Passed Audits** (Пройденные проверки):
+
+<figure>   {% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="Отчет Lighthouse. Пункт «Eliminate blocing resources» показан в разделе «Passed Audits».", width="800", height="237" %}</figure>
+
+## Дальнейшие действия и дополнительные материалы
+
+В этом руководстве мы разобрались, как отложить некритичные CSS. Для этого мы вручную извлекли неиспользуемый код на странице. Дополнительно можете ознакомиться с [руководством по извлечению критичных CSS](/extract-critical-css/): в нем рассмотрены популярные инструменты для извлечения критичных CSS и есть демонстрационное [практическое задание](/codelab-extract-and-inline-critical-css/).
diff --git a/src/site/content/ru/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/ru/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..e598b45ff8f
--- /dev/null
+++ b/src/site/content/ru/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: Эффективная загрузка стороннего кода JavaScript
+subhead: Избегайте распространенных ошибок, связанных с использованием сторонних скриптов, чтобы уменьшить время загрузки и повысить удобство для пользователей.
+authors:
+  - mihajlija
+date: 2019-08-14
+description: Узнайте, как избежать распространенных ошибок, связанных с использованием сторонних скриптов, чтобы уменьшить время загрузки и повысить удобство для пользователей.
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: Вид с воздуха на грузовые контейнеры.
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+Если сторонний скрипт [замедляет](/third-party-javascript/) загрузку страницы, можно повысить ее производительность двумя указанными ниже способами.
+
+- Удалить скрипт, если он не приносит явную пользу сайту.
+
+- Оптимизировать процесс загрузки.
+
+В этой публикации рассказывается, как оптимизировать процесс загрузки сторонних скриптов с помощью указанных ниже методов.
+
+1. Использование атрибутов `async` и `defer` в тегах `<script>`
+
+2. Заблаговременное создание подключений к требуемым источникам
+
+3. Отложенная загрузка
+
+4. Оптимизация передачи сторонних скриптов
+
+## Использование атрибутов `async` и `defer`
+
+Так как [синхронные скрипты](/third-party-javascript/) задерживают создание DOM и рендеринг, следует всегда загружать сторонние скрипты асинхронно за исключением случаев, когда нужно запускать скрипт до рендеринга страницы.
+
+Атрибуты `async` и `defer` сообщают браузеру, что он может продолжить синтаксический анализ HTML во время загрузки скрипта в фоновом режиме и выполнить этот скрипт по окончании его загрузки. Таким образом, загрузка скрипта не будет мешать создавать модель DOM и выполнять рендеринг страницы. В результате можно будет отобразить страницу для пользователя еще до завершения загрузки всех скриптов.
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+Разница между атрибутами `async` и `defer` появляется тогда, когда дело доходит до выполнения скриптов.
+
+### `async`
+
+Скрипты с атрибутом `async` выполняются при первой возможности после завершения их загрузки и до появления события [load](https://developer.mozilla.org/docs/Web/Events/load) окна. Соответственно, возможно (и вероятно), скрипты с атрибутом `async` не будут выполняться в том порядке, в котором они появляются в HTML. Это также означает, что они могут прервать процесс создания DOM, если их загрузка будет завершена во время работы средства синтаксического анализа.
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="Схема, на которой скрипт с атрибутом async блокирует работу средства синтаксического анализа", width="800", height="252" %}
+
+### `defer`
+
+Скрипты с атрибутом `defer` выполняются после полного завершения синтаксического анализа HTML, но до появления события [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded). При использовании атрибута `defer` скрипты будут гарантированно выполняться в том порядке, в котором они появляются в HTML, и не будут блокировать работу средства синтаксического анализа.
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="Схема потока средства синтаксического анализа со скриптом с атрибутом defer", width="800", height="253" %}
+
+- Используйте атрибут `async`, если важно, чтобы скрипт выполнялся на ранних этапах процесса загрузки.
+
+- Используйте атрибут `defer` для менее важных ресурсов. Например, для видеоплеера в части страницы, расположенной за пределами экрана.
+
+Используя эти атрибуты, можно значительно ускорить загрузку страницы. Например, [недавно на веб-сайте Telegraph стали отложенными все скрипты](https://medium.com/p/a0a1000be5#4123), в том числе связанные с рекламными объявлениями и аналитикой, после чего время загрузки рекламных объявлений уменьшилось в среднем на четыре секунды.
+
+{% Aside %} Скрипты аналитики обычно загружаются на ранних этапах, поэтому вы не пропустите ценные аналитические данные. К счастью, существуют [шаблоны для отложенной инициализации аналитики](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/), позволяющие сохранять данные на ранних этапах загрузки страницы. {% endAside %}
+
+## Создание заблаговременных подключений к необходимым источникам
+
+Вы можете сэкономить 100–500 мс, [заблаговременно создавая подключения](/preconnect-and-dns-prefetch/) к важным сторонним источникам.
+
+Здесь вам могут помочь два указанных ниже типа атрибута [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link).
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+Атрибут `<link rel="preconnect">` сообщает браузеру, что страница намеревается создать подключение к другому источнику и что нужно начать этот процесс как можно скорее. При создании запроса на получение ресурса из предварительно подключенного источника загрузка начинается немедленно.
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %} Предварительное подключение следует выполнять только к критически важным доменам, которые потребуется использовать в ближайшее время, потому что браузер закрывает любое подключение, которое не используется в течение 10 секунд. Ненужные предварительные подключения могут замедлять получение других важных ресурсов, поэтому ограничьте количество предварительно подключенных доменов и [проверьте, какое влияние оказывают предварительные подключения](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/). {% endAside %}
+
+### `dns-prefetch`
+
+Атрибут `<link rel="dns-prefetch>` выполняет небольшую часть действий, выполняемых атрибутом `<link rel="preconnect">`. При создании подключения выполняется поиск DNS и подтверждение TCP, а для безопасных источников — согласование TLS. Атрибут `dns-prefetch` сообщает браузеру, что нужно только сопоставлять DNS определенного домена до совершения явного вызова к нему.
+
+Атрибут `preconnect` лучше всего использовать только для самых важных подключений; для менее важных сторонних доменов используйте атрибут `<link rel=dns-prefetch>`.
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[Браузеры поддерживают атрибут `dns-prefetch`](https://caniuse.com/#search=dns-prefetch) немного по-другому, чем [атрибут `preconnect`](https://caniuse.com/#search=preconnect), поэтому атрибут `dns-prefetch` можно использовать в качестве резервного варианта для браузеров, которые не поддерживают атрибут `preconnect`. Для безопасной реализации этого подхода используйте отдельные теги ссылок:
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## Отложенная загрузка сторонних ресурсов
+
+Если внедренные сторонние ресурсы плохо разработаны, они могут значительно снижать скорость загрузки страниц. Если они не являются критически важными или находятся за пределами экрана (то есть если пользователям нужно прокрутить страницу для их просмотра), отложенная загрузка — хороший способ повысить скорость работы страницы и улучшить метрики отображения содержимого. Таким образом можно повысить удобство для пользователей, так как они будут быстрее получать содержимое главной страницы.
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="Схема веб-страницы, отображаемой на мобильном устройстве, с прокручиваемым содержимым, выходящим за пределы экрана. Содержимое, расположенное за нижним краем экрана, не отображается, так как оно еще не загружено.", width="366", height="438" %}</figure>
+
+Один из эффективных методов — отложенная загрузка стороннего контента после загрузки содержимого главной страницы. Этот метод хорошо подходит для рекламных объявлений.
+
+Рекламные объявления — важный источник дохода для многих сайтов, но пользователи приходят за контентом. За счет отложенной загрузки рекламных объявлений и более быстрой доставки основного контента вы можете увеличить общий процент просмотра объявления. Например, сайт MediaVine перешел на [отложенную загрузку рекламных объявлений](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/), после чего скорость загрузки страниц сайта увеличилась на 200%. В [официальной документации](https://support.google.com/dfp_premium/answer/4578089#lazyloading) DoubleClick есть руководство по отложенной загрузке объявлений.
+
+Альтернативный метод — загружать сторонний контент только тогда, когда пользователи прокручивают страницу вниз до соответствующего раздела.
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/) — это API браузера, который эффективно определяет, когда элемент входит в окно просмотра браузера и выходит из него. Его можно использовать для реализации этого метода. [lazysizes](/use-lazysizes-to-lazyload-images/) — это популярная библиотека JavaScript для отложенной загрузки изображений и элементов [`iframe`](http://afarkas.github.io/lazysizes/#examples). Она поддерживает внедренные элементы YouTube и [виджеты](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks). В ней также имеется [дополнительная поддержка](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js) API IntersectionObserver.
+
+{% Aside 'caution' %} Будьте осторожны при отложенной загрузке ресурсов с помощью JavaScript. Если не удается загрузить JavaScript, например из-за нестабильной работы сети, ваши ресурсы вообще не загрузятся. {% endAside %}
+
+Использование атрибута [`loading` для отложенной загрузки изображений и элементов iframe](/browser-level-image-lazy-loading/) — отличная альтернатива методам с использованием JavaScript, и недавно этот атрибут стал доступен в Chrome 76.
+
+## Оптимизация передачи сторонних скриптов
+
+### Размещение скриптов в сторонних CDN
+
+Сторонние поставщики часто предоставляют URL-адреса размещаемых у них файлов JavaScript (обычно они размещены в [сетях доставки контента [CDN]](https://en.wikipedia.org/wiki/Content_delivery_network)). Преимущество такого подхода заключается в том, что вы можете быстро начать использовать скрипты — достаточно скопировать и вставить URL-адрес. При этом у вас не будет дополнительных затрат на обслуживание. Сторонний поставщик выполняет настройку сервера и обновляет скрипты.
+
+Но так как скрипты не находятся в том же источнике, что и остальные ваши ресурсы, для загрузки файлов из общедоступных CDN требуются затраты на передачу данных по сети. Браузеру необходимо выполнить поиск в DNS, создать подключение HTTP и (при использовании защищенных источников) выполнить подтверждение SSL для сервера поставщика.
+
+Когда вы используете файлы со сторонних серверов, вы можете контролировать кеширование только в редких случаях. Использование чужой стратегии кэширования может привести к слишком частому повторному получению скриптов по сети.
+
+### Размещение сторонних скриптов на собственном ресурсе
+
+Разместив сторонние скрипты на собственном ресурсе, вы получите больший контроль над процессом их загрузки. В этом случае вам будут доступны указанные ниже преимущества.
+
+- Уменьшение времени поиска DNS и кругового пути.
+- Улучшение [HTTP-кэширования](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) заголовков.
+- Использование [операций push сервера HTTP/2](/performance-http2/).
+
+Например, веб-сайту Casper удалось [уменьшить время загрузки на 1,7 секунды](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec), разместив скрипт A/B-тестирования на собственном ресурсе.
+
+Тем не менее у размещения скриптов на собственных ресурсах есть один большой недостаток: скрипты могут устаревать и не будут получать автоматические обновления (при изменении API) или исправления для системы безопасности.
+
+{% Aside 'caution' %}
+
+При ручном обновлении скриптов может возникнуть много накладных расходов в рамках процесса разработки. Кроме того, вы можете пропустить важные обновления. Если вы не используете хостинг CDN для передачи всех ресурсов, вам не будет доступно [кэширование на периферии](https://www.cloudflare.com/learning/cdn/glossary/edge-server/) и потребуется оптимизировать функцию сжатия на сервере. {% endAside%}
+
+### Использование служебных сценариев для кеширования скриптов со сторонних серверов
+
+Альтернатива размещению скриптов на собственных ресурсах, которая позволяет лучше управлять кешированием и при этом пользоваться преимуществами сторонних CDN, — [использование служебных сценариев для кэширования скриптов со сторонних серверов](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations). Вы сможете управлять периодичностью повторной загрузки скриптов из сети и создать стратегию загрузки, с помощью которой можно будет ограничивать запросы к несущественным сторонним ресурсам до тех пор, пока страница не достигнет ключевого для пользователя момента. В этом случае можно в некоторой степени уменьшить расходы на передачу данных по сети, создавая заблаговременные подключения с использованием атрибута `preconnect`.
diff --git a/src/site/content/ru/fast/extract-critical-css/index.md b/src/site/content/ru/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..a1ca092ebb5
--- /dev/null
+++ b/src/site/content/ru/fast/extract-critical-css/index.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: Извлечение критического CSS-кода
+subhead: Узнайте, как улучшить время рендеринга благодаря извлечению критического CSS-кода.
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: Фото гаечных ключей и отверток, разложенных на поверхности.
+description: Узнайте, как улучшить время рендеринга благодаря извлечению критического CSS-кода, а также как выбрать наилучший инструмент для своего проекта.
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+CSS-файлы — это ресурс, блокирующий рендеринг: браузер должен загрузить и обработать их, прежде чем сможет отобразить страницу. Если загрузка CSS-файлов занимает много времени из-за их большого размера или плохого качества соединения, время рендеринга веб-страницы может существенно увеличиться.
+
+{% Aside 'key-term' %} Критический CSS-код — это методика, при использовании которой CSS-код, необходимый для отображения изначально видимой области, извлекается, чтобы позволить как можно быстрее отобразить пользователю контент. {% endAside %}
+
+<figure> {% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="Иллюстрация ноутбука и мобильного устройства с веб-страницей, выходящей за пределы экрана", width="800", height="469", class="" %}</figure>
+
+{% Aside 'note' %} Изначально видимая область — это область, которую пользователь видит сразу после загрузки страницы, не совершая прокрутку. Изначально видимая область не имеет универсально определенной высоты в пикселях, так как существует множество устройств с различным размером экрана. {% endAside %}
+
+Извлечение стилей и встраивание их в раздел `<head>` HTML-документа позволяет загружать их, не совершая дополнительных запросов. Остальная часть CSS-кода может быть загружена в асинхронном режиме.
+
+<figure> {% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="HTML-файл с критическим CSS-кодом, встроенным в раздел head", width="800", height="325" %} <figcaption> Встраивание критического CSS-кода </figcaption></figure>
+
+Улучшение времени рендеринга может существенно повлиять на [воспринимаемую производительность](/rail/#focus-on-the-user), особенно при плохом качестве соединения. Для мобильных сетей характерны высокие задержки независимо от пропускной способности.
+
+<figure> {% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="Покадровое сравнение загрузки через 3G-соединение страницы с CSS-кодом, блокирующим рендеринг (сверху), и той же страницы, но со встроенным критическим CSS-кодом (снизу). В верхней последовательности контент начинает отображаться только после шести пустых кадров. В нижней последовательности осмысленный контент отображается уже в первом кадре.", width="800", height="363" %} <figcaption> Сравнение загрузки через 3G-соединение страницы с CSS-кодом, блокирующим рендеринг (сверху), и той же страницы, но со встроенным критическим CSS-кодом (снизу) </figcaption></figure>
+
+Если у вас плохой показатель [первой отрисовки контента (FCP)](/fcp/) и в отчете Lighthouse показывается рекомендация «Eliminate render-blocking resource» («Устраните ресурсы, блокирующие рендеринг»), вам стоит попробовать методику критического CSS-кода.
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="Проверка Lighthouse с рекомендациями «Eliminate render-blocking resource» или «Defer unused CSS»", width="743", height="449" %}
+
+{% Aside 'gotchas' %} Помните, что встраивание на страницу большого объема CSS-кода замедляет загрузку остальной части HTML-документа. Нельзя сделать приоритетным весь контент сразу. Кроме того, встраивание кода чревато тем, что браузер не сможет кешировать CSS для дальнейшего использования при загрузке страниц, так что не следует злоупотреблять им. {% endAside %}
+
+<p id="14KB">Чтобы минимизировать число запросов при первом рендеринге, старайтесь, чтобы размер контента в изначально видимой области не превышал <strong>14 КБ</strong> (в сжатом виде).</p>
+
+{% Aside 'note' %} Новые [TCP](https://hpbn.co/building-blocks-of-tcp/)-соединения не могут сразу же использовать всю доступную полосу пропускания между клиентом и сервером; соединение происходит с [медленным стартом](https://hpbn.co/building-blocks-of-tcp/#slow-start), чтобы избежать перегрузки соединения чрезмерно большим объемом данных. При таком подходе сервер начинает передачу с небольшого объема данных и, если данные достигают клиента в идеальном состоянии, удваивает объем при следующей отправке. Большинство серверов могут отправить при первой передаче не больше 10 пакетов или примерно 14 КБ. {% endAside %}
+
+Влияние этого метода на производительность зависит от конкретного типа сайта. Как правило, чем больше на сайте CSS-кода, тем более серьезного эффекта можно добиться при помощи встраиваемого CSS-кода.
+
+## Обзор инструментов
+
+Существует несколько отличных инструментов, которые автоматически определяют критический CSS-код на странице. Это хорошая новость, поскольку вручную это делать было бы слишком утомительно. Для определения стилей, распространяющихся на каждый элемент в области просмотра, требуется анализ всей структуры DOM.
+
+### Critical
+
+[Critical](https://github.com/addyosmani/critical) извлекает, минифицирует и встраивает CSS-код, относящийся к изначальной видимой области. Он доступен в виде [модуля npm](https://www.npmjs.com/package/critical). Его можно использовать с Gulp (напрямую) или с Grunt (как [плагин](https://github.com/bezoerb/grunt-critical)); кроме того, есть и [плагин webpack](https://github.com/anthonygore/html-critical-webpack-plugin).
+
+Этот простой инструмент позволяет сэкономить массу усилий. Вам даже не нужно указывать таблицы стилей: Critical автоматически их обнаружит. Он также поддерживает извлечение критического CSS-кода для различных разрешений экрана.
+
+### criticalCSS
+
+[CriticalCSS](https://github.com/filamentgroup/criticalCSS) — еще один [npm-модуль](https://www.npmjs.com/package/criticalcss) для извлечения CSS, относящегося к изначальной видимой области. Он также доступен в виде инструмента командной строки.
+
+Он не поддерживает встраивание и минификацию, однако позволяет принудительно включать правила, не являющиеся частью критического CSS-кода, и дает более тонкий контроль над включением деклараций `@font-face`.
+
+### Penthouse
+
+[Penthouse](https://github.com/pocketjoso/penthouse) — хороший выбор, если сайт или приложение используют большое количество стилей или если стили динамически внедряются в DOM (как часто бывает в приложениях Angular). Он основан на [Puppeteer](https://github.com/GoogleChrome/puppeteer), и у него есть [онлайн-версия](https://jonassebastianohlsson.com/criticalpathcssgenerator/).
+
+Penthouse не определяет таблицы стилей автоматически; файлы HTML и CSS, для которых требуется создать критический CSS-код, необходимо указывать вручную. Плюс инструмента в том, что он хорошо справляется с параллельным выполнением нескольких задач.
diff --git a/src/site/content/ru/fast/image-cdns/index.md b/src/site/content/ru/fast/image-cdns/index.md
new file mode 100644
index 00000000000..8c01e0835be
--- /dev/null
+++ b/src/site/content/ru/fast/image-cdns/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: Оптимизация изображений при помощи специализированных CDN
+authors:
+  - katiehempenius
+description: CDN для изображений отлично справляются с их оптимизацией. Переход на CDN для изображений может сократить размер изображений в байтах на 40–80%.
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## Зачем использовать CDN для изображений?
+
+Сети доставки контента (CDN) для изображений отлично справляются с их оптимизацией. Переход на CDN для изображений может сократить размер изображений в байтах [на 40–80%](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s). Теоретически можно достичь тех же результатов, используя только скрипты сборки, но это редко удается на практике.
+
+## Что такое CDN для изображений?
+
+CDN для изображений предназначены специально для их преобразования, оптимизации и доставки. Можно также рассматривать их как API для доступа к изображениям, используемым на вашем сайте, и выполнения над ними различных операций. URL-адрес, используемый для загрузки изображения из CDN, не только указывает на конкретное изображение, но и содержит такие параметры, как размер, формат и качество. Таким образом можно с легкостью создавать варианты изображений для различных сценариев использования.
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="Обмен запросами и ответами между клиентом и CDN для изображений. При помощи параметров, таких как размер и формат, можно запрашивать разные варианты одного изображения.", width="800", height="408" %} <figcaption> Примеры преобразований, которые могут выполнять CDN для изображений в соответствии с параметрами, указанными в URL-адресе. </figcaption></figure>
+
+От скриптов, оптимизирующих изображения на этапе сборки, CDN для изображений отличаются тем, что генерируют новые версии изображений по мере необходимости. Поэтому CDN лучше, чем скрипты сборки, подходят для создания изображений с высоким уровнем персонализации для каждого отдельного клиента.
+
+## Указание параметров оптимизации в URL-адресах, используемых при обращении к CDN для изображений
+
+В URL-адресах, используемых сетями CDN для изображений, указывается важная информация об изображении, а также о преобразованиях и оптимизациях, которые требуется выполнить. Формат URL-адресов зависит от конкретной сети CDN, но общие принципы у них схожие. Давайте рассмотрим некоторые из наиболее распространенных функций.
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="URL-адреса изображений обычно содержат следующие компоненты: источник, изображение, ключ безопасности и список преобразований.", width="800", height="127" %}</figure>
+
+### Источник
+
+CDN для изображений может размещаться как на вашем собственном домене, так и на домене самой сети. Сторонние CDN для изображений обычно предоставляют платную возможность использовать собственный домен. Использование собственного домена упрощает возможный переход на другую сеть CDN для изображений, поскольку URL-адреса при этом останутся без изменений.
+
+В примере выше используется не собственный домен сайта, а домен, принадлежащий CDN («example-cdn.com»), с персонализированным поддоменом.
+
+### Изображение
+
+CDN для изображений, как правило, поддерживают автоматическую загрузку необходимых изображений из исходного местоположения. Для этого в URL-адресе изображения, генерируемого CDN, обычно указывается полная ссылка на *исходное изображение*. Например, URL-адрес может выглядеть следующим образом: `https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`. При открытии этого URL-адреса будет загружено и оптимизировано изображение по адресу `https://flowers.com/daisy.jpg`.
+
+Еще один распространенный способ загрузки изображений в CDN — это их отправка в API CDN при помощи HTTP-запроса POST.
+
+### Ключ безопасности
+
+Ключ безопасности нужен для того, чтобы посторонние люди не могли генерировать новые версии ваших изображений. Если эта функция включена, для каждой новой версии изображения потребуется уникальный ключ. Пользователь, изменивший параметры URL-адреса изображения, но не указавший действительный ключ безопасности, не сможет сгенерировать новую версию. За генерацию и отслеживание ключей безопасности отвечает сама сеть CDN для изображений.
+
+### Преобразования
+
+CDN для изображений предоставляют десятки, а иногда и сотни операций преобразования изображений. Список операций указывается в строке URL-адреса, и указать их можно неограниченное количество. В контексте оптимизации веб-страниц наиболее важные операции — это изменение размера, плотности пикселей, формата и степени сжатия. Именно за счет этих операций переход на CDN позволяет существенно сократить размер изображений.
+
+Как правило, существует некий оптимальный набор параметров оптимизации, поэтому некоторые CDN могут выполнять такие преобразования в «автоматическом» режиме. Например, вместо того чтобы явно указывать формат WebP, можно позволить CDN автоматически выбирать оптимальный формат для выдачи. При выборе оптимальных параметров оптимизации CDN может руководствоваться данными из следующих источников:
+
+- [подсказки клиента](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/) (такие, как ширина области просмотра, DPR и ширина изображения);
+- заголовок [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data);
+- заголовок запроса [User-Agent](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent);
+- [Network Information API](https://developer.mozilla.org/docs/Web/API/Network_Information_API).
+
+К примеру, пользователям Edge изображения могут выдаваться в формате JPEG XR, пользователям Chrome — в WebP, а пользователям устаревших браузеров — в JPEG.  Автоматическая настройка популярна, так как позволяет использовать при оптимизации изображений все многочисленные наработки, накопленные сетью CDN, и при этом не требует обновлять код, когда сеть запускает поддержку новых технологий.
+
+## Типы CDN для изображений
+
+CDN для изображений можно разделить на две категории: самостоятельно размещаемые и сторонние.
+
+### Самостоятельно размещаемые CDN для изображений
+
+Самостоятельно размещаемые CDN могут быть хорошим решением для сайтов с техническим персоналом, который в состоянии поддерживать собственную инфраструктуру.
+
+На сегодняшний день единственное решение, позволяющее самостоятельно разместить CDN для изображений, — это [Thumbor](https://github.com/thumbor/thumbor). Thumbor бесплатен и имеет открытый исходный код, но в целом менее функционален, чем большинство коммерческих CDN, а его документация местами неполная. В число сайтов, использующих Thumbor, входят [Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor), [Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87) и [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/). Инструкции по его настройке см. в статье [Как установить CDN для изображений Thumbor](/install-thumbor).
+
+### Сторонние CDN для изображений
+
+Сторонние CDN для изображений предоставляют функции CDN в качестве услуги. Подобно облачным провайдерам, предоставляющим за абонентскую плату серверы и другую инфраструктуру, CDN для изображений предоставляют услуги оптимизации и доставки изображений. Поскольку за реализацию технических аспектов отвечает сама сеть CDN, начало работы является несложным и занимает 10–15 минут, хотя полный перенос крупного сайта может занять гораздо дольше. Сторонние CDN для изображений, как правило, предлагают тарифы, рассчитанные на различные уровни нагрузки, а у большинства также доступен бесплатный тариф или пробный период, который позволит вам ознакомиться с продуктом.
+
+## Выбор CDN для изображений
+
+Существует множество хороших реализаций CDN для изображений. Некоторые из них более функциональны, но любая из них поможет вам сократить размер изображений в байтах и тем самым ускорить загрузку страниц. Помимо функциональности, при выборе CDN для изображений следует учитывать стоимость, качество поддержки и документации, а также простоту настройки или перенесения сайта.
+
+Кроме того, прежде чем сделать выбор, вы можете попробовать различные решения в работе. Ниже приведены ссылки на проекты Codelabs с инструкциями по быстрой настройке различных CDN для изображений.
diff --git a/src/site/content/ru/fast/index.md b/src/site/content/ru/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/ru/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/ru/fast/lazy-loading-images/index.md b/src/site/content/ru/fast/lazy-loading-images/index.md
new file mode 100644
index 00000000000..1b1cf00d6f0
--- /dev/null
+++ b/src/site/content/ru/fast/lazy-loading-images/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: Отложенная загрузка изображений
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2022-08-11
+description: В этой статье объясняется отложенная загрузка и приводятся доступные варианты ее реализации.
+tags:
+  - performance
+  - images
+feedback:
+  - api
+---
+
+Изображения могут появляться на веб-странице вследствие встраивания в HTML-код с помощью тега `<img>` или как фоновые изображения CSS. В этом статье вы узнаете, как отложить загрузку обоих типов изображений.
+
+## Встроенные изображения {: #images-inline }
+
+Наиболее распространенные кандидаты на отложенную загрузку — это изображения, используемые в элементах `<img>`. Для встроенных изображений имеется три варианта отложенной загрузки, которые можно сочетать между собой для лучшей кроссбраузерной совместимости:
+
+- [Использование отложенной загрузки на уровне браузера](#images-inline-browser-level).
+- [Использование Intersection Observer](#images-inline-intersection-observer).
+
+### Использование отложенной загрузки на уровне браузера {: #images-inline-browser-level }
+
+Chrome и Firefox поддерживают отложенную загрузку с атрибутом `loading`. Этот атрибут можно добавить к `<img>`, а также к элементам `<iframe>`. Значение `lazy` указывает браузеру, что нужно немедленно загрузить изображение, если оно находится в области просмотра, и получить другие изображения, когда пользователь при прокрутке страницы приблизится к их расположению.
+
+{% Aside %} Примечание. Атрибут `<iframe loading="lazy">` в настоящее время нестандартизован. Хотя он реализован в Chromium, он еще не имеет спецификации и может быть изменен в будущем. Мы рекомендуем не использовать атрибут `loading` для отложенной загрузки iframe, пока этот атрибут не станет частью спецификации. {% endAside %}
+
+Чтобы узнать о поддержке атрибута браузерами на текущий момент, взгляните на строку `loading` в таблице MDN [«Поддержка браузерами»](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility). Если браузер не поддерживает отложенную загрузку, то атрибут будет проигнорирован, и изображения будут загружаться сразу, как обычно.
+
+Для большинства веб-сайтов добавление этого атрибута к встроенным изображениям повысит производительность и избавит пользователей от загрузки изображений, до которых они никогда не докрутят страницу. Если у вас есть большое количество изображений и вы хотите быть уверены, что пользователи браузеров без поддержки отложенной загрузки смогут воспользоваться ее преимуществами, объедините этот метод с одним из описанных ниже.
+
+Чтобы узнать больше, ознакомьтесь со статьей [«Отложенная загрузка изображений для веб-сайтов на уровне браузера»](/browser-level-image-lazy-loading/).
+
+### Использование Intersection Observer {: #images-inline-intersection-observer }
+
+Чтобы реализовать полизаполнение для отложенной загрузки элементов `<img>`, мы с помощью JavaScript проверяем, находятся ли эти элементы в области просмотра. Если это так, их атрибуты `src` (а иногда и `srcset`) заполняются URL-адресами с нужными изображениями.
+
+Если вы уже писали код с отложенной загрузкой, вы могли воспользоваться обработчиками событий, такими как `scroll` или `resize`. Хотя этот подход имеет наибольшую кроссбарузерную совместимость, современные браузеры предлагают более производительный и эффективный способ проверки видимости элементов с помощью [API Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/).
+
+Intersection Observer легче использовать и читать, чем код, основанный на различных обработчиках событий, потому что вам нужно только зарегистрировать наблюдателя (observer) для наблюдения за элементами, а не писать утомительный код обнаружения видимости элементов. Осталось только решить, что делать, когда элемент виден. Давайте примем следующий базовый шаблон разметки для элементов `<img>` с отложенной загрузкой:
+
+```html
+<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
+```
+
+Вам следует сосредоточить внимание на трех важных составляющих этой разметки:
+
+1. Атрибут `class`, с помощью которого вы будете выбирать элемент в JavaScript.
+2. Атрибут `src`, ссылающийся на изображение-заполнитель, которое появится при первой загрузке страницы.
+3. Атрибуты `data-src` и `data-srcset`, которые представляют собой атрибуты-заполнители, содержащие URL-адрес изображения, которое будет загружено, когда элемент окажется в области просмотра.
+
+Теперь давайте посмотрим, как использовать Intersection Observer в JavaScript для отложенной загрузки изображений с помощью этого шаблона разметки:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.srcset = lazyImage.dataset.srcset;
+          lazyImage.classList.remove("lazy");
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+});
+```
+
+При обнаружении события `DOMContentLoaded` этот сценарий запрашивает DOM для всех элементов `<img>` с классом `lazy`. Если Intersection Observer доступен, создайте нового наблюдателя, который запускает обратный вызов, когда элементы `img.lazy` входят в область просмотра.
+
+{% Glitch { id: 'lazy-intersection-observer', path: 'index.html', previewSize: 0 } %}
+
+Intersection Observer поддерживается почти всеми современными браузерами. Поэтому использование его в качестве полизаполнения для `loading="lazy"` сделает отложенную загрузку доступной для большинства посетителей.
+
+## Изображения в CSS {: #images-css }
+
+Хотя теги `<img>` являются наиболее распространенным способом размещения изображений на веб-страницах, изображения также можно вызывать с помощью свойства CSS [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) (и других свойств). Отложенная загрузка на уровне браузера не применяется к фоновым изображениям CSS. Если вам нужно использовать отложенную загрузку для фоновых изображений, рассмотрите другие способы.
+
+В отличие от элементов `<img>`, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений. Когда [объектные модели документа и CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model), а также [дерево рендеринга](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) уже построены, браузер перед запросом внешних ресурсов проверяет, как CSS-код применяется к документу. Если браузер определяет, что правило CSS, связанное с внешним ресурсом, не применимо к документу в его текущем виде, браузер не запрашивает его.
+
+Это упреждающее поведение можно использовать для отсрочки загрузки изображений в CSS. С помощью JavaScript можно определить, когда элемент находится в области просмотра. Затем нужно применить класс к элементу, который применяет стили, вызывая фоновое изображение. В результате изображение будет загружено в нужный момент, а не при первоначальной загрузке. Например, возьмем элемент, содержащий большое главное фоновое изображение:
+
+```html
+<div class="lazy-background">
+  <h1>Here's a hero heading to get your attention!</h1>
+  <p>Here's hero copy to convince you to buy a thing!</p>
+  <a href="/buy-a-thing">Buy a thing!</a>
+</div>
+```
+
+Элемент `div.lazy-background` обычно содержит главное фоновое изображение, вызываемое CSS-кодом. Однако в этом примере с отложенной загрузкой можно изолировать свойство `background-image` элемента `div.lazy-background` с помощью класса `visible`, добавляемого к элементу, когда он находится в области просмотра:
+
+```css
+.lazy-background {
+  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
+}
+
+.lazy-background.visible {
+  background-image: url("hero.jpg"); /* The final image */
+}
+```
+
+Далее с помощью JavaScript проверьте, находится ли элемент в области просмотра (примените Intersection Observer!), и добавьте класс `visible` к элементу `div.lazy-background`, который загружает изображение:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          lazyBackgroundObserver.unobserve(entry.target);
+        }
+      });
+    });
+
+    lazyBackgrounds.forEach(function(lazyBackground) {
+      lazyBackgroundObserver.observe(lazyBackground);
+    });
+  }
+});
+```
+
+{% Glitch { id: 'lazy-background', path: 'index.html', previewSize: 0 } %}
+
+## Библиотеки для отложенной загрузки {: #libraries }
+
+Следующие библиотеки можно использовать для отложенной загрузки изображений.
+
+- [lazysizes](https://github.com/aFarkas/lazysizes) — это полнофункциональная библиотека отложенной загрузки изображений и iframe. Шаблон библиотеки похож на примеры кода, показанные в статье. Дело в том, что шаблон автоматически привязывается к классу `lazyload` в элементах `<img>`, и требует, чтобы вы указали URL-адреса изображений в атрибутах `data-src` и/или `data-srcset`, содержимое которых подменяется в атрибутах `src` и/или `srcset` соответственно. Шаблон использует Intersection Observer, для которого можно применить полизаполнение. Кроме того, шаблон можно расширить [множеством плагинов](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo), например, для отложенной загрузки видео. [Узнайте больше об использовании lazysizes](/use-lazysizes-to-lazyload-images/).
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) — это упрощенный вариант библиотеки для отложенной загрузки изображений, фоновых изображений, видео, востренных фреймов и скриптов. Библиотека использует Intersection Observer, поддерживает адаптивные изображения и обеспечивает отложенную загрузку на уровне браузера.
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) — еще один упрощенный вариант библиотеки, которая использует только Intersection Observer. Таким образом, она очень эффективна, но ее необходимо сочетать с полизаполнениями, чтобы применять в старых версиях браузеров.
+- Если вам нужна библиотека для отложенной загрузки на React, подумайте о [response-lazyload](https://github.com/jasonslyvia/react-lazyload). Несмотря на то, что она не использует Intersection Observer, она *предоставляет* уже знакомый метод отложенной загрузки изображений для тех, кто привык к разработке приложений на React.
diff --git a/src/site/content/ru/fast/lazy-loading-video/index.md b/src/site/content/ru/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..402b3593f31
--- /dev/null
+++ b/src/site/content/ru/fast/lazy-loading-video/index.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Отложенная загрузка видео
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: В этой статье объясняется отложенная загрузка видео и доступные при ней параметры.
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Аналогично [элементам изображений](/lazy-loading-images) вы можете отложить загрузку видео. Видео обычно загружаются с помощью элемента `<video>` (хотя появился [альтернативный метод с использованием `<img>`](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/) с ограниченной реализацией). Однако *способ* отложенной загрузки `<video>` зависит от варианта использования. Рассмотрим несколько сценариев, каждый из которых требует собственного решения.
+
+## Видео без автовоспроизведения {: #video-no-autoplay }
+
+Для видео, воспроизведение которых инициируется пользователем (т. е. видео, которые *не* воспроизводятся автоматически), может быть желательно указать [атрибут `preload`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload) в элементе `<video>`:
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+В приведенном выше примере используется атрибут `preload` со значением `none`, чтобы запретить браузерам предварительно загружать *любые* видеоданные. Атрибут `poster` создает для элемента `<video>` заполнитель, который будет занимать место во время загрузки видео. Причина в том, что поведение по умолчанию для загрузки видео может отличаться в разных браузерах:
+
+- В Chrome значение `preload` по умолчанию было `auto`, но начиная с Chrome 64 теперь по умолчанию используется `metadata`. Даже в этом случае в десктопной версии Chrome часть видео может быть предварительно загружена с помощью заголовка `Content-Range`/ Firefox, Edge и Internet Explorer 11 ведут себя аналогичным образом.
+- Как и в случае с Chrome, версии Safari 11.0 для десктопов предварительно загружают ряд видео. Начиная с версии 11.2, предварительно загружаются только метаданные видео. [В Safari на iOS видео никогда не загружаются предварительно](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9).
+- Когда включен [режим Data Saver](https://support.google.com/chrome/answer/2392284), значение `preload` по умолчанию равно `none`.
+
+Поскольку поведение браузера по умолчанию в отношении `preload` не является фиксированным, лучшим выходом будет явное указание значения. Когда пользователь инициирует воспроизведение, проще всего отложить загрузку видео на всех платформах, указав `preload="none"`. Атрибут `preload` — не единственный способ отложить загрузку видеоконтента. Статья «[*Быстрое воспроизведение с предварительной загрузкой видео*](/fast-playback-with-preload/)» поможет вам понять принципы работы с воспроизведением видео в JavaScript.
+
+К сожалению, этот пример бесполезен, если вы планируете использовать видео в качестве замены анимированных GIF-файлов. О них будет рассказано далее.
+
+## Видео, заменяющее анимированный GIF {: #video-gif-replacement }
+
+Хотя анимированные GIF-файлы широко используются, они не соответствуют видеоэквивалентам во многих отношениях, особенно по размеру файла. Анимированные GIF-файлы могут занимать несколько мегабайт данных. Видео с похожим визуальным качеством обычно намного меньше.
+
+Использование элемента `<video>` в качестве замены анимированного GIF не так просто, как элемента `<img>`. Анимированные GIF-файлы имеют три характеристики:
+
+1. Они автоматически воспроизводятся при загрузке.
+2. Они зацикливаются непрерывно ([хотя и не всегда](https://davidwalsh.name/prevent-gif-loop)).
+3. У них нет звуковой дорожки.
+
+Реализация этого с помощью элемента `<video>` выглядит примерно так:
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Атрибуты `autoplay`, `muted` и `loop` отвечают соответственно за автовоспроизведение, беззвучный режим и зацикливание. [`playsinline` необходим для автоматического воспроизведения в iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/). Теперь у вас есть исправная замена видео в формате GIF, которая работает на всех платформах. Но как реализовать ее отложенную загрузку? Для начала измените разметку `<video>` соответствующим образом:
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+Вы заметите добавление [атрибута `poster`](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster), позволяющего задать заполнитель, который будет занимать пространство элемента `<video>` до тех пор, пока видео не будет загружено. Как и с [примерами отложенной загрузки `<img>`](/lazy-loading-images/), поместите URL-адрес видео в атрибут `data-src` каждого элемента `<source>`. Затем используйте код JavaScript, аналогичный примерам отложенной загрузки изображений на основе Intersection Observer:
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+При отложенной загрузке элемента `<video>` необходимо перебрать все дочерние элементы `<source>` и преобразовать их атрибуты `data-src` в `src`. После этого нужно запустить загрузку видео, вызвав метод элемента `load`, после чего мультимедиа начнет воспроизводиться автоматически в соответствии с атрибутом `autoplay`.
+
+Используя этот метод, вы получите видео решение, которое имитирует поведение анимированного GIF, но не требует такого же интенсивного использования данных, как анимированные GIF. Таким образом вы сможете осуществлять отложенную загрузку этого контента.
+
+## Библиотеки для отложенной загрузки {: #libraries }
+
+Следующие библиотеки могут помочь вам с отложенной загрузкой видео:
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) и [lozad.js](https://github.com/ApoorvSaxena/lozad.js) — сверхлегкие варианты, которые используют только Intersection Observer. Таким образом, они обладают высокой производительностью, но для них необходимо будет применить полизаполнение, прежде чем вы сможете использовать их в старых браузерах.
+- [yall.js](https://github.com/malchata/yall.js) — это библиотека, которая использует Intersection Observer и обращается к обработчикам событий. Она совместима с IE11 и основными браузерами.
+- Если вам нужна библиотека для отложенной загрузки на React, рассмотрите [response-lazyload](https://github.com/jasonslyvia/react-lazyload). Несмотря на то, что она не использует Intersection Observer, она *предоставляет* уже знакомую методику отложенной загрузки изображений для тех, кто привык к разработке приложений на React.
+
+Каждая из этих библиотек для отложенной загрузки хорошо документирована и содержит множество шаблонов разметки для различных задач, связанных с отложенной загрузкой.
diff --git a/src/site/content/ru/fast/lazy-loading/index.md b/src/site/content/ru/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..4b59418395b
--- /dev/null
+++ b/src/site/content/ru/fast/lazy-loading/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: Использование отложенной загрузки для ускорения отрисовки страницы
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: |2-
+
+  В этой статье объясняется, что такое отложенная загрузка и зачем может понадобиться откладывать загрузку элементов на сайте.
+tags:
+  - performance
+  - images
+---
+
+Доля [изображений](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest) и [видео](http://beta.httparchive.org/reports/page-weight#bytesVideo) в типичной полезной нагрузке сайта может быть очень значительной. К сожалению, владельцы проекта не всегда будут готовы убрать медиаресурсы из имеющихся приложений. Такая ситуация может быть очень неприятной, особенно если все заинтересованные стороны хотят улучшить работу сайта, но не могут договориться, каким образом это следует делать. К счастью, с помощью отложенной загрузки можно снизить начальную полезную нагрузку страницы *и* время загрузки, не убирая контент.
+
+## Что такое отложенная загрузка {: #what }
+
+При отложенной загрузке некритичные ресурсы загружаются не во время первоначальной загрузки страницы, а по необходимости. Что касается изображений, то некритичными часто считаются те, что находятся «вне кадра». Если вы использовали Lighthouse и изучали возможности для улучшения сайта, вы могли видеть соответствующие рекомендации — например, от аудита [Отложите изображения «вне кадра»](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/) (Defer offscreen images):
+
+<figure>   {% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Скриншот аудита «Отложите изображения &quot;вне кадра&quot;» (Defer offscreen images) в Lighthouse", width="800", height="102" %}   <figcaption>Один из аудитов производительности Lighthouse заключается в том, чтобы определить изображения «вне кадра», загрузку которых можно отложить</figcaption></figure>
+
+Вы наверняка видели отложенную загрузку в действии — она выглядит примерно так:
+
+- Вы заходите на страницу и начинаете прокручивать ее по мере чтения содержимого.
+- В какой-то момент в область просмотра попадает изображение-плейсхолдер.
+- Это изображение внезапно заменяется тем, которое должно быть на этом месте.
+
+Пример отложенной загрузки изображений можно увидеть на популярной платформе публикаций [Medium](https://medium.com/), которая во время загрузки страницы размещает небольшие изображения-плейсхолдеры, которые затем заменяются отложенными изображениями по мере их появления в области просмотра.
+
+<figure>   {% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="Скриншот сайта Medium в момент просмотра, демонстрирующий работу отложенной загрузки. Слева — размытый плейсхолдер, справа — загруженный ресурс", width="800", height="493" %}   <figcaption>Пример отложенной загрузки изображений в действии. При загрузке страницы размещается изображение-плейсхолдер (слева), которое при появлении в области просмотра заменяется окончательным изображением, загружаемым по необходимости</figcaption></figure>
+
+Если вы не знакомы с отложенной загрузкой, вам может быть интересно, насколько эффективен этот подход, и каковы его преимущества. Тогда читайте дальше!
+
+## Зачем откладывать загрузку изображений и видео, а не просто *загружать* их? {: #why }
+
+Потому что вы, вполне вероятно, загружаете то, что пользователь никогда не увидит, и это проблема — по нескольким причинам:
+
+- Расход трафика. Если трафик не тарифицируется, то это, конечно, не самое худшее, что может произойти (хотя емкость канала можно было бы потратить и на загрузку других ресурсов, которые пользователь совершенно точно увидит). Но если трафик ограничен, то загрузка того, что пользователь не увидит, может оказаться пустой тратой его денег.
+- Расход процессорного времени, батареи и других системных ресурсов. После скачивания мультимедийного ресурс браузер должен его декодировать и отобразить содержимое в области просмотра.
+
+Отложенная загрузка изображений и видео сокращает время начальной загрузки страницы, начальный размер страницы и использование системных ресурсов, и всё это положительно влияет на производительность.
+
+## Реализация отложенной загрузки {: #implementing }
+
+Реализовать отложенную загрузку можно несколькими способами. При выборе решения необходимо учитывать, какие браузеры вы поддерживаете, а также загрузку чего конкретно вы пытаетесь отложить.
+
+Современные браузеры реализуют [встроенную отложенную загрузку](/browser-level-image-lazy-loading/), которую можно задействовать с помощью атрибута `loading` на изображениях и окнах iframe. Чтобы обеспечить совместимость со старыми браузерами и выполнять отложенную загрузку без встроенной поддержки, можно реализовать собственное решение на JavaScript. Также в этом может помочь ряд библиотек. Подробнее обо всех этих походах смотрите в статьях на сайте:
+
+- [Отложенная загрузка изображений](/lazy-loading-images/).
+- [Отложенная загрузка видео](/lazy-loading-video/).
+
+Кроме того, мы составили список [возможных проблем с отложенной загрузкой](/lazy-loading-best-practices) и нюансов, на которые следует обратить внимание при реализации.
+
+## Заключение
+
+При надлежащем использовании отложенная загрузка изображений и видео может существенно снизить время время начальной загрузки и полезную нагрузку страниц на сайте. У пользователей не будет расходоваться трафик и ресурсы на обработку медиафайлов, которые они, возможно, никогда не увидят. При этом нужные файлы при необходимости будут отображаться.
+
+Как метод повышения производительности отложенная загрузка практически не имеет минусов. Если у вас на сайте много встроенных изображений, она поможет сократить число ненужных загрузок. Пользователи сайта и владельцы проекта обязательно это оценят!
diff --git a/src/site/content/ru/fast/optimize-webfont-loading/index.md b/src/site/content/ru/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..5402e08f11f
--- /dev/null
+++ b/src/site/content/ru/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,148 @@
+---
+layout: post
+title: Оптимизация загрузки и рендеринга веб-шрифтов
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: В этой публикации рассказывается, как загружать веб-шрифты, чтобы не возникали сдвиги макета и пустые страницы, если веб-шрифты недоступны во время загрузки страниц.
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+«Полный» веб-шрифт, включающий все стилистические варианты, которые могут вам не понадобиться, и все глифы, которые вы, возможно, не будете использовать, может иметь размер несколько мегабайтов. Прочитав эту публикацию, вы узнаете, как оптимизировать загрузку веб-шрифтов, чтобы для посетителей загружались только те данные, которые они будут использовать.
+
+Чтобы решить проблему больших файлов, содержащих все варианты, специально разработано правило CSS `@font-face`, позволяющее разделить семейство шрифтов на коллекцию ресурсов. Например, на подмножества Unicode и на отдельные варианты стилей.
+
+Учитывая такие объявления, браузер определяет перечень требуемых подмножеств и вариантов и загружает минимальный набор, необходимый для рендеринга текста, что очень удобно. Но если вы не будете аккуратны, могут возникнуть проблемы с производительностью на критически важном пути рендеринга и задержки при рендеринге текста.
+
+### Поведение, используемое по умолчанию
+
+Отложенная загрузка шрифтов имеет важное неявное последствие, которое может замедлять рендеринг текста: чтобы определить, какие ресурсы шрифта нужны для рендеринга текста, браузер должен [создать дерево рендеринга](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction), зависящее от деревьев DOM и CSSOM. В результате запросы шрифтов выполняются намного позже запросов других критических ресурсов, и браузер может заблокировать рендеринг текста до тех пор, пока не будет получен нужный ресурс.
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="Критически важный путь рендеринга шрифта", width="800", height="303" %}
+
+1. Браузер запрашивает HTML-документ.
+2. Браузер начинает синтаксический анализ ответа HTML и создание модели DOM.
+3. Браузер обнаруживает CSS, JS и другие ресурсы и отправляет запросы.
+4. После получения всего содержимого CSS браузер создает CSSOM и объединяет его с деревом DOM, чтобы создать дерево рендеринга.
+    - Запросы шрифтов отправляются после того, как по дереву рендеринга можно будет определить, какие варианты шрифтов необходимы для рендеринга указанного текста на странице.
+5. Браузер выполняет разметку и отображает контент на экране.
+    - Если шрифт еще недоступен, браузер не может выполнить рендеринг ни одного пикселя текста.
+    - После того, как шрифт станет доступен, браузер отображает пиксели текста.
+
+«Гонка» между первым отображением содержимого страницы, которое можно выполнить вскоре после создания дерева рендеринга, и запросом ресурса шрифта приводит к «проблеме пустого текста», когда браузер может отобразить макет страницы, но опускает весь текст.
+
+Предварительно загружая веб-шрифты и используя свойство `font-display` для управления действиями браузеров в отношении недоступных шрифтов, можно предотвратить появление пустых страниц и сдвиги макета из-за загрузки шрифтов.
+
+### Предварительная загрузка ресурсов веб-шрифтов
+
+Если высока вероятность того, что на странице потребуется определенный веб-шрифт, размещенный по заранее известному URL-адресу, можно [настроить приоритеты ресурсов](https://developers.google.com/web/fundamentals/performance/resource-prioritization). С помощью элемента `<link rel="preload">` можно заблаговременно создать запрос веб-шрифта на ранней стадии критического пути рендеринга, не дожидаясь создания CSSOM.
+
+### Настройка задержки рендеринга текста
+
+Предварительная загрузка повышает вероятность того, что веб-шрифт будет доступен при рендеринге содержимого страницы, но она не гарантирует это. Вам все равно необходимо учитывать, каким образом браузеры ведут себя при рендеринге текста, в котором используется `семейство шрифтов`, которое еще недоступно.
+
+В публикации «[Предотвращение невидимого текста во время загрузки шрифтов](/avoid-invisible-text/)» рассказывается, что по умолчанию браузеры ведут себя не всегда одинаково. Тем не менее с помощью свойства [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) можно указывать современным браузерам, как они должны действовать.
+
+Как и действия, связанные со временем ожидания существующих шрифтов и реализованные в некоторых браузерах, свойство `font-display` разделяет срок жизни операции загрузки шрифта на три указанных ниже основных периода.
+
+1. Первый период — **период блокировки шрифта**. Если в течение этого периода начертание шрифта еще не загружено, любой элемент, пытающийся использовать этот шрифт, должен выполнять рендеринг невидимого резервного начертания шрифта. Если начертание шрифта будет успешно загружено в течение периода блокировки, оно будет использоваться как обычно.
+2. **Период замены шрифта** наступает сразу после периода блокировки шрифта. Если в течение этого периода начертание шрифта не загружено, любой элемент, пытающийся его использовать, должен выполнять рендеринг резервного начертания шрифта. Если начертание шрифта будет успешно загружено в течение периода замены, оно будет использоваться как обычно.
+3. **Период ошибки шрифта** наступает сразу после периода замены шрифта. Если на момент начала этого периода начертание шрифта еще не загружено, загрузка будет помечена как неудачная, и это приведет к штатному переходу на резервный шрифт. В противном случае начертание шрифта будет использоваться как обычно.
+
+Понимая эти периоды, с помощью свойства `font-display` можно указать, каким образом следует выполнять рендеринг шрифта в зависимости от того, был ли он загружен, или от того, когда он был загружен.
+
+Чтобы можно было работать со свойством `font-display`, добавьте его в правила `@font-face`:
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* или block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* будет предварительно загружен */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Латинские глифы */
+}
+```
+
+В настоящее время для свойства `font-display` поддерживаются указанные ниже значения.
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+Дополнительные сведения о предварительной загрузке шрифтов и свойстве `font-display` см. в указанных ниже публикациях.
+
+- [Предотвращение невидимого текста во время загрузки шрифтов](/avoid-invisible-text/)
+- [Управление производительностью шрифта с помощью свойства font-display](https://developers.google.com/web/updates/2016/02/font-display)
+- [Предотвращение смещения макета и мигания невидимого текста (FOIT) путем предварительной загрузки дополнительных шрифтов](/preload-optional-fonts/)
+
+### API загрузки шрифтов
+
+Используя элемент `<link rel="preload">` вместе со свойством `font-display` в CSS, можно управлять загрузкой и рендерингом шрифтов без значительных дополнительных накладных расходов. Но если вам нужно выполнить дополнительные настройки и вы готовы нести накладные расходы, связанные с работой JavaScript, есть еще один вариант.
+
+[API загрузки шрифтов](https://www.w3.org/TR/css-font-loading/) предоставляет интерфейс с поддержкой скриптов для определения начертаний шрифтов CSS и управления ими, отслеживания хода их загрузки и переопределения их поведения, используемого по умолчанию, при отложенной загрузке. Например, если вы уверены, что потребуется тот или иной вариант шрифта, вы можете определить его и указать браузеру инициировать немедленное получение ресурса шрифта:
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// не ждать дерева рендеринга, инициировать немедленное получение!
+font.load().then(function() {
+  // применить шрифт (что может привести к повторному рендерингу текста и изменению макета страницы)
+  // после окончания загрузки шрифта
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // ИЛИ... по умолчанию содержимое скрыто;
+  // оно отобразится после того как шрифт станет доступным
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // ИЛИ... примените собственную стратегию рендеринга здесь...
+});
+```
+
+Более того, поскольку можно проверять статус шрифта (с помощью метода [`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check)) и отслеживать ход его загрузки, вы можете задать пользовательскую стратегию рендеринга текста на страницах.
+
+- Можно приостановить рендеринг всего текста, пока шрифт не станет доступным.
+- Можно настроить отдельное время ожидания для каждого шрифта.
+- Можно использовать резервный шрифт, чтобы разблокировать функцию рендеринга и добавить новый стиль, в котором используется нужный шрифт, после того, как этот шрифт станет доступным.
+
+Лучше всего то, что можно сочетать указанные выше стратегии для различного контента на странице. Например, можно отложить рендеринг текста в некоторых разделах до тех пор, пока нужный шрифт не станет доступным, использовать резервный шрифт, а затем повторно выполнить рендеринг после завершения загрузки шрифта.
+
+{% Aside %} API загрузки шрифтов [недоступен в браузерах старых версий](http://caniuse.com/#feat=font-loading). Похожие функции имеются в [полифиле FontLoader](https://github.com/bramstein/fontloader) и в [библиотеке WebFontloader](https://github.com/typekit/webfontloader), хотя при их использовании возникают еще большие накладные расходы из-за дополнительной зависимости JavaScript. {% endAside %}
+
+### Необходимость правильного кеширования
+
+Шрифты, как правило, представляют собой статические ресурсы, которые обновляются нечасто. В результате для них идеально подходят длительные сроки действия (max-age). Обязательно указывайте для всех ресурсов шрифтов [условный заголовок ETag](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags) и [оптимальную политику Cache-Control](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control).
+
+Если в вашем веб-приложении используется [служебный сценарий](https://developer.chrome.com/docs/workbox/service-worker-overview/), получение ресурсов шрифтов с применением [стратегии «сначала кэш»](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network) подходит для большинства сценариев использования.
+
+Не следует хранить шрифты с использованием свойства [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) или API [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API); у каждого из этих способов есть свой набор проблем с производительностью. Кэш HTTP браузера — лучший и самый надежный механизм доставки ресурсов шрифтов в браузер.
+
+## Контрольный список загрузки веб-шрифтов
+
+- **Настройте загрузку и рендеринг шрифта с помощью элемента `<link rel="preload">`, свойства `font-display` или API загрузки шрифтов:** действия функции отложенной загрузки, выполняемые по умолчанию, могут привести к задержке при рендеринге текста. Эти функции веб-платформы позволяют переопределить такое поведение для определенных шрифтов и указать пользовательские стратегии рендеринга и времени ожидания для различного содержимого на странице.
+- **Укажите политики повторной проверки и оптимального кэширования:** шрифты — это статические ресурсы, которые обновляются нечасто. Сделайте так, чтобы ваши серверы предоставляли долговременную временную метку времени max-age с максимальным возрастом и токен повторной проверки, чтобы можно было эффективно использовать шрифты на разных страницах. При использовании служебного сценария подходит стратегия «сначала кэш».
+
+## Автоматическая проверка поведения при загрузке веб-шрифта  с помощью Lighthouse
+
+С помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) можно автоматизировать процесс проверки соответствия рекомендациям по оптимизации веб-шрифтов.
+
+С помощью указанных ниже аудитов можно периодически проверять, соответствуют ли ваши страницы рекомендациям по оптимизации веб-шрифтов.
+
+- [Preload key requests](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Uses inefficient cache policy on static assets](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [All text remains visible during WebFont loads](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/ru/fast/preload-critical-assets/index.md b/src/site/content/ru/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..dac1065b530
--- /dev/null
+++ b/src/site/content/ru/fast/preload-critical-assets/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: Настройте предварительную загрузку критических ресурсов для повышения скорости загрузки
+authors:
+  - houssein
+  - mihajlija
+description: Как только вы открываете любую веб-страницу, браузер запрашивает HTML-документ с сервера, анализирует содержимое HTML-файла и отправляет отдельные запросы на любые другие внешние ссылки. Цепочка критических запросов представляет собой установленный браузером порядок выборки ресурсов.
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+Когда вы открываете веб-страницу, браузер запрашивает HTML-документ с сервера, анализирует его содержимое и отправляет отдельные запросы на любые ресурсы, на которые ссылается страница. Как разработчик, вы уже знаете обо всех ресурсах, необходимых вашей странице, и о том, какие из них наиболее важны. Вы можете использовать эти знания, чтобы заблаговременно запросить критические ресурсы и ускорить процесс загрузки. В этой статье объясняется, как можно это сделать с помощью `<link rel="preload">`.
+
+## Как работает предварительная загрузка
+
+Предварительная загрузка лучше всего подходит для ресурсов, которые браузер обычно обнаруживает поздно.
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Скриншот панели Network (Сеть) в Chrome DevTools.", width="701", height="509" %} <figcaption>В этом примере шрифт Pacifico определяется в таблице стилей правилом <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a>. Браузер загружает файл шрифта только после завершения загрузки и анализа таблицы стилей.</figcaption></figure>
+
+Предварительно загружая определенный ресурс, вы сообщаете браузеру, что хотели бы получить данный ресурс раньше, чем он будет загружен браузером, так как ресурс важен для текущей страницы.
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="Скриншот панели Network (Сеть) в Chrome DevTools после применения предварительной загрузки.", width="701", height="509" %} <figcaption>В этом примере предварительно загружается шрифт Pacifico, поэтому его загрузка происходит параллельно с таблицей стилей.</figcaption></figure>
+
+Цепочка критических запросов представляет собой установленный браузером порядок выборки ресурсов. Lighthouse определяет ресурсы, которые находятся на третьем уровне этой цепочки, как поздно обнаруженные. Вы можете использовать аудит [**Preload key requests (Настройте предварительную загрузку ключевых запросов)**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/), чтобы определить, какие ресурсы необходимо загружать заранее.
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="Аудит Preload key requests (Настройте предварительную загрузку ключевых запросов) в Lighthouse.", width="745", height="97" %}
+
+Вы можете настроить предварительную загрузку ресурсов, добавив тег `<link>` с атрибутом `rel="preload"` в заголовок HTML-документа:
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+Браузер кеширует предварительно загруженные ресурсы, чтобы их можно было использовать в нужный момент. (Браузер не выполняет сценарии и не применяет таблицы стилей.)
+
+{% Aside %} После внедрения предварительной загрузки на многих сайтах, включая [Shopify, Financial Times и Treebo, на 1 секунду были улучшены](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) такие ориентированные на пользователя метрики, как [TTI (Время до интерактивности)](/tti/) и [FCP (Первая отрисовка контента)](/fcp/). {% endAside %}
+
+Ресурсные подсказки, например [`preconnect`](/preconnect-and-dns-prefetch) и [`prefetch`](/link-prefetch), выполняются по усмотрению браузера, тогда как `preload` является обязательной для браузера. Современные браузеры уже довольно хорошо определяют приоритеты ресурсов, поэтому необходимо использовать `preload` точечно и только для предварительной загрузки самых критических ресурсов.
+
+Неиспользованные предварительные загрузки вызывают предупреждение на вкладке Console (Консоль) в Chrome DevTools примерно через 3 секунды после события `load`.
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="Предупреждение на вкладке Console в Chrome DevTools о неиспользуемых предварительно загруженных ресурсах.", width="800", height="228" %}
+
+{% Aside %} [`preload` поддерживается](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility) во всех современных браузерах. {% endAside %}
+
+## Сценарии использования
+
+{% Aside 'caution' %} На момент написания статьи в Chrome имелась неисправленная [ошибка](https://bugs.chromium.org/p/chromium/issues/detail?id=788757), связанная с тем, что предварительно загружаемые запросы извлекаются раньше, чем запросы ресурсов с более высоким приоритетом. Пока эта проблема не будет решена, учитывайте, что предварительно загружаемые ресурсы могут «обойти очередь» и запрашиваться раньше, чем следовало бы. {% endAside %}
+
+### Предварительная загрузка ресурсов, определенных в CSS
+
+Шрифты, определенные с помощью правил [`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face) или фоновые изображения, определенные в файлах CSS, не обнаруживаются, пока браузер не загрузит и не проанализирует эти файлы CSS. Предварительная загрузка этих ресурсов гарантирует, что они будут получены до загрузки файлов CSS.
+
+### Предварительная загрузка файлов CSS
+
+Если вы используете [критический подход к обработке CSS-кода](/extract-critical-css), разделите CSS-код на две части. Критический CSS-код, необходимый для рендеринга контента в области просмотра, встраивается в `<head>` документа, а некритический CSS-код обычно загружается с помощью JavaScript с отложенной загрузкой. Ожидание выполнения JavaScript перед загрузкой некритического CSS-кода может вызвать задержки в отрисовке страницы при прокрутке, поэтому рекомендуется использовать `<link rel="preload">`, чтобы начать загрузку раньше.
+
+### Предварительная загрузка файлов JavaScript
+
+Поскольку браузеры не выполняют предварительно загруженные файлы, предварительная загрузка полезна для отделения выборки от [выполнения](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/). Это может улучшить такие метрики, как TTI (Время до интерактивности). Предварительная загрузка сработает эффективнее, если вы [разделите](/reduce-javascript-payloads-with-code-splitting) пакеты JavaScript и предварительно загрузите только критические фрагменты.
+
+## Как реализовать rel = preload
+
+Самый простой способ реализовать `preload` — это добавить тег `<link>` к `<head>` документа:
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+Использование атрибута `as` помогает браузеру установить приоритет предварительно извлеченного ресурса в соответствии с его типом, установить правильные заголовки и определить, существует ли уже ресурс в кеше. Допустимые значения для этого атрибута: `script`, `style`, `font`, `image` и [другие](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes).
+
+{% Aside %} Ознакомьтесь с документом [Chrome Resource Priorities and Scheduling](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) (Приоритетность и планирование загрузки ресурсов в Chrome), чтобы больше узнать о том, как браузер устанавливает приоритеты для различных типов ресурсов. {% endAside %}
+
+{% Aside 'caution' %} Отсутствие атрибута `as` или наличие недопустимого значения эквивалентно [XHR-запросу](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest), когда браузер не знает, что он извлекает, поэтому не может определить правильный приоритет. Это также может привести к тому, что некоторые ресурсы, например сценарии, будут получены дважды. {% endAside %}
+
+Некоторые типы ресурсов, например шрифты, загружаются в [анонимном режиме](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements) . Для них вы должны установить атрибут `crossorigin` с `preload`:
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} Предварительно загруженные шрифты без атрибута `crossorigin` будут извлечены дважды! {% endAside %}
+
+Элементы `<link>` также принимают [атрибут `type`](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-type), который содержит [MIME-тип](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types) связанного ресурса. Браузеры используют значение `type`, чтобы обеспечить предварительную загрузку ресурсов только в том случае, если их тип файла поддерживается. Если браузер не поддерживает указанный тип ресурса, он проигнорирует `<link rel="preload">`.
+
+{% Aside 'codelab' %} [Повысьте производительность страницы, предварительно загрузив веб-шрифты](/codelab-preload-web-fonts). {% endAside %}
+
+Вы также можете предварительно загрузить любой тип ресурса через [HTTP-заголовок `Link`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link) :
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+Преимущество указания `preload` в HTTP-заголовке заключается в том, что браузеру не нужно анализировать документ, чтобы обнаружить preload. Это может дать небольшие улучшения в некоторых случаях.
+
+### Предварительная загрузка модулей JavaScript с помощью webpack
+
+Если вы используете сборщик модулей, который создает файлы сборки вашего приложения, вам необходимо проверить, поддерживает ли он внедрение тегов предварительной загрузки. В [webpack](https://webpack.js.org/) версии 4.6.0 или новее предварительная загрузка поддерживается за счет использования [волшебных комментариев](https://webpack.js.org/api/module-methods/#magic-comments) внутри `import()`:
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+Если у вас старая версия webpack, используйте сторонний плагин, например [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin).
+
+## Заключение
+
+Чтобы повысить скорость загрузки страниц, предварительно загружайте важные ресурсы, которые браузер обнаруживает с опозданием. Предварительная загрузка всего будет контрпродуктивна, поэтому используйте `preload` точечно и [измеряйте воздействие в реальных условиях](/fast#measure-performance-in-the-field).
diff --git a/src/site/content/ru/fast/publish-modern-javascript/index.md b/src/site/content/ru/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..989ba3bdedd
--- /dev/null
+++ b/src/site/content/ru/fast/publish-modern-javascript/index.md
@@ -0,0 +1,304 @@
+---
+layout: post
+title: Публикация, доставка и установка современного JavaScript для ускорения работы приложений
+subhead: Повысьте производительность, включив зависимости и выходные данные для современного JavaScript.
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: Современный JavaScript имеет преимущества в части размера и производительности кода перед транспилированным ES5 и поддерживается в 95% веб-браузеров. Эти преимущества можно использовать в приложениях, включив выходные данные современного JavaScript, но эффект будет ограничен зависимостями, уже транспилированными в ES5. В данном руководстве рассказывается, как публиковать современные пакеты в npm, а также как устанавливать и оптимальным образом создавать пакеты, написанные на современном JavaScript.
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - codelab-serve-modern-code
+tags:
+  - performance
+  - blog
+---
+
+Более 90% браузеров способны выполнять современный JavaScript, но на сегодняшний день одна из основных причин проблем с производительностью в Интернете— преобладание старого JavaScript. С помощью несложного средства [EStimator.dev](http://estimator.dev/) можно вычислить, насколько уменьшится размер и повысится производительность сайта при использовании синтаксиса современного JavaScript.
+
+<figure data-size="full">{% Img src="image/admin/FHHnXqdjdsC6PNSSnnC4.png", alt="Средство EStimator.dev c результатами анализа, согласно которым использование современного JavaScript ускорит работу сайта на 9%.", width="800", height="785" %} <figcaption> EStimator.dev </figcaption></figure>
+
+На сегодняшний день возможности Интернета ограничены старым JavaScript. Никакие методы оптимизации не повысят производительность так, как это можно сделать, создавая, публикуя и доставляя веб-страницы или пакеты с использованием синтаксиса **ES2017**.
+
+## Современный JavaScript
+
+Современный JavaScript — это не просто код, написанный в соответствии с определенной версией спецификации ECMAScript; это код, синтаксис которого поддерживается во всех современных браузерах. Современные веб-браузеры, например Chrome, Edge, Firefox и Safari, занимают более [90% рынка](https://www.caniuse.com/usage-table), а доля других браузеров с такими же базовыми модулями рендеринга составляет еще 5%. Это означает, что 95% веб-трафика в мире поступает из браузеров, поддерживающих самые широко используемые возможности языка JavaScript за последние 10 лет (в том числе указанные ниже).
+
+- Классы (ES2015)
+- Стрелочные функции (ES2015)
+- Генераторы (ES2015)
+- Области действия блоков (ES2015)
+- Деструктуризация (ES2015)
+- Параметры операторов rest и spread (ES2015)
+- Сокращенная запись объектов (ES2015)
+- Ключевые слова async и await (ES2017)
+
+В целом, современные браузеры неодинаково поддерживают функции, появившиеся в новых версиях спецификации языка. Например, многие функции из спецификаций ES2020 и ES2021 поддерживаются только в 70% представленных на рынке браузеров. Это большая часть браузеров, но этого недостаточно для безопасного использования таких функций. Это означает, что несмотря на то что «современный» JavaScript еще окончательно не сформировался, спецификация ES2017 обеспечивает совместимость с самым большим количеством браузеров и [при этом включает большую часть широко используемых функций современного синтаксиса](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c). Другими словами, **на сегодняшний день спецификация ES2017 наиболее близка к современному синтаксису**.
+
+## Старый JavaScript
+
+Старый JavaScript — это код, в котором намеренно не используются все перечисленные выше функции языка. Большинство разработчиков пишут исходный код с использованием современного синтаксиса, но компилируют все в соответствии со старым синтаксисом, чтобы полученный код поддерживало как можно больше браузеров. Компиляция с использованием старого синтаксиса расширяет перечень браузеров, поддерживающих код, однако зачастую эффект оказывается меньшим, чем можно полагать. Во многих случаях процент браузеров, поддерживающих такой код, увеличивается с 95% до 98% при значительных дополнительных затратах.
+
+- Обычно старый код JavaScript приблизительно на 20% больше и медленнее, чем эквивалентный современный код. А из-за недостатка нужных инструментов и неправильной настройки эта разница зачастую становится еще больше.
+
+- Установленные библиотеки составляют до 90% типового рабочего кода JavaScript. Использование кода библиотек увеличивает накладные расходы, связанные с применением старого JavaScript. Это связано с полифиллами и дублированием вспомогательных функций, чего можно избежать, публикуя современный код.
+
+## Современный JavaScript в npm
+
+Недавно в файле Node.js было стандартизировано поле `"exports"` для задания [точек входа для пакета](https://nodejs.org/api/packages.html#packages_package_entry_points):
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+Модули, на которые ссылается поле `"exports"`, рассчитаны на использование Node 12.8 и более поздних версий, поддерживающего спецификацию ES2019. Это означает, что любой модуль, на который ссылается поле `"exports"`, можно *написать на современном JavaScript*. Потребители пакетов должны считать, что в модулях с полем `"exports"` содержится современный код и что при необходимости следует транспилировать его.
+
+### Только современный код
+
+Если нужно опубликовать пакет с современным кодом и предоставить потребителю право транспилировать код при использовании его в качестве зависимости, применяйте только поле `"exports"`.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %} Это *нерекомендуемый* подход. В идеальном случае у каждого разработчика система сборки должна быть настроена для транспилирования всех зависимостей (`node_modules`) в требуемый синтаксис. Но на практике это не так. И если опубликовать пакет, в котором применяется только современный синтаксис, его невозможно будет использовать в приложениях, с которыми пользователи работают через устаревшие браузеры. {% endAside %}
+
+### Современный код с резервным старым кодом
+
+Чтобы опубликовать пакет с современным кодом, воспользуйтесь полями `"exports"` и `"main"`, а также включите в пакет резервный код ES5 и CommonJS для устаревших браузеров.
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### Современный код с резервным старым кодом и оптимизация сборщика пакетов ESM
+
+Помимо настройки резервной точки входа CommonJS, с помощью поля `"module"` можно указать похожий резервный пакет со старым кодом, но только такой, в котором используется синтаксис модуля JavaScript (`import` и `export`).
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+Многие сборщики пакетов, например webpack и Rollup, используют это поле для работы с функциями модулей и [встряхивания дерева](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size). Это все еще пакет со старым кодом, и в нем нет современного кода, кроме синтаксиса `import` и `export`. Поэтому используйте такой подход для доставки современного кода с резервным старым кодом, оптимизированным для создания пакетов.
+
+## Современный JavaScript в приложениях
+
+В веб-приложениях сторонние зависимости — подавляющая часть стандартного рабочего кода JavaScript. Несмотря на то что исторически зависимости npm публиковались в виде старого синтаксиса ES5, теперь небезопасно полагаться на это: при обновлении зависимостей браузеры могут перестать поддерживать ваше приложение.
+
+Из-за увеличения количества пакетов npm, переносимых на современный JavaScript, важно настроить средства сборки для их обработки. В некоторых пакетах npm, которые вы используете в качестве зависимостей, с большой вероятностью уже используются функции современного языка. Существует ряд способов использовать современный код из npm, не нарушая работу приложения в старых браузерах, но общая идея заключается в том, чтобы система сборки транспилировала зависимости к тому же синтаксису, который используется для исходного кода.
+
+## webpack
+
+В webpack 5 появилась возможность указывать, какой синтаксис необходимо использовать при генерации кода для пакетов и модулей. Это не приводит к транспилированию кода или зависимостей и влияет только на связующий код, генерируемый webpack. Чтобы указать цель поддержки для браузеров, добавьте в проект [конфигурацию browserslist](https://github.com/browserslist/browserslist#readme) или сделайте это непосредственно в конфигурации webpack:
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+Кроме того, можно настроить средство webpack для создания оптимизированных пакетов, предназначенных для современной среды ES Modules,  без ненужных функций-оболочек. В результате webpack будет загружать пакеты с разделенным кодом, используя поле `<script type="module">`.
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+Некоторые плагины webpack, например Optimize Plugin и BabelEsmPlugin, позволяют компилировать и доставлять современный код JavaScript, поддерживая при этом старые браузеры.
+
+### Плагин Optimize Plugin
+
+[Optimize Plugin](https://github.com/developit/optimize-plugin) — это плагин для webpack, который преобразует окончательный собранный в пакеты код из современного JavaScript в старый (а не создает отдельные файлы с исходным кодом). Это автономная настройка, которая указывает средству webpack, что код написан на современном JavaScript, и не нужно разделять его на несколько выходных файлов или синтаксисов.
+
+Так как плагин Optimize Plugin работает с пакетами, а не с отдельными модулями, он одинаково обрабатывает и код приложения, и зависимости. Это позволяет безопасно использовать зависимости современного JavaScript из npm, так как их код будет помещен в пакет и транспилирован в правильный синтаксис. Кроме того, этот метод может работать быстрее, чем традиционные решения, включающие два этапа компиляции, позволяя при этом создавать отдельные пакеты для современных и устаревших браузеров. Эти два набора пакетов предназначены для загрузки с использованием [шаблона module/nomodule](/serve-modern-code-to-modern-browsers/).
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+Плагин `Optimize Plugin` может работать быстрее и эффективнее, чем пользовательские конфигурации webpack, в которых современный и старый код обычно помещают в отдельные пакеты. Кроме того, он управляет работой компилятора [Babel](https://babeljs.io/) и уменьшает размер пакетов с помощью средства [Terser](https://terser.org/), используя отдельные оптимальные параметры для современного и старого выходного кода. И, наконец, полифиллы, необходимые для сгенерированных старых пакетов, извлекаются в отдельный скрипт и поэтому они никогда не дублируются, а новые браузеры не загружают их, когда это не нужно.
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Сравнение подходов с двойным транспилированием исходных модулей и транспилированием сгенерированных пакетов.</figcaption></figure>
+
+### Плагин BabelEsmPlugin
+
+[BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin) — это плагин для webpack, который работает с настройкой [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) и дает возможность создавать современные версии существующих пакетов. Это позволяет доставлять код с уменьшенной степенью транспиляции в современные браузеры. Это самое популярное готовое решение для атрибутов module/nomodule, используемое в [Next.js](https://nextjs.org/) и [Preact CLI](https://preactjs.com/cli/).
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // Существующая конфигурация babel-loader:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+Плагин `BabelEsmPlugin` поддерживает широкий спектр конфигураций webpack, так как он создает две в значительной степени разные сборки приложения. На двойную компиляцию больших приложений может потребоваться немного дополнительного времени, но благодаря этому методу подключаемый модуль `BabelEsmPlugin` можно легко интегрировать в существующие конфигурации webpack, и он представляет собой один из самых удобных из доступных вариантов.
+
+### Настройка babel-loader для транспилирования node_modules
+
+Если вы используете `babel-loader` без одного из двух указанных выше подключаемых модулей, то чтобы можно было использовать современные модули npm JavaScript, необходимо выполнить важное действие. Настроив две отдельные конфигурации `babel-loader`, вы сможете автоматически компилировать функции современного языка, имеющиеся в `node_modules`, в ES2017, при этом транспилириуя ваш собственный код с помощью подключаемых модулей Babel и предварительных настроек, заданных в конфигурации проекта. При этом не будут сгенерированы современные и старые пакеты для настройки module/nomodule, но можно будет устанавливать и использовать пакеты npm, содержащие современный JavaScript, не нарушая работу старых браузеров.
+
+В [webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm) этот метод используется для компиляции зависимостей npm, у которых есть поле `"exports"` в соответствующих файлах `package.json`, так как в них может содержаться современный синтаксис:
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // Автоматическое транспилирование современного кода, содержащегося в node_modules
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+Кроме того, можно реализовать этот метод вручную в конфигурации webpack, проверяя поле `"exports"` в файлах `package.json` модулей по мере их разрешения. Если для краткости исключить кэширование, пользовательская реализация может выглядеть следующим образом:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Транспилирование собственного кода:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // Транспилирование современных зависимостей:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+Используя этот подход, необходимо убедиться, что применяемое средство уменьшения размера кода поддерживает современный синтаксис. И в [Terser](https://github.com/terser/terser#minify-options), и в [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options) можно указывать `{ecma: 2017}`, чтобы сохранять и в некоторых случаях генерировать синтаксис ES2017 в процессе сжатия и форматирования.
+
+## Rollup
+
+В Rollup имеются встроенные средства для создания нескольких наборов пакетов в рамках одной сборки. По умолчанию Rollup генерирует современный код. В результате это средство можно настроить для создания современных и старых пакетов с помощью официальных плагинов, которые вы, вероятно, уже используете.
+
+### @rollup/plugin-babel
+
+Если вы используете средство Rollup, [метод `getBabelOutputPlugin()`](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code) (имеющийся в [официальном плагине Babel](https://github.com/rollup/plugins/tree/master/packages/babel) для Rollup) преобразовывает код в сгенерированных пакетах, а не в отдельных исходных модулях. В Rollup имеются встроенные средства для создания нескольких наборов пакетов в рамках одной сборки с отдельными плагинами для каждого набора. В результате можно создавать раздельные пакеты с современным и старым кодом, передавая их через разные конфигурации подключаемого модуля выходных файлов Babel:
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // Современные пакеты:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // Старые пакеты (ES5):
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## Дополнительные средства сборки
+
+В Rollup и webpack можно настраивать много параметров. Поэтому чтобы использовать современный синтаксис JavaScript в зависимостях, как правило, необходимо обновлять конфигурацию каждого проекта. Кроме того, существуют средства сборки более высокого уровня, например [Parcel](https://www.snowpack.dev/), [Snowpack](https://parceljs.org/), [Vite](https://github.com/vitejs/vite) и [WMR](https://github.com/preactjs/wmr), в которых предпочтение отдается соглашениям и настройкам, используемым по умолчанию, а не конфигурации. В большинстве таких средств предполагается, что зависимости npm могут содержать современный синтаксис. Соответственно, при сборке кода для рабочей среды эти средства транспилируют зависимости в соответствующие уровни синтаксиса.
+
+Помимо специализированных плагинов для webpack и Rollup для добавления современных пакетов JavaScript с резервным устаревшим кодом в любые проекты можно использовать [devolution](https://github.com/theKashey/devolution). Devolution — это автономное средство, которое преобразует выходные данные системы сборки и создает варианты кода на старом JavaScript. Это позволяет выполнять преобразования и объединение в пакеты, чтобы получать современные выходные данные.
+
+## Вывод
+
+С помощью средства [EStimator.dev](http://estimator.dev/) можно легко оценить эффект от перехода на современный код JavaScript для большинства ваших пользователей. На сегодняшний день спецификация ES2017 ближе всего к современному синтаксису, и некоторые средства, например npm, Babel, webpack и Rollup, позволяют настраивать систему сборки и писать пакеты с использованием этого синтаксиса. В данной публикации рассказывается о нескольких подходах, и вам следует выбрать самый простой вариант, подходящий для ваших целей.
+
+{% YouTube 'cLxNdLK--yI' %}
+
+<br>
diff --git a/src/site/content/ru/fast/rail/index.md b/src/site/content/ru/fast/rail/index.md
new file mode 100644
index 00000000000..a72dc8e6bf3
--- /dev/null
+++ b/src/site/content/ru/fast/rail/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Измеряем производительность с помощью модели RAIL
+description: |2-
+
+  Модель RAIL позволяет дизайнерам и разработчикам уверенно проводить оптимизацию производительности, что критически влияет на взаимодействие с пользователем. Узнайте, какие цели и принципы устанавливает модель RAIL и какие инструменты вы можете использовать для их достижения.
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL** — это **ориентированная на пользователя** модель производительности, которая обеспечивает структурированный подход к оптимизации производительности. Модель разбивает пользовательское взаимодействие на ключевые действия (например, нажатие, прокрутка, загрузка) и помогает определить цели производительности для каждого из них.
+
+Аббревиатура RAIL обозначает четыре различных аспекта жизненного цикла веб-приложения: ответ (response), анимация (animation), ожидание (idle) и загрузка (load). Пользователи ожидают разной производительности для каждой из этих ситуаций, поэтому цели производительности определяются на основе контекста и [UX-исследования того, как пользователи воспринимают задержки](https://www.nngroup.com/articles/response-times-3-important-limits/).
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="Четыре части модели производительности RAIL: ответ, анимация, ожидание и загрузка.", width="800", height="290" %}<figcaption> 4 части модели производительности RAIL </figcaption></figure>
+
+## Сосредоточьтесь на пользователе
+
+Сфокусируйте свою работу на пользователе. В таблице ниже описаны ключевые показатели того, как пользователи воспринимают задержки производительности:
+
+<table class="table-wrapper scrollbar">
+  <thead>Восприятие пользователем задержек производительности</thead>
+  <tr>
+    <td>От 0 до 16 мс</td>
+    <td>Пользователи на исключение чутко отслеживают движение и не любят задержек при анимации. Они воспринимают анимацию как плавную, если каждую секунду рендерится 60 новых кадров. Это 16 мс на кадр, включая время, необходимое браузеру, чтобы отобразить новый кадр на экране. У приложения при этом остается около 10 мс на создание кадра.</td>
+  </tr>
+  <tr>
+    <td>От 0 до 100 мс</td>
+    <td>Если отвечать на действия пользователей в пределах этого временного окна, пользователи будут воспринимать результат как мгновенный. При большей длительности связь между действием и реакцией нарушается.</td>
+  </tr>
+  <tr>
+    <td>От 100 до 1000 мс</td>
+    <td>В этом интервале все ощущается частью естественного и непрерывного процесса выполнения задач. Большинство пользователей Интернета воспринимает загрузку страниц или смену представления как задачу.</td>
+  </tr>
+  <tr>
+    <td>1000 мс или более</td>
+    <td>По истечении 1000 миллисекунд (1 секунда) пользователи теряют внимание к выполняемой задаче.</td>
+  </tr>
+  <tr>
+    <td>10000 мс или более</td>
+    <td>По прошествии 10000 миллисекунд (10 секунд) пользователи разочаровываются и, скорее всего, откажутся от задачи. Позже они могут вернуться, а могут и не вернуться.</td>
+  </tr>
+</table>
+
+{% Aside %} Пользователи по-разному воспринимают задержки производительности в зависимости от состояния сети и оборудования. Например, загрузка сайтов на мощном настольном компьютере при быстром соединении Wi-Fi обычно происходит менее чем за 1 секунду, и пользователи к этому привыкли. Загрузка сайтов на мобильные устройства с медленным 3G-подключением занимает больше времени, поэтому мобильные пользователи обычно более терпеливы, и загрузка на мобильных устройствах за 5 секунд — более реалистичная цель. {% endAside %}
+
+## Цели и принципы
+
+В контексте RAIL термины **цели** и **принципы** имеют особое значение:
+
+- **Цели**. Ключевые показатели производительности, касающиеся работы пользователя. Например, от нажатия до отрисовки должно проходить не более 100 миллисекунд. Поскольку человеческое восприятие относительно постоянно, в ближайшее время эти цели вряд ли изменятся.
+
+- **Принципы**. Рекомендации, которые помогут вам достичь цели. Они могут быть привязаны к текущему оборудованию и условиям сетевого подключения, следовательно, со временем могут измениться.
+
+## Ответ: обрабатывайте события не дольше 50 мс
+
+**Цель**: завершить переход, инициированный пользовательским вводом, в течение 100 мс, чтобы пользователи чувствовали, что взаимодействие происходит мгновенно.
+
+**Принципы**:
+
+- Чтобы обеспечить видимый ответ в течение 100 мс, обрабатывайте события ввода пользователя в течение 50 мс. Это касается большинства действий ввода, таких как нажатие кнопок, переключение элементов управления формы или запуск анимации. Это не относится к перетаскиванию касанием или прокрутке.
+
+- Хотя это может показаться нелогичным, немедленный ответ на ввод пользователя — не всегда верное решение. Интервал в 100 мс можно использовать для другой дорогостоящей работы, но с осторожностью, чтобы не заблокировать пользователя. По возможности проводите работу в фоновом режиме.
+
+- Обеспечьте обратную связь для всех действий, выполнение которых занимает более 50 мс.
+
+### 50 мс или 100 мс?
+
+Если цель в том, чтобы отреагировать на ввод менее чем за 100 мс, почему же тогда наш бюджет составляет всего 50 мс? Это связано с тем, что помимо обработки ввода обычно выполняется другая работа, и она занимает часть времени, доступного для получения приемлемого ответа на ввод. Когда приложение выполняет работу рекомендованными фрагментами по 50 мс во время простоя, это означает, что ввод может быть поставлен в очередь на срок до 50 мс, если он производится во время одного из этих фрагментов работы. Учитывая это, можно с уверенностью предположить, что на фактическую обработку ввода остается всего 50 мс. Этот эффект представлен на диаграмме ниже, которая показывает, как полученный во время простоя ввод ставится в очередь, сокращая доступное время обработки:
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="Диаграмма, показывающая, как полученный во время простоя ввод помещается в очередь, сокращая доступное время обработки ввода до 50 мс", width="800", height="400" %} <figcaption>Как ожидание влияет на бюджет ответа на ввод.</figcaption></figure>
+
+## Анимация: создавайте кадр за 10 мс
+
+**Цели**:
+
+- Выдавайте каждый кадр анимации за 10 мс или меньше. Технически максимальный бюджет для каждого кадра составляет 16 мс (1000 мс /ыв 60 кадров в секунду ≈ 16 мс), но браузерам требуется около 6 мс для рендеринга каждого кадра, поэтому рекомендуется 10 мс на кадр.
+
+- Стремитесь к визуальной плавности. Пользователи замечают, когда частота кадров меняется.
+
+**Принципы**:
+
+- В таких условиях высокой нагрузки, как анимация, главное — ничего не делать там, где это возможно, и выполнять абсолютный минимум в остальных случаях. По возможности используйте отклик в 100 мс, чтобы предварительно рассчитать дорогостоящую работу: так вы повысите свои шансы на достижение 60 кадров в секунду.
+
+- Информацию о различных стратегиях оптимизации анимации см. в разделе «[Производительность рендеринга»](/rendering-performance/).
+
+{% Aside %} Различайте все типы анимации. Анимация — это не только навороченные эффекты пользовательского интерфейса. Каждое из этих взаимодействий считается анимацией:
+
+- Визуальные анимации, такие как входы и выходы, [преобразования](https://www.webopedia.com/TERM/T/tweening.html), а также индикаторы загрузки.
+- Прокрутка. Сюда также относится смахивание, когда пользователь начинает прокрутку, затем отпускает, и страница продолжает прокручиваться.
+- Перетаскивание. Анимации часто следуют за действиями пользователя, такими как панорамирование карты или масштабирование пальцем. {% endAside %}
+
+## Ожидание: максимизируйте время простоя
+
+**Цель**: максимально увеличьте время простоя, чтобы повысить вероятность того, что страница ответит на ввод пользователя в течение 50 мс.
+
+**Принципы**:
+
+- Используйте время простоя для завершения отложенной работы. Например, при начальной загрузки страницы загрузите как можно меньше данных, а затем используйте [время простоя](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback) для загрузки остальных.
+
+- Выполняйте работу во время простоя не более 50 мс. Превысив этот интервал, вы рискуете помешать приложению реагировать на ввод пользователя в течение 50 мс.
+
+- Если пользователь взаимодействует со страницей во время простоя, взаимодействие с пользователем всегда должно иметь наивысший приоритет и прерывать работу во время простоя.
+
+## Загрузка: доставляйте контент и переходите в интерактивный режим менее чем за 5 секунд
+
+Когда страницы загружаются медленно, внимание пользователя отвлекается и он воспринимает задачу как невыполненную. Для быстро загружаемых сайтов характерны [более длительные средние сеансы, меньший процент отказов и более высокая просматриваемость рекламы](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/).
+
+**Цели**:
+
+- Оптимизация для быстрой загрузки с учетом возможностей устройства и сети ваших пользователей. На данный момент для первых загрузок стоит стремиться к загрузке страницы и переходу в [интерактивный режим](/tti/) за [5 секунд или меньше на мобильных устройствах среднего уровня с медленным 3G-подключением](/performance-budgets-101/#establish-a-baseline).
+
+- Для последующих загрузок хорошей целью будет загрузка страницы менее чем за 2 секунды.
+
+{% Aside %}
+
+Имейте в виду, что со временем эти цели могут измениться.
+
+{% endAside %}
+
+**Принципы**:
+
+- Проверьте свою скорость загрузки на мобильных устройствах и сетевых подключениях, которые распространены среди ваших пользователей. Вы можете использовать [отчет об работе с пользователями Chrome (CrUX)](/chrome-ux-report/), чтобы узнать, как [распределены подключения](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard) ваших пользователей. Если данные для вашего сайта недоступны, [The Mobile Economy 2019](https://www.gsma.com/mobileeconomy/) предлагает взять за основу телефон Android среднего класса, такой как Moto G4, и медленную 3G-сеть (время приема-передачи 400 мс, скорость передачи 400 кбит/с). Эта комбинация доступна на [WebPageTest](https://www.webpagetest.org/easy).
+
+- Имейте в виду, что хотя мобильное устройство среднестатистического пользователя может сообщать о своем подключении к 2G, 3G или 4G, в действительности [эффективная скорость соединения](/adaptive-serving-based-on-network-quality/#how-it-works) часто значительно ниже из-за потери пакетов и непостоянства сети.
+
+- [Устраняйте ресурсы, блокирующие рендеринг](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/).
+
+- Для создания ощущения полной загрузки не обязательно загружать все ресурсы за 5 секунд. Применяйте [отложенную загрузку изображений](/browser-level-image-lazy-loading/), [разделение кода JavaScript](/reduce-javascript-payloads-with-code-splitting/) и другие [оптимизации, предлагаемые на web.dev](/fast/).
+
+{% Aside %} Определите факторы, влияющие на скорость загрузки страницы:
+
+- Скорость и задержка сети
+- Аппаратное обеспечение (например, медленные процессоры)
+- Замещение кеша
+- Различия в кешировании L2/L3
+- Анализ JavaScript {% endAside %}
+
+## Инструменты для измерения RAIL
+
+Есть несколько инструментов, которые помогут вам автоматизировать измерения RAIL. Какой из них лучше использовать, зависит от того, какой тип информации вам нужен и какой тип рабочего процесса вы предпочитаете.
+
+### Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/) обеспечивает углубленный анализ всего, что происходит во время загрузки или запуска вашей страницы. См. раздел «[Aнализ производительности во время выполнения](https://developer.chrome.com/docs/devtools/evaluate-performance/)», чтобы ознакомиться с пользовательским интерфейсом панели «**Производительность**».
+
+Следующие функции DevTools особенно важны:
+
+- [Замедлите работу процессора](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle), чтобы смоделировать менее мощное устройство.
+
+- [Замедлите работу сети](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle), чтобы имитировать более медленные соединения.
+
+- [Просматривайте активность основного потока](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main), чтобы отслеживать все события, произошедшие в основном потоке во время записи.
+
+- [Просматривайте действия основного потока в таблице](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities), чтобы отсортировать действия в зависимости от того, какие из них занимали больше всего времени.
+
+- [Анализируйте количество кадров в секунду (FPS)](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps), чтобы определить, насколько плавно работает ваша анимация.
+
+- [Отслеживайте использование ЦП, размер кучи JS, узлы DOM, число макетов в секунду и многое другое](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor) в режиме реального времени с помощью **монитора производительности**.
+
+- [Визуализируйте сетевые запросы](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network), которые произошли во время записи, с помощью раздела «**Сеть**».
+
+- [Делайте снимки экрана во время записи](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots), чтобы точно воспроизвести то, как страница выглядела во время загрузки, как сработала анимация и т. д.
+
+- [Просматривайте взаимодействия](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions), чтобы быстро определить, что произошло на странице после взаимодействия с ней пользователя.
+
+- [Находите проблемы с производительностью прокрутки в режиме реального времени](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues), подсвечивая страницу при срабатывании потенциально проблемного прослушивателя.
+
+- [Просматривайте события рисования в режиме реального времени](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing), чтобы определять дорогостоящие события рисования, которые могут повлиять на производительность вашей анимации.
+
+### Lighthouse
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) доступен в Chrome DevTools по адресу [web.dev/measure](/measure/) как расширение Chrome, как модуль Node.js и в WebPageTest. Вы даете ему URL-адрес, он имитирует устройство среднего класса с медленным 3G-соединением, выполняет серию аудитов на странице, а затем дает отчет о скорости загрузки и предложения по ее улучшению.
+
+Наиболее важны следующие аудиты:
+
+**Response**
+
+- [Максимальная потенциальная задержка первого ввода (First Input Delay)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/). Оценивает, как долго ваше приложение будет реагировать на ввод данных пользователем, исходя из времени простоя основного потока.
+
+- [Не использует пассивные прослушиватели для повышения производительности прокрутки](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/).
+
+- [Общее время блокировки (Total Blocking Time)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/). Измеряет общее время, в течение которого страница блокируется от ответа на действия пользователя, такие как щелчки мыши, касания экрана или нажатия клавиатуры.
+
+- [Время до интерактивности (Time To Interactive)](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive). Определяет момент времени, когда пользователь сможет стабильно взаимодействовать со всеми элементами страницы.
+
+**Load**
+
+- [Не регистрирует сервис-воркер, который управляет страницей и start_url](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/). Сервис-воркер может кешировать общие ресурсы на устройстве пользователя, сокращая время, затрачиваемое на получение ресурсов по сети.
+
+- [Загрузка страницы в мобильных сетях происходит недостаточно быстро](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/).
+
+- [Устраняйте ресурсы, блокирующие рендеринг](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
+
+- [Отложите закадровые изображения](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/). Отложите загрузку закадровых изображений до тех пор, пока они не понадобятся.
+
+- [Правильно масштабируйте изображения](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/). Не показывайте изображения, размер которых значительно превышает размер, отображаемый в мобильной области просмотра.
+
+- [Избегайте цепочки критических запросов](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).
+
+- [Не использует HTTP/2 для всех своих ресурсов](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).
+
+- [Эффективно кодируйте изображения](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/).
+
+- [Включите сжатие текста](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/).
+
+- [Избегайте чрезмерных нагрузок на сеть](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).
+
+- [Избегайте чрезмерного размера DOM](https://developer.chrome.com/docs/lighthouse/performance/dom-size/). Уменьшите количество сетевых байтов, доставив только те узлы DOM, которые необходимы для рендеринга страницы.
+
+### WebPageTest
+
+WebPageTest — это инструмент веб-производительности, который использует реальные браузеры для доступа к веб-страницам и сбора метрик времени. Введите URL-адрес на [webpagetest.org/easy](https://webpagetest.org/easy), чтобы получить подробный отчет о скорости загрузки страницы на реальном устройстве Moto G4 с медленным 3G-соединением. Вы также можете настроить его для включения аудита Lighthouse.
+
+## Резюме
+
+RAIL — это оптика, позволяющая рассматривать работу пользователя с веб-сайтом как маршрут, состоящий из различных взаимодействий. Оцените, как пользователи воспринимают ваш сайт, чтобы задать цели производительности, которые оказывают наибольшее влияние на взаимодействие с пользователем.
+
+- Сосредоточьтесь на пользователе.
+
+- Отвечайте на ввод пользователя менее чем за 100 мс.
+
+- Выдавайте кадр менее чем за 10 мс при анимации или прокрутке.
+
+- Увеличьте время простоя основного потока.
+
+- Загружайте интерактивный контент менее чем за 5000 мс.
diff --git a/src/site/content/ru/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/ru/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..bc077dde526
--- /dev/null
+++ b/src/site/content/ru/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: Сокращение размера полезной нагрузки JavaScript за счет разделения кода
+authors:
+  - houssein
+description: Чрезмерно большой размер полезной нагрузки JavaScript существенно замедляет скорость вашего сайта. Вместо того чтобы отправлять пользователю весь JavaScript-код при первой же загрузке страницы вашего приложения, разбейте бандл на несколько фрагментов и в самом начале пересылайте только самый необходимый код.
+date: 2018-11-05
+codelabs:
+  - codelab-code-splitting
+tags:
+  - performance
+---
+
+Никто не любит долго ждать. **[Более 50% пользователей покидают сайт, если он загружается дольше 3 секунд](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)**.
+
+Чрезмерно большой размер полезной нагрузки JavaScript существенно замедляет скорость вашего сайта. Вместо того чтобы отправлять пользователю весь JavaScript-код при первой же загрузке страницы вашего приложения, разбейте бандл на несколько фрагментов и в самом начале пересылайте только самый необходимый код.
+
+## Мера
+
+Если на загрузку всего JavaScript-кода на странице тратится слишком много времени, проверка в Lighthouse завершается неудачей.
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="Неудачно завершившаяся проверка в Lighthouse, показывающая, что на загрузку скриптов тратится слишком много времени.", width="797", height="100" %}
+
+Разбейте бандл JavaScript на фрагменты, чтобы при загрузке приложения пользователь получал только код, необходимый для начального маршрута. Это позволяет сократить объем обрабатываемого и компилируемого кода, благодаря чему загрузка страницы ускоряется.
+
+Популярные упаковщики модулей, такие как [webpack](https://webpack.js.org/guides/code-splitting/), [Parcel](https://parceljs.org/code_splitting.html) или [Rollup](https://rollupjs.org/guide/en#dynamic-import), позволяют разбивать бандлы на части, используя [динамический импорт](https://v8.dev/features/dynamic-import). Например, давайте рассмотрим следующий фрагмент кода с примером метода `someFunction`, который вызывается при отправке формы.
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // uses moduleA
+}
+```
+
+В данном примере метод `someFunction` использует модуль, импортируемый из библиотеки. Если этот модуль не используется где-либо еще, блок кода можно изменить таким образом, чтобы он использовал динамический импорт и загрузка модуля происходила только при отправке формы пользователем.
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // using the default export
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // uses moduleA
+}
+```
+
+Теперь код этого модуля не будет включен в начальный бандл и будет загружаться в **отложенном режиме**. Пользователь будет получать его только при отправке формы, когда в нем возникнет необходимость. Чтобы еще больше повысить производительность страницы, используйте [предварительную загрузку критически важных фрагментов, чтобы их загрузка происходила с более высоким приоритетом](/preload-critical-assets).
+
+Хотя приведенный выше фрагмент кода — простой пример, в более крупных приложениях отложенная загрузка сторонних зависимостей применяется нечасто. Обычно сторонние зависимости выносятся в отдельный бандл поставщика, который можно кешировать, поскольку они обновляются не так часто. Помочь вам с этой задачей может [**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+При использовании фреймворка, работающего на стороне клиента, более простым подходом к отложенной загрузке частей приложения является разбивка на уровне маршрутов или компонентов. Многие популярные фреймворки, использующие webpack, предоставляют абстракции для упрощения отложенной загрузки без необходимости настраивать ее вручную.
diff --git a/src/site/content/ru/fast/remove-unused-code/index.md b/src/site/content/ru/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..475bee4b2a5
--- /dev/null
+++ b/src/site/content/ru/fast/remove-unused-code/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: Удаление неиспользуемого кода
+subhead: |
+  Npm упрощает добавление кода в проект. Но так ли уж нужны все эти лишние байты?
+authors:
+  - houssein
+date: 2018-11-05
+description: |
+  Реестры вроде npm изменили экосистему JavaScript к лучшему: они позволяют легко скачать и использовать более полумиллиона общедоступных пакетов. Но часто мы добавляем библиотеки, которые используем не полностью. Поэтому нужно анализировать пакеты и находить неиспользуемый код.
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+Реестры вроде [npm](https://docs.npmjs.com/getting-started/what-is-npm) изменили
+экосистему JavaScript к лучшему: они позволяют легко скачать и использовать
+более _полумиллиона_ общедоступных пакетов. Но часто мы добавляем библиотеки,
+которые используем не полностью. Поэтому нужно **анализировать пакеты**
+и находить неиспользуемый код, а затем удалять **неиспользуемые** и **ненужные** библиотеки.
+
+## Анализ пакета
+
+С помощью DevTools можно легко узнать размер сетевых запросов:
+{% Instruction 'devtools-network', 'ol' %}
+{% Instruction 'disable-cache', 'ol' %}
+{% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="Панель «Сеть» (Network) с запросом пакета", width="800", height="169" %}
+
+Вкладка [Покрытие](https://developer.chrome.com/docs/devtools/coverage/)
+(Coverage) в DevTools также сообщает, какое количество CSS- и JS-кода в приложении
+не используется.
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="Покрытие кода в DevTools", width="800", height="562" %}
+
+Указав полную конфигурацию Lighthouse через Node CLI, с помощью аудита
+«Неиспользуемый JavaScript» (Unused JavaScript) можно отслеживать, какое количество
+неиспользуемого кода поставляется с приложением.
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Аудит «Unused JavaScript» в Lighthouse", width="800", height="347" %}
+
+Если в качестве упаковщика вы используете [webpack](https://webpack.js.org/),
+то разобраться в том, что входит в комплект, вам поможет
+[Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). Добавьте этот плагин в файл
+конфигурации webpack обычным образом:
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+Webpack обычно используется для одностраничных приложений.
+Но и в других сборщиках (например, [Parcel](https://parceljs.org/) и
+[Rollup](https://rollupjs.org/guide/en)) тоже есть инструменты визуализации,
+которые пригодятся для анализа пакета.
+
+При перезагрузке приложения с добавленным плагином отображается масштабируемая
+древовидная карта всего пакета.
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468" %}
+
+Эта визуализация позволяет определить, какие части пакета
+больше других, а также получить представление обо всех импортируемых
+библиотеках. Таким образом можно определить, есть ли у вас неиспользуемые
+или ненужные библиотеки.
+
+## Удаление неиспользуемых библиотек
+
+На предыдущем изображении древовидной карты довольно много пакетов
+в одном домене `@firebase`. Если вашему сайту нужен только компонент базы данных firebase,
+то обновите настройки импорта и получите эту библиотеку:
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+Помните, что для более крупных приложений этот процесс будет значительно
+сложнее.
+
+Если вам попадется загадочный пакет, который, казалось бы,
+нигде не применяется, посмотрите, какие из зависимостей верхнего уровня
+его используют. Попробуйте импортировать из этого пакета только нужные компоненты.
+Если библиотека не используется, удалите ее.  Если библиотека не нужна для начальной
+загрузки страницы, попробуйте [отложить ее загрузку](/reduce-javascript-payloads-with-code-splitting).
+
+Если вы используете webpack, просмотрите [список плагинов, которые
+автоматически удаляют неиспользуемый код из популярных библиотек](https://github.com/GoogleChromeLabs/webpack-libs-optimizations).
+
+{% Aside 'codelab' %}
+[Удаление неиспользуемого кода.](/codelab-remove-unused-code)
+{% endAside %}
+
+## Удаление ненужных библиотек
+
+Не каждую библиотеку можно легко разбить на части и выборочно импортировать.
+В этом случае подумайте, можно ли удалить библиотеку целиком. Не стоит
+забывать, что можно реализовать собственное решение или использовать
+более «легкую» альтернативу. Однако также важно оценить сложность и необходимые
+для этого усилия, прежде чем удалять библиотеку из приложения полностью.
\ No newline at end of file
diff --git a/src/site/content/ru/fast/serve-images-webp/index.md b/src/site/content/ru/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..920bcc2e822
--- /dev/null
+++ b/src/site/content/ru/fast/serve-images-webp/index.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: Использование изображений WebP
+authors:
+  - katiehempenius
+description: Изображения WebP занимают меньше места, чем аналогичные изображения в форматах JPEG и PNG, — обычно выигрыш составляет 25–35%. Это позволяет сократить размеры страниц и повысить производительность.
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - codelab-serve-images-webp
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## Почему это важно?
+
+Изображения WebP занимают меньше места, чем аналогичные изображения в форматах JPEG и PNG, — обычно выигрыш составляет 25–35%. Это позволяет сократить размеры страниц и повысить производительность.
+
+- На YouTube переход на миниатюры в формате WebP позволил [ускорить загрузку страниц на 10%](https://www.youtube.com/watch?v=rqXMwLbYEE4).
+- На Facebook переход на WebP позволил [сократить размер файлов](https://code.fb.com/android/improving-facebook-on-android/) на 25-35% по сравнению с JPEG и на 80% по сравнению с PNG.
+
+WebP — отличная замена для изображений JPEG, PNG и GIF. Кроме того, WebP поддерживает сжатие как без потерь, так и с потерями. Сжатие без потерь обеспечивает точную передачу изображения, тогда как сжатие с потерями уменьшает размер файла, но ценой возможного снижения качества изображения.
+
+## Преобразование изображений в WebP
+
+Обычно для преобразования изображений в WebP используется один из следующих инструментов: [инструмент cwebp для командной строки](https://developers.google.com/speed/webp/docs/using) и [плагин WebP для Imagemin](https://github.com/imagemin/imagemin-webp) (пакет npm). Плагин WebP для Imagemin подойдет вам, если ваш проект использует скрипты или инструменты сборки (такие, как Webpack или Gulp), тогда как инструмент для командной строки — оптимальное решение для простых проектов или для ситуаций, когда изображения нужно преобразовать только один раз.
+
+При преобразовании изображений в WebP можно указывать различные параметры сжатия, но в большинстве случаев достаточно указать уровень качества. Уровень качества указывается в виде числа от 0 (наихудшее) до 100 (наилучшее). Поэкспериментируйте с различными уровнями качества, чтобы подобрать оптимальный для ваших потребностей компромисс между качеством изображения и размером файла.
+
+### Использование cwebp
+
+Преобразование отдельного файла с использованием стандартных для cwebp настроек сжатия:
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+Преобразование отдельного файла с уровнем качества `50`:
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+Преобразование всех файлов в каталоге:
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### Использование Imagemin
+
+Плагин WebP для Imagemin можно использовать как сам по себе, так и в рамках инструментов сборки (Webpack/Gulp/Grunt и т. д.). Обычно это требует добавления в скрипт сборки или файл конфигурации вашего инструмента сборки около 10 строк кода. Вы можете ознакомиться с примерами для [Webpack](https://glitch.com/~webp-webpack), [Gulp](https://glitch.com/~webp-gulp) и [Grunt](https://glitch.com/~webp-grunt).
+
+Если вы не используете ни один из перечисленных инструментов сборки, вы можете использовать Imagemin в качестве самостоятельного скрипта Node. Приведенный ниже скрипт выполняет преобразование файлов в каталоге `images` и сохраняетт их в каталоге `compressed_images`.
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## Отображение изображений WebP
+
+Если ваш сайт поддерживает только [браузеры, совместимые с WebP](https://caniuse.com/#search=webp), то вы можете пропустить этот раздел. В противном случае позаботьтесь, чтобы новые браузеры загружали изображения WebP, а старые браузеры использовали резервное изображение:
+
+**Было:**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**Стало:**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+Для достижения этого результата используется комбинация тегов [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture), [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) и `<img>` с учетом их приоритета по отношению друг к другу.
+
+### picture
+
+Тег `<picture>` используется в качестве обертки для одного тега `<img>` и произвольного (от 0 и больше) количества тегов `<source>`.
+
+### source
+
+Тег `<source>` позволяет указать медиаресурс.
+
+Браузер будет использовать первый источник с подходящим форматом. Если все источники, указанные при помощи тегов `<source>`, имеют неподдерживаемый формат, то происходит загрузка резервного изображения, указанного в теге `<img>`.
+
+{% Aside 'gotchas' %}
+
+- Тег `<source>`, указывающий на изображение в «предпочтительном» формате (в данном случае — WebP), должен быть указан в первую очередь, перед остальными тегами `<source>`.
+
+- Атрибут `type` должен содержать MIME-тип, соответствующий формату изображения. [MIME-тип](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) изображения и расширение файла зачастую похожи, однако не являются полностью идентичными (например, сравните `.jpg` и `image/jpeg`).
+
+{% endAside %}
+
+### img
+
+Тег `<img>` обеспечивает работу кода в браузерах, которые не поддерживают тег `<picture>`. Браузер без поддержки `<picture>` будет игнорировать «незнакомые» теги, поэтому распознает только тег `<img src="flower.jpg" alt="">` и загрузит соответствующее изображение.
+
+{% Aside 'gotchas' %}
+
+- Тег `<img>` необходимо указывать всегда, и он должен стоять в самом конце, после всех тегов `<source>`.
+- Тег `<img>` должен указывать на ресурс в универсально поддерживаемом формате (таком, как JPEG), чтобы его можно было использовать как резервный. {% endAside %}
+
+## Проверка использования WebP
+
+Проверить, что для всех изображений на вашем сайте используется WebP, можно при помощи Lighthouse. Запустите в Lighthouse проверку производительности (**Lighthouse > Options > Performance**) и изучите результаты проверки **Serve images in next-gen formats**. Lighthouse перечислит все изображения, формат которых отличается от WebP.
diff --git a/src/site/content/ru/fast/serve-responsive-images/index.md b/src/site/content/ru/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..121ef7dbb33
--- /dev/null
+++ b/src/site/content/ru/fast/serve-responsive-images/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Адаптивная загрузка изображений
+authors:
+  - katiehempenius
+description: При загрузке на мобильных устройствах изображений, предназначенных для ПК, расход трафика может быть в 2–4 раза выше, чем нужно. Вместо того чтобы использовать универсальные изображения, размер изображений можно выбирать исходя из формата устройства.
+date: 2018-11-05
+updated: 2021-06-04
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+При загрузке на мобильных устройствах изображений, предназначенных для ПК, расход трафика может быть в 2–4 раза выше, чем нужно. Вместо того чтобы использовать универсальные изображения, размер изображений можно выбирать исходя из формата устройства.
+
+## Изменение размера изображений
+
+Одни из наиболее популярных инструментов для изменения размера изображений — это [npm-пакет sharp](https://www.npmjs.com/package/sharp) и [инструмент ImageMagick для командной строки](https://www.imagemagick.org/script/index.php).
+
+Пакет sharp — хороший выбор для автоматизации изменения размера изображений (например, при создании для всех видео на вашем сайте миниатюр различных размеров). Он быстро работает и с легкостью интегрируется со скриптами и инструментами сборки. ImageMagick, напротив, удобен для разового изменения размера изображений, так как используется исключительно через командную строку.
+
+### sharp
+
+Чтобы использовать sharp в качестве Node-скрипта, сохраните приведенный ниже код как отдельный скрипт в вашем проекте, а затем запустите его для преобразования ваших изображений:
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+Чтобы изменить размер изображения до 33% от его исходного размера, выполните в терминале следующую команду:
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+Чтобы изменить размер изображения до не более чем 300 пикселей в ширину и 200 пикселей в высоту, выполните следующую команду:
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### Сколько версий изображений нужно создавать?
+
+На этот вопрос нет однозначного «правильного» ответа, однако обычно используются 3–5 разных вариантов изображения. Выдача изображений различных размеров позволяет повысить производительность, но увеличивает расход места на серверах и требует написания дополнительного HTML-кода.
+
+### Другие варианты
+
+Вы также можете попробовать воспользоваться сервисами обработки изображений, такими как [Thumbor](https://github.com/thumbor/thumbor) (с открытым исходным кодом) и [Cloudinary](https://cloudinary.com/). Сервисы обработки изображений позволяют по требованию генерировать адаптивные изображения (и производить манипуляции с изображениями). Thumbor устанавливается на сервер, тогда как для Cloudinary настройка сервера не требуется. Оба этих решения являются простыми способами создания адаптивных изображений.
+
+## Загрузка различных вариантов изображений
+
+Укажите несколько вариантов изображения, и браузер выберет наиболее подходящую:
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>Было</strong></th>
+        <th><strong>Стало</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Для достижения конечного результата используется комбинация атрибутов [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src), [`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) и [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) элемента `<img>`.
+
+### Атрибут «src»
+
+Атрибут src позволяет коду работать в браузерах, которые [не поддерживают](https://caniuse.com/#search=srcset) `srcset` и `sizes`. Если браузер не поддерживает эти атрибуты, то загружается ресурс, указанный в атрибуте `src`.
+
+{% Aside 'gotchas' %} Ресурс, указанный в атрибуте `src`, должен быть достаточно большим, чтобы подходить для устройств любого размера. {% endAside %}
+
+### Атрибут «srcset»
+
+Атрибут `srcset` принимает разделенный запятыми список изображений с указанием имен файлов и дескрипторов ширины или плотности пикселей.
+
+В этом примере используются [дескрипторы ширины](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor). `480w` — это дескриптор ширины, сообщающий браузеру, что `flower-small.jpg` имеет ширину 480 пикселей; `1080w` — это дескриптор ширины, сообщающий браузеру, что `flower-large.jpg` имеет ширину 1080 пикселей.
+
+«Дескриптор ширины» звучит как что-то сложное, но в действительности он лишь сообщает браузеру ширину изображения, позволяя определить его размер без необходимости загрузки.
+
+{% Aside 'gotchas' %} Для указания дескрипторов ширины используйте окончание `w` (вместо `px`). Например, для изображения шириной 1024 пикселя следует указать дескриптор `1024w`. {% endAside %}
+
+**Дополнительная информация:** для показа изображений различных размеров вам не нужно ничего знать о дескрипторах плотности пикселей. Но если вам интересно, как они работают, ознакомьтесь с [проектом «Переключение разрешения» в Codelabs](/codelab-density-descriptors). Дескрипторы плотности пикселей используются для выбора изображений с учетом [плотности пикселей](https://en.wikipedia.org/wiki/Pixel_density) устройства.
+
+### Атрибут «sizes»
+
+Атрибут sizes сообщает браузеру, какую изображение будет иметь ширину при отображении. Однако атрибут sizes никак не учитывает размер экрана; для этого по-прежнему понадобится CSS.
+
+На основании этой информации, а также информации об устройстве пользователя, такой как размер и плотность пикселей, браузер выбирает изображение для загрузки.
+
+Если браузер не распознает атрибут «`sizes`», то будет загружено изображение, указанное в атрибуте «`src`». (Поддержка атрибутов «`sizes`» и «`srcset`» появилась в браузерах одновременно, поэтому браузер будет поддерживать либо оба атрибута, либо ни тот, ни другой.)
+
+{% Aside 'gotchas' %} Ширина области отображения может указываться в различных единицах. Все примеры ниже являются допустимыми:
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+Следующий размер не является допустимым:
+
+- `25%` (в атрибуте sizes нельзя использовать проценты) {% endAside %}
+
+**Дополнительная информация:** если вы хотите проявить изобретательность, вы также можете указать при помощи атрибута sizes несколько размеров областей отображения. Эту возможность можно использовать на сайтах, макет выбирается в зависимости от размера области просмотра. Чтобы узнать, как это сделать, ознакомьтесь с [примером кода, использующего множественные области отображения](/codelab-specifying-multiple-slot-widths).
+
+### Информация для дальнейшего изучения
+
+Помимо дополнительной информации, приведенной выше (изображения — сложная тема!), вы также можете использовать концепции, описанные в этой статье, для [художественного преобразования](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction). Художественное преобразование — это когда в зависимости от размера области просмотра происходит загрузка совершенно разных изображений (а не разных версий одного изображения). Подробности вы можете узнать, ознакомившись с [проектом «Художественное преобразование» в Codelabs](/codelab-art-direction).
+
+## Проверка
+
+После внедрения адаптивных изображений вы можете воспользоваться Lighthouse, чтобы убедиться, что ни одно изображение не было пропущено. Запустите в Lighthouse проверку производительности (**Lighthouse &gt; Options &gt; Performance**) и посмотрите результаты проверки **Properly size images** («Корректное масштабирование изображений»). Там вы увидите список изображений, которые требуют масштабирования.
diff --git a/src/site/content/ru/fast/use-imagemin-to-compress-images/index.md b/src/site/content/ru/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..248dc0c3c72
--- /dev/null
+++ b/src/site/content/ru/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: Сжатие изображений с помощью средства Imagemin
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: Несжатые изображения увеличивают размер страниц. С помощью Lighthouse можно находить возможности для сжатия изображений, чтобы ускорить загрузку страниц.
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## Зачем это нужно?
+
+Несжатые изображения увеличивают размер страниц. У фотографии справа размер файла на 40% меньше, чем у фотографии слева, но большинство пользователей, вероятно, не заметят различий между этими фотографиями.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 КБ</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 КБ</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## Измерение
+
+Запустите Lighthouse и проверьте, нет ли возможностей сжать изображения и тем самым ускорить загрузку страницы. Такие возможности будут указаны в разделе Efficiently encode images (Эффективное кодирование изображений):
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="Изображение", width="800", height="552" %}
+
+{% Aside %} В настоящее время Lighthouse проверяет, можно ли сжать изображения, только для формата JPEG. {% endAside %}
+
+## Imagemin
+
+Imagemin — отличное средство для сжатия изображений. Оно поддерживает широкий спектр форматов изображений и его легко интегрировать со сценариями и инструментами сборки. Средство Imagemin доступно как в виде [программы командной строки](https://github.com/imagemin/imagemin-cli), так и в виде [модуля npm](https://www.npmjs.com/package/imagemin). Как правило, лучше всего работать с модулем npm, так как в нем больше параметров конфигурации. Программа командной строки — достойная альтернатива, если вы хотите попробовать использовать Imagemin, не имея дела с кодом.
+
+### Подключаемые модули
+
+Средство Imagemin разработано для использования подключаемых модулей. Подключаемый модуль — это пакет npm, который сжимает изображения определенного формата (например, подключаемый модуль mozjpeg сжимает JPEG-файлы). Для популярных форматов изображений может быть доступно несколько подключаемых модулей.
+
+Самое важное, что нужно учитывать при выборе подключаемого модуля, — метод сжатия («с потерями» или «без потерь»). При сжатии без потерь данные изображения не теряются. При сжатии с потерями размер файла уменьшается, но за счет возможного снижения качества изображения. Если для подключаемого модуля не указан используемый метод сжатия («с потерями» или «без потерь»), его можно определить по API подключаемого модуля: если можно указать качество изображения на выходе, то используется метод сжатия «с потерями».
+
+Большинству людей лучше всего подходят подключаемые модули для сжатия с потерями. Они позволяют значительно уменьшать размеры файлов. Кроме того, можно настроить уровни сжатия в соответствии с вашими потребностями. В таблице ниже перечислены популярные подключаемые модули Imagemin. Это не все доступные подключаемые модули, но они хорошо подойдут для ваших проектов.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Формат изображения</th>
+        <th>Подключаемые модули для сжатия с потерями</th>
+        <th>Подключаемые модули для сжатия без потерь</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Программа командной строки Imagemin
+
+Программа командной строки Imagemin работает с пятью различными подключаемыми модулями: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant и imagemin-svgo. Средство Imagemin использует соответствующий подключаемый модуль в зависимости от формата изображения входных данных.
+
+Чтобы сжать изображения в каталоге images/ и сохранить их в том же каталоге, выполните следующую команду (при этом исходные файлы будут перезаписаны):
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Модуль npm Imagemin
+
+Если вы применяете одно из средств сборки, попробуйте использовать codelabs для Imaginemin с [webpack](/codelab-imagemin-webpack), [gulp](/codelab-imagemin-gulp) или [grunt](/codelab-imagemin-grunt).
+
+Кроме того, можно использовать само средство Imagemin в качестве сценария Node. В этом коде используется подключаемый модуль imagemin-mozjpeg для сжатия JPEG-файлов до уровня качества 50 (где 0 — самое низкое, а 100 — самое высокое качество):
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/ru/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/ru/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..b830367723e
--- /dev/null
+++ b/src/site/content/ru/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: Используйте Lighthouse для расчета бюджета производительности
+authors:
+  - katiehempenius
+description: Теперь Lighthouse поддерживает бюджеты производительности. Эта функция, LightWallet, предоставляет информацию о размерах и количестве ресурсов страницы, а настроить ее можно всего за пять минут.
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+Теперь [Lighthouse](https://github.com/GoogleChrome/lighthouse) поддерживает бюджеты производительности. Эта функция, [LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets), предоставляет информацию о показателях производительности, размерах и количестве ресурсов страницы, а настроить ее можно всего за пять минут.
+
+## Установите Lighthouse
+
+LightWallet доступен в версии Lighthouse v5 и выше для командной строки.
+
+Для начала установите Lighthouse:
+
+```bash
+npm install -g lighthouse
+```
+
+## Создайте бюджет
+
+Создайте файл с именем `budget.json`. В этот файл добавьте следующий JSON:
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+В показанном файле `budget.json` задаются пять отдельных бюджетов:
+
+- Бюджет Time to Interactive (времени до интерактивности) составляет 3000 мс.
+- Бюджет First Meaningful Paint (первой значимой отрисовки) составляет 1000 мс.
+- Бюджет на общий объем JavaScript на странице равен 125 КБ.
+- Бюджет общего размера страницы равен 300 КБ.
+- Бюджет на количество запросов к сторонним источникам равен 10 запросам.
+
+Полный список поддерживаемых показателей производительности и типов ресурсов см. в разделе «[Бюджеты производительности](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md)» документации Lighthouse.
+
+## Запустите Lighthouse
+
+Запустите Lighthouse с флагом `--budget-path`. Этот флаг сообщает Lighthouse местонахождение вашего файла бюджета.
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %} **Примечание**: файл бюджета не обязательно должен называться `budget.json`. {% endAside %}
+
+## Посмотрите результаты
+
+Если LightWallet настроен правильно, отчет Lighthouse будет содержать раздел «**Бюджеты**» в категории «**Производительность**».
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="Раздел «Бюджеты» отчета Lighthouse", width="800", height="289" %}
+
+В версии отчета Lighthouse в формате JSON результаты Lightwallet можно найти в результатах аудита `performance-budget`.
diff --git a/src/site/content/ru/fast/why-speed-matters/index.md b/src/site/content/ru/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..cab64e930e1
--- /dev/null
+++ b/src/site/content/ru/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: Почему важна скорость?
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: Скорость имеет важное значение для комфорта пользователей. Задержки, вызванные скоростью мобильного соединения, не просто раздражают пользователей, но и могут негативно отражаться на бизнес-результатах.
+web_lighthouse: N/A
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+Потребители все чаще полагаются на мобильные устройства для доступа к цифровому контенту и услугам, и если вы изучите аналитику своего сайта, то, вероятно, только убедитесь в истинности этого утверждения. Кроме того, потребители стали более требовательными, чем раньше, и когда они оценивают уровень комфорта от использования вашего сайта, то сравнивают вас не только с вашими конкурентами, но и с ведущими сервисами, которыми они пользуются каждый день.
+
+В этой статье кратко рассказывается о проведенных исследованиях, посвященных взаимосвязи между производительностью сайтов и их коммерческой успешностью.
+
+## Производительность — это ключ к удержанию пользователей
+
+<figure data-float="right">
+  <blockquote>
+    <p>Производительность напрямую влияет на прибыль нашей компании.</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">Pinterest</a></p>
+    </cite>
+  </blockquote></figure>
+
+Производительность сайтов играет важную роль в успехе любого онлайн-бизнеса. Высокопроизводительные сайты лучше привлекают и удерживают пользователей, чем медленные сайты.
+
+Сокращение субъективного времени ожидания на 40% позволило Pinterest [увеличить число регистраций и переходов из поисковых систем на 15%](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7).
+
+Компания COOK сократила среднее время загрузки страницы на 850 миллисекунд, и это привело к [увеличению конверсии на 7%, снижению показателя отказов на 7%, а также 10-процентному увеличению количества просмотренных страниц за сеанс](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf).
+
+Исследования также продемонстрировали негативное влияние низкой производительности на достижение бизнес-целей. Например, компания [BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale) обнаружила, что каждая последующая секунда, затрачиваемая на загрузку их сайта, приводила к потере дополнительных 10% пользователей.
+
+## Производительность позволяет повысить конверсию
+
+Удержание пользователей имеет решающее значение для повышения конверсии. Медленная скорость сайтов негативно влияет на доход, а быстрые сайты повышают коэффициент конверсии.
+
+Компания [Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html) обнаружила, что каждые 100 мс, сэкономленные при загрузке домашней страницы, позволили увеличить сеансовую конверсию на 1,11%, благодаря чему среднегодовой доход вырос почти на 380 000 $. Кроме того, снижение на 100 мс задержки при загрузке страницы оформления заказа позволило увеличить сеансовую конверсию на 1,55%, что, в свою очередь, увеличило среднегодовой доход почти на 530 000 $.
+
+Когда [компания AutoAnything вдвое сократила время загрузки страницы](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/), их продажи выросли на 12–13%.
+
+Компания [Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/), занимающаяся розничными продажами, провела аудит скорости своего сайта и разработала план по решению выявленных проблем. Реализация плана позволила сократить время загрузки страницы на 20% и повысить коэффициент конверсии на 10%.
+
+## Производительность повышает комфорт пользователей
+
+Скорость имеет важное значение для комфорта пользователей. Согласно [исследованию потребительского поведения](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report), задержки при использовании мобильного соединения вызывают у пользователей такой же сильный стресс, как при просмотре фильма ужасов или решении математической задачи, и более сильный, чем во время ожидания в очереди на кассе.
+
+При загрузке сайта проходит какое-то время, прежде чем пользователь сможет увидеть контент. Пока этого не произойдет, нет смысла и говорить о каком-либо опыте взаимодействия с сайтом. При использовании быстрого соединения задержка является минимальной, однако при медленном соединении ожидание занимает много времени. По мере того как страница постепенно загружает ресурсы, пользователи могут столкнуться с дополнительными проблемами.
+
+<figure> {% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="Покадровое сравнение скорости загрузки страницы. Первая последовательность показывает загрузку страницы на медленном соединении, а вторая — на быстром.", width="800", height="264" %} <figcaption>Сравнение скорости загрузки страницы при использовании медленного соединения (вверху) и быстрого соединения (внизу).</figcaption></figure>
+
+Производительность — это основополагающий аспект пользовательского комфорта. Когда сайт перегружен избыточным кодом, браузер вынужден тратить на его загрузку мегабайты трафика из тарифного плана пользователя. Мобильные устройства обладают ограниченной мощностью процессора и объемом памяти. Они с трудом справляются с выполнением неоптимизированного кода, объем которого может показаться нам небольшим. Это приводит к низкой производительности и зависаниям. Исходя из того, что нам известно о человеческом поведении, пользователи терпят медленные приложения лишь до поры до времени, а затем от них отказываются.
+
+## Производительность — это часть заботы о людях
+
+Сайты и приложения с низкой производительностью могут причинять реальный вред людям, которые ими пользуются.
+
+[Поскольку мобильные пользователи по-прежнему составляют большую часть пользователей Интернета во всем мире](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet), важно помнить, что многие из них выходят в сеть через мобильные сети LTE, 4G, 3G и даже 2G. Как отмечает в [своем исследовании реальной производительности](https://calibreapp.com/blog/beyond-the-bubble) Бен Шварц из Calibre, стоимость тарифных планов с предоплатой трафика снижается, что, в свою очередь, делает Интернет доступным для тех, кто раньше не мог его себе позволить. Мобильные устройства и доступ в Интернет больше не являются роскошью. Они повсеместно используются людьми для того, чтобы ориентироваться и действовать во все более взаимосвязанном мире.
+
+[Средний размер веб-страниц неуклонно растет как минимум с 2011 года](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal), и эта тенденция, похоже, сохраняется. Поскольку на загрузку типичной веб-страницы тратится много трафика, пользователи вынуждены тратить больше денег, пополняя счет мобильного телефона.
+
+Быстрые и простые сайты не только экономят деньги пользователей, но и могут сыграть решающее значение для пользователей, находящихся в кризисной ситуации. Учреждения общественной важности, такие как больницы, клиники и кризисные центры, имеют сайты, при помощи которых распространяют важную информацию, необходимую пользователям в критические моменты. [Хотя для эффективного восприятия важной информации в стрессовые моменты крайне важен продуманный дизайн](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis), ни в коем случае нельзя недооценивать важность быстрой доставки этой информации. Это часть наших обязанностей.
+
+## Начните работу над повышением скорости вашего сайта {: #get-started }
+
+Ознакомьтесь с [Core Web Vitals](/vitals/#core-web-vitals), чтобы узнать о показателях, на которые, по мнению Google, должны ориентироваться все сайты.
+
+<blockquote>
+  <p>Мы продолжаем работу в этом направлении и сегодня расскажем, как перечисленные показатели будут учитываться в обновленном алгоритме ранжирования результатов поиска. Мы собираемся внедрить новый сигнал, объединяющий показатели Core Web Vitals с введенными ранее сигналами. Так мы сможем получать более полное представление о том, насколько удобна для пользователей та или иная страница.</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">Оценка удобства страниц</a>, официальный блог Google Webmaster Central</cite>
+</blockquote>
+
+Затем ознакомьтесь с разделом [Быстрое время загрузки](/fast/), где вы найдете множество советов и приемов, позволяющих повысить или сохранить скорость.
diff --git a/src/site/content/ru/feed.njk b/src/site/content/ru/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/ru/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/ru/identity/index.md b/src/site/content/ru/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/ru/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/ru/identity/sign-in-form-best-practices/index.md b/src/site/content/ru/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..3ea8a687f5b
--- /dev/null
+++ b/src/site/content/ru/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: Рекомендации по формам входа в систему
+subhead: Используя кроссплатформенные функции браузеров, создавайте безопасные и простые в применении формы входа в систему с поддержкой специальных возможностей.
+authors:
+  - samdutton
+scheduled: true
+date: 2020-06-29
+updated: 2021-09-27
+description: Используя кроссплатформенные функции браузеров, создавайте безопасные и простые в применении формы входа в систему с поддержкой специальных возможностей.
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: Человек, держащий телефон.
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+Если нужно, чтобы пользователи выполняли вход в систему на вашем сайте, очень важно правильно разработать дизайн формы входа. Последнее особенно важно для пользователей, у которая плохая связь, которые пользуются сайтом с мобильных устройств, спешат или находятся в стрессе. Плохо разработанные формы входа в систему увеличивают показатель отказов от использования сайта. Каждый отказ может означать потерянного и недовольного пользователя, а не просто упущенную возможность входа в систему.
+
+{% Aside 'codelab' %} Если вы хотите изучить эти рекомендации с помощью практического руководства, ознакомьтесь с codelab «[Рекомендации по формам входа в систему](/codelab-sign-in-form-best-practices/)». {% endAside %}
+
+Вот пример простой формы входа в систему, в дизайне которой реализованы все рекомендации:
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+## Контрольный список
+
+- [Используйте понятные элементы HTML](#meaningful-html): `<form>`, `<input>`, `<label>` и `<button>`.
+- [Для каждого поля ввода данных создайте соответствующую подпись `<label>`](#label).
+- Для [доступа к встроенным функциям браузера](#element-attributes) используйте атрибуты элементов: `type`, `name`, `autocomplete` и `required`.
+- Присвойте атрибутам `name` и `id` стабильные значения, которые не будут изменяться между загрузками страницы или развертываниями веб-сайта.
+- Поместите форму входа в систему в [отдельный элемент <form>](#form).
+- [Примите все меры для успешной отправки формы](#submission).
+- Для ввода пароля в форме регистрации и для ввода нового пароля в форме сброса пароля используйте параметры [`autocomplete="new-password"`](#new-password) и [`id="new-password"`](#new-password).
+- Для ввода пароля при входе в систему используйте параметры [`autocomplete="current-password"`](#current-password) и [`id="current-password"`](#current-password).
+- Реализуйте функцию «[Показать пароль](#show-password)».
+- Для ввода пароля [используйте элементы `aria-label` и `aria-describedby`](#accessible-password-inputs).
+- [Не дублируйте вводимые данные](#no-double-inputs).
+- Разрабатывайте формы таким образом, чтобы [мобильная клавиатура не закрывала собой поля ввода данных и кнопки](#keyboard-obstruction).
+- Проверьте, удобно ли работать с формами на мобильных устройствах: используйте [хорошо читаемый текст](#size-text-correctly) и убедитесь, что поля ввода данных и кнопки [достаточно велики, чтобы использовать их в качестве сенсорных элементов управления](#tap-targets).
+- [Используйте фирменные оформление и стиль](#general-guidelines) на страницах регистрации и входа в систему.
+- [Выполните тестирование как в «полевых», так и в лабораторных условиях](#analytics): добавьте в потоки регистрации и входа в систему средства аналитики страниц, аналитики взаимодействия и ориентированного на пользователей измерения производительности.
+- [Выполните тестирование в разных браузерах и на разных устройствах](#devices): поведение формы может значительно отличаться на разных платформах.
+
+{% Aside %} В этой статье изложены рекомендации по работе с интерфейсной частью. В ней не рассказывается, как создавать серверные службы для проверки подлинности пользователей, хранения их учетных данных или управления учетными записями. В статье [12 рекомендаций по управлению учетными записями пользователей, авторизацией и паролями](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account) изложены основные принципы организации серверной части. Если ваши пользователи находятся в разных частях мира, выполните локализацию содержимого сайта, а также сторонних служб по работе с удостоверениями.
+
+Кроме того, существует два указанных ниже относительно новых API, которые не рассмотрены в этой статье и с помощью которых можно улучшить процесс входа в систему.
+
+- [**WebOTP**](/web-otp/): используется для доставки одноразовых секретных кодов или PIN-кодов с помощью SMS на мобильные телефоны. Благодаря этому пользователи могут выбрать номер телефона в качестве идентификатора (не нужно будет вводить адрес электронной почты). Кроме того, можно будет использовать двухэтапную проверку для входа в систему и одноразовые коды для подтверждения платежей.
+- [**Управление учетными данными**](https://developer.chrome.com/blog/credential-management-api/): позволяет разработчикам программным способом хранить и получать учетные данные с паролями и федеративные учетные данные. {% endAside %}
+
+## Используйте понятный HTML {: #meaningful-html }
+
+Используйте элементы, созданные для форм: `<form>`, `<label>` и `<button>`. Они позволяют использовать встроенные функции браузера, лучше поддерживать специальные возможности и делают разметку понятной.
+
+### Используйте элемент `<form>` {: #form }
+
+У вас может возникнуть соблазн вложить поля ввода данных в элементы `<div>` и отправлять входные данные исключительно с помощью JavaScript. В общем случае лучше использовать старый простой элемент [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form). Благодаря этому ваш сайт будет доступен для программ чтения с экрана и других устройств, обеспечивающих специальные возможности, вы сможете использовать ряд встроенных функций браузера, вам будет проще создавать базовые функциональные средства для входа в систему для старых браузеров, и это все будет работать даже в случае сбоя JavaScript.
+
+{% Aside 'gotchas' %} Одна из распространенных ошибок — вложить всю веб-страницу в одну форму; это может привести к проблемам, связанным с диспетчерами паролей и функциями автозаполнения в браузерах. Используйте отдельный элемент <form> для каждого компонента пользовательского интерфейса, для работы которого требуется форма. Например, если на одной странице имеется функция входа в систему и функция поиска, следует использовать два элемента формы. {% endAside %}
+
+### Используйте элемент `<label>` {: #label }
+
+Создать подпись для поля ввода данных можно с помощью элемента [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+
+```html
+<label for="email">Адрес электронной почты</label>
+<input id="email" …>
+```
+
+Вот две причины, по которым нужно делать это.
+
+- При касании подписи или щелчку по ней фокус будет перемещен на поле ввода данных, с которым связана подпись. Свяжите подпись с полем ввода данных, используя атрибут `for` подписи с параметром `name` или `id` поля ввода данных.
+- Программы чтения с экрана воспроизводят текст подписи, когда фокус перемещается на подпись или на поле ввода данных, связанное с подписью.
+
+Не используйте заполнители в качестве подписей, связанных с полями ввода данных. Люди склонны забывать, что было указано в поле ввода данных, как только они начинают вводить текст, особенно если они отвлеклись («Что нужно было ввести? Адрес электронной почты, номер телефона или идентификатор учетной записи?»). Есть много других потенциальных проблем с заполнителями: если вы до сих пор не согласны с этим, см. статьи «[Не используйте атрибут заполнителя](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)» и «[Заполнители в полях формы вредны](https://www.nngroup.com/articles/form-design-placeholders/)».
+
+Вероятно, самый лучший вариант — размещать подписи над полями ввода данных. Это позволяет создать единообразный дизайн для мобильных устройств и ПК и (согласно [исследованиям ИИ Google](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)) ускоряет «сканирование» элементов управления пользователями. Подписи и поля ввода данных будут иметь полную ширину, и вам не придется ее корректировать, чтобы подписи и поля ввода данных соответствовали тексту подписей.
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="Снимок экрана, на котором показано положение подписи для поля ввода данных в форме на мобильном устройстве: рядом с полем ввода данных и над полем ввода данных.", width="500", height="253" %} <figcaption>Если подпись и поле ввода данных находятся в одной строке, их ширина ограничена.</figcaption></figure>
+
+Откройте Glitch [label-position](https://label-position.glitch.me) на мобильном устройстве и убедитесь в этом сами.
+
+### Используйте элемент `<button>` {: #button }
+
+Используйте элемент [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) для кнопок. Элементы кнопок поддерживают специальные возможности и встроенные функции отправки форм. Кроме того, к ним можно легко применять стили. Нет смысла использовать в качестве кнопки элемент `<div>` или какой-нибудь другой элемент.
+
+Убедитесь, что на кнопке отправки написано, что она делает. Примеры: **Создать учетную запись** или **Войти**, но не **Отправить** или **Начать**.
+
+### Что нужно сделать для успешной отправки формы {: #submission }
+
+Сделайте так, чтобы диспетчеры паролей «понимали», что форма отправлена. Для этого можно воспользоваться двумя указанными ниже способами.
+
+- Перейти на другую страницу.
+- Имитировать переход с помощью метода `History.pushState()` или `History.replaceState()` и удалить форму ввода пароля.
+
+Выполнив запрос `XMLHttpRequest` или `fetch`, убедитесь, что в ответе сообщается об успешном входе в систему и выполняется обработка входа в систему путем извлечения формы из DOM, а также имеется информация об успешном выполнении для пользователя.
+
+Рассмотрите возможность отключения кнопки **Войти** после того как пользователь нажмет ее. [Многие пользователи нажимают кнопки несколько раз](https://baymard.com/blog/users-double-click-online) даже на быстро реагирующих сайтах. Такие действия замедляют взаимодействие и увеличивают нагрузку на сервер.
+
+И наоборот, не отключайте функцию отправки формы, ожидающую ввод данных пользователем. Например, не отключайте кнопку **Войти**, если пользователь не ввел PIN-код клиента. Пользователь может что-то пропустить в форме, а затем попытаться несколько раз нажать (отключенную) кнопку **Войти** и подумать, что она не работает. Если необходимо отключить функцию отправки формы, объясните пользователю, каких данных не хватает, когда он нажимает отключенную кнопку.
+
+{% Aside 'caution' %} По умолчанию в форме используются кнопки типа `submit`. Если нужно добавить еще одну кнопку в форму (например, для команды **Показать пароль**), добавьте элемент `type="button"`. В противном случае при нажатии кнопки будет отправлена форма.
+
+Когда фокус находится на любом поле формы, нажатие клавиши `ВВОД` приводит к щелчку по первой кнопке `submit` в форме. Если добавить в форму какую-либо кнопку перед кнопкой **Отправить** и не указать ее тип, эта кнопка будет иметь тип, используемый по умолчанию для кнопок в форме (`submit`), и получит событие щелчка перед отправкой формы. В качестве примера см. нашу [демонстрацию](https://enter-button.glitch.me/): заполните форму и нажмите клавишу `ВВОД`. {% endAside %}
+
+### Не дублируйте поля ввода данных {: #no-double-inputs }
+
+На некоторых сайтах пользователям необходимо дважды вводить адрес электронной почты или пароль. Это позволяет уменьшить количество ошибок для небольшого числа пользователей, но при этом *всем* пользователям нужно выполнять дополнительную работу, что [увеличивает показатель отказов](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/). Кроме того, нет смысла просить пользователя дважды вводить данные, когда браузеры автоматически вводят адреса электронной почты или предлагают надежные пароли. Лучше разрешить пользователям подтверждать свой адрес электронной почты (вам все равно нужно это сделать) и при необходимости упростить для них процедуру сброса пароля.
+
+## Максимально полно используйте возможности, предоставляемые атрибутами элементов {: #element-attributes }
+
+Вот где действительно происходит волшебство! В браузерах есть несколько полезных встроенных функций, для которых используются атрибуты полей ввода данных.
+
+## Скрывайте пароли, но позволяйте пользователям просматривать их при необходимости {: #show-password }
+
+Поля ввода паролей должны иметь тип `type="password"`, чтобы можно было скрыть текст пароля и сообщить браузеру, что то или иное поле ввода данных предназначено для паролей. (Обратите внимание, что в браузерах используются [различные методы](#autofill) определения ролей полей ввода данных и принятия решений о том, предлагать или не предлагать пользователям сохранять пароли.)
+
+Добавьте значок или кнопку **Показать пароль**, чтобы пользователь мог проверить введенный текст. Кроме того, обязательно добавьте ссылку **Забыли пароль?**. См. раздел «[Включение функции отображения пароля](#password-display)».
+
+<figure>{% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="Форма входа в систему Google, на которой отображен значок Show password (Показать пароль).", width="300", height="107" %} <figcaption>Поле ввода пароля на форме входа в систему Google со значком <strong>Show password</strong> (Показать пароль) и ссылкой <strong>Forgot password</strong> (Забыли пароль?).</figcaption></figure>
+
+## Предоставьте пользователям мобильных устройств подходящую клавиатуру {: #mobile-keyboards }
+
+Используя элемент `<input type="email">`, можно предоставить пользователям мобильных устройств подходящую клавиатуру и включить базовую встроенную функцию проверки адреса электронной почты в браузере. При этом не потребуется использовать JavaScript.
+
+Если вам нужно использовать номер телефона вместо адреса электронной почты, элемент `<input type="tel">` позволяет активировать клавиатуру для ввода номера телефона на мобильном телефоне. При необходимости также можно использовать атрибут `inputmode`: элемент `inputmode="numeric"` идеально подойдет для ввода числовых PIN-кодов. Подробные сведения см. в статье «[Все, что вы хотели знать о режиме ввода](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)».
+
+{% Aside 'caution' %} При использовании атрибута `type="number"` в поле ввода данных отображаются стрелки вверх или вниз для изменения числа, поэтому не применяйте его для чисел, которые не предполагается увеличивать или уменьшать, например идентификаторов и номеров счетов. {% endAside %}
+
+### Клавиатура на экране мобильного устройства не должна закрывать собой кнопку «**Войти**» {: #keyboard-obstruction }
+
+К сожалению, если вы не будете аккуратны, клавиатура на экране мобильного устройства может закрыть собой форму или (что еще хуже) кнопку **Войти**. В этом случае пользователи могут прекратить пытаться войти в систему, прежде чем осознают, что произошло.
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Два снимка экрана с формой входа в систему на телефоне с ОС Android: на одном их них показано, как клавиатура телефона закрывает собой кнопку Submit (Отправить).", width="400", height="360" %} <figcaption>Кнопка <b>Sign in</b> (Войти) видна на одном экране, но не видна на другом.</figcaption></figure>
+
+По возможности избегайте этого, отображая поля ввода адреса электронной почты, телефона и пароля, а также кнопку **Войти** в верхней части страницы входа в систему. Остальной контент разместите под этими элементами.
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Снимок экрана, на котором показана форма входа в систему на телефоне с ОС Android: кнопка Sign in (Войти) не закрыта клавиатурой телефона.", width="200", height="342" %} <figcaption>Клавиатура не закрывает собой кнопку <b>Sign in</b> (Войти).</figcaption></figure>
+
+#### Выполните тестирование на разных устройствах {: #devices }
+
+Вам потребуется выполнить тестирование на ряде устройств, используемых вашей целевой аудиторией, и внести соответствующие корректировки. С помощью BrowserStack можно [бесплатно тестировать проекты с открытым исходным кодом](https://www.browserstack.com/open-source) на различных реальных устройствах и браузерах.
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="Снимки экрана с формой входа в систему на iPhone 7, iPhone 8 и iPhone 11. На iPhone 7 и iPhone 8 кнопка Sign in (Войти) закрыта клавиатурой телефона, а на iPhone 11 — нет", width="800", height="522" %} <figcaption>Кнопка <b>Sign in</b> (Войти) закрыта на iPhone 7 и iPhone 8, но не на iPhone 11.</figcaption></figure>
+
+#### Попробуйте использовать две страницы {: #two-pages }
+
+Некоторые сайты (в том числе Amazon и eBay) избегают этой проблемы, запрашивая адрес электронной почты или номер телефона и пароль на двух страницах. Кроме того, этот подход упрощает взаимодействие с пользователем: пользователю требуется выполнять только по одной задаче за раз.
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="Снимок экрана с формой входа в систему на веб-сайте Amazon: поля ввода адреса электронной почты или номера телефона и пароля расположены на двух отдельных страницах.", width="400", height="385" %} <figcaption>Двухэтапный вход в систему: ввод адреса электронной почты или номера телефона, а затем пароля.</figcaption></figure>
+
+В идеальном случае следует реализовать этот подход с помощью одного элемента <form>. С помощью JavaScript можно сначала отобразить только поле ввода адреса электронной почты, затем скрыть его и отобразить поле ввода пароля. Если необходимо заставить пользователя перейти на новую страницу между вводом адреса электронной почты и вводом пароля, в форме на второй странице должен быть скрытый элемент поля ввода данных со значением адреса электронной почты, чтобы диспетчеры паролей могли сохранять правильные значения. Пример кода см. в статье «[Стили форм ввода паролей, которые понимает Chromium](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)».
+
+### Избавьте пользователей от необходимости повторно вводить данные {: #autofill }
+
+Вы можете помочь браузерам правильно хранить данные и автоматически заполнять поля ввода данных, чтобы пользователям не приходилось вводить адреса электронной почты и пароли. Это особенно важно для мобильных устройств и критически важно для полей ввода адресов электронной почты, для которых наблюдается [большое количество отказов](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/).
+
+Этот процесс включает две указанные ниже части.
+
+1. Благодаря атрибутам `autocomplete`, `name`, `id` и `type` браузер «понимает» роль полей ввода данных. Это позволяет сохранять данные и впоследствии использовать их для автозаполнения полей. Чтобы можно было хранить данные для автозаполнения, в современных браузерах также требуется, чтобы поля ввода данных имели стабильные значения атрибутов `name` или `id` (а не создаваемые случайным образом при каждой загрузке страницы или развертывании сайта) и присутствовали в форме <form> наряду с кнопкой `submit`.
+
+2. Атрибут `autocomplete` помогает браузерам правильно автоматически заполнять поля ввода данных ранее сохраненными данными.
+
+Для ввода адресов электронной почты используйте параметр `autocomplete="username"`, так как в современных браузерах диспетчеры паролей распознают параметр `username` даже в тех случаях, когда следует использовать параметр `type="email"`. Кроме того, вам, возможно, потребуется использовать параметры `id="email"` и `name="email"`.
+
+Для полей ввода паролей используйте соответствующие значения атрибутов `autocomplete` и `id`, чтобы браузеры могли различать новые и текущие пароли.
+
+### Используйте атрибуты `autocomplete="new-password"` и `id="new-password"` для нового пароля {: #new-password }
+
+- Используйте атрибуты `autocomplete="new-password"` и `id="new-password"` для полей ввода паролей в форме регистрации или новых паролей в форме изменения пароля.
+
+### Используйте атрибуты `autocomplete="current-password"` и `id="current-password"` для текущего пароля {: #current-password }
+
+- Используйте атрибуты `autocomplete="current-password"` и `id="current-password"` для поля ввода пароля в форме входа в систему или поля ввода старого пароля пользователя в форме изменения пароля. Таким образом вы сообщите браузеру, что нужно использовать текущий пароль, который он сохранил для данного сайта.
+
+Для формы регистрации:
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+Для формы входа в систему:
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %} В некоторых браузерах, например в Chrome, может использоваться собственный диспетчер паролей для автоматического заполнения полей в процессе входа в систему для пользователей, уже посещавших тот или иной сайт. Чтобы эти функции работали, у браузера должна быть возможность определять случаи, когда пользователь меняет свой пароль.
+
+В частности, после настройки нового пароля необходимо очистить форму для изменения пароля пользователя или скрыть ее со страницы. Если форма для изменения пароля пользователя остается заполненной на странице после изменения пароля, браузер не сможет записать обновленные сведения. {% endAside %}
+
+### Поддержка диспетчеров паролей {: #password-managers }
+
+В разных браузерах функции автозаполнения адреса электронной почты и предложения пароля работают по-разному, но результаты во многом одинаковы. Например, в Safari 11 и более поздних версий на настольных компьютерах отображается диспетчер паролей, а затем используется биометрическая проверка подлинности (проверка отпечатка пальца или распознавание лица), если она доступна.
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="Снимки экрана трех этапов процесса входа в систему в браузере Safari на настольном компьютере: диспетчер паролей, биометрическая проверка подлинности, автозаполнение.", width="800", height="234" %} <figcaption>Вход в систему с помощью функции автозаполнения — не нужно вводить текст.</figcaption></figure>
+
+Chrome для настольных компьютеров предлагает варианты адресов электронной почты, отображает диспетчер паролей и автоматически вводит пароль.
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="Снимки экрана четырех этапов процесса входа в систему в Chrome на настольном компьютере: ввод адреса электронной почты, предложение адреса электронной почты, диспетчер паролей, автозаполнение при выборе.", width="800", height="232" %} <figcaption>Автозаполнение в процессе входа в систему в Chrome 84.</figcaption></figure>
+
+Системы работы с паролями и автозаполнения в браузерах не просты. Алгоритмы прогнозирования, хранения и отображения значений не стандартизированы и зависят от конкретной платформы. Например, [Хидде де Фрис](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form) (Hidde de Vries) говорит следующее: «В Firefox эвристические функции диспетчера паролей дополнены [системой рецептов](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)».
+
+В статье «[Автозаполнение: что должны знать, но не знают веб-разработчики](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)» содержится намного больше информации об использовании атрибутов `name` и `autocomplete`. В [спецификации HTML](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control) перечислены все 59 возможных значений.
+
+{% Aside %} Вы можете помочь диспетчерам паролей, используя разные значения атрибутов `name` и `id` в формах регистрации и формах входа в систему для самого элемента `form`, а также для любых элементов `input`, `select` и `textarea` {% endAside %}
+
+### Предоставьте браузеру возможность предлагать надежные пароли {: #password-suggestions }
+
+В современных браузерах для принятия решений о том, когда отображать пользовательский интерфейс диспетчера паролей и предлагать надежный пароль, используются эвристические функции.
+
+Вот как это работает в Safari для настольных компьютеров.
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="Снимок экрана с диспетчером паролей Firefox на настольном компьютере.", width="800", height="229" %} <figcaption>Процесс предложения пароля в Safari.</figcaption></figure>
+
+(Функция предложения надежных уникальных паролей доступна в Safari, начиная с версии 12.0.)
+
+Благодаря встроенным генераторам паролей в браузерах пользователям и разработчикам не нужно продумывать, что такое «надежный пароль». Так как браузеры могут безопасно хранить пароли и при необходимости автоматически вводить их, пользователям не нужно запоминать или вводить пароли. Если поощрять пользователей применять встроенные генераторы паролей в браузерах, они с большей вероятностью будут использовать уникальные надежные пароли на вашем сайте и с меньшей вероятностью будут повторно использовать пароли, которые, возможно, скомпрометированы на других сайтах.
+
+{% Aside %} Недостаток такого подхода заключается в том, что нет возможности обмениваться паролями между платформами. Например, пользователь может использовать Safari на iPhone и Chrome на ноутбуке с ОС Windows. {% endAside %}
+
+### Сделайте так, чтобы пользователи не пропускали поля ввода данных {: #required-fields }
+
+Добавляйте атрибут `required` в поля ввода адреса электронной почты и пароля. Современные браузеры автоматически запрашивают недостающие данные и перемещают фокус на них. В этом случае не потребуется использовать JavaScript.
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="Снимок экрана с Firefox для настольного компьютера и Chrome для ОС Android, на котором показана подсказка Please fill out this field (Заполните это поле) для незаполненного поля.", width="600", height="392" %} <figcaption> Подсказка и фокус на незаполненном поле в Firefox (версии 76) для настольного компьютера и Chrome (версии 83) для ОС Android. </figcaption></figure>
+
+## Дизайн для пальцев и больших пальцев {: #mobile-design }
+
+По умолчанию размеры всех элементов ввода данных и кнопок в браузерах слишком малы (особенно на мобильных устройствах). Это может показаться очевидным, но такая проблема широко распространена в формах входа в систему на многих сайтах.
+
+### Убедитесь, что поля ввода данных и кнопки имеют достаточно большой размер {: #tap-targets }
+
+Размеры и отступы, используемые по умолчанию для полей ввода данных и кнопок, слишком малы на настольных компьютерах и еще меньше на мобильных устройствах.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="Снимок экрана с формой без стиля в Chrome для настольных компьютеров и Chrome для ОС Android.", width="800", height="434" %}</figure>
+
+Согласно [руководству по специальным возможностям в ОС Android](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB) рекомендуемый целевой размер объектов на сенсорных экранах равен 7–10 мм. В рекомендациях компании Apple по интерфейсу рекомендуется размер 48 x 48 пикселей, а организация W3C рекомендует использовать элементы с размером [не менее 44 x 44 пикселя CSS](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html). Исходя из этого, добавьте отступ размером приблизительно 15 пикселей (как минимум) для элементов ввода данных и кнопок для мобильных устройств и приблизительно 10 пикселей для настольных компьютеров. Попробуйте использовать такие элементы управления на реальном мобильном устройстве и с помощью реальных пальцев или большого пальца. Вам должно быть удобно нажимать каждое поле ввода данных и каждую кнопку.
+
+С помощью аудита Lighthouse [Tap targets are not sized appropriately](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/) можно автоматизировать процесс обнаружения слишком маленьких элементов ввода данных.
+
+#### Дизайн для больших пальцев {: #design-for-thumbs }
+
+Если выполнить поиск по ключевым словам [touch target](https://www.google.com/search?q=touch+target) (цель касания), отобразится множество изображений указательных пальцев. Тем не менее в реальной жизни для взаимодействия с телефоном многие люди используют большие пальцы. Большие пальцы имеют больший размер, чем указательные, и управлять с их помощью устройствами менее удобно. Это еще одна причина создавать элементы управления правильного размера для сенсорных экранов.
+
+### Сделайте шрифт текста достаточно большим {: #size-text-correctly }
+
+Как в случае с размерами и отступами, в браузерах для элементов ввода данных и кнопок по умолчанию используется слишком малый шрифт (особенно на мобильных устройствах).
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="Снимок экрана с формой без стиля в Chrome на настольном компьютере и в ОС Android.", width="800", height="494" %} <figcaption>Стиль, используемый по умолчанию, на настольном компьютере и на мобильном устройстве: шрифт вводимого текста слишком мал, и для многих пользователей он неразборчив.</figcaption></figure>
+
+В браузерах на разных платформах используются разные размеры шрифтов, поэтому сложно указать конкретный размер шрифта, который будет хорошо работать везде. Небольшой обзор популярных веб-сайтов показывает, что размер используемых на них шрифтов на экранах настольных компьютеров составляет 13–16 пикселей. Этот физический размер — хороший минимум для отображения текста на мобильных устройствах.
+
+Это означает, что для мобильных устройств следует использовать больший размер шрифта в пикселях: шрифт размером `16 пикселей` в Chrome для настольных компьютеров вполне разборчив, но даже при хорошем зрении трудно читать шрифт размером `16 пикселей` в Chrome для ОС Android. Можно настроить разные размеры шрифтов в пикселях для разных размеров областей просмотра с помощью [медиа-запросов](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size). Шрифт размером `20 пикселей` практически идеально подходит для мобильных устройств, но вам следует проверить его на друзьях или коллегах с плохим зрением.
+
+С помощью аудита Lighthouse [Document doesn't use legible font sizes](https://developer.chrome.com/docs/lighthouse/seo/font-size/) можно автоматизировать процесс обнаружения слишком мелкого текста.
+
+### Оставьте достаточно места между полями ввода данных {: #size-margins-correctly }
+
+Оставьте достаточно места вокруг элементов управления, чтобы полями ввода данных было удобно пользоваться на сенсорных экранах. Другими словами, размер свободного места должен быть примерно равен ширине пальца.
+
+### Убедитесь, что поля ввода данных хорошо видны {: #visible-inputs }
+
+Стиль границ полей ввода данных, используемый по умолчанию, делает их трудноразличимыми. Они почти невидимы на некоторых платформах, например в Chrome для ОС Android.
+
+Помимо отступов, добавьте границу: на белом фоне хорошим стандартным правилом считается использовать цвет `#ccc` или более темный.
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Снимок экрана с формой, к которой применен стиль, в Chrome для ОС Android.", width="250", height="525" %} <figcaption>Разборчивый текст, видимые границы поля ввода данных, правильные отступы и поля.</figcaption></figure>
+
+### Предупреждайте пользователей о вводе недопустимых значений с помощью встроенных функций браузера {: #built-in-validation }
+
+В браузерах имеются встроенные функции для базовой проверки содержимого полей ввода данных с атрибутом `type` в формах. Браузеры предупреждают пользователя, когда он пытается отправить форму с недопустимым значением, и перемещают фокус на поле ввода данных, в котором возникла проблема.
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="Снимок экрана с формой входа в систему в Chrome на настольном компьютере, на котором отображается подсказка браузера, а фокус находится на недопустимом значении адреса электронной почты.", width="300", height="290" %} <figcaption>Базовая встроенная функция проверки в браузере.</figcaption></figure>
+
+С помощью селектора CSS `:invalid` можно выделять недопустимые данные. Используйте конструкцию `:not(:placeholder-shown)`, чтобы не допустить выбор полей ввода данных без содержимого.
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+Попробуйте использовать разные способы выделения полей ввода данных с недопустимыми значениями.
+
+## При необходимости используйте JavaScript {: #javascript }
+
+### Включение и выключение отображения пароля {: #password-display }
+
+Вам следует добавить значок или кнопку **Показать пароль**, чтобы пользователь мог проверить вводимый текст. Если у пользователя нет возможности просмотреть введенный текст, это [снижает удобство использования](https://www.nngroup.com/articles/stop-password-masking/) сайта. В настоящее время нет встроенного способа сделать это, хотя [есть планы по его реализации](https://twitter.com/sw12/status/1251191795377156099). Вместо этого вам потребуется использовать JavaScript.
+
+<figure><img src="./show-password-google.png" width="350" alt="Форма входа в систему на сайте Google, на которой отображается значок Show password (Показать пароль)."> <figcaption>Форма входа в систему на сайте Google: со значком <strong>Show password</strong> (Показать пароль) и ссылкой <strong>Forgot password</strong> (Забыли пароль?).</figcaption></figure>
+
+В приведенном ниже коде для добавления функции **Показать пароль** используется текстовая кнопка.
+
+HTML:
+
+```html/2
+<section>
+  <label for="password">Пароль</label>
+  <button id="toggle-password" type="button" aria-label="Показать пароль в виде простого текста. Предупреждение: в этом случае ваш пароль будет отображен на экране.">Показать пароль</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+С помощью этого кода CSS можно сделать так, чтобы кнопка выглядела как простой текст:
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Медиа-запрос не показан здесь. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Отображение в верхней правой части контейнера */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+И JavaScript для отображения пароля:
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Скрыть пароль';
+    togglePasswordButton.setAttribute('aria-label',
+      'Скрытие пароля.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Показать пароль';
+    togglePasswordButton.setAttribute('aria-label',
+      'Показать пароль в виде простого текста. ' +
+      'Предупреждение: если нажать эту кнопку, ваш пароль будет отображен на экране.');
+  }
+}
+```
+
+Вот конечный результат:
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Снимки экрана с формой входа в систему с текстовой кнопкой Show password (Показать пароль) в Safari на компьютере Mac и на iPhone 7.", width="800", height="468" %} <figcaption>Форма входа в систему с текстовой кнопкой <strong>Show password</strong> (Показать пароль) в Safari на компьютере Mac и на iPhone 7.</figcaption></figure>
+
+### Включите поддержку специальных возможностей для полей ввода данных {: #accessible-password-inputs }
+
+С помощью атрибута `aria-describedby` можно указать правила работы с паролями, присвоив ему значение идентификатора элемента, в котором описаны ограничения. Программы чтения с экрана произносят текст подписи, тип поля ввода данных (пароль), а затем описание.
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Не менее восьми знаков, включая буквы, цифры и специальные символы.</div>
+```
+
+Когда вы добавляете функцию **Показать пароль**, не забудьте включить в код атрибут `aria-label`, чтобы предупредить пользователя о том, что пароль будет отображен. В противном случае пользователь может случайно раскрыть свой пароль посторонним лицам.
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Показать пароль в виде простого текста.
+                    Предупреждение: в результате этого действия ваш пароль будет отображен на экране.">
+  Показать пароль
+</button>
+```
+
+Посмотреть обе функции ARIA в действии можно в следующем Glitch:
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+В статье «[Создание форм с поддержкой специальных возможностей](https://webaim.org/techniques/forms/)» есть дополнительные советы по использованию специальных возможностей в формах.
+
+### Выполняйте проверку в режиме реального времени и перед отправкой {: #validation }
+
+Для элементов и атрибутов форм HTML имеются встроенные функции базовой проверки. Тем не менее следует выполнять более надежную проверку с использованием JavaScript, когда пользователи вводят данные и когда они пытаются отправить форму.
+
+{% Aside 'warning' %} Благодаря проверке на стороне клиента пользователи будут вводить правильные данные, а вы предотвратите ненужную нагрузку на сервер. Тем не менее следует всегда проверять и отбраковывать данные на сервере. {% endAside %}
+
+В [действии 5](https://glitch.com/edit/#!/sign-in-form-codelab-5) codelab, посвященного форме входа в систему, используется [Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) ([широко поддерживаемый](https://caniuse.com/#feat=constraint-validation)), который позволяет добавлять пользовательскую проверку с помощью встроенного пользовательского интерфейса браузера для перемещения фокуса на нужный элемент и отображения подсказок.
+
+См. дополнительные сведения в статье «[Использование JavaScript для сложной проверки в режиме реального времени](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)».
+
+### Аналитика и RUM {: #analytics }
+
+Выражение «невозможно улучшить то, что не удается измерить» особенно справедливо для форм регистрации и входа в систему. Вам нужно поставить цели, измерить успех, улучшить сайт, а затем повторить этот цикл еще раз.
+
+[Дисконтное тестирование удобства использования](https://www.nngroup.com/articles/discount-usability-20-years/) может быть полезно для проверки изменений, но вам потребуются реальные данные, чтобы понимать, насколько пользователям удобно использовать ваши формы регистрации и входа в систему.
+
+- **Аналитика страницы**: количество просмотров страниц регистрации и входа в систему, показатели отказов и количество выходов.
+- **Аналитика взаимодействия**: [воронки целей](https://support.google.com/analytics/answer/6180923?hl=en) (в каких местах пользователи прерывают процесс регистрации или входа в систему?) и [события](https://developers.google.com/analytics/devguides/collection/gtagjs/events) (какие действия выполняют пользователи при взаимодействии с формами?).
+- **Производительность веб-сайта**: [метрики, ориентированные на пользователей](/user-centric-performance-metrics) (медленно ли работают ваши формы регистрации и входа в систему? Если да, то в чем причина?).
+
+Кроме того, прежде чем выпускать изменения для всех пользователей, вам, возможно, потребуется реализовать тестирование A/B, чтобы опробовать различные подходы к процессам регистрации и входа в систему, а также поэтапное развертывание для проверки изменений на подмножестве пользователей.
+
+## Общие рекомендации {: #general-guidelines }
+
+Хорошо продуманный пользовательский интерфейс может уменьшить количество отказов пользователей от использования формы входа в систему.
+
+- Не заставляйте пользователей искать функцию входа в систему. Разместите ссылку на форму входа в систему в верхней части страницы, используя понятные формулировки, например **Войти**, **Создать учетную запись** или **Зарегистрироваться**.
+- Разместите фокус на нужных элементах. В формах регистрации не следует отвлекать пользователей предложениями и другими возможностями сайта.
+- Сделайте процесс регистрации как можно проще. Собирайте другие данные пользователей (например, адреса или данные кредитных карт) только тогда, когда пользователи понимают явные преимущества от предоставления этих данных.
+- Прежде чем пользователи начнут заполнять форму регистрации, объясните, в чем состоит ценностное предложение. Какие преимущества они получат, выполнив вход в систему? Предоставьте пользователям конкретные стимулы для завершения регистрации.
+- Если возможно, разрешите пользователям идентифицировать себя по номеру мобильного телефона, а не по адресу электронной почты, так как некоторые пользователи могут не использовать электронную почту.
+- Упростите процедуру сброса пароля для пользователей и сделайте так, чтобы ссылка **Забыли пароль?** была очевидна.
+- Ссылка на документы с условиями обслуживания и политикой конфиденциальности: с самого начала объясните пользователям, как вы защищаете их данные.
+- Добавьте логотип и название вашей компании или организации на страницы регистрации и входа в систему и убедитесь, что язык, шрифты и стили соответствуют остальной части вашего сайта. По некоторым формам трудно догадаться, что они относятся к тому или иному сайту, особенно если их URL-адреса существенно отличаются от URL-адреса сайта.
+
+## Продолжайте учиться {: #resources }
+
+- [Создание потрясающих форм](/learn/forms/)
+- [Рекомендации по разработке форм для мобильных устройств](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [Функциональные элементы управления в формах](/more-capable-form-controls)
+- [Создание форм с поддержкой специальных возможностей](https://webaim.org/techniques/forms/)
+- [Оптимизация процесса входа в систему с помощью Credential Management API](https://developer.chrome.com/blog/credential-management-api/)
+- [Проверка номеров телефонов в Интернете с помощью WebOTP API](/web-otp/)
+
+Фотография [Меган Ширек](https://unsplash.com/photos/_XFObcM_7KU) (Meghan Schiereck) с [Unsplash](https://unsplash.com) .
diff --git a/src/site/content/ru/index.11tydata.js b/src/site/content/ru/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/ru/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/ru/index.md b/src/site/content/ru/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/ru/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/ru/lang.js b/src/site/content/ru/lang.js
new file mode 100644
index 00000000000..d299c5e2bd9
--- /dev/null
+++ b/src/site/content/ru/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'ru',
+  locale: 'ru_RU',
+};
diff --git a/src/site/content/ru/learn-core-web-vitals/index.md b/src/site/content/ru/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/ru/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/ru/learn/css/box-model/box-model.assess.yml b/src/site/content/ru/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/ru/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/ru/learn/css/box-model/index.md b/src/site/content/ru/learn/css/box-model/index.md
new file mode 100644
index 00000000000..6766ae5ab98
--- /dev/null
+++ b/src/site/content/ru/learn/css/box-model/index.md
@@ -0,0 +1,163 @@
+---
+title: Блочная модель
+description: |2-
+
+  Все, что отображается в CSS, представляет собой блоки.
+  Таким образом, понимание того, как работает блочная модель CSS, является основой CSS.
+audio:
+  title: 'Подкаст CSS   - 001: Блочная модель'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Скажем, у вас есть такой фрагмент HTML:
+
+```html
+<p>Это параграф текста, в котором есть несколько слов.</p>
+```
+
+Затем вы пишете для него этот CSS:
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+Контент выйдет за пределы вашего элемента и будет шириной в 142 пикселя, а не 100 пикселей. Почему? Блочная модель — это основа основ CSS, и понимание того, как она работает, как на нее влияют другие аспекты CSS, а главное, как ей управлять, поможет вам написать более предсказуемый CSS.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRemxN', height: 300 } %}</figure>
+
+При написании CSS, да и вообще работе в сети, очень важно помнить, что все, что отображается в CSS, представляет собой блок. Будь то блок, в котором используется `border-radius` для имитации круга, или просто какой-нибудь текст, важно помнить, что все это — блоки.
+
+## Содержание и размеры
+
+Поведение блоков отличается в зависимости от значения их свойства `display`, установленных размеров и содержимого, которое в них находится. Этим содержимым могут быть другие блоки, созданные дочерними элементами, или простой текст. В любом случае это содержимое по умолчанию влияет на размер блока.
+
+Это можно контролировать, используя указание **внешних размеров** (extrinsic sizing), или же можно позволить браузеру принимать решения за вас на основе размера контента, используя **внутреннее определение размера** (intrinsic sizing).
+
+Давайте вкратце рассмотрим разницу на следующем примере.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' } %} <figcaption>Обратите внимание, что когда для блока используется указание внешних размеров, существует ограничение на количество добавляемого содержимого, прежде чем оно выйдет за пределы блока. Таким образом, слово «awesome» не поместится. </figcaption></figure>
+
+В примере есть слова «CSS is awesome» в блоке с фиксированными размерами и толстой рамкой. У блока задана ширина, так что его размеры определены внешне. Он управляет размером своего дочернего содержимого. Проблема заключается в том, что слово «awesome» слишком велико для блока, поэтому оно выходит за пределы **блока границ** родительского блока (подробнее об этом позже в уроке). Один из способов предотвратить такой выход за границы состоит в том, чтобы разрешить блоку определять размеры внутренне, либо сбросив ширину, либо, в данном случае, установив `width` как `min-content`. Ключевое слово `min-content` указывает, что ширина блока должна соответствовать внутренней минимальной ширине его содержимого (слово «awesome»). Это позволяет фразе «CSS is awesome» идеально вписаться в блок.
+
+Чтобы увидеть влияние различных размеров на реальный контент, рассмотрим что-нибудь посложнее:
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+Включите и выключите внутренний размер, чтобы посмотреть, как точнее управлять элементом с помощью внешнего размера или отдать управление контенту при помощи внутреннего определения размера. Чтобы увидеть эффект внутреннего и внешнего определения размеров, добавьте на карточку несколько предложений. Когда элемент использует указание внешнего размера, существует предел того, сколько контента получится добавить, прежде чем он выйдет за границы элемента. Если включено внутреннее определение размера, такого предела нет.
+
+По умолчанию для этого элемента заданы значения `width` и `height` — `400px` в обоих случаях. Эти размеры задают строгие границы всему внутри элемента, которые будут соблюдаться, пока содержимое не превышает размеры блока — в этом случае произойдет очевидный выход за его границы. Как это выглядит, можно посмотреть, изменив содержимое подписи под изображением цветка так, чтобы оно превышало высоту рамки, то есть добавив несколько строк.
+
+{% Aside "key-term" %} Когда содержимое слишком велико для блока, в котором оно находится, мы называем это переполнением. Тем, как элемент обрабатывает переполняющее содержимое, можно управлять, используя свойство `overflow`. {% endAside %}
+
+Когда вы переключаетесь на внутреннее определение размеров, вы позволяете браузеру принимать решения за вас в зависимости от размера содержимого блока. При внутреннем определении размеров переполнить блок намного сложнее, поскольку размер нашего блока будет изменяться вместе с его содержимым, а не пытаться изменить размеры контента. Важно помнить, что таково гибкое поведение браузера по умолчанию. Хотя на первый взгляд указание внешних размеров дает больший контроль, в большинстве случаев внутреннее определение размера обеспечивает лучшую гибкость.
+
+## Области блочной модели
+
+Блоки состоят из отдельных областей блочной модели, каждая из которых выполняет определенную работу.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="Диаграмма, показывающая четыре основных области блочной модели — блок контента, блок заполнения, блок границ и блок отступа", width="800", height="547" %}<figcaption> Четыре основных области блочной модели: блок контента (content box), блок заполнения (padding box), блок границ (border box) и блок отступа (margin box).</figcaption></figure>
+
+Начнем с **блока контента**, который представляет собой область, в которой находится контент. Как вы уже знаете, ее содержимое может управлять размером своего родителя, поэтому, как правило, размер этой области изменяется чаще всего.
+
+**Блок заполнения** окружает блок контента и является пространством, созданным свойством [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding). Поскольку отступ находится внутри блока, фон блока будет виден в создаваемом им пространстве. Если для нашего блока заданы правила переполнения, такие как `overflow: auto` или `overflow: scroll`, это пространство также займут полосы прокрутки.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+**Блок границ** окружает блок заполнения, а его пространство занято значением `border`. Блок границ — это рамка вашего блока, а **края границы** (border edge) — это предел того, что вы видите. Свойство <a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a> используется для визуального обрамления элемента.
+
+Последняя область, **блок отступа**, — это пространство вокруг вашего блока, определяемое правилом `margin`. Такие свойства, как [`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) и [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow), также занимают это пространство, поскольку они отрисовываются поверх и поэтому не влияют на размер нашего блока. У нашего блока значение `outline-width` может быть `200px`, и все внутри него, включая рамку, будет точно такого же размера.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea' } %}</figure>
+
+## Полезная аналогия
+
+Разобраться в блочной модели нелегко, поэтому давайте подведем итог тому, чему вы научились, с помощью аналогии.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="Три фоторамки", width="800", height="562" %}</figure>
+
+На этой схеме три фоторамки, прикрепленные к стене рядом друг с другом. На схеме есть метки, которые связывают элементы рамы с блочной моделью.
+
+Разберем эту аналогию:
+
+- Блок контента — это графическая составляющая.
+- Блок заполнения — белая матовая поверхность между рамкой и иллюстрацией.
+- Блок границ — это рамка, в прямом смысле обеспечивающая границу изображения.
+- Блок отступа — это пространство между рамками.
+- Тень занимает то же пространство, что и блок отступа.
+
+## Отладка блочной модели
+
+Браузерные DevTools обеспечивают визуализацию вычислений блочной модели выбранного блока, что может помочь вам понять, как работает блочная модель, и, что немаловажно, как она влияет на веб-сайт, над которым вы работаете.
+
+Попробуйте это в своем браузере:
+
+1. [Откройте DevTools](https://developer.chrome.com/docs/devtools/open/)
+2. [Выберите элемент](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. Включите отладчик блочной модели
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## Управление блочной моделью
+
+Чтобы понять, как управлять блочной моделью, вам сначала нужно понять, что происходит в вашем браузере.
+
+Каждый браузер применяет таблицу стилей пользовательского агента к HTML-документам. Используемый CSS варьируется в зависимости от браузера, но значения по умолчанию подобраны продуманно, чтобы облегчить чтение контента. Если CSS не определен, то, как элементы должны выглядеть и вести себя, определяется браузером. Это прописано в стилях пользовательского агента, где также установлено значение `display` по умолчанию для блока. Например, при нормальном ходе работы значение `display` по умолчанию для элемента `<div>` равно `block`, для `<li>` значение `display` по умолчанию — `list-item`, а для `<span>` значение `display` по умолчанию равно `inline`.
+
+У `inline`-элемента есть блочный отступ, но другие элементы его игнорируют. Используйте `inline-block`, и эти элементы будут учитывать отступ, при этом элемент будет поддерживать большинство тех же действий, что и `inline`-элемент. `block` по умолчанию заполняет доступное **встроенное пространство** (inline space), тогда как размер элементов `inline` и `inline-block` будет соответствовать их содержимому.
+
+Наряду с пониманием того, как стили пользовательского агента влияют на каждый блок, также необходимо понимать правило `box-sizing`, которое сообщает нашему блоку, как рассчитать его размер. По умолчанию у всех элементов стиль пользовательского агента следующий: `box-sizing: content-box;`.
+
+Наличие `content-box` в качестве значения `box-sizing` означает, что когда вы устанавливаете размеры, такие как `width` и `height`, они будут применены к **блоку контента**. Если затем задать `padding` и `border`, эти значения будут добавлены к размеру блока контента.
+
+{% Assessment 'box-model' %}
+
+Фактическая ширина этого блока будет равна 260 пикселям. Поскольку CSS использует `box-sizing: content-box` по умолчанию, применяемая ширина — это ширина контента плюс `padding` и `border` с обеих сторон. Таким образом, 200 пикселей для содержимого + 40 пикселей заполнения + 20 пикселей границы в сумме дают видимую ширину 260 пикселей.
+
+Однако этим *можно* контролировать, реализовав следующую модификацию для использования альтернативной блочной модели, `border-box`:
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+Такая альтернативная блочная модель сообщает CSS применить значение `width` к блоку границ, а не к блоку контента. Это означает, что наши параметры `border` и `padding` будут *вписаны внутрь*, и в результате, когда вы установите `.my-box` шириной в `200px`, блок на самом деле будет отрисован шириной `200px`.
+
+Посмотрите, как это работает, в следующем интерактивном примере. Обратите внимание, что при переключении значения `box-sizing` на синем фоне показывается, какой CSS применяется *внутри* нашего блока.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+Это правило CSS выбирает каждый элемент в документе, а также каждый псевдоэлемент `::before` и `::after`, и применяет `box-sizing: border-box`. Это означает, что теперь у каждого элемента будет эта альтернативная блочная модель.
+
+Поскольку альтернативная блочная модель может быть более предсказуемой, разработчики часто добавляют это правило к сбросам и нормализаторам, таким [как этот](https://piccalil.li/blog/a-modern-css-reset).
+
+## Ресурсы
+
+- [Введение в блочную модель](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [Что такое браузерные инструменты разработчика?](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### Таблицы стилей пользовательских агентов
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/ru/learn/css/css.11tydata.js b/src/site/content/ru/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/ru/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/ru/learn/css/index.md b/src/site/content/ru/learn/css/index.md
new file mode 100644
index 00000000000..f157248d357
--- /dev/null
+++ b/src/site/content/ru/learn/css/index.md
@@ -0,0 +1,28 @@
+---
+title: Изучайте CSS
+authors:
+  - andybell
+description: Постоянно обновляемый курс и справочник по CSS для повышения вашего уровня знаний в сфере веб-дизайна.
+date: 2021-05-04
+tags:
+  - css
+  - layout
+---
+
+## Добро пожаловать на курс «Изучайте CSS»!
+
+Этот курс разбивает основы CSS на удобоваримые, простые для понимания части. В следующих нескольких модулях вы узнаете, как работают основные аспекты CSS и как эффективно применять их в своих проектах. Используйте панель меню рядом с логотипом «Изучайте CSS» для навигации по модулям.
+
+Вы изучите основы CSS, такие как блочная модель, каскад и специфичность, адаптируемый блок flexbox, двумерная сетка grid и свойство z-index. И, наряду с этими основами, вы узнаете о функциях, цветовых типах, градиентах, логических свойствах и наследовании, чтобы стать всесторонним разработчиком интерфейсов, готовым взяться за любой пользовательский интерфейс.
+
+Каждый модуль содержит интерактивные демонстрации и вопросы для самоконтроля, чтобы вы могли проверить свои знания. Помимо учебного материала и демонстраций, к каждой теме прилагается эпизод подкаста — это еще один удобный способ учиться и продолжать расширять свои знания.
+
+Этот курс создан как для начинающих, так и для опытных разработчиков CSS. Вы можете пройти всю серию от начала до конца, чтобы получить общее представление о CSS, или использовать курс в качестве справочника по конкретным темам веб-дизайна. Тем, кто только начинает заниматься веб-разработкой, рекомендует ознакомиться с курсом [«Введение в HTML»](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML) от MDN, чтобы узнать всё о том, как писать разметку и связывать таблицы стилей.
+
+Изучаемые темы:
+
+{% include 'partials/course-index.njk' %}
+
+Итак, вы готовы изучить CSS? [Приступим](/learn/css/box-model/).
+
+{% Aside %} Этот курс написан и отредактирован экспертами сообщества CSS: <a href="https://twitter.com/piccalilli_">Энди Беллом</a>, <a href="https://twitter.com/rachelandrew">Рэйчел Эндрю</a>, <a href="https://twitter.com/Una">Уной Кравец</a>, <a href="https://twitter.com/argyleink">Адамом Аргайлом</a>, [Эммой Тверски](https://twitter.com/twerske), [Кэмден Бикель](https://twitter.com/camdenbickel) и [Кевином Лозандье](https://twitter.com/KevinLozandier). <a href="https://twitter.com/rob_dodson">Роб Додсон</a> и <a href="https://twitter.com/jiwoong">Дживун Ли</a> руководили UX и производственной сборкой, им также помогали <a href="https://twitter.com/devnook">Ева Гасперович</a> и <a href="https://twitter.com/kaycebasques">Кейси Баски</a>. {% endAside %}
diff --git a/src/site/content/ru/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/ru/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/ru/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/ru/learn/css/selectors/index.md b/src/site/content/ru/learn/css/selectors/index.md
new file mode 100644
index 00000000000..bb739c3cee7
--- /dev/null
+++ b/src/site/content/ru/learn/css/selectors/index.md
@@ -0,0 +1,355 @@
+---
+title: Селекторы
+description: |-
+  Чтобы применить CSS к элементу, нужно выбрать его.
+  CSS позволяет сделать это несколькими способами, описанными в этом модуле.
+audio:
+  title: 'Подкаст CSS — 002: Селекторы'
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+Каким способом можно увеличить шрифт текста первого абзаца статьи и сделать его красным?
+
+```html
+<article>
+  <p>Шрифт этого абзаца должен быть красным и более крупным, чем в остальном тексте.</p>
+  <p>Шрифт этого абзаца должен иметь нормальный размер и цвет, используемый по умолчанию.</p>
+</article>
+```
+
+С помощью селектора CSS найдите нужный элемент и примените к нему правило CSS, как показано ниже.
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+Для подобных ситуаций в CSS имеется множество способов выбора элементов и применения правил к ним — от очень простых до очень сложных.
+
+{% Codepen { user: 'web-dot-dev', id: 'XWprGYz', height: 250 } %}
+
+## Части правила CSS
+
+Чтобы понять, как работают селекторы и какова их роль в CSS, важно знать части правила CSS. Правило CSS — это блок кода, в котором содержится один или несколько селекторов и одно или несколько объявлений.
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="Изображение правила CSS с селектором .my-css-rule", width="800", height="427" %}</figure>
+
+В этом правиле CSS **селектором** является элемент `.my-css-rule`, который находит все элементы с классом `my-css-rule` на странице. В фигурных скобках содержатся три объявления. Объявление — это пара, состоящая из свойства и значения, благодаря которой можно применять стили к элементам, соответствующим селекторам. Правило CSS может иметь неограниченное количество объявлений и селекторов.
+
+## Простые селекторы
+
+Группа самых простых селекторов предназначена для элементов HTML, а также классов, идентификаторов и других атрибутов, которые можно добавить в тег HTML.
+
+### Универсальный селектор
+
+[Универсальный селектор,](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors) также называемый подстановочным знаком, соответствует любому элементу.
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+Благодаря этому правилу текст каждого элемента HTML на странице будет иметь ярко-розовый (hotpink) цвет.
+
+### Селектор типа
+
+[Селектор типа](https://developer.mozilla.org/docs/Web/CSS/Type_selectors) напрямую соответствует элементу HTML.
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+Благодаря этому правилу для всех сторон каждого элемента `<section>` атрибут отступа `padding` будет иметь значение `2em`.
+
+### Селектор класса
+
+Элемент HTML может содержать один или несколько элементов, определенных в его атрибуте `class`. [Селектор класса](https://developer.mozilla.org/docs/Web/CSS/Class_selectors) соответствует любому элементу, к которому применен этот класс.
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+Любой элемент, к которому применен этот класс, будет окрашен в красный цвет:
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+Обратите внимание на то, что символ `.` имеется только в CSS, но **не** в HTML. Это связано с тем, что символ `.` указывает языку CSS, что необходимо сопоставить члены атрибутов класса. Это распространенный шаблон в CSS, когда специальный символ или набор символов используется для определения типов селекторов.
+
+Элемент HTML, имеющий класс `.my-class`, по-прежнему будет соответствовать указанному выше правилу CSS, даже если у него есть несколько других классов. Пример:
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+Это связано с тем, что CSS ищет атрибут `class`, который *содержит* определенный класс, а не точно соответствует этому классу.
+
+{% Aside %} Значение атрибута класса может быть практически любым. Единственное, что может ввести в заблуждение, — то, что класс (или идентификатор) не должен начинаться с числа, например так: `.1element`. Дополнительные сведения см. [в спецификации](https://www.w3.org/TR/CSS21/syndata.html#characters). {% endAside %}
+
+### Селектор идентификатора
+
+Элемент HTML с атрибутом `id` должен быть единственным элементом на странице с нужным значением идентификатора. Выбирайте элементы с помощью [селектора идентификатора](https://developer.mozilla.org/docs/Web/CSS/ID_selectors) следующим образом:
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+Этот код CSS задает синюю границу для элемента HTML, у которого атрибут `id` имеет значение `rad`. Пример:
+
+```html
+<div id="rad"></div>
+```
+
+Как и в случае с селектором класса `.` используйте символ `#`, чтобы указать CSS, что нужно искать элемент, соответствующий следующему за ним атрибуту `id`.
+
+{% Aside %} Если браузер найдет несколько экземпляров атрибута `id`, он все равно будет применять все правила CSS, соответствующие селектору этого атрибута. Тем не менее у любого элемента с атрибутом `id` должно быть уникальное значение этого атрибута, поэтому если вы не пишете очень специфический код CSS для одного элемента, старайтесь не применять стили с использованием селектора `id`, так как вы не сможете повторно использовать эти стили в другом месте. {% endAside %}
+
+### Селектор атрибута
+
+С помощью [селектора атрибута](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors) можно выполнять поиск элементов, которые имеют определенный атрибут HTML или определенное значение атрибута HTML. Чтобы указать CSS, что нужно найти атрибуты, заключите селектор в квадратные скобки (`[ ]`).
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+Этот код CSS ищет все элементы, у которых есть атрибут `data-type` со значением `primary`. Пример:
+
+```html
+<div data-type="primary"></div>
+```
+
+Вместо того, чтобы искать конкретное значение атрибута `data-type`, можно также искать элементы, у которых имеется этот атрибут независимо от его значения.
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+Текст в обоих этих элементах `<div>` будет красным.
+
+Вы можете использовать селекторы атрибутов с учетом регистра, добавляя в них оператор `s`.
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+Это означает, что если бы у элемента HTML атрибут `data-type` имел значение `Primary`, а не `primary`, текст в нем не был бы красным. Можно сделать наоборот — отключить функцию учета регистра — с помощью оператора `i`.
+
+Наряду с операторами case можно использовать операторы, которые сопоставляют части строк внутри значений атрибутов.
+
+```css
+/* Элемент href, содержащий адрес "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* Элемент href, начинающийся с https */
+[href^='https'] {
+  color: green;
+}
+
+/* Элемент href, оканчивающийся на .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbOy' } %} <figcaption>В этой демонстрации оператор $ в селекторе атрибута получает значение типа файла из атрибута href. Это позволяет добавить префикс к подписи на основе этого типа файла с помощью псевдоэлемента.</figcaption></figure>
+
+### Группирование селекторов
+
+Селектор необязательно должен соответствовать только одному элементу. Можно сгруппировать несколько селекторов, разделив их запятыми:
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+В этом примере изменяется цвет как элементов `<strong>`, так и элементов `<em>`. Он также расширен и включает класс `.my-class` и элемент с атрибутом `lang`.
+
+{% Assessment 'simple-selectors' %}
+
+## Псевдоклассы и псевдоэлементы
+
+В CSS имеются полезные типы селекторов, которые ориентированы на определенное состояние платформы, например на структуры *внутри* элемента или на части элемента, когда на элемент наведен указатель мыши.
+
+### Псевдоклассы
+
+Элементы HTML могут находиться в разных состояниях потому что с ними взаимодействует пользователь либо потому что один из их дочерних элементов находится в том или ином состоянии.
+
+Например, пользователь может навести указатель мыши как на сам элемент HTML, *так и* на его дочерний элемент. В таких ситуациях используйте псевдокласс `:hover`.
+
+```css
+/* На нашу ссылку навели указатель мыши */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Настройка другого цвета фона для всех четных абзацев */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+Дополнительные сведения см. в [модуле, посвященном псевдоклассам](/learn/css/pseudo-classes).
+
+### Псевдоэлемент
+
+Псевдоэлементы отличаются от псевдоклассов тем, что они не реагируют на состояние платформы, а действуют так, как если бы они вставляли новый элемент с помощью CSS. Кроме того, синтаксис псевдоэлементов отличается от синтаксиса псевдоклассов, потому что вместо одинарного двоеточия (`:`) в них используется двойное двоеточие (`::`).
+
+{% Aside %} Двойное двоеточие (`::`) отличает псевдоэлемент от псевдокласса, но так как этого различия не было в старых версиях спецификаций CSS, браузеры поддерживают одинарное двоеточие для исходных псевдоэлементов, например `:before` и `:after`. Это обеспечивает обратную совместимость со старыми браузерами, например IE8. {% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+Как и в приведенной выше демонстрации, в которой вы указали тип файла в качестве префикса подписи ссылки, с помощью псевдоэлемента `::before` можно вставить содержимое **в начало элемента**, а с помощью псевдоэлемента `::after` — в **конец элемента**.
+
+Перечень функций псевдоэлементов не ограничен вставкой содержимого. Их также можно использовать для нацеливания на определенные части элемента. Предположим, у вас есть список. С помощью псевдоэлемента `::marker` можно применить стиль к каждому маркеру (или номеру) в списке.
+
+```css
+/* Теперь в списке будут либо красные точки, либо красные номера */
+li::marker {
+  color: red;
+}
+```
+
+Кроме того, с помощью псевдоэлемента `::selection` можно применять стили к содержимому, выделенному пользователем.
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+Подробные сведения см. в [модуле о псевдоэлементах](/learn/css/pseudo-elements).
+
+{% Assessment 'pseudo-selectors' %}
+
+## Сложные селекторы
+
+Вы уже познакомились с большим количеством селекторов, но иногда требуется более *детальный контроль* с помощью CSS. В этом случае на помощь приходят сложные селекторы.
+
+Следует помнить, что хотя указанные ниже селекторы предоставляют больше возможностей, мы можем только **выполнять каскадирование вниз**, выбирая дочерние элементы. Мы не можем нацеливаться вверх и выбирать родительские элементы. Мы расскажем, что такое каскад и как он работает, [в следующем занятии](/learn/css/the-cascade).
+
+### Комбинаторы
+
+Комбинатор — это то, что находится между двумя селекторами. Например, если используется селектор `p > strong`, комбинатором будет символ `>`. Селекторы, в которых используются такие комбинаторы, позволяют выбирать элементы в зависимости от их расположения в документе.
+
+#### Комбинатор потомков
+
+Чтобы понять, что такое комбинаторы потомков, нужно сначала разобраться, что представляют собой родительские и дочерние элементы.
+
+```html
+<p>Абзац текста, часть которого <strong>выделена полужирным шрифтом</strong>.</p>
+```
+
+Родительский элемент — это элемент `<p>`, который содержит текст. Внутри этого элемента `<p>` находится элемент `<strong>`, благодаря которому шрифт заключенного в нем текста будет полужирным. Так как он находится внутри элемента `<p>`, он представляет собой дочерний элемент этого элемента.
+
+Комбинатор потомков позволяет нам нацеливаться на дочерний элемент. В нем используется пробел (` `), указывающий браузеру искать дочерние элементы:
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+Этот фрагмент кода выбирает все элементы `<strong>`, которые являются дочерними элементами только для элементов `<p>` и рекурсивно делает их синими.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbGN' } %} <figcaption>Так как комбинатор потомков является рекурсивным, то к каждому дочернему элементу будет добавлен отступ, что приведет к эффекту «ступенек».</figcaption></figure>
+
+Этот эффект лучше визуализирован в примере выше, в котором используется селектор комбинаторов `.top div`. Это правило CSS добавляет левый отступ к этим элементам `<div>`. Так как комбинатор является рекурсивным, то ко всем элементам `<div>`, находящимся в элементе `.top`, будет применен одинаковый отступ.
+
+Посмотрите на панель HTML в этой демонстрации, и вы увидите, что элемент `.top` имеет несколько дочерних элементов `<div>`, у которых, в свою очередь, есть дочерние элементы `<div>`.
+
+#### Комбинатор следующего элемента одного уровня
+
+С помощью символа `+` в селекторе можно выполнить поиск элемента, который следует непосредственно за другим элементом.
+
+{% Codepen { user: 'web-dot-dev', id: 'JjEPzwB' } %}
+
+Чтобы добавить пробел между элементами в стопке, используйте комбинатор следующего элемента одного уровня, *только* если элемент является **следующим элементом одного уровня** для дочернего элемента `.top`.
+
+С помощью следующего селектора можно добавить поле ко всем дочерним элементам `.top`:
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+Проблема заключается в том, что, поскольку вы выбираете каждый дочерний элемент `.top`, это правило может создать дополнительное ненужное пространство. **Комбинатор следующего элемента одного уровня** в сочетании с **универсальным селектором** позволяет не только управлять тем, для каких элементов будет добавлено пространство, но и добавлять пространство к **любому элементу**. Это дает некоторую гибкость в долгосрочной перспективе независимо от того, какие элементы HTML будут встречаться в элементе `.top`.
+
+#### Комбинатор последующего элемента одного уровня
+
+Комбинатор последующего элемента очень похож на селектор следующего элемента одного уровня. Однако вместо символа `+` здесь используется символ `~`. Отличие заключается в том, что элемент просто должен следовать за другим элементом с одинаковым родительским элементом, а не быть следующим элементом с тем же родителем.
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELzPPX', height: 400 } %} <figcaption>С помощью селектора последующего элемента и псевдокласса :checked можно создать «чистый» элемент переключателя CSS.</figcaption></figure>
+
+Этот комбинатор последующего элемента обеспечивает немного меньшую жесткость, что полезно в контекстах, аналогичных тому, который приведен в примере выше. В этом контексте мы меняем цвет настраиваемого переключателя, если связанный с ним флажок находится в состоянии `:checked`.
+
+#### Комбинатор дочернего элемента
+
+Комбинатор дочернего элемента (также называемый прямым потомком) предоставляет дополнительные возможности управления рекурсией, которая применяется в селекторах комбинаторов. С помощью символа `>` можно использовать селектор комбинатора **только** для непосредственных дочерних элементов.
+
+Рассмотрим предыдущий пример с комбинатором следующего элемента одного уровня. Код добавляет пространство к каждому **следующему элементу одного уровня**, но если у одного из этих элементов также есть **следующие элементы одного уровня** в качестве дочерних элементов, это может привести к добавлению нежелательного дополнительного пространства.
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZYMJL' } %}
+
+Чтобы смягчить последствия этой проблемы, измените **селектор следующего элемента одного уровня**, включив в него комбинатор дочернего элемента `> * + *`. Теперь это правило будет применяться **только** к непосредственным дочерним элементам элемента `.top`.
+
+{% Codepen { user: 'web-dot-dev', id: 'dyNbrEr' } %}
+
+### Составные селекторы
+
+Вы можете сочетать селекторы, чтобы повысить уровень конкретности и удобочитаемость. Например, чтобы выполнить нацеливание на элементы `<a>`, которые также имеют класс `.my-class`, используйте следующий код:
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+Этот код не будет применять красный цвет ко всем ссылкам; он будет применять красный цвет только к элементу `.my-class`, **если** он находится в элементе `<a>`. Дополнительные сведения об этом см. в [модуле, посвященном специфичности](/learn/css/specificity).
+
+{% Assessment 'complex-selectors' %}
+
+## Ресурсы
+
+- [Справочное руководство по селекторам CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [Интерактивная игра по селекторам](https://flukeout.github.io/)
+- [Справочное руководство по псевдоклассам и псевдоэлементам](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [Средство, которое переводит селекторы CSS в эксплейнеры на понятном английском языке](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/ru/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/ru/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/ru/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/ru/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/ru/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/ru/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/ru/learn/index.md b/src/site/content/ru/learn/index.md
new file mode 100644
index 00000000000..5e3aa6324a0
--- /dev/null
+++ b/src/site/content/ru/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: Учиться
+---
diff --git a/src/site/content/ru/learn/learn.11tydata.js b/src/site/content/ru/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/ru/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/ru/media/index.md b/src/site/content/ru/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/ru/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/ru/metrics/cls/index.md b/src/site/content/ru/metrics/cls/index.md
new file mode 100644
index 00000000000..691b4d8a65a
--- /dev/null
+++ b/src/site/content/ru/metrics/cls/index.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Совокупное смещение макета (CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-19
+description: В этой статье описывается метрика CLS (Совокупное смещение макета) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %} **1 июня 2021 г.:** Реализация CLS изменилась. Чтобы узнать больше о причинах изменения, прочтите статью [«Развитие метрики CLS»](/evolving-cls). {% endAside %}
+
+{% Aside 'key-term' %} Совокупное смещение макета (CLS)—важный, ориентированный на пользователя показатель для измерения [визуальной стабильности,](/user-centric-performance-metrics/#types-of-metrics) так как он помогает количественно оценить, как часто пользователи сталкиваются с неожиданными сдвигами макета. Низкое значение показателя CLS говорит о том, что страница выглядит [восхитительно](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Вы когда-нибудь сталкивались с тем, что во время чтения статьи в Интернете внезапно что-то менялось? Без предупреждения текст смещался в сторону, и вы теряли читаемую строчку. Или, еще хуже: вы хотели нажать ссылку или кнопку, но за мгновение до этого, ссылка смещалась, и вы в конечном итоге нажимали что-то другое!
+
+В большинстве случаев подобные ситуации просто раздражают, но иногда они могут нанести реальный ущерб.
+
+<figure>
+  <video autoplay controls loop muted poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png" width="658" height="510">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+  <figcaption>Видео, демонстрирующее негативные последствия нестабильности макета для пользователей.</figcaption></figure>
+
+Неожиданное перемещение содержимого страницы обычно происходит из-за асинхронной загрузки ресурсов или динамического добавления элементов DOM к странице поверх уже существующего контента. Причиной может быть изображение или видео с неизвестными размерами, шрифт, отображаемый крупнее или меньше, чем его запасной вариант, сторонние объявления или виджеты, которые динамически изменяют размер.
+
+Ещё сильнее эта проблема усугубляется тем, что запланированная в процессе разработки функциональность сайта может сильно отличаться от реальной, воспринимаемой пользователями. Персонализированный или сторонний контент часто ведёт себя иначе, чем при разработке, например: тестовые изображения обычно уже находятся в кеше браузера разработчика, а вызовы API, которые выполняются локально, получают ответ сервера слишком быстро и возможные задержки не заметны.
+
+Показатель CLS (Совокупное смещение макета) помогает решить эту проблему, измеряя, как часто такие проблемы случаются у реальных пользователей.
+
+## Что такое CLS?
+
+CLS — это показатель по временному окну с максимальными *оценками смещения макета* для каждого [неожиданного](/cls/#expected-vs-unexpected-layout-shifts) смещения макета, которые происходят в течение всего времени жизни страницы.
+
+*Смещение макета* происходит каждый раз, когда видимый элемент меняет свое положение от одного отрисованного фрейма к другому (см. ниже подробные сведения о том, как рассчитываются [оценки смещения макета](#layout-shift-score)).
+
+Временное окно смещений макета или [*окно сеанса*](evolving-cls/#why-a-session-window)это период времени, который начинает отсчитываться в момент первого смещения макета и длится до выполнения одного из двух критериев: появления промежутка в 1 секунду или больше без смещений макета; достижения максимальной продолжительности временного окна, равной 5 секундам.
+
+Временное окно с максимальными оценками смещения макета—это окно сеанса с максимальной совокупной оценкой всех сдвигов макета в этом окне.
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>Пример окон сеанса. Синие полосы представляют собой оценки каждого отдельного сдвига макета.</figcaption></figure>
+
+{% Aside 'caution' %} Ранее метрика CLS измеряла общую сумму *всех индивидуальных смещений макета*, произошедших в течение всего времени жизни страницы. Чтобы узнать, какие инструменты по-прежнему обеспечивают возможность сравнения с исходной реализацией метрики, ознакомьтесь со статьей [«Развитие метрики CLS (Совокупного смещения макета) в веб-инструментах»](/cls-web-tooling). {% endAside %}
+
+### Какое значение показателя CLS можно считать хорошим?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы показатель CLS не превышал **0,1**. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать **75-й процентиль** загрузки страниц, сегментированный по мобильным и настольным устройствам.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Хорошие значения CLS ниже 0,1, плохие значения больше 0,25 и все промежуточные значения требуют улучшения", width="400", height="300" %}
+</picture>
+
+{% Aside %} Чтобы узнать больше об исследованиях и методологии, лежащих в основе этой рекомендации, см. [«Определение пороговых значений показателей Core Web Vitals»](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## Подробно о смещениях макета
+
+Смещения макета определяются [Layout Instability API (API нестабильности макета)](https://github.com/WICG/layout-instability), который возвращает запись `layout-shift` каждый раз, когда элемент, видимый в области просмотра, меняет свое начальное положение (например, верхнее и левое положение в значении по умолчанию свойства [writing mode](https://developer.mozilla.org/docs/Web/CSS/writing-mode)) между двумя фреймами. Такие элементы считаются *нестабильными*.
+
+Обратите внимание, что смещения макета происходят только тогда, когда существующие элементы меняют свое положение. Если новый элемент добавляется в DOM-модель или существующий элемент меняет размер, это не будет считаться смещением макета до тех пор, пока данные изменения не заставят другие видимые элементы изменить свое начальное положение.
+
+### Оценка смещения макета
+
+Чтобы вычислить *оценку смещения макета*, браузер смотрит на размер области просмотра и перемещение *нестабильных элементов* в пределах области просмотра между двумя отрисованными фреймами. Оценка смещения макета—это результат умножения двух показателей этого движения: *доли воздействия* и *доли расстояния* (описаны ниже).
+
+```text
+оценка смещения макета = доля воздействия * доля расстояния
+```
+
+### Ударная фракция
+
+[Доля воздействия](https://github.com/WICG/layout-instability#Impact-Fraction) измеряет, как *нестабильные элементы* влияют на область просмотра между двумя фреймами.
+
+Объединение видимых областей всех *нестабильных элементов* для предыдущего *и* текущего фрейма в виде доли от общей площади области просмотра будет являться *долей воздействия* для текущего фрейма.
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="Пример доли воздействия с одним *нестабильным элементом*", width="800", height="600", linkTo=true %}
+
+На изображении выше есть элемент, который занимает половину области просмотра в одном фрейме. Затем в следующем фрейме элемент сдвигается вниз на 25% от высоты области просмотра. Красный пунктирный прямоугольник указывает на объединение видимой области элемента в обоих фреймах, которая в данном случае составляет 75% от всего окна просмотра, поэтому *доля воздействия* составляет `0,75`.
+
+### Доля расстояния
+
+Другая часть выражения оценки смещения макета измеряет расстояние, на которое нестабильные элементы переместились относительно области просмотра. *Доля расстояния*это наибольшее расстояние, на которое любой *нестабильный элемент* переместился в фрейме (по горизонтали или по вертикали), деленное на наибольший размер области просмотра (ширина или высота, в зависимости от того, что больше).
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="Пример доли расстояния с одним *нестабильным элементом*", width="800", height="600", linkTo=true %}
+
+В приведенном выше примере наибольший линейный размер области просмотра—это высота, а нестабильный элемент переместился на 25% от высоты области просмотра, поэтому *доля расстояния* составляет 0,25.
+
+Итак, в этом примере *доля воздействия* составляет `0,75`, а *доля расстояния*`0,25`, поэтому *оценка смещения макета* равна `0,75 * 0,25 = 0,1875`.
+
+{% Aside %} Первоначально оценка смещения макета рассчитывалась только на основании *доли воздействия*. *Доля расстояния* была введена, чтобы избежать чрезмерного значения показателя в случаях, когда большие элементы смещаются на небольшую величину. {% endAside %}
+
+В следующем примере показано, как добавление содержимого к существующему элементу влияет на оценку смещения макета:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="Пример смещения макета со стабильными и *нестабильными элементами* и обрезкой области просмотра", width="800", height="600", linkTo=true %}
+
+Кнопка «Щелкни меня!» (Click Me!) добавляется в нижнюю часть серого поля с черным текстом, который толкает зеленое поле с белым текстом вниз (и частично за пределы области просмотра).
+
+В этом примере серый прямоугольник меняет размер, но его начальное положение не меняется, поэтому он не считается *нестабильным элементом*.
+
+Кнопки «Щелкни меня!» ранее не было в DOM, поэтому ее начальное положение также не изменится.
+
+Хотя начальное положение зеленого прямоугольника изменилось, но так как он был частично перемещен из области просмотра, невидимая область не учитывается при вычислении *доли воздействия*. Объединение видимых областей для зеленого прямоугольника в обоих фреймах (показано красным пунктирным прямоугольником) совпадает с площадью зеленого прямоугольника в первом кадре—50% области просмотра. *Доля воздействия*—`0,5`.
+
+*Доля расстояния* показана фиолетовой стрелкой. Зеленая рамка сместилась вниз примерно на 14% от области просмотра, поэтому *доля расстояния* составляет `0,14`.
+
+Оценка смещения макета равна `0,5 x 0,14 = 0,07`.
+
+Последний пример иллюстрирует несколько *нестабильных элементов*:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="Пример смещения макета с несколькими стабильными и *нестабильными элементами*", width="800", height="600", linkTo=true %}
+
+В первом фрейме выше представлены четыре результата запроса к API для животных, отсортированных в алфавитном порядке. Во втором фрейме в отсортированный список добавляется еще несколько результатов.
+
+Первый элемент в списке (Cat, «Кот») не меняет свое начальное положение между фреймами, поэтому он стабильный. Точно так же новые элементы, добавленные в список, ранее не были в DOM, поэтому их начальные позиции также не меняются. Но остальные элементы Dog («Собака»), Horse («Лошадь») и Zebra («Зебра») меняют свои начальные позиции, что делает их *нестабильными элементами*.
+
+Опять же, красные пунктирные прямоугольники представляют собой объединение этих трех *нестабильных элементов* до и после областей, которые в этом случае составляют около 38% площади области просмотра (*доля воздействия* равна `0,38`).
+
+Стрелки показывают расстояния, на которые *нестабильные элементы* переместились из начальных положений. Элемент Zebra («Зебра»), обозначенный синей стрелкой, сместился больше прочих, примерно на 30% высоты области просмотра. Таким образом, *доля расстояния* в этом примере равна `0,3`.
+
+Оценка смещения макета составляет `0,38 x 0,3 = 0,114`.
+
+### Ожидаемые и неожиданные смещения макета
+
+Не все сдвиги в макете—это плохо. Фактически многие динамические веб-приложения часто меняют начальное положение элементов на странице.
+
+#### Изменения макета по инициативе пользователя
+
+Смещение макета плохо только в том случае, если пользователь этого не ожидает. С другой стороны, смещения макета, которые происходят в ответ на действия пользователя (щелчок по ссылке, нажатие кнопки, ввод в поле поиска и т. д.), как правило, допустимы, если смещение достаточно близко к взаимодействию, чтобы взаимосвязь между ними была понятна пользователю.
+
+Например, если взаимодействие с пользователем запускает сетевой запрос, выполнение которого может занять некоторое время, лучше сразу освободить место и показать индикатор загрузки, чтобы избежать неприятного смещения макета после завершения запроса. Если пользователь не понимает, что что-то загружается, или не знает, когда ресурс будет готов, он может попытаться щелкнуть что-нибудь еще во время ожидания.
+
+Для смещений макета, которые происходят в течение 500 миллисекунд после ввода пользователя, будет установлен флаг [`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput), поэтому их можно исключить из вычислений.
+
+{% Aside 'caution' %} Флаг `hadRecentInput` становится true только для дискретных событий ввода, таких как касание, щелчок или нажатие клавиши. Непрерывные взаимодействия, прокрутка, перетаскивание или жесты сжатия и масштабированияне считаются «недавним вводом». Дополнительные сведения см. в [«Спецификации нестабильности макета»](https://github.com/WICG/layout-instability#recent-input-exclusion). {% endAside %}
+
+#### Анимации и переходы
+
+Если всё сделано правильно, анимация и переходыэто отличный способ обновить контент на странице, не удивляя пользователя. Резко и неожиданно перемещающийся контент на странице почти всегда создает неудобства для пользователей. Но контент, который постепенно и естественно перемещается из одной позиции в другую, часто помогает пользователю лучше понять, что происходит и что делать между изменениями состояния.
+
+CSS-свойство [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) позволяет анимировать элементы, не вызывая смещений макета:
+
+- Вместо изменения свойств высоты `height` и ширины `width` можно использовать `transform: scale()`.
+- Чтобы перемещать элементы, следует избегать изменения свойств `top`, `right`, `bottom` или `left` и использовать вместо них `transform: translate()`.
+
+## Как измерить CLS
+
+CLS можно измерить в [лабораторных](/user-centric-performance-metrics/#in-the-lab) или [полевых условиях](/user-centric-performance-metrics/#in-the-field) с помощью следующих инструментов:
+
+{% Aside 'caution' %} Инструменты для измерения в лабораторных условиях обычно загружают страницы в имитируемой среде и поэтому могут измерять только смещения макета, которые происходят во время загрузки страницы. В результате значения CLS, сообщаемые лабораторными инструментами для данной страницы, могут быть меньше, чем у реальных пользователей в полевых условиях. {% endAside %}.
+
+### Инструменты для измерения в полевых условиях
+
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (отчет Core Web Vitals report)](https://support.google.com/webmasters/answer/9205520)
+- [JavaScript-библиотека `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Инструменты для измерения в лабораторных условиях
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Измерение CLS в JavaScript
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+Чтобы измерить CLS с помощью JavaScript, можно воспользоваться [Layout Instability API (API нестабильности макета)](https://github.com/WICG/layout-instability). В следующем примере показано, как создать [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) который прослушивает неожиданные записи смещений макета `layout-shift`, группирует их в сеансы и регистрирует максимальное значение сеанса при каждом его изменении.
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // Only count layout shifts without recent user input.
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // Log the updated value (and its entries) to the console.
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Этот код показывает основной способ вычисления и регистрации CLS. Однако точно измерить CLS таким образом, чтобы метрика соответствовала измерениям в [отчете Chrome User Experience Report](https://developer.chrome.com/docs/crux/) (CrUX), довольно сложно. Подробности см. ниже:
+
+{% endAside %}
+
+В большинстве случаев текущее значение CLS на момент выгрузки страницы является окончательным значением CLS для этой страницы, но есть несколько важных исключений.
+
+Далее приведем различия между тем, что сообщает API, и тем, как рассчитывается метрика.
+
+#### Различия между метрикой и API
+
+- Если страница загружается в фоновом режиме или если она находилась в фоновом режиме до того, как браузер отрисовал любой контент, она не должна сообщать значение CLS.
+- Если страница восстанавливается функцией [back/forward cache](/bfcache/#impact-on-core-web-vitals), значение CLS данной страницы должно быть сброшено до нуля, поскольку пользователи воспринимают такие посещения страниц как отдельные.
+- API не сообщает о записях `layout-shift` для смещений внутри iframe, но для правильного измерения CLS их нужно учитывать. Подфреймы могут использовать API, чтобы сообщать о своих записях `layout-shift` в родительский фрейм для [агрегирования](https://github.com/WICG/layout-instability#cumulative-scores).
+
+Более того, CLS трудно определять из-за того, что показатель измеряется на протяжении всей продолжительности жизни страницы:
+
+- Пользователи могут держать вкладку открытой в течение *очень* долгого временидней, недель, месяцев. Фактически пользователь может никогда не закрыть вкладку.
+- В мобильных операционных системах браузеры обычно не запускают обратные вызовы выгрузки страницы для фоновых вкладок, что затрудняет сообщение «окончательного» значения.
+
+Чтобы справиться с такими случаями, CLS следует сообщать каждый раз, когда страница находится в фоновом режиме, в дополнение к любому времени, когда она выгружается ([событие `visibilitychange`](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange) охватывает оба этих сценария). Системы аналитики, получающие эти данные, должны будут затем вычислить окончательное значение CLS на бэкенде.
+
+Вместо того чтобы запоминать все эти тонкости, разработчики могут использовать для измерения CLS [JavaScript-библиотеку `web-vitals`](https://github.com/GoogleChrome/web-vitals), которая учитывает вышеупомянутые моменты:
+
+```js
+import {onCLS} from 'web-vitals';
+
+// Measure and log CLS in all situations
+// where it needs to be reported.
+onCLS(console.log);
+```
+
+Полный пример измерения CLS в JavaScript приводится в [исходном коде `onCLS()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts).
+
+{% Aside %} В некоторых случаях (например, в iframe с перекрестным происхождением) невозможно измерить CLS в JavaScript. См. подробности в разделе [«Ограничения»](https://github.com/GoogleChrome/web-vitals#limitations) библиотеки `web-vitals`. {% endAside %}
+
+## Как улучшить показатель CLS
+
+Для большинства веб-сайтов можно избежать всех неожиданных смещений макета, придерживаясь нескольких основополагающих принципов:
+
+- **Всегда следует включать атрибуты размеров для изображений и видеоэлементов или иным образом резервировать необходимое пространство с помощью, например, [CSS-свойства aspect-ratio](https://css-tricks.com/aspect-ratio-boxes/).** Такой подход гарантирует, что браузер сможет выделить правильный объем места в документе во время загрузки изображения. Кроме того, можно также применять [политику функции unized-media,](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md) чтобы принудительно использовать это поведение в браузерах, поддерживающих политики функций.
+- **Никогда не следует вставлять контент поверх существующего, кроме случаев, когда это требуется в ответ на взаимодействие с пользователем.** Это гарантирует, что любые изменения макета будут ожидаемыми.
+- **Лучше выбирать анимацию трансформации, чем анимацию изменения свойств, запускающих изменение макета.** Нужно анимировать переходы таким образом, чтобы обеспечить контекст и непрерывность от состояния к состоянию.
+
+Подробные сведения о том, как улучшить CLS, см. в статьях [«Оптимизация CLS»](/optimize-cls/) и [«Отладка смещений макета»](/debug-layout-shifts).
+
+## Дополнительные ресурсы
+
+- Руководство Google Publisher Tag по [минимизации смещения макета](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)
+- [Понимание совокупного смещения макета](https://youtu.be/zIJuY-JCjqw), [Энни Салливан](https://anniesullie.com/) и [Стив Кобес,](https://kobes.ca/) [#PerfMatters](https://perfmattersconf.com/) (2020)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ru/metrics/custom-metrics/index.md b/src/site/content/ru/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..4cb65f53460
--- /dev/null
+++ b/src/site/content/ru/metrics/custom-metrics/index.md
@@ -0,0 +1,348 @@
+---
+layout: post
+title: Пользовательские метрики
+authors:
+  - philipwalton
+date: 2019-11-08
+description: |2-
+
+  Пользовательские метрики позволяют измерять и оптимизировать характерные аспекты работы с вашим сайтом.
+tags:
+  - performance
+  - metrics
+---
+
+Наличие [ориентированных на пользователя показателей](/user-centric-performance-metrics/), которые вы можете измерить на любом веб-сайте, имеет большое значение. Эти показатели позволяют:
+
+- Понять, как реальные пользователи воспринимают Интернет в целом
+- Легко сравнить ваш сайт с сайтом конкурентов
+- Отслеживать полезные данные при помощи ваших аналитических инструментов без необходимости писать собственный код.
+
+Универсальные метрики дают неплохое общее представление, но во многих случаях для полного понимания того, как работает ваш сайт, измерения одних этих показателей недостаточно и требуется отслеживать *больше*.
+
+Пользовательские метрики позволяют измерять аспекты взаимодействия, которые относятся только к вашему сайту, например:
+
+- Сколько времени требуется одностраничному приложению (SPA), чтобы перейти с одной "страницы" на другую
+- Сколько времени требуется, чтобы страница отображала данные, полученные из базы данных, для вошедших в систему пользователей
+- Сколько времени требуется для [гидратации](https://addyosmani.com/blog/rehydration/) приложения с рендерингом на стороне сервера (SSR)
+- Частота попаданий в кеш для ресурсов, загруженных вернувшимися посетителями
+- Задержка события нажатия мыши или клавиатуры в игре
+
+## API для измерения пользовательских метрик
+
+Поначалу у веб-разработчиков не было большого количества низкоуровневых API-интерфейсов для измерения производительности, и в результате им приходилось использовать различные костыли, чтобы проверить, хорошо ли работает сайт.
+
+Например, можно определить, заблокирован ли основной поток из-за длительных задач JavaScript, запустив `requestAnimationFrame` и вычислив дельту между каждым кадром. Если дельта значительно больше, чем частота смены кадров дисплея, такую задачу можно считать длительной. Однако использовать такие приемы не рекомендуется, потому что они сами по себе влияют на производительность (например, разряжают батарею).
+
+Первое правило эффективного измерения производительности — убедиться, что ваши методы измерения сами по себе не вызывают проблем с производительностью. Поэтому для любых пользовательских метрик, которые вы измеряете на своем сайте, по возможности стоит использовать один из следующих API.
+
+### Performance Observer
+
+Понимание API PerformanceObserver критически важно для создания пользовательских показателей производительности, поскольку это механизм, с помощью которого вы получаете данные из всех других API производительности, обсуждаемых в этой статье.
+
+С помощью `PerformanceObserver` можно пассивно подписаться на события, связанные с производительностью. Это означает, что эти API-интерфейсы, как правило, не будут влиять на производительность страницы, поскольку их обратные вызовы обычно запускаются во время [периодов простоя](https://w3c.github.io/requestidlecallback/#idle-periods).
+
+`PerformanceObserver` создается при помощи передачи ему обратного вызова, который будет запускаться всякий раз, когда отправляются новые записи производительности. Затем нужно сообщить объекту-наблюдателю, какие типы записей следует прослушивать, с помощью метода [`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe):
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Заносим запись и все связанные с ней детали в журнал.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+В разделах ниже перечислены все различные типы записей, доступные для наблюдения, но в новых браузерах можно проверить, какие типы записей доступны через статическое свойство [`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute).
+
+{% Aside %} Объект, переданный методу `observe()`, также может задавать массив `entryTypes` (для наблюдения за более чем одним типом записи с помощью одного и того же объект-наблюдателя). Указание `entryTypes` — более старый вариант с более широкой поддержкой браузеров, но сейчас предпочтительно использовать `type`, поскольку эта опция позволяет указать дополнительную конфигурацию наблюдения, зависящую от записи (например, метку `buffered`, описанную далее). {% endAside %}
+
+#### Наблюдение за уже введенными записями
+
+По умолчанию объекты `PerformanceObserver` могут только наблюдать за записями по мере их появления. Это может вызывать трудности, если вы собираетесь загружать код аналитики производительности с отсрочкой (чтобы не блокировать ресурсы с более высоким приоритетом).
+
+Чтобы получить предыдущие записи (после того, как они были введены), присвойте метке `buffered` значение `true` при вызове `observe()`. Браузер будет включать предыдущие записи из своего [буфера записей производительности](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer) при первом обращении к обратному вызову `PerformanceObserver`.
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %} Во избежание проблем с памятью буфер записей производительности ограничен. Для большинства типичных загрузок страниц маловероятно, что буфер заполнится и записи будут пропущены. {% endAside %}
+
+#### Устаревшие API производительности, которых следует избегать
+
+До появления Performance Observer API разработчики могли обращаться к записям производительности с помощью следующих трех методов, определенных для объекта [`performance`](https://w3c.github.io/performance-timeline/):
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+Хотя эти API-интерфейсы все еще поддерживаются, их использование не рекомендуется, поскольку они не позволяют отслеживать, когда создаются новые записи. Кроме того, многие новые API-интерфейсы (например, Long Tasks) не предоставляются через объект `performance`, они доступны только через `PerformanceObserver`.
+
+Если вам непосредственно не нужна совместимость с Internet Explorer, лучше избегать использования этих методов в коде и в дальнейшем использовать `PerformanceObserver`.
+
+### User Timing API
+
+[User Timing API](https://w3c.github.io/user-timing/) — это универсальный API для измерения хронологических показателей. Он позволяет произвольно отмечать точки во времени, а затем измерять продолжительность между этими отметками.
+
+```js
+// Отмечаем время прямо перед запуском задачи.
+performance.mark('myTask:start');
+await doMyTask();
+// Отмечаем время сразу после завершения задачи.
+performance.mark('myTask:end');
+
+// Замеряем дельту между началом и завершением задачи
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+Хотя такие API-интерфейсы, как `Date.now()` или `performance.now()`, предоставляют аналогичные возможности, преимущество использования User Timing API заключается в том, что он хорошо интегрируется с инструментами для повышения производительности. Например, Chrome DevTools визуализирует [измерения User Timing на панели «Производительность»](https://developers.google.com/web/updates/2018/04/devtools#tabs), и многие поставщики аналитических услуг также автоматически отслеживают любые выполняемые измерения и отправляют данные о продолжительности на свой сервер аналитики.
+
+Чтобы получить статистику измерений User Timing, можно использовать [PerformanceObserver](#performance-observer), зарегистрировав его для наблюдения за записями типа `measure`:
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Заносим запись и все связанные с ней детали в журнал.
+      console.log(entry.toJSON());
+    }
+  });
+  // Начинаем отслеживать посылаемые записи `measure`.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+### Long Tasks API
+
+[Long Tasks API](https://w3c.github.io/longtasks/) предназначен для выявления тех моментов, когда блокировка основного потока браузера длится настолько долго, что это влияет на частоту смены кадров или задержку ввода. В настоящее время API сообщает о любых задачах, которые выполняются дольше 50 миллисекунд (мс).
+
+Каждый раз, когда вам нужно запустить ресурсоемкий код или загрузить и выполнить большие скрипты, полезно отслеживать, заблокировал ли этот код основной поток. Фактически, многие высокоуровневые метрики построены на основе самого Long Tasks API (например, [Time to Interactive (TTI)](/tti/) и [Total Blocking Time (TBT)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)).
+
+Чтобы определить, когда возникают длительные задачи, можно использовать [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver), зарегистрировав его для наблюдения за записями типа `longtask`:
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Заносим запись и все связанные с ней детали в журнал.
+      console.log(entry.toJSON());
+    }
+  });
+  // Начинаем отслеживать посылаемые записи `longtask`.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+### Element Timing API
+
+Метрика [Largest Contentful Paint (LCP)](/lcp/) предназначена для определения того, когда на экране было отрисовано самое большое изображение или текстовый блок, но в некоторых случаях требуется измерить время визуализации другого элемента.
+
+В этих случаях можно использовать [Element Timing API](https://wicg.github.io/element-timing/). Фактически, Largest Contentful Paint API реализован как надстройка над Element Timing API и добавляет автоматические отчеты о самом большом осмысленном элементе, но вы можете получить отчет о дополнительных элементах, добавив в явном виде атрибут `elementtiming` и зарегистрировав PerformanceObserver для наблюдения записей типа element.
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">Текст, который нас интересует.</p>
+...
+<script>
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Заносим запись и все связанные с ней детали в журнал.
+      console.log(entry.toJSON());
+    }
+  });
+  // Начинаем отслеживать посылаемые записи `element`.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} Типы элементов, рассматриваемых для Largest Contentful Paint, аналогичны тем, которые наблюдаются через Element Timing API. Если добавить атрибут `elementtiming` к элементу, который не относится к одному из этих типов, атрибут будет проигнорирован. {% endAside %}
+
+### Event Timing API
+
+Метрика [First Input Delay (FID)](/fid/) измеряет время с момента первого взаимодействия пользователя со страницей до момента, когда браузер может фактически начать выполнять обработчики событий в ответ на это взаимодействие. Однако в некоторых случаях может быть полезно измерить само время обработки события, а также время до следующего кадра, который может быть визуализирован.
+
+Это возможно с помощью [Event Timing API](https://wicg.github.io/event-timing/) (который используется для измерения FID), поскольку он предоставляет ряд временных меток в жизненном цикле события, в том числе:
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime): время, когда браузер получает событие.
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): время, когда браузер может начать выполнение обработчиков событий для события.
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend): время, когда браузер завершает выполнение всего синхронного кода, инициированного обработчиками событий для этого события.
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart): время (округленное до 8 мс по соображениям безопасности) между получением события браузером и готовностью к отрисовке следующего кадра после завершения выполнения всего синхронного кода, инициированного обработчиками событий.
+
+В следующем примере показано, как использовать эти значения для создания пользовательских измерений:
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Измеряем First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Измеряем время, необходимое для запуска всех обработчиков событий
+    // Примечание: сюда не входит асинхронно выполняемая работа с использованием
+    // методов типа `requestAnimationFrame()` или `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Измеряем полную длительность события от получения ввода
+    // браузером до готовности к отрисовке следующего кадра
+    // после выполнения всех обработчиков событий.
+    // Примечание: как и выше, сюда не входит асинхронно выполняемая работа
+    //  с использованием методов `requestAnimationFrame()` или `setTimeout()`.
+    // Также по соображениям безопасности значение округляется до 8мс.
+    const firstInputDuration = firstInput.duration;
+
+    // Заносим эти значения в консоль.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+### Resource Timing API
+
+[Resource Timing API](https://w3c.github.io/resource-timing/) дает разработчикам подробную информацию о том, как были загружены ресурсы для конкретной страницы. Несмотря на название API, информация, которую он предоставляет, не ограничивается только данными о времени (хотя их [много](https://w3c.github.io/resource-timing/#processing-model)). Другие данные, к которым вы можете получить доступ, включают:
+
+- [initiatorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype): способ получения ресурса: например, из тегов `<script>` или `<link>`, или из метода `fetch()`
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol): протокол, используемый для получения ресурса, например, `h2` или `quic`
+- [encodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize)/[decodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize): размер ресурса в его закодированной или декодированной форме соответственно
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize): размер ресурса, который был фактически передан по сети. Когда ресурсы получены из кеша, это значение может быть намного меньше, чем `encodedBodySize`, а в некоторых случаях может равняться нулю (если не требуется повторная валидация кеша)
+
+Обратите внимание: вы можете использовать свойство `transferSize` записей хронологии ресурсов для вычисления метрики *скорости попадания в кеш* или, возможно, даже метрики *общего размера кешированного ресурса*. Это может быть полезно для понимания того, как ваша стратегия кеширования ресурсов влияет на производительность для повторных посетителей.
+
+В следующем примере регистрируются все ресурсы, запрошенные страницей, и для каждого из них указывается, был ли он получен из кеша.
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Если значение transferSize равно 0, ресурс был получен из кеша.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Начинаем отслеживать получаемые записи типа `resource`.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+### Navigation Timing API
+
+[Navigation Timing API](https://w3c.github.io/navigation-timing/) похож на Resource Timing API, но сообщает только о [запросах навигации](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests). Тип записей `navigation` также похож на `resource`, но содержит некоторую [дополнительную информацию,](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming) относящуюся только к запросам навигации (например, когда освобождаются события `DOMContentLoaded` и `load`).
+
+Есть метрика, которую многие разработчики отслеживают для понимания времени ответа сервера — [Time to First Byte](https://en.wikipedia.org/wiki/Time_to_first_byte). Она доступна через Navigation Timing API — точнее говоря, это метка времени `responseStart`.
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Если значение transferSize равно 0, ресурс был получен из кеша.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Начинаем отслеживать получаемые записи типа `navigation`.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+Еще одна метрика, которая может понадобиться разработчикам, использующим сервис-воркер, — время запуска сервис-воркера для запросов навигации. Это количество времени, которое требуется браузеру для запуска потока сервис-воркера, прежде чем он сможет начать перехват событий считывания.
+
+Время запуска сервис-воркера для конкретного запроса навигации можно определить по значению дельты между `entry.responseStart` и `entry.workerStart`.
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Начинаем отслеживать получаемые записи типа `navigation`.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
+
+### Server Timing API
+
+[Server Timing API](https://w3c.github.io/server-timing/) позволяет передавать данные о времени, связанные с запросом, с вашего сервера в браузер через заголовки ответов. Например, можно указать, сколько времени потребовалось для поиска данных в базе данных для конкретного запроса, что может быть полезно при отладке проблем с производительностью, вызванных медленной работой сервера.
+
+Для разработчиков, использующих сторонних поставщиков аналитики, Server Timing API — единственный способ сопоставить данные о производительности сервера с другими бизнес-показателями, которые могут измеряться этими аналитическими инструментами.
+
+Чтобы указать данные о времени сервера в своих ответах, вы можете использовать заголовок ответа `Server-Timing`. Вот пример.
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+Затем вы можете считывать эти данные со своих страниц в записях `resource` или `navigation` через API-интерфейсы Resource Timing и Navigation Timing.
+
+```js
+// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Создаем объект performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Заносим в журнал все данные о времени сервера для этого ответа
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Начинаем отслеживать получаемые записи типа `navigation`.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Если браузер не поддерживает этот API, ничего не делаем.
+}
+```
diff --git a/src/site/content/ru/metrics/fcp/index.md b/src/site/content/ru/metrics/fcp/index.md
new file mode 100644
index 00000000000..0f49d5be27e
--- /dev/null
+++ b/src/site/content/ru/metrics/fcp/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: Первая отрисовка контента (FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-19
+description: В этой статье описывается метрика FCP (Первая отрисовка контента) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Первая отрисовка контента (FCP)важная, ориентированная на пользователя метрика для измерения [воспринимаемой скорости загрузки,](/user-centric-performance-metrics/#types-of-metrics) так как она отмечает первую точку на временной шкале загрузки страницы, где пользователь может видеть появление контента на экране. Низкий показатель FCP убеждает пользователя в том, что загрузка [началась](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## Что такое FCP?
+
+Метрика FCP (Первая отрисовка контента) измеряет время с момента начала загрузки страницы до момента, когда какая-либо часть содержимого страницы отобразится на экране. Под «содержимым» в этой метрике понимается текст, изображения (включая фоновые изображения), `<svg>` или небелые элементы `<canvas>`.
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="Временная шкала FCP с google.com", width="800", height="311", linkTo=true %}
+
+На приведенной выше временной шкале загрузки FCP происходит во втором фрейме, так как именно тогда первые элементы изображения и текст отображаются на экране.
+
+Заметно, что хотя некоторая часть контента была отрисована, но не вся. Это важное различие между *Первой* отрисовкой контента(FCP) и *[Скоростью загрузки основного контента (LCP)](/lcp/)*, цель метрики LCPизмерить время загрузки основного контента.
+
+<picture>
+    <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+    {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="Хорошие значения FCP не более 1,8 секунды, низкие значения больше 3,0 секунд, и все, что находится между ними, требует улучшения", width="400", height="300" %}
+</picture>
+
+### Какое значение показателя FCP можно считать хорошим?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы время до первой отрисовки контента составляло **1,8 секунды** или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать **75-й процентиль** загрузки страниц, сегментированный по мобильным и настольным устройствам.
+
+## Как измерить FCP
+
+FCP можно измерить в [лабораторных](/user-centric-performance-metrics/#in-the-lab) или [полевых условиях](/user-centric-performance-metrics/#in-the-field) с помощью следующих инструментов:
+
+### Инструменты для измерения в полевых условиях
+
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [Search Console (отчет о скорости загрузки)](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [JavaScript-библиотека `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Инструменты для измерения в лабораторных условиях
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+
+### Измерение FCP в JavaScript
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+Чтобы измерить FCP в JavaScript, можно воспользоваться [Paint Timing API](https://w3c.github.io/paint-timing/). В следующем примере показано, как создать [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver), который прослушивает записи `paint` с именем `first-contentful-paint` и регистрирует их в консоли.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Этот код показывает, как регистрировать в консоли записи `first-contentful-paint`, но само измерение FCP в JavaScript сложнее. Подробнее см. ниже:
+
+{% endAside %}
+
+В приведенном выше примере зарегистрированная запись `first-contentful-paint` сообщит, когда был отрисован первый элемент контента. Однако в некоторых случаях эта запись недействительна для измерения FCP.
+
+Далее приведем различия между тем, что сообщает API, и тем, как рассчитывается метрика.
+
+#### Различия между метрикой и API
+
+- API отправит запись `first-contentful-paint` для страниц, загруженных в фоновых вкладках, но эти страницы следует игнорировать при вычислении FCP (время первой отрисовки нужно учитывать только в том случае, если страница всё время находилась на переднем плане).
+- API не сообщает о записях `first-contentful-paint`, когда страницы восстанавливаются функцией [back/forward cache](/bfcache/#impact-on-core-web-vitals), но в данных случаях следует измерять FCP, поскольку пользователи воспринимают такие посещения страниц как отдельные.
+- API [может не сообщать о времени отрисовки из iframe с перекрестным происхождением](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes), но для правильного измерения FCP следует учитывать все фреймы. Подфреймы могут использовать API, чтобы сообщать о времени отрисовки в родительский фрейм для агрегирования.
+
+Чтобы не запоминать все эти тонкости, разработчики могут использовать для измерения FCP [JavaScript-библиотеку `web-vitals`](https://github.com/GoogleChrome/web-vitals), которая обрабатывает эти случаи (где это возможно):
+
+```js
+import {onFCP} from 'web-vitals';
+
+// Measure and log FCP as soon as it's available.
+onFCP(console.log);
+```
+
+Полный пример измерения FCP в JavaScript приводится в [исходном коде `onFCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts).
+
+{% Aside %} В некоторых случаях (например, в iframe с перекрестным происхождением) невозможно измерить FCP в JavaScript. См. подробности в разделе [«Ограничения»](https://github.com/GoogleChrome/web-vitals#limitations) библиотеки `web-vitals`. {% endAside %}
+
+## Как улучшить показатель FCP
+
+Чтобы узнать, как улучшить FCP для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные [возможности улучшения](https://developer.chrome.com/docs/lighthouse/performance/#opportunities) или [диагностики](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics), предлагаемые проверкой.
+
+Чтобы узнать, как улучшить FCP в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
+
+- [Устранение ресурсов, блокирующих рендеринг](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [Минимизация CSS-кода](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [Удаление неиспользуемого CSS-кода](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [Предварительное подключение к нужным источникам](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Уменьшение времени ответа сервера (TTFB)](/ttfb/)
+- [Уход от переадресации нескольких страниц](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [Предварительная загрузка ключевых запросов](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Уход от огромных нагрузок на сеть](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [Обслуживание статических объектов сайта с помощью эффективной политики кеширования](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [Уход от чрезмерного размера DOM](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [Минимизация глубины вложенности критических запросов](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Настройка показа текста во время загрузки веб-шрифтов](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [Поддержание малого количества запросов и объемов передаваемых данных](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ru/metrics/fid/index.md b/src/site/content/ru/metrics/fid/index.md
new file mode 100644
index 00000000000..f288d5eeeb6
--- /dev/null
+++ b/src/site/content/ru/metrics/fid/index.md
@@ -0,0 +1,190 @@
+---
+layout: post
+title: Время ожидания до первого взаимодействия с контентом (FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: В этой статье описывается метрика FID (Время ожидания до первого взаимодействия с контентом) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Время ожидания до первого взаимодействия с контентом (FID)важная, ориентированная на пользователя метрика для измерения [отзывчивости при загрузке](/user-centric-performance-metrics/#types-of-metrics). Данная метрика позволяет количественно оценить опыт пользователей при попытке взаимодействия с неотвечающими страницами. Низкое значение показателя FID свидетельствует о том, что страница [пригодна для использования](/user-centric-performance-metrics/#questions). {% endAside %}
+
+Все мы знаем, как важно произвести хорошее первое впечатление. Это важно не только при знакомстве с новыми людьми, но и при знакомстве пользователей со страницей в Интернете.
+
+В Интернете хорошее первое впечатление может повлиять на то, станет ли посетитель сайта лояльным клиентом или он уйдет и больше не вернется. Вопрос в том, что именно производит хорошее впечатление и как вы оцениваете, какое впечатление ваш сайт производит на пользователей?
+
+В Интернете первое впечатление складывается из совершенно разных составляющих: начиная от дизайна и визуальной привлекательности сайта, и заканчивая скоростью загрузки и отзывчивостью.
+
+Трудно оценить, насколько пользователям нравится дизайн сайта с веб-API, но можно довольно легко измерить скорость загрузки и отзывчивость сайта!
+
+Первое впечатление пользователей о том, как быстро загружается сайт, можно измерить с помощью метрики [FCP (Первая отрисовка контента)](/fcp/). Но то, как быстро сайт может рисовать пиксели на экране,лишь одна из составляющих успеха. Не менее важно, насколько быстро реагирует сайт, когда пользователи пытаются взаимодействовать с этими пикселями!
+
+Показатель FID (Время ожидания до первого взаимодействия с контентом) помогает измерить первое впечатление пользователя об интерактивности и быстродействии сайта.
+
+## Что такое FID?
+
+FID измеряет время от момента, когда пользователь впервые взаимодействует со страницей (то есть, когда он щелкает ссылку, нажимает кнопку или использует настраиваемый элемент управления на основе JavaScript), до момента, когда браузер действительно сможет начать реагировать на сигналы от обработчиков событий в ответ на это взаимодействие.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Хорошие значения fid - 2,5 секунды, низкие значения больше 4,0 секунд, и все, что находится между ними, требует улучшения", width="400", height="300" %}
+</picture>
+
+### Какое значение показателя FID можно считать хорошим?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы время ожидания до первого взаимодействия с контентом составляло **100 миллисекунд** или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать **75-й процентиль** загрузки страниц, сегментированный по мобильным и настольным устройствам.
+
+{% Aside %} Чтобы узнать больше об исследованиях и методологии, лежащих в основе этой рекомендации, см. [«Определение пороговых значений показателей Core Web Vitals»](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## Подробнее о FID
+
+Как разработчики, которые пишут код, реагирующий на события, мы часто предполагаем, что код будет запущен немедленно, как только событие произойдет. Но, как пользователи, мы часто сталкиваемся с обратным: при попытках взаимодействовать с загружаемой на телефоне веб-страницей ничего не происходит, отсюда сплошное разочарование.
+
+Как правило, задержка ввода возникает из-за того, что основной поток браузера занят чем-то другим, поэтому он (пока) не может отвечать пользователю. Одна из распространенных причин этого — браузер занят синтаксическим анализом и выполнением большого JavaScript-файла, загруженного приложением. При этом он не может запускать прослушиватели событий, потому что загружаемый JavaScript может потребовать от него выполнять другие действия.
+
+{% Aside 'gotchas' %} FID измеряет только «задержку» обработки событий. Он не измеряет ни время обработки событий, ни время, необходимое браузеру для обновления пользовательского интерфейса после запуска обработчиков событий. Хотя это время действительно влияет на взаимодействие с пользователем, включение его как части FID будет побуждать разработчиков реагировать на события асинхронно, что улучшит метрику, но, вероятно, ухудшит восприятие. Ниже более подробно описывается, [почему учитывается только задержка ввода.](#why-only-consider-the-input-delay) {% endAside %}
+
+Рассмотрим следующую временную шкалу загрузки типичной веб-страницы:
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="Пример трассировки загрузки страницы", width="800", height="260", linkTo=true %}
+
+Эта визуализация показывает страницу, которая выполняет несколько сетевых запросов на ресурсы (скорее всего, файлы CSS и JS) и, после завершения загрузки этих ресурсов, они обрабатываются в основном потоке.
+
+Это приводит к периодам, когда основной поток на какое-то время занят. Эти [задачи](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task) обозначены блоками бежевого цвета.
+
+Длительное время ожидания до первого взаимодействия с контентом обычно возникает между [Первой отрисовкой контента (FCP)](/fcp/) и [Временем до интерактивности (TTI)](/tti/), потому что страница визуализировала часть контента, но еще не стала в достаточной мере интерактивной. Чтобы это проиллюстрировать, на временную шкалу были добавлены FCP и TTI:
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="Пример трассировки загрузки страницы с FCP и TTI", width="800", height="340", linkTo=true %}
+
+Возможно, вы заметили, что между FCP и TTI проходит довольно много времени (в том числе три [длинные задачи](/custom-metrics/#long-tasks-api)). Если пользователь пытается взаимодействовать со страницей в течение этого времени (например, щелкнуть ссылку), будет задержка между моментом получения щелчка и моментом ответа основного потока.
+
+Подумайте, что произойдет, если пользователь попытается взаимодействовать со страницей в начале самой длинной задачи:
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="Пример трассировки загрузки страницы с FCP, TTI и FID", width="800", height="380", linkTo=true %}
+
+Поскольку ввод происходит, когда браузер выполняет задачу, ему необходимо завершить задачу, прежде чем реагировать на ввод. Время ожиданияэто значение FID для этого пользователя на этой странице.
+
+{% Aside %} В этом примере пользователь случайно взаимодействовал со страницей в начале периода наибольшей загрузки основного потока. Если бы пользователь начал взаимодействовать со страницей мгновением раньше (во время периода простоя), браузер мог бы ответить сразу. Эта разница во входной задержке подчеркивает важность рассмотрения распределения значений FID при составлении отчетов по метрике. Вы можете узнать больше об этом в разделе статьи, посвященном анализу данных FID и составлению отчетов по ним. {% endAside %}
+
+### Что делать, если у взаимодействия нет прослушивателя событий?
+
+FID измеряет разницу между моментом получения события ввода и моментом следующего простоя основного потока. Это означает, что FID измеряется **даже в тех случаях, когда прослушиватель событий не был зарегистрирован**. Причина в том, что для многих взаимодействий с пользователем не требуется прослушиватель событий, но для их запуска *необходимо*, чтобы основной поток находился в режиме ожидания.
+
+Например, все HTML-элементы в списке ниже должны ждать завершения выполняемых задач в основном потоке, прежде чем отвечать на действия пользователя:
+
+- текстовые поля, флажки и переключатели (`<input>`, `<textarea>`);
+- выпадающие списки (`<select>`);
+- ссылки (`<a>`).
+
+### Почему рассматривается только первое взаимодействие?
+
+Хотя длительное время ожидания до любого взаимодействия с контентом может вызвать негативные впечатления у пользователя, рекомендуется измерять именно время ожидания до первого взаимодействия по нескольким причинам:
+
+- Время ожидания до первого взаимодействия с контентом формирует первое впечатление пользователя об отзывчивости сайта. Первые впечатления имеют решающее значение при создании общего впечатления о качестве и надежности сайта.
+- Сегодня самые большие проблемы с интерактивностью в Интернете возникают во время загрузки страницы. Поэтому работа над улучшением первого взаимодействия с пользователем на сайте окажет положительное влияние на улучшение общей интерактивности Интернета.
+- Решения для устранения длительного времени ожидания до первого взаимодействия с контентом (разделение кода, предварительная загрузка меньшего количества скриптов JavaScript и т. д.) не являются универсальными. Выделив эти показатели, можно предоставить веб-разработчикам более конкретные рекомендации по производительности.
+
+### Что считается первым взаимодействием с контентом?
+
+FID — это показатель, который измеряет скорость отклика страницы во время загрузки. Таким образом, он фокусируется только на событиях ввода от дискретных действий, таких как клики, касания и нажатия клавиш.
+
+Другие взаимодействия, такие как прокрутка и масштабирование, являются непрерывными действиями и имеют совершенно другие ограничения производительности (кроме того, браузеры часто могут скрывать задержку, выполняя их в отдельном потоке).
+
+Другими словами, FID фокусируется на R (responsiveness : отзывчивости) в [модели производительности RAIL](/rail/), тогда как прокрутка и масштабирование больше связаны с A (animation : анимацией), и их характеристики производительности следует оценивать отдельно.
+
+### Что делать, если пользователь никогда не взаимодействует с вашим сайтом?
+
+Не все пользователи будут взаимодействовать с вашим сайтом при каждом посещении. И не все взаимодействия имеют отношение к FID (как упоминалось в предыдущем разделе). Кроме того, первые взаимодействия одних пользователей будут происходить в неудобное время (когда основной поток занят в течение длительного периода времени), а других пользователейв удобное время (когда основной поток простаивает).
+
+Это означает, что будут пользователи без FID, с низкими значениями FID и, вероятно, с высокими значениями FID.
+
+Способы отслеживания, составления отчетов и анализа FID, скорее всего, будут отличаться от способов, применяемых при работе с другими метриками. Подробнее об этом в следующем разделе.
+
+### Зачем учитывать только задержку при вводе?
+
+Как упоминалось выше, FID измеряет только «задержку» обработки событий. Он не измеряет ни время обработки событий, ни время, необходимое браузеру для обновления пользовательского интерфейса после запуска обработчиков событий.
+
+Несмотря на то, что данное время важно для пользователя и *влияет* на его впечатления о сайте, оно не включено в эту метрику, так как это могло бы побудить разработчиков добавить обходные пути, которые фактически ухудшат работу с сайтом. Например, разработчики могли бы заключить логику обработчика событий в асинхронный обратный вызов (через `setTimeout()` или `requestAnimationFrame()`), чтобы отделить ее от задачи, связанной с событием. Результатом будет улучшение значения метрики, но более медленный отклик, воспринимаемый пользователем.
+
+Однако, хотя FID измеряет только часть «задержки» события, разработчики, которые хотят отслеживать большую часть жизненного цикла события, могут сделать это с помощью [Event Timing API](https://wicg.github.io/event-timing/). См. руководство по [пользовательским метрикам](/custom-metrics/#event-timing-api) для получения более подробной информации.
+
+## Как измерить FID
+
+Измерить FID можно только в [полевых условиях](/user-centric-performance-metrics/#in-the-field), так как для измерения требуется, чтобы реальный пользователь взаимодействовал с вашей страницей. Инструменты для измерения FID перечислены ниже.
+
+{% Aside %} FID требует наличия реального пользователя, поэтому данный показатель нельзя измерить в лабораторных условиях. Однако показатель [общего времени блокировки (TBT)](/tbt/) поддается лабораторным измерениям, хорошо коррелирует с FID в полевых условиях, а также фиксирует проблемы, влияющие на интерактивность. Оптимизация, улучшающая TBT в лабораторных условиях, также должна улучшить FID для ваших пользователей. {% endAside %}
+
+### Инструменты для измерения в полевых условиях
+
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (отчет Core Web Vitals report)](https://support.google.com/webmasters/answer/9205520)
+- [JavaScript-библиотека `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Измерение FID в JavaScript
+
+{% BrowserCompat 'api.PerformanceEventTiming' %}
+
+Чтобы измерить FID с помощью JavaScript, можно воспользоваться [Event Timing API](https://wicg.github.io/event-timing). В следующем примере показано, как создать [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver), который прослушивает записи [`first-input`](https://wicg.github.io/event-timing/#sec-performance-event-timing) и регистрирует их в консоли:
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %} Этот код показывает только, как регистрировать записи `first-input` в консоль и вычислять их задержку. Однако измерение FID в JavaScript сложнее. Подробности ниже. {% endAside %}
+
+В приведенном выше примере значение задержки записи `first-input` измеряется путем получения разницы между отметками времени записей `startTime` и `processingStart`. В большинстве случаев это будет значение FID; однако не все записи `first-input` действительны для измерения FID.
+
+Далее приведем различия между тем, что сообщает API, и тем, как рассчитывается метрика.
+
+#### Различия между метрикой и API
+
+- API будет отправлять записи `first-input` для страниц, загруженных в фоновых вкладках, но эти страницы следует игнорировать при вычислении FID.
+- API также будет отправлять записи `first-input`, если страница была загружена в фоновом режиме до первого ввода, но эти страницы тоже следует игнорировать при вычислении FID (вводы учитываются только в том случае, если страница всё время была на переднем плане).
+- API не сообщает о записях `first-input`, когда страницы восстанавливаются функцией [back/forward cache](/bfcache/#impact-on-core-web-vitals), но в данных случаях следует измерять FID, поскольку пользователи воспринимают такие посещения страниц как отдельные.
+- API не сообщает о вводах внутри iframe, но для правильного измерения FID их нужно учитывать. Элементы iframe могут использовать API, чтобы сообщать о своих записях `first-input` в родительский фрейм для агрегирования.
+
+Чтобы не запоминать все эти тонкости, разработчики могут использовать для измерения FID [JavaScript-библиотеку `web-vitals`](https://github.com/GoogleChrome/web-vitals), которая обрабатывает эти случаи (где это возможно):
+
+```js
+import {onFID} from 'web-vitals';
+
+// Measure and log FID as soon as it's available.
+onFID(console.log);
+```
+
+Полный пример измерения FID в JavaScript приводится в [исходном коде `onFID()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts).
+
+{% Aside %} В некоторых случаях (например, в iframe с перекрестным происхождением) невозможно измерить FID в JavaScript. См. подробности в разделе [«Ограничения»](https://github.com/GoogleChrome/web-vitals#limitations) библиотеки `web-vitals` {% endAside %}
+
+### Анализ и отчетность по данным FID
+
+Из-за ожидаемой дисперсии значений FID очень важно, чтобы при составлении отчета по FID вы смотрели на распределение значений и сосредотачивались на более высоких процентилях.
+
+Хотя для всех пороговых значений Core Web Vitals [выбирается](/defining-core-web-vitals-thresholds/#choice-of-percentile) 75-й процентиль, для FID настоятельно рекомендуется смотреть на 95–99-й процентили, поскольку они будут соответствовать особенно плохим первым впечатлениям пользователей от сайта и покажут области, которые больше всего нуждаются в улучшении.
+
+Это утверждение верно и при сегментации отчетов по категориям или типам устройств. Например, если вы запускаете отдельные отчеты для настольных компьютеров и мобильных устройств, уделите особое внимание диапазону FID с 95-го по 99-й процентили в обеих этих категориях.
+
+## Как улучшить показатель FID
+
+Чтобы узнать, как улучшить FID для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные [возможности улучшения](https://developer.chrome.com/docs/lighthouse/performance/#opportunities), предлагаемые проверкой.
+
+Хотя FID является полевым показателем, а Lighthouse — инструментом для работы с лабораторными показателями, рекомендации по улучшению FID и [Общего времени блокировки (TBT)](/tbt/) совпадают.
+
+Подробные сведения о том, как улучшить FID, см. в статье [«Оптимизация FID»](/optimize-fid/). Дополнительные рекомендации по отдельным методам повышения производительности, которые также могут улучшить FID, смотрите в следующих статьях:
+
+- [Уменьшение влияния стороннего кода](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Уменьшение времени выполнения JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Минимизация работы основного потока](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Поддержание малого количества запросов и объемов передаваемых данных](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ru/metrics/index.md b/src/site/content/ru/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/ru/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/ru/metrics/lcp/index.md b/src/site/content/ru/metrics/lcp/index.md
new file mode 100644
index 00000000000..33fa4b9b5d0
--- /dev/null
+++ b/src/site/content/ru/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Скорость загрузки основного контента (LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-19
+description: В этой статье описывается метрика LCP (Скорость загрузки основного контента) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Скорость загрузки основного контента (LCP) важный, ориентированный на пользователя показатель для измерения [воспринимаемой скорости загрузки,](/user-centric-performance-metrics/#types-of-metrics) так как он отмечает на шкале времени загрузки страницы момент вероятной загрузки основного контента. Низкий показатель LCP убеждает пользователя в [полезности](/user-centric-performance-metrics/#questions) страницы. {% endAside %}
+
+В прошлом веб-разработчикам было довольно сложно измерять время, за которое основной контент веб-страницы загружается и становится видимым для пользователей.
+
+Старые метрики, например, события [load](https://developer.mozilla.org/docs/Web/Events/load) или [DOMContentLoaded](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded), не подходят, так как они не обязательно соответствуют тому, что пользователь видит на экране. А более новые, ориентированные на пользователя показатели производительности, такие как [Первая отрисовка контента (FCP)](/fcp/), отражают только самое начало процесса загрузки. Пользователю не очень важен момент отображения заставки или индикатора загрузки на странице.
+
+Раньше рекомендовалось использовать такие показатели производительности, как [First Meaningful Paint : Время отрисовки основного контента (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/) и [Speed Index : Индекс скорости (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) (оба показателя доступны в Lighthouse), чтобы помочь оценить восприятие пользователем страницы после начальной отрисовки. Но эти метрики достаточно сложны, запутаны и часто неверны. Это означает, что они всё еще не определяют точное время загрузки основного контента страницы.
+
+Чем проще, тем лучше. Основываясь на обсуждениях в группе [W3C Web Performance Working Group](https://www.w3.org/webperf/) и исследованиях, проведенных в Google, мы обнаружили, что более точный способ измерить время загрузки основного содержимого страницы это зафиксировать время отрисовки самого большого элемента страницы.
+
+## Что такое LCP?
+
+Метрика LCP (Скорость загрузки основного контента) сообщает время рендеринга самого большого [изображения или текстового блока](#what-elements-are-considered), видимого в области просмотра, отсчитанное от момента [начала загрузки](https://w3c.github.io/hr-time/#timeorigin-attribute) страницы.
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="Хорошие значения LCP - 2,5 секунды, низкие значения больше 4,0 секунд, и все, что находится между ними, требует улучшения", width="400", height="300" %}
+</picture>
+
+### Что такое хороший показатель LCP?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы максимальная продолжительность отрисовки контента составляла **2,5 секунды** или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, рекомендуется в качестве порогового значения использовать **75-й процентиль** загрузки страниц, сегментированный по мобильным и настольным устройствам.
+
+{% Aside %} Чтобы узнать больше об исследованиях и методологии, лежащих в основе этой рекомендации, см. [«Определение пороговых значений показателей Core Web Vitals»](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### Какие элементы учитываются?
+
+По данным из [API LCP](https://wicg.github.io/largest-contentful-paint/), при оценке скорости загрузки основного контента учитываются следующие типы элементов:
+
+- элементы `<img>`;
+- элементы `<image>` внутри элемента `<svg>`;
+- элементы `<video>` (используется изображение постера);
+- элементы с фоновым изображением, загруженным с помощью функции [`url()`](https://developer.mozilla.org/docs/Web/CSS/url()) (в отличие от [CSS-градиента](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients));
+- [блочные элементы](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements), содержащие текстовые узлы или другие дочерние строковые элементы.
+
+Обратите внимание, что типы элементов были намеренно ограничены этим списком, чтобы упростить начальную задачу. Дополнительные элементы (например, `<svg>`, `<video>`) могут быть добавлены в будущем по мере проведения дополнительных исследований.
+
+### Как определяются размеры элемента?
+
+Размер элемента для метрики LCP обычно равен размеру, который виден пользователю в области просмотра. Не учитывается в размере элемента следующее: элементы, выходящие за пределы области просмотра, обрезанные элементы и элементы с невидимым [переполнением](https://developer.mozilla.org/docs/Web/CSS/overflow).
+
+В случае масштабированных изображений учитывается видимый или [внутренний размер](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size), в зависимости от того, что меньше. Например, для уменьшенных изображений учитываются размеры, в которых они отображаются, а для растянутых изображений—внутренние (подлинные) размеры.
+
+В случае текстовых элементов учитывается только размер их текстовых узлов (наименьший прямоугольник, охватывающий все текстовые узлы).
+
+Для всех элементов не учитываются поля, отступы или границы, применяемые с помощью CSS.
+
+{% Aside %} Иногда сложно определить, какие текстовые узлы каким элементам принадлежат. Особенно для элементов, чьи дочерние элементы включают встроенные элементы и узлы с простым текстом, а также блочные элементы. Ключевой момент здесь в том, что каждый текстовый узел принадлежит своему ближайшему блочному элементу-предку (и только ему). В [терминах спецификации](https://wicg.github.io/element-timing/#set-of-owned-text-nodes): каждый текстовый узел принадлежит элементу, который генерирует [содержащий его блок](https://developer.mozilla.org/docs/Web/CSS/Containing_block). {% endAside %}
+
+### Когда сообщается об отрисовке самого большого элемента?
+
+Страницы часто загружаются поэтапно, поэтому самый большой элемент на странице может меняться.
+
+Чтобы уловить возможные изменения, браузер отправляет запись [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) типа `largest-contentful-paint`, идентифицирующую самый большой элемент контента, как только отрисовывается первый фрейм. А затем, после рендеринга последующих фреймов, браузер отправляет другие [`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) при каждом изменении самого большого элемента контента.
+
+Например, на странице с текстом и главным изображением (hero image) браузер может сначала просто отобразить текст—в этот момент он отправит запись `largest-contentful-paint`, свойство `element` которой, скорее всего, будет ссылаться на `<p>` или `<h1>`. Позже, как только главное изображение загрузится, будет отправлена следующая запись `largest-contentful-paint`, а её свойство `element` уже будет ссылаться на `<img>`.
+
+Следует отметить, что элемент может считаться самым большим элементом контента только после того, как он отрисовался и стал видимым для пользователя. Изображения, которые еще не загрузились, не считаются «отрисованными». Текстовые узлы также не используют веб-шрифты в период [блокировки шрифтов](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline). В таких случаях о меньшем элементе может сообщаться как о самом большом элементе контента, но как только завершится рендеринг более крупного элемента, браузер сообщит об этом, отправив другой объект `PerformanceEntry`.
+
+Помимо дальнейшей загрузки изображений и шрифтов, страница может добавлять новые элементы в DOM по мере того, как новый контент становится доступным. Если какой-либо из этих новых элементов окажется больше, чем предыдущий самый большой элемент контента, то браузер сообщит об этом с помощью `PerformanceEntry`.
+
+Если элемент, который в настоящее время является самым большим элементом контента, удаляется из области просмотра (или даже удаляется из DOM), он будет оставаться самым большим элементом контента, пока не появится более крупный элемент.
+
+{% Aside %} До Chrome 88 удаленные элементы не считались самыми большими элементами контента, и их удаление приводило к отправке новой записи `largest-contentful-paint`. Однако из-за популярных шаблонов пользовательского интерфейса, например карусели изображений, которые часто удаляют DOM-элементы, метрика была обновлена, чтобы точнее отражать восприятие пользователей. Более подробную информацию см. в [ЖУРНАЛЕ ИЗМЕНЕНИЙ](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md). {% endAside %}
+
+Браузер перестанет сообщать о новых записях, как только пользователь начнет взаимодействовать со страницей (касание, клик, прокрутка или нажатие клавиш), поскольку в результате взаимодействие отображаемый контент может измениться (что особенно верно при прокрутке).
+
+Аналитической службе для проведения оценки понадобится только последняя отправленная запись `PerformanceEntry`.
+
+{% Aside 'caution' %} Иногда пользователи могут открывать страницы в фоновых вкладках. В этом случае отрисовка самого большого элемента контента может вообще не произойти до тех пор, пока пользователь не перейдет в эту вкладку, а это может случиться позднее первой загрузки страницы.{% endAside %}
+
+#### Время загрузки и время рендеринга
+
+По соображениям безопасности метка времени рендеринга изображений не отображается для изображений из разных источников, у которых отсутствует заголовок [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin). Вместо этого отображается только время их загрузки (поскольку оно уже доступно через многие другие веб-API).
+
+В [приведенном ниже примере](#measure-lcp-in-javascript) показано, как обрабатывать элементы, время рендеринга которых недоступно. Но, по возможности, всегда рекомендуется устанавливать заголовок [`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin), чтобы ваши показатели были более точными.
+
+### Как обрабатываются изменения макета и размера элемента?
+
+Чтобы снизить влияние вычислений и отправки LCP-записей на общую производительность, изменение размеров или положения элемента не учитываются и не приводят к созданию новых кандидатов LCP. Учитывается только начальный размер и положение элемента в области просмотра.
+
+Это означает, что изображения, которые изначально появляются за пределами видимой области и лишь затем оказываются в ней, могут не учитываться. Верно и обратное: изначально отображаемые в видимой области элементы, которые затем уходят из поля зрения, продолжат сообщать о своем исходном размере в области просмотра.
+
+### Примеры
+
+Вот несколько примеров того, как меняется самый большой элемент контента на нескольких популярных веб-сайтах:
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="Временная шкала LCP с cnn.com", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="Временная шкала LCP с techcrunch.com", width="800", height="311" %}
+
+На обеих временных шкалах самый большой элемент изменяется по мере загрузки контента. В первом примере новый контент добавляется в DOM, и это изменяет самый большой элемент. Во втором примере макет изменяется, и содержимое, которое ранее было самым большим, удаляется из области просмотра.
+
+Хотя часто бывает, что контент, загруженный позднее, оказывается крупнее уже находящегося на странице, это не всегда так. Следующие два примера показывают, что отрисовка самого большого элемента контента происходит до полной загрузки страницы.
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="Временная шкала LCP с instagram.com", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="Временная шкала LCP с google.com", width="800", height="311" %}
+
+В первом примере логотип Instagram загружается относительно рано и остается самым большим элементом даже по мере отрисовки другого контента. В примере страницы результатов поиска Google самый большой элемент - это абзац текста, который отображается до завершения загрузки любого логотипа или изображения. Так как все отдельные изображения меньше этого абзаца, он остается самым большим элементом на протяжении всего процесса загрузки.
+
+{% Aside %} На первом фрейме временной шкалы Instagram можно заметить, что вокруг логотипа камеры нет зеленой рамки. Это потому, что это элемент `<svg>`, а данные элементы в настоящее время не считаются кандидатами LCP. Первый кандидат LCP это текст во втором фрейме. {% endAside %}
+
+## Как измерить LCP
+
+LCP можно измерить в [лабораторных](/user-centric-performance-metrics/#in-the-lab) или [полевых условиях](/user-centric-performance-metrics/#in-the-field) с помощью следующих инструментов:
+
+### Инструменты для измерения в полевых условиях
+
+- Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Search Console (отчет Core Web Vitals report)](https://support.google.com/webmasters/answer/9205520)
+- [JavaScript-библиотека `web-vitals`](https://github.com/GoogleChrome/web-vitals)
+
+### Инструменты для измерения в лабораторных условиях
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://webpagetest.org/)
+
+### Измерение LCP в JavaScript
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+Чтобы измерить LCP с помощью JavaScript, можно воспользоваться [Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/). В следующем примере показано, как создать [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver), который прослушивает записи `largest-contentful-paint` и регистрирует их в консоли.
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+Этот код показывает, как регистрировать `largest-contentful-paint`, но само измерение LCP в JavaScript сложнее. Подробнее см. ниже:
+
+{% endAside %}
+
+В приведенном выше примере каждая зарегистрированная запись `largest-contentful-paint` представляет текущего кандидата LCP. Как правило, значение `startTime` последней отправленной записи является значением LCP, однако это не всегда так. Не все записи `largest-contentful-paint` подходят для измерения LCP.
+
+Далее приведем различия между тем, что сообщает API, и тем, как рассчитывается метрика.
+
+#### Различия между метрикой и API
+
+- API будет отправлять записи с `largest-contentful-paint` для страниц, загруженных в фоновых вкладках, но при вычислении LCP такие страницы следует игнорировать.
+- API продолжит отправку записей `largest-contentful-paint` после того, как страница перестанет быть фоновой, но эти записи следует игнорировать при вычислении LCP (элементы могут учитываться только в том случае, если страница всё время была на переднем плане).
+- API не сообщает о записях `largest-contentful-paint`, когда страницы восстанавливаются функцией [back/forward cache](/bfcache/#impact-on-core-web-vitals), но в данных случаях следует измерять LCP, поскольку пользователи воспринимают такие посещения страниц как отдельные.
+- API не учитывает элементы внутри iframe, но для правильного измерения LCP их нужно учитывать. Элементы iframe могут использовать API, чтобы сообщать о своих записях `largest-contentful-paint` в родительский фрейм для агрегирования.
+
+Чтобы не запоминать все эти тонкости, разработчики могут использовать для измерения LCP [JavaScript-библиотеку `web-vitals`](https://github.com/GoogleChrome/web-vitals), которая обрабатывает эти случаи (где это возможно):
+
+```js
+import {onLCP} from 'web-vitals';
+
+// Measure and log LCP as soon as it's available.
+onLCP(console.log);
+```
+
+Полный пример измерения LCP в JavaScript приводится в [исходном коде `onLCP()`](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts).
+
+{% Aside %} В некоторых случаях (например, в iframe с перекрестным происхождением) невозможно измерить LCP в JavaScript. См. подробности в разделе  [«Ограничения»](https://github.com/GoogleChrome/web-vitals#limitations) библиотеки `web-vitals`. {% endAside %}
+
+### Что если самый большой элемент не самый важный?
+
+В некоторых случаях самый важный элемент (или элементы) на странице оказывается не самым большим, и разработчики могут быть больше заинтересованы в измерении времени рендеринга данных элементов. Это можно сделать с помощью [Element Timing API](https://wicg.github.io/element-timing/), как описано в статье о [«Пользовательских метриках»](https://wicg.github.io/element-timing/).
+
+## Как улучшить LCP
+
+В первую очередь на LCP влияют четыре фактора:
+
+- медленное время ответа сервера;
+- блокирующие рендеринг JavaScript и CSS;
+- время загрузки ресурса;
+- клиентский рендеринг.
+
+Подробные сведения о том, как улучшить LCP, см. в статье [«Оптимизация LCP»](/optimize-lcp/). Дополнительные рекомендации по отдельным методам повышения производительности, которые также могут улучшить LCP, смотрите в следующих статьях:
+
+- [Применение мгновенной загрузки с помощью шаблона PRPL](/apply-instant-loading-with-prpl)
+- [Оптимизация критического пути рендеринга](/critical-rendering-path/)
+- [Оптимизация CSS](/fast#optimize-your-css)
+- [Оптимизация изображений](/fast#optimize-your-images)
+- [Оптимизация веб-шрифтов](/fast#optimize-web-fonts)
+- [Оптимизация JavaScript](/fast#optimize-your-javascript) (для сайтов с рендерингом на стороне клиента)
+
+## Дополнительные ресурсы
+
+- [Уроки, извлеченные Энни Салливан](https://anniesullie.com/) [из мониторинга производительности в Chrome](https://youtu.be/ctavZT87syI) с помощью функции [performance.now ()](https://perfnow.nl/) (2019 г.)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/ru/metrics/tbt/index.md b/src/site/content/ru/metrics/tbt/index.md
new file mode 100644
index 00000000000..eef497eada3
--- /dev/null
+++ b/src/site/content/ru/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Общее время блокировки (TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: В этой статье описывается метрика TBT (Общее время блокировки) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+Общее время блокировки (TBT)важный [лабораторный показатель](/user-centric-performance-metrics/#in-the-lab) для измерения [отзывчивости при загрузке,](/user-centric-performance-metrics/#types-of-metrics) так как данный показатель помогает количественно оценить степень неинтерактивности страницы до того момента, как она станет надежно интерактивной. Низкое значение показателя TBT гарантирует, что страница [пригодна к использованию](/user-centric-performance-metrics/#questions).
+
+{% endAside %}
+
+## Что такое TBT?
+
+Метрика Total Blocking Time (TBT) измеряет общее количество времени между [FCP (Первой отрисовкой контента)](/fcp/) и [TTI (Временем до интерактивности)](/tti/). В данный период времени основной поток блокируется и не реагирует на действия пользователя.
+
+Основной поток считается «заблокированным» каждый раз, когда возникает [длительная задача](/custom-metrics/#long-tasks-api)задача, которая выполняется в основном потоке более 50 миллисекунд (мс). Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать выполняемую задачу. Если пользователь *взаимодействует* со страницей в середине длительной задачи, браузер ждет завершения задачи, прежде чем ответить на действия пользователя.
+
+Если задача достаточно длительная (более 50 мс), вполне вероятно, что пользователь заметит задержку и воспримет страницу как «подвисающую» или «глючную».
+
+*Время блокировки* данной длительной задачиэто ее продолжительность, превышающая 50 мс. И *общее время блокировки* для страницыэто сумма *временных интервалов блокировок* для каждой длительной задачи, возникающей между FCP и TTI.
+
+Для примера рассмотрим следующую схему основного потока браузера во время загрузки страницы:
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="Временная шкала задач в основном потоке", width="800", height="156", linkTo=true %}
+
+На временной шкале выше пять задач, три из которых являются длительными, так как их продолжительность превышает 50 мс. Следующая диаграмма показывает время блокировки для каждой из длительных задач:
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="Временная шкала с отмеченным временем блокировки задач в основном потоке", width="800", height="156", linkTo=true %}
+
+Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 мс, только 345 мс считаются временем блокировки.
+
+<table>
+  <tr>
+    <th></th>
+    <th>Продолжительность задачи</th>
+    <th>Время блокировки задачи</th>
+  </tr>
+  <tr>
+    <td>Первая задача</td>
+    <td>250 мс</td>
+    <td>200 мс</td>
+  </tr>
+  <tr>
+    <td>Вторая задача</td>
+    <td>90 мс</td>
+    <td>40 мс</td>
+  </tr>
+  <tr>
+    <td>Третья задача</td>
+    <td>35 мс</td>
+    <td>0 мс</td>
+  </tr>
+  <tr>
+    <td>Четвертая задача</td>
+    <td>30 мс</td>
+    <td>0 мс</td>
+  </tr>
+  <tr>
+    <td>Пятая задача</td>
+    <td>155 мс</td>
+    <td>105 мс</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>Общее время блокировки</strong></td>
+    <td><strong>345 мс</strong></td>
+  </tr>
+</table>
+
+### Как TBT соотносится с TTI?
+
+TBTотличный вспомогательный показатель для TTI, потому что он помогает количественно оценить степень неинтерактивности страницы до того, как она станет надежно интерактивной.
+
+TTI считает страницу «надежно интерактивной», если в основном потоке не выполняются длительные задачи в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные на 10 секунд, могут отодвинуть TTI так же далеко, как и одна 10-секундная задача, но эти два сценария будут сильно отличаться для пользователя, пытающегося взаимодействовать со страницей.
+
+В первом случае для трех задач по 51 мс значение TBT составит **3 мс**. Тогда как для одиночной 10-секундной задачи TBT будет равно **9950 мс**. Чем больше значение TBT во втором случае, тем хуже впечатления пользователя.
+
+## Как измерить TBT
+
+TBTэто показатель, который лучше всего измерять [в лабораторных условиях](/user-centric-performance-metrics/#in-the-lab). Оптимальный способ измерить TBTзапустить проверку производительности Lighthouse для вашего сайта. Подробнее об этом см. в [документации Lighthouse по TBT](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/).
+
+### Инструменты для измерения в лабораторных условиях
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Не рекомендуется измерять TBT в полевых условиях, поскольку взаимодействие с пользователем может повлиять на TBT страницы таким образом, что это приведет к большим расхождениям со значениями в отчетах. Чтобы оценить интерактивность страницы в полевых условиях, следует измерить [FID (Время ожидания до первого взаимодействия с контентом)](/fid/). {% endAside %}
+
+## Какое значение показателя TBT можно считать хорошим?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы общее время блокировки не превышало **300 миллисекунд** при тестировании на **мобильных устройствах среднего уровня производительности**.
+
+Подробная информация о влиянии TBT страницы на показатель производительности в Lighthouse приводится в статье [«Как Lighthouse определяет ваш показатель TBT»](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score).
+
+## Как улучшить показатель TBT
+
+Чтобы узнать, как улучшить TBT для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные [возможности улучшения](https://developer.chrome.com/docs/lighthouse/performance/#opportunities), предлагаемые проверкой.
+
+Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
+
+- [Уменьшение влияния стороннего кода](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Уменьшение времени выполнения JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Минимизация работы основного потока](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Поддержание малого количества запросов и объемов передаваемых данных](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ru/metrics/tti/index.md b/src/site/content/ru/metrics/tti/index.md
new file mode 100644
index 00000000000..973b7cdfa1c
--- /dev/null
+++ b/src/site/content/ru/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Время до интерактивности (TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: В этой статье описывается метрика TTI (Время до интерактивности) и объясняются принципы ее измерения
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %} Время до интерактивности (TTI)важный [лабораторный показатель](/user-centric-performance-metrics/#in-the-lab) для измерения [отзывчивости при загрузке](/user-centric-performance-metrics/#types-of-metrics). Данная метрика позволяет определить случаи, когда страница *выглядит* интерактивной, но на самом деле таковой не является. Низкое значение показателя TTI гарантирует, что страница [пригодна к использованию](/user-centric-performance-metrics/#questions). {% endAside %}
+
+## Что такое TTI?
+
+Метрика TTI измеряет время с момента начала загрузки страницы до момента загрузки ее основных подресурсов. Метрика показывает, насколько быстро страница способна реагировать на действия пользователя.
+
+Чтобы рассчитать TTI на основании [трассировки производительности](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) веб-страницы, выполните следующие действия:
+
+1. Запуститите метрику [FCP (Первая отрисовка контента)](/fcp/).
+2. Перемещаясь по временной шкале вперед, найдите период *тихого окна (quiet window)*—временной интервал продолжительностью не менее пяти секунд, на протяжении которого отсутствуют [длительные задачи](/custom-metrics/#long-tasks-api) и выполняется не более двух сетевых запросов (GET). 
+3. Перемещаясь по временной шкале назад, найдите последнюю длительную задачу перед тихим окном, остановитесь на FCP, если длительных задач не было.
+4. TTIэто время окончания последней длительной задачи перед наступлением тихого окна (при отсутствии длительных задач значение TTI будет равняться значению FCP).
+
+Следующая диаграмма поможет визуализировать описанные выше действия:
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="Временная шкала загрузки страницы, показывающая, как вычислить TTI", width="800", height="473", linkTo=true %}
+
+В прошлом при проведении оптимизации страниц некоторые разработчики уделяли внимание ускорению рендеринга в ущерб показателю TTI.
+
+Такие методы, как рендеринг на стороне сервера (SSR), могут привести к сценариям, в которых страница *выглядит* интерактивной (то есть ссылки и кнопки видны на экране), но на *самом деле* она не интерактивна, потому что основной поток заблокирован или код JavaScript, управляющий этими элементами, не загружен.
+
+Когда пользователи пытаются взаимодействовать со страницей, которая только выглядит интерактивной, это вызывает у них реакцию следующих двух типов:
+
+- В лучшем случае их будет раздражать медленный отклик страницы.
+- В худшем случае они решат, что страница неисправна, и, скорее всего, уйдут. Более того, они могут разувериться в ценности вашего бренда.
+
+Чтобы избежать подобных проблем, приложите все усилия для минимизации разницы между FCP и TTI. А в случаях, когда существует действительно заметная разница, с помощью визуальных индикаторов дайте пользователю понять, что компоненты на странице еще не интерактивны.
+
+## Как измерить TTI
+
+TTIэто показатель, который лучше всего измерять [в лабораторных условиях](/user-centric-performance-metrics/#in-the-lab). Оптимальный способ измерить TTIзапустить проверку производительности Lighthouse для вашего сайта. Подробнее об этом см. в [документации Lighthouse по TTI](/tti/).
+
+### Инструменты для измерения в лабораторных условиях
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+{% Aside %} Не рекомендуется измерять TTI в полевых условиях, поскольку взаимодействие с пользователем может повлиять на TTI страницы таким образом, что это приведет к большим расхождениям со значениями в отчетах. Чтобы оценить интерактивность страницы в полевых условиях, следует измерить [FID (Время ожидания до первого взаимодействия с контентом)](/fid/). {% endAside %}
+
+## Какое значение показателя TTI можно считать хорошим?
+
+Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы время до интерактивного взаимодействия составляло менее **5 секунд** при тестировании на **мобильных устройствах среднего уровня производительности**.
+
+Подробная информация о влиянии TTI страницы на показатель производительности в Lighthouse приводится в статье [«Как Lighthouse определяет ваш показатель TTI»](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score).
+
+## Как улучшить показатель TTI
+
+Чтобы узнать, как улучшить TTI для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные [возможности улучшения](https://developer.chrome.com/docs/lighthouse/performance/#opportunities), предлагаемые проверкой.
+
+Чтобы узнать, как улучшить TTI в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
+
+- [Минимизация JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [Предварительное подключение к нужным источникам](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [Предварительная загрузка ключевых запросов](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [Уменьшение влияния стороннего кода](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [Минимизация глубины вложенности критических запросов](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [Уменьшение времени выполнения JavaScript](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [Минимизация работы основного потока](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [Поддержание малого количества запросов и объемов передаваемых данных](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/ru/metrics/user-centric-performance-metrics/index.md b/src/site/content/ru/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..742cf733f7a
--- /dev/null
+++ b/src/site/content/ru/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: Ориентированные на пользователя показатели производительности
+authors:
+  - philipwalton
+date: 2019-11-08
+description: Ориентированные на пользователя показатели производительностиважный инструмент, который позволит лучше понять текущую ситуацию и улучшить работу вашего сайта таким образом, чтобы это приносило пользу реальным пользователям.
+tags:
+  - performance
+  - metrics
+---
+
+Мы все слышали, как важна производительность. Но что именно понимается под производительностью и «быстрыми» веб-сайтами?
+
+Правда в том, что производительностьпонятие относительное:
+
+- Сайт может одновременно быть быстрым для одного пользователя и медленным для другого, при условии, что первый пользователь работает на мощном устройстве в быстрой сети, а второйна устройстве из нижнего ценового сегмента в медленной сети.
+- Два сайта могут загрузиться одновременно, но может *показаться,* что один загружается быстрее (если он загружает контент постепенно, а не ждет до последнего, чтобы отобразить хоть что-либо).
+- Может *показаться,* что сайт в начале загружается быстро, но затем отвечает очень медленно (или вообще не реагирует) на действия пользователя.
+
+Поэтому производительность следует рассматривать с точки зрения объективных критериев, которые можно измерить количественно с достаточной степенью точности. Эти критерии известны как *метрики*.
+
+Но то, что метрика основана на объективных критериях и может быть измерена количественно, вовсе не означает, что эти измерения полезны.
+
+## Определение метрик
+
+В прошлом производительность в Интернете измерялась с помощью события <code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code>. Но, несмотря на то, что <code>load</code>четко определенный момент жизненного цикла страницы, он не обязательно соответствует тому, что волнует пользователя.
+
+Например, сервер может практически мгновенно загрузить минимальную страницу, а затем отложить выборку и отображение контента на странице на несколько секунд уже после срабатывания события `load`. Хотя технически такая страница может иметь быстрое время загрузки, оно не будет соответствовать времени загрузки страницы для пользователя.
+
+В течение последних нескольких лет члены команды Chrome в сотрудничестве с [W3C Web Performance Working Group](https://www.w3.org/webperf/) работали над стандартизацией набора новых API и показателей, которые более точно измеряют то, как пользователи воспринимают производительность веб-страницы.
+
+Метрики созданы на основании важных для пользователя вопросов:
+
+<table id="questions">
+  <tr>
+    <td><strong>Происходит ли загрузка?</strong></td>
+    <td>Навигация началась успешно? Сервер ответил?</td>
+  </tr>
+  <tr>
+    <td><strong>Страница пригодна к использованию?</strong></td>
+    <td>Достаточно ли отрисованного контента для того, чтобы пользователи могли с ним взаимодействовать?</td>
+  </tr>
+  <tr>
+    <td><strong>Можно ли взаимодействовать со страницей?</strong></td>
+    <td>Могут ли пользователи взаимодействовать со страницей или она занята?</td>
+  </tr>
+  <tr>
+    <td><strong>Страница восхитительна?</strong></td>
+    <td>Взаимодействия с элементами страницы проходят плавно и естественно, без задержек и рывков?</td>
+  </tr>
+</table>
+
+## Как измеряются метрики
+
+Метрики производительности обычно измеряются одним из двух способов:
+
+- **В лабораторных условиях:** используются инструменты для имитации загрузки страницы в согласованной контролируемой среде.
+- **В полевых условиях**: берутся показатели реальных пользователей, фактически загружающих страницу и взаимодействующих с ней.
+
+Чтобы обеспечить хорошую производительность веб-страницы, лучше использовать оба способа, которые дополняют друг друга.
+
+### В лабораторных условиях
+
+Тестирование производительности в лабораторных условиях имеет важное значение при разработке новых функций. Ведь измерить характеристики производительности разрабатываемых функций на реальных пользователях невозможно, поэтому тестирование функций в лабораторных условиях до выпускалучший способ предотвратить снижение производительности.
+
+### В полевых условиях
+
+Хотя лабораторное тестирование и предоставляет косвенные показатели производительности, но оно необязательно отражает то, как пользователи воспринимают ваш сайт в реальных условиях.
+
+Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя и условий его сети. Она также может варьироваться в зависимости от того, взаимодействует ли пользователь со страницей.
+
+Более того, загрузка страниц не может быть детерминированной. Например, сайты, загружающие персонализированный контент или рекламу, могут иметь совершенно разные характеристики производительности от пользователя к пользователю. Лабораторный тест не выявит этих различий.
+
+Единственный способ по-настоящему узнать, как сайт работает для пользователей,это измерить его производительность в реальных условиях, когда пользователи загружают сайт и взаимодействуют с ним. Этот тип измерения обычно называется [мониторингом реальных пользователей (Real User Monitoring)](https://en.wikipedia.org/wiki/Real_user_monitoring) или сокращенно RUM.
+
+## Типы метрик
+
+Есть несколько других типов метрик, которые имеют отношение к тому, как пользователи воспринимают производительность.
+
+- **Воспринимаемая скорость загрузки:** как быстро страница может загружаться и отображать все визуальные элементы на экране.
+- **Отзывчивость при загрузке**: как быстро страница может загружаться и выполнять любой требуемый код JavaScript с тем, чтобы компоненты своевременно реагировали на взаимодействие с пользователем.
+- **Отзывчивость в среде выполнения:** как быстро после загрузки страница может реагировать на взаимодействие с пользователем.
+- **Визуальная стабильность**: изменяются ли элементы на странице неожиданным для пользователей образом, что потенциально мешает взаимодействию?
+- **Плавность:** отображаются ли переходы и анимация с постоянной частотой кадров и плавно ли происходит переход из одного состояния в другое?
+
+Ни одной отдельной метрики недостаточно, чтобы учесть все характеристики производительности страницы.
+
+## Главные метрики для отслеживания
+
+- **[Первая отрисовка контента (FCP)](/fcp/) :** измеряет время от начала загрузки страницы до отображения на экране любой части содержимого страницы *([лабораторная](#in-the-lab), [полевая](#in-the-field))*.
+- **[Скорость загрузки основного контента (LCP)](/lcp/):** измеряет время от начала загрузки страницы до момента, когда на экране отображается самый большой текстовый блок или элемент изображения *([лабораторная](#in-the-lab), [полевая](#in-the-field))*.
+- **[Время ожидания до первого взаимодействия с контентом (FID)](/fid/) :** измеряет время от момента, когда пользователь впервые взаимодействует с сайтом (то есть, когда он щелкает ссылку, нажимает кнопку или использует настраиваемый элемент управления на основе JavaScript) до момента, когда браузер действительно сможет ответить на это взаимодействие *([полевая](#in-the-field))*.
+- **[Время до интерактивности (TTI)](/tti/)**: измеряет время с начала загрузки страницы до момента ее визуального отображения, загрузки начальных сценариев (если таковые имеются) и способности страницы быстро и надежно реагировать на ввод пользователя *([лабораторная](#in-the-lab))*.
+- **[Общее время блокировки (TBT)](/tbt/)**: измеряет общее количество времени между FCP и TTI, когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию на ввод *([лабораторная](#in-the-lab))*.
+- **[Совокупное смещение макета (CLS)](/cls/):** измеряет совокупную оценку всех неожиданных сдвигов макета, которые происходят между моментом начала загрузки страницы и изменением ее [состояния жизненного цикла](https://developer.chrome.com/blog/page-lifecycle-api/) на скрытое. *([лабораторная](#in-the-lab), [полевая](#in-the-field))*
+
+В этот список вошли далеко не все метрики производительности, ориентированные на пользователя (например, время отклика и плавность выполнения в настоящее время не рассматриваются).
+
+В некоторых случаях будут введены новые показатели для охвата недостающих областей, но в других случаях наиболее ценные аналитические данные предоставят показатели, специально разработанные для вашего сайта.
+
+## Пользовательские метрики
+
+Перечисленные выше метрики производительности позволяют получить общее представление о характеристиках производительности большинства сайтов в Интернете. Более того, общий для всех сайтов набор метрик дает возможность сравнивать полученные результаты с результатами конкурентов.
+
+Однако бывает, что конкретный сайт в некотором роде уникален. Значит, для получения полной картины производительности требуется использовать дополнительные метрики. Например, метрика LCP измеряет скорость загрузки основного контента, но иногда самый большой элемент не является частью основного содержимого страницы, и, следовательно, LCP может оказаться бесполезной для анализа производительности.
+
+Для решения таких случаев рабочая группа по веб-производительности также стандартизировала API-интерфейсы более низкого уровня, которые могут быть полезны для реализации собственных пользовательских показателей:
+
+- [User Timing API](https://w3c.github.io/user-timing/)
+- [Long Tasks API](https://w3c.github.io/longtasks/)
+- [Element Timing API](https://wicg.github.io/element-timing/)
+- [Navigation Timing API](https://w3c.github.io/navigation-timing/)
+- [Resource Timing API](https://w3c.github.io/resource-timing/)
+- [Server timing](https://w3c.github.io/server-timing/)
+
+Ознакомьтесь со статьей [«Пользовательские метрики»](/custom-metrics/), чтобы узнать, как использовать эти API для измерения характеристик производительности вашего сайта.
diff --git a/src/site/content/ru/mini-apps/index.md b/src/site/content/ru/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/ru/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/ru/offline.md b/src/site/content/ru/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/ru/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/ru/payments/index.md b/src/site/content/ru/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/ru/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/ru/progressive-web-apps/app-like-pwas/index.md b/src/site/content/ru/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..c860c20dc2e
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,404 @@
+---
+layout: post
+title: Как сделать PWA-приложение похожим на обычное
+subhead: Сделайте ваше прогрессивное веб-приложение похожим на «настоящее» приложение, а не на сайт
+authors:
+  - thomassteiner
+description: Узнайте, как сделать прогрессивное веб-приложение похожим на «настоящее», используя веб-технологии для реализации «родной» функциональности.
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+Если спросить любого человека, что такое PWA, скорее всего, вам ответят, что это обыкновенный сайт. То же самое говорится и [в документации Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites), и [на нашем сайте](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites), и даже Фрэнсис Берриман и Алекс Рассел, которым принадлежит само авторство термина «PWA», это [не отрицают](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites). Да, PWA — это простые сайты, но у них гораздо больше возможностей. При правильном подходе к разработке PWA будет ощущаться не как сайт, а как «настоящее» приложение. Давайте разберемся, что это значит.
+
+Мы рассмотрим этот вопрос на примере приложения Apple [Podcasts](https://support.apple.com/en-us/HT201859). Оно доступно на настольных ПК под управлением macOS, а также на мобильных устройствах под управлением iOS и iPadOS. Хотя Podcasts — это мультимедийное приложение, его основные особенности, которые мы здесь рассмотрим, применимы и к другим категориям приложений.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="iPhone и MacBook, стоящие рядом; на обоих запущено приложение Podcasts.", width="800", height="617" %} <figcaption>Apple Podcasts на iPhone и macOS (<a href="https://support.apple.com/en-us/HT201859">источник</a>).</figcaption></figure>
+
+{% Aside 'caution' %} В каждом описании функции, доступной на iOS/Android/ПК, есть раздел **Как реализовать эту функцию в веб-приложении**, который можно открыть для получения дополнительных сведений. Обратите внимание, что описываемые API и функции поддерживаются не всеми сочетаниями браузеров и операционных систем. Внимательно ознакомьтесь с примечаниями о совместимости в прикрепленных ссылках. {% endAside %}
+
+## Работа в офлайн-режиме
+
+Если вы попытаетесь вспомнить родные приложения, которые стоят у вас на смартфоне или компьютере, у всех приложений будет важное сходство: они никогда не показывают пустой экран. Приложение Podcasts работает даже в офлайн-режиме: когда нет подключения к сети, оно по-прежнему открывается. В разделе **Топ-чарты** ничего нет; вместо содержимого отображается сообщение **Нет подключения к сети** и кнопка **Повторить попытку**. Не очень удобно, но приложением по-прежнему можно пользоваться.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="Приложение Podcasts, отображающее сообщение «Нет подключения к сети», когда интернет-соединение недоступно.", width="800", height="440" %} <figcaption>Приложение Podcasts без подключения к сети.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Приложение Podcasts следует так называемой модели «оболочки приложения». Все необходимые для работы приложения статические данные кешируются локально, включая декоративные изображения, такие как иконки меню слева или кнопки встроенного проигрывателя. Динамический контент, такой как содержимое раздела <b>Топ-чарты</b>, загружается по запросу; при этом в случае сбоя загрузки остается доступным резервный контент из локального кеша. Прочитайте статью <a href="https://developers.google.com/web/fundamentals/architecture/app-shell">Модель оболочки приложения</a>, чтобы узнать, как применить эту архитектурную модель к вашему веб-приложению. {% endDetails %}
+
+## Доступ к контенту и воспроизведение медиафайлов в офлайн-режиме
+
+Находясь офлайн, я по-прежнему могу открыть в левой боковой панели раздел «Загрузки» и прослушать скачанные выпуски подкастов, готовые к воспроизведению и отображаемые со всеми метаданными, такими как обложки и описания.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="Приложение Podcasts, воспроизводящее скачанный выпуск подкаста.", width="800", height="440" %} <figcaption>Скачанные выпуски подкастов можно воспроизводить даже без подключения к сети.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Ранее скачанный мультимедийный контент можно воспроизводить из кеша, например при помощи рецепта <a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Serve cached audio and video</a> («Воспроизведение кешированного аудио и видео») из библиотеки <a href="https://developer.chrome.com/docs/workbox/">Workbox</a>. Другие типы контента всегда можно сохранить либо в кеше, либо в IndexedDB. Подробнее о том, в каких случаях следует использовать различные технологии хранения данных, см. в статье <a href="/storage-for-the-web/">Хранение данных в веб-браузере</a>. Если вам нужно хранить данные без риска их потери при нехватке доступного объема памяти, используйте <a href="/persistent-storage/">Persistent Storage API</a>. {% endDetails %}
+
+## Автоматическое фоновое скачивание
+
+Когда я нахожусь в сети, я без проблем могу найти в приложении контент, например введя запрос `http 203`, и если я подпишусь на [подкаст HTTP 203](/podcasts/), высветившийся в результатах, то его последний выпуск мгновенно скачается, не требуя дополнительных действий.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="Приложение Podcasts скачивает последний выпуск подкаста, после того как пользователь подписался.", width="800", height="658" %} <figcaption>Если подписаться на подкаст, тут же начинается скачивание последнего выпуска.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Скачивание выпуска подкаста — это процесс, который может занять много времени. <a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a> позволяет делегировать скачивание браузеру, который выполнит его в фоновом режиме. Более того, в Android браузер может, в свою очередь, делегировать процесс скачивания операционной системе, чтобы ему не пришлось непрерывно оставаться запущенным. Как только скачивание завершится, произойдет пробуждение сервис-воркера приложения и вы сможете обработать полученный ответ. {% endDetails %}
+
+## Обмен и взаимодействие с другими приложениями
+
+Приложение Podcasts естественным образом интегрируется с другими приложениями. Например, когда я щелкаю правой кнопкой мыши понравившийся выпуск, я могу поделиться им с другими приложениями на своем устройстве, например с приложением «Сообщения». Оно также легко взаимодействует с системным буфером обмена. Я могу щелкнуть правой кнопкой мыши любой выпуск и скопировать ссылку на него.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="Контекстное меню при нажатии на подкаст в приложении Podcasts; выделен пункт «Поделиться выпуском &gt; Сообщения».", width="800", height="392" %} <figcaption>Как поделиться выпуском подкаста с приложением «Сообщения».</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="/web-share/">Web Share API</a> и <a href="/web-share-target/">Web Share Target API</a> позволяют приложению обмениваться текстами, файлами и ссылками с другими приложениями на устройстве. Хотя веб-приложения пока не могут добавлять пункты во встроенное контекстное меню операционной системы, существует множество других способов обмена данными с приложениям на устройстве. При помощи <a href="/image-support-for-async-clipboard/">Async Clipboard API</a> можно программно управлять текстовыми и графическими данными (PNG-изображениями) в системном буфере обмена. На Android можно использовать <a href="/contact-picker/">Contact Picker API</a> для выбора записей из списка контактов устройства. Если у вас есть как родное приложение, так и PWA, вы можете воспользоваться <a href="/get-installed-related-apps/">Get Installed Related Apps API</a>, чтобы проверить наличие установленного родного приложения. Если оно установлено, нет необходимости предлагать пользователю установить PWA или разрешить push-уведомления в веб-приложении. {% endDetails %}
+
+## Фоновое обновление приложения
+
+В настройках приложения Podcasts можно настроить автоматическое скачивание новых выпусков. Вам даже не нужно об этом помнить — у вас всегда будет самый свежий контент. Разве это не волшебство?
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="Меню настроек приложения Podcasts; в разделе «Общие» параметр «Обновление подкастов» установлен в значение «Каждый час».", width="800", height="465" %} <figcaption>Приложение Podcasts, настроенное для проверки новых выпусков каждый час.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="/periodic-background-sync/">Periodic Background Sync API</a> позволяет приложению регулярно обновлять содержимое в фоновом режиме без необходимости его запуска. Это означает, что свежий контент всегда доступен заранее и пользователи смогут ознакомиться с ним сразу же, когда им будет удобно. {% endDetails %}
+
+## Синхронизация состояния через облако
+
+В то же время мои подписки синхронизируются между всеми моими устройствами. В эпоху цифровых технологий мне не нужно синхронизировать их вручную. Мне также не нужно бояться, что память моего мобильного устройства будут занимать выпуски, которые уже были просмотрены на компьютере, и наоборот. Состояние воспроизведения синхронизируется, а прослушанные выпуски автоматически удаляются.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="Меню настроек приложения Podcasts; в разделе «Дополнения» установлен флажок «Синхронизировать подписки между устройствами».", width="800", height="525" %} <figcaption>Состояние приложения синхронизируется через облако.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Синхронизация данных о состоянии приложения — это задача, которую можно делегировать <a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a>. Сама синхронизация не обязательно должна выполняться сразу; это можно сделать <em>потом</em>, даже если пользователь закрыл приложение. {% endDetails %}
+
+## Управление с помощью физических мультимедийных клавиш
+
+Когда я нахожусь в другом приложении, например читаю новости в браузере Chrome, я по-прежнему могу управлять приложением Podcasts при помощи мультимедийных клавиш ноутбука. Нет необходимость переключаться на приложение для того, чтобы промотать запись вперед или назад.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="Клавиатура Apple MacBook Pro Magic Keyboard с подписанными мультимедийными клавишами.", width="800", height="406" %} <figcaption>При помощи мультимедийных клавиш можно управлять приложением Podcast (<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">источник</a>).</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Для обеспечения поддержки мультимедийных клавиш используется <a href="/media-session/">Media Session API</a>. Он позволяет управлять приложением с помощью мультимедийных клавиш на физической клавиатуре, наушниках или даже с помощью экранных кнопок на умных часах. Кроме того, вы можете дополнительно повысить удобство прокрутки, генерируя <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">тактильный отклик</a>, когда пользователь пролистывает важную отметку, такую как окончание вступительной заставки или начало новой главы. {% endDetails %}
+
+## Многозадачность и значок приложения
+
+Разумеется, я всегда могу переключиться к приложению Podcasts, где бы ни находился. У приложения есть легкоузнаваемый значок, который можно поместить на рабочий стол или панель приложений, чтобы запускать сразу, как только приложение понадобится.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="Переключатель приложений macOS с несколькими запущенными приложениями; одно из них — Podcasts.", width="800", height="630" %} <figcaption>Переход к приложению Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Как на ПК, так и на мобильных устройствах прогрессивные веб-приложения устанавливаются на экран «Домой», в меню «Пуск» или в панель приложений. Установка может выполняться при помощи автоматически отображаемого запроса или полностью контролироваться разработчиком. В статье <a href="/install-criteria/">Что нужно для возможности установки?</a> есть вся необходимая информация. При переключении задач PWA-приложения отображаются отдельно от браузера. {% endDetails %}
+
+## Быстрые действия в контекстном меню
+
+Наиболее часто используемые действия в приложении — **Поиск** нового контента и **Проверка новых выпусков** — доступны прямо из контекстного меню приложения в Dock. В меню **Параметры** также можно включить запуск приложения при входе в систему.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="Контекстное меню приложения Podcasts, показывающее пункты «Поиск» и «Проверить новые выпуски».", width="534", height="736" %} <figcaption>Быстрые действия доступны прямо из значка приложения.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Указав в манифесте PWA-приложения <a href="/app-shortcuts/">быстрые действия при нажатии на значок</a>, можно зарегистрировать быстрые пути к часто используемым функциям, чтобы пользователи могли обращаться к ним напрямую через значок приложения. В таких операционных системах, как macOS, пользователи также могут щелкнуть правой кнопкой мыши на значок приложения и настроить его запуск при входе в систему. В настоящее время ведется работа над предложением <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">поддержки запуска при входе</a>. {% endDetails %}
+
+## Использование в качестве приложения по умолчанию
+
+С приложением Podcasts можно взаимодействовать из других приложений iOS и даже сайтов или электронных писем, используя схему URL-адресов `podcasts://`. Если, находясь в браузере, я перейду по ссылке [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903), я попаду прямо в приложение Podcasts, где смогу подписаться на подкаст или прослушать его.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="Браузер Chrome просит пользователя подтвердить запуск приложения Podcasts.", width="800", height="492" %} <figcaption>Приложение Podcasts можно открыть прямо из браузера.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Обработка произвольных схем URL-адресов пока невозможна, но уже ведется работа над предложением по <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">обработке протоколов URL-адресов</a> для PWA-приложений. В настоящее время наилучшая альтернатива — это <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> со схемой, начинающейся на <code>web+</code>. {% endDetails %}
+
+## Интеграция с локальной файловой системой
+
+На первый взгляд это неочевидно, но приложение Podcasts хорошо интегрируется с локальной файловой системой. Когда я скачиваю выпуск подкаста на ноутбук, он сохраняется в каталог `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache`. В отличие, скажем, от `~/Documents`, этот каталог не предназначен для прямого доступа обычных пользователей, однако доступ к нему возможен. Другие механизмы хранения данных, помимо файлов, описываются в разделе об [офлайн-контенте](#offline-content-available-and-media-playable).
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="macOS Finder, в котором открыт системный каталог приложения Podcasts.", width="800", height="337" %} <figcaption>Выпуски подкастов хранятся в специальном системном каталоге приложения.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="/file-system-access/">File System Access API</a> позволяет разработчикам получать доступ к локальной файловой системе устройства. Вы можете использовать его либо напрямую, либо через <a href="https://github.com/GoogleChromeLabs/browser-fs-access">библиотеку-прослойку browser-fs-access</a>, которая прозрачно для пользователя предоставляет альтернативный режим, если браузер не поддерживает API. В целях безопасности веб-приложениям не разрешен доступ к системным каталогам. {% endDetails %}
+
+## Внешний вид, соответствующий платформе
+
+Есть менее очевидный признак, по которому сразу можно опознать родное приложение, такое как Podcasts: подписи элементов управления невозможно выделить мышью, а шрифт текста совпадает с системным. Кроме того, приложение учитывает выбранную в системе (темную) тему оформления.
+
+<div class="switcher">
+  <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OApP9uGUje6CkS7cKcZh.png", alt="Приложение Podcasts в темном режиме.", width="800", height="463" %} <figcaption>Приложение Podcasts поддерживает светлую и темную тему.</figcaption></figure>
+  <figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="Приложение Podcasts в светлом режиме.", width="800", height="463" %} <figcaption>Приложение использует стандартный системный шрифт.</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} При помощи CSS-свойства <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a> со значением <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a> можно защитить элементы пользовательского интерфейса от случайного выделения. Однако не злоупотребляете этим свойством, запрещая выделять <em>контент приложения</em>. Его следует применять только по отношению к элементам пользовательского интерфейса, таким как подписи кнопок и т. д. Значение <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#&lt;generic-name&gt;:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a> свойства <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> позволяет использовать в приложении стандартный системный шрифт интерфейса. Наконец, приложение может учитывать выбранную пользователем тему оформления, руководствуясь значением <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>, но при этом в нем может быть реализован дополнительный <a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">переключатель темной темы</a> для ее переопределения. Еще один момент, с которым следует определиться, — это поведение браузера при достижении границы области прокрутки; например, можно реализовать собственный жест <em>pull to refresh</em>, используя CSS-свойство <a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a>. {% endDetails %}
+
+## Нестандартная строка заголовка
+
+Взглянув на окно приложения Podcasts, можно заметить, что у него нет стандартной строки заголовка, совмещенной с панелью инструментов, как, например, в окне Safari; но есть свой индивидуальный интерфейс с боковой панелью, прикрепленной к главному окну проигрывателя.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="Строка заголовка браузера Safari, совмещенная с панелью инструментов.", width="800", height="40" %} <figcaption></figcaption></figure>
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="Нестандартная строка заголовка приложения Podcasts, разделенная на две части.", width="800", height="43" %} <figcaption>Нестандартные строки заголовка в Safari и Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Хотя в настоящее время такой возможности не предусмотрено, ведутся работы над <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">возможностью видоизменения строки заголовка</a>. Однако вы можете (и должны) указать в манифесте веб-приложения свойства <a href="/add-manifest/#display"><code>display</code></a> и <a href="/add-manifest/#theme-color"><code>theme-color</code></a>, чтобы определить внешний вид окна приложения и решить, какие из стандартных элементов управления браузера должны отображаться (если вообще должны). {% endDetails %}
+
+## Плавная анимация
+
+Анимация в приложении Podcasts быстрая и плавная. Например, если открыть расположенную справа панель **Примечания к выпуску**, она выдвигается с красивой анимацией. Если удалить выпуск из загрузок, остальные выпуски плавно сдвигаются вверх, занимая его место.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="Приложение Podcasts с открытой панелью «Примечания к выпуску».", width="800", height="463" %} <figcaption>Анимации в приложениях, например при открытии панели, отрисовываются плавно.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} В высокопроизводительной анимации на веб-страницах, безусловно, нет ничего невозможно, если следовать советам, приведенным в статье <a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Анимация и производительность</a>. Анимацию прокрутки, которую можно наблюдать при перелистывании кольцевых галерей или контента, разбитого на страницы, можно существенно улучшить при помощи функции <a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a>. Для полного контроля можно использовать <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a>. {% endDetails %}
+
+## Отображение контента за пределами приложения
+
+Podcasts на iOS может отображать контент за пределами самого приложения, например на системном экране виджетов или в виде предложений Siri. Своевременное отображение призывов к действию, по которым можно перейти в одно касание, может значительно повысить уровень повторного вовлечения для такого приложения, как Podcasts.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="Экран виджетов iOS. В приложении Podcasts показывается рекомендация нового выпуска подкаста.", width="751", height="1511" %} <figcaption>Контент из приложения показывается за пределами самого приложения Podcasts.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="/content-indexing-api/">Content Index API</a> позволяет приложению сообщать браузеру, какое содержимое PWA доступно в офлайн-режиме, что даёт возможность браузеру отображать его содержимое за пределами основного приложения. Помечая интересный контент в приложении при помощи свойства <a href="https://developers.google.com/search/docs/data-types/speakable">speakable</a>, а также <a href="https://developers.google.com/search/docs/guides/search-gallery">структурированной разметки</a> в целом, можно добиться, чтобы поисковые системы и виртуальные помощники, такие как Google Ассистент, показывали ваши предложения в лучшем виде. {% endDetails %}
+
+## Виджет управления мультимедиа на экране блокировки
+
+Когда воспроизводится выпуск подкаста, приложение Podcasts отображает на экране блокировки красивый виджет управления с метаданными: обложкой и названием выпуска, а также названием подкаста.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="Виджет воспроизведения медиафайла на экране блокировки iOS. Показывается выпуск подкаста с метаданными.", width="751", height="1511" %} <figcaption>Воспроизведением медиаконтента в приложении можно управлять с экрана блокировки.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} При помощи <a href="/media-session/">Media Session API</a> можно указывать метаданные, такие как обложки, названия треков и т. д., которые будут отображаться на экране блокировки, умных часах и других мультимедийных виджетах браузера. {% endDetails %}
+
+## Push-уведомления
+
+Push-уведомления в Интернете стали довольно назойливыми (хотя [запросы уведомлений теперь гораздо менее шумные](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html)), но при правильном использовании они могут принести большую пользу. Например, приложение Podcasts для iOS при необходимости может уведомлять меня о новых выпусках подкастов, на которые я подписан, или рекомендовать новые, а также сообщать о новых функциях приложения.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="Настройки приложения Podcasts для iOS. В разделе «Уведомления» включена настройка «Новые выпуски».", width="751", height="1511" %} <figcaption>Приложения могут сообщать пользователю о новом контенте при помощи push-уведомлений.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a> позволяет приложению получать push-уведомления, чтобы держать пользователей в курсе происходящего в вашем PWA. Отображать уведомления по расписанию без использования сети можно при помощи <a href="/notification-triggers/">Notification Triggers API</a>. {% endDetails %}
+
+## Наклейки возле значка приложения
+
+Когда выходят новые выпуски подкастов, на которые я подписан, возле значка приложения Podcasts на экране «Домой» возникает наклейка, ненавязчиво приглашая меня вернуться в приложение.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="Экран настроек iOS со включенной настройкой «Наклейки».", width="751", height="1511" %} <figcaption>Наклейки — это ненавязчивый способ уведомить пользователя о новом контенте в приложении.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Отображать наклейки возле значка приложения можно при помощи <a href="/badging-api/">Badging API</a>. Это особенно полезно, если вашему PWA нужно показывать число «непрочитанных» элементов или вам нужен способ ненавязчиво привлекать внимание пользователя к приложению. {% endDetails %}
+
+## Приоритет воспроизведения мультимедиа над настройками энергосбережения
+
+При воспроизведении подкастов экран может выключиться, но система не будет переходить в режим ожидания. Кроме того, приложения также могут удерживать во включенном состоянии экран, например для отображения текстов песен или субтитров.
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="Настройки macOS, раздел «Экономия энергии».", width="800", height="573" %} <figcaption>Приложения могут удерживать экран во включенном состоянии.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} <a href="/wakelock/">Screen Wake Lock API</a> позволяет удерживать экран во включенном состоянии. Воспроизведение медиаконтента на веб-странице автоматически предотвращает переход системы в режим ожидания. {% endDetails %}
+
+## Поиск приложений через магазины
+
+В macOS приложение Podcasts является частью системы, но на iOS оно устанавливается из App Store. При поиске по запросу `podcast`, `podcasts` или `apple podcasts` приложение тут же появится в списке результатов.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="App Store на iOS: при поиске «podcasts» показывается приложение Podcasts.", width="751", height="1511" %} <figcaption>Пользователи научились искать приложения в магазинах.</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} Как реализовать эту функцию в веб-приложении {% endDetailsSummary %} Apple не позволяет публиковать PWA-приложения в App Store, в то время как на Android вы можете отправлять их на публикацию <a href="/using-a-pwa-in-your-android-app/">в виде Trusted Web Activity</a>. Скрипт <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> делает эту операцию безболезненной. Этот же скрипт лежит в основе встроенной в <a href="https://www.pwabuilder.com/">PWABuilder</a> функции экспорта Android-приложений, для использования которой не нужно уметь пользоваться командной строкой. {% endDetails %}
+
+## Краткий список функций
+
+В таблице ниже представлен краткий список всех функций, а также ссылок на ресурсы, которые помогут реализовать эти функции в веб-приложениях.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Характерная черта</th>
+        <th>Полезные ресурсы для этого в сети</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">Работа в офлайн-режиме</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/architecture/app-shell">Модель оболочки приложения</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#offline-content-available-and-media-playable">Доступ к контенту и воспроизведение медиафайлов в офлайн-режиме</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">Воспроизведение кешированного аудио и видео</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">Библиотека Workbox</a></li>
+            <li><a href="/storage-for-the-web/">Storage API</a></li>
+            <li><a href="/persistent-storage/">Persistent Storage API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">Автоматическое фоновое скачивание</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">Обмен и взаимодействие с другими приложениями</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">Web Share API</a></li>
+            <li><a href="/web-share-target/">Web Share Target API</a></li>
+            <li><a href="/image-support-for-async-clipboard/">Async Clipboard API</a></li>
+            <li><a href="/contact-picker/">Contact Picker API</a></li>
+            <li><a href="/get-installed-related-apps/">Get Installed Related Apps API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">Фоновое обновление приложения</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">Periodic Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">Синхронизация состояния через облако</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">Управление с помощью физических мультимедийных клавиш</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">Многозадачность и значок приложения</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">Критерии возможности установки</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">Быстрые действия в контекстном меню</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">быстрые действия при нажатии на значок</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">Запуск при входе в систему</a> (ранняя стадия)</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">Использование в качестве приложения по умолчанию</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">Обработка протоколов URL-адресов</a> (ранняя стадия)</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">Интеграция с локальной файловой системой</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">File System Access API</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">Библиотека browser-fs-access</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">Внешний вид, соответствующий платформе</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">Переключатель темной темы</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">Нестандартная строка заголовка</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">Видоизменение строки заголовка</a> (ранний этап)</li>
+            <li><a href="/add-manifest/#display">Режим отображения</a></li>
+            <li><a href="/add-manifest/#theme-color">Цвет темы</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">Плавная анимация</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">Советы по анимации и производительности</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">Отображение контента за пределами приложения</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">Content Index API</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">Speakable-контент</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">Структурированная разметка</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">Виджет управления мультимедиа на экране блокировки</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">Push-уведомления</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a></li>
+            <li><a href="/notification-triggers/">Notification Triggers API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">Наклейки возле значка приложения</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">Badging API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">Приоритет воспроизведения мультимедиа над настройками энергосбережения</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">Screen Wake Lock API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">Поиск приложений через магазины</a></td>
+        <td>
+          <ul>
+            <li> <a href="/using-a-pwa-in-your-android-app/">Trusted Web Activity</a>
+</li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap">библиотека <code>bubblewrap</code></a></li>
+            <li><a href="https://www.pwabuilder.com/">Инструмент PWABuilder</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Заключение
+
+С момента своего появления в 2015 году PWA-приложения сильно эволюционировали. В рамках [Project Fugu 🐡](https://developer.chrome.com/blog/fugu-status) команда Chromium, в которую входят разработчики из разных компаний, работает над устранением последних оставшихся слабых мест. Воспользовавшись хотя бы некоторыми советами из этой статьи, вы сможете вплотную приблизиться к «родным» приложениям по уровню комфорта, заставив пользователей забыть, что они имеют дело с «обыкновенным сайтом». Ведь кого на самом деле волнует, как приложение устроено внутри? Гораздо важнее то, как оно работает.
+
+## Благодарности
+
+Эту статью проверили [Кейси Баскес](/authors/kaycebasques/), [Джо Медли](/authors/joemedley/), [Джошуа Белл](https://github.com/inexorabletash), [Дион Алмаер](https://blog.almaer.com/), [Эйд Ошинай](https://blog.oshineye.com/), [Пит Лепейдж](/authors/petelepage/), [Сэм Торогуд](/authors/samthor/), [Райли Грант](https://github.com/reillyeon) и [Джеффри Ясскин](https://github.com/jyasskin).
diff --git a/src/site/content/ru/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/ru/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..0279a582a56
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,99 @@
+---
+layout: codelab
+title: Да установится сайт!
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description:
+  В этом практическом задании вы научитесь делать сайт устанавливаемым — с помощью события «beforeinstallprompt».
+glitch: make-it-installable?path=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+В этом фрагменте на Glitch уже есть компоненты, необходимые, чтобы обеспечить возможность установки современного веб-приложения, в том числе — [очень простой сервис-воркер](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js) и [манифест веб-приложения](https://glitch.com/edit/#!/make-it-installable?path=manifest.json). Там также есть кнопка установки, которая по умолчанию скрыта.
+
+## Прослушивание события «beforeinstallprompt»
+
+Когда браузер запускает событие `beforeinstallprompt`, это означает, что что можно установить современное веб-приложение (Progressive Web App, PWA) и показать пользователю кнопку установки. Событие `beforeinstallprompt` запускается, когда PWA видит [критерии возможности установки](/install-criteria/).
+
+{% Instruction 'remix', 'ol' %}
+
+1. Добавьте в объект `window` обработчик событий `beforeinstallprompt`.
+2. Сохраните `event` как глобальную переменную: она понадобится позже, чтобы показать запрос.
+3. Отобразите кнопку установки.
+
+Код:
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // Запрет показа информационной мини-панели на мобильных устройствах.
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // Убираем событие, чтобы его можно было активировать позже.
+  window.deferredPrompt = event;
+  // Убираем класс «hidden» из контейнера кнопки установки.
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## Обработка нажатия на кнопку установки
+
+Для показа запроса на установку вызовите `prompt()` на сохраненном событии `beforeinstallprompt`. Вызов `prompt()` выполняется в обработчике нажатия на кнопку установки, поскольку `prompt()` необходимо вызывать с помощью жеста пользователя.
+
+1. Добавьте обработчик события клика для кнопки установки.
+2. Вызовите `prompt()` на сохраненном событии `beforeinstallprompt`.
+3. Запишите результаты запроса в журнал.
+4. Установите для сохраненного события `beforeinstallprompt` значение «null».
+5. Скройте кнопку установки.
+
+Код:
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // Отложенный запрос недоступен.
+    return;
+  }
+  // Показать запрос на установку.
+  promptEvent.prompt();
+  // Записать результат в журнал.
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // Сбросить переменную отложенного запроса:
+  // prompt() можно вызвать только один раз.
+  window.deferredPrompt = null;
+  // Скрыть кнопку установки.
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## Отслеживание события установки
+
+Использование кнопки установки — не единственный способ установить современное веб-приложение. Это можно сделать из меню Chrome, информационной мини-панели и с помощью [значка в омнибоксе](/promote-install/#browser-promotion). Отслеживать все эти способы установки можно, прослушивая вызов `appinstalled`.
+
+1. Добавьте в объект `window` обработчик событий `appinstalled`.
+2. Запишите информацию о событии установки в инструмент аналитики или иным способом.
+
+Код:
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // Очистить «deferredPrompt» для сборщика мусора
+  window.deferredPrompt = null;
+});
+```
+
+## Дополнительные материалы
+
+Поздравляем: теперь ваше приложение можно установить!
+
+Что можно сделать еще:
+
+- [Определить, запущено ли приложение с главного экрана](/customize-install/#detect-mode).
+- [Показать запрос об установке приложения средствами операционной системы](https://developer.chrome.com/blog/app-install-banners-native/).
diff --git a/src/site/content/ru/progressive-web-apps/customize-install/index.md b/src/site/content/ru/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..28ad73535fe
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Как предоставлять собственный процесс установки в приложении
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: Используйте событие beforeinstallprompt для предоставления пользователям индивидуального бесперебойного процесса установки в приложении.
+tags:
+  - progressive-web-apps
+---
+
+Многие браузеры позволяют возможность активировать и продвигать установку прогрессивного веб-приложения (PWA) непосредственно в пользовательском интерфейсе PWA. Установка (иногда называемая Add to Home Screen или «Добавить на главный экран») позволяет пользователям легко установить PWA на мобильные или настольные устройства. Установка PWA добавляет приложение в программу запуска пользователя, что позволяет запускать PWA как любое другое установленное приложение.
+
+Помимо возможностей [установки, предоставляемых браузером](/promote-install/#browser-promotion), можно создать собственный процесс установки непосредственно в приложении.
+
+<figure data-float="right">{% Img src = "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt = "Кнопка установки приложения, предусмотренная в PWA Spotify", width = "491", height = "550"%}<figcaption> Кнопка Install App (Установить приложение) в PWA Spotify.</figcaption></figure>
+
+При рассмотрении вопроса о том, стоит ли продвигать установку, подумайте о том, как пользователи обычно используют ваше PWA. Например, если есть группа пользователей, которые используют PWA несколько раз в неделю, им будет удобней запускать приложение с главного экрана смартфона или из меню «Пуск» настольной операционной системы. Некоторые приложения для работы и развлечений также выигрывают от дополнительной площади экрана, созданной за счет удаления панелей инструментов браузера из окна при установленных режимах отображения `standalone` или `minimal-ui`.
+
+## Содействие установке {: #promotion-installation}
+
+Чтобы указать, что ваше прогрессивное веб-приложение можно устанавливать, и чтобы обеспечить настраиваемый процесс установки в приложении:
+
+1. Прослушивайте событие `beforeinstallprompt`.
+2. Сохраняйте событие `beforeinstallprompt`, чтобы его можно было использовать для запуска процесса установки позже.
+3. Предупреждайте пользователя, что PWA можно установить, и предоставляйте кнопку или другой элемент для запуска процесса установки в приложении.
+
+{% Aside %} События `beforeinstallprompt` и `appinstalled` были перемещены из спецификации манифеста веб-приложений в [инкубатор](https://github.com/WICG/beforeinstallprompt). Команда Chrome продолжает поддерживать их и не планирует прекращать поддержку или отказываться от нее. Команда Google Web DevRel по-прежнему рекомендует использовать их для обеспечения индивидуального процесса установки. {% endAside %}
+
+### Прослушивайте событие `beforeinstallprompt`
+
+Если ваше прогрессивное веб-приложение соответствует требуемым [критериям установки](/install-criteria/), браузер запускает событие `beforeinstallprompt`. Сохраните ссылку на событие и обновите свой пользовательский интерфейс, чтобы указать, что пользователь может установить ваше PWA. Код приведен ниже.
+
+```js
+// Initialize deferredPrompt for use later to show browser install prompt.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent the mini-infobar from appearing on mobile
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI notify the user they can install the PWA
+  showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %} Существует множество различных [шаблонов](/promote-install/), которые можно использовать для уведомления пользователя о возможности установки вашего приложения и обеспечения процесса установки в приложении, например, кнопка в заголовке, элемент в меню навигации или элемент в вашей новостной ленте. {% endAside %}
+
+### Процесс установки в приложении {: #in-app-flow}
+
+Чтобы обеспечить установку в приложении, предоставьте кнопку или другой элемент интерфейса, который пользователь может нажать, чтобы установить ваше приложение. При нажатии по элементу вызовите `prompt()` для сохраненного события `beforeinstallprompt` (хранящегося в `deferredPrompt`). В результате пользователь увидит модальное диалоговое окно установки с просьбой подтвердить установку PWA.
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Hide the app provided install promotion
+  hideInstallPromotion();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.userChoice;
+  // Optionally, send analytics event with outcome of user choice
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null;
+});
+```
+
+Свойство `userChoice` — это обещание, которое разрешается по выбору пользователя. Вы можете вызвать метод `prompt()` для отложенного события только один раз. Если пользователь отклоняет его, нужно дождаться события`beforeinstallprompt`, обычно сразу после разрешения свойства `userChoice`.
+
+{% Aside 'codelab' %} [Сделайте сайт доступным для установки с помощью события beforeinstallprompt](/codelab-make-installable) . {% endAside %}
+
+## Определяйте, когда PWA было успешно установлено {: #detect-install}
+
+Вы можете использовать свойство `userChoice`, чтобы определить, установил ли пользователь ваше приложение из вашего пользовательского интерфейса. Но если пользователь устанавливает PWA из адресной строки или другого компонента браузера, `userChoice` не поможет. Вместо этого вы должны прослушивать событие `appinstalled`. Оно запускается всякий раз, когда устанавливается ваше PWA, независимо от того, какой механизм используется для установки.
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Hide the app-provided install promotion
+  hideInstallPromotion();
+  // Clear the deferredPrompt so it can be garbage collected
+  deferredPrompt = null;
+  // Optionally, send analytics event to indicate successful install
+  console.log('PWA was installed');
+});
+```
+
+## Определяйте, как было запущено PWA {: #detect-launch-type}
+
+Медиа-запрос CSS `display-mode` указывает, как было запущено PWA: во вкладке браузера или как установленное PWA. Это позволяет применять различные стили в зависимости от типа запуска. Например, при запуске установленного PWA всегда скрывать кнопку установки и предоставлять кнопку «Назад».
+
+### Отслеживайте, как было запущено PWA
+
+Чтобы отслеживать, как пользователи запускают ваше PWA, используйте `matchMedia()` для проверки медиа-запроса `display-mode`. Safari на iOS пока не поддерживает эту функцию, поэтому потребуется проверять свойство `navigator.standalone`, которое возвращает логическое значение, указывающее, работает ли браузер в режиме standalone.
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### Отслеживайте, когда меняется режим отображения
+
+Чтобы отслеживать, переключается ли пользователь между режимами `standalone` и `browser`, прослушивайте изменения в медиа-запросе `display-mode`.
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### Обновите пользовательский интерфейс в зависимости от текущего режима отображения
+
+Чтобы применить другой цвет фона для PWA при запуске в качестве установленного PWA, используйте условную конструкцию CSS:
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## Обновите значок и название вашего приложения
+
+Что если вам нужно обновить название приложения или добавить новые значки? Прочитайте о том, [как Chrome обрабатывает обновления манифеста веб-приложения](/manifest-updates/), чтобы узнать, когда и как эти изменения отражаются в Chrome.
diff --git a/src/site/content/ru/progressive-web-apps/drive-business-success/index.md b/src/site/content/ru/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..0e14b077b18
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: Как прогрессивные веб-приложения помогают добиться успеха в бизнесе
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: Создайте качественное бизнес-обоснование для своего прогрессивного веб-приложения. Узнайте, когда совершать инвестиции и как измерять их успешность.
+tags:
+  - progressive-web-apps
+---
+
+Многие компании включают прогрессивные веб-приложения в свои планы модернизации веб-сайтов и адаптации к новым ожиданиям пользователей. Как и при появлении любых других новых концепций и технических возможностей, у вас могут возникнуть вопросы: этого ли хотят мои клиенты, насколько это будет способствовать развитию моего бизнеса, какие возможности технически осуществимы?
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="Выявление заинтересованных лиц", width="800", height="254" %}
+
+В процессе формирования стратегии в области цифровых технологий зачастую участвуют несколько заинтересованных сторон: менеджера по продуктам и директора по маркетингу интересует, как повлияет каждая функция на бизнес, технический директор оценивает возможность реализации технологий и их надежность, исследователи пользовательских интерфейсов проверяют, решает ли та или иная функция реальные проблемы клиентов.
+
+В данной статье мы постараемся помочь вам ответить на эти три вопроса и сформировать проект прогрессивного веб-приложения. Вы начнете с анализа потребностей своих клиентов, попытаетесь удовлетворить эти потребности с помощью функций прогрессивного веб-приложения и измерите влияние, которое каждая функция оказывает на бизнес.
+
+## Прогрессивные веб-приложения удовлетворяют потребности клиентов {: #solve-customer-needs }
+
+Одно из правил, которым мы любим следовать в Google при создании продуктов, — «[сосредоточьтесь на пользователе, и адаптируйте к этому все остальное](https://www.google.com/about/philosophy.html)». Думайте *прежде всего о пользователях*: каковы потребности моих клиентов и каким образом прогрессивное веб-приложение сможет их удовлетворить?
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="Выявление потребностей клиентов", width="800", height="262" %}
+
+Изучая пользователей, мы обнаружили несколько интересных закономерностей.
+
+- Пользователи ненавидят задержки и ненадежные мобильные приложения: уровень стресса, вызываемый задержками на мобильных устройствах, [сопоставим с уровнем стресса при просмотре фильма ужасов](https://blog.hubspot.com/marketing/mobile-website-load-faster).
+- При просмотре веб-страниц или совершении покупок 50% пользователей смартфонов с большей вероятностью будут использовать сайты для мобильных устройств, потому что они [не хотят загружать приложения](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/).
+- Одна из основных причин удаления приложений — [ограниченный размер хранилищ](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/) на устройствах (а установленное веб-приложение обычно занимает менее 1 МБ).
+- Пользователи смартфонов с большей вероятностью будут совершать покупки на сайтах для мобильных устройств, [предлагающих соответствующие рекомендации](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/) по продуктам, и 85% пользователей смартфонов считают, что [уведомления на мобильных устройствах полезны](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/).
+
+На основе этих наблюдений мы выяснили, что клиенты предпочитают быстрые, поддерживающие установку, надежные и увлекательные решения (концепция F.I.R.E.).
+
+## В прогрессивных веб-приложениях используются современные возможности Интернета {: #modern-capabilities }
+
+В прогрессивных веб-приложениях используется ряд рекомендаций и современные веб-API, которые предназначены для удовлетворения потребностей ваших клиентов. Благодаря им ваш сайт будет быстрым, надежным и интересным. Кроме того, его можно будет установить на устройстве.
+
+Например, использование служебного сценария для [кэширования ресурсов](/service-workers-cache-storage/) и [предварительного получения данных на основе прогнозов](/precache-with-workbox/) повышает скорость работы и надежность сайта. Если вы добавите возможность установки для своего сайта, клиенты смогут легко получать к нему доступ на начальном экране или в средстве запуска приложений. А новые API, например [Web Push Notifications](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices), упрощают повторное привлечение пользователей с помощью персонализированного контента и повышают их лояльность.
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="Повышение удобства пользователей с помощью новых возможностей", width="800", height="393" %}
+
+## Понимание влияния, которое прогрессивное веб-приложение оказывает на бизнес {: #business-impact }
+
+В зависимости от вида вашей деятельности успех в бизнесе может определяться разными характеристиками, в том числе указанными ниже.
+
+- Увеличение времени, которое пользователи тратят на ваш сервис
+- Уменьшение показателей отказов для ваших лидов
+- Повышение коэффициентов конверсии
+- Увеличение количества возвращающихся посетителей
+
+Большинство проектов прогрессивных веб-приложений приводит к повышению коэффициента конверсии для мобильных устройств. Дополнительные сведения можно изучить в многочисленных [примерах](https://www.pwastats.com/). В зависимости от ваших целей вы можете сделать более приоритетными те аспекты прогрессивных веб-приложений, которые имеют большее значение для вашего бизнеса, и это нормально. Функции прогрессивных веб-приложений можно выбрать и запускать по отдельности.
+
+Давайте оценим влияние, которое каждая из этих замечательных функций FIRE оказывает на бизнес.
+
+### Как наличие быстро работающего веб-сайта влияет на бизнес {: #impact-fast }
+
+Недавнее [исследование, проведенное компанией Deloitte Digital](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html), показало, что скорость загрузки страниц значительно влияет на бизнес-метрики.
+
+Существует много способов оптимизировать как скорость работы сайта, так и важные пути для всех пользователей. Если вы не знаете, с чего начать, загляните в наш раздел «[Быстрая загрузка](/fast/)» и с помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) расставьте приоритеты, чтобы устранить самые существенные недостатки.
+
+Работая над оптимизацией скорости, часто измеряйте скорость работы своего сайта с помощью соответствующих средств и метрик. Это позволит отслеживать ход работы. Измеряйте метрики с помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), установите четкие цели, например [получить «хорошие» оценки Core Web Vitals](/vitals/#core-web-vitals), и [включите бюджет на повышение производительности в процесс разработки](/incorporate-performance-budgets-into-your-build-tools/). Благодаря ежедневным измерениям и [методологии оценки пользы, которую приносит скорость](/value-of-speed/), вы сможете определить, какое влияние оказывают постепенные изменения скорости, и подсчитать, какой дополнительный доход приносит ваша работа.
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="Измерение пользы, которую приносит скорость, и коррелирование этого показателя с количеством конверсий", width="800", height="306" %}
+
+В 2019 году руководство Ebay поставило [цель увеличить скорость работы веб-сайта](/shopping-for-speed-on-ebay/). Сотрудники компании использовали ряд методов, например бюджет повышения производительности, оптимизацию критически важного пути и предварительное получение данных на основе прогнозов. Они пришли к выводу, что при каждом уменьшении времени загрузки страницы с результатами поиска на 100 миллисекунд количество добавлений товаров в корзину увеличивалось на 0,5%.
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="Уменьшение времени загрузки страниц eBay на 100 мс приводило к увеличению количества добавлений товаров в корзину на 0,5%", width="800", height="184" %}
+
+### Влияние веб-сайта, поддерживающего установку, на бизнес {: #impact-installable }
+
+Почему вам нужно, чтобы пользователь установил ваше прогрессивное веб-приложение? Чтобы ему было проще вернуться на ваш сайт. Если для установки приложения в ОС Android требуется выполнить как минимум три дополнительных действия (перенаправление в Play Store, загрузка, перезапуск приложения для Android в верхней части воронки), установка прогрессивного веб-приложения выполняется без проблем одним щелчком мыши и не отвлекает пользователя от текущей воронки конверсии.
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="Процесс установки должен быть простым", width="800", height="239" %}
+
+После установки прогрессивного веб-приложения пользователь может запустить его, щелкнув значок на начальном экране. Кроме того, оно будет отображаться на панели приложений при переключении между приложениями и пользователи смогут находить его с помощью функции поиска приложений. Мы называем такое приложение динамическим приложением Discover-Launch-Switch, а возможность установки прогрессивного веб-приложения упрощает доступ к нему.
+
+Помимо того что прогрессивное веб-приложение будет доступно через привычные поверхности обнаружения и запуска на устройстве, оно запускается точно так же, как приложения, созданные для платформы: в автономном режиме, отдельно от браузера. Кроме того, оно использует службы устройства на уровне ОС, например средство переключения между приложениями, и параметры устройства.
+
+Люди, установившие прогрессивное веб-приложение, скорее всего будут вашими самыми заинтересованными пользователями с более высокими метриками вовлеченности, чем у случайных посетителей. Перечень преимуществ включает большее количество повторных посещений, увеличение времени, проводимого на сайте, и более высокие коэффициенты конверсии, которые часто равны показателям для пользователей приложений, созданных для платформ, на мобильных устройствах.
+
+Чтобы прогрессивное веб-приложение можно было установить, оно должно соответствовать [основным критериям](/install-criteria/). Если оно соответствует этим критериям, вы сможете [предлагать установить его](/promote-install/) в пользовательском интерфейсе на компьютерах и мобильных устройствах, в том числе на устройствах с iOS.
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="Прогрессивные веб-приложения можно установить везде", width="800", height="227" %}
+
+После того, как вы начнете предлагать установить свое прогрессивное веб-приложение, нужно определить, сколько пользователей устанавливают его и каким образом они используют его.
+
+Чтобы ваш сайт установило максимальное количество пользователей, можно [попробовать использовать разные](https://pwa-book.awwwards.com/chapter-4) рекламные сообщения (например, «установите за одну секунду» или «добавьте наш ярлык, чтобы следить за своим заказом»), различные места размещения (в баннере в заголовке, в канале). Кроме того, попробуйте предлагать его на разных этапах воронки (на второй посещенной странице или после бронирования).
+
+Чтобы понять, куда уходят ваши пользователи и как повысить показатель их удержания, можно [измерять](https://pwa-book.awwwards.com/chapter-8) характеристики воронки установки четырьмя указанными ниже способами.
+
+- Количество пользователей, соответствующих требованиям для установки веб-приложения
+- Количество пользователей, которые щелкнули предложение установить приложение в пользовательском интерфейсе
+- Количество пользователей, которые согласились на установку, а затем отказались от нее
+- Количество пользователей, которые успешно установили веб-приложение
+
+Вы можете начать предлагать установить свое прогрессивное веб-приложение всем своим пользователям или применить более осторожный подход, экспериментируя только с небольшой группой пользователей.
+
+Через несколько дней или недель у вас будут данные, позволяющие измерить влияние веб-приложения на ваш бизнес. Как ведут себя люди, переходящие на сайт с помощью установленного ярлыка? Увеличиваются ли для них показатели вовлечения и конверсии?
+
+Чтобы разделить пользователей, которые установили ваше прогрессивное веб-приложение, на сегменты, отслеживайте [событие `appinstalled`](/customize-install/#detect-install) и используйте JavaScript, чтобы [проверять, находятся ли пользователи в автономном режиме](/customize-install/#detect-launch-type) (что указывает на использование установленного прогрессивного веб-приложения). Затем используйте полученные данные в качестве переменных или показателей для отслеживания аналитики.
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="Измерение пользы от установки", width="800", height="253" %}
+
+Интересен [пример использования, связанный с компанией Weekendesk](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf): чтобы добиться максимального показателя установки, она предлагает установить ве6-приложение на второй посещенной странице. В результате в компании заметили, что клиенты, возвращающиеся с использованием значка на главном экране, более чем в два раза чаще бронируют номера у них.
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="Для пользователей, установивших веб-приложение, наблюдается в 2,5 раза больший показатель конверсии", width="800", height="201" %}
+
+Установка прогрессивного веб-приложения — отличный способ заставить посетителей вернуться на ваш сайт и повысить лояльность клиентов. Вы также можете подумать о персонализации интерфейса для этих премиум-пользователей.
+
+Если у вас уже есть приложение, созданное для платформы, вы можете сначала предлагать его, а затем предложить прогрессивное веб-приложением тем, кто отказался установить основное приложение или не отреагировал на баннер установки приложения. Некоторые из ваших «частично вовлеченных» пользователей, возможно, не соответствуют пороговому значению для установки приложения из магазина приложений. Этой когорте пользователей можно предложить возможность установки прогрессивного веб-приложения, которую часто воспринимают как более простой и требующий меньше усилий процесс.
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="Прогрессивные веб-приложения позволяют добраться до «частично вовлеченных» пользователей", width="800", height="229" %}
+
+### Влияние надежного веб-сайта на бизнес {: #impact-reliable }
+
+В браузере Chrome есть игра с динозавром, в которую можно поиграть, когда у пользователя отсутствует подключение к сети. В нее играют более [270 миллионов раз](https://www.blog.google/products/chrome/chrome-dino/) в месяц. Это впечатляющее число показывает, что ненадежность сетей открывает большие возможности, особенно на рынках с ненадежными или дорогими сетями мобильной связи, например в Индии, Бразилии, Мексике или Индонезии.
+
+При запуске приложения, установленного из магазина приложений, пользователи ожидают, что оно откроется независимо от наличия подключения к Интернету. Прогрессивные веб-приложения должны работать так же.
+
+Как минимум, необходимо отобразить простую страницу для автономного режима, на которой пользователю будет сообщено, что приложение недоступно без подключения к сети. Затем сделайте еще один шаг вперед: предоставьте пользователю ряд [функций, которые будут полезны в автономном режиме](https://pwa-book.awwwards.com/chapter-6). Например, вы можете предоставить доступ к билетам или посадочным талонам, автономным спискам желаний, контактной информации для центров обработки вызовов, статьям или рецептам, которые пользователь недавно просматривал, и т. д.
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="Будьте полезны даже в автономном режиме", width="800", height="243" %}
+
+После того, как вы реализуете [надежную среду для пользователя](https://pwa-book.awwwards.com/chapter-6), вам, возможно, потребуется измерить ее характеристики — сколько пользователей переходят в автономный режим, в каких географических регионах это происходит и остаются ли пользователи на веб-сайте после восстановления подключения к сети?
+
+Использование веб-приложения в автономном режиме можно измерять, записывая результаты проверки связи средствами аналитики, когда пользователь переходит в [автономный режим или снова подключается к сети](https://pwa-book.awwwards.com/chapter-8). Вы получите информацию о том, какое количество пользователей продолжает просматривать ваш веб-сайт после восстановления подключения к сети.
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="В компании Trivago обнаружили, что 67% пользователей, которые снова подключались к сети, продолжали просматривать сайт", width="800", height="272" %}
+
+[Пример с Trivago](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/) показывает, как прогрессивное веб-приложение может способствовать выполнению ваших бизнес-целей: 67% пользователей, которые снова подключились к Интернету после перехода в автономный режим (приблизительно 3% пользователей), продолжали просматривать сайт.
+
+### Влияние привлекательного веб-сайта на бизнес {: #impact-engaging }
+
+Благодаря push-уведомлениям, доставляемым через Интернет, пользователи могут подписываться на новости с сайтов, которые им нравятся. Это позволяет эффективно повторно привлекать таких пользователей, предлагая им персонализированный релевантный контент.
+
+Но будьте осторожны. Если вы попросите пользователя подписаться на веб-уведомления при первом посещении вашего сайта, не рассказав о преимуществах, которые дает это действие, такая просьба может быть расценена как спам и, возможно, создаст отрицательный настрой у пользователя. Предлагая подписаться на уведомления, обязательно следуйте [рекомендациям](https://developers.google.com/web/fundamentals/push-notifications/permission-ux). Чтобы пользователи разрешали вам показывать им уведомления, предоставьте взамен полезные возможности, например возможность получать информацию о задержках поездов, отслеживать цены, получать сведения о товарах, отсутствующих на складе, и т. д.
+
+Технически [push-уведомления](https://developers.google.com/web/fundamentals/push-notifications/) в Интернете работают в фоновом режиме благодаря служебному сценарию. Их часто отправляют системы, созданные для управления кампаниями (например, Firebase). Эта функция очень полезна для бизнеса при работе с пользователями мобильных устройств (с ОС Android) и компьютеров: она повышает показатель повторных посещений, а также последующих продаж и конверсий.
+
+Чтобы оценить эффективность своих push-кампаний, вам потребуется измерить всю воронку.
+
+- Количество пользователей, соответствующих требованиям на получение push-уведомлений
+- Количество пользователей, щелкнувших индивидуализированное уведомление в пользовательском интерфейсе
+- Количество пользователей, дающих согласие на получение push-уведомлений
+- Количество пользователей, получающих push-уведомления
+- Количество пользователей, вовлекаемых с помощью уведомлений
+- Конверсия и вовлечение пользователей, пришедших из уведомления
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="Измерение пользы push-уведомлений, рассылаемых через Интернет", width="800", height="255" %}
+
+Есть много отличных примеров использования push-уведомлений в Интернете, например [компания Carrefour, которая увеличила показатель конверсии в 4,5 раза](https://useinsider.com/case-studies/carrefour/), повторно вовлекая пользователей, оставивших товары в корзине.
+
+## Постепенный (функция за функцией) запуск прогрессивных веб-приложений {: #feature-by-feature }
+
+Прогрессивные веб-приложения — это современные веб-сайты, которые извлекают выгоду из огромного охвата пользователей в Интернете и предлагают удобные функции, которые нравятся пользователям и имеются в приложениях для Android, iOS или компьютеров. В них используются рекомендации и современные веб-API, которые можно реализовать независимо друг от друга (в зависимости от специфики и приоритетов вашей компании).
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="Постепенный запуск прогрессивного веб-приложения", width="800", height="253" %}
+
+Чтобы ускорить модернизацию вашего веб-сайта и превратить его в настоящее прогрессивное веб-приложение, мы рекомендуем проявить гибкость: запускайте функции постепенно, одну за другой. Во-первых, вместе со своими пользователями проанализируйте, какие функции принесут им наибольшую пользу, затем предоставьте полученные сведения своим дизайнерам и разработчикам и, наконец, не забудьте точно измерить, сколько дополнительных денег принесло ваше прогрессивное веб-приложение.
diff --git a/src/site/content/ru/progressive-web-apps/index.md b/src/site/content/ru/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/ru/progressive-web-apps/install-criteria/index.md b/src/site/content/ru/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..409800e3eda
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,49 @@
+---
+layout: post
+title: Что нужно для возможности установки?
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2-
+
+  Критерии устанавливаемости прогрессивных веб-приложений.
+tags:
+  - progressive-web-apps
+---
+
+Прогрессивные веб-приложения (PWA) - это современные высококачественные приложения, созданные с использованием веб-технологий. PWA дают возможности, аналогичные приложениям iOS/Android и десктопным приложениям, они надежно работают даже в условиях нестабильной сети и могут быть установлены, что упрощает их поиск и использование.
+
+Большинство пользователей знакомы с установкой и преимуществами работы с установленными приложениями. Установленные приложения появляются в плоскости запуска операционной системы, например, в папке «Приложения» в Mac OS X, в меню «Пуск» в Windows и на главном экране в Android и iOS. Установленные приложения также отображаются в переключателе действий, поисковых системах устройств, таких как Spotlight, и на листах обмена контентом.
+
+Большинство браузеров указывают пользователю, что прогрессивное веб-приложение (PWA) можно установить, если оно соответствует определенным критериям. Среди индикаторов — кнопка «Установить» в адресной строке или пункт «Установить» в дополнительном меню.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="Скриншот омнибокса с отображаемым индикатором установки.", width="800", height="307" %}<figcaption> Браузер предлагает установку (настольный компьютер)</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="Скриншот браузера, предлагающего установку.", width="800", height="307" %} <figcaption> Браузер предлагает установку (мобильное устройство) </figcaption></figure>
+</div>
+
+Кроме того, при соблюдении критериев многие браузеры запускают событие `beforeinstallprompt`, что позволяет предоставить встроенный в приложение пользовательский интерфейс, который будет запускать процесс установки в вашем приложении.
+
+## Критерии установки {: #criteria }
+
+Чтобы запустить событие `beforeinstallprompt` и показать внутрибраузерное предложение установки, ваше прогрессивное веб-приложение в Chrome должно соответствовать следующим критериям:
+
+- Веб-приложение еще не установлено
+- Соответствует эвристике взаимодействия с пользователем
+- Поставляется по HTTPS
+- Включает [манифест веб-приложения](/add-manifest/), в который входят:
+    - `short_name` или `name`
+    - `icons` — должно включать значки размером 192 пикселя и 512 пикселей.
+    - `start_url`
+    - `display` — значение должно быть `fullscreen`, `standalone` или `minimal-ui`
+    - `prefer_related_applications` не должен присутствовать или быть `false`
+- Регистрирует сервис-воркер с помощью обработчика `fetch`
+
+Другие браузеры имеют аналогичные критерии для установки, хотя могут быть незначительные отличия. Чтобы получить подробную информацию, посетите соответствующие сайты:
+
+- [Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)
+- [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Installable_PWAs)
+- [Opera](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} На Android, если манифест веб-приложения включает `related_applications` и `"prefer_related_applications": true`, пользователь будет перенаправлен в магазин Google Play и вместо этого ему будет предложено [установить указанное приложение Android.](https://developer.chrome.com/blog/app-install-banners-native/) {% endAside %}
diff --git a/src/site/content/ru/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/ru/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..0751cf4729e
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Создание резервной страницы для автономного режима
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: Узнайте, как создать простой интерфейс для работы приложения в автономном режиме.
+tags:
+  - progressive-web-apps
+---
+
+Что общего у приложений Google Assistant, Slack и Zoom, а также почти у всех других приложений, созданных для определенных платформ, на телефоне или компьютере? Да, они всегда предоставляют хоть *какие-то* возможности. Даже если нет подключения к сети, вы все равно можете открыть приложение Assistant, войти в приложение Slack или запустить приложение Zoom. Возможно, вы не получите ничего особенно значимого или даже не сможете сделать то, что хотели, но, по крайней мере, вам будет доступен хотя бы *минимальный* набор функций и вы сможете управлять приложением.
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="Мобильное приложение Google Assistant, работающее в автономном режиме.", width="621", height="1344" %} <figcaption id="fig-assistant"> Google Assistant. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="Мобильное приложение Slack, работающее в автономном режиме.", width="621", height="1344" %} <figcaption id="fig-slack"> Slack. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="Мобильное приложение Zoom, работающее в автономном режиме.", width="621", height="1344" %} <figcaption id="fig-zoom"> Zoom. </figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">Если вы используете приложения, созданные для определенной платформы, вы всегда получаете хоть какие-то возможности, даже если нет подключения к сети.</figcaption>
+
+
+
+В противоположность этому, вы не сможете получить никакие возможности в Интернете, если нет подключения к сети. В Chrome можно поиграть в [оффлайн-игру с динозавром](https://www.blog.google/products/chrome/chrome-dino/), но это все, что доступно.
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="Мобильное приложение Google Chrome, в котором отображается оффлайн-игра с динозавром.", width="800", height="1731" %} <figcaption id="fig-chrome-ios"> Google Chrome для iOS. </figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="Приложение Google Chrome для компьютеров, в котором отображается оффлайн-игра с динозавром.", width="800", height="607" %} <figcaption id="fig-chrome"> Google Chrome для macOS. </figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">Если у вас нет подключения к сети, то по умолчанию вам недоступны никакие возможности в Интернете.</figcaption>
+
+
+
+## Резервная страница для автономного режима с адаптированным служебным сценарием
+
+Тем не менее всё необязательно должно быть именно так. С помощью [служебных сценариев и Cache Storage API](/service-workers-cache-storage/) вы можете предоставить своим пользователям адаптированный интерфейс для работы в автономном режиме. Возможно, это будет простая страница с фирменной символикой и информацией о том, что в данный момент пользователь не подключен к сети. Но это может быть и более творческое решение, как, например, знаменитая [оффлайн-игра Trivago с лабиринтом](https://www.trivago.com/offline) с кнопкой ручного **повторного подключения к сети** и автоматическим таймером, отсчитывающим время до следующей попытки подключения к сети.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="Страница Trivago для автономного режима, на которой отображается оффлайн-игра с лабиринтом.", width="800", height="616" %} <figcaption> Оффлайн-игра Trivago с лабиринтом. </figcaption></figure>
+
+### Регистрация служебного сценария
+
+Реализовать страницу для автономного режима можно с помощью служебного сценария. Вы можете зарегистрировать служебный сценарий со своей главной страницы, как в приведенном ниже примере кода. Обычно это следует делать после загрузки приложения.
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### Код служебного сценария
+
+На первый взгляд содержимое реального файла служебного сценария кажется немного запутанным, но с помощью комментариев в приведенном ниже примере можно разобраться в ситуации. Основная идея состоит в том, чтобы предварительно кэшировать файл `offline.html`, который передается только при *неудачных* запросах на переход между страницами, и позволить браузеру обрабатывать все остальные случаи:
+
+```js
+/*
+© Google LLC, 2015, 2019, 2020, 2021. Все права защищены.
+ Данный файл лицензирован на условиях лицензии Apache License 2.0 ("Лицензия");
+ использовать этот файл разрешено только в соответствии с Лицензией.
+ Текст Лицензии можно получить по адресу
+ http://www.apache.org/licenses/LICENSE-2.0
+ За исключением случаев, предусмотренных действующим законодательством или согласованных в письменной форме, программное обеспечение,
+ распространяемое на условиях Лицензии, предоставляется на УСЛОВИЯХ "КАК ЕСТЬ",
+ БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ ИЛИ УСЛОВИЙ, явных или подразумеваемых.
+ Сведения об основных разрешениях и ограничениях в рамках Лицензии для определенных языков
+ см. в тексте Лицензии.
+*/
+
+// Если увеличить значение переменной OFFLINE_VERSION, будет создано событие установки и
+// ранее кэшированные ресурсы будут обновлены из сети.
+// Эта переменная намеренно объявлена и не используется.
+// Если нужно, добавьте комментарий для своего анализатора кода:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// При необходимости укажите здесь другой URL-адрес.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Если настроить {cache: 'reload'} в новом запросе,
+      // ответ гарантированно не будет получен из кэша HTTP; т. е. он будет получен из
+      // сети.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Принудительный перевод ожидающего служебного сценария в активное состояние.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Включение предварительной загрузки при переходе между страницами, если эта функция поддерживается.
+      // См. сведения по ссылке https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Сообщаем активному служебному сценарию, что необходимо немедленно получить контроль над страницей.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // Нам нужно вызвать функцию event.respondWith(), только если это запрос на переход между
+  // HTML-страницами.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // Прежде всего попытаемся использовать ответ предварительной загрузки при переходе между страницами, если эта функция поддерживается.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Всегда сначала проверяйте сеть.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // Событие catch появляется только при возникновении исключения, которое, вероятно,
+          // вызвано ошибкой сети.
+          // Если функция fetch() возвращает допустимый ответ HTTP с кодом ответа в
+          // диапазоне 4xx или 5xx, функция catch() НЕ будет вызвана.
+          console.log("Не удалось получить данные; вместо этого возвращаем страницу для автономного режима.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // Если выражение в условии if() ложно, то этот обработчик операции получения данных не перехватит
+  // запрос. Если зарегистрированы любые другие обработчики операций получения данных, они
+  // смогут вызвать метод event.respondWith(). Если ни один обработчик операций получения данных не вызовет метод
+  // event.respondWith(), браузер обработает запрос таким образом, как если бы
+  // не были задействованы никакие служебные сценарии.
+});
+```
+
+### Резервная страница для автономного режима
+
+Работая с файлом `offline.html`, вы можете проявить свои творческие способности, адаптировать файл к своим потребностям и добавить фирменное оформление вашей компании. В приведенном ниже примере показан минимум из того, что можно сделать. Здесь продемонстрированы ручная перезагрузка при нажатии кнопки, автоматическая перезагрузка по [событию `online`](https://developer.mozilla.org/docs/Web/API/Window/online_event) и регулярный опрос сервера.
+
+{% Aside 'gotchas' %} Вам потребуется кэшировать все ресурсы страницы для автономного режима. Один из способов сделать это — встроить в нее все необходимые ресурсы. Именно это мы делаем в приведенном ниже примере. {% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Отсутствует подключение к сети</title>
+
+    <!-- Встраиваем таблицу стилей страницы. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Отсутствует подключение к сети</h1>
+
+    <p>Чтобы перезагрузить страницу, нажмите расположенную ниже кнопку.</p>
+    <button type="button">⤾ Перезагрузить</button>
+
+    <!-- Встраиваем файл JavaScript страницы. -->
+    <script>
+      // Функция ручной перезагрузки.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Прослушиваем изменения состояния сети, при подключении к сети перезагружаем страницу.
+      // Здесь мы обрабатываем случай, когда устройство полностью отключено от сети.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Проверяем, отвечает ли сервер. Если он отвечает, перезагружаем страницу.
+      // Здесь мы обрабатываем случай, когда устройство подключено к сети, но сервер
+      // недоступен или работает неправильно.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Проверяем, что мы получили допустимый ответ с сервера
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // Не удается подключиться к серверу, игнорируем.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## Демонстрация
+
+В приведенной ниже [демонстрации](https://offline-fallback-demo.glitch.me/index.html) можно посмотреть, как работает резервная страница для автономного режима. Ее [исходный код](https://glitch.com/edit/#!/offline-fallback-demo) можно изучить на Glitch.
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### Примечание о том, как добавить поддержку установки для приложения
+
+Теперь, когда на вашем сайте есть резервная страница для автономного режима, у вас может появиться вопрос, что делать дальше. Чтобы ваше приложение можно было установить, необходимо добавить [манифест веб-приложения](/add-manifest/) и (при желании) разработать [стратегию установки](/define-install-strategy/).
+
+### Примечание о том, как передавать резервную страницу для автономного режима с помощью Workbox.js
+
+Возможно, вы слышали о [Workbox.js](https://developer.chrome.com/docs/workbox/). Workbox.js — это набор библиотек JavaScript для поддержки автономного режима в веб-приложениях. Если вы не хотите самостоятельно писать код служебного сценария, вы можете использовать рецепт Workbox.js [только для оффлайн-страницы](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only).
+
+Далее узнайте, [как разработать стратегию установки](/define-install-strategy/) для приложения.
diff --git a/src/site/content/ru/progressive-web-apps/promote-install/index.md b/src/site/content/ru/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..053a3330576
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Шаблоны для продвижения установки PWA
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: |2-
+
+  Как продвигать установку прогрессивных веб-приложений: рекомендации.
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+Установка прогрессивного веб-приложения (PWA) может упростить пользователям его поиск и использование. Даже при продвижении через браузер некоторые пользователи не понимают, что они могут установить PWA, поэтому может быть полезно предоставить интерфейс в приложении, который можно будет использовать для его продвижения и установки.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="Скриншот простой кнопки установки в PWA.", width="800", height="368" %} <figcaption> Простая кнопка установки в вашем PWA. </figcaption></figure>
+
+Этот список ни в коем случае не является исчерпывающим, но с него можно начать знакомство с различными способами продвижения установки вашего PWA. Независимо от того, *какие алгоритмы* вы используете, все они приводят к одному и тому же коду, запускающему процесс установки, описанный в разделе «[Как обеспечить персональный интерфейс установки приложения](/customize-install/)».
+
+## Рекомендации по продвижению установки PWA {: #best-practices }
+
+Есть несколько рекомендаций, которые применимы независимо от того, какие алгоритмы продвижения вы используете на своем сайте.
+
+- Не включайте рекламу в пути пользователей. Например, призыв к действию стоит поместить на странице входа в PWA под формой входа и кнопкой отправки. Некорректное использование шаблонов продвижения снижает удобство использования вашего PWA и отрицательно влияет на показатели вовлеченности.
+- Включите возможность временно или полностью отклонить рекламу. Если пользователь это сделает, запомните его предпочтения и выдавайте запрос повторно только в том случае, если пользователь будет контактировать с вашим контентом, например, при входе в систему или совершении покупки.
+- Комбинируйте эти методики в разных частях своего PWA, но будьте осторожны, чтобы не перегружать и не раздражать пользователя рекламой установки.
+- Показывайте рекламу только **после** срабатывания [события `beforeinstallprompt`](/customize-install/#beforeinstallprompt).
+
+## Автоматическое продвижение в браузере {: #browser-promotion }
+
+При [соблюдении определенных критериев](/install-criteria/) большинство браузеров автоматически сообщают пользователю, что ваше прогрессивное веб-приложение можно установить. Например, Chrome для десктопов показывает кнопку установки в омнибоксе.
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="Скриншот омнибокса с отображаемым индикатором установки.", width="800", height="307" %} <figcaption> Браузер показывает рекламу установки (на десктопе) </figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="Скриншот браузера, предлагающего установку.", width="800", height="307" %} <figcaption> Браузер показывает рекламу установки (на мобильном устройстве)</figcaption></figure>
+</div>
+
+Chrome для Android покажет пользователю небольшую информационную панель, однако этого можно избежать, вызвав `preventDefault()` в событии `beforeinstallprompt`. Если не вызывать `preventDefault()`, баннер будет показан при первом посещении вашего сайта пользователем, если критерии устанавливаемости на Android выполнены, а в следующий раз — примерно через 90 дней.
+
+## Рекламные шаблоны интерфейса приложения {: #app-ui-patterns }
+
+Рекламные шаблоны интерфейса приложения могут применяться практически для любого типа PWA и встречаться внутри приложения, например, в навигации по сайту и баннерах. Как и для любых других типов рекламного шаблона, важно знать контекст пользователя, чтобы свести к минимуму прерывание его пути.
+
+Обдуманный запуск рекламного интерфейса поможет достичь большего количества установок и избежать вмешательства в пути пользователей, которые не заинтересованы в установке.
+
+### Простая кнопка установки {: #simple-button }
+
+Простейший возможный UX — это кнопка «Установить» или «Получить приложение» в соответствующем месте вашего веб-контента. Убедитесь, что кнопка не блокирует другие важные функции и не мешает пользователю просматривать ваше приложение.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="Пользовательская кнопка установки", width="800", height="448" %} <figcaption> Простая кнопка установки </figcaption></figure>
+
+### Фиксированный заголовок {: #header }
+
+Это кнопка установки, которая является частью заголовка вашего сайта. Заголовок также часто включает в себя элементы брендинга сайта, например, логотип и бургер-меню. Заголовки могут иметь фиксированную позицию (`position:fixed`) или нет в зависимости от функциональности вашего сайта и потребностей пользователей.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="Настраиваемая кнопка установки в заголовке", width="800", height="448" %} <figcaption> Настраиваемая кнопка установки в заголовке </figcaption></figure>
+
+При правильном использовании реклама установки PWA в заголовке вашего сайта упрощает возврат лояльных клиентов. Пространство в заголовке PWA ценится дорого, поэтому убедитесь, что ваш призыв к установке имеет соответствующий размер и смотрится более важным, чем другой контент в заголовке, но при этом ненавязчиво.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="Настраиваемая кнопка установки в заголовке", width="800", height="430" %} <figcaption> Настраиваемая кнопка установки в заголовке </figcaption></figure>
+
+Важно:
+
+- Не показывайте кнопку установки до срабатывания события `beforeinstallprompt`.
+- Рассчитывайте актуальность установки для своих пользователей. Продумайте выборочный таргетинг, чтобы показывать рекламу только тем пользователям, которые могут получить от нее выгоду.
+- Эффективно используйте драгоценное пространство заголовка. Подумайте, что еще было бы полезно предложить вашему пользователю в заголовке, и взвесьте приоритет рекламы установки по сравнению с другими вариантами.
+
+### Меню навигации {: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="Настраиваемая кнопка установки в меню навигации", width="800", height="1117" %} <figcaption> Добавьте кнопку установки или рекламу в выдвижное меню навигации. </figcaption></figure>
+
+Меню навигации отлично подходит для продвижения установки приложения, поскольку пользователи, открывающие меню, сигнализируют о взаимодействии с вашим контентом.
+
+Важно:
+
+- Не мешайте важному навигационному контенту. Поместите рекламу установки PWA под другими пунктами меню.
+- Дайте краткое и актуальное объяснение того, почему пользователю будет выгодна установка вашего PWA.
+
+### Целевая страница {: #landing }
+
+Назначение целевой страницы — продвигать ваши продукты и услуги, поэтому здесь уместно широко продвигать преимущества установки вашего PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="Настраиваемое диалоговое окно установки на целевой странице", width = "800", height = "1117" %}<figcaption> Настраиваемое диалоговое окно установки на целевой странице </figcaption></figure>
+
+Сначала изложите конкурентное предложение вашего сайта, а затем расскажите посетителям, что они получат от установки.
+
+Важно:
+
+- Обращайтесь к функциям, которые наиболее важны для ваших посетителей, и выделяйте ключевые слова, которые могли привести их на вашу целевую страницу.
+- Сделайте рекламу установки и призыв к действию привлекательными, но только после того, как четко изложите свое конкурентное предложение. В конце концов, это ваша целевая страница.
+- Стоит добавить рекламу установки в той части приложения, где пользователи проводят большую часть времени.
+
+### Баннер установки {: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="Настраиваемый баннер установки вверху страницы.", width="800", height="1000" %} <figcaption> Скрываемый баннер вверху страницы. </figcaption></figure>
+
+Большинство пользователей сталкивались с установочными баннерами в мобильных приложениях и знакомы с взаимодействиями, предлагаемыми баннером. Баннеры следует использовать осторожно, потому что они могут помешать пользователю.
+
+Важно:
+
+- Дождитесь, пока пользователь проявит интерес к вашему сайту, прежде чем показывать баннер. Если пользователь закрывает ваш баннер, не показывайте его снова, пока пользователь не инициирует событие конверсии, которое указывает на более высокий уровень взаимодействия с вашим контентом, например, покупку в Интернет-магазине или регистрацию учетной записи.
+- Кратко объясните пользу от установки PWA в баннере. Например, вы можете обозначить отличия в установке PWA и приложений для iOS/Android, упомянув, что ваше приложение почти не использует хранилище на устройстве пользователя или что оно будет установлено мгновенно без перенаправления в магазин.
+
+### Временный интерфейс {: #temporary-ui }
+
+Временный пользовательский интерфейс, такой как шаблон дизайна [Snackbar](https://material.io/components/snackbars/), уведомляет пользователя и позволяет ему легко выполнить действие, в данном случае установить приложение. При правильном использовании эти виды шаблонов интерфейса не прерывают работу пользователя и обычно автоматически отклоняются, если пользователь их игнорирует.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="Настраиваемый баннер установки в виде снекбара.", width="800", height="448" %} <figcaption> Скрываемый снекбар, показывающий возможность установки PWA. </figcaption></figure>
+
+Покажите снекбар после нескольких взаимодействий с вашим приложением. Появляясь при загрузке страницы или вне контекста, он может оказаться незамеченным или вызвать когнитивную перегрузку. Когда это произойдет, пользователи просто закроют все, что видят. И помните, что новые пользователи вашего сайта могут быть не готовы установить PWA. Поэтому перед использованием этого шаблона лучше подождать, пока у вас не появятся четкие сигналы интереса от пользователя, например, повторные посещения, вход пользователя в систему или подобное событие конверсии.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="Настраиваемый баннер установки в виде снекбара.", width="800", height="424" %} <figcaption> Скрываемый снекбар, показывающий возможность установки PWA. </figcaption></figure>
+
+Важно:
+
+- Показывайте снекбар от 4 до 7 секунд, давая пользователям достаточно времени, чтобы увидеть и отреагировать на него, и при этом не мешая им.
+- Не показывайте его поверх другого временного пользовательского интерфейса, такого как баннеры и т. д.
+- Подождите, пока у вас не появятся четкие сигналы интереса от пользователя, прежде чем использовать этот шаблон, например, повторные посещения, вход пользователя в систему или подобное событие конверсии.
+
+## После конверсии
+
+Момент после события конверсии пользователя, например, после покупки в Интернет-магазине — отличная возможность прорекламировать установку вашего PWA. Пользователь явно заинтересован в вашем контенте, и конверсия часто сигнализирует о том, что пользователь снова воспользуется вашими услугами.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="Скриншот рекламы установки после конверсии.", width="800", height="448" %} <figcaption> Реклама установки после того, как пользователь совершил покупку. </figcaption></figure>
+
+### Бронирование или оформление заказа {: #journey }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="Реклама после пользовательского пути.", width="800", height="1419" %} <figcaption> Реклама после пользовательского пути. </figcaption></figure>
+
+Покажите рекламу установки во время или после последовательного пути пользователя, например, при бронировании или оформлении заказа. Зачастую, показывая рекламу после того, как пользователь завершил путь, ее можно сделать более заметной.
+
+Важно:
+
+- Включите соответствующий призыв к действию. Какие пользователи выиграют от установки вашего приложения и почему? Какое отношение это имеет к пути, который они сейчас проходят?
+- Если у вашего бренда есть уникальные предложения для пользователей установленных приложений, обязательно упомяните их здесь.
+- Не используйте рекламу в следующих шагах в пользовательском пути, иначе это может отрицательно повлиять на показатели завершения пути. Обратите внимание, что в приведенном выше примере электронной коммерции ключевой призыв к оформлению заказа находится над рекламой установки приложения.
+
+### Регистрация, вход и выход из системы {: #sign-up }
+
+Этот подход является частным случаем шаблона продвижения для [пользовательского пути](#journey), где карточка с рекламой может быть более заметной.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="Настраиваемая кнопка установки на странице регистрации.", width="800", height="1117" %} <figcaption> Настраиваемая кнопка установки на странице регистрации.</figcaption></figure>
+
+Эти страницы обычно просматривают только заинтересованные пользователи, для которых ценность вашего PWA уже сформулирована. Кроме того, часто на этих страницах не так много другого полезного контента. В результате можно сделать призыв к действию более крупным, поскольку он не мешает пользователям.
+
+Важно:
+
+- Не прерывайте путь пользователя через форму регистрации. Если это многоэтапный процесс, вам стоит подождать, пока пользователь не завершит путь.
+- Продвигайте функции, наиболее актуальные для зарегистрированного пользователя.
+- Стоит добавить дополнительную рекламу установки в разделах приложения, где выполнен вход.
+
+## Встроенные рекламные шаблоны
+
+Встроенные рекламные методики переплетают рекламу с контентом сайта. Зачастую это выглядит более тонко, чем продвижение в пользовательском интерфейсе приложения, которое требует компромиссов. Вам нужно, чтобы ваша реклама была достаточно заметной, чтобы заинтересованные пользователи обратили на нее внимание, но не настолько, чтобы это ухудшало качество вашего взаимодействия с пользователем.
+
+### Внутри ленты {: #in-feed }
+
+Реклама установки в ленте появляется между новостными статьями или другими информационными карточками в вашем PWA.
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="Реклама установки в ленте контента.", width="800", height="1000" %} <figcaption> Реклама установки в ленте контента. </figcaption></figure>
+
+Ваша цель — показать пользователям, как удобнее получать доступ к интересующему их контенту. Сосредоточьтесь на продвижении функций и возможностей, которые будут полезны вашим пользователям.
+
+Важно:
+
+- Ограничьте частоту показа рекламы, чтобы не раздражать пользователей.
+- Дайте вашим пользователям возможность отклонять рекламу.
+- Запоминайте, когда пользователь выбирает скрыть рекламу.
diff --git a/src/site/content/ru/progressive-web-apps/pwa-checklist/index.md b/src/site/content/ru/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..369ef2dfdd7
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,268 @@
+---
+layout: post
+title: Как сделать хорошее прогрессивное веб-приложение?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: |2-
+
+  Что нужно, чтобы сделать хорошее, выдающееся прогрессивное веб-приложение?
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+Прогрессивные веб-приложения (PWA) созданы и улучшены с помощью современных API-интерфейсов, чтобы обеспечить расширенные возможности, надежность и устанавливаемость, будучи доступными *любым пользователям где угодно и на любых устройствах* благодаря единой базе исходного кода. Чтобы обеспечить наилучшее взаимодействие с пользователем, обратитесь к [основному](#core) и [оптимальному](#optimal) контрольным спискам и рекомендациям.
+
+## Основной контрольный список для прогрессивных веб-приложений {: #core }
+
+Контрольный список для прогрессивных веб-приложений описывает, как обеспечить для приложения возможность установки и эксплуатации всеми пользователями независимо от размера или типа ввода.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Быстро запускается, быстро работает
+
+Производительность чрезвычайно важна для успешной работы онлайн, поскольку высокопроизводительные сайты привлекают и удерживают пользователей лучше, чем плохо работающие. Разработчики сайтов должны сосредоточиться на оптимизации показателей производительности, ориентированных на пользователя.
+
+{% endDetailsSummary %}
+
+Производительность чрезвычайно важна для успешной работы онлайн, поскольку высокопроизводительные сайты привлекают и удерживают пользователей лучше, чем плохо работающие. Разработчики сайтов должны сосредоточиться на оптимизации показателей производительности, ориентированных на пользователя.
+
+#### Почему
+
+Скорость имеет решающее значение во *взаимодействии* пользователей с вашим продуктом. Например, если время загрузки страницы увеличивается с одной до десяти секунд, вероятность ухода пользователя возрастает на 123%. Работа не останавливается после события `load`. Пользователи не должны задумываться о том, было ли зарегистрировано их действие — например, нажатие кнопки — или нет. Прокрутка и анимация должны казаться плавными. Производительность влияет на все — и то, как пользователи воспринимают ваше приложение, и то, как оно на самом деле работает.
+
+Хотя у всех приложений разные потребности, аудиты производительности в Lighthouse основаны на [модели производительности RAIL](/rail/), ориентированной на пользователя, и чем выше набранные в рамках этих аудитов баллы, тем вероятнее, что ваши пользователи получат удовольствие от работы. Кроме того, чтобы получить реальные данные о производительности вашего веб-приложения, вы можете использовать аналитику [PageSpeed Insights](https://pagespeed.web.dev/) или отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/).
+
+#### Как
+
+Следуйте нашему [руководству по быстрой загрузке](/fast/), чтобы обеспечить быстрый запуск и работу своего PWA.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Работает в любом браузере
+
+Пользователи могут использовать любой браузер на выбор для доступа к вашему веб-приложению до его установки.
+
+{% endDetailsSummary%}
+
+Пользователи могут использовать любой браузер на выбор для доступа к вашему веб-приложению до его установки.
+
+#### Почему
+
+Прогрессивные веб-приложения — это в первую очередь веб-приложения, а это значит, что они должны работать в разных браузерах, а не лишь в одном.
+
+По словам Джереми Кейта из [Resilient Web Design](https://resilientwebdesign.com/), эффективно реализовать это можно следующим образом: определить основной функционал, сделать его доступным, используя простейшие из возможных технологий, а затем улучшить взаимодействие с ним, где возможно. Во многих случаях это означает, что основные функции следует описывать на чистом HTML, а затем с помощью CSS и JavaScript улучшать взаимодействие с пользователем, делая его более захватывающим.
+
+Возьмем, к примеру, отправку формы. Самый простой способ ее реализации — HTML-форма, отправляющая запрос `POST`. После ее создания при помощи JavaScript можно улучшить взаимодействие с теми пользователями, чьи браузеры это поддерживают, выполняя проверку формы и отправляя ее через AJAX.
+
+Учтите, что пользователи будут работать с вашим сайтом на разных устройствах и в разных браузерах. Нельзя ориентироваться только на верхнюю часть этого списка. Используя обнаружение функций, вы сможете обеспечить удобство использования для самого широкого круга потенциальных пользователей, в том числе тех, кто будет использовать браузеры и устройства, на данный момент еще не выпущенные.
+
+#### Как
+
+[Resilient Web Design](https://resilientwebdesign.com/) (Гибкий веб-дизайн) Джереми Кейта — отличный ресурс, описывающий принципы веб-дизайна с применением прогрессивной кроссбраузерной методологии.
+
+#### Дополнительное чтение
+
+- Статья [Understanding Progressive Enhancement](https://alistapart.com/article/understandingprogressiveenhancement/) (Основы прогрессивных улучшений) от A List Apart — хорошее введение в тему.
+- Статья [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) (Прогрессивные улучшения: что это и как этим пользоваться?) в журнале Smashing Magazine дает практическое введение и ссылки на более сложные темы.
+- В MDN есть статья, озаглавленная «[Реализация обнаружения функций](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)», в которой рассказывается о том, как выявлять функцию, запрашивая ее напрямую.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Адаптируется к любым размерам экрана
+
+Пользователи могут работать с PWA на экране любого размера, и контент будет доступен целиком при любом размере области просмотра.
+
+{% endDetailsSummary %}
+
+Пользователи могут работать с PWA на экране любого размера, и контент будет доступен целиком при любом размере области просмотра.
+
+#### Почему
+
+Устройства бывают разных размеров, и пользователи могут работать с вашим приложением в разных масштабах даже на одном устройстве. Следовательно, очень важно убедиться не только в том, что контент умещается в области просмотра, но и что все функции и контент вашего сайта доступны для всех размеров области просмотра.
+
+Запланированные задачи и интересующий пользователя контент не меняются в зависимости от размера области просмотра. Контент может быть перегруппирован для разных размеров области просмотра, но так или иначе он должен быть доступен целиком. Собственно, как утверждает Люк Вроблевски в своей книге «Mobile First», если начинать проектирование с малых размеров и постепенно переходить к большим, а не наоборот, можно улучшить дизайн сайта:
+
+> Мобильные устройства требуют, чтобы команды разработчиков ПО сосредоточились лишь на самых важных данных и действиях в приложении. На экране размером 320 на 480 пикселей просто нет места для посторонних, ненужных элементов. Вы должны расставить приоритеты.
+
+#### Как
+
+Существует множество ресурсов по адаптивному дизайну, в том числе [оригинальная статья Итана Маркотта](https://alistapart.com/article/responsive-web-design/), [сборник важных принципов дизайна](https://snugug.com/musings/principles-responsive-web-design/), а также масса книг и обсуждений. Если ограничиться сугубо контентными аспектами адаптивного дизайна, можете изучить принципы [контентно-ориентированного дизайна](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c) и [адаптивные макеты на базе контента (content-out)](https://alistapart.com/article/content-out-layout/). Наконец, хоть и будучи ориентированными на мобильные устройства, уроки из «[Семи смертоносных мобильных мифов](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca)» Джоша Кларка не менее актуальны для небольших представлений адаптивных сайтов.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Предоставляет индивидуальную автономную страницу
+
+Удерживая пользователей в своем PWA, когда они не в сети, вы обеспечите более плавную работу, чем при возврате к автономной странице браузера по умолчанию.
+
+{% endDetailsSummary %}
+
+Удерживая пользователей в своем PWA, когда они не в сети, вы обеспечите более плавную работу, чем при возврате к автономной странице браузера по умолчанию.
+
+#### Почему
+
+Пользователи ожидают, что установленные приложения будут работать независимо от статуса их подключения. Платформозависимое приложение не показывает пустую страницу, когда оно находится в автономном режиме, и прогрессивное веб-приложение не должно отображать автономную страницу браузера по умолчанию. Обеспечьте индивидуальное автономное состояние и в тех ситуациях, когда пользователь переходит по URL-адресу, который не был кеширован, и когда он пытается воспользоваться требующей подключения функцией. Это позволит вам организовать взаимодействие так, что ваше веб-приложение будет ощущаться частью устройства, на котором оно работает.
+
+#### Как
+
+Во время события `install` сервис-воркера можно предварительно кешировать индивидуальную автономную страницу для последующего использования. Если пользователь отключится от сети, вы сможете показать ему эту страницу. Чтобы увидеть, как это работает, и научиться самостоятельно это реализовывать, воспользуйтесь нашим [примером настраиваемой автономной страницы](https://googlechrome.github.io/samples/service-worker/custom-offline-page/).
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Устанавливается
+
+Пользователи, устанавливающие или добавляющие приложения на свое устройство, как правило, больше взаимодействуют с этими приложениями.
+
+{% endDetailsSummary %}
+
+Пользователи, устанавливающие или добавляющие приложения на свое устройство, как правило, больше взаимодействуют с этими приложениями.
+
+#### Почему
+
+Установка прогрессивного веб-приложения позволяет ему выглядеть, работать и вести себя так же, как и все остальные установленные приложения. Оно запускается из того же места, откуда пользователь запускает другие приложения, работает в собственном окне, отдельно от браузера, и, подобно другим приложениям, отображается в списке задач.
+
+Зачем вам нужно, чтобы пользователь установил ваше PWA? По той же причине, по которой вы хотите, чтобы пользователи устанавливали ваше приложение из магазина. Пользователи, которые устанавливают ваши приложения, — это ваша ключевая аудитория. Показатели их вовлеченности выше, чем у обычных посетителей, часто наравне с пользователями приложений на мобильных устройствах. Эти показатели включают большее количество повторных посещений, более длительное пребывание на вашем сайте и более высокие коэффициенты конверсии.
+
+#### Как
+
+Следуйте нашему [руководству по возможностям установки](/customize-install/), чтобы узнать, как сделать свое PWA устанавливаемым, проверить возможность установки и попробовать самостоятельно его установить.
+
+{% endDetails %}
+
+## Оптимальный контрольный список для прогрессивных веб-приложений {: #optimal }
+
+Для создания первоклассного прогрессивного веб-приложения, которое станет лучшим в своей категории, просто пройтись по основному контрольному списку недостаточно. Оптимальный контрольный список для прогрессивных веб-приложений нацелен на то, чтобы сделать ваше приложение своеобразным продолжением устройства, на котором оно работает, и при этом выжать максимум из преимуществ современного Интернета.
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Работает вне сети
+
+Если подключение не обязательно, ваше приложение работает аналогично как в сети, так и вне сети.
+
+{% endDetailsSummary %}
+
+Если подключение не обязательно, ваше приложение работает аналогично как в сети, так и вне сети.
+
+#### Почему
+
+Кроме индивидуальной автономной страницы пользователи ожидают, что PWA можно будет использовать вне сети. Например, в приложениях для путешествий и авиаперелетов сведения о поездках и посадочные талоны должны быть доступны без подключения к Интернету. Приложения для музыки, видео и подкастинга должны обеспечивать автономное воспроизведение. Социальные и новостные приложения должны кешировать недавний контент, чтобы пользователи могли читать его, не подключаясь к сети. Кроме того, пользователи рассчитывают оставаться авторизованными, находясь не в сети, поэтому необходимо проектировать автономную аутентификацию. Автономное PWA должно давать пользователям полноценные впечатления от работы.
+
+#### Как
+
+Когда вы определите функции, которые должны работать вне сети согласно ожиданиям ваших пользователей, вам будет нужно сделать контент доступным и адаптируемым к контексту автономного режима. К тому же вы можете использовать [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb), внутрибраузерную NoSQL-систему, для хранения и извлечения данных, а также [фоновую синхронизацию](https://developer.chrome.com/blog/background-sync/), чтобы позволить пользователям выполнять действия вне сети и откладывать обмен данными с сервером до тех пор, пока у пользователя снова не установится стабильное соединение. Также вы можете использовать сервис-воркеры для хранения других видов контента, таких как изображения, видео- и аудиофайлы, для использования в автономном режиме. Кроме того, сервис-воркеры можно использовать для реализации [безопасных, долговременных сеансов](https://developer.chrome.com/blog/2-cookie-handoff/), чтобы пользователи оставались авторизованными. С точки зрения взаимодействия с пользователем вы можете использовать [скелетные экраны](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a), которые дают пользователям представление о скорости и контенте в процессе загрузки, а затем по мере необходимости можно вернуться к кешированному контенту или индикатору «не в сети».
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Полностью доступно
+
+Все взаимодействия с пользователем соответствуют требованиям доступности [WCAG 2.0](https://www.w3.org/TR/WCAG20/).
+
+{% endDetailsSummary %}
+
+Все взаимодействия с пользователем соответствуют требованиям доступности [WCAG 2.0](https://www.w3.org/TR/WCAG20/).
+
+#### Почему
+
+Большинство людей в какой-то момент захотят задействовать ваше PWA в соответствии с требованиями доступности [WCAG 2.0](https://www.w3.org/TR/WCAG20/). Люди могут очень по-разному понимать ваше PWA и работать с ним, а их потребности могут быть как временными, так и постоянными. Делая свое PWA доступным, вы гарантируете, что его смогут использовать все.
+
+#### Как
+
+Разумно будет начать с [введения W3C в веб-доступность](https://www.w3.org/WAI/fundamentals/accessibility-intro/). Большую часть тестирования доступности необходимо проводить вручную. Такие инструменты, как [аудит доступности](https://developer.chrome.com/docs/lighthouse/accessibility/) в Lighthouse, [axe](https://github.com/dequelabs/axe-core) и [Accessibility Insights](https://accessibilityinsights.io/), могут помочь вам частично автоматизировать тестирование доступности. Также важно использовать семантически правильные элементы вместо того, чтобы воссоздавать эти элементы самостоятельно, например, элементы `a` и `button`. Таким образом вы обеспечите соответствие ожиданиям доступности (например, когда использовать стрелки или вкладки), когда вам понадобится реализовать более продвинутую функциональность. В [A11Y Nutrition Cards](https://accessibilityinsights.io/) есть отличные советы по этому поводу для некоторых распространенных компонентов.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Можно найти с помощью поиска
+
+Ваше PWA можно легко [найти с помощью поиска](/discoverable/).
+
+{% endDetailsSummary %}
+
+Ваше PWA можно легко [найти с помощью поиска](/discoverable/).
+
+#### Почему
+
+Одно из самых серьезных преимуществ Интернета — это возможность находить сайты и приложения с помощью поиска. По сути, [более половины](https://www.brightedge.com/resources/research-reports/channel_share) всего трафика веб-сайтов поступает из обычного поиска. Убедитесь, что для контента существуют канонические URL-адреса и что поисковые системы могут индексировать ваш сайт — это критически важно для того, чтобы пользователи могли найти ваше PWA. Особенно это касается применения рендеринга на стороне клиента.
+
+#### Как
+
+Для начала убедитесь, что у каждого URL-адреса есть уникальный описательный заголовок и мета-описание. Затем вы можете использовать [Google Search Console](https://search.google.com/search-console/about) и [аудит поисковой оптимизации](https://developer.chrome.com/docs/lighthouse/seo/) в Lighthouse, чтобы отладить и исправить проблемы обнаружения своего PWA. Кроме того, вы можете использовать инструменты [Bing](https://www.bing.com/toolbox/webmaster) или [Яндекс](https://webmaster.yandex.com/welcome/) для веб-мастеров. Также рекомендуем вам включить в свое PWA [структурированные данные](https://goo.gle/search-gallery) с помощью схем со [Schema.org](https://schema.org/).
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Работает с любым типом ввода
+
+Ваше PWA одинаково можно использовать с мышью, клавиатурой, стилусом или сенсорным экраном.
+
+{% endDetailsSummary %}
+
+Ваше PWA одинаково можно использовать с мышью, клавиатурой, стилусом или сенсорным экраном.
+
+#### Почему
+
+Разные устройства предлагают различные методы ввода, и пользователи должны иметь возможность с легкостью переключаться между ними во время работы с вашим приложением. Плюс к тому, методы ввода не должны зависеть от размера экрана, т.е. большие области просмотра должны поддерживать сенсорное управление, а маленькие — клавиатуру и мышь. Обеспечьте для своего приложения и всех его функций поддержку любых методов ввода, которые могут понадобиться пользователю, насколько возможно. Также следует улучшить взаимодействие, где это целесообразно, задействуя элементы управления с привязкой к типу ввода, например, обновление оттягиванием (pull-to-refresh).
+
+#### Как
+
+[Pointer Events API](https://developer.chrome.com/blog/pointer-events/) предоставляет унифицированный интерфейс для работы с различными параметрами ввода и особенно хорош для добавления поддержки стилуса. Для одновременной поддержки сенсорного ввода и клавиатуры убедитесь, что вы используете правильные семантические элементы (якоря, кнопки, элементы управления формы и т. д.) и не перестраиваете их с помощью несемантического HTML (который хорошо подходит для доступности). Добавляя взаимодействия, которые активируются при наведении курсора, убедитесь, что они также могут активироваться при нажатии или касании.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Предоставляет контекст для запросов разрешений
+
+При запросе разрешения на использование мощных API-интерфейсов предоставьте контекст и запрашивайте только тогда, когда API-интерфейс необходим.
+
+{% endDetailsSummary %}
+
+При запросе разрешения на использование мощных API-интерфейсов предоставьте контекст и запрашивайте только тогда, когда API-интерфейс необходим.
+
+#### Почему
+
+API-интерфейсы, которые запрашивают разрешения на выдачу уведомлений, определение геолокации и обработку учетных данных, намеренно разработаны так, чтобы мешать пользователю, потому что они, как правило, связаны с мощными функциями, требующими согласия. Если запускать такие запросы без дополнительного контекста, например, при загрузке страницы, пользователи с меньшей вероятностью дадут эти разрешения и скорее перестанут доверять таким запросам в дальнейшем. Вместо этого запускайте эти запросы только после предоставления пользователю контекстного обоснования того, зачем вам это разрешение.
+
+#### Как
+
+Статья о [UX-разрешениях](https://developers.google.com/web/fundamentals/push-notifications/permission-ux) и публикация UX Planet «[Правильные способы запрашивать разрешения у пользователей](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27)» хорошо описывают, как создавать запросы разрешений, которые, будучи ориентированными на мобильные устройства, применяются ко всем PWA.
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+Следует устоявшимся стандартам хорошего кода
+
+Соблюдение гигиены кодовой базы облегчает достижение ваших целей и создание новых функций.
+
+{% endDetailsSummary %}
+
+Соблюдение гигиены кодовой базы облегчает достижение ваших целей и создание новых функций.
+
+#### Почему
+
+При создании современного веб-приложения нужно многое учитывать. Пока вы поддерживаете актуальность своего приложения и соблюдаете гигиену кодовой базы, вам будет проще разрабатывать новые функции, которые будут соответствовать другим целям, изложенным в этом контрольном списке.
+
+#### Как
+
+Для обеспечения качества программного кода существует ряд первоочередных проверок: избегайте использования библиотек с известными уязвимостями, не используйте устаревшие API, удаляйте из кода антишаблоны (например, использование `document.write()` или непассивных прослушивателей событий прокрутки), практикуйте защитное программирование, чтобы ваше PWA не выдавало сбой, если не загружается аналитика или другие сторонние библиотеки. Предусмотрите проведение обязательного статического анализа кода, такого как линтинг, а также автоматизированного тестирования в нескольких браузерах и каналах выпуска. Эти методики могут помочь выявить ошибки до того, как они попадут в рабочую версию.
+
+{% endDetails %}
diff --git a/src/site/content/ru/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/ru/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
new file mode 100644
index 00000000000..53c03d2baa5
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: Использование прогрессивного веб-приложения в приложении для Android
+authors:
+  - andreban
+date: 2020-03-19
+updated: 2021-12-06
+description: Как открыть прогрессивное веб-приложение в приложении для Android.
+tags:
+  - progressive-web-apps
+---
+
+## Запуск прогрессивного веб-приложения в приложении для Android
+
+[Прогрессивные веб-приложения](/progressive-web-apps/) (Progressive Web Apps, PWA) — это высококачественные, быстродействующие, надежные и привлекательные веб-приложения, которые выглядят и работают, как обычные приложения.
+
+Интернет имеет невероятный охват. Пользователи могут открывать для себя новые возможности самыми разными способами, но несмотря на это они привыкли использовать приложения из магазинов операционных систем на своих устройствах. Во многих случаях пользователи уже достаточно знают о брендах или услугах, которые они ищут, и очень целенаправленны, из-за чего значения метрик вовлечения для таких пользователей превышают средний уровень.
+
+Play Store — это магазин приложений для Android, и разработчикам часто необходимо, чтобы их прогрессивные веб-приложения можно было открывать в приложениях для Android.
+
+Trusted Web Activity — это открытый стандарт, благодаря которому браузеры могут предоставлять полностью совместимый с веб-платформой контейнер для отображения прогрессивного веб-приложения внутри приложения для Android. Эта возможность доступна в [Chrome](https://play.google.com/store/apps/details?id=com.android.chrome) и находится в разработке для [Firefox Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix).
+
+### Существующие решения имеют ограниченные возможности
+
+В приложения для Android всегда можно было добавлять веб-функции, используя определенные технологии, например [Android WebView](https://developer.android.com/reference/android/webkit/WebView), или платформы, например [Cordova](https://cordova.apache.org/).
+
+Одно из ограничений технологии Android WebView заключается в том, что она не предназначена для замены браузера. Android WebView — это средство разработчика, позволяющее использовать пользовательский веб-интерфейс в приложениях Android, и оно не обеспечивает полный доступ к функциям современной веб-платформы, например к [средству выбора контактов](/contact-picker/), [файловой системе](/file-system-access/) и [ряду других возможностей](https://developer.chrome.com/blog/fugu-status/).
+
+Платформа Cordova была разработана, чтобы компенсировать недостатки WebView, но вследствие этого для API появились ограничения, связанные со средой Cordova. Это означает, что помимо прогрессивного веб-приложения, работающего в открытом Интернете, вам придется поддерживать дополнительную базу кода для использования API Cordova в своем приложении для Android.
+
+Кроме того, в существующих решениях зачастую не работают должным образом функции обнаружения возможностей и могут возникать проблемы совместимости между различными версиями Android и продукцией OEM-производителей. При использовании таких решений разработчикам требуется применять дополнительные процессы обеспечения качества и нести дополнительные расходы на разработку для поиска и создания обходных путей.
+
+### Trusted Web Activity — новый контейнер для веб-приложений в Android
+
+Теперь разработчики могут использовать контейнеры [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/) и добавлять действия запуска прогрессивных веб-приложений в свои приложения для Android. Эта технология использует браузер для отображения прогрессивных веб-приложений в полноэкранном режиме и гарантирует, что контейнеры Trusted Web Activity будут в той же степени совместимы с функциями и API веб-платформы, что и используемый браузер. Кроме того, с помощью ряда служебных программ с открытым исходным кодом можно упростить реализацию приложений для Android с использованием технологии Trusted Web Activity.
+
+Еще одно преимущество, недоступное в других решениях, заключается в том, что для контейнера используется то же хранилище, что и для браузера. В результате можно без проблем обмениваться сведениями о состоянии входа в систему и предпочтениях пользователя между разными интерфейсами.
+
+#### Совместимость с браузерами
+
+Эта функция доступна в Chrome, начиная с версии 75, а в Firefox она реализована в «ночных» версиях.
+
+### Критерии качества
+
+Веб-разработчикам следует использовать технологию Trusted Web Activity, если нужно включить веб-контент в приложение для Android.
+
+Веб-контент в Trusted Web Activity должен соответствовать критериям возможности установки прогрессивного веб-приложения.
+
+Кроме того, чтобы прогрессивные веб-приложения работали как обычные приложения для Android, в [Chrome 86 внесено изменение](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html). Согласно ему случаи, в которых не удается обработать указанные ниже сценарии, считаются сбоями.
+
+- Не удается проверить ссылки на цифровые ресурсы при запуске приложения.
+- Не удается возвратить код HTTP 200 при запросе сетевого ресурса в автономном режиме.
+- В ответ на запрос на переход возвращается ошибка HTTP 404 или 5xx.
+
+Когда в Trusted Web Activity возникает один из этих сценариев, он приводит к видимому для пользователя сбою приложения для Android. Сведения о том, как обрабатывать такие сценарии в служебных скриптах, см. в [этом руководстве](https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria).
+
+Кроме того, приложение должно соответствовать дополнительным критериям, связанным с ОС Android, например [требованиям политик](https://play.google.com/about/developer-content-policy/).
+
+{% Aside 'caution' %} Если приложение предназначено в первую очередь для детей младше 13 лет, [применяются дополнительные политики Play Family](https://play.google.com/about/families/), которые могут быть несовместимы с Trusted Web Activity. {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="Снимок экрана с оценкой Lighthouse для AirHorn, эмблемой прогрессивного веб-приложения и оценкой производительности, равной 100 баллам.", width="800", height="141" %} <figcaption> Эмблема прогрессивного веб-приложения в Lighthouse показывает, соответствует ли прогрессивное веб-приложение критериям возможности установки. </figcaption></figure>
+
+## Инструменты
+
+Веб-разработчикам, которые хотят использовать Trusted Web Activity, не нужно изучать новые технологии или API, чтобы преобразовывать свои прогрессивные веб-приложения в приложения для Android. В средствах Bubblewrap и PWABuilder имеются инструменты для разработчиков в виде библиотек, ИКС и программ с графическим пользовательским интерфейсом.
+
+### Bubblewrap
+
+Проект [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) позволяет создавать приложения для Android и доступен в виде библиотеки NodeJS и ИКС.
+
+Для начальной загрузки нового проекта нужно запустить это средство и передать в него URL-адрес веб-манифеста:
+
+```shell
+npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
+```
+
+Это средство также может выполнить сборку проекта. Если запустить следующую команду, будет создано приложение для Android, которое можно отправить в Play Store:
+
+```shell
+npx @bubblewrap/cli build
+```
+
+После выполнения этой команды в корневом каталоге проекта появится файл `app-release-signed.apk`. Этот файл можно [отправить в Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB).
+
+### PWABuilder
+
+С помощью [PWABuilder](https://pwabuilder.com/) можно преобразовывать существующие веб-сайты в прогрессивные веб-приложения. Его также можно интегрировать с Bubblewrap, чтобы добавлять прогрессивные веб-приложения в приложения для Android с использованием графического пользовательского интерфейса. Разработчики PWABuilder написали [отличную публикацию в блоге](https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/) о том, как с помощью этого средства создавать приложения для Android.
+
+## Проверка права собственности на прогрессивное веб-приложение в приложении для Android
+
+Разработчик, создавший прогрессивное веб-приложение, наверняка не захочет, чтобы другой разработчик использовал его без разрешения при создании собственного приложения для Android. Чтобы этого не произошло, необходимо выполнить сопряжение приложения для Android с прогрессивным веб-приложением с помощью средства [Digital Asset Links](https://developers.google.com/digital-asset-links/v1/getting-started).
+
+Средства Bubblewrap и PWABuilder создают необходимую конфигурацию в приложении для Android, но нужно выполнить еще одно действие — добавить файл `assetlinks.json` в прогрессивное веб-приложение.
+
+Чтобы создать этот файл, разработчикам необходима подпись SHA-256 ключа, используемого для подписи APK-файла, который загружают пользователи.
+
+Ключ можно сгенерировать несколькими способами. Самый простой способ узнать, каким ключом подписан APK-файл, передаваемый конечным пользователям, — загрузить этот файл из Play Store.
+
+Чтобы не отображать неработающее приложение для пользователей, разверните приложение в [закрытом тестовом канале](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB), установите его на тестовое устройство и с помощью средства [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool) создайте правильный файл `assetlinks.json` для приложения. Сделайте созданный файл `assetlinks.json` доступным по адресу `/.well-known/assetlinks.json` в проверяемом домене.
+
+## Что делать дальше
+
+Прогрессивное веб-приложение — это высококачественный веб-интерфейс. Trusted Web Activity — новый способ использовать такие высококачественные интерфейсы (если они соответствуют минимальным критериям качества) в приложениях для Android.
+
+Если вы только начинаете работать с прогрессивными веб-приложениями, прочтите [наше руководство по созданию прогрессивных веб-приложений](/progressive-web-apps/). Разработчики, у которых уже есть прогрессивные веб-приложения, с помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) могут проверить, соответствуют ли их веб-приложения определенным критериям качества.
+
+Затем с помощью средства [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) или [PWABuilder](https://pwabuilder.com/) создайте приложение для Android, [отправьте его в закрытый тестовый канал в Play Store](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB) и выполните его сопряжение с прогрессивным веб-приложением с помощью средства [Peter's Asset Link Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool).
+
+И, наконец, переместите свое приложение из закрытого тестового канала в рабочую среду.
diff --git a/src/site/content/ru/progressive-web-apps/what-are-pwas/index.md b/src/site/content/ru/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..969d9be6b2f
--- /dev/null
+++ b/src/site/content/ru/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: Что такое прогрессивные веб-приложения?
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: |2-
+
+  Введение в прогрессивные веб-приложения (PWA) и три столпа, которые
+
+  отделяют их от других веб-приложений.
+tags:
+  - progressive-web-apps
+---
+
+Интернет — невероятная платформа. Он повсеместно распространен, доступен с разных устройств и операционных систем, модель безопасности ориентирована на пользователя, при этом не существует единой компании, которая бы контролировала его спецификацию или реализацию. Все это делает Интернет уникальной платформой для разработки программного обеспечения. Учитываю присущую ему линкабельность, в Интернете можно искать что угодно и делиться тем, что вы нашли, с кем угодно и где угодно. Когда бы вы ни зашли на веб-сайт, вы работаете с актуальной версией, и ваше пребывание на сайте может длиться ровно столько, сколько вам понадобится. Веб-приложения доступны *кому угодно, где угодно и на любых устройствах* благодаря единой базе исходного кода.
+
+Платформо-зависимые приложения известны своей невероятной функциональностью и надежностью. Они располагаются на главных экранах, в доках и на панелях задач, работают независимо от сетевого подключения, запускаются в собственном автономном режиме, могут читать и записывать файлы из локальной файловой системы, получать доступ к оборудованию, подключенному через USB, последовательный порт или Bluetooth, и даже взаимодействовать с данными, хранящимися на вашем устройстве, такими как контакты и события в календаре. В этих приложениях вы можете делать снимки, просматривать список воспроизведения на главном экране или управлять воспроизведением песен параллельно работе с другим приложением. Платформо-зависимые приложения ощущаются как *часть* устройства, на котором они работают.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="График, иллюстрирующий относительные возможности и охват платформо-зависимых приложений с широкими возможностями, веб-приложений с широким охватом и прогрессивных веб-приложений, которые имеют и широкие возможности, и большой охват.", width="370", height="367" %} <figcaption> Возможности и охват платформо-зависимых приложений, веб-приложений и прогрессивных веб-приложений. </figcaption></figure>
+
+Если рассматривать платформо-зависимые приложения и веб-приложения с точки зрения возможностей и охвата, платформо-зависимые приложения предоставляют больше возможностей, а веб-приложения более доступны. Но где в этой парадигме находятся прогрессивные веб-приложения?
+
+Прогрессивные веб-приложения (PWA) созданы и улучшены с помощью современных API-интерфейсов, чтобы обеспечить расширенные возможности, надежность и возможность установки, будучи доступными *любым пользователям где угодно и на любых устройствах* благодаря единой базе исходного кода.
+
+## Три столпа приложений
+
+Прогрессивные веб-приложения — это веб-приложения, разработанные таким образом, чтобы обеспечивать функциональность, надежность и легкость установки. Эти три столпа делают взаимодействие с ними похожим на работу с платформо-зависимыми приложениями.
+
+### Функциональность
+
+Сеть сегодня вполне функциональна сама по себе. Например, вы можете создать гиперлокальное приложение для видеочата, используя WebRTC, геолокацию и push-уведомления. Можно сделать это приложение устанавливаемым и перенести разговоры в виртуальное пространство с помощью WebGL и WebVR. С появлением Web Assembly разработчики получили возможность подключаться к другим экосистемам, таким как C, C++ и Rust, таким образом привнося в Интернет результаты десятков лет работы над функционалом. Например, [Squoosh.app](https://squoosh.app/) применяет эту технологию для улучшенного сжатия изображений.
+
+До недавнего времени такими возможностями могли похвастаться лишь платформо-зависимые приложения. Хотя некоторые функции по-прежнему недоступны для Интернета, новые и будущие API-интерфейсы стремятся это изменить, расширяя возможности Интернета с помощью таких функций, как доступ к файловой системе, элементы управления мультимедиа, значки приложений и полная поддержка буфера обмена. Все эти возможности основаны на безопасной и ориентированной на пользователя сетевой модели разрешений, благодаря которой пользователи могут переходить на веб-сайты, ничего не опасаясь.
+
+Благодаря современным, новым и готовящимся к выпуску API, а также Web Assembly, веб-приложения стали беспрецедентно функциональными, и спектр их возможностей продолжает расширяться.
+
+### Надежность
+
+Надежные прогрессивные веб-приложения работают быстро и стабильно независимо от подключения к сети.
+
+Скорость имеет решающее значение во *взаимодействии* пользователей с вашим продуктом. Например, если время загрузки страницы увеличивается с 1 до 10 секунд, вероятность ухода пользователя [возрастает на 123%](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/). Работа не останавливается после события `onload`. Пользователи не должны задумываться о том, было ли зарегистрировано их действие — например, нажатие кнопки — или нет. Прокрутка и анимация должны казаться плавными. Производительность влияет на все — и то, как пользователи воспринимают ваше приложение, и то, как оно на самом деле работает.
+
+Наконец, надежные приложения должны работать независимо от сетевого подключения. Пользователи ожидают, что приложения будут запускаться при медленном или нестабильном сетевом подключении или даже в автономном режиме. Предполагается, что последний контент, с которым взаимодействовал пользователь, например медиатреки или билеты и маршруты, будет доступен и пригоден для эксплуатации даже в тех случаях, когда есть трудности <br>с получением запроса на сервер. Если запрос не удается послать, ожидается, что приложение выдаст сообщение о проблеме, а не просто сбой.
+
+Пользователям нравятся приложения с минимальным временем отклика и предсказуемым ходом работы.
+
+### Устанавливаемость
+
+Установленные прогрессивные веб-приложения запускаются в отдельном окне вместо вкладки браузера. Их можно запустить с главного экрана, дока, панели задач или из буфера пользователя. Можно искать их на устройстве и перелистывать их с помощью переключателя приложений, что дает пользователю ощущение, будто эти приложения — часть устройства, на котором они установлены.
+
+После установки веб-приложения открываются новые возможности. Становятся доступны сочетания клавиш, которые обычно зарезервированы при работе в браузере. Прогрессивные веб-приложения можно регистрировать для получения контента из других приложений или выбирать в качестве приложения по умолчанию для обработки различных типов файлов.
+
+Когда прогрессивное веб-приложение перемещается из вкладки в отдельное окно, пользователи начинают по-другому его воспринимать и взаимодействовать с ним.
+
+## Лучшее из двух миров
+
+По своей сути прогрессивные веб-приложения — это просто веб-приложения. Благодаря прогрессивному усовершенствованию в современных браузерах доступны новые возможности. С использованием сервис-воркеров и манифеста веб-приложений веб-приложения становятся надежными и устанавливаемыми. Если новые возможности окажутся недоступны, пользователи все равно смогут работать с основным функционалом.
+
+Цифры не врут! Компании, запустившие прогрессивные веб-приложения, добились впечатляющих результатов. Например, в Twitter количество просматриваемых за сеанс страниц увеличилось на 65%, количество твитов — на 75%, а показатель отказов снизился на 20%, при этом размер приложения уменьшился более чем на 97%. После перехода на PWA трафик Nikkei увеличился в 2,3 раза, число подписок выросло на 58%, а количество активных пользователей за день — на 49%. Hulu перешла с платформо-зависимого десктопного приложения на прогрессивное веб-приложение, и количество повторных посещений увеличилось на 27%.
+
+Прогрессивные веб-приложения предоставляют уникальную возможность создавать веб-интерфейсы, которые понравятся вашим пользователям. Используя новейшие веб-функции, обеспечивающие расширенные возможности и надежность, прогрессивные веб-приложения позволяют устанавливать *то, что вы создаете, любым пользователям где угодно и на любых устройствах* при помощи единой базы исходного кода.
diff --git a/src/site/content/ru/react/code-splitting-suspense/index.md b/src/site/content/ru/react/code-splitting-suspense/index.md
new file mode 100644
index 00000000000..ce305d22c38
--- /dev/null
+++ b/src/site/content/ru/react/code-splitting-suspense/index.md
@@ -0,0 +1,242 @@
+---
+layout: post
+title: Разделение кода с помощью React.lazy и Suspense
+subhead: |
+  Чем меньше вы отправляете пользователям кода, тем лучше, поэтому разделяйте пакеты, чтобы не отправлять ненужный код!
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
+date: 2019-04-29
+description: |
+  Метод React.lazy упрощает разделение кода для приложения React на уровне компонентов с помощью динамического импорта. Вместе с Suspense он позволяет отображать пользователям соответствующее состояние загрузки.
+authors:
+  - houssein
+  - jeffposnick
+feedback:
+  - api
+---
+
+{% Aside %}
+Если вы еще не разобрались в том, для чего нужно разделение кода, сначала
+ознакомьтесь со статьей
+[Сокращение полезной нагрузки JavaScript за счет разделения кода](/reduce-javascript-payloads-with-code-splitting).
+{% endAside %}
+
+Метод **`React.lazy`** упрощает разделение кода для приложения React на уровне
+компонентов с помощью динамического импорта.
+
+```jsx
+import React, { lazy } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const DetailsComponent = () => (
+  <div>
+    <AvatarComponent />
+  </div>
+)
+```
+
+## Какая от этого польза?
+
+Большое приложение React обычно состоит из множества компонентов,
+служебных методов и сторонних библиотек. Если не пытаться загружать
+различные части приложения только по необходимости, то при загрузке
+первой страницы пользователям будет отправлен один большой
+пакет JavaScript, что может существенно повлиять на скорость работы страницы.
+
+Функция `React.lazy` — это встроенное средство разделения компонентов
+в приложении на отдельные фрагменты кода JavaScript с минимальными усилиями. После
+разделения можно будет настроить состояния загрузки — используя компонент
+`Suspense`.
+
+## Suspense
+
+При отправке пользователям большого объема полезной нагрузки JavaScript
+на загрузку страницы требуется много времени, особенно на слабых устройствах
+и при медленном подключении. В таких случаях на помощь приходит разделение кода
+и отложенная загрузка.
+
+Однако при получении компонента с разделением кода по сети всегда будет
+небольшая задержка, поэтому важно отображать понятное для пользователей
+состояние загрузки. В решении этой задачи помогает `React.lazy` с компонентом
+**`Suspense`**.
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+  </Suspense>
+)
+```
+
+`Suspense` принимает компонент `fallback`, который позволяет отображать
+любой компонент React как состояние загрузки. В следующем примере показано, как это работает.
+Аватар отрисовывается только при нажатии кнопки: при этом делается
+запрос на получение кода, необходимого для приостановленного `AvatarComponent`,
+а отображается компонент загрузки fallback.
+
+{% Glitch {
+id: 'react-lazy-suspense',
+path: 'src/index.css',
+height: 480
+} %}
+
+В этом примере код `AvatarComponent` небольшой, поэтому
+счетчик загрузки отображается недолго. На загрузку
+более объемных компонентов может потребоваться гораздо
+больше времени, особенно при медленном подключении.
+
+Разберемся подробнее, как это работает:
+
+{% Instruction 'preview' %}
+{% Instruction 'devtools-network' %}
+- Откройте список **Throttling** (Ограничение) — по умолчанию там **Без ограничения**. Выберите **Fast 3G** (3G (высокая скорость)).
+- Нажмите кнопку **Click Me** в приложении.
+
+Индикатор загрузки будет отображаться дольше. Обратите внимание, что весь код
+`AvatarComponent` передается как отдельный фрагмент.
+
+<figure>
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt="Панель «Сеть» в DevTools. Загружается файл chunk.js", width="800", height="478" %}
+</figure>
+
+{% Aside %}
+Пока что React не поддерживает Suspense, если компоненты отрисовываются
+на сервере — в этом случае можно попробовать другую библиотеку,
+например
+[`loadable-components`](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/),
+которую рекомендуют в документации React.
+{% endAside %}
+
+## Приостановка нескольких компонентов
+
+Еще одна возможность `Suspense` — приостановка загрузки нескольких
+компонентов, **даже в случае отложенной загрузки**.
+
+Например:
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+    <InfoComponent />
+    <MoreInfoComponent />
+  </Suspense>
+)
+```
+
+Это позволяет удобным образом откладывать отрисовку нескольких компонентов,
+показывая только одно состояние загрузки. Как только все компоненты будут получены,
+пользователь увидит их все одновременно.
+
+Увидеть это можно на следующей вставке:
+
+{% Glitch {
+id: 'react-lazy-suspense-multiple',
+path: 'src/index.css',
+height: 480
+} %}
+
+{% Aside %}
+Индикатор загрузки исчезает слишком быстро?
+Попробуйте снова ограничить скорость подключения в DevTools.
+{% endAside %}
+
+Если не использовать такой подход, можно столкнуться с проблемой
+_несинхронной загрузки_: разные части интерфейса будут появляться
+друг за другом, и у каждого будет собственный индикатор загрузки — пользователя это наверняка будет раздражать.
+
+{% Aside %}
+Suspense уже позволяет разделять компоненты и сокращать размер пакетов,
+но команда React продолжает работать над другими функциями, которые
+дадут еще больше возможностей. Подробнее —
+в
+[дорожной карте React 16.x](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html).
+{% endAside %}
+
+## Обработка сбоев загрузки
+
+`Suspense` позволяет отображать временное состояние загрузки,
+пока выполняются сетевые запросы. Но что, если эти сетевые запросы
+по какой-либо причине не срабатывают? Возможно, пользователь офлайн, или веб-приложение пытается
+отложить загрузку устаревшего [версионированного URL-адреса](/http-cache/#long-lived-caching-for-versioned-urls),
+который после повторного развертывания сервера перестал быть доступен.
+
+Для этого в React есть стандартный шаблон работы с такими проблемами загрузки:
+использование границы ошибок. Как описано [в документации](https://reactjs.org/docs/error-boundaries.html), любой
+границей ошибок может быть любой компонент React, если он реализует один или оба
+метода жизненного цикла: `static getDerivedStateFromError()` или
+`componentDidCatch()`.
+
+Для обнаружения и обработки сбоев при отложенной загрузке можно обернуть компонент
+`Suspense` родительскими компонентами, которые будут служить границей ошибок. В методе
+границы ошибок `render()` в случае нормальной работы дочерние элементы можно
+отрисовывать как есть, при сбое отображать заданное сообщение об ошибке:
+
+```js
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Loading failed! Please reload.</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DetailsComponent = () => (
+  <ErrorBoundary>
+    <Suspense fallback={renderLoader()}>
+      <AvatarComponent />
+      <InfoComponent />
+      <MoreInfoComponent />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+## Заключение
+
+Если вы не знаете, как подступиться к разделению кода в приложении React,
+действуйте следующим образом:
+
+1. Начните с уровня маршрута. Маршруты — самый простой способ определить точки,
+   в которых приложение можно разделить. В
+   [документации React](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting)
+   показано, как использовать `Suspense` в сочетании с
+   [`react-router`](https://github.com/ReactTraining/react-router).
+2. Найдите на странице сайта большие компоненты, которые отрисовываются только
+   при определенных действиях пользователя (например, при нажатии кнопки). Отделив их,
+   вы уменьшите размера полезных нагрузок JavaScript.
+3. Попробуйте разделить всё, что находится «за кадром» и не критично
+   для пользователя.
diff --git a/src/site/content/ru/react/index.md b/src/site/content/ru/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/ru/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/ru/react/virtualize-long-lists-react-window/index.md b/src/site/content/ru/react/virtualize-long-lists-react-window/index.md
new file mode 100644
index 00000000000..aab6e60a98d
--- /dev/null
+++ b/src/site/content/ru/react/virtualize-long-lists-react-window/index.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: Виртуализация больших списков с помощью библиотеки react-window
+subhead: Сверхбольшие таблицы и списки могут значительно снижать производительность сайта. В этом случае на помощь может прийти виртуализация.
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
+date: 2019-04-29
+description: react-window — это библиотека, с помощью которой можно эффективно отображать большие списки.
+authors:
+  - houssein
+  - developit
+feedback:
+  - api
+---
+
+[`react-window`](https://react-window.now.sh/#/examples/list/fixed-size) — это библиотека, с помощью которой можно эффективно отображать большие списки.
+
+Вот пример списка, в котором 1000 строк, отображаемых с помощью библиотеки `react-window`. Попробуйте прокрутить этот список как можно быстрее.
+
+{% Glitch { id: 'react-window-fixed', path: 'src/App.js', height: 750 } %}
+
+## Почему это полезно?
+
+Иногда требуется отобразить большую таблицу или список с большим количеством строк. Загрузив все элементы такого списка, можно сильно ухудшить производительность страницы.
+
+**Виртуализация списков** или «кадрирование» — это концепция, согласно которой отображают только те элементы, которые видны пользователю. Сначала отображают очень небольшое количество элементов списка. Когда пользователь прокручивает список, «окно» видимого содержимого *перемещается*. Это повышает производительность списка как при его отображении, так и при прокрутке.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="Окно содержимого в виртуализированном списке", width="578", height="525" %} <figcaption> Перемещение «окна» содержимого в виртуализированном списке </figcaption></figure>
+
+Когда пользователь прокручивает список вниз, узлы DOM, которые выходят за пределы «окна», повторно используются или немедленно заменяются новыми элементами. Это позволяет поддерживать постоянное количество отображаемых элементов, зависящее от размера окна.
+
+## Библиотека react-window
+
+`react-window` — это небольшая сторонняя библиотека, упрощающая создание виртуализированных списков в приложении. Имеющиеся в ней базовые API можно использовать для работы со списками и таблицами различных типов.
+
+### Когда использовать списки фиксированного размера
+
+Используйте компонент `FixedSizeList` для длинных одномерных списков с элементами одинакового размера.
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+const items = [...] // Список элементов
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* Определение компонента строки с использованием массива items[index] */}
+  </div>
+);
+
+const ListComponent = () => (
+  <FixedSizeList
+    height={500}
+    width={500}
+    itemSize={120}
+    itemCount={items.length}
+  >
+    {Row}
+  </FixedSizeList>
+);
+
+export default ListComponent;
+```
+
+- Для управления размером элементов в списке можно передавать в компонент `FixedSizeList` значения свойств `height`, `width` и `itemSize`.
+- Функция, отображающая строки, передается в компонент `FixedSizeList` в качестве дочернего элемента. Сведения о конкретном элементе можно получить с помощью аргумента `index` (`items[index]`).
+- Параметр `style` также передается в метод отображения строк, который **должен** быть присоединен к элементу строки. Элементы списка имеют абсолютные позиции, а их значения высоты и ширины назначаются в коде, за что отвечает параметр `style`.
+
+{% Aside 'caution' %} Не назначайте свойства `height` и `width` списку или элементу списка с помощью внешнего файла CSS. Они будут проигнорированы, так как эти атрибуты стиля применяются в коде. {% endAside %}
+
+В приведенном выше примере из Glitch показан компонент `FixedSizeList`.
+
+### Когда использовать списки переменного размера
+
+Для отображения списков с элементами разного размера используйте компонент `VariableSizeList`. Он работает точно так же, как списки элементов фиксированного размера, но вместо определенного значения в свойство `itemSize` нужно передавать функцию.
+
+```jsx
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+
+const items = [...] // Список элементов
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* Определение компонента строки с использованием массива items[index] */}
+  </div>
+);
+
+const getItemSize = index => {
+  // Возвращаем размер массива items[index]
+}
+
+const ListComponent = () => (
+  <VariableSizeList
+    height={500}
+    width={500}
+    itemCount={items.length}
+    itemSize={getItemSize}
+  >
+    {Row}
+  </VariableSizeList>
+);
+
+export default ListComponent;
+```
+
+Ниже показан пример этого компонента.
+
+{% Glitch { id: 'react-window-variable', path: 'src/ListComponent.js', height: 750 } %}
+
+В этом примере функция размера элемента, передаваемая в свойство `itemSize`, возвращает случайные значения высоты строк. Однако в реальном приложении следует использовать правильную логику, определяющую размеры каждого элемента. В идеальном случае эти размеры следует вычислять на основе данных или получать из API.
+
+{% Aside %} Компоненты `FixedSizeList` и `VariableSizeList` поддерживают горизонтальные списки при использовании свойства `layout="horizontal"`. Пример такого списка см. в [документации](https://react-window.now.sh/#/examples/list/fixed-size). {% endAside %}
+
+### Таблицы
+
+Библиотека `react-window` также поддерживает виртуализацию многомерных списков или таблиц. В этом контексте отображаемое содержимое «окна» изменяется, когда пользователь выполняет прокрутку по горизонтали **и** вертикали.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="Перемещение окна содержимого в виртуализированной таблице в двух измерениях", width="739", height="516" %} <figcaption> Перемещение «окна» содержимого в виртуализированной таблице в двух измерениях </figcaption></figure>
+
+В этом случае также можно использовать компоненты `FixedSizeGrid` и `VariableSizeGrid` (в зависимости от того, изменяется ли размер элементов списка).
+
+- Для компонента `FixedSizeGrid` API практически такой же, но нужно указывать значения высоты, ширины и количества элементов как для столбцов, так и для строк.
+- Для компонента `VariableSizeGrid` можно изменять ширину столбцов и высоту строк, передавая функции, а не значения в соответствующие свойства этого компонента.
+
+Примеры виртуализированных таблиц см. в [документации](https://react-window.now.sh/#/examples/grid/fixed-size).
+
+{% Aside %} Помимо базовых компонентов для создания эффективных списков и таблиц, библиотека `react-window` предоставляет и другие возможности, например функции прокрутки к определенному элементу или отображения индикатора, когда пользователь прокручивает список или таблицу. Соответствующие примеры см. в [документации](https://react-window.now.sh/#/examples/list/scrolling-indicators). {% endAside %}
+
+## Отложенная загрузка при прокрутке
+
+Многие веб-сайты повышают производительность, откладывая загрузку и рендеринг элементов длинного списка, пока пользователь не прокрутит список до этих элементов. При использовании этого метода, обычно называемого «бесконечной загрузкой», новые узлы DOM добавляются в список по мере прокрутки до определенного порогового элемента. Это лучше, чем загружать все элементы списка сразу, но все равно при этом DOM заполняется тысячами записей строк (если пользователь прокрутил все эти строки). В результате DOM может увеличиться до чрезмерного размера, что снизит производительность и замедлит расчеты стилей и мутации DOM.
+
+Ниже приведена схема со сводкой всего вышесказанного.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="Разница при прокрутке обычного и виртуализированного списков", width="800", height="531" %} <figcaption> Разница при прокрутке обычного и виртуализированного списков </figcaption></figure>
+
+Лучший подход к решению этой проблемы — использовать какую-либо библиотеку, например `react-window`, для отображения небольшого «окна» элементов на странице и для отложенной загрузки новых записей по мере того, как пользователь прокручивает содержимое списка. Это можно сделать с помощью отдельного пакета `react-window-infinite-loader` из библиотеки `react-window`.
+
+Рассмотрим еще один фрагмент кода. В нем показан пример состояния, которым управляет родительский компонент `App`.
+
+```jsx
+import React, { Component } from 'react';
+
+import ListComponent from './ListComponent';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [], // Здесь мы создаем первоначальный список
+      moreItemsLoading: false,
+      hasNextPage: true
+    };
+
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  loadMore() {
+   // Метод для получения новых записей списка
+  }
+
+  render() {
+    const { items, moreItemsLoading, hasNextPage } = this.state;
+
+    return (
+      <ListComponent
+        items={items}
+        moreItemsLoading={moreItemsLoading}
+        loadMore={this.loadMore}
+        hasNextPage={hasNextPage}
+      />
+    );
+  }
+}
+
+export default App;
+```
+
+Метод `loadMore` передается в дочерний элемент `ListComponent`, содержащий список бесконечного загрузчика. Это важно, потому что бесконечный загрузчик должен запускать обратный вызов для загрузки дополнительных элементов, когда пользователь прокручивает содержимое окна далее определенной точки.
+
+Вот как может выглядеть элемент `ListComponent`, выполняющий рендеринг списка:
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import InfiniteLoader from "react-window-infinite-loader";
+
+const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
+  const Row = ({ index, style }) => (
+     {/* Определяем компонент строки с использованием массива items[index] */}
+  );
+
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={index => index < items.length}
+      itemCount={itemCount}
+      loadMoreItems={loadMore}
+    >
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList
+          height={500}
+          width={500}
+          itemCount={itemCount}
+          itemSize={120}
+          onItemsRendered={onItemsRendered}
+          ref={ref}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+  </InfiniteLoader>
+  )
+};
+
+export default ListComponent;
+```
+
+Здесь компонент `FixedSizeList` вложен в элемент `InfiniteLoader`. Загрузчику назначены указанные ниже свойства.
+
+- `isItemLoaded`: этот метод проверяет, загружен ли определенный элемент
+- `itemCount`: количество элементов в списке (или ожидаемое количество элементов)
+- `loadMoreItems`: обратный вызов, возвращающий промис, который сопоставляет дополнительные данные для списка
+
+[Свойство render](https://reactjs.org/docs/render-props.html#using-props-other-than-render) используется для возврата функции, которую компонент списка использует для рендеринга. `onItemsRendered` и `ref` — это атрибуты, которые необходимо передать.
+
+В примере ниже показано, как функция бесконечной загрузки работает с виртуализированным списком.
+
+{% Glitch { id: 'react-window-infinite', path: 'src/ListComponent.js', height: 750 } %}
+
+Ощущения пользователя при прокрутке списка могут не измениться, но теперь мы делаем запрос на получение 10 пользователей из [Random User API](https://randomuser.me/) каждый раз, когда пользователь прокручивает содержимое окна в сторону конца списка. При этом выполняется рендеринг не более одного «окна» результатов за раз.
+
+Проверяя значение `index` определенного элемента, можно отображать другое состояние загрузки для элемента в зависимости от того, был ли сделан запрос на получение новых записей и загружается ли все еще элемент.
+
+Пример:
+
+```js
+const Row = ({ index, style }) => {
+  const itemLoading = index === items.length;
+
+  if (itemLoading) {
+      // Возвращаем информацию о состоянии загрузки
+  } else {
+      // Возвращаем элемент
+  }
+};
+```
+
+## Избыточное сканирование
+
+Так как элементы в виртуализированном списке сменяются, только когда пользователь прокручивает список, перед отображением новых записей на короткое время может отображаться пустое пространство. Чтобы увидеть это, попробуйте быстро прокрутить любой список в предыдущих примерах в данном руководстве.
+
+Чтобы повысить удобство для пользователей, работающих с виртуализированными списками, библиотека `react-window` позволяет выполнять избыточное сканирование элементов с использованием свойства `overscanCount`. С помощью этого свойства можно указать, какое количество элементов, находящихся за пределами видимого «окна», нужно всегда отображать.
+
+```jsx
+<FixedSizeList
+  //...
+  overscanCount={4}
+>
+  {...}
+</FixedSizeList>
+```
+
+Свойство `overscanCount` работает как для компонента `FixedSizeList`, так и для компонента `VariableSizeList`; по умолчанию оно имеет значение 1. В зависимости от величины списка и размера каждого элемента, выполняя избыточное сканирование нескольких записей, можно предотвратить заметное мигание пустого пространства, когда пользователь прокручивает список. Однако избыточное сканирование слишком большого количества записей может снизить производительность. Весь смысл виртуализированного списка в том, чтобы использовать только то количество записей, которое можно отображать для пользователя в тот или ной момент времени, поэтому старайтесь выполнять избыточное сканирование для минимально возможного количества элементов.
+
+В компонентах `FixedSizeGrid` и `VariableSizeGrid` можно управлять количеством столбцов и строк, для которых необходимо выполнять избыточное сканирование. Для этого используют свойства `overscanColumnsCount` и `overscanRowsCount` соответственно.
+
+## Вывод
+
+Если вы не знаете, с чего начать виртуализацию списков и таблиц в приложении, выполните указанные ниже действия.
+
+1. Измерьте производительность рендеринга и прокрутки. В [этой статье](https://addyosmani.com/blog/react-window/) рассказывается, как с помощью [измерителя FPS](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second) в Chrome DevTools оценить эффективность рендеринга элементов в списке.
+2. Добавьте библиотеку `react-window` для работы с длинными списками или таблицами, снижающими производительность.
+3. Если вам нужны функции, не поддерживаемые в библиотеке `react-window`, и вы не можете самостоятельно реализовать их, попробуйте использовать библиотеку [`react-virtualized`](https://github.com/bvaughn/react-virtualized).
+4. Если нужно выполнять отложенную загрузку элементов по мере прокручивания списка пользователем, вложите виртуализированный список в элемент `react-window-infinite-loader`.
+5. Используя свойство `overscanCount` для списков (или свойства `overscanColumnsCount` и `overscanRowsCount` для таблиц), можно предотвратить мигание пустого содержимого. Не выполняйте избыточное сканирование для слишком большого количества записей, так как это снизит производительность.
diff --git a/src/site/content/ru/reliable/http-cache/index.md b/src/site/content/ru/reliable/http-cache/index.md
new file mode 100644
index 00000000000..5d43f6295c0
--- /dev/null
+++ b/src/site/content/ru/reliable/http-cache/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: Предотвращение ненужных сетевых запросов с помощью кэша HTTP
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-17
+description: Как избежать ненужных сетевых запросов? Первое из доступных средств — кэш HTTP браузера. Это не самый мощный и гибкий подход, и он дает ограниченный контроль над сроком жизни кэшированных ответов. Тем не менее он эффективен, поддерживается во всех браузерах и для его настройки не требуется особых усилий.
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+Получать ресурсы по сети медленно и дорого.
+
+- При получении больших ответов требуется выполнять много операций обмена данными между браузером и сервером.
+- Страница не загрузится, пока не будут полностью загружены все ее [критически важные ресурсы](https://developers.google.com/web/fundamentals/performance/critical-rendering-path).
+- Если кто-то посещает ваш сайт, используя тарифный план мобильной сети с ограниченным количеством трафика, то для него каждый ненужный сетевой запрос — пустая трата денег.
+
+Как избежать ненужных сетевых запросов? Первое из доступных средств — кэш HTTP браузера. Это не самый мощный и гибкий подход, и он дает ограниченный контроль над сроком жизни кэшированных ответов. Тем не менее он эффективен, поддерживается во всех браузерах и для его настройки не требуется особых усилий.
+
+В этом руководстве рассказывается об основных принципах реализации эффективного кэширования HTTP.
+
+## Совместимость браузеров {: #browser-compatibility }
+
+На самом деле не существует единого API, называемого HTTP Cache (кэшем HTTP). Это общее название коллекции API веб-платформы. Эти API поддерживаются во всех браузерах:
+
+- [`Cache-Control;`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag;`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified;`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## Принцип работы кэша HTTP {: #overview }
+
+Все HTTP-запросы, создаваемые браузером, сначала поступают в кэш браузера, чтобы проверить, имеются ли допустимые кэшированные ответы, которые можно использовать для выполнения запроса. Если нужный ответ есть, он будет считан из кэша. Это позволяет уменьшить задержки в сети и затраты на передачу данных.
+
+Порядок работы кэша HTTP определяется сочетанием [заголовков запросов](https://developer.mozilla.org/docs/Glossary/Request_header) и [заголовков ответов](https://developer.mozilla.org/docs/Glossary/Response_header). В идеальном сценарии вы сможете контролировать и код веб-приложения (от которого зависят заголовки запросов), и конфигурацию веб-сервера (от которого зависят заголовки ответов).
+
+Более глубокий концептуальный обзор см. в статье MDN «[HTTP-кеширование](https://developer.mozilla.org/docs/Web/HTTP/Caching)».
+
+## Заголовки запросов: использование параметров, применяемых по умолчанию (в обычных случаях) {: #request-headers }
+
+Несмотря на то что в исходящие запросы веб-приложения следует включать ряд важных заголовков, при создании запросов браузер почти всегда самостоятельно настраивает заголовки от вашего имени. Создавая заголовки запросов, влияющих на проверку актуальности, например [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) и [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since), браузер руководствуется собственными оценками текущих значений в кэше HTTP.
+
+Это хорошо, потому что вы можете включать нужные теги, например `<img src="мое_изображение.png">`, в HTML-код, а браузер автоматически позаботится о кэшировании HTTP без дополнительных усилий с вашей стороны.
+
+{% Aside %} Разработчикам, которым требуется больший контроль над кэшем HTTP в своих веб-приложениях, доступна альтернатива — вы можете «раскрыть» уровень и вручную использовать [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API), передавая ему объекты [`Request`](https://developer.mozilla.org/docs/Web/API/Request) с набором переопределений [`cache`](https://developer.mozilla.org/docs/Web/API/Request/cache). Однако эта тема выходит за рамки данного руководства. {% endAside %}
+
+## Заголовки ответов: настройка веб-сервера {: #response-headers }
+
+Самая важная часть настройки кэширования HTTP — это заголовки, которые веб-сервер добавляет к каждому исходящему ответу. Все указанные ниже заголовки влияют на эффективность кэширования.
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control). Сервер может возвратить директиву `Cache-Control`, чтобы указать, каким образом и на какой срок браузер и другие промежуточные кэши должны кэшировать тот или иной ответ.
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag). Когда браузер находит кэшированный ответ с истекшим сроком действия, он может отправить на сервер небольшой токен (обычно хэш содержимого файла), чтобы проверить, не изменился ли файл. Если сервер возвращает такой же токен, это означает, что файл не изменился, и повторно загружать его не нужно.
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Этот заголовок используется для той же цели, что и заголовок `ETag`, но для него применяется стратегия на основе времени, позволяющая определить, изменился ли ресурс (в отличие от стратегии на основе содержимого, применяемой для заголовка `ETag`).
+
+В некоторых веб-серверах имеются встроенные средства, настраивающие такие заголовки по умолчанию, в то время как другие веб-серверы полностью пропускают заголовки, если явно не настроить их. *Порядок* настройки заголовков сильно зависит от того, какой веб-сервер вы используете. Точные сведения о настройке см. в документации по используемому вами серверу.
+
+Чтобы не тратить время на поиск, воспользуйтесь приведенными ниже ссылками на инструкции по настройке нескольких популярных веб-серверов.
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+Если заголовки ответов `Cache-Control` не обрабатываются, это не значит, что кэширование HTTP отключено. Вместо этого браузер [эффективно прогнозирует](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness), какие действия при кэшировании лучше всего подходят для контента того или иного типа. Скорее всего вам потребуется больший контроль, чем обеспечивает эта функция, поэтому вам придется настроить заголовки ответов.
+
+## Какие значения заголовков ответов использовать {: #response-header-strategies }
+
+При настройке заголовков ответов веб-сервера следует учитывать два важных сценария.
+
+### Долгосрочное кэширование для URL-адресов со сведениями о версиях {: #versioned-urls }
+
+{% Details %} {% DetailsSummary 'h4' %} Как URL-адреса со сведениями о версиях могут упростить стратегию кэширования Использовать URL-адреса со сведениями о версиях — хороший подход, так как он упрощает аннулирование кэшированных ответов. {% endDetailsSummary %} Предположим, ваш сервер сообщает браузерам, что нужно кэшировать файл CSS на 1 год (<code>Cache-Control: max-age=31536000</code>), но ваш дизайнер только что создал экстренное обновление, которое нужно немедленно развернуть. Как уведомить браузеры о том, что необходимо обновить «устаревший» кэшированный файл? Вы не сможете сделать это (не изменив, по крайней мере, URL-адрес ресурса). После того, как браузер кэширует ответ, кэшированная версия используется до тех пор, пока она не перестанет быть актуальной согласно значениям параметров <code>max-age</code> или <code>expires</code> либо пока она не будет удалена из кэша по какой-либо другой причине, например если пользователь очистит кэш браузера. В результате может получиться так, что при создании страницы для разных пользователей будут использоваться разные версии файла: для пользователей, которые только что получили ресурс, будет использоваться новая версия, а для пользователей, у которых кэширована более ранняя (но все еще действующая) копия, будет использоваться старая версия ответа. Как использовать лучшее из обоих «миров» — кэширование на стороне клиента и быстрые обновления? Нужно изменить URL-адрес ресурса и сделать так, чтобы пользователь загрузил новый ответ при изменении содержимого этого ответа. Обычно для этого внедряют отпечаток файла или номер версии в имя файла, например так: <code>style.x234dff.css</code>. {% endDetails %}
+
+При ответах на запросы, связанные с URL-адресами, которые содержат «[отпечаток](https://en.wikipedia.org/wiki/Fingerprint_(computing))» или информацию о версии и для которых не предполагается изменять содержимое, добавляйте к ответам заголовок `Cache-Control: max-age=31536000`.
+
+После настройки этого значения сервер сообщит браузеру, что если последнему потребуется загрузить ресурс по тому же URL-адресу в течение следующего года (31 536 000 секунд, максимальное поддерживаемое значение), он может использовать значение, которое хранится в кэше HTTP и не отправлять сетевой запрос на ваш веб-сервер. Это здорово — вы повысили надежность и скорость, исключив ряд сетевых операций.
+
+С помощью средств сборки, например webpack, можно [автоматизировать процесс](https://webpack.js.org/guides/caching/#output-filenames) назначения хэш-отпечатков URL-адресам ваших ресурсов.
+
+{% Aside %} Кроме того, для дополнительной оптимизации можно добавить [свойство `immutable`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading) в заголовок `Cache-Control`, хотя некоторые браузеры [будут игнорировать его](https://www.keycdn.com/blog/cache-control-immutable#browser-support). {% endAside %}
+
+### Повторная URL-адресов без сведений о версиях на сервере {: #unversioned-urls }
+
+К сожалению, не во всех URL-адресах, используемых для загрузки ресурсов, имеется информация о версии. Например, если у вас нет возможности добавить этап сборки перед развертыванием веб-приложения, вам не удается включать хэши в URL-адреса ресурсов. Каждое веб-приложение работает с HTML-файлами, а в этих файлах никогда (или почти никогда) не содержатся сведения о версиях, так как никто не будет использовать ваше приложение, если для этого нужно будет переходить примерно по такому URL-адресу: `https://example.com/index.34def12.html`. Так что же можно сделать при использовании этих URL-адресов?
+
+Это один из сценариев, в которых нужно признать поражение. Только кэширования HTTP недостаточно, чтобы полностью отказаться от передачи данных по сети. (Но не беспокойтесь, скоро вы узнаете о [служебных сценариях](/service-workers-cache-storage/), с помощью которых можно снова будет взять ситуацию под контроль). Тем не менее вы можете выполнить несколько действий и убедиться, что сетевые запросы выполняются максимально быстро и эффективно.
+
+С помощью указанных ниже значений заголовка `Cache-Control` можно точно указать, где и каким образом следует кэшировать URL-адреса без сведений о версиях.
+
+- `no-cache`. Это значение указывает браузеру, что он должен выполнять проверку на сервере каждый раз перед использованием кэшированного контента для соответствующего URL-адреса.
+- `no-store`. Это значение указывает браузеру и другим промежуточным кэшам (например, CDN) никогда не сохранять никакие версии файла.
+- `private`. Браузерам разрешено кэшировать файл, а промежуточным кэшам — нет.
+- `public`. Ответ можно хранить в любом кэше.
+
+Изучите раздел «[Приложение: блок-схема заголовка `Cache-Control`](#flowchart)», в котором наглядно представлен процесс принятия решения об использовании тех или иных значений заголовка `Cache-Control`. Кроме того, обратите внимание на то, что для заголовка `Cache-Control` можно использовать список директив, разделенных запятыми. См. раздел «<a href="#examples" data-md-type="link">Приложение: примеры заголовка `Cache-Control`</a>».
+
+Наряду с этим может быть полезно настроить один из двух дополнительных заголовков ответов — [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) или [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified). Как упоминалось в разделе «[Заголовки ответов](#response-headers)», заголовки `ETag` и `Last-Modified` используются для одной цели: определить, нужно ли браузеру повторно загружать кэшированный файл с истекшим сроком действия. Рекомендуется использовать заголовок `ETag`, так как он позволяет получать более точные результаты.
+
+{% Details %} {% DetailsSummary 'h4' %} Пример заголовка ETag {% endDetailsSummary %} Предположим, что с момента первоначального получения ресурса прошло 120 секунд, и браузер инициировал новый запрос для того же ресурса. Сначала браузер проверяет кэш HTTP и находит предыдущий ответ. К сожалению, браузер не может использовать предыдущий ответ, потому что срок действия последнего истек. На этом этапе браузер может отправить новый запрос и получить новый полный ответ. Однако это неэффективно, потому что если ресурс не изменился, нет причин загружать информацию, которая уже находится в кэше. Для решения этой проблемы предназначены токены проверки, которые указывают в заголовке <code>ETag</code>. Сервер генерирует и возвращает произвольный токен, который обычно представляет собой хэш или другой отпечаток содержимого файла. Браузеру не нужна информация о том, каким образом был создан отпечаток; ему достаточно отправить этот отпечаток на сервер при следующем запросе. Если отпечаток остался прежним, это значит, что ресурс не изменился, и браузер может не загружать его. {% endDetails %}
+
+После настройки заголовка `ETag` или `Last-Modified` запросы на повторную проверку будут выполняться намного эффективнее. В конечном итоге они будут запускать заголовок запроса [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since) или [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match), о которых мы говорили в разделе «[Заголовки запросов](#request-headers)».
+
+Когда на правильно настроенный веб-сервер поступают запросы с этими заголовками, он может проверить, соответствует ли версия ресурса, хранящегося в кэше HTTP браузера, последней версии на веб-сервере. Если версии совпадают, сервер может отправить HTTP-ответ [`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304), что эквивалентно фразе «Продолжайте использовать контент, который у вас уже есть». При отправке ответов такого типа требуется передавать очень мало данных, поэтому такие операции обычно выполняются намного быстрее, чем передача запрошенного ресурса.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="Схема, на которой показаны клиент, запрашивающий ресурс, и сервер, отвечающий с использованием заголовка 304.", width="474", height="215" %} <figcaption> Браузер запрашивает файл <code>/file</code> с сервера и включает в запрос заголовок <code>If-None-Match</code>, тем самым сообщая серверу, что полный файл нужно возвращать, только если заголовок <code>ETag</code> файла на сервере не соответствует значению <code>If-None-Match</code> в браузере. В данном случае два значения совпали, поэтому сервер возвращает ответ <code>304 Not Modified</code> с инструкциями о том, сколько еще следует хранить файл в кэше (<code>Cache-Control: max-age=120</code>). </figcaption></figure>
+
+## Сводка {: #summary }
+
+Кэш HTTP — эффективный способ повысить производительность при загрузке данных, так как он позволяет уменьшить количество ненужных сетевых запросов. Он поддерживается во всех браузерах и для его настройки не требуются особые усилия.
+
+Для начала можно использовать указанные ниже конфигурации заголовка `Cache-Control`.
+
+- `Cache-Control: no-cache` — для ресурсов, которые следует повторно проверять на сервере перед каждым использованием.
+- `Cache-Control: no-store` — для ресурсов, которые никогда не нужно кэшировать.
+- `Cache-Control: max-age=31536000` — для ресурсов со сведениями о версиях.
+
+С помощью заголовков `ETag` и `Last-Modified` можно эффективнее проверять ресурсы с истекшим сроком действия в кэше.
+
+{% Aside 'codelab' %} Воспользуйтесь [практическим занятием по кэшу HTTP](/codelab-http-cache), чтобы потренироваться работать с заголовками `Cache-Control` и `ETag` на веб-сервере Express. {% endAside %}
+
+## Дополнительные сведения {: #learn-more }
+
+Если вам недостаточно основных сведений по использованию заголовка `Cache-Control`, прочитайте руководство Джейка Арчибальда (Jake Archibald) «[Рекомендации по кэшированию и соображения по максимальному возрасту данных](https://jakearchibald.com/2016/caching-best-practices/)» (Caching best practices &amp; max-age gotchas).
+
+Рекомендации о том, как оптимизировать использование кэша для повторных посетителей см. в статье «[Любите кэш](/love-your-cache)» (Love your cache).
+
+## Приложение: дополнительные советы {: #tips }
+
+Если у вас есть время, можно оптимизировать использование кэша HTTP указанными ниже способами.
+
+- Использование согласованных URL-адресов. Если вы передаете один и тот же контент по разным URL-адресам, клиенты будут получать и сохранять этот контент несколько раз.
+- Разделение данных. Если часть ресурса (например, файл CSS) обновляется часто, а остальная часть файла (например, код библиотеки) — нет, попробуйте отделить часто обновляемый код и разместить его в отдельном файле. Для часто обновляемого кода используйте стратегию краткосрочного кэширования, а для кода, который изменяется редко, — стратегию долгосрочного кэширования.
+- Если в используемой вами политике заголовка `Cache-Control` допускается некоторая степень устаревания данных, попробуйте использовать новую директиву [`stale-while-revalidate`](/stale-while-revalidate/).
+
+## Приложение: блок-схема заголовка `Cache-Control` {: #flowchart }
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="Блок-схема", width="595", height="600" %}
+
+## Приложение: примеры заголовка `Cache-Control` {: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Значение заголовка <code>Cache-Control</code>
+</th>
+        <th>Пояснение</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>Ответ разрешено кэшировать в браузерах и промежуточных кэшах на срок до 1 дня (60 секунд x 60 минут x 24 часа).</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>Ответ разрешено кэшировать в браузерах (но не в промежуточных кэшах) на срок до 10 минут (60 секунд x 10 минут).</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>Ответ разрешено хранить в любых кэшах в течение 1 года.</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>Ответ запрещено кэшировать; следует получать его полностью при каждом запросе.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/ru/reliable/index.md b/src/site/content/ru/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/ru/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/ru/reliable/offline-cookbook/index.md b/src/site/content/ru/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..f31dd83e237
--- /dev/null
+++ b/src/site/content/ru/reliable/offline-cookbook/index.md
@@ -0,0 +1,617 @@
+---
+layout: post
+title: 'Офлайн-приложения: сборник рекомендаций'
+description: Распространенные советы о том, как обеспечить работу приложения в офлайн-режиме.
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+Когда мы оставили попытки решить проблему работы приложений в офлайн-режиме и решили дать инструменты для этого самим разработчикам, то на свет появились [сервис-воркеры](/service-workers-cache-storage/). Они позволяют управлять кешированием и обработкой запросов, тем самым открывая возможности для реализации собственных паттернов. Мы рассмотрим несколько возможных паттернов по отдельности, но на практике вы, вероятно, будете комбинировать их друг с другом в зависимости от URL-адреса и контекста.
+
+Увидеть эти паттерны в действии можно в демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/), а в [этом видео](https://www.youtube.com/watch?v=px-J9Ghvcx4) показано их влияние на производительность.
+
+## Кеширование: когда сохранять ресурсы
+
+[Сервис-воркеры](/service-workers-cache-storage/) позволяют обрабатывать запросы независимо от кеширования, поэтому я продемонстрирую каждый из этих аспектов по отдельности. Во-первых, что касается кеширования: когда его следует выполнять?
+
+### При установке: в качестве зависимости {: #on-install-as-dependency }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="При установке: в качестве зависимости.", width="800", height="498" %} <figcaption>При установке: в качестве зависимости.</figcaption></figure>
+
+Сервис-воркеры поддерживают событие `install`, при помощи которого можно подготовить все необходимое для обработки других событий. Во время его обработки предыдущая версия сервис-воркера продолжает работать и выдавать страницы, так что не делайте ничего, что могло бы этому помешать.
+
+**Подходит для:** CSS, изображений, шрифтов, JS, шаблонов… словом, для любого контента, который остается неизменным в рамках одной «версии» сайта.
+
+Речь идет о контенте, без которого сайт не сможет работать и который в аналогичном нативном приложении был бы включен в файл для начальной загрузки.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil` принимает обещание для определения продолжительности и успеха установки. В случае отклонения обещания установка считается неудачной и сервис-воркер не сохраняется (если работает более старая версия, она останется нетронутой). `caches.open()` и `cache.addAll()` возвращают обещания. Если загрузка какого-либо из ресурсов завершится неудачей, вызов `cache.addAll()` будет отклонен.
+
+В демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) этот метод используется для [кеширования статических ресурсов](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3).
+
+### При установке: не в качестве зависимости {: #on-install-not }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="При установке: не в качестве зависимости.", width="800", height="500" %} <figcaption>При установке: не в качестве зависимости.</figcaption></figure>
+
+Этот пример похож на предыдущий, но в данном случае загрузка ресурсов не задерживает окончание установки и не является обязательной для успешного завершения установки.
+
+**Подходит для:** объемных ресурсов, которые не требуется загружать сразу, например ресурсов для поздних уровней игры.
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // уровни 11–20
+        ();
+      return cache
+        .addAll
+        // основные ресурсы и уровни 1–10
+        ();
+    }),
+  );
+});
+```
+
+В примере выше обещание `cache.addAll` не передается в `event.waitUntil` для уровней 11–20, поэтому даже если оно будет отклонено, то игра будет работать в офлайн-режиме. Разумеется, вы должны будете учесть возможное отсутствие этих уровней и повторить попытку кеширования в случае их отсутствия.
+
+После окончания обработки событий сервис-воркер может быть завершен, в результате чего скачивание уровней 11–20 прервется и они не попадут в кеш. В будущем в подобных случаях, а также при скачивании более крупных файлов, таких как фильмы, можно будет использовать [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API). Сейчас этот API поддерживается только в форках Chromium.
+
+### При активации {: #on-activate }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="При активации.", width="800", height="500" %} <figcaption>При активации.</figcaption></figure>
+
+**Подходит для:** очистки и миграции данных.
+
+После того как новый сервис-воркер установлен и старый больше не используется, происходит активация нового сервис-воркера, сопровождающаяся событием `activate`. Поскольку старая версия нам больше не мешает, самое время выполнить [миграцию схемы в IndexedDB](/indexeddb-best-practices/) и удалить неиспользуемые кеши.
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Для удаления кеша необходимо вернуть true.
+            // Помните, что кеши являются общими
+            // для всего источника
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+Во время активации другие события, такие как `fetch`, помещаются в очередь, поэтому длительная активация потенциально может заблокировать загрузку страницы. Не перегружайте процесс активации и используйте его только для операций, которые *невозможно* выполнить во время работы старой версии.
+
+В демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) этот метод используется для [удаления старых кешей](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17).
+
+### В ответ на действие пользователя {: #on-user-interaction }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="В ответ на действие пользователя.", width="800", height="222" %} <figcaption>В ответ на действие пользователя.</figcaption></figure>
+
+**Подходит для:** ситуаций, когда перевести весь сайт в офлайн невозможно и вы разрешили пользователю выбирать контент для офлайн-просмотра, такой как видео с YouTube, статьи из Википедии, отдельные галереи с Flickr и т. д.
+
+Предоставьте пользователю кнопку «Прочитать позже» или «Сохранить для офлайн-просмотра». Когда пользователь нажимает на кнопку, загружайте из сети соответствующий ресурс и помещайте его в кеш.
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls возвращает JSON-массив
+        // URL-адресов ресурсов, от которых зависит статья
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+[API-интерфейс кеширования](https://developer.mozilla.org/docs/Web/API/Cache) доступен как из сервис-воркера, так и со страниц, поэтому для сохранения контента в кеш не обязательно использовать сервис-воркер.
+
+### При получении ответа по сети {: #on-network-response }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="При получении ответа по сети.", width="800", height="390" %} <figcaption>При получении ответа по сети.</figcaption></figure>
+
+**Подходит для:** часто обновляемых ресурсов, таких как почтовый ящик пользователя или содержание статьи. Также подходит для необязательного контента, такого как аватары, однако в этом случае проявляйте осторожность.
+
+Если запрашиваемый ресурс отсутствует в кеше, он загружается из сети, отправляется на страницу и одновременно записывается в кеш.
+
+При загрузке большого числа URL-адресов, например аватаров, избегайте чрезмерного увеличения хранилища вашего источника (origin). Если пользователю понадобится освободить место на диске, нежелательно, чтобы ваш сайт стал первым кандидатом. Старайтесь удалять из кеша ресурсы, которые вам больше не нужны.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+В целях экономии памяти тело запроса или ответа можно прочитать только один раз. Приведенный выше код создает при помощи [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) дополнительные копии, которые можно читать по отдельности.
+
+В демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) этот метод используется для [кеширования изображений из Flickr](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109).
+
+### При проверке устаревшего ресурса {: #stale-while-revalidate }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="При проверке устаревшего ресурса.", width="800", height="388" %} <figcaption>При проверке устаревшего ресурса.</figcaption></figure>
+
+**Подходит для:** частого обновления ресурсов, для которых наличие самой последней версии не является критичным. К таким ресурсам относятся аватары пользователей.
+
+При наличии используется кешированная версия, но для дальнейшего использования загружается новая.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+Аналогичным образом работает стратегия [stale-while-revalidate](https://www.mnot.net/blog/2007/12/12/stale) в HTTP.
+
+### При получении push-уведомления {: #on-push-message }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="При получении push-уведомления.", width="800", height="498" %} <figcaption>При получении push-уведомления.</figcaption></figure>
+
+Интерфейс [Push API](/push-notifications/) — еще одна функция, реализованная на основе сервис-воркеров. Она позволяет запускать сервис-воркер (и только его) в ответ на сообщение от службы уведомлений ОС, и это происходит даже в том случае, если у пользователя нет открытых вкладок с вашим сайтом. Для использования этой функциональности страница должна запросить разрешение пользователя.
+
+**Подходит для:** контента, связанного с уведомлениями: сообщений в чате, срочных новостей или электронных писем. Также подходит для немедленной синхронизации редко изменяющегося контента, такого как списки задач или события в календаре.
+
+{% YouTube '0i7YdSEQI1w' %}
+
+Наиболее распространенный конечный результат — уведомление, при нажатии открывающее соответствующую страницу. К моменту нажатия *крайне важно*, чтобы нужные ресурсы уже находились в кеше. Хотя при получении push-уведомления пользователь находится в сети, в момент нажатия на него ситуация может быть иной, поэтому важно сделать контент доступным в офлайн-режиме.
+
+Приведенный ниже код обновляет кеш перед отображением уведомления:
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Предположим, что все ресурсы, необходимые для
+    // рендеринга /inbox/, были кешированы ранее, например
+    // в рамках обработчика install.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### При фоновой синхронизации {: #on-background-sync }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="При фоновой синхронизации.", width="800", height="219" %} <figcaption>При фоновой синхронизации.</figcaption></figure>
+
+[Фоновая синхронизация](https://developer.chrome.com/blog/background-sync/) — еще одна функция, реализованная на основе сервис-воркеров. Она позволяет запрашивать синхронизацию в фоновом режиме как единоразово, так и с (крайне неточным) интервалом. Запускается только код сервис-воркера, и это происходит даже в том случае, если у пользователя нет открытой вкладки с вашим сайтом. Для использования этой функциональности страница должна запросить разрешение пользователя.
+
+**Подходит для:** обновлений, не требующих срочности, особенно если они происходят слишком часто, чтобы генерировать push-уведомление для каждого из них. Это могут быть посты в лентах соцсетей, новостные статьи и т. д.
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## Сохранение кеша {: #cache-persistence }
+
+Вашему источнику доступно определенное количество свободного места, которым он может распоряжаться по своему усмотрению. Это место распределяется между всеми хранилищами: [локальным хранилищем](https://developer.mozilla.org/docs/Glossary/IndexedDB), [IndexedDB](https://developer.mozilla.org/docs/Web/API/Storage), [File System Access](/file-system-access/) и, разумеется, [кешем](https://developer.mozilla.org/docs/Web/API/Cache).
+
+Объем не является фиксированным и зависит от устройства, а также от условий хранения данных. Узнать его можно следующим образом:
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Результат: <квота в байтах>
+  console.log(info.usage);
+  // Результат: <используемые данные в байтах>
+});
+```
+
+Однако, как и в случае с любым другим браузерным хранилищем, в случае нехватки места на устройстве ваши данные могут в любой момент быть удалены. К сожалению, браузер не сможет отличить фильмы, которые ни в коем случае нельзя удалять, от игры, до которой пользователю нет дела.
+
+Чтобы обойти это ограничение, используйте интерфейс [StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager):
+
+```js
+// Со страницы:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Ура, данные сохранятся!
+  } else {
+   // Гарантировать сохранение данных не получится.
+});
+```
+
+Разумеется, пользователь должен будет предоставить разрешение. Для этого используйте Permissions API.
+
+Важно, чтобы пользователь участвовал в этом процессе, поскольку теперь он сможет управлять удалением данных. Если на устройстве начнет заканчиваться место и удаление необязательных данных не поможет решить проблему, то именно пользователь будет решать, какие данные удалить, а какие оставить.
+
+Для этого необходимо, чтобы при анализе расхода пространства операционные системы отображали «защищенные» хранилища наравне с нативными приложениями, а не объединяли все пространство, используемое браузером, в один пункт.
+
+## Советы по выдаче ресурсов: как обрабатывать запросы {: #serving-suggestions }
+
+Неважно, сколько ресурсов вы храните в кеше: они не будут использоваться сервис-воркером, пока вы не определите условия для их использования. Вот несколько паттернов для обработки запросов:
+
+### Только кеш {: #cache-only }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="Только кеш.", width="800", height="272" %} <figcaption>Только кеш.</figcaption></figure>
+
+**Подходит для:** любого контента, который остается неизменным в рамках одной «версии» сайта. Такие ресурсы должны кешироваться во время события install, поэтому должны быть доступны в кеше.
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Если в кеше не будет найдено совпадение, то ответ
+  // будет выглядеть как ошибка соединения
+  event.respondWith(caches.match(event.request));
+});
+```
+
+…однако обычно этот случай не требуется обрабатывать отдельно, поскольку для него подходит стратегия [Кеш, в случае неудачи — сеть](#cache-falling-back-to-network).
+
+### Только сеть {: #network-only }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="Только сеть.", width="800", height="272" %} <figcaption>Только сеть.</figcaption></figure>
+
+**Подходит для:** запросов, не имеющих офлайн-эквивалента, таких как оповещения аналитики или запросы, отличные от GET.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // или вообще не вызывайте event.respondWith; в этом
+  // случае используется стандартное поведение браузера
+});
+```
+
+…однако обычно этот случай не требуется обрабатывать отдельно, поскольку для него подходит стратегия [Кеш, в случае неудачи — сеть](#cache-falling-back-to-network).
+
+### Кеш, в случае неудачи — сеть {: #cache-falling-back-to-network }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="Кеш, в случае неудачи — сеть.", width="800", height="395" %} <figcaption>Кеш, в случае неудачи — сеть.</figcaption></figure>
+
+**Походит для:** приложений, ориентированных в первую очередь на офлайн-работу. В таких случаях именно эта стратегия будет использоваться для большинства запросов. Другие паттерны будут применяться в порядке исключения на основании типа входящего запроса.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+Для кешированных ресурсов будет применяться паттерн «только кеш», а для некешированных — «только сеть» (сюда относятся все запросы, отличные от GET, поскольку они не допускают кеширование).
+
+### Приоритизация по скорости {: #cache-and-network-race }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="Приоритизация по скорости.", width="800", height="427" %} <figcaption>Приоритизация по скорости.</figcaption></figure>
+
+**Подходит для:** небольших ресурсов, при загрузке которых очень важна скорость на устройствах с медленным доступом к диску.
+
+При использовании некоторых сочетаний устаревших жестких дисков, антивирусного ПО и широкополосных интернет-соединений загрузка ресурсов по сети происходит быстрее, чем обращение к диску. Однако имейте в виду, что загрузка по сети контента, который уже сохранен локально, может повысить расход трафика.
+
+```js
+// Promise.race нам не подходит, так как отклоняется при
+// отклонении невыполненного обещания. Давайте напишем
+// свою функцию для одновременного выполнения:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // проверяем переданные promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // если одно из обещаний выполняется, выполняем текущее
+    promises.forEach((p) => p.then(resolve));
+    // если все обещания отклонены, то отклоняем текущее
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### Сеть, в случае неудачи — кеш {: #network-falling-back-to-cache }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="Сеть, в случае неудачи — кеш.", width="800", height="388" %} <figcaption>Сеть, в случае неудачи — кеш.</figcaption></figure>
+
+**Подходит для:** ресурсов, которые часто обновляются независимо от версии сайта: статей, аватаров, лент в социальных сетях и таблиц рекордов в играх (в качестве временного решения).
+
+При наличии сетевого подключения пользователи получают свежий контент, тогда как пользователи, находящиеся офлайн, получают кешированную версию. Если сетевой запрос завершается успешно, вероятно, следует [обновить запись в кеше](#on-network-response).
+
+Однако у такого подхода есть недостаток. Пользователи с нестабильным или медленным соединением будут вынуждены ожидать завершения запроса, вместо того чтобы сразу увидеть контент, сохраненный на устройстве. Чрезмерно долгое ожидание будет вызывать у пользователей раздражение. Для более оптимального решения см. следующий паттерн: [Кеш, затем сеть](#cache-then-network).
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### Кеш, затем сеть {: #cache-then-network }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="Кеш, затем сеть.", width="800", height="478" %} <figcaption>Кеш, затем сеть.</figcaption></figure>
+
+**Подходит для:** контента, который необходимо часто обновлять: статей, лент в социальных сетях и таблиц рекордов в играх.
+
+Страница запрашивает контент сразу из двух источников: из кеша и из сети. Сначала отображаются данные из кеша, а затем при получении данных из сети страница обновляется.
+
+В некоторых случаях (таких, как таблицы рекордов в играх) текущие данные можно безболезненно заменить новыми, но замена крупных фрагментов контента может приводить к проблемам. Не следует изменять контент в тот момент, когда пользователь читает его или взаимодействует с ним.
+
+Twitter добавляет новый контент над существующим и корректирует положение прокрутки, чтобы пользователь не замечал изменений. Это возможно благодаря тому, что Twitter в основном придерживается линейного порядка контента. В демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) я скопировал этот паттерн, для того чтобы как можно быстрее отображать контент на экране и в то же время обеспечить его оперативное обновление.
+
+**Код на странице:**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// загрузка свежих данных
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// загрузка кешированных данных
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // не перезаписываем новые данные из сети
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // данные из кеша не получены; сеть - наша последняя надежда:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**Код сервис-воркера:**
+
+Всегда следует обращаться к сети и одновременно с этим обновлять кеш.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+В демонстрации [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) я использовал для обхода ограничений [XHR вместо fetch](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3) и приспособил заголовок Accept, чтобы сообщать сервис-воркеру, откуда следует загружать ресурс ([код страницы](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70), [код сервис-воркера](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)).
+
+### Резервные ресурсы {: #generic-fallback }
+
+<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="Резервные ресурсы.", width="800", height="389" %} <figcaption>Резервные ресурсы.</figcaption></figure>
+
+Когда загрузить ресурс из кеша или из сети не удается, есть смысл предоставить резервный вариант.
+
+**Подходит для:** второстепенных изображений, таких как аватары; неудачных запросов POST; страниц, сообщающих о недоступности данных в офлайн-режиме.
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Пробуем загрузку из кеша
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // В случае неудачи обращаемся к сети
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // Если оба запроса завершились неудачно,
+        // показываем резервный ресурс:
+        return caches.match('/offline.html');
+        // У вас может быть много резервных ресурсов,
+        // выбираемых на основе URL-адреса и заголовков,
+        // например картинка силуэта лица для аватаров.
+      }),
+  );
+});
+```
+
+В качестве резервных следует указывать ресурсы, являющиеся [зависимостями при установке](#on-install-as-dependency).
+
+Если ваша страница отправляет письмо, то в случае неудачи сервис-воркер может сохранить его в папке «Исходящие» в IndexDB и уведомить об этом пользователя.
+
+### Разметка на стороне сервис-воркера {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="Разметка на стороне сервис-воркера", width="800", height="463" %} <figcaption>Разметка на стороне сервис-воркера.</figcaption></figure>
+
+**Подходит для:** страниц, для которых невозможно кешировать ответ с сервера.
+
+[Рендеринг страниц на сервере ускоряет работу сайта](https://jakearchibald.com/2013/progressive-enhancement-is-faster/), однако страницы могут включать динамические данные, для которых кеширование неуместно, такие как имя текущего пользователя. Если страница контролируется сервис-воркером, вы можете запрашивать данные в виде JSON и выполнять рендеринг локально, используя шаблон.
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## Объединение паттернов
+
+Вам не обязательно ограничиваться каким-то одним методом. Вероятнее всего, вы будете комбинировать их в зависимости от URL-адреса запроса. Например, в [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) используются следующие методы:
+
+- [кеширование при установке](#on-install-as-dependency) для статических элементов интерфейса и логики;
+- [кеширование при получении ответа по сети](#on-network-response) для изображений и данных Flickr;
+- [загрузка из кеша, а в случае неудачи — из сети](#cache-falling-back-to-network) для большинства запросов;
+- [загрузка из кеша, а затем из сети](#cache-then-network) для результатов поиска Flickr.
+
+Стратегию следует выбирать исходя из типа запроса:
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Разбор URL-адреса:
+  var requestURL = new URL(event.request.url);
+
+  // Обработка запросов к конкретному домену особым образом
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* комбинация паттернов */);
+    return;
+  }
+  // Маршрутизация для локальных URL-адресов
+  if (requestURL.origin == location.origin) {
+    // Обработка URL-адресов статей
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* другая комбинация паттернов */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* другая комбинация паттернов */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* другая комбинация паттернов */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Очень страшная ошибка', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // Паттерн по умолчанию
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+…и так далее.
+
+### Благодарности
+
+Авторы иконок:
+
+- [Код](http://thenounproject.com/term/code/17547/): buzzyrobot
+- [Календарь](http://thenounproject.com/term/calendar/4672/): Скотт Льюис
+- [Сеть](http://thenounproject.com/term/network/12676/): Бен Риццо
+- [SD-карта](http://thenounproject.com/term/sd-card/6185/): Томас Ле Бас
+- [Процессор](http://thenounproject.com/term/cpu/72043/): iconsmind.com
+- [Корзина для мусора](http://thenounproject.com/term/trash/20538/): trasnik
+- [Уведомление](http://thenounproject.com/term/notification/32514/): @daosme
+- [Макет сайта](http://thenounproject.com/term/layout/36872/): Mister Pixel
+- [Облако](http://thenounproject.com/term/cloud/2788/): П. Дж. Онори
+
+Кроме того, спасибо [Джеффу Поснику](https://twitter.com/jeffposnick) за исправление множества ошибок в статье.
+
+### Материалы для дальнейшего чтения
+
+- [Сервис-воркеры: введение](/service-workers-cache-storage/)
+- [Is Service Worker ready?](https://jakearchibald.github.io/isserviceworkerready/) — отслеживание состояния реализации в основных браузерах
+- [Обещания JavaScript: введение](/promises) — руководство по обещаниям
diff --git a/src/site/content/ru/ru.11tydata.js b/src/site/content/ru/ru.11tydata.js
new file mode 100644
index 00000000000..888b758a7af
--- /dev/null
+++ b/src/site/content/ru/ru.11tydata.js
@@ -0,0 +1,31 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/site/content/ru/secure/cross-origin-isolation-guide/index.md b/src/site/content/ru/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..42e087fcda1
--- /dev/null
+++ b/src/site/content/ru/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Руководство по включению межсайтовой изоляции
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: Межсайтовая изоляция позволяет использовать на веб-странице такие мощные функции, как SharedArrayBuffer. В этой статье объясняется, как включить межсайтовую изоляцию на сайте.
+description: Межсайтовая изоляция позволяет использовать на веб-странице такие мощные функции, как SharedArrayBuffer. В этой статье объясняется, как включить межсайтовую изоляцию на сайте.
+tags:
+  - security
+---
+
+В этом руководстве показано, как включить межсайтовую изоляцию, которая необходима для использования [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), [`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/) и [высокоточного таймера](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/).
+
+Прежде чем включать межсайтовую изоляцию, оцените, как она повлияет на рекламные места и другие межсайтовые ресурсы на вашем сайте.
+
+{% Details %} {% DetailsSummary %} Определите, где на вашем сайте используется функция `SharedArrayBuffer`
+
+Начиная с версии Chrome 92, функции, использующие `SharedArrayBuffer`, больше не смогут работать без межсайтовой изоляции. Если вы попали на эту страницу из-за сообщения о нежелательности использования `SharedArrayBuffer`, то, вероятно, сайт или один из встроенных в него ресурсов использует `SharedArrayBuffer`. Чтобы не нарушить работу компонентов сайта, сначала определите, где именно применяется эта функция.
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- Включите межсайтовую изоляцию, если хотите продолжать использование `SharedArrayBuffer`.
+- Если вы используете сторонний код, в котором присутствует `SharedArrayBuffer`, попросите стороннего поставщика внести изменения. {% endAside %}
+
+Если вы не знаете точно, где на сайте используется `SharedArrayBuffer`, воспользуйтесь одним из двух способов:
+
+- примените Chrome DevTools;
+- (дополнительно) соберите отчеты о нежелательных функциях.
+
+Если вы уже точно знаете, где используется `SharedArrayBuffer`, перейдите к разделу [«Анализ влияния межсайтовой изоляции»](#analysis).
+
+### Chrome DevTools
+
+С помощью [Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) можно проверить качество кода на сайте.
+
+1. [Откройте Chrome DevTools](https://developer.chrome.com/docs/devtools/open/) на странице, где может использоваться `SharedArrayBuffer`.
+2. Выберите панель **Console (Консоль)**.
+3. Если на странице используется `SharedArrayBuffer`, то отобразится следующее сообщение:
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. Имя файла и номер строки в конце сообщения (например, `common-bundle.js:535`) указывают на источник происхождения `SharedArrayBuffer`. Если это сторонняя библиотека, попросите ее разработчика устранить проблему. Если же это часть кода вашего сайта, включите межсайтовую изоляцию, как указано ниже.
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="Предупреждение в консоли DevTools об использовании SharedArrayBuffer без межсайтовой изоляции", width="800", height="163" %} <figcaption> Предупреждение в консоли DevTools об использовании SharedArrayBuffer без межсайтовой изоляции. </figcaption></figure>
+
+### (Дополнительно) Отчеты о нежелательных функциях
+
+В некоторых браузерах есть [функция отчетности о нежелательных API](https://wicg.github.io/deprecation-reporting/) на маршруте до указанной конечной точки.
+
+1. [Настройте сервер отчетов о нежелательных функциях и получите URL-адрес отчета](/coop-coep/#set-up-reporting-endpoint). Это можно сделать с помощью общедоступной службы или самостоятельно.
+2. Используя полученный URL-адрес, установите следующий HTTP-заголовок для страниц, на которых может применяться `SharedArrayBuffer`.
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. Как только заголовок начнет передаваться дальше, конечная точка, которую вы зарегистрировали, станет собирать отчеты о нежелательных функциях.
+
+Пример реализации приведен здесь: [https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me).
+
+{% endDetails %}
+
+## Анализ влияния межсайтовой изоляции {: #analysis}
+
+Правда было бы здорово оценивать влияние межсайтовой изоляции, не нарушая работу сайта? Именно это позволяют сделать HTTP-заголовки [`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) и [`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy).
+
+1. Задайте заголовок [`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document) в документе верхнего уровня. Как следует из названия, этот заголовок только лишь отправляет отчеты о влиянии, которое `COOP: same-origin` **может** оказать на сайт, но не отключает связь с всплывающими окнами.
+2. Настройте функцию отчетности и веб-сервер для получения и сохранения отчетов.
+3. Задайте заголовок [`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources) в документе верхнего уровня. Именно этот заголовок позволяет, не нарушая работу сайта, проследить, как включение `COEP: require-corp` повлияет на него. Вы можете настроить этот заголовок для отправки отчетов на тот же сервер отчетов, который настроили на предыдущем шаге.
+
+{% Aside %} Можно также [включить столбец **Domain (Домен)**](https://developer.chrome.com/docs/devtools/network/#information) на панели **Network (Сеть)** в Chrome DevTools, чтобы получить общее представление о том, какие ресурсы будут затронуты. {% endAside %}
+
+{% Aside 'caution' %}
+
+После включения межсайтовой изоляции загрузка ресурсов из разных источников, на которую вы не давали явного разрешения, будет заблокирована, а документ верхнего уровня не сможет взаимодействовать со всплывающими окнами.
+
+Мы изучали разные способы масштабирования `Cross-Origin-Resource-Policy`, поскольку межсайтовая изоляция требует явного разрешения на загрузку для всех вспомогательных ресурсов. В итоге было решено пойти от обратного и ввести [новый «безучетный» (credentialless) режим COEP](https://github.com/mikewest/credentiallessness/), который позволяет загружать ресурсы без заголовка CORP, удаляя все их учетные данные. Мы еще окончательно не определились с тем, как это должно работать, но надеемся, что данный режим снизит для вас трудоемкость проверки того, что вспомогательные ресурсы отправляют заголовок `Cross-Origin-Resource-Policy`.
+
+Кроме того, известно, что заголовок `Cross-Origin-Opener-Policy: same-origin` нарушит те интеграции, которым требуется взаимодействие между окнами из разных источников, например OAuth и платежные формы. Чтобы хотя бы частично решить эту проблему, мы изучаем возможность [ослабления условия](https://github.com/whatwg/html/issues/6364) включения межсайтовой изоляции для `Cross-Origin-Opener-Policy: same-origin-allow-popups`, что позволит сохранить связь с окном, которое открылось самостоятельно.
+
+Если вам не удается включить межсайтовую изоляцию из-за этих проблем, рекомендуем [зарегистрироваться в пробной версии источника](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) и подождать, пока не появятся новые режимы. Пробная версия источника будет поддерживаться до тех пор, пока не появятся такие режимы.
+
+{% endAside %}
+
+## Снижение влияния межсайтовой изоляции
+
+Если вы уже определили, какие ресурсы затронет межсайтовая изоляция, придерживайтесь следующих общих рекомендаций о том, как решить проблему с этими ресурсами:
+
+1. Для таких межсайтовых ресурсов, как изображения, скрипты, таблицы стилей, блоки iframe и другие, задайте заголовок [`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin). Для локальных ресурсов сайта установите заголовок [`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin).
+2. Добавьте атрибут `crossorigin` в тег HTML документа верхнего уровня, если ресурс загружается с помощью [CORS](/cross-origin-resource-sharing/) (пример: `<img src="example.jpg" crossorigin>`).
+3. Если межсайтовые ресурсы, загруженные в блоки iframe, включают в себя еще один уровень блоков iframe, то рекурсивно выполните действия, описанные в этом разделе, прежде чем двигаться дальше.
+4. Убедившись, что все межсайтовые ресурсы имеют разрешение на загрузку, установите заголовок `Cross-Origin-Embedder-Policy: require-corp` для межсайтовых ресурсов, которые загружаются в блоки iframe.
+5. Убедитесь в отсутствии межсайтовых всплывающих окон, использующих функцию `postMessage()`. После включения межсайтовой изоляции они точно перестанут работать. Переместите эту функциональность в другой документ, на который не действует межсайтовая изоляция, или используйте другой способ передачи данных (например, HTTP-запросы).
+
+## Включение межсайтовой изоляции
+
+Если вы уже определили, как снизить влияние межсайтовой изоляции, придерживайтесь следующих общих рекомендаций о том, как включить межсайтовую изоляцию:
+
+1. Задайте заголовок `Cross-Origin-Opener-Policy: same-origin` в документе верхнего уровня. Если ранее вы уже задали заголовок `Cross-Origin-Opener-Policy-Report-Only: same-origin`, замените его. Это заблокирует обмен данными между документом верхнего уровня и его всплывающими окнами.
+2. Задайте заголовок `Cross-Origin-Embedder-Policy: require-corp` в документе верхнего уровня. Если ранее вы уже задали заголовок `Cross-Origin-Embedder-Policy-Report-Only: require-corp`, замените его. Это заблокирует загрузку межсайтовых ресурсов, не имеющих явного разрешения на загрузку.
+3. Убедитесь, что `self.crossOriginIsolated` возвращает `true` в консоли—это означает, что на странице включена межсайтовая изоляция.
+
+{% Aside 'gotchas' %}
+
+Включить межсайтовую изоляцию на локальном сервере затруднительно, так как обычные серверы не поддерживают отправку заголовков. Вы можете запустить Chrome с флагом командной строки `--enable-features=SharedArrayBuffer`, чтобы включить использование `SharedArrayBuffer` без межсайтовой изоляции. Узнайте, [как запускать Chrome с флагом командной строки на соответствующих платформах](https://www.chromium.org/developers/how-tos/run-chromium-with-flags).
+
+{% endAside %}
+
+## Ресурсы
+
+- [Как изолировать сайт от других источников с помощью COOP и COEP](/coop-coep/)
+- [Обновления, связанные с SharedArrayBuffer, в версиях Chrome 88 для Android и Chrome 92 для ПК](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/ru/secure/cross-origin-resource-sharing/index.md b/src/site/content/ru/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..97502a2c6cc
--- /dev/null
+++ b/src/site/content/ru/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Совместное использование ресурсов между разными источниками (CORS)
+subhead: Безопасный доступ к ресурсам на других доменах
+authors:
+  - kosamari
+date: 2018-11-05
+description: Политика одинакового источника блокирует в браузере чтение ресурса из другого источника. Этот механизм не позволяет вредоносному сайту читать данные другого сайта, но он также препятствует правомерному применению. Что если вы захотите получить данные о погоде в другой стране? Включение CORS позволяет серверу сообщить браузеру, что ему разрешено использовать дополнительный источник.
+tags:
+  - security
+---
+
+Политика одинакового источника блокирует в браузере чтение ресурса из другого источника. Этот механизм не позволяет вредоносному сайту читать данные другого сайта, но он также препятствует правомерному применению. Что если вы захотите получить данные о погоде в другой стране?
+
+В современном веб-приложении приложение часто хочет получать ресурсы из другого источника. Например, вы хотите получить данные JSON из другого домена или загрузить изображения с другого сайта в элемент `<canvas>`.
+
+Другими словами, существуют **общедоступные ресурсы**, которые должны быть доступны для чтения всем, но политика одинакового источника блокирует эту возможность. Разработчики использовали обходные пути, такие как [JSONP](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about), но благодаря механизму **совместного использования ресурсов между разными источниками (CORS)** браузер может предоставлять страницам доступ к ресурсам другого домена.
+
+Включение **CORS** позволяет серверу сообщать браузеру, что ему разрешено использовать дополнительный источник.
+
+## Как работает запрос ресурса в Интернете?
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="запрос и ответ", width="668", height="327" %} <figcaption> Рисунок: иллюстрированный запрос клиента и ответ сервера</figcaption></figure>
+
+Браузер и сервер могут обмениваться данными по сети с помощью **протокола передачи гипертекста** (HTTP). HTTP определяет правила связи между запрашивающей стороной и респондентом, включая информацию, необходимую для получения ресурса.
+
+HTTP-заголовок используется для согласования типа обмена сообщениями между клиентом и сервером и применяется для определения доступа. И запрос браузера, и ответное сообщение сервера разделены на две части: **header (заголовок)** и **body (тело)**:
+
+### header
+
+Информация о сообщении, такая как тип сообщения или кодировка сообщения. Заголовок может включать в себя [различные сведения](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields), выраженные парами «ключ-значение». Заголовок запроса и заголовок ответа содержат разную информацию.
+
+{% Aside %} Важно отметить, что заголовки не могут содержать комментарии. {% endAside %}
+
+**Пример заголовка запроса**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+Вышеупомянутое эквивалентно высказыванию: «Я хочу получить в ответ HTML. Вот файл cookie, который у меня есть».
+
+**Пример заголовка ответа**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+Вышеупомянутое эквивалентно высказыванию: «Данные закодированы с помощью gzip. Не кешируйте это, пожалуйста».
+
+### body
+
+Само сообщение. Это может быть обычный текст, двоичное изображение, JSON, HTML и т. д.
+
+## Как работает CORS?
+
+Помните, что политика одинакового источника предписывает браузеру блокировать запросы между разными источниками. Если вы хотите получить общедоступный ресурс из другого источника, сервер, предоставляющий ресурсы, должен сообщить браузеру: «Данный источник запроса может получить доступ к моему ресурсу». Браузер запоминает это и разрешает совместное использование ресурсов между разными источниками.
+
+### Шаг 1: запрос клиента (браузера)
+
+Когда браузер делает запрос на другой источник, он добавляет заголовок `Origin` с текущим источником (схема, хост и порт).
+
+### Шаг 2: ответ сервера
+
+На стороне сервера, когда сервер видит этот заголовок и хочет разрешить доступ, он должен добавить к ответу заголовок `Access-Control-Allow-Origin` с указанием источника запроса (или `*` для разрешения любого источника).
+
+### Шаг 3: браузер получает ответ
+
+Когда браузер видит этот ответ с соответствующим заголовком `Access-Control-Allow-Origin`, браузер разрешает передачу данных ответа сайту клиента.
+
+## CORS в действии
+
+Вот крошечный веб-сервер, использующий Express.
+
+{% Glitch { id: 'cors-demo', path: 'server.js', height: 480 } %}
+
+Первая конечная точка (строка 8) не имеет установленного заголовка ответа, она просто отправляет файл в ответ.
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- Попробуйте следующую команду:
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+Вы должны увидеть сообщение об ошибке:
+
+```bash
+request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource.
+```
+
+Вторая конечная точка (строка 13) отправляет тот же файл в ответ, но добавляет в заголовок `Access-Control-Allow-Origin: *`. С консоли наберите:
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+На этот раз ваш запрос не должен блокироваться.
+
+## Учетные данные и CORS
+
+По соображениям конфиденциальности CORS обычно используется для «анонимных запросов», когда запрос не идентифицирует отправителя. Если вы хотите при использовании CORS отправлять файлы cookie (которые могут идентифицировать отправителя), необходимо добавить дополнительные заголовки к запросу и ответу.
+
+### Запрос
+
+Добавьте `credentials: 'include'` в параметры выборки, как показано ниже. Это включит файл cookie в запрос.
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### Ответ
+
+Для заголовка `Access-Control-Allow-Origin` необходимо указать конкретный источник (без подстановочного знака `*`), а для параметра `Access-Control-Allow-Credentials` следует установить значение `true`.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## Предварительные запросы для сложных HTTP-вызовов
+
+Если веб-приложению требуется сложный HTTP-запрос, браузер добавляет **[предварительный запрос](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)** в начало цепочки запросов.
+
+Спецификация CORS определяет **сложный запрос** как
+
+- запрос, использующий методы, отличные от GET, POST или HEAD;
+- запрос, который включает заголовки, отличные от `Accept`, `Accept-Language` или `Content-Language`;
+- запрос с `Content-Type` отличным от `application/x-www-form-urlencoded`, `multipart/form-data` или `text/plain`.
+
+Браузеры создают предварительный запрос, если это необходимо. Ниже показан запрос `OPTIONS`, который отправляется перед фактическим сообщением- запросом.
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+На стороне сервера приложение должно ответить на предварительный запрос информацией о методах, которые приложение принимает от этого источника.
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+Ответ сервера может также включать заголовок `Access-Control-Max-Age` для указания продолжительности кеширования результатов предварительного запроса (в секундах), чтобы клиенту не нужно было делать предварительный запрос каждый раз при отправке сложного запроса.
diff --git a/src/site/content/ru/secure/fixing-mixed-content/index.md b/src/site/content/ru/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..3b61637aee6
--- /dev/null
+++ b/src/site/content/ru/secure/fixing-mixed-content/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Исправление смешанного контента
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: Узнайте, как исправить на сайте ошибки, связанные со смешанным контентом, чтобы защитить пользователей и убедиться, что весь контент успешно загружается.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+Поддержка HTTPS на сайте — важный шаг к тому, чтобы защитить от атак как сам сайт, так и его посетителей, однако смешанный контент может свести на нет всю защиту. Браузеры все сильнее ограничивают использование небезопасного смешанного контента; об этом рассказано в статье [Что такое смешанный контент?](/what-is-mixed-content).
+
+В этом руководстве описаны методы и инструменты, при помощи которых можно устранить существующие проблемы, связанные со смешанным контентом, и предотвратить появление новых.
+
+## Обнаружение смешанного контента при помощи браузера
+
+Когда вы открываете в Google Chrome страницу по протоколу HTTPS, браузер предупреждает о смешанном контенте, выводя ошибки и предупреждения в консоль JavaScript.
+
+В статье [Что такое смешанный контент?](/what-is-mixed-content) вы найдете ряд примеров, а также иллюстраций того, как Chrome DevTools сообщает о проблемах.
+
+При открытии примера с [пассивным смешанным контентом](https://passive-mixed-content.glitch.me/) появятся предупреждения, показанные ниже. Если браузеру удается найти нужный контент по URL-адресу с `https`, он автоматически переходит на защищенное соединение и сообщает об этом.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="Предупреждения, показываемые в Chrome DevTools при обнаружении смешанного контента и переходе на защищенное соединение", width="800", height="294" %}</figure>
+
+[Активный смешанный контент](https://active-mixed-content.glitch.me/) блокируется с отображением предупреждения.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="Предупреждения, показываемые в Chrome DevTools при блокировке активного смешанного контента", width="800", height="304" %}</figure>
+
+Если для URL-адресов `http://` на вашем сайте показываются такие предупреждения, эти адреса необходимо исправить в исходном коде сайта. Чтобы вам было легче это сделать, рекомендуем составить список таких адресов, а также страниц, где они были найдены.
+
+{% Aside %} Ошибки и предупреждения, связанные со смешанным контентом, показываются только для просматриваемой страницы, а консоль JavaScript очищается каждый раз при переходе на новую страницу. Это значит, что для обнаружения ошибок вам придется просматривать каждую страницу сайта по отдельности. {% endAside %}
+
+### Обнаружение смешанного контента на сайте
+
+Смешанный контент можно искать непосредственно в исходном коде. Выполните в коде поиск по строке `http://` и найдите теги с атрибутами, содержащими URL-адреса HTTP. Обратите внимание, что наличие тегов `<a>`, чей атрибут `href` содержит адрес с  `http://`, обычно не указывает на наличие смешанного контента, но есть ряд важных исключений, которые будут рассмотрены далее.
+
+Если для публикации страниц на сайте используется система управления контентом (CMS), существует вероятность появления ссылок на небезопасные URL-адреса в коде страниц. Например, при вставке изображений вместо относительного пути может указываться полный URL-адрес. Такие ссылки нужно будет найти и исправить, отредактировав контент в CMS.
+
+### Исправление смешанного контента
+
+Если вы обнаружили в коде сайта ссылки на смешанный контент, вы можете устранить их, выполнив инструкции ниже.
+
+Если в консоли показывается сообщение о том, что при запросе ресурса произошел автоматический переход с HTTP на HTTPS, вы можете спокойно поменять `http://` на `https://` в URL-адресе ресурса, указанном в коде. Вы также можете проверить доступность ресурса, открыв во вкладке браузера соответствующий адрес и заменив `http://` на `https://` в адресной строке.
+
+Если ресурс недоступен по протоколу `https://`, вам следует рассмотреть один из следующих вариантов:
+
+- Укажите ссылку на тот же ресурс, размещенный на другом источнике, если это возможно.
+- Скачайте и разместите контент непосредственно у себя на сайте, если это разрешено законом.
+- Полностью удалите ресурс со своего сайта.
+
+После того как проблема устранена, откройте страницу, на которой вы изначально обнаружили ошибку, и убедитесь, что ошибка больше не появляется.
+
+### Остерегайтесь нестандартного использования тегов
+
+Нестандартное использование тегов на сайте может быть источником проблем. Например, при использовании тега `<a>` ошибок смешанного контента возникать обычно не должно, так как этот тег используется для обеспечения возможности перехода на другую страницу. Это означает, что такие теги, как правило, не требуют исправления. Однако некоторые скрипты галереи изображений переопределяют функциональность тега `<a>`: они загружают HTTP-ресурс, указанный в атрибуте `href`, и показывают его в лайтбоксе на странице, в результате чего возникает ошибка смешанного контента.
+
+## Обработка смешанного контента в условиях крупных сайтов
+
+Описанный выше ручной процесс подходит для сайтов небольшого размера, но при сопровождении крупных сайтов или сайтов с множеством отдельных команд разработчиков бывает сложно уследить за всем загружаемым контентом. В качестве решения вы можете настроить политику безопасности контента, чтобы браузер оповещал вас о смешанном контенте и вы не пропускали небезопасные ресурсы на страницах сайта.
+
+### Политики безопасности контента
+
+[Политики безопасности контента](/csp/) (CSP) — это многоцелевая функция браузера, помогающая управлять смешанным контентом в крупных масштабах. Механизм оповещения CSP можно использовать для отслеживания смешанного контента на сайте, а также для установки политик безопасности, защищающих пользователей путем блокировки смешанного контента или переключения на безопасное соединение.
+
+Чтобы включить для страницы эти функции, достаточно добавить заголовок `Content-Security-Policy` или `Content-Security-Policy-Report-Only` в ответ, отправляемый сервером. Кроме того, установить `Content-Security-Policy` (но **не** `Content-Security-Policy-Report-Only`) можно при помощи тега `<meta>` в разделе `<head>` вашей страницы.
+
+{% Aside %} Современные браузеры обеспечивают соблюдение всех политик безопасности контента, устанавливаемых сайтом. Если элементы `<meta>` или заголовки ответа, полученного от сервера, содержат несколько значений CSP, то они объединяются и рассматриваются как единая политика; то же самое касается и политик оповещения. При объединении политик они усиливают друг друга, то есть каждая последующая политика может только накладывать дополнительные ограничения на загрузку контента, но не ослаблять их. {% endAside %}
+
+### Обнаружение смешанного контента при помощи политики безопасности контента
+
+Политики безопасности контента можно использовать для сбора отчетов о смешанном контенте на сайте. Чтобы включить эту функцию, установите параметр `Content-Security-Policy-Report-Only`, добавив его в качестве заголовка ответа на сайте.
+
+Пример заголовка ответа:
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %} Заголовок ответа [report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) в ближайшее время будет признан устаревшим и заменен на [report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to). `report-to` в настоящее время поддерживается только в Chrome и Edge. Можно указать оба заголовка сразу; в этом случае `report-uri` будет игнорироваться, если браузер поддерживает `report-to`. {% endAside %}
+
+При посещении страниц вашего сайта браузер пользователя будет отправлять по адресу `https://example.com/reportingEndpoint` отчеты в формате JSON о любом контенте, нарушающем политику безопасности. В рассматриваемом случае отчет будет отправляться каждый раз, когда для загрузки субресурса используется протокол HTTP. Отчеты включают URL-адрес страницы, на которой произошло нарушение политики, а также URL-адрес субресурса, который стал причиной ее нарушения. Настроив конечную точку для сохранения таких отчетов, можно отслеживать смешанный контент на сайте без необходимости самостоятельно заходить на каждую страницу.
+
+Однако есть две оговорки:
+
+- Посетители должны использовать браузер с поддержкой заголовка CSP. Такая поддержка есть в большинстве современных браузеров.
+- Вы будете получать отчеты только по страницам, на которые заходят посетители. Если у вас есть страницы, которые практически не получают трафика, сбор отчетов по всему сайту может занять довольно долгое время.
+
+В [руководстве по политикам безопасности контента](/csp/) приведена дополнительная информация, а также пример реализации конечной точки.
+
+### Альтернативы сбору отчетов при помощи CSP
+
+Если ваш сайт размещен на сторонней платформе, такой как Blogger, у вас может не быть возможности изменить заголовки и установить политику CSP. В качестве альтернативы вы можете воспользоваться ботом, который обходит страницы на сайте и сообщает об обнаруженных проблемах, например [HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker) или [Mixed Content Scan](https://github.com/bramus/mixed-content-scan).
+
+### Переключение небезопасных запросов на безопасное соединение
+
+Современные браузеры могут блокировать небезопасные запросы или переключать их на безопасное соединение. Директивы CSP позволяют принудительно активировать такое поведение.
+
+CSP-директива [`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) сообщает браузеру, что небезопасные URL-адреса необходимо загружать с использованием безопасного соединения.
+
+Например, если на странице есть тег изображения с URL-адресом HTTP: `<img src="http://example.com/image.jpg">`
+
+…браузер выполнит безопасный запрос по адресу `https://example.com/image.jpg` и тем самым предотвратит загрузку смешанного контента.
+
+Включить это поведение можно путем отправки заголовка `Content-Security-Policy` с соответствующей директивой:
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+…или указав эту же директиву непосредственно в коде страницы, используя элемент `<meta>` в разделе `<head>`:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+Как и при использовании автоматического переключения на безопасное соединение, в случае недоступности ресурса по HTTPS запрос завершается ошибкой и ресурс не загружается. Это помогает повысить безопасность вашей страницы. При использовании директивы `upgrade-insecure-requests` механизм автоматического переключения на безопасное соединение будет применяться даже к запросам, на которые он не распространяется по умолчанию.
+
+Действие директивы `upgrade-insecure-requests` распространяется на все вложенные документы `<iframe>`, что помогает обеспечить защиту всей страницы.
+
+### Блокировка всего смешанного контента
+
+В качестве альтернативы для защиты пользователей можно использовать CSP-директиву [`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking), которая запрещает браузеру загружать какой-либо смешанный контент. В этом случае браузер будет блокировать все запросы смешанного контента, включая как активный, так и пассивный контент. Этот параметр также распространяется на вложенные документы `<iframe>`, что помогает обеспечить полное отсутствие на странице смешанного контента.
+
+Включить такое поведение для страницы можно путем отправки заголовка `Content-Security-Policy` с соответствующей директивой:
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+…или указав эту же директиву непосредственно в коде страницы, используя элемент `<meta>` в разделе `<head>`:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %} Если установить одновременно `upgrade-insecure-requests` и `block-all-mixed-content`, то приоритет будет иметь директива `upgrade-insecure-requests` и браузер не будет блокировать запросы, поэтому не следует использовать обе директивы сразу. {% endAside %}
diff --git a/src/site/content/ru/secure/index.md b/src/site/content/ru/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/ru/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/ru/secure/same-site-same-origin/index.md b/src/site/content/ru/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..c021bd6a94e
--- /dev/null
+++ b/src/site/content/ru/secure/same-site-same-origin/index.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Понятия same-site и same-origin
+authors:
+  - agektmr
+date: 2020-04-15
+updated: 2020-06-10
+description: На термины same-site и same-origin часто ссылаются, однако зачастую их неправильно трактуют. Эта статья объясняет, что они из себя представляют и чем отличаются.
+tags:
+  - security
+---
+
+На термины same-site и same-origin часто ссылаются, однако зачастую их неправильно трактуют. Например, они упоминаются в контексте переходов страниц, запросов `fetch()`, файлов cookie, открытия всплывающих окон, встроенных ресурсов и фреймов.
+
+## Источник
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="Источник", width="680", height="100" %}
+
+Источник (origin) — это комбинация [схемы](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol) (также известной как [протокол](https://developer.mozilla.org/docs/Glossary/Protocol), например, [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) или [HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)), [имени хоста](https://en.wikipedia.org/wiki/Hostname) и [порта](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port) (если он указан). Например, для URL `https://www.example.com:443/foo` значение origin будет таким: `https://www.example.com:443`.
+
+### "same-origin" и "cross-origin" {: #same-origin-and-cross-origin }
+
+Веб-сайты, использующие одну и ту же схему, имя хоста и порт, считаются имеющими одинаковый источник (same-origin). Все остальное считается перекрестными источниками (cross-origin).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Источник A</th>
+        <th>Источник B</th>
+        <th>Пояснение, считаются ли источники A и B same-origin или cross-origin</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>cross-origin: разные домены</td>
+      </tr>
+      <tr>
+        <td>https://<strong>example.com</strong>:443</td>
+        <td>cross-origin: разные поддомены</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td>cross-origin: разные поддомены</td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>cross-origin: разные протоколы</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td>cross-origin: разные порты</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>same-origin: точное совпадение</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>same-origin: неявный номер порта (443) совпадает</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Сайт
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="Сайт", width="680", height="142" %}
+
+Домены верхнего уровня (TLD), такие как `.com` и `.org`, перечислены в [базе данных корневой зоны](https://www.iana.org/domains/root/db). В приведенном выше примере сайт (site) — это комбинация TLD и части домена непосредственно перед ним. Например, для URL `https://www.example.com:443/foo` значение site будет таким: `example.com`.
+
+Однако для таких доменов, как `.co.jp` или `.github.io`, простое использование TLD `.jp` или `.io` недостаточно детализировано для определения сайта. И нет никакого способа алгоритмически определить уровень регистрируемых доменов для конкретного TLD. Вот почему был создан список «эффективных TLD» (eTLD). Они определены в [списке общедоступных суффиксов](https://wiki.mozilla.org/Public_Suffix_List). Список eTLD поддерживается по адресу [publicsuffix.org/list](https://publicsuffix.org/list/).
+
+Полное имя сайта — это eTLD+1. Например, если указан URL `https://my-project.github.io`, eTLD будет `.github.io` а eTLD+1 — `my-project.github.io`, что считается сайтом. Другими словами, eTLD+1 — это действующий TLD и часть домена непосредственно перед ним.
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### "same-site" и "cross-site" {: #same-site-cross-site }
+
+Веб-сайты с одинаковым eTLD+1 считаются одинаковыми (same-site). Веб-сайты с отличающимися eTLD+1 являются перекрестными (cross-site).
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Источник A</th>
+        <th>Источник B</th>
+        <th>Пояснение, считаются ли источники A и B same-site или cross-site</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>cross-site: разные домены</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>same-site: разные субдомены не имеют значения</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td><strong>same-site: разные схемы не имеют значения</strong></td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>same-site: разные порты не имеют значения</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>same-site: точное совпадение</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>same-site: порты не имеют значения</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### "schemeful same-site"
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+Определение same-site развивается, чтобы рассматривать схему URL как часть сайта, чтобы предотвратить использование HTTP в качестве [слабого канала](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8). По мере того, как браузеры переходят к этой интерпретации, вы можете видеть ссылки на «один и тот же сайт без схемы» (scheme-less same-site) при обращении к старому определению и на «[тот же сайт со схемой](/schemeful-samesite/)» (schemeful same-site) при обращении к более строгому определению. В этом случае `http://www.example.com` и `https://www.example.com` покажут значение cross-site, поскольку протоколы не совпадают.
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>Источник A</th>
+        <th>Источник B</th>
+        <th>Пояснение, считаются ли источники A и B schemeful same-site</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>cross-site: разные домены</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>schemeful same-site: разные поддомены не имеют значения</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>cross-site: разные протоколы</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>schemeful same-site: разные порты не имеют значения</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>schemeful same-site: точное совпадение</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>schemeful same-site: порты не имеют значения</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## Как проверить, относится ли запрос к same-site, same-origin или cross-site
+
+Chrome отправляет запросы вместе с HTTP-заголовком `Sec-Fetch-Site`. По состоянию на апрель 2020 года другие браузеры не поддерживают `Sec-Fetch-Site`. Это часть более крупного предложения [Fetch Metadata Request Headers](https://www.w3.org/TR/fetch-metadata/). Заголовок будет иметь одно из следующих значений:
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+Просмотрев значение `Sec-Fetch-Site`, вы можете определить, относится ли запрос к типу same-site, same-origin или cross-site (тип schemeful-same-site не фиксируется в `Sec-Fetch-Site`).
diff --git a/src/site/content/ru/secure/what-is-mixed-content/index.md b/src/site/content/ru/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..5106d8900eb
--- /dev/null
+++ b/src/site/content/ru/secure/what-is-mixed-content/index.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Что такое смешанный контент?
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: |2-
+
+  Смешанный контент возникает, когда исходный HTML загружается через безопасное соединение HTTPS,
+  а другие ресурсы — через небезопасное HTTP-соединение.
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+**Смешанный контент** возникает, когда исходный HTML загружается через безопасное соединение [HTTPS](/why-https-matters/), но при этом другие ресурсы (например, изображения, видео, таблицы стилей, сценарии) загружаются через небезопасное соединение HTTP. Такая ситуация называется смешанным контентом, потому что содержимое как HTTP, так и HTTPS загружается для отображения одной и той же страницы, а первоначальный запрос защищен через HTTPS.
+
+Запросы субресурсов с использованием небезопасного протокола HTTP ослабляют безопасность всей страницы, поскольку они уязвимы для [**атак посредников**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1), когда злоумышленник перехватывает сетевое соединение и просматривает или изменяет обмен данными между двумя сторонами. Используя эти ресурсы, злоумышленники могут отслеживать пользователей и заменять контент на веб-сайте, а в случае активного смешанного контента получать полный контроль над страницей, а не только над небезопасными ресурсами.
+
+Хотя многие браузеры предупреждают пользователя о смешанном контенте, к тому времени, когда это происходит, уже слишком поздно: незащищенные запросы уже выполнены, и безопасность страницы находится под угрозой.
+
+Поэтому браузеры все чаще блокируют смешанный контент. Если на вашем сайте присутствует смешанный контент, исправление этой проблемы обеспечит загрузку контента по мере того, как ограничения браузеров станут более строгими.
+
+## Два типа смешанного контента
+
+Есть два типа смешанного контента: активный и пассивный.
+
+**Пассивный смешанный контент** означает контент, который не взаимодействует с остальной частью страницы, и, таким образом, атака посредника ограничивается возможностями злоумышленника при перехвате или изменении этого контента. Пассивный смешанный контент представляет собой изображения, видео- и аудиоконтент.
+
+**Активный смешанный контент** взаимодействует со страницей в целом и позволяет злоумышленнику делать с ней практически все, что угодно. Активный смешанный контент включает скрипты, таблицы стилей, плавающие фреймы и другой код, который браузер может загрузить и выполнить.
+
+### Пассивный смешанный контент
+
+Пассивный смешанный контент рассматривается как менее проблемный, но тем не менее он представляет угрозу безопасности вашего сайта и ваших пользователей. Например, злоумышленник может перехватить HTTP-запросы изображений на вашем сайте и поменять местами или заменить эти изображения, поменять местами изображения кнопок *сохранения* и *удаления*, что приведет к непреднамеренному удалению контента ваших пользователей, заменить графическое представление ваших продуктов непристойным или порнографическим содержанием, портя ваш сайт, или заменить изображения вашего продукта рекламой другого сайта или продукта.
+
+Даже если злоумышленник не изменяет содержимое вашего сайта, он может отслеживать пользователей с помощью запросов смешанного контента. Злоумышленник может определить, какие страницы посещает пользователь и какие продукты он просматривает, на основе изображений или других ресурсов, загружаемых браузером.
+
+Если присутствует пассивный смешанный контент, большинство браузеров укажут в строке URL, что страница небезопасна, даже если сама страница была загружена по HTTPS. Вы можете наблюдать такое поведение в этой [демонстрации](https://passive-mixed-content.glitch.me/), которая содержит примеры пассивного смешанного контента.
+
+До недавнего времени пассивный смешанный контент загружался во всех браузерах, так как его блокировка нарушила бы работу многих веб-сайтов. Сейчас ситуация начинает меняться, поэтому очень важно обновлять любые случаи смешанного контента на вашем сайте.
+
+[В настоящее время Chrome по возможности внедряет](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html) автоматическое обновление пассивного смешанного контента. Автоматическое обновление означает, что если ресурс доступен по HTTPS, но был жестко запрограммирован как HTTP, браузер загрузит HTTPS-версию. Если не удается найти защищенную версию, ресурс не загружается.
+
+Всякий раз при обнаружении или автоматическом обновлении пассивного смешанного контента Chrome записывает подробные сообщения на вкладку «**Проблемы**» в DevTools, чтобы помочь вам решить конкретную проблему.
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="На вкладке «Проблемы» в Chrome DevTools отображается подробная информация о конкретной проблеме со смешанным контентом и способах ее устранения", width="800", height="310" %}</figure>
+
+### Активный смешанный контент
+
+Активный смешанный контент представляет большую опасность, чем пассивный. Злоумышленник может перехватить и перезаписать активный контент, тем самым получив полный контроль над вашей страницей или даже всем вашим сайтом. Это позволяет злоумышленнику изменять на странице что угодно, включая отображение совершенно постороннего контента, кражу паролей пользователей или других учетных данных, кражу файлов cookie пользовательского сеанса или полное перенаправление пользователя на другой сайт.
+
+Из-за серьезности этой угрозы большинство браузеров уже блокирует этот тип контента по умолчанию для защиты пользователей, но функциональность различается в зависимости от поставщика и версии браузера.
+
+Следующая [демонстрация](https://active-mixed-content.glitch.me/) содержит примеры активного смешанного контента. [Загрузите пример через HTTP](http://active-mixed-content.glitch.me/), чтобы увидеть контент, который блокируется при [загрузке примера через HTTPS](https://active-mixed-content.glitch.me/). Заблокированный контент также будет подробно описан на вкладке «**Проблемы**».
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="На вкладке «Проблемы» в Chrome DevTools отображается подробная информация о конкретной проблеме со смешанным контентом и способах ее устранения", width="800", height="361" %}</figure>
+
+{% Aside %} Браузеры также выделяют заблокированный контент в своих DevTools. Проблемы с заблокированным контентом подробно описаны на вкладке «**Проблемы**» в браузерах на основе Chromium. Firefox и Safari записывают сообщения в консоли. {% endAside %}
+
+## Спецификация смешанного контента
+
+Браузеры следуют [спецификации смешанного контента](https://w3c.github.io/webappsec-mixed-content/), которая определяет категории [**необязательно блокируемого контента**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content) и [**блокируемого контента**](https://w3c.github.io/webappsec-mixed-content/#category-blockable).
+
+Согласно спецификации ресурс квалифицируется как необязательно блокируемый контент, «когда риск разрешения его использования в качестве смешанного контента перевешивается риском взлома значительных частей сети»; это подмножество категории пассивного смешанного контента, описанной выше.
+
+Весь контент, который не относится к **необязательно блокируемому**, считается **блокируемым** и должен блокироваться браузером.
+
+{% Aside %} В стадии разработки находится [Уровень 2 спецификации смешанного контента](https://w3c.github.io/webappsec-mixed-content/level2.html), где будет добавлено определение автоматического обновления. {% endAside %}
+
+В последние годы [использование HTTPS резко возросло](https://transparencyreport.google.com/https/overview), став очевидным стандартом в Интернете. Это оправдывает возможность блокировки всего смешанного контента в нынешних браузерах, даже тех типов подресурсов, которые определены в [спецификации смешанного контента](https://w3c.github.io/webappsec/specs/mixedcontent/) как **необязательно блокируемые**. Именно поэтому мы наблюдаем все более строгий подход Chrome к таким субресурсам.
+
+### Старые браузеры
+
+Важно помнить, что не каждый посетитель вашего сайта использует самые современные браузеры. Различные версии браузеров от разных поставщиков обрабатывают смешанный контент по-разному. В худшем случае старые браузеры вообще не блокируют смешанный контент, что очень небезопасно для пользователя.
+
+Исправляя проблемы со смешанным контентом, вы обеспечиваете видимость своего контента в новых браузерах. Вы также помогаете защитить пользователей от опасного контента, который не блокируется старыми браузерами.
diff --git a/src/site/content/ru/secure/why-https-matters/index.md b/src/site/content/ru/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..75db254cd37
--- /dev/null
+++ b/src/site/content/ru/secure/why-https-matters/index.md
@@ -0,0 +1,39 @@
+---
+layout: post
+title: Почему протокол HTTPS так важен
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: Протокол HTTPS защищает целостность сайта, обеспечивает конфиденциальность и безопасность пользователей, а также является необходимым условием для использования новых мощных API веб-платформ.
+tags:
+  - security
+---
+
+Вы всегда должны защищать свои веб-сайты с помощью протокола HTTPS, даже если они не связаны с конфиденциальной передачей данных. Протокол HTTPS не только играет критически важную роль в обеспечении безопасности и целостности данных сайтов, но и является обязательным требованием для использования многих новых функций браузера, особенно затрагивающих [прогрессивные веб-приложения](/progressive-web-apps).
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## Краткий обзор {: #summary}
+
+- Злоумышленники используют все незащищенные ресурсы, участвующие в обмене данными между сайтами и пользователями.
+- Многие злоумышленники изучают совокупное поведение, чтобы идентифицировать пользователей.
+- HTTPS не просто блокирует неправомерное использование сайта. Это также обязательное требование для применения многих передовых функций. Кроме того, HTTPS позволяет использовать возможности прогрессивных веб-приложений, такие как сервис-воркеры.
+
+## HTTPS защищает целостность сайта {: #integrity}
+
+HTTPS помогает предотвратить вмешательство злоумышленников в обмен данными между сайтами и браузерами пользователей. К злоумышленникам мы относим не только хакеров, нарушающих закон, но и назойливые компании (интернет-провайдеров, отели и т. д.), которые размещают рекламу на страницах.
+
+Злоумышленники используют незащищенные коммуникации, чтобы внедрить свою рекламу в ваши ресурсы или чтобы обманом заставить пользователей передать конфиденциальную информацию или установить вредоносное ПО. Например, некоторые третьи стороны внедряют на сайты рекламу, которая потенциально нарушает механизм взаимодействия с пользователем и создает уязвимости в системе безопасности.
+
+Злоумышленники используют каждый незащищенный ресурс, который передается между сайтами и пользователями. Это могут быть изображения, файлы cookie, скрипты, HTML и т. д. Атаке может подвергнуться любая точка сети: компьютер пользователя, точка доступа Wi-Fi, скомпрометированный провайдер, и это лишь некоторые из возможных мишеней.
+
+## HTTPS обеспечивает конфиденциальность и безопасность пользователей {: #privacy}
+
+Протокол HTTPS не позволяет злоумышленникам пассивно прослушивать сообщения между сайтами и пользователями.
+
+Одно из распространенных заблуждений относительно HTTPS заключается в том, что он якобы нужен только тем сайтам, которые обрабатывают конфиденциальные данные. Каждый незащищенный HTTP-запрос потенциально может раскрыть информацию о поведении и личности пользователей. Хотя однократное посещение одного из незащищенных веб-сайтов может показаться безобидным, некоторые злоумышленники анализируют совокупную активность пользователей при просмотре, чтобы сделать выводы об их поведении и намерениях, а также [деанонимизировать](https://en.wikipedia.org/wiki/De-anonymization) личности пользователей. Например, сотрудники могут непреднамеренно сообщать работодателям о проблемах со здоровьем, просто читая медицинские статьи, незащищенные HTTPS-протоколом.
+
+## HTTPS — это будущее Интернета {: #capabilities}
+
+Новые мощные функции веб-платформы, такие как фотосъемка или запись звука с помощью `getUserMedia()`, возможность использования приложений в автономном режиме с помощью [сервис-воркеров](/service-workers-cache-storage/) или создание [прогрессивных веб-приложений](/progressive-web-apps), требуют явного разрешения от пользователя перед запуском. Многие устаревшие API-интерфейсы также обновляются, чтобы запрашивать разрешения на выполнение, например [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation). Протокол HTTPS является ключевым компонентом рабочих процессов получения разрешения для этих новых функций и обновленных API.
diff --git a/src/site/content/ru/vitals/index.md b/src/site/content/ru/vitals/index.md
new file mode 100644
index 00000000000..0bd18549dc3
--- /dev/null
+++ b/src/site/content/ru/vitals/index.md
@@ -0,0 +1,222 @@
+---
+layout: post
+title: Web Vitals
+description: Основные показатели работоспособного сайта
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+Оптимизация качества взаимодействия с пользователем - ключ к долгосрочному успеху любого сайта в Интернете. Web Vitals поможет владельцам бизнеса, маркетологам или разработчикам количественно оценить впечатления от сайта и определить возможности для улучшения.
+
+## Обзор
+
+Web Vitals - это инициатива Google, цель которой - предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете.
+
+За прошедшие годы компания Google предоставила ряд инструментов для измерения производительности и ведения отчетности. Хотя среди разработчиков и есть эксперты по использованию этих инструментов, остальным сложно уследить за обилием средств и показателей.
+
+Владельцы сайтов не должны быть гуру производительности, чтобы понимать качество обслуживания, которое они предоставляют своим пользователям. Цель инициативы Web Vitals - упростить сложившуюся ситуацию и помочь сосредоточиться на наиболее важных показателях**Core Web Vitals**.
+
+## Core Web Vitals
+
+Core Web Vitals - это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый [в полевых условиях](/user-centric-performance-metrics/#how-metrics-are-measured) и отражающий реальные действия по достижению критически важного результата, [ориентированного на пользователя](/user-centric-performance-metrics/#how-metrics-are-measured).
+
+Метрики Core Web Vitals будут [развиваться](#evolving-web-vitals) с течением времени. Текущий набор за 2020 год фокусируется на трех аспектах взаимодействия с пользователем: *скорости загрузки страниц сайта*, *интерактивности* и *визуальной стабильности*, и включает следующие показатели (и их соответствующие пороговые значения):
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="Рекомендации по пороговому значению скорости загрузки основного контента", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="Рекомендации по пороговому значению времени ожидания до первого взаимодействия с контентом", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="Рекомендации по пороговому значению совокупного смещения макета", width="400", height="350" %}</div>
+
+- **[Largest Contentful Paint (LCP) : Скорость загрузки основного контента](/lcp/)**: измеряет производительность *загрузки*. Чтобы обеспечить удобство работы пользователей, показатель LCP должен быть в пределах **2,5 секунды** от начала загрузки страницы.
+- **[First Input Delay (FID) : Время ожидания до первого взаимодействия с контентом](/fid/)**: измеряет *интерактивность*. Чтобы обеспечить удобство работы пользователей, показатель FID у страниц не должен превышать **100 миллисекунд**.
+- **[Cumulative Layout Shift (CLS) : Совокупное смещение макета](/cls/)**: измеряет *визуальную стабильность*. Чтобы обеспечить удобство работы пользователей, показатель CLS не должен превышать **0,1**.
+
+Рекомендуемым порогом для вышеперечисленных показателей считается **75-й процентиль** загрузки страниц, сегментированный по мобильным и настольным устройствам.
+
+Инструменты аналитики должны положительно оценивать Core Web Vitals страницы, если все три вышеперечисленных показателя соответствуют рекомендуемым на уровне 75-го процентиля.
+
+{% Aside %} Чтобы узнать больше об исследованиях и методологии, лежащих в основе этих рекомендаций, см. [«Определение пороговых значений показателей Core Web Vitals»](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### Инструменты для измерения Core Web Vitals и ведения отчетности
+
+Google верит, что показатели Core Web Vitals критически важны при оценке взаимодействия с пользователями. Поэтому компания стремится отображать эти показатели [во всех своих популярных инструментах](/vitals-tools/). Далее подробно описано, какие инструменты поддерживают Core Web Vitals.
+
+#### Инструменты для измерения Core Web Vitals в полевых условиях
+
+Отчет [Chrome User Experience Report](https://developer.chrome.com/docs/crux/) собирает анонимные, реальные данные пользователей для каждого показателя Core Web Vital. Эти данные позволяют владельцам сайтов быстро оценивать производительность страниц, исключая ручной сбор аналитики и позволяя использовать такие мощные инструменты, как [PageSpeed Insights](https://pagespeed.web.dev/) и отчет [Core Web Vitals report](https://support.google.com/webmasters/answer/9205520) в Search Console.
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Chrome User Experience Report</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">Search Console (Core Web Vitals report)</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} Чтобы узнать, как использовать эти инструменты и какой инструмент лучше подходит для вашего случая, см. [«Как начать измерять Web Vitals»](/vitals-measurement-getting-started/) {% endAside %}
+
+Данные, предоставленные Chrome User Experience Report, предлагают быстрый способ оценки производительности сайтов, но не предоставляют подробную телеметрию для каждого просмотра страницы, которая часто необходима для точной диагностики, отслеживания и быстрого реагирования на регрессии. Поэтому мы настоятельно рекомендуем сайтам настроить собственный мониторинг реальных пользователей.
+
+#### Измерение Core Web Vitals в JavaScript
+
+Показатели Core Web Vitals можно измерить в JavaScript с помощью стандартных веб-API.
+
+Самый простой способ измерить все показатели Core Web Vitalsиспользовать [JavaScript-библиотеку web-Vitals](https://github.com/GoogleChrome/web-vitals), которая представляет собой небольшую, готовую к работе оболочку для базовых веб-API, и измеряет каждую метрику аналогично инструментам Google, перечисленным выше.
+
+С библиотекой [web-vitals](https://github.com/GoogleChrome/web-vitals) измерение каждой метрики сводится к простому вызову функции (см. документацию об [использовании](https://github.com/GoogleChrome/web-vitals#usage) и подробные сведения об [API](https://github.com/GoogleChrome/web-vitals#api)):
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+После настройки сайта на использование библиотеки [web-vitals](https://github.com/GoogleChrome/web-vitals) для измерения и отправки данных Core Web Vitals в конечную точку аналитики, следующий шаг - агрегирование этих данных и создание отчетов по ним, чтобы увидеть, соответствуют ли ваши страницы рекомендуемым пороговым значениям по крайней мере для 75% посещений страниц.
+
+Хотя некоторые поставщики аналитики имеют встроенную поддержку показателей Core Web Vitals, даже те, которые не имеют такой возможности, должны включать в себя базовые функции настраиваемых показателей, позволяющие измерять Core Web Vitals в их инструментах.
+
+Как раз такой пример - отчет [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report), который позволяет владельцам сайтов измерять показатели Core Web Vitals с помощью Google Analytics. Инструкции по измерению Core Web Vitals с помощью других инструментов аналитики см. в статье [«Рекомендации по измерению Web Vitals в полевых условиях»](/vitals-field-measurement-best-practices/).
+
+Кроме того, можно создавать отчеты по каждому из показателей Core Web Vitals без написания кода, используя [расширение Web Vitals для Chrome](https://github.com/GoogleChrome/web-vitals-extension). Расширение применяет библиотеку [web-vitals](https://github.com/GoogleChrome/web-vitals) для измерения показателей и их показа пользователям при просмотре веб-страниц.
+
+Расширение полезно для понимания производительности ваших сайтов, сайтов конкурентов и Интернета в целом.
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">Web-Vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Расширение Web Vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+Разработчики, предпочитающие измерять эти метрики непосредственно через базовые веб-API, могут обратиться к этим руководствам по метрикам для получения подробной информации о реализации:
+
+- [Измерение LCP в JavaScript](/lcp/#measure-lcp-in-javascript)
+- [Измерение FID в JavaScript](/fid/#measure-fid-in-javascript)
+- [Измерение CLS в JavaScript](/cls/#measure-cls-in-javascript)
+
+{% Aside %} Дополнительные инструкции по измерению этих показателей с помощью популярных аналитических сервисов (или собственных аналитических инструментов) см. в статье [«Рекомендации по измерению Web Vitals в полевых условиях»](/vitals-field-measurement-best-practices/) {% endAside %}
+
+#### Инструменты для измерения Core Web Vitals в лабораторных условиях
+
+Хотя Core Web Vitals являются, прежде всего, полевыми показателями, некоторые из них также можно измерить в лабораторных условиях.
+
+Измерения в лабораторных условиях - лучший способ проверить производительность функций во время разработки и до релиза. Это также лучший способ выявить снижение производительности до того, как оно произойдет.
+
+Следующие инструменты можно использовать для измерения Core Web Vitals в лабораторных условиях:
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">Chrome DevTools</a></td>
+        <td>✔</td>
+        <td>✘ (используйте для этого <a href="/tbt/">TBT)</a>
+</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/"> Lighthouse</a></td>
+        <td>✔</td>
+        <td>✘ (используйте для этого <a href="/tbt/">TBT)</a>
+</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} Инструменты, подобные Lighthouse, которые загружают страницы в смоделированной среде без участия пользователя, не могут измерить FID (нет пользовательского ввода). Тем не менее показатель Total Blocking Time (TBT) (общее время блокировки) поддается лабораторным измерениям и является отличной метрикой для FID. Оптимизация производительности, приводящая к улучшению TBT в лабораторных условиях, должна улучшить FID в полевых условиях (см. рекомендации по производительности ниже). {% endAside %}
+
+Измерения в лабораторных условиях являются неотъемлемой частью предоставления отличного пользовательского опыта, но они не могут заменить измерения в полевых условиях.
+
+Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, состояния его сети, других процессов, выполняемых на устройстве, и того, как они взаимодействуют со страницей. Фактически, каждый из показателей Core Web Vitals зависит от взаимодействия с пользователем. Только измерения в полевых условиях позволяют увидеть полную картину.
+
+### Рекомендации для улучшения оценки ваших страниц
+
+После измерения Core Web Vitals и определения областей, требующих улучшения, нужно переходить к оптимизации. Следующие руководства предлагают конкретные рекомендации по оптимизации страниц под каждый из показателей Core Web Vitals:
+
+- [Оптимизация LCP](/optimize-lcp/)
+- [Оптимизация FID](/optimize-fid/)
+- [Оптимизация CLS](/optimize-cls/)
+
+## Другие показатели Web Vitals
+
+Хотя показатели Core Web Vitals являются критически важными для понимания и обеспечения хорошего взаимодействия с пользователем, существуют и другие важные метрики.
+
+Они часто служат в качестве промежуточных или дополнительных показателей для Core Web Vitals, и помогают полнее охватить взаимодействие с пользователем или диагностировать конкретную проблему.
+
+Например, метрики [Time to First Byte (TTFB) : Время до первого байта](/ttfb/) и [First Contentful Paint (FCP) : Первая отрисовка контента](/fcp/) являются критически важными аспектами *загрузки* и полезны для диагностики проблем с LCP (медленное [время отклика сервера](/overloaded-server/) или [ресурсы, блокирующие рендеринг](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)).
+
+Аналогично, такие показатели, как [Total Blocking Time (TBT) : Общее время блокировки](/tbt/) и [Time to Interactive (TTI) : Время до интерактивности](/tti/), являются крайне важными лабораторными метриками для выявления и диагностики потенциальных проблем с *интерактивностью*, которые могут повлиять на FID. Однако они не входят в набор Core Web Vitals, потому что не поддаются измерению в полевых условиях и не отражают результаты, [ориентированные на пользователя](/user-centric-performance-metrics/#how-metrics-are-measured).
+
+## Развитие Web Vitals
+
+Web Vitals и Core Web Vitals - лучшие из имеющихся на сегодня у разработчиков сигналов для измерения качества пользовательского опыта в Интернете. Но эти сигналы не совершенны, поэтому следует ожидать их дальнейшего улучшения и развития.
+
+**Core Web Vitals** актуальны для всех веб-страниц и представлены в соответствующих инструментах Google. Изменения в этих показателях могут иметь далеко идущие последствия для ранжирования; поэтому способ определения и пороговые значения Core Web Vitals будут стабильными, а обновления будут проводиться с предварительным уведомлением разработчиков и с предсказуемой ежегодной периодичностью.
+
+Другие Web Vitals больше зависят от контекста или инструмента и более экспериментальны, чем Core Web Vitals. Поэтому их способ определения и пороговые значения могут меняться чаще.
+
+Для всех Web Vitals изменения будут четко задокументированы в общедоступном [ЖУРНАЛЕ ИЗМЕНЕНИЙ](http://bit.ly/chrome-speed-metrics-changelog) .
diff --git a/src/site/content/sitemap.xml.njk b/src/site/content/sitemap.xml.njk
index 8ce013fa345..c8f51050e17 100644
--- a/src/site/content/sitemap.xml.njk
+++ b/src/site/content/sitemap.xml.njk
@@ -8,18 +8,20 @@ permalink: "/sitemap.xml"
 {%- if not page.data.noindex and not page.data.draft %}
   {# Verify that the page has a permalink so we don't pull in things like #}
   {# the service worker partial. #}
-  {# But use the page's fileSlug so we can strip out the language directory. #}
+  {# Use the page's canonicalUrl which ignores the language directories. #}
   {%- if page.url %}
-  {% set absoluteUrl %}{{ page.data.canonicalUrl }}{% endset %}
+  {% set fullUrl %}{{ site.url }}{{ page.url }}{% endset %}
   <url>
-    <loc>{{ absoluteUrl }}</loc>
-    {%- if page.data.updated %}
-    <lastmod>{{ page.data.updated | htmlDateString }}</lastmod>
-    {%- else %}
-    <lastmod>{{ page.data.date | htmlDateString }}</lastmod>
+    <loc>{{ fullUrl }}</loc>
+    {%- set lastMod = page.data.date -%}
+    {%- if page.data.updated -%}
+      {%- set lastMod = page.data.updated -%}
+    {%- endif -%}
+    {%- if lastMod %}
+    <lastmod>{{ lastMod | htmlDateString }}</lastmod>
     {%- endif %}
   </url>
   {%- endif %}
 {%- endif %}
 {%- endfor %}
-</urlset>
\ No newline at end of file
+</urlset>
diff --git a/src/site/content/sw-partial-layout.njk b/src/site/content/sw-partial-layout.njk
deleted file mode 100644
index 943f1762f88..00000000000
--- a/src/site/content/sw-partial-layout.njk
+++ /dev/null
@@ -1,10 +0,0 @@
----
-lang: ''
-layout: layout
-nometa: true
-permalink: /sw-partial-layout.partial
-show_banner: false
----
-{# Defines the layout used by the Service Worker. For now, uses a magic
-   string that is replace at serve time. #}
-%_CONTENT_REPLACE_%
\ No newline at end of file
diff --git a/src/site/content/zh/404.md b/src/site/content/zh/404.md
new file mode 100644
index 00000000000..a47e0bbdbde
--- /dev/null
+++ b/src/site/content/zh/404.md
@@ -0,0 +1,8 @@
+---
+layout: text
+title: 404
+description: |
+  Page Not Found
+noindex: true
+subhead: Sorry, we couldn't find that page.
+---
diff --git a/src/site/content/zh/accessible/color-and-contrast-accessibility/index.md b/src/site/content/zh/accessible/color-and-contrast-accessibility/index.md
new file mode 100644
index 00000000000..4fc0ae61e4f
--- /dev/null
+++ b/src/site/content/zh/accessible/color-and-contrast-accessibility/index.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: 颜色和对比度辅助功能
+authors:
+  - dgash
+  - megginkearney
+  - rachelandrew
+  - robdodson
+date: 2020-03-31
+updated: 2020-05-29
+description: 如果您有良好的视力，很容易假设每个人都能像您一样感知颜色或阅读文本 — 当然，事实并非如此。
+tags:
+  - accessibility
+---
+
+如果您有良好的视力，很容易假设每个人都能像您一样感知颜色或阅读文本 — 当然，事实并非如此。
+
+您可以想象到，一些颜色组合对于某些人来说很容易区分，而对另一些人则很难或无法识别。这通常归结于颜色对比度，即前景色和背景色亮度之间的关系。当两种颜色相似时，对比度低；当两种颜色不同时，对比度高。
+
+[WebAIM 准则](https://webaim.org/standards/wcag/)建议所有文本的 AA（最低）对比度为 4.5:1。一个例外是非常大的文本（比默认正文文本大 120-150%），其对比度可以降至 3:1。注意下面显示的对比度的差异。
+
+<figure>{% Img src="image/admin/DcYclKelVqhQ2CWlIG97.jpg", alt="显示不同对比度的图像", width="800", height="328" %}</figure>
+
+为 AA 级选择 4.5:1 对比度的原因是，它可以补偿视力只有大约 20/40 的视觉损伤用户通常会经历的对比灵敏度损失。据报道，20/40 通常是 80 岁人群的典型视力。对于低视觉障碍或色觉缺陷的用户，我们可以将正文文本的对比度提高到 7:1。
+
+您可以使用 Lighthouse 中的 Accessibility 审计来检查颜色对比度。打开 DevTools，点击 Audits（审计），然后选择 Accessibility（辅助功能）运行报告。
+
+<figure>{% Img src="image/admin/vSFzNourQO6z2xV6qWuW.png", alt="颜色对比度审计的输出截图。", width="800", height="218" %}</figure>
+
+Chrome 还包括一项实验性功能，可帮助您[检测页面上的所有低对比度文本](https://developers.google.com/web/updates/2020/10/devtools#css-overview)。您还可以使用[无障碍颜色建议](https://developers.google.com/web/updates/2020/08/devtools#accessible-color)来修复低对比度文本。
+
+<figure>{% Img src="image/admin/VYZeK2l2vs6pIoWhH2hO.png", alt="Chrome 低对比度文本实验性功能的输出截图。", width="800", height="521" %}</figure>
+
+要获得更完整的报告，请安装 [Accessibility Insights 扩展](https://accessibilityinsights.io/)。 Fastpass 报告中的一项检查是颜色对比度。您将获得任何未通过审计的元素的详细报告。
+
+<figure>{% Img src="image/admin/CR21TFMZw8gWsSTWOGIF.jpg", alt="Accessibility Insights 中的报告", width="800", height="473" %}</figure>
+
+## 高级感知对比度算法 (APCA)
+
+[高级感知对比度算法 (APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) 是一种基于现代色彩感知研究来计算对比度的新方法。
+
+与 [AA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) 准则相比，APCA 更加与上下文相关。
+
+对比度的计算基于以下特征：
+
+- 空间属性（字体粗细和文本大小）
+- 文本颜色（文本和背景之间的感知亮度差异）
+- 上下文（环境光、周围环境和文本的预期目的）
+
+Chrome 包含一项[实验性功能，可将 AA/AAA 对比度准则替换为 APCA](https://developers.google.com/web/updates/2021/01/devtools#apca)。
+
+<figure>{% Img src="image/admin/YhGKRLYvt37j3ldlwiXE.png", alt="Chrome 中 APCA 功能的输出截图。", width="800", height="543" %}</figure>
+
+## 不要只用颜色来传达信息
+
+全世界大约 3.2 亿人有色觉缺陷。大约每 12 名男性和 200 名女性中就有 1 人患有某种形式的“色盲”；这意味着大约 1/20 或 5% 的用户无法按您预期的方式体验您的网站。当我们依靠颜色来传达信息时，这个数字会达到不可接受的水平。
+
+{% Aside %} 注意：术语“色盲”通常用于描述辨别颜色有困难的人的视觉状况，但实际上很少有人真正是色盲。大多数有颜色缺陷的人可以看到部分或大多数颜色，但难以区分某些颜色，例如红色和绿色（最常见）、棕色和橙色以及蓝色和紫色。{% endAside %}
+
+例如，在输入表单中，电话号码可能带有红色下划线以表示其无效。但是对于有颜色缺陷或使用屏幕阅读器的用户来说，该信息并不能很好地传达。因此，您应该始终设法为用户提供多种途径来获取关键信息。
+
+<figure style="width: 200px">{% Img src="image/admin/MKmlhejyjNpk7XE9R2KV.png", alt="电话号码错误的输入表单仅用红色突出显示。", width="293", height="323" %}</figure>
+
+[WebAIM 清单的第 1.4.1 节指出](https://webaim.org/standards/wcag/checklist#sc1.4.1)，“不应将颜色用作传达内容或区分视觉元素的唯一方法”，而且“不应只使用颜色来区分链接与周围文本”，除非它们满足特定对比度要求。该清单建议添加下划线等附加指示符（使用 CSS `text-decoration` 属性）来指示链接何时处于活动状态。
+
+修正上一个示例的一个简单方法是向该字段添加一条附加消息，声明其无效以及原因。
+
+<figure style="width: 200px">{% Img src="image/admin/FLQPcG16akNRoElx3pnz.png", alt="与上一个示例相同的输入表单，但这次有一个文本标签指示字段存在问题。", width="292", height ="343" %}</figure>
+
+在构建应用程序时，请牢记这些事项，并注意可能过于依赖颜色来传达重要信息的区域。
+
+如果您对网站在不同人眼中的外观感到好奇，或者您在很大程度上依赖 UI 中的颜色使用，可以使用 DevTools 来模拟各种形式的视觉障碍，包括不同类型的色盲。Chrome 包括一个[模拟视觉缺陷功能](https://developers.google.com/web/updates/2020/03/devtools#vision-deficiencies)。要访问该功能，请打开 DevTools，然后打开抽屉中的 **Rendering**（渲染）选项卡，即可模拟以下颜色缺陷。
+
+- 红色盲：无法感知任何红光。
+- 绿色盲：无法感知任何绿光。
+- 蓝色盲：无法感知任何蓝光。
+- 全色盲：无法感知除灰色阴影之外的任何颜色（极其罕见）。
+
+<figure>{% Img src="image/admin/VAnFxYhzFcpovdTCToPl.jpg", alt="模拟全色盲患者的视觉，以灰度显示我们的页面。", width="800", height="393" %}</figure>
+
+## 高对比度模式
+
+高对比度模式允许用户反转前景色和背景色，这通常有助于更好地突出文本。对于低视觉障碍的人，使用高对比度模式可以更容易浏览页面上的内容。有几种方法可以在计算机上实现高对比度设置。
+
+Mac OSX 和 Windows 等操作系统提供了高对比度模式，可以在系统级别为所有内容启用该模式。
+
+一个有用的练习是打开高对比度设置并验证应用程序中的所有 UI 是否仍然可见和可用。
+
+例如，导航栏可能只是轻微改变背景颜色来指示当前选择了哪个页面。如果在高对比度扩展中查看，这种细微差别就会完全消失，读者也无法了解到哪个页面处于活动状态。
+
+<figure style="width: 500px">{% Img src="image/admin/dgmA4W1Qu8JmcgsH80HD.png", alt="高对比度模式下的导航栏截图，其中难以分辨活动的标签页", width="640", height="57" %}</figure>
+
+同样，如果考虑上一课中的示例，无效电话号码字段上的红色下划线可能以难以区分的蓝绿色显示。
+
+<figure>{% Img src="image/admin/HtlXwmHQHBcAO4LYSfAA.jpg", alt="先前使用的地址表单截图，这次是在高对比度模式下。无效元素的颜色变化很难看清。", width="700", height="328" %}</figure>
+
+如果您达到了前面介绍的对比度准则，那么在支持高对比度模式方面应该没有问题。但是为了让您更安心，请考虑安装[高对比度 Chrome 扩展程序](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph)并检查一遍页面，以确认一切正常并按预期显示。
diff --git a/src/site/content/zh/accessible/control-focus-with-tabindex/index.md b/src/site/content/zh/accessible/control-focus-with-tabindex/index.md
new file mode 100644
index 00000000000..c79b8c2c4ab
--- /dev/null
+++ b/src/site/content/zh/accessible/control-focus-with-tabindex/index.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: 使用 tabindex 控制焦点
+authors:
+  - robdodson
+date: 2018-11-18
+description: 标准 HTML 元素（如 <button> 或 <input>）免费内置了键盘可访问性。如果您正在构建自定义交互组件，请使用 tabindex 确保它们可以通过键盘访问。
+---
+
+标准 HTML 元素（如 `<button>` 或 `<input>`）免费内置了键盘可访问性。不过，如果您正在构建*自定义*交互组件，请使用 `tabindex` 属性确保它们可以通过键盘访问。
+
+{% Aside %} 尽可能使用内置 HTML 元素，而不是构建您自己的自定义版本。例如，`<button>` 非常容易设置样式并且已经具有完整的键盘支持。这样您就无需管理 `tabindex` 或添加 ARIA 语义。{% endAside %}
+
+## 检查您的控件是否可通过键盘访问
+
+像 Lighthouse 这样的工具非常适合检测某些可访问性问题，但有些东西只能由人来测试。
+
+尝试按 `Tab` 键浏览您的网站。您是否能够访问页面上的所有交互式控件？如果不能，您可能需要使用 [`tabindex`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex) 来提高这些控件的可聚焦性。
+
+{% Aside 'warning' %} 如果您完全看不到焦点指示器，它可能已被 CSS 隐藏。请检查任何提及 `:focus { outline: none; }` 的样式。您可以在我们的[样式焦点](/style-focus)指南中了解如何解决此问题。{% endAside %}
+
+## 将元素插入到 Tab 键顺序中
+
+使用 `tabindex="0"` 将元素插入到自然的 Tab 键顺序中。例如：
+
+```html
+<div tabindex="0">Focus me with the TAB key</div>
+```
+
+要聚焦某个元素，请按 `Tab` 键或调用该元素的 `focus()` 方法。
+
+{% Glitch { id: 'tabindex-zero', path: 'index.html', height: 346 } %}
+
+## 从 Tab 键顺序中删除元素
+
+使用 `tabindex="-1"` 删除元素。例如：
+
+```html
+<button tabindex="-1">Can't reach me with the TAB key!</button>
+```
+
+这将从自然的 Tab 键顺序中删除一个元素，但仍然可以通过调用该元素的 `focus()` 方法来聚焦该元素。
+
+{% Glitch { id: 'tabindex-negative-one', path: 'index.html', height: 346 } %}
+
+请注意，对元素应用 `tabindex="-1"` 不会影响其子元素；如果它们本来就处在 Tab 键顺序中或由于 `tabindex` 值的原因，它们将保留在 Tab 键顺序中。要从 Tab 键顺序中删除一个元素及其所有子元素，请考虑使用 [WICG 的 `inert` polyfill](https://github.com/WICG/inert)。该 polyfill 模拟提议的 `inert` 属性的行为，可防止元素被辅助技术选择或读取。
+
+{% Aside 'caution' %} `inert` polyfill 是实验性的，可能无法在所有情况下都按预期工作。在生产中使用前请仔细测试。 {% endAside %}
+
+## 避免 `tabindex > 0`
+
+任何大于 0 的 `tabindex` 都会使元素跳到自然 Tab 键顺序的前面。如果有多个元素的 `tabindex` 大于0，则 Tab 键顺序从大于 0 的最低值开始，依次向上。
+
+使用大于 0 的 `tabindex` 被认为是一种**反模式**，因为屏幕阅读器按 DOM 顺序导航页面，而不是按 Tab 键顺序。如果您需要某个元素在 Tab 键顺序中更早出现，则应将其移至 DOM 中较早的位置。
+
+使用 Lighthouse 可以轻松识别 `tabindex` &gt; 0 的元素。运行可访问性审计（Lighthouse &gt; Options（选项）&gt; Accessibility（可访问性））并查找“没有元素的 [tabindex] 值大于 0”审计的结果。
+
+## 通过“漫游 `tabindex`”创建可访问组件
+
+如果您正在构建一个复杂的组件，您可能需要添加除聚焦之外的额外键盘支持。请考虑内置的 `select` 元素。它是可聚焦的元素，并且您可以使用箭头键来揭示附加功能（可选选项）。
+
+要在您自己的组件中实现类似功能，请使用一种称为“漫游 `tabindex`”的技术。漫游 tabindex 的工作原理是将所有子元素的 `tabindex` 设置为 -1，但当前活动的子元素除外。该组件随后使用键盘事件侦听器来确定用户按下了哪个键。
+
+当发生按键事件时，组件将先前被聚焦的子元素的 `tabindex` 设置为 -1，将要被聚焦的子元素的 `tabindex` 设置为 0，然后对其调用 `focus()` 方法。
+
+**之前**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="0">Redo</div>
+  <button tabindex="-1">Cut</div>
+</div>
+```
+
+**之后**
+
+```html/2-3
+<div role="toolbar">
+  <button tabindex="-1">Undo</div>
+  <button tabindex="-1">Redo</div>
+  <button tabindex="0">Cut</div>
+</div>
+```
+
+{% Glitch { id: 'roving-tabindex', path: 'index.html', height: 346 } %}
+
+{% Aside %} 好奇那些 `role=""` 属性的作用是什么吗？通过它们可更改元素的语义，以便屏幕阅读器正确通告该元素。您可以在我们的[屏幕阅读器基础知识](/semantics-and-screen-readers)指南中了解更多信息。{% endAside %}
+
+{% Assessment 'self-assessment' %}
+
+## 键盘访问秘诀
+
+如果您不确定您的自定义组件可能需要什么级别的键盘支持，可以参考 [ARIA 创作实践 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/)。这个方便的指南列出了常见的 UI 模式并确定您的组件应该支持哪些键。
diff --git a/src/site/content/zh/accessible/control-focus-with-tabindex/self-assessment.assess.yml b/src/site/content/zh/accessible/control-focus-with-tabindex/self-assessment.assess.yml
new file mode 100644
index 00000000000..cfd424d97f3
--- /dev/null
+++ b/src/site/content/zh/accessible/control-focus-with-tabindex/self-assessment.assess.yml
@@ -0,0 +1,102 @@
+setLeader: |
+  Test your knowledge of tab order
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: |
+      This HTML renders a modal dialog:
+
+      ```html
+      <div role="dialog" aria-labelledby="dialog-header">
+        <button aria-label="Close"></button>
+        <h2 id="dialog-header">
+          Do you want to allow notifications from this website?
+        </h2>
+        <button>No</button>
+        <button>Yes</button>
+      </div>
+      ```
+    type: think-and-check
+    stem: What is the tab order for the elements in the sample?
+    options:
+      - rationale: |
+          1. The **Close** button
+          1. The **No** button
+          1. The **Yes** button
+
+          Only the `<button>` elements are included in the tab order
+          because they're the only standardized HTML form elements.
+          To insert other elements into the tab order, you would add a `tabindex` attribute.
+  - stimulus: |
+      ```html
+      <section tabindex="-1">
+        <h2>Cat facts</h2>
+        <ul>
+          <li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
+          <li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
+        </ul>
+      </section>
+      ```
+    type: think-and-check
+    stem: Which elements from the sample are included in the tab order?
+    options:
+      - rationale: |
+          Only the `<a>` elements are included in the tab order.
+
+          The `<section>` element is not in the tab order
+          because it has a negative `tabindex` value.
+          (It can, however, be focused using the `focus()` method.)
+          The `tabindex` value for the `<section>` element doesn't affect its children.
+  - stimulus: |
+      This HTML renders a popup menu followed by a search input:
+
+      ```html
+      <div role="menu" tabindex="0">
+        <a role="menuitem" href="/learn/" tabindex="-1">Learn</a>
+        <a role="menuitem" href="/measure/" tabindex="-1">Measure</a>
+        <a role="menuitem" href="/blog/" tabindex="-1">Blog</a>
+        <a role="menuitem" href="/about/" tabindex="-1">About</a>
+      </div>
+      <input tabindex="1" type="text" role="search" aria-label="Search" placeholder="Search">
+      ```
+    type: think-and-check
+    stem: Which element in the sample comes first in the tab order?
+    options:
+      - rationale: |
+          The **Search** text input comes first in the tab order.
+          Because it has a `tabindex` greater than zero, it jumps to the front of the tab order.
+
+          (This behavior is likely to cause confusion
+          if the menu is positioned on the page before the search input.
+          This is an example of why having a `tabindex` value greater than zero
+          is considered an anti-pattern.)
+  - stimulus: |
+      This HTML renders a custom radio group, which should have a
+      [roving `tabindex`](#create-accessible-components-with-roving-tabindex).
+      (To keep things simpler, ignore the
+      [`aria-*` attributes](/semantics-and-screen-readers) for now.)
+
+      ```html
+      <div role="radiogroup" aria-labelledby="breed-header">
+        <h3 id="breed-header">Your cat's breed</h3>
+        <div role="radio" aria-checked="false" tabindex="0">Persian</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Bengal</div>
+        <div role="radio" aria-checked="false" tabindex="-1">Maine Coon</div>
+      </div>
+      ```
+    type: think-and-check
+    stem: |
+      When a `role="radio"` element is focused,
+      what should happen when a user presses the `Right` arrow key?
+    options:
+      - rationale: |
+          - Change the `tabindex` values for all radio elements in the group to -1.
+          - If there's a radio element after the one that's focused,
+          set its `tabindex` value to 0.
+          - If there's no radio element after the one that's focused,
+          set the `tabindex` value of the first radio element in the group to 0.
+          - Focus the radio element that now has a `tabindex` of 0.
+
+          That's a lot—and it doesn't even include ARIA attributes!
+          This is an example of why it's easier to use built-in elements
+          with built-in keyboard behavior whenever you can.
diff --git a/src/site/content/zh/accessible/index.md b/src/site/content/zh/accessible/index.md
new file mode 100644
index 00000000000..2b902347da1
--- /dev/null
+++ b/src/site/content/zh/accessible/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: accessible
+---
diff --git a/src/site/content/zh/accessible/labels-and-text-alternatives/index.md b/src/site/content/zh/accessible/labels-and-text-alternatives/index.md
new file mode 100644
index 00000000000..edda90b4404
--- /dev/null
+++ b/src/site/content/zh/accessible/labels-and-text-alternatives/index.md
@@ -0,0 +1,224 @@
+---
+layout: post
+title: 标签和文本替代
+authors:
+  - robdodson
+date: 2018-11-18
+description: 为了让屏幕阅读器向用户呈现鲜明的 UI，有意义的元素必须有适当的标签或文本替代。标签或文本替代为元素提供其可访问的名称，这是用于在可访问性树中表达元素语义的关键属性之一。
+---
+
+为了让屏幕阅读器向用户呈现鲜明的 UI，有意义的元素必须有适当的标签或文本替代。标签或文本替代为元素提供了可访问的**名称**，这是[在可访问性树中表达元素语义](/semantics-and-screen-readers/#semantic-properties-and-the-accessibility-tree)的关键属性之一。
+
+当元素的名称与元素的**角色**结合使用时，它会提供用户上下文，以便用户可以了解他们正在交互的元素类型以及它在页面上的表示方式。如果名称不存在，则屏幕阅读器只会宣布元素的角色。想象一下在没有任何附加上下文的情况下尝试导航页面并听到“按钮”、“复选框”、“图像”。这就是为什么标签和文本替代方案对于良好的、可访问的体验至关重要。
+
+## 检查元素的名称
+
+使用 Chrome 的 DevTools 可以轻松检查元素的可访问名称：
+
+1. 右键点击一个元素并选择 **Inspect（检查）**。这将打开 DevTools Elements 面板。
+2. 在“元素”面板中，找到 **Accessibility（辅助功能）**窗格。它可能隐藏在 `»` 符号后面。
+3. 在 **Computed Properties（计算出的属性）**下拉列表中，找到**Name（名称）**属性。
+
+<figure>{% Img src="image/admin/38c68DmamTCqt2LFxTmu.png", alt="", width="800", height="471" %}<figcaption> 显示按钮的计算名称的 DevTools 辅助功能窗格。</figcaption></figure>
+
+{% Aside %}要了解更多信息，请查阅 [DevTools 辅助功能参考](https://developer.chrome.com/docs/devtools/accessibility/reference/)。 {% endAside %}
+
+无论您是查看具有 `alt` 文本的 `img`，还是具有 `label` 的 `input`，所有这些场景都会产生相同的结果：为元素提供可访问的名称。
+
+## 检查缺少的名称
+
+根据元素的类型，有不同的方法可以为元素添加可访问的名称。下表列出了需要可访问名称的最常见元素类型以及指向如何添加它们的说明的链接。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>元素类型</th>
+        <th>如何添加名称</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>HTML 文件</td>
+        <td><a href="#label-documents-and-frames">标签文档和框架</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;frame&gt;</code> 或 <code>&lt;iframe&gt;</code> 元素</td>
+        <td><a href="#label-documents-and-frames">标签文档和框架</a></td>
+      </tr>
+      <tr>
+        <td>图像元素</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">包括图像和对象的文本替代</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;input type="image"&gt;</code> 元素</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">包括图像和对象的文本替代</a></td>
+      </tr>
+      <tr>
+        <td>
+<code>&lt;object&gt;</code> 元素</td>
+        <td><a href="#include-text-alternatives-for-images-and-objects">包括图像和对象的文本替代</a></td>
+      </tr>
+      <tr>
+        <td>按钮</td>
+        <td><a href="#label-buttons-and-links">标签按钮和链接</a></td>
+      </tr>
+      <tr>
+        <td>链接</td>
+        <td><a href="#label-buttons-and-links">标签按钮和链接</a></td>
+      </tr>
+      <tr>
+        <td>表单元素</td>
+        <td><a href="#label-form-elements">标签表单元素</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 标签文档和框架
+
+每个页面都应该有一个 [`title`](https://developer.mozilla.org/docs/Web/HTML/Element/title) 元素，简要说明页面的内容。`title` 元素为页面提供了可访问的名称。当屏幕阅读器进入页面时，这是宣布的第一个文本。
+
+例如，下面的页面标题为“Mary's Maple Bar Fast-Baking Recipe”：
+
+```html/3
+<!doctype html>
+  <html lang="en">
+    <head>
+      <title>Mary's Maple Bar Fast-Baking Recipe</title>
+    </head>
+  <body>
+    …
+  </body>
+</html>
+```
+
+{% Aside %}有关编写有效标题的提示，请参阅[编写描述性标题指南](/write-descriptive-text)。 {% endAside %}
+
+同样，任何 `frame` 或 `iframe` 元素都应该具有 `title` 属性：
+
+```html
+<iframe title="An interactive map of San Francisco" src="…"></iframe>
+```
+
+虽然 `iframe` 的内容可能包含它们自己的内部 `title` 元素，但屏幕阅读器通常会停在框架边界处并宣布元素的角色——“框架”——以及它的可访问名称，由 `title` 属性提供。这让用户可以决定他们是希望进入框架还是绕过它。
+
+## 包括图像和对象的文本替代
+
+一个 `img` 应该总是伴随着一个 [`alt`](https://developer.mozilla.org/docs/Web/HTML/Element/img#Attributes) 属性来给图像一个可访问的名称。如果图像加载失败，`alt` 文本将用作占位符，以便用户了解图像试图传达的内容。
+
+编写好的 `alt` 文本是一门艺术，但您可以遵循以下几条准则：
+
+1. 确定图像是否提供了通过阅读周围文本难以获得的内容。
+2. 如果是这样，请尽可能简洁地传达内容。
+
+如果图像用作装饰并且没有提供任何有用的内容，您可以给它一个空的 `alt=""` 属性以将其从可访问性树中删除。
+
+{% Aside %}请查看 [WebAIM 的替代文本指南](https://webaim.org/techniques/alttext/)了解有关编写有效的 `alt` 文本的更多信息。 {% endAside %}
+
+### 图像作为链接和输入
+
+包含在链接中的图像应使用 `img` 的 `alt` 属性来描述用户单击链接时将导航到的位置：
+
+```html
+<a href="https://en.wikipedia.org/wiki/Google">
+  <img alt="Google's wikipedia page" src="google-logo.jpg">
+</a>
+```
+
+同样，如果 `<input type="image">` 元素用于创建图像按钮，它应该包含描述用户单击按钮时发生的操作的 `alt`
+
+```html/5
+<form>
+  <label>
+    Username:
+    <input type="text">
+  </label>
+  <input type="image" alt="Sign in" src="./sign-in-button.png">
+</form>
+```
+
+### 嵌入对象
+
+`<object>` 元素通常用于嵌入（如 Flash、PDF 或 ActiveX），也应包含替代文本。与图像类似，如果元素无法呈现，则会显示此文本。替代文本作为常规文本出现在 `object` 元素中，如下面的“年度报告”：
+
+```html
+<object type="application/pdf" data="/report.pdf">
+Annual report.
+</object>
+```
+
+## 标签按钮和链接
+
+按钮和链接通常对于网站的体验至关重要，并且两者都具有易于访问的名称非常重要。
+
+### 按钮
+
+`button` 元素总是尝试使用其文本内容计算其可访问名称。对于不属于 `form` 的按钮，编写一个清晰的动作作为文本内容可能是创建一个良好的可访问名称所需的全部。
+
+```html
+<button>Book Room</button>
+```
+
+{% Img src="image/admin/tcIDzNpCHS9AlfwflQjI.png", alt="含有“Book Room”按钮的移动表单。", width="800", height="269" %}
+
+此规则的一个常见例外是图标按钮。图标按钮可以使用图像或图标字体来为按钮提供文本内容。例如，所见即所得 (WYSIWYG) 编辑器中用于格式化文本的按钮通常只是图形符号：
+
+{% Img src="image/admin/ZmQ77kLPbqd5iFOmn4SU.png", alt="左对齐图标按钮。", width="800", height="269" %}
+
+使用图标按钮时，使用 `aria-label` 属性为它们提供一个明确的可访问名称会很有帮助。`aria-label` <br> 会覆盖按钮内的任何文本内容，让您可以向使用屏幕阅读器的任何人清楚地描述操作。
+
+```html
+<button aria-label="Left align"></button>
+```
+
+### 链接
+
+与按钮类似，链接主要从其文本内容中获取其可访问的名称。创建链接时的一个好技巧是将最有意义的文本放入链接本身，而不是像“这里”或“阅读更多”这样的填充词。
+
+{% Compare 'worse', 'Not descriptive enough' %}
+
+```html
+Check out our guide to web performance <a href="/guide">here</a>.
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'Useful content!' %}
+
+```html
+Check out <a href="/guide">our guide to web performance</a>.
+```
+
+{% endCompare %}
+
+这对于提供列出页面上所有链接的快捷方式的屏幕阅读器特别有用。如果链接充满了重复的填充文本，这些快捷方式就会变得不那么有用：
+
+<figure>{% Img src="image/admin/IPxS2dwHMyGRvGxGi5n2.jpg", alt="VoiceOver 的链接菜单充满了“这里”这个词。", width="519", height="469" %}<figcaption> macOS 屏幕阅读器 VoiceOver 示例，显示按链接导航菜单。</figcaption></figure>
+
+## 标签表单元素
+
+有两种方法可以将标签与表单元素（例如复选框）相关联。这两种方法中的任何一种都会使标签文本也成为复选框的点击目标，这对鼠标或触摸屏用户也很有帮助。要将标签与元素关联，可以：
+
+- 将输入元素放在标签元素内
+
+```html
+<label>
+  <input type="checkbox">Receive promotional offers?</input>
+</label>
+```
+
+- 或者使用标签的 `for` 属性并引用元素的 `id`
+
+```html
+<input id="promo" type="checkbox"></input>
+<label for="promo">Receive promotional offers?</label>
+```
+
+当复选框被正确标记后，屏幕阅读器可以报告该元素具有复选框的作用，处于选中状态，并被命名为“接收促销优惠？”就像下面的 VoiceOver 示例一样：
+
+<figure>{% Img src="image/admin/WklT2ymrCmceyrGUNizF.png", alt="显示'接收促销优惠？'的 VoiceOver 文本输出", width="640", height="174" %}</figure>
+
+{% Assessment 'self-assessment' %}
diff --git a/src/site/content/zh/accessible/labels-and-text-alternatives/self-assessment.assess.yml b/src/site/content/zh/accessible/labels-and-text-alternatives/self-assessment.assess.yml
new file mode 100644
index 00000000000..7a074e4e939
--- /dev/null
+++ b/src/site/content/zh/accessible/labels-and-text-alternatives/self-assessment.assess.yml
@@ -0,0 +1,89 @@
+setLeader: |
+  Check whether sample HTML elements have accessible names
+height: unset
+tabLabel: sample
+questions:
+  - stimulus: "![temp](image/user/temp.svg)"
+    type: think-and-check
+    stem: Does this image have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Give an image an accessible name by adding an `alt` attribute.
+  - stimulus: |
+      ```html
+      <object type="application/pdf" data="/report.pdf" alt="Annual report"></object>
+      ```
+    type: think-and-check
+    stem: Does this object have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give an `<object>` element a name by providing text content.
+          (An `alt` attribute on an object will not be read by assistive technologies.)
+  - stimulus: |
+      This sample renders an icon button:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **No**. Give a button an accessible name by providing text content,
+          an `aria-label` attribute, or an `aria-labelledby` attribute.
+  - stimulus: |
+      This sample renders an icon button with a tooltip that appears on hover and focus:
+
+      ```html
+      <button>
+        <svg class="icon">
+          <use xlink:href="#icon-1" />
+        </svg>
+        <span class="tooltip hidden">Open menu</span>
+      </button>
+      ```
+    type: think-and-check
+    stem: Does this button have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. Even if the button's tooltip is visually hidden using CSS,
+          assistive technologies can still read its text content.
+
+          **Caution:** When visually hiding button text,
+          use CSS rather than the `hidden` attribute.
+          The `hidden` attribute removes the element
+          from the accessibility tree.
+  - stimulus: |
+      ```html
+      <label>
+        <input type="checkbox" value="subscribe"></input>
+        Subscribe to the newsletter?
+      </label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **Yes**. The label is associated with the checkbox
+          because the label is the checkbox's parent.
+          So, assistive technologies treat the label's
+          text content as the input's name.
+  - stimulus: |
+      ```html
+      <input type="checkbox" value="subscribe"></input>
+      <label for="subscribe">Subscribe to the newsletter?</label>
+      ```
+    type: think-and-check
+    stem: Does this checkbox have an accessible name?
+    options:
+      - rationale: |
+          **No**. The checkbox's `value` attribute indicates
+          what text will be saved when the form is submitted,
+          but assistive technologies don't read it.
+          To provide an accessible name,
+          add an `id` attribute with the value `subscribe`
+          to associate the checkbox with the label.
diff --git a/src/site/content/zh/angular/index.md b/src/site/content/zh/angular/index.md
new file mode 100644
index 00000000000..618d51984e5
--- /dev/null
+++ b/src/site/content/zh/angular/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: angular
+---
diff --git a/src/site/content/zh/animations/index.md b/src/site/content/zh/animations/index.md
new file mode 100644
index 00000000000..f53160e06a5
--- /dev/null
+++ b/src/site/content/zh/animations/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: animations
+---
diff --git a/src/site/content/zh/blog/accent-color/index.md b/src/site/content/zh/blog/accent-color/index.md
new file mode 100644
index 00000000000..34b2b996be2
--- /dev/null
+++ b/src/site/content/zh/blog/accent-color/index.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: CSS “强调色”
+subhead: 使用一行代码将您的品牌颜色带入内置的 HTML 表单输入。
+authors:
+  - adamargyle
+  - jarhar
+description: 使用一行代码将您的品牌颜色带入内置的 HTML 表单输入。
+date: 2021-08-11
+thumbnail: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/WOcuCLCwMr0M2lF17bmm.png
+hero: image/vS06HQ1YTsbMKSFTIPl2iogUQP73/huEpiCoJQ6dAo8rHGsZT.png
+tags:
+  - blog
+  - css
+---
+
+当今的 HTML 表单元素[难于自定义](https://codepen.io/GeoffreyCrofte/pen/BiHzp)。感觉好像是在很少或没有自定义样式之间进行选择，或者重置输入样式并从头开始构建。从头开始构建工作量最终会比预期的多得多。还可能导致遗忘元素状态的样式（[不确定](https://developer.mozilla.org/docs/Web/CSS/:indeterminate)），以及内置辅助功能的丢失。完全重新创建浏览器提供的内容可能比您希望承担的工作更多。
+
+```css
+accent-color: hotpink;
+```
+
+[CSS UI 规范](https://www.w3.org/TR/css-ui-4/#widget-accent)中的 `accent-color` 在这里用一行 CSS 为元素着色，这种方法将您的品牌带入元素，使您免于自定义工作。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/CfSS3F1XUsfCHIB86xeE.png", alt="强调色演示的浅色主题截图，其中复选框、单选按钮、范围滑块和进度元素都被着色为热粉色。", width="800", height="548" %}<figcaption><a href="https://codepen.io/web-dot-dev/pen/PomBZdy">演示</a></figcaption></figure>
+
+`accent-color` 属性也适用于 [`color-scheme`](/color-scheme/) ，允许作者为浅色和深色元素着色。在以下示例中，用户激活了深色主题，页面使用 `color-scheme: light dark` ，并使用相同的 `accent-color: hotpink` 作为深色主题的热粉色着色控件。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/3gxeeZoSLY34tsMxkyt9.png", alt="强调色演示的深色主题截图，其中复选框、单选按钮、范围滑块和进度元素都被着色为热粉色。", width="800", height="548" %}<figcaption><a href="https://codepen.io/web-dot-dev/pen/PomBZdy">演示</a></figcaption></figure>
+
+### 浏览器支持
+
+撰写本文的当下，Chromium 93+ 和 Firefox 92+ 支持 `accent-color`。
+
+## 支持的元素
+
+目前，只有四个元素会通过 `accent-color` 属性着色：[复选框](#checkbox)、[单选按钮](#radio)、[范围滑块](#range)和[进度元素](#progress)。每个都有浅色和深色配色方案，可在 [https://accent-color.glitch.me](https://accent-color.glitch.me) 处预览。
+
+{% Aside "warning" %}如果以下演示元素的颜色都相同，则您的浏览器不支持 `accent-color`。 {% endAside %}
+
+### 复选框
+
+{% Codepen { user: 'web-dot-dev', id: 'dyWjGqZ' } %}
+
+### 单选按钮
+
+{% Codepen { user: 'web-dot-dev', id: 'WNjKrgB' } %}
+
+### 范围滑块
+
+{% Codepen { user: 'web-dot-dev', id: 'yLbqeRy' } %}
+
+### 进度元素
+
+{% Codepen { user: 'web-dot-dev', id: 'rNmrxqL' } %}
+
+## 保证对比度
+
+为了防止存在不可访问的元素，具备 `accent-color` 的浏览器需要确定[符合条件的对比度颜色](https://webaim.org/articles/contrast/)，以便与自定义强调色一起使用。下面的截图展示了 Chrome 94（左）和 Firefox 92 Nightly（右）在算法上的不同：
+
+{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/DJhB56n10Eh8O29RsRdE.png", alt="Firefox 和 Chromium 并排的屏幕截图，以各种色调和暗度呈现系列复选框。", width="800", height="832" %}
+
+最重要的一点是要**信任浏览器**。提供品牌颜色，并相信它会为您做出明智的决定。
+
+{% Aside %} 浏览器不会在深色主题中更改您的颜色。 {% endAside %}
+
+## 额外：更多着色
+
+您可能想知道如何为这四个表单元素之外的其他元素着色，是吧？尤其以下几个元素的着色：
+
+- 对焦环
+- 文本选择突出显示
+- 列表[标记](/css-marker-pseudo-element/)
+- 箭头指示符（仅限 Webkit）
+- 滚动条滑块（仅限 Firefox）
+
+```css
+html {
+  --brand: hotpink;
+  scrollbar-color: hotpink Canvas;
+}
+
+:root { accent-color: var(--brand); }
+:focus-visible { outline-color: var(--brand); }
+::selection { background-color: var(--brand); }
+::marker { color: var(--brand); }
+
+:is(
+  ::-webkit-calendar-picker-indicator,
+  ::-webkit-clear-button,
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button
+) {
+  color: var(--brand);
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'RwVBreJ' } %}
+
+### 潜在的未来
+
+该规范并未将 `accent-color` 的应用限制在本文中显示的四个元素上，以后可能会添加更多支持。`<select>` 中选定的 `<option>` 等元素可以采用 `accent-color` 突出显示。
+
+您还希望对网页上的什么着色？将您的选择通过推特[发给 @argyleink](https://twitter.com/argyleink) ，有可能会被添加到本文中！
diff --git a/src/site/content/zh/blog/app-shortcuts/index.md b/src/site/content/zh/blog/app-shortcuts/index.md
new file mode 100644
index 00000000000..92577aab79c
--- /dev/null
+++ b/src/site/content/zh/blog/app-shortcuts/index.md
@@ -0,0 +1,158 @@
+---
+title: 使用应用程序快捷方式快速完成任务
+subhead: 利用应用程序的快捷方式可快速访问用户经常需要的一些常见操作。
+authors:
+  - beaufortfrancois
+  - jungkees
+date: 2020-05-20
+updated: 2021-10-12
+hero: image/admin/1ekafMZjtzcd0G3TLQJ4.jpg
+alt: 显示应用程序快捷方式菜单的 Android 手机照片
+description: 利用应用程序快捷方式可快速访问用户经常需要的一些常见操作。
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+为了提高用户的效率并促进重新参与关键任务，网络平台现在支持应用程序快捷方式。通过这些快捷方式，Web 开发人员可以快速访问用户经常需要的一些常见操作。
+
+本文将讲述如何定义这些应用程序快捷方式。此外，您还将了解一些相关的最佳实践。
+
+## 关于应用程序快捷方式
+
+应用程序快捷方式可帮助用户在您的 Web 应用程序中快速启动常见或推荐的任务。从显示应用程序图标的任何位置轻松访问这些任务将提高用户的效率并增加对 Web 应用程序的使用。
+
+通过右键单击用户桌面上任务栏 (Windows) 或程序坞 (macOS) 中的应用程序图标，或在 Android 上长按应用程序的启动图标，可以调用应用程序快捷方式菜单。
+
+<figure>{% Img src="image/admin/F4TsJNfRJNJSt2ZpqVAy.png", alt="Android 上打开的应用快捷菜单截图", width="800", height="420" %}<figcaption>在 Android 上打开的应用程序快捷方式菜单</figcaption></figure>
+
+<figure>{% Img src="image/admin/RoF6k7Aw6WNvaEcsgIcb.png", alt="在 Windows 上打开的应用程序快捷菜单的屏幕截图", width="800", height="420" %}<figcaption>在 Windows 上打开的应用程序快捷方式菜单</figcaption></figure>
+
+应用程序快捷方式菜单仅针对安装在用户桌面或移动设备上的[渐进式 Web 应用程序](/progressive-web-apps/) 显示。查看[怎样才能设置成可安装？](/install-criteria/)了解可安装性要求。
+
+每个应用程序快捷方式都表达了一个用户意向，每个意向都与您的 Web 应用程序[范围内的 URL 相关联。](/add-manifest/#scope)在用户激活应用程序快捷方式时打开 URL。应用程序快捷方式的示例包括以下内容：
+
+- 顶层导航项（例如，主页、时间表、最近的订单）
+- 搜索
+- 数据录入任务（例如，编写电子邮件或推文，添加收据）
+- 活动（例如，开始与最受欢迎的联系人聊天）
+
+{% Aside %}非常感谢 Microsoft Edge 和 Intel 设计和标准化应用程序快捷方式的工作人员。Chrome 依赖于提交者社区的共同协作来推进 Chromium 项目的发展。并非每个 Chromium 提交者都是 Google 员工，这些做出贡献的人值得特别表扬！{% endAside %}
+
+## 在 Web 应用程序清单中定义应用程序快捷方式
+
+应用程序快捷方式可以选择在 [Web 应用程序清单](/add-manifest)中定义，它是一个 JSON 文件，告知浏览器您的渐进式 Web 应用程序，以及在用户桌面或移动设备上安装时其应如何表现。更具体地说，它们是在 `shortcuts` 数组成员中声明的。下面是一个潜在的 Web 应用程序清单的示例。
+
+```json
+{
+  "name": "Player FM",
+  "start_url": "https://player.fm?utm_source=homescreen",
+  …
+  "shortcuts": [
+    {
+      "name": "Open Play Later",
+      "short_name": "Play Later",
+      "description": "View the list of podcasts you saved for later",
+      "url": "/play-later?utm_source=homescreen",
+      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "View Subscriptions",
+      "short_name": "Subscriptions",
+      "description": "View the list of podcasts you listen to",
+      "url": "/subscriptions?utm_source=homescreen",
+      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
+    }
+  ]
+}
+```
+
+`shortcuts` 数组的每个成员都是至少包含一个 `name` 和一个 `url` 的字典。其他成员是可选的。
+
+### name
+
+向用户显示时应用程序快捷方式的用户可读标签。
+
+### short_name（可选）
+
+有有限空间下使用的用户可读标签。此项是可选项，但仍建议您提供。
+
+### description（可选）
+
+应用程序快捷方式的用户可读目的。在编写本文时尚未使用，但将来可能会应用于辅助技术。
+
+### url
+
+用户激活应用程序快捷方式时打开的 URL。此 URL 必须存在于 Web 应用程序清单的范围内。如果它是相对的 URL，则基准 URL 将是 Web 应用程序清单的 URL。
+
+### icons（可选）
+
+一组图像资源对象。每个对象都必须包含 `src` 和 `sizes` 属性。与 [Web 应用程序清单图标](/add-manifest/#icons)不同，图像的 `type` 是可选的。
+
+编写本文时不支持 SVG 文件，请改用 PNG。
+
+如果您想要像素完美的图标，请以 48dp（即 36x36、48x48、72x72、96x96、144x144、192x192 像素图标）的递增量提供它们。否则，建议您使用单个 192x192 像素图标。
+
+作为质量衡量标准，图标必须至少是 Android 设备理想尺寸的一半，即 48dp。例如，要在 [xxhdpi 屏幕上](https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp)显示，图标必须至少为 72 x 72 像素。（这是从将 dp 单位转换为像素单位的[公式](https://developer.android.com/training/multiscreen/screendensities#dips-pels)得出的。）
+
+## 测试您的应用程序快捷方式
+
+要验证您的应用程序快捷方式设置是否正确，请使用 DevTools 的**应用程序**面板中的**清单**窗格。
+
+<figure>{% Img src="image/admin/rEL0r8lEfYHlsj0ylLSL.png", alt="DevTools 中应用程序快捷方式的屏幕截图", width="800", height="534" %}<figcaption> DevTools 中显示的应用程序快捷方式</figcaption></figure>
+
+此窗格提供了许多清单属性的用户可读版本，包括应用程序快捷方式。它可以轻松验证所有快捷方式图标（如果提供）是否正确加载。
+
+应用程序快捷方式可能无法立即对所有用户可用，因为渐进式 Web 应用程序更新仅限于每天一次。了解更多关于 [Chrome 如何处理网络应用程序清单的更新](/manifest-updates)的信息。
+
+## 最佳实践
+
+### 按优先顺序排序应用快捷方式
+
+鼓励您按优先顺序排列应用程序快捷方式，最关键的应用程序快捷方式首先出现在 `shortcuts` 数组中，因为显示的应用程序快捷方式数量限制因平台而异。例如，Windows 上的 Chrome 和 Edge 将应用程序快捷方式的数量限制为 10 个，而用于 Android 的 Chrome 仅考虑前 4 个应用程序快捷方式。
+
+{% Aside %}用于 Android 7 的 Chrome 92 现在仅允许 3 个应用程序快捷方式。增加了站点设置的快捷方式，占用应用程序的可用快捷方式槽之一。 {% endAside %}
+
+### 使用不同的应用程序快捷方式名称
+
+您不应依赖图标来区分应用程序快捷方式，因为图标可能并不总是可见的。例如，macOS 不支持 Dock 快捷方式菜单中的图标。为每个应用程序快捷方式使用不同的名称。
+
+### 衡量应用程序快捷方式的使用情况
+
+您应该像处理 `start_url` 的方式一样对应用程序快捷方式 `url` 条目进行注释以进行分析（例如 `url: "/my-shortcut?utm_source=homescreen"` ）。
+
+## 浏览器支持
+
+应用程序快捷方式可在 Android (Chrome 84)、Windows（Chrome 85 和 Edge 85）、ChromeOS（Chrome 92）、macOS 和 Linux（Chrome 96 和 Edge 96）上可用。
+
+<figure>{% Img src="image/vvhSqZboQoZZN9wBvoXq72wzGAf1/6KgvySxUcryuD0gwXa0u.png",alt="Chrome 操作系统上打开的应用快捷菜单截图", width="800", height="450" %}<figcaption>在 Chrome 操作系统上打开的应用程序快捷方式菜单</figcaption></figure>
+
+## 支持可信的 Web 活动
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) 是构建使用[可信 Web 活动](/using-a-pwa-in-your-android-app/) 的 Android 应用程序的推荐工具，它从 Web 应用程序清单中读取应用程序快捷方式并自动为 Android 应用程序生成相应的配置。请注意，应用程序快捷方式的图标是[必需的](https://github.com/GoogleChromeLabs/bubblewrap/issues/116)，并且在 Bubblewrap 中必须至少为 96 x 96 像素。
+
+[PWABuilder](https://www.pwabuilder.com/) 是一个很好的工具，可以轻松地将渐进式 Web 应用程序转换为可信 Web 活动，支持应用程序快捷方式，但有一些[注意事项](https://github.com/pwa-builder/CloudAPK/issues/25)。
+
+对于将可信 Web 活动手动集成到他们的 Android 应用程序中的开发人员，可以使用 [Android 应用程序快捷方式](https://developer.android.com/guide/topics/ui/shortcuts)来实现相同的行为。
+
+## 示例
+
+<figure>
+  <video controls autoplay loop muted src="https://storage.googleapis.com/web-dev-assets/app-shortcuts/app-shortcuts-recording.mp4">
+  </video></figure>
+
+查看[应用程序快捷方式示例](https://app-shortcuts.glitch.me)及其[源代码](https://glitch.com/edit/#!/app-shortcuts)。
+
+{% Glitch { id: 'app-shortcuts', path: 'public/manifest.json', height: 480 } %}
+
+## 有用的链接
+
+- [解释说明](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Shortcuts/explainer.md)
+- [具体说明](https://w3c.github.io/manifest/#shortcuts-member)
+- [应用程序快捷方式示例](https://app-shortcuts.glitch.me)|[应用程序快捷方式示例源](https://glitch.com/edit/#!/app-shortcuts)
+- [跟踪错误](https://bugs.chromium.org/p/chromium/issues/detail?id=955497)
+- [ChromeStatus.com 条目](https://chromestatus.com/feature/5706099464339456)
+- 闪烁组件： [`UI>Browser>WebAppInstalls`](https://crbug.com/?q=component:UI%3EBrowser%3EWebAppInstalls)
diff --git a/src/site/content/zh/blog/appcache-removal/index.md b/src/site/content/zh/blog/appcache-removal/index.md
new file mode 100644
index 00000000000..088876fa733
--- /dev/null
+++ b/src/site/content/zh/blog/appcache-removal/index.md
@@ -0,0 +1,186 @@
+---
+layou: post
+title: 准备进行 AppCache 移除
+subhead: Chrome 85 默认取消了对 AppCache 的支持。大多数开发人员应立即从 AppCache 迁移，不要再等待。
+authors:
+  - jeffposnick
+description: Chrome 和其他浏览器的 AppCache 移除计划的详细信息。
+date: 2020-05-18
+updated: 2021-08-23
+tags:
+  - blog
+  - chrome-84
+  - origin-trials
+  - service-worker
+hero: image/admin/YDs2H4gLPhIwPMjPtc8o.jpg
+alt: 一个老式的存储容器。
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673"
+---
+
+继[之前的公告](https://blog.chromium.org/2020/01/appcache-scope-restricted.html)之后，Chrome 和其他基于 Chromium 的浏览器将不再[支持 AppCache](https://developer.mozilla.org/docs/Web/API/Window/applicationCache)。我们鼓励开发人员立即从 AppCache 迁移，不要再继续等待。
+
+当前浏览器广泛支持的 [Service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/) 是一种替代方案，可以提供 AppCache 所提供的离线体验。请参阅[迁移策略](#migration-strategies)。
+
+## 时间线
+
+Chrome 发布时间表[最近的变化](https://blog.chromium.org/2020/03/chrome-and-chrome-os-release-updates.html)意味着其中一些步骤的时间可能会有所不同。我们会尽量实时更新该时间表，但此时，请尽快从 AppCache 迁移，不要再继续等待特定的里程碑。
+
+“已弃用”的功能仍然存在，但会记录不鼓励使用的警告消息。在“已移除”的功能会从浏览器中消失。
+
+<div>
+  <table>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/UKF8cK0EwMI/m/NLhsIrs-AQAJ">在非安全上下文中弃用</a></td>
+    <td>Chrome 50（2016 年 4 月）</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/ANnafFBhReY/m/1Xdr53KxBAAJ?pli=1">从非安全上下文中移除</a></td>
+    <td>Chrome 70（2018 年 10 月）</td>
+    </tr>
+    <tr>
+    <td><a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/0daqyD8kCQAJ">在安全上下文中弃用</a></td>
+    <td>Chrome 79（2019 年 12 月）</td>
+    </tr>
+    <tr>
+    <td><a href="https://blog.chromium.org/2020/01/appcache-scope-restricted.html">AppCache 范围限制</a></td>
+    <td>Chrome 80（2020 年 2 月）</td>
+    </tr>
+    <tr>
+    <td>“反向”初始试用开始</td>
+    <td>Chrome 84（2020 年 7 月）</td>
+    </tr>
+    <tr>
+    <td>
+<a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/FvM-qo7BfkI/m/AvxoE6JpBgAJ">从安全上下文中移除</a>，选择加入初始试用的用户除外</td>
+    <td>Chrome 85（2020 年 8 月）</td>
+    </tr>
+    <tr>
+    <td>完全从每个人的安全上下文中移除，初始试用已完成</td>
+    <td>2021 年 10 月 5 日（大约是 Chrome 95）</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %} 该时间表适用于**除 iOS 之外的所有平台**上的 Chrome。在 [Android WebView](https://developer.android.com/reference/android/webkit/WebView) 中使用的 AppCache 也有一个调整后的时间表。有关更多信息，请参阅本文后面的[跨平台详情](#the-cross-platform-story)。{% endAside %}
+
+## 初始试用
+
+时间表列出了两个即将到来的待移除里程碑。从 Chrome 85 开始，默认情况下，Chrome 中将不再提供 AppCache。需要更多时间从 AppCache 迁移的开发人员可以[注册](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673)“反向” [初始试用](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)，以扩展 AppCache 对其 Web 应用程序的可用性。初始试用将在 Chrome 84 中开始（在 Chrome 85 中的默认移除之前），并将持续到 2021 年 10 月 5 日（大约是 Chrome 95）。届时，所有人都将完全移除 AppCache，包括那些已注册初始试用的用户。
+
+{% Aside %} 为什么我们称其为“反向”初始试用？通常，初始试用可以让开发人员在新功能在 Chrome 中默认发布之前选择提前进行访问。在这种情况下，开发人员可以在旧技术从 Chrome 中移除后仍然可以选择继续使用，但只限暂时使用。{% endAside %}
+
+参与“反向”初始试用：
+
+<ol>
+<li>为您的初始试用<a href="https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673">申请一个令牌</a>。</li>
+<li>将该令牌添加到您的 HTML 页面。这可以通过<a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md#how-do-i-enable-an-experimental-feature-on-my-origin">两种方法</a>实现：<ul>
+<li>在每个页面的头部添加一个 <code>origin-trial</code> <code>&lt;meta&gt;</code> 标记。例如：<code>&lt;meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"&gt;</code> </li> <li> 或者，将您的服务器配置为返回包含 <code>Origin-Trial</code> HTTP 标头的响应。生成的响应标头应该类似于：<code>Origin-Trial: TOKEN_GOES_HERE</code> </li> </ul>
+</li>
+<li>将同一令牌添加到您的 AppCache 清单。通过清单中的新字段完成此操作，格式为：</li>
+</ol>
+
+```text
+ORIGIN-TRIAL:
+TOKEN_GOES_HERE
+```
+
+（`ORIGIN-TRIAL` 与您的令牌之间需要换行。）
+
+
+
+
+
+{% Aside %} 清单的令牌**必须**位于清单本身的 `ORIGIN-TRIAL` 字段中。与 HTML 页面的令牌不同，它不能通过 HTTP 标头提供。{% endAside %}
+
+您可以看到下面嵌入的示例项目，该项目演示了如何将正确的初始试用令牌添加到 `index.html` 和 `manifest.appcache` 文件中。
+
+{% Glitch { id: 'appcache-reverse-ot', path: 'manfiest.appcache', height: 480 } %}
+
+### 为什么在多个地方都需要令牌？
+
+**同一个初始试用令牌**需要与下列各项进行关联：
+
+- 使用 AppCache 的**所有 HTML 页面**。
+- **您的所有 AppCache 清单（**通过`ORIGIN-TRIAL` 清单字段。
+
+如果您过去参与过初始试用，您可能只是将令牌添加到您的 HTML 页面中。AppCache“反向”初始试用的特殊之处在于您还需要将令牌与您的每个 AppCache 清单相关联。
+
+将初始试用令牌添加到您的 HTML 页面可从您的 Web 应用程序中启用 `window.applicationCache` 接口。未与令牌关联的页面将无法使用 `window.applicationCache` 方法和事件。没有令牌的页面也无法从 AppCache 加载资源。从 Chrome 85 开始，页面行为就会像 AppCache 不存在一样。
+
+将初始试用令牌添加到您的 AppCache 清单表明每个清单仍然有效。从 Chrome 85 开始，任何没有 `ORIGIN-TRIAL` 字段的清单都将被视为格式错误，并且清单中的规则将被忽略。
+
+### 初始试用部署时间和相关工作
+
+虽然“反向”初始试用正式从 Chrome 84 开始，但您现在就可以[注册](https://developers.chrome.com/origintrials/#/register_trial/1776670052997660673)初始试用并将令牌添加到您的 HTML 和 AppCache 清单中。随着您的网络应用的受众逐渐升级到 Chrome 84，您已添加的任何令牌都将生效。
+
+将令牌添加到 AppCache 清单后，请访问 `about://appcache-internals` 以确认您的本地 Chrome 实例（版本 84 或更高版本）已将初始试用令牌与清单的缓存条目正确关联。如果您的初始试用被识别，您应该在该页面上看到一个包含 `Token Expires: Tue Apr 06 2021...` 的字段与您的清单相关联：
+
+<figure>{% Img src="image/admin/Xid94kdPT5yGbQzBL4at.jpg", alt="about://appcache-internals 界面显示了一个已识别的令牌。", width="550", height="203" %}</figure>
+
+## 移除前测试
+
+我们强烈建议您尽快从 AppCache 迁移。如果您想在 Web 应用上测试 AppCache 的移除，可使用 `about://flags/#app-cache` [标志](https://www.chromium.org/developers/how-tos/run-chromium-with-flags)来模拟它的移除。此标志从 Chrome 84 开始可用。
+
+## 迁移策略 {: #migration-strategies }
+
+[当前浏览器广泛支持的](https://developer.mozilla.org/docs/Web/API/ServiceWorker#Browser_compatibility) Service worker 是一种替代方案，可以提供 AppCache 所提供的离线体验。
+
+我们提供了一个 [Polyfill](https://github.com/GoogleChromeLabs/sw-appcache-behavior)，它使用 Service worker 来复制 AppCache 的一些功能，但它不会复制整个 AppCache 接口。特别是，它不提供 `window.applicationCache` 接口或相关 AppCache 事件的替代。
+
+对于更复杂的情况，像 [Workbox](https://developer.chrome.com/docs/workbox/) 这样的库提供了一种简单的方法来为您的 Web 应用创建现代 Service worker。
+
+### Service worker 和 AppCache 不能同时使用
+
+在制定您的迁移策略时，请记住，Chrome 将禁用在 Service worker [控制](/service-worker-lifecycle/#scope-and-control)下加载的任何页面上的 AppCache 功能。换句话说，一旦您部署了控制给定页面的 Service worker，您就无法再在该页面上使用 AppCache。
+
+因此，我们建议您不要尝试逐个迁移到 Service worker。部署一个只包含一部分缓存逻辑的 Service worker 是错误的。您不能回退到让 AppCache 来“填补空白”。
+
+同样，如果您在移除 AppCache 之前部署了 Service worker，然后发现需要回滚到之前的 AppCache 实现，则需要确保[取消注册](https://stackoverflow.com/a/33705250/385997)该 Service worker。只要给定页面的范围内有注册的 Service worker，就不会使用 AppCache。
+
+## 跨平台详情
+
+如果您想了解有关 AppCache 移除计划的更多信息，我们建议您与特定的浏览器供应商联系。
+
+### 所有平台上的 Firefox
+
+Firefox 在第 44 版（2015 年 9 月）中[弃用了](https://www.fxsitecompat.dev/en-CA/docs/2015/application-cache-api-has-been-deprecated/) AppCache，并在 2019 年 9 月的 Beta 和 Nightly 版本中[移除了](https://www.fxsitecompat.dev/en-CA/docs/2019/application-cache-storage-has-been-removed-in-nightly-and-early-beta/)对它的支持。
+
+### iOS 和 macOS 上的 Safari
+
+Safari 在 2018 年初[弃用了 AppCache](https://bugs.webkit.org/show_bug.cgi?id=181764)。
+
+### iOS 上的 Chrome
+
+适用于 iOS 的 Chrome 是一个特例，因为它使用与其他平台上的 Chrome 不同的浏览器引擎：[WKWebView](https://developer.apple.com/documentation/webkit/wkwebview)。使用 WKWebView 的 iOS 应用目前不支持 Service worker，并且 Chrome 的 AppCache 移除公告不包括 [AppCache 在 iOS 版 Chrome 上的可用性](https://webkit.org/status/#specification-application-cache)。如果您知道您的 Web 应用拥有大量的 iOS 版 Chrome 受众，请谨记这一点。
+
+### Android WebView
+
+一些 Android 应用程序的开发人员使用 Chrome [WebView](https://developer.android.com/reference/android/webkit/WebView) 来显示 Web 内容，也可能使用 AppCache。但是，无法为 WebView 启用初始试用。因此，Chrome WebView 将支持 AppCache，无初始试用，直到预计在 Chrome 90 进行的最终移除。
+
+## 了解更多
+
+以下是一些供开发人员从 AppCache 迁移到 Service worker 的资源。
+
+### 文章
+
+- [Service worker：简介](https://developer.chrome.com/docs/workbox/service-worker-overview/)
+- [Service worker 生命周期](/service-worker-lifecycle/)
+- [渐进式 Web 应用培训](https://developers.google.com/web/ilt/pwa)
+- [网络可靠性](/reliable/)
+
+### 工具
+
+- [AppCache Polyfill](https://github.com/GoogleChromeLabs/sw-appcache-behavior)
+- [Workbox](https://developer.chrome.com/docs/workbox/)
+- [PWA 生成器](https://www.pwabuilder.com/)
+
+## 获得帮助
+
+如果您使用特定工具遇到问题，请在其 GitHub 存储库中提出问题。
+
+您可以使用标签 <code>[html5-appcache](https://stackoverflow.com/questions/tagged/html5-appcache)</code> 标签在 [Stack Overflow](https://stackoverflow.com/) 上询问有关迁移 AppCache 的一般问题。
+
+如果您遇到与 Chrome 的 AppCache 移除相关的错误，请使用 Chromium 问题跟踪器[报告](https://crbug.com/new)。
+
+*主图取材于[史密森学会档案馆，Acc. 11-007，Box 020, 图像编号 MNH-4477。](https://www.si.edu/object/usnm-storage-drawer:siris_arc_391797)*
diff --git a/src/site/content/zh/blog/async-clipboard/index.md b/src/site/content/zh/blog/async-clipboard/index.md
new file mode 100644
index 00000000000..32dd42cb8ae
--- /dev/null
+++ b/src/site/content/zh/blog/async-clipboard/index.md
@@ -0,0 +1,311 @@
+---
+title: 解锁剪贴板访问
+subhead: 更安全、畅通无阻的文本和图像剪贴板访问
+authors:
+  - developit
+  - thomassteiner
+description: 异步剪贴板 API 简化并带来权限友好的复制和粘贴。
+date: 2020-07-31
+updated: 2021-07-29
+tags:
+  - blog
+  - capabilities
+hero: image/admin/aA9eqo0ZZNHFcFJGUGQs.jpg
+alt: 含购物清单的剪贴板
+feedback:
+  - api
+---
+
+过去几年中，浏览器使用 [`document.execCommand()`](https://developers.google.com/web/updates/2015/04/cut-and-copy-commands) 进行剪贴板交互。虽然得到了广泛的支持，但这种剪切和粘贴的方法有一定的代价：剪贴板访问是同步的，只能读写 DOM。
+
+这对于少量文本来说没什么问题，但在很多情况下，阻止剪贴板传输页面是一种糟糕的体验。在安全粘贴内容之前，可能需要进行耗时的清理或图像解码。浏览器可能需要从粘贴的文档加载或内联链接资源。这会在等待磁盘或网络时阻塞页面。想象一下这种混乱的权限：要求浏览器在请求剪贴板访问时阻止页面；同时，围绕剪贴板交互的 `document.execCommand()` 权限又采用松散定义，在不同的浏览器之间不同。
+
+[异步剪贴板 API](https://www.w3.org/TR/clipboard-apis/#async-clipboard-api) 解决了这些问题，提供了定义明确的权限模型，不会阻止页面。Safari 最近宣布[在 13.1 版中支持该功能](https://webkit.org/blog/10855/)。有了这个，主要浏览器就有了基本的支持。在撰写本文时，Firefox 仅支持文本；在某些浏览器中，图像支持仅限于 PNG。如果您对使用 API 感兴趣，请在继续之前[查阅浏览器支持表](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)。
+
+{% Aside %} 异步剪贴板 API 仅限于处理文本和图像。Chrome 84 引入了一项实验性功能，允许剪贴板处理任意数据类型。 {% endAside %}
+
+## 复制：将数据写入剪贴板
+
+### writeText()
+
+要将文本复制到剪贴板，请调用 `writeText()` 。由于此 API 是异步的，因此 `writeText()` 函数会返回一个 Promise，该 Promise 会根据传递的文本是否复制成功来解决或拒绝：
+
+```js
+async function copyPageUrl() {
+  try {
+    await navigator.clipboard.writeText(location.href);
+    console.log('Page URL copied to clipboard');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+```
+
+### write()
+
+实际上，`writeText()` 只是通用 `write()` 方法的一种便捷方法。后者也允许您将图像复制到剪贴板，与 `writeText()` 一样，它为异步并会返回一个 Promise。
+
+要将图像写入剪贴板，您需要将图像作为 [`blob`](https://developer.mozilla.org/docs/Web/API/blob) 。一种方法是使用 `fetch()` 从服务器请求图像，然后在响应时调用 [`blob()`](https://developer.mozilla.org/docs/Web/API/Body/blob)。
+
+由于各种原因，从服务器请求图像可能是不可取的或不可能的。幸运的是，您还可以将图像绘制到画布上并调用画布的 [`toBlob()`](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob) 方法。
+
+接下来，将 `ClipboardItem` 对象数组作为参数传递给 `write()` 方法。目前一次只能传递一张图片，但我们希望在未来增加对多张图片的支持。`ClipboardItem` 以图像的 MIME 类型的对象为键，以 blob 为值。对于从 `fetch()`或`canvas.toBlob()` 获取的 Blob 对象， `blob.type` 属性会自动包含图像的正确 MIME 类型。
+
+```js
+try {
+  const imgURL = '/images/generic/file.png';
+  const data = await fetch(imgURL);
+  const blob = await data.blob();
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+  console.log('Image copied.');
+} catch (err) {
+  console.error(err.name, err.message);
+}
+```
+
+{% Aside 'warning' %} Safari (WebKit) 处理用户激活的方式与 Chromium (Blink) 不同（请参阅[WebKit 错误 #222262](https://bugs.webkit.org/show_bug.cgi?id=222262) ）。对于 Safari，在您将其结果分配给 `ClipboardItem` 的 Promise 中运行所有异步操作：
+
+```js
+new ClipboardItem({
+  'foo/bar': new Promise(async (resolve) => {
+      // Prepare `blobValue` of type `foo/bar`
+      resolve(new Blob([blobValue], { type: 'foo/bar' }));
+    }),
+  })
+```
+
+{% endAside %}
+
+### 复制事件
+
+在用户启动剪贴板复制的情况下，非文本数据作为 Blob 提供给您。 [`copy` 事件](https://developer.mozilla.org/docs/Web/API/Document/copy_event)包含 `clipboardData` 属性，其中的项目已经采用正确的格式，从而无需手动创建 Blob。调用 `preventDefault()` 以阻止默认行为以支持您自己的逻辑，然后将内容复制到剪贴板。本示例中未提到如何在剪贴板 API 不受支持时回退到较早的 API。我将在本文后面的[功能检测](#feature-detection)下进行介绍。
+
+```js
+document.addEventListener('copy', async (e) => {
+    e.preventDefault();
+    try {
+      let clipboardItems = [];
+      for (const item of e.clipboardData.items) {
+        if (!item.type.startsWith('image/')) {
+          continue;
+        }
+        clipboardItems.push(
+          new ClipboardItem({
+            [item.type]: item,
+          })
+        );
+        await navigator.clipboard.write(clipboardItems);
+        console.log('Image copied.');
+      }
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  });
+```
+
+## 粘贴：从剪贴板读取数据
+
+### readText()
+
+要从剪贴板读取文本，调用 `navigator.clipboard.readText()` 并等待返回的 Promise 以进行解析：
+
+```js
+async function getClipboardContents() {
+  try {
+    const text = await navigator.clipboard.readText();
+    console.log('Pasted content: ', text);
+  } catch (err) {
+    console.error('Failed to read clipboard contents: ', err);
+  }
+}
+```
+
+### read()
+
+`navigator.clipboard.read()` 方法也为异步，会返回一个 Promise。要从剪贴板读取图像，请获取 [`ClipboardItem`](https://developer.mozilla.org/docs/Web/API/ClipboardItem) 对象的列表，然后循环访问它们。
+
+每个 `ClipboardItem` 能够以不同的类型保存其内容，因此您需要循环访问类型列表，再次使用 `for...of` 循环。对于每种类型，以当前类型为参数调用 `getType()` 方法以获取相应的 Blob。和以前一样，此代码与图像无关，并且将适用于未来的其他文件类型。
+
+```js
+async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        console.log(URL.createObjectURL(blob));
+      }
+    }
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+```
+
+### 处理粘贴的文件
+
+用户能够使用剪贴板键盘快捷键（例如 <kbd>ctrl</kbd> + <kbd>c</kbd> 和 <kbd>ctrl</kbd> + <kbd>v</kbd> ）很有用。Chromium 在剪贴板上公开*只读*文件，如下所述。当用户点击操作系统的默认粘贴快捷方式或当用户依次点击浏览器菜单栏中的**编辑**、**粘贴**时，会触发此事件。不需要进一步的管道代码。
+
+```js
+document.addEventListener("paste", async e => {
+  e.preventDefault();
+  if (!e.clipboardData.files.length) {
+    return;
+  }
+  const file = e.clipboardData.files[0];
+  // Read the file's contents, assuming it's a text file.
+  // There is no way to write back to it.
+  console.log(await file.text());
+});
+```
+
+### 粘贴事件
+
+如前所述，已在实施一些计划来引入事件与剪贴板 API 一起使用，但现在您可以使用现有的 `paste` 事件。它与用于读取剪贴板文本的新异步方法配合得很好。与 `copy` 事件一样，不要忘记调用 `preventDefault()` 。
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  const text = await navigator.clipboard.readText();
+  console.log('Pasted text: ', text);
+});
+```
+
+与 `copy` 事件一样，将在下文中的[功能检测](#feature-detection)中介绍剪贴板 API 不受支持时回退到早期 API 方面的内容。
+
+## 处理多种文件类型
+
+大多数实现将多种数据格式放在剪贴板上以进行单个剪切或复制操作。这有两个原因：作为应用程序开发人员，您无法知道用户想要复制文本或图像的应用程序的功能，并且许多应用程序支持将结构化数据粘贴为纯文本。这将通过**编辑**菜单项呈现给用户，该菜单项的名称为**粘贴并匹配样式**或**不带格式粘贴** 。
+
+以下示例显示了如何执行此操作。此示例使用 `fetch()` 获取图像数据，但图像数据也可能来自 [`<canvas>`](https://developer.mozilla.org/docs/Web/HTML/Element/canvas) 或[文件系统访问 API](/file-system-access/) 。
+
+```js
+async function copy() {
+  const image = await fetch('kitten.png');
+  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
+  const item = new ClipboardItem({
+    'text/plain': text,
+    'image/png': image
+  });
+  await navigator.clipboard.write([item]);
+}
+```
+
+## 安全和权限
+
+剪贴板访问一直是浏览器的安全问题。如果没有适当的权限，页面可能会悄悄地将各种恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。想象一个网页，它默默地将 `rm -rf /` 或[解压炸弹图像](http://www.aerasec.de/security/advisories/decompression-bomb-vulnerability.html)复制到您的剪贴板。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Dt4QpuEuik9ja970Zos1.png", alt="浏览器提示询问用户剪贴板权限。", width="800", height="338" %}<figcaption>剪贴板 API 的权限提示。</figcaption></figure>
+
+让网页不受限制地读取剪贴板的权限就更麻烦了。用户通常会将密码和个人详细信息等敏感信息复制到剪贴板，然后任何页面都可以在用户不知情的情况下读取这些信息。
+
+与许多新 API 一样，剪贴板 API 仅支持通过 HTTPS 提供的页面。为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。
+
+复制和粘贴权限已添加到 [Permissions API](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web) 中。当页面处于活动标签页时，会自动授予 `clipboard-write` 权限。必须请求 `clipboard-read` 权限，这在您尝试从剪贴板读取数据时需要执行。下面的代码显示了后者：
+
+```js
+const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
+const permissionStatus = await navigator.permissions.query(queryOpts);
+// Will be 'granted', 'denied' or 'prompt':
+console.log(permissionStatus.state);
+
+// Listen for changes to the permission state
+permissionStatus.onchange = () => {
+  console.log(permissionStatus.state);
+};
+```
+
+您可以使用 `allowWithoutGesture` 选项控制是否需要用手势来调用剪切或粘贴。此值的默认值因浏览器而异，因此您应始终包含它。
+
+剪贴板 API 的异步特性真正派上用场的地方在于：如果尚未授予权限，尝试读取或写入剪贴板数据的操作会自动提示用户授予权限。由于 API 是基于承诺的，这是完全透明的，用户拒绝剪贴板权限会导致承诺拒绝，因此页面可以做出适当的响应。
+
+因为 Chrome 仅在页面是活动选项卡时才允许剪贴板访问，您会发现这里的某些示例如果直接粘贴到 DevTools 中将无法运行，因为 DevTools 本身就是活动选项卡。有一个技巧：使用 `setTimeout()` 延迟剪贴板访问，然后在调用函数之前快速点击页面内部以将其聚焦：
+
+```js
+setTimeout(async () => {
+  const text = await navigator.clipboard.readText();
+  console.log(text);
+}, 2000);
+```
+
+## 权限策略集成
+
+要在 iframe 中使用 API，您需要使用[权限策略](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)启用它，权限策略定义了一种机制，允许有选择地启用和禁用各种浏览器功能和 API。具体来说，您需要根据应用程序的需要传递 `clipboard-read` 或 `clipboard-write` 之一或两者。
+
+```html/2
+<iframe
+    src="index.html"
+    allow="clipboard-read; clipboard-write"
+>
+</iframe>
+```
+
+## 功能检测
+
+要在支持所有浏览器的同时使用异步剪贴板 API，请测试 `navigator.clipboard` 并回退到较早的方法。例如，您可以通过以下方式实现粘贴以包含其他浏览器。
+
+```js
+document.addEventListener('paste', async (e) => {
+  e.preventDefault();
+  let text;
+  if (navigator.clipboard) {
+    text = await navigator.clipboard.readText();
+  }
+  else {
+    text = e.clipboardData.getData('text/plain');
+  }
+  console.log('Got pasted text: ', text);
+});
+```
+
+这还不是全部。在异步剪贴板 API 出现之前，跨 Web 浏览器混合了不同的复制和粘贴实现。在大多数浏览器中，可以使用 `document.execCommand('copy')` 和 `document.execCommand('paste')` 触发浏览器自己的复制和粘贴。如果要复制的文本是 DOM 中不存在的字符串，则必须将其注入 DOM 并选择：
+
+```js
+button.addEventListener('click', (e) => {
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.value = text;
+  input.focus();
+  input.select();
+  const result = document.execCommand('copy');
+  if (result === 'unsuccessful') {
+    console.error('Failed to copy text.');
+  }
+});
+```
+
+在 Internet Explorer 中，您还可以通过 `window.clipboardData` 访问剪贴板。如果在用户手势（例如点击事件）中访问（负责任地请求权限的一部分），则不会显示权限提示。
+
+## 演示
+
+您可以在下面的演示中或[直接在 Glitch 上](https://async-clipboard-api.glitch.me/)尝试使用异步剪贴板 API。
+
+第一个示例演示了将文本移入和移出剪贴板的操作。
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-text.glitch.me/" title="async-clipboard-text on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+在此演示中尝试通过图像的 API。回想一下，以往仅支持 PNG，并且仅在[少数浏览器](https://developer.mozilla.org/docs/Web/API/Clipboard_API#browser_compatibility)中受支持。
+
+<div class="glitch-embed-wrap" style="height: 500px; width: 100%;">   <iframe src="https://async-clipboard-api.glitch.me/" title="async-clipboard-api on Glitch" allow="clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 下一步
+
+Chrome 正在积极致力于使用简化的事件和[拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) 来扩展异步剪贴板 API。由于潜在风险，Chrome 谨慎行事。要了解 Chrome 的最新进展，请观看本文和我们的[博客](/blog/)以获取更新。
+
+目前，[许多浏览器](https://developer.mozilla.org/docs/Web/API/Clipboard#Browser_compatibility)都支持剪贴板 API。
+
+快乐复制和粘贴！
+
+## 相关链接
+
+- [MDN](https://developer.mozilla.org/docs/Web/API/Clipboard_API)
+
+## 致谢
+
+异步剪贴板 API 由 [Darwin Huang](https://www.linkedin.com/in/darwinhuang/) 和 [Gary Kačmarčík](https://www.linkedin.com/in/garykac/) 实现，Darwin 还提供了演示。在此表示衷心的感谢。[Kyarik](https://github.com/kyarik) 和 Gary Kačmarčík 对本文部分内容进行了审阅，在此一并表示感谢。
+
+首图作者：[Unsplash](https://unsplash.com/photos/7iSEHWsxPLw) 上的 [Markus Winkler](https://unsplash.com/@markuswinkler)。
diff --git a/src/site/content/zh/blog/blog.11tydata.js b/src/site/content/zh/blog/blog.11tydata.js
new file mode 100644
index 00000000000..6c3209a6562
--- /dev/null
+++ b/src/site/content/zh/blog/blog.11tydata.js
@@ -0,0 +1,5 @@
+module.exports = {
+  // All blog posts will inherit this layout
+  // which ensures they generate the right permalinks.
+  layout: 'post',
+};
diff --git a/src/site/content/zh/blog/bluetooth/index.md b/src/site/content/zh/blog/bluetooth/index.md
new file mode 100644
index 00000000000..b9a08892470
--- /dev/null
+++ b/src/site/content/zh/blog/bluetooth/index.md
@@ -0,0 +1,415 @@
+---
+title: 通过 JavaScript 与蓝牙设备通信
+subhead: |2-
+
+  Web Bluetooth API 允许网站与蓝牙设备进行通信。
+authors:
+  - beaufortfrancois
+date: 2015-07-21
+updated: 2021-10-01
+hero: image/admin/CME5IVhdn0pngs7jAlFX.jpg
+thumbnail: image/admin/1J1OTu90a2oH8wFogKnF.jpg
+alt: 硬币上的蓝牙芯片
+description: |2-
+
+  Web Bluetooth API 允许网站与蓝牙设备进行通信。
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: web-bluetooth
+---
+
+如果我告诉您网站能以安全和隐私保护的方式与附近的蓝牙设备进行通信，您会怎么想？如此一来，心率监测器、会唱歌的灯，甚至[海龟](https://www.youtube.com/watch?v=1LV1Fk5ZXwA)都可以直接与网站交互了。
+
+到目前为止，仅有部分针对特定平台的应用可以实现与蓝牙设备的交互。Web Bluetooth API 旨在改变这一现状，以期将此功能赋予 Web 浏览器。
+
+## 前言
+
+本文假定您对低功耗蓝牙 (BLE) 和[通用属性配置文件](https://www.bluetooth.com/specifications/gatt/)(GATT) 的工作原理已有一定的了解。
+
+尽管 [Web Bluetooth API 规范](https://webbluetoothcg.github.io/web-bluetooth/)尚未最终确定，但规范的作者们正在积极寻找热情的开发人员来试用此 API，并就[规范](https://github.com/WebBluetoothCG/web-bluetooth/issues)和[实施](https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3EBluetooth)提供反馈。
+
+ChromeOS、Chrome for Android 6.0、Mac (Chrome 56) 和 Windows 10 (Chrome 70) 中有一个可用的 Web Bluetooth API 子集。这意味着您应该能够[请求](#request)并[连接](#connect)到附近的低功耗蓝牙设备、[读取](#read)/[写入](#write)蓝牙特性、[接收 GATT 通知](#notifications)、了解[蓝牙设备何时断开连接](#disconnect)，甚至[读取和写入蓝牙描述符](#descriptors)。有关更多信息，请参阅 MDN 的[浏览器兼容性](https://developer.mozilla.org/docs/Web/API/Web_Bluetooth_API#Browser_compatibility)表。
+
+对于 Linux 和更早版本的 Windows，请在 `about://flags` 中启用 `#experimental-web-platform-features` 标志。
+
+### 初步试用
+
+为了尽可能多地获得开发人员对使用 Web Bluetooth API 的一手反馈，Chrome 此前已在 Chrome 53 中添加了此功能，以供在 ChromeOS、Android 和 Mac 中[初步试用。](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)
+
+试用已于 2017 年 1 月顺利结束。
+
+## 安全要求
+
+要了解安全权衡，推荐您查阅由 Chrome 团队的软件工程师 Jeffrey Yasskin 发表的 [Web 蓝牙安全模型](https://medium.com/@jyasskin/the-web-bluetooth-security-model-666b4e7eed2)帖子，他致力于 Web Bluetooth API 规范。
+
+### 仅限 HTTPS
+
+由于该试验性 API 是添加到 Web 中的一项强大的新功能，因此仅可用于[保护上下文](https://w3c.github.io/webappsec-secure-contexts/#intro)。这意味着您在构建时需要考虑 [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) 。
+
+### 需要用户手势
+
+作为一项安全功能，使用 `navigator.bluetooth.requestDevice` 发现蓝牙设备必须由[用户手势](https://html.spec.whatwg.org/multipage/interaction.html#activation)（例如触摸或鼠标点击）触发。我们正在谈论对 [`pointerup`](https://developer.chrome.com/blog/pointer-events/) 、 `click` 和 `touchend` 事件的侦听。
+
+```js
+button.addEventListener('pointerup', function(event) {
+  // Call navigator.bluetooth.requestDevice
+});
+```
+
+## 了解代码
+
+Web Bluetooth API 严重依赖于 JavaScript [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) 。如果您不熟悉它们，请参阅这个很棒的 [Promises 教程](/promises)。还有一件事， `() => {}` 是简单的 ECMAScript 2015 [箭头函数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。
+
+### 请求蓝牙设备 {: #request }
+
+此版本的 Web Bluetooth API 规范允许以 Central 角色运行的网站通过 BLE 连接实现到远程 GATT 服务器的连接。支持使用蓝牙 4.0 或更高版本的设备之间的通信。
+
+当网站使用 `navigator.bluetooth.requestDevice` 请求访问附近的设备时，浏览器会通过设备选择器提示用户，用户可以在该选择器中选择一台设备或简单地取消请求。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/bluetooth/bluetooth-device-chooser.mp4">
+  </source></video>
+  <figcaption>
+    <p data-md-type="paragraph"><a href="https://webbluetoothcg.github.io/demos/playbulb-candle/">蓝牙设备用户提示。</a></p>
+  </figcaption></figure>
+
+`navigator.bluetooth.requestDevice()` 函数采用定义筛选器的强制对象。这些筛选器仅用于返回与某些公布的蓝牙 GATT 服务和/或设备名称匹配的设备。
+
+#### 服务筛选器
+
+例如，要请求公布[蓝牙 GATT 电池服务](https://www.bluetooth.com/specifications/gatt/)的蓝牙设备：
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+如果您的蓝牙 GATT 服务不在[标准化蓝牙 GATT 服务](https://www.bluetooth.com/specifications/assigned-numbers/)列表中，您可以提供完整的蓝牙 UUID 或简短的 16 位或 32 位形式。
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    services: [0x1234, 0x12345678, '99999999-0000-1000-8000-00805f9b34fb']
+  }]
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### 名称筛选器
+
+您还可以根据使用 `name` 筛选键公布的设备名称请求蓝牙设备，甚至可以使用 `namePrefix` 筛选键根据此名称的前缀来请求蓝牙设备。请注意，在这种情况下，您还需要定义 `optionalServices` 键才能访问未包含在服务筛选器中的任何服务。否则，稍后在尝试访问它们时会出现错误。
+
+```js
+navigator.bluetooth.requestDevice({
+  filters: [{
+    name: 'Francois robot'
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+#### 制造商数据筛选器
+
+还可以根据使用 `manufacturerData` 筛选键公布的制造商规范数据请求蓝牙设备。此键是一个对象数组，其中包含一个名为 `companyIdentifier` 的强制[蓝牙公司标识符](https://www.bluetooth.com/specifications/assigned-numbers/company-identifiers/)键。您还可以提供一个数据前缀，从以它开头的蓝牙设备中筛选制造商数据。请注意，您还需要定义 `optionalServices` 键才能访问未包含在服务筛选器中的任何服务。否则，稍后在尝试访问它们时会出现错误。
+
+```js
+// Filter Bluetooth devices from Google company with manufacturer data bytes
+// that start with [0x01, 0x02].
+navigator.bluetooth.requestDevice({
+  filters: [{
+    manufacturerData: [{
+      companyIdentifier: 0x00e0,
+      dataPrefix: new Uint8Array([0x01, 0x02])
+    }]
+  }],
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+掩码还可以与数据前缀一起使用，以匹配制造商数据中的某些模式。请查看[蓝牙数据筛选器解释器](https://github.com/WebBluetoothCG/web-bluetooth/blob/main/data-filters-explainer.md)以了解更多信息。
+
+{% Aside %} 在撰写本文时，Chrome 92 中有可用的 `manufacturerData` 筛选键。如果需要向后兼容老版本的浏览器，您必须提供后备选项，因为制造商数据筛选器被认为是空的。请参阅[示例](https://groups.google.com/a/chromium.org/g/blink-dev/c/5Id2LANtFko/m/5SIig7ktAgAJ)。{% endAside %}
+
+#### 没有筛选器
+
+最后，您可以使用 `acceptAllDevices` 键代替 `filters` 来显示附近的所有蓝牙设备。您还需要定义 `optionalServices` 键才能访问某些服务。否则，稍后在尝试访问它们时会出现错误。
+
+```js
+navigator.bluetooth.requestDevice({
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'] // Required to access service later.
+})
+.then(device => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+{% Aside 'caution' %} 这可能会导致选择器中显示一堆不相关的设备，并且由于没有筛选器而浪费能源。请谨慎使用。{% endAside %}
+
+### 连接到蓝牙设备 {: #connect }
+
+那么现在有一个 `BluetoothDevice` 该怎么办？让我们将其连接到包含服务和特征定义的蓝牙远程 GATT 服务器。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => {
+  // Human-readable name of the device.
+  console.log(device.name);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+```
+
+### 读取蓝牙特征 {: #read }
+
+现在，我们被连接到了远程蓝牙设备的 GATT 服务器。我们想要获取一个主 GATT 服务并读取属于该服务的特征。例如，让我们尝试读取设备电池的当前电量。
+
+在下面的示例中，`battery_level` 是[标准的电池电量特征](https://www.bluetooth.com/specifications/gatt/) 。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
+.then(device => device.gatt.connect())
+.then(server => {
+  // Getting Battery Service…
+  return server.getPrimaryService('battery_service');
+})
+.then(service => {
+  // Getting Battery Level Characteristic…
+  return service.getCharacteristic('battery_level');
+})
+.then(characteristic => {
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.then(value => {
+  console.log(`Battery percentage is ${value.getUint8(0)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+如果您在使用自定义蓝牙 GATT 特征，则可以向 `service.getCharacteristic` 提供完整的蓝牙 UUID 或简短的 16 位或 32 位形式。
+
+请注意，您还可以在特征上添加 `characteristicvaluechanged` 事件侦听器来处理读取其值。请查看[读取特征值更改示例](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html)，了解如何选择性地处理即将到来的 GATT 通知。
+
+```js
+…
+.then(characteristic => {
+  // Set up event listener for when characteristic value changes.
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleBatteryLevelChanged);
+  // Reading Battery Level…
+  return characteristic.readValue();
+})
+.catch(error => { console.error(error); });
+
+function handleBatteryLevelChanged(event) {
+  const batteryLevel = event.target.value.getUint8(0);
+  console.log('Battery percentage is ' + batteryLevel);
+}
+```
+
+### 写入蓝牙特征 {: #write }
+
+写入蓝牙 GATT 特征就像读取它一样简单。这一次，让我们使用心率控制点将心率监测设备上的能量消耗字段的值重置为 0。
+
+我保证这里没有魔法。这一切都在[心率控制点特征页面](https://www.bluetooth.com/specifications/gatt/)中进行了解释。
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_control_point'))
+.then(characteristic => {
+  // Writing 1 is the signal to reset energy expended.
+  const resetEnergyExpended = Uint8Array.of(1);
+  return characteristic.writeValue(resetEnergyExpended);
+})
+.then(_ => {
+  console.log('Energy expended has been reset.');
+})
+.catch(error => { console.error(error); });
+```
+
+### 接收 GATT 通知 {: #notifications }
+
+现在，让我们看看当设备上的[心率测量](https://www.bluetooth.com/specifications/gatt/)特征发生变化时如何得到通知：
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('heart_rate'))
+.then(service => service.getCharacteristic('heart_rate_measurement'))
+.then(characteristic => characteristic.startNotifications())
+.then(characteristic => {
+  characteristic.addEventListener('characteristicvaluechanged',
+                                  handleCharacteristicValueChanged);
+  console.log('Notifications have been started.');
+})
+.catch(error => { console.error(error); });
+
+function handleCharacteristicValueChanged(event) {
+  const value = event.target.value;
+  console.log('Received ' + value);
+  // TODO: Parse Heart Rate Measurement value.
+  // See https://github.com/WebBluetoothCG/demos/blob/gh-pages/heart-rate-sensor/heartRateSensor.js
+}
+```
+
+[通知示例](https://googlechrome.github.io/samples/web-bluetooth/notifications.html)向您展示了如何使用 `stopNotifications()` 停止通知并正确删除添加的 `characteristicvaluechanged` 事件侦听器。
+
+### 与蓝牙设备断开连接 {: #disconnect }
+
+为了提供更好的用户体验，您可能需要侦听断开连接事件并邀请用户重新连接：
+
+```js
+navigator.bluetooth.requestDevice({ filters: [{ name: 'Francois robot' }] })
+.then(device => {
+  // Set up event listener for when device gets disconnected.
+  device.addEventListener('gattserverdisconnected', onDisconnected);
+
+  // Attempts to connect to remote GATT Server.
+  return device.gatt.connect();
+})
+.then(server => { /* … */ })
+.catch(error => { console.error(error); });
+
+function onDisconnected(event) {
+  const device = event.target;
+  console.log(`Device ${device.name} is disconnected.`);
+}
+```
+
+您还可以调用 `device.gatt.disconnect()` 以断开您的网络应用与蓝牙设备的连接。这将触发现有的 `gattserverdisconnected` 事件侦听器。请注意，如果另一个应用已经与蓝牙设备通信，则不会停止蓝牙设备通信。请查看[设备断开连接示例](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html)和[自动重新连接示例](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html)以深入了解。
+
+{% Aside 'caution' %} 蓝牙 GATT 属性、服务、特征等在设备断开连接后会失效。这意味着您的代码应始终在重新连接后取回这些属性（通过 `getPrimaryService(s)` 、 `getCharacteristic(s)`等）。{% endAside %}
+
+### 读写蓝牙描述符 {: #descriptors }
+
+蓝牙 GATT 描述符是描述特征值的属性。您可以以类似于蓝牙 GATT 特征的方式读取和写入它们。
+
+例如，让我们看看如何读取设备健康温度计测量间隔的用户描述。
+
+在下面的示例中，`health_thermometer` 是[健康温度计服务](https://www.bluetooth.com/specifications/gatt/)， `measurement_interval` 是[测量间隔特征](https://www.bluetooth.com/specifications/gatt/)， `gatt.characteristic_user_description` 是[特征性用户描述描述符](https://www.bluetooth.com/specifications/assigned-numbers/)。
+
+```js/4-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => descriptor.readValue())
+.then(value => {
+  const decoder = new TextDecoder('utf-8');
+  console.log(`User Description: ${decoder.decode(value)}`);
+})
+.catch(error => { console.error(error); });
+```
+
+现在我们已经读取了设备健康温度计测量间隔的用户描述，让我们看看如何更新它并写入自定义值。
+
+```js/5-9
+navigator.bluetooth.requestDevice({ filters: [{ services: ['health_thermometer'] }] })
+.then(device => device.gatt.connect())
+.then(server => server.getPrimaryService('health_thermometer'))
+.then(service => service.getCharacteristic('measurement_interval'))
+.then(characteristic => characteristic.getDescriptor('gatt.characteristic_user_description'))
+.then(descriptor => {
+  const encoder = new TextEncoder('utf-8');
+  const userDescription = encoder.encode('Defines the time between measurements.');
+  return descriptor.writeValue(userDescription);
+})
+.catch(error => { console.error(error); });
+```
+
+## 示例、演示和代码实验室
+
+以下所有的 [Web 蓝牙示例](https://googlechrome.github.io/samples/web-bluetooth/index.html)均已成功测试。为了充分享受这些示例，建议您安装 [BLE Peripheral Simulator Android 应用](https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral)，该应用可以模拟提供电池服务、心率服务或健康温度计服务的 BLE 外围设备。
+
+### 初学者
+
+- [设备信息](https://googlechrome.github.io/samples/web-bluetooth/device-info.html)- 从 BLE 设备检索基本的设备信息。
+- [电池电量](https://googlechrome.github.io/samples/web-bluetooth/battery-level.html)- 从公布电池信息的 BLE 设备中检索电池信息。
+- [重置能量](https://googlechrome.github.io/samples/web-bluetooth/reset-energy.html)- 重置公布心率的 BLE 设备消耗的能量。
+- [特征属性](https://googlechrome.github.io/samples/web-bluetooth/characteristic-properties.html)- 显示 BLE 设备的特定特征的所有属性。
+- [通知](https://googlechrome.github.io/samples/web-bluetooth/notifications.html)- 启动和停止 BLE 设备的特征通知。
+- [设备断开连接](https://googlechrome.github.io/samples/web-bluetooth/device-disconnect.html)- 断开连接，并在连接到 BLE 设备后收到断开连接的通知。
+- [获取特征](https://googlechrome.github.io/samples/web-bluetooth/get-characteristics.html)- 从 BLE 设备获取已公布服务的所有特性。
+- [获取描述符](https://googlechrome.github.io/samples/web-bluetooth/get-descriptors.html)- 从 BLE 设备获取已公布服务的所有特征的描述符。
+- [制造商数据筛选器](https://googlechrome.github.io/samples/web-bluetooth/manufacturer-data-filter.html)- 从匹配制造商数据的 BLE 设备中检索基本的设备信息。
+
+### 组合多个操作
+
+- [GAP 特征](https://googlechrome.github.io/samples/web-bluetooth/gap-characteristics.html)- 获取 BLE 设备的所有 GAP 特征。
+- [设备信息特征](https://googlechrome.github.io/samples/web-bluetooth/device-information-characteristics.html)- 获取 BLE 设备的所有设备信息特征。
+- [链路丢失](https://googlechrome.github.io/samples/web-bluetooth/link-loss.html)- 设置 BLE 设备的警报级别特征（readValue 和 writeValue）。
+- [发现服务和特征](https://googlechrome.github.io/samples/web-bluetooth/discover-services-and-characteristics.html)- 从 BLE 设备发现所有可访问的主要服务及其特征。
+- [自动重新连接](https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html)- 使用指数退避算法重新连接到断开连接的 BLE 设备。
+- [读取已更改的特征值](https://googlechrome.github.io/samples/web-bluetooth/read-characteristic-value-changed.html)- 读取电池电量和来自 BLE 设备的更改通知。
+- [读取描述符](https://googlechrome.github.io/samples/web-bluetooth/read-descriptors.html)- 从 BLE 设备读取服务的所有特征描述符。
+- [写入描述符](https://googlechrome.github.io/samples/web-bluetooth/write-descriptor.html)- 写入 BLE 设备上的描述符“特征用户描述”。
+
+另请查阅我们的[精心策划的网络蓝牙演示](https://github.com/WebBluetoothCG/demos)和[官方网络蓝牙代码实验室](https://github.com/search?q=org%3Agooglecodelabs+bluetooth)。
+
+## 库
+
+- [web-bluetooth-utils](https://www.npmjs.com/package/web-bluetooth-utils) 是一个 npm 模块，向 API 添加一些便捷函数。
+- 最流行的 Node.js BLE 中央模块 [noble](https://github.com/sandeepmistry/noble) 中提供了 Web Bluetooth API 填充码。这使您无需 WebSocket 服务器或其他插件即可 webpack（模块化管理和打包）/browserify（在浏览器端组织） noble。
+- [angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) 是 [Angular](https://angularjs.org)的一个模块，它提取配置 Web Bluetooth API 所需的所有样板。
+
+## 工具
+
+- [Get Started with Web Bluetooth](https://beaufortfrancois.github.io/sandbox/web-bluetooth/generator) 是一款简单的网络应用，其会生成与蓝牙设备进行交互的所有 JavaScript 样板代码。您只需输入设备名称、服务、特征，定义其属性即可。
+- 如果您已经是蓝牙开发人员，[Web Bluetooth Developer Studio 插件](https://github.com/beaufortfrancois/sandbox/tree/gh-pages/web-bluetooth/bluetooth-developer-studio-plugin)还将为您的蓝牙设备生成 Web Bluetooth JavaScript 代码。
+
+## 提示
+
+在 Chrome 中的 `about://bluetooth-internals` <br> 位置可查看**蓝牙内部**页面，以便您可以检查附近蓝牙设备的所有信息：状态、服务、特征和描述符。
+
+<figure>{% Img src="image/admin/nPX2OfcQKwKtU9xBNhMe.jpg", alt="Chrome 中用于调试蓝牙的内部页面的截图", width="800", height="572" %}<figcaption> Chrome 中用于调试蓝牙设备的内部页面。</figcaption></figure>
+
+还建议您查阅官方[如何提交 Web 蓝牙错误](https://sites.google.com/a/chromium.org/dev/developers/how-tos/file-web-bluetooth-bugs)页面，因为调试蓝牙有时比较麻烦。
+
+{% Aside 'caution' %} 并行读取和写入蓝牙特征可能会引发错误，具体取决于平台。强烈建议您在适当的时候手动对 GATT 操作请求进行排队。请参阅[“正在进行的 GATT 操作 - 如何处理？”](https://github.com/WebBluetoothCG/web-bluetooth/issues/188) 。{% endAside %}
+
+## 下一步行动
+
+首先检查[浏览器和平台实现状态，](https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md)以了解当前正在实现 Web Bluetooth API 的哪些部分。
+
+虽然它仍然不完整，但我们可以了解不久的将来它要实现的功能：
+
+- 将使用 `navigator.bluetooth.requestLEScan()`[扫描附近的 BLE 广告](https://github.com/WebBluetoothCG/web-bluetooth/pull/239)。
+- 新的 `serviceadded` 事件将跟踪新发现的蓝牙 GATT 服务，而 `serviceremoved` 事件将跟踪已删除的服务。向蓝牙 GATT 服务中添加任何特征和/或描述符或从中删除这些时，将触发新的`servicechanged` 事件。
+
+### 展示您对 API 的支持
+
+您是否打算使用 Web Bluetooth API？您公开的支持将帮助 Chrome 团队竭力打造功能，并为其他浏览器供应商提供动力，这弥足珍贵。
+
+请向 [@ChromiumDev](https://twitter.com/ChromiumDev) 发送带有 [`#WebBluetooth`](https://twitter.com/search?q=%23WebBluetooth&src=typed_query&f=live) <br> 标签的推文，让我们知道您在哪里以及以何种方式在使用它。
+
+## 资源
+
+- 堆栈溢出： [https://stackoverflow.com/questions/tagged/web-bluetooth](https://stackoverflow.com/questions/tagged/web-bluetooth)
+- Chrome 功能状态： [https://www.chromestatus.com/feature/5264933985976320](https://www.chromestatus.com/feature/5264933985976320)
+- Chrome 实现错误： [https://crbug.com/?q=component:Blink&gt;Bluetooth](https://crbug.com/?q=component:Blink%3EBluetooth)
+- Web 蓝牙规范： [https://webbluetoothcg.github.io/web-bluetooth](https://webbluetoothcg.github.io/web-bluetooth)
+- 规范问题： [https://github.com/WebBluetoothCG/web-bluetooth/issues](https://github.com/WebBluetoothCG/web-bluetooth/issues)
+- BLE 外设模拟器应用： [https://github.com/WebBluetoothCG/ble-test-peripheral-android](https://github.com/WebBluetoothCG/ble-test-peripheral-android)
+
+{% YouTube '_BUwOBdLjzQ' %}
+
+## 致谢
+
+非常感谢 [Kayce Basques](https://github.com/kaycebasques) 审阅本文。首图提供者：[美国博尔德的 SparkFun Electronics](https://commons.wikimedia.org/wiki/File:Bluetooth_4.0_Module_-_BR-LE_4.0-S2A_(16804031059).jpg)。
diff --git a/src/site/content/zh/blog/building-a-tabs-component/index.md b/src/site/content/zh/blog/building-a-tabs-component/index.md
new file mode 100644
index 00000000000..0c0403714de
--- /dev/null
+++ b/src/site/content/zh/blog/building-a-tabs-component/index.md
@@ -0,0 +1,633 @@
+---
+layout: post
+title: 构建 Tabs 组件
+subhead: 关于如何构建类似于 iOS 和 Android 应用中的标签组件的基本概述。
+authors:
+  - adamargyle
+description: 关于如何构建类似于 iOS 和 Android 应用中的标签组件的基本概述。
+date: 2021-02-17
+hero: image/admin/sq79nDAthaQGcdQkqazJ.png
+tags:
+  - blog
+  - css
+  - dom
+  - javascript
+  - layout
+  - mobile
+  - ux
+---
+
+在本文中，我想与您分享我在为 Web 构建一个 Tabs（标签）组件的想法，该组件响应迅速、支持多种设备输入并可以跨浏览器工作。观看[演示](https://gui-challenges.web.app/tabs/dist/)。
+
+<figure data-size="full">{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/IBDNCMVCysfM9fYC9bnP.mp4", autoplay="true", loop="true", muted="true" %}<figcaption><a href="https://gui-challenges.web.app/tabs/dist/">演示</a></figcaption></figure>
+
+如果您更喜欢视频，以下是本文的 YouTube 版本：
+
+{% YouTube 'mMBcHcvxuuA' %}
+
+## 概览
+
+Tabs 是设计系统的常见组件，但可以采用多种形状和形式。首先有在 `<frame>` 元素上构建的桌面标签，现在有基于物理属性的可实现动画内容的移动组件。它们的目标是一致的：节省空间。
+
+现如今，Tabs 用户体验的基本要素是按钮导航区域，它可以切换显示框架中内容的可见性。许多不同的内容区域共享相同的空间，但根据导航中选择的按钮有条件地呈现。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/eAaQ44VAmzVOO9Cy5Wc8.png", alt="由于网页应用到组件概念的样式多种多样，所以拼贴图很混乱", width= "800", height="500" %}<figcaption>过去 10 年中标签组件网页设计风格的拼贴图</figcaption></figure>
+
+## Web 策略
+
+总而言之，我发现这个组件构建起来非常简单，这要归功于一些关键的 Web 平台功能：
+
+- `scroll-snap-points`可实现优雅的滑动和键盘交互与适当的滚动停止位置
+- 通过 URL 哈希让浏览器处理页内滚动锚定和共享支持，实现了[深层链接](https://en.wikipedia.org/wiki/Deep_linking)
+- 通过`<a>`和`id="#hash"`元素标记实现了对屏幕阅读器支持
+- `prefers-reduced-motion`可启用交叉淡入淡出过渡和即时页面内滚动
+- 尚处于草案阶段的`@scroll-timeline` web 功能，可实现对所选标签进行动态下划线和更改颜色
+
+### HTML {: #markup }
+
+从根本上说，这里的 UX 是：单击链接，让 URL 呈现嵌套页面状态，然后当浏览器滚动到匹配元素时看到内容区域更新。
+
+这里有一些结构内容成员：链接和`:target`。我们需要一个连接列表（可使用`<nav>`），以及一个`<article>`元素列表（可使用`<section>`）。每个链接哈希将匹配一个部分，让浏览器通过锚点滚动内容。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Pr8BrPDjq8ga9NyoHLJk.mp4", autoplay="true", loop="true", muted="true" %}<figcaption>单击链接按钮，在焦点内容中滑动</figcaption></figure>
+
+例如，在 Chrome 89 中点击链接会自动聚焦到`:target`这篇文章，不需要使用 JS。然后用户可以像往常一样使用输入设备滚动文章内容。它是免费内容，如标记所示。
+
+我使用以下标记来组织 tabs：
+
+```html
+<snap-tabs>
+  <header>
+    <nav>
+      <a></a>
+      <a></a>
+      <a></a>
+      <a></a>
+    </nav>
+  </header>
+  <section>
+    <article></article>
+    <article></article>
+    <article></article>
+    <article></article>
+  </section>
+</snap-tabs>
+```
+
+我可以通过`href`和`id`属性在`<a>`和`<article>`元素之间建立连接，如下所示：
+
+```html/3,10
+<snap-tabs>
+  <header>
+    <nav>
+      <a href="#responsive"></a>
+      <a href="#accessible"></a>
+      <a href="#overscroll"></a>
+      <a href="#more"></a>
+    </nav>
+  </header>
+  <section>
+    <article id="responsive"></article>
+    <article id="accessible"></article>
+    <article id="overscroll"></article>
+    <article id="more"></article>
+  </section>
+</snap-tabs>
+```
+
+我接下来用不同数量的伪占位文填充了文章，并用混合长度和图像的标题集填充链接。有了要处理的内容，我们就可以开始布局了。
+
+### 滚动布局 {: #overscroll }
+
+此组件中有 3 种不同类型的滚动区域：
+
+- 导航区<b style="color: #FF00E2;">（粉红色）</b>可水平滚动
+- 内容区域<b style="color: #008CFF;">（蓝色）</b>可水平滚动
+- 每篇文章<b style="color: #2FD800;">（绿色）</b>都可以垂直滚动。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/qVmUKMwbeoCBffP0aY55.png", alt="3 个带有颜色匹配方向箭头的彩色框，描绘出了滚动区域并显示滚动方向。", width="800", height="450" %}</figure>
+
+滚动涉及两种不同类型的元素：
+
+1. **窗口**<br>具有`overflow`属性样式的已定义尺寸的框。
+2. **超大表面**<br>在此布局中，它是列表容器：导航链接、章节文章和文章内容。
+
+#### `<snap-tabs>`布局 {: #tabs-layout }
+
+我选择的顶层布局是 flex (Flexbox)。我将方向设置为`column` ，因此标题和章节是垂直排序的。这是我们的第一个滚动窗口，它通过溢出隐藏隐去了所有内容。标题和章节将很快采用过度滚动，作为单独的区域。
+
+{% Compare 'better', 'HTML' %}
+
+```html
+<snap-tabs>
+  <header></header>
+  <section></section>
+</snap-tabs>
+```
+
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+snap-tabs {
+  display: flex;
+  flex-direction: column;
+
+  /* establish primary containing box */
+  overflow: hidden;
+  position: relative;
+
+  & > section {
+    /* be pushy about consuming all space */
+    block-size: 100%;
+  }
+
+  & > header {
+    /* defend against <section> needing 100% */
+    flex-shrink: 0;
+    /* fixes cross browser quarks */
+    min-block-size: fit-content;
+  }
+}
+```
+
+{% endCompare %}
+
+指回彩色的 3 滚动图：
+
+- `<header>`现在准备成为<b style="color: #FF00E2;">（粉红色）</b>滚动容器。
+- `<section>`准备成为<b style="color: #008CFF;">（蓝色）</b>滚动容器。
+
+我在下面用 [VisBug](https://a.nerdy.dev/gimme-visbug) 高亮显示的框架可帮我们查看滚动容器创建的**窗口**。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/Fyl0rTuETjORBigkIBx5.png", alt="header 和 section 元素上有粉红色覆盖，勾勒出它们在组件中占用的空间", width="800", height="620" %}</figure>
+
+#### 标签 `<header>`布局 {: #tabs-header }
+
+下一个布局几乎一模一样：我使用 flex 创建垂直排序。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<snap-tabs>
+  <header>
+    <nav></nav>
+    <span class="snap-indicator"></span>
+  </header>
+  <section></section>
+</snap-tabs>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css/1-2
+header {
+  display: flex;
+  flex-direction: column;
+}
+```
+{% endCompare %}
+</div>
+
+`.snap-indicator`应该与链接组一起水平移动，这个标题布局有助于设置那个阶段。这里没有用到绝对定位的元素！
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/EGNIrpw4gEzIZEcsAt5R.png", alt="nav 和 span.indicator 元素上有粉红色覆盖，勾勒出它们在组件中占据的空间", width="800", height="368" %}</figure>
+
+接下来是滚动样式。事实证明，我们可以在 2 个水平滚动区域（标题和章节）之间共享滚动样式，因此我创建了一个实用程序类`.scroll-snap-x` 。
+
+```css
+.scroll-snap-x {
+  /* browser decide if x is ok to scroll and show bars on, y hidden */
+  overflow: auto hidden;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  /* scrolling should snap children on x */
+  scroll-snap-type: x mandatory;
+
+  @media (hover: none) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+}
+```
+
+每个区域都需要在 x 轴上溢出，滚动遏制来捕获过度滚动，触摸设备的隐藏滚动条以及最后通过滚动捕捉来锁定内容展示区域。我们的键盘 tab 顺序是可访问的，任何交互都自然地引导焦点。滚动锁定容器还可以通过键盘获得漂亮的轮播式交互。
+
+#### 标签页眉`<nav>`布局 {: #tabs-header-nav }
+
+导航链接需要排成一行，不使用换行符，垂直居中，并且每个链接项都应该与滚动捕捉容器对齐。2021 CSS 可使用 Swift！
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<nav>
+  <a></a>
+  <a></a>
+  <a></a>
+  <a></a>
+</nav>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+nav {
+  display: flex;
+
+  & a {
+    scroll-snap-align: start;
+
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+```
+{% endCompare %}
+</div>
+
+每个链接的样式和大小都是自己的，所以导航布局只需要指定方向和流向。导航项目上的独特宽度使标签之间的转换变得有趣，因为指示器将其宽度调整为新目标。根据此处有多少元素，浏览器将呈现或不呈现滚动条。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/P7Vm3EvhO1wrTK1boU6y.png", alt="导航的 a 元素上有粉红色覆盖，勾勒出它们在组件中占据的空间以及溢出的位置", width="800", height="327" %}</figure>
+
+#### 标签`<section>`布局 {: #tabs-section }
+
+这是一个灵活的项，需要占据大部分空间。它还需要为要放入的文章创建列。再重申一遍，CSS 2021 可以使用 swift！`block-size: 100%`会拉伸这个元素以尽可能地填充父元素，然后对于自己的布局，它会创建一组与父元素宽度 `100%` 相同的列。百分比在这里很有效，因为我们已经对父级编写了强约束。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html/1-4
+<section>
+  <article></article>
+  <article></article>
+  <article></article>
+  <article></article>
+</section>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+section {
+  block-size: 100%;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+}
+```
+{% endCompare %}
+</div>
+
+就好像我们在说“尽可能以强制方式多多垂直扩展”（记住我们为`flex-shrink: 0`设置的标题：这是对这种扩展推动的一种防御），它为一组全高列设置了行高。 `auto-flow`样式会告诉网格始终将子项排列在水平线上，不要自动换行，而这正是我们想要的；溢出父窗口。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/FYroCMocutCGg1X8kfdG.png", alt="文章元素上有粉红色覆盖，勾勒出它们在组件中占据的空间以及溢出的位置", width="800", height="512" %}</figure>
+
+我有时会发现这些实在很难理解！这个章节元素装进了一个盒子里，同时又创建了一组盒子。我希望上面的图像和解释会有所帮助。
+
+#### 标签`<article>`布局 {: #tabs-article }
+
+用户应该能够滚动文章内容，并且只有在溢出时才会显示滚动条。这些文章元素排列整齐。它们同时是滚动父项和滚动子项。浏览器确实在为我们处理一些棘手的触摸、鼠标和键盘交互。
+
+<div class="switcher">
+{% Compare 'better', 'HTML' %}
+```html
+<article>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  <h2></h2>
+  <p></p>
+  <p></p>
+  ...
+</article>
+```
+{% endCompare %}
+
+{% Compare 'better', 'CSS' %}
+
+```css
+article {
+  scroll-snap-align: start;
+
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+```
+{% endCompare %}
+</div>
+
+我选择让文章在它们的父滚动条中对齐。我真的很喜欢导航链接项和文章元素与其各自滚动容器的内联开始对齐的样子。它看起来有一种和谐的关系。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/O8gJp7AxBty8yND4fFGr.png", alt="文章元素及其子元素上有粉红色覆盖，勾勒出它们在组件中占据的空间和溢出的方向", width="800", height="808" %}</figure>
+
+文章是一个网格子项，它的大小预先确定为我们想要提供滚动 UX 的视区区域。这意味着我在这里无需定义任何高度或宽度样式，只需要定义它的溢出方式。我将 overflow-y 设置为自动，接着还使用方便的 overscroll-behavior 属性捕获滚动交互。
+
+#### 3 个滚动区域回顾 {: #scroll-areas-recap }
+
+下面我在系统设置中选择了“始终显示滚动条”。我认为要让布局成功，一定要启用此设置，因为我要查看布局和滚动编排。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/6I6TI9PI4rvrJ9lr8T99.png", alt="3 个滚动条设置为显示，现在占用布局空间，我们的组件看起来还不错", width="500", height="607" %}</figure>
+
+我认为在这个组件中看到滚动条装订线，有助于清楚地显示滚动区域的位置、它们支持的方向以及相互交互方式。考虑每个滚动窗口框架如何是布局的弹性或网格父项。
+
+DevTools 可以帮我们把这个视觉化：
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/GFJwc3IggHY4G5fBMiu9.png", alt="滚动区域有网格和弹性框工具叠加，勾勒出它们在组件中占据的空间和溢出方向", width="800", height="455" %}<figcaption> Chromium Devtools，显示了充满锚元素的弹性框导航元素布局，充满文章元素的网格章节布局，以及充满段落和标题元素的文章元素。</figcaption></figure>
+
+滚动布局是完整的：对齐、可深层链接以及可使用键盘访问。为 UX 增强、风格和愉悦打下的坚实基础。
+
+#### 功能亮点
+
+在调整大小期间，滚动对齐的子项保持其锁定的位置。这意味着 JavaScript 不需要在设备旋转或浏览器调整大小时显示任何内容。在 Chromium DevTools [设备模式](https://developer.chrome.com/docs/devtools/device-mode/)中选择 **Responsive** 以外的任何模式，然后调整设备框架的大小，来试用一下。请注意，该元素保持在视图中并被其内容锁定。自从 Chromium 更新他们的实现以匹配此规范以来，这功能已经可以使用了。这里有一篇关于它的[博客文章](/snap-after-layout/)。
+
+### 动画 {: #animation }
+
+在这里，动画的目标是将交互与 UI 反馈清楚地联系起来。这有助于引导或帮助用户（希望如此）无缝地发现所有内容。我会有目的地和有条件地添加动作。用户现在可以在操作系统中指定[他们的运动偏好](/prefers-reduced-motion/)，我非常喜欢在我的界面中响应他们的偏好。
+
+我会将标签下划线与文章滚动位置链接起来。捕捉不仅仅是对齐，它还会锚定动画的开始和结束。这使`<nav>`（它就像[迷你地图](https://en.wikipedia.org/wiki/Mini-map)）保持连接到内容。我们将从 CSS 和 JS 中检查用户的动作偏好。有几个很棒的地方需要考虑！
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/D4zfhetqvhqlcPdTRtLZ.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+#### 滚动行为 {: #scroll-behavior }
+
+有机会增强`:target`和`element.scrollIntoView()`的运动行为。默认情况下，它是即时的。浏览器只是设置滚动位置。但如果我们要过渡到那个滚动位置，而不是闪动，那要怎么办？
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-snap-x {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/Q4JDplhM9gEd4PoiXqs6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+由于我们在此处引入了运动以及用户无法控制的运动（如滚动），因此我们仅在用户在操作系统中没有设置对减少运动的偏好时，才会应用此样式。这样，我们只为喜欢它的人引入滚动运动。
+
+#### 标签指示器 {: #tabs-indicator }
+
+此动画的目的是将指标与内容状态相关联。我决定为更喜欢减少运动的用户将 `border-bottom`样式使用颜色交叉淡入淡出动画，为喜欢运动的用户使用滚动链接滑动+颜色淡入淡出动画。
+
+在 Chromium Devtools 中，我可以切换首选项并演示 2 种不同的过渡样式。我在构建这个过程中获得了很多乐趣。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/NVoLHgjGjf7fZw5HFpF6.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  snap-tabs > header a {
+    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
+    transition: color .7s ease, border-color .5s ease;
+
+    &:is(:target,:active,[active]) {
+      color: var(--text-active-color);
+      border-block-end-color: hsl(var(--accent));
+    }
+  }
+
+  snap-tabs .snap-indicator {
+    visibility: hidden;
+  }
+}
+```
+
+当用户更喜欢减少运动时，我会隐藏`.snap-indicator`，因为我已经不需要它了。然后我用`border-block-end`样式和`transition`替换它。另外请注意，在标签交互中，活动导航项不仅用品牌下划线高亮显示，而且其文本的颜色也更深。活动元素会使用更高的文本颜色对比度和明亮的下灯强调。
+
+只需多加几行 CSS 就可以让用户感觉到被重视（从某种意义说，我们有考虑尊重他们的运动偏好）。我喜欢这一点。
+
+#### `@scroll-timeline` {: #scroll-timeline }
+
+在上一节中，我向您展示了如何处理减少的运动交叉淡入淡出样式；在本节中，我将向您展示如何将指示器和滚动区域链接在一起。接下来是一些有趣的实验性内容。我希望你和我一样兴奋。
+
+```js
+const { matches:motionOK } = window.matchMedia(
+  '(prefers-reduced-motion: no-preference)'
+);
+```
+
+我首先从 JavaScript 检查用户的运动偏好。如果结果为`false` ，意味着用户更喜欢减少运动，那么我们将不会运行任何滚动链接运动效果。
+
+```js
+if (motionOK) {
+  // motion based animation code
+}
+```
+
+在撰写本文时，[浏览器还不支持`@scroll-timeline`](https://caniuse.com/css-scroll-timeline) 。它只是一个具有实验性实现的[草案规范](https://drafts.csswg.org/scroll-animations-1/)。不过它有一个 polyfill，我在这个演示中使用了它。
+
+##### ` ScrollTimeline`
+
+虽然 CSS 和 JavaScript 都可以创建滚动时间线，但我选择了 JavaScript，从而可以在动画中使用实时元素测量。
+
+```js
+const sectionScrollTimeline = new ScrollTimeline({
+  scrollSource: tabsection,  // snap-tabs > section
+  orientation: 'inline',     // scroll in the direction letters flow
+  fill: 'both',              // bi-directional linking
+});
+```
+
+我想要一个东西跟随另一个的滚动位置，并通过创建`ScrollTimeline`来定义滚动链接的驱动程序`scrollSource` 。通常，web 上的动画会根据全局时间帧刻度运行，但当内存中存在自定义`sectionScrollTimeline`时，我可以改变所有这些。
+
+```js
+tabindicator.animate({
+    transform: ...,
+    width: ...,
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+在进入动画的关键帧之前，我认为重要的是指出滚动的后续`tabindicator`将基于自定义时间轴（章节的滚动）进行动画处理。这补全了链接，但缺少最后一个要素，即在这两者之间动画的状态点，也称为关键帧。
+
+#### 动态关键帧
+
+有一种非常强大的纯声明式 CSS 方式可以使用`@scroll-timeline`制作动画，但我选择的动画太多变了。无法在`auto`宽度之间转换，也无法根据子项长度动态创建多个关键帧。
+
+不过 JavaScript 知道如何获取该信息，因此我们将亲自迭代子项并在运行时获取计算值：
+
+```js
+tabindicator.animate({
+    transform: [...tabnavitems].map(({offsetLeft}) =>
+      `translateX(${offsetLeft}px)`),
+    width: [...tabnavitems].map(({offsetWidth}) =>
+      `${offsetWidth}px`)
+  }, {
+    duration: 1000,
+    fill: 'both',
+    timeline: sectionScrollTimeline,
+  }
+);
+```
+
+对于每个`tabnavitem`，解构`offsetLeft`位置并返回一个将其用作`translateX`值的字符串。这会为动画创建 4 个变换关键帧。宽度也是如此，每一个都被问到它的动态宽度是多少，然后将其用作关键帧的值。
+
+这是基于我的字体和浏览器首选项的示例输出：
+
+TranslateX 关键帧：
+
+```js
+[...tabnavitems].map(({offsetLeft}) =>
+  `translateX(${offsetLeft}px)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
+```
+
+宽度关键帧：
+
+```js
+[...tabnavitems].map(({offsetWidth}) =>
+  `${offsetWidth}px`)
+
+// results in 4 array items, which represent 4 keyframe states
+// ["121px", "117px", "226px", "67px"]
+```
+
+总结该策略，标签指示器现在将根据章节滚动条的滚动对齐位置在 4 个关键帧上设置动画。对齐点会在关键帧之间创建清晰的轮廓，并真正增加了动画的同步感。
+
+<figure>{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/jV5X2JMkgUQSIpcivvTJ.png", alt="活动选项卡和非活动选项卡与 VisBug 叠加显示，显示两者的通过对比度分数", width="540", height="400" %}</figure>
+
+用户通过他们的交互来驱动动画，看到指示器的宽度和位置从一个章节变化到下一个章节，通过滚动完美跟踪。
+
+您可能没有注意到，但是当高亮显示的导航项被选中时，我对颜色的转换感到非常自豪。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/qoxGO8SR2t6GPuCWhwvu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+当高亮显示的项目具有更高的对比度时，未选择的较浅灰色显得更加推后。为文本转换颜色是很常见的，比如在悬停时和被选中时，但在滚动时转换该颜色、与下划线指示器同步，则更高级。
+
+下面是我使用的方法：
+
+```js
+tabnavitems.forEach(navitem => {
+  navitem.animate({
+      color: [...tabnavitems].map(item =>
+        item === navitem
+          ? `var(--text-active-color)`
+          : `var(--text-color)`)
+    }, {
+      duration: 1000,
+      fill: 'both',
+      timeline: sectionScrollTimeline,
+    }
+  );
+});
+```
+
+每个标签导航链接都需要这种新颜色的动画，跟踪与下划线指示器相同的滚动时间线。我使用之前的时间轴：因为它的作用是在滚动时发出滴答声，我们可以在想要的任何类型的动画中使用那个滴答声。正如我之前所做的那样，我在循环中创建了 4 个关键帧，并返回颜色。
+
+```js
+[...tabnavitems].map(item =>
+  item === navitem
+    ? `var(--text-active-color)`
+    : `var(--text-color)`)
+
+// results in 4 array items, which represent 4 keyframe states
+// [
+  "var(--text-active-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+  "var(--text-color)",
+]
+```
+
+带有`var(--text-active-color)`的关键帧会高亮显示链接，否则它就是标准文本颜色。那里的嵌套循环使其相对简单，因为外循环是每个导航项，内循环是每个导航项的个人关键帧。我会检查外循环元素是否与内循环元素相同，并通过它来了解它何时被选中。
+
+写这个的时候我很开心。
+
+### 更多的 JavaScript 增强 {: #js }
+
+值得提醒的是，我在这里向您展示的核心内容无需使用 JavaScript。话虽如此，让我们看看当 JS 可用时，要如何增强它。
+
+#### 深层链接
+
+深层链接更像是移动术语，但我认为深层链接的意图在这里与标签相吻合，因为您可以将 URL 直接分享到标签的内容。浏览器将在页面内导航到与 URL 哈希匹配的 ID。我发现这个`onload`处理程序产生了跨平台的效果。
+
+```js
+window.onload = () => {
+  if (location.hash) {
+    tabsection.scrollLeft = document
+      .querySelector(location.hash)
+      .offsetLeft;
+  }
+}
+```
+
+#### 滚动结束同步
+
+用户并不总是点击或使用键盘，有时他们只是自由滚动，这是他们的自由。当章节滚动条停止滚动时，无论它停在任何位置，都需要在顶部导航栏中进行匹配。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/syltOES9Gxc0ihOsgTIV.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+这是我等待滚动结束的方式：
+
+```js
+tabsection.addEventListener('scroll', () => {
+  clearTimeout(tabsection.scrollEndTimer);
+  tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
+});
+```
+
+每当在滚动章节时，清除章节超时（如果有），然后开始一个新的超时。当章节停止滚动时，不要清除超时，然后在休息 100 毫秒后触发。当它触发时，调用试图找出用户停止位置的函数。
+
+```js
+const determineActiveTabSection = () => {
+  const i = tabsection.scrollLeft / tabsection.clientWidth;
+  const matchingNavItem = tabnavitems[i];
+
+  matchingNavItem && setActiveTab(matchingNavItem);
+};
+```
+
+假设滚动被捕捉，那么当前滚动位置除以滚动区域的宽度应该是一个整数，而不是小数。然后我尝试通过这个计算出的索引，从缓存中获取一个导航项，如果它找到了一些东西，我将匹配设置为活动状态。
+
+```js
+const setActiveTab = tabbtn => {
+  tabnav
+    .querySelector(':scope a[active]')
+    .removeAttribute('active');
+
+  tabbtn.setAttribute('active', '');
+  tabbtn.scrollIntoView();
+};
+```
+
+设置活动标签首先要清除任何当前活动的标签，然后为传入的导航项提供活动状态属性。调用`scrollIntoView()`与 CSS 有一个有趣的交互，值得注意。
+
+<figure>{% Video src="video/vS06HQ1YTsbMKSFTIPl2iogUQP73/nsiyMgZ2QGF2fx9gVRgu.mp4", autoplay="true", loop="true", muted="true" %}</figure>
+
+```css
+.scroll-snap-x {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+```
+
+在水平滚动捕捉实用程序 CSS 中，我们[嵌套](https://drafts.csswg.org/css-nesting-1/)了一个媒体查询，如果用户不介意运动，该查询会应用`smooth`。JavaScript 可以随意调用以将元素滚动到视图中，而 CSS 可以声明性地管理用户体验。它们有时会非常可爱。
+
+### 结论
+
+现在，您知道了我是怎么做到的，您会怎么做？！这可以做出一些有趣的组件架构！谁会做出第一个带老虎机的版本？ 🙂
+
+让我们尝试各种方法并学习在网络上构建的所有方法。创建一个[Glitch](https://glitch.com) ，把您的版本[发推给我](https://twitter.com/argyleink)，我会把它添加到下面的[社区改编](#community-remixes)部分。
+
+## 社区改编
+
+- [@devnook](https://twitter.com/devnook)、[@rob_dodson](https://twitter.com/rob_dodson) 和 [@DasSurma](https://twitter.com/DasSurma) 与 Web 组件：[文章](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs)。
+- [@jhvanderschee](https://twitter.com/jhvanderschee) 带按钮：[Codepen](https://codepen.io/joosts/pen/PoKdZYP) 。
diff --git a/src/site/content/zh/blog/carousel-best-practices/index.md b/src/site/content/zh/blog/carousel-best-practices/index.md
new file mode 100644
index 00000000000..3c6949f420f
--- /dev/null
+++ b/src/site/content/zh/blog/carousel-best-practices/index.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: 轮播的最佳实践
+subhead: 优化轮播以提高性能和可用性。
+authors:
+  - katiehempenius
+description: 了解如何优化轮播以提高性能和可用性。
+date: 2021-01-26
+hero: image/admin/i7tjE04MYo7xJOZKkyQI.jpg
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+轮播是一种以类似幻灯片的方式显示内容的 UX 组件。轮播可以“自动播放”或由用户手动导航。尽管轮播可以在其他地方使用，但它们最常用于在主页上显示图像、产品和促销活动。
+
+本文讨论了轮播的性能和 UX 最佳实践。
+
+<figure>{% Img src="image/admin/u2FlXalClwBeDOBBiwxu.png", alt="显示旋转木马的图像", width="629", height="420" %}</figure>
+
+## 性能
+
+实现良好的轮播本身对性能的影响应该非常小或没有影响。然而，轮播经常包含大型媒体资产。大型资产无论显示在轮播中还是其他地方，都会影响性能。
+
+- **LCP (Largest Contentful Paint)**
+
+    大型的首屏轮播经常包含页面的 LCP 元素，因此会对 LCP 产生重大影响。在这些情况下，优化轮播可能会显著提高 LCP。有关如何在包含轮播的页面上进行  LCP 测量的深入说明，请参阅[轮播的 LCP 测量](#lcp-measurement-for-carousels)部分。
+
+- **FID (First Input Delay)**
+
+    轮播对 JavaScript 的要求极低，因此不应影响页面交互性。如果您发现网站的轮播含有长时间运行的脚本，则应考虑更换轮播工具。
+
+- **CLS (Cumulative Layout Shift)**
+
+    数量惊人的轮播使用低质量的非合成动画，而导致 CLS 增加。在自动播放轮播的页面上，这可能导致无限的 CLS。这种类型的 CLS 通常对人眼来说并不明显，使得问题很容易被忽视。为避免此问题，请在轮播中[避免使用非合成动画](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)（例如，在幻灯片切换期间）。
+
+## 性能最佳实践
+
+### 使用 HTML 加载轮播内容
+
+应通过页面的 HTML 标记加载轮播内容，以便浏览器在页面加载过程的早期就能发现它。使用 JavaScript 启动轮播内容的加载可能是使用轮播时应避免的最大性能错误。这会延迟图像加载并对 LCP 产生负面影响。
+
+{% Compare 'better' %}
+
+```html
+<div class="slides">
+  <img src="https://example.com/cat1.jpg">
+  <img src="https://example.com/cat2.jpg">
+  <img src="https://example.com/cat3.jpg">
+</div>
+```
+
+{% endCompare %}
+
+{% Compare 'worse' %}
+
+```javascript
+const slides = document.querySelector(".slides");
+const newSlide = document.createElement("img");
+newSlide.src = "htttp://example.com/cat1.jpg";
+slides.appendChild(newSlide);
+```
+
+{% endCompare %}
+
+要实现高级轮播优化，请考虑静态加载第一张幻灯片，然后逐步增强以包含导航控件和其他内容。这种技术最适合用户长时间关注的环境 — 具有额外的内容加载时间。在主页之类的环境中，用户可能只停留一两秒钟，只加载单个图像可能同样有效。
+
+### 避免布局偏移
+
+{% Aside %}
+
+Chrome 88-90 内置了多个与布局偏移计算方式有关的[错误修复](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md)。其中许多错误修复与轮播相关。由于这些修复，在更高版本的 Chrome 中，预计网站的与轮播有关的布局偏移分数应该较低。
+
+{% endAside %}
+
+轮播中的幻灯片切换和导航控件是布局偏移的两个最常见来源：
+
+- **幻灯片切换：**幻灯片切换期间发生的布局偏移通常是因更新 DOM 元素的布局诱导属性而导致的。这些属性的示例包括：`left`、`top`、`width` 和 `marginTop`。为避免布局偏移，请改用 CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) 属性来切换这些元素。这个[演示](https://glitch.com/~basic-carousel)展示了如何使用 `transform` 来构建一个基本轮播。
+
+- **导航控件：**从 DOM 中移动或添加/删除轮播导航控件可能会导致布局偏移，具体取决于这些更改的实现方式。轮播通常是在响应用户悬停时表现出这种行为。
+
+以下是关于轮播的 CLS 测量的几点常见混淆：
+
+- **自动播放轮播：**幻灯片切换是轮播相关的布局偏移的最常见来源。在非自动播放轮播中，这些布局偏移通常发生在用户交互的 500 毫秒内，[因此不计入 Cumulative Layout Shift (CLS)](/cls/#expected-vs-unexpected-layout-shifts)。然而，对于自动播放轮播，这些布局偏移不仅可以计入 CLS，还可以无限重复。因此，确定自动播放轮播不是布局偏移的来源尤为重要。
+
+- **滚动：**某些轮播允许用户使用滚动来浏览轮播幻灯片。如果元素的起始位置发生变化，但其滚动偏移量（即 [`scrollLeft`](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft) 或 [`scrollTop`](https://developer.mozilla.org/docs/Web/API/Element/scrollTop)）也发生了相同的变化（但方向相反），只要它们发生在同一帧中，就不会被视为布局偏移。
+
+有关布局偏移的更多信息，请参阅[调试布局偏移](/debug-layout-shifts/#identifying-the-cause-of-a-layout-shift)。
+
+### 使用现代技术
+
+许多网站使用[第三方 JavaScript](/third-party-javascript) 库来实现轮播。如果您目前使用较旧的轮播工具，则可以通过切换到较新的工具来提高性能。较新的工具倾向于使用更高效的 API，并且不太可能需要额外的依赖项，如 jQuery。
+
+但是，根据您要构建的轮播类型，您可能完全不需要 JavaScript。新的 [Scroll Snap](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap) API 可以仅使用 HTML 和 CSS 实现类似轮播的切换。
+
+以下是一些有关使用 `scroll-snap` 的资源，可能会对您有帮助：
+
+- [构建 Stories 组件 (web.dev)](/building-a-stories-component/)
+- [下一代 Web 样式：scroll snap (web.dev)](/next-gen-css-2019/#scroll-snap)
+- [仅 CSS 轮播（CSS 技巧）](https://css-tricks.com/css-only-carousel/)
+- [如何制作仅 CSS 轮播（CSS 技巧）](https://css-tricks.com/how-to-make-a-css-only-carousel/)
+
+### 优化轮播内容
+
+轮播经常包含网站的部分最大图像，因此值得花时间确保这些图像已完全优化。选择适当的图像格式和压缩级别、[使用图像 CDN](/image-cdns) 以及[使用 srcset 提供多个图像版本](https://developer.mozilla.org/docs/Web/CSS/CSS_Scroll_Snap)都是可以减少图像传输大小的技术。
+
+## 性能测量
+
+本节讨论与轮播相关的 LCP 测量。虽然在 LCP 计算期间对轮播的处理方式与任何其他 UX 元素没有区别，但计算自动播放轮播的 LCP 的机制是一个常见的混淆点。
+
+### 轮播的 LCP 测量
+
+以下是理解如何计算轮播的 LCP 的关键点：
+
+- 在页面元素绘制到框架时，LCP 会考虑它们。一旦用户与页面进行交互（点击、滚动或按键），就不再考虑新的 LCP 候选元素。因此，自动播放的轮播中的任何幻灯片都有可能成为最终的 LCP 元素，而在静态轮播中，只有第一张幻灯片是潜在的 LCP 候选元素。
+- 如果渲染两个大小相同的图像，第一个图像将被视为 LCP 元素。只有 LCP 候选元素大于当前 LCP 元素时，才会更新 LCP 元素。因此，如果所有轮播元素的大小相同，则 LCP 元素应该是所显示的第一个图像。
+- 在评估 LCP 候选元素时，LCP 会考虑“[可见大小或固有大小，以较小者为准](/lcp)”。因此，如果自动播放的轮播以一致的大小显示图像，但所包含图像的[固有大小](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)各不相同且小于显示大小，则 LCP 元素可能会随着新幻灯片的显示而改变。在这种情况下，如果所有图像都以相同大小显示，则固有大小最大的图像将被视为 LCP 元素。为了保持低 LCP，您应该确保自动播放的轮播中的所有项目都具有相同的固有大小。
+
+### Chrome 88 中对轮播 LCP 计算的更改
+
+从 [Chrome 88](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md) 开始，后来从 DOM 中删除的图像将被视为潜在的 largest contentful paint。在 Chrome 88 之前，这些图像被排除在考虑范围之外。对于使用自动播放的轮播的网站，此定义更改将对 LCP 分数产生中性或积极影响。
+
+做出此更改是因为[观察](https://github.com/anniesullie/LCP_Examples/tree/master/removed_from_dom)到许多网站通过从 DOM 树中删除先前显示的图像来实现轮播转换。在 Chrome 88 之前，每次展示新幻灯片时，删除前一个元素都会触发 LCP 更新。根据定义，此更改仅影响自动播放的轮播，潜在的 largest contentful paint 只能出现在用户首次与页面交互之前。
+
+## 其他注意事项
+
+本节讨论您在实现轮播时应牢记的 UX 和产品最佳实践。轮播应该推动您的业务目标，并以易于浏览和阅读的方式展示内容。
+
+### 导航最佳实践
+
+#### 提供突出显示的导航控件
+
+轮播导航控件应该易于点击且高度可见。这一点很少有人能做得很好，大多数轮播的导航控件都很小且不易察觉。请记住，单一颜色或样式的导航控件很少适用于所有情况。例如，在深色背景下清晰可见的箭头在浅色背景下可能很难看到。
+
+#### 指示导航进度
+
+轮播导航控件应提供有关幻灯片总数和用户浏览进度的上下文。此信息使用户可以更轻松地导航到特定幻灯片并了解已查看哪些内容。在某些情况下，提供即将显示的内容的预览（无论是下一张幻灯片的摘要还是缩略图列表）也会有帮助并提高参与度。
+
+#### 支持移动端手势
+
+在移动设备上，除了传统的导航控件（例如屏幕按钮），还应支持滑动手势。
+
+#### 提供替代导航路径
+
+因为大多数用户不太可能浏览所有轮播内容，所以轮播幻灯片链接到的内容应该可以从其他导航路径访问。
+
+### 可读性最佳实践
+
+#### 不使用自动播放
+
+自动播放的使用产生了两个几乎矛盾的问题：屏幕动画往往会分散用户的注意力，将目光从更重要的内容移开；同时，由于用户经常将动画与广告联系起来，他们会忽略自动播放的轮播。
+
+因此，最好不要使用自动播放。如果内容很重要，不使用自动播放将最大化其曝光率；如果轮播内容不重要，那么使用自动播放会分散对更重要内容的注意力。此外，自动播放的轮播可能难以阅读（也很烦人）。人们以不同的速度阅读，因此轮播很少能一直在“正确”的时间为不同的用户切换内容。
+
+理想情况下，幻灯片导航应由用户通过导航控件指示。如果必须使用自动播放，则应在用户悬停时禁用自动播放。此外，幻灯片切换速率应该考虑到幻灯片内容 - 幻灯片包含的文本越多，在屏幕上显示的时间就应该越长。
+
+#### 确保文本和图像分开
+
+轮播文本内容经常被“烘焙”到相应的图像文件中，而不是使用 HTML 标记单独显示。这种方法不利于可访问性、本地化和压缩率。它还鼓励采用”一刀切“的资产创建方法。然而，相同的图像和文本格式很少在桌面和移动格式中具有相同的可读性。
+
+#### 简明扼要
+
+您只有几分之一秒的时间来吸引用户的注意力。简短、直截了当的文案会提高信息被传达的几率。
+
+### 产品最佳实践
+
+轮播在不能使用额外的垂直空间显示额外内容的场合效果很好。产品页面上的轮播通常是这种用例的好示例。
+
+然而，轮播并不总是被有效使用。
+
+- 轮播（尤其是包含促销或自动推进时）很容易被用户[误认为](https://www.nngroup.com/articles/auto-forwarding/)广告。用户往往会忽略广告 — 这种现象被称为[横幅失明](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/)。
+- 轮播经常用于安抚多个部门，并避免做出有关业务优先级的决定。因此，轮播很容易变成无效内容的倾倒场。
+
+#### 测试您的假设
+
+应该对轮播（尤其是主页上的轮播）的影响进行评估和测试。轮播点击率可以帮助您确定轮播及其内容是否有效。
+
+#### 确保相关性
+
+当轮播包含有趣且相关的内容并以清晰的上下文呈现时，效果最好。如果内容在轮播外部不能吸引用户，那么将其放在轮播中也不会达到更好效果。如果必须使用轮播，请优选内容并确保每张幻灯片都足够相关，让用户愿意点击后面的幻灯片。
diff --git a/src/site/content/zh/blog/color-scheme/index.md b/src/site/content/zh/blog/color-scheme/index.md
new file mode 100644
index 00000000000..88e022dfad3
--- /dev/null
+++ b/src/site/content/zh/blog/color-scheme/index.md
@@ -0,0 +1,179 @@
+---
+title: 使用 `color-scheme` CSS 属性和相应元标记改进深色模式默认样式
+subhead: |2-
+
+  开发人员使用 `color-scheme` CSS 属性和相应元标记可以选择其页面使用用户代理样式表的主题特定默认值。
+authors:
+  - thomassteiner
+date: 2020-04-08
+updated: 2021-10-19
+hero: image/admin/rOe3wxcy28m5DCKcHv7E.jpg
+alt: 墙上绘有鸽子，背景为对比鲜明的黑白色。
+description: 开发人员使用 color-scheme CSS 属性和对应元标记可以选择其页面使用用户代理样式表（例如表单控件、滚动条）的主题特定默认值，也可选择使用 CSS 系统颜色。同时，此功能还可防止浏览器自行应用任何转换。
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+## 背景
+
+### `prefers-color-scheme` 用户偏好媒体功能
+
+开发人员使用 [`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) 用户偏好媒体功能可以完全控制其页面的外观。如果您对它不熟悉，请阅读我的文章 [`prefers-color-scheme` ：Hello darkness, my old friend（你好深色，我的老朋友）](/prefers-color-scheme/)，我在这篇文章里记录了我所知道的关于创造新颖深色模式体验的所有内容。
+
+文章中只简单提到一个难题，便是 `color-scheme` CSS 属性和同名称的相应 meta 标记。它们都允许您选择自己的页面使用用户代理样式表（例如表单控件、滚动条）的主题特定默认值，也可使用 CSS 系统颜色，从而使您的开发工作更轻松。同时，此功能还可防止浏览器自行应用转换。
+
+### 用户代理样式表
+
+在继续之前，我来先简要介绍一下什么是用户代理样式表。大多数情况下，您可以将*用户代理* (UA) 一词视为*浏览器*的一种别致说法。UA 样式表决定了页面的默认观感。顾名思义，UA 样式表取决于相关 UA。您可以查看 [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)（和 Chromium）的 UA 样式表，并与 [Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) 或 [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)（和 WebKit）的样式表进行比较。通常，UA 样式表在大多数方面都是一致的。例如，都将链接设置为蓝色，将一般文本设置为黑色，将背景颜色设置为白色，但也有重大（甚至有时令人烦恼）差异，例如，如何设置表单控件的样式。
+
+仔细查看 [WebKit 的 UA 样式表](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)以及它对深色模式的作用。（在样式表中全文搜索 "dark"。）样式表提供的默认值会根据深色模式是打开还是关闭而发生变化。为了说明这一点，我们举个例子，一个 CSS 规则，使用 [`:matches`](https://css-tricks.com/almanac/selectors/m/matches/) 伪类和 WebKit 内部变量（例如 `-apple-system-control-background` ）以及 WebKit 内部预处理器指令 `#if defined` ：
+
+```css
+input,
+input:matches([type="password"], [type="search"]) {
+  -webkit-appearance: textfield;
+  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
+      HAVE_OS_DARK_MODE_SUPPORT
+    color: text;
+    background-color: -apple-system-control-background;
+  #else
+    background-color: white;
+  #endif
+  /* snip */
+}
+```
+
+您会注意到 `color` 和 `background-color` 属性的一些非标准值。`text` 和 `-apple-system-control-background` 都不是有效的 CSS 颜色，而是 WebKit 内部*语义*颜色。
+
+事实证明，CSS 具有标准化语义系统颜色，在 [CSS 颜色模块级别 4](https://drafts.csswg.org/css-color/#css-system-colors) 中指定。例如，[`Canvas`](https://drafts.csswg.org/css-color/#valdef-system-color-canvas)（不要与 `<canvas>` 标记相混淆）用于应用程序内容或文档的背景，而 [`CanvasText`](https://drafts.csswg.org/css-color/#valdef-system-color-canvastext) 用于应用程序内容或文档中的文本。两者一起使用，不应单独使用。
+
+UA 样式表可以使用自己的专有颜色或标准化语义系统颜色，来确定在默认情况下应如何呈现 HTML 元素。如果操作系统设置为深色模式或使用深色主题，则会将 `CanvasText`（或 `text`）有条件地设置为白色，并将 `Canvas`（或 `-apple-system-control-background`）设置为黑色。然后 UA 样式表仅分配以下 CSS 一次，并涵盖浅色和深色模式。
+
+```css
+/**
+  Not actual UA stylesheet code.
+  For illustrative purposes only.
+*/
+body {
+  color: CanvasText;
+  background-color: Canvas
+}
+```
+
+## `color-scheme` CSS 属性
+
+[CSS 颜色调整模块级别 1](https://drafts.csswg.org/css-color-adjust/) 规范引入了一个模型并通过用户代理控制自动颜色调整，目的是处理用户偏好（例如深色模式）、对比度调整或特定的所需配色方案。
+
+通过其中定义的 [`color-scheme`](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop) 属性，元素可以指示它适合渲染的颜色方案。将这些值与用户的偏好进行协调，从而生成影响用户界面 (UI) 事物的所选配色方案（例如表单控件和滚动条的默认颜色）以及 CSS 系统颜色的使用值。当前支持以下值：
+
+- *`normal`* 表示元素完全不知道配色方案，因此应该使用浏览器的默认配色方案呈现该元素。
+
+- *`[light | dark]+`* 表示元素知道且可以处理列出的配色方案，并表达它们之间的排序偏好。
+
+{% Aside 'note' %} 提供这两个关键字表示（作者）优先选择第一个方案，但如果用户更喜欢第二个方案，则也可以接受。 {% endAside %}
+
+在此列表中，`light` 表示浅色方案：背景色浅，前景色深，而 `dark` 则相反：背景色深，前景色浅。
+
+对于所有元素，使用配色方案渲染应使在所有浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。
+
+{% Aside 'note' %}`color-scheme` CSS 属性可用于 `:root` 级别，也可用于单个元素级别。{% endAside %}
+
+在 `:root` 元素上，使用配色方案渲染还必会影响画布的表面颜色（即全局背景颜色）、`color` 属性的初始值以及系统颜色的使用值，并且还应影响视区的滚动条。
+
+```css
+/*
+  The page supports both dark and light color schemes,
+  and the page author prefers dark.
+*/
+:root {
+  color-scheme: dark light;
+}
+```
+
+## `color-scheme`  meta 标记
+
+提供 `color-scheme` CSS 属性需要首先下载 CSS（如果此项通过 `<link rel="stylesheet">` 引用）并进行解析。为了帮助用户代理*立即*使用所需配色方案呈现页面背景，还可以提供 `color-scheme` 值（在 [`<meta name="color-scheme">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme) 元素中）。
+
+```html
+<!--
+  The page supports both dark and light color schemes,
+  and the page author prefers dark.
+-->
+<meta name="color-scheme" content="dark light">
+```
+
+## `color-scheme` 和 `prefers-color-scheme` 相结合
+
+由于 meta 标记和 CSS 属性（如果应用于 `:root` 元素）最终会产生相同的行为，我始终建议通过 meta 标记指定配色方案，这样浏览器可以更快地采用首选方案。
+
+虽然绝对基线页面不需要额外的 CSS 规则，但在一般情况下，您仍应该始终将 `color-scheme` 与 `prefers-color-scheme` 结合起来。例如，专有 WebKit CSS 颜色 `-webkit-link`（由 WebKit 和 Chrome 用于经典蓝色链接 `rgb(0,0,238)`）在黑色背景上的对比度不足 2.23:1，并且[不满足](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000) WCAG AA 以及 WCAG AAA [要求](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels)。
+
+我已经为 [Chrome](https://crbug.com/1066811)、[WebKit](https://bugs.webkit.org/show_bug.cgi?id=209851) 和 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1626560) 以及 [HTML 标准中的元问题](https://github.com/whatwg/html/issues/5426)报告了 Bug 以解决此问题。
+
+## 与 `prefers-color-scheme` 相互影响
+
+`color-scheme` CSS 属性和相应 meta 标记与 `prefers-color-scheme` 用户首选项媒体功能的相互影响起初可能看起来令人困惑。但事实上，它们在一起配合得非常好。所要了解的最重要的事情是 `color-scheme` 专门确定默认外观，而 `prefers-color-scheme` 则确定可样式化的外观。为了更清楚地说明这一点，假设以下页面内容：
+
+```html
+<head>
+  <meta name="color-scheme" content="dark light">
+  <style>
+    fieldset {
+      background-color: gainsboro;
+    }
+    @media (prefers-color-scheme: dark) {
+      fieldset {
+        background-color: darkslategray;
+      }
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Lorem ipsum dolor sit amet, legere ancillae ne vis.
+  </p>
+  <form>
+    <fieldset>
+      <legend>Lorem ipsum</legend>
+      <button type="button">Lorem ipsum</button>
+    </fieldset>
+  </form>
+</body>
+```
+
+页面上的内联 CSS 代码在一般情况下会将 `<fieldset>` 元素的 `background-color` 设置为 `gainsboro`，也会将该值设置为 `darkslategray`（如果用户优先选择 `dark`，根据 `prefers-color-scheme` 用户偏好媒体功能）。
+
+通过 `<meta name="color-scheme" content="dark light">` 元素，页面会告知浏览器它支持深色和浅色主题，且优先选择深色主题。
+
+根据操作系统被设置为深色模式还是浅色模式，整个页面会基于用户代理样式表在深色中显示浅色，反之亦然。*无需*其他开发人员提供的 CSS 来更改页面的段落文本或背景颜色。
+
+请注意，`<fieldset>` 元素的 `background-color` 根据是否启用深色模式而更改，遵循页面上开发人员提供的内联样式表中的规则。具体为 `gainsboro` 或 `darkslategray`。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kSgOIiGRqjw2PvRlVCaV.png", alt="浅色模式页面。", width="800", height="322" %}<figcaption> <strong>浅色模式：</strong>由开发人员和用户代理指定的样式。按照用户代理样式表，文本为黑色，背景为白色。按照内联的开发人员样式表，<code>&lt;fieldset&gt;</code> 元素的 <code>background-color</code> 为 <code>gainsboro</code>。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qqkHz83kerktbDIGCJeG.png", alt="深色模式页面。", width="800", height="322" %}<figcaption><strong>深色模式：</strong>由开发人员和用户代理指定的样式。按照用户代理样式表，文本为白色，背景为黑色。按照内联的开发人员样式表，<code>&lt;fieldset&gt;</code> 元素的 <code>background-color</code> 为 <code>darkslategray</code>。</figcaption></figure>
+
+`<button>` 元素的外观由用户代理样式表控制。它的 `color` 设置为 [`ButtonText`](https://drafts.csswg.org/css-color/#valdef-system-color-buttontext) 系统颜色，`background-color` 和四个 `border-color` 设置为系统颜色 [`ButtonFace`](https://drafts.csswg.org/css-color/#valdef-system-color-buttonface)。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lSNFROIe1P94DlhoVtoV.png", alt="使用 ButtonFace 属性的浅色模式页面。", width="800", height="322" %} <figcaption> <strong>浅色模式：</strong>将 <code>background-color</code> 和各种 <code>border-color</code> 设置为 <a href="https://drafts.csswg.org/css-color/#valdef-system-color-buttonface">ButtonFace</a> 系统颜色。</figcaption></figure>
+
+现在，请注意 `<button>` 元素的 `border-color` 发生变化。*计算*值（针对 `border-top-color` 和 `border-bottom-color`）从 `rgba(0, 0, 0, 0.847)`（偏黑色）切换为 `rgba(255, 255, 255, 0.847)`（偏白色），因为用户代理会根据配色方案动态更新 `ButtonFace`。这同样适用于 `<button>` 元素的 `color`，其设置为相应系统颜色 `ButtonText`。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IogmyIzUhokJgnnxUkPi.png", alt="显示计算出的颜色值与 ButtonFace 匹配。", width="800", height="322" %} <figcaption> <strong>浅色模式：</strong><code>border-top-color</code> 和 <code>border-bottom-color</code> 的计算值（在用户代理样式表中这两个值均设置为 <code>ButtonFace</code>）现在为 <code>rgba(0, 0, 0, 0.847)</code>。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3sU1uZyt3zNhEgw3gpZJ.png", alt="显示计算出的颜色值与 ButtonFace 匹配。", width="800", height="322" %} <figcaption> <strong>深色模式：</strong><code>border-top-color</code> 和 <code>border-bottom-color</code> 的计算值（在用户代理样式表中这两个值均设置为 <code>ButtonFace</code>）现在为 <code>rgba(0, 0, 0, 0.847)</code>。</figcaption></figure>
+
+## 演示
+
+您可以看到应用于大量 HTML 元素 `color-scheme` 的效果（在[故障演示](https://color-scheme-demo.glitch.me/)中）。该演示*特意*显示 WCAG AA 和 WCAG AAA [冲突](https://webaim.org/resources/contrastchecker/?fcolor=0000EE&bcolor=000000)（具有[上面警告](#using-color-scheme-in-practice)中提到的链接颜色）。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bqXapQKcNbyE3uwEOELO.png", alt="浅色模式下的演示。", width="800", height="982" %} <figcaption><a href="https://color-scheme-demo.glitch.me/">演示</a>已切换为 <code>color-scheme: light</code>。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9G4hFdtSSwPLOm57zedD.png", alt="深色模式下的演示。", width="800", height="982" %} <figcaption><a href="https://color-scheme-demo.glitch.me/">演示</a>已切换为 <code>color-scheme: dark</code>。请注意具有链接颜色的 WCAG AA 和 WCAG AAA<a href="https://webaim.org/resources/contrastchecker/?fcolor=0000EE&amp;bcolor=000000"> 冲突</a>。</figcaption></figure>
+
+## 鸣谢
+
+`color-scheme` CSS 属性和相应 meta 标记由 [Rune Lillesveen](https://github.com/lilles) 实施。Rune 也是 CSS 颜色调整模块级别 1 规范的共同编辑者。主图作者：[Philippe Leone](https://unsplash.com/@philinit?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 来源：[Unsplash](https://unsplash.com/photos/dbFfEBOCrkU)。
diff --git a/src/site/content/zh/blog/commonjs-larger-bundles/index.md b/src/site/content/zh/blog/commonjs-larger-bundles/index.md
new file mode 100644
index 00000000000..1158ffc8566
--- /dev/null
+++ b/src/site/content/zh/blog/commonjs-larger-bundles/index.md
@@ -0,0 +1,241 @@
+---
+title: CommonJS 如何让您的捆绑包变得更大
+subhead: 了解 CommonJS 模块如何影响应用程序的摇树
+authors:
+  - mgechev
+date: 2020-05-08
+updated: 2020-05-26
+hero: image/admin/S5JWmwRRW3rEXKwJR0JA.jpg
+alt: CommonJS 如何让您的捆绑包变得更大
+description: CommonJS 模块的动态范围非常大，这会阻止 JavaScript 优化器和捆绑包对它们执行高级优化。
+tags:
+  - blog
+  - javascript
+  - modules
+---
+
+我们将在本文中研究什么是 CommonJS，以及它为什么会使您的 JavaScript 捆绑包变得异常大。
+
+总结：**为确保捆绑程序能够成功优化您的应用程序，避免依赖 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。**
+
+## 什么是 CommonJS？
+
+CommonJS 是 2009 年的标准，它为 JavaScript 模块建立了约定规范。它最初并没有打算用在 Web 浏览器上，主要用于服务器端应用程序。
+
+使用 CommonJS，您可以定义模块，导出模块中的功能，并将它们导入到其他模块中。例如，下面的代码片段定义了一个模块，该模块导出五个函数：`add`、`subtract`、`multiply`、`divide`和`max` ：
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+稍后，另一个模块可以导入并使用部分或全部这些函数：
+
+```javascript
+// index.js
+const { add } = require('./utils');
+console.log(add(1, 2));
+```
+
+使用`node`调用`index.js`将在控制台中输出数字`3`
+
+由于 2010 年代初期的浏览器缺乏标准化的模块系统，CommonJS 也成为 JavaScript 客户端库的流行模块格式。
+
+## CommonJS 如何影响最终捆绑包大小？
+
+服务器端 JavaScript 应用程序的大小并不像在浏览器中那么重要，这就是为什么 CommonJS 在设计时没有考虑减少生产包的大小。同时，[分析](https://v8.dev/blog/cost-of-javascript-2019)表明 JavaScript 捆绑包的大小仍然是导致浏览器应用程序变慢的头号原因。
+
+JavaScript 打包器和压缩器，例如`webpack`和`terser` ，会执行不同的优化以减小应用程序的大小。它们会在构建时分析应用程序，尝试从您未使用的源代码中尽可能多地删除无用代码。
+
+例如，在上面的代码片段中，最终捆绑包应该只包含`add`函数，因为这是您在`index.js`中导入来自`utils.js`的唯一符号。
+
+让我们使用以下`webpack`配置构建应用程序：
+
+```javascript
+const path = require('path');
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'production',
+};
+```
+
+这里我们指定要使用生产模式优化并使用`index.js`作为入口点。在调用`webpack`后，如果我们探索[输出](https://github.com/mgechev/commonjs-example/blob/master/commonjs/dist/out.js)大小，将看到如下内容：
+
+```shell
+$ cd dist && ls -lah
+625K Apr 13 13:04 out.js
+```
+
+请注意，**捆绑包的大小是 625KB** 。现在看看输出，我们会发现`utils.js`的所有函数以及来自[`lodash`](https://lodash.com/)的许多模块**。尽管我们没有在`index.js`中使用`lodash`，但它也成为了输出的一部分**，这为我们的生产资产增加了很多额外的大小。
+
+现在将模块格式更改为 [ECMAScript 模块](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)，然后再试一次。这一次，`utils.js`看起来是这样：
+
+```javascript
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+export const multiply = (a, b) => a * b;
+export const divide = (a, b) => a / b;
+
+import { maxBy } from 'lodash-es';
+
+export const max = arr => maxBy(arr);
+```
+
+`index.js`将使用 ECMAScript 模块语法从`utils.js`导入：
+
+```javascript
+import { add } from './utils';
+
+console.log(add(1, 2));
+```
+
+使用相同的`webpack`配置，我们可以构建应用程序并打开输出文件。**它现在的大小是 40 个字节**，[输出](https://github.com/mgechev/commonjs-example/blob/master/esm/dist/out.js)如下：
+
+```javascript
+(()=>{"use strict";console.log(1+2)})();
+```
+
+请注意，最终的捆绑包里没有`utils.js`中未使用的函数以及`lodash` ！更进一步，`terser`（即`webpack`使用的 JavaScript 压缩器）在`console.log`中内联了`add`函数。
+
+你可能会问，**为什么使用 CommonJS 会导致输出包几乎变大了 16000 倍**？当然，这只是随便举的一个例子，实际上大小差异可能不会那么大，但 CommonJS 很可能为您的生产构建增加了显著的大小。
+
+**CommonJS 模块在一般情况下更难优化，因为它们比 ES 模块的动态程度更高。为确保您的捆绑程序和压缩器能够成功优化应用程序，请避免依赖 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。**
+
+请注意，即便您在`index.js`中使用 ECMAScript 模块，但如果您使用的是 CommonJS 模块，那么应用程序的捆绑包大小也会受到影响。
+
+## 为什么 CommonJS 会让应用变得更大？
+
+要回答这个问题，我们先看看`webpack`中的`ModuleConcatenationPlugin`行为，然后讨论静态分析性。该插件将所有模块的范围连接到一个闭包中，并允许您的代码在浏览器中具有更快的执行时间。让我们看一个例子：
+
+```javascript
+// utils.js
+export const add = (a, b) => a + b;
+export const subtract = (a, b) => a - b;
+```
+
+```javascript
+// index.js
+import { add } from './utils';
+const subtract = (a, b) => a - b;
+
+console.log(add(1, 2));
+```
+
+在上面示例中，我们使用了一个 ECMAScript 模块，并将其导入了`index.js`。此外，我们还定义了一个`subtract`函数。我们可以使用与上述相同的`webpack`配置来构建项目，但这一次，我们将禁用最小化：
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: 'index.js',
+  output: {
+    filename: 'out.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: false
+  },
+  mode: 'production',
+};
+```
+
+让我们看看产生的输出：
+
+```javascript
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+
+// CONCATENATED MODULE: ./utils.js**
+const add = (a, b) => a + b;
+const subtract = (a, b) => a - b;
+
+// CONCATENATED MODULE: ./index.js**
+const index_subtract = (a, b) => a - b;**
+console.log(add(1, 2));**
+
+/******/ })();
+```
+
+在上面的输出中，所有函数都在同一个命名空间内。为了防止冲突，webpack 将`index.js` 中的`subtract`函数重命名为`index_subtract` 。
+
+如果缩小器处理上面的源代码，它将：
+
+- 删除未使用的函数`subtract`和`index_subtract`
+- 删除所有注释和多余的空格
+- 在`console.log`调用中内联`add`函数的正文
+
+开发人员通常将**移除未使用的导入称为摇树**。摇树之所以成为可能，是因为 webpack 能够静态地（在构建时）了解我们从`utils.js`导入哪些符号以及它导出哪些符号。
+
+**ES 模块**默认启用此行为，因为与 CommonJS 相比，**它们更易于静态分析。**
+
+让我们看一个完全相同的例子，但这次将`utils.js`改为使用 CommonJS 模块，而不是 ES 模块：
+
+```javascript
+// utils.js
+const { maxBy } = require('lodash-es');
+
+const fns = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+  max: arr => maxBy(arr)
+};
+
+Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);
+```
+
+这个小更新将显着改变输出。由于代码太长无法完全嵌入此页面，所以我只分享了其中的一小部分：
+
+```javascript
+...
+(() => {
+
+"use strict";
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
+const subtract = (a, b) => a - b;
+console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));
+
+})();
+```
+
+请注意，最终捆绑包包含一些`webpack`“运行时”：即负责从捆绑模块导入/导出功能的注入代码。这一次，我们没有将`utils.js`和`index.js`中的所有符号都放在同一个命名空间下，而是在运行时使用`__webpack_require__`动态调用`add`函数。
+
+这是必要的，因为使用 CommonJS 我们可以从任意表达式中获取导出名称。例如，下面的代码是一个绝对有效的构造：
+
+```javascript
+module.exports[localStorage.getItem(Math.random())] = () => { … };
+```
+
+打包程序无法在构建时知道导出符号的名称是什么，因为这需要仅在运行时才能提供的信息，在用户浏览器的上下文中。
+
+**这样，缩小器就无法理解`index.js`到底使用了依赖项的什么内容，所以它不能将它摇树。**我们还将观察第三方模块的完全相同的行为。**如果我们从`node_modules`导入 CommonJS 模块，您的构建工具链将无法正确优化它。**
+
+## 使用 CommonJS 进行摇树
+
+分析 CommonJS 模块要困难得多，因为它们从定义上来说是动态的。例如，ES 模块中的导入位置始终是字符串，而 CommonJS 则是表达式。
+
+在某些情况下，如果您使用的库遵循有关如何使用 CommonJS 的特定约定，则可以在构建时使用第三方`webpack`[插件](https://github.com/indutny/webpack-common-shake)删除未使用的导出。虽然这个插件增加了对摇树的支持，但它并没有涵盖您的依赖项可以使用 CommonJS 的所有不同方式。这意味着您无法获得与 ES 模块相同的功能保证。此外，作为构建过程的一部分，它会在默认的`webpack`行为之上增加额外的成本。
+
+## 总结
+
+**<strong>为确保捆绑程序能够成功优化您的应用程序，请避免依赖 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。</strong>**
+
+以下是一些可操作的提示，以验证您是否处于最佳路径上：
+
+- 使用 Rollup.js 的 [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) 插件并设置`modulesOnly`标志，以指定您只想依赖 ECMAScript 模块。
+- 使用包[`is-esm`](https://github.com/mgechev/is-esm)来验证 npm 包是否使用 ECMAScript 模块。
+- 如果您使用的是 Angular，默认情况下，如果您依赖于不可摇树的模块，则将收到警告。
diff --git a/src/site/content/zh/blog/compat2021/index.md b/src/site/content/zh/blog/compat2021/index.md
new file mode 100644
index 00000000000..e11a5f6126f
--- /dev/null
+++ b/src/site/content/zh/blog/compat2021/index.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Compat 2021：消除网络上的五个主要兼容性痛点
+subhead: "Google 正在与其他浏览器供应商和行业合作伙伴协作修复 Web 开发人员面临的前五个浏览器兼容性痛点：CSS flexbox，CSS 网格、`position:sticky`、`aspect-ratio` 和 CSS 变换。"
+description: 详细了解 Google 如何与其他浏览器供应商以及行业合作伙伴协作修复 Web 开发人员面临的前五个浏览器兼容性痛点：CSS flexbox、CSS 网格、位置：粘性、纵横比和 CSS 变换。
+authors:
+  - robertnyman
+  - foolip
+hero: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/KQ5oNcLGKdBSuUM8pFPx.jpeg
+alt: 缺了一块的拼图。
+date: 2021-03-22
+updated: 2021-11-16
+tags:
+  - blog
+  - css
+---
+
+Google 正在与其他浏览器供应商和行业合作伙伴协作，为 Web 开发人员解决前五个浏览器兼容性痛点。重点领域是 CSS flexbox、CSS 网格、`position: sticky`、`aspect-ratio` 和 CSS 变换。请查看[如何做出贡献并继续](#contribute)学习如何参与。
+
+## 背景
+
+Web 上的兼容性一直是开发人员面临的一大挑战。在过去的几年里，Google 和其他合作伙伴，包括 Mozilla 和微软，已经着手更多地了解 Web 开发人员的主要痛点，以推动我们的工作和优先级，使情况变得更好。该项目与 [Google 的开发者满意度](/developer-satisfaction) (DevSAT) 工作相关，随着 2019 年和 2020 年 [MDN DNA（开发者需求评估）调查](https://insights.developer.mozilla.org/)的创建，以及在 [MDN 浏览器兼容性报告 2020](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html) 中呈现的深入研究工作，它在更大规模范围上开展。已经通过各种渠道进行了其他研究，例如[CSS 现状](https://stateofcss.com/)和[JS 现状](https://stateofjs.com/)调查。
+
+2021 年的目标是消除五个关键重点领域的浏览器兼容性问题，以便开发人员可以自信地将它们作为可靠的基础。这项工作被称为 [**#Compat 2021**](https://twitter.com/search?q=%23compat2021&src=typed_query&f=live) 。
+
+## 选择关注什么
+
+基本上，所有的 Web 平台都存在浏览器兼容性问题，但该项目的重点是针对那些少数最有问题的领域，这些领域可以通过努力取得显着改善，它们是开发人员面临的首要问题，需要消除。
+
+兼容性项目使用多个标准来影响优先考虑的领域，其中一些标准是：
+
+- 功能使用。例如，[75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) 的页面浏览量都使用了 flexbox ，而且[HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout) 的采用率也在强劲增长。
+
+- 错误数量（[Chromium](https://bugs.chromium.org/p/chromium/issues/list)、[Gecko](https://bugzilla.mozilla.org/describecomponents.cgi)、[WebKit](https://bugs.webkit.org/) 中），以及对于 Chromium，这些错误有多少颗星。
+
+- 调查结果：
+
+    - [MDN DNA 调查](https://insights.developer.mozilla.org/)
+    - [MDN 浏览器兼容性报告](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)
+    - 最知名和最常用功能的 [CSS 现状](https://2020.stateofcss.com/en-US/features/)
+
+- 来自[web-platform-tests](https://github.com/web-platform-tests/wpt#the-web-platform-tests-project)的测试结果。例如，[wpt.fyi 上的 flexbox](https://wpt.fyi/results/css/css-flexbox)。
+
+- [我可以使用](https://caniuse.com/)的最常搜索功能。
+
+## 2021 年的五个重点领域
+
+2020 年，Chromium 开始致力于解决 [2020 年提高 Chromium 浏览器兼容性](https://blog.chromium.org/2020/06/improving-chromiums-browser.html)中概述的主要领域。2021 年，我们将继续努力。Google 和微软正在与 [Igalia](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/) 一起致力于[解决 Chromium 中的主要问题](https://www.igalia.com/)。Igalia 是 Chromium 和 WebKit 的定期贡献者，也是嵌入式设备官方 WebKit 端口的维护者，一直非常支持并参与这些兼容性工作，并将帮助解决和跟踪已发现的问题。
+
+以下是承诺在 2021 年修复的领域。
+
+### CSS flexbox
+
+[CSS flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) 在网络上被[广泛使用](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)，但对于开发者来说仍然存在一些重大挑战。例如，[Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=721123) 和 [WebKit](https://bugs.webkit.org/show_bug.cgi?id=209983) 都存在 `auto-height` flex 容器的问题，导致图像大小不正确。
+
+<div class="switcher">
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/qmKoKHkZga5hgBeiHuBz.png", alt="棋盘的拉伸照片。", width="800", height="400" %}<figcaption style="margin-top: auto">由于错误，图像大小不正确。</figcaption></figure>
+    <figure style="display: flex; flex-direction: column;">{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/0ruhCiZKRP9jBhnN70Xh.png", alt="棋盘。", width="800", height="800" %}<figcaption style="margin-top: auto">正确大小的图像。<br>摄影：<a href="https://unsplash.com/photos/ab5OK9mx8do">Alireza Mahmoudi</a>。</figcaption></figure>
+</div>
+
+[Igalia 的 flexbox Cats](https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/) 博客文章通过更多示例深入探讨了这些问题。
+
+#### 为什么优先
+
+- 调查：[MDN 浏览器兼容性报告](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)中的主要问题，[CSS 现状](https://2020.stateofcss.com/en-US/features/)中最长使用和最为人所知
+- 测试：所有浏览器中 [85% 通过](https://wpt.fyi/results/css/css-flexbox)
+- 使用率：[75%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1692) 的页面浏览量，在 [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)中增长强劲
+
+### CSS 网格
+
+[CSS 网格](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)是现代 Web 布局的核心构建块，取代了许多旧的技术和变通方法。随着采用率的增长，它需要非常可靠，因此浏览器之间的差异永远不是避免它的理由。缺乏的一个方面是动画网格布局的能力，Gecko 支持，但 [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=759665) 或 [WebKit](https://bugs.webkit.org/show_bug.cgi?id=204580) 不支持。当支持时，可以实现这样的效果：
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/Ovs6wg9o5AJUG4IIoVvj.mp4", height="400", controls=false, autoplay=true, loop=true, muted=true, playinline=true %}<figcaption><a href="https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/">Chen Hui Jing</a> 演示的动画象棋。</figcaption></figure>
+
+#### 为什么优先
+
+- 调查：[MDN 浏览器兼容性报告](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)中的次要问题，众所周知但在 [CSS 现状](https://2020.stateofcss.com/en-US/features/)中较少使用
+- 测试：所有浏览器中 [75% 通过](https://wpt.fyi/results/css/css-grid)
+- 使用率：[8% 且稳定增长](https://www.chromestatus.com/metrics/feature/timeline/popularity/1693)，在 [HTTP Archive](https://almanac.httparchive.org/en/2020/css#layout)中略有增长
+
+{% Aside %} 虽然 [subgrid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid) 等更新的功能对于开发人员很重要，但其不是这项具体工作的一部分。要继续，请参阅 [MDN 上的 Subgrid compat](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid#browser_compatibility)。 {% endAside %}
+
+### CSS 位置：粘性
+
+[粘性定位](https://developer.mozilla.org/docs/Web/CSS/position#sticky_positioning)允许内容粘在视口的边缘，通常用于始终在视口顶部可见的标题。虽然在所有浏览器中都受支持，但在某些常见用例中它无法按预期工作。例如，Chromium 不支持[粘性表头](https://bugs.chromium.org/p/chromium/issues/detail?id=702927)，尽管当前在[flag 后面受支持](https://bugs.chromium.org/p/chromium/issues/detail?id=958381)，但结果在不同的浏览器之间不一致：
+
+<div class="switcher">
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/DtNtuWCZUNwi7GGSBPvA.png", alt="", width="250", height="350" %}<figcaption>有“TablesNG”的 Chromium</figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/hJwLpLeJNfG6kVBUK9Yn.png", alt="", width="250", height="350" %} <figcaption> Gecko </figcaption></figure>
+    <figure>{% Img src="image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/od1YyD2BoBqfrnkzynUK.png", alt="", width="250", height="350" %} <figcaption> WebKit </figcaption></figure>
+</div>
+
+查看由 Rob Flack 提供的<a href="https://output.jsbin.com/xunosud">粘性表头演示</a>。
+
+#### 为什么优先
+
+- 调查：在 [CSS 现状](https://2020.stateofcss.com/en-US/features/)中广为人知和使用，在 [MDN 浏览器兼容性报告](https://insights.developer.mozilla.org/reports/mdn-browser-compatibility-report-2020.html)中多次提及
+- 测试：所有浏览器中 [66% 通过](https://wpt.fyi/results/css/css-position/sticky?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=%28status%3A%21missing%26status%3A%21pass%26status%3A%21ok%29)
+- 使用率：[8%](https://www.chromestatus.com/metrics/feature/timeline/popularity/3354)
+
+### CSS 纵横比属性
+
+新的 [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) CSS 属性可以轻松地为元素保持一致的纵横比，从而消除对常见的 [`padding-top` hack 的需要](/aspect-ratio/#the-old-hack-maintaining-aspect-ratio-with-padding-top)：
+
+<div class="switcher">{% Compare 'worse', 'Using padding-top' %} ```css .container { 宽度：100%;填充顶部：56.25%； } ``` {% endCompare %}</div>
+<p data-md-type="paragraph">{% Compare 'better', 'Using aspect-ratio' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">.container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</code></pre>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+因为它是如此常见的用例，所以预计会被广泛使用，我们希望确保它在所有常见场景和浏览器中都是可靠的。
+
+#### 为什么优先
+
+- 调查：在[CSS 现状](https://2020.stateofcss.com/en-US/features/)中已广为人知但尚未广泛使用
+- 测试：所有浏览器中 [27% 通过](https://wpt.fyi/results/css/css-sizing/aspect-ratio)
+- 使用率：[3%](https://www.chromestatus.com/metrics/css/timeline/popularity/657) ，预计会增长
+
+### CSS 变换
+
+多年来，所有浏览器都支持 [CSS 变换](https://developer.mozilla.org/docs/Web/CSS/transform)，并在网络上广泛使用。然而，在许多浏览器中仍然存在许多不同的领域，特别是动画和 3D 变换。例如，卡片翻转效果在浏览器之间可能非常不一致：
+
+<figure>{% Video src="video/vgdbNJBYHma2o62ZqYmcnkq3j0o1/RhyPpk7dUooEobKZ3VOC.mp4", controls=false, autoplay=true, loop=true, muted=true, playinline=true %}<figcaption> Chromium（左）、Gecko（中）和 WebKit（右）中的卡片翻转效果。来自 David Baron 在<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1008483#c42">错误评论</a>中的演示。</figcaption></figure>
+
+#### 为什么优先
+
+- 调查：在[CSS 现状](https://2020.stateofcss.com/en-US/features/)中广为人知且广泛使用
+- 测试：所有浏览器中 [55% 通过](https://wpt.fyi/results/css/css-transforms)
+- 使用率：[80%](https://www.chromestatus.com/metrics/css/timeline/popularity/446)
+
+## 您如何做出贡献和关注 {: #contribute }
+
+关注并分享我们在 [@ChromiumDev](https://twitter.com/ChromiumDev) 或[公共邮件列表 Compat 2021](https://groups.google.com/g/compat2021) 上发布的任何更新。确保存在错误，或将您遇到的问题[进行归档](/how-to-file-a-good-bug/)，如果有任何遗漏，请通过上述渠道联系。
+
+web.dev 上会定期更新进度，您还可以在 [Compat 2021 仪表板中](https://wpt.fyi/compat2021)关注每个重点领域的进度。
+
+<figure><p data-md-type="paragraph"><a href="https://wpt.fyi/compat2021">{% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/BgX0dnesIhLaFAKyILzk.png", alt="Compat 2021 Dashboard", width="800", height="942" %}</a></p>
+<figcaption>Compat 2021 仪表板（截图日期：2021 年 11 月 16 日）。</figcaption></figure>
+
+我们希望浏览器供应商之间共同努力提高可靠性和互操作性的举措将帮助您在网络上构建卓越的内容！
diff --git a/src/site/content/zh/blog/conversion-measurement/index.md b/src/site/content/zh/blog/conversion-measurement/index.md
new file mode 100644
index 00000000000..8e70001d56c
--- /dev/null
+++ b/src/site/content/zh/blog/conversion-measurement/index.md
@@ -0,0 +1,497 @@
+---
+layout: post
+title: 测量广告转化更私密的方式：事件转化测量 API
+subhead: 一个可用作原始试验的全新网络 API，能够测量广告点击时带来的转化，而无需使用跨站标识符。
+authors:
+  - maudn
+  - samdutton
+hero: image/admin/wRrDtHNikUNqgdDewvYG.jpg
+date: 2020-10-06
+updated: 2020-05-04
+tags:
+  - blog
+  - privacy
+---
+
+{% Aside 'caution' %} 事件转化测量 API 将更名为*归因报告 API* 并提供更多功能。
+
+- 如果您正在 [Chrome 91](https://chromestatus.com/features/schedule) 及更低版本中尝试使用（[转化测量 API](https://github.com/WICG/conversion-measurement-api/blob/3e0ef7d3cee8d7dc5a4b953e70cb027b0e13943b/README.md)），请阅读本篇博文，了解该 API 使用方式的更多详情、用例和说明。
+- 如果您对即将在 Chrome 中投入实验（原始试验）的该 API 的下一次迭代（归因报告）感兴趣，请[加入邮件列表](https://groups.google.com/u/1/a/chromium.org/g/attribution-reporting-api-dev)获取可用实验的相关更新。
+
+{% endAside %}
+
+为了测量广告活动的有效性，广告商和发布商需要知道哪些广告点击或查看带来了[转化](/digging-into-the-privacy-sandbox/#conversion)（例如购买或注册）。长久以来，这都是通过**第三方 cookie** 来实现的。现在，事件转化测量 API 能够将发布商网站上的事件与广告商网站上的后续转化相关联，而无需涉及可用于跨站识别用户的机制。
+
+{% Aside %} **本提案需要您的反馈！**如果您希望发表意见，请在 API 提案的存储库中[创建问题](https://github.com/WICG/conversion-measurement-api/issues/)。{% endAside %}
+
+{% Aside %}该 API 是隐私沙盒的一部分，这是一系列满足第三方用例的提案，同时无需第三方 cookie 或其他跨站跟踪机制。请参阅[深入挖掘隐私沙盒](/digging-into-the-privacy-sandbox)，了解有关全部提案的概述。{% endAside %}
+
+## 通用术语
+
+- **广告技术平台**：提供软件和工具从而使品牌或代理机构能够定位、交付和分析其数字广告的公司。
+- **广告商**：为广告付费的公司。
+- **发布商**：在其网站上展示广告的公司。
+- **点击型转化**：归因于广告点击的转化。
+- **浏览型转化**：归因于广告展示的转化（用户未与广告交互，而稍后又发生了转化）。
+
+## 谁需要了解此 API：广告技术平台、广告商和发布商
+
+- **广告技术平台**（例如**[需求方平台](https://en.wikipedia.org/wiki/Demand-side_platform)**）可能会有兴趣使用此 API 来支持当前依赖第三方 cookie 的功能。如果您正在研究转化测量系统：请[尝试演示版](#demo)、[使用该 API 进行实验](#experiment-with-the-api)并[分享您的反馈](#share-your-feedback)。
+- **依赖自定义代码进行广告或转化测量的广告商和发布商**可能同样有兴趣使用此 API 来替换现有技术。
+- **依靠广告技术平台进行广告或转化测量的广告商和发布商**不需要直接使用 API，但可能会对[此 API 的基本原理](#why-is-this-needed)感兴趣，尤其是在您正在使用可能集成 API 的广告技术平台的情况下。
+
+## API 概览
+
+### 为什么需要这个 API？
+
+如今，广告转化测量通常依赖于[第三方 cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Third-party_cookies)。**但是浏览器正在限制获取这些 cookie。**
+
+Chrome 计划[逐步停止对第三方 cookie 的支持，](https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html)并[为用户提供阻止这些 cookie 的方法和选项](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en)。Safari [阻止第三方 cookie](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)，Firefox [阻止已知的第三方跟踪 cookie](https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default)，而 Edge [提供反跟踪功能](https://support.microsoft.com/en-us/help/4533959/microsoft-edge-learn-about-tracking-prevention?ocid=EdgePrivacySettings-TrackingPrevention)。
+
+第三方 cookie 正在成为一种传统解决方案。像此 API 这样的**新型专用 API** 正在兴起，通过保护隐私的方式来解决以往利用第三方 cookie 解决的用例。
+
+**事件转化测量 API 与第三方 cookie 相比如何？**
+
+- 与 cookie 不同，该 API **专为**测量转化**而构建**。这反过来又可以使浏览器应用更多增强的隐私保护。
+- **更加私密**：该 API 使得在两个不同的顶级网站上识别同一位用户（例如将发布商端和广告商端的用户资料联系起来）变得困难。请参阅[该 API 如何保护用户隐私](#how-this-api-preserves-user-privacy)。
+
+### 第一次迭代
+
+此 API 还处于**早期实验阶段**。将其用作原始试验是**第一次迭代**中的功能。在[未来迭代](#use-cases)中，情况可能会发生重大变化。
+
+### 仅支持点击型
+
+本次 API 迭代仅支持**点击型转化测量**， [浏览型转化测量](https://github.com/WICG/conversion-measurement-api/blob/main/event_attribution_reporting.md)正在进行公开孵化。
+
+### 运作方式
+
+<figure>{% Img src="image/admin/Xn96AVosulGisR6Hoj4J.jpg", alt="图解：转化测量 API 步骤概览", width="800", height="496" %}</figure>
+
+此 API 可以与两类用于广告的链接（`<a>`元素）一起使用：
+
+- **第一方**上下文中的链接，例如社交网络或搜索引擎结果页面上的广告；
+- **第三方 iframe** 中的链接，例如使用第三方广告技术提供商的发布商网站上的链接。
+
+通过此 API，可以使用于广告转化的特定属性来配置这类出站链接：
+
+- 附加到发布商端广告点击的自定义数据，例如点击 ID 或活动 ID。
+- 该广告预期会发生转化的网站。
+- 应该收到成功转化通知的报告端点。
+- 无法再计入广告转化的截止日期和时间。
+
+当用户点击广告时，用户本地设备上的浏览器会记录此事件以及由`<a>`元素上的转化测量属性指定的转化配置和点击数据。
+
+稍后，用户可能会访问广告商的网站并执行由广告商或其广告技术提供商归类为**转化**的操作。如果发生这种情况，那么用户浏览器就会匹配广告点击和转化事件。
+
+浏览器最终安排将**转化报告**发送给`<a>`元素属性中指定的端点。该报告包含有关促成此次转化的广告点击数据以及有关转化的数据。
+
+如果某次给定的广告点击注册了多次转化，则浏览器会安排发送尽可能多的相应报告（每次广告点击最多发送三次）。
+
+报告会延迟发送：转化后数天或有时数周（请参阅[报告时间](#report-timing)了解具体原因）。
+
+## 浏览器支持和类似 API
+
+### 浏览器支持
+
+对事件转化测量 API 提供的支持：
+
+- 作为一个[原始试验](/origin-trials/)。原始试验为一个给定[域](/same-site-same-origin/#origin)的**所有访问者**启用 API。**您需要为原始试验注册您的域，以便对最终用户试用 API**。请参阅[使用转化测量 API](/using-conversion-measurement)，了解原始试验的相关详情。
+- 通过在 Chrome 86 及更高版本中开启标志。标志会在**单个用户**的浏览器上启用 API。**标志在本地开发时十分有用**。
+
+请在 [Chrome 功能条目](https://chromestatus.com/features/6412002824028160)上查看当前状态的相关详情。
+
+### 标准化
+
+此 API 是在网络平台孵化器社区组（[WICG](https://www.w3.org/community/wicg/)）中进行公开设计的，目前可以在 Chrome 中进行实验。
+
+### 类似 API
+
+Safari 使用的网络浏览器引擎 WebKit 有一个具有类似目标的提案，即[私人点击测量](https://github.com/privacycg/private-click-measurement)。隐私社区组（[PrivacyCG](https://www.w3.org/community/privacycg/)）正在对该提案进行研究。
+
+## 此 API 如何保护用户隐私
+
+通过使用此 API，您就可以在保护用户隐私的同时测量转化：用户无法被跨站识别。这是通过**数据限制**、**向转化数据中添加噪声**以及**报告时间**机制实现的。
+
+让我们仔细看看这些机制的工作原理及其在实践中的意义。
+
+### 数据限制
+
+在下文中，**点击时间或浏览时间数据**是`adtech.example`在广告被提供给用户，然后被点击或浏览时获得的数据。转化发生时的数据是**转化时间数据**。
+
+我们来看看一个**发布商**`news.example`和一个**广告商**`shoes.example`的情况。发布商网站`news.example`上有来自**广告技术平台**`adtech.example`的第三方脚本，其中包含广告商`shoes.example`的广告。`shoes.example`还包括`adtech.example`脚本，用以检测转化。
+
+`adtech.example`可以了解到网络用户的多少信息？
+
+#### 使用第三方 cookie
+
+<figure>{% Img src="image/admin/kRpuY2r7ZSPtADz7e1P5.jpg", alt="图解：第三方 cookie 如何实现跨站用户识别", width="800", height="860" %}</figure>
+
+`adtech.example`依赖一个**第三方 cookie 作为唯一的跨站标识符**来**跨站识别用户**。此外， `adtech.example`可以**同时**访问详细的点击或浏览时间数据以及详细的转化时间数据，并将数据联系起来。
+
+因此，`adtech.example`可以跨站跟踪单个用户在浏览和点击广告，以及转化之间的行为。
+
+由于`adtech.example`通常会出现在大量发布商和广告商的网站上（而不仅仅是`news.example`和`shoes.example`），因此用户在整个网络上的行为都可以被跟踪。
+
+#### 使用事件转化测量 API
+
+<figure>{% Img src="image/admin/X6sfyeKGncVm0LJSYJva.jpg", alt="图解：API 如何在避免跨站用户识别的情况下启用转化测量", width="800", height="643" %}<figcaption>cookie 图解中的"广告 ID"和"点击 ID"都是可以映射到详细数据的标识符。在这张图解中，标识符被称为"点击 ID"，因为该 API 仅支持点击型转化测量。</figcaption></figure>
+
+`adtech.example`无法使用跨站标识符，因此**无法跨站识别用户**。
+
+- 64 位标识符可以附加到广告点击上。
+- 只有 3 位的转化数据可以附加到转化事件中。3 位可以拟合到一个从 0 到 7 的整数值。虽然数据不多，但足以让广告商了解如何对未来的广告预算支出做出正确的决定（例如通过训练数据模型）。
+
+{% Aside %}点击数据和转化数据绝不会在同一上下文中暴露到 JavaScript 环境。{% endAside %}
+
+#### 如果没有第三方 cookie 替代方案
+
+如果没有像事件转化测量 API 这样的第三方 cookie 替代方案，转化就无法进行归因：如果`adtech.example`同时出现在发布商和广告商的网站上，它可能会访问点击时间或转化时间数据，但无法将数据联系起来。
+
+在这种情况下，虽然用户隐私得到了保护，但广告商也无法对其广告支出进行优化。因此我们才需要像事件转化测量 API 这样的替代方案。
+
+### 向转化数据中添加噪声
+
+转化时收集的 3 位数据是有**噪声**的。
+
+例如，在 Chrome 的执行中，向数据中添加噪声的原理如下：API 在 5% 的时间里报告一个随机 3 位值，而不是实际的转化数据。
+
+这可以保护用户免受隐私攻击。试图滥用多次转化的数据来创建标识符的行为者不再会对他们收到的数据有充分的信心，因此使得这些类型的攻击变得更加复杂。
+
+请注意，您可以[恢复真实的转化计数](/using-conversion-measurement/#(optional)-recover-the-corrected-conversion-count)。
+
+对点击数据和转化数据的总结：
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>数据</th>
+        <th>大小</th>
+        <th>示例</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>点击数据（<code>impressiondata</code>属性）</td>
+        <td>64 位</td>
+        <td>一个广告 ID 或点击 ID</td>
+      </tr>
+      <tr>
+        <td>转化数据</td>
+        <td>3 位，有噪声</td>
+        <td>一个从 0 到 7 的整数，可以映射到一种转化类型：注册、完成结帐等。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### 报告时间
+
+如果某次给定的广告点击注册了多次转化，则浏览器会**为每次转化发送相应的报告，且每次点击最多发送 3 次**。
+
+为了防止转化时间被用于从转化方获取更多信息而妨碍用户隐私，此 API 指定转化报告不会在转化发生后立即发送。在最初的广告点击后，与此次点击相关联的**报告窗口**时间表就会开始计时。每个报告窗口都有一个截止日期，在该截止日期前注册的转化将在窗口结束时发送。
+
+报告也可能不会在这些准确的预定日期和时间发送：如果在预定发送报告时浏览器没有运行，则报告会在浏览器启动时发送，而这可能是预定时间之后的几天或几周。
+
+到期后（点击时间 + `impressionexpiry`），浏览器将不再对广告转化进行计数，`impressionexpiry`是不再计入该广告转化的截止日期和时间。
+
+在 Chrome 中，报告安排的运作方式如下：
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th><code>impressionexpiry</code></th>
+        <th>转化报告根据转化时间进行发送（如果浏览器处于打开状态）...</th>
+        <th>报告窗口数</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>30 天，默认最大值</td>
+        <td>
+          <ul>
+            <li>广告点击后 2 天</li>
+            <li>或广告点击后 7 天</li>
+            <li>或<code>impressionexpiry</code> = 广告点击后 30 天。</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>在 7 到 30 天之间</td>
+        <td>
+          <ul>
+            <li>广告点击后 2 天</li>
+            <li>或广告点击后 7 天</li>
+            <li>或广告点击后<code>impressionexpiry</code>。</li>
+          </ul>
+        </td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>在 2 到 7 天之间</td>
+        <td>
+          <ul>
+            <li>广告点击后 2 天</li>
+            <li>或广告点击后<code>impressionexpiry</code>。</li>
+          </ul>
+        </td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>不到 2 天</td>
+        <td>
+          <li>广告点击后 2 天</li>
+        </td>
+        <td>1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<figure>{% Img src="image/admin/bgkpW6Nuqs5q1ddyMG8X.jpg", alt="何时发送什么报告的时间表", width="800", height="462" %}</figure>
+
+请参阅[发送预定报告](https://github.com/WICG/conversion-measurement-api#sending-scheduled-reports)了解有关报告时间的更多详情。
+
+## 示例
+
+{% Aside %} 如需查看实际效果，请试用[演示版](https://goo.gle/demo-event-level-conversion-measurement-api)⚡️ 并查看相应的[代码](https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/conversion-measurement)。{% endAside %}
+
+以下是 API 记录和报告转化的方式。请注意，这是当前 API 的点击转化流程工作方式。此 API 的未来迭代[可能会有所不同](#use-cases)。
+
+### 广告点击（步骤 1 到 5）
+
+<figure>{% Img src="image/admin/FvbacJL6u37XHuvQuUuO.jpg", alt="图解：广告点击和点击存储", width="800", height="694" %}</figure>
+
+一个`<a>`广告元素在 iframe 中由`adtech.example`加载到发布商网站上。
+
+广告技术平台开发者已经为`<a>`元素配置了转化测量属性：
+
+```html
+<a
+  id="ad"
+  impressiondata="200400600"
+  conversiondestination="https://advertiser.example"
+  reportingorigin="https://adtech.example"
+  impressionexpiry="864000000"
+  href="https://advertiser.example/shoes07"
+>
+  <img src="/images/shoe.jpg" alt="shoe" />
+</a>
+```
+
+此代码指定了以下内容：
+
+<div>
+  <table data-alignment="top">
+    <thead>
+      <tr>
+        <th>属性</th>
+        <th>默认值、最大值、最小值</th>
+        <th>示例</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>impressiondata</code>（必需）：附加到广告点击的一个 <b>64 位</b>标识符。</td>
+        <td>（无默认）</td>
+        <td>一个动态生成的点击 ID，例如一个 64 位整数：<code>200400600</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>conversiondestination</code>（必需）：该广告预期会发生转化的 <b><a href="/same-site-same-origin/#site" noopener="">eTLD + 1</a></b>。</td>
+        <td>（无默认）</td>
+        <td>
+<code>https://advertiser.example</code>。<br>如果<code>conversiondestination</code>是<code>https://advertiser.example</code>，则<code>https://advertiser.example</code>和<code>https://shop.advertiser.example</code>上的转化都将进行归因。<br>如果<code>conversiondestination</code>是<code>https://shop.advertiser.example</code>，也会发生同样的情况：<code>https://advertiser.example</code>和<code>https://shop.advertiser.example</code>上的转化都将进行归因。</td>
+      </tr>
+      <tr>
+        <td>
+<code>impressionexpiry</code>（可选）：以毫秒为单位，该广告转化可以进行归因的截止时间。</td>
+        <td>
+<code>2592000000</code> = 30 天（以毫秒为单位）。<br><br>最大值：30 天（以毫秒为单位）。<br><br>最小值：2 天（以毫秒为单位）。</td>
+        <td>点击后十天：<code>864000000</code>
+</td>
+      </tr>
+      <tr>
+        <td>
+<code>reportingorigin</code>（可选）：报告已确认转化的目标。</td>
+        <td>已添加链接元素的页面的顶级域。</td>
+        <td><code>https://adtech.example</code></td>
+      </tr>
+      <tr>
+        <td>
+<code>href</code>：广告点击的预期目标。</td>
+        <td><code>/</code></td>
+        <td><code>https://advertiser.example/shoes07</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %} 关于示例的一些说明：
+
+- 尽管 API 目前仅支持点击型转化，但您会在 API 属性或 API 提案中看到"展示量"这个术语。这些名称可能会在 API 的未来迭代中更新。
+- 广告并不一定要在 iframe 中，但本示例中的广告属于这一情况。
+
+{% endAside %}
+
+{% Aside 'gotchas' %}
+
+- 通过`window.open`或`window.location`导航产生的流将不符合归因条件。
+
+{% endAside %}
+
+当用户点选或点击广告时，他们会导航到广告商的网站。导航提交后，浏览器会存储一个对象，其中包括`impressiondata`、`conversiondestination`、`reportingorigin`和`impressionexpiry`：
+
+```json
+{
+  "impression-data": "200400600",
+  "conversion-destination": "https://advertiser.example",
+  "reporting-origin": "https://adtech.example",
+  "impression-expiry": 864000000
+}
+```
+
+### 转化和报告安排（步骤 6 到 9）
+
+<figure>{% Img src="image/admin/2fFVvAwyiXSaSDp8XVXo.jpg", alt="图解：转化和报告安排", width="800", height="639" %}</figure>
+
+用户直接在点击广告后或者在点击广告的一段时间后（例如在第二天）访问`advertiser.example`，浏览运动鞋并找到他们想要购买的一双，然后前往结帐。`advertiser.example`已经在结帐页面上包含了一个像素：
+
+```html
+<img
+  height="1"
+  width="1"
+  src="https://adtech.example/conversion?model=shoe07&type=checkout&…"
+/>
+```
+
+`adtech.example`收到此请求，并确定请求符合转化条件。这时候，API 需要请求浏览器记录一次转化。 `adtech.example`将所有转化数据压缩成 3 位的数据，即 0 到 7 之间的一个整数，例如，**结账**操作可能被映射为转化值 2。
+
+然后，`adtech.example`向浏览器发送一个特定的注册转化重定向：
+
+```js
+const conversionValues = {
+  signup: 1,
+  checkout: 2,
+};
+
+app.get('/conversion', (req, res) => {
+  const conversionData = conversionValues[req.query.conversiontype];
+  res.redirect(
+    302,
+    `/.well-known/register-conversion?conversion-data=${conversionData}`,
+  );
+});
+```
+
+{% Aside %}`.well-known` URL 是一些特殊的 URL。这些 URL 使软件工具和服务器可以轻松发现网站常用的信息或资源，例如，用户可以在哪个页面上[更改他们的密码](/change-password-url/)。`.well-known`在此处的作用只是为了让浏览器将其识别为一个特殊转化请求。该请求实际上是由浏览器在内部取消的。{% endAside %}
+
+浏览器收到此请求。在检测到`.well-known/register-conversion`时，浏览器：
+
+- 会在存储中查找与该`conversiondestination`匹配的所有广告点击（因为浏览器是从一个已经在用户点击广告时被注册为`conversiondestination`的 URL 上收到转化的）。浏览器找到一天前在发布商网站上发生的广告点击。
+- 为该广告点击注册一次转化。
+
+多次广告点击都可以匹配一次转化：用户可能同时在`news.example`和`weather.example`上都点击了`shoes.example`广告。在这种情况下，多次点击将注册多次转化。
+
+现在，浏览器知道自己需要向广告技术服务器通知此次转化，而更具体地说，浏览器必须通知在`<a>`元素和像素请求( `adtech.example` ) 中指定的`reportingorigin`。
+
+为此，浏览器计划发送**转化报告**，即一个包含点击数据（来自发布商网站）和转化数据（来自广告商网站）的数据对象。在此示例中，用户在点击之后的一天发生了转化。因此，如果浏览器正在运行，报告预计会在之后一天，也就是点击后两天标记处发送。
+
+### 发送报告（步骤 10 和 11）
+
+<figure>{% Img src="image/admin/Er48gVzK5gHUGdDHWHz1.jpg", alt="图解：浏览器发送报告", width="800", height="533" %}</figure>
+
+一到发送报告的预定时间，浏览器就会发送**转化报告**：浏览器会向`<a>`元素 ( `adtech.example` ) 中指定的报告域发送一个 HTTP POST。例如：
+
+`https://adtech.example/.well-known/register-conversion?impression-data=200400600&conversion-data=2&credit=100`
+
+所包括的参数有：
+
+- 与原始广告点击相关的数据（`impression-data`）。
+- 与转化相关的数据，[可能包含噪声](#noising-of-conversion-data)。
+- 归因于该点击的转化功劳。此 API 遵循**最终点击归因**模型：最近一次匹配的广告点击功劳为 100，其他所有匹配的广告点击功劳为 0。
+
+当广告技术服务器收到此请求时，就可以从中提取`impression-data`和`conversion-data`，即转化报告：
+
+```json
+{"impression-data": "200400600", "conversion-data": 3, "credit": 100}
+```
+
+### 后续转化和到期
+
+随后，用户可能会再次发生转化，例如在`advertiser.example`上购买一个网球拍来和他们的鞋子搭配使用。这种情况下也是类似的流程：
+
+- 广告技术服务器向浏览器发送转化请求。
+- 浏览器将该转化与广告点击进行匹配，安排报告，稍后将其发送到广告技术服务器。
+
+在`impressionexpiry`后，浏览器将不再对该广告点击的转化进行计数，并会将广告点击从浏览器存储中删除。
+
+## 用例
+
+### 目前支持哪些功能
+
+- 测量点击型转化：确定哪些广告点击带来了转化，并获取有关转化的粗略信息。
+- 收集数据从而优化广告选择，例如通过训练机器学习模型。
+
+### 本次迭代不支持的功能
+
+以下功能暂不支持，但可能会出现在该 API 的未来迭代中，或出现在[聚合](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md)报告中：
+
+- 浏览型转化测量。
+- [多个报告端点](https://github.com/WICG/conversion-measurement-api/issues/29)。
+- [在 iOS/安卓应用程序中开始的网络转化](https://github.com/WICG/conversion-measurement-api/issues/54)。
+- 转化提升测量/增量：对于转化行为因果差异的测量，测量看到广告的测试组和没有看到广告的对照组之间的差异。
+- 非最终点击归因模型。
+- 需要大量转化事件相关信息的用例。例如，粒度购买价值或产品类别。
+
+在支持这些功能以及更多功能之前，我们必须向 API 添加**更多隐私保护机制**（噪声、更少的位数或其他限制）。
+
+围绕更多可能实现的功能的公开讨论正在 [API 提案存储库的**问题**](https://github.com/WICG/conversion-measurement-api/issues)中展开。
+
+{% Aside %}您的用例是否未被提及？您有关于此 API 的反馈吗？[欢迎分享](#share-your-feedback)。{% endAside %}
+
+### 在未来的迭代中还可能会有什么变化
+
+- 此 API 目前处于早期的实验阶段。在未来的迭代中，此 API 可能会发生重大变化，包括但不限于以下所列。该 API 的目标是在保护用户隐私的同时测量转化，因此任何有助于更好地解决这一用例的改变都将进行落实。
+- API 和属性命名可能会发生变化。
+- 点击数据和转化数据可能不需要进行编码。
+- 3 位的转化数据限制可能会增加或减少。
+- [可能会加入更多功能](#what-is-not-supported-in-this-iteration)，以及会在必要时添加**更多隐私保护**（噪声/更少的位数/其他限制）来支持这些新功能。
+
+如需关注并参与有关新功能的讨论，请观看提案的 [GitHub 存储库](https://github.com/WICG/conversion-measurement-api/issues)并提交想法。
+
+## 试试看
+
+### 演示版
+
+请试用[演示版](https://goo.gle/demo-event-level-conversion-measurement-api)。确保遵循"开始之前"的说明。
+
+有关演示版的任何问题，请在推特上 [@maudnals](https://twitter.com/maudnals?lang=en) 或 [@ChromiumDev！](https://twitter.com/ChromiumDev)
+
+### 试用 API
+
+如果您打算（在本地或对最终用户）试用 API，请参阅[使用转化测量 API](/using-conversion-measurement) 。
+
+### 分享您的反馈
+
+**您的反馈至关重要**，这样新的转化测量 API 才能支持您的用例并提供良好的开发者体验。
+
+- 如需报告 Chrome 执行过程中的错误，请[开立一项错误](https://bugs.chromium.org/p/chromium/issues/entry?status=Unconfirmed&components=Internals%3EConversionMeasurement&description=Chrome%20Version%3A%20%28copy%20from%20chrome%3A%2F%2Fversion%29%0AOS%3A%20%28e.g.%20Win10%2C%20MacOS%2010.12%2C%20etc...%29%0AURLs%20%28if%20applicable%29%20%3A%0A%0AWhat%20steps%20will%20reproduce%20the%20problem%3F%0A%281%29%0A%282%29%0A%283%29%0A%0AWhat%20is%20the%20expected%20result%3F%0A%0A%0AWhat%20happens%20instead%3F%0A%0AIf%20applicable%2C%20include%20screenshots%2Finfo%20from%20chrome%3A%2F%2Fconversion-internals%20or%20relevant%20devtools%20errors.%0A)。
+- 如需分享关于 Chrome API 的反馈以及讨论用例，请在 [API 提案存储库](https://github.com/WICG/conversion-measurement-api/issues)中创建新问题或参与现有问题的讨论。同样，您也可以在 [API 提案存储库](https://github.com/privacycg/private-click-measurement/issues)中讨论 WebKit/Safari API 及其用例。
+- 如需与行业专家讨论广告用例以及交换意见：加入[改善网络广告业务组](https://www.w3.org/community/web-adv/)。请加入[隐私社区组](https://www.w3.org/community/privacycg/)讨论 WebKit/Safari API 的相关问题。
+
+### 留心关注
+
+- 随着开发者反馈和用例的收集，事件转化测量 API 将随着时间的推移而不断发展。观看提案的 [GitHub 存储库](https://github.com/WICG/conversion-measurement-api/)。
+- [聚合转化测量 API](https://github.com/WICG/conversion-measurement-api/blob/master/AGGREGATE.md) 的发展也将对此 API 的功能进行完善，敬请持续关注。
+
+*非常感谢所有审稿人的贡献和反馈：特别是 Charlie Harrison、John Delaney、Michael Kleber 和 Kayce Basques。*
+
+*首图作者：William Warby / [Unsplash](https://unsplash.com/photos/WahfNoqbYnM) 上的 @wawarby，已编辑。*
diff --git a/src/site/content/zh/blog/coop-coep/index.md b/src/site/content/zh/blog/coop-coep/index.md
new file mode 100644
index 00000000000..f0164b670d0
--- /dev/null
+++ b/src/site/content/zh/blog/coop-coep/index.md
@@ -0,0 +1,289 @@
+---
+layout: post
+title: 使用 COOP 和 COEP“跨源隔离”网站
+subhead: |-
+  使用 COOP 和 COEP 设置跨源隔离环境并启用
+  强大的功能，如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”以及更高精度的高解析性能计时器。
+description: 某些 Web API 会导致 Spectre 等旁道攻击的风险增加。为了减轻这种风险，浏览器提供了一个基于选择加入的隔离环境，称为“跨源隔离”。请使用 COOP 和 COEP 来设置此类环境并启用强大的功能，如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”或进度更高的高解析性能计时器。
+authors:
+  - agektmr
+hero: image/admin/Rv8gOTwZwxr2Z7b13Ize.jpg
+alt: 用户正在浏览包含弹出窗口、iframe 和图像的网站的插图。
+date: 2020-04-13
+updated: 2021-11-26
+tags:
+  - blog
+  - security
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/register_trial/2780972769901281281"
+feedback:
+  - api
+---
+
+{% Aside '注意' %}
+
+从 Chrome 92 开始，Chrome 桌面版的 `SharedArrayBuffer` 需要跨源隔离。要了解更多信息，请查看 [Android 版 Chrome 88 和桌面版 Chrome 92 的 SharedArrayBuffer 更新](https://developer.chrome.com/blog/enabling-shared-array-buffer/)。
+
+{% endAside %}
+
+**更新**
+
+- **2021 年 8 月 5 日**：JS Self-Profiling API 被列为需要跨源隔离的 API 之一，但反映[最新方向变化](https://github.com/shhnjk/shhnjk.github.io/tree/main/investigations/js-self-profiling#conclusion)的内容已被删除。
+- **2021 年 5 月 6 日**：根据反馈和报告的问题，我们决定调整在 Chrome M92 中限制的非跨源隔离站点中 `SharedArrayBuffer` 用法的时间表。
+- **2021 年 4 月 16 日**：添加了关于[新的 COEP 无凭据模式](https://github.com/mikewest/credentiallessness/)和 [COOP 同源允许弹出窗口（作为跨源隔离宽松条件）](https://github.com/whatwg/html/issues/6364)的注释。
+- **2021 年 3 月 5 日**：删除了对 `SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory()` 和调试功能的限制。现在，Chrome 89 中已完全启用这些功能。添加了即将推出的功能 `performance.now()` 和 `performance.timeOrigin`，新功能具有更高的精度。
+- **2021 年 2 月 19 日**：在 DevTools 上添加了关于功能策略 `allow="cross-origin-isolated"` 和调试功能的注释。
+- **2020 年 10 月 15 日**：Chrome 87 中已提供 `self.crossOriginIsolated`。为了反映这一点，`self.crossOriginIsolated` 返回 `true` 时，`document.domain` 不可变。`performance.measureUserAgentSpecificMemory()` 正在结束来源试验，在 Chrome 89 中将默认启用。Chrome 88 中将提供 Android 版 Chrome 上的共享数组缓冲区。
+
+{% YouTube 'XLNJYhjA-0c' %}
+
+某些 Web API 会导致 Spectre 等旁道攻击的风险增加。为了减轻这种风险，浏览器提供了一个基于选择加入的隔离环境，称为“跨源隔离”。在跨源隔离状态下，网页能够使用特权功能，包括：
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>描述</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">
+          <code>SharedArrayBuffer</code></a>
+        </td>
+        <td>WebAssembly 线程需要。Android 版 Chrome 88 中提供了此 API。桌面版目前在<a href="https://www.chromium.org/Home/chromium-security/site-isolation">站点隔离</a>的帮助下默认启用，但需要跨源隔离状态，并且在 <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/">Chrome 92 中默认禁用</a>。</td>
+      </tr>
+      <tr>
+        <td>
+          <a href="/monitor-total-page-memory-usage/">
+          <code>performance.measureUserAgentSpecificMemory()</code></a>
+        </td>
+        <td>Chrome 89 中提供。</td>
+      </tr>
+      <tr>
+        <td><a href="https://crbug.com/1180178"><code>performance.now()</code> , <code>performance.timeOrigin</code></a></td>
+        <td>目前已在许多浏览器中提供，解析时间限制为 100 微秒或更短。通过跨源隔离，解析时间可以达到 5 微秒或更短。</td>
+      </tr>
+    </tbody>
+    <caption>将在跨源隔离状态之后可用的功能。</caption>
+  </table>
+</div>
+
+跨源隔离状态还可以防止修改 `document.domain`。（如果能够修改 `document.domain`，则允许同站文档之间相互通信，这是同源策略中的一个漏洞。）
+
+要选择跨源隔离状态，您需要在主文档上发送以下 HTTP 标头：
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+这些标头指示浏览器阻止加载未选择由跨源文档加载的资源或 iframe，并防止跨源窗口直接与您的文档交互。这也意味着跨源加载的资源需要选择加入。
+
+通过检查 [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated) 来确定网页是否处于跨源隔离状态。
+
+本文介绍了如何使用这些新标头。在[后续文章中](/why-coop-coep)中，我会提供更多背景和上下文。
+
+{% Aside %}
+
+本文针对希望准备好网站，从而以更可靠的方式跨浏览器平台使用 `SharedArrayBuffer`、WebAssembly 线程、`performance.measureUserAgentSpecificMemory()` 或精度更高的高解析性能计时器的用户。
+
+{% endAside %}
+
+{% Aside 'key-term' %} 本文使用了许多相似的术语。为了便于理解，我们先确定每个术语的定义：
+
+- [COEP：跨源嵌入器策略](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP：跨源打开程序策略](https://github.com/whatwg/html/pull/5334/files)
+- [CORP：跨源资源策略](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS：跨源资源共享](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB：跨源读取阻止](https://www.chromium.org/Home/chromium-security/corb-for-developers){% endAside %}
+
+## 通过部署 COOP 和 COEP 来让网站跨源隔离
+
+{% Aside %}阅读[启用跨源隔离指南](/cross-origin-isolation-guide/)，了解启用跨源隔离的实践步骤。{% endAside %}
+
+### 整合 COOP 和 COEP
+
+#### 1. 在顶级文档上设置 `Cross-Origin-Opener-Policy: same-origin`
+
+通过在顶级文档上启用 `COOP: same-origin`，则除非位于具有相同 COOP 设置的相同源中，否则同源窗口和从该文档打开的窗口将具有单独的浏览上下文组。因此，对打开的窗口强制执行隔离，同时禁止两个窗口相互通信。
+
+{% Aside 'caution' %}
+
+这将破坏需要跨源窗口交互（例如 OAuth 和支付）的集成。为了缓解此问题，我们正在[探索放宽条件](https://github.com/whatwg/html/issues/6364)，从而支持 `Cross-Origin-Opener-Policy: same-origin-allow-popups` 跨源隔离。这样就可以让该标头与其打开的窗口进行通信。
+
+如果您想启用跨源隔离，但被此问题阻碍，那么我们建议您[注册来源试验](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)，同时等待可用的新条件。在安全解决此问题之前，我们不打算终止来源试验。
+
+{% endAside %}
+
+浏览上下文组是一组共享相同上下文的选项卡、窗口或 iframe。例如，如果网站 (`https://a.example`) 打开一个弹出窗口 (`https://b.example`)，打开程序窗口和弹出窗口共享相同的浏览上下文，并且它们可以通过 DOM API (`window.opener`) 相互进行访问。
+
+{% Img src="image/admin/g42eZMpIKNbUL0cN6yjC.png", alt="浏览上下文组", width="470", height="469" %}
+
+您可以[从 DevTools](#devtools-coop) 检查窗口打开程序及其 openee 是否位于单独的浏览器上下文组中。
+
+{% Aside 'codelab' %}[查看不同 COOP 参数的影响](https://cross-origin-isolation.glitch.me/coop)。{% endAside %}
+
+#### 2. 确保资源已启用 CORP 或 CORS
+
+确保页面中的所有资源都已加载 CORP 或 CORS HTTP 标头。[第四步：启用 COEP](#enable-coep) 将需要此步骤。
+
+根据资源的性质，您需要执行以下操作：
+
+- 如果预计**仅从相同来源**加载资源，请设置 `Cross-Origin-Resource-Policy: same-origin` 标头。
+- 如果预计**仅从同一站点跨源**加载资源，请设置 `Cross-Origin-Resource-Policy: same-site` 标头。
+- 如果是**从您控制的跨源加载**资源，则要尽可能设置 `Cross-Origin-Resource-Policy: cross-origin` 标头。
+- 对于您无法控制的跨源资源：
+    - 如果使用 CORS 提供资源，请在加载 HTML 标记中使用 `crossorigin`（例如，`<img src="***" crossorigin>` 。）
+    - 要求资源所有者支持 CORS 或 CORP。
+- 对于 iframe，请使用 CORP 和 COEP 标头，如下所示：`Cross-Origin-Resource-Policy: same-origin`（或根据上下文使用 `same-site` 或 `cross-origin`）和 `Cross-Origin-Embedder-Policy: require-corp`。
+
+{% Aside 'gotchas' %} 通过将 `allow="cross-origin-isolated"` 功能策略应用到 `<iframe>` 标签并满足本文档中所述的相同条件，您可以对嵌入在 iframe 中的文档启用跨源隔离。请注意，包括父框架和子框架在内的整个文档链也必须跨源隔离。{% endAside %}
+
+{% Aside 'key-term' %}了解“同站”和“同源”之间的区别很重要。要了解区别，请查看[了解“同站”和“同源”](/same-site-same-origin)。{% endAside %}
+
+#### 3. 使用 COEP 仅报告 HTTP 标头评估嵌入资源
+
+在完全启用 COEP 之前，您可以使用 `Cross-Origin-Embedder-Policy-Report-Only` 标头进行试运行，检查策略是否确实有效。您将收到不阻止嵌入内容的报告。以递归方式将其应用到所有文档。有关“仅报告 HTTP 标头”的信息，请参阅[使用报告 API 观察问题](#observe-issues-using-the-reporting-api)。
+
+#### 4. 启用 COEP {: #enable-coep }
+
+确认一切正常且可以成功加载所有资源后，请将 `Cross-Origin-Embedder-Policy: require-corp` HTTP 标头应用到所有文档（包括通过 iframe 嵌入的文档）。
+
+{% Aside 'codelab' %} [查看不同 COEP/CORP 参数的影响](https://cross-origin-isolation.glitch.me/coep)。{% endAside %}
+
+{% Aside %} [Squoosh](https://squoosh.app)（一种图像优化 PWA）[现在，使用 COOP/COEP](https://github.com/GoogleChromeLabs/squoosh/pull/829/files#diff-316f969413f2d9a065fcc08c7a5589c088dd1e21deebadccfc5a4372ac5e0cbbR22-R23) 来访问 Wasm 线程（和共享数组缓冲区）以及 Android Chrome。{% endAside %}
+
+{% Aside 'caution' %}
+
+我们一直在探索大规模部署 `Cross-Origin-Resource-Policy` 的方法，因为跨源隔离要求所有子资源明确选择加入。我们提出了一种逆向思维：[新的 COEP“无凭据”模式](https://github.com/mikewest/credentiallessness/)，从而允许通过剥离所有凭据来加载没有 CORP 标头的资源。我们正在解决它的工作方式的细节问题，希望这会减轻您确保子资源发送 `Cross-Origin-Resource-Policy` 标头的负担。
+
+如果您想启用跨源隔离，但面临此问题的阻碍，那么我们建议您[注册来源试验](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)，同时等待可用的新模式。在新模式可用之前，我们不会终止来源试验。
+
+{% endAside %}
+
+### 利用 `self.crossOriginIsolated` 确定隔离是否成功
+
+当网页处于跨源隔离状态且所有资源和窗口在同一浏览上下文组中隔离时，`self.crossOriginIsolated` 属性会返回 `true`。您可以使用此 API 来确定是否已成功隔离浏览上下文组，并获得对 `performance.measureUserAgentSpecificMemory()` 等强大功能的访问权限。
+
+### 使用 Chrome DevTools 调试问题
+
+{% YouTube 'D5DLVo_TlEA' %}
+
+对于在屏幕上呈现的资源（例如图像），很容易检测 COEP 问题，因为请求会被阻止且页面会指示缺少图像。但是，对于不一定具有视觉影响的资源（例如脚本或样式），可能无法注意到 COEP 问题。对于这些问题，请使用“DevTools 网络”面板。如果 COEP 有问题，您会在**状态**栏看到 `(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)`。
+
+<figure>{% Img src="image/admin/iGwe4M1EgHzKb2Tvt5bl.jpg", alt="网络面板状态栏中的 COEP 问题。", width="800", height="444" %}</figure>
+
+随后，您可以单击此条目以查看更多详细信息。
+
+<figure>{% Img src="image/admin/1oTBjS9q8KGHWsWYGq1N.jpg", alt="单击“网络”面板中的网络资源后，COEP 问题的详细信息会显示在“标题”选项卡中。", width="800", height=" 241" %}</figure>
+
+您还可以通过**应用程序**面板确定 iframe 和弹出窗口的状态。转到左侧的“框架”部分并展开“顶部”即可查看详细资源结构。
+
+<span id="devtools-coep-iframe">您可以检查 iframe 的状态，例如“SharedArrayBuffer”的可用性等。</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/9titfaieIs0gwSKnkL3S.png", alt="Chrome DevTools iframe 检查器", width="800", height="480" %}</figure>
+
+<span id="devtools-coop">您还可以检查弹出窗口的状态，例如它是否已跨源隔离。</span>
+
+<figure>{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kKvPUo2ZODZu8byK7gTB.png", alt="Chrome DevTools 弹出窗口检查器", width="800", height="480" %}</figure>
+
+### 使用报告 API 观察问题
+
+[报告 API](/reporting-api) 是另一种可以检测各种问题的机制。您可以配置报告 API 来指示用户浏览器在 COEP 阻止加载资源或 COOP 隔离弹出窗口时发送报告。从 69 版本开始，Chrome 就支持将报告 API 用于各种用途，包括 COEP 和 COOP。
+
+{% Aside %}
+
+您是否已经将报告 API 与`Report-To` 标头一起使用？Chrome 正在转换为新版本的报告 API，它会将 `Report-To` 替换为 `Reporting-Endpoints`；请考虑迁移到新版本。要了解详细信息，请查看[迁移到报告 API v1](/reporting-api-migration)。
+
+{% endAside %}
+
+要了解如何配置报告 API 和设置服务器以接收报告，请转到[使用报告 API](/reporting-api/#using-the-reporting-api)。
+
+#### COEP 报告示例
+
+当跨源资源被阻止时，示例 [COEP 报告](https://html.spec.whatwg.org/multipage/origin.html#coep-report-type)内容如下所示：
+
+```json
+[{
+  "age": 25101,
+  "body": {
+    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
+    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
+    "destination": "image",
+    "disposition": "enforce",
+    "type": "corp"
+  },
+  "type": "coep",
+  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
+}]
+```
+
+{% Aside 'caution' %} `blocked-url` 仅向后兼容，并且[最终会将其删除](https://github.com/whatwg/html/pull/5848)。{% endAside %}
+
+#### COOP 报告示例
+
+当弹出窗口被隔离打开时，示例 [COOP 报告](https://html.spec.whatwg.org/multipage/origin.html#reporting)内容如下所示：
+
+```json
+[{
+  "age": 7,
+  "body": {
+    "disposition": "enforce",
+    "effectivePolicy": "same-origin",
+    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
+    "type": "navigation-from-response"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+当不同的浏览上下文组尝试相互访问时（仅在“仅报告”模式下），COOP 也会发送报告。 `postMessage()`时的报告如下所示：
+
+```json
+[{
+  "age": 51785,
+  "body": {
+    "columnNumber": 18,
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "lineNumber": 83,
+    "property": "postMessage",
+    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
+    "type": "access-from-coop-page-to-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+},
+{
+  "age": 51785,
+  "body": {
+    "disposition": "reporting",
+    "effectivePolicy": "same-origin",
+    "property": "postMessage",
+    "type": "access-to-coop-page-from-openee"
+  },
+  "type": "coop",
+  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
+  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
+}]
+```
+
+## 总结
+
+使用 COOP 和 COEP HTTP 标头的组合将网页选择加入特定跨源隔离状态。您将能够检查 `self.crossOriginIsolated`，从而确定网页是否处于跨源隔离状态。
+
+随着新功能可用于这种跨源隔离状态，我们将不断更新此帖子，并继续围绕 COOP 和 COEP 对 DevTools 进行改进。
+
+## 资源
+
+- [为何需要“跨源隔离”才能获得强大的功能](/why-coop-coep/)
+- [跨源隔离的启用指南](/cross-origin-isolation-guide/)
+- [Android 版 Chrome 88 和桌面版 Chrome 92 中的 SharedArrayBuffer 更新](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
+- [利用 `measureUserAgentSpecificMemory()` 监控网页的总内存使用量](/monitor-total-page-memory-usage/)
diff --git a/src/site/content/zh/blog/css-marker-pseudo-element/index.md b/src/site/content/zh/blog/css-marker-pseudo-element/index.md
new file mode 100644
index 00000000000..d5e5a8d40f8
--- /dev/null
+++ b/src/site/content/zh/blog/css-marker-pseudo-element/index.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: "使用 CSS ::marker 自定义项目符号"
+subhead: 现在，当使用 <ul> 或 <ol> 时，自定义数字或项目符号的颜色、大小或类型非常简单。
+authors:
+  - adamargyle
+  - loirooriol
+description: 现在，当使用 <ul> 或 <ol> 时，自定义数字或项目符号的颜色、大小或类型非常简单。
+tags:
+  - blog
+  - css
+date: 2020-09-02
+updated: 2020-09-02
+scheduled: 'true'
+hero: image/admin/GPGTyXJOh0cH0wa1PvXH.png
+thumbnail: image/admin/jbdOq0tGGzobMtaBsajn.png
+alt: 通过在项目符号和文本周围添加单独的方框来显示单个列表项的结构
+feedback:
+  - api
+---
+
+感谢 Bloomberg 赞助的 Igalia，我们终于可以把这些技巧加入样式列表中了。瞧！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOmqXrog0YoriZqqIzEZ.png", alt="", width="665", height="384" %} <figcaption> <a href="https://glitch.com/edit/#!/marker-fun-example">查看源代码</a> </figcaption></figure>
+
+凭借 [CSS `::marker`](https://www.w3.org/TR/css-lists-3/#marker-pseudo)，我们可以更改项目符号和数字的内容以及一些样式。
+
+## 浏览器兼容性
+
+桌面版和 Android 版 Firefox、桌面版 Safari 和 iOS Safari 支持 `::marker`（但仅支持 `color` 和 `font-*` 属性，请参阅[错误 204163](https://bugs.webkit.org/show_bug.cgi?id=204163)），基于 Chromium 的桌面版和 Android 浏览器也支持该元素。有关更新，请参阅 MDN 的[浏览器兼容性表](https://developer.mozilla.org/docs/Web/CSS/::marker#Browser_compatibility)。
+
+## 伪元素
+
+考虑以下基本 HTML 无序列表：
+
+```html
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
+  <li>Dolores quaerat illo totam porro</li>
+  <li>Quidem aliquid perferendis voluptates</li>
+  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
+  <li>Fuga</li>
+</ul>
+```
+
+这会产生以下预期中的渲染：
+
+<div class="glitch-embed-wrap" style="height: 480px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-plain-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+`<li>` 项开头的点是可选的！浏览器会绘制和创建生成的标记框。
+
+今天，我们高兴地讨论了 `::marker` 伪元素，它可以为浏览器创建的项目符号元素设置样式。
+
+{% Aside 'key-term' %} 伪元素表示在文档中，除文档树中的元素之外的元素。例如，您可以使用伪元素 `p::first-line` 来选中段落的第一行，即使该行文本不包含任何 HTML 元素。{% endAside %}
+
+### 创建标记
+
+`::marker` 伪元素标记框在每个列表项元素的内部自动生成，位于实际内容和 `::before` 伪元素之前。
+
+```css
+li::before {
+  content: "::before";
+  background: lightgray;
+  border-radius: 1ch;
+  padding-inline: 1ch;
+  margin-inline-end: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 340px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-before-example?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+通常，列表项是 `<li>` HTML 元素，但其他元素也可以通过使用 `display: list-item` 而成为列表项。
+
+```html
+<dl>
+  <dt>Lorem</dt>
+  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
+  <dd>Dolores quaerat illo totam porro</dd>
+
+  <dt>Ipsum</dt>
+  <dd>Quidem aliquid perferendis voluptates</dd>
+</dl>
+```
+
+```css/1
+dd {
+  display: list-item;
+  list-style-type: "🤯";
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-definition-list?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 设置标记样式
+
+在 `::marker` 之前，可以使用 `list-style-type` 和 `list-style-image` 来设置列表的样式，从而更改第 1 行 CSS 的列表项符号：
+
+```css
+li {
+  list-style-image: url(/right-arrow.svg);
+  /* OR */
+  list-style-type: '👉';
+  padding-inline-start: 1ch;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+这非常方便，但我们需要更多功能。比如说，如何更改颜色、大小、间距等？这就是 `::marker` 能够派上用场的地方。它支持以单独和全局的方式从 CSS 定位这些伪元素：
+
+```css
+li::marker {
+  color: hotpink;
+}
+
+li:first-child::marker {
+  font-size: 5rem;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-introduction?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'caution' %} 如果上面的列表没有粉红色的项目符号，则说明您的浏览器不支持 `::marker`。{% endAside %}
+
+`list-style-type` 属性提供了非常有限的样式类型。`::marker` 伪元素支持定位标记本身，并允许直接对其应用样式，从而实现更多的控制。
+
+也就是说，您不能在 `::marker` 上使用每个 CSS 属性。规范中明确规定了允许和不允许的属性列表。如果您尝试使用此伪元素执行一些有趣的操作，但发现不起作用，则可以参考下面的列表，其中介绍了允许和不允许的 CSS 属性：
+
+#### 允许的 CSS `::marker` 属性
+
+- `animation-*`
+- `transition-*`
+- `color`
+- `direction`
+- `font-*`
+- `content`
+- `unicode-bidi`
+- `white-space`
+
+`::marker` 的内容通过 `content`（而不是 `list-style-type`）进行更改。在下一个示例中，第一项使用 `list-style-type` 设置样式，第二项使用 `::marker` 设置样式。第一种情况下的属性适用于整个列表项，而不仅仅是标记，这意味着文本和标记一样具有动画效果。当使用 `::marker` 时，我们可以只定位标记框，而不是文本。
+
+另外，请注意不允许的 `background` 属性为何没有效果。
+
+<div class="switcher">{% Compare 'worse', 'List Styles' %} ```css li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; } ```</div>
+<p data-md-type="paragraph">{% CompareCaption %} 标记与列表项之间的混合结果 {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better', 'Marker Styles' %}</p>
+<pre data-md-type="block_code" data-md-language="css"><code class="language-css">li:nth-child(2)::marker {
+  content: '!';
+  font-size: 2rem;
+  background: hsl(200 20% 88%);
+  animation: color-change 3s ease-in-out infinite;
+}
+</code></pre>
+<p data-md-type="paragraph">{% CompareCaption %} 标记与列表项之间的焦点结果 {% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+<br>
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-style-vs-list-style-type?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+{% Aside 'gotchas' %} 在 Chromium 中，`white-space` 仅适用于内部定位标记。对于外部定位标记，样式调整器始终强制执行 `white-space: pre` 以保留尾随空间。{% endAside %}
+
+#### 更改标记的内容
+
+下面是设置标记样式的一些方法。
+
+**更改所有列表项**
+
+```css
+li {
+  list-style-type: "😍";
+}
+
+/* OR */
+
+li::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-all?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**仅更改一个列表项**
+
+```css
+li:last-child::marker {
+  content: "😍";
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-change-one?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**将列表项更改为 SVG**
+
+```css
+li::marker {
+  content: url(/heart.svg);
+  content: url(#heart);
+  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-inline-svg?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+**更改编号列表**`<ol>` 怎么样？默认情况下，有序列表项上的标记是数字，而不是项目符号。CSS 中将其称为[计数器](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)，这是一个非常强大的功能。它们甚至具有设置和重置开始/结束序号的属性，或者将序号改成罗马数字。我们可以设置这样的样式吗？当然可以，我们甚至可以使用标记内容值来构建自己的编号。
+
+```css
+li::marker {
+  content: counter(list-item) "› ";
+  color: hotpink;
+}
+```
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/marker-numbered-lists?path=style.css&amp;previewSize=100" alt="List Demo on Glitch" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 调试
+
+Chrome DevTools 已准备就绪，可帮助您检查、调试和修改应用到 `::marker` 伪元素的样式。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PYKVXEzycrMhQujXsNxQ.png", alt="DevTools 打开，显示来自用户代理和用户样式的样式", width="776", height="574", style="max-inline-size: 480px" %}</figure>
+
+### 未来的伪元素样式
+
+您可以从以下位置找到有关 ::marker 的更多信息：
+
+- [Smashing Magazine](https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/) 提供的 [CSS 列表、标记和计数器](https://www.smashingmagazine.com/)
+- 使用 [CSS-Tricks](https://css-tricks.com/) 提供的 [CSS 计数器和 CSS 网格计数](https://css-tricks.com/counting-css-counters-css-grid/)
+- 使用 [MDN](https://developer.mozilla.org/) 中的 [CSS 计数器](https://developer.mozilla.org/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+
+对于曾经难以设置样式的对象，现在能够找到一些办法真是太棒了。您可能希望为其他自动生成的元素设置样式，可能对 `<details>` 或搜索输入自动完成指示器感到失望，这些元素在浏览器中的实现方式不同。要分享您的愿望吗？您可以在 [https://webwewant.fyi](https://webwewant.fyi) 上创建需求。
diff --git a/src/site/content/zh/blog/css-masking/index.md b/src/site/content/zh/blog/css-masking/index.md
new file mode 100644
index 00000000000..c61b1633c71
--- /dev/null
+++ b/src/site/content/zh/blog/css-masking/index.md
@@ -0,0 +1,127 @@
+---
+title: 使用 CSS 的 mask-image 属性对图像应用不同的效果
+subhead: CSS 遮罩使您可以选择使用图像作为遮罩层。这意味着您可以使用图像、SVG 或渐变作为遮罩，无需图像编辑器即可创建有趣的效果。
+description: CSS 遮罩使您可以选择使用图像作为遮罩层。这意味着您可以使用图像、SVG 或渐变作为遮罩，无需图像编辑器即可创建有趣的效果。
+authors:
+  - rachelandrew
+date: 2020-09-14
+hero: image/admin/uNWkHLVFNcTDk09OplrA.jpg
+alt: 戴着口罩的泰迪熊。
+tags:
+  - blog
+  - css
+feedback:
+  - api
+---
+
+当您使用 `clip-path` 属性[剪切元素](/css-clipping)时，剪切区域将变得不可见。相反，如果您想让图像的一部分变得不透明或对其应用一些其他效果，则需要使用遮罩。这篇文章介绍了 [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) 属性的使用方法。它允许您指定用作遮罩层的图像，并提供了三个选项。您可以将图像文件、SVG 或渐变用作遮罩。
+
+## 浏览器兼容性
+
+大多数浏览器仅部分支持标准 CSS 遮罩属性。除了标准属性之外，您还需要使用 `-webkit-` 前缀以实现最好的浏览器兼容性。请参阅[《我可以使用 CSS 遮罩吗？》](https://caniuse.com/#feat=css-masks)获取完整的浏览器支持信息。
+
+虽然使用前缀属性的浏览器支持很好，但当使用遮罩使图像顶部的文本可见时，请注意如果遮罩不可用时会出现什么情况。这或许值得使用功能查询来检测对 `mask-image` 或 `-webkit-mask-image` 的支持，并在添加遮罩版本前提供可读的回退。
+
+```css
+@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
+  /* code that requires mask-image here. */
+}
+```
+
+## 用图像进行遮罩
+
+`mask-image` 属性的工作方式与 `background-image` 属性类似。使用 `url()` 的值传入图像。您的遮罩图像需要具有透明或半透明区域。
+
+完全透明的区域将导致该区域下方的图像部分不可见。但是，使用半透明的区域将允许一些原始图像显示出来。您可以在下面的 Glitch 中看到不同之处。第一张图是没有遮罩的气球的原始图像。第二个图像应用了遮罩，它在完全透明的背景上覆盖了一颗白色星星。第三张图片的背景上有一颗白色的星星，具有渐变透明度。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image?path=index.html&amp;previewSize=100" title="mask-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+在本例中，我还使用了值为 `cover` 的 `mask-size`属性。此属性的用法与 [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size) 相同。您可以使用关键字 `cover` 和 `contain`，或者使用任何有效的长度单位或百分比为背景指定大小。
+
+您也可以像重复背景图像一样重复蒙版，以便将小图像用作重复图案。
+
+## 使用 SVG 进行遮罩
+
+除了图像文件之外，您还可以使用 SVG 进行遮罩。有几种方法可以实现这一点。第一种方法是在 SVG 中包含一个 `<mask>` 属性，并在 `mask-image` 属性中引用该元素的 ID。
+
+```html
+<svg width="0" height="0" viewBox="0 0 400 300">
+  <defs>
+    <mask id="mask">
+      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
+      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
+      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
+    </mask>
+  </defs>
+</svg>
+
+<div class="container">
+    <img src="balloons.jpg" alt="Balloons">
+</div>
+```
+
+```css
+.container img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  -webkit-mask-image: url(#mask);
+  mask-image: url(#mask);
+}
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3HnPhISiVazDTwezxfcy.jpg", alt="使用 SVG 蒙版的示例", width="699", height="490" %}</figure>
+
+这种方法的优点是可以对任何 HTML 元素应用遮罩，而不仅限于图像。不幸的是，Firefox <br> 是唯一支持这种方法的浏览器。
+
+但是我们并没有损失，因为对于最常见的遮罩图像场景，我们可以将图像包含在 SVG 中。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-image-svg-image?path=README.md&amp;previewSize=100" title="mask-image-svg-image on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 渐变遮罩
+
+使用 CSS 渐变作为遮罩是实现遮罩区域的一种优雅方式，无需费心创建图像或 SVG。
+
+例如，用作遮罩的简单线性渐变可以确保图像的底部不会在标题下方太暗。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-linear-gradient?path=README.md&amp;previewSize=100" title="mask-linear-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+您可以使用任何受支持的渐变类型，并随心所欲地发挥创意。下一个示例使用径向渐变创建圆形遮罩以照亮字幕后面。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-radial-gradient?path=README.md&amp;previewSize=100" title="mask-radial-gradient on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+## 使用多个遮罩
+
+与背景图像一样，您可以指定多个遮罩来源，将它们组合起来以获得想要的效果。如果您想使用由 CSS 渐变生成的图案作为遮罩，这种方法将特别有用。这些通常会使用多个背景图像，因此可以轻松转换为遮罩。
+
+例如，我在[这篇文章](https://cssgradient.io/blog/gradient-patterns/)中发现了一个不错的棋盘格图案。使用背景图像的代码如下所示：
+
+```css
+background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%);
+background-size:20px 20px;
+background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+要将其或为背景图像设计的任何其他模式转换为遮罩，您需要将 `background-*` 属性替换为相关的 `mask` 属性，包括 `-webkit` 前缀的属性。
+
+```css
+-webkit-mask-image:
+  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
+  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
+  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
+-webkit-mask-size:20px 20px;
+  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+```
+
+通过将渐变图案应用于图像，可以产生一些非常好的效果。尝试重新混合 Glitch 并测试其他遮罩方式。
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/mask-checkers?path=README.md&amp;previewSize=100" title="mask-checkers on Glitch" allow="encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+除了剪切外，CSS 遮罩是一种无需使用图形处理程序即可为图像和其他 HTML 元素添加兴趣点的方法。
+
+*<span>照片：<a href="https://unsplash.com/@juliorionaldo">Julio Rionaldo</a>；来源：Unsplash</span>。*
diff --git a/src/site/content/zh/blog/css-web-vitals/index.md b/src/site/content/zh/blog/css-web-vitals/index.md
new file mode 100644
index 00000000000..bfbfa0c75e9
--- /dev/null
+++ b/src/site/content/zh/blog/css-web-vitals/index.md
@@ -0,0 +1,264 @@
+---
+title: 用于 Web Vitals 的 CSS
+subhead: 用于优化 Web Vitals 的 CSS 相关技术
+authors:
+  - katiehempenius
+  - una
+date: 2021-06-02
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg
+alt: 多色渐变
+description: 本文介绍用于优化 Web Vitals 的 CSS 相关技术。
+tags:
+  - blog
+  - performance
+  - css
+---
+
+您编写样式和构建布局的方式会对 [Core Web Vitals](/learn-core-web-vitals/) 产生重大影响。对于[累积布局偏移 (CLS)](/cls) 和[最大内容绘制 (LCP)](/lcp) 尤其如此。
+
+本文介绍用于优化 Web Vitals 的 CSS 相关技术。这些优化按页面的不同方面进行细分：布局、图像、字体、动画和加载。在此过程中，我们将探索改进[示例页面](https://codepen.io/una/pen/vYyLKvY)：
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/pgmpMOmweK7BVBsVkQ5g.png", alt="示例网站截图", width="800", height="646" %}
+
+## 布局
+
+### 将内容插入 DOM
+
+在周围的内容已经加载的前提下，如果将内容插入到页面，则会导致页面上的其他所有内容下移。即[布局偏移](/cls/#layout-shifts-in-detail)。
+
+[Cookie 通知](/cookie-notice-best-practices/)，尤其是放置在页面顶部的通知，是此问题的常见示例。加载时经常导致这种类型的布局偏移的其他页面元素包括广告和嵌入。
+
+#### 识别
+
+Lighthouse“避免大的布局偏移”审计会识别已经偏移的页面元素。对于此演示，结果如下所示：
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/jaHtgwzDXCjx3vAFOO33.png", alt="Lighthouse's 'Avoid large layout shifts' audit", width="800", height="500" %}
+
+这些发现中未列出 cookie 通知，因为 cookie 通知本身在加载时不会偏移。相反，它会导致页面上它下面的项目（即 `div.hero` 和 `article` ）偏移。有关识别和修复布局偏移的更多信息，请参阅[调试布局偏移](/debugging-layout-shifts)。
+
+{% Aside %}
+
+在“页面加载”事件未发生时，Lighthouse 只负责分析页面性能。Cookie 横幅、广告和其他小部件有时在页面加载后才会加载。这些布局偏移仍会影响用户——即使这些没有被 Lighthouse 标记。
+
+{% endAside %}
+
+#### 修复
+
+使用绝对位置或固定位置将 cookie 通知放在页面底部。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/YBYLT9jJ9AXrbsaRNVoa.png", alt="页面底部显示的 Cookie 通知", width="800", height="656" %}
+
+前：
+
+```css
+.banner {
+  position: sticky;
+  top: 0;
+}
+```
+
+后：
+
+```css
+.banner {
+  position: fixed;
+  bottom: 0;
+}
+```
+
+修复这种布局偏移的另一种方法是在屏幕顶部为 cookie 通知保留空间。这种方法同样有效。有关更多信息，请参阅[Cookie 通知最佳实践](/cookie-notice-best-practices/)。
+
+{% Aside %}
+
+cookie 通知是加载时触发布局偏移的多个页面元素中的一个。为了帮助我们更进一步了解这些页面元素，后续的演示步骤将不包含 cookie 通知。
+
+{% endAside %}
+
+## 图像
+
+### 图像和最大内容绘制 (LCP)
+
+图像通常是页面上最大的内容绘制 (LCP) 元素。可以作为[LCP 元素的其他页面元素](/lcp/#what-elements-are-considered)包括文本块和视频海报图像。LCP 元素加载的时间决定 LCP。
+
+请务必注意，页面的 LCP 元素可能会因页面加载而异，具体取决于页面首次显示时用户可见的内容。例如，在本演示中，cookie 通知的背景、首图和文章文本是一些潜在的 LCP 元素。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/bMoAoohyLOgTqV6B7lHr.png", alt="高亮显示不同场景下页面 LCP 元素的图。", width="800", height="498" %}
+
+在示例站点中，cookie 通知的背景图像实际上是一张大图。为了改进 LCP，您可以改为在 CSS 中绘制渐变，而不是加载图像来创建效果。
+
+#### 修复
+
+更改 `.banner` CSS 以使用 CSS 渐变而非图像：
+
+前：
+
+```css
+background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
+```
+
+后：
+
+```css
+background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
+```
+
+### 图像和布局偏移
+
+浏览器只能在图像加载后确定图像的大小。如果在页面呈现后加载图像，但没有为图像保留空间，则在图像出现时会发生布局偏移。在本演示中，首图图像在加载时导致布局偏移。
+
+{% Aside %}在图像加载速度较慢的情况下，图像导致布局偏移的现象更为明显。例如，连接速度较慢或加载文件特别大的图像时。 {% endAside %}
+
+#### 识别
+
+要识别没有明确 `width` 和 `height` 的图像，请使用 Lighthouse 的“图像元素具有明确的宽度和高度”审计。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wDGRVi7JaUOTjD9ODOk9.png", alt="Lighthouse 的'图像元素具有明确的宽度和高度'审计", width="800", height="274" %}
+
+在本例中，首图和文章图像都缺少 `width` 和 `height` 属性。
+
+#### 修复
+
+在这些图像上设置 `width` 和 `height` 属性以避免布局偏移。
+
+前：
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
+```
+
+后：
+
+```html
+<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
+<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
+```
+
+<figure>{% Video src="video/j2RDdG43oidUy6AL6LovThjeX9c2/fLUscMG0lGhKnNHef2py.mp4"%}<figcaption>现在图像加载时不会导致布局偏移。</figcaption></figure>
+
+{% Aside %}加载图像的另一种方法是使用 [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) 和 [`sizes`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) 属性同时结合指定 `width` 和 `height` 属性。这会带来额外的性能优势，允许您为不同的设备提供不同大小的图像。有关更多信息，请参阅[提供响应式图像](/serve-responsive-images/)。 {% endAside %}
+
+## 字体
+
+字体会延迟文本呈现并导致布局偏移。因此，快速交付字体非常重要。
+
+### 延迟文本呈现
+
+默认情况下，如果尚未加载关联的 Web 字体，浏览器将不会立即呈现文本元素。这样做是为了防止[“无样式文本闪烁”（FOUT）](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) 。在许多情况下，这会延迟[首次内容绘制 (FCP)](/fcp) 。在某些情况下，这会延迟最大内容绘制 (LCP)。
+
+{% Aside %}
+
+默认情况下，如果相关的 Web 字体尚未加载，基于 Chromium 的浏览器和 Firefox 浏览器将[阻止文本呈现长达 3 秒](https://developers.google.com/web/updates/2016/02/font-display)；Safari 将无限期地阻止文本呈现。当浏览器请求 Web 字体时，[阻止时间段](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#the_font_display_timeline)开始。如果在阻止时间段结束时字体仍未加载，浏览器将使用后备字体呈现文本，并在字体可用时交换 Web 字体。
+
+{% endAside %}
+
+### 布局偏移
+
+字体交换虽然非常适合快速向用户显示内容，但有可能导致布局偏移。当 Web 字体及其后备字体在页面上占用不同数量的空间时，就会发生这些布局偏移。使用类似比例的字体将最小化这些布局偏移的大小。
+
+<figure>{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/g0892nhvz3SnSaasaO1b.png", alt="显示由字体交换引起的布局偏移的图表", width="800", height="452" %}<figcaption>在此示例中，字体交换导致页面元素向上偏移五个像素。</figcaption></figure>
+
+#### 识别
+
+要查看特定页面上加载的字体，请打开 DevTools 中的 **Network** 选项卡并按 **Font** 筛选器。字体可以是大文件，因此只使用较少的字体通常会提高性能。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/Ts38bQtR6x0SDgufA9vz.png", alt="DevTools 中显示的字体截图", width="800", height="252" %}
+
+要查看请求字体所需的时间，请点击 **Timing** 选项卡。越早请求字体，就可以越早加载并使用字体。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/wfS7qVThKMkGA7SHd439.png", alt="DevTools 中'Timing'选项卡的屏幕截图", width="800", height="340" %}
+
+要查看字体的请求链，请点击 **Initiator** 选项卡。一般来说，请求链越短，可以越早请求字体。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/0tau1GQnZfj5vPhzwnIQ.png", alt="DevTools 中'Initiator'选项卡的屏幕截图", width="800", height="189" %}
+
+#### 修复
+
+此演示使用 Google Fonts API。Google Fonts 提供了通过 `<link>` 标签或 `@import` 语句加载字体的选项。`<link>`代码片段包括一个 `preconnect` 资源提示。这应该会比使用 `@import` 版本更快地交付样式表。
+
+在非常高的层次上，您可以将[资源提示](https://www.w3.org/TR/resource-hints/#resource-hints)视为向浏览器提示需要建立特定连接或下载特定资源的一种方式。因此，浏览器将优先考虑这些操作。使用资源提示时，请记住优先处理特定操作会从其他操作中夺走浏览器资源。因此，应慎重使用资源提示，而不是用于所有情况。有关详细信息，请参阅[及早建立网络连接以提高感知页面速度](/preconnect-and-dns-prefetch/)。
+
+从样式表中删除以下 `@import` 语句：
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
+```
+
+将以下 `<link>` 标签添加至文档的 `<head>` 中：
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
+```
+
+这些链接标签指示浏览器与 Google Fonts 使用的源建立早期连接，并加载包含 Montserrat 和 Roboto 字体声明的样式表。这些 `<link>` 标签应该尽可能早地放在 `<head>` 中。
+
+{% Aside %}
+
+要仅从 Google Fonts 加载字体的子集，请添加 [`?text=`](https://developers.google.com/fonts/docs/getting_started) API 参数。例如， `?text=ABC`仅加载呈现“ABC”所需的字符。这是减小字体文件大小的好方法。
+
+{% endAside %}
+
+## 动画
+
+动画影响 Web Vitals 的主要方式是它们何时引起布局偏移。您应该避免使用两种类型的动画：[触发布局的动画](/animations-guide/#triggers)和移动页面元素的“类动画”效果。 通常，使用 [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)、[`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) 和 [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter) 类的 CSS 属性可将这些动画替换为性能更高的等效动画。有关更多信息，请参阅[如何创建高性能 CSS 动画](/animations/)。
+
+### 识别
+
+Lighthouse“避免非合成动画”审计可能有助于识别不良动画。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/mXgypW9x3qgvmWDLbIZx.png", alt="Lighthouse 的'避免非合成动画'审计", width="512", height="132" %}
+
+{% Aside 'caution' %}
+
+Lighthouse“避免非合成动画”审计仅识别性能不佳的 *CSS 动画*；JavaScript 驱动的动画（例如，使用 [`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 为元素“制作动画”）对性能不利，但不会被此审计标记。
+
+{% endAside %}
+
+### 修复
+
+更改 `slideIn` 动画序列以使用 `transform: translateX()`，而不是转换 `margin-left` 属性。
+
+前：
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    margin-left: -100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+```
+
+后：
+
+```css
+.header {
+  animation: slideIn 1s 1 ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+## 关键 CSS
+
+样式表采用阻止方式呈现。这意味着浏览器遇到样式表时，它将停止下载其他资源，直到浏览器下载并解析了样式表。这可能会延迟 LCP。要提高性能，请考虑[删除未使用的 CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/)、[内联关键 CSS](/extract-critical-css/) 和[推迟非关键 CSS](/defer-non-critical-css/#optimize)。
+
+## 结论
+
+尽管仍有进一步改进的空间（例如，使用[图像压缩](/use-imagemin-to-compress-images/)来更快地传送图像），但这些更改已显着改善了该站点的 Web Vitals。如果这是一个真实站点，下一步将是[从真实用户那里收集性能数据，](/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data)以评估它是否[满足大多数用户的 Web Vitals 阈值](/vitals-measurement-getting-started/#data-interpretation)。有关 Web Vitals 的更多信息，请参阅[了解 Web Vitals](/learn-core-web-vitals/)。
diff --git a/src/site/content/zh/blog/defining-core-web-vitals-thresholds/index.md b/src/site/content/zh/blog/defining-core-web-vitals-thresholds/index.md
new file mode 100644
index 00000000000..bbd2503d781
--- /dev/null
+++ b/src/site/content/zh/blog/defining-core-web-vitals-thresholds/index.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: 定义核心 Web 指标阈值
+subhead: 核心 Web 指标阈值背后的研究和方法论
+authors:
+  - bmcquade
+description: 核心 Web 指标阈值背后的研究和方法论
+date: 2020-05-21
+updated: 2022-07-18
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: 核心 Web 指标阈值背后的研究和方法论
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+[核心 Web 指标](/vitals/#core-web-vitals)是一组实际指标，用于测量网络真实用户体验的重要方面。核心 Web 指标包括多项指标以及各项指标的目标阈值，可帮助开发者定性地了解他们的网站体验是"良好"、"需要改进"还是"欠佳"。这篇文章将解释核心 Web 指标阈值的一般选取方法，以及针对每个特定核心 Web 指标阈值的选取方法。
+
+## 复习：核心 Web 指标和阈值
+
+2020 年的核心 Web 指标为三大指标：Largest Contentful Paint 最大内容绘制 (LCP)、First Input Delay 首次输入延迟 (FID) 和 Cumulative Layout Shift 累积布局偏移 (CLS)。每项指标测量用户体验的不同方面：LCP 测量感知加载速度，并在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点；FID 测量响应度，并将用户首次尝试与页面交互的体验进行了量化；CLS 测量视觉稳定性，并对可见页面内容的意外布局偏移量进行了量化。
+
+每项核心 Web 指标都有一个相关联的阈值，这些阈值将性能分为"良好"、"需要改进"或"欠佳"：
+
+<style>
+  .cluster > img {
+    max-width: 30%;
+  }
+</style>
+<div class="cluster">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="最大内容绘制阈值建议", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="首次输入延迟阈值建议", width="400", height="350" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="累积布局偏移阈值建议", width="400", height="350" %}
+</div>
+
+<div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>良好</th>
+      <th>欠佳</th>
+      <th>百分位数</th>
+    </tr>
+    <tr>
+      <td>最大内容绘制</td>
+      <td>≤2500ms</td>
+      <td>&gt;4000ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>首次输入延迟</td>
+      <td>≤100ms</td>
+      <td>&gt;300ms</td>
+      <td>75</td>
+    </tr>
+    <tr>
+      <td>累积布局偏移</td>
+      <td>≤0.1</td>
+      <td>&gt;0.25</td>
+      <td>75</td>
+    </tr>
+</table>
+</div>
+<p data-md-type="paragraph">此外，为了对页面或网站的整体性能进行分类，我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说，如果一个网站有至少 75% 的页面浏览量达到"良好"阈值，则该网站在这项指标下就会被归类为性能"良好"。相反，如果有至少 25% 的页面浏览量达到"欠佳"阈值，则该网站会被归类为性能"欠佳"。因此，如果 LCP 的第 75 个百分位数为 2 秒，就会被归类为"良好"，而如果 LCP 的第 75 个百分位数为 5 秒，则会被归类为"欠佳"。</p>
+<h2 data-md-type="header" data-md-header-level="2">核心 Web 指标阈值的标准</h2>
+<p data-md-type="paragraph">在为核心 Web 指标建立阈值时，我们首先确定了每个阈值必须满足的标准。我在下方解释了我们在 Google 用于评估 2020 年核心 Web 指标阈值的标准。随后的部分将更详细地介绍我们是如何应用这些标准来为 2020 年的各项指标选取阈值的。在未来几年，我们预计会对标准和阈值进行改进和添加，从而进一步提高我们测量卓越的网络用户体验的能力。</p>
+<h3 data-md-type="header" data-md-header-level="3">高质量的用户体验</h3>
+<p data-md-type="paragraph">我们的主要目标是针对用户及他们的体验质量进行优化。鉴于此目标，我们要力图确保满足核心 Web 指标"良好"阈值的页面能够提供高质量的用户体验。</p>
+<p data-md-type="paragraph">为了确定与高质量用户体验相关联的阈值，我们将目光投向人类感知和 HCI 研究。虽然这项研究有时会使用单个固定阈值来进行概括，但我们发现底层研究中通常会用范围值来表示。例如，研究会描述用户在失去注意力之前的等待时间通常为 1 秒，而底层研究实际会用一个从数百毫秒到数秒不等的范围来表示。聚合和匿名 Chrome 指标数据进一步支持了感知阈值会因用户和上下文而异的事实，这表明用户在中止页面加载前等待网页显示内容的时间不是唯一的。恰恰相反，该数据显示出了平滑且连续的分布。如需更深入地了解人类感知阈值和相关的 HCI 研究，请参阅 <a href="https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html" data-md-type="link">Web 指标背后的科学</a>。</p>
+<p data-md-type="paragraph">如果针对某一指标有相关的用户体验研究，并且对文献中的数值范围有合理共识，那么我们会用这个范围作为输入来指导我们的阈值选取过程。在没有相关的用户体验研究的情况下，例如对于像累积布局偏移这样的新指标，我们会转而对满足不同指标候选阈值的真实世界页面进行评估，从而确定一个能带来良好用户体验的阈值。</p>
+<h3 data-md-type="header" data-md-header-level="3">可通过现有网络内容实现</h3>
+<p data-md-type="paragraph">此外，为了确保网站所有者能够成功地优化他们的网站并满足"良好"阈值，我们要求这些阈值对于网络上现有的内容是可以实现的。例如，虽然零毫秒是理想的 LCP "良好"阈值，并且可以带来即时加载体验，但由于网络和设备处理延迟，零毫秒的阈值实际上在大多数情况下都无法实现。因此，对于核心 Web 指标来说，零毫秒不是一个合理的 LCP "良好"阈值。</p>
+<p data-md-type="paragraph">在评估核心 Web 指标的候选"良好"阈值时，我们会根据 <a href="https://developer.chrome.com/docs/crux/" data-md-type="link">Chrome 用户体验报告</a> (CrUX) 中的数据验证这些阈值是否可以实现。为了确认一个阈值是可以实现的，我们要求目前至少有 10% 的<a href="/same-site-same-origin/#origin" data-md-type="link">域</a>满足"良好"阈值。此外，为了确保优化良好的网站不会因为实际数据的变化而被错误分类，我们还会验证优化良好的内容始终满足"良好"阈值。</p>
+<p data-md-type="paragraph">相反地，我们通过确定当前只有少数域未能达到的性能水平来建立"欠佳"阈值。除非有"欠佳"阈值定义的相关研究，否则在默认情况下，性能表现最差的 10-30% 的域将被归类为"欠佳"。</p>
+<h3 data-md-type="header" data-md-header-level="3">关于标准的最终总结</h3>
+<p data-md-type="paragraph">在评估候选阈值时，我们发现这些标准有时会相互冲突。例如，一个阈值始终可实现和该阈值始终确保良好的用户体验之间可能存在矛盾。此外，鉴于人类感知研究通常提供一个范围值，而用户行为指标又显示了行为的逐渐变化，我们发现通常没有唯一"正确"的指标阈值。因此，我们针对 2020 年核心 Web 指标的方案就是选择最符合上述标准的阈值，同时认识到没有一个完美的阈值，并且我们有时可能需要从多个合理的候选阈值中进行选择。我们不会想弄清"完美的阈值是多少？"相反地，我们专注于认清"哪一个候选阈值最符合我们的标准？"</p>
+<h2 data-md-type="header" data-md-header-level="2">百分位数的选择</h2>
+<p data-md-type="paragraph">如前所述，为了对页面或网站的整体性能进行分类，我们使用该页面或网站的所有访问量的第 75 个百分位数。我们选择第 75 个百分位数是基于两个标准。首先，该百分位数应确保对页面或网站的大多数访问都达到了目标性能水平。其次，所选百分位数的值不应受到异常值的过度影响。</p>
+<p data-md-type="paragraph">这些目标在某种程度上是相互矛盾的。为了满足第一个目标，通常最好选择一个更高的百分位数。但是，随着百分位数的增加，结果值受异常值影响的可能性也会增加。如果对网站的几次访问碰巧遇上了不稳定的网络连接，导致 LCP 样本过大，我们并不希望我们的网站分类被这些异常值样本而左右。例如，如果我们使用一个高百分位数（例如第 95 个百分位数）对一个有 100 次访问量的网站进行性能评估，那么只要有 5 个异常值样本，第 95 个百分位数的值就会受到异常值的影响。</p>
+<p data-md-type="paragraph">鉴于这些目标有些不一致，经过分析，我们得出的结论是第 75 个百分位数达到了合理的平衡点。通过采用第 75 个百分位数，我们知道大多数网站访问（4 次中有 3 次）都达到了目标性能水平或更高。此外，第 75 个百分位数值受异常值影响的可能性较小。再回到我们之前的示例，对于一个有 100 次访问量的网站，其中的 25 次访问都需要报告大量异常值样本，才会使第 75 个百分位数值受到异常值的影响。虽然 100 个样本中有 25 个是异常值的情况可能存在，但与第 95 个百分位数的情况相比，这种可能性要小得多。</p>
+<h2 data-md-type="header" data-md-header-level="2">最大内容绘制</h2>
+<h3 data-md-type="header" data-md-header-level="3">体验质量</h3>
+<p data-md-type="paragraph">我们通常认为用户在开始对一项任务失去注意力之前的等待时间为 1 秒。在仔细查验相关研究后，我们发现 1 秒是用来描述一个范围值的近似值，而这个范围值从数百毫秒到数秒不等。</p>
+<p data-md-type="paragraph">1 秒阈值的两个常见引用来源是<a href="https://dl.acm.org/doi/10.1145/108844.108874" data-md-type="link">卡德等人</a>和<a href="https://dl.acm.org/doi/10.1145/1476589.1476628" data-md-type="link">米勒</a>。卡德通过引用纽厄尔的<a href="https://dl.acm.org/doi/book/10.5555/86564" data-md-type="link">认知统一理论</a>，定义了 1 秒的"立即响应"阈值。纽厄尔将立即响应解释为"必须在<em data-md-type="emphasis">大约一秒钟</em>内对某些刺激作出的响应（即大约从 0.3 秒到 3 秒）。"纽厄尔在此之前就"认知的实时约束"展开过讨论，其中指出"与环境交互引发的认知计算是以秒计的"，范围从大约 0.5 秒到 2-3 秒。1 秒阈值的另一个常见引用来源是米勒，他指出"如果响应延迟超过两秒（可能超出时长为一秒左右），那么人类可以通过且将会通过机器通信执行的任务将发生严重的特征改变。"</p>
+<p data-md-type="paragraph">米勒和卡德的研究将用户在失去注意力之前的等待时间描述为一个从大约 0.3 秒到 3 秒的范围，也就表明我们的 LCP "良好"阈值应该在这个范围内。此外，考虑到目前的首次内容绘制"良好"阈值为 1 秒，并且最大内容绘制通常发生在首次内容绘制之后，我们可以进一步将 LCP 候选阈值的范围限制在 1 秒到 3 秒之间。为了在这个范围内选取最符合我们标准的阈值，我们研究了这些候选阈值的可实现性，如下所示。</p>
+<h3 data-md-type="header" data-md-header-level="3">可实现性</h3>
+<p data-md-type="paragraph">利用 CrUX 的数据，我们可以确定网络上满足 LCP 候选"良好"阈值的域所占的百分比。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">被归类为"良好"（LCP 候选阈值）的 CrUX 域所占的百分比</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>1秒</th>
+      <th>1.5 秒</th>
+      <th>2 秒</th>
+      <th>2.5 秒</th>
+      <th>3 秒</th>
+    </tr>
+    <tr>
+      <td><strong>手机端</strong></td>
+      <td>3.5%</td>
+      <td>13%</td>
+      <td>27%</td>
+      <td>42%</td>
+      <td>55%</td>
+    </tr>
+    <tr>
+      <td><strong>桌面端</strong></td>
+      <td>6.9%</td>
+      <td>19%</td>
+      <td>36%</td>
+      <td>51%</td>
+      <td>64%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">虽然只有不到 10% 的域满足 1 秒阈值，但 1.5 秒到 3 秒之间的其他所有阈值也都满足我们的要求，即至少有 10% 的域满足"良好"阈值，因此这些阈值仍然是有效的候选值。</p>
+<p data-md-type="paragraph">此外，为了确保所选取的阈值对于优化良好的网站始终都可实现，我们分析了全网表现最出色的网站的 LCP 性能，从而确定哪些阈值对于这些网站是始终都可实现的。具体来说，我们的目标是确定一个对于表现最出色的网站来说，始终可以在第 75 个百分位数实现的阈值。我们发现，1.5 秒和 2 秒的阈值并不是始终都可以实现的，而 2.5 秒的阈值是始终可以实现的。</p>
+<p data-md-type="paragraph">为了确定 LCP 的"欠佳"阈值，我们利用 CrUX 数据来确定大多数域能够满足的阈值：</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">被归类为"欠佳"（LCP 候选阈值）的 CrUX 域所占的百分比</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>3 秒</th>
+      <th>3.5 秒</th>
+      <th>4 秒</th>
+      <th>4.5 秒</th>
+      <th>5秒</th>
+    </tr>
+    <tr>
+      <td><strong>手机端</strong></td>
+      <td>45%</td>
+      <td>35%</td>
+      <td>26%</td>
+      <td>20%</td>
+      <td>15%</td>
+    </tr>
+    <tr>
+      <td><strong>桌面端</strong></td>
+      <td>36%</td>
+      <td>26%</td>
+      <td>19%</td>
+      <td>14%</td>
+      <td>10%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">在阈值为 4 秒的情况下，大约 26% 的手机端域和 21% 的桌面端域将被归类为欠佳。这些百分比落在我们 10-30% 的目标范围内，因此，我们认为 4 秒是可接受的"欠佳"阈值。</p>
+<p data-md-type="paragraph">因此，我们得出结论，对于最大内容绘制来说，2.5 秒是一个合理的"良好"阈值，4 秒是一个合理的"欠佳"阈值。</p>
+<h2 data-md-type="header" data-md-header-level="2">首次输入延迟</h2>
+<h3 data-md-type="header" data-md-header-level="3">体验质量</h3>
+<p data-md-type="paragraph">研究得出的十分一致的结论是，我们的感知会认为长达 100 毫秒左右的视觉反馈延迟是由相关来源（例如用户输入）引起的。这表明 100 毫秒可能适合作为首次输入延迟"良好"阈值的最低标准：如果处理输入的延迟超过 100 毫秒，那么其他处理和渲染步骤就没有机会及时完成。</p>
+<p data-md-type="paragraph">雅各布·尼尔森 (Jakob Nielsen) 撰写的<a href="https://www.nngroup.com/articles/response-times-3-important-limits/" data-md-type="link">响应时间：3 个重要界限</a>常常被引用，文章中将 0.1 秒定义为用户感觉到系统立即做出反应的界限。尼尔森引用了米勒和卡德，而后者引用了米肖特于 1962 年所著的<a href="https://psycnet.apa.org/record/1964-05029-000" data-md-type="link">《因果关系感知》</a> 。在米肖特的研究中，实验参与者看到"屏幕上有两个物体。物体 A 向物体 B 移动，然后在与 B 接触的那一刻停止，之后 B 开始远离 A。" 米肖特会改变物体 A 停止与物体 B 开始移动之间的时间间隔。米肖特发现，对于约 100 毫秒以内的延迟，参与者会认为是物体 A 导致了物体 B 的运动。对于约 100 毫秒到 200 毫秒的延迟，因果关系的感知是混合的，而对于超过 200 毫秒的延迟，物体 B 的运动不再被视为是由物体 A 引起的。</p>
+<p data-md-type="paragraph">类似地，米勒将"对控制激活的响应"的响应阈值定义为"通常由按键、开关或其他控制部件的移动给出的操作指示，表明对象已经被物理激活。这种响应应该被......感知为操作者引起的机械动作的一部分。时间延迟：不超过0.1秒"，以及接下来的"按下按键和视觉反馈之间的延迟应不超过 0.1 秒至 0.2 秒"。</p>
+<p data-md-type="paragraph">最近，在<a href="https://dl.acm.org/doi/10.1145/2611387" data-md-type="link">实现时间性的完美虚拟按钮</a>一文中，卡雷索亚 (Kaaresoja) 等人研究了在不同的延迟下，触摸触屏上的虚拟按钮和随后显示按钮被触摸的视觉反馈之间的同时性感知。当按下按钮和视觉反馈之间的延迟为 85 毫秒或更短时，参与者在 75% 的情况下报告视觉反馈是在按下按钮的同时出现的。此外，对于 100 毫秒或更短的延迟，参与者报告的按下按钮的感知质量始终很高，而感知质量在 100 毫秒到 150 毫秒的延迟下有所下降，并且在 300 毫秒的延迟下达到非常低的水平。</p>
+<p data-md-type="paragraph">鉴于上述研究，我们得出结论，100 毫秒左右的延迟值范围是 Web 指标合适的首次输入延迟阈值。此外，鉴于用户在 300 毫秒或更长的延迟下报告了低质量级别，则 300 毫秒为合理的"欠佳"阈值。</p>
+<h3 data-md-type="header" data-md-header-level="3">可实现性</h3>
+<p data-md-type="paragraph">利用 CrUX 的数据，我们确定网络上的大多数域在第 75 个百分位数满足 FID 的 100 毫秒"良好"阈值：</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">满足 FID 100 毫秒阈值并被归类为"良好"的 CrUX 域所占的百分比</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th></th>
+      <th>100ms</th>
+    </tr>
+    <tr>
+      <td><strong>手机端</strong></td>
+      <td>78%</td>
+    </tr>
+    <tr>
+      <td><strong>桌面端</strong></td>
+      <td>&gt;99%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">此外，我们观察到全网最出色的网站始终能够在第 75 个百分位数上（并且通常在第 95 个百分位数上）满足此阈值。</p>
+<p data-md-type="paragraph">鉴于上述情况，我们得出结论，100 毫秒是合理的 FID "良好"阈值。</p>
+<h2 data-md-type="header" data-md-header-level="2">累积布局偏移</h2>
+<h3 data-md-type="header" data-md-header-level="3">体验质量</h3>
+<p data-md-type="paragraph">累积布局偏移 (CLS) 是一项新指标，用于测量页面可见内容的偏移量。鉴于 CLS 是一项全新指标，我们不知道能够直接为该指标的阈值提供参考的研究。因此，为了确定一个符合用户期望的阈值，我们对具有不同布局偏移量的真实世界页面进行了评估，进而确定在对享受页面内容造成严重干扰之前，用户可接受的最大偏移量。在我们的内部测试中，我们发现 0.15 及以上的偏移水平始终被认为具有干扰性，而 0.1 及以下的偏移水平虽然可以被注意到，但不具有过度干扰性。因此，虽然零布局偏移是理想情况，但我们得出的结论是，0.1 及以下的值是 CLS 的候选"良好" 阈值。</p>
+<h3 data-md-type="header" data-md-header-level="3">可实现性</h3>
+<p data-md-type="paragraph">根据 CrUX 数据，我们可以看到近 50% 的域的 CLS 为 0.05 或更低。</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">被归类为"良好"（CLS 候选阈值）的 CrUX 域所占的百分比</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.05</th>
+      <th>0.1</th>
+      <th>0.15</th>
+    </tr>
+    <tr>
+      <td><strong>手机端</strong></td>
+      <td>49%</td>
+      <td>60%</td>
+      <td>69%</td>
+    </tr>
+    <tr>
+      <td><strong>桌面端</strong></td>
+      <td>42%</td>
+      <td>59%</td>
+      <td>69%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">虽然 CrUX 数据表明 0.05 可能是一个合理的 CLS "良好"阈值，但我们认识到，目前在某些用例中还难以避免干扰性的布局偏移。例如，对于如社交媒体嵌入这样的第三方嵌入内容，嵌入内容的高度有时在完成加载之前是未知的，这就可能导致布局偏移大于 0.05。因此，我们的结论是，虽然许多域都满足 0.05 的阈值，但将 CLS 阈值定为略微宽松一点的 0.1 能够在体验质量和可实现性之间取得更好的平衡。我们希望网络生态系统在未来能够确定一个针对由第三方嵌入引起的布局偏移的解决方案，这将使我们能够在核心 Web 指标的未来迭代中采用 0.05 或 0 这两个更为严格的 CLS "良好"阈值。</p>
+<p data-md-type="paragraph">此外，为了决定 CLS 的"欠佳"阈值，我们利用 CrUX 数据来确定大多数域能够满足的阈值：</p>
+<p data-md-type="paragraph"><strong data-md-type="double_emphasis">被归类为"欠佳"（CLS 候选阈值）的 CrUX 域所占的百分比</strong></p>
+<div data-md-type="block_html"><div>
+  <table>
+    <tr>
+      <th> </th>
+      <th>0.15</th>
+      <th>0.2</th>
+      <th>0.25</th>
+      <th>0.3</th>
+    </tr>
+    <tr>
+      <td><strong>手机端</strong></td>
+      <td>31%</td>
+      <td>25%</td>
+      <td>20%</td>
+      <td>18%</td>
+    </tr>
+    <tr>
+      <td><strong>桌面端</strong></td>
+      <td>31%</td>
+      <td>23%</td>
+      <td>18%</td>
+      <td>16%</td>
+    </tr>
+  </table>
+</div></div>
+<p data-md-type="paragraph">在阈值为 0.25 的情况下，大约 20% 的手机端域和 18% 的桌面端域将被归类为欠佳。这些百分比落在我们 10-30% 的目标范围内，因此我们得出结论，0.25 是可接受的"欠佳"阈值。</p>
diff --git a/src/site/content/zh/blog/drag-and-drop/index.md b/src/site/content/zh/blog/drag-and-drop/index.md
new file mode 100644
index 00000000000..d6eeff5ae9c
--- /dev/null
+++ b/src/site/content/zh/blog/drag-and-drop/index.md
@@ -0,0 +1,259 @@
+---
+title: 使用 HTML5 拖放 API
+authors:
+  - ericbidelman
+  - rachelandrew
+date: 2010-09-30
+updated: 2021-08-30
+description: |-
+  HTML5 拖放 (DnD) API 意味着页面上的几乎任何元素都可以变为可拖动。在本文中，我们将介绍
+  拖放的基础知识。
+tags:
+  - blog
+  - html
+  - javascript
+  - file-system
+---
+
+HTML5 拖放 (DnD) API 意味着页面上的几乎任何元素都可以变为可拖动。在本文中，我们将介绍拖放的基础知识。
+
+## 创建可拖动的内容
+
+值得注意的是，在大多数浏览器中，文本选择、图像和链接是默认可拖动的。例如，如果拖动[谷歌搜索](https://google.com)上的谷歌标志，您将看到重影图像。随后可以将该图像拖放到地址栏、 `<input type="file" />` 元素，甚至桌面上。要使其他类型的内容可拖动，您需要使用 HTML5 DnD API。
+
+要使对象可拖动，请对该元素设置 `draggable=true`。几乎任何元素都可以支持拖动，包括图像、文件、链接、文件或页面上的任何标记。
+
+在我们的示例中，我们将创建一个界面来重新排列一些列，它们已通过 CSS Grid 进行布局。这些列的基本标记如下所示，每个列的 `draggable` 属性均设置为 `true` 。
+
+```html
+<div class="container">
+  <div draggable="true" class="box">A</div>
+  <div draggable="true" class="box">B</div>
+  <div draggable="true" class="box">C</div>
+</div>
+```
+
+以下是我的容器和 box 元素的 CSS。请注意，唯一与 DnD 功能相关的 CSS 是 [`cursor: move`](https://developer.mozilla.org/docs/Web/CSS/cursor) 属性。其余代码仅控制容器和 box 元素的布局和样式。
+
+```css/11
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.box {
+  border: 3px solid #666;
+  background-color: #ddd;
+  border-radius: .5em;
+  padding: 10px;
+  cursor: move;
+}
+```
+
+此时，您会发现您可以拖动项目，但不会发生任何其他行为。要添加 DnD 功能，我们需要使用 JavaScript API。
+
+## 监听拖动事件
+
+可以附加许多不同的事件，以监视整个拖放过程。
+
+- [`dragstart`](https://developer.mozilla.org/docs/Web/API/Document/dragstart_event)
+- [`drag`](https://developer.mozilla.org/docs/Web/API/Document/drag_event)
+- [`dragenter`](https://developer.mozilla.org/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](https://developer.mozilla.org/docs/Web/API/Document/dragleave_event)
+- [`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)
+- [`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)
+- [`dragend`](https://developer.mozilla.org/docs/Web/API/Document/dragend_event)
+
+要处理 DnD 流，您需要某种源元素（拖动的起点）、数据有效负载（您尝试放置的内容）和目标（捕捉放置的区域）。源元素可以是图像、列表、链接、文件对象、HTML 块等。目标是接受用户尝试放置的数据的放置区（或一组放置区）。请记住，并非所有元素都可以是目标，例如图像不能是目标。
+
+## 开始和结束拖放序列
+
+对内容定义 `draggable="true"` 属性后，附加一个 `dragstart` 事件处理程序针对每个列启动 DnD 序列。
+
+此代码将在用户开始拖动时将列的不透明度设置为 40%，然后在拖动事件结束时将其恢复为 100%。
+
+```js
+function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragend', handleDragEnd);
+  });
+```
+
+结果可以在下面的 Glitch 演示中看到。拖动一个项目，它会变得不透明。由于 `dragstart` 事件的目标是源元素，因此将 `this.style.opacity` 设置为 40% 会为用户提供视觉反馈，即当前选择的元素正在移动。放置项目后，虽然尚未编写放置功能，但源元素仍恢复为 100% 不透明度。
+
+{% Glitch { id: 'simple-drag-and-drop-1', path: 'style.css' } %}
+
+## 使用 `dragenter` 、`dragover` 和 `dragleave` 添加额外的视觉提示
+
+为了帮助用户了解如何与您的界面交互，请使用 `dragenter` 、`dragover` 和`dragleave` 事件处理程序。在以下示例中，各个列除了可拖动，还是放置目标。为了帮助用户了解这一点，当用户拖动项目经过某个列时，该列的边框将变为虚线。例如，可以在 CSS 中创建一个 `over` 类来表示作为放置目标的元素：
+
+```css
+.box.over {
+  border: 3px dotted #666;
+}
+```
+
+然后，在 JavaScript 中设置事件处理程序，当拖动经过列时添加 `over` 类，在离开时将其删除。在 `dragend` 处理程序中，我们也要确保在拖动结束时删除该类。
+
+```js/9-11,14-28,34-36
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  function handleDragStart(e) {
+    this.style.opacity = '0.4';
+  }
+
+  function handleDragEnd(e) {
+    this.style.opacity = '1';
+
+    items.forEach(function (item) {
+      item.classList.remove('over');
+    });
+  }
+
+  function handleDragOver(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    return false;
+  }
+
+  function handleDragEnter(e) {
+    this.classList.add('over');
+  }
+
+  function handleDragLeave(e) {
+    this.classList.remove('over');
+  }
+
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+});
+```
+
+{% Glitch { id: 'simple-drag-drop2', path: 'dnd.js' } %}
+
+这段代码中有几点需要提一下：
+
+- 在拖动链接之类的元素时，需要阻止浏览器的默认行为，即导航到该链接。为此，在 `dragover` 事件中调用 `e.preventDefault()`。另一个好的做法是在同一处理程序中返回 `false`。
+- 使用 `dragenter` 事件处理程序切换 `over` 类，而不要使用 `dragover`。如果使用 `dragover`，CSS 类会被多次切换，因为事件 `dragover` 会在列悬停时不断触发。最终，这将导致浏览器的渲染器执行大量不必要的工作。最好始终将重绘保持在最低限度。如果因为某些原因需要使用 `dragover` 事件，请考虑[限制或去除事件监听器](https://css-tricks.com/debouncing-throttling-explained-examples/)。
+
+## 完成放置
+
+要处理实际放置，请为 `drop` 事件添加一个事件监听器。在 `drop` 处理程序中，您需要阻止浏览器的默认放置行为，这通常是某种恼人的重定向。可以调用 `e.stopPropagation()` 来防止事件触发 DOM。
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // stops the browser from redirecting.
+  return false;
+}
+```
+
+确保在其他处理程序中注册新的处理程序：
+
+```js/7-7
+  let items = document.querySelectorAll('.container .box');
+  items.forEach(function(item) {
+    item.addEventListener('dragstart', handleDragStart);
+    item.addEventListener('dragover', handleDragOver);
+    item.addEventListener('dragenter', handleDragEnter);
+    item.addEventListener('dragleave', handleDragLeave);
+    item.addEventListener('dragend', handleDragEnd);
+    item.addEventListener('drop', handleDrop);
+  });
+```
+
+如果此时运行代码，项目将不会放置到新位置。要实现这一点，需要使用 [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer) 对象。
+
+`dataTransfer` 属性是所有 DnD 奇迹发生的地方。它保存拖动操作中发送的数据片段。`dataTransfer` 在 `dragstart` 事件中设置，并在 drop 事件中被读取/处理。调用 `e.dataTransfer.setData(mimeType, dataPayload)` 可设置对象的 MIME 类型和数据有效负载。
+
+在以下示例中，我们将允许用户重新排列各列的顺序。为此，首先您需要在拖动开始时存储源元素的 HTML：
+
+  <figure>
+    <video controls autoplay loop muted>
+      <source src="https://storage.googleapis.com/web-dev-assets/drag-and-drop/webdev-dnd.mp4" type="video/mp4">
+    </source></video>
+  </figure>
+
+```js/3-6
+function handleDragStart(e) {
+  this.style.opacity = '0.4';
+
+  dragSrcEl = this;
+
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+```
+
+在 `drop` 事件中处理列放置，将源列的 HTML 设置为放置的目标列的 HTML，先检查用户拖放的目标列是否与源列相同。
+
+```js/5-8
+function handleDrop(e) {
+  e.stopPropagation();
+
+  if (dragSrcEl !== this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+
+  return false;
+}
+```
+
+您可以在以下演示中看到结果。拖动 A 列并在 B 列上方释放，注意它们如何改变位置：
+
+{% Glitch { id: 'simple-drag-drop', path: 'dnd.js' } %}
+
+## 更多拖动属性
+
+`dataTransfer` 对象公开了用于在拖动过程中向用户提供视觉反馈的属性。这些属性还可用于控制每个放置目标如何响应特定数据类型。
+
+- [`dataTransfer.effectAllowed`](https://developer.mozilla.org/docs/Web/API/DataTransfer/effectAllowed) 限制用户可以对元素执行的“拖动类型”。它在拖放处理模型中用于在 `dragenter` 和 `dragover` 事件期间初始化 `dropEffect`。该属性可以设置为以下值：`none`、`copy`、`copyLink`、`copyMove`、`link`、`linkMove`、`move`、`all` 和 `uninitialized`。
+- [`dataTransfer.dropEffect`](https://developer.mozilla.org/docs/Web/API/DataTransfer/dropEffect) 控制在 `dragenter` 和 `dragover` 事件期间为用户提供的反馈。当用户在目标元素上悬停时，浏览器的光标将指示将要进行的操作类型（例如复制、移动等）。效果可以是以下值之一：`none`、`copy`、`link`、`move`。
+- [`e.dataTransfer.setDragImage(imgElement, x, y)`](https://developer.mozilla.org/docs/Web/API/DataTransfer/setDragImage) 表示不使用浏览器的默认“重影图像”反馈，而是可以选择设置拖动图标。
+
+## 通过拖放上传文件
+
+以下简单示例将一列用作拖动源和拖动目标。当用户被要求重新排列项目时，可能会在 UI 中看到这种情况。在某些情况下，拖动目标和拖动源可能不同，例如在一个界面中，用户需要选择一个图像作为产品的主图像，方法是将所选图像拖动到目标上。
+
+拖放经常用于让用户将项目从桌面拖动到应用程序中。主要区别在于 `drop` 处理程序。不使用 `dataTransfer.getData()` 访问文件，文件的数据将包含在 `dataTransfer.files` 属性中：
+
+```js
+function handleDrop(e) {
+  e.stopPropagation(); // Stops some browsers from redirecting.
+  e.preventDefault();
+
+  var files = e.dataTransfer.files;
+  for (var i = 0, f; f = files[i]; i++) {
+    // Read the File objects in this FileList.
+  }
+}
+```
+
+您可以在[自定义拖放](/read-files/#select-dnd)中找到更多相关信息。
+
+## 更多资源
+
+- [拖放规范](https://html.spec.whatwg.org/multipage/dnd.html#dnd)
+- [MDN HTML 拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)
+- [如何使用 Vanilla JavaScript 制作拖放文件上传器](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)
+- [使用 HTML 拖放 API 创建停车游戏](https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/)
+- [如何在 React 中使用 HTML 拖放 API](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/)
diff --git a/src/site/content/zh/blog/evolving-cls/index.md b/src/site/content/zh/blog/evolving-cls/index.md
new file mode 100644
index 00000000000..2cbe4013af8
--- /dev/null
+++ b/src/site/content/zh/blog/evolving-cls/index.md
@@ -0,0 +1,87 @@
+---
+title: 不断改进 CLS 指标
+subhead: 改进 CLS 指标，使其对长期存在的页面更加公平的计划。
+description: 改进 CLS 指标，使其对长期存在的页面更加公平的计划。
+authors:
+  - anniesullie
+  - hbsong
+date: 2021-04-07
+hero: image/admin/JSBg0yF1fatrTDQSKiTW.webp
+alt: 用于测量布局偏移的示例窗口方法。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% Aside %} **2021 年 6 月 2 日：**本文中描述的 CLS 更新现可在 Chrome 的 web 工具表面上使用。有关详细信息，请参阅[《Web 工具中不断发展的累积布局偏移》](/cls-web-tooling/)一文。 {% endAside %}
+
+我们（Chrome Speed Metrics 团队）最近概述了我们对[使 CLS 指标对长时间打开的页面更加公平选项](/better-layout-shift-metric/)的初步研究。我们收到了很多非常有用的反馈，在完成大规模分析后，最终确定了计划对指标进行的更改：**1 秒间隔的最大会话窗口，最大值为 5 秒**。
+
+请继续阅读以了解详细信息！
+
+## 我们如何评估的这些选项？
+
+我们审查并考虑了从开发者社区收到的所有反馈。
+
+我们还在 Chrome 中实现了[顶级选项](/better-layout-shift-metric/#best-strategies)，并对数百万个网页的指标进行了大规模分析。我们检查了每个选项改进了哪些类型的网站，以及这些选项的比较方式，特别是查看了不同选项得分不同的网站。总的来说，我们发现：
+
+- **所有**选项都降低了在页面上花费的时间与布局偏移分数之间的相关性。
+- **没有**一个选项会导致任何页面的得分更差。因此，无需担心此更改会降低您网站的分数。
+
+## 决策点
+
+### 为什么选会话窗口？
+
+在[之前的帖子](/better-layout-shift-metric/)中，我们介绍了[几种不同的窗口策略](/better-layout-shift-metric/#windowing-strategies)，用来将布局偏移组合在一起，同时确保分数不会无限增长。我们从开发人员那里收到的反馈压倒性地支持会话窗口策略，因为它可以最直观地将布局偏移组合到一起。
+
+要审阅会话窗口，以下是一个示例：
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>会话窗口示例。</figcaption></figure>
+
+在上面的示例中，在用户查看页面时，许多布局会随着时间的推移而变化。每个都由一个蓝条表示。您会注意到上面的蓝条具有不同的高度；这些代表每一个布局偏移的[分数](/cls/#layout-shift-score)。会话窗口从第一个布局偏移开始并继续扩展，直到出现没有布局偏移的间隙。当下一次布局偏移发生时，将启动一个新的会话窗口。由于存在三个没有布局偏移的间隙，因此示例中共有三个会话窗口。与 CLS 的当前定义类似，将每次偏移的分数相加，因此每个窗口的分数是其各个布局偏移的总和。
+
+根据[最初的研究](/better-layout-shift-metric/#best-strategies)，我们在会话窗口之间选择了 1 秒的间隔，这个值在我们的大规模分析中效果很好。所以上例中显示的“会话间隔”是 1 秒。
+
+### 为什么选最大会话窗口？
+
+在最初的研究中，我们将[总结策略](/better-layout-shift-metric/#summarization)缩小到两个选项：
+
+- 所有会话窗口的**平均**分数，用于非常大的会话窗口（无上限的窗口，它们之间有 5 秒的间隔）。
+- 所有会话窗口的**最大**分数，用于较小的会话窗口（上限为 5 秒，它们之间有 1 秒的间隔）。
+
+经过初步研究，我们将每个指标添加到 Chrome 中，以便对数百万个 URL 进行大规模分析。在大规模的分析中，我们发现了很多 URL 存在下列布局偏移模式：
+
+{% Img src="image/MZfwZ8oVW8U6tzo5CXffcER0jR83/bW3lHZmss3cqGayZsq4P.png", alt="拉低平均值的小布局偏移示例", width="800", height="550" %}
+
+在右下角，您可以看到会话窗口 2 中只有一个微小的布局偏移，因此得分非常低。这意味着平均分数非常低。但是，如果开发人员修复了那个微小的布局偏移会怎么样？然后只在会话窗口 1 上计算分数，这意味着页面的分数*几乎翻了一倍*。对于开发人员来说，如果改进他们的布局偏移却发现分数变得更糟，那真的会令人困惑和沮丧。并且移除这个小的布局偏移对于用户体验来说显然稍微好一些，所以它不应该使分数变差。
+
+由于平均值的这个问题，我们决定继续使用较小的、有上限的、最大的窗口。因此，在上面的示例中，会话窗口 2 将被忽略，并且只会报告会话窗口 1 中布局偏移的总和。
+
+### 为什么是 5 秒？
+
+我们评估了多个窗口大小并发现了两件事：
+
+- 对于短窗口，较慢的页面加载和较慢的用户交互响应可能会将布局偏移细分为多个窗口并提高分数。我们想让窗口保持足够大，避免它为减速提供分数奖励！
+- 有一些页面具有连续的小布局偏移流。例如，体育比分页面随着每次比分更新而移动一点。这些偏移很烦人，但它们不会随着时间的推移而变得更烦人。因此，我们希望确保窗口为这些类型的布局偏移设置上限。
+
+考虑到这两点，在比较了许多现实世界网页上的各种窗口大小，我们得出结论，5 秒将是对窗口大小的一个很好的限制。
+
+## 它如何影响页面的 CLS 分数？
+
+由于此更新限制了页面的 CLS，所以不会有页面会因这个更改而**获得更差的分数**。
+
+根据我们的分析， **55% 的来源在第 75 个百分位处根本看不到 CLS 的变化**。这是因为他们的页面当前没有任何布局偏移，或者他们所做的偏移已经被限制在单个会话窗口中。
+
+**通过此更改，其余来源在第 75 个百分位数处的分数将有所提高。**大多数人只会看到轻微的改善，但大约 3% 的人会看到他们的分数从“需要改进”或“差”评级提高到“优秀”评级。这些页面往往使用无限滚动条或有许多缓慢的 UI 更新，如我们[之前的帖子](/better-layout-shift-metric/)所述。
+
+## 那么如何尝试呢？
+
+我们将很快更新我们的工具以使用新的指标定义！ 在此之前，您可以使用[示例 JavaScript 实现](https://github.com/mmocny/web-vitals/wiki/Snippets-for-LSN-using-PerformanceObserver)或 [Web Vitals 扩展](https://github.com/mmocny/web-vitals-extension/tree/experimental-ls)的分支在任何站点上试用 CLS 的更新版本。
+
+在此感谢所有在百忙之中阅读上一篇文章并提供反馈的读者！
diff --git a/src/site/content/zh/blog/fast-playback-with-preload/index.md b/src/site/content/zh/blog/fast-playback-with-preload/index.md
new file mode 100644
index 00000000000..f198b32e79d
--- /dev/null
+++ b/src/site/content/zh/blog/fast-playback-with-preload/index.md
@@ -0,0 +1,437 @@
+---
+layout: post
+title: 快速播放音频和视频预加载
+subhead: 如何通过主动预加载资源来加速媒体播放。
+authors:
+  - beaufortfrancois
+description: |2-
+
+  播放开始得越快，意味着观看您的视频或收听您的音频的人越多。这是众所周知的事实。在本文中，我将探讨一些实用的技术，可以使用这些技术根据您的用例主动预加载资源来加速媒体播放。
+date: 2017-08-17
+updated: 2020-11-16
+tags:
+  - media
+  - performance
+  - network
+---
+
+播放开始得越快，意味着观看您的视频或收听<br>您的音频的人越多。[这是众所周知的事实](https://www.digitaltrends.com/web/buffer-rage/)。在本文中，我将探讨一些实用的技术，可以使用这些技术根据您的用例主动预加载资源来加速音频和视频播放。
+
+<figure>
+  <video controls muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.webm#t=1.1" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-playback-with-preload/video-preload-hero.mp4#t=1.1" type="video/mp4">
+  </source></source></video>
+  <figcaption>
+    <p>致谢：版权 Blender Foundation | <a href="http://www.blender.org">www.blender.org</a> 。</p>
+  </figcaption></figure>
+
+我将介绍三种预加载媒体文件的方法，从各自的优缺点开始。
+
+<table>
+  <tbody>
+    <tr>
+      <th></th>
+      <th>优点...</th>
+      <th>缺点...</th>
+    </tr>
+    <tr>
+      <td rowspan="3" style="white-space: nowrap"><a href="#video_preload_attribute">视频预加载属性</a></td>
+      <td rowspan="3">对于托管在 Web 服务器上的唯一文件来说简单易用。</td>
+      <td>浏览器可能会完全忽略该属性。</td>
+    </tr>
+<tr>
+      <td>当 HTML 文档已完全加载并解析后，才会开始获取资源。</td>
+    </tr>
+    <tr>
+      <td>媒体源扩展 (MSE) 会忽略媒体元素上的 <code>preload</code> 属性，因为应用程序负责向 MSE 提供媒体。</td>
+    </tr>
+    <tr>
+      <td rowspan="2" style="white-space: nowrap"><a href="#link_preload">链接预加载</a></td>
+      <td>强制浏览器请求视频资源而不阻止文档的 <code>onload</code> 事件。</td>
+      <td>HTTP 范围请求不兼容。</td>
+    </tr>
+<tr>
+      <td>与 MSE 和文件段兼容。</td>
+      <td>获取完整资源时，应仅用于小型媒体文件 (&lt;5 MB)。</td>
+    </tr>
+    <tr>
+      <td><a href="#manual_buffering">手动缓冲</a></td>
+      <td>完全控制</td>
+      <td>需要由网站处理复杂的错误。</td>
+    </tr>
+  </tbody>
+</table>
+
+## 视频预加载属性
+
+如果视频源是托管在 Web 服务器上的唯一文件，您可能希望使用视频  `preload` 属性向浏览器提供[有关要预加载多少信息或内容](/video-and-source-tags/#preload)的提示。这意味着[媒体源扩展 (MSE)](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API) 与 `preload` 不兼容。
+
+仅当初始 HTML 文档已完全加载并解析（例如 `DOMContentLoaded` 事件已触发）后才会开始获取资源，而在实际获取资源时才会触发与之不同的 `load` 事件。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/De8tMHJUn3XyzFfosVLb.svg", alt="", width="800", height="234" %}</figure>
+
+将 `preload` 属性设置为 `metadata` 表示用户不需要视频，但需要获取其元数据（尺寸、曲目列表、持续时间等）。请注意，从 [Chrome 64](https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#media-preload-defaults-metadata) 开始，`preload` 的默认值是 `metadata` 。 （先前是 `auto`）。
+
+```html
+<video id="video" preload="metadata" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+将 `preload` 属性设置为 `auto` 表示浏览器可以缓存足够的数据，无需停止进一步缓冲即可完成播放。
+
+```html
+<video id="video" preload="auto" src="file.mp4" controls></video>
+
+<script>
+  video.addEventListener('loadedmetadata', function() {
+    if (video.buffered.length === 0) return;
+
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+  });
+</script>
+```
+
+不过也有一些需要注意的地方。由于这只是一个提示，因此浏览器可能会完全忽略 `preload` 属性。在撰写本文时，以下是在 Chrome 中应用的一些规则：
+
+- 启用[流量节省程序](https://support.google.com/chrome/answer/2392284)后，Chrome 会将 `preload` 值强制为 `none` 。
+- 在 Android 4.3 中，由于 [Android 缺陷](https://bugs.chromium.org/p/chromium/issues/detail?id=612909)，Chrome 会将 `preload` 值强制为 `none`。
+- 在蜂窝连接（2G、3G 和 4G）上，Chrome 会将 `preload` 值强制为 `metadata` 。
+
+### 提示
+
+如果您的网站在同一域中包含许多视频资源，我建议您将 `preload` 值设置为 `metadata` 或定义 `poster` 属性并将 `preload` 设置为`none` 。这样，即可避免达到同一域的最大 HTTP 连接数（根据 HTTP 1.1 规范为 6 个），这可能会挂起资源加载。请注意，如果视频不是您关注的重点，这也可能会提高页面速度。
+
+## 链接预加载
+
+像其他[文章](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)中[介绍的](https://developers.google.com/web/updates/2016/03/link-rel-preload)那样，[链接预加载](https://w3c.github.io/preload/)是一种声明性获取，可让您强制浏览器请求资源，而不会阻止 `load` 事件，同时页面也在下载。通过 `<link rel="preload">` 加载的资源存储在本地浏览器中，并且在 DOM、JavaScript 或 CSS 中显式引用它们之前，它们实际上是静止的。
+
+预加载与预缓存的不同之处在于，前者专注于当前导航并根据资源的类型（脚本、样式、字体、视频、音频等）优先获取资源。它应该用于为当前会话预热浏览器缓存。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/g5fQKJMivvcsHajmMmi2.svg", alt="", width="800", height="234" %}</figure>
+
+### 预加载完整视频
+
+以下是如何在您的网站上预加载完整视频的方法，这样当您的 JavaScript 要求获取视频内容时，它会从缓存中读取，因为浏览器可能已经缓存了该资源。如果预加载请求尚未完成，则会进行常规网络获取。
+
+```js
+<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">
+
+<video id="video" controls></video>
+
+<script>
+  // 随后，在满足某些条件后，将视频源设置为
+  // 预加载视频 URL。
+  video.src = 'https://cdn.com/small-file.mp4';
+  video.play().then(() => {
+    // 如果预加载视频 URL 已缓存，即会立即开始播放。
+  });
+</script>
+```
+
+{% Aside %} 我建议仅将此法用于小型媒体文件（小于 5MB）。 {% endAside %}
+
+因为如果 `as` 预加载链接值为 `video`，预加载资源就会被视频元素消耗。如果它是一个音频元素，即为 `as="audio"` 。
+
+### 预加载第一段
+
+以下示例显示了如何使用 `<link rel="preload">` 预加载视频的第一段并将其与媒体源扩展一起使用。如果您不熟悉 MSE JavaScript API，请参阅 [MSE 基础知识](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API)。
+
+为简单起见，我们假设整个视频已被拆分为较小的文件，例如 `file_1.webm` 、 `file_2.webm` 、 `file_3.webm` 等。
+
+```html
+<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">
+
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // 如果视频已预加载，则获取会从浏览器
+    // 缓存（内存缓存）中立即返回响应，否则，将执行
+    // 常规网络获取。
+    fetch('https://cdn.com/file_1.webm')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      // 将数据追加到新的 sourceBuffer 中。
+      sourceBuffer.appendBuffer(data);
+      // TODO: 当用户开始播放视频时，获取 file_2.webm。
+    })
+    .catch(error => {
+      // TODO: 向用户显示"视频不可用"消息。
+    });
+  }
+</script>
+```
+
+{% Aside 'warning' %} 对于跨源资源，请确保您的 CORS 标头设置正确。 因为我们无法从 `fetch(videoFileUrl, { mode: 'no-cors' })` 获取的不透明响应创建数组缓冲区，我们将无法提供任何视频或音频元素。 {% endAside %}
+
+### 支持
+
+查看 MDN 的[浏览器兼容性](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)表，了解哪些浏览器支持预加载。您可能希望使用以下代码段检测其可用性，以调整您的性能指标。
+
+```js
+function preloadFullVideoSupported() {
+  const link = document.createElement('link');
+  link.as = 'video';
+  return (link.as === 'video');
+}
+
+function preloadFirstSegmentSupported() {
+  const link = document.createElement('link');
+  link.as = 'fetch';
+  return (link.as === 'fetch');
+}
+```
+
+## 手动缓冲
+
+在深入研究[缓存 API](https://developer.mozilla.org/docs/Web/API/Cache) 和服务工作进程之前，我们先来看看如何使用 MSE 手动缓冲视频。以下示例假设您的 Web 服务器支持 HTTP [`Range`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Range) 请求，但这与文件段非常相似。请注意，某些中间件库（例如 [Google 的 Shaka Player](https://github.com/google/shaka-player) 、 [JW Player](https://developer.jwplayer.com/) 和 [Video.js](http://videojs.com/)）就是为处理此问题而构建的。
+
+```html
+<video id="video" controls></video>
+
+<script>
+  const mediaSource = new MediaSource();
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+  function sourceOpen() {
+    URL.revokeObjectURL(video.src);
+    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+
+    // 通过设置 Range HTTP 请求标头获取视频的开头。
+    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
+    });
+  }
+
+  function updateEnd() {
+    // 视频现在随时可以播放！
+    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
+    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
+
+    // 当用户开始播放视频时，获取下一段。
+    video.addEventListener('playing', fetchNextSegment, { once: true });
+  }
+
+  function fetchNextSegment() {
+    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      const sourceBuffer = mediaSource.sourceBuffers[0];
+      sourceBuffer.appendBuffer(data);
+      // TODO: 获取接下来的段并予以追加。
+    });
+  }
+</script>
+```
+
+### 注意事项
+
+您现在可以控制整个媒体缓冲体验了，接下来我建议您在考虑预加载时关注一下设备的电池电量、“流量节省程序模式”用户首选项和网络信息。
+
+#### 电池感知
+
+在考虑预加载视频之前，请先看一下用户设备的电池电量。这会在电量低时延长电池寿命。
+
+当设备电池耗尽时，禁用预加载或至少预加载较低分辨率的视频。
+
+```js
+if ('getBattery' in navigator) {
+  navigator.getBattery()
+  .then(battery => {
+    // 如果电池正在充电或电池电量足够高
+    if (battery.charging || battery.level > 0.15) {
+      // TODO: 预加载视频的第一段。
+    }
+  });
+}
+```
+
+#### 检测“流量节省程序”
+
+使用 `Save-Data` 客户端提示请求标头向在浏览器中选择了“流量节省”模式的用户提供快速且轻便的应用程序。通过识别此请求标头，您的应用程序可以进行自定义并向成本和性能受限的用户提供最佳用户体验。
+
+请参阅[使用 Save-Data 交付快速且轻便的应用程序](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data)以了解更多信息。
+
+#### 基于网络信息的智能加载
+
+在预加载之前，您可能要检查一下 `navigator.connection.type`，当它设置为 `cellular` 时 ，您可以阻止预加载并通知用户他们的移动网络运营商可能会对带宽收费，并且仅会开始自动播放以前缓存的内容。
+
+```js
+if ('connection' in navigator) {
+  if (navigator.connection.type == 'cellular') {
+    // TODO: 在预加载视频前提示用户
+  } else {
+    // TODO: 预加载视频的第一段。
+  }
+}
+```
+
+查看[网络信息示例](https://googlechrome.github.io/samples/network-information/)以了解如何对网络变化做出反应。
+
+### 预缓存多个第一段
+
+现在，如果我想试探性地预加载一些媒体内容，但不知道用户最终会选择哪段媒体怎么办？如果用户在一个包含 10 个视频的网页上，我们可能有足够的内存从每个视频中获取一个片段文件，但我们绝不应该创建 10 个隐藏的 `<video>` 元素和 10 个 `MediaSource` 对象并开始提供这些数据。
+
+下面的两部分示例向您展示了如何使用强大易用的[缓存 API](/cache-api-quick-guide/) 预缓存多个视频的第一段。请注意，使用 IndexedDB 也可以实现类似的功能。我们还没有使用服务工作进程，因为缓存 API 也可以从 `window` 对象访问。
+
+#### 获取和缓存
+
+```js
+const videoFileUrls = [
+  'bat_video_file_1.webm',
+  'cow_video_file_1.webm',
+  'dog_video_file_1.webm',
+  'fox_video_file_1.webm',
+];
+
+// 我们创建一个视频预缓存并在其中存储所有的视频第一段。
+window.caches.open('video-pre-cache')
+.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));
+
+function fetchAndCache(videoFileUrl, cache) {
+  // 首先检查视频是否在缓存中。
+  return cache.match(videoFileUrl)
+  .then(cacheResponse => {
+    // 如果视频已在缓存中，我们返回缓存的响应。
+    if (cacheResponse) {
+      return cacheResponse;
+    }
+    // 否则，从网络获取视频
+    return fetch(videoFileUrl)
+    .then(networkResponse => {
+      // 将响应添加到缓存中，同时并行返回网络响应。
+      cache.put(videoFileUrl, networkResponse.clone());
+      return networkResponse;
+    });
+  });
+}
+```
+
+注意，如果我之前使用的是 HTTP `Range` 请求，则必须手动重新创建一个 `Response` 对象，因为缓存 API [还](https://github.com/whatwg/fetch/issues/144)不支持 `Range` 响应。请注意，调用`networkResponse.arrayBuffer()` 会立即将响应的全部内容都提取到呈现程序内存中，这就是您可能想要使用小范围的原因。
+
+为了供您参考，我修改了上面示例的一部分以将 HTTP Range 请求保存到视频预缓存中。
+
+```js
+    ...
+    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
+    .then(networkResponse => networkResponse.arrayBuffer())
+    .then(data => {
+      const response = new Response(data);
+      // 将响应添加到缓存中，同时并行返回网络响应。
+      cache.put(videoFileUrl, response.clone());
+      return response;
+    });
+```
+
+#### 播放视频
+
+当用户单击播放按钮时，我们将获取缓存 API 中可用的第一段视频，这样就会在可用时立即开始播放。否则，我们将直接从网络中获取它。请记住，浏览器和用户可能会决定清除该[缓存](/storage-for-the-web/#eviction) 。
+
+如前所述，我们会使用 MSE 将视频的第一段提供给视频元素。
+
+```js
+function onPlayButtonClick(videoFileUrl) {
+  video.load(); // 后续能够播放视频。
+
+  window.caches.open('video-pre-cache')
+  .then(cache => fetchAndCache(videoFileUrl, cache)) // 在上文定义。
+  .then(response => response.arrayBuffer())
+  .then(data => {
+    const mediaSource = new MediaSource();
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
+
+    function sourceOpen() {
+      URL.revokeObjectURL(video.src);
+
+      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
+      sourceBuffer.appendBuffer(data);
+
+      video.play().then(() => {
+        // TODO: 在用户开始播放视频时，获取视频的其余部分。
+      });
+    }
+  });
+}
+```
+
+{% Aside 'warning' %} 对于跨源资源，请确保您的 CORS 标头设置正确。因为我们无法从 `fetch(videoFileUrl, { mode: 'no-cors' })` 获取的不透明响应创建数组缓冲区，我们将无法提供任何视频或音频元素。 {% endAside %}
+
+### 使用 service worker 创建 Range 响应
+
+现在，如果您已获取整个视频文件并将其保存在缓存 API 中怎么办？当浏览器发送一个 HTTP `Range` 请求，你肯定不希望把整个视频加入到呈现程序内存中，因为缓存 API [还](https://github.com/whatwg/fetch/issues/144)不支持 `Range` 响应。
+
+接下来，我来展示如何拦截这些请求并从 service worker 返回自定义的 `Range` 响应。
+
+```js
+addEventListener('fetch', event => {
+  event.respondWith(loadFromCacheOrFetch(event.request));
+});
+
+function loadFromCacheOrFetch(request) {
+  // 为此请求搜索所有可用的缓存。
+  return caches.match(request)
+  .then(response => {
+
+    // 如果它尚未在缓存中，则从网络获取。
+    if (!response) {
+      return fetch(request);
+      // 注意，我们可能希望将响应添加到缓存中，同时并行
+      // 返回网络响应。
+    }
+
+    // 浏览器发送一个 HTTP Range 请求。 让我们从缓存中
+    // 手动重建一个。
+    if (request.headers.has('range')) {
+      return response.blob()
+      .then(data => {
+
+        // 从 Range 请求标头中获取起始位置。
+        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
+        const options = {
+          status: 206,
+          statusText: 'Partial Content',
+          headers: response.headers
+        }
+        const slicedResponse = new Response(data.slice(pos), options);
+        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
+            (data.size - 1) + '/' + data.size);
+        slicedResponse.setHeaders('X-From-Cache': 'true');
+
+        return slicedResponse;
+      });
+    }
+
+    return response;
+  }
+}
+```
+
+需要注意的是，我使用 `response.blob()` 重建了这片响应，因为这只是给了我一个文件句柄，而 `response.arrayBuffer()` 会将整个文件加入到呈现程序内存中。
+
+我的自定义 `X-From-Cache` HTTP 标头可用于判定此请求是来自缓存还是来自网络。[ShakaPlayer](https://github.com/google/shaka-player/blob/master/docs/tutorials/service-worker.md) 等播放器可以使用它来忽略响应时间作为网络速度的指标。
+
+{% YouTube 'f8EGZa32Mts' %}
+
+查看官方[示例媒体应用程序](https://github.com/GoogleChrome/sample-media-pwa)，特别是它的 [ranged-response.js](https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/scripts/ranged-response.js) 文件，了解如何处理 `Range` 请求的完整解决方案。
diff --git a/src/site/content/zh/blog/fetch-metadata/index.md b/src/site/content/zh/blog/fetch-metadata/index.md
new file mode 100644
index 00000000000..44e25b31b20
--- /dev/null
+++ b/src/site/content/zh/blog/fetch-metadata/index.md
@@ -0,0 +1,203 @@
+---
+title: 使用 Fetch Metadata 保护您的资源免受 Web 攻击
+subhead: 防止 CSRF、XSSI、跨源信息泄露。
+authors:
+  - lwe
+date: 2020-06-04
+updated: 2020-06-10
+hero: image/admin/El8ytnIgMDWVzdsglcfv.jpg
+alt: 与资源隔离策略相关的 Python 代码截图。
+description: |2-
+
+  Fetch Metadata 是一项新的 Web 平台功能，旨在允许服务器保护自己免受跨源攻击。
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 为什么要留心隔离您的网络资源？
+
+许多 Web 应用程序容易受到[跨源](/same-site-same-origin/#%22same-origin%22-and-%22cross-origin%22)攻击，例如[跨站点请求伪造](https://portswigger.net/web-security/csrf)(CSRF)、[跨站点脚本包含](https://portswigger.net/research/json-hijacking-for-the-modern-web)(XSSI)、定时攻击、[跨源信息泄漏](https://arxiv.org/pdf/1908.02204.pdf)或推测执行侧信道 ( [Spectre](https://developer.chrome.com/blog/meltdown-spectre/) ) 攻击。
+
+[Fetch Metadata](https://www.w3.org/TR/fetch-metadata/) 请求标头允许您部署强大的纵深防御机制 — 资源隔离策略 — 以保护您的应用程序免受这些常见的跨源攻击。
+
+给定 Web 应用程序公开的资源通常仅由应用程序本身加载，而不由其他网站加载。在这种情况下，部署基于 Fetch Metadata 请求标头的资源隔离策略不费吹灰之力，同时保护应用程序免受跨站点攻击。
+
+## 浏览器兼容性 {: #compatibility }
+
+从 Chrome 76 开始，以及其他基于 Chromium 的浏览器均支持 Fetch Metadata 请求标头，Firefox 正在开发对其的支持。有关最新的浏览器支持信息，请参阅[浏览器兼容性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site#Browser_compatibility)。
+
+## 背景
+
+许多跨站点攻击是可能的，因为默认情况下 Web 是开放的，并且您的应用程序服务器无法轻松保护自己免受来自外部应用程序的通信的影响。典型的跨源攻击是跨站点请求伪造 (CSRF)，攻击者将用户引诱到他们控制的站点，然后向用户登录的服务器提交表单。由于服务器无法判断请求是否来自另一个域（跨站点），并且浏览器会自动将 cookie 附加到跨站点请求，因此服务器将代表用户执行攻击者请求的操作。
+
+其他跨站点攻击，如跨站点脚本包含 (XSSI) 或跨源信息泄漏，本质上与 CSRF 类似，并依赖于从受攻击者控制的文档中的受害应用程序加载资源并泄漏有关受害应用程序的信息。由于应用程序无法轻易区分可信请求和不可信请求，因此它们无法丢弃恶意的跨站点流量。
+
+{% Aside 'gotchas' %} 除了上述对资源的攻击之外，*窗口引用*还会导致跨源信息泄漏和 Spectre 攻击。您可以通过将 `Cross-Origin-Opener-Policy` 响应标头设置为 `same-origin` 来防止它们。 {% endAside %}
+
+## 引入 Fetch Metadata {: #introduction }
+
+Fetch Metadata 请求标头是一项新的 Web 平台安全功能，旨在帮助服务器防御跨源攻击。`Sec-Fetch-*` 标头中提供有关 HTTP 请求上下文的信息，它们允许响应服务器在处理请求之前应用安全策略。这让开发人员可以根据请求的发出方式和使用上下文来决定是接受还是拒绝请求，从而可以仅响应他们自己的应用程序发出的合法请求。
+
+{% Compare 'better', 'Same-Origin' %} {% CompareCaption %} 来自由您自己的服务器（同源）提供服务的站点的请求将继续有效。 {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/aRsy2xULTR4TM2sMMsbQ.png", alt="来自 https://site.example 的 JavaScript 中资源 https://site.example/foo.json 的获取请求导致浏览器发送 HTTP 请求标头 'Sec Fetch-Site: same-origin'.", width="800", height="176" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+{% Compare 'worse', 'Cross-site' %} {% CompareCaption %} 由于 `Sec-Fetch-*` 标头提供的 HTTP 请求中的附加上下文，服务器可能会拒绝恶意跨站点请求。 {% endCompareCaption %}
+
+<!--lint disable no-literal-urls-->
+
+{% Img src="image/admin/xY4yB36JqsVw62wNMIWt.png", alt="https://evil.example 上的图像已将 img 元素的 src 属性设置为 'https://site.example/foo.json'，导致浏览器发送 HTTP 请求标头 'Sec-Fetch-Site: cross-site'。", width="800", height="171" %}
+
+<!--lint enable no-literal-urls-->
+
+{% endCompare %}
+
+### `Sec-Fetch-Site`
+
+`Sec-Fetch-Site` 告诉服务器哪个[站点](/same-site-same-origin)发送了请求。浏览器将此值设置为以下值之一：
+
+- `same-origin`，前提是请求是由您自己的应用程序发出的（例如 `site.example` ）
+- `same-site`，前提是请求是由您站点的子域发出的（例如 `bar.site.example` ）
+- `none`，前提是请求是由用户与用户代理的交互（例如点击书签）明确引起的
+- `cross-site`，前提是请求是由另一个网站发送的（例如 `evil.example` ）
+
+### `Sec-Fetch-Mode`
+
+`Sec-Fetch-Mode`指示请求的[模式](https://developer.mozilla.org/docs/Web/API/Request/mode)。这大致对应于请求的类型，并允许您区分资源负载和导航请求。例如，目的地 `navigate` 指示顶层导航请求，而 `no-cors` 表示加载图像等资源请求。
+
+### `Sec-Fetch-Dest`
+
+`Sec-Fetch-Dest` 公开请求的[目的地](https://developer.mozilla.org/docs/Web/API/Request/destination)（例如，如果 `script` 或 `img` 标签导致浏览器请求资源）。
+
+## 如何使用 Fetch Metadata 来防范跨源攻击
+
+这些请求标头提供的额外信息非常简单，但额外的上下文允许您在服务器端构建强大的安全逻辑，也称为资源隔离策略，只需几行代码。
+
+### 实施资源隔离策略
+
+资源隔离策略可防止您的资源被外部网站请求。阻止此类流量可缓解常见的跨站点 Web 漏洞，例如 CSRF、XSSI、定时攻击和跨源信息泄漏。可以为您的应用程序的所有端点启用此策略，并将允许来自您自己的应用程序的所有资源请求以及直接导航（通过 HTTP `GET` 请求）。应该在跨站点上下文中加载的端点（例如使用 CORS 加载的端点）可以选择退出此逻辑。
+
+#### 第 1 步：允许来自不发送 Fetch Metadata 的浏览器的请求
+
+由于并非所有浏览器都支持 Fetch Metadata，因此您需要通过检查 `sec-fetch-site` 的存在来允许未设置 `Sec-Fetch-*` 标头的请求。
+
+{% Aside %} 以下所有示例均为 Python 代码。 {% endAside %}
+
+```python
+if not req['sec-fetch-site']:
+  return True  # Allow this request
+```
+
+{% Aside 'caution' %}由于 Fetch Metadata 仅在基于 Chromium 的浏览器中受支持，因此应将其用作[纵深防御保护，](https://static.googleusercontent.com/media/landing.google.com/en//sre/static/pdf/Building_Secure_and_Reliable_Systems.pdf#page=181)而不是用作您的主要防线。 {% endAside %}
+
+#### 第 2 步：允许相同站点和浏览器发起的请求
+
+任何不是来自跨源上下文（如 `evil.example` ）的请求都将被允许。特别是如下请求：
+
+- 源自您自己的应用程序（例如，始终允许 `site.example` 请求 `site.example/foo.json` 的同源请求）。
+- 源自您的子域。
+- 由用户与用户代理的交互（例如直接导航或通过单击书签等）明确引起。
+
+```python
+if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+  return True  # Allow this request
+```
+
+{% Aside 'gotchas' %}如果您的子域不被完全信任，您可以通过删除 `same-site` 值来阻止来自子域的请求，从而使策略更加严格。 {% endAside %}
+
+#### 第 3 步：允许简单的顶级导航和 iframe
+
+为了确保您的站点仍然可以从其他站点链接，您必须允许简单的 ( `HTTP GET` ) 顶级导航。
+
+```python
+if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+  # <object> and <embed> send navigation requests, which we disallow.
+  and req['sec-fetch-dest'] not in ('object', 'embed'):
+    return True  # Allow this request
+```
+
+{% Aside 'gotchas' %} 上述逻辑可保护您的应用程序的端点不被其他网站用作资源，但将允许顶级导航和嵌入（例如加载到`<iframe>` ）。为了进一步提高安全性，您可以使用 Fetch Metadata 标头将跨站点导航限制为仅允许的一组页面。 {% endAside %}
+
+#### 第 4 步：选择退出旨在提供跨站点流量的端点（可选）
+
+在某些情况下，您的应用程序可能会提供旨在跨站点加载的资源。这些资源需要在每个路径或每个端点的基础上免除。此类端点的示例包括：
+
+- 旨在跨源访问的端点：如果您的应用程序正在为`CORS`端点提供服务，您需要明确地将它们从资源隔离中选择退出，以确保对这些端点的跨站点请求仍然是可能的。
+- 公共资源（例如图像、样式等）：任何应该可以从其他站点跨源加载的公共和未经身份验证的资源也可以被豁免。
+
+```python
+if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+  return True
+```
+
+{% Aside 'caution' %}将您的应用程序的某些部分退出这些安全限制之前，请确保它们是静态的并且不包含任何敏感的用户信息。 {% endAside %}
+
+#### 第 5 步：拒绝所有其他跨站点且不可导航的请求
+
+此资源隔离策略将拒绝任何其他**跨站点**请求，从而保护您的应用程序免受常见的跨站点攻击。
+
+{% Aside 'gotchas' %}默认情况下，违反您的策略的请求应被拒绝并提供 `HTTP 403` 响应。但是，根据您的用例，您还可以考虑其他操作，例如：
+
+- **只记录违规**。这在测试策略的兼容性和查找可能需要选择退出的端点时特别有用。
+- **修改请求**。在某些情况下，请考虑执行其他操作，例如重定向到您的登录页面、删除身份验证凭据（例如 cookie）。但是，请注意，这可能会削弱基于 Fetch Metadata 的策略的保护。 {% endAside %}
+
+**示例：**以下代码演示了在服务器上完整实现强大的资源隔离策略或作为中间件拒绝潜在的恶意跨站点资源请求，同时允许简单的导航请求：
+
+```python
+# Reject cross-origin requests to protect from CSRF, XSSI, and other bugs
+def allow_request(req):
+  # Allow requests from browsers which don't send Fetch Metadata
+  if not req['sec-fetch-site']:
+    return True
+
+  # Allow same-site and browser-initiated requests
+  if req['sec-fetch-site'] in ('same-origin', 'same-site', 'none'):
+    return True
+
+  # Allow simple top-level navigations except <object> and <embed>
+  if req['sec-fetch-mode'] == 'navigate' and req.method == 'GET'
+    and req['sec-fetch-dest'] not in ('object', 'embed'):
+      return True
+
+  # [OPTIONAL] Exempt paths/endpoints meant to be served cross-origin.
+  if req.path in ('/my_CORS_endpoint', '/favicon.png'):
+    return True
+
+  # Reject all other requests that are cross-site and not navigational
+  return False
+```
+
+### 部署资源隔离策略
+
+1. 安装类似于上文中代码片段的模块，用于记录和监控您网站的行为，并确保这些限制不会影响任何合法流量。
+2. 通过免除合法的跨源端点来修复潜在的违规行为。
+3. 通过丢弃不合规的请求来加强策略。
+
+### 识别和修复违反策略的行为
+
+建议您首先在服务器端代码中以报告模式启用策略，从而以无副作用的方式对其进行测试。或者，您可以在中间件或反向代理中实现此逻辑，反向代理会记录您的策略在应用于生产流量时可能产生的任何违规行为。
+
+根据我们在 Google 推出 Fetch Metadata 资源隔离策略的经验，大多数应用程序默认与此类策略兼容，并且很少需要免除端点以允许跨站点流量。
+
+### 加强资源隔离策略
+
+在您确认您的策略不会影响合法的生产流量之后，您就可以加强限制了，以保证其他站点将无法请求您的资源，并保护您的用户免受跨站点攻击。
+
+{% Aside 'caution' %} 确保在运行身份验证检查或对请求进行任何其他处理之前拒绝无效请求，以防止泄露敏感的时间信息。 {% endAside %}
+
+## 进阶阅读
+
+- [W3C Fetch Metadata 请求标头规范](https://www.w3.org/TR/fetch-metadata/)
+- [Fetch Metadata Playground](https://secmetadata.appspot.com/)
+- [Google I/O 演讲：使用现代平台功能保护 Web 应用程序](https://webappsec.dev/assets/pub/Google_IO-Securing_Web_Apps_with_Modern_Platform_Features.pdf)（幻灯片）
+
+{% YouTube id='DDtM9caQ97I', startTime='1856' %}
diff --git a/src/site/content/zh/blog/fetch-upload-streaming/index.md b/src/site/content/zh/blog/fetch-upload-streaming/index.md
new file mode 100644
index 00000000000..ca2f245906f
--- /dev/null
+++ b/src/site/content/zh/blog/fetch-upload-streaming/index.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: 使用 fetch API 流式处理请求
+authors:
+  - jakearchibald
+description: Chrome 从版本 95 开始支持上传流，这意味着可以在整个请求主体可用之前开始处理请求。
+date: 2020-07-22
+updated: 2021-09-22
+hero: image/admin/9U7u4C7WCGbrdHm3181W.jpg
+alt: 一艘指向上游的独木舟。
+tags:
+  - blog
+  - chrome-95
+  - network
+  - service-worker
+feedback:
+  - api
+---
+
+从 Chrome 95 开始，通过使用 Streams API，可以在整个请求主体可用之前开始处理请求。
+
+这可以用来：
+
+- 预热服务器。换句话说，一旦用户焦点落在文本输入字段，就可以开始处理请求，并除去所有标头，然后等到用户按下“发送”，再发送他们输入的数据。
+- 陆续发送客户端上生成的数据，例如音频、视频或输入数据。
+- 通过 HTTP 重新创建 Web 套接字。
+
+但由于这是一个低级 Web 平台功能，不要被*我的*想法限制。也许您可以想到更令人兴奋的请求流用例。
+
+## 演示 {: #demo }
+
+{% Glitch { id: 'fetch-request-stream', path: 'index.html', height: 480 } %}
+
+这展示了如何将用户数据流式传输到服务器，并发送回可以实时处理的数据。
+
+好吧，这不是最有想象力的示例，我只是想简单一点，好吗？
+
+总之，这是怎么实现的？
+
+## 前情提要：fetch 流的令人兴奋的冒险
+
+所有现代浏览器支持*响应*流已经有一段时间了。通过这些流，您可以在响应从服务器到达时访问部分响应：
+
+```js
+const response = await fetch(url);
+const reader = response.body.getReader();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+  console.log('Received', value);
+}
+
+console.log('Response fully received');
+```
+
+每个 `value` 都是一个 `Uint8Array` 字节。获得的数组数量和数组大小取决于网络速度。如果使用快速连接，将获得更少、更大的数据“块”。如果连接速度较慢，将获得更多、更小的数据块。
+
+如果要将这些字节转换为文本，可以使用 [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder/decode)，如果[目标浏览器支持](https://caniuse.com/#feat=mdn-api_textdecoderstream)的话，还可以使用更新的转换流：
+
+```js
+const response = await fetch(url);
+const reader = response.body
+  .pipeThrough(new TextDecoderStream())
+  .getReader();
+```
+
+`TextDecoderStream` 是一个转换流，可抓取所有 `Uint8Array` 块并将它们转换为字符串。
+
+流非常好用，因为在数据到达时就可以开始对其操作。例如，如果接收由 100 个“结果”构成的列表，只要收到第一个结果就可以立即显示出来，而不用等待收到全部 100 个结果。
+
+总之，这就是响应流，我想谈论的令人兴奋的新东西是请求流。
+
+## 流式请求主体
+
+请求主体可以是：
+
+```js
+await fetch(url, {
+  method: 'POST',
+  body: requestBody,
+});
+```
+
+以前，需要整个请求主体就绪，才能开始处理请求，但现在在 Chrome 95 中，您可以提供您自己的数据 `ReadableStream`：
+
+```js
+function wait(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+const stream = new ReadableStream({
+  async start(controller) {
+    await wait(1000);
+    controller.enqueue('This ');
+    await wait(1000);
+    controller.enqueue('is ');
+    await wait(1000);
+    controller.enqueue('a ');
+    await wait(1000);
+    controller.enqueue('slow ');
+    await wait(1000);
+    controller.enqueue('request.');
+    controller.close();
+  },
+}).pipeThrough(new TextEncoderStream());
+
+fetch(url, {
+  method: 'POST',
+  headers: { 'Content-Type': 'text/plain' },
+  body: stream,
+});
+```
+
+以上代码将向服务器发送“This is a slow request”，一次发送一个单词，相邻发送之间有一秒暂停。
+
+请求主体的每个块都需要是一个 `Uint8Array` 字节，因此我使用 `pipeThrough(new TextEncoderStream())` 进行转换。
+
+### 可写流
+
+有时，如果有 `WritableStream`，处理流会更容易。您可以使用“标识”流来实现这一点，它是一个可读/可写对，接受传递到其可写端的任何内容，然后将其发送到可读端。您可以通过创建一个不带任何参数的 `TransformStream` 来创建这样一个流：
+
+```js
+const { readable, writable } = new TransformStream();
+
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+现在，您发送到该可写流的任何内容都将成为请求的一部分。这样便可以将流组合在一起。例如，以下示例从一个 URL 获取数据，然后压缩并发送到另一个 URL：
+
+```js
+// Get from url1:
+const response = await fetch(url1);
+const { readable, writable } = new TransformStream();
+
+// Compress the data from url1:
+response.body
+  .pipeThrough(new CompressionStream('gzip'))
+  .pipeTo(writable);
+
+// Post to url2:
+await fetch(url2, {
+  method: 'POST',
+  body: readable,
+});
+```
+
+上面的示例使用[压缩流](https://chromestatus.com/feature/5855937971617792)来通过 gzip 压缩任意数据。
+
+### 功能检测
+
+```js
+const supportsRequestStreamsP = (async () => {
+  const supportsStreamsInRequestObjects = !new Request('', {
+    body: new ReadableStream(),
+    method: 'POST',
+  }).headers.has('Content-Type');
+
+  if (!supportsStreamsInRequestObjects) return false;
+
+  return fetch('data:a/a;charset=utf-8,', {
+    method: 'POST',
+    body: new ReadableStream(),
+  }).then(() => true, () => false);
+})();
+
+// Note: supportsRequestStreamsP is a promise.
+if (await supportsRequestStreamsP) {
+  // …
+} else {
+  // …
+}
+```
+
+如果您感到好奇，以下是功能检测的原理：
+
+如果浏览器不支持特定的 `body` 类型，它会针对对象调用 `toString()`，并将结果用作主体。因此，如果浏览器不支持请求流，则请求主体将变为字符串 `"[object ReadableStream]"`。当使用字符串作为主体时，会顺便将 `Content-Type` 标头设置为 `text/plain;charset=UTF-8`。因此，如果设置了该标头，我们就知道浏览器*不*支持请求对象中的流，我们可以提早退出。
+
+不幸的是，虽然 Safari*{nbsp}*支持请求对象中的流，但*不*允许与 `fetch` 一起使用。
+
+为了测试这一点，我们尝试对流主体 `fetch`。如果依赖于网络，那么测试将不稳定和缓慢，但庆幸的是，规范中的一种 quirk（怪异模式）允许对 `data:` URL 发出 `POST` 请求。这样做很快并且无需连接。Safari 将拒绝此调用，因为它不支持流主体。
+
+## 限制
+
+流式请求是 Web 的新能力，因此还有一些限制：
+
+### 重定向受限
+
+某些形式的 HTTP 重定向要求浏览器将请求主体重新发送到另一个 URL。为了支持这一点，浏览器必须对流的内容进行缓冲，这在某种程度上违背了初衷，所以它不会这样做。
+
+相反，如果请求具有流主体，并且响应是除 303 以外的 HTTP 重定向，则 fetch 将拒绝并且*不会*遵循重定向。
+
+303 重定向是被允许的，因为它们显式地将方法更改为 `GET` 并丢弃请求主体。
+
+### 默认仅限 HTTP/2
+
+默认情况下，如果连接不是 HTTP/2，fetch 将被拒绝。如果要通过 HTTP/1.1 使用流式请求，需要选择加入：
+
+```js/3-3
+await fetch(url, {
+  method: 'POST',
+  body: stream,
+  allowHTTP1ForStreamingUpload: true,
+});
+```
+
+{% Aside 'caution' %} `allowHTTP1ForStreamingUpload` 是非标准的，只会作为 Chrome 实验性实现的一部分来使用。{% endAside %}
+
+根据 HTTP/1.1 规则，请求和响应主体需要发送 `Content-Length` 标头，以便另一方知道将接收多少数据，或者更改消息的格式以使用[块编码](https://en.wikipedia.org/wiki/Chunked_transfer_encoding)。使用块编码时，主体分成几个部分，每个部分都有自己的内容长度。
+
+块编码在 HTTP/1.1 *响应*中很常见，但在*请求*中非常少见。正因为如此，Chrome 有些担心兼容性，所以现在才选择加入。
+
+{% Aside %} 这对 HTTP/2 来说不是问题，因为 HTTP/2 数据总是“分块”的，尽管它会调用块[帧](https://developers.google.com/web/fundamentals/performance/http2#streams_messages_and_frames)。块编码直到 HTTP/1.1 才被引入，因此具有流式主体的请求在 HTTP/1 连接上总是会失败。{% endAside %}
+
+根据这次试验的进展情况，规范会将流式响应限制为 HTTP/2，或者始终允许 HTTP/1.1 和 HTTP/2。
+
+### 无双工通信
+
+HTTP 的一个鲜为人知的特性（尽管这是否为标准行为取决于您问的人）是，可以在发送请求的同时开始接收响应。然而，它是如此鲜为人知，以至于服务器和浏览器都没有很好地支持。
+
+在 Chrome 的当前实现中，您在主体被完整发送之前不会收到响应。在下面的示例中，`responsePromise` 在可读流关闭之前不会解析。服务器在这之前发送的任何内容都将被缓冲。
+
+```js
+const responsePromise = fetch(url, {
+  method: 'POST',
+  body: readableStream,
+});
+```
+
+仅次于双工通信的是对流式请求进行一次 fetch，然后进行另一次 fetch 接收流式响应。服务器需要某种方式来关联这两个请求，例如 URL 中的 ID。这就是[演示](#demo)的原理。
+
+## 潜在问题
+
+这是一个新功能，如今在互联网上并未得到充分利用。以下是一些需要注意的问题：
+
+### 服务器端不兼容
+
+一些应用服务器不支持流式请求，而是等待接收完整请求，然后才显示出来，这有点违背初衷。请改用支持流的应用服务器，如 [NodeJS](https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_class_http_incomingmessage)。
+
+但是，问题还不止于此！NodeJS 等应用服务器通常位于所谓的“前端服务器”后面，而后者又可能位于 CDN 后面。如果其中任何一个服务器决定先对请求进行缓冲，再提供给链中的下一个服务器，您将失去请求流的优势。
+
+此外，如果使用 HTTP/1.1，其中一个服务器可能没有为块编码做好准备，并且可能失败并出错。但是，至少可以对此进行测试，并在需要时尝试更改服务器。
+
+*……长叹一口气……*
+
+### 不受控制的不兼容性
+
+如果使用 HTTPS，则无需担心您和用户之间的代理，但用户可能会在他们的机器上运行代理。一些互联网保护软件会这样做，以监控浏览器和网络之间的所有内容。
+
+在某些情况下，此类软件会缓冲请求主体，或者在使用 HTTP/1.1 的情况下，它不需要块编码，并以某种激动人心的方式中断。
+
+目前，尚不清楚这种情况会多久发生一次，如果真会发生的话。
+
+如果要防止这种情况发生，可以创建一个类似于[上面演示](#demo)的“功能测试”，在其中尝试流式传输一些数据而不关闭流。如果服务器接收到数据，它可以通过不同的 fetch 进行响应。一旦发生这种情况，您就知道客户端支持端到端流式请求。
+
+## 欢迎反馈
+
+社区的反馈对于新 API 的设计至关重要，所以请进行试用并告诉我们您的想法！如果您遇到任何错误，请[报告它们](https://bugs.chromium.org/p/chromium/issues/list)，但如果您有一般反馈，请发送到 [blink-network-dev Google Group](https://groups.google.com/a/chromium.org/forum/#!forum/blink-network-dev)。
+
+照片作者：[Unsplash](https://unsplash.com/s/photos/canoe-stream?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 上的 [Laura Lefurgey-Smith](https://unsplash.com/@lauralefurgeysmith?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
diff --git a/src/site/content/zh/blog/floc/index.md b/src/site/content/zh/blog/floc/index.md
new file mode 100644
index 00000000000..41e136267b5
--- /dev/null
+++ b/src/site/content/zh/blog/floc/index.md
@@ -0,0 +1,220 @@
+---
+title: 什么是 FLoC？
+subhead: FLoC 允许在不共享单个用户浏览行为的情况下进行广告选择。
+authors:
+  - samdutton
+date: 2021-03-30
+updated: 2021-10-29
+hero: image/80mq7dk16vVEg8BBhsVe42n6zn82/GA543wiVTwpbwp6Zmw0H.jpg
+thumbnail: image/80mq7dk16vVEg8BBhsVe42n6zn82/OuORgPSvN06ntXT5xOii.jpg
+alt: 布赖顿码头上空的椋鸟群
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside %} 本文概述了 Chrome 中针对 FLoC 的第一个原始试验实现的 API 设计。
+
+目前，旨在无需第三方 cookie 或其他跨网站跟踪机制即可实现基于兴趣的广告投放的 API 未来迭代正在开发中。{% endAside %}
+
+FLoC 为基于兴趣的广告选择提供了一种隐私保护机制。
+
+当用户在网上浏览时，他们的浏览器使用 FLoC 算法来计算其“兴趣群组”，它对于近期浏览历史记录相似的数千个浏览器来说是相同的。浏览器会定期在用户设备上重新计算其群组，而不会与浏览器供应商或其他任何人共享个人浏览数据。
+
+{% Aside %}在 FLoC 初始试验期间，一次页面访问只会因为以下两个原因中的一个而包含在浏览器的 FLoC 计算中：
+
+- 页面上使用了 FLoC API (`document.interestCohort()`)。
+- Chrome 检测到页面[加载了广告或与广告相关的资源](https://github.com/WICG/floc/issues/82)。
+
+对于其他聚类算法，试验可能会试用不同的纳入标准：这是原始试验过程的一部分。
+
+在 Chrome 89 到 91 中运行的 FLoC 初始版本的原始试验[现已关闭](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)。{% endAside %}
+
+广告商（支付广告费用的网站）可以在他们自己的网站上包含代码，以收集群组数据并提供给他们的广告技术平台（提供广告投放软件和工具的公司）。例如，广告技术平台可能会从一家在线鞋店了解到群组 1101 和 1354 中的浏览器似乎对商店的户外装备感兴趣。广告技术平台还从其他广告商那里了解到这些群组的其他兴趣。
+
+随后，当来自这些群组之一的浏览器从显示广告的网站（例如新闻网站）请求页面时，广告平台可以使用该数据来选择相关广告（例如来自鞋店的登山靴广告）。
+
+隐私沙盒是一系列满足第三方用例的提案，无需第三方 cookie 或其他跟踪机制。有关所有提案的概述，请参阅[深入了解隐私沙盒](/digging-into-the-privacy-sandbox)。
+
+**该提案需要您的反馈。**如果您有意见，请在 [FLoC Explainer](https://github.com/WICG/floc/issues/new) 存储库上[创建问题](https://github.com/WICG/floc)。如果您对 Chrome 对此提案的试验有任何反馈，请对[试验意图](https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs)发表回复。
+
+## 为什么我们需要 FLoC？
+
+许多企业依靠广告来为其网站吸引流量，许多发布商网站通过出售广告库存来资助内容。人们通常更喜欢看到相关和有用的广告，而且相关广告也为广告商带来更多业务，并[为托管它们的网站带来更多收入](https://services.google.com/fh/files/misc/disabling_third-party_cookies_publisher_revenue.pdf)。换句话说，广告空间在展示相关广告时更有价值。因此，选择相关广告会提高广告支持的网站的收入。反过来，这意味着相关广告有助于资助对用户有利的内容创作。
+
+然而，人们担心定制广告对隐私产生影响，目前这些广告依赖于跟踪 cookie 和设备指纹识别等技术，这会将跨网站浏览历史记录透露给广告商或广告平台。FLoC 提案旨在允许以更好地保护隐私的方式进行广告选择。
+
+## FLoC 可用于哪些方面？
+
+- 向其浏览器属于某个被观察到经常访问某广告商网站的群组，或对相关主题表现出兴趣的人展示广告。
+- 使用机器学习模型来预测用户将基于其群组进行转化的概率，为广告竞价行为提供参考。
+- 向用户推荐内容。例如，假设某个新闻网站观察到他们的体育播客页面在群组 1234 和 7 的访问者中变得特别受欢迎。他们可以向来自这些群组的其他访问者推荐该内容。
+
+## FLoC 的工作原理？
+
+下面的示例描述了使用 FLoC 选择广告时的不同角色。
+
+- 此示例中的**广告商**（支付广告费用的公司）是一家在线鞋类零售商：<br> **<u>shoestore.example</u>**
+
+- 示例中的**发布商**（销售广告空间的网站）是一个新闻网站：<br> **<u>dailynews.example</u>**
+
+- **广告技术平台**（提供广告投放软件和工具）是：<br> **<u>adnetwork.example</u>**
+
+{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/wnJ1fSECf5STngywgE7V.png", alt="该图表分步显示使用 FLoC 选择和投放广告时的不同角色：FLoC 服务、浏览器、广告商、发布商（观察群组）、广告技术、发布商（展示广告）", width="800", height="359" %}
+
+在此示例中，我们将用户称为 **Yoshi** 和 **Alex**。最初，他们的浏览器都属于同一个群组 1354。
+
+{% Aside %} 这里，我们将用户称为 Yoshi 和 Alex，但这仅用于示例目的。FLoC 不会向广告商、发布商或广告技术平台透露姓名和个人身份。
+
+不要将群组视为一群人，而是将其视为一组浏览活动。{% endAside %}
+
+### 1. FLoC 服务
+
+1. 浏览器使用的 FLoC 服务创建了一个包含数千个“群组”的数学模型，每个群组将对应于数千个具有相似的近期浏览历史记录的 Web 浏览器。[下方](#floc-server)给出了此机制的更多相关信息。
+2. 每个群组都被指定一个编号。
+
+### 2. 浏览器
+
+1. Yoshi 的浏览器从 FLoC 服务中获取描述 FLoC 模型的数据。
+2. Yoshi 的浏览器[使用 FLoC 模型的算法](#floc-algorithm)来计算哪个群组最能对应于自己的浏览历史记录，从而得出所属的群组。在此示例中，将是群组 1354。请注意，Yoshi 的浏览器不与 FLoC 服务共享任何数据。
+3. 同样，Alex 的浏览器会计算其群组 ID。Alex 的浏览历史记录与 Yoshi 的不同，但非常相似，以至于他们的浏览器都属于群组 1354。
+
+### 3. 广告商：<span style="font-weight:normal">shoestore.example</span>
+
+1. Yoshi 访问 <u>shoestore.example</u>。
+2. 该网站向 Yoshi 的浏览器询问其群组：1354。
+3. Yoshi 浏览登山靴。
+4. 该网站记录了来自群组 1354 的一个浏览器对登山靴表现出兴趣。
+5. 该网站后来记录了群组 1354 以及其他群组对其产品的额外兴趣。
+6. 该网站定期汇总有关群组和产品兴趣的信息，并将这些信息与其广告技术平台 <u>adnetwork.example</u> 共享。
+
+现在轮到 Alex 了。
+
+### 4. 发布商：<span style="font-weight:normal">dailynews.example</span>
+
+1. Alex 访问 <u>dailynews.example</u>。
+2. 该网站向 Alex 的浏览器询问其群组。
+3. 该网站随后向其广告技术平台 <u>adnetwork.example</u> 发出广告请求，其中包括 Alex 的浏览器的群组：1354。
+
+### 5. 广告技术平台：<span style="font-weight:normal">adnetwork.example</span>
+
+1. <u>adnetwork.example</u> 可以将来自发布商 <u>dailynews.example</u> 和广告商 <u>shoestore.example</u> 的数据结合在一起，来选择适合 Alex 的广告：
+
+- Alex 的浏览器的群组 (1354) 由 <u>dailynews.example</u> 提供。
+- 有关群组和产品兴趣的信息来自 <u>shoestore.example</u>：“来自群组 1354 的浏览器可能对登山靴感兴趣。”
+
+1. <u>adnetwork.example</u> 选择适合 Alex 的广告：<u>shoestore.example</u> 上的登山靴广告。
+2. <u>dailynews.example</u> 显示广告 🥾。
+
+{% Aside %} 当前的广告选择方法依赖于跟踪 cookie 和设备指纹等技术，广告商等第三方使用这些技术来跟踪个人浏览行为。
+
+使用 FLoC，浏览器**不会**将其浏览历史记录与 FLoC 服务或任何其他人共享。用户设备上的浏览器计算出它属于哪个群组。用户的浏览历史记录永远不会离开设备。{% endAside %}
+
+## 谁运行用于创建 FLoC 模型的后端服务？
+
+每个浏览器供应商都需要自行选择如何将浏览器划分到不同的群组。Chrome 运行自己的 FLoC 服务；其他浏览器可能选择使用不同的聚类方法来实现 FLoC，并运行各自的服务来执行此操作。
+
+## FLoC 服务如何使浏览器计算出其群组？{: #floc-server }
+
+1. 浏览器使用的 FLoC 服务会创建一个多维数学模型来表示所有潜在的 Web 浏览历史记录。我们将这个模型称为“群组空间”。
+2. 服务将该空间划分为数千个段。每个段代表数千个相似的浏览历史记录。这些分组不基于对任何实际浏览历史记录的了解，只是基于在“群组空间”中选择随机中心或用随机线切割空间。
+3. 每个段都被指定一个群组编号。
+4. Web 浏览器从其 FLoC 服务中获取描述“群组空间”的数据。
+5. 当用户在网上浏览时，其浏览器会[使用一种算法](#floc-algorithm)来定期计算“群组空间”中最能与其浏览历史记录对应的区域。
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/32k5jByqLrgwSMwb9mqo.png", alt="由 FLoC 服务器创建的“浏览历史记录空间”图表，显示多个段，每个段都有一个群组编号。", width="400", height="359" %} <figcaption>FLoC 服务将“群组空间”划分为数千个段（这里只显示几个）。</figcaption></figure>
+
+{% Aside %} 在此过程中，用户的浏览历史记录不会与 FLoC 服务或任何第三方共享。浏览器的群组由浏览器在用户的设备上计算。FLoC 服务不会获取或存储任何用户数据。{% endAside %}
+
+## 浏览器的群组可以更改吗？
+
+*可以*！浏览器的群组一定会发生变化！您可能不会每周访问相同的网站，浏览器的群组会反映这一点。
+
+一个群组代表一组浏览活动，而不是一群人。群组的活动特征通常是始终不变的，并且群组对于广告选择很有用，因为它们将相似的近期浏览行为分组在一起。个人的浏览器会随着他们浏览行为的变化而进入或离开某个群组。最初，我们预计浏览器每 7 天重新计算一次其群组。
+
+在上面的例子中，Yoshi 和 Alex 的浏览器的群组都是 1354。将来，如果 Yoshi 和 Alex 的兴趣发生变化，他们的浏览器可能会移至不同的群组。在下面的示例中，Yoshi 的浏览器移至群组 1101，Alex 的浏览器移至群组 1378。其他人的浏览器会随着浏览兴趣的变化而进入或离开群组。
+
+<figure style="text-align: center">{% Img src="image/80mq7dk16vVEg8BBhsVe42n6zn82/LMkb62V3iJTqkOrFACnM.png", alt="由 FLoC 服务器创建的“浏览历史记录空间”图表，显示多个段，每个段都有一个群组编号。该图表显示，随着时间的推移，属于用户 Yoshi 和 Alex 的浏览器根据他们的浏览兴趣的变化从一个群组移至另一个群组。", width="800", height="533" %} <figcaption>Yoshi 和 Alex 的兴趣发生变化时，他们的浏览器群组可能也会变化。</figcaption></figure>
+
+{% Aside %} 群组定义了一组浏览活动，而不是一群人。浏览器会随着其活动的变化而进入和离开群组。{% endAside %}
+
+## 浏览器如何计算出其群组？{: #floc-algorithm }
+
+如上所述，用户的浏览器从其 FLoC 服务中获取描述群组数学模型的数据：一个多维空间，表示所有用户的浏览活动。浏览器随后使用一种算法来计算出该“群组空间”的哪个区域（即，哪个群组）与它最近的浏览行为最匹配。
+
+## FLoC 如何计算出正确的群组规模？
+
+每个群组将包含数千个浏览器。
+
+较小的群组规模可能对个性化广告更有用，但不太可能停止用户跟踪，反之亦然。将浏览器分配给群组的机制需要在隐私和实用性之间做出权衡。隐私沙盒使用 [k-anonymity](https://en.wikipedia.org/wiki/K-anonymity) 来允许用户“隐藏在人群中”。如果一个群组被至少 k 个用户共享，则该群组为 k-anonymous。k 值越大，群组的隐私保护程度越高。
+
+## FLoC 可以用于根据敏感类别对人群进行分组吗？
+
+用于构造 FLoC 群组模型的聚类算法设计为评估群组是否可能与敏感类别相关，而不会了解类别为何敏感。可能会披露种族、性别或病史等敏感类别的群组将被阻止。换句话说，在计算群组时，浏览器只会在不披露敏感类别的群组之间进行选择。
+
+## FLoC 只是另一种在线对人群分类的方式吗？
+
+使用 FLoC 时，用户的浏览器将与数千个其他用户的浏览器属于数千个群组中的一个。与第三方 cookie 和其他目标机制不同，FLoC 只披露用户浏览器所在的群组，而不是个人用户 ID。其他人无法通过它来区分群组中的个人。此外，用于计算浏览器群组的浏览活动信息保存在浏览器或设备本地，不会上传到其他地方。浏览器可以进一步利用其他匿名化方法，例如[差分隐私](https://en.wikipedia.org/wiki/Differential_privacy)。
+
+## 网站是否必须参与并共享信息？
+
+网站将能够选择加入或退出 FLoC，因此有关敏感主题的网站将能够阻止对网站的访问被包含在 FLoC 计算中。作为额外的保护，FLoC 服务的分析将评估群组是否可能披露有关用户的敏感信息，而不会了解该群组为何敏感。如果一个群组代表的访问敏感类别网站的人数多于典型人数，则整个群组将被删除。负面财务状况和心理健康属于该分析覆盖的敏感类别。
+
+网站可以通过为页面设置 [Permissions-Policy](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/) 标题 `interest-cohort=()` 来[从 FLoC 计算中排除该页面](https://developer.chrome.com/docs/privacy-sandbox/permissions-policy/)。对于尚未排除的页面，如果在页面上使用 `document.interestCohort()`，则页面访问将包含在浏览器的 FLoC 计算中。在当前 [FLoC 原始试验](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)期间，如果 Chrome 检测到页面[加载广告或与广告相关的资源](https://github.com/WICG/floc/issues/82)，也会将该页面包含在计算中。（[Chromium 中的广告标记](https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md)解释了 Chrome 的广告检测机制的工作原理。）
+
+私有 IP 地址提供的页面（例如 Intranet 页面）不会成为 FLoC 计算的一部分。
+
+## FLoC JavaScript API 如何工作？
+
+{% Aside %} 在 Chrome 89 到 91 中运行的 FLoC 初始版本的原始试验[现已关闭](https://developer.chrome.com/origintrials/#/view_trial/213920982300098561)。{% endAside %}
+
+FLoC API 非常简单：只是一个返回 promise 的方法，该 promise 解析为提供群组 `id` 和 `version` 的对象：
+
+```javascript
+const { id, version } = await document.interestCohort();
+console.log('FLoC ID:', id);
+console.log('FLoC version:', version);
+```
+
+提供的群组数据如下所示：
+
+```js
+{
+  id: "14159",
+  version: "chrome.2.1"
+}
+```
+
+`version` 值让使用 FLoC 的网站可以知道群组 ID 引用的浏览器和 FLoC 模型。如下文所述， `document.interestCohort()` 返回的 promise 将拒绝未被授予 `interest-cohort` 权限的所有框架。
+
+## 网站可以选择不包含在 FLoC 计算中吗？
+
+网站可以通过 `interest-cohort` 权限策略来声明它不希望包含在用于群组计算的用户网站列表中。默认情况下，该策略为 `allow`。`document.interestCohort()` 返回的 promise 将拒绝未被授予 `interest-cohort` 权限的所有框架。如果主框架没有 `interest-cohort` 权限，那么页面访问不会包含在兴趣群组计算中。
+
+例如，网站可以通过发送以下 HTTP 响应标头来选择退出所有 FLoC 群组计算：
+
+```text
+  Permissions-Policy: interest-cohort=()
+```
+
+## 用户能否让网站停止获取其浏览器的 FLoC 群组？
+
+如果用户在 `chrome://settings/privacySandbox` 中禁用隐私沙盒，浏览器在被通过 JavaScript 询问时将不会提供用户的群组：`document.interestCohort()` 返回的 promise 将拒绝。
+
+## 如何提出建议或提供反馈？
+
+如果您对 API 有意见，请在 [FLoC Explainer](https://github.com/WICG/floc/issues/new) 存储库[上创建问题](https://github.com/WICG/floc)。
+
+## 了解更多
+
+- [深入了解隐私沙盒](/digging-into-the-privacy-sandbox/)
+- [FLoC Explainer](https://github.com/WICG/floc)
+- [FLoC 原始试验和聚类](https://sites.google.com/a/chromium.org/dev/Home/chromium-privacy/privacy-sandbox/floc)
+- [FLoC API 的群组算法评估](https://github.com/google/ads-privacy/blob/master/proposals/FLoC/README.md)
+
+---
+
+照片由 [Unsplash](https://unsplash.com/photos/I5AYxsxSuVA) 上的 [Rhys Kentish](https://unsplash.com/@rhyskentish) 提供。
diff --git a/src/site/content/zh/blog/how-to-file-a-good-bug/index.md b/src/site/content/zh/blog/how-to-file-a-good-bug/index.md
new file mode 100644
index 00000000000..d79fba1da13
--- /dev/null
+++ b/src/site/content/zh/blog/how-to-file-a-good-bug/index.md
@@ -0,0 +1,136 @@
+---
+layout: post
+title: 如何出色的提交浏览器错误
+subhead: 将您在浏览器中发现的问题报告给浏览器供应商是帮助网络平台变得更好的一个重要组成部分！
+authors:
+  - robertnyman
+  - petelepage
+date: 2020-06-15
+updated: 2020-06-15
+description: 将您在特定设备或平台上使用浏览器时发现的问题报告给浏览器供应商是帮助网络平台变得更好的重要组成部分！
+tags:
+  - blog
+---
+
+出色地提交错误并不难，但需要一些工作。目标是轻松找到出错的地方，找到根本原因，最重要的是找到修复它的方法。容易重现和具有明确预期行为的错误往往会取得修复方面的快速进展。
+
+## 验证错误
+
+第一步是弄清楚“正确”的行为应该是什么。
+
+### 什么是正确的行为？
+
+在[MDN](https://developer.mozilla.org/) 上查看相关的 API 文档，或尝试查找相关规范。此信息可帮助您确定实际出错的 API、出错的位置以及预期的行为。
+
+### 错误在不同的浏览器中发生吗？
+
+浏览器之间不同的行为通常作为互操作性问题优先考虑，特别是当包含错误的浏览器是旧版的浏览器时。尝试在最新版的 Chrome、Firefox、Safari 和 Edge 上进行测试，可使用 [BrowserStack](https://www.browserstack.com/)等工具。
+
+如果可能，请检查页面是否因用户代理探查而故意表现不同。在 Chrome DevTools 中，尝试[将 `User-Agent` 字符串设置为其他浏览器](https://developer.chrome.com/docs/devtools/device-mode/override-user-agent/)。
+
+### 错误在最近的版本中发生吗？
+
+错误在过去没有发生过，只是在最近的浏览器版本中发生？这种“回归”可以更快地采取行动，特别是如果您提供有效的版本号和失败的版本号。[BrowserStack](https://www.browserstack.com/) 等工具可以轻松检查旧的浏览器版本，而[bisect-builds 工具](https://www.chromium.org/developers/bisect-builds-py)（用于 Chromium）可以非常有效地搜索更改。
+
+如果问题是回归问题并且可以重现，则通常可以快速找到并修复根本原因。
+
+### 其他人是否看到了同样的问题？
+
+如果您遇到问题，其他开发人员也很有可能遇到问题。首先，尝试在 [Stack Overflow](http://stackoverflow.com/) 上搜索相关错误。这可能会帮助您将抽象问题转化为特定的错误 API，并且可能会帮助您找到短期解决方法，直到修复错误。
+
+## 相关错误之前有被报告过吗？
+
+一旦您了解了错误是什么，就可以通过搜索浏览器错误数据库来检查是否已经有人报告过相关错误。
+
+- 基于 Chromium 的浏览器：[https://crbug.com](https://crbug.com/)
+- 火狐：[https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- 基于 Safari 和 WebKit 的浏览器：[https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+如果您发现描述该问题的现有错误，请为该错误加星标、收藏或评论，从而贡献您的支持。另外，在许多站点上，您可以将自己添加到 CC 列表中，这样在错误得到更改时您会获取更新信息。
+
+如果您决定对相关错误发表评论，请提供有关错误如何影响您网站的信息。避免添加“+1”样式的评论，因为错误跟踪器通常会为每个评论发送电子邮件。
+
+## 报告错误
+
+如果相关错误之前没有被报告过，请将其告诉浏览器供应商。
+
+### 创建最小规模的测试用例 {: #minified-test-case }
+
+Mozilla 有一篇关于[如何创建最小规模测试用例](https://developer.mozilla.org/docs/Mozilla/QA/Reducing_testcases)的出色文章。长话短说，虽然对问题进行描述是不错的开始，但提供有关出现问题的错误的演示就更棒了。为了最大限度地提高快速修复进展的机会，示例应该包含演示问题所需的最少代码。最少代码示例是您提高修复错误几率的首要举措。
+
+以下是最小化测试用例的一些技巧：
+
+- 下载网页，添加 [`<base href="https://original.url">`](https://developer.mozilla.org/docs/Web/HTML/Element/base) 并验证本地是否存在该错误。如果 URL 使用 HTTPS，这可能需要实时 HTTPS 服务器。
+- 在尽可能多的浏览器的最新版本上测试本地文件。
+- 尝试将所有内容压缩为 1 个文件。
+- 删除代码（从您知道的那些不必要的东西开始）直到错误消失。
+- 使用版本控制，以便您可以保存工作并撤消错误操作。
+
+#### 托管一个缩小的测试用例
+
+如果您正在寻找良好的位置用来托管您的缩小测试用例，有几个好位置可供选择：
+
+- [Glitch](https://glitch.com)
+- [JSBin](https://jsbin.com)
+- [JSFiddle](https://jsfiddle.net)
+- [CodePen](https://codepen.io)
+
+请注意，其中一些站点在 iframe 中显示内容，这可能会导致功能或错误的行为不同。
+
+## 提交您的问题
+
+一旦您获得了最小化的测试用例，您就可以准备提交该错误。前往正确的错误跟踪站点，并创建一个新问题。
+
+- 基于 Chromium 的浏览器 - [https://crbug.com/new](https://crbug.com/new)
+- 火狐 - [https://bugzilla.mozilla.org/](https://bugzilla.mozilla.org/)
+- 基于 Safari 和 WebKit 的浏览器 - [https://bugs.webkit.org/](https://bugs.webkit.org/)
+
+### 提供清晰的描述和重现问题所需的步骤
+
+首先，提供清晰的描述，以帮助工程师快速了解问题所在并帮助对问题进行分类。
+
+```text
+When installing a PWA using the `beforeinstallprompt.prompt()`, the
+`appinstalled` event fires before the call to `prompt()` resolves.
+```
+
+接下来，提供重现问题所需的详细步骤。这时您的[缩小测试用例](#minified-test-case)将配上用场。
+
+```text
+What steps will reproduce the problem?
+1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
+   console tab.
+2. Click the Install button in the page, you might need to interact with
+   the page a bit before it becomes enabled.
+3. Click Install on the browser modal install confirmation.
+```
+
+最后，描述*实际的*和*预期的*结果。
+
+```text
+What is the actual result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL: Success (logged when `appinstalled` event fired)
+2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+
+What is the expected result? In the console:
+0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
+1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
+   (logged when beforeinstallprompt.prompt()` resolves)
+2. INSTALL: Success (logged when `appinstalled` event fired)
+```
+
+有关更多信息，请查看 MDN 上的[错误报告编写指南。](https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines)
+
+#### 额外好处：添加问题的屏幕截图或截屏视频
+
+虽然不是必需的，但在某些情况下，添加问题的屏幕截图或截屏视频会很有帮助。这在错误可能需要一些步骤来重现时特别有用。能够通过截屏视频或屏幕截图看到所发生的事情通常会很有帮助。
+
+### 包括环境细节
+
+有些错误只能在某些操作系统上重现，或者只能在特定类型的显示器上重现（例如，低 dpi 或高 dpi）。请务必包含您使用的任何测试环境的详细信息。
+
+### 提交错误
+
+最后，提交错误。之后，记得关注您的电子邮件，以获取对错误的任何回复。通常在调查期间和修复错误时，工程师可能有其他问题，或者如果他们难以重现问题，他们可能会联系您。
diff --git a/src/site/content/zh/blog/how-to-use-local-https/index.md b/src/site/content/zh/blog/how-to-use-local-https/index.md
new file mode 100644
index 00000000000..409369f62ae
--- /dev/null
+++ b/src/site/content/zh/blog/how-to-use-local-https/index.md
@@ -0,0 +1,270 @@
+---
+title: 如何使用 HTTPS 进行本地开发
+subhead: 有时，您需要使用 HTTPS 运行本地开发网站。本文介绍了安全快速地执行此操作的工具和技巧。
+authors:
+  - maudn
+date: 2021-01-25
+hero: image/admin/ZvW6VM0GEScldWHBvXJ4.jpg
+thumbnail: image/admin/OG8YksgOnzGfnurzncWO.jpg
+tags:
+  - blog
+  - security
+---
+
+{% Aside 'caution' %} 在大多数情况下，`http://localhost` 就可以满足您的需求：在浏览器中，它的行为与 HTTPS 🔒 非常类似。因此，部分无法在部署的 HTTP 网站上运行的 API 可以在 `http://localhost` 上运行。
+
+这意味着您只需要**在特殊情况下才**需要在本地使用 HTTPS（请参阅[何时使用 HTTPS 进行本地开发](/when-to-use-local-https)），例如自定义主机名或跨浏览器的安全 cookie。如果您有这种需求，请继续阅读！ {% endAside %}
+
+*在本文中，关于 `localhost` 的声明也适用于 `127.0.0.1` 和 `[::1]` ，因为它们都描述了本地计算机地址，也称为“环回地址”。此外，为简单起见，未指定端口号。**因此，请将 `http://localhost`  解读为 `http://localhost:{PORT}` 或 `http://127.0.0.1:{PORT}`。*
+
+如果您在生产网站使用了 HTTPS，并希望本地开发网站的行为**可以接近 HTTPS 网站**（如果您的生产网站还没有使用 HTTPS，请[优先切换到 HTTPS](/why-https-matters/) ）。在大多数情况下，您可以认为 `http://localhost` 的行为**类似于 HTTPS 网站**。但[在某些情况下](/when-to-use-local-https)，您需要使用 HTTPS 在本地运行网站。现在来看看如何做到这一点。
+
+**⏩ 如果您想查看快速说明，或是之前看到过这里？请跳转至[备忘单](#using-mkcert-cheatsheet)。**
+
+## 使用 mkcert 为本地网站开启 HTTPS（推荐）
+
+要为本地开发网站开启 HTTPS 并访问 `https://localhost` 或 `https://mysite.example`（自定义主机名），您需要 [TLS 证书](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate)。但并非任何证书都会被浏览器接受：证书需要由您的浏览器信任的实体**签名**，这些实体称之为**[可信证书颁发机构 (CA)](https://en.wikipedia.org/wiki/Certificate_authority)** 。
+
+您需要创建一个证书，并使用受您的设备和浏览器**本地信任的 CA**对其进行签名。 您可以使用工具 [mkcert](https://github.com/FiloSottile/mkcert) 通过几个命令来实现这个目的。下面介绍了它的工作原理：
+
+- 如果您使用 HTTPS 在浏览器中打开本地运行的网站，浏览器将检查本地开发服务器的证书。
+- 在看到证书已由 mkcert 生成的证书颁发机构签名后，浏览器会检查它是否已注册为受信任的证书颁发机构。
+- mkcert 已被列为受信任的颁发机构，所以浏览器会信任该证书并创建 HTTPS 连接。
+
+<figure>{% Img src="image/admin/3kdjci7NORnOw54fMia9.jpg", alt="mkcert 工作原理图。", width="800", height="787" %}<figcaption> mkcert 工作原理图。</figcaption></figure>
+
+mkcert（和类似工具）具备下列几种优势：
+
+- mkcert 专门用于创建**与浏览器认为有效相兼容的证书**。它会保持更新，来满足需求和最佳实践。因此您无需运行具备复杂配置或参数的 mkcert 命令，就可以生成正确的证书！
+- mkcert 是跨平台的工具。团队中的任何人都可以使用。
+
+我们推荐使用 mkcert 为本地开发创建 TLS 证书。您也可以查看[其他选择](#running-your-site-locally-with-https-other-options)。
+
+许多操作系统可能会提供用于生成证书的库，例如 [openssl](https://www.openssl.org/) 。与 mkcert 和类似工具不同，此类库可能无法始终生成正确的证书，或可能需要运行复杂的命令，并且不一定能够跨平台使用。
+
+{% Aside 'gotchas' %}我们在这篇文章中感兴趣的 mkcert 是[这个](https://github.com/FiloSottile/mkcert)，而不是[这个](https://www.npmjs.com/package/mkcert)。 {% endAside %}
+
+### 警告
+
+{% Aside 'caution' %}
+
+- 运行`mkcert -install`时，切勿导出或分享由 mkcert 自动创建的 `rootCA-key.pem` 。**获得此文件的攻击者可以对您可能正在访问的任何网站进行路径攻击**。他们可以拦截从您的电脑到任何网站（银行、医保供应商或社交网络）的安全请求。如果您需要知道 `rootCA-key.pem` 的位置以确保其安全，请运行 `mkcert -CAROOT` 。
+- 仅将 mkcert 用于**开发目的**，并且永远不要要求最终用户运行 mkcert 命令。
+- 开发团队：所有团队成员都应该**单独**安装和运行 mkcert（而不是存储和共享 CA 和证书）。
+
+{% endAside %}
+
+### 设置
+
+1. 安装 mkcert（仅一次）。
+
+    按照[操作说明](https://github.com/FiloSottile/mkcert#installation)在操作系统上安装 mkcert。例如，在 macOS 上：
+
+    ```bash
+    brew install mkcert
+    brew install nss # if you use Firefox
+    ```
+
+2. 将 mkcert 添加到本地根 CA。
+
+    在终端运行以下命令：
+
+    ```bash
+    mkcert -install
+    ```
+
+    这会生成本地证书颁发机构 (CA)。mkcert 生成的本地 CA 仅在您的设备上**本地**受信。
+
+3. 为网站生成一个由 mkcert 签名的证书。
+
+    在终端中，导航到网站的根目录或用来保存证书的任何目录。
+
+    然后运行：
+
+    ```bash
+    mkcert localhost
+    ```
+
+    如果您的自定义主机名是 `mysite.example`，请运行：
+
+    ```bash
+    mkcert mysite.example
+    ```
+
+    上面的命令执行了两个操作：
+
+    - 为您指定的主机名生成证书
+    - 让 mkcert（您在步骤 2 中添加为本地 CA）签署此证书。
+
+    现在证书已准备就绪，并且已由您的浏览器在本地信任的证书颁发机构签名。大部分步骤已经完成，但您的服务器现在还不了解这个证书！
+
+4. 配置服务器。
+
+    您现在需要告诉服务器使用 HTTPS（因为默认情况下开发服务器倾向使用 HTTP）并使用您刚刚创建的 TLS 证书。
+
+    具体的操作取决于您的服务器。下面列出了几个例子：
+
+    **👩🏻‍💻 使用节点：**
+
+    `server.js` （替换`{PATH/TO/CERTIFICATE...}`和`{PORT}` ）：
+
+    ```javascript
+    const https = require('https');
+    const fs = require('fs');
+    const options = {
+      key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
+      cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
+    };
+    https
+      .createServer(options, function (req, res) {
+        // server code
+      })
+      .listen({PORT});
+    ```
+
+    **👩🏻‍💻 使用 [http-server](https://www.npmjs.com/package/http-server)：**
+
+    按如下方式启动服务器（替换`{PATH/TO/CERTIFICATE...}` ）：
+
+    ```bash
+    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
+    ```
+
+    `-S` 会用 HTTPS 运行服务器，`-C` 用来设置证书，`-K` 用来设置密钥。
+
+    **👩🏻‍💻 使用 React 开发服务器：**
+
+    按下列方式编辑 `package.json` ，并替换`{PATH/TO/CERTIFICATE...}` ：
+
+    ```json
+    "scripts": {
+    "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
+    ```
+
+    例如，如果您按照下列操作在网站根目录中为 `localhost` 创建了证书：
+
+    ```text
+    |-- my-react-app
+        |-- package.json
+        |-- localhost.pem
+        |-- localhost-key.pem
+        |--...
+    ```
+
+    那么 `start` 脚本应该是这样的：
+
+    ```json
+    "scripts": {
+        "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
+    ```
+
+    **👩🏻‍💻 其他例子：**
+
+    - [Angular 开发服务器](https://angular.io/cli/serve)
+    - [Python](https://blog.anvileight.com/posts/simple-python-http-server/)
+
+5. ✨全部搞定！在浏览器中打开 `https://localhost` 或`https://mysite.example` ：这时就在使用 HTTPS 在本地运行您的网站。您不会看到任何浏览器警告，因为浏览器已将 mkcert 认作是本地证书颁发机构。
+
+{% Aside %}服务器可以使用不同的 HTTPS 端口。 {% endAside %}
+
+### 使用 mkcert：备忘单
+
+{% Details %} {% DetailsSummary %} mkcert 总结 {% endDetailsSummary %}
+
+要使用 HTTPS 运行本地开发网站：
+
+1. 设置 mkcert。
+
+    如果您还没有安装 mkcert，例如在 macOS 上：
+
+    ```bash
+    brew install mkcert
+
+    ```
+
+    查看 Windows 和 Linux 上的 [mkcert 安装](https://github.com/FiloSottile/mkcert#installation)说明。
+
+    然后，创建本地证书颁发机构：
+
+    ```bash
+    mkcert -install
+    ```
+
+2. 创建受信任的证书。
+
+    ```bash
+    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
+    ```
+
+    此命令会创建一个有效的证书（由 `mkcert` 自动签名）。
+
+3. 配置开发服务器来使用 HTTPS 和在步骤 2 中创建的证书。
+
+4. ✨全部搞定！您现在可以在浏览器中访问 `https://{YOUR HOSTNAME}`，并且不会收到任何警告了
+
+{% Aside 'caution' %}
+
+请仅用于**开发目的**，**切勿导出或分享** `rootCA-key.pem` 文件（如果您需要知道此文件的位置以确保其安全，请运行`mkcert -CAROOT` ）。
+
+{% endAside %}
+
+{% endDetails %}
+
+## 在本地网站开启 HTTPS：其他方法
+
+### 自签名证书
+
+您也可以不使用 mkcert 这样的本地证书颁发机构，而是**自己签署证书**。
+
+请注意这种方法的一些缺点：
+
+- 浏览器不信任您的证书颁发机构身份，因此会显示警告，您需要手动绕过。在 Chrome 中，您可以使用标志 `#allow-insecure-localhost` `localhost` 自动绕过此警告。这确实有些麻烦。
+- 如果您的网络环境不安全，此举会带来潜在风险。
+- 自签名证书的行为方式与受信任证书的行为方式不同。
+- 它不一定比使用 mkcert 这样的本地 CA 更方便或更快捷。
+- 如果您没有在浏览器上下文中使用此技术，则可能需要禁用服务器的证书验证。在生产中忘记重新启用它会带来潜在风险。
+
+<figure>{% Img src="image/admin/KxLz7mcUudiFwWBIdhH8.jpg", alt="使用自签名证书时浏览器显示的警告截图。", width="800", height="598" %}<figcaption>使用自签名证书时浏览器显示的警告。</figcaption></figure>
+
+{% Aside %}如果您没有指定任何证书，那么 [React](https://create-react-app.dev/docs/using-https-in-development/) 和 [Vue](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve) 的开发服务器 HTTPS 选项会在后台创建一个自签名证书。这样虽然很快捷，但您会收到浏览器警告，并遇到与上面列出的与自签名证书相关的其他问题。幸运的是，您可以使用前端框架的内置 HTTPS 选项**并**指定由 mkcert 或类似工具创建的本地可信证书。请前往[React 与 mkcert 示例](/#setup:~:text=a%20React%20development%20server)查看如何执行此操作。 {% endAside %}
+
+{% Details %} {% DetailsSummary %} 为什么浏览器不信任自签名证书？ {% endDetailsSummary %}
+
+如果您使用 HTTPS 在浏览器中打开本地运行的网站，浏览器将检查本地开发服务器的证书。当它看到证书由您签名时，它会检查您是否已注册为受信任的证书颁发机构。因为您不是，所以浏览器不能信任此证书；它会警告您的连接不安全。您可以自行承担风险。如果选择这样，那么将创建 HTTPS 连接。
+
+<figure>{% Img src="image/admin/V2SAcIzuofqzUuestOOX.jpg", alt="为什么浏览器不信任自签名证书：示意图。", width="800", height="833" %}<figcaption>为什么浏览器不信任自签名证书。</figcaption></figure>
+
+{% endDetails %}
+
+### 由常规证书颁发机构签署的证书
+
+您还可以找到基于由实际证书颁发机构（而不是本地机构）签署证书的技术。
+
+如果您在考虑使用这些技术，请记住以下几点：
+
+- 与 mkcert 这样的本地 CA 技术相比，您需要投入更多的设置工作。
+- 您需要使用由自己控制且有效的域名。这表示实际的证书颁发机构**无法**用于：
+    - `localhost` 和其他[保留](https://www.iana.org/assignments/special-use-domain-names/special-use-domain-names.xhtml)域名，例如 `example` 或 `test` 。
+    - 您无法控制的任何域名。
+    - 无效的顶级域。请参阅[有效顶级域](https://www.iana.org/domains/root/db)的列表。
+
+### 反向代理
+
+使用 HTTPS 访问本地运行网站的另一种方法是使用[反向代理](https://en.wikipedia.org/wiki/Reverse_proxy)，例如 [ngrok](https://ngrok.com/) 。
+
+需要考虑的几点：
+
+- 一旦您与任何用户分享了使用反向代理创建的 URL，他们都可以访问您的本地开发网站。这在向客户演示您的项目时非常方便！但如果您的项目很敏感，这可能是一个缺点。
+- 您可能需要考虑定价。
+- 浏览器新引入的[安全措施](/cors-rfc1918-feedback/)可能会影响这些工具的表现。
+
+### 标志（不推荐）
+
+如果您使用了 `mysite.example` 这样的自定义主机名，那么可以在 Chrome 中使用标志来强制将 `mysite.example` 认作是安全的。**请避免使用这种方法**，因为：
+
+- 您需要 100% 确定`mysite.example`始终解析为本地地址，否则可能会泄露生产凭据。
+- 此方法不支持跨浏览器调试 🙀
+
+*非常感谢所有审阅者和贡献者的贡献和反馈，特别感谢 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood。 🙌*
+
+*首图作者：[在 Unsplash](https://unsplash.com/photos/pbxwxwfI0B4) 上的 [@anandu](https://unsplash.com/@anandu)，已编辑。*
diff --git a/src/site/content/zh/blog/javascript-this/index.md b/src/site/content/zh/blog/javascript-this/index.md
new file mode 100644
index 00000000000..d34cf6d9053
--- /dev/null
+++ b/src/site/content/zh/blog/javascript-this/index.md
@@ -0,0 +1,361 @@
+---
+title: JavaScript：这是什么意思？
+subhead: 在 JavaScript 中找出 `this` 的值可能很难，这里介绍了方法……
+description: 在 JavaScript 中找出 `this` 的值可能很难，这里介绍了方法……
+authors:
+  - jakearchibald
+date: 2021-03-08
+hero: image/CZmpGM8Eo1dFe0KNhEO9SGO8Ok23/cePCOGeXNFT6WCy85gb4.png
+alt: "this \U0001F914"
+tags:
+  - blog
+  - javascript
+---
+
+JavaScript 的`this`产生了许多笑话，因为它非常复杂。但是，我已经看到开发人员做了更复杂和特定领域的事来避免处理`this` 。如果您不确定`this`是什么，希望本文会对您有所帮助。这是我的`this`指南。
+
+我会从最具体的情况开始讲起，以最不具体的情况结束。这篇文章有点像一个大大的`if (…) … else if () … else if (…) …` ，所以您可以直接进入与您要了解的代码相匹配的第一节。
+
+1. [如果函数定义为箭头函数](#arrow-functions)
+2. [否则，如果使用`new`](#new)调用函数/类
+3. [否则，如果函数有一个“绑定”的`this`值](#bound)
+4. [否则，如果`this`是在调用时设置的](#call-apply)
+5. 否则，如果函数是通过父对象 (<code>parent.func()</code>) 调用的： {: #object-member }
+6. [否则，如果函数或父作用域处于严格模式](#strict)
+7. [否则](#otherwise)
+
+## 如果函数定义为箭头函数：{: #arrow-functions }
+
+```js
+const arrowFunction = () => {
+  console.log(this);
+};
+```
+
+在这种情况下，`this`的值*始终*与父作用域的`this`相同：
+
+```js
+const outerThis = this;
+
+const arrowFunction = () => {
+  // Always logs `true`:
+  console.log(this === outerThis);
+};
+```
+
+箭头函数好就好在`this`的内部值无法更改，它*始终*与外部`this`相同。
+
+### 其他示例
+
+使用箭头函数时，*不能*通过[`bind`](#bound)更改 `this`的值：
+
+```js
+// Logs `true` - bound `this` value is ignored:
+arrowFunction.bind({foo: 'bar'})();
+```
+
+使用箭头函数时，*不能*通过[`call`或`apply`](#call-apply)更改`this`的值：
+
+```js
+// Logs `true` - called `this` value is ignored:
+arrowFunction.call({foo: 'bar'});
+// Logs `true` - applied `this` value is ignored:
+arrowFunction.apply({foo: 'bar'});
+```
+
+使用箭头函数时，*不能*通过将函数作为另一个对象的成员调用来更改`this`的值：
+
+```js
+const obj = {arrowFunction};
+// Logs `true` - parent object is ignored:
+obj.arrowFunction();
+```
+
+使用对于箭头函数时，*不能*通过将函数作为构造函数调用来更改`this`的值：
+
+```js
+// TypeError: arrowFunction is not a constructor
+new arrowFunction();
+```
+
+### “绑定”实例方法
+
+使用实例方法时，如果您想确保`this`始终指向类实例，最好的方法是使用箭头函数和[类字段](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/Public_class_fields)：
+
+```js
+class Whatever {
+  someMethod = () => {
+    // Always the instance of Whatever:
+    console.log(this);
+  };
+}
+```
+
+当在组件（例如 React 组件或 Web 组件）中使用实例方法作为事件侦听器时，此模式非常有用。
+
+上面的内容可能会让人觉得它打破了“`this`与父作用域的`this`相同”规则，但如果您将类字段视为在构造函数中设置内容的语法糖，这样就讲得通了：
+
+```js
+class Whatever {
+  someMethod = (() => {
+    const outerThis = this;
+    return () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  })();
+}
+
+// …is roughly equivalent to:
+
+class Whatever {
+  constructor() {
+    const outerThis = this;
+    this.someMethod = () => {
+      // Always logs `true`:
+      console.log(this === outerThis);
+    };
+  }
+}
+```
+
+替代模式涉及在构造函数中绑定现有函数，或在构造函数中分配函数。如果由于某种原因不能使用类字段，那么在构造函数中分配函数是一个合理的选择：
+
+```js
+class Whatever {
+  constructor() {
+    this.someMethod = () => {
+      // …
+    };
+  }
+}
+```
+
+## 否则，如果使用<code>new</code>调用函数/类 {: #new }
+
+```js
+new Whatever();
+```
+
+上面的代码会调用`Whatever`（或如果它是类的话，会调用它的构造函数），并将`this`设置为`Object.create(Whatever.prototype)`的结果。
+
+```js
+class MyClass {
+  constructor() {
+    console.log(
+      this.constructor === Object.create(MyClass.prototype).constructor,
+    );
+  }
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+对于旧式构造函数也是如此：
+
+```js
+function MyClass() {
+  console.log(
+    this.constructor === Object.create(MyClass.prototype).constructor,
+  );
+}
+
+// Logs `true`:
+new MyClass();
+```
+
+### 其他示例
+
+当使用`new`调用时，*无法*用[`bind`](#bound)改变`this`的值：
+
+```js
+const BoundMyClass = MyClass.bind({foo: 'bar'});
+// Logs `true` - bound `this` value is ignored:
+new BoundMyClass();
+```
+
+当使用`new`调用时，*不能*通过将函数作为另一个对象的成员调用来更改`this`的值：
+
+```js
+const obj = {MyClass};
+// Logs `true` - parent object is ignored:
+new obj.MyClass();
+```
+
+## 否则，如果函数有一个“绑定”的<code>this</code>值 {: #bound }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const boundObject = {hello: 'world'};
+const boundFunction = someFunction.bind(boundObject);
+```
+
+每次调用`boundFunction`时，它的`this`值将是传递给`bind` ( `boundObject` ) 的对象。
+
+```js
+// Logs `false`:
+console.log(someFunction() === boundObject);
+// Logs `true`:
+console.log(boundFunction() === boundObject);
+```
+
+{% Aside 'warning' %} 避免使用`bind`将函数绑定到它的外部`this` 。相反，使用[箭头函数](#arrow-functions)，因为它们通过函数生命让`this`更清晰，而不是在代码后面发生的事情。
+
+不要使用`bind`将`this`设置为与父对象无关的某个值；这通常是出乎意料的，这就是`this`遭人诟病的原因。考虑将值作为参数传递；它更明确，并且可与箭头函数一起使用。 {% endAside %}
+
+### 其他示例
+
+调用绑定函数时，*无法*通过[`call`或`apply`](#call-apply)更改`this`的值：
+
+```js
+// Logs `true` - called `this` value is ignored:
+console.log(boundFunction.call({foo: 'bar'}) === boundObject);
+// Logs `true` - applied `this` value is ignored:
+console.log(boundFunction.apply({foo: 'bar'}) === boundObject);
+```
+
+调用绑定函数时，*不能*通过将函数作为另一个对象的成员调用来更改`this`的值：
+
+```js
+const obj = {boundFunction};
+// Logs `true` - parent object is ignored:
+console.log(obj.boundFunction() === boundObject);
+```
+
+## 否则，如果`this`是在调用时设置的：{: #call-apply }
+
+```js
+function someFunction() {
+  return this;
+}
+
+const someObject = {hello: 'world'};
+
+// Logs `true`:
+console.log(someFunction.call(someObject) === someObject);
+// Logs `true`:
+console.log(someFunction.apply(someObject) === someObject);
+```
+
+`this`的值是传递给`call` / `apply`的对象。
+
+{% Aside 'warning' %}不要使用`call`/`apply` 将`this`设置为与父对象无关的某个值；这通常是出乎意料的，这就是`this`遭人诟病的原因。考虑将值作为参数传递；它更明确，并且可与箭头函数一起使用。 {% endAside %}
+
+不幸的是， `this`被诸如 DOM 事件侦听器之类的东西设置为其他一些值，并且使用它可能会导致难以理解的代码：
+
+{% Compare 'worse' %}
+
+```js
+element.addEventListener('click', function (event) {
+  // Logs `element`, since the DOM spec sets `this` to
+  // the element the handler is attached to.
+  console.log(this);
+});
+```
+
+{% endCompare %}
+
+我会避免在上述情况下使用`this`，而是用：
+
+{% Compare 'better' %}
+
+```js
+element.addEventListener('click', (event) => {
+  // Ideally, grab it from a parent scope:
+  console.log(element);
+  // But if you can't do that, get it from the event object:
+  console.log(event.currentTarget);
+});
+```
+
+{% endCompare %}
+
+## 否则，如果函数是通过父对象 (`parent.func()`) 调用的： {: #object-member }
+
+```js
+const obj = {
+  someMethod() {
+    return this;
+  },
+};
+
+// Logs `true`:
+console.log(obj.someMethod() === obj);
+```
+
+在这种情况下，函数作为`obj`的成员被调用，所以`this`会是`obj` 。这发生在调用时，所以如果在没有父对象的情况下调用函数，或者使用不同的父对象调用函数，链接就会断开：
+
+```js
+const {someMethod} = obj;
+// Logs `false`:
+console.log(someMethod() === obj);
+
+const anotherObj = {someMethod};
+// Logs `false`:
+console.log(anotherObj.someMethod() === obj);
+// Logs `true`:
+console.log(anotherObj.someMethod() === anotherObj);
+```
+
+`someMethod() === obj`是 false，因为`someMethod`*不是*作为`obj`的成员调用的。在尝试这样的事情时，您可能遇到过这个问题：
+
+```js
+const $ = document.querySelector;
+// TypeError: Illegal invocation
+const el = $('.some-element');
+```
+
+这会中断，因为`querySelector`的实现查看自己的`this`值并期望它是某种 DOM 节点，而上述代码中断了该连接。要正确实现上述目标：
+
+```js
+const $ = document.querySelector.bind(document);
+// Or:
+const $ = (...args) => document.querySelector(...args);
+```
+
+有趣的事实：并非所有的 API 都在内部使用`this`。如`console.log`这样的控制台方法已做过更改，从而避免引用`this`，因此不需要将`log`绑定到`console`。
+
+{% Aside 'warning' %}不要将函数移植到对象上，来将<code>this</code>设置为与父对象无关的某个值；这通常是出乎意料的，这就是<code>this</code>遭人诟病的原因。考虑将值作为参数传递；它更明确，并且可与箭头函数一起使用。 {% endAside %}
+
+## 否则，如果函数或父作用域处于严格模式：{: #strict }
+
+```js
+function someFunction() {
+  'use strict';
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === undefined);
+```
+
+在这种情况下，价值`this`没有定义。 如果父作用域处于[严格模式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode)（并且所有模块都处于严格模式），则函数中不需要`'use strict'`。
+
+{% Aside 'warning' %}不要依赖这个方法。我的意思是，有更简单的方法可以获得`undefined`值😀。 {% endAside %}
+
+## 否则：{: #otherwise }
+
+```js
+function someFunction() {
+  return this;
+}
+
+// Logs `true`:
+console.log(someFunction() === globalThis);
+```
+
+在这种情况下，`this`的值与`globalThis`相同。
+
+{% Aside %} 大多数人（包括我）都将`globalThis`称为全局对象，但这在技术上并不是完全正确的。这里是[Mathias Bynens 的详细介绍](https://mathiasbynens.be/notes/globalthis#terminology)，包括为什么将其称为`globalThis`而不是简单的`global` 。 {% endAside %}
+
+{% Aside 'warning' %} 避免使用`this`来引用全局对象（是的，我仍然这样称呼它）。相反，请使用更加明确的[`globalThis`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/globalThis) {% endAside %}
+
+## 大功告成！
+
+就是这样！这就是我知道的关于`this`的一切。有任何疑问？我漏掉了什么？请随时[给我发推文](https://twitter.com/jaffathecake)。
+
+感谢 [Mathias Bynens](https://twitter.com/mathias) 、[Ingvar Stepanyan](https://twitter.com/RReverser) 和 [Thomas Steiner](https://twitter.com/tomayac)的校对。
diff --git a/src/site/content/zh/blog/long-tasks-devtools/index.md b/src/site/content/zh/blog/long-tasks-devtools/index.md
new file mode 100644
index 00000000000..d44206b231a
--- /dev/null
+++ b/src/site/content/zh/blog/long-tasks-devtools/index.md
@@ -0,0 +1,55 @@
+---
+title: 长的 JavaScript 任务是否会延迟您的交互时间？
+subhead: 学习诊断阻止用户交互的耗时工作。
+authors:
+  - addyosmani
+date: 2019-05-29
+hero: image/admin/QvWXvBSXsRKtpGOcakb5.jpg
+alt: 一个沙子不断流出的沙漏
+description: 长任务会使主线程保持忙碌，延迟用户交互。Chrome DevTools 现在可以将长任务可视化，从而更容易查看要优化的任务。
+tags:
+  - blog
+  - performance
+---
+
+**长任务会使主线程保持忙碌，延迟用户交互。Chrome DevTools 现在可以将长任务可视化，从而更容易查看要优化的任务。**
+
+如果您使用 Lighthouse 来审计自己的页面，那么可能熟悉 [Time to Interactive](/tti/) ，这是一个表示用户何时可以与您的页面交互并获得响应的指标。但是您知道长 (JavaScript) 任务会导致 TTI 表现不佳吗？
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4XCzYI9gaUJDTTJu9JxH.png", alt="Lighthouse 报告中显示的 Time to Interactive", width="800", height="169" %}
+
+## 什么是长任务？
+
+[长任务](https://developer.mozilla.org/docs/Web/API/Long_Tasks_API)是指长时间独占主线程，导致界面卡顿的 JavaScript 代码。
+
+在加载网页时，长任务会占用主线程并使页面对用户输入无响应，即使它看起来已准备就绪。点击和轻按通常不起作用，因为尚未附加事件侦听器、单击处理程序等。
+
+由于耗时超过 50 毫秒的复杂工作，会出现占用大量 CPU 的长任务。为什么是 50 毫秒？ [RAIL 模型](/rail/)建议您在[50 毫秒](/rail/#response-process-events-in-under-50ms)内处理用户输入事件，以确保在 100 毫秒内做出可见响应。如果你不这样做，操作和反应之间的连接就会中断。
+
+## 我的页面中是否存在可能会延迟交互的长任务？
+
+到目前为止，您需要在 [Chrome DevTools](https://developer.chrome.com/docs/devtools/) 中手动查找超过 50 毫秒的“黄色长块”脚本，或者使用 [Long Tasks API](https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/) 找出哪些任务延迟了交互。这可能有点麻烦。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mSKnMWBcEBHWkXzTGCAH.png", alt="显示短任务和长任务差异的 DevTools Performance 面板截图", width="800", height="450" %}
+
+为了帮助简化性能审计工作流程， [DevTools 现在可视化了长任务](https://developers.google.com/web/updates/2019/03/devtools#longtasks) 。如果任务（以灰色显示）是长任务，则会以红色标注。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fyDPyO4XbSINMVpSSY9E.png", alt="DevTools 将长任务可视化为性能面板中的灰色条，以红色标注", width="800", height="450" %}
+
+- 在[性能面板](https://developer.chrome.com/docs/devtools/evaluate-performance/)中记录加载网页的跟踪情况。
+- 在主线程视图中寻找红色标志。您应该会看到任务现在是灰色的（“任务”）。
+- 将鼠标悬停在栏上可以查看任务的持续时间以及它是否被视为“长任务”。
+
+## 是什么原因导致的长任务？
+
+要发现导致长任务的原因，请选择灰色的**任务**栏。在下方的抽屉中，选择**自下而上**和**按活动分组**。这样就可以查看哪些活动对长任务完成的任务贡献最大（总共）。下面似乎是一组耗时高的 DOM 查询。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7irBiePkFJRmzKMlcJUV.png", alt="在 DevTools 中选择一个长任务（标记为“任务”）可以深入了解负责它的活动。", width=" 800", height="450" %}
+
+## 优化长任务的常用方法有哪些？
+
+大型脚本通常是导致长任务的主要原因，因此请考虑[将它们拆分](/reduce-javascript-payloads-with-code-splitting)。还要留意第三方脚本；它们的长任务可能会延迟主要内容的交互性。
+
+将您的所有工作分解成小块（运行时间 &lt; 50 毫秒），并在正确的时间和地点运行这些块；所谓正确的地点，甚至可能在主线程之外，比如在工程线程中。Phil Walton 的[《从空闲到紧急》](https://philipwalton.com/articles/idle-until-urgent/)是有关此主题的好读物。
+
+保持页面的响应速度。最大限度地减少长任务是确保用户在访问您的网站时获得愉快体验的好方法。有关长任务的更多信息，请查看以[《以用户为中心的性能指标》](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#tracking_long_tasks)。
diff --git a/src/site/content/zh/blog/maskable-icon/index.md b/src/site/content/zh/blog/maskable-icon/index.md
new file mode 100644
index 00000000000..f649b2a7bc2
--- /dev/null
+++ b/src/site/content/zh/blog/maskable-icon/index.md
@@ -0,0 +1,85 @@
+---
+title: 通过可遮罩图标使 PWA 支持自适应图标
+subhead: 一种允许在支持平台上使用自适应图标的新图标格式。
+description: 可遮罩图标是一种新的图标格式，可让您拥有更多控制权，并让您的渐进式 Web 应用程序使用自适应图标。通过提供可遮罩图标，您的图标在所有 Android 设备上都会美观地显示。
+authors:
+  - tigeroakes
+  - thomassteiner
+date: 2019-12-19
+updated: 2021-05-19
+hero: image/admin/lzLo9JCh6bcehH2nSH0n.png
+alt: 包含在白色圆形内的图标，与覆盖整个圆形的图标相对比
+tags:
+  - blog
+  - capabilities
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+## 什么是可遮罩图标？{: #what }
+
+如果您在最近的 Android 手机上安装了渐进式 Web 应用程序，您可能会注意到其图标以白色背景显示。Android Oreo 引入了自适应图标，在不同的设备型号上显示不同形状的应用图标。不遵循这种新格式的图标将以白色背景显示。
+
+<figure>{% Img src="image/admin/jzjx6dGkXN9EdqnUzAeg.png", alt="Android 上白色圆形中的 PWA 图标", width="400", height="100" %}<figcaption>在 Android 上，透明的 PWA 图标显示在白色圆形内</figcaption></figure>
+
+可遮罩图标是一种新的图标格式，可让您拥有更多控制权，并让您的渐进式 Web 应用程序使用自适应图标。如果您提供可遮罩图标，您的图标可以填满整个形状并且在所有 Android 设备上都可以美观地显示。Firefox 和 Chrome 最近增加了对这种新格式的支持，您可以在应用程序中加以采用。
+
+<figure>{% Img src="image/admin/J7gkg9ylP2ANlFawblze.png", alt="Android 上覆盖整个圆形的 PWA 图标", width="400", height="100" %}<figcaption>而可遮罩图标会覆盖整个圆形</figcaption></figure>
+
+## 当前图标是否就绪？
+
+由于可遮罩图标需要支持多种形状，因此您需要提供带有一些填充的不透明图像，浏览器稍后可以将其裁剪为所需的形状和大小。最好不要依赖任何特定的形状，因为最终选择的形状会因浏览器和平台而异。
+
+<figure data-float="right">{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/mx1PEstODUy6b5TXjo4S.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tw7QbXq9SBjGL3UYW0Fq.mp4"], autoplay=true, loop=true, muted=true, playsinline=true %} <figcaption> 特定于不同平台的形状 </figcaption></figure>
+
+幸运的是，所有平台都遵守一个明确定义且[标准化](https://w3c.github.io/manifest/#icon-masks)的“最小安全区”。图标的重要部分（例如徽标）应位于图标中心的圆形区域内，且半径等于图标宽度的 40%。外围 10% 的边缘可能会被裁剪掉。
+
+您可以使用 Chrome DevTools 检查图标的哪些部分位于安全区域内。在您的渐进式 Web 应用程序处于打开状态的情况下，启动 DevTools 并导航到 **Application**（应用程序）面板。在 **Icons**（图标）部分中，可以选择 **Show only the minimum safe area for maskable icons**（仅显示可遮蔽图标的最小安全区域）。您的图标将被修剪，以便只有安全区域可见。如果您的徽标在此安全区域内可见，您就可以放心继续了。
+
+<figure>{% Img src="image/admin/UeKTJM2SE0SQhgnnyaQG.png", alt="DevTools 中的 Applications（应用程序）面板，显示边缘被裁剪的 PWA 图标", width="762", height="423" %}<figcaption>Applications（应用程序）面板</figcaption></figure>
+
+要使用各种 Android 形状测试可遮罩图标，请使用我创建的 [Maskable.app](https://maskable.app/) 工具。打开一个图标，然后使用 Maskable.app 可尝试各种形状和大小，您可以与团队中的其他人分享预览。
+
+## 如何采用可遮罩图标？
+
+如果要基于现有图标创建可遮罩图标，可以使用 [Maskable.app Editor](https://maskable.app/editor)。上传您的图标，调整颜色和大小，然后导出图像。
+
+<figure>{% Img src="image/admin/MDXDwH3RWyj4po6daeXw.png", alt="Maskable.app Editor 截图", width="670", height="569" %}<figcaption>在 Maskable.app Editor 中创建图标</figcaption></figure>
+
+创建可遮罩图标图像并在 DevTools 中测试后，您需要将 [Web 应用程序清单](/add-manifest/)更新为指向新资产。Web 应用程序清单在一个 JSON 文件中提供有关 Web 应用程序的信息，并包含一个 [`icons` 数组](/add-manifest/#icons)。
+
+包含可遮罩图标后，Web 应用程序清单中列出的图像资源即增加了一个新的属性值。`purpose` 字段告诉浏览器应该如何使用图标。默认情况下，图标的 purpose 为 `"any"`。在 Android 上，这些图标将在白色背景上调整大小。
+
+可遮罩图标应使用不同的 purpose：`"maskable"`。这表示图像将与图标遮罩一起使用，让您对结果有更多的控制权。这样，您的图标将不会有白色背景。如果您希望在其他设备上使用可遮罩图标而不使用遮罩。还可以指定多个用空格分隔的 purpose（例如，`"any maskable"`）。
+
+{% Aside %} 虽然您*可以*指定多个以空格分隔的 purpose，例如 `"any maskable"` ，但在实践中*不应该*这样做。使用 `"maskable"` 图标作为 `"any"` 图标是次优之选，因为图标将按原样使用，导致填充过多并使核心图标内容变小。理想情况下，purpose 为 `"any"` 的图标应该具有透明区域并且没有额外填充（例如网站的收藏夹图标），因为浏览器不会为它们添加填充内容。{% endAside %}
+
+```json
+{
+  …
+  "icons": [
+    …
+    {
+      "src": "path/to/regular_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "path/to/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable" // <-- New property value `"maskable"`
+    },
+    …
+  ],
+  …
+}
+```
+
+这样，您就可以开始创建您自己的可遮罩图标，确保您的应用程序图标具有漂亮的无边框外观（以及值得一提的无圆圈边框、无椭圆边框 😄）。
+
+## 致谢
+
+本文由 [Joe Medley](https://github.com/jpmedley) 审阅。
diff --git a/src/site/content/zh/blog/min-max-clamp/index.md b/src/site/content/zh/blog/min-max-clamp/index.md
new file mode 100644
index 00000000000..ea0311950dd
--- /dev/null
+++ b/src/site/content/zh/blog/min-max-clamp/index.md
@@ -0,0 +1,154 @@
+---
+title: min()、max() 和 clamp()：今天要使用的三个逻辑 CSS 函数
+subhead: 了解如何使用这些支持良好的 CSS 函数控制元素大小，以及保持适当的间距和实现流畅的排版。
+authors:
+  - una
+date: 2020-10-14
+hero: image/admin/aVL3BEXD3AF9fFzPGKMf.jpg
+alt: 桌子上的一组工具。
+description: Min、max 和 clamp 提供了一些强大的 CSS 功能，可让您以更少的代码实现响应性更佳的样式。本文将讨论如何使用这些支持良好的 CSS 数学函数来控制元素大小，并保持适当的间距和实现流畅的排版。
+tags:
+  - blog
+  - css
+  - layout
+feedback:
+  - api
+---
+
+随着响应式设计的不断发展，界面变得越来越精细，CSS 也在不断发展，并且为作者提供的控制能力也越来越强大。现代浏览器支持 [`min()`](https://developer.mozilla.org/docs/Web/CSS/min)、[`max()`](https://developer.mozilla.org/docs/Web/CSS/max) 和 [`clamp()`](https://developer.mozilla.org/docs/Web/CSS/clamp) 函数，它们是让创作网站和应用程序更具动态性和响应性的一些最新工具。
+
+谈到灵活和流畅的排版、受控制的元素大小调整和保持适当的间距，`min()`、`max()` 和 `clamp()` 可以提供帮助。
+
+## 背景
+
+<blockquote>
+  <p>数学函数 <code>calc()</code>、<code>min()</code>、<code>max()</code> 和 <code>clamp()</code> 支持将使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式作为组件值</p>
+  <cite><p data-md-type="paragraph"><a href="https://www.w3.org/TR/css-values-4/#calc-notation">CSS 值和单位级别 4</a></p></cite>
+</blockquote>
+
+2019 年 4 月，Safari 成为第一款[包含](https://bugs.webkit.org/show_bug.cgi?id=167000)整套函数的浏览器，当年晚些时候，Chromium 也在版本 79 中包含了这些函数。这一年，随着 Firefox [75](https://bugzilla.mozilla.org/show_bug.cgi?id=1519519) 发布，主要浏览器基本上都已经开始支持 `min()`、`max()` 和 `clamp()`。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZIgePP41Quh7ubYh54vo.png", alt="", width="800", height="246" %}<figcaption> <a href="https://caniuse.com/css-math-functions">Caniuse</a> 支持表格。</figcaption></figure>
+
+## 用法
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-demo.mp4">
+  </source></video>
+  <figcaption>显示 min() 函数如何根据选项列表及其父项选择值。请<a href="https://codepen.io/una/pen/rNeGNVL">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+您可以在任何有意义的 CSS 表达式的右侧使用 `min()`、`max()` 和 `clamp()`。对于 `min()` 和 `max()`，您要提供一个参数值列表，浏览器则会分别确定哪个是最小值以及哪个是最大值。例如，对于：`min(1rem, 50%, 10vw)`，浏览器会计算这些相对单位中哪一个最小，并将该值用作实际值。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-demo.mp4">
+  </source></video>
+  <figcaption>显示 max() 函数如何根据选项列表及其父项选择值。请<a href="https://codepen.io/una/pen/RwaZXqR">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+`max()` 函数从逗号分隔的表达式列表中选择最大值。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-demo.mp4">
+  </source></video>
+  <figcaption>显示 clamp() 函数如何根据选项列表及其父项选择值。请<a href="https://codepen.io/una/pen/bGpoGdJ">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+要使用 `clamp()` 输入三个值：最小值、理想值（用于计算的值）和最大值。
+
+只要允许使用 `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percentage>`、`<number>` 或 `<integer>`，您都可以使用这些函数。您可以单独使用这些函数（即 `font-size: max(0.5vw, 50%, 2rem)`），也可以与 `calc()` 结合使用（即 `font-size: max(calc(0.5vw - 1em), 2rem)`），或者组合使用（即 `font-size: max(min(0.5vw, 1em), 2rem)`）。
+
+{% Aside %} 在 `min()`、`max()` 或 `clamp()` 函数内部使用计算时，您可以删除对 `calc()` 的调用。例如，`font-size: max(calc(0.5vw - 1em), 2rem)` 与 `font-size: max(0.5vw - 1em, 2rem)` 的效果相同。{% endAside %}
+
+总结：
+
+- `min(<value-list>)`：从逗号分隔的表达式列表中选择最小值（最小负数）
+- `max(<value-list>)`：从逗号分隔的表达式列表中选择最大值（最大正数）
+- `clamp(<min>, <ideal>, <max>)`：根据设定的理想值，将值限定在上限与下限之间
+
+我们来看几个例子。
+
+## 理想宽度
+
+Robert Bringhurst 在[《The Elements of Typographic Style》](http://webtypography.net/2.1.2#:~:text=%E2%80%9CAnything%20from%2045%20to%2075,is%2040%20to%2050%20characters.%E2%80%9D)中说：“对于有衬线字体的单列页面，一般认为一行 45 到 75 个字符的长度是比较理想的。”
+
+为了确保文本块不少于 45 个字符，也不超过 75 个字符，请使用 `clamp()` 和 `ch`（[字符前](https://developer.mozilla.org/docs/Web/CSS/length) 0 宽度）单位：
+
+```css
+p {
+  width: clamp(45ch, 50%, 75ch);
+}
+```
+
+这样，浏览器就可以确定段落的宽度。它会将宽度设置为 50%，但如果 50% 的宽度小于 `45ch`，则会选择 `45ch`，反之，如果 50% 的宽度比 `75ch` 更宽，则会选择 `75ch`。在本演示中，卡片的尺寸被限定了：
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/clamp-width.mp4">
+  </source></video>
+  <figcaption>使用 clamp() 函数可限定最小和最大宽度。请<a href="https://codepen.io/una/pen/QWyLxaL">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+只需要使用 `min()` 或 `max()` 函数，您就可以打破这种限制。如果您希望元素使用 `50%` 的宽度，并且不超过 `75ch`（即在较大的屏幕上），则可以这样编写代码：`width: min(75ch, 50%);`。实际上，这是使用 `min()` 函数来设置“最大”大小。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/max-width.mp4">
+  </source></video>
+  <figcaption>使用 clamp() 函数来限制最小和最大宽度。</figcaption></figure>
+
+同样，您也可以使用 `max()` 函数来设定最小尺寸，从而让文本清晰易读。例如：`width: max(45ch, 50%);`。这样，浏览器就会选择 `45ch` 或 `50%` 中较大的值，这意味着元素*至少* 为 `45ch`，否则会更大。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-width.mp4">
+  </source></video>
+  <figcaption>使用 clamp() 函数来限制最小和最大宽度。</figcaption></figure>
+
+## 填充管理
+
+与上述概念相同，`min()` 函数可以设置“最大”值，而 `max()` 函数可以设置“最小”值，您也可以使用 `max()` 来设置最小填充大小。示例来自 [CSS 技巧](https://css-tricks.com/using-max-for-an-inner-element-max-width/)，下面是读者 Caluã de Lacerda Pataca 分享的想法：让元素在较大尺寸的屏幕上进行额外填充，但在较小尺寸的屏幕上保持填充最小（尤其是对于内联填充）。为此，您要使用 `calc()` 并从任意一侧减去最小填充：`calc((100vw - var(--contentWidth)) / 2)`，*或者*使用 max：`max(2rem, 50vw - var(--contentWidth) / 2)`。总之，代码如下：
+
+```css
+footer {
+  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
+}
+```
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/min-padding.mp4">
+  </source></video>
+  <figcaption>使用 max() 函数为组件设置最小填充。请<a href="https://codepen.io/chriscoyier/pen/qBZqNKa">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+## 流畅的排版
+
+为了实现[流畅的排版](https://www.smashingmagazine.com/2016/05/fluid-typography/)，[Mike Riethmeuller](https://twitter.com/mikeriethmuller) 推广了一种技术。该技术使用 `calc()` 函数来设置最小字体大小、最大字体大小，并允许从最小值放大至最大值。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/min-max-clamp/fliud-type.mp4">
+  </source></video>
+  <figcaption>使用 clamp() 实现流畅的排版。请<a href="https://codepen.io/una/pen/ExyYXaN">参阅 Codepen 上的演示</a>。</figcaption></figure>
+
+凭借 `clamp()`，您可以更清楚地编写这一段代码。不需要复杂的字符串，浏览器就可以完成这项工作。设置可接受的最小字体大小（例如，标题为 `1.5rem`，最大大小（即 `3rem`）和理想大小为 `5vw`。
+
+现在，我们实现了可随页面视口宽度进行缩放，直到达到限制的最小值和最大值的的排版效果，代码行变得更加简洁：
+
+```css
+p {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+{% Aside 'warning' %} 在 [1.4.4 调整文本大小 (AA)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text) 下，利用 `max()` 或 `clamp()` 限制文本大小可能导致 WCAG 失败，因为用户可能无法将文本缩放到其原始大小的 200%。请务必[使用 zoom 测试结果](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html)。{% endAside %}
+
+## 总结
+
+CSS 数学函数 `min()`、`max()` 和 `clamp()` 非常强大，而且支持良好，当您构建响应式 UI 时，这些函数可能大有帮助。如需更多资源，请查看：
+
+- [MDN 上的 CSS 值和单位](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [CSS 值和单位级别 4 规范](https://www.w3.org/TR/css-values-4/)
+- [关于内部元素宽度的 CSS 技巧文章](https://css-tricks.com/using-max-for-an-inner-element-max-width/)
+- [min()、max()、clamp() 概述，作者：Ahmad Shadeed](https://ishadeed.com/article/css-min-max-clamp/)
+
+Unsplash 上 [@yer_a_wizard](https://unsplash.com/@yer_a_wizard) 的封面图片。
diff --git a/src/site/content/zh/blog/off-main-thread/index.md b/src/site/content/zh/blog/off-main-thread/index.md
new file mode 100644
index 00000000000..c2402f61f26
--- /dev/null
+++ b/src/site/content/zh/blog/off-main-thread/index.md
@@ -0,0 +1,184 @@
+---
+title: 使用 Web Worker 在浏览器的主线程之外运行 JavaScript
+subhead: 非主线程架构可以显著提高应用的可靠性和用户体验。
+description: 浏览器的主线程超负荷工作。通过使用 Web Worker 将代码移出主线程，可以显著提高应用的可靠性和用户体验。
+authors:
+  - surma
+date: 2019-12-05
+tags:
+  - blog
+  - performance
+  - test-post
+---
+
+过去的 20 年中，Web 已经从具有少量样式和图像的静态文档发展为复杂的动态应用。然而，有一点基本保持没变：每个浏览器选项卡只使用一个线程（有一些例外）来呈现网站并运行 JavaScript。
+
+这样，主线程的工作负荷变得无比繁重。随着 Web 应用复杂性的增加，主线程成为性能的重要瓶颈。更糟糕的是，在给定用户的主线程上运行代码所需的时间**几乎完全不可预测**，因为设备功能对性能有巨大影响。这种不可预测性只会随着用户从越来越多样化的设备访问网络而增加，从超受限的功能手机到高性能、高刷新率的旗舰机器，无不如此。
+
+如果我们希望复杂的 Web 应用能够可靠地满足性能准则，比如像 [RAIL 模型](/rail/)——它基于人类感知和心理经验数据，则我们需要采取**在主线程之外 (OMT)**执行代码的方法。
+
+{% Aside %}如果您想了解更多有关 OMT 架构案例的信息，请观看我在下面的 CDS 2019 演讲。 {% endAside %}
+
+{% YouTube '7Rrv9qFMWNM' %}
+
+## 通过 Web Worker 实现线程处理
+
+其他平台通常通过允许您为线程提供与程序的其余部分并行运行的函数来支持并行工作。您可以从两个线程访问相同的变量，并且可以使用互斥锁和信号量同步对这些共享资源进行访问，从而防止产生竞争条件。
+
+在 JavaScript 中，我们可以从 Web Worker 获得大致相似的功能，这些功能自 2007 年以来一直存在，并且自 2012 年以来所有主要浏览器都支持。Web Worker 与主线程并行运行，但与 OS 线程不同的是，它们不能共享变量。
+
+{% Aside %} 不要将 Web Worker 与[Service Worker](/service-workers-cache-storage)或 [Worklet](https://developer.mozilla.org/docs/Web/API/Worklet) 混淆。虽然名称相似，但功能和用途不同。 {% endAside %}
+
+要创建 Web Worker，请将文件传递给 Worker 构造函数，则构造函数将开始在单独的线程中运行文件：
+
+```js
+const worker = new Worker("./worker.js");
+```
+
+可以通过 [`postMessage` API](https://developer.mozilla.org/docs/Web/API/Window/postMessage) 发送消息实现与 Web Worker 的通信。在 `postMessage` 调用中将消息值作为参数传递，然后向 Web Worker 添加消息事件侦听器：
+
+<!--lint disable no-duplicate-headings-in-section-->
+
+### `main.js`
+
+```js/1
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+```
+
+### `worker.js`
+
+```js
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+});
+```
+
+要将消息发送回主线程，请在 Web Worker 中使用相同的 `postMessage` API 并在主线程上设置事件侦听器：
+
+### `main.js`
+
+```js/2-4
+const worker = new Worker("./worker.js");
+worker.postMessage([40, 2]);
+worker.addEventListener("message", event => {
+  console.log(event.data);
+});
+```
+
+### `worker.js`
+
+```js/3
+addEventListener("message", event => {
+  const [a, b] = event.data;
+  // Do stuff with the message
+  postMessage(a+b);
+});
+```
+
+诚然，这种方法有一定的局限性。从历史上看，Web Worker 主要用于将单个繁重的工作从主线程中移出。尝试使用单个 Web Worker 处理多个操作会很快变得笨拙：您不仅必须对消息中的参数进行编码，还必须对消息中的操作进行编码，并且必须进行簿记以匹配请求的响应。这种复杂性可能是 Web Worker 没有被更广泛采用的原因。
+
+但是如果我们可以消除主线程和 Web Worker 之间通信的一些困难，这个模型可能非常适合许多用例。而且，幸运的是，有一个库可以做到这一点！
+
+## Comlink：减少 Web Worker 的工作量
+
+[Comlink](http://npm.im/comlink) 是一个库，其目标是让您使用 Web Worker 而无需考虑 `postMessage` 的细节。Comlink 允许您在 Web Worker 和主线程之间共享变量，就像其他支持线程的编程语言一样。
+
+您可以通过将 Comlink 导入 Web Worker 并定义一组公开给主线程的函数来设置它。然后在主线程上导入 Comlink，包装 Web Worker，并访问公开的函数：
+
+### `worker.js`
+
+```js
+import {expose} from "comlink";
+
+const api = {
+  someMethod() { /* … */ }
+}
+expose(api);
+```
+
+### `main.js`
+
+```js
+import {wrap} from "comlink";
+
+const worker = new Worker("./worker.js");
+const api = wrap(worker);
+```
+
+主线程上的 `api` 变量与 Web Worker 中的变量行为相同，不同之处在于每个函数为值返回一个承诺，而非值本身。
+
+## 应该将哪些代码移至 Web Worker？
+
+Web Worker 无权访问 DOM 和许多 API，例如 [WebUSB](https://developer.mozilla.org/docs/Web/API/USB)、[WebRTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) 或 [Web Audio](https://developer.mozilla.org/docs/Web/API/Web_Audio_API)，因此您不能将依赖于此类访问的应用部分放入 Web Worker 中。尽管如此，移动到 Worker 的每一小段代码都会在主线程上为*必须*的东西“购买”更多的空间，例如更新用户界面。
+
+{% Aside %} 限制 UI 访问主线程实际上在其他语言中很常见。事实上，iOS 和 Android 都将主线程称为 *UI 线程*。 {% endAside %}
+
+Web 开发人员面临的一个问题是，大多数 Web 应用依赖于像 Vue 或 React 这样的 UI 框架来编排应用中的所有内容；一切都是框架的组成部分，因此本质上与 DOM 相关联。这似乎使迁移到 OMT 架构变得困难。
+
+但是，如果我们转向将 UI 关注点与其他关注点（例如状态管理）分开的模型，则 Web Worker 非常有用，即便对于基于框架的应用，情况也如此。这正是 PROXX 采用的方法。
+
+## PROXX：OMT 案例研究
+
+Google Chrome 团队开发了 [PROXX](/load-faster-like-proxx/) 作为满足[渐进式 Web 应用](https://developers.google.com/web/progressive-web-apps)要求的 Minesweeper 游戏克隆版，包括离线工作和具有吸引力的用户体验。不幸的是，该游戏的早期版本在功能手机等受限设备上表现不佳，这让团队意识到主线程是一个瓶颈。
+
+团队决定使用 Web Worker 将游戏的视觉状态与其逻辑分开：
+
+- 主线程处理动画和过渡的呈现。
+- Web Worker 处理纯计算性的游戏逻辑。
+
+{% Aside %} 这种方法类似于 Redux [Flux 模式](https://facebook.github.io/flux/)，因此许多 Flux 应用可能能够相当容易地迁移到 OMT 架构。查看[此博客文章](http://dassur.ma/things/react-redux-comlink/)，了解有关将 OMT 应用于 Redux 应用的更多信息。 {% endAside %}
+
+OMT 对 PROXX 的功能手机性能产生了有趣的影响。在非 OMT 版本中，用户与其交互后 UI 会冻结 6 秒。没有反馈，用户必须等待整整六秒钟才能做其他事情。
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-nonomt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>PROXX 的<strong>非 OMT </strong>版本中的 UI 响应时间。</figcaption></figure>
+
+在 OMT 版本中，游戏需要 *12* 秒才能完成 UI 更新。虽然这看起来像是一种性能损失，但它实际上会导致对用户的反馈增加。速度变慢是因为该应用比非 OMT 版本传送更多的帧，后者根本不传送任何帧。因此，用户知道正在发生的事情，可以在 UI 更新期间继续玩游戏，从而使游戏感觉更好。
+
+<figure>
+  <video controls muted style="max-width: 400px;">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/off-main-thread/proxx-omt.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>PROXX 的 <strong>OMT</strong> 版本中的 UI 响应时间。</figcaption></figure>
+
+这是一个有意识的权衡：我们在不惩罚高端设备用户的情况下，为受限设备的用户提供*感觉*更好的体验。
+
+## OMT 架构的含义
+
+正如 PROXX 示例所示，OMT 使您的应用在更广泛的设备上可靠运行，但不会使您的应用更快：
+
+- 您只是从主线程中转移工作，而不是减少工作。
+- Web Worker 和主线程之间的额外通信开销有时会使事情变慢。
+
+### 考虑权衡
+
+由于主线程可以在 JavaScript 运行时自由处理用户交互，例如滚动，因此即使总等待时间可能稍长，但丢帧会较少。让用户稍等片刻比丢帧更可取，因为丢帧的误差幅度较小：丢帧发生在几毫秒内，而在用户感知等待时间之前，您有*数百*毫秒的时间。
+
+由于跨设备性能的不可预测性，OMT 架构的目标实际上是**降低风险——**使您的应用在面对高度可变的运行时条件时更加稳健——而不是并行化的性能优势。弹性的增加和用户体验的改进都值得在速度上做出任何小的折衷。
+
+{% Aside %} 开发人员有时会担心在主线程和 Web Worker 之间复制复杂对象的成本。我在演讲中对这一方面有详细的说明。但总的来说，如果对象的字符串化 JSON 表示小于 10 KB，则不应超出性能预算。如果您需要复制更大的对象，请考虑使用 [ArrayBuffer](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 或 [WebAssembly](https://webassembly.org/)。有关此问题的更多信息，请阅读[有关 `postMessage` 性能的博文](https://dassur.ma/things/is-postmessage-slow)。 {% endAside %}
+
+### 关于工具的说明
+
+Web Worker 尚未成为主流，因此大多数模块化工具 — 比如 [WebPack](https://webpack.js.org/)  和 [Rollup](https://github.com/rollup/rollup) — 不支持直接使用它们。（尽管 [Parcel](https://parceljs.org/) 支持）幸运的是，有一些插件可以让 Web Worker 与 WebPack 和 Rollup 一起*工作*：
+
+- 用于 WebPack 的 [worker-plugin](https://github.com/GoogleChromeLabs/worker-plugin)
+- 用于 Rollup 的 [rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread)
+
+## 总结
+
+为确保我们的应用尽可能可靠且易于访问，尤其是在日益全球化的市场中，我们需要支持受限设备——它们是全球大多数用户访问网络的方式。OMT 提供了一种有前途的方法来提高此类设备的性能，而不会对高端设备的用户产生不利影响。
+
+此外，OMT 还有下列好处：
+
+- 它将 JavaScript 执行成本转移到一个单独的线程。
+- 它移动*解析*成本，这意味着 UI 可能会启动得更快。这可能会减少 [First Contentful Paint](/fcp/) 甚至 [Time to Interactive](/tti/) ，从而提高您的 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 分数。
+
+Web Worker 无需担忧。Comlink 等工具正在减轻其工作，并使它们成为各种 Web 应用的可行选择。
diff --git a/src/site/content/zh/blog/one-line-layouts/index.md b/src/site/content/zh/blog/one-line-layouts/index.md
new file mode 100644
index 00000000000..dcc80921c6d
--- /dev/null
+++ b/src/site/content/zh/blog/one-line-layouts/index.md
@@ -0,0 +1,295 @@
+---
+title: 在一行 CSS 中实现十种现代布局
+subhead: 本文重点介绍了一些强大的 CSS 代码行，它们能执行一些繁重的工作并帮助您构建强大的现代布局。
+authors:
+  - una
+description: 本文重点介绍了一些强大的 CSS 代码行，它们能执行一些繁重的工作并帮助您构建强大的现代布局。
+date: 2020-07-07
+hero: image/admin/B07IzuMeRRGRLH9UQkwd.png
+alt: 圣杯布局。
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+---
+
+{% YouTube 'qm0IfG1GyZU' %}
+
+现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。
+
+{% Glitch { id: '1linelayouts', path: 'README.md', height: 480 } %}
+
+要体验或自己尝试这些演示，请查阅上面嵌入的 Glitch，或访问 [1linelayouts.glitch.me](https://1linelayouts.glitch.me) 。
+
+## 01. 超级居中：`place-items: center`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/01-place-items-center.mp4">
+  </source></video></figure>
+
+对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 [`place-items: center`](https://developer.mozilla.org/docs/Web/CSS/place-items) 会让此操作比您想象的容易。
+
+首先指定 `grid` 作为 `display` 方法，然后在同一个元素上写入 `place-items: center`。`place-items` 是同时设置 `align-items` 和 `justify-items` 的快速方法。通过将其设置为 `center` ， `align-items` 和 `justify-items` 都将设置为 `center`。
+
+```css/2
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
+
+这使得内容能够在父级内完美居中，而不管内部大小。
+
+## 02. 解构煎饼式布局：`flex: <grow> <shrink> <baseWidth>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-1.mp4">
+  </source></video></figure>
+
+接下来我们有解构的煎饼！这是营销网站的常见布局，例如，可能有一行 3 个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。
+
+通过使用 Flexbox 实现此效果，您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。
+
+[`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) 简写代表：`flex: <flex-grow> <flex-shrink> <flex-basis>` 。
+
+正因为如此，如果您想让您的框填充到它们的 `<flex-basis>` 大小，缩小到更小的尺寸，但不*拉伸*以填充任何额外的空间，请写入：`flex: 0 1 <flex-basis>` 。在这种情况下，您的 `<flex-basis>` 是 `150px`，所以应该是这样：
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 0 1 150px;
+}
+```
+
+如果您*确实*希望框在换到下一行时拉伸并填充空间，请将 `<flex-grow>` 设置为 `1` ，所以应该是这样：
+
+```css/5
+.parent {
+  display: flex;
+}
+
+.child {
+  flex: 1 1 150px;
+}
+```
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/02-deconstructed-pancake-2.mp4">
+  </source></video></figure>
+
+现在，当您增加或减少屏幕尺寸时，这些 flex 项目会缩小和增长。
+
+## 03. 侧边栏布局：`grid-template-columns: minmax(<min>, <max>) …)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/03-sidebar-says.mp4">
+  </source></video></figure>
+
+此演示对网格布局利用了 [minmax](https://developer.mozilla.org/docs/Web/CSS/minmax) 函数。我们在这里做的是将最小侧边栏大小设置为 `150px` ，但在更大的屏幕上，让它伸展出 `25%` 。侧边栏将始终占据其父级水平空间的 `25%`，直到 `25%` 变得小于 `150px` 。
+
+将以下值添加为 grid-template-columns 的值：`minmax(150px, 25%) 1fr` 。在第一列（在这种情况下，侧边栏）的项目其 `minmax` 为 `150px`（在`25%` ），第二列项目（这里指 `main` 部分）占据其余的空间作为单一的 `1fr` 轨道。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: minmax(150px, 25%) 1fr;
+}
+```
+
+## 04. 煎饼堆栈布局：`grid-template-rows: auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/04-pancake-stack.mp4">
+  </source></video></figure>
+
+与 Deconstructed Pancake 不同，当屏幕尺寸改变时，本例不会包含它的子元素。通常称为[粘性页脚](https://developer.mozilla.org/docs/Web/CSS/Layout_cookbook/Sticky_footers)，这种布局通常用于网站和应用程序，跨多个移动应用程序（页脚通常是工具栏）和网站（单页应用程序通常使用这种全局布局）。
+
+向组件添加 `display: grid` 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。
+
+要使页脚粘在底部，请添加：
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+`1fr`页眉和页脚内容设置为自动采用其子项的大小，并将剩余空间 ( 1fr ) 应用于主区域，而`auto`调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。
+
+## 05. 经典圣杯布局：`grid-template: auto 1fr auto / auto 1fr auto`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/05-holy-grail.mp4">
+  </source></video></figure>
+
+对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！
+
+要使用一行代码编写整个网格，请使用 `grid-template` 属性。这使您可以同时设置行和列。
+
+属性和值对为：`grid-template: auto 1fr auto / auto 1fr auto` 。第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。
+
+```css/2
+.parent {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+```
+
+与上一个示例一样，页眉和页脚具有自动调整大小的内容，这里的左侧和右侧边栏会根据其子项的固有大小自动调整大小。但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。
+
+## 06. 12 跨网格：`grid-template-columns: repeat(12, 1fr)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-1.mp4">
+  </source></video></figure>
+
+接下来我们有另一个经典布局：12 跨网格。您可以使用 `repeat()` 函数在 CSS 中快速编写网格。对网格模板列使用 `repeat(12, 1fr);` 将为每个 `1fr` 提供 12 列。
+
+```css/2,6
+.parent {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.child-span-12 {
+  grid-column: 1 / 13;
+}
+```
+
+现在您有一个 12 列的轨道网格，我们可以将子项放在网格上。一种方法是使用网格线放置它们。例如， `grid-column: 1 / 13` 将跨越从第一行到最后一行（第 13 行）并跨越 12 列。`grid-column: 1 / 5;` 将跨越前四个列。
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/06-12-span-2.mp4">
+  </source></video></figure>
+
+另一种方法是使用 `span` 关键字。使用 `span` ，您可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，`grid-column: 1 / span 12` 将等效于 `grid-column: 1 / 13` ，而 `grid-column: 2 / span 6` 将等效于 `grid-column: 2 / 8` 。
+
+```css/1
+.child-span-12 {
+  grid-column: 1 / span 12;
+}
+```
+
+## 07. RAM (Repeat, Auto, MinMax): `grid-template-columns(auto-fit, minmax(<base>, 1fr))`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-1.mp4">
+  </source></video></figure>
+
+对于这第七个示例，结合您已经了解的一些概念来创建具有自动放置且灵活的子项的响应式布局。漂亮整齐。这里要记住的关键点是 `repeat` 、 `auto-(fit|fill)` 和 `minmax()'` ，可以记住它们的首字母缩写词 RAM。
+
+总之，应是这样：
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+```
+
+您再次使用 repeat ，但这次使用 `auto-fit` 关键字而不是显式数值。这可以自动放置这些子元素。这些子元素的基本最小值为 `150px` ，最大值为 `1fr` ，这意味着在较小的屏幕上，它们将占据整个 `1fr` 宽度，当它们达到 `150px` 宽度时，它们将开始流到同一条线上。
+
+使用 `auto-fit` ，当它们的水平尺寸超过 150px 时，框将拉伸以填充整个剩余空间。但是，如果您将其更改为 `auto-fill` ，则当超出 minmax 函数中的基本大小时，它们将不会拉伸：
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/07-ram-2.mp4">
+  </source></video></figure>
+
+```css/2
+.parent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+```
+
+## 08. 排列布局：`justify-content: space-between`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/08-lineup.mp4">
+  </source></video></figure>
+
+对于下一个布局，这里要主要说明的是 `justify-content: space-between` ，它将第一个和最后一个子元素放置在其边界框的边缘，其余空间均匀分布在元素之间。对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 `flex-direction: column` 将方向设置为 column。
+
+这会将标题、描述和图像块放在父卡片内的垂直列中。然后，应用 `justify-content: space-between` 将第一个（标题）和最后一个（图像块）元素锚定到 flexbox 的边缘，并且它们之间的描述性文本以相等的间距放置到每个端点。
+
+```css/3
+.parent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+```
+
+## 09. 保持我的风格：`clamp(<min>, <actual>, <max>)`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/09-clamping.mp4">
+  </source></video></figure>
+
+这里，我们介绍一些[只有少数浏览器支持](https://caniuse.com/#feat=css-math-functions)的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。在本演示中，您将使用固定工具设置宽度，如下所示： `width: clamp(<min>, <actual>, <max>)` 。
+
+这将设置绝对最小和最大尺寸以及实际尺寸。有了值，应该这样：
+
+```css/1
+.parent {
+  width: clamp(23ch, 60%, 46ch);
+}
+```
+
+这里的最小尺寸是 `23ch` 或 23 个字符单元，最大尺寸是 `46ch` ，46 个字符。[字符宽度单位](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)基于元素的字体大小（特别是 `0` 字形的宽度）。 “实际”尺寸为 50%，代表此元素父宽度的 50%。
+
+在这里， `clamp()` 函数所做的是使该元素保持 50% 的宽度，*直到* 50% 大于 `46ch` （在较宽的视口上）或小于 `23ch` （在较小的视口上）。您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。这可以实现更清晰的布局，因为文本不会太宽（超过 `46ch` ）或太窄（小于 `23ch` ）。
+
+这也是实现响应式排版的好方法。例如，您可以编写：`font-size: clamp(1.5rem, 20vw, 3rem)` 。在这种情况下，标题的字体大小将始终保持在 `1.5rem` 和 `3rem` 之间，但会根据 `20vw` 实际值增大和缩小以适应视口的宽度。
+
+这是一种很好的技术，可以通过最小和最大尺寸值确保易读性，但请记住，并非所有现代浏览器都支持它，因此请确保您有回退措施并进行测试。
+
+## 10.保持宽高比：`aspect-ratio: <width> / <height>`
+
+<figure>
+  <video controls autoplay loop muted playsinline>
+    <source src="https://storage.googleapis.com/web-dev-assets/one-line-layouts/10-aspectratio.mp4">
+  </source></video></figure>
+
+最后要介绍的这一布局工具是最具实验性的工具。它最近在 Chromium 84 中被引入 Chrome Canary，Firefox 正在积极努力实现这一点，但目前还没有任何稳定的浏览器版本。
+
+不过，我确实想提及这一点，因为这是一个经常遇到的问题。这只是简单地保持图像的宽高比。
+
+使用 `aspect-ratio` 属性，当我调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。我们通过 `aspect-ratio: 16 / 9` 保持此宽高比。
+
+```css/1
+.video {
+  aspect-ratio: 16 / 9;
+}
+```
+
+要在没有此属性的情况下保持 16 x 9 的宽高比，需要使用 [`padding-top` hack](https://css-tricks.com/aspect-ratio-boxes/) 并为其提供 `56.25%` 的 padding 以设置顶宽比。我们很快就会有一个属性来避免黑客攻击和计算百分比的需要。可以使用 `1 / 1` 的比例制作正方形，使用 `2 / 1` 制作 2:1 比例。可以设置任何图像缩放比例。
+
+```css/1
+.square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+虽然此功能仍在不断完善中，但它值得了解，因为它解决了许多开发人员面临的冲突，我自己也多次面临，尤其是在视频和 iframe 方面。
+
+## 结论
+
+感谢您耐心完成对这 10 种强大的 CSS 布局的了解。要了解更多信息，请观看[完整视频](https://youtu.be/qm0IfG1GyZU)，并亲自尝试[演示](https://1linelayouts.glitch.me)。
diff --git a/src/site/content/zh/blog/optimize-cls/index.md b/src/site/content/zh/blog/optimize-cls/index.md
new file mode 100644
index 00000000000..4255bbbe40a
--- /dev/null
+++ b/src/site/content/zh/blog/optimize-cls/index.md
@@ -0,0 +1,279 @@
+---
+title: 优化 Cumulative Layout Shift 累积布局偏移
+subhead: 了解如何避免突然的布局偏移来改善用户体验
+authors:
+  - addyosmani
+date: 2020-05-05
+updated: 2021-08-17
+hero: image/admin/74TRx6aETydsBGa2IZ7R.png
+description: 累积布局偏移 (CLS) 指标能够对用户经历页面内容突然偏移的频率进行量化。在本篇指南中，我们将介绍针对 CLS 常见成因（例如无尺寸或动态内容的图像和 iframe）的优化方式。
+alt: 布局偏移可能会突然将您正在阅读的内容或即将点击的内容推到页面下方，从而导致糟糕的用户体验。为导致布局偏移的动态内容保留空间会带来更愉快的用户体验。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='88' %}
+
+"我正准备点那里！为什么移走了？😭"
+
+布局偏移可能会分散用户的注意力。想象一下，您已经开始阅读一篇文章，可是页面上的元素突然位移，让您措手不及，于是您不得不再次找到先前阅读的位置。这在网络上十分常见，包括在阅读新闻或尝试单击"搜索"或"添加到购物车"按钮时。这种体验在视觉上十分扎眼且令人郁闷。这些情况通常是由于另一个元素被突然添加到页面上或是突然调整了大小，使可见元素被迫移动位置而导致的。
+
+[累积布局偏移](/cls) (CLS)：[核心 Web 指标](/vitals)中的一项指标，通过计算未在用户输入 500 毫秒内发生的布局偏移的偏移分数总和来测量内容的不稳定性。该项指标查看可视区域中可见内容的位移量以及受影响元素的位移距离。
+
+在本篇指南中，我们将介绍针对布局偏移常见成因的优化方式。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="良好的 CLS 值低于 0.1，较差的值大于 0.25 并且中间的任何值都需要改进", width="384", height="96" %}
+</picture>
+
+CLS 较差的最常见原因为：
+
+- 无尺寸的图像
+- 无尺寸的广告、嵌入和 iframe
+- 动态注入的内容
+- 导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体
+- 在更新 DOM 之前等待网络响应的操作
+
+## 无尺寸的图像 🌆
+
+**概述**：始终在您的图像和视频元素上包含`width`和`height`属性。或者通过使用[CSS 长宽比容器](https://css-tricks.com/aspect-ratio-boxes/)预留所需的空间。这种方法可以确保浏览器能够在加载图像期间在文档中分配正确的空间大小。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/10TEOBGBqZm1SEXE7KiC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/WOQn6K6OQcoElRw0NCkZ.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8wKRITUkK3Zrp5jvQ1Xw.jpg", controls=true, loop=true, muted=true %}<figcaption>未指定宽度和高度的图像。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/38UiHViz44OWqlKFe1VC.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/sFxDb36aEMvTPIyZHz1O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/wm4VqJtKvove6qjiIjic.jpg", controls=true, loop=true, muted=true %}<figcaption>已指定宽度和高度的图像。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/A2OyrzSXuW1qYGWAarGx.png", alt="灯塔报告显示的在设置图像尺寸前/后对累积布局偏移的影响", width="800", height="148" %}<figcaption>灯塔 6.0 中设置图像尺寸对 CLS 的影响。</figcaption></figure>
+
+### 历史
+
+在网络发展的早期阶段，开发者会在他们的`<img>`标签中加入`width`和`height`属性，从而确保浏览器在开始获取图像前会在页面上预先分配足够的空间。这样可以最大限度地减少回流和重排。
+
+```html
+<img src="puppy.jpg" width="640" height="360" alt="小狗与气球" />
+```
+
+您可能会注意到，上方的`width`和`height`不包括单位。这些"像素"尺寸可以确保一块 640x360 的保留区域。无论图像的真实尺寸是否匹配，该图像都会被拉伸成保留区域的大小。
+
+[响应式网页设计](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)得到引入后，开发者开始省略`width`和`height`，并取而代之开始使用 CSS 来调整图像大小：
+
+```css
+img {
+  width: 100%; /* or max-width: 100%; */
+  height: auto;
+}
+```
+
+这种方法的一个缺点是，只有在图像开始下载且浏览器可以确定其尺寸后才能为图像分配空间。随着图像的加载，页面会随着每个图像出现在屏幕上而进行重排，因此导致文本常常突然出现在屏幕上。这与良好的用户体验相距甚远。
+
+这种情况下就需要用到长宽比。图像的长宽比是图像宽度与高度的比例。我们通常用由冒号分隔的两个数字来表示长宽比（例如 16:9 或 4:3）。x:y 的长宽比表示图像的宽度为 x 单位，高度为 y 单位。
+
+也就是说，如果我们知道其中一个维度，就可以确定另一个维度。对于 16:9 的长宽比：
+
+- 如果 puppy.jpg 的高度为 360px，则宽度为 360 x (16 / 9) = 640px
+- 如果 puppy.jpg 的宽度为 640px，则高度为 640 x (9 / 16) = 360px
+
+在知道长宽比的情况下，浏览器就能够进行计算，并为高度和其关联区域预留足够的空间。
+
+### 现代最佳实践
+
+现代浏览器目前会根据图像的宽度和高度属性设置图像的默认长宽比，因此，通过设置这些属性来防止布局偏移是非常有价值的。感谢 CSS 工作组的努力，开发者只需要照常设置`width`和`height`即可：
+
+```html
+<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
+<img src="puppy.jpg" width="640" height="360" alt="小狗与气球" />
+```
+
+……而且所有浏览器的[UA 样式表](https://developer.mozilla.org/docs/Web/CSS/Cascade#User-agent_stylesheets)都会根据元素现有的`width`和`height`属性添加[默认长宽比](https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images)：
+
+```css
+img {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+这会在图像加载之前根据`width`和`height`属性计算长宽比。样式表在布局计算的一开始就会提供此信息。一旦图像被设定为某一特定宽度（例如`width: 100%` ），就可以通过长宽比来计算高度。
+
+提示：如果您很难理解长宽比，还可以使用便捷的[计算器](https://aspectratiocalculator.com/16-9.html)来帮助计算。
+
+上述针对图像长宽比的变化已经在 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1547231) 和 [Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=979891) 中得到应用，并将在 [WebKit](https://twitter.com/smfr/status/1220051332767174656) (Safari) 中进行应用。
+
+如需深入了解长宽比并对响应式图像展开进一步思考，请参阅[使用媒体长宽比实现无卡顿页面加载](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/)。
+
+如果您的图像在容器中，您可以使用 CSS 将图像大小调整为该容器的宽度。我们需要设置`height: auto;`来避免图像高度为某个固定值（例如`360px` ）。
+
+```css
+img {
+  height: auto;
+  width: 100%;
+}
+```
+
+**如何处理响应式图像？**
+
+处理[响应式图像](/serve-responsive-images)时，`srcset`定义了允许浏览器选择的图像以及每个图像的大小。为了保证`<img>`的宽度和高度属性可以进行设置，每个图像都应该采用相同的长宽比。
+
+```html
+<img
+  width="1000"
+  height="1000"
+  src="puppy-1000.jpg"
+  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
+  alt="小狗与气球"
+/>
+```
+
+如何处理[美术设计](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)？
+
+页面可能会想要在窄可视区域中包含一张剪裁后的图像，并在桌面上显示完整图像。
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
+  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
+  <img src="puppy-800w.jpg" alt="小狗与气球" />
+</picture>
+```
+
+这些图像很可能具有不同的长宽比，而浏览器仍然在评估这种情况下最有效的解决方案，比如是否应该在所有图像来源中写明尺寸。在确定解决方案前，该情况下仍然可能会进行重排。
+
+## 无尺寸的广告、嵌入和 iframe 📢😱
+
+### 广告
+
+广告是网络布局偏移的最主要因素之一。广告网络和发布商通常支持动态广告尺寸。由于更高的点击率和更多的广告参与竞价，广告尺寸提高了绩效/收入。不幸的是，广告会将您正在查看的可见内容推至页面下方，因此可能会导致用户体验不佳。
+
+广告生命周期中有许多时间点可以引发布局偏移：
+
+- 当网站在 DOM 中插入广告容器时
+- 当网站使用第一方代码调整广告容器的大小时
+- 当广告标签库加载（并调整广告容器大小）时
+- 当广告填满容器（以及在最终广告尺寸不同的情况下调整尺寸）时
+
+好在网站可以遵循最佳实践来减少广告偏移。网站可以通过以下方式缓解这些布局偏移：
+
+- 为广告位静态预留空间。
+    - 换句话说，在加载广告标签库之前设置元素样式。
+    - 如果要在内容流中放置广告，请通过预留广告位大小来确保消除偏移现象。如果这些广告在屏幕外进行加载，则*不应*导致布局偏移。
+- 在可视区域顶部附近放置非粘性广告时需要留心。
+    - 在下方的示例中，我们建议将广告移动到"世界视野"标志的下方，并确保为广告位预留足够的空间。
+- 如果在广告位可见时没有返回广告，请通过显示占位符来避免折叠预留空间。
+- 通过为广告位预留尽可能大的空间尺寸来消除偏移现象。
+    - 这样虽然有效，但如果较小的广告创意填补了广告位，则可能会出现空白区域。
+- 根据历史数据为广告位选择最有可能的尺寸。
+
+如果不太可能填满广告位，一些网站可能会发现在最开始将广告位折叠可以减少布局偏移的发生。目前没有一种简单的方法可以每次都选择准确的尺寸，除非您自己控制广告投放。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/bmxqj3kZyplh0ncMAt7x.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/60c4T7aYOsKtZlaWBndS.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %}<figcaption>没有预留足够空间的广告。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/tyUFKrue5vI9o5qKjP42.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/hVxty51kdN1w5BuUvj2O.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rW77UoJQBHHehihkw2Rd.jpg", controls=true, loop=true, muted=true %}<figcaption>已预留足够空间的广告。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cX6R4ACb4uVKlUb0cv1c.png", alt="灯塔报告显示的在为广告等网页横幅预留空间前/后对累积布局偏移的影响", width="800", height="148" %}<figcaption>灯塔 6.0 中为该横幅预留空间对 CLS 的影响</figcaption></figure>
+
+#### 为广告位静态预留空间
+
+为相同大小的插槽 DOM 元素静态设置样式，并传递给您的标签库。这样有助于确保库在加载时不会引入布局偏移。如果不这样做，库就可能会在页面布局后改变插槽元素的大小。
+
+同时还要考虑较小广告服务的尺寸。如果投放较小的广告，发布商可以通过设置（较大）容器的样式来避免布局偏移。这种方法的缺点是会增加空白区域的面积，所以要注意权衡。
+
+#### 避免在可视区域顶部附近放置广告
+
+可视区域顶部附近的广告可能比中间的广告造成更大的布局偏移。这是因为顶部广告的下方通常会有更多的内容，这就意味着当广告引起偏移时，更多的元素会发生位移。相反，靠近可视区域中间的广告可能不会导致如此多的元素发生位移，因为该广告上方的内容不太可能移动。
+
+### 嵌入和 iframe
+
+可嵌入小组件使您能够在页面中嵌入可移植的网络内容（例如，来自 YouTube 的视频、来自 Google 地图的地图、社交媒体帖子等）。这些嵌入可以采用多种形式：
+
+- 通过 HTML 回退和一个 JavaScript 标签将回退转化为一个华丽的嵌入
+- 内联 HTML 片段
+- iframe 嵌入
+
+这些嵌入通常无法提前预知某个嵌入会有多大（以社交媒体帖子为例，帖子是否有嵌入的图像？视频？多行文本？）。因此，提供嵌入的平台并不总能为这些嵌入预留足够的空间，并可能在最终加载时导致布局偏移。
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/NRhY88MbNJxe4o0F52eS.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/PzOpQnPH88Ymbe3MCH7B.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0TM1JilKPQktQgb94un.jpg", controls=true, loop=true, muted=true %}<figcaption>无预留空间的嵌入。</figcaption></figure>
+
+  <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/aA8IoNeQTCEudE45hYzh.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/xjCWjSv4Z3YB29jSDGae.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gtYqKkoEse47ErJPqVjg.jpg", controls=true, loop=true, muted=true %}<figcaption>有预留空间的嵌入。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2XaMbZBmUit1Vz8UBshH.png", alt="灯塔报告显示的在为该嵌入预留空间前/后对累积布局偏移的影响", width="800", height="148" %}<figcaption> 灯塔 6.0 中为该嵌入预留空间对 CLS 的影响</figcaption></figure>
+
+要解决此问题，您可以通过使用占位符或后备回调符为嵌入预先计算足够的空间来最大程度减少 CLS。您可以在嵌入上采用下述工作流程：
+
+- 通过使用您的浏览器开发者工具对其进行检查来获取最终嵌入的高度
+- 嵌入加载后，所包含的 iframe 将根据其内容调整到合适大小。
+
+相应地记下嵌入的占位符的尺寸和样式。您可能需要使用媒体查询来了解不同形式因素之间广告/占位符大小的细微差异。
+
+### 动态内容 📐
+
+**概述**：除非是对用户交互做出响应，否则避免在现有内容的上方插入内容。这样能够确保任何布局偏移的发生都在预期之内。
+
+您可能已经在试图加载一个网站时经历过由于在可视区域顶部或底部弹出用户界面而导致的布局偏移。与广告类似，这通常是由横幅和表格导致的，这些横幅和表格会使页面的其余内容发生位移：
+
+- "订阅我们的新闻简报！"（喔，悠着点儿！我们才刚认识！）
+
+- "相关内容"
+
+- "安装我们的 [iOS/安卓] 应用程序"
+
+- "我们仍在接受订单"
+
+- "《一般数据保护条例》通知"
+
+    <figure>{% Video src=["video/tcFciHGuF3MxnTr1y5ue01OGLBn2/LEicZ7zHqGFrXl67Olve.webm", "video/tcFciHGuF3MxnTr1y5ue01OGLBn2/XFvOHc2OB8vUD9GbpL2w.mp4"], poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PF9ulVHDQOvoWendb6ea.jpg", controls=true, loop=true, muted=true %}<figcaption>无预留空间的动态内容。</figcaption></figure>
+
+如果您需要显示上述类型的用户界面可供性，请提前在可视区域中为其预留足够的空间（例如，使用占位符或骨架用户界面），以便在加载时不会导致页面内容发生意外位移.
+
+在某些情况下，动态添加内容是用户体验的一个重要部分。例如，加载更多的产品到项目列表或更新实时反馈内容。在这些情况下，有几种方法可以避免意外布局偏移。
+
+- 在一个固定尺寸的容器中用新内容替换旧内容，或者使用轮播，在过渡后删除旧内容。请记得在过渡完成之前禁用任何链接和控件，防止在新内容进入时发生意外点击或触摸。
+- 让用户主动加载新内容，这样他们就不会对偏移（例如出现"加载更多"或"刷新"按钮）感到惊讶。我们建议在用户交互前预取内容，以便立即进行显示。这里需要提醒一下，在用户输入后 500 毫秒内发生的布局偏移不计入 CLS。
+- 无缝加载屏幕外的内容，并向用户叠加一个通知，说明内容已经可用（例如，显示一个 "向上滚动 "按钮）。
+
+<figure>   {% Img src="image/OcYv93SYnIg1kfTihK6xqRDebvB2/TjsYVkcDf03ZOVCcsizv.png", alt="来自 Twitter 和 Chloé 网站的没有造成意外布局偏移的动态内容加载示例", width="800", height="458" %}   <figcaption>没有造成意外布局偏移的动态内容加载示例。左图：Twitter 上的实时内容加载。右图：Chloé 网站上的"加载更多"示例。欢迎查看 YNAP 团队如何<a href="https://medium.com/ynap-tech/how-to-optimize-for-cls-when-having-to-load-more-content-3f60f0cf561c">在加载更多内容时对 CLS 进行优化</a>。</figcaption></figure>
+
+### 导致无样式文本闪烁 (FOUT)/不可见文本闪烁 (FOIT) 的网络字体 📝
+
+下载和渲染网络字体可能通过两种方式导致布局偏移：
+
+- 后备字体替换为新字体（FOUT：无样式文本闪烁）
+- 新字体完成渲染前显示"不可见"文本（FOIT：不可见文本闪烁）
+
+以下工具可以帮助您最大程度地减少这种情况：
+
+- <code>[font-display](https://developer.chrome.com/docs/lighthouse/performance/font-display/)</code>使您能够通过使用<code>auto</code>、<code>swap</code>、<code>block</code>、<code>fallback</code>和<code>optional</code>值来修改自定义字体的渲染行为。遗憾的是，所有这些值（除 [optional](http://crrev.com/749080) 外）都可能通过上述某种方式导致重排。
+- [字体加载 API](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#the_font_loading_api) 可以减少获取必要字体所需的时间。
+
+从 Chrome 83 开始，我还会推荐以下做法：
+
+- 在关键网络字体上使用`<link rel=preload>`：预加载的字体将有更大几率在首次绘制中出现，而在这种情况下将不会发生布局偏移。
+- 将`<link rel=preload>`和`font-display: optional`结合使用
+
+阅读[通过预加载可选字体来防止布局偏移和不可见文本闪烁 (FOIT)](/preload-optional-fonts/)了解更多详情。
+
+### 动画 🏃‍♀️
+
+**概述**：倾向于选择`transform`动画，而不是触发布局偏移的属性动画。
+
+对 CSS 属性值的更改可能需要浏览器对这些更改做出反应。许多值都会触发重排、绘制和合成，例如`box-shadow`和`box-sizing`。很多 CSS 属性可以通过代价更小的方式进行更改。
+
+如需进一步了解哪些 CSS 属性会触发布局，请参阅[CSS 触发器](https://csstriggers.com/)和[高性能动画](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)。
+
+### 开发者工具 🔧
+
+我很高兴与大家分享可用于测量和调试累积布局偏移 (CLS) 的各种工具。
+
+[灯塔](https://developer.chrome.com/docs/lighthouse/overview/)[6.0](https://github.com/GoogleChrome/lighthouse/releases)及更高版本支持在实验室环境中测量 CLS。该版本还将突出显示导致最多布局偏移的节点。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J11KOGFVAOjRMdihwX5t.jpg", alt="灯塔 6.0 支持在指标部分测量 CLS", width="800", height="309" %}
+
+开发者工具中的[性能面板](https://developer.chrome.com/docs/devtools/evaluate-performance/)突出显示了 Chrome 84 中**体验**部分的布局偏移。`Layout Shift`记录的**摘要**视图包括累积布局偏移分数以及显示受影响区域的矩形叠加层。
+
+<figure>{% Img src="image/admin/ApDKifKCRNGWI2SXSR1g.jpg", alt="展开体验部分时，Chrome 开发者工具性能面板中显示出布局偏移记录", width="800", height="438" %}<figcaption>在性能面板中记录新的跟踪后，结果中的<b>体验</b>部分将填充一个显示<code>Layout Shift</code>记录的红色条。单击记录可以让您详细了解受影响的元素（例如，标记位移自/至条目）。</figcaption></figure>
+
+通过[Chrome 用户体验报告](https://developer.chrome.com/blog/chrome-ux-report-bigquery/)也可以测量在域级聚合下的真实 CLS。 CrUX CLS 数据可以通过 BigQuery 获得，并且可以使用[样本查询](https://github.com/GoogleChrome/CrUX/blob/master/sql/cls-summary.sql)查看 CLS 性能 。
+
+以上就是本篇指南的全部内容。我希望这篇指南有助于让您的页面不再那么变化多端 :)
+
+*感谢 Philip Walton、Kenji Baheux、Warren Maresca、Annie Sullivan、Steve Kobes 和 Gilberto Cocchi 的有益评论。*
diff --git a/src/site/content/zh/blog/optimize-fid/index.md b/src/site/content/zh/blog/optimize-fid/index.md
new file mode 100644
index 00000000000..b46868c4546
--- /dev/null
+++ b/src/site/content/zh/blog/optimize-fid/index.md
@@ -0,0 +1,173 @@
+---
+title: 优化 First Input Delay 首次输入延迟
+subhead: 如何更快地响应用户交互。
+authors:
+  - houssein
+  - addyosmani
+date: 2020-05-05
+updated: 2022-07-18
+hero: image/admin/WH0KlcJXJlxvsxU9ow2i.jpg
+alt: 一只手触摸智能手机屏幕
+description: 首次输入延迟 (FID) 测量从用户第一次与您的网站交互直到浏览器实际能够对交互作出响应的时间。了解如何通过最小化未使用的 JavaScript、分割长任务和改进交互准备来优化 FID。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+<blockquote>
+  <p>我明明点击了，却什么也没发生！为什么我无法与这个页面交互？😢</p>
+</blockquote>
+
+[First Contentful Paint 首次内容绘制](/fcp/) (FCP) 和[Largest Contentful Paint 最大内容绘制](/lcp/) (LCP) 都是测量内容在页面上完成视觉渲染（绘制）所需时间的指标。尽管这两项指标十分重要，但绘制时间并不能捕获*加载响应度*：或页面对用户交互的响应速度。
+
+[首次输入延迟](/fid/) (FID) 是[核心 Web 指标](/vitals/)中的一项指标，可捕获用户对网站交互性和响应度的第一印象。该项指标测量从用户第一次与您的网站交互直到浏览器实际能够对交互作出响应的时间。FID 是一项[实际指标](/user-centric-performance-metrics/#in-the-field)，无法在实验室环境中进行模拟。该项指标需要**真实的用户交互**才能测量响应延迟。
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="好的fid 值为2.5 秒，差的值大于4.0 秒，中间的任何值都需要改进", width="384", height="96" %}
+  </picture>
+
+为了有助于在[实验室](/how-to-measure-speed/#lab-data-vs-field-data)中预测 FID，我们建议您测量[Total Blocking Time 总阻塞时间 (TBT)](/tbt/)。虽然这两项指标的测量内容不同，但 TBT 的改进通常能够带来 FID 的相应改进。
+
+糟糕的 FID 主要是由**繁重的 JavaScript 执行**导致的。优化您网页上 JavaScript 的解析、编译和执行方式将直接降低 FID。
+
+## 繁重的 JavaScript 执行
+
+浏览器在主线程上执行 JavaScript 时无法对大多数用户输入作出响应。换句话说，当主线程繁忙时，浏览器无法响应用户交互。要想改善这一点：
+
+- [分割长任务](#long-tasks)
+- [优化您的页面，做好交互准备](#optimize-interaction-readiness)
+- [使用 Web Worker](#use-a-web-worker)
+- [减少 JavaScript 执行时间](#reduce-javascript-execution)
+
+## 分割长任务 {: #long-tasks }
+
+如果您已经尝试过减少在单个页面上加载的 JavaScript 数量，那么另一个可能会非常有用的做法是将长时间运行的代码拆解为**更小的异步任务**。
+
+[**长任务**](/custom-metrics/#long-tasks-api)是 JavaScript 的执行期，这期间，用户可能会发现您的用户界面没有响应。任何阻塞主线程 50 毫秒或以上的代码都可以被称为长任务。长任务是潜在 JavaScript 膨胀的标志（加载和执行的内容超出用户现在可能需要的范围）。将长任务拆分可以减少您网站上的输入延迟。
+
+<figure>
+  {% Img src="image/admin/THLKu0sOPhSghNr0XkP1.png", alt="Chrome 开发者工具中的长任务", width="800", height="132" %}
+  <figcaption> Chrome 开发者工具在性能面板中<a href="https://developers.google.com/web/updates/2020/03/devtools#long-tasks">将长任务可视化</a></figcaption>
+</figure>
+
+当您采用类似代码分割和分割长任务这样的最佳实践后，FID 应该会得到显著改善。虽然 TBT 不是一项实际指标，但该指标对于查看 Time To Interactive 可交互时间 (TTI) 和 FID 的最终改进进度非常有用。
+
+{% Aside %}如需了解更多信息，请查看[JavaScript 长任务是否会延迟您的可交互时间？](/long-tasks-devtools/)。{% endAside %}
+
+## 优化您的页面，做好交互准备
+
+对于高度依赖 JavaScript 的网络应用程序来说，导致 FID 和 TBT 分数较差的常见原因有很多：
+
+### 第一方脚本执行会延迟交互准备
+
+- JavaScript 体积膨胀、执行时间过长和分块效率低下会延迟页面对用户输入作出响应的时机，并影响 FID、TBT 和 TTI。渐进式加载代码和功能可以有助于分散工作量，改善交互准备。
+- 服务端渲染的应用程序在屏幕上绘制像素的速度可能看起来很快，但需要注意用户交互被大型脚本执行（例如通过数据重构来连接事件侦听器）阻塞的情况。如果使用了基于路由的代码分割，这可能会花费数百毫秒，有时甚至是数秒。请考虑将更多逻辑转移到服务器端，或在构建期间静态生成更多内容。
+
+以下是优化某应用程序的第一方脚本加载之前和之后的 TBT 分数。通过移除关键路径上消耗大量资源为非必要组件加载（和执行）的脚本，用户便能够更快地与页面进行交互。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TEIbBnIAyfzIoQtvXvMk.png", alt="优化第一方脚本后，灯塔中 TBT 分数的改善。", width="800", height="148" %}
+
+### 数据获取会影响交互准备的许多方面
+
+- 等待一连串的级联获取（例如组件的 JavaScript 和数据获取）会影响交互延迟。请尽量最大限度地减少对级联数据获取的依赖。
+- 大型内联数据存储会延长 HTML 解析时间并影响绘制和交互指标。请尽量最大限度地减少需要在客户端进行后处理的数据量。
+
+### 第三方脚本执行也会加剧交互延迟
+
+- 许多网站包括的第三方标签和分析会使网络一直处于忙碌状态，并使主线程周期性地无响应，从而影响交互延迟。请探究按需加载第三方代码的相关做法（例如，不要加载还未滚动到可视区域附近的非首屏广告）。
+- 在某些情况下，第三方脚本会在主线程的优先级和带宽方面抢占第一方脚本，并延迟页面做好交互准备的时机。请尝试优先加载您认为可以为用户提供最大价值的内容。
+
+## 使用 Web Worker
+
+被阻塞的主线程是输入延迟的主要原因之一。[Web Worker](https://developer.mozilla.org/docs/Web/API/Worker)能够让 JavaScript 在后台线程上运行。将非用户界面操作移动到单独的工作线程上可以缩减主线程阻塞时间，从而改善 FID。
+
+请考虑使用以下库来使您更轻松地在网站上使用 Web Worker：
+
+- [Comlink](https://github.com/GoogleChromeLabs/comlink)：一个助手类库，该库抽象了`postMessage`，使其更易于使用
+- [Workway](https://github.com/WebReflection/workway) : 一个通用的 Web Worker 导出器
+- [Workerize](https://github.com/developit/workerize)：将模块移动到 Web Worker 中
+
+{% Aside %}如需进一步了解 Web Worker 如何在主线程外执行代码，请参阅[使用 Web Worker 在浏览器主线程外运行 JavaScript](/off-main-thread/)。{% endAside %}
+
+### 减少 JavaScript 执行时间 {: #reduce-javascript-execution }
+
+限制页面上 JavaScript 的数量可以减少浏览器执行 JavaScript 代码所需的时间。这样能够使浏览器更迅速地开始对任何用户交互作出响应。
+
+要想减少在页面上执行的 JavaScript 数量：
+
+- 延迟加载未使用的 JavaScript
+- 最大限度减少未使用的 polyfill
+
+#### 延迟加载未使用的 JavaScript
+
+默认情况下，所有 JavaScript 都是阻塞渲染的。当浏览器遇到链接到外部 JavaScript 文件的脚本标签时，就必须暂停正在执行的操作，转而下载、解析、编译和执行该 JavaScript。因此，您应该只加载页面所需的代码或响应用户输入所需的代码。
+
+Chrome 开发者工具中的[代码覆盖率](https://developer.chrome.com/docs/devtools/coverage/)选项卡能够告诉您网页上有多少未在使用的 JavaScript。
+
+{% Img src="image/admin/UNEigFiwsGu48rtXMZM4.png", alt="代码覆盖率选项卡。", width="800", height="559" %}
+
+要想精简未使用的 JavaScript：
+
+- 将您的资源包代码拆分为多个块
+- 使用`async`或`defer`延迟加载任何非关键 JavaScript，包括第三方脚本
+
+**代码分割**是将单个大型 JavaScript 包拆分为可以按需加载（也称懒加载）的多个小块的概念。[大多数较新的浏览器都支持动态导入语法](https://caniuse.com/#feat=es6-module-dynamic-import)，因此能够按需获取模块：
+
+```js
+import('module.js').then((module) => {
+  // 对模块进行一些操作。
+});
+```
+
+在进行某些用户交互（例如更改路由或显示模态框）时动态导入 JavaScript 将确保仅在需要时才获取初始页面加载中未使用的代码。
+
+除了一般浏览器支持外，动态导入语法还可用于许多不同的构建系统。
+
+- 如果您使用[webpack](https://webpack.js.org/guides/code-splitting/)、[Rollup](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82)或[Parcel](https://parceljs.org/code_splitting.html)模块打包器，请多加利用这些工具的动态导入支持。
+- [React](https://reactjs.org/docs/code-splitting.html#reactlazy)、[Angular](https://angular.io/guide/lazy-loading-ngmodules)和[Vue](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components)等客户端框架实现了抽象，使组件级的懒加载变得更加容易。
+
+{% Aside %}请查看[使用代码分割减少 JavaScript 有效负载](/reduce-javascript-payloads-with-code-splitting/)，了解代码分割的更多相关信息。{% endAside %}
+
+除了代码分割之外，请始终对关键路径或首屏内容不需要的脚本使用 [async 或 defer](https://javascript.info/script-async-defer)。
+
+```html
+<script defer src="…"></script>
+<script async src="…"></script>
+```
+
+除非有特殊原因，否则所有第三方脚本在默认情况下都应该使用`defer`或`async`来加载。
+
+#### 最大限度减少未使用的 polyfill
+
+如果您使用现代 JavaScript 语法编写代码并参考现代浏览器 API，那么要使您的代码在旧版本浏览器中正常工作，您将需要对代码进行转译并包括 polyfill。
+
+在您的网站中包括 polyfill 和转译代码会带来性能方面的一个主要担忧，即如果新版本浏览器不需要这些资源，则不必进行下载。要想精简您应用程序的 JavaScript 大小，请尽可能地减少未使用的 polyfill，并且只在需要它们的环境中进行使用。
+
+如需优化您网站上的 polyfill 使用：
+
+- 如果您在使用 [Babel](https://babeljs.io/docs/en/index.html) 转译器，请使用[`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)来只将您计划定位的浏览器所需的 polyfill 包括在其中。对于 Babel 7.9，启用[`bugfixes`](https://babeljs.io/docs/en/babel-preset-env#bugfixes)选项来进一步精简任何不需要的 polyfill
+
+- 使用模块/非模块模式来交付两个单独的资源包（`@babel/preset-env`也能够通过[`target.esmodules`](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)支持这一操作）
+
+    ```html
+    <script type="module" src="modern.js"></script>
+    <script nomodule src="legacy.js" defer></script>
+    ```
+
+    许多使用 Babel 编译的较新的 ECMAScript 特性已经在支持 JavaScript 模块的环境中得到支持。因此，您可以通过这一做法对确保仅将转译代码用于实际有需要的浏览器的过程进行简化。
+
+{% Aside %}[为现代浏览器提供现代代码来实现更快的页面加载速度](/serve-modern-code-to-modern-browsers/)指南对该主题展开了详细探讨。{% endAside %}
+
+## 开发者工具
+
+许多工具都可以用于测量和调试 FID：
+
+- [灯塔 6.0](https://developer.chrome.com/docs/lighthouse/overview/) 不支持 FID，因为 FID 是一个实际指标。但是，可以用[总阻塞时间](/tbt/) (TBT) 作为代理。能够改进 TBT 的优化也应该能改进实际情况下的 FID。
+
+    {% Img src="image/admin/FRM9kHWmsDv9dddGMgwu.jpg", alt="灯塔 6.0.", width="800", height="309" %}
+
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)提供在域级聚合下的真实 FID 值
+
+*感谢 Philip Walton、Kayce Basques、Ilya Grigorik 和 Annie Sullivan 的审阅。*
diff --git a/src/site/content/zh/blog/optimize-lcp/index.md b/src/site/content/zh/blog/optimize-lcp/index.md
new file mode 100644
index 00000000000..ed798b77268
--- /dev/null
+++ b/src/site/content/zh/blog/optimize-lcp/index.md
@@ -0,0 +1,355 @@
+---
+title: 优化 Largest Contentful Paint 最大内容绘制
+subhead: 如何更快地渲染您的主要内容。
+authors:
+  - houssein
+date: 2020-05-05
+updated: 2020-08-20
+hero: image/admin/qqTKhxUFqdLXnST2OFWN.jpg
+alt: 优化 LCP 横幅
+description: 最大内容绘制 (LCP) 可用于确定页面的主要内容何时在屏幕上完成渲染。了解如何通过改善缓慢的服务器响应速度、资源加载速度和客户端渲染速度来优化 LCP。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+{% YouTube id='AQqFZ5t8uNc', startTime='1073' %}
+
+<blockquote>
+  <p>我看不到任何有用的内容！为什么加载需要这么长时间？ 😖</p>
+</blockquote>
+
+导致用户体验不佳的一大因素是用户在看到任何内容在屏幕上完成渲染前所需的时间。[First Contentful Paint 首次内容绘制](/fcp) (FCP) 测量初始 DOM 内容完成渲染所需的时间，但该指标无法捕获页面上的最大（通常也更有意义）内容完成渲染所需的时间。
+
+[最大内容绘制](/lcp) (LCP) 是[核心 Web 指标](/vitals/)中的一项指标，用于测量可视区域中最大内容元素变为可见的时间点。该项指标可用于确定页面主要内容在屏幕上完成渲染的时间点。
+
+  <picture>
+    <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)">
+    {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9trpfS9wruEPGekHqBdn.svg", alt="好的 LCP 值为 2.5 秒，差的值大于 4.0 秒，两者之间的任何值都需要改进", width="384", height="96" %}
+  </picture>
+
+导致 LCP 不佳的最常见原因是：
+
+- [缓慢的服务器响应速度](#slow-servers)
+- [阻塞渲染的 JavaScript 和 CSS](#render-blocking-resources)
+- [缓慢的资源加载速度](#slow-resource-load-times)
+- [客户端渲染](#client-side-rendering)
+
+## 缓慢的服务器响应速度 {: #slow-servers }
+
+浏览器从服务器接收内容所需的时间越长，在屏幕上渲染任何内容所需的时间就越长。更快的服务器响应速度能直接改善包括 LCP 在内的各项页面加载指标。
+
+您首先需要做的是改进服务器处理内容的方式和位置。请使用[**Time to First Byte 首字节时间**](/ttfb/) (TTFB) 来测量您的服务器响应时间。您可以通过多种不同的方式来改进您的 TTFB：
+
+- 优化您的服务器
+- 将用户路由到附近的 CDN
+- 缓存资产
+- 优先使用缓存提供 HTML 页面
+- 尽早建立第三方连接
+- 使用签名交换
+
+### 优化您的服务器
+
+您是否正在运行需要消耗大量时间和系统资源才能完成的查询？或者服务器端是否有其他复杂的操作会延迟页面内容的返回过程？分析和提高您服务器端代码的效率将直接改善浏览器接收数据所需的时间。
+
+许多服务器端网络框架并不会在浏览器请求时立即提供静态页面，而是需要动态创建网络页面。换句话说，框架并不会在浏览器请求时发送一个已经准备好的完整 HTML 文件，而是需要运行逻辑来构建页面。这可能是由于数据库查询结果待定，甚至是因为组件需要由用户界面框架（例如[React](https://reactjs.org/docs/react-dom-server.html)）生成为标记。在服务器上运行的许多网络框架都有性能指导，您可以利用这些指导来加快此过程。
+
+{% Aside %}请查看[修复过载服务器](/overloaded-server/)，获取更多建议。{% endAside %}
+
+### 将用户路由到附近的 CDN
+
+内容分发网络 (CDN) 是分布在许多不同位置的服务器网络。如果您将网页内容托管在单个服务器上，那么对于地理位置较远的用户来说，您的网站加载速度就会变慢，因为他们的浏览器请求不得不跨越千山万水。您可以考虑使用 CDN 来确保您的用户永远不必为发送到远距离服务器的网络请求而等待。
+
+### 缓存资产
+
+如果您的 HTML 是静态的，且不需要针对每个请求进行更改，那么缓存可以防止网页进行不必要的重建。通过在磁盘上存储已生成 HTML 的副本，服务器端缓存可以减少 TTFB 并最大限度地减少资源使用。
+
+根据您所使用的工具链，有许多不同的方法可以进行服务器缓存：
+
+- 配置反向代理（[Varnish](https://varnish-cache.org/)、[nginx](https://www.nginx.com/)）来提供缓存内容，或者当安装在应用程序服务器之前时充当缓存服务器
+- 配置和管理您的云服务提供商（[Firebase](https://firebase.google.com/docs/hosting/manage-cache)、[AWS](https://aws.amazon.com/caching/)、[Azure](https://docs.microsoft.com/en-us/azure/architecture/best-practices/caching)）的缓存行为
+- 使用提供边缘服务器的 CDN，以便将您的内容进行缓存并存储在离您的用户更近的地方
+
+### 优先使用缓存提供 HTML 页面
+
+安装好的 [Service Worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) 会在浏览器后台运行，并可以拦截来自服务器的请求。此级别的程序化缓存控制使得缓存部分或全部 HTML 页面内容得以实现，并且只会在内容发生更改时更新缓存。
+
+下方的图表显示使用该模式能够减少网站的 LCP 分布：
+
+<figure>{% Img src="image/admin/uB0Sm56R88MRF16voQ1k.png", alt="HTML 缓存前后的最大内容绘制分布", width="800", height="495" %}<figcaption>最大内容绘制分布，使用（和未使用）Service Worker 进行页面加载的情况 - <a href="https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/">philipwalton.com</a></figcaption></figure>
+
+该图表显示了过去 28 天内某个网站的 LCP 分布，并且按 Service Worker 状态进行了细分。请注意，在 Service Worker 中引入优先使用缓存的 HTML 页面服务后，大多数页面加载的 LCP 值都变得更为迅速（图表的蓝色部分）。
+
+{% Aside %}如需了解优先使用缓存提供完整或部分 HTML 页面的更多相关技巧，请查看[使用 Service Worker 实现更小的 HTML 有效负载](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/){% endAside %}
+
+### 尽早建立第三方连接
+
+对第三方域的服务器请求也会影响 LCP，尤其是当浏览器需要这些请求来在页面上显示关键内容的情况下。使用`rel="preconnect"`来告知浏览器您的页面打算尽快建立连接。
+
+```html
+<link rel="preconnect" href="https://example.com" />
+```
+
+您还可以使用`dns-prefetch`来更快地完成 DNS 查找。
+
+```html
+<link rel="dns-prefetch" href="https://example.com" />
+```
+
+尽管两种提示的原理不同，但对于不支持`preconnect`的浏览器，可以考虑将`dns-prefetch`做为后备。
+
+```html
+<head>
+  …
+  <link rel="preconnect" href="https://example.com" />
+  <link rel="dns-prefetch" href="https://example.com" />
+</head>
+```
+
+{% Aside %}如需了解更多详情，请阅读[尽早建立网络连接来提高页面感知速度](/preconnect-and-dns-prefetch/){% endAside %}
+
+### 使用签名交换（SXG）
+
+[签名交换 (SXG)](/signed-exchanges) 是一种交付机制，通过提供采用了易于缓存格式的内容来实现更快的用户体验。具体来说， [Google 搜索](https://developers.google.com/search/docs/advanced/experience/signed-exchange)会缓存 SXG，有时也会预获取 SXG。对于通过 Google 搜索获得大部分流量的网站，SXG 可以是改进 LCP 的重要工具。如需了解更多信息，请参阅[签名交换](/signed-exchanges)。
+
+## 阻塞渲染的 JavaScript 和 CSS {: #render-blocking-resources }
+
+浏览器在能够渲染任何内容之前，需要将 HTML 标记解析为 DOM 树。如果 HTML 解析器遇到任何外部样式表（`<link rel="stylesheet">`）或同步 JavaScript 标签（`<script src="main.js">`），则会暂停解析。
+
+脚本和样式表都是阻塞渲染的资源，这些资源会使 FCP 延迟，进而导致 LCP 延迟。延迟加载任何非关键的 JavaScript 和 CSS，从而提高网页主要内容的加载速度。
+
+### 减少 CSS 阻塞时间
+
+通过以下操作确保您的网站上只有最少量的必要 CSS 会阻塞渲染：
+
+- 削减 CSS
+- 延迟加载非关键 CSS
+- 内联关键 CSS
+
+### 削减 CSS
+
+为了更加易于阅读，CSS 文件可以包含空格、缩进或注释等字符。这些字符对于浏览器来说都不是必要的，而对这些文件进行削减能够确保将这些字符删除。最终，在减少了阻塞渲染的 CSS 数量后，充分渲染页面主要内容所需的时间 (LCP) 也总是能够相应地缩短。
+
+如果您使用模块打包器或构建工具，那么可以在其中包含一个相应的插件来在每次构建时削减 CSS 文件：
+
+- 对于 webpack：[optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
+- 对于 Gulp：[gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)
+- 对于 Rollup：[rollup-plugin-css-porter](https://www.npmjs.com/package/rollup-plugin-css-porter)
+
+<figure>{% Img src="image/admin/vQXSKrY1Eq3CKkNbu9Td.png", alt="LCP 改进示例：削减 CSS 前后对比", width="800", height="139" %}<figcaption>LCP 改进示例：削减 CSS 前后对比</figcaption></figure>
+
+{% Aside %} 如需了解更多详情，请参阅[削减 CSS](/minify-css/) 指南。{% endAside %}
+
+### 延迟加载非关键 CSS
+
+使用 Chrome 开发者工具中的[代码覆盖率](https://developer.chrome.com/docs/devtools/coverage/)选项卡查找您网页上任何未使用的 CSS。
+
+{% Img src="image/admin/wjS4NrU5EsJeCuvK0zhn.png", alt="Chrome 开发者工具中的代码覆盖率选项卡", width="800", height="559" %}
+
+优化方式：
+
+- 如果是在您网站的单独页面上使用，可以将所有未使用的 CSS 完全删除或移动到另一个样式表。
+- 对于任何初始渲染时不需要的 CSS，请使用 [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) 来异步加载文件，这里运用了`rel="preload"`和`onload`。
+
+```html
+<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
+```
+
+<figure>{% Img src="image/admin/2fcwrkXQRQrM8w1qyy3P.png", alt="LCP 改进示例：延迟加载非关键 CSS 前后对比", width="800", height="139" %}<figcaption>LCP 改进示例：延迟加载非关键 CSS 前后对比</figcaption></figure>
+
+{% Aside %}如需了解更多详情，请参阅[延迟加载非关键 CSS](/defer-non-critical-css/) 指南。 {% endAside %}
+
+### 内联关键 CSS
+
+通过把用于首屏内容的任何关键路径 CSS 直接包括在`<head>`中来将这些 CSS 进行内联。
+
+<figure>{% Img src="image/admin/m0n0JsLpH9JsNnXywSwz.png", alt="内联的关键 CSS", width="800", height="325" %}<figcaption>内联的关键 CSS</figcaption></figure>
+
+将重要样式进行内联后，就不再需要通过往返请求来获取关键 CSS。延迟加载其余部分可以最大限度地减少 CSS 阻塞时间。
+
+如果您无法为您的网站手动添加内联样式，请使用库来将该过程自动化。一些示例：
+
+- [Critical](https://github.com/addyosmani/critical)、[CriticalCSS](https://github.com/filamentgroup/criticalCSS) 和 [Penthouse](https://github.com/pocketjoso/penthouse) 都是提取和内联首屏 CSS 的包
+- [Critters](https://github.com/GoogleChromeLabs/critters) 是一个 webpack 插件，能够内联关键 CSS 并对其余部分进行懒加载
+
+<figure>{% Img src="image/admin/L8sc51bd3ckxwnUfczC4.png", alt="LCP 改进示例：内联关键 CSS 前后对比", width="800", height="175" %}<figcaption>LCP 改进示例：内联关键 CSS 前后对比</figcaption></figure>
+
+{% Aside %}请查看[提取关键 CSS](/extract-critical-css/) 指南了解更多信息。{% endAside %}
+
+### 减少 JavaScript 阻塞时间
+
+下载并向用户提供尽可能少的必要 JavaScript。减少阻塞渲染的 JavaScript 数量能够让渲染速度更快，从而获得更好的 LCP。
+
+这可以通过优化您的脚本来实现，有如下几种不同的方式：
+
+- [削减和压缩 JavaScript 文件](/reduce-network-payloads-using-text-compression/)
+- [延迟加载未使用的 JavaScript](/reduce-javascript-payloads-with-code-splitting/)
+- [最大限度减少未使用的 polyfill](/serve-modern-code-to-modern-browsers/)
+
+{% Aside %}[优化首次输入延迟](/optimize-fid/)指南更详细地介绍了减少 JavaScript 阻塞时间所需的全部技巧。{% endAside %}
+
+## 缓慢的资源加载速度 {: #slow-resource-load-time }
+
+虽然 CSS 或 JavaScript 阻塞时间的增加会直接导致性能下降，但加载许多其他类型资源所需的时间也会影响绘制时间。影响 LCP 的元素类型为：
+
+- `<img>`元素
+- 内嵌在`<svg>`元素内的`<image>`元素
+- `<video>`元素（使用[封面](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)图像测量 LCP）
+- 通过[`url()`](https://developer.mozilla.org/docs/Web/CSS/url())函数（而非使用<a> CSS 渐变</a>）加载的带有背景图像的元素
+- 包含文本节点或其他行内级文本元素的[块级](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)元素
+
+如果在首屏渲染，加载这些元素所需的时间将对 LCP 产生直接影响。有几种方法可以确保尽快加载这些文件：
+
+- 优化和压缩图像
+- 预加载重要资源
+- 压缩文本文件
+- 基于网络连接交付不同资产（自适应服务）
+- 使用 Service Worker 缓存资产
+
+### 优化和压缩图像
+
+对于许多网站来说，在页面加载完毕后，图像会是视图中的最大元素。这种情况的常见示例包括首图、大型轮播或横幅图像。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/unWra6cq0hPJJJT7Y3ye.png", alt="", width="459", height="925" %}<figcaption>图像为最大页面元素：<a href="https://design.google/">design.google</a></figcaption></figure>
+
+改善这些类型的图像进行加载和渲染所需的时间将直接提升 LCP 的速度。实现方式：
+
+- 首先考虑不使用图像。如果图像与内容无关，请将其删除。
+- 压缩图像（例如使用 [Imagemin](/use-imagemin-to-compress-images)）
+- 将图像转换为更新的格式（JPEG 2000、JPEG XR 或 WebP）
+- 使用响应式图像
+- 考虑使用图像 CDN
+
+{% Aside %}请查看[优化您的图像](/fast/#optimize-your-images)的相关指南和资源，其中对上述所有技巧展开了详细的阐述。{% endAside %}
+
+### 预加载重要资源
+
+有时，在某个 CSS 或 JavaScript 文件中声明或使用的重要资源可能会比您所期望的要晚一点被获取，例如深藏在应用程序众多 CSS 文件中的某个字体。
+
+如果您知道某个特定资源应该被优先获取，请使用`<link rel="preload">`来更加及时地获取该资源。 [多种类型的资源](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded)都可以进行预加载，但您应该首先侧重于[预加载关键资产](/preload-critical-assets/)，例如字体、首屏图像或视频，以及关键路径 CSS 或 JavaScript。
+
+```html
+<link rel="preload" as="script" href="script.js" />
+<link rel="preload" as="style" href="style.css" />
+<link rel="preload" as="image" href="img.png" />
+<link rel="preload" as="video" href="vid.webm" type="video/webm" />
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+从 Chrome 73 开始，预加载可以与[响应式图像](/preload-responsive-images/)一起使用，将两种模式相结合能够实现更快速的图像加载。
+
+```html
+<link
+  rel="preload"
+  as="image"
+  href="wolf.jpg"
+  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
+  imagesizes="50vw"
+/>
+```
+
+### 压缩文本文件
+
+压缩诸如 [Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) 和 [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) 之类的算法可以显著缩减在服务器和浏览器之间传输的文本文件（HTML、CSS、JavaScript）大小。所有浏览器都有效支持 Gzip，而 Brotli [几乎可以在所有较新的浏览器中使用](https://caniuse.com/#feat=brotli)，并能提供更好的压缩结果。
+
+压缩您的资源将最大限度地减少这些资源的交付大小、缩短加载时间，从而改善 LCP。
+
+1. 首先，检查您的服务器是否已经自动压缩文件。大多数托管平台、CDN 和反向代理服务器在默认情况下都会对资产进行压缩编码，或者使您能够轻松配置资产。
+2. 如果您需要对服务器进行修改来使其压缩文件，请考虑使用 Brotli，而不是 gzip，因为 Brotli 可以提供更好的压缩率。
+3. 选择您要使用的压缩算法后，请在构建过程中提前压缩资产，而不是在浏览器请求时实时压缩资产。这样能够最大限度地减少服务器开销并防止在发出请求时出现延迟，尤其是在使用高压缩比的情况下。
+
+<figure>{% Img src="image/admin/Ckh2Jjkoh7ojLj5Wxeqc.png", alt="LCP 改进示例：Brotli 压缩前后对比", width="800", height="139" %}<figcaption>LCP 改进示例：Brotli 压缩前后对比</figcaption></figure>
+
+{% Aside %} 如需了解更多详情，请参阅[削减和压缩网络有效负载](/reduce-network-payloads-using-text-compression/)指南。{% endAside %}
+
+### 自适应服务
+
+当加载构成页面主要内容的资源时，根据用户的设备或网络条件按需获取不同的资源会是一个有效做法。您可以使用[网络状况 API](https://wicg.github.io/netinfo/)、[设备内存 API](https://www.w3.org/TR/device-memory/) 和[硬件并发 API](https://html.spec.whatwg.org/multipage/workers.html#navigator.hardwareconcurrency) 来实现这一做法。
+
+如果您有对初始渲染十分关键的大型资产，那么您可以根据用户的连接或设备采用同一资源的不同变体。例如，对于任何低于 4G 的连接速度，您可以显示图像，而不是视频：
+
+```js
+if (navigator.connection && navigator.connection.effectiveType) {
+  if (navigator.connection.effectiveType === '4g') {
+    // 加载视频
+  } else {
+    // 加载图像
+  }
+}
+```
+
+您可以使用的一系列实用属性：
+
+- `navigator.connection.effectiveType`：有效连接类型
+- `navigator.connection.saveData`：启用/禁用数据保护程序
+- `navigator.hardwareConcurrency`：CPU 核心数
+- `navigator.deviceMemory`：设备内存
+
+{% Aside %}如需了解更多详情，请参阅[基于网络质量的自适应服务](/adaptive-serving-based-on-network-quality/)。{% endAside %}
+
+### 使用 Service Worker 缓存资产
+
+Service Worker 可用于完成许多有用的任务，其中包括本文前面提到的提供较小的 HTML 响应。Service Worker 还可用于缓存任何静态资源，并在收到重复请求时将资源直接提供给浏览器，而无需通过网络。
+
+使用 Service Worker 预缓存关键资源可以显著减少资源加载时间，特别是对于使用较弱连接重新加载网页（甚至离线访问）的用户。与自己编写自定义 Service Worker 来更新预缓存资产相比，诸如 [Workbox](https://developer.chrome.com/docs/workbox/) 这样的库可以使整个过程更加容易。
+
+{% Aside %}请查看[网络可靠性](/reliable/)，了解 Service Worker 和 Workbox 的更多相关信息。{% endAside %}
+
+## 客户端渲染 {: #client-side-rendering }
+
+许多网站使用客户端 JavaScript 逻辑直接在浏览器中渲染页面。诸如 [React](https://reactjs.org/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这类的框架和库使构建单页应用变得更加容易，这些单页应用完全在客户端（而不是在服务器）中处理网页的各个层面。
+
+如果您正在搭建一个主要在客户端进行渲染的网站，那么您应该特别小心网站在使用大型 JavaScript 包时可能对 LCP 产生的影响。如果您没有通过优化来加以阻止，那么在所有关键 JavaScript 完成下载和执行前，用户可能都无法看到页面上的任何内容或与之交互。
+
+在搭建客户端渲染的网站时，请考虑以下优化：
+
+- 最小化关键 JavaScript
+- 使用服务端渲染
+- 使用预渲染
+
+### 最小化关键 JavaScript
+
+如果您网站上的内容只有在一定数量的 JavaScript 完成下载后才变得可见或可以与之交互：尽可能缩减您的代码包的大小就变得尤为重要。这可以通过以下方式实现：
+
+- 削减 JavaScript
+- 延迟加载未使用的 JavaScript
+- 最大限度减少未使用的 polyfill
+
+请回到[减少 JavaScript 阻塞时间](#reduce-javascript-blocking-time)部分，阅读有关这些优化的更多信息。
+
+### 使用服务端渲染
+
+对于主要由客户端渲染的网站来说，首先需要关注的始终应该是将 JavaScript 的数量最小化。但是，您还应该考虑结合服务端渲染体验来尽可能地改善 LCP。
+
+这个概念的实现方式是使用服务器将应用渲染为 HTML，然后客户端将所有 JavaScript 及所需数据"[水合](https://www.gatsbyjs.org/docs/react-hydration/)"到相同的 DOM 内容中。这个做法可以通过确保页面的主要内容首先在服务器上进行渲染（而不是仅在客户端上进行渲染）来改进 LCP，但该做法有一些弊端：
+
+- 在服务器和客户端上维护相同的由 JavaScript 渲染的应用会增加复杂性。
+- 与只使用服务器提供静态页面相比，在服务器上执行 JavaScript 来渲染 HTML 文件总是会增加服务器响应时间 (首字节时间 TTFB)。
+- 服务端渲染的页面可能看似具备交互性，但在所有客户端 JavaScript 执行完毕之前，页面其实无法对任何用户输入作出响应。简而言之，该做法会使 [**Time to Interactive 可交互时间**](/tti/) (TTI) 变得更糟。
+
+### 使用预渲染
+
+预渲染是一种独立的技巧，该技巧比服务端渲染简单，并且还提供了一种改进应用程序 LCP 的方法。无头浏览器是一种没有用户界面的浏览器，我们会用无头浏览器在搭建期间生成每个路由的静态 HTML 文件。然后可以将这些文件与应用程序所需的 JavaScript 包一起进行运送。
+
+在使用预渲染后，TTI 仍然会受到负面影响，但服务器响应时间不会像服务端渲染解决方案（仅在接到请求后才对各个页面进行动态渲染）中那样受到很大影响。
+
+<figure>{% Img src="image/admin/sm9s16UHfh8a5MDEWjxa.png", alt="LCP 改进示例：预渲染前后对比", width="800", height="139" %}<figcaption>LCP 改进示例：预渲染前后对比</figcaption></figure>
+
+{% Aside %} 如需更深入地了解不同的服务端渲染架构，请查看[网络中的渲染](/rendering-on-the-web/)。{% endAside %}
+
+## 开发者工具
+
+许多工具都可以用于测量和调试 LCP：
+
+- [灯塔 6.0](https://developer.chrome.com/docs/lighthouse/overview/) 支持在实验室环境中测量 LCP。
+
+    {% Img src="image/admin/Sar3Pa7TDe9ibny6sfq4.jpg", alt="灯塔 6.0", width="800", height="309" %}
+
+- Chrome 开发者工具中[性能](https://developer.chrome.com/docs/devtools/evaluate-performance/)面板的**时间点**部分包括一个 LCP 标记，并会在您将鼠标悬停在**相关节点**字段上时显示哪些元素与 LCP 相关联。
+
+    {% Img src="image/admin/sxczQPKH0cvMBsNCx5uH.png", alt="Chrome 开发者工具中的 LCP", width="800", height="509" %}
+
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)提供在域级聚合下的真实 LCP 值
+
+*感谢 Philip Walton、Katie Hempenius、Kayce Basques 和 Ilya Grigorik 的审阅。*
diff --git a/src/site/content/zh/blog/payment-and-address-form-best-practices/index.md b/src/site/content/zh/blog/payment-and-address-form-best-practices/index.md
new file mode 100644
index 00000000000..c2b6bccc4c3
--- /dev/null
+++ b/src/site/content/zh/blog/payment-and-address-form-best-practices/index.md
@@ -0,0 +1,503 @@
+---
+title: 付款和地址表单最佳实践
+subhead: 帮助用户尽可能快速轻松地填写地址和付款表单，最大限度提高转化率。
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2021-11-30
+description: 帮助用户尽可能快速轻松地填写地址和付款表单，最大限度提高转化率。
+hero: image/admin/dbYeeV2PCRZNY6RRvQd2.jpg
+thumbnail: image/admin/jy8z8lRuLmmnyytD5xwl.jpg
+alt: 一位正在使用支付卡在笔记本电脑上付款的商人。
+tags:
+  - blog
+  - forms
+  - identity
+  - layout
+  - mobile
+  - payments
+  - security
+  - ux
+codelabs:
+  - codelab-payment-form-best-practices
+  - codelab-address-form-best-practices
+---
+
+{% YouTube 'xfGKmvvyhdM' %}
+
+精心设计的表单可以帮助用户和提高转化率。小小的改变可能会让结果大不相同！
+
+{% Aside 'codelab' %}如果您希望通过便捷的教程学习这些最佳实践，请查看本博文的两个代码实验室：
+
+- [付款表单最佳实践代码实验室](/codelab-payment-form-best-practices)
+- [地址表单最佳实践代码实验室](/codelab-address-form-best-practices){% endAside %}
+
+下面是付款表单的一个简单示例，其中演示了所有最佳实践：
+
+{% Glitch { id: 'payment-form', path: 'index.html', height: 720 } %}
+
+下面是地址表单的一个简单示例，其中演示了所有最佳实践：
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+## 清单
+
+- [使用有意义的 HTML 元素](#meaningful-html)：`<form>`、`<input>`、`<label>` 和 `<button>`。
+- [使用 `<label>` 标记每个表单字段](#html-label)。
+- 使用 HTML 元素属性[访问内置浏览器功能](#html-attributes)，特别是 [`type`](#type-attribute) 和具有适当值的 [`autocomplete`](#autocomplete-attribute)。
+- 对于不递增的数字，请避免使用 `type="number"`。您可以使用 `type="text"`和[`inputmode="numeric"`](#inputmode-attribute)。
+- 如果 `input`、`select` 或 `textarea` 可使用[适当的自动完成值](#autocomplete-attribute)，则应使用。
+- 为了帮助浏览器自动填充表单，请为输入的 `name` 和 `id` 属性提供[稳定值](#stable-name-id)，使其在页面加载或网站部署之间不会改变。
+- 点击或单击后[禁用提交按钮](#disable-submit)。
+- 在输入期间[验证](#validate)数据——不仅仅是在提交表单时。
+- 将[顾客结账](#guest-checkout)设为默认设置，并在结账完成后简化帐户创建过程。
+- 以清晰的步骤显示[结账流程进度](#checkout-progress)，并包含明确的号召性用语。
+- 消除杂乱和干扰，[限制潜在的结账退出点](#reduce-checkout-exits)。
+- 在结账时[显示完整的订单详细信息](#checkout-details)，简化订单调整操作。
+- [不要索要不需要的数据](#unneeded-data)。
+- [在单次输入中要求客户提供姓名](#single-name-input)，除非有充分的理由多次要求客户提供。
+- 不要强制要求姓名和用户名[只能使用拉丁字符](#unicode-matching)。
+- [允许使用多种地址格式](#address-variety)。
+- 考虑[对 address 使用单个`textarea`](#address-textarea) 。
+- 使用[自动填写账单地址](#billing-address)。
+- 必要时实施[国际化和本地化](#internationalization-localization)。
+- 考虑避免[查找邮政编码地址](#postal-code-address-lookup)。
+- 使用[适当的支付卡自动填写值](#payment-form-autocomplete)。
+- [让客户在单一输入中提供支付卡号](#single-number-input)。
+- 如果[自定义元素](#avoid-custom-elements)会破坏自动填写体验，请避免使用。
+- [现场和实验室测试](#analytics-rum)：页面分析、交互分析及真实用户性能测量。
+- [在一系列浏览器、设备和平台上测试](#test-platforms)。
+
+{% Aside %}本文介绍地址和付款表单的前端最佳实践，其中没有阐述如何在网站上实施交易。要了解在网站上添加支付功能的更多信息，请参阅 [Web 支付](/payments)。{% endAside %}
+
+## 使用有意义的 HTML {: #meaningful-html}
+
+使用为作业构建的元素和属性：
+
+- `<form>`、`<input>`、`<label>` 和 `<button>`
+- `type`、`autocomplete` 和 `inputmode`
+
+这些元素和属性可启用内置浏览器功能，改善可访问性，并赋予标记含义。
+
+### 按预期使用 HTML 元素 {: #html-elements}
+
+#### 将表单放入 &lt;form&gt; 中 {: #html-form}
+
+您可能不想将 `<input>` 元素包含在 `<form>` 中，而希望只使用 JavaScript 来处理数据提交。
+
+不要这样做！
+
+凭借 HTML `<form>`，您可以使用所有现代浏览器中一组强大的内置功能，还有利于屏幕阅读器和其他辅助设备访问您的站点。利用 `<form>`，您还可以更简单地为具有有限 JavaScript 支持的旧浏览器构建基本功能，而且，即使代码出现问题（或者少数用户实际上禁用了 JavaScript），您也可以启用表单提交。
+
+如果有多个接受用户输入的页面组件，请确保将每个组件放在各自的 `<form>` 元素中。例如，如果在同一页面上进行搜索和注册，请分别将其放在各自的 `<form>` 中。
+
+#### 使用 `<label>` 标记元素 {: #html-label}
+
+要标记 `<input>`、`<select>` 或 `<textarea>`，请使用 [`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label)。
+
+通过为标签的 `for` 属性赋予与 `id` 相同的值，将标签与输入相关联。
+
+```html
+<label for="address-line1">Address line 1</label>
+<input id="address-line1" …>
+```
+
+对单一输入使用单个标签：不要试图使用一个标签来标记多个输入。这最适合浏览器和屏幕阅读器的方式。点击或单击标签会将焦点移至与其关联的输入，当*标签*或标签的*输入*获得焦点时，屏幕阅读器会读出标签文本。
+
+{% Aside 'caution' %} 不要单独使用[占位符](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)而不使用标签。开始在输入中输入文本时，占位符会被隐藏，因此很容易忘记输入的用途。如果使用占位符来显示日期等值的正确格式，情况也是如此。对手机用户来说，这更是一个问题，尤其是当他们分心或有压力时！{% endAside %}
+
+#### 让按钮有用 {: #html-button}
+
+使用 [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) 创建按钮！也可以使用 `<input type="submit">`，但不要使用 `div` 或其他可创建按钮的一些随机元素。按钮元素提供可访问行为、内置表单提交功能，并且可以轻松设置样式。
+
+为每个表单提交按钮赋予一个可说明功能的值。对于结账的每一个步骤，请使用描述性的号召用语，以显示进度并清楚地说明下一步。例如，在收货地址表单上为提交按钮添加标签**继续付款**，而不是**继续**或**保存**。
+
+{: #disable-submit}
+
+考虑在用户点击或单击提交按钮后将其禁用——尤其当用户付款或下订单时。即使工作正常，很多用户也可能反复单击按钮。这可能导致结账出错和增加服务器负载。
+
+另一方面，不要禁用等待完整有效的用户输入的提交按钮。例如，不要因为缺少内容或内容无效而禁用**保存地址**按钮。这对用户没有帮助——他们可能会继续点击或单击按钮，并且会以为该按钮出了故障。如果用户尝试提交包含无效数据的表单，请说明发生的问题以及解决方法。在移动设备上，这一点尤其重要，因为在移动设备上输入数据更难，而且，在用户尝试提交表单时，他们的屏幕上可能看不到缺少或无效的表单数据。
+
+{% Aside 'caution' %} 表单中的默认按钮类型是 `submit`。如果您想在表单中添加另一个按钮（例如，**显示密码**），请添加 `type="button"`。否则单击或点击按钮时将提交表单。
+
+在任何表单字段获得焦点时按 `Enter` 键都会模拟单击表单中第一个 `submit` 按钮。如果在表单中的**提交**按钮之前包含一个按钮而不指定类型，那么该按钮将具有表单 (`submit`) 中按钮的默认类型，并且会在提交表单之前接收单击事件。有关示例，请参阅我们的[演示](https://enter-button.glitch.me/)：填写表单，然后按 `Enter` 键。{% endAside %}
+
+### 充分利用 HTML 属性 {: #html-attributes}
+
+#### 让用户便于输入数据
+
+{: #type-attribute}
+
+使用适当的输入 [`type` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)，在移动设备上提供合适的键盘并启用浏览器的基本内置验证。
+
+例如，为电子邮件地址使用 `type="email"`，为电话号码使用 `type="tel"`。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bi7J9Z1TLP4IQLyhbQm.jpg", alt="Android 手机的两张截屏，显示了适合输入电子邮件地址（使用 type=email）和电话号码（使用 type=tel）的键盘）。", width="800", height="683" %}<figcaption>适合输入电子邮件地址和电话号码的键盘。</figcaption></figure>
+
+{: #inputmode-attribute}
+
+{% Aside 'warning' %} 使用 type="number" 添加对数字进行增量加减的向上/向下箭头，但这对电话、支付卡或账号等数据没有意义。
+
+对于此类数字，请将其类型设置为 `type="text"`（或者不设置属性，因为 `text` 是默认值）。对于电话号码，请使用 `type="tel"` 以在移动设备上获取相应的键盘。对于其他数字，请使用 `inputmode="numeric"` 以在移动设备上获取数字键盘。
+
+为了确保移动用户使用合适的键盘，一些网站仍在使用 `type="tel"` 作为支付卡号。但是，`inputmode`现在已经[得到了广泛支持](https://caniuse.com/input-inputmode)，因此，您不必这样做——但是，您要检查用户的浏览器。{% endAside %}
+
+{: #avoid-custom-elements}
+
+对于日期，要尽量避免使用自定义 `select` 元素。如果实施不正确，它会破坏自动填充体验，而且在旧浏览器中无法工作。对于出生年份等数字，请考虑使用 `input` 元素（而不是 `select`），手动输入数字更简单且不易出错——尤其是在移动设备上。为了确保在移动设备上使用合适的键盘，请使用 `inputmode="numeric"`，同时使用文本或占位符添加验证以及格式提示，从而确保用户以正确的格式输入数据。
+
+{% Aside %} 利用 [`datalist`](https://developer.mozilla.org/docs/Web/HTML/Element/datalist) 元素，用户可从列表中选择可用选项，并且可在用户输入文本提供匹配建议。对于 [simpl.info/datalist](https://simpl.info/datalist) 的 `text`、`range` 和 `color`，不妨试一试 `datalist`。对于出生年份输入，您可以在 [datalist-select.glitch.me](https://datalist-select.glitch.me)<br>中比较 `select` 与 `input` 和 `datalist`。{% endAside %}
+
+#### 使用自动完成来提高可访问性并帮助用户避免重新输入数据 {: #autocomplete-attribute}
+
+利用适当的 `autocomplete` 值，让浏览器能够安全存储数据和自动填充 `input`、`select` 和 `textarea` 值，从而帮助用户。这在移动设备上尤其重要，为了避免[表单放弃率过高](https://www.zuko.io/blog/8-surprising-insights-from-zukos-benchmarking-data)，这一点更是至关重要。自动完成还可以提供[多种可访问性优势](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html)。
+
+如果表单字段有合适的自动完成值，则应使用。[MDN Web 文档](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete)提供了完整的值列表以及正确使用方法的说明。
+
+{: #stable-name-id}
+
+{% Aside %} 除了使用适当的自动完成值外，还可以通过为表单字段 `name` 和 `id` 属性提供[稳定值](#stable-name-id)来帮助浏览器自动填充表单。稳定值在页面加载或网站部署之间不会改变。{% endAside %}
+
+{: #billing-address}
+
+默认情况下，将账单地址设置为与送货地址相同。请提供编辑账单地址的链接（或使用 [`summary` 和 `details` 元素](https://simpl.info/details/)），让界面更一目了然，而不要在表单中显示账单地址。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TIan7TU8goyoOXwLPYyd.png", alt="显示更改账单地址链接的示例结账页面。", width="800", height="250" %}<figcaption>添加查看账单的链接。</figcaption></figure>
+
+与处理送货地址一样，为账单地址使用适当的自动完成值，这样，用户便不必多次输入数据。如果不同部分具有相同名称的输入字段，但需要输入不同的值，则要向自动完成属性添加前缀词。
+
+```html
+<input autocomplete="shipping address-line-1" ...>
+...
+<input autocomplete="billing address-line-1" ...>
+```
+
+#### 帮助用户输入正确的数据 {: #validation}
+
+尽量避免因客户“操作错误”而“责备”他们。您要帮助用户解决发生的问题，让他们更快速轻松地完成表单。客户完成结账流程就是在购买公司产品或服务，从而让您赚取利润——所以，您要帮助他们，而不能惩罚他们！
+
+您可以向表单元素添加[约束属性](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints)来指定可接受的值，包括 `min`、`max` 和 `pattern`。元素的[有效状态](https://developer.mozilla.org/docs/Web/API/ValidityState)根据元素的值是否有效而进行自动设置，`:valid` 和 `:invalid` CSS 伪类可用于设置具有有效或无效值的元素样式。
+
+例如，以下 HTML 指定 1900 年到 2020 年之间出生年份的输入。使用 `type="number"` 将输入值限制在 `min` 和 `max` 的指定范围内的数字。如果尝试输入超出范围的数字，则会将输入设置为无效状态。
+
+{% Glitch { id: 'constraints', path: 'index.html', height: 170 } %}
+
+以下示例使用 `pattern="[\d ]{10,30}"` 来确保支付卡号有效，同时允许使用空格：
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+现代浏览器还会对 `email` 或 `url` 类型的输入进行基本验证。
+
+{% Glitch { id: 'type-validation', path: 'index.html', height: 250 } %}
+
+{% Aside %} 将 `multiple` 属性添加到类型为 `type="email"` 的输入，从而支持对单个输入中使用逗号分隔的多个电子邮件地址进行内置验证。{% endAside %}
+
+在提交表单时，浏览器会自动将焦点设置在有问题或缺少必填值的字段中。不需要 JavaScript！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png", alt="桌面 Chrome 登录表单的截屏，显示浏览器提示和无效电子邮件值的焦点。", width="500", height= "483" %}<figcaption>浏览器的基本内置验证。</figcaption></figure>
+
+内联验证并在用户输入数据时向其提供反馈，而不是在用户单击提交按钮时提供错误列表。如果您需要在表单提交后验证服务器上的数据，请列出发现的所有问题并清楚地突出显示所有包含无效值的表单字段，同时在每个有问题的字段旁显示一条消息，说明需要解决的问题。检查服务器日志和分析数据，查看是否存在常见错误——您可能需要重新设计表单。
+
+当用户输入数据和提交表单时，您还要使用 JavaScript 进行更可靠的验证。使用[约束验证 API](https://html.spec.whatwg.org/multipage/forms.html#constraints)（已得到[广泛支持](https://caniuse.com/#feat=constraint-validation)）添加使用内置浏览器 UI 设置焦点和显示提示的自定义验证。
+
+要了解更多信息，请参阅[使用 JavaScript 进行更复杂的实时验证](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)。
+
+{% Aside 'warning' %} 即使有客户端验证和数据输入限制，您仍必须确保在后端安全地处理用户的数据输入和输出。切勿相信用户输入：它可能是恶意的。要了解更多信息，请参阅 [OWASP 输入验证速查表](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)。{% endAside %}
+
+#### 帮助用户避免漏填必需数据 {: #required}
+
+对必需值使用 [`required` 属性。](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)
+
+提交表单时，[现代浏览器](https://caniuse.com/mdn-api_htmlinputelement_required)会自动提示并将焦点设置到缺少数据的 `required` 字段，您可以使用 [`:required` 伪类](https://caniuse.com/?search=required)来突出显示必填字段。不需要 JavaScript！
+
+为每个必填字段的标签添加一个星号，并在表单开头添加解释星号含义的注释。
+
+## 简化结账 {: #checkout-forms}
+
+### 注意移动商务差距！{: #m-commerce-gap}
+
+设想用户有*疲劳预算*。一旦达到用户的耐心用完，他们就会离开。
+
+您需要减少障碍并保持专注，尤其是在移动设备上。很多站点在移动设备上获取更多*流量*，但在桌面设备上*获取更多转化*——这种现象就称为[移动商务差距](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)。客户可能只是更喜欢在桌面上完成购买，但较低的移动转化率也是用户体验不佳的结果。您的工作是*最大限度*减少移动设备上的转化损失并*最大限度*提高桌面设备上的转化率。[研究表明](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)，提供更好的移动表单体验是一个巨大的机会。
+
+最重要的是，用户更可能放弃过于复杂冗长和不够简单明了的表单。当用户使用小屏幕设备，不够专注或比较匆忙时，更是如此。只要求客户提供尽可能少的数据。
+
+### 将客户结账设置为默认操作 {: #guest-checkout}
+
+对于在线商店，要减少表单障碍，最简单的方法是将客户结账设置为默认操作。不要强迫用户在购买前创建帐户。不允许客户结账是导致客户放弃购买的主要原因。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/a7OQLnCRb0FZglj07N7z.png", alt="结账时放弃购买的原因。", width="800", height="503" %}<figcaption>由 <a href="https://baymard.com/checkout-usability">baymard.com/checkout-usability</a> 提供</figcaption></figure>
+
+您可以在客户完成结账后提供帐户注册步骤。此时，您已经获得设置帐户所需的大部分数据，因此，用户可以轻松快捷的创建帐户。
+
+{% Aside 'gotchas' %} 如果在用户完成结账后提供注册服务，请确保将用户刚刚完成的购买关联到他们新创建的帐户中！{% endAside %}
+
+### 显示结账进度 {: #checkout-progress}
+
+为了让客户觉得结账流程不那么复杂，您可以显示结账进度并明确告知下一步需要做什么。下面的视频展示了英国零售商 [johnlewis.com](https://www.johnlewis.com) 是如何实现这一目标的。
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/6gIb1yWrIMZFiv775B2y.mp4", controls=true, autoplay=true, muted=true, poster="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ViftAUUUHr4TDXNec0Ch.png", playsinline=true %} <figcaption>显示结账进度。</figcaption></figure>
+
+您要让客户保持动力！对于付款的每一个步骤，您都要使用页眉和描述性的按钮值，明确告知客户现在需要做什么，以及接下来是哪一个结账步骤。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/address-form-save.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>为表单按钮指定有意义的名称，以显示接下来需要执行的操作。</figcaption></figure>
+
+为表单输入使用 `enterkeyhint` 属性来设置移动键盘 Enter 键标签。例如，在多页表单中使用 `enterkeyhint="previous"` 和 `enterkeyhint="next"`，为表单中最后的输入使用 `enterkeyhint="done"`，为搜索输入使用 `enterkeyhint="search"`。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QoY8Oynpw0CqjPACtCdG.png", alt="Android 设备上地址表单的两张截屏，显示了 enterkeyhint 输入属性如何更改 Enter 键图标。", width="800", height=" 684" %}<figcaption>Android 设备上的输入 Enter 键按钮：“下一步”和“完成”。</figcaption></figure>
+
+[Android 和 iOS 支持](https://caniuse.com/mdn-html_global_attributes_enterkeyhint)的 `enterkeyhint` 属性。您可以从 [enterkeyhint 解释器](https://github.com/dtapuska/enterkeyhint)中了解更多信息。
+
+{: #checkout-details}
+
+让用户在结账流程中可以轻松地来回切换，调整订单，即便他们已来到最后的付款步骤。完整显示订单的详细信息，而不仅仅是有限的摘要。让用户能够从付款页面轻松调整商品数量。在结账时，最关键的一点是避免中断转换进度。
+
+### 排除干扰 {: #reduce-checkout-exits}
+
+通过消除视觉混乱和产品促销等干扰因素来限制潜在的退出点。很多成功的零售商甚至会从结账步骤中移除导航和搜索功能。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UR97R2LqJ5MRkL5H4V0U.png", alt="两张移动截屏，显示了 johnlewis.com 上的结账进度。已排除搜索、导航和其他干扰因素。", width="800", height="683" %}<figcaption>为结账步骤移除了搜索、导航和其他干扰因素。</figcaption></figure>
+
+让客户保持专注。现在不是诱使用户做其他事情的时候！
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lKJwd5e2smBfDjNxV22N.jpg", alt="移动设备上的结账页面截屏，展示了令人分心的免费贴纸促销活动。", width="350", height="735" %}<figcaption>不要分散客户完成购买的注意力。</figcaption></figure>
+
+对于回头客，您可以通过隐藏他们不需要看到的数据来进一步简化结账流程。例如：以纯文本（而不是表单）形式显示送货地址，并允许用户通过链接进行更改。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xEAYOeEFYhOZLaB2aeCY.png", alt="结账页面上“查看订单”部分的截屏，以纯文本显示文字，并提供了更改送货地址、付款方式和账单地址的链接（未直接显示）。", width="450", height="219" %}<figcaption>隐藏客户不需要看到的数据。</figcaption></figure>
+
+## 简化姓名和地址输入操作 {: #address-forms}
+
+### 只要求客户提供需要的数据 {: #unneeded-data}
+
+开始对姓名和地址表单进行编码之前，请确保了解需要哪些数据。不要索要不需要的数据！最简单的降低表单复杂性的方法是删除不必要的字段。这也有利于保护客户隐私，并且可以降低后端数据成本和需要承担的责任。
+
+### 使用单一名称输入字段 {: #single-name-input}
+
+除非有充分的理由单独存储名字、姓氏、称谓或其他姓名部分，否则，您要允许用户通过单一输入字段来输入他们的姓名。使用单一名称输入字段可以简化表单，而且您要启用剪切和粘贴，让自动填充更简单。
+
+特别是，除非有充分的理由不这样做，否则不要为前缀或头衔（例如，先生、博士或阁下）添加单独的输入字段。用户可以根据需要输入他们的姓名。此外，`honorific-prefix` 自动完成目前在大多数浏览器中不起作用，因此，添加姓名前缀或头衔字段会破坏大多数用户的地址表单自动填充体验。
+
+### 启用姓名自动填充
+
+使用 `name` 作为全名：
+
+```html
+<input autocomplete="name" ...>
+```
+
+如果您确实有充分的理由拆分姓名部分，请确保使用适当的自动完成值：
+
+- `honorific-prefix`
+- `given-name`
+- `nickname`
+- `additional-name-initial`
+- `additional-name`
+- `family-name`
+- `honorific-suffix`
+
+### 允许国际名称 {: #unicode-matching}
+
+您可能想要验证姓名输入，或限制允许姓名数据使用的字符。但是，您要尽可能让用户不受限制地使用字母。告诉用户您的姓名“无效”会让用户觉得您非常不礼貌！
+
+对于验证，请避免使用仅匹配拉丁字符的正则表达式。仅支持拉丁字符会排除姓名或地址中包含非拉丁字母字符的用户。请改为允许 Unicode 字母匹配，并确保您的后端可靠地支持将 Unicode 字符作为输入和输出。现代浏览器对正则表达式中的 Unicode 字符支持良好。
+
+{% Compare 'worse' %}
+
+```html
+<!-- 包含非拉丁字符（如 Françoise 或 Jörg）的姓名被视为"无效"。 -->
+<input pattern="[\w \-]+" ...>
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```html
+<!-- 接受 Unicode 字母。 -->
+<input pattern="[\p{L} \-]+" ...>
+```
+
+{% endCompare %}
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/unicode-letter-matching.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>Unicode 字母匹配与仅拉丁字母匹配对比。</figcaption></figure>
+
+{% Aside %} 下面可以找到[关于国际化和本地化](#internationalization-localization)的更多信息，但是，请确保表单适用于您的用户所在的所有地区的姓名。例如，对于日语姓名，您要考虑设置一个姓名音标字段。这有助于客户支持人员在电话中说出客户的姓名。{% endAside %}
+
+### 允许使用多种地址格式 {: #address-variety}
+
+设计地址表单时，请记住，地址格式多种多样，令人眼花缭乱，即使在同一个国家/地区，也是如此。注意，不要臆断“正常”的地址格式。（如果您不相信，不妨看看[稀奇古怪的英国地址吧](http://www.paulplowman.com/stuff/uk-address-oddities/)！）
+
+#### 创建灵活的地址表单 {:flexible-address}
+
+不要强迫用户尝试将他们的地址压缩到不合适的表单字段中。
+
+例如，不要坚持让用户在单独的输入字段中输入街道名称和门牌号，因为许多地址不使用这种格式，而且不完整的数据可能会破坏浏览器的自动填充功能。
+
+使用 `required` 地址字段时要特别小心。例如，英国大城市的地址没有郡县，但许多网站仍强制要求用户输入一个郡县。
+
+使用两个灵活的地址行可以很好地处理各种地址格式。
+
+```html
+<input autocomplete="address-line-1" id="address-line1" ...>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+添加标签来匹配：
+
+```html/0-2,5-7
+<label for="address-line-1">
+Address line 1 (or company name)
+</label>
+<input autocomplete="address-line-1" id="address-line1" ...>
+
+<label for="address-line-2">
+Address line 2 (optional)
+</label>
+<input autocomplete="address-line-2" id="address-line2" ...>
+```
+
+要进行尝试，您可以重组和编辑下面嵌入的演示。
+
+{% Aside 'caution' %} 研究表明，[**地址行 2** 可能会给用户造成问题](https://baymard.com/blog/address-line-2)。在设计地址表单时，请记住这一点——您要考虑替代方案，例如，使用单一 `textarea`（见下文）或其他选项。{% endAside %}
+
+#### 考虑为地址使用单一 textarea {: #address-textarea}
+
+最灵活的地址选项是提供单一 `textarea`。
+
+`textarea` 方法适合任何地址格式，而且非常便于剪切和粘贴——但是，请记住，如果用户以前只使用过包含 `address-line1` 和 `address-line2` 的表单，textarea 就不一定符合您的数据要求。
+
+对于 textarea，请使用 `street-address` 作为自动完成值。
+
+这是一个表单示例，演示了使用单个`textarea`作为地址：
+
+{% Glitch { id: 'address-form', path: 'index.html', height: 980 } %}
+
+#### 实现地址表单的国际化和本地化 {: #internationalization-localization}
+
+根据您的用户所在的地点，可能有必要考虑为地址表单实现[国际化和本地化](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/)。
+
+请注意，即使在同一语言区域中，地址部分的命名和地址格式也可能有所不同。
+
+```text
+    ZIP code: US
+ Postal code: Canada
+    Postcode: UK
+     Eircode: Ireland
+         PIN: India
+```
+
+如果提供的表单不适合填写地址或无法使用自己希望使用的字词，可能会令人厌烦或困惑。
+
+您的站点可能需要为[多个区域](https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites#determining-user-s-language-and-region)设置自定义地址表单，但是，也许利用技术来最大限度提高表单灵活性（如上所述）就足够了。如果不为地址表单实现本地化，请确保了解处理一系列地址格式的关键点：
+
+- 避免设置过于具体的地址部分，例如坚持要求用户提供街道名称或门牌号。
+- 尽可能避免将字段设置为 `required`。例如，许多国家/地区的地址没有邮政编码，农村地址可能没有街道或道路名称。
+- 使用包容性命名：例如，使用“国家/地区”，而不是“国家”；使用“邮政编码/邮编”，而不是“邮编”。
+
+保持灵活！[上面的简单地址表单示例](#address-textarea)稍微调整一下就适合许多语言区域。
+
+#### 考虑避免查找地址邮政编码 {: #postal-code-address-lookup}
+
+某些网站使用服务来根据邮政编码查找地址。对于某些用例，这可能是明智的，但是，您要注意潜在的缺点。
+
+邮政编码地址建议并不适合所有国家/地区——在某些地区，邮政编码可能包含大量潜在地址。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/long-list-of-addresses.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>邮政编码可能包含很多地址！</figcaption></figure>
+
+用户很难从一长串地址中进行选择——尤其是在移动设备上，当他们时间匆忙或压力较大时。让用户利用自动填充功能，并通过一次点击或单击来输入完整的地址可能更容易且不容易出错。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/full-name-autofill.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>单一名称输入支持一键（单击一次）地址输入。</figcaption></figure>
+
+## 简化付款表单 {: #general-guidelines}
+
+付款表格是结账过程中最关键的部分。设计不佳的支付表单是[导致客户放弃购买的常见原因](https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs)。 [细节决定成败](https://en.wikipedia.org/wiki/The_devil_is_in_the_detail#cite_note-Titelman-1)：小小的不便就会导致用户放弃购买，尤其是在移动设备上。您的职责是要精心设计表单，尽可能让用户可以轻松输入数据。
+
+### 避免让用户重复输入支付数据 {: #payment-form-autocomplete}
+
+确保在支付卡表单中添加适当的 `autocomplete` 值，包括支付卡号、持卡人姓名以及到期年份和月份：
+
+- `cc-number`
+- `cc-name`
+- `cc-exp-month`
+- `cc-exp-year`
+
+这样，浏览器便可以通过安全地存储支付卡详细信息和正确输入表单数据来帮助用户。如果没有自动完成功能，用户可能更需要保留支付卡详细信息的物理记录，或者在他们的设备上不安全地存储支付卡数据。
+
+{% Aside 'caution' %} 不要添加支付卡类型选择器，因为从支付卡号即可推断出支付卡的类型。{% endAside %}
+
+### 避免为支付卡日期使用自定义元素
+
+如果设计不当，[自定义元素](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)可能会中断自动填充，从而导致支付流程中断，而且这些元素在旧浏览器上可能无法使用。如果所有其他支付卡详细信息都可以通过自动完成获得，但由于自动填充无法处理自定义元素，导致用户不得不找出实体支付卡才能找到到期日期，那么您很可能会失去销售机会。请考虑使用标准 HTML 元素，并相应地设置样式。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1LIQm2Jt5PHxN0I7tni3.jpg", alt="显示导致自动填充中断的卡到期日自定义元素的付款表单截屏。", width="800", height="916" %}<figcaption>自动完成填写了除到期日期外的所有字段！</figcaption></figure>
+
+### 为支付卡和电话号码使用单一输入字段 {: #single-number-input}
+
+对于支付卡和电话号码，请使用单一输入字段：不要将号码分成几部分。这样，用户更容易输入数据，验证也更简单，同时更便于浏览器自动填充。考虑对其他数字数据（例如 PIN 和银行代码）采取相同的做法。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7cUwamPstwSQTlbmQ4CT.jpg", alt="显示将信用卡字段分成四个输入元素的付款表单截屏。", width="800", height="833" %}<figcaption>不要为信用卡号使用多个输入字段。</figcaption></figure>
+
+### 仔细验证 {: #validate}
+
+您要实时验证数据输入，并在提交表单之前再次验证。一种验证方法是为支付卡输入添加 `pattern` 属性。如果用户尝试使用无效值提交付款表单，浏览器会显示警告消息并将焦点设置到输入字段。不需要 JavaScript！
+
+{% Glitch { id: 'payment-card-input', path: 'index.html', height: 170 } %}
+
+但是，`pattern` 正则表达式必须足够灵活才能处理[支付卡号的长度范围](https://github.com/jaemok/credit-card-input/blob/master/creditcard.js#L35)：从 14 位（也可能更少）到 20 位（也可能更多）。您可以通过 [LDAPwiki](https://ldapwiki.com/wiki/Bank%20Card%20Number) 查找关于支付卡号结构的更多信息。
+
+允许用户在输入新支付卡号时包含空格，因为这是数字在实体卡上的显示方式。这对用户更友好（您不必告诉他们“输入有错”），而且可以降低中断转化流程的几率，同时，在处理之前轻而易举就可以删除数字中的空格。
+
+{% Aside %} 您可能希望使用一次性密码来进行身份或付款验证。但是，要求用户手动输入代码或从电子邮件或 SMS 文本中复制代码很容易出错，并且这会产生障碍。要了解启用一次性密码的理想方法，请参阅 [SMS OTP 表单最佳实践](/sms-otp-form)。{% endAside %}
+
+## 在一系列设备、平台、浏览器和版本上进行测试 {: #test-platforms}
+
+在用户最常用的平台上测试地址和付款表单极其重要，因为表单元素的功能和外观可能有所不同，而且视口大小的差异可能会导致定位出现问题。BrowserStack 支持对各种设备和浏览器上的[开源项目进行免费测试](https://www.browserstack.com/open-source)。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Uk7WhpDMuHtvjmWlFnJE.jpg", alt="iPhone 7 和 iPhone 11 上的付款表单 (payment-form.glitch.me) 的截屏。iPhone 11 上会显示“完成付款”按钮，但 iPhone 11 上不显示", width="800", height="707" %}<figcaption>iPhone 7 和 iPhone 11 上的同一页面。<br>对于较小的移动视口，请缩减边距，确保不遮住<strong>完成付款</strong>按钮。</figcaption></figure>
+
+## 实施分析和 RUM {: #analytics-rum}
+
+在本地测试可用性和性能可能有帮助，但是，您需要真实环境下的数据来客观了解您的付款和地址表单带给用户的体验。
+
+为此，您需要分析和真实用户监控——实际用户体验的数据，例如加载结账页面需要多长时间，或完成支付需要多长时间：
+
+- **页面分析**：包含表单的每个页面的页面浏览量、跳出率和退出率。
+- **交互分析**：[目标渠道](https://support.google.com/analytics/answer/6180923?hl=en)和[事件](https://developers.google.com/analytics/devguides/collection/gtagjs/events)表明用户在何处放弃了结账流程，以及他们在与您的表单交互时执行了哪些操作。
+- **网站性能**：以[用户为中心的指标](/user-centric-performance-metrics)，可以告诉您结账页面加载是否缓慢，如果是，还会告诉您是什么原因。
+
+与服务器日志、转化数据和 A/B 测试结合使用时，页面分析、交互分析和真实用户性能测量非常有价值，可以让您回答这样的问题，例如：折扣代码能否增加收入，表单布局的变化是否提高了转化率。
+
+不仅如此，这也确定工作优先事项，做出改变和奖励成功提供了坚实的基础。
+
+## 继续学习 {: #resources}
+
+- [登录表单最佳实践](/sign-in-form-best-practices)
+- [注册表单最佳实践](/sign-up-form-best-practices)
+- [使用 WebOTP API 验证 Web 上的电话号码](/web-otp)
+- [创建令人惊艳的表单](/learn/forms/)
+- [移动表单设计最佳实践](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [更强大的表单控件](/more-capable-form-controls)
+- [创建可访问表单](https://webaim.org/techniques/forms/)
+- [利用凭据管理 API 简化注册流程](https://developer.chrome.com/blog/credential-management-api/)
+- [Frank 的邮政地址必修指南](http://www.columbia.edu/~fdc/postal/)为 200 多个国家/地区的地址格式提供了有用的链接和广泛的指导。
+- [Country Lists](http://www.countries-list.info/Download-List) 提供了一个以多种语言和多种格式下载国家/地区代码和名称的工具。
+
+照片：[@rupixen](https://unsplash.com/@rupixen)；来源：[Unsplash](https://unsplash.com/photos/Q59HmzK38eQ)。
diff --git a/src/site/content/zh/blog/periodic-background-sync/index.md b/src/site/content/zh/blog/periodic-background-sync/index.md
new file mode 100644
index 00000000000..b06e151d575
--- /dev/null
+++ b/src/site/content/zh/blog/periodic-background-sync/index.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: 使用后台定期同步 API 提供更丰富的离线体验
+subhead: 在后台同步网络应用程序的数据以获得更相似的体验
+authors:
+  - jeffposnick
+  - joemedley
+date: 2019-11-10
+updated: 2020-08-18
+hero: image/admin/Bz7MndcsUGPLAnQwIMfJ.jpg
+alt: 同步飞行的彩色飞机
+origin_trial:
+  url: "https://developers.chrome.com/origintrials/#/view_trial/4048736065006075905"
+description: 后台定期同步可让 Web 应用程序在后台定期同步数据，从而使 Web 应用程序的行为更接近 iOS/Android/桌面应用程序。
+tags:
+  - capabilities
+  - blog
+  - progressive-web-apps
+  - service-worker
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} Web 应用程序要像 iOS/Android/桌面应用程序一样具有强大的功能。为了实现这一目标，[Capabilities 项目](https://developer.chrome.com/blog/capabilities/)中的后台定期同步只是其中一个功能。要了解其他功能和关注其进展，请关注 [Web 新功能揭秘](https://developer.chrome.com/blog/capabilities/)。{% endAside %}
+
+您是否遇到过下面的情况？
+
+- 乘坐火车或地铁时网络连接不稳定或没有网络
+- 观看太多视频后被运营商限制连接
+- 生活在带宽难以满足需求的乡村
+
+如果您遇到过，您一定会觉得在 Web 上做某些事情令人沮丧，您还会想知道为什么特定于平台的应用程序在这些情况下通常表现得更出色。特定于平台的应用程序可以提前获取新鲜内容，比如说新闻或天气信息。即使在没有网络的地铁内，您仍然可以阅读新闻。
+
+后台定期同步可让 Web 应用程序在后台定期同步数据，从而使 Web 应用程序的行为更接近特定于平台的应用程序。
+
+## 当前状态
+
+下表介绍了后台定期同步 API 的当前状态。
+
+<table>
+<tr>
+<th markdown="block">步骤</th>
+<th markdown="block">状态</th>
+</tr>
+<tr>
+<td markdown="block">1. 创建解释文档</td>
+<td markdown="block"><a href="https://github.com/WICG/BackgroundSync/tree/master/explainers">完成</a></td>
+</tr>
+<tr>
+<td markdown="block">2. 创建规范初稿</td>
+<td markdown="block"><a href="https://wicg.github.io/periodic-background-sync/" rel="noopener">完成</a></td>
+</tr>
+<tr>
+<td markdown="block">3. 收集反馈与迭代设计</td>
+<td markdown="block">进行中</td>
+</tr>
+<tr>
+<td markdown="block">4. 来源测试</td>
+<td markdown="block"><a>完成</a></td>
+</tr>
+<tr>
+<td markdown="block"><strong>5. 发布</strong></td>
+<td markdown="block"><strong>Chrome 80</strong></td>
+</tr>
+</table>
+
+## 试用一下
+
+您可以对[实时演示应用程序](https://webplatformapis.com/periodic_sync/periodicSync_improved.html)尝试使用后台定期同步。使用之前，请确保：
+
+- 使用的是 Chrome 80 或更高版本。
+- 启用后台定期同步之前先[安装](https://developers.google.com/web/fundamentals/app-install-banners/) Web 应用程序。
+
+## 概念和用法
+
+后台定期同步可让您在渐进式 Web 应用程序或服务工程进程支持的页面启动时显示新内容。在未使用应用程序或页面时，它通过在后台下载数据来实现此目的。这可以防止在查看时，应用程序内容在启动后刷新。更好的一点是，它可以防止应用程序在刷新之前显示内容旋转图标。
+
+如果没有后台定期同步，Web 应用程序必须使用替代方法来下载数据。一个常见的例子是使用推送通知来唤醒服务工作进程。用户会被“新数据可用”之类的消息干扰。更新数据在本质上会产生负面效果。您仍然可以选择为真正重要的更新推送通知，例如重大突发新闻。
+
+后台定期同步很容易与后台同步混淆。虽然它们的名称相似，但用例截然不同。其中，后台同步最常用于在前一个请求失败时将数据重新发送到服务器。
+
+### 确保适当的用户参与度
+
+如果执行不当，后台定期同步可能会浪费用户的资源。为了确保正确，在发布之前，Chrome 会试运行一段时间。本节介绍了 Chrome 为了让该功能尽可能有用而采取的一些设计决策。
+
+Chrome 的第一个设计决策是，Web 应用程序只能在用户将其安装到设备上并作为独特应用程序启动后才能使用后台定期同步。Chrome 的常规选项卡上下文中不会提供后台定期同步。
+
+此外，由于 Chrome 不希望未使用或很少使用的 Web 应用程序无故消耗电池或数据，因此，Chrome 在设计后台定期同步时，要求开发人员必须向用户提供价值才能使用此功能。具体而言，Chrome 使用[站点参与度分数](https://www.chromium.org/developers/design-documents/site-engagement) (`about://site-engagement/`) 来确定特定 Web 应用程序是否以及多久会发生后台定期同步。换句话说，除非参与度分数大于零，否则根本不会触发 `periodicsync` 事件，并且分数值会影响触发 `periodicsync` 事件的频率。这可以确保只有正在频繁使用的应用程序才会在后台同步。
+
+后台定期同步与流行平台上的现有 API 及实践有一些相似点。例如，一次性后台同步以及推送通知允许 Web 应用程序的逻辑在用户关闭页面后继续活动一段时间（通过应用程序的服务工作进程）。在大多数平台上，人们通常会安装在后台定期访问网络的应用程序，以便为关键更新、预取内容、同步数据等提供更好的用户体验。同样，后台定期同步也会延长 Web 应用程序逻辑的生命周期，让其定期运行，一次可能只运行几分钟。
+
+如果浏览器允许这种情况频繁发生而不加以限制，则可能会导致一些隐私问题。下面是 Chrome 解决后台定期同步风险的方法：
+
+- 仅设备之前连接过的网络上会发生后台同步活动。Chrome 建议仅连接到由可信方运营的网络。
+- 与所有 Internet 通信一样，后台定期同步会显示客户端的 IP 地址，与之通信的服务器以及服务器的名称。为了将这种暴露程度降低到应用程序仅在前台同步时的大致程度，浏览器会限制应用程序后台同步的频率，使其与用户使用应用程序的频率保持一致。如果用户停止频繁与应用程序交互，则停止触发后台定期同步。这是对特定平台应用程序现状的净改进。
+
+### 何时可以使用？
+
+可利用的规则因浏览器而异。综上所述，Chrome 对后台定期同步提出了以下要求：
+
+- 特定的用户参与度分数。
+- 存在之前使用过的网络。
+
+同步时间不受开发人员控制。同步频率与应用程序的使用频率保持一致。（请注意，特定于平台的应用程序目前不这样做。）它还考虑了设备的电源和连接状态。
+
+### 何时需要使用？
+
+当服务工作进程启动来处理 `periodicsync` 事件时，您有*机会*请求数据，但没有*义务*这样做。在处理事件时，您要考虑网络条件和可用存储空间，并下载不同数量的数据来进行响应。以下资源可以为您提供帮助：
+
+- [网络信息 API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+- [检测流量节省模式](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#detecting_the_save-data_setting)
+- [估计可用存储空间](https://developers.google.com/web/updates/2017/08/estimating-available-storage-space)
+
+### 权限
+
+安装服务工作进程后，使用[权限 API](https://developer.mozilla.org/docs/Web/API/Permissions_API) 查询`periodic-background-sync`。您可以从窗口或服务工作进程上下文中执行此操作。
+
+```js
+const status = await navigator.permissions.query({
+  name: 'periodic-background-sync',
+});
+if (status.state === 'granted') {
+  // 可使用后台定期同步。
+} else {
+  // 不能使用后台定期同步。
+}
+```
+
+### 注册定期同步
+
+如前所述，后台定期同步需要服务工作进程。使用 `ServiceWorkerRegistration.periodicSync` 检索`PeriodicSyncManager` 并在其中调用 `register()`。注册需要标签和最小同步间隔 (`minInterval`)。该标签可标识注册的同步，以便注册多个同步。在下面的示例中，标签名称是 `'content-sync'`，而 `minInterval` 是一天。
+
+```js/3-5
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  try {
+    await registration.periodicSync.register('content-sync', {
+      // An interval of one day.
+      minInterval: 24 * 60 * 60 * 1000,
+    });
+  } catch (error) {
+    // Periodic background sync cannot be used.
+  }
+}
+```
+
+### 验证注册
+
+调用 `periodicSync.getTags()` 来检索注册标签数组。下面的示例使用标签名称来确认缓存更新处于活动状态，从而避免再次更新。
+
+```js/2,4
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  const tags = await registration.periodicSync.getTags();
+  // 仅在未设置同步时更新内容。
+  if (!tags.includes('content-sync')) {
+    updateContentOnPageLoad();
+  }
+} else {
+  // 如果不支持后台定期更新，则始终更新。
+  updateContentOnPageLoad();
+}
+```
+
+您还可以使用 `getTags()`，以便在 Web 应用程序的设置页面上显示活动注册列表，从而让用户启用或禁用特定类型的更新。
+
+### 响应后台定期同步事件
+
+要响应后台定期同步事件，请向服务工作进程添加 `periodicsync` 事件处理程序。传递给它的 `event` 对象将包含一个与注册期间使用的值匹配的 `tag` 参数。例如，如果已使用名称 `'content-sync'` 注册后台定期同步，则 `event.tag` 将为 `'content-sync'`。
+
+```js
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'content-sync') {
+    // 查看"先思考后同步"一节，
+    // 了解在同步之前可执行的检查。
+    event.waitUntil(syncContent());
+  }
+  // 根据需要为不同的标签提供其他逻辑。
+});
+```
+
+### 取消注册同步
+
+要结束注册的同步，请使用要取消注册的同步的名称调用 `periodicSync.unregister()`。
+
+```js
+const registration = await navigator.serviceWorker.ready;
+if ('periodicSync' in registration) {
+  await registration.periodicSync.unregister('content-sync');
+}
+```
+
+## 接口
+
+下面是对后台定期同步 API 提供的接口的简要介绍。
+
+- `PeriodicSyncEvent`。在浏览器选择的时间传递给 `ServiceWorkerGlobalScope.onperiodicsync`。
+- `PeriodicSyncManager`。注册和取消注册定期同步并为注册的同步提供标签。从 ServiceWorkerRegistration.periodicSync` 属性中检索此类的实例。
+- `ServiceWorkerGlobalScope.onperiodicsync`。注册一个处理程序来接收 `PeriodicSyncEvent`。
+- `ServiceWorkerRegistration.periodicSync`。返回 `PeriodicSyncManager` 的引用。
+
+## 示例
+
+### 更新内容
+
+以下示例使用后台定期同步来下载和缓存新闻站点或博客的最新文章。请注意标签名称，它表示同步的类型 (`'update-articles'`)。`updateArticles()` 的调用包含在 `event.waitUntil()` 中，从而使服务工作进程不会在完成文章下载和存储之前终止。
+
+```js/7
+async function updateArticles() {
+  const articlesCache = await caches.open('articles');
+  await articlesCache.add('/api/articles');
+}
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'update-articles') {
+    event.waitUntil(updateArticles());
+  }
+});
+```
+
+### 向现有 Web 应用程序添加后台定期同步
+
+需要[进行这一组更改](https://github.com/GoogleChromeLabs/so-pwa/pull/11)才能将后台定期同步添加到[现有 PWA](https://so-pwa.firebaseapp.com/)。该示例包含许多有用的日志记录语句，它们描述了 Web 应用程序中后台定期同步的状态。
+
+## 调试
+
+在本地测试时获取后台定期同步的端到端视图可能是一项挑战。在调试 Web 应用程序的行为时，有关活动注册、大致同步间隔和过去同步事件日志的信息提供了有价值的上下文。幸运的是，您可以通过 Chrome DevTools 中的实验功能找到所有这些信息。
+
+{% Aside %}Chrome 81 及更高版本已启用后台定期同步调试。{% endAside %}
+
+### 记录本地活动
+
+DevTools 的**后台定期同步**部分围绕后台定期同步生命周期中的关键事件进行组织：注册同步、执行后台同步和取消注册。要获取有关这些事件的信息，请单击**开始记录**。
+
+<figure>{% Img src="image/admin/wcl5Bm6Pe9xn5Dps6IN6.png", alt="DevTools 中的记录按钮", width="708", height="90" %}<figcaption>DevTools 中的记录按钮</figcaption></figure>
+
+记录时，条目将出现在与事件对应的 DevTools 中，并为每个条目记录上下文和元数据。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/m92Art0OwiM0VyI7czFB.png", alt="记录的后台定期同步数据示例", width="800", height="357", style="max-width: 75%" %} <figcaption>记录的后台定期同步数据示例</figcaption></figure>
+
+启用记录一次后，它最多会保持启用状态三天，从而允许 DevTools 获取有关可能发生的后台同步的本地调试信息（甚至在未来几小时内）。
+
+### 模拟事件
+
+虽然记录后台活动可能会有所帮助，但有时您需要立即测试 `periodicsync` 处理程序，而不是等待事件按照正常进程触发。
+
+您可以通过 Chrome DevTools 的应用程序面板中的**服务工作进程**部分执行此操作。**定期同步**字段允许您为要使用的事件提供一个标签，并根据需要多次触发它。
+
+{% Aside %} 手动触发 `periodicsync` 事件需要 Chrome 81 或更高版本。{% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BQ5QdjwaRDP42cHqW98W.png", alt="应用程序面板中的“服务工作进程”部分显示了“定期同步”文本字段和按钮。", width="800", height=" 321", style="max-width: 90%" %}</figure>
+
+## 使用 DevTools 界面
+
+从 Chrome 81 开始，您将在 DevTools *应用程序*面板中看到**后台定期同步**部分。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eYJtJfZ9Qo145lUQe4Ur.png", alt="显示后台定期同步部分的应用程序面板", width="382", height="253", style="max-width: 75%" %}</figure>
diff --git a/src/site/content/zh/blog/preload-optional-fonts/index.md b/src/site/content/zh/blog/preload-optional-fonts/index.md
new file mode 100644
index 00000000000..8032ccf6994
--- /dev/null
+++ b/src/site/content/zh/blog/preload-optional-fonts/index.md
@@ -0,0 +1,70 @@
+---
+title: 通过预加载可选字体来防止布局偏移和不可见文本闪烁 (FOIT)
+subhead: '从 Chrome 83 开始，可以将 link rel="preload" 与 font-display: optional 组合来完全消除布局卡顿'
+authors:
+  - houssein
+date: 2020-03-18
+hero: image/admin/wv5DLtYiAhHm4lNemN1E.jpg
+alt: 来自某个排字集的大写字母 A，放在白色桌子上
+description: '通过优化渲染周期，Chrome 83 在预加载可选字体时可消除布局偏移。将 <link rel="preload"> 与 font-display: optional 组合是保证无卡顿渲染自定义字体的最有效方法。'
+tags:
+  - blog
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+{% Aside %} 在 Chrome 83 中，字体加载有了新的改进，在预加载可选字体时可完全消除布局偏移和不可见文本闪烁 (FOIT)。{% endAside %}
+
+通过优化渲染周期，Chrome 83 在预加载可选字体时可消除布局偏移。将 `<link rel="preload">` 与 `font-display: optional` 组合是保证渲染自定义字体时没有布局卡顿的最有效方法。
+
+## 浏览器兼容性 {: #compatibility }
+
+查看 MDN 的数据以获取最新的跨浏览器支持信息：
+
+- [`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)
+- [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#Browser_compatibility)
+
+## 字体渲染
+
+当网页上的资源动态变化时，会发生布局偏移或重新布局，从而导致内容“偏移”。获取和渲染 Web 字体可能以下面两种方式之一直接导致布局偏移：
+
+- 后备字体与新字体交换（“无样式文本闪烁”）
+- 新字体渲染到页面前显示“不可见”文本（“不可见文本闪烁”）
+
+CSS [`font-display`](https://font-display.glitch.me/) 属性提供了一种通过一系列不同的支持值（`auto`、`block`、`swap`、`fallback` 和 `optional`）来修改自定义字体渲染行为的方法。选择使用哪个值取决于异步加载的字体的首选行为。但是，这些支持值中的每一个都可以通过上面列出的两种方式之一触发重新布局，直到现在！
+
+{% Aside %} [Cumulative Layout Shift](/cls/) 指标可用于衡量网页上的布局不稳定性。{% endAside %}
+
+## 可选字体
+
+`font-display` 属性使用三段式的时间线来处理需要下载才能渲染的字体：
+
+- **阻止：**渲染“不可见”文本，但在加载完成后立即切换到 Web 字体。
+- **交换：**使用后备系统字体渲染文本，但在加载完成后立即切换到 Web 字体。
+- **失败：**使用后备系统字体渲染文本。
+
+以前，指定了 `font-display: optional` 的字体有 100 毫秒的阻止期，没有交换期。这意味着在切换到后备字体之前，“不可见”文本会非常短暂地显示。如果在 100 毫秒内未下载字体，则使用后备字体并且不会发生交换。
+
+<figure>{% Img src="image/admin/WHLORYEu864QRRveFQUz.png", alt="该图表显示当字体加载失败时以前的可选字体行为", width="800", height="340" %} <figcaption>100 毫秒阻止期<b>之后</b>，下载字体时 Chrome 中以前的 <code>font-display: optional</code> 行为</figcaption></figure>
+
+但是，如果在 100 毫秒阻止期结束之前下载完字体，则会在页面上渲染和使用自定义字体。
+
+<figure>{% Img src="image/admin/mordYRjmCCDtlMcNXEOU.png", alt="该图表显示当字体及时加载时以前的可选字体行为", width="800", height="318" %} <figcaption>100 毫秒阻止期<b>之后</b>，下载字体时 Chrome 中以前的 <code>font-display: optional</code> 行为</figcaption></figure>
+
+Chrome 在两种情况下都会重新渲染页面**两次**，无论是使用后备字体还是自定义字体及时完成加载时。这会导致不可见文本轻微闪烁，并且在渲染新字体时，会出现布局卡顿而使一些页面内容发生移动。即使字体存储在浏览器的磁盘缓存中并且可以在阻止期结束之前顺利加载，也会出现这种情况。
+
+Chrome 83 中的[优化](https://bugs.chromium.org/p/chromium/issues/detail?id=1040632)完全去除了通过 [`<link rel="preload'>`](/codelab-preload-web-fonts/) 预加载的可选字体的第一个渲染周期。相反，渲染会被阻止，直到自定义字体完成加载或经过一段时间。这个超时期间目前设置为 100 毫秒，但在不久的将来可能会更改以优化性能。
+
+<figure>{% Img src="image/admin/zLldiq9J3duBTaeRN88e.png", alt="该图表显示当字体加载失败时新的预加载可选字体行为", width="800", height="353" %} <figcaption>100 毫秒阻止期<b>之后</b>，预加载字体和下载字体时 Chrome 中新的 <code>font-display: optional</code> 行为（没有不可见文本闪烁）</figcaption></figure>
+
+<figure>{% Img src="image/admin/OEHCGFMFspaWjb3xXLY.png", alt="该图表显示当字体及时加载时新的预加载可选字体行为", width="800", height="346" %} <figcaption>100 毫秒阻止期<b>之前</b>，预加载字体和下载字体时 Chrome 中新的 <code>font-display: optional</code> 行为（没有不可见文本闪烁）</figcaption></figure>
+
+在 Chrome 中预加载可选字体消除了布局卡顿和无样式文本闪烁的可能性。 [这与 CSS 字体模块级别 4](https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional) 中指定的所需行为相匹配，其中可选字体不应导致重新布局，而用户代理可以将渲染延迟一段合适的时间。
+
+虽然预加载可选字体不是必需的，但这大大提高了在第一个渲染周期之前加载它的机会，尤其是它尚未存储在浏览器的缓存中时。
+
+## 结论
+
+Chrome 团队有兴趣倾听您在应用这些新优化后预加载可选字体的体验！如果您遇到任何问题或想要提出任何功能建议，请提交[问题](https://bugs.chromium.org/p/chromium/issues/entry)。
diff --git a/src/site/content/zh/blog/promises/index.md b/src/site/content/zh/blog/promises/index.md
new file mode 100644
index 00000000000..d8ac1e238c5
--- /dev/null
+++ b/src/site/content/zh/blog/promises/index.md
@@ -0,0 +1,759 @@
+---
+title: JavaScript Promises：简介
+subhead: Promise 简化了延迟和异步计算。Promise 代表一个尚未完成的操作。
+description: Promise 简化了延迟和异步计算。Promise 代表一个尚未完成的操作。
+date: 2013-12-16
+updated: 2021-01-18
+tags:
+  - javascript
+authors:
+  - jakearchibald
+feedback:
+  - api
+---
+
+诸位开发同仁，请准备迎接 Web 开发史上的重大时刻。
+
+<em>[鼓声响起来]</em>
+
+Promise 已经来到了 JavaScript！
+
+<em>[璀璨的烟花在天上亮起，五彩纸屑纷纷落下，人们为之疯狂]</em>
+
+此时此刻，您会是下列几种人之一：
+
+- 大家在周围欢呼，但您根本不知道这是为了什么。也许您甚至不知道这个 promise 到底是什么东西。您耸了耸肩，但肩上却感到了五彩纸屑的重量。假如是这样，请别担心，我花了很长时间才弄清楚它的重要性。您可能想[从头](#whats-all-the-fuss-about)开始了解。
+- 您兴奋地挥出一拳！可算等到了！您之前已经用过这些 Promise，但让人苦恼的是，所有的实现都采用略有不同的 API。官方 JavaScript 版本的 API 是什么？您可能想从[术语](#promise-terminology)开始。
+- 您对它已经有所了解了，对那些上蹿下跳的新人嗤之以鼻。花点时间享受下您的优越感，然后直接前往 [API 参考](#promise-api-reference)吧。
+
+## 有什么好大惊小怪的？ {: #whats-all-the-fuss-about }
+
+JavaScript 是单线程的，这意味着不能同时运行两个脚本；它们必须依次运行。在浏览器中，JavaScript 与许多其他内容共享一个线程，而这些内容因浏览器而异。不过 JavaScript 通常与绘画、更新样式和处理用户操作（例如突出显示文本和与表单控件交互）在同一个队列中。这些事件中的活动会推迟其他事件。
+
+人类则是多线程的。您可以使用多个手指打字，一边开车一边聊天。唯一的麻烦是打喷嚏，因为打喷嚏时必须暂停所有当前活动。这一点很烦人，尤其是当您开车在并试图聊天时。您不想写出黏糊糊的代码。
+
+您可能已经在用事件和回调来解决这个问题了。事件如下：
+
+```js
+var img1 = document.querySelector('.img-1');
+
+img1.addEventListener('load', function() {
+  // woo yey image loaded
+});
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+这一点也不赖嘛。我们获取图像，添加几个侦听器，然后可以在调用其中一个侦听器前停止 JavaScript 的执行。
+
+遗憾的是，在上面的例子中，事件可能在我们开始侦听它们之前就发生了，所以我们需要使用图像的 complete 属性来解决这个问题：
+
+```js
+var img1 = document.querySelector('.img-1');
+
+function loaded() {
+  // woo yey image loaded
+}
+
+if (img1.complete) {
+  loaded();
+}
+else {
+  img1.addEventListener('load', loaded);
+}
+
+img1.addEventListener('error', function() {
+  // argh everything's broken
+});
+```
+
+这不会获取在我们有机会聆听它们之前就出错的图像；遗憾的是，DOM 并没有给我们提供解决的办法。此外，这还只是加载一张图片。如果我们想知道一组图像在何时加载，情况就会变得更加复杂。
+
+## 事件并非万能
+
+事件对可以在同一个对象上发生多次的活动是个好东西，比如 `keyup` ， `touchstart` 等。有了那些事件，就无需在添加侦听器前了解到底发生了什么事。但在涉及到异步成功/失败时，理想情况下，您需要用到下列代码：
+
+```js
+img1.callThisIfLoadedOrWhenLoaded(function() {
+  // loaded
+}).orIfFailedCallThis(function() {
+  // failed
+});
+
+// and…
+whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
+  // all loaded
+}).orIfSomeFailedCallThis(function() {
+  // one or more failed
+});
+```
+
+这就是 Promise 的作用，但命名更好了。假如 HTML 图像元素有一个返回 promise 的 ready 方法，我们可以这样做：
+
+```js
+img1.ready()
+.then(function() {
+  // loaded
+}, function() {
+  // failed
+});
+
+// and…
+Promise.all([img1.ready(), img2.ready()])
+.then(function() {
+  // all loaded
+}, function() {
+  // one or more failed
+});
+```
+
+从本质看，promise 有点像事件监听器，只不过：
+
+- Promise 只能成功或失败一次。它不能成功或失败两次，也不能从成功切换到失败，反之亦然。
+- 如果 Promise 成功或失败，并且您稍后添加成功/失败回调，则将调用正确的回调，即使该事件发生的时间更早。
+
+这对于异步成功/失败非常有用，因为您对某些操作的确切时间没兴趣，反而对结果的反应更感兴趣。
+
+## Promise 术语 {: #promise-terminology }
+
+[Domenic Denicola](https://twitter.com/domenic) 校对阅读了本文的初稿，并评价我的术语根本不及格。他把我关了起来，罚我抄了 100 遍的《[States and Fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md)》，还给我的父母写了一封信表示担忧。尽管如此，我仍然弄混了很多术语，但下面列出了基本知识：
+
+Promise 可以是：
+
+- **已完成**- 与 promise 相关的操作成功
+- **已拒绝**- 与 promise 相关的操作失败
+- **待定**- 尚未完成或已拒绝
+- **已解决**- 已完成或已拒绝
+
+[本规范](https://www.ecma-international.org/ecma-262/#sec-promise-objects)还使用术语 **thenable** 来描述一个拥有 `then` 方法的类 promise 对象。这个术语总是让我想起前英格兰足球经理 [Terry Venables](https://en.wikipedia.org/wiki/Terry_Venables)，所以我会尽量少用它。
+
+## Promise 来到了 JavaScript！
+
+Promise 已经以库的形式出现了一段时间，例如：
+
+- [Q](https://github.com/kriskowal/q)
+- [when](https://github.com/cujojs/when)
+- [WinJS](https://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx)
+- [RSVP.js](https://github.com/tildeio/rsvp.js)
+
+以上列出的库和 JavaScript Promise 共享一个通用的标准化行为，称之为 [Promises/A+](https://github.com/promises-aplus/promises-spec) 。如果您是 jQuery 用户，它们也有一个叫做 [Deferreds](https://api.jquery.com/category/deferred-object/) 的类似行为。然而，Deferreds 与 Promise/A+ 并不兼容，这使得它们[略有不同，而且用途更少](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/)，所以要小心。 jQuery 也有一个 [Promise 类型](https://api.jquery.com/Types/#Promise)，但它只是 Deferred 的一个子集，并且存在同样的问题。
+
+尽管 promise 实现遵循标准化行为，但它们的整体 API 各不相同。 JavaScript promise 在 API 方面与 RSVP.js 类似。下面列出了创建 promise 的方法：
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  // do a thing, possibly async, then…
+
+  if (/* everything turned out fine */) {
+    resolve("Stuff worked!");
+  }
+  else {
+    reject(Error("It broke"));
+  }
+});
+```
+
+promise 构造函数使用了一个参数，一个带有两个参数 resolve 和 reject 的回调。在回调中执行一些操作，比如异步；然后如果一切顺利，就调用 resolve，否则会调用 reject。
+
+与 JavaScript 中的 `throw` 类似，使用 Error 对象拒绝是一种常见而非必须的做法。使用 Error 对象的好处在于它们可以捕获堆栈跟踪，从而更好地发挥调试工具的作用。
+
+下面列出了使用 promise 的方法：
+
+```js
+promise.then(function(result) {
+  console.log(result); // "Stuff worked!"
+}, function(err) {
+  console.log(err); // Error: "It broke"
+});
+```
+
+`then()`有两个参数，一个成功案例的回调，另一个是失败案例的回调。这两者都是可选项，因此您只能为成功案例或失败案例添加回调。
+
+JavaScript promise 在 DOM 中最初叫做 Futures，后来改名为 Promises，并最终进入了 JavaScript。在 JavaScript 中使用它们比在 DOM 中使用更好，因为它们可用于非浏览器 JS 上下文中，例如 Node.js（至于是否在其核心 API 中使用，则是另一个问题了）。
+
+尽管它们是 JavaScript 的功能，但 DOM 也可以使用。事实上，所有具有异步成功/失败方法的新 DOM API 都将使用 Promise。这在 [Quota Management](https://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html#idl-def-StorageQuota) 、[Font Load Events](http://dev.w3.org/csswg/css-font-loading/#font-face-set-ready) 、[ServiceWorker](https://github.com/slightlyoff/ServiceWorker/blob/cf459d473ae09f6994e8539113d277cbd2bce939/service_worker.ts#L17) 、[Web MIDI](https://webaudio.github.io/web-midi-api/#widl-Navigator-requestMIDIAccess-Promise-MIDIOptions-options) 和 [Streams](https://github.com/whatwg/streams#basereadablestream) 等中已经很常见了。
+
+## 浏览器支持和 polyfill
+
+现在，浏览器已经中实现了 promise。
+
+从 Chrome 32、Opera 19、Firefox 29、Safari 8 和 Microsoft Edge 开始，promises 是默认开启的。
+
+若要使缺乏完整 promise 实现的浏览器符合规范，或将 promise 添加到其他浏览器和 Node.js 中，请查看[polyfill](https://github.com/jakearchibald/ES6-Promises#readme) (2k gzipped)。
+
+## 与其他库的兼容性
+
+JavaScript promise API 会将任何使用 `then()` 方法的对象当做类 promise（或者在 promise 中叫 `thenable`，*唉*）来处理，所以如果您使用返回 Q promise 的库，也没关系，它将与新的 JavaScript promise 良好兼容。
+
+不过就像我之前说得那样，jQuery 的 Deferreds 的作用不大。但幸好您可以将它们转换为标准 promise，而这值得尽快完成：
+
+```js
+var jsPromise = Promise.resolve($.ajax('/whatever.json'))
+```
+
+在这里，jQuery 的`$.ajax`返回一个 Deferred。因为它使用了一个 `then()` 方法， `Promise.resolve()` 可以把它变成 JavaScript promise。但是，有时 deferred 会向其回调传递多个参数，例如：
+
+```js
+var jqDeferred = $.ajax('/whatever.json');
+
+jqDeferred.then(function(response, statusText, xhrObj) {
+  // ...
+}, function(xhrObj, textStatus, err) {
+  // ...
+})
+```
+
+而 JS promise 会忽略除第一个之外的所有参数：
+
+```js
+jsPromise.then(function(response) {
+  // ...
+}, function(xhrObj) {
+  // ...
+})
+```
+
+值得庆幸的是，这通常是您想要的结果，或者至少可以让您访问想要的内容。另外请注意，jQuery 不遵循将 Error 对象传递给拒绝的约定。
+
+## 将复杂的异步代码简单化
+
+好吧，我们来写些代码。比方说，我们想要：
+
+1. 启动一个旋转器，表明正在加载的过程
+2. 为一个故事获取几个 JSON，为我们提供标题以及每章的 url
+3. 给页面添加标题
+4. 获取每一章
+5. 将故事添加到页面
+6. 停止旋转器
+
+……但也要告诉用户中途是否出现问题。假如出现问题，我们也需要在那时停止旋转器，否则它会继续旋转，并与其他用户界面发生冲突。
+
+当然，您不会使用 JavaScript 来传递故事，[因为使用 HTML 会更快](https://jakearchibald.com/2013/progressive-enhancement-is-faster/)，但这种模式在处理 API 时很常见：多次获取数据，然后在所有数据获取完毕后执行操作。
+
+首先，让我们处理从网络获取数据：
+
+## 将 XMLHttpRequest Promise 化
+
+如果可能采取向后兼容的方式，那么可以更新旧的 API 来使用 Promise。 `XMLHttpRequest` 是一个主要的候选对象，但同时让我们写一个简单的函数来发出 GET 请求：
+
+```js
+function get(url) {
+  // Return a new promise.
+  return new Promise(function(resolve, reject) {
+    // Do the usual XHR stuff
+    var req = new XMLHttpRequest();
+    req.open('GET', url);
+
+    req.onload = function() {
+      // This is called even on 404 etc
+      // so check the status
+      if (req.status == 200) {
+        // Resolve the promise with the response text
+        resolve(req.response);
+      }
+      else {
+        // Otherwise reject with the status text
+        // which will hopefully be a meaningful error
+        reject(Error(req.statusText));
+      }
+    };
+
+    // Handle network errors
+    req.onerror = function() {
+      reject(Error("Network Error"));
+    };
+
+    // Make the request
+    req.send();
+  });
+}
+```
+
+现在让我们使用它：
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.error("Failed!", error);
+})
+```
+
+现在我们可以在不手动输入 `XMLHttpRequest` 的情况下发出 HTTP 请求，这一点非常好，因为越少看到`XMLHttpRequest` 的驼峰式大小写，我就会越快乐。
+
+## 链接
+
+`then()` 并不是故事的结尾，您可以将 `then` 链接起来，来进行转换值或依次运行其他异步操作。
+
+### 转换值
+
+您可以简单地通过返回新值来转换值：
+
+```js
+var promise = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+promise.then(function(val) {
+  console.log(val); // 1
+  return val + 2;
+}).then(function(val) {
+  console.log(val); // 3
+})
+```
+
+作为一个实际的例子，让我们回到：
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+})
+```
+
+响应是 JSON，但我们目前以纯文本形式接收它。我们可以改变 get 函数以使用 JSON [`responseType`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest#responseType) ，但同时也可以在 promise 领域解决它：
+
+```js
+get('story.json').then(function(response) {
+  return JSON.parse(response);
+}).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+由于 `JSON.parse()` 使用一个参数并返回一个转换后的值，我们可以创建一个快捷方式：
+
+```js
+get('story.json').then(JSON.parse).then(function(response) {
+  console.log("Yey JSON!", response);
+})
+```
+
+事实上，我们可以很容易地生成 `getJSON()` 函数：
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse);
+}
+```
+
+`getJSON()` 依然会返回一个 promise，它获取一个 url，然后将响应解析为 JSON。
+
+### 队列异步操作
+
+您还可以链接`then`以按顺序运行异步操作。
+
+当 `then()` 回调返回结果时，这有些神奇。如果返回的是一个值，那么将使用该值调用下一个 `then()`。但如果返回的是类 promise 的内容，那么下一个 `then()` 会等待它，并且仅在该 promise 解决（成功/失败）时调用。例如：
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  console.log("Got chapter 1!", chapter1);
+})
+```
+
+在这里，我们向 `story.json` 发出一个异步请求，它为我们提供了一组要请求的 URL，然后我们请求其中第一个 URL。就是在这时候，promise 开始从简单的回调模式中脱颖而出。
+
+您甚至可以生成一个获取章节的快捷方法：
+
+```js
+var storyPromise;
+
+function getChapter(i) {
+  storyPromise = storyPromise || getJSON('story.json');
+
+  return storyPromise.then(function(story) {
+    return getJSON(story.chapterUrls[i]);
+  })
+}
+
+// and using it is simple:
+getChapter(0).then(function(chapter) {
+  console.log(chapter);
+  return getChapter(1);
+}).then(function(chapter) {
+  console.log(chapter);
+})
+```
+
+在调用 `getChapter` 之前，我们不用下载 `story.json`。但接下来调用 `getChapter` 的时候，我们可以重复使用故事的 promise，所以只用获取一次 `story.json`。Promise，真棒！
+
+## 错误处理
+
+正如之前看到的， `then()` 有两个参数，分别表示成功和失败（promises 的术语叫做完成和拒绝）：
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+您还可以使用 `catch()` ：
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).catch(function(error) {
+  console.log("Failed!", error);
+})
+```
+
+`catch()` 并没有任何特别之处，只是 `then(undefined, func)` 的添加剂，但它的可读性更好。请注意，上面的两个代码示例中的行为不同，后者等效于：
+
+```js
+get('story.json').then(function(response) {
+  console.log("Success!", response);
+}).then(undefined, function(error) {
+  console.log("Failed!", error);
+})
+```
+
+这种差异很微妙，但非常有用。 当出现拒绝回调（或 `catch()` ，因为它是等效的）时，promise 拒绝会跳到下一个 `then()`。这时会调用 `then(func1, func2)` 、`func1` 或 `func2`，但不会同时调用两个。但是对于 `then(func1).catch(func2)`，如果 `func1` 拒绝，两者都会被调用，因为它们是链中的单独步骤。采取以下措施：
+
+```js
+asyncThing1().then(function() {
+  return asyncThing2();
+}).then(function() {
+  return asyncThing3();
+}).catch(function(err) {
+  return asyncRecovery1();
+}).then(function() {
+  return asyncThing4();
+}, function(err) {
+  return asyncRecovery2();
+}).catch(function(err) {
+  console.log("Don't worry about it");
+}).then(function() {
+  console.log("All done!");
+})
+```
+
+上面的流程与普通的 JavaScript try/catch 流程非常相似，在 try 中发生的错误会立即进入 `catch()` 块。这是上面的流程图（因为我喜欢流程图）：
+
+<div style="position: relative; padding-top: 93%;">
+  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden"
+   src="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/simQvoUExWisIW0XxToH.svg" | imgix }}" frameborder="0" allowtransparency="true"></iframe>
+</div>
+
+蓝线通往完成的 promise，红线通往拒绝的 promise。
+
+### JavaScript 异常和 promise
+
+当明确拒绝 promise 时就会出现拒绝，此外，当在构造函数回调中引发错误时，也会暗示出现拒绝：
+
+```js
+var jsonPromise = new Promise(function(resolve, reject) {
+  // JSON.parse throws an error if you feed it some
+  // invalid JSON, so this implicitly rejects:
+  resolve(JSON.parse("This ain't JSON"));
+});
+
+jsonPromise.then(function(data) {
+  // This never happens:
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+这意味着在 Promise 构造函数回调中完成所有与 Promise 相关的工作非常有用，这样一来，错误会被自动捕获并变成拒绝。
+
+在 `then()` 回调中引发的错误也是如此。
+
+```js
+get('/').then(JSON.parse).then(function() {
+  // This never happens, '/' is an HTML page, not JSON
+  // so JSON.parse throws
+  console.log("It worked!", data);
+}).catch(function(err) {
+  // Instead, this happens:
+  console.log("It failed!", err);
+})
+```
+
+### 实践中的错误处理
+
+对于故事和章节，可以使用 catch 向用户显示错误：
+
+```js
+getJSON('story.json').then(function(story) {
+  return getJSON(story.chapterUrls[0]);
+}).then(function(chapter1) {
+  addHtmlToPage(chapter1.html);
+}).catch(function() {
+  addTextToPage("Failed to show chapter");
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+如果获取 `story.chapterUrls[0]` 失败（例如 http 500 或用户离线），它将跳过所有后续的成功回调，其中包括尝试将响应解析为 JSON 的 `getJSON()`，同时还会跳过将 chapter1.html 添加到页面的回调。相反，它移动到 catch 回调。因此，如果之前的任何操作均失败，那么”无法显示章节“将添加到页面中。
+
+和 JavaScript 的 try/catch 一样，捕捉错误后，将继续执行后续代，所以旋转器总是隐藏的，这正是我们想要的结果。以上变成了下列代码的非阻塞异步版本：
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  var chapter1 = getJSONSync(story.chapterUrls[0]);
+  addHtmlToPage(chapter1.html);
+}
+catch (e) {
+  addTextToPage("Failed to show chapter");
+}
+document.querySelector('.spinner').style.display = 'none'
+```
+
+您可能只想将 `catch()` 用于记录目的，而不从错误中恢复。为此，只需重新引发错误即可。我们可以在 `getJSON()` 方法中做到这一点：
+
+```js
+function getJSON(url) {
+  return get(url).then(JSON.parse).catch(function(err) {
+    console.log("getJSON failed for", url, err);
+    throw err;
+  });
+}
+```
+
+我们成功获取了一章，但我们想要所有的章节。现在就来解决这个问题。
+
+## 并行和排序：两者兼得
+
+考虑异步并非易事。如果您正在努力摆脱困境，请尝试把它当成同步的来编写代码。在这种情况下：
+
+```js
+try {
+  var story = getJSONSync('story.json');
+  addHtmlToPage(story.heading);
+
+  story.chapterUrls.forEach(function(chapterUrl) {
+    var chapter = getJSONSync(chapterUrl);
+    addHtmlToPage(chapter.html);
+  });
+
+  addTextToPage("All done");
+}
+catch (err) {
+  addTextToPage("Argh, broken: " + err.message);
+}
+
+document.querySelector('.spinner').style.display = 'none'
+```
+
+{% Glitch { id: 'promises-sync-example', height: 480 } %}
+
+成功了！但它是同步的，并在下载内容时锁定了浏览器。为了使这项工作变成异步的，我们使用 `then()` 使事件依次发生。
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // TODO: for each url in story.chapterUrls, fetch & display
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+但如何遍历章节 url 并按顺序获取它们呢？这样**行不通**：
+
+```js
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Fetch chapter
+  getJSON(chapterUrl).then(function(chapter) {
+    // and add it to the page
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+`forEach` 不是异步感知的，所以章节会按照它们的下载的顺序出现，这基本上就是电影《低俗小说》的写作方式。可我们不是在写剧本，所以得解决这个问题。
+
+### 创建序列
+
+我们想把 `chapterUrls` 数组变成一个 promise 序列。可以使用 `then()` 实现：
+
+```js
+// Start off with a promise that always resolves
+var sequence = Promise.resolve();
+
+// Loop through our chapter urls
+story.chapterUrls.forEach(function(chapterUrl) {
+  // Add these actions to the end of the sequence
+  sequence = sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+})
+```
+
+这是我们第一次看到 `Promise.resolve()` ，它可创建一个可解析为您赋予它任何值的 promise。如果您传递给它一个 `Promise` 实例，它会返回该实例（**注意：**这是对规范的一个更改，某些实现尚未遵循）。如果您向它传递一些类 `Promise`（拥有 `then()` 方法），它会创建一个真正的 Promise，以相同的方式完成/拒绝。如果您传入任何其他值，例如 `Promise.resolve('Hello')` ，它会创建一个满足该值的 promise。如果您不用任何值调用它，如上所述，它将以“未定义”来完成。
+
+另外还有 `Promise.reject(val)` ，它创建了一个拒绝您赋予值（或未定义）的 promise。
+
+我们可以使用 [`array.reduce`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 整理上面的代码：
+
+```js
+// Loop through our chapter urls
+story.chapterUrls.reduce(function(sequence, chapterUrl) {
+  // Add these actions to the end of the sequence
+  return sequence.then(function() {
+    return getJSON(chapterUrl);
+  }).then(function(chapter) {
+    addHtmlToPage(chapter.html);
+  });
+}, Promise.resolve())
+```
+
+这与前面的示例相同，但不需要单独的 sequence 变量。为数组中的每个项目调用我们的 reduce 回调。第一次调用时，sequence 是 `Promise.resolve()` ，但对于其余的调用，sequence 是我们从上一次调用返回的任何内容。`array.reduce` 对于将数组简化为单个值非常有用，在这种情况下这个值就是 promise。
+
+现在把它放在一起：
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
+    // Once the last chapter's promise is done…
+    return sequence.then(function() {
+      // …fetch the next chapter
+      return getJSON(chapterUrl);
+    }).then(function(chapter) {
+      // and add it to the page
+      addHtmlToPage(chapter.html);
+    });
+  }, Promise.resolve());
+}).then(function() {
+  // And we're all done!
+  addTextToPage("All done");
+}).catch(function(err) {
+  // Catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  // Always hide the spinner
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-example', height: 480 } %}
+
+好了，这就是同步版本的完全异步版本。但我们可以做得更好。目前页面的下载方式如下：
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise1.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+浏览器非常擅长一次下载多个内容，因此依次下载章节会损失性能。我们的目标是同时下载它们，并且全部下载完毕后进行处理。幸好有一个合适的 API：
+
+```js
+Promise.all(arrayOfPromises).then(function(arrayOfResults) {
+  //...
+})
+```
+
+`Promise.all` 使用一个数组的 promise，并所有 promise 成功完成后创建一个已完成的 promise。您会以传入的 promise 相同的顺序获得一系列结果（无论 promise 完成到什么程度）。
+
+```js
+getJSON('story.json').then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Take an array of promises and wait on them all
+  return Promise.all(
+    // Map our array of chapter urls to
+    // an array of chapter json promises
+    story.chapterUrls.map(getJSON)
+  );
+}).then(function(chapters) {
+  // Now we have the chapters jsons in order! Loop through…
+  chapters.forEach(function(chapter) {
+    // …and add to the page
+    addHtmlToPage(chapter.html);
+  });
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened so far
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-all-example', height: 480 } %}
+
+根据连接情况，这可能比逐个加载快几秒钟，并且比第一次尝试使用的代码更少。章节可以按任何顺序下载，但它们会以正确的顺序出现在屏幕上。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise2.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+但是，我们仍然可以提高感知性能。当第一章下载完毕时，我们应该将其添加到页面中。这让用户可以在其余章节下载完毕之前开始阅读。当第三章到达时，我们不会将其添加到页面中，因为用户可能没有意识到第二章还未准备好。当第二章到来时，我们就可以添加第二章和第三章了，以此类推。
+
+为此，我们同时为所有章节获取 JSON，然后创建一个序列将它们添加到文档中：
+
+```js
+getJSON('story.json')
+.then(function(story) {
+  addHtmlToPage(story.heading);
+
+  // Map our array of chapter urls to
+  // an array of chapter json promises.
+  // This makes sure they all download in parallel.
+  return story.chapterUrls.map(getJSON)
+    .reduce(function(sequence, chapterPromise) {
+      // Use reduce to chain the promises together,
+      // adding content to the page for each chapter
+      return sequence
+      .then(function() {
+        // Wait for everything in the sequence so far,
+        // then wait for this chapter to arrive.
+        return chapterPromise;
+      }).then(function(chapter) {
+        addHtmlToPage(chapter.html);
+      });
+    }, Promise.resolve());
+}).then(function() {
+  addTextToPage("All done");
+}).catch(function(err) {
+  // catch any error that happened along the way
+  addTextToPage("Argh, broken: " + err.message);
+}).then(function() {
+  document.querySelector('.spinner').style.display = 'none';
+})
+```
+
+{% Glitch { id: 'promises-async-best-example', height: 480 } %}
+
+就这样，两全其美！交付所有内容所需的时间相同，但用户会更快地获得第一个内容。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/promises/promise3.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+在这个小例子中，所有章节大约在同一时间到达，但一次显示一个章节的优势将被更多、更大的章节放大。
+
+[使用 Node.js 样式的回调或事件](https://gist.github.com/jakearchibald/0e652d95c07442f205ce)执行上述操作大约会有两倍的代码量，但更重要的是，它的遵循难度更高。然而，Promise 的故事还没有结束，当与其他 ES6 特性结合时，它们会变得更加容易。
+
+## 奖励回合：扩展能力
+
+自从我最初写这篇文章以来，使用 Promise 的能力已经得到了极大的扩展。从 Chrome 55 开始，异步函数允许以同步方式编写基于 Promise 的代码，但不会阻塞主线程。您可以在[我的异步函数](/async-functions)一文中查看更多相关信息。主流浏览器都广泛支持 Promise 和 async 函数。您可以在 MDN 的 [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) 和 [异步函数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)参考中找到详细信息。
+
+非常感谢 Anne van Kesteren、Domenic Denicola、Tom Ashworth、Remy Sharp、Addy Osmani、Arthur Evans 和 Yutaka Hirano，他们校对了本文并提出了更正/建议。
+
+另外，感谢 [Mathias Bynens](https://mathiasbynens.be/) 对本文[多个部分](https://github.com/html5rocks/www.html5rocks.com/pull/921/files)的更新工作。
diff --git a/src/site/content/zh/blog/read-files/index.md b/src/site/content/zh/blog/read-files/index.md
new file mode 100644
index 00000000000..544ed07d237
--- /dev/null
+++ b/src/site/content/zh/blog/read-files/index.md
@@ -0,0 +1,186 @@
+---
+title: 用 JavaScript 读取文件
+subhead: 如何选择文件、读取文件元数据和内容以及监控读取进度。
+description: |2
+
+  如何选择文件、读取文件元数据和内容以及监控读取进度。
+date: 2010-06-18
+updated: 2021-03-29
+authors:
+  - kaycebasques
+  - petelepage
+  - thomassteiner
+tags:
+  - blog
+  - storage
+---
+
+最常用的网络功能之一就是能够选择用户本地设备上的文件并与之进行交互。该功能允许用户选择文件并将其上传到服务器，例如上传照片或提交税务文件等。但是，这项功能也使网站能够在无需通过网络传输数据的情况下对文件进行读取和操作。
+
+## 现代的文件系统访问 API
+
+文件系统访问 API 提供了一种简单的方法来对用户本地系统中的文件和目录进行读取和写入。在大多数 Chromium 衍生浏览器（如 Chrome 或 Edge）中都可以使用该 API。如需了解更多信息，请参阅[文件系统访问 API](/file-system-access/) 一文。
+
+由于文件系统访问 API 尚不与所有浏览器兼容，因而您可以了解一下 [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access)，这是一个辅助库，会在新 API 可用时使用该 API，而在不兼容时退而采用传统方法。
+
+## 处理文件，经典方式
+
+本指南会向您展示如何：
+
+- 选择文件
+    - [使用 HTML 输入元素](#select-input)
+    - [使用拖放区](#select-dnd)
+- [读取文件元数据](#read-metadata)
+- [读取文件内容](#read-content)
+
+## 选择文件 {: #select }
+
+### HTML 输入元素 {: #select-input }
+
+要想使用户能够选择文件，最简单方法是使用各大主流浏览器都支持的[`<input type="file">`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)元素。单击该元素后，用户就能够使用他们操作系统的内置文件选择用户界面来选择单个或多个文件（如果元素中包含[`multiple`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes)属性）。用户选择了一个或多个文件后，将会触发`change`事件。您可以从`event.target.files`访问文件列表，该列表是一个[`FileList`](https://developer.mozilla.org/docs/Web/API/FileList)对象。`FileList`中的每一项都是一个[`File`](https://developer.mozilla.org/docs/Web/API/File)对象。
+
+```html
+<!-- `multiple` 属性使用户能够选择多个文件。 -->
+<input type="file" id="file-selector" multiple>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    const fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+```
+
+{% Aside %}请检查[`window.showOpenFilePicker()`](/file-system-access/#ask-the-user-to-pick-a-file-to-read)方法对于您的用例是否是一个可行的替代方案，因为该方法还为您提供了一个文件句柄，所以除了读取文件之外，您还可以回写文件。您可以使用这种方法进行 [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-files)。{% endAside %}
+
+该示例让用户使用他们操作系统的内置文件选择用户界面选择多个文件，然后将每个选定的文件记录到控制台。
+
+{% Glitch { id: 'input-type-file', height: 480 } %}
+
+#### 限制用户可以选择的文件类型 {: #accept }
+
+在某些情况下，您可能希望限制用户可以选择的文件类型。例如，一个图像编辑应用程序应该只接受图像，而不是文本文件。为此，您可以向输入元素中添加一个[`accept`](https://developer.mozilla.org/docs/Web/HTML/Element/input/file#Additional_attributes)属性来指定可接受的文件类型。
+
+```html
+<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
+```
+
+### 自定义拖放 {: #select-dnd }
+
+在某些浏览器中，`<input type="file">`元素也是一个放置目标，能够让用户将文件拖放到您的应用程序中。但是放置目标很小，可能较难使用。其实，在您使用`<input type="file">`元素提供了核心功能后，就可以提供一个较大的自定义拖放表面。
+
+{% Aside %}请检查[`DataTransferItem.getAsFileSystemHandle()`](/file-system-access/#drag-and-drop-integration)方法对于您的用例是否是一个可行的替代方案，因为该方法还为您提供了一个文件句柄，所以除了读取文件之外，您还可以回写文件。{% endAside %}
+
+#### 选择您的放置区 {: #choose-drop-zone }
+
+您的放置表面将取决于您的应用程序设计。您可能只希望将一部分窗口作为放置表面，也可能希望整个窗口都是放置表面。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xX8UXdqkLmZXu3Ad1Z2q.png", alt="Squoosh（图像压缩网络应用程序）的截图。", width="800", height="589" %}<figcaption>Squoosh 将整个窗口设置成了放置区。</figcaption></figure>
+
+Squoosh 允许用户将图像拖放到窗口的任意位置，而单击**选择图像**就会调用`<input type="file">`元素。无论您选择何种放置区，请确保能够让用户一目了然地知道他们可以将文件拖放到该表面。
+
+#### 定义放置区 {: #define-drop-zone }
+
+要想使一个元素成为拖放区，您需要侦听[`dragover`](https://developer.mozilla.org/docs/Web/API/Document/dragover_event)和[`drop`](https://developer.mozilla.org/docs/Web/API/Document/drop_event)这两个事件。`dragover`事件会更新浏览器用户界面，直观地表明拖放操作正在创建文件的副本。`drop`事件会在用户将文件放置到表面后触发。与输入元素类似，您可以从`event.dataTransfer.files`访问文件列表，该列表是一个[`FileList`](https://developer.mozilla.org/docs/Web/API/FileList)对象。`FileList`中的每一项都是一个[`File`](https://developer.mozilla.org/docs/Web/API/File)对象。
+
+```js
+const dropArea = document.getElementById('drop-area');
+
+dropArea.addEventListener('dragover', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  // 将拖放作为"复制文件"的操作。
+  event.dataTransfer.dropEffect = 'copy';
+});
+
+dropArea.addEventListener('drop', (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const fileList = event.dataTransfer.files;
+  console.log(fileList);
+});
+```
+
+[`event.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)和[`event.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)会阻止浏览器的默认行为，并转而允许您的代码运行。如果没有这两条，浏览器就会离开您的页面，并打开用户放入浏览器窗口的文件。
+
+{# 该示例不可以用作嵌入。 #}
+
+请查看[自定义拖放](https://custom-drag-and-drop.glitch.me/)中的现场演示。
+
+### 如何处理目录？ {: #directories }
+
+很可惜，我们至今都还没找到访问目录的好方法。
+
+`<input type="file">`元素上的[`webkitdirectory`](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory)属性允许用户选择一个或多个目录。一些基于 Chromium 的浏览器支持这项功能，且桌面端 Safari 可能也支持该功能，但浏览器兼容性报告存在[冲突](https://caniuse.com/#search=webkitdirectory)。
+
+{% Aside %}请检查[`window.showDirectoryPicker()`](/file-system-access/#opening-a-directory-and-enumerating-its-contents)方法对于您的用例是否是一个可行的替代方案，因为该方法还为您提供了一个目录句柄，所以除了读取目录之外，您还可以回写目录。您可以使用这种方法进行 [polyfill](https://github.com/GoogleChromeLabs/browser-fs-access#opening-directories)。{% endAside %}
+
+如果启用了拖放功能，用户可能会尝试将目录拖入放置区中。放置事件被触发时将包含该目录的一个`File`对象，但将无法访问目录中的任何文件。
+
+## 读取文件元数据 {: #read-metadata }
+
+[`File`](https://developer.mozilla.org/docs/Web/API/File)对象包含关于文件的许多元数据属性。大多数浏览器会提供文件名、文件大小和 MIME 类型，但因平台而异，不同浏览器可能会提供不同信息或附加信息。
+
+```js
+function getMetadataForFileList(fileList) {
+  for (const file of fileList) {
+    // iOS 版 Safari 浏览器不支持。
+    const name = file.name ? file.name : 'NOT SUPPORTED';
+    // 安卓版 Firefox 浏览器及安卓版 Opera 浏览器不支持。
+    const type = file.type ? file.type : 'NOT SUPPORTED';
+    // 跨浏览器支持情况未知。
+    const size = file.size ? file.size : 'NOT SUPPORTED';
+    console.log({file, name, type, size});
+  }
+}
+```
+
+您可以在[`input-type-file`](https://input-type-file.glitch.me/) Glitch 演示中看到实际运用。
+
+## 读取文件内容 {: #read-content }
+
+请使用[`FileReader`](https://developer.mozilla.org/docs/Web/API/FileReader)来读取文件，该函数使您能够将`File`对象的内容读入内存。您可以指示`FileReader`将文件读取为[数组缓冲区](https://developer.mozilla.org/docs/Web/API/FileReader/readAsArrayBuffer)、[数据 URL](https://developer.mozilla.org/docs/Web/API/FileReader/readAsDataURL) 或[文本](https://developer.mozilla.org/docs/Web/API/FileReader/readAsText)。
+
+```js
+function readImage(file) {
+  // 检查文件是否为图像。
+  if (file.type && !file.type.startsWith('image/')) {
+    console.log('File is not an image.', file.type, file);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    img.src = event.target.result;
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+上方示例中读取了用户提供的`File`，然后将其转换为数据 URL，并使用该数据 URL 在`img`元素中显示图像。请查看[`read-image-file`](https://read-image-file.glitch.me/) Glitch，了解如何验证用户是否选择了图像文件。
+
+{% Glitch { id: 'read-image-file', height: 480 } %}
+
+### 监控文件读取进度 {: #monitor-progress }
+
+在读取大文件时，提供指示读取进度的用户体验可能会有所帮助。要实现这一点，请使用`FileReader`提供的[`progress`](https://developer.mozilla.org/docs/Web/API/FileReader/progress_event)事件。`progress`事件提供了两项属性，即`loaded`（已读取量）和`total`（需读取总量）。
+
+```js/7-12
+function readFile(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', (event) => {
+    const result = event.target.result;
+    // 对结果进行一些操作
+  });
+
+  reader.addEventListener('progress', (event) => {
+    if (event.loaded && event.total) {
+      const percent = (event.loaded / event.total) * 100;
+      console.log(`Progress: ${Math.round(percent)}`);
+    }
+  });
+  reader.readAsDataURL(file);
+}
+```
+
+首图作者：Vincent Botta（来自 [Unsplash](https://unsplash.com/photos/bv_rJXpNU9I)）
diff --git a/src/site/content/zh/blog/referrer-best-practices/index.md b/src/site/content/zh/blog/referrer-best-practices/index.md
new file mode 100644
index 00000000000..bd29284e1fc
--- /dev/null
+++ b/src/site/content/zh/blog/referrer-best-practices/index.md
@@ -0,0 +1,345 @@
+---
+layout: post
+title: 引荐来源 (Referer) 和引荐来源政策 (Referrer-Policy) 最佳实践
+subhead: 设置引荐来源政策并在传入请求中使用引荐来源的最佳实践。
+authors:
+  - maudn
+date: 2020-07-30
+updated: 2020-09-23
+hero: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+thumbnail: image/admin/kh2IMJFSJ3Cj6Zo8jEv5.jpg
+description: 可以考虑设置 `strict-origin-when-cross-origin` 的引荐来源政策。该政策保留了引荐来源的大部分用途，同时降低了跨域泄露数据的风险。
+tags:
+  - blog
+  - security
+  - privacy
+feedback:
+  - api
+---
+
+## 概述
+
+- 意外的跨域信息泄露是网络用户隐私的绊脚石。一个保护性引荐来源政策可以提供帮助。
+- 可以考虑设置 `strict-origin-when-cross-origin` 的引荐来源政策。该政策保留了引荐来源的大部分用途，同时降低了跨域泄露数据的风险。
+- 不要使用引荐来源来防范跨站请求伪造 (CSRF)，而是用 [CSRF 令牌](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)和其他标头作为额外的一层安全保障。
+
+{% Aside %}在我们开始之前：
+
+- 如果您不确定"网站"和"域"之间的区别，请查看[了解"同站"和"同域"](/same-site-same-origin/)。
+- 由于规范中的原始拼写错误，`Referer`标头缺少一个 R。JavaScript 和 DOM 中的`Referrer-Policy`标头和`referrer`的拼写是正确的。{% endAside %}
+
+## 引荐来源和引荐来源政策 101
+
+HTTP 请求可能包含可选的[`Referer`标头](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)，该标头指示发出请求的域或网页 URL。[`Referrer-Policy`标头](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)定义了在`Referer`标头中可用的数据。
+
+在下方的示例中，`Referer`标头包含发出请求的`site-one`上页面的完整 URL。
+
+<figure>{% Img src="image/admin/cXgqJfmD5OPdzqXl9RNt.jpg", alt="包括一个引荐来源标头的 HTTP 请求。", width="800", height="573" %}</figure>
+
+`Referer`标头可能出现在不同类型的请求中：
+
+- 导航请求（当用户点击链接时）
+- 子资源请求（当浏览器请求页面需要的图像、iframe、脚本和其他资源时）
+
+对于导航和 iframe，也可以通过 JavaScript 使用`document.referrer`访问这些数据。
+
+`Referer`值可以提供非常有见解的信息。例如，分析服务可以使用该值来确定`site-two.example`上 50% 的访问者来自`social-network.example`。
+
+但是当包含路径和查询字符串的完整 URL 在`Referer`中被**跨域**发送时，就可能会**有碍隐私**并带来**安全风险**。请看下列这些网址：
+
+<figure>{% Img src="image/admin/oTUtfrwaGYYjlOJ6KRs6.jpg", alt="带有路径的 URL 映射到不同的隐私和安全风险。", width="800", height="370" %}</figure>
+
+URL #1 到 #5 包含私人信息，有时甚至是识别信息或敏感信息。在不知不觉中跨域泄露这些信息可能会危及网络用户的隐私安全。
+
+URL #6 是一个[功能性 URL](https://www.w3.org/TR/capability-urls/)。不要让它落入目标用户之外的任何人手中。如果发生这种情况，恶意行为者可能会劫持该用户的帐号。
+
+**为了限制来自您网站的请求可以获取的引荐来源数据，您可以设置一个引荐来源政策。**
+
+## 有哪些可用的政策，它们之间有何不同？
+
+您可以从八种政策中选择一种。根据政策的选择， `Referer`标头（和`document.referrer`）中可用的数据可以是：
+
+- 无数据（不存在`Referer`标头）
+- 只有[域](/same-site-same-origin/#origin)
+- 完整 URL：域、路径和查询字符串
+
+<figure>{% Img src="image/admin/UR1U0HRP0BOF1e0XnyWA.jpg", alt="引荐来源标头和 document.referrer 中可以包含的数据。", width="800", height="255" %}</figure>
+
+一些政策被设计为根据**上下文**的不同而采取不同行为：跨域或同域请求、安全性（无论请求目的地的安全性是否和域一样），或两者兼备。这对于限制跨域共享或限制向不太安全的域共享的信息量非常有用，同时也能够保持您自己的网站中引荐来源的丰富性。
+
+以下概览显示了引荐来源政策对于引荐来源标头和`document.referrer`中可用 URL 数据的限制方式：
+
+<figure>{% Img src="image/admin/BIHWDY60CI317O7IzmQs.jpg", alt="不同安全性和跨域上下文情况下的不同引荐来源政策及其行为。", width="800", height="537" %}</figure>
+
+MDN 提供了[完整的政策和行为示例列表](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Directives)。
+
+注意事项：
+
+- 所有将方案（HTTPS 与 HTTP）考虑在内的政策（`strict-origin`、`no-referrer-when-downgrade`和`strict-origin-when-cross-origin`）都会以相同的方式处理从一个 HTTP 域到另一个 HTTP 域的请求以及从一个 HTTPS 域到另一个 HTTPS 域的请求（即使 HTTP 的安全性更低）。这是因为对于这些政策来说，重要的是是否发生了安全**降级**，即请求是否可以将数据从一个加密域暴露给一个未加密域。 HTTP → HTTP 请求一直都是未加密的，因此不会出现降级。 相反，HTTPS → HTTP 请求会呈现降级。
+- 如果请求是**同域的** ，这意味着方案（HTTPS 或 HTTP）相同，因此也就没有安全降级。
+
+## 浏览器中的默认引荐来源政策
+
+*截至 2020 年 7 月*
+
+**在未设置引荐来源政策的情况下将使用浏览器的默认政策。**
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>浏览器</th>
+        <th>默认<code>Referrer-Policy</code>/行为</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Chrome</td>
+        <td>计划在<a href="https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default">版本 85</a> 中切换为<code>strict-origin-when-cross-origin</code>（以往是<code>no-referrer-when-downgrade</code>）</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>
+          <ul>
+            <li>
+<code>strict-origin-when-cross-origin</code> （<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1589074">请参阅已关闭的错误</a>）</li>
+            <li>私密浏览和跟踪器中使用<code>strict-origin-when-cross-origin</code>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Edge</td>
+        <td>
+          <ul>
+            <li><code>no-referrer-when-downgrade</code></li>
+            <li>正在对<code>strict-origin-when-cross-origin</code>进行<a href="https://github.com/privacycg/proposals/issues/13">试验</a>
+</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>与<code>strict-origin-when-cross-origin</code>类似。请参阅<a href="https://webkit.org/blog/9661/preventing-tracking-prevention-tracking/">阻止反跟踪进行跟踪</a>了解详情。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 设置您的引荐来源政策：最佳实践
+
+{% Aside 'objective' %} 显式设置隐私增强政策，例如`strict-origin-when-cross-origin`（或更严格的政策）。{% endAside %}
+
+有多种方法可以为您的网站设置引荐来源政策：
+
+- 作为 HTTP 标头
+- 在您的 [HTML](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy#Integration_with_HTML) 中
+- [基于每个请求](https://javascript.info/fetch-api#referrer-referrerpolicy)，来源于 JavaScript
+
+您可以为不同的页面、请求或元素设置不同的政策。
+
+HTTP 标头和元元素都是页面级的。确定一个元素的有效政策时的优先顺序是：
+
+1. 元素级政策
+2. 页面级政策
+3. 浏览器默认
+
+**示例：**
+
+`index.html` ：
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<img src="..." referrerpolicy="no-referrer-when-downgrade" />
+```
+
+图像请求将使用`no-referrer-when-downgrade`政策，而来自该页面的所有其他子资源请求将遵循`strict-origin-when-cross-origin`政策。
+
+## 如何查看引荐来源政策？
+
+通过 [securityheaders.com](https://securityheaders.com/) 可以方便地确定某个特定站点或页面正在使用的政策。
+
+您还可以使用 Chrome、Edge 或 Firefox 的开发者工具查看用于特定请求的引荐来源政策。在撰写本文时，Safari 未显示`Referrer-Policy`标头，但会显示已发送的`Referer`。
+
+<figure>{% Img src="image/admin/8Qlu6ZzSVgL2f9iYIplJ.jpg", alt="Chrome 开发者工具的网络面板截图，显示了引荐来源和引荐来源政策。", width="800", height="416" %}<figcaption> Chrome 开发者工具，<b>网络面板</b>中已选中一条请求。</figcaption></figure>
+
+## 您应该为您的网站设置哪种政策？
+
+概述：显式设置隐私增强政策，例如`strict-origin-when-cross-origin`（或更严格的政策）。
+
+### 为什么要"显式"？
+
+在未设置引荐来源政策的情况下将使用浏览器的默认政策。事实上，网站通常会遵循浏览器的默认政策，但这并不理想，因为：
+
+- 取决于浏览器和模式（私密/无痕），其默认政策通常是`no-referrer-when-downgrade`、`strict-origin-when-cross-origin`，或是更严格的政策。因此，您的网站在不同浏览器中的行为将无法预测。
+- 浏览器正在逐步采用更严格的默认政策，例如`strict-origin-when-cross-origin`，以及针对跨域请求的机制，例如[引荐来源修剪](https://github.com/privacycg/proposals/issues/13)。在浏览器的默认政策更改之前显式选择加入隐私增强政策可以让您掌握控制权，并帮助您按照您认为合适的方式运行测试。
+
+### 为什么要用`strict-origin-when-cross-origin`（或更严格的政策）？
+
+您需要一个安全的、增强隐私且有用的政策，其中，"有用"的含义取决于您对引荐来源的需求：
+
+- **安全**：如果您的网站使用 HTTPS（[如果还未使用，请优先考虑迁移](/why-https-matters/)），则要杜绝网站的 URL 在非 HTTPS 请求中泄露。由于网络上的任何人都可以看到这些，这就会使您的用户面临中间人攻击。`no-referrer-when-downgrade`、`strict-origin-when-cross-origin`、`no-referrer`和`strict-origin`政策解决了这个问题。
+- **隐私增强**：对于跨域请求，`no-referrer-when-downgrade`会共享完整的 URL，因此并不能增强隐私。`strict-origin-when-cross-origin`和`strict-origin`只共享域，而`no-referrer`完全不共享任何信息。您因此可以将`strict-origin-when-cross-origin`、`strict-origin`和`no-referrer`作为隐私增强的选项。
+- **有用**：`no-referrer`和`strict-origin`永远不会共享完整的 URL，即使对于同域请求也不例外，所以如果您对此有需求， 那么`strict-origin-when-cross-origin`是更好的选择。
+
+所有这些都表明**`strict-origin-when-cross-origin`**通常是一个明智的选择。
+
+**示例：设置一个`strict-origin-when-cross-origin`政策：**
+
+`index.html` ：
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+```
+
+或服务端，例如在 Express 中：
+
+```javascript
+const helmet = require('helmet');
+app.use(helmet.referrerPolicy({policy: 'strict-origin-when-cross-origin'}));
+```
+
+### 如果`strict-origin-when-cross-origin`（或更严格的政策）不适用于您所有的用例怎么办？
+
+在这种情况下，采取**渐进式方法**：为您的网站设置一个保护性政策，例如`strict-origin-when-cross-origin`，如果有进一步需要，为特定请求或 HTML 元素设置一个更宽松的政策。
+
+### 示例：元素级政策
+
+`index.html` ：
+
+```html/6
+<head>
+  <!-- document-level policy: strict-origin-when-cross-origin -->
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <head>
+    <body>
+      <!-- policy on this <a> element: no-referrer-when-downgrade -->
+      <a src="…" href="…" referrerpolicy="no-referrer-when-downgrade"></a>
+      <body></body>
+    </body>
+  </head>
+</head>
+```
+
+请注意，Safari/WebKit 可能会限制[跨站](/same-site-same-origin/#same-site-cross-site)请求的`document.referrer`或`Referer`标头。查看[详情](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)。
+
+### 示例：请求级政策
+
+`script.js` ：
+
+```javascript
+fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
+```
+
+### 您还应该考虑什么？
+
+您的政策应该取决于您的网站和用例，而这又取决于您、您的团队和您的公司。如果某些 URL 包含识别或敏感数据，请设置一个保护性政策。
+
+{% Aside 'warning' %}对您来说或许不敏感的数据可能对您的用户来说是敏感数据，或者是他们根本不想或未预计到会不知不觉地跨域泄漏的数据。{% endAside %}
+
+## 使用传入请求中的引荐来源：最佳实践
+
+### 如果您的网站功能使用传入请求的引荐来源 URL 怎么办？
+
+#### 保护用户数据
+
+`Referer`可能包含私密数据、个人数据或识别数据，因此请确保您对此类数据采用相应的对待方式。
+
+#### 请记住，您收到的`Referer`可能会发生改变
+
+使用传入跨域请求中的引荐来源有一些限制：
+
+- 如果您无法控制请求发射器的执行情况，就不能对您收到的`Referer`标头（和`document.referrer`）做出假设。请求发射器可以随时决定切换到`no-referrer`政策，或者在更普遍的情况下切换到比之前更严格的政策，也就意味着您通过`Referer`获得的数据将比以前更少。
+- 默认情况下，浏览器会越来越多地使用`strict-origin-when-cross-origin`引荐来源政策。这意味着，如果发送这些请求的网站没有设置政策，您现在可能只会在传入跨域请求中收到域（而不是完整的引荐来源 URL）。
+- 浏览器可能会改变`Referer`的管理方式。例如，浏览器在将来可能会决定在跨域子资源请求中始终将引荐来源修剪到域，从而保护用户隐私。
+- `Referer`标头（和`document.referrer`）可能包含超出您需要的数据，例如当您只想知道请求是否为跨域时，却收到了完整的 URL。
+
+#### `Referer`的替代方案
+
+如果出现以下情况，您可能需要考虑替代方案：
+
+- 您网站的一项基本功能使用传入跨域请求中的引荐来源 URL；
+- 和/或如果您的网站不再接收其在跨域请求中所需的引荐来源 URL 部分。当请求发射器更改了政策或没有设置政策，并且浏览器的默认政策发生了变化（比如在 [Chrome 85](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) 中）时，就会发生这种情况。
+
+要定义替代方案，请先分析您正在使用引荐来源的哪一部分。
+
+**如果您只需要域（`https://site-one.example`）：**
+
+- 如果您在对页面有顶级访问权限的脚本中使用引荐来源，那么`window.location.origin`是一种替代方案。
+- 在可用的情况下，如[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)和[`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site)这样的标头可以为您提供`Origin`或描述请求是否为跨域，这可能正是您所需要的。
+
+**如果您需要 URL 的其他元素（路径、查询参数……）：**
+
+- 请求参数或许适用于您的用例，而且可以为您省去解析引荐来源带来的工作。
+- 如果您在对页面有顶级访问权限的脚本中使用引荐来源，那么`window.location.pathname`是一种替代方案。仅提取 URL 的路径部分并将其作为参数传递，这样就不会传递 URL 参数中的任何潜在敏感信息。
+
+**如果您不能使用上述替代方案：**
+
+- 检查您的系统是否可以更改为期望请求发射器（`site-one.example`）在某种配置下显式设置您需要的信息。优点：更明确、对`site-one.example`用户来说更保护隐私、更利于将来。缺点：可能会为您或您的系统用户带来更多的工作。
+- 检查发出请求的网站是否同意为每个元素或每个请求设置`no-referrer-when-downgrade`引荐来源政策。缺点：对`site-one.example`用户的隐私保护可能较弱、可能并非所有浏览器都支持。
+
+### 跨站请求伪造 (CSRF) 保护
+
+请注意，请求发射器始终可以通过设置一个`no-referrer`政策来决定不发送引荐来源（恶意行为者甚至可以伪造引荐来源）。
+
+将 [CSRF 令牌](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#token-based-mitigation)作为您的主要保护措施。要想获得额外保护，请使用[SameSite](/samesite-cookie-recipes/#%22unsafe%22-requests-across-sites)，同时使用诸如[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)（可用于 POST 和 CORS 请求）和[`Sec-Fetch-Site`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Sec-Fetch-Site)（如果可用）这样的标头，而不是`Referer`。
+
+### 日志记录
+
+请确保可能在`Refer`中的用户的个人数据或敏感数据得到保护。
+
+如果您只使用域，请检查[`Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Origin)标头是否可以作为替代方案。在调试方面，这可能会以更简单的方式为您提供所需信息，而无需解析引荐来源。
+
+### 付款
+
+付款服务提供商可能会依赖传入请求中的`Referer`标头来进行安全检查。
+
+例如：
+
+- 用户单击`online-shop.example/cart/checkout`上的**购买**按钮。
+- `online-shop.example`重定向到`payment-provider.example`来管理交易。
+- `payment-provider.example`对照商家设置的`Referer`准许值列表检查该请求的`Referer`。如果在列表中未找到任何匹配条目，则`payment-provider.example`拒绝该请求。如果有匹配条目，则用户可以继续进行交易。
+
+#### 支付流程安全检查的最佳实践
+
+**概述：作为付款提供商，您可以将`Referer`作为针对朴素攻击的基本检查，但您一定需要有另一种更可靠的验证方法。**
+
+单独的`Referer`标头并不是一个可靠的检查依据：请求网站无论是否是合法商家，都可以设置一个`no-referrer`政策，这将使付款提供商无法获取`Referer`信息。但是，作为付款提供商，查看`Referer`可能会帮助您发现未设置`no-referrer`政策的朴素攻击者。因此，您可以使用`Referer`作为第一层基本检查。如果您这样做：
+
+- **不要期望`Referer`总是存在。如果`Referer`存在，那么只检查其至少会包括的那部分数据：域**。在设置`Refer`准许值列表时，要确保不包括任何路径，只包括域。例如：`online-shop.example`的`Refer`准许值应该是`online-shop.example`，而不是`online-shop.example/cart/checkout`。为什么？因为通过对根本没有`Refer`或者一个是请求网站的域的`Refer`值作出期望，您可以防止意外错误，因为您既**没有对**商家设置的**`Referrer-Policy`做出假设**，也没有对商家未设置政策情况下的浏览器行为做出假设。网站和浏览器都可以将传入请求中的`Referer`剥离出来，只保留域，或者根本不发送`Referer`。
+- 如果`Referer`不存在，或者其存在并且您的基本`Referer`域检查成功：您可以继续使用其他更可靠的验证方法（见下文）。
+
+**有哪些更可靠的验证方法？**
+
+一种可靠的验证方法是让请求者**将请求参数**与唯一密钥一起**散列**。作为付款提供商，您接下来可以**自己对相同的散列进行计算**，并且仅在请求与您的计算匹配时才接受。
+
+**当一个没有引荐来源政策的 HTTP 商家网站重定向到一个 HTTPS 付款服务提供商时，`Referer`会发生什么？**
+
+在向 HTTPS 付款提供商发出的请求中不会看到`Referer`，因为当网站没有设置政策时，[大多数浏览器](#default-referrer-policies-in-browsers)默认使用`strict-origin-when-cross-origin`或`no-referrer-when-downgrade`。另请注意，[Chrome 对新默认政策的更改](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)不会改变此行为。
+
+{% Aside %}
+
+如果您的网站使用 HTTP，请[迁移到 HTTPS](/why-https-matters/)。
+
+{% endAside %}
+
+## 结论
+
+一个保护性的引荐来源政策是为您的用户提供更多隐私保护的好方法。
+
+如需了解不同用户保护技术的更多相关信息，请查看 web.dev 的[安全和保障](/secure/)系列！
+
+*非常感谢所有审稿人的贡献和反馈：特别是 Kaustubha Govind、David Van Cleve、Mike West、Sam Dutton、Rowan Merewood、Jxck 和 Kayce Basques。*
+
+## 资源
+
+- [理解"同站"和"同域"](/same-site-same-origin/)
+- [新的安全标头：引荐来源政策 (2017)](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+- [MDN 上的引荐来源政策](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy)
+- [引荐来源标头：MDN 上的隐私和安全问题](https://developer.mozilla.org/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [Chrome 更改：Blink 引擎有意向实现](https://groups.google.com/a/chromium.org/d/msg/blink-dev/aBtuQUga1Tk/n4BLwof4DgAJ)
+- [Chrome 更改：Blink 引擎有意向运送](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/lqFuqwZDDR8)
+- [Chrome 更改：状态条目](https://www.chromestatus.com/feature/6251880185331712)
+- [Chrome 更改：85 测试版博文](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)
+- [引荐来源修剪 GitHub 线程：不同浏览器的做法](https://github.com/privacycg/proposals/issues/13)
+- [引荐来源政策规范](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery)
diff --git a/src/site/content/zh/blog/resize-observer/index.md b/src/site/content/zh/blog/resize-observer/index.md
new file mode 100644
index 00000000000..a9e1aa2ba8e
--- /dev/null
+++ b/src/site/content/zh/blog/resize-observer/index.md
@@ -0,0 +1,129 @@
+---
+title: ResizeObserver：就像元素的 document.onresize
+subhead: "`ResizeObserver` 可告知元素大小何时发生变化。"
+authors:
+  - surma
+  - joemedley
+date: 2016-10-07
+updated: 2020-05-26
+hero: image/admin/WJ69aw9UMPwsc7ShYvif.jpg
+alt: 盒子里生长的植物。
+description: |2-
+
+  `ResizeObserver` 在元素的 content rectangle 改变大小时发出通知，以便您做出相应的反应。
+tags:
+  - blog
+  - dom
+  - javascript
+  - layout
+  - rendering
+feedback:
+  - api
+---
+
+在`ResizeObserver`之前，必须将侦听器附加到文档的 `resize` 事件，以便 viewport 尺寸更改时得到通知。在事件处理程序中，必须确定哪些元素受到该更改的影响，并调用特定例程以做出适当的反应。如果在大小调整后需要元素的新尺寸，则必须调用 `getBoundingClientRect()` 或 `getComputedStyle()`，如果您不在乎批处理 *所有*读取和*所有*写入，则可能会导致布局抖动。
+
+这甚至不包括窗口大小不变，元素调整自己大小的情况。例如，添加新子元素、将元素的 `display` 样式设置为 `none` 或类似操作可以更改元素、其同级或祖先的大小。
+
+这就是为什么 `ResizeObserver` 是一个有用的基础。它对任何监听元素大小变化做出反应，与引起变化的原因无关。您可以通过它来访问监听元素的新大小。
+
+## API
+
+上述所有带 `Observer` 后缀的 API 都有一个简单的 API 设计。 `ResizeObserver` 也不例外。您创建一个 `ResizeObserver` 对象并将回调传递给构造函数。回调被传递一个 `ResizeObserverEntry` 对象数组（每个监听元素一项），其中包含元素的新尺寸。
+
+```js
+var ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    const cr = entry.contentRect;
+    console.log('Element:', entry.target);
+    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
+    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
+  }
+});
+
+// 监听一个或多个元素
+ro.observe(someElement);
+```
+
+## 一些细节
+
+### 报告哪些内容？
+
+通常， [`ResizeObserverEntry` 通过一个名为](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry) `contentRect` 的属性报告元素的内容框，该属性返回一个 [`DOMRectReadOnly`](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) 对象。内容框是可以放置内容的框，等于边框减去填充。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CKxpe8LNq2CMPFdtLtVK.png", alt="CSS 框模型图。", width="727", height="562" %}</figure>
+
+需要注意的是，虽然是 `ResizeObserver`*{nbsp}报告* `contentRect` 和填充的尺寸，但只*关注* `contentRect` 。*不要*将 `contentRect` 与元素的边界框混淆。 `getBoundingClientRect()` 报告的边界框是包含整个元素及其后代的框。SVG 不适用此规则，`ResizeObserver` 会报告边界框的尺寸。
+
+从 Chrome 84 开始， `ResizeObserverEntry` 具有三个新属性来提供更详细的信息。这些属性中的每一个都返回一个 `ResizeObserverSize` 对象，其中包含一个 `blockSize` 属性和一个 `inlineSize` 属性。此信息与调用回调时监听的元素有关。
+
+- `borderBoxSize`
+- `contentBoxSize`
+- `devicePixelContentBoxSize`
+
+所有这些都返回只读数组，因为将来希望它们可以支持具有多个片段的元素，这些片段出现在多列场景中。目前，这些数组只包含一个元素。
+
+支持这些属性的平台有限，但 [Firefox 已经支持](https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry#Browser_compatibility)前两个。
+
+### 什么时候报告？
+
+规范规定 `ResizeObserver` 应该在绘制之前和布局之后处理所有调整大小事件。这使得 `ResizeObserver` 的回调成为更改页面布局的理想场所。因为 `ResizeObserver` 处理发生在布局和绘制之间，这样做只会使布局无效，对绘制无影响。
+
+### 明白了
+
+您可能会问自己：如果我将回调中监听元素的大小更改为 `ResizeObserver` 会怎么样？答案是：将立即触发另一个回调调用。幸运的是， `ResizeObserver` 有一种机制可以避免无限回调循环和循环依赖。如果调整大小后的元素在 DOM 树中比前一个回调中处理的 *最浅*元素更深，则更改将仅在同一帧中处理。否则，将被推迟到下一帧。
+
+## 应用
+
+利用 `ResizeObserver` 可以实现每个元素的媒体查询。通过监听元素，可以强制定义设计断点并更改元素的样式。在以下[示例中](https://googlechrome.github.io/samples/resizeobserver/)，第二个框将根据其宽度更改边框半径。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_vp8.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/elem-mq_x264.mp4" type="video/mp4; codecs=h264">
+  </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius =
+        Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+// 只监听第二个框
+ro.observe(document.querySelector('.box:nth-child(2)'));
+```
+
+另一个有趣的例子是聊天窗口。在典型的从上到下的对话布局中出现的问题是滚动定位。为避免让用户感到困惑，最好将窗口贴在对话的底部，即最新消息出现的位置。此外，任何类型的布局更改（设想手机从横向变为纵向，反之亦然）都应该实现相同的效果。
+
+利用 `ResizeObserver` 只需写*一*段代码，即可满足*两种*情况的需要。调整窗口大小是一个 `ResizeObserver` 可以根据定义捕获的事件，但调用 `appendChild()` 也会调整该元素的大小（除非设置了 `overflow: hidden` ），因为它需要为新元素腾出空间。考虑到这一点，只需很少的行就可以达到预期的效果：
+
+<figure>
+ <video controls autoplay loop muted>
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_vp8.webm" type="video/webm; codecs=vp8">
+   <source src="https://storage.googleapis.com/webfundamentals-assets/resizeobserver/chat_x264.mp4" type="video/mp4; codecs=h264">
+ </source></source></video></figure>
+
+```js
+const ro = new ResizeObserver(entries => {
+  document.scrollingElement.scrollTop =
+    document.scrollingElement.scrollHeight;
+});
+
+// 监听 scrollingElement 了解窗口大小何时改变
+ro.observe(document.scrollingElement);
+// 监听 timeline 以处理新消息
+ro.observe(timeline);
+```
+
+很简洁吧？
+
+在此基础上，我可以添加更多代码来处理用户手动向上滚动并希望在收到新消息时滚动到*那条*消息的情况。
+
+另一个用例是针对任何类型的自定义元素进行自己的布局。在`ResizeObserver`之前，没有可靠的方法在其尺寸发生变化时获得通知，以便可以重新布置其子项。
+
+## 结论
+
+[大多数主流浏览器中](https://developer.mozilla.org/docs/Web/API/ResizeObserver#Browser_compatibility)都有 `ResizeObserver`。在某些情况下，最近才出现。有[一些 polyfill，](https://github.com/WICG/ResizeObserver/issues/3)但不可能完全复制 `ResizeObserver` 的功能。当前的实现要么依赖于轮询，要么依赖于向 DOM 添加 sentinel 元素。前者会通过让 CPU 始终繁忙而耗尽移动设备的电量，而后者会修改您的 DOM，并可能弄乱样式和其他依赖 DOM 的代码。
+
+照片：[Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)；来源：[Unsplash](https://unsplash.com/s/photos/observe-growth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)。
diff --git a/src/site/content/zh/blog/responsive-web-design-basics/index.md b/src/site/content/zh/blog/responsive-web-design-basics/index.md
new file mode 100644
index 00000000000..bb00bf8baa6
--- /dev/null
+++ b/src/site/content/zh/blog/responsive-web-design-basics/index.md
@@ -0,0 +1,333 @@
+---
+title: 响应式网页设计基础知识
+subhead: 如何创建响应浏览设备的需要和功能的网站。
+description: 如何创建响应浏览设备的需要和功能的网站。
+date: 2019-02-12
+updated: 2020-05-14
+authors:
+  - petelepage
+  - rachelandrew
+tags:
+  - blog
+  - css
+  - layout
+  - mobile
+  - ux
+---
+
+{# TODO(kayce)：在 #1983 到位后删除这个硬编码的 ToC。 #}
+
+- [设置可视区域](#viewport)
+- [按可视区域调整内容尺寸](#size-content)
+- [使用 CSS 媒体查询来提高响应性](#media-queries)
+- [如何选择断点](#breakpoints)
+- [在 Chrome DevTools 中查看媒体查询断点](#devtools)
+
+使用移动设备上网的情况持续以天文数字般的速度增长，而这些设备通常受到屏幕显示尺寸的限制，因而需要采用不同的方法来布局屏幕上的内容。
+
+响应式网页设计最初由 [Ethan Marcotte 在《A List Apart》中](http://alistapart.com/article/responsive-web-design/)进行了定义，响应了用户及他们所使用设备的需求。布局会根据设备的尺寸和功能而变化。例如，用户会在手机上看到以单列视图显示的内容，而平板电脑可能会采用两列视图来显示相同的内容。
+
+<figure>{% Video src="video/tcFciHGuF3MxnTr1y5ue01OGLBn2/8RKRFvbuoXGkOSuEArb7.mp4", autoplay=true, controls=true, loop=true, muted=true, playsinline=true %}</figure>
+
+手机、“平板手机”、平板电脑、台式机、游戏机、电视，甚至可穿戴设备中存在多种不同的屏幕尺寸。屏幕尺寸始终在变化，因此至关重要的是您的网站能够适应现在以及将来的任何屏幕尺寸。此外，我们与不同设备的交互方式也不同。例如，您的一部分访问者将使用触摸屏。现代响应式设计将所有这些因素都考虑在内，进而优化每个人的体验。
+
+## 设置可视区域 {: #viewport }
+
+您在为多种设备优化页面时，必须在文档头部包含一个元可视区域标签。元可视区域标签为浏览器提供如何控制页面尺寸和缩放的指示。
+
+为了力图提供最佳体验，移动端浏览器会以桌面端屏幕宽度（因设备而异，通常约为`980px`）来渲染页面，然后尝试通过增大字体和缩放内容来适应屏幕尺寸，提升内容的视觉效果。这就意味着字体大小对用户来说或许会不一致，他们可能需要双击或捏拉缩放才能查看内容并与之交互。
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    …
+  </head>
+  …
+
+```
+
+使用`width=device-width`元可视区域值可以指示页面采用设备独立像素匹配屏幕宽度。一个设备（或密度）独立像素代表一个像素，在高密度屏幕上可能由许多物理像素组成。这使得页面无论是在小型手机还是大型桌面显示器上进行渲染，都可以对内容进行重排来匹配不同的屏幕尺寸。
+
+<figure>{% Img src="image/admin/SrMBH5gokGU06S0GsjLS.png", alt="文本被过度缩小而难以阅读的页面截图", width="500", height="640" %} <figcaption>页面在没有可视区域元标签的情况下在设备中加载的示例。<a href="https://without-vp-meta.glitch.me/">在 Glitch 上查看此示例</a>。</figcaption></figure>
+
+<figure>{% Img src="image/admin/9NrJxt3aEv37A3E7km65.png", alt="文本大小易于阅读的同一页面截图", width="500", height="888" %} <figcaption>页面在有可视区域元标签的情况下在设备中加载的示例。<a href="https://with-vp-meta.glitch.me/">在 Glitch 上查看此示例</a>。</figcaption></figure>
+
+[部分浏览器](https://css-tricks.com/probably-use-initial-scale1/)在旋转到横屏模式时页面宽度保持不变，同时采用缩放来填充屏幕，而不是通过重排。添加`initial-scale=1`值可以指示浏览器在 CSS 像素和设备独立像素之间建立 1:1 的关系，从而在无需考虑设备方向的情况下使页面能够充分利用完整的横向宽度。
+
+{% Aside '注意' %}为确保旧版浏览器可以正确解析属性，请使用逗号分隔属性。{% endAside %}
+
+[没有包含`width`或`initial-scale`的`<meta name="viewport">`标签](https://developer.chrome.com/docs/lighthouse/pwa/viewport/) Lighthouse 审计可以帮助您自动确保您的 HTML 文档正确使用了可视区域元标签。
+
+### 确保可视区域的可访问性 {: #accessible-viewport }
+
+除了设置`initial-scale`外，您还可以在可视区域上设置以下属性：
+
+- `minimum-scale`
+- `maximum-scale`
+- `user-scalable`
+
+设置这些属性后，用户将无法缩放可视区域，因此可能会导致可访问性问题。因此我们不建议使用这些属性。
+
+## 按可视区域调整内容尺寸 {: #size-content }
+
+桌面端和移动端设备的用户都习惯于垂直滚动网站，而不是水平滚动网站；强制用户水平滚动网站或通过缩小来显示全部页面都会导致糟糕的用户体验。
+
+在开发带有元可视区域标签的移动端网站时，很容易意外创建尺寸与指定可视区域不太匹配的页面内容。例如，若显示图像的宽度大于可视区域宽度，就可能会导致可视区域水平滚动。您应该调整内容来匹配可视区域的宽度，使用户无需进行水平滚动。
+
+[内容尺寸与可视区域不匹配](https://developer.chrome.com/docs/lighthouse/pwa/content-width/)的 Lighthouse 审计可以帮助您自动检测溢出内容。
+
+### 图像 {: #images }
+
+一张图像具有固定的尺寸，如果该图像比可视区域大，就会出现滚动条。对于这个问题，最常用的处理方法就是将所有图像的`max-width`指定为`100%`。在可视区域尺寸比图像小的情况下，这将使图像缩小来与空间相匹配。然而，因为`max-width`是`100%`，而不是`width`是`100%`，图像并不会拉伸到大于其自然尺寸。一般来说，较安全的做法是将以下内容添加到您的样式表中，这样您就永远不会遇到图像导致的滚动条问题了。
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+}
+```
+
+#### 将图像尺寸添加到 img 元素中 {: #image-dimensions }
+
+虽然您通过使用`max-width: 100%`覆盖了图像的自然尺寸，但是您仍然应该在`<img>`标签上使用`width`和`height`属性。这是因为现代浏览器将使用这些信息来在图像加载前为其预留空间，这样有助于避免随着内容加载而发生的[布局偏移](/optimize-cls/)。
+
+### 布局 {: #layout }
+
+由于不同设备之间（例如，手机与平板电脑之间，甚至不同手机之间）的屏幕尺寸和宽度（以 CSS 像素为单位）差别很大，因此内容不应该依赖于某一特定的可视区域宽度来达到良好的渲染效果。
+
+在过去，我们需要设置元素来按百分比创建布局。在下面的示例中，您可以看到一个包含浮动元素的双列布局，元素尺寸由像素设置。一旦可视区域小于两列的总宽度，我们就必须水平滚动来查看内容。
+
+<figure>{% Img src="image/admin/exFCZNQLUveUnpMFjvcj.jpg", alt="第二列的大部分超出可视区域的双列布局截图", width="800", height="504" %} <figcaption>使用像素设置的浮动布局。<a href="https://layout-floats-px.glitch.me/">在 Glitch 上查看此示例</a>。</figcaption></figure>
+
+通过为宽度设置百分比，列的宽度就会始终保持在容器宽度的特定百分比。这意味着列会随之变窄，而不会出现滚动条。
+
+{% Glitch { id: 'layout-floats-percent', path: 'README.md' } %}
+
+弹性方框布局、网格布局和多列布局等现代 CSS 布局技术使创建这些灵活的网格变得更加容易。
+
+#### 弹性方框布局 {: #flexbox }
+
+当您有一组不同尺寸的元素，而您希望这些元素能够和谐地列进一排或多排，并且较小的元素占据较少的空间，而较大的元素获得更大的空间时，这种布局方法是非常理想的。
+
+```css
+.items {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+在响应式设计中，您可以使用弹性方框布局将元素显示为单行排列，或者随着可用空间的减少而组成多行排列。
+
+{% Glitch { id: 'responsive-flexbox', height: 220 } %}
+
+[阅读弹性方框布局的更多相关信息](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox)。
+
+#### CSS 网格布局 {: #grid }
+
+CSS 网格布局使您能够非常直观地创建灵活的网格。如果考虑先前的浮动元素示例，我们可以不使用百分比来创建列，而是取而代之地使用网格布局和`fr`单位，该单位代表容器中的一部分可用空间。
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+```
+
+{% Glitch 'two-column-grid' %}
+
+您也可以使用网格创建常规的网格布局，并且可以包含尽可能多的元素。随着屏幕尺寸的缩小，可用的轨道数量也会减少。在下方的演示里，我们有尽可能多的卡可以排列在每一行中，其中最小的尺寸为`200px`。
+
+{% Glitch 'grid-as-many-as-fit' %}
+
+[阅读 CSS 网格布局的更多相关信息](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Grids)
+
+#### 多列布局 {: #multicol }
+
+对于某些布局类型，您可以采用多列布局 (Multicol)，这种布局可以利用`column-width`属性创建响应式的列数。您可以在下方的演示中看到，只要有空间容纳另一个`200px`的列，布局中就会添加新的列。
+
+{% Glitch { id: 'responsive-multicol', path: 'style.css' } %}
+
+[阅读多列布局的更多相关信息](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+
+## 使用 CSS 媒体查询来提高响应性 {: #media-queries }
+
+有时您会需要对布局进行更大规模的更改来支持特定的屏幕尺寸，而上述所展示的技术并不允许这一点。媒体查询在这种情况下非常实用。
+
+媒体查询是可以应用于 CSS 样式的简单筛选器，能够根据渲染内容的设备类型或该设备的特征来轻松更改样式，例如宽度、高度、方向、悬停功能，以及设备是否被用作触摸屏。
+
+要想提供不同的打印样式，您需要以一种输出*类型*为目标，这样才可以包含一个具有如下打印样式的样式表：
+
+```html/4
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    …
+    <link rel="stylesheet" href="print.css" media="print">
+    …
+  </head>
+  …
+```
+
+或者，您也可以使用媒体查询在主样式表中包含打印样式：
+
+```css
+@media print {
+  /* 此处为打印样式 */
+}
+```
+
+{% Aside '备注' %}也可以使用`@import`语法（`@import url(print.css) print;`）在您的主 CSS 文件中包含单独的样式表，但是出于性能原因，我们不建议您使用此方法。请参阅[避免 CSS 导入](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations#avoid_css_imports)了解更多详情。{% endAside %}
+
+对于响应式网页设计，我们通常会查询设备*特征*，从而为较小的屏幕或者当检测到访问者正在使用触摸屏时提供不同的布局。
+
+### 基于可视区域大小的媒体查询 {: #viewport-media-queries }
+
+媒体查询使我们能够创建响应式体验，提供适用于小屏幕、大屏幕及介于两者之间任何屏幕尺寸的特定样式。因此，我们这里检测的特征是屏幕尺寸，而我们可以检测以下属性。
+
+- `width` （ `min-width` ， `max-width` ）
+- `height` （ `min-height` ， `max-height` ）
+- `orientation`
+- `aspect-ratio`
+
+{% Glitch { id: 'media-queries-size', path: 'index.html' } %}
+
+所有这些功能都具备出色的浏览器支持，如需了解包括浏览器支持信息在内的更多相关详情，请参阅 MDN 上的[宽度](https://developer.mozilla.org/docs/Web/CSS/@media/width)、[高度](https://developer.mozilla.org/docs/Web/CSS/@media/height)、[方向](https://developer.mozilla.org/docs/Web/CSS/@media/orientation)和[长宽比](https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio)。
+
+{% Aside '备注' %}尽管规范中确实包括了对`device-width`和`device-height`的检测，但这些已被弃用，您应该避免进行这些检测。`device-width`和`device-height`检测的是设备窗口的实际尺寸，这在实践中并不实用，因为该尺寸可能与用户正在查看的可视区域不一致，例如在用户调整了浏览器窗口大小的情况下。{% endAside %}
+
+### 基于设备功能的媒体查询 {: #capability-media-queries }
+
+鉴于目前可用设备的广度，我们不能假设每台大型设备都是一台常规的台式机或笔记本电脑，或者人们只在小型设备上使用触摸屏。通过对媒体查询规范作出的新补充，我们现在可以检测与设备交互的指针类型以及用户是否可以悬停在元素上等特征。
+
+- `hover`
+- `pointer`
+- `any-hover`
+- `any-pointer`
+
+请尝试在不同设备上查看此演示，例如普通台式机、手机或平板电脑。
+
+{% Glitch 'media-query-pointer' %}
+
+这些较新的功能在所有现代浏览器中都具备良好的支持。您可以在 MDN 页面上了解 [hover](https://developer.mozilla.org/docs/Web/CSS/@media/hover)、[any-hover](https://developer.mozilla.org/docs/Web/CSS/@media/any-hover)、[pointer](https://developer.mozilla.org/docs/Web/CSS/@media/pointer)、[any-pointer](https://developer.mozilla.org/docs/Web/CSS/@media/any-pointer) 的更多相关信息。
+
+#### 使用`any-hover`和`any-pointer`
+
+`any-hover`和`any-pointer`功能检测用户是否能够悬停，或者即使在用户不是主要通过该类型指针来与设备进行交互的情况下还可以使用该类型的指针。您在使用这些功能时要非常谨慎。当用户在使用触摸屏时，强迫他们切换为鼠标是很不友好的！但是，如果确定用户的设备类型对您来说很重要的话，`any-hover`和`any-pointer`可能会非常实用。例如，带有触摸屏和触控板的笔记本电脑除了能够匹配悬停功能外，还应该可以匹配粗略指针和精确指针。
+
+## 如何选择断点 {: #breakpoints }
+
+请不要根据设备类别来定义断点。根据如今被广泛使用的特定设备、产品、品牌名称或操作系统来定义断点可能会导致维护的噩梦。反之，应该由内容本身来决定布局如何与容器相适配。
+
+### 由小到大地选取断点 {: #major-breakpoints }
+
+首先将内容设计为适合小屏幕的尺寸，然后逐步扩展屏幕尺寸，直到需要设置一个断点。这个做法使您能够根据内容来优化断点，同时保持尽可能少的断点。
+
+我们就拿开头看到的示例来说：天气预报。第一步是让天气预报在小屏幕上呈现出良好的效果。
+
+<figure>{% Img src="image/admin/3KPWtKzDFCwImLyHprRP.png", alt="移动设备宽度下的天气应用程序截图", width="400", height="667" %} <figcaption>宽度较窄情况下的应用程序。</figcaption></figure>
+
+接下来，调整浏览器的大小，直到元素之间出现大片空白，这时天气预报的呈现效果就逊色一些了。虽然这个看法有点主观，但超过`600px`肯定是太宽了。
+
+<figure>{% Img src="image/admin/sh1P84rvjvviENlVFED4.png", alt="元素之间间距过大的天气应用程序截图", width="400", height="240" %} <figcaption>该应用程序处于我们认为应该调整设计的地步。</figcaption></figure>
+
+如需在`600px`处插入一个断点，请在 CSS 的末尾为组件创建两个媒体查询，一个在浏览器宽度处于`600px`及以下时使用，另一个在浏览器宽度大于`600px`时使用。
+
+```css
+@media (max-width: 600px) {
+
+}
+
+@media (min-width: 601px) {
+
+}
+```
+
+最后，请重构 CSS。在`max-width`为`600px`的媒体查询中添加仅适用于小屏幕的 CSS。在`min-width`为`601px`的媒体查询中添加适用于更大屏幕的 CSS。
+
+#### 必要时选择次断点
+
+除了在布局发生显著变化时选择主断点之外，针对微小的变化进行调整也很有帮助。例如，在主断点之间，调整元素的边距或填充，或者增大字体来使元素在布局中更为和谐可能会有所帮助。
+
+我们先从优化小屏幕布局开始。在本示例中，我们在可视区域宽度大于`360px`时增大字体。其次，当有足够空间时，我们可以将高温和低温分开，使两者在同一行上，而不是重叠在一起。我们还可以把天气图标调大一点。
+
+```css
+@media (min-width: 360px) {
+  body {
+    font-size: 1.0em;
+  }
+}
+
+@media (min-width: 500px) {
+  .seven-day-fc .temp-low,
+  .seven-day-fc .temp-high {
+    display: inline-block;
+    width: 45%;
+  }
+
+  .seven-day-fc .seven-day-temp {
+    margin-left: 5%;
+  }
+
+  .seven-day-fc .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+```
+
+同样，对于大屏幕来说，最好将天气预报面板限制为最大宽度，这样面板就不会占据整个屏幕宽度了。
+
+```css
+@media (min-width: 700px) {
+  .weather-forecast {
+    width: 700px;
+  }
+}
+```
+
+{% Glitch { id: 'responsive-forecast', path: 'style.css' } %}
+
+### 优化文本，方便阅读
+
+经典的可读性理论表明，一个理想的列应该包含每行 70 到 80 个字符（英语中的大约 8 到 10 个单词）。因此，每当一个文本块的宽度增加至超过 10 个单词时，请考虑添加一个断点。
+
+<figure>{% Img src="image/admin/C4IGJw9hbPXKnTSovEXS.jpg", alt="移动设备上一页文本的截图", width="400", height="488" %} <figcaption>在移动设备上阅读的文本。</figcaption></figure>
+
+<figure>{% Img src="image/admin/rmsa1EB5FpvWV0vFIpTF.jpg", alt="桌面端浏览器中一页文本的截图", width="800", height="377" %} <figcaption>在桌面端浏览器中阅读的文本，已添加断点限制每行的长度。</figcaption></figure>
+
+我们来更深入地看一下上方的博客文章示例。在较小的屏幕上，`1em`的 Roboto 字体可以完美地保持每行 10 个单词，但在较大的屏幕上就需要一个断点。在本示例中，如果浏览器宽度大于`575px`，则理想的内容宽度为`550px`。
+
+```css
+@media (min-width: 575px) {
+  article {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+```
+
+{% Glitch { id: 'rwd-reading', path: 'index.html' } %}
+
+### 避免简单地隐藏内容
+
+根据屏幕尺寸选择要隐藏或显示的内容时要谨慎。请不要仅仅因为您无法将内容合理安排在屏幕上就简单地将其隐藏。屏幕尺寸并不能明确指示用户的需求。例如，对于容易在春季过敏的人群来说，他们需要相关信息来确认是否可以外出，而从天气预报中移除花粉计数就可能会是一个严重的问题。
+
+## 在 Chrome DevTools 中查看媒体查询断点 {: #devtools }
+
+设置好媒体查询断点后，您会希望查看您的网站在有了断点后的呈现效果。虽然您可以调整浏览器窗口大小来触发这些断点，但 Chrome DevTools 有一项内置功能，可以让您轻松查看页面在不同断点下的呈现效果。
+
+<figure>{% Img src="image/admin/DhaeCbVo5AmzZ0CyLtVp.png", alt="打开我们的天气应用程序并选择宽度为 822 像素时的 DevTools 截图。", width="800", height="522" %} <figcaption>DevTools 显示的天气应用程序在较宽的可视区域下的呈现效果。</figcaption></figure>
+
+<figure>{% Img src="image/admin/35IEQnhGox93PHvbeglM.png", alt="打开我们的天气应用程序并选择宽度为 436 像素时的 DevTools 截图。", width="800", height="521" %} <figcaption>DevTools 显示的天气应用程序在较窄的可视区域下的呈现效果。</figcaption></figure>
+
+如需在不同的断点下查看您的页面：
+
+请[打开 DevTools](https://developer.chrome.com/docs/devtools/open/)，然后开启[设备模式](https://developer.chrome.com/docs/devtools/device-mode/#toggle)。默认情况下开启的是[响应模式](https://developer.chrome.com/docs/devtools/device-mode/#responsive)。
+
+要想查看您的媒体查询，请打开设备模式菜单并选择[显示媒体查询](https://developer.chrome.com/docs/devtools/device-mode/#queries)，您的断点将以彩色条的形式显示在页面上方。
+
+单击其中一个彩色条来查看对应的媒体查询处于活跃状态时的页面效果。右键单击一个彩色条可以跳转至媒体查询定义。
diff --git a/src/site/content/zh/blog/samesite-cookie-recipes/index.md b/src/site/content/zh/blog/samesite-cookie-recipes/index.md
new file mode 100644
index 00000000000..06ede70799a
--- /dev/null
+++ b/src/site/content/zh/blog/samesite-cookie-recipes/index.md
@@ -0,0 +1,156 @@
+---
+title: SameSite cookie 配方
+subhead: 更新网站的 cookie，为 SameSite 属性的行为即将到来的变化做准备
+authors:
+  - rowan_m
+date: 2019-10-30
+updated: 2020-05-28
+hero: image/kheDArv5csY6rvQUJDbWRscckLr1/5f56hyvtMT6Dymo839tc.png
+description: 随着新的 SameSite=None 属性值的引入，网站现在可以明确地将其 cookie 标记为跨网站使用。浏览器正倾向于使不带 SameSite 属性的 cookie 默认成为第一方，这是比当前的开放行为更安全、更保护隐私的选项。了解如何标记 cookie 以确保第一方和第三方 cookie 在此更改生效后继续工作。
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+  - test-post
+feedback:
+  - api
+---
+
+{% Aside %} 本文是有关 `SameSite` cookie 属性变化的系列文章的一部分：
+
+- [SameSite cookie 介绍](/samesite-cookies-explained/)
+- [SameSite cookie 配方](/samesite-cookie-recipes/)
+- [Schemeful Same-Site](/schemeful-samesite) {% endAside %}
+
+[Chrome](https://www.chromium.org/updates/same-site) 、[Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) 、[Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) 和其他浏览器将根据 IETF 提案 [Incrementally Better Cookies](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) 更改其默认行为，因此：
+
+- 不带 `SameSite` 属性的 cookie 将被视为 `SameSite=Lax`，这意味着默认行为将 cookie 限制到**仅**第一方上下文。
+- 跨网站使用的 Cookie **必须**指定 `SameSite=None; Secure` 才能包含在第三方上下文中。
+
+此功能是 [Chrome 84 稳定版以后](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html)的默认行为。如果您还没有这样做，您应该更新第三方 cookie 的属性，以便它们在将来不会被阻止。
+
+## 跨浏览器支持
+
+请参阅 MDN 的 [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) 页面的[浏览器兼容性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie)部分。
+
+## 跨站点或第三方 cookie 的用例
+
+有许多常见的用例和模式需要在第三方上下文中发送 cookie。如果您提供或依赖这些用例之一，请确保您或提供商将更新 cookie，以确保服务继续正常运行。
+
+### `<iframe>` 中的内容
+
+`<iframe>` 中显示的其他网站的内容在第三方上下文中。这里的标准用例是：
+
+- 共享自其他网站的嵌入内容，例如视频、地图、代码示例和社交媒体帖子。
+- 来自外部服务的小工具，例如付款、日历、预订和预约功能。
+- 会创建不太明显的 `<iframes>` 的社交媒体按钮或反欺诈服务等小工具。
+
+这里，Cookie 可用于保持会话状态、存储常规偏好、启用统计或为拥有现有帐户的用户提供个性化内容等。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fTUQP4SffHHcexSipvlz.png", alt="嵌入内容的 URL 与页面 URL 不匹配的浏览器窗口图示。", width="468", height="383", style="max-width: 35vw;" %} <figcaption> 如果嵌入的内容与顶级浏览上下文来自不同的网站，则是第三方内容。</figcaption></figure>
+
+此外，由于 Web 本身是可组合的，`<iframes>` 还用于嵌入也在顶级或第一方上下文中显示的内容。当网站显示在框架内时，该网站使用的任何 cookie 都将被视为第三方 cookie。如果您要创建的网站需要可以轻易嵌入其他网站，同时还要依赖 cookie 才能运行，那么您还需要确保这些 cookie 被标记为跨网站使用，或者可以在没有它们的情况下优雅地回退。
+
+### 跨网站的“不安全”请求
+
+虽然“不安全”可能听起来有点令人不安，但这里指的是可能要更改状态的请求。在 Web 上主要是 POST 请求。标记为 `SameSite=Lax` 的 cookie 将在安全的顶级导航中发送，例如单击一个链接转到其他网站。但是，通过 POST 向其他网站提交 `<form>` 等行为不会包括 cookie。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vddDg7f9Gp93OgaqWwHu.png", alt="请求从一个页面移动到另一个页面的图示。", width="719", height="382", style="max-width: 35vw;" %} <figcaption> 如果传入请求使用“安全”方法，则将发送 cookie。</figcaption></figure>
+
+此模式用于可能将用户重定向到远程服务执行某些操作再返回的网站，例如重定向到第三方身份提供商。在用户离开网站之前，会设置一个包含一次性令牌的 cookie，期望可以在返回请求中检查此令牌，以缓解[跨站点请求伪造 (CSRF)](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) 攻击。如果该返回请求通过 POST 传入，则有必要将 cookie 标记为 `SameSite=None; Secure`。
+
+### 远程资源
+
+页面上的任何远程资源都可能依赖于随请求发送的 cookie、来自 `<img>` 标签、`<script>` 标签等。常见用例包括追踪像素和个性化内容。
+
+这也适用于由 `fetch` 或 `XMLHttpRequest` 从 JavaScript 发起的请求。如果调用 `fetch()` 时带有 [`credentials: 'include'` 选项](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included)，那么这是表明这些请求很可能需要 cookie 的好迹象。对于 `XMLHttpRequest`，您应该查找 [`withCredentials` 属性](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials)设置为 `true` 的实例。这是表明这些请求很可能需要 cookie 的好迹象。这些 cookie 需要适当标记以包含在跨网站请求中。
+
+### WebView 中的内容
+
+平台特定的应用程序中的 WebView 是由浏览器驱动的，您需要测试相同的限制或问题是否适用。在 Android 中，如果 WebView 由 Chrome 驱动，Chrome 84 **不会**立即应用新的默认值。不过，目标是在将来应用它们，所以您仍然应该为此进行测试和准备。此外，Android 允许其平台特定的应用程序直接通过 [CookieManager API](https://developer.android.com/reference/android/webkit/CookieManager) 设置 cookie。与通过标头或 JavaScript 设置的 cookie 一样，如果要跨网站使用 cookie，请考虑包含 `SameSite=None; Secure`。
+
+## 目前如何实施 `SameSite`
+
+对于只有第一方上下文中需要的 cookie，理想情况下，应该根据需要将它们标记为 `SameSite=Lax` 或 `SameSite=Strict`。您也可以选择什么都不做，只允许浏览器强制使用默认值，但这会带来浏览器之间行为不一致的风险，并且每个 cookie 都可能出现控制台警告。
+
+```text
+Set-Cookie: first_party_var=value; SameSite=Lax
+```
+
+对于第三方上下文中需要的 cookie，您需要确保将它们标记为 `SameSite=None; Secure`。请注意，您需要同时标记这两个属性。如果只指定 `None` 而没有指定 `Secure`，cookie 将被拒绝。不过，浏览器实现中存在一些相互不兼容的差异，因此您可能需要使用下面的[处理不兼容的客户端](#handling-incompatible-clients)中描述的一些缓解策略。
+
+```text
+Set-Cookie: third_party_var=value; SameSite=None; Secure
+```
+
+### 处理不兼容的客户端
+
+由于这些包含 `None` 和更新默认行为的更改仍然相对较新，因此各浏览器对如何处理这些更改仍存在不一致。您可以参考 [chromium.org 上的更新页面](https://www.chromium.org/updates/same-site/incompatible-clients)了解目前已知的问题，但还不能说这是否详尽无遗。虽然这并不理想，但您可以在此过渡阶段采用一些变通方法。一般规则是将不兼容的客户端视为特殊情况。不要为实施较新规则的浏览器创建异常。
+
+第一个选项是同时设置新旧样式的 cookie：
+
+```text
+Set-cookie: 3pcookie=value; SameSite=None; Secure
+Set-cookie: 3pcookie-legacy=value; Secure
+```
+
+实施较新行为的浏览器将使用 `SameSite` 值设置 cookie，而其他浏览器可能会忽略或错误地设置它。但是，这些相同的浏览器将设置 `3pcookie-legacy` cookie。在处理包含的 cookie 时，网站应首先检查是否存在新样式的 cookie，如果未找到，则回退到旧 cookie。
+
+下面的示例展示了如何在 Node.js 中实现此操作，其中利用了 [Express 框架](https://expressjs.com)及其 [cookie-parser](https://www.npmjs.com/package/cookie-parser) 中间件。
+
+```javascript
+const express = require('express');
+const cp = require('cookie-parser');
+const app = express();
+app.use(cp());
+
+app.get('/set', (req, res) => {
+  // Set the new style cookie
+  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
+  // And set the same value in the legacy cookie
+  res.cookie('3pcookie-legacy', 'value', { secure: true });
+  res.end();
+});
+
+app.get('/', (req, res) => {
+  let cookieVal = null;
+
+  if (req.cookies['3pcookie']) {
+    // check the new style cookie first
+    cookieVal = req.cookies['3pcookie'];
+  } else if (req.cookies['3pcookie-legacy']) {
+    // otherwise fall back to the legacy cookie
+    cookieVal = req.cookies['3pcookie-legacy'];
+  }
+
+  res.end();
+});
+
+app.listen(process.env.PORT);
+```
+
+缺点是这涉及设置冗余 cookie 以覆盖所有浏览器，并且需要在设置和读取 cookie 时都进行更改。但是，这种方法应该可覆盖所有浏览器，无论它们的行为如何，并且可确保第三方 cookie 继续像以前一样工作。
+
+或者，在发送 `Set-Cookie` 标头时，您可以选择通过用户代理字符串检测客户端。请参见[不兼容客户端列表](https://www.chromium.org/updates/same-site/incompatible-clients)，然后使用适合您平台的库，例如 Node.js 上的 [ua-parser-js](https://www.npmjs.com/package/ua-parser-js) 库。建议找到一个可处理用户代理检测的库，因为您很可能不想自己编写这些正则表达式。
+
+这种方法的好处是只需要在设置 cookie 时进行一次更改。不过，这里需要警告的是，用户代理嗅探本质上是脆弱的，可能无法捕获所有受影响的用户。
+
+{% Aside %}
+
+无论您选择哪个选项，都建议确保有方法来记录通过传统路由的流量级别。还要确保一旦这些级别降至网站的可接受阈值以下，您会收到提醒或警告来删除该变通方法。
+
+{% endAside %}
+
+## 语言、库和框架对 `SameSite=None` 的支持
+
+大多数语言和库都支持 cookie 的 `SameSite` 属性，但是 `SameSite=None` 的增加仍然相对较新，这意味着您现在可能需要对一些标准行为做出变通。<a href="https://github.com/GoogleChromeLabs/samesite-examples" data-md-type="link">GitHub 上的 `SameSite` 示例仓库</a>中记录了这些内容。
+
+## 获取帮助
+
+Cookie 无处不在，但很少有网站对它们的设置和使用位置进行完全审计，尤其是将跨网站用例混合在一起时。当您遇到问题时，很可能是第一次有人遇到它 - 所以不要犹豫，立即：
+
+- 在 [GitHub 上的`SameSite` 示例仓库](https://github.com/GoogleChromeLabs/samesite-examples)上提出问题。
+- 在 [StackOverflow 上的“samesite”标签](https://stackoverflow.com/questions/tagged/samesite)下提出问题。
+- 对于 Chromium 行为的问题，通过 [[SameSite cookie] 问题模板](https://bit.ly/2lJMd5c)提出错误。
+- 关注 [`SameSite` 更新页面](https://www.chromium.org/updates/same-site)上 Chrome 的进展。
diff --git a/src/site/content/zh/blog/samesite-cookies-explained/index.md b/src/site/content/zh/blog/samesite-cookies-explained/index.md
new file mode 100644
index 00000000000..b4dad177402
--- /dev/null
+++ b/src/site/content/zh/blog/samesite-cookies-explained/index.md
@@ -0,0 +1,246 @@
+---
+title: SameSite cookie 的说明
+subhead: 通过学习如何显式标记您的跨站 cookie 来保护您的网站。
+authors:
+  - rowan_m
+date: 2019-05-07
+updated: 2020-05-28
+hero: image/admin/UTOC41rgCccAqVNbJlyK.jpg
+description: 了解如何使用 SameSite 属性标记您针对第一方和第三方使用的 cookie。您可以通过使用 SameSite 的 Lax 和 Strict 值来保护网站，提高对 CSRF 攻击的防御能力。指定新的 None 属性使您能够显式标记您针对跨站使用的 cookie。
+tags:
+  - blog
+  - security
+  - cookies
+  - chrome-80
+feedback:
+  - api
+---
+
+{% Aside %} 本文是`SameSite` cookie 属性更改的相关系列文章中的一篇：
+
+- [SameSite cookie 的说明](/samesite-cookies-explained/)
+- [SameSite cookie 配方](/samesite-cookie-recipes/)
+- [严格意义上的同站](/schemeful-samesite){% endAside %}
+
+Cookie 是一种可用于向网站添加持久状态的方法。多年来，虽然 cookie 的功能得到了不断的进步和发展，但却给平台留下了一些遗留问题。为了解决这些问题，浏览器（包括 Chrome、Firefox 和 Edge）正在改变行为，从而强制执行更多保护隐私的默认设置。
+
+每个 cookie 都是一对`key=value`，以及许多控制何时何地使用该 cookie 的属性。您可能已经使用这些属性设置过诸如过期日期或指示 cookie 应该仅通过 HTTPS 发送之类的内容。服务器通过在响应中发送命名合适的`Set-Cookie`标头来设置 cookie。您可以对 [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1) 进行深入研究来获取全部详情，但我会先在这里做一个快速回顾。
+
+假设您有一个博客，您想在其中向用户显示"最新消息"的宣传。用户可以选择不看这则宣传，然后在一段时间内，他们就不会再次看到这则宣传。您可以将用户的首选项存储在 cookie 中，并设置为在一个月（2,600,000 秒）后过期，并且仅通过 HTTPS 发送。该标头如下所示：
+
+```text
+Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jJ1fqcsAk9Ig3hManFBO.png", alt="单次响应中从服务器发送到浏览器的三个 cookie", width="800", height="276", style="max-width: 35vw" %}<figcaption>服务器使用<code>Set-Cookie</code>标头设置 cookie。</figcaption></figure>
+
+当您的读者查看的页面满足这些要求，即他们处于安全连接上且 cookie 还不到一个月，那么他们的浏览器将在其请求中发送此标头：
+
+```text
+Cookie: promo_shown=1
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Rq21WQpOZFvfgS9bbjmc.png", alt="单次请求中从浏览器向服务器发送的三个 cookie", width="800", height="165", style="max-width: 35vw" %}<figcaption>您的浏览器会在<code>Cookie</code>标头中发回 cookie。</figcaption></figure>
+
+您还可以使用`document.cookie`在 JavaScript 中添加和读取该网站可用的 cookie。对`document.cookie`进行赋值将创建或覆盖一个带有该键的 cookie。例如，您可以在浏览器的 JavaScript 控制台中尝试以下操作：
+
+```text
+→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
+← "promo_shown=1; Max-Age=2600000; Secure"
+```
+
+读取`document.cookie`将输出当前上下文中可访问的所有 cookie，每个 cookie 用分号进行分隔：
+
+```text
+→ document.cookie;
+← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
+```
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mbV00Gy5VAPTUls0i7cM.png", alt="JavaScript 在浏览器中访问 cookie", width="600", height="382", style="max-width: 35vw" %}<figcaption> JavaScript 可以使用<code>document.cookie</code>访问 cookie。</figcaption></figure>
+
+如果您在所选择的一系列热门网站上尝试此操作，您就会注意到大多数网站设置的 cookie 远不止三个。在大多数情况下，这些 cookie 会在每次向该域名发出请求时被发送，这会产生多种影响。对您的用户来说，上传带宽通常比下载更受限，因此，所有出站请求的开销都会使您的首字节时间发生延迟。请在 cookie 数量和大小的设置上做到保守。使用`Max-Age`属性来帮助确保 cookie 的停留时间不会超过所需时间。
+
+## 什么是第一方和第三方 cookie？
+
+如果再回到您之前查看的那几个网站，您可能会注意到不仅仅是您当前访问的域名有 cookie，许多域名都有 cookie。与当前网站的域名（即浏览器地址栏中显示的内容）相匹配的 cookie 被称为**第一方** cookie。同样，来自当前网站以外域名的 cookie 被称为**第三方** cookie。这不是一个绝对的标签，而是相对于用户上下文来决定的。同一个 cookie 可以是第一方的，也可以是第三方的，具体取决于用户当时所在的网站。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zjXpDz2jAdXMT83Nm3IT.png", alt="三个 cookies 在同一页面的不同请求下被发送到浏览器", width="800", height="346", style="max-width: 35vw" %}<figcaption> Cookie 可能来自同一个页面上的多个不同域名。</figcaption></figure>
+
+继续上面的例子，假设您的一篇博文中有一张非常独特的猫的照片，而这张照片被托管在`/blog/img/amazing-cat.png`。因为照片十分令人惊叹，其他人直接在他们的网站上使用了该照片。如果访问者访问过您的博客并拥有`promo_shown` cookie，那么当他们在其他人的网站上浏览`amazing-cat.png`时，就会在图像请求中**发送**该 cookie。这对任何一方都不是特别有用，因为`promo_shown`在其他人的网站上不用于任何内容，只是增加了请求的开销。
+
+如果这样的效果并不是您的意图，那您为什么要这样做呢？正是这种机制允许网站在被用于第三方上下文时能够保持状态。例如，如果您在网站上嵌入了一个 YouTube 视频，那么访问者将在播放器中看到"稍后观看"选项。如果您的访问者已经登录了 YouTube，那么该会话将通过第三方 cookie 在嵌入式播放器中提供，也就意味着"稍后观看"按钮只会一次性保存视频，而不是提示他们进行登录或必须引导他们离开您的页面并回到 YouTube。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/u9chHBLm3i27yFRwHx5W.png", alt="在三个不同上下文中发送的相同 cookie", width="800", height="433", style="max-width: 35vw" %}<figcaption>访问不同页面时会发送第三方上下文中的 cookie。</figcaption></figure>
+
+网络的其中一项文化属性就是它在默认情况下往往是开放的。这也是如此多的人得以在网络上创建自己的内容和应用程序的一部分原因。然而，这也带来了许多安全和隐私问题。跨站请求伪造 (CSRF) 攻击依赖于这样一个事实，即 cookie 会被附加到一个给定域名的任何请求（无论是谁发起请求）。例如，如果您访问`evil.example`，那么它就可以触发对`your-blog.example`的请求，并且您的浏览器会欣然附加相关的 cookie。如果您的博客对验证这些请求的方式没有多加留心，那么`evil.example`可能会触发删除帖子或添加自己的内容等操作。
+
+用户也越来越了解 cookie 在跟踪他们跨多个站点的活动方面的用途。但直到现在还没有一种方法可以明确地说明您使用 cookie 的意图。您应该只在第一方上下文中发送`promo_shown` cookie，而将应嵌入其他网站的小组件的会话 cookie 用于在第三方上下文中提供登录状态。
+
+## 用`SameSite`属性显式说明 cookie 的使用
+
+`SameSite` 属性（在 [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00) 中进行了定义）的引入使您能够声明您的 cookie 是否应限制为第一方或同站上下文。准确理解此处"站点"的含义将会非常有帮助。这里的站点是域名后缀和域名后缀之前部分的组合。例如， `www.web.dev`域名是`web.dev`站点的一部分。
+
+{% Aside 'key-term' %}
+
+如果用户在`www.web.dev`上向`static.web.dev`请求图像，那么这是一个**同站**请求。
+
+{% endAside %}
+
+[公共后缀列表](https://publicsuffix.org/)对这一点进行了定义，因此站点不仅仅是`.com`等顶级域名，还包括`github.io`等服务。这就使得`your-project.github.io`和`my-project.github.io`算作独立的站点。
+
+{% Aside 'key-term' %}
+
+如果用户在`your-project.github.io`上向`my-project.github.io`请求图像，那么这是一个**跨站**请求。
+
+{% endAside %}
+
+在 cookie 上引入 `SameSite` 属性为控制此行为提供了三种不同的方式。您可以选择不指定属性，也可以使用`Strict`或`Lax`来将 cookie 的使用限制在同站请求中。
+
+如果您将`SameSite`设置为`Strict` ，您的 cookie 将仅在第一方上下文中被发送。就用户而言，只有当 cookie 的站点与浏览器 URL 栏中当前显示的站点相匹配时，才会发送 cookie。因此，如果`promo_shown` cookie 设置如下：
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Strict
+```
+
+当用户访问您的网站时，cookie 将按预期与请求一起被发送。但是，当通过链接进入您的网站时（比如通过另一个网站或通过朋友的电子邮件），在最初的请求中不会发送 cookie。这在您有与始终处于初始导航之后的功能（例如更改密码或进行购买）相关的 cookie 时是非常好的做法，但对`promo_shown`限制太大。如果您的读者通过链接进入网站，那么他们会希望通过发送 cookie 来实现他们的首选项。
+
+这时候就需要通过允许这些顶级导航发送 cookie 来使用`SameSite=Lax`。让我们回到上文提到的一只猫的文章示例，其中，另一个站点正在引用您的内容。他们直接使用了您的猫的照片并提供了您原始文章的链接。
+
+```html
+<p>Look at this amazing cat!</p>
+<img src="https://blog.example/blog/img/amazing-cat.png" />
+<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>
+```
+
+并且 cookie 已设置为：
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+当读者在另一个人的博客上时，cookie 在浏览器请求`amazing-cat.png`时**不会被发送**。但是，当读者通过链接访问您博客上的`cat.html`时，相应请求**将包含** cookie。这使得`Lax`非常适合用于影响网站显示的 cookie，而`Strict`对与用户正在执行的操作相关的 cookie 非常有用。
+
+{% Aside 'caution' %}
+
+`Strict`和`Lax`都不是针对您的网站安全的完整解决方案。Cookie 是作为用户请求的一部分发送的，而您应该像对待任何其他用户输入一样对待 cookie。这就意味着要对这些输入进行清理和验证。切勿使用 cookie 来存储您认为是服务端机密的数据。
+
+{% endAside %}
+
+最后，您还可以选择不指定值，而该做法在以前表示隐含地声明您希望在所有上下文中发送 cookie。在 [RFC6265bis](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03) 的最新一稿中，我们通过引入`SameSite=None`这个新的值来明确了这一点。这意味着您可以使用`None`来显式表示您有意希望在第三方上下文中发送 cookie。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1MhNdg9exp0rKnHpwCWT.png", alt="三个根据相应上下文标记为 None、Lax 或 Strict 的 cookie", width="800", height="456", style="max-width: 35vw" %}<figcaption>将 cookie 的上下文显式标记为<code>None</code>、<code>Lax</code>或<code>Strict</code>。</figcaption></figure>
+
+{% Aside %}
+
+如果您提供其他站点使用的服务，例如小组件、嵌入内容、附属程序、广告或跨多个站点登录，那么您应该使用`None`来确保您的意图明确。
+
+{% endAside %}
+
+## 在没有 SameSite 的情况下更改默认行为
+
+虽然`SameSite`属性得到广泛支持，但遗憾的是该属性并未被开发者广泛采用。随处发送 cookie 的默认开放性意味着虽然所有用例都可以正常工作，但却会使用户容易受到 CSRF 和无意信息泄露的影响。为了鼓励开发者声明他们的意图并为用户提供更安全的体验，IETF 的[渐进式改善 cookie](https://tools.ietf.org/html/draft-west-cookie-incrementalism-00) 提案列出了两大关键变化：
+
+- 没有`SameSite`属性的 cookie 将被视为`SameSite=Lax`。
+- 具有`SameSite=None`的 cookie 还必须指定`Secure` ，即这些 cookie 需要一个安全的上下文环境。
+
+Chrome 在 84 版本中实现了该默认行为。[Firefox](https://groups.google.com/d/msg/mozilla.dev.platform/nx2uP0CzA9k/BNVPWDHsAQAJ) 在 Firefox 69 版本中为这些变化提供了测试，并会在将来实现默认行为。如需在 Firefox 中测试这些行为，请打开[`about:config`](http://kb.mozillazine.org/About:config)并设置`network.cookie.sameSite.laxByDefault`。[Edge](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/8lMmI5DwEAAJ) 也计划更改其默认行为。
+
+{% Aside %}
+
+本文将在其他浏览器宣布支持后同步更新。
+
+{% endAside %}
+
+### 默认为`SameSite=Lax`
+
+{% Compare 'worse', 'No attribute set' %}
+
+```text
+Set-Cookie: promo_shown=1
+```
+
+{% CompareCaption %}
+
+如果您发送的 cookie 没有指定`SameSite`属性……
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Default behavior applied' %}
+
+```text
+Set-Cookie: promo_shown=1; SameSite=Lax
+```
+
+{% CompareCaption %}
+
+浏览器会将该 cookie 视为已指定`SameSite=Lax`。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+虽然这是为了应用更安全的默认值，但理想情况下您应该设置显式的`SameSite`属性，而不是依赖浏览器为您应用该属性。这会使您的 cookie 意图明确，并提高在不同浏览器之间获得一致体验的机率。
+
+{% Aside 'caution' %}
+
+Chrome 应用的默认行为比显式的`SameSite=Lax`略宽松一些，因为 Chrome 允许在顶级 POST 请求上发送某些 cookie。您可以在 [blink-dev 公告](https://groups.google.com/a/chromium.org/d/msg/blink-dev/AknSSyQTGYs/YKBxPCScCwAJ)中看到确切的细节。这只是一个临时缓解措施，因此您仍应修复您的跨站 cookie，并使用`SameSite=None; Secure`。
+
+{% endAside %}
+
+### `SameSite=None`必须是安全的
+
+{% Compare 'worse', 'Rejected' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None
+```
+
+{% CompareCaption %}
+
+设置一个没有`Secure`的 cookie **将被拒绝**。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+{% Compare 'better', 'Accepted' %}
+
+```text
+Set-Cookie: widget_session=abc123; SameSite=None; Secure
+```
+
+{% CompareCaption %}
+
+您必须确保将`SameSite=None`与`Secure`属性配对。
+
+{% endCompareCaption %}
+
+{% endCompare %}
+
+从 Chrome 76 开始，您可以通过启用[`about:config`](http://kb.mozillazine.org/About:config) `about://flags/#cookies-without-same-site-must-be-secure`来测试此行为。您还可以在 Firefox 69 的[`about:config`](http://kb.mozillazine.org/About:config)中通过设置`network.cookie.sameSite.noneRequiresSecure`来测试此行为。
+
+我们建议您在设置新 cookie 时应用此做法，并且即使在现有 cookie 尚未接近过期日期的情况下主动对其进行刷新。
+
+{% Aside 'note' %}
+
+如果您依赖于在您的网站上提供第三方内容的任何服务，您还应该与供应商确认他们正在更新他们的服务。您可能需要更新您的依赖项或代码段，从而确保您的站点能够采用新行为。
+
+{% endAside %}
+
+这两个更改都能够向后兼容已正确实现`SameSite`属性的先前版本，或根本不提供支持的浏览器。通过将这些更改应用于您的 cookie，您能够明确这些 cookie 的预期用途，而非依赖于浏览器的默认行为。同样，任何尚不能识别`SameSite=None`的客户端都应该将其忽略并按照未设置该属性的情况继续执行。
+
+{% Aside 'warning' %}
+
+许多旧版本的浏览器（包括 Chrome、Safari 和 UC 浏览器）与新的`None`属性不兼容，且可能会忽略或限制 cookie。该行为在当前版本中已得到修复，但您应该对流量进行检查，从而确定受影响的用户比例。您可以在 Chromium 网站上查看[已知不兼容客户端列表](https://www.chromium.org/updates/same-site/incompatible-clients)。
+
+{% endAside %}
+
+## `SameSite` cookie 配方
+
+如需了解如何更新 cookie 来妥善处理对`SameSite=None`的这些更改，以及如何处理浏览器行为差异的更多详情，请访问后续文章 [SameSite cookie 配方](/samesite-cookie-recipes)。
+
+_感谢 Lily Chen、Malte Ubl、Mike West、Rob Dodson、Tom Steiner 和 Vivek Sekhar 的贡献和反馈_
+
+_Cookie 首图作者：[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 上的 [Pille-Riin Priske](https://unsplash.com/photos/UiP3uF5JRWM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
diff --git a/src/site/content/zh/blog/stale-while-revalidate/index.md b/src/site/content/zh/blog/stale-while-revalidate/index.md
new file mode 100644
index 00000000000..2e2bcee726f
--- /dev/null
+++ b/src/site/content/zh/blog/stale-while-revalidate/index.md
@@ -0,0 +1,95 @@
+---
+title: 使用 stale-while-revalidate 保持新鲜度
+subhead: 另一个可帮助您在提供 Web 应用时平衡即时性和新鲜度的工具。
+authors:
+  - jeffposnick
+date: 2019-07-18
+description: stale-while-revalidate 帮助开发人员在即时性（立即加载缓存内容）和新鲜度之间取得平衡，确保将来使用对缓存内容的更新。
+hero: image/admin/skgQgcT3q8fdBGGNL3o1.jpg
+alt: 半漆墙的照片。
+tags:
+  - blog
+feedback:
+  - api
+---
+
+## 什么内容？
+
+[`stale-while-revalidate`](https://tools.ietf.org/html/rfc5861#section-3) 帮助开发人员在即时性（立即*加载缓存内容）*和新鲜度*之间取得平衡，确保将来使用缓存内容的更新*。如果您维护定期更新的第三方 Web 服务或库，或者您的第一方资产的生命周期往往较短，那么 `stale-while-revalidate` 可能是您现有缓存策略的有用补充。
+
+ [Chrome 75](https://chromestatus.com/feature/5050913014153216) 和 [Firefox 68](https://bugzilla.mozilla.org/show_bug.cgi?id=1536511) 中支持在响应标头 `Cache-Control`  中同时设置 `stale-while-revalidate` 和 `max-age`。
+
+不支持 `stale-while-revalidate` 的浏览器将默默地忽略该配置值，并使用 [`max-age`](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#max-age) ，我将在稍后解释……
+
+## 这是什么意思？
+
+让我们将 `stale-while-revalidate` 分解为两部分：缓存的响应可能是陈旧的，以及重新验证的过程。
+
+首先，浏览器如何知道缓存的响应是否“陈旧”？ 包含 `stale-while-revalidate` 的 [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) 响应头也应该包含 `max-age` ，并且通过 `max-age` 指定的秒数决定了陈旧性。任何比 `max-age` 更新的缓存响应都被认为是新鲜的，而较旧的缓存响应是陈旧的。
+
+如果本地缓存的响应仍然是新鲜的，则可以按原样使用它来满足浏览器的请求。从 `stale-while-revalidate` 的角度来看，在这种情况下没有什么可做的。
+
+但是如果缓存的响应是陈旧的，那么将执行另一个基于期限的检查：缓存响应的期限是否在 `stale-while-revalidate` 设置覆盖的时间窗口内？
+
+如果陈旧响应的期限在此窗口范围内，则它将用于满足浏览器的请求。同时，将以不延迟使用缓存响应的方式向网络发出“重新验证”请求。返回的响应可能包含与先前缓存的响应相同的信息，也可能不同。无论哪种方式，网络响应都存储在本地，替换以前缓存的内容，并重置将在任何未来 `max-age` 比较期间使用的“新鲜度”计时器。
+
+但是，如果陈旧的缓存响应足够旧，以至于它超出了 `stale-while-revalidate` 时间窗口，那么它将无法满足浏览器的请求。浏览器将从网络中检索响应，并将其用于完成初始请求并使用新响应填充本地缓存。
+
+## 现场示例
+
+下面是一个简单的 HTTP API 示例，用于返回当前时间——更具体地说，是过去一小时的当前分钟数。
+
+{% Glitch { id: 'swr-demo', path: 'server.js:20:15', height: 346 } %}
+
+在这种情况下，Web 服务器在其 HTTP 响应中使用 `Cache-Control` 标头
+
+```text
+Cache-Control: max-age=1, stale-while-revalidate=59
+```
+
+此设置意味着，如果在接下来的 1 秒内重复请求时间，则先前缓存的值仍将是新鲜的，并按原样使用，无需任何重新验证。
+
+如果请求在 1 到 60 秒后重复，则缓存值将失效，但将用于完成 API 请求。同时，“在后台”将发出重新验证请求，以使用新值填充缓存以备将来使用。
+
+如果请求在超过 60 秒后重复，则根本不会使用过时的响应，并且满足浏览器的请求和缓存重新验证都将取决于从网络获取响应。
+
+以下是这三种不同状态的细分，以及它们适用于我们示例的时间窗口：
+
+{% Img src="image/admin/C8lg2FSeqhTKR6WmYky3.svg", alt="说明上一节信息的图表。", width="719", height="370" %}
+
+## 有哪些常见的用例？
+
+虽然上面的“一小时后分钟数”API 服务示例是人为设计的，但它说明了预期的用例——提供需要刷新的信息的服务，但在某种程度上陈旧是可以接受的。
+
+非人为的示例比如当前天气状况的 API，或者过去一小时内编写的头条新闻。
+
+通常，任何以已知间隔更新、可能被多次请求且在该间隔内是静态的响应都是通过 `max-age` 进行短期缓存的良好候选者。除 `max-age` 之外，使用 `stale-while-revalidate` 增加了可以从缓存中使用更新鲜的内容满足未来请求的可能性，而不会阻塞网络响应。
+
+## 其如何与服务工作进程交互？
+
+如果您听说过 `stale-while-revalidate`，那可能是在[服务工作进程](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate)中使用的 [recipes](/service-workers-cache-storage/) 相关内容中。
+
+通过 `Cache-Control` 标头使用 stale-while-revalidate 与其在服务工作进程中的使用有一些相似之处，并且关于新鲜度权衡和最大生命周期的许多相同考虑都适用。但是，在决定是实现基于服务工作进程的方法还是仅依赖 `Cache-Control` 标头配置时，您应该考虑一些注意事项。
+
+### 在以下情况下使用服务工作进程方法……
+
+- 您已经在您的 Web 应用中使用了服务工作进程。
+- 您需要对缓存的内容进行细粒度控制，并希望实现诸如最近最少使用的过期策略之类的东西。Workbox 的[缓存过期](https://developer.chrome.com/docs/workbox/modules/workbox-expiration/)模块可以帮助解决这个问题。
+- 您希望在重新验证步骤期间当后台更改陈旧响应时收到通知。Workbox 的[广播缓存更新](https://developer.chrome.com/docs/workbox/modules/workbox-broadcast-update/)模块可以帮助解决这个问题。
+- 在所有现代浏览器中，您都需要这种 `stale-while-revalidate` 行为。
+
+### 在以下情况下使用缓存控制方法……
+
+- 您宁愿不处理为您的 Web 应用部署和维护服务工作进程的开销。
+- 您可以让浏览器的自动缓存管理防止本地缓存增长过大。
+- 您可以接受目前并非所有现代浏览器都支持的方法（截至 2019 年 7 月；未来支持可能会增加）。
+
+如果您正在使用服务工作进程，并且还通过 `Cache-Control` 标头为某些响应启用了 `stale-while-revalidate` ，则服务工作进程通常会在响应请求时进行“第一次尝试”。如果服务工作进程决定不响应，或者在生成响应的过程中使用 [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API) 发出网络请求，则通过 `Cache-Control` 标头配置的行为最终将生效。
+
+## 了解更多
+
+- Fetch API 规范中的 [`stale-while-revalidate` 响应](https://fetch.spec.whatwg.org/#concept-stale-while-revalidate-response)。
+- [RFC 5861](https://tools.ietf.org/html/rfc5861) ，涵盖最初的 `stale-while-revalidate` 规范。
+- [HTTP 缓存：您的第一道防线](/http-cache/)，来自本站点的“网络可靠性”指南。
+
+*首图作者：Samuel Zeller。*
diff --git a/src/site/content/zh/blog/storage-for-the-web/index.md b/src/site/content/zh/blog/storage-for-the-web/index.md
new file mode 100644
index 00000000000..198cf8723ad
--- /dev/null
+++ b/src/site/content/zh/blog/storage-for-the-web/index.md
@@ -0,0 +1,162 @@
+---
+title: Web 存储
+subhead: 浏览器中有许多不同的数据存储选项。哪一种最适合您的需求？
+authors:
+  - petelepage
+description: 浏览器中有许多不同的数据存储选项。哪一种最适合您的需求？
+date: 2020-04-27
+updated: 2021-02-11
+tags:
+  - blog
+  - progressive-web-apps
+  - storage
+  - memory
+hero: image/admin/c8u2hKEFoFfgTsmcKeuK.jpg
+alt: 一堆货运集装箱
+feedback:
+  - api
+---
+
+Internet 连接在旅途中可能不稳定或不存在，因此离线支持和可靠的性能是[渐进式 Web 应用程序](/progressive-web-apps/)的常见功能。即使在完美的无线环境中，审慎使用缓存和其他存储技术也可以显著改善用户体验。有多种方法可以缓存您的静态应用程序资源（HTML、JavaScript、CSS、图像等）和数据（用户数据、新闻文章等）。但是，哪种才是最好的解决方案？您能存储多少？如何防止数据被逐出？
+
+## 我应该使用什么？ {: #建议 }
+
+以下是对存储资源的一般建议：
+
+- 对于加载应用程序和基于文件的内容所需的网络资源，请使用[**缓存存储 API**](/cache-api-quick-guide/)（[service worker](https://developer.chrome.com/docs/workbox/service-worker-overview/) 的一部分）。
+- 对于其他数据，请使用 [**IndexedDB**](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)（带有 [Promise 包装器](https://www.npmjs.com/package/idb)）。
+
+每个现代浏览器都支持 IndexedDB 和缓存存储 API。它们都是异步的，不会阻塞主线程。可以从`window`对象、Web worker 和 service worker 访问它们，从而轻松地在代码中的任何位置使用。
+
+## 其他存储机制呢？ {: #其他 }
+
+浏览器中还提供其他几种存储机制，但它们的用途有限，并且可能会导致严重的性能问题。
+
+[SessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) 特定于选项卡，其作用范围涵盖选项卡的整个生存期。它对于存储 IndexedDB 键等少量会话特定信息可能很有用。此机制是同步的，会阻塞主线程，因此应谨慎使用。其大小限制约为 5MB，并且只能包含字符串。由于它特定于选项卡，因此无法从 web worker 或 service worker 进行访问。
+
+[LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) 是同步的，会阻塞主线程，因此应避免使用。其大小限制约为 5MB，并且只能包含字符串。无法从 web worker 或 service worker 访问 LocalStorage。
+
+[Cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies) 有其用途，但不应该用于存储。Cookie 随每个 HTTP 请求一起发送，因此只能存储少量数据，数据一多就会显著增加每个 Web 请求的大小。Cookie 是同步的，不能从 Web worker 进行访问。与 LocalStorage 和 SessionStorage 一样，cookie 仅限于字符串。
+
+[文件系统 API](https://developer.mozilla.org/docs/Web/API/File_and_Directory_Entries_API/Introduction) 和 FileWriter API  提供了在沙盒文件系统中读写文件的方法。虽然它是异步的，但不推荐使用，因为它[只能在基于 Chromium 的浏览器中使用](https://caniuse.com/#feat=filesystem)。
+
+[文件系统访问 API](/file-system-access/) 旨在使用户能够轻松读取和编辑本地文件系统上的文件。用户必须先授予权限，然后页面才能读取或写入本地文件，并且权限不会跨会话保持。
+
+**不**应使用 WebSQL，目前使用的应迁移至 IndexedDB。几乎所有主要浏览器都已[删除](https://caniuse.com/#feat=sql-storage)此支持。W3C 已在 2010 年[停止维护 Web SQL 规范](https://www.w3.org/TR/webdatabase/)，而且没有进一步更新的计划。
+
+**不**应使用应用程序缓存，目前使用的应迁移至  service worker 和缓存 API。此机制已被[弃用](https://developer.mozilla.org/docs/Web/API/Window/applicationCache)，未来将从浏览器中删除该支持。
+
+## 我可以存储多少？ {: #多少 }
+
+简而言之，**很多**，至少几百 MB，甚至可能是几百 GB 或更多。浏览器实施各不相同，但可用存储量通常取决于设备上可用的存储量。
+
+- Chrome 允许浏览器使用多达 80% 的总磁盘空间。一个来源最多可以使用总磁盘空间的 60%。您可以使用 [StorageManager API](#check) 来确定可用的最大配额。其他基于 Chromium 的浏览器可能允许浏览器使用更多的存储空间。有关 Chrome 实施的详细信息，请参阅 [PR #3896](https://github.com/GoogleChrome/web.dev/pull/3896)。
+- Internet Explorer 10 及更高版本最多可以存储 250MB，并且在使用量超过 10MB 时会提示用户。
+- Firefox 允许浏览器使用多达 50% 的可用磁盘空间。[eTLD+1](https://godoc.org/golang.org/x/net/publicsuffix) 组（例如 `example.com` 、`www.example.com` 和 `foo.bar.example.com`）[最多可以使用 2GB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits)。您可以使用 [StorageManager API](#check-available) 来确定还有多少空间可用。
+- Safari（桌面版和移动版）似乎允许 1GB 左右。当达到限制时，Safari 会提示用户，同时以 200MB 的增量增加限制。我找不到有关这方面的任何官方文档。
+    - 如果将 PWA 添加到移动 Safari 的主屏幕上，它似乎会创建一个新的存储容器，并且 PWA 和移动 Safari 之间不会共享任何内容。一旦已安装的 PWA 达到配额，似乎就没有任何方法可以请求额外的存储空间。
+
+过去，如果站点存储的数据超过某个阈值，浏览器会提示用户授权使用更多的数据。例如，如果来源的使用量超过 50MB，浏览器会提示用户允许它最多存储 100MB，然后以 50MB 的增量再次询问。
+
+如今，大多数现代浏览器都不会提示用户，而是允许站点最多用完为其分配的配额。Safari 好像是例外，它会在 750MB 时进行提示，请求允许存储最多 1.1GB。如果来源尝试使用的量超过为其分配的配额，则进一步尝试写入数据将失败。
+
+## 如何检查有多少可用存储？ {: #检查 }
+
+在[许多浏览器](https://caniuse.com/#feat=mdn-api_storagemanager)中，您可以使用 [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate) 来确定来源的可用存储量及其目前使用的存储量。它会报告 IndexedDB 和缓存 API 使用的总字节数，还可以计算近似的可用剩余存储空间。
+
+```js
+if (navigator.storage && navigator.storage.estimate) {
+  const quota = await navigator.storage.estimate();
+  // quota.usage -> 已用字节数。
+  // quota.quota -> 最大可用字节数。
+  const percentageUsed = (quota.usage / quota.quota) * 100;
+  console.log(`您已使用可用存储的 ${percentageUsed}%。`);
+  const remaining = quota.quota - quota.usage;
+  console.log(`您最多可以再写入 ${remaining} 个字节。`);
+}
+```
+
+StorageManager 尚未在所有浏览器中[实施](https://caniuse.com/#feat=mdn-api_storagemanager)，因此您必须在使用前对其进行功能检测。即使它可用，您仍必须捕获超出配额错误（见下文）。在某些情况下，可用配额可能会超过实际可用存储量。
+
+{% Aside %}其他基于 Chromium 的浏览器在报告可用配额时可能会考虑可用空间量。Chrome 则不会，它将始终报告实际磁盘大小的 60%。这有助于降低确定已存储的跨来源资源大小的能力。{% endAside %}
+
+### 检查
+
+在开发过程中，您可以使用浏览器的 DevTools 来检查不同的存储类型，并轻松清除所有存储的数据。
+
+Chrome 88 中增加了一项新功能，可让您在“存储窗格”中覆盖站点的存储配额。此功能使您能够模拟不同的设备，并在磁盘可用性较低的情况下测试应用程序的行为。依次转到**应用程序**和**存储**，启用**模拟自定义存储配额**复选框，然后输入有效数字来模拟存储配额。
+
+{% Img src="image/0g2WvpbGRGdVs0aAPc6ObG7gkud2/tYlbklNwF6DFKNV2cY0D.png", alt="DevTools 存储窗格。", width="800", height="567" %}
+
+在撰写本文时，我编写了一个[简单工具](https://storage-quota.glitch.me/)来尝试快速使用尽可能多的存储。这是试验不同存储机制的一种快速简便的方法，而且可以查看在用尽所有配额时会发生什么。
+
+## 如何处理超出配额？ {: #超出配额 }
+
+超出配额时，您该怎么办？最重要的是，您应始终捕获并处理写入错误，无论是 `QuotaExceededError` 还是其他错误。然后，根据您的应用程序设计，决定如何对其进行处理。例如删除长时间未访问的内容、根据大小删除数据，或为用户提供选择要删除的内容的方法。
+
+当超过可用配额时，IndexedDB 和缓存 API 都会抛出名为 `QuotaExceededError` 的 `DOMError`。
+
+### IndexedDB
+
+如果来源已超过其配额，则尝试写入 IndexedDB 将失败。系统会调用事务的 `onabort()` 处理程序，同时传递一个事件。该事件将在错误属性中包括 `DOMException`。检查错误 `name` 将返回 `QuotaExceededError`。
+
+```js
+const transaction = idb.transaction(['entries'], 'readwrite');
+transaction.onabort = function(event) {
+  const error = event.target.error; // DOMException
+  if (error.name == 'QuotaExceededError') {
+    // 此处为回退代码
+  }
+};
+```
+
+### 缓存 API
+
+如果来源已超过其配额，则尝试写入缓存 API 将被拒绝并返回 `QuotaExceededError` `DOMException`。
+
+```js
+try {
+  const cache = await caches.open('my-cache');
+  await cache.add(new Request('/sample1.jpg'));
+} catch (err) {
+  if (error.name === 'QuotaExceededError') {
+    // 此处为回退代码
+  }
+}
+```
+
+## 逐出如何运作？ {: #逐出 }
+
+Web 存储分为两个存储桶：“最大努力”和“永久”。最大努力意味着浏览器可以在不中断用户的情况下清除存储，但对于长期或关键数据的持久性较差。当存储较少时，不会自动清除永久存储。用户需要手动清除此存储（通过浏览器设置）。
+
+默认情况下，站点的数据（包括 IndexedDB、缓存 API 等）属于最大努力类别，这意味着除非站点已[请求永久存储](/persistent-storage/)，否则浏览器可能会自行决定逐出站点数据，例如，当设备存储较少时。
+
+最大努力的逐出策略如下：
+
+- 当浏览器空间不足时，基于 Chromium 的浏览器将开始逐出数据，首先从最近最少使用的来源中清除所有站点数据，然后是下一个，直到浏览器不再超过限制。
+- Internet Explorer 10+ 不会逐出数据，但会阻止来源再写入新增数据。
+- 当可用磁盘空间被填满时，Firefox 将开始逐出数据，首先从最近最少使用的来源中清除所有站点数据，然后是下一个，直到浏览器不再超过限制。
+- Safari 以前并不逐出数据，但最近对所有可写存储实施了新的七天上限（见下文）。
+
+从 iOS 和 iPadOS 13.4 以及 macOS 上的 Safari 13.1 开始，所有脚本可写存储都有七天的上限，包括 IndexedDB、服务工作进程注册和缓存 API。这意味着如果用户不与站点交互，Safari 将在 Safari 使用七天后从缓存中逐出所有内容。此逐出策略**不适用于已安装的 PWA**（它们已添加到主屏幕上）。有关完整的详细信息，请参阅 WebKit 博客上的[完全第三方 Cookie 拦截等](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)。
+
+{% Aside %}您可以为您的网站请求[永久存储](/persistent-storage/)，以保护关键用户或应用程序数据。{% endAside %}
+
+## 额外存储空间：为什么要对 IndexedDB 使用包装器
+
+IndexedDB 为低级 API，在使用前需要进行大量设置，这对于存储简单数据而言尤其痛苦。与大多数现代基于 Promise 的 API 不同，它基于事件。Promise 包装器（比如适用于 IndexedDB 的 [idb](https://www.npmjs.com/package/idb)）隐藏了一些强大的功能，但更重要的是，隐藏了 IndexedDB 库附带的复杂机制（例如事务、架构版本控制）。
+
+## 结论
+
+有限存储和促使用户存储越来越多数据的日子已经一去不复返了。站点可以有效地存储它们运行所需的所有资源和数据。使用 [StorageManager API](https://developer.mozilla.org/docs/Web/API/StorageManager/estimate)，您可以确定有多少空间可供您使用，以及您已经使用了多少。使用[永久存储](/persistent-storage/)时，除非用户将其删除，否则您可以保护它免遭逐出。
+
+### 其他资源
+
+- [IndexedDB 最佳实践](/indexeddb-best-practices/)
+- [Chrome Web 存储和配额概念](https://docs.google.com/document/d/19QemRTdIxYaJ4gkHYf2WWBNPbpuZQDNMpUVf8dQxj4U/preview)
+
+### 鸣谢
+
+特别感谢 Jarryd Goodman、Phil Walton、Eiji Kitamura、Daniel Murphy、Darwin Huang、Josh Bell、Marijn Kruisselbrink 和 Victor Costan 对本文的审阅。感谢 Eiji Kitamura、Addy Osmani 和 Marc Cohen 撰写本文所基于的原始文章。Eiji 编写了一个名为 [Browser Storage Abuser](http://demo.agektmr.com/storage/) 的有用工具，可用于验证当前行为。它允许您存储尽可能多的数据并查看浏览器的存储限制。感谢 Francois Beaufort 对 Safari 的深入研究，找出其存储限制。
+
+主图由 Guillaume Bolduc 在 [Unsplash](https://unsplash.com/photos/uBe2mknURG4) 上创作。
diff --git a/src/site/content/zh/blog/streams/index.md b/src/site/content/zh/blog/streams/index.md
new file mode 100644
index 00000000000..a842b2887fb
--- /dev/null
+++ b/src/site/content/zh/blog/streams/index.md
@@ -0,0 +1,809 @@
+---
+title: 流   - 权威指南
+subhead: 了解如何通过流式 API 使用可读流、可写流和转换流。
+description: 流式 API 允许 JavaScript 以编程方式访问通过网络接收的数据流，并根据需要对其进行处理。
+authors:
+  - thomassteiner
+date: 2021-02-19
+updated: 2021-02-25
+hero: image/8WbTDNrhLsU0El80frMBGE4eMCD3/TuciUuOQOd3u7uMgDZBi.jpg
+alt: 有彩色落叶的森林溪流。
+tags:
+  - blog
+  - capabilities
+---
+
+利用流式 API 可以用编程方式访问通过网络接收或通过本地任何方式创建的数据流，并使用 JavaScript 对其进行处理。流式处理涉及将您想要接收、发送或转换的资源分解成小区块，然后一点一点地处理这些区块。虽然流式处理是浏览器在接收 HTML 或要在网页上显示的视频等资产时执行的操作，但在 2015 年引入通过流 `fetch` 之前，JavaScript 从未有过此功能。
+
+{% Aside %} 流式处理在技术上可使用 `XMLHttpRequest` 实现，但它[实际上并不好用](https://gist.github.com/igrigorik/5736866)。{% endAside %}
+
+以前，如果您想处理某种资源（无论是视频，还是文本文件等），您必须下载整个文件，等待其反序列化为合适的格式，然后再进行处理。JavaScript 可以使用流后，这一切都改变了。现在，只要客户端获得原始数据，即可通过 JavaScript 逐步处理原始数据，而无需生成缓冲区、字符串或 blob。这便解锁了许多用例，我在下面列出了其中一些用例：
+
+- **视频效果：**通过实时应用效果的转换流传输可读视频流。
+- **数据（解）压缩：**通过有选择地（解）压缩文件流的转换流来传输文件流。
+- **图像解码：**先后通过将字节解码为位图数据和将位图转换为 PNG 的不同转换流来传输 HTTP 响应流。如果安装在 Service Worker 的 `fetch` 处理程序内，便能明确地支持新的图像格式，如 AVIF。
+
+## 核心概念
+
+在详细介绍各种类型的流之前，我先介绍一些核心概念。
+
+### 区块
+
+区块 (chunk) 是写入流或从流中读取的**一块数据**。它可以是任何类型；流甚至可以包含不同类型的区块。大多数情况下，区块不会是给定流的最小数据单元。例如，字节流可能包含由 16 KiB `Uint8Array` 单元组成的区块，而不是单个字节。
+
+### 可读流
+
+可读流表示您可以从中读取的数据源。换句话说，数据**出自**可读流。具体来讲，可读流是 `ReadableStream` 类的实例。
+
+### 可写流
+
+可写流表示您可以在其中写入数据的目标。换句话说，数据**进入**可写流。具体来讲，可写流是 `WritableStream` 类的实例。
+
+### 转换流
+
+变换流包含**一对流**：可写流和可读流，分别称为可写侧和可读侧。这就好比是现实世界将一种语言即时翻译成另一种语言的[同声传译员](https://en.wikipedia.org/wiki/Simultaneous_interpretation)。以特定于转换流的方式，写入到可写端会导致新数据可用于从可读端读取。具体来讲，任何具有 `writable` 属性和 `readable` 属性的对象都可以用作转换流。然而，标准 `TransformStream` 类可以更容易地创建这样正确关联的一个配对。
+
+### 管道链
+
+流的主要使用方式是彼此之间**通过管道进行传输**。可读流可以通过管道直接传输到可写流，此时使用的是可读流的 `pipeTo()` 方法，也可以先通过一个或多个转换流进行传输，此时使用的是可读流的 `pipeThrough()` 方法。以这种方式**通过管道连接在一起的一组流**称为管道链。
+
+### 背压
+
+一旦构建了管道链，管道链将传播关于区块应该以多快的速度在其中流过的信号。如果链中的任何步骤还不能接受区块，它会通过管道链向后传播信号，直到最终原始源被告知停止如此快速地生成区块。这种**使流量正常化**的过程称为背压 (backpressure)。
+
+###  T 型改造
+
+可使用`tee()` 方法对可读流进行 T 型改造（以大写 'T' 的形状命名）。这将**锁定**流，也就是使其不再直接可用；但是，它会创建**两个新的流**，这两个流称为分支，可以独立使用。T 型改造也很重要，因为流不能倒回或重新启动，稍后我会详细介绍。
+
+<figure><comment data-md-type="comment"></comment>{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/M70SLIvXhMkYfxDm5b98.svg", alt="管道链图，其中包含一个可读流，该流来自 fetch API 的调用，然后通过输出已经过 T 型改造的转换流进行传输，之后再发送至第一个结果可读流的浏览器和第二个结果可读流的 Service Worker 缓存。", width="800", height="430" %}<figcaption>管道链。</figcaption></figure>
+
+## 可读流的机制
+
+可读流是在 JavaScript 中由从基础源流出的 [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) 对象表示的数据源。[`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) 构造函数从给定的处理程序创建并返回一个可读流对象。有两种类型的基础源：
+
+- **推送源**会在您访问之后不断推送数据，您可以开始、暂停或取消对流的访问。示例包括实时视频流、服务器发送的事件或 WebSocket。
+- **拉取源**要求您在连接之后明确向其请求数据。示例包括通过 `fetch()` 或 `XMLHttpRequest` 调用进行的 HTTP 操作。
+
+流数据以称为**区块**的小段按顺序读取。放置在流中的区块即为**已排入队列**。这意味着它们正在可供读取的队列中等待。尚未读取的区块由**内部队列**跟踪。
+
+**排队策略**是一个对象，用于根据其内部队列的状态确定流应如何发出背压信号。排队策略为每个区块分配一个大小，并将队列中所有区块的总大小与指定的数字（称为**高水位线**）进行比较。
+
+流中的区块由**读取器** (reader) 读取。该读取器一次检索一个区块的数据，这样您便可以对其进行任何类型的操作。读取器加上与之相伴的其他处理代码称为**使用者** (consumer)。
+
+下一个构造称为**控制器** (controller)。每个可读流都有一个关联的控制器，顾名思义，利用它可以控制流。
+
+一次只能有一个读取器可以读取流；当创建某个读取器且其开始读取流（即成为**活动读取器**）时，它即**锁定**到流。如果您希望另一个读取器接管该流的读取工作，您通常需要先**释放**第一个读取器，然后再执行任何其他操作（尽管您可以对流进行 **T 型改造**）。
+
+### 创建可读流
+
+您可以通过调用可读流的构造函数 [`ReadableStream()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream) 来创建可读流。该构造函数有一个可选参数 `underlyingSource`，此参数表示一个对象，对象具有的方法和属性用于定义构造的流实例的行为方式。
+
+#### `underlyingSource`
+
+它可以使用以下开发人员定义的可选方法：
+
+- `start(controller)`：在构造对象时立即调用。该方法可以访问流源，并执行设置流功能所需的任何其他操作。如果此过程将要异步完成，该方法可以返回 Promise 来表示成功或失败。传递给此方法的 `controller` 参数为 [`ReadableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController)。
+- `pull(controller)`：可用于在提取更多区块时控制流。只要流的内部区块队列未满，就会重复调用它，直到队列达到其高水位线。如果调用 `pull()` 的结果是 Promise，`pull()` 将不会再次调用，直到所述 Promise 完成。如果 Promise 拒绝，流将出错。
+- `cancel(reason)`：在流使用者取消流时调用。
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    /* … */
+  },
+
+  pull(controller) {
+    /* … */
+  },
+
+  cancel(reason) {
+    /* … */
+  },
+});
+```
+
+`ReadableStreamDefaultController` 支持以下方法：
+
+- [`ReadableStreamDefaultController.close()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/close) 关闭关联的流。
+- [`ReadableStreamDefaultController.enqueue()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/enqueue) 将关联流中的给定区块排入队列。
+- [`ReadableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultController/error) 导致与关联流的任何未来交互出错。
+
+```js
+/* … */
+start(controller) {
+  controller.enqueue('The first chunk!');
+},
+/* … */
+```
+
+#### `queuingStrategy`
+
+`ReadableStream()` 构造函数的第二个参数为 `queuingStrategy`，其同样是可选参数。它是一个有选择地为流定义排队策略的对象，采用两个参数：
+
+- `highWaterMark`：一个非负数，指示使用此排队策略的流的高水位标记。
+- `size(chunk)`：计算并返回给定区块值的有限非负大小的函数。结果用于确定背压，并通过适当的 `ReadableStreamDefaultController.desiredSize` 属性表现出来。它还控制何时调用基础源的 `pull()` 方法。
+
+```js
+const readableStream = new ReadableStream({
+    /* … */
+  },
+  {
+    highWaterMark: 10,
+    size(chunk) {
+      return chunk.length;
+    },
+  },
+);
+```
+
+{% Aside %} 您可以定义您自己的自定义 `queuingStrategy`，也可以将 [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) 或 [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) 的实例用于此对象的值。如果未提供 `queuingStrategy`，则使用的默认值与 `CountQueuingStrategy` 相同且 `highWaterMark` 为 `1`。{% endAside %}
+
+#### `getReader()` 方法和 `read()` 方法
+
+要从可读流中读取，您需要一个读取器，也就是 [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader)。`ReadableStream` 接口的 `getReader()` 方法创建一个读取器并将流锁定到它。当流被锁定时，在此读取器释放之前，无法获取其他读取器。
+
+`ReadableStreamDefaultReader` 接口的 [`read()`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader/read) 方法返回 Promise，并提供对流内部队列中下一个区块的访问。它根据流的状态完成或拒绝 Promise 并显示结果。各种可能的结果如下：
+
+- 如果区块可用，则完成 Promise 且对象形式如下：<br>`{ value: chunk, done: false }`。
+- 如果流关闭，则完成 Promise 且对象形式如下：<br> `{ value: undefined, done: true }`。
+- 如果流出错，则会拒绝 Promise 并显示相关错误。
+
+```js
+const reader = readableStream.getReader();
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) {
+    console.log('流已完成。');
+    break;
+  }
+  console.log('只读取区块：', value);
+}
+```
+
+#### `locked` 属性
+
+可通过访问 [`ReadableStream.locked`](https://developer.mozilla.org/docs/Web/API/ReadableStream/locked) 属性来检查可读流是否锁定。
+
+```js
+const locked = readableStream.locked;
+console.log(`流 ${locked ? '确实' : '未'} 锁定。`);
+```
+
+### 可读流代码示例
+
+以下代码示例显示了实际应用的所有步骤。您首先创建一个 `ReadableStream`，它在其 `underlyingSource` 参数（即 `TimestampSource` 类）中定义 `start()` 方法。此方法告诉流的 `controller` 在十秒内每秒钟对时间戳执行一次 `enqueue()`。最后，它告诉控制器对流执行 `close()`。您可以使用此流，具体方式是通过 `getReader()` 方法创建读取器并调用 `read()`，直到流处于 `done` 状态。
+
+```js
+class TimestampSource {
+  #interval
+
+  start(controller) {
+    this.#interval = setInterval(() => {
+      const string = new Date().toLocaleTimeString();
+      // 向流中添加字符串。
+      controller.enqueue(string);
+      console.log(`已排入队列 ${string}`);
+    }, 1_000);
+
+    setTimeout(() => {
+      clearInterval(this.#interval);
+      // 10 秒后关闭流。
+      controller.close();
+    }, 10_000);
+  }
+
+  cancel() {
+    // 这在读取器取消时调用。
+    clearInterval(this.#interval);
+  }
+}
+
+const stream = new ReadableStream(new TimestampSource());
+
+async function concatStringStream(stream) {
+  let result = '';
+  const reader = stream.getReader();
+  while (true) {
+    // `read()` 方法返回 Promise，
+    // 已接收到值时会对其进行解析。
+    const { done, value } = await reader.read();
+    // 结果对象包含两个属性：
+    // `done`  - 流已为您提供其所有数据时为 `true`。
+    // `value` - 某些数据。`done` 为 `true` 时始终为 `undefined`。
+    if (done) return result;
+    result += value;
+    console.log(`目前读取 ${result.length} 个字符`);
+    console.log(`最近读取的区块： ${value}`);
+  }
+}
+concatStringStream(stream).then((result) => console.log('流完成', result));
+```
+
+### 异步迭代
+
+在每次 `read()` 循环迭代时检查流是否为 `done` 状态可能不是最方便的 API。幸运的是，很快就会有更好的方法来做到这一点：异步迭代。
+
+```js
+for await (const chunk of stream) {
+  console.log(chunk);
+}
+```
+
+{% Aside 'caution' %} 异步迭代尚未在任何浏览器中实现。{% endAside %}
+
+如今，使用异步迭代的解决方法是借助 helper 函数来实现行为。这样，您就可以在代码中使用该功能，如下面的代码段所示。
+
+```js
+function streamAsyncIterator(stream) {
+  // 锁定流：
+  const reader = stream.getReader();
+
+  return {
+    next() {
+      // 流读取已使用 {done, value} 进行解析，因此
+      // 我们只能调用读取：
+      return reader.read();
+    },
+    return() {
+      // 迭代器终止时释放锁定。
+      reader.releaseLock();
+      return {};
+    },
+    // for-await 无论传递的是什么都会调用它，因此
+    // 迭代器往往返回自身。
+    [Symbol.asyncIterator]() {
+      return this;
+    },
+  };
+}
+
+async function example() {
+  const response = await fetch(url);
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    console.log(chunk);
+  }
+}
+```
+
+### 对可读流进行 T 型改造
+
+`ReadableStream` 接口的 [`tee()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/tee) 方法对当前可读流进行 T 型改造，并返回一个包含两个结果分支的二元素数组作为新的 `ReadableStream` 实例。这允许两个 reader 同时读取一个流。例如，如果您想从服务器提取响应并将其流式处理至浏览器，同时还将其流式处理至 Service Worker 缓存，则可能会这样做。由于响应主体无法使用多次，因此需要两个副本才能实现此目的。要取消流，则需要取消两个结果分支。对流进行 T 型改造通常会在持续时间内锁定流，从而防止其他读取器将其锁定。
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // 由构造函数调用。
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // 控制器的队列为空时调用的是 `read()`。
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // 流被取消时调用。
+    console.log('[cancel]', reason);
+  },
+});
+
+// 创建两个 `ReadableStream`。
+const [streamA, streamB] = readableStream.tee();
+
+// 以迭代方式逐个读取 streamA。通常，您
+// 不会这样做，但您确实可以如此。
+const readerA = streamA.getReader();
+console.log('[A]', await readerA.read()); //=> {value: "a", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "b", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "c", done: false}
+console.log('[A]', await readerA.read()); //=> {value: "d", done: false}
+console.log('[A]', await readerA.read()); //=> {value: undefined, done: true}
+
+// 以循环方式读取 streamB。这是从流中读取数据
+// 的最常见方法。
+const readerB = streamB.getReader();
+while (true) {
+  const result = await readerB.read();
+  if (result.done) break;
+  console.log('[B]', result);
+}
+```
+
+## 可读字节流
+
+对于表示字节的流，提供了可读流的扩展版本以有效地处理字节，特别是通过最小化副本数的方式。字节流允许获取自带缓冲区 (BYOB) 读取器。如果是 WebSocket，默认实现可以提供一系列不同的输出，例如字符串或数组缓冲区，而字节流则保证字节输出。此外，BYOB 读取器还具有稳定性优势。这是因为如果缓冲区分离，它可以保证一个人不会两次写入同一个缓冲区，从而避免出现竞争。 BYOB 读取器可以减少浏览器需要运行垃圾收集的次数，因为它可以重用缓冲区。
+
+### 创建可读字节流
+
+将附加的 `type` 参数传递至 `ReadableStream()` 构造函数可以创建可读字节流。
+
+```js
+new ReadableStream({ type: 'bytes' });
+```
+
+#### `underlyingSource`
+
+可读字节流的基础源被赋予一个 `ReadableByteStreamController` 来操作。它的 `ReadableByteStreamController.enqueue()` 方法采用值为 `ArrayBufferView` 的 `chunk` 参数。`ReadableByteStreamController.byobRequest` 属性返回当前 BYOB 拉取请求，如果没有，则返回 null。最后，`ReadableByteStreamController.desiredSize` 属性返回填充受控流的内部队列所需的大小。
+
+### `queuingStrategy`
+
+`ReadableStream()` 构造函数的第二个参数为 `queuingStrategy`，也是可选参数。它是一个有选择地为流定义排队策略的对象，采用一个参数：
+
+- `highWaterMark`：指示使用此排队策略的流的高水位标记的非负字节数。这用于确定背压，并通过适当的 `ReadableByteStreamController.desiredSize` 属性表现出来。它还控制何时调用基础源的 `pull()` 方法。
+
+{% Aside %} 与其他流类型的排队策略不同，可读字节流的排队策略没有 `size(chunk)` 函数。每个区块的大小始终由其 `byteLength` 属性决定。{% endAside %}
+
+{% Aside %} 如果未提供 `queuingStrategy`，则使用的默认值为 1 且 `highWaterMark` 为 `0`。{% endAside %}
+
+#### `getReader()` 方法和 `read()` 方法
+
+然后，您可以通过相应地设置 `mode` 参数来访问 `ReadableStreamBYOBReader`：`ReadableStream.getReader({ mode: "byob" })`。这样便可更精确地控制缓冲区分配以避免副本。要从字节流中读取，您需要调用 `ReadableStreamBYOBReader.read(view)`，其中 `view` 为 [`ArrayBufferView`](https://developer.mozilla.org/docs/Web/API/ArrayBufferView)。
+
+#### 可读字节流代码示例
+
+```js
+const reader = readableStream.getReader({ mode: "byob" });
+
+let startingAB = new ArrayBuffer(1_024);
+const buffer = await readInto(startingAB);
+console.log("第一个 1024 字节或更少:", buffer);
+
+async function readInto(buffer) {
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    const { value: view, done } =
+        await reader.read(new Uint8Array(buffer, offset, buffer.byteLength - offset));
+    buffer = view.buffer;
+    if (done) {
+      break;
+    }
+    offset += view.byteLength;
+  }
+
+  return buffer;
+}
+```
+
+以下函数返回可读字节流，这些流可以对随机生成的数组进行高效的零拷贝读取。它并不使用预先确定的 1,024 区块大小，而是尝试填充开发人员提供的缓冲区，从而实现完全控制。
+
+```js
+const DEFAULT_CHUNK_SIZE = 1_024;
+
+function makeReadableByteStream() {
+  return new ReadableStream({
+    type: 'bytes',
+
+    pull(controller) {
+      // 甚至在使用者使用默认读取器时，
+      // 自动分配功能也会分配缓冲区并
+      // 通过 `byobRequest` 将其传递给我们。
+      const view = controller.byobRequest.view;
+      view = crypto.getRandomValues(view);
+      controller.byobRequest.respond(view.byteLength);
+    },
+
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE,
+  });
+}
+```
+
+## 可写流的机制
+
+可写流是可在其中写入数据的目标，在 JavaScript 中由 [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) 对象表示。它是基于**基础接收器**（在其中写入原始数据的较低级别 I/O 接收器）的抽象对象。
+
+数据通过**编写器** (writer) 写入到流，一次一个区块。区块可以采用多种形式，就像读取器中的区块一样。您可以使用任何喜欢的代码来生成准备好写入的区块；编写器加上关联代码称为**制作者** (producer)。
+
+编写器在创建后开始写入到流（成为**活动编写器**）时，即称为**锁定**到流。一次只有一个编写器可以写入到可写流。如果希望另一个编写器开始向您的流写入内容，通常需要先释放它，然后再向其附加另一个编写器。
+
+**内部队列**跟踪已写入到流但尚未由基础接收器处理的区块。
+
+**排队策略**是一个对象，用于根据其内部队列的状态确定流应如何发出背压信号。排队策略为每个区块分配一个大小，并将队列中所有区块的总大小与指定的数字（称为**高水位线**）进行比较。
+
+最终构造称为**控制器**。每个可写流都有一个关联的控制器，可用于对流进行控制（例如，中止流）。
+
+### 创建可写流
+
+流 API 的 [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) 接口为将流数据写入到目标提供了标准抽象对象，称为接收器。此对象带有内置的背压和排队。您可以通过调用可写流的构造函数 [`WritableStream()`](https://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream) 来创建可写流。它有一个可选的 `underlyingSink` 参数，该参数表示一个对象，对象具有的方法和属性用于定义构造的流实例的行为方式。
+
+#### `underlyingSink`
+
+`underlyingSink` 可以包括以下开发人员定义的可选方法。传递给某些方法的 `controller` 参数为 [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController)。
+
+- `start(controller)`：在构造对象时立即调用此方法。此方法的内容应旨在访问基础接收器。如果此过程将要异步完成，它可以返回 Promise 来表示成功或失败。
+- `write(chunk, controller)`：当新的数据区块（在 `chunk` 参数中指定）准备好写入到基础接收器时，将会调用此方法。它可以返回 Promise 来表示写入操作的成功或失败。此方法仅在先前的写入成功后才会调用，流关闭或中止后从不会调用。
+- `close(controller)`：如果应用程序发出信号指示它已完成将区块写入到流，则将调用此方法。内容应执行任何必要操作来完成对基础接收器的写入，并释放对它的访问。如果此过程是异步的，它可以返回 Promise 来表示成功或失败。此方法仅在所有已排队的写入成功后才会调用。
+- `abort(reason)`：如果应用发出信号指示它希望意外关闭流并将其置于错误状态，则将调用此方法。它可以清理任何持有的资源，很像 `close()`，但即使写入已排队，也会调用 `abort()`。那些区块将会被丢弃。如果此过程是异步的，它可以返回 Promise 来表示成功或失败。`reason` 参数包含一个 `DOMString`，用于描述流的中止原因。
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    /* … */
+  },
+
+  write(chunk, controller) {
+    /* … */
+  },
+
+  close(controller) {
+    /* … */
+  },
+
+  abort(reason) {
+    /* … */
+  },
+});
+```
+
+流 API 的 [`WritableStreamDefaultController`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController) 接口代表一个控制器，允许控制设置期间的 `WritableStream` 状态，因为更多的块被提交用于写入，或写入即将结束。在构造 `WritableStream` 时，基础接收器被赋予一个相应的 `WritableStreamDefaultController` 实例来操作。`WritableStreamDefaultController` 只有一个方法：[`WritableStreamDefaultController.error()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultController/error)，它会导致将来与关联流的交互出错。
+
+```js
+/* … */
+write(chunk, controller) {
+  try {
+    // 尝试对 `chunk` 做一些危险操作。
+  } catch (error) {
+    controller.error(error.message);
+  }
+},
+/* … */
+```
+
+#### `queuingStrategy`
+
+`WritableStream()` 构造函数的第二个参数为 `queuingStrategy`，其同样是可选参数。它是一个有选择地为流定义排队策略的对象，采用两个参数：
+
+- `highWaterMark`：一个非负数，指示使用此排队策略的流的高水位标记。
+- `size(chunk)`：计算并返回给定区块值的有限非负大小的函数。结果用于确定背压，并通过适当的 `WritableStreamDefaultWriter.desiredSize` 属性表现出来。
+
+{% Aside %} 您可以定义您自己的自定义 `queuingStrategy`，也可以将 [`ByteLengthQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/ByteLengthQueuingStrategy) 或 [`CountQueuingStrategy`](https://developer.mozilla.org/docs/Web/API/CountQueuingStrategy) 的实例用于此对象的值。如果未提供 `queuingStrategy`，则使用的默认值与 `CountQueuingStrategy` 相同且 `highWaterMark` 为 `1`。{% endAside %}
+
+#### `getWriter()` 方法和 `write()` 方法
+
+要写入到可写流，需要一个编写器，即 `WritableStreamDefaultWriter`。`WritableStream` 接口的 `getWriter()` 方法返回 `WritableStreamDefaultWriter` 的新实例并将流锁定到该实例。当流被锁定时，在当前编写器释放之前，无法获取其他编写器。
+
+[`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter/write) 接口的 [`write()`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) 方法将传递的数据区块写入到 `WritableStream` 及其基础接收器，然后返回 Promise，其解析后可指示写入操作的成功或失败。请注意，“成功”的含义取决于基础接收器；它可能指示区块已被接受，并不一定表示区块已安全保存到其最终目标。
+
+```js
+const writer = writableStream.getWriter();
+const resultPromise = writer.write('第一个区块！');
+```
+
+#### `locked` 属性
+
+可通过访问 [`WritableStream.locked`](https://developer.mozilla.org/docs/Web/API/WritableStream/locked) 属性来检查可写流是否锁定。
+
+```js
+const locked = writableStream.locked;
+console.log(`流 ${locked ? '确实' : '未'} 锁定。`);
+```
+
+### 可写流代码示例
+
+以下代码示例显示了起作用的所有步骤。
+
+```js
+const writableStream = new WritableStream({
+  start(controller) {
+    console.log('[start]');
+  },
+  async write(chunk, controller) {
+    console.log('[write]', chunk);
+    // 等待下一个写入。
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+const writer = writableStream.getWriter();
+const start = Date.now();
+for (const char of 'abcdefghijklmnopqrstuvwxyz') {
+  // 等待添加到写入队列。
+  await writer.ready;
+  console.log('[ready]', Date.now() - start, 'ms');
+  // 写入完成后对 Promise 进行解析。
+  writer.write(char);
+}
+await writer.close();
+```
+
+### 将可读流通过管道传输到可写流
+
+可读流可以通过可读流的 [`pipeTo()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeTo) 方法传输到可写流。`ReadableStream.pipeTo()` 将当前 `ReadableStream` 通过管道传输到给定的 `WritableStream` 并返回 Promise，当传输过程成功完成时 Promise 的状态为完成，如果遇到错误，状态则为拒绝。
+
+```js
+const readableStream = new ReadableStream({
+  start(controller) {
+    // 由构造函数调用。
+    console.log('[start readable]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // 控制器的队列为空时调用。
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close();
+  },
+  cancel(reason) {
+    // 流被取消时调用。
+    console.log('[cancel]', reason);
+  },
+});
+
+const writableStream = new WritableStream({
+  start(controller) {
+    // 由构造函数调用。
+    console.log('[start writable]');
+  },
+  async write(chunk, controller) {
+    // writer.write() 时调用。
+    console.log('[write]', chunk);
+    // 等待下一个写入。
+    await new Promise((resolve) => setTimeout(() => {
+      document.body.textContent += chunk;
+      resolve();
+    }, 1_000));
+  },
+  close(controller) {
+    console.log('[close]');
+  },
+  abort(reason) {
+    console.log('[abort]', reason);
+  },
+});
+
+await readableStream.pipeTo(writableStream);
+console.log('[finished]');
+```
+
+## 创建转换流
+
+流 API 的 `TransformStream` 接口表示一组可转换的数据。您可以通过调用转换流的构造函数 `TransformStream()` 来创建转换流，该构造函数从给定的处理程序创建并返回转换流对象。`TransformStream()` 构造函数接受其第一个参数作为可选的 JavaScript 对象，该对象表示 `transformer`。此类对象可以包含以下任一方法：
+
+### `transformer`
+
+- `start(controller)`：在构造对象时立即调用此方法。通常，此方法用于使用 `controller.enqueue()` 将前缀区块排入队列。这些区块将读取自可读端，但不依赖于对可写端的任何写入。如果此初始过程是异步的，例如由于获取前缀区块需要一些努力，则该函数可以返回 Promise 来表示成功或失败；被拒绝的 Promise 将导致流出错。`TransformStream()` 构造函数将重新抛出任何已抛出的异常。
+- `transform(chunk, controller)`：当最初写入到可写端的新区块准备好进行转换时，会调用此方法。流实现可保证此函数仅在先前的转换成功后才会调用，在 `start()` 完成之前或 `flush()` 调用之后永远不会调用。该函数执行转换流的实际转换工作。它可以使用 `controller.enqueue()` 将结果排入队列。这样，写入到可写端的单个区块就可以在可读端产生零个或多个区块，具体取决于调用 `controller.enqueue()` 的次数。如果转换过程是异步的，则此函数可以返回 Promise 来表示转换成功或失败。被拒绝的 Promise 将导致转换流的可读端和可写端均出错。如果未提供 `transform()` 方法，则使用身份转换，它会将区块按原样从可写端排入到可读端的队列。
+- `flush(controller)`：当写入到可写端的所有区块均成功通过 `transform()` 完成转换后会调用此方法，此时可写端即将关闭。通常，此方法用于将后缀区块排入到可读端的队列，然后再关闭可读端。如果刷新过程是异步的，该函数可以返回 Promise 来表示成功或失败；结果将传达给 `stream.writable.write()` 的调用方。此外，被拒绝的 Promise 将导致流的可读端和可写端均出错。抛出异常会视为与返回被拒绝的 Promise 相同。
+
+```js
+const transformStream = new TransformStream({
+  start(controller) {
+    /* … */
+  },
+
+  transform(chunk, controller) {
+    /* … */
+  },
+
+  flush(controller) {
+    /* … */
+  },
+});
+```
+
+### `writableStrategy` 和 `readableStrategy` 排队策略
+
+`TransformStream()` 构造函数的第二个和第三个可选参数是可选的 `writableStrategy` 和 `readableStrategy` 排队策略。它们的定义分别在[可读](#the-queuingstrategy)流和[可写](#the-queuingstrategy-3)流部分中概述。
+
+### 转换流代码示例
+
+以下代码示例显示了一个简单转换流的实际运用。
+
+```js
+// 请注意，现在已有 `TextEncoderStream` 和 `TextDecoderStream`。
+// 此实例所示为以前的完成方法。
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+(async () => {
+  const readStream = textEncoderStream.readable;
+  const writeStream = textEncoderStream.writable;
+
+  const writer = writeStream.getWriter();
+  for (const char of 'abc') {
+    writer.write(char);
+  }
+  writer.close();
+
+  const reader = readStream.getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+### 通过转换流传输可读流
+
+`ReadableStream` 接口的 [`pipeThrough()`](https://developer.mozilla.org/docs/Web/API/ReadableStream/pipeThrough) 方法提供了一种通过转换流或任何其他可写/可读对来传输当前流的可链接方式。通过管道传输流通常会在管道持续时间内锁定流，从而防止其他读取器将其锁定。
+
+```js
+const transformStream = new TransformStream({
+  transform(chunk, controller) {
+    console.log('[transform]', chunk);
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    console.log('[flush]');
+    controller.terminate();
+  },
+});
+
+const readableStream = new ReadableStream({
+  start(controller) {
+    // 由构造函数调用
+    console.log('[start]');
+    controller.enqueue('a');
+    controller.enqueue('b');
+    controller.enqueue('c');
+  },
+  pull(controller) {
+    // 控制器的队列为空时调用读取
+    console.log('[pull]');
+    controller.enqueue('d');
+    controller.close(); // 或 controller.error();
+  },
+  cancel(reason) {
+    // rs.cancel(reason) 时调用
+    console.log('[cancel]', reason);
+  },
+});
+
+(async () => {
+  const reader = readableStream.pipeThrough(transformStream).getReader();
+  for (let result = await reader.read(); !result.done; result = await reader.read()) {
+    console.log('[value]', result.value);
+  }
+})();
+```
+
+下一个代码示例（有点刻意）展示了如何实现 `fetch()` 的“呼喊”版本，该版本通过将返回的响应 Promise [作为流](https://developer.mozilla.org/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream)使用并对区块逐个大写来大写所有文本。此方法的优点是您不需要等待整个文档下载完毕，这在处理大文件时会有很大的不同。
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    }
+  });
+}
+
+fetch('./lorem-ipsum.txt').then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body))
+);
+```
+
+## 浏览器支持和补丁
+
+各浏览器对流 API 的支持各不相同。请务必查看[我可以使用](https://caniuse.com/streams)以获取详细的兼容性数据。请注意，某些浏览器仅具有某些功能的部分实现，因此请务必彻底检查数据。
+
+好消息是有一个可用的[参考实现](https://github.com/whatwg/streams/tree/master/reference-implementation)和一个面向生产用途的 [polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) (补丁)。
+
+{% Aside 'gotchas' %} 如果可能，仅当内置功能不可用时，有条件地加载补丁。{% endAside %}
+
+## 演示
+
+以下演示显示了实际运用的可读流、可写流和转换流。它还包括 `pipeThrough()` 和 `pipeTo()` 管道链的示例，并且还演示了 `tee()`。您可以选择在自己的窗口中运行[演示](https://streams-demo.glitch.me/)或查看[源代码](https://glitch.com/edit/#!/streams-demo?path=script.js)。
+
+{% Glitch 'streams-demo' %}
+
+## 浏览器中提供的有用流
+
+浏览器中内置了许多有用的流。您可以轻松地从 blob 创建 `ReadableStream`。[`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) 接口的 [stream()](https://developer.mozilla.org/docs/Web/API/Blob/stream) 方法返回一个 `ReadableStream`，其在读取时返回 blob 中包含的数据。另请记得，[`File`](https://developer.mozilla.org/docs/Web/API/File) 对象是一种特定类型的 `Blob`，可在任何可以使用 blob 的上下文中使用。
+
+```js
+const readableStream = new Blob(['hello world'], { type: 'text/plain' }).stream();
+```
+
+`TextDecoder.decode()` 和 `TextEncoder.encode()` 的流变体分别称为 [`TextDecoderStream`](https://encoding.spec.whatwg.org/#interface-textdecoderstream) 和 [`TextEncoderStream`](https://encoding.spec.whatwg.org/#interface-textencoderstream)。
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const decodedStream = response.body.pipeThrough(new TextDecoderStream());
+```
+
+[`CompressionStream`](https://wicg.github.io/compression/#compression-stream) 和 [`DecompressionStream`](https://wicg.github.io/compression/#decompression-stream) 转换流分别可以轻松地压缩和解压缩文件。下面的代码示例展示了如何下载流规范、在浏览器中对其进行压缩 (gzip)，然后将压缩文件直接写入到磁盘。
+
+```js
+const response = await fetch('https://streams.spec.whatwg.org/');
+const readableStream = response.body;
+const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
+
+const fileHandle = await showSaveFilePicker();
+const writableStream = await fileHandle.createWritable();
+compressedStream.pipeTo(writableStream);
+```
+
+[文件系统访问 API](/file-system-access/) 的 [`FileSystemWritableFileStream`](https://wicg.github.io/file-system-access/#filesystemwritablefilestream) 和实验性 [`fetch()` 请求流](/fetch-upload-streaming/#writable-streams)是自然情况下可写流的示例。
+
+[串行 API](/serial/) 大量使用可读流和可写流。
+
+```js
+// 提示用户选择任何串行端口。
+const port = await navigator.serial.requestPort();
+// 等待串行端口开放。
+await port.open({ baudRate: 9_600 });
+const reader = port.readable.getReader();
+
+// 监听来自串行设备的数据。
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    // 允许串行端口稍后关闭。
+    reader.releaseLock();
+    break;
+  }
+  // 值为 Uint8Array。
+  console.log(value);
+}
+
+// 写入到串行端口。
+const writer = port.writable.getWriter();
+const data = new Uint8Array([104, 101, 108, 108, 111]); // 你好
+await writer.write(data);
+// 允许串行端口稍后关闭。
+writer.releaseLock();
+```
+
+最后，[`WebSocketStream`](/websocketstream/) API 将流与 WebSocket API 集成在一起。
+
+```js
+const wss = new WebSocketStream(WSS_URL);
+const { readable, writable } = await wss.connection;
+const reader = readable.getReader();
+const writer = writable.getWriter();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+  const result = await process(value);
+  await writer.write(result);
+}
+```
+
+## 实用资源
+
+- [流规范](https://streams.spec.whatwg.org/)
+- [配套演示](https://streams.spec.whatwg.org/demos/)
+- [流补丁](https://github.com/MattiasBuelens/web-streams-polyfill)
+- [2016 - Web 流年](https://jakearchibald.com/2016/streams-ftw/)
+- [异步迭代器和生成器](https://jakearchibald.com/2017/async-iterators-and-generators/)
+- [流可视化工具](https://surma.dev/lab/whatwg-stream-visualizer/lab.html)
+
+## 鸣谢
+
+本文由 [Jake Archibald](https://jakearchibald.com/) 、[François Beaufort](https://github.com/beaufortfrancois) 、[Sam Dutton](https://samdutton.com/) 、[Mattias Buelens](https://github.com/MattiasBuelens) 、[Surma](https://surma.dev/) 、[Joe Medley](https://github.com/jpmedley) 和 [Adam Rice](https://github.com/ricea) 审阅。[Jake Archibald](https://jakearchibald.com/) 的博客文章对于我对流的理解帮助良多。一些代码示例的灵感来自 GitHub 用户 [@bellbind](https://gist.github.com/bellbind/f6a7ba88e9f1a9d749fec4c9289163ac) 的探索，文章的部分内容在很大程度上基于[流的 MDN Web 文档](https://developer.mozilla.org/docs/Web/API/Streams_API)而构建。[流标准](https://streams.spec.whatwg.org/)的[作者](https://github.com/whatwg/streams/graphs/contributors)在编写本规范方面做了大量工作。主图由 [Ryan Lara](https://unsplash.com/@ryanlara) 在 [Unsplash](https://unsplash.com/) 上创作。
diff --git a/src/site/content/zh/blog/text-fragments/index.md b/src/site/content/zh/blog/text-fragments/index.md
new file mode 100644
index 00000000000..dc10ccd8801
--- /dev/null
+++ b/src/site/content/zh/blog/text-fragments/index.md
@@ -0,0 +1,312 @@
+---
+title: 从未链接过的加粗链接：文本片段
+subhead: 文本片段支持在 URL 片段中指定文本代码段。当导航到带有此类文本片段的 URL 时，浏览器可以强调和/或引起用户的注意。
+authors:
+  - thomassteiner
+date: 2020-06-17
+updated: 2021-05-17
+hero: image/admin/Y4NLEbOwgTWdMNoxRYXw.jpg
+alt: ''
+description: 文本片段支持在 URL 片段中指定文本代码段。当导航到带有此类文本片段的 URL 时，浏览器可以强调和/或引起用户的注意。
+tags:
+  - blog
+  - capabilities
+feedback:
+  - api
+---
+
+## 片段标识符
+
+Chrome 80 是一个大版本。它包含许多备受期待的功能，例如 [Web Workers 中的 ECMAScript 模块](/module-workers/)、[空值合并](https://v8.dev/features/nullish-coalescing)、[可选链](https://v8.dev/features/optional-chaining)等。此版本像往常一样在 Chromium 博客中通过[博客文章](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)发布。您可以在下面的屏幕截图中看到博客文章的摘录。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/egsW6tkKWYI8IHE6JyMZ.png", alt="", width="400", height="628" %}<figcaption>Chromium 博客文章，其中带有 <code>id</code> 属性的元素周围带有红框。</figcaption></figure>
+
+您可能会问所有这些红框的含义是什么。它们是在 DevTools 中运行以下代码段的结果，突出显示具有 `id` 属性的所有元素。
+
+```js
+document.querySelectorAll('[id]').forEach((el) => {
+  el.style.border = 'solid 2px red';
+});
+```
+
+由于具有[片段标识符](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)，我可以向任何用红框突出显示的元素添加深层链接，然后在页面 URL 的[哈希](https://developer.mozilla.org/docs/Web/API/URL/hash)中使用。假设我想深层链接到 aside 中的*在[产品论坛](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)中提供反馈*框，我可以通过手工制作 URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1&lt;/mark&gt;</code></a> 来实现此操作。正如您在 Developer Tools 的“元素”面板中看到的，相关元素有一个值为 `HTML1` 的 `id` 属性。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/whVXhhrYwA55S3i4J3l5.png", alt="", width="600", height="97" %} <figcaption>显示元素的 <code>id</code> 的 Dev Tools。</figcaption></figure>
+
+如果我用 JavaScript 的 `URL()` 构造函数解析此 URL，会显示不同的组件。请注意值为 `#HTML1` 的 `hash` 属性。
+
+```js/3
+new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
+/* Creates a new `URL` object
+URL {
+  hash: "#HTML1"
+  host: "blog.chromium.org"
+  hostname: "blog.chromium.org"
+  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
+  origin: "https://blog.chromium.org"
+  password: ""
+  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
+  port: ""
+  protocol: "https:"
+  search: ""
+  searchParams: URLSearchParams {}
+  username: ""
+}
+*/
+```
+
+尽管我必须打开 Developer Tools 才能找到元素的 `id`，但这一点充分说明了博客文章作者打算链接到页面中这一特定部分的可能性。
+
+如果我想链接到没有 `id` 的内容，该怎么办？假设我想链接到 *Web Workers 中的 ECMAScript 模块*标题。正如您在下面的屏幕截图中看到的，相关的 `<h1>` 没有 `id` 属性，这意味着我无法链接到此标题。文本片段正好可以解决的问题。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1g4rTS1q5LKHEHnDoF9o.png", alt="", width="600", height="71" %} <figcaption>显示没有 <code>id</code> 的标题的 Dev Tools。</figcaption></figure>
+
+## 文本片段
+
+[文本片段](https://wicg.github.io/ScrollToTextFragment/)建议添加了对在 URL 哈希中指定文本代码段的支持。当导航到带有此类文本片段的 URL 时，用户代理可以强调和/或引起用户的注意。
+
+### 浏览器兼容性
+
+基于 Chromium 80 及更高版本的浏览器支持文本片段功能。在撰写本文时，Safari 和 Firefox 尚未公开表示有意实现此功能。请参阅[相关链接](#related-links)中 Safari 和 Firefox 讨论的链接。
+
+{% Aside 'success' %} 这些链接过去在跨某些常见服务（如 Twitter）使用的[客户端重定向](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Alternative_way_of_specifying_redirections)提供服务时不起作用。此问题已在 [crbug.com/1055455](https://crbug.com/1055455) 中进行跟踪，现已修复。常规 [HTTP 重定向](https://developer.mozilla.org/docs/Web/HTTP/Redirections#Principle)始终工作正常。{% endAside %}
+
+出于[安全](#security)原因，该功能需要在 [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Link_types/noopener) 上下文中打开链接。因此，请确保在 `<a>` 定位标记中包含 [`rel="noopener"`](https://developer.mozilla.org/docs/Web/HTML/Element/a#attr-rel)，或者将 [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#noopener) 添加到窗口功能特性的 `Window.open()` 列表中。
+
+### `textStart`
+
+在最简单的形式中，文本片段的语法如下：哈希符号 `#`，后跟 `:~:text=`，最后为 `textStart`，它表示我想要链接到的[百分比编码](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)文本。
+
+```bash
+#:~:text=textStart
+```
+
+例如，假设我想链接到[宣布 Chrome 80 中的功能的博客文章](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html)中的 *Web Workers 中的 ECMAScript 模块*标题，在此情况下，URL 为：
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers&lt;/mark&gt;</code></a>
+
+<mark class="highlight-line highlight-line-active">按此方式</mark>强调文本片段。如果您在 Chrome 等支持浏览器中单击该链接，文本片段将突出显示并滚动到视图中：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D3jwPrJlvN3FmJo3pADt.png", alt="", width="400", height="208" %} <figcaption>文本片段滚动到视图中并突出显示。</figcaption></figure>
+
+### `textStart` 和 `textEnd`
+
+现在，如果我想链接到标题为 *Web Workers 中的 ECMAScript 模块*的完整部分，而不仅仅是其标题，该怎么办？对该部分的完整文本进行百分比编码会使生成的 URL 过长。
+
+幸运的是，有一个更好的方法。我可以使用 `textStart,textEnd` 语法框住所需文本，而非完整文本。因此，我在所需文本的开头指定了几个百分比编码的字词，并在所需文本的末尾指定了几个百分比编码的字，用逗号 `,` 分隔。
+
+类似于：
+
+<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.&lt;/mark&gt;</code></a>。
+
+对于 `textStart`，我使用 `ECMAScript%20Modules%20in%20Web%20Workers`，然后是逗号 `,`，后跟 `ES%20Modules%20in%20Web%20Workers.` 作为 `textEnd`。当您单击 Chrome 等支持浏览器时，整个部分将突出显示并滚动到视图中：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/2yTYmKnjHTnqXkcmHF1F.png", alt="", width="400", height="343" %} <figcaption>文本片段滚动到视图中并突出显示。</figcaption></figure>
+
+现在您可能想知道我对 `textStart` 和 `textEnd` 的选择。实际上，每边只有两个字的略短的 URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript%20Modules,Web%20Workers.&lt;/mark&gt;</code></a> 也可以运行。将 `textStart` 和 `textEnd` 与之前的值进行比较。
+
+如果我更进一步，现在 `textStart` 和 `textEnd` 只使用一个词，您会发现我遇到了麻烦。URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=ECMAScript,Workers.&lt;/mark&gt;</code></a> 现在更短了，但是突出显示的文本片段不再是最初想要的片段。`Workers.` 第一次出现时停止突出显示，这是正确的，但并不是我想要的。问题是所需的部分不是由当前的单字 `textStart` 和 `textEnd` 值唯一标识的：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GGbbtHBpsoFyubnISyZw.png", alt="", width="400", height="342" %} <figcaption>非预期文本片段滚动到视图中并突出显示。</figcaption></figure>
+
+### `prefix-` 和 `-suffix`
+
+`textStart` 和 `textEnd` 使用足够长的值是获得唯一链接的一种解决方案。然而，在某些情况下，这是不可能的。附带说明一下，为什么我选择 Chrome 80 版本博客文章作为我的示例？答案是在这个版本中引入了文本片段：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yA1p3CijeDbTRwMys9Hq.png", alt="博客文章文本：文本 URL 片段。用户或作者现在可以使用 URL 中提供的文本片段链接到页面的特定部分。当页面加载后，浏览器将突出显示文本并将片段滚动到视图中。例如，下面的 URL 加载 'Cat' 的 wiki 页面并滚动到 `text` 参数中列出的内容。", width="800", height="200" %} <figcaption>文本片段公告博客文章摘录。</figcaption></figure>
+
+请注意，在上面的屏幕截图中，“Text“ 一词出现了四次。第四次以绿色代码字体书写。如果我想链接到这个特定的词，我会将 `textStart` 设置为 `text`。由于 “Text“ 一词只包含一个词，因此没有 `textEnd`。现在怎么办？URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=text&lt;/mark&gt;</code></a> 将匹配标题中出现的第一个词 “Text“：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nXxCskUwdCxwxejPSSZW.png", alt="", width="800", height="209" %} <figcaption>与出现的第一个 “Text“ 匹配的文本片段。</figcaption></figure>
+
+{% Aside 'caution' %} 请注意，文本片段匹配不区分大小写。{% endAside %}
+
+幸运的是有一个解决方案。在这种情况下，我可以指定 `prefix​-` 和 `-suffix`。绿色代码字体 “Text“ 前面的字词是 “Text“，后面的词是 “parameter”。出现的其他三个词 “Text“ 周围没有相同的词。有了这些知识，我可以调整之前的 URL 并添加 `prefix-` 和 `-suffix`。与其他参数一样，它们也需要进行百分比编码，并且可以包含多个词。<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=the-,text,-parameter&lt;/mark&gt;</code></a>。为了让解析程序清楚地识别 `prefix-` 和 `-suffix`，需要用破折号 `-` 将它们与 `textStart` 和可选的 `textEnd` 区分开。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/J3L5BVSMmzGY6xdkabP6.png", alt="", width="800", height="203" %} <figcaption>与预期出现位置的 “Text“ 匹配的文本片段。</figcaption></figure>
+
+### 完整语法
+
+文本片段的完整语法如下所示。（方括号表示可选参数。）所有参数的值都需要进行百分比编码。此要求对于破折号 `-`、&amp; 符号 `&` 和逗号 `,` 字符尤其重要，因为这样它们就不会被解释为文本指令语法的一部分。
+
+```bash
+#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
+```
+
+每个 `prefix-`、`textStart`、`textEnd` 和 `-suffix` 将只匹配一个[块级元素](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements#Elements)内的文本，但完整的 `textStart,textEnd` 范围*可以*跨多个块。例如，在以下示例中，`:~:text=The quick,lazy dog` 将无法匹配，因为起始字符串 "The quick" 没有出现在单个不间断的块级元素中：
+
+```html
+<div>
+  The
+  <div></div>
+  quick brown fox
+</div>
+<div>jumped over the lazy dog</div>
+```
+
+但它在以下示例中匹配：
+
+```html
+<div>The quick brown fox</div>
+<div>jumped over the lazy dog</div>
+```
+
+### 使用浏览器扩展创建文本片段 URL
+
+手动创建文本片段 URL 很枯燥，在确保它们是否唯一时尤其如此。如果您真的想要手工创建，规范中有一些提示并列出了[生成文本片段 URL](https://wicg.github.io/ScrollToTextFragment/#generating-text-fragment-directives) 的确切步骤。我们提供了一个名为 [Link to Text Fragment](https://github.com/GoogleChromeLabs/link-to-text-fragment) 的开源浏览器扩展，支持您通过选择任何文本，然后在上下文菜单中单击“将链接复制到所选文本”，来链接到此文本。此扩展可用于以下浏览器：
+
+- [适用于 Google Chrome 的文本片段的链接](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)
+- [适用于 Microsoft Edge 的文本片段的链接](https://microsoftedge.microsoft.com/addons/detail/link-to-text-fragment/pmdldpbcbobaamgkpkghjigngamlolag)
+- [适用于 Mozilla Firefox 的文本片段的链接](https://addons.mozilla.org/firefox/addon/link-to-text-fragment/)
+- [适用于 Apple Safari 的文本片段的链接](https://apps.apple.com/app/link-to-text-fragment/id1532224396)
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASLtFCPoHvyTKrAtKAv4.png", alt="", width="800", height="500" %} <figcaption> <a href="https://github.com/GoogleChromeLabs/link-to-text-fragment">文本片段链接</a>浏览器扩展。</figcaption></figure>
+
+### 一个 URL 中有多个文本片段
+
+请注意，一个 URL 中可以出现多个文本片段。特定的文本片段需要用 &amp; 字符 `&` 分隔。以下是一个包含三个文本片段的示例链接：<a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet"><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet&lt;mark class="highlight-line highlight-line-active"&gt;</code></a>。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ffsq7aoSoVd9q6r5cquY.png", alt="", width="800", height="324" %} <figcaption>一个 URL 中有三个文本片段。</figcaption></figure>
+
+### 混合使用元素和文本片段
+
+传统元素片段可以与文本片段组合使用。将两者放在同一个 URL 中是完全可以的，例如，在页面上的原始文本发生更改时提供有效回退，以便文本片段不再匹配。链接到*在[产品论坛](http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs)中提供反馈*部分的 URL <a href="https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums."><code>https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html&lt;mark class="highlight-line highlight-line-active"&gt;#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.&lt;/mark&gt;</code></a> 包含一个元素片段 (`HTML1`) 和一个文本片段 (`text=Give%20us%20feedback%20in%20our%20Product%20Forums.`)：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/JRKCM6Ihrq8sgRZRiymr.png", alt="", width="237", height="121" %} <figcaption>链接到元素片段和文本片段两者。</figcaption></figure>
+
+### 片段指令
+
+我还没有解释语法中的一个元素：片段指令 `:~:`。为了避免与上述现有 URL 元素片段的兼容性问题，[文本片段规范](https://wicg.github.io/ScrollToTextFragment/)引入了片段指令。片段指令是由代码序列 `:~:` 分隔的 URL 片段的一部分。它为用户代理指令保留，例如 `text=`，将在加载期间从 URL 中去除，以便作者脚本无法直接与其交互。用户代理指令也称为*指令*。在此具体案例中，`text=` 因此称为*文本指令*。
+
+### 功能检测
+
+要检测支持，请测试 `document` 上的 `fragmentDirective` 属性。片段指令是一种让 URL 指定指向浏览器而非文档的指令的机制。它旨在避免与作者脚本直接交互，以便未来可以添加用户代理指令，而不必担心对现有内容进行重大更改。未来添加内容的一个可能的示例是翻译提示。
+
+```js
+if ('fragmentDirective' in document) {
+  //支持文本片段
+}
+```
+
+{% Aside %} 从 Chrome 80 到 Chrome 85，在 `Location.prototype` 中定义了 `fragmentDirective` 属性。有关此更改的详细信息，请参阅 [WICG/scroll-to-text-fragment#130](https://github.com/WICG/scroll-to-text-fragment/issues/130)。{% endAside %}
+
+功能检测主要适用于动态生成链接的情况（例如由搜索引擎生成），以避免将文本片段链接提供给不支持它们的浏览器。
+
+### 样式化文本片段
+
+默认情况下，浏览器样式化文本片段的方式与样式化 [`mark`](https://developer.mozilla.org/docs/Web/HTML/Element/mark) 相同（`mark`  通常是黄底黑字，即 CSS [系统颜色](https://developer.mozilla.org/docs/Web/CSS/color_value#system_colors)）。用户代理样式表包含如下所示的 CSS：
+
+```css
+:root::target-text {
+  color: MarkText;
+  background: Mark;
+}
+```
+
+如您所见，浏览器公开了一个伪选择器 [`::target-text`](https://drafts.csswg.org/css-pseudo/#selectordef-target-text)，您可以使用它来自定义应用的突出显示。例如，您可以将文本片段设计为红底黑字。与往常一样，请务必[检查颜色对比度](https://developer.chrome.com/docs/devtools/accessibility/reference/#contrast)，这样您的重写样式就不会导致可访问性问题，并确保突出显示实际上在视觉上与其余内容不同。
+
+```css
+:root::target-text {
+  color: black;
+  background-color: red;
+}
+```
+
+### 可修补性
+
+文本片段功能可以在一定程度上进行 polyfill。我们提供 [polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill)，它由[扩展](https://github.com/GoogleChromeLabs/link-to-text-fragment)内部使用，适用于不提供对文本片段的内置支持的浏览器（此功能在 JavaScript 中实现的浏览器）。
+
+### 以编程方式生成文本片段链接
+
+[polyfill](https://github.com/GoogleChromeLabs/text-fragments-polyfill) 包含一个文件 `fragment-generation-utils.js`，您可以导入并用它来生成文本片段的链接。以下代码示例进行了概述：
+
+```js
+const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
+const result = generateFragment(window.getSelection());
+if (result.status === 0) {
+  let url = `${location.origin}${location.pathname}${location.search}`;
+  const fragment = result.fragment;
+  const prefix = fragment.prefix ?
+    `${encodeURIComponent(fragment.prefix)}-,` :
+    '';
+  const suffix = fragment.suffix ?
+    `,-${encodeURIComponent(fragment.suffix)}` :
+    '';
+  const textStart = encodeURIComponent(fragment.textStart);
+  const textEnd = fragment.textEnd ?
+    `,${encodeURIComponent(fragment.textEnd)}` :
+    '';
+  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
+  console.log(url);
+}
+```
+
+### 获取文本片段以进行分析
+
+许多站点使用片段进行路由，这就是浏览器去除文本片段以免破坏这些页面的原因。例如，[需要](https://github.com/WICG/scroll-to-text-fragment/issues/128)向页面公开文本片段链接以进行分析，但建议的解决方案尚未实施。作为目前的解决方法，您可以使用以下代码来提取所需的信息。
+
+```js
+new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
+```
+
+### 安全
+
+仅在作为[用户激活](https://html.spec.whatwg.org/multipage/interaction.html#tracking-user-activation)结果的完整（非同一页面）导航上调用文本片段指令。此外，源自与目的地不同的来源的导航将需要在 [`noopener`](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) 上下文中进行导航，以便已知目的地页面被充分隔离。文本片段指令仅适用于主框架。这意味着不会在 iframe 内搜索文本，且 iframe 导航不会调用文本片段。
+
+### 隐私
+
+无论是否在页面上找到文本片段，文本片段规范的实现都不会泄漏，这一点很重要。虽然元素片段完全在原始页面作者的控制之下，但任何人都可以创建文本片段。请记住，在上面的示例中，无法链接到 *Web Workers 中的 ECMAScript 模块*标题，因为 `<h1>` 没有 `id`，但是任何人（包括我）如何只通过精心制作文本片段来链接到任何地方?
+
+想象一下，我运行了一个邪恶的广告网络 `evil-ads.example.com`。再想象一下，在我的一个广告 iframe 中，我在 `dating.example.com` 中动态地创建了一个隐藏的跨源 iframe，当用户与广告互动时，其具有一个文本片段 URL <code>dating.example.com&lt;mark class="highlight-line highlight-line-active"&gt;#:~:text=Log%20Out&lt;/mark&gt;</code>。如果找到文本 "Log Out"，我知道受害者当前已登录到 `dating.example.com`，我可以使用它进行用户分析。由于一个简单的文本片段实现可决定成功的匹配应导致焦点切换，因此在 `evil-ads.example.com` 上，我可以监听 `blur` 事件，从而知道匹配何时发生。在 Chrome 中，我们已经实现了文本片段，以防止上述情况发生。
+
+另一种攻击可能是基于滚动位置利用网络流量。假设我可以访问受害者的网络流量日志，例如以公司内网管理员身份。现在想象一下，有一个很长的人力资源文档 *如果您遭受了……该怎么办*，以及一个诸如*倦怠*、*焦虑*等情况的列表。我可以在列表中的每个项目旁边放置一个跟踪像素。如果我确定加载文档与加载例如*倦怠*项目旁边的跟踪像素在时间上同时发生，那么我可以以内部网管理员身份确定员工单击了带有 `:~:text=burn%20out` 的文本片段链接，员工可能认为该链接是机密的，任何人都看不到。由于可以使用此示例作为开始，且由于利用它需要满足*非常*具体的先决条件，因此 Chrome 安全团队评估认为在导航上实现滚动的风险是可管理的。其他用户代理可以决定改为显示手动滚动 UI 元素。
+
+对于希望退出的站点，Chromium 支持他们可以发送的[文档策略](https://wicg.github.io/document-policy/)标题，这样用户代理就不会处理文本片段 URL。
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+## 禁用文本片段
+
+禁用该功能的最简单方法是使用可以注入 HTTP 响应标头（例如 [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj)（不是 Google 产品））的扩展，以插入响应（*不是*请求）标头的扩展，如下所示：
+
+```bash
+Document-Policy: force-load-at-top
+```
+
+另一种更复杂的退出方式是使用企业设置 [`ScrollToTextFragmentEnabled`](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ScrollToTextFragmentEnabled)。要在 macOS 上执行此操作，请将以下命令粘贴到终端中。
+
+```bash
+defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
+```
+
+在 Windows 上，请按照 [Google Chrome Enterprise 帮助](https://support.google.com/chrome/a/answer/9131254?hl=en)支持站点上的文档进行操作。
+
+{% Aside 'warning' %}只有在您知道自己在做什么时才尝试这样做。{% endAside %}
+
+## 网络搜索中的文本片段
+
+对于某些搜索，搜索引擎 Google 会使用来自相关网站的内容代码段提供快速答案或摘要。当以问题的形式进行搜索时，这些*精选代码段*最有可能出现。单击精选代码段会使用户直接转到源网页上的精选代码段文本。这要归功于自动创建的文本片段 URL。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KbZgnGxZOOymLxYPZyGH.png", alt="", width="800", height="451" %} <figcaption>显示精选代码段的 Google 搜索引擎结果页面。状态栏显示文本片段 URL。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/4Q7zk9xBnb2uw8GRaLnU.png", alt="", width="800", height="451" %} <figcaption>单击后，页面的相关部分将滚动到视图中。</figcaption></figure>
+
+## 结论
+
+文本片段 URL 是一个强大的功能，可以链接到网页上的任意文本。学术界可以使用它来提供高度准确的引文或参考链接。搜索引擎可以使用它来深层链接到页面上的文本结果。社交网站可以使用它让用户分享网页的特定段落，而不是无法访问的屏幕截图。我希望您开始[使用文本片段 URL](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%%20of%20a%20cat's%20diet) 并像我一样发现它很有用。请务必安装[文本片段链接](https://github.com/GoogleChromeLabs/link-to-text-fragment)浏览器扩展。
+
+## 相关链接
+
+- [规范草案](https://wicg.github.io/scroll-to-text-fragment/)
+- [TAG 审阅](https://github.com/w3ctag/design-reviews/issues/392)
+- [Chrome 平台状态条目](https://chromestatus.com/feature/4733392803332096)
+- [Chrome 跟踪错误](https://crbug.com/919204)
+- [发送意图线程](https://groups.google.com/a/chromium.org/d/topic/blink-dev/zlLSxQ9BA8Y/discussion)
+- [WebKit-Dev 线程](https://lists.webkit.org/pipermail/webkit-dev/2019-December/030978.html)
+- [Mozilla 标准定位线程](https://github.com/mozilla/standards-positions/issues/194)
+
+## 致谢
+
+文本片段由 [Nick Burris](https://github.com/nickburris) 和 [David Bokan](https://github.com/bokand) 实现和提供规范，[Grant Wang](https://github.com/grantjwang) 也做出了贡献。感谢 [Joe Medley](https://github.com/jpmedley) 提供全文审阅。主图作者：[Greg Rakozy](https://unsplash.com/@grakozy) 来源：[Unsplash](https://unsplash.com/photos/oMpAz-DN-9I)。
diff --git a/src/site/content/zh/blog/trust-tokens/index.md b/src/site/content/zh/blog/trust-tokens/index.md
new file mode 100644
index 00000000000..797bbfd91c0
--- /dev/null
+++ b/src/site/content/zh/blog/trust-tokens/index.md
@@ -0,0 +1,232 @@
+---
+title: 信任令牌入门
+subhead: 信任令牌 (Trust Token) 是一种新 API。利用此 API，网站可以将有限数量的信息从一个浏览上下文传送到另一个上下文（例如，跨站），这样，无需被动跟踪即可防止欺诈。
+authors:
+  - samdutton
+date: 2020-06-22
+updated: 2021-12-10
+hero: image/admin/okxi2ttRG3h1Z4F3cylI.jpg
+thumbnail: image/admin/cTo0l2opcfNxg1TEjxSg.jpg
+alt: 手持令牌的黑白照片
+tags:
+  - blog
+  - privacy
+  - security
+feedback:
+  - api
+---
+
+{% Aside  'caution' %} **⚠️ 警告：您可能需要更新应用程序！**
+
+**TrustTokenV3** 是为 Chromium 的信任令牌实现的向后不兼容更改的集合。这些更改已经在 Chrome 92 中实施，从而在 2021 年 7 月底发布了 Chrome 稳定版。
+
+如果您还没有更新，则需要更新[测试 API](https://www.chromestatus.com/feature/5078049450098688) 的现有应用程序。
+
+了解更多：[什么是 TrustTokenV3？](https://bit.ly/what-is-trusttokenv3){% endAside %}
+
+<br><br>
+
+{% YouTube id='bXB1Iwq6Eq4' %}
+
+## 概述
+
+利用信任令牌，来源能够向信任的用户颁发加密令牌。用户浏览器会存储令牌。随后，浏览器可以在其他上下文中使用令牌来评估用户的真实性。
+
+利用信任令牌 API 可以将用户在一个上下文中的信任传递到另一个上下文中，而无需识别用户或关联两个身份。
+
+您可以按照我们的[演示](https://trust-token-demo.glitch.me)试用该 API，并在 Chrome DevTools **网络**和**应用程序**选项卡中[检查令牌](https://developers.google.com/web/updates/2021/01/devtools#trust-token)。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/krrI292OLd6awb4dxkN0.jpg", alt="“Chrome DevTools 网络”选项卡中显示信任令牌的截图。", width="800", height="584" %}<figcaption> <b>Chrome DevTools 网络</b>选项卡中的信任令牌。</figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cwR9JdoVo1M4VDovP2oM.jpg", alt="Chrome DevTools 应用程序选项卡中显示信任令牌的屏幕截图。", width="800", height="584" %}<figcaption> <b>Chrome DevTools 应用程序</b>选项卡中的信任令牌。</figcaption></figure>
+
+{% Aside %}隐私沙盒是一系列满足第三方用例的提案，无需第三方 Cookie 或其他跟踪机制。有关所有提案的概述，请参阅[深入了解隐私沙盒](/digging-into-the-privacy-sandbox)。
+
+**本提案需要您的反馈！**如果希望发表意见，请在[信任令牌解释器](https://github.com/WICG/trust-token-api)存储库中[创建问题](https://github.com/WICG/trust-token-api/issues/new)。{% endAside %}
+
+## 为什么需要信任令牌？
+
+Web 需要建立信任信号的方法，从而证实用户的真实身份，而不至于被伪装成人类的机器人或欺骗真人或服务的恶意第三方欺诈。欺诈保护对广告商、广告提供商和 CDN 尤为重要。
+
+遗憾的是，许多现有衡量和传播可信度的机制（例如，确定与站点的交互是否来自真人）利用了也可以用于指纹识别的技术。
+
+{% Aside 'key-term' %}利用**指纹识别**，网站可以通过获取有关用户设备、操作系统、浏览器设置（如语言首选项、[用户代理](https://developer.mozilla.org/docs/Web/API/NavigatorID/userAgent)和可用字体）或设备状态变化的数据来识别和跟踪个人用户。在服务器上，通过检查请求标头即可实现，或者在客户端上，使用 JavaScript 也可以实现。
+
+指纹识别使用用户不会意识到且无法控制的机制。[Panopticlick](https://panopticlick.eff.org/) 和 [amiunique.org](https://amiunique.org/) 等网站展示了如何结合指纹数据来识别您的个人身份。{% endAside %}
+
+API 必须保护隐私，从而使信任能够跨站点传播，这样就无需跟踪单个用户。
+
+## 信任令牌提案中有哪些内容？
+
+网络要建立信任信号才能检测欺诈和垃圾邮件。一种实现方法是利用全局跨站点的各用户标识符来跟踪浏览。对于保护隐私的 API，这是不可接受的。
+
+提案[**解释器**](https://github.com/WICG/trust-token-api#overview)说明：
+
+<blockquote>
+<p>该 API 为“隐私通行证”形式的加密令牌提出了一个全新的按来源存储区域，在第三方上下文中可以访问这些令牌。这些令牌是非个性化的，不能用于跟踪用户，但经过了加密签名，因此无法伪造。</p>
+<p>当来源位于他们信任用户的上下文中时，他们可以向浏览器签发一批令牌，随后在用户不了解或不太信任的上下文中可以“使用”这些令牌。至关重要的是，令牌彼此不加区分，以防网站通过它们跟踪用户。</p>
+<p>我们进一步为浏览器提出了一种扩展机制，可以使用绑定到特定令牌赎回的密钥对传出请求进行签名。</p>
+</blockquote>
+
+## 示例 API 用法
+
+以下内容改编自 [API 解释器提供的示例代码](https://github.com/WICG/trust-token-api#sample-api-usage)。
+
+{% Aside %}本文中的代码使用了自 Chrome 88 以来推出的更新语法。{% endAside %}
+
+假设用户访问一个新闻网站 (`publisher.example`)，该网站嵌入了第三方广告网络 (`foo.example`) 的广告。用户之前曾使用过颁发信任令牌的社交媒体网站 (`issuer.example`)。
+
+下面的步骤介绍信任令牌的工作原理。
+
+**1.**用户访问 `issuer.example` 并执行让站点相信他们是真人的操作，例如帐户活动或通过验证码质询。
+
+**2.** `issuer.example` 验证用户是真人，并运行以下 JavaScript 来向用户的浏览器颁发信任令牌：
+
+```js
+fetch('https://issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request',
+    issuer: 'https://issuer.example'
+  }
+}).then(...)
+```
+
+**3.** 用户的浏览器存储信任令牌，并将其与 `issuer.example` 相关联。
+
+**4.** 一段时间后，用户访问了 `publisher.example`。
+
+**5.** `publisher.example` 想知道用户是否是真人。`publisher.example` 信任 `issuer.example`，因此，他们会检查用户的浏览器是否有来自该来源的有效令牌：
+
+```js
+document.hasTrustToken('https://issuer.example');
+```
+
+**6.** 如果返回解析为 `true` 的值，则意味着用户有来自 `issuer.example` 的令牌，因此，`publisher.example` 可以尝试赎回令牌：
+
+```js
+fetch('https://issuer.example/trust-token', {
+trustToken: {
+  type: 'token-redemption',
+  issuer: 'https://issuer.example',
+  refreshPolicy: {none, refresh}
+}
+}).then(...)
+```
+
+以上代码的作用：
+
+1. 赎回者 `publisher.example` 请求赎回。
+2. 如果赎回成功，则颁发者 `issuer.example` 返回赎回记录，这表明它们曾向浏览器颁发有效令牌。
+
+**7.** `fetch()` 返回的值得到解析后，后续资源请求中就可以使用赎回记录：
+
+```js
+fetch('https://foo.example/get-content', {
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['https://issuer.example', ...]
+  }
+});
+```
+
+以上代码的作用：
+
+1. 赎回记录作为请求标头 `Sec-Redemption-Record` 包含在内。
+2. `foo.example` 收到赎回记录，并且可以通过解析该记录来确定 `issuer.example` 是否认为该用户是人类。
+3. `foo.example` 进行相应地响应。
+
+{% Details %} {% DetailsSummary %} 网站如何判断是否可以信任您？{% endDetailsSummary %}您可能在电子商务网站上有购物记录、定位平台上的签到记录或银行的账户记录。发行者还可能会考虑其他因素，例如您获得账户的时间或其他交互（例如验证码或表单提交），从而让发行者更相信您是真人。 {% endDetails %}
+
+### 信任令牌颁发
+
+如果信任令牌颁发者（例如 `issuer.example`）认为用户值得信赖，则颁发者可以使用 `trustToken` 参数 `fetch()` 获取用户的信任令牌：
+
+```js
+fetch('issuer.example/trust-token', {
+  trustToken: {
+    type: 'token-request'
+  }
+}).then(...)
+```
+
+它使用[新的加密原语](https://eprint.iacr.org/2020/072.pdf)调用[隐私通行证](https://privacypass.github.io/)发行协议的扩展：
+
+1. 生成一组称为 *Nonce* 的伪随机数。
+
+2. 屏蔽 Nonce（对其进行编码，使发行者无法查看其内容）并将其附加到 `Sec-Trust-Token` 标头的请求中。
+
+3. 向提供的端点发送 POST 请求。
+
+端点使用[屏蔽的令牌](https://en.wikipedia.org/wiki/Blind_signature)（屏蔽 Nounce 上的签名）进行响应，然后解除屏蔽令牌，并由浏览器将其与相关的 Nonce 一起存储为内部信任令牌。
+
+### 信任令牌赎回
+
+发布者站点（例如上例中的 `publisher.example`）可以检查是否有可供用户使用的信任令牌：
+
+```js
+const userHasTokens = await document.hasTrustToken('issuer.example/trust-token');
+```
+
+如果有可用令牌，则发布者站点可以通过赎回令牌来获得赎回记录：
+
+```js
+fetch('issuer.example/trust-token', {
+  ...
+  trustToken: {
+    type: 'token-redemption',
+    refreshPolicy: 'none'
+  }
+  ...
+}).then(...)
+```
+
+通过使用 `fetch()` 调用，发布者可以在需要信任令牌（例如发表评论、点赞页面或投票）的请求中包含赎回记录，代码如下：
+
+```js
+fetch('https://foo.example/post-comment', {
+  ...
+  trustToken: {
+    type: 'send-redemption-record',
+    issuers: ['issuer.example/trust-token', ...]
+  }
+  ...
+}).then(...);
+```
+
+对话记录作为 `Sec-Redemption-Record` 请求标头包含在内。
+
+{% Aside %} 信任令牌只能通过 Fetch、XHR 和 HTML `<iframe>` 元素的选项访问：<br>不能直接访问。{% endAside%}
+
+### 隐私注意事项
+
+根据设计，令牌“不可关联”。颁发者可以了解有关用户访问哪些站点的汇总信息，但不能将发行与赎回关联起来：当用户赎回令牌时，颁发者无法将该令牌与它创建的其他令牌区分开。但是，信任令牌目前并不是凭空存在的：目前，颁发者可以通过其他方式（理论上）跨站点加入用户的身份，例如第三方 Cookie 和变相跟踪技术。站点在规划支持时务必了解这种生态系统转变。这是许多隐私沙盒 API 转变的一个常见方面，在此不再进一步讨论。
+
+### 安全注意事项
+
+**信任令牌耗尽：**恶意站点可能会故意耗尽用户向特定颁发者获取的令牌。多种缓解措施可以应对此类攻击，例如让颁发者一次提供多个令牌，这样，用户便有足够的令牌来确保浏览器在每个顶级页面视图中只赎回一个令牌。
+
+**双重支付预防：**恶意软件可能会尝试访问用户的所有信任令牌。但是，令牌会逐渐被耗尽，因为每次赎回都会发送给同一令牌颁发者，而该令牌颁发者可以验证每个令牌仅使用了一次。为了降低风险，颁发者还可以减少签署的令牌数量。
+
+### 请求机制
+
+可能可以允许在 `fetch()` 之外发送赎回记录，例如，对于导航请求。站点还可以在 HTTP 响应标头中包含颁发者数据，从而在加载页面的同时支持赎回令牌。
+
+**重申：本提案需要您的反馈！**如果您希望发表意见，请在信任令牌[解释器存储库](https://github.com/WICG/trust-token-api)上[创建问题](https://github.com/WICG/trust-token-api/issues/new)。
+
+## 了解更多
+
+- [信任令牌演示](https://trust-token-demo.glitch.me)
+- [Chrome 来源试用入门](https://developer.chrome.com/blog/origin-trials/)
+- [深入了解隐私沙盒](/digging-into-the-privacy-sandbox/)
+- [信任令牌 API 解释器](https://github.com/WICG/trust-token-api)
+- [Chromium 项目：信任令牌 API](https://sites.google.com/a/chromium.org/dev/updates/trust-token)
+- [实现意图：信任令牌 API](https://groups.google.com/a/chromium.org/g/blink-dev/c/X9sF2uLe9rA/m/1xV5KEn2DgAJ)
+- [Chrome 平台状态](https://www.chromestatus.com/feature/5078049450098688)
+- [隐私通行证](https://privacypass.github.io/)
+- [隐私通行证的扩展](https://eprint.iacr.org/2020/072.pdf)
+
+---
+
+感谢帮助编写和审阅此博文的所有人。
+
+照片由[ZSun Fu](https://unsplash.com/photos/b4D7FKAghoE)在[Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)上拍摄。
diff --git a/src/site/content/zh/blog/trusted-types/index.md b/src/site/content/zh/blog/trusted-types/index.md
new file mode 100644
index 00000000000..bf9d462e69f
--- /dev/null
+++ b/src/site/content/zh/blog/trusted-types/index.md
@@ -0,0 +1,215 @@
+---
+title: 使用 Trusted Types 防止基于 DOM 的跨站点脚本漏洞
+subhead: 减小应用程序的 DOM XSS 攻击面。
+authors:
+  - koto
+date: 2020-03-25
+hero: image/admin/3Mgu37qU0P4fVdI4NTxM.png
+alt: 演示跨站点脚本漏洞的代码片段。
+description: 推出 Trusted Types：一个用于在现代 Web 应用程序中防止基于 DOM 的跨站点脚本的浏览器 API。
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 为什么应关注？
+
+基于 DOM 的跨站点脚本 (DOM XSS) 是最常见的 Web 安全漏洞之一，并且您的应用程序很容易将其引入。[Trusted Types](https://github.com/w3c/webappsec-trusted-types) 默认对危险的 Web API 函数加以保护，从而提供了编写、安全审核和维护无 DOM XSS 漏洞的应用程序的工具。Chrome 83 支持 Trusted Types，其他浏览器可以使用 [polyfill](https://github.com/w3c/webappsec-trusted-types#polyfill)。有关最新的跨浏览器支持信息，请参阅[浏览器兼容性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types#browser_compatibility)。
+
+{% Aside 'key-term' %}当来自用户控制的*源*的数据（例如用户名或从 URL 片段获取的重定向 URL）到达*接收器*（`eval()` 等函数或 `.innerHTML` 等属性 setter）时，会触发基于 DOM 的跨站点脚本，从而可执行任意 JavaScript 代码。{% endAside %}
+
+## 背景
+
+多年来， [DOM XSS](https://owasp.org/www-community/attacks/xss/) 一直是最普遍和最危险的 Web 安全漏洞之一。
+
+有两组不同的跨站点脚本。一些 XSS 漏洞是服务器端代码引起的，这些代码不安全地创建了形成网站的 HTML 代码。另外一些漏洞的根本原因在于客户端，其中的 JavaScript 代码对用户控制的内容调用了危险的函数。
+
+为了[防止服务器端 XSS](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)，不要通过连接字符串来生成 HTML，而是使用安全的上下文自动转义模板库。对于不可避免发生的错误，使用[基于 nonce 的内容安全策略](https://csp.withgoogle.com/docs/strict-csp.html)来进一步缓解。
+
+现在，浏览器还可以通过 [Trusted Types](https://bit.ly/trusted-types) 帮助防止客户端（也称为基于 DOM）XSS。
+
+## API 简介
+
+Trusted Types 的工作原理是锁定以下有风险的接收器函数。您可能已经认出其中一些，因为浏览器供应商和 [Web 框架](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)已经出于安全原因引导您避免使用这些功能。
+
+- **脚本操作**：<br> [`<script src>`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-src) 和设置 [`<script>`](https://developer.mozilla.org/docs/Web/HTML/Element/script) 元素的文本内容。
+
+- **从字符串生成 HTML** ：<br>
+
+    [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)、[`outerHTML`](https://developer.mozilla.org/docs/Web/API/Element/outerHTML)、[`insertAdjacentHTML`](https://developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML)、[`<iframe> srcdoc`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#attr-srcdoc)、[`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write)、[`document.writeln`](https://developer.mozilla.org/docs/Web/API/Document/writeln) 和 [`DOMParser.parseFromString`](https://developer.mozilla.org/docs/Web/API/DOMParser#DOMParser.parseFromString)
+
+- **执行插件内容**：<br> [`<embed src>`](https://developer.mozilla.org/docs/Web/HTML/Element/embed#attr-src)、[`<object data>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-data) 和 [`<object codebase>`](https://developer.mozilla.org/docs/Web/HTML/Element/object#attr-codebase)
+
+- **运行时 JavaScript 代码编译**：<br> `eval`、`setTimeout`、`setInterval`、`new Function()`
+
+Trusted Types 要求您在将数据传递给上述接收器函数之前对其进行处理。仅使用字符串将失败，因为浏览器不知道数据是否可信：
+
+{% Compare 'worse' %}
+
+```javascript
+anElement.innerHTML = location.href;
+```
+
+{% CompareCaption %} 启用 Trusted Types 后，浏览器会抛出 *TypeError*，并阻止将 DOM XSS 接收器与字符串一起使用。{% endCompareCaption %}
+
+{% endCompare %}
+
+要表示数据已被安全处理，请创建一个特殊对象 - Trusted Type。
+
+{% Compare 'better' %}
+
+```javascript
+anElement.innerHTML = aTrustedHTML;
+```
+
+{% CompareCaption %} 启用 Trusted Types 后，浏览器对于需要 HTML 片段的接收器将接受 `TrustedHTML` 对象，对于其他敏感接收器接受 `TrustedScript` 和 `TrustedScriptURL` 对象。{% endCompareCaption %}
+
+{% endCompare %}
+
+Trusted Types 大大减小了应用程序的 DOM XSS [攻击面](https://en.wikipedia.org/wiki/Attack_surface)。它简化了安全审核，并允许您在浏览器中在运行时编译、lint 或捆绑代码时强制执行基于类型的安全检查。
+
+## 如何使用 Trusted Types
+
+### 准备内容安全策略违规报告
+
+您可以部署报告收集器（例如开源的 [go-csp-collector](https://github.com/jacobbednarz/go-csp-collector)），或使用具有同等功能的商业工具。还可以在浏览器中调试违规：
+
+```js
+window.addEventListener('securitypolicyviolation',
+    console.error.bind(console));
+```
+
+### 添加仅报告 CSP 标头
+
+将以下 HTTP 响应标头添加到要迁移到 Trusted Types 的文档。
+
+```text
+Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+现在，所有违规都已报告给 `//my-csp-endpoint.example`，但网站继续工作。下一节将解释 `//my-csp-endpoint.example` 的工作原理。
+
+{% Aside 'caution' %} Trusted Types 仅在 HTTPS 和`localhost` 等[安全上下文](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts)中可用。{% endAside %}
+
+### 识别 Trusted Types 违规
+
+从现在开始，每次 Trusted Types 检测到违规时，都会向配置的 `report-uri` 发送报告。例如，当应用程序将一个字符串传递给 `innerHTML` 时，浏览器会发送以下报告：
+
+```json/6,8,10
+{
+"csp-report": {
+    "document-uri": "https://my.url.example",
+    "violated-directive": "require-trusted-types-for",
+    "disposition": "report",
+    "blocked-uri": "trusted-types-sink",
+    "line-number": 39,
+    "column-number": 12,
+    "source-file": "https://my.url.example/script.js",
+    "status-code": 0,
+    "script-sample": "Element innerHTML <img src=x"
+}
+}
+```
+
+这表示在 `https://my.url.example/script.js` 的第 39 行，使用以 `<img src=x` 开头的字符串调用了  `innerHTML`。此信息应该可以帮助您缩小可能会引入 DOM XSS 并需要更改的代码范围。
+
+{% Aside %}大多数此类违规还可以通过对代码库运行代码 linter 或[静态代码检查器](https://github.com/mozilla/eslint-plugin-no-unsanitized)来进行检测。这有助于快速识别大量违规。
+
+也就是说，您还应该分析 CSP 违规，因为这些违规会在执行不合规的代码时触发。{% endAside %}
+
+### 修复违规
+
+有几个选项用于修复 Trusted Type 违规。您可以[删除违规代码](#remove-the-offending-code)，[使用库](#use-a-library)，[创建 Trusted Type 策略](#create-a-trusted-type-policy)，或者[创建默认策略](#create-a-default-policy)作为最后手段。
+
+#### 重写违规代码
+
+也许不再需要不合规的功能，或者以现代方式（不使用易出错的函数）重写这些功能？
+
+{% Compare 'worse' %}
+
+```javascript
+el.innerHTML = '<img src=xyz.jpg>';
+```
+
+{% endCompare %}
+
+{% Compare 'better' %}
+
+```javascript
+el.textContent = '';
+const img = document.createElement('img');
+img.src = 'xyz.jpg';
+el.appendChild(img);
+```
+
+{% endCompare %}
+
+#### 使用库
+
+一些库已经生成了可以传递给接收器函数的 Trusted Types。例如，可以使用 [DOMPurify](https://github.com/cure53/DOMPurify) 清理 HTML 片段，删除 XSS 有效载荷。
+
+```javascript
+import DOMPurify from 'dompurify';
+el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});
+```
+
+DOMPurify [支持 Trusted Types](https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types)，并将返回包装在 `TrustedHTML` 对象中的经过清理的 HTML，以使浏览器不会产生违规。{% Aside 'caution' %} 如果 DOMPurify 中的清理逻辑有错误，您的应用程序可能仍然存在 DOM XSS 漏洞。Trusted Types 会强制您*以某种方式*处理值，但尚未定义确切的处理规则，以及它们是否安全。{% endAside %}
+
+#### 创建 Trusted Type 策略
+
+有时，无法删除功能，并且没有库来清理值和创建 Trusted Type。在这种情况下，请自行创建 Trusted Type 对象。
+
+为此，首先创建一个[策略](https://w3c.github.io/webappsec-trusted-types/dist/spec/#policies-hdr)。策略是 Trusted Types 的工厂，会对其输入强制执行某些安全规则：
+
+```javascript/2
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: string => string.replace(/\</g, '&lt;')
+  });
+}
+```
+
+此代码创建了一个名为 `myEscapePolicy` 的策略，该策略可以通过其 `createHTML()` 函数生成 `TrustedHTML` 对象。所定义的规则将对 `<`字符进行 HTML 转义，以防止创建新的 HTML 元素。
+
+按如下方式使用策略：
+
+```javascript
+const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
+console.log(escaped instanceof TrustedHTML);  // true
+el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)>'
+```
+
+{% Aside %} 虽然传递给 `trustedTypes.createPolicy()` 的 JavaScript 函数 `createHTML()` 返回一个字符串，但 `createPolicy()` 返回一个策略对象，该对象将返回值包装为正确的类型 - 在本例中为 `TrustedHTML`。 {% endAside %}
+
+#### 使用默认策略
+
+有时无法更改出错的代码。例如，如果从 CDN 加载第三方库，就会出现这种情况。在这种情况下，请使用[默认策略](https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-hdr)：
+
+```javascript
+if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
+  trustedTypes.createPolicy('default', {
+    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
+  });
+}
+```
+
+只要在仅接受 Trusted Type 的接收器中使用字符串，就会使用名为 `default` 的策略。{% Aside 'gotchas' %} 应尽量少用默认策略，而是首选重构应用程序来使用常规策略。这样做会鼓励在设计中让安全规则接近它们处理的数据，而且您拥有最多的上下文来正确地清理值。{% endAside %}
+
+### 切换到强制执行内容安全策略
+
+当应用程序不再产生违规时，可以开始强制执行 Trusted Types：
+
+```text
+Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
+```
+
+瞧！现在，无论 Web 应用程序有多复杂，唯一可能引入 DOM XSS 漏洞的是您的某个策略中的代码 - 您可以通过[限制策略创建](https://w3c.github.io/webappsec-trusted-types/dist/spec/#trusted-types-csp-directive)来进一步锁定该漏洞。
+
+## 进阶阅读
+
+- [Trusted Types GitHub](https://github.com/w3c/webappsec-trusted-types)
+- [W3C 规范草案](https://w3c.github.io/webappsec-trusted-types/dist/spec/)
+- [常见问题解答](https://github.com/w3c/webappsec-trusted-types/wiki/FAQ)
+- [集成](https://github.com/w3c/webappsec-trusted-types/wiki/Integrations)
diff --git a/src/site/content/zh/blog/usb/index.md b/src/site/content/zh/blog/usb/index.md
new file mode 100644
index 00000000000..09383189ae0
--- /dev/null
+++ b/src/site/content/zh/blog/usb/index.md
@@ -0,0 +1,241 @@
+---
+title: 在 Web 上访问 USB 设备
+subhead: |2-
+
+  WebUSB API 通过将 USB 引入 Web 使 USB 更安全、更易于使用。
+authors:
+  - beaufortfrancois
+date: 2016-03-30
+updated: 2021-02-23
+hero: image/admin/hhnhxiNuRWMfGqy4NSaH.jpg
+thumbnail: image/admin/RyaGPB8fHCuuXUc9Wj9Z.jpg
+alt: Arduino 微型板照片
+description: |2
+
+  WebUSB API 通过将 USB 引入 Web 使 USB 更安全、更易于使用。
+tags:
+  - blog
+  - capabilities
+  - devices
+feedback:
+  - api
+stack_overflow_tag: webusb
+---
+
+如果我简单地说“USB”，您很有可能会立即想到键盘、鼠标、音频、视频和存储设备。您说得没错，但您会发现还有一些其他类型的通用串行总线 (USB) 设备。
+
+这些非标准化 USB 设备需要硬件供应商编写特定于平台的驱动程序和 SDK，您（开发人员）才能够利用它们。遗憾的是，特定于平台的代码历来阻止这些设备被 Web 使用。这就是创建 WebUSB API 的原因之一：提供一种向 Web 公开 USB 设备服务的方法。借助此 API，硬件制造商将能够为其设备构建跨平台的 JavaScript SDK。但最重要的是，通过将 **USB 引入 Web，使得 USB 更安全、更易于使用**。
+
+让我们看看使用 WebUSB API 所需的操作：
+
+1. 购买 USB 设备。
+2. 将其插入您的计算机。立即出现一条通知，其中包含要访问此设备的正确网站。
+3. 点击该通知。打开网站，准备使用！
+4. 点击进行连接，Chrome 中会显示一个 USB 设备选择器，可以在其中选择您的设备。
+
+Tada!
+
+如果没有 WebUSB API，这个过程会是什么样的？
+
+1. 安装特定于平台的应用程序。
+2. 即使操作系统支持，也需要验证下载了正确的内容。
+3. 进行安装。如果幸运的话，您将不会收到可怕的操作系统提示或弹出窗口，警告您从 Internet 安装驱动程序/应用程序。如果您不走运，安装的驱动程序或应用程序会出现故障并损害您的计算机。（请记住，Web 是为[包含故障网站](https://www.youtube.com/watch?v=29e0CtgXZSI)而构建的）。
+4. 只要使用功能一次，代码就会保留在您的计算机上，直到您删除它为止。（在 Web 上，未使用的空间最终会被回收。）
+
+## 开始之前
+
+本文假设您对 USB 的工作原理有一些基本的了解。如果没有，建议您阅读 [USB in a NutShell](http://www.beyondlogic.org/usbnutshell)。有关 USB 的背景信息，请查阅[官方 USB 规范](https://www.usb.org/)。
+
+[WebUSB API](https://wicg.github.io/webusb/) 在 Chrome 61 中可用。
+
+### 初步试用
+
+为了尽可能多地获得开发人员对使用 WebUSB API 的一手反馈，我们此前已在 Chrome 54 和 Chrome 57 中添加了此功能，以供[初步试用](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)。
+
+试用已于 2017 年 9 月顺利结束。
+
+## 隐私和安全
+
+### 仅 HTTPS
+
+由于此功能强大，它仅适用于[安全上下文](https://w3c.github.io/webappsec/specs/powerfulfeatures/#intro)。这意味着您需要在构建时考虑 [TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) 。
+
+### 需要用户手势
+
+作为安全预防措施，`navigator.usb.requestDevice()` 只能通过用户手势（例如触摸或鼠标点击）调用。
+
+### 功能策略
+
+[功能策略](https://developer.mozilla.org/docs/Web/HTTP/Feature_Policy)是一种机制，允许开发人员有选择地启用和禁用各种浏览器功能和 API。它可以通过 HTTP 标头和/或 iframe“允许”属性定义。
+
+您可以定义一个功能策略来控制是否在 Navigator 对象上公开 usb 属性，或者换句话说，是否允许 WebUSB。
+
+以下是不允许 WebUSB 的标头策略示例：
+
+```http
+Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com
+```
+
+以下是允许 USB 的容器策略的另一个示例：
+
+```html
+<iframe allowpaymentrequest allow="usb; fullscreen"></iframe>
+```
+
+## 让我们开始编码
+
+WebUSB API 严重依赖于 JavaScript [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) 。如果您不熟悉它们，请参阅这个很棒的 [Promises 教程](/promises)。还有一件事， `() => {}` 是简单的 ECMAScript 2015 [箭头函数](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。
+
+### 访问 USB 设备
+
+您可以使用 `navigator.usb.requestDevice()` 提示用户选择一个连接的 USB 设备，也可以调用 `navigator.usb.getDevices()` 以获取所有初始访问已连接的 USB 设备的列表。
+
+`navigator.usb.requestDevice()` 函数采用定义 `filters` 的强制性 JavaScript 对象。这些过滤器用于匹配具有给定供应商 (`vendorId`) 和可选的产品 (`productId`) 标识符的任何 USB 设备。也可以定义 `classCode`、`protocolCode`、`serialNumber` 和 `subclassCode`。
+
+<figure>{% Img src="image/admin/KIbPwUfEqgZZLxugxBOY.png", alt="Chrome 中 USB 设备用户提示的截图", width="800", height="533" %}<figcaption> USB 设备用户提示。</figcaption></figure>
+
+例如，这里是如何访问配置为允许初始连接的 Arduino 设备。
+
+```js
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(device => {
+  console.log(device.productName);      // "Arduino Micro"
+  console.log(device.manufacturerName); // "Arduino LLC"
+})
+.catch(error => { console.error(error); });
+```
+
+在您问之前，我没有想出这个 `0x2341` 十六进制数。我只是在这个[USB ID 列表中](http://www.linux-usb.org/usb.ids)搜索了“Arduino”这个词。
+
+上面已履行的承诺中返回的 USB `device`具有一些关于设备的基本但重要的信息，例如支持的 USB 版本、最大数据包大小、供应商和产品 ID，设备可以具有的可能配置的数量。基本上它包含[设备 USB 描述符](http://www.beyondlogic.org/usbnutshell/usb5.shtml#DeviceDescriptors)中的所有字段。
+
+顺便说一下，如果 USB 设备宣布[支持 WebUSB](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor) 并定义了登陆页面 URL，Chrome 将在 USB 设备插入时显示持久通知。点击此通知将打开登陆页面。
+
+<figure>{% Img src="image/admin/1gRIz2wY4LYofeFq5cc3.png", alt="Chrome 中的 WebUSB 通知截图", width="800", height="450" %}<figcaption> WebUSB 通知。</figcaption></figure>
+
+从那里，您可以简单地调用 `navigator.usb.getDevices()` 并访问您的 Arduino 设备，如下所示。
+
+```js
+navigator.usb.getDevices().then(devices => {
+  devices.forEach(device => {
+    console.log(device.productName);      // "Arduino Micro"
+    console.log(device.manufacturerName); // "Arduino LLC"
+  });
+})
+```
+
+### 与 Arduino USB 板交谈
+
+好的，现在让我们看看通过 USB 端口从兼容 WebUSB 的 Arduino 板进行通信是多么容易。请前往 [https://github.com/webusb/arduino](https://github.com/webusb/arduino) 查阅说明以 WebUSB 启用您的[草图](http://www.arduino.cc/en/Tutorial/Sketch)。
+
+别担心，我将在本文后面介绍所有 WebUSB 设备方法。
+
+```js
+let device;
+
+navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
+.then(selectedDevice => {
+    device = selectedDevice;
+    return device.open(); // Begin a session.
+  })
+.then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
+.then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
+.then(() => device.controlTransferOut({
+    requestType: 'class',
+    recipient: 'interface',
+    request: 0x22,
+    value: 0x01,
+    index: 0x02})) // Ready to receive data
+.then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
+.then(result => {
+  const decoder = new TextDecoder();
+  console.log('Received: ' + decoder.decode(result.data));
+})
+.catch(error => { console.error(error); });
+```
+
+请记住，我在这里使用的 WebUSB 库只是实现了一个示例协议（基于标准 USB 串行协议），制造商可以创建他们希望的任何一组和类型的端点。控制传输对于小型配置命令特别有用，因为它们获得总线优先级并具有明确定义的结构。
+
+这是已上传到 Arduino 板的草图。
+
+```arduino
+// Third-party WebUSB Arduino library
+#include <WebUSB.h>
+
+WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");
+
+#define Serial WebUSBSerial
+
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {
+    ; // Wait for serial port to connect.
+  }
+  Serial.write("WebUSB FTW!");
+  Serial.flush();
+}
+
+void loop() {
+  // Nothing here for now.
+}
+```
+
+上面示例代码中使用的第三方 [WebUSB Arduino 库](https://github.com/webusb/arduino/tree/gh-pages/library/WebUSB)基本上做了两件事：
+
+- 该设备充当 WebUSB 设备，使 Chrome 能够读取[登录页面 URL](https://wicg.github.io/webusb/#webusb-platform-capability-descriptor) 。
+- 它公开了一个 WebUSB 串行 API，您可以使用它来覆盖默认 API。
+
+再次看一下 JavaScript 代码。一旦我让用户选择 `device`，`device.open()` 将运行所有特定于平台的步骤来启动与 USB 设备的会话。然后，我必须使用 `device.selectConfiguration()` 选择可用的 USB 配置。请记住，配置指定了设备的供电方式、最大功耗和接口数量。说到接口，我还需要使用 `device.claimInterface()` 请求独占访问，因为只有在声明接口时数据才能传输到接口或关联的端点。最后需要调用 `device.controlTransferOut()` 以使用适当的命令设置 Arduino 设备以通过 WebUSB 串行 API 进行通信。
+
+从那里， `device.transferIn()` 对设备执行批量传输，以通知它主机已准备好接收批量数据。然后，使用包含必须适当解析的 [DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) `data` 的 `result` 对象来实现承诺。
+
+如果您熟悉 USB，所有这些都应该很熟悉。
+
+### 我想要更多
+
+WebUSB API 允许您与所有 USB 传输/端点类型交互：
+
+- 用于向 USB 设备发送或接收配置或命令参数的控制传输使用 `controlTransferIn(setup, length)` 和 `controlTransferOut(setup, data)` 处理。
+- 用于少量时间敏感数据的中断传输使用与通过 `transferIn(endpointNumber, length)` 和 `transferOut(endpointNumber, data)` 进行的批量传输相同的方法处理。
+- 用于视频和声音等数据流的常时等量传输使用 `isochronousTransferIn(endpointNumber, packetLengths)` 和 `isochronousTransferOut(endpointNumber, data, packetLengths)` 处理。
+- 用于以可靠的方式传输大量非时间敏感数据的批量传输使用 `transferIn(endpointNumber, length)` 和 `transferOut(endpointNumber, data)` 处理。
+
+您可能还想查看 Mike Tsao 的 [WebLight 项目](https://github.com/sowbug/weblight)，该项目提供了构建专为 WebUSB API 设计的 USB 控制 LED 设备的基本示例（此处不使用 Arduino）。您将找到硬件、软件和固件。
+
+## 提示
+
+使用内部页面 `about://device-log` 在 Chrome 中调试 USB 更容易，其中您可以在同一个位置查看所有与 USB 设备相关的事件。
+
+<figure>{% Img src="image/admin/ssq2mMZmxpWtALortfZx.png", alt="Chrome 中调试 WebUSB 的设备日志页面截图", width="800", height="442" %}<figcaption> Chrome 中用于调试 WebUSB API 的设备日志页面。</figcaption></figure>
+
+内部页面 `about://usb-internals` 也派上用场，可让您模拟虚拟 WebUSB 设备的连接和断开。这对于在没有真实硬件的情况下进行 UI 测试非常有用。
+
+<figure>{% Img src="image/admin/KB5z4p7fZRsvkfhVTNkb.png", alt="Chrome 中调试 WebUSB 的内部页面截图", width="800", height="294" %}<figcaption> Chrome 中用于调试 WebUSB API 的内部页面。</figcaption></figure>
+
+在大多数 Linux 系统上，USB 设备默认映射为只读权限。要允许 Chrome 打开 USB 设备，您需要添加新的[udev 规则](https://www.freedesktop.org/software/systemd/man/udev.html)。在 `/etc/udev/rules.d/50-yourdevicename.rules` 上创建如下内容的文件：
+
+```vim
+SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
+```
+
+例如，如果您的设备是 Arduino，则 `[yourdevicevendor]` 为 `2341`。还可以为更具体的规则添加 `ATTR{idProduct}`。确保您的 `user` 是 `plugdev` 组的[成员](https://wiki.debian.org/SystemGroups)。然后，只需重新连接您的设备。
+
+{% Aside  %} Arduino 示例使用的 Microsoft OS 2.0 描述符仅适用于 Windows 8.1 及更高版本。如果没有 Windows 支持，仍然需要手动安装 INF 文件。 {% endAside %}
+
+## 资源
+
+- 堆栈溢出：[https://stackoverflow.com/questions/tagged/webusb](https://stackoverflow.com/questions/tagged/webusb)
+- WebUSB API 规范：[http://wicg.github.io/webusb/](https://wicg.github.io/webusb/)
+- Chrome 功能状态：[https://www.chromestatus.com/feature/5651917954875392](https://www.chromestatus.com/feature/5651917954875392)
+- 规范问题：[https://github.com/WICG/webusb/issues](https://github.com/WICG/webusb/issues)
+- 实现中的一些错误：[http://crbug.com?q=component:Blink&gt;USB](http://crbug.com?q=component:Blink%3EUSB)
+- WebUSB ❤️Arduino：[https://github.com/webusb/arduino](https://github.com/webusb/arduino)
+- IRC：[#webusb](irc://irc.w3.org:6665/#webusb) on W3C's IRC
+- WICG 邮件列表：[https://lists.w3.org/Archives/Public/public-wicg/](https://lists.w3.org/Archives/Public/public-wicg/)
+- WebLight 项目：[https://github.com/sowbug/weblight](https://github.com/sowbug/weblight)
+
+请向 [@ChromiumDev][cr-dev-twitter] 发送带有 [`#WebUSB`](https://twitter.com/search?q=%23WebUSB&src=typed_query&f=live) 标签的推文，让我们知道您在哪里以及以何种方式在使用它。
+
+## 致谢
+
+衷心感谢 [Joe Medley](https://github.com/jpmedley) 审阅本文。
diff --git a/src/site/content/zh/blog/vitals-field-measurement-best-practices/index.md b/src/site/content/zh/blog/vitals-field-measurement-best-practices/index.md
new file mode 100644
index 00000000000..fd941b42284
--- /dev/null
+++ b/src/site/content/zh/blog/vitals-field-measurement-best-practices/index.md
@@ -0,0 +1,136 @@
+---
+title: 实测 Web 指标的最佳实践
+subhead: 如何使用您当前的分析工具测量 Web 指标。
+authors:
+  - philipwalton
+description: 如何使用您当前的分析工具测量 Web 指标
+date: 2020-05-27
+updated: 2020-07-21
+hero: image/admin/WNrgCVjmp8Gyc8EbZ9Jv.png
+alt: 如何使用您当前的分析工具测量 Web 指标
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+能够测量和报告页面的真实世界性能对于诊断和不断改进性能至关重要。如果没有[实际数据](/user-centric-performance-metrics/#in-the-field)，就无法确定您对网站所做的更改是否确实达到了预期的结果。
+
+许多热门[真实用户监控 (RUM)](https://en.wikipedia.org/wiki/Real_user_monitoring) 分析供应商已经在他们的工具中支持[核心 Web 指标](/vitals/#other-web-vitals)（以及许多[其他 Web 指标](/vitals/#core-web-vitals)）。如果您目前正在使用其中一种 RUM 分析工具，那么您就可以很好地评估您的网站页面针对[核心 Web 指标建议阈值](/vitals/#core-web-vitals)的实现情况，并防止将来出现回归。
+
+虽然我们建议您使用支持核心 Web 指标的分析工具，但如果您当前使用的分析工具不提供该支持，您也不一定需要更换工具。几乎所有分析工具都提供了一种定义和测量[自定义指标](https://support.google.com/analytics/answer/2709828)或[事件](https://support.google.com/analytics/answer/1033068)的方法，也就是说，您或许可以使用当前的分析供应商来测量核心 Web 标并将这些指标添加到您现有的分析报告和仪表板中。
+
+本篇指南探讨了使用第三方或内部分析工具测量核心 Web 指标（或任何自定义指标）的最佳实践。对于希望在自己的服务中添加核心 Web 指标支持的分析供应商来说，这篇文章也可以作为一篇指南。
+
+## 使用自定义指标或事件
+
+如上所述，大多数分析工具可以让您测量自定义数据。如果您的分析工具支持这一功能，那么您应该能够使用下方的机制测量各项核心 Web 指标。
+
+在分析工具中测量自定义指标或事件通常分为三个步骤：
+
+1. 在您的工具管理中[定义或注册](https://support.google.com/analytics/answer/2709829?hl=en&ref_topic=2709827)自定义指标（如有需要）。*（注意：并非所有分析供应商都要求提前定义自定义指标。）*
+2. 在您的前端 JavaScript 代码中计算指标值。
+3. 将指标值发送到您的分析后端，确保名称或 ID 与步骤 1 中定义的内容*（如有需要）*相匹配。
+
+对于步骤 1 和步骤 3，您可以参考您分析工具的文档说明。对于步骤 2，您可以使用 [web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 库来计算每项核心 Web 指标的值。
+
+以下代码示例展示了在代码中跟踪这些指标并将其发送到分析服务十分轻松简单。
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics({name, value, id}) {
+  const body = JSON.stringify({name, value, id});
+  // 可以的话，使用 `navigator.sendBeacon()`, 回退到 `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+## 确保您可以报告分布情况
+
+您在计算了每项核心 Web 指标的值并使用自定义指标或事件将这些指标值发送到您的分析服务后，下一步就是构建一个报告或仪表板，用以显示已收集的值。
+
+为确保您满足[核心 Web 指标建议阈值](/vitals/#core-web-vitals)，您会需要报告显示每项指标在第 75 个百分位数的值。
+
+如果您的分析工具不提供内置的分位数报告功能，您应该仍然可以通过生成一份将各项指标按升序排列的报告来手动获取此数据。报告生成后，所有数值构成的完整排序列表中处于 75% 位置的结果将是该指标的第 75 个百分位数，而且这适用于您的任何数据细分方式（按设备类型、连接类型、国家/地区等）。
+
+如果您的分析工具默认不为您提供指标级别的报告粒度，那么在您的分析工具支持[自定义维度](https://support.google.com/analytics/answer/2709828)的情况下，您还是能够获得相同的结果。通过为您跟踪的每项单独指标实例设置唯一的自定义维度值，您就应该能够在报告配置中包含了自定义维度的前提下，生成按单个指标实例进行细分的报告。由于每个实例将具有唯一的维度值，因此不会发生分组。
+
+[Web 指标报告](https://github.com/GoogleChromeLabs/web-vitals-report)是通过 Google 分析使用上述技巧的一个示例。该报告的代码是[开源的](https://github.com/GoogleChromeLabs/web-vitals-report)，因此开发者可以将其作为本节所介绍技巧的参考示例。
+
+![Web 指标报告的屏幕截图](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)
+
+{% Aside %} 提示： [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript 库为所报告的每个指标实例提供一个 ID，从而可以在大多数分析工具中建立分布。请参阅[`Metric`](https://github.com/GoogleChrome/web-vitals#metric)接口文档了解更多详情。{% endAside %}
+
+## 在正确的时间发送您的数据
+
+一些性能指标可以在页面完成加载后进行计算，而其他指标（如 CLS）则会将页面的整个生命周期纳入考量范围，且只有在页面开始卸载后才会完成计算。
+
+然而，这可能会导致一些问题，因为`beforeunload`和`unload`事件都不可靠（特别是在移动设备上），因此我们[不建议](https://developer.chrome.com/blog/page-lifecycle-api/#legacy-lifecycle-apis-to-avoid)您使用这些事件（因为这些事件会导致页面不符合[往返缓存](https://developer.chrome.com/blog/page-lifecycle-api/#what-is-the-back-forward-cache)的条件）。
+
+对于跟踪整个页面生命周期的指标，最好一旦在页面的可见性状态更改为`hidden`时，就在`visibilitychange`事件的过程中发送指标的当前值。这是因为一旦页面的可见性状态更改为`hidden`，就无法保证该页面上的任何脚本都能够再次运行。这一点在移动操作系统上尤其如此，在这些操作系统中，浏览器应用程序本身就可以在无需触发任何页面回调的情况下被关闭。
+
+请注意，移动操作系统通常会在切换选项卡、切换应用程序或关闭浏览器应用程序本身时触发`visibilitychange`事件。这些操作系统还会在关闭选项卡或导航到新页面时触发`visibilitychange`事件。这使得`visibilitychange`事件比`unload`或`beforeunload`事件更为可靠。
+
+{% Aside 'gotchas' %} 由于[一些浏览器错误](https://github.com/w3c/page-visibility/issues/59#issue-554880545)，`visibilitychange`事件在少数情况下不会触发。如果您正在构建自己的分析库，那么知道这些错误的存在就非常重要。请注意，[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 库已经考虑到了所有这些错误。{% endAside %}
+
+## 监控性能随时间推移的变化
+
+在您更新了您的分析实施措施来对核心 Web 指标进行跟踪和报告后，下一步就是跟踪您对网站做出的更改如何随着时间的推移影响性能表现。
+
+### 对您做的更改进行版本管理
+
+一种天真（且最终并不可靠）的对更改进行跟踪的方法是将更改部署到生产环境中，然后假定部署日期之后收到的所有指标都对应于新版本的网站，而部署日期之前收到的所有指标都对应于旧版本的网站。然而，任何因素（包括在 HTTP、Service Worker 或 CDN 层中的缓存）都可以导致差错。
+
+更好的方法是为每个已部署的更改创建一个独特的版本，然后在您的分析工具中跟踪该版本。大多数分析工具都支持版本设置。如果您的工具中不行，则可以创建一个自定义维度并将该维度设置为您部署的版本。
+
+### 运行实验
+
+您可以同时跟踪多个版本（或实验）来实现进一步的版本管理。
+
+如果您的分析工具允许您定义实验组，请使用该功能。否则，您可以使用自定义维度来确保您的每个指标值都可以关联到报告中的一个特定实验组。
+
+您还可以在分析中进行实验，向部分用户推出实验性更改，并将该更改的性能与对照组中的用户性能进行比较。当您确信某个更改确实可以提高性能后，就可以将其推广给所有用户。
+
+{% Aside %} 您始终应该将实验组设置在服务器上。请避免在客户端上使用任何实验或 A/B 测试工具。在确定用户的实验组之前，这些工具通常会阻塞渲染，因而可能会影响您的 LCP 时间。{% endAside %}
+
+## 确保测量不会影响性能
+
+在测量真实用户性能时，至关重要的一点是您正在运行的任何性能测量代码都不会对您的页面性能产生负面影响。如果产生了负面影响，那么您在性能如何对业务产生影响方面试图得出的任何结论都是不可靠的，因为您永远无法知道分析代码本身的存在是否会产生最大的负面影响。
+
+在您的生产环境网站上部署 RUM 分析代码时，请始终遵循以下原则：
+
+### 延迟加载您的分析代码
+
+分析代码应该始终以异步、非阻塞的方式加载，并且通常应该最后加载。如果您以阻塞方式加载分析代码，则会对 LCP 产生负面影响。
+
+用于测量核心 Web 指标的所有 API 都是特别为支持异步和延迟脚本加载（通过[`buffered`](https://www.chromestatus.com/feature/5118272741572608)标志）而设计的，因此无需急于提前加载脚本。
+
+如果您测量的指标无法在页面加载时间轴的后期进行计算，您应该*只*将需要提前运行的代码内联到`<head>`中（这样就不是一个[阻塞渲染请求](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)）并延迟加载其余的代码。不要仅仅因为单项指标的需要而提前加载所有分析代码。
+
+### 不要创建长任务
+
+分析代码通常为响应用户输入而运行，但如果您的分析代码正在执行大量 DOM 测量或使用其他处理器密集型 API，那么分析代码本身可能会导致较差的输入响应度。此外，如果包含您分析代码的 JavaScript 文件很大，则执行该文件可能会阻塞主线程并对 FID 产生负面影响。
+
+### 使用非阻塞 API
+
+诸如<code>[sendBeacon()](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon)</code>和<code>[requestIdleCallback()](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)</code>这样的 API 是专门为运行不会阻塞用户关键任务的非关键任务而设计的。
+
+这些 API 是适于在 RUM 分析库中使用的绝佳工具。
+
+一般来说，所有分析信标都应该使用`sendBeacon()` API（如果可用）来发送，而所有被动分析测量代码都应该在空闲期运行。
+
+{% Aside %} 有关如何最大限度地利用空闲期，同时仍能确保可以在需要时（例如当用户卸载页面时）紧急运行代码的指导，请参阅[空闲直到紧急](https://philipwalton.com/articles/idle-until-urgent/)模式。{% endAside %}
+
+### 不要跟踪超出您需要的数据
+
+浏览器会公开大量性能数据，但数据可用并不一定意味着您应该进行记录并将其发送到您的分析服务器。
+
+例如，[资源计时 API](https://w3c.github.io/resource-timing/) 为页面上加载的每个资源提供详细的计时数据。但并非所有这些数据对于改善资源加载性能都是必要或有用的。
+
+简而言之，不要仅仅因为数据存在就进行跟踪，先确保会使用数据，再消耗资源跟踪该数据。
diff --git a/src/site/content/zh/blog/vitals-measurement-getting-started/index.md b/src/site/content/zh/blog/vitals-measurement-getting-started/index.md
new file mode 100644
index 00000000000..ee8c4de263d
--- /dev/null
+++ b/src/site/content/zh/blog/vitals-measurement-getting-started/index.md
@@ -0,0 +1,83 @@
+---
+title: 开始测量 Web 指标
+authors:
+  - katiehempenius
+date: 2020-05-27
+updated: 2022-07-18
+hero: image/admin/QxMJKZcue9RS5u05XxTE.png
+alt: 月度图表叠加标有 LCP、FID 和 CLS 的秒表。
+description: 了解如何在真实世界和实验室环境中测量您的网站 Web 指标。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+收集您网站的 Web 指标数据是对其进行改善的第一步。一次全面的分析将会从真实世界和实验室环境中收集性能数据。测量 Web 指标所要求的代码改动非常微小，并且可以使用免费工具集来完成。
+
+## 使用 RUM 数据测量 Web 指标
+
+[真实用户监控](https://en.wikipedia.org/wiki/Real_user_monitoring) (RUM) 数据，也称实际数据，可以捕获网站真实用户的性能体验。Google 用 RUM 数据来确定网站是否符合[核心 Web 指标建议阈值](/vitals/)。
+
+### 入门
+
+如果您还未设置 RUM，那么以下工具将快速为您提供网站实际性能的相关数据。这些工具都基于相同的底层数据集（[Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)），但用例略有不同：
+
+- **PageSpeed Insights 网页速度测量工具 (PSI)**：[PageSpeed Insights](https://pagespeed.web.dev/)报告过去 28 天的页面级和域级聚合性能。此外，该工具还会提供如何改进性能的相关建议。如果您正在寻求一种单一操作来着手测量和改进您网站的 Web 指标，我们建议您使用 PSI 来审计您的网站。 PSI 可在[网页](https://pagespeed.web.dev/)上使用，也可作为[API](https://developers.google.com/speed/docs/insights/v5/get-started)使用。
+- **搜索控制台**：[搜索控制台](https://search.google.com/search-console/welcome)为每个页面报告性能数据。因此，该工具非常适合用来识别需要改进的特定页面。与 PageSpeed Insights 不同，搜索控制台的报告包括历史性能数据。只能针对您拥有并已验证所有权的网站使用搜索控制台。
+- **CrUX 仪表板**：[CrUX 仪表板](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard)是一个预先构建的仪表板，可显示您所选域的 CrUX 数据。该工具是基于 Data Studio 构建的，设置过程大约需要一分钟。与 PageSpeed Insights 和搜索控制台相比，CrUX 仪表板的报告包含更多维度，例如，数据可以按设备和连接类型进行细分。
+
+值得注意的是，虽然上方列出的工具非常适合作为 Web 指标的"入门"测量工具，但这些工具在其他情况下也十分有用。特别要指出的是，CrUX 和 PSI 都可作为 API 使用，还可用于[构建仪表板](https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o)和其他报告。
+
+### 收集 RUM 数据
+
+尽管基于 CrUX 的工具是调查 Web 指标性能的良好开端，但我们强烈建议您使用自己的 RUM 来对性能数据进行补充。您自己收集的 RUM 数据可以针对您网站的性能提供更详细、即时的反馈，因而更加易于识别问题和测试可能的解决方案。
+
+{% Aside %}基于 CrUX 的数据源使用大约一个月的粒度来报告数据，但相关具体细节在不同工具中会有细微差别。例如，PSI 和搜索控制台报告过去 28 天观察到的性能，而 CrUX 数据集和仪表板则按日历月进行报告。 {% endAside %}
+
+您可以通过专用的 RUM 供应商或亲自搭建工具来收集您自己的 RUM 数据。
+
+专用的 RUM 供应商专门收集和报告 RUM 数据。如需在这些服务的基础上同时使用核心 Web 指标，请向您的 RUM 供应商咨询为您的网站启用核心 Web 指标监控的相关信息。
+
+如果您没有 RUM 供应商，那么可以通过使用[`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)来扩充您现有的分析手段，从而对这些指标进行收集和报告。以下内容对该方法进行了更详细的解释。
+
+### web-vitals JavaScript 库
+
+如果您正在为 Web 指标搭建和实现自己的 RUM，那么收集 Web 指标测量值最简单的方法是使用[`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript 库。`web-vitals`是一个小型的模块化库 (约 1KB)，可以提供一个便捷的 API 来为每个[可实际测量的](/user-centric-performance-metrics/#in-the-field) Web 指标进行收集和报告工作。
+
+Web 指标的构成指标并非都由浏览器的内置性能 API 直接公开，而是直接基于这些 API 所构建。例如，[Cumulative Layout Shift 累积布局偏移 (CLS)](/cls/)是使用[布局不稳定性 API](https://wicg.github.io/layout-instability/)实现的。通过使用`web-vitals` ，您无需自己实现这些指标。该 JavaScript 库还能确保您收集的数据与每项指标的方法论和最佳实践相匹配。
+
+如需进一步了解执行`web-vitals`的更多相关信息，请参考[文档](https://github.com/GoogleChrome/web-vitals)和[实测 Web 指标的最佳实践](/vitals-field-measurement-best-practices/)指南。
+
+### 数据聚合
+
+对`web-vitals`收集的测量值进行报告至关重要。如果在测量数据后不进行报告，那么您就无法看到这些数据。 `web-vitals`文档包含的一些示例说明了如何将数据发送到[一个通用 API 端点](https://github.com/GoogleChrome/web-vitals#send-the-results-to-an-analytics-endpoint)、[Google 分析](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics)或[Google 跟踪代码管理器](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-tag-manager)。
+
+如果您已经有特别中意的报告工具，则可以考虑使用该工具。如果还没有，那么可以使用免费的 Google 分析来实现这一目的。
+
+在考虑使用哪种工具时，思考谁会需要访问数据往往十分有帮助。当整个公司（而非单个部门）都希望提高绩效时，企业通常会取得最高的绩效。请参阅[跨功能修复网站速度](/fixing-website-speed-cross-functionally/)，了解如何获得不同部门的支持。
+
+### 数据解读
+
+在分析性能数据时，留意分布的尾部数据十分重要。RUM 数据经常显示出非常大的性能差异，有些用户的速度体验很快，而有些用户的速度体验很慢。但是，使用中位数来汇总数据就会很轻易地掩盖掉这种特性。
+
+在 Web 指标方面，Google 使用"良好"体验的百分比，而不是中位数或平均值等统计数据来确定一个网站或页面是否符合建议阈值。具体而言，只有当一个网站或页面 75% 的页面访问量在每项指标下都满足"良好"阈值时，这个网站或页面才会被视为符合核心 Web 指标阈值。
+
+## 使用实验室数据测量 Web 指标
+
+[实验室数据](/user-centric-performance-metrics/#in-the-lab)，也称为合成数据，是从受控环境，而非实际用户中收集的数据。与 RUM 数据不同，实验室数据可以在预上线环境中进行收集，因此可以整合到开发者工作流程和持续集成过程中。收集合成数据的工具包括灯塔和 WebPageTest 网页性能测试工具等。
+
+### 注意事项
+
+RUM 数据和实验室数据之间始终会存在差异，特别是在实验室环境的网络条件、设备类型或地理位置与用户相对应的信息之间存在显著差异的情况下。但是，在收集有关 Web 指标的实验室数据时，尤为需要注意以下几条具体注意事项：
+
+- **累积布局偏移 (CLS)：**在实验室环境中测量的[累积布局偏移](/cls/)可能会由于人为因素低于在 RUM 数据中观察到的 CLS。CLS 的定义为"*整个页面生命周期内*针对发生的每次意外布局偏移得出的所有单次布局偏移分数的总和。"然而，真实用户加载的页面生命周期通常会与虚拟性能测量工具加载的页面生命周期有很大不同。许多实验室工具只加载页面，而不进行交互。因此，这些工具只能捕获初始页面加载期间发生的布局偏移。相比之下，由 RUM 工具测量的 CLS 能够捕获整个页面生命周期中发生的[意外布局偏移](/cls/#expected-vs-unexpected-layout-shifts)。
+- **First Input Delay 首次输入延迟 (FID)：**[首次输入延迟](/fid/)无法在实验室环境中进行测量，因为该项指标需要用户与页面进行交互。因此，[Total Blocking Time 总阻塞时间](/tbt/) (TBT) 是我们推荐的 FID 实验室代理。 TBT 测量"First Contentful Paint 首次内容绘制和 Time to Interactive 可交互时间之间页面被阻塞而无法对用户输入作出响应的总时间"。虽然 FID 和 TBT 的计算方式不同，但这两项指标都能体现出引导进程中被阻塞的主线程。当主线程被阻塞时，浏览器就会对用户交互作出延迟响应。 FID 测量用户首次尝试与页面交互时发生的延迟（如果存在）。
+
+### 工具集
+
+这些工具可用于收集 Web 指标的实验室测量值：
+
+- **Web 指标 Chrome 扩展程序：** Web 指标 Chrome [扩展程序](https://github.com/GoogleChrome/web-vitals-extension)对给定页面的核心 Web 指标（LCP 最大内容绘制、FID 和 CLS）进行测量和报告。该工具旨在为开发者进行代码更改时提供实时性能反馈。
+- **灯塔：**灯塔对 LCP、CLS 和 TBT 进行报告，并突出显示合适的性能改进。灯塔在 Chrome 开发者工具中既可以作为 Chrome 扩展程序运行，也可以作为 npm 包运行。灯塔还可以通过[灯塔 CI](https://github.com/GoogleChrome/lighthouse-ci)整合到持续集成工作流程中。
+- **WebPageTest 网页性能测试工具：**[WebPageTest](https://webpagetest.org/)将 Web 指标作为其标准报告的一部分。 WebPageTest 可用于在特定设备和网络条件下收集 Web 指标的相关信息。
diff --git a/src/site/content/zh/blog/vitals-tools/index.md b/src/site/content/zh/blog/vitals-tools/index.md
new file mode 100644
index 00000000000..b57388bc718
--- /dev/null
+++ b/src/site/content/zh/blog/vitals-tools/index.md
@@ -0,0 +1,159 @@
+---
+title: 核心 Web 指标的测量工具
+subhead: 您最喜欢的开发者工具现在已可以测量核心 Web 指标。
+authors:
+  - addyosmani
+  - egsweeny
+date: 2020-05-28
+description: 阅读最新发布的热门网络开发者工具支持核心 Web 指标测量的相关内容，其中包括灯塔、PageSpeed Insights 网页速度测量工具、Chrome 用户体验报告等众多工具。
+hero: image/admin/wNtXgv1OE2OETdiSzi8l.png
+thumbnail: image/admin/KxBRBQe5CRZpCxNYyW2H.png
+alt: Chrome 用户体验标志、PageSpeed Insights 标志、灯塔标志、搜索控制台标志、Chrome 开发者工具标志、Web 指标扩展程序标志。
+tags:
+  - blog
+  - web-vitals
+  - performance
+---
+
+近期宣布的 [Web 指标](/vitals/)计划为网络质量信号提供统一指导，这些信号对于所有网站提供出色的网络用户体验至关重要。我们很高兴地宣布，**Google 为网络开发者提供的所有热门工具现在都支持核心 Web 指标的测量**，从而帮助您更轻松地诊断和修复用户体验问题。这些工具包括[灯塔](https://github.com/GoogleChrome/lighthouse)、[PageSpeed Insights](https://pagespeed.web.dev/)、[Chrome 开发者工具](https://developer.chrome.com/docs/devtools/)、[搜索控制台](https://search.google.com/search-console/about)、[web.dev 测量工具](/measure/)、[Web 指标 Chrome 扩展程序](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)和一个全新的 (!) [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/) API。
+
+由于 Google 搜索现在将核心 Web 指标作为评估 [页面体验](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html) 的基础，因此在最大程度上实现这些指标的可用性和可操作性就变得至关重要。
+
+<figure>
+  {% Img src="image/admin/V00vjrHmwzljYo04f3d3.png", alt="支持各项核心 Web 指标的 Chrome 和搜索工具摘要", width="800", height="509" %}
+</figure>
+
+{% Aside 'key-term' %} **实验室工具**可以用于深入了解*潜在用户*可能会如何体验您的网站，并提供可重现的结果，便于调试。**实际**工具可以深入了解您的*真实用户*是如何体验您的网站的。这类测量方式通常被称为真实用户监控 (RUM)。各个[实验室或实际工具](/how-to-measure-speed/#lab-data-vs-field-data)都为您的用户体验优化提供了独特的价值。{% endAside %}
+
+要开启使用核心 Web 指标优化用户体验的旅程，您可以尝试以下工作流程：
+
+- 使用搜索控制台的全新核心 Web 指标报告来确定需要重点关注的页面组（基于实际数据）。
+- 确定需要进行处理的页面后，使用 PageSpeed Insights（由灯塔和 Chrome 用户体验报告提供支持）来诊断页面上的实验室问题和实际问题。PageSpeed Insights (PSI) 可以通过搜索控制台进行使用，或者您也可以直接在 PSI 中输入网址。
+- 准备好在实验室中对您的网站进行本地优化了吗？使用灯塔和 Chrome 开发者工具来测量核心 Web 指标，并获得关于具体修复内容的可操作指导。 Web 指标 Chrome 扩展程序可以让您在桌面上实时查看各项指标。
+- 需要核心 Web 指标的自定义仪表板？在实际数据上使用更新的 CrUX 仪表板或全新的 Chrome 用户体验报告 API，或者在实验室数据上使用 PageSpeed Insights API。
+- 寻求指导？web.dev/measure 可以对您的页面进行测量，并使用 PSI 数据向您显示一组建议优先考虑的优化指南和代码实验室。
+- 最后，在将变更部署到生产环境前，对拉取请求使用灯塔 CI，确保核心 Web 指标中没有回归。
+
+看完了这些介绍，我们现在就来深入了解各个工具的具体更新！
+
+### 灯塔
+
+灯塔是一款自动化网站审计工具，可以帮助开发者诊断问题并发掘改善网站用户体验的机会。这款工具在实验室环境中测量用户体验质量的多个维度，包括性能和可访问性。灯塔的最新版本（[6.0](/lighthouse-whats-new-6.0/)，于 2020 年 5 月中旬发布）中包括额外的审计项、新指标和新的性能分数组成。
+
+<figure>{% Img src="image/admin/4j72CWywp2D88Xti8zBf.png", alt="灯塔 6.0 显示最新的核心 Web 指标", width="800", height="527" %}</figure>
+
+灯塔 6.0 在报告中引入了三项新指标。其中，[Largest Contentful Paint 最大内容绘制](/lcp/) (LCP) 和 [Cumulative Layout Shift 累积布局偏移](/cls/) (CLS) 这两项新指标是核心 Web 指标的实验室执行指标，为优化用户体验提供了重要的诊断信息。鉴于这些指标对评估用户体验的重要性，我们不仅会对新指标进行测量并将结果包含在报告中，还会在计算性能分数时将其考虑在内。
+
+灯塔中包含的第三项新指标为 [Total Blocking Time 总阻塞时间](/tbt/) (TBT)，该项指标与 [First Input Delay 首次输入延迟](/fid/) (FID) 密切相关，后者是核心 Web 指标中的另一项实际指标。遵循灯塔报告中提供的建议并根据您的分数进行优化就可以使您为您的用户提供最佳体验。
+
+灯塔支持的所有产品都依照最新版本进行了更新，其中也包括[灯塔 CI](https://github.com/GoogleChrome/lighthouse-ci)。该产品使您能够在合并和部署拉取请求前轻松测量核心 Web 指标。
+
+<figure>{% Img src="image/admin/aOm5ZAIUbspjcyRMIXbn.png", alt="灯塔 CI 显示针对最大内容绘制的差异视图", width="800", height="498" %}</figure>
+
+如需进一步了解灯塔最新更新的相关信息，请查看我们的[灯塔 6.0 新增功能](/lighthouse-whats-new-6.0/)博文。
+
+### PageSpeed Insights 网页速度测量工具
+
+[PageSpeed Insights](https://pagespeed.web.dev/) (PSI) 对页面在移动和桌面设备上的实验室性能和实际性能进行报告。该工具提供真实用户的页面体验概览（由 Chrome 用户体验报告提供支持）以及一系列关于网站所有者要如何改善页面体验的可操作建议（由灯塔提供支持）。
+
+PageSpeed Insights 和 [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started) 也已升级为在底层使用灯塔 6.0，而且目前支持在报告的实验室和实际部分测量核心 Web 指标！核心 Web 指标由蓝丝带进行了标识，如下图所示。
+
+<figure>{% Img src="image/admin/l1posckVsR7JeVGnk6Jv.png", alt="PageSpeed Insights 中显示的实际环境和实验室环境下的核心 Web 指标数据", width="800", height="873" %}</figure>
+
+虽然[搜索控制台](https://search.google.com/search-console/)为网站所有者提供了需要重点关注的页面组的全面概览，但 PSI 有助于您识别每个页面上能够改善页面体验的机会。在 PSI 中，您可以在报告顶部清楚地看出您的页面是否满足所有核心 Web 指标的良好体验阈值，报告结果将显示为**通过核心 Web 指标评估**或**未通过核心 Web 指标评估**。
+
+### CrUX
+
+[Chrome 用户体验报告](https://developer.chrome.com/docs/crux/) (CrUX) 是数百万个网站上的真实用户体验数据的公共数据集。该工具测量所有核心 Web 指标的实际版本。与实验室数据不同，CrUX 数据来自实际情况下[主动选择加入的用户](https://developer.chrome.com/docs/crux/methodology/#user-eligibility)。通过这些数据，开发者能够了解真实世界用户体验在自己的网站，甚至是竞争对手的网站上的分布。即使您的网站上还没有 RUM，CrUX 也可以提供一种快速简便的方法来评估您的核心 Web 指标。[BigQuery 上的 CrUX 数据集](https://developer.chrome.com/docs/crux/bigquery/)包含所有核心 Web 指标的细粒度性能数据，并在域级的每月快照中提供。
+
+要想真正了解您的网站为用户呈现的性能表现，唯一的方法就是在这些用户进行页面加载和页面交互时对页面性能进行实测。这种类型的测量通常被称为真实用户监控，或简称为 RUM。即使您的网站上还没有 RUM，CrUX 也可以提供一种快速简便的方法来评估您的核心 Web 指标。
+
+**推出全新的 CrUX API**
+
+今天，我们很高兴地向大家推出 [CrUX API](http://developers.google.com/web/tools/chrome-user-experience-report/api/reference/) ，这款 API 能够通过一种快速且免费的方式，轻松将您的开发工作流程与下列实际指标的域级和 URL 级质量测量进行集成：
+
+- 最大内容绘制
+- 累积布局偏移
+- 首次输入延迟
+- 首次内容绘制
+
+开发者可以查询域或 URL，并按不同的形式因素对结果进行细分。 API 会每日更新并汇总前 28 天的数据（与每月汇总的 BigQuery 数据集不同）。这款 API 也拥有充足的公共 API 配额，与另一个 PageSpeed Insights API 相同（每日 25,000 个请求）。
+
+下方是使用 CrUX API 来将各项核心 Web 指标可视化的[演示](https://developer.chrome.com/blog/chrome-ux-report-api/)，其中的数据分布为**良好**、**需要改进**和**欠佳**：
+
+<figure>{% Img src="image/admin/ye3CMKfacSItYA2lqItP.png", alt="显示多项核心 Web 指标的 Chrome 用户体验报告演示", width="800", height="523" %}</figure>
+
+在未来的版本中，我们计划扩展 API 并允许其访问更多的 CrUX 数据集维度和指标。
+
+**改进后的 CrUX 仪表板**
+
+新近重新设计的 [CrUX 仪表板](http://g.co/chromeuxdash)使您能够轻松跟踪域的性能随时间的变化，现在您还可以使用新的仪表板来监控所有核心 Web 指标的分布。要想上手使用仪表板，请查看我们在 web.dev 上的[教程](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/)。
+
+<figure>{% Img src="image/admin/OjbICyhI21RNfGXrFP1x.png", alt="Chrome 用户体验报告仪表板在新着陆页面中显示核心 Web 指标", width="800", height="497" %}</figure>
+
+我们引入了一个新的核心 Web 指标着陆页面，便于您对您的网站表现一目了然。我们欢迎您对所有 CrUX 工具集提出反馈意见。如需分享您的想法和疑问，请通过 [@ChromeUXReport](https://twitter.com/chromeuxreport) Twitter 帐户或 [Google 群组](https://groups.google.com/a/chromium.org/g/chrome-ux-report)联系我们。
+
+### Chrome 开发者工具性能面板
+
+**在体验部分调试布局偏移事件**
+
+Chrome 开发者工具的**性能**面板中有一个全新的**[体验部分](https://developers.google.com/web/updates/2020/05/devtools#cls)**，可以帮助您检测意外的布局偏移。这项功能有助于查找和修复页面上导致累积布局偏移的视觉不稳定问题。
+
+<figure>{% Img src="image/admin/VMbZAgKCi5V6FiQyu631.png", alt="在性能面板中显示为红色记录的累积布局偏移", width="800", height="517" %}</figure>
+
+选中某次特定的布局偏移，即可在**摘要**选项卡中查看其详细信息。要想直观地看到偏移本身发生的位置，请将鼠标悬停在**位移自**和**位移至**字段上。
+
+**使用页脚中的总阻塞时间调试交互准备情况**
+
+总阻塞时间 (TBT) 指标可以在实验室工具中进行测量，并且是首次输入延迟的绝佳代理。TBT 测量[首次内容绘制 (FCP)](/fcp/) 和 [Time to Interactive 可交互时间 (TTI)](/tti/) 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。在实验室中改进 TBT 的性能优化应该能够改进实际情况下的 FID。
+
+<figure>{% Img src="image/admin/WufuLpvrZfgbRn70C74V.png", alt="开发者工具性能面板页脚中显示的总阻塞时间", width="800", height="517" %}</figure>
+
+当您测量页面性能时，TBT 现在会显示在 Chrome 开发者工具**性能**面板的页脚中：
+
+{% Instruction 'devtools-performance', 'ol' %}
+
+1. 单击**录制**。
+2. 手动重新加载页面。
+3. 等待页面加载，然后停止录制。
+
+如需了解更多信息，请参阅[开发者工具新增功能 (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools#cls)。
+
+### 搜索控制台
+
+搜索控制台中全新的[核心 Web 指标报告](https://support.google.com/webmasters/answer/9205520)可以帮助您根据 CrUX 的真实世界（实际）数据识别网站中需要重点关注的页面组。URL 性能会按状态、指标类型和 URL 组（相似网页的组）进行分组。
+
+<figure>{% Img src="image/admin/BjTUt0xdWXD9hrLsbhLK.png", alt="搜索控制台的全新核心 Web 指标报告", width="800", height="1000" %}</figure>
+
+该报告基于三项核心 Web 指标：LCP、FID 和 CLS。如果一个 URL 没有针对这些指标的最小报告数据量，则报告中会将其省略。请尝试使用新报告来全面了解您的域的性能。
+
+一旦您确定了带有核心 Web 指标相关问题的页面类型，就可以使用 PageSpeed Insights 了解针对代表性页面的具体优化建议。
+
+#### web.dev
+
+[web.dev/measure](/measure/) 使您能够测量页面在一段时间内的性能，并提供一系列建议优先考虑的改进指南和代码实验室。该工具的测量由 PageSpeed Insights 提供支持。该测量工具现在还支持各项核心 Web 指标，如下图所示：
+
+<figure>{% Img src="image/admin/ryoV1T1PhxUmo9zdCsDe.png", alt="使用 web.dev 测量工具测量一段时间内的多项核心 Web 指标并获得优先重点方面的指导", width="800", height="459" %}</figure>
+
+### Web 指标扩展程序
+
+Web 指标扩展程序实时测量（桌面）Google Chrome 的三项核心 Web 指标。这有助于在开发工作流程中及早发现问题，同时也可以在您浏览网络时作为诊断工具评估核心 Web 指标的性能。
+
+该扩展程序现在可以从 [Chrome 网上应用店](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)进行安装！我们希望这个扩展程序会对您有用。我们欢迎您提出任何改进意见以及对项目 [GitHub](https://github.com/GoogleChrome/web-vitals-extension/) 存储库的反馈。
+
+<figure>{% Img src="image/admin/woROdEmNV4jlHDPryjBQ.png", alt="使用 Web 指标 Chrome 扩展程序实时显示的核心 Web 指标", width="800", height="459" %}</figure>
+
+#### 快速亮点
+
+内容到这里就结束了！您接下来可以做什么：
+
+- 使用开发者工具中的**灯塔**来优化您的用户体验，确保您在为实际情况下的核心 Web 指标的成功奠定基础。
+- 使用 **PageSpeed Insights** 将您的实验室核心 Web 指标性能与实际核心 Web 指标性能作对比。
+- 试用全新的 **Chrome 用户体验报告 API**，轻松了解您的域和 URL 在过去 28 天内的核心 Web 指标表现。
+- 使用开发者工具**性能**面板中的**体验**部分和页脚深入了解各项核心 Web 指标，并针对特定指标进行调试。
+- 使用**搜索控制台的核心 Web 指标报告**获取您的域在实际情况下的性能表现概览。
+- 使用 **Web 指标扩展程序**实时跟踪页面的核心 Web 指标性能。
+
+我们将在六月的 [web.dev Live](/live/) 上更详细地介绍我们的核心 Web 指标工具集。订阅并获取活动更新！
+
+作者：网页性能管理员伊丽莎白 (Elizabeth) 和阿迪 (Addy)
diff --git a/src/site/content/zh/blog/webrtc-standard-announcement/index.md b/src/site/content/zh/blog/webrtc-standard-announcement/index.md
new file mode 100644
index 00000000000..3af76cc8c0a
--- /dev/null
+++ b/src/site/content/zh/blog/webrtc-standard-announcement/index.md
@@ -0,0 +1,36 @@
+---
+title: WebRTC 加入了 W3C 和 IETF 标准
+subhead: 关于 WebRTC 的历史、架构、用例和未来的简要概述。
+description: 关于 WebRTC 的历史、架构、用例和未来的简要概述。
+date: 2021-01-26
+updated: 2021-01-26
+authors:
+  - huib
+tags:
+  - blog
+  - media
+---
+
+制定 Web 标准是一个漫长的过程，来保证跨浏览器的实用性、一致性和兼容性。今天，[W3C 和 IETF](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en)标志着疫情期间可能最重要的标准之一 WebRTC 的完成。
+
+{% Aside %}查看[与 WebRTC 实时通信](https://codelabs.developers.google.com/codelabs/webrtc-web) codelab，了解实现 WebRTC 的实践演练。 {% endAside %}
+
+## 历史 {: #history }
+
+WebRTC 是一个为浏览器、移动应用和桌面应用提供实时通信功能的平台，通常用于视频通话。该平台由一整套技术和标准组成。谷歌在 2009 年提出了创建 WebRTC 的概念，作为 Adobe Flash 以及无法在浏览器中运行的桌面应用程序的替代方案。上一代基于浏览器的产品是建立在专利授权的技术之上。有许多产品都是用了该技术，包括 Hangouts。谷歌随后收购了大量提供这些技术授权的公司，并将其作为开源 WebRTC 项目提供给公众。该代码库集成在 Chrome 中，并被大多数使用 WebRTC 的应用程序使用。与其他浏览器供应商和行业领导者（如 Mozilla、Microsoft、Cisco 和 Ericsson）一起，W3C 和 IETF 都开始了 WebRTC 的标准化。2013 年，Mozilla 和 Google [展示](https://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html)了它们的浏览器之间的视频通话。通过标准的演变，许多架构讨论导致了跨浏览器的实现差异，并对兼容性和互操作性提出了挑战。随着标准在过去几年定稿，大多数分歧最终得到解决。WebRTC 规范现在通过[一整套平台测试](https://wpt.fyi/results/webrtc?label=experimental&label=master&aligned)和工具来解决兼容性问题，而各大浏览器也相应地调整了它们的实现。这结束了一个充满挑战的时期，Web 开发人员再也不用为不同的浏览器实现和规范更改来适应他们的服务了。
+
+## 架构和功能 {: #architecture }
+
+[`RTCPeerConnection` API](https://developer.mozilla.org/docs/Web/API/RTCPeerConnection) 是 WebRTC 规范的核心部分。 `RTCPeerConnection` 会处理不同端点上的两个应用程序的连接，以使用对等协议进行通信。`PeerConnection` API 与用于访问摄像头和麦克风的[`getUserMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia)，还有用于捕获屏幕内容的[`getDisplayMedia`](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia)紧密交互。WebRTC 可以让您通过`DataChannel`发送和接收包含音视频内容以及任意二进制数据的流。用于处理、编码和解码音视频的媒体功能是任何 WebRTC 实现的核心。WebRTC 支持各种音频编解码器，其中最常用和最通用的是 Opus。WebRTC 实现需要支持 Google 的免费 VP8 视频编解码器和 H.264 来处理视频。WebRTC 连接始终是加密的，这是通过两个现有协议 DTLS 和 SRTP 来实现的。WebRTC 严重依赖现有标准和技术，从视频编解码器 (VP8, H264)、网络遍历 (ICE)、传输( RTP, SCTP) 到媒体描述协议 (SDP)。这与 50 多个 RFC 紧密相连。
+
+## 用例：时间是关键 {: #use-cases }
+
+WebRTC 被广泛用于对时间要求严格的应用程序，例如远程手术、系统监控和自动驾驶汽车的远程控制，以及基于 UDP 的语音或视频通话。这些应用几乎无法进行缓冲。Google、Facebook、Cisco、RingCentral 和 Jitsi 等公司出品的几乎所有基于浏览器的视频通话服务都使用了 WebRTC。Google Stadia 和 NVIDIA GeForce NOW 使用 WebRTC 将游戏流从云端传输到 Web 浏览器，用户几乎感觉不到延迟。
+
+## 疫情期间视频通话性能成为了重点 {: #performance }
+
+在过去的一年里，由于浏览器内视频通话数量的增加，WebRTC 在 Chrome 中的使用量增加了 100 倍。在意识到到视频通话已成为疫情期间许多人生活的基本组成部分后，浏览器供应商已开始优化视频通话所依赖的技术。这一点尤为重要，因为当员工和学生开始在家工作和学习时，要求大型会议以及视频会议中的视频效果的资源变得更加普遍。在过去的一年里，Chrome 对于视频通话的电池友好度提高了 30%，并且针对大量使用场景进行了更多优化。 Mozilla、Apple 和 Microsoft 都在疫情期间对 WebRTC 的实施[做出了重大改进](https://www.youtube.com/watch?v=YZROn-WsyO4)，特别是在确保它们遵守现在的正式标准方面。
+
+## WebRTC 的未来 {: # future }
+
+虽然 WebRTC 现在成为了 W3C 标准，但改进仍在继续。新的视频编解码器 AV1 可[节省高达 50% 的带宽](https://blog.google/products/duo/4-new-google-duo-features-help-you-stay-connected/)，已经加入了 WebRTC 和 Web 浏览器。开源代码库的持续改进，有望进一步减少延迟并提高可流式传输的视频质量。[WebRTC NV](https://www.w3.org/TR/webrtc-nv-use-cases/)发起了创建补充 API 以启用新用例的倡议。这些包括了对现有 API 的扩展，以提供对现有功能的更多控制，例如[可扩展视频编码](https://www.w3.org/TR/webrtc-svc/)以及提供访问[较低级别组件的](https://github.com/w3c/mediacapture-insertable-streams/blob/main/explainer.md) API。后者通过集成高性能自定义 WebAssembly 组件为 Web 开发人员提供了更大的创新灵活性。随着新兴的 5G 网络和对更多交互服务的需求，我们预计来年将看到基于 WebRTC 的服务持续增加。
diff --git a/src/site/content/zh/blog/why-coop-coep/index.md b/src/site/content/zh/blog/why-coop-coep/index.md
new file mode 100644
index 00000000000..c1220291659
--- /dev/null
+++ b/src/site/content/zh/blog/why-coop-coep/index.md
@@ -0,0 +1,160 @@
+---
+title: 为何需要“跨源隔离”才能获得强大的功能
+subhead: |-
+  了解为什么需要跨域隔离才能使用强大的功能，例如
+  `SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory()` 和高
+  精度高分辨率计时器。
+description: |-
+  某些 Web API 会增加诸如 Spectre 之类的侧信道攻击的风险。为了减轻这种风险，浏览器提供了基于选择加入的隔离环境，称为跨域隔离。了解为什么需要使用跨域隔离强大的功能，如`SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory()`
+  和更高精度的高分辨率计时器。
+authors:
+  - agektmr
+  - domenic
+hero: image/admin/h8g1TQjkfkJSpWJrPakB.jpg
+date: 2020-05-04
+updated: 2021-08-05
+tags:
+  - blog
+  - security
+feedback:
+  - api
+---
+
+## 介绍
+
+在[使用 COOP 和 COEP 使您的网站“跨域隔离”](/coop-coep/)中，我们解释了如何使用 COOP 和 COEP 实现“跨域隔离”状态。这是一篇配套文章，解释了为什么需要跨域隔离才能在浏览器上启用强大的功能。
+
+{% Aside 'key-term' %}本文使用了许多听起来相似的术语。为了让事情更清楚，让我们定义它们：
+
+- [COEP：跨源嵌入器策略](https://wicg.github.io/cross-origin-embedder-policy/)
+- [COOP：跨源打开程序策略](https://github.com/whatwg/html/pull/5334/files)
+- [CORP：跨源资源策略](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP))
+- [CORS：跨源资源共享](https://developer.mozilla.org/docs/Web/HTTP/CORS)
+- [CORB：跨源读取阻塞](https://www.chromium.org/Home/chromium-security/corb-for-developers){% endAside %}
+
+## 背景
+
+网络建立在[同源策略上](/same-origin-policy/)：一种安全功能，它限制文档和脚本如何与来自另一个来源的资源进行交互。这一原则限制了网站访问跨域资源的方式。例如，来自 `https://a.example` 的文档无法访问托管在 `https://b.example` 上的数据。
+
+然而，同源策略有一些历史例外。任何网站都可以：
+
+- 嵌入跨域 iframe
+- 包括跨源资源，例如图像或脚本
+- 使用 DOM 引用打开跨域弹出窗口
+
+如果网络可以从头开始设计，这些例外就不会存在。不幸的是，当网络社区意识到严格的同源策略的主要好处时，网络已经依赖于这些例外。
+
+这种宽松的同源策略的安全副作用以两种方式修补。一种方法是通过引入称为[跨源资源共享 (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) 的新协议，其目的是确保服务器允许与给定源共享资源。另一种方法是隐式删除对跨源资源的直接脚本访问，同时保持向后兼容性。这种跨域资源被称为“不透明”资源。例如，这就是为什么除非将 CORS 应用于图像，否则通过 `CanvasRenderingContext2D` 操作跨源图像的像素会失败。
+
+所有这些策略决定都发生在浏览上下文组中。
+
+{% Img src="image/admin/z1Gr4mmJMo383dR9FQUk.png", alt="浏览上下文组", width="800", height="469" %}
+
+长期以来，CORS 和不透明资源的结合足以让浏览器变得安全。有时会发现边缘情况（例如 [JSON 漏洞](https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/)），需要修补，但总体而言，不允许直接读取跨域资源原始字节的原则是成功的。
+
+这一切都随着 [Spectre](https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)) 发生了变化，这使得加载到与您的代码相同的浏览上下文组的任何数据都可能具有可读性。通过测量某些操作所花费的时间，攻击者可以猜测 CPU 缓存的内容，进而猜测进程内存的内容。这种计时攻击可以通过平台中存在的低粒度计时器进行，但可以通过高粒度计时器加速，包括显式（如 `performance.now()` ）和隐式（如 `SharedArrayBuffer` s）。如果 `evil.com` 嵌入跨域图像，他们可以使用 Spectre 攻击读取其像素数据，这使得依赖于“不透明性”的保护无效。
+
+{% Img src="image/admin/wN636enwMtBrrOfhzEoq.png", alt="Spectr", width="800", height="500" %}
+
+理想情况下，所有跨域请求都应该由拥有资源的服务器明确审查。如果资源拥有服务器不提供审查，那么数据将永远不会进入恶意行为者的浏览上下文组，因此将远离网页可能执行的任何 Spectre 攻击。我们称之为跨域隔离状态。这正是 COOP+COEP 的意义所在。
+
+在跨域隔离状态下，请求站点被认为不那么危险，这解锁了强大的功能，例如 `SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory()` 和具有更高精度的[高分辨率计时器](https://www.w3.org/TR/hr-time/)，否则这些功能可用于类似 Spectre 的攻击。它还可以防止修改 `document.domain` 。
+
+### 跨源嵌入器策略 {: #coep }
+
+[跨源嵌入器策略 (COEP)](https://wicg.github.io/cross-origin-embedder-policy/) 可防止文档加载任何未明确授予文档权限（使用 CORP 或 CORS）的跨源资源。使用此功能，您可以声明文档无法加载此类资源。
+
+{% Img src="image/admin/MAhaVZdShm8tRntWieU4.png", alt="COEP 的工作原理", width="800", height="410" %}
+
+要激活此策略，请将以下 HTTP 标头附加到文档：
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+`require-corp`关键字是 COEP 唯一接受的值。这强制执行了文档只能从同一来源加载资源或明确标记为可从另一个来源加载的资源的策略。
+
+对于可从另一个源加载的资源，它们需要支持跨源资源共享 (CORS) 或跨源资源策略 (CORP)。
+
+### 跨域资源共享 {: #cors }
+
+如果跨源资源支持[跨源资源共享 (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) ，您可以使用 [`crossorigin` 属性](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)将其加载到您的网页，而不会被 COEP 阻止。
+
+```html
+<img src="https://third-party.example.com/image.jpg" crossorigin>
+```
+
+例如，如果此图像资源使用 CORS 标头提供，请使用 `crossorigin` 属性，以便获取资源的请求将使用 [CORS 模式](https://developer.mozilla.org/docs/Web/API/Request/mode)。这也会阻止加载图像，除非它设置了 CORS 标头。
+
+类似地，您可以通过 `fetch()` 方法获取跨源数据，只要服务器以[正确的 HTTP 标头](https://developer.mozilla.org/docs/Web/HTTP/CORS#The_HTTP_response_headers)响应，就不需要特殊处理。
+
+### 跨源资源策略 {: #corp }
+
+[跨源资源策略 (CORP)](https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)) 最初是作为选择加入的，以保护您的资源不被其他源加载。在 COEP 的上下文中，CORP 可以为加载资源的人指定资源所有者的策略。
+
+`Cross-Origin-Resource-Policy` 标头采用三个可能的值：
+
+```http
+Cross-Origin-Resource-Policy: same-site
+```
+
+标记为 `same-site` 的资源只能从同一站点加载。
+
+```http
+Cross-Origin-Resource-Policy: same-origin
+```
+
+标记为 `same-origin` 的资源只能从同源加载。
+
+```http
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+任何网站都可以加载标记为 `cross-origin` 的资源（[此值](https://mikewest.github.io/corpp/#integration-fetch)与 COEP 一起添加到 CORP 规范中。）
+
+{% Aside %} 添加 COEP 标头后，您将无法使用服务工作进程绕过限制。如果文档受 COEP 标头保护，则在响应进入文档进程之前或在它进入控制文档的服务工作者之前遵守该策略。 {% endAside %}
+
+### 跨源打开程序策略 {: #coop }
+
+[跨源打开程序策略 (COOP)](https://github.com/whatwg/html/pull/5334/files) 允许您通过将顶级窗口放在不同的浏览上下文组中来确保顶级窗口与其他文档隔离，这样它们就无法直接与顶级窗口交互。 例如，如果带有 COOP 的文档打开一个弹出窗口，其 `window.opener` 属性将为 `null`。 此外，打开器对其的引用的 `.closed` 属性将返回 `true`。
+
+{% Img src="image/admin/eUu74n3GIlK1fj9ACxF8.png", alt="COOP", width="800", height="452" %}
+
+`Cross-Origin-Opener-Policy` 标头采用三个可能的值：
+
+```http
+Cross-Origin-Opener-Policy: same-origin
+```
+
+标记为 `same-origin` 的文档可以与也明确标记为 `same-origin` 的同源文档共享相同的浏览上下文组。
+
+{% Img src="image/admin/he8FaRE2ef67lamrFG60.png", alt="COOP", width="800", height="507" %}
+
+```http
+Cross-Origin-Opener-Policy: same-origin-allow-popups
+```
+
+`same-origin-allow-popups` 的顶级文档保留对其任何弹出窗口的引用，这些弹出窗口要么不设置 COOP，要么通过将 COOP 设置为 `unsafe-none` 来选择退出隔离。
+
+{% Img src="image/admin/AJdm6vFq4fQXUWOTFeFa.png", alt="COOP", width="800", height="537" %}
+
+```http
+Cross-Origin-Opener-Policy: unsafe-none
+```
+
+`unsafe-none` 是默认值，允许将文档添加到其打开程序的浏览上下文组，除非打开程序本身具有 `same-origin` 的 COOP。
+
+{% Aside %} [`noopener`](https://developer.mozilla.org/docs/Web/API/Window/open#Window_features) 属性具有与您期望从 COOP 获得的效果类似的效果，只是它只能从打开程序端工作。（当窗口被第三方打开时，您无法取消关联）。当您通过执行诸如 `window.open（url， '_blank'， 'noopener'）` 或 `<a target="_blank" rel="noopener">` 之类的操作来附加 `noopener` 时，您可以故意将窗口与打开的窗口断开关联。
+
+虽然 `noopener` 可以被 COOP 取代，但当您想在不支持 COOP 的浏览器中保护您的网站时，它仍然很有用。 {% endAside %}
+
+## 总结 {: #summary }
+
+如果您想保证访问强大的功能，例如 `SharedArrayBuffer`、`performance.measureUserAgentSpecificMemory()` 或具有更高精度的[高分辨率计时器](https://www.w3.org/TR/hr-time/)，请记住您的文档需要使用值为 `require-corp` 的 COEP 和值为 `same-origin` 的 COOP。如果两者都没有，浏览器将无法保证足够的隔离来安全地启用这些强大的功能。您可以通过检查 [`self.crossOriginIsolated`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated) 是否返回 `true` 来确定您的页面情况。
+
+在[使用 COOP 和 COEP 使您的网站“跨域隔离”](/coop-coep/)中了解实现此目的的步骤。
+
+## 资源
+
+- [COOP 和 COEP 解释](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit)
+- [对共享内存的计划更改 - JavaScript | MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes)
diff --git a/src/site/content/zh/devices/index.md b/src/site/content/zh/devices/index.md
new file mode 100644
index 00000000000..867ed062db2
--- /dev/null
+++ b/src/site/content/zh/devices/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: devices
+---
diff --git a/src/site/content/zh/discoverable/index.md b/src/site/content/zh/discoverable/index.md
new file mode 100644
index 00000000000..765081b3575
--- /dev/null
+++ b/src/site/content/zh/discoverable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: discoverable
+---
diff --git a/src/site/content/zh/explore/explore.11tydata.js b/src/site/content/zh/explore/explore.11tydata.js
new file mode 100644
index 00000000000..c4cae2ada60
--- /dev/null
+++ b/src/site/content/zh/explore/explore.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// Explore OVERVIEW
+//
+// This is the context object for the explore page.
+// It helps layout cards featured on the explore page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/zh/explore/index.md b/src/site/content/zh/explore/index.md
new file mode 100644
index 00000000000..9f9d11d601c
--- /dev/null
+++ b/src/site/content/zh/explore/index.md
@@ -0,0 +1,5 @@
+---
+layout: explore
+title: 探索
+date: 2022-12-10
+---
diff --git a/src/site/content/zh/fast/apply-instant-loading-with-prpl/index.md b/src/site/content/zh/fast/apply-instant-loading-with-prpl/index.md
new file mode 100644
index 00000000000..800ed76c5a2
--- /dev/null
+++ b/src/site/content/zh/fast/apply-instant-loading-with-prpl/index.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: 使用 PRPL 模式实现即时加载
+authors:
+  - houssein
+description: PRPL 是四个英文单词的首字母缩写，它描述了一种可以提高网页加载速度和交互性的模式。本指南介绍了解每种技术的组合使用方式，以及它们依然可以独立使用来取得想要的性能结果。
+date: 2018-11-05
+tags:
+  - performance
+---
+
+PRPL 是四个英文单词的首字母缩写，它描述了一种可以提高网页加载速度和交互性的模式
+
+- **推送 (Push)**（或**预加载**）最重要的资源。
+- 尽快**渲染 (Render)** 初始路线。
+- **预缓存 (Pre-cache)** 剩余资产。
+- **延迟加载 (Lazy load)** 其他路线和非关键资产。
+
+本指南介绍了解每种技术的组合使用方式，以及它们依然可以独立使用来取得想要的性能结果。
+
+## 使用 Lighthouse 审计页面
+
+运行 Lighthouse 来识别与 PRPL 技术一致的改进机会：
+
+{% Instruction 'devtools-lighthouse', 'ol' %}
+
+1. 选中 **Performance** 和 **Progressive Web App** 复选框。
+2. 单击 **Run Audits** 来生成报告。
+
+有关更多信息，请参阅[《使用 Lighthouse 发现性能机会》](/discover-performance-opportunities-with-lighthouse)一文。
+
+## 预加载关键资源
+
+如果某个资源被解析和延迟获取，Lighthouse 会显示以下失败的审计：
+
+{% Img src="image/admin/tgcMfl3HJLmdoERFn7Ji.png", alt="Lighthouse：预加载关键请求审计", width="745", height="97" %}
+
+[**Preload**](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) 是一个声明性的获取请求，它会告诉浏览器尽快请求资源。通过在 HTML 文档头部添加带有 `rel="preload"` 的 `<link>` 标签来预加载关键资源：
+
+```html
+<link rel="preload" as="style" href="css/style.css">
+```
+
+浏览器会为资源设置更合适的优先级，以便在不推迟 `window.onload` 事件的情况下尽快下载它。
+
+有关预加载关键资源的更多信息，请参阅[预加载关键资产](/preload-critical-assets)指南。
+
+## 尽快渲染初始路线
+
+如果存在延迟[**首次绘制**](/user-centric-performance-metrics/#important-metrics-to-measure)（First Paint，即网站将像素呈现到屏幕的那一刻）的资源，Lighthouse 会发出警告：
+
+{% Img src="image/admin/gvj0jlCYbMdpLNtHu0Ji.png", alt="Lighthouse: 消除渲染阻塞资源审计", width="800", height="111" %}
+
+为了改进 First Paint，Lighthouse 建议内联关键 JavaScript 并使用 [`async`](/critical-rendering-path-adding-interactivity-with-javascript/) 推迟其余部分，以及内联首屏使用的关键 CSS。这样可以消除到服务器的往返，从而获取阻塞渲染的资产，提高性能。但是从开发的角度来看，内联代码更难维护，并且无法被浏览器单独缓存。
+
+另一种改进 First Paint 的方法是在**服务器端渲染**页面的初始 HTML。这会在仍在获取、解析和执行脚本时立即向用户显示内容。但是，这会显着增加 HTML 文件的有效负载，可能会损害 [**Time to Interactive**](/tti/) ，或者影响到应用程序变得可交互并可以响应用户输入所需的时间。
+
+降低应用程序中的 First Paint 并没有固定的单一解决方案。只有在对应用程序利大于弊的情况下，您才应该考虑使用内联样式和服务器端渲染。您可以通过以下资源了解有关这两个概念的更多信息。
+
+- [优化 CSS 交付](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
+- [什么是服务器端渲染？](https://www.youtube.com/watch?v=GQzn7XRdzxY)
+
+<figure data-float="right">{% Img src="image/admin/xv1f7ZLKeBZD83Wcw6pd.png", alt="带服务工作进程的请求/响应", width="800", height="1224" %}</figure>
+
+## 预缓存资产
+
+通过充当代理，**服务工作进程**可直接从缓存中获取资产，而不用在重复访问时从服务器获取。这不仅可以使用户在离线时使用您的应用程序，而且还可以在重复访问时加快页面的加载速度。
+
+使用第三方库来简化生成服务工程进程的过程，除非这些库所无法满足您那些更复杂的缓存需求。例如， [Workbox](/workbox) 提供了一组工具，可以让您创建和维护服务工作进程来缓存资产。有关服务工作进程和离线可靠性的更多信息，请参阅可靠性学习路径中[的服务工作进程指南。](/service-workers-cache-storage)
+
+## 延迟加载
+
+如果您通过网络发送的数据太多，Lighthouse 会显示审计失败。
+
+{% Img src="image/admin/Ml4hOCqfD4kGWfuKYVTN.png", alt="Lighthouse：网络有效负载过大的审计", width="800", height="99" %}
+
+这包括所有资产类型，但由于浏览器解析和编译大型 JavaScript 有效负载需要时间，因此尤其消耗尤其严重。 Lighthouse 还会在适当的时候为此提供警告。
+
+{% Img src="image/admin/aKDCV8qv3nuTVFt0Txyj.png", alt="Lighthouse：JavaScript 启动时间审计", width="797", height="100" %}
+
+要发送仅包含用户最初加载应用程序所需代码的较小 JavaScript 有效负载，请根据需要拆分整个包并[延迟加载](/reduce-javascript-payloads-with-code-splitting)代码块。
+
+一旦成功拆分数据包，请预加载更重要的代码块（请参阅[预加载关键资产](/preload-critical-assets)指南）。预加载可确保浏览器更快地获取和下载更重要的资源。
+
+除了按需拆分和加载不同的 JavaScript 代码块外，Lighthouse 还提供对延迟加载非关键图像的审计。
+
+{% Img src="image/admin/sEgLhoYadRCtKFCYVM1d.png", alt="Lighthouse：延迟加载屏幕外图像审计", width="800", height="90" %}
+
+如果您在网页上使用了许多图像，请在加载页面时延迟加载所有位于首屏下方或设备视区之外的图像（请参阅[使用 lazysizes 来延迟加载图像](/use-lazysizes-to-lazyload-images)）。
+
+## 接下来的步骤
+
+现在您了解了 PRPL 模式背后的一些基本概念，请继续阅读本节中的下一个指南以了解更多信息。重要的是要记住，并非要一次性使用所有的技术。对以下任何一项所做的任何努力都将提供显著的性能改进。
+
+- **推送**（或**预加载**）关键资源。
+- 尽快**渲染**初始路线。
+- **预缓存**剩余资产。
+- **延迟加载**其他路线和非关键资产。
diff --git a/src/site/content/zh/fast/avoid-invisible-text/index.md b/src/site/content/zh/fast/avoid-invisible-text/index.md
new file mode 100644
index 00000000000..eed69f6c222
--- /dev/null
+++ b/src/site/content/zh/fast/avoid-invisible-text/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: 在字体加载期间避免不可见的文本
+authors:
+  - katiehempenius
+description: 字体通常是需要一段时间才能加载完毕的大文件。为了解决这个问题，部分浏览器会在字体加载完毕前隐藏文本（“不可见文本的闪现”）。如果您在优化性能，可能会想避免“不可见文本闪现”，并使用系统字体立即向用户显示内容。
+date: 2018-11-05
+codelabs:
+  - codelab-avoid-invisible-text
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## 为什么要关注这一问题？
+
+字体通常是需要一段时间才能加载完毕的大文件。为了解决这个问题，部分浏览器会在字体加载完毕前隐藏文本（“不可见文本的闪现”）。如果您在优化性能，可能会想避免“不可见文本闪现”，并使用系统字体立即向用户显示内容（“无风格文本的闪现”）。
+
+## 立即显示文本
+
+本指南概述了实现此目的的两种方法：第一种方法非常简单，但没有通用浏览器[支持](https://caniuse.com/#search=font-display)；第二种方法需要更多的工作，但具有完整的浏览器支持。对您来说，最好的选择是您将实际实施和维护的那个方法。
+
+## 选项 1：使用 font-display
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>之前</th>
+        <th>之后</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+}
+</code>
+        </td>
+        <td>
+<code>@font-face {
+  font-family: Helvetica;
+  &lt;strong&gt;font-display: swap;&lt;/strong&gt;
+}
+</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+[`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display)是用于指定字体显示策略的 API。`swap`告诉浏览器使用该字体的文本应立即使用系统字体进行显示。自定义字体准备就绪后，系统字体就会被换掉。
+
+如果浏览器不支持`font-display` ，那么它将继续遵循其加载字体的默认行为。点击[这里](https://caniuse.com/#search=font-display)查看有哪些浏览器支持`font-display` 。
+
+这些是常见浏览器的默认 font-loading 行为：
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>浏览器</strong></th>
+        <th><strong>如果字体未准备好，则默认行为是...</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Edge</td>
+        <td>在字体准备好之前使用系统字体。替换字体。</td>
+      </tr>
+      <tr>
+        <td>Chrome</td>
+        <td>隐藏文本，最多 3 秒。如果文本还没有准备好，使用系统字体直到字体准备好。替换字体。</td>
+      </tr>
+      <tr>
+        <td>火狐</td>
+        <td>隐藏文本，最多 3 秒。如果文本还没有准备好，使用系统字体直到字体准备好。替换字体。</td>
+      </tr>
+      <tr>
+        <td>Safari</td>
+        <td>隐藏文本直到字体准备好。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 选项 2：在自定义字体被加载完毕前，一直等待
+
+只需要多做一些工作，就可以在所有浏览器上实现相同的行为。
+
+这种方法分为三个部分：
+
+- 不要在刚开始加载页面时使用自定义字体。这样可确保浏览器立即使用系统字体显示文本。
+- 检测何时会加载自定义字体。有了[FontFaceObserver](https://github.com/bramstein/fontfaceobserver)库，通过几行 JavaScript 代码就可以实现该功能。
+- 更新页面样式来使用自定义字体。
+
+为了实现该功能，您需要进行以下更改：
+
+- 重构 CSS，从而在刚开始加载页面时不使用自定义字体。
+- 将脚本添加到页面。该脚本会检测自定义字体何时加载，然后更新页面样式。
+
+{% Aside 'codelab' %}[使用 Font Face Observer 立即显示文本](/codelab-avoid-invisible-text)。 {% endAside %}
+
+## 验证
+
+运行 Lighthouse 以验证站点是否使用`font-display: swap`来显示文本：
+
+{% Instruction 'audit-performance', 'ol' %}
+
+确认**确保在 webfont 加载期间文本保持可见**审计通过。
diff --git a/src/site/content/zh/fast/codelab-preload-web-fonts/index.md b/src/site/content/zh/fast/codelab-preload-web-fonts/index.md
new file mode 100644
index 00000000000..86dd707b8dc
--- /dev/null
+++ b/src/site/content/zh/fast/codelab-preload-web-fonts/index.md
@@ -0,0 +1,57 @@
+---
+layout: codelab
+title: 通过预加载 web 字体提高加载速度
+authors:
+  - gmimani
+description: 通过此 Codelab ，了解如何通过预加载 web 字体来提高网页性能。
+date: 2018-04-23
+glitch: web-dev-preload-webfont?path=index.html
+related_post: preload-critical-assets
+tags:
+  - performance
+---
+
+{% include 'content/devtools-headsup.njk' %}
+
+此 Codelab 向您展示了如何通过 `rel="preload"` 来预加载 web 字体，从而避免出现无样式文本 (FOUT) 闪烁的情况。
+
+## 措施
+
+在添加任何优化之前，首先测量网站的性能表现。 {% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+生成的 Lighthouse 报告将显示**最大关键路径延迟**下的资源获取顺序。
+
+{% Img src="image/admin/eperh8ZUnjhsDlnJdNIG.png", alt="关键请求链中的 web 字体。", width="704", height="198" %}
+
+在上方的审计中，web 字体是关键请求链的一部分，并且会最后获取。[**关键请求链**](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)是指浏览器优先处理和获取资源的顺序。在此应用程序中，web 字体（Pacfico 和 Pacifico-Bold）通过 [@font-face](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#defining_a_font_family_with_font-face) 规则定义，并且是浏览器在关键请求链中获取的最后一个资源。Web 字体通常会延迟加载，即在下载关键资源（CSS、JS）之前不会加载它们。
+
+下面列出了应用程序获取资源的顺序：
+
+{% Img src="image/admin/9oBNjZORrBj6X8RVlr9t.png", alt="Web 字体是延迟加载的。", width="583", height="256" %}
+
+## 预加载 Web 字体
+
+为避免出现 FOUT 情况，您可以立即预加载需要的 web 字体。请在文档头为此应用添加 `Link` 元素：
+
+```html
+<head>
+ <!-- ... -->
+ <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+`as="font" type="font/woff2"`属性会告诉浏览器将此资源作为字体下载，并帮助确定资源队列的优先级。
+
+`crossorigin` 属性说明是否应使用 CORS 请求获取资源，因为字体可能来自不同的域。如果不设置此属性，浏览器将忽略预加载的字体。
+
+由于页眉中使用了 Pacifico-Bold，我们添加了一个预加载标记，从而可以更快地获取它。是否预加载 Pacifico.woff2 字体并不重要，因为它会格式化折叠下方的文本样式。
+
+重新加载应用程序并再次运行 Lighthouse。检查**最大关键路径延迟**部分。
+
+{% Img src="image/admin/lC85s7XSc8zEXgtwLsFu.png", alt="已预加载 Pacifico-Bold web 字体并从将其从关键请求链中删除", width="645", height="166" %}
+
+请注意`Pacifico-Bold.woff2`是如何从关键请求链中删除的。在应用程序中。它的获取时间较早。
+
+{% Img src="image/admin/BrXidcKZfCbbUbkcSwas.png", alt="已预加载 Pacifico-Bold web 字体", width="553", height="254" %}
+
+通过预加载，浏览器知道它需要提前下载这个文件。需要注意的是，如果使用不当，预加载可能会对未使用的资源发出不必要的请求，从而导致性能损耗。
diff --git a/src/site/content/zh/fast/codelab-serve-images-webp/index.md b/src/site/content/zh/fast/codelab-serve-images-webp/index.md
new file mode 100644
index 00000000000..c8cd5e1f6b0
--- /dev/null
+++ b/src/site/content/zh/fast/codelab-serve-images-webp/index.md
@@ -0,0 +1,128 @@
+---
+layout: codelab
+title: 使用命令行创建 WebP 图片
+authors:
+  - katiehempenius
+description: |2-
+
+  在此 Codelab 中，了解如何使用 WebP 提供优化的图片。
+date: 2018-11-05
+glitch: webp-cli
+related_post: serve-images-webp
+tags:
+  - performance
+---
+
+已经为您安装了 webp <a href="https://developers.google.com/speed/webp/docs/precompiled">命令行工具</a>，您可以立即开始使用。此工具可以将 JPG、PNG 和 TIFF 图片转换为 WebP 格式。
+
+## 将图片转换为 WebP
+
+{% Instruction 'remix', 'ol' %} {% Instruction 'console', 'ol' %}
+
+1. 输入以下命令：
+
+```bash
+cwebp -q 50 images/flower1.jpg -o images/flower1.webp
+```
+
+此命令以 `50` 的质量（`0` 最差；`100` 最佳）转换 `images/flower1.jpg` 文件并将其保存为 `images/flower1.webp`。
+
+{% Aside %}您想知道为什么要输入 `cwebp` 而不是 `webp` 吗？WebP 有两个单独的命令分别用于 WebP 图片的编码和解码。`cwebp` 将图片编码为 WebP，而 `dwebp` 则将图片从 WebP 解码。 {% endAside %}
+
+执行此操作后，您应该在控制台中看到如下内容：
+
+```bash
+Saving file 'images/flower1.webp'
+File:      images/flower1.jpg
+Dimension: 504 x 378
+Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
+           (1.24 bpp)
+block count:  intra4:        750  (97.66%)
+              intra16:        18  (2.34%)
+              skipped:         0  (0.00%)
+bytes used:  header:            116  (0.4%)
+             mode-partition:   4014  (13.6%)
+ Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
+    macroblocks:  |      22%|      26%|      36%|      17%|     768
+      quantizer:  |      52 |      42 |      33 |      24 |
+   filter level:  |      16 |       9 |       6 |      26 |
+```
+
+您刚刚成功将图片转换为 WebP。
+
+但是，像这样一次对一张图片运行 `cwebp` 命令，转换许多图片将需要很长时间。如果您需要这样做，您可以改为使用脚本。
+
+- 在控制台中运行此脚本（不要忘记反撇号）：
+
+```bash
+`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
+```
+
+此脚本以 `50` 的质量转换 `images/` 目录中的所有文件，并将它们保存为同一目录中的新文件（文件名相同，但文件扩展名为 `.webp`）。
+
+### ✔︎ 签入
+
+您的 `images/` 目录中现在应该有 6 个文件：
+
+```shell
+flower1.jpg
+flower1.webp
+flower2.jpg
+flower2.webp
+flower3.png
+flower3.webp
+```
+
+接下来，更新此 Glitch，向支持它的浏览器提供 WebP 图片。
+
+## 使用 `<picture>` 标签添加 WebP 图片
+
+利用 `<picture>` 标签可向较新的浏览器提供 WebP，同时保持对旧浏览器的支持。
+
+- 在 `index.html` 中将 `<img src="images/flower1.jpg"/>` 替换为下列 HTML：
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+```
+
+- 接下来，使用 `<picture>` 标记替换 `flower2.jpg` 和 `flower3.png` 的 `<img>` 标记。
+
+### ✔︎ 签入
+
+完成后，`index.html` 的 `<picture>` 标签应如下所示：
+
+```html
+<picture>
+  <source type="image/webp" srcset="images/flower1.webp">
+  <source type="image/jpeg" srcset="images/flower1.jpg">
+  <img src="images/flower1.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower2.webp">
+  <source type="image/jpeg" srcset="images/flower2.jpg">
+  <img src="images/flower2.jpg">
+</picture>
+<picture>
+  <source type="image/webp" srcset="images/flower3.webp">
+  <source type="image/png" srcset="images/flower3.png">
+  <img src="images/flower3.png">
+</picture>
+```
+
+接下来，使用 Lighthouse 验证您是否在站点上正确地实施了 WebP 图片。
+
+## 利用 Lighthouse 验证 WebP 使用情况
+
+利用 Lighthouse 的 **Serve images in next-gen formats**（以下一代格式提供图片）性能审计可以了解是否站点上的所有图片都在使用诸如 WebP 的下一代格式。
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. 验证是否通过了**以下一代格式提供图片**审计。
+
+{% Img src="image/admin/Y8x0FLWs1Xsf32DX20DG.png", alt="在 Lighthouse 中通过'以下一代格式提供图片'审计", width="701", height="651" %}
+
+成功！现在，您在站点上提供的便是 WebP 图片。
diff --git a/src/site/content/zh/fast/codelab-use-lazysizes-to-lazyload-images/index.md b/src/site/content/zh/fast/codelab-use-lazysizes-to-lazyload-images/index.md
new file mode 100644
index 00000000000..fc42d4cb2b9
--- /dev/null
+++ b/src/site/content/zh/fast/codelab-use-lazysizes-to-lazyload-images/index.md
@@ -0,0 +1,75 @@
+---
+layout: codelab
+title: 使用 lazysizes 延迟加载屏幕外图像
+authors:
+  - katiehempenius
+description: 在此 Codelab 中，了解如何使用 lazysizes 仅加载处于当前视口中的图像。
+date: 2018-11-05
+glitch: lazysizes
+related_post: use-lazysizes-to-lazyload-images
+tags:
+  - performance
+---
+
+延迟加载是一种进行等待直到需要资源时才进行加载的方法，而不是提前加载资源。这可以减少初始页面加载时需要加载和解析的资源量，从而提高性能。
+
+在初始页面加载期间屏幕外的图像是此技术的理想候选者。最重要的是，[lazysizes](https://github.com/aFarkas/lazysizes) 让该技术成为非常简单的实现策略。
+
+## 将 lazysizes 脚本添加到页面
+
+{% Instruction 'remix' %}
+
+`lazysizes.min.js` 已被下载并添加到该 Glitch 中。要将其包含在页面中：
+
+- 将以下 `<script>` 标签添加到 `index.html` ：
+
+```html/0
+  <script src="lazysizes.min.js" async></script>
+  <!-- Images End -->
+</body>
+```
+
+{% Aside %} [lazysizes.min.js](https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js) 文件已经添加到本项目中，无需单独添加。您刚刚添加的脚本可以使用此脚本。 {% endAside %}
+
+当用户滚动页面时，lazysizes 将智能地加载图像，并优先考虑用户即将浏览到的图像。
+
+## 指示要延迟加载的图像
+
+- 将 `lazyload` 类添加到应延迟加载的图像中。此外，将 `src` 属性改为 `data-src`。
+
+例如，对 `flower3.png` 的更改如下所示：
+
+```html/1/0
+<img src="images/flower3.png" alt="">
+<img data-src="images/flower3.png" class="lazyload" alt="">
+```
+
+对于此示例，请尝试延迟加载 `flower3.png` 、`flower4.jpg` 和 `flower5.jpg`。
+
+{% Aside %} 您可能想知道为什么需要将 `src` 属性更改为 `data-src`。如果不更改此属性，则所有图像将立即加载而不是延迟加载。`data-src` 不是浏览器识别的属性，所以当浏览器遇到具有该属性的图片标签时，它不会加载图片。在这种情况下，这是一件好事，因为它允许 lazysizes 脚本决定何时加载图像，而不是浏览器决定。 {% endAside %}
+
+## 实现方式
+
+就是这样！要查看这些更改的实际效果，请按照以下步骤操作：
+
+{% Instruction 'preview' %}
+
+- 打开控制台，找到刚刚添加的图像。当您向下滚动页面时，它们的类应该从 `lazyload` 改变为 `lazyloaded`。
+
+{% Img src="image/admin/yXej5KAOMzoqoQAB2paq.png", alt="延迟加载的图像", width="428", height="252" %}
+
+- 向下滚动页面时，注视网络面板，可以看到图像文件逐个添加。
+
+{% Img src="image/admin/tcQpLeAubOW1l42eyXiW.png", alt="延迟加载的图像", width="418", height="233" %}
+
+## 使用 Lighthouse 进行验证
+
+最后，最好使用 Lighthouse 来验证这些更改。Lighthouse 的“延迟屏幕外图像”性能审核将提醒您是否忘记了向任何屏幕外图像添加延迟加载。
+
+{% Instruction 'preview', 'ol' %} {% Instruction 'audit-performance', 'ol' %}
+
+1. 验证**延迟屏幕外图像**审核已通过。
+
+{% Img src="image/admin/AWMJnCEi3IAgANHhTgiC.png", alt="在 Lighthouse 中'通过有效编码图像'审核", width="800", height="774" %}
+
+成功！您已使用 lazysizes 延迟加载了您页面上的图像。
diff --git a/src/site/content/zh/fast/cookie-notice-best-practices/index.md b/src/site/content/zh/fast/cookie-notice-best-practices/index.md
new file mode 100644
index 00000000000..0d1a7a1c5f1
--- /dev/null
+++ b/src/site/content/zh/fast/cookie-notice-best-practices/index.md
@@ -0,0 +1,237 @@
+---
+layout: post
+title: Cookie 通知的最佳实践
+subhead: |2-
+
+  优化 Cookie 通知以提高性能和可用性。
+authors:
+  - katiehempenius
+date: 2021-03-30
+hero: image/j2RDdG43oidUy6AL6LovThjeX9c2/V8rNgYUkkAWET3EkBL6H.png
+alt: Cookie 通知的图片。
+description: 了解 Cookie 通知如何影响性能、性能测量和用户体验。
+tags:
+  - blog
+  - performance
+  - web-vitals
+---
+
+本文讨论 Cookie 通知如何影响性能、性能测量和用户体验。
+
+## 性能
+
+Cookie 通知会对页面性能产生重大影响，因为它们通常是在页面刚开始加载时进行加载，并且会向所有用户显示，同时可能会影响广告和其他页面内容的加载。
+
+下面介绍了 Cookie 通知如何影响 Web 的重要指标：
+
+- **最大的内容绘制 (LCP)：**大多数 Cookie 同意通知都很小，因此，通常不包含页面的 LCP 元素。但是，这可能会发生——尤其是在移动设备上。在移动设备上，Cookie 通知通常会占据屏幕的较大部分。这通常发生在 Cookie 通知包含大块文本（文本块也可以是 LCP 元素）时。
+
+- **首次输入延迟 (FID)：**一般来说，您的 Cookie 同意解决方案本身对 FID 的影响很小——Cookie 同意几乎不需要执行 JavaScript。但是，这些 Cookie 所启用的技术（即广告和跟踪脚本）可能会对页面交互性产生重大影响。将这些脚本延迟到接受 Cookie 后执行可以作为一种减少首次输入延迟 (FID) 的技术。
+
+- **累积布局偏移 (CLS)：**Cookie 同意通知是导致布局偏移的一个很常见的原因。
+
+一般来说，与自己构建的 Cookie 通知相比，来自第三方提供商的 Cookie 通知对性能的影响可能更大。这并不是 Cookie 通知才有的问题，而是因为第三方脚本的一般性质。
+
+### 最佳实践
+
+本节介绍的最佳实践主要讲述第三方 Cookie 通知，但其中部分原则（不是全部）也适用于第一方 Cookie 通知。
+
+#### 异步加载 Cookie 通知脚本
+
+Cookie 通知脚本要异步加载。为此，您要将 [`async`](https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-async) 属性添加到脚本标签。
+
+```html
+<script src="https://cookie-notice.com/script.js" async>
+```
+
+非异步脚本会阻止浏览器解析器，从而导致页面加载延迟和 LCP。有关更多信息，请参阅[高效加载第三方 JavaScript](/efficiently-load-third-party-javascript/)。
+
+{% Aside %} 如果您必须使用同步脚本（例如，某些 Cookie 通知要利用同步脚本来实现 Cookie 阻止，则要确保尽快加载请求。一种实现方法是[使用资源提示](/preconnect-and-dns-prefetch/)。{% endAside %}
+
+#### 直接加载 Cookie 通知脚本
+
+您要将脚本标签添加到主文档的 HTML 中，从而“直接”加载 Cookie 通知脚本——而不是通过标签管理器或其他脚本来加载。利用标签管理器或辅助脚本注入 Cookie 通知脚本会导致 Cookie 通知脚本加载延迟：它会从浏览器的先行解析器屏蔽脚本，阻止脚本在 JavaScript 执行之前加载。
+
+#### 与 Cookie 通知来源建立早期连接
+
+所有从第三方位置加载 Cookie 通知脚本的站点都要使用 `dns-prefetch` 或 `preconnect` 资源提示，从而与托管 Cookie 通知资源的来源建立早期连接。有关详细信息，请参阅[尽早建立网络连接以提高页面感知速度](/preconnect-and-dns-prefetch/)。
+
+```html
+<link rel="preconnect" href="https://cdn.cookie-notice.com/">
+```
+
+{% Aside %} Cookie 通知从多个来源加载资源很常见——例如，从 `www.cookie-notice.com` 和 `cdn.cookie-notice.com` 加载资源。单独的来源需要单独的连接，因此需要单独的资源提示。{% endAside %}
+
+#### 根据情况预加载 Cookie 通知
+
+某些站点可以获得使用 [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content) 资源提示来加载 Cookie 通知脚本的好处。`preload` 资源提示可以通知浏览器尽早发起对指定资源的请求。
+
+```html
+<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
+```
+
+在仅用于获取每个页面的几个关键资源时，`preload` 非常强大。因此，预加载 Cookie 通知脚本的作用因情况而异。
+
+#### 设置 Cookie 通知样式时注意性能权衡
+
+自定义第三方 Cookie 通知的界面和体验可能会增加性能成本。例如，第三方 Cookie 通知并非总是能够重复使用页面上其他位置使用的相同资源（例如，Web 字体）。此外，第三方 Cookie 通知往往会在长请求链的末尾加载样式。为了避免任何意外，请注意 Cookie 通知加载和应用样式以及相关资源的方式。
+
+#### 避免布局偏移
+
+下面是与 Cookie 通知相关的一些最常见布局偏移问题：
+
+- **屏幕顶部的 Cookie 通知：**屏幕顶部的 Cookie 通知是一个导致布局偏移的常见来源。如果在周围的页面渲染后将 Cookie 通知插入 DOM 中，它会进一步将其下方的页面元素向下页面底部推动。您可以在 DOM 中为同意通知保留空间，从而消除此类布局偏移。如果此解决方案不可行——例如，如果 Cookie 通知的尺寸因地理位置而异，请考虑使用粘性页脚或模式来显示 Cookie 通知。由于这两种替代方法都会将 Cookie 通知显示为页面其余部分顶部的“叠加层”，因此 Cookie 通知在加载时不会导致内容偏移。
+- **动画**：很多 Cookie 通知会使用动画——例如，“滑入”Cookie 通知是一种常见的设计模式。根据这些效果的实现方式，它们可能会导致布局偏移。有关更多信息，请参阅[调试布局偏移](/debugging-layout-shifts/)。
+- **字体**：延迟加载字体可能会阻止渲染和/或导致布局偏移。这种现象在连接速度较慢时表现得更明显。
+
+#### 高级加载优化
+
+这些技术需要做更多的工作才能实现，但可以进一步优化 Cookie 通知脚本的加载：
+
+- 从自己的服务器缓存和提供第三方 Cookie 通知脚本可以提高这些资源的交付速度。
+- 使用[服务工作进程](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers)可以更好地控制[第三方脚本（](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)例如，Cookie 通知脚本）的获取和缓存。
+
+## 性能测量
+
+Cookie 通知可能影响性能测量。本节讨论其中部分影响和一些可减轻影响的技术。
+
+### 真实用户监控 (RUM)
+
+一些分析和 RUM 工具使用 Cookie 来收集性能数据。如果用户拒绝使用 Cookie，这些工具将无法获取性能数据。
+
+网站要注意到这种现象；您还需要了解 RUM 工具收集数据的机制。不过，对于典型的站点，考虑到数据倾斜的方向和幅度，这种差异可能不是导致风险的原因。Cookie 的使用不是性能测量的技术要求。[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 库是不使用 Cookie 的库示例。
+
+根据站点使用 Cookie 收集性能数据的方式（即 Cookie 是否包含个人信息）以及相关法律，使用 Cookie 进行性能测量可能不需要遵守与站点上某些用于其他目的的 Cookie（例如，广告 Cookie）相同的法律要求。一些站点会在征求用户同意时会选择将性能 Cookie 作为单独的 Cookie 类别。
+
+### 综合监控
+
+如果没有自定义配置，大多数综合工具（例如 Lighthouse 和 WebPageTest）将仅测量未响应 Cookie 同意通知的首次用户体验。但是，在收集性能数据时，不仅需要考虑缓存状态的变化（例如，初始访问和重复访问），还需要考虑 Cookie 接受状态（接受、拒绝或未响应）的变化。
+
+下面几节讨论了 WebPageTest 和 Lighthouse 设置，它们有助于将 Cookie 通知融合到性能测量工作流中。但是，Cookie 和 Cookie 通知只是在实验环境下难以完美模拟的众多因素之一。因此，重要的是让 [RUM 数据](/user-centric-performance-metrics/#how-metrics-are-measured)成为性能基准测试的基础，而不是综合工具。
+
+### 利用 WebPageTest 测试 Cookie 通知
+
+#### 编写脚本
+
+通过编写脚本，您可以让 [WebPageTest](https://webpagetest.org/) 在收集跟踪信息时“单击”Cookie 同意横幅。
+
+请转到**脚本**选项卡来添加脚本。下面的脚本会导航至要测试的 URL，然后单击 ID 为 `cookieButton` 的 DOM 元素。
+
+{% Aside 'caution' %} WebPageTest 脚本以[制表符分隔](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/scripting.md#scripting)。{% endAside %}
+
+```shell
+combineSteps
+navigate    %URL%
+clickAndWait    id=cookieButton
+```
+
+使用该脚本时，请注意：
+
+- `combineSteps` 会告诉 WebPageTest 将后续脚本步骤的结果“合并”到一组跟踪和测量中。在不使用 `combineSteps` 的情况下运行此脚本也很有用——单独的跟踪可以让您轻松查看资源是在 Cookie 接受之前还是之后加载。
+- `%URL%` 遵循 WebPageTest 约定，表示正在测试的 URL。
+- `clickAndWait` 会告诉 WebPageTest 单击由 `attribute=value` 表示的元素，并等待后续浏览器活动完成。它遵循 `clickAndWait attribute=Value` 格式。
+
+如果您已正确配置此脚本，则 WebPageTest 获取的截屏不会显示 Cookie 通知（因为已接受 Cookie 通知）。
+
+有关 WebPageTest 脚本的更多信息，请查看 [WebPageTest 文档](https://docs.webpagetest.org/scripting/)。
+
+#### 设置 Cookie
+
+要使用 Cookie 集运行 WebPageTest，请转到**高级**选项卡并将 Cookie 标头添加到**自定义标头**字段中：
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/qSccrAxF0H4yoSzYRYdh.png", alt="显示 WebPageTest 中的“自定义标题”字段截屏", width="800", height="181" %}
+
+#### 更改测试位置
+
+要更改 WebPageTest 使用的测试位置，请单击**高级测试**选项卡上的**测试位置**下拉菜单。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/J27NcDQ5LTtXYloaA1DN.png", alt="WebPageTest 中的'测试位置'下拉菜单截屏", width="800", height="267" %}
+
+### 使用 Lighthouse 测试 Cookie 通知
+
+在 Lighthouse 运行时设置 Cookie 可以作为一种机制，让页面进入特定状态以供 Lighthouse 进行测试。Lighthouse 的 Cookie 行为因环境（DevTools、CLI 或 PageSpeed Insights）而异。
+
+#### DevTools
+
+从 DevTools 运行 Lighthouse 时不会清除 Cookie。但是，默认情况下会清除其他类型的存储。使用 **Lighthouse** 设置面板中的**清除存储**选项可以更改此行为。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/nmNDeSoGEQUVKeTP7q7R.png", alt="Lighthouse“清除存储”选项的截屏", width="800", height="304" %}
+
+#### CLI
+
+从 CLI 运行 Lighthouse 使用会全新的 Chrome 实例，因此默认情况下不会设置 Cookie。要使用特定 Cookie 集从 CLI 运行 Lighthouse，请使用以下[命令](https://github.com/GoogleChrome/lighthouse#cli-options)：
+
+```shell
+lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
+```
+
+有关在 Lighthouse CLI 中设置自定义请求标头的更多信息，请参阅[在经过身份验证的页面上运行 Lighthouse](https://github.com/GoogleChrome/lighthouse/blob/master/docs/authenticated-pages.md)。
+
+#### PageSpeed Insights 网页速度测量工具
+
+从 PageSpeed Insights 网页速度测量工具运行 Lighthouse 会使用全新的 Chrome 实例，并且不会设置任何 Cookie。无法对 PageSeed Insights 网页速度测量工具进行配置来设置特定的 Cookie。
+
+## 用户体验
+
+不同 Cookie 同意通知的用户体验 (UX) 主要取决于两个决策：Cookie 通知在页面中的位置，以及用户可在多大程度上自定义站点对 Cookie 的使用。本节讨论这两个决策的可能方法。
+
+{% Aside 'caution' %} 通常，法律（具体法律可能因地域而异）会对 Cookie 通知的用户体验造成很大影响。因此，本节讨论的某些设计模式可能与特定情况无关。不能将本文视为法律建议的替代方法。{% endAside %}
+
+考虑 Cookie 通知的可能设计时，需要注意以下几点：
+
+- 用户体验：它的用户体验好吗？这种特殊设计会对现有页面元素和用户流造成怎样的影响？
+- 业务：网站的 Cookie 策略是什么？Cookie 通知的目的是什么？
+- 法律：是否符合法律要求？
+- 工程：实施和维护工作量如何？改变难度如何？
+
+### 位置
+
+Cookie 通知可以显示为页眉、内联元素或页脚，也可以使用模式或作为[插页式广告](https://en.wikipedia.org/wiki/Interstitial_webpage)显示在页面内容的顶部。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/LLqHAhp7W6x4E3rZh0Oc.png", alt="显示 Cookie 通知不同位置选项的示例的图表", width="800", height="345" %}
+
+#### 页眉、页脚和内联 Cookie 通知
+
+Cookie 通知通常放置在页眉或页脚中。对于这两个选项，页脚位置通常更可取，因为它不那么引人注目，不会影响用户查看横幅广告或通知的注意力，并且通常不会导致 CLS。此外，这也是放置隐私政策和使用条款的常见位置。
+
+尽管内联 Cookie 通知也是一种选择，但它很难集成到现有的用户界面中，因此并不常见。
+
+#### 模式
+
+显示在页面内容顶部的 Cookie 同意通知叫模式。模态的外观和性能因尺寸而异。
+
+对于正在努力以不会导致[布局偏移](/cls/)的方式实施 Cookie 通知的站点，占用部分屏幕的小尺寸模式可能是一个不错的选择。
+
+另一方面，要谨慎使用覆盖大部分页面内容的大尺寸模式。尤其是在小站点上，用户可能会退回，而不是接受内容模糊的陌生站点的 Cookie 通知。尽管不一定是同义概念，但如果您正在考虑使用全屏 Cookie 同意模式，则要了解有关 [Cookie 墙](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/)的法律。
+
+{% Aside %} 可将大型模式视为一种插页式广告。如果以符合法律规定的方式使用插页式广告（例如 Cookie 横幅），Google 搜索[不会](https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on)施行处罚。但是，在其他情况下使用插页式广告（特别是当它们具有侵入性，或者会造成用户体验不佳时）可能会受到处罚。{% endAside %}
+
+### 可配置能力
+
+对于接受哪一种 Cookie，Cookie 通知界面提供了不同级别的控件。
+
+#### 无可配置能力
+
+这些通知样式的 Cookie 横幅不会向用户提供直接的用户体验控件来选择退出 Cookie。它们通常会包含指向站点 Cookie 策略的链接，该链接可能会为用户提供有关使用他们的 Web 浏览器管理 Cookie 的信息。这些通知通常包括“拒绝”和/或“接受”按钮。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/RlAg8DCjBC0bX7Ki5MuE.png", alt="显示没有 Cookie 可配置能力的 Cookie 通知示例的图表", width="800", height="518" %}
+
+#### 一定的可配置能力
+
+这些 Cookie 通知为用户提供拒绝 Cookie 的选项，但不支持更精细的控制。这种 Cookie 通知方法不太常见。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/MOl8u9NcnyjCWogxzjdz.png", alt="显示具有一定的 Cookie 可配置能力的 Cookie 通知示例的图表", width="800", height="508" %}
+
+#### 完整可配置能力
+
+这些 Cookie 通知为用户提供更精细的控制来配置他们接受的 Cookie 使用方法。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/QfFoqkkmdKHAYlftIH0n.png", alt="显示具有完整 Cookie 可配置能力的 Cookie 通知示例的图表", width="800", height="467" %}
+
+- **用户体验：**用于配置 Cookie 使用方法的控件最常使用单独的模式显示，这种模式在用户响应初始 Cookie 同意通知时启动。但是，如果空间允许，某些站点将在初始 Cookie 同意通知中内联显示这些控件。
+
+- **粒度：**实施 Cookie 可配置能力的最常见方法是允许用户按 Cookie“类别”选择接受 Cookie。常见 Cookie 类别的示例包括功能、定向和社交媒体 Cookie。
+
+    但是，某些站点会提供更精细的控制能力，允许用户根据每个 Cookie 选择接受。或者，还有一种为用户提供更具体控制的方法，即将“广告”等 Cookie 类别划分为特定用例——例如，允许用户分别选择“基本广告”和“个性化广告”。
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/z7zFPtCkFi8GEpkfubek.png", alt="显示具有完整 Cookie 可配置能力的 Cookie 通知示例的图表", width="800", height="372" %}
diff --git a/src/site/content/zh/fast/defer-non-critical-css/index.md b/src/site/content/zh/fast/defer-non-critical-css/index.md
new file mode 100644
index 00000000000..06e729ac5fc
--- /dev/null
+++ b/src/site/content/zh/fast/defer-non-critical-css/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 延迟加载非关键 CSS
+authors:
+  - demianrenzulli
+description: 了解如何以优化关键渲染路径和改善 FCP (First Contentful Paint) 为目标来延迟加载非关键 CSS。
+date: 2019-02-17
+updated: 2020-06-12
+tags:
+  - performance
+---
+
+CSS 文件是[渲染阻塞资源](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)：它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的渲染时间。
+
+在本指南中，您将了解如何以优化[关键渲染路径](/critical-rendering-path/)和改善 [First Contentful Paint (FCP)](/fcp/) 为目标来延迟加载非关键 CSS。
+
+## 以次优方式加载 CSS
+
+以下示例包含一个带有三个隐藏文本段落的可折叠项，每个文本段落都使用不同的类来设置样式：
+
+{% Glitch { id: 'defer-css-unoptimized', path: 'index.html' } %}
+
+此页面请求一个包含八个类的 CSS 文件，但并非所有类都是渲染“可见”内容所必需的。
+
+本指南的目标是优化此页面，因此只有**关键**样式会同步加载，而其他样式（例如应用于段落的样式）以非阻塞方式加载。
+
+## 测量
+
+在[页面](https://defer-css-unoptimized.glitch.me/)上运行 [Lighthouse](/discover-performance-opportunities-with-lighthouse/#run-lighthouse-from-chrome-devtools) 并转到 **Performance** 部分。
+
+报告显示了值为“1s”的 **First Contentful Paint** 指标，以及**消除渲染阻塞资源**的机会，结果指向 **style.css** 文件：
+
+<figure>{% Img src="image/admin/eZtuQ2IwL3Mtnmz09bmp.png", alt="未经优化的网页的 Lighthouse 报告，显示“1s”的 FCP 并在“Opportunities”下显示“消除阻塞资源”", width="800", height="640" %}</figure>
+
+{% Aside %}用于此演示网站的 CSS 非常小。如果请求更大的 CSS 文件（这在生产场景中并不少见），并且 Lighthouse 检测到在渲染**折叠项上方**内容时，页面至少有 2048 字节的 CSS 规则未使用，那么您还将收到建议：**删除未使用的 CSS**。{% endAside %}
+
+要可视化此 CSS 如何阻塞渲染：
+
+1. 在 Chrome 中打开[页面](https://defer-css-unoptimized.glitch.me/)。{% Instruction 'devtools-performance', 'ol' %}
+2. 在 Performance 面板中，单击 **Reload**。
+
+在生成的跟踪中，您将看到在 CSS 完成加载后会立即放置 **FCP** 标记：
+
+<figure>{% Img src="image/admin/WhpaDYb98Rf03JmuPenp.png", alt="未经优化页面的 DevTools 性能跟踪，显示 FCP 在 CSS 加载后启动。", width="800", height="352" %}</figure>
+
+这意味着浏览器需要等待所有 CSS 加载完毕并得到处理，之后才能在屏幕上绘制单个像素。
+
+## 优化
+
+要优化此页面，您需要知道哪些类被视为“关键”类。为此，您将使用[Coverage Tool：](https://developer.chrome.com/docs/devtools/css/reference/#coverage)
+
+1. 在 DevTools 中，按下 `Control+Shift+P` 或`Command+Shift+P` (Mac) 打开[命令菜单](https://developer.chrome.com/docs/devtools/command-menu/)。
+2. 输入“Coverage”并选择 **Show Coverage** 。
+3. 单击 **Reload** 按钮，重新加载页面并开始捕获覆盖范围。
+
+<figure>{% Img src="image/admin/JTFK7wjhlTzd2cCfkpps.png", alt="CSS 文件的覆盖范围，显示未使用的字节占 55.9%。", width="800", height="82" %}</figure>
+
+双击报告，查看以两种颜色标记的类：
+
+- 绿色（**关键**）：这些是浏览器渲染可见内容（如标题、副标题和可折叠项按钮）所需的类。
+- 红色（**非关键**）：这些样式应用于非立即可见的内容（如可折叠项内的段落）。
+
+利用此信息优化 CSS，使浏览器在页面加载后立即开始处理关键样式，同时延迟加载非关键 CSS：
+
+- 在从覆盖工具获取的报告中提取标记了绿色的类定义，然后将这些类放在页面标题的 `<style>` 块内：
+
+```html
+<style type="text/css">
+.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
+</style>
+```
+
+- 然后，应用以下模式，异步加载其余类：
+
+```html
+<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="styles.css"></noscript>
+```
+
+这不是加载 CSS 的标准方式。以下是工作原理：
+
+- `link rel="preload" as="style"` 异步请求样式表。您可以在[预加载关键资产指南](/preload-critical-assets)中了解有关 `preload` 的更多信息。
+- `link` 的 `onload` 属性允许在加载 CSS 完成后对其进行处理。
+- 在使用 `onload` 处理程序后将其“归零”有助于某些浏览器避免在切换 rel 属性时重新调用处理程序。
+- 对 `noscript` 元素内的样式表的引用可作为不执行 JavaScript 的浏览器的后备。
+
+{% Aside %} 在本指南中，您使用了普通代码来实现此优化。在实际的生产场景中，最好使用 [loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md) 之类的函数，它们可以封装该行为并且在不同的浏览器中都运行良好。{% endAside %}
+
+[生成的页面](https://defer-css-optimized.glitch.me/)看起来与以前的版本完全一样，即使大多数样式是异步加载的。以下是内联样式和对 CSS 文件的异步请求在 HTML 文件中的样子：
+
+<!-- Copy and Paste Me -->
+
+{% Glitch { id: 'defer-css-optimized', path: 'index.html', previewSize: 0 } %}
+
+## 监视
+
+使用 DevTools 在[优化页面](https://defer-css-optimized.glitch.me/)上运行另一个 **Performance** 跟踪。
+
+**FCP** 标记出现在页面请求 CSS 之前，这意味着浏览器在渲染页面之前不需要等待 CSS 加载：
+
+<figure>{% Img src="image/admin/0mVq3q760y37JSn2MmCP.png", alt="未经优化页面的 DevTools 性能跟踪，显示 FCP 在 CSS 加载前启动。", width="800", height="389" %}</figure>
+
+最后一步，在优化后的页面上运行 Lighthouse。
+
+在报告中，您将看到 FCP 页面减少了 **0.2s**（改善了 20%！）：
+
+<figure>{% Img src="image/admin/oTDQFSlfQwS9SbqE0D0K.png", alt="Lighthouse 报告，显示 FCP 值为“0.8s”。", width="800", height="324" %}</figure>
+
+**消除渲染阻塞资源**建议不再位于 **Opportunities** 下，现在属于 **Passed Audits** 部分：
+
+<figure>{% Img src="image/admin/yDjEvZAcjPouC6I3I7qB.png", alt="Lighthouse 报告，“消除阻塞资源”显示在“Passed Audits”部分中。", width="800", height="237" %}</figure>
+
+## 后续步骤和参考
+
+在本指南中，您了解了如何通过手动提取页面中未使用的代码来延迟加载非关键 CSS。作为补充，[提取关键 CSS 指南](/extract-critical-css/)介绍了一些最流行的关键 CSS 提取工具，并包括了[一个 codelab](/codelab-extract-and-inline-critical-css/)，用于了解它们的实际工作方式。
diff --git a/src/site/content/zh/fast/efficiently-load-third-party-javascript/index.md b/src/site/content/zh/fast/efficiently-load-third-party-javascript/index.md
new file mode 100644
index 00000000000..bdd0dda0847
--- /dev/null
+++ b/src/site/content/zh/fast/efficiently-load-third-party-javascript/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: 高效加载第三方 JavaScript
+subhead: 避免使用第三方脚本时发生的常见缺陷，从而改善加载时间和用户体验。
+authors:
+  - mihajlija
+date: 2019-08-14
+description: 了解如何避免使用第三方脚本时发生的常见缺陷，从而改善加载时间和用户体验。
+hero: image/admin/udp7L9LSo5mfI3F0tvNY.jpg
+alt: 集装箱的鸟瞰图。
+codelabs: codelab-optimize-third-party-javascript
+tags:
+  - performance
+  - javascript
+---
+
+如果第三方脚本[降低](/third-party-javascript/)您的页面加载速度，您有两个选项可以提高性能：
+
+- 如果它没有为您的网站增加明确的价值，请将其删除。
+
+- 优化加载过程。
+
+本文解释如何使用以下技术优化第三方脚本的加载过程：
+
+1. 针对 `<script>` 标记使用 `async` 或 `defer` 属性
+
+2. 建立与所需来源的早期连接
+
+3. 延迟加载
+
+4. 优化您使用第三方脚本的方式
+
+## 使用 `async` 或 `defer`
+
+由于[同步脚本](/third-party-javascript/)会延迟 DOM 构建和呈现，因此您应该始终异步加载第三方脚本，除非脚本必须在页面呈现之前运行。
+
+`async` 和 `defer` 属性告诉浏览器其可以在后台加载脚本时继续解析 HTML，然后在加载后执行脚本。这样，脚本下载不会阻止 DOM 构建和页面呈现。这样，用户就可以在所有脚本加载完成之前看到页面。
+
+```html
+<script async src="script.js">
+
+<script defer src="script.js">
+```
+
+`async` 和 `defer` 之间的区别在于它们何时开始执行脚本。
+
+### `async`
+
+具有 `async` 属性的脚本在完成下载后和窗口[加载](https://developer.mozilla.org/docs/Web/Events/load)事件之前第一时间执行。这意味着 `async` 脚本可能（并且很可能）不会按照它们在 HTML 中出现的顺序执行。这也意味着如果它们在解析器仍在工作时完成下载，他们可以中断 DOM 构建。
+
+{% Img src="image/admin/tCqsJ3E7m4lpKOprXu5B.png", alt="具有 async 属性的脚本的解析器阻塞图", width="800", height="252" %}
+
+### `defer`
+
+具有 `defer` 属性的脚本在 HTML 解析完全完成之后执行，但在 [`DOMContentLoaded`](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded) 事件之前执行。`defer` 保证脚本将按照它们在 HTML 中出现的顺序执行并且不会阻塞解析器。
+
+{% Img src="image/admin/Eq0mcvDALKibHe15HspN.png", alt="具有 defer 属性的脚本的解析器流动图", width="800", height="253" %}
+
+- 如果在加载过程中更早地运行脚本很重要，请使用 `async`。
+
+- 对不太重要的资源使用 `defer`。例如，低于首屏的视频播放器。
+
+使用这些属性可以显著加快页面加载速度。例如，[Telegraph 最近推迟了所有脚本](https://medium.com/p/a0a1000be5#4123)，包括广告和分析，并将广告加载时间平均缩短了四秒。
+
+{% Aside %}分析脚本通常会提前加载，因此您不会错过任何有价值的分析数据。幸运的是，有一些模式可以在保留早期页面加载数据的同时[延迟初始化分析。](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/) {% endAside %}
+
+## 建立与所需来源的早期联系
+
+通过与重要的第三方来源[建立早期连接](/preconnect-and-dns-prefetch/)，您可以节省 100–500 毫秒。
+
+两种 [`<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) 类型可以在此方面提供帮助：
+
+- `preconnect`
+
+- `dns-prefetch`
+
+### `preconnect`
+
+`<link rel="preconnect">` 通知浏览器您的页面打算与另一个源建立连接，并且您希望该过程尽快开始。当从预先连接的源请求资源时，下载立即开始。
+
+```html
+<link rel="preconnect" href="https://cdn.example.com">
+```
+
+{% Aside 'caution' %} 仅预连接到您即将使用的关键域，因为浏览器会关闭所有不会在 10 秒内使用的连接。不必要的预连接会延迟其他重要资源，因此请限制预连接域的数量并[测试预连接的影响](https://andydavies.me/blog/2019/08/07/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest/)。 {% endAside %}
+
+### `dns-prefetch`
+
+`<link rel="dns-prefetch>` 处理由 `<link rel="preconnect">` 处理的一小部分内容。建立连接涉及 DNS 查找和 TCP 握手，以及为了安全来源，TLS 协商。`dns-prefetch` 指示浏览器仅在明确调用之前解析特定域的 DNS。
+
+`preconnect` 提示最好仅用于最关键的连接；对于不太重要的第三方域，请使用 `<link rel=dns-prefetch>` 。
+
+```html
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+[浏览器对 `dns-prefetch`](https://caniuse.com/#search=dns-prefetch)[的支持与 `preconnect`](https://caniuse.com/#search=preconnect) 支持略有不同，因此，`dns-prefetch` 可以作为不支持 `preconnect` 的浏览器的后备。使用单独的链接标签来安全地实现这一点：
+
+```html
+<link rel="preconnect" href="http://example.com">
+<link rel="dns-prefetch" href="http://example.com">
+```
+
+## 延迟加载第三方资源
+
+如果构建不当，嵌入的第三方资源可能是导致页面速度变慢的一个重要因素。如果它们不重要或低于首屏（即，如果用户必须滚动才能查看它们），则延迟加载是提高页面速度和绘制指标的好方法。这样，用户将更快地获得主页内容并拥有更好的体验。
+
+<figure data-float="left">{% Img src="image/admin/uzPZzkgzfrv2Oy3UQPrN.png", alt="显示在移动设备上的网页图，存在超出屏幕的滚动内容。低于首屏的内容以去饱和方式显示，因为尚未加载。", width="366", height="438" %}</figure>
+
+一种有效的方法是在主页内容加载后延迟加载第三方内容。广告是这种方法的一个很好的候选者。
+
+广告是许多网站的重要收入来源，但用户是为了内容而来。通过延迟加载广告并更快地提供主要内容，您可以提高广告的整体可见度百分比。例如，MediaVine 改用[延迟加载广告](https://www.mediavine.com/lazy-loading-ads-mediavine-ads-load-200-faster/)，页面加载速度提高了 200%。DoubleClick 在其[官方文档](https://support.google.com/dfp_premium/answer/4578089#lazyloading)中提供了有关如何延迟加载广告的指南。
+
+另一种方法是仅当用户向下滚动到页面的相应部分时才加载第三方内容。
+
+[Intersection Observer](https://developer.chrome.com/blog/intersectionobserver/) 是一种浏览器 API，可高效检测元素何时进入或退出浏览器视口，并可用于实现此技术。[lazysizes](/use-lazysizes-to-lazyload-images/) 是一个流行的 JavaScript 库，用于延迟加载图像和 [`iframes`](http://afarkas.github.io/lazysizes/#examples) 。它支持 YouTube 嵌入和[小部件](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks)。它还具有针对 IntersectionObserver 的[可选支持。](https://github.com/aFarkas/lazysizes/blob/097a9878817dd17be3366633e555f3929a7eaaf1/src/lazysizes-intersection.js)
+
+{% Aside 'caution' %} 使用 JavaScript 延迟加载资源时要小心。如果 JavaScript 无法加载，可能是由于不稳定的网络条件，您的资源将根本无法加载。 {% endAside %}
+
+将 [`loading` 属性用于延迟加载图像和 iframe](/browser-level-image-lazy-loading/) 是 JavaScript 技术的绝佳替代方案，并且最近 Chrome 76 中开始可用！
+
+## 优化您服务第三方脚本的方式
+
+### 第三方 CDN 托管
+
+第三方供应商通常会提供他们托管的 JavaScript 文件的 URL，通常位于[内容交付网络 (CDN) 上](https://en.wikipedia.org/wiki/Content_delivery_network)。这种方法的好处是您可以快速开始——只需复制和粘贴 URL——并且没有维护开销。第三方供应商处理服务器配置和脚本更新。
+
+但是因为它们与您的其他资源不在同一来源，所以从公共 CDN 加载文件会产生网络成本。浏览器需要执行 DNS 查找，建立新的 HTTP 连接，并在安全来源上与供应商的服务器执行 SSL 握手。
+
+当您使用来自第三方服务器的文件时，您几乎无法控制缓存。依赖其他人的缓存策略可能会导致不必要地频繁从网络重新获取脚本。
+
+### 自托管第三方脚本
+
+自托管第三方脚本是一个选项，可让您更好地控制脚本的加载过程。通过自托管，您可以：
+
+- 减少 DNS 查找和往返时间。
+- 改进 [HTTP 缓存](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)头。
+- 利用 [HTTP/2 服务器推送](/performance-http2/)。
+
+例如，Casper 通过自托管 A/B 测试脚本设法将负载时间[缩短了 1.7 秒。](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec)
+
+但是，自托管有一个很大的缺点：脚本可能会过时，并且在 API 更改或安全修复时不会自动更新。
+
+{% Aside 'caution' %}
+
+手动更新脚本会给您的开发过程增加大量开销，您可能会错过重要的更新。如果您没有使用 CDN 托管来提供所有资源，那么您也会错过[边缘缓存，](https://www.cloudflare.com/learning/cdn/glossary/edge-server/)并且必须优化服务器的压缩。 {% endAside%}
+
+### 使用服务工作程序缓存来自第三方服务器的脚本
+
+自托管的另一种替代方案是[使用服务工作程序缓存来自第三方服务器的脚本](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#cross-origin-considerations)，这可以让您更好地控制缓存，同时仍能获得第三方 CDN 的好处。这使您可以控制从网络重新获取脚本的频率，并可以创建一种加载策略，以限制对非必要第三方资源的请求，直到页面到达关键用户时刻。在这种情况下使用 `preconnect` 建立早期连接也可以在一定程度上降低网络成本。
diff --git a/src/site/content/zh/fast/extract-critical-css/index.md b/src/site/content/zh/fast/extract-critical-css/index.md
new file mode 100644
index 00000000000..b049484aa1c
--- /dev/null
+++ b/src/site/content/zh/fast/extract-critical-css/index.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: 提取关键 CSS (Critical CSS)
+subhead: 了解如何使用关键 CSS 技术改进渲染时间。
+authors:
+  - mihajlija
+date: 2019-05-29
+hero: image/admin/ZC6iWHhgnrSZtPJMfwMh.jpg
+alt: 扳手和螺丝刀的平面照片。
+description: 了解如何使用关键 CSS 技术缩短渲染时间，以及如何为项目选择最佳工具。
+codelabs: codelab-extract-and-inline-critical-css
+tags:
+  - blog
+  - performance
+  - css
+---
+
+浏览器必须先下载并解析 CSS 文件，然后才能显示页面，这样 CSS 可能会导致渲染不畅。如果 CSS 文件很大，或者网络条件很差，那么请求 CSS 文件会显着增加网页渲染所需的时间。
+
+{% Aside 'key-term' %}关键 CSS (Critical CSS) 是一种提取首屏内容 CSS，以便尽快向用户呈现内容的技术。 {% endAside %}
+
+<figure>{% Img src="image/admin/t3Kkvh265zi6naTBga41.png", alt="笔记本电脑和移动设备的网页溢出屏幕边缘的截图", width="800", height="469", class =""%}</figure>
+
+{% Aside 'note' %}首屏是浏览用户在滚动加载页面前看到的所有内容。由于存在无数的设备和屏幕尺寸，因此首屏内容的像素高度没有统一定义。 {% endAside %}
+
+将提取的样式内联到 HTML 文档的 `<head>` 中，从而无需发出额外的请求就能获取这些样式。 CSS 的其余部分可以异步加载。
+
+<figure>{% Img src="image/admin/RVU3OphqtjlkrlAtKLEn.png", alt="标签内嵌关键 CSS 的 HTML 文件", width="800", height="325" %}<figcaption>内联关键 CSS</figcaption></figure>
+
+缩短渲染时间可以对[用户体验](/rail/#focus-on-the-user)产生巨大影响，尤其是在较差的网络条件下。在移动网络上，无论带宽如何，高延迟都是一个问题。
+
+<figure>{% Img src="image/admin/NdQz49RVgdHoh3Fff0yr.png", alt="使用 3G 连接加载具有渲染阻塞 CSS（顶部）的页面和具有内联关键 CSS（底部）的相同页面的胶片视图比较。顶部幻灯片在最终显示内容之前显示六个空白帧。底部幻灯片在第一帧显示有意义的内容。", width="800", height="363" %}<figcaption>使用 3G 连接加载具有渲染阻塞 CSS 的页面（顶部）和具有内联关键 CSS 的同一页面（底部）的比较</figcaption></figure>
+
+如果您的 [First Contentful Paint (FCP)](/fcp/) 表现很差，并且在 Lighthouse 审计中看到了“消除渲染阻塞资源”，那么试试关键 CSS 是个不错的选择。
+
+{% Img src="image/admin/0xea7menL90lWHwbjZoP.png", alt="Lighthouse 的”消除渲染阻塞资源“或”延迟加载未使用的 CSS“ 审计", width="743", height="449" %}
+
+{% Aside 'gotchas' %} 请记住，如果你内联了大量 CSS，则会延迟 HTML 文档其余部分的传输。如果所有内容都被优先处理，那么也就没有了意义。内联也有一些缺点，因为它会阻止浏览器缓存 CSS 以便在后续页面加载时重用，因此最好谨慎使用它。 {% endAside %}
+
+<p id="14KB">为了最大限度地减少首次渲染的次数，应将首屏内容保持在 <strong>14 KB</strong> （压缩）以下。</p>
+
+{% Aside 'note' %}新的 [TCP](https://hpbn.co/building-blocks-of-tcp/) 连接无法立即利用客户端和服务器之间的全部可用带宽，这些连接会经过[慢启动](https://hpbn.co/building-blocks-of-tcp/#slow-start)以避免数据量超过连接的承载能力。在这个过程中，服务器会先开始传输少量数据，如果数据以完美的状态到达客户端，那么下一次往返中数据量会加倍。对于大多数服务器，第一次往返最多可以传输 10 个数据包或大约 14 KB。 {% endAside %}
+
+此技术可实现的性能提升取决于您的网站类型。一般来说，网站使用的 CSS 越多，内联 CSS 可能产生的影响就越大。
+
+## 工具概览
+
+有许多出色的工具可以自动确定页面的关键 CSS。这是个好消息，因为手动执行此操作会相当乏味。它需要分析整个 DOM 以确定视区中应用的每个元素的样式。
+
+### Critical
+
+[Critical](https://github.com/addyosmani/critical) 可提取、缩小和内联首部 CSS，可作为[npm 模块使用](https://www.npmjs.com/package/critical)。它可以与 Gulp（直接）或 Grunt（作为[插件](https://github.com/bezoerb/grunt-critical)）一起使用，并且还有一个 [webpack 插件](https://github.com/anthonygore/html-critical-webpack-plugin)。
+
+这是个简单的工具，会在处理时进行大量思考。您甚至不必指定样式表，Critical 会自动检测它们。它还支持为多个屏幕分辨率提取关键 CSS。
+
+### criticalCSS
+
+[CriticalCSS](https://github.com/filamentgroup/criticalCSS) 是另一个可以提取首屏 CSS的[npm 模块](https://www.npmjs.com/package/criticalcss)。它也可用于 CLI。
+
+它没有内联和缩小关键 CSS 的选项，但它允许您强制包含实际上不属于关键 CSS 的规则，并提供了对包含 `@font-face` 声明的更精细的控制。
+
+### Penthouse
+
+如果您的站点或应用程序具有大量的样式或动态注入 DOM 的样式（在 Angular 应用程序中很常见），那么 [Penthouse](https://github.com/pocketjoso/penthouse) 是一个不错的选择。它使用 [Puppeteer](https://github.com/GoogleChrome/puppeteer)，还提供[在线版本](https://jonassebastianohlsson.com/criticalpathcssgenerator/)。
+
+Penthouse 不会自动检测样式表，您必须指定要为其生成关键 CSS 的 HTML 和 CSS 文件。好处是它擅长并行处理多个作业。
diff --git a/src/site/content/zh/fast/image-cdns/index.md b/src/site/content/zh/fast/image-cdns/index.md
new file mode 100644
index 00000000000..23ee5b80b3e
--- /dev/null
+++ b/src/site/content/zh/fast/image-cdns/index.md
@@ -0,0 +1,79 @@
+---
+layout: post
+title: 使用图像 CDN 优化图像
+authors:
+  - katiehempenius
+description: 图像 CDN 在优化图像方面非常出色。切换到图像 CDN 可以节省 40-80% 的图像字节。
+date: 2019-08-14
+codelabs:
+  - install-thumbor
+tags:
+  - performance
+---
+
+## 为什么使用图像 CDN？
+
+图像内容分发网络 (CDN) 在优化图像方面非常出色。切换到图像 CDN 可以节省 [40-80%](https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s) 的图像文件大小。理论上，只使用构建脚本也可以达到相同的效果，但在实践中很少见。
+
+## 什么是图像 CDN？
+
+图像 CDN 专门从事图像的转换、优化和分发。您也可以将它们视为 API，用于访问和处理网站上使用的图像。对于从图像 CDN 加载的图像，图像 URL 不仅指示要加载的图像，还指示大小、格式和质量等参数。这样便可针对不同用例轻松创建图像的变体。
+
+<figure>{% Img src="image/admin/OIF2VcXp8P6O7tQvw53B.jpg", alt="显示图像 CDN 和客户端之间的请求/响应流。大小和格式等参数用于请求同一图像的变体。", width ="800", height="408" %} <figcaption> 图像 CDN 可以根据图像 URL 中的参数执行的转换示例。</figcaption></figure>
+
+图像 CDN 与构建时图像优化脚本的不同之处在于，它们根据需要创建图像的新版本。因此，CDN 通常比构建脚本更适合创建针对每个单独客户端高度定制的图像。
+
+## 图像 CDN 如何使用 URL 指示优化选项
+
+图像 CDN 使用的图像 URL 可传达有关图像的重要信息以及应该对其应用的转换和优化。URL 格式会因图像 CDN 的不同而有所不同，但在高层次上，它们都具有相似的功能。让我们来看一些最常见的功能。
+
+<figure>{% Img src="image/admin/GA4udXeYUEjHSY4N0Qew.jpg", alt="图像 URL 通常包含以下成分：来源、图像、安全密钥和转换。", width="800", height="127" %}</figure>
+
+### 来源
+
+图像 CDN 可以使用您自己的域或您的图像 CDN 的域。第三方图像 CDN 通常提供付费使用自定义域的选项。如果使用您自己的域，以后可以更容易地切换图像 CDN，因为不需要更改 URL。
+
+上面的示例使用带有个性化子域的图像 CDN 域 ("example-cdn.com")，而不是自定义域。
+
+### 图像
+
+图像 CDN 通常可以配置为在需要时自动从图像的现有位置检索图像。此功能的实现方式通常是，将*现有图像*的完整 URL 包含在图像 CDN 生成的图像的 URL 中。例如，您可能会看到如下所示的 URL：`https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto`。此 URL 将获取并优化存在于 `https://flowers.com/daisy.jpg` 的图像。
+
+将图像上传到图像 CDN 的另一种广泛支持的方法是通过 HTTP POST 请求将图像发送到图像 CDN 的 API。
+
+### 安全密钥
+
+安全密钥可防止其他人创建您的图像的新版本。如果启用此功能，图像的每个新版本都需要唯一的安全密钥。如果有人尝试更改图像 URL 的参数，但未提供有效的安全密钥，他们将无法创建新版本。您的图像 CDN 将处理生成和跟踪安全密钥的细节。
+
+### 转换
+
+图像 CDN 提供数十种（某些情况下数百种）不同的图像转换。这些转换通过 URL 字符串指定，并且对同时使用多个转换没有限制。在 Web 性能方面，最重要的图像转换是大小、像素密度、格式和压缩。这些转换是切换到图像 CDN 通常会使图像大小显著减小的原因。
+
+性能转换往往有一个客观的最佳设置，因此一些图像 CDN 支持这些转换的“自动”模式。例如，您可以允许 CDN 自动选择并提供最佳格式，而不是指定将图像转换为 WebP 格式。图像 CDN 可用来确定图像转换的最佳方式的信号包括：
+
+- [客户端提示](https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/)（例如，视口宽度、DPR 和图像宽度）
+- [`Save-Data`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Save-Data) 标头
+- [User-Agent](https://developer.mozilla.org/docs/Web/HTTP/Headers/User-Agent) 请求标头
+- [网络状况 API](https://developer.mozilla.org/docs/Web/API/Network_Information_API)
+
+例如，图像 CDN 可能为 Edge 浏览器提供 JPEG XR，为 Chrome 浏览器提供 WebP，为非常旧的浏览器提供 JPEG。自动设置很受欢迎，因为您可以利用图像 CDN 在图像优化方面的大量专业知识，而无需在图像 CDN 支持新技术后更改代码来采用新技术。
+
+## 图像 CDN 的类型
+
+图像 CDN 可以分为两类：自我管理和第三方管理。
+
+### 自我管理的图像 CDN
+
+如果网站的工程人员愿意维护自己的基础设施，那么自我管理的 CDN 是一个不错的选择。
+
+[Thumbor](https://github.com/thumbor/thumbor) 是目前唯一的自我管理图像 CDN。虽然它是开源的并且免费使用，但它的功能通常比大多数商业 CDN 少，而且它的文档也有一定的局限性。[Wikipedia](https://wikitech.wikimedia.org/wiki/Thumbor) 、[Square](https://medium.com/square-corner-blog/dynamic-images-with-thumbor-a430a1cfcd87) 和 [99designs](https://99designs.com/tech-blog/blog/2013/07/01/thumbnailing-with-thumbor/) 是三个使用 Thumbor 的网站。有关安装说明，请参阅文章[如何安装 Thumbor 图像 CDN](/install-thumbor)。
+
+### 第三方图像 CDN
+
+第三方图像 CDN 提供服务形式的图像 CDN。就像云提供商提供付费使用的服务器和其他基础设施一样；图像 CDN 提供付费的图像优化和分发。由于第三方图像 CDN 负责维护底层技术，因此入门相当简单，通常可以在 10-15 分钟内完成，但大型网站的完整迁移可能需要较长时间。第三方图像 CDN 通常根据使用层定价，大多数图像 CDN 提供免费层或免费试用，让您有机会试用它们的产品。
+
+## 选择图像 CDN
+
+图像 CDN 有许多不错的选择。一些图像 CDN 提供的功能比其他图像 CDN 多，但所有图像 CDN 都可以帮助您减小图像，从而使页面加载更快。除了功能集，选择图像 CDN 时要考虑的其他因素包括成本、支持、文档以及设置或迁移的难易程度。
+
+在做出决定之前自己试用一下也会有帮助。您可以在下方找到 codelab，其中包含如何快速开始使用几个图像 CDN 的说明。
diff --git a/src/site/content/zh/fast/index.md b/src/site/content/zh/fast/index.md
new file mode 100644
index 00000000000..af0e407f9b0
--- /dev/null
+++ b/src/site/content/zh/fast/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: fast
+---
diff --git a/src/site/content/zh/fast/lazy-loading-images/index.md b/src/site/content/zh/fast/lazy-loading-images/index.md
new file mode 100644
index 00000000000..b14fcd8f5a0
--- /dev/null
+++ b/src/site/content/zh/fast/lazy-loading-images/index.md
@@ -0,0 +1,150 @@
+---
+layout: post
+title: 延迟加载图像
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2022-08-11
+description: 本文解释了延迟加载，以及在延迟加载图像时可用的选项。
+tags:
+  - performance
+  - images
+feedback:
+  - api
+---
+
+通过在 HTML 中将图像作为 `<img>` 元素内联，或用作 CSS 背景图像，可以在网页上显示图像。在本文中，您将了解如何延迟加载这两种类型的图像。
+
+## 内嵌图像 {: #images-inline }
+
+最常见的延迟加载图像是在 `<img>` 元素中使用的图像。对于内嵌图像，我们有三个延迟加载选项，可以组合使用以实现跨浏览器的最佳兼容性：
+
+- [使用浏览器级延迟加载](#images-inline-browser-level)
+- [使用 Intersection Observer（交叉观察器）](#images-inline-intersection-observer)
+
+### 使用浏览器级延迟加载 {: #images-inline-browser-level }
+
+Chrome 和 Firefox 都支持通过 `loading` 属性实现延迟加载。此属性可以添加到 `<img>` 元素中，也可以添加到 `<iframe>` 元素中。 `lazy` 会值告诉浏览器，如果图像位于时区，则立即加载图像，并在用户滚动到它们附近时获取其他图像。
+
+{% Aside %} 请注意，`<iframe loading="lazy">` 目前还不是标准规范。虽然已经在 Chromium 中得到了应用，但它还没有设立规范，并且以后可能会出现改动。我们建议在它纳入规范前，不要使用 `loading` 属性延迟加载 iframe。 {% endAside %}
+
+有关浏览器支持的详细信息，请参阅 MDN [浏览器兼容性](https://developer.mozilla.org/docs/Web/HTML/Element/img#Browser_compatibility)表的 `loading`字段。如果浏览器不支持延迟加载，则该属性将被忽略，图像将像往常一样立即加载。
+
+对于大多数网站，将此属性添加到内嵌图像能够提高性能，并避免用户加载那些他们可能永远不会看到的图像。如果您的网站有大量图像，并希望确保那些使用不支持延迟加载的浏览器用户受益，那么需要将其与下面说明的方法之一结合起来。
+
+要了解更多信息，请查看[Web 的浏览器级延迟加载](/browser-level-image-lazy-loading/)。
+
+### 使用 Intersection Observer {: #images-inline-intersection-observer }
+
+为填充 `<img>` 元素的延迟加载，我们使用 JavaScript 来检查它们是否位于视区。若位于视区，则会向它们的 `src` （有时是`srcset` ）属性填充那些指向所需图像内容的 URL。
+
+如果您之前写过延迟加载代码，那么可能已经通过使用诸如 `scroll` 或 `resize` 之类的事件处理程序来完成任务。虽然这种方法在各大浏览器之间的兼容性最好，但现代浏览器提供了一种性能更高、效率更高的方法，通过 [Intersection Observer API](https://developer.chrome.com/blog/intersectionobserver/) 来完成检查元素可见性的工作。
+
+相较于依赖各种事件处理程序的代码，Intersection Observer 更易于使用和阅读，因为您只需注册一个观察器即可观察元素，无需编写繁琐的元素可见性检测代码。剩下的工作就是决定当元素可见时要执行何种操作。我们来为延迟加载的 `<img>` 元素假设这个基本的标记模式：
+
+```html
+<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
+```
+
+您应该关注此标记的三个相关部分：
+
+1. `class` 属性，这是您将在 JavaScript 中选择元素的属性。
+2. `src` 属性，它会引用页面首次加载时将出现的占位符图像。
+3. `data-src` 和 `data-srcset` 属性，它们是占位符属性，包含元素出现在视区中后将加载图像的 URL。
+
+现在让我们看看如何在 JavaScript 中使用 Intersection Observer 通过这种标记模式延迟加载图像：
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+          lazyImage.srcset = lazyImage.dataset.srcset;
+          lazyImage.classList.remove("lazy");
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to event handlers here
+  }
+});
+```
+
+在文档的 `DOMContentLoaded` 事件中，此脚本查询 DOM 中所有 `lazy` 类的 `<img>` 元素。如果 Intersection Observer 可用，创建一个新的观察器，当 `img.lazy` 元素进入视区时运行回调。
+
+{% Glitch { id: 'lazy-intersection-observer', path: 'index.html', previewSize: 0 } %}
+
+Intersection Observer 适用于所有现代浏览器。因此，将其用作 `loading="lazy"` 的 polyfill 将确保大多数访问者都可以使用延迟加载。
+
+## CSS 中的图像 {: #images-css }
+
+虽然 `<img>` 标签是在网页上使用图像的最常见方式，但也可以通过 CSS [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) 属性（和其他属性）调用图像。浏览器级的延迟加载不适用于 CSS 背景图片，因此如果您有要延迟加载的背景图片，那么需要考虑其他方法。
+
+与 `<img>` 元素那种无论可见性如何都会加载的情况不同，CSS 中的图像加载行为需要通过更多的推测来完成。在构建[文档和 CSS 对象模型](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)以及[渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)时，浏览器会在请求外部资源之前检查文档的 CSS 应用方式。如果浏览器确定涉及外部资源的 CSS 规则不适用于当前构建的文档，那么浏览器不会请求该资源。
+
+通过使用 JavaScript 来确定元素何时出现在视区内，然后对那个元素应用一个会调用背景图像的类，可以使用此推测行为来延迟 CSS 中的图像加载。这会根据需要下载图像，而不是在初始加载时下载图像。例如，让我们以一个包含大幅英雄背景图片的元素为例：
+
+```html
+<div class="lazy-background">
+  <h1>Here's a hero heading to get your attention!</h1>
+  <p>Here's hero copy to convince you to buy a thing!</p>
+  <a href="/buy-a-thing">Buy a thing!</a>
+</div>
+```
+
+`div.lazy-background` 元素通常包含由某些 CSS 调用的英雄背景图像。但是，在这个延迟加载示例中，您可以通过对视区中的元素添加`visible` 类来隔离 `div.lazy-background`元素的`background-image` 属性。
+
+```css
+.lazy-background {
+  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
+}
+
+.lazy-background.visible {
+  background-image: url("hero.jpg"); /* The final image */
+}
+```
+
+从这里开始，请使用 JavaScript 来检查元素是否位于视区中（使用 Intersection Observer！），然后在元素位于视区时将 `visible` 类添加到`div.lazy-background` 元素中，这时会加载图像：
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
+
+  if ("IntersectionObserver" in window) {
+    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          lazyBackgroundObserver.unobserve(entry.target);
+        }
+      });
+    });
+
+    lazyBackgrounds.forEach(function(lazyBackground) {
+      lazyBackgroundObserver.observe(lazyBackground);
+    });
+  }
+});
+```
+
+{% Glitch { id: 'lazy-background', path: 'index.html', previewSize: 0 } %}
+
+## 延迟加载库 {: #libraries }
+
+以下库可用于延迟加载图像。
+
+- [lazysizes](https://github.com/aFarkas/lazysizes) 是一个功能齐全的延迟加载库，可以延迟加载图像和 iframe。它使用的模式与本文中的代码示例非常相似，因为它会自动绑定到 `<img>` 元素上 `lazyload` 类，并要求您在 `data-src` 和/或 `data-srcset` 属性中指定图像的 URL，并将其内容分别交换至 `src` 和/或 `srcset`属性。它使用 Intersection Observer（可以对其进行 polyfill），并可以使用[许多插件](https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo)进行扩展来执行诸如延迟加载视频之类的操作。[了解有关使用 lazysizes 的更多信息](/use-lazysizes-to-lazyload-images/)。
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) 是用于延迟加载图像、背景图像、视频、iframe 和脚本的轻量级选项。它利用 Intersection Observer，支持响应式图像，并能开启浏览器级的延迟加载。
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) 是另一个仅使用 Intersection Observer 的轻量级选项。因此它的性能很好，但需要先进行 polyfill 然后才能在较旧的浏览器上使用。
+- 如果您需要使用 React 特定的延迟加载库，请考虑 [react-lazyload](https://github.com/jasonslyvia/react-lazyload) 。虽然它不使用 Intersection Observer，但*确实*为那些习惯于使用 React 开发应用程序的人提供了一种熟悉的延迟加载图像方法。
diff --git a/src/site/content/zh/fast/lazy-loading-video/index.md b/src/site/content/zh/fast/lazy-loading-video/index.md
new file mode 100644
index 00000000000..1e8b2464558
--- /dev/null
+++ b/src/site/content/zh/fast/lazy-loading-video/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: 延迟加载视频
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-05
+description: |2-
+
+  本文解释了延迟加载，以及在延迟加载视频时可用的选项。
+tags:
+  - performance
+feedback:
+  - api
+---
+
+与[图像元素](/lazy-loading-images)一样，您也可以延迟加载视频。视频通常使用 `<video>` 元素加载（尽管已出现一种[使用 `<img>` 的替代方法](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/)，但实施受限）。然而，*如何*延迟加载 `<video>` 取决于用例。让我们讨论几个场景，每个场景都需要不同的解决方案。
+
+## 对于不自动播放的视频 {: #video-no-autoplay }
+
+对于由用户启动回放的视频（即*不*自动播放的视频），可能需要在 `<video>` 元素上指定 [`preload` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-preload)：
+
+```html
+<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+上面的示例使用值为 `none` 的 `preload` 属性来防止浏览器预加载*任何*视频数据。`poster` 属性为 `<video>` 元素提供一个占位符，用于占用视频加载时的空间。这样做的原因是视频加载默认行为因浏览器而异：
+
+- 在 Chrome 中，`preload` 的默认值过去是 `auto`，但从 Chrome 64 开始，它现在默认为 `metadata` 。即便如此，在桌面版 Chrome 上，可能会使用 `Content-Range` 标头预加载视频的一部分。Firefox、Edge 和 Internet Explorer 11 的行为类似。
+- 与桌面版 Chrome 一样，Safari 11.0 桌面版将预加载一系列视频。从版本 11.2 开始，则仅预加载视频元数据。[在 iOS 上的 Safari 中，视频从不会预加载](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW9)。
+- 启用 [Data Saver 模式](https://support.google.com/chrome/answer/2392284)后，`preload` 默认为 `none`。
+
+因为关于 `preload` 的浏览器默认行为并非一成不变，所以直接操作可能是您最好的选择。在用户启动回放的情况下，在所有平台上延迟加载视频的最简单方法是使用 `preload="none"`。`preload` 属性并不是延迟加载视频内容的唯一方法。[*使用视频预加载进行快速回放*](/fast-playback-with-preload/)可能会为您提供一些在 JavaScript 中使用视频回放的想法和见解。
+
+遗憾的是，当您想用视频代替动画 GIF 时，它并没有什么用，这将在接下来的内容中介绍。
+
+## 对于代替动画 GIF 的视频 {: #video-gif-replacement }
+
+虽然动画 GIF 使用广泛，但它们在许多方面都劣于等效的视频，尤其是文件大小。动画 GIF 可能需要几兆字节的数据。视觉质量相似的视频往往要小得多。
+
+使用 `<video>` 元素替换动画 GIF 不像 `<img>` 元素那样简单明了。动画 GIF 具有三个特征：
+
+1. 加载时自动播放。
+2. 不断循环（[尽管并非始终如此](https://davidwalsh.name/prevent-gif-loop)）。
+3. 没有音轨。
+
+使用 `<video>` 元素实现这一点应与下面内容类似：
+
+```html
+<video autoplay muted loop playsinline>
+  <source src="one-does-not-simply.webm" type="video/webm">
+  <source src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+`autoplay`、`muted` 和 `loop` 属性一目了然。[要在 iOS 中自动播放，`playsinline` 必不可少](https://webkit.org/blog/6784/new-video-policies-for-ios/)。现在，您拥有了可跨平台使用的准备就绪的视频即 GIF 替换项。但是如何延迟加载它呢？首先，相应地修改您的 `<video>` 标记：
+
+```html
+<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
+  <source data-src="one-does-not-simply.webm" type="video/webm">
+  <source data-src="one-does-not-simply.mp4" type="video/mp4">
+</video>
+```
+
+您会注意到添加了 [`poster` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/video#attr-poster)，该属性允许您指定一个占位符来占用 `<video>` 元素的空间，直到视频延迟加载。与 [`<img>` 延迟加载示例](/lazy-loading-images/)一样，将视频 URL 存放在每个 `<source>` 元素上的 `data-src` 属性中。从那里，使用类似于基于 Intersection Observer 的图像延迟加载示例的 JavaScript 代码：
+
+```javascript
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+  if ("IntersectionObserver" in window) {
+    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(video) {
+        if (video.isIntersecting) {
+          for (var source in video.target.children) {
+            var videoSource = video.target.children[source];
+            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.classList.remove("lazy");
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function(lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+});
+```
+
+延迟加载 `<video>` 元素时，需要迭代所有子 `<source>` 元素，并将其 `data-src` 属性改为 `src` 属性。完成后，需要通过调用元素的 `load` 方法来触发视频的加载，此后，媒体将根据 `autoplay` 属性开始自动播放。
+
+使用此方法，您将拥有一个模拟动画 GIF 行为的视频解决方案，但不会出现像动画 GIF 那样使用大量数据的情况，而且可以延迟加载此内容。
+
+## 延迟加载库 {: #libraries }
+
+以下库可以帮助您延迟加载视频：
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) 和 [lozad.js](https://github.com/ApoorvSaxena/lozad.js) 是仅使用 Intersection Observer 的超轻量级选项。因此它们的性能很好，但需要先进行 polyfill 然后才能在较旧的浏览器上使用。
+- [yall.js](https://github.com/malchata/yall.js) 是一个使用 Intersection Observer 并回退到事件处理程序的库。它与 IE11 和主要浏览器都兼容。
+- 如果您需要 React 特定的延迟加载库，或许应该考虑 [react-lazyload](https://github.com/jasonslyvia/react-lazyload) 。虽然它不使用 Intersection Observer，但*确实*为那些习惯于使用 React 开发应用程序的人们提供了一种熟悉的延迟加载图像方法。
+
+这些延迟加载库中的每一个都有详细介绍，而且有许多标记模式可以用于各种延迟加载工作。
diff --git a/src/site/content/zh/fast/lazy-loading/index.md b/src/site/content/zh/fast/lazy-loading/index.md
new file mode 100644
index 00000000000..304aa57cb18
--- /dev/null
+++ b/src/site/content/zh/fast/lazy-loading/index.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: 使用延迟加载提高加载速度
+authors:
+  - jlwagner
+  - rachelandrew
+date: 2019-08-16
+updated: 2020-06-09
+description: 本我解释了什么是延迟加载，以及为什么需要在网站上使用延迟加载元素。
+tags:
+  - performance
+  - images
+---
+
+网站典型负载中的[图像](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest)和[视频](http://beta.httparchive.org/reports/page-weight#bytesVideo)可能占据了相当大的比重。不幸的是，项目利益相关者可能不愿意从现有的应用程序中削减任何媒体资源。这种两难的局面令人沮丧，尤其是当所有相关方都想提高网站性能，但无法就如何实现这一目标达成一致时。幸运的是，延迟加载是一种降低初始页面有效负载*和*加载时间的解决方案，但同时不会对内容造成负面影响。
+
+## 什么是延迟加载？{: #what }
+
+延迟加载是一种在页面加载时推迟加载非关键资源的技术。相反，只会在需要时加载这些非关键资源。就图像而言，“非关键”就是指“屏幕外”。如果您使用过 Lighthouse 并检查了一些改进的机会，您可能已经在[推迟屏幕外图像审计](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)中看到了这方面的部分指南：
+
+<figure>{% Img src="image/admin/63NnMISWUUWD3mvAliwe.png", alt="Lighthouse 中推迟屏幕外图像审计的屏幕截图。", width="800", height="102" %}<figcaption> Lighthouse 的性能审计之一是识别屏幕外图像，这是延迟加载的候选对象。</figcaption></figure>
+
+您可能已经看到了延迟加载的实现，它是这样的：
+
+- 您抵达一个页面，并在阅读内容时开始滚动。
+- 在某个时候，您将占位符图像滚动到视区中。
+- 占位符图像突然被最终图像替换。
+
+在热门发布平台 [Medium](https://medium.com/) 上可以找到一个图像延迟加载的例子，它在页面加载时加载轻量级占位符图像，并在它们滚动到视区时用延迟加载的图像替换它们。
+
+<figure>{% Img src="image/admin/p5ahQ67QtZ20bgto7Kpy.jpg", alt="浏览中的网站 Medium 截图，它展示了延迟加载的作用。模糊的占位符在左边，加载的资源在右边。", width="800", height="493" %}<figcaption>图像延迟加载的示例。占位符图像在页面加载时加载（左），当滚动到视区时，最终图像在需要时加载。</figcaption></figure>
+
+如果您还不熟悉延迟加载，那么可能想知道该技术的作用以及好处。请仔细阅读，找出答案！
+
+## 为什么要延迟加载图像或视频而不是直接*加载*？{: #why }
+
+因为用户可能永远不会看到您正在加载的内容。这样做是有问题的，因为：
+
+- 它会浪费数据。如果不按流量计费，那么这并不是最糟糕的事情（尽管您可能会使用宝贵的带宽来下载用户确实会看到的其他资源）。然而，如果用户的连接使用计费流量，那么加载用户从未见过的内容就是在浪费他们的钱。
+- 它会浪费处理时间、电池和其他系统资源。下载媒体资源后，浏览器必须对其进行解码并在视区中呈现其内容。
+
+延迟加载图像和视频减少了初始页面加载时间、初始页面的大小和系统资源使用，所有这些都可以提高性能。
+
+## 实现延迟加载 {: #implementing }
+
+有多种方法可以实现延迟加载。在选择解决方案时，必须考虑支持的浏览器以及尝试延迟加载的内容。
+
+现代浏览器实现了[浏览器级别的延迟加载](/browser-level-image-lazy-loading/)，可以通过对图像和 iframe 使用`loading`属性实现。为了提供与旧浏览器的兼容性、或对没有内置延迟加载的元素执行延迟加载，您可以通过 JavaScript 实现。还有一些现有的库可以帮助您做到这一点。有关所有这些方法的完整详细信息，请参阅本网站的其他文章：
+
+- [延迟加载图片](/lazy-loading-images/)
+- [延迟加载视频](/lazy-loading-video/)
+
+此外，我们还编写了一份[延迟加载](/lazy-loading-best-practices)的潜在问题列表，以及在实现中需要注意的事项。
+
+## 结论
+
+如果使用得当，延迟加载图像和视频可以显著降低网站的初始加载时间和页面负载，包括[核心网络指标](/vitals)。用户不会因他们可能永远不会看到的媒体资源而招致不必要的网络活动和处理成本，但如果他们愿意，那么仍然可以查看这些资源。
+
+就性能改进技术而言，延迟加载是没有争议的。如果您的网站中有大量内嵌图像，这是减少不必要下载的绝佳方式。网站的用户和项目利益相关者会感激您的付出！
diff --git a/src/site/content/zh/fast/optimize-css-background-images-with-media-queries/index.md b/src/site/content/zh/fast/optimize-css-background-images-with-media-queries/index.md
new file mode 100644
index 00000000000..ab7ced60328
--- /dev/null
+++ b/src/site/content/zh/fast/optimize-css-background-images-with-media-queries/index.md
@@ -0,0 +1,132 @@
+---
+layout: post
+title: 使用媒体查询优化 CSS 背景图像
+authors:
+  - demianrenzulli
+description: 使用媒体查询发送仅有最低所需大小要求的图像，这种技术通常称为响应式图像。
+date: 2020-03-05
+updated: 2020-03-05
+tags:
+  - performance
+---
+
+许多站点会请求尚未针对某些屏幕进行优化的大量资源（例如图像），还会发送一些大型 CSS 文件，而其中所包含的样式某些设备可能永远也不会使用。因此，现在流行使用一种媒体查询技术，用于将定制的样式表和资产发送到各种屏幕，从而减少传输给用户的数据量并提高页面加载性能。本指南将向您展示如何使用媒体查询发送仅有最低所需大小要求的图像，这种技术通常称为**响应式图像**。
+
+## 先决条件
+
+本指南假设您非常熟悉 [Chrome DevTools](https://developer.chrome.com/docs/devtools/)。如果您愿意，可以改用其他浏览器的 DevTools。只需将本指南中的 Chrome DevTools 屏幕截图映射回您所选浏览器中的相关功能。
+
+## 了解响应式背景图像
+
+首先，分析一下未优化演示的网络流量：
+
+1. 在一个新 Chrome 标签中打开[未优化的演示](https://use-media-queries-unoptimized.glitch.me/)。{% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Aside %}如果您需要有关 DevTools 的更多帮助，请查看[使用 Chrome DevTools 检查网络活动](https://developer.chrome.com/docs/devtools/network/)。{% endAside %}
+
+您会看到请求的唯一图像为 `background-desktop.jpg`，大小为 **1006KB**：
+
+<figure>{% Img src="image/admin/K8P4MHp2FSnZYTw3ZVkG.png", alt="DevTools 未优化背景图像的网络跟踪。", width="800", height="126" %}</figure>
+
+调整浏览器窗口的大小，并发现网络日志未显示该页面发出的任何新请求。这表示所有屏幕尺寸都使用相同的图像背景。
+
+您可以在 [style.css](https://use-media-queries-unoptimized.glitch.me/style.css) 中看到控制背景图像的样式：
+
+```css
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+所使用的每个属性的含义如下：
+
+- `background-position: center center`：垂直和水平居中图像。
+- `background-repeat: no-repeat`：仅显示图像一次。
+- `background-attachment: fixed`：避免背景图像滚动。
+- `background-size: cover`：调整图像大小以覆盖整个容器。
+- `background-image: url(images/background-desktop.jpg)`：图片的 URL。
+
+结合使用后，这些样式会告诉浏览器调整背景图像适应不同的屏幕高度和宽度。这是实现响应式背景的第一步。
+
+对所有屏幕尺寸使用一个背景图像具有一定限制性：
+
+- 无论屏幕尺寸如何，发送的字节数是相同的，即使对于某些设备（如手机），更小、更轻的图像背景看起来也一样好。通常，您希望发送尽可能小的图像，但在用户屏幕上仍然看起来不错，从而提高性能并保存用户数据。
+- 在较小的设备中，图像将被拉伸或剪切以覆盖整个屏幕，可能会向用户隐藏背景的相关部分。
+
+在下一节中，您将学习如何根据用户的设备应用优化来加载不同的背景图像。
+
+## 使用媒体查询
+
+使用媒体查询是一种常用技术，用于声明仅适用于特定媒体或设备类型的样式表。实施方法为使用 [@media 规则](https://developer.mozilla.org/docs/Web/CSS/@media)，允许您定义一组断点，可在其中定义特定样式。如果满足 `@media` 规则定义的条件（例如，特定屏幕宽度），将应用在断点内定义的样式组。
+
+可以使用以下步骤将媒体查询应用于[站点](https://use-media-queries-unoptimized.glitch.me/)，以便根据请求页面的设备的最大宽度使用不同的图像。
+
+- 在 `style.css` 中，移除包含背景图像 URL 的行：
+
+```css//4
+body {
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat; background-size: cover;
+  background-image: url(images/background-desktop.jpg);
+}
+```
+
+- 接下来，根据移动设备、平板电脑和桌面设备屏幕通常所具备的常见尺寸（以像素为单位），为每种屏幕宽度创建一个断点：
+
+对于移动设备：
+
+```css
+@media (max-width: 480px) {
+    body {
+        background-image: url(images/background-mobile.jpg);
+    }
+}
+```
+
+对于平板电脑：
+
+```css
+@media (min-width: 481px) and (max-width: 1024px) {
+    body {
+        background-image: url(images/background-tablet.jpg);
+    }
+}
+```
+
+对于桌面设备：
+
+```css
+@media (min-width: 1025px) {
+    body {
+	    background-image: url(images/background-desktop.jpg);
+   }
+}
+```
+
+在浏览器中打开优化版本 [style.css](https://use-media-queries-optimized.glitch.me/style.css) 以查看所做的更改。
+
+{% Aside %}优化演示中使用的图像已调整大小以适应不同的屏幕尺寸。本指南并未介绍如何调整图像大小，如果您想要了解更多相关信息，可查看[响应式图像服务指南](/serve-responsive-images/)，其中介绍了一些有用工具，例如 [sharp npm 包](https://www.npmjs.com/package/sharp)和 [ImageMagick CLI](https://www.imagemagick.org/script/index.php)。{% endAside %}
+
+## 测量不同设备
+
+下一步，在不同的屏幕尺寸和模拟移动设备中可视化生成的站点：
+
+1. 在一个新的 Chrome 标签页中打开[优化的网站](https://use-media-queries-optimized.glitch.me/)。
+2. 将您的视区缩小一些（小于 `480px`）。{% Instruction 'devtools-network', 'ol' %} {% Instruction 'reload-page', 'ol' %}请注意 `background-mobile.jpg` 图像的请求方式。
+3. 将您的视口放大一些。如果宽度超过 `480px`，请注意 `background-tablet.jpg` 的请求方式。如果旦宽度超过 `1025px`，请注意 `background-desktop.jpg` 的请求方式。
+
+浏览器屏幕的宽度改变后，会请求新的图像。
+
+特别是当宽度低于在移动断点中定义的值 (480px) 时，您会看到以下网络日志：
+
+<figure>{% Img src="image/admin/jd2kHIefYf91udpFEmvx.png", alt="DevTools 优化背景图像的网络跟踪。", width="800", height="125" %}</figure>
+
+新的移动设备背景大小比桌面设备背景**小 67%**。
+
+## 总结
+
+在本指南中，您已经学会了应用媒体查询来请求根据特定屏幕尺寸定制的背景图像，还学会在较小设备（如手机）上访问网站时节省字节。您使用 `@media` 规则来实施响应式背景。这种技术受到所有浏览器的广泛支持。CSS 新功能 [image-set()](https://www.w3.org/TR/css-images-4/#image-set-notation)，可以用于通过较少代码行实现相同目的。在撰写本文时，并非所有浏览器都支持此功能，但您可能希望密切关注对此功能采纳方面的进展，因为它可以代表此技术的一个有趣替代方案。
diff --git a/src/site/content/zh/fast/optimize-webfont-loading/index.md b/src/site/content/zh/fast/optimize-webfont-loading/index.md
new file mode 100644
index 00000000000..93ff48ddd0e
--- /dev/null
+++ b/src/site/content/zh/fast/optimize-webfont-loading/index.md
@@ -0,0 +1,148 @@
+---
+layout: post
+title: 优化 WebFont 加载和呈现
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: 本文解释加载页面时 WebFonts 不可用的条件下如何加装 WebFonts 以防止布局偏移和空白页面。
+tags:
+  - performance
+  - fonts
+feedback:
+  - api
+---
+
+包含所有样式变体（您可能不需要）以及所有字形（可能不使用）的“完整”WebFont，很容易导致数兆字节的下载。在本文中，您将了解如何优化 WebFonts 的加载，以便访问者只下载他们将使用的内容。
+
+为了解决包含所有变体的大文件的问题，`@font-face` CSS 规则专门设计用于允许您将字体系列拆分为资源集合。例如 unicode 子集和不同的样式变体。
+
+鉴于这些声明，浏览器会计算出所需的子集和变体，并下载呈现文本所需的最小集合，这非常方便。但是，如果您不小心，它也会在关键呈现路径中造成性能瓶颈并延迟文本呈现。
+
+### 默认行为
+
+字体的延迟加载具有重要的隐藏含义，可能会延迟文本呈现：浏览器必须先构建依赖于 DOM 和 CSSOM 树的[呈现树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)，然后才能知道它需要哪些字体资源来呈现文本。因此，字体请求会在其他关键资源之后延迟很长时间，并且在获取资源之前浏览器可能无法呈现文本。
+
+{% Img src="image/admin/NgSTa9SirmikQAq1G5fN.png", alt="字体关键呈现路径", width="800", height="303" %}
+
+1. 浏览器请求 HTML 文档。
+2. 浏览器开始解析 HTML 响应并构建 DOM。
+3. 浏览器发现 CSS、JS 和其他资源并调度请求。
+4. 浏览器在接收到所有 CSS 内容后构建 CSSOM，并将其与 DOM 树组合以构建呈现树。
+    - 字体请求在呈现树指示需要哪些字体变体来呈现页面上的指定文本后分派。
+5. 浏览器执行布局并将内容绘制到屏幕上。
+    - 如果字体尚不可用，浏览器可能不会呈现任何文本像素。
+    - 字体可用后，浏览器会绘制文本像素。
+
+页面内容的第一次绘制（可以在呈现树构建后不久完成）与对字体资源的请求之间的“竞争”是造成“空白文本问题”的原因，浏览器可能会呈现页面布局但忽略任何文本。
+
+通过预加载 WebFonts 并使用 `font-display` 来控制浏览器如何处理不可用的字体，您可以防止由于字体加载而导致的空白页面和布局偏移。
+
+### 预加载 WebFont 资源
+
+如果您的页面很有可能需要在您事先知道的 URL 上托管特定的 WebFont，您可以利用[资源优先级](https://developers.google.com/web/fundamentals/performance/resource-prioritization)。使用 `<link rel="preload">` 将在关键呈现路径的早期触发对 WebFont 的请求，而无需等待创建 CSSOM。
+
+### 自定义文本呈现延迟
+
+虽然预加载使呈现页面内容时 WebFont 更有可能可用，但它不提供任何保证。您仍然需要考虑浏览器在呈现使用尚不可用的 `font-family` 文本时的行为。
+
+在帖文[避免字体加载期间的不可见文本](/avoid-invisible-text/)中，您可以看到默认的浏览器行为不一致。不过，您可以使用 [`font-display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) 告诉现代浏览器您希望它们如何表现。
+
+与某些浏览器实现的现有字体超时行为类似，`font-display` 将字体下载的生命周期划分为三个主要时期：
+
+1. 第一个是**字体块期**。在此期间，如果未加载字体，则任何尝试使用字体的元素都必须使用不可见的后备字体进行呈现。如果字体在块期间成功加载，则字体可以正常使用。
+2. **字体交换期**紧接在字体块期之后。在此期间，如果未加载字体，则任何尝试使用字体的元素都必须使用后备字体进行呈现。如果字体在交换期间成功加载，则字体将正常使用。
+3. **字体失效期**在字体交换期之后立即发生。如果在此期间开始时字体尚未加载，则将其标记为加载失败，从而导致正常的字体回退。否则，正常使用字体。
+
+了解这些时期意味着您可以使用 `font-display` 来决定您的字体应如何呈现，具体取决于是否或何时下载。
+
+要使用 `font-display` 属性，请将其添加到您的 `@font-face` 规则中：
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  font-display: auto; /* or block, swap, fallback, optional */
+  src: local('Awesome Font'),
+       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
+       url('/fonts/awesome-l.woff') format('woff'),
+       url('/fonts/awesome-l.ttf') format('truetype'),
+       url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* Latin glyphs */
+}
+```
+
+`font-display` 目前支持以下范围的值：
+
+- `auto`
+- `block`
+- `swap`
+- `fallback`
+- `optional`
+
+有关预加载字体和 `font-display` 属性的更多信息，请参阅以下帖文：
+
+- [避免字体加载期间不可见的文本](/avoid-invisible-text/)
+- [使用 font-display 控制字体性能](https://developers.google.com/web/updates/2016/02/font-display)
+- [通过预加载可选字体防止布局偏移和不可见文本 (FOIT) 闪烁](/preload-optional-fonts/)
+
+### 字体加载 API
+
+同时使用 `<link rel="preload">` 和 CSS `font-display` 可让您对字体的加载和呈现进行自如地控制，不会增加太多开销。但是，如果您需要额外的自定义项目，并且愿意承担运行 JavaScript 所带来的开销，还有另一种选择。
+
+[字体加载 API](https://www.w3.org/TR/css-font-loading/) 提供脚本接口来定义和操作 CSS 字体、跟踪它们的下载进度，并覆盖它们的默认延迟加载行为。例如，如果您确定需要特定的字体变体，您可以定义它并告诉浏览器立即启动字体资源的获取：
+
+```javascript
+var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
+  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
+});
+
+// don't wait for the render tree, initiate an immediate fetch!
+font.load().then(function() {
+  // apply the font (which may re-render text and cause a page reflow)
+  // after the font has finished downloading
+  document.fonts.add(font);
+  document.body.style.fontFamily = "Awesome Font, serif";
+
+  // OR... by default the content is hidden,
+  // and it's rendered after the font is available
+  var content = document.getElementById("content");
+  content.style.visibility = "visible";
+
+  // OR... apply your own render strategy here...
+});
+```
+
+此外，因为您可以检查字体状态（通过[`check()`](https://www.w3.org/TR/css-font-loading/#font-face-set-check) ）方法并跟踪其下载进度，因此您还可以定义在页面上呈现文本的自定义策略：
+
+- 您可以保留对所有文本的呈现，直到字体可用。
+- 您可以为每种字体实现自定义超时。
+- 您可以使用回退字体来解锁呈现，并在字体可用后注入使用所需字体的新样式。
+
+最重要的是，您还可以针对页面上的不同内容混合搭配上述策略。例如，您可以延迟某些部分的文本呈现，直到字体可用，使用后备字体，然后在字体下载完成后重新呈现。
+
+{% Aside %}字体加载 API [在旧浏览器中不可用](http://caniuse.com/#feat=font-loading)。考虑使用 [FontLoader polyfill](https://github.com/bramstein/fontloader) 或 [WebFontloader 库](https://github.com/typekit/webfontloader)来提供类似的功能，尽管额外的 JavaScript 依赖会带来更多开销。 {% endAside %}
+
+### 适当的缓存十分必要
+
+字体资源通常是不经常更新的静态资源。因此，它们非常适合长时间的最大寿命期 - 确保为所有字体资源指定[条件 ETag 标头](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags)和[最佳缓存控制策略。](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control)
+
+如果您的 Web 应用程序使用[服务工作进程](https://developer.chrome.com/docs/workbox/service-worker-overview/) ，则使用[缓存优先策略](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network)提供字体资源适用于大多数用例。
+
+不应该使用 [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 或 [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) 存储字体；因为它们中的每一个都有自己的一套性能问题。浏览器的 HTTP 缓存提供最佳和最强大的机制来向浏览器传送字体资源。
+
+## WebFont 加载清单
+
+- 使用 **`<link rel="preload">` 、`font-display` 或字体加载 API 自定义字体加载和呈现：**默认的延迟加载行为可能会导致文本呈现延迟。这些 Web 平台功能允许您为特定字体覆盖此行为，并为页面上的不同内容指定自定义呈现和超时策略。
+- **指定重新验证和最佳缓存策略：**字体是不经常更新的静态资源。确保您的服务器提供长时间的最大寿命期时间戳和重新验证令牌，以允许在不同页面之间有效地重用字体。如果使用服务工作进程，则缓存优先策略是合适的选择。
+
+## 使用 Lighthouse 自动测试 WebFont 加载行为
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 可以帮助自动执行相关过程，确保您遵循 Web 字体优化的最佳实践。
+
+以下审计可以帮助您确保您的页面随着时间的推移继续遵循 Web 字体优化最佳实践：
+
+- [预加载密钥请求](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [对静态资产使用低效的缓存策略](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [在 WebFont 加载期间所有文本保持可见](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
diff --git a/src/site/content/zh/fast/preload-critical-assets/index.md b/src/site/content/zh/fast/preload-critical-assets/index.md
new file mode 100644
index 00000000000..267f80dc858
--- /dev/null
+++ b/src/site/content/zh/fast/preload-critical-assets/index.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: 预加载关键资产以提高加载速度
+authors:
+  - houssein
+  - mihajlija
+description: 打开网页后，浏览器就会从服务器请求 HTML 文档，解析 HTML 文件的内容，并为任何其他外部引用提交单独请求。关键请求链代表着浏览器优先处理和获取的资源顺序。
+date: 2018-11-05
+updated: 2020-05-27
+codelabs:
+  - codelab-preload-critical-assets
+  - codelab-preload-web-fonts
+tags:
+  - performance
+feedback:
+  - api
+---
+
+打开网页时，浏览器会从服务器请求 HTML 文档，解析其内容，并为引用资源提交单独请求。作为开发人员，您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源，加快加载的过程。本文介绍了如何使用 `<link rel="preload">` 来达成此目的。
+
+## 预加载的工作原理
+
+预加载最适合用于浏览器通常较晚发现的资源。
+
+<figure>{% Img src="image/admin/Ad9PLq3DcQt9Ycp63z6O.png", alt="Chrome DevTools Network 面板的屏幕截图。", width="701", height="509" %}<figcaption>在本例中，Pacifico 字体是在样式表通过 <a href="/reduce-webfont-size/#defining-a-font-family-with-@font-face)"><code>@font-face</code></a> 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。</figcaption></figure>
+
+通过预加载某个资源，您希望浏览器可以比正常发现它更早地获取该资源，因为您认为它对当前页面很重要。
+
+<figure>{% Img src="image/admin/PgRbERrxLGfF439yBMeY.png", alt="应用预加载后 Chrome DevTools Network 面板的屏幕截图。", width="701", height="509" %}<figcaption>在本例中，已预加载了 Pacifico 字体，所以下载会与样式表并行进行。</figcaption></figure>
+
+关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse 会将位于该链第三层的资产识别为后期发现的资产。您可以使用[**预加载关键请求**](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)审计来确定要预加载的资源。
+
+{% Img src="image/admin/BPUTHBNZFbeXqb0dVx2f.png", alt="Lighthouse 的预加载关键请求审计。", width="745", height="97" %}
+
+您可以通过在 HTML 文档的头部添加带有 `rel="preload"` 的 `<link>` 标记来预加载资源：
+
+```html
+<link rel="preload" as="script" href="critical.js">
+```
+
+浏览器会缓存预加载的资源，以便在需要时立即可用。（它不会执行脚本或应用样式表。）
+
+{% Aside %}在实施预加载后，包括 [Shopify、Financial Times 和 Treebo](/tti/)在内的许多网站在以用户为中心的指标（例如 [Time to Interactive](/fcp/) 和 [First Contentful Paint](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)）等方面，都实现了 1 秒的改进。 {% endAside %}
+
+浏览器会根据情况执行诸如 [`preconnect`](/preconnect-and-dns-prefetch) 和 [`prefetch`](/link-prefetch) 等资源提示。而另一方面，`preload` 对浏览器来说是强制性的。现代浏览器已经非常擅长对资源进行优先级排序，这就是为什么谨慎使用 `preload` 并且只预加载最关键的资源那么重要。
+
+`load` 事件后大约 3 秒会触发 Chrome 中的控制台警告。
+
+{% Img src="image/admin/z4FbCezjXHxaIhq188TU.png", alt="Chrome DevTools Console 警告关于未使用的预加载资源。", width="800", height="228" %}
+
+{% Aside %}所有现代浏览器均支持 [`preload`](https://developer.mozilla.org/docs/Web/HTML/Preloading_content#Browser_compatibility)。 {% endAside %}
+
+## 用例
+
+{% Aside 'caution' %}在撰写本文时，Chrome 存在一个未解决的 [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=788757)，即预加载请求比其他更高优先级资源的获取速度更快。在解决此问题之前，请注意预加载的资源如何“跳过队列”并比应有的时间更早地被请求。 {% endAside %}
+
+### 预加载 CSS 中定义的资源
+
+在浏览器下载并解析 CSS 文件之前，不会发现这些文件中使用 [`@font-face`](/reduce-webfont-size/#defining-a-font-family-with-@font-face) 规则定义的字体或背景图像。预加载这些资源可确保在下载 CSS 文件之前获取它们。
+
+### 预加载 CSS 文件
+
+如果您使用了[关键 CSS 方法](/extract-critical-css)，那么 CSS 将分成两部分。渲染首屏内容所需的关键 CSS 内联在文档的 `<head>` 中，非关键 CSS 通常使用 JavaScript 延迟加载。在加载非关键 CSS 之前等待 JavaScript 执行会导致用户滚动时呈现延迟，因此最好使用 `<link rel="preload">` 更快地启动下载。
+
+### 预加载 JavaScript 文件
+
+由于浏览器不执行预加载的文件，因此预加载有助于将获取与[执行](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)分开，这可以改善 Time to Interactive 等指标。如果您[拆分](/reduce-javascript-payloads-with-code-splitting) JavaScript 包并仅预加载关键块，则预加载效果最佳。
+
+## 如何实现 rel=preload
+
+实现 `preload` 最简单的方法是在文档的 `<head>` 中添加一个`<link>` 标记：
+
+```html
+<head>
+  <link rel="preload" as="script" href="critical.js">
+</head>
+```
+
+提供 `as` 属性可帮助浏览器根据其类型来设置预获取资源的优先级，设置正确的标头，以及确定资源是否已存在于缓存中。此属性可接受的值包括： `script` 、`style` 、`font` 和  `image` [等等](https://developer.mozilla.org/docs/Web/HTML/Element/link#Attributes)。
+
+{% Aside %} 请查看 [Chrome Resource Priorities and Scheduling](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit)文档，详细了解浏览器如何确定不同类型资源的优先级。 {% endAside %}
+
+{% Aside 'caution' %} 省略 `as` 属性或使用了无效值，就相当于 [XHR 请求](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)，这时浏览器不知道它获取的内容，因此无法确定正确的优先级。它还可能导致某些资源（例如脚本）被获取两次。 {% endAside %}
+
+某些类型的资源，例如字体，以[匿名模式](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements)加载。对于这些资源，您必须设置 `preload` 的 `crossorigin` 属性：
+
+```html
+<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+{% Aside 'caution' %} 没有设置 `crossorigin` 属性的预加载的字体将被获取两次！ {% endAside %}
+
+另外，`<link>` 元素还接受 [`type` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/link#attr-type)，它包含链接资源的[MIME 类型](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。浏览器使用 `type` 属性的值来确保资源仅在其文件类型受支持时才被预加载。如果浏览器不支持指定的资源类型，它将忽略 `<link rel="preload">` 。
+
+{% Aside 'codelab' %}[通过预加载 web 字体提高网页性能](/codelab-preload-web-fonts)。 {% endAside %}
+
+您可以通过 [`Link` HTTP 标头](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link)预加载任何类型的资源：
+
+`Link: </css/style.css>; rel="preload"; as="style"`
+
+在 HTTP 标头中指定 `preload` 的一个好处是，浏览器不需要解析文档来发现它，这在某些情况下可以提供一些小幅改进。
+
+### 使用 webpack 预加载 JavaScript 模块
+
+如果您使用了创建应用程序构建文件的模块打包器，则需要检查它是否支持预加载标签的注入。在 [webpack](https://webpack.js.org/) 4.6.0 或更高版本中，它通过在 `import()`中使用[magic comments（魔法注释）](https://webpack.js.org/api/module-methods/#magic-comments)支持预加载：
+
+```js
+import(_/* webpackPreload: true */_ "CriticalChunk")
+```
+
+如果您使用的是旧版 webpack，请使用第三方插件，例如 [preload-webpack-plugin](https://github.com/GoogleChromeLabs/preload-webpack-plugin) 。
+
+## 结论
+
+为提高网页速度，请预加载浏览器来发现较晚的重要资源。预加载全部资源会适得其反，因此请谨慎使用 `preload`，并[衡量它在现实中的影响](/fast#measure-performance-in-the-field)。
diff --git a/src/site/content/zh/fast/publish-modern-javascript/index.md b/src/site/content/zh/fast/publish-modern-javascript/index.md
new file mode 100644
index 00000000000..f81c46d4730
--- /dev/null
+++ b/src/site/content/zh/fast/publish-modern-javascript/index.md
@@ -0,0 +1,304 @@
+---
+layout: post
+title: 发布、传输和安装现代 JavaScript 以实现更快的应用程序
+subhead: 通过开启现代 JavaScript 依赖项和输出来提高性能。
+hero: image/admin/UQbMiPKbXL1EDjtWsLju.jpg
+authors:
+  - houssein
+  - developit
+description: 与转换的 ES5 相比，现代 JavaScript 提供了尺寸和性能上的改进，并且在 95% 的 Web 浏览器中获得支持。启用现代 JavaScript 输出会给应用程序带来这些好处，但作用会受到已经转换为 ES5 的依赖项的限制。本指南演示了如何将现代软件包发布到 npm，以及如何安装和以最佳方式捆绑现代 JavaScript 软件包。
+date: 2020-12-10
+updated: 2020-12-16
+codelabs:
+  - codelab-serve-modern-code
+tags:
+  - performance
+  - blog
+---
+
+超过 90% 的浏览器能够运行现代 JavaScript，但传统 JavaScript 的流行仍然是当今 Web 性能问题的最大原因之一。[EStimator.dev](http://estimator.dev/) 是一个简单的基于 Web 的工具，它可以计算网站在采用现代 JavaScript 语法后可实现的尺寸和性能改进。
+
+<figure data-size="full">{% Img src="image/admin/FHHnXqdjdsC6PNSSnnC4.png", alt="EStimator.dev 分析显示，网站使用现代 JavaScript 可以提速 9%。", width="800", height="785" %} <figcaption> EStimator.dev </figcaption></figure>
+
+当今的 Web 受到传统 JavaScript 限制，没有任何单一优化可以像使用 **ES2017** 语法编写、发布和传输网页或软件包那样提高性能。
+
+## 现代 JavaScript
+
+现代 JavaScript 的特征不是使用特定的 ECMAScript 规范版本编写代码，而是使用所有现代浏览器都支持的语法。Chrome、Edge、Firefox 和 Safari 等现代网络浏览器占据[浏览器市场的 90%](https://www.caniuse.com/usage-table) 以上，依赖相同底层渲染引擎的其他浏览器占另外 5%。这意味着全球 95% 的 Web 流量所来自的浏览器支持过去 10 年来最广泛使用的 JavaScript 语言特性，包括：
+
+- 类 (ES2015)
+- 箭头函数 (ES2015)
+- 生成器 (ES2015)
+- 块范围 (ES2015)
+- 解构 (ES2015)
+- 剩余和展开参数 (ES2015)
+- 对象速记 (ES2015)
+- 异步/等待 (ES2017)
+
+较新版本的语言规范中的特性在现代浏览器中获得的支持通常不太一致。例如，许多 ES2020 和 ES2021 特性仅在 70% 的浏览器市场获得支持 — 仍然是大多数浏览器，但还不够安全，不能直接依赖这些特性。这意味着尽管“现代”JavaScript 是一个活动目标，但 ES2017 拥有最广泛的浏览器兼容性，[同时包含大多数常用的现代语法特性](https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c)。换句话说，**ES2017 目前最接近现代语法**。
+
+## 传统 JavaScript
+
+传统 JavaScript 是明确避免使用上述所有语言特性的代码。大多数开发人员使用现代语法编写源代码，但将所有内容编译为传统语法以增加浏览器支持。编译为传统语法确实会增加浏览器支持，但效果通常比我们想象的小。在许多情况下，支持度从 95% 左右增加到 98%，但同时产生了大量成本：
+
+- 传统 JavaScript 通常比等效的现代代码大 20% 左右，而且速度更慢。工具缺陷和错误配置通常会进一步扩大这一差距。
+
+- 安装的库占典型生产 JavaScript 代码的 90%。库代码会由于 polyfill 和 helper 重复而产生更高的传统 JavaScript 开销，而发布现代代码可以避免这个问题。
+
+## npm 上的现代 JavaScript
+
+最近，Node.js 标准化了一个 `"exports"` 字段来定义[软件包的入口点](https://nodejs.org/api/packages.html#packages_package_entry_points)：
+
+```json
+{
+  "exports": "./index.js"
+}
+```
+
+`"exports"` 字段引用的模块意味着 Node 版本至少为 12.8，它支持 ES2019。这意味着使用 `"exports"` 字段引用的任何模块都可以*使用现代 JavaScript 编写*。软件包使用者必须假定具有 `"exports"` 字段的模块包含现代代码并在必要时进行转换。
+
+### 仅现代
+
+如果要发布采用现代代码的软件包，并让使用者在将其用作依赖项时处理转换，则仅使用 `"exports"` 字段。
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js"
+}
+```
+
+{% Aside 'caution' %} *不推荐*这种方法。在完美的世界中，每个开发人员都已经将编译系统配置为将所有依赖项 (`node_modules`) 转换为所需语法。但是，目前情况并非如此，仅使用现代语法发布软件包将使其无法在通过旧版浏览器访问的应用程序中使用。{% endAside %}
+
+### 具有传统回退的现代代码
+
+将 `"exports"` 字段与 `"main"` 一起使用，以便使用现代代码发布软件包，但还包括用于旧版浏览器的 ES5 + CommonJS 回退。
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs"
+}
+```
+
+### 具有传统回退的现代代码和 ESM 捆绑程序优化
+
+除了定义回退 CommonJS 入口点，还可以使用 `"module"` 字段指向类似的传统回退捆绑包，但该捆绑包使用 JavaScript 模块语法 (`import` 和 `export`)。
+
+```json
+{
+  "name": "foo",
+  "exports": "./modern.js",
+  "main": "./legacy.cjs",
+  "module": "./module.js"
+}
+```
+
+许多捆绑程序（如 webpack 和 Rollup）依赖该字段来利用模块特性和实现[摇树优化](/commonjs-larger-bundles/#how-does-commonjs-affect-your-final-bundle-size)。这仍然是一个传统捆绑包，不包含除了 `import`/`export` 语法之外的任何现代代码，所以使用这种方法来传输具有传统回退、但仍然针对捆绑进行了优化的现代代码。
+
+## 应用程序中的现代 JavaScript
+
+第三方依赖项构成了 Web 应用程序中绝大多数的典型生产 JavaScript 代码。虽然 npm 依赖项在历史上一直以 ES5 语法的形式发布，但这不再是一个安全假设，并且依赖项更新可能会破坏应用程序的浏览器支持。
+
+随着越来越多的 npm 包转向现代 JavaScript，确保构建工具设置为能够处理它们很重要。您所依赖的一些 npm 包很有可能已经在使用现代语言特性。有许多选择可使用 npm 中的现代代码而不会破坏应用程序在旧版浏览器中的体验，但总体思路是让编译系统将依赖项转换为与源代码相同的目标语法。
+
+## webpack
+
+从 webpack 5 开始，现在可以配置 webpack 在生成捆绑包和模块的代码时将使用的语法。这不会转换您的代码或依赖项，只影响由 webpack 生成的“粘附”代码。要指定浏览器支持目标，请在您的项目中添加一个 [browserslist 配置](https://github.com/browserslist/browserslist#readme)，或者直接在 webpack 配置中添加：
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+};
+```
+
+还可以将 webpack 配置为生成优化的捆绑包，当以现代 ES 模块环境为目标时，这些捆绑包会省略不必要的包装函数。这也将 webpack 配置为使用 `<script type="module">` 加载代码拆分捆绑包。
+
+```js
+module.exports = {
+  target: ['web', 'es2017'],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
+};
+```
+
+有许多 webpack 插件可以编译和传输现代 JavaScript，同时仍然支持旧版浏览器，例如 Optimize Plugin 和 BabelEsmPlugin。
+
+### Optimize Plugin
+
+[Optimize Plugin](https://github.com/developit/optimize-plugin) 是一个 webpack 插件，它可以将最终的捆绑代码从现代 JavaScript 转换为传统 JavaScript，而不是单独的源文件。它是一个自包含设置，允许 webpack 配置假定所有内容都是现代 JavaScript，没有针对多个输出或语法的特殊分支。
+
+由于 Optimize Plugin 针对捆绑包而不是单个模块进行操作，因此它会平等处理应用程序代码和依赖项。这样便可以安全地使用 npm 中的现代 JavaScript 依赖项，因为它们的代码将被捆绑并转换为正确的语法。它还可以比涉及两个编译步骤的传统解决方案更快，同时仍然为现代和旧版浏览器生成单独的捆绑包。这两套捆绑包设计为使用[模块/无模块模式](/serve-modern-code-to-modern-browsers/)加载。
+
+```js
+// webpack.config.js
+const OptimizePlugin = require('optimize-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new OptimizePlugin()],
+};
+```
+
+`Optimize Plugin` 可以比自定义 webpack 配置更快、更高效，后者通常单独捆绑现代和传统代码。它还可以处理运行中的 [Babel](https://babeljs.io/)，并使用 [Terser](https://terser.org/) 以单独的针对现代和传统输出优化的设置，使捆绑包最小化。最后，生成的传统捆绑包所需的 polyfill 将提取到一个专用脚本中，这样在较新的浏览器中不会复制或不必要地加载它们。
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/fast-publish-modern-javascript/transpile-before-after.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>比较：转换源模块两次与转换生成的捆绑包。</figcaption></figure>
+
+### BabelEsmPlugin
+
+[BabelEsmPlugin](https://github.com/prateekbh/babel-esm-plugin) 是一个 webpack 插件，它与 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 一起工作来生成现有捆绑包的现代版本，以将更少的转换代码传输到现代浏览器。它是 [Next.js](https://nextjs.org/) 和 [Preact CLI](https://preactjs.com/cli/) 使用最多的模块/无模块现成解决方案。
+
+```js
+// webpack.config.js
+const BabelEsmPlugin = require('babel-esm-plugin');
+
+module.exports = {
+  //...
+  module: {
+    rules: [
+      // your existing babel-loader configuration:
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new BabelEsmPlugin()],
+};
+```
+
+`BabelEsmPlugin` 支持多种 webpack 配置，因为它运行应用程序的两个基本独立的版本。对于大型应用程序，编译两次可能需要一点额外的时间，但是这种技术允许 `BabelEsmPlugin` 无缝集成到现有 webpack 配置中，使其成为最方便的选择之一。
+
+### 将 babel-loader 配置为转换 node_modules
+
+如果使用 `babel-loader` 而没有使用前两个插件之一，则需要执行一个重要的步骤才能使用现代 JavaScript npm 模块。定义两个单独的 `babel-loader` 配置可以将 `node_modules` 中的现代语言特性自动编译为 ES2017，同时仍然使用 Babel 插件和项目配置中定义的预设来转换您自己的第一方代码。这不会为模块/无模块设置生成现代和传统捆绑包，但可以安装和使用包含现代 JavaScript 的 npm 软件包，而不会破坏旧版浏览器体验。
+
+[webpack-plugin-modern-npm](https://www.npmjs.com/package/webpack-plugin-modern-npm) 使用这种技术来编译在 `package.json` 中具有 `"exports"` 字段的 npm 依赖项，因为它们可能包含现代语法：
+
+```js
+// webpack.config.js
+const ModernNpmPlugin = require('webpack-plugin-modern-npm');
+
+module.exports = {
+  plugins: [
+    // auto-transpile modern stuff found in node_modules
+    new ModernNpmPlugin(),
+  ],
+};
+```
+
+或者，可以通过在解析模块时检查 `package.json` 中是否存在 `"exports"` 字段，在 webpack 配置中手动实现该技术。为简洁起见而省略缓存，自定义实现可能如下所示：
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Transpile for your own first-party code:
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      // Transpile modern dependencies:
+      {
+        test: /\.js$/i,
+        include(file) {
+          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
+          try {
+            return dir && !!require(dir[0] + 'package.json').exports;
+          } catch (e) {}
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            configFile: false,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+使用此方法时，您需要确保缩小器支持现代语法。[Terser](https://github.com/terser/terser#minify-options) 和 [uglify-es](https://github.com/mishoo/UglifyJS/tree/harmony#minify-options) 都有指定 `{ecma: 2017}` 的选项，以便在压缩和格式化期间保留 ES2017 语法并在某些情况下生成该语法。
+
+## Rollup
+
+Rollup 内部支持生成多组捆绑包作为单个版本的一部分，并默认生成现代代码。因此，可以将 Rollup 配置为通过您可能已经在使用的官方插件生成现代和传统捆绑包。
+
+### @rollup/plugin-babel
+
+如果使用 Rollup，[`getBabelOutputPlugin()` 方法](https://github.com/rollup/plugins/tree/master/packages/babel#running-babel-on-the-generated-code)（由 Rollup 的[官方 Babel 插件](https://github.com/rollup/plugins/tree/master/packages/babel)提供）会转换生成的捆绑包中的代码，而不是单个源模块。Rollup 内部支持生成多组捆绑包作为单个版本的一部分，每个捆绑包都有自己的插件。您可以通过不同的 Babel 输出插件配置来传递各个捆绑包，从而生成不同的现代和传统捆绑包：
+
+```js
+// rollup.config.js
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    // modern bundles:
+    {
+      format: 'es',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {esmodules: true},
+                bugfixes: true,
+                loose: true,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    // legacy (ES5) bundles:
+    {
+      format: 'amd',
+      entryFileNames: '[name].legacy.js',
+      chunkFileNames: '[name]-[hash].legacy.js',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ['@babel/preset-env'],
+        }),
+      ],
+    },
+  ],
+};
+```
+
+## 其他构建工具
+
+Rollup 和 webpack 是高度可配置的，这通常意味着每个项目都必须更新其配置以在依赖项中启用现代 JavaScript 语法。还有更高级的构建工具更倾向于惯例和默认值，而不是配置，例如 [Parcel](https://parceljs.org/)、[Snowpack](https://www.snowpack.dev/)、[Vite](https://github.com/vitejs/vite) 和 [WMR](https://github.com/preactjs/wmr)。这些工具中的大多数假定 npm 依赖项可能包含现代语法，并在生产编译时将它们转换为适当的语法级别。
+
+除了 webpack 和 Rollup 的专用插件，还可以使用 [devolution](https://github.com/theKashey/devolution) 将具有传统回退的现代 JavaScript 捆绑包添加到任何项目中。Devolution 是一个独立的工具，可转换编译系统的输出以生成传统 JavaScript 变体，从而允许捆绑和转换采用现代输出目标。
+
+## 结论
+
+[EStimator.dev](http://estimator.dev/) 旨在提供一种简单的方法来评估切换到具有现代功能的 JavaScript 代码对大多数用户的影响。目前，ES2017 最接近现代语法，通过 npm、Babel、webpack 和 Rollup 等工具可以配置编译系统并使用该语法编写软件包。本文涵盖了几种方法，您应该根据您的用例选择最简单的一个。
+
+{% YouTube 'cLxNdLK--yI' %}
+
+<br>
diff --git a/src/site/content/zh/fast/rail/index.md b/src/site/content/zh/fast/rail/index.md
new file mode 100644
index 00000000000..3cfc4d0b6ab
--- /dev/null
+++ b/src/site/content/zh/fast/rail/index.md
@@ -0,0 +1,234 @@
+---
+layout: post
+title: 使用 RAIL 模型衡量性能
+description: 凭借 RAIL 模型，设计人员和开发人员能够可靠地将对用户体验影响最大的性能优化工作作为目标。了解 RAIL 模型设定了哪些目标和准则，以及您可以使用哪些工具来实现它们。
+date: 2020-06-10
+tags:
+  - performance
+  - animations
+  - devtools
+  - lighthouse
+  - metrics
+  - mobile
+  - network
+  - rendering
+  - ux
+---
+
+**RAIL** 是一种以**用户为中心**的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解到按键操作（例如，点击、滚动、加载）中，帮助您为每个操作定义性能目标。
+
+RAIL 代表 Web 应用生命周期的四个不同方面：响应、动画、空闲和加载。用户对这些上下文分别有不同的性能期望，因此，性能目标是根据上下文以及[用户如何感知延迟的用户体验研究](https://www.nngroup.com/articles/response-times-3-important-limits/)来定义的。
+
+<figure>{% Img src="image/admin/uc1IWVOW2wEhIY6z4KjJ.png", alt="RAIL 性能模型的四个部分：响应、动画、空闲和加载。", width="800", height="290" %}<figcaption>RAIL 性能模型的四个部分</figcaption></figure>
+
+## 以用户为中心
+
+将用户作为性能工作的关键点。下表介绍了用户如何感知性能延迟的关键指标：
+
+<table class="table-wrapper scrollbar">
+  <thead>用户对性能延迟的看法</thead>
+  <tr>
+    <td>0 至 16 毫秒</td>
+    <td>用户非常关注轨迹运动，他们不喜欢不流畅的动画。如果每秒渲染 60 个新帧，他们就认为动画很流畅。也就是说，每一帧只有 16 毫秒时间，这包括浏览器将新帧绘制到屏幕所需的时间，因而应用约有 10 毫秒的时间来生成一个帧。</td>
+  </tr>
+  <tr>
+    <td>0 到 100 毫秒</td>
+    <td>在此时间窗口内响应用户操作会让用户觉得结果是即时呈现的。如果时间更长，操作与用户反应之间的联系就会中断。</td>
+  </tr>
+  <tr>
+    <td>100 到 1000 毫秒</td>
+    <td>在此时间窗口内，用户会觉得任务进展基本上是自然连续的。对 Web 上的大多数用户来说，加载页面或更改视图是一项任务。</td>
+  </tr>
+  <tr>
+    <td>1000 毫秒或更长</td>
+    <td>超过 1000 毫秒（1 秒），用户的注意力就会从正在执行的任务上转移。</td>
+  </tr>
+  <tr>
+    <td>10000 毫秒或更长</td>
+    <td>超过 10000 毫秒（10 秒），用户会感到失望，并且可能放弃任务。他们以后可能会回来，也可能不会再回来。</td>
+  </tr>
+</table>
+
+{% Aside %} 用户对性能延迟的感知有所不同，具体取决于网络条件和硬件。例如，通过快速 Wi-Fi 连接，在功能强大的台式机上加载站点时，通常只需不到 1 秒时间，用户已经习以为常。通过速度较慢的 3G 网络连接，在移动设备上加载站点则需要更长的时间，因此，移动用户通常会更有耐心。在移动设备上，5 秒钟内完成加载是更现实的目标。{% endAside %}
+
+## 目标和准则
+
+在 RAIL 的上下文中，术语**目标**和**准则**具有特定的含义：
+
+- **目标**：与用户体验相关的关键性能指标。例如，点击即可在 100 毫秒内绘制。由于人类的感知相对一致，因此，这些目标不太可能很快发生改变。
+
+- **准则**：帮助您实现目标的建议。这些准则可能特定于当前硬件和网络连接条件，因此可能会随着时间而改变。
+
+## 响应：在 50 毫秒内处理事件
+
+**目标**：在 100 毫秒内完成由用户输入发起的转换，让用户感觉交互是即时的。
+
+**准则**：
+
+- 为了确保在 100 毫秒内产生可见响应，需要在 50 毫秒内处理用户输入事件。这适用于大多数输入，例如点击按钮、切换表单控件或启动动画。但是，这不适用于触摸拖动或滚动。
+
+- 尽管听起来可能有些自相矛盾，但是，即时响应用户输入并非总是正确的做法。您可以利用这 100 毫秒的时间窗口来执行其他需要消耗大量资源的工作，但是，注意不能妨碍用户。如果可能，应在后台工作。
+
+- 对于需要 50 毫秒以上才能完成的操作，请随时提供反馈。
+
+### 50 毫秒还是 100 毫秒？
+
+目标是在 100 毫秒内响应输入，那么，为什么我们的预算只有 50 毫秒？这是因为除输入处理外，通常还有需要执行其他工作，而且这些工作会占用可接受输入响应的部分可用时间。如果应用程序在空闲时间以推荐的 50 毫秒区块执行工作，这就意味着，如果输入在这些工作区块之一中发生，它最多可能会排队 50 毫秒。考虑到这一点，假设只有剩余的 50 毫秒可用于实际输入处理才是安全地做法。下图展示了这种影响，图中显示了在空闲任务期间收到的输入如何排队，从而减少可用的处理时间：
+
+<figure>{% Img src="image/admin/I7HDZ9qGxe0jAzz6PxNq.png", alt="显示空闲任务期间收到的输入如何排队，从而将可用输入处理时间减少到 50 毫秒的图表", width="800", height="400" %}<figcaption>空闲任务如何影响输入响应预算。</figcaption></figure>
+
+## 动画：在 10 毫秒内生成一帧
+
+**目标**：
+
+- 在 10 毫秒或更短的时间内生成动画的每一帧。从技术上来讲，每帧的最大预算为 16 毫秒（1000 毫秒/每秒 60 帧≈16 毫秒），但是，浏览器需要大约 6 毫秒来渲染一帧，因此，准则为每帧 10 毫秒。
+
+- 目标为流畅的视觉效果。用户会注意到帧速率的变化。
+
+**准则**：
+
+- 在动画之类对计算速度要求极高的场景下，关键在于即使可行，您也不能执行任何其他操作，让不能执行的操作保持绝对最少。只要可能，您就要利用这 100 毫秒的响应时间预先计算最消耗资源的工作，从而最大限度地提高达到 60 fps 的几率。
+
+- 有关各种动画优化策略，请参阅[渲染性能](/rendering-performance/)。
+
+{% Aside %} 识别所有类型的动画。动画不是花哨的 UI 效果。下面这些交互都是动画：
+
+- 视觉动画，例如进入和退出，[补间](https://www.webopedia.com/TERM/T/tweening.html)和加载指示器。
+- 滚动。这包括滑动，即用户开始滚动，然后松开，而页面会继续滚动。
+- 拖放。动画通常遵循用户交互，例如平移地图或捏合缩放。 {% endAside %}
+
+## 空闲：最大限度增加空闲时间
+
+**目标**：最大限度增加空闲时间以提高页面在 50 毫秒内响应用户输入的几率。
+
+**准则**：
+
+- 利用空闲时间完成延缓的工作。例如，对于初始页面加载，应加载尽可能少的数据，然后利用[空闲时间](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)加载其余数据。
+
+- 在 50 毫秒或更短的空闲时间内执行工作。如果时间更长，您可能会干扰应用在 50 毫秒内响应用户输入的能力。
+
+- 如果用户在空闲时间工作期间与页面交互，则应中断空闲时间工作，用户交互始终具有最高优先级。
+
+## 加载：在 5 秒内交付内容并实现可交互
+
+当页面加载缓慢时，用户注意力会分散，他们会认为任务已中断。加载速度快的网站具有[更长的平均会话时间、更低的跳出率和更高的广告可见性](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)。
+
+**目标**：
+
+- 根据用户的设备和网络能力优化相关的快速加载性能。目前，对于首次加载，在使用速度较慢 3G 连接的中端移动设备上，理想的目标是在 [5 秒或更短的时间](/performance-budgets-101/#establish-a-baseline)内[实现可交互](/tti/)。
+
+- 对于后续加载，理想的目标是在 2 秒内加载页面。
+
+{% Aside %}
+
+请注意，这些目标可能会随时间而改变。
+
+{% endAside %}
+
+**准则**：
+
+- 在最常见的用户移动设备和网络连接上测试负载性能。您可以使用 [Chrome 用户体验报告](/chrome-ux-report/)来了解用户的[连接分布](https://developer.chrome.com/blog/chrome-ux-report-looker-studio-dashboard/#using-the-dashboard)。如果数据不适用于您的站点，[移动经济 2019](https://www.gsma.com/mobileeconomy/) 建议的理想全球标准是中端 Android 手机，例如 Moto G4 和速度较慢的 3G 网络（定义的 RTT 为 400 毫秒，传输速度为 400 kbps）。[WebPageTest](https://www.webpagetest.org/easy) 上提供了这一组合。
+
+- 请记住，尽管您的典型移动用户的设备可能声称它使用的是 2G、3G 或 4G 连接，但实际上，由于数据包丢失和网络差异，[有效连接速度](/adaptive-serving-based-on-network-quality/#how-it-works)通常要慢得多。
+
+- [消除阻塞渲染资源](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)。
+
+- 为了产生完整加载的感觉，您不必在 5 秒钟时间内加载所有内容。不妨考虑[延迟加载图像](/browser-level-image-lazy-loading/)、[代码拆分 JavaScript 包](/reduce-javascript-payloads-with-code-splitting/)以及 [web.dev 上建议的其他优化](/fast/)。
+
+{% Aside %} 识别影响页面加载性能的因素：
+
+- 网络速度和延迟
+- 硬件（例如，速度较慢的 CPU）
+- 缓存逐出
+- L2/L3 缓存的差异
+- 解析 JavaScript {% endAside %}
+
+## 测量 RAIL 的工具
+
+有一些工具可以帮助您自动执行 RAIL 测量。具体使用哪一种取决于您需要什么类型的信息，以及您喜欢什么类型的工作流程。
+
+### Chrome DevTools
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/) 对加载或运行页面时发生的一切活动进行深入分析。请参阅[分析运行时性能入门](https://developer.chrome.com/docs/devtools/evaluate-performance/)，熟悉**性能**面板 UI。
+
+以下 DevTools 功能密切相关：
+
+- [限制 CPU 性能](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#cpu-throttle)来模拟功能较弱的设备。
+
+- [限制网络速度](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network-throttle)来模拟速度较慢的连接。
+
+- [查看主线程活动](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#main)，以查看记录时主线程上发生的每个事件。
+
+- [查看表中的主线程活动](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#activities)，以根据活动占用的时间多少来对活动进行排序。
+
+- [分析每秒帧数 (FPS)](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#fps) 以衡量您的动画能否真正流畅地运行。
+
+- **使用性能监视器 (Performance Monitor)** 实时[监控 CPU 使用率、JS 堆大小、DOM 节点数、每秒布局数等](https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor)。
+
+- 使用**网络**部分[可视化](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network)记录时发生的网络请求。
+
+- [在记录时捕获屏幕截图](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#screenshots)，以便准确回放加载页面时页面的外观，或触发的动画等。
+
+- [查看交互](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#interactions)，以便快速识别用户与其交互后，页面上发生的情况。
+
+- 通过在潜在问题侦听器触发时突出显示页面来[实时查找滚动性能问题](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#scrolling-performance-issues)。
+
+- [实时查看绘制事件](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)，以便识别可能损害动画性能的高资源消耗绘制事件。
+
+### Lighthouse
+
+[web.dev/measure](/measure/) 下的 Chrome DevTools 中以 Chrome 扩展和 Node.js 模块的形式提供了 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)，WebPageTest 中也提供了此工具。只要您提供一个 URL，它就会模拟使用速度较慢的 3G 连接的中端设备在页面上运行一系列审核，然后提供关于加载性能的报告以及如何改进的建议。
+
+以下审核密切相关：
+
+**响应**
+
+- [最大首次输入延迟时间](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/)。根据主线程空闲时间估算应用响应用户输入所需的时间。
+
+- [不使用被动侦听器来提高滚动性能](https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/)。
+
+- [总阻塞时间](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)。测量阻止页面响应用户输入（例如鼠标点击、屏幕点击或按键）的总时间。
+
+- [交互时间](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive)。测量用户何时可以稳定地与所有页面元素进行交互。
+
+**加载**
+
+- [不要注册控制 page 和 start_url 的服务工作进程](https://developer.chrome.com/docs/lighthouse/pwa/service-worker/)。服务工作进程可以缓存用户设备上的公共资源，从而减少通过网络获取资源所需的时间。
+
+- [移动网络上的页面加载速度不够快](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa/)。
+
+- [消除阻塞渲染的资源](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)。
+
+- [延迟处理屏幕外图像](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)。推迟加载屏幕外的图像，在需要时才加载。
+
+- [适当调整图像大小](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/)。不要提供明显大于移动视口中呈现的尺寸的图像。
+
+- [避免链接关键请求](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)。
+
+- [不要为其所有资源使用 HTTP/2](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/) 。
+
+- [对图像进行高效编码](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)。
+
+- [启用文本压缩](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/)。
+
+- [避免网络负载过大](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)。
+
+- [避免 DOM 大小过大](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)。通过仅传送呈现页面所需的 DOM 节点来减少网络字节数量。
+
+### WebPageTest 网页性能测试工具
+
+WebPageTest 是一款网页性能测试工具，它使用实际浏览器来访问网页并收集计时指标。在 [webpagetest.org/easy](https://webpagetest.org/easy) 上输入一个 URL，您可以获取在真实的 Moto G4 设备上使用速度较慢的 3G 连接时关于该页面的加载性能报告。您也可以将其配置为包含 Lighthouse 审核。
+
+## 概述
+
+RAIL 是一个将网站用户体验视为由不同交互组成的旅程的透镜。了解用户如何感知您的网站，从而设定对用户体验影响最大的性能目标。
+
+- 以用户为中心。
+
+- 在 100 毫秒内响应用户输入。
+
+- 播放动画或执行滚动时，在 10 毫秒内生成一帧。
+
+- 最大限度延长主线程空闲时间。
+
+- 在 5000 毫秒内加载交互式内容。
diff --git a/src/site/content/zh/fast/reduce-javascript-payloads-with-code-splitting/index.md b/src/site/content/zh/fast/reduce-javascript-payloads-with-code-splitting/index.md
new file mode 100644
index 00000000000..de4213357de
--- /dev/null
+++ b/src/site/content/zh/fast/reduce-javascript-payloads-with-code-splitting/index.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: 通过代码拆分减少 JavaScript 负载
+authors:
+  - houssein
+description: 发送大型 JavaScript 负载会显著影响您网站的速度。在加载应用程序的第一页时，无需将所有的 JavaScript 发送给您的用户，可以将您的包分成多个部分，然后只在需要时进行发送。
+date: 2018-11-05
+codelabs:
+  - codelab-code-splitting
+tags:
+  - performance
+---
+
+没有人喜欢等待。**[如果网站加载时间超过 3 秒，超过 50% 的用户会放弃网站](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/)**。
+
+发送大型 JavaScript 负载会显著影响您网站的速度。在加载应用程序的第一页时，无需将所有的 JavaScript 发送给您的用户，可以将您的包分成多个部分，然后只在需要时进行发送。
+
+## 措施
+
+当花费大量时间在页面上执行所有 JavaScript 时，Lighthouse 会显示审计失败。
+
+{% Img src="image/admin/p0Ahh3pzXog3jPdDp6La.png", alt="Lighthouse 审计失败，显示脚本执行时间过长。", width="797", height="100"%}
+
+拆分 JavaScript 包以仅在用户加载应用程序时发送初始路由所需的代码。这最大限度地减少了需要解析和编译的脚本数量，从而加快了页面加载时间。
+
+流行的模块包（如 [webpack](https://webpack.js.org/guides/code-splitting/)、[Parcel](https://parceljs.org/code_splitting.html) 和 [Rollup](https://rollupjs.org/guide/en#dynamic-import)）允许您使用[动态导入](https://v8.dev/features/dynamic-import)来拆分包。例如，考虑以下的代码片段，其中显示了在提交表单时触发的 `someFunction` 方法示例。
+
+```js
+import moduleA from "library";
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  someFunction();
+});
+
+const someFunction = () => {
+  // uses moduleA
+}
+```
+
+在这里，`someFunction` 使用从特定库导入的模块。如果此模块没有在其他地方使用，则可以修改代码块以使用动态导入仅在用户提交表单时获取它。
+
+```js/2-5
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  import('library.moduleA')
+    .then(module => module.default) // using the default export
+    .then(someFunction())
+    .catch(handleError());
+});
+
+const someFunction = () => {
+    // uses moduleA
+}
+```
+
+构成模块的代码不会包含在初始包中，现在被**延迟加载**，或者仅在表单提交后需要时才提供给用户。为了进一步提高页面性能，请[预加载关键块以进行优先级排序并更快地获取它们](/preload-critical-assets)。
+
+尽管前面的代码片段是一个简单的示例，但延迟加载第三方依赖项在较大的应用程序中并不是常见的模式。通常，第三方依赖项被拆分成一个单独的供应商包，可以缓存，因为它们不会经常更新。您可以阅读有关 [**SplitChunksPlugin**](https://webpack.js.org/plugins/split-chunks-plugin/) 如何帮助您做到这一点的更多信息。
+
+使用客户端框架时在路由或组件级别拆分是一种延迟加载应用程序不同部分的更简单方法。许多使用 webpack 的流行框架提供了抽象，使延迟加载比自己深入配置更容易。
diff --git a/src/site/content/zh/fast/reduce-network-payloads-using-text-compression/index.md b/src/site/content/zh/fast/reduce-network-payloads-using-text-compression/index.md
new file mode 100644
index 00000000000..4283d8bc3a7
--- /dev/null
+++ b/src/site/content/zh/fast/reduce-network-payloads-using-text-compression/index.md
@@ -0,0 +1,108 @@
+---
+layout: post
+title: 缩小和压缩网络有效负载
+authors:
+  - houssein
+date: 2018-11-05
+description: 有两种实用技术可用于提高网页性能，缩小和数据压缩。结合使用这两种技术，可以减少有效负载大小，进而缩短页面加载时间。
+codelabs:
+  - codelab-text-compression
+  - codelab-text-compression-brotli
+tags:
+  - performance
+---
+
+有两种实用技术可用于提高网页的性能：
+
+- 缩小
+- 数据压缩
+
+结合使用这两种技术，可以减少有效负载大小，进而缩短页面加载时间。
+
+## 测量
+
+如果 Lighthouse 在您的页面上检测到任何可以缩小的 CSS 或 JS 资源，则会显示审计失败。
+
+{% Img src="image/admin/ZT9ESeCStegt0SklYbni.png", alt="Lighthouse 缩小 CSS 审计", width="800", height="90" %}
+
+{% Img src="image/admin/vDaAnUSvQxmGcoasQj1k.png", alt="Lighthouse 缩小 JS 审计", width="800", height="112" %}
+
+它还会审计任何未压缩的资产。
+
+{% Img src="image/admin/xfqzdLuu3w3lanxo5Ggc.png", alt="Lighthouse: 启用文本压缩", width="800", height="123" %}
+
+## 缩小
+
+**缩小**是删除空格和不需要的代码，从而创建较小但完全有效的代码文件的过程。[Terser](https://github.com/terser-js/terser) 是一种流行的 JavaScript 压缩工具，[webpack](https://webpack.js.org/) v4 默认为这个库提供一个插件，用于创建缩小的构建文件。
+
+- 如果您使用的是 webpack v4 或更高版本，那么无需任何额外工作就可以直接使用。 👍
+- 如果您使用的是旧版 webpack，请安装`TerserWebpackPlugin`，并将其包含到您的 webpack 配置设置中。请按照[文档](https://webpack.js.org/plugins/terser-webpack-plugin/)中的介绍操作。
+- 如果您不使用模块捆绑程序，那么请将`Terser`用作 CLI 工具或将其直接包含为您的应用程序的依赖项。项目[文档](https://github.com/terser-js/terser)提供了相关说明。
+
+## 数据压缩
+
+**压缩**是使用压缩算法修改数据的过程。[Gzip](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s) 是用于服务器和客户端交互的最广泛使用的压缩格式。[Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) 是一种较新的压缩算法，可以提供比 Gzip 更好的压缩结果。
+
+{% Aside %} 压缩文件可以显著提高网页的性能，但很少需要您亲自执行此操作。许多托管平台、CDN 和反向代理服务器默认情况下都会对资产进行压缩编码，或允许您轻松配置它们。在尝试推出您自己的解决方案之前，请阅读您正在使用工具的文档以查看是否已经支持压缩。 {% endAside %}
+
+有两种不同的方法可以压缩发送到浏览器的文件：
+
+- 动态压缩
+- 静态压缩
+
+这两种方法各有优缺点，下一节将介绍这些方法。请使用最适合您的应用的方法。
+
+## 动态压缩
+
+此过程涉及在浏览器请求时即时压缩资产。这可能比手动或使用构建过程压缩文件更简单，但如果使用高压缩级别会导致延迟。
+
+[Express](https://expressjs.com/) 是一个流行的 Node web 框架，它提供了一个[压缩](https://github.com/expressjs/compression)中间件库。使用它来在请求时压缩任何资产。下面列出了正确使用它压缩整个服务器文件的示例：
+
+```js/5
+const express = require('express');
+const compression = require('compression');
+
+const app = express();
+
+app.use(compression());
+
+app.use(express.static('public'));
+
+const listener = app.listen(process.env.PORT, function() {
+	console.log('Your app is listening on port ' + listener.address().port);
+});
+```
+
+上述代码会使用`gzip`压缩您的资产。如果您的 web 服务器支持它，请考虑使用一个单独的模块（如[shrink-ray](https://github.com/aickin/shrink-ray#readme)）通过 Brotli 进行压缩，以实现更好的压缩率。
+
+{% Aside 'codelab' %} 使用 express.js 通过 [gzip](/codelab-text-compression) 和 [Brotli](/codelab-text-compression-brotli) 压缩资产。 {% endAside %}
+
+## 静态压缩
+
+静态压缩涉及提前压缩和保存资产。这会使构建过程花费更长的时间，尤其是在使用高压缩级别的情况下，但可确保浏览器获取压缩资源时不会出现延迟。
+
+如果您的 web 服务器支持 Brotli，那么请使用 [BrotliWebpackPlugin](https://github.com/mynameiswhm/brotli-webpack-plugin) 等插件通过 webpack 压缩您的资产，将其纳入构建步骤。否则，请使用 [CompressionPlugin](https://github.com/webpack-contrib/compression-webpack-plugin) 通过 gzip 压缩您的资产。它可以像 webpack 配置文件中的任何其他插件一样包含在内：
+
+```js/4
+module.exports = {
+	//...
+	plugins: [
+		//...
+		new CompressionPlugin()
+	]
+}
+```
+
+当压缩文件成为构建文件夹的一部分后，去在服务器中创建一个路由来处理所有 JS 端点以提供压缩文件。下面的示例说明了如何使用 Node 和 Express 为使用 gzip 压缩的资产完成此操作。
+
+<pre>const express = require('express');
+const app = express();
+
+&lt;strong&gt;app.get('*.js', (req, res, next) =&gt; {
+	req.url = req.url + '.gz';
+	res.set('Content-Encoding', 'gzip');
+	next();
+});&lt;/strong&gt;
+
+app.use(express.static('public'));
+</pre>
diff --git a/src/site/content/zh/fast/reduce-webfont-size/index.md b/src/site/content/zh/fast/reduce-webfont-size/index.md
new file mode 100644
index 00000000000..b65a6fcb50b
--- /dev/null
+++ b/src/site/content/zh/fast/reduce-webfont-size/index.md
@@ -0,0 +1,228 @@
+---
+layout: post
+title: 减小 WebFont 大小
+authors:
+  - ilyagrigorik
+date: 2019-08-16
+updated: 2020-07-03
+description: |2-
+
+  本文阐述如何减小您在站点上使用的  WebFont 大小，使版式美观而且不降低站点速度。
+tags:
+  - performance
+  - fonts
+---
+
+版式是良好设计、品牌塑造、可读性和可访问性的基础。WebFont 可实现上述全部功能以及更多功能：文本可选择、可搜索、可缩放且有利于实现高 DPI，无论屏幕大小和分辨率如何，都能提供一致且清晰的文本呈现。WebFont 对于良好的设计、UX 和性能至关重要。
+
+WebFont 优化是整体性能策略的关键部分。每个字体都是一个额外的资源，有些字体可能会阻止文本的呈现，但是仅仅使用 WebFont 并不意味着页面一定呈现得更慢。相反，优化的字体，加上如何在页面上加载和应用这些字体的明智策略，可以帮助减少总页面大小并缩短页面呈现时间。
+
+## WebFont 剖析
+
+*WebFont* 是字形的集合，每个字形都是描述字母或符号的矢量形状。因此，两个简单的变体决定了特定字体文件的大小：每个字形矢量路径的复杂性和特定字体中的字形数量。例如，最受欢迎的 WebFont 之一 Open Sans 包含 897 个字形，其中包括拉丁文、希腊文和西里尔文字符。
+
+{% Img src="image/admin/B92rhiBJD9sx88a5CvVy.png", alt="字体字形表", width="800", height="309" %}
+
+选取字体时，考虑哪些字符集受支持很重要。如果您需要将页面内容本地化为多种语言，应使用一种可以为用户提供一致外观和体验的字体。例如，[Google 的 Noto 字体系列](https://www.google.com/get/noto/)旨在支持世界上的所有语言。但请注意，Noto 的总大小（包括所有语言）会生成 1.1GB 以上的 ZIP 下载内容。
+
+在本文中，您将了解如何减小已交付的 WebFont 文件大小。
+
+### WebFont 格式
+
+如今，Web 上使用四种字体容器格式：
+
+- [EOT](https://en.wikipedia.org/wiki/Embedded_OpenType)
+- [TTF](https://en.wikipedia.org/wiki/TrueType)
+- [WOFF](https://en.wikipedia.org/wiki/Web_Open_Font_Format)
+- [WOFF2](https://www.w3.org/TR/WOFF2/)。
+
+[WOFF](http://caniuse.com/#feat=woff) 和 [WOFF 2.0](http://caniuse.com/#feat=woff2) 受支持程度最广泛，但是为了与旧浏览器兼容，您可能需要包含其他格式：
+
+- 将 WOFF 2.0 变体提供给支持它的浏览器。
+- 将 WOFF 变体提供给大多数浏览器。
+- 将 TTF 变体提供给旧的 Android（低于 4.4）浏览器。
+- 将 EOT 变体提供给旧的 IE（低于 IE9）浏览器。
+
+{% Aside %} 技术上还有另一种容器格式，即 [SVG 字体容器](http://caniuse.com/svg-fonts)，但 IE 和 Firefox 从未支持过它，Chrome 现在也已将其弃用。因此，它的用途有限，本指南已有意将其省略。{% endAside %}
+
+### 通过压缩减小字体大小
+
+字体是字形的集合，每个字形都是描述字母形式的一组路径。各个字形不同，但它们包含许多类似的信息，这些信息可以使用 GZIP 或兼容的压缩器进行压缩：
+
+- 默认情况下不压缩 EOT 和 TTF 格式。确保您的服务器配置为在传送这些格式时应用 [GZIP 压缩](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip)。
+- WOFF 具有内置压缩功能。确保您的 WOFF 压缩器使用最佳压缩设置。
+- WOFF2 使用自定义的预处理和压缩算法，与其他格式相比，传送的文件大小减少了约 30%。有关更多信息，请参阅 [WOFF 2.0 评估报告](http://www.w3.org/TR/WOFF20ER/)。
+
+最后，值得注意的是，某些字体格式包含额外的元数据，例如某些平台上可能不需要的[字体提示](https://en.wikipedia.org/wiki/Font_hinting)和[字距调整](https://en.wikipedia.org/wiki/Kerning)信息，这允许进一步优化文件大小。请查看您的字体压缩器以获取可用的优化选项，如果您采用这种方式，请确保您拥有合适的基础架构来测试这些优化的字体并将其传送到每个浏览器。例如，[Google Fonts](https://fonts.google.com/) 为每种字体维护 30 多种优化变体，并自动检测和传送适用于每个平台及浏览器的最佳变体。
+
+{% Aside %} 考虑对 EOT、TTF 和 WOFF 格式使用 [Zopfli 压缩](http://en.wikipedia.org/wiki/Zopfli)。Zopfli 是一种与 zlib 兼容的压缩器，与 gzip 相比，传送的文件大小减少了约 5%。{% endAside %}
+
+## 使用 @font-face 定义字体系列
+
+`@font-face` CSS @ 规则允许您定义特定字体资源的位置、其样式特征以及应该使用它的 Unicode 代码点。此类 `@font-face` 声明的组合可用于构建“字体系列”，浏览器将使用该系列来评估需要下载的字体资源并将其应用于当前页面。
+
+### 考虑可变字体
+
+在需要多种字体变体的情况下，可变字体可以显著减少字体的文件大小。您可以加载包含所有信息的单个文件，而不需要加载常规和粗体样式及其斜体版本。
+
+所有现代浏览器现在都支持可变字体，有关更多信息，请参阅 [Web 上的可变字体简介](/variable-fonts/)。
+
+### 选择正确的格式
+
+每个 `@font-face` 声明都提供字体系列的名称，该名称充当多个声明、[字体属性](http://www.w3.org/TR/css3-fonts/#font-prop-desc)（例如样式、粗细和拉伸）和 [src 描述符](http://www.w3.org/TR/css3-fonts/#src-desc)（指定字体资源位置的优先级列表）的逻辑组。
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome.woff2') format('woff2'),
+        url('/fonts/awesome.woff') format('woff'),
+        url('/fonts/awesome.ttf') format('truetype'),
+        url('/fonts/awesome.eot') format('embedded-opentype');
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Awesome Font Italic'),
+        url('/fonts/awesome-i.woff2') format('woff2'),
+        url('/fonts/awesome-i.woff') format('woff'),
+        url('/fonts/awesome-i.ttf') format('truetype'),
+        url('/fonts/awesome-i.eot') format('embedded-opentype');
+}
+```
+
+首先，请注意上面的示例定义了具有两种样式（ normal 和 *italic**）的单个 Awesome Font* 系列，每个样式都指向一组不同的字体资源。反过来，每个 `src` 描述符都包含一个以逗号分隔的资源变体的优先级列表：
+
+- `local()` 指令允许您引用、加载和使用本地安装的字体。
+- `url()` 指令允许您加载外部字体，并允许包含可选的 `format()` 提示，以指示提供的 URL 所引用的字体格式。
+
+{% Aside %} 除非您引用默认系统字体之一，否则用户很少会在本地安装它，尤其是在移动设备上，实际上不可能“安装”其他字体。您应该始终以 `local()` 条目“以防万一”开头，然后提供 `url()` 条目的列表。{% endAside %}
+
+当浏览器确定需要该字体时，它会按照指定的顺序遍历提供的资源列表并尝试加载适当的资源。例如，按照上面的例子：
+
+1. 浏览器执行页面布局，并确定在页面上呈现指定文本所需的字体变体。
+2. 对于每种需要的字体，浏览器会检查本地是否提供该字体。
+3. 如果本地未提供该字体，浏览器将循环访问外部定义：
+    - 如果存在格式提示，则浏览器会在启动下载之前检查它是否支持该提示。如果浏览器不支持该提示，则会前进到下一提示。
+    - 如果没有格式提示，浏览器则会下载资源。
+
+本地和外部指令与适当的格式提示结合使用，您可以指定所有可用的字体格式，浏览器则会处理其余事项。浏览器确定需要哪些资源并选择最佳格式。
+
+{% Aside %} 指定字体变体的顺序很重要。浏览器选取它支持的第一种格式。因此，如果您希望较新的浏览器使用 WOFF 2.0，则应将 WOFF 2.0 声明置于 WOFF 之上。{% endAside %}
+
+### Unicode 范围子集化
+
+除了样式、粗细和拉伸等字体属性外，`@font-face` 规则还允许您定义每个资源支持的一组 Unicode 代码点。这使您能够将大型 Unicode 字体拆分成较小的子集（例如，拉丁文、西里尔文和希腊文子集），并且仅下载在特定页面上呈现文本所需的字形。
+
+[unicode 范围描述符](http://www.w3.org/TR/css3-fonts/#descdef-unicode-range)允许您指定范围值的逗号分隔列表，每个范围值都可以采用以下三种不同形式之一：
+
+- 单个代码点（例如，`U+416`）
+- 区间范围（例如，`U+400-4ff`）：表示范围的开始和结束代码点
+- 通配符范围（例如，`U+4??`)：`?` 字符表示任何十六进制数字
+
+例如，您可以将 *Awesome Font* 系列拆分为拉丁文和日语子集，浏览器会根据需要下载每个子集：
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* 拉丁文字形 */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-jp.woff2') format('woff2'),
+        url('/fonts/awesome-jp.woff') format('woff'),
+        url('/fonts/awesome-jp.ttf') format('truetype'),
+        url('/fonts/awesome-jp.eot') format('embedded-opentype');
+  unicode-range: U+3000-9FFF, U+ff??; /* 日语字形 */
+}
+```
+
+{% Aside %} Unicode 范围子集化对亚洲语言尤其重要，其中字形的数量比西方语言多得多，典型的“完整”字体通常以兆字节而非万字节为单位。{% endAside %}
+
+使用 Unicode 范围子集和字体的每个风格变体的单独文件，您可以定义一个复合字体系列，该系列下载速度更快且效率更高。访问者只下载他们需要的变体和子集，他们不会被迫下载可能永远不会在页面上看到或使用的子集。
+
+大多数浏览器[现在都支持 unicode 范围](http://caniuse.com/#feat=font-unicode-range)。为了与旧浏览器兼容，您可能需要退回到“手动子集化”。在这种情况下，您必须回退以提供包含所有必要子集的单个字体资源，并对浏览器隐藏其余部分。例如，如果页面仅使用拉丁字符，那么您可以去除其他字形并将该特定子集作为独立资源提供。
+
+1. **确定需要哪些子集：**
+    - 如果浏览器支持 unicode 范围子集化，那么它会自动选择正确的子集。页面只需要提供子集文件并在 `@font-face` 规则中指定适当的 unicode 范围。
+    - 如果浏览器不支持 unicode 范围子集化，那么页面需要隐藏所有不需要的子集；也就是说，开发人员必须指定所需的子集。
+2. **生成字体子集：**
+    - 使用开源 [pyftsubset 工具](https://github.com/behdad/fonttools/)对字体进行子集化和优化。
+    - 某些字体服务允许通过自定义查询参数手动进行子集化，您可以使用这些参数手动指定页面所需的子集。请参阅您的字体提供商的文档。
+
+### 字体选择与合成
+
+每个字体系列由多个样式变体（常规、粗体、斜体）和每个样式的多个粗细组成，每个样式又可能包含极其不同的字形形状 - 例如，不同的间距、大小或完全不同的形状。
+
+{% Img src="image/admin/FNtAc2xRmx2MuUt2MADj.png", alt="字体粗细", width="697", height="127" %}
+
+例如，上图说明了一个字体系列，该系列提供三种不同的粗细：400（常规）、700（粗体）和 900（超粗体）。浏览器会自动将所有其他中间变体（以灰色表示）对应至最接近的变体。
+
+<blockquote>
+  <p>如果对于指定的粗细不存在任何外观，则使用粗细相近的外观。通常，粗线对应线条较重的外观，而细线对应线条较浅的外观。</p>
+<cite><p data-md-type="paragraph"><a href="http://www.w3.org/TR/css3-fonts/#font-matching-algorithm">CSS 字体匹配算法</a></p></cite>
+</blockquote>
+
+类似的逻辑适用于*斜体*变体。字体设计器控制它们将产生哪些变体，而您控制将在页面上使用哪些变体。因为每个变体都是单独的下载内容，所以保持变体数量较少是个不错的主意。例如，您可以为 *Awesome Font* 系列定义两个粗体变体：
+
+```css
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l.woff2') format('woff2'),
+        url('/fonts/awesome-l.woff') format('woff'),
+        url('/fonts/awesome-l.ttf') format('truetype'),
+        url('/fonts/awesome-l.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* 拉丁文字形 */
+}
+
+@font-face {
+  font-family: 'Awesome Font';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Awesome Font'),
+        url('/fonts/awesome-l-700.woff2') format('woff2'),
+        url('/fonts/awesome-l-700.woff') format('woff'),
+        url('/fonts/awesome-l-700.ttf') format('truetype'),
+        url('/fonts/awesome-l-700.eot') format('embedded-opentype');
+  unicode-range: U+000-5FF; /* 拉丁文字形 */
+}
+```
+
+上面的示例声明了 *Awesome Font* 系列，它由两个资源组成，这些资源涵盖同一组拉丁文字形 ( `U+000-5FF` )，但提供两种不同的“粗细”：正常 (400) 和粗体 (700)。但是，如果您的 CSS 规则之一指定了不同的字体粗细，或将 font-style 属性设置为斜体，会发生什么情况？
+
+- 如果精确的字体匹配不可用，浏览器将替换最接近的匹配。
+- 如果没有找到样式匹配（例如，在上面的示例中未声明斜体变体），那么浏览器会合成它自己的字体变体。
+
+{% Img src="image/admin/a8Jo2cIO1tPsj71AzftS.png", alt="字体合成", width="800", height="356" %}
+
+{% Aside 'warning' %} 请注意，合成方法可能不适合像西里尔文这样的脚本，该语言的斜体形式极其不同。为使这些脚本的保真度合适，请使用实际斜体字体。{% endAside %}
+
+上面的示例说明了 Open Sans 的实际和合成字体结果之间的差异。所有合成的变体都是从单个 400 粗细的字体生成的。如您所见，结果存在显著差异。如何生成粗体和倾斜变体的细节并未指定。因此，结果因浏览器而异，并且高度依赖于字体。
+
+{% Aside %} 为了获得最佳的一致性和视觉效果，请勿依赖字体合成。相反，尽量减少所用字体变体的数量并指定其位置，以便浏览器在页面上使用它们时即会进行下载。或者，选择使用可变字体。也就是说，在某些情况下，合成变体[可能是一个可行的选项](https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/)，但在使用合成变体时需谨慎。{% endAside %}
+
+## WebFont 大小优化清单
+
+- **审核并监控您的字体使用：**不要在您的页面上使用过多字体，对于每种字体，尽量减少所用变体的数量。这有助于为您的用户提供更一致且更快速的体验。
+- **子集化您的字体资源：**许多字体可以是子集，或拆分为多个 unicode 范围以仅提供特定页面所需的字形。这可减小文件大小并提高资源的下载速度。但是，在定义子集时，请注意进行优化以便重用字体。例如，请勿在每个页面上下载不同但重叠的字符集。好的做法是基于脚本进行子集化：例如，拉丁文和西里尔文。
+- **为每个浏览器提供优化的字体格式：**以 WOFF 2.0、WOFF、EOT 和 TTF 格式提供每种字体。确保将 GZIP 压缩应用于 EOT 和 TTF 格式，因为默认情况下它们不会被压缩。
+- **`src` 列表中优先考虑 `local()`：**在 `src` 列表中首先列出 `local('Font Name')` 可确保不会对已安装的字体进行 HTTP 请求。
+- **使用 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)** 测试[文本压缩](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression/)。
diff --git a/src/site/content/zh/fast/remove-unused-code/index.md b/src/site/content/zh/fast/remove-unused-code/index.md
new file mode 100644
index 00000000000..ab153f43733
--- /dev/null
+++ b/src/site/content/zh/fast/remove-unused-code/index.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: 删除未使用的代码
+subhead: 通过 npm 可以轻而易举地向项目添加代码。但是这些额外的字节真的都能用到吗？
+authors:
+  - houssein
+date: 2018-11-05
+description: 像 npm 这样的仓库使 JavaScript 世界变得更美好，它们允许任何人轻松下载和使用超过 50 万个公开的软件包。但是我们经常会包含我们没有充分利用的库。要解决这个问题，请分析您的代码包以检测未使用的代码。
+codelabs:
+  - codelab-remove-unused-code
+tags:
+  - performance
+---
+
+像 [npm](https://docs.npmjs.com/getting-started/what-is-npm) 这样的仓库使 JavaScript 世界变得更美好，它们允许任何人轻松下载和使用超过 *50 万*个公开的软件包。但是我们经常会包含我们没有充分利用的库。要解决这个问题，请**分析您的代码包**以检测未使用的代码，然后删除**未使用**和**不需要**的库。
+
+## 分析代码包
+
+通过 DevTools 可以轻松查看所有网络请求的大小：{% Instruction 'devtools-network', 'ol' %} {% Instruction 'disable-cache', 'ol' %} {% Instruction 'reload-page', 'ol' %}
+
+{% Img src="image/admin/aq6QZj5p4KTuaWnUJnLC.png", alt="包含代码包请求的网络面板", width="800", height="169" %}
+
+DevTools 中的 [Coverage](https://developer.chrome.com/docs/devtools/coverage/)（覆盖）选项卡还会告诉您应用程序中有多少 CSS 和 JS 代码未使用。
+
+{% Img src="image/admin/xlPdOMaeykJhYqGcaMJr.png", alt="DevTools 中的代码覆盖", width="800", height="562" %}
+
+通过 Node CLI 指定完整的 Lighthouse 配置后，还可以使用“未使用的 JavaScript”审计来追踪您的应用程序附带了多少未使用的代码。
+
+{% Img src="image/admin/tdC0d65gEIiHZy6eyo82.png", alt="Lighthouse 未使用的 JS 审计", width="800", height="347" %}
+
+如果您恰巧使用 [webpack](https://webpack.js.org/) 作为打包器，[Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 将帮助您调查代码包的组成。像包含任何其他插件一样，将该插件包含在 webpack 配置文件中：
+
+```js/4
+module.exports = {
+  //...
+  plugins: [
+    //...
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
+
+虽然 webpack 通常用于构建单页应用程序，但其他打包器（例如 [Parcel](https://parceljs.org/) 和 [Rollup](https://rollupjs.org/guide/en)）也具有可视化工具，可用于分析代码包。
+
+重新加载包含了此插件的应用程序，将显示整个代码包的可缩放树状图。
+
+{% Img src="image/admin/pLAHEtl5C011wTk2IJij.png", alt="Webpack Bundle Analyzer", width="800", height="468" %}
+
+使用此可视化，您可以检查代码包的哪些部分比其他部分大，并更好地了解正在导入的所有库。这有助于确定是否正在使用任何未使用或不必要的库。
+
+## 删除未使用的库
+
+在之前的树状图中，单个 `@firebase` 域中有许多软件包。如果您的网站只需要 firebase 数据库组件，请更新导入以获取该库：
+
+```js/1-2/0
+import firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/database';
+```
+
+需要强调的是，对于较大的应用程序，此过程要复杂得多。
+
+对于看上去很神秘，并且您非常确定没有在任何地方使用的软件包，请退后一步，看看哪个顶级依赖项正在使用它。尝试找到一种方法仅导入您需要的组件。如果某个库用不到，则将其删除。如果初始页面加载不需要库，请考虑是否可以[延迟加载](/reduce-javascript-payloads-with-code-splitting)。
+
+如果您正在使用 webpack，请查看[自动从流行库中删除未使用代码的插件列表](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)。
+
+{% Aside 'codelab' %} [删除未使用的代码。](/codelab-remove-unused-code) {% endAside %}
+
+## 删除不需要的库
+
+并非所有库都可以轻松分解为多个部分并有选择地导入。在这些情况下，请考虑是否可以完全删除库。构建自定义解决方案或利用更轻量级的替代方案应该总是值得考虑的选项。但是，在从应用程序中完全删除库之前，权衡上述两种方案的复杂程度和工作量是很重要的。
diff --git a/src/site/content/zh/fast/serve-images-webp/index.md b/src/site/content/zh/fast/serve-images-webp/index.md
new file mode 100644
index 00000000000..d033c819b4e
--- /dev/null
+++ b/src/site/content/zh/fast/serve-images-webp/index.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: 使用 WebP 图像
+authors:
+  - katiehempenius
+description: WebP 图像比对应的 JPEG 和 PNG 图像要小——文件大小通常减小 25–35%。这可以减小页面大小并提高性能。
+date: 2018-11-05
+updated: 2020-04-06
+codelabs:
+  - codelab-serve-images-webp
+tags:
+  - performance
+feedback:
+  - api
+---
+
+## 为什么应关注？
+
+WebP 图像比对应的 JPEG 和 PNG 图像要小——文件大小通常减小 25–35%。这可以减小页面大小并提高性能。
+
+- YouTube 发现，切换到 WebP 缩略图可以使[页面加载速度提高 10%](https://www.youtube.com/watch?v=rqXMwLbYEE4)。
+- Facebook 的[经验](https://code.fb.com/android/improving-facebook-on-android/)是，在转为使用 WebP 后，文件大小比 JPEG 小 25-35%，比 PNG 小 80%。
+
+WebP 是 JPEG、PNG 和 GIF 图像的绝佳替代者。此外，WebP 提供无损和有损压缩。无损压缩不会丢失任何数据。有损压缩可减小文件大小，但代价是可能降低图像质量。
+
+## 将图像转换为 WebP
+
+人们通常使用以下方法之一将图像转换为 WebP：[cwebp 命令行工具](https://developers.google.com/speed/webp/docs/using)或 [Imagemin WebP 插件](https://github.com/imagemin/imagemin-webp)（npm 包）。如果您的项目使用构建脚本或构建工具（例如 Webpack 或 Gulp），Imagemin WebP 插件通常是最佳选择，而对于简单项目或者只需要转换一次图像时，CLI 是不错的选择。
+
+将图像转换为 WebP 时，可以设定各种压缩设置——但对于大多数人来说，唯一需要关心的是质量设置。您可以指定从 0（最差）到 100（最好）的质量级别。这需要反复尝试，才能找到哪个级别可以在所需的图像质量和文件大小之间取得适当平衡。
+
+### 使用 cwebp
+
+使用 cwebp 的默认压缩设置转换单个文件：
+
+```bash
+cwebp images/flower.jpg -o images/flower.webp
+```
+
+使用质量级别 `50` 转换单个文件：
+
+```bash
+cwebp -q 50 images/flower.jpg -o images/flower.webp
+```
+
+转换一个目录中的所有文件：
+
+```bash
+for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
+```
+
+### 使用 Imagemin
+
+Imagemin WebP 插件可以单独使用，也可以与您喜欢的构建工具（Webpack/Gulp/Grunt 等）一起使用。这通常需要向构建脚本或构建工具的配置文件添加约 10 行代码。以下是如何针对 [Webpack](https://glitch.com/~webp-webpack) 、[Gulp](https://glitch.com/~webp-gulp) 和 [Grunt](https://glitch.com/~webp-grunt) 执行该操作的示例。
+
+如果您不使用这些构建工具，可以将 Imagemin 本身用作一个 Node 脚本。该脚本将转换 `images` 目录中的文件并将转换后的文件保存在 `compressed_images` 目录中。
+
+```js
+const imagemin = require('imagemin');
+const imageminWebp = require('imagemin-webp');
+
+imagemin(['images/*'], {
+  destination: 'compressed_images',
+  plugins: [imageminWebp({quality: 50})]
+}).then(() => {
+  console.log('Done!');
+});
+```
+
+## 提供 WebP 图像
+
+如果您的网站仅支持兼容 WebP 的[浏览器](https://caniuse.com/#search=webp)，那么您不用再往下看了。否则，为较新的浏览器提供 WebP，为旧浏览器提供后备图像：
+
+**之前：**
+
+```html
+<img src="flower.jpg" alt="">
+```
+
+**之后：**
+
+```html
+<picture>
+  <source type="image/webp" srcset="flower.webp">
+  <source type="image/jpeg" srcset="flower.jpg">
+  <img src="flower.jpg" alt="">
+</picture>
+```
+
+[`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture)、[`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) 和 `<img>` 标签，包括它们相对于彼此的排序方式，都相互作用以实现这一最终结果。
+
+### picture
+
+`<picture>` 标签为零个或多个 `<source>` 标签和一个 `<img>` 标签提供包装器。
+
+### source
+
+`<source>` 标签指定媒体资源。
+
+浏览器会使用列出的第一个采用它支持的格式的源。如果浏览器不支持 `<source>` 标签中列出的任何格式，它会回退加载 `<img>` 标签指定的图像。
+
+{% Aside 'gotchas' %}
+
+- “首选”图像格式（在本例中为 WebP）的 `<source>` 标签应最先列出，排在其他 `<source>` 标签之前。
+
+- `type` 属性的值应该是与图像格式对应的 MIME 类型。图像的 [MIME 类型](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)及其文件扩展名通常相似，但不一定相同（例如 `.jpg` 与 `image/jpeg`）。
+
+{% endAside %}
+
+### img
+
+`<img>` 标签使该代码在不支持 `<picture>` 标签的浏览器上也能工作。如果浏览器不支持 `<picture>` 标签，它将忽略它不支持的标签。因此，它只会“看到”`<img src="flower.jpg" alt="">` 标签并加载该图像。
+
+{% Aside 'gotchas' %}
+
+- 始终应该包括 `<img>` 标签，并且始终将其列在最后，即所有 `<source>` 标签之后。
+- `<img>` 标签指定的资源应该采用普遍支持的格式（例如 JPEG），因此它可以用作后备。{% endAside %}
+
+## 验证 WebP 的使用
+
+Lighthouse 可用于验证网站上的所有图像是否都以 WebP 格式提供。运行 Lighthouse 性能审计（**Lighthouse &gt; Options（选项）&gt; Performance（性能）**），并查找 **Serve images in next-gen formats**（提供下一代格式的图像）审计的结果。Lighthouse 将列出所有未以 WebP 格式提供的图像。
diff --git a/src/site/content/zh/fast/serve-responsive-images/index.md b/src/site/content/zh/fast/serve-responsive-images/index.md
new file mode 100644
index 00000000000..c28bbfb06c2
--- /dev/null
+++ b/src/site/content/zh/fast/serve-responsive-images/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: 提供响应式图像
+authors:
+  - katiehempenius
+description: |2-
+
+  向移动设备提供桌面尺寸的图像可导致数据量比实际需求高出 2-4 倍。应取代这种“一刀切”的方法，转而为不同的设备提供不同的图像。
+date: 2018-11-05
+updated: 2021-06-04
+codelabs:
+  - codelab-specifying-multiple-slot-widths
+  - codelab-art-direction
+  - codelab-density-descriptors
+tags:
+  - performance
+---
+
+向移动设备提供桌面尺寸的图像可导致数据量比实际需求高出 2-4 倍。应取代这种“一刀切”的方法，转而为不同的设备提供不同的图像。
+
+## 调整图像大小
+
+最流行的两个图像调整工具是 [sharp npm package](https://www.npmjs.com/package/sharp) 和 [ImageMagick CLI 工具](https://www.imagemagick.org/script/index.php)。
+
+Sharp package 非常适合用于自动调整图像大小（例如，为您网站上的所有视频生成多种尺寸的缩略图），它可以与构建脚本和工具轻松快速地实现集成。而 ImageMagick 则便于一次性调整图像大小，因为它完全从命令行使用。
+
+### sharp
+
+要将 Sharp 用作 Node 脚本，请将此代码另存为项目中的单独脚本，然后运行它以转换图像：
+
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const directory = './images';
+
+fs.readdirSync(directory).forEach(file => {
+  sharp(`${directory}/${file}`)
+    .resize(200, 100) // width, height
+    .toFile(`${directory}/${file}-small.jpg`);
+  });
+```
+
+### ImageMagick
+
+要将某个图像的大小调整为其原始大小的 33%，请在终端中运行以下命令：
+
+```bash
+convert -resize 33% flower.jpg flower-small.jpg
+```
+
+要将某个图像的大小调整为 300 像素（宽） x 200 像素（高），请运行以下命令：
+
+```bash
+# macOS/Linux
+convert flower.jpg -resize 300x200 flower-small.jpg
+
+# Windows
+magick convert flower.jpg -resize 300x200 flower-small.jpg
+```
+
+### 您应该创建多少个图像版本？
+
+这个问题没有确切的“正确”答案。但是，提供 3-5 种不同大小的图像很常见。提供更多的图像尺寸对性能更好，但会占用服务器上更多的空间，并且需要编写更多的 HTML。
+
+### 其他选项
+
+[Thumbor](https://github.com/thumbor/thumbor)（开源）和 [Cloudinary](https://cloudinary.com/) 等图像服务也值得一试。图像服务按需提供响应式图像（和图像处理）。Thumbor 需要安装在服务器上进行设置；Cloudinary 则会为您处理这些，无需服务器设置。两者都是创建响应式图像的简单方法。
+
+## 提供多个图像版本
+
+指定多个图像版本，浏览器将选择最好的一个来使用：
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th><strong>之前</strong></th>
+        <th><strong>后</strong></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          &lt;img src="flower-large.jpg"&gt;
+        </td>
+        <td>
+          &lt;img src="flower-large.jpg" srcset="flower-small.jpg 480w,
+          flower-large.jpg 1080w" sizes="50vw"&gt;
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+`<img>` 标签的 [`src`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-src)、[`srcset`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) 和 [`sizes`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes) 属性都相互作用来实现这一最终结果。
+
+### “src”属性
+
+src 属性使得此代码向[不支持](https://caniuse.com/#search=srcset)`srcset` 和 `sizes` 属性的浏览器提供帮助。如果浏览器不支持这些属性，其会回退到加载 `src` 属性指定的资源。
+
+{% Aside 'gotchas' %} `src` 属性指定的资源应该足够大，以适用于所有设备尺寸。 {% endAside %}
+
+### “srcset”属性
+
+`srcset` 属性是以逗号分隔的图像文件名及其宽度或密度描述符的列表。
+
+此示例使用[宽度描述符](https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor)。`480w` 是一个宽度描述符，告诉浏览器 `flower-small.jpg` 是 480 像素宽；`1080w` 是一个宽度描述符，告诉浏览器 `flower-large.jpg` 是 1080 像素宽。
+
+“宽度描述符”听起来很花哨，但其实只是告诉浏览器图像宽度的一种方式。这使浏览器无需下载图像以确定其大小。
+
+{% Aside 'gotchas' %} 使用 `w` 作为单位（而非 `px` ）来书写宽度描述符。例如，一个宽为 1024 像素的图像将被写为 `1024w` 。 {% endAside %}
+
+**额外的学分：**您无需为了提供不同的图像尺寸而了解密度描述符。但是，如果您对密度描述符的工作原理感到好奇，请查看[分辨率切换代码实验室](/codelab-density-descriptors)。密度描述符用于根据设备的[像素密度](https://en.wikipedia.org/wiki/Pixel_density)提供不同的图像。
+
+### “尺寸”属性
+
+尺寸属性告诉浏览器图像显示时的宽度。但是，尺寸属性对显示大小没有影响；您仍然需要 CSS。
+
+浏览器使用此信息以及它对用户设备的了解（即设备的尺寸和像素密度）来确定要加载的图像。
+
+如果浏览器无法识别“ `sizes` ”属性，它将退回到加载“ `src` ”属性指定的图像。（浏览器初始均设置为同时支持“ `sizes` ”和“ `srcset` ”属性，因此一个浏览器要么支持这两个属性，要么都不支持。）
+
+{% Aside 'gotchas' %} 可以使用多种单位指定槽宽。以下是所有有效尺寸：
+
+- `100px`
+- `33vw`
+- `20em`
+- `calc(50vw-10px)`
+
+以下不是有效尺寸：
+
+- `25%` （百分比不能与尺寸属性一起使用）{% endAside %}
+
+**额外的学分：**如果您想要花哨，还可以使用尺寸属性来指定多个插槽大小。这适用于对不同视口大小使用不同布局的网站。请参阅此[多槽代码示例](/codelab-specifying-multiple-slot-widths)以了解如何执行此操作。
+
+### （甚至更多）额外的学分
+
+除了已经列出的所有额外学分（图像很复杂！），您还可以将这些相同的概念用于[艺术指导](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction)。艺术指导是将外观完全不同的图像（而不是同一图像的不同版本）提供给不同视口的做法。您可以在[艺术指导代码实验室](/codelab-art-direction)了解更多信息。
+
+## 验证
+
+实现响应式图像后，您可以使用 Lighthouse 来确保不会遗漏任何图像。运行 Lighthouse 性能审核（ **Lighthouse &gt; 选项 &gt; 性能** ）并查找**适当大小的图像**审核的结果。这些结果将列出需要调整大小的图像。
diff --git a/src/site/content/zh/fast/signed-exchanges/index.md b/src/site/content/zh/fast/signed-exchanges/index.md
new file mode 100644
index 00000000000..4bf73abaf3c
--- /dev/null
+++ b/src/site/content/zh/fast/signed-exchanges/index.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: 签名交换 (SXG)
+subhead: SXG 是一种交付机制，可以独立于资源的交付方式来验证资源的来源。
+authors:
+  - katiehempenius
+date: 2020-10-14
+updated: 2021-04-21
+hero: image/admin/6ll3P8MYWxvtb1ZjXIzb.jpg
+alt: 一堆信封。
+description: SXG 是一种交付机制，可以独立于资源的交付方式来验证资源的来源。
+tags:
+  - blog
+  - performance
+---
+
+签名交换 (SXG) 是一种交付机制，可以独立于资源的交付方式来验证资源的来源。这种解耦推进了各种用例，例如保护隐私的预取、离线互联网体验和从第三方缓存提供服务。此外，实施 SXG 可以改善某些站点的 Largest Contentful Paint (LCP)。
+
+本文全面概述了 SXG：它们的工作原理、用例和工具。
+
+## 浏览器兼容性 {: #browser-compatibility }
+
+基于 Chromium 的浏览器（Chrome 73、Edge 79 和 Opera 64 及后续版本）[支持](https://caniuse.com/#feat=sxg) SXG。
+
+## 概述
+
+签名交换 (SXG) 允许站点以加密方式对请求/响应对儿（“HTTP 交换”）进行签名，使浏览器可以独立于内容的分发方式验证内容的来源和完整性。因此，浏览器可以在地址栏中显示源站点的 URL，而不是提供内容的服务器的 URL。
+
+SXG 的更广泛含义是它们使内容具有可移植性：通过 SXG 交付的内容可以很容易地由第三方分发，同时保持对其来源的完全保证和归属。从历史上看，站点使用第三方分发其内容同时保持归属的唯一方法是该站点与分发者共享其 SSL 证书。这有安全缺陷；此外，这离使内容真正可移植还差得很远。
+
+从长远来看，真正可移植的内容可用于实现完全离线体验等用例。就近期而言，SXG 的主要用例是通过以易于缓存的格式提供内容来提供更快的用户体验。具体来说，[Google Search](#google-search) 会缓存并有时预取 SXG。对于从 Google Search 获得大部分流量的网站，SXG 可以成为向用户提供更快页面加载的重要工具。
+
+### SXG 格式
+
+SXG 封装在[二进制编码](https://cbor.io/)的文件中，该文件具有两个主要组件：HTTP 交换和[签名](https://developer.mozilla.org/docs/Glossary/Signature/Security)。HTTP 交换由请求 URL、内容协商信息和 HTTP 响应组成。
+
+下面是一个解码的 SXG 文件的例子：
+
+```html
+format version: 1b3
+request:
+  method: GET
+  uri: https://example.org/
+  headers:
+response:
+  status: 200
+  headers:
+    Cache-Control: max-age=604800
+    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
+    Expires: Mon, 24 Aug 2020 16:08:24 GMT
+    Content-Type: text/html; charset=UTF-8
+    Content-Encoding: mi-sha256-03
+    Date: Mon, 17 Aug 2020 16:08:24 GMT
+    Vary: Accept-Encoding
+signature:
+    label;cert-sha256=*ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=*;
+    cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
+    date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=*MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=*;
+    validity-url="https://example.org/webpkg/validity"
+header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=
+
+The exchange has a valid signature.
+payload [1256 bytes]:
+<!doctype html>
+<html>
+<head>
+    <title>SXG example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+</head>
+<body>
+<div>
+    <h1>Hello</h1>
+</div>
+</body>
+</html>
+```
+
+签名中的 `expires` 参数表示 SXG 的到期日期。SXG 的有效期最多为 7 天。如果 SXG 的到期日期在未来超过 7 天，浏览器将拒绝它。有关签名标头的更多信息，请参阅[签名 HTTP 交换规范](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-3.1)。
+
+### Web 打包
+
+SXG 是更广泛的 [Web 打包](https://github.com/WICG/webpackage)规范提案系列的一部分。除了 SXG 之外，Web 打包规范的另一个主要组成部分是 [Web 捆绑包](/web-bundles/) （“捆绑 HTTP 交换”）。Web 捆绑包是 HTTP 资源和解释捆绑包所需的元数据的集合。
+
+SXG 和 Web 捆绑包之间的关系是一个常见的混淆点。SXG 和 Web 捆绑包是两种互不依赖的不同技术——Web 捆绑包可用于已签名和未签名的交换。SXG 和 Web 捆绑包提出的共同目标是创建“Web 打包”格式，允许站点整体共享以供离线使用。
+
+SXG 是基于 Chromium 的浏览器将实现的 Web 打包规范的第一部分。
+
+## 加载 SXG
+
+最初，SXG 的主要用例可能是作为页面主文档的交付机制。对于这个用例，可以使用 `<link>` 或 `<a>` 标签以及 [`Link` 标头](https://developer.mozilla.org/docs/Web/HTTP/Headers/Link)来引用 SXG。与其他资源一样，SXG 可以通过在浏览器的地址栏中输入其 URL 来加载。
+
+```html
+<a href="https://example.com/article.html.sxg">
+```
+
+```html
+<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
+```
+
+SXG 还可用于交付子资源。有关详细信息，请参阅[签名交换子资源替换](https://github.com/WICG/webpackage/blob/main/explainers/signed-exchange-subresource-substitution.md)。
+
+## 服务 SXG
+
+### 内容协商
+
+[内容协商](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation)是一种机制，用于根据客户端的能力和偏好在同一 URL 上提供相同资源的不同表示——例如，为某些客户端提供资源的 gzip 版本，而为其他客户端提供 Brotli 版本。内容协商可以根据浏览器的功能提供相同内容的 SXG 和非 SXG 表示。
+
+Web 浏览器使用 [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept) 请求标头传达它们支持的[MIME 类型](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。如果浏览器支持 SXG，则 MIME 类型 `application/signed-exchange` 将自动包含在此值列表中。
+
+例如，这是由 Chrome 84 发送的 `Accept` 标头：
+
+```json
+accept:
+text/html,
+application/xhtml+xml,
+application/xml;q=0.9,
+image/webp,image/apng,
+\*/\*;q=0.8,
+application/signed-exchange;v=b3;q=0.9
+```
+
+此字符串的 `application/signed-exchange;v=b3;q=0.9` 部分通知网络服务器 Chrome 支持 SXG——特别是版本 `b3` 。最后的部分 `q=0.9` 表示 [q 值](https://developer.mozilla.org/docs/Glossary/Quality_values)。
+
+`q-value` 使用 `0` 到 `1` 的十进制小数表示浏览器对特定格式的相对偏好，其中 `1` 代表最高优先级。当没有为格式提供 `q-value` 值时，则 `1` 为隐含值。
+
+### 最佳实践
+
+当 `Accept` 标头指示 `application/signed-exchange`  的 `q-value` 值大于或等于 `text/html` 的 `q-value` 值时，服务器应该服务于 SXG。在实践中，这意味着源服务器将 SXG 提供给爬网程序，而不是浏览器。
+
+SXG 在与缓存或预取一起使用时可以提供卓越的性能。但是，对于直接从源服务器加载而没有这些优化优势的内容，`text/html`提供比 SXG 更好的性能。以 SXG 形式提供内容允许爬网程序和其他中介缓存 SXG，以便更快地向用户交付。
+
+以下正则表达式可用于匹配应作为 SXG 提供服务的请求的 `Accept` 标头：
+
+```regex
+Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
+```
+
+请注意，子表达式 `(,|$)` 匹配已省略 SXG 的 `q-value` 的标头；这种省略意味着 SXG 的 `q-value` 值为 `1`。尽管 `Accept` 标头理论上可以包含子字符串 `q=1` ，但[实际上](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values)浏览器在默认值为 `1` 时不会明确列出格式的 `q-value`。
+
+## 使用 Chrome DevTools 调试 SXG {: #debugging }
+
+可以通过在 Chrome DevTools 的**网络**面板的**类型**列中查找签名交换来识别 `signed-exchange`。
+
+<figure>{% Img src="image/admin/cNdohSaeXqGHFBwD7L3B.png", alt="在 DevTools 的“网络”面板中显示 SXG 请求的屏幕截图", width="696", height="201" %}<figcaption> DevTools 中的<b>网络</b>面板</figcaption></figure>
+
+**预览**选项卡提供有关 SXG 内容的更多信息。
+
+<figure>{% Img src="image/admin/E0rBwuxk4BxFmLJ3gXhP.png", alt="SXG 的“预览”选项卡的屏幕截图", width="800", height="561" %}<figcaption> DevTools 中的<b>预览</b>选项卡</figcaption></figure>
+
+要直接查看 SXG，请在[支持 SXG 的浏览器之一](https://signed-exchange-testing.dev/)中访问此[演示](#browser-compatibility)
+
+## 用例
+
+SXG 可用于直接从源服务器向用户交付内容——但这在很大程度上会违背 SXG 的目的。相反，SXG 的预期用途和好处主要在源服务器生成的 SXG 被缓存并由中间人提供给用户时实现。
+
+尽管本节主要讨论 Google Search 对 SXG 的缓存和服务，但它是一种适用于任何希望为其外链提供更快用户体验或对有限网络访问具有更大弹性的站点的技术。这不仅包括搜索引擎和社交媒体平台，还包括为线下消费提供内容的信息门户。
+
+### Google Search
+
+{% Img src="image/j2RDdG43oidUy6AL6LovThjeX9c2/oMtUUAVj5hAGwBZMDwct.png", alt="显示从缓存中提供的预取 SXG 的图表。", width="800", height="396" %}
+
+对于从搜索结果页面加载的页面，Google Search 使用 SXG 为用户提供更快的页面加载体验。通过以 SXG 形式提供内容，从 Google Search 获得大量流量的网站可能会看到显著的性能改进。
+
+Google Search 现在将在适用时抓取、缓存和预取 SXG。Google 和其他搜索引擎有时会[预取](https://developer.mozilla.org/docs/Web/HTTP/Link_prefetching_FAQ)用户可能访问的内容——例如，与第一个搜索结果对应的页面。SXG 特别适合预取，因为它们比非 SXG 格式具有隐私优势。
+
+{% Aside %}所有网络请求都具有一定数量的固有用户信息，无论它们是如何或为什么发出的：这包括 IP 地址、cookie 是否存在以及 `Accept-Language` 等标头值等信息。当发出请求时，此信息会“公开”给目标服务器。因为 SXG 是从缓存而不是源服务器中预取的，所以用户对站点的兴趣只会在用户导航到该站点时才会向源服务器公开，而不是在预取时。此外，通过 SXG 预取的内容不会设置 cookie 或访问 `localStorage`，除非内容是由用户加载的。此外，这不会向 SXG 推荐人透露新的用户信息。使用 SXG 进行预取是隐私保护预取概念的一个例子。 {% endAside %}
+
+#### 爬网
+
+Google Search 爬网程序发送的 [`Accept`](https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation) 标头针对 `text/html` 和 `application/signed-exchange` 表示出同等偏好。如[上一节](#best-practices)所述，当请求的 `Accept` 标头表示对 SXG 的偏好高于或等于对 `text/html` <br> 的偏好时，希望使用 SXG 的站点应该为它们提供服务。在实践中，只有爬网程序会表达对 SXG 的偏好而不是 `text/html`。
+
+#### 索引
+
+Google Search 不会对页面的 SXG 和非 SXG 表示进行单独排名或编入索引。SXG 归根结底是一种交付机制——它不会改变底层内容。鉴于此，对于 Google Search 来说，单独索引或排名以不同方式交付的相同内容是没有意义的。
+
+#### Web Vitals
+
+对于从 Google Search 获得大部分流量的站点，SXG 可用于改进 [Web Vitals](/vitals/) — 即 [LCP](/lcp/) 。缓存和预取的 SXG 可以非常快地交付给用户，这会产生更快的 LCP。尽管 SXG 是强大的工具，但它们在与其他性能优化（例如使用 CDN 和减少呈现阻塞子资源）结合时性能最佳。
+
+### AMP
+
+AMP 内容可以使用 SXG 交付。SXG 允许使用其规范 URL（而非其 AMP URL ）预取和显示 AMP 内容。
+
+本文档中描述的所有概念仍然适用于 AMP 用例，但是，AMP 有自己的单独[工具](https://github.com/ampproject/amppackager)来生成 SXG。
+
+{% Aside%} 了解如何在 [amp.dev](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/) 上使用签名交换提供  AMP。 {% endAside %}
+
+## 工具
+
+实现 SXG 包括生成与给定 URL 对应的 SXG，然后将该 SXG 提供给请求者（通常是爬网程序）。要生成 SXG，您需要可以签署 SXG 的证书。
+
+### 证书
+
+SXG 的生产使用需要支持 `CanSignHttpExchanges` 扩展的证书。根据[规范](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#section-4.2)，具有此扩展名的证书的有效期不得超过 90 天，并且要求请求域配置了[DNS CAA 记录](https://en.wikipedia.org/wiki/DNS_Certification_Authority_Authorization)。
+
+[此页面](https://github.com/google/webpackager/wiki/Certificate-Authorities)列出了可以颁发此类证书的证书颁发机构。SXG 的证书只能通过商业证书颁发机构获得。
+
+### 特定于平台的 SXG 工具
+
+这些工具支持特定的技术堆栈。如果您已经在使用这些工具之一支持的平台，您可能会发现它比通用工具更容易设置。
+
+- [`sxg-rs/cloudflare_worker`](https://github.com/google/sxg-rs/tree/main/cloudflare_worker) 在 [Cloudflare Workers](https://workers.cloudflare.com/) 上运行。
+
+- [`sxg-rs/fastly_compute`](https://github.com/google/sxg-rs/tree/main/fastly_compute) 在 [Fastly Compute@Edge](https://www.fastly.com/products/edge-compute/serverless) 上运行。
+
+- [自动签名交换](https://blog.cloudflare.com/automatic-signed-exchanges/)是一项 Cloudflare 功能，可自动获取证书并生成签名交换。
+
+- [NGINX SXG 模块](https://github.com/google/nginx-sxg-module)为使用[nginx](https://nginx.org/)的站点生成并提供 SXG。可在[此处](/how-to-set-up-signed-http-exchanges/)找到设置说明。
+
+- [Envoy SXG Filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/sxg_filter) 为使用[Envoy](https://www.envoyproxy.io/)的站点生成并提供 SXG。
+
+### 通用 SXG 工具
+
+#### Web Packager CLI
+
+[Web Packager CLI](https://github.com/google/webpackager) 生成对应于给定 URL 的 SXG。
+
+```shell
+webpackager \
+    --private\_key=private.key \
+    --cert\_url=https://example.com/certificate.cbor \
+    --url=https://example.com
+```
+
+生成 SXG 文件后，将其上传到您的服务器并使用 `application/signed-exchange;v=b3` MIME 类型为其提供服务。此外，您需要将 SXG 证书作为 `application/cert-chain+cbor` 。
+
+#### Web Packager 服务器
+
+[Web Packager 服务器](https://github.com/google/webpackager/blob/main/cmd/webpkgserver/README.md)`webpkgserver` 充当为 SXG 提供服务的[反向代理](https://en.wikipedia.org/wiki/Reverse_proxy)。给定一个 URL，`webpkgserver` 将获取 URL 的内容，将它们打包为 SXG，并作为响应提供 SXG。有关设置 Web Packager 服务器的说明，请参阅[如何使用 Web Packager 设置签名交换](/signed-exchanges-webpackager)。
+
+### SXG 库
+
+这些库可用于构建您自己的 SXG 生成器：
+
+- [`sxg_rs`](https://github.com/google/sxg-rs/tree/main/sxg_rs) 是用于生成 SXG 的 Rust 库。它是功能最强大的 SXG 库，用作 `cloudflare_worker` 和 `fastly_compute` 工具的基础。
+
+- [`libsxg`](https://github.com/google/libsxg) 是用于生成 SXG 的最小 C 库。它用作 NGINX SXG 模块和 Envoy SXG 过滤器的基础。
+
+- [`go/signed-exchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) 是 webpackage 规范提供的最小 Go 库，作为生成 SXG 的[参考实现](https://en.wikipedia.org/wiki/Reference_implementation)。它被用作其参考 CLI 工具、[`gen-signedexchange`](https://github.com/WICG/webpackage/tree/main/go/signedexchange) 和功能更强大的 Web Packager 工具的基础。
+
+## 结论
+
+签名交换是一种交付机制，它可以独立于资源的交付方式来验证资源的来源和有效性。因此，SXG 可以由第三方分发，同时保持完整的发布者归属。
+
+## 进阶阅读
+
+- [签名 HTTP 交换规范草案](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html)
+- [Web 打包解释器](https://github.com/WICG/webpackage/tree/main/explainers)
+- [在 Google Search 上开始使用已签名交换](https://developers.google.com/search/docs/advanced/experience/signed-exchange)
+- [如何使用 Web Packager 设置签名交换](/signed-exchanges-webpackager)
+- [签名交换演示](https://signed-exchange-testing.dev/)
diff --git a/src/site/content/zh/fast/use-imagemin-to-compress-images/index.md b/src/site/content/zh/fast/use-imagemin-to-compress-images/index.md
new file mode 100644
index 00000000000..b0d829cceb6
--- /dev/null
+++ b/src/site/content/zh/fast/use-imagemin-to-compress-images/index.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: 使用 Imagemin 压缩图像
+authors:
+  - katiehempenius
+date: 2018-11-05
+updated: 2020-04-06
+description: 未压缩的图像会因不必要的字节使页面膨胀。运行 Lighthouse 以检查通过压缩图像来改善页面加载的机会。
+codelabs:
+  - codelab-imagemin-webpack
+  - codelab-imagemin-gulp
+  - codelab-imagemin-grunt
+tags:
+  - performance
+---
+
+## 为什么要关注这一问题？
+
+未压缩的图像会因不必要的字节使页面膨胀。右边的这张照片比左边的这张小 40%，但对于普通用户来说可能看起来一样。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<p>{% Img src="image/admin/LRE2JJAuShXTjQF5ZSaR.jpg", alt="", width="376", height="250" %}</p> 20 KB</th>
+        <th>
+<p>{% Img src="image/admin/u9hncwN4TsT7zw2ObU10.jpg", alt="", width="376", height="250" %}</p> 12 KB</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>
+
+## 措施
+
+运行 Lighthouse 以检查通过压缩图像来改善页面加载的机会。这些机会列在“有效编码图像”下：
+
+{% Img src="image/admin/LnIukPEZHuVJwBtuJ7mc.png", alt="image", width="800", height="552" %}
+
+{% Aside %} Lighthouse 目前仅报告压缩 JPEG 格式图像的机会。 {% endAside %}
+
+## Imagemin
+
+Imagemin 是图像压缩的绝佳选择，因为它支持多种图像格式，并且很容易与构建脚本和构建工具集成。Imagemin 可用作 [CLI](https://github.com/imagemin/imagemin-cli) 和 [npm 模块](https://www.npmjs.com/package/imagemin)。一般来说，npm 模块是最好的选择，因为它提供了更多的配置选项，但如果您想在不接触任何代码的情况下尝试 Imagemin，CLI 是一个不错的选择。
+
+### 插件
+
+Imagemin 是围绕“插件”构建的。插件是压缩特定图像格式的 npm 包（例如“mozjpeg”压缩 JPEG）。流行的图像格式可能有多个插件可供选择。
+
+选择插件时要考虑的最重要的事项是它是“有损”还是“无损”。在无损压缩中，不会丢失任何数据。有损压缩可减小文件大小，但可能会降低图像质量。如果插件没有提及“有损”还是“无损”，则可以通过其 API 来判断：如果可以指定输出图像的质量，说明它是“有损”的。
+
+对于大多数人来说，有损插件是最好的选择。它们会显著降低文件大小，可以自定义压缩级别来满足需求。下表列出了流行的 Imagemin 插件。这些不是唯一可用的插件，但它们都是您项目的理想选择。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>图像格式</th>
+        <th>有损插件</th>
+        <th>无损插件</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>JPEG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-mozjpeg">imagemin-mozjpeg</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-jpegtran">imagemin-jpegtran</a></td>
+      </tr>
+      <tr>
+        <td>PNG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-pngquant">imagemin-pngquant</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-optipng">imagemin-optipng</a></td>
+      </tr>
+      <tr>
+        <td>GIF</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-giflossy">imagemin-giflossy</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-gifsicle">imagemin-gifsicle</a></td>
+      </tr>
+      <tr>
+        <td>SVG</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-svgo">imagemin-svgo</a></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>WebP</td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+        <td><a href="https://www.npmjs.com/package/imagemin-webp">imagemin-webp</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Imagemin CLI
+
+Imagemin CLI 使用 5 种不同的插件：imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant 和 imagemin-svgo。Imagemin 根据输入的图像格式使用适当的插件。
+
+要压缩“images/”目录中的图像并将它们保存到同一目录，请运行以下命令（覆盖原始文件）：
+
+```bash
+$ imagemin images/* --out-dir=images
+```
+
+### Imagemin npm 模块
+
+如果您使用其中一种构建工具，请使用 [webpack](/codelab-imagemin-webpack)、[gulp](/codelab-imagemin-gulp) 或 [grunt](/codelab-imagemin-grunt) 查看 Imaginemin 的代码实验室。
+
+您还可以将 Imagemin 本身用作 Node 脚本。此代码使用“imagemin-mozjpeg”插件将 JPEG 文件压缩到值为 50 的质量（“0”表示最差质量；“100”表示最佳质量）：
+
+```js
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+(async() => {
+  const files = await imagemin(
+      ['source_dir/*.jpg', 'another_dir/*.jpg'],
+      {
+        destination: 'destination_dir',
+        plugins: [imageminMozjpeg({quality: 50})]
+      }
+  );
+  console.log(files);
+})();
+```
diff --git a/src/site/content/zh/fast/use-lighthouse-for-performance-budgets/index.md b/src/site/content/zh/fast/use-lighthouse-for-performance-budgets/index.md
new file mode 100644
index 00000000000..98be478cfed
--- /dev/null
+++ b/src/site/content/zh/fast/use-lighthouse-for-performance-budgets/index.md
@@ -0,0 +1,90 @@
+---
+layout: post
+title: 使用 Lighthouse 进行性能预算
+authors:
+  - katiehempenius
+description: Lighthouse 现在支持性能预算。LightWallet 功能可在不到五分钟的时间内设置好，其可提供关于页面资源的大小和数量的反馈。
+date: 2019-06-14
+updated: 2020-04-03
+tags:
+  - blog
+  - performance
+---
+
+[Lighthouse](https://github.com/GoogleChrome/lighthouse) 现在支持性能预算。[LightWallet](https://developers.google.com/web/tools/lighthouse/audits/budgets) 功能可在不到五分钟的时间内设置好，其可提供关于页面资源的大小和数量的反馈。
+
+## 安装 Lighthouse
+
+LightWallet 在 Lighthouse v5+ 的命令行版本中可用。
+
+首先，安装 Lighthouse：
+
+```bash
+npm install -g lighthouse
+```
+
+## 创建预算
+
+创建一个名为 `budget.json` 的文件。在此文件中添加以下 JSON：
+
+```json
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 1000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]
+```
+
+此示例 `budget.json` 文件设置了五个单独的预算：
+
+- 互动时间的预算为 3000 毫秒。
+- 第一次有意义的绘制预算为 1000 毫秒
+- 页面上 JavaScript 总量的预算为 125 KB。
+- 页面整体大小的预算为 300 KB。
+- 向第三方来源发出的请求数量的预算为 10 个请求。
+
+有关受支持的性能指标和资源类型的完整列表，请参阅 Lighthouse 文档的[性能预算](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md)部分。
+
+## 运行 Lighthouse
+
+使用 `--budget-path` 标志运行 Lighthouse。此标志会告诉 Lighthouse 您的预算文件的位置。
+
+```bash
+lighthouse https://example.com --budget-path=./budget.json
+```
+
+{% Aside %}**注意**：预算文件不必命名为 `budget.json` 。 {% endAside %}
+
+## 查看结果
+
+如果已正确配置 LightWallet，Lighthouse 报告将包含**性能**类别内的**预算**部分。
+
+{% Img src="image/admin/FdUeI8rKZtJB3Ol624S3.png", alt="Lighthouse 报告的'预算'部分", width="800", height="289" %}
+
+在 Lighthouse 报告的 JSON 版本中，可以在 `performance-budget` 审计的审计结果中找到 Lightwallet 结果。
diff --git a/src/site/content/zh/fast/why-speed-matters/index.md b/src/site/content/zh/fast/why-speed-matters/index.md
new file mode 100644
index 00000000000..e7bf52d2556
--- /dev/null
+++ b/src/site/content/zh/fast/why-speed-matters/index.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: 为什么速度很重要？
+authors:
+  - bojanpavic
+  - ansteychris
+  - jlwagner
+description: 在用户体验方面，速度很重要。移动设备速度造成的延误不仅令人沮丧，还会对业务造成负面影响。
+web_lighthouse: N/A
+date: 2019-05-01
+updated: 2020-07-23
+tags:
+  - performance
+---
+
+消费者越来越依赖移动设备来访问数字内容和服务，如果您查看自己站点的分析，可能会看到这个故事正在您自己的数据中上演。消费者也比以往任何时候都要求更高，当他们权衡您网站上的体验时，他们不仅仅将您与您的竞争对手进行比较，他们还会根据他们每天使用的一流服务对您进行评级。
+
+这篇文章总结了一些关于性能与业务成功之间关系的研究。
+
+## 性能是留住用户的关键
+
+<figure data-float="right">
+  <blockquote>
+    <p>性能直接影响公司的命运。</p>
+    <cite>
+      <p data-md-type="paragraph"><a href="https://www.youtube.com/watch?v=Xryhxi45Q5M&amp;feature=youtu.be&amp;t=1366">Pinterest</a></p>
+    </cite>
+  </blockquote></figure>
+
+性能在任何在线企业的成功中都起着至关重要的作用。高性能网站比低性能网站更能吸引和留住用户。
+
+Pinterest 将感知等待时间减少了 40%，这[将搜索引擎流量和注册量增加了 15%](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7) 。
+
+COOK 将页面平均加载时间减少了 850 毫秒，从而[将转化次数提高了 7%，将跳出率降低了 7%，并将每个会话的页面增加了 10%](https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf) 。
+
+研究还表明，性能不佳会对业务目标产生负面影响。例如， [BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale) 发现他们的网站加载时间每增加一秒，他们就会失去 10% 的用户。
+
+## 性能意味着提高转化率
+
+留住用户对于提高转化率至关重要。慢速网站对收入有负面影响，而快速网站显示可以提高转化率。
+
+对于 [Mobify](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html)而言，主页加载速度每提高 100 毫秒，基于会话的转化率就会增加 1.11%，平均年收入增加近 380,000 美元。此外，结账页面加载速度每提高 100 毫秒，基于会话的转化率就会增加 1.55%，从而使年均收入增加近 530,000 美元。
+
+当 [AutoAnything 将页面加载时间减少一半时](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/)，他们的销售额增长了 12% 到 13%。
+
+零售商 [Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/success-stories/uk-success-stories/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/) 审核了他们的网站速度，并制定了解决他们发现的问题的计划，导致页面加载时间降低了 20%，转化率提高了 10%。
+
+## 性能关乎用户体验
+
+在用户体验方面，速度至关重要。一项[消费者研究](https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report)表明，对移动速度延迟的压力反应类似于看恐怖电影或解决数学问题，而且比在零售店结账时排队等候的压力更大。
+
+当网站开始加载时，用户需要等待一定的时间出现内容。在此之前，没有用户体验可言。这种缺乏体验在快速连接上是短暂的。然而，在较慢的连接上，用户被迫等待。随着页面资源慢慢载入，用户可能会遇到更多问题。
+
+<figure>{% Img src="image/admin/W0ctiX3cMOfWnNF6AQMg.png", alt="页面加载的两个幻灯片卷轴的比较。第一个显示页面加载速度较慢，而第二个显示同一页面加载连接快速。", width="800", height="264" %}<figcaption>非常慢的页面加载连接（顶部）与较快的页面加载连接（底部）比较。</figcaption></figure>
+
+性能是良好用户体验的基础。当网站发布大量代码时，浏览器必须使用用户数以百万计的数据计划才能下载代码。移动设备的 CPU 能力和内存有限。它们经常被我们认为所谓的“少量”未优化的代码所淹没。这会导致性能不佳，从而导致无响应。了解我们人类的行为后就会知道，用户只有对低性能的应用程序忍无可忍时才会选择放弃。
+
+## 性能影响人们
+
+性能不佳的网站和应用程序也会给使用它们的人们带来实际成本。
+
+[随着移动用户继续在全球互联网用户中占据更大比例](http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet)，请务必记住，其中许多用户通过移动 LTE、4G、3G 甚至 2G 网络访问互联网。正如 Calibre 的 Ben Schwarz 在[关于现实世界性能的研究中](https://calibreapp.com/blog/beyond-the-bubble)指出的那样，预付费数据计划的成本正在下降，这反过来又使得过去无法负担的地方开始有能力访问互联网。移动设备和互联网接入不再是奢侈品。它们是日益互联的世界中导航和发挥作用所必需的常用工具。
+
+[至少自 2011 年以来，总页面大小一直在稳步增加](http://beta.httparchive.org/reports/state-of-the-web#bytesTotal)，而且这种趋势似乎还在继续。随着典型页面发送更多数据，用户必须更频繁地补充他们的计量数据计划，这会花费他们的资金。
+
+除了为用户节省资金外，快速和轻量级的用户体验对于处于危机中的用户也至关重要。医院、诊所和危机中心等公共资源拥有在线资源，可为用户提供他们在危机期间所需的重要和具体信息。[虽然设计对于在压力时刻有效地呈现重要信息至关重要](https://aneventapart.com/news/post/eric-meyer-designing-for-crisis)，但不能低估快速传递这些信息的重要性。这是我们工作的一部分。
+
+## 开始提高您的网站速度 {: #get-started }
+
+阅读 [Core Web Vitals](/vitals/#core-web-vitals) ，了解 Google 认为所有网站都应关注的指标。
+
+<blockquote>
+  <p>目前，我们在这项工作的基础上，通过整合这些页面体验指标，提前了解即将到来的搜索排名变化。我们将推出一种新的信号，将 Core Web Vitals 与现有的页面体验信号相结合，以了解用户在页面上的体验质量的整体情况。</p>
+  <cite><a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html">评估页面体验以获得更好的网络</a>, 官方 Google 网站站长中心博客</cite>
+</blockquote>
+
+然后查看[快速加载时间，](/fast/)了解与快速和保持快速相关的许多提示和技巧。
diff --git a/src/site/content/zh/feed.njk b/src/site/content/zh/feed.njk
new file mode 100644
index 00000000000..78b9571e583
--- /dev/null
+++ b/src/site/content/zh/feed.njk
@@ -0,0 +1,18 @@
+---
+layout: feed
+metadata:
+  title: web.dev
+  url: https://web.dev
+  icon: https://web.dev/images/social.png
+  logo: https://web.dev/images/shared/rss-banner.png
+  author:
+    name: Google Developers
+  feed:
+    subtitle: Let's build the future of the web.
+    filename: feed.xml
+    path: feed/feed.xml
+    url: https://web.dev/feed.xml
+    id: https://web.dev/
+noindex: true
+permalink: "/{{lang}}/feed.xml"
+---
diff --git a/src/site/content/zh/identity/index.md b/src/site/content/zh/identity/index.md
new file mode 100644
index 00000000000..b378d0b23b2
--- /dev/null
+++ b/src/site/content/zh/identity/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: identity
+---
diff --git a/src/site/content/zh/identity/sign-in-form-best-practices/index.md b/src/site/content/zh/identity/sign-in-form-best-practices/index.md
new file mode 100644
index 00000000000..9a2e470c4da
--- /dev/null
+++ b/src/site/content/zh/identity/sign-in-form-best-practices/index.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: 登录表单最佳实践
+subhead: 使用跨平台浏览器功能构建安全、可访问且易于使用的登录表单。
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-06-29
+updated: 2021-09-27
+description: 使用跨平台浏览器功能构建安全、可访问且易于使用的登录表单。
+hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
+alt: 一个人拿着手机。
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-in-form-best-practices
+---
+
+{% YouTube 'alGcULGtiv8' %}
+
+如果用户需要登录到您的站点，良好的登录表单设计至关重要。这对于那些没有可靠的网络连接、使用移动设备、匆忙或压力大的人来说尤其如此。设计不佳的登录表单会导致高跳出率。每次跳出都可能意味着失去心怀不满的用户 - 而不仅仅是错过登录机会。
+
+{% Aside 'codelab' %}如果您希望通过便捷的教程学习这些最佳实践，请查看[登录表单最佳实践代码实验室](/codelab-sign-in-form-best-practices/)。 {% endAside %}
+
+以下是一个简单的登录表单示例，演示了所有最佳实践：
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+## 清单
+
+- [使用有意义的 HTML 元素](#meaningful-html)：`<form>`、`<input>`、`<label>` 和 `<button>`。
+-  [使用 `<label>` 标记每个输入](#label)。
+- 使用元素属性[访问内置浏览器功能](#element-attributes)：`type`、`name`、`autocomplete`、`required`。
+- 为输入 `name` 和 `id` 属性提供稳定的值，使其在页面加载或网站部署之间不会改变。
+- 将登录[放在它自己的 &lt;form&gt; 元素中](#form)。
+- [确保成功提交表单](#submission)。
+- 将 [`autocomplete="new-password"`](#new-password) 和 [`id="new-password"`](#new-password) 用于注册表单中的输入密码，以及重置密码表单中的新密码。
+- 将 [`autocomplete="current-password"`](#current-password) 和 [`id="current-password"`](#current-password) 用于登录密码输入。
+- 提供[显示密码](#show-password)功能。
+- [将 `aria-label` 和 `aria-describedby`](#accessible-password-inputs) 用于密码输入。
+- [不要加倍输入](#no-double-inputs)。
+- 设计表单，使[移动键盘不会妨碍输入或按钮](#keyboard-obstruction)。
+- 确保表单在移动设备上可用：使用[清晰的文本](#size-text-correctly)，并确保输入和按钮[足够大以用作触摸目标](#tap-targets)。
+- 在您的注册和登录页面上[维护品牌和风格。](#general-guidelines)
+- [在现场和实验室中进行测试](#analytics)：在您的注册和登录流程中构建页面分析、交互分析和以用户为中心的性能测量。
+- [跨浏览器和设备进行测试](#devices)：跨平台的表单行为差异很大。
+
+{% Aside %}这篇文章着重讲述前端最佳实践，并没有解释如何构建后端服务来验证用户、存储他们的凭据或管理他们的帐户。[针对用户帐户、授权和密码管理的 12 条最佳实践](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)概述了运行后端的核心原则。如果您的用户遍布世界上不同的地区，则需要考虑本地化您的站点对第三方身份服务及其内容的使用。
+
+还有以下两个相对较新的 API 没有在本文中介绍，但它们可以帮助您构建更好的登录体验：
+
+- [**WebOTP**](/web-otp/)：通过短信向手机发送一次性密码或 PIN 码。这可以允许用户选择电话号码作为标识符（无需输入电子邮件地址！），还可以启用登录的两步验证和付款确认的一次性代码。
+- [**凭据管理**](https://developer.chrome.com/blog/credential-management-api/)：使开发人员能够以编程方式存储和检索密码凭据和联合凭据。 {% endAside %}
+
+## 使用有意义的 HTML {: #meaningful-html }
+
+使用为作业构建的元素：`<form>`、`<label>` 和 `<button>`。这些启用内置浏览器功能，提高可访问性，并为您的标记添加含义。
+
+### 使用`<form>` {: #form }
+
+您可能想将输入包装在 `<div>` 中并纯粹使用 JavaScript 处理输入数据提交。通常最好使用普通的旧 [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) 元素。这使屏幕阅读器和其他辅助设备可以访问您的站点，启用一系列内置浏览器功能，从而使得为旧浏览器构建基本功能登录变得更简单，并且即使 JavaScript 失败也仍然可以工作。
+
+{% Aside 'gotchas' %} 一个常见的错误是将整个网页包装在一个表单中，这很容易导致浏览器密码管理器和自动填充出现问题。为每个需要表单的 UI 组件使用不同的 &lt;form&gt;。例如，如果您在同一页面上进行登录和搜索，则应使用两个表单元素。 {% endAside %}
+
+### 使用`<label>` {: #label }
+
+要标记输入，请使用[`<label>`](https://developer.mozilla.org/docs/Web/HTML/Element/label) !
+
+```html
+<label for="email">Email</label>
+<input id="email" …>
+```
+
+两个原因：
+
+- 点击或单击标签将焦点移至其输入。通过使用标签的 `for` 属性和输入的 `name` 或 `id` 将标签与输入相关联。
+- 当标签或标签的输入获得焦点时，屏幕阅读器会宣布标签文本。
+
+不要使用占位符作为输入标签。一旦开始输入文本，人们很可能会忘记输入的内容，尤其是当他们分心时（“我输入的是电子邮件地址、电话号码还是帐户 ID？”）。占位符还有许多其他潜在问题：如果您不相信，请参阅[不要使用占位符属性](https://www.smashingmagazine.com/2018/06/placeholder-attribute/)和[表单字段中的占位符是有害的。](https://www.nngroup.com/articles/form-design-placeholders/)
+
+最好将标签放在输入之上。这可以实现跨移动和桌面的一致设计，根据 [Google AI 研究](https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)，这还可以让用户更快地进行扫描。您将获得全宽标签和输入，并且无需调整标签和输入宽度以适合标签文本。
+
+<figure>{% Img src="image/admin/k0ioJa9CqnMI8vyAvQPS.png", alt="屏幕截图：显示移动设备上的表单输入标签位置：输入旁边和输入上方。",  width="500", height="253" %} <figcaption>标签和输入宽度在同一行时受到限制。</figcaption></figure>
+
+在移动设备上打开[标签位置](https://label-position.glitch.me)故障，亲自查看。
+
+### 使用`<button>` {: #button }
+
+使用 [`<button>`](https://developer.mozilla.org/docs/Web/HTML/Element/button) 作为按钮！按钮元素提供可访问的行为和内置表单提交功能，并且可以轻松设置样式。`<div>` 或其他一些伪装成按钮的元素没有意义。
+
+确保提交按钮说明它的作用。示例包括**创建帐户**或**登录**，而不是**提交**或**开始** 。
+
+### 确保成功提交表单 {: #submission }
+
+帮助密码管理员了解表单已提交。有两种方法可以做到这一点：
+
+- 导航到不同的页面。
+- 使用 `History.pushState()` 或 `History.replaceState()` 模拟导航，并删除密码表单。
+
+对于 `XMLHttpRequest` 或 `fetch` 请求，确保在响应中报告登录成功，并通过从 DOM 中取出表单以及向用户指示成功来处理。
+
+考虑在用户轻触或点击**登录**按钮后禁用它。即使在快速响应的站点上，[许多用户也会多次点击按钮。](https://baymard.com/blog/users-double-click-online)这会减慢交互速度并增加服务器负载。
+
+相反，不要禁用等待用户输入的表单提交。例如，如果用户尚未输入其客户 PIN，请勿禁用**登录**按钮。用户可能会错过表单中的某些内容，然后尝试反复点击（已禁用）**登录**按钮并认为它不起作用。至少，如果您必须禁用表单提交，请向用户解释当他们单击禁用按钮时缺少什么。
+
+{% Aside 'caution' %} 表单中按钮的默认类型是 `submit`。如果您想在表单中添加另一个按钮（例如，对于**显示密码** ），请添加 `type="button"` 。否则单击或点击按钮将提交表单。
+
+在任何表单域获得焦点时按 `Enter` 键会模拟单击表单中第一个 `submit` 按钮。如果您在表单中的**提交**按钮之前包含一个按钮，并且未指定类型，则该按钮将具有表单中按钮的默认类型 ( `submit` ) 并在提交表单之前接收点击事件。有关示例，请参阅我们的[演示](https://enter-button.glitch.me/)：填写表格，然后按 `Enter`。 {% endAside %}
+
+### 不要加倍输入 {: #no-double-inputs }
+
+某些站点会强制用户输入电子邮件或密码两次。这可能会降低少数用户的错误，但会给*所有*用户带来额外工作，并且[增加放弃率](https://uxmovement.com/forms/why-the-confirm-password-field-must-die/)。在浏览器自动填充电子邮件地址或建议强密码的情况下，询问两次也毫无意义。最好让用户确认他们的电子邮件地址（无论如何您都需要这样做），并让他们在必要时轻松重置密码。
+
+## 充分利用元素属性 {: #element-attributes }
+
+这是魔法真正发生的地方！浏览器有多个有用的内置功能，这些功能使用输入元素属性。
+
+## 将密码保密——但允许用户在需要时查看它们 {: #show-password }
+
+密码输入应该有 `type="password"` 来隐藏密码文本并帮助浏览器理解输入的是密码。（请注意，浏览器使用[各种技术](#autofill)来理解输入角色并决定是否提供保存密码。）
+
+您应该添加**显示密码**图标或按钮，让用户能够检查他们输入的文本——并且不要忘记添加**忘记密码**链接。请参阅[启用密码显示](#password-display)。
+
+<figure>{% Img src="image/admin/58suVe0HnSLaJvNjKY53.png", alt="显示“显示密码”图标的 Google 登录表单。", width="300", height="107" %}<figcaption>从 Google 登录表单输入密码：使用<strong>显示密码</strong>图标和<strong>忘记密码</strong>链接。</figcaption></figure>
+
+## 为移动用户提供正确的键盘 {: #mobile-keyboards }
+
+使用 `<input type="email">` 为移动用户提供合适的键盘并启用浏览器的基本内置电子邮件地址验证……无需 JavaScript！
+
+如果您需要使用电话号码而非电子邮件地址，`<input type="tel">` 可在移动设备上启用电话键盘。您还可以在必要时使用 `inputmode` 属性：`inputmode="numeric"` 非常适合 PIN 码。[您想知道的关于输入模式的一切](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)都有更多的细节。
+
+{% Aside 'caution' %} `type="number"` 添加向上/向下箭头来增加数字，所以不要将它用于不打算增加的数字，例如 ID 和帐号。 {% endAside %}
+
+### 防止移动键盘遮挡**登录**按钮 {: #keyboard-obstruction }
+
+不幸的是，如果您不小心，移动键盘可能会覆盖您的表单，或者更糟糕的是，部分遮挡**登录**按钮。用户可能在意识到发生了什么之前就放弃了。
+
+<figure>{% Img src="image/admin/rLo5sW9LBpTcJU7KNnb7.png", alt="Android 手机登录表单的两个屏幕截图：一个显示提交按钮如何被手机键盘遮挡。", width="400 ", height="360" %}<figcaption><b>登录</b>按钮：一会儿能看见，一会儿看不见。</figcaption></figure>
+
+在可能的情况下，仅在**登录**页面顶部显示电子邮件/电话和密码输入来避免这种情况。将其他内容放在下面。
+
+<figure>{% Img src="image/admin/0OebKiAP4sTgaXbcbvYx.png", alt="Android 手机登录表单的屏幕截图：登录按钮没有被手机键盘遮挡。", width="200", height="342" %}<figcaption>键盘没有遮挡<b>登录</b>按钮。</figcaption></figure>
+
+#### 在一系列设备上测试 {: #devices }
+
+您需要针对目标受众在一系列设备上进行测试，并进行相应调整。 BrowserStack 支持在一系列真实设备和浏览器上对[开源项目进行免费测试。](https://www.browserstack.com/open-source)
+
+<figure>{% Img src="image/admin/jToMlWgjS3J2WKmjs1hx.png", alt="iPhone 7、8 和 11 上登录表单的屏幕截图。在 iPhone 7 和 8 上，登录按钮被手机键盘遮挡，但 iPhone 11 上则没有", width="800", height="522" %}<figcaption><b>登录</b>按钮：在 iPhone 7 和 8 上被遮挡，但在 iPhone 11 上没有。</figcaption></figure>
+
+#### 考虑使用两页 {: #two-pages }
+
+一些网站（包括亚马逊和 eBay）通过在两个页面上询问电子邮件/电话和密码来避免这个问题。这种方法还简化了体验：用户一次只负责一件事。
+
+<figure>{% Img src="image/admin/CxpObjYZMs0MMFo66f4P.png", alt="亚马逊网站登录表单的截图：电子邮件/电话和密码在两个单独的“页面”上。", width="400", height="385" %}<figcaption>两阶段登录：电子邮件或电话，然后是密码。</figcaption></figure>
+
+理想情况下，这应该使用单个 &lt;form&gt; 来实现。使用 JavaScript 最初仅显示电子邮件输入，然后将其隐藏并显示密码输入。如果您必须强制用户在输入电子邮件和密码之间导航到新页面，则第二页上的表单应该有一个带有电子邮件值的隐藏输入元素，以帮助密码管理器存储正确的值。[Chromium 理解的密码表单样式](https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)提供了一个代码示例。
+
+### 帮助用户避免重新输入数据 {: #autofill }
+
+您可以帮助浏览器正确存储数据并自动填充输入，这样用户就不必记住输入电子邮件和密码值。这在移动设备上尤其重要，对于电子邮件输入至关重要，因为电子邮件的[放弃率很高](https://www.formisimo.com/blog/conversion-rate-increases-57-with-form-analytics-case-study/)。
+
+这有两个部分：
+
+1. `autocomplete`、`name`、`id` 和 `type` 属性帮助浏览器了解输入的作用，以便存储以后可用于自动填充的数据。为了允许存储数据以进行自动填充，现代浏览器还要求输入具有稳定的 `name` 或 `id` 值（不是在每次页面加载或站点部署时随机生成的），并且在带有 `submit` 按钮的 &lt;form&gt; 中。
+
+2. `autocomplete` 属性可帮助浏览器使用存储的数据正确自动填充输入。
+
+对于电子邮件输入，请使用 `autocomplete="username"` ，因为现代浏览器中的密码管理器可以识别 `username`。即使您应该使用  `type="email"`，您可能想使用 `id="email"` 和 `name="email"`。
+
+对于密码输入，使用适当的 `autocomplete` 和 `id` 值来帮助浏览器区分新密码和当前密码。
+
+### 将 `autocomplete="new-password"` 和 `id="new-password"` 用于新密码 {: #new-password }
+
+- 将 `autocomplete="new-password"` 和 `id="new-password"` 用于登录表单中的密码输入，或更改密码表单中的新密码输入。
+
+### 将 `autocomplete="current-password"` 和 `id="current-password"` 用于现有密码 {: #current-password }
+
+- 将 `autocomplete="current-password"` 和 `id="current-password"` 用于登录表单中的密码输入，或者用于更改密码表单中用户旧密码的输入。这告诉浏览器您希望它使用它为站点存储的当前密码。
+
+对于登录表单：
+
+```html
+<input type="password" autocomplete="new-password" id="new-password" …>
+```
+
+对于登录：
+
+```html
+<input type="password" autocomplete="current-password" id="current-password" …>
+```
+
+{% Aside %}Chrome 等浏览器可以使用浏览器的密码管理器在登录过程中为回访用户自动填充字段。为了使这些功能发挥作用，浏览器需要能够区分用户何时更改了密码。
+
+特别是在设置新密码后，更改用户密码的表单应从页面中清除或隐藏。如果更改用户密码的表单在发生密码更改后仍然填写在页面上，则浏览器可能无法记录更新。 {% endAside %}
+
+### 支持密码管理器 {: #password-managers }
+
+不同的浏览器处理电子邮件自动填充和密码建议的方式略有不同，但效果大致相同。例如，在桌面版 Safari 11 及更高版本上，会显示密码管理器，然后在可用时使用生物识别身份验证（指纹或面部识别）。
+
+<figure>{% Img src="image/admin/UjBRRYaLbX9bh3LDFcAM.png", alt="桌面版 Safari 登录过程的三个阶段的屏幕截图：密码管理器、生物识别身份验证、自动填充。", width="800", height= "234" %}<figcaption>使用自动填充登录 - 无需输入文本！</figcaption></figure>
+
+桌面版 Chrome 显示电子邮件建议、显示密码管理器并自动填充密码。
+
+<figure>{% Img src="image/admin/mDm1cstWZB9jJDzMmzgE.png", alt="桌面版 Chrome 登录过程的四个阶段的屏幕截图：电子邮件填充、电子邮件建议、密码管理器、选择时自动填充。", width=" 800", height="232" %}<figcaption> Chrome 84 中的自动填充登录流程。</figcaption></figure>
+
+浏览器密码和自动填充系统并不简单。猜测、存储和显示值的算法没有标准化，并且因平台而异。例如，正如 [Hidde de Vries](https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form) 所指出的：“Firefox 的密码管理器通过[配方系统](https://bugzilla.mozilla.org/show_bug.cgi?id=1119454)补充了它的启发式方法。”
+
+[自动填充：Web 开发人员应该知道的东西，但没有](https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont)更多关于使用 `name` 和 `autocomplete` 的信息。[HTML 规范](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#inappropriate-for-the-control)列出了所有 59 个可能的值。
+
+{% Aside %} 对于 `form` 元素本身，以及任何 `input`、`select` 和`textarea` 元素，您可以通过在注册和登录表单中使用不同的 `name` 和 `id` 值来帮助密码管理器 {% endAside %}
+
+### 启用浏览器建议强密码 {: #password-suggestions }
+
+现代浏览器使用启发式方法来决定何时显示密码管理器 UI 并建议使用强密码。
+
+以下是 Safari 在桌面上的执行方式。
+
+<figure>{% Img src="image/admin/B1DlZK0CllVjrOUbb5xB.png", alt="Firefox 密码管理器桌面截图。", width="800", height="229" %}<figcaption> Safari 中的密码建议流程。</figcaption></figure>
+
+（自 12.0 版以来，Safari 中已提供强大的唯一密码建议。）
+
+内置的浏览器密码生成器意味着用户和开发人员不需要弄清楚什么是“强密码”。由于浏览器可以安全地存储密码并根据需要自动填充密码，因此用户无需记住或输入密码。鼓励用户利用内置的浏览器密码生成器也意味着他们更有可能在您的网站上使用唯一的强密码，并且不太可能重复使用可能在其他地方被泄露的密码。
+
+{% Aside %} 这种方法的缺点是无法跨平台共享密码。例如，用户可能在 iPhone 上使用 Safari，在 Windows 笔记本电脑上使用 Chrome。 {% endAside %}
+
+### 帮助用户避免意外丢失输入 {: #required-fields }
+
+将 `required` 属性添加到电子邮件和密码字段。现代浏览器会自动提示并为丢失的数据设置焦点。无需 JavaScript！
+
+<figure>{% Img src="image/admin/n5Nr290upVmQGvlc263U.png", alt="桌面版 Firefox 和 Chrome for Android 的屏幕截图，显示“请填写此字段”提示缺少数据。", width="600", height=" 392" %}<figcaption>提示并关注桌面版 Firefox（版本 76）和 Android 版 Chrome（版本 83）上丢失的数据。</figcaption></figure>
+
+## 手指和拇指设计 {: #mobile-design }
+
+与输入元素和按钮相关的几乎所有内容的默认浏览器大小都太小，尤其是在移动设备上。这似乎很明显，但这是许多网站上登录表单的常见问题。
+
+### 确保输入和按钮足够大 {: #tap-targets }
+
+输入和按钮的默认大小和填充在桌面上太小，在移动设备上更糟。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/lJNO6w2dOyp4cYKl5b3y.png", alt="桌面版 Chrome 和 Chrome for Android 中无样式表单的屏幕截图。", width="800", height="434" %}</figure>
+
+根据 [Android 辅助功能指南](https://support.google.com/accessibility/android/answer/7101858?hl=en-GB)，触摸屏对象的推荐目标尺寸为 7-10 毫米。 Apple 界面指南建议 48x48 像素，W3C 建议[至少 44x44 CSS 像素](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)。在此基础上，为移动设备的输入元素和按钮添加（至少）大约 15 像素的内边距，在桌面设备上添加大约 10 像素的内边距。用真正的移动设备和真正的手指或拇指试试这个。您应该能够轻松点击每个输入和按钮。
+
+[点击目标的大小不合适](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/)Lighthouse 审计可以帮助您自动化检测太小的输入元素的过程。
+
+#### 拇指设计 {: #design-for-thumbs }
+
+搜索[触摸目标](https://www.google.com/search?q=touch+target)，您会看到很多食指的图片。然而，在现实世界中，许多人使用拇指与手机进行交互。拇指比食指大，控制不太精确。重要的是要保证足够大小的触摸目标。
+
+### 使文本足够大 {: #size-text-correctly }
+
+与大小和填充一样，输入元素和按钮的默认浏览器字体大小太小，尤其是在移动设备上。
+
+<figure>{% Img src="image/admin/EeIsqWhLbot15p4SYpo2.png", alt="Chrome 桌面和 Android 上无样式表单的屏幕截图。", width="800", height="494"%}<figcaption>桌面和移动设备上的默认样式：输入文本太小，许多用户无法辨认。</figcaption></figure>
+
+不同平台上的浏览器字体大小不同，因此很难指定在任何地方都能正常工作的特定字体大小。对流行网站的快速调查显示桌面上的大小为 13-16 像素：匹配该物理大小是移动文本的最佳最小值。
+
+这意味着您需要在移动设备上使用更大的像素尺寸：`16px` 的大小在 Chrome 桌面上是相当清晰的，但即使有良好的视力，在 Chrome for Android 上也难以阅读 `16px` 的文本。您可以使用[媒体查询](https://developers.google.com/web/fundamentals/design-and-ux/responsive#apply_media_queries_based_on_viewport_size)为不同的视口大小设置不同的字体像素大小。`20px` 在移动设备上是正确的——但您应该和视力不好的朋友或同事一起测试一下。
+
+[文档没有使用清晰的字体大小](https://developer.chrome.com/docs/lighthouse/seo/font-size/) Lighthouse 审计可以帮助您自动化检测太小文本的过程。
+
+### 在输入之间提供足够的空间 {: #size-margins-correctly }
+
+添加足够的空间以使输入作为触摸目标工作良好。换句话说，瞄准大约手指宽度的空间。
+
+### 确保您的输入清晰可见 {: #visible-inputs }
+
+输入的默认边框样式使它们难以看到。它们在某些平台（例如 Android 版 Chrome）上几乎不可见。
+
+除了填充，添加边框：在白色背景上，一个好的规则是使用 `#ccc` 或更暗的边框。
+
+<figure>{% Img src="image/admin/OgDJ5V2N7imHXSBkN4pr.png", alt="Chrome on Android 中样式表单的屏幕截图。", width="250", height="525" %}<figcaption>清晰的文本、可见的输入边框、足够的填充和边距。</figcaption></figure>
+
+### 使用内置浏览器功能警告无效的输入值 {: #built-in-validation }
+
+浏览器具有内置功能，可以对具有 `type` 属性的输入进行基本的表单验证。当您提交具有无效值的表单时，浏览器会发出警告，并将焦点设置在有问题的输入上。
+
+<figure>{% Img src="image/admin/Phf9m5J66lIX9x5brzOL.png", alt="桌面版 Chrome 登录表单的屏幕截图，显示浏览器提示和无效电子邮件值的焦点。", width="300", height="290" %}<figcaption>浏览器的基本内置验证。</figcaption></figure>
+
+您可以使用 `:invalid` CSS 选择器来突出显示无效数据。使用 `:not(:placeholder-shown)` 避免选择没有内容的输入。
+
+```css
+input[type=email]:not(:placeholder-shown):invalid {
+  color: red;
+  outline-color: red;
+}
+```
+
+尝试不同的方法来突出显示具有无效值的输入。
+
+## 必要时使用 JavaScript {: #javascript }
+
+### 切换密码显示 {: #password-display }
+
+您应该添加**显示密码**图标或按钮，使用户能够检查他们输入的文本。当用户看不到他们输入的文本时，[可用性会受到影响。](https://www.nngroup.com/articles/stop-password-masking/)目前没有内置的方法可以做到这一点，但[有实施计划](https://twitter.com/sw12/status/1251191795377156099)。您需要改用 JavaScript。
+
+<figure><img src="./show-password-google.png" alt="显示“显示密码”图标的 Google 登录表单。" width="350"><figcaption> Google 登录表单：带有<strong>显示密码</strong>图标和<strong>忘记密码</strong>链接。</figcaption></figure>
+
+以下代码使用文本按钮添加**显示密码**功能。
+
+HTML：
+
+```html/2
+<section>
+  <label for="password">Password</label>
+  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
+  <input id="password" name="password" type="password" autocomplete="current-password" required>
+</section>
+```
+
+这是使按钮看起来像纯文本的 CSS：
+
+```css
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+以及用于显示密码的 JavaScript：
+
+```js
+const passwordInput = document.getElementById('password');
+const togglePasswordButton = document.getElementById('toggle-password');
+
+togglePasswordButton.addEventListener('click', togglePassword);
+
+function togglePassword() {
+  if (passwordInput.type === 'password') {
+    passwordInput.type = 'text';
+    togglePasswordButton.textContent = 'Hide password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Hide password.');
+  } else {
+    passwordInput.type = 'password';
+    togglePasswordButton.textContent = 'Show password';
+    togglePasswordButton.setAttribute('aria-label',
+      'Show password as plain text. ' +
+      'Warning: this will display your password on the screen.');
+  }
+}
+```
+
+这是最终结果：
+
+<figure>{% Img src="image/admin/x4NP9JMf1KI8PapQ9JFh.png", alt="Mac 和 iPhone 7 Safari 中显示密码文本“按钮”的登录表单截图。", width="800", height ="468" %}<figcaption>Mac 和 iPhone 7 上的 Safari 中带有<strong>显示密码</strong>文本“按钮”的登录表单。</figcaption></figure>
+
+### 使密码输入可访问 {: #accessible-password-inputs }
+
+使用 `aria-writtenby` 通过为其提供描述约束的元素的 ID 来概述密码规则。屏幕阅读器提供标签文本、输入类型（密码）和描述。
+
+```html
+<input type="password" aria-describedby="password-constraints" …>
+<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
+```
+
+添加**显示密码**功能时，请确保包含 `aria-label` 以警告将显示密码。否则用户可能会无意中泄露密码。
+
+```html/1-2
+<button id="toggle-password"
+        aria-label="Show password as plain text.
+                    Warning: this will display your password on the screen.">
+  Show password
+</button>
+```
+
+您可以在以下故障中看到两个 ARIA 功能的运行情况：
+
+{% Glitch { id: 'sign-in-form', path: 'index.html', height: 480 } %}
+
+[创建可访问表单](https://webaim.org/techniques/forms/)提供了更多帮助表单可访问的提示。
+
+### 实时和提交前验证 {: #validation }
+
+HTML 表单元素和属性具有用于基本验证的内置功能，但您还应该使用 JavaScript 在用户输入数据和尝试提交表单时进行更可靠的验证。
+
+{% Aside 'warning' %} 客户端验证可帮助用户输入数据并避免不必要的服务器负载，但您必须始终验证和清理后端的数据。 {% endAside %}
+
+登录表单代码实验室的[第 5 步](https://glitch.com/edit/#!/sign-in-form-codelab-5)使用[Constraint Validation API](https://html.spec.whatwg.org/multipage/forms.html#constraints) （得到[广泛支持](https://caniuse.com/#feat=constraint-validation)）添加自定义验证，使用内置浏览器 UI 设置焦点和显示提示。
+
+了解更多：[使用 JavaScript 进行更复杂的实时验证](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation)。
+
+### 分析和 RUM {: #analytics }
+
+“如果无法测量，则无法改进”对于注册和登录表单尤其如此。您需要设定目标、成功测量、改进您的网站——不断重复。
+
+[折扣可用性测试](https://www.nngroup.com/articles/discount-usability-20-years/)有助于尝试更改，但您需要真实世界的数据才能真正了解您的用户如何体验您的注册和登录表单：
+
+- **页面分析**：注册和登录页面浏览量、跳出率和退出。
+- **交互分析**：[目标渠道](https://support.google.com/analytics/answer/6180923?hl=en)（用户在哪里放弃您的登录或登录流程？）和[事件](https://developers.google.com/analytics/devguides/collection/gtagjs/events)（用户在与您的表单交互时采取什么操作？）
+- **网站性能**：以[用户为中心的指标](/user-centric-performance-metrics)（您的注册和登录表单是否由于某种原因变慢，如果是，原因是什么？）。
+
+您可能还需要考虑实施 A/B 测试以尝试不同的注册和登录方法，并在向所有用户发布更改之前分阶段部署以验证对部分用户的更改。
+
+## 一般准则 {: #general-guidelines }
+
+精心设计的 UI 和 UX 可以减少登录表单的放弃：
+
+- 不要让用户寻找登录！在页面顶部放置一个指向登录表单的链接，使用易于理解的措辞，例如**登录**、**创建帐户**或**注册**。
+- 保持专注！注册表单不是用优惠和其他网站功能分散人们注意力的地方。
+- 最大限度地减少注册的复杂性。仅当用户看到提供这些数据的明显好处时才收集其他用户数据（例如地址或信用卡详细信息）。
+- 在用户开始使用您的注册表单之前，请明确价值主张是什么。他们如何从登录中受益？为用户提供具体的激励以完成注册。
+- 如果可能，允许用户使用手机号码而不是电子邮件地址来标识自己，因为有些用户可能不使用电子邮件。
+- 使用户可以轻松重置密码，将**忘记密码？**链接放在显眼的位置。
+- 链接到您的服务条款和隐私政策文件：从一开始就向用户说明您如何保护他们的数据。
+- 在您的注册和登录页面上包含您公司或组织的徽标和名称，并确保语言、字体和样式与您网站的其余部分相匹配。某些表单与其他内容不属于同一站点，尤其是当它们具有明显不同的 URL 时。
+
+## 继续学习 {: #resources }
+
+- [创建惊人的表格](/learn/forms/)
+- [移动表单设计的最佳实践](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [更强大的表单控件](/more-capable-form-controls)
+- [创建可访问表单](https://webaim.org/techniques/forms/)
+- [使用凭证管理 API 简化登录流程](https://developer.chrome.com/blog/credential-management-api/)
+- [使用 WebOTP API 验证网络上的电话号码](/web-otp/)
+
+照片：[Meghan Schiereck](https://unsplash.com/photos/_XFObcM_7KU)；来源：[Unsplash](https://unsplash.com)
diff --git a/src/site/content/zh/identity/sign-up-form-best-practices/index.md b/src/site/content/zh/identity/sign-up-form-best-practices/index.md
new file mode 100644
index 00000000000..301212a6461
--- /dev/null
+++ b/src/site/content/zh/identity/sign-up-form-best-practices/index.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: 注册表单最佳实践
+subhead: 帮助您的用户轻松注册、登录和管理他们的帐户详细信息。
+authors:
+  - samdutton
+scheduled: 'true'
+date: 2020-12-09
+updated: 2020-12-11
+description: 帮助您的用户轻松注册、登录和管理他们的帐户详细信息。
+hero: image/admin/YfAltWqxvie1SP19BxBj.jpg
+thumbnail: image/admin/7bDPvFWBMFIMynoqDpMc.jpg
+alt: 含有手写页面的剪贴板，显示播种的蔬菜列表。
+tags:
+  - forms
+  - identity
+  - layout
+  - mobile
+  - security
+  - ux
+codelabs:
+  - codelab-sign-up-form-best-practices
+---
+
+{% YouTube 'Ev2mCzJZLtY' %}
+
+如果用户需要登录您的网站，那么良好的注册表单设计至关重要。对于连接不良、使用移动设备、匆忙或压力大的人来说尤其如此。设计不佳的注册表单会导致高跳出率。每次跳出都可能意味着失去用户和造成用户不满意——而不仅仅是错过注册机会。
+
+{% Aside 'codelab' %}如果您希望通过手把手的教程学习这些最佳实践，请查看[注册表单最佳实践代码实验室](/codelab-sign-up-form-best-practices)。 {% endAside %}
+
+这是一个非常简单的注册表单示例，演示了所有最佳实践：
+
+{% Glitch { id: 'signup-form', path: 'index.html', height: 700 } %}
+
+{% Aside 'caution' %} 这篇博文阐述表单最佳实践。
+
+其没有解释如何通过第三方身份提供者（联合登录）实现注册或展示如何构建后端服务来验证用户、存储凭据和管理帐户。
+
+[将 Google Sign-In 集成到您的 Web 应用](https://developers.google.com/identity/sign-in/web/sign-in)解释了如何将联合登录添加到您的注册选项中。
+
+[用户帐户、授权和密码管理的 12 个最佳实践](https://cloud.google.com/blog/products/gcp/12-best-practices-for-user-account)概述了管理用户帐户的核心后端原则。 {% endAside %}
+
+## 清单
+
+- [如果可以，请避免登录](#no-forced-sign-in)。
+- [明确如何创建帐户](#obvious-account-creation)。
+- [明确如何访问帐户详细信息](#obvious-account-details)。
+- [减少表单杂乱项](#cut-clutter)。
+- [考虑会话长度](#session-length)。
+- [帮助密码管理器安全地建议和存储密码](#help-password-managers)。
+- [不允许泄露密码](#no-compromised-passwords)。
+- [允许密码粘贴](#allow-password-pasting)。
+- [切勿以纯文本形式存储或传输密码](#salt-and-hash)。
+- [不要强制更新密码](#no-forced-password-updates)。
+- [使更改或重置密码变得简单](#password-change)。
+- [启用联合登录](#federated-login)。
+- [使帐户切换变得简单](#account-switching)。
+- [考虑提供多重身份验证](#multi-factor-authentication)。
+- [注意用户名](#username)。
+- [在现场和实验室中进行测试](#analytics-rum)。
+- [在一系列浏览器、设备和平台上进行测试](#test-platforms)。
+
+## 如果可以，请避免登录 {: #no-forced-sign-in }
+
+在您实施注册表单并要求用户在您的网站上创建帐户之前，请考虑您是否真的需要这样做。在可能的情况下，您应该避免在登录后设置门控功能。
+
+最好的注册表单是没有注册表单！
+
+通过要求用户创建一个帐户，您会介于他们和他们想要实现的目标之间。您是在请求帮助，并要求用户信任您的个人数据。您存储的每个密码和数据项都带有隐私和安全“数据债务”，成为您网站的成本和责任。
+
+如果您要求用户创建帐户的主要原因是在导航或浏览会话之间保存信息，请[考虑改用客户端存储](/storage-for-the-web)。对于购物网站，强迫用户创建帐户进行购买被认为是放弃购物车的主要原因。您应该[将访客结帐设为默认值](/payment-and-address-form-best-practices#guest-checkout)。
+
+## 使登录变得明显 {: #obvious-account-creation}
+
+明确如何在您的网站上创建帐户，例如使用页面右上角的**登录**或**登录**按钮。避免使用模棱两可的图标或模糊的措辞（“加入！”、“加入我们”）并且不要在导航菜单中隐藏登录信息。可用性专家 Steve Krug 总结了这种网站可用性的方法：[不要让我思考！](https://uxplanet.org/dont-make-me-think-20-wise-thoughts-about-usability-from-steve-krug-876b563f1d63)如果您需要说服网络团队中的其他人，请使用[分析](#analytics-rum)来显示不同选项的影响。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KeztoU8KgAqrQ5CKBSWw.jpg", alt="两个在安卓手机上查看的电子商务网站样机截图。左边的一个使用了一个有点模棱两可的登录链接图标；右边的一个简单地说'登录'", width="800", height="737" %}<figcaption>使登录变得明显。图标可能不明确，但<b>登录</b>按钮或链接很明显。</figcaption></figure>
+
+{% Aside %}您可能会考虑是添加按钮（或链接）来创建帐户，还是添加供现有用户登录的按钮（或链接）。许多热门网站现在只显示一个**登录**按钮。当用户点击该按钮时，他们还会在必要时获得创建帐户的链接。现在这是一种常见模式，您的用户容易理解，但您可以使用[交互分析](#analytics-rum)来监控单个按钮是否效果最佳。 {% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WUgCNqhEgvoWEVwGjfrA.jpg", alt="Gmail 登录截图：一个页面，显示&quot;登录&quot;按钮，单击时会引导至也具有&quot;创建帐户链接&quot;的表单。", width="800", height="545" %}  <figcaption>Gmail 登录页面包含用于创建帐户的链接。<br>当窗口尺寸大于此处显示的尺寸时，Gmail 会显示<b>登录</b>链接和<b>创建帐户</b>按钮。</figcaption></figure>
+
+确保为通过身份提供商（例如 Google）注册并且还使用电子邮件和密码注册的用户关联帐户。如果您可以从身份提供商的配置文件数据访问用户的电子邮件地址，并且匹配两个帐户，那么这很容易做到。下面的代码显示了如何访问 Google 登录用户的电子邮件数据。
+
+```js
+// auth2 is initialized with gapi.auth2.init()
+if (auth2.isSignedIn.get()) {
+  var profile = auth2.currentUser.get().getBasicProfile();
+  console.log(`Email: ${profile.getEmail()}`);
+}
+```
+
+{：#obvious-account-details}
+
+用户登录后，请明确如何访问帐户详细信息。尤其要明确如何[更改或重置密码](#password-change)。
+
+## 减少表单杂乱项 {: #cut-clutter}
+
+在注册流程中，您的工作是将复杂性降至最低并让用户保持专注。减少杂乱项。现在不是分心和诱惑的时候！
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/avoid-distractions.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>不要分散用户完成注册的注意力。</figcaption></figure>
+
+在注册时，要求尽可能少。仅在您需要并且用户看到提供该数据的明显好处时才收集其他用户数据（例如姓名和地址）。请记住，您传达和存储的每一项数据都会产生成本和责任。
+
+不要仅仅为了确保用户获得正确的联系方式而加倍输入。这会减慢表单的完成速度，并且如果表单字段是自动填充的，则毫无意义。相反，在用户输入他们的联系方式后向用户发送确认代码，然后在他们响应后继续创建帐户。这是一种常见的注册模式：用户已经习惯了。
+
+您可能希望通过在用户每次在新设备或浏览器上登录时向用户发送代码来考虑免密码登录。Slack 和 Medium 等网站使用了这一版本。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/medium-sign-in.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>在 medium.com 上免密码登录。</figcaption></figure>
+
+与联合登录一样，这还有一个额外的好处，即您不必管理用户密码。
+
+## 考虑会话长度 {: #session-length}
+
+无论您对用户身份采取何种方法，您都需要对会话长度做出谨慎的决定：用户保持登录状态的时间以及可能导致您注销的原因。
+
+考虑您的用户是使用移动设备还是桌面设备，以及他们是在桌面设备上共享还是在共享设备上共享。
+
+{% Aside %}您可以通过对敏感功能强制重新进行身份验证来解决共享设备的一些问题，例如在进行购买或更新帐户时。您可以从[您的首个 WebAuthn 应用](https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0)代码实验室中找到更多关于实现多重身份验证的方法。 {% endAside %}
+
+## 帮助密码管理器安全地建议和存储密码 {: #help-password-managers}
+
+您可以帮助第三方和内置浏览器密码管理器建议和存储密码，让用户无需自己选择、记住或键入密码。密码管理器在现代浏览器中运行良好，可以跨设备、跨平台特定应用和 Web 应用同步帐户，也适用于新设备。
+
+这使得正确编码注册表单非常重要，尤其是使用正确的自动填充值。对于注册表单，使用 `autocomplete="new-password"` 建议新密码，并尽可能将正确的自动填充值添加到其他表单字段，例如 `autocomplete="email"` 和 `autocomplete="tel"`。您还可以通过在注册和登录表单、`form` 元素本身以及任何  `input`、`select` 和 `textarea` 元素中使用不同的 `name` 和  `id` 值来帮助密码管理器。
+
+您还应该使用适当的 [`type` 属性](https://developer.mozilla.org/docs/Web/HTML/Element/input/email)在移动设备上提供正确的键盘并启用浏览器的基本内置验证。您可以从[付款和地址表单最佳实践](/payment-and-address-form-best-practices#type)中了解更多信息。
+
+{% Aside %}[登录表单最佳实践](/sign-in-form-best-practices)包含更多关于如何改进表单设计、布局和可访问性以及如何正确编码表单以利用内置浏览器功能的提示。 {% endAside %}
+
+## 确保用户输入安全密码 {: #secure-passwords}
+
+启用密码管理器建议密码是最好的选择，您应该鼓励用户接受浏览器和第三方浏览器管理器建议的强密码。
+
+但是，很多用户都希望输入自己的密码，因此您需要实施密码强度规则。美国国家标准与技术研究所解释了[如何避免不安全的密码](https://pages.nist.gov/800-63-3/sp800-63b.html#5-authenticator-and-verifier-requirements)。
+
+{% Aside 'warning' %} 某些网站上的注册表单具有密码验证规则，不允许使用浏览器和第三方密码管理器生成的强密码。确保您的站点不会这样做，因为它会中断表单的填写、惹恼用户并要求用户创建自己的密码，这可能不如密码管理器生成的密码安全。 {% endAside %}
+
+## 不允许泄露密码 {: #no-compromised-passwords}
+
+无论您为密码选择何种规则，您都不应允许[在安全漏洞中暴露](https://haveibeenpwned.com/PwnedWebsites)的密码。
+
+用户输入密码后，您需要检查该密码是否已被泄露。网站 [Have I Being Pwned](https://haveibeenpwned.com/Passwords) 提供了用于密码检查的 API，或者您可以自己将其作为服务运行。
+
+Google 的密码管理器还允许您[检查您现有的任何密码是否已泄露](https://passwords.google.com/checkup)。
+
+如果您确实拒绝了用户建议的密码，请具体告诉他们拒绝的原因。在用户输入值后立即[显示问题原因并解释如何修复它们](https://baymard.com/blog/inline-form-validation)——不要等到他们提交注册表单并不得不等待服务器的响应之后。
+
+<figure>
+   <video controls autoplay loop muted>
+     <source src="https://samdutton.com/password-validation.mp4" type="video/mp4">
+   </source></video>
+  <figcaption>明确密码被拒绝的原因。</figcaption></figure>
+
+## 不要禁止密码粘贴 {: #allow-password-pasting}
+
+某些站点不允许将文本粘贴到密码输入中。
+
+禁止密码粘贴会惹恼用户，从而导致用户使用容易记忆的密码（因此可能更容易被破解），并且根据英国国家网络安全中心等组织的说法，实际上可能会[降低安全性](https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords)。用户在尝试粘贴密码*后*才能意识到不允许粘贴，因此[禁止密码粘贴并不能避免剪贴板漏洞](https://github.com/OWASP/owasp-masvs/issues/106)。
+
+## 切勿以纯文本存储或传输密码 {: #salt-and-hash}
+
+确保对密码进行[salt 和散列](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#Use_a_cryptographically_strong_credential-specific_salt)——[不要尝试发明自己的散列算法](https://www.schneier.com/blog/archives/2011/04/schneiers_law.html)！
+
+## 不要强制更新密码 {: #no-forced-password-updates}
+
+[不要随意强迫用户更新他们的密码。](https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers:~:text=Verifiers%20SHOULD%20NOT%20require%20memorized%20secrets%20to%20be%20changed%20arbitrarily%20(e.g.%2C%20periodically).)
+
+强制更新密码对 IT 部门来说可能代价高昂，让用户感到厌烦，并且[对安全性没有太大影响](https://pages.nist.gov/800-63-FAQ/#q-b05)。它还可能造成人们使用不安全、容易记住的密码，或保留密码的物理记录。
+
+您应该监视异常的帐户活动并警告用户，而不是强制更新密码。如果可能，您还应该监控因数据泄露而被泄露的密码。
+
+您还应该让您的用户访问他们的帐户登录历史记录，向他们显示登录发生的时间和地点。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zZXmhWc9bZ1GtvrE5Ooq.jpg", alt="Gmail 帐户活动页面", width="800", height="469" %}<figcaption> <a href="https://support.google.com/mail/answer/45938?hl=en-GB" title="了解如何查看 Gmail 帐户活动。">Gmail 帐户活动页面</a>。</figcaption></figure>
+
+## 使更改或重置密码变得简单 {: #password-change}
+
+让用户清楚地知道在哪里以及如何**更新**他们的帐户密码。在某些网站上，这出奇地困难。
+
+当然，您还应该让用户在忘记密码时轻松**重置**密码。Web 应用安全计划 (Open Web Application Security Project) 提供了有关[如何处理丢失的密码](https://cheatsheetseries.owasp.org/cheatsheets/Forgot_Password_Cheat_Sheet.html)的详细指南。
+
+为了确保您的企业和用户的安全，如果用户发现密码已被盗用，帮助他们更改密码尤为重要。为了使这更容易，您应该向重定向到您的密码管理页面的网站添加一个 [`/.well-known/change-password`](https://w3c.github.io/webappsec-change-password-url/) URL。这使密码管理器可以将您的用户直接导航到他们可以更改您网站密码的页面。此功能现已在 Safari、Chrome 中实现，并且即将在其他浏览器中使用。[通过添加用于更改密码的知名 URL 帮助用户轻松更改密码](/change-password-url)解释了如何实现这一点。
+
+如果用户需要，您还应该让他们轻松删除他们的帐户。
+
+## 通过第三方身份提供商提供登录 {: #federated-login}
+
+许多用户更喜欢使用电子邮件地址和密码注册表单登录网站。但是，您还应该允许用户通过第三方身份提供者登录，也称为联合登录。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/jubgwX1shLB7qAIiioTU.jpg", alt="WordPress 登录页面", width="800", height="513" %}<figcaption> WordPress 登录页面，含 Google 和 Apple 登录选项。</figcaption></figure>
+
+这种方法有几个优点。对于使用联合登录创建帐户的用户，您无需询问、交流或存储密码。
+
+您还可以通过联合登录访问其他经过验证的个人资料信息，例如电子邮件地址——这意味着用户无需输入该数据，您也无需自己进行验证。联合登录还可以让用户在使用新设备时更加轻松。
+
+[将 Google Sign-In 集成到您的 Web 应用](https://developers.google.com/identity/sign-in/web/sign-in)解释了如何将联合登录添加到您的注册选项中。[许多其他](https://en.wikipedia.org/wiki/Federated_identity#Examples)身份平台可用。
+
+{% Aside %} 获得新设备时的“第一天体验”变得越来越重要。用户希望从多种设备登录，包括手机、笔记本电脑、台式机、平板电脑、电视或汽车。如果您的注册和登录表单不是无缝衔接的，那么此时您可能会失去用户，或者至少在他们重新设置之前失去与他们的联系。您需要让新设备上的用户尽可能快速轻松地启动并运行您的网站。这是联合登录可以提供帮助的另一个领域。 {% endAside %}
+
+## 使帐户切换变得简单 {: #account-switching}
+
+许多用户使用相同的浏览器共享设备并在帐户之间切换。无论用户是否访问联合登录，您都应该使帐户切换变得简单。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/sPDZJIY5Vo2ijqyuofCy.jpg", alt="Gmail, 显示账户切换", width="800", height="494" %}<figcaption> Gmail 上的帐户切换。</figcaption></figure>
+
+## 考虑提供多重身份验证 {: #multi-factor-authentication}
+
+多重身份验证意味着确保用户以不止一种方式提供身份验证。例如，除了要求用户设置密码外，您还可以使用通过电子邮件或 SMS 文本消息发送的一次性密码，或使用基于应用的一次性密码、安全密钥或指纹传感器。[SMS OTP 最佳实践](/sms-otp-form)和[使用 WebAuthn 启用强身份验证](https://developer.chrome.com/blog/webauthn/)解释了如何实现多重身份验证。
+
+如果您的站点处理个人或敏感信息，您当然应该提供（或强制执行）多重身份验证。
+
+## 注意用户名 {: #username}
+
+除非（或直到）您需要用户名，否则不要坚持使用用户名。使用户能够仅使用电子邮件地址（或电话号码）和密码进行注册和登录，如果他们愿意，也可以使用[联合登录](#federated-login)。不要强迫他们选择并记住用户名。
+
+如果您的网站确实需要用户名，请不要对其施加不合理的规则，也不要阻止用户更新其用户名。在您的后端，您应该为每个用户帐户生成一个唯一 ID，而不是基于用户名等个人数据的标识符。
+
+还要确保对用户名使用 `autocomplete="username"`。
+
+{% Aside 'caution' %}与个人姓名一样，请确保用户名不限于[拉丁字母中的字符](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes#Types:~:text=Latin%20alphabet)。[付款和地址表单最佳实践](/payment-and-address-form-best-practices#unicode-matching)解释了如何以及为何使用 Unicode 字母匹配进行验证。 {% endAside %}
+
+## 在一系列设备、平台、浏览器和版本上进行测试 {: #test-platforms}
+
+在用户最常用的平台上测试注册表单。表单元素功能可能会有所不同，视口大小的差异可能会导致布局问题。 BrowserStack 支持在一系列设备和浏览器上对[开源项目进行免费测试。](https://www.browserstack.com/open-source)
+
+## 实施分析和真实用户监控 {: #analytics-rum}
+
+您需要[现场数据和实验室数据](/how-to-measure-speed/#lab-data-vs-field-data)来了解用户如何体验您的注册表单。分析和[真实用户监控](https://developer.mozilla.org/docs/Web/Performance/Rum-vs-Synthetic#Real_User_Monitoring) (RUM) 为用户的实际体验提供数据，例如加载注册页面需要多长时间、用户交互（或不交互）哪些 UI 组件以及用户完成注册所需的时间。
+
+- **页面分析**：注册流程中每个页面的[页面浏览量、跳出率和退出率。](https://analytics.google.com/analytics/academy/course/6)
+- **交互分析**：[目标渠道](https://support.google.com/analytics/answer/6180923?hl=en)和[事件](https://developers.google.com/analytics/devguides/collection/gtagjs/events)表明用户放弃注册流程的位置以及用户点击注册页面的按钮、链接和其他组件的比例。
+- **网站性能**：以[用户为中心的指标](/user-centric-performance-metrics)可以告诉您注册流程是否加载缓慢或[视觉不稳定](/cls)。
+
+微小的变化会对注册表单的完成率产生很大的影响。分析和 RUM 使您能够优化更改并确定其优先级，并监控您的站点是否存在本地测试未暴露的问题。
+
+## 继续学习 {: #resources }
+
+- [登录表单最佳实践](/sign-in-form-best-practices)
+- [付款和地址表单最佳实践](/payment-and-address-form-best-practices)
+- [创建出色的表单](/learn/forms/)
+- [移动表单设计最佳实践](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
+- [更强大的表单控件](/more-capable-form-controls)
+- [创建无障碍表单](https://webaim.org/techniques/forms/)
+- [使用凭证管理 API 简化注册流程](https://developer.chrome.com/blog/credential-management-api/)
+- [使用 WebOTP API 验证网络上的电话号码](/web-otp)
+
+照片：[@ecowarrioprincess](https://unsplash.com/@ecowarriorprincess)，来源：[Unsplash](https://unsplash.com/photos/lUShu7PHIGA)。
diff --git a/src/site/content/zh/identity/sms-otp-form/index.md b/src/site/content/zh/identity/sms-otp-form/index.md
new file mode 100644
index 00000000000..c1cb81e2c46
--- /dev/null
+++ b/src/site/content/zh/identity/sms-otp-form/index.md
@@ -0,0 +1,186 @@
+---
+layout: post
+title: SMS OTP 表单最佳实践
+subhead: 了解如何优化 SMS OTP 表单并改善用户体验。
+authors:
+  - agektmr
+date: 2020-12-09
+updated: 2020-12-09
+hero: image/admin/J3XT84NDBPLlsRN0PhLl.jpg
+alt: 霓虹聊天气泡标志。
+description: 要求用户提供通过 SMS 发送的 OTP（一次性密码）是一种确认用户电话号码的常用方法。本文为您提供构建具有出色用户体验的 SMS OTP 表单的最佳实践。
+tags:
+  - identity
+  - security
+  - forms
+---
+
+{% YouTube 'sU4MpWYrGSI' %}
+
+要求用户提供通过 SMS 发送的 OTP（一次性密码）是确认用户电话号码的常用方法。以下列出了几个 SMS OTP 用例：
+
+- **双重身份验证。**除了用户名和密码之外，SMS OTP 还可以用作强烈信号，表明该帐户归属于收到 SMS OTP 的人所有。
+- **电话号码验证。**某些服务使用电话号码作为用户的主要标识符。在此类服务中，用户可以输入他们的电话号码和通过短信收到的 OTP 来证明他们的身份。有时它与 PIN 结合构成双重身份验证。
+- **帐户恢复。**当用户无法访问其帐户时，需要有一种方法来恢复。向他们注册的电子邮件地址发送电子邮件或向他们的电话号码发送 SMS OTP 是常见的帐户恢复方法。
+- **支付确认。**在支付系统中，一些银行或信用卡发卡机构出于安全原因要求付款人进行额外的验证。SMS OTP 通常用于此目的。
+
+本文阐述了为上述用例构建 SMS OTP 表单的最佳实践。
+
+{% Aside 'caution' %}虽然本文讨论了 SMS OTP 表单的最佳实践，但请注意，SMS OTP 本身并不是最安全的身份验证方法，因为电话号码可能会被回收，有时甚至会被劫持。并且 [OTP 的概念本身并不防钓鱼](https://youtu.be/kGGMgEfSzMw?t=1133)。
+
+如果您正在寻求更安全的方法，请考虑使用 [WebAuthn](https://www.w3.org/TR/webauthn-2/)。您可从 2019 年 Chrome 开发者峰会上的演讲[“注册和登录的新功能”](https://goo.gle/webauthn-video)中了解更多相关信息，并通过[“构建您的第一个 WebAuthn 应用”](https://goo.gle/WebAuthnReauthCodelab)代码实验室使用生物识别传感器构建双重身份验证体验。 {% endAside %}
+
+## 清单
+
+要通过 SMS OTP 提供最佳用户体验，请执行以下步骤：
+
+- 将 `<input>` 元素用于：
+    - `type="text"`
+    - `inputmode="numeric"`
+    - `autocomplete="one-time-code"`
+- 将 `@BOUND_DOMAIN #OTP_CODE` 用作 OTP SMS 消息的最后一行。
+- 使用 [WebOTP API](/web-otp/)。
+
+## 使用 `<input>` 元素
+
+使用含 `<input>` 元素的表单是您可以遵循的最重要的最佳实践，因为它适用于所有的浏览器。即使本文中的其他建议在某些浏览器中不起作用，用户仍然可以手动输入并提交 OTP。
+
+```html
+<form action="/verify-otp" method="POST">
+  <input type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         pattern="\d{6}"
+         required>
+</form>
+```
+
+以下是确保输入字段充分利用浏览器功能的一些想法。
+
+### `type="text"`
+
+由于 OTP 通常是五位或六位数字，因此对输入字段使用 `type="number"` 可能看起来很直观，因为它会将移动键盘更改为全数字。不推荐这样做，因为浏览器希望输入字段是可数的而不是多个数字的序列，这可能会导致意外行为。使用 `type="number"` 会导致在输入字段旁边显示向上和向下按钮；按这些按钮会增加或减少数字，并可能删除前面的零。
+
+请改用 `type="text"`。这不会将移动键盘转换为全数字，这样较好，因为使用 `inputmode="numeric"` 的下一个技巧可以完成这项工作。
+
+### `inputmode="numeric"`
+
+使用 [`inputmode="numeric"`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) 将移动键盘更改为全数字。
+
+一些网站将 `type="tel"` 用于 OTP 输入字段，因为它也会在聚焦时将移动键盘转换为全数字（包括 `*` 和 `#`)。这早在 `inputmode="numeric"` 还没有得到广泛支持时就得到了应用。由于 <a href="https://github.com/mdn/browser-compat-data/pull/6782" data-md-type="link">Firefox 开始支持 `inputmode="numeric"`</a> ，因此无需使用语义不正确的 `type="tel"`。
+
+### `autocomplete="one-time-code"`
+
+[`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) 属性允许开发人员指定浏览器提供自动填充协助的权限，并通知浏览器该字段中预期的信息类型。
+
+借助 `autocomplete="one-time-code"`，当用户在表单打开期间收到 SMS 消息时，操作系统将试探性地解析 SMS 中的 OTP，并且键盘会建议用户输入的 OTP。它仅适用于 iOS、iPadOS 和 macOS 上的 Safari 12 及更高版本，但我们强烈建议使用它，因为它是改善这些平台上 SMS OTP 体验的简单方法。
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/ios-safari.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>`autocomplete="one-time-code"` 正在运行。</figcaption></figure>
+
+`autocomplete="one-time-code"` 改善了用户体验，但通过[确保 SMS 消息符合源绑定消息格式，](#format)您还可以做更多的事情。
+
+{% Aside %} 可选属性：
+
+- [`pattern`](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern) 指定输入的 OTP 必须匹配的格式。使用正则表达式指定匹配模式，例如，`\d{6}` 将 OTP 限制为六位字符串。请在[使用 JavaScript 进行更复杂的实时验证] (https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_javascript_for_more_complex_real-time_validation) 中了解有关 `pattern` 属性的更多信息
+
+- [`required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) 表示一个字段为必填字段。
+
+对于更一般的表单最佳实践，[Sam Dutton](/authors/samdutton/) 发表的[登录表单最佳实践](/sign-in-form-best-practices/)是很好的入门指南。 {% endAside %}
+
+## 格式化 SMS 文本 {: #format }
+
+遵循[通过 SMS 发送的源绑定的一次性代码](https://wicg.github.io/sms-one-time-codes/)规范，可以增强用户输入 OTP 的体验。
+
+格式规则很简单：接收域以 @ 开头，OTP 以 # 开头，以此完成 SMS 消息。
+
+例如：
+
+```text
+Your OTP is 123456
+
+@web-otp.glitch.me #123456
+```
+
+使用 OTP 消息的标准格式可以更轻松、更可靠地从中提取代码。将 OTP 代码与网站相关联使诱骗用户向恶意网站提供代码变得更加困难。
+
+{% Aside %} 确切的规则是：
+
+- 消息以（可选）人们可读的文本开头，其中包含四到十个字符的字母数字字符串和至少一个数字，最后一行为 URL 和 OTP。
+- 调用 API 的网站网址的域部分必须以 `@` 开头。
+- URL 必须包含一个井号（“`#`”），后跟 OTP。
+
+确保字符总数不超过 140。
+
+要了解有关 Chrome 特定规则的更多信息，请阅读[格式化 WebOTP API 的 SMS 消息部分](/web-otp/#format)帖文。 {% endAside %}
+
+使用这种格式有几个好处：
+
+- OTP 将绑定到域。如果用户所在的域不是 SMS 消息中指定的域，则不会出现 OTP 建议。这也降低了网络钓鱼攻击和潜在帐户劫持的风险。
+- 浏览器现在将能够可靠地提取 OTP，而无需依赖神秘和不稳定的启发式方法。
+
+当网站使用 `autocomplete="one-time-code"` ，iOS 14 或更高版本的 Safari 将按照上述规则建议 OTP。
+
+{% Aside %}如果用户在 macOS Big Sur 的桌面上使用与 iOS 上相同的 iCloud 帐户设置，则在 iOS 设备上收到的 OTP 也将在桌面 Safari 上可用。
+
+要了解有关 Apple 平台可用性的其他好处和细微差别的更多信息，请阅读[使用域绑定代码增强 SMS 发送的代码安全性](https://developer.apple.com/news/?id=z0i801mg)。 {% endAside %}
+
+这种 SMS 消息格式也有利于 Safari 以外的浏览器。Chrome、Opera 和 Android 上的 Vivaldi 也支持使用 WebOTP API 的源绑定一次性代码规则，但不是通过 `autocomplete="one-time-code"` 。
+
+## 使用 WebOTP API
+
+[WebOTP API](https://wicg.github.io/web-otp/) 提供对在 SMS 消息中收到的 OTP 的访问。通过调用 `otp` 类型 (`OTPCredential`) 的 [`navigator.credentials.get()`](https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get)   ( 其中 `transport` 包含 `sms`），网站将等待符合源绑定一次性代码的 SMS 发送以及用户授予的访问权限。将 OTP 发送给 JavaScript 后，网站可以在表单中使用它或将其直接发布到服务器。
+
+{% Aside 'caution' %}WebOTP API 需要安全来源 (HTTPS)。 {% endAside %}
+
+```js
+navigator.credentials.get({
+  otp: {transport:['sms']}
+})
+.then(otp => input.value = otp.code);
+```
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/sms-otp-form/android-chrome.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>运行中的 WebOTP API。</figcaption></figure>
+
+请参阅[使用 WebOTP API 验证 Web 上的电话号码](/web-otp/)以详细了解如何使用 WebOTP API，或复制并粘贴以下代码段。（确保 `<form>` 元素正确设置了 `action` 和 `method` 属性。）
+
+```js
+// Feature detection
+if ('OTPCredential' in window) {
+  window.addEventListener('DOMContentLoaded', e => {
+    const input = document.querySelector('input[autocomplete="one-time-code"]');
+    if (!input) return;
+    // Cancel the WebOTP API if the form is submitted manually.
+    const ac = new AbortController();
+    const form = input.closest('form');
+    if (form) {
+      form.addEventListener('submit', e => {
+        // Cancel the WebOTP API.
+        ac.abort();
+      });
+    }
+    // Invoke the WebOTP API
+    navigator.credentials.get({
+      otp: { transport:['sms'] },
+      signal: ac.signal
+    }).then(otp => {
+      input.value = otp.code;
+      // Automatically submit the form when an OTP is obtained.
+      if (form) form.submit();
+    }).catch(err => {
+      console.log(err);
+    });
+  });
+}
+```
+
+照片作者：[Jason Leung](https://unsplash.com/photos/mZNRsYE9Qi4)，来源：[Unsplash](https://unsplash.com)。
diff --git a/src/site/content/zh/index.11tydata.js b/src/site/content/zh/index.11tydata.js
new file mode 100644
index 00000000000..ca4525c6944
--- /dev/null
+++ b/src/site/content/zh/index.11tydata.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const recentBlogPosts = require('../../_collections/hooks/recent-blog-posts');
+
+module.exports = function () {
+  return {
+    eleventyComputed: {
+      recentPosts: recentBlogPosts,
+    },
+  };
+};
diff --git a/src/site/content/zh/index.md b/src/site/content/zh/index.md
new file mode 100644
index 00000000000..c085da7a12c
--- /dev/null
+++ b/src/site/content/zh/index.md
@@ -0,0 +1,64 @@
+---
+layout: 'homepage'
+title: 'web.dev'
+intro:
+  eyebrow: 'About web.dev'
+  title: "Let's build the future of the web, together"
+  summary: |
+    Take advantage of the latest modern technologies to build amazing web experiences for everyone.
+  buttonText: 'Learn more'
+  buttonUrl: '/about/'
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg'
+  imageWidth: '330'
+  imageHeight: '210'
+featureCard:
+  theme: 'light'
+  title: "Watch the progress we made together on the web."
+  eyebrow: ''
+  url: 'https://www.youtube.com/watch?v=W9O4CuSUKb8'
+  background: ''
+  video: 'https://web-dev.imgix.net/video/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/lIta9ZJEALbfAzJzmiNl.mp4'
+  alt: 'Chrome icon rolls past a title: 2022 Year in Review'
+promoPanel:
+  title: 'Chrome Dev Summit 2021'
+  summary: 'Join the Chrome team for workshops, office hours, and learning lounges taking place throughout November.'
+  primaryButtonUrl: 'https://events.withgoogle.com/chrome-dev-summit-2021/registrations/new/details/'
+  primaryButtonText: 'Request an invite'
+  secondaryButtonUrl: 'https://developer.chrome.com/devsummit/schedule/'
+  secondaryButtonText: 'View schedule'
+  image: 'https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/KwS4L954TzN3KK3pWmtA.svg'
+  imageWidth: '530'
+  imageHeight: '483'
+pickedCaseStudyUrl: '/mishipay/'
+pickedCaseStudyTheme: 'light'
+pageSpeed:
+  eyebrow: 'PageSpeed Insights'
+  title: 'Measure page quality with PageSpeed Insights'
+  summary: |
+    See how well your website performs. Then, get tips to improve your user experience.
+  image: 'https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/6Ye3EKc6quNaopPrigno.png'
+  imageWidth: '546'
+  imageHeight: '421'
+  primaryButtonText: 'Try PageSpeed Insights'
+  primaryButtonUrl: '/measure'
+  secondaryButtonText: 'Learn more'
+  secondaryButtonUrl: '#'
+courses:
+  title: 'Featured courses'
+  summary: 'Explore our structured learning paths to discover everything you need to know about building for the modern web.'
+caseStudies:
+  title: 'Case studies'
+  summary: 'Learn why and how other developers have used the web to create amazing web experiences for their users.'
+  buttonText: 'See all'
+  buttonUrl: '/tags/case-study/'
+podcasts:
+  title: 'Podcasts and Shows'
+  summary: 'Level up your web development skills by listening to podcasts from Google Developers'
+  buttonText: 'See all'
+  buttonUrl: '/podcasts/'
+patterns:
+  title: 'Patterns'
+  summary: 'A collection of code snippets to help you optmize your web projects.'
+  buttonText: 'See all'
+  buttonUrl: '/patterns/'
+---
diff --git a/src/site/content/zh/lang.js b/src/site/content/zh/lang.js
new file mode 100644
index 00000000000..60198d00699
--- /dev/null
+++ b/src/site/content/zh/lang.js
@@ -0,0 +1,4 @@
+module.exports = {
+  lang: 'zh',
+  locale: 'zh_CN',
+};
diff --git a/src/site/content/zh/learn-core-web-vitals/index.md b/src/site/content/zh/learn-core-web-vitals/index.md
new file mode 100644
index 00000000000..89039adeeaf
--- /dev/null
+++ b/src/site/content/zh/learn-core-web-vitals/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: learn-core-web-vitals
+---
diff --git a/src/site/content/zh/learn/css/box-model/box-model.assess.yml b/src/site/content/zh/learn/css/box-model/box-model.assess.yml
new file mode 100644
index 00000000000..1d0a7d12125
--- /dev/null
+++ b/src/site/content/zh/learn/css/box-model/box-model.assess.yml
@@ -0,0 +1,26 @@
+setLeader: Test your knowledge of box model size impacting properties
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      .my-box {
+        width: 200px;
+        border: 10px solid;
+        padding: 20px;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: How wide do you think `.my-box` will be?
+    options:
+      - content: 200px
+        rationale: |
+          Since the default value for box-sizing is content-box, padding and
+          borders will be added to the width. `200px` would be correct if the 
+          box had `box-sizing: border-box`.
+      - content: 260px
+        rationale: |
+          The default box sizing is content-box, which means padding and 
+          borders are added to the overall box.
\ No newline at end of file
diff --git a/src/site/content/zh/learn/css/box-model/index.md b/src/site/content/zh/learn/css/box-model/index.md
new file mode 100644
index 00000000000..d13291a98a1
--- /dev/null
+++ b/src/site/content/zh/learn/css/box-model/index.md
@@ -0,0 +1,160 @@
+---
+title: 方框模型
+description: CSS 显示的所有对象都是方框。因此，了解 CSS 方框模型的工作原理是 CSS 的核心基础。
+audio:
+  title: CSS 播客   - 001：方框模型
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+假设有下面这一段 HTML：
+
+```html
+<p>I am a paragraph of text that has a few words in it.</p>
+```
+
+您为这一段 HTML 编写了下面的 CSS：
+
+```css
+p {
+  width: 100px;
+  height: 50px;
+  padding: 20px;
+  border: 1px solid;
+}
+```
+
+那么，内容可能会超出您的元素，并且它的宽度为 142 像素，而不是 100 像素。这是为什么？方框模型是 CSS 的核心基础，您要理解它的工作原理以及 CSS 的其他方面会对其产生哪些影响，重要的是，如何控制它来帮助您编写更容易预测的 CSS。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'WNRemxN', height: 300 } %}</figure>
+
+总的来说，编写 CSS 或在 Web 上工作时，要记住的一个重点是，CSS 显示的所有对象都是方框。无论是使用 `border-radius` 的看起来像圆形的方框，还是一些简单的文本：要记住的关键点是，它们都是方框。
+
+## 内容和大小
+
+根据 `display` 值、设置的尺寸以及包含的内容，方框具有不同的行为。这种内容可能是更多的方框（由子元素生成），也可能是纯文本内容。无论是哪种方式，默认情况下，内容都会影响方框的大小。
+
+您可以通过使用 **extrinsic sizing** 来控制方框的大小，或者，您也可以继续使用 **intrinsic sizing**，让浏览器根据内容大小来做出决定。
+
+我们来看一个演示，简单了解一下它们的区别。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'abpoMBL' } %} <figcaption>请注意，当方框使用 extrinsic sizing 时，您可以添加的内容有限制，如果超出限制，内容就会溢出方框的边界。因此，演示中的“awesome”一词溢出了边界。</figcaption></figure>
+
+该演示在一个具有固定尺寸和粗边框的方框中显示“CSS is awesome”。这个方框有宽度，所以它使用的是外部大小。它会控制子内容的大小。但问题在于“awesome”一词对这个方框来说太大了，所以它会溢出到父方框的**边框**外（本课程的后续部分会详细介绍）。防止这种溢出的一种方法是取消设置 `width`，或者在本例中，将宽度设置为 `min-content`，从而允许方框使用内部大小。关键字 `min-content` 会告诉方框将宽度调整为与内容的内部最小宽度（单词“awesome”）一致。这样，方框就可以刚好包含“CSS is awesome”。
+
+我们来看看更复杂的例子，了解不同大小对实际内容的影响：
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'wvgwOJV', height: 650 } %}</figure>
+
+打开和关闭 intrinsic sizing，了解如何通过 extrinsic sizing 实现更多控制，并利用 extrinsic sizing 来让内容获得更多控制。要查看 intrinsic sizing 和 extrinsic sizing 的效果，请在卡片中添加几句话。当该元素使用 extrinsic sizing 时，您可以添加的内容数量有限制，否则会溢出元素的边界，但是，打开 intrinsic sizing 时，情况并非如此。
+
+默认情况下，该元素设置有 `width` 和 `height` - 均为 `400px`。这些尺寸会为元素内的所有内容实施严格的界限，除非内容对于方框来说太大，否则会发生可见溢出。您可以将花朵图片下方的标题内容更改为超出方框高度的内容（即几行内容），从而查看实际效果。
+
+{% Aside "key-term" %}当内容对它所在的方框来说太大时，我们称之为溢出。利用 `overflow` 属性，您可以管理元素处理处理溢出内容的方式。{% endAside %}
+
+切换到 intrinsic sizing 时，浏览器就会根据方框的内容大小做出决定。使用 intrinsic sizing 时，发生溢出的可能性要小得多，因为方框会根据内容调整自己的大小，而不是尝试调整内容的大小。务必记住，这是浏览器默认的灵活行为。尽管 extrinsic sizing 可以更好地控制表面，但是，在大多数情况下，intrinsic sizing 可以提供最大的灵活性。
+
+## 方框模型的区域
+
+方框由不同的方框模型区域组成，这些区域都会执行特定的工作。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="显示方框模型四个主要区域的图表 - 内容框、填充框、边框和边距框", width="800", height ="547" %}<figcaption>方框模型的四个主要区域：内容框、填充框、边框和边距框。</figcaption></figure>
+
+首先是**内容框**，它是内容所在的区域。正如之前所学：这种内容可以控制父级的大小，因此，它通常是大小最容易发生变化的区域。
+
+**填充框**位于内容框周围，它是 [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding) 属性创建的空间。因为填充位于方框内部，所以，方框的背景在它创建的空间内可见。如果方框设置有溢出规则，例如 `overflow: auto` 或`overflow: scroll`，那么滚动条也会占据该空间。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BaReoEV' } %}</figure>
+
+**边框**位于填充框周围，它的空间被 `border` 值占据。边框是方框的边界，而**边框的边缘**则是可以直观看到的界限。<a href="https://developer.mozilla.org/docs/Web/CSS/border" data-md-type="link">`border`</a> 属性用于可视化元素的框架。
+
+最后一个区域是**边距框**，它是方框周围的空间，由方框的 `margin` 规则定义。[`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) 和 [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) 属性也会占据了该空间，因为它们在顶部绘制，所以不会影响方框的大小。您可以创建一个 `200px` `outline-width` 的方框，其中包含的所有内容以及边框的大小将完全相同。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'XWprGea' } %}</figure>
+
+## 类比解析
+
+方框模型难以理解，所以，我们使用一个类比来回顾一下所学内容。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="三个画框", width="800", height="562" %}</figure>
+
+该图中有三个并排安装在墙上的画框。该图包含关联框架元素和方框模型的标签。
+
+解析一下这个类比：
+
+- 内容框就是画框中的美术作品。
+- 填充框是白色衬纸，它位于画框和美术作品之间。
+- 边框就是画框，用于为美术作品提供文字边框。
+- 边距框是每个画框之间的空间。
+- 阴影与边距框占据相同的空间。
+
+## 调试方框模型
+
+浏览器 DevTools 为所选方框的方框模型计算提供可视化界面，从而帮助您了解方框模型的工作原理，重要的是，了解它如何影响正在处理的网站。
+
+继续并在浏览器中尝试执行以下操作：
+
+1. [打开 DevTools](https://developer.chrome.com/docs/devtools/open/)
+2. [选择一个元素](https://developer.chrome.com/docs/devtools/css/reference/#select)
+3. 显示方框模型调试器
+
+<figure>{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/sKdHrAfqahgWfDVQEBBT.mp4", controls=true %}</figure>
+
+## 控制方框模型
+
+要了解如何控制方框模型，首先，您需要了解浏览器中发生的活动。
+
+每个浏览器都会将用户代理样式表应用到 HTML 文档。使用的 CSS 因浏览器而异，但它们会提供合理的默认值，从而使内容更易于阅读。如果没有定义 CSS，那么，它们会定义元素的外观和行为。用户代理样式中也会设置方框的默认 `display`。例如，如果是在正常流程中，`<div>` 元素的默认 `display` 值是 `block` ，`<li>` 的默认 `display` 值是 `list-item`，而`<span>` 的默认 `display` 值是`inline`。
+
+`inline` 元素具有块边距，但其他元素不会遵守此边距。使用 `inline-block`，这些元素就会遵守块边距，同时元素会保有与 `inline` 元素相同的大部分行为。默认情况下，`block` 项目会填充可用的**行内空间**，而 `inline` 和 `inline-block` 元素则只会与内容一样大。
+
+除了解用户代理样式如何影响每个方框外，您还需要了解 `box-sizing`，它会告诉方框如何计算方框大小。默认情况下，所有元素都具有以下用户代理样式：`box-sizing: content-box;`。
+
+将 `content-box` 作为 `box-sizing` 的值意味着当您设置尺寸时，例如 `width` 和 `height`，会将其应用到**内容框**。如果随后设置 `padding` 和 `border`，则会将这些值增加到内容框的大小。
+
+{% Assessment 'box-model' %}
+
+该方框的实际宽度为 260 像素。由于 CSS 使用默认的 `box-sizing: content-box`，因此，应用的宽度就是内容的宽度，而且会加上两边的 `padding` 和 `border` 值。也就是内容的 200 像素 + 填充的 40 像素 + 边框的 20 像素，从而得到 260 像素的总可见宽度。
+
+不过，您*可以*执行以下修改，使用替代方框模型 `border-box` 来控制这一点：
+
+```css/1
+.my-box {
+  box-sizing: border-box;
+	width: 200px;
+	border: 10px solid;
+	padding: 20px;
+}
+```
+
+上述替代方框模型会告诉 CSS 将 `width` 应用到边框（而不是内容框）。这意味着我们的 `border` 和 `padding` 将被*推入*，因此，当您将 `.my-box` 设置为 `200px` 宽度时：它最终就会以 `200px` 的宽度进行渲染。
+
+通过以下交互式演示了解其工作原理。请注意，当您切换 `box-sizing` 值时，它会通过蓝色背景显示方框*内部*应用的 CSS。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'oNBvVpM', height: 650 } %}</figure>
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+该 CSS 规则选择文档中的每个元素以及每个 `::before` 和 `::after` 伪元素，同时应用 `box-sizing: border-box`。这意味着每个元素现在都有该替代方框模型。
+
+由于替代方框模型更容易预测，因此，开发人员通常会将此规则添加到重置和归一化器中，如[本文中介绍的示例](https://piccalil.li/blog/a-modern-css-reset)。
+
+## 资源
+
+- [方框模型简介](https://developer.mozilla.org/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [什么是浏览器开发人员工具？](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)
+
+### 用户代理样式表
+
+- [Chromium](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://searchfox.org/mozilla-central/source/layout/style/res/html.css)
+- [Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
diff --git a/src/site/content/zh/learn/css/css.11tydata.js b/src/site/content/zh/learn/css/css.11tydata.js
new file mode 100644
index 00000000000..ac6448b5428
--- /dev/null
+++ b/src/site/content/zh/learn/css/css.11tydata.js
@@ -0,0 +1,3 @@
+const course11tydata = require('../../../../_utils/course-11tydata.js');
+
+module.exports = course11tydata('css');
diff --git a/src/site/content/zh/learn/css/flexbox/conclusion.assess.yml b/src/site/content/zh/learn/css/flexbox/conclusion.assess.yml
new file mode 100644
index 00000000000..77e1b54b62a
--- /dev/null
+++ b/src/site/content/zh/learn/css/flexbox/conclusion.assess.yml
@@ -0,0 +1,61 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: To vertically align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Nice"
+      - content: "justify keywords"
+        rationale: "Sorry"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: To horizonally align with flexbox, use
+    options:
+      - content: "align keywords"
+        rationale: "Sorry"
+      - content: "justify keywords"
+        rationale: "Nice"
+  - stimulus: |
+      ```css
+      .container {
+        display: flex;
+        direction: ltr;
+      }
+      ```
+    type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "3"
+    stem: |
+      By default, flex items are aligned to `stretch`. If you want content
+      size used for child items, which of the following styles would you use?
+    options:
+      - content: "`justify-content: flex-start`"
+        rationale: "The justify property is for horizontal alignment, not
+        vertical."
+      - content: "`align-content: start`"
+        rationale: "`content` aligns flex lines, not child item alignment."
+      - content: "`height: auto`"
+        rationale: "This will have no effect."
+      - content: "`align-items: flex-start`"
+        rationale: "Yes, we want to vertically align them to the 'top' or start,
+        which removes the default stretch value and instead uses the content
+        height."
diff --git a/src/site/content/zh/learn/css/flexbox/flex.assess.yml b/src/site/content/zh/learn/css/flexbox/flex.assess.yml
new file mode 100644
index 00000000000..a264d9e9016
--- /dev/null
+++ b/src/site/content/zh/learn/css/flexbox/flex.assess.yml
@@ -0,0 +1,40 @@
+setLeader: Test your knowledge of flexbox
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: The default `flex-direction` is
+    options:
+      - content: "`row`"
+        rationale: "By default, flexbox will fit items into a row, lining them
+        up at the start. With wrapping turned on, it will continue creating rows
+        for children to flow within."
+      - content: "`column`"
+        rationale: "Setting flex-direction to column is a great way to stack
+        elements, but it is not the default value."
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: By default, a flex container wraps children.
+    options:
+      - content: "true"
+        rationale: "Wrapping must be enabled."
+      - content: "false"
+        rationale: "Use `flex-wrap: wrap` with `display: flex` to wrap children"
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: A flex child item appears squished, which flex property helps mitigate this?
+    options:
+      - content: "`flex-grow`"
+        rationale: "This property describes if elements can grow beyond a basis
+        size, not how it should behave under a basis."
+      - content: "`flex-shrink`"
+        rationale: "Yes, this property describes how to handle sizing if the
+        width is going below the basis."
+      - content: "`flex-basis`"
+        rationale: "This provides the starting point of sizing, but not how to
+        handle sizing scenarios where width goes below basis, like in a squished
+        scenario."
diff --git a/src/site/content/zh/learn/css/flexbox/index.md b/src/site/content/zh/learn/css/flexbox/index.md
new file mode 100644
index 00000000000..eeffe2b089b
--- /dev/null
+++ b/src/site/content/zh/learn/css/flexbox/index.md
@@ -0,0 +1,376 @@
+---
+title: 弹性框 (Flexbox)
+description: |2-
+
+  弹性框是一种布局机制，用于在一个维度上为项目组设置布局。本模块介绍了它的用法。
+audio:
+  title: CSS 播客   - 010：Flexbox
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - rachelandrew
+  - andybell
+date: 2021-04-21
+---
+
+侧边栏是一种在自适应设计中很难应对的设计模式，它与某些内容内联。在有视口空间的地方，这种模式效果很好，但在空间被压缩的地方，这种僵化的布局可能会出现问题。
+
+{% Codepen { user: 'web-dot-dev', id: 'poRENWv', height: 420 } %}
+
+弹性框布局模型 (flexbox) 是专为一维内容设计的布局模型。它擅长获取一组大小不同的项目，并为这些项目返回最佳布局。
+
+对于侧边栏模式，这种布局模型较为理想。弹性框不仅有助于以内联方式展示侧边栏和内容，而且在剩余空间不足的情况下，侧边栏还会换行。使用弹性框，您可以提供灵活的边界来提示内容如何显示，而不是让浏览器采用僵化的尺寸。
+
+{% Codepen { user: 'web-dot-dev', id: 'xxgERMp', height: 400 } %}
+
+## 弹性布局的作用
+
+弹性布局具有以下功能，您可以在本指南中进行探索。
+
+- 可以显示为一行或一列。
+- 遵照文档的书写模式。
+- 默认情况下，以单行显示，但可以根据要求换成多行显示。
+- 布局中的项目可以打乱在 DOM 中的顺序，重新排列显示顺序。
+- 可以在项目内部分配空间，因此会根据父项中的可用空间变大或变小。
+- 使用框对齐 (Box Alignment) 属性，可以在换行布局中为项目和弹性行分配空间。
+- 项目本身可以沿横轴对齐。
+
+## 主轴和横轴
+
+要理解弹性框，关键是理解主轴和横轴的概念。主轴由 `flex-direction` 属性设置。如果该属性为 `row`，则主轴沿行方向分布，如果该属性为 `column`，则主轴沿列方向分布。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/xKtf0cHRw0xQyiyYuuyz.svg", alt="三个框彼此相邻，共用一个从左指向右的箭头。箭头上标记有主轴", width="800", height=" 320"%}</figure>
+
+弹性项目作为一个组沿主轴移动。请记住：我们已经获得了很多内容，并且正在努力为作为一个组的它们构建最佳布局。
+
+相对于主轴，横轴沿另一个方向分布，因此，如果 `flex-direction` 为 `row`，则横轴沿列方向分布。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/5wCsZcBmK5L33LS7nOmP.svg", alt="三个框高度不同，彼此相邻，共用一个从左指向右的箭头。箭头上标记有主轴。另有一个从上指向下的箭头。这个箭头上标记有横轴", width="800", height="320" %}</figure>
+
+您可以在横轴上做两件事：可以单独移动每个项目，也可以将这些项目作为一个组移动，使它们相互对齐并与弹性容器对齐。此外，如果您已将弹性行换行，可以将这些线视为一个组，以便控制如何为这些线分配空间。本指南将向您展示这一切在实践中的应用，现在只需记住主轴方向符合 `flex-direction`。
+
+## 创建弹性容器
+
+让我们看看弹性框是如何获取一组不同大小的项目并使用弹性框来布置它们。
+
+```html
+<div class="container" id="container">
+  <div>One</div>
+  <div>Item two</div>
+  <div>The item we will refer to as three</div>
+</div>
+```
+
+要使用弹性框，您需要声明，您要使用弹性格式上下文而不是常规块和内联布局。为此，请将 `display` 属性的值更改为 `flex`。
+
+```css
+.container {
+  display: flex;
+}
+```
+
+正如您在[布局指南](/learn/css/layout)中了解到的，您将获得一个具有弹性项目子项的块级框。弹性项目直接使用它们的**初始值**开始展示一些弹性框行为。
+
+{% Aside %} 所有 CSS 属性都有初始值，未应用任何 CSS 来更改初始行为时，这些初始值可以控制属性的“开箱即用”行为。只要弹性项目的父项设为 `display: flex`，弹性容器的子项就会成为弹性项目，所以，这些初始值意味着我们会开始看到一些弹性框行为。{% endAside %}
+
+初始值意味着：
+
+- 项目显示为一行。
+- 项目不换行。
+- 项目不会增长到填满容器。
+- 项目在容器开始处对齐。
+
+## 控制项目的方向
+
+即使您尚未添加 `flex-direction` 属性，项目也会显示为一行，因为 `flex-direction` 的初始值为 `row` 。如果您希望显示为一行，则不需要添加该属性。要更改方向，请添加该属性和以下四个值之一：
+
+- `row`：项目显示为一行。
+- `row-reverse`：项目在弹性容器结尾处显示为一行。
+- `column`：项目显示为一列。
+- `column-reverse`：项目在弹性容器结尾处显示为一列。
+
+您可以在下面的演示中使用我们给出的这组项目尝试所有值。
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgKNXq' } %}
+
+### 反转项目流向以及无障碍功能
+
+如果属性在对视觉显示进行重新排序时不遵守内容在 HTML 文档中的排序方式，在使用这些属性时，需要格外小心，因为它可能会对无障碍功能产生负面影响。 `row-reverse` 和 `column-reverse` 就是两个很好的示例。重新排序只影响视觉顺序，而不影响逻辑顺序。理解这一点很重要，因为逻辑顺序是屏幕阅读器读取内容的顺序，任何人在使用键盘导航时都会采用该顺序。
+
+在以下视频中，您可以看到，在反向列布局中，当键盘导航遵循 DOM 而不是视觉显示时，链接之间的制表符是如何断开连接的。
+
+{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4", autoplay=true, controls=true %}
+
+只要可以更改项目在弹性框或网格中的顺序，就会导致这个问题。因此，只要进行重新排序，都应当进行全面测试，从而确保重新排序并不会让某些人不方便使用您的网站。
+
+有关更多信息，请参阅：
+
+- [内容重新排序](/content-reordering/)
+- [弹性框和键盘导航断开](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+
+### 书写模式和方向
+
+默认情况下，弹性项目排成一行。这一行与句子在书写模式和脚本方向上的走向相同。这意味着，如果您使用阿拉伯语，即脚本方向为从右到左 (rtl)，则项目将在右侧对齐。制表符顺序也将从右侧开始，因为这是用阿拉伯语读取句子的方式。
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZgwWN' } %}
+
+如果您使用垂直书写模式，例如某些日语字体，则这一行将从上往下垂直分布。以下演示使用垂直书写模式，请尝试更改其中的 `flex-direction`。
+
+{% Codepen { user: 'web-dot-dev', id: 'qBRaPXX', height: 600 } %}
+
+因此，默认情况下，弹性项目的行为与文档的书写模式相关。大多数教程使用英语编写，或者采用另一种从左到右的水平书写模式编写。这样就可以很容易地假设弹性项目**在左侧**对齐并沿**水平方向**分布。
+
+考虑了主轴、横轴加上书写模式，可能就更容易理解我们在弹性框中说**开头**和**结尾**，而不是上下左右。每个轴都有起点和终点。主轴的起点称为**主起点 (main-start)** 。因此，我们的弹性项目最初在主起点对齐。主轴的终点为**主终点 (main-end)** 。横轴的起点为**交叉起点 (cross-start)** ，终点为**交叉终点 (cross-end)** 。
+
+{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg", alt="标注了上述术语的图", width="800", height="382" %}
+
+## 弹性项目换行
+
+`flex-wrap` 属性的初始值为 `nowrap`。这意味着，如果容器中没有足够的空间，项目就会溢出。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/VTUdLS9PeBziBvbOSc4q.jpg", alt="弹性容器包含九个项目，各个项目已经缩减为一个词一行，但仍没有足够的空间来并排显示它们，因此弹性项目扩展到了容器框外。", width="800", height="282" %}<figcaption> 一旦它们达到最小内容 (min-content) 大小，弹性项目将开始溢出其容器 </figcaption></figure>
+
+在溢出发生之前，使用初始值显示的项目将尽可能缩小到 `min-content` 大小。
+
+要使项目换行，请将 `flex-wrap: wrap` 添加到弹性容器。
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+{% Codepen { user: 'web-dot-dev', id: 'WNRGdNZ', height: 601 } %}
+
+弹性容器在换行后会创建多个**弹性行**。在空间分布方面，每一行就像一个新的弹性容器。因此，如果您要换行，则无法让第 2 行中的某些内容与它上面第 1 行中的某些内容对齐。这就是所谓的弹性框是一维框。您可以控制在一个轴、一行或一列上对齐，但不能像我们在网格中那样控制同时沿二者对齐。
+
+### flex-flow 速记
+
+您可以使用速记 `flex-flow` 来设置 `flex-direction` 和 `flex-wrap` 属性。例如，将 `flex-direction` 设置为 `column` 并允许项目换行：
+
+```css
+.container {
+  display: flex;
+  flex-flow: column wrap;
+}
+```
+
+## 控制弹性项目内的空间
+
+假设我们容器的空间比显示项目所需的空间多，则项目在开头处对齐，而不会增长以填充空间。它们在达到最大内容 (max-content) 大小时停止增长。这是因为 `flex-` 属性的初始值如下：
+
+- `flex-grow: 0`：项目不增长。
+- `flex-shrink: 1`：项目可以收缩到比它们的 `flex-basis` 小。
+- `flex-basis: auto`：项目为基本大小 `auto` 。
+
+这可以使用 `flex: initial` 的关键字值表示。 `flex` 速记属性或者普通写法 `flex-grow`、`flex-shrink` 和 `flex-basis` 适用于弹性容器的子项。
+
+{% Codepen { user: 'web-dot-dev', id: 'LYxRebE' } %}
+
+要使项目增长，同时允许大项目比小项目拥有更多空间，请使用 `flex:auto`。您可以使用上面的演示来尝试此操作。将属性设置为：
+
+- `flex-grow: 1`：项目可以增大到超过其 `flex-basis`。
+- `flex-shrink: 1`：项目可以收缩到小于其 `flex-basis`。
+- `flex-basis: auto`：项目为基本大小 `auto` 。
+
+使用 `flex: auto` 意味着项目最终具有不同的大小，因为项目之间共享的空间将在每个项目被设为最大内容大小*之后*被均分。因此，大项目会获得更多空间。要强制所有项目的大小一致并忽略内容的大小，请在演示中将 `flex:auto` 更改为 `flex: 1`。
+
+这将解析为：
+
+- `flex-grow: 1`：项目可以增长到超过其 `flex-basis`。
+- `flex-shrink: 1`：项目可以收缩到比它们的 `flex-basis` 小。
+- `flex-basis: 0`：项目为基本大小 `0` 。
+
+使用 `flex: 1` 表示所有项目的大小都为零，因此，弹性容器中的所有空间均可供分配。由于所有项目的 `flex-grow` 因子均为 `1`，因此，它们可以平均增长并共享空间。
+
+{% Aside %} 还有一个值 `flex: none`，可用于让弹性项目变得不灵活，既不增长，也不收缩。如果您只是使用弹性框来访问对齐属性但不需要任何弹性行为，该值可能很有用。{% endAside %}
+
+### 允许项目以不同速率增长
+
+您不必将所有项目的 `flex-grow` 因子均设为 `1` 。您可以为弹性项目指定不同的 `flex-grow` 因子。在下面的演示中，第一个项目设为 `flex: 1`，第二个项目设为 `flex: 2`，第三个项目设为 `flex: 3` 。当这些项目从 `0` 开始增长时，弹性容器中的可用空间被分成六份。一份给第一个项目，两份给第二个项目，三份给第三个项目。
+
+{% Codepen { user: 'web-dot-dev', id: 'OJWRzEz' } %}
+
+将 `flex-basis` 设为 `auto` 可以实现相同的目的，但您需要指定三个值。第一个值为 `flex-grow`，第二个值为 `flex-shrink`，第三个值为 `flex-basis`。
+
+```css
+.item1 {
+  flex: 1 1 auto;
+}
+
+.item2 {
+  flex: 2 1 auto;
+}
+```
+
+这个用例不太常见，因为将 `flex-basis` 设为 `auto` 的原因是为了让浏览器计算空间分配。不过，如果想让一个项目增长得比算法确定的值多一点，它可能很有用。
+
+## 为弹性项目重新排序
+
+使用 `order` 属性可以为弹性容器中的项目重新排序。此属性可用于对**有序组**中的项目进行排序。项目按照 `flex-direction` 指定的方向排列，最小值在最前面。如果多个项目具有相同的值，它将与具有该值的其他项目一起显示。
+
+下面的示例演示了这种排序。
+
+{% Codepen { user: 'web-dot-dev', id: 'NWdRXoL' } %}
+
+{% Aside 'warning' %} `order` 在使用时与 `flex-direction` 的值 `row-reverse` 和 `column-reverse` 存在相同的问题。它很容易让某些用户感觉到连接已断开。请勿使用 `order`，因为您需要修复文档中的乱序问题。如果项目在逻辑上应该以不同的顺序排列，请更改您的 HTML！{% endAside %}
+
+{% Assessment 'flex' %}
+
+## 弹性盒对齐概述
+
+弹性盒提供了一组用于对齐项目以及在项目之间分配空间的属性。这些属性非常有用，它们已经移入自己的规范中，您在网格布局 (Grid Layout) 中也会看到它们。在这里，您可以了解，在使用弹性盒时它们如何工作。
+
+这组属性可以分为两组：空间分配属性和对齐属性。用于分配空间的属性如下：
+
+- `justify-content`：沿主轴分配空间。
+- `align-content`：沿横轴分配空间。
+- `place-content`：用于同时设置上述属性的速记。
+
+用于在弹性盒中对齐的属性如下：
+
+- `align-self`：沿横轴对齐单个项目
+- `align-items`：将所有项目作为一个组沿横轴对齐
+
+如果使用主轴，这些属性以 `justify-` 开头。使用横轴时，这些属性以 `align-` 开头。
+
+## 沿主轴分配空间
+
+在之前使用的 HTML 中，弹性项目排成一行，主轴上有空间。这些项目不够大，无法完全填满弹性容器。由于 `justify-content` 的初始值为 `flex-start`，所以项目在弹性容器的开头处对齐。项目在开头处对齐，所有的多余空间都位于结尾处。
+
+向弹性容器添加 `justify-content` 属性，为它赋值 `flex-end`，项目将在容器结尾处对齐，空闲空间将位于开头。
+
+```css
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+```
+
+您也可以使用 `justify-content: space-between` 在项目之间分配空间。
+
+在演示中尝试一些值，并[查看 MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content) 以获取一组完整的可能值。
+
+{% Codepen { user: 'web-dot-dev', id: 'JjERpGb' } %}
+
+{% Aside %} 要使 `justify-content` 属性起作用，您必须在容器中主轴方向上留出空闲空间。如果您的项目填满了该轴，没有可供分配的空间，那么该属性不会执行任何操作。{% endAside %}
+
+### 使用 `flex-direction: column`
+
+如果将 `flex-direction` 更改为 `column`，则 `justify-content` 将作用于列。在按列来处理项目时要想在容器中留出空闲空间，您需要为容器指定 `height` 或 `block-size` 。否则，没有空闲空间可供分配。
+
+这次，使用弹性框列布局来尝试不同的值。
+
+{% Codepen { user: 'web-dot-dev', id: 'bGgwLgz', height: 600 } %}
+
+## 在弹性行之间分配空间
+
+使用换行式弹性容器，您可以在横轴上分配空间。在这种情况下，您可以使用 `align-content` 属性，它的值与 `justify-content` 相同。默认情况下，`justify-content` 将项目与 `flex-start` 对齐，与它不同的是，`align-content` 的初始值为 `stretch`。将属性 `align-content` 添加到弹性容器可更改该默认行为。
+
+```css
+.container {
+  align-content: center;
+}
+```
+
+在演示中试一试。以下示例将弹性项目换行，容器设置了 `block-size`，因此，有一些空闲空间。
+
+{% Codepen { user: 'web-dot-dev', id: 'poREawo' } %}
+
+### `place-content` 简述
+
+要同时设置 `justify-content` 和 `align-content`，您可以为 `place-content` 指定一个或两个值。指定一个值时，该值同时作用于两个轴，如果指定两个值，第一个值将作用于 `align-content`，第二个值将作用于 `justify-content`。
+
+```css
+.container {
+  place-content: space-between;
+  /* 将二者均设置为 space-between */
+}
+
+.container {
+  place-content: center flex-end;
+  /* 横轴换行居中，
+   主轴上的项目沿弹性容器结尾处对齐 */
+}
+```
+
+## 沿横轴对齐项目
+
+在横轴上，您还可以使用 `align-items` 和 `align-self` 在弹性行内对齐项目。此对齐方式的可用空间取决于弹性容器的高度，如果是一组换行的项目，则取决于弹性行。
+
+`align-self` 的初始值为 `stretch`，这就是一行中的弹性项目默认会拉伸到最高项目的高度的原因。要更改此设置，请将 `align-self` 属性添加到您的任意弹性项目。
+
+```css
+.container {
+  display: flex;
+}
+
+.item1 {
+  align-self: flex-start;
+}
+```
+
+可使用以下任一值来对齐项目：
+
+- `flex-start`
+- `flex-end`
+- `center`
+- `stretch`
+- `baseline`
+
+请参阅 [MDN 上的完整值列表](https://developer.mozilla.org/docs/Web/CSS/align-self)。
+
+下一个演示中有一行弹性项目，它们设置了 `flex-direction: row`。最后一个项目定义弹性容器的高度。第一个项目设置了 `align-self` 属性，属性值为 `flex-start` 。请尝试更改该属性的值，以了解它如何在横轴上的空间内移动。
+
+{% Codepen { user: 'web-dot-dev', id: 'RwKGQee', height: 600 } %}
+
+`align-self` 属性作用于单个项目。可以将 `align-items` 属性应用于弹性容器，以将所有单个 `align-self` 属性设置为一个组。
+
+```css
+.container {
+  display: flex;
+  align-items: flex-start;
+}
+```
+
+在下一个演示中，请尝试更改 `align-items` 的值以将所有项目作为一个组沿横轴对齐。
+
+{% Codepen { user: 'web-dot-dev', id: 'QWdKmby', height: 600 } %}
+
+## 为什么弹性框中没有自我对齐 (justify-self)？
+
+弹性项目在主轴上充当一个组。因此，没有将单个项目从该组中分离出来的概念。
+
+在网格布局中，`justify-self` 和 `justify-items` 属性作用于内联轴，以沿该轴将其网格区域内的项目对齐。由于弹性布局是将项目视为一个组，因此，这些属性未在弹性上下文中实现。
+
+值得注意的是，弹性框非常适合自动边距。如果您需要将一个项目从一个组中分离出来，或者要将该组分成两个组，可以应用边距来执行此操作。在下面的示例中，最后一个项目的左边距为 `auto`。自动边距会吸收其所应用到的方向上的所有空间。这意味着它会将项目向右推，从而拆分组。
+
+{% Codepen { user: 'web-dot-dev', id: 'poRELbR' } %}
+
+## 如何将项目垂直和水平居中显示
+
+对齐属性可用于将项目在另一个框内居中放置。 `justify-content` 属性用于沿主轴（即行）对齐项目。`align-items` 属性用于沿横轴对齐项目。
+
+```css
+.container {
+  width: 400px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+{% Aside %} 将来，我们可能无需将父项设为弹性容器即可实现这种对齐。对齐属性适用于块和内联布局。目前还没有浏览器实现这些功能。但是，切换到弹性格式上下文可以让您访问这些属性。如果您需要对齐某些内容，建议使用这个方法。{% endAside %}
+
+{% Assessment 'conclusion' %}
+
+## 资源
+
+- [MDN CSS 弹性框布局](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)包含一系列详细的指南和示例。
+- [CSS Tricks 弹性框使用指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [创建弹性框弹性容器时会发生什么](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [关于弹性框对齐，您需要了解的一切](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [这个弹性框有多大？](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [弹性框用例](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
diff --git a/src/site/content/zh/learn/css/selectors/complex-selectors.assess.yml b/src/site/content/zh/learn/css/selectors/complex-selectors.assess.yml
new file mode 100644
index 00000000000..50155241578
--- /dev/null
+++ b/src/site/content/zh/learn/css/selectors/complex-selectors.assess.yml
@@ -0,0 +1,37 @@
+setLeader: Test your knowledge of complex selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "1,3,4"
+    stem: Which of the following symbols is **not** selector combinator?
+    options:
+      - content: ">"
+        rationale: "The direct descendant combinator."
+      - content: "÷"
+        rationale: "Invalid, not a CSS symbol."
+      - content: "+"
+        rationale: "The next sibling combinator."
+      - content: "*"
+        rationale: "This universal simple selector."
+      - content: "."
+        rationale: "The class simple selector."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      section.awesome {
+        border: 1px solid hotpink;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: The above selector is an example of a...
+    options:
+      - content: Combinator
+        rationale: "A symbol used to combine selectors into a more specific one."
+      - content: Compound selector
+        rationale: "When 2 or more selectors are used together, without a
+        combinator, in order to create a more specific selector."
+      - content: Terminator
+        rationale: "Not a selector type, but sounds like one doesn't it? 🤖"
diff --git a/src/site/content/zh/learn/css/selectors/index.md b/src/site/content/zh/learn/css/selectors/index.md
new file mode 100644
index 00000000000..52e23550d30
--- /dev/null
+++ b/src/site/content/zh/learn/css/selectors/index.md
@@ -0,0 +1,353 @@
+---
+title: 选择器
+description: 要将 CSS 应用于元素，您需要选择它。CSS 为您提供了许多不同的方法来做到这一点，您可以在本模块中探索它们。
+audio:
+  title: CSS 播客   - 002：选择器
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+---
+
+如果您有一些文本，且是文章的第一段，您只想将其放大和变红，该怎么办？
+
+```html
+<article>
+  <p>I want to be red and larger than the other text.</p>
+  <p>I want to be normal sized and the default color.</p>
+</article>
+```
+
+您可以使用 CSS 选择器来查找特定元素并应用 CSS 规则，如下所示。
+
+```css
+article p:first-of-type {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+从简单到复杂，CSS 为您提供了许多选项来选择元素并将规则应用于它们，以帮助解决此类情况。
+
+{% Codepen { user: 'web-dot-dev', id: 'XWprGYz', height: 250 } %}
+
+## CSS 规则的组成部分
+
+要了解选择器的工作原理及其在 CSS 中的作用，了解 CSS 规则的组成部分很重要。CSS 规则是一段代码，包含一个或多个选择器和一个或多个声明。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg", alt="含有选择器 .my-css-rule 的 CSS 规则的图像", width="800", height="427" %}</figure>
+
+在该 CSS 规则中，**选择器**是 `.my-css-rule` ，它在页面上找到所有类为 `my-css-rule` 的元素。大括号内有三个声明。声明是一个属性和值对，它将样式应用于选择器匹配的元素。CSS 规则可以有任意多的声明和选择器。
+
+## 简单的选择器
+
+最直接的选择器组针对 HTML 元素以及类、ID 和其他可能添加到 HTML 标签的属性。
+
+### 通用选择器
+
+[通用选择器](https://developer.mozilla.org/docs/Web/CSS/Universal_selectors)——也称为通配符——匹配任何元素。
+
+```css
+* {
+  color: hotpink;
+}
+```
+
+此规则使页面上的每个 HTML 元素都具有热粉色文本。
+
+### 类型选择器
+
+[类型选择器](https://developer.mozilla.org/docs/Web/CSS/Type_selectors)直接匹配 HTML 元素。
+
+```css
+section {
+  padding: 2em;
+}
+```
+
+此规则导致每个 `<section>` 元素的所有边都有 `2em` 的 `padding`。
+
+### 类选择器
+
+一个 HTML 元素可以在其 `class` 属性中定义一个或多个项目。[类选择器](https://developer.mozilla.org/docs/Web/CSS/Class_selectors)匹配应用类的任何元素。
+
+```html
+<div class="my-class"></div>
+<button class="my-class"></button>
+<p class="my-class"></p>
+```
+
+任何应用了该类的元素都将变为红色：
+
+```css
+.my-class {
+  color: red;
+}
+```
+
+请注意，`.` 只存在于 CSS 中**而非** HTML 中。这是因为 `.` 字符指示 CSS 语言匹配类属性成员。这是 CSS 中的一种常见模式，其中使用特殊字符或字符集来定义选择器类型。
+
+具有 `.my-class` 类的 HTML 元素仍将与上述 CSS 规则匹配，即使它们有多个其他类，如下所示：
+
+```html
+<div class="my-class another-class some-other-class"></div>
+```
+
+这是因为 CSS 在查找*包含*已定义类的`class` 属性，而不是完全匹配该类。
+
+{% Aside %} 类属性的值几乎可以是您想要的任何值。但有一件事可能会让您失望，那就是您不能用数字来开始一个类（或一个 ID），比如 `.1element`。可在[规范](https://www.w3.org/TR/CSS21/syndata.html#characters)中阅读更多内容。 {% endAside %}
+
+### ID 选择器
+
+具有 `id` 属性的 HTML 元素应该是页面上具有 ID 值的唯一元素。您可以使用[ID 选择器](https://developer.mozilla.org/docs/Web/CSS/ID_selectors)选择元素，如下：
+
+```css
+#rad {
+  border: 1px solid blue;
+}
+```
+
+此 CSS 会将蓝色边框应用于 `id` 为 `rad` 的 HTML 元素，如下所示：
+
+```html
+<div id="rad"></div>
+```
+
+与类选择器 `.` 类似，使用 `#` 字符指示 CSS 查找与其后面的 `id` 匹配的元素。
+
+{% Aside %} 如果浏览器遇到多个 `id` 实例，它仍会应用与其选择器匹配的任何 CSS 规则。但是，任何具有 `id` 属性的元素都应该具有唯一的值，因此除非您为单个元素编写非常具体的 CSS，否则请避免使用 `id` 选择器应用样式，因为这意味着您无法重复使用其他地方的那些风格。 {% endAside %}
+
+### 属性选择器
+
+您可以使用[属性选择器](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors)查找具有特定 HTML 属性或具有特定 HTML 属性值的元素。可通过用方括号  (`[ ]`) 将选择器括起来的方式指示 CSS 查找属性。
+
+```css
+[data-type='primary'] {
+  color: red;
+}
+```
+
+该 CSS 查找具有 `data-type` 属性且值为 `primary` 的所有元素，如下所示：
+
+```html
+<div data-type="primary"></div>
+```
+
+除了查找 `data-type` 的特定值之外，您还可以查找具有该属性的元素，而不管其值如何。
+
+```css
+[data-type] {
+  color: red;
+}
+```
+
+```html
+<div data-type="primary"></div>
+<div data-type="secondary"></div>
+```
+
+这两个 `<div>` 元素都将具有红色文本。
+
+您可以通过向属性选择器添加 `s` 运算符来使用区分大小写的属性选择器。
+
+```css
+[data-type='primary' s] {
+  color: red;
+}
+```
+
+这意味着，如果一个 HTML 元素的 `data-type` 值是 `Primary` 而非 `primary` ，则其不会得到红色文本。您可以使用 `i` 运算符来执行相反的操作——不区分大小写。
+
+除了 case 运算符，您还可以访问与属性值内的字符串部分匹配的运算符。
+
+```css
+/* A href that contains "example.com" */
+[href*='example.com'] {
+  color: red;
+}
+
+/* A href that starts with https */
+[href^='https'] {
+  color: green;
+}
+
+/* A href that ends with .com */
+[href$='.com'] {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbOy' } %}<figcaption>在该演示中，属性选择器中的 `$` 操作符从 `href` 属性中获取文件类型。这使得可以使用伪元素根据该文件类型为标签添加前缀。</figcaption></figure>
+
+### 分组选择器
+
+选择器不必只匹配单个元素。您可以用逗号分隔多个选择器：
+
+```css
+strong,
+em,
+.my-class,
+[lang] {
+  color: red;
+}
+```
+
+此示例将颜色更改扩展到 `<strong>` 和 `<em>` 元素。它还扩展到一个名为 `.my-class` 的类，以及一个具有 `lang` 属性的元素。
+
+{% Assessment 'simple-selectors' %}
+
+## 伪类和伪元素
+
+CSS 提供有用的选择器类型，它们专注于特定的平台状态，例如元素悬停时、元素成为*内部*结构或元素的一部分结构。
+
+### 伪类
+
+HTML 元素发现自己处于各种状态，要么是因为它们与之互动，要么是因为它们的一个子元素处于某种状态。
+
+例如，用户可以用鼠标指针悬停 HTML 元素，*或者*用户也可以将子元素悬停。对于这些情况，请使用 `:hover` 伪类。
+
+```css
+/* Our link is hovered */
+a:hover {
+  outline: 1px dotted green;
+}
+
+/* Sets all even paragraphs to have a different background */
+p:nth-child(even) {
+  background: floralwhite;
+}
+```
+
+在[伪类模块](/learn/css/pseudo-classes)中了解更多信息。
+
+### 伪元素
+
+伪元素与伪类不同，因为它们不是响应平台状态，而是像使用 CSS 插入新元素一样。伪元素也在语法上与伪类不同，因为不使用单个冒号（ `:` ），我们使用双冒号（ `::` ）。
+
+{% Aside %} 双冒号 ( `::` ) 是伪元素与伪类的区别，但由于旧版本的 CSS 规范中不存在这种区别，因此浏览器支持原始伪元素使用单个冒号，例如 `:before` 和 `:after` 以帮助向后兼容旧浏览器，如 IE8。 {% endAside %}
+
+```css
+.my-element::before {
+  content: 'Prefix - ';
+}
+```
+
+就像在上面的演示中一样，您在链接的标签前面加上了文件类型的前缀，您可以使用 `::before` 伪元素**在元素的开头**插入内容，或使用 `::after` 伪元素**在元素的末尾**插入内容。
+
+不过，伪元素不限于插入内容。您还可以使用它们来定位元素的特定部分。例如，假设您有一个列表，则可以使用 `::marker` 为列表中的每个项目符号点（或数字）设置样式
+
+```css
+/* Your list will now either have red dots, or red numbers */
+li::marker {
+  color: red;
+}
+```
+
+您还可以使用 `::selection` 为用户突出显示的内容设置样式。
+
+```css
+::selection {
+  background: black;
+  color: white;
+}
+```
+
+在[伪元素模块](/learn/css/pseudo-elements)中了解更多信息。
+
+{% Assessment 'pseudo-selectors' %}
+
+## 复杂的选择器
+
+您已经看到了大量的选择器，但有时，您需要对 CSS 进行*更精细的控制*。这是复杂选择器介入的地方。
+
+在这一点上值得记住的是，虽然下面的选择器给了我们更多的权力，但我们只能**向下级联**，选择子元素。我们无法向上定位并选择父元素。我们将在[后面的课程](/learn/css/the-cascade)中介绍级联是什么以及它是如何工作的。
+
+### 连结符
+
+连结符位于两个选择器之间。例如，如果选择器是 `p > strong` ，则连结符是 `>` 字符。使用这些连结符的选择器可帮助您根据项目在文档中的位置选择项目。
+
+#### 后代连结符
+
+要了解后代连结符，您首先需要了解父元素和子元素。
+
+```html
+<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
+```
+
+父元素是包含文本的 `<p>`。在该 `<p>` 元素内是一个 `<strong>` 元素，使其内容加粗。因为它在 `<p>` 内部，所以它是一个子元素。
+
+后代连结符允许我们定位子元素。这使用了一个空格 (` `) 指示浏览器查找子元素：
+
+```css
+p strong {
+  color: blue;
+}
+```
+
+此代码段仅选择 `<p>` 元素的子元素的所有 `<strong>` 元素，使它们递归地变为蓝色。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'BapBbGN' } %}<figcaption>由于后代连结符是递归的，因此会应用添加到每个子元素的填充，从而产生交错效果。</figcaption></figure>
+
+在上面的示例中，使用连结符选择器 `.top div` 可以更好地可视化这种效果。该 CSS 规则为这些 `<div>` 元素添加了左填充。因为连结符是递归的， `.top` 中的所有 `<div>` 元素都将应用相同的填充。
+
+查看此演示中的 HTML 面板，了解 `.top` 元素如何具有多个 `<div>` 子元素，而这些子元素本身又具有 `<div>` 子元素。
+
+#### 下一个同级连结符
+
+您可以在选择器中使用 `+` 字符来查找紧跟在另一个元素之后的元素。
+
+{% Codepen { user: 'web-dot-dev', id: 'JjEPzwB' } %}
+
+要在堆叠元素之间添加空格，请*仅*在元素是 `.top` 的子元素的**下一个同级**时使用下一个同级连接符添加空格。
+
+您可以使用下面的选择器向 `.top` 的所有子元素添加边距：
+
+```css
+.top * {
+  margin-top: 1em;
+}
+```
+
+这样做的问题在于，因为您要选择 `.top` 的每个子元素，所以此规则可能会创建额外的、不必要的空格。与**通用选择器**混合的**下一个同级连结符**使您不仅可以控制哪些元素获得空格，还可以将空格应用于**任何元素**。这为您提供了一些长期的灵活性，无论 `.top` 中出现什么 HTML 元素。
+
+#### 后续同级连结符
+
+后续连结符与下一个同级选择器非常相似。但是，其不使用 `+` 字符，而是使用 `~` 字符。不同之处在于一个元素只需要跟随另一个具有相同父元素的元素，而不是成为具有相同父元素的下一个元素。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'ZELzPPX', height: 400 } %} <figcaption>使用后续选择器和 `:checked` 伪类可创建纯 CSS 开关元素。</figcaption></figure>
+
+该后续连结符提供一定的灵活性，这在像上面的示例这样的上下文中很有用，当其关联的复选框具有 `:checked` 状态时，我们可更改自定义开关的颜色。
+
+#### 子级连结符
+
+子级连结符（也称为直接后代）允许您更好地控制连结符选择器附带的递归。通过使用 `>` 字符，您可以将连结符选择器限制为**仅**应用于直接子级。
+
+以上面的“下一个同级选择器”为例。每个**下一个同级**都添加了空格，但如果这些元素中有一个也以**下一个同级元素**作为子元素，则可能会导致不受欢迎的额外空格。
+
+{% Codepen { user: 'web-dot-dev', id: 'ExZYMJL' } %}
+
+为了缓解该问题，可更改**下一个同级选择器**以合并子级连结符：`> * + *` 。该规则现在**仅**适用于 `.top` 的直接子级。
+
+{% Codepen { user: 'web-dot-dev', id: 'dyNbrEr' } %}
+
+### 复合选择器
+
+您可以组合选择器以提高特异性和可读性。例如，要定位同样具有 `.my-class` 类的 `<a>` 元素，请编写以下内容：
+
+```css
+a.my-class {
+  color: red;
+}
+```
+
+这不会将红色应用于所有链接，而且**如果**其位于 `<a>` 元素上，则只会将红色应用于 `.my-class`。有关这方面的更多信息，请参阅[特异性模块](/learn/css/specificity)。
+
+{% Assessment 'complex-selectors' %}
+
+## 资源
+
+- [CSS 选择器参考](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
+- [交互式选择器游戏](https://flukeout.github.io/)
+- [伪类和伪元素参考](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [将 CSS 选择器转换为纯英文解释器的工具](https://kittygiraudel.github.io/selectors-explained/)
diff --git a/src/site/content/zh/learn/css/selectors/pseudo-selectors.assess.yml b/src/site/content/zh/learn/css/selectors/pseudo-selectors.assess.yml
new file mode 100644
index 00000000000..5251b920bca
--- /dev/null
+++ b/src/site/content/zh/learn/css/selectors/pseudo-selectors.assess.yml
@@ -0,0 +1,31 @@
+setLeader: Test your knowledge of pseudo selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: Pseudo-element selectors use how many colons?
+    options:
+      - content: ":"
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: "::"
+        rationale: "Two `::` are used to target pseudo-elements."
+      - content: ":::"
+        rationale: "This is invalid and targets nothing."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      p:hover {
+        background: white;
+        color: black;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What kind of pseudo selector is used in the above snippet?
+    options:
+      - content: Pseudo-class
+        rationale: "One `:` is used to target pseudo-classes."
+      - content: Pseudo-element
+        rationale: "Two `::` are used to target pseudo-elements."
diff --git a/src/site/content/zh/learn/css/selectors/simple-selectors.assess.yml b/src/site/content/zh/learn/css/selectors/simple-selectors.assess.yml
new file mode 100644
index 00000000000..7f344ee8402
--- /dev/null
+++ b/src/site/content/zh/learn/css/selectors/simple-selectors.assess.yml
@@ -0,0 +1,38 @@
+setLeader: Test your knowledge of simple selectors
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      * {}
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: attribute
+        rationale: "`[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "`#` are used for **ID** simple selectors."
+      - content: universal
+        rationale: "`*` is the **universal** simple selector."
+      - content: class
+        rationale: "`.` are used for **class** simple selectors."
+  - type: multiple-choice
+    stimulus: |
+      ```css
+      div {}
+      ```
+    cardinality: "1"
+    correctAnswers: "1"
+    stem: What kind of simple selector is used in the above snippet?
+    options:
+      - content: class
+        rationale: "A `.` is used for **class** simple selectors."
+      - content: type
+        rationale: "An `element` name is used for **type** simple selectors."
+      - content: attribute
+        rationale: "Square brackets `[]` are used for **attribute** simple selectors."
+      - content: ID
+        rationale: "A `#` is used for **ID** simple selectors."
diff --git a/src/site/content/zh/learn/css/the-cascade/conclusion.assess.yml b/src/site/content/zh/learn/css/the-cascade/conclusion.assess.yml
new file mode 100644
index 00000000000..8ed8ba41df4
--- /dev/null
+++ b/src/site/content/zh/learn/css/the-cascade/conclusion.assess.yml
@@ -0,0 +1,20 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    cardinality: "1+"
+    correctAnswers: "0,1,2,3"
+    stem: The Cascade can be used for...
+    options:
+      - content: "Resolving conflicts when multiple styles apply to an element."
+        rationale: "This is one of its primary goals, conflict resolution."
+      - content: "Ensuring there's only one style value for each property at draw time."
+        rationale: "The text can only be one color, and The Cascade is a way of
+        determining which it should be."
+      - content: "Scoring and weighting style rules."
+        rationale: "Scoring and weighting are part of the sorting phase of The
+        Cascade."
+      - content: "Sorting and filtering style attributes."
+        rationale: "Sorting and filtering are phases of The Cascade to help
+        understand aspects of conflict resolution."
diff --git a/src/site/content/zh/learn/css/the-cascade/index.md b/src/site/content/zh/learn/css/the-cascade/index.md
new file mode 100644
index 00000000000..7f89f937922
--- /dev/null
+++ b/src/site/content/zh/learn/css/the-cascade/index.md
@@ -0,0 +1,149 @@
+---
+title: 级联
+description: 有时两个或多个相互冲突的 CSS 规则可能会应用于一个元素。在本模块中了解浏览器如何选择使用哪个规则，以及如何控制此选择。
+audio:
+  title: CSS 播客   - 004：级联
+  src: "https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556"
+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png
+authors:
+  - andybell
+date: 2021-03-29
+tags:
+  - css
+---
+
+CSS 代表级联样式表。级联是解决多个 CSS 规则应用于一个 HTML 元素所产生冲突的算法。这就是使用以下 CSS 样式设置的按钮文本将呈现蓝色的原因。
+
+```css
+button {
+  color: red;
+}
+
+button {
+  color: blue;
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'GRrgMOm', height: 200 } %}</figure>
+
+了解级联算法可以帮助您了解浏览器如何解决此类冲突。级联算法分为 4 个不同的阶段。
+
+1. **出现的位置和顺序**：CSS 规则出现的顺序
+2. **特异性**：一种确定哪个 CSS 选择器具有最强匹配的算法
+3. **来源**：CSS 出现的顺序及其来源，无论是浏览器样式、浏览器扩展中的 CSS 还是您创作的 CSS
+4. **重要性**：某些 CSS 规则的权重高于其他规则，尤其是具有 `!important` 规则类型的规则
+
+## 出现的位置和顺序
+
+在计算冲突解决方案时，级联会考虑 CSS 规则出现的顺序及其出现方式。
+
+本课开头的演示是最直接的位置示例。有两条规则的选择器具有相同的特异性，所以最后一个规则获胜。
+
+样式可以来自 HTML 页面上的各种来源，例如 `<link>` 标记、嵌入的 `<style>` 标记和在元素的 `style` 属性中定义的内联 CSS。
+
+如果一个 `<link>` 中包括您的 HTML 页面顶部的 CSS，另一个 `<link>` 中包括您的页面底部的 CSS：底部 `<link>` 将具有最多的特异性。嵌入的 `<style>` 元素情况相同。它们更具体，越往页面下方越具体。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'NWdPaWv' } %} <figcaption>该按钮具有蓝色背景，由 CSS 定义，包含在 <code>&lt;link /&gt;</code> 元素中。将其设置为深色的 CSS 规则位于第二个链接样式表中，并因其位置在较后面而被应用。</figcaption></figure>
+
+此顺序也适用于嵌入的 `<style>` 元素。如果它们在 `<link>` 之前声明，则链接样式表的 CSS 将具有最多的特异性。
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbLoB' } %} <figcaption><code>&lt;style&gt;</code> 元素在 <code>&lt;head&gt;</code> 中声明，而 <code>&lt;link /&gt;</code> 元素在 <code>&lt;body&gt;</code> 中声明。这意味着它比 <code>&lt;style&gt;</code> 元素具有更多的特异性</figcaption></figure>
+
+声明了 CSS 的内联 `style` 属性将覆盖所有其他 CSS，无论其位置如何，除非声明定义了 `!important`。
+
+您的 CSS 规则顺序还应用了位置。在此示例中，元素有紫色背景，因为 `background: purple` 是最后声明的。因为绿色背景是在紫色背景之前声明的，所以现在被浏览器忽略了。
+
+```css
+.my-element {
+  background: green;
+  background: purple;
+}
+```
+
+能够为同一属性指定两个值是一种为不支持特定值的浏览器创建回退的简单方法。在下一个示例中，`font-size` 被声明了两次。如果浏览器支持 `clamp()`，那么之前的 `font-size` 声明将被丢弃。如果浏览器不支持 `clamp()`，则初始声明将被采用，字体大小将为 1.5rem
+
+```css
+.my-element {
+  font-size: 1.5rem;
+  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
+}
+```
+
+<figure>{% Codepen { user: 'web-dot-dev', id: 'xxgbPMP' } %}</figure>
+
+{% Aside %} 这种将同一属性声明两次的方法有效，因为浏览器会忽略它们不理解的值。与其他一些编程语言不同，CSS 在检测到无法解析的行时不会引发错误或中断您的程序，它无法解析的值是无效的，因此会被忽略。然后浏览器继续处理其余的 CSS，而不会中断它已经理解的内容。{% endAside %}
+
+{% Assessment 'position' %}
+
+## 特异性
+
+特异性是一种算法，它确定哪个 CSS 选择器最具体，其使用加权或评分系统进行这些计算。通过使规则更具体，即使在 CSS 中稍后出现与选择器匹配的某些其他 CSS 时，您也可以应用它。
+
+在[下一课](/learn/css/specificity)中，您可以了解如何计算特异性的详细信息，但记住一些事项将帮助您避免过多的特异性问题。
+
+针对元素上的类的 CSS 将使该规则更具体，因此被视为比单独针对元素的 CSS 更应该被应用。这意味着对于以下 CSS，即使两个规则都匹配且在样式表中 `h1` 选择器的规则在后面出现，则 `h1` 将设为红色。
+
+```html
+<h1 class="my-element">Heading</h1>
+```
+
+```css
+.my-element {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}
+```
+
+`id` 使 CSS 更具体，因此应用于 ID 的样式将覆盖许多以其他方式应用的样式。这是为什么通常不要将样式附加到 `id` 的原因之一。用其他内容覆盖此样式可能会很困难。
+
+### 特异性是累积的
+
+正如您在下一课中所了解的那样，每种类型的选择器都会获得分数，表示其具体程度，且用于针对某个元素的所有选择器的分数都会加在一起。这意味着如果针对某个具有选择器列表（例如 `a.my-class.another-class[href]:hover`）的元素，则您会得到一些很难用其他 CSS 覆盖的内容。出于这个原因，并且为了帮助您提高 CSS 的可重用性，最好让您的选择器尽可能简单。在需要时使用特异性作为获取元素的工具，但如果可以，请始终考虑重构较长的、具体的选择器列表。
+
+## 来源
+
+您创作的 CSS 并不是应用于页面的唯一 CSS。级联考虑 CSS 的来源。此来源包括浏览器的内部样式表、浏览器扩展或操作系统添加的样式以及您创作的 CSS。**这些来源的特异性顺序**，从最不具体到最具体排序如下：
+
+1. **用户代理基本样式**。这些样式是您的浏览器默认应用于 HTML 元素的样式。
+2. **本地用户样式**。这些样式可能来自操作系统级别，例如基本字体大小或减少运动的偏好。它们也可以来自浏览器扩展，例如允许用户为网页编写自己的自定义 CSS 的浏览器扩展。
+3. **创作的 CSS**。您创作的 CSS。
+4. **创作的 `!important`**。您添加到创作声明中的任何 `!important`。
+5. **本地用户样式 `!important`**。任何来自操作系统级别或浏览器扩展级别 CSS 的 `!important`。
+6. **用户代理 `!important`**。任何在浏览器提供的默认 CSS 中定义的 `!important`。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/zPdaZ6G11oYrgJ78EfF7.svg", alt="同样在列表中解释的来源顺序的视觉演示。", width="800", height="347" %}</figure>
+
+如果您创作的 CSS 中有 `!important` 规则类型，而用户自定义的 CSS 中有 `!important` 规则类型，那么谁的 CSS 会胜出？
+
+{% Assessment 'origin' %}
+
+## 重要性
+
+并非所有 CSS 规则的计算方式都相同，或者彼此具有相同的特异性。
+
+**重要性顺序**按从最不重要到最重要排序如下：
+
+1. 普通规则类型，例如 `font-size`、`background` 或 `color`
+2. `animation` 规则类型
+3. `!important` 规则类型（按照与来源相同的顺序）
+4. `transition` 规则类型
+
+活动的动画和过渡规则类型比普通规则具有更高的重要性。在过渡重要性高于 `!important` 规则类型的情况下。这是因为当动画或过渡变为活动状态时，其预期行为是改变视觉状态。
+
+## 使用 DevTools 找出未应用某些 CSS 的原因
+
+浏览器 DevTools 通常会显示所有可以匹配元素的 CSS，没有使用的被划掉。
+
+<figure>{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Z6aLsqcqjGAUsWzq7DZs.png", alt="被覆盖的 CSS 被划掉的浏览器 DevTools 的图像", width="800", height="446" %}</figure>
+
+如果您希望应用的 CSS 根本没有出现，则它与元素不匹配。在这种情况下，您需要查找其他原因，可能是类或元素名称中有拼写错误或某些 CSS 无效。
+
+{% Assessment 'conclusion' %}
+
+## 资源
+
+- [级联的高度互动解释](https://wattenberger.com/blog/css-cascade)
+- [MDN 级联参考](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
diff --git a/src/site/content/zh/learn/css/the-cascade/origin.assess.yml b/src/site/content/zh/learn/css/the-cascade/origin.assess.yml
new file mode 100644
index 00000000000..98fd0ca2f80
--- /dev/null
+++ b/src/site/content/zh/learn/css/the-cascade/origin.assess.yml
@@ -0,0 +1,55 @@
+setLeader: Test your knowledge of cascade origins
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      **Test your knowledge of cascade origins**, consider the following style
+      rules from various origins:
+
+      #### User-agent style
+      ```css
+      h1 { margin-block-start: 0.83em; }
+      ```
+
+      #### Bootstrap
+      ```css
+      h1 { margin-block-start: 20px; }
+      ```
+
+      #### Page Author styles
+      ```css
+      h1 { margin-block-start: 2ch; }
+
+      @media (max-width: 480px) {
+        h1 { margin-block-start: 1ch; }
+      }
+      ```
+
+      #### User custom style
+      ```css
+      h1 { margin-block-start: 2rem !important; }
+      ```
+
+      Then, given the following HTML:
+      ```html
+      <h1>Lorem ipsum</h1>
+      ```
+    cardinality: "1"
+    correctAnswers: "2"
+    stem: "What is the final `margin-block-start` of the `h1`?"
+    options:
+      - content: 20px
+        rationale: "Bootstrap is part of the authored origin, which loses to the
+        important local user style."
+      - content: 0.83em
+        rationale: "The user agent style origin loses to the important local
+        user style."
+      - content: 2rem
+        rationale: "This `!important` user custom style has the most specific
+        origin."
+      - content: 2ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
+      - content: 1ch
+        rationale: "This author style is part of the authored origin, which loses to the
+        important local user style."
diff --git a/src/site/content/zh/learn/css/the-cascade/position.assess.yml b/src/site/content/zh/learn/css/the-cascade/position.assess.yml
new file mode 100644
index 00000000000..cd4560468b1
--- /dev/null
+++ b/src/site/content/zh/learn/css/the-cascade/position.assess.yml
@@ -0,0 +1,46 @@
+setLeader: Test your knowledge of the cascade
+height: unset
+tabLabel: question
+questions:
+  - type: multiple-choice
+    stimulus: |
+      If you have the following HTML on your page:
+
+      ```html
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <link rel="stylesheet" href="styles.css" />
+        </head>
+        <body>
+          <button>I am a button</button>
+          <style>
+            button {
+              background: pink;
+            }
+          </style>
+        </body>
+      </html>
+      ```
+
+      Inside `styles.css`, is the following CSS rule:
+
+      ```css
+      button {
+        background: yellow;
+      }
+      ```
+    cardinality: "1"
+    correctAnswers: "0"
+    stem: What color is the button's background?
+    options:
+      - content: pink
+        rationale: | 
+          The embedded `<style>` origin is further down the page than the
+          `<link>` tag, so while the specificity of `button` is the same, the
+          **position** of the style rule makes it win.
+      - content: yellow
+        rationale: | 
+          To the HTML document, the yellow button background may have been read
+          first, but a newer rule of the same specificity was discovered later,
+          making this rule not apply to the button.
\ No newline at end of file
diff --git a/src/site/content/zh/learn/index.md b/src/site/content/zh/learn/index.md
new file mode 100644
index 00000000000..2f04a210309
--- /dev/null
+++ b/src/site/content/zh/learn/index.md
@@ -0,0 +1,4 @@
+---
+layout: learn-page
+title: 学习
+---
diff --git a/src/site/content/zh/learn/learn.11tydata.js b/src/site/content/zh/learn/learn.11tydata.js
new file mode 100644
index 00000000000..d172cc18309
--- /dev/null
+++ b/src/site/content/zh/learn/learn.11tydata.js
@@ -0,0 +1,9 @@
+// =============================================================================
+// LEARN OVERVIEW
+//
+// This is the context object for the learn page.
+// It helps layout cards featured on the learn page, and their ordering.
+//
+// =============================================================================
+
+module.exports = require('../../en/learn/learn.11tydata');
diff --git a/src/site/content/zh/media/index.md b/src/site/content/zh/media/index.md
new file mode 100644
index 00000000000..252baa801c8
--- /dev/null
+++ b/src/site/content/zh/media/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: media
+---
diff --git a/src/site/content/zh/media/video-and-source-tags/index.md b/src/site/content/zh/media/video-and-source-tags/index.md
new file mode 100644
index 00000000000..01777a38298
--- /dev/null
+++ b/src/site/content/zh/media/video-and-source-tags/index.md
@@ -0,0 +1,227 @@
+---
+layout: post
+title: "<video> 和 <source> 标签"
+authors:
+  - samdutton
+  - joemedley
+  - derekherman
+description: 您已经为 Web 正确准备了视频文件，也为其设置了正确的尺寸和分辨率，甚至还创建了适用于不同浏览器的单独 WebM 和 MP4 文件。为了让用户能够观看，您仍然需要为其添加一个网页。
+date: 2014-02-15
+updated: 2021-07-05
+tags:
+  - media
+---
+
+您为 Web [正确准备了视频文件](/prepare-media/)，也为其设置了正确的尺寸和分辨率，甚至还创建了适用于不同浏览器的单独 WebM 和 MP4 文件。
+
+为了让用户观看视频，您仍需要将其添加到网页中。正确执行此操作需要添加两个 HTML 元素：[`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video) 和 [`<source>`](https://developer.mozilla.org/docs/Web/HTML/Element/source) 元素。除有关这些标签的基础知识外，本文还阐述了为了打造良好的用户体验，需要添加到这些标签的属性。
+
+{% Aside %} 您随时可以选择将文件上传到 [YouTube](https://www.youtube.com/) 或 [Vimeo](https://vimeo.com)。在许多情况下，这比本文所描述的过程更可取。这些服务可以为您处理格式和文件类型转换，并提供了在网页中嵌入视频的方法。如果要自己管理，请继续阅读。{% endAside %}
+
+## 指定单个文件
+
+您可以单独使用 video 元素，但建议不要这样做。请始终使用 `type` 属性，如下所示。浏览器使用它来确定是否可以播放提供的视频文件。如果不能，则显示包含的文本。
+
+```html
+<video src="chrome.webm" type="video/webm">
+    <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+### 指定多个文件格式
+
+回想一下[媒体文件基础知识](/media-file-basics/)，并非所有浏览器都支持相同的视频格式。`<source>` 元素允许您指定多种格式作为备用，以防用户的浏览器不支持其中一种。
+
+下面的示例将生成在后文中用作示例的嵌入视频。
+
+```html
+<video controls>
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
+  <p>Your browser cannot play the provided video file.</p>
+</video>
+```
+
+[在 Glitch 上试用一下](https://track-demonstration.glitch.me)（[源代码](https://glitch.com/edit/#!/track-demonstration)）
+
+{% Aside %} 请注意，前面的示例中引入了 `controls` 属性。它会指示浏览器允许用户控制视频播放，包括音量、定位，选择字幕和暂停/恢复播放等。{% endAside %}
+
+尽管可选，但您始终要将 `type` 属性添加到 `<source>` 标签事件。这样可以确保浏览器只下载能够播放的文件。
+
+与提供不同的 HTML 或服务器端脚本相比，这种方法有几个优点，尤其是在移动设备上：
+
+- 您可以按偏好顺序列出格式。
+- 客户端切换减少延迟；只发出一个请求来获取内容。
+- 让浏览器选择格式比使用具有用户代理检测的服务器端支持数据库更简单快速，而且可能更可靠。
+- 指定每个文件源的类型可以提高网络性能；浏览器可以选择视频源，无需下载部分视频来“嗅探”格式。
+
+这些问题在移动环境下尤其重要。在这种环境下，带宽和延迟非常重要，而且用户的耐心可能有限。当多个来源具有不支持的类型时，省略 `type` 属性可能影响性能。
+
+您有几种方法可以深入了解详细信息。查看 [A Digital Media Primer for Geeks](https://www.xiph.org/video/vid1.shtml) 可了解有关视频和音频如何在 Web 上工作的更多信息。您还可以使用 DevTools 中的[远程调试](https://developer.chrome.com/docs/devtools/remote-debugging/)来比较具有[类型属性和](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/notype.html)和[没有类型属性](https://googlesamples.github.io/web-fundamentals/fundamentals/media/video-main.html)的网络活动。
+
+{% Aside 'caution' %} 请务必检查浏览器开发人员工具中的响应标头，以[确保服务器报告正确的 MIME 类型](https://developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types)；否则视频源类型检查将不起作用。{% endAside %}
+
+### 指定开始和结束时间
+
+节省带宽并改善网站响应性：利用媒体片段为视频元素添加开始和结束时间。
+
+<figure>
+  <video controls width="100%">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm#t=5,10" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4#t=5,10" type="video/mp4">
+    <p>该浏览器不支持视频元素。</p>
+  </source></source></video></figure>
+
+要使用媒体片段，请将 `#t=[start_time][,end_time]` 添加到媒体 URL。例如，要播放从 5 秒到 10 秒的视频，请指定：
+
+```html
+<source src="video/chrome.webm#t=5,10" type="video/webm">
+```
+
+您还可以使用 `<hours>:<minutes>:<seconds>` 来指定时间。例如，`#t=00:01:05` 将在一分五秒时开始播放视频。要仅播放视频的第一分钟，请指定 `#t=,00:01:00`。
+
+您可以使用此功能在同一视频上提供多个视图（例如 DVD 中的提示点），而无需编码和提供多个文件。
+
+要让此功能起作用，您的服务器必须支持范围请求并启用该功能。默认情况下，大多数服务器会启用范围请求。由于某些托管服务会将其关闭，因此，您要确认范围请求可用于在您的站点上使用片段。
+
+幸运的是，您可以在浏览器开发人员工具中执行此操作。例如，在 Chrome 中，它位于[“网络”面板](https://developer.chrome.com/docs/devtools/#network)中。请查找 `Accept-Ranges` 标头并验证它是否显示 `bytes`。在下图中，我将标头上画了一个红色框。如果您没有看到 `bytes` 值，则需要联系您的托管服务提供商。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/20DlLyicG5PAo6TXBKh3.png", alt="Chrome DevTools 截屏：Accept-Ranges: bytes。", width="800", height="480" %}<figcaption> Chrome DevTools 截屏：Accept-Ranges: bytes。</figcaption></figure>
+
+### 包含海报图像
+
+将 poster 属性添加到 `video` 元素，以便查看者可以在加载元素后立即了解内容，而无需下载视频或开始播放。
+
+```html
+<video poster="poster.jpg" ...>
+  …
+</video>
+```
+
+如果视频 `src` 遭到损坏或不支持任何提供的视频格式，海报也可以作为备用。海报图像的唯一缺点是需要额外的文件请求，它会消耗一些带宽，并且需要进行渲染。有关详细信息，请参阅[有效的编码图像](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)。
+
+<div class="switcher">{% Compare 'worse' %}<figure> {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/R8VNeplKwajJhOuVkPDT.png", alt="没有备用海报，只能看到视频未显示。", width="360", height="600" %}</figure>
+</div>
+<p data-md-type="paragraph">{% CompareCaption %} 如果没有备用海报，则只能看到视频未显示。{% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<p data-md-type="paragraph">{% Compare 'better' %}</p>
+<div data-md-type="block_html"><figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rNhydHVGeL2P0sQ0je5k.png", alt="备用海报看起来就像获取了视频的第一帧。", width="360", height="600" %}</figure></div>
+<p data-md-type="paragraph">{% CompareCaption %} 备用海报看起来就像获取了视频的第一帧。{% endCompareCaption %}</p>
+<p data-md-type="paragraph">{% endCompare %}</p>
+<div data-md-type="block_html"></div>
+
+### 确保视频不溢出容器
+
+当视频元素对视口来说太大时，它们可能会溢出容器，导致用户无法看到内容或使用控件。
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cDl2OfCE3hQivhaNvMUh.png", alt="Android Chrome 截屏，纵向：无样式的视频元素溢出视口。", width="338", height="600" %}<figcaption>Android Chrome 截屏，纵向：无样式的视频元素溢出视口。</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bCiZsNkZNsAhWbOBsLCs.png", alt="Android Chrome 截屏，横向：无样式的视频元素溢出视口。", width="800", height="450" %}<figcaption> Android Chrome 截屏，横向：无样式的视频元素溢出视口。</figcaption></figure>
+</div>
+
+您可以使用 CSS 控制视频尺寸。如果 CSS 不能满足您的所有需求，JavaScript 库和插件（如 [FitVids](http://fitvidsjs.com/) ，本文不做讨论）可以提供帮助，即便是来自 YouTube 和其他来源的视频，也是如此。不幸的是，这些资源会增加[网络负载大小](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)，从而对您的收入和用户的费用产生负面影响。
+
+对于本文介绍了这些简单用途，可利用 [CSS 媒体查询](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#css-media-queries)来根据视口尺寸指定元素的大小；`max-width: 100%` 就非常合适。
+
+对于 iframe 中的媒体内容（例如 YouTube 视频），请尝试响应式方法（例如 [John Surdakowski 提出的方法](http://avexdesigns.com/responsive-youtube-embed/)）。
+
+{% Aside 'caution' %} 请勿强制调整元素大小，导致[宽高比](https://www.google.com/search?q=aspect+ratio&oq=aspect+ratio&aqs=chrome..69i57j35i39j0l6.1896j0j7&sourceid=chrome&ie=UTF-8)与原始视频不同。视频压扁或拉伸后效果会很糟糕。{% endAside %}
+
+#### CSS
+
+```css
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+```
+
+#### HTML
+
+```html
+<div class="video-container">
+  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
+          frameborder="0" width="560" height="315">
+  </iframe>
+</div>
+```
+
+试用一下
+
+对比[响应示例](https://googlesamples.github.io/web-fundamentals/fundamentals/media/responsive_embed.html)与[非响应版本](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/unyt.html)。如您所见，非响应版本的用户体验不佳。
+
+### 设备方向
+
+对于桌面显示器或笔记本电脑来说，设备方向不是问题，但是，当考虑为移动设备和平板电脑设计网页时，这一点非常重要。
+
+iPhone 上的 Safari 可以很好地切换纵向和横向模式：
+
+<div class="switcher">
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AmHneDShMOioWZwYG2kF.png", alt="iPhone 上的 Safari 中播放的视频截屏，纵向。", width="338", height="600" %} <figcaption>iPhone 上的 Safari 中播放视频截屏，纵向。</figcaption></figure><figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MZwkLJaXVk4g8lruhiKZ.png", alt="iPhone 上的 Safari 中播放的视频截屏，横向。", width="600", height="338" %} <figcaption>iPhone 上的 Safari 中播放的视频截屏，横向。</figcaption></figure>
+</div>
+
+iPad 上的设备方向和 Android 上的 Chrome 都可能有问题。例如，在不进行任何自定义的情况下，iPad 上横向播放的视频可能如下所示：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9FsExgY6cJFfMkxOPNkl.png", alt="iPad 上的 Safari 中播放的视频截屏，横向。", width="600", height="450" %} <figcaption>iPad 上的 Safari 中播放的视频截屏，横向。</figcaption></figure>
+
+使用 CSS 设置视频 `width: 100%` 或 `max-width: 100%` 可以解决许多设备的方向布局问题。
+
+### 自动播放
+
+`autoplay` 属性用于控制浏览器是否立即下载和播放视频。它的具体工作方式取决于平台和浏览器。
+
+- Chrome：取决于多个因素，包括但不限于是否在桌面上查看，以及移动用户是否已将网站或应用添加到主屏幕。有关详细信息，请参阅[自动播放最佳实践](/autoplay-best-practices/)。
+
+- Firefox：阻止所有视频和声音，但允许用户为所有或特定站点放宽这些限制。有关详细信息，请参阅[在 Firefox 中允许或阻止媒体自动播放](https://support.mozilla.org/kb/block-autoplay)
+
+- Safari：过去一直需要用户手势操作，但最近的版本放宽了这一要求。有关详细信息，请参阅 [iOS 上的新 &lt;video&gt; 策略](https://webkit.org/blog/6784/new-video-policies-for-ios/)。
+
+即使在可以自动播放的平台上，您也需要考虑启用此功能是否合适：
+
+- 数据使用可能费用高昂。
+- 在用户需要之前播放媒体会占用带宽和 CPU，从而导致页面渲染延迟。
+- 用户可能处于播放视频或音频会造成干扰的环境中。
+
+### 预载
+
+`preload` 属性用于向浏览器提供关于要预先加载多少信息或内容的提示。
+
+<table class="responsive">
+  <thead>
+    <tr>
+      <th>值</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-th="Value"><code>none</code></td>
+      <td data-th="Description">用户可能选择不观看视频，因此不要预先加载任何内容。</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>metadata</code></td>
+      <td data-th="Description">元数据（持续时间、尺寸、文本轨道）应预先加载，但尽量不要预先加载视频。</td>
+    </tr>
+    <tr>
+      <td data-th="Value"><code>auto</code></td>
+      <td data-th="Description">认为立即下载整个视频可行。空字符串会产生相同的结果。</td>
+    </tr>
+  </tbody>
+</table>
+
+在不同的平台上，`preload` 属性的效果不同。例如，在桌面上，Chrome 会缓存 25 秒的视频，但是，在 iOS 或 Android 上则不缓存。这意味着在移动设备上可能出现播放启动延迟的情况，而在桌面上则不会发生。有关更多详细信息，请参阅[利用音频和视频预载快速播放](/fast-playback-with-preload/)或 [Steve Souders 的博客](https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/)。
+
+现在，您已经了解了如何将媒体添加到网页中，可以开始学习[媒体可访问性](/media-accessibility/)了，您将了解为了让有听力障碍的用户观看，或者当播放音频不可行时，如何为视频添加字幕。
diff --git a/src/site/content/zh/metrics/cls/index.md b/src/site/content/zh/metrics/cls/index.md
new file mode 100644
index 00000000000..dcea5273883
--- /dev/null
+++ b/src/site/content/zh/metrics/cls/index.md
@@ -0,0 +1,286 @@
+---
+layout: post
+title: Cumulative Layout Shift 累积布局偏移 (CLS)
+authors:
+  - philipwalton
+  - mihajlija
+date: 2019-06-11
+updated: 2022-10-19
+description: 本篇文章介绍了累积布局偏移 (CLS) 指标并说明了该指标的测量方式。
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside 'caution' %} **2021 年 6 月 1 日**：CLS 的实现方式已发生变更。进一步了解变更原因，请查看[不断发展 CLS 指标](/evolving-cls)。 {% endAside %}
+
+{% Aside 'key-term' %} 累积布局偏移 (CLS) 是测量[视觉稳定性](/user-centric-performance-metrics/#types-of-metrics)的一个以用户为中心的重要指标，因为该项指标有助于量化用户经历意外布局偏移的频率，较低的 CLS 有助于确保一个页面是[令人愉悦的](/user-centric-performance-metrics/#questions)。 {% endAside %}
+
+您是否曾经历过在网上阅读一篇文章，结果页面上的某些内容突然发生改变？文本在毫无预警的情况下移位，导致您找不到先前阅读的位置。或者更糟糕的情况：您正要点击一个链接或一个按钮，但在您手指落下的瞬间，诶？链接移位了，结果您点到了别的东西！
+
+大多数情况下，这些体验只是令人恼火，但在某些情况下，却可能带来真正的破坏。
+
+<figure>
+  <video autoplay controls loop muted
+    poster="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability-poster.png"
+    width="658" height="510">
+    <source
+      src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm"
+      type="video/webm; codecs=vp8">
+    <source
+      src="https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.mp4"
+      type="video/mp4; codecs=h264">
+  </video>
+  <figcaption>
+    截屏视频说明了布局不稳定性会对用户产生怎样的负面影响。
+  </figcaption>
+</figure>
+
+页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM 元素到页面现有内容的上方。罪魁祸首可能是未知尺寸的图像或视频、实际渲染后比后备字体更大或更小的字体，或者是动态调整自身大小的第三方广告或小组件。
+
+让这个问题变得更加棘手的是，网站在开发环境中的运作方式通常与用户在网站上的实际体验大不相同。个性化或第三方内容在开发环境中的表现通常与其在实际情况中的表现不同，测试图像通常已经在开发者的浏览器缓存中了，并且本地调用 API 的速度一般非常快，几乎察觉不到延迟。
+
+累积布局偏移 (CLS) 指标通过测量真实用户体验中发生偏移的频率来帮助您解决这一问题。
+
+## 什么是 CLS？
+
+CLS 测量整个页面生命周期内发生的所有[意外](/cls/#expected-vs-unexpected-layout-shifts)布局偏移中最大一连串的*布局偏移分数*。
+
+每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了*布局偏移* 。（有关单次[布局偏移分数](#layout-shift-score)计算方式的详细信息，请参阅下文。）
+
+一连串的布局偏移，也叫[*会话窗口*](evolving-cls/#why-a-session-window)，是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒。
+
+最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口。
+
+<figure>
+  <video controls autoplay loop muted width="658" height="452">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/better-layout-shift-metric/session-window.mp4" type="video/mp4">
+  </video>
+  <figcaption>会话窗口示例。蓝色竖条代表每个单次布局偏移的分数。</figcaption></figure>
+
+{% Aside 'caution' %} 此前，CLS 测量的是整个页面生命周期内发生的*所有单次布局偏移分数*的总和。如需了解哪些工具仍然按照原方式提供测量功能，请查看[网络工具集中不断发展的累积布局偏移](/cls-web-tooling) 。 {% endAside %}
+
+### 怎样算是良好的 CLS 分数？
+
+为了提供良好的用户体验，网站应该努力将 CLS 分数控制在**0.1** 或以下。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的**第 75 个百分位数**，且该阈值同时适用于移动和桌面设备。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="良好的 CLS 值低于 0.1，较差的值大于 0.25 并且介于两者之间的任何东西都需要改进", width="400", height="300" %}
+</picture>
+
+{% Aside %} 如需详细了解这些建议值背后的研究和方法论，请参阅：[定义核心 Web 指标的指标阈值](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## 布局偏移详情
+
+布局偏移由[布局不稳定性 API](https://github.com/WICG/layout-instability)定义，只要可视区域中可见元素的起始位置（例如，元素在默认[书写模式](https://developer.mozilla.org/docs/Web/CSS/writing-mode)下的顶部和左侧位置）在两帧之间发生了变更，该 API 就会报告`layout-shift`条目。这样的元素被视为*不稳定元素*。
+
+请注意，只有当现有元素的起始位置发生变更时才算作布局偏移。如果将新元素添加到 DOM 或是现有元素更改大小，则不算作布局偏移，前提是元素的变更不会导致其他可见元素的起始位置发生改变。
+
+### 布局偏移分数
+
+浏览器在计算*布局偏移分数*时，会查看可视区域大小和两个已渲染帧之间的可视区域中*不稳定元素*的位移。布局偏移分数是该位移的两个度量的乘积：*影响分数*和*距离分数*（两者定义如下）。
+
+```text
+布局偏移分数 = 影响分数 * 距离分数
+```
+
+### 影响分数
+
+[影响分数](https://github.com/WICG/layout-instability#Impact-Fraction)测量*不稳定元素*对两帧之间的可视区域产生的影响。
+
+前一帧*和*当前帧的所有*不稳定元素*的可见区域集合（占总可视区域的部分）就是当前帧的*影响分数*。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BbpE9rFQbF8aU6iXN1U6.png", alt="包含一个*不稳定元素*的影响分数示例", width="800", height="600", linkTo=true %}
+
+在上图中，有一个元素在一帧中占据了一半的可视区域。接着，在下一帧中，元素下移了可视区域高度的 25%。红色虚线矩形框表示两帧中元素的可见区域集合，在本示例中，该集合占总可视区域的 75%，因此其*影响分数*为`0.75` 。
+
+### 距离分数
+
+布局偏移分数计算公式的另一部分测量不稳定元素相对于可视区域位移的距离。*距离分数*指的是任何*不稳定元素*在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ASnfpVs2n9winu6mmzdk.png", alt="包含一个*不稳定元素*的距离分数示例", width="800", height="600", linkTo=true %}
+
+在上方的示例中，最大的可视区域尺寸维度是高度，不稳定元素的位移距离为可视区域高度的 25%，因此*距离分数*为 0.25。
+
+所以，在这个示例中，*影响分数*是`0.75` ，*距离分数*是`0.25` ，所以*布局偏移分数*是`0.75 * 0.25 = 0.1875` 。
+
+{% Aside %} 最初，布局偏移分数只根据*影响分数*进行计算。引入*距离分数*是为了避免在大元素发生微小位移的情况下进行过度惩罚的情况。 {% endAside %}
+
+下一个示例说明了向现有元素添加内容对布局偏移分数的影响：
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xhN81DazXCs8ZawoCj0T.png", alt="包含稳定和*不稳定元素*及可视区域剪裁的布局偏移示例", width="800", height="600", linkTo=true %}
+
+"点我！"按钮附加在了包含黑色字体文本的灰色框底部，将带有白色字体文本的绿色框下推（且一部分已在可视区域外）。
+
+在这个示例中，灰色框的大小改变了，但起始位置没有改变，所以该灰色框不是一个*不稳定元素*。
+
+"点我！"按钮一开始并不在 DOM 中，所以它的起始位置也没有改变。
+
+然而，绿色框的起始位置确实发生了变化，但由于绿色框的一部分已经在可视区域外，因此在计算*影响分数*时不考虑不可见区域。两帧中绿色框的可见区域集合（由红色虚线矩形框表示）与第一帧中绿色框的区域相同，为可视区域的 50%。*影响分数*为`0.5` 。
+
+*距离分数*由紫色箭头表示。绿色框向下移动的距离大约为可视区域的 14%，因此*距离分数*为`0.14` 。
+
+布局偏移分数是`0.5 x 0.14 = 0.07` 。
+
+最后一个示例说明了多个*不稳定元素*的情况：
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png", alt="包含多个稳定和*不稳定元素*的布局偏移示例", width="800", height="600", linkTo=true %}
+
+在上面的第一帧中，有四个 API 请求的动物名称结果，按首字母顺序进行了排序。在第二帧中，更多的结果被添加到排序列表中。
+
+列表中第一项（"Cat"）的起始位置没有在两帧之间发生改变，因此是稳定的。同样，添加到列表中的新项目之前不在 DOM 中，因此这些项目的起始位置也没有改变。但"Dog"、"Horse"和"Zebra"这几项的起始位置都发生了改变，因此都是*不稳定元素*。
+
+同理，红色虚线矩形框代表这三个*不稳定元素*前后两帧的区域集合，在本示例中，大约占可视区域面积的 38%（*影响分数*为`0.38` ）。
+
+箭头表示*不稳定元素*相对于起始位置的位移距离。由蓝色箭头表示的"Zebra"元素位移的距离最大，约为可视区域高度的 30%。因此本示例中的*距离分数*为`0.3` 。
+
+布局偏移分数是`0.38 x 0.3 = 0.1172` 。
+
+### 预期布局偏移 vs. 意外布局偏移
+
+布局偏移并不总是坏事。事实上，许多动态网络应用程序经常更改页面元素的起始位置。
+
+#### 由用户发起的布局偏移
+
+布局偏移只有在用户并不期望其发生时才算是坏事。换言之，对用户交互（单击链接、点选按钮、在搜索框中键入信息等）进行响应的布局偏移通常没有问题，前提是偏移发生的时机与交互时机足够接近，使用户对前后关系一目了然。
+
+例如，如果某次用户交互触发了一个网络请求，而该请求可能需要一段时间才能完成，那么最好立即留出一些空间并显示加载指示器，避免在请求完成时出现令用户不快的布局偏移。如果用户没有意识到当前正在加载某些内容，或者不知道资源什么时候能够准备就绪，他们就可能会在等待期间尝试点击其他内容（来打破僵局）。
+
+在用户输入 500 毫秒内发生的布局偏移会带有[`hadRecentInput`](https://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput)标志，便于在计算中排除这些偏移。
+
+{% Aside 'caution' %}`hadRecentInput`标志仅适用于不连续输入事件，如轻触、点击或按键操作。滚动、拖动或捏拉缩放手势等连续性交互操作不算作"最近输入"。更多详情请参阅[布局不稳定性规范](https://github.com/WICG/layout-instability#recent-input-exclusion)。{% endAside %}
+
+#### 动画和过渡
+
+动画和过渡如果做得好，确实是一个在更新页面内容时不让用户感到突兀的好方法。页面内容突然发生意外偏移几乎无一例外会造成糟糕的用户体验。但如果内容从一个位置逐步又自然地移动到下一个位置，这通常有助于用户更好地明白当前状况，并引导他们适应状态之间的变化。
+
+CSS [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)属性使您能够在不触发布局偏移的情况下为元素设置动画：
+
+- 用`transform: scale()`来替代和调整`height`和`width`属性。
+- 如需使元素能够四处移动，可以用`transform: translate()`来替代和调整`top`、`right`、`bottom`或`left`属性。
+
+## 如何测量 CLS
+
+CLS 可以进行[实验室](/user-centric-performance-metrics/#in-the-lab)测量或[实际](/user-centric-performance-metrics/#in-the-field)测量，并且可以在以下工具中使用：
+
+{% Aside 'caution' %}
+  实验室工具通常在一个合成环境中加载页面，因此只能测量页面加载期间发生的布局偏移。因此，实验室工具为某一特定页面报告的 CLS 值可能低于真实用户的实际体验值。
+{% endAside %}
+
+### 实测工具
+
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [搜索控制台（核心 Web 指标报告）](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)
+
+### 实验室工具
+
+- [Chrome 开发者工具](https://developer.chrome.com/docs/devtools/)
+- [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [WebPageTest 网页性能测试工具](https://webpagetest.org/)
+
+### 在 JavaScript 中测量 CLS
+
+{% BrowserCompat 'api.LayoutShift' %}
+
+要在 JavaScript 中测量 CLS，您可以使用[布局不稳定性 API](https://github.com/WICG/layout-instability)。以下示例说明了如何创建一个[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)来侦听意外`layout-shift`条目、将条目按会话分组、记录最大会话值，并在最大会话值发生改变时更新记录。
+
+```js
+let clsValue = 0;
+let clsEntries = [];
+
+let sessionValue = 0;
+let sessionEntries = [];
+
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    // 只将不带有最近用户输入标志的布局偏移计算在内。
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // 如果条目与上一条目的相隔时间小于 1 秒且
+      // 与会话中第一个条目的相隔时间小于 5 秒，那么将条目
+      // 包含在当前会话中。否则，开始一个新会话。
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // 如果当前会话值大于当前 CLS 值，
+      // 那么更新 CLS 及其相关条目。
+      if (sessionValue > clsValue) {
+        clsValue = sessionValue;
+        clsEntries = sessionEntries;
+
+        // 将更新值（及其条目）记录在控制台中。
+        console.log('CLS:', clsValue, clsEntries)
+      }
+    }
+  }
+}).observe({type: 'layout-shift', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+上述代码说明了计算和记录 CLS 的基本方法。但是，要想准确测量 CLS，使之与[Chrome 用户体验报告](https://developer.chrome.com/docs/crux/) (CrUX) 中的测量值相匹配，那么测量方式要更为复杂。详情请见下文：
+
+{% endAside %}
+
+在大多数情况下，页面卸载时的当前 CLS 值就是该页面的最终 CLS 值，但有一些重要的例外：
+
+以下部分列出了 API 报告的内容与指标计算方式之间的差异。
+
+#### 指标和 API 之间的差异
+
+- 如果页面是在后台加载的，或者页面在浏览器绘制任何内容之前被转移到后台，那么该页面不应该报告任何 CLS 值。
+- 如果页面通过[往返缓存](/bfcache/#impact-on-core-web-vitals)恢复，则该页面的 CLS 值应重置为零，因为这对用户来说是多次不同的页面访问体验。
+- API 不会基于 iframe 中的偏移来报告`layout-shift`条目，但要想正确测量 CLS，您应该考虑这些偏移。子框架可以使用 API 将这些偏移的`layout-shift`条目报告给父框架来进行[聚合](https://github.com/WICG/layout-instability#cumulative-scores)。
+
+由于 CLS 的测量对象是整个页面生命周期，所以除了上述这些例外，该指标还有一些额外的复杂性：
+
+- 用户可能会在*很*长一段时间内（几天、几周、几个月）让一个选项卡保持打开状态。事实上，用户可能永远不会关闭该选项卡。
+- 在移动操作系统上，浏览器通常不会为后台选项卡运行页面卸载回调，因为这样很难报告"最终"值。
+
+为了应对这些情况，只要当页面处于后台时就应该报告 CLS，页面卸载时也是如此（[`visibilitychange`事件](https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange)涵盖这两种情况）。而接收该数据的分析系统则需要在后端计算最终的 CLS 值。
+
+开发者不必记住所有这些情况并独自应付，而是可以使用[`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)来测量 CLS，库会自行处理上述所有情况：
+
+```js
+import {onCLS} from 'web-vitals';
+
+// 在所有需要汇报 CLS 的情况下
+// 对其进行测量和记录。
+onCLS(console.log);
+```
+
+您可以参考[`onCLS)`的源代码](https://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts)，了解如何在 JavaScript 中测量 CLS 的完整示例。
+
+{% Aside %}在某些情况下（例如跨域 iframe），CLS 无法在 JavaScript 中进行测量。详情请参阅`web-vitals`库的[局限性](https://github.com/GoogleChrome/web-vitals#limitations)部分。 {% endAside %}
+
+## 如何改进 CLS
+
+对于大多数网站来说，您可以通过遵循一些指导原则来避免所有的意外布局偏移：
+
+- **始终在您的图像和视频元素上包含尺寸属性，或者通过使用[CSS 长宽比容器](https://css-tricks.com/aspect-ratio-boxes/)之类的方式预留所需的空间。**这种方法可以确保浏览器能够在加载图像期间在文档中分配正确的空间大小。请注意，您还可以使用[unsized-media 功能策略](https://github.com/w3c/webappsec-feature-policy/blob/master/policies/unsized-media.md)在支持功能策略的浏览器中强制执行此行为。
+- **除非是对用户交互做出响应，否则切勿在现有内容的上方插入内容。**这样能够确保发生的任何布局偏移都在预期之内。
+- **首选转换动画，而不是触发布局偏移的属性动画。**动画过渡的目标是提供状态与状态之间的上下文连续性。
+
+如需深入了解如何改进 CLS，请参阅[优化 CLS](/optimize-cls/)和[调试布局偏移](/debug-layout-shifts)。
+
+## 其他资源
+
+- Google 发布商代码关于[最小化布局偏移](https://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift)的指南
+- [安妮·沙利文 (Annie Sullivan)](https://anniesullie.com/)与[史蒂夫·科比斯 (Steve Kobes)](https://kobes.ca/)在[#PerfMatters](https://perfmattersconf.com/)上发表的演讲：[《了解累积布局偏移》](https://youtu.be/zIJuY-JCjqw)(2020)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/zh/metrics/custom-metrics/index.md b/src/site/content/zh/metrics/custom-metrics/index.md
new file mode 100644
index 00000000000..e4ee1ab55b6
--- /dev/null
+++ b/src/site/content/zh/metrics/custom-metrics/index.md
@@ -0,0 +1,346 @@
+---
+layout: post
+title: 自定义指标
+authors:
+  - philipwalton
+date: 2019-11-08
+description: 自定义指标可用于对您的网站独有的使用体验的各个方面进行衡量和优化。
+tags:
+  - performance
+  - metrics
+---
+
+[以用户为中心的指标](/user-centric-performance-metrics/)具有很大价值，从普遍意义上，通过它们可以衡量任何给定网站。这些指标允许您：
+
+- 了解真实用户对 Web 的整体体验如何
+- 轻松比较您的网站与竞争对手网站
+- 在分析工具中跟踪有用且可操作的数据，无需编写自定义代码
+
+通用指标提供了一个很好的基线，但在许多情况下，您需要测量*更多*指标，才能刻画出具体网站的完整体验。
+
+自定义指标允许您衡量可能仅适用于您的网站的使用体验的各个方面，例如：
+
+- 单页面应用程序 (SPA) 从一“页”转换到另一“页”需要多长时间
+- 页面针对登录用户显示从数据库获取的数据需要多长时间
+- 服务器端渲染 (SSR) 应用程序需要多长时间才能[注水](https://addyosmani.com/blog/rehydration/)
+- 回访者加载资源的缓存命中率
+- 游戏中点击或键盘事件的事件延迟
+
+## 用于测量自定义指标的 API
+
+从历史上看，Web 开发人员没有很多低级 API 可用来衡量性能，因此他们不得不采用一些修改技巧才能衡量网站的性能是否良好。
+
+例如，可以运行 `requestAnimationFrame` 循环并计算相邻帧之间的增量时间，来确定主线程是否由于长时间运行 JavaScript 任务而被阻塞。如果增量时间明显长于显示帧率，则可以将其报告为一个长任务。但是，不建议使用此类修改技巧，因为实际上它们本身就会影响性能（例如，耗尽电池电量）。
+
+有效的性能测量的第一条规则是确保性能测量技术本身不会导致性能问题。因此，对于在网站上测量的任何自定义指标，如果可能，最好使用以下 API 之一。
+
+### 性能观察器
+
+了解 PerformanceObserver API 对于创建自定义性能指标至关重要，因为它是从本文讨论的所有其他性能 API 获取数据的机制。
+
+利用 `PerformanceObserver`，可以被动订阅与性能相关的事件，这意味着这些 API 通常不会干扰页面的性能，因为它们的回调通常在[空闲期间](https://w3c.github.io/requestidlecallback/#idle-periods)触发。
+
+创建 `PerformanceObserver` 的方式是，向其传递一个只要分派新的性能条目就会运行的回调。然后告诉该观察器要通过 [`observe()`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver/observe) 方法监听哪些类型的条目：
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+
+  po.observe({type: 'some-entry-type'});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+以下各部分列出了所有可进行观察的不同条目类型，但在较新的浏览器中，您可以通过静态 [`PerformanceObserver.supportedEntryTypes`](https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute) 属性检查哪些条目类型可用。
+
+{% Aside %} 传递给 `observe()` 方法的对象还可以指定一个 `entryTypes` 数组（以便通过同一个观察器观察多个条目类型）。虽然指定 `entryTypes` 是具有更广泛浏览器支持的旧选项，但现在优先使用 `type`，因为它允许指定额外的特定于条目的观察配置（例如 `buffered` 标志，接下来会讨论）。{% endAside %}
+
+#### 观察已经发生的条目
+
+默认情况下， `PerformanceObserver` 对象只能在条目发生时观察它们。如果您想要延迟加载性能分析代码（为了不阻止优先级更高的资源），这可能会出现问题。
+
+要获取历史条目（在它们发生之后），请在调用 `observe()` 时将 `buffered` 标志设置为 `true`。浏览器将在第一次调用 `PerformanceObserver` 回调时包括其[性能条目缓冲区](https://w3c.github.io/performance-timeline/#dfn-performance-entry-buffer)中的历史条目。
+
+```js
+po.observe({
+  type: 'some-entry-type',
+  buffered: true,
+});
+```
+
+{% Aside %} 为避免出现内存问题，性能条目缓冲区不是无限制的。对于大多数典型的页面加载，不太可能出现缓冲区填满和丢失条目的情况。{% endAside %}
+
+#### 要避免使用的旧版性能 API
+
+在性能观察器 API 之前，开发人员可以使用 [`performance`](https://w3c.github.io/performance-timeline/) 对象中定义的以下三种方法访问性能条目：
+
+- [`getEntries()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntries)
+- [`getEntriesByName()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByName)
+- [`getEntriesByType()`](https://developer.mozilla.org/docs/Web/API/Performance/getEntriesByType)
+
+虽然这些 API 仍然受支持，但不建议使用它们，因为它们不允许监听何时发出新条目。此外，许多新的 API（例如 Long Tasks）不通过 `performance` 对象公开，而只通过 `PerformanceObserver` 公开。
+
+除非您明确需要 Internet Explorer 兼容性，否则最好在代码中避免使用这些方法，而是使用 `PerformanceObserver`。
+
+### User Timing API
+
+[User Timing API](https://w3c.github.io/user-timing/) 是基于时间的指标的通用测量 API。它允许您任意标记时间点，然后测量这些标记之间的时长。
+
+```js
+// Record the time immediately before running a task.
+performance.mark('myTask:start');
+await doMyTask();
+// Record the time immediately after running a task.
+performance.mark('myTask:end');
+
+// Measure the delta between the start and end of the task
+performance.measure('myTask', 'myTask:start', 'myTask:end');
+```
+
+虽然 `Date.now()` 或 `performance.now()` 等 API 可以提供相似功能，但使用 User Timing API 的好处是它可以与性能工具很好地集成。例如，Chrome DevTools 可以使 [Performance 面板中的 User Timing 测量值](https://developers.google.com/web/updates/2018/04/devtools#tabs)可视化，而且许多分析提供商还会自动跟踪您所做的任何测量，并将时长数据发送到他们的分析后端。
+
+要报告 User Timing 测量值，您可以使用 [PerformanceObserver](#performance-observer) 并注册以观察 `measure` 类型的条目：
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `measure` entries to be dispatched.
+  po.observe({type: 'measure', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Long Tasks API
+
+[Long Tasks API](https://w3c.github.io/longtasks/) 用于了解浏览器主线程的阻塞时间何时长到足以影响帧率或输入延迟。目前，该 API 将报告执行时间超过 50 毫秒 (ms) 的任何任务。
+
+任何时候您需要运行开销大的代码（或加载和执行大型脚本）时，跟踪该代码是否阻塞主线程都是很有用的。事实上，许多较高级别的指标都是建立在 Long Tasks API 上的（例如 [Time to Interactive (TTI)](/tti/) 和 [Total Blocking Time (TBT)](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)）。
+
+要确定何时发生长任务，您可以使用 [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) 并注册以观察 `longtask` 类型的条目：
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `longtask` entries to be dispatched.
+  po.observe({type: 'longtask', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Element Timing API
+
+[Largest Contentful Paint (LCP)](/lcp/) 指标用于了解最大的图像或文本块何时绘制到屏幕上，但在某些情况下，您希望测量不同元素的渲染时间。
+
+对于这些情况，您可以使用 [Element Timing API](https://wicg.github.io/element-timing/)。实际上，Largest Contentful Paint API 建立在 Element Timing API 之上，并添加了对最大内容元素的自动报告，但是您可以通过显式添加 `elementtiming` 属性来报告其他元素，并注册一个 PerformanceObserver 来观察元素条目类型。
+
+```html
+<img elementtiming="hero-image" />
+<p elementtiming="important-paragraph">This is text I care about.</p>
+...
+<script>
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((entryList) => {
+    for (const entry of entryList.getEntries()) {
+      // Log the entry and all associated details.
+      console.log(entry.toJSON());
+    }
+  });
+  // Start listening for `element` entries to be dispatched.
+  po.observe({type: 'element', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+</script>
+```
+
+{% Aside 'gotchas' %} 针对 Largest Contentful Paint 考虑的元素类型与可通过 Element Timing API 观察的元素类型相同。如果您将 `elementtiming` 属性添加到不属于这些类型的元素，该属性将被忽略。{% endAside %}
+
+### Event Timing API
+
+[First Input Delay (FID)](/fid/) 指标测量从用户首次与页面交互到浏览器实际能够开始处理事件处理程序以响应该交互的时间。但是，在某些情况下，测量事件处理时间本身以及直到可以渲染下一帧之前的时间也可能很有用。
+
+这可以通过 [Event Timing API](https://wicg.github.io/event-timing/)（用于测量 FID）实现，因为它公开了事件生命周期中的许多时间戳，包括：
+
+- [`startTime`](https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime)：浏览器接收到事件的时间。
+- [`processingStart`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart)：浏览器能够开始针对该事件处理事件处理程序时的时间。
+- [`processingEnd`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingend)：浏览器完成执行事件处理程序针对该事件启动的所有同步代码时的时间。
+- [`duration`](https://wicg.github.io/event-timing/#dom-performanceeventtiming-processingstart)：浏览器收到事件直到它能够在完成执行从事件处理程序启动的所有同步代码后绘制下一帧时的时间（出于安全原因，四舍五入到 8 毫秒）。
+
+以下示例显示了如何使用这些值来创建自定义测量：
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  const po = new PerformanceObserver((entryList) => {
+    const firstInput = entryList.getEntries()[0];
+
+    // Measure First Input Delay (FID).
+    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
+
+    // Measure the time it takes to run all event handlers
+    // Note: this does not include work scheduled asynchronously using
+    // methods like `requestAnimationFrame()` or `setTimeout()`.
+    const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart;
+
+    // Measure the entire duration of the event, from when input is received by
+    // the browser until the next frame can be painted after processing all
+    // event handlers.
+    // Note: similar to above, this value does not include work scheduled
+    // asynchronously using `requestAnimationFrame()` or `setTimeout()`.
+    // And for security reasons, this value is rounded to the nearest 8ms.
+    const firstInputDuration = firstInput.duration;
+
+    // Log these values the console.
+    console.log({
+      firstInputDelay,
+      firstInputProcessingTime,
+      firstInputDuration,
+    });
+  });
+
+  po.observe({type: 'first-input', buffered: true});
+} catch (error) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Resource Timing API
+
+[Resource Timing API](https://w3c.github.io/resource-timing/) 使开发人员可以详细了解特定页面的资源是如何加载的。尽管该 API 的名称如此，但它提供的信息不局限于计时数据（虽然有[大量该数据](https://w3c.github.io/resource-timing/#processing-model)）。您可以访问的其他数据包括：
+
+- [initiatorType](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype)：资源的获取方式：例如从 `<script>` 或 `<link>` 标签，或者通过 `fetch()` 获取
+- [nextHopProtocol](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-nexthopprotocol)：用于获取资源的协议，例如 `h2` 或 `quic`
+- [encodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-encodedbodysize)/[decodedBodySize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-decodedbodysize)：资源的编码或解码形式的大小（分别列出）
+- [transferSize](https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-transfersize)：实际通过网络传输的资源的大小。当资源通过缓存实现时，该值可能比 `encodedBodySize` 小得多，在某些情况下还可能为零（如果不需要缓存重验证）。
+
+请注意，您可以使用资源计时条目的 `transferSize` 属性来测量*缓存命中率*指标，甚至可以测量*总缓存资源大小*指标，在了解您的资源缓存策略对重复访问者的性能有何影响时，这些指标可能很有用。
+
+以下示例记录了页面请求的所有资源，并指示每个资源是否通过缓存实现。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log(entry.name, entry.transferSize === 0);
+    }
+  });
+  // Start listening for `resource` entries to be dispatched.
+  po.observe({type: 'resource', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Navigation Timing API
+
+[Navigation Timing API](https://w3c.github.io/navigation-timing/) 类似于 Resource Timing API，但它只报告[导航请求](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests)。`navigation` 条目类型也类似于 `resource` 条目类型，但它包含一些仅特定于导航请求的[附加信息](https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming)（例如 `DOMContentLoaded` 和 `load` 事件何时触发）。
+
+被许多开发人员跟踪以了解服务器响应时间 ([Time to First Byte](https://en.wikipedia.org/wiki/Time_to_first_byte)) 的一个指标可通过 Navigation Timing API 获得 - 具体来说，是条目的 `responseStart` 时间戳。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // If transferSize is 0, the resource was fulfilled via the cache.
+      console.log('Time to first byte', entry.responseStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+使用服务工作进程的开发人员可能关心的另一个指标是导航请求的服务工作进程启动时间。这是浏览器在可以开始拦截 fetch 事件之前启动服务工作进程所花费的时间。
+
+特定导航请求的服务工作进程启动时间可以通过 `entry.responseStart` 和 `entry.workerStart` 之间的增量时间来确定。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      console.log('Service Worker startup time:',
+          entry.responseStart - entry.workerStart);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
+
+### Server Timing API
+
+[Server Timing API](https://w3c.github.io/server-timing/) 允许您通过响应标头将特定于请求的计时数据从服务器传递到浏览器。例如，您可以指示在数据库中查找特定请求的数据所花费的时间 - 在调试由于服务器速度缓慢而导致的性能问题时，这可能很有用。
+
+对于使用第三方分析提供商的开发人员来说，Server Timing API 是将服务器性能数据与这些分析工具可能测量的其他业务指标相关联的唯一方法。
+
+要在响应中指定服务器计时数据，可以使用 `Server-Timing` 响应标头。以下是一个示例。
+
+```http
+HTTP/1.1 200 OK
+
+Server-Timing: miss, db;dur=53, app;dur=47.2
+```
+
+然后，在页面中，可以从 Resource Timing 和 Navigation Timing API 的 `resource` 或 `navigation` 中读取此数据。
+
+```js
+// Catch errors since some browsers throw when using the new `type` option.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  // Create the performance observer.
+  const po = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      // Logs all server timing data for this response
+      console.log('Server Timing', entry.serverTiming);
+    }
+  });
+  // Start listening for `navigation` entries to be dispatched.
+  po.observe({type: 'navigation', buffered: true});
+} catch (e) {
+  // Do nothing if the browser doesn't support this API.
+}
+```
diff --git a/src/site/content/zh/metrics/fcp/index.md b/src/site/content/zh/metrics/fcp/index.md
new file mode 100644
index 00000000000..35786b08c90
--- /dev/null
+++ b/src/site/content/zh/metrics/fcp/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: First Contentful Paint 首次内容绘制 (FCP)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-10-19
+description: 本篇文章介绍了首次内容绘制 (FCP) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}首次内容绘制 (FCP) 是测量[感知加载速度](/user-centric-performance-metrics/#types-of-metrics)的一个以用户为中心的重要指标，因为该项指标会在用户首次在屏幕上看到任何内容时，在页面加载时间轴中标记出相应的点，迅捷的 FCP 有助于让用户确信某些事情正在[进行](/user-centric-performance-metrics/#questions)。{% endAside %}
+
+## 什么是 FCP？
+
+首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、`<svg>`元素或非白色的`<canvas>`元素。
+
+{% Img src="image/admin/3UhlOxRc0j8Vc4DGd4dt.png", alt="来自 google.com 的 FCP 时间轴", width="800", height="311", linkTo=true %}
+
+在上方的加载时间轴中，FCP 发生在第二帧，因为那是首批文本和图像元素在屏幕上完成渲染的时间点。
+
+您会注意到，虽然部分内容已完成渲染，但并非所有内容都已经完成渲染。这是*首次*内容绘制 (FCP) 与*[Largest Contentful Paint 最大内容绘制 (LCP)](/lcp/)*（旨在测量页面的主要内容何时完成加载）之间的重要区别。
+
+<picture>
+  <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="良好的 FCP 值是 1.8 秒或更短，差的值大于 3.0 秒，中间的任何东西都需要改进", width="400", height="300" %}
+</picture>
+
+### 怎样算是良好的 FCP 分数？
+
+为了提供良好的用户体验，网站应该努力将首次内容绘制控制在**1.8 秒**或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的**第 75 个百分位数**，且该阈值同时适用于移动和桌面设备。
+
+## 如何测量 FCP
+
+FCP 可以进行[实验室](/user-centric-performance-metrics/#in-the-lab)测量或[实际](/user-centric-performance-metrics/#in-the-field)测量，并且可以在以下工具中使用：
+
+### 实测工具
+
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)
+- [搜索控制台（速度报告](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)
+- [`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)
+
+### 实验室工具
+
+- [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Chrome 开发者工具](https://developer.chrome.com/docs/devtools/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+
+### 在 JavaScript 中测量 FCP
+
+{% BrowserCompat 'api.PerformancePaintTiming' %}
+
+要在 JavaScript 中测量 FCP，您可以使用[绘制计时 API](https://w3c.github.io/paint-timing/)。以下示例说明了如何创建一个[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)来侦听名称为`first-contentful-paint`的`paint`条目并记录在控制台中。
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
+    console.log('FCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+上述代码说明了如何将`first-contentful-paint`条目记录在控制台中，但在 JavaScript 中测量 FCP 要更为复杂。详情请见下文：
+
+{% endAside %}
+
+在上方的示例中，已记录的`first-contentful-paint`条目会告诉您首个内容元素的绘制时间点。但在某些情况下，该条目并不能够用来测量 FCP。
+
+以下部分列出了 API 报告的内容与指标计算方式之间的差异。
+
+#### 指标和 API 之间的差异
+
+- API 会为在后台选项卡中加载的页面分发`first-contentful-paint`条目，但在计算 FCP 时应忽略这些页面（只有当页面始终处于前台时才应考虑首次绘制的时机）。
+- 当页面通过[往返缓存](/bfcache/#impact-on-core-web-vitals)恢复时，API 不会报告`first-contentful-paint`条目，但在这些情况下应该测量 FCP，因为这对用户来说是多次不同的页面访问体验。
+- API [可能不会报告跨域 iframe 中的绘制时机](https://w3c.github.io/paint-timing/#:~:text=cross-origin%20iframes)，但要想正确测量 FCP，您应该考虑所有框架的情况。子框架可以使用 API 将这些框架的绘制时机报告给父框架来进行聚合。
+
+开发者不必记住所有这些细微差异，而是可以使用[`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)来测量 FCP，库会自行处理这些差异（在可能的情况下）：
+
+```js
+import {onFCP} from 'web-vitals';
+
+// 当 FCP 可用时立即进行测量和记录。
+onFCP(console.log);
+```
+
+您可以参考[`onFCP()`的源代码](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFCP.ts)，了解如何在 JavaScript 中测量 FCP 的完整示例。
+
+{% Aside %}
+在某些情况下（例如跨域 iframe），FCP 无法在 JavaScript 中进行测量。详情请参阅`web-vitals`库的[局限性](https://github.com/GoogleChrome/web-vitals#limitations)部分。
+{% endAside %}
+
+## 如何改进 FCP
+
+要了解如何改进某个特定网站的 FCP，您可以运行一次灯塔性能审计，并留心查看审计建议的各种具体[机会](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)或[诊断](https://developer.chrome.com/docs/lighthouse/performance/#diagnostics)。
+
+要了解改进 FCP 的常见方式（针对任何网站），请参阅以下性能指南：
+
+- [消除阻塞渲染的资源](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)
+- [缩小 CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)
+- [移除未使用的 CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)
+- [预连接到所需的来源](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [减少服务器响应时间 (TTFB)](/ttfb/)
+- [避免多个页面重定向](https://developer.chrome.com/docs/lighthouse/performance/redirects/)
+- [预加载关键请求](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [避免巨大的网络负载](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)
+- [使用高效的缓存策略服务静态资产](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/)
+- [避免 DOM 过大](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
+- [最小化关键请求深度](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [确保文本在网页字体加载期间保持可见](https://developer.chrome.com/docs/lighthouse/performance/font-display/)
+- [保持较低的请求数和较小的传输大小](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/zh/metrics/fid/index.md b/src/site/content/zh/metrics/fid/index.md
new file mode 100644
index 00000000000..ac5d590cc78
--- /dev/null
+++ b/src/site/content/zh/metrics/fid/index.md
@@ -0,0 +1,188 @@
+---
+layout: post
+title: First Input Delay 首次输入延迟 (FID)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2022-07-18
+description: 这篇文章介绍了首次输入延迟 (FID) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}首次输入延迟 (FID) 是测量[加载响应度](/user-centric-performance-metrics/#types-of-metrics)的一个以用户为中心的重要指标，因为该项指标将用户尝试与无响应页面进行交互时的体验进行了量化，低 FID 有助于让用户确信页面是[有效的](/user-centric-performance-metrics/#questions)。 {% endAside %}
+
+我们都知道给人留下良好的第一印象是多么重要。这不仅对于结识新朋友十分重要，在网络上塑造体验时也同样重要。
+
+在网络上，良好的第一印象能够决定人们会成为忠实用户，还是从此一去不回头。问题在于，什么样的体验能留下良好印象，而您又要如何衡量您给用户留下了怎样的印象？
+
+在网络上，第一印象可以有很多不同的形式，我们会对网站的设计和视觉吸引力形成第一印象，也会对网站的速度和响应度形成第一印象。
+
+虽然很难通过网页 API 来衡量用户对网站设计的喜爱程度，但网页 API 却可以轻松测量网站速度和响应度！
+
+用户对您的网站加载速度的第一印象可以通过[First Contentful Paint 首次内容绘制 (FCP)](/fcp/)进行测量。但是，您的网站在屏幕上绘制像素的速度只是其中一部分，同样重要的还有当用户试图与这些像素进行交互时，您的网站响应度有多高！
+
+首次输入延迟 (FID) 指标有助于衡量您的用户对网站交互性和响应度的第一印象。
+
+## 什么是 FID？
+
+FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="好的 fid 值为 2.5 秒，差的值大于 4.0 秒，中间的任何值都需要改进", width="400", height="300" %}
+</picture>
+
+### 怎样算是良好的 FID 分数？
+
+为了提供良好的用户体验，网站应该努力将首次输入延迟设控制在**100 毫秒**或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的**第 75 个百分位数**，且该阈值同时适用于移动和桌面设备。
+
+{% Aside %}如需详细了解这些建议值背后的研究和方法论，请参阅：[定义核心 Web 指标的指标阈值](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+## FID 详情
+
+作为编写事件响应代码的开发者，我们通常会假定代码会在事件发生时立即运行。但作为用户，我们都常常面临相反的情况，当我们在手机上加载了一个网页并试图与网页交互，接着却因为网页没有任何反应而感到沮丧。
+
+一般来说，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以（还）不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript 文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript 可能会让浏览器去执行其他工作。
+
+{% Aside 'gotchas' %} FID 只测量事件处理过程中的"延迟"。FID 既不测量事件处理本身所花费的时间，也不测量浏览器在运行事件处理程序后更新用户界面所花费的时间。虽然这些时间确实会影响用户体验，但如果将其作为 FID 的一部分，则会激励开发者对事件进行异步响应，这么做虽然能够改善指标，但多半会使体验变得更糟糕。请参阅下方的[为什么只考虑输入延迟](#why-only-consider-the-input-delay)获取更多详情。 {% endAside %}
+
+请看以下这条典型的网页加载时间轴：
+
+{% Img src="image/admin/9tm3f6pwlHMqNKuFvaP0.svg", alt="示例页面加载跟踪", width="800", height="260", linkTo=true %}
+
+上方的可视化图表中显示的是一个页面，该页面正在发出数个网络请求来获取资源（多为 CSS 和 JS 文件），这些资源下载完毕后，会在主线程上进行处理。
+
+这就导致主线程会阶段性地处于忙碌状态（在图中表示为米黄色[任务](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task)块）。
+
+较长的首次输入延迟通常发生在[首次内容绘制 (FCP)](/fcp/)和[Time to Interactive 可交互时间 (TTI)](/tti/)之间，因为在此期间，页面已经渲染出部分内容，但交互性还尚不可靠。为了说明这种情况的发生缘由，我们在时间轴中加入了 FCP 和 TTI：
+
+{% Img src="image/admin/24Y3T5sWNuZD9fKhkuER.svg", alt="带有 FCP 和 TTI 的示例页面加载跟踪", width="800", height="340", linkTo=true %}
+
+您可能已经注意到 FCP 和 TTI 之间有相当长的一段时间（包括三段[长任务](/custom-metrics/#long-tasks-api)），如果用户在这段时间内尝试与页面进行交互（例如单击一个链接），那么从浏览器接收到单击直至主线程能够响应之前就会有一段延迟。
+
+请看如果用户在最长的任务刚开始时就尝试与页面进行交互会发生什么：
+
+{% Img src="image/admin/krOoeuQ4TWCbt9t6v5Wf.svg", alt="带有 FCP、TTI 和 FID 的示例页面加载跟踪", width="800", height="380", linkTo=true %}
+
+因为输入发生在浏览器正在运行任务的过程中，所以浏览器必须等到任务完成后才能对输入作出响应。浏览器必须等待的这段时间就是这位用户在该页面上体验到的 FID 值。
+
+{% Aside %} 在这个示例中，用户恰好在主线程刚进入最繁忙的时段时与页面进行了交互。如果用户稍微提早一点（在空闲期间）与页面进行交互，那么浏览器就会立即响应。输入延迟上的这种差异强调了在报告指标时查看 FID 值分布的重要性。您可以阅读下方有关 FID 数据分析和报告的部分内容来了解更多相关信息。 {% endAside %}
+
+### 如果交互没有事件侦听器怎么办？
+
+FID 测量接收到输入事件的时间点与主线程下一次空闲的时间点之间的差值。这就意味着**即使在尚未注册事件侦听器的情况下，**FID 也会得到测量。这是因为许多用户交互的执行并不需要事件侦听器，但*一定*需要主线程处于空闲期。
+
+例如，在对用户交互进行响应前，以下所有 HTML 元素都需要等待主线程上正在进行的任务完成运行：
+
+- 文本字段、复选框和单选按钮 (`<input>` 、 `<textarea>`)
+- 下拉选择列表（`<select>`）
+- 链接 (`<a>`)
+
+### 为什么只考虑首次输入？
+
+虽然任何输入延迟都可能导致糟糕的用户体验，但我们主要建议您测量首次输入延迟，原因如下：
+
+- 首次输入延迟将会是用户对您网站响应度的第一印象，而第一印象对于塑造我们对网站质量和可靠性的整体印象至关重要。
+- 我们现如今在网络上看到的最大的交互性问题发生在页面加载期间。因此，我们认为首先侧重于改善网站的首次用户交互将对改善网络的整体交互性产生最大的影响。
+- 我们推荐网站针对较高的首次输入延迟采取的解决方案（代码拆分、减少 JavaScript 的预先加载量等）不一定与针对页面加载后输入延迟缓慢的解决方案相同。通过分离这些指标，我们将能够为网页开发者提供更确切的性能指南。
+
+### 哪些算是首次输入？
+
+FID 是测量页面加载期间响应度的指标。因此，FID 只关注不连续操作对应的输入事件，如点击、轻触和按键。
+
+其他诸如滚动和缩放之类的交互属于连续操作，具有完全不同的性能约束（而且，浏览器通常能够通过在单独的线程上执行这些操作来隐藏延迟）。
+
+换句话说，FID 侧重于[RAIL 性能模型](/rail/)中的 R（响应度），而滚动和缩放与 A（动画）更为相关，因此这些操作的性能质量应该单独进行评估。
+
+### 如果用户始终没有与您的网站进行交互怎么办？
+
+并非所有用户都会在每次访问您的网站时进行交互。而且也并不是所有交互都与 FID 相关（如上一节所述）。此外，一些用户的首次交互会处于不利的时间段内（当主线程长时间处于繁忙时），而另一些用户的首次交互会处于有利的时间段内（当主线程完全空闲时）。
+
+这意味着有些用户将没有 FID 值，有些用户的 FID 值较低，而有些用户的 FID 值可能较高。
+
+您对 FID 的跟踪、报告和分析方式可能与您惯常使用的其他指标十分不同。下一节将说明相应的最佳做法。
+
+### 为什么只考虑输入延迟？
+
+如上所述，FID 只测量事件处理过程中的"延迟"。FID 既不测量事件处理本身所花费的时间，也不测量浏览器在运行事件处理程序后更新用户界面所花费的时间。
+
+虽然这些时间对用户来说非常重要，也*确实*会影响用户体验，但这些时间并不包括在该项指标内，因为这样的做法可能会激励开发者加入变通方案，并因此导致体验变得更加糟糕，这里的意思是说，开发者可以将事件处理程序逻辑封装在一个异步回调中（通过`setTimeout()`或`requestAnimationFrame()`），从而将逻辑与事件关联的任务分离。最终的结果虽然能够提升指标分数，但会使用户感知到的响应速度变慢。
+
+不过，虽然 FID 只测量事件延时的"延迟"部分，但想要对事件生命周期进行更多跟踪的开发者可以使用[事件计时 API](https://wicg.github.io/event-timing/)来实现这一想法。如需更多详情，请参阅[自定义指标](/custom-metrics/#event-timing-api)的相关指导。
+
+## 如何测量 FID
+
+FID 是一个只能进行[实际](/user-centric-performance-metrics/#in-the-field)测量的指标，因为该项指标需要真实用户与您的页面进行交互。您可以使用以下工具测量 FID。
+
+{% Aside %} FID 需要真实用户，因此无法在实验室中进行测量。但是，[Total Blocking Time 总阻塞时间 (TBT)](/tbt/)指标不仅可以进行实验室测量，还与实际的 FID 关联性强，而且可以捕获影响交互性的问题。能够在实验室中改进 TBT 的优化也应该能为您的用户改进 FID。 {% endAside %}
+
+### 实测工具
+
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [搜索控制台（核心 Web 指标报告）](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)
+
+### 在 JavaScript 中测量 FID
+
+要在 JavaScript 中测量 FID，您可以使用[事件计时 API](https://wicg.github.io/event-timing)。以下示例说明了如何创建一个[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)来侦听[`first-input`](https://wicg.github.io/event-timing/#sec-performance-event-timing)条目并记录在控制台中：
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    const delay = entry.processingStart - entry.startTime;
+    console.log('FID candidate:', delay, entry);
+  }
+}).observe({type: 'first-input', buffered: true});
+```
+
+{% Aside 'warning' %} 上述代码说明了如何将`first-input`条目记录在控制台中并计算延迟。但是，在 JavaScript 中测量 FID 要更为复杂。详情请见下文：{% endAside %}
+
+在上方的示例中，`first-input`条目的延迟值是通过获取条目的`startTime`和`processingStart`时间戳之间的差值来测量的。在大多数情况下，这个差值就是 FID 值，然而，并非所有`first-input`条目都能够用来测量 FID。
+
+以下部分列出了 API 报告的内容与指标计算方式之间的差异。
+
+#### 指标和 API 之间的差异
+
+- API 会为在后台选项卡中加载的页面分发`first-input`条目，但在计算 FID 时应忽略这些页面。
+- 如果页面在首次输入发生前转移到后台，API 也会分发`first-input`条目，但在计算 FID 时仍应忽略这些页面（只有当页面始终处于前台时才考虑输入）。
+- 当页面通过[往返缓存](/bfcache/#impact-on-core-web-vitals)恢复时，API 不会报告`first-input`条目，但在这些情况下应该测量 FID，因为这对用户来说是多次不同的页面访问体验。
+- API 不会报告 iframe 中的输入，但要想正确测量 FID，您应该考虑这些输入。子框架可以使用 API 将这些输入的`first-input`条目报告给父框架来进行聚合。
+
+开发者不必记住所有这些细微差异，而是可以使用[`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)来测量 FID，库会自行处理这些差异（在可能的情况下）：
+
+```js
+import {onFID} from 'web-vitals';
+
+// 当 FID 可用时立即进行测量和记录。
+onFID(console.log);
+```
+
+您可以参考[`onFID)`的源代码](https://github.com/GoogleChrome/web-vitals/blob/main/src/onFID.ts)，了解如何在 JavaScript 中测量 FID 的完整示例。
+
+{% Aside %}在某些情况下（例如跨域 iframe），FID 无法在 JavaScript 中进行测量。详情请参阅`web-vitals`库的[局限性](https://github.com/GoogleChrome/web-vitals#limitations)部分。 {% endAside %}
+
+### 分析和报告 FID 数据
+
+由于 FID 值的预期差异，您必须在报告 FID 时查看值的分布并关注较高的百分位数，这一点至关重要。
+
+虽然所有核心 Web 指标阈值的[优选百分位数](/defining-core-web-vitals-thresholds/#choice-of-percentile)是第 75 个百分位数，但具体到 FID，我们仍然强烈建议您将阈值设置在第 95-99 个百分位数，因为这些百分位数对应于用户在您网站上经历的特别糟糕的首次体验，因而也能够让您获知最需要进行改进的地方。
+
+即使您按设备类别或类型对报告进行细分，也应该这样做。例如，如果您分别对桌面端和移动端进行报告，那么您最应该关注的桌面端 FID 值应该是桌面端用户的第 95-99 个百分位数，而您最应该关注的移动端 FID 值应该是移动端用户的第 95-99 个百分位数。
+
+## 如何改进 FID
+
+要了解如何改进某个特定网站的 FID，您可以运行一次灯塔性能审计，并留心查看审计建议的各种具体[机会](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)。
+
+虽然 FID 是一项实际指标（而灯塔是一个实验室指标工具），但改进 FID 的指导方向与改进[总阻塞时间 (TBT)](/tbt/)这项实验室指标的指导方向相同。
+
+如需深入了解如何改进 FID，请参阅[优化 FID](/optimize-fid/)。有关其他能够改进 FID 的单个性能技巧的进一步指导，请参阅：
+
+- [减少第三方代码的影响](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [减少 JavaScript 执行时间](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [最小化主线程工作](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [保持较低的请求数和较小的传输大小](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/zh/metrics/index.md b/src/site/content/zh/metrics/index.md
new file mode 100644
index 00000000000..6f019b93399
--- /dev/null
+++ b/src/site/content/zh/metrics/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: metrics
+---
diff --git a/src/site/content/zh/metrics/lcp/index.md b/src/site/content/zh/metrics/lcp/index.md
new file mode 100644
index 00000000000..6796714a2e4
--- /dev/null
+++ b/src/site/content/zh/metrics/lcp/index.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Largest Contentful Paint 最大内容绘制 (LCP)
+authors:
+  - philipwalton
+date: 2019-08-08
+updated: 2022-10-19
+description: 本篇文章介绍了最大内容绘制 (LCP) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}最大内容绘制 (LCP) 是测量[感知加载速度](/user-centric-performance-metrics/#types-of-metrics)的一个以用户为中心的重要指标，因为该项指标会在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点，迅捷的 LCP 有助于让用户确信页面是[有效的](/user-centric-performance-metrics/#questions)。 {% endAside %}
+
+长久以来，对于网页开发者来说，测量网页主要内容的加载速度和内容对用户的显示速度一直是一个挑战。
+
+诸如[load（加载）](https://developer.mozilla.org/docs/Web/Events/load)或[DOMContentLoaded（DOM 内容加载完毕）](https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded)这样的旧有指标并不是很好，因为这些指标不一定与用户在屏幕上看到的内容相对应。而像[First Contentful Paint 首次内容绘制 (FCP)](/fcp/)这类以用户为中心的较新性能指标只会捕获加载体验最开始的部分。如果某个页面显示的是一段启动画面或加载指示，那么这些时刻与用户的关联性并不大。
+
+我们以往推荐过一些性能指标，例如[First Meaningful Paint 首次有效绘制 (FMP)](https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/)和[Speed Index 速度指数 (SI)](https://developer.chrome.com/docs/lighthouse/performance/speed-index/) （两个指标都包含在灯塔工具中），这些指标有助于捕获到更多初始绘制后的加载体验，但这些指标十分复杂、难以解释，而且常常出错，也就意味着这些指标仍然无法识别出页面主要内容加载完毕的时间点。
+
+有时候简胜于繁。根据[W3C Web 性能工作组](https://www.w3.org/webperf/)的讨论以及 Google 进行的研究，我们发现更准确地测量页面主要内容加载完毕的时间点的方法是查看最大元素完成渲染的时间点。
+
+## 什么是 LCP？
+
+最大内容绘制 (LCP) 指标会根据页面[首次开始加载](https://w3c.github.io/hr-time/#timeorigin-attribute)的时间点来报告可视区域内可见的最大[图像或文本块](#what-elements-are-considered)完成渲染的相对时间。
+
+<picture>
+  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
+  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="良好的 LCP 值为 2.5 秒，较差的值大于 4.0 秒，两者之间的任何东西都需要改进", width="400", height="300" %}
+</picture>
+
+### 怎样算是良好的 LCP 分数？
+
+为了提供良好的用户体验，网站应该努力将最大内容绘制控制在**2.5 秒**或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的**第 75 个百分位数**，且该阈值同时适用于移动和桌面设备。
+
+{% Aside %}如需详细了解这些建议值背后的研究和方法论，请参阅：[定义核心 Web 指标的指标阈值](/defining-core-web-vitals-thresholds/) {% endAside %}
+
+### 哪些元素在考量范围内？
+
+根据当前[最大内容绘制 API](https://wicg.github.io/largest-contentful-paint/)中的规定，最大内容绘制考量的元素类型为：
+
+- `<img>`元素
+- 内嵌在`<svg>`元素内的`<image>`元素
+- `<video>`元素（使用封面图像）
+- 通过[`url()`](https://developer.mozilla.org/docs/Web/CSS/url())函数（而非使用[CSS 渐变](https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients)）加载的带有背景图像的元素
+- 包含文本节点或其他行内级文本元素子元素的[块级元素](https://developer.mozilla.org/docs/Web/HTML/Block-level_elements)。
+
+请注意，为了在初始阶段保持简洁，我们有意将元素限制在这几个有限的类型中。随着研究的深入，未来可能会添加其他元素（例如`<svg>` 、 `<video>`）。
+
+### 如何确定一个元素的大小？
+
+报告给最大内容绘制的元素大小通常是用户在可视区域内可见的大小。如果有元素延伸到可视区域之外，或者任何元素被剪裁或包含不可见的[溢出](https://developer.mozilla.org/docs/Web/CSS/overflow)，则这些部分不计入元素大小。
+
+对于在[原始尺寸](https://developer.mozilla.org/docs/Glossary/Intrinsic_Size)之上经过调整的图像元素，报告给指标的元素大小为可见尺寸或原始尺寸，以尺寸较小者为准。例如，远小于其原始尺寸的缩小图像将仅报告图像的显示尺寸，而拉伸或放大成更大尺寸的图像将仅报告图像的原始尺寸。
+
+对于文本元素，指标仅考量其文本节点的大小（包含所有文本节点的最小矩形）。
+
+对于所有元素，通过 CSS 设置的任何边距、填充或边框都不在考量范围内。
+
+{% Aside %} 确定哪些文本节点属于哪些元素有时会很棘手，尤其是对于子元素既包括行内元素和纯文本节点，又包括块级元素的一部分元素。关键点在于每个文本节点都属于（且仅属于）其最近的块级祖先元素。用[规范术语](https://wicg.github.io/element-timing/#set-of-owned-text-nodes)来解释：每个文本节点都属于生成其[包含块](https://developer.mozilla.org/docs/Web/CSS/Containing_block)的对应元素。 {% endAside %}
+
+### 何时报告最大内容绘制？
+
+网页通常是分阶段加载的，因此，页面上的最大元素也可能会发生变化。
+
+为了应对这种潜在的变化，浏览器会在绘制第一帧后立即分发一个`largest-contentful-paint`类型的[`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)，用于识别最大内容元素。但是，在渲染后续帧之后，浏览器会在最大内容元素发生变化时分发另一个[`PerformanceEntry`](https://developer.mozilla.org/docs/Web/API/PerformanceEntry)。
+
+例如，在一个带有文本和首图的网页上，浏览器最初可能只渲染文本部分，并在此期间分发一个`largest-contentful-paint`条目，其`element`属性通常会引用一个`<p>`或`<h1>` 。随后，一旦首图完成加载，浏览器就会分发第二个`largest-contentful-paint`条目，其`element`属性将引用`<img>` 。
+
+需要注意的是，一个元素只有在渲染完成并且对用户可见后才能被视为最大内容元素。尚未加载的图像不会被视为"渲染完成"。 在[字体阻塞期](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline)使用网页字体的文本节点亦是如此。在这种情况下，较小的元素可能会被报告为最大内容元素，但一旦更大的元素完成渲染，就会通过另一个`PerformanceEntry`对象进行报告。
+
+除了延迟加载图像和字体之外，页面可能会在新内容可用时向 DOM 添加新元素。如果有任意一个新元素大于先前的最大内容元素，则浏览器还将报告一个新的`PerformanceEntry`。
+
+如果当前的最大内容元素从可视区域被移除（甚至从 DOM 中被移除），那么除非有一个更大的元素完成渲染，否则该元素将持续作为最大内容元素。
+
+{% Aside %} 在 Chrome 88 之前，已移除的元素不会被视为最大内容元素，而移除当前候选对象时会触发浏览器分发一个新的`largest-contentful-paint`条目。但是，该项指标已经针对流行的用户界面模式（例如经常将 DOM 元素移除的图像轮播）进行了更新，进而更准确地反映用户体验。请参阅[更新日志](https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md) ，了解更多详情。{% endAside %}
+
+当用户与页面进行交互（通过轻触、滚动或按键）时，浏览器将立刻停止报告新条目，因为用户交互通常会改变用户可见的内容（滚动操作时尤其如此）。
+
+出于分析目的，您应该仅向您的分析服务报告最近一次分发的`PerformanceEntry`。
+
+{% Aside 'caution' %}由于用户可以在后台选项卡中打开页面，而用户聚焦该选项卡的时间点可能远远晚于第一次加载页面的时间点，因此在用户聚焦该选项卡之前可能不会进行最大内容绘制。 {% endAside %}
+
+#### 加载时间 vs. 渲染时间
+
+出于安全考虑，对于缺少[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin)标头的跨域图像来说，图像的渲染时间戳不会得到公开。相反，只有图像的加载时间会得到公开（因为加载时间已经通过其他许多网页 API 得到了公开）。
+
+下方的[使用示例](#measure-lcp-in-javascript)说明了如何处理渲染时间不可用的元素。但是，我们始终建议您在可能的情况下设置好[`Timing-Allow-Origin`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin)标头，从而使您的指标更加准确。
+
+### 如何处理元素布局和元素大小更改？
+
+为了使计算和分发新性能条目的性能开销保持较低的水平，对元素大小或位置的更改不会生成新的 LCP 候选对象。只有元素在可视区域内的初始大小和位置会被纳入考量范围。
+
+也就是说，最初在屏幕外完成渲染，然后过渡到屏幕上的图像可能不会得到报告。这也意味着最初在可视区域内进行渲染，然后被推出可视区域外的元素仍将报告其在可视区域内的初始大小。
+
+### 示例
+
+以下示例展示了一些热门网站上出现最大内容绘制的时间点：
+
+{% Img src="image/admin/bsBm8poY1uQbq7mNvVJm.png", alt="来自 cnn.com 的最大内容绘制时间轴", width="800", height="311" %}
+
+{% Img src="image/admin/xAvLL1u2KFRaqoZZiI71.png", alt="来自 techcrunch.com 的最大内容绘制时间轴", width="800", height="311" %}
+
+在上方的两个时间轴中，最大元素随内容加载而变化。在第一个示例中，新内容被添加进 DOM，并因此使最大元素发生了改变。在第二个示例中，由于布局的改变，先前的最大内容从可视区域中被移除。
+
+虽然延迟加载的内容通常比页面上已有的内容更大，但实际情况并非一定如此。接下来的两个示例显示了在页面完全加载之前出现的最大内容绘制。
+
+{% Img src="image/admin/uJAGswhXK3bE6Vs4I5bP.png", alt="来自 instagram.com 的最大内容绘制时间轴", width="800", height="311" %}
+
+{% Img src="image/admin/e0O2woQjZJ92aYlPOJzT.png", alt="来自 google.com 的最大内容绘制时间轴", width="800", height="311" %}
+
+在第一个示例中，Instagram 标志加载得相对较早，即使其他内容随后陆续显示，但标志始终是最大元素。在 Google 搜索结果页面示例中，最大元素是一段文本，这段文本在所有图像或标志完成加载之前就显示了出来。由于所有单个图像都小于这段文字，因此这段文字在整个加载过程中始终是最大元素。
+
+{% Aside %} 在 Instagram 时间轴的第一帧中，您可能注意到了相机标志的周围没有用绿框框出。这是因为该标志是一个`<svg>`元素，而`<svg>`元素目前不被视为 LCP 候选对象。首个 LCP 候选对象是第二帧中的文本。 {% endAside %}
+
+## 如何测量 LCP
+
+LCP 可以进行[实验室](/user-centric-performance-metrics/#in-the-lab)测量或[实际](/user-centric-performance-metrics/#in-the-field)测量，并且可以在以下工具中使用：
+
+### 实测工具
+
+- [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [搜索控制台（核心 Web 指标报告）](https://support.google.com/webmasters/answer/9205520)
+- [`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)
+
+### 实验室工具
+
+- [Chrome 开发者工具](https://developer.chrome.com/docs/devtools/)
+- [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)
+- [PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)
+- [WebPageTest 网页性能测试工具](https://webpagetest.org/)
+
+### 在 JavaScript 中测量 LCP
+
+{% BrowserCompat 'api.LargestContentfulPaint' %}
+
+要在 JavaScript 中测量 LCP，您可以使用[最大内容绘制 API](https://wicg.github.io/largest-contentful-paint/) 。以下示例说明了如何创建一个[`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)来侦听`largest-contentful-paint`条目并记录在控制台中。
+
+```js
+new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    console.log('LCP candidate:', entry.startTime, entry);
+  }
+}).observe({type: 'largest-contentful-paint', buffered: true});
+```
+
+{% Aside 'warning' %}
+
+上述代码说明了如何将`largest-contentful-paint`条目记录在控制台中，但在 JavaScript 中测量 LCP 要更为复杂。详情请见下文：
+
+{% endAside %}
+
+在上方的示例中，每条记录在案的`largest-contentful-paint`条目代表当前的 LCP 候选对象。通常情况下，最近条目发射的`startTime`值就是 LCP 值，但情况并非总是如此。并不是所有的`largest-contentful-paint`条目都能够用来测量 LCP。
+
+以下部分列出了 API 报告的内容与指标计算方式之间的差异。
+
+#### 指标和 API 之间的差异
+
+- API 会为在后台选项卡中加载的页面分发`largest-contentful-paint`条目，但在计算 LCP 时应忽略这些页面。
+- API 在页面转移到后台后，会继续分发`largest-contentful-paint`条目，但在计算 LCP 时应忽略这些条目（只有当页面始终处于前台时才考虑元素）。
+- 当页面通过[往返缓存](/bfcache/#impact-on-core-web-vitals)恢复时，API 不会报告`largest-contentful-paint`条目，但在这些情况下应该测量 LCP，因为这对用户来说是多次不同的页面访问体验。
+- API 不考虑 iframe 中的元素，但要想正确测量 LCP，您应该考虑这些元素。子框架可以使用 API 将这些元素的`largest-contentful-paint`条目报告给父框架来进行聚合。
+
+开发者不必记住所有这些细微差异，而是可以使用[`web-vitals` JavaScript 库](https://github.com/GoogleChrome/web-vitals)来测量 LCP，库会自行处理这些差异（在可能的情况下）：
+
+```js
+import {onLCP} from 'web-vitals';
+
+// 当 LCP 可用时立即进行测量和记录。
+onLCP(console.log);
+```
+
+您可以参考[`onLCP()`的源代码](https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts)，了解如何在 JavaScript 中测量 LCP 的完整示例。
+
+{% Aside %}在某些情况下（例如跨域 iframe），LCP 无法在 JavaScript 中进行测量。详情请参阅`web-vitals`库的[局限性](https://github.com/GoogleChrome/web-vitals#limitations)部分。 {% endAside %}
+
+### 如果最大元素并非最重要元素该怎么办？
+
+在某些情况下，页面上最重要的元素（或多个元素）并不是最大元素，而开发者可能更有兴趣测量前者的渲染时间。这时候可以使用[元素计时 API](https://wicg.github.io/element-timing/)来实现，该 API 在关于[自定义指标](/custom-metrics/#element-timing-api)的文章中有所描述。
+
+## 如何改进 LCP
+
+LCP 主要受四个因素影响：
+
+- 缓慢的服务器响应速度
+- JavaScript 和 CSS 渲染阻塞
+- 资源加载时间
+- 客户端渲染
+
+如需深入了解如何改进 LCP，请参阅[优化 LCP](/optimize-lcp/)。有关其他能够改进 LCP 的单个性能技巧的进一步指导，请参阅：
+
+- [使用 PRPL 模式做到即时加载](/apply-instant-loading-with-prpl)
+- [优化关键渲染路径](/critical-rendering-path/)
+- [优化您的 CSS](/fast#optimize-your-css)
+- [优化您的图像](/fast#optimize-your-images)
+- [优化网页字体](/fast#optimize-web-fonts)
+- [优化您的 JavaScript](/fast#optimize-your-javascript)（针对客户端渲染的网站）
+
+## 其他资源
+
+- [安妮·沙利文 (Annie Sullivan)](https://perfnow.nl/)在[performance.now()](https://youtu.be/ctavZT87syI)上发表的演讲：[《从 Chrome 的性能监测工具中吸取的教训》](https://anniesullie.com/)(2019)
+
+{% include 'content/metrics/metrics-changelog.njk' %}
diff --git a/src/site/content/zh/metrics/tbt/index.md b/src/site/content/zh/metrics/tbt/index.md
new file mode 100644
index 00000000000..fd83aa15753
--- /dev/null
+++ b/src/site/content/zh/metrics/tbt/index.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Total Blocking Time 总阻塞时间 (TBT)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: 本篇文章介绍了总阻塞时间 (TBT) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}
+
+总阻塞时间 (TBT) 是测量[加载响应度](/user-centric-performance-metrics/#in-the-lab)的重要[实验室指标](/user-centric-performance-metrics/#types-of-metrics)，因为该项指标有助于量化在页面交互性变为可靠前，不可交互程度的严重性，较低的 TBT 有助于确保页面的[可用性](/user-centric-performance-metrics/#questions)。
+
+{% endAside %}
+
+## 什么是 TBT？
+
+总阻塞时间 (TBT) 指标测量[First Contentful Paint 首次内容绘制 (FCP)](/fcp/)与[Time to Interactive 可交互时间 (TTI)](/tti/)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。
+
+每当出现[长任务](/custom-metrics/#long-tasks-api)（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作"阻塞状态"。我们说主线程处于"阻塞状态"是因为浏览器无法中断正在进行的任务。因此，如果用户在某个长任务运行期间与页面*进行*交互，那么浏览器必须等到任务完成后才能作出响应。
+
+如果任务时长足够长（例如超过 50 毫秒），那么用户很可能会注意到延迟，并认为页面缓慢或卡顿。
+
+某个给定长任务的*阻塞时间*是该任务持续时间超过 50 毫秒的部分。一个页面的*总阻塞时间*是在 FCP 和 TTI 之间发生的每个长任务的*阻塞时间*总和。
+
+例如，请看以下这张页面加载期间浏览器主线程的图表：
+
+{% Img src="image/admin/clHG8Yv239lXsGWD6Iu6.svg", alt="主线程上的任务时间轴", width="800", height="156", linkTo=true %}
+
+上方的时间轴上有五个任务，其中三个是长任务，因为这些任务的持续时间超过 50 毫秒。下图显示了各个长任务的阻塞时间：
+
+{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xKxwKagiz8RliuOI2Xtc.svg", alt="显示阻塞时间的主线程任务时间轴", width="800", height="156", linkTo=true %}
+
+因此，虽然在主线程上运行任务的总时间为 560 毫秒，但其中只有 345 毫秒被视为阻塞时间。
+
+<table>
+  <tr>
+    <th></th>
+    <th>任务持续时间</th>
+    <th>任务阻塞时间</th>
+  </tr>
+  <tr>
+    <td>任务一</td>
+    <td>250 毫秒</td>
+    <td>200 毫秒</td>
+  </tr>
+  <tr>
+    <td>任务二</td>
+    <td>90 毫秒</td>
+    <td>40 毫秒</td>
+  </tr>
+  <tr>
+    <td>任务三</td>
+    <td>35 毫秒</td>
+    <td>0 毫秒</td>
+  </tr>
+  <tr>
+    <td>任务四</td>
+    <td>30 毫秒</td>
+    <td>0 毫秒</td>
+  </tr>
+  <tr>
+    <td>任务五</td>
+    <td>155 毫秒</td>
+    <td>105 毫秒</td>
+  </tr>
+  <tr>
+    <td colspan="2"><strong>总阻塞时间</strong></td>
+    <td><strong>345 毫秒</strong></td>
+  </tr>
+</table>
+
+### TBT 与 TTI 有什么关系？
+
+TBT 是 TTI 的一个出色的配套指标，因为 TBT 有助于量化在页面交互性变为可靠前，不可交互程度的严重性。
+
+TTI 会在主线程至少有五秒钟没有长任务时，认为页面具备"可靠交互性"。也就是说，分布在 10 秒钟里的三个 51 毫秒长的任务与单个 10 秒长的任务对 TTI 的影响是相同的，但对于试图与页面进行交互的用户来说，这两种情况给人的感觉是截然不同的。
+
+在第一种情况下，三个 51 毫秒的任务的 TBT 为**3 毫秒**。而单个 10 秒长的任务的 TBT 为**9950 毫秒**。第二种情况下较大的 TBT 值对较差的体验进行了量化。
+
+## 如何测量 TBT
+
+TBT 指标应该[在实验室中](/user-centric-performance-metrics/#in-the-lab)进行测量。测量 TBT的最佳方法是在您的网站上运行一次灯塔性能审计。有关使用详情，请参阅[灯塔中关于 TBT 的说明文档](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)。
+
+### 实验室工具
+
+- [Chrome 开发者工具](https://developer.chrome.com/docs/devtools/)
+- [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest 网页性能测试工具](https://www.webpagetest.org/)
+
+{% Aside %}虽然 TBT 可以在实际情况下进行测量，但我们不建议这样做，因为用户交互会影响您网页的 TBT，从而导致您的报告中出现大量差异。如需了解页面在实际情况中的交互性，您应该测量[First Input Delay 首次输入延迟 (FID)](/fid/) 。{% endAside %}
+
+## 怎样算是良好的 TBT 分数？
+
+为了提供良好的用户体验，网站在**普通移动硬件**上进行测试时，应该努力将总阻塞时间控制在**300 毫秒**以内。
+
+有关页面 TBT 对灯塔性能分数影响的详细信息，请参阅[灯塔如何确定您的 TBT 分数](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/#how-lighthouse-determines-your-tbt-score)
+
+## 如何改进 TBT
+
+如需了解如何改进某个特定网站的 TBT，您可以运行一次灯塔性能审计，并留心查看审计建议的各种具体[机会](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)。
+
+如需了解改进 TBT 的常见方式（针对任何网站），请参阅以下性能指南：
+
+- [减少第三方代码的影响](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [减少 JavaScript 执行时间](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [最小化主线程工作](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [保持较低的请求数和较小的传输大小](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/zh/metrics/ttfb/index.md b/src/site/content/zh/metrics/ttfb/index.md
new file mode 100644
index 00000000000..6a6b9613ec5
--- /dev/null
+++ b/src/site/content/zh/metrics/ttfb/index.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: Time to First Byte 第一字节时间 (TTFB)
+authors:
+  - jlwagner
+date: 2021-10-26
+updated: 2022-10-19
+description: |
+  本篇文章介绍了第一字节时间 (TTFB) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+  - web-vitals
+---
+
+{% Aside %}
+第一字节时间 (TTFB) 是在实验室和现场测量连接建立时间和 Web 服务器响应能力的一个基础指标。它有助于识别 Web 服务器何时对请求的响应速度太慢。对 HTML 文档的请求，该指标先于其他所有的加载性能指标。
+{% endAside %}
+
+## TTFB 是什么?
+
+TTFB 是一个衡量对资源的请求和响应的第一个字节开始和到达之间时间的指标。
+
+<figure>
+  {% Img src="image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ccT8ltSPrTri3tz7AA3h.png", alt="A diagram of network request timings. The phases from left to right are Redirect (which overlaps with Prompt for Unload), Cache, DNS, TCP, Request, Response, Processing, and Load. The associated timings are redirectStart and redirectEnd (which overlap with the Prompt for Unload's unloadEventStart and unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, and loadEventEnd.", width="800", height="337" %}
+  <figcaption>
+    网络请求阶段及其相关时间损耗的图示. TTFB 测量<code>startTime</code>和<code>responseStart</code>之间的时间损耗。
+  </figcaption>
+</figure>
+
+TTFB 是下列请求节点的时间损耗汇总：
+
+- Redirect time 重定向时延
+- Service worker 启动时延（如果适用）
+- DNS 查询时延
+- 建立连接和 TLS 所消耗时延
+- 请求，直到响应的第一个字节到达为止的时延
+
+减少连接建立和后端服务的时延将有助于降低 TTFB
+
+### 什么是好的 TTFB 分数?
+
+由于 TTFB 先于[以用户为中心的指标](/user-centric-performance-metrics/)，如[首次内容显示（FCP）](/fcp/)和[最大内容显示（LCP）](/lcp/)，因此建议您的服务器对请求的响应速度要足够快，以使 **P75** 的用户体验在[良好的 FCP 分数](/fcp/#what-is-a-good-fcp-score)。作为一个粗略的指导，大多数网站应努力使 TTFB 少于 **0.8秒** 。
+
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/ILJ1xKjzVisqOPPyHYVA.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/eNXaxPi9NdUVSTDRJFkV.svg",
+        alt="良好的 TTFB 应该小于 0.8 秒，大于 1.8 秒的 TTFB 被认为是差的表现，在这中间的值需要优化",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
+{% Aside %}
+  TTFB 不是 [核心 Web 指标](/vitals)，因此，只要不妨碍他们在重要的指标上获得良好的分数，网站并不绝对需要达到“良好”的 TTFB 指标。
+{% endAside %}
+
+## 如何测量 TTFB
+
+TTFB 可以在[实验场景](/user-centric-performance-metrics/#in-the-lab)或[实际场景](/user-centric-performance-metrics/#in-the-field)中以如下的方式进行测量。
+
+### 实际场景可选工具
+
+- [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report)
+- [`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals)
+
+### 实验场景可选工具
+
+- 在 Chrome 开发者工具的 [网络面板](https://developer.chrome.com/docs/devtools/network/)
+- [WebPageTest](https://www.webpagetest.org/)
+
+### 在 JavaScript 中测量 TTFB
+
+{% BrowserCompat 'api.PerformanceResourceTiming.responseStart' %}
+
+可以在具备[Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API)功能的浏览器中测量 TTFB。下面的这个示例展示了如何创建 [`PerformanceObserver`](https://developer.mozilla.org/docs/Web/API/PerformanceObserver) 并监听 `navigation` ，最终把日志输出到控制台：
+
+```javascript
+new PerformanceObserver((entryList) => {
+  const [pageNav] = entryList.getEntriesByType('navigation');
+
+  console.log(`TTFB: ${pageNav.responseStart}`);
+}).observe({
+  type: 'navigation',
+  buffered: true
+});
+```
+
+{% Aside 'caution' %}
+不是所有的浏览器都支持 `PerformanceObserver` 或它的 `buffered` 参数。为了获得尽可能多的浏览器支持，可以考虑采用`web-vitals`包，下面将讨论这个问题。
+{% endAside %}
+
+[`web-vitals` JavaScript library](https://github.com/GoogleChrome/web-vitals) 也能在浏览器内测量 TTFB 指标，代码将更加简洁：
+
+```javascript
+import {onTTFB} from 'web-vitals';
+
+// Measure and log TTFB as soon as it's available.
+onTTFB(console.log);
+```
+
+### Measuring resource requests
+
+TTFB适用于 _所有_ 的请求，而不仅仅是导航请求。特别是那些资源托管在需要跨域访问的服务器上时，由于需要建立与这些服务器的连接，会引入延迟。要测量实际场景中的TTFB，请在 `PerformanceObserver 中使用[Resource Timing API](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)
+
+```javascript
+new PerformanceObserver((entryList) => {
+  const entries = entryList.getEntries();
+
+  for (const entry of entries) {
+    // Some resources may have a responseStart value of 0, due
+    // to the resource being cached, or a cross-origin resource
+    // being served without a Timing-Allow-Origin header set.
+    if (entry.responseStart > 0) {
+      console.log(`TTFB: ${entry.responseStart}`, entry.name);
+    }
+  }
+}).observe({
+  type: 'resource',
+  buffered: true
+});
+```
+
+上述代码片断与用于测量导航请求的 TTFB 的代码片断类似，只不过不是查询 "导航" 条目，而是查询 "资源" 条目。它还说明了这样一个事实，即一些从主源加载的资源可能会返回一个 "0" 的值，因为连接已经打开，或者一个资源是瞬间从缓存中获取的。
+
+{% Aside 'gotchas' %}
+如果跨源服务器未能设置 [`Timing-Allow-Origin` header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin)，则跨域请求的 TTFB 将无法在实际场景中测量。
+{% endAside %}
+
+## 如何优化 TTFB
+
+优化 TTFB 在很大程度上取决于您的托管供应商和后端服务。TTFB 值高可能是由于以下一个或多个问题造成的。
+
+- 托管服务商的基础设施能力不足，无法处理高流量负载
+- 网络服务器的内存不足，可能导致 [系统颠簸](https://en.wikipedia.org/wiki/Memory_paging#Thrashing)
+- 未经优化的数据库
+- 不良的数据库服务器配置
+
+通常通过选择一个合适的托管供应商是优化 TTFB ，其基础设施可确保高正常运行时间和响应能力。这与 CDN 相结合，可以起到帮助作用。
+
+{% Aside %}
+使用 [Server-Timing API](https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing) 来收集关于应用程序后端性能的额外现场数据，这可以帮助确定改进的机会，否则可能会被忽视。
+{% endAside %}
+
+其他优化高 TTFB 时延和相关感知延迟的机会包括：
+
+- [避免多次重定向](https://developer.chrome.com/docs/lighthouse/performance/redirects/).
+- 提前向跨域资源源[建立连接 Preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) 。
+- 将源提交给[HSTS预加载列表](https://hstspreload.org/)，以消除 HTTP-HTTPS 重定向延迟。
+- [使用 HTTP/2](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/) or [HTTP/3](https://en.wikipedia.org/wiki/HTTP/3)。
+- 考虑[预测性预取](/predictive-prefetching/)，为没有指定[减少数据使用偏好](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-data)的用户提供快速页面导航。
+- 在可能和适当的情况下，使用服务器端生成（SSG）来代替SSR的标记。
diff --git a/src/site/content/zh/metrics/tti/index.md b/src/site/content/zh/metrics/tti/index.md
new file mode 100644
index 00000000000..6c58f3f3f67
--- /dev/null
+++ b/src/site/content/zh/metrics/tti/index.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Time to Interactive 可交互时间 (TTI)
+authors:
+  - philipwalton
+date: 2019-11-07
+updated: 2020-06-15
+description: 本篇文章介绍了可交互时间 (TTI) 指标并说明了该指标的测量方式
+tags:
+  - performance
+  - metrics
+---
+
+{% Aside %}可交互时间 (TTI) 是测量[加载响应度](/user-centric-performance-metrics/#types-of-metrics)的重要[实验室指标](/user-centric-performance-metrics/#in-the-lab)。该指标有助于识别*看起来*具备交互性但实际上并非如此的页面情况。迅捷的 TTI 有助于确保页面的[有效性](/user-centric-performance-metrics/#questions)。 {% endAside %}
+
+## 什么是 TTI？
+
+TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
+
+如需根据网页的[性能跟踪](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/)计算 TTI，请执行以下步骤：
+
+1. 先进行[First Contentful Paint 首次内容绘制 (FCP)](/fcp/)。
+2. 沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，*安静窗口*的定义为：没有[长任务](/custom-metrics/#long-tasks-api)且不超过两个正在处理的网络 GET 请求。
+3. 沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
+4. TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。
+
+下图将有助于您更直观地理解上述步骤：
+
+{% Img src="image/admin/WZM0n4aXah67lEyZugOT.svg", alt="显示 TTI 计算方式的页面加载时间轴", width="800", height="473", linkTo=true %}
+
+长久以来，开发者为了追求更快的渲染速度而对页面进行了优化，但有时，这会以牺牲 TTI 为代价。
+
+服务器端渲染 (SSR) 等技术可能会导致页面*看似*具备交互性（即，链接和按钮在屏幕上可见），但*实际上*并不能进行交互，因为主线程被阻塞或是因为控制这些元素的 JavaScript 代码尚未完成加载。
+
+当用户尝试与看似具备交互性但实际上并非如此的页面进行交互时，他们可能会有如下两种反应：
+
+- 在最好的情况下，他们会因为页面响应缓慢而感到恼火。
+- 在最坏的情况下，他们会认为页面已损坏，因此很可能直接离开。他们甚至可能对您的品牌价值丧失信心或信任。
+
+为了避免这个问题，请尽一切努力将 FCP 和 TTI 之间的差值降至最低。如果两者在某些情况下确实存在明显差异，请通过视觉指示器清楚表明页面上的组件还无法进行交互。
+
+## 如何测量 TTI
+
+TTI 指标最好[在实验室中](/user-centric-performance-metrics/#in-the-lab)进行测量。测量 TTI 的最佳方法是在您的网站上运行一次灯塔性能审计。有关使用详情，请参阅[灯塔中关于 TTI 的说明文档](/tti/)。
+
+### 实验室工具
+
+- [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)
+- [WebPageTest 网页性能测试工具](https://www.webpagetest.org/)
+
+{% Aside %}虽然 TTI 可以在实际情况下进行测量，但我们不建议这样做，因为用户交互会影响您网页的 TTI，从而导致您的报告中出现大量差异。如需了解页面在实际情况中的交互性，您应该测量[First Input Delay 首次输入延迟 (FID)](/fid/) 。{% endAside %}
+
+## 怎样算是良好的 TTI 分数？
+
+为了提供良好的用户体验，网站在**普通移动硬件**上进行测试时，应该努力将可交互时间控制在**5 秒**以内。
+
+有关页面 TTI 对灯塔性能分数影响的详细信息，请参阅[灯塔如何确定您的 TTI 分数](https://developer.chrome.com/docs/lighthouse/performance/interactive/#how-lighthouse-determines-your-tti-score)。
+
+## 如何改进 TTI
+
+如需了解如何改进某个特定网站的 TTI，您可以运行一次灯塔性能审计，并留心查看审计建议的各种具体[机会](https://developer.chrome.com/docs/lighthouse/performance/#opportunities)。
+
+如需了解改进 TTI 的常见方式（针对任何网站），请参阅以下性能指南：
+
+- [缩小 JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/)
+- [预连接到所需的来源](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/)
+- [预加载关键请求](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload/)
+- [减少第三方代码的影响](https://developer.chrome.com/docs/lighthouse/performance/third-party-summary/)
+- [最小化关键请求深度](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)
+- [减少 JavaScript 执行时间](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)
+- [最小化主线程工作](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)
+- [保持较低的请求数和较小的传输大小](https://developer.chrome.com/docs/lighthouse/performance/resource-summary/)
diff --git a/src/site/content/zh/metrics/user-centric-performance-metrics/index.md b/src/site/content/zh/metrics/user-centric-performance-metrics/index.md
new file mode 100644
index 00000000000..8ad678e0622
--- /dev/null
+++ b/src/site/content/zh/metrics/user-centric-performance-metrics/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: 以用户为中心的性能指标
+authors:
+  - philipwalton
+date: 2019-11-08
+description: 以用户为中心的性能指标是一个至关重要的工具，这些指标有助于您让真实用户受益，从而改进您的网站体验。
+tags:
+  - performance
+  - metrics
+---
+
+我们都听说过性能的重要性。但当我们谈起性能，以及让网站"速度提升"时，我们具体指的是什么？
+
+其实性能是相对的：
+
+- 某个网站可能对一个用户来说速度很快（网速快，设备强大的情况下），但可能对另一个用户来说速度很慢（网速慢，设备低端的情况下）。
+- 两个网站完成加载所需的时间或许相同，但其中一个却*显得*加载速度更快（如果该网站逐步加载内容，而不是等到最后才一起显示）。
+- 一个网站可能*看起来*加载速度很快，但随后对用户交互的响应速度却很慢（或根本无响应）。
+
+因此，在谈论性能时，重要的是做到精确，并且根据能够进行定量测量的客观标准来论及性能。这些标准就是*指标*。
+
+但仅仅因为某个指标基于客观标准并且能够进行定量测量，也并不一定意味着那些测量值就是有用的。
+
+## 定义指标
+
+长久以来，网络性能都是通过<code>[load](https://developer.mozilla.org/docs/Web/API/Window/load_event)</code>事件进行测量的。然而，尽管<code>load</code>是页面生命周期中明确定义的时刻，但该时刻并不一定与用户在意的任何方面相对应。
+
+例如，服务器可以用一个可以立即"加载"的最小页面来进行响应，然后延迟获取内容并在页面上延迟显示任何内容，直到`load`事件触发的几秒钟后。虽然这样的页面或许确实具备较快的加载时间，但这与用户实际体验页面加载的方式不符。
+
+在过去几年中，Chrome 团队成员（与[W3C Web 性能工作组](https://www.w3.org/webperf/)共同合作）一直致力于打造一组新的标准化 API 和指标，从而更准确地测量用户的网页性能体验。
+
+为了有助于确保这些指标与用户息息相关，我们围绕几个关键问题构建出了指标框架：
+
+<table id="questions">
+  <tr>
+    <td><strong>是否正在发生？</strong></td>
+    <td>导航是否成功启动？服务器有响应吗？</td>
+  </tr>
+  <tr>
+    <td><strong>是否有用？</strong></td>
+    <td>是否渲染了足够的内容让用户可以深入其中？</td>
+  </tr>
+  <tr>
+    <td><strong>是否可用？</strong></td>
+    <td>页面是否繁忙，用户是否可以与页面进行交互？</td>
+  </tr>
+  <tr>
+    <td><strong>是否令人愉快？</strong></td>
+    <td>交互是否流畅自然，没有延迟和卡顿？</td>
+  </tr>
+</table>
+
+## 如何对指标进行测量
+
+性能指标一般通过以下两种方式来进行测量：
+
+- **在实验室中：**使用工具在稳定、受控的环境中模拟页面加载
+- **在实际情况中**：基于真实用户的实际页面加载与页面交互
+
+这两个选项没有优劣之分，事实上，您通常会需要同时使用这两个方式来确保良好的性能。
+
+### 在实验室中
+
+在实验室中测试性能对于新功能的开发过程至关重要。功能在发布到生产环境中之前，不可能基于真实用户体验对性能特征进行测量，因此在功能发布之前，在实验室中对其进行测试是防止性能回归的最佳方法。
+
+### 在实际情况中
+
+另一方面，虽然实验室测试是一种合理的性能代理，但这种测试方式不一定能反映所有用户在实际情况下对您网站的体验。
+
+根据用户的设备性能以及他们的网络状况，网站的性能也可能会有很大差异。而用户是否（或如何）与页面进行交互也会导致这种性能差异。
+
+此外，页面加载具有不确定性。例如，加载个性化内容或广告的网站可能会因为用户差异而呈现不同的性能特征。实验室测试并不会捕获到这些差异。
+
+要想真正了解您的网站为用户呈现的性能表现，唯一的方法就是在这些用户进行页面加载和页面交互时对页面性能进行实测。这种类型的测量通常被称为[真实用户监控](https://en.wikipedia.org/wiki/Real_user_monitoring)，或简称为 RUM。
+
+## 指标类型
+
+还有其他几种类型的指标也与用户对性能的感知相关。
+
+- **Perceived load speed 感知加载速度：**页面在屏幕上加载并渲染出所有视觉元素的速度。
+- **Load responsiveness 加载响应度：**为了使组件对用户交互作出快速响应，页面加载和执行任何所需 JavaScript 代码的速度。
+- **Runtime responsiveness 运行时响应度：**页面在加载后，对用户交互的响应速度。
+- **Visual stability 视觉稳定性：**页面上的元素是否会出现让用户感到意外的偏移，并对用户交互造成潜在的干扰？
+- **Smoothness 平滑度：**过渡和动画在页面状态切换的过程中是否具有稳定的帧速率和顺滑的流动性？
+
+鉴于上述所有类型的性能指标，我们希望能够清楚地表明，只用一项指标去捕获页面的所有性能特征是远远不够的。
+
+## 需要测量的重要指标
+
+- **[First contentful paint 首次内容绘制 (FCP)](/fcp/)：**测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。*（[实验室](#in-the-lab)、[实际](#in-the-field)）*
+- **[Largest contentful paint 最大内容绘制 (LCP)](/lcp/)：**测量页面从开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。*（[实验室](#in-the-lab)、[实际](#in-the-field)）*
+- **[First input delay 首次输入延迟 (FID)](/fid/)：**测量从用户第一次与您的网站交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器实际能够对交互做出响应所经过的时间。*([实际](#in-the-field))*
+- **[Time to Interactive 可交互时间 (TTI)](/tti/)：**测量页面从开始加载到视觉上完成渲染、初始脚本（如果有的话）完成加载，并能够快速、可靠地响应用户输入所需的时间。*（[实验室](#in-the-lab)）*
+- **[Total blocking time 总阻塞时间 (TBT)](/tbt/)：**测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。*（[实验室](#in-the-lab)）*
+- **[Cumulative layout shift 累积布局偏移 (CLS)](/cls/)：**测量页面在开始加载和其[生命周期状态](https://developer.chrome.com/blog/page-lifecycle-api/)变为隐藏期间发生的所有意外布局偏移的累积分数。*（[实验室](#in-the-lab)、[实际](#in-the-field)）*
+
+虽然此列表中包含的指标能够测量与用户相关的众多方面的性能，但该列表并不包括所有内容（例如，当前还未涵盖运行时响应度和平滑度）。
+
+在某些情况下，我们将引入新指标来查漏补缺，但在其他情况下，专门为您的网站量身定制的指标就是最佳指标。
+
+## 自定义指标
+
+上方列出的性能指标有助于大致了解网络上大多数网站的性能特征。而且，这些指标还可以作为网站的一组通用指标，有利于与竞争对手进行性能比较。
+
+但有时候，可能会有某个特定网站比较独树一帜，需要额外的指标来捕获完整的性能全貌。例如，LCP 指标用于测量页面的主要内容何时完成加载，但在某些情况下，最大元素并不是页面主要内容的一部分，因此 LCP 就不再是相关指标。
+
+为了解决这种情况，Web 性能工作组还推出了一系列较低级别的标准化 API，可用于实现您自己的自定义指标：
+
+- [用户计时 API](https://w3c.github.io/user-timing/)
+- [长任务 API](https://w3c.github.io/longtasks/)
+- [元素计时 API](https://wicg.github.io/element-timing/)
+- [导航计时API](https://w3c.github.io/navigation-timing/)
+- [资源计时 API](https://w3c.github.io/resource-timing/)
+- [服务器计时](https://w3c.github.io/server-timing/)
+
+请参阅[自定义指标](/custom-metrics/)的相关指南，了解如何使用这些 API 来测量您网站的特定性能特征。
diff --git a/src/site/content/zh/mini-apps/index.md b/src/site/content/zh/mini-apps/index.md
new file mode 100644
index 00000000000..b8c3db917bc
--- /dev/null
+++ b/src/site/content/zh/mini-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: mini-apps
+---
diff --git a/src/site/content/zh/offline.md b/src/site/content/zh/offline.md
new file mode 100644
index 00000000000..8ea92239098
--- /dev/null
+++ b/src/site/content/zh/offline.md
@@ -0,0 +1,14 @@
+---
+layout: default
+title: Offline
+description: |
+  Network Offline
+noindex: true
+offline: true
+i18n:
+  no_connection: |
+    There is no Internet connection. We'll try to reload automatically
+    once you're back online!
+---
+
+{% include 'partials/offline.njk' %}
diff --git a/src/site/content/zh/payments/android-payment-apps-developers-guide/index.md b/src/site/content/zh/payments/android-payment-apps-developers-guide/index.md
new file mode 100644
index 00000000000..71942e3b82b
--- /dev/null
+++ b/src/site/content/zh/payments/android-payment-apps-developers-guide/index.md
@@ -0,0 +1,409 @@
+---
+layout: post
+title: Android 支付应用开发者指南
+subhead: 了解如何调整 Android 支付应用以与 Web Payments 配合使用，并为客户提供更好的用户体验。
+authors:
+  - yaraki
+  - agektmr
+date: 2020-05-25
+description: 了解如何调整 Android 支付应用以与 Web Payments 配合使用，并为客户提供更好的用户体验。
+tags:
+  - blog
+  - payments
+feedback:
+  - api
+---
+
+[Payment Request API](https://www.w3.org/TR/payment-request/) 为 web 带来了一个基于浏览器的内置界面，允许用户比以往更轻松地输入所需的支付信息。该 API 还可以调用特定于平台的支付应用。
+
+<figure style="width:300px; margin:auto;">
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.webm" type="video/webm">
+    <source src="https://storage.googleapis.com/web-dev-assets/payments/native-payment-app.mp4" type="video/mp4">
+  </source></source></video>
+  <figcaption>使用 Web Payments 的特定于平台的 Google 支付应用的结账流程。</figcaption></figure>
+
+与仅使用 Android Intents 相比，Web Payments 可以更好地与浏览器、安全性和用户体验集成：
+
+- 在商家网站的上下文中，支付应用作为模式启动。
+- 实现是对现有支付应用的有益补充，使您能够充分利用用户群。
+- 检查支付应用的签名以防止[旁加载](https://en.wikipedia.org/wiki/Sideloading)。
+- 支付应用可以支持多种支付方式。
+- 可以集成任意支付方式，例如加密货币、银行转账等。 Android 设备上的支付应用甚至可以集成需要访问设备硬件芯片的支付方法。
+
+{% Aside %}要了解商家如何与支付应用集成，请查看[支付交易的生命周期](/life-of-a-payment-transaction/)。 {% endAside%}
+
+在 Android 支付应用中实现 Web Payments 需要四个步骤：
+
+1. 让商家发现您的支付应用。
+2. 让商家知道客户是否有可以付款的注册工具（例如信用卡）。
+3. 让客户付款。
+4. 验证调用者的签名证书。
+
+要查看 Web Payments 的实际效果，请查看 [android-web-payment](https://github.com/GoogleChromeLabs/android-web-payment/) 演示。
+
+## 第 1 步：让商家发现您的支付应用
+
+为了让商家使用您的支付应用，他们需要使用 [Payment Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API) 并使用[支付方式标识符](https://www.w3.org/TR/payment-method-id/)指定您支持的支付方式。
+
+如果您的支付应用使用唯一的付款方式标识符，那么您可以设置自己的[付款方式清单](https://w3c.github.io/payment-method-manifest/)，以便浏览器可以发现您的应用。
+
+{% Aside %}要了解详细发现过程的工作原理以及如何设置新的付款方式，请查看[设置付款方式](/setting-up-a-payment-method)。 {% endAside %}
+
+## 第 2 步：让商家知道客户是否有可以付款的注册工具
+
+商户可以调用`hasEnrolledInstrument()`[查询客户是否可以付款](/life-of-a-payment-transaction#ready-to-pay)。您可以将`IS_READY_TO_PAY`作为 Android 服务实现来回答此查询。
+
+### `AndroidManifest.xml`
+
+使用带有`org.chromium.intent.action.IS_READY_TO_PAY`操作的意图过滤器声明您的服务。
+
+```xml
+<service
+  android:name=".SampleIsReadyToPayService"
+  android:exported="true">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" />
+  </intent-filter>
+</service>
+```
+
+`IS_READY_TO_PAY`服务是可选项。如果支付应用中没有此类意图处理程序，那么 Web 浏览器会假定该应用始终可以进行支付。
+
+### AIDL
+
+`IS_READY_TO_PAY`服务的 API 在 AIDL 中定义。创建两个 AIDL 文件，其内容如下：
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayServiceCallback.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+interface IsReadyToPayServiceCallback {
+    oneway void handleIsReadyToPay(boolean isReadyToPay);
+}
+```
+
+{% Label %}app/src/main/aidl/org/chromium/IsReadyToPayService.aidl{% endLabel %}
+
+```kotlin
+package org.chromium;
+import org.chromium.IsReadyToPayServiceCallback;
+
+interface IsReadyToPayService {
+    oneway void isReadyToPay(IsReadyToPayServiceCallback callback);
+}
+```
+
+### 实现`IsReadyToPayService`
+
+下面是`IsReadyToPayService`的最简单实现示例：
+
+```kotlin
+class SampleIsReadyToPayService : Service() {
+  private val binder = object : IsReadyToPayService.Stub() {
+    override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+      callback?.handleIsReadyToPay(true)
+    }
+  }
+
+  override fun onBind(intent: Intent?): IBinder? {
+    return binder
+  }
+}
+```
+
+### 参数
+
+请将以下参数作为 Intent extras 传递给`onBind`：
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+
+```kotlin
+override fun onBind(intent: Intent?): IBinder? {
+  val extras: Bundle? = intent?.extras
+  // …
+}
+```
+
+#### `methodNames`
+
+被查询的方法的名称。元素是`methodData`字典中的键，表明了支付应用支持的方法。
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+`methodNames`中每一项到[`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying)的映射。
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### `topLevelOrigin`
+
+没有方案的商户来源（顶级浏览上下文的无方案来源）。例如，`https://mystore.com/checkout`将作为`mystore.com`传递。
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+商家的证书链（顶级浏览上下文的证书链）。对于本地主机和磁盘上的文件（均是没有 SSL 证书的安全上下文），要设为 null。证书链是必要的，因为支付应用可能对不同网站有不同的信任要求。
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+```
+
+每个`Parcelable`都是一个带有`"certificate"`键和字节数组值的`Bundle`
+
+```kotlin
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+在 JavaScript 中调用`new PaymentRequest(methodData, details, options)`构造函数的 iframe 浏览上下文的无方案起源。如果该构造函数是从顶级上下文调用的，那么此参数的值等于`topLevelOrigin`参数的值。
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+### 响应
+
+该服务可以通过`handleIsReadyToPay(Boolean)`方法发送它的响应。
+
+```kotlin
+callback?.handleIsReadyToPay(true)
+```
+
+### 权限
+
+您可以使用`Binder.getCallingUid()`来检查调用方是谁。请注意，您必须在`isReadyToPay`方法、而不是在`onBind`方法中执行此操作。
+
+```kotlin
+override fun isReadyToPay(callback: IsReadyToPayServiceCallback?) {
+  try {
+    val callingPackage = packageManager.getNameForUid(Binder.getCallingUid())
+    // …
+```
+
+有关如何验证调用包是否具有正确签名的信息，请参阅[验证调用方的签名证书](#heading=h.czr8ye23zg2e)。
+
+## 第 3 步：让客户付款
+
+商家调用`show()` [启动支付应用，](/life-of-a-payment-transaction#launch)以便客户进行支付。支付应用通过 Android Intent `PAY`调用，并在 Intent 参数中包含交易信息。
+
+支付应用使用`methodName`和`details`响应，这两个响应是支付应用特定的并且对浏览器不透明。浏览器会通过 JSON 反序列化将`details`字符串转换为商家的 JavaScript 对象，但除此之外并不会强制执行任何有效性。浏览器不会修改`details`；该参数的值将直接传递给商家。
+
+### `AndroidManifest.xml`
+
+使用了`PAY`意图过滤器的活动应该具有`<meta-data>`标记，用于[标识应用的默认付款方式标识符](/setting-up-a-payment-method)。
+
+要支持多种支付方式，请添加带有`<string-array>`资源的`<meta-data>`标签。
+
+```xml
+<activity
+  android:name=".PaymentActivity"
+  android:theme="@style/Theme.SamplePay.Dialog">
+  <intent-filter>
+    <action android:name="org.chromium.intent.action.PAY" />
+  </intent-filter>
+
+  <meta-data
+    android:name="org.chromium.default_payment_method_name"
+    android:value="https://bobpay.xyz/pay" />
+  <meta-data
+    android:name="org.chromium.payment_method_names"
+    android:resource="@array/method_names" />
+</activity>
+```
+
+`resource`必须是字符串列表，每个字符串都必须是一个有效的绝对 URL，使用 HTTPS 方案，如下所示。
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string-array name="method_names">
+        <item>https://alicepay.com/put/optional/path/here</item>
+        <item>https://charliepay.com/put/optional/path/here</item>
+    </string-array>
+</resources>
+```
+
+### 参数
+
+以下参数将作为 Intent extras 传递给活动：
+
+- `methodNames`
+- `methodData`
+- `topLevelOrigin`
+- `topLevelCertificateChain`
+- `paymentRequestOrigin`
+- `total`
+- `modifiers`
+- `paymentRequestId`
+
+```kotlin
+val extras: Bundle? = intent?.extras
+```
+
+#### methodNames
+
+正在使用的方法的名称。这些元素是`methodData`字典中的键。这些是支付应用支持的方法。
+
+```kotlin
+val methodNames: List<String>? = extras.getStringArrayList("methodNames")
+```
+
+#### `methodData`
+
+从每个`methodNames`到[`methodData`](https://w3c.github.io/payment-request/#declaring-multiple-ways-of-paying)的映射。
+
+```kotlin
+val methodData: Bundle? = extras.getBundle("methodData")
+```
+
+#### merchantName
+
+商家结帐页面（浏览器的顶级浏览上下文）`<title>` HTML 标记的内容。
+
+```kotlin
+val merchantName: String? = extras.getString("merchantName")
+```
+
+#### `topLevelOrigin`
+
+没有方案的商家来源（顶级浏览上下文的无方案来源）。例如， `https://mystore.com/checkout`会作为`mystore.com`传递。
+
+```kotlin
+val topLevelOrigin: String? = extras.getString("topLevelOrigin")
+```
+
+#### `topLevelCertificateChain`
+
+商家的证书链（顶级浏览上下文的证书链）。对于本地主机和磁盘上的文件（均是没有 SSL 证书的安全上下文），要设为 null。每个`Parcelable`都是一个带有`certificate`键和字节数组值的 Bundle。
+
+```kotlin
+val topLevelCertificateChain: Array<Parcelable>? =
+    extras.getParcelableArray("topLevelCertificateChain")
+val list: List<ByteArray>? = topLevelCertificateChain?.mapNotNull { p ->
+  (p as Bundle).getByteArray("certificate")
+}
+```
+
+#### `paymentRequestOrigin`
+
+在 JavaScript 中调用`new PaymentRequest(methodData, details, options)`构造函数的 iframe 浏览上下文的无方案起源。如果该构造函数是从顶级上下文调用的，那么此参数的值等于`topLevelOrigin`参数的值。
+
+```kotlin
+val paymentRequestOrigin: String? = extras.getString("paymentRequestOrigin")
+```
+
+#### `total`
+
+表示交易总额的 JSON 字符串。
+
+```kotlin
+val total: String? = extras.getString("total")
+```
+
+这是字符串的示例内容：
+
+```kotlin
+{"currency":"USD","value":"25.00"}
+```
+
+#### `modifiers`
+
+`JSON.stringify(details.modifiers)`的输出，其中`details.modifiers`仅包含`supportedMethods`和`total` 。
+
+#### `paymentRequestId`
+
+“推送支付”应用程序应与交易状态关联的`PaymentRequest.id`。商家网站将使用此字段查询“推送支付”应用的带外交易状态。
+
+```kotlin
+val paymentRequestId: String? = extras.getString("paymentRequestId")
+```
+
+### 响应
+
+活动可以通过带有`RESULT_OK`的`setResult`发回它的响应。
+
+```kotlin
+setResult(Activity.RESULT_OK, Intent().apply {
+  putExtra("methodName", "https://bobpay.xyz/pay")
+  putExtra("details", "{\"token\": \"put-some-data-here\"}")
+})
+finish()
+```
+
+您必须将两个参数指定为 Intent extras：
+
+- `methodName`：正在使用的方法的名称。
+- `details`：包含商家用于完成交易所需的 JSON 字符串。如果交易成功，那么字符串是`true`，接着`details`的构建方式需要保证`JSON.parse(details)`会成功。
+
+如果交易未在支付应用中完成，您可以传递`RESULT_CANCELED`，例如，如果用户未能在支付应用中输入正确的帐户 PIN 码。浏览器可以让用户选择不同的支付应用。
+
+```kotlin
+setResult(RESULT_CANCELED)
+finish()
+```
+
+如果从被调用的支付应用收到的支付响应的活动结果设置为`RESULT_OK`，那么 Chrome 将检查非空的`methodName`和附加信息中的`details`。如果验证失败，Chrome 将从`request.show()`返回一个被拒绝的 promise，并带有以下开发人员将看到的的错误消息之一：
+
+```js
+'Payment app returned invalid response. Missing field "details".'
+'Payment app returned invalid response. Missing field "methodName".'
+```
+
+### 权限
+
+活动可以使用它的`getCallingPackage()`方法检查调用者。
+
+```kotlin
+val caller: String? = callingPackage
+```
+
+最后一步是验证调用者的签名证书，以确认调用包具有正确的签名。
+
+## 第 4 步：验证调用者的签名证书
+
+您可以通过`IS_READY_TO_PAY`中的`Binder.getCallingUid()`，以及`PAY`中的`Activity.getCallingPackage()`来检查调用者的包名称。为了确认调用者是您心目中的浏览器，应该检查其签名证书并确保它与正确的值匹配。
+
+如果您的目标是 API 级别 28 及更高级别，并且正在与具有单个签名证书的浏览器集成，则可以使用`PackageManager.hasSigningCertificate()` 。
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificate: ByteArray = … // The correct signing certificate.
+val verified = packageManager.hasSigningCertificate(
+  callingPackage,
+  certificate,
+  PackageManager.CERT_INPUT_SHA256
+)
+```
+
+`PackageManager.hasSigningCertificate()`是单证书浏览器的首选，因为它可以正确处理证书轮换。（Chrome 具有单个签名证书。）具有多个签名证书的应用无法轮换它们。
+
+如果您需要支持较旧的 API 级别 27 级更低级，或者需要处理具有多个签名证书的浏览器，则可以使用`PackageManager.GET_SIGNATURES` 。
+
+```kotlin
+val packageName: String = … // The caller's package name
+val certificates: Set<ByteArray> = … // The correct set of signing certificates
+
+val packageInfo = getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
+val sha256 = MessageDigest.getInstance("SHA-256")
+val signatures = packageInfo.signatures.map { sha256.digest(it.toByteArray()) }
+val verified = signatures.size == certificates.size &&
+    signatures.all { s -> certificates.any { it.contentEquals(s) } }
+```
diff --git a/src/site/content/zh/payments/index.md b/src/site/content/zh/payments/index.md
new file mode 100644
index 00000000000..d22bada012f
--- /dev/null
+++ b/src/site/content/zh/payments/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: payments
+---
diff --git a/src/site/content/zh/progressive-web-apps/app-like-pwas/index.md b/src/site/content/zh/progressive-web-apps/app-like-pwas/index.md
new file mode 100644
index 00000000000..2dc353d1aa6
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/app-like-pwas/index.md
@@ -0,0 +1,403 @@
+---
+layout: post
+title: 让渐进式 Web 应用 (PWA) 更像应用
+subhead: 让您的渐进式 Web 应用不像网站，更接近“真正的”应用
+authors:
+  - thomassteiner
+description: 通过理解如何使用 web 技术实现平台特定的应用模式，了解如何让您的渐进式 Web 应用程序更像“真正的”应用。
+date: 2020-06-15
+updated: 2020-07-23
+tags:
+  - capabilities
+---
+
+在玩渐进式 Web 应用 (PWA) 流行语字谜游戏时，选“PWA 只是网站”是一个稳赢的选择。微软的 PWA 文档[认同](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/#progressive-web-apps-on-windows:~:text=PWAs%20are%20just%20websites)这个说法，我们在这个网站上也[这么说](/progressive-web-apps/#content:~:text=Progressive%20Web%20Apps,Websites)，甚至提出 PWA 的 Frances Berriman 和 Alex Russell 也是[这么写的](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/#post-2263:~:text=they%E2%80%99re%20just%20websites)。是的，PWA 只是网站，但它们也远不止于此。只要实现得当，PWA 不会给人网站的感觉，而是像一个“真正的”应用。那么，像真正的应用意味着什么呢？
+
+为了回答这个问题，让我拿 Apple [Podcasts](https://support.apple.com/en-us/HT201859) 这个应用举例。它可在桌面版 macOS 和移动设备上的 iOS（还有 iPadOS）上使用。虽然 Podcasts 是媒体应用，但我在本例中阐述的核心思想也适用于其他类别的应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aNYiT2EkVkjNplAIKbLU.png", alt="iPhone 和 MacBook 上的 Podcasts 应用。", width="800", height="617" %}<figcaption> iPhone 和 macOS 上的 Apple Podcasts（<a href="https://support.apple.com/en-us/HT201859">来源</a>）。</figcaption></figure>
+
+{% Aside 'caution' %}下面列出的每个 iOS/Android/桌面应用功能都提供了**如何在 web 上实现**的部分，可以打开来了解更多详细信息。请注意，并非各种操作系统上的所有浏览器都支持所有列出的 API 或功能。请务必仔细查看链接文章中的兼容性说明。 {% endAside %}
+
+## 可离线运行
+
+假设我们后退一步，思考下手机或台式电脑上安装的特定于平台的应用程序，那么能发现一件明显的事：永远不会看不到内容。即使是离线状态的 Podcasts 应用，也会显示一些东西。虽然没有网络，但应用程序仍会自然打开。**Top Charts** 不显示任何内容，而是展示了**现在无法连接**消息与**重试**按钮。虽然我没有受到热烈的欢迎，但依然看到了一些内容。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TMbGLQkbLROxmUMdxLET.png", alt="当没有网络连接时，Podcasts 应用显示“现在无法连接”消息。", width="800", height="440" %}<figcaption>没有网络连接时的 Podcasts 应用。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} Podcasts 应用遵循所谓的应用外壳 (app shell) 模型。显示核心应用所需的所有静态内容都缓存在本地，包括左侧菜单图标和核心播放器 UI 图标等装饰性图像。而 <b>Top Charts</b> 等动态内容的数据仅会按需加载；如果加载失败，则会显示本地缓存的后备内容。请查看<a href="https://developers.google.com/web/fundamentals/architecture/app-shell">应用外壳模型</a>一文，了解如何在您的 web 应用使用此架构模型。 {% endDetails %}
+
+## 可使用离线内容且可播放媒体数据
+
+离线时，我依然可以通过左侧抽屉导航到**已下载**部分并欣赏下载好的播客剧集，应用可以播放这些播客剧集并显示所有元数据（如插图和描述）。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/onUIDiaFNNHOmnwXzRh1.png", alt="Podcasts 应用下载了一集可播放的播客。", width="800", height="440" %}<figcaption>即使没有网络也可以播放下载的播客剧集。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %}如何在 web 上实现{% endDetailsSummary %} 可以从缓存提供以前下载的媒体内容，例如使用 <a href="https://developer.chrome.com/docs/workbox/">Workbox</a> 库中的<a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">提供缓存的音频和视频</a>方法。其他内容可以随时存储在缓存或 IndexedDB 中。请查阅 <a href="/storage-for-the-web/">Web 存储</a>一文了解所有详细信息，以及何时使用何种存储技术。如果您的数据需要持久存储，不想在可用内存变低时被清除，则可以使用 <a href="/persistent-storage/">Persistent Storage API</a> 。 {% endDetails %}
+
+## 后台主动下载
+
+当我重新上线时，当然可以使用诸如 `http 203` 之类的查询来搜索内容，当我决定订阅搜索结果 [HTTP 203 播客时](/podcasts/)，会自动下载该系列的最新一集。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/WbCk4nPpBS3zwkPVRGuo.png", alt="订阅后立即下载播客最新一集的 Podcasts 应用。", width="800", height="658" %}<figcaption>订阅播客后，会立即下载最新的剧集。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %}如何在 web 上实现{% endDetailsSummary %} 下载播客剧集这项操作可能需要更长时间。您可以通过 <a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a> 将下载委托给浏览器后台处理。在 Android 上，浏览器甚至可以将这些下载进一步委托给操作系统，因此不需要持续运行浏览器。下载完成后，应用的服务工作进程将被唤醒，您可以决定如何处理响应。 {% endDetails %}
+
+## 与其他应用共享和交互
+
+Podcasts 应用会自然地与其他应用集成。例如当我右键单击喜欢的剧集时，可以把它分享给设备上的其他程序，比如 Messages 应用。它还自然地与系统剪贴板集成。我可以右键单击任何剧集并复制它的链接。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gKeFGOAZ2muuYeDNFbBW.png", alt="通过选择 Share Episode &gt; Messages，在 Podcasts 应用的上下文菜中调用了剧集。", width="800", height=" 392"%}<figcaption>将播客剧集分享给 Messages 应用。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %}如何在 web 上实现{% endDetailsSummary %} 您可以使用 <a href="/web-share/">Web Share API</a> 和 <a href="/web-share-target/">Web Share Target API</a> 将您的应用与设备上的其他应用分享和接收文本、文件和链接。尽管 Web 应用尚无法将菜单项添加到操作系统的内置右键单击菜单中，但仍有许多其他方法可以与设备的其他应用共享链接。通过 <a href="/image-support-for-async-clipboard/">Async Clipboard API</a> ，您可以以编程方式将文本和图像数据（PNG 图像）读写到系统剪贴板。在 Android 上，您可以使用 <a href="/contact-picker/">Contact Picker API</a> 从设备的联系人管理器中选择联系人。如果您同时提供平台特定应用和 PWA，那么可以使用 <a href="/get-installed-related-apps/">Get Installed Related Apps API</a> 来检查是否安装了平台特定应用；在这种情况下，您不需要鼓励用户安装 PWA 或接受网络推送通知。 {% endDetails %}
+
+## 后台应用刷新
+
+我可以在 Podcasts 应用的设置中配置为自动下载新剧集。这样更新内容会随时自动下载。真神奇。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iTKgVVjX0EM0RQS3ap4X.png", alt="Podcasts 应用的设置菜单中的”常规“区，”刷新播客“选项设为”每小时“", width="800", height="465" %} <figcaption>Podcasts 设置为每小时检查一次新博客。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} <a href="/periodic-background-sync/">Periodic Background Sync API</a> 可以让应用在后台定期刷新内容，而无需运行。这意味着可以主动提供新内容，使用户可以在需要时随时畅享。 {% endDetails %}
+
+## 通过云同步状态
+
+同时，我的订阅会在所有设备上同步。这是一个无缝的世界，我不必手动同步播客订阅。同样，我也不必担心移动设备的内存会被已经在桌面上听过的剧集占用，反之亦然。播放状态会保持同步，并会自动删除已收听的剧集。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uVJJ40Zxi5jx1AP1jd9U.png", alt="Podcasts 应用设置菜单中的“高级”部分，“跨设备同步订阅”选项已激活。", width="800", height="525" %}<figcaption>状态通过云同步。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现{% endDetailsSummary %} 同步应用状态数据可以交给 <a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a>。不必立刻开始同步操作，只是时间<em>早晚</em>问题，甚至可能在用户已经再次关闭应用时发生。 {% endDetails %}
+
+## 硬件媒体键控制
+
+当我在使用其他应用，比如在 Chrome 浏览器中阅读新闻页面时，仍然可以使用笔记本电脑上的媒体键控制 Podcasts 应用。无需为了跳转剧集就切换到其他应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/TqRtzNtfhahjX93hI1P6.png", alt="带注释媒体控制键的 Apple MacBook Pro Magic Keyboard。", width="800", height="406" %}<figcaption>可以用媒体键控制 Podcasts 应用（<a href="https://support.apple.com/guide/macbook-pro/magic-keyboard-apdd0116a6a2/mac">来源</a>）。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} <a href="/media-session/">Media Session API</a> 支持媒体键。这样用户就可以通过物理键盘、耳机上的硬件媒体键，甚至是智能手表上的软件媒体键来控制 web 应用。平滑搜寻操作的另一个方法是在用户搜索内容的重要部分时（比如通过开场字幕或章节边界）发送<a href="https://developer.mozilla.org/docs/Web/API/Vibration_API">振动模式</a>。 {% endDetails %}
+
+## 多任务处理和应用快捷方式
+
+当然，我随时可以从任何地方通过多任务处理回到 Podcasts 应用。Podcasts 有一个清晰可辨的图标，可以放在桌面或应用程序坞，从而可以根据需要随时启动该应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/l5EzElV5BGweYXLAqF4u.png", alt="macOS 任务切换器上有许多应用图标可供选择，其中一个就是 Podcasts。", width="800", height="630" %}<figcaption>通过多任务处理回到 Podcasts 应用。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 桌面和移动设备上的 PWA 可以安装到主屏幕、开始菜单或应用程序坞。安装可以基于主动提示进行，也可以完全由应用开发人员控制。<a href="/install-criteria/">《需要什么才能安装？》</a>一文涵盖您需要了解的所有内容。在进行多任务处理时，PWA 看起来独立于浏览器。 {% endDetails %}
+
+## 上下文菜单中的快速操作
+
+最常见的应用操作，比如**搜索**新内容和**检查新剧集**，可以直接从应用程序坞中应用的上下文菜单中调用。通过**选项**菜单，我还可以设置是否在登录时打开应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SnA6Thz5xaopuTWRzWgQ.png", alt="显示“搜索”和“检查新剧集”选项的 Podcasts 应用图标上下文菜单。", width="534", height="736" %}<figcaption>可以直接从应用图标立即使用快速操作。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现{% endDetailsSummary %}通过在 PWA 的 web 应用清单中指定<a href="/app-shortcuts/">应用图标快捷方式</a>，您可以注册用户可以直接从应用图标访问的常见任务的快速路线。在 macOS 等操作系统上，用户还可以右键单击应用图标并将应用设置为登录时启动。 关于<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/RunOnLogin/Explainer.md">登录时运行</a>的提案正在讨论中。 {% endDetails %}
+
+## 用作默认应用
+
+其他 iOS 应用甚至网站或电子邮件都可以通过利用 `podcasts://` URL 方案与 Podcasts 应用集成。假设我在浏览器中点击 [`podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903`](podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903) 这样的链接，就会直接进入 Podcasts 应用来订阅或收听播客。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/x8mjOWiMO4CVigvtV8Kg.png", alt="Chrome 浏览器显示确认对话框，询问用户是否要打开 Podcasts 应用。", width="800", height="492" %}<figcaption>Podcasts 应用可以直接从浏览器打开。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 现在尚无法处理完全自定义 URL 的方案，但我们目前正在为 PWA 的 <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URL 协议处理</a>提案努力。目前带有 <code>web+</code> 的 <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> 是最好的选择。 {% endDetails %}
+
+## 本地文件系统集成
+
+您可能不会立即想到，但 Podcasts 应用自然而然地与本地文件系统集成。下载播客剧集时，它会被下载到电脑的 `~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache` 。与 `~/Documents` 不同，这个目录当然不是普通用户可以直接访问的，但它就在那里。[离线内容](#offline-content-available-and-media-playable)部分引用了文件以外的其他存储机制。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Og60tp5kB9lVZsi3Prdt.png", alt="macOS Finder 导航到 Podcasts 应用的系统目录。", width="800", height="337" %}<figcaption>播客剧集存储在特殊的系统应用文件夹中。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} <a href="/file-system-access/">File System Access API</a> 使开发人员能够访问设备的本地文件系统。您可以直接使用它或通过 <a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access</a> 支持库使用。这个库为不支持 API 的浏览器提供回退。出于安全原因，系统目录不可通过网络访问。 {% endDetails %}
+
+## 平台外观
+
+对于像 Podcasts 这样的 iOS 应用，还有一个更微妙的事情是不言而喻的：文本标签都不可选的，所有文本都与机器的系统字体融合在一起。我对系统颜色主题（深色模式）的选择也得到了保留。
+
+<div class="switcher">
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/OAppP9uGUje6CkS7cKcZh.png", alt="深色模式下的 Podcasts 应用。", width="800", height="463" %}<figcaption>Podcasts 应用支持浅色与深色模式。</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cnVihfFR2anSBlIVfCSW.png", alt="浅色模式下的 Podcasts 应用。", width="800", height="463" %}<figcaption>该应用程序使用默认系统字体。</figcaption></figure>
+</div>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 通过将 <a href="https://developer.mozilla.org/docs/Web/CSS/user-select"><code>user-select</code></a> CSS 属性的值设为 <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>none</code></a>，您可以防止 UI 元素被意外选择。但是，请确保不要滥用此属性，从而导致无法选择<em>应用内容</em>。只应把它应用于按钮文本等 UI 元素。将 <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family</code></a> CSS 属性的值设为 <a href="https://developer.mozilla.org/docs/Web/CSS/font-family#&lt;generic-name&gt;:~:text=system%2Dui,-Glyphs"><code>system-ui</code></a> 可以让您的应用使用系统默认 UI 字体。最后，您的应用可以通过尊重用户的 <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a> 选择来遵守用户的配色方案偏好，并使用可选的<a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">深色模式切换</a>来覆盖它。另一个需要决定的事情可能是浏览器在到达滚动区域的边界时应该采取何种操作，例如，实现自定义 <em>pull to refresh</em> 。这可以通过<a href="https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior"><code>overscroll-behavior</code></a> CSS 属性实现。 {% endDetails %}
+
+## 自定义标题栏
+
+查看 Podcasts 应用窗口时，您会注意到它没有经典的集成标题栏和工具栏（例如 Safari 浏览器窗口），而是采用了一种自定义外观，看起来像停靠在主播放器窗口的侧边栏。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cB7G2e31JXU71EfvhG3i.png", alt="Safari 浏览器的集成图块栏和工具栏。", width="800", height="40" %}<figcaption></figcaption></figure>
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mFvLbyQ90wsDPQ9l86s3.png", alt="Podcasts 应用的自定义拆分自定义标题栏。", width="800", height="43" %}<figcaption> Safari 和 Podcasts 的自定义标题栏。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 虽然目前无法实现，但我们正在研究<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">标题栏自定义</a>。不过，您可以（并且应该）指定 <a href="/add-manifest/#display"><code>display</code></a> 和 <a href="/add-manifest/#theme-color"><code>theme-color</code></a> 属性，以确定应用窗口的外观，并决定应该显示哪些默认浏览器控件（可能都不显示）。 {% endDetails %}
+
+## 生动的动画
+
+Podcasts 中的动画生动流畅。例如，当我打开右侧的**剧集笔记**抽屉时，它会优雅地滑入。当我从下载中删除一集时，剩余的剧集会漂浮起来并占用被删除的剧集释放的屏幕空间。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Ucob9t4Ga3jMK20RVvSD.png", alt="展开“剧集笔记”抽屉的 Podcasts 应用。", width="800", height="463" %}<figcaption>应用内动画（例如打开抽屉时）非常生动流畅。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 如果考虑到<a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">动画和性能</a>一文中概述的许多最佳实践，网络上的高性能动画当然是可能的。使用 <a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a> 功能可以大幅改进分页内容或媒体轮播中常见的滚动动画。为了实现全面控制，您可以使用 <a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a> 。 {% endDetails %}
+
+## 在应用之外浮现的内容
+
+iOS 上的 Podcasts 应用可以在应用之外的其他位置显示内容，例如，在系统的小组件视图中，或以 Siri 建议的形式。拥有主动的、基于使用情况的调用操作，只需点击即可与之交互，可以大大提高 Podcasts 等应用程序的再参与率。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w8zhRHcKzRfgjXZu7y4h.png", alt="iOS 小组件视图显示 Podcasts 应用建议的播客新剧集。", width="751", height="1511" %}<figcaption>应用内容显示在主 Podcasts 应用之外。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} <a href="/content-indexing-api/">Content Index API</a> 可以让应用告诉浏览器可离线使用 PWA 的哪些内容。这样一来，浏览器就可以在主应用之外显示此内容。通过将应用中有趣的内容标记为适合<a href="https://developers.google.com/search/docs/data-types/speakable">朗读</a>音频播放并使用一般<a href="https://developers.google.com/search/docs/guides/search-gallery">结构化标记</a>，您可以让搜索引擎和虚拟助手（如 Google 智能助理）以理想的方式呈现您的产品。 {% endDetails %}
+
+## 锁屏媒体控制小组件
+
+播放播客剧集时，Podcasts 应用会在锁屏界面显示一个漂亮的控制小组件，其中包含剧集插图、剧集标题和播客名称等元数据。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Lr9R2zpjDEgHtyJ7hjHf.png", alt="iOS 锁屏界面上的媒体播放小组件显示了具有丰富元数据的播客剧集。", width="751", height="1511" %}<figcaption>可以从锁屏界面控制应用中的媒体播放。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 您可以通过 <a href="/media-session/">Media Session API</a> 指定插图、曲目标题等元数据，然后显示在锁屏界面、智能手表或浏览器中的其他媒体小组件上 {% endDetails %}
+
+## 推送通知
+
+推送通知现在已经成了网上的烦恼（尽管[通知提示现在安静了很多](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html)）。但如果使用得当，它们可以增加很多价值。例如，iOS Podcasts 应用可以选择性地通知我订阅的播客的新剧集或推荐新的播客，以及提醒新的应用功能。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFnNRo6BnHL6BxDmiqF7.png", alt="“通知”设置屏幕中的 iOS Podcasts 应用显示“新剧集”通知已激活。", width="751", height="1511 "%}<figcaption>应用可以通过推送通知向用户告知新内容。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %}您可以使用 <a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a> 允许应用接收推送通知，从而通知用户有关 PWA 的重要事件。对于应该在未来已知时间触发且不需要网络连接的通知，您可以使用 <a href="/notification-triggers/">Notification Triggers API</a>。 {% endDetails %}
+
+## 应用图标标记
+
+当我订阅的播客推出了新剧集时，Podcasts 主屏幕图标上的应用图标标记就会出现，再次鼓励我以不打扰的方式重新使用该应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/3smO2sJz5oMwy4RYpQoF.png", alt="iOS 设置屏幕显示“标记”切换已激活。", width="751", height="1511" %}<figcaption>标记是应用通知用户新内容的一种不起眼的方式。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %}您可以使用 <a href="/badging-api/">Badging API</a> 设置应用图标标记。当您的 PWA 有一些“未读”项目的概念时，或者当您需要不引人注意地将用户的注意力吸引回应用时，这尤其有用。 {% endDetails %}
+
+## 媒体播放优先于节能设置
+
+播放播客媒体时，屏幕可能会关闭，但系统不会进入待机模式。应用也可以选择让屏幕保持唤醒状态，例如显示歌词或字幕。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CRkipfmdkLJrND83qvQw.png", alt="macOS 的'节能'的首选项。", width="800", height="573" %}<figcaption>应用可以使屏幕保持唤醒状态。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} <a href="/wakelock/">Screen Wake Lock API</a> 可防止屏幕关闭。Web 上的媒体播放会自动阻止系统进入待机模式。 {% endDetails %}
+
+## 通过应用商店发现应用
+
+虽然 Podcasts 应用是 macOS 桌面系统内置的软件，但在 iOS 上，它需要从 App Store 安装。快速搜索 `podcast` 、`podcasts` 或 `apple podcasts` 可立即在 App Store 中打开该应用。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZLr5quaQWA9VJGAHNrLd.png", alt="在 iOS App Store 搜索“podcasts”会显示 Podcasts 应用。", width="751", height="1511" %}<figcaption>用户已经学会了在应用商店中发现应用。</figcaption></figure>
+
+{% Details %} {% DetailsSummary %} 如何在 web 上实现 {% endDetailsSummary %} 虽然 Apple 不允许在 App Store 上使用 PWA，但在 Android 上，您可以提交<a href="/using-a-pwa-in-your-android-app/">使用 Trusted Web Activity 封装</a>的 PWA。通过 <a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code></a> 脚本，封装操作非常方便。此脚本也支持 <a href="https://www.pwabuilder.com/">PWABuilder</a> 的 Android 应用导出功能，您无需用到命令行即可使用该功能。 {% endDetails %}
+
+## 功能概要
+
+下表显示了所有功能的简要概述，并提供了在 Web 上实现这些功能的实用资源列表。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>功能</th>
+        <th>在 web 上实现的实用资源</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="#capable-of-running-offline">可离线运行</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/architecture/app-shell">应用外壳模型</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#offline-content-available-and-media-playable">可使用离线内容且可播放媒体数据</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/">提供缓存的音频和视频</a></li>
+            <li><a href="https://developer.chrome.com/docs/workbox/">Workbox 库</a></li>
+            <li><a href="/storage-for-the-web/">Storage API</a></li>
+            <li><a href="/persistent-storage/">Persistent Storage API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#proactive-background-downloading">后台主动下载</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2018/12/background-fetch">Background Fetch API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#sharing-to-and-interacting-with-other-applications">与其他应用程序共享并与之交互</a></td>
+        <td>
+          <ul>
+            <li><a href="/web-share/">Web Share API</a></li>
+            <li><a href="/web-share-target/">Web Share Target API</a></li>
+            <li><a href="/image-support-for-async-clipboard/">Async Clipboard API</a></li>
+            <li><a href="/contact-picker/">Contact Picker API</a></li>
+            <li><a href="/get-installed-related-apps/">Get Installed Related Apps API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#background-app-refreshing">后台应用刷新</a></td>
+        <td>
+          <ul>
+            <li><a href="/periodic-background-sync/">Periodic Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#state-synchronized-over-the-cloud">通过云同步状态</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#hardware-media-key-controls">硬件媒体键控制</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#multitasking-and-app-shortcut">多任务处理和应用快捷方式</a></td>
+        <td>
+          <ul>
+            <li><a href="/install-criteria/">可安装性标准</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#quick-actions-in-context-menu">上下文菜单中的快速操作</a></td>
+        <td>
+          <ul>
+            <li><a href="/app-shortcuts/">应用图标快捷方式</a></li>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/master/RunOnLogin">登录时运行</a>（早期）</li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#act-as-default-app">用作默认应用</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/URLProtocolHandler/explainer.md">URL 协议处理</a>（早期）</li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#local-file-system-integration">本地文件系统集成</a></td>
+        <td>
+          <ul>
+            <li><a href="/file-system-access/">File System Access API</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/browser-fs-access">browser-fs-access 库</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#platform-look-and-feel">平台外观</a></td>
+        <td>
+          <ul>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/user-select#Syntax:~:text=none,-The"><code>user-select: none</code></a>
+            </li>
+            <li>
+              <a href="https://developer.mozilla.org/docs/Web/CSS/font-family"><code>font-family: system-ui</code></a>
+            </li>
+            <li>
+              <a href="/prefers-color-scheme/"><code>prefers-color-scheme</code></a>
+            </li>
+            <li><a href="https://github.com/GoogleChromeLabs/dark-mode-toggle">深色模式切换</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#customized-title-bar">自定义标题栏</a></td>
+        <td>
+          <ul>
+            <li>
+<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/TitleBarCustomization/explainer.md">标题栏定制</a>（前期）</li>
+            <li><a href="/add-manifest/#display">显示模式</a></li>
+            <li><a href="/add-manifest/#theme-color">主题颜色</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#snappy-animations">生动的动画</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance">动画和性能技巧</a></li>
+            <li><a href="https://developers.google.com/web/updates/2018/07/css-scroll-snap">CSS Scroll Snap</a></li>
+            <li><a href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#content-surfaced-outside-of-app">在应用之外浮现的内容</a></td>
+        <td>
+          <ul>
+            <li><a href="/content-indexing-api/">Content Index API</a></li>
+            <li><a href="https://developers.google.com/search/docs/data-types/speakable">可读出的内容</a></li>
+            <li><a href="https://developers.google.com/search/docs/guides/search-gallery">结构化标记</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#lock-screen-media-control-widget">锁屏媒体控制小组件</a></td>
+        <td>
+          <ul>
+            <li><a href="/media-session/">Media Session API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#push-notifications">推送通知</a></td>
+        <td>
+          <ul>
+            <li><a href="https://developers.google.com/web/fundamentals/push-notifications">Push API</a></li>
+            <li><a href="/notification-triggers/">Notification Triggers API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-icon-badging">应用图标标记</a></td>
+        <td>
+          <ul>
+            <li><a href="/badging-api/">Badging API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#media-playback-takes-precedence-over-energy-saver-settings">媒体播放优先于节能设置</a></td>
+        <td>
+          <ul>
+            <li><a href="/wakelock/">Screen Wake Lock API</a></li>
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td><a href="#app-discovery-through-an-app-store">通过应用商店发现应用</a></td>
+        <td>
+          <ul>
+            <li><a href="/using-a-pwa-in-your-android-app/">Trusted Web Activity</a></li>
+            <li><a href="https://github.com/GoogleChromeLabs/bubblewrap"><code>bubblewrap</code>库</a></li>
+            <li><a href="https://www.pwabuilder.com/">PWABuilder 工具</a></li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 结论
+
+自 2015 年推出以来，PWA 已经取得了长足的进步。在 [Fugu 计划🐡](https://developer.chrome.com/blog/fugu-status)的背景下，跨公司的 Chromium 团队正在努力缩小最后剩余的差距。通过遵循本文中的一些建议，您可以一点一点地接近那种类似应用的感觉，让用户忘记他们正在处理“只是一个网站”，因为老实说，大多数用户并不关心应用的构建方式（以及构建原因），只要它感觉像一个*真正的*应用就可以了。
+
+## 鸣谢
+
+本文由 [Kayce Basques](/authors/kaycebasques/) 、[Joe Medley](/authors/joemedley/) 、[Joshua Bell](https://github.com/inexorabletash) 、[Dion Almaer](https://blog.almaer.com/) 、[Ade Oshineye](https://blog.oshineye.com/) 、[Pete LePage](/authors/petelepage/) 、[Sam Thorogood](/authors/samthor/) 、[Reilly Grant](https://github.com/reillyeon) 和 [Jeffrey Yasskin](https://github.com/jyasskin) 共同审阅。
diff --git a/src/site/content/zh/progressive-web-apps/codelab-make-installable/index.md b/src/site/content/zh/progressive-web-apps/codelab-make-installable/index.md
new file mode 100644
index 00000000000..1a417dd5710
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/codelab-make-installable/index.md
@@ -0,0 +1,102 @@
+---
+layout: codelab
+title: 实现可安装
+authors:
+  - petelepage
+date: 2018-11-05
+updated: 2021-02-12
+description: |2-
+
+  在此 Codelab 中，了解如何使用
+
+  beforeinstallprompt 事件使网站可供安装。
+glitch: make-it-installable?path=script.js
+related_post: customize-install
+tags:
+  - progressive-web-apps
+---
+
+此 glitch 已经包含使渐进式 Web 应用程序可安装所需的关键组件，包括一个[非常简单的 service worker](https://glitch.com/edit/#!/make-it-installable?path=service-worker.js) 和一个 [Web 应用程序清单](https://glitch.com/edit/#!/make-it-installable?path=manifest.json)。它还有一个默认隐藏的安装按钮。
+
+## 监听 beforeinstallprompt 事件
+
+当浏览器触发 `beforeinstallprompt` 事件时，表明可以安装渐进式 Web 应用程序并且可以向用户显示安装按钮。当 PWA 满足[可安装性标准](/install-criteria/)时，将触发 `beforeinstallprompt` 事件。
+
+{% Instruction 'remix', 'ol' %}
+
+1. 将 `beforeinstallprompt` 事件处理程序添加到 `window` 对象。
+2. 将 `event` 保存为全局变量；稍后需要它来显示提示。
+3. 取消隐藏安装按钮。
+
+代码：
+
+```js
+window.addEventListener('beforeinstallprompt', (event) => {
+  // 防止迷你信息栏出现在移动设备上。
+  event.preventDefault();
+  console.log('👍', 'beforeinstallprompt', event);
+  // 隐藏事件，以便以后再触发。
+  window.deferredPrompt = event;
+  // 从安装按钮容器中删除 'hidden' 类。
+  divInstall.classList.toggle('hidden', false);
+});
+```
+
+## 处理安装按钮点击
+
+要显示安装提示，请对保存的 `beforeinstallprompt` 事件调用 `prompt()`。调用 `prompt()` 是在安装按钮点击处理程序中完成的，因为 `prompt()` 必须从用户手势调用。
+
+1. 为安装按钮添加点击事件处理程序。
+2. 在保存的 `beforeinstallprompt` 事件上调用 `prompt()`。
+3. 记录提示的结果。
+4. 将保存的 `beforeinstallprompt` 事件设置为  null。
+5. 隐藏安装按钮。
+
+代码：
+
+```js
+butInstall.addEventListener('click', async () => {
+  console.log('👍', 'butInstall-clicked');
+  const promptEvent = window.deferredPrompt;
+  if (!promptEvent) {
+    // 延迟提示不存在。
+    return;
+  }
+  // 显示安装提示。
+  promptEvent.prompt();
+  // Log the result
+  const result = await promptEvent.userChoice;
+  console.log('👍', 'userChoice', result);
+  // 重置延迟提示变量，因为
+  // prompt() 只能调用一次。
+  window.deferredPrompt = null;
+  // 隐藏安装按钮。
+  divInstall.classList.toggle('hidden', true);
+});
+```
+
+## 跟踪安装事件
+
+通过安装按钮安装渐进式 Web 应用程序只是用户安装 PWA 的一种方式。用户还可以使用 Chrome 的菜单、迷你信息栏和[多功能框中的图标](/promote-install/#browser-promotion) 来安装。可以通过监听 `appinstalled` 事件来跟踪所有这些安装方式。
+
+1. 将`appinstalled`事件处理程序添加到 `window` 对象。
+2. 将安装事件记录到分析或其他机制。
+
+代码：
+
+```js
+window.addEventListener('appinstalled', (event) => {
+  console.log('👍', 'appinstalled', event);
+  // 清除 deferredPrompt，以便将其收集起来
+  window.deferredPrompt = null;
+});
+```
+
+## 深入阅读
+
+恭喜，您的应用程序现在可以安装了！
+
+以下是您可以执行的一些其他操作：
+
+- [检测您的应用程序是否从主屏幕启动](/customize-install/#detect-mode)
+- [改为显示操作系统的应用程序安装提示](https://developer.chrome.com/blog/app-install-banners-native/)
diff --git a/src/site/content/zh/progressive-web-apps/customize-install/index.md b/src/site/content/zh/progressive-web-apps/customize-install/index.md
new file mode 100644
index 00000000000..eb8c9dfc982
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/customize-install/index.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: 如何提供应用内安装体验
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: |2-
+
+  使用 beforeinstallprompt 事件为您的用户提供自定义、无缝的应用内安装体验。
+tags:
+  - progressive-web-apps
+---
+
+许多浏览器使您可以直接在 PWA 的用户界面内启用并推进您的渐进式 Web 应用 (PWA) 的安装。安装（以前有时称为添加到主屏幕）使用户可以轻松地在他们的移动或桌面设备上安装您的 PWA。安装 PWA 会将其添加到用户的启动器中，使其可以像任何其他已安装的应用一样运行。
+
+除了[浏览器提供的安装体验之外](/promote-install/#browser-promotion)，还可以直接在您的应用内提供您自己的自定义安装流程。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SW3unIBfyMRTZNK0DRIw.png", alt="Spotify PWA 中提供的安装应用按钮", width="491", height="550" %}<figcaption> Spotify PWA 中提供的“安装应用”按钮</figcaption></figure>
+
+在考虑是否推进安装时，最好考虑用户通常如何使用您的 PWA。例如，如果有一组用户在一周内多次使用您的 PWA，则从智能手机主屏幕或桌面操作系统的开始菜单启动您的应用会令这些用户受益于额外的便利。在安装 `standalone` 或 `minimal-ui` 模式下，删除窗口中的浏览器工具栏，创建额外的屏幕空间，也会让生产性和娱乐性应用程序受益。
+
+## 推进安装 {: #promote-installation }
+
+为了表明您的渐进式 Web 应用可安装，并提供自定义的应用内安装流程，请执行下列操作：
+
+1. 侦听 `beforeinstallprompt` 事件。
+2. 保存 `beforeinstallprompt` 事件，以便将来可以使用它来触发安装流程。
+3. 提醒用户您的 PWA 是可安装的，并提供一个按钮或其他元素来启动应用内安装流程。
+
+{% Aside %} `beforeinstallprompt` 事件和 `appinstalled` 事件已从网络应用清单规范移至它们自己的[孵化器](https://github.com/WICG/beforeinstallprompt)。 Chrome 团队仍然致力于支持它们，并且没有计划取消或弃用支持。Google 的 Web DevRel 团队继续推荐使用它们来提供定制的安装体验。 {% endAside %}
+
+### 侦听 `beforeinstallprompt` 事件 {: #beforeinstallprompt }
+
+如果您的渐进式 Web 应用满足所需的[安装标准](/install-criteria/)，则浏览器会触发 `beforeinstallprompt` 事件。保存对事件的引用，并更新您的用户界面以向用户表明可以安装您的 PWA。如下突出显示。
+
+```js
+// Initialize deferredPrompt for use later to show browser install prompt.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent the mini-infobar from appearing on mobile
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI notify the user they can install the PWA
+  showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
+```
+
+{% Aside %}您可以使用多种不同[模式](/promote-install/)来通知用户您的应用可以安装并提供应用内安装流程，例如，标题中的按钮、导航菜单中的一项或您的内容提要。 {% endAside %}
+
+### 应用内安装流程 {: #in-app-flow }
+
+要提供应用内安装，请提供一个按钮或其他界面元素，以供用户点击来安装您的应用。点击该元素后，将调用已保存的 `beforeinstallprompt` 事件（存储在 `deferredPrompt` 变量中）的 `prompt()`。其会向用户显示一个模式安装对话框，要求他们确认想要安装您的 PWA。
+
+```js
+buttonInstall.addEventListener('click', async () => {
+  // Hide the app provided install promotion
+  hideInstallPromotion();
+  // Show the install prompt
+  deferredPrompt.prompt();
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.userChoice;
+  // Optionally, send analytics event with outcome of user choice
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null;
+});
+```
+
+`userChoice` 属性是根据用户的选择进行解析的承诺。您只能调用延迟事件的 `prompt()` 一次。如果用户关闭了它，您需要等到 `beforeinstallprompt` 事件被再次触发，通常是在 `userChoice` 属性解析后立即触发。
+
+{% Aside 'codelab' %}[使用 beforeinstallprompt 事件使网站可安装](/codelab-make-installable)。 {% endAside %}
+
+## 检测 PWA 是否被成功安装  {: #detect-install }
+
+您可以使用 `userChoice` 属性来确定用户是否从您的用户界面中安装了您的应用。不过，如果用户从地址栏或其他浏览器组件安装您的 PWA，则 `userChoice` 将不起作用。相反，您应该侦听 `appinstalled` 事件。无论何时安装 PWA，无论使用什么机制安装 PWA，它都会被触发。
+
+```js
+window.addEventListener('appinstalled', () => {
+  // Hide the app-provided install promotion
+  hideInstallPromotion();
+  // Clear the deferredPrompt so it can be garbage collected
+  deferredPrompt = null;
+  // Optionally, send analytics event to indicate successful install
+  console.log('PWA was installed');
+});
+```
+
+## 检测 PWA 的启动方式 {: #detect-launch-type }
+
+CSS `display-mode` 媒体查询指示 PWA 的启动方式，无论是在浏览器选项卡中启动，还是作为已安装的 PWA 启动。这使得可以根据应用的启动方式应用不同的样式。例如，当作为已安装的 PWA 启动时，始终隐藏安装按钮并提供后退按钮。
+
+### 跟踪 PWA 的启动方式
+
+要跟踪用户启动 PWA 的方式，请使用 `matchMedia()` 测试 `display-mode` 媒体查询。iOS 上的 Safari 尚不支持此功能，因此您必须检查 `navigator.standalone` ，它会返回一个布尔值，指示浏览器是否在独立模式下运行。
+
+```js
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+```
+
+### 跟踪显示模式的变化
+
+要跟踪用户是否在 `standalone` 和 `browser tab` 之间发生变化，请侦听`display-mode` 媒体查询的变化。
+
+```js
+window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
+  let displayMode = 'browser';
+  if (evt.matches) {
+    displayMode = 'standalone';
+  }
+  // Log display mode change to analytics
+  console.log('DISPLAY_MODE_CHANGED', displayMode);
+});
+```
+
+### 根据当前显示模式更新 UI
+
+要在作为已安装 PWA 启动时为 PWA 应用不同的背景颜色，请使用条件 CSS：
+
+```css
+@media all and (display-mode: standalone) {
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## 更新应用的图标和名称
+
+如果您需要更新应用名称或提供新图标怎么办？查看 [Chrome <br> 如何处理 Web 应用清单的更新](/manifest-updates/)，了解这些更改何时以及如何反映在 Chrome 中。
diff --git a/src/site/content/zh/progressive-web-apps/define-install-strategy/index.md b/src/site/content/zh/progressive-web-apps/define-install-strategy/index.md
new file mode 100644
index 00000000000..d83903472cf
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/define-install-strategy/index.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: 如何定义安装策略
+authors:
+  - demianrenzulli
+  - petelepage
+date: 2020-05-12
+updated: 2020-08-20
+description: |2-
+
+  组合不同安装产品以提高安装率并避免平台竞争和自身蚕食的最佳实践。
+tags:
+  - progressive-web-apps
+---
+
+{% YouTube '6R9pupbDXYw' %}
+
+过去，只有在平台特定应用程序上下文中才能安装应用程序。而如今，现代 Web 应用程序拥有可安装体验，提供与平台特定应用程序相同级别的集成和可靠性。
+
+您可以通过不同的方式实现这一点：
+
+- [从浏览器](/customize-install/)安装 PWA。
+- [从应用商店](https://developer.chrome.com/docs/android/trusted-web-activity/)安装 PWA。
+
+拥有不同分销渠道是接触大量用户的有效方式，但选择正确的推广策略很有挑战性。
+
+本指南探讨了组合不同安装产品以提高安装率并避免平台竞争和自身蚕食的最佳实践。涵盖的安装产品包括从浏览器和应用商店安装的 PWA，以及平台特定应用程序。
+
+## 为什么要让您的 Web 应用程序可安装？
+
+安装后的渐进式 Web 应用程序在独立窗口中运行，而不是在浏览器标签页中运行。它们可以从用户的主屏幕、程序坞、任务栏或工具架上启动。您可以在设备上搜索它们并使用应用程序切换器在它们之间跳转，从而感觉这些程序就像其所在设备的一部分。
+
+但是同时拥有可安装 Web 应用程序和平台特定应用程序可能会让用户感到困惑。对于某些用户，平台特定应用程序可能是最佳选择，但对于其他用户，这种应用程序可能存在一些缺点：
+
+- **存储限制：**安装新应用程序可能意味着删除其他应用程序，或通过移除有价值的内容来清理空间。这对低端设备的用户尤其不利。
+- **可用带宽：**下载应用程序可能是一个成本高昂且缓慢的过程，对于连接速度较慢和数据计划成本较高的用户来说更是如此。
+- **冲突：**离开网站然后转到商店下载应用程序会产生额外的冲突，并会延迟用户直接在网络上执行的操作。
+- **更新周期：**在平台特定应用程序中进行更改可能需要经历应用程序审核流程，这样可能会减慢更改和试验（例如 A/B 测试）的速度。
+
+在某些情况下，会有比较多的用户不会下载您的平台特定应用程序，例如：认为自己不会经常使用该应用程序的用户，或者不想花费数兆字节存储空间或数据的用户。您可以通过多种方式确定此部分用户的规模，例如通过使用分析设置来跟踪“仅限移动 Web”用户的百分比。
+
+如果此部分用户的规模相当大，则表明您需要提供其他安装体验方式。
+
+## 推广通过浏览器安装 PWA
+
+如果您有一个优质 PWA，最好在您平台特定应用程序上推广此安装方式。例如，平台特定应用程序缺少您 PWA 提供的功能，或者已有一段时间未更新。如果没有针对更大屏幕（例如 Chrome 操作系统）优化平台特定应用程序，那么推广使用 PWA 安装也很有帮助。
+
+对于某些应用程序，推动平台特定应用程序安装是商业模式的关键部分，在这种情况下，展示平台特定应用程序安装促销具有商业意义。但是，还是有些用户可能更愿意留在网络上。如果可以确定这部分用户，则可以只向他们显示 PWA 提示（我们称之为“PWA 备选”）。
+
+在本节中，我们将探索不同方法，将通过浏览器安装的 PWA 安装率最大化。
+
+### PWA 作为主要可安装体验
+
+只要 PWA 满足[可安装性标准](/install-criteria/)，大多数浏览器便会显示可安装 PWA 的指示。例如，桌面 Chrome 会在地址栏中显示可安装图标，在移动设备上会显示迷你信息栏：
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1VOvbQjeenZOBAmzjVN5.png", alt="名为迷你信息栏的标准 Chrome 安装提示", width="800", height="417" %}<figcaption>迷你信息栏</figcaption></figure>
+
+虽然对于某些体验来说这已足够，但如果您的目标是要推动 PWA 的安装，我们强烈建议您关注 [`BeforeInstallPromptEvent`](https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent) ，并遵循[推广 PWA 安装的模式](/promote-install/)。
+
+## 防止您的 PWA 自身蚕食您平台特定应用程序安装率
+
+在某些情况下，您可能会选择推广安装平台特定应用程序优于安装 PWA，但在这种情况下我们仍然建议您提供一种机制，允许用户安装您的 PWA。此备用选项使无法安装或不想安装您平台特定应用程序的用户可以获得相似的已安装体验。
+
+实施此策略的第一步为，定义何时向用户显示 PWA 安装推广，例如：
+
+**“PWA 用户是看到平台特定应用程序安装提示但尚未安装平台特定应用程序的用户。他们至少返回网站五次，或者点击过应用程序横幅，但仍然继续使用该网站。”**
+
+然后，可以通过以下方式实现提示：
+
+1. 显示平台特定应用程序安装横幅。
+2. 如果用户关闭横幅，则使用该信息设置 cookie（例如 `document.cookie = "app-install-banner=dismissed"` ）。
+3. 使用另一个 cookie 来跟踪用户访问站点的次数（例如 `document.cookie = "user-visits=1"` ）。
+4. 编写一个函数（例如 `isPWAUser()` ），它使用先前存储在 cookie 中的信息以及 [`getInstalledRelatedApps()`](/get-installed-related-apps/) API 来确定是否将用户视为“PWA 用户”。
+5. 在用户执行有意义的操作时，调用 `isPWAUser()` 。如果该函数返回 true 并且之前已保存 PWA 安装提示，则可以显示 PWA 安装按钮。
+
+## 通过应用商店推广 PWA 安装
+
+应用商店中提供的应用程序可以使用不同的技术进行构建，包括 PWA 技术。在[将 PWA 融入本地环境](https://youtu.be/V7YX4cZ_Cto)，您能找到可用于相应端的技术汇总。
+
+在本节中，我们将商店中的应用程序分为两组：
+
+- **平台特定应用程序：**这种应用程序大多是使用特定于平台的代码构建的。它们的大小取决于平台，在 Android 中通常大于 10MB，在 iOS 中通常为 30MB。如果您没有 PWA，或者平台特定应用程序提供了更完整的功能设置，那么您可能想要推广您的平台特定应用程序。
+- **轻量级应用程序：**这种应用程序也可以使用特定于平台的代码构建，但通常使用 Web 技术构建，打包在平台特定的包装器中。也可以将全套 PWA 上传到商店。有些公司选择将这些内容作为“精简”体验提供，其他公司也将这种方法用于其旗舰（核心）应用程序。
+
+### 推广轻量级应用程序
+
+根据 [Google Play 研究](https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2)，APK 的大小每增加 6 MB，安装转化率就会降低 1%。这意味着 10 MB 应用程序的下载完成率可能比 **100 MB 应用程序的下载完成率高大约 30%！**
+
+为了解决这个问题，一些公司利用其 PWA，以使用受信任网络活动在 Play Store 中提供轻量级版本的应用程序。 使用[受信任网络活动](https://developer.chrome.com/docs/android/trusted-web-activity/)，可以在 Play Store 中提供您的 PWA，并且因为它是使用网络构建的，所以应用程序大小通常只有几兆字节。
+
+Oyo 是印度最大的酒店公司之一，开发了其[精简版应用程序](/oyo-lite-twa/)，并使用 TWA 在 Play Store 中予以提供。它只有 850 KB，仅在其 Android 应用程序大小的 7%。安装后，与它们的 Android 应用程序别无二致：
+
+<figure>
+  <video controls autoplay loop muted>
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.webm" type="video/webm; codecs=vp8">
+    <source src="https://storage.googleapis.com/web-dev-assets/oyo-case-study/oyo-lite.mp4" type="video/mp4; codecs=h264">
+  </source></source></video>
+ <figcaption>当前提供的 OYO 精简版。</figcaption></figure>
+
+Oyo 在商店中保留了旗舰版和“精简版”应用程序版本，将最终决定权留给用户。
+
+#### 提供轻量级 Web 体验
+
+在直觉上，低端设备的用户可能比高端手机用户更倾向于下载轻量级版本的应用程序。因此，如果可以识别用户的设备，则可以优先考虑轻量级应用程序安装横幅，不考虑平台特定重量级用程序版本。
+
+在网络上，可以获取设备信号并将其大致映射到设备类别（例如“高”、“中”或“低”）。您可以使用 JavaScript API 或客户端提示以不同方式获取此信息。
+
+#### 使用 JavaScript API
+
+使用诸如 [navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency) 、 [navigator.deviceMemory](https://developer.mozilla.org/docs/Web/API/Navigator/deviceMemory) 和 [navigator.connection](https://developer.mozilla.org/docs/Web/API/Navigator/connection) 等 JavaScript API，您可以分别获取有关设备 CPU、内存和网络状态的信息。例如：
+
+```javascript
+const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
+```
+
+#### 使用客户端提示
+
+也可以通过[客户端提示](https://developer.mozilla.org/docs/Glossary/Client_hints)在 HTTP 请求头中推断设备信号。如何使用客户端提示为设备内存实施先前代码如下：
+
+首先，告知浏览器您想要在任何第一方请求的 HTTP 响应请求头中接收设备内存提示：
+
+```html
+HTTP/1.1 200 OK
+Content-Type: text/html
+Accept-CH: Device-Memory
+```
+
+然后，您会开始在 HTTP 请求的请求头中接收设备内存信息：
+
+```html
+GET /main.js HTTP/1.1
+Device-Memory: 0.5
+```
+
+您可以在后端使用此信息存储具有用户设备类别的 cookie：
+
+```javascript
+app.get('/route', (req, res) => {
+  // 确定设备类别
+
+ const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
+
+  // 设置 cookie
+  res.setCookie('Device-Category', deviceCategory);
+  …
+});
+```
+
+最后，创建您自己的逻辑将此信息映射到设备类别，并在每种情况下显示相应的应用程序安装提示：
+
+```javascript
+if (isDeviceMidOrLowEnd()) {
+   // 显示"精简版应用程序"安装横幅或 PWA A2HS 提示
+} else {
+  // 显示"核心应用程序"安装横幅
+}
+```
+
+{% Aside %}本指南未深入介绍如何将设备信号映射到设备类别的技术，但您可以查阅 Addy Osmani 所著的[自适应加载指南](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69)、Philip Walton 所著的[设备内存 API](https://developer.chrome.com/blog/device-memory/) 和 Jeremy Wagner 所著的[使用客户端提示适应用户](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints/)，了解有关此方面最佳实践的更多信息。{% endAside %}
+
+## 结论
+
+能在用户的主屏幕上显示图标是应用程序最吸引人的功能之一。鉴于之前此功能仅适用于从应用商店安装的应用程序，公司会认为显示应用商店安装横幅便足以说服用户来安装体验。目前，有更多种选择让用户安装应用程序，例如在商店中提供轻量级应用程序体验，以及通过提示用户直接从网站进行安装，让用户将 PWA 添加到主屏幕。
diff --git a/src/site/content/zh/progressive-web-apps/drive-business-success/index.md b/src/site/content/zh/progressive-web-apps/drive-business-success/index.md
new file mode 100644
index 00000000000..26c6f2913fa
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/drive-business-success/index.md
@@ -0,0 +1,161 @@
+---
+layout: post
+title: 渐进式 Web 应用如何推动业务成功
+authors:
+  - sfourault
+date: 2020-05-20
+updated: 2020-05-20
+description: 为您的 PWA 构建可靠的商业案例。了解何时应该投资，以及如何测量其成功性。
+tags:
+  - progressive-web-apps
+---
+
+渐进式 Web 应用是许多公司的投资策略，他们希望借此实现其网站的现代化并适应用户的新期望。像所有新概念和技术功能一样，他们疑虑重重：这是否是我的客户所期望的，它将带给我的业务怎样的增长，在技术上的可行性如何？
+
+{% Img src="image/admin/o70RxMcAQVPrjxH34a8r.jpg", alt="识别您的利益相关者", width="800", height="254" %}
+
+为了制定您的数字战略，通常会涉及到几个利益相关者：产品经理和 CMO 是每个功能的业务影响的共同所有者，CTO 评估技术的可行性和可靠性，用户体验研究人员验证功能是否能回答真正的客户问题。
+
+本文旨在帮助您回答这三个问题并制定您的 PWA 项目。您将从您的客户需求开始，将其转化为 PWA 功能，并专注于衡量每个功能带来的业务影响。
+
+## PWA 解决客户需求 {: #solve-customer-needs }
+
+我们在 Google 制作产品时喜欢遵循的一条规则是“[以用户为中心，则一切将水到渠成](https://www.google.com/about/philosophy.html)”。以*用户至上*为遵旨：客户的需求是什么，PWA 如何满足他们？
+
+{% Img src="image/admin/TcmXmWb5mSUqal98NIAH.jpg", alt="识别客户需求", width="800", height="262" %}
+
+在进行用户研究时，我们发现了一些有趣的模式：
+
+- 用户讨厌移动设备上的延迟和不可靠性：移动设备延迟造成的压力程度[堪比观看恐怖电影](https://blog.hubspot.com/marketing/mobile-website-load-faster)。
+- 50% 的智能手机用户在浏览或购物时更有可能使用公司的移动网站，因为他们[不想下载应用](https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences/)。
+- 卸载应用程序的主要原因之一是[存储空间有限](https://www.thinkwithgoogle.com/data/why-users-uninstall-travel-apps/)（而安装 PWA 通常不到 1MB）。
+- 智能手机用户更有可能从[提供相关产品推荐](https://www.thinkwithgoogle.com/data/smartphone-mobile-app-and-site-purchase-data/)的移动网站购买，85% 的智能手机用户表示[移动通知很有用](https://www.thinkwithgoogle.com/data/smartphone-user-notification-preferences/)。
+
+根据这些观察，我们发现客户更喜欢快速、可安装、可靠和有趣 (F.I.R.E.) 的体验！
+
+## PWA 利用现代网络功能 {: #modern-capabilities }
+
+PWA 提供系列最佳实践和现代 Web API，旨在让您的网站快速、可安装、可靠和有趣，从而满足客户的需求。
+
+例如，使用 Service Worker [缓存您的资源](/service-workers-cache-storage/)并进行[预测性预取](/precache-with-workbox/)可以使您的站点更快、更可靠。使您的网站可安装，为您的客户提供了一种直接从其主屏幕或应用启动器访问它的简便方法。[网络推送通知](https://developer.mozilla.org/docs/Web/API/Push_API/Best_Practices)等新的 API 可以更轻松地通过个性化内容重新吸引用户以产生忠诚度。
+
+{% Img src="image/admin/rP0eNCflNYOhzjPi1Lq5.jpg", alt="使用新功能改善用户体验", width="800", height="393" %}
+
+## 了解业务影响 {: #business-impact }
+
+根据您的活动，业务成功的定义可能有很多：
+
+- 用户在您的服务上花费更多时间
+- 降低潜在客户的跳出率
+- 提高转化率
+- 更多回头客
+
+大多数 PWA 项目会产生更高的移动转化率，您可以从众多 [PWA 案例研究](https://www.pwastats.com/)中了解更多信息。根据您的目标，您可能希望优先考虑 PWA 的某些对您的业务更有意义的方面，这完全没问题。PWA 功能可以单独挑选和启动。
+
+让我们来讨论每个 F.I.R.E 重要功能的业务影响。
+
+### 快速网站的业务影响 {: #impact-fast }
+
+[Deloitte Digital](https://www2.deloitte.com/ie/en/pages/consulting/articles/milliseconds-make-millions.html) 最近开展的一项研究表明，页面速度对业务指标有重大影响。
+
+您可以做很多事情来优化网站的速度，从而优化所有用户的关键体验。如果您不知道从哪里开始，请查看我们的[快速](/fast/)部分，并使用 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 确定要修复的最重要的事情的优先级。
+
+进行速度优化时，首先使用适当的工具和指标经常测量您的网站速度以监控您的进度。例如，使用[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 测量您的指标，确定明确的目标，例如拥有[“良好”的 Core Web Vitals 分数](/vitals/#core-web-vitals)，并[将性能预算纳入您的构建过程](/incorporate-performance-budgets-into-your-build-tools/)。由于您的日常测量和[“速度值”方法](/value-of-speed/)，您可以隔离增量速度变化的影响并计算您的工作产生了多少额外收入。
+
+{% Img src="image/admin/yyRfQaDL3NcGhB0f79RN.jpg", alt="测量速度值并将其与转化相关联", width="800", height="306" %}
+
+Ebay 在 2019 年将[速度作为公司的目标](/shopping-for-speed-on-ebay/)。他们使用了性能预算、关键路径优化和预测性预取等技术。他们得出的结论是，搜索页面加载时间每改进 100 毫秒，添加到购物车的数量就会增加 0.5%。
+
+{% Img src="image/admin/Qq3wo5UOqzC1ugnTzdqT.jpg", alt="加载时间改进 100 毫秒使得 eBay 购物车的添加数量增加了 0.5%", width="800", height="184" %}
+
+### 可安装网站的业务影响 {: #impact-installable }
+
+为什么要让用户安装您的 PWA？目的是让用户更轻松地返回您的网站。Android 应用安装至少会增加三个步骤（重定向到 Play Store、下载 Android 应用、在漏斗顶部重新启动应用），PWA 安装则只需一键即可无缝完成，并且不会让用户离开当前的转化漏斗。
+
+{% Img src="image/admin/u1jcKrBBOHEzSz3SqhEB.jpg", alt="安装体验应该是无缝的", width="800", height="239" %}
+
+安装后，用户可以通过主屏幕上的图标一键启动应用，在应用之间切换时可在应用托盘中看到应用，或者通过应用搜索结果找到应用。我们称这为应用动态发现-启动-切换，让您的 PWA 可安装是解锁访问的关键。
+
+除了可以从他们设备上熟悉的发现和启动界面访问之外，PWA 的启动与特定于平台的应用完全一样：在独立体验中，与浏览器分开。此外，它还受益于操作系统级设备服务，例如应用切换器和设置。
+
+安装您 PWA 的用户很可能是您的参与度最高的用户，他们的参与度指标比临时访问者更好，包括更多的重复访问、更长的网站时间和更高的转化率，通常与移动设备上特定平台的应用用户同等。
+
+要使您的 PWA 可安装，其需要满足[基本标准](/install-criteria/)。一旦满足这些标准，您就可以在桌面和移动设备（包括 iOS）上[提升安装](/promote-install/)，改善用户体验。
+
+{% Img src="image/admin/5sH5YX7kFrwv4f6duqVf.jpg", alt="PWA 可以在任何地方安装", width="800", height="227" %}
+
+一旦您开始提升您的 PWA 的安装，您应该测量有多少用户正在安装您的 PWA，以及他们如何使用您的 PWA。
+
+为了最大限度地提升安装您网站的用户数量，您可能想要[测试不同的](https://pwa-book.awwwards.com/chapter-4)提升信息（例如“一秒内安装”或“添加我们的快捷方式以方便您”）、不同的展示位置（标题横幅、源中） ，并尝试在漏斗的不同步骤（在访问的第二页或预订后）提出建议。
+
+要了解您的用户离开的原因以及如何提高留存率，可以通过下列四种方式[测量](https://pwa-book.awwwards.com/chapter-8)安装漏斗：
+
+- 有资格安装的用户数量
+- 点击 UI 安装提示的用户数量
+- 接受和拒绝安装的用户数量
+- 成功安装的用户数量
+
+开始，您可以针对所有用户提升您的 PWA 安装，或者使用更谨慎的方法，仅对一小部分用户进行试验。
+
+几天或几周后，您应该已经有一些数据来测量对您业务的影响。人们对安装的快捷方式的反应如何？他们参与得更多，还是他们转化得更多？
+
+要细分安装了您的 PWA 的用户，请跟踪 [`appinstalled` 事件](/customize-install/#detect-install)，并使用 JavaScript[检查用户是否处于独立模式](/customize-install/#detect-launch-type)（表示已安装 PWA）。然后将这些用作分析跟踪的变量或维度。
+
+{% Img src="image/admin/H2U4jKTmATNzVJQ3WNCO.jpg", alt="测量安装值", width="800", height="253" %}
+
+Weekendesk 的[案例研究](https://www.thinkwithgoogle.com/_qs/documents/8971/Weekendesk_PWA_-_EXTERNAL_CASE_STUDY.pdf)很有趣：他们建议在访问的第二页进行安装以最大化安装率，并且他们观察到通过主屏幕上的图标返回的客户预订住宿的可能性提高了两倍多。
+
+{% Img src="image/admin/eR23C2o1adHq5tATNw34.jpg", alt="已安装用户的转化率提高了 2.5 倍", width="800", height="201" %}
+
+安装是让人们回到您的网站并提高客户忠诚度的好方法。您还可以考虑为这些高级用户个性化体验。
+
+即使您已经有一个特定于平台的应用，您也可以先测试以推荐您的应用，然后再为那些拒绝或没有参与应用安装横幅的人推送 PWA。您的一些“半参与”用户可能不符合基于应用商店的安装阈值。这个群体可以通过 PWA 可安装性来解决，它通常被认为更轻，摩擦更少。
+
+{% Img src="image/admin/iNQalNPhjdBueuqPHiad.jpg", alt="PWA 可以覆盖半参与用户", width="800", height="229" %}
+
+### 可靠网站的业务影响 {: #impact-reliable }
+
+Chrome Dino 游戏在用户离线时提供，每月[游戏次数超过 2.7 亿次。](https://www.blog.google/products/chrome/chrome-dino/)这个令人印象深刻的数字表明，网络可靠性是一个相当大的机会，尤其是在印度、巴西、墨西哥或印度尼西亚等移动数据不可靠或昂贵的市场中。
+
+当启动从应用商店安装的应用时，用户希望无论他们是否连接互联网都能够将其打开。渐进式 Web 应用也应不例外。
+
+至少，应该提供一个简单的离线页面，告诉用户应用程序在没有网络连接的情况下不可用。然后，考虑通过提供一些[离线时仍可用的有意义功能](https://pwa-book.awwwards.com/chapter-6)来进一步提升体验。例如，您可以提供门票或登机牌、离线愿望清单、呼叫中心联系信息、用户最近查看的文章或食谱等的访问权限。
+
+{% Img src="image/admin/ubglZLCoddAfB5cl8JSz.jpg", alt="即使离线也有帮助", width="800", height="243" %}
+
+一旦您实现了[可靠的用户体验](https://pwa-book.awwwards.com/chapter-6)，您可能想要对其进行测量；有多少用户离线，在哪些地区，当网络恢复时他们是否留在网站上？
+
+离线使用情况可以通过记录用户[离线或在线](https://pwa-book.awwwards.com/chapter-8)时的分析 ping 来测量。它告诉您有多少用户在网络恢复后继续浏览您的网站。
+
+{% Img src="image/admin/UfjYsWQWJjVIk2sp5bnE.jpg", alt="Trivago 看到有 67% 的用户返回在线继续浏览", width="800", height="272" %}
+
+[Trivago 案例研究](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-studies/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)说明了这如何影响您的业务目标：对于会话被离线时段中断的用户（大约 3% 的用户），67% 的用户重新上线后继续浏览网站。
+
+### 有趣的网站的业务影响 {: #impact-engaging }
+
+Web 推送通知允许用户选择接收他们喜欢的网站的及时更新，并允许您通过定制的相关内容有效地重新吸引他们。
+
+不过要小心。要求用户在他们第一次到达时注册 Web 通知而不暴露好处可能会被视为垃圾邮件，并对您的体验产生负面影响。确保在提示通知时遵循[最佳实践](https://developers.google.com/web/fundamentals/push-notifications/permission-ux)，并通过火车延误、价格跟踪、缺货产品等相关方法激发接受度。
+
+从技术上讲，网络上的[推送通知](https://developers.google.com/web/fundamentals/push-notifications/)在后台运行，这要归功于 Service Worker，并且这些通知通常由为管理活动而构建的系统（例如 Firebase）发送。此功能为移动 (Android) 和桌面用户带来了巨大的商业价值：它增加了重复访问量，从而增加了销售和转化率。
+
+要测量您的推送活动的有效性，您需要测量整个漏斗：
+
+- 有资格获得推送通知的用户数量
+- 点击自定义通知 UI 提示的用户数
+- 授予推送通知权限的用户数
+- 收到推送通知的用户数
+- 参与通知的用户数
+- 来自通知的用户转化和参与
+
+{% Img src="image/admin/UpzfxBDi3e66cZ9gzkkS.jpg", alt="测量网页推送通知的值", width="800", height="255" %}
+
+有很多关于网络推送通知的优秀案例研究，比如家乐福，通过重新吸引用户购买曾经放弃的购物车物品[，将转化率提高了 4.5 倍。](https://useinsider.com/case-studies/carrefour/)
+
+## PWA 中的 P：渐进式发布，逐个功能 {: #feature-by-feature }
+
+PWA 是现代化网站，受益于网络的广泛覆盖范围，结合了  Android/iOS/ 桌面应用中所有用户喜爱的友好功能。它们利用了一系列最佳实践和现代 Web API，可以根据您的业务特性和优先级独立实施。
+
+{% Img src="image/admin/7g1j2z7h5m9QSHQhHceM.jpg", alt="渐进启动您的 PWA", width="800", height="253" %}
+
+为了加速您网站的现代化并使其成为真正的 PWA，我们鼓励您保持敏捷：逐个启动功能。首先，与您的用户一起研究哪些功能会给他们带来最大的价值，然后与您的设计师和开发人员一起实现这些功能，最后不要忘记精确测量您的 PWA 带来了多少额外的收入。
diff --git a/src/site/content/zh/progressive-web-apps/index.md b/src/site/content/zh/progressive-web-apps/index.md
new file mode 100644
index 00000000000..72722ef1d75
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: progressive-web-apps
+---
diff --git a/src/site/content/zh/progressive-web-apps/install-criteria/index.md b/src/site/content/zh/progressive-web-apps/install-criteria/index.md
new file mode 100644
index 00000000000..5b8a1dea7d2
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/install-criteria/index.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: 如何安装？
+authors:
+  - petelepage
+date: 2020-02-14
+updated: 2021-05-19
+description: 渐进式 Web 应用程序安装条件。
+tags:
+  - progressive-web-apps
+---
+
+渐进式 Web 应用程序 (PWA) 是利用 Web 技术构建的现代高质量应用程序。PWA 可以提供与 iOS/Android/桌面应用程序类似的功能，而且在不稳定的网络条件下也很可靠，为了更便于找到和使用，用户还可以安装这种应用程序。
+
+大多数用户都熟悉安装应用程序以及安装体验的好处。安装的应用程序会显示在操作系统启动界面上，例如 Mac OS X 上的应用程序文件夹，Windows 上的开始菜单以及 Android 和 iOS 上的主屏幕。安装的应用程序还会显示在活动切换器、设备搜索引擎（如 Spotlight）和内容共享表中。
+
+大多数浏览器会向用户说明，在满足特定条件时，可以安装渐进式 Web 应用程序 (PWA)。示例指示器包括地址栏中的安装按钮，或溢出菜单中的安装菜单项。
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/O9KXz4aQXm3ZOzPo98uT.png", alt="安装指示器可见的多功能地址栏屏幕截图。", width="800", height="307" %}<figcaption>浏览器提供的安装推广栏（桌面）</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bolh05TCEeT7xni4eUTG.png", alt="浏览器提供安装推广栏的截图。", width="800", height="307" %}<figcaption>浏览器提供的安装推广栏（移动）</figcaption></figure>
+</div>
+
+此外，当满足条件时，许多浏览器将触发 `beforeinstallprompt` 事件，从而允许您提供自定义的应用内用户体验，这种体验可以触发应用内安装流程。
+
+## 安装条件 {: #criteria }
+
+在 Chrome 中，渐进式 Web 应用程序必须满足以下条件才能触发 `beforeinstallprompt` 事件和显示浏览器内安装推广栏：
+
+- 未安装 Web 应用程序
+- 符合用户参与启发式
+- 通过 HTTPS 提供服务
+- 具有一个 [Web 应用清单](/add-manifest/)，其中包括：
+    - `short_name` 或 `name`
+    - `icons` - 必须包含一个 192 像素和一个 512 像素的图标
+    - `start_url`
+    - `display` - 必须是 `fullscreen`、`standalone` 或 `minimal-ui`
+    - 不能有 `prefer_related_applications`，或值为 `false`
+- 使用 `fetch` 处理程序注册服务工作进程
+
+其他浏览器具有类似的安装条件，但可能存在细微区别。检查相应的站点以获取完整详细信息：
+
+- Edge
+- Firefox
+- [Opera](https://dev.opera.com/articles/installable-web-apps/)
+
+{% Aside %} 在 Android 上，如果 Web 应用程序清单包括 `related_applications` 和 `"prefer_related_applications": true`，则会将用户引导至 Google Play 商店，并[提示安装指定 Android 应用程序](https://developer.chrome.com/blog/app-install-banners-native/)。{% endAside %}
diff --git a/src/site/content/zh/progressive-web-apps/offline-fallback-page/index.md b/src/site/content/zh/progressive-web-apps/offline-fallback-page/index.md
new file mode 100644
index 00000000000..96e90cb2645
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/offline-fallback-page/index.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: 创建离线后备页面
+authors:
+  - thomassteiner
+  - petelepage
+date: 2020-09-24
+updated: 2021-05-19
+description: 了解如何为您的应用创建简单的离线体验。
+tags:
+  - progressive-web-apps
+---
+
+Google Assistant 应用、Slack 应用、Zoom 应用以及您手机或计算机上几乎所有其他特定于平台的应用有什么共同之处？对，它们的共同之处就是总能至少给您带来*一些东西*。即使没有网络连接，您仍然可以打开 Assistant 应用，或进入 Slack，或启动 Zoom。您可能不会得到任何特别有意义的东西，甚至无法实现您想要实现的目标，但至少您得到了*一些东西*并且应用处于掌控之中。
+
+<figure role="group" aria-labelledby="fig-apps-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-assistant" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gr49coayhLfP1UVJ2EeR.jpg", alt="离线 Google Assistant 移动应用。", width="621", height="1344" %}<figcaption id="fig-assistant"> Google Assistant。</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-slack" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/D4P00CQ15IE0plUEY3di.jpg", alt="离线 Slack 移动应用。", width="621", height="1344" %}<figcaption id="fig-slack">松弛。</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-zoom" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/gw1LQG4JNYUDxQ2NOJHC.jpg", alt="离线 Zoom 移动应用。", width="621", height="1344" %}<figcaption id="fig-zoom">飞涨。</figcaption></figure>
+
+  <figcaption id="fig-apps-wrapper">使用特定于平台的应用，即使您没有网络连接，也不会一无所获。</figcaption>
+
+
+
+相比之下，在 Web 上，传统上您离线时什么也得不到。Chrome 为您提供[离线恐龙游戏](https://www.blog.google/products/chrome/chrome-dino/)，仅此而已。
+
+<figure role="group" aria-labelledby="fig-offline-wrapper"></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome-ios" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/yEf0wzIQ1hIf85xtUwse.png", alt="显示离线恐龙游戏的 Google Chrome 移动应用。", width="800", height="1731" %}<figcaption id="fig-chrome-ios">适用于 iOS 的 Google Chrome。</figcaption></figure>
+
+  <figure role="group" aria-labelledby="fig-chrome" style="display: inline-block">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vrqfLVP132LcydIWcYbh.png", alt="显示离线恐龙游戏的 Google Chrome 桌面应用。", width="800", height="607" %}<figcaption id="fig-chrome">适用于 macOS 的 Google Chrome。</figcaption></figure>
+
+  <figcaption id="fig-offline-wrapper">在 Web 上，当您没有网络连接时，默认情况下您什么也得不到。</figcaption>
+
+
+
+## 具有自定义 Service Worker 的离线后备页面
+
+但是，情况不应就这样。借助 [Service Workers 和 Cache Storage API](/service-workers-cache-storage/) ，您可以为用户提供定制的离线体验。这可以是一个含有用户当前离线信息的简单品牌页面，但也可以是一个更有创意的解决方案，例如著名的 [trivago 离线迷宫游戏](https://www.trivago.com/offline)，具有手动**重新连接**按钮和自动重新连接尝试倒数。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/0yvun9EV5758sRO9wSgY.png", alt="具有 trivago 离线迷宫游戏的 trivago 离线页面。", width="800", height="616" %}<figcaption> trivago 离线迷宫。</figcaption></figure>
+
+### 注册 Service Worker
+
+实现这一点的方法是通过 Service Worker。您可以像下面的代码示例一样从主页注册 Service Worker。通常，您会在应用加载后执行此操作。
+
+```js
+window.addEventListener("load", () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("service-worker.js");
+  }
+});
+```
+
+### Service Worker 代码
+
+实际的 Service Worker 文件的内容乍一看似乎有点复杂，但下面示例中的注释应该会让事情变得更清楚。核心思想是预先缓存一个名为 `offline.html` 的文件，该文件仅在*失败的*导航请求上提供服务，并让浏览器处理所有其他情况：
+
+```js
+/*
+Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+// This variable is intentionally declared and unused.
+// Add a comment for your linter if you want:
+// eslint-disable-next-line no-unused-vars
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "offline.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
+```
+
+### 离线后备页面
+
+在 `offline.html` 文件中，您可以发挥创意并根据需求进行调整并添加您的品牌。下面的示例显示了可能的最低限度。它演示了基于按钮按下的手动重新加载以及基于 [`online` 事件](https://developer.mozilla.org/docs/Web/API/Window/online_event)和定期服务器轮询的自动重新加载。
+
+{% Aside 'gotchas' %}您需要缓存离线页面所需的所有资源。处理此问题的一种方法是内联所有内容，使得离线页面实现自包含。这就是我在下面的示例中所做的。{% endAside %}
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>You are offline</title>
+
+    <!-- Inline the page's stylesheet. -->
+    <style>
+      body {
+        font-family: helvetica, arial, sans-serif;
+        margin: 2em;
+      }
+
+      h1 {
+        font-style: italic;
+        color: #373fff;
+      }
+
+      p {
+        margin-block: 1rem;
+      }
+
+      button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>You are offline</h1>
+
+    <p>Click the button below to try reloading.</p>
+    <button type="button">⤾ Reload</button>
+
+    <!-- Inline the page's JavaScript file. -->
+    <script>
+      // Manual reload feature.
+      document.querySelector("button").addEventListener("click", () => {
+        window.location.reload();
+      });
+
+      // Listen to changes in the network state, reload when online.
+      // This handles the case when the device is completely offline.
+      window.addEventListener('online', () => {
+        window.location.reload();
+      });
+
+      // Check if the server is responding and reload the page if it is.
+      // This handles the case when the device is online, but the server
+      // is offline or misbehaving.
+      async function checkNetworkAndReload() {
+        try {
+          const response = await fetch('.');
+          // Verify we get a valid response from the server
+          if (response.status >= 200 && response.status < 500) {
+            window.location.reload();
+            return;
+          }
+        } catch {
+          // Unable to connect to the server, ignore.
+        }
+        window.setTimeout(checkNetworkAndReload, 2500);
+      }
+
+      checkNetworkAndReload();
+    </script>
+  </body>
+</html>
+```
+
+## 演示
+
+您可以在下面嵌入的[演示](https://offline-fallback-demo.glitch.me/index.html)中看到离线后备页面的运行情况。如果您有兴趣，可以探索 Glitch 上的[源代码。](https://glitch.com/edit/#!/offline-fallback-demo)
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">   <iframe src="https://glitch.com/embed/#!/embed/offline-fallback-demo?path=offline.html&amp;previewSize=100" title="offline-fallback-demo on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media" style="height: 100%; width: 100%; border: 0;">   </iframe> </div>
+
+### 关于使您的应用程序可安装的便笺
+
+现在您的网站有一个离线后备页面，您可能想知道接下来的步骤。为了让您的应用程序安装，您需要添加一个 [Web 应用程序清单](/add-manifest/)或者准备一个[安装策略](/define-install-strategy/)。
+
+### 关于使用 Workbox.js 提供离线后备页面的便笺
+
+您可能听说过 [Workbox.js](https://developer.chrome.com/docs/workbox/)。Workbox.js 是一组 JavaScript 库，用于向 Web 应用添加离线支持。如果您希望自己编写较少的 Service Worker 代码，则可以仅将 Workbox.js 用于[离线页面](https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-page-only)。
+
+接下来，了解针对您的应用[如何定义安装策略](/define-install-strategy/)。
diff --git a/src/site/content/zh/progressive-web-apps/promote-install/index.md b/src/site/content/zh/progressive-web-apps/promote-install/index.md
new file mode 100644
index 00000000000..4d3942f49f2
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/promote-install/index.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: 推广 PWA 安装的模式
+authors:
+  - pjmclachlan
+  - mustafakurtuldu
+date: 2019-06-04
+updated: 2020-06-17
+description: |2-
+
+  如何推广渐进式 Web 应用的安装以及最佳做法。
+tags:
+  - progressive-web-apps
+feedback:
+  - api
+---
+
+安装渐进式 Web 应用 (PWA) 可使用户更轻松地进行查找和使用。即使进行浏览器推广，一些用户也没有意识到他们可以安装 PWA，因此提供可用于推广和启用 PWA 安装的应用内体验会很有帮助。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PtJp54jasjOYyh9Soqzu.png", alt="PWA 中简单安装按钮的屏幕截图。", width="800", height="368" %}<figcaption> PWA 中提供了一个简单安装按钮。</figcaption></figure>
+
+此列表并不详尽，但却为推广 PWA 安装的不同方法提供了一个起点。无论您使用哪一种或*哪几种模式*，都会产生触发安装流程的相同代码，具体记录在[如何提供您自己的应用内安装体验](/customize-install/)中。
+
+## PWA 安装推广最佳实践 {: #best-practices }
+
+无论您在站点上使用何种推广模式，都有一些适用的最佳实践。
+
+- 将推广置于用户操作流程之外。例如，在 PWA 登录页面中，将行动号召放在登录表单和提交按钮下方。滥用推广模式会降低 PWA 的可用性，并对您的参与度指标产生负面影响。
+- 包括关闭或拒绝推广的功能。请记住用户在执行此操作时的偏好，并且仅在用户与您内容的关系发生变化（例如他们登录或完成购买）时才重新提示。
+- 在 PWA 的不同部分融入以上多种方法，但要小心不要让安装推广使您的用户应接不暇或感到懊恼 。
+- 仅在触发 [`beforeinstallprompt` 事件](/customize-install/#beforeinstallprompt)**后**显示推广。
+
+## 自动浏览器推广 {: #browser-promotion }
+
+当满足[某些条件](/install-criteria/)时，大多数浏览器会自动向用户表明可以安装您的渐进式 Web 应用。例如，桌面 Chrome 会在地址栏中显示一个安装按钮。
+
+<div class="switcher">
+  <figure id="browser-install-promo">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zIfRss5zOrZ49c4VdJ52.png", alt="显示安装指示的地址栏的屏幕截图。", width="800", height="307" %}<figcaption>浏览器提供的安装推广（桌面）</figcaption></figure>
+  <figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kRjcsxlHDZa9Nqg2Fpei.png", alt="提供安装推广的浏览器屏幕截图。", width="800", height="307" %} <figcaption> 浏览器提供的安装推广（移动设备）</figcaption></figure>
+</div>
+
+Android 版 Chrome 会向用户显示一个迷你信息栏，不过这可通过对 `beforeinstallprompt` 事件调用 `preventDefault()` 来阻止。如果您不调用 `preventDefault()`，用户第一次访问您的站点并符合 Android 上的可安装性标准时将显示横幅，然后在大约 90 天后再次显示。
+
+## 应用程序 UI 推广模式 {: #app-ui-patterns }
+
+应用程序 UI 推广模式几乎可以用于任何类型的 PWA 并出现在应用程序 UI 中，例如站点导航和横幅。与任何其他类型的推广模式一样，了解用户的上下文以便最大程度地减少对用户旅程 (user journey) 的干扰非常重要。
+
+对何时触发推广 UI 考虑周到的站点可以实现更大的安装量，并避免干扰那些对安装不感兴趣的用户的旅程。
+
+### 简单安装按钮 {: #simple-button }
+
+最简单可行的用户体验是在 Web 内容的适当位置加入“安装”或“获取应用”按钮。确保该按钮不会阻止其他重要功能，并且不妨碍用户在您应用程序中的整个旅程。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/kv0x9hxZ0TLVaIiP4Bqx.png", alt="自定义安装按钮", width="800", height="448" %} <figcaption> 简单安装按钮 </figcaption></figure>
+
+### 固定标题 {: #header }
+
+这是一个安装按钮，是您站点标题的一部分。其他标题内容通常包括站点品牌，例如徽标和汉堡菜单。标题可能是也可能不是 `position:fixed`，具体取决于您站点的功能和用户需求。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/GPJdkXcpNLR30r2zo7RR.png", alt="标题中的自定义安装按钮", width="800", height="448" %} <figcaption> 标题中的自定义安装按钮 </figcaption></figure>
+
+如果使用得当，在站点的标题中推广 PWA 安装是一种很好的方式，可以让您最忠实的客户更轻松地回归您的体验。PWA 标题中的像素非常珍贵，因此请确保您的安装号召大小合适，比其他可能的标题内容更重要，而且不会造成干扰。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/L01AoSoy7LNk1ttMMax0.png", alt="标题中的自定义安装按钮", width="800", height="430" %} <figcaption> 标题中的自定义安装按钮 </figcaption></figure>
+
+确保您：
+
+- 不显示安装按钮，除非 `beforeinstallprompt` 已触发。
+- 评估您的用户已安装的用例的价值。考虑选择性定位，以便仅向可能从中受益的用户展示您的推广。
+- 有效地利用宝贵的标题空间。考虑在标题中为您的用户提供哪些有用的其他信息，并权衡安装推广相对于其他选项的优先级。
+
+### 导航菜单 {: #nav }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aT7NHi8lbsZW8TOm3Gaw.png", alt="导航菜单中的自定义安装按钮", width="800", height="1117" %} <figcaption> 在滑出式导航菜单中添加安装按钮/推广。</figcaption></figure>
+
+导航菜单是您推广应用安装的好地方，因为用户打开菜单即表明参与了您的体验。
+
+确保您：
+
+- 避免中断重要的导航内容。将 PWA 安装推广放在其他菜单项下方。
+- 提供简短的相关宣传，说明为什么用户会从安装您的 PWA 中受益。
+
+### 登陆页面 {: #landing }
+
+登陆页面的目的是推广您的产品和服务，因此适合大力宣传安装 PWA 好处。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7q09M12HFxgIiWhKPGma.png", alt="登陆页面上的自定义安装提示", width="800", height="1117" %} <figcaption> 登陆页面上的自定义安装提示 </figcaption></figure>
+
+首先，解释您站点的价值主张，然后让访问者知道他们将从安装中得到什么。
+
+确保您：
+
+- 利用对访问者最重要的功能，并强调可能将他们带到您的登录页面的关键字。
+- 让您的安装推广和号召吸人眼球，但前提是您已经明确了您的价值主张。毕竟，这是您的登录页面。
+- 考虑在应用中用户用时最多的部分添加安装推广。
+
+### 安装横幅 {: #banner }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7fLCQQhdk2OzrQD3Xh4E.png", alt="页面顶部的自定义安装横幅。", width="800", height="1000" %} <figcaption> 页面顶部的可关闭横幅。</figcaption></figure>
+
+大多数用户都在移动体验中遇到过安装横幅，并且熟悉横幅所提供的交互。横幅会干扰用户，因此应谨慎使用。
+
+确保您：
+
+- 等到用户表现出对您站点的兴趣后，再显示横幅。如果用户关闭了横幅，请勿再次显示，除非用户触发了表示对您的内容参与度更高的转化事件，例如在电子商务站点上购物或注册帐户。
+- 在横幅中简要说明安装 PWA 的价值所在。例如，您可以指出它几乎不使用用户设备上的存储，或者无需商店重定向即可立即安装，从而将 PWA 的安装与 iOS/Android 应用区分开来。
+
+### 临时 UI {: #temporary-ui }
+
+临时 UI（例如 [Snackbar](https://material.io/components/snackbars/) 设计模式）会通知用户并让用户轻松完成操作。在本例中，可以安装应用。如果使用得当，这些类型的 UI 模式不会中断用户流程，并且在用户忽略的情况下通常会自动关闭。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6DySYRtyegazEfMcWXQL.png", alt="作为 snackbar 的自定义安装横幅。", width="800", height="448" %} <figcaption> 指示 PWA 可安装的可关闭 snackbar。</figcaption></figure>
+
+在您的应用有几次参与、互动后再显示 snackbar。如果 snackbar 在页面加载时出现或者缺少上下文，则很容易被忽略，或让人无暇顾及。发生这种情况时，用户只会关闭他们所看到的一切。请记住，您站点的新用户可能还没有准备好安装您的 PWA。因此，最好等到用户表现出强烈的兴趣后再使用此模式，例如重复访问、用户登录或类似的转化事件。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d8dwdIe1rYSgd0JdCGtt.png", alt="作为 snackbar 的自定义安装横幅。", width="800", height="424" %} <figcaption>  指示 PWA 可安装的可关闭 snackbar。</figcaption></figure>
+
+确保您：
+
+- 展示 snackbar 达 4 到 7 秒钟，让用户有足够的时间来查看它并做出反应，而不会妨碍用户操作。
+- 避免将  snackbar 显示在其他临时 UI 上，例如横幅等。
+- 等到用户表现出强烈的兴趣后再使用此模式，例如重复访问、用户登录或类似的转化事件。
+
+## 转化后
+
+用户转化事件之后（例如在电子商务站点上购物后）恰好是推广 PWA 安装的绝佳机会。用户显然已参与您的内容，而一次转化通常表示用户将会再次接受您的服务。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DrepSPFAm64d5cvTFoXe.png", alt="转化之后安装推广的屏幕截图。", width="800", height="448" %} <figcaption> 用户已完成购买后的安装推广。 </figcaption></figure>
+
+### 预订或结帐旅程 {: #journey }
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bOYZM2UiWK5itVSpjKWO.png", alt="用户旅程之后的安装推广。", width="800", height="1419" %} <figcaption> 用户旅程之后的安装推广。</figcaption></figure>
+
+在连续旅程期间或之后显示安装推广，例如典型的预订或结帐流程。如果在用户已完成旅程后显示推广，由于旅程已完成，通常可以让推广更加显眼。
+
+确保您：
+
+- 加入相关的行动号召。哪些用户将从安装您的应用中受益？原因是什么？此应用与用户目前正在进行的旅程有何相关性？
+- 如果您的品牌为已安装应用的用户提供独有优惠，请务必在此处说明。
+- 不要让推广影响用户接下来的旅程，否则您可能会对旅程完成率产生负面影响。在上面的电子商务示例中，请注意结帐的关键行动号召如何优先于应用安装推广。
+
+### 注册、登录或注销流程 {: #sign-up}
+
+此推广是[旅程](#journey)推广模式的特例，推广卡片可以更加显眼。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PQXqSqtwRSwyELdJMjtd.png", alt="注册页面上的自定义安装按钮。", width="800", height="1117" %} <figcaption> 注册页面上的自定义安装按钮。</figcaption></figure>
+
+这些页面通常只由参与的用户查看，他们已经认同您的 PWA 价值主张。这些页面上通常也没有很多其他有用的内容。因此，只要不碍事，发出更强的行动号召就不会造成太多负面影响。
+
+确保您：
+
+- 避免在注册表单内干扰用户的旅程。如果注册过程包含多个步骤，您最好等到用户完成旅程。
+- 推广与已注册用户最相关的功能。
+- 考虑在您应用的已登录区域内添加额外的安装推广。
+
+## 内联推广模式
+
+内联推广技术将推广与站点内容交织在一起。这通常比应用程序 UI 中的推广更微妙，后者中有诸多权衡因素。您希望您的推广足够显眼，让感兴趣的用户能够注意到它，但又不至于降低用户体验的质量。
+
+### 信息流内 {: #in-feed }
+
+您的 PWA 中的新闻文章或其他信息卡列表之间会出现一个信息流广告安装推广。
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/LS5qSE2vicfjRBBkA47a.png", alt="内容信息流内的安装推广。", width="800", height="1000" %} <figcaption> 内容信息流内的安装推广。</figcaption></figure>
+
+您的目标是向用户展示如何更方便地访问他们正在欣赏的内容。专注于推广对用户有帮助的特性和功能。
+
+确保您：
+
+- 限制推广的频率以免惹恼用户。
+- 让您的用户能够关闭推广。
+- 记住您用户的关闭选择。
diff --git a/src/site/content/zh/progressive-web-apps/pwa-checklist/index.md b/src/site/content/zh/progressive-web-apps/pwa-checklist/index.md
new file mode 100644
index 00000000000..bae40f0bf42
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/pwa-checklist/index.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: 什么是优秀的渐进式 Web 应用程序？
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2022-07-18
+description: 什么是优秀或出色的渐进式 Web 应用程序？
+tags:
+  - progressive-web-apps
+---
+
+<!-- Disable heading-increment because it mucks with the Details widget -->
+
+<!--lint disable heading-increment-->
+
+渐进式 Web 应用程序 (PWA) 使用现代 API 构建和增强，以提供增强的功能、可靠性和可安装性，同时只需一个代码库就可以借助*任何设备触及任何用户、任何地方*。为了帮助您打造最佳体验，请按照[核心](#core)和[最佳](#optimal)清单以及建议进行实施。
+
+## 核心渐进式 Web 应用程序清单 {: #core }
+
+渐进式 Web 应用程序清单描述无论大小或输入类型如何，如何让应用程序可供所有用户安装和使用。
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+快速启动，高效运行
+
+为了确保在线体验成功，性能始终扮演着重要的角色，因为高性能的网站比性能不佳的网站更能吸引和留住用户。网站需要专注于以用户为中心的性能指标优化。
+
+{% endDetailsSummary %}
+
+为了确保在线体验成功，性能始终扮演着重要的角色，因为高性能的网站比性能不佳的网站更能吸引和留住用户。网站需要专注于以用户为中心的性能指标优化。
+
+#### 原因
+
+为了让用户*使用*您的应用程序，速度至关重要。实际上，随着页面加载时间从 1 秒变为 10 秒，用户的跳出率会增加 123%。不是说只要完成 <code>load</code> 事件，就不再需要考虑性能。不能让用户对他们的交互（例如，点击按钮）是否已注册产生疑问。滚动和动画要让用户感觉平滑顺畅。性能会影响用户的整体体验，不论是用户如何看待您的应用程序，还是应用程序的实际表现，都会受到影响。
+
+虽然所有应用程序都有不同的需求，但 Lighthouse 中的性能审核基于 [RAIL 以用户为中心的性能模型](/rail/)，如果在这些审核中得到高分，则说明您的用户更有可能获得愉快的体验。您还可以使用 [PageSpeed Insights](https://pagespeed.web.dev/) 或 [Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)来获取 Web 应用程序的实际性能数据。
+
+#### 方法
+
+按照我们[快速加载指南](/fast/)操作，了解如何让您的 PWA 快速启动，高效运行。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+适用于任何浏览器
+
+在安装之前，用户可以使用他们选择的任何浏览器访问您的 Web 应用程序。
+
+{% endDetailsSummary%}
+
+在安装之前，用户可以使用他们选择的任何浏览器访问您的 Web 应用程序。
+
+#### 原因
+
+首先，渐进式 Web 应用程序是 Web 应用程序，这意味着它们需要跨浏览器工作，而不是只适合一款浏览器。
+
+一种有效的实现方法是，用[弹性 Web 设计](https://resilientwebdesign.com/)中 Jeremy Keith 的话来说：确定核心功能，使用最简单的技术实现这种功能，然后在可能的情况下增强体验。在许多情况下，这意味着刚开始只使用 HTML 来创建核心功能，然后使用 CSS 和 JavaScript 增强用户体验，从而打造更具吸引力的体验。
+
+以表单提交为例。最简单的实现方法是提交 `POST` 请求的 HTML 表单。构建完成后，您可以使用 JavaScript 来执行表单验证，并通过 AJAX 提交表单，从而增强体验，改善可以提供支持的用户的体验。
+
+考虑到用户会在各种设备和浏览器上体验您的网站。因此，您不能简单只定位高端设备。通过使用功能检测，您能够为最广泛的潜在用户提供可用体验，包括那些使用当今可能已经被淘汰的浏览器和设备的用户。
+
+#### 方法
+
+Jeremy Keith 的[弹性 Web 设计](https://resilientwebdesign.com/)是非常好的资源，其中介绍了在这种跨浏览器的渐进式方法中如何思考 Web 设计。
+
+#### 课外阅读
+
+- A List Apart 的[《理解渐进式增强》](https://alistapart.com/article/understandingprogressiveenhancement/)非常详细地介绍了本主题。
+- Smashing Magazine 的[渐进式增强功能：是什么，如何使用？](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)提供实用的介绍和更高级主题的链接。
+- MDN 有一篇题为[实现功能检测](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)的文章，讨论了如何通过直接查询来检测功能。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+响应任何尺寸的屏幕
+
+用户可以在任何尺寸的屏幕上使用您的 PWA，并且在任何视口尺寸下都可以使用所有内容。
+
+{% endDetailsSummary %}
+
+用户可以在任何尺寸的屏幕上使用您的 PWA，并且在任何视口尺寸下都可以使用所有内容。
+
+#### 原因
+
+设备尺寸各异，即使在同一台设备上，用户也可能使用界面大小不一的应用程序。因此，至关重要的一点是，您要确保内容不仅适合视口，而且网站上的所有功能和内容都可用于所有视口尺寸。
+
+用户想要完成的任务和想要访问的内容不随视口大小而改变。内容可以以不同的视口大小重新排列，但不管怎样都会在那里。实际上，正如 Luke Wroblewski 在他的着作“移动为先”中所说的那样，从小到大，逐步增强，而不是反过来，这样就可以改善网站的设计：
+
+> 移动设备要求软件开发团队只关注应用程序中最重要的数据和操作。在 320 x 480 像素的屏幕上，根本没有空间放置非必要的无关元素。您必须知道孰轻孰重。
+
+#### 方法
+
+有很多关于响应式设计的资源，包括 [Ethan Marcotte 的原创文章](https://alistapart.com/article/responsive-web-design/)，与之相关的[重要概念集合](https://snugug.com/musings/principles-responsive-web-design/)以及大量书籍和演讲。为了将讨论范围缩小到响应式设计的内容方面，您可以深入研究[内容优先设计](https://uxdesign.cc/why-you-should-design-the-content-first-for-better-experiences-374f4ba1fe3c)和[内容输出响应式布局](https://alistapart.com/article/content-out-layout/)。最后，虽然 Josh Clark 所著[《移动设计的七个致命错误》](https://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#21ecac977bca)课程主要关注移动设备，但与响应式网站的小尺寸视图也密切相关。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+提供自定义离线页面
+
+当用户离线时，与返回默认浏览器离线页面相比，让他们保留在您的 PWA 中可以提供更无缝的体验。
+
+{% endDetailsSummary %}
+
+当用户离线时，与返回默认浏览器离线页面相比，让他们保留在您的 PWA 中可以提供更无缝的体验。
+
+#### 原因
+
+无论连接状态如何，用户都希望安装的应用程序能够正常工作。特定于平台的应用程序在离线时永远不显示空白页面，而渐进式 Web 应用程序也不应显示浏览器默认的离线页面。无论是在用户导航到未缓存的 URL 时，还是在尝试使用需要连接的功能时，提供自定义离线体验都有助于让用户感觉您的 Web 体验是运行设备的一部分。
+
+#### 方法
+
+在执行服务工作进程的 `install` 事件期间，您可以预缓存自定义离线页面以供随后使用。如果用户离线，您可以使用预缓存的自定义离线页面来响应用户请求。您可以查看我们的自定义[离线页面示例](https://googlechrome.github.io/samples/service-worker/custom-offline-page/)，了解示例的实际效果以及实现方法。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+可安装
+
+在设备上安装或添加应用程序的用户往往更愿意经常使用这些应用程序。
+
+{% endDetailsSummary %}
+
+在设备上安装或添加应用程序的用户往往更愿意经常使用这些应用程序。
+
+#### 原因
+
+安装后，渐进式 Web 应用程序的外观、感觉和行为与所有其他安装的应用程序相似。它的启动位置与用户启动其他应用程序的位置相同。它在自己的应用程序窗口中运行，与浏览器分开，并且会显示在任务列表中，就像其他应用程序一样。
+
+为什么希望用户安装您的 PWA？原因与您希望用户从应用商店安装您的应用相同。安装您的应用程序的用户是参与度最高的受众，他们比典型访问者的参与度指标更高，通常与移动设备上的应用程序用户相差无几。这些指标包括更多的重复访问次数，更长的网站停留时间和更高的转化率。
+
+#### 方法
+
+您可以按照我们的[可安装指南](/customize-install/)了解如何让您的 PWA 可安装，以及如何通过测试来了解它是否可安装，此外，您还可以亲自动手试一试。
+
+{% endDetails %}
+
+## 最佳渐进式 Web 应用程序清单 {: #optimal }
+
+要创建真正出色的渐进式 Web 应用程序，使其像典型的一流应用程序一样，您需要的不仅仅是核心清单。最佳渐进式 Web 应用程序清单是为了让用户感觉您的 PWA 是它运行的设备的一部分，同时利用 Web 的强大性。
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+提供离线体验
+
+如果不严格要求连接网络，那么，不管是离线还是在线，您的应用程序都要以相同的方式工作。
+
+{% endDetailsSummary %}
+
+如果不严格要求连接网络，那么，不管是离线还是在线，您的应用程序都要以相同的方式工作。
+
+#### 原因
+
+除了提供自定义离线页面之外，用户还希望渐进式 Web 应用程序可以离线使用。例如，旅行和航空公司应用程序应该在离线时应该能够轻松提供旅行详细信息和登机牌。音乐、视频和播客应用程序应允许离线播放。社交和新闻应用程序应缓存最近的内容，以便用户可以在离线时阅读。用户还希望在离线时保持身份验证，因此要设计离线身份验证机制。离线 PWA 可以为用户提供真正类似典型应用程序的体验。
+
+#### 方法
+
+确定用户希望在离线使用哪些功能后，您需要让您的内容可用且适应离线环境。此外，您可以使用 [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb)（一种浏览器内的 NoSQL 存储系统）来存储和检索数据，还可以使用[后台同步](https://developer.chrome.com/blog/background-sync/)来允许用户在离线时执行操作和推迟服务器通信，直到再次建立稳定的连接。您还可以使用服务工作进程来存储其他类型的内容，例如供离线时使用的图像、视频文件和音频文件，以及使用它们来实现[安全且长期活动的会话](https://developer.chrome.com/blog/2-cookie-handoff/)，从而保持用户的身份验证。从用户体验的角度来看，您可以使用[骨架屏](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)，让用户在加载时感知速度和内容，然后根据需要回退到缓存的内容或离线指示器。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+完全可访问
+
+所有用户交互都会传递 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 可访问性要求。
+
+{% endDetailsSummary %}
+
+所有用户交互都会传递 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 可访问性要求。
+
+#### 原因
+
+大多数用户总有一天会希望以符合 [WCAG 2.0](https://www.w3.org/TR/WCAG20/) 可访问性要求的方式来利用您的 PWA。用户理解您的 PWA 并与其进行交互的能力存在一个范围，需求可能是暂时的，也可能是永久的。通过让 PWA 可访问，您可以确保人人都可以使用您的 PWA。
+
+#### 方法
+
+W3C 的 [Web 可访问性简介](https://www.w3.org/WAI/fundamentals/accessibility-intro/)是非常好的入门资源。大多数可访问性测试必须手动完成。Lighthouse 中的[可访问性](https://developer.chrome.com/docs/lighthouse/accessibility/)审核、[Axe](https://github.com/dequelabs/axe-core) 和[可访问性洞察](https://accessibilityinsights.io/)等工具可以帮助您自动执行一些可访问性功能测试。使用语义正确的元素（而不是重新创建）也很重要，例如 `a` 和 `button` 元素。这样可以确保在确实需要构建更高级的功能时，您仍可以满足用户的可访问预期（例如使用箭头与选项卡时）。[A11Y Nutrition Cards](https://accessibilityinsights.io/) 为一些常见组件提供了一些非常好的建议。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+可通过搜索发现
+
+通过搜索可以轻松[发现您的 PWA](/discoverable/)。
+
+{% endDetailsSummary %}
+
+通过搜索可以轻松[发现您的 PWA](/discoverable/)。
+
+#### 原因
+
+Web 的最大优势之一是能够通过搜索发现网站和应用程序。实际上，[一半以上](https://www.brightedge.com/resources/research-reports/channel_share)的网站流量来自自然搜索。至关重要的是，确保内容的 URL 规范，并且搜索引擎可以将您的网站加入索引，以便用户轻松找到您的 PWA。采用客户端渲染时尤其如此。
+
+#### 方法
+
+首先，确保每个 URL 具有唯一的描述性标题和元描述。然后，您可以使用 [Google Search Console](https://search.google.com/search-console/about) 和 Lighthouse 中的[搜索引擎优化审核](https://developer.chrome.com/docs/lighthouse/seo/)来帮助您调试和修复 PWA 的可发现性问题。您还可以使用 [Bing](https://www.bing.com/toolbox/webmaster) 或 [Yandex](https://webmaster.yandex.com/welcome/) 的网站管理员工具，并考虑在您的 PWA 中利用 [Schema.org](https://schema.org/) 中提供的架构来包含[结构化数据](https://goo.gle/search-gallery)。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+适用于任何输入类型
+
+您的 PWA 同样支持鼠标、键盘、手写笔或触控操作。
+
+{% endDetailsSummary %}
+
+您的 PWA 同样支持鼠标、键盘、手写笔或触控操作。
+
+#### 原因
+
+设备会提供多种输入法，当使用您的应用程序时，用户需要能够无缝切换这些输入法。同样重要的是，输入法不应依赖屏幕尺寸，这意味着大视口需要支持触摸，而小视口也需要支持键盘和鼠标。您要尽可能确保应用程序及其所有功能支持您的用户可能选择使用的任何输入法。在适当情况下，您还要增强体验，以允许特定于输入的控制（例如，下拉刷新）。
+
+#### 方法
+
+[指针事件 API](https://developer.chrome.com/blog/pointer-events/) 提供了一个统一的界面来处理各种输入选项，非常适合添加手写笔支持。为了同时支持触摸和键盘键入，请确保使用正确的语义元素（定位点、按钮、表单控件等），而不是使用非语义 HTML（对可访问性有利）来重建这些元素。当包含在悬停时激活的交互时，确保它们也可以在单击或点击时激活。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+为权限请求提供上下文
+
+请求使用强大 API 的权限时，提供上下文并仅在需要 API 时进行询问。
+
+{% endDetailsSummary %}
+
+请求使用强大 API 的权限时，提供上下文并仅在需要 API 时进行询问。
+
+#### 原因
+
+触发权限提示的 API（如通知、地理位置和凭据）对用户具有破坏性，这是有意设计的，因为它们往往与需要选择加入的强大功能相关。在没有额外上下文的情况下触发这些提示（例如在页面加载时）会让用户不太可能接受这些权限，并在将来更可能不信任它们。因此，向用户提供为何需要这种权限的上下文理由后，您才应触发这些提示。
+
+#### 方法
+
+[权限用户体验](https://developers.google.com/web/fundamentals/push-notifications/permission-ux)一文和 UX Planet 的[《询问用户权限许可的正确方法》](https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27)是了解如何设计权限提示的优秀资源，虽然它主要讲述在移动设备上的设计，但同样适用于所有 PWA。
+
+{% endDetails %}
+
+{% Details %} {% DetailsSummary 'h3' %}
+
+遵循健康代码的最佳实践
+
+保持代码库健康可以更轻松地实现目标和交付新功能。
+
+{% endDetailsSummary %}
+
+保持代码库健康可以更轻松地实现目标和交付新功能。
+
+#### 原因
+
+构建现代 Web 应用程序需要考虑周全。让应用程序保持最新状态，并让代码库保持健康，您可以更轻松地交付满足此清单中列出的其他目标的新功能。
+
+#### 方法
+
+很多高优先级检查可以确保代码库健康：避免使用包含已知漏洞的库，确保不使用已弃用的 API，从代码库中删除 Web 反模式（例如使用 `document.write()` 或使用非被动滚动事件侦听器），以及采用防御性编码来确保您的 PWA 在分析或其他第三方库加载失败时不会中断。考虑需要在多个浏览器和发布渠道中进行静态代码分析（如 Linting）以及自动化测试。这些技术有助于提前发现错误，以免进入生产环境。
+
+{% endDetails %}
diff --git a/src/site/content/zh/progressive-web-apps/using-a-pwa-in-your-android-app/index.md b/src/site/content/zh/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
new file mode 100644
index 00000000000..275154b830f
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/using-a-pwa-in-your-android-app/index.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: 在 Android 应用程序中使用 PWA
+authors:
+  - andreban
+date: 2020-03-19
+updated: 2021-12-06
+description: 如何在 Android 应用程序中打开渐进式 Web 应用程序。
+tags:
+  - progressive-web-apps
+---
+
+## 在 Android 应用程序中启动 PWA
+
+[渐进式 Web 应用程序](/progressive-web-apps/) (PWA) 是使用类似应用程序的功能来创造快速、可靠且引人入胜的高质量体验的 Web 应用程序。
+
+Web 具有令人难以置信的影响力，并为用户提供了发现新体验的强大途径。但是用户也习惯于在操作系统商店中搜索应用程序。在许多情况下，这些用户已经熟悉他们寻找的品牌或服务，并且具有高度的意向性，从而导致其参与度指标高于平均值。
+
+Play 商店是 Android 应用程序的商店，开发人员通常希望从他们的 Android 应用程序打开渐进式 Web 应用程序。
+
+Trusted Web Activity 是一个开放标准，它允许浏览器提供一个完全兼容 Web 平台的容器，以在 Android 应用程序中渲染 PWA。[Chrome](https://play.google.com/store/apps/details?id=com.android.chrome) 支持该功能，[Firefox Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) 的支持正在开发中。
+
+### 现有解决方案受限
+
+一直可以在 Android 应用程序中包含 Web 体验，方法是使用 [Android WebView](https://developer.android.com/reference/android/webkit/WebView) 之类的技术或 [Cordova](https://cordova.apache.org/) 等框架。
+
+Android WebView 的局限性在于它并非是浏览器的替代。Android WebView 是用于在 Android 应用程序中使用 Web UI 的开发者工具，不提供对现代 Web 平台功能（如[联系人选取器](/contact-picker/)或[文件系统](/file-system-access/)[等](https://developer.chrome.com/blog/fugu-status/)）的完整访问。
+
+Cordova 旨在弥补 WebView 的缺点，但 API 仅限于 Cordova 环境。这意味着需要维护一个额外的代码库才能将 Cordova API 用于 Android 应用程序，与开放 Web 上的 PWA 分离。
+
+此外，功能可发现性通常并不总是按预期工作，Android 版本和 OEM 之间的兼容性问题也可能是一个问题。使用其中一个解决方案时，开发人员需要额外的质量保证流程，并产生额外的开发成本来检测和创建变通方法。
+
+### Trusted Web Activity 是 Android 上的 Web 应用程序的新容器
+
+开发人员现在可以使用 [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/) 作为容器，包含 PWA 作为 Android 应用程序的启动活动。该技术利用浏览器来全屏渲染 PWA，确保 Trusted Web Activity 与底层浏览器兼容相同的 Web 平台功能和 API。还有一些开源实用程序，可以更轻松地使用 Trusted Web Activity 来实现 Android 应用程序。
+
+其他解决方案不具备的另一个优势是容器与浏览器共享存储。登录状态和用户首选项可跨体验无缝共享。
+
+#### 浏览器兼容性
+
+Chrome 75 及更高版本已支持该功能，Firefox 的 nightly 版本正在实现中。
+
+### 质量标准
+
+当 Web 开发人员想要在 Android 应用程序中包含 Web 内容时，应该使用 Trusted Web Activity。
+
+Trusted Web Activity 中的 Web 内容必须满足 PWA 可安装性标准。
+
+此外，为了符合用户对 Android 应用程序的行为预期，[Chrome 86 引入了一项更改](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html)，未能处理以下情况将被视为崩溃：
+
+- 未能在应用程序启动时验证数字资产链接。
+- 未能为离线网络资源请求返回 HTTP 200。
+- 导航请求返回 HTTP 404 或 5xx 错误。
+
+当 Trusted Web Activity 中出现其中一种情况时，会导致用户可见的 Android 应用程序崩溃。请查看有关在服务工作进程中处理这些情况的[指南](https://developer.chrome.com/docs/android/trusted-web-activity/whats-new/#updates-to-the-quality-criteria)，
+
+应用程序还必须满足额外的特定于 Android 的标准，例如[政策合规性](https://play.google.com/about/developer-content-policy/)。
+
+{% Aside 'caution' %} 如果您的应用程序主要面向 13 岁以下的儿童设计，则额外的 [Play 家庭政策](https://play.google.com/about/families/)适用，这可能与使用 Trusted Web Activity 不兼容。{% endAside %}
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9Z70W3aCI8ropKpMXHcz.png", alt="显示 AirHorn 的 Lighthouse 分数的屏幕截图，带有 PWA 徽章，性能分数为 100。",  width="800", height="141" %} <figcaption> Lighthouse 中的 PWA 徽章显示您的 PWA 是否通过可安装性标准。</figcaption></figure>
+
+## 工具
+
+想要利用 Trusted Web Activity 的 Web 开发人员不需要学习新技术或 API 即可将其 PWA 转换为 Android 应用程序。Bubblewrap 和 PWABuilder 一起提供了库、命令行界面 (CLI) 和图形用户界面 (GUI) 形式的开发人员工具。
+
+### Bubblewrap
+
+[Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) 项目可生成 NodeJS 库和命令行界面 (CLI) 形式的 Android 应用程序。
+
+通过运行该工具并传递 Web 清单的 URL 来启动新项目：
+
+```shell
+npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
+```
+
+该工具还可以构建项目，运行以下命令将输出可以上传到 Play 商店的 Android 应用程序：
+
+```shell
+npx @bubblewrap/cli build
+```
+
+运行此命令后，项目的根目录中将出现一个名为 `app-release-signed.apk` 的文件。这是将[上传到 Play 商店](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB)的文件。
+
+### PWABuilder
+
+[PWABuilder](https://pwabuilder.com/) 帮助开发人员将现有网站转换为渐进式 Web 应用程序。它还与 Bubblewrap 集成，提供一个 GUI 界面来将这些 PWA 包装成一个 Android 应用程序。PWABuilder 团队整理了一篇关于如何使用该工具生成 Android 应用程序的[精彩博客文章](https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/)。
+
+## 验证 Android 应用程序中的 PWA 的所有权
+
+构建了优秀渐进式 Web 应用程序的开发人员不希望其他开发人员在未经他们许可的情况下使用它构建 Android 应用程序。为确保不会发生这种情况，必须使用一个名为[数字资产链接](https://developers.google.com/digital-asset-links/v1/getting-started)的工具将 Android 应用程序与渐进式 Web 应用程序配对。
+
+Bubblewrap 和 PWABuilder 处理 Android 应用程序上的必要配置，但还有最后一步：将 `assetlinks.json` 文件添加到 PWA 中。
+
+要生成此文件，开发人员需要特定密钥的 SHA-256 签名，该密钥用于对用户下载的 APK 进行签名。
+
+该密钥可以通过多种方式生成，查找哪个密钥为提供给最终用户的 APK 签名的最简单方法是从 Play 商店下载该 APK。
+
+为避免向用户显示损坏的应用程序，请将应用程序部署到[封闭式测试通道](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB)，将其安装到测试设备中，然后使用 [Peter 的资产链接工具](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool)为应用程序生成正确的 `assetlinks.json` 文件。使生成的 `assetlinks.json` 文件成为正在验证的域中的 `/.well-known/assetlinks.json`。
+
+## 下一步做什么
+
+渐进式 Web 应用程序提供高质量 Web 体验。Trusted Web Activity 是在满足最低质量标准的情况下从 Android 应用程序开启这些高质量体验的新方法。
+
+如果您刚刚入门渐进式 Web 应用程序，请阅读[有关如何构建优秀的 PWA 的指南](/progressive-web-apps/)。对于已经有 PWA 的开发人员，请使用 [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 验证它是否符合质量标准。
+
+然后，使用 [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) 或 [PWABuilder](https://pwabuilder.com/) 生成 Android 应用程序，[将该应用程序上传到 Play 商店的封闭式测试通道](https://support.google.com/googleplay/android-developer/answer/3131213?hl=en-GB)，并使用 [Peter 的资产链接工具](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool) 将其与 PWA 配对。
+
+最后，将您的应用程序从封闭式测试通道移至生产！
diff --git a/src/site/content/zh/progressive-web-apps/what-are-pwas/index.md b/src/site/content/zh/progressive-web-apps/what-are-pwas/index.md
new file mode 100644
index 00000000000..06d7290844d
--- /dev/null
+++ b/src/site/content/zh/progressive-web-apps/what-are-pwas/index.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: 什么是渐进式 Web 应用程序？
+authors:
+  - samrichard
+  - petelepage
+date: 2020-01-06
+updated: 2020-02-24
+description: |2-
+
+  渐进式 Web 应用程序 (PWA) 简介和区别于其他 Web 应用程序的三大支柱。
+tags:
+  - progressive-web-apps
+---
+
+Web 是一个不可思议的平台。其跨设备和操作系统的普遍性、以用户为中心的安全模型，以及其规范和实现都不受单独一家公司控制的事实，使 Web 成为一个独特的软件开发平台。结合其固有的可链接性，可以对其进行搜索，并且随时随地与任何人分享您找到的内容。每当您访问一个网站时，它都是最新的，而且根据您的意愿，您对该网站的体验可以是短暂的，也可以是永久的。只需一个代码库，Web 应用就可以借助*任何设备触及任何人、任何地方*。
+
+特定于平台的应用程序以极其丰富和可靠而为人所知。它们总是存在于主屏幕、程序坞和任务栏上。无论网络连接如何，它们都可以工作，并且有各自的独立使用体验。它们可以从本地文件系统读写文件，访问通过 USB、串行或蓝牙连接的硬件，甚至与设备上存储的数据（如联系人和日历事件）进行交互。在这些应用程序中，您可以执行拍照、查看主屏幕上列出的正在播放的歌曲或在另一个应用程序中控制歌曲播放等操作。特定于平台的应用程序就像运行它们的设备的*一部分*。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DKtUFjXLJbiiruKA9P1.svg", alt="说明功能强大的特定于平台的应用程序、具有高覆盖范围的 Web 应用程序以及既功能强大、又具有高覆盖范围的渐进式 Web 应用程序的相对功能和覆盖范围的图示。", width="370", height="367" %}<figcaption>特定于平台的应用程序、Web 应用程序和渐进式 Web 应用程序的功能与覆盖范围。</figcaption></figure>
+
+如果从功能和覆盖范围的角度考虑特定于平台的应用程序和 Web 应用程序，特定于平台的应用程序代表最佳的功能，而 Web 应用程序代表最佳的覆盖范围。那么渐进式 Web 应用程序处于什么位置？
+
+渐进式 Web 应用程序 (PWA) 使用现代 API 进行构建和增强，提供增强的功能、可靠性和可安装性，同时只需一个代码库就可以借助*任何设备触及任何人、任何地方*。
+
+## 三大应用程序支柱
+
+渐进式 Web 应用程序是经过设计的 Web 应用程序，它们功能强大、可靠且可安装。这三大支柱使它们的使用体验类似于特定于平台的应用程序。
+
+### 功能强大
+
+如今的 Web 本身就非常强大。例如，您可以使用 WebRTC、地理定位和推送通知构建超本地化的视频聊天应用程序。您可以使该应用程序可安装，并通过 WebGL 和 WebVR 进行虚拟对话。随着 Web Assembly 的引入，开发人员可以利用其他生态系统（如 C、C++ 和 Rust），将积累数十年的工作和功能也带到 Web 中。例如，[Squoosh.app](https://squoosh.app/) 利用这一点来进行高级图像压缩。
+
+直到最近，只有特定于平台的应用程序才能真正声称拥有这些功能。虽然有些功能仍然是 Web 无法实现的，但即将推出的新 API 正在寻求改变这一点，通过文件系统访问、媒体控制、应用程序标记和完整的剪贴板支持等功能来扩展 Web 的能力。所有这些功能都使用 Web 以用户为中心且安全的权限模型进行构建，确保访问网站对用户来说永远不会是一件可怕的事情。
+
+在现代 API、Web Assembly 以及即将推出的新 API 之间，Web 应用程序的功能比以往任何时候都强大，而且这些功能只会与日俱增。
+
+### 可靠
+
+无论网络如何，可靠的渐进式 Web 应用程序都会让人感觉快速且可以依赖。
+
+速度对于让用户*使用*您的网站至关重要。事实上，随着页面加载时间从 1 秒变为 10 秒，用户跳离的概率会[增加 123%](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/) 。执行在 `onload` 事件之后不会停止。用户不应该怀疑他们的交互（例如，点击按钮）是否已被登记。滚动和动画应该感觉平滑。性能会影响整个体验，从用户如何看待您的应用程序到它的实际表现如何。
+
+最后，无论网络连接如何，可靠的应用程序都需要可用。用户期望应用程序在网络连接缓慢或不稳定甚至离线时也能启动。他们希望，即使在很难向服务器发出请求的情况下，也仍然可以访问和使用他们最近交互过的内容（例如媒体曲目或者门票和旅游日程）。当无法发出请求时，他们希望被告知有问题，而不是默默地遭遇失败或崩溃。
+
+用户喜欢在眨眼间就能响应交互的应用程序，以及他们可以依赖的使用体验。
+
+### 可安装
+
+安装后的渐进式 Web 应用程序在独立窗口中运行，而不是在浏览器标签页中运行。它们可以从用户的主屏幕、程序坞、任务栏或工具架上启动。可以在设备上搜索它们并使用应用程序切换器在它们之间跳转，使它们像是安装了它们的设备的一部分。
+
+安装 Web 应用程序后，新功能会开启。在浏览器中运行时通常保留的键盘快捷键将变得可用。渐进式 Web 应用程序可以注册为接受来自其他应用程序的内容，或者成为处理不同类型文件的默认应用程序。
+
+当渐进式 Web 应用程序移出标签页并进入独立应用程序窗口时，它转变了用户对它的看法以及与之交互的方式。
+
+## 两全其美
+
+从本质上说，渐进式 Web 应用程序就是 Web 应用程序。通过渐进式增强，现代浏览器中启用了新功能。利用服务工作进程和 Web 应用程序清单，您的 Web 应用程序变得可靠且可安装。如果新功能不可用，用户仍然可以获得核心体验。
+
+数字不会说谎！推出渐进式 Web 应用程序的公司已经看到令人印象深刻的结果。例如，Twitter 的每会话页面数增加了 65%，推文增加了 75%，跳离率降低了 20%，同时将其应用程序的大小减少了 97% 以上。在切换到 PWA 后，日经新闻的自然流量提高了 2.3 倍，订阅数增加了 58%，每日活跃用户数增加了 49%。Hulu 将特定于平台的桌面程序替换为渐进式 Web 应用程序，回访数增加了 27%。
+
+渐进式 Web 应用程序提供了一个独特的机会来实现用户会喜欢的 Web 体验。渐进式 Web 应用程序使用最新的 Web 功能带来增强的功能和可靠性，只需一个代码库就可以让*任何人随时随地在任何设备上*安装您构建的应用程序。
diff --git a/src/site/content/zh/react/code-splitting-suspense/index.md b/src/site/content/zh/react/code-splitting-suspense/index.md
new file mode 100644
index 00000000000..09174509c5a
--- /dev/null
+++ b/src/site/content/zh/react/code-splitting-suspense/index.md
@@ -0,0 +1,165 @@
+---
+layout: post
+title: 使用 React.lazy 和 Suspense 进行代码拆分
+subhead: 永远不要向用户发送不必要的代码，所以请拆分您的代码包以确保不会发生这种情况！
+hero: image/admin/Lk8KvDZcWntc7rtQzvv9.jpg
+date: 2019-04-29
+description: 通过 React.lazy 方法可以轻松地使用动态导入在组件级别对 React 应用程序进行代码拆分。将其与 Suspense 一起使用可向用户显示适当的加载状态。
+authors:
+  - houssein
+  - jeffposnick
+feedback:
+  - api
+---
+
+{% Aside %}如果您尚不清楚代码拆分背后的基本理念，请先参考[通过代码拆分减少 JavaScript 有效负载](/reduce-javascript-payloads-with-code-splitting)指南。{% endAside %}
+
+通过 **`React.lazy`** 方法可以轻松地使用动态导入在组件级别对 React 应用程序进行代码拆分。
+
+```jsx
+import React, { lazy } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const DetailsComponent = () => (
+  <div>
+    <AvatarComponent />
+  </div>
+)
+```
+
+## 为什么这很有用？
+
+一个大型 React 应用程序通常由许多组件、实用方法和第三方库组成。如果不努力尝试仅在需要时才加载应用程序的不同部分，那么只要用户加载第一个页面，就会立即向用户发送一个很大的 JavaScript 代码包。这可能会大大影响页面性能。
+
+`React.lazy` 函数提供了一个内置方法，可以将应用程序中的组件分离为单独的工作量很少的 JavaScript 块。然后将其与 `Suspense` 组件结合使用时，可以处理加载状态。
+
+## Suspense
+
+向用户发送较大 JavaScript 有效负载的问题在于页面完成加载所需的时间长度，尤其是在较弱的设备和网络连接上。这就是代码拆分和延迟加载非常有用的原因。
+
+但是，通过网络获取代码拆分组件时，用户总是会遇到轻微延迟，因此显示有用的加载状态很重要。将 `React.lazy` 与 **`Suspense`** 组件一起使用有助于解决此问题。
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+  </Suspense>
+)
+```
+
+`Suspense` 接受一个 `fallback` 组件，它允许您将任何 React 组件显示为一个加载状态。以下示例说明了工作原理。仅当点击按钮时，才会显示头像，点击时会发出请求以检索暂停的 `AvatarComponent` 所需的代码。同时，显示 fallback 加载组件。
+
+{% Glitch { id: 'react-lazy-suspense', path: 'src/index.css', height: 480 } %}
+
+这里，构成 `AvatarComponent` 的代码很少，所以加载旋转图标只显示了很短时间。加载较大的组件可能需要更长的时间，尤其是在网络连接较弱的情况下。
+
+为了更好地演示工作原理：
+
+{% Instruction 'preview' %} {% Instruction 'devtools-network' %}
+
+- 点击 **Throttling**（限制）下拉列表，该下拉列表默认设置为 **No throttling**（无限制）。选择 **Fast 3G**（快速 3G）。
+- 点击应用程序中的 **Click Me**（点击我）按钮。
+
+加载指示器现在将显示更长时间。 注意构成 `AvatarComponent` 的所有代码是如何以单独块的形式获取的。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ga9IsnuJoJdnUfE6sGee.png", alt="DevTools 网络面板显示正在下载一个 chunk.js 文件", width="800", height="478" %}</figure>
+
+{% Aside %} 当组件在服务器端呈现时，React 目前不支持 Suspense。如果在服务器上呈现，请考虑使用其他库，例如 React 文档中推荐的 [`loadable-components`](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/)。{% endAside %}
+
+## 暂停多个组件
+
+`Suspense` 的另一个功能是允许暂停加载多个组件，**即使它们已经被延迟加载**。
+
+例如：
+
+```jsx
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+const DetailsComponent = () => (
+  <Suspense fallback={renderLoader()}>
+    <AvatarComponent />
+    <InfoComponent />
+    <MoreInfoComponent />
+  </Suspense>
+)
+```
+
+这是一种非常有用的方法，可以在仅显示单个加载状态的情况下延迟多个组件的呈现。一旦所有组件都完成获取，用户就会看到它们一起同时显示。
+
+可以通过以下嵌入程序看到这一效果：
+
+{% Glitch { id: 'react-lazy-suspense-multiple', path: 'src/index.css', height: 480 } %}
+
+{% Aside %} 加载指示器显示有点太快？再次尝试在 DevTools 中模拟受限制的连接。{% endAside %}
+
+如果不使用此功能，很容易遇到*交错加载*的问题，或者 UI 的不同部分一个接一个加载，每个部分都有自己的加载指示器。这会使用户体验更加痛苦。
+
+{% Aside %}虽然已经可以使用 Suspense 拆分组件，并且可以轻松减少代码包的大小，但 React 团队仍在继续开发更多功能，以进一步扩展该组件。[React 16.x 路线图](https://reactjs.org/blog/2018/11/27/react-16-roadmap.html)对此有更详细的介绍。{% endAside %}
+
+## 处理加载失败
+
+`Suspense` 允许在后台发出网络请求时显示暂时加载状态。但是如果这些网络请求由于某种原因失败，会发生什么情况？您可能处于离线状态，或者您的 Web 应用程序正在尝试延迟加载一个已过时并且在服务器重新部署后不再可用的[版本化 URL](/http-cache/#long-lived-caching-for-versioned-urls)。
+
+React 有一个标准模式来优雅地处理这些类型的加载失败：使用错误边界。如[文档中](https://reactjs.org/docs/error-boundaries.html)所述，任何 React 组件都可以作为错误边界，只要其实现了生命周期方法 `static getDerivedStateFromError()` 和 `componentDidCatch()` 中的一个或两个均实现。
+
+要检测和处理延迟加载失败，您可以包装您的 `Suspense` 组件，其中将父组件用作错误边界。在错误边界的 `render()` 方法中，如果没有错误，则可以按原样呈现子组件，如果出现问题，则呈现自定义错误消息：
+
+```js
+import React, { lazy, Suspense } from 'react';
+
+const AvatarComponent = lazy(() => import('./AvatarComponent'));
+const InfoComponent = lazy(() => import('./InfoComponent'));
+const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
+
+const renderLoader = () => <p>Loading</p>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <p>Loading failed! Please reload.</p>;
+    }
+
+    return this.props.children;
+  }
+}
+
+const DetailsComponent = () => (
+  <ErrorBoundary>
+    <Suspense fallback={renderLoader()}>
+      <AvatarComponent />
+      <InfoComponent />
+      <MoreInfoComponent />
+    </Suspense>
+  </ErrorBoundary>
+)
+```
+
+## 结论
+
+如果您不确定从哪里开始对 React 应用程序进行代码拆分，请按照以下步骤操作：
+
+1. 从路由级别开始。路由是识别应用程序拆分点的最简单方法。[React 文档](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting)展示了如何将 `Suspense` 与 [`react-router`](https://github.com/ReactTraining/react-router) 一起使用。
+2. 确定网站页面上仅在特定用户交互（例如点击按钮）时呈现的大型组件。拆分这些组件将最大限度地减少 JavaScript 有效负载。
+3. 考虑拆分不在屏幕内并且对用户不重要的任何其他组件。
diff --git a/src/site/content/zh/react/code-splitting-with-dynamic-imports-in-nextjs/index.md b/src/site/content/zh/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
new file mode 100644
index 00000000000..cd0c575ef83
--- /dev/null
+++ b/src/site/content/zh/react/code-splitting-with-dynamic-imports-in-nextjs/index.md
@@ -0,0 +1,125 @@
+---
+layout: post
+title: 在 Next.js 中使用动态导入进行代码拆分
+authors:
+  - mihajlija
+subhead: 如何通过代码拆分和智能加载策略加速 Next.js 应用。
+date: 2019-11-08
+feedback:
+  - api
+---
+
+## 您将学到什么？
+
+本文讲述不同类型的[代码拆分](/reduce-javascript-payloads-with-code-splitting/)以及如何使用动态导入加速 Next.js 应用。
+
+## 基于路由和基于组件的代码拆分
+
+默认情况下，Next.js 将您的 JavaScript 拆分为每个路由的单独块。当用户加载您的应用程序时，Next.js 仅发送初始路由所需的代码。当用户浏览应用程序时，他们获取与其他路由关联的块。基于路由的代码拆分最大限度地减少了需要一次解析和编译的脚本数量，从而加快了页面加载时间。
+
+虽然基于路由的代码拆分是一个很好的默认设置，但您可以通过组件级别的代码拆分进一步优化加载过程。如果您的应用含有大型组件，最好将它们分成单独的块。这样，任何不重要或仅在某些用户交互（例如点击按钮）时呈现的大型组件都可以延迟加载。
+
+Next.js 支持[动态 `import()`](https://v8.dev/features/dynamic-import) ，它允许您动态导入 JavaScript 模块（包括 React 组件）并将每个导入作为单独的块加载。这为您提供了组件级代码拆分并使您能够控制资源加载，以便用户只下载他们正在查看的站点部分所需的代码。在 Next.js 中，这些组件默认是[服务器端呈现（SSR）](/rendering-on-the-web/)。
+
+## 动态导入操作
+
+本文使用一个示例应用的多个版本，该示例应用由含有一个按钮的简单页面组成。当您点击该按钮时，会看到一只可爱的小狗。当您浏览应用的每个版本时，会看到动态导入和[静态导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import)之间的不同以及如何使用它们。
+
+在该应用的第一个版本中，小狗位于 `components/Puppy.js` 中。为了在页面上显示小狗，应用使用静态导入语句在 `index.js` 中导入 `Puppy` 组件：
+
+```js
+import Puppy from "../components/Puppy";
+```
+
+{% Glitch { id: 'static-import', path: 'index.js', previewSize: 0, height: 480 } %}
+
+要查看 Next.js 如何捆绑该应用，请检查 DevTools 中的网络跟踪：
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+{% Instruction 'reload-page', 'ol' %}
+
+加载页面时，所有必要的代码，包括 `Puppy.js` 组件，都捆绑在 `index.js` 中：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6KWlTYFhoIEIGqnuMwlh.png", alt="DevTools Network 选项卡显示了六个 JavaScript 文件：index.js、app.js、webpack.js、main.js、0.js 和 dll (动态链接库) 文件。", width="800", height="665" %}</figure>
+
+当您按下 **Click me（点击我）**按钮时，只有对 puppy JPEG 的请求会添加到 **Network（网络）**选项卡中：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/7MkXVqnqfIbW74VV48kB.png", alt="点击按钮后的 DevTools Network 选项卡，显示相同的六个 JavaScript 文件和一张图片。", width="800", height="665" %}</figure>
+
+这种方法的缺点是，即使用户不点击按钮查看小狗，他们也必须加载 `Puppy` 组件，因为它包含在 `index.js` 中。在这个小例子中，这没什么大不了的，但在实际的应用程序中，仅在必要时加载大型组件通常是一个巨大的改进。
+
+现在我们看看该应用的第二个版本，其中静态导入替换为动态导入。Next.js 包含 `next/dynamic` ，这使得可以对 Next 中的任何组件使用动态导入：
+
+```js/1,5/0
+import Puppy from "../components/Puppy";
+import dynamic from "next/dynamic";
+
+// ...
+
+const Puppy = dynamic(import("../components/Puppy"));
+```
+
+{% Glitch { id: 'dynamic-import-nextjs', path: 'pages/index.js:29:10', height: 480 } %}
+
+按照第一个示例中的步骤检查网络跟踪。
+
+首次加载该应用时，只会下载 `index.js`。这次小了 0.5 KB（从 37.9 KB 减少到 37.4 KB），因为它不包含 `Puppy` 组件的代码：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/K7Ii3bxUkb37LrZjjWT1.png", alt="DevTools Network 显示了相同的六个 JavaScript 文件，index.js 现在为 0.5 KB 小。", width="800", height="666" %}</figure>
+
+`Puppy` 组件现在位于一个单独的块 `1.js` 中，它仅在您按下按钮时加载：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1DfVDv5poQmwXwOKmnvd.png", alt="点击按钮后的 DevTools Network 选项卡，显示附加的 1.js 文件和添加到文件列表底部的图像。", width="800", height="665" %}</figure>
+
+{% Aside %} 默认情况下，Next.js 将这些动态块命名为*编号*.js，其中*编号*从 1 开始。{% endAside %}
+
+在实际应用程序中，组件通常[要大得多](https://bundlephobia.com/result?p=moment@2.24.0)，延迟加载它们可以将您的初始 JavaScript 负载减少数百 KB。
+
+## 使用自定义加载指示器进行动态导入
+
+当您延迟加载资源时，最好提供加载指示器以防出现任何延迟。在 Next.js 中，您可以通过向 `dynamic()` 函数提供附加参数来实现：
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  loading: () => <p>Loading...</p>
+});
+```
+
+{% Glitch { id: 'dynamic-import-loading', path: 'pages/index.js:7:27', height: 480 } %}
+
+要查看正在运行的加载指示器，请在 DevTools 中模拟慢速网络连接：
+
+{% Instruction 'preview', 'ol' %}
+
+{% Instruction 'devtools-network', 'ol' %}
+
+{% Instruction 'disable-cache', 'ol' %}
+
+1. 在 **Throttling（限制）**下拉列表中，选择 **Fast 3G（快速 3G）** 。
+
+2. 按下 **Click me（点击我）**按钮。
+
+现在，当您点击按钮时，加载组件需要一段时间，同时应用会显示“正在加载…”消息。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tjlpmwolBVp1jh948Fln.png", alt="一块黑屏，显示\"正在加载...\"文本。", width="800", height="663" %}</figure>
+
+## 没有 SSR 的动态导入
+
+如果您只需要在客户端呈现组件（例如，聊天小部件），您可以通过将 `ssr` 选项设置为 `false` 来实现：
+
+```js
+const Puppy = dynamic(() => import("../components/Puppy"), {
+  ssr: false,
+});
+```
+
+{% Glitch { id: 'dynamic-import-no-ssr', path: 'pages/index.js:5:0', height: 480 } %}
+
+## 结论
+
+凭借对动态导入的支持，Next.js 为您提供组件级代码拆分，这可以最大限度地减少 JavaScript 负载并缩短应用程序加载时间。默认情况下，所有组件都在服务器端呈现，您可以在必要时禁用此选项。
diff --git a/src/site/content/zh/react/index.md b/src/site/content/zh/react/index.md
new file mode 100644
index 00000000000..9b25c4f0967
--- /dev/null
+++ b/src/site/content/zh/react/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: react
+---
diff --git a/src/site/content/zh/react/virtualize-long-lists-react-window/index.md b/src/site/content/zh/react/virtualize-long-lists-react-window/index.md
new file mode 100644
index 00000000000..426d7108395
--- /dev/null
+++ b/src/site/content/zh/react/virtualize-long-lists-react-window/index.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: 使用 react-window 虚拟化大型列表
+subhead: 超大的表格和列表会显著降低网站的性能。虚拟化可以提供帮助！
+hero: image/admin/CVkKShuaQw4CfZBg3Eub.jpg
+date: 2019-04-29
+description: react-window 是一个允许高效渲染大型列表的库。
+authors:
+  - houssein
+  - developit
+feedback:
+  - api
+---
+
+[`react-window`](https://react-window.now.sh/#/examples/list/fixed-size) 是一个允许高效渲染大型列表的库。
+
+以下是一个包含 1000 行的列表示例，它使用 `react-window` 进行渲染。尝试以最快的速度滚动。
+
+{% Glitch { id: 'react-window-fixed', path: 'src/App.js', height: 750 } %}
+
+## 为什么这很有用？
+
+有时您可能需要显示包含多行的大型表格或列表。加载此类列表中的每一项都会显著影响性能。
+
+**列表虚拟化**或“窗口化”是仅渲染用户可见内容的概念。最初渲染的元素数量是整个列表的一个非常小的子集，当用户继续滚动时，可见内容的“窗口”将*移动*。这提高了列表的渲染和滚动性能。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/aWscOPGSFKVAIkgnUplQ.jpg", alt="虚拟化列表中的内容窗口", width="578", height="525" %} <figcaption>在虚拟化列表中移动内容“窗口”</figcaption></figure>
+
+离开“窗口”的 DOM 节点会被回收，或者在用户向下滚动列表时立即被替换为更新的元素。这将使特定于窗口大小的所有渲染元素数量保持不变。
+
+## react-window
+
+`react-window` 是一个小型的第三方库，通过它可以更轻松地在应用程序中创建虚拟化列表。它提供了许多基本 API，可用于不同类型的列表和表格。
+
+### 何时使用固定大小的列表
+
+如果您有一个长长的一维列表，其中包含的项目大小相同，则使用 `FixedSizeList` 组件。
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const ListComponent = () => (
+  <FixedSizeList
+    height={500}
+    width={500}
+    itemSize={120}
+    itemCount={items.length}
+  >
+    {Row}
+  </FixedSizeList>
+);
+
+export default ListComponent;
+```
+
+- `FixedSizeList` 组件接受 `height`、`width` 和`itemSize` 属性来控制列表中项目的大小。
+- 用于渲染行的函数作为子项传递给 `FixedSizeList`。可以使用 `index` 参数 (`items[index]`) 获取特定项目的详细信息。
+- 还向**必须**附加到行元素的行渲染方法传递了一个 `style` 参数。列表项通过内联分配的高度和宽度值来定位到绝对位置，`style` 参数负责此操作。
+
+{% Aside 'caution' %} 不要通过外部 CSS 文件为列表或列表项分配 `height` 和 `width` 属性。因为这些样式属性是内联应用的，它们会被忽略。{% endAside %}
+
+本文前面给出的 Glitch 示例显示了 `FixedSizeList` 组件的示例。
+
+### 何时使用大小可变的列表
+
+使用 `VariableSizeList` 组件可渲染具有不同大小的项目的列表。该组件的工作方式与固定大小的列表相同，但需要 `itemSize` 属性的函数，而不是特定值。
+
+```jsx
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+
+const items = [...] // some list of items
+
+const Row = ({ index, style }) => (
+  <div style={style}>
+     {/* define the row component using items[index] */}
+  </div>
+);
+
+const getItemSize = index => {
+  // return a size for items[index]
+}
+
+const ListComponent = () => (
+  <VariableSizeList
+    height={500}
+    width={500}
+    itemCount={items.length}
+    itemSize={getItemSize}
+  >
+    {Row}
+  </VariableSizeList>
+);
+
+export default ListComponent;
+```
+
+以下嵌入内容显示了此组件的示例。
+
+{% Glitch { id: 'react-window-variable', path: 'src/ListComponent.js', height: 750 } %}
+
+在此示例中，传递给 `itemSize` 属性的项目大小函数将行高随机化。然而，在实际应用中，应该有实际逻辑来定义每个项目的大小。理想情况下，这些大小应根据数据进行计算或通过 API 获取。
+
+{% Aside %} `FixedSizeList` 和 `VariableSizeList` 组件都通过 `layout="horizontal"` 属性支持水平列表。请参见[文档](https://react-window.now.sh/#/examples/list/fixed-size)来查看示例。{% endAside %}
+
+### 网格
+
+`react-window` 还提供对虚拟化多维列表或网格的支持。在这个背景中，可见内容的“窗口”随着用户水平**和**垂直滚动而变化。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/1j2qoGW8bFzBNiOzaJKZ.jpg", alt="在虚拟化网格中移动内容窗口是二维的", width="739", height="516"%} <figcaption>在虚拟化网格中移动内容“窗口”是二维的</figcaption></figure>
+
+同样，根据具体列表项的大小是否会变化，可以使用 `FixedSizeGrid` 和 `VariableSizeGrid` 组件。
+
+- 对于 `FixedSizeGrid`，API 大致相同，但需要为列和行表示高度、宽度和项目数。
+- 对于 `VariableSizeGrid`，可以通过将函数而不是值传递给相应的属性来更改列宽和行高。
+
+请参见[文档](https://react-window.now.sh/#/examples/grid/fixed-size)以查看虚拟化网格的示例。
+
+{% Aside %} 除了提供用于创建高效列表和网格的基本组件之外， `react-window` 还提供其他功能，例如滚动到特定项目或在用户滚动时提供指示器。此[文档](https://react-window.now.sh/#/examples/list/scrolling-indicators)提供了相关示例。{% endAside %}
+
+## 滚动时延迟加载
+
+许多网站为了提高性能，会等待用户向下滚动，然后才加载和渲染长列表中的项目。这种技术通常称为“无限加载”，当用户滚动到接近末尾的某个阈值时，将新的 DOM 节点添加到列表中。虽然这比一次加载列表中的所有项目要好，但如果用户滚动多行，最终仍会用数千行条目填充 DOM。这会导致 DOM 过大，使样式计算和 DOM 变化变慢，进而开始影响性能。
+
+下图可能有助于总结这种情况：
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dKuKVjP02xWxO9LPoOuc.jpg", alt="常规列表和虚拟化列表之间的滚动差异", width="800", height="531" %} <figcaption>常规列表和虚拟化列表之间的滚动差异</figcaption></figure>
+
+解决这个问题的最佳方法是继续使用 `react-window` 这样的库在页面上保持一个小的元素“窗口”，但在用户向下滚动时延迟加载新条目。一个单独的软件包 `react-window-infinite-loader` 通过 `react-window` 实现了这一点。
+
+考虑以下代码段，它展示了在父 `App` 组件中管理的状态的示例。
+
+```jsx
+import React, { Component } from 'react';
+
+import ListComponent from './ListComponent';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [], // instantiate initial list here
+      moreItemsLoading: false,
+      hasNextPage: true
+    };
+
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  loadMore() {
+   // method to fetch newer entries for the list
+  }
+
+  render() {
+    const { items, moreItemsLoading, hasNextPage } = this.state;
+
+    return (
+      <ListComponent
+        items={items}
+        moreItemsLoading={moreItemsLoading}
+        loadMore={this.loadMore}
+        hasNextPage={hasNextPage}
+      />
+    );
+  }
+}
+
+export default App;
+```
+
+`loadMore` 方法被传递到包含无限加载器列表的子 `ListComponent` 中。此行为很重要，因为一旦用户滚动超过某个特定点，无限加载器就需要触发回调以加载更多项目。
+
+以下是用于渲染列表的 `ListComponent` 的样子：
+
+```jsx
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import InfiniteLoader from "react-window-infinite-loader";
+
+const ListComponent = ({ items, moreItemsLoading, loadMore, hasNextPage }) => {
+  const Row = ({ index, style }) => (
+     {/* define the row component using items[index] */}
+  );
+
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  return (
+    <InfiniteLoader
+      isItemLoaded={index => index < items.length}
+      itemCount={itemCount}
+      loadMoreItems={loadMore}
+    >
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList
+          height={500}
+          width={500}
+          itemCount={itemCount}
+          itemSize={120}
+          onItemsRendered={onItemsRendered}
+          ref={ref}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+  </InfiniteLoader>
+  )
+};
+
+export default ListComponent;
+```
+
+这里，`FixedSizeList` 组件包装在 `InfiniteLoader` 中。分配给加载器的属性为：
+
+- `isItemLoaded`：用于检查是否已加载某个项目的方法
+- `itemCount`：列表中的项目数（或预期）
+- `loadMoreItems`：返回一个 promise 的回调，该 promise 解析为列表的附加数据
+
+使用一个[渲染属性](https://reactjs.org/docs/render-props.html#using-props-other-than-render)返回列表组件用于渲染的函数。`onItemsRendered` 和 `ref` 属性都是需要传递的属性。
+
+以下是无限加载如何处理虚拟化列表的示例。
+
+{% Glitch { id: 'react-window-infinite', path: 'src/ListComponent.js', height: 750 } %}
+
+向下滚动列表可能会有同样的感受，但现在每次滚动到接近列表末尾时，都会请求从[随机用户 API](https://randomuser.me/) 中检索 10 个用户。这一切都是在一次只渲染一个结果“窗口”的情况下完成的。
+
+通过检查特定项目的 `index`，可以根据是否已请求更新条目以及该项目是否仍在加载来显示项目的不同加载状态。
+
+例如：
+
+```js
+const Row = ({ index, style }) => {
+  const itemLoading = index === items.length;
+
+  if (itemLoading) {
+      // return loading state
+  } else {
+      // return item
+  }
+};
+```
+
+## 过扫描
+
+由于虚拟化列表中的项目仅在用户滚动时更改，因此当即将显示更新条目时，空白区域可能会短暂闪烁。尝试快速滚动本指南前面的任何示例就会注意到这个现象。
+
+为了改善虚拟化列表的用户体验，`react-window` 允许通过 `overscanCount` 属性对项目过扫描。这样可以定义在可见“窗口”外部始终渲染的项目数。
+
+```jsx
+<FixedSizeList
+  //...
+  overscanCount={4}
+>
+  {...}
+</FixedSizeList>
+```
+
+`overscanCount` 适用于 `FixedSizeList` 和 `VariableSizeList` 组件，默认值为 1。根据列表的大小以及每个项目的大小，过扫描多个条目有助于防止在用户滚动时出现明显闪烁的空白区域。但是，过扫描太多条目会对性能产生负面影响。使用虚拟化列表的全部意义在于最大限度地减少用户在任何给定时刻可以看到的条目数量，所以尽量使过扫描的项目数尽可能少。
+
+对于 `FixedSizeGrid` 和`VariableSizeGrid`，使用 `overscanColumnsCount` 和 `overscanRowsCount` 属性分别控制要过扫描的列数和行数。
+
+## 结论
+
+如果您不确定从哪里开始虚拟化应用程序中的列表和表格，请按照以下步骤操作：
+
+1. 测量渲染和滚动性能。这篇[文章](https://addyosmani.com/blog/react-window/)展示了如何使用 Chrome DevTools 中的 [FPS meter](https://developer.chrome.com/docs/devtools/evaluate-performance/#analyze_frames_per_second) 来探索列表上的项目的渲染效率。
+2. 对于任何会影响性能的长列表或网格，包含 `react-window`
+3. 如果 `react-window` 不支持某些功能，并且您无法自己添加此功能，请考虑使用 [`react-virtualized`](https://github.com/bvaughn/react-virtualized)。
+4. 如果需要在用户滚动时延迟加载项目，则使用 `react-window-infinite-loader` 包装虚拟化列表。
+5. 使用列表的 `overscanCount` 属性以及网格的  `overscanColumnsCount` 和 `overscanRowsCount` 属性来防止出现闪烁的空白内容。不要过扫描太多条目，因为这会对性能产生负面影响。
diff --git a/src/site/content/zh/reliable/http-cache/index.md b/src/site/content/zh/reliable/http-cache/index.md
new file mode 100644
index 00000000000..e52916a8728
--- /dev/null
+++ b/src/site/content/zh/reliable/http-cache/index.md
@@ -0,0 +1,173 @@
+---
+layout: post
+title: 使用 HTTP 缓存避免不必要的网络请求
+authors:
+  - jeffposnick
+  - ilyagrigorik
+date: 2018-11-05
+updated: 2020-04-17
+description: 如何避免不必要的网络请求？浏览器的 HTTP 缓存是您的第一道防线。虽然它并非是最强大或最灵活的方法，并且对缓存响应生命周期的控制有限，但它具有一定效率，所有浏览器均支持，而且无需太多工作。
+codelabs:
+  - codelab-http-cache
+feedback:
+  - api
+---
+
+通过网络获取资源费时费力又费钱：
+
+- 大型响应需要在浏览器和服务器之间多次往返。
+- 在所有[关键资源](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)下载完毕前，页面不会加载。
+- 如果用户通过非无限流量的资费方案访问您的站点，那么每个不必要的网络请求都在浪费他们的钱。
+
+如何避免不必要的网络请求？浏览器的 HTTP 缓存是您的第一道防线。虽然它并非是最强大或最灵活的方法，并且对缓存响应生命周期的控制有限，但它具有一定效率，所有浏览器均支持，而且无需太多工作。
+
+本指南向您展示了高效实现 HTTP 缓存的基础知识。
+
+## 浏览器兼容性 {: #browser-compatibility }
+
+其实并没有一个叫做 HTTP 缓存的 API。它是 Web 平台 API 集合的总称。所有浏览器都支持这些 API：
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Browser_compatibility)
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag#Browser_compatibility)
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified#Browser_compatibility)
+
+## HTTP 缓存的工作原理 {: #overview }
+
+浏览器发出的所有 HTTP 请求首先会转至浏览器缓存，用于检查是否存在可满足请求的有效缓存响应。如果存在匹配，则从缓存中读取响应，从而消除网络延迟和传输产生的数据成本。
+
+HTTP 缓存的行为由[请求标头](https://developer.mozilla.org/docs/Glossary/Request_header)和[响应标头](https://developer.mozilla.org/docs/Glossary/Response_header)的一起控制。在理想情况下，您可以控制 Web 应用的代码（确定请求标头）和 Web 服务器的配置（确定响应标头）。
+
+请查阅 MDN 的[HTTP 缓存](https://developer.mozilla.org/docs/Web/HTTP/Caching)一文，更深入地了解这个概念。
+
+## 请求标头：坚持使用默认值（通常）{: #request-headers }
+
+虽然有许多重要的标头应该包含在 Web 应用的传出请求中，但浏览器在发出请求时几乎总会代您进行设置。影响检查新鲜度的请求标头，如 [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) 和 [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since)，只是基于浏览器对 HTTP 缓存中当前值的理解而出现。
+
+这是个好消息——这意味着您可以继续在 HTML 中使用 `<img src="my-image.png">` 之类的标签，浏览器会自动为您处理 HTTP 缓存，无需额外工作。
+
+{% Aside %} 那些需要对其 Web 应用中的 HTTP 缓存进行更多控制的开发人员可以有另一种选择：“下拉”一个级别，然后手动使用 [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ，向它传递具有特定 [`cache`](https://developer.mozilla.org/docs/Web/API/Request/cache) 覆盖集的 [`Request`](https://developer.mozilla.org/docs/Web/API/Request) 对象。不过，该内容超出了本指南的范围！ {% endAside %}
+
+## 响应标头：配置 web 服务器 {: #response-headers }
+
+HTTP 缓存设置中最重要的部分是 Web 服务器添加到每个传出响应中的标头。下列标头都会影响到缓存行为的效率：
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control)。服务器可以通过返回 `Cache-Control` 指令，指定浏览器和其他中间缓存对单个响应进行缓存的方式以及持续时间。
+- [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag)。当浏览器发现过期的缓存响应时，它可以向服务器发送一个小令牌（通常是文件内容的哈希）来检查文件是否已更改。如果服务器返回了相同的令牌，那么说明文件没有改动，无需重新下载。
+- [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified)。此标头的用途与 `ETag` 相同，但它通过比较时间来确定资源是否已更改，而不是像 `ETag` 那样通过比较内容。
+
+默认情况下，部分 Web 服务器内置支持设置这些标头，而其他 Web 服务器则完全不会动这些标头（除非您明确配置它们）。配置标头的具体*方式*的具体取决于使用的 Web 服务器，您应该查阅服务器的文档以获得最准确的详细信息。
+
+为了节省您的时间，下面列出了部分常用 Web 服务器的配置说明：
+
+- [Express](https://expressjs.com/en/api.html#express.static)
+- [Apache](https://httpd.apache.org/docs/2.4/caching.html)
+- [nginx](http://nginx.org/en/docs/http/ngx_http_headers_module.html)
+- [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config)
+- [Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/)
+
+不去配置 `Cache-Control` 响应标头不会禁用 HTTP 缓存！相反，浏览器能[有效地猜测](https://www.mnot.net/blog/2017/03/16/browser-caching#heuristic-freshness)哪种类型的缓存行为最适合给定类型的内容。但您可能想要更多控制权，因此请花些时间配置响应标头。
+
+## 应该使用哪些响应标头值？ {: #response-header-strategies }
+
+配置 Web 服务器的响应标头时，应该涵盖两个重要的场景。
+
+### 版本化 URL 的长期缓存 {: #versioned-urls }
+
+{% Details %} {% DetailsSummary 'h4' %} 版本化 URL 对缓存策略的作用 版本化 URL 是一种非常好的做法，因为它们可以更方便地使缓存的响应无效化。 {% endDetailsSummary %} 假设您的服务器指示浏览器将 CSS 文件缓存 1 年（ <code>Cache-Control: max-age=31536000</code> ），但设计师刚刚进行了紧急更新，您需要立即推出此更新。那么如何通知浏览器更新文件的“陈旧”缓存副本呢？您做不到这点，除非修改资源的 URL。浏览器将响应缓存后会一直使用缓存版本，直到它不再是最新的（由 <code>max-age</code> 或 <code>expires</code> 决定），或者直到它因某些其他原因被从缓存中删除：例如用户清除浏览器缓存。因此，在构建页面时，不同的用户最终可能会使用不同版本的文件：刚刚获取资源的用户使用新版本，而缓存较早（但仍然有效）副本的用户使用响应的旧版本。客户端缓存和快速更新，如何两全其美呢？您更改资源的 URL 并强制用户在其内容更改时下载新响应。通常来说，您可以通过在文件名中嵌入文件的指纹或版本号来实现这一点，例如，<code>style.x234dff.css</code> 。 {% endDetails %}
+
+当响应包含 "[fingerprint](https://en.wikipedia.org/wiki/Fingerprint_(computing))" 或版本信息、且其内容永远不会改变的的 URL 请求时，请将 `Cache-Control: max-age=31536000` 添加到响应中。
+
+设置此值会告诉浏览器，当它需要在接下来的一年（31,536,000 秒；最大支持值）内加载相同的 URL 时，可以立即使用 HTTP 缓存中的值，无需向网络服务器请求。这样非常好！您可以避开网络操作，从而立即获得了可靠性和速度！
+
+像 webpack 这样的构建工具可以[自动](https://webpack.js.org/guides/caching/#output-filenames)将哈希指纹分配给资产 URL。
+
+{% Aside %} 您还可以将 [`immutable` 属性](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading)添加到 `Cache-Control` 标头中，进行进一步优化，尽管它在某些浏览器中[会被忽略](https://www.keycdn.com/blog/cache-control-immutable#browser-support)。 {% endAside %}
+
+### 非版本化 URL 的服务器重新验证 {: #unversioned-urls }
+
+遗憾的是，并非所有加载的 URL 都是版本化的。也许您无法在部署 Web 应用前就包含构建步骤，因此无法向资产 URL 添加哈希。并且每个 Web 应用都需要 HTML 文件，而这些文件（几乎）永远不会包含版本信息。因为如果用户需要记住他们要访问的 URL 是`https://example.com/index.34def12.html`，那就不会使用您的 Web 应用。那么，您能对这些 URL 做些什么呢？
+
+这是您需要承认失败的一种情况。单独的 HTTP 缓存不足以完全避开网络。（别担心，您很快就会了解[服务工作进程](/service-workers-cache-storage/) ，它会提供我们需要的支持。）但是您可以采取一些步骤来确保网络请求尽可能更快更高效。
+
+下列 `Cache-Control` 值可以帮您微调未版本化的 URL 的缓存位置和方式：
+
+- `no-cache`。该值会命令浏览器在每次使用 URL 的缓存版本前都必须与服务器重新验证。
+- `no-store`。该值会命令浏览器和其他中间缓存（如 CDN）永远不要存储文件的任何版本。
+- `private`。浏览器可以缓存文件，但中间缓存不能。
+- `public`。响应可以由任何缓存存储。
+
+查看[附录： `Cache-Control` 流程图](#flowchart)显示了使用哪个 `Cache-Control` 值的决策过程。另外还要注意 `Cache-Control` 可以接受逗号分隔的指令列表。请参阅<a href="#examples" data-md-type="link">附录：`Cache-Control` 示例</a>。
+
+除此之外，设置下面两个额外的响应标头之一也有帮助： [`ETag`](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) 或 [`Last-Modified`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified)。正如在[响应标头](#response-headers)中提到的，`ETag` 和 `Last-Modified` 的作用相同：确定浏览器是否需要重新下载已过期的缓存文件。我们推荐使用 `ETag`，因为它更准确。
+
+{% Details %} {% DetailsSummary 'h4' %} ETag 示例 {% endDetailsSummary %} 假设自初次获取以来已经过去了 120 秒，并且浏览器发起了对同一资源的新请求。那么浏览器首先会检查 HTTP 缓存并找到之前的响应。遗憾的是，浏览器无法使用之前的响应，因为它现在已经过期。此时，浏览器可以发出新的请求并获取新的完整响应。然而这个操作的效率较低，因为如果资源没有改变，那么就没有理由下载缓存中已经存在的相同信息！在 <code>ETag</code> 标头中指定的验证令牌旨在解决这个问题。服务器生成并返回一个任意令牌，通常是文件内容的哈希或其他指纹。浏览器不需要知道指纹是如何生成的；它只需要在下一个请求时将它发送到服务器。如果指纹还是一样的，那么资源没有改变，浏览器可以跳过下载。 {% endDetails %}
+
+通过设置`ETag`或`Last-Modified` ，您可以让重新验证请求更加高效。它们最终会触发在[请求标头](#request-headers)中提到 [`If-Modified-Since`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-Modified-Since) 或 [`If-None-Match`](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) 请求标头。
+
+当正确配置的 Web 服务器看到这些传入的请求标头时，它可以确认浏览器在其 HTTP 缓存中已有的资源版本是否与 Web 服务器上的最新版本匹配。如果匹配，则服务器可以使用 [`304 Not Modified`](https://developer.mozilla.org/docs/Web/HTTP/Status/304) HTTP 进行响应，这相当于说“请继续使用您已有的东西！”发送这种类型的响应时要传输的数据很少，因此通常比必须实际发回所请求的实际资源的副本要快得多。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/e2bN6glWoVbWIcwUF1uh.png", alt="客户端请求资源和服务器响应 304 标头的图表。", width="474", height="215" %}<figcaption>浏览器从服务器请求 <code>/file</code> 并加入 <code>If-None-Match</code> 标头，命令服务器仅在服务器上文件的 <code>ETag</code> 与浏览器的 <code>If-None-Match</code> 值不匹配时才返回完整文件。在本例中，这两个值确实匹配，因此服务器返回 <code>304 Not Modified</code> 响应，并说明文件还要再缓存多久（<code>Cache-Control: max-age=120</code>） 。</figcaption></figure>
+
+## 摘要 {: #summary }
+
+HTTP 缓存是一种提高负载性能的有效方式，因为它减少了不必要的网络请求。所有浏览器都支持该功能，并且不需要太多设置。
+
+下面的 `Cache-Control` 配置就是一个好的开始：
+
+- `Cache-Control: no-cache` 适用于每次使用前应与服务器重新验证的资源。
+- `Cache-Control: no-store` 适用于永远不要缓存的资源。
+- `Cache-Control: max-age=31536000` 适用于版本化的资源。
+
+`ETag` 或 `Last-Modified` 标头可以帮助您更有效地重新验证过期的缓存资源。
+
+{% Aside 'codelab' %} 请试用 [HTTP Cache codelab](/codelab-http-cache)，在 Express 中了解 `Cache-Control` 和 `ETag` 的实践经验。 {% endAside %}
+
+## 深入了解 {: #learn-more }
+
+如果您不满足于 `Cache-Control` 标头的基础知识，请查看 Jake Archibald 的 [Caching best practices &amp; max-age gotchas](https://jakearchibald.com/2016/caching-best-practices/) 指南。
+
+欲了解如何为回访者优化缓存使用，请参阅 [Love your cache](/love-your-cache) 一文。
+
+## 附录：更多技巧 {: #tips }
+
+如果您的时间比较充裕，可以通过以下方式优化 HTTP 缓存的使用：
+
+- 使用一致的 URL。如果您在不同的 URL 上提供相同的内容，那么该内容将被多次提取和存储。
+- 尽量减少代码改动。如果资源的一部分（例如 CSS 文件）经常更新，而文件的其余部分并不常更新（例如库代码），请考虑将经常更新的代码拆分到一个单独的文件中，并对频繁更新的代码使用短持续时间缓存策略，对不经常更改的代码采用长缓存持续时间策略。
+- 如果您的 `Cache-Control` 策略可以接受某种程度的陈旧，请查看新的 [`stale-while-revalidate`](/stale-while-revalidate/) 指令。
+
+## 附录： `Cache-Control` 流程图 {: #flowchart }
+
+{% Img src="image/admin/htXr84PI8YR0lhgLPiqZ.png", alt="流程图", width="595", height="600" %}
+
+## 附录： `Cache-Control` 示例 {: #examples }
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>
+<code>Cache-Control</code> 值</th>
+        <th>解释</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>max-age=86400</code></td>
+        <td>响应可以被浏览器和中间缓存缓存最多 1 天（60 秒 x 60 分钟 x 24 小时）。</td>
+      </tr>
+      <tr>
+        <td><code>private, max-age=600</code></td>
+        <td>响应可以被浏览器（但不是中间缓存）缓存最多 10 分钟（60 秒 x 10 分钟）。</td>
+      </tr>
+      <tr>
+        <td><code>public, max-age=31536000</code></td>
+        <td>响应可以由任何缓存存储 1 年。</td>
+      </tr>
+      <tr>
+        <td><code>no-store</code></td>
+        <td>不允许缓存响应，必须在每次请求时完整获取。</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/site/content/zh/reliable/index.md b/src/site/content/zh/reliable/index.md
new file mode 100644
index 00000000000..111247e1fea
--- /dev/null
+++ b/src/site/content/zh/reliable/index.md
@@ -0,0 +1,5 @@
+---
+layout: collection
+override:tags: []
+pathName: reliable
+---
diff --git a/src/site/content/zh/reliable/offline-cookbook/index.md b/src/site/content/zh/reliable/offline-cookbook/index.md
new file mode 100644
index 00000000000..d5944e59010
--- /dev/null
+++ b/src/site/content/zh/reliable/offline-cookbook/index.md
@@ -0,0 +1,616 @@
+---
+layout: post
+title: 离线指南
+description: 让应用程序离线工作的一些常见方法。
+authors:
+  - jakearchibald
+date: 2014-12-09
+updated: 2020-09-28
+---
+
+由于[服务工作进程](/service-workers-cache-storage/)的出现，我们不再尝试离线解决问题，而是让开发人员自己动手解决。通过它可以控制缓存以及如何处理请求。这意味着您可以创建自己的模式。让我们分别了解几种可能的模式，但在实践中，您可能会根据 URL 和上下文同时使用多种模式。
+
+有关其中一些模式的工作演示，请参见 [Trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 和展示性能影响的[这个视频](https://www.youtube.com/watch?v=px-J9Ghvcx4)。
+
+## 缓存机 — 何时存储资源
+
+[服务工作进程](/service-workers-cache-storage/)允许独立于缓存处理请求，因此我将分开演示。首先，应该何时进行缓存？
+
+### 安装时 — 作为依赖项 {: #on-install-as-dependency }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/CLdlCeKfoOPfpYDx1s0p.png", alt="安装时 - 作为依赖项。", width="800", height="498" %} <figcaption>安装时 - 作为依赖项。</figcaption></figure>
+
+服务工作进程提供了 `install` 事件，可以使用该事件来准备必须在处理其他事件前就绪的内容。在执行此操作时，先前版本的服务工作进程仍在运行并提供页面，所以此操作不得干扰其他服务。
+
+**适合：**CSS、图像、字体、JS、模板… 基本上您认为对于您网站的特定“版本”为静态的任何内容。
+
+如果无法获取这些内容，整个网站都不能正常运行，类似的平台特定应用程序会在初始下载中包含这些内容。
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mysite-static-v3').then(function (cache) {
+      return cache.addAll([
+        '/css/whatever-v3.css',
+        '/css/imgs/sprites-v6.png',
+        '/css/fonts/whatever-v8.woff',
+        '/js/all-min-v4.js',
+        // etc.
+      ]);
+    }),
+  );
+});
+```
+
+`event.waitUntil` 采用一个 promise 来定义安装的长度和是否成功。如果该 promise 拒绝，则安装被认为失败，该服务工作进程将被放弃（如果旧版本正在运行，它将保持原样）。`caches.open()` 和 `cache.addAll()` 返回 promise。如果无法获取其中任何资源，则 `cache.addAll()` 调用将拒绝。
+
+在 [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 上，我使用此方法来[缓存静态资产](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L3)。
+
+### 安装时 — 不作为依赖项 {: #on-install-not }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/S5L9hw95GKGWS1l0ImGl.png", alt="安装时 - 不作为依赖项。", width="800", height="500" %}<figcaption>安装时 - 不作为依赖项。</figcaption></figure>
+
+与上面相似，但不会使安装延迟完成，并且缓存失败不会导致安装失败。
+
+**适合：**不需要立即使用的较大资源，例如游戏后期的关卡资产。
+
+```js
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open('mygame-core-v1').then(function (cache) {
+      cache
+        .addAll
+        // levels 11–20
+        ();
+      return cache
+        .addAll
+        // core assets and levels 1–10
+        ();
+    }),
+  );
+});
+```
+
+上面的示例没有针对第 11-20 关将 `cache.addAll` promise 传递回 `event.waitUntil`，因此即使它失败，游戏仍然可以离线游玩。当然，您必须考虑到可能缺少这些关卡，并且一旦缺少这些关卡就重新尝试缓存它们。
+
+在下载第 11-20 关时，服务工作进程可能会被终止，因为它已完成事件处理，这意味着这些事件不会被缓存。将来，[Web 定期后台同步 API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API) 将处理此类情况以及大型下载（例如电影）。目前，该 API 只在 Chromium 分支受到支持。
+
+### 激活时 {: #on-activate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/pUH91vKtMTLXNgpHmID2.png", alt="激活时。", width="800", height="500" %} <figcaption>激活时。</figcaption></figure>
+
+**适合：**清理和迁移。
+
+安装新的服务工作进程并且不再使用以前的版本后，新版本将激活，并且您会收到一个 `activate` 事件。由于旧版本已经过时，这正是处理 [IndexedDB 中的架构迁移](/indexeddb-best-practices/)以及删除未使用缓存的好时机。
+
+```js
+self.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (cacheNames) {
+      return Promise.all(
+        cacheNames
+          .filter(function (cacheName) {
+            // Return true if you want to remove this cache,
+            // but remember that caches are shared across
+            // the whole origin
+          })
+          .map(function (cacheName) {
+            return caches.delete(cacheName);
+          }),
+      );
+    }),
+  );
+});
+```
+
+在激活期间，其他事件（例如 `fetch`）将被放入队列，因此长时间激活可能会阻止页面加载。请确保激活尽可能精简，并且仅将其用于在旧版本有效时*无法*执行的操作。
+
+在 [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 上，我使用此方法来[删除旧缓存](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L17)。
+
+### 用户交互时 {: #on-user-interaction }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/q5uUUHvxb3Is8N5Toxja.png", alt="用户交互时。", width="800", height="222" %} <figcaption>用户交互时。</figcaption></figure>
+
+**适合：**当整个网站无法离线使用，并且您选择允许用户选择他们希望离线使用的内容时。例如，YouTube 之类的网站上的视频、Wikipedia 上的文章、Flickr 上的特定图库。
+
+为用户提供“稍后阅读”或“保存以供离线使用”按钮。单击按钮后，将从网络获取所需内容并将放入缓存中。
+
+```js
+document.querySelector('.cache-article').addEventListener('click', function (event) {
+  event.preventDefault();
+
+  var id = this.dataset.articleId;
+  caches.open('mysite-article-' + id).then(function (cache) {
+    fetch('/get-article-urls?id=' + id)
+      .then(function (response) {
+        // /get-article-urls returns a JSON-encoded array of
+        // resource URLs that a given article depends on
+        return response.json();
+      })
+      .then(function (urls) {
+        cache.addAll(urls);
+      });
+  });
+});
+```
+
+[缓存 API](https://developer.mozilla.org/docs/Web/API/Cache) 可在页面和服务工作进程中使用，这意味着无需让服务工作进程将内容添加到缓存中。
+
+### 网络响应时 {: #on-network-response }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/86mv3BK2kjWi8Dm1KWpr.png", alt="网络响应时。", width="800", height="390" %} <figcaption>网络响应时。</figcaption></figure>
+
+**适合：**频繁更新的资源，例如用户的收件箱或文章内容。也可用于不重要内容，例如头像，但需要小心。
+
+如果请求与缓存中的任何内容都不匹配，则从网络获取内容，将其发送到页面，同时添加到缓存中。
+
+如果对一系列 URL（例如头像）执行此操作，则需要小心不要使您的源存储空间膨胀。如果用户需要回收磁盘空间，您不会希望成为主要清除对象。确保清除缓存中不再需要的项目。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});
+```
+
+为了有效使用内存，一次只能读取一个响应/请求的正文。上面的代码使用 [`.clone()`](https://fetch.spec.whatwg.org/#dom-request-clone) 创建可以单独读取的额外副本。
+
+在 [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 上，我使用此方法来[缓存 Flickr 图像](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L109)。
+
+### Stale-while-revalidate {: #stale-while-revalidate }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/6GyjQkG2pI5tV1xirXSX.png", alt="Stale-while-revalidate。", width="800", height="388" %} <figcaption>Stale-while-revalidate。</figcaption></figure>
+
+**适合：**频繁更新，但不需要最新版本的资源。头像可以属于这类资源。
+
+如果有可用的缓存版本，则使用它，但下次获取更新。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        var fetchPromise = fetch(event.request).then(function (networkResponse) {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    }),
+  );
+});
+```
+
+这与 HTTP 的 [stale-while-revalidate](https://www.mnot.net/blog/2007/12/12/stale) 非常相似。
+
+### 推送消息时 {: #on-push-message }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/bshuBXOyD2A4zveXQMul.png", alt="推送消息时。", width="800", height="498" %} <figcaption>推送消息时。</figcaption></figure>
+
+[Push API](/push-notifications/) 是构建在服务工作进程之上的另一个功能。它允许唤醒服务工作进程以响应来自操作系统消息服务的消息。即使用户没有标签页打开您的网站，此功能仍然有效。只有服务工作进程被唤醒。执行此操作的权限将从页面请求，系统将提示用户。
+
+**适合：**与通知相关的内容，例如聊天消息、突发新闻或电子邮件。也适合不频繁变化但受益于即时同步的内容，例如待办事项列表更新或日历变化。
+
+{% YouTube '0i7YdSEQI1w' %}
+
+常见的最终结果是一个通知，点击它将打开/聚焦相关页面，但在此之前更新缓存*极其*重要。用户在收到推送消息时显然是在线的，但他们最终与通知交互时，可能并不在线，所以让这些内容离线可用是非常重要的。
+
+以下代码在显示通知之前更新缓存：
+
+```js
+self.addEventListener('push', function (event) {
+  if (event.data.text() == 'new-email') {
+    event.waitUntil(
+      caches
+        .open('mysite-dynamic')
+        .then(function (cache) {
+          return fetch('/inbox.json').then(function (response) {
+            cache.put('/inbox.json', response.clone());
+            return response.json();
+          });
+        })
+        .then(function (emails) {
+          registration.showNotification('New email', {
+            body: 'From ' + emails[0].from.name,
+            tag: 'new-email',
+          });
+        }),
+    );
+  }
+});
+
+self.addEventListener('notificationclick', function (event) {
+  if (event.notification.tag == 'new-email') {
+    // Assume that all of the resources needed to render
+    // /inbox/ have previously been cached, e.g. as part
+    // of the install handler.
+    new WindowClient('/inbox/');
+  }
+});
+```
+
+### 后台同步时 {: #on-background-sync }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/tojpjg0cvZZVvZWStG81.png", alt="后台同步时。", width="800", height="219" %} <figcaption>后台同步时。</figcaption></figure>
+
+[后台同步](https://developer.chrome.com/blog/background-sync/)是构建在服务工作进程之上的另一个功能。它允许一次性或以一个（极具启发性的）时间间隔请求后台数据同步。即使用户没有标签页打开您的网站，此功能仍然有效。只有服务工作进程被唤醒。执行此操作的权限将从页面请求，系统将提示用户。
+
+**适合：**非紧急更新，尤其是那些每次更新都推送消息对于用户来说过于频繁的定期更新，例如社交媒体时间线或新闻文章。
+
+```js
+self.addEventListener('sync', function (event) {
+  if (event.id == 'update-leaderboard') {
+    event.waitUntil(
+      caches.open('mygame-dynamic').then(function (cache) {
+        return cache.add('/leaderboard.json');
+      }),
+    );
+  }
+});
+```
+
+## 缓存持久性 {: #cache-persistence }
+
+您的源会被给予一定容量的可用空间来做它想做的事情。该可用空间在所有源存储之间共享：[（本地）存储](https://developer.mozilla.org/docs/Web/API/Storage)、[IndexedDB](https://developer.mozilla.org/docs/Glossary/IndexedDB)、[文件系统访问](/file-system-access/)，当然还有[缓存](https://developer.mozilla.org/docs/Web/API/Cache)。
+
+您获得的容量不会明确指定，它会因设备和存储条件而异。您可以通过以下方式了解获得多少容量：
+
+```js
+navigator.storageQuota.queryInfo('temporary').then(function (info) {
+  console.log(info.quota);
+  // Result: <quota in bytes>
+  console.log(info.usage);
+  // Result: <used data in bytes>
+});
+```
+
+但是，与所有浏览器存储一样，如果设备承受存储压力，浏览器可以随意丢弃您的数据。不幸的是，浏览器无法区分您不惜一切代价想要保留的电影与您并不真正在意的游戏之间的区别。
+
+要解决此问题，请使用 [StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager) 接口：
+
+```js
+// From a page:
+navigator.storage.persist()
+.then(function(persisted) {
+  if (persisted) {
+    // Hurrah, your data is here to stay!
+  } else {
+   // So sad, your data may get chucked. Sorry.
+});
+```
+
+当然，用户必须授予权限。为此，请使用 Permissions API。
+
+让用户成为这个流程的一部分很重要，因为我们现在可以期望他们控制删除。如果他们的设备面临存储压力，而清除非必要数据并不能解决问题，则用户可以判断要保留和删除哪些项目。
+
+为此，需要操作系统在存储使用情况的细分中将“持久”源视为等同于平台特定的应用程序，而不是将浏览器作为单一项目来报告。
+
+## 服务建议 — 响应请求 {: #serving-suggestions }
+
+无论您做了多少缓存，服务工作进程都不会使用缓存，除非您告诉它何时以及如何使用。以下是一些处理请求模式：
+
+### 仅缓存 {: #cache-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ppXImAnXW7Grk4igLRTj.png", alt="仅缓存。", width="800", height="272" %} <figcaption>仅缓存。</figcaption></figure>
+
+**适合：**您认为对于您网站的特定“版本”为静态的任何内容。您应该已在 install 事件中缓存这些内容，因此您可以依赖它们。
+
+```js
+self.addEventListener('fetch', function (event) {
+  // If a match isn't found in the cache, the response
+  // will look like a connection error
+  event.respondWith(caches.match(event.request));
+});
+```
+
+尽管您通常不需要进行专门处理，但[缓存优先，网络为回退方案](#cache-falling-back-to-network)涵盖了这种情况。
+
+### 仅网络 {: #network-only }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5piPzi4NRGcgy1snmlEW.png", alt="仅网络。", width="800", height="272" %}<figcaption>仅网络。</figcaption></figure>
+
+**适合：**没有离线等效项的内容，例如分析 ping、非 GET 请求。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+  // or simply don't call event.respondWith, which
+  // will result in default browser behavior
+});
+```
+
+尽管您通常不需要进行专门处理，但[缓存优先，网络为回退方案](#cache-falling-back-to-network)涵盖了这种情况。
+
+### 缓存优先，网络为回退方案 {: #cache-falling-back-to-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FMXq6ya5HdjkNeGjTlAN.png", alt="缓存优先，网络为回退方案。", width="800", height="395" %} <figcaption>缓存优先，网络为回退方案。</figcaption></figure>
+
+**适合：**构建离线优先内容。在这种情况下，这就是您处理大多数请求的方式。其他模式将是例外，具体取决于传入请求。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+这为缓存中的内容提供“仅缓存”行为，为未缓存的内容（包括所有非 GET 请求，因为它们不能被缓存）提供“仅网络”行为。
+
+### 缓存和网络竞赛 {: #cache-and-network-race }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/j6xbmOpm4GbayBJHChNW.png", alt="缓存和网络竞争。", width="800", height="427" %}<figcaption>缓存和网络竞赛。</figcaption></figure>
+
+**适合：**在磁盘访问速度较慢的设备上追求性能的小型资产。
+
+如果是较旧的硬盘驱动器、病毒扫描程序和较快的互联网组合，在某些情况下，从网络获取资源可能比从磁盘获取资源更快。但是，当用户的设备上有内容时，从网络获取资源可能是浪费数据，所以请记住这一点。
+
+```js
+// Promise.race is no good to us because it rejects if
+// a promise rejects before fulfilling. Let's make a proper
+// race function:
+function promiseAny(promises) {
+  return new Promise((resolve, reject) => {
+    // make sure promises are all promises
+    promises = promises.map((p) => Promise.resolve(p));
+    // resolve this promise as soon as one resolves
+    promises.forEach((p) => p.then(resolve));
+    // reject if all promises reject
+    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
+  });
+}
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
+});
+```
+
+### 网络优先，缓存为回退方案 {: #network-falling-back-to-cache }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/efLECR7ZqNiPjmAzvEzO.png", alt="网络优先，缓存为回退方案。", width="800", height="388" %}<figcaption>网络优先，缓存为回退方案。</figcaption></figure>
+
+**适合：**快速修正在网站“版本”外部经常更新的资源。例如文章、头像、社交媒体时间线和游戏排行榜。
+
+这意味着您为在线用户提供最新的内容，但离线用户获得较旧的缓存版本。如果网络请求成功，您很可能希望[更新缓存条目](#on-network-response)。
+
+但是，这种方法有缺陷。如果用户的连接时断时续或缓慢，他们将不得不等待网络请求失败，然后才能获得其设备上已有的可接受内容。这可能需要很长时间，并且是令人沮丧的用户体验。请参见下一个模式，[先缓存，再网络](#cache-then-network) ，以获得更好的解决方案。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    fetch(event.request).catch(function () {
+      return caches.match(event.request);
+    }),
+  );
+});
+```
+
+### 先缓存，再网络 {: #cache-then-network }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/BjxBlbCf14ed9FBQRS6E.png", alt="先缓存，再网络。", width="800", height="478" %} <figcaption>先缓存，再网络。</figcaption></figure>
+
+**适合：**频繁更新的内容。例如文章、社交媒体时间线和游戏排行榜。
+
+这需要页面发出两个请求，一个发往缓存，一个发往网络。理念是先显示缓存的数据，然后在网络数据到达时更新页面。
+
+有时可以在新数据到达时替换当前数据（例如游戏排行榜），但这可能会破坏较大块的内容。基本上，不要让用户可能正在阅读或与之交互的内容“消失”。
+
+Twitter 在旧内容上方添加新内容并调整滚动位置，因此用户不会受到干扰。这是可行的，因为 Twitter 几乎保留了内容的线性顺序。我为 [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 复制了这个模式，以尽快在屏幕上显示内容，同时在最新内容到达时立即显示。
+
+**页面中的代码：**
+
+```js
+var networkDataReceived = false;
+
+startSpinner();
+
+// fetch fresh data
+var networkUpdate = fetch('/data.json')
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (data) {
+    networkDataReceived = true;
+    updatePage(data);
+  });
+
+// fetch cached data
+caches
+  .match('/data.json')
+  .then(function (response) {
+    if (!response) throw Error('No data');
+    return response.json();
+  })
+  .then(function (data) {
+    // don't overwrite newer network data
+    if (!networkDataReceived) {
+      updatePage(data);
+    }
+  })
+  .catch(function () {
+    // we didn't get cached data, the network is our last hope:
+    return networkUpdate;
+  })
+  .catch(showErrorMessage)
+  .then(stopSpinner);
+```
+
+**服务工作进程中的代码：**
+
+您应该始终访问网络并随时更新缓存。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('mysite-dynamic').then(function (cache) {
+      return fetch(event.request).then(function (response) {
+        cache.put(event.request, response.clone());
+        return response;
+      });
+    }),
+  );
+});
+```
+
+在 [trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 中，我的变通方法是使用 [XHR 而不是 fetch](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/utils.js#L3)，并滥用 Accept 标头来告诉服务工作进程从哪里获取结果（[页面代码](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/index.js#L70)、[服务工作进程代码](https://github.com/jakearchibald/trained-to-thrill/blob/3291dd40923346e3cc9c83ae527004d502e0464f/www/static/js-unmin/sw/index.js#L61)）。
+
+### 通用回退 {: #generic-fallback }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/URF7IInbQtWL6GZK9GW3.png", alt="通用回退。", width="800", height="389" %} <figcaption>通用回退。</figcaption></figure>
+
+如果无法从缓存和/或网络提供内容，则可能需要提供通用回退。
+
+**适合：**次要图像，例如头像、失败的 POST 请求和“离线时不可用”页面。
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    // Try the cache
+    caches
+      .match(event.request)
+      .then(function (response) {
+        // Fall back to network
+        return response || fetch(event.request);
+      })
+      .catch(function () {
+        // If both fail, show a generic fallback:
+        return caches.match('/offline.html');
+        // However, in reality you'd have many different
+        // fallbacks, depending on URL and headers.
+        // Eg, a fallback silhouette image for avatars.
+      }),
+  );
+});
+```
+
+回退到的项目可能是[安装依赖项](#on-install-as-dependency)。
+
+如果页面正在发布电子邮件，服务工作进程可能会回退到将电子邮件存储在 IndexedDB 的“发件箱”中，并以让页面知道发送失败但数据已成功保留的方式来响应。
+
+### 服务工作进程端模板 {: #Service Worker-side-templating }
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/o5SqtDczlvhw6tPJkr2z.png", alt="服务工作进程端模板。", width="800", height="463" %} <figcaption>服务工作进程端模板。</figcaption></figure>
+
+**适合：**无法缓存服务器响应的页面。
+
+[在服务器上渲染页面可加速](https://jakearchibald.com/2013/progressive-enhancement-is-faster/)，但这可能意味着将没有意义的状态数据包含在缓存中，例如“登录身份…”。如果页面由服务工作进程控制，您可以改为选择请求 JSON 数据和模板，并进行渲染。
+
+```js
+importScripts('templating-engine.js');
+
+self.addEventListener('fetch', function (event) {
+  var requestURL = new URL(event.request.url);
+
+  event.respondWith(
+    Promise.all([
+      caches.match('/article-template.html').then(function (response) {
+        return response.text();
+      }),
+      caches.match(requestURL.path + '.json').then(function (response) {
+        return response.json();
+      }),
+    ]).then(function (responses) {
+      var template = responses[0];
+      var data = responses[1];
+
+      return new Response(renderTemplate(template, data), {
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    }),
+  );
+});
+```
+
+## 总结
+
+您不会局限于这些方法中的一种。事实上，您可能会根据请求 URL 使用其中许多方法。例如，[trained-to-thrill](https://jakearchibald.github.io/trained-to-thrill/) 使用：
+
+- [安装时缓存](#on-install-as-dependency)，用于静态 UI 和行为
+- [网络响应时缓存](#on-network-response)，用于 Flickr 图像和数据
+- [从缓存获取，回退到网络](#cache-falling-back-to-network)，用于大多数请求
+- [先从缓存获取，再从网络获取](#cache-then-network)，用于 Flickr 搜索结果
+
+只需查看请求，然后决定如何操作：
+
+```js
+self.addEventListener('fetch', function (event) {
+  // Parse the URL:
+  var requestURL = new URL(event.request.url);
+
+  // Handle requests to a particular host specifically
+  if (requestURL.hostname == 'api.example.com') {
+    event.respondWith(/* some combination of patterns */);
+    return;
+  }
+  // Routing for local URLs
+  if (requestURL.origin == location.origin) {
+    // Handle article URLs
+    if (/^\/article\//.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/\.webp$/.test(requestURL.pathname)) {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (request.method == 'POST') {
+      event.respondWith(/* some other combination of patterns */);
+      return;
+    }
+    if (/cheese/.test(requestURL.pathname)) {
+      event.respondWith(
+        new Response('Flagrant cheese error', {
+          status: 512,
+        }),
+      );
+      return;
+    }
+  }
+
+  // A sensible default pattern
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+…您就明白了。
+
+### 致谢
+
+可爱图标的出处：
+
+- buzzyrobot 的 [Code](http://thenounproject.com/term/code/17547/)
+- Scott Lewis 的 [Calendar](http://thenounproject.com/term/calendar/4672/)
+- Ben Rizzo 的 [Network](http://thenounproject.com/term/network/12676/)
+- Thomas Le Bas 的 [SD](http://thenounproject.com/term/sd-card/6185/)
+- iconsmind.com 的 [CPU](http://thenounproject.com/term/cpu/72043/)
+- trasnik 的 [Trash](http://thenounproject.com/term/trash/20538/)
+- @daosme 的 [Notification](http://thenounproject.com/term/notification/32514/)
+- Mister Pixel 的 [Layout](http://thenounproject.com/term/layout/36872/)
+- P.J. Onori 的 [Cloud](http://thenounproject.com/term/cloud/2788/)
+
+感谢 [Jeff Posnick](https://twitter.com/jeffposnick) 在我点下“发布”之前捕捉到许多错误。
+
+### 进阶阅读
+
+- [服务工作进程 — 简介](/service-workers-cache-storage/)
+- [服务工作进程是否就绪？](https://jakearchibald.github.io/isserviceworkerready/)— 跟踪主要浏览器的实现状态
+- [JavaScript Promise — 简介](/promises) - promise 指南
diff --git a/src/site/content/zh/reliable/service-worker-caching-and-http-caching/index.md b/src/site/content/zh/reliable/service-worker-caching-and-http-caching/index.md
new file mode 100644
index 00000000000..6a854cf317f
--- /dev/null
+++ b/src/site/content/zh/reliable/service-worker-caching-and-http-caching/index.md
@@ -0,0 +1,272 @@
+---
+layout: post
+title: Service Worker 缓存和 HTTP 缓存
+subhead: 在 Service Worker 缓存和 HTTP 缓存层中使用一致或不同的过期逻辑的优缺点。
+authors:
+  - jonchen
+date: 2020-07-17
+description: 在 Service Worker 缓存和 HTTP 缓存层中使用一致或不同的过期逻辑的优缺点。
+tags:
+  - blog
+  - network
+  - service-worker
+  - offline
+---
+
+虽然 Service Worker 和 PWA 正在成为现代 Web 应用程序的标准，但资源缓存变得比以往任何时候都复杂。本文涵盖了浏览器缓存的重点内容，具体包括：
+
+- Service Worker 缓存与 HTTP 缓存的用例和区别。
+- 与常规 HTTP 缓存策略相比，不同 Service Worker 缓存过期策略的优缺点。
+
+## 缓存流程概述
+
+概括地说，浏览器在请求资源时会遵循以下缓存顺序：
+
+1. **Service Worker 缓存**：Service Worker 检查资源是否在其缓存中，并根据其编程的缓存策略决定是否返回资源本身。请注意，这个操作不会自动发生。您需要在 Service Worker 中创建一个 fetch 事件处理程序并拦截网络请求，这样才能从 Service Worker 的缓存而不是网络支持这些请求。
+2. **HTTP 缓存（也称为浏览器缓存）**：如果资源位于 [HTTP 缓存](/http-cache)中且尚未过期，则浏览器会自动使用 HTTP 缓存中的资源。
+3. **服务器端：**如果在 Service Worker 缓存或 HTTP 缓存中未找到任何内容，则浏览器将向网络请求资源。如果资源未在 CDN 中缓存，则请求必须返回到源服务器。
+
+{% Img src="image/admin/vtKWC9Bg9dAMzoFKTeAM.png", alt="缓存流", width="800", height="585" %}
+
+{% Aside %}请注意，有些浏览器（例如 Chrome）在 Service Worker 缓存前面有一个**内存缓存层**。内存缓存的详细信息取决于每个浏览器的实现。遗憾的是，这部分内容还没有明确的规范。{% endAside %}
+
+## 缓存层
+
+### Service Worker 缓存
+
+Service Worker 拦截网络类型的 HTTP 请求并使用[缓存策略](/offline-cookbook/#serving-suggestions)来确定应将哪些资源返回给浏览器。 Service Worker 缓存和 HTTP 缓存的通用目的相同，但 Service Worker 缓存提供了更多的缓存功能，例如，对缓存内容和缓存完成方式进行精细控制。
+
+#### 控制 Service Worker 缓存
+
+Service Worker 使用[事件侦听器](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19)（通常是 `fetch` 事件）拦截 HTTP 请求。以下[代码片段](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L19)演示了[缓存优先](https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network)这一缓存策略的逻辑。
+
+{% Img src="image/admin/INLfnhEpmL4KpMmFXnTL.png", alt="该图展示了 Service Worker 如何拦截 HTTP 请求", width="800", height="516" %}
+
+强烈建议使用[工具箱](https://developer.chrome.com/docs/workbox/)以免白费力气重复工作。例如，您可以[使用一行正则表达式代码来注册资源 URL 路径](https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-regular-expression-route)。
+
+```js
+import {registerRoute} from 'workbox-routing';
+
+registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);
+```
+
+#### Service Worker 缓存策略和用例
+
+下表概述了常见的 Service Worker 缓存策略以及每种策略的适用场合。
+
+<table>
+<thead><tr>
+<th><strong>策略</strong></th>
+<th><strong>新鲜度理论</strong></th>
+<th><strong>用例</strong></th>
+</tr></thead>
+<tbody>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-only">仅网络</a></p></strong></td>
+<td>内容必须始终保持最新。</td>
+<td><ul>
+<li>付款和结帐</li>
+<li>余额表</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#network-falling-back-to-cache">网络回退到缓存</a></p></strong></td>
+<td>最好提供新内容。但是，如果网络出现故障或不稳定，也可以提供稍旧的内容。</td>
+<td><ul>
+<li>及时数据</li>
+<li>价格和费率（需要免责声明）</li>
+<li>订单状态</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="/stale-while-revalidate/">重新验证时过期 (Stale-while-revalidate)</a></p></strong></td>
+<td>可以立即提供缓存内容，但将来应该使用更新的缓存内容。</td>
+<td><ul>
+<li>新闻提要</li>
+<li>产品列表页面</li>
+<li>留言</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-then-network">缓存优先，回退到网络</a></p></strong></td>
+<td>内容不重要，并且可以从缓存中获得以提高性能，但 Service Worker 应该偶尔检查是否有更新。</td>
+<td><ul>
+<li>应用外壳</li>
+<li>公共资源</li>
+</ul></td>
+</tr>
+<tr>
+<td><strong><p data-md-type="paragraph"><a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-only">仅缓存</a></p></strong></td>
+<td>内容很少改变。</td>
+<td><ul><li>静态内容</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+#### Service Worker 缓存的其他优势
+
+除了对缓存逻辑的精细控制外，Service Worker 缓存还具有以下优势：
+
+- **为您的源提供更多内存和存储空间：**浏览器基于每个[源](/same-site-same-origin/#origin)分配 HTTP 缓存资源。换句话说，如果您有多个子域，它们将共享相同的 HTTP 缓存。无法保证您的源/域的内容会长时间保留在 HTTP 缓存中。例如，用户可以通过以下方式清除缓存：在浏览器的设置 UI 中进行手动清理或者触发页面上的硬重新加载。使用 Service Worker 缓存，您的缓存内容保持缓存状态的可能性要高得多。请参阅[持久存储](/persistent-storage/)以了解更多信息。
+- **网络不稳定或离线时提高灵活性：**使用 HTTP 缓存，您只能做二元选择：要么缓存资源，要么不缓存。使用 Service Worker 缓存，您可以更轻松地缓解小“小问题”（使用“重新验证时过期”策略）、提供完整的离线体验（使用“仅缓存”策略），或者是介于二者之间，例如，对于自定义 UI，必要时，页面的一部分来自 Service Worker 缓存，而某些部分被排除在外（使用“设置捕获处理程序“策略）。
+
+### HTTP 缓存
+
+浏览器第一次加载网页和相关资源时，会将这些资源存储在其 HTTP 缓存中。 HTTP 缓存通常由浏览器自动启用，除非最终用户明确禁用它。
+
+使用 HTTP 缓存便意味着，由服务器来确定何时缓存资源以及缓存多长时间。
+
+#### 使用 HTTP 响应标头控制 HTTP 缓存过期
+
+当服务器响应浏览器对资源的请求时，服务器使用 HTTP 响应标头来告诉浏览器应该将该资源缓存多长时间。请参阅[响应标头：配置您的 Web 服务器](/http-cache/#response-headers)以了解更多信息。
+
+#### HTTP 缓存策略和用例
+
+HTTP 缓存比 Service Worker 缓存简单得多，因为 HTTP 缓存只处理基于时间 (TTL) 的资源过期逻辑。请参阅[您应该使用哪些响应标头值？](/http-cache/#response-header-strategies)和[摘要](/http-cache/#summary)以了解有关 HTTP 缓存策略的更多信息。
+
+## 设计您的缓存过期逻辑
+
+本部分介绍在 Service Worker 缓存和 HTTP 缓存层中使用一致的过期逻辑的优缺点，以及在这些层中使用单独的过期逻辑的优缺点。
+
+下面的 Glitch 演示了 Service Worker 缓存和 HTTP 缓存在不同场景中的应用情况：
+
+{% Glitch { id: 'compare-sw-and-http-caching', height: 480 } %}
+
+### 在所有缓存层中使用一致的过期逻辑
+
+为了演示优缺点，我们比较 3 种场景：长期缓存、中期缓存和短期缓存。
+
+<table>
+<thead><tr>
+<th>场景</th>
+<th>长期缓存</th>
+<th>中期缓存</th>
+<th>短期缓存</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Service Worker 缓存策略</td>
+<td>缓存，回退到网络</td>
+<td>重新验证时过期</td>
+<td>网络回退到缓存</td>
+</tr>
+<tr>
+<td>Service Worker 缓存 TTL</td>
+<td><strong>30 天</strong></td>
+<td><strong>1 天</strong></td>
+<td><strong>10 分钟</strong></td>
+</tr>
+<tr>
+<td>HTTP 缓存最长时限</td>
+<td><strong>30 天</strong></td>
+<td><strong>1 天</strong></td>
+<td><strong>10 分钟</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### 场景：长期缓存（缓存，回退到网络）
+
+- 当缓存的资源有效（&lt;= 30 天）时：Service Worker 立即返回缓存的资源，无需访问网络。
+- 当缓存的资源过期（&gt; 30 天）时：Service Worker 访问网络来获取资源。浏览器的 HTTP 缓存中没有该资源的副本，因此它会在服务器端获取该资源。
+
+缺点：在这种情况下，HTTP 缓存的价值较小，因为当 Service Worker 中的缓存过期时，浏览器始终将请求传递到服务器端。
+
+#### 场景：中期缓存（重新验证时过期）
+
+- 当缓存的资源有效（&lt;= 1 天）时：Service Worker 立即返回缓存的资源，并访问网络来获取资源。浏览器的 HTTP 缓存中有资源的副本，因此，它将该副本返回给 Service Worker。
+- 当缓存的资源过期（&gt; 1 天）时：Service Worker 立即返回缓存的资源，并访问网络来获取资源。浏览器的 HTTP 缓存中没有资源的副本，因此，它会在服务器端获取该资源。
+
+缺点：Service Worker 需要额外使用缓存破坏逻辑来替换 HTTP 缓存，从而充分利用”重新验证“步骤。
+
+#### 场景：短期缓存（网络回退到缓存）
+
+- 当缓存的资源有效（&lt;= 10 分钟）时：Service Worker 访问网络来获取资源。浏览器的 HTTP 缓存中有资源的副本，因此，它无需转到服务器端即可将该副本返回给 Service Worker。
+- 当缓存的资源过期（&gt; 10 分钟）时：Service Worker 立即返回缓存的资源，并访问网络来获取资源。浏览器的 HTTP 缓存中没有资源的副本，因此，它在服务器端获取该资源。
+
+缺点：与中期缓存场景类似，Service Worker 需要额外使用缓存破坏逻辑来替换 HTTP 缓存，从而在服务器端获取最新的资源。
+
+#### 所有场景中的 Service Worker
+
+在所有场景中，如果网络不稳定，Service Worker 缓存仍可返回缓存的资源。另一方面，当网络不稳定或中断时，HTTP 缓存将变得不可靠。
+
+### 在 Service Worker 缓存和 HTTP 层中使用不同的缓存过期逻辑
+
+为了演示优缺点，我们再来比较长期缓存、中期缓存和短期缓存场景。
+
+<table>
+<thead><tr>
+<th>场景</th>
+<th>长期缓存</th>
+<th>中期缓存</th>
+<th>短期缓存</th>
+</tr></thead>
+<tbody>
+<tr>
+<td>Service Worker 缓存策略</td>
+<td>缓存，回退到网络</td>
+<td>重新验证时过期</td>
+<td>网络回退到缓存</td>
+</tr>
+<tr>
+<td>Service Worker 缓存 TTL</td>
+<td><strong>90 天</strong></td>
+<td><strong>30 天</strong></td>
+<td><strong>1 天</strong></td>
+</tr>
+<tr>
+<td>HTTP 缓存最长时限</td>
+<td><strong>30 天</strong></td>
+<td><strong>1 天</strong></td>
+<td><strong>10 分钟</strong></td>
+</tr>
+</tbody>
+</table>
+
+#### 场景：长期缓存（缓存，回退到网络）
+
+- 当缓存的资源在 Service Worker 缓存中有效（&lt;= 90 天）时：Service Worker 立即返回缓存的资源。
+- 当缓存的资源在 Service Worker 缓存中过期（&gt; 90 天）时：Service Worker 访问网络来获取资源。浏览器的 HTTP 缓存中没有资源的副本，因此，它转到服务器端。
+
+优缺点：
+
+- 优点：当 Service Worker 立即返回缓存的资源时，用户会体验到即时响应。
+- 优点：Service Worker 可以更精细地控制何时使用其缓存以及何时请求新版本资源。
+- 缺点：需要明确定义的 Service Worker 缓存策略。
+
+#### 场景：中期缓存（重新验证时过期）
+
+- 当缓存的资源在 Service Worker 缓存中有效（&lt;= 30 天）时：Service Worker 立即返回缓存的资源。
+- 当缓存的资源在 Service Worker 缓存中过期（&gt; 30 天）时：Service Worker 访问网络来获取资源。浏览器的 HTTP 缓存中没有资源的副本，因此，它转到服务器端。
+
+优缺点：
+
+- 优点：当 Service Worker 立即返回缓存的资源时，用户会体验到即时响应。
+- 优点：由于重新验证“在后台”执行，Service Worker 可以确保给定 URL 的**下一个**请求使用的是来自网络的新响应。
+- 缺点：需要明确定义的 Service Worker 缓存策略。
+
+#### 场景：短期缓存（网络回退到缓存）
+
+- 当缓存的资源在 Service Worker 缓存中有效（&lt;= 1 天）时：Service Worker 访问网络来获取资源。如果 HTTP 缓存中有资源，浏览器会从 HTTP 缓存返回该资源。如果网络中断，Service Worker 将从 Service Worker 缓存返回该资源。
+- 当缓存的资源在 Service Worker 缓存中过期（&gt; 1 天）时：Service Worker 访问网络来获取资源。浏览器通过网络获取资源，因为其 HTTP 缓存中的缓存版本已过期。
+
+优缺点：
+
+- 优点：当网络不稳定或中断时，Service Worker 会立即返回缓存的资源。
+- 缺点：Service Worker 需要额外使用缓存破坏逻辑来替换 HTTP 缓存并发出“网络优先”请求。
+
+## 结论
+
+鉴于缓存场景组合的复杂性，无法设计出一种可涵盖所有情况的规则。但是，根据前面几部分的研究结果，在设计缓存策略时，可以考虑以下几项建议：
+
+- Service Worker 缓存逻辑不需要与 HTTP 缓存过期逻辑保持一致。如果可能，请在 Service Worker 中使用更长的过期逻辑以授予 Service Worker 更多控制权。
+- HTTP 缓存仍然扮演着重要的角色，但是当网络不稳定或中断时它会变得不可靠。
+- 重新审视每个资源的缓存策略，确保您的 Service Worker 缓存策略具有相应的价值，而不会与 HTTP 缓存发生冲突。
+
+## 了解更多
+
+- [网络可靠性](/reliable/)
+- [使用 HTTP 缓存避免不必要的网络请求](/http-cache)
+- [HTTP 缓存代码实验室](/codelab-http-cache/)
+- [衡量 Service Worker 对性能的真实影响](https://developers.google.com/web/showcase/2016/service-worker-perf)
+- [缓存控制 (Cache-Control) 与过期](https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers)
diff --git a/src/site/content/zh/reliable/service-workers-cache-storage/index.md b/src/site/content/zh/reliable/service-workers-cache-storage/index.md
new file mode 100644
index 00000000000..7d72f812470
--- /dev/null
+++ b/src/site/content/zh/reliable/service-workers-cache-storage/index.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: 服务工作进程和缓存存储 API
+authors:
+  - jeffposnick
+date: 2018-11-05
+updated: 2020-02-27
+description: 浏览器的 HTTP 缓存是您的第一道防线。它不一定是最强大或最灵活的方法，并且您对缓存响应的生命周期的控制有限。但是有几个经验法则可以让您无需太多工作即可获得合理的缓存实现，因此您应该始终尝试遵循它们。
+---
+
+陷入网络可靠性的斗争中时，浏览器的 HTTP 缓存是您的第一道防线，但正如您所了解的，它只有在加载您之前访问过的版本化 URL 时才真正有效。仅靠 HTTP 缓存是不够的。
+
+幸运的是，有两个更新的工具可以帮助您扭转局面：[服务工作进程](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)和[缓存存储 API](https://developer.mozilla.org/docs/Web/API/CacheStorage) 。由于它们经常一起使用，因此值得同时了解它们。
+
+## 服务工作进程
+
+服务工作进程内置于浏览器中，并由您负责创建的一些额外 JavaScript 代码控制。您可以将其与构成实际 Web 应用程序的其他文件一起部署。
+
+服务工作进程有一些特殊的功能。除其他职责外，它会耐心等待您的 Web 应用发出传出请求，然后通过拦截它而立即采取行动。服务工作进程对该拦截请求执行的动作由您决定。
+
+对于某些请求，最好的做法可能只是允许请求继续发送到网络，就像根本没有服务工作进程时会发生的情况一样。
+
+但是，对于其他请求，您可以利用比浏览器的 HTTP 缓存更灵活的途径，并返回可靠且快速的响应，而不必担心网络。这需要使用另一个搭档：缓存存储 API。
+
+## 缓存存储 API
+
+缓存存储 API 开辟了全新的可能性范围，让开发人员可以完全控制缓存的内容。缓存存储 API 不依赖于 HTTP 标头和浏览器的内置[启发式](https://httpwg.org/specs/rfc7234.html#heuristic.freshness)的组合，而是公开了一种代码驱动的缓存方法。当从服务工作进程的 JavaScript 调用时，缓存存储 API 特别有用。
+
+### 等等……现在还要考虑其他的缓存吗？
+
+您可能会问自己这样的问题：“我还需要配置我的 HTTP 标头吗？”、“我可以用这个新缓存实现哪些 HTTP 缓存无法实现的功能？”。别担心——这些都是自然反应。
+
+仍然建议您在网络服务器上配置 `Cache-Control` 标头，即使您知道自己正在使用缓存存储 API。您通常可以为未版本化的 URL 设置 `Cache-Control: no-cache`，和/或为包含版本信息的网址设置 `Cache-Control: max-age=31536000` ，就像哈希一样。
+
+填充缓存存储 API 缓存时，浏览器[默认检查](https://jakearchibald.com/2016/caching-best-practices/#the-service-worker-the-http-cache-play-well-together-dont-make-them-fight)HTTP 缓存中的现有条目，并在找到时使用这些条目。如果您将版本化 URL 添加到缓存存储 API 缓存，浏览器会避免额外的网络请求。另一面是，如果您使用错误配置的 `Cache-Control` 标头，例如为未版本化的 URL 指定长期缓存生命周期，则将过时的内容添加到缓存存储 API 最终会使事情[变得更糟](https://jakearchibald.com/2016/caching-best-practices/#a-service-worker-can-extend-the-life-of-these-bugs)。对 HTTP 缓存行为进行排序是有效使用缓存存储 API 的先决条件。
+
+至于现在该新的 API 可以带来什么，答案是：很多。其可以实现 HTTP 缓存很难或不可能实现的一些操作，包括：
+
+- 对缓存内容使用“后台刷新”方法，称为 stale-while-revalidate。
+- 对要缓存的最大资产数量设置上限，并实施自定义过期策略以在达到该期限后删除项目。
+- 比较以前缓存的和新的网络响应，看看是否有任何更改，并允许用户在数据实际更新时更新内容（例如，使用按钮）。
+
+请查看[缓存 API：快速指南](/cache-api-quick-guide/)了解更多信息。
+
+### API 的组件
+
+API 的设计需要注意以下几点：
+
+- [`Request`](https://developer.mozilla.org/docs/Web/API/Request) 对象在读取和写入这些缓存时用作唯一键。为方便起见，您可以传入类似 `'https://example.com/index.html'` 的 URL 字符串作为键，而不是实际的 `Request` 对象，API 会自动为您处理。
+- [`Response`](https://developer.mozilla.org/docs/Web/API/Response) 对象用作这些缓存中的值。
+- 缓存数据时，给定 `Response` 上的 `Cache-Control` 标头会被有效地忽略。没有自动的、内置的过期或新鲜度检查，一旦您将项目存储在缓存中，它将一直存在，直到您的代码明确删除它。（有一些库可以代表您简化缓存维护。本系列后面内容将介绍它们。）
+- 与 [`LocalStorage`](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage) 等较旧的同步 API 不同，所有缓存存储 API 操作都是异步的。
+
+## 快速绕道：promises 和 async/await
+
+服务工作进程和缓存存储 API 使用[异步编程概念](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming))。特别是，它们严重依赖承诺来表示异步操作的未来结果。深入使用前，您应熟悉 [promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) 和相关的 [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/await) 语法。
+
+{% Aside 'codelab' %}[通过注册服务工作进程使应用程序可靠](/codelab-service-workers)。 {% endAside %}
+
+## 不要部署相关代码……还没有
+
+虽然它们提供了一个重要的基础，并且可以按原样使用，但服务工作进程和缓存存储 API 都是有效的低级构建块，具有许多边缘情况和“陷阱”。有一些更高级别的工具可以帮助解决这些 API 的困难部分，并提供构建生产就绪服务工作进程所需的一切。下一个指南将介绍其中这样一个工具：[Workbox](https://developer.chrome.com/docs/workbox/)。
+
+{% Aside 'success' %}边玩边学。探索新的[服务工作进程游戏！](https://serviceworkies.com/)。{% endAside %}
diff --git a/src/site/content/zh/secure/cross-origin-isolation-guide/index.md b/src/site/content/zh/secure/cross-origin-isolation-guide/index.md
new file mode 100644
index 00000000000..ca072cf1b67
--- /dev/null
+++ b/src/site/content/zh/secure/cross-origin-isolation-guide/index.md
@@ -0,0 +1,117 @@
+---
+layout: post
+title: 跨域隔离的启用指南
+authors:
+  - agektmr
+date: 2021-02-09
+updated: 2021-08-05
+subhead: 跨域隔离使网页能够使用例如 SharedArrayBuffer 等强大功能。本篇文章解释了如何在您的网站上启用跨域隔离。
+description: 跨域隔离使网页能够使用例如 SharedArrayBuffer 等强大功能。本篇文章解释了如何在您的网站上启用跨域隔离。
+tags:
+  - security
+---
+
+本篇指南将向您展示跨域隔离的启用方式。如果您想使用[`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)、[`performance.measureUserAgentSpecificMemory()`](/monitor-total-page-memory-usage/)或 [更精确的高精度计时器](https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/)，就会需要跨域隔离。
+
+如果您打算启用跨域隔离，请评估这对您网站上的其他跨域资源（例如广告展示位置）将产生的影响。
+
+{% Details %} {% DetailsSummary %} 确定您网站中`SharedArrayBuffer`的使用位置
+
+从 Chrome 92 开始，使用`SharedArrayBuffer`的功能在没有跨域隔离的情况下将停止工作。如果您是因为收到`SharedArrayBuffer`已弃用的消息而造访此页面，那么很可能是因为您的网站或其中嵌入的某项资源正在使用`SharedArrayBuffer`。为确保您的网站不会因弃用而中断，请首先确定`SharedArrayBuffer`的使用位置。
+
+{% endDetailsSummary %}
+
+{% Aside 'objective' %}
+
+- 开启跨域隔离来继续使用`SharedArrayBuffer`。
+- 如果您依赖使用`SharedArrayBuffer`的第三方代码，请通知第三方提供商采取相应措施。{% endAside %}
+
+如果您不确定您网站中`SharedArrayBuffer`的使用位置，有两种方法可以找到：
+
+- 使用 Chrome 开发者工具
+- （进阶）使用弃用报告
+
+如果您已经知道`SharedArrayBuffer`的使用位置，请跳至[分析跨域隔离的影响](#analysis)。
+
+### 使用 Chrome 开发者工具
+
+[Chrome 开发者工具](https://developer.chrome.com/docs/devtools/open/)允许开发者对网站进行检查。
+
+1. 在您怀疑可能正在使用`SharedArrayBuffer`的页面上[打开 Chrome 开发者工具](https://developer.chrome.com/docs/devtools/open/)。
+2. 选择**控制台**面板。
+3. 如果该页面正在使用`SharedArrayBuffer`，则会显示以下消息：
+    ```text
+    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
+    ```
+4. 消息末尾的文件名和行号（例如，`common-bundle.js:535`）表明`SharedArrayBuffer`的来源。如果来源是第三方库，请联系开发者解决问题。如果是作为您网站的一部分来执行的，请按照以下指南启用跨域隔离。
+
+<figure>
+{% Img src="image/YLflGBAPWecgtKJLqCJHSzHqe2J2/GOgkyjAabePTc8AG22F7.png", alt="在没有跨域隔离的情况下使用 SharedArrayBuffer 时，开发者工具控制台发出警告", width="800", height="163"  %}
+<figcaption>在没有跨域隔离的情况下使用 SharedArrayBuffer 时，开发者工具控制台发出警告。</figcaption>
+</figure>
+
+### （进阶）使用弃用报告
+
+某些浏览器有向指定端点[报告已弃用 API 的功能](https://wicg.github.io/deprecation-reporting/)。
+
+1. [设置弃用报告服务器并获取报告 URL](/coop-coep/#set-up-reporting-endpoint)。您可以通过使用公共服务或自己进行搭建来实现这一目标。
+2. 使用 URL，对可能正在提供`SharedArrayBuffer`的页面设置以下 HTTP 标头。
+    ```http
+    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
+    ```
+3. 一旦标头开始传播，您注册的端点就应该能够开始收集弃用报告。
+
+请在此处查看执行示例：[https://cross-origin-isolation.glitch.me](https://cross-origin-isolation.glitch.me)。
+
+{% endDetails %}
+
+## 分析跨域隔离的影响 {:#analysis}
+
+如果能在不进行任何破坏的情况下就可以评估启用跨域隔离对您的网站的影响，那该多好啊？[`Cross-Origin-Opener-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)和[`Cross-Origin-Embedder-Policy-Report-Only`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) HTTP 标头恰恰能帮助您实现这一愿望。
+
+1. 在您的顶级文档上设置[`Cross-Origin-Opener-Policy-Report-Only: same-origin`](/coop-coep/#1.-set-the-cross-origin-opener-policy:-same-origin-header-on-the-top-level-document)。正如标头名称所示，该标头只发送有关`COOP: same-origin`**将会**对您网站产生的影响的报告，而不会实际弹出窗口来禁止通信。
+2. 设置报告内容并配置一个网络服务器来接收和保存报告。
+3. 在顶级文档上设置[`Cross-Origin-Embedder-Policy-Report-Only: require-corp`](/coop-coep/#3.-use-the-coep-report-only-http-header-to-assess-embedded-resources)。与之前一样，该标头能够让您看到启用`COEP: require-corp`后的影响，而不会实际影响您的网站功能。您可以配置该标头，将报告发送到您在上一步中设置的同一个报告服务器。
+
+{% Aside %}您也可以在 Chrome 开发者工具的**网络**面板中[启用**域**列](https://developer.chrome.com/docs/devtools/network/#information)，从而对哪些资源会受到影响形成总体的概念。{% endAside %}
+
+{% Aside 'caution' %}
+
+启用跨域隔离将阻止您未明确选择加入的跨域资源进行加载，并且会阻止您的顶级文档与弹出窗口进行通信。
+
+由于跨域隔离要求所有子资源明确选择加入，所以我们一直在探索大规模部署`Cross-Origin-Resource-Policy`的方法。我们提出了相反方向的想法：[一种新的 COEP "无凭据"模式](https://github.com/mikewest/credentiallessness/)，允许通过剥离所有资源凭据来加载没有 CORP 标头的资源。我们正在研究该模式运作方式的具体细节，但我们希望这个模式能在确保子资源发送`Cross-Origin-Resource-Policy`标头方面为您减轻负担。
+
+此外，众所周知`Cross-Origin-Opener-Policy: same-origin`标头会破坏需要跨域窗口交互（例如 OAuth 和支付）的集成。为了缓解这个问题，我们正在探索通过[放宽条件](https://github.com/whatwg/html/issues/6364)来为`Cross-Origin-Opener-Policy: same-origin-allow-popups`启用跨域隔离。这样就可以让该标头与其打开的窗口进行通信。
+
+如果您想启用跨域隔离，却面临这些挑战的阻碍，那么我们建议您[注册一个原始试验](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial)，同时等待可用的新模式。在这些新模式可用之前，我们不打算终止原始试验。
+
+{% endAside %}
+
+## 减轻跨域隔离的影响
+
+在确定哪些资源将受到跨域隔离的影响后，以下是有关如何实际让这些跨域资源选择加入的一般准则：
+
+1. 在图像、脚本、样式表、iframe 等跨域资源上设置[`Cross-Origin-Resource-Policy: cross-origin`](https://resourcepolicy.fyi/#cross-origin)标头。在同站资源上设置[`Cross-Origin-Resource-Policy: same-site`](https://resourcepolicy.fyi/#same-origin)标头。
+2. 如果资源是用 [CORS](/cross-origin-resource-sharing/)（例如，`<img src="example.jpg" crossorigin>`）提供的，那么请在顶级文档的 HTML 标签中设置`crossorigin`。
+3. 如果加载到 iframe 中的跨域资源涉及另一层 iframe，则在进行下一步之前递归地运用本节中描述的步骤。
+4. 在您确认所有跨域资源都已选择加入后，请在加载到 iframe 中的跨域资源上设置`Cross-Origin-Embedder-Policy: require-corp`标头。
+5. 请确保没有需要通过`postMessage()`进行通信的跨域弹出窗口。这些弹出窗口无法在启用跨域隔离时继续运行。您可以将通信移动到另一个非跨域隔离文档中，或使用一种不同的通信方法（例如，HTTP 请求）。
+
+## 启用跨域隔离
+
+在减轻跨域隔离的影响后，以下是启用跨域隔离的一般准则：
+
+1. 在顶级文档上设置`Cross-Origin-Opener-Policy: same-origin`标头。如果您之前已经设置了`Cross-Origin-Opener-Policy-Report-Only: same-origin`，请将其替换。这会阻止顶级文档与其弹出窗口之间的通信。
+2. 在顶级文档上设置`Cross-Origin-Embedder-Policy: require-corp`标头。如果您之前已经设置了`Cross-Origin-Embedder-Policy-Report-Only: require-corp`，请将其替换。这会阻止未选择加入的跨域资源进行加载。
+3. 检查并确认`self.crossOriginIsolated`在控制台中返回`true`，从而验证您的页面已启用跨域隔离。
+
+{% Aside 'gotchas' %}
+
+在本地服务器上启用跨域隔离可能非常麻烦，因为轻量服务器不支持发送标头。您可以使用命令行标志`--enable-features=SharedArrayBuffer`启动 Chrome，从而在不启用跨域隔离的情况下启用`SharedArrayBuffer`。了解[如何使用命令行标志在各个平台上运行 Chrome](https://www.chromium.org/developers/how-tos/run-chromium-with-flags)。
+
+{% endAside %}
+
+## 资源
+
+- [使用 COOP 和 COEP 将您的网站"跨域隔离"](/coop-coep/)
+- [安卓 Chrome 88 和桌面 Chrome 92 中的 SharedArrayBuffer 更新](https://developer.chrome.com/blog/enabling-shared-array-buffer/)
diff --git a/src/site/content/zh/secure/cross-origin-resource-sharing/index.md b/src/site/content/zh/secure/cross-origin-resource-sharing/index.md
new file mode 100644
index 00000000000..a1dcfc74139
--- /dev/null
+++ b/src/site/content/zh/secure/cross-origin-resource-sharing/index.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: 跨域资源共享 (CORS)
+subhead: 安全共享跨域资源
+authors:
+  - kosamari
+date: 2018-11-05
+description: 浏览器的同源策略阻止了浏览器读取不同源的资源。这种机制能够阻止恶意网站读取另一个网站的数据，但也会阻碍合法使用。如果您希望获取其他国家的天气数据该怎么办？启用 CORS 可以让服务器告知浏览器自己已获许使用其他源。
+tags:
+  - security
+---
+
+浏览器的同源策略阻止了浏览器读取不同源的资源。这种机制能够阻止恶意网站读取另一个网站的数据，但也会阻碍合法使用。如果您希望获取其他国家的天气数据该怎么办？
+
+在现代网络应用程序中，应用程序通常希望从不同源获取资源。例如，您想要从不同的域读取 JSON 数据或者将另一个网站的图像加载到`<canvas>`元素中。
+
+换句话说，部分**公共资源**应该可以供任何人读取，但同源策略会阻碍这一点。开发者使用过诸如 [JSONP](https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about) 之类的变通方法，但**跨域资源共享 (CORS)** 能够通过标准方式修复此问题。
+
+启用 **CORS** 可以让服务器告知浏览器自己已获许使用其他源。
+
+## 资源请求在网络上是如何运作的？
+
+<figure data-float="right">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8J6A0Bk5YXdvyoj8HVzs.png", alt="请求和响应", width="668", height="327" %}<figcaption>图：客户端请求和服务器响应图示</figcaption></figure>
+
+浏览器和服务器可以使用**超文本传输协议** (HTTP) 来通过网络交换数据。HTTP 定义了请求者和响应者之间的通信规则，其中包括获取资源所需的信息。
+
+HTTP 标头用于协商客户端和服务器之间的消息交换类型，并用于确定访问权限。浏览器的请求和服务器的响应消息都分为两部分：**标头**和**主体**：
+
+### 标头
+
+包含消息的相关信息，例如消息类型或消息编码。标头可以包括[各种信息](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)，这些信息通过键值对表示。请求头和响应头包含不同的信息。
+
+{% Aside %}请务必注意，标头不能包含评论。{% endAside %}
+
+**请求头示例**
+
+```text
+Accept: text/html
+Cookie: Version=1
+```
+
+以上内容相当于表示“我希望收到 HTML 的响应。这是我的一个 cookie。”
+
+**响应头示例**
+
+```text
+Content-Encoding: gzip
+Cache-Control: no-store
+```
+
+以上内容相当于表示“数据是用 gzip 编码的。请不要将其缓存。”
+
+### 主体
+
+消息本身。主体可以是纯文本、二进制图像、JSON、HTML 等。
+
+## CORS 是如何运作的？
+
+请记住，同源策略会让浏览器阻止跨域请求。当您想从不同的源获取公共资源时，提供资源的服务器需要告知浏览器“发出该请求的这个源可以访问我的资源”。浏览器会记住这一点，并允许跨域资源共享。
+
+### 第一步：客户端（浏览器）请求
+
+当浏览器发出跨域请求时，该浏览器会添加一个包含当前源（协议、主机和端口）的`Origin`标头。
+
+### 第二步：服务器响应
+
+在服务器端，当服务器看到该标头并想要允许访问时，就需要在响应中加入一个`Access-Control-Allow-Origin`标头来指定请求源（或加入`*`来允许任何源。）
+
+### 第三步：浏览器接收响应
+
+当浏览器看到带有相应`Access-Control-Allow-Origin`标头的响应时，即允许与客户端网站共享响应数据。
+
+## 查看 CORS 的实际应用
+
+这是一个使用 Express 的小型网络服务器。
+
+{% Glitch { id: 'cors-demo', path: 'server.js', height: 480 } %}
+
+第一个端点（第 8 行）没有设置任何响应头，该端点只会在响应中发送一个文件。
+
+{% Instruction 'devtools' %} {% Instruction 'devtools-console', 'ul' %}
+
+- 请尝试以下命令：
+
+```js
+fetch('https://cors-demo.glitch.me/', {mode:'cors'})
+```
+
+您应该会看到一条错误消息：
+
+```bash
+请求已被 CORS 策略阻止：所请求的资源上无
+'Access-Control-Allow-Origin'标头。
+```
+
+第二个端点（第 13 行）在响应中发送的是相同的文件，但在标头中加入了`Access-Control-Allow-Origin: *`。请在控制台中尝试：
+
+```js
+fetch('https://cors-demo.glitch.me/allow-cors', {mode:'cors'})
+```
+
+您的此次请求应该不会被阻止。
+
+## 通过 CORS 共享凭据
+
+出于隐私原因，CORS 通常用于“匿名请求”，即不识别请求方的请求。如果您想在使用 CORS 时发送 cookie（这样会识别发送者），就需要在请求和响应中添加额外的标头。
+
+### 请求
+
+请将`credentials: 'include'`添加到如下所示的获取选项中。该操作将包括请求中的 cookie。
+
+```js
+fetch('https://example.com', {
+  mode: 'cors',
+  credentials: 'include'
+})
+```
+
+### 响应
+
+必须将`Access-Control-Allow-Origin`设置给一个特定的源（没有使用`*`通配符），并且必须将`Access-Control-Allow-Credentials`设置为`true`。
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Credentials: true
+```
+
+## 复杂 HTTP 调用的预检请求
+
+如果某个网络应用程序需要复杂的 HTTP 请求，那么浏览器会在请求链的前端添加一个**[预检请求](https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests)**。
+
+CORS 规范将**复杂请求**定义为
+
+- 使用除 GET、POST 或 HEAD 以外方法的请求
+- 包含除`Accept`、`Accept-Language`或`Content-Language`以外标头的请求
+- 具有除`application/x-www-form-urlencoded`、`multipart/form-data`或`text/plain`以外的`Content-Type`标头的请求
+
+浏览器会根据需要创建预检请求。如下所示，该请求是一个`OPTIONS`请求，会在实际请求消息之前被发送。
+
+```text
+OPTIONS /data HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: DELETE
+```
+
+在服务器端，应用程序在响应预检请求时需要提供程序从该源接受的方法的相关信息。
+
+```text
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
+```
+
+服务器响应还可以包含一个`Access-Control-Max-Age`标头，用于指定缓存预检结果的持续时间（以秒为单位），这样客户端就无需在每次发送复杂请求时都发出预检请求了。
diff --git a/src/site/content/zh/secure/fixing-mixed-content/index.md b/src/site/content/zh/secure/fixing-mixed-content/index.md
new file mode 100644
index 00000000000..1ace2033441
--- /dev/null
+++ b/src/site/content/zh/secure/fixing-mixed-content/index.md
@@ -0,0 +1,147 @@
+---
+layout: post
+title: 修复混合内容
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-23
+description: |2-
+
+  了解如何修复您网站上的混合内容错误，
+  从而保护用户并确保您的所有内容都能加载。
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+让您的网站支持 HTTPS 是保护您的网站和用户免受攻击的一项重要举措，但混合内容会使这种保护失效。如[什么是混合内容？](/what-is-mixed-content)中所述，浏览器会阻止危险性日益提高的混合内容
+
+在本指南中，我们将演示用于修复现有混合内容问题并防止新问题发生的技术和工具。
+
+## 通过访问您的网站查找混合内容
+
+在 Google Chrome 中访问 HTTPS 网页时，浏览器会在 JavaScript 控制台中以错误和警告的形式提醒您存在混合内容。
+
+在[什么是混合内容？](/what-is-mixed-content)中，您可以找到许多示例，并了解 Chrome DevTools 如何报告问题。
+
+[被动混合内容](https://passive-mixed-content.glitch.me/)的示例将给出以下警告。如果浏览器能够在`https` URL 找到被动混合内容，会自动将其升级，然后显示一条消息。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y7b4EWAbSL6BgI07FdQq.jpg", alt="Chrome DevTools 在检测到和升级混合内容时显示的警告", width="800", height="294" %}</figure>
+
+浏览器会阻止[主动混合内容](https://active-mixed-content.glitch.me/)并显示一条警告。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/KafrfEz1adCP2eUHQEWy.jpg", alt="Chrome DevTools 在主动混合内容被阻止时显示的警告", width="800", height="304" %}</figure>
+
+如果在您的网站上发现 `http://` URL 出现此类警告，则需要在网站的源代码中修复这些警告。将这些 URL 及其所在的网页编制列表，会有助于修复时使用。
+
+{% Aside %}混合内容错误和警告只显示在您当前查看的网页上，每次导航到新网页时，JavaScript 控制台都会清空内容。这意味着您必须逐个查看网站的每个网页才能找到这些错误。{% endAside %}
+
+### 查找网站中的混合内容
+
+您可以直接在源代码中搜索混合内容。在源代码中搜索 `http://` 并查找包含 HTTP URL 属性的标签。请注意，锚标签 (`<a>`) 的 `href` 属性中包含 `http://` 通常不是混合内容问题，稍后将讨论一些值得注意的例外情况。
+
+如果您的网站是使用内容管理系统发布的，则发布网页时可能会插入指向不安全 URL 的链接。例如，图像可能包含一个完整的 URL 而不是一个相对路径。您需要在 CMS 内容中找到并修复这些问题。
+
+### 修复混合内容
+
+在您的网站源代码中发现混合内容后，您可以按照以下步骤进行修复。
+
+如果您收到一条控制台消息，表明资源请求已自动从 HTTP 升级到 HTTPS，您可以安全地将代码中资源的 `http://` URL 更改为 `https://`。您还可以通过在浏览器 URL 栏中将 `http://` 更改为 `https://` 并尝试在浏览器选项卡中打开 URL 来检查资源是否安全可用。
+
+如果无法通过 `https://` 获得资源，您应该考虑以下方法之一：
+
+- 添加来自不同主机的资源（如果有）。
+- 如果法律允许，直接下载并托管网站上的内容。
+- 将资源完全从您的网站中移除。
+
+解决问题后，查看最初发现错误的网页并确认错误是否不再出现。
+
+### 注意非标准标签的使用
+
+注意您网站上对非标准标签的使用。例如，锚 (`<a>`) 标签 URL 不会导致混合内容错误，因为它们会使浏览器导航到新网页。这意味着它们通常不需要修复。然而，一些图像库脚本会覆盖 `<a>` 标签的功能，并将 `href` 属性指定的 HTTP 资源加载到网页上的灯箱显示中，从而导致发生混合内容问题。
+
+## 批量处理混合内容
+
+上述手动操作适合较小的网站；但是对于大型网站或拥有许多独立开发团队的网站来说，很难跟踪所有加载的内容。为了完成此任务，您可以使用内容安全策略来指示浏览器通知您混合内容的存在，并确保您的网页永远不会意外加载不安全的资源。
+
+### 内容安全策略
+
+[内容安全策略](/csp/) (CSP) 是一种多用途浏览器功能，可用于批量管理混合内容。CSP 报告机制可用于跟踪您网站上的混合内容，并提供执行策略，通过升级或阻止混合内容来保护用户。
+
+您可以通过在服务器发送的响应中加入 `Content-Security-Policy` 或 `Content-Security-Policy-Report-Only` 标头来为网页启用这些功能。此外，您还可以使用网页 `<head>` 部分的 `<meta>` 标签来设置 `Content-Security-Policy`（**不是** `Content-Security-Policy-Report-Only`）。
+
+{% Aside %}现代浏览器会强制执行它们收到的所有内容安全策略。浏览器在响应头或 `<meta>` 元素中接收到的多个 CSP 标头值会合并在一起，作为单个策略强制执行；报告策略也会像这样合并。通过取策略的交集来合并策略；也就是说，第一个策略之后的每个策略只能进一步限制允许的内容，而不能扩大。{% endAside %}
+
+### 使用内容安全策略查找混合内容
+
+您可以使用内容安全策略来收集您网站上混合内容的报告。要启用此功能，请通过将 `Content-Security-Policy-Report-Only` 添加为您网站的响应头来设置该指令。
+
+响应头：
+
+`Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint`
+
+{% Aside %}[report-uri](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) 响应头已被弃用，取而代之的是 [report-to](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/report-to)。支持 `report-to` 的浏览器目前只有 Chrome 和 Edge。您可以同时提供上述两个标头，如果浏览器支持 `report-to`，则会忽略 `report-uri`。{% endAside %}
+
+每当用户访问您网站上的网页时，他们的浏览器都会向 `https://example.com/reportingEndpoint` 发送一份 JSON 格式的报告，列举违反内容安全策略的内容。此时，只要通过 HTTP 加载子资源，就会发送报告。这些报告包括发生违反策略的网页 URL 和违反策略的子资源 URL。如果您将报告端点配置为记录这些报告，便可跟踪网站上的混合内容，而无需亲自访问每个网页。
+
+对此有两个注意事项：
+
+- 用户必须在能够识别 CSP 标头的浏览器中访问您的网页。大多数现代浏览器都符合此要求。
+- 您只能获得用户访问过的网页的报告。因此，如果您的网页流量不太多，则可能需要一段时间才能获得整个网站的报告。
+
+[内容安全策略](/csp/)指南包含更多信息和示例端点。
+
+### 使用 CSP 报告的替代方法
+
+如果您的网站由 Blogger 等平台为您托管，您可能无权修改标头和添加 CSP。一个可行的替代方法是使用 [HTTPSChecker](https://httpschecker.net/how-it-works#httpsChecker) 或 [Mixed Content Scan](https://github.com/bramus/mixed-content-scan) 等网站爬虫为您查找整个网站的问题。
+
+### 升级不安全的请求
+
+浏览器开始升级并阻止不安全的请求。您可以使用 CSP 指令强制自动升级或阻止这些资产。
+
+[`upgrade-insecure-requests`](https://www.w3.org/TR/upgrade-insecure-requests/) CSP 指令指示浏览器在发出网络请求之前升级不安全的 URL。
+
+例如，如果网页包含带有 HTTP URL 的图像标签，如 `<img src="http://example.com/image.jpg">`
+
+浏览器改为对 `https://example.com/image.jpg` 发出安全请求，从而使用户避开混合内容。
+
+您可以使用以下指令发送 `Content-Security-Policy` 标头来启用此行为：
+
+```markup
+Content-Security-Policy: upgrade-insecure-requests
+```
+
+或者通过使用以下 `<meta>` 元素将同样的指令内联嵌入到文档的 `<head>` 部分：
+
+```html
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+```
+
+与浏览器自动升级一样，如果资源无法通过 HTTPS 访问，则升级请求将失败并且不会加载资源。这样可以维护您网页的安全性。`upgrade-insecure-requests` 指令将超越自动浏览器升级，尝试升级浏览器当前没有的请求。
+
+`upgrade-insecure-requests` 指令级联到 `<iframe>` 文档中，确保整个网页都受到保护。
+
+### 阻止所有混合内容
+
+保护用户的另一种方法是使用 [`block-all-mixed-content`](https://www.w3.org/TR/mixed-content/#strict-checking) CSP 指令。该指令指示浏览器永不加载混合内容；所有混合内容资源请求都会被阻止，包括主动和被动混合内容。此方法还会级联到 `<iframe>` 文档中，确保整个网页都没有混合内容。
+
+网页可以使用以下指令发送 `Content-Security-Policy` 标头来选择阻止所有混合内容：
+
+```markup
+Content-Security-Policy: block-all-mixed-content
+```
+
+或者通过使用以下 `<meta>` 元素将同样的指令内联嵌入到文档的 `<head>` 部分：
+
+```html
+<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
+```
+
+{% Aside %}如果您同时设置 `upgrade-insecure-requests` 和 `block-all-mixed-content`，会首先评估和使用 `upgrade-insecure-requests`。浏览器不会继续阻止请求。因此，您应该使用两者之一。{% endAside %}
diff --git a/src/site/content/zh/secure/index.md b/src/site/content/zh/secure/index.md
new file mode 100644
index 00000000000..dc6f2f96963
--- /dev/null
+++ b/src/site/content/zh/secure/index.md
@@ -0,0 +1,7 @@
+---
+layout: collection
+override:tags: []
+pathName: secure
+tags:
+  - security
+---
diff --git a/src/site/content/zh/secure/same-site-same-origin/index.md b/src/site/content/zh/secure/same-site-same-origin/index.md
new file mode 100644
index 00000000000..ae5d32ba24b
--- /dev/null
+++ b/src/site/content/zh/secure/same-site-same-origin/index.md
@@ -0,0 +1,182 @@
+---
+layout: post
+title: 理解“同站”和“同源”
+authors:
+  - agektmr
+date: 2020-04-15
+updated: 2020-06-10
+description: "“同站 (Same-Site)”和“同源 (Same-Origin)”是两个常用但也常被误解的术语。本文可帮助您理解它们的含义和区别。"
+tags:
+  - security
+---
+
+“同站”和“同源”是两个常用但也常被误解的术语。例如，在页面转换、`fetch()` 请求、Cookie、打开弹出窗口、嵌入资源和 iframe 的上下文中都会使用这两个术语。
+
+## 来源
+
+{% Img src="image/admin/PX5HrIMPlgcbzYac3FHV.png", alt="Origin", width="680", height="100" %}
+
+“来源 (Origin)”就是[方案](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Scheme_or_protocol)（也称为[协议](https://developer.mozilla.org/docs/Glossary/Protocol)，例如 [HTTP](https://developer.mozilla.org/docs/Glossary/HTTP) 或 [HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)）、[主机名](https://en.wikipedia.org/wiki/Hostname)和[端口](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Port)（如果指定）的组合。例如，假设 URL 是 `https://www.example.com:443/foo` ，则“来源”为 `https://www.example.com:443`。
+
+### “同源”和“跨源” {：#same-origin-and-cross-origin }
+
+方案、主机名和端口均相同的组合的网站视为“同源”，否则视为“跨源”。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>源 A</th>
+        <th>源 B</th>
+        <th>源 A 和源 B是否“同源”/“跨源”的解释</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="7">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>跨源：域不同</td>
+      </tr>
+      <tr>
+        <td>https://example.com:443</td>
+        <td>跨源：子域不同</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td>跨源：子域不同</td>
+      </tr>
+      <tr>
+        <td><strong>http://www.example.com:443</strong></td>
+        <td>跨源：方案不同</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td>跨源：端口不同</td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>同源：完全匹配</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>同源：隐式端口号 (443) 匹配</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 站点
+
+{% Img src="image/admin/oSRJzCJIr4OjGzUhcNDP.png", alt="Site", width="680", height="142" %}
+
+顶级域 (TLD)，例如 `.com` 和 `.org` 列在[根区数据库](https://www.iana.org/domains/root/db)中。在上面的示例中，“站点”是 TLD 与它之前的域部分的组合。例如，假设 URL 是 `https://www.example.com:443/foo` ，则“站点”为 `example.com`。
+
+但是，对于 `.co.jp` 或 `.github.io` 等域，仅使用 `.jp` 或 `.io` 的 TLD 不足以识别“站点”。同时，无法通过算法确定特定 TLD 的可注册域的级别。这就是创建“有效 TLD”(eTLD) 列表的原因。这些域在[公共后缀列表](https://wiki.mozilla.org/Public_Suffix_List)中进行定义。eTLD 列表的维护网站是 [publicsuffix.org/list](https://publicsuffix.org/list/)。
+
+完整站点名称为 eTLD+1。例如，假设 URL 为 `https://my-project.github.io`，则 eTLD 为 `.github.io`，而 eTLD+1 则为 `my-project.github.io`，这就是一个“站点”。换句话说，eTLD+1 是有效的 TLD 加上它前面的域部分。
+
+{% Img src="image/admin/qmr35hpnIvpouOe9591g.png", alt="eTLD+1", width="695", height="136" %}
+
+### “同站”和“跨站”{：#same-site-cross-site }
+
+eTLD+1 相同的网站被视为“同站”。eTLD+1 不同的网站则被视为“跨站”。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>源 A</th>
+        <th>源 B</th>
+        <th>源 A 和源 B 是否“同站”/“跨站”的解释</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>跨站：域不同</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>同站：子域不同无关紧要</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td><strong>同站：方案不同无关紧要</strong></td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>同站：端口不同无关紧要</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>同站：完全匹配</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>同站：端口无关紧要</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### “有方案同站”
+
+{% Img src="image/admin/Y9LbVyxYzg4k6mwSEqyE.png", alt="schemeful same-site", width="677", height="105" %}
+
+“同站”的定义正在演变为将 URL 方案视为站点的一部分，从而防止将 HTTP 用作[弱通道](https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8)。由于浏览器转变为这种解释，因此，当引述旧定义时，您可能会看到“无方案同站”之类的引用，而“[有方案同站](/schemeful-samesite/)”则是更严格的定义。在这种情况下，`http://www.example.com` 和 `https://www.example.com` 被视为跨站，因为方案不匹配。
+
+<div class="table-wrapper scrollbar">
+  <table>
+    <thead>
+      <tr>
+        <th>源 A</th>
+        <th>源 B</th>
+        <th>源 A 和源 B 是否是“有方案同站”的解释</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="6">https://www.example.com:443</td>
+        <td>https://<strong>www.evil.com</strong>:443</td>
+        <td>跨站：域不同</td>
+      </tr>
+      <tr>
+        <td>https://<strong>login</strong>.example.com:443</td>
+        <td><strong>有方案同站：子域不同无关紧要</strong></td>
+      </tr>
+      <tr>
+        <td>
+<strong>http</strong>://www.example.com:443</td>
+        <td>跨站：方案不同</td>
+      </tr>
+      <tr>
+        <td>https://www.example.com:<strong>80</strong>
+</td>
+        <td><strong>有方案同站：端口不同无关紧要</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com:443</strong></td>
+        <td><strong>有方案同站：完全匹配</strong></td>
+      </tr>
+      <tr>
+        <td><strong>https://www.example.com</strong></td>
+        <td><strong>有方案同站：端口无关紧要</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+## 如何检查请求是“同站”、“同源”还是“跨站”
+
+Chrome 将请求与 `Sec-Fetch-Site` HTTP 标头一起发送。截至 2020 年 4 月，没有其他浏览器支持 `Sec-Fetch-Site`。这是更大的[获取元数据请求标头 (Fetch Metadata Request Headers)](https://www.w3.org/TR/fetch-metadata/) 提案的一部分。该标头的值为以下之一：
+
+- `cross-site`
+- `same-site`
+- `same-origin`
+- `none`
+
+通过检查 `Sec-Fetch-Site` 的值，您可以确定请求是“同站”、“同源”还是“跨站”（“有方案同站”不是在 `Sec-Fetch-Site` 中获取）。
diff --git a/src/site/content/zh/secure/what-is-mixed-content/index.md b/src/site/content/zh/secure/what-is-mixed-content/index.md
new file mode 100644
index 00000000000..51597d104d5
--- /dev/null
+++ b/src/site/content/zh/secure/what-is-mixed-content/index.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: 混合内容是什么？
+authors:
+  - johyphenel
+  - rachelandrew
+date: 2019-09-07
+updated: 2020-09-24
+description: 通过安全 HTTPS 连接加载初始 HTML，但通过不安全的 HTTP 连接加载其他资源时，就会出现混合内容。
+tags:
+  - security
+  - network
+  - privacy
+  - html
+  - css
+  - javascript
+  - images
+  - media
+---
+
+通过安全 [HTTPS](/why-https-matters/) 连接加载初始 HTML，但通过不安全的 HTTP 连接加载其他资源（如图像、视频、样式表、脚本）时，就会出现**混合内容**。之所以称之为混合内容，不仅仅是因为显示的同一个页面上同时加载了 HTTP 和 HTTPS 内容，还因为初始请求是通过 HTTPS 加密的。
+
+使用不安全的 HTTP 协议请求子资源会降低整个页面的安全性，因为这些请求容易遭受[**路径中攻击**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1)，攻击者会窃听网络连接并查看或修改两方之间的通信。利用这些资源，攻击者可以跟踪用户并替换网站上的内容，而对于主动混合内容的情况，他们可以完全控制页面，而不仅仅是导致资源不安全。
+
+尽管许多浏览器会警告用户存在混合内容，但往往为时已晚：这时已经执行不安全的请求，页面安全性也已经遭到破坏。
+
+这就是为什么浏览器要越来越严格地阻止混合内容的原因。如果您的网站上存在混合内容，那么通过修复可以确保即使浏览器实施更严格的限制，您也可以继续加载内容。
+
+## 混合内容的两种类型
+
+混合内容有两种类型：主动和被动。
+
+**被动混合内容**是指不与页面其余部分交互的内容，因此，中间人攻击将仅限于他们拦截或更改这种内容时可以执行的操作。被动混合内容包括图像、视频和音频内容。
+
+**主动混合内容**作为一个整体与页面进行交互，因此允许攻击者对页面执行几乎任何操作。主动混合内容包括脚本、样式表、iframe 和浏览器可以下载和执行的其他代码。
+
+### 被动混合内容
+
+一般认为，被动混合内容的问题相对较少，但仍会对您的网站和用户构成安全威胁。例如，攻击者可以拦截您网站上图像的 HTTP 请求并交换或替换这些图像；攻击者可以交换*保存*和*删除*按钮的图像，导致您的用户在无意中删除内容；或者使用淫秽或色情内容替换您的产品图表，从而破坏您的网站；又或者使用不同网站或产品的广告替换您的产品图片。
+
+即使攻击者不更改您网站的内容，他们也可以通过混合内容请求来跟踪用户。攻击者可以根据浏览器加载的图像或其他资源来判断用户访问了哪些页面以及查看了哪些产品。
+
+如果存在被动混合内容，大多数浏览器会在 URL 栏中指出页面不安全，即使页面本身是通过 HTTPS 加载的。您可以通过包含被动混合内容示例的此[演示](https://passive-mixed-content.glitch.me/)来观察这种行为。
+
+直到最近，所有浏览器仍会加载被动混合内容，因为阻止这些内容会破坏许多网站。现在，这种情况开始发生变化，因此，更新您网站上的混合内容实例至关重要。
+
+[Chrome 目前正在尽可能推出](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html)被动混合内容的自动升级。自动升级意味着，如果资产可通过 HTTPS 加载，但已将其硬编码为 HTTP，则浏览器会加载 HTTPS 版本。如果找不到安全版本，则不加载资产。
+
+每当检测到混合内容或自动升级被动混合内容时，Chrome 都会将详细消息记录到 DevTools 的**“问题”**选项卡下，从而指导您解决特定的问题。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNxoomaHi2ksvYHGuNiE.jpg", alt="Chrome DevTools 中显示关于特定混合内容问题及其解决方法详细信息的问题选项卡", width="800", height="310" %}</figure>
+
+### 主动混合内容
+
+与被动混合内容相比，主动混合内容构成的威胁更大。攻击者可以拦截和重写活动内容，从而完全控制您的页面，甚至控制整个网站。这样，攻击者便可以更改页面的任何内容，包括显示完全不同的内容，窃取用户密码或其他登录凭据，窃取用户会话 Cookie 或将用户重定向到完全不同的站点。
+
+由于这种威胁的严重性，为了保护用户，大多数浏览器已经默认阻止此类内容，但具体功能因浏览器供应商和版本而异。
+
+下面的[演示](https://active-mixed-content.glitch.me/)包含主动混合内容的示例。[通过 HTTP 加载示例](http://active-mixed-content.glitch.me/)可查看[通过 HTTPS 加载示例](https://active-mixed-content.glitch.me/)时阻止的内容。**问题**选项卡中也会详细说明阻止的内容。
+
+<figure>{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xRG5zpKLr0Z3OwfYpn2H.jpg", alt="Chrome DevTools 中显示关于特定混合内容问题及其解决方法详细信息的问题选项卡", width="800", height="361" %}</figure>
+
+{% Aside %} 浏览器还会在开发者工具中突出显示阻止的内容。在基于 Chromium 的浏览器的**问题**选项卡中会详细介绍阻止的内容问题。Firefox 和 Safari 会在控制台中记录消息。{% endAside %}
+
+## 混合内容规范
+
+浏览器需要遵循[混合内容规范](https://w3c.github.io/webappsec-mixed-content/)。该规范定义了[**可选择阻止的内容**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content)和[**可阻止的内容**](https://w3c.github.io/webappsec-mixed-content/#category-blockable)类别。
+
+根据规范，“当 Web 的重要组成部分遭到破坏的风险超过允许使用混合内容的风险时”，则资源有资格作为可选择阻止的内容；这是上述被动混合内容类别的子集。
+
+所有不可**选择阻止的**内容都被认为是**可阻止的内容**，并且浏览器应将其阻止。
+
+{% Aside %}目前正在实施[第 2 级混合内容规范](https://w3c.github.io/webappsec-mixed-content/level2.html)，其中会添加规范的自动升级。{% endAside %}
+
+近年来，[HTTPS 的应用越来越广泛](https://transparencyreport.google.com/https/overview)，已经成为 Web 上明确的默认设置。现在，这使浏览器考虑阻止所有混合内容变得更加可行，即便是[混合内容规范中](https://w3c.github.io/webappsec/specs/mixedcontent/)定义为**可选择阻止**的子资源类型。这就是我们现在看到 Chrome 对这些子资源实施更严格的方法的原因。
+
+### 旧版浏览器
+
+请务必记住，并非每一位访问您网站的用户都会使用最新的浏览器。不同的浏览器供应商，不同的版本，处理混合内容的方式可能不同。最糟糕的是，旧浏览器和旧版本根本不会阻止任何混合内容，这对用户来说非常不安全。
+
+通过解决混合内容问题，您可以确保内容在新浏览器中可见。还有助于保护用户，防止遭到旧版浏览器未阻止的危险内容的侵害。
diff --git a/src/site/content/zh/secure/why-https-matters/index.md b/src/site/content/zh/secure/why-https-matters/index.md
new file mode 100644
index 00000000000..df40d59fb71
--- /dev/null
+++ b/src/site/content/zh/secure/why-https-matters/index.md
@@ -0,0 +1,39 @@
+---
+layout: post
+title: HTTPS 为何重要
+authors:
+  - kaycebasques
+date: 2015-11-23
+updated: 2020-04-07
+description: HTTPS 为您的网站保驾护航，保护您用户的隐私和安全，是首选必备的全新而强大的 Web 平台 API。
+tags:
+  - security
+---
+
+您应该始终使用 HTTPS 保护您的所有网站，即使这些网站不处理敏感通信也应如此。除了为您的网站和用户的个人信息提供关键的安全性和数据完整性之外，HTTPS 还是使用许多新浏览器功能的必要前提，尤其是[渐进式 Web 应用程序](/progressive-web-apps)所需的功能。
+
+{% YouTube 'iP75a1Y9saY' %}
+
+## 摘要 {: #summary }
+
+- 恶意和良性入侵者都会利用您的网站和用户间的每一个未受保护的资源。
+- 许多入侵者通过查看群体行为来识别您的用户。
+- HTTPS 不仅可以阻止滥用您的网站，也是使用许多最新功能的前提，还能为 Service Worker 等类似应用程序功能提供支持。
+
+## HTTPS 为您的网站保驾护航 {: #integrity }
+
+HTTPS 可帮助您阻止入侵者篡改您的网站与用户浏览器间的通信。入侵者包括故意的恶意攻击者，以及合法但具有侵入性的公司，例如 ISP 或在网页中植入广告的酒店。
+
+入侵者利用未受保护的通信来诱使您的用户放弃敏感信息或安装恶意软件，或者将他们的广告插入您的资源中。例如，一些第三方会在网站中植入广告，这可能会破坏用户体验并造成安全漏洞。
+
+入侵者会利用在您的网站和用户之间传输的所有未受保护的资源。图像、cookie、脚本、HTML……它们都可以被利用。入侵可能发生在网络中的任何一环，包括用户的电脑、Wi-Fi 热点或有安全漏洞的 ISP，这些只是其中的一小部分。
+
+## HTTPS 保护您用户的隐私和安全 {: #privacy }
+
+HTTPS 可防止入侵者被动监听您的网站与用户之间的通信。
+
+关于 HTTPS 的一个常见误解是，只有处理敏感通信的网站才需要 HTTPS。事实上每个未受保护的 HTTP 请求都可能泄露有关用户行为和身份的信息。尽管对您未受保护的网站的单次访问看似没有恶意，但一些入侵者会查看您用户的总体浏览活动，从而推断他们的行为和意图，并对他们的身份进行[去匿名化](https://en.wikipedia.org/wiki/De-anonymization)。例如，员工可能只是阅读未受保护的医疗文章而无意中向雇主透露了敏感的健康状况。
+
+## HTTPS 是网络的未来 {: #capabilities }
+
+一些新的 Web 平台功能十分强大，例如使用 `getUserMedia()` 拍照或录制音频，通过 [Service Worker](/service-workers-cache-storage/) 实现离线应用程序体验，或构建[渐进式 Web 应用程序](/progressive-web-apps)。这些功能在执行之前都需要用户的明确许可。许多早期的 API 也正在更新以要求获得执行权限，例如 [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation/Using_geolocation)。HTTPS 正是这些新功能和更新 API 的权限工作流的关键组成部分。
diff --git a/src/site/content/zh/vitals/index.md b/src/site/content/zh/vitals/index.md
new file mode 100644
index 00000000000..7050fa88252
--- /dev/null
+++ b/src/site/content/zh/vitals/index.md
@@ -0,0 +1,220 @@
+---
+layout: post
+title: Web 指标
+description: 优秀网站的关键指标
+hero: image/admin/BHaoqqR73jDWe6FL2kfw.png
+authors:
+  - philipwalton
+date: 2020-04-30
+updated: 2020-07-21
+tags:
+  - metrics
+  - performance
+  - web-vitals
+---
+
+不断优化用户体验是所有网站取得长远成功的关键。无论您是一名企业家、营销人员，还是开发者，Web 指标都能帮助您量化网站的体验指数，并发掘改进的机会。
+
+## 概览
+
+Web 指标是 Google 开创的一项新计划，旨在为网络质量信号提供统一指导，这些信号对于提供出色的网络用户体验至关重要。
+
+多年来，Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行，而另一些开发者则发现大量的工具和指标令人应接不暇。
+
+网站所有者要想了解他们提供给用户的体验质量，并非需要成为性能专家。 Web 指标计划旨在简化场景，帮助网站专注于最重要的指标，即**核心 Web 指标** 。
+
+## 核心 Web 指标
+
+核心 Web 指标是适用于所有网页的 Web 指标子集，每位网站所有者都应该测量这些指标，并且这些指标还将显示在所有 Google 工具中。每项核心 Web 指标代表用户体验的一个不同方面，能够进行[实际](/user-centric-performance-metrics/#how-metrics-are-measured)测量，并且反映出[以用户为中心](/user-centric-performance-metrics/#how-metrics-are-measured)的关键结果的真实体验。
+
+核心 Web 指标的构成指标会随着时间的推移而[发展](#evolving-web-vitals) 。当前针对 2020 年的指标构成侧重于用户体验的三个方面——*加载性能*、*交互性*和*视觉稳定性*——并包括以下指标（及各指标相应的阈值）：
+
+<div class="auto-grid" style="--auto-grid-min-item-size: 200px;">{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg", alt="最大内容绘制阈值建议", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/iHYrrXKe4QRcb2uu8eV8.svg", alt="首次输入延迟阈值建议", width="400", height="350" %} {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg", alt="累积布局偏移阈值建议" , width="400", height="350" %}</div>
+
+- **[Largest Contentful Paint (LCP)](/lcp/)** ：最大内容绘制，测量*加载*性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的**2.5 秒**内发生。
+- **[First Input Delay (FID)](/fid/)** ：首次输入延迟，测量*交互性*。为了提供良好的用户体验，页面的 FID 应为**100 毫秒**或更短。
+- **[Cumulative Layout Shift (CLS)](/cls/)** ：累积布局偏移，测量*视觉稳定性*。为了提供良好的用户体验，页面的 CLS 应保持在 **0.1.** 或更少。
+
+为了确保您能够在大部分用户的访问期间达成建议目标值，对于上述每项指标，一个良好的测量阈值为页面加载的**第 75 个百分位数**，且该阈值同时适用于移动和桌面设备。
+
+如果一个页面满足上述全部三项指标建议目标值的第 75 个百分位数，那么评估核心 Web 指标合规性的工具应评判该页面为通过。
+
+{% Aside %}要想详细了解这些建议值背后的研究和方法论，请参阅：[定义核心 Web 指标的指标阈值](/defining-core-web-vitals-thresholds/){% endAside %}
+
+### 测量和报告核心 Web 指标的工具
+
+Google 认为核心 Web 指标对一切网络体验都至关重要。因此，Google 致力于[在其所有热门工具中](/vitals-tools/)显示这些指标。以下部分详细介绍了支持核心 Web 指标的工具。
+
+#### 核心 Web 指标的实测工具
+
+[Chrome 用户体验报告](https://developer.chrome.com/docs/crux/)为每项核心 Web 指标收集匿名的真实用户测量数据。这些数据既能使网站所有者快速进行性能评估，而无需在页面上进行手动检测分析，也能同时为[PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/)和搜索控制台的[核心 Web 指标报告](https://support.google.com/webmasters/answer/9205520)等工具提供支持。
+
+<div class="table-wrapper">
+  <table>
+    <tr>
+      <td> </td>
+      <td>LCP</td>
+      <td>FID</td>
+      <td>CLS</td>
+    </tr>
+    <tr>
+      <td><a href="https://developer.chrome.com/docs/crux/">Chrome 用户体验报告</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights 网页速度测量工具</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+    <tr>
+      <td><a href="https://support.google.com/webmasters/answer/9205520">搜索控制台（核心 Web 指标报告）</a></td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+    </tr>
+  </table>
+</div>
+
+{% Aside %}关于这些工具的使用方法以及适合您用例的工具选择指南，请参阅：[测量 Web 指标入门指南](/vitals-measurement-getting-started/) {% endAside %}
+
+Chrome 用户体验报告提供的数据带来了一种快速评估网站性能的方法，但这些数据没有提供详细的、对应每页浏览量的遥测数据，而这些通常是对回归进行准确诊断、监控，以及做出迅速反应的必要数据。因此，我们强烈建议网站搭建自己的真实用户监控。
+
+#### 在 JavaScript 中测量核心 Web 指标
+
+每项核心 Web 指标都可以通过使用标准网页 API 在 JavaScript 中进行测量。
+
+测量所有核心 Web 指标，最简单的方法是使用[web-vitals](https://github.com/GoogleChrome/web-vitals) JavaScript 库，这是一个围绕底层网页 API 的小型的、生产就绪的封装器，通过准确匹配每项指标在上方列出的所有 Google 工具中的报告方式来进行指标测量。
+
+通过使用[web-vitals](https://github.com/GoogleChrome/web-vitals)库，测量每项指标就像调用单个函数一样简单（有关完整[用法](https://github.com/GoogleChrome/web-vitals#usage)和[API](https://github.com/GoogleChrome/web-vitals#api)详情，请参阅文档）：
+
+```js
+import {onCLS, onFID, onLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+当您将网站配置为使用[web-vitals](https://github.com/GoogleChrome/web-vitals)库来测量您的核心 Web 指标数据并将其发送到分析端后，下一步是对数据进行汇总和报告，从而查看您的页面是否在至少 75% 的页面访问中都满足建议阈值。
+
+一些分析工具供应商已经内置了核心 Web 指标支持，但即使是那些没有内置支持的供应商也应该包含基本的自定义指标功能，让您能够使用他们的工具来测量核心 Web 指标。
+
+[Web 指标报告](https://github.com/GoogleChromeLabs/web-vitals-report)就是其中一个例子，它使网站所有者能够使用 Google 分析来测量他们的核心 Web 指标。了解使用其他分析工具测量核心 Web 指标的相关指南，请参阅[实测 Web 指标的最佳实践](/vitals-field-measurement-best-practices/)。
+
+您还可以使用[Web 指标 Chrome 扩展程序](https://github.com/GoogleChrome/web-vitals-extension)来报告每项核心 Web 指标，且无需编写任何代码。该扩展程序使用[web-vitals](https://github.com/GoogleChrome/web-vitals)库来测量每一项指标，并在用户浏览网页时呈现给用户。
+
+此扩展程序有助于您了解自己的网站、竞争对手的网站和整个网络的性能。
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals">web-vitals</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://github.com/GoogleChrome/web-vitals-extension">Web 指标扩展程序</a></td>
+        <td>✔</td>
+        <td>✔</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+此外，倾向于直接通过底层网页 API 来测量这些指标的开发者可以参考这些指标指南，从而了解执行详情：
+
+- [在 JavaScript 中测量 LCP](/lcp/#measure-lcp-in-javascript)
+- [在 JavaScript 中测量 FID](/fid/#measure-fid-in-javascript)
+- [在 JavaScript 中测量 CLS](/cls/#measure-cls-in-javascript)
+
+{% Aside %}关于如何使用热门分析服务（或您自己的内部分析工具）来测量这些指标的更多指导，请参阅：[实测 Web 指标的最佳实践](/vitals-field-measurement-best-practices/){% endAside %}
+
+#### 核心 Web 指标的实验室测量工具
+
+虽然所有的核心 Web 指标首先都是实测指标，但其中的许多指标也可以在实验室中进行测量。
+
+实验室测量是在开发过程中（功能发布给用户之前）测试功能性能的最佳方式，也是在性能回归发生之前及时捕获的最佳方式。
+
+以下工具可用于在实验室环境中测量核心 Web 指标：
+
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th> </th>
+        <th>LCP</th>
+        <th>FID</th>
+        <th>CLS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/devtools/">Chrome 开发者工具</a></td>
+        <td>✔</td>
+        <td>✘（使用<a href="/tbt/"> TBT </a>代替）</td>
+        <td>✔</td>
+      </tr>
+      <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/overview/">灯塔</a></td>
+        <td>✔</td>
+        <td>✘（使用<a href="/tbt/"> TBT </a>代替）</td>
+        <td>✔</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% Aside %}灯塔这类在没有用户的模拟环境中加载页面的工具无法测量 FID（没有用户输入）。但是，Total Blocking Time 总阻塞时间 (TBT) 指标不仅可以进行实验室测量，而且还是 FID 的出色代理。在实验室中改进 TBT 的性能优化应该能够改进实际的 FID（请参阅下方的性能建议）。 {% endAside %}
+
+虽然实验室测量对于提供出色的体验至关重要，但它不能替代实际测量。
+
+根据用户设备功能、网络状况、设备上可能正在运行的其他进程以及与页面交互方式的差别，网站性能也可能会有很大差异。事实上，每项核心 Web 指标的得分都会受到用户交互的影响。只有通过实际测量才能准确获取全貌。
+
+### 提高分数的建议
+
+当您测量了核心 Web 指标并确定了需要改进的领域后，下一步就是优化。以下指南提供了如何针对每项核心 Web 指标优化页面的具体建议：
+
+- [优化 LCP](/optimize-lcp/)
+- [优化 FID](/optimize-fid/)
+- [优化 CLS](/optimize-cls/)
+
+## 其他 Web 指标
+
+虽然核心 Web 指标是理解并提供出色用户体验的关键指标，但还有其他的一些重要指标。
+
+其他 Web 指标通常用作核心 Web 指标的代理或补充指标，有助于获取范围更广的体验或帮助诊断特定的问题。
+
+例如，[Time to First Byte 首字节时间 (TTFB)](/ttfb/)和[First Contentful Paint 首次内容绘制 (FCP)](/fcp/)指标都是*加载*体验的重要方面，并且在诊断 LCP 问题方面（分别为[服务器响应时间](/overloaded-server/)过长或[阻塞渲染资源](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)）都十分有用。
+
+同样，[总阻塞时间 (TBT)](/tbt/)和[Time to Interactive 可交互时间 (TTI)](/tti/)等指标是实验室指标，对于捕获和诊断会对 FID 产生影响的潜在*交互性*问题至关重要。然而，这些指标不是核心 Web 指标的一部分，因为它们无法进行实际测量，也不反映以[用户为中心](/user-centric-performance-metrics/#how-metrics-are-measured)的结果。
+
+## 不断发展的 Web 指标
+
+Web 指标和核心 Web 指标代表了当今开发者用来测量网络体验质量的最佳可用信号，但这些信号并不完美，并且会在未来不断进行改进或补充。
+
+**核心 Web 指标**与所有网页都息息相关，并且已经显示在相关的 Google 工具中。这些指标的变化将产生广泛的影响，因此，开发者应当认为核心 Web 指标的定义和阈值是稳定的，并且会以可预测的、每年一次的更新节奏提前发布更新通知。
+
+其他 Web 指标通常适用于特定情景或工具，并且可能比核心 Web 指标更具实验性。因此，这些指标的定义和阈值可能会有更频繁的更改。
+
+针对所有 Web 指标的更改都将清楚地记录在这份公开的[更新日志](http://bit.ly/chrome-speed-metrics-changelog)中。
diff --git a/src/site/content/zh/zh.11tydata.js b/src/site/content/zh/zh.11tydata.js
new file mode 100644
index 00000000000..888b758a7af
--- /dev/null
+++ b/src/site/content/zh/zh.11tydata.js
@@ -0,0 +1,31 @@
+const livePaths = require('../../_filters/live-paths');
+const allPaths = require('../../_data/paths');
+const lang = require('./lang');
+
+// =============================================================================
+// HOME OVERVIEW
+//
+// This is the context object for the homepage.
+// It helps layout cards featured on the homepage, and their ordering.
+//
+// =============================================================================
+
+module.exports = function () {
+  const paths = [
+    allPaths['learn-core-web-vitals'],
+    allPaths['progressive-web-apps'],
+    allPaths['accessible'],
+    allPaths['fast'],
+    allPaths['reliable'],
+    allPaths['secure'],
+    allPaths['identity'],
+  ].filter(livePaths);
+
+  return {
+    lang: lang.lang,
+    locale: lang.locale,
+    home: {
+      paths,
+    },
+  };
+};
diff --git a/src/styles/.gitignore b/src/styles/.gitignore
deleted file mode 100644
index 91dfed8d4a8..00000000000
--- a/src/styles/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-.DS_Store
-node_modules
\ No newline at end of file
diff --git a/src/styles/README.md b/src/styles/README.md
deleted file mode 100644
index d856650245f..00000000000
--- a/src/styles/README.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Styles
-
-## Structure
-
-The styles for this project attempt to (loosely) follow an ITCSS model.
-Learn more @ [https://speakerdeck.com/dafed/managing-css-projects-with-itcss](https://speakerdeck.com/dafed/managing-css-projects-with-itcss)
-
-- settings: Global variables
-- tools: Mixins and functions
-- generic: Ground-zero styles and unclassed HTML elements (type selectors)
-- components: Chunks of UI
-- pages: Page-specific styles (use sparingly if at all)
-- overrides: Utility classes for things like text alignment, box shadows, etc.
-- devsite: DevSite specific styles we use to replicate their live environment.
-  There's a file called _veto.scss which we use to nullify some of their styles.
-
-## Rules
-
-- Use [hyphenated BEM style](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
-- Prefix classes with `w-` which stands for 'web'. This helps us namespace our
-  CSS so we don't conflict with DevSite.
-- Only nest 2 levels deep.
-- Add a comment, `// DevSite override`, to any CSS that's used to override a
-  DevSite style. Add the comment on the same line as the style.
-
-  ```scss
-  color: pink; // DevSite override
-  ```
-
-## Linting
-
-We use [sass-lint](https://github.com/sasstools/sass-lint) to match Google's
-internal SCSS style guide.
-
-If you need to disable a rule you'll need to do it for both sass-lint and
-scss-lint which Google uses internally. We don't use scss-lint because it's
-[deprecated](https://github.com/brigade/scss-lint#notice-consider-other-tools-before-adopting-scss-lint).
-
-```scss
-// sass-lint:disable-all
-// scss-lint:disable all
-gap: 16px;
-grid-gap: 16px;
-// scss-lint:enable all
-// sass-lint:enable-all
-```
-
-Some rules, like `indentation` are stricter in sass-lint then they are in
-scss-lint. It's ok to disable overly strict sass-lint rules if scss-lint isn't
-complaining. This is especially useful for formatting box-shadow properties.
-
-- [sass-lint rules quick reference](https://github.com/sasstools/sass-lint/tree/master/docs/rules).
-
-## Tips
-
-- To preview your SASS you can use [Sassmeister](https://www.sassmeister.com/) 👍
\ No newline at end of file
diff --git a/src/styles/all.scss b/src/styles/all.scss
deleted file mode 100644
index 2af4c8167e1..00000000000
--- a/src/styles/all.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'generic/all';
-@import 'components/all';
-@import 'pages/all';
-@import 'overrides/all';
-@import 'tools/helpers';
diff --git a/src/styles/components/_actions.scss b/src/styles/components/_actions.scss
deleted file mode 100644
index a4e9fee67e5..00000000000
--- a/src/styles/components/_actions.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// FAB OVERVIEW
-//
-// A material floating action button ('FAB').
-//
-// =============================================================================
-
-$W_FAB_LARGE_RADIUS: 28px;
-
-.w-actions {
-  align-items: flex-end;
-  bottom: 24px;
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  right: 24px;
-  z-index: 100;
-}
-
-.w-actions > * {
-  margin-top: 20px;
-}
-
-.w-actions__fab {
-  align-items: center;
-  background-color: $WEB_PRIMARY_COLOR;
-  border: 0;
-  border-radius: $GLOBAL_ROUNDED;
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 2px 4px -1px rgba($BLACK, .2),
-    0 4px 5px 0 rgba($BLACK, .14),
-    0 1px 10px 0 rgba($BLACK, .12);
-  color: $WHITE;
-  cursor: $CURSOR_POINTER_VALUE;
-  display: inline-flex;
-  font-family: $PRIMARY_FONT;
-  font-size: .875em;
-  font-weight: 600;
-  height: 56px;
-  letter-spacing: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-  text-indent: -9999px;
-  text-overflow: initial;
-  text-transform: uppercase;
-  // For some reason this is causing an initial flicker...
-  // transition: width $TRANSITION_SPEED, border-radius $TRANSITION_SPEED;
-  width: 56px;
-
-  @include bp(lg) {
-    border-radius: $W_FAB_LARGE_RADIUS;
-    padding: 0 24px 0 52px;
-    text-indent: 0;
-    width: auto;
-  }
-}
-
-.w-actions__fab:hover {
-  background-color: $WEB_PRIMARY_COLOR; // DevSite override
-}
-
-.w-actions__fab:active {
-  background-color: $WEB_PRIMARY_COLOR; // DevSite override
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 5px 5px -3px rgba($BLACK, .2),
-    0 8px 10px 1px rgba($BLACK, .14),
-    0 3px 14px 2px rgba($BLACK, .12);
-}
-
-.w-actions__fab:hover,
-.w-actions__fab:focus,
-.w-actions__fab:active {
-  outline: 0;
-  text-decoration: none;
-}
-
-.w-actions__fab::before {
-  background-size: 24px 24px;
-  content: '';
-  height: 24px;
-  left: 16px;
-  position: absolute;
-  top: 16px;
-  width: 24px;
-}
-
-.w-actions__fab::after {
-  @include w-overlay();
-}
-
-.w-actions__fab:hover::after {
-  background-color: rgba($WHITE, .08);
-}
-
-.w-actions__fab:focus::after {
-  background-color: rgba($WHITE, .24);
-}
-
-.w-actions__fab:active::after {
-  background-color: rgba($WHITE, .32);
-}
-
-// FAB variations
-
-//------------------------------------------------------------------------------
-// Share
-//------------------------------------------------------------------------------
-
-.w-actions__fab--share::before {
-  background-image: url('../images/icons/share_white.svg');
-}
-
-//------------------------------------------------------------------------------
-// Subscribe
-//------------------------------------------------------------------------------
-
-.w-actions__fab--subscribe {
-  background-color: $WHITE;
-  color: $WEB_PRIMARY_COLOR;
-}
-
-.w-actions__fab--subscribe:hover {
-  background-color: $WHITE; // DevSite override
-}
-
-.w-actions__fab--subscribe:active {
-  background-color: $WHITE; // DevSite override
-}
-
-.w-actions__fab--subscribe::before {
-  background-image: url('../images/icons/subscribe.svg');
-}
-
-.w-actions__fab--subscribe:hover::after {
-  background-color: rgba($WEB_PRIMARY_COLOR, .04);
-}
-
-.w-actions__fab--subscribe:focus::after {
-  background-color: rgba($WEB_PRIMARY_COLOR, .12);
-}
-
-.w-actions__fab--subscribe:active::after {
-  background-color: rgba($WEB_PRIMARY_COLOR, .16);
-}
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
deleted file mode 100644
index 33c26f2e71d..00000000000
--- a/src/styles/components/_all.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import 'grid';
-
-@import 'actions';
-@import 'article-header';
-@import 'article-navigation';
-@import 'asides';
-@import 'author';
-@import 'banner';
-@import 'breadcrumbs';
-@import 'buttons';
-@import 'card';
-@import 'card-base';
-@import 'card-author';
-@import 'chips';
-@import 'callouts';
-@import 'checkbox';
-@import 'columns';
-@import 'compare';
-@import 'cross-links';
-@import 'details';
-@import 'footer';
-@import 'header';
-@import 'icon-list';
-@import 'images';
-@import 'layouts';
-@import 'label';
-@import 'livestream-container';
-@import 'mastheads';
-@import 'numbered-header';
-@import 'page-header';
-@import 'path-card';
-@import 'progress';
-@import 'self-assessment-hint';
-@import 'stack';
-@import 'stats';
-@import 'subscribe';
-@import 'topic';
-@import 'type';
-@import 'tooltips';
-@import 'youtube';
diff --git a/src/styles/components/_article-header.scss b/src/styles/components/_article-header.scss
deleted file mode 100644
index fc620519d0d..00000000000
--- a/src/styles/components/_article-header.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import '../settings/type';
-@import '../tools/breakpoints';
-
-// =============================================================================
-// ARTICLE HEADER OVERVIEW
-//
-// An article-header is the bit of introductory text at the top of each blog
-// post and guide. It contains a headline, short description sentence, and
-// an author component.
-//
-// =============================================================================
-
-.w-article-header {
-  margin: 0 0 48px;
-  padding-top: 40px;
-
-  @include bp(md) {
-    margin: 0 0 64px;
-    padding-top: 56px;
-  }
-}
-
-.w-article-header__headline {
-  font-size: 27px;
-  font-weight: 400;
-  line-height: 33px;
-  margin: 0 auto 11px;
-
-  @include bp(xxsm) {
-    font-size: 31px;
-    line-height: 38px;
-  }
-
-  @include bp(xsm) {
-    font-size: 36px;
-    line-height: 44px;
-  }
-
-  @include bp(md) {
-    font-size: 44px;
-    line-height: 52px;
-  }
-}
-
-.w-article-header__subhead {
-  font-family: $HEADLINE_FONT;
-  font-size: 16px;
-  line-height: 28px;
-  margin: 12px auto;
-
-  @include bp(xxsm) {
-    font-size: 18px;
-    line-height: 32px;
-    margin: 16px auto;
-  }
-}
diff --git a/src/styles/components/_article-navigation.scss b/src/styles/components/_article-navigation.scss
deleted file mode 100644
index a9a94dfa3bb..00000000000
--- a/src/styles/components/_article-navigation.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// ARTICLE NAVIGATION OVERVIEW
-//
-// These are fullbleed buttons that appear at the end of each article and take
-// the user either to the next article or back to all of the articles.
-//
-// =============================================================================
-
-.w-article-navigation {
-  background-color: #dadce0;
-  display: flex;
-  flex-direction: column;
-  padding: 1px 0;
-
-  @include bp(sm) {
-    flex-direction: row;
-  }
-}
-
-.w-article-navigation__link {
-  align-items: center;
-  background-color: #fff;
-  color: $PRIMARY_TEXT_COLOR;
-  display: flex;
-  font-family: $HEADLINE_FONT;
-  position: relative;
-}
-
-.w-article-navigation__link:hover,
-.w-article-navigation__link:focus,
-.w-article-navigation__link:active {
-  background-color: #fff;
-  outline: 0;
-  text-decoration: none;
-}
-
-.w-article-navigation__link::before {
-  @include font-material-icon();
-}
-
-.w-article-navigation__link::after {
-  @include w-overlay();
-}
-
-.w-article-navigation__link:hover::after {
-  @include w-overlay-hover();
-}
-
-.w-article-navigation__link:focus::after {
-  @include w-overlay-focus();
-}
-
-.w-article-navigation__link:active::after {
-  @include w-overlay-active();
-}
-
-.w-article-navigation__link--back {
-  flex-basis: 33.3%;
-  margin: 0 0 1px;
-  padding: 32px 32px 32px 80px;
-
-  @include bp(sm) {
-    margin: 0 1px 0 0;
-  }
-}
-
-.w-article-navigation__link--back::before {
-  content: 'arrow_back';
-  left: 32px;
-  position: absolute;
-}
-
-// When we only have a single back link, override its styles to make it
-// full width.
-.w-article-navigation__link--single {
-  flex: 1;
-  margin: 0;
-
-  @include bp(sm) {
-    margin: 0;
-  }
-}
-
-.w-article-navigation__link--forward {
-  flex: 1;
-  font-size: 24px;
-  justify-content: flex-end;
-  padding: 32px 80px 32px 32px;
-}
-
-.w-article-navigation__link--forward::before {
-  content: 'arrow_forward';
-  position: absolute;
-  right: 32px;
-}
-
-.w-article-navigation__column {
-  text-align: right;
-}
-
-.w-article-navigation__heading {
-  margin: 0 0 4px;
-}
-
-.w-article-navigation code {
-  background: transparent;
-  border: 0;
-  color: inherit;
-  padding: 0;
-}
diff --git a/src/styles/components/_asides.scss b/src/styles/components/_asides.scss
deleted file mode 100644
index ff11b261e85..00000000000
--- a/src/styles/components/_asides.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/mixins';
-
-// =============================================================================
-// ASIDES OVERVIEW
-//
-// An aside highlights a specific section of the page to call it out for user's
-// attention. It is typically used to add notes or warnings to an article.
-//
-// Note: We do not use <aside> elements here because DevSite has a number of
-// styles applied directly to that element and it's easier to just avoid
-// overriding them.
-//
-// =============================================================================
-
-.w-aside {
-  font-family: $ASIDE_FONT;
-  font-size: #{map-get($ARTICLE, FONT_SIZE)}px;
-  line-height: #{map-get($ARTICLE, LINE_HEIGHT)}px;
-  margin: 48px 0 32px;
-  padding: 24px 0 0 48px;
-  position: relative;
-
-  @include bp(xxsm) {
-    font-size: #{map-get($ARTICLE_XXSMALL, FONT_SIZE)}px;
-    line-height: #{map-get($ARTICLE_XXSMALL, LINE_HEIGHT)}px;
-  }
-
-  @include bp(xsm) {
-    font-size: #{map-get($ARTICLE_XSMALL, FONT_SIZE)}px;
-    line-height: #{map-get($ARTICLE_XSMALL, LINE_HEIGHT)}px;
-  }
-}
-
-.w-aside strong {
-  font-weight: $FONT_WEIGHT_BOLD;
-}
-
-.w-aside::after {
-  content: '';
-  height: 2px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.w-aside::before {
-  @include font-material-icon();
-  float: left;
-  margin: 4px 0 0 -48px;
-}
-
-.w-aside--note {
-  color: $WEB_PRIMARY_COLOR;
-}
-
-.w-aside--note::after {
-  background-color: $WEB_PRIMARY_COLOR;
-}
-
-.w-aside--note::before {
-  content: 'star';
-}
-
-.w-aside--caution {
-  color: $CAUTION_COLOR;
-}
-
-.w-aside--caution::after {
-  background-color: $CAUTION_COLOR;
-}
-
-.w-aside--caution::before {
-  content: 'error';
-}
-
-.w-aside--warning {
-  color: $WARNING_COLOR;
-}
-
-.w-aside--warning::after {
-  background-color: $WARNING_COLOR;
-}
-
-.w-aside--warning::before {
-  content: 'warning';
-}
-
-.w-aside--success,
-.w-aside--objective {
-  color: $SUCCESS_COLOR;
-}
-
-.w-aside--success::after,
-.w-aside--objective::after {
-  background-color: $SUCCESS_COLOR;
-}
-
-.w-aside--success::before {
-  content: 'done';
-}
-
-.w-aside--objective::before {
-  content: 'school';
-}
-
-.w-aside--gotchas,
-.w-aside--key-term {
-  color: $KEY_POINT_COLOR;
-}
-
-.w-aside--gotchas::after,
-.w-aside--key-term::after {
-  background-color: $KEY_POINT_COLOR;
-}
-
-.w-aside--gotchas::before {
-  content: 'lightbulb_outline';
-}
-
-.w-aside--key-term::before {
-  content: 'font_download';
-}
-
-.w-aside--codelab {
-  color: $WEB_EXTENDED_SECONDARY_COLOR;
-}
-
-.w-aside--codelab::after {
-  background-color: $WEB_EXTENDED_SECONDARY_COLOR;
-}
-
-.w-aside--codelab::before {
-  content: 'code';
-}
-
-// We use descendant selectors here (instead of BEM) because the content inside
-// of an aside will likely be coming from markdown.
-.w-aside a,
-.w-aside p,
-.w-aside code {
-  color: inherit;
-}
-
-// Allow single line code blocks to wrap so they don't get cut off.
-.w-aside code {
-  white-space: pre-wrap;
-}
-
-// Force markdown generated code blocks to match font size.
-.w-aside pre,
-.w-aside pre code {
-  font-size: .889em;
-  line-height: 1.5;
-  white-space: pre;
-}
-
-.w-aside a {
-  text-decoration: underline;
-}
-
-.w-aside p {
-  font-family: inherit;
-  font-size: inherit;
-  letter-spacing: normal;
-  line-height: inherit;
-  margin: 0;
-}
-
-.w-aside p + p {
-  margin-top: 8px;
-}
-
-.w-aside ul li {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-// Gotchas should visually start with essentially a newline separating the word
-// "Gotchas!" from the first paragraph of text.
-.w-aside--gotchas p {
-  margin-top: 8px;
-}
diff --git a/src/styles/components/_author.scss b/src/styles/components/_author.scss
deleted file mode 100644
index 3ecf6a03b24..00000000000
--- a/src/styles/components/_author.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-@import '../settings/colors';
-@import '../tools/mixins';
-
-// =============================================================================
-// AUTHOR OVERVIEW
-//
-// An author shows a thumbnail of the author's profile photo, a bit of info
-// about the author (name, social media, etc).
-//
-// =============================================================================
-
-$AUTHOR_IMAGE_SIZE_SMALL: 40px;
-
-.w-authors {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 32px; // sass-lint:disable-line no-misspelled-properties
-}
-
-.w-author {
-  display: flex;
-  padding: 8px;
-}
-
-.w-author__image {
-  background-color: $GREY_300;
-  border-radius: $GLOBAL_ROUNDED;
-  border: 2px solid white;
-  flex-shrink: 0;
-  height: 64px;
-  margin: 0 12px 0 0;
-  min-width: 64px; // prevent from being shrunk
-  object-fit: cover;
-  overflow: hidden;
-  width: 64px;
-}
-
-.w-author__image--small {
-  height: $AUTHOR_IMAGE_SIZE_SMALL;
-  min-width: $AUTHOR_IMAGE_SIZE_SMALL; // prevent from being shrunk
-  width: $AUTHOR_IMAGE_SIZE_SMALL;
-}
-
-.w-author__name,
-.w-author__published {
-  display: block;
-  font-size: 14px;
-  font-style: normal;
-  line-height: 20px;
-}
-
-.w-author__name {
-  color: $GREY_900;
-}
-
-.w-author__name-link {
-  color: inherit;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-}
-
-// Specificity required here because `a` tags in `.w-post-content` have higher priority.
-.w-post-content .w-author__name-link {
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-.w-author__published {
-  color: $GREY_700;
-}
-
-.w-author__separator {
-  padding: 0 4px;
-}
-
-.w-author__link-list {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  overflow: hidden;
-}
-
-.w-author__link-listitem {
-  float: left;
-  font-size: 14px;
-  line-height: 20px;
-  margin: 0;
-}
-
-.w-author__link-listitem::after {
-  content: '·';
-  display: inline-block;
-  margin: 0 4px;
-}
-
-.w-author__link-listitem:last-of-type::after {
-  content: '';
-  margin: 0;
-}
-
-.w-author__link:focus {
-  box-shadow: inset 0px 0px 0px 1px $FOCUS_COLOR;
-  outline: none;
-}
-
-
-.w-authors__card {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 12px;
-}
-
-.w-authors__card--holder {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-}
-
-.w-author__image--row {
-  display: inline-flex;
-  flex-direction: row-reverse;
-  margin: 0px calc(#{$AUTHOR_IMAGE_SIZE_SMALL} / 4) 0px calc(#{$AUTHOR_IMAGE_SIZE_SMALL} / 2);
-}
-
-.w-author__image--row-item {
-  height: $AUTHOR_IMAGE_SIZE_SMALL;
-  margin-left: calc(-#{$AUTHOR_IMAGE_SIZE_SMALL} / 2);
-  position: relative;
-  width: $AUTHOR_IMAGE_SIZE_SMALL;
-
-  a {
-    display: block;
-  }
-
-  > .w-author__image {
-    border: solid white 2px;
-  }
-}
-
-.w-author__image--row-item + .w-author__image--row-item {
-  margin-right: 10px;
-}
diff --git a/src/styles/components/_banner.scss b/src/styles/components/_banner.scss
deleted file mode 100644
index acd8ce30adf..00000000000
--- a/src/styles/components/_banner.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-// =============================================================================
-// BANNER OVERVIEW
-//
-// A banner widget that can be displayed at the top of the screen.
-// Note that the banner is not absolutely or fixed positioned.
-// It is intended to scroll away as the user scrolls down the page.
-//
-// The banner can also be displayed inline with body content using the
-// w-banner--body modifier.
-//
-// =============================================================================
-
-.w-banner {
-  // Hide the top banner on small devices as it takes up too much space.
-  // We also hide hero images at this size for the same reason.
-  display: none;
-  font-size: .889rem;
-
-  @include bp(sm) {
-    display: block;
-    padding: 24px 32px;
-  }
-
-  @include bp(md) {
-    padding: 24px 64px;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-.w-banner--info {
-  background: $GREEN_100;
-}
-
-.w-banner--caution {
-  background: $YELLOW_100;
-}
-
-.w-banner--warning {
-  background: $RED_100;
-}
-
-.w-banner--neutral {
-  background: transparent;
-  border-color: $GREY_300;
-  border-style: solid;
-  border-width: 1px 0;
-}
-
-// This modifier is for banners that are inline with page content.
-.w-banner--body {
-  display: block;
-  font: inherit;
-  padding: 24px;
-}
diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss
deleted file mode 100644
index 614083c7b87..00000000000
--- a/src/styles/components/_breadcrumbs.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// =============================================================================
-// BREADCRUMBS OVERVIEW
-//
-// Breadcrumbs are a series of links that walk the user back to the homage page
-// from whichever page they're currently on.
-// On small screens the breadcrumbs should ellipsis.
-//
-// =============================================================================
-
-@import '../settings/colors';
-@import '../tools/mixins';
-
-.w-breadcrumbs {
-  display: flex;
-  margin: 0;
-  // Note: All of these min-widths on the children are used to make the element
-  // properly text-overflow: ellipsis.
-  // https://css-tricks.com/flexbox-truncated-text/
-  min-width: 0;
-  padding: 0;
-  align-items: center;
-}
-
-.w-breadcrumbs__crumb {
-  align-items: center;
-  display: flex;
-  font-size: .875rem;
-  min-width: 0;
-}
-
-.w-breadcrumbs__icon {
-  width: 1.1rem;
-  height: 1.1rem;
-  fill: $GREY_700;
-}
-
-// These two styles combine to give the effect where only the last
-// breadcrumb shows ellipsis on smaller screens.
-.w-breadcrumbs__crumb:not(:last-of-type) {
-  flex-shrink: 0;
-}
-
-.w-breadcrumbs__crumb:last-of-type > a {
-  @include ellipsis();
-}
-
-.w-breadcrumbs__link {
-  color: $GREY_700;
-  padding: 0 8px;
-}
-
-// Keep the nice padding around the element so we get a good focus outline
-// but shift it over to the left so it's justified with other text on the page.
-.w-breadcrumbs__link--left-justify {
-  margin-left: -8px;
-}
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
deleted file mode 100644
index 6110e7c002a..00000000000
--- a/src/styles/components/_buttons.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-@import '../tools/mixins';
-
-// =============================================================================
-// BUTTONS OVERVIEW
-//
-// Material button styles.
-//
-// =============================================================================
-
-// The basic button is a plain text button.
-// Normally we wouldn't need to duplicate the pseudo classes
-// but since we're using all: initial, we need to make things
-// initially consistent.
-.w-button {
-  @include base-button();
-  overflow: hidden;
-  position: relative;
-  transition: background-color $TRANSITION_SPEED, box-shadow $TRANSITION_SPEED;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-// Firefox...why are you like this...
-.w-button::-moz-focus-inner {
-  border: 0;
-}
-
-@mixin button-hover() {
-  background: $WHITE; // DevSite override
-  box-shadow:
-  0 2px 4px -1px rgba($BLACK, .2),
-  0 4px 5px 0 rgba($BLACK, .14),
-  0 1px 10px 0 rgba($BLACK, .12);
-  outline: none;
-  text-decoration: none;
-}
-
-// Prevent hover and focus states from lingering on touch.
-@include hover() {
-  .w-button:hover,
-  .w-button:focus {
-    @include button-hover();
-  }
-}
-
-.w-button:active {
-  @include button-hover();
-}
-
-.w-button:focus {
-  outline: 1px solid rgba($WEB_PRIMARY_COLOR, .8);
-  outline-offset: -3px;
-}
-
-.js-focus-visible .w-button:focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  outline: none;
-}
-
-.w-button[disabled] {
-  background: $GREY_300;
-  box-shadow: none;
-  color: rgba($BLACK, .26);
-  cursor: default;
-  pointer-events: none;
-}
-
-// This element is used to tint the button during user actions such as
-// hover, focus, and active.
-.w-button::after {
-  @include w-overlay();
-}
-
-// Prevent hover and focus states from lingering on touch.
-@include hover() {
-  .w-button:hover::after {
-    background-color: rgba($WEB_PRIMARY_COLOR, .04);
-  }
-
-  .w-button:focus::after {
-    background-color: rgba($WEB_PRIMARY_COLOR, .12);
-  }
-}
-
-.w-button:active::after {
-  background-color: rgba($WEB_PRIMARY_COLOR, .16);
-}
-
-// Primary action button.
-.w-button--primary,
-.w-button--primary:hover,
-.w-button--primary:focus,
-.w-button--primary:active {
-  background-color: $WEB_PRIMARY_COLOR;
-  color: $WHITE;
-}
-
-// Prevent hover and focus states from lingering on touch.
-@include hover() {
-  .w-button--primary:hover::after {
-    background-color: rgba($WHITE, .08);
-  }
-
-  .w-button--primary:focus::after {
-    background-color: rgba($WHITE, .24);
-  }
-}
-
-.w-button--primary:active::after {
-  background-color: rgba($WHITE, .32);
-}
-
-.w-button--primary:focus {
-  outline: 1px solid rgba($WHITE, .8);
-}
-
-// Secondary action button.
-.w-button--secondary,
-.w-button--secondary:hover,
-.w-button--secondary:focus,
-.w-button--secondary:active {
-  background-color: $WHITE;
-  border: 1px solid $GREY_300;
-  color: $PRIMARY_TEXT_COLOR;
-}
-
-// Prevent hover and focus states from lingering on touch.
-@include hover() {
-  .w-button--secondary:hover::after {
-    background-color: rgba($BLACK, .04);
-  }
-
-  .w-button--secondary:focus::after {
-    background-color: rgba($BLACK, .08);
-  }
-}
-
-.w-button--secondary:active::after {
-  background-color: rgba($BLACK, .1);
-}
-
-.w-button--secondary:focus {
-  outline: 1px solid rgba($PRIMARY_TEXT_COLOR, .6);
-}
-
-// A button with text and an icon.
-.w-button--with-icon {
-  padding: 0 24px 0 16px;
-}
-
-// A button with only an icon.
-.w-button--icon {
-  @include base-button();
-  color: $GREY_700;
-  height: 3rem;
-  overflow: unset;
-  padding: 0;
-  transition: background $TRANSITION_SPEED ease, color $TRANSITION_SPEED ease;
-  width: 3rem;
-}
-
-@include hover() {
-  .w-button--icon:hover,
-  .w-button--icon:focus {
-    background: $GREY_100;
-    color: $GREY_900;
-  }
-}
-
-.w-button--icon:active {
-  background: $GREY_200;
-}
-
-// This replaces the default focus outline so the outline matches the shape of the button.
-.w-button--icon:focus {
-  box-shadow: 0 0 0 1px $FOCUS_COLOR;
-  outline: none;
-}
-
-.js-focus-visible .w-button--icon:focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  box-shadow: none;
-}
-
-// A round button.
-.w-button--round {
-  border-radius: $GLOBAL_ROUNDED;
-}
-
-// Add Material icons to icon buttons
-.w-button--with-icon::before,
-.w-button--icon::before {
-  @include font-material-icon();
-  content: attr(data-icon);
-  display: inline-block;
-  height: 24px;
-  margin-right: 16px;
-  // To prevent screen readers from reading icon names.
-  speak: none;
-  width: 24px;
-}
-
-.w-button--icon::before {
-  margin: 0;
-}
-
-.w-button--small {
-  padding: 0 8px;
-  height: 32px;
-  text-transform: initial;
-  letter-spacing: initial;
-}
diff --git a/src/styles/components/_callouts.scss b/src/styles/components/_callouts.scss
deleted file mode 100644
index dd0f78e595b..00000000000
--- a/src/styles/components/_callouts.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@import '../tools/mixins';
-
-.w-callout {
-  margin: 2.25em 0;
-
-  @include bp(sm) {
-    // sass-lint:disable-block indentation
-    border-radius: $GLOBAL_RADIUS_MEDIUM;
-    box-shadow:
-    0 2px 4px -1px rgba(0, 0, 0, .2),
-    0 4px 5px 0 rgba(0, 0, 0, .14),
-    0 1px 10px 0 rgba(0, 0, 0, .12);
-    grid-template-columns: 1fr 1fr;
-    padding: 1.5rem;
-  }
-}
-
-.w-callout--2col {
-  @include bp(sm) {
-    display: grid;
-    font-size: .889em;
-    // sass-lint:disable-all
-    // scss-lint:disable all
-    gap: 1rem;
-    // sass-lint:enable-all
-    // scss-lint:enable all
-  }
-}
-
-.w-callout__header {
-  padding-bottom: 1rem;
-}
-
-.w-callout__lockup {
-  @include w-headline--three();
-  display: inline-flex;
-  // Ugh. Bad idea including margins in the heading styles.
-  // They get reset at every breakpoint.
-  margin: 0 0 .75rem !important;
-}
-
-.w-callout__lockup--codelab {
-  color: $WEB_EXTENDED_SECONDARY_COLOR;
-}
-
-.w-callout__lockup::before {
-  @include font-material-icon();
-  display: inline-block;
-  font-size: 20px;
-  margin: 0 8px 0 0;
-}
-
-.w-callout__lockup--codelab::before {
-  content: 'code';
-}
-
-.w-callout__headline {
-  @include w-headline--two-small;
-  margin: 0 0 .25rem !important;
-}
-
-.w-callout__blurb {
-  margin: 0;
-}
-
-.w-callout__list {
-  align-items: flex-end;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.w-callout__listitem {
-  width: 100%;
-}
-
-.w-callout__listitem:not(:last-of-type) {
-  border-bottom: 1px solid $BORDER_COLOR;
-}
-
-.w-callout__link {
-  align-items: center;
-  box-sizing: content-box;
-  display: flex;
-  min-height: 2.5rem;
-  padding: .5rem 26px .5rem 0;
-  position: relative;
-}
-
-.w-callout__link--codelab {
-  color: $WEB_EXTENDED_SECONDARY_COLOR;
-}
-
-.w-callout__link::after {
-  @include font-material-icon();
-  content: 'chevron_right';
-  font-size: 20px;
-  margin-top: -10px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-}
diff --git a/src/styles/components/_card-author.scss b/src/styles/components/_card-author.scss
deleted file mode 100644
index ba2da4664fd..00000000000
--- a/src/styles/components/_card-author.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '../settings/colors';
-@import '../tools/mixins';
-
-.w-card-author {
-  min-height: 350px;
-  text-align: center;
-}
-
-.w-card-author__figure {
-  background-color: $WHITE;
-}
-
-.w-card-author__image {
-  border-radius: 50%;
-  height: 192px;
-  width: 192px;
-}
-
-.w-card-author__desc::before {
-  background-color: inherit;
-}
diff --git a/src/styles/components/_card-base.scss b/src/styles/components/_card-base.scss
deleted file mode 100644
index 7d482ae5a63..00000000000
--- a/src/styles/components/_card-base.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-@import '../settings/type';
-@import '../tools/mixins';
-
-// =============================================================================
-// CARD BASE OVERVIEW
-//
-// A base card is a preview for posts, authors, and more. It lives inside of a
-// card and can be displayed in a grid on the blog landing page, or at the end
-// of a post to point users at related content.
-//
-// =============================================================================
-
-.w-card-base {
-  @include w-body-text();
-  height: 100%;
-  padding: 24px;
-  position: relative;
-
-  @include bp(sm) {
-    padding: 32px;
-  }
-}
-
-.w-card-base__cover {
-  display: block;
-  margin: 32px 0 12px;
-}
-
-.w-card-base__cover--with-image {
-  margin: 32px 0 12px;
-
-  @include bp(md) {
-    margin-top: -1px;
-  }
-}
-
-.w-card-base__figure {
-  align-items: center;
-  background-color: $GREY_100;
-  display: flex;
-  justify-content: center;
-  margin: 0 0 16px;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-}
-
-.w-card-base__image {
-  height: 240px;
-  max-width: 100%;
-  min-width: 100%;
-  object-fit: cover;
-}
-
-.w-card-base__headline {
-  @include w-headline--two();
-}
-
-.w-card-base__headline--with-image {
-  @include w-headline--two-small();
-}
-
-.w-card-base__headline,
-.w-card-base__headline--with-image {
-  margin-bottom: 8px;
-  margin-top: 0;
-}
-
-.w-card-base__desc {
-  display: block;
-}
-
-.w-card-base__desc::before {
-  background-color: $WEB_PRIMARY_COLOR;
-  content: '';
-  display: block;
-  height: 2px;
-  position: absolute;
-  top: 24px;
-  width: 64px;
-  z-index: -1;
-
-  @include bp(sm) {
-    top: 32px;
-  }
-}
-
-.w-card-base__info-list {
-  height: 36px;
-  list-style: none;
-  margin: 0;
-  overflow: hidden;
-  padding: 12px 0 0;
-  position: absolute;
-  top: 24px;
-
-  @include bp(sm) {
-    top: 32px;
-  }
-
-  @include bp(md) {
-    position: static;
-  }
-}
-
-.w-card-base__info-listitem {
-  color: $GREY_700;
-  display: block;
-  float: left;
-  font-family: 'Google Sans', san-sans-serif;
-  font-size: 12px;
-
-  @include bp(xsm) {
-    font-size: 14px;
-  }
-}
-
-.w-card-base__info-listitem::after {
-  content: '·';
-  display: inline-block;
-  margin: 0 8px;
-}
-
-.w-card-base__info-listitem--category {
-  color: $WEB_PRIMARY_COLOR;
-  font-weight: 500;
-}
-
-.w-card-base__info-listitem:last-of-type::after {
-  content: '';
-  margin: 0;
-}
-
-.w-card-base__info-listitem--published::after {
-  content: '';
-
-  @include bp(sm) {
-    content: '·';
-  }
-}
-
-.w-card-base__info-listitem--updated {
-  display: none;
-
-  @include bp(sm) {
-    display: inline-block;
-  }
-}
-
-.w-card-base__link:focus {
-  outline: none;
-}
-
-.w-card-base__link:hover {
-  text-decoration: none;
-}
-
-.w-card-base__subhead {
-  color: $GREY_700;
-  font: inherit;
-  margin: 0;
-}
-
-// This is a special variation of the PostCard component that's only used on
-// the homepage.
-// The card needs to have a different layout only when it's between breakpoints
-// otherwise it acts just like any other card.
-// Because it would be onerous to extend the block and all of its elements, we
-// just use a descendant selector.
-@media (min-width: #{$BREAKPOINT_VALUE_MEDIUM}) and (max-width: #{$BREAKPOINT_VALUE_LARGE}) {
-  .w-card-base--featured {
-    // 32px * 2 of padding to match the columns below + 8px gap.
-    column-gap: 72px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-
-    .w-card-base__cover,
-    .w-card-base__figure {
-      margin: 0;
-    }
-
-    .w-card-base__cover,
-    .w-card-base__blurb {
-      grid-area: auto;
-    }
-
-    .w-card-base__blurb {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    // Normally this little symbol is obscured by the hero thumbnail image
-    // but we need to hide it for the side-by-side featured layout.
-    .w-card-base__desc::before {
-      display: none;
-    }
-  }
-}
diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
deleted file mode 100644
index a31edaff004..00000000000
--- a/src/styles/components/_card.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// CARD OVERVIEW
-//
-// A card is a generic container with a bit of padding and hover/focus/active
-// states.
-//
-// =============================================================================
-
-.w-card {
-  border-radius: $GLOBAL_RADIUS_MEDIUM;
-  display: block;
-  min-height: 506px;
-  overflow: hidden;
-  position: relative;
-  transition: box-shadow $TRANSITION_SPEED;
-
-  @include bp(md) {
-    min-height: auto;
-  }
-}
-
-.w-card:hover,
-.w-card:focus,
-.w-card:focus-within {
-  background-color: transparent;
-  outline: none;
-  text-decoration: none;
-}
-
-.w-card::after {
-  @include w-overlay();
-}
-
-.w-card:hover {
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 2px 4px -1px rgba(0, 0, 0, .2),
-    0 4px 5px 0 rgba(0, 0, 0, .14),
-    0 1px 10px 0 rgba(0, 0, 0, .12);
-}
-
-.w-card:hover::after {
-  background-color: rgba(32, 33, 36, .0);
-}
-
-.w-card:focus,
-.w-card:focus-within {
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 2px 4px -1px rgba(0, 0, 0, .2),
-    0 4px 5px 0 rgba(0, 0, 0, .14),
-    0 1px 10px 0 rgba(0, 0, 0, .12);
-  outline: none;
-}
-
-.w-card:focus::after,
-.w-card:focus-within::after {
-  background-color: rgba(32, 33, 36, .04);
-}
-
-.w-card:active {
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 8px 10px -5px rgba(0, 0, 0, .2),
-    0 16px 24px 2px rgba(0, 0, 0, .14),
-    0 6px 30px 5px rgba(0, 0, 0, .12);
-  outline: none;
-}
-
-.w-card:active::after {
-  background-color: rgba(32, 33, 36, .08);
-}
-
-.w-card--raised {
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 1px 2px 0 rgba(60, 64, 67, .3),
-    0 1px 3px 1px rgba(60, 64, 67, .15);
-}
-
-.w-card--draft::before {
-  background: $RED_800;
-  border-radius: 8px;
-  color: $WHITE;
-  content: 'DRAFT';
-  font-size: 11px;
-  font-weight: bold;
-  left: calc(50% - 25px);
-  padding: 2px;
-  position: absolute;
-  text-align: center;
-  width: 50px;
-}
-
-.w-card__chips {
-  margin-top: 12px;
-}
diff --git a/src/styles/components/_checkbox.scss b/src/styles/components/_checkbox.scss
deleted file mode 100644
index 51724792e16..00000000000
--- a/src/styles/components/_checkbox.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '../settings/colors';
-
-.w-checkbox {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMTkgNXYxNEg1VjVoMTRtMC0ySDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnoiLz48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+');
-  border: 1px solid rgba(0, 0, 0, 0);
-  cursor: pointer;
-  flex-shrink: 0;
-  height: 26px;
-  margin: 0px;
-  outline: none;
-  width: 26px;
-}
-
-.w-checkbox:checked {
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xMSAwLTIgLjktMiAydjE0YzAgMS4xLjg5IDIgMiAyaDE0YzEuMTEgMCAyLS45IDItMlY1YzAtMS4xLS44OS0yLTItMnptLTkgMTRsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiIGZpbGw9IiMzNzQwZmYiLz48L3N2Zz4K');
-}
-
-.w-checkbox:focus {
-  border: 1px solid $WEB_PRIMARY_COLOR;
-}
diff --git a/src/styles/components/_chips.scss b/src/styles/components/_chips.scss
deleted file mode 100644
index 8a0769d18c8..00000000000
--- a/src/styles/components/_chips.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-
-// =============================================================================
-// CHIPS OVERVIEW
-//
-// Chips are little rounded rectangles that can be used as category tags.
-//
-// =============================================================================
-
-.w-chips {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-// Specificty required here because `a` tags in `.w-post-content` have higher priority.
-.w-post-content .w-chip,
-.w-chip {
-  background-color: rgba($GREY_900, 0);
-  border: 1px solid rgba($GREY_900, .16);
-  border-radius: $GLOBAL_RADIUS_LARGE;
-  box-sizing: border-box;
-  color: $GREY_900;
-  display: block;
-  font-size: 14px;
-  height: 32px;
-  line-height: 30px;
-  margin: 0 8px 12px 0;
-  overflow: hidden;
-  padding: 0 12px;
-  text-decoration: none;
-  transition: background-color $TRANSITION_SPEED, border $TRANSITION_SPEED;
-
-  &:hover,
-  &:focus,
-  &:active {
-    outline: none;
-    text-decoration: none;
-  }
-
-  &:hover {
-    background-color: rgba($GREY_900, .04);
-    border: 1px solid rgba($GREY_900, .20);
-  }
-
-  &:focus {
-    background-color: rgba($GREY_900, .12);
-    border: 1px solid rgba($GREY_900, .28);
-  }
-
-  &:active {
-    background-color: rgba($BLACK, .16);
-    border: 1px solid rgba($GREY_900, .43);
-    // sass-lint:disable-block indentation
-    box-shadow:
-      0 5px 5px -3px rgba($BLACK, .2),
-      0 8px 10px 1px rgba($BLACK, .14),
-      0 3px 14px 2px rgba($BLACK, .12);
-  }
-}
diff --git a/src/styles/components/_columns.scss b/src/styles/components/_columns.scss
deleted file mode 100644
index bbafba53b87..00000000000
--- a/src/styles/components/_columns.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// =============================================================================
-// COLUMNS OVERVIEW
-//
-// Columns are used in posts to position content side-by-side.
-//
-// =============================================================================
-
-.w-columns {
-  display: grid;
-  // sass-lint:disable-all
-  // scss-lint:disable all
-  gap: 1rem;
-  // scss-lint:enable all
-  // sass-lint:enable-all
-  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
-}
-
-.w-columns .w-compare {
-  margin: 0;
-  /// adds the breakpoint styles
-  @include bp(sm) {
-    margin: 0 .5rem;
-    padding: 0;
-  }
-}
-
-// TODO: Decouple columns and compare components
-.w-columns .w-compare__label {
-  @include bp(sm) {
-    border-bottom: 3px solid;
-    margin-bottom: 1em;
-    padding: 0;
-  }
-}
-
-.w-columns .w-compare__label--worse {
-  @include bp(sm) {
-    border-bottom-color: $RED_700;
-  }
-}
-
-.w-columns .w-compare__label--better {
-  @include bp(sm) {
-    border-bottom-color: $GREEN_800;
-  }
-}
-
-.w-columns .w-compare__label::before {
-  @include bp(sm) {
-    content: none;
-  }
-}
diff --git a/src/styles/components/_compare.scss b/src/styles/components/_compare.scss
deleted file mode 100644
index ace975233b7..00000000000
--- a/src/styles/components/_compare.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-
-// =============================================================================
-// COMPARE OVERVIEW
-//
-// A compare widget is used to show a good/bad variation of something.
-// Typically it's used with a code snippet to show what someone shouldn't do.
-//
-// =============================================================================
-
-.w-compare {
-  line-height: 1.5em;
-  margin: 0 0 32px;
-  padding: 0 0 0 16px;
-  position: relative;
-}
-
-// Markdown will put unclassed p tags inside of the compare widget as content
-// so we need to make them act like regular text content.
-.w-compare > ol,
-.w-compare > p,
-.w-compare > web-copy-code > pre,
-.w-compare > ul {
-  margin: 0;
-}
-
-.w-compare__label {
-  font-size: 1.125em;
-  font-weight: $FONT_WEIGHT_MEDIUM;
-  padding-bottom: .5em;
-}
-
-.w-compare__label::before {
-  bottom: 0;
-  content: '';
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 3px;
-}
-
-.w-compare__label--worse {
-  color: $RED_700;
-}
-
-.w-compare__label--worse::before {
-  background-color: $RED_700;
-}
-
-.w-compare__label--better {
-  color: $GREEN_800;
-}
-
-.w-compare__label--better::before {
-  background-color: $GREEN_800;
-}
-
-.w-compare__caption p {
-  color: $GREY_700;
-  font-size: 1em;
-  line-height: 1.5em;
-  margin: .75em 0 0;
-}
diff --git a/src/styles/components/_cross-links.scss b/src/styles/components/_cross-links.scss
deleted file mode 100644
index f53d5b2c21c..00000000000
--- a/src/styles/components/_cross-links.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../tools/mixins';
-
-// =============================================================================
-// CROSS-LINKS OVERVIEW
-//
-// Cross-links are links styled like buttons which indicate that there is a
-// framework or library specific version of an article.
-//
-// =============================================================================
-
-.w-cross-links {
-  display: flex;
-}
-
-.w-cross-link {
-  align-items: center;
-  background-color: rgba($WEB_EXTENDED_SECONDARY_COLOR, .08);
-  border: 1px solid transparent;
-  border-radius: $GLOBAL_RADIUS;
-  color: rgba($WEB_EXTENDED_SECONDARY_COLOR, 1);
-  display: inline-flex;
-  height: 32px;
-  justify-content: center;
-  margin-right: 8px;
-  overflow: hidden;
-  padding: 0 10px 0 12px;
-  position: relative;
-  transition: background-color $TRANSITION_SPEED, border $TRANSITION_SPEED;
-}
-
-.w-cross-link:hover {
-  border: 1px solid rgba($WEB_EXTENDED_SECONDARY_COLOR, .2);
-}
-
-.w-cross-link:focus {
-  border: 1px solid rgba($WEB_EXTENDED_SECONDARY_COLOR, .28);
-}
-
-.w-cross-link:active {
-  border: 1px solid rgba($WEB_EXTENDED_SECONDARY_COLOR, .43);
-  // sass-lint:disable-block indentation
-  box-shadow:
-    0 5px 5px -3px rgba($WEB_EXTENDED_SECONDARY_COLOR, .2),
-    0 8px 10px 1px rgba($WEB_EXTENDED_SECONDARY_COLOR, .14),
-    0 3px 14px 2px rgba($WEB_EXTENDED_SECONDARY_COLOR, .12);
-}
-
-.w-cross-link:hover,
-.w-cross-link:focus,
-.w-cross-link:active {
-  background-color: rgba($WEB_EXTENDED_SECONDARY_COLOR, .08); // DevSite override
-  outline: 0;
-  text-decoration: none;
-}
-
-.w-cross-link::before {
-  @include w-overlay();
-}
-
-.w-cross-link:hover::before {
-  background-color: rgba($WEB_EXTENDED_SECONDARY_COLOR, .04);
-}
-
-.w-cross-link:focus::before {
-  background-color: rgba($WEB_EXTENDED_SECONDARY_COLOR, .12);
-}
-
-.w-cross-link:active::before {
-  background-color: rgba($WEB_EXTENDED_SECONDARY_COLOR, .16);
-}
-
-.w-cross-link::after {
-  @include font-material-icon();
-  content: attr(data-icon);
-  font-size: 1em;
-  margin-left: 10px;
-}
diff --git a/src/styles/components/_details.scss b/src/styles/components/_details.scss
deleted file mode 100644
index f0003cee73d..00000000000
--- a/src/styles/components/_details.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@import '../tools/mixins';
-
-$CHEVRON_SIZE: 24px;
-$CHEVRON_MARGIN: 12px;
-
-.w-details {
-  border: 1px solid $BORDER_COLOR;
-  border-width: 1px 0;
-  margin: 36px 0;
-  padding: 18px 0;
-  position: relative;
-
-  & + & {
-    border-top: 0;
-    margin-top: -36px;
-  }
-}
-
-.w-details__summary {
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-  font: inherit;
-  list-style: none;
-
-  // scss-lint thinks this is a pseudo class instead of a psuedo element
-  // and complains about the two colons.
-  // scss-lint:disable all
-  &::-webkit-details-marker {
-    display: none;
-  }
-  // scss-lint:enable all
-
-  &:focus {
-    outline: none;
-  }
-
-  @include hover() {
-    &:hover .w-details__header::after,
-    &:focus .w-details__header::after {
-      background: $WEB_PRIMARY_COLOR_50;
-    }
-  }
-
-  &:focus .w-details__header::after {
-    box-shadow: 0 0 0 1px $FOCUS_COLOR;
-  }
-
-  .js-focus-visible &:focus:not(.focus-visible) .w-details__header::after { // sass-lint:disable-line class-name-format
-    box-shadow: none;
-  }
-
-  &:active .w-details__header::after {
-    background: $WEB_PRIMARY_COLOR_100;
-  }
-}
-
-// The details header class overrides the margins of the base element and
-// adds padding so that the tap target is sufficiently tall.
-.w-details__header {
-  color: $WEB_PRIMARY_COLOR_600;
-  margin: 0;
-  padding: .75rem #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 4px} .75rem 0;
-  position: relative;
-
-  &::after {
-    @include font-material-icon();
-    border-radius: $GLOBAL_ROUNDED;
-    content: 'expand_more';
-    cursor: $CURSOR_POINTER_VALUE;
-    font-size: $CHEVRON_SIZE;
-    padding: 2px;
-    position: absolute;
-    right: 1px;
-    speak: none;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: background .2s;
-    visibility: visible;
-  }
-
-  @include bp(xsm) {
-    & {
-      padding: 1.125em #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 12px} 1.125em 0;
-    }
-
-    &::after {
-      padding: .25em;
-    }
-  }
-}
-
-.w-details[open] .w-details__header::after {
-  transform: rotate(180deg) translateY(50%);
-}
-
-// The following selectors modulate the vertical whitespace of (a) headers (when
-// there's no accompanying preview) and (b) previews in both open and closed
-// states. They do violate BEM, but using helper classes would add a fair
-// amount of complexity to the component JS.
-
-.w-details__header:only-child {
-  line-height: 1.5rem;
-  padding: .375rem #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 4px} .375rem 0;
-}
-
-h2.w-details__header:only-child {
-  line-height: 1.3333em;
-  padding: .75rem #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 4px} .75rem 0;
-}
-
-.w-details > p:first-of-type {
-  margin-top: 0;
-}
-
-// -----------------------------------------------------------------------------
-// Preview text appears immediately below the header in the closed state and
-// remains visible at the top of the expanded panel in the open state.
-// In the closed state, the preview includes a 'Read more' button
-// as a pseudo element to improve discoverability for sighted users.
-// -----------------------------------------------------------------------------
-
-.w-details__preview {
-  margin: 0 0 1rem;
-
-  &::after {
-    color: $GREY_700;
-    content: 'Read more';
-    display: block;
-    font-size: .7222em;
-    font-weight: 500;
-    line-height: 2.13333;
-    padding-top: .75rem;
-    text-transform: uppercase;
-    transition: color .2s;
-  }
-}
-
-.w-details[open] .w-details__preview {
-  display: none;
-}
-
-@include hover() {
-  .w-details__summary:hover .w-details__preview::after,
-  .w-details__summary:focus .w-details__preview::after {
-    color: $LINK_COLOR;
-  }
-}
diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
deleted file mode 100644
index 71de5e3320f..00000000000
--- a/src/styles/components/_footer.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/breakpoints';
-
-@mixin w-footer__link-padding {
-  padding: 16px 0;
-}
-
-.w-footer {
-  border-top: 1px solid $GREY_300;
-}
-
-.w-footer__license {
-  padding-top: 32px;
-  width: 100%;
-}
-
-.w-footer__license p {
-  font-size: .75rem;
-  margin: 0;
-  max-width: 960px;
-}
-
-.w-footer__linkboxes {
-  background: $WHITE;
-  display: block;
-  font: $FONT_WEIGHT_REGULAR 14px/16px $PRIMARY_FONT;
-}
-
-.w-footer__linkboxes-list {
-  display: block;
-  list-style: none;
-  padding: 24px 0;
-
-  @include bp(md) {
-    display: flex;
-    padding: 24px 12px 0;
-  }
-}
-
-.w-footer__linkbox {
-  flex-grow: 1;
-  padding: 0 16px 24px;
-
-  @include bp(md) {
-    flex: 1;
-    margin: 0;
-  }
-}
-
-.w-footer__linkbox:last-of-type {
-  padding: 0 16px;
-}
-
-.w-footer__linkbox-heading {
-  font: $FONT_WEIGHT_MEDIUM 14px/16px $PRIMARY_FONT;
-  margin: 0 0 8px;
-}
-
-.w-footer__linkbox-list {
-  list-style-type: none;
-  padding: 0;
-}
-
-.w-footer__linkbox-item {
-  margin: 0;
-}
-
-.w-footer__linkbox-link {
-  color: $PRIMARY_TEXT_COLOR;
-  display: block;
-  @include w-footer__link-padding;
-}
-
-.w-footer__linkbox-link:focus,
-.w-footer__linkbox-link:hover {
-  color: $FOCUS_COLOR;
-  text-decoration: none;
-}
-
-.w-footer__utility {
-  background: $WHITE;
-  display: block;
-}
-
-.w-footer__utility-nav {
-  border-top: 1px solid #ddd;
-  display: block;
-  font: $FONT_WEIGHT_REGULAR 14px/16px $PRIMARY_FONT;
-  margin: 0 16px;
-  padding: 24px 0;
-
-  @include bp(md) {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 24px;
-  }
-}
-
-.w-footer__utility-list {
-  display: block;
-  list-style: none;
-  padding: 0;
-
-  @include bp(md) {
-    align-items: center;
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-}
-
-.w-footer__utility-item {
-  margin: 0;
-
-  @include bp(md) {
-    margin-right: 40px;
-  }
-}
-
-.w-footer__utility-link {
-  color: #202124;
-  display: block;
-  @include w-footer__link-padding;
-}
-
-.w-footer__utility-link:focus,
-.w-footer__utility-link:hover {
-  color: $FOCUS_COLOR;
-  text-decoration: none;
-}
-
-.w-footer__utility-logo-link {
-  display: block;
-  line-height: 1;
-  margin-right: 40px;
-}
-
-.w-footer__utility-logo {
-  margin: -2px 0 16px;
-  max-width: 185px;
-
-  @include bp(md) {
-    margin: -2px 0 0;
-  }
-}
diff --git a/src/styles/components/_grid.scss b/src/styles/components/_grid.scss
deleted file mode 100644
index c3cd6791f8b..00000000000
--- a/src/styles/components/_grid.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-@import '../settings/dimensions';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// GRID OVERVIEW
-//
-// See content grid design deck:
-// https://docs.google.com/presentation/d/1ZQ7pFYje0oHIUs3uv3QmSUmJW4Y9UJnxh3e-x8i4CZE/edit?ts=5c7810bf#slide=id.g4f6a59bd10_2_90
-//
-// Note: This grid is really only used for the blog landing page.
-// It should probably be consolidated with the simpler grids in _layouts.scss
-// You should probably avoid using this grid unless you have a good reason.
-//
-// =============================================================================
-
-.w-grid {
-  padding: 0 0 32px;
-
-  @include bp(xxsm) {
-    padding: 0 0 64px;
-  }
-
-  @include bp(sm) {
-    padding: 0 32px 64px;
-  }
-}
-
-.w-grid__columns {
-  -webkit-box-align: stretch;
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  display: grid;
-  flex-flow: row wrap;
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-  grid-template-columns: 1fr;
-  margin: 0 auto;
-  max-width: 512px;
-}
-
-.w-grid__columns--gapless {
-  grid-column-gap: 0;
-  grid-row-gap: 0;
-}
-
-%w-grid__columns--two,
-.w-grid__columns--two {
-  @include bp(md) {
-    grid-template-columns: 1fr 1fr;
-    max-width: 960px;
-  }
-}
-
-.w-grid__columns--three {
-  @extend %w-grid__columns--two;
-
-  @include bp(lg) {
-    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 1320px;
-  }
-}
-
-.w-grid__columns--featured {
-  @include bp(md) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, minmax(min-content, max-content));
-    max-width: 960px;
-
-    *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
-    *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
-    *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
-  }
-
-  @include bp(lg) {
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 1fr;
-    max-width: 1320px;
-
-    *:nth-child(1) { grid-area: auto; }
-    *:nth-child(2) { grid-area: auto; }
-    *:nth-child(3) { grid-area: auto; }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// !!! DEPRECATED !!!
-//
-// GRID LAYOUTS
-// This is the old grid used on the beta of web.dev.
-// Complex components on the measure page still use it but it should be phased
-// out. Please do not use this with new components!
-// ---------------------------------------------------------------------------
-
-// 599px to minimum size
-// 1-column FLUID block
-.w-layout-container--large {
-  margin: 0 auto;
-  padding: 32px 16px;
-  position: relative;
-}
-
-.w-layout-row {
-  display: block;
-}
-
-// 1023px - 600px
-// 12-column FLUID grid
-@media screen and (min-width: $BREAKPOINT_VALUE_MOBILE) {
-  .w-layout-container--large {
-    max-width: 768px;
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-
-  .w-layout-row {
-    display: grid;
-    grid-gap: 2.12%;
-    grid-template-columns: repeat(12, 6.39%);
-  }
-}
-
-// 1440px - 1024px
-// 12-column FIXED grid
-@media screen and (min-width: $BREAKPOINT_VALUE_TABLET_LANDSCAPE) {
-  .w-layout-container--large {
-    max-width: 1024px;
-  }
-
-  .w-layout-row {
-    grid-gap: $GRID_GAP_LARGE;
-    grid-template-columns: repeat(12, $GRID_COLUMN_LARGE);
-  }
-}
-
-// 1441px+
-// 12-column FIXED grid
-@media screen and (min-width: $BREAKPOINT_VALUE_DESKTOP) {
-  .w-layout-container--large {
-    max-width: 1440px;
-    padding-left: $CONTAINER_PADDING_SMALL;
-    padding-right: $CONTAINER_PADDING_SMALL;
-  }
-
-  .w-layout-row {
-    grid-gap: $GRID_GAP_EXTRA_LARGE;
-    grid-template-columns: repeat(12, $GRID_COLUMN_EXTRA_LARGE);
-  }
-}
-
-// Column helpers
-// Span 12 columns on mobile
-.w-col-xs-12 {
-  grid-column: 1 / span 12;
-}
-
-@media screen and (min-width: $BREAKPOINT_VALUE_MOBILE) {
-  .w-col-sm-10 {
-    grid-column: 2 / span 10;
-  }
-
-  .w-col-sm-12 {
-    grid-column: 1 / span 12;
-  }
-}
-
-@media screen and (min-width: $BREAKPOINT_VALUE_TABLET) {
-  .w-col-md-8 {
-    grid-column: 3 / span 8;
-  }
-
-  .w-col-md-10 {
-    grid-column: 2 / span 10;
-  }
-
-  .w-col-md-12 {
-    grid-column: 1 / span 12;
-  }
-}
-
-@media screen and (min-width: $BREAKPOINT_VALUE_TABLET_LANDSCAPE) {
-  .w-col-lg-6 {
-    grid-column: 4 / span 6;
-  }
-
-  .w-col-lg-8 {
-    grid-column: 3 / span 8;
-  }
-
-  .w-col-lg-10 {
-    grid-column: 2 / span 10;
-  }
-
-  .w-col-lg-12 {
-    grid-column: 1 / span 12;
-  }
-}
-
-@media screen and (min-width: $BREAKPOINT_VALUE_DESKTOP) {
-  .w-col-xl-6 {
-    grid-column: 4 / span 6;
-  }
-
-  .w-col-xl-8 {
-    grid-column: 3 / span 8;
-  }
-
-  .w-col-xl-10 {
-    grid-column: 2 / span 10;
-  }
-
-  .w-col-xl-12 {
-    grid-column: 1 / span 12;
-  }
-}
diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
deleted file mode 100644
index c259b8f5a97..00000000000
--- a/src/styles/components/_header.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-@import '../settings/colors';
-@import '../settings/dimensions';
-@import '../settings/global';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// HEADER
-//
-// This styles the header. The header Web Component is just a holder for HTML
-// that adds some functionality around opening/closing side nav, etc. It has
-// only a few styles which are needed by its JS source.
-//
-// =============================================================================
-
-web-header {
-  align-items: center;
-  background: $WHITE;
-  box-shadow: 0 1px 2px 0 rgba($GREY_800, .3), 0 2px 6px 2px rgba($GREY_800, .15);
-  color: $PRIMARY_TEXT_COLOR;
-  contain: layout;
-  display: flex;
-  font-size: 14px;
-  height: $WEB_HEADER_HEIGHT;
-  padding: 0 24px;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 200;
-
-  .web-header__hamburger-btn {
-    height: 2.75rem;
-    margin: 0 8px 0 -8px;
-    width: 2.75rem;
-
-    // sass-lint:disable class-name-format
-    &.unresolved {
-      display: inline-block;  // override default .unresolved behavior
-      visibility: hidden;
-    }
-    // sass-lint:enable class-name-format
-
-    @include bp(md) {
-      display: none !important;
-    }
-  }
-
-  .web-header__hamburger-btn:hover,
-  .web-header__hamburger-btn:focus,
-  .web-header__hamburger-btn:active {
-    color: rgba($BLACK, .87);
-  }
-
-  .web-header__hamburger-btn::before {
-    @include font-material-icon();
-    content: 'menu';
-    display: inline-block;
-    height: 26px;
-    width: 24px;
-  }
-
-  .web-header__logo {
-    height: 30px;
-    width: 125px;
-  }
-
-  .web-header__middle {
-    align-items: center;
-    display: flex;
-    flex: 1;
-    height: 100%;
-    /// This is used by web-search during its animation.
-    /// web-search is >200% the width of its parent. When focused it will
-    /// transition to completely fill the width of .web-header__middle.
-    overflow: hidden;
-    position: relative;
-  }
-
-  .web-header__links {
-    display: none;
-    flex: 1;
-    height: 100%;
-    line-height: 20px;
-    min-width: 50%;
-    padding-left: 48px;
-
-    @include bp(md) {
-      display: flex;
-    }
-  }
-
-  .web-header__link {
-    align-items: center;
-    color: $PRIMARY_TEXT_COLOR;
-    display: flex;
-    font-weight: 500;
-    margin: 0;
-    padding: 0 16px;
-    position: relative;
-
-    &[active] {
-      box-shadow: 0 -2px 0 $WEB_PRIMARY_COLOR inset;
-    }
-
-    @include bp(lg) {
-      padding: 0 24px;
-    }
-  }
-
-  .web-header__link:hover,
-  .web-header__link:focus,
-  .web-header__link:active {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  .web-header__link:hover {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .04);
-  }
-
-  .web-header__link:focus {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .12);
-  }
-
-  .web-header__link:active {
-    background-color: rgba($PRIMARY_TEXT_COLOR, .16);
-  }
-
-  .web-header__link[data-active]::after {
-    background: $WEB_PRIMARY_COLOR;
-    bottom: 0;
-    content: '';
-    display: block;
-    height: 2px;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  web-search {
-    flex: 1;
-  }
-}
-
-web-header.web-header--has-expanded-search {
-  .web-header__logo-link {
-    display: none;
-
-    @include bp(md) {
-      display: inline;
-    }
-  }
-
-  .web-header__middle {
-    overflow: visible;
-  }
-
-  web-profile-switcher-container {
-    display: none;
-
-    @include bp(md) {
-      display: flex;
-    }
-  }
-}
diff --git a/src/styles/components/_icon-list.scss b/src/styles/components/_icon-list.scss
deleted file mode 100644
index 8a27f1b304e..00000000000
--- a/src/styles/components/_icon-list.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../settings/colors';
-@import '../tools/mixins';
-
-// =============================================================================
-// ICON LIST OVERVIEW
-//
-// An icon list is a regular unordered list where each bullet is replaced by an
-// icon.
-//
-// =============================================================================
-
-.w-icon-list {
-  list-style: none;
-}
-
-.w-icon-list__item {
-  font-size: .875rem;
-  margin: .5rem 0;
-  padding-left: 1.875rem;
-}
-
-.w-icon-list__item::before {
-  @include font-material-icon();
-  float: left;
-  font-size: 1.25rem;
-  margin: 0 0 0 -30px;
-}
-
-.w-icon-list__item--check::before {
-  color: $WEB_PRIMARY_COLOR;
-  content: 'done';
-}
diff --git a/src/styles/components/_images.scss b/src/styles/components/_images.scss
deleted file mode 100644
index 520b0d34957..00000000000
--- a/src/styles/components/_images.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-// -----------------------------------------------------------------------------
-// A hero is a banner image that appears at the top of a post.
-// -----------------------------------------------------------------------------
-
-.w-hero {
-  display: none;
-
-  @include bp(sm) {
-    display: block;
-    margin: 0 auto;
-    max-height: 480px;
-    width: 1600px;
-  }
-}
-
-.w-hero--top {
-  object-position: top;
-}
-
-.w-hero--bottom {
-  object-position: bottom;
-}
-
-.w-hero--cover {
-  object-fit: cover;
-}
-
-.w-hero--contain {
-  object-fit: contain;
-}
-
-// -----------------------------------------------------------------------------
-// A screenshot is a helper class to wrap an image and ensure it has some
-// bordering around it. Otherwise screenshots taken against a white background
-// will appear to 'float' in the middle of the article if the page also has
-// a white background.
-// -----------------------------------------------------------------------------
-
-// FIXME:
-// The duplication of the screenshot styles on figure are a temporary fix while
-// we transition elements over to the Figure shortcode.
-// After we transition all elements over to the shortcode, we should remove the
-// w-screenshot & w-screenshot--filled classes.
-// These figure classes *do* violate BEM style by using a child selector, but
-// it makes working with the shortcode much more ergonomic.
-
-.w-screenshot,
-.w-figure--screenshot > img {
-  border: 1px solid $GREY_300;
-  padding: 4px;
-}
-
-.w-screenshot--filled,
-.w-figure--screenshot > img {
-  background-color: $GREY_50;
-  padding: 16px;
-}
-
-.w-screenshot + .w-screenshot,
-.w-screenshot--filled + .w-screenshot--filled,
-.w-figure--screenshot > img + .w-figure--screenshot > img,
-.w-figure--screenshot-filled > img + .w-figure--screenshot-filled > img {
-  margin-top: 32px;
-}
-
-// -----------------------------------------------------------------------------
-// Figures are images with an optional caption at the bottom. They can be used
-// statitcally, or to break out of their container, or inlined to the left or
-// right.
-//
-// -----------------------------------------------------------------------------
-
-.w-figure {
-  margin: 32px 0;
-  text-align: center;
-}
-
-// Allow images contained within a figure to be break outside of the main
-// container in articles and be full bleed on mobile.
-.w-figure--fullbleed {
-  margin: 64px -32px;
-}
-
-// Inline images are typically quite small so we'll center them on smaller
-// displays but we won't force them to 100% width in case that causes their
-// height to get super tall.
-// This will also center the figcaption but that doesn't look too bad.
-.w-figure--inline-right,
-.w-figure--inline-left {
-  display: block;
-  float: none;
-  margin: 16px 0;
-  max-width: 100%;
-  text-align: center;
-
-  @include bp(md) {
-    max-width: calc((100% - 40px) / 2);
-    text-align: left;
-  }
-}
-
-.w-figure--inline-right {
-  @include bp(md) {
-    float: right;
-    margin: 0 0 40px 40px;
-  }
-}
-
-.w-figure--inline-left {
-  @include bp(md) {
-    float: left;
-    margin: 0 40px 40px 0;
-  }
-}
-
-.w-figcaption {
-  font-size: .875em;
-  line-height: 1.5em;
-  margin: 16px 0 0;
-}
-
-.w-figcaption--fullbleed {
-  margin: 24px 32px 0;
-}
diff --git a/src/styles/components/_label.scss b/src/styles/components/_label.scss
deleted file mode 100644
index d47f3cd744d..00000000000
--- a/src/styles/components/_label.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// =============================================================================
-// LABEL OVERVIEW
-//
-// Labels can be used to display a filename associated with a code snippet.
-// =============================================================================
-
-.w-label {
-  margin-bottom: -28px;
-  opacity: .7;
-}
diff --git a/src/styles/components/_layouts.scss b/src/styles/components/_layouts.scss
deleted file mode 100644
index 2a47b30a39a..00000000000
--- a/src/styles/components/_layouts.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import '../tools/breakpoints';
-
-// =============================================================================
-// LAYOUTS OVERVIEW
-//
-// Layout classes that can be extended or used directly.
-//
-// =============================================================================
-
-// -----------------------------------------------------------------------------
-// CONTAINERS
-// -----------------------------------------------------------------------------
-
-.w-layout-container,
-.w-layout-container--narrow {
-  box-sizing: content-box;
-  margin: 0 auto;
-  overflow: visible;
-  padding: 24px;
-
-  @include bp(sm) {
-    padding: 32px;
-  }
-}
-
-.w-layout-container { max-width: 960px; }
-// Article pages have a narrower, single column layout.
-.w-layout-container--narrow { max-width: 800px; }
diff --git a/src/styles/components/_livestream-container.scss b/src/styles/components/_livestream-container.scss
deleted file mode 100644
index a6db57b96c4..00000000000
--- a/src/styles/components/_livestream-container.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-// =============================================================================
-// LIVESTREAM CONTAINER OVERVIEW
-//
-// These styles help prevent FOUC as the web-livestream-container's custom
-// element definition loads in.
-//
-// =============================================================================
-
-web-livestream-container {
-  $CHAT_WIDTH: 400px;
-
-  background-color: $WHITE;
-  display: flex;
-  margin: auto;
-  max-width: 1600px;
-
-  @include bp(md) {
-    border-left: 1px solid $GREY_300;
-    border-right: 1px solid $GREY_300;
-  }
-
-  .web-livestream-container__skeleton-yt {
-    background-color: $GREY_50;
-    flex: 1;
-    min-height: calc((9/16) * 100vw);
-
-    @include bp(md) {
-      min-height: calc((9/16) * (100vw - #{$CHAT_WIDTH}  - 1px));
-    }
-
-    @media (min-width: 1600px) {
-      min-height: calc((9/16) * (1600px - #{$CHAT_WIDTH} - 1px));
-    }
-  }
-
-  .web-livestream-container__skeleton-chat {
-    display: none;
-
-    @include bp(md) {
-      border-left: 1px solid $GREY_300;
-      display: block;
-      min-height: 600px;
-      width: $CHAT_WIDTH;
-    }
-
-    @media (hover: none) {
-      display: none;
-    }
-  }
-}
diff --git a/src/styles/components/_mastheads.scss b/src/styles/components/_mastheads.scss
deleted file mode 100644
index 066cf593675..00000000000
--- a/src/styles/components/_mastheads.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-@import '../settings/type';
-@import '../tools/breakpoints';
-
-// =============================================================================
-// MASTHEADS OVERVIEW
-//
-// Mastheads are large, graphic areas at the top of landing pages.
-// They often combine a heading, some text, and a background image.
-// Because each landing page can be a bit unique, it's easier to define each
-// masthead as its own component, rather than have them try to share styles.
-//
-// =============================================================================
-
-// -----------------------------------------------------------------------------
-// HOME
-// -----------------------------------------------------------------------------
-
-.w-masthead-home {
-  background: $GREY_50;
-  background-image: url(../images/headers/future_web.svg);
-  background-position: left 50% top -215px;
-  background-repeat: no-repeat;
-  background-size: 400px;
-
-  @include bp(sm) {
-    background-position: left 430px top 50%;
-    background-size: 650px;
-  }
-
-  @include bp(md) {
-    background-position: left 50vw top 50%;
-  }
-}
-
-.w-masthead-home__container {
-  box-sizing: content-box;
-  margin: 0 auto;
-  max-width: 960px;
-  overflow: visible;
-  padding: 176px 24px 72px;
-
-  @include bp(sm) {
-    padding: 72px 24px;
-  }
-}
-
-.w-masthead-home__left {
-  max-width: 408px;
-}
-
-.w-masthead-home__buttons {
-  display: flex;
-  flex-direction: column;
-
-  @include bp(sm) {
-    display: block;
-  }
-}
-
-.w-masthead-home__button--primary {
-  margin: 0 0 16px;
-
-  @include bp(sm) {
-    margin: 0 16px 0 0;
-  }
-}
-
-// -----------------------------------------------------------------------------
-// PATH
-// -----------------------------------------------------------------------------
-
-.w-masthead-path {
-  background: $GREY_50;
-}
-
-.w-masthead-path__container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  padding: 2em 2em 0;
-
-  @include bp(md) {
-    box-sizing: content-box;
-    flex-direction: row;
-    margin: 0 auto;
-    max-width: 960px;
-    padding: 0 2em;
-  }
-}
-
-.w-masthead-path__container > * {
-  flex: 1;
-}
-
-.w-masthead-path__left {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-
-  @include bp(md) {
-    text-align: left;
-  }
-}
-
-.w-masthead-path__headline {
-  @include font($HEADLINE_2);
-  font-weight: $FONT_WEIGHT_MEDIUM;
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_2_XXSMALL);
-    font-weight: $FONT_WEIGHT_MEDIUM;
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_2_XSMALL);
-    font-weight: $FONT_WEIGHT_MEDIUM;
-  }
-
-  @include bp(md) {
-    @include font($HEADLINE_1_XSMALL);
-  }
-}
-
-.w-masthead-path__headline,
-.w-masthead-path__description {
-  margin: 0;
-}
-
-.w-masthead-path__image {
-  max-height: 280px;
-  max-width: 420px;
-  width: 100%;
-}
-
-// -----------------------------------------------------------------------------
-// ABOUT
-// -----------------------------------------------------------------------------
-
-.w-masthead-about {
-  background: $WHITE;
-}
-
-.w-masthead-about__container {
-  box-sizing: content-box;
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  max-width: 960px;
-  overflow: visible;
-  padding: 24px;
-
-  @include bp(md) {
-    flex-direction: row;
-    padding: 72px 24px;
-  }
-}
-
-.w-masthead-about__left {
-  flex: 1;
-
-  @include bp(md) {
-    margin-right: 32px;
-  }
-}
-
-.w-masthead-about__right {
-  align-items: center;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-  margin-bottom: 18px;
-  order: -1;
-
-  @include bp(md) {
-    margin-bottom: 0;
-    order: initial;
-  }
-}
-
-.w-masthead-about__image {
-  max-width: 44vw;
-
-  @include bp(md) {
-    max-width: 380px;
-  }
-}
diff --git a/src/styles/components/_numbered-header.scss b/src/styles/components/_numbered-header.scss
deleted file mode 100644
index ade81135e92..00000000000
--- a/src/styles/components/_numbered-header.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// NUMBERED HEADER OVERVIEW
-//
-// Numbered header have a round disc next to the header showing a step
-// number. They're useful when you want to guide the user through a series of
-// actions.
-//
-// =============================================================================
-
-$DISC_SHADOW: rgba(0, 0, 0, .25);
-$NUMBERED_COUNTER_SIZE_LARGE: 48px;
-$NUMBERED_COUNTER_SIZE_MEDIUM: 40px;
-$NUMBERED_COUNTER_SIZE_SMALL: 32px;
-
-// The element that contains .w-numbered-header children should apply this
-// class to make the number in the discs increment.
-.w-numbered-headers {
-  counter-reset: numbered-headers;
-}
-
-.w-numbered-header {
-  align-items: center;
-  display: flex;
-  overflow: visible;
-}
-
-.w-numbered-header::before {
-  border-radius: $GLOBAL_ROUNDED;
-  box-shadow: 0 2px 4px $DISC_SHADOW;
-  content: counter(numbered-headers);
-  counter-increment: numbered-headers;
-  display: block;
-  font-size: $NUMBERED_COUNTER_SIZE_SMALL / 2;
-  font-weight: 600;
-  height: $NUMBERED_COUNTER_SIZE_SMALL;
-  line-height: $NUMBERED_COUNTER_SIZE_SMALL;
-  min-width: $NUMBERED_COUNTER_SIZE_SMALL;
-  text-align: center;
-  width: $NUMBERED_COUNTER_SIZE_SMALL;
-
-  @include bp(sm) {
-    font-size: $NUMBERED_COUNTER_SIZE_LARGE / 2;
-    height: $NUMBERED_COUNTER_SIZE_LARGE;
-    line-height: $NUMBERED_COUNTER_SIZE_LARGE;
-    min-width: $NUMBERED_COUNTER_SIZE_LARGE;
-    width: $NUMBERED_COUNTER_SIZE_LARGE;
-  }
-}
-
-// HORIZONTAL VARIANT
-.w-numbered-header--horizontal::before {
-  margin-right: 16px;
-}
-
-// VERTICAL VARIANT
-.w-numbered-header--vertical {
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.w-numbered-header--vertical::before {
-  font-size: $NUMBERED_COUNTER_SIZE_MEDIUM / 2;
-  height: $NUMBERED_COUNTER_SIZE_MEDIUM;
-  line-height: $NUMBERED_COUNTER_SIZE_MEDIUM;
-  margin-bottom: 18px;
-  min-width: $NUMBERED_COUNTER_SIZE_MEDIUM;
-  width: $NUMBERED_COUNTER_SIZE_MEDIUM;
-}
diff --git a/src/styles/components/_page-header.scss b/src/styles/components/_page-header.scss
deleted file mode 100644
index fbb2ea49915..00000000000
--- a/src/styles/components/_page-header.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import '../settings/type';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// PAGE HEADER OVERVIEW
-//
-// A piece of introductory copy usually containing a large headline element
-// and a short summary describing the section.
-//
-// =============================================================================
-
-.w-page-header {
-  height: auto;
-  // margin-top: 44px;
-  padding: 0 16px;
-  text-align: center;
-
-  @include bp(xxsm) {
-    // margin-top: 56px;
-    padding: 36px 24px 28px;
-  }
-
-  @include bp(md) {
-    min-height: 288px;
-    // margin-top: 64px;
-    padding: 48px 32px 0;
-  }
-}
-
-.w-page-header__headline {
-  margin: 0 auto 11px;
-
-  &.w-code {
-    font: 400 64px/64px 'Roboto Mono', monospace;
-  }
-}
-
-.w-page-header__copy {
-  font: inherit;
-  margin: 0 auto 12px;
-  max-width: 600px; // fits a top line of text on a large screen to prevent FOUC
-}
-
-body:not(.unresolved) .w-unsupported-notice {
-  display: none !important;
-}
-
-@keyframes unsupported-appear {
-  from { visibility: hidden; }
-  to   { visibility: hidden; }
-}
-
-.w-unsupported-notice {
-  // Hide this element for 5s once it is on the DOM.
-  animation: unsupported-appear 5s;
-}
diff --git a/src/styles/components/_path-card.scss b/src/styles/components/_path-card.scss
deleted file mode 100644
index 81c1406dd65..00000000000
--- a/src/styles/components/_path-card.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-// =============================================================================
-// PATH CARD OVERVIEW
-//
-// A path-card is a preview for a grouping of posts. It lives inside of a card
-// and can be displayed in a list on the learn landing page, or at the end of a
-// post to point users at related content.
-//
-//
-// =============================================================================
-
-.w-path-card {
-  @include w-body-text();
-  padding: 24px;
-
-  @include bp(sm) {
-    padding: 32px;
-  }
-}
-
-.w-path-card__info {
-  margin-bottom: 1rem;
-}
-
-.w-path-card__info::before {
-  background-color: $WEB_PRIMARY_COLOR;
-  content: '';
-  display: block;
-  height: 2px;
-  width: 64px;
-}
-
-.w-path-card__info-list {
-  height: 36px;
-  list-style: none;
-  margin: 0;
-  overflow: hidden;
-  padding: 10px 0 0;
-}
-
-.w-path-card__info-listitem {
-  color: $GREY_700;
-  display: block;
-  float: left;
-  font-family: $HEADLINE_FONT;
-  font-size: 14px;
-}
-
-.w-path-card__info-listitem::after {
-  content: '·';
-  display: inline-block;
-  margin: 0 8px;
-}
-
-.w-path-card__info-listitem--category {
-  color: $WEB_PRIMARY_COLOR;
-  font-weight: 500;
-}
-
-.w-path-card__info-listitem:last-of-type::after {
-  content: '';
-  margin: 0;
-}
-
-.w-path-card__info-listitem--more-info::after {
-  content: '';
-}
-
-.w-path-card__info-listitem--updated {
-  display: none;
-}
-
-.w-path-card__cover {
-  background-color: $GREY_50;
-  border: 1px solid $GREY_300;
-  height: 208px;
-  margin: 0 0 1.3rem;
-  overflow: hidden;
-  text-align: center;
-}
-
-.w-path-card__cover-image {
-  height: 100%;
-  object-fit: contain;
-  width: 100%;
-}
-
-.w-path-card__cover-image--fill {
-  object-fit: cover;
-}
-
-.w-path-card__headline {
-  margin: 0 0 1rem;
-}
-
-.w-path-card__subhead {
-  color: $GREY_700;
-  font: inherit;
-  margin: 16px 0;
-}
diff --git a/src/styles/components/_progress.scss b/src/styles/components/_progress.scss
deleted file mode 100644
index c12229fbdf8..00000000000
--- a/src/styles/components/_progress.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '../settings/colors';
-
-$LINEAR_ANIMATION_TIME: 2.5s;
-
-@keyframes hold-visibility {
-  from { visibility: visible; }
-  to   { visibility: visible; }
-}
-
-@keyframes loading-progress-before {
-  from { transform: translate(-50%); }
-  to   { transform: translate(100vw) translate(-50%); }
-}
-
-.w-loading-progress {
-  background: $WEB_SECONDARY_COLOR;
-  display: block !important;
-  height: 2px;
-  left: 0;
-  pointer-events: none;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transform: scaleY(1);
-  transform-origin: 50% 0%;
-  transition: transform $TRANSITION_SPEED ease;
-  transition-delay: 1s;  // show loading hint only after waiting this long
-  z-index: 250;  // below SideNav and Snackbar
-
-  // Shows a white "flurry" on top of the loading indicator.
-  &::before {
-    animation: loading-progress-before 2s infinite alternate-reverse ease-in-out;
-    background: linear-gradient(to left, #fff0, #ffff, #fff0);
-    bottom: 0;
-    content: '';
-    left: 0;
-    min-width: 320px;
-    position: absolute;
-    top: 0;
-    width: 50vw;
-  }
-
-  &[hidden] {
-    animation: hold-visibility $TRANSITION_SPEED;
-    display: block !important;  // keep visible despite other overrides
-    transform: scaleY(0);
-    visibility: hidden;
-  }
-}
diff --git a/src/styles/components/_self-assessment-hint.scss b/src/styles/components/_self-assessment-hint.scss
deleted file mode 100644
index e4892943047..00000000000
--- a/src/styles/components/_self-assessment-hint.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../settings/type';
-@import '../tools/mixins';
-
-$CHEVRON_SIZE: 24px;
-$CHEVRON_MARGIN: 12px;
-$BORDER_COLOR: $GREY_300;
-
-.w-self-assessment-hint {
-  border-top: 1px solid #dadce0;
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  position: relative;
-}
-
-.w-self-assessment-hint__summary {
-  -webkit-tap-highlight-color: transparent;
-  color: $SUCCESS_COLOR;
-  cursor: $CURSOR_POINTER_VALUE;
-  flex-grow: 1;
-  font: inherit;
-  font-weight: 500;
-  list-style: none;
-  padding: 1.125em #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 4px} 1.125em 0;
-  position: relative;
-
-  // scss-lint thinks this is a pseudo class instead of a psuedo element
-  // and complains about the two colons.
-  // scss-lint:disable all
-  &::-webkit-details-marker {
-    display: none;
-  }
-  // scss-lint:enable all
-
-  &:focus {
-    outline: none;
-  }
-
-  &::after {
-    @include font-material-icon();
-    border-radius: $GLOBAL_ROUNDED;
-    content: 'expand_more';
-    cursor: $CURSOR_POINTER_VALUE;
-    font-size: $CHEVRON_SIZE;
-    padding: 2px;
-    position: absolute;
-    right: 1px;
-    speak: none;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: background $TRANSITION_SPEED;
-    visibility: visible;
-  }
-
-  @include bp(xsm) {
-    & {
-      padding: 1.125em #{$CHEVRON_SIZE + $CHEVRON_MARGIN + 12px} 1.125em 0;
-    }
-
-    &::after {
-      padding: .25em;
-    }
-  }
-
-  @include hover() {
-    &:hover::after,
-    &:focus::after {
-      background: $GREEN_50;
-    }
-  }
-
-  &:focus::after {
-    box-shadow: 0 0 0 1px $FOCUS_COLOR;
-  }
-
-  .js-focus-visible &:focus:not(.focus-visible)::after { // sass-lint:disable-line class-name-format
-    box-shadow: none;
-  }
-
-  &:active::after {
-    background: $GREEN_100;
-  }
-}
-
-.w-self-assessment-hint[open] .w-self-assessment-hint__summary::after {
-  transform: rotate(180deg) translateY(50%);
-}
-
-.w-self-assessment-hint__panel {
-  background: $GREEN_50;
-  padding: 18px;
-
-  & p {
-    font-size: 1em;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
diff --git a/src/styles/components/_stack.scss b/src/styles/components/_stack.scss
deleted file mode 100644
index 161ca5e012e..00000000000
--- a/src/styles/components/_stack.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../tools/breakpoints';
-
-// =============================================================================
-// STACK OVERVIEW
-//
-// Stacks can be used to display a set of elements as either a single row
-// (when space allows) or as a single column.
-// =============================================================================
-
-.w-stack {
-  display: flex;
-  flex-direction: column;
-}
-
-.w-stack--center {
-  justify-content: center;
-}
-
-.w-stack--center > * {
-  align-self: center;
-}
-
-.w-stack--sm {
-  @include bp(sm) {
-    flex-direction: row;
-  }
-}
-
-.w-stack--md {
-  @include bp(md) {
-    flex-direction: row;
-  }
-}
-
-.w-stack--lg {
-  @include bp(md) {
-    flex-direction: row;
-  }
-}
diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss
deleted file mode 100644
index 4c685c12200..00000000000
--- a/src/styles/components/_stats.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import '../settings/type';
-@import '../tools/breakpoints';
-
-// =============================================================================
-// STATS OVERVIEW
-//
-// Stats are big text blocks meant to catch the eye in a case study.
-// e.g. '4x Faster load times.'
-//
-// Stats are laid out in a fullbleed grid.
-//
-// =============================================================================
-
-.w-stats {
-  background-color: rgba(230, 250, 240, .2);
-  border: 1px solid #0cce6b;
-  color: #018642;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin: 32px -32px;
-  padding: 64px 32px;
-  text-align: center;
-
-  @include bp(sm) {
-    flex-direction: row;
-  }
-}
-
-.w-stat {
-  margin-bottom: 32px;
-
-  @include bp(sm) {
-    flex: 1;
-    margin: 0 8px;
-  }
-}
-
-.w-stat:last-of-type {
-  margin-bottom: 0;
-}
-
-.w-stat__figure,
-.w-stat__desc {
-  color: inherit;
-  font-family: $HEADLINE_FONT;
-  margin: 0;
-  text-align: inherit;
-}
-
-.w-stat__figure {
-  font-size: 1.5em;
-  line-height: 1em;
-
-  @include bp(xxsm) {
-    font-size: 4em;
-  }
-
-  @include bp(md) {
-    font-size: 6em;
-  }
-}
-
-.w-stat__sup,
-.w-stat__sub {
-  font-size: .5em;
-  line-height: 1em;
-}
-
-.w-stat__sub {
-  vertical-align: baseline;
-}
-
-.w-stat__desc {
-  line-height: 1.5em;
-}
diff --git a/src/styles/components/_subscribe.scss b/src/styles/components/_subscribe.scss
deleted file mode 100644
index d2791c41b13..00000000000
--- a/src/styles/components/_subscribe.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-web-subscribe:not(:defined) {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.w-subscribe {
-  margin: 0 auto;
-  max-width: 720px;
-  width: 100%;
-}
-
-.w-subscribe--padded {
-  max-width: 540px;
-}
-
-.w-subscribe__button {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 36px;
-}
-
-.w-subscribe__error {
-  color: $WARNING_COLOR;
-}
-
-.w-subscribe__field {
-  display: flex;
-  margin-top: 8px;
-  width: 100%;
-}
-
-.w-subscribe__select {
-  padding: 14px 8px;
-}
-
-.w-subscribe__notice {
-  color: $GREY_700;
-  font: inherit;
-  font-size: 14px;
-  margin-bottom: 56px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 8px;
-}
-
-@include bp(sm) {
-  .w-subscribe__fields {
-    display: flex;
-    justify-content: space-between;
-
-    .w-subscribe__field {
-      width: calc(50% - 4px);
-    }
-  }
-}
diff --git a/src/styles/components/_tooltips.scss b/src/styles/components/_tooltips.scss
deleted file mode 100644
index f117b6207c4..00000000000
--- a/src/styles/components/_tooltips.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@mixin tooltip-visible() {
-  opacity: .77;
-  transform: scale(1) translateX(-50%);
-  transition: opacity .15s .3s, transform .15s .3s, visibility 0s;
-  visibility: visible;
-}
-
-.w-tooltip {
-  background: $BLACK;
-  border-radius: $GLOBAL_RADIUS;
-  color: $WHITE;
-  font: 500 12px / 1 $PRIMARY_FONT;
-  left: 50%;
-  letter-spacing: .3px;
-  opacity: 0;
-  padding: 6px 8px;
-  pointer-events: none;
-  position: absolute;
-  text-transform: none;
-  top: calc(100% + 3px);
-  transform: scale(.85) translateX(-50%);
-  transform-origin: top left;
-  transition: opacity 75ms, transform 0s 75ms, visibility 0s 75ms;
-  visibility: hidden;
-  white-space: nowrap;
-  z-index: 1;
-}
-
-.w-tooltip--left {
-  left: 0;
-  transform: scale(.85);
-}
-
-.w-tooltip--right {
-  left: 100%;
-  transform: translateX(-100%) scale(.85);
-  transform-origin: top right;
-}
-
-// Prevent tooltip from sticking after press on touch devices
-@include hover() {
-  :hover > .w-tooltip {
-    @include tooltip-visible();
-  }
-
-  :hover > .w-tooltip--left {
-    transform: scale(1);
-  }
-
-  :hover > .w-tooltip--right {
-    transform: translateX(-100%) scale(1);
-  }
-}
-
-:active > .w-tooltip,
-:focus .w-tooltip { // Need descendent combinator for focus to accommodate details widget
-  @include tooltip-visible();
-}
-
-// Longer delay for :active to show tooltip on long press for touch devices
-:active > .w-tooltip {
-  transition: opacity .15s .5s, transform .15s .5s, visibility 0s;
-}
-
-:active > .w-tooltip--left,
-:focus .w-tooltip--left {
-  transform: scale(1);
-}
-
-:active > .w-tooltip--right,
-:focus .w-tooltip--right {
-  transform: translateX(-100%) scale(1);
-}
-
-// sass-lint:disable-block class-name-format
-.js-focus-visible :focus:not(.focus-visible) .w-tooltip {
-  opacity: 0;
-  visibility: hidden;
-}
diff --git a/src/styles/components/_topic.scss b/src/styles/components/_topic.scss
deleted file mode 100644
index 7db76527805..00000000000
--- a/src/styles/components/_topic.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-@import '../settings/colors';
-
-// =============================================================================
-// TOPIC OVERVIEW
-//
-// Topics are the sections of a collection and can be broken into subtopics.
-//
-// =============================================================================
-
-$TOPIC_SPACING_SIZE_LARGE: 48px;
-$TOPIC_SPACING_SIZE_MEDIUM: 40px;
-$TOPIC_SPACING_SIZE_SMALL: 32px;
-
-.w-topic {
-  border-bottom: 1px solid $WEB_PRIMARY_COLOR;
-}
-
-.w-topic__header {
-  color: $WEB_PRIMARY_COLOR;
-  margin-left: $TOPIC_SPACING_SIZE_SMALL;
-  overflow: visible;
-
-  @include bp(sm) {
-    margin-left: $TOPIC_SPACING_SIZE_LARGE;
-  }
-
-  &:focus,
-  &:hover {
-    a {
-      color: $WEB_PRIMARY_COLOR;
-    }
-  }
-}
-
-.w-topic > .w-topic__subtopic-header {
-  color: $PRIMARY_TEXT_COLOR;
-  margin-left: $TOPIC_SPACING_SIZE_SMALL;
-  overflow: visible;
-
-  @include bp(sm) {
-    margin-left: $TOPIC_SPACING_SIZE_LARGE;
-  }
-
-  &:focus,
-  &:hover {
-    a {
-      color: $PRIMARY_TEXT_COLOR;
-    }
-  }
-}
diff --git a/src/styles/components/_type.scss b/src/styles/components/_type.scss
deleted file mode 100644
index 3d98cfc7cdf..00000000000
--- a/src/styles/components/_type.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/mixins';
-
-// =============================================================================
-// TYPOGRAPHY OVERVIEW
-//
-// Styles for generalized typographical elements.
-// The margins assigned to headlines is a little funky.
-// For article pages, our headlines are generated by markdown which just outputs
-// h1-h6 elements. So our default sizes and margins for h1-h6 extend those
-// headline classes.
-//
-// =============================================================================
-
-.w-headline {
-  @include w-headline();
-
-  &--one {
-    @include w-headline--one();
-  }
-
-  &--two {
-    @include w-headline--two();
-  }
-
-  &--two-small {
-    @include w-headline--two-small();
-  }
-
-  &--two-faded {
-    @include w-headline--two-faded();
-  }
-
-  &--three {
-    @include w-headline--three();
-  }
-
-  &--four {
-    @include w-headline--four();
-  }
-}
-
-// The permalink nested instead of h2-h6 elements.
-.w-headline-link {
-  color: transparent;
-  display: none;
-  font-weight: $FONT_WEIGHT_MEDIUM;
-  margin-left: 4px;
-
-  @include bp(sm) {
-    display: inline;
-  }
-}
-
-// Note that this element will appear inside of markdown headings which
-// don't have a class (though they do include the w-headline mixins).
-// Because of this we use :hover to target it instead of .w-headline:hover.
-:hover > .w-headline-link,
-.w-headline-link:focus {
-  color: $GREY_700;
-  display: inline;
-}
-
-.w-eyebrow {
-  @include font($EYEBROW);
-}
diff --git a/src/styles/components/_youtube.scss b/src/styles/components/_youtube.scss
deleted file mode 100644
index 3ed3460d8a9..00000000000
--- a/src/styles/components/_youtube.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// =============================================================================
-// YOUTUBE OVERVIEW
-//
-// Styles for a responsive YouTube video embed.
-//
-// =============================================================================
-
-.w-youtube {
-  padding-top: 56.25%;
-  position: relative;
-  width: 100%;
-}
-
-.w-youtube__embed {
-  height: 100%;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-}
diff --git a/src/styles/generic/_all.scss b/src/styles/generic/_all.scss
deleted file mode 100644
index b7656088300..00000000000
--- a/src/styles/generic/_all.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import 'shared';
-@import 'blockquote';
-@import 'page';
-@import 'type';
-@import 'main';
-@import 'images';
-@import 'input';
-@import 'links';
-@import 'lists';
-@import 'forms';
-@import 'select';
-@import 'tables';
-@import 'code';
-@import 'rule';
-@import 'video';
diff --git a/src/styles/generic/_blockquote.scss b/src/styles/generic/_blockquote.scss
deleted file mode 100644
index 7522c4cf6d9..00000000000
--- a/src/styles/generic/_blockquote.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../tools/mixins';
-
-// =============================================================================
-// BLOCKQUOTE OVERVIEW
-//
-// A large callout quote. For an optional citation field use pattern:
-// <blockquote>
-//  <p>Some quote</p>
-//  <cite>Source</cite>
-// </blockquote>
-//
-// =============================================================================
-
-blockquote {
-  @include w-article-text();
-  margin: 32px 0;
-  padding-left: 48px;
-
-  p {
-    font: inherit;
-    margin: 0 0 18px;
-  }
-
-  cite {
-    font-size: 14px;
-    font-style: normal;
-    line-height: 21px;
-    margin: 0;
-    text-align: left;
-  }
-}
-
-blockquote::before {
-  @include font-material-icon();
-  content: 'format_quote';
-  float: left;
-  margin: 4px 0 0 -48px;
-  transform: scaleX(-1);
-}
diff --git a/src/styles/generic/_code.scss b/src/styles/generic/_code.scss
deleted file mode 100644
index ce9a60364e7..00000000000
--- a/src/styles/generic/_code.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-@import '../tools/mixins';
-
-// =============================================================================
-// CODE OVERVIEW
-//
-// Code can be inline or in code blocks.
-// When it's inline, code snippets have a background and border.
-// When it's in a code block, code gets syntax highlighting.
-// Because code snippets can appear inside many elements, their sizes are all
-// relative to their parent using em units.
-//
-// =============================================================================
-
-// TODO (robdodson): Need to revsit this color palette.
-$CODE_COLORS: (
-  blue: #183691,
-  bright-blue: #007aa2,
-  black: $PRIMARY_TEXT_COLOR,
-  purple: #a71d5d,
-  maroon: #a71d5d,
-  green: #63a35c,
-  light-gray: #f7f7f7,
-  dimgrey: #696969
-);
-
-code {
-  margin: 0 .25em;
-  padding: .125em .25em;
-}
-
-code,
-pre {
-  background: map-get($CODE_COLORS, light-gray);
-  border: 1px solid $GREY_300;
-  color: map-get($CODE_COLORS, black);
-  font: 1rem / 1.5em $CODE_FONT;
-  hyphens: none;
-  tab-size: 2;
-  text-align: left;
-  word-spacing: normal;
-}
-
-// Let inline code elements wrap
-:not(pre) > code {
-  white-space: pre-wrap;
-}
-
-// Code block
-pre,
-pre[class*='language-'] {
-  @include scrollbars();
-  margin: 32px 0;
-  overflow: auto;
-  padding: 16px;
-  white-space: pre;
-}
-
-pre code,
-pre[class*='language-'] code {
-  font-size: 1em;
-  line-height: 1.5em;
-  margin: 0;
-  padding: 0;
-}
-
-pre code {
-  background: transparent;
-  border: 0;
-}
-
-// It's not uncommon to have code in markdown headings.
-// In these cases we should remove the border.
-h1 code,
-h2 code,
-h3 code,
-h4 code,
-h5 code,
-h6 code {
-  background: transparent;
-  border: 0;
-  color: inherit;
-  font-size: inherit;
-  margin: 0;
-  padding: 0;
-  white-space: normal;
-}
-
-// Figcaptions and citations are smaller than body text,
-// so code should be based on their font size.
-figcaption code,
-cite code {
-  font-size: .9em;
-}
-
-// Github-like theme for Prism.js
-// @author Luke Askew http://github.com/lukeaskew
-
-// Token colors
-// These classes are generated by prism so they don't follow
-// our class name format.
-// sass-lint:disable class-name-format
-.token {
-  &.comment,
-  &.prolog,
-  &.doctype,
-  &.cdata {
-    color: map-get($CODE_COLORS, dimgrey);
-  }
-
-  &.punctuation,
-  &.string,
-  &.atrule,
-  &.attr-value {
-    color: map-get($CODE_COLORS, blue);
-  }
-
-  &.property,
-  &.tag {
-    color: map-get($CODE_COLORS, green);
-  }
-
-  &.boolean,
-  &.number {
-    color: map-get($CODE_COLORS, bright-blue);
-  }
-
-  &.selector,
-  &.attr-name,
-  &.attr-value .punctuation:first-child,
-  &.keyword,
-  &.regex,
-  &.important {
-    color: map-get($CODE_COLORS, maroon);
-  }
-
-
-  &.operator,
-  &.entity,
-  &.url,
-  .language-css &.string {
-    color: map-get($CODE_COLORS, purple);
-  }
-
-  &.entity {
-    cursor: help;
-  }
-
-}
-
-.namespace {
-  opacity: .7;
-}
-
-
-.highlight-line-active,
-.highlight-line-add,
-.highlight-line-active *,
-.highlight-line-add * {
-  color: $PRIMARY_TEXT_COLOR !important;
-  font-weight: $FONT_WEIGHT_MEDIUM;
-}
-
-.highlight-line-active {
-  background-color: $YELLOW_200;
-}
-
-.highlight-line-add {
-  background-color: $GREEN_200;
-  text-decoration: none;
-}
-
-.highlight-line-remove,
-.highlight-line-remove * {
-  color: rgba($PRIMARY_TEXT_COLOR, .6) !important;
-}
-
-.highlight-line-remove {
-  background-color: $RED_200;
-  text-decoration-color: rgba($PRIMARY_TEXT_COLOR, .6);
-}
-
-// sass-lint:enable class-name-format
diff --git a/src/styles/generic/_forms.scss b/src/styles/generic/_forms.scss
deleted file mode 100644
index b03e3368859..00000000000
--- a/src/styles/generic/_forms.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// =============================================================================
-// FORMS OVERVIEW
-//
-// Form element styles.
-//
-// =============================================================================
-
-// Make sure textarea takes on height automatically
-textarea {
-  height: auto;
-  min-height: 50px;
-}
diff --git a/src/styles/generic/_images.scss b/src/styles/generic/_images.scss
deleted file mode 100644
index 8c0e1b718ff..00000000000
--- a/src/styles/generic/_images.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// =============================================================================
-// IMAGES OVERVIEW
-//
-// Basic image styles.
-//
-// =============================================================================
-
-// Get rid of gap under images by making them display: inline-block; by default
-img {
-  -ms-interpolation-mode: bicubic;
-  display: inline-block;
-  height: auto;
-  max-width: 100%;
-  vertical-align: middle;
-}
diff --git a/src/styles/generic/_input.scss b/src/styles/generic/_input.scss
deleted file mode 100644
index b2ee2bd76fc..00000000000
--- a/src/styles/generic/_input.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../settings/colors';
-
-input[type='email'],
-input[type='password'],
-input[type='text'] {
-  border: 1px solid $GREY_300;
-  font: inherit;
-  font-size: inherit;
-  padding: 14px 8px;
-  width: 100%;
-
-  &:focus {
-    border-color: $WEB_PRIMARY_COLOR;
-    outline: none;
-  }
-}
-
-
-input[type='radio'] {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  border: 2px solid $GREY_300;
-  border-radius: 50%;
-  cursor: pointer;
-  flex-shrink: 0;
-  height: 24px;
-  margin: 2px;
-  width: 24px;
-
-  &:checked {
-    background-clip: content-box;
-    background-color: $WEB_PRIMARY_COLOR;
-    border: 2px solid $WEB_PRIMARY_COLOR;
-    padding: 4px;
-  }
-}
diff --git a/src/styles/generic/_links.scss b/src/styles/generic/_links.scss
deleted file mode 100644
index ff52f15bb36..00000000000
--- a/src/styles/generic/_links.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../settings/colors';
-
-// =============================================================================
-// LINKS OVERVIEW
-//
-// Anchor link styles. Note the use of :link/:visited throughout. DevSite uses
-// these and we need to override them.
-//
-// =============================================================================
-
-// DevSite override
-// The use of :link and :visited throughout is because DevSite styles those
-// generic selectors.
-a,
-:link,
-:visited {
-  color: $LINK_COLOR;
-  text-decoration: none;
-
-  &:focus,
-  &:active,
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:focus,
-  &:active {
-    outline: 1px solid $FOCUS_COLOR;
-  }
-}
-
-.w-post-content,
-.web-codelab__instructions {
-  a,
-  :link,
-  :visited {
-    text-decoration: underline;
-
-    &:focus,
-    &:active,
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-// For links inside of generic paragraphs (likely generated by markdown)
-// we can give them a consistent active style.
-// Otherwise let components handle their active states.
-p a:active,
-p :link:active,
-p :visited:active {
-  background-color: rgba($FOCUS_COLOR, .16);
-}
-
-// DevSite override
-a code,
-td a code {
-  color: $LINK_COLOR;
-}
diff --git a/src/styles/generic/_lists.scss b/src/styles/generic/_lists.scss
deleted file mode 100644
index 5bbe7d15119..00000000000
--- a/src/styles/generic/_lists.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-@import '../settings/global';
-
-// =============================================================================
-// LISTS OVERVIEW
-//
-// Ordered and unordered list styles.
-// These styles should only apply to lists without a class on them.
-// It assumes these lists are coming from markdown.
-//
-// =============================================================================
-
-ol:not([class]) {
-  counter-reset: ol-step-counter;
-  list-style: none;
-  margin: 32px 0;
-  padding-left: 48px;
-  position: relative;
-}
-
-ol:not([class]) > li {
-  counter-increment: ol-step-counter;
-  font-size: 1.125rem;
-  line-height: 1.778rem;
-  margin-bottom: 8px;
-}
-
-ol:not([class]) > li::before {
-  -ms-flex-align: center;
-  -ms-flex-negative: 0;
-  -ms-flex-pack: center;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-  align-items: center;
-  background: $GREY_700;
-  border-radius: $GLOBAL_ROUNDED;
-  color: $WHITE;
-  content: counter(ol-step-counter);
-  display: -ms-inline-flexbox;
-  display: -webkit-inline-box;
-  display: inline-flex;
-  flex-shrink: 0;
-  font-size: .75em;
-  height: 20px;
-  justify-content: center;
-  left: 0;
-  margin: 6px 0 0;
-  position: absolute;
-  width: 20px;
-}
-
-ul:not([class]) {
-  list-style: none;
-  margin: 32px 0;
-  padding-left: 48px;
-  position: relative;
-}
-
-ul:not([class]) > li {
-  font-size: 1.125rem;
-  line-height: 1.778rem;
-  margin-bottom: 8px;
-}
-
-ul:not([class]) > li::before {
-  background: $GREY_700;
-  border-radius: $GLOBAL_ROUNDED;
-  color: $WHITE;
-  content: '';
-  height: 8px;
-  left: 0;
-  margin: 12px 0 0;
-  position: absolute;
-  width: 8px;
-}
-
-ul:not([class]) > li > p,
-ol:not([class]) > li > p {
-  margin: 8px 0;
-}
-
-ul:not([class]) > li > p:first-child,
-ol:not([class]) > li > p:first-child {
-  margin-top: 0;
-}
-
-ul:not([class]) > li > p:last-child,
-ol:not([class]) > li > p:last-child {
-  margin-bottom: 0;
-}
-
-li > ul:not([class]),
-li > ol:not([class]) {
-  margin: 8px 0;
-}
-
-.w-unstyled-list {
-  list-style: none;
-}
-
-// Definition lists
-dd {
-  margin-bottom: 16px;
-}
diff --git a/src/styles/generic/_main.scss b/src/styles/generic/_main.scss
deleted file mode 100644
index 79558fd5ef7..00000000000
--- a/src/styles/generic/_main.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// =============================================================================
-// MAIN OVERVIEW
-//
-// Styles for the main element. As part of our app shell model, we inject new
-// content into the main element.
-//
-// =============================================================================
-
-main {
-  margin-top: 64px;
-  padding-bottom: 64px;
-}
diff --git a/src/styles/generic/_page.scss b/src/styles/generic/_page.scss
deleted file mode 100644
index af5ea403cde..00000000000
--- a/src/styles/generic/_page.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/mixins';
-
-// =============================================================================
-// PAGE OVERVIEW
-//
-// Styles for page elements, such as the html and body tags.
-//
-// =============================================================================
-
-// Default body styles
-html,
-body {
-  @include w-body-text();
-  @include font_smoothing(
-    $FONT_SMOOTHING_MOZ,
-    $FONT_SMOOTHING_WEBKIT,
-    $FONT_SMOOTHING_RENDERING
-  );
-  margin: 0;
-  overflow-wrap: break-word;
-  // nb. Don't set `overflow-x: hidden`, as this can break descendant sticky.
-  padding: 0;
-  word-wrap: break-word;
-}
diff --git a/src/styles/generic/_rule.scss b/src/styles/generic/_rule.scss
deleted file mode 100644
index 0b0880f4d76..00000000000
--- a/src/styles/generic/_rule.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '../settings/colors';
-
-hr {
-  background: $GREY_300;
-  border: 0;
-  height: 1px;
-  margin: 0;
-  width: 100%;
-}
diff --git a/src/styles/generic/_select.scss b/src/styles/generic/_select.scss
deleted file mode 100644
index e1e9bbb35d0..00000000000
--- a/src/styles/generic/_select.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import '../settings/colors';
-
-// Select styles based on this amazing article by Scott Jehl
-// https://www.filamentgroup.com/lab/select-css.html
-
-select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: $WHITE;
-  // Use an escaped svg to add a small grey arrow to the end of the select
-  // sass-lint:disable quotes
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10H7Z' fill='%235F6368'/%3E%3C/svg%3E%0A");
-  background-position: right .5em top 50%;
-  background-repeat: no-repeat;
-  // Set the width of the arrow background image and let the height default to auto
-  background-size: 1.5em;
-  border-radius: 1px;
-  border: 1px solid $GREY_300;
-  box-sizing: border-box;
-  color: inherit;
-  display: block;
-  font-family: inherit;
-  font-size: 1em;
-  line-height: 1.5;
-  margin: 0;
-  max-width: 100%;
-  padding: .6em 3em .5em .8em;
-}
-
-select::-ms-expand {
-  display: none;
-}
-
-// This will remove the dotted outline inside of the select when it is focused
-// in Firefox.
-// The trick is to make the text transparent (which makes the dotted outline
-// transparent) and then "display" the text again using a 0 offset text-shadow.
-// Note that this forces the text to be black when it is focused in Firefox.
-// To change that color, change the value of the text-shadow.
-select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #000;
-}
-
-select:hover {
-  border-color: $GREY_500;
-}
-
-select option {
-  font-weight: normal;
-}
-
-.w-select--borderless {
-  border-color:  transparent;
-
-  &:hover {
-    border-color: transparent;
-    background-color: $GREY_100;
-  }
-}
-
-.w-select--full-width {
-  width: 100%;
-}
diff --git a/src/styles/generic/_shared.scss b/src/styles/generic/_shared.scss
deleted file mode 100644
index 9e65d9c5006..00000000000
--- a/src/styles/generic/_shared.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@import '../settings/colors';
-@import '../settings/dimensions';
-
-// =============================================================================
-// SHARED OVERVIEW
-//
-// Shared properties across multiple html tags.
-//
-// =============================================================================
-
-// Set box-sizing globally to handle padding and border widths
-*,
-*::before,
-*::after {
-  -moz-box-sizing: border-box; // Firefox < 29
-  -webkit-box-sizing: border-box; // Android < 2.3, iOS < 4
-  box-sizing: border-box; // Chrome, IE 8+, Opera, Safari 5.1
-}
-
-*:focus {
-  outline: 1px solid $FOCUS_COLOR;
-}
-
-// Used when forcing focus cursor at a particular location on the page.
-.w-force-focus {
-  outline: none !important;
-}
-
-// This will hide the focus indicator if the element receives focus via the
-// mouse, but it will still show up on keyboard focus.
-.js-focus-visible :focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  outline: none;
-}
-
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-pre,
-form,
-blockquote,
-th,
-td {
-  margin: 0;
-  padding: 0;
-}
-
-// https://github.com/typeplate/starter-kit/blob/master/scss/_typeplate-styles.scss#L58
-input,
-abbr,
-acronym,
-blockquote,
-code,
-kbd,
-q,
-samp,
-var {
-  -moz-hyphens: none;
-  -webkit-hyphens: none;
-  hyphens: none;
-}
-
-html {
-  scroll-padding-top: calc(#{$WEB_HEADER_HEIGHT} + 1.5rem);
-}
-
-// Fallback if scroll-padding-top is not supported
-*:not([href])[id]::before {
-  content: ' ';
-  display: block;
-  height: calc(#{$WEB_HEADER_HEIGHT} + 1.5rem);
-  margin-top: calc(-#{$WEB_HEADER_HEIGHT} - 1.5rem);
-  pointer-events: none;
-  visibility: hidden;
-}
diff --git a/src/styles/generic/_tables.scss b/src/styles/generic/_tables.scss
deleted file mode 100644
index baac16fcc9c..00000000000
--- a/src/styles/generic/_tables.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-
-// =============================================================================
-// TABLES OVERVIEW
-//
-// Styles for tabular data.
-// Keep in mind that if you just want to lay something out in a grid fashion,
-// for accessibility reasons a table may not be the right choice.
-// These styles should really only be used for data tables.
-//
-// =============================================================================
-
-.w-table-wrapper {
-  margin: 32px 0;
-  overflow: auto;
-}
-
-.w-table-wrapper::-webkit-scrollbar {
-  height: 6px;
-}
-
-.w-table-wrapper::-webkit-scrollbar-thumb {
-  background-color: $GREY_500;
-  border-radius: 8px;
-}
-
-table {
-  border-collapse: collapse;
-  font-size: inherit; // DevSite override
-  margin: 0;
-  min-width: 512px;
-  width: 100%;
-}
-
-tr {
-  background: transparent; // DevSite override
-  border-bottom: 1px solid #dadce0;
-  border-top: 0;
-  height: 48px;
-}
-
-tr:last-of-type {
-  border-bottom: 0;
-}
-
-th,
-td {
-  color: inherit;
-  min-width: 120px; // Prevent narrow columns when you have th's like 'JS'
-  text-align: left;
-}
-
-th {
-  font-family: $HEADLINE_FONT;
-  font-size: .875em;
-  font-weight: 500;
-  line-height: 24px;
-  padding-right: 24px;
-  vertical-align: middle;
-}
-
-td {
-  line-height: 1.5;
-  padding: 16px 24px 16px 0;
-}
-
-.w-table--top-align td {
-  vertical-align: top;
-}
-
-caption {
-  background: transparent; // DevSite override
-  caption-side: bottom;
-  font-size: .875em;
-  font-weight: normal; // DevSite override
-  line-height: 1.5em;
-  margin: 24px 0 0;
-  padding: 0; // DevSite override
-  text-align: left;
-}
-
-table code {
-  background: transparent;
-  border: 0;
-  font-size: .9em; // DevSite override
-  font-weight: 400; // DevSite override
-  line-height: 1.7em; // DevSite override
-  margin: 0;
-  padding: 0;
-}
-
-table ul:not([class]),
-table ol:not([class]) {
-  margin: 24px 0;
-  padding-left: 40px;
-}
-
-table ul:not([class]):first-child,
-table ol:not([class]):first-child {
-  margin-top: 0;
-}
-
-table ul:not([class]):last-child,
-table ol:not([class]):last-child {
-  margin-bottom: 0;
-}
-
-table ul:not([class]) li,
-table ol:not([class]) li {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-table ul:not([class]) li::before {
-  margin: 8px 0 0;
-}
-
-table ol:not([class]) li::before {
-  margin: 2px 0 0;
-}
-
-td > :last-child > li:last-child {
-  margin-bottom: 0;
-}
diff --git a/src/styles/generic/_type.scss b/src/styles/generic/_type.scss
deleted file mode 100644
index 675f022d14a..00000000000
--- a/src/styles/generic/_type.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../settings/type';
-@import '../tools/mixins';
-
-// =============================================================================
-// TYPE OVERVIEW
-//
-// Generic type styles.
-//
-// =============================================================================
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include w-headline();
-}
-
-h1 {
-  @include w-headline--one();
-}
-
-h2 {
-  @include w-headline--two-small();
-}
-
-h3 {
-  @include w-headline--three();
-}
-
-h4 {
-  @include w-headline--four();
-}
-
-p {
-  @include w-article-text();
-}
-
-// If an element is coming after a heading,
-// let the heading create a consistent margin.
-h1 + *,
-h1 + [class],
-h2 + *,
-h2 + [class],
-h3 + *,
-h3 + [class],
-h4 + *,
-h4 + [class],
-h5 + *,
-h5 + [class],
-h6 + *,
-h6 + [class] {
-  margin-top: 0;
-}
-
-abbr,
-acronym {
-  border-bottom: 1px dotted $GREY_600;
-  cursor: $CURSOR_HELP_VALUE;
-  font-size: 90%;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-abbr {
-  text-transform: none;
-}
-
-address,
-cite,
-dfn,
-em {
-  font-style: italic;
-}
-
-strong {
-  font-weight: $FONT_WEIGHT_MEDIUM;
-}
-
-
-// sass-lint:disable class-name-format
-.devsite-article h1:first-of-type {
-  position: static; // DevSite override
-}
-
-devsite-content-footer p {
-  font-size: 12px; // DevSite override
-  line-height: 1.5; // DevSite override
-  padding-top: 72px; // DevSite override
-}
diff --git a/src/styles/generic/_video.scss b/src/styles/generic/_video.scss
deleted file mode 100644
index 6f8ac6a1fc0..00000000000
--- a/src/styles/generic/_video.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-video {
-  max-width: 100%;
-}
diff --git a/src/styles/overrides/_alignment.scss b/src/styles/overrides/_alignment.scss
deleted file mode 100644
index 605f5299ed0..00000000000
--- a/src/styles/overrides/_alignment.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// =============================================================================
-// ALIGNMENT OVERVIEW
-//
-// Overrides for vertical and text alignment
-//
-// =============================================================================
-
-.w-text--left {
-  text-align: left !important;
-
-  [dir='rtl'] & {
-    text-align: right !important;
-  }
-}
-
-.w-text--right {
-  text-align: right !important;
-
-  [dir='rtl'] & {
-    text-align: left !important;
-  }
-}
-
-.w-text--center {
-  text-align: center !important;
-}
-
-.w-text--justify {
-  text-align: justify !important;
-}
diff --git a/src/styles/overrides/_all.scss b/src/styles/overrides/_all.scss
deleted file mode 100644
index e0d2c69ee39..00000000000
--- a/src/styles/overrides/_all.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'alignment';
-@import 'clearfix';
-@import 'display';
-@import 'font';
-@import 'spacing';
-@import 'hidden';
-@import 'unresolved';
diff --git a/src/styles/overrides/_clearfix.scss b/src/styles/overrides/_clearfix.scss
deleted file mode 100644
index 5eb639aec89..00000000000
--- a/src/styles/overrides/_clearfix.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.w-clearfix::before {
-  clear: both;
-  content: '';
-  display: block;
-}
-
-.w-clearfix::after {
-  clear: both;
-  content: '';
-  display: block;
-}
diff --git a/src/styles/overrides/_display.scss b/src/styles/overrides/_display.scss
deleted file mode 100644
index 9f55d07c11b..00000000000
--- a/src/styles/overrides/_display.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.w-display--flex {
-  display: flex;
-}
-
-.w-display--inline-flex {
-  display: inline-flex;
-}
-
-.w-flex--row {
-  flex-direction: row;
-}
-
-.w-flex--column {
-  flex-direction: column;
-}
-
-.w-align-items--center {
-  align-items: center;
-}
-
-.w-justify-content--center {
-  justify-content: center;
-}
-
diff --git a/src/styles/overrides/_font.scss b/src/styles/overrides/_font.scss
deleted file mode 100644
index 3767fee1224..00000000000
--- a/src/styles/overrides/_font.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-
-// =============================================================================
-// FONT OVERVIEW
-//
-// Overrides for font settings (weight, etc)
-//
-// =============================================================================
-
-.w-font-weight--light { font-weight: $FONT_WEIGHT_LIGHT; }
-.w-font-weight--regular { font-weight: $FONT_WEIGHT_REGULAR; }
-.w-font-weight--medium { font-weight: $FONT_WEIGHT_MEDIUM; }
-.w-font-weight--bold { font-weight: $FONT_WEIGHT_BOLD; }
-
-.w-font--reversed { color: $WHITE; }
diff --git a/src/styles/overrides/_hidden.scss b/src/styles/overrides/_hidden.scss
deleted file mode 100644
index 991e2c2f90b..00000000000
--- a/src/styles/overrides/_hidden.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// sass-lint:disable class-name-format
-*.hidden,
-*[hidden] {
-  display: none !important;
-}
diff --git a/src/styles/overrides/_spacing.scss b/src/styles/overrides/_spacing.scss
deleted file mode 100644
index 643c3dbaa6c..00000000000
--- a/src/styles/overrides/_spacing.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// =============================================================================
-// SPACING OVERVIEW
-//
-// Overrides for common margins and paddings.
-//
-// =============================================================================
-
-$MARGIN_POSITION_MAP: (
-  mb: margin-bottom,
-  mt: margin-top,
-  ml: margin-left,
-  mr: margin-right,
-);
-
-$MARGIN_SIZE_MAP: (
-  non: 0,
-  sm: 8px,
-  std: 16px, // Standard margin
-  l: 32px,
-  xl: 56px,
-);
-
-// Loop through each margin setting and create a class with those settings.
-// For example, .w-mb--l is a large margin on the bottom.
-@each $SIZE_NAME, $SIZE_VALUE in $MARGIN_SIZE_MAP {
-  @each $MARGIN_ALIAS, $MARGIN_PROPERTY in $MARGIN_POSITION_MAP {
-    .w-#{$MARGIN_ALIAS}--#{$SIZE_NAME} {
-      #{$MARGIN_PROPERTY}: $SIZE_VALUE !important;
-    }
-  }
-}
-
-$PADDING_POSITION_MAP: (
-  pb: padding-bottom,
-  pt: padding-top,
-  pl: padding-left,
-  pr: padding-right,
-);
-
-$PADDING_SIZE_MAP: (
-  non: 0,
-  sm: 8px,
-  std: 16px, // Standard padding
-  l: 32px,
-  xl: 56px,
-);
-
-// Loop through each padding setting and create a class with those settings.
-// For example, .w-pb--l is a large padding on the bottom.
-@each $SIZE_NAME, $SIZE_VALUE in $PADDING_SIZE_MAP {
-  @each $PADDING_ALIAS, $PADDING_PROPERTY in $PADDING_POSITION_MAP {
-    .w-#{$PADDING_ALIAS}--#{$SIZE_NAME} {
-      #{$PADDING_PROPERTY}: $SIZE_VALUE !important;
-    }
-  }
-}
-
diff --git a/src/styles/overrides/_unresolved.scss b/src/styles/overrides/_unresolved.scss
deleted file mode 100644
index 2f99f809b59..00000000000
--- a/src/styles/overrides/_unresolved.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// =============================================================================
-// UNRESOLVED
-//
-// Specifies behavior for unresolved elements. This uses the "unresolved"
-// class as lit doesn't render for a frame after :defined is removed.
-//
-// =============================================================================
-// sass-lint:disable class-name-format
-
-// Elements marked with the unresolved class are hidden until the JS is first
-// loaded. Disable linter as it expects classes to only be ".w-...".
-*:not(body).unresolved {
-  display: none;
-}
-
-web-tabs.unresolved {
-  padding-top: 50px;
-  display: block;
-
-  > *:not(.w-tabs-default) {
-    display: none;
-  }
-}
-
-web-event-time.unresolved {
-  min-height: 120px;
-  display: block;
-}
-
-// sass-lint:enable class-name-format
diff --git a/src/styles/pages/_about.scss b/src/styles/pages/_about.scss
deleted file mode 100644
index e828fe4af67..00000000000
--- a/src/styles/pages/_about.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-.w-about-principles {
-  background-color: $GREY_50;
-  border-bottom: 1px solid $BORDER_COLOR;
-}
-
-// sass-lint:disable property-sort-order
-.w-grid-list {
-  @include w-article-text();
-  display: grid;
-  // sass-lint:disable-all
-  // scss-lint:disable all
-  column-gap: 16px;
-  grid-column-gap: 16px;
-  row-gap: 4px;
-  grid-row-gap: 4px;
-  // scss-lint:enable all
-  // sass-lint:enable-all
-  grid-template-columns: none;
-  grid-template-rows: 1fr 1fr;
-  list-style: none;
-
-  @include bp(md) {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: none;
-  }
-}
-// sass-lint:enable property-sort-order
-
-.w-grid-list__item {
-  padding-left: 24px;
-  position: relative;
-}
-
-.w-grid-list__item::before {
-  background: $GREY_700;
-  border-radius: $GLOBAL_ROUNDED;
-  color: $WHITE;
-  content: '';
-  height: 8px;
-  left: 0;
-  margin: 12px 0 0;
-  position: absolute;
-  width: 8px;
-}
-
-.w-about-video-wrapper {
-  width: 100%;
-
-  @include bp(md) {
-    float: right;
-    margin: 0 0 40px 40px;
-    width: calc((100% - 40px) / 2);
-  }
-}
-
-// sass-lint:disable property-sort-order
-.w-about-boxes {
-  display: grid;
-  // sass-lint:disable-all
-  // scss-lint:disable all
-  gap: 32px;
-  grid-gap: 32px;
-  // scss-lint:enable all
-  // sass-lint:enable-all
-  grid-template-rows: 1fr 1fr;
-  grid-template-columns: none;
-
-  @include bp(md) {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: none;
-  }
-}
-// sass-lint:enable property-sort-order
-
-.w-about-box {
-  border: 1px solid $BORDER_COLOR;
-  border-radius: $GLOBAL_RADIUS;
-  padding: 24px;
-}
-
-.w-about-box__headline,
-.w-about-box__copy {
-  margin-top: 0;
-}
-
-.w-about-box__copy {
-  margin-bottom: 0;
-}
diff --git a/src/styles/pages/_all.scss b/src/styles/pages/_all.scss
deleted file mode 100644
index ae326f60cd4..00000000000
--- a/src/styles/pages/_all.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'home';
-@import 'about';
-@import 'author';
-@import 'codelab';
-@import 'learn';
-@import 'live';
-@import 'measure';
-@import 'pagination';
-@import 'path';
-@import 'post';
-@import 'tags';
diff --git a/src/styles/pages/_author.scss b/src/styles/pages/_author.scss
deleted file mode 100644
index 2cd48f59451..00000000000
--- a/src/styles/pages/_author.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '../tools/breakpoints';
-
-$ICON_SIZE: 32px;
-$IMAGE_WIDTH: 192px;
-
-.w-author-page-header {
-  // Not a great solution but annoyingly the page-header doesn't always have
-  // bottom padding because it relies on there being a lot of whitespace below
-  // it. Since this header has an author image, we're taking up that white space
-  // which means we need to add the padding back.
-  padding-bottom: 1em;
-}
-
-.w-author-page-header__headline {
-  @include font($HEADLINE_1);
-
-  @include bp(sm) {
-    @include font($HEADLINE_1_XSMALL);
-  }
-}
-
-.w-author-page__icon {
-  height: $ICON_SIZE;
-}
-
-.w-author-page__image {
-  border-radius: 100%;
-  margin-bottom: 9px;
-  width: calc(#{$IMAGE_WIDTH} * calc(2/3));
-}
-
-.w-author-page__links {
-  justify-content: center;
-  margin-bottom: 16px;
-  width: 100%;
-}
-
-.w-author-page__link {
-  display: inline-block;
-  margin: calc(#{$ICON_SIZE} / 4);
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-}
-
-
-@include bp(sm) {
-  .w-author-page__image {
-    width: $IMAGE_WIDTH;
-  }
-}
diff --git a/src/styles/pages/_codelab.scss b/src/styles/pages/_codelab.scss
deleted file mode 100644
index d477ec63f96..00000000000
--- a/src/styles/pages/_codelab.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import '../tools/breakpoints';
-
-web-codelab {
-  // This spacing is put above the heading on mobile, so we can later load a 
-  // warning into it saying "not available on mobile". (Sorry.)
-  $CODELAB_TOP_BUFFER: 160px;
-
-  display: flex;
-  flex-flow: column;
-  padding: 16px;
-
-  @include bp(md) {
-    // At md or above, we show the Glitch to the right.
-    flex-flow: row;
-
-    .web-codelab__instructions {
-      padding-right: 32px;
-      width: 600px;
-    }
-  }
-
-  .web-codelab__instructions {
-    padding: 16px;
-  }
-
-  .web-codelab__headline {
-    // We use padding instead of margin, so we don't merge with any neighbour
-    // margin of the page broadly (although it's `padding` above).
-    margin-bottom: 8px;
-    margin-top: 0;
-    padding-top: $CODELAB_TOP_BUFFER;
-
-    @include bp(md) {
-      padding-top: 0;
-    }
-  }
-
-  .web-codelab__glitch {
-    min-height: $CODELAB_TOP_BUFFER;
-  }
-}
-
diff --git a/src/styles/pages/_home.scss b/src/styles/pages/_home.scss
deleted file mode 100644
index 81f18361990..00000000000
--- a/src/styles/pages/_home.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../tools/breakpoints';
-@import '../tools/mixins';
-
-.w-home-promo {
-  margin: 0 auto;
-  max-width: 512px;
-  padding: 72px 24px 0;
-
-  @include bp(md) {
-    max-width: 960px;
-    padding: 96px 32px 0;
-  }
-}
-
-.w-home-promo__grid {
-  align-items: center;
-  display: grid;
-  // sass-lint:disable-all
-  // scss-lint:disable all
-  gap: 2rem;
-  // scss-lint:enable all
-  // sass-lint:enable-all
-  grid-template-columns: 1fr;
-
-  @include bp(md) {
-    // sass-lint:disable-all
-    // scss-lint:disable all
-    gap: 3rem;
-    // scss-lint:enable all
-    // sass-lint:enable-all
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.w-home-promo__box {
-  box-shadow: 0 2px 3px 0 rgba($GREY_800, .3), 0 6px 10px 4px rgba($GREY_800, .15);
-  height: 100%;
-
-  > img {
-    border: 0;
-    display: inline-block;
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-  }
-}
-
-.w-home-promo p {
-  text-align: center;
-
-  @include bp(md) {
-    text-align: left;
-  }
-}
-
-.w-home-promo p:first-of-type {
-  margin-top: 0;
-}
-
-.w-home-promo p:last-of-type {
-  margin-bottom: 0;
-}
diff --git a/src/styles/pages/_learn.scss b/src/styles/pages/_learn.scss
deleted file mode 100644
index c4139fe760e..00000000000
--- a/src/styles/pages/_learn.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.w-learn-heading {
-  // Pad the heading a bit so it lines up with the card padding for the
-  // learning paths.
-  margin-top: 0;
-  padding-left: 32px;
-};
diff --git a/src/styles/pages/_live.scss b/src/styles/pages/_live.scss
deleted file mode 100644
index 10650445eaf..00000000000
--- a/src/styles/pages/_live.scss
+++ /dev/null
@@ -1,691 +0,0 @@
-@import '../settings/colors';
-@import '../settings/type';
-@import '../tools/breakpoints';
-
-.w-live-landing-page {
-  color: $GREY_800;
-  --flow-space: 48px;
-
-  @include bp(md) {
-    --flow-space: 80px;
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 1.5;
-    margin: 16px 0;
-
-    @include bp(sm) {
-      font-size: 16px;
-    }
-  }
-
-  h2 {
-    color: $GREY_900;
-    margin-bottom: 24px;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: inherit;
-  }
-
-  .w-display--mobile-only {
-    @include bp(md) {
-      display: none;
-    }
-  }
-
-  .w-display--desktop-only {
-    @media (max-width: #{$BREAKPOINT_VALUE_MEDIUM - 1px}) {
-      display: none;
-    }
-  }
-}
-
-// A utility for creating consistent vertical rhythm between sections.
-.w-live-flow + .w-live-flow {
-  margin-top: var(--flow-space);
-}
-
-.w-livestream-section {
-  background-color: $GREY_50;
-
-  @include bp(md) {
-    border-bottom: 1px solid $GREY_300;
-  }
-
-  .w-live-chat-notice {
-    align-items: center;
-    background-color: $WHITE;
-    color: $GREY_700;
-    display: flex;
-    font-size: 12px;
-    padding: 19px 16px;
-
-    > :first-child {
-      margin-right: 16px;
-    }
-
-    // Only display the notice if the device's primary pointing device does not
-    // support hover. This lets us filter out phones and tablets.
-    @media (hover: hover) {
-      display: none;
-    }
-
-  }
-}
-
-.w-hero-overflow {
-  // We need this as the hero image extends outside the normal l/r of the
-  // page. Contain it so it doesn't let users scroll.
-  overflow-x: hidden;
-}
-
-.w-hero-section {
-  margin-top: 50px;
-}
-
-.w-event-buttons {
-  display: inline-flex;
-  flex-flow: column wrap;
-  margin: 24px 0 0; // jiwoong@
-
-  .w-button--primary {
-    margin: 0 0 16px;
-  }
-
-  .w-button:not(.w-button--primary) {
-    color: inherit;
-  }
-
-  @include bp(sm) {
-    flex-direction: row;
-
-    .w-button--primary {
-      margin: 0 16px 0 0;
-    }
-  }
-}
-
-.w-event-heading {
-  .w-event-heading__logo {
-    align-items: center;
-    color: #606369;
-    display: flex;
-    justify-content: center;
-    margin: 0;
-    font-size: 35px;
-
-    @include bp(md) {
-      font-size: 41px;
-    }
-
-    span {
-      opacity: 0;
-      position: absolute;
-      text-indent: -99999px;
-    }
-
-    video {
-      height: 1em;
-      margin-left: .25ch;
-      pointer-events: none;
-      width: auto;
-    }
-  }
-
-  .w-event-heading__subhead {
-    font-family: $HEADLINE_FONT;
-    font-size: 16px;
-    margin-top: 8px;
-
-    @include bp(md) {
-      font-size: 18px;
-      margin-top: 12px;
-    }
-  }
-}
-
-.w-event-heading--smaller {
-  .w-event-heading__logo {
-    font-size: 33px;
-
-    @include bp(md) {
-      font-size: 33px;
-    }
-  }
-
-  .w-event-heading__subhead {
-    @include bp(md) {
-      font-size: 16px;
-    }
-  }
-}
-
-.w-event-section {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  max-width: 960px;
-  text-align: center;  // for mobile
-  margin-left: auto;
-  margin-right: auto;
-
-  &::before {
-    display: none !important;
-  }
-
-  @include bp(md) {
-    text-align: inherit;
-  }
-}
-
-.w-event-section--subscribe {
-  padding-left: 32px;
-  padding-right: 32px;
-
-  // Make the subscribe area less huge as it has its own padding.
-  // TODO(michaelsolati): Remove the padding overrides in the subscribe include.
-  // The spacing for this element should be defined by the containing page.
-  web-subscribe {
-    margin-top: -32px;
-    margin-bottom: -32px;
-  }
-}
-
-.w-event-hero {
-  align-items: center;
-  box-sizing: content-box;
-  display: flex;
-  height: 192px;
-  justify-content: center;
-  margin: 0 auto;
-  padding: 0 0 50px;
-  position: relative;
-
-  @include bp(md) {
-    padding: 0 0 64px;
-  }
-
-  &::before {
-    background-image: url('../live/hero-bg.png');
-    background-position: 50% 30%;
-    background-repeat: no-repeat;
-    background-size: auto 75%;
-    content: '';
-    height: 100%;
-    position: absolute;
-    width: 1600px;
-    z-index: -1;
-  }
-
-  img {
-    max-height: 100%;
-    min-width: 560px;
-  }
-}
-
-.w-event-section__column-head {
-  width: 100%;
-
-  @include bp(md) {
-    order: -1;
-  }
-}
-
-.w-event-section__column-left {
-  align-items: center;
-  display: flex;
-  flex-flow: column wrap;
-  flex-grow: 1;
-  max-width: 512px;
-  padding: 0 32px;
-  text-align: center;
-  width: 100%;
-
-  @include bp(md) {
-    align-items: flex-start;
-    flex-grow: 0;
-    padding-left: 16px;
-    text-align: inherit;
-    width: 37.5%;
-  }
-
-  h3 {
-    font-size: 16px;
-    margin: 0;
-  }
-
-  p {
-    margin: 0;
-    margin-top: 24px;
-    max-width: 512px;
-
-    @include bp(md) {
-      max-width: 288px;
-    }
-  }
-
-  .w-event-buttons {
-    margin: 16px 0;
-  }
-
-  .w-feedback-button {
-    margin-top: 49px;
-
-    svg:first-child {
-      margin-right: 8px;
-    }
-  }
-}
-
-.w-event-section__column-right {
-  max-width: 512px;
-  padding: 0 8px;
-
-  @include bp(md) {
-    padding: 0 16px;
-    width: 62.5%;
-    max-width: 62.5%;
-  }
-
-  .w-event-carousel {
-    display: none;
-
-    @include bp(md) {
-      display: flex;
-    }
-  }
-}
-
-.w-event-section__column-right--extra-padding {
-  padding: 0 24px;
-}
-
-.w-event-section__internal-links {
-  margin-top: 32px;
-  display: flex;
-
-  @include bp(md) {
-    display: block;
-  }
-
-  a {
-    align-items: center;
-    color: $GREY_800;
-    display: flex;
-    flex-direction: column;
-    font-family: $HEADLINE_FONT;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    justify-content: center;
-    padding: 0 16px;
-    width: 132px;
-
-    @include bp(md) {
-      display: block;
-      padding: 0;
-      width: auto;
-    }
-  }
-
-  > * + * {
-    border-left: 1px solid $GREY_300;
-
-    @include bp(md) {
-      border: 0;
-      margin-top: 24px;
-    }
-  }
-}
-
-.w-event-link,
-.w-back-to-top-link {
-  font-size: 14px;
-}
-
-.w-event-link {
-  margin-top: 24px;
-}
-
-.w-back-to-top-link {
-  font-size: 14px;
-  margin: 24px 0 48px;
-
-  @include bp(md) {
-    margin: 24px 0 0;
-  }
-}
-
-.w-event-carousel {
-  display: flex;
-  overflow-x: scroll;
-  padding-bottom: 8px;
-  // Firefox only
-  // sass-lint:disable no-misspelled-properties
-  scrollbar-color: $GREY_500;
-  scrollbar-width: thin;
-  // sass-lint:enable no-misspelled-properties
-
-  &::-webkit-scrollbar-track {
-    padding-top: 4px;
-  }
-
-  &::-webkit-scrollbar {
-    height: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $GREY_500;
-    border-radius: 8px;
-  }
-}
-
-.w-event-carousel__day {
-  color: $GREY_800;
-  font-family: $HEADLINE_FONT;
-  font-size: 14px;
-  font-weight: $FONT_WEIGHT_MEDIUM;
-  margin-right: 16px;
-
-  &a:hover,
-  &a:focus {
-    outline: 0;
-    opacity: .9;
-    text-decoration: none;
-  }
-
-  &a:focus {
-    .w-event-carousel__description {
-      box-shadow: inset 0 0 0 1px $FOCUS_COLOR;
-    }
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &.w-event-carousel__pending {
-    opacity: .6;
-  }
-}
-
-.w-event-carousel__thumbnail {
-  margin-bottom: 8px;
-  background-color: $GREY_200;
-  border-radius: 3px;
-  overflow: hidden;
-  width: 178px;
-  height: 110px;
-
-  > img {
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.w-schedule-section {
-  .w-event-heading {
-    margin-top: 56px;
-
-    @include bp(md) {
-      margin-top: 0;
-    }
-  }
-
-  .w-event-heading + p {
-    margin-top: 32px;
-
-    @include bp(md) {
-      margin-top: 24px;
-    }
-  }
-}
-
-.w-livestream-section + .w-schedule-section {
-  // If we're displaying the live chat is disabled banner (which we only do on
-  // touch devices) then we want to remove the normal 48px margin to move the
-  // schedule closer to the video.
-  @media (hover: none) {
-    --flow-space: 8px;
-  }
-
-  // Restore the usual flow-space value.
-  @include bp(md) {
-    --flow-space: 80px;
-  }
-}
-
-web-event-schedule {
-  display: block;
-}
-
-.w-event-carousel + web-event-schedule {
-  margin-top: 12px;
-}
-
-web-tabs.w-event-tabs {
-  --primary-color: #{$WEB_PRIMARY_COLOR};
-  --hover-color: #{$GOOGLE_BLUE_50};
-  --active-color: #{$GOOGLE_BLUE_100};
-
-  margin-top: 48px;
-
-  @include bp(md) {
-    margin-top: 0;
-  }
-}
-
-.w-event-schedule {
-  display: block;
-  // Forces a stacking context.
-  position: relative;
-  text-align: left;
-  z-index: 0;
-
-  .w-event-schedule__row {
-    border-bottom: 1px solid #dadce0;
-    min-height: 48px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: 24px 16px;
-
-    &:last-of-type {
-      border-bottom: 0;
-    }
-
-    &:hover,
-    &:focus-within {
-      background: rgba(0, 0, 0, .05);
-    }
-  }
-
-  .w-event-schedule__speaker {
-    font-size: 14px;
-    margin-bottom: 16px;
-
-    a {
-      z-index: 10;
-      position: relative;
-    }
-  }
-
-  .w-event-schedule__session {
-    font-size: 14px;
-    display: flex;
-    flex-flow: row wrap;
-  }
-
-  .w-authors__card {
-    // TODO(samthor): This margin is unnessecary for our schedule, and
-    // needlessly pads out each row.
-    margin-bottom: 0;
-  }
-
-  .w-event-schedule__open {
-    color: inherit;
-    display: inline-block;
-    font-family: $HEADLINE_FONT;
-    pointer-events: auto;
-    font-size: 18px;
-    margin-right: 1em;
-    flex-grow: 1;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-
-      @media (hover: none) {
-        -webkit-tap-highlight-color: transparent;
-        outline: none;
-      }
-    }
-
-    span {
-      z-index: 1;
-      position: relative;
-    }
-
-    // This creates a large clickable area around the link itself.
-    &::before {
-      content: '';
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: block;
-      position: absolute;
-      z-index: 0;
-    }
-  }
-
-  .w-event-schedule__blurb {
-    margin-top: 4px;
-    color: $GREY_700;
-  }
-}
-
-.w-event-schedule__video {
-  align-self: center;
-  font-weight: 500;
-  z-index: 1; // bring to front
-}
-
-.w-event-calendar {
-  display: flex;
-  align-items: center;
-
-  a.w-button {
-    margin-left: 8px;
-  }
-}
-
-.w-event-calendar__note {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 400;
-  margin-right: 8px;
-
-  &::before {
-    content: '';
-    background: url(/images/icons/calendar.svg) center / contain no-repeat;
-    width: 24px;
-    height: 24px;
-  }
-
-  span {
-    text-indent: -99999px;
-    opacity: 0;
-    position: absolute;
-  }
-
-  @include bp(md) {
-    span {
-      margin-left: 6px;
-      text-indent: 0;
-      opacity: initial;
-      position: initial;
-    }
-  }
-}
-
-.w-event-antihero {
-  padding: 0 !important;
-
-  img {
-    // nb. 128px is important as it matches the max-width of 512px
-    min-height: 128px;
-    object-fit: cover;
-  }
-}
-
-.w-event-icon-heading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @include bp(md) {
-    display: block;
-  }
-}
-
-.w-event-icon {
-  vertical-align: middle;
-  margin: 0 0 8px;
-  @include bp(md) {
-    margin: 0 16px 0 0;
-  }
-}
-
-.w-q-and-a-section {
-  flex-flow: column;
-  align-items: center;
-
-  @include bp(md) {
-    flex-flow: row wrap;
-    align-items: initial;
-  }
-
-  .w-event-section__column-right,
-  web-event-q-and-a {
-    width: 100%;
-  }
-
-  web-event-q-and-a {
-    text-align: left;
-  }
-}
-
-.web-event-q-and-a__details {
-  border-top: 1px solid rgba(32, 33, 36, .16);
-  color: $GREY_600;
-  cursor: pointer;
-  font-family: $HEADLINE_FONT;
-  font-size: 18px;
-  padding: 20px 16px;
-
-  &[open] {
-    border-bottom: 1px solid rgba(32, 33, 36, .16);
-    box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .2), 0 -8px 8px -8px rgba(0, 0, 0, .2);
-    color: $GREY_800;
-    margin-bottom: -1px;
-  }
-
-  p {
-    margin: 20px 0 0;
-  }
-
-  span {
-    margin-right: 13px;
-  }
-
-  summary {
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-}
diff --git a/src/styles/pages/_measure.scss b/src/styles/pages/_measure.scss
deleted file mode 100644
index 92eac40ed6b..00000000000
--- a/src/styles/pages/_measure.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-// sass-lint:disable class-name-format
-body.lh-signedin [data-lh-signin='hide'] {
-  display: none !important;
-}
-
-web-progress-bar {
-  background-color: #fff;
-  visibility: hidden;
-  z-index: 1;
-}
-// sass-lint:enable class-name-format
-
-.w-measure-results {
-  background: $GREY_50;
-  min-height: 279px;
-}
-
-.w-measure-steps {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @include bp(md) {
-    flex-direction: row;
-  }
-}
-
-.w-measure-step {
-  @include bp(md) {
-    margin: 0;
-    max-width: 256px;
-  }
-}
-
-.w-measure-categories {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-
-  @include bp(sm) {
-    align-items: center;
-    display: grid;
-    // sass-lint:disable-all
-    // scss-lint:disable all
-    gap: 54px;
-    grid-gap: 54px;
-    // scss-lint:enable all
-    // sass-lint:enable-all
-    grid-template-columns: repeat(2, 1fr);
-    justify-items: center;
-  }
-}
-
-.w-measure-category {
-  margin: 36px 0;
-  max-width: 300px;
-  text-align: center;
-
-  @include bp(sm) {
-    margin: 0;
-  }
-}
diff --git a/src/styles/pages/_pagination.scss b/src/styles/pages/_pagination.scss
deleted file mode 100644
index 0ce662198e1..00000000000
--- a/src/styles/pages/_pagination.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-
-$W_PAGINATION_LINK_SPACING: 6px;
-
-@mixin w-pagination__links($COLOR, $ACTIVE: false) {
-  color: $COLOR;
-
-  @if $ACTIVE {
-    box-shadow: 0 2px 0 0 $COLOR;
-  } @else {
-    &:active,
-    &:focus,
-    &:hover {
-      box-shadow: 0 2px 0 0 $COLOR;
-      text-decoration: none;
-    }
-  }
-}
-
-.w-pagination {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-}
-
-.w-pagination__link {
-  @include w-pagination__links($GREY_700);
-  -webkit-font-smoothing: auto;
-  font-size: 1rem;
-  height: 40px;
-  margin: 0px $W_PAGINATION_LINK_SPACING;
-  min-width: 40px;
-  text-align: center;
-  transition: box-shadow $TRANSITION_SPEED;
-}
-
-.w-pagination__link--active {
-  @include w-pagination__links($BLACK, true);
-}
-
-.w-pagination__arrow::before {
-  @include font-material-icon();
-}
-
-.w-pagination__arrow--first::after,
-.w-pagination__arrow--last::after {
-  @include font-material-icon();
-  margin-left: -18px;
-}
-
-.w-pagination__arrow--first::before,
-.w-pagination__arrow--first::after,
-.w-pagination__arrow--previous::before {
-  content: 'chevron_left';
-}
-
-.w-pagination__arrow--last::before,
-.w-pagination__arrow--last::after,
-.w-pagination__arrow--next::before {
-  content: 'chevron_right';
-}
-
-.w-pagination__spacer {
-  color: $GREY_700;
-  margin-right: calc(#{$W_PAGINATION_LINK_SPACING} * 2) ;
-}
diff --git a/src/styles/pages/_path.scss b/src/styles/pages/_path.scss
deleted file mode 100644
index 671abf88b89..00000000000
--- a/src/styles/pages/_path.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../settings/global';
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-.w-path-intro {
-  display: flex;
-  flex-direction: column;
-
-  @include bp(md) {
-    flex-direction: row;
-  }
-}
-
-.w-path-intro__overview {
-  @include bp(md) {
-    flex-basis: 57%;
-    margin-right: 54px;
-  }
-}
-
-.w-path-heading {
-  // Pad the heading a bit so it lines up with the card padding for the
-  // learning paths.
-  padding: 0 56px;
-};
-
-.w-path-list {
-  list-style: none;
-  margin: 32px 0 32px 50px;
-  padding-left: 32px;
-  position: relative;
-
-  @include bp(sm) {
-    margin: 32px 0 32px 67px;
-  }
-}
-
-.w-path-listitem {
-  font-size: 1em;
-  line-height: 1.778em;
-  margin-bottom: 8px;
-}
-
-.w-path-listitem::before {
-  background: $GREY_700;
-  border-radius: $GLOBAL_ROUNDED;
-  color: $WHITE;
-  content: '';
-  height: 8px;
-  left: 0;
-  margin: 10px 0 0;
-  position: absolute;
-  width: 8px;
-}
-
-.w-path-link {
-  color: $PRIMARY_TEXT_COLOR;
-  text-decoration: underline;
-  transition: $TRANSITION_SPEED color;
-}
-
-.w-path-link:hover {
-  color: $WEB_PRIMARY_COLOR;
-}
-
-.w-path-link code {
-  background: none;
-  border: 0;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
diff --git a/src/styles/pages/_post.scss b/src/styles/pages/_post.scss
deleted file mode 100644
index e6895b4e076..00000000000
--- a/src/styles/pages/_post.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import '../settings/colors';
-@import '../tools/breakpoints';
-
-$SIGNPOST_SPACING: 4px;
-
-// sass-lint:disable class-name-format
-.guide-landing-page {
-  position: relative;
-}
-// sass-lint:enable class-name-format
-
-.w-post-breadcrumbs {
-  padding: 0px 0 32px;
-
-  @include bp(md) {
-    padding: 0px 0 44px;
-  }
-}
-
-.w-post-content {
-  margin-bottom: 64px;
-
-  @include bp(sm) {
-    margin-bottom: 160px;
-  }
-}
-
-.w-post-github-link {
-  color: $GREY_700;
-  font-size: .875em;
-}
-
-.w-codelabs-callout {
-  @include bp(sm) {
-    margin-top: 64px;
-  }
-}
-
-.w-post-signpost {
-  font-size: 14px;
-  font-style: normal;
-  line-height: 20px;
-  margin-top: $SIGNPOST_SPACING;
-  padding: 0 0 $SIGNPOST_SPACING;
-}
-
-.w-post-signpost__divider {
-  color: $GREY_700;
-  margin: 0 $SIGNPOST_SPACING $SIGNPOST_SPACING;
-}
-
-.w-post-signpost__link {
-  margin: 0 0 $SIGNPOST_SPACING;
-}
-
-.w-post-signpost__title {
-  color: $GREY_700;
-  margin: 0 $SIGNPOST_SPACING $SIGNPOST_SPACING 0;
-}
diff --git a/src/styles/pages/_tags.scss b/src/styles/pages/_tags.scss
deleted file mode 100644
index 95c81fedc12..00000000000
--- a/src/styles/pages/_tags.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '../tools/breakpoints';
-
-.w-tags-page-header__headline {
-  @include font($HEADLINE_1);
-
-  @include bp(sm) {
-    @include font($HEADLINE_1_XSMALL);
-  }
-}
diff --git a/src/styles/settings/_colors.scss b/src/styles/settings/_colors.scss
deleted file mode 100644
index 2bd6bbcb54f..00000000000
--- a/src/styles/settings/_colors.scss
+++ /dev/null
@@ -1,277 +0,0 @@
-// MATERIAL COLOR PALETTE
-// =============================================================================
-// Shades of grey, including black and white
-
-$WHITE: #fff;
-
-$GREY_50: #f8f9fa;
-$GREY_100: #f1f3f4;
-$GREY_200: #e8eaed;
-$GREY_300: #dadce0;
-$GREY_400: #bdc1c6;
-$GREY_500: #9aa0a6;
-$GREY_600: #80868b;
-$GREY_700: #5f6368;
-$GREY_800: #3c4043;
-$GREY_900: #202124;
-
-$BLACK: #000;
-
-// =============================================================================
-// Material colors
-
-$BLUE_50: #e3f2fd;          // Public palette only
-$BLUE_100: #bbdefb;         // Public palette only
-$BLUE_400: #42a5f5;         // Public palette only
-$BLUE_500: #2196f3;         // Public palette only
-$BLUE_600: #1e88e5;         // Public palette only
-$BLUE_700: #1976d2;         // Public palette only
-$BLUE_800: #1565c0;         // Public palette only
-$BLUE_900: #0d47a1;         // Public palette only
-
-$BLUE_GREY_50: #eceff1;
-$BLUE_GREY_100: #cfd8dc;
-$BLUE_GREY_200: #b0bec5;
-$BLUE_GREY_300: #90a4ae;
-$BLUE_GREY_400: #78909c;
-$BLUE_GREY_500: #607d8b;
-$BLUE_GREY_600: #546e7a;
-$BLUE_GREY_700: #455a64;
-$BLUE_GREY_800: #37474f;
-$BLUE_GREY_900: #263238;
-
-$CYAN_50: #e4f7fb;
-$CYAN_100: #cbf0f8;
-$CYAN_200: #a1e4f2;
-$CYAN_300: #78d9ec;
-$CYAN_400: #43cde6;
-$CYAN_500: #24c1e0;
-$CYAN_600: #12b5cb;
-$CYAN_700: #129eaf;
-$CYAN_800: #098591;
-$CYAN_900: #007b83;
-
-$DEEP_ORANGE_400: #ff7043;
-$DEEP_ORANGE_500: #ff5722;
-$DEEP_ORANGE_600: #f4511e;
-$DEEP_ORANGE_700: #e64a19;
-$DEEP_ORANGE_900: #bf360c;
-$DEEP_ORANGE_A700: #dd2c00;
-
-$DEEP_PURPLE_100: #ede7f6;
-$DEEP_PURPLE_200: #e1bee7;
-$DEEP_PURPLE_300: #9575cd;
-$DEEP_PURPLE_400: #7e57c2;
-$DEEP_PURPLE_500: #673ab7;
-$DEEP_PURPLE_600: #5e35b1;
-$DEEP_PURPLE_700: #512da8;
-
-$GOOGLE_BLUE_50: #e8f0fe;
-$GOOGLE_BLUE_100: #d2e3fc;
-$GOOGLE_BLUE_200: #aecbfa;
-$GOOGLE_BLUE_300: #8ab4f8;
-$GOOGLE_BLUE_400: #669df6;
-$GOOGLE_BLUE_500: #4285f4;
-$GOOGLE_BLUE_600: #1a73e8;
-$GOOGLE_BLUE_700: #1967d2;
-$GOOGLE_BLUE_800: #185abc;
-$GOOGLE_BLUE_900: #174ea6;
-
-$GOOGLE_GREEN_50: #e6f4ea;
-$GOOGLE_GREEN_100: #ceead6;
-$GOOGLE_GREEN_200: #a8dab5;
-$GOOGLE_GREEN_300: #81c995;
-$GOOGLE_GREEN_400: #5bb974;
-$GOOGLE_GREEN_500: #34a853;
-$GOOGLE_GREEN_600: #1e8e3e;
-$GOOGLE_GREEN_700: #188038;
-$GOOGLE_GREEN_800: #137333;
-$GOOGLE_GREEN_900: #0d652d;
-$GOOGLE_GREEN_A700: #00c853;
-
-$GOOGLE_RED_50: #fce8e6;
-$GOOGLE_RED_100: #fad2cf;
-$GOOGLE_RED_200: #f6aea9;
-$GOOGLE_RED_300: #f28b82;
-$GOOGLE_RED_400: #ee675c;
-$GOOGLE_RED_500: #ea4335;
-$GOOGLE_RED_600: #d93025;
-$GOOGLE_RED_700: #c5221f;
-$GOOGLE_RED_800: #b31412;
-$GOOGLE_RED_900: #a50e0e;
-$GOOGLE_RED_A400: #ff1744;
-$GOOGLE_RED_A700: #d50000;
-
-$GOOGLE_YELLOW_50: #fef7e0;
-$GOOGLE_YELLOW_100: #feefc3;
-$GOOGLE_YELLOW_200: #fde293;
-$GOOGLE_YELLOW_300: #fdd663;
-$GOOGLE_YELLOW_400: #fcc934;
-$GOOGLE_YELLOW_500: #fbbc04;
-$GOOGLE_YELLOW_600: #f9ab00;
-$GOOGLE_YELLOW_700: #f29900;
-$GOOGLE_YELLOW_800: #ea8600;
-$GOOGLE_YELLOW_900: #e37400;
-
-$GREEN_50: #e8f5e9;
-$GREEN_100: #c8e6c9;
-$GREEN_200: #a5d6a7;
-$GREEN_300: #81c784;
-$GREEN_400: #66bb6a;
-$GREEN_500: #4caf50;
-$GREEN_600: #43a047;
-$GREEN_700: #388e3c;
-$GREEN_800: #2e7d32;
-$GREEN_900: #1b5e20;
-
-$INDIGO_50: #e8eaf6;
-$INDIGO_100: #c5cae9;
-$INDIGO_200: #9fa8da;
-$INDIGO_300: #7986cb;
-$INDIGO_400: #5c6bc0;
-$INDIGO_500: #3f51b5;
-$INDIGO_600: #3949ab;
-$INDIGO_700: #303f9f;
-
-$LIGHT_BLUE_50: #e1f5fe;
-$LIGHT_BLUE_100: #b3e5fc;
-$LIGHT_BLUE_200: #81d4fa;
-$LIGHT_BLUE_300: #4fc3f7;
-$LIGHT_BLUE_400: #29b6f6;
-$LIGHT_BLUE_500: #03a9f4;
-$LIGHT_BLUE_600: #039be5;
-$LIGHT_BLUE_700: #0288d1;
-$LIGHT_BLUE_800: #0277bd;
-$LIGHT_BLUE_900: #01579b;
-
-$LIGHT_GREEN_50: #f1f8e9;
-$LIGHT_GREEN_100: #dcedc8;
-$LIGHT_GREEN_200: #c5e1a5;
-$LIGHT_GREEN_300: #aed581;
-$LIGHT_GREEN_400: #9ccc65;
-$LIGHT_GREEN_500: #8bc34a;
-$LIGHT_GREEN_600: #7cb342;
-$LIGHT_GREEN_700: #689f38;
-$LIGHT_GREEN_800: #558b2f;
-$LIGHT_GREEN_900: #33691e;
-
-$LIME_A200: #eeff41;
-
-$ORANGE_50: #feefe3;
-$ORANGE_100: #fedfc8;
-$ORANGE_200: #fdc69c;
-$ORANGE_300: #fcad70;
-$ORANGE_400: #fa9033;
-$ORANGE_500: #fa7b17;
-$ORANGE_600: #e8710a;
-$ORANGE_700: #d56e0c;
-$ORANGE_800: #c26401;
-$ORANGE_900: #b06000;
-
-$PINK_50: #fde7f3;
-$PINK_100: #fdcfe8;
-$PINK_200: #fba9d6;
-$PINK_300: #ff8bcb;
-$PINK_400: #ff63bb;
-$PINK_500: #f439a0;
-$PINK_600: #e52592;
-$PINK_700: #d01884;
-$PINK_800: #b80672;
-$PINK_900: #9c166b;
-
-$PURPLE_50: #f3e8fd;
-$PURPLE_100: #e9d2fd;
-$PURPLE_200: #d7aefb;
-$PURPLE_300: #c58af9;
-$PURPLE_400: #af5cf7;
-$PURPLE_500: #a142f4;
-$PURPLE_600: #9334e6;
-$PURPLE_700: #8430ce;
-$PURPLE_800: #7627bb;
-$PURPLE_900: #681da8;
-
-$RED_50: #ffebee;
-$RED_100: #ffcdd2;
-$RED_200: #ef9a9a;
-$RED_400: #ef5350;
-$RED_500: #f44336;
-$RED_600: #e53935;
-$RED_700: #d32f2f;
-$RED_800: #c62828;
-$RED_900: #b71c1c;
-
-$TEAL_50: #e0f2f1;
-$TEAL_100: #b2dfdb;
-$TEAL_200: #80cbc4;
-$TEAL_400: #26a69a;
-$TEAL_500: #009688;
-$TEAL_600: #00897b;
-$TEAL_700: #00796b;
-
-$YELLOW_50: #fffde7;
-$YELLOW_100: #fff9c4;
-$YELLOW_200: #fff59d;
-$YELLOW_300: #fff176;
-$YELLOW_600: #fdd835;
-$YELLOW_700: #fbc02d;
-$YELLOW_800: #f9a825;
-
-$WEB_PRIMARY_COLOR_50: #e7e8ff;
-$WEB_PRIMARY_COLOR_100: #c3c6ff;
-$WEB_PRIMARY_COLOR_200: #9ba0ff;
-$WEB_PRIMARY_COLOR_300: #7379ff;
-$WEB_PRIMARY_COLOR_400: #555dff;
-$WEB_PRIMARY_COLOR_500: #464fff;
-$WEB_PRIMARY_COLOR_600: #3740ff;
-$WEB_PRIMARY_COLOR_700: #2e36ff;
-$WEB_PRIMARY_COLOR_800: #272eff;
-$WEB_PRIMARY_COLOR_900: #1d23ff;
-
-// BRAND COLORS
-// =============================================================================
-// Note: These are slight variations on material palette colors. We spoke with
-// googleguidance@ and they said we're allowed to make reasonable tweaks to
-// the palette.
-$WEB_PRIMARY_COLOR: $WEB_PRIMARY_COLOR_600;
-$WEB_SECONDARY_COLOR: #3fc4ff;
-$WEB_EXTENDED_SECONDARY_COLOR: #e51661;
-$WEB_EXTENDED_TERTIARY_COLOR: #6001ff;
-$WEB_VITALS_COLOR: #2962ff;
-
-$PRIMARY_TEXT_COLOR: $GREY_900;
-$LINK_COLOR: $WEB_PRIMARY_COLOR;
-$FOCUS_COLOR: $WEB_PRIMARY_COLOR;
-$BORDER_COLOR: $GREY_300;
-
-// LIGHTHOUSE SCORING COLORS
-$FAIL_COLOR: rgb(229, 57, 53);
-$FAIL_COLOR_LIGHT: rgba(229, 57, 53, .20);
-
-$AVERAGE_COLOR: rgb(251, 140, 0);
-$AVERAGE_COLOR_LIGHT: rgba(251, 140, 0, .20);
-
-$PASS_COLOR: rgb(24, 182, 99);
-$PASS_COLOR_LIGHT: rgba(24, 182, 99, .20);
-
-// LIGHTHOUSE AUDITS TABLE COLORS
-$HIGH_IMPACT_BACKGROUND_COLOR: #fcebea;
-$HIGH_IMPACT_COLOR: #d5100c;
-
-$MEDIUM_IMPACT_BACKGROUND_COLOR: #fef3e5;
-$MEDIUM_IMPACT_COLOR: #c6320d;
-
-$LOW_IMPACT_BACKGROUND_COLOR: #ebebff;
-$LOW_IMPACT_COLOR: #3740ff;
-
-// SEMANTIC COLORS
-$NOTE_COLOR: $WEB_PRIMARY_COLOR;
-$CAUTION_COLOR: #c0580c;
-$WARNING_COLOR: #eb0f00;
-$SUCCESS_COLOR: #018642;
-$KEY_POINT_COLOR: #6001ff;
-
-// SELF-ASSESSMENT COLORS
-$SELF_ASSESSMENT_PRIMARY_COLOR: $SUCCESS_COLOR;
-$SELF_ASSESSMENT_HOVER_COLOR: $GREEN_50;
-$SELF_ASSESSMENT_ACTIVE_COLOR: $GREEN_100;
-$SELF_ASSESSMENT_INCORRECT_COLOR: $WEB_EXTENDED_SECONDARY_COLOR;
diff --git a/src/styles/settings/_dimensions.scss b/src/styles/settings/_dimensions.scss
deleted file mode 100644
index a9a6b0aecc3..00000000000
--- a/src/styles/settings/_dimensions.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-$WEB_HEADER_HEIGHT: 64px;
-
-// -----------------------------------------------------------------------------
-// !!! DEPRECATED !!!
-//
-// These breakpoints are from the beta of the site and are only used by the
-// components on the measure page. These will be phased out soon. Do not use!
-// -----------------------------------------------------------------------------
-
-/// @deprecated
-$BREAKPOINT_VALUE_DESKTOP: 1440px;
-/// @deprecated
-$BREAKPOINT_VALUE_TABLET_LANDSCAPE: 1024px;
-/// @deprecated
-$BREAKPOINT_VALUE_TABLET: 840px;
-/// @deprecated
-$BREAKPOINT_VALUE_MOBILE: 600px;
-/// @deprecated
-$BREAKPOINT_VALUE_MOBILE_SMALL: 380px;
-
-// ---------------------------------------------------------------------------
-// !!! DEPRECATED !!!
-//
-// GRID LAYOUTS
-// These variables are for the old grid used on the beta of web.dev.
-// Complex components on the measure page still use it but it should be phased
-// out. Please do not use this with new components!
-// ---------------------------------------------------------------------------
-
-// 4-column grid, 599px to minimum size
-/// @deprecated
-$GRID_COLUMN_SMALL: 59.904px; // calc(288px * .208);
-/// @deprecated
-$GRID_GAP_SMALL: 16.128px; // calc(288px * .056);
-
-// 12-column grid, 1023px - 600px
-/// @deprecated
-$GRID_COLUMN_MEDIUM: 44.9856px; // calc(704px * .0639);
-/// @deprecated
-$GRID_GAP_MEDIUM: 14.9248px; // calc(704px * .0212);
-
-// 12-column grid, 1440px - 1024px
-/// @deprecated
-$GRID_COLUMN_LARGE: 61.344px; // calc(960px * .0639);
-/// @deprecated
-$GRID_GAP_LARGE: 20.352px; // calc(960px * .0212);
-
-// 12-column grid, 1441px+
-/// @deprecated
-$GRID_COLUMN_EXTRA_LARGE: 81.792px; // calc(1280px * .0639);
-/// @deprecated
-$GRID_GAP_EXTRA_LARGE: 27.136px; // calc(1280px * .0212);
-
-/// @deprecated
-$CONTAINER_PADDING_LARGE: 140px;
-/// @deprecated
-$CONTAINER_PADDING_SMALL: 80px;
diff --git a/src/styles/settings/_global.scss b/src/styles/settings/_global.scss
deleted file mode 100644
index 1ab6d82c88e..00000000000
--- a/src/styles/settings/_global.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// =============================================================================
-// GLOBAL OVERVIEW
-//
-// Global variables used across multiple files.
-//
-// =============================================================================
-
-// We use these to make sure border radius matches unless we want it different.
-$GLOBAL_RADIUS: 3px;
-$GLOBAL_RADIUS_MEDIUM: 8px;
-$GLOBAL_RADIUS_LARGE: 20px;
-$GLOBAL_ROUNDED: 50%;
-
-// We use this as cursor values for enabling the option of having custom cursors
-// in the whole site's stylesheet
-$CURSOR_AUTO_VALUE: auto;
-$CURSOR_CROSSHAIR_VALUE: crosshair;
-$CURSOR_DEFAULT_VALUE: default;
-$CURSOR_POINTER_VALUE: pointer;
-$CURSOR_HELP_VALUE: help;
-$CURSOR_TEXT_VALUE: text;
-
-// Default transition speed.
-$TRANSITION_SPEED: .2s;
diff --git a/src/styles/settings/_type.scss b/src/styles/settings/_type.scss
deleted file mode 100644
index 784e5c97b4e..00000000000
--- a/src/styles/settings/_type.scss
+++ /dev/null
@@ -1,283 +0,0 @@
-@import 'colors';
-
-// =============================================================================
-// TYPOGRAPHY OVERVIEW
-//
-// All constants and mixins in this file concern font properties, such as
-// font-size, font-family, etc.
-//
-// Constants are mobile-first, starting at feature phone sizes and working up.
-// When adding new constants that are specific to a particular responsive
-// breakpoint, append the breakpoint name to the constant. For example,
-// additional constants for a hypothetical $FINEPRINT constant would be
-// $FINEPRINT_XSMALL and $FINEPRINT_MEDIUM.
-//
-// =============================================================================
-
-// Smoothing.
-$FONT_SMOOTHING_MOZ: grayscale;
-$FONT_SMOOTHING_WEBKIT: antialiased;
-$FONT_SMOOTHING_RENDERING: optimizeSpeed;
-
-// Fonts.
-$HEADLINE_FONT: 'Google Sans', sans-serif;
-$PRIMARY_FONT: 'Roboto', sans-serif;
-$CODE_FONT: 'Roboto Mono', monospace;
-$ASIDE_FONT: 'Roboto Condensed', sans-serif;
-
-// Weights.
-$FONT_WEIGHT_LIGHT: 300;
-$FONT_WEIGHT_REGULAR: 400;
-$FONT_WEIGHT_MEDIUM: 500;
-$FONT_WEIGHT_BOLD: 700;
-
-// -----------------------------------------------------------------------------
-// DEFAULT
-// (0 — 240px)
-// -----------------------------------------------------------------------------
-
-// Set all h1-h6 elements to these initial values.
-// This acts as a kind of reset.
-$BASE_HEADLINE: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE: 18,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 24,
-);
-
-$HEADLINE_1: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   38,
-  FONT_WEIGHT: 500,
-  LETTER_SPACING: -.5,
-  LINE_HEIGHT: 50,
-  MARGIN_BOTTOM: 9,
-  MARGIN_TOP: 0,
-);
-
-$HEADLINE_2: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   18,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 24,
-  MARGIN_BOTTOM: 24,
-  MARGIN_TOP: 48,
-);
-
-$HEADLINE_2_ARTICLE: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   18,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 24,
-  MARGIN_BOTTOM: 24,
-  MARGIN_TOP: 48,
-);
-
-$HEADLINE_2_SMALL_CAPS: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   18,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 24,
-  MARGIN_BOTTOM: 24,
-  MARGIN_TOP: 48,
-  TEXT_TRANSFORM: uppercase,
-);
-
-$HEADLINE_3: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   13.5,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 20,
-  MARGIN_BOTTOM: 12,
-  MARGIN_TOP: 36,
-);
-
-$HEADLINE_4: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   13.5,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 20,
-  MARGIN_BOTTOM: 6,
-  MARGIN_TOP: 24,
-);
-
-// This is the text that a user will read in blog posts and in guides.
-// It should be a bit larger than regular body text.
-$ARTICLE: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   13.5,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 21,
-  MARGIN_BOTTOM: 27,
-  MARGIN_TOP: 27,
-);
-
-$BODY: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   12,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 18,
-);
-
-$EYEBROW: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE: 12,
-  FONT_WEIGHT: $FONT_WEIGHT_MEDIUM,
-  LETTER_SPACING: 1.5,
-  LINE_HEIGHT: 11,
-  TEXT_TRANSFORM: uppercase,
-);
-
-// -----------------------------------------------------------------------------
-// XXSMALL
-// (241px — 321px)
-// -----------------------------------------------------------------------------
-
-$HEADLINE_1_XXSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   49,
-  FONT_WEIGHT: 500,
-  LETTER_SPACING: -.5,
-  LINE_HEIGHT: 65,
-  MARGIN_BOTTOM: 10,
-  MARGIN_TOP: 0,
-);
-
-$HEADLINE_2_XXSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   31.5,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 38,
-  MARGIN_BOTTOM: 28,
-  MARGIN_TOP: 56,
-);
-
-$HEADLINE_2_ARTICLE_XXSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   21,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 28,
-  MARGIN_BOTTOM: 28,
-  MARGIN_TOP: 56,
-);
-
-$HEADLINE_2_SMALL_CAPS_XXSMALL: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   21,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 28,
-  MARGIN_BOTTOM: 28,
-  MARGIN_TOP: 56,
-  TEXT_TRANSFORM: uppercase,
-);
-
-$HEADLINE_3_XXSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   16,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 22,
-  MARGIN_BOTTOM: 14,
-  MARGIN_TOP: 42,
-);
-
-$HEADLINE_4_XXSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   16,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 15,
-  MARGIN_BOTTOM: 7,
-  MARGIN_TOP: 28,
-);
-
-$ARTICLE_XXSMALL: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   15,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 28,
-  MARGIN_BOTTOM: 31.5,
-  MARGIN_TOP: 31.5,
-);
-
-$BODY_XXSMALL: (
-  FONT_WEIGHT: 400,
-  FONT_SIZE:   14,
-  LINE_HEIGHT: 21,
-  FONT_FAMILY: $PRIMARY_FONT
-);
-
-// -----------------------------------------------------------------------------
-// XSMALL
-// (321px+)
-// -----------------------------------------------------------------------------
-
-$HEADLINE_1_XSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   56,
-  FONT_WEIGHT: 500,
-  LETTER_SPACING: -.5,
-  LINE_HEIGHT: 74,
-  MARGIN_BOTTOM: 11,
-  MARGIN_TOP: 0,
-);
-
-$HEADLINE_2_XSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   36,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 44,
-  MARGIN_BOTTOM: 32,
-  MARGIN_TOP: 64,
-);
-
-$HEADLINE_2_ARTICLE_XSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   24,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 32,
-  MARGIN_BOTTOM: 32,
-  MARGIN_TOP: 64,
-);
-
-$HEADLINE_2_SMALL_CAPS_XSMALL: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   24,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 32,
-  MARGIN_BOTTOM: 32,
-  MARGIN_TOP: 64,
-  TEXT_TRANSFORM: uppercase,
-);
-
-$HEADLINE_3_XSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   20,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 24,
-  MARGIN_BOTTOM: 16,
-  MARGIN_TOP: 48,
-);
-
-$HEADLINE_4_XSMALL: (
-  FONT_FAMILY: $HEADLINE_FONT,
-  FONT_SIZE:   19,
-  FONT_WEIGHT: 500,
-  LINE_HEIGHT: 20,
-  MARGIN_BOTTOM: 10,
-  MARGIN_TOP: 32,
-);
-
-$ARTICLE_XSMALL: (
-  FONT_FAMILY: $PRIMARY_FONT,
-  FONT_SIZE:   18,
-  FONT_WEIGHT: 400,
-  LINE_HEIGHT: 32,
-  MARGIN_BOTTOM: 36,
-  MARGIN_TOP: 36,
-);
-
-$BODY_XSMALL: (
-  FONT_WEIGHT: 400,
-  FONT_SIZE:   16,
-  LINE_HEIGHT: 24,
-  FONT_FAMILY: $PRIMARY_FONT
-);
diff --git a/src/styles/tools/_breakpoints.scss b/src/styles/tools/_breakpoints.scss
deleted file mode 100644
index b03232aaa9a..00000000000
--- a/src/styles/tools/_breakpoints.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// =============================================================================
-// BREAKPOINTS OVERVIEW
-//
-// Media query breakpoints used across the site.
-//
-// =============================================================================
-
-// sass-lint:disable variable-name-format
-
-// Feature phones
-$BREAKPOINT_VALUE_XXSMALL: 241px;
-
-// Smart phones
-$BREAKPOINT_VALUE_XSMALL: 321px;
-// Update src/lib/Assessment/index.js and src/lib/AssessmentFeedbackContainer/index.js
-// if $BREAKPOINT_VALUE_SMALL changes.
-$BREAKPOINT_VALUE_SMALL: 481px;
-
-// Tablets
-$BREAKPOINT_VALUE_MEDIUM: 865px;
-
-// Desktops
-$BREAKPOINT_VALUE_LARGE: 1264px;
-
-// Media breakpoint helper
-// Credit: http://css-tricks.com/conditional-media-query-mixins/
-@mixin bp($point) {
-  @if $point == xxsm {
-    @media (min-width: #{$BREAKPOINT_VALUE_XXSMALL}) { @content; }
-  } @else if $point == xsm {
-    @media (min-width: #{$BREAKPOINT_VALUE_XSMALL}) { @content; }
-  } @else if $point == sm {
-    @media (min-width: #{$BREAKPOINT_VALUE_SMALL}) { @content; }
-  } @else if $point == md {
-    @media (min-width: #{$BREAKPOINT_VALUE_MEDIUM}) { @content; }
-  } @else if $point == lg {
-    @media (min-width: #{$BREAKPOINT_VALUE_LARGE}) { @content; }
-  }
-}
diff --git a/src/styles/tools/_functions.scss b/src/styles/tools/_functions.scss
deleted file mode 100644
index 76a2f7c1da8..00000000000
--- a/src/styles/tools/_functions.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// =============================================================================
-// FUNCTIONS OVERVIEW
-//
-// Helper functions used throughout the site.
-//
-// =============================================================================
-
-// sass-lint:disable variable-name-format
-
-// Sets unitless line-height based on line-height and font-size
-// Improves accessibility and prevents text from overlapping if users change
-// their default font size in chrome://settings/fonts.
-// @param {string} $line-height Value for line-height, in pixels
-// @param {string} $font-size Value for font-size, in pixels
-@function calculate_unitless_line_height($line_height, $font_size) {
-  @return $line_height / $font_size;
-}
diff --git a/src/styles/tools/_helpers.scss b/src/styles/tools/_helpers.scss
deleted file mode 100644
index 159d31d4352..00000000000
--- a/src/styles/tools/_helpers.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// In order to let screen readers read content we want to hide, pulled from:
-// https://css-tricks.com/small-tweaks-can-make-huge-impact-websites-accessibility/#article-header-id-2
-.w-visually-hidden {
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(1px);
-  display: block;
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
diff --git a/src/styles/tools/_mixins.scss b/src/styles/tools/_mixins.scss
deleted file mode 100644
index 29517239d5b..00000000000
--- a/src/styles/tools/_mixins.scss
+++ /dev/null
@@ -1,365 +0,0 @@
-@import '../settings/colors';
-@import '../settings/global';
-@import '../settings/type';
-@import 'functions';
-@import 'breakpoints';
-
-// =============================================================================
-// MIXINS OVERVIEW
-//
-// Helpful mixins used throughout the site.
-//
-// =============================================================================
-
-// sass-lint:disable variable-name-format
-
-// Mixin for element elevations per Google Material specs.
-
-// @param {?number} $level - Elevation height of element via 'box-shadow'
-//    property where 1 appears closer to the surface and 5 appears further away.
-//    If no value is specified, then 'box-shadow' property is explicitly set
-//    to 'none'.
-// @param {?string=} $inset - Renders an inset shadow if value is 'inset'
-//    and $level is 2.
-@mixin elevation($level, $inset: null) {
-  @if $level == 0 {
-    border: 1px solid $GREY_300;
-    box-shadow: none;
-
-  } @else if $level == 1 {
-    box-shadow:
-    0 1px 2px 0 rgba($GREY_800, .3),
-    0 1px 3px 1px rgba($GREY_800, .15);
-
-  } @else if $level == 2 {
-    @if $inset == 'inset' {
-      box-shadow:
-      0 1px 2px 0 rgba($GREY_800, .3),
-      0 2px 6px 2px rgba($GREY_800, .15),
-      inset 0 4px 6px -4px rgba($GREY_500, .5);
-
-    } @else {
-      box-shadow:
-      0 1px 2px 0 rgba($GREY_800, .3),
-      0 2px 6px 2px rgba($GREY_800, .15);
-    }
-
-  } @else if $level == 3 {
-    box-shadow:
-    0 1px 3px 0 rgba($GREY_800, .3),
-    0 4px 8px 3px rgba($GREY_800, .15);
-
-  } @else if $level == 4 {
-    box-shadow:
-    0 2px 3px 0 rgba($GREY_800, .3),
-    0 6px 10px 4px rgba($GREY_800, .15);
-
-  } @else if $level == 5 {
-    box-shadow:
-    0 4px 4px 0 rgba($GREY_800, .3),
-    0 8px 12px 6px rgba($GREY_800, .15);
-
-  } @else {
-    box-shadow: none;
-  }
-}
-
-// Mixin to add custom scrollbars to an element
-
-// @param {?string=} $size - Width of the scrollbar in pixels
-// @param {?string=} $thumbColor - Color of the scrollbar thumb
-// @param {?string=} $trackColor - Color of the scrollbar track
-@mixin scrollbars($size: 10px, $thumbColor: $GREY_600, $trackColor: transparent) {
-  & {
-    // Sass Lint doesn't recognize these shiny new properties
-    // sass-lint:disable-block no-misspelled-properties
-    scrollbar-color: $thumbColor $trackColor;
-    scrollbar-width: thin;
-  }
-
-  &::-webkit-scrollbar {
-    height: $size;
-    width:  $size;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: $thumbColor;
-    background-clip: padding-box;
-    border: $size / 4 solid $trackColor;
-    border-radius: $size / 2;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: darken($thumbColor, 12%);
-  }
-
-  &::-webkit-scrollbar-thumb:active {
-    background-color: darken($thumbColor, 22%);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: $trackColor;
-  }
-}
-
-// Mixin for overflowing text to ellipsis (…).
-@mixin ellipsis() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Mixin for base button styles
-@mixin base-button() {
-  -webkit-tap-highlight-color: transparent; // Prevents tap highlight on hidden tooltips
-  align-items: center;
-  background: transparent;
-  border: 0;
-  border-radius: $GLOBAL_RADIUS;
-  color: $WEB_PRIMARY_COLOR;
-  cursor: pointer;
-  display: inline-flex;
-  font: 500 .875rem/2.25rem $PRIMARY_FONT;
-  height: 56px;
-  justify-content: center;
-  letter-spacing: 1px;
-  outline: 0;
-  padding: 0 16px;
-  position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color $TRANSITION_SPEED, box-shadow $TRANSITION_SPEED;
-  @include font_smoothing(
-    $FONT_SMOOTHING_MOZ,
-    $FONT_SMOOTHING_WEBKIT,
-    $FONT_SMOOTHING_RENDERING
-  );
-}
-
-// Mixin for exposing hover styles only on devices that support hover
-@mixin hover() {
-  @media (hover: hover) { @content; }
-}
-
-// Mixin for styling typography via maps containing required integer values for
-// font-family, font-size, font-weight, and line-height; with an optional value
-// for letter-spacing.
-// @param {!map} $specs - SCSS map with key/value pairs for rendering shorthand
-//     'font' property.
-// @prop {!number} $specs.FONT_WEIGHT
-// @prop {!number} $specs.FONT_SIZE
-// @prop {!number} $specs.LINE_HEIGHT
-// @prop {!string} $specs.FONT_FAMILY
-// @prop {?number} $specs.LETTER_SPACING
-// @prop {?string} $specs.TEXT_TRANSFORM
-@mixin font($specs) {
-  $font_weight: map-get($specs, FONT_WEIGHT);
-  $font_size: map-get($specs, FONT_SIZE);
-  $font_family: map-get($specs, FONT_FAMILY);
-  $line_height: map-get($specs, LINE_HEIGHT);
-
-  // Print font styles in shorthand syntax.
-  // sass-lint:disable-block indentation
-  font: $font_weight #{$font_size}px / #{calculate_unitless_line_height(
-      $line_height,
-      $font_size
-    )} $font_family;
-  // sass-lint:enable-block indentation
-
-  // Add letter-spacing if it's defined in the map.
-  @if map-has-key($specs, LETTER_SPACING) {
-    $letter_spacing: map-get($specs, LETTER_SPACING);
-    letter-spacing: #{$letter_spacing}px;
-  }
-
-  // Add text-transform if it's defined in the map.
-  @if map-has-key($specs, TEXT_TRANSFORM) {
-    $text_transform: map-get($specs, TEXT_TRANSFORM);
-    text-transform: $text_transform;
-  }
-
-  // Add margin-top if it's defined in the map.
-  @if map-has-key($specs, MARGIN_TOP) {
-    $margin_top: map-get($specs, MARGIN_TOP);
-    margin-top: #{$margin_top}px;
-  }
-
-  // Add margin-bottom if it's defined in the map.
-  @if map-has-key($specs, MARGIN_BOTTOM) {
-    $margin_bottom: map-get($specs, MARGIN_BOTTOM);
-    margin-bottom: #{$margin_bottom}px;
-  }
-}
-
-// Mixin for a Material icon. This mimics the important parts of the
-// 'material-icons' class defined at http://fonts.googleapis.com/css?family=Material+Icons.
-// You can look up the name of an icon at https://material.io/icons/.
-@mixin font-material-icon() {
-  -moz-osx-font-smoothing: $FONT_SMOOTHING_MOZ; // @alternate
-  -webkit-font-smoothing: $FONT_SMOOTHING_WEBKIT; // @alternate
-  font: normal normal normal 24px / 1 'Material Icons';
-  font-feature-settings: 'liga';
-  text-rendering: $FONT_SMOOTHING_RENDERING;
-  text-transform: none;
-  word-wrap: normal;
-}
-
-// Sets font smoothing variables
-// @param {string} $moz The value for moz-osx-font-smoothing
-// @param {string} $webkit The value for webkit-font-smoothing
-// @param {string} $rendering The value for text-rendering
-@mixin font-smoothing($moz, $webkit, $rendering) {
-  -moz-osx-font-smoothing: $moz;
-  -webkit-font-smoothing: $webkit;
-  text-rendering: $rendering;
-}
-
-// -----------------------------------------------------------------------------
-// Typography
-//
-// Elements should extend these placeholders to get consistent font styles.
-// This is recommended over using mixins like @include font($SOME_FONT_MAP).
-//
-// -----------------------------------------------------------------------------
-
-// For elements that want the standard font-size and line-height that appears
-// on the learn and measure pages.
-@mixin w-body-text {
-  @include font($BODY);
-
-  @include bp(xxsm) {
-    @include font($BODY_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($BODY_XSMALL);
-  }
-}
-
-// For elements that want the larger font-size and line-height that appears in
-// articles and guides.
-@mixin w-article-text {
-  @include font($ARTICLE);
-
-  @include bp(xxsm) {
-    @include font($ARTICLE_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($ARTICLE_XSMALL);
-  }
-}
-
-@mixin w-headline {
-  @include font($BASE_HEADLINE);
-  color: $PRIMARY_TEXT_COLOR; // DevSite override
-  margin: 0;
-  overflow: visible;
-}
-
-@mixin w-headline--one {
-  @include font($HEADLINE_1);
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_1_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_1_XSMALL);
-  }
-}
-
-@mixin w-headline--two {
-  @include font($HEADLINE_2);
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_2_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_2_XSMALL);
-  }
-}
-
-@mixin w-headline--two-small {
-  @include font($HEADLINE_2_ARTICLE);
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_2_ARTICLE_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_2_ARTICLE_XSMALL);
-  }
-}
-
-@mixin w-headline--two-faded {
-  @include font($HEADLINE_2_SMALL_CAPS);
-  color: $GREY_600;
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_2_SMALL_CAPS_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_2_SMALL_CAPS_XSMALL);
-  }
-}
-
-@mixin w-headline--three {
-  @include font($HEADLINE_3);
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_3_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_3_XSMALL);
-  }
-}
-
-@mixin w-headline--four {
-  @include font($HEADLINE_4);
-  color: $GREY_700;
-
-  @include bp(xxsm) {
-    @include font($HEADLINE_4_XXSMALL);
-  }
-
-  @include bp(xsm) {
-    @include font($HEADLINE_4_XSMALL);
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Overlays
-//
-// Elements should extend these placeholders to get consistent button overlay
-// effects. These are used to tint an interactive control during
-// hover/focus/active states.
-//
-// -----------------------------------------------------------------------------
-
-@mixin w-overlay {
-  bottom: 0;
-  content: '';
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: background-color $TRANSITION_SPEED, border $TRANSITION_SPEED;
-  z-index: 1;
-}
-
-@mixin w-overlay-hover {
-  background-color: rgba($GREY_900, .04);
-}
-
-@mixin w-overlay-focus {
-  background-color: rgba($GREY_900, .12);
-}
-
-@mixin w-overlay-active {
-  background-color: rgba($GREY_900, .16);
-}
diff --git a/test/integration/build-test.js b/test/integration/build-test.js
index e00c0c47914..26cfc9f8a98 100644
--- a/test/integration/build-test.js
+++ b/test/integration/build-test.js
@@ -12,32 +12,30 @@ describe('Build test', function () {
     this.timeout(0);
 
     console.log('Running npm run build...');
-    try {
-      await exec('ELEVENTY_ENV=prod npm run build');
-    } catch (err) {
-      assert.fail(err);
+    if (fs.existsSync('./dist')) {
+      console.log(
+        '`dist` folder already exists, build completed. Starting tests.',
+      );
+    } else {
+      try {
+        await exec('ELEVENTY_ENV=prod npm run build');
+      } catch (err) {
+        assert.fail(err);
+      }
+      console.log('Build completed. Starting tests.');
     }
-    console.log('Build completed. Starting tests.');
 
     [
-      path.join('en', 'algolia.json'),
-      path.join('en', 'feed.xml'),
-      path.join('en', 'index.html'),
-      path.join('en', 'index.json'),
-      path.join('en', 'offline', 'index.json'),
-      path.join('en', 'authors', 'addyosmani', 'feed.xml'),
-      path.join('en', 'tags', 'progressive-web-apps', 'feed.xml'),
-      path.join('images', 'favicon.ico'),
-      path.join('images', 'lockup.svg'),
-      '_redirects.yaml',
-      'app.css',
-      'bootstrap.js',
+      'feed.xml',
+      'index.html',
+      path.join('authors', 'addyosmani', 'feed.xml'),
+      path.join('tags', 'progressive-web-apps', 'feed.xml'),
+      path.join('css', 'next.css'),
+      'pages.json',
       'manifest.webmanifest',
-      'nuke-sw.js',
+      'sw.js',
       'robots.txt',
       'sitemap.xml',
-      'sw-partial-layout.partial',
-      'sw.js',
     ].forEach((file) =>
       assert.ok(
         fs.existsSync(path.join(dist, file)),
@@ -45,27 +43,19 @@ describe('Build test', function () {
       ),
     );
 
-    const contents = fs.readdirSync(dist);
-
-    // Check that there's a Rollup-generated file with the given name that looks
-    // like `[name]-[hash].js`.
-    ['app', 'measure', 'newsletter', 'default'].forEach((chunked) => {
-      const re = new RegExp(`^${chunked}-\\w+\\.js$`);
+    const contents = fs.readdirSync(path.join(dist, 'js'));
+    // Check that there's a Rollup-generated file for all of our entrypoints.
+    [
+      'app.js',
+      'measure.js',
+      'newsletter.js',
+      'default.js',
+      'content.js',
+    ].forEach((file) => {
       assert(
-        contents.find((file) => re.test(file)),
-        `Could not find Rollup output: ${chunked}`,
+        contents.find((item) => item === file),
+        `Could not find Rollup output: ${file}`,
       );
     });
-
-    // Check that there's NOT a web.dev/LIVE partial. We confirm that partials
-    // are generally created above, in the list of common checks.
-    assert(
-      !fs.existsSync(path.join(dist, 'en/live/index.json')),
-      'web.dev/LIVE partial should not exist',
-    );
-    assert(
-      fs.existsSync(path.join(dist, 'en/live/index.html')),
-      'web.dev/LIVE page should exist',
-    );
   });
 });
diff --git a/test/integration/index.js b/test/integration/index.js
index f1d548aa405..4da71f92b96 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -1,5 +1,3 @@
 describe('Integration tests', function () {
   require('./build-test');
-  require('./partials-test');
-  require('./src/site/_collections');
 });
diff --git a/test/integration/partials-test.js b/test/integration/partials-test.js
deleted file mode 100644
index b03d545e74f..00000000000
--- a/test/integration/partials-test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const assert = require('assert');
-const cheerio = require('cheerio');
-const fs = require('fs');
-const path = require('path');
-const dist = path.resolve(__dirname, '..', '..', 'dist');
-
-describe('Service worker partials', function () {
-  it('includes correct fields for home page', function () {
-    const partial = require(path.join(dist, 'en', 'index.json'));
-
-    const htmlPath = path.join(dist, 'en', 'index.html');
-    const $ = cheerio.load(fs.readFileSync(htmlPath));
-    const partialFromHtml = {
-      raw: $('#content').html(),
-      lang: $('html').attr('lang'),
-      title: $('title').text(),
-      rss: $('link[type="application/atom+xml"]').attr('href'),
-      offline: Boolean($('meta[name="offline"]').attr('content')) || false,
-    };
-
-    assert.deepStrictEqual(partial, partialFromHtml);
-  });
-
-  it('includes RSS urls', function () {
-    const expected = '/feed.xml';
-    const partialPath = path.join(dist, 'en');
-    const partial = require(path.join(partialPath, 'index.json'));
-
-    assert.deepStrictEqual(partial.rss, expected);
-    assert.ok(
-      fs.existsSync(path.join(partialPath, 'feed.xml')),
-      `Could not find feed.xml in ${partialPath}`,
-    );
-  });
-
-  it('includes unique RSS urls for authors', function () {
-    const expected = '/authors/addyosmani/feed.xml';
-    const partialPath = path.join(dist, 'en', 'authors', 'addyosmani');
-    const partial = require(path.join(partialPath, 'index.json'));
-
-    assert.deepStrictEqual(partial.rss, expected);
-    assert.ok(
-      fs.existsSync(path.join(partialPath, 'feed.xml')),
-      `Could not find feed.xml in ${partialPath}`,
-    );
-  });
-
-  it('includes unique RSS urls for tags', function () {
-    const expected = '/tags/progressive-web-apps/feed.xml';
-    const partialPath = path.join(dist, 'en', 'tags', 'progressive-web-apps');
-    const partial = require(path.join(partialPath, 'index.json'));
-
-    assert.deepStrictEqual(partial.rss, expected);
-    assert.ok(
-      fs.existsSync(path.join(partialPath, 'feed.xml')),
-      `Could not find feed.xml in ${partialPath}`,
-    );
-  });
-});
diff --git a/test/integration/src/site/_collections/eleventy.js b/test/integration/src/site/_collections/eleventy.js
deleted file mode 100644
index e262489907f..00000000000
--- a/test/integration/src/site/_collections/eleventy.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const path = require('path');
-const {
-  postsWithLighthouse,
-} = require(`../../../../../src/site/_collections/posts-with-lighthouse`);
-const recentBlogPosts = require(`../../../../../src/site/_collections/recent-blog-posts`);
-
-module.exports = function (config) {
-  // Order is important, as it uses the same collections object under the hood.
-  // Keep the same order of calls as in /eleventy.js.
-  config.addCollection('postsWithLighthouse', postsWithLighthouse);
-  config.addCollection('recentBlogPosts', recentBlogPosts);
-
-  return {
-    dir: {
-      output: path.join(__dirname, '.tmp'),
-    },
-  };
-};
diff --git a/test/integration/src/site/_collections/fixtures/test-1.md b/test/integration/src/site/_collections/fixtures/test-1.md
deleted file mode 100644
index 7d681724c2a..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-1.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-tags: [ "blog", "post" ]
-date: 2020-01-01
-hero: hero.jpg
-thumbnail: thumbnail.png
----
-
-# A test post
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/fixtures/test-2.md b/test/integration/src/site/_collections/fixtures/test-2.md
deleted file mode 100644
index c07abd9e85b..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-2.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-tags: [ "blog" ]
-date: 2020-01-02
-hero: hero.jpg
-thumbnail: thumbnail.png
----
-
-# A test post
-
-This test post belongs to collections:
-+ recentBlogPosts (in prod)
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/fixtures/test-3.md b/test/integration/src/site/_collections/fixtures/test-3.md
deleted file mode 100644
index 86de194c729..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-3.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-tags: [ "blog", "post" ]
-date: 2020-01-03
-hero: hero.jpg
-draft: true
-web_lighthouse:
-  - aria-hidden-focus
----
-
-# A test post
-
-This test post belongs to collections:
-+ recentBlogPosts (in dev)
-+ postsWithLighthouse (in dev)
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/fixtures/test-4.md b/test/integration/src/site/_collections/fixtures/test-4.md
deleted file mode 100644
index 0284094f4ed..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-4.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-tags: [ "blog", "post" ]
-date: 2020-01-04
-thumbnail: thumbnail.png
-web_lighthouse:
-  - false
----
-
-# A test post
-
-This test post belongs to collections:
-+ recentBlogPosts
-+ postsWithLighthouse
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/fixtures/test-5.md b/test/integration/src/site/_collections/fixtures/test-5.md
deleted file mode 100644
index e2001524465..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-5.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-tags: [ "blog" ]
-date: 2020-01-05
-hero: hero.jpg
-web_lighthouse:
-  - aria-hidden-focus
----
-
-# A test post
-
-This test post belongs to collections:
-+ recentBlogPosts
diff --git a/test/integration/src/site/_collections/fixtures/test-6.md b/test/integration/src/site/_collections/fixtures/test-6.md
deleted file mode 100644
index d0b2e96d69f..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-6.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-tags: [ "" ]
-date: 2020-01-06
-hero: hero.jpg
----
-
-# A test post
diff --git a/test/integration/src/site/_collections/fixtures/test-7.md b/test/integration/src/site/_collections/fixtures/test-7.md
deleted file mode 100644
index c691577a82c..00000000000
--- a/test/integration/src/site/_collections/fixtures/test-7.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-tags: [ "blog" ]
-date: 2020-01-07
----
-
-# A test post
diff --git a/test/integration/src/site/_collections/index.js b/test/integration/src/site/_collections/index.js
deleted file mode 100644
index 5ee518a136d..00000000000
--- a/test/integration/src/site/_collections/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const runEleventy = require('./runEleventy');
-
-describe('_collections', function () {
-  describe('in DEV env', function () {
-    before(async function () {
-      await runEleventy(''); // falsey implies 'dev'
-      console.log('Eleventy build finished. Starting tests...');
-    });
-
-    after(function () {
-      fs.rmdirSync(path.join('.', '.tmp'), {recursive: true});
-    });
-
-    require('./posts-with-lighthouse/dev');
-    require('./recent-blog-posts/dev');
-  });
-
-  describe('in PROD env', function () {
-    before(async function () {
-      await runEleventy('prod');
-      console.log('Eleventy build finished. Starting tests...');
-    });
-
-    after(function () {
-      fs.rmdirSync(path.join('.', '.tmp'), {recursive: true});
-    });
-
-    require('./posts-with-lighthouse/prod');
-    require('./recent-blog-posts/prod');
-  });
-});
diff --git a/test/integration/src/site/_collections/posts-with-lighthouse/collection.md b/test/integration/src/site/_collections/posts-with-lighthouse/collection.md
deleted file mode 100644
index 8dbb54284e7..00000000000
--- a/test/integration/src/site/_collections/posts-with-lighthouse/collection.md
+++ /dev/null
@@ -1,3 +0,0 @@
-{%- for post in collections.postsWithLighthouse -%}
-<p>{{ post.fileSlug }}</p>
-{%- endfor -%}
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/posts-with-lighthouse/dev.js b/test/integration/src/site/_collections/posts-with-lighthouse/dev.js
deleted file mode 100644
index 24fabcbb7f9..00000000000
--- a/test/integration/src/site/_collections/posts-with-lighthouse/dev.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const assert = require('assert');
-const fs = require('fs');
-const path = require('path');
-
-const outputPath = path.join(
-  __dirname,
-  '..',
-  '.tmp',
-  path.basename(__dirname),
-  'collection',
-  'index.html',
-);
-
-describe('posts-with-lighthouse', function () {
-  it('includes posts with a pathItem tag and a web_lighthouse property', async function () {
-    const expected = '<p>test-3</p><p>test-4</p>';
-    const actual = fs.readFileSync(outputPath, 'utf8');
-    assert.equal(actual, expected);
-  });
-});
diff --git a/test/integration/src/site/_collections/posts-with-lighthouse/prod.js b/test/integration/src/site/_collections/posts-with-lighthouse/prod.js
deleted file mode 100644
index b5b248d17f7..00000000000
--- a/test/integration/src/site/_collections/posts-with-lighthouse/prod.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const assert = require('assert');
-const fs = require('fs');
-const path = require('path');
-
-const outputPath = path.join(
-  __dirname,
-  '..',
-  '.tmp',
-  path.basename(__dirname),
-  'collection',
-  'index.html',
-);
-
-describe('posts-with-lighthouse', function () {
-  it('does not include drafts', async function () {
-    const expected = '<p>test-4</p>';
-    const actual = fs.readFileSync(outputPath, 'utf8');
-    assert.equal(actual, expected);
-  });
-});
diff --git a/test/integration/src/site/_collections/recent-blog-posts/collection.md b/test/integration/src/site/_collections/recent-blog-posts/collection.md
deleted file mode 100644
index 66cbd78813c..00000000000
--- a/test/integration/src/site/_collections/recent-blog-posts/collection.md
+++ /dev/null
@@ -1,3 +0,0 @@
-{%- for post in collections.recentBlogPosts -%}
-<p>{{ post.fileSlug }}</p>
-{%- endfor -%}
\ No newline at end of file
diff --git a/test/integration/src/site/_collections/recent-blog-posts/dev.js b/test/integration/src/site/_collections/recent-blog-posts/dev.js
deleted file mode 100644
index 4d11fb6f939..00000000000
--- a/test/integration/src/site/_collections/recent-blog-posts/dev.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const assert = require('assert');
-const fs = require('fs');
-const path = require('path');
-
-const outputPath = path.join(
-  __dirname,
-  '..',
-  '.tmp',
-  path.basename(__dirname),
-  'collection',
-  'index.html',
-);
-
-describe('recent-blog-posts', function () {
-  it('includes 3 most recent blog posts that have a hero image or a thumbnail, ordered by date', async function () {
-    const expected = '<p>test-5</p><p>test-4</p><p>test-3</p>';
-    const actual = fs.readFileSync(outputPath, 'utf8');
-    assert.equal(actual, expected);
-  });
-});
diff --git a/test/integration/src/site/_collections/recent-blog-posts/prod.js b/test/integration/src/site/_collections/recent-blog-posts/prod.js
deleted file mode 100644
index 3625bf13a0a..00000000000
--- a/test/integration/src/site/_collections/recent-blog-posts/prod.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const assert = require('assert');
-const fs = require('fs');
-const path = require('path');
-
-const outputPath = path.join(
-  __dirname,
-  '..',
-  '.tmp',
-  path.basename(__dirname),
-  'collection',
-  'index.html',
-);
-
-describe('recent-blog-posts', function () {
-  it('does not include drafts', async function () {
-    const expected = '<p>test-5</p><p>test-4</p><p>test-2</p>';
-    const actual = fs.readFileSync(outputPath, 'utf8');
-    assert.equal(actual, expected);
-  });
-});
diff --git a/test/integration/src/site/_collections/runEleventy.js b/test/integration/src/site/_collections/runEleventy.js
deleted file mode 100644
index 199e1952b60..00000000000
--- a/test/integration/src/site/_collections/runEleventy.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const assert = require('assert');
-const util = require('util');
-const exec = util.promisify(require('child_process').exec);
-
-module.exports = async function (env) {
-  console.log('Running Eleventy...');
-  try {
-    await exec(`ELEVENTY_ENV=${env} npx @11ty/eleventy --config=eleventy.js`, {
-      cwd: __dirname,
-    });
-  } catch (err) {
-    assert.fail(err);
-  }
-};
diff --git a/test/unit/algolia/index.js b/test/unit/algolia/index.js
new file mode 100644
index 00000000000..4afe132d7e0
--- /dev/null
+++ b/test/unit/algolia/index.js
@@ -0,0 +1,116 @@
+const {expect} = require('chai');
+
+const {sizeOfJSONInBytes} = require('../../../shared/sizeOfJSONInBytes');
+const {
+  chunkAlgolia,
+  maxChunkSizeInBytes,
+  maxItemSizeInBytes,
+  trimBytes,
+} = require('../../../algolia');
+
+// The trimming might not result in a string with the exact number of bytes,
+// since it honors multi-byte characters. Rather than testing for an exact
+// byte size, test that the trimmed object is within a small threshold.
+const BYTE_THRESHOLD = 4;
+
+/**
+ * Returns the size in bytes of an UTF-8 encoded string.
+ * (This differs from sizeOfJSONInBytes(), which stringifies the input first.)
+ *
+ * @param {string} str
+ * @return {number}
+ */
+const sizeOfStringInBytes = (str) => {
+  return Buffer.byteLength(str, 'utf8');
+};
+
+/**
+ * Very simple mock of an AlgoliaItem, including some metadata, with an
+ * approximate size of contentLengthInBytes, plus a 10 character title.
+ *
+ * @param {string} character
+ * @param {number} contentLengthInBytes
+ * @returns {AlgoliaItem}
+ */
+const createAlgoliaItem = (character, contentLengthInBytes) => {
+  const characterSizeInBytes = sizeOfStringInBytes(character);
+
+  // repeat() will automatically truncate any decimal values.
+  const content = character.repeat(contentLengthInBytes / characterSizeInBytes);
+  const title = character.repeat(10);
+
+  return /** @type {AlgoliaItem} */ ({content, title});
+};
+
+describe('Algolia Unit Tests', function () {
+  // a is 1 byte, é is 2 bytes, and 豊 is 3 bytes.
+  // These tests confirm that trimming content using characters with various
+  // underlying sizes happens within a threshold of the size of each character.
+  for (const character of ['a', 'é', '豊']) {
+    describe(`trimBytes for character '${character}'`, function () {
+      it(`trims if the content is twice 'maxItemSizeInBytes'`, function () {
+        const mockItem = createAlgoliaItem(character, maxItemSizeInBytes * 2);
+
+        // Modify a copy of the mock item for later comparison.
+        const trimmedItem = trimBytes(Object.assign({}, mockItem));
+        const trimmedSizeInBytes = sizeOfJSONInBytes(trimmedItem);
+
+        expect(
+          Math.abs(trimmedSizeInBytes - maxItemSizeInBytes),
+        ).to.be.lessThanOrEqual(BYTE_THRESHOLD);
+        expect(trimmedItem).not.to.eql(mockItem);
+      });
+
+      it(`trims if the content is equal to 'maxItemSizeInBytes'`, function () {
+        const mockItem = createAlgoliaItem(character, maxItemSizeInBytes);
+
+        // Modify a copy of the mock item for later comparison.
+        const trimmedItem = trimBytes(Object.assign({}, mockItem));
+        const trimmedSizeInBytes = sizeOfJSONInBytes(trimmedItem);
+
+        expect(
+          Math.abs(trimmedSizeInBytes - maxItemSizeInBytes),
+        ).to.be.lessThanOrEqual(BYTE_THRESHOLD);
+        expect(trimmedItem).not.to.eql(mockItem);
+      });
+
+      it(`doesn't modify content if it's under 'maxItemSizeInBytes'`, function () {
+        const mockItem = createAlgoliaItem(character, maxItemSizeInBytes / 2);
+
+        // Modify a copy of the mock item for later comparison.
+        const trimmedItem = trimBytes(Object.assign({}, mockItem));
+        const trimmedSizeInBytes = sizeOfJSONInBytes(trimmedItem);
+
+        expect(trimmedSizeInBytes).to.be.lessThanOrEqual(maxItemSizeInBytes);
+        expect(trimmedItem).to.eql(mockItem);
+      });
+    });
+  }
+
+  describe('chunkAlgolia', function () {
+    it('returns more than one array if bytes twice `maxItemSizeInBytes`', function () {
+      const length = Math.ceil((maxChunkSizeInBytes * 2) / maxItemSizeInBytes);
+      const mockItems = Array.from({length}, () =>
+        createAlgoliaItem('a', maxItemSizeInBytes),
+      );
+      const chunkedmockItems = chunkAlgolia(mockItems);
+      expect(chunkedmockItems.length).to.be.above(1);
+    });
+
+    it('returns one array if less than `maxItemSizeInBytes`', function () {
+      const mockItems = [createAlgoliaItem('a', maxChunkSizeInBytes / 2)];
+      const chunkedmockItems = chunkAlgolia(mockItems);
+      expect(chunkedmockItems.length).to.be.equal(1);
+    });
+
+    it('throws error if an element is equal to `maxItemSizeInBytes`', function () {
+      const mockItems = [createAlgoliaItem('a', maxChunkSizeInBytes)];
+      expect(() => chunkAlgolia(mockItems)).to.throw();
+    });
+
+    it('throws error if an element is larger than `maxItemSizeInBytes`', function () {
+      const mockItems = [createAlgoliaItem('a', maxChunkSizeInBytes * 2)];
+      expect(() => chunkAlgolia(mockItems)).to.throw();
+    });
+  });
+});
diff --git a/test/unit/index.js b/test/unit/index.js
index 5c7a512a2d9..63a183765b1 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,4 +1,4 @@
 describe('Unit tests', function () {
+  require('./algolia');
   require('./src');
-  require('./redirect-handler');
 });
diff --git a/test/unit/redirect-handler.js b/test/unit/redirect-handler.js
deleted file mode 100644
index f63af2d71ce..00000000000
--- a/test/unit/redirect-handler.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * @fileoverview Tests for the redirect-handler used by the server.
- */
-
-const assert = require('assert');
-const {
-  baseUrlPrefix,
-  ensureTrailingSlashOnly,
-  prepareHandler,
-} = require('../../redirect-handler');
-
-const sharedYamlSource = `
-redirects:
-- from: /subscribe
-  to: /newsletter
-
-- from: /subscribe/all/...
-  to: /newsletter
-
-- from: /foo/...
-  to: /bar/...
-
-- from: /external/...
-  to: https://google.com/...
-`;
-
-describe('redirect-handler', function () {
-  it('normalizes paths', function () {
-    assert.equal(ensureTrailingSlashOnly('/foo/index.html'), '/foo/');
-    assert.equal(
-      ensureTrailingSlashOnly('/foo/index.HTML'),
-      '/foo/index.HTML/',
-      'must only match lower-case index.html',
-    );
-    assert.strictEqual(ensureTrailingSlashOnly(''), '/');
-  });
-
-  it('handles simple redirects', function () {
-    const h = prepareHandler(sharedYamlSource, 'https://web.dev');
-
-    assert.strictEqual(h('/subscribe'), '/newsletter');
-    assert.strictEqual(
-      h('/subscribe/index.html'),
-      '/newsletter',
-      'trailing index.html is ignored',
-    );
-    assert.strictEqual(
-      h('/subscribe/other.html'),
-      null,
-      'unhandled URL returns null',
-    );
-  });
-
-  it('handles group redirects', function () {
-    const h = prepareHandler(sharedYamlSource, 'https://web.dev');
-
-    assert.strictEqual(
-      h('/subscribe/all/foo'),
-      '/newsletter',
-      'group => non-group redirect',
-    );
-    assert.strictEqual(
-      h('/foo/x'),
-      '/bar/x/',
-      'group redirect functions, trailing slash added',
-    );
-    assert.strictEqual(
-      h('/foo/x/index.html'),
-      '/bar/x/',
-      'index.html is stripped',
-    );
-    assert.strictEqual(
-      h('/external/hello'),
-      'https://google.com/hello/',
-      'external redirect is also normalized',
-    );
-    assert.strictEqual(h('/external/'), 'https://google.com/');
-    assert.strictEqual(
-      h('/external'),
-      'https://google.com/',
-      'matches without trailing slash',
-    );
-  });
-
-  it('includes query strings', function () {
-    const h = prepareHandler(sharedYamlSource, 'https://web.dev');
-
-    assert.strictEqual(h('/subscribe/?foo'), '/newsletter?foo=');
-    assert.strictEqual(h('/subscribe/?foo=1&foo=2'), '/newsletter?foo=1&foo=2');
-  });
-
-  it('has the expected baseUrl', function () {
-    assert.strictEqual(baseUrlPrefix, 'https://web.dev/');
-  });
-});
diff --git a/test/unit/src/lib/components/Carousel/index.js b/test/unit/src/lib/components/Carousel/index.js
new file mode 100644
index 00000000000..2f95c412676
--- /dev/null
+++ b/test/unit/src/lib/components/Carousel/index.js
@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2022 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {expect, assert} = require('chai');
+require('../../../../../../src/lib/components/Carousel/index');
+
+const cardCount = 10;
+/**
+ * Causes 600ms delay to allow UI changes, such as smooth scroll, to occur.
+ *
+ * @returns Promise<void>
+ */
+const sleep = () => new Promise((res) => setTimeout(res, 600));
+
+/**
+ * @returns {Promise<import('../../../../../../src/lib/components/Carousel/index').Carousel>}
+ */
+const setup = async () => {
+  const webCarousel =
+    /** @type {import('../../../../../../src/lib/components/Carousel/index').Carousel} */ (
+      document.createElement('web-carousel')
+    );
+
+  const divCarousel = document.createElement('div');
+  divCarousel.classList.add('carousel');
+
+  const backButton = document.createElement('button');
+  backButton.setAttribute('data-direction', 'prev');
+  divCarousel.append(backButton);
+
+  const divCarouselTrack = document.createElement('div');
+  divCarouselTrack.classList.add('carousel__track', 'reel');
+  divCarouselTrack.setAttribute('data-scroll', 'snap');
+
+  for (let i = 0; i < cardCount; i++) {
+    const cardDiv = document.createElement('div');
+    divCarouselTrack.append(cardDiv);
+  }
+
+  divCarousel.append(divCarouselTrack);
+
+  const nextButton = document.createElement('button');
+  nextButton.setAttribute('data-direction', 'next');
+  divCarousel.append(nextButton);
+
+  webCarousel.append(divCarousel);
+  document.body.append(webCarousel);
+  // @ts-ignore
+  await webCarousel.updateComplete;
+
+  return webCarousel;
+};
+
+describe('Carousel', function () {
+  before(async function () {
+    await customElements.whenDefined('web-carousel');
+  });
+
+  it('constructor sets initial values', async function () {
+    const webCarousel = await setup();
+    expect(webCarousel._carouselTrack).to.be.instanceOf(HTMLElement);
+    assert.isNumber(webCarousel.index);
+    expect(webCarousel.index).to.equal(0);
+    expect(webCarousel._items.length).to.equal(cardCount);
+    expect(webCarousel._nextButton).to.be.instanceOf(HTMLButtonElement);
+    expect(webCarousel._previousButton).to.be.instanceOf(HTMLButtonElement);
+  });
+
+  it('clicking on arrow scrolls carousel', async function () {
+    const webCarousel = await setup();
+
+    const carouselTrack = webCarousel._carouselTrack;
+    const overflow =
+      carouselTrack.parentElement.clientWidth - carouselTrack.clientWidth;
+
+    let previousScrollLeft = carouselTrack.scrollLeft + overflow;
+    const nextButton = webCarousel._nextButton;
+    const previousButton = webCarousel._previousButton;
+
+    // Check if next moves forward
+    nextButton.click();
+    await sleep();
+    expect(carouselTrack.scrollLeft).to.be.above(previousScrollLeft);
+    previousScrollLeft = carouselTrack.scrollLeft + overflow; // Account for overflow
+
+    // Check if back moves backward
+    previousButton.click();
+    await sleep();
+    expect(carouselTrack.scrollLeft).to.be.below(previousScrollLeft);
+    previousScrollLeft = carouselTrack.scrollLeft;
+
+    // Check if back at beginning doesn't move
+    previousButton.click();
+    await sleep();
+    expect(carouselTrack.scrollLeft).to.be.equal(previousScrollLeft);
+  });
+
+  it('updates tracked index when element is clicked', async function () {
+    const webCarousel = await setup();
+    const index = Math.floor(cardCount / 2);
+    const items = webCarousel._items;
+    items[index].click();
+    expect(webCarousel.index).to.equal(index);
+  });
+
+  it('updates tracked index when arrow keys are pressed', async function () {
+    const webCarousel = await setup();
+    const track = webCarousel._carouselTrack;
+    track.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowRight'}));
+    expect(webCarousel.index).to.equal(1);
+    track.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowLeft'}));
+    expect(webCarousel.index).to.equal(0);
+  });
+});
diff --git a/test/unit/src/lib/components/LearnFilter/index.js b/test/unit/src/lib/components/LearnFilter/index.js
new file mode 100644
index 00000000000..5c732dc5b95
--- /dev/null
+++ b/test/unit/src/lib/components/LearnFilter/index.js
@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {assert} = require('../../assert');
+require('../../../../../../src/lib/components/LearnFilter/index');
+
+const collectionIds = [
+  'bentley',
+  'bert',
+  'ernie',
+  'toast',
+  'deebo',
+  'ziggy',
+  'timo',
+  'ewok',
+  'anabelle',
+  'shelly',
+  'elroy',
+  'toto',
+  'rascal',
+];
+
+const setup = async () => {
+  const filter = document.createElement('web-learn-filter');
+  const filterFilters = collectionIds.map((i) => ({id: i, title: i}));
+  filter.setAttribute('filters', JSON.stringify(filterFilters));
+
+  const learningPathsElement = document.createElement('div');
+  learningPathsElement.setAttribute('id', 'learn__collections');
+  for (const collectionId of collectionIds) {
+    const learningPathsElementChild = document.createElement('div');
+    learningPathsElementChild.setAttribute('id', collectionId);
+    learningPathsElement.appendChild(learningPathsElementChild);
+  }
+
+  document.body.append(filter);
+  // @ts-ignore
+  await filter.updateComplete;
+  document.body.append(learningPathsElement);
+
+  return [filter, learningPathsElement];
+};
+
+describe('LearnFilter', function () {
+  before(async function () {
+    await customElements.whenDefined('web-learn-filter');
+  });
+
+  it('clicking all should still show all elements', async function () {
+    const [filter, learningPathsElement] = await setup();
+    try {
+      /** @type {HTMLButtonElement} */
+      const allButton = filter.querySelector('button.pill');
+      allButton.click();
+
+      let notHidden = 0;
+
+      for (const child of learningPathsElement.children) {
+        notHidden += +!child.classList.contains('hidden-yes');
+      }
+      assert(notHidden === collectionIds.length, 'no element should be hidden');
+    } finally {
+      filter.remove();
+      learningPathsElement.remove();
+    }
+  });
+
+  it('clicking a filter should only show that element', async function () {
+    const [filter, learningPathsElement] = await setup();
+    try {
+      /** @type {NodeListOf<HTMLButtonElement>} */
+      const buttons = filter.querySelectorAll('button.pill');
+      const button = buttons.item(2);
+      button.click();
+
+      let notHidden = 0;
+
+      for (const child of learningPathsElement.children) {
+        notHidden += +!child.classList.contains('hidden-yes');
+      }
+
+      assert(notHidden === 1, 'only one element should be shown');
+    } finally {
+      filter.remove();
+      learningPathsElement.remove();
+    }
+  });
+});
diff --git a/test/unit/src/lib/components/LighthouseGauge/index.js b/test/unit/src/lib/components/LighthouseGauge/index.js
deleted file mode 100644
index 0b49f9e4528..00000000000
--- a/test/unit/src/lib/components/LighthouseGauge/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {assert} = require('../../assert');
-require('../../../../../../src/lib/components/LighthouseGauge/index');
-
-describe('LighthouseGauge', function () {
-  before(async function () {
-    await customElements.whenDefined('web-lighthouse-gauge');
-  });
-
-  it('should reflect its score property to aria-valuenow', async function () {
-    const gauge = document.createElement('web-lighthouse-gauge');
-    document.body.append(gauge);
-    try {
-      gauge.score = 0.5;
-      await gauge.updateComplete;
-      assert(
-        gauge.getAttribute('aria-valuenow') === '50',
-        'attr should reflect property',
-      );
-    } finally {
-      gauge.remove();
-    }
-  });
-});
diff --git a/test/unit/src/lib/components/LivestreamContainer/index.js b/test/unit/src/lib/components/LivestreamContainer/index.js
deleted file mode 100644
index 1b78d699c78..00000000000
--- a/test/unit/src/lib/components/LivestreamContainer/index.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const {assert} = require('../../assert');
-require('../../../../../../src/lib/components/LivestreamContainer/index');
-
-describe('LivestreamContainer', function () {
-  let container;
-
-  before(async function () {
-    await customElements.whenDefined('web-livestream-container');
-
-    container = document.createElement('web-livestream-container');
-    document.body.append(container);
-    container.onStateChanged({activeEventDay: null, isSignedIn: false});
-  });
-
-  after(() => {
-    container.remove();
-  });
-
-  it('should render an iframe with a videoId', async function () {
-    await container.updateComplete;
-    assert(
-      container.renderRoot.querySelector('iframe') === null,
-      'no iframe should be rendered without videoId',
-    );
-
-    container.onStateChanged({
-      activeEventDay: {
-        videoId: 'HtTyRajRuyY',
-        isChatActive: false,
-      },
-      isSignedIn: false,
-    });
-    await container.updateComplete;
-
-    const ytIframe = container.renderRoot.querySelector('iframe');
-    assert(ytIframe !== null, 'iframe should render');
-
-    const iframes = container.renderRoot.querySelectorAll('iframe');
-    assert(iframes.length === 1, 'should be single iframe');
-
-    assert(
-      ytIframe.src === 'https://www.youtube.com/embed/HtTyRajRuyY',
-      'yt iframe src should be as expected',
-    );
-
-    container.onStateChanged({
-      activeEventDay: {
-        videoId: 'HtTyRajRuyY',
-        isChatActive: true,
-      },
-      isSignedIn: false,
-    });
-    await container.updateComplete;
-
-    const iframesWithChat = container.renderRoot.querySelectorAll('iframe');
-    assert(iframesWithChat.length === 2, 'should be two iframes');
-    assert(iframesWithChat[0] === ytIframe, 'YouTube iframe should not change');
-  });
-
-  it.skip('should reload on signed-in state change', async function () {
-    container.onStateChanged({
-      activeEventDay: {
-        videoId: 'HtTyRajRuyY',
-        isChatActive: false,
-      },
-      isSignedIn: true,
-    });
-    await container.updateComplete;
-
-    const ytIframe = container.renderRoot.querySelector('iframe');
-    assert(ytIframe !== null, 'iframe should render');
-
-    // nb. This works because our tests run with sandbox mode off. We can happily talk between
-    // cross-origin frames and listen to their events.
-    const p = new Promise((resolve) => {
-      ytIframe.contentWindow.addEventListener('unload', resolve, {once: true});
-    });
-
-    container.onStateChanged({
-      activeEventDay: {
-        videoId: 'HtTyRajRuyY',
-        isChatActive: false,
-      },
-      isSignedIn: false,
-    });
-    await container.updateComplete;
-
-    // Mocha has a built-in timeout so this not resolving will fail.
-    await p;
-  });
-});
diff --git a/test/unit/src/lib/index.js b/test/unit/src/lib/index.js
index 0ef18aff873..02dcd092304 100644
--- a/test/unit/src/lib/index.js
+++ b/test/unit/src/lib/index.js
@@ -1,5 +1,4 @@
 require('./urls');
-require('./utils/firebase-loader');
-require('./components/LighthouseGauge');
-require('./components/LivestreamContainer');
+require('./components/Carousel');
+require('./components/LearnFilter');
 require('./components/ProgressBar');
diff --git a/test/unit/src/lib/urls.js b/test/unit/src/lib/urls.js
index e51b8de5849..3241b6efac9 100644
--- a/test/unit/src/lib/urls.js
+++ b/test/unit/src/lib/urls.js
@@ -31,5 +31,30 @@ describe('urls', function () {
         'ignores non-index.html HTML pages',
       );
     });
+
+    it('should remove extra slashes', function () {
+      assert(normalizeUrl('///foo') === '/foo/', 'removes extra slashes');
+      assert(
+        normalizeUrl('/foo///bar//') === '/foo/bar/',
+        'removes extra slashes',
+      );
+    });
+
+    it('should do nothing to valid URLs', function () {
+      assert(
+        normalizeUrl('/foo/?query=123&other') === '/foo/?query=123&other',
+        'retains query string',
+      );
+      assert(normalizeUrl('/foo/') === '/foo/', 'does nothing');
+      assert(
+        normalizeUrl('/foo/page.html') === '/foo/page.html',
+        'does nothing to non-index.html',
+      );
+      assert(normalizeUrl('/') === '/', 'does nothing');
+      assert(
+        normalizeUrl('/foo/bar/hello/') === '/foo/bar/hello/',
+        'does nothing to long path',
+      );
+    });
   });
 });
diff --git a/test/unit/src/lib/utils/firebase-loader.js b/test/unit/src/lib/utils/firebase-loader.js
deleted file mode 100644
index b4585edc702..00000000000
--- a/test/unit/src/lib/utils/firebase-loader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const {assert} = require('../assert');
-const loadFirebase = require('../../../../../src/lib/utils/firebase-loader');
-
-// TODO(samthor): This test doesn't clear the internal cache between tests, as
-// it uses a singleton loading cache. Add a reset for test method.
-
-describe('firebase-loader', function () {
-  describe('loader', function () {
-    it('should return a Promise', async function () {
-      const p = loadFirebase();
-      assert(p instanceof Promise);
-      await p; // doesn't do anything, nothing requested
-
-      const node = document.head.querySelector(
-        'script[src^="//www.gstatic.com/firebasejs/"]',
-      );
-      assert(node === null, 'no firebase loads requested');
-    });
-
-    it('should add script tags after invocation', function () {
-      loadFirebase('app', 'performance', 'app');
-      let nodes = [];
-      try {
-        nodes = document.head.querySelectorAll(
-          'script[src^="//www.gstatic.com/firebasejs/"]',
-        );
-        assert(nodes.length === 2, 'JS should be added for uniques');
-        assert(nodes[0].src.endsWith('-app.js'));
-        assert(!nodes[0].async);
-        assert(nodes[1].src.endsWith('-performance.js'));
-        assert(!nodes[1].async);
-
-        loadFirebase('app');
-        nodes = document.head.querySelectorAll(
-          'script[src^="//www.gstatic.com/firebasejs/"]',
-        );
-        assert(nodes.length === 2, 'JS should remain the same');
-      } finally {
-        // This isn't an async test, we don't check that the scripts actually
-        // load, so just remove them immediately after run.
-        nodes.forEach((node) => node.remove());
-      }
-    });
-  });
-});
diff --git a/test/unit/src/site/_collections/hooks/index.js b/test/unit/src/site/_collections/hooks/index.js
new file mode 100644
index 00000000000..44c5dcf0700
--- /dev/null
+++ b/test/unit/src/site/_collections/hooks/index.js
@@ -0,0 +1,3 @@
+describe('hooks', function () {
+  require('./recent-blog-posts');
+});
diff --git a/test/unit/src/site/_collections/hooks/recent-blog-posts.js b/test/unit/src/site/_collections/hooks/recent-blog-posts.js
new file mode 100644
index 00000000000..ddcf3125051
--- /dev/null
+++ b/test/unit/src/site/_collections/hooks/recent-blog-posts.js
@@ -0,0 +1,75 @@
+const assert = require('assert');
+const recentBlogPosts = require('../../../../../../src/site/_collections/hooks/recent-blog-posts');
+
+const formatData = (lang, posts) => {
+  return {
+    lang,
+    collections: {
+      blogPosts: posts,
+    },
+  };
+};
+
+describe('recent-blog-posts', function () {
+  it('should contain 3 posts', function () {
+    const post = {
+      data: {
+        lang: 'en',
+        thumbnail: 'some/thumbnail.jpg',
+      },
+    };
+    const data = formatData('en', [post, post, post, post]);
+    const actual = recentBlogPosts(data);
+    assert.deepStrictEqual(actual.length, 3);
+  });
+
+  it('should contain only posts with thumbnail or hero prop', function () {
+    const posts = [
+      {
+        data: {
+          lang: 'en',
+        },
+      },
+      {
+        data: {
+          lang: 'en',
+          thumbnail: 'some/thumbnail.jpg',
+        },
+      },
+      {
+        data: {
+          lang: 'en',
+          hero: 'some/thumbnail.jpg',
+        },
+      },
+    ];
+    const data = formatData('en', posts);
+    const actual = recentBlogPosts(data);
+    for (const post of actual) {
+      assert.ok(post.data.hero || post.data.thumbnail);
+    }
+    assert.deepStrictEqual(actual.length, 2);
+  });
+
+  it('should reject posts without thumbnail nor hero', function () {
+    const post = {
+      data: {
+        lang: 'en',
+      },
+    };
+    const data = formatData('en', [post]);
+    const actual = recentBlogPosts(data);
+    assert.deepStrictEqual(actual.length, 0);
+  });
+
+  it('should reject posts with lang different than current lang', function () {
+    const post = {
+      data: {
+        lang: 'pl',
+      },
+    };
+    const data = formatData('en', [post]);
+    const actual = recentBlogPosts(data);
+    assert.deepStrictEqual(actual.length, 0);
+  });
+});
diff --git a/test/unit/src/site/_collections/index.js b/test/unit/src/site/_collections/index.js
index 4c87644ab38..03036890bcd 100644
--- a/test/unit/src/site/_collections/index.js
+++ b/test/unit/src/site/_collections/index.js
@@ -1,3 +1,3 @@
 describe('_collections', function () {
-  require('./posts-with-lighthouse');
+  require('./hooks');
 });
diff --git a/test/unit/src/site/_collections/posts-with-lighthouse.js b/test/unit/src/site/_collections/posts-with-lighthouse.js
deleted file mode 100644
index cb1da57d3e7..00000000000
--- a/test/unit/src/site/_collections/posts-with-lighthouse.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const assert = require('assert');
-const {
-  hasLighthouseAudit,
-} = require('../../../../../src/site/_collections/posts-with-lighthouse');
-
-describe('posts-with-lighthouse', function () {
-  describe('hasLighthouseAudit', function () {
-    it('should reject posts without web_lighthouse', function () {
-      const post = {
-        tags: [],
-        data: {},
-        date: new Date(),
-      };
-      const actual = hasLighthouseAudit(post);
-      assert.strictEqual(actual, false);
-    });
-
-    it('should reject posts with web_lighthouse set to N/A', function () {
-      const post = {
-        tags: [],
-        data: {
-          web_lighthouse: 'N/A',
-        },
-        date: new Date(),
-      };
-      const actual = hasLighthouseAudit(post);
-      assert.strictEqual(actual, false);
-    });
-
-    it('should allow posts with a single web_lighthouse value', function () {
-      const post = {
-        tags: [],
-        data: {
-          web_lighthouse: 'foo',
-        },
-        date: new Date(),
-      };
-      const actual = hasLighthouseAudit(post);
-      assert.strictEqual(actual, true);
-    });
-
-    it('should allow posts with multiple web_lighthouse values', function () {
-      const post = {
-        tags: [],
-        data: {
-          web_lighthouse: ['foo', 'bar', 'baz'],
-        },
-        date: new Date(),
-      };
-      const actual = hasLighthouseAudit(post);
-      assert.strictEqual(actual, true);
-    });
-  });
-});
diff --git a/test/unit/src/site/_filters/algolia-item.js b/test/unit/src/site/_filters/algolia-item.js
new file mode 100644
index 00000000000..80d680761c3
--- /dev/null
+++ b/test/unit/src/site/_filters/algolia-item.js
@@ -0,0 +1,175 @@
+const {expect} = require('chai');
+const path = require('path');
+const {
+  defaultLocale,
+  imgixDomain,
+} = require('../../../../../src/site/_data/site');
+const {
+  algoliaItem,
+  getPostParentUrl,
+} = require('../../../../../src/site/_filters/algolia-item');
+const createPost = () =>
+  /** @type {EleventyCollectionItem} */ ({
+    data: {
+      lang: defaultLocale,
+      title: 'Hello world',
+      page: {
+        filePathStem: '',
+      },
+    },
+    templateContent: 'Hello world',
+    url: '/hello-world/',
+  });
+
+describe('algoliaItem', function () {
+  it('returns object with all required fields', function () {
+    const post = createPost();
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem)
+      .to.be.an('object')
+      .to.include.all.keys(
+        'locale',
+        'objectID',
+        'priority',
+        'tags',
+        'title',
+        'url',
+      );
+
+    expect(mockItem.locale).to.be.a('string');
+    expect(mockItem.objectID).to.be.a('string');
+    expect(mockItem.priority).to.be.a('number');
+    expect(mockItem.tags).to.be.an.instanceof(Array);
+    expect(mockItem.title).to.be.a('string');
+    expect(mockItem.url).to.be.a('string');
+  });
+
+  it('returns object with optional fields if in post object', function () {
+    const post = createPost();
+    post.data.date = new Date();
+    post.data.description = 'Hello world';
+    post.data.updated = new Date();
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem)
+      .to.be.an('object')
+      .to.include.all.keys('createdOn', 'description', 'updatedOn');
+
+    expect(mockItem.createdOn).to.be.an.instanceof(Date);
+    expect(mockItem.description).to.be.a('string');
+    expect(mockItem.updatedOn).to.be.an.instanceof(Date);
+  });
+
+  it('prefers `renderData` when provided', function () {
+    const renderData = {
+      title: 'Not hello world',
+      description: 'Not hello world',
+    };
+    const post = createPost();
+    post.data.description = 'Hello world';
+    post.data.renderData = renderData;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.description).to.be.equal(renderData.description);
+    expect(mockItem.title).to.be.equal(renderData.title);
+  });
+
+  it('strips HTML from `templateContent`', function () {
+    const post = createPost();
+    const content = post.templateContent;
+    post.templateContent = `<h1>${content}</h1>`;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.content).to.be.equal(content);
+  });
+
+  it('sets `locale` to default locale if no `data.lang`', function () {
+    const post = createPost();
+    delete post.data.lang;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.locale).to.be.equal(defaultLocale);
+  });
+
+  it('sets `priority` to `1` if no `data.algolia_priority`', function () {
+    const post = createPost();
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.priority).to.be.equal(1);
+  });
+
+  it('keeps `priority` set in `data.algolia_priority`', function () {
+    const post = createPost();
+    const priority = 2;
+    post.data.algolia_priority = priority;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.priority).to.be.equal(priority);
+  });
+
+  it('keeps `tags` set in `data.tags`', function () {
+    const post = createPost();
+    const tags = ['angular', 'react', 'vue'];
+    post.data.tags = tags;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.tags).to.be.eql(tags);
+  });
+
+  it('gets default url when an i18n url', function () {
+    const post = createPost();
+    const url = post.url;
+    post.url = path.join('/i18n', defaultLocale, url);
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.url).to.be.equal(url);
+  });
+
+  it('gets default url when not an i18n url', function () {
+    const post = createPost();
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.url).to.be.equal(post.url);
+  });
+
+  it('generates imgix url if there is `data.hero`', function () {
+    const post = createPost();
+    const hero = 'image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg';
+    post.data.hero = hero;
+    const mockItem = algoliaItem(post);
+
+    expect(mockItem.image).to.have.string(imgixDomain);
+    expect(mockItem.image).to.have.string(hero);
+  });
+});
+
+describe('get-post-parent-url', function () {
+  /**
+   * @param path
+   * @returns {EleventyCollectionItem}
+   */
+  function createMockPost(path) {
+    return /** @type {EleventyCollectionItem} */ ({
+      data: {
+        page: {
+          filePathStem: `${path}index`,
+        },
+      },
+    });
+  }
+
+  describe('getPostParentUrl', function () {
+    it('returns /tags/ from /tags/privacy/', async function () {
+      expect(getPostParentUrl(createMockPost('/tags/privacy/'))).to.equal(
+        '/tags/',
+      );
+    });
+
+    it('returns / from /introducing-learn-privacy/', async function () {
+      expect(
+        getPostParentUrl(createMockPost('/introducing-learn-privacy/')),
+      ).to.equal('/');
+    });
+  });
+});
diff --git a/test/unit/src/site/_filters/find-by-url.js b/test/unit/src/site/_filters/find-by-url.js
new file mode 100644
index 00000000000..11463004530
--- /dev/null
+++ b/test/unit/src/site/_filters/find-by-url.js
@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {expect} = require('chai');
+const {
+  memoize,
+  findByUrl,
+} = require('../../../../../src/site/_filters/find-by-url');
+
+const collectionAll = /** @type {EleventyCollectionItem[]} */ ([
+  {url: '/en/foo/bar/', data: {title: 'foobar'}},
+  {url: '/en/foo-bar/', data: {title: 'foobar'}},
+  {url: '/en/foobar/', data: {title: 'foobar'}},
+  {url: '/es/fizzbuzz/', data: {title: 'fizzbuzz'}},
+]);
+
+describe('find-by-url', function () {
+  describe('memoize', function () {
+    it('creates memo when there are no duplicates', async function () {
+      expect(() => memoize(collectionAll)).not.to.throw();
+    });
+
+    it('throws error when duplicate URLs provided', async function () {
+      const duplicates = [...collectionAll, ...collectionAll];
+      expect(() => memoize(duplicates)).to.throw();
+    });
+
+    it("throws error when an array isn't passed in", async function () {
+      ['foobar', 2, true, {}, Date].forEach((i) => {
+        //@ts-ignore
+        expect(() => memoize(i)).to.throw();
+      });
+    });
+  });
+
+  describe('findByUrl', function () {
+    it('returns url in memo', async function () {
+      memoize(collectionAll);
+      expect(findByUrl(collectionAll[0].url)).to.deep.equal(collectionAll[0]);
+    });
+
+    it('throws error when no URL provided', async function () {
+      //@ts-ignore
+      expect(() => findByUrl()).to.throw();
+    });
+
+    it('returns `undefined` when url not found', async function () {
+      expect(findByUrl('pop/foo-bar')).to.deep.equal(undefined);
+    });
+  });
+});
diff --git a/test/unit/src/site/_filters/getPaths.js b/test/unit/src/site/_filters/getPaths.js
index 41da97d7748..ada5205be66 100644
--- a/test/unit/src/site/_filters/getPaths.js
+++ b/test/unit/src/site/_filters/getPaths.js
@@ -5,26 +5,38 @@ describe('getPaths', function () {
   it('returns a list of path names the post belongs to', function () {
     const post = {
       fileSlug: 'what-is-accessibility',
+      filePathStem: '/en/blog/what-is-accessibility',
     };
     const expected = ['accessible'];
     const actual = getPaths(post);
     assert.deepStrictEqual(actual, expected);
   });
 
-  it('returns undefined for a non-existent post', function () {
+  it('returns empty for a non-existent post', function () {
     const post = {
       fileSlug: 'non-existent-post',
+      filePathStem: '/en/not-a-valid-path/non-existent-post',
     };
-    const expected = undefined;
+    const expected = [];
+    const actual = getPaths(post);
+    assert.deepStrictEqual(actual, expected);
+  });
+
+  it('returns a guess for a valid but not recorded post', function () {
+    const post = {
+      fileSlug: 'inferred-post-does-not-exist',
+      filePathStem: '/en/fast/inferred-post-does-not-exist',
+    };
+    const expected = ['fast'];
     const actual = getPaths(post);
     assert.deepStrictEqual(actual, expected);
   });
 
   it('returns all path names the post belongs to if more than 1', function () {
     const post = {
-      fileSlug: 'is-on-https',
+      fileSlug: 'lcp',
     };
-    const expected = ['lighthouse-best-practices', 'lighthouse-pwa'];
+    const expected = ['learn-core-web-vitals', 'metrics'];
     const actual = getPaths(post);
     assert.deepStrictEqual(actual, expected);
   });
diff --git a/test/unit/src/site/_filters/index.js b/test/unit/src/site/_filters/index.js
index a7b018dd7a1..de9d7692a16 100644
--- a/test/unit/src/site/_filters/index.js
+++ b/test/unit/src/site/_filters/index.js
@@ -1,4 +1,7 @@
 describe('_filters', function () {
+  require('./algolia-item');
   require('./capitalize');
-  require('./live-posts');
+  require('./find-by-url');
+  require('./is-new-content');
+  require('./is-live');
 });
diff --git a/test/unit/src/site/_filters/is-live.js b/test/unit/src/site/_filters/is-live.js
new file mode 100644
index 00000000000..c2865f76a64
--- /dev/null
+++ b/test/unit/src/site/_filters/is-live.js
@@ -0,0 +1,126 @@
+/**
+ * @fileoverview Tests for the is-live filter.
+ *
+ * These tests use proxyquire to stub out the site.env object that is-live
+ * relies on.
+ *
+ * Note that even though we write our dates as `date: 2020-01-02` in our YAML
+ * frontmatter, eleventy will convert these to JavaScript Date objects before
+ * handing the post to this filter. Therefore the tests work with actual
+ * JavaScript dates.
+ */
+
+const assert = require('assert');
+const proxyquire = require('proxyquire');
+
+describe('is-live', function () {
+  let siteStub;
+  let post;
+  let isLive;
+  const {
+    isScheduledForTheFuture,
+  } = require('../../../../../src/site/_filters/is-live');
+
+  beforeEach(function () {
+    post = {date: new Date(), data: {}, inputPath: '/path/to/file.md'};
+    siteStub = {env: 'prod'};
+    isLive = proxyquire('../../../../../src/site/_filters/is-live', {
+      '../_data/site': siteStub,
+    }).isLive;
+  });
+
+  afterEach(function () {
+    post = null;
+    siteStub = null;
+    isLive = null;
+  });
+
+  it('should throw if the post does not have a date', function () {
+    post.date = null;
+    // nb. to test throws in mocha you have to call the fn within another fn.
+    assert.throws(() => isLive(post), /did not specify a date/);
+  });
+
+  it('should throw if the post does not have a data object', function () {
+    post.data = null;
+    // nb. to test throws in mocha you have to call the fn within another fn.
+    assert.throws(() => isLive(post), /does not have a data object/);
+  });
+
+  it('should always return true in the dev environment', function () {
+    post.data.draft = true;
+    siteStub.env = 'dev';
+    // nb. to update a destructured property you have to run proxyquire again.
+    isLive = proxyquire('../../../../../src/site/_filters/is-live', {
+      '../_data/site': siteStub,
+    }).isLive;
+    const actual = isLive(post);
+    assert.strictEqual(actual, true);
+  });
+
+  it('should return false if the post has a future date (scheduled posts)', function () {
+    // set the post date to 1 day in the future.
+    post.date.setDate(post.date.getDate() + 1);
+    post.data.scheduled = true;
+    const actual = isLive(post);
+    assert.strictEqual(actual, false);
+  });
+
+  it('should return true if the post has a past date (scheduled posts)', function () {
+    // set the post date to 1 day in the past.
+    post.date.setDate(post.date.getDate() - 1);
+    post.data.scheduled = true;
+    const actual = isLive(post);
+    assert.strictEqual(actual, true);
+  });
+
+  it('should return false if the post is a draft', function () {
+    post.data.draft = true;
+    const actual = isLive(post);
+    assert.strictEqual(actual, false);
+  });
+
+  it('should return true if the post is not a draft', function () {
+    const actual = isLive(post);
+    assert.strictEqual(actual, true);
+  });
+
+  it('should return false if the post has a past date but is a draft', function () {
+    // set the post date to 1 day in the past.
+    post.date.setDate(post.date.getDate() - 1);
+    post.data.scheduled = true;
+    post.data.draft = true;
+    const actual = isLive(post);
+    assert.strictEqual(actual, false);
+  });
+
+  describe('isScheduledForTheFuture', function () {
+    it('should throw if now argument is not a Date', function () {
+      assert.throws(
+        () => isScheduledForTheFuture(post, 0),
+        /must by a Date object/,
+      );
+    });
+
+    it(`should return true if it's before 15:00 UTC on the publish date`, function () {
+      const date = new Date();
+      date.setUTCHours(14, 0, 0, 0);
+      const actual = isScheduledForTheFuture(post, date);
+      assert.strictEqual(actual, true);
+    });
+
+    it(`should return false if it's exactly 15:00 UTC on the publish date`, function () {
+      const date = new Date();
+      date.setUTCHours(15, 0, 0, 0);
+      const actual = isScheduledForTheFuture(post, date);
+      assert.strictEqual(actual, false);
+    });
+
+    it(`should return false if it's after 15:00 UTC on the publish date`, function () {
+      const date = new Date();
+      date.setUTCHours(15, 1, 0, 0);
+      const actual = isScheduledForTheFuture(post, date);
+      assert.strictEqual(actual, false);
+    });
+  });
+});
diff --git a/test/unit/src/site/_filters/is-new-content.js b/test/unit/src/site/_filters/is-new-content.js
new file mode 100644
index 00000000000..90bb0c184fe
--- /dev/null
+++ b/test/unit/src/site/_filters/is-new-content.js
@@ -0,0 +1,22 @@
+const assert = require('assert');
+const isNewContent = require('../../../../../src/site/_filters/is-new-content');
+
+describe('isNewContent', function () {
+  it('isNewContent marks date 20-07-2020 as false', function () {
+    const inputDate = new Date('July 20, 2020 00:20:18 GMT+00:00');
+    const actual = isNewContent(inputDate);
+    assert.strictEqual(actual, false);
+  });
+
+  it('isNewContent marks date older than 30 days as false', function () {
+    const inputDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 31);
+    const actual = isNewContent(inputDate);
+    assert.strictEqual(actual, false);
+  });
+
+  it('isNewContent marks date newer than 30 days as true', function () {
+    const inputDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 29);
+    const actual = isNewContent(inputDate);
+    assert.strictEqual(actual, true);
+  });
+});
diff --git a/test/unit/src/site/_filters/live-posts.js b/test/unit/src/site/_filters/live-posts.js
deleted file mode 100644
index 5846c02eb72..00000000000
--- a/test/unit/src/site/_filters/live-posts.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @fileoverview Tests for the live-posts filter.
- *
- * These tests use proxyquire to stub out the site.env object that live-posts
- * relies on.
- *
- * Note that even though we write our dates as `date: 2020-01-02` in our YAML
- * frontmatter, eleventy will convert these to JavaScript Date objects before
- * handing the post to this filter. Therefore the tests work with actual
- * JavaScript dates.
- */
-
-const assert = require('assert');
-const proxyquire = require('proxyquire');
-
-describe('live-posts', function () {
-  let siteStub;
-  let post;
-  let livePosts;
-  const {
-    isScheduledForTheFuture,
-  } = require('../../../../../src/site/_filters/live-posts');
-
-  beforeEach(function () {
-    post = {date: new Date(), data: {}, inputPath: '/path/to/file.md'};
-    siteStub = {env: 'prod'};
-    livePosts = proxyquire('../../../../../src/site/_filters/live-posts', {
-      '../_data/site': siteStub,
-    }).livePosts;
-  });
-
-  afterEach(function () {
-    post = null;
-    siteStub = null;
-    livePosts = null;
-  });
-
-  it('should throw if the post does not have a date', function () {
-    post.date = null;
-    // nb. to test throws in mocha you have to call the fn within another fn.
-    assert.throws(() => livePosts(post), /did not specify a date/);
-  });
-
-  it('should throw if the post does not have a data object', function () {
-    post.data = null;
-    // nb. to test throws in mocha you have to call the fn within another fn.
-    assert.throws(() => livePosts(post), /does not have a data object/);
-  });
-
-  it('should always return true in the dev environment', function () {
-    post.data.draft = true;
-    siteStub.env = 'dev';
-    // nb. to update a destructured property you have to run proxyquire again.
-    livePosts = proxyquire('../../../../../src/site/_filters/live-posts', {
-      '../_data/site': siteStub,
-    }).livePosts;
-    const actual = livePosts(post);
-    assert.strictEqual(actual, true);
-  });
-
-  it('should return false if the post has a future date (scheduled posts)', function () {
-    // set the post date to 1 day in the future.
-    post.date.setDate(post.date.getDate() + 1);
-    post.data.scheduled = true;
-    const actual = livePosts(post);
-    assert.strictEqual(actual, false);
-  });
-
-  it('should return true if the post has a past date (scheduled posts)', function () {
-    // set the post date to 1 day in the past.
-    post.date.setDate(post.date.getDate() - 1);
-    post.data.scheduled = true;
-    const actual = livePosts(post);
-    assert.strictEqual(actual, true);
-  });
-
-  it('should return false if the post is a draft', function () {
-    post.data.draft = true;
-    const actual = livePosts(post);
-    assert.strictEqual(actual, false);
-  });
-
-  it('should return true if the post is not a draft', function () {
-    const actual = livePosts(post);
-    assert.strictEqual(actual, true);
-  });
-
-  it('should return false if the post has a past date but is a draft', function () {
-    // set the post date to 1 day in the past.
-    post.date.setDate(post.date.getDate() - 1);
-    post.data.scheduled = true;
-    post.data.draft = true;
-    const actual = livePosts(post);
-    assert.strictEqual(actual, false);
-  });
-
-  describe('isScheduledForTheFuture', function () {
-    it('should throw if now argument is not a Date', function () {
-      assert.throws(
-        () => isScheduledForTheFuture(post, 0),
-        /must by a Date object/,
-      );
-    });
-
-    it(`should return true if it's before 15:00 UTC on the publish date`, function () {
-      const date = new Date();
-      date.setUTCHours(14, 0, 0, 0);
-      const actual = isScheduledForTheFuture(post, date);
-      assert.strictEqual(actual, true);
-    });
-
-    it(`should return false if it's exactly 15:00 UTC on the publish date`, function () {
-      const date = new Date();
-      date.setUTCHours(15, 0, 0, 0);
-      const actual = isScheduledForTheFuture(post, date);
-      assert.strictEqual(actual, false);
-    });
-
-    it(`should return false if it's after 15:00 UTC on the publish date`, function () {
-      const date = new Date();
-      date.setUTCHours(15, 1, 0, 0);
-      const actual = isScheduledForTheFuture(post, date);
-      assert.strictEqual(actual, false);
-    });
-  });
-});
diff --git a/test/unit/src/site/_includes/components/Author.js b/test/unit/src/site/_includes/components/Author.js
new file mode 100644
index 00000000000..21adef0466f
--- /dev/null
+++ b/test/unit/src/site/_includes/components/Author.js
@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {expect} = require('chai');
+const cheerio = require('cheerio');
+const {defaultLocale} = require('../../../../../../src/site/_data/site');
+const Author = require('../../../../../../src/site/_includes/components/Author');
+/** @type AuthorsData */
+const authorsDataJson = require('../../../../../../src/site/_data/authorsData.json');
+const authorsDataArray = Object.entries(authorsDataJson);
+
+/**
+ * @param {number} count
+ * @return {[string, AuthorsItem][]}
+ */
+const getAuthorsData = (count) => {
+  /** @type {[string, AuthorsItem][]} */
+  const authors = [];
+  for (let i = 0; i < count; i++) {
+    const [id, authorData] = authorsDataArray[i];
+    /** @type {AuthorsItem} */
+    const author = {
+      ...authorData,
+      description: `i18n.authors.${id}.description`,
+      elements: [],
+      href: `/authors/${id}/`,
+      key: id,
+      title: `i18n.authors.${id}.title`,
+      url: `/authors/${id}/`,
+    };
+    authors.push([id, author]);
+  }
+  return authors;
+};
+
+describe('Author', function () {
+  it('does not throw error with correct data', async function () {
+    const [id, author] = getAuthorsData(1)[0];
+    expect(() => Author({id, author, locale: defaultLocale})).to.not.throw();
+  });
+
+  it('does not throw error when author is missing', async function () {
+    const [id] = getAuthorsData(1)[0];
+    // @ts-ignore
+    expect(() => Author({id, locale: defaultLocale})).to.not.throw();
+  });
+
+  it('returns `undefined` when author is missing', async function () {
+    const [id] = getAuthorsData(1)[0];
+    // @ts-ignore
+    const html = Author({id, locale: defaultLocale});
+    expect(html).to.equal(undefined);
+  });
+
+  it('does throw error when author is missing a valid title', async function () {
+    const [id, author] = getAuthorsData(1)[0];
+    delete author.title;
+    expect(() => Author({id, author, locale: defaultLocale})).to.throw();
+  });
+
+  it('includes link to author and name', async function () {
+    const [id, author] = getAuthorsData(1)[0];
+    const html = Author({id, author, locale: defaultLocale});
+    const $ = cheerio.load(html);
+    expect($('.author__name > a').html()).to.not.equal(null);
+    expect($('a.avatar').attr('href')).to.equal(author.href);
+  });
+
+  it('does not include social media when flag not set to true', async function () {
+    const [id, author] = getAuthorsData(1)[0];
+    const html = Author({id, author, locale: defaultLocale});
+    const $ = cheerio.load(html);
+    expect($('.author__links').html()).to.equal(null);
+  });
+
+  it('includes social media when flag set to true', async function () {
+    const [id, author] = getAuthorsData(1)[0];
+    const html = Author({
+      id,
+      author,
+      locale: defaultLocale,
+      showSocialMedia: true,
+    });
+    const $ = cheerio.load(html);
+    expect($('.author__links').html()).to.not.equal(null);
+  });
+});
diff --git a/test/unit/src/site/_includes/components/AuthorsDate.js b/test/unit/src/site/_includes/components/AuthorsDate.js
new file mode 100644
index 00000000000..9bbe1689f08
--- /dev/null
+++ b/test/unit/src/site/_includes/components/AuthorsDate.js
@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {expect} = require('chai');
+const cheerio = require('cheerio');
+const AuthorsDate = require('../../../../../../src/site/_includes/components/AuthorsDate');
+/** @type AuthorsData */
+const authorsDataJson = require('../../../../../../src/site/_data/authorsData.json');
+const authorsDataArray = Object.entries(authorsDataJson);
+
+const date = new Date();
+
+/**
+ * @param {number} count
+ * @return {Authors}
+ */
+const authorsCollection = (count = 10) => {
+  /** @type {Authors} */
+  const authors = {};
+  for (let i = 0; i < count; i++) {
+    const [id, authorData] = authorsDataArray[i];
+    /** @type {AuthorsItem} */
+    const author = {
+      ...authorData,
+      description: `i18n.authors.${id}.description`,
+      elements: [],
+      href: `/authors/${id}/`,
+      key: id,
+      title: `i18n.authors.${id}.title`,
+      url: `/authors/${id}/`,
+    };
+    authors[id] = author;
+  }
+  return authors;
+};
+
+describe('AuthorDate', function () {
+  it('does not throw error with correct data', async function () {
+    const collection = authorsCollection();
+    const authors = Object.keys(collection);
+    expect(() => AuthorsDate({authors, date}, collection)).to.not.throw();
+  });
+
+  it('does not throw error when no fields are passed in', async function () {
+    const collection = authorsCollection();
+    expect(() => AuthorsDate({}, collection)).to.not.throw();
+  });
+
+  it('renders correct amount of authors', async function () {
+    const collection = authorsCollection();
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors, date}, collection);
+    const $ = cheerio.load(html);
+    expect($('.card__authors').children().length).to.equal(authors.length);
+  });
+
+  it('renders no images if more than 2 authors', async function () {
+    const collection = authorsCollection(3);
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors, date}, collection);
+    const $ = cheerio.load(html);
+    expect($('img').length).to.equal(0);
+  });
+
+  it('renders 2 images if 2 authors', async function () {
+    const collection = authorsCollection(2);
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors, date}, collection);
+    const $ = cheerio.load(html);
+    expect($('img').length).to.equal(2);
+  });
+
+  it('renders 1 image if 1 author', async function () {
+    const collection = authorsCollection(1);
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors, date}, collection);
+    const $ = cheerio.load(html);
+    expect($('img').length).to.equal(1);
+  });
+
+  it('renders time if date provided', async function () {
+    const collection = authorsCollection();
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors, date}, collection);
+    const $ = cheerio.load(html);
+    expect($('time').html().length).to.not.equal(0);
+  });
+
+  it('does not render time if no date provided', async function () {
+    const collection = authorsCollection();
+    const authors = Object.keys(collection);
+    const html = AuthorsDate({authors}, collection);
+    const $ = cheerio.load(html);
+    expect($('time').html().length).to.equal(0);
+  });
+});
diff --git a/test/unit/src/site/_includes/components/CodelabsCallout.js b/test/unit/src/site/_includes/components/CodelabsCallout.js
new file mode 100644
index 00000000000..dc5518e7a14
--- /dev/null
+++ b/test/unit/src/site/_includes/components/CodelabsCallout.js
@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {expect} = require('chai');
+const cheerio = require('cheerio');
+
+const {defaultLanguage} = require('../../../../../../src/lib/utils/language');
+const {memoize} = require('../../../../../../src/site/_filters/find-by-url');
+const CodelabsCallout = require('../../../../../../src/site/_includes/components/CodelabsCallout');
+
+const collectionAll = /** @type {EleventyCollectionItem[]} */ ([
+  {url: '/en/foo/bar/', data: {title: 'foobar'}},
+  {url: '/en/foo-bar/', data: {title: 'foobar'}},
+  {url: '/en/foobar/', data: {title: 'foobar'}},
+  {url: '/es/fizzbuzz/', data: {title: 'fizzbuzz'}},
+]);
+
+describe('CodelabsCallout', function () {
+  describe('CodelabsCallout', function () {
+    it('returns call out with correct links', async function () {
+      memoize(collectionAll);
+      const html = CodelabsCallout(
+        collectionAll.map((i) =>
+          i.url.replace(/^\/([a-z]{2})\//, '').replace(/\/$/, ''),
+        ),
+        'en',
+      );
+      const $ = cheerio.load(html);
+      const li = $('li');
+      expect(li.length).to.equal(3);
+    });
+
+    it('returns an empty string if URLs not found', async function () {
+      const html = CodelabsCallout(
+        collectionAll.map((i) => i.url + '/pop'),
+        'en',
+      );
+      expect(html).to.equal('');
+    });
+
+    it('returns the default-language codelab as a fallback', async function () {
+      const html = CodelabsCallout('foobar', 'zz');
+      const $ = cheerio.load(html);
+      expect($('a').attr('href')).to.equal(`/${defaultLanguage}/foobar/`);
+      expect($('span').text()).to.equal('foobar');
+    });
+  });
+
+  describe('CodelabsCallout.renderCodelab', function () {
+    it('creates links for codelabs', async function () {
+      collectionAll.forEach((item) => {
+        const html = CodelabsCallout.renderCodelab(item);
+        const $ = cheerio.load(html);
+        expect($('a').attr('href')).to.equal(item.url);
+        expect($('span').text()).to.equal(item.data.title);
+      });
+    });
+  });
+});
diff --git a/test/unit/src/site/_includes/components/index.js b/test/unit/src/site/_includes/components/index.js
new file mode 100644
index 00000000000..626b06ebf9a
--- /dev/null
+++ b/test/unit/src/site/_includes/components/index.js
@@ -0,0 +1,5 @@
+describe('components', function () {
+  require('./Author');
+  require('./AuthorsDate');
+  require('./CodelabsCallout');
+});
diff --git a/test/unit/src/site/_includes/index.js b/test/unit/src/site/_includes/index.js
new file mode 100644
index 00000000000..84cc8ba76ed
--- /dev/null
+++ b/test/unit/src/site/_includes/index.js
@@ -0,0 +1,3 @@
+describe('_includes', function () {
+  require('./components');
+});
diff --git a/test/unit/src/site/_transforms/index.js b/test/unit/src/site/_transforms/index.js
deleted file mode 100644
index d6fc534f195..00000000000
--- a/test/unit/src/site/_transforms/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-describe('_transforms', function () {
-  require('./responsive-images');
-  require('./service-worker-partials');
-});
diff --git a/test/unit/src/site/_transforms/responsive-images/helpers.js b/test/unit/src/site/_transforms/responsive-images/helpers.js
deleted file mode 100644
index 8400d462b35..00000000000
--- a/test/unit/src/site/_transforms/responsive-images/helpers.js
+++ /dev/null
@@ -1,76 +0,0 @@
-const assert = require('assert');
-const site = require('../../../../../../src/site/_data/site');
-const {
-  determineImagePath,
-} = require('../../../../../../src/site/_transforms/responsive-images/helpers');
-
-describe('determineImagePath', function () {
-  it('returns the original src if src contains a protocol', function () {
-    let src = 'https://example.com/foo.jpg';
-    let outputPath = 'dist/en/add-manifest/index.html';
-    let actual = determineImagePath(src, outputPath);
-    assert.deepStrictEqual(actual, {src, isLocal: false});
-
-    src = 'http://example.com/foo.jpg';
-    outputPath = 'dist/en/add-manifest/index.html';
-    actual = determineImagePath(src, outputPath);
-    assert.deepStrictEqual(actual, {src, isLocal: false});
-  });
-
-  it('returns an image CDN src if src is absolute', function () {
-    const src = '/images/foo.jpg';
-    const outputPath = 'dist/en/add-manifest/index.html';
-    const actual = determineImagePath(src, outputPath);
-    const url = new URL(src, site.imageCdn).href;
-    assert.deepStrictEqual(actual, {
-      src: url,
-      isLocal: true,
-    });
-  });
-
-  it('returns an image CDN src if src is relative', function () {
-    let src = './foo.jpg';
-    let outputPath = 'dist/en/add-manifest/index.html';
-    let actual = determineImagePath(src, outputPath);
-    let url = new URL('add-manifest/foo.jpg', site.imageCdn).href;
-    assert.deepStrictEqual(actual, {
-      src: url,
-      isLocal: true,
-    });
-
-    src = 'foo.jpg';
-    outputPath = 'dist/en/add-manifest/index.html';
-    actual = determineImagePath(src, outputPath);
-    url = new URL('add-manifest/foo.jpg', site.imageCdn);
-    assert.deepStrictEqual(actual, {
-      src: url.href,
-      isLocal: true,
-    });
-  });
-
-  it('returns the correct src for nested urls', function () {
-    // The handbook section of the site is the only place where we nest urls.
-    // e.g. web.dev/handbook/audience.
-    const src = './foo.jpg';
-    const outputPath = 'dist/en/handbook/audience/index.html';
-    const actual = determineImagePath(src, outputPath);
-    const url = new URL('handbook/audience/foo.jpg', site.imageCdn).href;
-    assert.deepStrictEqual(actual, {
-      src: url,
-      isLocal: true,
-    });
-  });
-
-  it('returns the correct src for pages without an outputPath', function () {
-    // If a page has permalink: false, then it will not have an outputPath
-    // but will still run through the transform and could throw if we don't
-    // handle it correctly.
-    const src = './foo.jpg';
-    const outputPath = false;
-    const actual = determineImagePath(src, outputPath);
-    assert.deepStrictEqual(actual, {
-      src: './foo.jpg',
-      isLocal: true,
-    });
-  });
-});
diff --git a/test/unit/src/site/_transforms/responsive-images/index.js b/test/unit/src/site/_transforms/responsive-images/index.js
deleted file mode 100644
index 1bc01a75c96..00000000000
--- a/test/unit/src/site/_transforms/responsive-images/index.js
+++ /dev/null
@@ -1,149 +0,0 @@
-const assert = require('assert');
-const path = require('path');
-const cheerio = require('cheerio');
-const site = require('../../../../../../src/site/_data/site');
-const {
-  responsiveImages,
-} = require('../../../../../../src/site/_transforms/responsive-images');
-
-describe('responsive-images', function () {
-  describe('responsiveImages', function () {
-    let $;
-    let $body;
-    let $expected;
-    let outputPath;
-    let outputDir;
-
-    beforeEach(function () {
-      $ = cheerio.load('<html><head></head><body></body></html>');
-      $body = $('body');
-
-      $expected = cheerio.load('<html><head></head><body></body></html>');
-    });
-
-    afterEach(function () {
-      $ = null;
-      $body = null;
-      $expected = null;
-      outputPath = 'dist/en/add-manifest/index.html';
-      outputDir = path.dirname(outputPath).split(path.sep).pop();
-    });
-
-    it('is a noop if there is no output path', function () {
-      outputPath = false;
-      $body.append('<img src="./foo.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      $expected('body').append('<img src="./foo.jpg">');
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('is a noop if the file is not an html file', function () {
-      const actual = responsiveImages('{"foo": "bar"}', 'dist/en/foo.json');
-      assert.deepStrictEqual(actual, '{"foo": "bar"}');
-    });
-
-    it('is a noop if there are no images', function () {
-      const actual = responsiveImages($.html(), outputPath);
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('ignores images with a protocol', function () {
-      $body.append('<img src="https://example.com/foo.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      $expected('body').append('<img src="https://example.com/foo.jpg">');
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('can handle more than one image with a protocol', function () {
-      $body.append(
-        '<img src="https://example.com/foo.jpg"><img src="https://example.com/bar.jpg">',
-      );
-      const actual = responsiveImages($.html(), outputPath);
-      $expected('body').append(
-        '<img src="https://example.com/foo.jpg"><img src="https://example.com/bar.jpg"></img>',
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('uses the image CDN for absolute urls', function () {
-      $body.append('<img src="/images/foo.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      $expected('body').append(
-        `<img src="${new URL('/images/foo.jpg', site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('can handle more than one image with an absolute url', function () {
-      $body.append('<img src="/images/foo.jpg"><img src="/images/bar.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      // prettier-ignore
-      $expected('body').append(
-        `<img src="${new URL('/images/foo.jpg', site.imageCdn)}"><img src="${new URL('/images/bar.jpg', site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('uses the image CDN for relative urls', function () {
-      $body.append('<img src="./foo.jpg">');
-      let actual = responsiveImages($.html(), outputPath);
-      // prettier-ignore
-      $expected('body').append(
-        `<img src="${new URL(path.join(outputDir, 'foo.jpg'), site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-
-      $body.empty();
-      $expected('body').empty();
-
-      $body.append('<img src="bar.jpg">');
-      actual = responsiveImages($.html(), outputPath);
-      // prettier-ignore
-      $expected('body').append(
-        `<img src="${new URL(path.join(outputDir, 'bar.jpg'), site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('can handle more than one image with relative urls', function () {
-      $body.append('<img src="./foo.jpg"><img src="bar.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      // prettier-ignore
-      $expected('body').append(
-        `<img src="${new URL(path.join(outputDir, 'foo.jpg'), site.imageCdn)}"><img src="${new URL(path.join(outputDir, 'bar.jpg'), site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('can handle nested urls', function () {
-      outputPath = 'dist/en/handbook/audience/index.html';
-      $body.append('<img src="./foo.jpg"><img src="bar.jpg">');
-      const actual = responsiveImages($.html(), outputPath);
-      // prettier-ignore
-      $expected('body').append(
-        `<img src="${new URL(path.join('handbook', 'audience', 'foo.jpg'), site.imageCdn)}"><img src="${new URL(path.join('handbook', 'audience', 'bar.jpg'), site.imageCdn)}">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-
-    it('uses the new src for images with preexisting srcset', function () {
-      $body.append(
-        '<img src="./foo.jpg" srcset="./foo.jpg?w=1024 1024w, ./foo.jpg?w=640 640w, ./foo.jpg?w=320 320w" sizes="100vw">',
-      );
-      const actual = responsiveImages($.html(), outputPath);
-      const base = new URL(outputDir + '/', site.imageCdn);
-      const src = new URL('./foo.jpg', base);
-      const large = new URL('./foo.jpg', base);
-      const medium = new URL('./foo.jpg', base);
-      const small = new URL('./foo.jpg', base);
-      $expected('body').append(
-        `<img src="${src}" srcset="${large}?w=1024 1024w, ${medium}?w=640 640w, ${small}?w=320 320w" sizes="100vw">`,
-      );
-      assert.deepStrictEqual(actual, $expected.html());
-    });
-  });
-
-  describe('helpers', function () {
-    require('./helpers');
-  });
-});
diff --git a/test/unit/src/site/_transforms/service-worker-partials/index.js b/test/unit/src/site/_transforms/service-worker-partials/index.js
deleted file mode 100644
index 7168d7fac56..00000000000
--- a/test/unit/src/site/_transforms/service-worker-partials/index.js
+++ /dev/null
@@ -1,99 +0,0 @@
-const assert = require('assert');
-const path = require('path');
-const cheerio = require('cheerio');
-const fs = require('fs').promises;
-const {
-  serviceWorkerPartials,
-  getPartial,
-  writePartial,
-} = require('../../../../../../src/site/_transforms/service-worker-partials');
-
-describe('service-worker-partials', function () {
-  let $;
-
-  beforeEach(function () {
-    const fixture =
-      '<html lang="en"><head><title>Test title</title><link rel="alternate" href="/feed.xml" type="application/atom+xml" data-title="web.dev feed"></head><body><div id="content"><div class="guide-landing-page"><div>Hello</div></div><div>Bonus sibling</div></div></body></html>';
-    $ = cheerio.load(fixture);
-  });
-
-  afterEach(async function () {
-    $ = null;
-    await fs.rmdir(path.join('.', '.tmp'), {recursive: true});
-  });
-
-  describe('serviceWorkerPartials', function () {
-    it('converts a string of html to a partial and writes it to disk', async function () {
-      const expected = {
-        raw: $('#content').html(),
-        lang: $('html').attr('lang'),
-        title: $('title').text(),
-        rss: $('link[type="application/atom+xml"]').attr('href'),
-        offline: false,
-      };
-
-      const hash = Math.random().toString(36);
-      const outputPath = path.join('.', '.tmp', hash, 'index.html');
-      await serviceWorkerPartials($.html(), outputPath);
-      const actual = JSON.parse(
-        await fs.readFile(outputPath.replace('.html', '.json'), 'utf-8'),
-      );
-      assert.deepStrictEqual(actual, expected);
-    });
-
-    it('is a noop if outputPath does not end in index.html', async function () {
-      const actual = await serviceWorkerPartials($.html(), '/foo/bar/baz.njk');
-      assert.deepStrictEqual(actual, $.html());
-    });
-
-    it(`is a noop if outputPath is false because page doesn't have a permalink`, async function () {
-      const actual = await serviceWorkerPartials($.html(), false);
-      assert.deepStrictEqual(actual, $.html());
-    });
-  });
-
-  describe('getPartial', function () {
-    it('returns a partial for index.html pages', function () {
-      const actual = getPartial($.html());
-      const expected = {
-        raw: $('#content').html(),
-        lang: $('html').attr('lang'),
-        title: $('title').text(),
-        rss: $('link[type="application/atom+xml"]').attr('href'),
-        offline: false,
-      };
-      assert.deepStrictEqual(actual, expected);
-    });
-
-    it('sets offline to true when processing the offline page', function () {
-      $('head').append('<meta name="offline" content="true">');
-      const actual = getPartial($.html());
-      const expected = {
-        raw: $('#content').html(),
-        lang: $('html').attr('lang'),
-        title: $('title').text(),
-        rss: $('link[type="application/atom+xml"]').attr('href'),
-        offline: true,
-      };
-      assert.deepStrictEqual(actual, expected);
-    });
-  });
-
-  describe('writePartial', function () {
-    it('writes a partial to disk', async function () {
-      const expected = {
-        raw: $('#content').html(),
-        lang: $('html').attr('lang'),
-        title: $('title').text(),
-        rss: $('link[type="application/atom+xml"]').attr('href'),
-        offline: false,
-      };
-
-      const hash = Math.random().toString(36);
-      const outputPath = path.join('.', '.tmp', hash, 'index.json');
-      await writePartial(outputPath, expected);
-      const actual = JSON.parse(await fs.readFile(outputPath, 'utf-8'));
-      assert.deepStrictEqual(actual, expected);
-    });
-  });
-});
diff --git a/test/unit/src/site/index.js b/test/unit/src/site/index.js
index 7b3fd3c3e99..5e453d84a58 100644
--- a/test/unit/src/site/index.js
+++ b/test/unit/src/site/index.js
@@ -1,6 +1,6 @@
 describe('site', function () {
   require('./_collections');
   require('./_filters');
-  require('./_transforms');
+  require('./_includes');
   require('./_utils');
 });
diff --git a/tools/cleanup-versions/index.js b/tools/cleanup-versions/index.js
deleted file mode 100644
index e3d9d2570fa..00000000000
--- a/tools/cleanup-versions/index.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview Command-line script to delete old versions of a deployed App Engine project.
- */
-
-// Sample project information looks like:
-// {
-//   environment: { name: 'STANDARD', value: 1 },
-//   id: 'ff880647dafd6b7bb602e85e08ec7c28836d228c',
-//   last_deployed_time: {
-//     datetime: '2020-06-23 07:52:08+10:00',
-//     day: 23,
-//     hour: 7,
-//     microsecond: 0,
-//     minute: 52,
-//     month: 6,
-//     second: 8,
-//     year: 2020
-//   },
-//   project: 'web-dev-staging',
-//   service: 'default',
-//   traffic_split: 0,
-//   version: {
-//     createTime: '2020-06-22T21:52:08Z',
-//     createdBy: 'deployer@web-dev-production-1.iam.gserviceaccount.com',
-//     diskUsageBytes: '222606525',
-//     env: 'standard',
-//     id: 'ff880647dafd6b7bb602e85e08ec7c28836d228c',
-//     instanceClass: 'F1',
-//     name: 'apps/web-dev-staging/services/default/versions/ff880647dafd6b7bb602e85e08ec7c28836d228c',
-//     network: {},
-//     runtime: 'nodejs12',
-//     runtimeChannel: 'default',
-//     servingStatus: 'SERVING',
-//     threadsafe: true,
-//     versionUrl: 'https://ff880647dafd6b7bb602e85e08ec7c28836d228c-dot-web-dev-staging.appspot.com'
-//   }
-// }
-
-const keepMinimumRecentVersions = 20;
-const keepVersionsForDays = 7;
-const deleteAtMost = 4; // deleting is slow
-
-const log = require('fancy-log');
-const childProcess = require('child_process');
-const prettyMs = require('pretty-ms');
-
-const project = process.argv[2] || 'web-dev-staging';
-const now = new Date();
-
-purgeOldVersionsFor(project);
-
-/**
- * Retrieve parsed information for all deployed versions.
- *
- * @param {string} project
- * @return {!Array<!Object>}
- */
-function fetchVersions(project) {
-  const {status, stdout} = childProcess.spawnSync(
-    'gcloud',
-    ['app', '--project', project, 'versions', 'list', '--format="json"'],
-    {
-      input: '',
-      timeout: 20 * 1000,
-    },
-  );
-  if (status !== 0) {
-    throw new Error(`could not list versions: ${status}`);
-  }
-  return JSON.parse(stdout);
-}
-
-/**
- * Deletes a number of versions from a project.
- *
- * @param {string} project
- * @param {!Array<string>} versions
- * @param {string=} service defaults to "default"
- * @return {!Array<!Object>}
- */
-function deleteVersions(project, versions, service = 'default') {
-  versions.forEach((version) => {
-    if (
-      typeof version !== 'string' ||
-      version.startsWith('-') ||
-      version.includes('\\')
-    ) {
-      // Check for some possibly badly formatted names, including -, prevent flags from being set.
-      throw new Error(`bad version: ${version}`);
-    }
-  });
-
-  // Deleting versions is slow, so do a chunk at a time.
-  let done = 0;
-  versions = versions.slice();
-  while (versions.length) {
-    const next = versions.splice(0, deleteAtMost);
-    log('Enacting deletion for versions:', next.join(' '));
-
-    const {status, stdout} = childProcess.spawnSync(
-      'gcloud',
-      [
-        'app',
-        '--project',
-        project,
-        'versions',
-        'delete',
-        ...next,
-        '--service',
-        service,
-        '--format="json"',
-      ],
-      {
-        input: '',
-        timeout: 60 * 1000,
-      },
-    );
-    if (status !== 0) {
-      log('Could not delete versions:', status);
-      break;
-    }
-    done += versions.length;
-    console.info(JSON.parse(stdout));
-  }
-  return done;
-}
-
-/**
- * Purges old versions for the passed project.
- *
- * @param {string} project
- * @param {string=} service
- */
-function purgeOldVersionsFor(project, service = 'default') {
-  let candidates = [];
-  const versions = fetchVersions(project);
-
-  for (const v of versions) {
-    if (
-      v.project !== project ||
-      v.service !== service ||
-      v.traffic_split !== 0.0
-    ) {
-      // Filter unexpected results or anything serving traffic.
-      continue;
-    }
-
-    // Parse Date so we can easily sort.
-    const lastDeployed = new Date(v.last_deployed_time.datetime);
-    candidates.push({
-      id: v.id,
-      usage: parseInt(v.version.diskUsageBytes) || 0,
-      lastDeployed,
-    });
-  }
-
-  // Place most recent versions first.
-  candidates.sort(({lastDeployed: a}, {lastDeployed: b}) => b - a);
-
-  // Keep the most recent version for the last `keepVersionForDays` days.
-  const versionsForDays = new Map();
-  for (let i = 0; i < keepVersionsForDays; ++i) {
-    const d = new Date(now);
-    d.setDate(d.getDate() - i);
-    versionsForDays.set(d.toISOString().substr(0, 10), null);
-  }
-
-  // Keep the most recent `keepMinimumRecentVersions` versions.
-  const keptRecentVersions = [];
-
-  candidates = candidates.filter(({id, lastDeployed}) => {
-    const since = +now - +lastDeployed;
-    const deployedString = `deployed ${prettyMs(since)} ago`;
-
-    const key = lastDeployed.toISOString().substr(0, 10);
-    if (versionsForDays.has(key) && versionsForDays.get(key) === null) {
-      log('Keeping', id, 'for date', key, deployedString);
-      versionsForDays.set(key, id);
-      return false; // safe from deletion
-    }
-
-    if (keptRecentVersions.length < keepMinimumRecentVersions) {
-      log('Keeping', id, 'within recent count', deployedString);
-      keptRecentVersions.push(id);
-      return false; // safe from deletion
-    }
-
-    log('Deleting', id, deployedString);
-    return true;
-  });
-
-  const count = deleteVersions(
-    project,
-    candidates.map(({id}) => id),
-    service,
-  );
-
-  // If deletions were requested but none completed, fail.
-  if (candidates.length && count === 0) {
-    throw new Error(`Deleted ${count} versions with error`);
-  }
-
-  log('Done, deleted', count, 'versions');
-}
diff --git a/tools/eleventyignore/index.js b/tools/eleventyignore/index.js
new file mode 100644
index 00000000000..3fe71251424
--- /dev/null
+++ b/tools/eleventyignore/index.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file This outputs an .eleventyignore file in the root of the project.
+ * This is used to tell eleventy to ignore large sections of the docs in order
+ * to speed up build times.
+ *
+ * By default this will ignore most files on the site. You can use the
+ * ELEVENTY_INCLUDE=[] environement variable to pass a JSON string of
+ * directories that should be included in the build.
+ *
+ * Example .env file:
+ * ELEVENTY_IGNORE=true # ignore most of the site
+ * ELEVENTY_INCLUDE=["fast", "accessible"] # build /fast and /accessible
+ */
+
+require('dotenv').config();
+const path = require('path');
+const fs = require('fs');
+const chalk = require('chalk');
+const warning = chalk.black.bgYellow;
+
+const getDirectories = (source) =>
+  fs
+    .readdirSync(source, {withFileTypes: true})
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+// Default files that should always be ignored.
+const ignores = ['node_modules'];
+
+// Files that should be included in the build.
+let includes = process.env.ELEVENTY_INCLUDE || [];
+try {
+  includes = JSON.parse(includes);
+} catch (e) {
+  // ignore
+}
+
+// List all of the directories under /en/
+// Then filter out any directories that should be included in the build
+// Finally, replace /en/ with /**/ so it works across languages.
+const contentPath = path.join('src', 'site', 'content', 'en');
+const contentDirs = getDirectories(contentPath)
+  .filter((dir) => !includes.includes(dir))
+  .map((dir) => path.join(contentPath, dir).replace('/en/', '/**/'));
+
+const isProduction = process.env.NODE_ENV === 'production';
+// This will automatically be set to true by GitHub Actions.
+const isCI = process.env.CI;
+const isPercy = process.env.PERCY;
+const enDirPath = path.join('src', 'site', 'content');
+const translationDirs = getDirectories(enDirPath)
+  .filter((dir) => dir !== 'en')
+  .map((dir) => path.join(enDirPath, dir));
+
+if (isPercy) {
+  console.log(warning(`Ignoring ALL translation docs in Percy mode`));
+  ignores.push(...translationDirs);
+}
+
+// Only use ignore environment variables during dev and CI builds.
+if (!isProduction || isCI) {
+  if (process.env.ELEVENTY_IGNORE) {
+    console.log(
+      warning(
+        `Ignoring ALL docs`,
+        `${includes.length ? `except for ${includes}` : ''}`,
+      ),
+    );
+
+    ignores.push(...contentDirs);
+  }
+}
+
+fs.writeFileSync('.eleventyignore', ignores.join('\n'));
diff --git a/tools/lhci/lighthouserc.js b/tools/lhci/lighthouserc.js
new file mode 100644
index 00000000000..f7f688f74d9
--- /dev/null
+++ b/tools/lhci/lighthouserc.js
@@ -0,0 +1,16 @@
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: 'npm start',
+      url: [
+        'http://localhost:8080/',
+        'http://localhost:8080/blog/',
+        'http://localhost:8080/measure/',
+      ],
+    },
+    upload: {
+      serverBaseUrl: process.env.LHCI_SERVER,
+      token: process.env.LHCI_TOKEN,
+    },
+  },
+};
diff --git a/tools/lhci/lighthouserc.json b/tools/lhci/lighthouserc.json
deleted file mode 100644
index 6ca5437733c..00000000000
--- a/tools/lhci/lighthouserc.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{	
-  "ci": {	
-    "collect": {	
-      "startServerCommand": "npm start",	
-      "url": [	
-        "http://localhost:8080/",	
-        "http://localhost:8080/blog/",	
-        "http://localhost:8080/measure/"	
-      ]	
-    }	
-  }	
-}
\ No newline at end of file
diff --git a/tools/linting/bad-urls.js b/tools/linting/bad-urls.js
index 13a9b8e90ca..66878678622 100644
--- a/tools/linting/bad-urls.js
+++ b/tools/linting/bad-urls.js
@@ -18,9 +18,17 @@ const rule = require('unified-lint-rule');
 const {URL} = require('url');
 const visit = require('unist-util-visit');
 const siteData = require('../../src/site/_data/site');
+const excludedFromLinkChecks = [
+  'CODE_OF_CONDUCT.md',
+  'CONTRIBUTING.md',
+  'README.md',
+];
 
 module.exports = rule('remark-lint:bad-urls', checkURL);
 
+// Based on this Stack Overflow answer: https://bit.ly/3ELKYq3
+const locale = /^\/[a-z]{2,3}-[a-z0-9]{2,4}(-[a-z]{2})?/i;
+
 /**
  * Walk the AST for the markdown file and find any bad URLs.
  * @param {*} tree An AST of the markdown file.
@@ -31,6 +39,7 @@ function checkURL(tree, file) {
 
   /* eslint-disable require-jsdoc */
   function visitor(node) {
+    const [markdownFile] = file.history;
     const nodeUrl = node.url;
     if (!nodeUrl) {
       return;
@@ -43,5 +52,33 @@ function checkURL(tree, file) {
       const reason = 'Change URL hostname to "developer.mozilla.org".';
       file.message(reason, node);
     }
+
+    // If the URL starts with web.dev, yell about it, because those links should
+    // be relative, not absolute. We also must use nodeUrl here instead of the
+    // parsed URL object since using the latter will throw for relative links.
+    if (
+      nodeUrl.startsWith('https://web.dev') &&
+      !excludedFromLinkChecks.includes(markdownFile)
+    ) {
+      const relative = parsed.pathname + parsed.hash;
+      const absolute = parsed.href;
+      const reason = `web.dev links must be relative (e.g., use ${relative} instead of ${absolute}).`;
+      file.message(reason, node);
+    }
+
+    // If the URL is to MDN (apart from /blog/) and contains localization info
+    // (e.g., en-US), warn to remove the localization part of the URL.
+    // We leave locale in /blog/ URLs since they have no unlocalized redirects
+    // set up on MDN.
+    if (
+      parsed.hostname === 'developer.mozilla.org' &&
+      parsed.pathname.indexOf('/blog/') < 0 &&
+      locale.test(parsed.pathname) === true
+    ) {
+      const [matchedLocale] = parsed.pathname.match(locale);
+      const reason = `An MDN link contains a locale (${matchedLocale}). Please remove the locale from the link.`;
+
+      file.message(reason, node);
+    }
   }
 }
diff --git a/tools/linting/no-chrome-scheme.js b/tools/linting/no-chrome-scheme.js
new file mode 100644
index 00000000000..425a34d1e68
--- /dev/null
+++ b/tools/linting/no-chrome-scheme.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const rule = require('unified-lint-rule');
+const visit = require('unist-util-visit');
+
+module.exports = rule('remark-lint:no-chrome-scheme', noChromeScheme);
+
+/* eslint-disable-next-line */
+const reason = 'No `chrome://` scheme. Use `about://` instead. See https://web.dev/browser-flags/#inclusive-documentation for background.';
+
+/**
+ * Walk the AST for the markdown file and find any occurrences of `chrome://`.
+ * @param {*} tree An AST of the markdown file.
+ * @param {*} file The markdown file.
+ */
+function noChromeScheme(tree, file) {
+  visit(tree, 'text', visitor);
+
+  /* eslint-disable require-jsdoc */
+  function visitor(node) {
+    if (node.value.match(/chrome:\/\//g)) {
+      return file.message(reason, node);
+    }
+  }
+}
diff --git a/tools/linting/no-dash-spaces.js b/tools/linting/no-dash-spaces.js
deleted file mode 100644
index abfe000897e..00000000000
--- a/tools/linting/no-dash-spaces.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright 2019 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const rule = require('unified-lint-rule');
-const visit = require('unist-util-visit');
-
-module.exports = rule('remark-lint:no-dash-spaces', noDashSpaces);
-
-/* eslint-disable-next-line */
-const reason = 'No spaces around en or em dashes.';
-
-/**
- * Walk the AST for the markdown file and find any en dashes or em dashes.
- * @param {*} tree An AST of the markdown file.
- * @param {*} file The markdown file.
- */
-function noDashSpaces(tree, file) {
-  visit(tree, 'text', visitor);
-
-  /* eslint-disable require-jsdoc */
-  function visitor(node) {
-    const lines = node.value.split('\n');
-    let line;
-
-    for (let index = 0; index < lines.length; index++) {
-      line = lines[index].trim();
-      if (line.match(/\s—\s|\s–\s/g)) {
-        return file.message(reason, node);
-      }
-    }
-  }
-}
diff --git a/tools/linting/no-repeat-punctuation.js b/tools/linting/no-repeat-punctuation.js
index 89fc782da64..8033b6a9837 100644
--- a/tools/linting/no-repeat-punctuation.js
+++ b/tools/linting/no-repeat-punctuation.js
@@ -43,7 +43,8 @@ const rule = require('unified-lint-rule');
 const map = require('unist-util-map');
 const toList = require('unist-util-to-list-of-char');
 
-const punctuations = '！!~～.。,，·?？';
+// nb. We removed "~" here because it flagged strikethrough content.
+const punctuations = '！!～.。,，·?？';
 
 /* eslint-disable require-jsdoc */
 class Traveler {
diff --git a/tools/linting/no-smart-quotes.js b/tools/linting/no-smart-quotes.js
index 7fceb012f5f..5919d8629f0 100644
--- a/tools/linting/no-smart-quotes.js
+++ b/tools/linting/no-smart-quotes.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 Google LLC
+ * Copyright 2021 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,23 +23,18 @@ module.exports = rule('remark-lint:no-smart-quotes', noSmartQuotes);
 const reason = 'No smart quotes or apostrophes. Use a straight quote or apostrophe instead.';
 
 /**
- * Walk the AST for the markdown file and find any smart quotes or apostrophes.
+ * Walk the AST for the markdown file and find any smart quotes or
+ *   apostrophes in code blocks.
  * @param {*} tree An AST of the markdown file.
  * @param {*} file The markdown file.
  */
 function noSmartQuotes(tree, file) {
-  visit(tree, 'text', visitor);
+  visit(tree, ['code', 'inlineCode'], visitor);
 
   /* eslint-disable require-jsdoc */
   function visitor(node) {
-    const lines = node.value.split('\n');
-    let line;
-
-    for (let index = 0; index < lines.length; index++) {
-      line = lines[index].trim();
-      if (line.match(/[“”‘’]/g)) {
-        return file.message(reason, node);
-      }
+    if (node.value.match(/[‘’“”]/g)) {
+      return file.message(reason, node);
     }
   }
 }
diff --git a/tools/percy/.percy.conf.yml b/tools/percy/.percy.conf.yml
index 48c3040f4f6..eaece75a7cf 100644
--- a/tools/percy/.percy.conf.yml
+++ b/tools/percy/.percy.conf.yml
@@ -1,7 +1,20 @@
-version: 1
+version: 2
 snapshot:
-  widths: [375, 865, 1280]
+  widths:
+    - 375
+    - 865
+    - 1280
   percy-css: |
     iframe {
       display: none !important;
-    }
\ No newline at end of file
+    }
+    img.shows-card {
+      display: none !important;
+    }
+    video {
+      visibility: hidden !important;
+    }
+discovery:
+  network-idle-timeout: 250
+  disable-cache: true
+  concurrency: 20
diff --git a/tools/percy/snapshots.js b/tools/percy/snapshots.js
index 4ee6f145d9e..de56101c9fa 100644
--- a/tools/percy/snapshots.js
+++ b/tools/percy/snapshots.js
@@ -1,81 +1,66 @@
-const PercyScript = require('@percy/script');
+const percySnapshot = require('@percy/puppeteer');
+const puppeteer = require('puppeteer');
 const scrollToBottom = require('scroll-to-bottomjs');
+
 const pagesToTest = [
   {
     url: '/',
-    title: 'Home page',
-  },
-  {
-    url: '/learn/',
-    title: 'Learn page',
-  },
-  {
-    url: '/accessible/',
-    title: 'Collection page',
-  },
-  {
-    url: '/measure/',
-    title: 'Measure page',
+    name: 'Home page',
   },
   {
-    url: '/blog/',
-    title: 'Blog page',
+    url: '/handbook/content-types/example-landing-page/',
+    name: 'Landing page example',
   },
   {
-    url: '/test-post/',
-    title: 'Post page',
+    url: '/handbook/content-types/example-collection/',
+    name: 'Collection page example',
   },
   {
-    url: '/about/',
-    title: 'About page',
+    url: '/handbook/content-types/example-post/',
+    name: 'Post example',
   },
   {
-    url: '/codelab-avoid-invisible-text/',
-    title: 'Codelab page',
+    url: '/handbook/content-types/example-item-page/',
+    name: 'Item page example',
   },
   {
-    url: '/handbook/web-dev-components/',
-    title: 'Components page',
+    url: '/handbook/content-types/example-explore-page/',
+    name: 'Explore page example',
   },
   {
-    url: '/authors/',
-    title: 'Authors page',
+    url: '/handbook/content-types/example-course/',
+    name: 'Course page example',
   },
   {
-    url: '/authors/mgechev/',
-    title: 'Author page',
+    url: '/handbook/content-types/example-codelab/',
+    name: 'Codelab page example',
   },
   {
-    url: '/tags/',
-    title: 'Tags page',
+    url: '/handbook/content-types/example-pattern-set/',
+    name: 'Pattern-set page example',
   },
   {
-    url: '/podcasts/',
-    title: 'Podcasts page',
-  },
-  {
-    url: '/newsletter/',
-    title: 'Newsletter page',
-  },
-  {
-    url: '/live/',
-    title: 'Live page',
+    url: '/handbook/content-types/example-pattern/',
+    name: 'Pattern page example',
   },
 ];
 
 // A script to navigate our app and take snapshots with Percy.
-PercyScript.run(
-  async (browser, percySnapshot) => {
-    for (const page of pagesToTest) {
-      const url = new URL(page.url, 'http://localhost:8080').href;
-      await browser.goto(url, {waitUntil: 'networkidle0'});
-      await browser.evaluate(scrollToBottom);
-      // Wait for the SPA to update the active link in the top nav.
-      await browser.waitFor(5000);
-      await percySnapshot(`${page.title}`);
-    }
-  },
-  // These flags remove Percy's single-process flag. Without these, any page
-  // with an iframe will crash puppeteer (and percy).
-  {args: ['--no-sandbox', '--disable-setuid-sandbox']},
-);
+(async () => {
+  const browser = await puppeteer.launch({
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  for (const pageToTest of pagesToTest) {
+    const page = await browser.newPage();
+    await page.setViewport({height: 1024, width: 1280});
+
+    const url = new URL(pageToTest.url, 'http://localhost:8080').href;
+    await page.goto(url, {waitUntil: 'networkidle0'});
+    await page.evaluate(scrollToBottom);
+    await percySnapshot(page, `${pageToTest.name}`);
+    await page.close();
+  }
+
+  await browser.close();
+})();
diff --git a/tools/update-translated/index.js b/tools/update-translated/index.js
new file mode 100644
index 00000000000..3ba7c48cd3f
--- /dev/null
+++ b/tools/update-translated/index.js
@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Task for updating `translate` frontmatter field.
+ *
+ * Example: npm run translated && git commit -am 'Updated translated date for some blog posts'
+ */
+
+const fs = require('fs');
+const path = require('path');
+const moment = require('moment');
+
+const translatedFileRegExp = /site\/content\/(?!en).*\/(.*)\.md/;
+
+function isTranslatedFile(fileName) {
+  return fileName.match(translatedFileRegExp);
+}
+
+const run = async () => {
+  const fileNames = process.argv.slice(2)[0].slice(1, -1).split(',');
+  const translatedFiles = fileNames.filter(isTranslatedFile);
+
+  for (const fileName of translatedFiles) {
+    const now = moment().format('YYYY-MM-DD');
+    const changedFile = path.join(__dirname, '../..', fileName);
+    const newFile = changedFile.replace('index.md', 'index.json');
+    const content = fs.existsSync(newFile)
+      ? JSON.parse(fs.readFileSync(newFile))
+      : {};
+    content['translated'] = now;
+    fs.writeFileSync(newFile, JSON.stringify({translated: now}));
+    console.log(`Set translated: ${now} for ${changedFile}`);
+  }
+};
+
+run();
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000000..5d63fb44c68
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "allowJs": true,
+    "checkJs": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "dist",
+    "rootDir": "./",
+    "noEmit": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./",
+    "typeRoots": ["node_modules/@types", "types/modules"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*", "test/**/*", "types/**/*", "*.js"],
+  "exclude": [".github", ".vscode", "dist", "node_modules"]
+}
diff --git a/types/eleventy/collection-item.d.ts b/types/eleventy/collection-item.d.ts
new file mode 100644
index 00000000000..cd4612a7a82
--- /dev/null
+++ b/types/eleventy/collection-item.d.ts
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface EleventyCollectionItem {
+    /**
+     * The full path to the source input file (including the path to the input directory)
+     */
+    inputPath: string;
+    /**
+     * Mapped from the input file name, useful for permalinks. Read more about [`fileSlug`](https://www.11ty.dev/docs/data-eleventy-supplied/#fileslug).
+     */
+    fileSlug: string;
+    /**
+     * The full path to the output file to be written for this content
+     */
+    outputPath: string;
+    /**
+     * URL used to link to this piece of content.
+     */
+    url: string;
+    /**
+     * The resolved date used for sorting. Read more about [Content Dates](https://www.11ty.dev/docs/dates/).
+     */
+    date: Date;
+    /**
+     * All data for this piece of content (includes any data inherited from layouts)
+     */
+    data: {
+      authorsData: AuthorsData;
+      tagsData: TagsData;
+      paths: TODO;
+      countries: TODO;
+      event: TODO;
+      podcasts: TODO;
+      postHost: TODO;
+      postToPaths: TODO;
+      site: TODO;
+      pkg: TODO;
+      lang: string;
+      locale: string;
+      home: TODO;
+      layout: string;
+      description: string;
+      authors?: string[];
+      tags: string[];
+      show_banner: boolean;
+      eleventyComputed: TODO;
+      permalink: string;
+      title: string;
+      subhead: string;
+      date: Date;
+      thumbnail: string;
+      alt: string;
+      page: {
+        date: Date;
+        inputPath: string;
+        fileSlug: string;
+        filePathStem: string;
+        url: string;
+        outputPath: string;
+      };
+      renderData?: {
+        [key: string]: TODO;
+      };
+      pagination?: {
+        [key: string]: TODO;
+      };
+      collections: TODO;
+      /**
+       * Hero image of page.
+       */
+      hero?: string;
+      /**
+       * Thumbnail image of page.
+       */
+      thumbnail?: string;
+      /**
+       * Tells search engines not to index page (this includes algolia)
+       */
+      noindex?: boolean|string;
+      /**
+       * When the post was last updated.
+       */
+      updated?: Date;
+      /**
+       * If post is a draft.
+       */
+      draft?: boolean;
+      /**
+       * If the post should be excluded from /authors/ pages.
+       */
+      excludeFromAuthors?: boolean;
+      /**
+       * If the post should be excluded from /tags/ pages.
+       */
+      excludeFromTags?: boolean;
+      /**
+       * How Algolia should prioritize a page. 1 is average, higher is better.
+       */
+      algolia_priority: number;
+    };
+    /**
+     * The rendered content of this template. This does not include layout wrappers.
+     */
+    templateContent: unknown;
+    /**
+     * @UNDOCUMENTED
+     */
+    template: {
+      inputPath: string;
+      inputDir: string;
+      parsed: {
+        root: string;
+        dir: string;
+        base: string;
+        ext: string;
+        name: string;
+        extname: string;
+        basename: string;
+        dirname: string;
+        stem: string;
+        path: string;
+        absolute: string;
+        isAbsolute: boolean;
+      };
+      extraOutputSubdirectory: string;
+      outputDir: string;
+      _extensionMap: TODO;
+      linters: TODO;
+      transforms: TODO;
+      plugins: TODO;
+      templateData: TODO;
+      paginationData: TODO;
+      isVerbose: boolean;
+      isDryRun: boolean;
+      writeCount: number;
+      skippedCount: number;
+      wrapWithLayouts: boolean;
+      fileSlug: TODO;
+      fileSlugStr: string;
+      filePathStem: string;
+      _templateRender: TODO;
+      inputContent: string;
+      _config: TODO;
+      frontMatter: {
+        content: string;
+        data: TODO;
+        isEmpty: boolean;
+        excerpt: string;
+      };
+      _layoutKey: string;
+      _layout: TODO;
+      dataCache: TODO;
+      computedData: TODO;
+    };
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/eleventy/collection-object.d.ts b/types/eleventy/collection-object.d.ts
new file mode 100644
index 00000000000..c04eb69ce18
--- /dev/null
+++ b/types/eleventy/collection-object.d.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface EleventyCollectionObject {
+    all: EleventyCollectionItem[];
+    [tag: key]: EleventyCollectionItem[];
+    /**
+     * Unsorted items (in whatever order they were added)
+     */
+    getAll: () => EleventyCollectionItem[];
+    /**
+     * Use the default sorting algorithm (ascending by date, filename tiebreaker)
+     */
+    getAllSorted: () => EleventyCollectionItem[];
+    /**
+     * Get only content that matches a tag
+     */
+    getFilteredByTag: (tagName: string) => EleventyCollectionItem[];
+    /**
+     * Get only content that matches a tag
+     */
+    getFilteredByTags: (...tagNames: string[]) => EleventyCollectionItem[];
+    /**
+     * Filter source file names using a glob
+     */
+    getFilteredByGlob: (glob: string) => EleventyCollectionItem[];
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/eleventy/page.d.ts b/types/eleventy/page.d.ts
new file mode 100644
index 00000000000..bac46385004
--- /dev/null
+++ b/types/eleventy/page.d.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface EleventyPage {
+    page: {
+      date: any;
+      inputPath: string;
+      fileSlug: string;
+      filePathStem: string;
+      url: string;
+      outputPath: string;
+    }
+  };
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/lib/components/Feedback.d.ts b/types/lib/components/Feedback.d.ts
new file mode 100644
index 00000000000..de34661fcfc
--- /dev/null
+++ b/types/lib/components/Feedback.d.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export namespace WebFeedback {
+    export interface Question {
+      text: string;
+      label: string;
+      name: string;
+    }
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/lib/components/SearchResults.d.ts b/types/lib/components/SearchResults.d.ts
new file mode 100644
index 00000000000..317ebd6fe5b
--- /dev/null
+++ b/types/lib/components/SearchResults.d.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface WebSearchResults extends HTMLElement {
+    navigate: function;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/modules/webdev_analytics/index.d.ts b/types/modules/webdev_analytics/index.d.ts
new file mode 100644
index 00000000000..6569cd377dc
--- /dev/null
+++ b/types/modules/webdev_analytics/index.d.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module 'webdev_analytics' {
+  export declare const ids: {
+    GTM: string;
+  };
+  export declare const version: number;
+}
diff --git a/types/modules/webdev_config/index.d.ts b/types/modules/webdev_config/index.d.ts
new file mode 100644
index 00000000000..ee3779342ba
--- /dev/null
+++ b/types/modules/webdev_config/index.d.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module 'webdev_config' {
+  export declare const isProd: boolean;
+  export declare const firebaseConfig: {
+    apiKey: string;
+    authDomain: string;
+    databaseURL: string;
+    projectId: string;
+    storageBucket: string;
+    messagingSenderId: string;
+    appId: string;
+    measurementId: string;
+  };
+}
diff --git a/types/navigation/navigation-item.d.ts b/types/navigation/navigation-item.d.ts
new file mode 100644
index 00000000000..150e772a1a5
--- /dev/null
+++ b/types/navigation/navigation-item.d.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface NavigationItem {
+    url?: string,
+    title?: string,
+    children?: NavigationItem[],
+    data?: {
+      title: string,
+      description: string,
+      date: Date,
+      placeholder: string,
+    },
+    prev?: NavigationItem | null,
+    next?: NavigationItem | null,
+    counter?: string;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/navigation/navigation-toc.d.ts b/types/navigation/navigation-toc.d.ts
new file mode 100644
index 00000000000..f05dd828ff0
--- /dev/null
+++ b/types/navigation/navigation-toc.d.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface NavigationToC {
+    url?: string,
+    title?: string,
+    sections?: NavigationToC[],
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_collections/authors.d.ts b/types/site/_collections/authors.d.ts
new file mode 100644
index 00000000000..9bdf8f9f0a1
--- /dev/null
+++ b/types/site/_collections/authors.d.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface AuthorsItem extends VirtualCollectionItem, AuthorsDataItem {
+    data?: VirtualDataField;
+  }
+
+  export interface Authors {
+    [key: string]: AuthorsItem;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_collections/newsletters.d.ts b/types/site/_collections/newsletters.d.ts
new file mode 100644
index 00000000000..7b2af195288
--- /dev/null
+++ b/types/site/_collections/newsletters.d.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export type Newsletters = EleventyCollectionItem[];
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_collections/shows.d.ts b/types/site/_collections/shows.d.ts
new file mode 100644
index 00000000000..424d8791942
--- /dev/null
+++ b/types/site/_collections/shows.d.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface ShowsItem extends VirtualCollectionItem, ShowsDataItem {
+    data?: VirtualDataField;
+  }
+
+  export interface Shows {
+    [key: string]: ShowsItem;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_collections/tags.d.ts b/types/site/_collections/tags.d.ts
new file mode 100644
index 00000000000..01bf4be1497
--- /dev/null
+++ b/types/site/_collections/tags.d.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  interface TagsDataField extends VirtualDataField {
+    tags: string[];
+  }
+
+  export interface TagsItem extends VirtualCollectionItem, TagsDataItem {
+    data?: TagsDataField;
+    release?: number;
+  }
+
+  export interface Tags {
+    [key: string]: TagsItem;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_collections/virtual-collection.d.ts b/types/site/_collections/virtual-collection.d.ts
new file mode 100644
index 00000000000..a5c4aa9cbd4
--- /dev/null
+++ b/types/site/_collections/virtual-collection.d.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface VirtualDataField {
+    /**
+     * When the first post was created.
+     */
+    date?: Date;
+    /**
+     * Hero image of element.
+     */
+    hero?: string;
+    /**
+     * When the last post was last created.
+     */
+    updated?: Date;
+  }
+
+  export interface VirtualCollectionItem {
+    description: string;
+    elements: EleventyCollectionItem[];
+    href: string;
+    key: string;
+    overrideTitle?: string;
+    title: string;
+    url: string;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_data/authorsData.d.ts b/types/site/_data/authorsData.d.ts
new file mode 100644
index 00000000000..3faf508baa8
--- /dev/null
+++ b/types/site/_data/authorsData.d.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface AuthorsDataItem {
+    country?: string;
+    github?: string;
+    glitch?: string;
+    homepage?: string;
+    image?: string;
+    twitter?: string;
+    dcc?: string;
+    bio?: string;
+  };
+  export interface AuthorsData {
+    [key: string]: AuthorsDataItem;
+  };
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_data/patterns.d.ts b/types/site/_data/patterns.d.ts
new file mode 100644
index 00000000000..fa0da89eafa
--- /dev/null
+++ b/types/site/_data/patterns.d.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface CodePatternAssets {
+    [key: string]: {
+      name: string;
+      type: string;
+      content: string;
+    }
+  }
+  export interface CodePattern {
+    id: string;
+    layout: string;
+    title: string;
+    description: string;
+    static?: string[];
+    assets: CodePatternAssets;
+    demo: string;
+    suite: string;
+    height: number;
+    rawContent: string;
+    set: string;
+  }
+  export interface CodePatterns {
+    [key: string]: CodePattern;
+  }
+  export interface CodePatternSet {
+    id: string;
+    title: string;
+    description: string;
+    hero: string;
+    draft: boolean;
+    rawContent: string;
+    suite: string;
+  }
+  export interface CodePatternSets {
+    [key: string]: CodePatternSet;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_data/showsData.d.ts b/types/site/_data/showsData.d.ts
new file mode 100644
index 00000000000..3d9952b5387
--- /dev/null
+++ b/types/site/_data/showsData.d.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface ShowsDataItem {
+    playlistId: string;
+  }
+
+  export interface ShowsData {
+    [key: string]: ShowsDataItem;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_data/tagsData.d.ts b/types/site/_data/tagsData.d.ts
new file mode 100644
index 00000000000..d17c84cbca0
--- /dev/null
+++ b/types/site/_data/tagsData.d.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface TagsDataItem {
+    image?: string;
+  }
+  export interface TagsData {
+    [key: string]: TagsDataItem;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_filters/paged-navigation.d.ts b/types/site/_filters/paged-navigation.d.ts
new file mode 100644
index 00000000000..42690cffa6e
--- /dev/null
+++ b/types/site/_filters/paged-navigation.d.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface PagedNavigation {
+    showEllipses?: boolean;
+    index: number;
+    href: string;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Assessment/TargetAssessment.d.ts b/types/site/_includes/components/Assessment/TargetAssessment.d.ts
new file mode 100644
index 00000000000..d10c258367b
--- /dev/null
+++ b/types/site/_includes/components/Assessment/TargetAssessment.d.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface TargetAssessment {
+    setLeader?: string,
+    height?: string,
+    tabLabel: "question" | "sample" | "bare",
+    questions: TargetAssessmentQuestion[],
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Assessment/TargetAssessmentOption.d.ts b/types/site/_includes/components/Assessment/TargetAssessmentOption.d.ts
new file mode 100644
index 00000000000..76b6055e858
--- /dev/null
+++ b/types/site/_includes/components/Assessment/TargetAssessmentOption.d.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface TargetAssessmentOption {
+    content?: string,
+    rationale: string,
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Assessment/TargetAssessmentQuestion.d.ts b/types/site/_includes/components/Assessment/TargetAssessmentQuestion.d.ts
new file mode 100644
index 00000000000..e6f05b2a3cb
--- /dev/null
+++ b/types/site/_includes/components/Assessment/TargetAssessmentQuestion.d.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface TargetAssessmentQuestion {
+    type: string,
+    stimulus?: string,
+    stem: string,
+    cardinality?: string,
+    correctAnswers?: string,
+    options: TargetAssessmentOption[],
+    columns?: boolean,
+    components?: TargetAssessmentQuestion[],
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Author.d.ts b/types/site/_includes/components/Author.d.ts
new file mode 100644
index 00000000000..cee049387d7
--- /dev/null
+++ b/types/site/_includes/components/Author.d.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface AuthorParam {
+    /** Id of the author, used for logging errors */
+    id?: string;
+    author: {
+      /** i18n path to author's name */
+      title: string;
+      /** i18n path to author's description */
+      description?: string;
+      /** Author's image from the uploader tool */
+      image: string;
+      /** Href to author's page */
+      href: string;
+      /** Author's username for Twitter */
+      twitter?: string;
+      /** Author's username for GitHub */
+      github?: string;
+      /** Author's username for glitch */
+      glitch?: string;
+      /** Author's website */
+      homepage?: string;
+    } | AuthorsItem;
+    /** Locale to display title and description in, defaults to `en` */
+    locale?: string;
+    /** Flag as to wether social media links should be shown, defaults to `false` */
+    showSocialMedia?: boolean;
+    /** Flag as to wether description should be shown, defaults to `false` */
+    showDescription?: boolean;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Codepen.d.ts b/types/site/_includes/components/Codepen.d.ts
new file mode 100644
index 00000000000..bbc0fbc1874
--- /dev/null
+++ b/types/site/_includes/components/Codepen.d.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface CodepenParam {
+    height?: number;
+    tab?: string;
+    theme?: string;
+    title?: string,
+    user: string,
+    width?: string | number;
+    id: string,
+    allow?: Array.<string>,
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_includes/components/Glitch.d.ts b/types/site/_includes/components/Glitch.d.ts
new file mode 100644
index 00000000000..5290298555c
--- /dev/null
+++ b/types/site/_includes/components/Glitch.d.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface GlitchParam {
+    allow?: string | string[];
+    height?: number;
+    id: string;
+    path?: string;
+    previewSize?: number;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/site/_utils/add-pagination.d.ts b/types/site/_utils/add-pagination.d.ts
new file mode 100644
index 00000000000..011e5504f0d
--- /dev/null
+++ b/types/site/_utils/add-pagination.d.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface AdditionalData {
+    href?: string;
+    description?: string;
+    tag?: string;
+    title?: string;
+  }
+  export interface Paginated {
+    title?: string;
+    href?: string;
+    description?: string;
+    tag?: string;
+    elements: Array<TODO>;
+    index: number;
+    pages: number;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/algolia.d.ts b/types/utils/algolia.d.ts
new file mode 100644
index 00000000000..a14ed40e466
--- /dev/null
+++ b/types/utils/algolia.d.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface AlgoliaItem {
+    content?: string;
+    createdOn?: Date;
+    description?: string;
+    image?: string;
+    /**
+     * Date of index, only available after indexed. Basically can only be used by search.
+     */
+    indexedOn?: number;
+    locale: string;
+    locales: string[];
+    /**
+     * ID of item used to update existing entry.
+     */
+    objectID: string;
+    priority: number;
+    tags: string[];
+    /**
+     * Title of a post.
+     */
+     title: string;
+     updatedOn?: Date;
+     url: string;
+
+    /**
+     * Title of the parent page (by path.)
+     */
+    parentTitle?: string;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/element.d.ts b/types/utils/element.d.ts
new file mode 100644
index 00000000000..dfec8f8183f
--- /dev/null
+++ b/types/utils/element.d.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface HTMLElement extends HTMLElement {
+    inert: boolean;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/event.d.ts b/types/utils/event.d.ts
new file mode 100644
index 00000000000..9d819b2dbf5
--- /dev/null
+++ b/types/utils/event.d.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export interface WMouseEvent<T extends HTMLElement> extends MouseEvent {
+    target: T;
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/global.d.ts b/types/utils/global.d.ts
new file mode 100644
index 00000000000..782e171471e
--- /dev/null
+++ b/types/utils/global.d.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as firebase from 'firebase';
+
+interface WebComponentsType {
+  root?: string;
+  waitFor?: (arg: () => any) => void;
+}
+
+declare global {
+  interface Window extends Window {
+    inert: boolean;
+    recaptchaLoadCallback?: () => void;
+    loadScript?: (url: string, type?: string) => void;
+    dataLayer?: Array;
+  }
+
+  interface Navigator {
+    connection: NetworkInformation;
+    deviceMemory: number;
+  }
+
+  interface PerformanceEntry {
+    deliveryType: string;
+    activationStart: number;
+    type: string;
+  }
+
+  interface NotRestoredReasons {
+    url: string;
+    src: string;
+    id: string;
+    name: string;
+    blocked: boolean;
+    reasons: [string];
+    children: [NotRestoredReasons];
+  }
+
+  interface PerformanceNavigationTiming {
+    deliveryType: string;
+    activationStart: number;
+    notRestoredReasons: NotRestoredReasons
+  }
+
+  var WebComponents: WebComponentsType;
+  var firebase: firebase.app.App;
+}
diff --git a/types/utils/intl.d.ts b/types/utils/intl.d.ts
new file mode 100644
index 00000000000..63961f14ed6
--- /dev/null
+++ b/types/utils/intl.d.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  /**
+   * @TODO Remove when typing is more supported.
+   */
+  declare namespace Intl {
+    class ListFormat {
+      constructor(lang: string);
+      public format: (items: string[]) => string;
+    }
+  }
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/navigator.d.ts b/types/utils/navigator.d.ts
new file mode 100644
index 00000000000..a35e8019527
--- /dev/null
+++ b/types/utils/navigator.d.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface Navigator {
+  canShare(data: ShareData): boolean;
+}
diff --git a/types/utils/npm-dependencies.d.ts b/types/utils/npm-dependencies.d.ts
new file mode 100644
index 00000000000..33e7883f4a7
--- /dev/null
+++ b/types/utils/npm-dependencies.d.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export {TemplateResult, PropertyValues} from 'lit';
+}
+
+// empty export to keep file a module
+export {};
diff --git a/types/utils/todo.d.ts b/types/utils/todo.d.ts
new file mode 100644
index 00000000000..f922bc54286
--- /dev/null
+++ b/types/utils/todo.d.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare global {
+  export type TODO = any;
+  export type CombinedAuditAndAuditRef = TODO;
+  export type LighthouseLastRunDetail = TODO;
+  export type LighthouseScore = TODO;
+}
+
+// empty export to keep file a module
+export {};
diff --git a/version-check.js b/version-check.js
new file mode 100644
index 00000000000..7b845e2f13e
--- /dev/null
+++ b/version-check.js
@@ -0,0 +1,79 @@
+/**
+ * @fileoverview This file compares the current commit SHA against the one
+ * of the deployed site. If they are different then another Cloud Build task
+ * is kicked off ('deploy.yml').
+ */
+
+const fetch = require('node-fetch');
+const {ErrorReporting} = require('@google-cloud/error-reporting');
+const {execSync} = require('child_process');
+const {CloudBuildClient} = require('@google-cloud/cloudbuild');
+
+const client = new CloudBuildClient();
+const errors = new ErrorReporting();
+const ERROR_MESSAGE = 'NOT FOUND';
+
+const deployTriggerId = '616df5ff-f33e-48ea-bfc9-1ab92121b5ba';
+
+/**
+ * @returns {Promise<string>}
+ */
+const getDeployedVersion = () => {
+  // @ts-ignore
+  return fetch('https://web.dev/version')
+    .then((res) => (res.ok ? res.text() : ERROR_MESSAGE))
+    .catch(() => ERROR_MESSAGE);
+};
+
+(async () => {
+  const deployedVersion = await getDeployedVersion();
+  const currentVersion = execSync('git rev-parse HEAD').toString().trim();
+
+  console.log(`Current version: ${currentVersion}`);
+  console.log(`Deployed version: ${deployedVersion}`);
+
+  if (deployedVersion === ERROR_MESSAGE) {
+    errors.report('Deployed commit SHA not found');
+  }
+
+  if (deployedVersion === currentVersion) {
+    console.log(
+      'The current and deployed versions are the same, not continuing build.',
+    );
+    return;
+  }
+
+  console.log(
+    'The current and deployed versions are different, kicking off deploy build.',
+  );
+
+  // Check if there are any existing builds.
+  const ret = client.listBuildsAsync({
+    projectId: process.env.PROJECT_ID,
+    pageSize: 1,
+    filter: `trigger_id="${deployTriggerId}" AND (status="WORKING" OR status="QUEUED")`,
+  });
+  let activeBuild = false;
+  // eslint-disable-next-line no-unused-vars
+  for await (const _build of ret) {
+    activeBuild = true;
+    break;
+  }
+  if (activeBuild) {
+    console.log(
+      'There is a current active or queued build. Not starting another.',
+    );
+    return;
+  }
+
+  try {
+    // This just waits for the build to be kicked off, not for its completion (it
+    // returns a LROperation).
+    await client.runBuildTrigger({
+      projectId: process.env.PROJECT_ID,
+      triggerId: deployTriggerId,
+    });
+  } catch (e) {
+    errors.report(e);
+  }
+})();